@charset "utf-8";
/*********************
 base
*********************/
*{ padding:0; margin:0; }
*, *: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;
}
html{
	height:100%; 
	scroll-padding-top:80px;
	scrollbar-gutter:stable;
}
body{
	height:100%; 
	-webkit-text-size-adjust: 100%;
	width:100%;
	font-family: "IBM Plex Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, Roboto, sans-serif;
	font-size:14px;
	font-weight:450;
	font-feature-settings: "palt" 1;
	line-height:1.6em;
	letter-spacing: .09em;
	color:#333;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
main { flex: 1; margin-top:75px; }

/*********************
 汎用
*********************/
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}
img{ vertical-align:middle; }
ul{ list-style-type: none; }
a, button{ transition:0.1s; cursor:pointer; }
.sp{ display: none !important; }
@media screen and (max-width: 774px) {
	.pc{display: none !important;}
	.sp{display: inline-block !important;}
}
article{
	width:100%;
	max-width:1200px;
	margin:0 auto 0;
}
article h2.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}
/* ribbon_title START */
article h2.ribbon_title {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 400px;
	margin: 0 auto;
	height: 46px;
	box-sizing: border-box;
}
article h2.ribbon_title .ribbon-text {
	flex-grow: 1;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
article h2.ribbon_title .arrow-left {
	position: relative;
	width: 15px;
	height: 100%;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	background-color: #fff;
	box-sizing: border-box;
}
article h2.ribbon_title .arrow-left::before {
	content: "";
	position: absolute;
	top: -1px;
	left: -1px;
	width: 0;
	height: 0;
	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
	border-left: 15px solid #222;
}
article h2.ribbon_title .arrow-left::after {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 14px solid #fff;
}
article h2.ribbon_title .arrow-right {
	position: relative;
	width: 15px;
	height: 100%;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	background-color: #fff;
	box-sizing: border-box;
}
article h2.ribbon_title .arrow-right::before {
	content: "";
	position: absolute;
	top: -1px;
	right: -1px;
	width: 0;
	height: 0;
	border-top: 23px solid transparent;
	border-bottom: 23px solid transparent;
	border-right: 15px solid #222;
}
article h2.ribbon_title .arrow-right::after {
	content: "";
	position: absolute;
	top: 0;
	right: -1px;
	width: 0;
	height: 0;
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-right: 14px solid #fff;
}
/* ribbon_title END */
.ellipsis_3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
}

/*********************
 flexboxタグ
*********************/
.flexbox{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}
.flextop{
	-webkit-box-align: flex-start;
	-webkit-align-items: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
}
.flexright{
	-webkit-box-align: end;
	-webkit-align-items: end;
	-ms-flex-align: end;
	align-items: end;
}
.flexstretch{
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}
.flexbetween{
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.flexcenter{
	-webkit-justify-content: center;
	justify-content: center;
}

/*********************
 header
*********************/
header{
	background:#fff;
	position: fixed;
	width:100%;
	z-index:99;
}
header a:first-child{
	margin-right: auto;
}
header h1 img{
	display:block;
	max-height:65px;
	margin:5px 0 5px 10px;
}
header h2 img{
	display:block;
	padding-right:100px;
	max-height:50px;
}

/** menu button start **/
header .menu_btn{
	display:inline-block;
	position: fixed;
	background:#00843b;
	cursor: pointer;
	width: 75px;
	height:75px;
	top:0;
	right:0;
	z-index:999;
}
header .menu_btn p{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	right: 20px;
	height: 2px;
	border-radius: 5px;
	background: #fff;
	width: 45%;
 }
header .menu_btn p:nth-of-type(1) { top:23px; }
header .menu_btn p:nth-of-type(2) { top:29px; }
header .menu_btn p:nth-of-type(3) { top:35px; }

header .menu_btn p:nth-of-type(3)::after {
	content:"MENU";
	position: absolute;
	top:1px;
	right:1px;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing:.1em;
}
header .menu_btn.active p:nth-of-type(1) {
	top: 24px;
	right: 28px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
header .menu_btn.active p:nth-of-type(2) { opacity: 0; }
header .menu_btn.active p:nth-of-type(3){
	top: 36px;
	right: 28px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
header .menu_btn.active p:nth-of-type(3)::after {
	content:"CLOSE";
	transform: translateY(0) rotate(-45deg);
	top:2px;
	right:-22px;
}

/** menu list **/
header .menu_list{
	position: fixed;
	background:#fff;
	width:50vw;
	z-index:998;
	border-top:75px solid #00843b;
	display:none;
	opacity: 0;
	height: 100vh;
	top:0;
	left:100%;
	color:#004ea2;
}
header .menu_list ul{
	display:block;
}
header .menu_list.active{
	animation-name:slideinRight;
	animation-duration:0.3s;
	animation-fill-mode:forwards;
	display:inline-block;
	filter: drop-shadow(0 0px 8px rgba(0, 0, 0, .2));
}
@keyframes slideinRight {
  0% {
	transform: translateX(100%);
  }
  100% {
	opacity: 1;
	transform: translateX(-100%);
  }
}
header .menu_list li{
	border-bottom:1px solid #ececec;
	display:block !important;
	height:58px;
	line-height:58px;
}
header .menu_list li a{
	color:#333;
	text-decoration:none;
	font-weight:500;
	position: relative;
	display: inline-block;
	padding:0 20px;
	width:100%;
	margin:0 0 0 5px !important;
}
header .menu_list li a:hover{
	text-decoration:none;
}
header .menu_list li a:before {
	content: '';
	width: 6px;
	height: 6px;
	border: 0;
	border-top: solid 2px #00843b;
	border-right: solid 2px #00843b;
	transform: rotate(45deg);
	position: absolute;
	top: -1px;
	right: 30px;
	bottom: 0;
	margin: auto;
}
header .menu_list li a p {
	display:inline-block;
}
header .menu_list li a img {
	display:none;
}
/** menu button end **/


/*********************
 top_header
*********************/
#top_header{
	max-width:100%;
	margin:0 auto;
	background-image: url(/img/top_bg.gif);
}
#top_header div{
	width:100%;
	max-width:1200px;
	margin:0 auto;
}
#top_header div picture img{
	display:block;
	width:100%;
	margin:0 auto;
}

