@charset "utf-8";

/* --------------------------------------------- */
/*	common
/* --------------------------------------------- */
body {
	background:none;
}

@media only screen and (min-width:960px){ /* PC */
	.sec-inner {
		max-width:1000px;
	}
}
/* --------------------------------------------- */
/*	header
/* --------------------------------------------- */
header {
	background:url(../img/header_main.jpg) center center no-repeat #d7eef5;
	background-size:cover;
	padding-bottom:35vh;
}

.header-logo {
	padding:15px 0;
}

@media only screen and (min-width:960px){ /* PC */
	header {
		padding-bottom:100vh;
	}
	.header-inner {
		max-width:1600px;
	}
	.header-nav {
		padding:0 7%;
	}
	.header-logo {
		max-width:400px;
		position:relative;
		top:20px;
	}
}

/* --------------------------------------------- */
/*	contents
/* --------------------------------------------- */
.headline {
	font-size:1.8rem;
}

.sub-tit {
	color:#54b2e0;
	font-size:1.2rem;
	font-weight:400;
	display:block;
}

@media only screen and (min-width:960px){ /* PC */
	.headline {
		font-size:4rem;
	}
}

/* sec01 キャッチコピー
/* --------------------------------------------- */
.catch {
	margin-top:50px;
} 

.catch-wrap {
	animation-name:spnavDelay;
	animation-duration:1s;
	animation-delay:.4s;
	animation-fill-mode:forwards;
	opacity:0;
}

.catch .headline {
	margin-bottom:40px;
} 

.catch .headline img {
	display:inline;
	height:1.6rem;
	margin-bottom:2px;
	margin-right:10px;
	width:auto;
}

.catch p {
	width:19em;
	margin:auto;
	margin-bottom:20px;
} 

.catch-before,
.catch-after {
	padding:0 5%;
} 

.catch-before {
	margin-top:-20px;
	margin-bottom:50px;
} 

.catch-after {
	margin-top:40px;
	margin-bottom:-20px;
} 

@media only screen and (min-width:960px){ /* PC */
	.catch .headline {
		font-size:3.5rem;
	}
	.catch .headline img {
		height:3rem;
	}
	.catch .sec-inner {
		animation-delay:.8s;
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		justify-content:space-between;
		margin:auto;
		padding:0;
		width:70%;
	}
	.catch-text {
		position:relative;
		top:200px;
	} 
	.catch-before,
	.catch-after {
		margin:0;
		padding:0;
		width:50%;
	} 
}

/* sec02 リフォームメニュー
/* --------------------------------------------- */
.service {
	position:relative;
} 

.service .sec-inner {
	margin:0;
	padding:60px 0 0;
} 

.service h2 {
	margin:auto;
	margin-bottom:40px;
}

.service h3 {
	color:#0080bb;
	font-size:1.6rem;
	writing-mode:vertical-rl;
	width:2em;
}

.serv-text {
	border-bottom:1px dotted #0080bb;
	margin:0 3% 50px;
	padding-bottom:20px;
}

.serv-text p {
	padding:0 20px;
}

.STD-list {
	display:flex;
	flex-wrap:wrap;
	justify-content:flex-end;
	margin-bottom:60px;
	width:100%;
}

.STD-list details {
	width:85%;
}

.STD-list summary {
	background:#0080bb;
	border:none;
	color:#fff;
	font-style:700;
	text-align:center;
	display:block;
	padding:10px 0;
	grid-template-columns:1fr;
	position:relative;
	width:100%;
	&::-webkit-details-marker {
		display: none;
	}
}

.icon {
  display: block;
  position:absolute;
  right:20px;
  top:50%;
  -webkit-transform:translate-Y(-50%);
  transform:translate-Y(-50%);
  width: 15px;
  transform-origin: center 43%;
  transition: transform 0.4s;
  /* アイコンのバーのスタイル */
  &::before, &::after {
    content: "";
    position: absolute;
    display: block;
    width: 9px;
    height: 2px;
    background-color: #fff;
  }
  &::before {
    left: 0;
    transform: rotate(45deg);
  }
  &::after {
    right: 0;
    transform: rotate(-45deg);
  }
}
/* アコーディオンが開いた時のスタイル */
details[open] .icon {
  transform: rotate(180deg);
}

