/*------------------------------------------------------------
BODY BASIC
------------------------------------------------------------*/
body{
font-size:3.5vw;
line-height:1.75;
font-feature-settings:'palt';
font-weight:500;
}

body.menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/*------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------*/
.pconly{ display:none; }
.sponly{ display:block; }


/*------------------------------------------------------------
HEADER
------------------------------------------------------------*/
header{
padding:5.51vw 7.73vw 7.29vw;
}
.h-logo{
width:61.51vw;
}




/*------------------------------------------------------------
DRAWER MENU
------------------------------------------------------------*/
#menuBtn{
position:fixed;
top:9.07vw;
right:4.71vw;
width:9.78vw;
height:7.64vw;
cursor:pointer;
z-index:9999;
}
#menuBtn span{
display:block;
position:absolute;
height:0.9vw;
width:100%;
border-radius:.45vw;
background:#005bac;
left:0;
transition:all 0.2s ease-in-out;
}

#menuBtn span:nth-child(1){
top:0;
}
#menuBtn span:nth-child(2){
top:calc(3.82vw - .45vw);
}
#menuBtn span:nth-child(3){
top:calc(7.64vw - .9vw);
}

.active#menuBtn span:nth-child(1){
top:2.4vw;
transform:rotate(45deg);
background:#fff;
}
.active#menuBtn span:nth-child(2){
width:0;
left:50%;
}

.active#menuBtn span:nth-child(3){
top:2.4vw;
transform:rotate(-45deg);
background:#fff;
}

#menuBox{
display:none;
width:100%;
background:rgba(0, 91, 172, .95);
height:100vh;
position:fixed;
top:0;
left:0;
box-sizing:border-box;
z-index:9998;
}

#menuBox.active{
display:block;
}

.menuInner{
width:100%;
height:100dvh;
display:flex;
align-items:center;
}

.menu{
width:70vw;
margin:0 auto;
}
.menu li a{
font-size:5vw;
line-height:1.75;
font-weight:bold;
color:#fff;
padding:4vw 0;
display:block;
}




/*------------------------------------------------------------
CONTENT
------------------------------------------------------------*/
#index1{
padding:10.67vw 0 18.67vw;;
}

.i1-cont {
  width: 79.47vw;
  padding: 10.22vw 6.67vw 40vw;
  margin: 0 auto;
  position: relative;
  border-radius: 1.78vw;
  background: #fff; /* 内側の背景 */
  z-index: 0;       /* 疑似要素より上にする */
  font-size:4.44vw;
line-height:8.18vw;

}
.i1-cont::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.89vw; /* ボーダーの太さ */
  background: linear-gradient(to right, #005bac, #00b3c4);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none; /* 枠がクリックを邪魔しないように */
  z-index: -1;          /* 背景の下に置く */
}

#index1 h2{
font-size:8.89vw;
line-height:1.4;
color:#005bac;
font-weight:bold;
margin-bottom:4.89vw;
text-align:center;
}
.ill-toha{
width:87.20vw;
height:44.44vw;
background:url(img/ill-toha.svg) no-repeat;
background-size:87.20vw;
position:absolute;
bottom:-7.47vw;
left:50%;
transform:translate(-50%, 0);
}


#index2{
background:#e5eff7;
padding:11.38vw 0 9.33vw;
}

#index2 h2{
font-size:7.11vw;
line-height:10.67vw;
margin-bottom:6.22vw;
text-align:center;
color:#005bac;
}

.ov{
width:79.38vw;
margin:0 auto;
}
.ov dt{
width:79.38vw;
height:5.33vw;
background:linear-gradient(to right, #005bac, #00b3c4);
color:#fff;
font-size:3.56vw;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:2.67vw;
margin-bottom:3.11vw;
letter-spacing:.7em;
font-weight:bold;
}

.ov dd{
margin-bottom:5.33vw;
position:relative;
}


.ov-txt{
font-size:5.33vw;
line-height:7.11vw;
text-align:center;
}

.ov-txt2{
text-align:center;
font-size:6.22vw;
line-height:9.00vw;
color:#005bac;
font-weight:900;
}
.ov-txt3{
font-size:4.44vw;
line-height:6.22vw;
color:#005bac;
text-align:center;
font-weight:bold;
margin-bottom:2vw;
}

.ov-txt4{
font-size:5.33vw;
line-height:7.11vw;
font-weight:bold;
color:#005bac;
margin-bottom:1.5vw;
}


.ov-p-c{
text-align:center;
font-size:3.56vw;
line-height:5.5vw;
}
.ov-p{
width:51.56vw;
font-size:3.56vw;
line-height:5.33vw;
}

.ill-entry{
width:27.73vw;
height:39.73vw;
background:url(img/ill-entry.svg) no-repeat;
background-size:27.73vw;
position:absolute;
bottom:0;
right:-5.78vw;
}


.ov-bnr{
width:69.69vw;
margin:0 auto 3.56vw;
border-radius:1.78vw;
background:#fff;
padding:6.22vw 3.73vw;
}
.ov-bnr-ttl{
width:100%;
height:5.33vw;
text-align:center;
font-size:3.56vw;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:#ffff00;
background:#005bac;
border-radius:2.67vw;
margin:0 auto 3.11vw;
}
.ov-bnr-desc{
font-size:3.56vw;
line-height:5.33vw;
color:#005bac;
margin-bottom:2.67vw;
}
.ov-waribiki{
margin-bottom:1.78vw;
}
.ov-bnr-att{
font-size:3.56vw;
line-height:4.44vw;
}
.toutologo{
width:39vw;
margin:0 auto 2vw;
}

.ov-bnr-cap{
font-size:3.5vw;
line-height:5vw;
text-align:center;
}
.ov-bnr-cap a{
font-size:4.44vw;
color:#005bac;
font-weight:bold;
display:block;
}



#index3{
padding:9.78vw 0;
}
#index3 h2{
font-size:7.11vw;
line-height:10.67vw;
text-align:center;
color:#005bac;
margin:0 auto 6.22vw;
}

