@charset "utf-8";

:root {
	--alumi: #d9d9d9;
	--gold: #d9b310;
	--blue: #38B6FF;
	--navy: #083c5d;
	--black: #1d2731;
	--orange: #ffd500;
	--white: #fff;
	--palegray: #fafaf5;
}

html {
	font-size: 62.5%;
}

body {
	/* background-color: #f0f0f0; */
	color: #333;
	font-size: 1.6rem;
	font-family: "Noto Sans JP", 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', 'Helvetica', 'Arial', 'sans-serif';
	line-height: 1.7;
}

p {
	font-size: 1.6rem;
}

a {
	text-decoration: none;
	color: #333;
	font-size: 1.6rem;
}

img {
	max-width: 100%;
	vertical-align: bottom;
}

li {
	list-style: none;
}

/* 共通事項 */
.wrapper {
	padding: 0 4%;
	margin: 0 auto;
}

.section-title {
	display: flex;
	align-items: flex-end;
	margin-bottom: 10px;
}

.section-title img {
	width: 10%;
}

.section-title span.ja {
	font-size: 4.4rem;

}

.section-title span.en {
	font-size: 2.2rem;
	padding-bottom: 1%;
	padding-left: 1%;
}


.rainbow-bar {
	background: linear-gradient(to right, var(--blue), var(--alumi), var(--navy), var(--alumi), var(--blue), var(--alumi), var(--gold), var(--alumi), var(--blue), var(--alumi), var(--navy), var(--alumi), var(--blue), var(--alumi), var(--gold), var(--alumi)) 0 / 200%;
	height: 3px;
	animation: 7s rainbow-bar linear infinite;
}

@keyframes rainbow-bar {
	100% {
		background-position: 200%;
	}
}

/* header */
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1px;
	margin-bottom: 1px;
	padding: 0 2%;
}

#header h1 {
	width: 28%;
	line-height: 1;
}

#header nav {
	padding: 0 10px;
}

#header ul {
	display: flex;
	justify-content: space-between;

}

#header li {
	margin-left: 30px;
}

#header li.for-tb {
	display: none;
}

#header li a {
	font-size: 1.4vw;
	font-weight: bold;
}

#header li a.line-action {
	position: relative;
}

#header li a.line-action::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 2px;
	background: #333333;
	bottom: 0px;
	opacity: 0;
	visibility: hidden;
	transition: .5s;
}

#header li a.line-action:hover::after {
	visibility: visible;
	bottom: -5px;
	opacity: 1;
}

#header .tel {
	background-color: var(--blue);
	padding: 3px 10px;
	display: inline-block;
	box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.7);
	border-radius: 5px;
}

#header .tel-forsp {
	display: none;
}

#header .tel a {
	color: #fff;
}

#header .tel-numberbox {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	color: var(--blue);
	padding: 1%;
	border-radius: 5px;
}

#header .tel-number {
	margin-left: 5px;
}

#sp-navi {
	display: none;
}


/* mv */
#mv {
	position: relative;
	margin-bottom: 20px;
	overflow: hidden;
}

#mv img {
	height: 90vh;
	object-fit: cover;
	width: 100%;
	animation: animationZoom1 10s ease-in-out forwards;
}

@keyframes animationZoom1 {
	100% {
		transform: scale(1.1)
	}
}


.mv-text {
	width: 40%;
	height: 75%;
	background-color: rgba(255, 255, 255, .7);
	position: absolute;
	top: 10%;
	left: 8%;
	box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.7);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1%;
	border-radius: 15px;
}

#mv h2 {
	font-size: 3.5vw;
	margin-bottom: 3%;
	line-height: 1.4;
}

#mv p {
	font-size: 2.0vw;
	line-height: 1.6;
	font-weight: bold;
}

/* introduction */
#introduction {
	margin-bottom: 100px;
}

#introduction h3 {
	margin-bottom: 30px;
	font-size: 2.3vw;
	text-align: center;
}


#introduction p {
	margin-bottom: 30px;
}

#introduction .text {
	margin-bottom: 30px;
}


#introduction .message {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	align-items: center;
}

