@charset "UTF-8";

/* ===================================================================
CSS information
 file name  :  style.css
 style info : LPスタイル
=================================================================== */
body {
	background-color: #fff;
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",'Noto Sans JP', sans-serif, "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-feature-settings: "palt";
	overflow-x: hidden;
  }
.content {
	width: 100%;
	min-width: 1040px;
	overflow-x: hidden;
	max-width: 100%;
	margin: 0 auto 10%;
	text-align: center;
}

.cv {
	position: relative;
	background: #000;
}

.btn_box {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	max-width: 809px;
}

@media screen and (min-width:800px) and (max-width:1019px) {
	.btn_box {
	bottom: 5em;
}
}
@media screen and (min-width : 1020px) {
	.btn_box {
	top: 500px;
}
}
.btn_box img {
	-webkit-animation: move_btn 2s ease-in infinite;
	animation: move_btn 2s ease-in infinite;
}

/* ------ move_btn_anime ------ */
@keyframes move_btn {

	20%,
	53%,
	80%,
	from,
	to {
		transform: translate3d(0, 0, 0);
		animation-timing-function: cubic-bezier(.215, .61, .355, 1);
	}

	40%,
	43% {
		transform: translate3d(0, -10px, 0);
		animation-timing-function: cubic-bezier(.755, .050, .855, .060);
	}

	70% {
		transform: translate3d(0, -4px, 0);
		animation-timing-function: cubic-bezier(.755, .050, .855, .060);
	}

	90% {
		transform: translate3d(0, 0, 0);
	}
}

.fv{
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/fv_bg.png) no-repeat top center, url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/fv_bg_02.png) repeat top center/ auto 700px;
}

.renewal {
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/renewal_bg.png) no-repeat bottom center, #000;
}

.toppa{
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/toppa_bg.png) no-repeat top center, #dee3ea;
}

.nayami {
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/nayami_bg_02.png) no-repeat bottom 11.7% center, url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/nayami_bg.png) no-repeat top 69.7% center, #000;
}

.point {
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/point_bg.png) no-repeat top center, #000;
}

.column {
	background: #000;
}

.kodawari{
	background: #d4deda;
}

.qa_wrap{
	max-width: 1040px;
	margin: 0 auto;
}
.accordion-005:not([open]) {
	margin-bottom: 7px;
}

.accordion-005 summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	font-weight: 600;
	cursor: pointer;
}

.accordion-005 summary::-webkit-details-marker {
	display: none;
}

.accordion-005 summary::after {
	transform: translateY(0) rotate(180deg);
	background: url(/client_info/BATHCLIN_SHOP/view/userweb/hatsutono2023/img/pc/arrow.png) no-repeat center/100%;
	width: 100%;
	max-width: 31px;
	height: 100%;
	max-height: 31px;
	content: '';
	transition: transform .3s;
	position: absolute;
	right: 4.3%;
	top: 0;
}

.accordion-005[open] summary::after {
	transform: rotate(0deg);
}

.accordion-005 p {
	transform: translateY(-10px);
	opacity: 0;
	margin: 0;
	padding: 0 4% 6%;
	color: #000;
	transition: transform .5s, opacity .5s;
}

.accordion-005[open] p {
	transform: none;
	opacity: 1;
	text-align: left;
	font-size: 21px;
	transition: transform .3s;
	line-height: 1.7em;
}

.qa_sub {
	width: 100%;
	max-width: 111px;
	margin: 0 auto 2.2% 4%;
}
.iyaku{
	background: #000;
}

@media only screen and (min-width: 2000px) {
	.toppa {
		background-size: 100% 2409px;
	}
}


/* Floating banner */

#sp-fixed-menu{
  position: fixed;
  width: 90%;
  bottom: 0px;
  font-size: 0;
  z-index: 99;
}

#sp-fixed-menu ul{
  display: flex;
  list-style: none;
  padding:0;
  margin:0;
  width:100%;
}

#sp-fixed-menu li{
  justify-content: center;
  align-items: center;
  width: 50%;
  padding:0;
  margin:0;
  font-size: 14px;
}
#sp-fixed-menu li img {
  width: 90%;
  
}

@media screen and (min-width: 769px) {
  #sp-fixed-menu{
   width: 75%; 
  }
  #sp-fixed-menu li:nth-child(2) {
    margin-left: -50px; 
  }
}

@media screen and (min-width: 1000px) {
  #sp-fixed-menu ul {
    margin: 0 0 0 10%;
  }
}