@charset "UTF-8";

/* ◆◆◆御器所茶道教室 CSS◆◆◆ */

/* 基本 */
:root {
	--v-space: clamp(90px, 9vw, 120px); /* --v-space を変数として扱う */
}

body {
	margin: 0;
	background-color: #eeeeee;
	color: #222222;
	font-family: sans-serif;
}

h1, h2, h3, h4, h5, h6, p, figure, ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

p {
	line-height: 1.8;
}

a {
	color: inherit;
	text-decoration: none;
}

/*
a:hover {
	filter: brightness(90%) contrast(120%);
}
*/

img {
	display: block;
/*	max-width: 80%;*/
	height: auto;
	margin: 0 auto;
}


/* 横幅と左右の余白 */
.w-container {
	width: min(92%, 1166px);
	margin: auto;
	position: relative;
}

/* ヘッダー */
.header {
	height: 112px;
	background-color: #ffffff;
}

.headerx {
	height: 112px;
	background-color: #ffffff;
}

.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: 11px;
}

.header img {
	max-width: 100%;
	margin: 5px 0;
}

/* ナビゲーションボタン */
.navbtn {
	padding: 0;
	outline: none;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #aaaaaa;
	font-size: 30px;
}

.open .navbtn {
	z-index: 110;
	color: #ffffff;
}

.navbtn .fa-bars {
	display: revert;
}
.open .navbtn .fa-bars {
	display: none;
}

.navbtn .fa-times {
	display: none;
}
.open .navbtn .fa-times {
	display: revert;
}

@media (min-width: 768px) {
	.navbtn {
		display: none;
	}
}

/* ナビゲーションメニュー：モバイル */
@media (max-width: 767px) {
	.nav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: #4e483ae6;
		transition: transform 0.3s;
	}

	.open .nav {
		transform: translate(-100%, 0);
	}

	.open body {
		position: fixed;
		overflow: hidden;
	}

	.nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
		color: #ffffff;
	}
}

/* ナビゲーションメニュー：PC */
@media (min-width: 768px) {
	.nav ul {
		display: flex;
		gap: 40px;
		color: #707070;
	}
}

/* ヒーロー */
.hero {
	height: 800px;
	background-image: url(img/hero.png);
	background-position:  50% 19%;
	background-size: cover;
}

.hero-container {
	display: grid;
	justify-items: center;
	align-content: center;
	height: 100%;
}

.hero h1 {
	margin-bottom: 10px;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: clamp(48px, 5vw, 68px);
	min-height: 0vw;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	color: #ffffff;
}

.hero p {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	margin-bottom: 20px;
	color: #ffffff;
}

/* ボタン */
.btn {
	display: block;
	width: 260px;
	padding: 15px;
	box-sizing: border-box;
	border-radius: 4px;
/*	background-color: #e8b368;*/
	background-color: #800080;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	text-shadow: 0 0 6px #00000052;
}

.btn-accent {
	background-color: #b72661;
}

/* PAGE TOP ボタン */
.totopbtn {
	display: block;
	width: 130px;
	padding: 5px;
	box-sizing: border-box;
	border-radius: 20px 20px 0px 0px;
	background-color: #800080;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	text-shadow: 0 0 6px #00000052;
}

.totopbtn-backcolor{
	background-color: #f3f1ed;
}

.totopbtn-accent {
	background-color: #b72661;
}

.totopbtn-backcolor-white{
	background-color: #ffffff;
}

/* 画像とテキスト */
.imgtext {
/*	padding: var(--v-space) 0;*/
	padding: 40px 0px;
	background-color: #ffffff;
}

/*
.imgtext + .imgtext {
	padding-top: 0;
}
*/

.imgtext-container {
	display: flex;
	flex-direction: column;
	gap: clamp(45px, 6vw, 80px);
}

.img-container {
	background-color: #ffffff;
}

.img-container img {
	padding: 40px 0px;
	margin: 0 auto;
	@media screen and (min-width:768px){ max-width: 70%; } /* PC */
	@media screen and (max-width:767px){ max-width: 90%; } /* スマホ */
}

@media (min-width: 768px) {
	.imgtext-container {
		flex-direction: row;
		align-items: center;
	}

	.imgtext-container.reverse {
		flex-direction: row-reverse;
	}

	.imgtext-container > .text {
		flex: 1;
		min-width: 17em;
  	}

	.imgtext-container > .img {
		/*flex: 2;*/
		flex: 1;
	}
}


/* タイトル */
.heading-title {
	font-size: clamp(30px, 3vw, 40px);
	min-height: 0vw;
	font-weight: 400;
}

/* タイトルとサブタイトル（赤色の短い線で装飾）その１ */
.heading-decoration {
	font-size: clamp(30px, 3vw, 40px);
	min-height: 0vw;
	font-weight: 400;
}

.heading-decoration::after {
	display: block;
	content: '';
	width: 80px;
	height: 0px;
	border-top: solid 3px #b72661;
	margin-top: 0.6em;
}

