@charset "UTF-8";

/* =========================
   Reset / Base
========================= */
*{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
font-size:16px;
-webkit-text-size-adjust:100%;
}

body{
font-family:"Noto Sans JP",sans-serif;
line-height:1.7;
color:#333;
background:#fff;
margin:0;
padding-top:146px;
}

ul,ol{
list-style:none;
}

a{
text-decoration:none;
color:inherit;
}

input,button,textarea,select{
font:inherit;
border:none;
background:none;
outline:none;
}

img{
max-width:100%;
height:auto;
display:block;
}


h1 {
color: #004194;
font-size: 24px;
}

h2 {
font-size: 20px;
line-height: 1.5;
}

.ov-text {
margin: 20px auto;
font-size: 16px;	
}

h1,h2, 
.ov-text {
text-align: center;		
}

.overview {
margin-bottom: 40px;	
}



/* =========================
   HR
========================= */
.hrwhite{
border:none;
border-top:1px solid #ffffff;
width:100%;
margin-top:10px;
margin-bottom:10px;
}

.hrblue{
border:none;
border-top:1px solid #2f5fa8;
}

/* =========================
   Header Wrap
========================= */
.header-wrap{
position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
height:133px;
}

/* =========================
   Header
========================= */
header{
width:100%;
height:70px;
background:#004094;
padding:0 20px;
display:flex;
align-items:center;
}

#hd-box{
width:100%;
max-width:1200px;
margin:0 auto;
display:flex;
align-items:center;
gap:20px;
position:relative;
}

#hd-logo a{
display:flex;
align-items:center;
gap:8px;
color:#fff;
font-weight:bold;
}

#hd-logo img{
height:19px;
width:auto;
}

#hd-logo span{
font-size:20px;
}

/* =========================
   Hamburger
========================= */
.hamburger{
position:relative;
width:32px;
height:32px;
background:none;
border:none;
cursor:pointer;
z-index:1200;
}

.icon-open,
.icon-close{
position:absolute;
top:0;
left:0;
width:32px;
height:32px;
pointer-events:none;
}

.icon-open{
display:block;
}

.icon-close{
display:none;
font-size:32px;
line-height:32px;
text-align:center;
color:#fff;
}

.hamburger.active .icon-open{
display:none;
}

.hamburger.active .icon-close{
display:block;
}

/* =========================
   Drawer Menu
========================= */
.menu{
position:fixed;
top:70px;
left:0;
width:35vw;
height:calc(100vh - 70px);
background:rgba(0,64,148,.95);
display:none;
transform:translateX(-100%);
transition:transform .3s ease;
z-index:900;
}

.menu.active{
display:block;
transform:translateX(0);
}

.menu ul{
padding:40px 40px 0 0;
text-align:right;
}

.menu li{
margin-bottom:30px;
}

.menu a{
color:#fff;
font-size:24px;
font-weight:bold;
}

/* =========================
   Index Menu
========================= */
.index-menu{
position:sticky;
top:76px;
background:#fff;
width:100%;
height:76px;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 2px 5px rgba(0,0,0,.1);
}

.index-menu-box{
width:100%;
max-width:1200px;
margin:0 auto;
}

.index-menu-list{
display:flex;
justify-content:center;
align-items:center;
}

.index-menu-list-item{
position:relative;
padding:0 20px;
display:flex;
align-items:center;
}

.index-menu-list-item:not(:last-child)::after{
content:"";
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:1px;
height:40px;
background:#ccc;
}

.index-menu-list-item-link{
display:inline-block;
font-size:clamp(4.8px,1.11111vw,16px);
font-weight:700;
color:#333;
text-align:center;
padding:0 1.5em;
}

.index-menu-list-item-link:hover{
color:#004094;
}

/* =========================
   Responsive
========================= */
@media screen and (max-width:768px){

header{
height:60px;
padding:0 16px;
}

#hd-box{
gap:12px;
padding:0;
}

#hd-logo a{
flex-direction:column;
align-items:flex-start;
gap:2px;
}

#hd-logo img{
height:12px;
}

#hd-logo span{
font-size:12px;
}

.hamburger{
width:28px;
height:28px;
top:-4px;
}

.menu{
top:60px;
width:100vw;
height:calc(100vh - 60px);
}

.menu ul{
text-align:left;
padding:30px 0 0 30px;
}

.menu a{
font-size:15px;
}

.index-menu{
display:none;
}

}


/* =========================
   Footer
========================= */
#footer-benefit{
background:#eff0f4;
width:100%;
padding:20px 0;
margin:20px auto 0;
text-align:center;
}

#footer-benefit p{
margin-top:10px;
font-size:14px;
}

.info-btn{
margin-top:10px;
margin-left:auto;
margin-right:auto;
padding:10px 20px;
border:1px solid #333;
font-size:14px;
width:250px;
}

.info-btn:hover{
background:#ffffff;
}

.m-footer{
display:flex;
flex-direction:row;
justify-content:center;
background:#F2F3F7;
padding:2em 0;
}

.m-footer-logo{
text-align:center;
margin-bottom:1em;
}

.m-footer-menu{
display:flex;
flex-direction:row;
justify-content:end;
}

.m-footer-menu-item{
display:flex;
flex-direction:row;
align-items:center;
font-size:14px;
margin:0 auto;
}

.m-footer-menu-item:first-child::before{
display:none;
}

.m-footer-menu-item::before{
content:"";
display:inline-block;
width:1px;
height:1em;
background:#333333;
margin:0 1em;
}

