@charset "utf-8";

/* タブレット@media screen and (min-width:600px) */
/* パソコン@media screen and (min-width:1025px) */
/* インナー幅1000px */
/* 文字1.6remで1.4 */ /* 400と700 */

/* =====================================================
--------------------------------------------------------
リセット
--------------------------------------------------------
===================================================== */

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1,h2,h3,h4,h5,h6 {
	font-size: inherit;
	font-weight: inherit;
}

ul,ol { list-style: none; }

img { 
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	vertical-align: bottom;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast; /* 拡大縮小でぼかしたり滑らかに処理されずエッジを保った表示になる。 */
}










/* =====================================================
--------------------------------------------------------
汎用 utility
--------------------------------------------------------
===================================================== */

/* 直接切替 */
.u--sp-none { display: none; }
.u--pc-none { display: inline-block; }
@media screen and (min-width:1025px) {
	.u--sp-none { display: inline-block; }
	.u--pc-none { display: none; }
}

/* 文字 */
.u--text-left { text-align: left; }
.u--text-center { text-align: center; }
.u--text-right { text-align: right; }

.u--text-serif { font-family: 'Noto Serif JP', serif; }

.u--text24 { font-size: 2.0rem; line-height: 1.4; /* -4 */ }
.u--text32 { font-size: 2.6rem; line-height: 1.4; /* -6 */ }
.u--text48 { font-size: 3.2rem; line-height: 1.4; /* -16 */ }
.u--text64 { font-size: 5.6rem; line-height: 1.4; /* -8 */ }
.u--text80 { font-size: 7.2rem; line-height: 1.4; /* -8 */ }

@media screen and (min-width:1025px) {
	.u--text24 { font-size: 2.4rem; }
	.u--text32 { font-size: 3.2rem; }
	.u--text48 { font-size: 4.8rem; }
	.u--text64 { font-size: 6.4rem; }
	.u--text80 { font-size: 8.0rem; }
}

.u--text-medium { font-weight: 500; }
.u--text-bold { font-weight: 700; }