/*********************
 linebtn_Box
*********************/
article.linebtn_Box{
	max-width: 100%;
	margin:50px 0;
	padding:20px 0;
	background:#f0f0f0;
	text-align:center;
}
article.linebtn_Box img{
	max-width: calc(100% - 15px);
}

/*********************
 line_keiyaku
*********************/
#line_keiyaku{
	text-align:center;
	padding:0px 15px 0;
}
#line_keiyaku h3{
	display:block;
	font-size:3em;
	letter-spacing: 0.02em;
	margin-top:40px;
}
#line_keiyaku h3 span{
	color:#008539;
}
#line_keiyaku .shokai_text{
	margin:40px 0;
}

/*********************
 keiyaku_step
*********************/
#keiyaku_step{
	max-width: 100%;
	margin:40px auto;
	background:#edfff1;
	padding:40px 15px;
}
#keiyaku_step .stepbox{
	text-align:center;
	max-width:1100px;
	width:100%;
	margin:0 auto;
}
#keiyaku_step .stepbox div{
	width:calc(25% - 10px);
	font-size: clamp(10.5px, 1.3vw, 14px);
	font-weight:bold;
	line-height: 1.6em;
	text-shadow:0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff;
}
#keiyaku_step .stepbox img{
	width:100%;
}
#keiyaku_step .stepbox h3{
	padding:10px 0 5px;
	white-space: nowrap;
	font-size: clamp(10px, 1.5vw, 18px);
}
#keiyaku_step .stepbox div.step01 h3{ color:#0496c9; }
#keiyaku_step .stepbox div.step02 h3{ color:#ec267b; }
#keiyaku_step .stepbox div.step03 h3{ color:#fb881d; }
#keiyaku_step .stepbox div.step04 h3{ color:#0d9155; }

#keiyaku_step section{
	background:#fff;
	border:1px solid #008439;
	border-radius: 10px;
	margin:30px auto 0;
	padding:15px;
	max-width:700px;
	text-align:center;
}
#keiyaku_step section p{
	color:#038338;
	font-weight:bold;
	text-align:center;
	padding-bottom:5px;
}

/*********************
 nayami_Box
*********************/
#nayami_Box{
	max-width: 100%;
	text-align:center;
}
#nayami_Box img{
	max-width:calc(100% - 30px);
}
#nayami_Box section{
	background:#00c84b;
	padding:40px 15px;
	margin-bottom:15px;
}
#nayami_Box section div{
	flex-wrap: wrap;
	margin:0 auto;
	width:100%;
	max-width:1100px;
}
#nayami_Box section div img{
	background:#00c84b;
	width:calc((100% / 6) - 10px);
	max-width:150px;
	margin-top:15px;
}

