@charset "UTF-8";
/* CSS Document */
body{
	margin:0;
	padding:0;
	color:#222222;
	background:#FFFFFF;
	font-size:16px;
	font-weight:500;
	line-height: 1.5;
	overflow-x:hidden;
	font-family: 'Noto Sans JP', sans-serif;
	-webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

.en{
	font-family: "Roboto", sans-serif;
}
.din{
	font-family: "din-2014", sans-serif;
}

body.open, body.modaal-noscroll{
	overflow: hidden;
}
input, textarea {
    border-radius: 0;
    outline: none;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
    font-size:16px;
    -webkit-border-radius : 0;
    -webkit-tap-highlight-color : rgba(0,0,0,0);
}

img{
	vertical-align:bottom;
	max-width:100%;
	height:auto;
}

a {
	color:#333;
	text-decoration:none;
	transition: all 0.3s ease-in-out 0s;
}

a:hover {
	text-decoration:none;
}
.flex_wrap{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
}
.flex_wrap_between{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_wrap_center{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	justify-content: center;
}
.flex_wrap_middle{
	display: -webkit-flex;
    display: flex;
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap:wrap;
	align-items: center;
}

.sp{display:none !important;}
.note{font-size:88%;font-weight: 400;}

.wrap_main{
	width: calc(100% - clamp(390px, 25vw, 502px));
	transition: all 0.3s ease-in-out 0s;
}
aside{
	width: clamp(390px, 25vw, 502px);
	position: sticky;
	height: 100vh;
	background: #FDFCFC;
	border: 1px solid #CCCCCC;
	overflow: auto;
	top: 0;
	transition: all 0.3s ease-in-out 0s;
}
/************************
header
************************/
header{
	position: fixed;
	width: calc(100% - clamp(390px, 25vw, 502px));
	z-index: 1000;
	height: 80px;
	transition: all 0.3s ease-in-out 0s;
	background: #fff;
	box-shadow: 0px 0px 15px #00000029;
}
.hd_sub{
	box-shadow:none;
}
header .logo{
	width: 236px;
}
.inner_header{
	margin: auto;
	align-items: center;
	height: 100%;
	position: relative;
	padding: 0 30px;
}
.inner_header nav{
	gap:3vw;
}
.inner_header ul{
	gap:3vw;
	font-weight: 700;
}
.inner_header nav a:hover{
	opacity: .5;
}
.btn_hd a{
	background: #EE5039;
	border-radius: 6px;
	line-height: 55px;
	padding: 0 40px 0 20px;
	color: #fff;
	font-weight: 700;
	font-size: 17px;
	display: block;
	position: relative;
}
.btn_hd a::after{
	display: block;
	content: '';
	position: absolute;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 16px;
}


/************************
btn
************************/
.btn{
	margin: 18px auto 0;
	max-width: 427px;
}
.btn a{
	background: #EE5039;
	border-radius: 6px;
	line-height: 67px;
	padding: 0 51px 0 32px;
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	display: block;
	position: relative;
}
.btn a::after{
	display: block;
	content: '';
	position: absolute;
	margin: auto;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 16px;
}


/************************
menu btn
************************/
.menu_btn{
	width: 30px;
	height: 50px;
	text-align: center;
	cursor:pointer;
	transition: all 0.3s ease-in-out 0s;
    z-index: 101;
	top: 0;
	right: 4%;
	margin-left: 15px;
	display: none;
}
.sp_nav_btn{
	width: 100%;
	height: 100%;
	z-index: 1000;
	text-align: center;
	position: relative;
}
#panel-btn{
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: auto;
  position: absolute;
  top:0;
  bottom:0;
  left: 0;
  right: 0;
}
#panel-btn:hover{
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
  width: 100%;
  height: 2px;
  margin: auto;
  background: #064176;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #064176;
  transition: .5s;
}
#panel-btn:hover #panel-btn-icon, #panel-btn:hover #panel-btn-icon:before, #panel-btn:hover #panel-btn-icon:after{
}
#panel-btn-icon:before{
  margin-top: -11px;
}
#panel-btn-icon:after{
  margin-top: 8px;
}
#panel-btn .close, #panel-btn:hover #panel-btn-icon.close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
#panel-btn .close:after{
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.wrapper{
	padding-top: 80px;
}