#introduction .message p {
	position: relative;
	padding: 1rem 1rem 1.2rem;
	border-bottom: 3px solid #333;
	background:
		radial-gradient(#f2eded 30%, transparent 30%),
		linear-gradient(var(--orange) 0 100%);
	background-repeat: repeat, no-repeat;
	background-size: 10px 10px, 100% 100%;
	font-size: 2.2vw;
	font-weight: bold;
	text-align: center;
}

#introduction .message p:before,
#introduction .message p:after {
	position: absolute;
	left: 10%;
	content: "";
	height: 0;
	width: 0;
}

#introduction .message p:before {
	top: 100%;
	border: 9px solid;
	border-color: transparent;
	border-top-color: #333;
	margin-left: -9px;
}

#introduction .message p:after {
	top: 99%;
	border: 6px solid;
	border-color: transparent;
	border-top-color: #ddbcb3;
	margin-left: -6px;
}


#introduction .worry-img img {
	width: 5rem;
	margin-right: 10px;
}

#introduction .img2 {
	width: 3.75rem;
	margin-right: 10px;
}

#introduction .img3 {
	width: 4.1rem;
	margin-right: 10px;
}

#introduction .catch {
	text-align: center;
}


#introduction .catch p {
	font-size: 2.2vw;
	font-weight: bold;
}

#introduction .catch h3 {
	padding: 15px 0;
	font-size: 2.5vw;
	position: relative;
	margin-bottom: 10px;
}

.underline {
	position: relative;
	z-index: 1;
}

.underline:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0%;
	height: 8px;
	background: var(--orange);
	z-index: -1;
	transition: all 0.8s;
}

.underline.isActive:after {
	width: 100%;
}

#introduction .catch h3::before {
	content: "";
	background-image: url(/img/inazuma-flame.png);
	background-size: contain;
	display: inline-block;
	width: 10%;
	height: 90%;
	position: absolute;
	left: 10%;
	top: 5%;
}

#introduction .catch h3::after {
	content: "";
	background-image: url(/img/inazuma-flame.png);
	background-size: contain;
	display: inline-block;
	width: 10%;
	height: 90%;
	position: absolute;
	right: 10%;
	top: 5%;
	transform: scale(-1, 1);
}

#introduction .btn-link ul {
	display: flex;
	justify-content: center;
	max-width: 1050px;
	width: 100%;
	margin: 0 auto;
}

#introduction .btn-link li {
	width: 16vw;
	height: 16vw;
	border-radius: 50%;
	color: var(--white);
	font-size: 1.8rem;
	line-height: 16vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 2% 2% 0;
}

#introduction .btn-link li.nyukyo {
	background-image: url(/img/入居画像.png);
}

#introduction .btn-link li.rehen {
	background-image: url(/img/レイアウト変更の画像.jpg);
}

#introduction .btn-link li.switch {
	background-image: url(/img/whm.jpg);
}

#introduction .btn-link li.doryoku {
	background-image: url(/img/室外機画像.png);
}

#introduction .btn-link li.nyukyo,
#introduction .btn-link li.rehen,
#introduction .btn-link li.switch,
#introduction .btn-link li.doryoku {
	color: var(--black);
	text-shadow: 1px 1px 0 var(--white), -1px -1px 0 var(--white),
		-1px 1px 0 var(--white), 1px -1px 0 var(--white),
		0px 1px 0 var(--white), 0-1px 0 var(--white),
		-1px 0 0 var(--white), 1px 0 0 var(--white);
}

/* service */

#service .service-link {
	margin-bottom: 30px;
	margin-top: 30px;
}

#service .service-link ul {
	display: flex;
	justify-content: center;
}

#service .service-link li {
	display: inline-block;
	padding: 0.5rem;
	border-radius: 100vh;
	background: #f2f5f6;
	background: -webkit-linear-gradient(to top,
			#f2f5f6 0%,
			#e3eaed 37%,
			#96a1a5 100%);

	background: -webkit-linear-gradient(top,
			#f2f5f6 0%,
			#e3eaed 37%,
			#96a1a5 100%);
	background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #96a1a5 100%);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#96a1a5', GradientType=0);
	margin-left: 60px;
}

#service .service-link li:first-of-type {
	margin-left: 0;
}

