@charset "utf-8";
/* CSS Document */

html{
	font-size:62.5%;/*16px×62.5%=10px*/
}

body{
	font-family: 'Noto Sans JP', sans-serif;
	color:#3A3A3A;
	font-size:1.6rem;
	font-feature-settings:"palt";
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	box-sizing:border-box;
	line-height: 1.8;
	letter-spacing: 0.08em;
}
a{
	color:#3A3A3A;
	text-decoration:none;
}
ul{
	list-style:none;
}
img{
	max-width:100%;
	height:auto;
}
.inner{
	max-width:335px;
	margin:0 auto;
}

/*----------------------------------
		header
------------------------------------*/
.header{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 50px;
	z-index: 2000;
	background-color:rgba(249,255,249,0.7);
}
.header_titlebar{
	display: flex;
	justify-content:space-between;
	line-height: 50px;
	height: 50px;
	
}
.header h1{
	font-size: 2.0rem;
	font-weight: bold;
	color: #3A3A3A;
}

/*---header-nav-----------*/

.btn-trigger{
	-wevkit-appearance:none;
	appearance:none;
	position: fixed;
	top:3px;
	right: 5px;
	z-index: 2000;
	width: 45px;
	height: 45px;
	border: none;
	background: none;
	outline: 0;
	padding: 7px 6px 6px;
}

.btn-trigger span{
	position: absolute;
	display: block;
	width: 33px;
	height: 1px;
	background-color: #3A3A3A;
	transition: all 0.5s;
}

.btn-trigger span:first-of-type{
	top:8.5px;
}

.btn-trigger span:nth-of-type(2){
	top:21.5px;
}

.btn-trigger span:last-of-type{
	bottom:8.5px;
}

.btn-trigger.active span:first-of-type{
	transform: rotate(45deg);
	top:22px;
}

.btn-trigger.active span:nth-of-type(2){
	opacity: 0;
}

.btn-trigger.active span:last-of-type{
	transform: rotate(-45deg);
	bottom: 22px;
}
.navigation{
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 50%;
	padding:40px 0 10px;
	background-color: rgba(255,255,255,0.8);
	z-index: 1999;
	line-height: 3.0;
}
.btn-trigger.active .navigation{
	display: block;
}

.navigation ul li{
	padding: 0 20px;
}

#header ul{
	font-size:1.4rem;
}
/*----main-vs-----------*/
.main{
	background:url("../img/main-vs_sp.png") no-repeat center;
	background-size: cover;
}
.main_text{
	font-size:2.0rem;
	color: #3A3A3A;
	font-weight: bold;
	text-align: center;
	padding: 90px 0 25px;
	filter: drop-shadow(0 10px 10px rgba(255, 255, 255, .8));
}
.main_subtext{
	font-weight: bold;
	text-align: center;
	color:#3A3A3A;
	padding-bottom:40px;
	filter: drop-shadow(0 10px 10px rgba(255, 255, 255, .8));
}
/*----------------------------------
		information
------------------------------------*/
.information{
	margin: 40px auto 0;
}
.telbanner{
	text-align: center;
}
/*----------------------------------
		section-title＆bg
------------------------------------*/
.section{
	padding: 60px 0 25px;
}
.section-title{
	font-size: 2.0rem;
	font-weight: bold;
	border-bottom: 1px solid #0C7958;
	border-left: 10px solid #0C7958;
	padding: 7px;
	max-width: 300px;
	width: calc( 100% - 34px) ;
	margin: 0 auto 50px;
	text-align: center;
}
.section-bg{
	background-color: #F2F2F2;
}

/*----------------------------------
		Link
------------------------------------*/
.link_cover{
	text-align:right;
	margin:80px 0 0;
}
.link{
	position:relative;
	margin-right: 18px;
}
.link::after{
	content: url("../img/link.png");
	position:absolute;
	bottom:-4px;
	right:-18px;
}

/*----------------------------------
		flow
------------------------------------*/
.flow_box{
	display: block;
	font-weight:400;
	text-align: center;
	max-width: 300px;
	width: calc( 100% - 10px) ;
	height:50px;
	background-color: #E0F2E0;
	margin: 0 auto 36px;
	line-height: 50px;
}
.flow_box:last-of-type{
	margin-bottom: 0;
}
.flow-text{
	display:block;
	text-align: center;
	padding-bottom: 27px;
}
.flow-arrow{
	width:70px;
	display: block;
	margin: 0 auto 30px;
}
.arrow1{
	margin-bottom: 0px;
}
.day{
	font-weight: bold;
	display: block;
	max-width: 300px;
	margin: 0 auto 16px;
}
/*----------------------------------
		price
------------------------------------*/
.price_inner{
	text-align: center;
}
.price-text{
	display:block;
}
.price-title{
	font-size:1.8rem;
	font-weight: 500;
	margin: 50px 0 15px;
}
.pr_table{
	margin: 0 auto;
}
.pr_contents{
	width:150px;
	height: 40px;
	font-weight: 500;
	line-height: 40px;
	background-color: #fff;
	border: solid 2px #F2F2F2;
}
.pr_co1{
	background-color: #E0F2E0;
}


