/*    */
body{
color:#131328;
}
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: 12px/* !important*/;
  line-height: 2em;
  font-weight: 300/* !important*/;
}
h1, h2, h3, .h1,.h2,.h3{
  letter-spacing: -.02em;
/*  font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;*/
  font-family: 'Roboto', "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
}

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;
}
h3 {
/*    font-family: 'Noto Serif JP',"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;*/
  font-family: 'Roboto',  "Noto Sans JP", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, sans-serif;
  font-size: 20px !important;
  font-weight: 600;
}
img{
image-rendering: -webkit-optimize-contrast;
max-width: 100%;
}
.small, small {
  font-size: .7em;
}
a:hover{
color:#fff;
text-decoration:under-line;
}

header{
background:url(../img/mainbg.jpg) no-repeat top center;
background-size:cover;
height:85vh;
color:#fff;
position:relative;
}
a.nav-btn{
width:10rem;
height:36px;
color:#fff;
display:block;
border:1px solid #fff;
border-radius:18px;
font-size:.8rem;
line-height:34px;
text-decoration:none;
text-align:center;
letter-spacing: .4em;
margin-left:auto;
transition: .3s;
}
a.nav-btn:hover,
a.mapbtn:hover{
background-color:rgba(255,255,255,.2);
}

#top .container{
padding-top:2em;
}
header h1{
width:96%;
position:absolute;
left:2%;
top:35%;
overflow: hidden;
}
header h1 p{
margin:0;
line-height:1.6em;
}
header h1 .maintitle{
width:90%;
padding-top:10em;
margin:0 auto 0;
position:relative;
}
header h1 .maintitle::before{
content:"";
width:1px;
height:8.5em;
border-left:1px solid #fff;
position:absolute;
top:1em;
left:50%;
}
header h1 .subtitle01{
font-size:12pt;
font-weight:500;
letter-spacing: .3em;
margin-right: -.3em;

}
header h1 .subtitle02{
font-size:8pt;
font-weight:500;
letter-spacing: .6em;
margin-right: -.6em;

}
.btnarea{
width:90%;
position:absolute;
left:5%;
bottom:2rem;
}
.btnarea p{
font-size:8pt;
font-weight:500;
letter-spacing: .2em;
}
a.btn{
background-color:#0000c8;
max-width:400px;
width:80%;
height:50px;
color:#fff;
display:block;
border-radius:25px;
font-size:1rem;
line-height:50px;
text-decoration:none;
text-align:center;
margin:1.6rem auto;
padding:0;
position: relative;
z-index: 1;
transition: .3s;
}
a.btn::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #fff;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
  border-radius:25px;
}
a.btn:hover {
  color: #0000c8;
}
a.btn:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}

section{
padding:0;
}
.titlearea01{
background:#131328 url(../img/logo_bg.jpg) no-repeat top center;
background-size:cover;
width:100%;
height:225px;
}
.titlearea01 img{
width:50%;
}
.bg-darkgr{
background-color:#131328;
}
.bg-blue{
background-color:#0000c8;
}
.text-wh{
color:#fff;
}
.sectiontitle{
padding:6em 0 1em;
margin:0 auto;
font-size:1.4rem !important;
font-weight:300;
letter-spacing: .05em;
text-align:center;
color:#0000c8;
position:relative;
}
.sectiontitle.text-wh{
color:#fff;
}
.sectiontitle::before{
content:"";
width:1px;
height:5.5em;
border-left:1px solid #131328;
position:absolute;
top:0;
left:50%;
}

.sectiontitle.text-wh::before{
content:"";
width:1px;
height:5.5em;
border-left:1px solid #fff;
position:absolute;
top:0;
left:50%;
}
.sectiontitle.noline{
padding:1em 0 1em;
color:#131328;
}
.sectiontitle.noline::before{
display:none;
}
.textbox{
text-align: justify;
text-justify: inter-ideograph;
}
.textbox.lh0 p{
line-height:1.5em;
}
.textbox p{
margin-bottom:0;
}
.section-subtitle{
margin:0 auto 1em;
font-size:1rem !important;
font-weight:300;
letter-spacing: .5em;
text-align:center;
}

