@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');

*,
::before,
::after {box-sizing: border-box;  border-style: solid;  border-width: 0;}

/* リセットCSS */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0; padding: 0;border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}


/* リセットCSS */


body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
	color: #8C0153;
	font-size: 100%;
	line-height: 1.8rem;
}

img{width: 100%;}

header {
	position: fixed;
	top: 0;
	z-index: 10;
    width: 100%;
    height: 180px;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.4) 70%);
    border-bottom-left-radius: 140px;
    border-bottom-right-radius: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); /* 影の例 */
	transition: height 0.3s ease;
}

header img.logo {
    width: 13.4375vw; margin-bottom: 2vh;transition: transform 0.3s ease;
}
/* スクロール時のヘッダーとロゴのスタイル */
header.header-small{background: #fff;}
.header-small {
    height: 90px; /* 小さくなったヘッダーの高さ */
}
.header-small .logo {
	margin-top: -10px;
    transform: scale(0.4); /* ロゴのサイズを小さくする */
}
nav{position: absolute; bottom: 10px; max-width: 1080px; margin: 0 auto; text-align: center;}

nav ul {
	width: 100%;
    list-style: none;
    padding: 0;
    display: flex;
	justify-content: space-between;
	gap: 5vw;
}

nav ul li {
    margin: 0;
}

nav ul li a {
    text-decoration: none;
    color: #8C0153;
    font-size: 16px;
}
nav ul li a:hover{color:#D34197;
text-decoration: underline;}
.hamburger-menu {
    cursor: pointer;
    display: none; /* PC表示では非表示にする */
}

.hamburger-menu .bar {
    width: 25px;
    height: 3px;
    background-color: #8C0153;
    margin: 5px 0;
    transition: 0.4s;
}

#background-slider {
    width: 100%;
    height: 100vh; 
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; 
    background-position: center;
	background-size: cover;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

section{max-width: 1080px; margin: -10vh auto; padding-top: 10vh;}
#top {
    max-width: 1080px;
    margin: calc( -10vh + 180px ) auto 10vh;
	padding-top: 10vh;
}
#top.top_page{margin: 180px auto 10vh!important;}
/** slider **/
#slider {
    position: relative;
    width: 100%; /* または固定サイズ */
    height: 608px; /* 必要に応じて高さを調整 */
    overflow: hidden;
	border-radius: 10px;
	margin: 10vh auto;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1); /* 初期ズームを1.1倍に設定 */
    transition: opacity 2s ease-in-out, transform 4s ease-in-out;
}
.slide.active {
    opacity: 1;
	transform: scale(1.0);
}
/** slider **/
.under_cloud {
	position: fixed; bottom: 0; left: 0;z-index: 1;opacity: 0.7; width: 100%;
}