/*-------買取例・事例--------*/
.price-title2{
	font-size:1.8rem;
	font-weight: 400;
	margin-bottom: 40px;
	position: relative;
	display: inline-block;
	padding: 0 30px;
}
.price-title2::after,.price-title2::before{
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 25px;
	height: 1px;
	background-color:#0C7958;
}
.price-title2::after{
	left:0;
}
.price-title2::before{
	right:0;
}
.flex-item{
	margin: 40px 0 0;
}
.buying{
	border: double #0C7958 ;
	padding: 10px;
}
.buying .price-title2{
	margin: 10px 0 20px;
}
.buying p ,.case_text{
	margin: 20px 0 10px;
}
.case .price-title2{
	margin:40px 0 0;
}
.case .flex-item{
	background-color:#E0F2E0;
	padding: 10px 10px 20px;
}
.case_title{
	border-bottom: solid 1px #0C7958;
	padding: 5px 0;
	margin-bottom: 20px;	
}
.case_text2{
	font-weight: 600;
}

figure {
	margin: 40px 0 20px ; 
	background-color: #0C7958;
}
figcaption {
	margin-top: -6px; /* 画像と注釈の隙間 */
	color: #fff;
}
.infection{
	margin-top: 60px;
}
/*----------------------------------
		footer
------------------------------------*/

.footer_inner{
	background: url("../img/footer-house.png") no-repeat center bottom 75px;
	background-size:128px auto;
	position: relative;
}
.footer_company{
	line-height: 1.3;
	padding: 50px 0 100px;
	font-size:1.4rem;
}
.company_name{
	font-size: 1.6rem;
}
.fo_comoany-dl{
	display:flex;
}
.fo_comoany-dl dt{
	margin-right: 10px;
	max-width: 30%;
}

.fo_comoany-dl dd{
	max-width: 60%;
}

.footer_cp{
	display:block;
	text-align: center;
	padding-bottom: 60px;
	font-size: 1.2rem;
}
.pagetop{
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 2000;
}
.footer_link{
	text-align: center;
	padding-top: 20px;
}
.footer_link span{
	position:relative;
	margin-right: 18px;
}
.footer_link  span::after{
	content: url("../img/link.png");
	position:absolute;
	bottom:-4px;
	right:-18px;
}

.footer_link  span:hover{
	opacity: 0.5;
	transition: 0.5s;
}

/*----------------------------------
		contact
------------------------------------*/
.contact_phone{
	margin-bottom: 30px;
}
.contact_text{
	margin-bottom: 50px;
}
.form_item{
	margin-bottom: 20px;
}
.form_contents{
	max-width: 290px;
	width: calc( 100% - 10px) ;
	height: 40px;
	margin: 0 auto 32px;
	border: solid 1px #3A3A3A;
}
#message{
	max-width: 290px;
	width: calc(100% - 10px);
	height: 150px;
	margin: 0 auto 40px;
	border: solid 1px #3A3A3A;
}
.form_submit{
	width:200px;
	padding:0;
	border:solid 10px #0C7958;
	border-radius:5px;
	background-color:#0C7958;
	color:#fff;
	font-weight:bold;
	cursor:pointer;
}

.contact-section{
	padding:100px 0 100px;
	background-color: #F2F2F2;
}

/*----------------------------------------------------
		ここからindex2.html
------------------------------------------------------*/
/*---h1変更のための記述---*/
.header_title a{
	font-size: 2.0rem;
	font-weight: bold;
	color: #3A3A3A;	
}
.main_inside span{
	display: block;
}
/*---//h1変更のための記述---*/
.subtitle{
	font-size: 1.8rem;
    font-weight: 400;
    margin: 0 auto 40px;
    position: relative;
    padding: 0 30px;
	display: inline-block;
}
.subtitle::before,.subtitle::after{
	content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 25px;
    height: 1px;
    background-color: #0C7958;
}
.subtitle::before{
	right: 0;
}
.subtitle::after{
	left: 0;
}
.example{
	max-width: 600px;
	padding: 30px 50px;
	font-weight: 700;
	background-color: #E0F2E0;
	margin: 20px auto 20px;
}
.example li{
	max-width: 200px;
	margin: 8px auto;
	text-align: center;
}

.main-2{
	background: url("../img/main-vs_sp-2.jpg") no-repeat center;
}
.mini-section{
	padding-bottom: 40px;	
}
.mini-section:last-of-type{
padding-bottom: 0;
}
.mini-section_title{
	text-align: center;
}

/*画面サイズが340pxまでは以下を読み込む（iphone5)*/
@media screen and (max-width:340px){
	.inner{
		max-width: calc( 100% - 10px);
	}
	.link{
		letter-spacing: -0.05em;
	}
	
	.price-title2{
		padding: 0 20px;
		letter-spacing: 0.001em;
	}
	.price-title2::after,.price-title2::before{
		width: 15px;
	}
	
}