.profile .section-subtitle{
font-size:1.5rem !important;
}
.blue{
color:#0000c8;
}
.red{
color:#c80000;
}
.main_content{
background-color:#f6f7f9;
border-radius:10px;
padding:0;
}
.main_content img{
border-radius:10px 10px 0 0 ;
}
.main_content h4{
font-size:1.3em;
}
ul.check{
list-style:none;
color:#0000c8;
margin:1.5em 0;
padding-left:0;
}
ul.check.white{
color:#fff;
}
ul.check li{
padding-left:1.4em;
position:relative;
line-height:1.5em;
margin-bottom:.8em;
}
ul.check li::before{
content:'\f058';
font-family: 'Font Awesome 6 Free';
font-weight:600;
font-size:1.2em;
position:absolute;
top:0;
left:0;
}


/* accordion CONTENT */
.accordion {
    max-width: 700px;
margin: 0 auto;
}
.toggle {
display: none;
}
.option {
background-color:#0000c8;
position: relative;
margin-bottom: 1em;
border-radius:6px;
padding-left:4em;
}
.option::before{
content:"";
width:2.4em;
height:2.4em;
background:url(../img/icon-01.svg) no-repeat top center;
background-size:cover;
position:absolute;
left:.8em;
top:.8em;
}
.option.icon02::before{
background:url(../img/icon-02.svg) no-repeat top center;
background-size:cover;
}

.option.icon02::before{
background:url(../img/icon-02.svg) no-repeat top center;
background-size:cover;
}

.option.icon03::before{
background:url(../img/icon-03.svg) no-repeat top center;
background-size:cover;
}

.option.icon04::before{
background:url(../img/icon-04.svg) no-repeat top center;
background-size:cover;
}

.option.icon05::before{
background:url(../img/icon-05.svg) no-repeat top center;
background-size:cover;
}

.option.icon06::before{
background:url(../img/icon-06.svg) no-repeat top center;
background-size:cover;
}

.option.icon07::before{
background:url(../img/icon-07.svg) no-repeat top center;
background-size:cover;
}

.option.icon08::before{
background:url(../img/icon-08.svg) no-repeat top center;
background-size:cover;
}