/*********************
 select_point
*********************/
#select_point{
	max-width: 100%;
	text-align:center;
}
#select_point h3{
	display:block;
	font-size:3em;
	letter-spacing: 0.02em;
	margin:40px 0 20px;
}
#select_point h3 span{
	display:inline-block;
	color:#008539;
}
#select_point h3 span::first-letter{
	color:#fe6700;
	font-size:150%;
  letter-spacing: -0.1em; /* 2文字目との隙間を詰める（マイナス値を設定） */
  margin-right: 0.05em; /* 右側の余白を微調整する */
}
#select_point section{
	margin:0 auto;
	background:#edfff1;
}
#select_point ul{
	margin:0 auto;
	padding:15px;
	flex-wrap: wrap;
	width:100%;
	max-width:1100px;
}
#select_point ul li{
	width:calc((100% / 4) - 15px);
	padding:15px 0;
	line-height:1.3em;
	font-size:0.9em;
}
#select_point ul li img{
	width:100%;
}
#select_point ul li p{
	color:#05883c;
	font-weight:bold;
	padding:10px 0 5px;
}
#select_point .point_info{
	margin:50px auto;
	width:100%;
	max-width:1000px;
}
#select_point .point_info img{
	width:30%;
	max-width:250px;
}
#select_point .point_info p{
	background:#edfff1;
	border-left:10px solid #018339;
	border-radius: 10px;
	padding:30px 40px;
	text-align:left;
	margin-left:30px;
	line-height:2em;
}
#select_point .point_info p span{
	color:#0d8142;
}

/*********************
 scene_Box
*********************/
#scene_Box{
	width:100%;
	max-width:100%;
	margin:0 auto;
	text-align:center;
}
#scene_Box h2{
	display:block;
	font-size:2em;
	letter-spacing: 0.02em;
	margin:80px 15px 20px;
}
#scene_Box section{
	background:#edfff1;
	padding:15px;
}
#scene_Box ul{
	margin:0 auto;
	flex-wrap: wrap;
	width:100%;
	max-width:1100px;
}
#scene_Box ul li{
	width:calc((100% / 6) - 15px);
	max-width:150px;
	padding:15px 0;
}
#scene_Box ul li img{
	width:100%;
}
#scene_Box ul li p{
	padding-top:15px;
}

/*********************
 price_box
*********************/
#price_box{
	text-align:center;
	padding:0 15px;
}
#price_box h2{
	font-size:2em;
	border-bottom:2px solid #333;
	margin-bottom:15px;
	padding-bottom:15px;
}
#price_box ul{
	flex-wrap: wrap;
	margin-0 auto;
}
#price_box ul li{
	margin-top:15px;
	padding:0 7px;
	width:calc(100% / 4);
}
#price_box ul li img{
	width:100%;
	max-width:251px;
}
#price_box p{
	margin-top:14px;
	font-size:0.9em;
}
#price_box picture{
	display:block;
	margin:50px 0 20px;
}
#price_box picture img{
	width:100%;
	max-width:1100px;
}