.u--text-green { color: #8a966f; }

.u--bg-green { background: #8a966f; }


/* margin */
.u--mt0 { margin-top: 0 !important; }
.u--mt10 { margin-top: 10px !important; }
.u--mt20 { margin-top: 20px !important; }
.u--mt30 { margin-top: 30px !important; }
.u--mt40 { margin-top: 40px !important; }
.u--mt50 { margin-top: 50px !important; }

.u--mb0 { margin-bottom: 0 !important; }
.u--mb10 { margin-bottom: 10px !important; }
.u--mb20 { margin-bottom: 20px !important; }
.u--mb30 { margin-bottom: 30px !important; }
.u--mb40 { margin-bottom: 40px !important; }
.u--mb50 { margin-bottom: 50px !important; }

/* padding */
.u--pt0 { padding-top: 0 !important; }
.u--pt10 { padding-top: 10px !important; }
.u--pt20 { padding-top: 20px !important; }
.u--pt30 { padding-top: 30px !important; }
.u--pt40 { padding-top: 40px !important; }
.u--pt50 { padding-top: 50px !important; }

.u--pb0 { padding-bottom: 0 !important; }
.u--pb10 { padding-bottom: 10px !important; }
.u--pb20 { padding-bottom: 10px !important; }
.u--pb30 { padding-bottom: 10px !important; }
.u--pb40 { padding-bottom: 10px !important; }
.u--pb50 { padding-bottom: 10px !important; }










/* =====================================================
--------------------------------------------------------
共通
--------------------------------------------------------
===================================================== */

html {
	font-size: 62.5%;
}

body {
	color: #2d3024;
	font-family: 'Lato', 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
}

/* インナー幅 */
.inner {
	margin: 0 auto;
	padding: 0 20px;
	width: 100%;
}
@media screen and (min-width:1025px) {
	.inner {
		padding: 0;
		width: 1000px;
	}
}

h1 {
	font-family: 'Noto Serif JP', serif;
	font-size: 4.0rem; /* ×2.5 */
	font-weight: 900;
	line-height: 1;
}

h2 {
	position: relative;
	margin-bottom: 20px;
	padding-bottom: 15px;
	font-size: 3.2rem; /* ×2 */
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

h2::after {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	height: 10px;
	border-radius: 5px;
	background: #e3df64;
	content: '';
}

h3 {
	font-size: 2.4rem; /* ×1.5 */
	font-weight: 700;
	line-height: 1.4;
}

@media screen and (min-width:1025px) {
	h1 { font-size: 6.4rem; /* ×4 */ }
	h2 { font-size: 4.8rem; /* ×3 */ }
	h3 { font-size: 3.2rem; /* ×2 */ }
}

a {
	color: inherit;
	text-decoration: none;
}

/* 電話番号無効 */
@media screen and (min-width:768px){
	a[href^="tel:"]{
		pointer-events: none;
	}
}










/* =====================================================
--------------------------------------------------------
ページ上部
--------------------------------------------------------
===================================================== */

/* カバー */
.overwrap {
	display: none;
}

.overwrap.open {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	opacity: 0.5;
	width: 100%;
	height: 100%;
	background: #2d3024;
}

html.hidden {
	overflow: hidden;
}



/* ヘッダー */
header {
	padding: 30px 0;
	width: 100%;
	background: url(/img/ep/smartsystem/mainvisual.jpg) bottom center / cover;
}

.header_top {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	margin: 0px auto;
}

.header_top_logo img {
	width: 200px;
}

.header_top_tel {
	display: none;
}

@media screen and (min-width:600px) {
	.header_top_tel {
		display: block;
		line-height: 1.2;
	}
}

.header_top_tel_number {
	font-size: 2.4rem;
	font-weight: 700;
}

.header_top_tel_number::before {
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f098";
}

.header_top_tel_time {
	font-size: 1.4rem;
}



/* ハンバーガー */
.header_top_hamburger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	top: 30px;
	right: 20px;
	z-index: 120;
	width: 55px;
	height: 55px;
	border-radius: 50%;
	background: #2d3024;
	cursor: pointer;
}

.header_top_hamburger.open {
	background: #fff;
}

.header_top_hamburger_line {
	position: relative;
	width: 100%;
	height: 22px;
}

.header_top_hamburger_line span {
	position: absolute;
	left: 50%;
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background: #fff;
	content: '';
	transition: all 0.5s;
}

.header_top_hamburger_line span.open {
	background: #2d3024;
}

.header_top_hamburger_line span:nth-child(1) {
	top: 0;
	transform: translate(-50%,0%);
}

.header_top_hamburger_line span.open:nth-child(1) {
	top: 100%;
	transform: rotate(45deg) translate(-20px,0px);
}

.header_top_hamburger_line span:nth-child(2) {
	top: 50%;
	transform: translate(-50%,-50%);
}

.header_top_hamburger_line span.open:nth-child(2) {
	opacity: 0;
}

.header_top_hamburger_line span:nth-child(3) {
	top: 100%;
	transform: translate(-50%,-90%);
}

.header_top_hamburger_line span.open:nth-child(3) {
	top: 0;
	transform: rotate(-45deg) translate(-15px,-5px);
}



/* メニューの中身 */
.header_top_nav {
	display: none;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 100;
	color: #fff;
}

.header_top_nav.open {
	display: block;
	position: fixed;
	width: 90%;
	height: 100%;
	background: #2d3024;
}

.header_top_nav_ul {
	display: flex;
	flex-direction: column;
	padding: 100px 30px;
}

.header_top_nav_ul li {
	display: block;
	width: 100%;
}

.header_top_nav_ul > li {
	border-bottom: 1px solid rgba(255,255,255,0.5);
}

.header_top_nav_ul a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
}

.header_top_nav_ul ul,
.header_top_nav_ul > li > a {
	display: flex;
	flex-flow: row wrap;
	gap: 5px;
	padding: 20px 0;
}

.header_top_nav_ul_tel_number {
	padding-bottom: 0 !important;
	font-size: 2.4rem;
}

.header_top_nav_ul_tel_number::before {
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f098";
}

.header_top_nav_ul_tel_time {
	display: block;
	margin-bottom: 20px;
}

@media screen and (min-width:1025px) {
	.header_top_nav.open {
		width: auto;
	}
}



/* タイトル */
.header_title {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 200px;
	text-align: center;
}

.header_title_lead {
	font-size: 2.4rem;
	font-weight: 500;
}

@media screen and (min-width:1025px) {
	.header_title {
		height: 310px;
	}
	.header_title_lead {
		font-size: 3.2rem;
	}
}










/* =====================================================
--------------------------------------------------------
メイン
--------------------------------------------------------
===================================================== */

/* こんなお悩みありませんか？ */
.worry {
	padding-top: 60px;
	background: url(/img/ep/smartsystem/worry_bg.png) repeat-x bottom left;
	text-align: center;
}

.resolution {
	padding: 40px 0 0;
	background: #f5f4f2;
	font-weight: 700;
}

.resolution_text {
	margin-bottom: 40px;
	font-weight: 700;
	text-align: center;
}

.resolution_text p {
	line-height: 1.2;
}

.resolution_text .u--text-serif {
	font-size: 4.8rem;
}

.resolution ul {
	padding-bottom: 30px;
}

.resolution li {
	font-size: 2.4rem;
	line-height: 1.4;
}

.resolution li::before {
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0a4";
}

@media screen and (min-width:1025px) {
	.resolution .inner {
		background: url(/img/ep/smartsystem/resolution.jpg) #f5f4f2 no-repeat right bottom;
	}
	.resolution_text .u--text-serif {
		font-size: 6.4rem;
	}
	.resolution ul {
		padding-bottom: 60px;
	}
	.resolution li { 
		font-size: 4.8rem;
	}
}



/* スマートシステムとは */
.about {
	padding: 60px 0;
	background: #f5f4f2;
}

.about_support {
	display: flex;
	flex-flow: row wrap;
	gap: 20px;
	margin: 40px 0;
}

.about_support_list {
	padding: 20px 30px 30px;
	width: 100%;
	background: #fff;
}

@media screen and (min-width:1025px) {
	.about_support_list {
		width: calc((100% - 40px) / 3);
	}
}

.about_support_list h4 {
	margin-bottom: 20px;
	border-bottom: 2px solid #2d3024 ;
	font-size: 3.2rem;
	font-weight: 700;
	text-align: center;
}

.about_support_list li::before {
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
}

.about_monthly {
	margin-bottom: 20px;
	font-weight: 700;
	text-align: center;
}

.about_monthly p {
	line-height: 1.2;
}

.about_more {
	text-align: center;
}

.about_more p:nth-child(1) {
	display: inline-block;
	position: relative;
}

.about_more p:nth-child(1)::before,
.about_more p:nth-child(1)::after {
	position: absolute;
	top: 50%;
	width: 4px;
	height: 30px;
	background: #8a966f;
	content: '';
}

.about_more p:nth-child(1)::before {
	left: -30px;
	transform: translateY(-50%) rotate(-30deg);
}

.about_more p:nth-child(1)::after {
	right: -30px;
	transform: translateY(-50%) rotate(30deg);
}



/* スマートシステムの特徴 */
.feature {
	padding: 60px 0 30px;
}

.feature h3 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	width: 100%;
	background: url(/img/ep/smartsystem/bg-stripe-g.png) repeat;
	text-align: center;
}