.option.icon09::before{
background:url(../img/icon-09.svg) no-repeat top center;
background-size:cover;
}
.option.icon10::before{
background:url(../img/icon-10.svg) no-repeat top center;
background-size:cover;
}
.title,
.naiyou {
background-color:#f6f7f9;
/*width:85%;
margin-left:auto;*/
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title {
padding: 1em;
display: block;
color: #333;
font-weight: bold;
cursor: pointer;
}
.title::after {
	content: "▼";
	position: absolute;
	right: 1.25em;
	top: 1em;
    margin-left: 10px;
    transition: transform .3s;
    color:#898994;
}
.naiyou {
max-height: 0;
overflow: hidden;
padding-left:3em;
border-radius:0 0 6px 0;
}
.naiyou p {
margin: 0;
padding: 0 1em 0;
font-size: 0.9em;
line-height: 1.5;
}
.naiyou p:last-of-type {
padding-bottom: 2em;
}
.toggle:checked + .title + .naiyou {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::after {
    transform: rotate(180deg);
}

/* //accordion CONTENT */


/* accordion CONTENT */
.accordion-faq {
    max-width: 700px;
margin: 0 auto 3em;
}
.toggle-faq {
display: none;
}
.option-faq {
position: relative;
margin-bottom: 1em;
border-radius:6px;
}
.title-faq,
.naiyou-faq {
background-color:#f6f7f9;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
.title-faq {
padding: 1em 2.2em 1em 2.8em;
display: block;
color: #333;
font-weight: bold;
cursor: pointer;
position:relative;
}
.title-faq::before {
	content: "Q";
	position: absolute;
	left: .5em;
	top: .9em;
    margin-left: 10px;
    transition: transform .3s;
    color:#898994;
    font-size:14px;
}
.title-faq::after {
	content: "▼";
	position: absolute;
	right: 1em;
	top: 1em;
    margin-left: 10px;
    transition: transform .3s;
    color:#898994;
}
.naiyou-faq {
max-height: 0;
overflow: hidden;
padding-left:2em;
border-radius:0 0 6px 0;
}
.naiyou-faq::before {
	content: "A";
	position: absolute;
	left: .5em;
	top: .1em;
    margin-left: 10px;
    transition: transform .3s;
    color:#898994;
    font-size:14px;
    font-weight:600;
}
.naiyou-faq p {
margin: 0;
padding: .3em 1em 0;
font-size: 1em;
line-height: 1.5;
}
.naiyou-faq p:last-of-type {
padding-bottom: 2em;
}
.toggle-faq:checked + .title-faq + .naiyou-faq {
max-height: 500px;
transition: all 1.5s;
}
.toggle-faq:checked + .title-faq::after {
    transform: rotate(180deg);
}

/* //accordion FAQ */


.bg-matching{
background:#131328 url(../img/teikei_bg.jpg) no-repeat top center;
background-size: 160% auto;
color:#fff;
padding:4em 0;
}
.support{
overflow:hidden;
}
.supportwrapper{
position:relative;
}
.supportbox{
background-color:#0000c8;
color:#fff;
}
.supportbox h4{
font-size:1.2em;
line-height:1.4em;
margin-bottom:1.4em;
}
.mapbox{
max-width:700px;
border-radius:10px;
background-color:#0000c8;
color:#fff;
}
.mapbox ul{
list-style:none;
margin:1.5em auto 0;
padding-left:0;
}
.mapbox ul li{
font-size:11px;
padding:0 0 1em 1.4em;
position:relative;
}
.mapbox ul li::before{
content:'\f058';
font-family: 'Font Awesome 6 Free';
font-weight:600;
font-size:1.2em;
position:absolute;
top:0.1em;
left:0;
}
.mapbox ul li.adress::before{
content:'\f3c5';
font-family: 'Font Awesome 6 Free';
}
.mapbox ul li.train::before{
content:'\f239';
font-family: 'Font Awesome 6 Free';
}
a.mapbtn{
width:200px;
height:40px;
display:block;
color:#fff;
border-radius:20px;
border:1px solid #fff;
text-decoration:none;
text-align:center;
line-height:38px;
font-weight:600;
margin:2em auto 0;
transition: .3s;
}
a.mapbtn i{
padding-left:.8em;
}

/*packagetitle*/
#sanka , #sanka h2 , #sanka h3{
color:#fff;
}

#sanka{
background:#c6c6e4 url(../img/kessai_bg_pc.png) no-repeat top center;
background-size:100% auto;
}
.package-maintitle{
/*background:url(../img/kessai_header.jpg) no-repeat top center;
background-size:cover;*/
text-align:center;
padding:4.5em .5em;
}
.bg-package{
background:url(../img/kessai_bg.png) no-repeat top right 1em;
background-size:65%;
}
.package-subtitle{
  display: inline-block;
  position: relative;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 0 30px 0 10px;
  font-size: 14px;
  background-color:#0000c8;
  box-sizing: border-box;
}
.package-subtitle::after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
  top: 0;
  right: 0;
  border-width: 20px 15px 20px 0px;
  border-color: transparent #131328 transparent transparent;
  border-style: solid;
}
.package-title{
  font-size: 2rem !important;
}
.package-title span{
  font-size: 1.2rem;
  vertical-align:middle;
}