.STD-list div {
	background:#fafafa;
	padding:10px 5%;
}

.STD-list div p {
	margin:0;
}

.service-wrap {
	display:flex;
	align-items:flex-start;
	flex-wrap:wrap;
	justify-content:space-between;
}

.swiper-bath,
.swiper-washbasin,
.swiper-toilet,
.swiper-kitchen {
	width:85%;
	margin-bottom:20px;
	position:relative;
}

.service-wrap img {
	width:100%;
	height:50vh;
}

@media only screen and (min-width:960px){ /* PC */
	.service {
		top:50px;
		margin-bottom:60px;
	}
	.serv-text {
		margin:0 0 50px;
	}
	.serv-text p {
		text-align:center;
	}
	.service-wrap .swiper-slide {
		width:50%;
	}
	.swiper-bath,
	.swiper-washbasin,
	.swiper-toilet,
	.swiper-kitchen {
		width:90%;
	}
	.service h3 {
		font-size:1.8em;
	}
	.STD-list details {
		margin-top:5px;
		width:30%;
	}
}

/* sec03 セットプラン
/* --------------------------------------------- */
.plan .swiper {
	margin-bottom:50px;
} 

.plan .sec-inner {
	margin: 0 calc(50% - 50vw);
	width:100%;
} 

.plan h3 {
	color:#0080bb;
	font-size:1.5rem;
} 

.plan h3 {
	color:#0080bb;
	font-size:1.5rem;
} 

.plan h3::before,
.plan h3::after {
	content:"\f715";
	font-family:"Font Awesome 6 Free";
	font-size:1.3rem;
	font-weight:900;
	margin-right:10px;
}
.plan h3::after {
	display:inline-block;
	margin-left:8px;
	margin-right:0;
	transform:scaleX(-0.9);
}
@media only screen and (min-width:960px){ /* PC */
}

/* swiper */
.swiper-box {
	margin-top:20px;
	position:relative;
}

.swiper img {
	border-radius:10px;
	object-fit:cover;
}

.swiper-controller {
	margin:0;
}

/* ページネーション */
.swiper-pagination {
	text-align:right !important;
}

.swiper-pagination-bullet {
	transition:all 0.5s ease;
	background-color:#0080bb;
	border-radius:0 !important;
	height:2px !important;
	width:6vw !important;
}

.swiper-pagination-bullet-active {
	width:8vw !important;
}

/* やじるし */
.swiper-button-prev,
.swiper-button-next {
	background:rgb(33,138,180,.7);
	border-radius:25px;
	width:25px !important;
	height:25px !important;
	line-height:30px;
	top: var(--swiper-navigation-top-offset, 53%) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	color:#fff;
	font-size:1.1rem !important;
	font-weight:700;
	line-height:1;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
	left: var(--swiper-navigation-sides-offset, -12px) !important;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
	right: var(--swiper-navigation-sides-offset, -12px) !important;
}

@media only screen and (min-width:960px){ /* PC */
	.swiper-pagination {
		bottom:-10px !important;
	}
}


/* sec04 お知らせ
/* --------------------------------------------- */
.info-more {
	background:#0080bb;
	color:#fff;
	display:block;
	text-align:center;
	margin:auto;
	margin-top:20px;
	padding:10px 20px;
	position:relative;
	width:80%;
}

.info-more::after {
	content:"\f061";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	position:absolute;
	right:5%;
	transition:all .5s;
}

@media only screen and (min-width:960px){ /* PC */
	.info .sec-inner {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.info-list-wrapper {
		margin:0;
		width:93% !important;
	}
	.info-list:last-child {
		margin:0;
	}
	.info-more {
		display:inline-block;
		writing-mode:vertical-rl;
		margin:0;
		padding:20px 0;
		width:5%;
	}
	.info-more span {
		position:absolute;
		top:20px;
		left:50%;
		-webkit-transform:translateX(-50%);
		transform:translateX(-50%);
	}
	.info-more::after {
		content:"\f063";
		font-family:"Font Awesome 6 Free";
		font-weight:900;
		position:absolute;
		bottom:20px;
		-webkit-transform:translateX(-50%);
		transform:translateX(-50%);
		transition:all .5s;
	}
	.info-more:hover::after {
		bottom:15px;
	}
}