/*********************
 hikaku_box
*********************/
#hikaku_box{
	width:100%;
	max-width:100%;
	margin:0 auto;
	text-align:center;
}
#hikaku_box h2{
	font-size:2em;
	border-bottom:2px solid #333;
	margin-bottom:15px;
	padding-bottom:15px;
}
#hikaku_box .scrollable-table-container {
	margin:40px auto 0;
	overflow-x: auto;
	white-space: nowrap;
	width:100%;
	max-width:1100px;
	padding:0 15px;
}
#hikaku_box table {
	width:100%;
	border-collapse: separate;
	border-spacing: 0;
	font-weight:bold;
	border-radius: 10px;
	border:2px solid #00843b;
	overflow: hidden;
}
#hikaku_box table td {
	padding: 7px 40px;
	border-bottom: 1px solid #00843b;
	border-right: 1px solid #00843b;
}
#hikaku_box table td:first-child{
	background-color: #edfff1;
	border-right: 2px solid #00843b;
	min-width: 100px;
}
#hikaku_box table td:last-child{
	border-right: 0;
}
#hikaku_box table tr:last-child td{
	border-bottom:0;
}
#hikaku_box table td.myshop{
	background-color: #00843b;
	color:#fff;
	border-right: 2px solid #00843b;
}
#hikaku_box table td.yellow{
	background-color: #ffff93;
	color:#00843b;
	border-right: 2px solid #00843b;
}
#hikaku_box section{
	background: #edfff1;
	padding:30px 15px;
	margin-top:40px;
}
#hikaku_box section img{
	width:100%;
	max-width: 549px;
}
#hikaku_box section .green{
	width:100%;
	max-width:1070px;
	background: #00c84b;
	margin:20px auto 0;
	padding:20px;
	text-align:center;
	border-radius: 10px;
}
#hikaku_box section .white{
	display:inline-block;
	background: #fff;
	margin:20px;
	padding:20px;
	border-radius: 10px;
	line-height:1.8em;
}
#hikaku_box section .white span{
	color: #087b3a;
}
#hikaku_box section .white span.bold{
	font-weight:bold;
}
/*********************
 hoshon_Box
*********************/
#hoshon_Box{
	margin:0 auto;
	text-align:center;
	padding:0 15px;
}
#hoshon_Box h2{
	font-size:2em;
	border-bottom:2px solid #333;
	margin-bottom:15px;
	padding-bottom:15px;
}
#hoshon_Box .tabelBox{
	flex-wrap: wrap;
	margin:0 auto;
	width:100%;
	max-width:730px;
}
#hoshon_Box .insurance-box {
	width:100%;
	max-width:350px;
	margin: 20px auto 0;
	padding:0 7px;
}
#hoshon_Box .insurance-title {
	background: #333;
	color: #fff;
	text-align: center;
	font-weight: bold;
	padding: 10px 0;
}
#hoshon_Box .insurance-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
#hoshon_Box .insurance-table tr{
	height:56px;
}
#hoshon_Box .insurance-table th,
#hoshon_Box .insurance-table td {
	border: 1px solid #666;
	padding: 10px 10px;
	text-align: center;
	vertical-align: middle;
	background: #fff;
	line-height:1.1em;
}
#hoshon_Box .insurance-table th {
	width: 35%;
	font-weight: bold;
}
#hoshon_Box .note {
	display: block;
	margin-top: 4px;
	font-size:0.8em;
}
#hoshon_Box .car-note{
	font-size:0.8em;
}
#hoshon_Box .insurance-table tr.pc{
	border-left: 1px solid #666;
	border-right: 1px solid #666;
}
#hoshon_Box .insurance-table tr.pc:last-child{
	border-bottom:1px solid #666;
}
#hoshon_Box .insurance-table tr.pc td{
	border: 0;
}
#hoshon_Box .coution{
	padding-top:15px;
	font-size:0.9em;
	line-height:1.6em;
}
#hoshon_Box .coution span{
	color:#ff2e27;
}

/*********************
 qa
*********************/
#qa h2{
	font-size:2em;
	text-align:center;
	margin-bottom:20px;
}
#qa details{
	width:100%;
	max-width:800px;
	margin:0 auto;
}
#qa details summary{
	width:100%;
	padding:15px 30px;
	position: relative;
	background:#00843b;
	cursor:pointer;
	color:#fff;
	font-weight:400;
	margin-top:10px;
}
#qa details summary.active{
	color:#fff;
	background:#00843b;
}
#qa details summary:after{
	content: "＋";
	color:#fff;
	font-size: 1.4em;
	font-weight:400;
	position: absolute;
	right:20px;
}
#qa details summary.active:after{
	content: "－";
	color:#fff;
	font-size: 1.4em;
	font-weight:400;
	position: absolute;
	right:20px;
}
#qa details summary:before{
	content: "Q.";
	padding-right:10px;
}
#qa details p{
	padding:20px 30px;
	display: none;
	background:#fff;
}
#qa details p:before{
	content: "A.";
	color:#cf777c;
	padding-right:5px;
}

/*********************
 company
*********************/
#company h2{
	font-size:2em;
	text-align:center;
	margin-bottom:20px;
}
#company ul{
	width:100%;
	max-width:800px;
	margin:30px auto;
	border-radius: 10px;
	border:1px solid #333;
	padding:40px;
}
#company ul li{
	padding-bottom:10px;
	border-bottom:1px solid #e1ded4;
	margin-bottom:10px;
}
#company ul li:last-child{
	padding-bottom:0;
	border-bottom:0;
	margin-bottom:0;
}
#company ul p{
	width:100px;
	font-weight:500;
}
#company ul div{
	width:calc(100% - 100px);
}

/*********************
 footer
*********************/
footer p{
	text-align:center;
	font-size:0.8em;
	padding:20px 0;
	background:#00843b;
	color:#fff;
	font-size: clamp(10.5px, 1.3vw, 14px);
}