@charset "utf-8";
/* CSS Document */
/*ヘッダー*/
html {
  scroll-behavior: smooth;
}
body {
	color: #1D1C1C;
}
header {
	position: absolute;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
}
section img {
	width: 100%;
}

/*ヘッダーA:サイト名*/
.headA {
	display:inline-block;
	text-decoration: none;
}
.headA img {
	height:50px;
	margin-left: 10px;
}
/*ヘッダーB:ナビゲーションメニュー*/
.headB {
	background-color: #fff;
	opacity: 0.9;
}
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.headB a {
	display: block;
	padding: 15px;
	color: #754C24;
	font-size: 15px;
	font-weight: bold;
	text-shadow: 1px 1px 5px #fff;
	text-decoration: none;
}
.headB a:hover {
	background-color: rgba(140,98,57,0.6);
	border-radius: 50%;
	color: #fff;
}
/*基本設定：ページ全体*/
body {
	font-family:'メイリオ'
		'Hiraguno Kaku Gothic Pro',
		sans-serif;
	color: #131313;
}
.conA,.conA_1,.conA_2,.conA_3,.conA_4,.conA_5,.conA_6 {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	background-position: center;
	background-size: cover;
	text-align: center;
	color: #fff;
	margin-top: 60px;

}
/*コンテンツA:ヒーローイメージ*/
.conA {
	background-image:url("../images/main_visual.jpg");
	color: #2e2e2e;
	}
.conA_1 {
	background-image: url("../images/main_kitchin.jpg");
	background-size: 100% 100%;
}
.conA_2 {
	background-image: url("../images/main_bath.jpg");
	background-size: 100% 100%;
}
.conA_3 {
	background-image: url("../images/main_senmen.jpg");
	background-size: 100% 100%;
}
.conA_4 {
	background-image: url("../images/main_toire.jpg");
	background-size: 100% 100%;
}
.conA_5 {
	background-image: url("../images/otoiawase_main.jpg-100.jpg");
	background-size: 100% 100%;
}
.conA_6 {
	background-image: url("../images/main_thanks.jpg");
}
.conA .rgba {
	background-color: rgba(225,225,225,0.8);
	padding: 20px;
	width: 62vw;
	height: 18vh;
}

.conA_1 .rgba {
	background-color: rgba(0,0,0,0.3);
	padding: 30px 10px 0px;
	width: 60vw;
	height: 13vh;
}
.conA_2 .rgba {
	background-color: rgba(0,0,0,0.3);
	padding: 30px 10px 0px;
	width: 60vw;
	height: 13vh;
}
.conA_3 .rgba {
	background-color: rgba(0,0,0,0.3);
	padding: 30px 5px 0px ;
	width: 60vw;
	height: 11vh;
}
.conA_4 .rgba {
	background-color: rgba(0,0,0,0.3);
	padding: 30px 10px 0px;
	width: 60vw;
	height: 13vh;
}
.conA h1 {
	font-size: 2.2rem;
	color: #498C6A;
	text-shadow: 2px 2px 3px #707070;
}
.conA p {
	line-height: 1.1;
	font-size: 0.6rem;
	font-weight: bold;
}
h1 {
	font-size: 1.5rem;
}
h2,h3,h4,p {
	text-align: center;
}
h2 {
	font-size: 1.5rem;
	padding-top: 25px;
}
h3 {
	font-size: 1.3rem;
	text-shadow: 5px 3px 10px #fff;
	padding-top: 25px;
}
h4 {
	margin-top: 30px;
	font-size: 1rem;
}
p {
	font-size: 0.9rem;
	line-height: 1.5;
	width: 85%;
	display: block;
	margin: 10px auto;
}
/*////////////////////////////*/
/*セクション１：ご挨拶*/
.aisatu img {
	width: 70%;
	display: block;
	margin: 0 auto;
}
.dai {
	width: 80%;
	height: 10%;
	font-family: 'Nunito', sans-serif;
	color: inherit;
	text-align: center;
	text-shadow: 2px 2px 2px #fff;
	background: linear-gradient(#ffd700,#fff);
	margin: 30px auto;
	padding-top: 15px;
}
span {
	font-weight: bold;
}
/*///////////////////////////////////*/
/*水回り*/
#mizumawari a:hover {
	opacity: 0.7;
}
#mizumawari img {
	box-shadow: 4px 4px 5px #808080; 
}
.yoko div {
	margin: 20px 5px;
}
/*///////////////////////////////////*/
/*セクション４：ご利用の流れ*/
.step {
	background-color: rgba(55,167,111,0.6);
	border-radius: 20px;
	width: 90%;
	display: block;
	margin: 0 auto;
	padding-bottom: 10px;
}
.step h4 {
	border-bottom: dotted #ffd700 4px;
	padding-top: 10px;
	margin:30px 30px 10px;
}
.step img {
	width: 70%;
	display: block;
	margin: 0 auto;
}