.txt__area {
	max-width: 840px; margin: 10vh auto; background: #ffffff80; border-radius: 10px; padding: 3%;box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}

h1{font-size: 2rem; line-height: 2.8rem; text-align: center; font-weight: 800; letter-spacing: 0.2vw;}
h2{max-width: 460px; height: 66px; margin: 10vh auto; border: 4px solid #8C0153; background: #fff; font-size: 2rem; font-weight: 800; color: #8C0153; border-radius: 10px; text-align: center;display: flex;    justify-content: center; /* 水平方向の中央揃え */ align-items: center; /* 垂直方向の中央揃え */}
h4{font-size: 1.1rem; font-weight: 600; margin-bottom: 0.3vh;}

.lesson__class { width: 100%; display: flex; flex-wrap: wrap; padding: 2%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__class ul{ display: flex; flex-wrap: wrap;align-content: start; }
.lesson__class ul li.lesson__class__small{display: flex; width: 31.333%; margin: 0 2% 2% 0; background: #ffffff90; padding: 2%; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); font-size: 0.875rem;}
.lesson__class ul li.lesson__class__small:nth-child(3){margin: 0 0 2% 0; }
.lesson__class ul li.lesson__class__large{display: flex; width: 64.666%; margin: 0 0 2% 0; padding: 2%; border-radius: 10px; background: #ffffff90;  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); font-size: 0.875rem;}
.lesson__class__large__schedule{display: flex; flex-wrap: wrap; width: 100%; margin-left: 10px;}
.lesson__class__large__schedule h4{width: 100%;}
.lesson__class__large__schedule ul{width: 50%; }

.lesson__price{ width: 100%; display: flex; flex-wrap: wrap; padding: 2%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__price b{font-size: 1.25rem; font-weight: 800;}
.lesson__price ul{margin: 1vh 1vw;}
.lesson__price li{border-bottom: solid 2px #8C0153; margin: 2vh auto; padding-bottom: 10px;}
.lesson__price li:last-child{border-bottom: none;}
.lesson__price ul li div ul li{border-bottom: none; margin: 0 auto; padding-bottom: 0px; list-style: "※ "; list-style-position: outside;}

.lesson__free{ width: 100%; display: flex; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__free b{font-weight: 800; font-size: 1.25rem;width: 100%; margin-bottom: 1vh;}

.lesson__coach{ width: 100%; display: flex; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__coach ul{display: flex; flex-wrap: wrap; width: 100%; gap:4%;}
.lesson__coach ul li{width: 48%; margin: 0 auto; border-radius: 10px; background: #ffffff90; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__coach ul li img {width: 100%; height: 100%; border-radius: 10px;}
.lesson__coach b{font-weight: 800; font-size: 1.25rem;width: 100%; margin-bottom: 1vh;}
.lesson__coach__txt{padding: 4%; display: flex;justify-content: center; align-items: center;}

.lesson__map{ width: 100%; display: block; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__map iframe{width: 100%; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__map b{font-weight: 800; font-size: 1.25rem; width: 100%; margin-bottom: 1vh;}
.lesson__map p{margin: 2vh 5vw;}

.lesson__contact{ width: 100%; display: block; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}


form {width: 60%; margin: 2vh auto;}

form label, 
form input[type="text"], 
form input[type="email"], 
form textarea {
    display: block; /* ブロック要素として表示 */
    width: 80%;
    margin: 1vh auto; /* 上下マージン20px、左右自動 */
}

form input[type="text"], 
form input[type="email"] {
	background: #ffffff; border: solid 0.75px #8C0153; border-radius: 10px; 
    height: 60px;
	padding: 10px;
    margin-bottom: 1vh; /* 入力フォーム間のマージン */
}
form input[type="text"]:focus, 
form input[type="email"]:focus, 
form textarea:focus {
    border: 3px solid #8C0153; /* フォーカス時のボーダー色 */
}

form textarea {
	border: 0.75px solid #8C0153;
	border-radius: 10px; 
	padding: 10px;
    height: 180px;
    margin-bottom: 4vh; /* テキストエリアの下のマージン */
}

form input[type="submit"] {display: block;
width: 460px; height: 66px; margin: 8vh auto; background: #8C0153; font-size: 2rem; font-weight: 800; color: #fff; border-radius: 10px; text-align: center;display: flex;    justify-content: center; /* 水平方向の中央揃え */ align-items: center; /* 垂直方向の中央揃え */
}
form input[type="submit"]:hover{background: #ad2e79;}
.contact__submit{ width: 100%; display: block; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}

.contact__submit div{width: 60%;margin: 10% auto;}
.contact__submit div p{margin-bottom: 1vh;}
.thanks{ width: 100%; display: block; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); margin: calc( 10vh + 180px ) auto;}
.thanks h2{font-size: 1.275rem;}
.thanks p{text-align: center;}

.lesson__schedule{ width: 100%; display: block; flex-wrap: wrap; padding: 4%; background: #ffffff80; border-radius: 10px; box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15);}
.lesson__schedule iframe{width: 100%;}

.gallery {  
	margin: 30px auto;
  padding: 0px;
  width: 100%;
  column-count: 3;
  column-gap: 10px;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* アニメーションを適用するクラス */
.slide-up-animation {
  animation: slideUp 0.5s ease-out forwards;
}

.gallery-item {
    display: block; /* 要素を表示 */
    opacity: 1; /* 透明度を1に設定 */
    transition: opacity 0.5s ease;
	animation: slideUp 0.5s ease-out forwards;
    width: 100%;
    overflow: hidden;
    position: relative;
	-webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
	text-align: center;
	padding: 3% 3% 5%;
	background: #ffffff99;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	margin-bottom: 2vh;
	
}
.gallery-item.hide {
  transform: scale(0.95);
  opacity: 0;
  visibility: hidden; /* display: noneを削除してvisibilityを使用 */
  transition: transform 0.5s ease, opacity 0.5s ease, visibility 0.5s ease; /* visibilityのトランジションを追加 */
}


.gallery-item img {
    max-width: 100%;
    height: auto;
    display: block;
	border-radius: 5px;
}

.gallery-item.active {
    display: block;
    opacity: 1;
}
.gallery-filters{width: 80%; margin: 1vh auto; text-align: center;}
.filter-btn{padding: 6px 3%; border-radius: 10px; background:#8C0153; color: #fff; font-size: 1rem; font-weight: 600; border: 3px solid #8C0153; margin-right: 1%;}
.filter-btn:last-child{margin-right: 0;}
.filter-btn.active{background: #fff; color:#8C0153; border: 3px solid #8C0153;}


footer{width: 100%; margin-top: 30vh;}
footer p{position: relative; bottom: 20px; text-align: center; font-size: 0.875rem;}

.class_icon{width: 100px; height: 100px; margin-right: 2%;}
.pc_on{display: block;}
.sp_on{display: none;}

/* スマートフォン用のレイアウト */
@media screen and (max-width: 767px) {
    header {
        height: 60px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
		position: fixed;top: 0;z-index: 10;
		background: #fff;
    }
#top.top_page{margin: 20px auto 5vh!important;}
	
    header img.logo {width: 27.4809vw; margin-bottom: 0vh;}
	h1{font-size: 1.4rem; line-height: 2.2rem;}
	h2 {max-width: none; height: 58px; margin: 5vh auto; font-size: 1.6rem; width: 84%;}
nav {
    /* 共通のスタイル */
    width: 100%; 
    text-align: left; 
    position: absolute; 
    top: 62px;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.5s ease;
    max-height: 0; /* メニュー非表示時 */
    opacity: 0;
}

nav.open {
    max-height: 500px; /* メニュー表示時の最大高さ（調整が必要） */
    opacity: 1;
	    overflow: visible;
}

nav ul {
	width: 100%;
    display: block;
	position: relative;
}

nav ul li { background: #ffffff; margin: 0 auto; padding: 3vh 3vw 3vh 4vw; border-bottom: 0.75px solid #8C0153;  transition: background-color 0.5s ease;}
	nav ul li:first-child{border-top-left-radius: 30px; border-top-right-radius: 30px;}	
	nav ul li:last-child{border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; border-bottom: none; padding-bottom: 4vh;  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.15); /* 影の例 */}
nav ul li:hover{background: #8C0153;color:#fff;}
nav ul li a {color: #8C0153;}
nav ul li a:hover{color:#fff;}

    .hamburger-menu {
        display: block;
		position: absolute;
    left: 5vw;
    }
	
#slider{margin: 5vh auto; width: 96%;}	
	
.txt__area {
    max-width: none;
    margin: 5vh auto;
    width: 96%;
}
section {
    max-width: none; width: 96%;
    margin: -5vh auto;
    padding-top: 5vh;
}

.lesson__class__large__schedule {width: 60%; margin-bottom: 5%;}
.lesson__class ul li.lesson__class__small { width: 100%; margin: 0 2% 2%;}
.lesson__class ul li.lesson__class__small:nth-child(3) {margin: 0 2% 2%;}
.lesson__class ul li.lesson__class__large { width: 100%; margin: 0 2% 2%; flex-wrap: wrap;}
.lesson__class__large__schedule ul {width: 100%;}
.lesson__price ul li div ul li { margin: 0 0 0 5%;}	
.lesson__price li {padding-left: 1vw;}
.lesson__coach{display: block;}
.lesson__coach ul li{width: 100%; margin-bottom: 10px;}
form {width: 100%;}
form input[type="submit"] {width: 100%; height: 58px; margin: 4vh auto; font-size: 1.4rem;}
footer {margin-top: 20vh;}
footer p {font-size: 0.75rem;}	
#top{margin: calc( -10vh + 90px ) auto 10vh;}	
.gallery-filters {width: 96%;}
.filter-btn {padding: 4px 3%; border-radius: 5px; font-size: 0.875rem; margin-bottom: 2%;}
.gallery {column-count: 2; column-gap: 2%;}	
.lesson__schedule{padding: 4% 2%;}
.pc_on{display: none;}
.sp_on{display: block;}	
}