/* Typography */
body{
color:#07081c;
}
body, ul, li, p, a, label, input, div {
  font-family: 'Roboto', "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
}
section, section.cta{
  padding: 2.5rem 0;
}
.container{
  max-width: 1000px;
}
h1, h2, h3, .h1,.h2,.h3{
  letter-spacing: -.02em;
}
h1 {
  font-size: 24px !important;
  font-weight: 700 !important;
  text-align: center;
}
h2 {
  font-size: 20px !important;
  font-weight: 700;
  position: relative;
  line-height: 1.4;
}

img{
 image-rendering: -webkit-optimize-contrast;
  max-width: 100%;
}
/***************     white BG    ********************/
.white_bg{
background:#fff;
border-radius:20px;
padding:3rem 0;
}
.white_bg2{
background:rgba(255,255,255,.8);
border-radius:20px;
padding:3rem 0;
}

/***************     BG    ********************/
.bg02{
background:#108ddf url(../img/bg02.webp) no-repeat top center;
background-size: 100% auto;
}
.bg03{
background:#eaeeef url(../img/bg03.webp) no-repeat bottom left;
background-size:200% auto;
padding-bottom:220px;
}
.bg-koushi{
background:#fff url(../img/bg-koushi.png) top center;
}
.bg-gray{ background-color:#eaeeef; }
.bg-blue{ background-color:#cff1fa; }
.bg-blue2{ background-color:#12baf9; }

/***************     text    ********************/

.black{ color:#07081c; }
.red{ color:#f23645; }
.blue{ color:#108dde; }
.bold{ font-weight:bold; }
.marker{ background:linear-gradient(transparent 70%, #ffd229 70%); }
.u_line{text-decoration:underline;}
/***************     header    ********************/

header{
background:#fff url(../img/header-bg.webp) no-repeat top center;
background-size: 100% auto;
}
.topimg{
width:70%;
}
.att {
border-top:2px solid #f23645;
border-bottom:2px solid #f23645;
padding:2em 0;
}
.att h2{
background:#f23645;
padding:.5em 1em;
display:inline-block;
color:#fff;
font-size:1.3em !important;
line-height:1.2em;
}
.att p{
font-size:1.2em;
line-height:1.4em;
}

/***************     arrow    ********************/
section.arrow{
position:relative;
padding-top:100px;
}
section.arrow::before{
  content: "";
  position: absolute;
  bottom:100%;
  left: 50%;
  border-style: solid;
  border-width: 80px 150px 0 150px;
  border-color: #eaeeef transparent transparent;
  translate: -50% 100%;
}

/***************     profile    ********************/
#profile{
background:#cff1fa
}
#profile .name01{
font-size:1rem;
line-height:1.5rem;
font-weight:600;
display:inline-block;
background:#108ddf;
color:#fff;
padding:.2em .5em;
letter-spacing:0;
}
#profile .name02{
font-size:1.8rem;
line-height:1.5rem;
font-weight:600;
letter-spacing:.3em;
padding:0 .5em 0 1em;
}
.profile-text{
font-size:1.1rem;
line-height:1.5em;
font-weight:600;
}
.profile-box{
border-left:6px solid #108ddf;
padding-left:1em;
margin-bottom:1em;
}

.profile-box h3{
font-size:1.2rem;
line-height:1.5em;
font-weight:600;
color:#108ddf;
}
.profile-box p{
font-size:.9rem;
line-height:1.5em;
}
.profile-box02{
background:#fff;
border:10px solid #f7d420;
padding:2.5rem 1.5rem;
border-radius:30px;
}

/***************     reason    ********************/
.reson-title{
border-bottom:2px dashed #108dde;
margin-bottom:1em;
padding-bottom:1em;
}
.reson01{
font-size:1.5rem;
line-height:1.5em;
color:#108dde;
}
.reson01 span{
font-size:1.8rem;
line-height:1.5em;
color:#108dde;
}
.reson02{
font-size:1.4rem;
line-height:1.5em;
color:#fff;
background:#108dde;
display:inline-block;
padding:.2em;
}

/***************     schedule    ********************/
table{
border-spacing: 0 1rem;
}
table th{
width:29%;
background:#cff1fa;
text-align:center;
vertical-align:middle;
padding:1rem;
}
table td{
width:70%;
padding:1rem;
}

.schedule{
border-bottom:2px dashed #07081c;
margin-bottom:2em;
}
.schedule h3{
font-size:2.5rem;
line-height:1.5em;
font-weight:400;
border-left:10px solid #ccc;
padding-left:.5rem;
}
.schedule h3 span{
font-size:1.2rem;
line-height:1.5em;
font-weight:400;
display:inline-block;
padding-left:.5rem;
}
.yellow-bg{
font-size:2rem;
line-height:1.5em;
padding:1em;
border-radius:20px;
background:#fff6d5;
margin:1em auto;
}
.yellow-bg ol li{
font-size:1.4rem;
line-height:1.5em;
margin-bottom:.8em;
}

/***************     cta    ********************/
.kessai-top{
background:#fff;
border-radius:40px 40px 0 0;
padding:3rem 0;
}
.kessai-bottom{
background:#f0f0f0;
border-radius:0 0 40px 40px;
padding:3rem 0;
}

a.mainbtn{
font-size:1.2rem;
font-weight:600;
line-height:1.5em;
background:#0abea5;
border-radius:10px;
color:#fff;
text-align:center;
padding:1em;
display:inline-block;
margin:1em auto .5em;
position:relative;
transition-duration: 0.3s;
text-decoration:none;
}
a.mainbtn:hover{
transform: translate(0,-4px);
opacity:.8;
color:#fff;
}
.hamon {
    max-width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 10px;
    animation: btnwrapanime 1.5s infinite;
    box-shadow: 0 0 0 0 rgb(11, 170, 104);
}

@keyframes btnwrapanime {
    70% {
        box-shadow: 0 0 0 10px rgba(233, 30, 99, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(233, 30, 99, 0);
    }
}

.bg-cta{
background-color:#fefaef;
}


/***************     subtitle    ********************/
.subtitle{
font-size:1.5em !important;
font-weight:600;
line-height:130%;
margin:0 auto 1rem;
text-align:center;
position:relative;
}
.subtitle .small{
font-size:.5em;
display:block;
font-weight:300;
letter-spacing:.2em;
}
.subtitle-yellow{
font-size:1.4em !important;
font-weight:600;
line-height:130%;
margin:0 auto 3rem;
text-align:center;
position:relative;
background:#fed229;
padding:1em 0;
}
.subtitle-yellow::before{
  content: "";
  position: absolute;
  bottom:0;
  left: 50%;
  border-style: solid;
  border-width: 30px 50px 0 50px;
  border-color: #fed229 transparent transparent;
  translate: -50% 100%;
}



/***************     faq    ********************/
#faq dl {
margin-bottom:1em;
}
#faq dl dt{
background:#108ddf;
color:#fff;
padding:1em 1em 1em 3em;
position:relative;
font-size:1.2em;
line-height:1.4em;
}
#faq dl dt::before{
  content: "Q";
  position: absolute;
  top:.5em;
  left: .5em;
font-size:1.6em;
}
#faq dl dd{
background:#fff;
padding:1em 1em 1em 3em;
position:relative;
}

#faq dl dd::before{
  content: "A";
  position: absolute;
  top:.1em;
  left:.5em;
font-size:2em;
font-weight:600;
color:#fc3d4c;
}

/***************     footer    ********************/
footer{
background:#121327;
color:#fff;
padding:1em;
margin:0;
}
footer p,footer a{
font-size:1rem;
margin-bottom:0;
}
footer a{
color:#fff;
text-decoration:none;
}
footer a:hover{
color:#fff;
text-decoration:underline;
}


/* tablet */
@media (min-width: 768px) {

/***************     subtitle    ********************/
.subtitle{
font-size:2.3em !important;
line-height:130%;
margin:0 auto 3rem;
}
.subtitle02{
font-size:2em !important;
line-height:130%;
}

 }
/* PC */
@media (min-width: 960px) {
body, ul, li, p, a, label, input, div {
  font-size: 20px;
  line-height:1.6em;
  font-weight: 400;
}
p{margin-top:1.1em;}
/***************     header    ********************/
header{
background:#fef6f2 url(../img/header-bg.webp) no-repeat top center;
background-size: 100% auto;
padding:2rem 0;
}


/***************     profile    ********************/
#profile{
background:url(../img/profile-bg.webp) no-repeat top center;
background-size: cover;
}

#profile .name01{
font-size:1.5rem;
line-height:1.5rem;
font-weight:600;
display:inline-block;
background:#108ddf;
color:#fff;
padding:.2em .5em;
letter-spacing:0;
}
#profile .name02{
font-size:3rem;
line-height:1.5rem;
font-weight:600;
letter-spacing:.3em;
padding:0 .5em;
}
.profile-text{
font-size:1.7rem;
line-height:1.5em;
font-weight:600;
}
.reson01{
font-size:1.8rem;
line-height:1.5em;
color:#108dde;
}
.reson01 span{
font-size:2.2rem;
line-height:1.5em;
color:#108dde;
}
.reson02{
font-size:1.6rem;
line-height:1.5em;
color:#fff;
background:#108dde;
display:inline-block;
padding:.2em;
}

.bg03{
background:url(../img/bg03.webp) no-repeat bottm left;
background-size:cover;
padding-bottom:2.5em;
}
.subtitle-yellow{
font-size:2em !important;
font-weight:600;
line-height:130%;
}
.subtitle-yellow::before{
  content: "";
  position: absolute;
  bottom:0;
  left: 50%;
  border-style: solid;
  border-width: 40px 70px 0 70px;
  border-color: #fed229 transparent transparent;
  translate: -50% 100%;
}
a.mainbtn{
font-size:2rem;
line-height:1.5em;
}
#faq dl dd::before{
  top:.5em;
}
}