@charset "UTF-8";



/* ============================================================

	共通(element)

============================================================ */

html {

	-webkit-text-size-adjust: 100%;

	font-size: 3.125vmin;

}

body {

	background: #fff;

	box-sizing: border-box;

	font-weight: 400;

	font : 18px / 1 'Noto Sans JP', 'Helvetica Neue', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', YuGothic, 'メイリオ', meiryo, sans-serif;

	color: #333;

}

*, *:before, *:after {

	-webkit-box-sizing: border-box;

	box-sizing: border-box

}

li {

	list-style: none;

}

img {

	vertical-align: bottom;

}

address {

	font-style: normal;

}

a {

	color: #333;

	text-decoration: none;

	outline: none;

	transition: .5s;

}

a:hover {

	opacity: .8;

}

::selection {

	background: #ba8c41;

}

.clearfix:after {

	content: "."; 

	display: block;

	clear: both;

	height: 0;

	visibility: hidden;

}

.clearfix {

	min-height: 1px;

}

* html .clearfix {

	height: 1px;

}





/* ============================================================

	共通(id,class)

============================================================ */

#wrap {

	overflow: hidden;

	min-width: 1280px;

}

#contents {

	margin-top: 100px;

}

.serif {

	font-family: 'BIZ UDPMincho', 'Noto Serif JP', "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

}

.js-fade,

.js-fade-ready {

	/* opacity: .05; */

	transition: 1s;

}

.js-fade {

	transform: translateY(20px);

}

.body-scroll {

	overflow: hidden;

}





/* ============================================================

	ヘッダー

============================================================ */

#header {

	position: fixed;

	top: 0;

	width: 100%;

	min-width: 1280px;

	height: 100px;

	background: #fff;

	padding: 33px 40px;

	z-index: 500;

}

#header .logo {

	letter-spacing: .1em;

}

#header .logo-img {

	width: 300px;

	height: 30px;

}

#header .button {

	position: absolute;

	top: 50%;

	right: 0;

	transform: translateY(-50%);

}

#header .nav {

	position: absolute;

	top: 40px;

	right: 30px;

}

#header .nav-ul {

	text-align: center;

}

#header .nav-li {

	display: inline-block;

	margin: 0 10px;

	font-size: 14px;

	letter-spacing: .1em;

}

#header .nav-li-button {

	padding: 7px 14px;

	background: #1abc9c;

	color: #fff;

}







/* ============================================================

	ビジュアル

============================================================ */

#visual {

	position: relative;

}

#visual .copy {

	position: absolute;

	z-index: 5;

	top: 60px;

	left: 60px;

}

#visual .copy-main {

	writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

	white-space: nowrap;

}

#visual .copy-main-span {

	display: inline-block;

	position: relative;

	z-index: 5;

	padding: 6px 14px;

	margin: 0 5px;

	font-size: 32px;

	letter-spacing: .4em;

	text-indent: .4em;

	white-space: nowrap;

}

#visual .copy-main-span::after {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #fff;

	z-index: 

	-1;

}

#visual .badge {

	position: absolute;

	z-index: 5;

	bottom: -110px;

	right: 190px;

}

#visual .badge::before {

	content: '';

	display: block;

	position: absolute;

	bottom: 0;

	width: 220px;

	height: 220px;

	background: url(../images/badge-text.svg) no-repeat center / contain;

	animation: 28s linear infinite rotate;

}

@keyframes rotate {

	0% {transform:rotate(0);}

	100% {transform:rotate(360deg);}

}

#visual .badge-img {

	width: 220px;

	height: 220px;

}

#visual .gallery {

	position: relative;

	width: 93.75%;

	height: 700px;

	background: #fff;

	border-bottom-right-radius: 60px;

	overflow: hidden;

	z-index: 2;

}

#visual .gallery-photo {

	position: absolute;

	z-index: 2;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: no-repeat center / cover;

	opacity: 0;

	-webkit-transform-origin: center;

	-ms-transform-origin: center;

	transform-origin: center;

	animation: zoomUp 12s infinite;

	-webkit-animation: zoomUp 12s infinite;

}

