/*------------------------------------------------------------
	FOR PC LAYOUT CSS
------------------------------------------------------------*/
@media screen and (min-width:768px){

/*------------------------------------------------------------
BODY BASIC
------------------------------------------------------------*/
body{
font-size:20px;
line-height:1.7;
font-feature-settings:'palt';
font-weight:500;
}

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

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


/*------------------------------------------------------------
HEADER
------------------------------------------------------------*/
header{
width:1125px;
margin:0 auto;
padding:20px 25px 38px;
position:relative;
box-sizing:border-box;
}
.h-logo{
width:300px;
}




/*------------------------------------------------------------
DRAWER MENU
------------------------------------------------------------*/
#menuBtn{
position:fixed;
top:20px;
right:auto;
left:50%;
margin-left:487px;
width:50px;
height:38px;
cursor:pointer;
z-index:9999;
}
#menuBtn span{
display:block;
position:absolute;
height:3px;
width:100%;
border-radius:1.5px;
background:#005bac;
left:0;
transition:all 0.2s ease-in-out;
}

#menuBtn span:nth-child(1){
top:0;
}
#menuBtn span:nth-child(2){
top:17.5px;
}
#menuBtn span:nth-child(3){
top:35px;
}

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

.active#menuBtn span:nth-child(3){
top:15.36px;
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:448.00px;
margin:0 auto;
}
.menu li a{
font-size:32.00px;
line-height:1.75;
font-weight:bold;
color:#fff;
padding:25.60px 0;
display:block;
}




/*------------------------------------------------------------
CONTENT
------------------------------------------------------------*/
#kv{
width:1125px;
margin:0 auto;
}



#index1{
padding:68.29px 0 119.49px;;
}

.i1-cont {
  width: 914px;
  padding: 65.41px 56px 240.00px;
  margin: 0 auto;
  position: relative;
  border-radius: 20px;
  background: #fff;
  z-index: 0; 
  font-size:20px;
line-height:34px;

}
.i1-cont::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 10px; /* ボーダーの太さ */
  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:40px;
line-height:1.25;
color:#005bac;
font-weight:bold;
margin-bottom:20px;
text-align:center;
}
.ill-toha{
width:506px;
height:258px;
background:url(img/ill-toha.svg) no-repeat;
background-size:506px;
position:absolute;
bottom:-47px;
left:50%;
transform:translate(-50%, 0);
}


#index2{
background:#e5eff7;
padding:72.83px 0 59.71px;
}

#index2 h2{
font-size:40px;
line-height:1.25;
margin-bottom:40px;
text-align:center;
color:#005bac;
}

.ov{
width:600px;
margin:0 auto;
}
.ov dt{
width:600px;
height:40px;
background:linear-gradient(to right, #005bac, #00b3c4);
color:#fff;
font-size:22.78px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
border-radius:17.09px;
margin-bottom:19.90px;
letter-spacing:.7em;
font-weight:bold;
}

.ov dd{
margin-bottom:34.11px;
position:relative;
}


.ov-txt{
font-size:26px;
line-height:1.5;
text-align:center;
}

.ov-txt2{
text-align:center;
font-size:39.81px;
line-height:57.60px;
color:#005bac;
font-weight:900;
}
.ov-txt3{
font-size:28.42px;
line-height:39.81px;
color:#005bac;
text-align:center;
font-weight:bold;
margin-bottom:12.80px;
}

.ov-txt4{
font-size:30px;
line-height:45px;
font-weight:bold;
color:#005bac;
margin-bottom:9.60px;
}


.ov-p-c{
text-align:center;
font-size:20px;
line-height:1.5;
}
.ov-p{
width:430px;
font-size:20px;
line-height:1.5;
}

.ill-entry{
width:177.47px;
height:254.27px;
background:url(img/ill-entry.svg) no-repeat;
background-size:177.47px;
position:absolute;
bottom:0;
right:-36.99px;
}


.ov-bnr{
width:600px;
margin:0 auto 22.78px;
border-radius:11.39px;
background:#fff;
padding:40px;
}
.ov-bnr-ttl{
width:100%;
height:40px;
text-align:center;
font-size:24px;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
color:#ffff00;
background:#005bac;
border-radius:20px;
margin:0 auto 20px;
}
.ov-bnr-desc{
font-size:20px;
line-height:30px;
color:#005bac;
margin-bottom:25px;
}
.ov-waribiki{
width:70%;
margin:0 auto 25px;
}
.ov-bnr-att{
font-size:16px;
line-height:30px;
text-align:center;
}

.toutologo{
width:216px;
margin:0 auto 10px;
}


.ov-bnr-cap{
font-size:19.33px;
line-height:28.42px;
text-align:center;
}
.ov-bnr-cap a{
font-size:28.42px;
color:#005bac;
font-weight:bold;
}



#index3{
padding:62.59px 0;
}
#index3 h2{
font-size:40px;
line-height:50px;
text-align:center;
color:#005bac;
margin:0 auto 40px;
}

