@charset "utf-8";
/*
Theme Name: story_tcd041-child
Template: story_tcd041
*/
*{
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
html{ scroll-behavior: smooth;}
body{
	background: #fff;
	color: #192041;
	font-family: "Noto Sans JP",Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif !important;
	font-size: 16px;
	font-weight: 500;
	line-height:2;
}
/* header */
header{
	width: 100%;
	height: 100vh;
	position: relative;
}
header::before{
	content: '';
	display: block;
	width: 70%;
	height: 90%;
	background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/main-img01.jpg) top left no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
header::after{
	content: '';
	display: block;
	width: 70%;
	height: 100%;
	background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/main-img02.png) top right no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.main-text{
	width: 95%;
	max-width: 700px;
	max-height: 90%;
	text-align:center;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99;
	transform: translate(-50%,-50%);
}
.hed-btn{
	display: block;
	width: 95%;
	max-width: 472px;
	position: static;
	margin: 0 auto;
	left: auto;
	bottom: auto;
	transform: translateX(0);
}
@media (orientation: portrait){
	header{
		width: 100%;
		height: 75vh;
		position: relative;
	}
	header::after{
		width: 85%;
	}
}
/* 固定ページ */
main section{
	width: 100%;
	max-width: 100%;
	padding: 5rem 0;
	position: relative;
}
.inner{
	width: 94%;
	max-width: 800px;
	padding: 0;
	margin: 0 auto;
}
p{
	color: #192041;
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}
a{
	color: #192041;
	transition: all .6s;
	text-decoration: none;
}
a:hover{
	color: #AF9150;
}
a img{
	transition: all .6s;
}
a:hover img{
	opacity: .6;
}
img{
	max-width: 100%;
}
th{
	padding: .75em 2em;
	color: #fff;
	background: #1D2D61;
	border-bottom: 1px solid #B2B2C8;
}
td{
	padding: .75em 2em;
	color: #1D2D61;
	background: #fff;
	border-bottom: 1px solid #B2B2C8;
}
h2{
	color: #AF9150;
	text-align: center;
	font-size: 2.2rem;
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: .1em;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	position: relative;
}
h2 span{
	display: block;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .25em;
}
h2 span::before{
	content: '/';
	padding-right: 1em;
}
h2 span::after{
	content: '/';
	padding-left: 1em;
}
h2::after{
	content: '';
	width: 60px;
	height: 1px;
	background: #AF9150;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX( -50%);
}
h3{
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.5;
	color: #1D2D61;
	margin-bottom: 1em;
}
h4{
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
	color: #1D2D61;
	padding-left: 0;
	border-left: none;
	margin-bottom: 1em;
}
h5{
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.5;
}
h6{
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
}
p.fast_text{
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 1em;
}
br.pc-br{ display:block;}
br.sp-br{ display:none;}
@media only screen and (max-width: 1199px){
	h2{
		font-size: 2.1rem;
	}
}
@media only screen and (max-width: 991px){
	main section{
		padding: 4rem 0;
	}
	h2{
		font-size: 1.9rem;
	}
	h3{
		font-size: 1.4rem;
	}
	h4,
	p.fast_text{
		font-size: 1.3rem;
	}
	h5{
		font-size: 1.2rem;
	}
	h6{
		font-size: 1.1rem;
	}
}
@media only screen and (max-width: 767px){
	main section{
		padding: 3rem 0;
	}
	h2{
		font-size: 1.7rem;
	}
}
@media only screen and (max-width: 480px){
	main section{
		padding: 2rem 0;
	}
	h2{
		font-size: 1.5rem;
		letter-spacing: 0;
	}
	h3{
		font-size: 1.3rem;
	}
	h4,
	p.fast_text{
		font-size: 1.2rem;
	}
	h5{
		font-size: 1.1rem;
	}
	h6{
		font-size: 1rem;
	}
	th,td{
		display: block;
		width: 100%;
	}
	br.pc-br{ display:none;}
	br.sp-br{ display:block;}
}

/* edge */
	#edge{
		counter-reset: number 0;
	}
	#edge h3{
		text-align: center;
	}
	.edge_box{
		display:flex;
		justify-content: space-between;
		margin-bottom: 3rem;
	}
	.edge_item{
		width: 48%;
	}
	.edge_well{
		background: #F0EFF4;
	}
	.edge_well h3{
		background: #1D2D61;
		color: #fff;
	}
	.edge_well ol{
		padding: 0 2em 1em;
	}
	.edge_well ol li{
		font-size: 1.4rem;
		font-weight: 700;
		line-height: 1.5;
		border-bottom: 1px solid #AF9150;
		counter-increment: number 1;
		padding: 0 .5em .5em 3.5em;
		margin-bottom: 1em;
		position: relative;
	}
	.edge_well ol li::before{
		content: '0' counter(number);
		color: #AF9150; 
		font-size: 2em;
		font-weight: 300;
		line-height: 1;
		font-family: "Bellota Text", sans-serif;
		position: absolute;
		left: .5rem;
		top: 0;
	}