.flow{
width:79.47vw;
margin:0 auto;
}


.flow dt{
color:#005bac;
font-size:3.56vw;
font-weight:bold;
display:flex;
align-items:center;
text-align:center;
justify-content:center;
border:2px solid #005bac;
border-radius:1.78vw;
height:6.22vw;
margin-bottom:3.11vw;
letter-spacing:.7em;
padding-left:.7em;
}
.flow dt.goal{
background: linear-gradient(to right, #005bac, #00b3c4) !important;
color:#fff !important;
border:none;
}

.flow dd{
padding-bottom:13.33vw;
position:relative;
text-align:center;
}
.flow-p{
font-size:4.09vw;
line-height:5.33vw;
margin:0 0 1.78vw;
}
.flow-s{
font-weight:900;
color:#005bac;
}

.flow-cap{
font-size:3.20vw;
line-height:3.73vw;
}


.flow dd::after{
content:'';
width:6.04vw;
height:5.2vw;
background:url(img/arrow-down.svg) no-repeat;
background-size:6vw;
position:absolute;
bottom:4.18vw;
left:50%;
margin-left:-2.84vw;
}

.flow-att{
width:79.47vw;
margin:0 auto;
border:2px solid #828282;
padding:9.33vw 2.67vw;
border-radius:1.78vw;
}
.flow-att h4{
color:#828282;
font-size:3.56vw;
line-height:4.44vw;
margin-bottom:3.11vw;
letter-spacing:.5em;
text-align:center;
}
.f-att-list li{
font-size:3.20vw;
lien-height:5.33vw;
padding-left:1em;
position:relative;
color:#828282;
}
.f-att-list li::before{
content:'';
width:4px;
height:4px;
border-radius:50%;
background:#828282;
position:absolute;
top:2.66vw;
left:0;
}


#index4{
padding:3.56vw 0 7.11vw;
}
.app-ttl{
text-align:center;
font-size:2.67vw;
line-height:1.5;
margin-bottom:1em;
color:#828282;
font-weight:bold;
}
.app-name{
font-size:2.67vw;
line-height:1.5;
margin-bottom:13.33vw;
text-align:center;
font-weight:bold;
color:#828282;
}
.app-name a{
color:#828282;
text-decoration:underline;
}

#faq{
padding:7.11vw 0 0;
}
.faq-wrap{
position:relative;
background:#e5eff7;
border-radius:1.78vw;
width:79.47vw;
margin:0 auto;
padding:11.56vw 4.89vw 4.89vw;
}

.faq-wrap::before{
content:'';
width:89.24vw;
height:29.51vw;
background:url(img/ill-faq.svg) no-repeat;
position:absolute;
top:-6.67vw;
left:50%;
margin-left:-44.62vw;
z-index:10;
}

#faq h3{
text-align:center;
color:#005bac;
font-weight:bold;
font-size:5.33vw;
line-height:7.11vw;
margin-bottom:8.89vw;
}
.faq dt{
font-size:4.44vw;
line-height:1.5;
color:#005bac;
margin:0 0 2.22vw;
position:relative;
padding-left:4.44vw;;
}

.faq dt::before{
content:'Q.';
position:absolute;
top:0;
left:0;
}

.faq dd{
font-size:3.56vw;
line-height:1.5;
padding-left:4.44vw;
margin-bottom:5.33vw;
position:relative;
}
.faq dd::before{
content:'A.';
position:absolute;
top:0;
left:0;
}


/*------------------------------------------------------------
CTA
------------------------------------------------------------*/
.cta{
background:#e6e6e6;
padding:7.11vw 0;
}
.cta-btn{
width:79.47vw;
margin:0 auto;
}
.cta-btn a{
display:block;
border:0.09vw solid #F09637;
border-radius:1.78vw;
font-size:5.33vw;
line-height:8.00vw;
padding:2.22vw;
width:100%;
color:#FFF;
font-weight:bold;
background:#F09637;
text-align:center;
letter-spacing:.1em;
transition:all .15s;
}

/*------------------------------------------------------------
FOOTER
------------------------------------------------------------*/
footer{
padding:6.22vw 0 0;
}
.footer-inner{
padding:5.33vw 0;
background:#005bac;
color:#fff;
}
.f-logo{
width:50.49vw;
margin:0 auto 4.00vw;
}
.f-add{
text-align:center;
font-size:2.67vw;
line-height:5.33vw;
}

.copy{
text-align:center;
font-size:2.67vw;
line-height:1;
font-weight:bold;
padding:2.44vw 0;
}