@charset "utf-8";

/*********************
 window resize 774px
*********************/
@media screen and (max-width: 774px) {
	.pc{display: none;}
	.sp{display: block;}

	p.title_txt,
	h2.title_txt{
		font-size:1.6em;
	}
	/*********************
	 ribbon_title
	*********************/
	article h2.ribbon_title {
		height: 36px;
		width:90%;
	}
	article h2.ribbon_title .ribbon-text {
		font-size: 14px;
	}
	article h2.ribbon_title .arrow-left::before {
		border-top: 18px solid transparent;
		border-bottom: 18px solid transparent;
	}
	article h2.ribbon_title .arrow-left::after {
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
	}
	article h2.ribbon_title .arrow-right::before {
		border-top: 18px solid transparent;
		border-bottom: 18px solid transparent;
	}
	article h2.ribbon_title .arrow-right::after {
		border-top: 17px solid transparent;
		border-bottom: 17px solid transparent;
	}

	/*********************
	 header
	*********************/
	header{
		margin:0 auto;
	}
	/** menu list **/
	header .menu_list{
		width:80vw;
	}
	header h2{
		display:none;
	}

	/*********************
	 linebtn_Box
	*********************/
	article.linebtn_Box{
		margin:25px 0 40px;
		padding:15px 0;
	}
	article.linebtn_Box img{
		max-width: calc(90% - 15px);
	}

	/*********************
	 line_keiyaku
	*********************/
	#line_keiyaku h3{
		font-size:2em;
		line-height:1.2em;
		margin-top:20px;
	}
	#line_keiyaku h3 span{
		display:block;
	}
	#line_keiyaku .shokai_text{
		margin:20px 0;
		text-align:left;
	}

	/*********************
	 keiyaku_step
	*********************/
	#keiyaku_step .stepbox{
		flex-wrap: wrap;
	}
	#keiyaku_step .stepbox div{
		width:calc(50% - 10px);
		font-size: clamp(9.5px, 1.5vw, 14px);
	}
	#keiyaku_step .stepbox div.step01,
	#keiyaku_step .stepbox div.step02{ margin-bottom:15px; }
	#keiyaku_step .stepbox h3{
		font-size: clamp(11px, 2vw, 16px);
	}
	#keiyaku_step section{
		text-align:left;
	}

	/*********************
	 nayami_Box
	*********************/
	#nayami_Box section div img{
		background:#00c84b;
		width:calc((100% / 3) - 10px);
		max-width:calc((100% / 3) - 10px);
	}

	/*********************
	 select_point
	*********************/
	#select_point h3{
		font-size:2em;
		line-height:1.2em;
		margin-top:20px;
	}
	#select_point ul li{
		width:calc((100% / 2) - 7.5px);
		font-size: clamp(10.5px, 1.5vw, 16px);
	}
	#select_point .point_info{
		margin:25px auto 0;
		display:block;
		padding:0 15px;
	}
	#select_point .point_info img{
		width:50%;
	}
	#select_point .point_info p{
		padding:20px;
		text-align:left;
		margin-top:15px;
		margin-left:0px;
		line-height:1.8em;
	}

	/*********************
	 scene_Box
	*********************/
	#scene_Box h2{
		font-size:1.4em;
		margin:20px 15px 20px;
	}
	#scene_Box ul li{
		width:calc((100% / 3) - 7.5px);
		max-width:100%;
    	padding: 5px 0;
	}
	#scene_Box ul li p{
		padding-top:2px;
		font-size: clamp(9.5px, 1.5vw, 14px);
	}

	/*********************
	 price_box
	*********************/
	#price_box h2{
		font-size:1.4em;
		margin-bottom:5px;
		padding-bottom:10px;
	}
	#price_box ul li{
		margin-top:14px;
		width:calc(100% / 2);
	}
	#price_box picture{
		display:block;
		margin:20px 0 10px;
	}
	#price_box p{
		font-size:0.8em;
		line-height:1.3em;
	}

	/*********************
	 hikaku_box
	*********************/
	#hikaku_box h2{
		font-size:1.4em;
		margin-bottom:5px;
		padding-bottom:10px;
	}
	#hikaku_box .scrollable-table-container {
		margin:20px auto 0;
	}
	#hikaku_box section .green{
		margin:20px auto 0;
		padding:20px 10px;
	}
	#hikaku_box section .white{
		margin:15px 10px;
		padding:15px 10px;
		text-align:left;
	}

	/*********************
	 hoshon_Box
	*********************/
	#hoshon_Box h2{
		font-size:1.4em;
		margin-bottom:5px;
		padding-bottom:10px;
	}
	#hoshon_Box .insurance-box {
		max-width:100%;
	}
	#hoshon_Box .insurance-table {
		height:auto;
	}
	#hoshon_Box .coution{
		padding-top:15px;
	}

	/*********************
	 qa
	*********************/
	#qa{
		padding:0 15px;
		margin:0px auto;
	}
	#qa h2{
		font-size:1.4em;
		margin-bottom:5px;
		padding-bottom:10px;
	}
	#qa details summary{
		width:100%;
		padding:15px 45px 15px 15px;
		position: relative;
		background:#00843b;
		cursor:pointer;
		color:#fff;
		font-weight:400;
		margin-top:10px;
	}
	#qa details summary.active:after,
	#qa details summary:after{
		right:15px;
	}
	#qa details p{
		padding:15px;
	}

	/*********************
	 company
	*********************/
	#company h2{
		font-size:1.4em;
	}
	#company ul{
		margin:0px auto 40px;
		border-radius: 0;
		padding:25px 15px;
		font-size:0.8em;
		border:0;
		border-top:1px solid #333;
		border-bottom:1px solid #333;
	}

	/*********************
	 footer
	*********************/
	footer p{
		padding:10px 0;
	}

}