.contentall {
	position: relative;
	border-radius:10px;
	background-color:#131328;
}
.contentall:after, .contentall:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.contentall:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #131328;
	border-width: 15px;
	margin-left: -15px;
}
/*.contentall:before {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #fff;
	border-width: 16px;
	margin-left: -16px;
}*/
.contentall ul li {
	font-size:8px;
	margin-bottom:5px;
}
.headline{
	font-size:10px;
	background-color:#fff;
	padding:1px;
	text-align:center;
	color:#050529;
}
.bg-kessai{
background-color:#fff;
position:relative;
border-radius:10px;
color:#050529;
}
.bg-kessai::before{
content:"";
background:url(../img/sankaku.png) no-repeat top left;
background-size:contain;
width: 40px;
height: 40px;
position:absolute;
top:0;
left:0;
}
.bg-kessai h3{
font-size:2rem !important;
color:#050529 !important;
letter-spacing: .1rem;
}
.bg-kessai h3 span{
font-size:.6rem;
font-weight:300;
letter-spacing: .3em;
display:inline-block;
padding-left:.5rem;
vertical-align:middle;
}

.bg-kessai .price{
font-size:1.8rem;
line-height:1em;
font-weight:600;
text-align:center;
}
.bg-kessai .price .zeikomi{
font-size:.8rem;
font-weight:300;
display:block;
}
.price2{
font-size:.8rem;
font-weight:300;
background-color:#0000c8;
color:#fff;
vertical-align:top;
margin-right:0.6rem;
border-radius:2px;
padding:0.3rem 0.6rem;
}
/*
.fukidashi {
	position: relative;
	background: #ffffff;
	border: 1px solid #050529;
	border-radius:6px;
	line-height:1.4em;
}
.fukidashi:after, .fukidashi:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.fukidashi:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 6px;
	margin-top: -6px;
}
.fukidashi:before {
	border-color: rgba(5, 5, 41, 0);
	border-right-color: #050529;
	border-width: 7px;
	margin-top: -7px;
}*/

a.cardbtn,a.bankbtn,
button.cardbtn,button.bankbtn{
background-color:#0000c8;
width:100%;
height:80px;
border:none;
border-radius:40px;
color:#fff;
text-decoration:none;
display:block;
margin:0 auto 1em;
font-size:.9rem;
font-weight:600;
line-height:80px;
text-align:center;
position: relative;
z-index: 1;
transition: .3s;
}
/*--- hamon ---*/


.hamon {
    margin: 0 auto;
    max-width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 100px;
    animation: btnwrapanime 1.5s infinite;
    box-shadow: 0 0 0 0 rgb(0, 53, 188);
}

@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);
    }
}

.hamon2 {
    margin: 0 auto;
    max-width: 100%;
    display: block;
    cursor: pointer;
    border-radius: 100px;
    animation: btnwrapanime 1.5s infinite;
    box-shadow: 0 0 0 0 rgb(0, 18, 64);
}

@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);
    }
}
a.cardbtn:hover,a.bankbtn:hover,
button.cardbtn:hover,button.bankbtn:hover {
  transform: translateY(-7px);
}


a.cardbtn i,a.bankbtn i,
button.cardbtn i,button.bankbtn i{
font-size:1.2rem;
line-height:80px;
display:inline-block;
padding-right:.5rem;
}
a.bankbtn,button.bankbtn{
background-color:#050529 !important;
}

button.disable {
  background-color: gray !important;
  cursor: not-allowed;
}
.disable:hover {
  transform: translateY(0px) !important;
}

.kiyaku{
max-width:600px;
width:90%;
height:8em;
background:rgba(255,255,255,.2);
font-size:10px;
padding:1.5em;
margin:1rem auto 0;
overflow:auto;
color:#131328;
}
.kiyaku p{
margin-bottom:.5em;
}
/* // packagetitle */

/*foot btn*/
.flow-navi__wrapper {
  display:none;
}
.flow-navi {
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    position: fixed;
    z-index: 3;
}
.flow-navi ul{
display:flex;
width:100%;
padding:0;
margin-bottom:0;
border-top:1px solid #eee;
}
.flow-navi ul li{
display:block;
width:100%;
}
.ctabtn-foot{
position:relative;
display:block;
background-color:#0000c8;
color:#fff;
text-decoration:none;
padding:1em .5em;
font-size:14px;
text-align:center;
}
.flow-navi i{
font-size:1.5em;
vertical-align:middle;
display:inline-block;
margin-left:10px;
}
footer{
 font-size: .8em;
}
footer a{
color:#fff;
text-decoration:none;
/*padding:.3em 1em;
border-bottom:1px solid #fff;*/
}


