@charset "utf-8";

body .sp-item {
	display: none;
}

body .pc-item {
  display: block;
}

@media screen and (max-width: 640px) {
	body {
		min-width: inherit;
		height:100%;
	}

	body .sp-item {
		display: block;
	}

	body .pc-item {
		display: none;
	}

	body .sp-item img {
		width:100%;
	}
}

/* ----------------------------------------------------
    共通
---------------------------------------------------- */
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
	font-weight: 300;
	line-height: 1.5;
	font-size: 20px;
	color:#333;
	text-align: center;
	overflow-x: hidden;
	max-width: 1024px;
	margin: 0 auto;
	background-image: url('../images/bg_main.webp'); /* 背景画像を指定 */
  background-repeat: no-repeat; /* 背景画像を繰り返さない */
  background-size: cover; /* 背景画像を画面全体に拡大/縮小 */
  background-attachment: fixed; /* 背景画像を固定 */
  background-position: center; /* 背景画像を中央に配置 */
	box-shadow: 0px 0px 15px -5px #777777;
}

img {
	margin: 0 auto;
	width: 100%;
}

video {
	width: 100%;
}

p {
	font-feature-settings: "palt";
}

.sentence {
	margin-top: 40px;
}

.sentence p {
	margin-top: 40px;
}

.sentence p:first-of-type {
	margin-top: 0;
}

.inner {
	width: 724px;
	margin: 0 auto;
}

.marker {
	color: #000;
	background: rgb(255,255,100);
	background: linear-gradient(0deg, rgba(255,255,100,1) 70%, rgba(255,255,255,0) 70%);
	padding-bottom: 3px;
	font-weight: bold;
}

.bold {
	font-weight: 700;
}

@media screen and (max-width: 640px) {
	img {
		max-width: 100%;
	}

	body {
		width: 100%;
	}

	.inner {
		width: 94%;
	}
}

/* ----------------------------------------------------
    CTA
---------------------------------------------------- */
.cta {
	position: relative;
	padding: 60px 0;
	background-color: #fff;
}
.cta > img {
	width: 944px;
}
.btn {
	transition: all .2s;
	position: absolute;
	width: 424px;
	bottom: 206px;
	right: 78px;
}
.btn:hover {
	opacity: 0.85;
	cursor: pointer;
}

@media screen and (max-width: 640px) {
	.btn {
		width: 92%;
		bottom: 17.5%;
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ----------------------------------------------------
    header
---------------------------------------------------- */
header {
	margin-top: 130px;
}

@media screen and (max-width: 640px) {
	header {
		margin-top: 16vw;
	}
}


/* ----------------------------------------------------
    main
---------------------------------------------------- */
.sec015 {
	position: relative;
}
.limit {
	position: absolute;
	bottom: 148px;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 500;
	font-size: 24px;
	color: #fff;
}
.count {
	position: absolute;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 39px;
	font-weight: 400;
	width: 944px;
}
.timer-time {
	display: inline-block;
}

@media screen and (max-width: 640px) {
	.limit {
		bottom: 0.5%;
		font-size: 4.25vw;
		width: 92%;
	}
	.count {
		width: 92%;
		font-size: 8.5vw;
		bottom: 7.5%;
		line-height: 1.6;
	}
	.timer-time {
		display: flex;
		justify-content: center;
	}
}
.sec09 {
	background-color: #f3f3f3;
	padding: 80px 0;
}
.sec09-title {
	width: 356px;
}
.swiper {
	margin: 50px auto 0;
	width: 944px;
	position: relative;
	padding-bottom: 20px;
}
.swiper-slide {
  height: auto;
}
/* ナビゲーションボタンのカスタマイズ */
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
  color: #219c85;
}
/* ページネーションのカスタマイズ */
.swiper .swiper-pagination {
  bottom: 0;
}
.swiper .swiper-pagination-bullet {
  background: #219c85;
}
.swiper .swiper-pagination-bullet-active {
  background: #219c85;
}
@media screen and (max-width: 640px) {
	.swiper {
		width: 92%;
		margin-top: 20px;
	}
	.scroll {
		width: 85%;
		margin: 20px auto 0;
	}
}
.sec13 {
	padding: 100px 0;
	background-color: #f3f3f3;
}
.sec13-ttl {
	width: 437.332px;
}
.accordion {
	margin: 10px auto 0;
	overflow: hidden;
	color: #333;
}
.accordion:first-of-type {
	margin-top: 60px;
}
.accordion-item {
	margin-top: 10px;
}
.accordion-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 20px 30px 20px 40px;
	box-sizing: border-box;
	background: url(../images/bg-shop.webp) no-repeat center center / cover;
	color: #fff;
	font-size: 32px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}