/*画面サイズが768pxからは以下を読み込む(PC)*/
@media screen and (min-width: 768px){
	.inner{
		max-width: 960px;
		padding: 0 20px;
	}
	.sp-only{
		display: none;
	}
/*----------------------------------
		header
------------------------------------*/
	
	.header h1{
		font-size: 3.0rem;
	}
	.header h1 a:hover{
		opacity: 0.5;
		transition: 0.5s;
	}

	
/*----------------------------------
		header-nav
------------------------------------*/
	.btn-trigger{
		display: none;
	}
	.navigation{
		display: block !important;
		position: relative;
		width: auto;
		padding:0;
		background:none;
		line-height: 50px;
	}
	
	.navigation ul{
		display: flex;
	}

	.navigation ul li{
		margin-right: 20px;
		padding: 0;
	}
	
	.navigation ul li:last-of-type {
		margin-right: 0;
	}
	#header ul{
		display: flex;
		justify-content: space-between;
		width: 350px;
	}
	#header li{
		position:relative;
	}
	#header li::after {
	  content: '';
	  position: absolute;
	  bottom: 10px;
	  right: 0;
	  display: block;
	  width: 0;
	  height: 2px;
	  background-color: #0C7958;
	  transition: width 0.3s;
	}
	#header li:hover::after {
	  left: 0;
	  width: 100%;
	}

/*----main-img--------------*/
	.main{
		background:url("../img/main-vs.png") no-repeat center;
		background-size: cover;
	}
	.main-2{
		
		background: url("../img/main-vs-2.jpg")no-repeat center;
		background-size: cover;
	}
	.main_text{
		font-size:4.0rem;
		padding:110px 0 30px;
	}
	.main_subtext{
		font-size:2.0rem;
		padding-bottom: 60px;
		
	}
/*----------------------------------
		information
------------------------------------*/
	.section-text{
		max-width: 700px;
		margin: 0 auto;
	}
/*----------------------------------
		section-title＆bg
------------------------------------*/
	.section-title{
		font-size:2.4rem;
		width: 400px;
	}
	
	
/*----------------------------------
		Link
------------------------------------*/
	.link::after{
		right:-18px;
	}
	.link_cover{
		font-size:2.0rem;
		margin:80px 0 0;
	}
	.link_cover:hover{
		opacity: 0.5;
		transition: 0.5s;
	}
/*----------------------------------
		flow
------------------------------------*/
	.flow_box{
		font-size:2.0rem;
		width: 400px;
		height: 70px;
		margin: 0 auto 16px;
		line-height: 70px;
	}
	.flow-text{
		padding-bottom: 16px;
	}
	.agreement{
	}
	.day{
		font-size:2.0rem;
		width: 400px;
	}
	
/*----------------------------------
		price
------------------------------------*/
	.price-text{
	}
	.price_cover{
		display: flex;
		justify-content: space-between;
	}
	.price_cover2{
		width: 480px;
	}
	.price-title{
		font-size:2.0rem;
	}
	.pr_contents{
		width:220px;
		font-size:2.0rem;
	}
	/*-------買取例・事例--------*/
	.flex2{
		display: flex;
	}
	.flex2 img{
		width:calc(50% - 10px);
		object-fit: contain;
	}
	.flex-item{
		margin: 40px auto;
	}
	.buying{
		margin: 40px 10px;
	}
	.case .flex-item{
		width:calc(50% - 20px);
		margin-bottom: 0;
	}
	.case .flex-item:first-child{
		margin-right: 20px;
	}
	figure {
		margin: 0 0 20px ;
	}
	.infection{
		width: 50%;
	}
	
	
/*----------------------------------
		footer
------------------------------------*/
	.footer_inner{
		background: url("../img/footer-house.png") no-repeat right bottom 50px;
		background-size:275px auto;
	}
	.pagetop:hover{
		opacity: 0.5;
		transition: 0.5s;
	}

/*----------------------------------
		contact
------------------------------------*/
	a[href^="tel:"]{
		pointer-events: none;
	}
	.contact_phone{
		width: 324px;
	}
	.form_cover{
		display:flex;
		width: 650px;
		margin: 0 auto;
	}
	.form_item{
		font-size:2.0rem;
		width: 200px;
		margin: 0 50px 25px auto;
		height: 44px;
		line-height: 44px;
		text-align: right;
	}
	.form_contents{
		width: 398px;
		margin: 0 80px 25px auto;
		font-size:2.0rem;
	}
	#message{
		width: 394px;
		margin: 0 80px 25px auto;
		font-size:2.0rem;
	}
	.form_submit{
		font-size:2.0rem;
	}
	.form_submit:hover{
		border:solid 10px #367188;
		background-color:#367188;
		transition: 0.5s;
	}
	.form_submit:focus {
		outline:0;
	}
/*----------------------------------
		ここからindex2.html
------------------------------------*/
/*---h1変更のための記述---*/
	.header_title a{
		font-size: 3.0rem;
	}
	.header_title a:hover{
		opacity: 0.5;
		transition: 0.5s;
	}
/*---//h1変更のための記述---*/
	.example{
		display:flex;
		flex-wrap : wrap;
	}
	.example li{
		width: 200px;
		margin: 5px 0;
	}
	.section-title.long{
		max-width: 500px;
	}
}