#visual .gallery-photo:nth-of-type(2) {

	-webkit-animation-delay: 4s;

	animation-delay: 4s;

}

#visual .gallery-photo:nth-of-type(3) {

	-webkit-animation-delay: 8s;

	animation-delay: 8s;

}

@keyframes zoomUp {

	0% {

		opacity: 0;

		-webkit-transform: scale(1);

		transform: scale(1);

	}

	25% {

		opacity: 1;

	}

	40% {

		opacity: 1;

	}

	55% {

		opacity: 0;

	}

	100% {

		opacity: 0;

		-webkit-transform: scale(1.15);

		transform: scale(1.15);

	}

}





/* ============================================================

	メッセージ

============================================================ */

#message {

	position: relative;

	padding: 100px 0 140px;

}

#message::before {

	content: '';

	display: block;

	position: absolute;

	top: -240px;

	left: 0;

	width: 100%;

	height: 840px;

	background: #9cc1ba;

	z-index: -1;

	clip-path: polygon(0 24%, 100% 0%, 100% 76%, 0% 100%);

}

#message .headline {

	width: 1120px;

	margin: 0 auto;

	color: #fff;

}

#message .headline-sub {

}

#message .headline-sub-img {

	width: 216px;

	height: 56px;

}

#message .headline-main {

	margin-top: 20px;

	font-weight: 700;

	font-size: 56px;

	letter-spacing: .2em;

	line-height: 1.75;

}

#message .group-top,

#message .group-btm {

	width: 1120px;

	margin: 80px auto 0;

}

#message .photo {

	float: left;

	width: 650px;

	text-align: center;

}

#message .photo-img {

	width: 650px;

	height: 430px;

}

#message .message {

	float: left;

}

#message .message-text {

	margin-top: 40px;

	letter-spacing: .1em;

	line-height: 2.3;

}

#message .group-top .message {

	margin-top: 130px;

	margin-left: 90px;

}

#message .group-btm .message {

	margin-top: 30px;

	margin-left: 40px;

}

#message .gallery {

	float: right;

	position: relative;

	width: 520px;

	height: 480px;

	margin: -20px auto 0;

}

#message .gallery-photo-n1,

#message .gallery-photo-n2,

#message .gallery-photo-n3 {

	position: absolute;

}

#message .gallery-photo-n1 {

	top: 70px;

	left: 0;

}

#message .gallery-photo-n2 {

	top: 0;

	right: 0;

}

#message .gallery-photo-n3 {

	right: 60px;

	bottom: 0;

}

#message .gallery-photo-img-n1 {

	width: 220px;

	height: 330px;

}

#message .gallery-photo-img-n2 {

	width: 330px;

	height: 220px;

}

#message .gallery-photo-img-n3 {

	width: 200px;

	height: 200px;

}





/* ============================================================

	サービス

============================================================ */

#service {

	position: relative;

	padding: 140px 0;

	background: #f0f5f0;

}

#service .headline {

	text-align: center;

}

#service .headline-sub {

	font-size: 56px;

	color: #1abc9c;

	letter-spacing: .4em;

	text-indent: .4em;

}

#service .headline-main {

	margin-top: 50px;

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

}

#service .menu {

	margin-top: 80px;

}

#service .menu-ul {

	width: 720px;

	margin: 0 auto;

}

#service .menu-li {

	position: relative;

	float: left;

	width: 200px;

	height: 200px;

	background: #fff;

	box-shadow: 0 0 8px rgba(0, 0, 0, .1);

	text-align: center;

}

#service .menu-li:not(:nth-of-type(3n)) {

	margin-right: 60px;

}

#service .menu-li:nth-of-type(n+4) {

	margin-top: 35px;

}

#service .menu-li::after {

	content: '';

	display: block;

	position: absolute;

	bottom: 0;

	right: 0;

	width: 0;

	height: 0;

	border-top: solid 24px transparent;

	border-left: solid 24px transparent;

	border-right: solid 24px #1abc9c;

}

#service .menu-icon {

	margin-top: 40px;

}

#service .menu-icon-img {

	width: 110px;

	height: 73px;

}

#service .menu-name {

	margin-top: 25px;

	letter-spacing: .1em;

	text-indent: .1em;

}

