@charset "utf-8";

body{
-webkit-print-color-adjust: exact;
color:#222222; /* */
font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", 游ゴシック, "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
-webkit-text-size-adjust: 100%;
line-height:1.5em;
text-align:center;
}
html{
  -webkit-font-smoothing: antialiased;
}

/* リンク */
a:link{
color:#222222; /* 色 */
text-decoration:none;
}
a:visited{
color:#222222; /* 色 */
text-decoration:none;
}
a:hover {
color:#222222; /* 色 */
text-decoration:none;
}
a:active {
color:#222222; /* 色 */
text-decoration:none;
}

#wrapper{
  width:100%;
  overflow-x: hidden;
}

.image{
  font-size: 0;
  line-height: 0;
}
.image img{
  max-width: 100%;
  height: auto;
}

/* .image-e
----------------------- */
.image-e img{
  opacity:1;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";
  transition-property: opacity,filter;
  transition: 0.2s linear;
}
.image-e:hover img{
  opacity:.6;filter: alpha(opacity=60);-ms-filter: "alpha(opacity=60)";
}
/* .image-z
----------------------- */
.image-z {
  font-size: 0;
  line-height: 0;
  text-align: center;
  overflow: hidden;
}
.image-z img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.image-z__hover {
  transform: scale(1);
  transition-property: transform,-webkit-transform;
  transition: 0.1s linear;
}
a:hover .image-z__hover {
  transform: scale(1.1);
  transform-origin: 50% 50%;
}

.show{display: block !important;}
.hide{display: none !important;}

@media print, screen and (min-width:768px){
body{
 font-size:16px;
 min-width:1080px;
}
.spVer{
  display: none !important;
}
}

@media screen and (max-width: 767px){
body{
 font-size:3.5vw;
 line-height: 1.6em;
}
.pcVer{
  display: none !important;
}
#wrapper{
  overflow-x: hidden;
}
}
.icon-inline{
  display: inline-block;
  vertical-align: text-top;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.5em;
}
.icon-inline svg{
  width: 1.2em;
  height: 1.2em;
  fill:currentColor;
}

/* ========================================================
.header-area
======================================================== */
.header-area{
  padding: 20px 25px;
  text-align: left;
}
.header-logo{
  display: inline-block;
  vertical-align: middle;
}
.header-logo a{
  display: block;
  width: 350px;
}
.header-lead{
  display: inline-block;
  vertical-align: middle;
  font-weight: bold;
  color: #004EA2;
  font-size: 28px;
  margin-left: 2em;
}
@media screen and (max-width: 767px){
  .header-area{
    padding: 2.5vw 5vw;
  }
  .header-logo{
    display: block;
  }
  .header-logo a{
    display: block;
    width: 38vw;
  }
  .header-lead{
    display: block;
    font-size: 4.6vw;
    margin-left: 0;
    text-align: center;
    margin-top: 5vw;
  }
}
/* ========================================================
.footer-area
======================================================== */
.footer-area{
  background-color: #D6E2F2;
  padding: 1em;
  margin-top: 60px;
  width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and (max-width: 767px){
  .footer-area{
    padding: 1em 5vw 2em;
    margin-top: 15vw;
  }
}
/* .footer-link
----------------------- */
.footer-link{
  display: flex;
  justify-content: center;
  gap: 0 40px;
}
.footer-copy{
  margin-top: 2em;
}
@media screen and (max-width: 767px){
  .footer-link{
    display: block;
    text-align: left;
  }
  .footer-link li{
    margin-top: 0.2em;
  }
}
/* ========================================================
.content-area
======================================================== */
.content-area{
  max-width: 1320px;
  padding: 0 50px;
  margin: 40px auto 0;
  text-align: left;
  word-break:break-all;
}
@media screen and (max-width: 767px){
  .content-area{
    margin: 5vw 5vw 0;
    padding: 0;
  }
}
/* .content-list
----------------------- */
.content-list{
  display: flex;
  justify-content: center;
  gap: 40px 48px;
}
.content-list li{
  width: calc((100% - 96px) / 3);
}
.content-list li a{
  display: block;
}
.content-list li a .image{
  border: solid 1px #D9D9D9;
}
.content-list li a .content-list__ttl{
  color: #004EA2;
  border-bottom: solid 1px #004EA2;
  font-size: 18px;
  line-height: 1.8em;
  padding-bottom: 0.2em;
  margin-top: 0.6em;
}
.content-list__detail{
  margin-top: 1em;
}
@media screen and (max-width: 767px){
  .content-list{
    display: block;
  }
  .content-list li{
    width: 100%;
  }
  .content-list li:not(:first-of-type){
    margin-top: 10vw;
  }
  .content-list li a .content-list__ttl{
    font-size: 4.1vw;
  }
}

.content-title{
  color: #004EA2;
  font-size: 24px;
}
.content-subtitle{
  color: #004EA2;
  font-size: 20px;
  margin-top: 2em;
}
.content-lead{
  font-size: 18px;
  margin-top: 2em;
}
.content-subtitle + .content-lead{
  margin-top: 1.5em;
}
.content-textbox p{
  margin-top: 1.3em;
}
.content-textbox a{
  color: #004EA2;
  text-decoration: underline;
}
.content-textbox a:hover{
  text-decoration: none;
}
@media screen and (max-width: 767px){
  .content-title{
    font-size: 4.6vw;
  }
  .content-subtitle{
    font-size: 4.1vw;
  }
  .content-lead{
    font-size: 4.1vw;
  }
}
/* .dot-list
----------------------- */
.content-textbox .dot-list{
  margin-top: 2em;
}
.number-list .dot-list{
  margin-left: 1em;
}
.dot-list > li{
  padding-left: 1em;
  text-indent: -1em;
  margin-top: 2em;
}
.dot-list.margin-min > li{
  margin-top: 0.3em;
}
.dot-list > li > *{
  text-indent: 0;
}
.dot-list > li::before{
  content: "・";
  display: inline-block;
  width: 1em;
  text-indent: 0;
}
@media screen and (max-width: 767px){
}
/* .number-list
----------------------- */
.number-list{
  list-style: none;
  counter-reset: chapter;
}
.number-list > li{
  margin-top: 2em;
}
.number-list > li::before{
  counter-increment: chapter;
  content:""counter(chapter)".";
  margin-right: 0.3em;
  display: inline-block;
}
@media screen and (max-width: 767px){
}
/* .colorBt
----------------------- */
.colorBt{
  margin: 2em 0 0;
  text-align: center;
}
.colorBt a{
  background: none #004EA2;
    color: #fff;
    text-align: center;
    padding: 0.8em 2em;
    position: relative;
    text-decoration: none;
    display: inline-block;
    border-radius: 40px;
    font-weight: bold;
    line-height: 1.4;
    border: 1px #004EA2 solid;
    transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.colorBt a:hover{
  background: #fff;
  color: #004EA2;
}
.colorBt a .icon-inline svg{
  fill:#fff;
  transition: all 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.colorBt a:hover .icon-inline svg{
  fill:#004EA2;
}
@media screen and (max-width: 767px){
}