.flow{
width:508.61px;
margin:0 auto;
}


.flow dt{
color:#005bac;
font-size:24px;
font-weight:bold;
display:flex;
align-items:center;
text-align:center;
justify-content:center;
border:2px solid #005bac;
border-radius:11.39px;
height:40px;
margin-bottom:20px;
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:85.31px;
position:relative;
text-align:center;
}
.flow-p{
font-size:26.18px;
line-height:34.11px;
margin:0 0 11.39px;
}
.flow-s{
font-size:24px;
line-height:1.5;
font-weight:900;
color:#005bac;
}

.flow-cap{
font-size:20px;
line-height:1.5;
margin-top:10px;
}


.flow dd::after{
content:'';
width:38.66px;
height:33.28px;
background:url(img/arrow-down.svg) no-repeat;
background-size:38.40px;
position:absolute;
bottom:26.75px;
left:50%;
margin-left:-18.18px;
}

.flow-att{
width:800px;
margin:0 auto;
border:2px solid #828282;
padding:50px 45px;
border-radius:11.39px;
}
.flow-att h4{
color:#828282;
font-size:28px;
line-height:1;
margin-bottom:30px;
letter-spacing:.5em;
text-align:center;
}
.f-att-list li{
font-size:20.48px;
lien-height:34.11px;
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:17.02px;
left:0;
}


#index4{
padding:22.78px 0 45.50px;
}
.app-ttl{
text-align:center;
font-size:17.09px;
line-height:1.5;
margin-bottom:1em;
color:#828282;
font-weight:bold;
}
.app-name{
font-size:17.09px;
line-height:1.5;
margin-bottom:85.31px;
text-align:center;
font-weight:bold;
color:#828282;
}
.app-name a{
color:#828282;
text-decoration:underline;
}

.app-name a:hover{
color:#005bac;
}

#faq{
padding:45.50px 0 0;
}
.faq-wrap{
position:relative;
background:#e5eff7;
border-radius:11.39px;
width:914px;
margin:0 auto;
padding:73.98px 56px 31.30px;
}

.faq-wrap::before{
content:'';
width:813px;
height:152px;
background:url(img/ill-faq-pc.svg) no-repeat;
position:absolute;
top:-42.69px;
left:50%;
margin-left:-407px;
z-index:10;
}

#faq h3{
text-align:center;
color:#005bac;
font-weight:bold;
font-size:34.11px;
line-height:45.50px;
margin-bottom:56.90px;
}
.faq dt{
font-size:28.42px;
line-height:1.5;
color:#005bac;
margin:0 0 14.21px;
position:relative;
padding-left:28.42px;;
}

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

.faq dd{
font-size:22.78px;
line-height:1.5;
padding-left:28.42px;
margin-bottom:34.11px;
position:relative;
}
.faq dd::before{
content:'A.';
position:absolute;
top:0;
left:0;
}


/*------------------------------------------------------------
CTA
------------------------------------------------------------*/
.cta{
background:#e6e6e6;
padding:40px 0;
}
.cta-btn{
width:508.61px;
margin:0 auto;
}
.cta-btn a{
display:block;
border:1px solid #F09637;
border-radius:20px;
font-size:24px;
line-height:48px;
padding:15px;
width:100%;
color:#fff;
font-weight:bold;
background:#F09637;
box-shadow:0 0 6px rgba(0,0,0,.3);
text-align:center;
letter-spacing:.1em;
transition:all .15s;
}

.cta-btn a:hover{
color:#F09637;
transform:scale(1.02);
background:#fff;
border:1px solid #F09637;
}



/*------------------------------------------------------------
FOOTER
------------------------------------------------------------*/
footer{
padding:39.81px 0 0;
}
.footer-inner{
padding:34.11px 0;
background:#005bac;
color:#fff;
}
.f-logo{
width:323.14px;
margin:0 auto 25.60px;
}
.f-add{
text-align:center;
font-size:17.09px;
line-height:34.11px;
}

.copy{
text-align:center;
font-size:17.09px;
line-height:1;
font-weight:bold;
padding:15.62px 0;
}



/*------------------------------------------------------------
	END PC LAYOUT CSS
------------------------------------------------------------*/
}