/************************
kv
************************/
.kv{
	background: url("../img/kv.png") center bottom / 100% auto;
	padding: clamp(60px, 6vw, 120px) 0 clamp(150px, 19vw, 600px);
}

.inner_kv{
	width: 90%;
	max-width: 1220px;
	margin: auto;
}

.lead_kv{
	margin-bottom: 8px;
}
.lead_kv span{
	display: inline-block;
	font-size: clamp(18px, 1.5vw, 31px);
	color: #fff;
	background: #064176;
	padding: 8px 24px;
	font-weight: 700;
}
.inner_kv h1{
	font-size: clamp(32px, 3vw, 60px);
	font-weight: 900;
	margin-bottom: 32px;
	color: #fff;
}
.inner_kv h1 .h1_b{
	font-size: clamp(36px, 3.2vw, 65px);
}
.list_kv{
	gap:1%;
}
.list_kv li{
	width: 23%;
}


.intro{
	padding: 100px 0;
	position: relative;
}
.intro::after{
	content: '';
    display: block;
    width: 210px;
    height: 82px;
    margin: auto;
    background: #fff;
    clip-path: polygon(0 0, 50% 100%, 100% 0%);
    bottom: -80px;
    left: 0;
    right: 0;
    position: absolute;
	z-index: 10;
}
.ttl_logoin{
	text-align: center;
	font-size: clamp(24px, 2.1vw, 41px);
	font-weight: 900;
	color: #064176;
	margin-bottom: 40px;
}
.ttl_logoin .ttl_logo{
	font-family: "Montserrat", serif;
	color: #222222;
}
.intro_box{
	border: 6px solid #E7F2FA;
	border-radius: 25px;
	background: #fff;
	padding: 30px 26px;
	gap:4.5%;
	align-items: center;
}
.intro_box figure{
	width: 26%;
}
.intro_box ul{
	width: 69.5%;
}
.intro_box li{
	font-size: 18px;
	background: url("../img/mark.png") no-repeat left top 3px;
	padding-left: 40px;
}
.intro_box li:not(:last-child){
	margin-bottom: 12px;
}