#service .menu-name-a::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}





/* ============================================================

	商品説明

============================================================ */

#product {

	position: relative;

}

#product .group {

	padding-top: 120px;

	margin-top: -120px;

	padding-bottom: 120px;

}

#product .catch {

	position: relative;

	width: 100%;

	height: 460px;

	background: no-repeat left / 93.75%;

}

#product .catch::after {

	content: 'Car Lease';

	display: block;

	position: absolute;

	top: 0;

	right: 0;

	width: 100%;

	height: 460px;

	background: #93be8e;

	padding: 0 40px;

	z-index: -1;

	writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

	font-weight: 700;

	color: #fff;

	letter-spacing: .2em;

	text-align: center;

	white-space: nowrap;

}

#product .guide {

	width: 1120px;

	margin: 100px auto 0;

}

#product .guide-headline {

	float: left;

	width: 420px;

}

#product .guide-headline-main {

	position: relative;

	font-weight: 700;

	font-size: 46px;

	letter-spacing: .2em;

	line-height: 1.6;

}

#product .guide-headline-main::before {

	content: '';

	display: block;

	position: absolute;

	bottom: -44px;

	width: 97px;

	height: 8px;

	background: url(../images/deco-wavyline-green.svg) no-repeat center / contain;

}

#product .guide-message {

	float: left;

	width: 700px;

}

#product .guide-message-text {

	letter-spacing: .1em;

	line-height: 2.3;

}

#product .guide-message-text-a {

	color: #1abc9c;

	background: linear-gradient(transparent 96%, #1abc9c 0%);

}

#product .guide-message-ex {

	margin-top: 60px;

}

#product .guide-message-ex-headline {

	position: relative;

	font-size: 22px;

	letter-spacing: .1em;

}

#product .guide-message-ex-headline::before {

	content: '●';

	color: #93be8e;

}

#product .guide-message-ex-ul {

	margin-top: 20px;

}

#product .guide-message-ex-li {

	position: relative;

	float: left;

	width: 30%;

	white-space: nowrap;

	letter-spacing: .1em;

	line-height: 2.3;

}

#product .guide-message-ex-li:not(:nth-of-type(3n)) {

	margin-right: 30px;

}

#product .guide-message-ex-li::before {

	content: '・';

}

#product .merit {

	width: 1120px;

	margin: 80px auto 0;

	border: solid 2px #93be8e;

}

#product .merit-headline {

	position: relative;

	float: left;

	width: 170px;

}

#product .merit-headline-sub {

	position: absolute;

	top: 0;

	left: 0;

	padding: 20px 8px;

	width: 50px;

	height: 390px;

	background: #93be8e;

	font-weight: 700;

	color: #fff;

	text-align: center;

	letter-spacing: .1em;

	line-height: 1.6;

	writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

	white-space: nowrap;

	text-orientation: upright;

}

#product .merit-headline-sub-span {

	margin-top: 4px;

	font-weight: 700;

	font-size: 24px;

	letter-spacing: .1em;

}

#product .merit-headline-main {

	position: absolute;

	top: 0;

	left: 50px;

	width: 120px;

	height: 390px;

	font-weight: 700;

	font-size: 36px;

	text-align: center;

	letter-spacing: .1em;

	line-height: 2.1;

	writing-mode: vertical-rl;

	-ms-writing-mode: tb-rl;

	-webkit-writing-mode: vertical-rl;

	white-space: nowrap;

}

#product .merit-headline-main-span {

	font-size: 64px;

	color: #1abc9c;

}

#product .merit-point {

	float: right;

	width: 950px;

	padding: 50px 0 40px;

	background: #f0f5f0;

}

#product .merit-point-ul {

	width: 820px;

	margin: 0 auto;

}

#product .merit-point-li {

	float: left;

	width: 240px;

	counter-increment: number 1;

}

#product .merit-point-li:not(:first-of-type) {

	margin-left: 50px;

}

#product .merit-point-photo {

	text-align: center;

}

#product .merit-point-photo-img {

	width: 240px;

	height: 140px;

}