.feature_number {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	height: 100%;
	padding: 10px;
	background: url(/img/ep/smartsystem/bg-stripe-y.png) repeat;
	line-height: 1;
}

@media screen and (min-width:1025px) {
	.feature_number {
		flex-direction: column;
		align-items: center;
		gap: 0;
		position: absolute;
		top: 0;
		left: 0;
	}
}

.feature_title {
	padding: 10px;
}

.feature_number span:first-child {
	font-size: 1.6rem;
}

.feature_number span:last-child {
	font-size: 3.2rem;
}

.feature_unit {
	margin-bottom: 30px;
	padding: 20px;
	border: 2px solid #f5f4f2;
	text-align: center;
}

.feature_unit:last-of-type {
	margin-bottom: 0;
}

@media screen and (min-width:1025px) {
	.feature_unit {
		padding: 30px;
	}
}

.feature_unit_desc {
	margin-bottom: 20px;
}

.feature_unit_point2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 30px;
}

.feature_unit_point3,
.feature_unit_point4,
.feature_unit_point6 {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 30px;
}

.feature_unit_point4:last-child,
.feature_unit_point6:last-child {
	margin-bottom: 0;
}

.feature_unit_point2 li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
	padding: 20px;
	width: 100%;
	background: #f5f4f2;
}

.feature_unit_point3 li,
.feature_unit_point4 li  {
	width: 100%;
	line-height: 1.2;
}

.feature_unit_point6 li {
	width: calc((100% - 20px) / 2);
	line-height: 1.2;
}

.feature_unit_point6 li img {
	margin-bottom: 10px;
}
.feature_unit_point3 li h5,
.feature_unit_point4 li h5 {
	font-size: 2.0rem;
	font-weight: 700;
}

@media screen and (min-width:1025px) {
	.feature_unit_point2 li {
		width: 347px;
	}
	.feature_unit_point3 li {
		width: calc((100% - 40px) / 3);
	}
	.feature_unit_point4 li {
		width: calc((100% - 60px) / 4);
	}
	.feature_unit_point6 li {
		width: calc((100% - 100px) / 6);
	}
	.feature_unit_point3 li h5,
	.feature_unit_point4 li h5 {
		font-size: 2.4rem;
		font-weight: 500;
	}
}