.intro2{
	padding: 120px 0;
	background: #E7F2FA;
}
.org{
	color: #EE5039;
}
.dotto{
	background-image: radial-gradient(circle at center, #EE5039 20%, transparent 20%); /* 点の色とサイズ調整 */
	background-position: top right; /* 点の位置 */
	background-repeat: repeat-x; /* 横方向に繰り返し */
	background-size: 1em 0.5em; /* 点の間隔とサイズ調整 */
	padding-top: .2em; /* 縦方向の位置調整 */
}

.lead{
	line-height: 1.6;
	text-align: center;
	margin-bottom: 68px;
	font-size: 18px;
}
.intro2 h3{
	font-weight: 900;
	text-align: center;
	font-size: 40px;
	margin-bottom: 62px;
	color: #064176;
}
.intro2 h3 span{
	font-size: 20px;
	font-weight: 700;
	display: block;
}

.list_reason{
	margin: auto;
	max-width: 800px;
}
.list_reason li{
	border-radius: 10px;
	background: #fff;
	position: relative;
	padding: 16px 24px 16px 102px;
	align-items: center;
}
.list_reason li:not(:last-child){
	margin-bottom: 54px;
}
.list_reason li .num_reason{
	position: absolute;
	top: -35px;
	left: 16px;
}
.list_reason li .reason_disc{
	width: 56%;
}
.list_reason li .reason_disc h4{
	text-align: center;
	color: #064176;
	font-size: 24px;
	margin-bottom: 16px;
}
.list_reason li figure{
	width: 39%;
	text-align: center;
}


.cta{
	background: transparent linear-gradient(90deg, #4FA0DA 0%, #A1D1FA 100%) 0% 0% no-repeat padding-box;
	padding: 43px 0 34px;
	color: #fff;
	font-size: 18px;
}
.cta .inner_980{
	position: relative;
}
.i_cta{
	position: absolute;
	width: 128px;
	display: block;
	top: -30px;
	left: 50%;
	margin-left: -430px;
}
.cta h2{
	color: #fff;
	font-size: 32px;
	margin-bottom: 28px;
}
.cta figure{
	position: absolute;
	left: 50%;
	margin-left: 304px;
	bottom: 10px;
	width: 183px;
}


.def_sec{
	padding: 96px 0;
}
.inner_980{
	width: 90%;
	max-width: 980px;
	margin: auto;
}
.inner_800{
	width: 90%;
	max-width: 800px;
	margin: auto;
}
.def_sec h2{
	text-align: center;
	margin-bottom: 40px;
	padding-bottom: 48px;
	position: relative;
	color: #064176;
	font-size: 40px;
	font-weight: 900;
}
.def_sec h2::after{
	content: '';
	display: block;
	width: 1px;
	height: 30px;
	background: #064176;
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
}
.sec_case{
	padding-bottom: 0;
}
.wrap_tab_list{
	overflow: auto;
}
.list_tab{
	align-items: flex-end;
}
.list_tab li{
	width: 197px;
	text-align: center;
	border: 2px solid #064176;
	border-bottom: none;
	border-radius: 14px 14px 0px 0px;
	font-weight: 700;
	letter-spacing: -2px;
	color: #064176;
	padding: 16px 0;
	transition: all 0.3s ease-in-out 0s;
	cursor: pointer;
	font-size: 18px;
}
.list_tab li figure{
	display: none;
}
.list_tab li.select{
	background: #064176;
	color: #fff;
	padding: 8px 0 16px;
}
.list_tab li.select figure{
	display: block;
}
.list_tab li:hover{
	background: #064176;
	color: #fff;
}
.tab_wrap{
	border-top: 5px solid #064176;
	border-bottom: 5px solid #064176;
	padding: 67px 0 97px;
	background: #EFF3F6;
}
.tab_body{
	margin: auto;
	max-width: 1220px;
	width: 90%;
}
.list_case{
	gap:26px 2.7%;
}
.list_case li{
	width: 30.6%;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	padding: 24px;
	background: #fff;
}
.list_case li h3{
	border-left: 8px solid #064176;
	padding-left: 13px;
	color: #064176;
	margin-bottom: 26px;
	line-height: 1.1;
	height: 3.3em;
}
.tb_case{
	border-collapse: separate;
	border: 1px solid #CCCCCC;
	border-radius: 5px;
	width: 100%;
	margin-bottom: 16px;
	border-spacing: 0;
	font-size: 16px;
}
.tb_case th, .tb_case td{
	padding: 6px 16px;
	border-bottom: 1px solid #CCCCCC;
}
.tb_case th{
	border-right: 1px solid #CCCCCC;
	background: #F0F0F0;
	font-weight: 500;
	text-align: center;
	vertical-align: top;
}
.tb_case tr:last-child th, .tb_case tr:last-child td{
	border-bottom: none;
}
.case_box{
	border: 2px dotted #064176;
	border-radius: 10px;
	padding: 16px;
	font-size: 16px;
}
.case_box h4{
	font-size: 16px;
	margin-bottom: 8px;
	color: #064176;
}
.case_box h4 i{
	margin-right: 4px;
}

.list_flow{
	position: relative;
	z-index: 1;
}
.list_flow::before{
	width: 0;
	height: 90%;
	content: '';
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 67px;
	border-left: 4px dotted #CCCCCC;
	z-index: -1;
}
.list_flow li{
	gap:39px;
}
.list_flow li:not(:last-child){
	margin-bottom: 45px;
}
.list_flow li .flow_disc{
	width: calc(100% - 178px);
}
.list_flow li h3{
	color: #064176;
	font-size: 24px;
	margin-bottom: 14px;
}
.list_flow li h3 span{
	font-size: 28px;
	background: #064176;
	padding: 0 22px;
	border-radius: 100vh;
	color: #fff;
	margin-right: 12px;
}






.sec_faq{
	background: #E7F2FA;
}
.wrap_faq dl{
	margin-bottom: 34px;
	border: 1px solid #CCCCCC;
	border-radius: 10px;
	overflow: hidden;
}
.wrap_faq dl:last-of-type{
	margin-bottom: 0;
}

.icon_faq{
    font-size: 41px;
    color: #064176;
    width: 46px;
    font-family: "Montserrat", serif;
	font-weight: 700;
	line-height: 1;
}
.icon_faq.icon_a{
    color: #EE5039;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 24px;
}
.wrap_faq dl dt{
    cursor: pointer;
    position: relative;
	padding: 16px 150px 16px 24px;
	background: #F0F0F0;
	color: #064176;
}
.wrap_faq dl dt h3{
    width: calc(100% - 46px);
    font-size: 20px;
	font-weight: 700;
}
.wrap_faq dl dt span{
	display: block;
	position: absolute;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 47px;
	height: 20px;
	background: url("../img/arrow.png") no-repeat;
	background-size: 100% auto;
	transform: rotate(-180deg);
}
.wrap_faq dl dt.is-active span{
	transform: rotate(0deg);
}
.wrap_faq dl dd{
    display: none;
	padding: 16px 24px;
	background: #fff;
	border-top: 1px solid #CCCCCC;
}


footer{
	background: #064176;
	padding: 18px;
	text-align: center;
	color: #fff;
	font-size: 16px;
}
footer a{
	color: #fff;
	text-decoration: underline;
}
footer ul{
	gap:49px;
	margin-bottom: 30px;
}
.copy{
	font-size: 15px;
}

.as_form{
	padding: 30px 0 60px;
	max-width: 390px;
	width: 90%;
	margin: auto;
}
.as_form h2{
	font-size: clamp(14px, 1.3vw, 26px);
	font-weight: 900;
	color: #064176;
	text-align: center;
	letter-spacing: 2.9px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.as_form h2 .dotto{
	background-image: radial-gradient(circle at center, #064176 20%, transparent 20%); /* 点の色とサイズ調整 */
	background-position: top right 5px;
}
.as_b{
	font-size: clamp(16px, 2.4vw, 50px);
	color: #EE5039;
	font-family: "Montserrat", serif;
	font-weight: 700;
}
.as_form dl{
	margin-bottom: 8px;
}
.as_form dl dt{
	margin-bottom: 4px;
	font-size: 14px;
}
.as_form dl dt .req{
	color: #EE5039;
	font-size: 12px;
}
.as_form dl input{
	border: 1px solid #707070;
	border-radius: 4px;
	background: #fff;
	padding: 8px 12px;
	font-size: 16px;
	width: 100%;
}
.as_form dl select{
	border: 1px solid #707070;
	border-radius: 4px;
	background: #fff;
	padding: 8px 40px 12px 8px;
	font-size: 16px;
	appearance: none;
}
.as_form dl .flex_wrap{
	align-items: flex-end;
	gap:10px;
}
.as_form dl dd.flex_wrap{
	gap:20px;
}
.as_form dl select.wd_sec{
	width: 100%;
}
.wrap_select{
	position: relative;
}
.wrap_select::after{
	position: absolute;
	right: 8px;
	content: '';
	width: 16px;
	height: 8px;
	background: #787878;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	margin: auto;
	top: 0;
	bottom: 0;
}
.policy{
	text-align: center;
	font-size: 16px;
}
.policy input{
	margin-right: 10px;
}
.submit{
	margin: 18px auto 0;
	max-width: 316px;
	position: relative;
}
.submit::after{
	display: block;
	content: '';
	position: absolute;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
	top: 0;
	bottom: 0;
	right: 16px;
}
.submit input{
	border-radius: 9px;
	background: #EE5039;
	color: #fff;
	font-size: 19px;
	font-weight: 700;
	cursor: pointer;
	text-align: center;
	line-height: 54px;
	width: 100%;
	border: none;
}
.jump{
	animation: jump 1s infinite;
}
@keyframes jump {
	0% {
		transform: translateY(0)
	}

	6.5% {
		transform: translateY(-6px) rotateX(-9deg)
	}

	18.5% {
		transform: translateY(5px) rotateX(7deg)
	}

	31.5% {
		transform: translateY(-3px) rotateX(-5deg)
	}

	43.5% {
		transform: translateY(2px) rotateX(3deg)
	}

	50% {
		transform: translateY(0)
	}
}
/********************************
sp
********************************/
@media screen and (max-width: 1600px) {
	.inner_header nav{gap:1vw;}
	.inner_header ul{gap:.8vw; font-size: 14px;}
	.btn_hd a{font-size: 14px;padding: 0 24px 0 10px;}
	header .logo{width: 188px;}
}
@media screen and (max-width: 1240px) {
	.menu_btn{display: block;}
	.inner_header nav{position: absolute; width: 100%; height: calc(100vh - 80px);top: 80px; left: 0; background: #fff; flex-direction: column;transform: scaleY(0);transition: all 0.3s ease-in-out 0s; transform-origin: top;padding: 60px 5%;}
	.inner_header ul{flex-direction: column;}
	.open .inner_header nav{transform: scaleY(1);}
}
@media screen and (max-width: 768px) {
	.open .inner_header nav{gap:40px;}
	.inner_header ul{gap:20px;}
}
@media screen and (max-width: 1430px) {
	.list_case li{width:  48.65%;}
	.list_tab li{width: 20%; font-size: 14px;}
}
@media screen and (max-width: 1374px) {
	.kv{background-size: cover;}
}
@media screen and (max-width: 768px) {
	body{font-size: 14px;}
	.note{font-size: 12px;}
	.sp{ display:block !important;}
	.pc{display:none !important;}
	.wrap_main{width: 100%;}
	header{width: 100%;}
	.inner_kv h1{font-size: 20px; margin-bottom: 18px;}
	.inner_kv h1 .h1_b{font-size: 22px;}
	.list_kv li{width: 30%;}
	.intro{padding: 50px 0;}
	.intro_box{flex-direction: column-reverse;}
	.intro_box figure{width: 70%; margin: 20px auto 0;}
	.intro_box li{font-size: 16px; background-size: 18px auto;padding-left: 30px;}
	.intro2 h3{font-size: 28px;}
	.list_reason li{padding:32px 24px;}
	.list_reason li .num_reason{left: 0; top: -50px;}
	.list_reason li .reason_disc{width: 100%;}
	.list_reason li figure{width: 60%; margin: 20px auto 0;}
	.ct_ttl_wrap{display: flex; align-items: center; gap:20px;margin-bottom: 28px;}
	.i_cta{position: static; margin: 0;}
	.ttl_dec{display: none;}
	.cta h2{font-size: 26px; margin-bottom: 0;}
	.cta figure{position: static;text-align: center;margin: 20px 0 0; width: 100%;}
	.btn a{font-size: 16px;padding: 0 20px 0 20px;text-align: center;}
	.intro2{padding-bottom: 60px;}
	.def_sec{padding: 48px 0;}
	.sec_case{padding-bottom: 0;}
	.list_tab{min-width: auto; width: 90%; margin: 0 auto 32px; gap:12px 8px; justify-content: flex-start;}
	.list_tab li{width: calc((100% - 8px) / 2);border-radius: 14px;border-bottom: 2px solid #064176;position: relative;padding: 8px 0; height:calc(3em + 16px); display: flex; justify-content: center; align-items: center;}
	.list_tab li figure{position: absolute; margin: auto;top: 0;bottom: 0;left: 4px; width: 30px; display: flex !important; align-items: center; }
	.list_tab li.select{padding: 8px 0;}
	.def_sec h2{font-size: 30px;}
	.list_flow li figure{width: 110px;}
	.list_flow li .flow_disc{width: calc(100% - 129px);}
	.list_flow li{gap:19px;}
	.list_flow li h3{font-size: 20px;}
	.list_flow li h3 span{font-size: 22px;}
	.list_flow::before{height: 80%; left: 54px;}
	.wrap_faq dl dt span{width: 23.5px; height: 10px; right: 10px;}
	.wrap_faq dl dt{padding: 16px 50px 16px 24px;}
	.wrap_faq dl dt h3{font-size: 18px;}
	.as_form h2{font-size: 24px;}
	.as_b{font-size: 40px;}
	aside{position: relative; height: auto; width: 100%;}
	.intro_box ul{width: 100%;}
	.list_case li{width: 100%;}
	.lead{font-size: 14px;}
	.cta{font-size: 14px;}
}