#product .merit-point-text {

	position: relative;

	padding-top: 50px;

	margin-top: 30px;

	font-weight: 700;

	font-size: 24px;

	text-align: center;

	letter-spacing: .1em;

	line-height: 1.6;

}

#product .merit-point-text::before {

	content: 'merit.' counter(number);

	display: inline-block;

	position: absolute;

	top: 0;

	right: 0;

	left: 0;

	margin: 0 auto;

	background: #93be8e;

	width: 120px;

	padding: 2px 0;

	border-radius: 20px;

	font-size: 16px;

	color: #fff;

	text-align: center;

	letter-spacing: .1em;

	text-indent: .1em;

}



/*------------------------------

	車検・整備

------------------------------ */

#vehicle-inspection .catch::after {

	content: 'Vehicle Inspection';

	background: #82a3bf;

}

#vehicle-inspection .guide-headline-main::before {

	background: url(../images/deco-wavyline-blue.svg) no-repeat center / contain;

}

#vehicle-inspection .guide-message-ex-headline::before {

	color: #82a3bf;

}

#vehicle-inspection .merit {

	border: solid 2px #82a3bf;

}

#vehicle-inspection .merit-headline-sub {

	background: #82a3bf;

}

#vehicle-inspection .merit-headline-main-span {

	color: #6699ff;

}

#vehicle-inspection .merit-i::before,

#vehicle-inspection .merit-i::after {

	background: #82a3bf;

}

#vehicle-inspection .merit-point-text::before {

	background: #82a3bf;

}



/*------------------------------

	自動車販売

------------------------------ */

#sale-purchase .catch::after {

	content: 'New & Used Car';

	background: #ce9393;

}

#sale-purchase .guide-headline-main::before {

	background: url(../images/deco-wavyline-pink.svg) no-repeat center / contain;

}

#sale-purchase .guide-message-ex-headline::before {

	color: #ce9393;

}

#sale-purchase .merit {

	border: solid 2px #ce9393;

}

#sale-purchase .merit-headline-sub {

	background: #ce9393;

}

#sale-purchase .merit-headline-main-span {

	color: #ff6699;

}

#sale-purchase .merit-i::before,

#sale-purchase .merit-i::after {

	background: #ce9393;

}

#sale-purchase .merit-point-text::before {

	background: #ce9393;

}



/*------------------------------

	自転車販売

------------------------------ */

#bicycle-sale .catch::after {

	content: 'Bicycle Sales';

	background: #ca9fcc;

}

#bicycle-sale .guide-headline-main::before {

	background: url(../images/deco-wavyline-purple.svg) no-repeat center / contain;

}

#bicycle-sale .guide-message-ex-headline::before {

	color: #ca9fcc;

}

#bicycle-sale .merit {

	border: solid 2px #ca9fcc;

}

#bicycle-sale .merit-headline-sub {

	background: #ca9fcc;

}

#bicycle-sale .merit-headline-main-span {

	color: #cc66cc;

}

#bicycle-sale .merit-i::before,

#bicycle-sale .merit-i::after {

	background: #ca9fcc;

}

#bicycle-sale .merit-point-text::before {

	background: #ca9fcc;

}





/*------------------------------

	バイク販売

------------------------------ */

#bike-sale .catch::after {

	content: 'Motorcycle Sales';

	background: #c9c773;

}

#bike-sale .guide-headline-main::before {

	background: url(../images/deco-wavyline-yellow.svg) no-repeat center / contain;

}

#bike-sale .guide-message-ex-headline::before {

	color: #c9c773;

}

#bike-sale .merit {

	border: solid 2px #c9c773;

}

#bike-sale .merit-headline-sub {

	background: #c9c773;

}

#bike-sale .merit-headline-main-span {

	color: #66cc33;

}

#bike-sale .merit-i::before,

#bike-sale .merit-i::after {

	background: #c9c773;

}

#bike-sale .merit-point-text::before {

	background: #c9c773;

}

#bike-sale .guide-message-ex-li {

	width: 14%;

}

#bike-sale .guide-message-ex-li:not(:nth-of-type(3n)) {

	margin-right: 0;

}



/*------------------------------

	保険サービス

------------------------------ */