.m-footer-in{
display:flex;
flex-direction:column;
align-items:center;
margin-top:20px;
}

.footer-copyright-text{
color:#333333;
text-align:center;
margin-top:20px;
}

.footer-copyright-text span{
font-size:10px;
}

/* Responsive */
@media screen and (max-width:768px){

#footer-benefit{
padding-left:20px;
padding-right:20px;
}

#footer-benefit p{
text-align:left;
}

}


/* =========================
   Responsive
========================= */
@media screen and (max-width:768px){

body{
padding-top:60px;
}

header{
height:60px;
padding:0 16px;
}

.menu{
top:60px;
width:100vw;
height:calc(100vh - 60px);
}

.index-menu{
padding:min(4.10256vw,24px);
height:auto;
}

.wrapper{
width:100%;
max-width:100%;
padding:20px 16px;
}

.faq-question{
padding:18px 0;
font-size:16px;
line-height:1.6;
}

.faq-answer p{
padding-left:28px;
padding-right:5px;
font-size:15px;
line-height:1.8;
}

}


/* =========================
   Benefit
========================= */
#benefit-body{
width:100%;
height:100%;
margin:30px auto 0;
font-size:15px;
line-height:1.8;
line-break:strict;
word-break:break-word;
overflow-x:hidden;
}

.benefit-inner{
background:linear-gradient(to right,#004094,#2e66b3);
width:100%;
padding:40px 20px;
margin:0 auto;
}

.benefit-list-inner{
background:#f7f7ff;
width:100%;
padding:40px 20px;
margin:0 auto;
}

/* =========================
   List
========================= */
.list-row{
display:grid;
grid-template-columns:repeat(2,445px);
gap:20px;
justify-content:center;
}

.list-container{
background:#fff;
padding:14px;
border-radius:8px;
box-shadow:0 2px 4px rgba(0,0,0,.1);
border:1px solid #fff;
width:445px;
margin:0 auto;
}

.list-container:hover{
border:1px solid #a4c4f5;
}

/* =========================
   Company Detail
========================= */
.com-row{
display:flex;
gap:30px;
justify-content:center;
margin:0 0 80px;
}

.com-box1{
width:330px;
color:#fff;
}

.com-box2{
background:#fff;
width:550px;
padding:20px 20px 25px;
border-radius:6px;
box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* =========================
   Button
========================= */
.btn-round{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:54px;
margin-top:20px;
padding:0 8px 0 32px;
background:#3567b1;
color:#fff;
border-radius:999px;
box-shadow:0 4px 0 rgba(0,0,0,.2);
position:relative;
overflow:hidden;
}

.btn-round::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,#3567b1,#5b8fe0,#3567b1);
background-size:200% 100%;
background-position:100% 0;
opacity:0;
transition:opacity .2s ease,background-position .6s ease;
z-index:0;
}

.btn-round.is-hover::before{
opacity:1;
background-position:0 0;
}

.btn-text{
flex:1;
text-align:center;
font-size:18px;
font-weight:bold;
}

.btn-circle{
width:38px;
height:38px;
background:#fff;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

/* =========================
   Back To Top
========================= */
.pten-back-to-top{
opacity:0;
visibility:hidden;
transition:opacity .3s ease,visibility .3s ease;
position:fixed;
right:20px;
bottom:20px;
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.7);
z-index:1000;
display:flex;
align-items:center;
justify-content:center;
}

.pten-back-to-top.is-show{
opacity:1;
visibility:visible;
}

.pten-back-to-top img{
width:20px;
transform:rotate(-90deg);
}

/* ===== 基本 ===== */
.wrapper{
width:780px;
margin:0 auto;
padding:16px;
}

@media (max-width:800px){
.wrapper{
max-width:480px;
}
.p-title{
font-size:19px;
}
.p-title-h3{
font-size:17px;
}
}

/* 見出し */
.p-title{
font-size:26px;
font-weight:700;
text-align:center;
margin-bottom:20px;
}

.p-title-h3{
font-size:22px;
font-weight:700;
text-align:center;
margin-bottom:20px;
}

/* 本文 */
.p-text{
margin-bottom:60px;
}

.p-text2{
margin:10px 0;
}

/* リンク */
.p-link{
font-weight:600;
text-decoration:underline;
}

.p-link:hover{
color:#477db6;
}

/* ボックス */
.p-box.dec{
margin-bottom:60px;
}

.p-box.dec ul{
list-style-type:decimal;
padding-left:15px;
}

.p-box.dec2{
margin-bottom:50px;
}

.p-box.dec2 ul{
list-style:none;
padding-left:0;
}

.p-box.dec2 ul li::before{
content:"＊";
margin-right:0.5em;
}

li{
margin-bottom:10px;
}

/* お問い合わせリスト */
.p-list ul{
list-style:none;
padding:0;
margin:0;
display:flex;
gap:20px;
justify-content:center;
}

.p-list li{
border:1px solid #545454;
background:#fff;
}

.p-list a.p-link{
text-decoration:none;
}


.p-list a.p-link{
display:block;
padding:14px 24px;
color:#545454;
text-align:center;
}

.p-list li:hover{
border:1px solid #477db6;
}

.p-list a.p-link:hover{
color:#477db6;
}

.p-list .p-text{
margin-bottom:20px;
}

@media screen and (max-width:768px){
.wrapper{
width:100%;
max-width:100%;
padding:20px;
}
}