.feature_unit_more {
	margin: 20px 0;
}

.feature_unit_more p:nth-child(1) {
	display: inline-block;
	position: relative;
}

.feature_unit_more p:nth-child(1)::before,
.feature_unit_more p:nth-child(1)::after {
	position: absolute;
	top: 50%;
	width: 4px;
	height: 30px;
	background: #8a966f;
	content: '';
}

.feature_unit_more p:nth-child(1)::before {
	left: -30px;
	transform: translateY(-50%) rotate(-30deg);
}

.feature_unit_more p:nth-child(1)::after {
	right: -30px;
	transform: translateY(-50%) rotate(30deg);
}

.feature_unit_incidentally_circle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	margin: 0 auto 20px;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #e3df64;
	font-weight: 500;
}

.feature_unit_incidentally_circle::after {
	position: absolute;
	bottom: -2px;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translateX(-50%) rotate(45deg);
	background: #e3df64;
	content: '';
}

.feature_unit_incidentally p:nth-child(2)::after {
	display: block;
	color: #e3df64;
	font-size: 6.4rem;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f103";
}

@media screen and (min-width:1025px) {
	.feature_unit_incidentally {
		line-height: 1.2;
	}
	.feature_unit_incidentally p:nth-child(2)::after {
		margin: 20px 0 -20px;
	}
}

.feature_unit h4 {
	margin-bottom: 10px;
	font-size: 2.0rem;
	font-weight: 700;
	line-height: 1.2;
}

.feature_unit h4::before {
	display: block;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f06a";
}

@media screen and (min-width:1025px) {
	.feature_unit h4 {
		font-size: 3.2rem;
		font-weight: 500;
	}
	.feature_unit h4::before {
		display: inline;
		margin-right: 10px;
	}
}



/* 最後の電話番号 */
.last-tel {
	margin-bottom: 60px;
	line-height: 1.2;
	text-align: center;
}

.last-tel_text {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 1.6rem;
	font-weight: 700;
}

.last-tel_text::before,
.last-tel_text::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0d7";
}

.last-tel_text::before {
	margin-right: 10px;
}

.last-tel_text::after {
	margin-left: 10px;
}

.last-tel_number {
	font-size: 3.2rem;
	font-weight: 700;
}

.last-tel_number::before {
	margin-right: 10px;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f098";
}

@media screen and (min-width:1025px) {
	.last-tel_text {
		font-size: 2.4rem;
		font-weight: 400;
	}
	.last-tel_number {
		font-size: 4.8rem;
	}
}



/* 資料ダウンロード・お申込み */
.inquiry-bg-green {
	background: #8a966f;
}

.inquiry-bg-green .inner,
.inquiry-bg-white {
	display: flex;
	flex-flow: row wrap;
	gap: 10px;
	padding: 30px 0;
}


.inquiry-bg-green a,
.inquiry-bg-white a {
	display: inline-block;
	position: relative;
	flex-grow: 1;
	padding: 10px 40px;
	width: 100%;
	border-radius: 70px;
	font-size: 2.42rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

.inquiry-bg-green a::after,
.inquiry-bg-white a::after {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	color: #e3df64;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f105";
	transition: all 0.5s;
}

.inquiry-bg-green a {
	background: #fff;
}

.inquiry-bg-white a {
	background: #8a966f;
	color: #fff;
}

.inquiry-bg-green a span,
.inquiry-bg-white a span {
	font-size: 2.4rem;
}

@media screen and (min-width:1024px) {
	.inquiry-bg-green a,
	.inquiry-bg-white a {
		padding: 20px;
		width: auto;
		font-size: 3.2rem;
		font-weight: 500;
	}
	.inquiry-bg-green a:hover::after,
	.inquiry-bg-white a:hover::after {
		right: 20px;
	}
}










/* =====================================================
--------------------------------------------------------
フッター
--------------------------------------------------------
===================================================== */

.footer_info-logo {
	padding: 30px 0;
	background: #2d3024;
	color: #fff;
}

.footer_info-logo .inner {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	gap:20px;
}

@media screen and (min-width:1025px) {
	.footer_info-logo .inner {
		justify-content: space-between;
	}
}

.footer_info {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	width: 780px;
}

.footer_info li a::after {
	margin-left: 0.5em;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f35d";
}

.footer_info li:first-child::after {
	margin: 0 10px;
	content: "｜";
}

.footer_info li:last-child {
	width: 100%;
}

.footer_logo img {
	width: 200px;
}

.footer_copyright {
	padding: 30px 0;
	background: #f5f4f2;
	text-align: center;
}