#insurance-service .catch::after {

	content: 'Insurance';

	background: #d19d79;

}

#insurance-service .guide-headline-main::before {

	background: url(../images/deco-wavyline-brown.svg) no-repeat center / contain;

}

#insurance-service .guide-message-ex-headline::before {

	color: #d19d79;

}

#insurance-service .merit {

	border: solid 2px #d19d79;

}

#insurance-service .merit-headline-sub {

	background: #d19d79;

}

#insurance-service .merit-headline-main-span {

	color: #ff6633;

}

#insurance-service .merit-i::before,

#insurance-service .merit-i::after {

	background: #d19d79;

}

#insurance-service .merit-point-text::before {

	background: #d19d79;

}





/* ============================================================

	お問合せ

============================================================ */

#connect-n1 {

	position: relative;

	background: no-repeat center / cover;

	padding: 80px 0;

	text-align: center;

}

#connect-n1::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(50, 51, 51, .4);

}

#connect-n1 .headline {

	position: relative;

	z-index: 1;

	color: #fff;

	text-align: center;

}

#connect-n1 .headline-img {

	width: 240px;

	height: 140px;

}

#connect-n1 .button {

	position: relative;

	z-index: 1;

	margin-top: 30px;

}

#connect-n1 .button-a {

	position: relative;

	display: block;

	width: 420px;

	height: 90px;

	margin: 0 auto;

	line-height: 90px;

	background: #1abc9c;

	font-weight: 700;

	font-size: 24px;

	color: #fff;

	text-align: center;

	text-indent: .1em;

	letter-spacing: .1em;

}

#connect-n1 .button-a::after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 20px;

	transform: translateY(-50%) rotate(45deg);

	width: 12px;

	height: 12px;

	border-top: solid 4px #fff;

	border-right: solid 4px #fff;

}

#connect-n1 .text {

	position: relative;

	z-index: 1;

	margin-top: 30px;

	font-weight: 700;

	color: #fff;

	letter-spacing: .1em;

	text-indent: .1em;

}





/* ============================================================

	アクセス

============================================================ */

#access {

	padding: 140px 0 0;

}

#access .headline {

	text-align: center;

}

#access .headline-sub {

	font-size: 56px;

	color: #1abc9c;

	letter-spacing: .4em;

	text-indent: .4em;

}

#access .headline-main {

	margin-top: 50px;

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

}

#access .data {

	width: 1120px;

	margin: 80px auto 0;

}

#access .date-photo {

	float: left;

	width: 560px;

}

#access .date-photo-img {

	width: 560px;

	height: 370px;

}

#access .data-table {

	float: right;

	width: 500px;

	margin: 0 auto;

}

#access .data-tr {

	border-top: solid 1px #ccc;

}

#access .data-tr:last-child {

	border-bottom: solid 1px #ccc;

}

#access .data-th {

	position: relative;

	width: 150px;

	padding: 24px 20px;

	text-align: left;

	letter-spacing: .1em;

	line-height: 1.8;

	white-space: nowrap;

}

#access .data-th::before {

	content: '●';

	color: #9cc1ba;

}

#access .data-td {

	width: 350px;

	padding: 24px 0;

	text-align: left;

	letter-spacing: .1em;

	line-height: 1.8;

}

#access .button {

	width: 880px;

	margin: 80px auto 0;

}

#access .button-map {

	float: left;

	width: 420px;

}

#access .button-map:nth-of-type(2) {

	margin-left: 40px;

}

#access .button-map-a {

	position: relative;

	display: block;

	width: 420px;

	height: 90px;

	margin: 0 auto;

	line-height: 86px;

	border: solid 2px #1abc9c;

	font-weight: 700;

	font-size: 24px;

	color: #1abc9c;

	text-align: center;

	text-indent: .1em;

	letter-spacing: .1em;

	cursor: pointer;

}

#access .button-map-i {

	margin-right: 14px;

	width: 30px;

	height: 30px;

	vertical-align: text-top;

}

#access .map {

	margin-top: 100px;

}

#access .map-iframe {

	width: 100%;

	height: 460px;

	vertical-align: bottom;

}





/* ============================================================

	インスタ

============================================================ */

