@charset "utf-8";
/*====================================*\
 * TOC / BREAKPOINTS
 *------------------------------------
 * Foundation
 * Layout
 * Object
 *  ├ Component
 *  ├ Project
 *  └ Utilities（原則編集禁止）
 *------------------------------------
 * ブレークポイント一覧（モバイルファースト）
 *   max-width: 30em  ･･･ スマホ
 * → min-width: 48em  ･･･ タブレット
 * → min-width: 64em  ･･･ PC・大型タブレット
 *   min-width: 80em  ･･･ PCワイドディスプレイ
\*====================================*/

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html{/*line-height:1.15;*/-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}/*h1{font-size:2em;margin:.67em 0}*/figcaption,figure,main{display:block}/*figure{margin:1em 40px}*/hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{/*font-family:sans-serif;*/font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}/*fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}*/progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}


/* Override */
:root { box-sizing: border-box; overflow-y: scroll;/* -ms-overflow-style: -ms-autohiding-scrollbar;*/}
*, ::before, ::after { box-sizing: inherit;}
::-moz-selection { background: #b3d4fc; text-shadow: none;}
::selection { background: #b3d4fc; text-shadow: none;}

body { width: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
h1, h2, h3, h4, h5, h6 { margin: 0;}
p, dl, ol, ul { margin-top: 0; margin-bottom: 1em;}
ol, ul { margin-left: 0; padding-left: 2em;}
ol { list-style: decimal outside none;}
ul { list-style: square outside none;}
li ol, li ul { margin-bottom: 0;}
nav ol, nav ul { list-style: none; margin-bottom: 0; padding-left: 0;}
address, em { font-style: normal;}
blockquote { margin: 0 0 1em; padding-left: 2.4rem; color: #4d4d4d; border-left: .2rem solid #ddd;}
blockquote small { color: #777;}
hr { display: block; height: 1px; margin: 2em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}
pre { word-wrap: break-word; white-space: -moz-pre-wrap; white-space: pre-wrap; overflow-wrap: break-word;}
del { text-decoration: line-through;}
q::after, q::before { content: none;}
rp, rt { line-height: 1; font-size: .6880em;}
var { opacity: .7; font-family: Consolas,Monaco,"Courier New",monospace; font-size: .92em; font-style: normal;}

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; font-size: 1em; text-align: left;}
caption, td, th { text-align: inherit;}
td, th { padding: 0;}

figure { margin: 0;}
img { height: auto; vertical-align: top;}
iframe { display: block; width: 100%;}
img, iframe { max-width: 100%;}

button, input, optgroup, select, textarea { font-family: inherit;}
button, input, select, textarea { max-width: 100%;}
textarea { height: auto; resize: vertical;}
fieldset { margin: 0; padding: 0; border: none;}
legend { padding: 0;}

@media print {
	* { background: transparent; color: #000; box-shadow: none; text-shadow: none;}
	a { text-decoration: underline;}
	thead { display: table-header-group;}
	tr,img { page-break-inside: avoid;}
	@page { margin: 0.5cm;}
	p,h2,h3 { orphans: 3; widows: 3;}
	h2,h3 { page-break-after: avoid;}
}


/*============================================================================*\
   $Foundation
\*============================================================================*/
html { font-size: 62.5%; }
body {
	background: #fff;
	background: url(../img/bg.jpg) repeat left top;
	background-attachment: fixed;
	color: #736357;
	font-family: "Roboto Condensed", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 1.6em;
	font-weight: bold;
	line-height: 1.41;
}

a {
	color: #0086bd;
	text-decoration: none;
	word-break: break-all;
	transition: color .2s;
	/*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
}
a:focus,
a:hover { text-decoration: underline; }




/*============================================================================*\
   $Layout
\*============================================================================*/

.container {
	position: relative;
	max-width: 1032px;
	margin: 0 auto;
	padding: 0 16px;
}
.sec {
	margin-top: 10%;
}
.sec__heading {
	margin-bottom: 5%;
	text-align: center;
}



/*============================================================================*\
   $Object -- Component
\*============================================================================*/

/* ボタン */
.btn {
	display: block;
	position: relative;
	margin: 0;
	padding: 4.5%;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	transition: all .15s ease;
	cursor: pointer;
}
.btn:after {
	display: block;
	position: absolute;
	right: 5%;
	top: 50%;
	width: 10px;
	height: 10px;
	margin-top: -5px;
	border-style: solid;
	border-width: 2px 2px 0 0;
	border-color: #fff;
	color: transparent;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}

.btn:focus,
.btn:hover { background-color: #8cc63f; }
.btn--more {
	width: 80%;
	min-width: 200px;
	max-width: 670px;
	margin: 0 auto;
	border-radius: 10px;
	background-color: #006837;
	color: #fff;
}
.btn--secondary {
	margin-bottom: 2%;
	background: #808080;
	color: #fff;
}
@media (min-width:48em) {
	.btn {
		font-size: 3rem;
	}
	.btn:after {
		right: 3%;
		width: 15px;
		height: 15px;
		margin-top: -7px;
		border-width: 3px 3px 0 0;
	}
	.btn--more {
		border-radius: 20px;
	}
}


/*============================================================================*\
   $Object -- Project
\*============================================================================*/

/* 価格 */
.price span {
	font-family: "Anton";
	font-size: 2em;
	font-weight: normal;
	letter-spacing: -.01em;
}


/*------------------------------------*\
    ヒーローヘッダ
\*------------------------------------*/
.hero {
	background: url(../img/hero_bg.png) repeat-x center bottom;
	background-size: cover;
	text-align: center;
}
.hero__title {
	position: relative;
	z-index: 1;
	padding-top: 4%;
	padding-bottom: 33%;
}
.hero__text {
	width: 90%;
	margin: -50% auto 0;
}

/*------------------------------------*\
    お悩み
\*------------------------------------*/
.problem-box {
	position: relative;
	max-width: 1000px;
	margin: 0 auto 5%;
	padding-top: 15px;
	padding-bottom: 10px;
	border-radius: 20px;
	background: #fff;
	text-align: center;
}
.problem-box:nth-of-type(odd) {
	padding-right: 2%;
	padding-left: 32%;
	background-image: -moz-linear-gradient(50deg, #a3d165 33%, #ffffff 33.1%);
	background-image: -webkit-linear-gradient(50deg, #a3d165 33%,#ffffff 33.1%);
	background-image: linear-gradient(50deg, #a3d165 33%,#ffffff 33.1%);
}
.problem-box:nth-of-type(even) {
	padding-right: 32%;
	padding-left: 2%;
	background-image: -moz-linear-gradient(-50deg, #a3d165 33%, #ffffff 33.1%);
	background-image: -webkit-linear-gradient(-50deg, #a3d165 33%,#ffffff 33.1%);
	background-image: linear-gradient(-50deg, #a3d165 33%,#ffffff 33.1%);
}
.problem-box__text {
	position: relative;
	width: 90%;
	height: 0;
	margin: 0 auto;
	padding-top: 37.6%;
}
.problem-box__text img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.problem-box__image {
	position: absolute;
	bottom: 0;
	width: 30.6%;
}
.problem-box:nth-of-type(odd) .problem-box__image { left: 2%; }
.problem-box:nth-of-type(even) .problem-box__image { right: 2%; }

@media (min-width:48em) {
	.problem-box {
		padding-top: 3%;
		padding-bottom: 2%;
	}
	.problem-box:nth-of-type(odd) { padding-right: 8%; padding-left: 41%; }
	.problem-box:nth-of-type(even) { padding-left: 8%; padding-right: 41%; }
	.problem-box__text {
		width: 100%;
		max-width: 500px;
	}
}


/*------------------------------------*\
    サービス内容
\*------------------------------------*/
.service {
	text-align: center;
}
.service__heading {
	margin-top: 10%;
	margin-bottom: 15px;
}
.service__box {
	padding: 30px 20px 20px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 5px 20px rgba(0,0,0,.15);
	border: 6px solid #a3d165;
	font-size: 1.4rem;
	text-align: center;
}
.service__ill1,
.service__ill2 { display: none; }

@media (min-width:48em) {
	.service__box {
		position: relative;
		max-width: 1000px;
		margin: 0 auto;
		padding: 5% 23% 3.5%;
		border-radius: 30px;
		border: 10px solid #a3d165;
		font-size: 1.6rem;
		line-height: 1;
	}
	.service__ill1 {
		display: block;
		position: absolute;
		left: -4px;
		bottom: 0;
		width: 26.32%;
	}
	.service__ill2 {
		display: block;
		position: absolute;
		right: 2.7%;
		bottom: 5%;
		width: 21.32%;
	}
}


/*------------------------------------*\
    利用方法
\*------------------------------------*/
.howto-flow {
	list-style: none;
	max-width: 96%;
	margin: 0 auto;
	padding: 0;
	counter-reset: flow;
}
.howto-flow__item {
	position: relative;
	counter-increment: flow;
}
.howto-flow__heading {
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
	color: #006837;
	font-size: 2.2rem;
	text-align: center;
}
.howto-flow__item strong {
	color: #ea2936;
	font-size: 1.2em;
}
@media (max-width:47.9375em) {
	.howto-flow__item {
		margin-bottom: 0;
		padding: 15px 20px;
		border-radius: 0;
	}
	.howto-flow__item:nth-of-type(n+2) {
		padding-top: 30px;
	}
	.howto-flow__item:nth-of-type(n+2):before {
		display: block;
		position: absolute;
		left: 50%;
		top: 0;
		z-index: 1;
		width: 0;
		height: 0;
		margin-left: -30px;
		border-style: solid;
		border-width: 20px 30px 0 30px;
		border-color: #fff transparent transparent;
		content: "";
	}
	.howto-flow__item:nth-of-type(even) { background: #eeecea;}
	.howto-flow__item:nth-of-type(even):before { border-top-color: #fff;}
	.howto-flow__item:nth-of-type(odd) { background: #fff;}
	.howto-flow__item:nth-of-type(odd):before { border-top-color: #eeecea;}
}
@media (min-width:48em) {
	.howto-flow__item {
		margin-bottom: 40px;
		padding: 30px 20px 20px;
		border-radius: 15px;
		background: #fff;
		font-size: 2rem;
		text-align: center;
	}
	.howto-flow__heading {
		position: relative;
		z-index: 1;
		margin-bottom: 15px;
		color: #006837;
		font-size: 3rem;
	}
	.howto-flow__heading:before {
		position: absolute;
		left: 50%;
		top: -60px;
		z-index: -1;
		width: 70px;
		height: 70px;
		border-radius: 35px;
		margin-left: -35px;
		background: #fff;
		line-height: 60px;
		font-family: "Anton";
		font-size: 3.4rem;
		font-weight: normal;
		content: counter(flow);
	}
}


/*------------------------------------*\
    スケジュール
\*------------------------------------*/
.sec--schedule {
	margin: 10vw 0;
	padding: 10vw 0 3vw;
	background: #8cc63f;
	color: #fff;
	font-size: 1.3rem;
}
@media (min-width:48em) {
	.sec--schedule {
		font-size: 1.6rem;
		text-align: center;
	}
}
@media (min-width:64em) {
	.sec--schedule {
		margin: 100px 0;
		padding: 100px 0 25px;
	}
}

/*------------------------------------*\
    タイヤ保管料金
\*------------------------------------*/
.price-table {
	overflow: hidden;
	margin-bottom: 15px;
	border-radius: 20px;
	box-shadow: 0 5px 20px rgba(0,0,0,.15);
}
.price-table table {
	width: 100%;
	max-width: 100%;
	margin: 0;
	background: #fff;
	font-size: 1.8rem;
	line-height: 1.1;
}
.price-table th,
.price-table td {
	padding: 15px 10px;
	text-align: center;
	vertical-align: middle;
}
.price-table tbody th,
.price-table tbody td {
	border-top: 1px solid #ccc;
}
.price-table small {
	display: inline-block;
	color: inherit;
	font-size: 1.3rem;
}
.price-table .tire-size { font-size: 1.6rem; }
.price-table .tire-size b { font-size: 3rem; }
.price-table .price { color: #ed1c24; font-size: 2.8rem; }
@media (max-width:47.9375em) {
	.price-table thead th {
		background: #006837;
		color: #fff;
	}
}
@media print, (min-width:48em) {
	.price-table table {
		font-size: 2.4rem;
		line-height: 1;
	}
	.price-table th,
	.price-table td {
		padding: 3% 1.5%;
	}
	.price-table tr th:first-of-type {
		background: #006837;
		color: #fff;
	}
	.price-table small { font-size: 1.5rem; }
	.price-table .tire-size { font-size: 2.4rem; }
	.price-table .tire-size b { font-size: 3.6rem; }
}


/*------------------------------------*\
    各店舗の連絡先
\*------------------------------------*/
.store-box {
	overflow: hidden;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 5px 20px rgba(0,0,0,.15);
	border: 6px solid #a3d165;
}
.store-list {
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: 1.41;
}
.store-list > li {
	display: inline-table;
	width: 100%;
	margin-bottom: 0;
	padding: 8px;
	border-bottom: 1px solid #ddd;
}
.store-list__name,
.store-list__tel {
	display: table-cell;
	vertical-align: middle;
}
.store-list__tel {
	text-align: right;
	white-space: nowrap;
}
.tel-prefix { font-size: 1.3rem; }
.tel-number { font-size: 1.8rem; }

@media print, (min-width:48em) {
	.store-box {
		border-radius: 30px;
		border: 10px solid #a3d165;
	}
	.store-list > li {
		width: 33.3%;
		padding: 15px;
	}
	.store-list > li:nth-child(3n+1),
	.store-list > li:nth-child(3n+2) { border-right: 1px solid #ddd; }
	.store-list > li:nth-child(3n+2),
	.store-list > li:nth-child(3n+3) { margin-left: -.25em; }
	.store-list__name,
	.store-list__tel {
		display: block;
		width: auto;
		padding-top: 0;
		text-align: center;
	}
	.store-list__name { color: #006837; font-size: 1.8rem; }
	.tel-prefix { font-size: 1.5rem; }
	.tel-number { font-size: 2.4rem; }
}
@media screen and (min-width:64em) {
	.tel-number { font-size: 2.8rem; }
}

/* スマホの場合 */
.mobile .store-list > li {
	padding: 4px 5px 4px 8px;
}
.mobile a.tel-number {
	display: inline-block;
	position: relative;
	padding: 10px 15px 10px 10px;
	border-radius: 6px;
	background: #006837;
	color: #fff;
	text-decoration: none;
}
.mobile a.tel-number:before {
	display: inline-block;
	position: relative;
	top: -2px;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	vertical-align: middle;
	content: url(../img/tel.svg);
}
.mobile .tel-prefix { display: none; }


/*------------------------------------*\
    メンテナンス
\*------------------------------------*/
.sec--maintenance {
	position: relative;
	z-index: 0;
	margin-top: 10vw;
	padding: 10vw 0;
	background: #fff;
	text-align: center;
}
@media (min-width:64em) {
	.sec--maintenance {
		margin-top: 100px 0;
		padding: 100px 0;
	}
}

.maintenance-list {
	list-style: none;
	position: relative;
	z-index: -1;
	margin: -5% auto 4%;
	padding: 0;
}
@media (max-width:30em) {
	.maintenance-list li {
		display: inline-block;
		width: 48%;
		margin-bottom: -10%;
	}
	.maintenance-list li:nth-child(3) {
		position: relative;
		margin-top: -10%;
		margin-bottom: 0;
	}
}
@media (min-width:30.0625em) {
	.maintenance-list {
		display: table;
		table-layout: fixed;
		width: 100%;
	}
	.maintenance-list > li {
		display: table-cell;
		padding: 0 1%;
	}
}

.maintenance-text {
	color: #006837;
	font-size: 1.8rem;
}
.btns {
	position: relative;
	margin-top: 7.5%;
}
.btns__image {
	width: 30%;
	max-width: 120px;
	margin: 0 auto;
}
@media (min-width:48em) {
	.maintenance-text {
		font-size: 2.4rem;
	}
	.btns__image {
		position: absolute;
		left: 0;
		bottom: 100%;
		width: 25.8%;
		max-width: 258px;
	}
}


/*------------------------------------*\
    ページトップへ戻る
\*------------------------------------*/
.pagetop {
	display: block;
	position: fixed;
	right: 2%;
	bottom: 20px;
	z-index: 100;
	width: 80px;
	height: 80px;
	padding: 24px 0 0 0;
	border-radius: 50%;
	background: #74655c;
	color: #fff;
	font-family: "Anton";
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
	text-decoration: none !important;
}
.pagetop:before {
	display: block;
	width: 12px;
	height: 12px;
	margin: 0 auto 2px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	vertical-align: middle;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	content: "";
}
.mobile .pagetop {
	right: 50%;
	bottom: -40px;
	margin-right: -40px;
	background: rgba(116,106,92,.95);
}

/*------------------------------------*\
    フッター
\*------------------------------------*/
.footer {
	padding: 20px;
	background: #006837;
	color: #fff;
	text-align: center;
}
.mobile .footer {
	padding-bottom: 50px;
}
.footer__nav {
	margin-bottom: 20px;
}
.footer__nav li {
	display: inline-block;
	padding-right: 1em;
}
.footer__nav a {
	display: inline-block;
	color: #fff;
	font-size: 1.3rem;
}
.footer__nav a:before {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-top: 2px solid #fbeb45;
	border-right: 2px solid #fbeb45;
	vertical-align: middle;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	content: "";
}
.copyright {
	font-size: 1.4rem;
}
@media (max-width:30em) {
	.footer__nav { text-align: left; }
	.footer__nav li { width: 48%; }
}
@media (min-width:48em) {
	.footer { padding: 30px; }
	.footer__nav a { font-size: 1.4rem; }
	.copyright { font-size: 1.6rem; }
}



/*============================================================================*\
   $Object -- Utilities（原則編集禁止）
\*============================================================================*/

/* Clearing */
.clr { clear: both;}
.clearfix:after { content: ""; display: block; clear: both; }

/*  Float */
.u-left { float: left;}
.u-right { float: right;}
.u-center { margin-right: auto; margin-left: auto; }

/* Text Indents */
.u-indent1,
li.u-indent1,
ul.u-indent1 > li { padding-left: 1em; text-indent: -1em; }
ul.u-indent1 { list-style: none; padding-left: 0; text-indent: 0; }

/* Text Align & Font style */
.u-text-left   { text-align: left; }
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }

/* Text Styles */
.u-size-l {
	font-size: 2em;
	letter-spacing: 0;
	line-height: 1.41;
}
.u-size-m { font-size: 1.25em; }
.u-size-s { font-size: 1.3rem; }
@media (min-width:48em) {
	.u-size-s { font-size: 1.4rem; }
}

/* Margins */
.mt5 { margin-top:    5px!important; }
.mb5 { margin-bottom: 5px!important; }
.mts { margin-top:    16px!important; }
.mbs { margin-bottom: 16px!important; }
.mtm { margin-top:    32px!important; }
.mbm { margin-bottom: 32px!important; }
.mtl { margin-top:    64px!important; }
.mbl { margin-bottom: 64px!important; }

/* Paddings */
.pt0 { padding-top:    0!important; }
.pb0 { padding-bottom: 0!important; }

/* Display Utility */
.u-hidden { display: none; }
[class*="u-visible-"] { display: none; }

@media (min-width:30em) {
	.u-hidden-sm  { display: none!important; }
	.u-visible-sm { display: block!important; }
	.u-visible-sm--inline { display: inline!important; }
	.u-visible-sm--ib { display: inline-block!important; }
}
@media (min-width:48em) {
	.u-hidden-md  { display: none!important; }
	.u-visible-md { display: block!important; }
	.u-visible-md--inline { display: inline!important; }
	.u-visible-md--ib { display: inline-block !important; }
}
@media print {
	.u-hidden-print  { display: none!important; }
	.u-visible-print { display: inline!important; }
	.u-visible-print--inline { display: inline!important; }
	.u-visible-print--ib { display: inline-block!important; }
}