@charset "UTF-8";

/*
Theme Name: knightnavi driver

*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
	    box-sizing: border-box;
	word-break: break-all;
}
body {
  line-height: 1.4;
  background:#fcfcfc

}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,q {
  quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
	color: #035397;
	text-decoration:none;
}
/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
input,select {
  vertical-align: middle;
}

img{object-fit: contain;max-width:100%;}


body {
 font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
	font-size:14px;
}
/* common */
header{height:60px;background:#ecf7f4;}
footer{background:#358270;color:#fff;}
.box{border-radius:20px;background:#fff;padding:4%;box-shadow: 1px 2px 5px #bbb;}
.btn{border-radius:20px;max-width:328px;margin:16px auto;padding:4px 0 8px;text-align:center;display:inline-block;}
.btn a{width:100%;display:block;font-size:18px;line-height:1.4;color:#29803f;font-weight: bold;}
.btn a span{font-size:12px;display:inline-block;width:100%;}
h2{font-size:36px;text-align:center;}
h2 span.small{font-size:24px;width:100%;display:inline-block;}
h3{font-size:24px;
	margin-bottom: 0.2rem;
    padding: 1rem .5rem;
    box-shadow: 10px 10px 0 #c4ebcc;
    background-color: #358270;
    color: #fff;
    font-weight: bold;
    text-align: center;}

.bold{font-weight:bold}
.col_block{display:flex;flex-direction:column;}
.row_block{display:flex;flex-wrap:wrap;justify-content:space-around;}

.content{width:100%;padding:60px 0;}


/* responsive */

.sp{display:none;}
.spbr{display:none}

@media (max-width: 768px) {
	.sp{display:block}
	.spbr{width:100%;height:0px;display:block;}
	.pc{display:none !important;}
}

/* bg */
.bg1{background:linear-gradient(180deg, rgba(53, 130, 112, 1.0), rgba(53, 130, 112, 0.2)) ,url(/wp/wp-content/themes/twentytwentyone/img/bg1.svg);background-position:top,center 50%;background-size:auto,cover}
.bg2{background:#ecf7f4;}
.bg3{background:linear-gradient(90deg, rgba(53, 130, 112, 0.9), rgba(53, 130, 112, 0.7)) ,url(/wp/wp-content/themes/twentytwentyone/img/bg3.svg);background-position:top,center 50%;background-size:auto,cover}



/* MV */
.MV{width:100%;padding:0px 0 40px;margin-top:60px;overflow-x:hidden;background:linear-gradient(90deg, #4FD995 0%, #C0D7D7 100%);}
.mv_wrap{display:flex;flex-direction:column;text-align:center;}
.mv_wrap h1{font-size:min(8vw,36px);padding:16px 0;color:#fff;}
.catcharea{width:80vw;margin:3vw auto 0;text-shadow:1px 1px #999}
.mv_catch{font-size:min(4vw,24px);color:#fff;}
.mv_wrap img{width:auto;}
.mv_btn{width:100%;text-align:center;margin-top:3vw}
.mv_btn .btn{background:#459b5c;}
.mv_btn .btn a{color:#fff;}

.movieblock{position:relative;width:100%;max-width:400px;background:none;height:auto;margin:0 auto;}
.movieblock video{width: 90% !important;
    height: auto !important;
    position: absolute;
    left: 5.5%;
    top: 5.3%;}
    @media (min-width: 1600px) {
    	#MV .movieblock{width:90%;}
		
    	.moviebackpc img{width:100%;}
    	
    }
@media (max-width: 768px) {
	.MV{margin-top:45px}
	.mv_wrap{flex-direction:column;}
	.movieblock{width:50%;float:inherit;margin:0 auto;overflow:hidden;position:relative;z-index:3}
	.movieback.pcnone img{width:100%;display:block;margin:0 auto;position:relative;z-index:99;}
	.movieblock .videoblock{padding: 1%;
    width: 97% !important;
    overflow: hidden;
    position: absolute;
    /* width: auto !important; */
    left: 1.5%;
    height: 98% !important;
    top: 1%;
		background:#000;
    border-radius: 47px;z-index:2}
	.movieblock video{width:98% !important;left:1%;height:95% !important;top:2%;border-radius: 50px;z-index:1;}
}
/* content */
.work{width:100%;}
.work .col_block{max-width:720px;margin:0 auto;}
	.work h2{color:#fff;margin-bottom:40px;
		align-items: center;
  display: flex;
  justify-content: center;}
	
	.work h2::before,
.work h2::after {
  background-color: #fff; 
  content: "";
  height: 5px; 
  width: 40px; 
}
.work h2::before {
  margin-right: 10px; 
  transform: rotate(60deg); 
}
.work h2::after {
  margin-left: 10px; 
  transform: rotate(-60deg); 
}
.work .box{position:relative;margin-bottom:32px;display:flex;flex-wrap:nowrap;z-index:3}
.work .box.work2{flex-direction:row-reverse}
.work .box h3{margin-bottom:32px;position:relative;z-index:3}
.work .box h3 b{color:#d7ba59}
.work .box p{margin-bottom:1em;font-weight:bold}
.work .box .imgarea{width:30%;}
.work .box .textarea{width:67%;margin-left:auto;}
.work .box.work2 .textarea{margin-left:0;margin-right:auto;}
.right_img {width:100%;margin:0 0 0 auto;}
.work .box:nth-child(1):after{content:"POINT1";position:absolute;z-index:1;font-weight:bold;font-size:min(100px,15vw);color:#ccc;top:0;right:-0.2em;line-height:1;}
.work .box:nth-child(2):after{content:"POINT2";position:absolute;z-index:1;font-weight:bold;font-size:min(100px,15vw);color:#ccc;top:0;left:-0em;line-height:1;}
.work .box:nth-child(3):after{content:"POINT3";position:absolute;z-index:1;font-weight:bold;font-size:min(100px,15vw);color:#ccc;top:0;right:-0em;line-height:1;}

.point{width:100%;}
.point h2{position:relative;margin-bottom:40px}
.point h2 span{width:100%;display:inline-block}
.point h2 b{position:relative;z-index:9}
.point h2:after{content:"";z-index:1;background:#c0e7c8;height:.3em;width:7.2em;display:inline-block;position:absolute; left: calc(50% - 3.5em);bottom:0;}
.point .row_block{max-width:880px;margin:0 auto;}
.point .row_block .box{width:31%;padding:4% 2%;}
.point .row_block .box .imgarea{width:50%;margin:0 auto;text-align:center;max-height:151px;}
.point .row_block .box .imgarea img{max-height:151px;}
.point .row_block .box .head{font-size:22px;color:#56ab59;text-align:center;margin:8px auto; line-height: 1.2;
    font-weight: bold;}
.point .row_block .box .head span{font-size:18px;width:100%;display:inline-block}
.point .row_block .box .text{}

.entry{width:100%;text-align:center;padding:32px 0;}
.entry .comment{color:#fff;font-weight:bold;font-size:20px;margin:32px 12px;}
.entry .btn{background:#fff;}

.compere{width:100%;}
.compere h2{margin-bottom: 40px;}
.compere .tablearea{position:relative;}
.compere .tablearea,.compere .detail{max-width:920px;margin:0 auto;}
.compere .tablearea table{width:100%;margin-bottom:32px}
.compere .tablearea table tr:nth-child(2n){background:rgb(237,237,237)}
.compere .tablearea th,
.compere .tablearea td{font-size:16px;border-right:1px solid #fff; padding: 12px 0;
    vertical-align: middle;}

.compere .tablearea th{background:#717171;color:#fff;}
.compere .tablearea td{text-align:center;}
.compere .tablearea td.bold{text-align:left;padding-left:12px}
.compere .tablearea th.knight{font-size:24px;background:#66d27a;color:#fff;border-right:2px solid #66d27a;border-left:2px solid #66d27a}
.compere .tablearea td.knight{font-size:24px;color:#66d27a;background:#e9fee4;border-bottom:1px solid #fff;border-right:2px solid #66d27a;border-left:2px solid #66d27a;line-height:1.2;padding:8px 0;width:8em;font-weight:bold;}
.compere .tablearea td.knight span{font-size:20px;display:inline-block;width:100%;}
.compere .tablearea td.knight.last{border-bottom:2px solid #66d27a}

.compere .tablearea .catch {
display: inline-block;
position: absolute;
padding: 4px 0;
    left: -40px;
    top: -55px;
width: 18em;
text-align: center;
font-size: 16px;
	font-weight:bold;
color: #66d27a;
	  display: flex;
	align-items: center;
	justify-content: center;
-webkit-transform: rotate(-30deg);
transform: rotate(-30deg);
}

	
	.compere .tablearea .catch::before,
.compere .tablearea .catch::after {
  background-color: #66d27a; 
  content: "";
  height: 5px; 
  width: 40px; 
}
.compere .tablearea .catch::before {
  margin-right: 10px; 
  transform: rotate(60deg); 
}
.compere .tablearea .catch::after {
  margin-left: 10px; 
  transform: rotate(-60deg); 
}


.arrowarea{width:70%;margin:0 auto;}
.arrowarea img{width:160px;height:auto;}
.compere .detail .head_text{font-size:44px;text-align:center;font-weight:bold;}
.compere .detail .sub_text{font-size:18px;text-align:center;font-weight:bold;margin-bottom:16px;}
.compere .detail .sub_text span{color:#d7b959}
.green_box{background:#66d27a;color:#fff;border-radius:20px;display:flex;text-align: center;
    align-items: center;width:100%;margin:0 auto;padding:8px 0;    font-weight: bold;}
.green_box .left{width:50%;border-right:1px solid #fff;font-size:30px;line-height:1.2;}
.green_box .left span{display:inline-block;width:100%;font-size:24px;}
.green_box .right{font-size:36px;width:50%;}


.arrow{width: 100%;margin: 0 auto;background:url(/wp/wp-content/themes/twentytwentyone/img/arrow_b.png) no-repeat;background-position:left;background-size:20%;display:flex;align-items:center;font-weight:bold;}
.arrow .text{padding:16px 0 40px 24%;font-size:32px;}
.arrow .text span{font-size:18px;width:100%;display:inline-block;}

.calc{display:flex;width:100%;margin:0 auto;align-items:center;justify-content:center}
.calc dl{display:flex;flex-direction:column;text-align:center;width:42%;}
.calc dt{background:#66d27a;color:#fff;font-size:24px;}
.calc dd{font-size:40px;font-weight:bold;}
.calc dd span{font-size:12px;width:100%;display:inline-block;position:relative;top:-28px}
.calc .m{font-size:32px;font-weight:bold;margin:24px;}

.benefit{display:flex;justify-content:center;margin:0 auto;}
.benefit dl{display:flex;flex-direction:column;text-align:center;width:42%;}
.benefit dt{background:#d7ba59;color:#fff;font-size:24px;}
.benefit dd{font-size:40px;font-weight:bold;color:#d7ba59}
.benefit dd span{font-size:12px;width:100%;display:inline-block;position:relative;top:-28px}
.remarks{width:80%;margin:32px auto 0;text-align:left;color:#bbb;font-size:14px;}

.flow{width:100%;}
.flow .col_block{max-width:720px;margin:0 auto;}
.flow h2{color:#fff;margin-bottom:40px;
		align-items: center;
  display: flex;
  justify-content: center;position:relative}
.flow h2 b{position:relative;z-index:4}
.flow h2:after{content:"";width:8.2em;height:.3em;background:#c4ebcc;position:absolute;z-index:1;bottom:0.1em;display:block;}
.flow .sub_text{display:flex;flex-direction:column;width:30em;margin:0 auto 24px;}
.flow .sub_text h3{font-size:20px;margin-bottom:24px;padding:.5rem;}
.flow .sub_text h3.ls{margin-right:auto;}
.flow .sub_text h3.rs{margin-left:auto;}
.flow .box{margin-bottom:24px;display:flex;position:relative;padding:0;}
.flow .box .ribon_wrap{display:flex;flex-wrap:nowrap;overflow:hidden;width:100%;position:relative;padding:4%;}
.flow .box .ribon {
display: inline-block;
position: absolute;
padding: 4px 0;
    right: -40px;
    top: 25px;
width: 160px;
text-align: center;
font-size: 14px;
background: #2a6499;
color: #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.flow .box:after{border-radius:50%;background:#fff url(/wp/wp-content/themes/twentytwentyone/img/arrow_a.png) no-repeat;background-position:center;width:60px;height:60px;position:absolute;bottom:-40px;left:calc(50% - 25px);content:"";display:block;background-size:30px;box-shadow:0 0 5px #aaa;z-index:9}
.flow .box:last-child:after{width:0;height:0;}
.flow .imgarea{width:200px;height:200px;border-radius:50%;overflow:hidden;text-align:center;}
.flow .imgarea img{max-width:340px;position:relative;left:-100px}
.flow .textarea{width:68%;margin-left:auto;}
.flow .num{font-size:40px;font-weight:bold;color:#449872}
.flow .step{font-size:32px;font-weight:bold;margin-bottom:8px;}
.flow .text{font-weight:bold;font-size:16px;}
.flow .text span{color:#d7ba59}

.contact h2{margin-bottom:32px;}
.linkblock{display:flex;flex-wrap:wrap;max-width:880px;margin:0 auto;justify-content:space-around}
.linkblock .box{display:flex;flex-direction:column;padding:0;margin-bottom:32px;}
.linkblock .line{background:#59c062;width:420px;}
.linkblock .mail{background:#265983;width:420px;}
.linkblock .account{background:#5ec2c3;width:420px;}
.linkblock .reg{display:flex;flex-wrap:nowrap;border-bottom:1px dashed #fff;padding:4% 4% 0%;font-size:36px;color:#fff;font-weight:bold;align-items:center}
.linkblock .reg .icon{width:50px;height:50px;}
.linkblock .reg span{font-size:14px;width:100%;display:block;color:#fff;font-weight:bold;}
.linkblock .reg .text{padding-left:.3em}
.linkblock .line .btn,.linkblock .mail .btn,.linkblock .account .btn{padding:16px 0;border-radius:10px;background:#fff;width:80%;margin:4% auto 4%;}
.linkblock .line .btn a{color:#59c062;}
.linkblock .mail .btn a{color:#265983;}
.btn a .circleicon{}
.btn a .circle{display: inline-block;
  vertical-align: middle;
  color: #59c062;
  line-height: 1;
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border: 0.075em solid #fff;
  background: currentColor;
  border-radius: 50%;
  box-sizing: content-box;margin-left:1em;top:-0.1em}
.btn a .circle:after{content: '';
  color: #fff;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0.18em 0.31177em;
  border-left-color: currentColor;
  border-right: 0;
  transform: translateX(15%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;font-size:24px}
.mail .btn a .circle{color: #265983;}
.linkblock .account .btn{background:#fff;padding:4px 0 8px;}
.linkblock .account .btn a{color:#5ec2c3;}
.faq{width:100%;padding-bottom:160px}
.faq h2{margin-bottom:32px}

.faq_container{width:70%;margin:0 auto;}
.faq_container .box{margin-bottom:0px;display:flex;align-items:center;padding:2%;font-weight:bold;font-size:20px}
.faq_container .box p{width:90%;}
.faq_container .box.question{margin-top:24px;}
.faq_container .box.question:before{content:"Q";color:#fff;text-align:center;background:#2a6499;font-size:24px;border-radius:50%;width:40px;height:40px;display:inline-block;margin:0 12px;line-height:40px;}
.faq_container .box.answer:before{content:"A";color:#fff;text-align:center;background:#2a6499;font-size:24px;border-radius:50%;width:40px;height:40px;display:inline-block;margin:0 12px auto;line-height:40px;}
.faq_container .box .plus{margin-left:auto;display: inline-block;
  vertical-align: middle;
  color: #2a6499;
  line-height: 1;
  width: 2em;
  height: 0.2em;
  background: #2a6499;;
  border-radius: 0.1em;
  position: relative;}
.faq_container .box .plus:after{content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  transform: rotate(90deg);}

footer {padding:60px 0;text-align:center;}



.floating-banner
{ position: fixed;
right: 0px; 
bottom: 0px;
z-index: 9999;
display: block; }
.floating-banner img
{ width: 24vw;
	max-width:300px;
height: auto;}

@media (max-width: 768px) {
	.floating-banner img
{ width: 300px; 
height: auto;}
}


.MV-slide{
   position: relative;
   width: 92.4vw;
   height: 41.35vw;
	max-width:1400px;
	max-height:475px;
   overflow: visible;
   margin: 0 auto;
}
.MV-slide:before{position:absolute;top:0;left:-50vw;height:calc(50% + 10vw);width:200vw;content:"";display:block;background:linear-gradient(90deg, #30A361 0%, #C1C1C1 100%);z-index:1;}


.img-01, .img-02, .img-03{
   position: absolute;
   top:10vw;
   left:0;
   width: 100%;
   height: calc(100% - 10vw);
   background-size:contain;
	background-position:center;
   background-repeat: no-repeat;
	z-index:3;
}
.img-01{
   background-image: url('/wp/wp-content/themes/twentytwentyone/img/MV01.png');
   animation: slide-animation-01 24s infinite;
}
.img-02{
   background-image: url('/wp/wp-content/themes/twentytwentyone/img/MV02.png');
   animation: slide-animation-02 24s infinite;
}
.img-03{
   background-image: url('/wp/wp-content/themes/twentytwentyone/img/MV03.png');
   animation: slide-animation-03 24s infinite;
}
@keyframes slide-animation-01 {
    0% {opacity: 1; transform: scale(1.0);}
  30% {opacity: 1;}
  40% {opacity: 0; transform: scale(1.0);}
  90% {opacity: 0}
100% {opacity: 1; transform: scale(1.0);}
}
@keyframes slide-animation-02 {
    0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.0);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;}
}
@keyframes slide-animation-03 {
    0% {opacity: 0;}
  60% {opacity: 0;  transform: scale(1.0);}
  70% {opacity: 1;}
  90% {opacity: 1;}
100% {opacity: 0; transform: scale(1.0);}
}


.head_service_wrap{width:80%;max-width:800px;margin:0 auto;}
.head_service_h{color:#fff;font-size:min(42px,8vw);font-weight:bold;margin:1em 0;text-align:center;position:relative;z-index:3}
.head_service_h:after {
    content: "";
    z-index: 1;
    background: #c0e7c8;
    height: .3em;
    width: 10em;
    display: inline-block;
    position: absolute;
    left: calc(50% - 5em);
    bottom: 0;
	z-index:1;
}
.head_service{padding:4% 0;}
.head_service_block{display:flex;justify-content:space-around;align-items:center;padding:0 2% 2%;}
.head_service .part{width:30%;}
.head_service .part span{display:block;font-size:min(36px,5vw);margin:.5em 0 .1em;text-align:center;font-weight:bold;}
.head_service .part .circleimg{max-width:200px;display:flex;text-align:center;align-items:center;overflow:hidden;margin:0 auto;}
.head_service .part .circleimg img{}
.right-icon{
	position: relative;
	display: inline-block;
	padding: 0 0 0 32px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 30px;
	top:1em
}
.right-icon:before,
.right-icon:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.right-icon:before{
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid #008470;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	box-shadow:0px 0px 3px #aaa;
}
.right-icon::after{
	left: 8px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #008470;
	border-right: 2px solid #008470;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.head_service .part:last-child:after{content:""}
.head_service_ribbon{position: relative;font-weight:bold;
	padding:4px 20px;
	font-size:min(32px,3.1vw);
	text-align:center;
	color:#FFF;
	background: #008470;
	margin-left:-10px;
	margin-right:-10px;
	box-shadow:0 1px 3px rgba(0,0,0,0.25);}
.head_service_ribbon:before,
.head_service_ribbon:after{
	content: "";
	position: absolute;
	top: 100%;
	height: 0;
	width: 0;
	border: 5px solid transparent;
	border-top: 5px solid #06c6a7;
}
.head_service_ribbon:before{
	right: 0;
	border-left: 5px solid #06c6a7;
}
.head_service_ribbon:after{
	left: 0;
	border-right: 5px solid #06c6a7;
}
@media screen and (max-width: 767px){
	.head_service .part span{writing-mode:vertical-lr;font-size:7vw;margin-left:20px;}
	.head_service .part{width:80%;display:flex;}
.head_service .part .circleimg{width:150px;height:150px;border-radius:50%;display:flex;text-align:center;align-items:center;overflow:hidden;margin:20px auto;}
.head_service .part .circleimg img{width:140px;height:140px;object-fit:inherit;}
}


.tabs {
  display: flex;
  flex-wrap: wrap;
	width:60%;margin:10px auto;
}

.tab_label {
  color: #333;
  font-weight: bold;
  border: solid 2px #9ddabc;
  position: relative;
	background:#eaeaea;
  z-index: 1;
  cursor: pointer;
  flex: 1;
  padding: 5px 0;
  margin: 0 5px 24px; 
	text-align:center;
}

.tab_label:hover {
  opacity: 0.75;
}

.tab_content {
  flex: 100%;
  display: none;
  overflow: hidden;
}

input[name="tab_switch"] {
  display: none;
}

.tabs input:checked + .tab_label {
  color: #d7ba59;
  background-color: #fff;
}
.tabs input + .tab_label::after {
  content: '';
	background:url(/wp/wp-content/themes/twentytwentyone/img/currentoff.png) no-repeat;
	background-size:contain;
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  top: 60%;
  right: 2%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}
.tabs input:checked + .tab_label::after {
	content: '';
	background:url(/wp/wp-content/themes/twentytwentyone/img/currenton.png) no-repeat;
	background-size:contain;
  width: 25px;
  height: 25px;
  display: block;
  position: absolute;
  top: 60%;
  right: 2%;
  margin-left: -10px;
  transition: all 0.3s ease 0s;
}

#tab01:checked ~ #tab01_content,
#tab02:checked ~ #tab02_content {
  display: block;
}

.tab_content{
  position: relative;
  animation: fadeIn 1s ease;
}



.faq-wrap{margin: 0 0 3.25em 0;}
.faq-check{display: none;}
.faq-label{cursor :pointer; display: block;}

.faq-content{padding:1em 0 1em 0;height: 0px; padding: 0 ; display:none;}
.faq-check:checked + .faq-label + .faq-content{display:block; height: 100%; padding: 0em 0 ;
 animation: show 1s linear 0s;
}

.faq_container .faq-check:checked + .faq-label .plus:after{display:none;}
.faq-check:checked + .faq-label .question{border-radius:20px 20px 0 0;}
.faq_container .box.answer{border-radius:0 0 20px 20px}
@keyframes show{
    from{opacity: 0; }
    to{ opacity: 1; }
}



@media (max-width: 768px) {
	h2{font-size:min(30px,7vw);}
	h2 span.small{font-size:min(24px,5vw)}
	h3{font-size:min(24px,4.8vw);}
	.btn a {font-size:min(24px,5vw);}
	.btn a span{font-size:80%;}
	.right-icon{
	position: relative;
	display: inline-block;
	padding: 0 0 0 16px;
	color: #000;
	vertical-align: middle;
	text-decoration: none;
	font-size: 30px;
	top:0em
}
.right-icon:before,
.right-icon:after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
}
.right-icon:before{
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1px solid #008470;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	box-shadow:0px 0px 3px #aaa;
}
	.right-icon::after{
	top: -4px;
        left: 10px;
	width: 10px;
	height: 10px;
	border-top: 0px solid #008470;
	border-right: 2px solid #008470;
		border-bottom: 2px solid #008470;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.work .col_block{padding:0 20px;}
	.work .box .imgarea{display:none;}
	.work .box .textarea{width:99%;margin:0 auto;}
	.point .row_block .box{width:92%;margin:0 auto 36px;padding:4%;}
	.point .row_block .box .text{font-size:18px;font-weight:bold;}
	.entry .btn{border-radius:40px;}
	.compere h2{margin-bottom:0;}
	.compere .tablearea .catch{font-size:14px;    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);width:20em;position:relative;top:0;left:-15px}
	.compere .tablearea .catch::before, .compere .tablearea .catch::after{width:30px;height:3px}
	.compere .tablearea{width:100%;overflow-x:scroll;padding-top:40px}
	.compere .tablearea table{width:880px;margin: 0 20px 32px;}
	.compere .tablearea th.knight{font-size:20px;}
	.compere .tablearea td.knight{font-size:20px}
	.compere .tablearea td.bold{width:7em;}
	.compere .tablearea td{font-size:16px;}
	.arrowarea{text-align:center;width:100%;}
	.arrowarea img{width:80px;}
	.tabs{width:90%;}
	.remarks{font-size:12px;width:90%;}
	.green_box .left {font-size:min(16px,4vw);}
	.green_box .left span{font-size:80%;}
	.green_box .right {font-size:min(16px,4vw);}
	.arrow{width:100%;background-size:12%;margin-left:15%}
	.arrow .text{font-size:min(17px,5vw);padding-left:20%;padding-bottom:30px;}
	.arrow .text span{font-size:80%}
	.calc{width:100%;}
	.calc dt{font-size:min(17px,4vw);padding:4px 2px;}
	.calc dd{font-size:min(17px,4vw)}
	.calc dd p{font-size: min(26px,8vw);}
	.calc dd span{top:-4px;font-size:70%}
	.benefit{margin-top:20px;}
	.benefit dt{font-size:min(18px,6vw);padding:4px 2px;}
	.benefit dd{        font-size: min(26px,8vw);}
	
	.benefit dd span{top:-14px;}
	  .flow .box{width: 92%;
		  margin: 0 auto 24px;padding-bottom:12px;}
	.flow .sub_text{width:80%;}
	.flow .sub_text h3{font-size:18px;}
	.flow .num{font-size:min(24px,8vw);display:inline;}
	.flow .step{font-size:min(24px,8vw);display:inline;}
	.flow .box .ribon{display:none;}
	.flow .box .ribon_wrap{align-items:center;flex-direction:column;}
	.flow .imgarea{width:160px;height:160px}
	.flow .textarea{width:100%;padding-top: .5em;}
	.flow .text{padding-top:.5em}
	.linkblock{width:92%;margin:0 auto;}
	.linkblock .account{flex-direction:column;max-width:420px;}
	.linkblock .reg{font-size:min(30px,7.2vw)}
	.linkblock .account .reg{width:100%; border-bottom: 1px dashed #fff;border-right:0}
	.linkblock .account .btnarea{width:100%;}
	.linkblock .account .btn{margin:12px auto;}
	.faq{padding-top:0}
	.faq_container{width:90%;}
	.faq_container .box{margin-bottom:0px;font-size:14px}
	.faq_container .box p{padding:0.5em 0.5em 0.5em 0}
}



header.navbar{position:fixed;background:rgba(0,0,0,0.5);width:100%;top:0;left:0;height:60px;z-index:99999;}
.pcnav{display:flex;justify-content:end;}
.navbar-nav {
	display:flex;
        -ms-flex-direction: row;
        flex-direction: row;
	width:60%;
	justify-content:end;
    }
    .navbar .navbar-nav .nav-link {
        padding-top: 1.875rem;
        padding-bottom: 1.875rem;
    }
.navbar-toggler{color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);background: transparent;}

.navbar-nav .nav-link {
    color: #fff;
}
.navbar .navbar-nav .nav-link {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
    -webkit-transition: .3s;
    transition: .3s;
}
.navbar .navbar-nav .nav-link .on{display:none;}
.navbar .navbar-nav .nav-link:hover .on{display:inline;}
.navbar .navbar-nav .nav-link:hover .off{display:none;}
.navbar .login:before{content:"";border-left:1px solid #fff;height:2em;top:2em;position:absolute;top: 50%;transform: translate(-50%, -50%);}
header..navbar .navbar-nav .nav-link{padding-top:0.5em;padding-bottom:0.5em;}
#nav-drawer {position: fixed;z-index:99999;right:0;top: -0.687rem;}
.nav-unshown {display:none;}
#nav-open {display: inline-block;vertical-align: middle;margin:35px 0 0 35px;}

#nav-open {
  cursor: pointer;
  display: inline-block;
  height: 45px;
  position: relative;
  width: 33px;
	z-index:999999;
}

#nav-open span {
  background:  #fff;
	    box-shadow: #000 0px 0px 2px;
  border-radius: 4px;
  display: block;
  height: 16%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  transition: all 0.3s ease-in-out;
  width: 84%;
}

#nav-open span::before,
#nav-open span::after {
  -webkit-transform: rotate(0);
  background: #fff;
	    box-shadow: #000 0px 0px 2px;
  border-radius: 4px;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 100%;
}

#nav-open span::before {
  margin-top: -38%;
}

#nav-open span::after {
  margin-top: 27%;
}

#nav-input:checked ~ #nav-open span {
  background: rgba(51, 51, 51, 0);box-shadow:0px 0px 0px;
}

#nav-input:checked ~ #nav-open span::before,
#nav-input:checked ~ #nav-open span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
	box-shadow:0px 0px 0px;
}

#nav-input:checked ~ #nav-open span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
	background:#fff;
}

#nav-input:checked ~ #nav-open span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
	background:#fff;
}




#nav-open {
  position: relative;
}
#nav-open span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 25px;
}
#nav-open span:nth-of-type(1) {
  top: 0;
}
#nav-open span:nth-of-type(2) {
  top: 8px;
}
#nav-open span:nth-of-type(3) {
  bottom: 0;
}


#nav-close {display: none;position: fixed;z-index: 99;top: 0;left: 0;width: 100%;height: 100%;background: black;opacity: 0;transition: .3s ease-in-out;}
#nav-content {overflow: auto;position: fixed;top: 0;left: 0;z-index: 9999;width: 100%;max-width: 100%;height: 100%;background:rgba(0,0,0,0.5);transition: .3s ease-in-out;-webkit-transform: translateX(-105%);transform: translateX(-105%);}
#nav-input:checked ~ #nav-close {display: block;opacity: .5;}
#nav-input:checked ~ #nav-content {-webkit-transform: translateX(0%);transform: translateX(0%);box-shadow: 6px 0 25px rgba(0,0,0,.15);padding-top:4em}

#nav-content .logo { width: 100%;text-align: center;display: inline-block;}
#nav-content .logo img {max-width: 200px;margin: 20px auto;}

#nav-content ul{padding-top:16%;}
#nav-content .item {width:100%;text-align:center;}
#nav-content .item a {
  display: inline-block;text-align: center;width: 100%;padding-top: 25px;padding-bottom: 15px;text-decoration: none;font-size:5vw;color:#fff;}
#nav-content .jp {font-size:10px;display: block;font-family: "arial unicode ms";color: #fff;display:none;}
#nav-content .en{font-family: 'Josefin Sans', sans-serif;font-size: 23px;color: #fff;}


@media (max-width: 768px) {
	MV{margin-top:45px}
	header.navbar{height:45px}
	.head_service_ribbon{font-size:6vw;line-height:1.2;}
	.head_service_block{flex-direction:column;}
	.right_img{margin:0 0 0 auto;}
	.work .box:nth-child(1):after{display:none;}
	.work .box:nth-child(2):after{display:none;}
	.work .box:nth-child(3):after{display:none;}
	.work .box:nth-child(4):after{display:none;}
	
}


.head_service_wrap.areablock{background:#fff;margin:24px auto 24px;padding:0 1em;border-radius:10px;}
.head_service_wrap.areablock h4{font-size:min(5vw,24px);border-bottom:1px solid #ccc;margin-bottom:.5em;padding:.5em;}
.head_service_wrap.areablock ul{display:flex;flex-wrap:wrap;justify-content:space-around;list-style:none;}
.head_service_wrap.areablock li{font-size:16px; border: 1px solid #ccc;
    border-radius: 10px;
    padding: .3em;margin-bottom:.5em;}
.head_service_wrap.areablock li a{color:inherit;}

.areablock2{background:#fff;margin:4vw auto 24px;padding:0 1em;border-radius:10px;}
.areablock2 h3{font-size:min(5vw,24px);border-bottom:1px solid #ccc;margin-bottom:.5em;padding:.5em;}
.areablock2 p{font-size:16px;padding:1em 0}
.areablock3 h3{font-size:min(5vw,24px);border-bottom:1px solid #ccc;margin-bottom:.5em;padding:.5em;margin-top:4vw;}
.clublist{width:100%;border-top:1px solid #ccc;border-right:1px solid #ccc;max-width:800px;margin:0 auto;}
.clublist th{border-left:1px solid #ccc;border-bottom:1px solid #ccc;background:#fefefe;padding:.5em;text-align:left;}
.clublist th a{color:inherit;}
.clublist td{border-left:1px solid #ccc;border-bottom:1px solid #ccc;background:#fefefe;padding:.5em;text-align:left;}