@media only screen and (max-width: 991px){
	.edge_well ol li {
		font-size: 1.3rem;
	}
}
@media only screen and (max-width: 767px){
	.edge_well ol li {
		font-size: 1.2rem;
	}
	.edge_well ol {
		padding: 0 1.5em 1em;
	}
}
@media only screen and (max-width: 480px){
	.edge_well ol li {
		font-size: 1.1rem;
	}
	.edge_well ol {
		padding: 0 1em 1em;
	}
}

/* maintenance */
.mainte_item{
	display:flex;
	align-items: center;
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px #666;
	margin-bottom: 3rem;
}
.mainte_item:last-child{
	margin-bottom: 0;
}
.mainte_item-img{
	width: 30%;
	height:100%;
	aspect-ratio: .75 / 1 ;
}
.mainte_item-img > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
}
.mainte_item-text{
	width: 70%;
	padding: 0 2em;
}
.mainte_item-text p{
	text-align: justify;
}
@media only screen and (max-width: 767px){
	.mainte_item{
		display: block;
		margin-bottom: 2rem;
	}
	.mainte_item-img{
		width: 100%;
		aspect-ratio: 1 / 1 ;
	}
	.mainte_item-text{
		width: 100%;
		padding: 1em 1.5em;
	}
}

/* provide */
section#provide{
	background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/provide-bg.jpg)top center no-repeat;
	background-size: cover;
	counter-reset: number 0; 
}
.provide_box{
	margin-bottom: 3rem;
	counter-increment: number 1;
}
.provide_box:last-child{
	margin-bottom: 0;
}
.provide_box h3{
	color: #AF9150;
	padding: 1.5em 0 0 1em;
	margin-bottom: .5em;
	position: relative;
	z-index: 2;
}
.provide_box h3:before{
	content: 'Point.0'counter(number);
	color: #DCD0BA;
	font-size: 2em;
	font-weight: 900;
	line-height: 1;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.provide_item{
	background: #fff;
	box-shadow: 0 0 15px #666;
}
.provide_item p{
	text-align: justify;
	padding: 1em 2em;
}

@media only screen and (max-width: 767px){
	.provide_item p{
		padding: 1em 1.5em;
	}
}

	
/* Service */
section#service{
	background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/service-bg.jpg)top center no-repeat;
	background-size: cover;
}
section#service h2{
	color: #fff;
}
section#service h2::after{
	background: #fff;
}
.service_box{
	margin-bottom: 4rem;
}
.service_box:last-child{
	margin-bottom: 0;
}
.service_item{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.service_item-img{
	order: 0;
	width: 40%;
	margin-bottom: 2rem;
}
.service_item-text{
	order: 1;
	width: 55%;
	margin-bottom: 2rem;
}
.service_box:nth-of-type(even) .service_item-img{
	order: 1;
}
.service_box:nth-of-type(even) .service_item-text{
	order: 0;
}
.service_item-text h3{
	display: table;
	color: #fff;
	padding-bottom: .5em;
	margin-bottom:  1em;
	border-bottom: 1px solid #fff;
}
.service_box:nth-of-type(even) .service_item-text h3{
	margin-left: auto;
	margin-right: 0;
}
.service_item-text p{
	color: #fff;
	text-align: justify;
}
.service_well{
	background: #fff;
	padding: 1em 2em;
	border-radius: 5px;
}
.service_well-title{
	min-height: 90px;
	padding-left: 100px;
	margin-bottom: .5rem;
	position: relative;
}
.service_well-title::before{
	content: '';
	display: block;
	width: 90px;
	height: 90px;
	background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/service-icon.png)center no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}