/*//////////////////////////////////*/
/*キッチンページ*/

article img {
	width: 80%;
	display: block;
	margin: 10px auto;
}
.shiera img {
	width: 50%;
	position: absolute;
	margin-left: 10px;
	margin-top: 30px;
}
.shiera h2 {
	position: relative;
	text-align: left;
	padding: 9vh 10vw; 
}
.kitchen h3 {
	font-size: 1.1rem;
	border-bottom: dotted #ffd700 4px;
	margin:30px 30px 0;
}

#tennji img {
	width: 100%;
	margin: 0;
}


/*////////////バスページ//////////////////*/
.point {
	width: 70%;
	margin: 0 auto;
}

/*///////////化粧台ページ/////////////////*/
.conA_3 h1 {
	font-size: 1.1rem;
	line-height: 1;
}

/*///////////コンタクトページ/////////////////////*/
.contact_visual {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 400px;
	background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),url("../images/contact.jpg");
	background-position: center;
	background-size: cover;
	text-align: center;
}
.contact_visual img {
	width: 15%;
	vertical-align: bottom;
}

.chu-i-h2 {
	color: #615656;
	width: 85%;
	margin: 20px auto;
	font-size: 1rem;
	font-weight: bold;
}
.chu-i {
	color: #615656;
	width: 85%;
	margin: 20px auto;
	text-align: start;
	
}
input {
	display: block;
	width: 90%;
	height: 40px;
	padding-left: 5px;
	font-size: 0.9rem;
}
textarea {
	display: block;
	width: 90%;
	height: 250px;
	padding-left: 5px;
	padding-top: 10px;
	font-size: 1.0rem;
	font-weight: 300;
}
label {
	margin: 0 auto;
}
.soushin {
	display: block;
	background-color: #498C6A;
	color: #fff;
	font-size: 1.1rem;
}

/*///////////サンクスページ//////////////////*/