#service .service-link li a {
	font-size: 1.6vw;
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	display: inline-block;
	padding: 1rem 1rem;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	letter-spacing: 0.1em;
	color: #212529;
	border-radius: 0.5rem;
	border-radius: 100vh;
	background: #e3eaed;
	background: -webkit-linear-gradient(top, #e3eaed 0%, #f2f5f6 100%);
	background: linear-gradient(to bottom, #e3eaed 0%, #f2f5f6 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3eaed', endColorstr='#f2f5f6', GradientType=0);
}

#service .service-link li a:hover {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

#service .service-link li a br {
	display: none;
}


/* consent */

#service-consent {
	padding-top: 3%;
	background-color: var(--palegray);
}

#service-consent .wrapper {
	padding-bottom: 10%;
}

.service-title {
	margin-bottom: 10px;
}

.service-title span.ja {
	font-size: 2.8rem;
}

.service-title p {
	font-size: 1.8rem;
}

.service-title.lighting-title,
.service-title.powerboard-title,
.service-title.drr-title {
	margin-top: 5%;
}

.service-description {
	font-size: 1.8rem;
	margin-bottom: 30px;
}

.consent-item-flex {
	display: flex;
	justify-content: space-between;
	height: 80%;
}

.service-item {
	position: relative;
	padding: 0 1%;
}

.service-item img {
	box-shadow: 2px 2px 4px;
}

.service-item p {
	position: absolute;
	font-size: 1.5vw;
	display: inline-block;
	background-color: var(--blue);
	padding: 1% 2%;
	width: 88%;
	line-height: 2;
	left: 12%;
	top: 90%;
	z-index: 10;
	box-shadow: 2px 2px 4px;
}

.service-item p span {
	font-weight: bold;
}

/* lighting */
#service-lighting .wrapper {
	padding-bottom: 10%;
}

/* powerboard */
#service-powerboard {
	background: var(--palegray);
}

#service-powerboard .wrapper {
	padding-top: 3%;
	padding-bottom: 10%;
}

#service-powerboard .powerboard-item-flex {
	display: flex;
	justify-content: space-evenly;
}

#service-drr .wrapper {
	padding-bottom: 10%;
}

/* features */

#features {
	background: #f0f0f0;
	padding-top: 10%;
	margin-bottom: 5%;
}

#features.wrapper {
	padding-top: 4%;
	padding-bottom: 1%;
}

#features h2 {
	margin-bottom: 30px;
}

#features .feature-box {
	margin-bottom: 30px;
}

#features .obi {
	position: relative;
	margin-bottom: 20px;
}

#features .feature-number {
	position: absolute;
	width: 20%;
	padding-left: 1%;
	font-size: 2.0vw;
	background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
	border-radius: 10px;
}

#features .feature-number .no {
	font-size: 3.0vw;
	color: #333;
	text-shadow: 1px 1px 0 var(--white), -1px -1px 0 var(--white),
		-1px 1px 0 var(--white), 1px -1px 0 var(--white),
		0px 1px 0 var(--white), 0-1px 0 var(--white),
		-1px 0 0 var(--white), 1px 0 0 var(--white);
}

#features .feature-title {
	font-size: 3.0vw;
	font-weight: bold;
	width: 100%;
	background-image: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(42, 179, 252, 1) 90%);
	text-align: center;
	border-radius: 10px;
}

#features .feature-item {
	display: flex;
	justify-content: space-between;
}

#features .feature-item img {
	width: 30%;
}

#features .feature-item p {
	width: 70%;
	line-height: 2;
	font-size: 1.5vw;
	padding-left: 2%;
}


/* about */

#about h2 {
	margin-bottom: 2%;
}

#about .message {
	/* display: flex; */

}

#about .message h3 {
	font-size: 2.6rem;
}

#about .text {
	width: 70%;
	width: 100%;
}

#about .for-tb {
	display: none;
}

#about .text p {
	font-size: 1.8rem;
	line-height: 1.8;
	padding: 20px;
	text-align: left;

}

#about .owner-name {
	font-weight: bold;
	font-family: serif;

}