.service_well-title p{
	color: #000;
	font-weight: 700;
}
.service_well-title h4{
	color: #192041;
}
.service_well-text{
	text-align: justify;
}
h4.ba-title span{
	display: inline-block;
	color: #fff;
	background: #696C93;
	padding: 0 2em;
	margin-right: 1em;
}
.ba-item{
	display: flex;
	justify-content: space-between;
	position: relative;
}
.ba-item1{
	width: calc( 50% - 25px );
	position: relative;
}
.ba-item2{
	width: calc( 50% - 25px );
	position: relative;
}
.ba-item1::before,
.ba-item2::before{
	content: 'Before';
	display: inline-block;
	background: rgba(239,65,54,.8);
	color: #fff;
	font-size: 1.2em;
	padding: 0 2em;
	position: absolute;
	top: 0;
	left: 0;
}
.ba-item2::before{
	content: 'After';
}
.ba-item::after{
	content: '';
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #EF4136;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -50%);
}
@media only screen and (max-width: 767px){
	.service_item{
		display: block;
	}
	.service_item-img{
		width: 80%;
		margin: 0 auto 1em;
	}
	.service_item-text{
		width: 100%;
	}
	.service_box .service_item-text h3{
		margin-right: auto !important;
	}
	.service_well{
		padding: 1em 1.5em;
	}
	.service_well-title{
		padding-left: 50px;
	}
	.service_well-title::before{
		width: 45px;
		height: 45px;
	}
	h4.ba-title span{
		padding: 0 1em;
		margin-right: .5em;
	}
	.ba-item{
		display: block;
	}
	.ba-item::after{
		width: 0;
		height: 0;
		border-style: solid;
		border-right: 20px solid transparent;
		border-left: 20px solid transparent;
		border-top: 20px solid #EF4136;
		border-bottom: 0;
	}
	.ba-item1{
		width: 100%;
		margin-bottom: 40px;
	}
	.ba-item2{
		width: 100%;
	}
	.ba-item1::before, .ba-item2::before {
		font-size: 1.1em;
		padding: 0 1em;
	}
}

/* Results */
	section#results{
		background: #EFE9DD;
	}
	section#results h3{
		text-align: center;
	}
	.plan_box{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: space-between;
		counter-reset: number 0;
	}
	.plan_item{
		width: 20%;
		text-align: center;
		counter-increment: number 1;
	}
	.plan_arrow{
		width: 14%;
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/arrow.svg) center no-repeat;
	}
	div.plan_arrow:nth-child(6){
		width: 100%;
		height: 200px;
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/arrow2.svg) center no-repeat;
		background-size: 40%;
	}
	.plan_item h4{
		font-size: 1.3rem;
		position: relative;
	}
	.plan_item h4::before{
		content: '0'counter(number)'.';
		position: relative;
	}
	.plan_icon{
		padding:15%;
		background: #AF9250;
		border-radius: 50%;
		aspect-ratio: 1 / 1 ;
		margin-bottom: 1em;
	}
	.plan_item p{
		width: 100%;
		background: #1D2D61;
		color: #fff;
	}
	p.total{
		display: block;
		width: 100%;
		max-width: 460px;
		text-align: center;
		font-size: 1.4rem;
		font-weight: 900;
		border: 3px solid  #1D2D61;
		margin: 2em auto 0;
	}
@media only screen and (max-width: 767px){
	.plan_item{
		width: 40%;
		text-align: center;
		counter-increment: number 1;
	}
	.plan_item h4{
		font-size: 1.1em;
	}
	.plan_arrow,
	div.plan_arrow:nth-child(6){
		width: 14%;
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/arrow.svg) center no-repeat;
	}
	div.plan_arrow:nth-child(4),
	div.plan_arrow:nth-child(8){
		width: 100%;
		height: 140px;
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/arrow2.svg) center no-repeat;
		background-size: 40%;
	}
}

/* FAQ */
	section#faq{
		
	}
	.faq_item{
		padding: 0 1em 30px;
		margin-bottom: 30px;
		border-bottom: 1px solid #ccc;
	}
	.faq_item:last-child{
		padding-bottom: 0;
		margin-bottom: 0;
		border-bottom: none;
	}
	.faq_item h3{
		color: #1D2D61;
		padding-left: 50px;
		position: relative;
	}
	.faq_item h3::before{
		content: 'Q';
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background:#ED4135;
		color: #fff;
		font-family: "Bellota Text", sans-serif;
		font-size: 30px;
		font-weight: 300;
		line-height: 40px;
		text-align: center;
		position: absolute;
		left: 0;
	}
	.faq_item p{
		color: #1D2D61;
		padding-left: 50px;
		margin-bottom: 0;
		position: relative;
	}
	.faq_item p::before{
		content: 'A';
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 20px;
		background: #1D2D61;
		color: #fff;
		font-family: "Bellota Text", sans-serif;
		font-size: 30px;
		font-weight: 300;
		line-height: 40px;
		text-align: center;
		position: absolute;
		left: 0;
	}