.thanks_1 {
	font-size: 1.2rem;
	margin-bottom: 30px;
}
.thanks_p {
	color:#615656;
	font-size: 0.9rem;
	max-width: 90%;
	margin: 0 auto;
	text-align: center;
	line-height: 30px;
}
.insta_btn3 {/*ボタンの下地*/
  color: #FFF;/*文字・アイコン色*/
  border-radius: 14px;/*角丸に*/
  position: relative;
  display: block;
  height: 120px;/*高さ*/
  width: 120px;/*幅*/
  text-align: center;/*中身を中央寄せ*/
  padding-top: 12px;/*上側との余白*/
  box-sizing: border-box;
  font-size: 19px;/*文字のサイズ*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
}

.insta_btn3:before{/*グラデーション②*/
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.Instagram {
	width: 120px;
	margin: 0 auto;
	padding-top: 40px;
}
.insta_btn3 div {
  position: relative;
}

.insta_btn3 .fa-instagram {
    font-size: 70px;/*アイコンサイズ*/
    position: relative;
    display:block;
    transition: .5s
}

.insta_btn3 .fa-instagram:hover {/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
.modoru {
	display: block;
	text-align: center;
	font-size: 1.2rem;
	margin-top: 20px;
}
.modoru a {
	text-decoration: none;
	color: #615656;
}
.modoru a:hover {
	background-color: #615656;
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
	opacity: 0.8;
}


/*//////////// フッター /////////////////*/
footer {
	background-color: #f2d58a;
	text-align: center;
	font-weight: bold;
	color: inherit;
	border-top:  solid 1px #fff;
	padding: 5px 0;
}
footer p {
	font-size: 0.3rem;
}

/*////////////メディアクエリ/////////////////////////////*/
@media (min-width:768px) {
	/* 大きい画面の設定：ヘッダー */
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		margin-left: auto;
		margin-right: auto;
	}
	header {
		position: fixed;
		background-color: rgba(255,255,255,0.9);
		width: 100%;
	}
	.headA img {
		height:90px;	
	}
	.headB ul {
		display: flex;
	}
	.headA img {
		height: 80px;
	}
	.headC {
		display: none;
	}
	.headB {
		display: block !important;
		background-color: rgba(255,255,255,0.1);
	}
}
/*ヘッダーC:トグルボタン*/
@media (max-width:768px){
	/*小さい画面の設定*/
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	header .container {
		background-color: rgba(255,255,255,0.6);
	}
	.headC {
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 37px;
		color: #37A76F;
		opacity: 0.7;
		cursor: pointer;
	}
	.headC:hover {
		opacity: 0.3;
	}
	.headB {
		display: none;
	}
}

	/*大きい画面の設定*/
/*/////////////メイン/////////////////////////*/
@media (min-width:769px) {
	.conA,.conA_1,.conA_2,.conA_3,.conA_4,.conA_5 {
		min-height: 600px;
		margin-top: 97px;
		width: 100%;
	}
	.conA_6 {
		min-height: 400px;
		margin-top: 97px;
		width: 100%;
	}
	.conA h1 {
		font-size: 4rem;
	}
	 h1{
		font-size: 4rem;
		padding-top: 30px;
	}
	.conA p {
		font-size: 20px;
	}
	.conA .rgba {
		width: 50vw;
		height: 200px;
		padding-top: 80px;
	}
	.conA_1 .rgba {
		width: 60vw;
		height: 200px;
		padding-top: 80px;
	}
	.conA_2 .rgba {
		width: 60vw;
		height: 200px;
		padding-top: 80px;
	}
	.conA_3 .rgba {
		width: 60vw;
		height: 200px;
		padding-top: 80px;
	}
	.conA_4 .rgba {
		width: 60vw;
		height: 200px;
		padding-top: 80px;
	}
	p {
		font-size: 1rem;
	}
	h4 {
		margin-top: 50px;
		margin-bottom: 30px;
	}
	.point p {
		font-size: 0.8rem;
	}
	
	
/*////////////INDEXページ////////////////*/

	.dai {
		width: 60%;
		margin-top: 60px;
		margin-bottom: 80px;
	}
	section,.tennji {
		width: 80%;
		margin: 0 auto;
		padding-bottom: 60px;
	}
	.yoko {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#mizumawari div {
		margin: 5px;
	}
	.yoko div {
		flex: 1;
	}
	.step img {
		width: 40%;
	}
	.step {
		width: 70%;
	}
	#tennji img {
		width: 100%;
	}
	
/*////////////キッチンページ/////////////////////*/
	.shiera img {
		width: 30%;
		
	}
	.shiera h2 {
		font-size: 2.5rem;
		padding: 15vh 7vw;
	}
	.kitchen {
		position: relative;
		margin-top: 3vh;
	}
	.kitchen img {
		width: 70%;
		margin: -2vw 0 0 20vw; 
	}
	.box {
		background-color: #B1DDC7;
		position: absolute;
		width: 25vw;
		height: 160vh;
		margin-top: 10vh;
	}
	.honbun {
		width: 70%;
		margin-left: 15vw;
	}
	.toiawase {
		width: 40vw;
		margin: 10vh auto 20vh;
	}
	
/*////////////////バスページ//////////////////////////*/
	.box_b {
		background-color: #85C0E2;
		opacity: 0.6;
		position: absolute;
		width: 25vw;
		height: 160vh;
		margin-top: 10vh;
	}
	.point {
		display: flex;
		width: 70%;
	}
	.point div {
		flex: 1;
	}
	.point img {
		display: block;
		margin: 0 auto;
	}
	
	
/*///////////////洗面化粧台ページ///////////////////////*/
	.conA_3 h1 {
		font-size: 3rem;
	}
	
	.box_v {
		background-color: #D2C2B2;
		opacity: 0.6;
		position: absolute;
		width: 25vw;
		height: 140vh;
		margin-top: 10vh;		
	}
/*///////////////トイレページ////////////////////////*/
	.box_t {
		background-color: #C4C4C4;
		opacity: 0.6;
		position: absolute;
		width: 25vw;
		height: 200vh;
		margin-top: 10vh;		
	}	
	
/*///////////////コンタクトページ///////////////////////*/
	.chu-i-h2 {
		width: 600px;
	}
	.chu-i {
		margin-top: 40px;
	}
	form {
		width: 700px;
		margin: 50px auto;
	}
	input {
		width: 400px;
	}
	txstarea {
		height: 500px;
	}
	.soushin {
		margin-left: 70px;
	}
}
/* パソコン・スマホ共通のCSS */
#PageTopBtn img{
    position: fixed; /*ボタンの配置場所を固定*/
	width: 15%;
    bottom: 0px; /*下からのボタンの配置場所を指定*/
    right: 0px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    display: block; /*配置の調整*/
    text-decoration: none; /*文字の下線を消す*/
    color: #fff; /*文字の色*/
    outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
    opacity: 0.9; /*マウスオーバー時の背景色*/
 }

/* パソコンで表示する場合のCSS */
@media (min-width: 768px) {
#PageTopBtn img{
	width: 10%;
    bottom: 10px; /*下からのボタンの配置場所を指定*/
    right: 10px; /*右からのボタンの配置場所を指定*/
}
#PageTopBtn a {
    width: 15%; /*ボタンの幅*/
    height: 15px; /*ボタンの高さ*/
    padding: 25px 0; /*文字の配置場所の調整*/
}
}

/* スマホで表示する場合のCSS */
@media (max-width: 767px) {
#PageTopBtn img{
    width: 120px;
}
}