#about .owner-name span {
	font-size: 2.8rem;
}

#about .img {
	width: 30%;
}

#about .profile {
	margin-bottom: 30px;
}

#about .profile h3 {
	font-size: 2.6rem;
	margin-bottom: 10px;
}

#about .profile table {
	font-size: 1.8rem;
}

#about .profile th {
	text-align: center;
}

#about .profile td {
	padding-left: 15px;


}

/* contact */
#contact {
	text-align: center;
	background-color: rgba(255, 213, 0, 0.5);
	color: #333;
	padding: 50px 0;
}

#contact h2 {
	margin-bottom: 30px;
}

#contact span.ja {
	display: block;
	font-size: 3.4rem;
}

#contact span.en {
	font-size: 1.6rem;
	display: block;
}

#contact .tel-number {
	display: flex;
	justify-content: center;
	align-items: center;
}

#contact .tel-number p {
	font-size: 2rem;
}

#contact .tel-number p:first-of-type {
	display: inline-block;
	border: 1px solid #333;
	color: #333;
	font-size: 1.4rem;
	padding: 0 10px;
	border-radius: 5px;
	margin-right: 5px;
}

#contact .tel-time {
	font-size: 1.6rem;
	margin-bottom: 30px;
}

#contact .form-link {
	display: inline-block;
	font-size: 1.8rem;
	padding: 20px 100px;
	color: #333;
	border: 2px solid #333;
}

#contact .form-link:hover {
	color: rgba(255, 213, 0, 0.5);
	border: 2px solid rgba(255, 213, 0, 0.5);
	background-color: #333;
	transition: .5s;
}

/* footer */
#footer {
	text-align: center;
	background: var(--navy);
}

#footer .footer-logo {
	text-align: center;
	padding: 1% 0 0;
}

#footer .footer-logo img {
	width: 18%;
	filter: hue-rotate(180deg);
}

#footer p.copyright {
	color: #fff;
	font-size: 1vw;
	padding-bottom: 1%;
}

/* page-top btn */
#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 14px;
	line-height: 1;
	z-index: 99;
}

#page-top a {
	background: var(--black);
	text-decoration: none;
	color: #fff;
	width: 60px;
	padding: 16px 5px;
	text-align: center;
	display: block;
	border-radius: 90px;
	opacity: 0.9;
	transition: all .3s ease;
}

#page-top a:hover {
	text-decoration: none;
	opacity: .5;
}