#instagram {

	position: relative;

	padding: 10px 0;

}

#instagram .headline {

	position: absolute;

	top: 110px;

	left: 0;

	right: 0;

	width: 180px;

	margin: 0 auto;

	text-align: center;

	z-index: 1;

}

#instagram .headline-img {

	width: 180px;

	height: 180px;

}

#instagram .gallery {

	display: flex;

	min-width: 100%;

	width: min-content;

	height: 400px;

	overflow: hidden;

	animation: 30s linear infinite slider;

}

@keyframes slider {

	100% {

		transform: translateX(-50%);

	}

}

#instagram .gallery-photo {

	margin-right: 10px;

}

#instagram .gallery-photo-img {

	width: 400px;

	height: 400px;

}





/* ============================================================

	会社案内

============================================================ */

#company {

	padding: 140px 0;

	background: #f0f5f0;

}

#company .headline {

	text-align: center;

}

#company .headline-sub {

	font-size: 56px;

	color: #1abc9c;

	letter-spacing: .4em;

	text-indent: .4em;

}

#company .headline-main {

	margin-top: 50px;

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

}

#company .headline-desc {

	margin-top: 50px;

	letter-spacing: .1em;

	line-height: 2.3;

}

#company .photo {

	margin-top: 60px;

	text-align: center;

}

#company .photo-img {

	width: 980px;

	height: 370px;

}

#company .history,

#company .overview {

	position: relative;

	margin-top: 80px;

}

#company .history-headline,

#company .overview-headline {

	width: 980px;

	margin: 0 auto;

	padding: 0 20px;

	border-top: solid 1px #9cc1ba;

	border-bottom: solid 1px #9cc1ba;

	line-height: 2.5;

}

#company .history-headline-main,

#company .overview-headline-main {

	float: left;

	font-weight: 700;

	font-size: 28px;

	letter-spacing: .1em;

}

#company .history-headline-main-span {

	font-weight: 700;

	font-size: 20px;

}

#company .history-headline-sub,

#company .overview-headline-sub {

	margin-left: 20px;

	float: left;

	font-weight: 700;

	font-size: 16px;

	color: #9cc1ba;

	letter-spacing: .1em;

	line-height: 4.4;

}

#company .history-message {

	position: relative;

	z-index: 1;

	width: 980px;

	margin: 0 auto;

}

#company .history-message-text {

	width: 500px;

	padding: 0 20px;

	margin-top: 40px;

	letter-spacing: .1em;

	line-height: 2.3;

}

#company .history-gallery {

	position: absolute;

	top: 120px;

	left: 0;

	right: 0;

	margin: 0 auto;

	width: 980px;

	height: 420px;

}

#company .history-gallery-photo {

	position: absolute;

}

#company .history-gallery-photo:nth-of-type(1) {

	top: 0;

	right: 110px;

}

#company .history-gallery-photo:nth-of-type(2) {

	right: 25px;

	bottom: 0;

}

#company .history-gallery-photo-img {

	width: 300px;

	height: 200px;

}

#company .overview-data {

	width: 930px;

	margin: 40px auto 0;

}

#company .overview-data-table {

	float: left;

	width: 460px;

	margin: 0 auto;

}

#company .overview-data-table:nth-of-type(2) {

	margin-left: 10px;

}

#company .overview-data-tr {

	height: 90px;

}

#company .overview-data-tr:not(:last-child) {

	border-bottom: solid 10px #f0f5f0;

}

#company .overview-data-th {

	position: relative;

	width: 140px;

	padding: 10px 20px;

	background: #9cc1ba;

	text-align: left;

	color: #fff;

	letter-spacing: .1em;

	line-height: 1.5;

	vertical-align: middle;

	white-space: nowrap;

}

#company .overview-data-td {

	width: 320px;

	padding: 10px 20px;

	background: #fff;

	text-align: left;

	letter-spacing: .1em;

	line-height: 1.5;

	vertical-align: middle;

}





/* ============================================================

	お問合せ

============================================================ */

#connect-n2 {

	position: relative;

	background: no-repeat center / cover;

	padding: 80px 0;

	text-align: center;

}