.toptext{
background-color:#0100c8;
color:#fff;
}
.toptext p{
margin-bottom:0;
font-size:2em;
font-weight:500;
text-align:center;
}
.service-wrapper{
position:relative;
padding:2rem 0 0 0;
}
.service{
margin-left:auto;
padding:50% 6% 6%;
}
.service h3{
font-size:18px !important;
padding:.8rem 0;
color:#0100c8;
}
.service-img{
position:absolute;
top:0;
left:0;
}
/*  media  */
@media screen and (max-width: 767px) {
.row{
margin-right:auto;
margin-left:auto;
}
}

@media (min-width: 576px) {

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

  h1 {
    font-size: 62px !important;
    text-align: left;
  }
  h2 {
    font-size: 30px !important;
  }
  .h2{
    font-size: 30px !important;
  }
  h3 ,.service h3{
    font-size: 24px !important;
  }
  .small, small {
    font-size: .875em !important;
  }
 .flow-navi__wrapper {
   position: static;
 }
 .flow-navi {
   display:none;
 }
header{
background:url(../img/mainbg.jpg) no-repeat center center;
background-size:cover;
height:50vh;
color:#fff;
position:relative;
}

.headerbottom{
padding-top:4em;
}
.titlearea01{
background:#131328 url(../img/logo_bg.jpg) no-repeat top center;
width:90%;
height:350px;
margin:0 auto;
}
}
/* PC */
@media (min-width: 960px) {
body, ul, li, p, a, label, input, div {
  font-size: 14px/* !important*/;
  line-height: 2em;
}
header{
background:url(../img/mainbg.jpg) no-repeat center center;
background-size:cover;
height:85vh;
color:#fff;
position:relative;
}

header h1{
top:30%;
}
/*header h1 .maintitle{
font-size:60pt;
}*/
header h1 .subtitle01{
font-size:24pt;

}
header h1 .subtitle02{
font-size:16pt;

}
.btnarea p{
font-size:12pt;
}

.titlearea01{
background:#131328 url(../img/logo_bg.jpg) no-repeat top center;
height:450px;
}
.titlearea01 img{
width:300px;
}

.accordion {
margin: 0 auto 3em;
}

#sanka{
background-color:#c6c6e4;
}
.package-maintitle{
/*background:url(../img/kessai_header_pc.jpg) no-repeat top center;
background-size:cover;*/
text-align:center;
padding:8em .5em;
}
.bg-package{
background:none;
}


.contentall ul li {
	font-size:12px;
	margin-bottom:5px;
}
.headline{
	font-size:16px;
	background-color:#fff;
	padding:1px;
	text-align:center;
	color:#050529;
}

    .counter{text-align:center;color:blue;border:#050529 solid 2px;color:#050529;border-radius: 90px;padding:.6em 1em;}

.sec01{
padding-top:2em;
max-width:750px;
}
}

@media (min-width: 1640px) {

}
.toku_pro p{margin-bottom:1.6em;}
.toku_pro_title{
            font-size:1em;
            color:#fff;
            background:#121327;
            display:block;
            width:90%;
            max-width:400px;
            margin:0 auto;
            margin-bottom:1em;
            padding:.4em;
            border-radius: 99px;
}
.counter_disp{
    font-size:20px;
    font-weight:500;
    background:#fff;
    color: #121327;
    width:94%;
    max-width:480px;
    margin:0 auto;
    border-radius: 90px;
    border:4px solid #121327;
    }
.counter_disp2{
    font-size:18px;
    font-weight:500;
    background:#fff;
    color: #121327;
    width:94%;
    max-width:480px;
    margin:0 auto;
    border-radius: 90px;
    border:1px solid #121327;
    text-align:center;
    }
@media (max-width: 480px) {
.toku_pro .sectiontitle{
        font-size:1.4em !important;
    }
.counter_disp{
    font-size:14px;
    border:2px solid #121327;
    }
.counter_disp2{
    font-size:12px;
    border:1px solid #121327;
    } 
}