/* タブレット用メディアクエリ */
@media screen and (max-width: 960px) {
	/* スクリーンサイズが960px以下の場合に適用 */

	/* 960～768の間のデザインを調整 */
	.rainbow-bar {
		background: linear-gradient(to right, var(--blue), var(--alumi), var(--navy), var(--alumi), var(--blue), var(--alumi), var(--gold), var(--alumi), var(--blue), var(--alumi)) 0 / 200%;
		height: 5px;
		animation: 7s rainbow-bar linear infinite;
	}
	/* header */

	/* HM */
	#navi {
		display: block;
		position: fixed;
		top: 0;
		left: -300px;
		bottom: 0;
		width: 300px;
		color: #fff;
		padding: 60px 25px;
		background-color: #121212;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 20;
		opacity: 0;
	}

	#navi a {
		color: #fff;
	}

	.open #navi {
		left: 0;
		opacity: 1;
	}

	#navi ul {
		margin: 0;
		padding: 0;
	}

	#navi ul.nav-menu {
		margin-bottom: 60px;
		border-top: solid 1px #fff;
	}

	#navi ul.nav-menu li {
		position: relative;
		margin: 0;
		padding: 20px 0;
		border-bottom: solid 1px #fff;
	}

	#navi ul.nav-sns li {
		padding: 5px 0;
	}

	.toggle_btn {
		display: block;
		position: fixed;
		top: 20px;
		right: 25px;
		width: 30px;
		height: 30px;
		transition: all .5s;
		cursor: pointer;
		z-index: 20;
	}

	.toggle_btn span {
		display: block;
		position: absolute;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #333;
		border-radius: 4px;
		transition: all .5s;
	}

	.toggle_btn span:nth-child(1) {
		top: 4px;
	}

	.toggle_btn span:nth-child(2) {
		top: 14px;
	}

	.toggle_btn span:nth-child(3) {
		bottom: 4px;
	}

	.open .toggle_btn span {
		background-color: #fff;
	}

	.open .toggle_btn span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-315deg);
	}

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

	.open .toggle_btn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(315deg);
	}

	#mask {
		display: none;
		transition: all .5s;
	}

	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: .8;
		z-index: 10;
		cursor: pointer;
	}


	#header .tel {
		margin-right: 70px;
	}


	#header ul {
		display: block;
		margin-top: 30px;
	}

	#header li.for-tb {
		display: block;
	}

	#header li a {
		font-size: 1.8rem;
	}

	/* mv */



	#mv img {
		height: 48vh;

	}


	#mv h2 {
		font-size: 3.5vw;
	}

	#mv p {
		font-size: 2.1vw;
	}

	#mv .mv-text {
		height: 60%;
	}

	/* #mv .mv2::before {
		height: 62%;
	}

	#mv .mv4::after {
		top: 70.8%;
	} */

	/* introduction */

	#introduction {
		margin-bottom: 80px;
	}

	#introduction .underline {
		font-size: 2.8vw;
	}


	#introduction .catch h3 {
		margin-bottom: 30px;
	}

	#introduction .catch-text {
		margin-bottom: 0px;
	}


	#introduction .btn-link li {
		font-size: 2.2vw;
	}

	/* service */

	#service .item-flexbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
	}

	#service .service-item {
		width: 50%;
		margin-bottom: 80px;
	}


	#service .service-item:last-of-type {
		margin-bottom: 20px;
	}

	#service .service-item p {
		font-size: 2vw;
		width: 83%;
		border-radius: 5px;
	}

	#service .service-item p span {
		font-size: 2.2vw;
	}

	#service .service-link li {
		margin-left: 13px;
	}

	#service .service-link li a {
		font-size: 2.5vw;
		padding: .5rem .3rem;
	}


	/* service-powerboard */
	#service-powerboard .service-item {
		margin-bottom: 30px;
	}


	/* features */
	#features .feature-item p {
		line-height: 1.7;
		font-size: 2vw;
	}

	/* about */
	#about .for-pc {
		display: none;
	}

	#about .for-tb {
		display: block;
	}

	#about .message {
		display: block;
		margin-bottom: 30px;
	}

	#about .text {
		width: auto;
	}

	#about .message .img {
		float: right;
		margin: 20px 20px 0;
	}

	#about .owner-name span {
		font-size: 2.6rem;
	}

	#about table th {
		padding-bottom: 15px;
	}

	#about table td {
		padding-bottom: 15px;
	}

	/* contact */
	#contact span.en {
		font-size: 2.4rem;
	}

	#contact .tel-number p {
		font-size: 2.4rem;
	}

	/* footer */
	#footer .footer-logo img {
		width: 28%;
		margin: 15px 0;
	}

	#footer p.copyright {
		font-size: 1.5vw;
	}

}