#connect-n2::before {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(50, 51, 51, .4);

}

#connect-n2 .headline {

	position: relative;

	z-index: 1;

	color: #fff;

	text-align: center;

}

#connect-n2 .headline-img {

	width: 240px;

	height: 140px;

}

#connect-n2 .button {

	position: relative;

	z-index: 1;

	margin-top: 30px;

}

#connect-n2 .button-a {

	position: relative;

	display: block;

	width: 420px;

	height: 90px;

	margin: 0 auto;

	line-height: 90px;

	background: #1abc9c;

	font-weight: 700;

	font-size: 24px;

	color: #fff;

	text-align: center;

	text-indent: .1em;

	letter-spacing: .1em;

}

#connect-n2 .button-a::after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 20px;

	transform: translateY(-50%) rotate(45deg);

	width: 12px;

	height: 12px;

	border-top: solid 4px #fff;

	border-right: solid 4px #fff;

}

#connect-n2 .text {

	position: relative;

	z-index: 1;

	margin-top: 30px;

	font-weight: 700;

	color: #fff;

	letter-spacing: .1em;

	text-indent: .1em;

}





/* ============================================================

	よくあるご質問

============================================================ */

#faq {

	position: relative;

	padding: 140px 0 80px;

}

#faq .headline {

	text-align: center;

}

#faq .headline-sub {

	font-size: 56px;

	color: #1abc9c;

	letter-spacing: .4em;

	text-indent: .4em;

}

#faq .headline-main {

	margin-top: 50px;

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

}

#faq .list {

	display: flex;

	flex-wrap: wrap;

	width: 1160px;

	margin: 80px auto 0;

}

#faq .list-category {

	float: left;

	width: 520px;

	margin: 60px 30px;

}

#faq .list-headline {

	position: relative;

	width: 520px;

	margin: 0 auto;

	padding: 24px 0 24px 76px;

	border-bottom: solid 4px;

	border-image: linear-gradient(90deg, rgba(26,188,156,1) 0%, rgba(130,163,191,1) 50%, rgba(147,186,142,1) 100%);

	border-image-slice: 1;

	font-weight: 700;

	font-size: 28px;

	letter-spacing: .1em;

	white-space: nowrap;

}

#faq .list-headline::before {

	content: '';

	display: block;

	position: absolute;

	left: 20px;

	width: 40px;

	height: 40px;

	background: url(../images/icon-check-circle.svg) no-repeat center / contain;

}

#faq .list-ul {

	width: 520px;

	margin: 0 auto;

}

#faq .list-li {

	border-bottom: solid 2px #ccc;

}

#faq .list-question,

#faq .list-answer {

	letter-spacing: .1em;

	line-height: 1.8;

}

#faq .list-question {

	position: relative;

	padding: 32px 60px 32px 20px;

	font-weight: 700;

	cursor: pointer;

}

#faq .list-answer {

	display: none;

	padding: 0 20px 20px 20px;

}

#faq .list-question::before {

	content: 'Q.';

	font-weight: 700;

	color: #1abc9c;

	margin-right: .4rem;

}

#faq .list-i {

	display: block;

	position: absolute;

	top: 44px;

	right: 20px;

	width: 18px;

	height: 18px;

	transition: .5s;

}

#faq .list-i::before,

#faq .list-i::after {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	width: 18px;

	height: 4px;

	background: #999;

	margin: auto;

	transition: .5s;

	transition-delay: .5s;

}

#faq .list-i::after {

	transform: rotate(90deg);

}

#faq .list-i.is-active {

	transform: rotate(90deg);

}

#faq .list-i.is-active::before {

	transition-delay: .5s;

	left: 10px;

	opacity: 0;

}

#faq .list-button {

	width: 520px;

	margin: 0 auto;

	text-align: right;

}

#faq .list-hidden {

	display: none;

}

#faq .list-button-more {

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

	line-height: 4;

	background: linear-gradient(transparent 96%, #666 0%);

	cursor: pointer;

}





/* ============================================================

	画像

============================================================ */

#vision {

	height: 430px;

	background: no-repeat center / cover;

}





/* ============================================================

	お問合せ

============================================================ */