/* construction */
	section#construction{
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/construction-bg.jpg)top center no-repeat;
		background-size: cover;
	}
	section#construction h2{
		color: #1D2D61;
	}
	section#construction h2::after{
		background: #1D2D61;
	}
	.construction-box{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin:-15px;
	}
	.construction-item{
		width: 50%;
		padding: 15px;
		text-align: center;
	}
	.construction-item figcaption{
		margin-top: 15px;
		font-weight: 500;
	}
@media only screen and (max-width: 767px){
	.construction-item{
		width: 100%;
	}
}

/* commitment */
	section#commitment{
	}
	section#commitment::before{
		content: '';
		width: 100%;
		height: 50%;
		background: url(https://ooba.co.jp/granpos-lp/wp-content/themes/story_tcd041-child/img/commitment-bg.jpg)top center no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	section#commitment .inner{
		background: #fff;
		padding: 2em 3em;
		box-shadow: 0 0 15px #666;
	}
	section#commitment h2{
		color: #1D2D61;
		padding-bottom:0;
		margin-bottom: 1em;
	}
	section#commitment h2::after{
		content: none;
	}

/* CONTACT */
section#contact{
	background: #fff;
}
section#contact .inner{
	padding-top: 0;
}
	section#contact h3{
		color: #AF9150;
	}
	section#contact h4{
		padding-left: 1em;
		border-left: 5px solid #AF9150;
	}
.wpcf7 {
	border: none;
	background: none;
	margin: 2.5em 0 !important;
}
.wpcf7 form{
	margin: 0;
}
.wpcf7 p{
	font-size: 14px;
}
.wpcf7 input, .wpcf7 textarea{
	line-height: 2;
	background: #F2F2F2;
}
.wpcf7 input.wpcf7-submit{
	width: 85.33%;
	height: 50px;
	line-height: 50px;
	background: #1D2D61;
	padding: 0 1em;
}
.recaptcha-copy {
	display: block;
	font-size: 8px;
	color: #aaa;
	text-align: center
}
.recaptcha-copy a{
	color: #aaa;
}
.grecaptcha-badge { visibility: hidden; }

.tel-btn{
	display: block;
	width: 85.33%;
	margin: 0 auto 1em;
}
.rice_text{
	display: table;
	padding-left: 1.5em;
	margin: 0 auto;
	position: relative;
}
.rice_text::before{
	content: '※';
	display: block;
	color: #EF4136;
	position: absolute;
	top: 0;
	left: 0;
}
@media only screen and (max-width: 480px){
	.wpcf7 input.wpcf7-submit,
	.tel-btn{
		width: 100%;
	}
}

/* COMPANY */
section#company{
	background: #B2B2C8;
}
section#company h2{
	color: #1D2D61;
}
section#company h2::after{
	background: #1D2D61;
}
.history-box{
	display: flex;
	align-items: center;
}
.history-tit{
	width: 30%;
	padding: 0 5%;
}
.history-tit h3{
	background: #1D2D61;
	color: #fff;
	text-align: center;
}
.history-text{
	width: 70%;
	padding: 0 5%;
}
.history-text dl{
	display: flex;
	flex-wrap: wrap;
	margin-top: 2.5vw;
}
.history-text dt{
	width:100px;
	font-weight: 700;
	padding-bottom: 1em;
	color: #1D2D61;
}
.history-text dd{
	width: calc( 100% - 100px);
	padding: 0 0 1em 30px;
	position: relative;
}
.history-text dd::before{
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #1D2D61;
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 1;
}
.history-text dd::after{
	content: '';
	display: block;
	width: 2px;
	height: 100%;
	background:#fff;
	position: absolute;
	top: 10px;
	left: 4px;
	z-index: 0;
}
.history-text dd:last-child::after{
	content: none;
}
@media only screen and (max-width: 480px){
	.history-box{
		display: block;
	}
	.history-tit{
		width: 100%;
		margin-top: 5vw;
		padding: 0 0;
	}
	.history-text{
		width: 100%;
	}
}

/* footer */
footer.footer{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	margin-top: 0;
	background: #1D2D61;
	color: #fff;
}
.footer-gallery{
	display: none;
}
.footer-content.inner{
	margin: 0 auto;
	padding: 2.5vw 0;
}
.footer-bar01-inner{
	width: 100%;
}
.footer-logo{
	color: #fff;
}
.footer a{
	color: #fff;
}
.footer a:hover{
	color:#B2B2C8;
}
.footer p{
	color: #fff;
}