.accordion-icon {
	font-size: 16px;
	transition: transform 0.3s ease;
	width: 46.3988px;
	height: 23.9033px;
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	padding: 0 30px;
	background-color: transparent;
	transition: max-height 0.5s ease, padding 0.5s ease;
	text-align: center;
}
.accordion-header.active + .accordion-content {
	padding: 30px 30px 60px;
}
.accordion-header.active .accordion-icon {
	transform: rotate(180deg);
}
.branch-image {
	display: flex;
	justify-content: space-between;
}
.branch-picture,
.branch-map {
	width: 320.5397px;
}
iframe {
	width: 100%;
  aspect-ratio: calc(320.5397 / 207.5511);
}
.branch-info {
	margin-top: 30px;
	text-align: left;
}
.address,
.time,
.access {
	display: flex;
}
.title {
	font-weight: 500;
}
.info {
	line-height: 1.3;
}
.time,
.access {
	margin-top: 12px;
}
.submit-button {
	background-color: #a17821;
	color: #fff;
	width: 581.2053px;
	height: 85.41px;
	line-height: 85.41px;
	text-align: center;
	border-radius: 6px;
	display: inline-block;
	font-size: 24px;
	border: none;
	margin-top: 30px;
	position: relative;
	font-weight: 400;
}
.submit-button:hover {
	opacity: 0.8;
}
.submit-button::after {
	position: absolute;
	content: "";
	background-image: url(../images/icon-btn.webp);
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}
.accordion-title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.accordion-title .label {
	background-color: #fff;
	color: #a17821;
	border: 1px solid #a17821;
	border-radius: 4px;
	font-size: 16px;
	font-weight: 700;
	padding: 0 8px;
	height: 2em;
	display: flex;
	align-items: center;
}

@media screen and (max-width: 640px) {
	.sec13 {
		padding: 80px 0;
	}
	.sec13-ttl {
		width: 80%;
	}
	.accordion-header {
		font-size: 26px;
		font-weight: 400;
		padding-left: 20px;
		padding-right: 20px;
	}
	.accordion:first-of-type {
		margin-top: 40px;
	}
	.accordion-icon {
		font-size: calc(16px * 0.7);
		width: calc(46.3988px * 0.7);
		height: calc(23.9033px * 0.7);
	}
	.accordion-header.active + .accordion-content {
		padding: 20px 0 40px;
	}
	.accordion-content {
		padding: 0;
	}
	.branch-image  {
		display: block;
		width: 100%;
	}
	.branch-picture,
	.branch-map {
		width: 100%;
	}
	.branch-map {
		margin-top: 8px;
	}
	.branch-info {
		margin-top: 12px;
	}
	.submit-button {
		width: 100%;
		line-height: 1.3;
		height: auto;
		padding: 20px 0;
	}
	.address,
	.time,
	.access {
		display: block;
	}
	.title,
	.info {
		font-size: 18px;
	}
	.accordion-title .label {
		padding: 0 8px;
		height: 1.8em;
	}
}

.sec12 {
	padding: 100px 0;
	background-color: #fff;
}
.sec12-ttl {
	width: 190px;
}
.question {
	font-size: 24px;
	font-weight: 700;
	text-align: left;
	border-bottom: 2px solid #333;
	position: relative;
	padding-left: 40px;
	padding-bottom: 10px;
}
.question::before {
	position: absolute;
	content: "";
	background-image: url(../images/icon-question.webp);
	background-repeat: no-repeat;
	background-size: contain;
	width: 26px;
	height: 38px;
	margin-right: 10px;
	left: 0;
	top: -4px;
}
.answer {
	background-color: #F2EDE2;
	padding: 28px 45px;
	text-align: justify;
	margin-top: 10px;
}
.sec12-item {
	margin-top: 40px;
}
.sec12-item:first-of-type {
	margin-top: 0;
}
.sec12-items {
	margin-top: 60px;
}

@media screen and (max-width: 640px) {
	.sec12 {
		padding: 80px 0;
	}
	.sec12-ttl {
		width: 40%;
	}
	.answer {
		padding: 20px;
	}
}

/* ----------------------------------------------------
    footer
---------------------------------------------------- */
.footer {
	background-color: #424242;
	color: #fff;
	text-align: center;
	padding: 30px 0;
}
.footer a {
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}
.footer a:hover {
	opacity: 0.8;
}
.copy-right {
	font-size: 14px;
	margin-top: 8px;
}

/* @media screen and (max-width: 640px) {} */

/* ----------------------------------------------------
    固定ボタン
---------------------------------------------------- */
.fixed-bottom-link {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 30%;
	min-width: 450px;
	filter: drop-shadow(3px 3px 4px #999);
	z-index: 100;
	display: none; /* 初期状態では非表示 */
}
.fixed-bottom-link.show {
	display: block; /* クラスが付与されたら表示 */
}
.fixed_btn a {
	display: inline-block;
	transition: .2s;
}
.fixed_btn a:hover {
	transform: scale(1.03);
	cursor: pointer;
}
img.btn_animate04 {
	margin: 0 auto;
	animation: vertical 1s infinite alternate;
	transform-origin:center;
	cursor: pointer;
}
@keyframes vertical {
0% {transform: rotate(3deg);}
13% {transform: rotate(-3deg);}
25% {transform: rotate(3deg);}
33% {transform: rotate(-3deg);}
34% {transform: rotate(0deg);}
100% {transform: rotate(0deg);}
}
img.btn_animate01 {
	margin: 0 auto;
animation: beside 2s linear infinite;
transform-origin:center;
cursor: pointer;
}
@keyframes beside {
0% { transform: translate(2px, 0px);}
5% {transform: translate(-2px, 0px);}
10% {transform: translate(2px, 0px);}
15% {transform: translate(-2px, 0px);}
20% {transform: translate(2px, 0px);}
25% {transform: translate(-2px, 0px);}
30% {transform: translate(0px, 0px);}
}

/*フッターまでスクロールしたら消す*/
.is-hidden {
  visibility: hidden;
  opacity: 0;
}

@media screen and (max-width: 640px) {
	.fixed-bottom-link {
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		width:94%;
		min-width: auto;
	}
}

/* ----------------------------------------------------
    固定ヘッダー
---------------------------------------------------- */
.header-top {
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1024px;
	z-index: 999;
}

@media screen and (max-width: 640px) {
	.header-top {
		width: 100%;
	}
}