#contact {

	padding: 140px 0;

	background: #f0f5f0;

}

#contact .headline {

	text-align: center;

}

#contact .headline-sub {

	font-size: 56px;

	color: #1abc9c;

	letter-spacing: .4em;

	text-indent: .4em;

}

#contact .headline-main {

	margin-top: 50px;

	font-size: 16px;

	color: #666;

	letter-spacing: .1em;

}

#contact .headline-desc {

	margin-top: 50px;

	letter-spacing: .1em;

	line-height: 2.3;

}

#contact .button {

	position: relative;

	width: 740px;

	margin: 80px auto 0;

}

#contact .button-tel,

#contact .button-instagram {

	float: left;

	width: 360px;

	margin: 0 auto;

}

#contact .button-tel {

	margin-right: 20px;

}

#contact .button-tel-span {

	display: block;

	font-size: 16px;

	line-height: 1.6;

}

#contact .button-tel-a,

#contact .button-instagram-a {

	position: relative;

	display: block;

	width: 360px;

	height: 120px;

	margin: 0 auto;

	padding: 0 80px;

	background: #fff;

	font-weight: 700;

	font-size: 22px;

	letter-spacing: .1em;

}

#contact .button-tel-a {

	padding: 35px 0 35px 80px;

}

#contact .button-instagram-a {

	line-height: 120px;

}

#contact .button-tel-a::before,

#contact .button-instagram-a::before {

	content: '';

	display: block;

	position: absolute;

	top: 40px;

	left: 20px;

	width: 42px;

	height: 42px;

}

#contact .button-tel-a::before {

	background: url(../images/icon-tel-circle.svg) no-repeat center / contain;

}

#contact .button-instagram-a::before {

	background: url(../images/icon-instagram-circle.svg) no-repeat center / contain;

}

#contact .button-instagram-a::after {

	content: '';

	display: block;

	position: absolute;

	top: 50%;

	right: 20px;

	transform: translateY(-50%) rotate(45deg);

	width: 12px;

	height: 12px;

	border-top: solid 4px #1abc9c;

	border-right: solid 4px #1abc9c;

}





/* ============================================================

	フッター

============================================================ */

#footer {

	position: relative;

	padding: 50px 0;

	background: #9cc1ba;

	height: 300px;

}

#footer .site {

	position: relative;

	width: 800px;

	margin: 0 auto;

	color: #fff;

}

#footer .site-photo {

	position: absolute;

	top: 0;

	left: 0;

	width: 400px;

}

#footer .site-photo-img {

	width: 400px;

	height: 200px;

}

#footer .site-text {

	width: 350px;

	margin-left: auto;

	padding-top: 30px;

	font-size: 16px;

	letter-spacing: .1em;

	line-height: 1.8;

}

#footer .copyright {

	width: 350px;

	margin-left: auto;

	margin-top: 20px;

	font-size: 16px;

	color: #fff;

	letter-spacing: .1em;

	line-height: 1.8;

}





/* ============================================================

	ポップアップ・動画

============================================================ */

#popup-video {

	display: none;

	position: fixed;

	top: 0;

	right: 0;

	width: 100%;

	height: 100%;

	padding: 90px 0;

	z-index: 600;

	overflow-y: scroll;

}

#popup-video .background {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(255, 255, 255, .9);

	z-index: 1;

}

#popup-video .card {

	position: relative;

	width: 460px;

	margin: 0 auto;

	z-index: 5;

}

#popup-video .card-close {

	position: absolute;

	top: -50px;

	right: 0;

	z-index: 3;

}

#popup-video .card-close-span {

	display: block;

	width: 40px;

	height: 40px;

	cursor: pointer;

}

#popup-video .card-close-span::before,

#popup-video .card-close-span::after {

	content: '';

	display: block;

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	width: 40px;

	height: 2px;

	margin: auto;

	background: #333;

}

#popup-video .card-close-span::before {

	transform: rotate(45deg);

}

#popup-video .card-close-span::after {

	transform: rotate(-45deg);

}

#popup-video .card-movie {

	text-align: center;

}

#popup-video .card-movie-video {

	width: 460px;

	height: 818px;

}