/* スマホ用メディアクエリ */
@media screen and (max-width: 767px) {
	/* スクリーンサイズが767px以下の場合に適用 */

	/* 767～360の間のデザインを調整 */

	/* 共通事項 */

	.rainbow-bar {
		background: linear-gradient(to right, var(--blue), var(--alumi), var(--navy), var(--alumi), var(--blue), var(--alumi), var(--gold), var(--alumi), var(--blue), var(--alumi)) 0 / 200%;
		height: 5px;
		animation: 7s rainbow-bar linear infinite;
	}

	.section-title span.ja {
		font-size: 3rem;
	}

	.section-title span.en {
		font-size: 1.8rem;
	}

	.section-title img {
		width: 15%;
	}

	.toggle_btn {
		top: 13px;
		right: 20px;
	}

	/* header */
	#header {
		display: block;
	}

	#header h1 {
		width: 60%;
		margin-bottom: 5px;
	}

	#header .tel {
		display: none;
	}

	#header .tel-forsp {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		background-color: var(--blue);
		margin: 0 calc(50% - 50vw);
		width: 100vw;
		padding: 3px 5px;
	}

	#header .tel-text {
		color: var(--white);
	}

	#header .tel-forsp p {
		font-size: 1.4rem;
		/* color: var(--white); */
	}

	#header .tel-numberbox {
		width: 100%;
		display: flex;
		padding: 0;
		margin: 0;
		color: var(--blue);
	}

	#header .tel-numberbox {
		padding: 0 10px;

	}

	/* mv */
	#mv h2 {
		font-size: 5.5vw;
	}

	#mv p {
		font-size: 3.5vw;
	}

	#mv .mv-text {
		width: 70%;
		height: 50%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	/* introduction */

	#introduction {
		margin-bottom: 60px;
	}

	#introduction h3 {
		font-size: 1.6rem;
	}

	#introduction p {
		font-size: 1.4rem;
		margin-bottom: 20px;
	}

	#introduction .underline {
		font-size: 1.8rem;
	}

	#introduction .message p {
		font-size: 3.5vw;
	}

	#introduction .catch p {
		font-size: 1rem;
	}

	#introduction .catch h3 {
		margin-bottom: 10px;
		font-size: 1rem;
	}


	#introduction .catch h3::before {
		left: 0;
	}

	#introduction .catch h3::after {
		right: 0;
	}

	#introduction .btn-link ul {
		flex-wrap: wrap;
	}

	#introduction .btn-link li {
		width: 150px;
		height: 150px;
		font-size: 1.8rem;
		line-height: 150px;
		margin: 10px;
	}

	/* service */
	#service .service-link ul {
		flex-wrap: wrap;
		justify-content: space-between;

	}

	#service .service-link li {
		width: 46%;
		margin: 0 0 15px 0;
	}

	#service .service-link li a {
		width: 100%;
		font-size: 3vw;
	}


	.service-title span.ja {
		font-size: 2rem;
	}

	.service-description {
		font-size: 1.4rem;
		margin-bottom: 30px;
	}


	#service .item-flexbox {
		flex-wrap: nowrap;
		display: block;
	}


	#service .service-item {
		margin: 0 auto;
		padding: 0;
		width: 80%;
		position: relative;
		margin-bottom: 25px;
	}

	#service .service-item p {
		font-size: 1.2rem;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 5;
		top: 83%;
		width: auto;
		background-color: rgba(255, 196, 0, .7);
		color: var(--black);
		height: auto;
		padding: 0 2%;
		text-align: center;
	}

	#service .service-item p span {
		font-size: 1.2rem;
		font-weight: bold;
	}



	/* feature */


	#features .feature-number {
		font-size: 1.2rem;
		width: 20%;
		height: 100%;
		line-height: 1;
		padding-left: 5px;
	}

	#features .feature-number span {
		display: block;
		text-align: right;
		font-size: 1.4rem;
		padding-right: 10px;
		padding-top: 3px;
	}

	#features .feature-title {
		font-size: 1.8rem;
		padding-left: 30px;
	}

	#features .feature-title.title2 {
		padding-left: 40px;
	}

	#features .feature-title.title3 {
		padding-left: 65px;
	}

	#features .feature-item {
		display: block;
	}

	#features .feature-item p {
		font-size: 1.4rem;
		width: 100%;
	}

	#features .feature-item img {
		width: 100%;
		height: 150px;
		object-fit: cover;
	}

	/* about */


	#about .message h3 {
		font-size: 2.2rem;
	}



	#about .text p {
		font-size: 1.6rem;
	}

	#about p.owner-name {
		text-align: right;
	}

	#about p.owner-name span {
		font-size: 2.2rem;
	}


	#about .profile table {
		font-size: 1.6rem;
	}

	#about table th,
	#about table td {
		padding-bottom: 10px;
	}

	/* contact */
	#contact span.ja {
		font-size: 3rem;
	}

	#contact span.en {
		font-size: 2rem;
	}

	#contact .form-link {
		padding: 12px 20px;
	}

	/* footer */
	#footer .footer-logo img {
		width: 40%;
		margin: 10px 0;
	}

	#footer p.copyright {
		font-size: 1.2rem;
	}
}