.heading-decoration + p {
	margin-top: 1em;
	margin-bottom: 1em;
	color: #707070;
/*	font-family: "Montserrat", sans-serif;*/
	font-size: 25px;
}

/* タイトルとサブタイトル（赤色の短い線で装飾）その２ */
.heading-decoration2 {
	font-size: clamp(30px, 3vw, 40px);
	min-height: 0vw;
	font-weight: 400;
	padding-top: 45px;
}

.heading-decoration2::after {
	display: block;
	content: '';
/*	width: 160px;*/
	width: 80px;
	height: 0px;
	border-top: solid 3px #b72661;
	margin-top: 0.6em;
}

.heading-decoration2 + p {
	margin-top: 1em;
	margin-bottom: 1em;
	color: #707070;
/*	font-family: "Montserrat", sans-serif;*/
	font-size: 25px;
}

/* 記事一覧 */
.posts {
/*	padding: var(--v-space) 0;*/
	padding: 80px 0;
	background-color: #f3f1ed;
}

.posts-container {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 25px;
}

@media (min-width: 768px) {
	.posts-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

.posts-container3 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 25px;
}

@media (min-width: 768px) {
	.posts-container3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

.posts-container4 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 25px;
}

@media (min-width: 768px) {
	.posts-container4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* 記事一覧の記事 */
.post a {
	display: block;
}

.post h3 {
	margin: 1em 0 0.5em;
	font-size: clamp(12px, 2vw, 20px);
	min-height: 0vw;
}

.post p {
/*	max-width: 20em;*/
	max-width: 25em;
	font-size: clamp(12px, 1.6vw, 14px);
	min-height: 0vw;
}

.post img {
	aspect-ratio: 3 / 3;
	object-fit: cover;
	width: 100%;
}

@supports not (aspect-ratio: 3 / 3) {
	.post img {
		height: 180px;
	}
}

/* パーツの見出し */
.heading {
	position: absolute;
	top: calc((var(--v-space) + 0.7em) * -1);
	font-family: "Montserrat", sans-serif;
	font-size: clamp(40px, 5.2vw, 70px);
	min-height: 0vw;
	font-weight: 300;
}

.heading span {
	display: block;
	color: #666666;
	font-size: 18px;
}


/* フッター */
.footer {
	padding: 10px 0;
	background-color: #ffffff;
	color: #707070;
	font-size: 13px;
}

.footer-name {
	padding: 10px 0;
	font-size: 15px;
	font-weight: bold;
}

.footer-copyright {
	padding: 10px 0;
	font-size: 13px;
	font-weight: bold;
}

.footer img {
	max-width: 100%;
	margin: 10px 0;
}

/* フッター：テキストメニュー */
.footer-menu {
	padding: 10px 0;
	display: flex;
	flex-wrap: wrap;
	@media screen and (min-width:768px){ gap: 20px; } /* PC */
	@media screen and (max-width:767px){ font-size: 12px; gap: 10px; } /* スマホ */
}

/* 記事 */
.entry {
	padding-bottom: var(--v-space);
	background-color: #ffffff;
}

.entry-img img {
	width: 100%;
/*	max-height: 400px; */
	object-fit: cover;
	margin-bottom: calc(var(--v-space) * 2 / 3);
}

.entry .w-container {
	max-width: 720px;
}

.entry .heading-decoration {
	font-size: clamp(30px, 6.25vw, 48px);
}

.entry-container {
	font-size: clamp(16px, 2.4vw, 18px);
}

.entry-container :where(h1, h2, h3, h4, h5, h6, p, figure, ul) {
	margin-top: revert;
	margin-bottom: revert;
	padding: revert;
	list-style: revert;
}

.entry-container p {
	margin: 1.8em 0;
}

.entry-container img {
	max-width: 100%;
}

.entry-container > :first-child {
	margin-top: 0;
}

.entry-container > :last-child {
	margin-bottom: 0;
}


/* プラン */
.plans {
	padding: var(--v-space) 0;
	background-color: #e9e5e9;
}

.plans-container {
	display: grid;
	gap: 27px;
}

@media (min-width: 768px) {
	.plans-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* プラン：カード */
.plan {
	display: flex;
	flex-direction: column;
	padding: 60px 27px;
	border-radius: 20px;
	background-color: #ffffff;
}

.plan h3 {
	margin-bottom: 38px;
	font-family: "Montserrat", sans-serif;
	font-size: 38px;
	font-weight: 400;
}

.plan .desc {
	margin-bottom: 38px;
}

.plan .price {
	margin-top: auto;
	margin-bottom: 22px;
	font-size: 26px;
	font-weight: bold;
}

.plan .btn {
	width: auto;
}

/* 子ページトップバー */

.topbar {
	display: flex;
	align-items: center;
	height: 100px;
	background-color: #eebbcb;
	color: #ffffff;
}

.topbar h1 {
	padding-left: 10px;
}

@media screen and (min-width:768px){ /*　画面サイズが768px以上の場合読み込む：PC　*/
	.topbar h1 {
		padding-left: 75px;
	}
}

.top-container {
	width: min(92%, 1166px);
	margin: auto;
	position: relative;
	display: flex;
	align-items: center;
	height: 90px;
	font-size: 30px;
}

/*
.top-gap {
	margin-top: 10;
}
*/

/* 子ページボトムバー */
.bottombar {
	display: flex;
	align-items: center;
	height: 20px;
	margin-top: 1;
	background-color: #800080;
}

/* テキストエリア */
textarea {
	width: 100%;  /* 横幅 */
	height: 300px; /* 高さ */
}

/* 改行と上下空白空け */
.betw::after{
	display: flex;
	content:"\A";
	white-space: pre;
	height: 15px;
}

.space20{
	height: 20px;
}

/* アンカー移動のゆっくりスクロール */
html{
	scroll-behavior: smooth;
}

/* PageTopへボタン */
.pagetop{
	cursor: pointer;
	position: fixed;
	right: 30px;
	bottom: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	transition: .3s;
	color: #ffffff;
	background: #800080;
	opacity: 0;
}

.pagetop:hover{
	box-shadow: 0 0 10px #999999;
}

/*  スライド（コンテンツ） */
.slide { /*スライド全体 */
  width: 400%; /* 3枚は300％ */
  height: 100%;
  display: flex;
  transition: all 2.5s;
}

.slide div {
	width: 25%; /* 3枚は33.33％ */
	height: 100%;
	color: #ffffff;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	@media screen and (min-width:768px){ font-size: 26px; } /* PC */
	@media screen and (max-width:767px){ font-size: 12px; } /* スマホ */
}

/* スライドさせるために必要なクラス */
.slide1 { transform: translateX(0); }
.slide2 { transform: translateX(-25%); } /* 3枚は-0.66％ */
.slide3 { transform: translateX(-50%); } /* 3枚は-0.66％ */
.slide4 { transform: translateX(-75%); } /* 3枚はこの行削除 */

.slide div:nth-of-type(1){ /* 1枚目背景色 */
	background-color: #E1F3FC;
	background-image: url(img/hero_nagoya1.jpg);
	background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
/*background-position: 50%  50%;*/
	background-size: cover;
}

.slide div:nth-of-type(2){ /* 2枚目背景色 */
	background-color: #FCE8F0;
	background-image: url(img/hero_aircon.jpg);
	background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
/*background-position: 50%  50%;*/
	background-size: cover;
}

.slide div:nth-of-type(3){ /* 3枚目背景色 */
	background-color: #E3F1E4;
	background-image: url(img/hero_water.jpg);
	background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
/*background-position: 50%  50%;*/
	background-size: cover;
}

.slide div:nth-of-type(4){ /* 4枚目背景色 */
	background-color: #E301E4;
	background-image: url(img/hero_move.jpg);
	background-repeat: no-repeat;/*画像が繰り返すのを防ぐ*/
/*background-position: 50%  50%;*/
	background-size: cover;
}

/* スライドの左右のボタン */
.next {
	position: absolute;
	width: 15px;
	height: 15px;
	right: 10px;
	bottom: 50%;
	z-index: 10;
	cursor: pointer;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	-webkit-transform: rotate(45deg) translateY(50%);
	transform: rotate(45deg) translateY(50%);
}

.prev {
	position: absolute;
	width: 15px;
	height: 15px;
	left: 25px;
	bottom: 50%;
	z-index: 10;
	cursor: pointer;
	border-top: solid 3px #fff;
	border-right: solid 3px #fff;
	-webkit-transform: rotate(-135deg) translateY(-50%);
	transform: rotate(-135deg) translateY(-50%);
}

/* スライドのインジケーター */
.indicator {
	width: 100%;
	position: absolute;
	bottom: 20px;
	display: flex;
	column-gap: 18px;
	z-index: 10;
	justify-content: center;
	align-items: center;
}

.indicator li {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	list-style: none;
	background-color: #fff;
	border: 2px #000 solid;
	cursor: pointer;
}

.indicator li:first-of-type {
	background-color: #000000;
}

/* バックグラウンド（スポット用） */
.bg1 {
	background-color: #f2fdf7;
}

.bg2 {
	background-color: #FFF8FD;

}

/* アニメーションスライドイン anim_area.js 必須 */
.slide-in {
	opacity: 0;
	transform: translateX(-100%);
	transition: opacity 1s ease-out, transform 0.7s ease-out;
}

.slide-in.visible {
	opacity: 1;
	transform: translateX(0);
}

@keyframes slideIn {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

/* フローティングバナー用 */
#floating-banner {
  position: fixed;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 310px;
  height: 45px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.banner-text {
  font-size: 15px;
}

#close-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}