/*
Theme Name: Dream Music Motoyawata
*/

@charset "utf-8";
@font-face {
  font-family: "tsukushi";
  src: url("font/TsukushiAMaruGothic.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* =======================================================================
  初期スタイル調整
======================================================================= */

* {
  box-sizing: border-box;
}

body {
	line-height: 1.75;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
	color: #47331C;
	background-color: #fff;
  margin: 0;
  padding-top: 160px;
}

h1,
h2,
h3,
h4 {
  font-family: "tsukushi", sans-serif;
	color: #47331C;
	margin-top: 0;
	line-height: 1.333;
}

p {
	margin-top: 0;
	margin-bottom: 1.5em;
	text-align: justify;
}

address {
	font-style: normal;
}

a {
	color: #666;
	text-decoration: none;
}

a:hover,
a:focus {
	opacity: 0.8;
}

ul {
	margin: 1em 0;
	padding: 0;
	list-style: none;
}

img {
	width: 100%;
	height: auto;
}

@media screen and (max-width:767px) {
  body {
   font-size: 16px;
  }
}

/* =======================================================================
  レイアウト
======================================================================= */

/* 幅 */

.l-width {
  margin: 0 auto;
  width: 100%;
  max-width: 1000px;
}

/* =======================================================================
  共通スタイル調整
======================================================================= */

/* タイトル・見出し
---------------------------------------------------- */

.section__subtitle {
	font-size: 21px;
  text-align: center;
  letter-spacing: .05em;
  margin-bottom: 14px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.65;
  display: block;
}

.h2-title {
	font-size: 40px;
  letter-spacing: -.02em;
  margin-bottom: 30px;
  text-align: center;
}

/* CTAは見出し装飾の位置調整が別のため個別指定 */
.section__title::after {
  content: "";
  display: block;
  width: 300px;
  height: 30px;
  margin: 10px auto 0;
  background: url("img/common/ttl-deco.png") no-repeat center; background-size:contain;
}

.section__subtitle--course {
  font-size: 21px;
  letter-spacing: .05em;
  margin: 0 auto 14px;
  display: block;
  width: fit-content;
  color: #fff;
  padding: 5px 25px;
  border-radius: 999px;
  line-height: 1.2;
}

/* コースタイトル背景色*/
.section__subtitle--course--red {
  background: #E3023E;
}

.section__subtitle--course--orange {
  background: #EC6918;
}

.section__subtitle--course--green {
  background: #23AC39;
}

.section__subtitle--course--blue {
  background: #17499D;
}

/* 文章の間にスペース入れる */
.u-ml-sm {
   margin-left: 0.8em;
}

@media screen and (max-width:767px) {
  .section__title::after {
    width: 230px;
    height: 30px;
  }

  .section__subtitle {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .h2-title {
    font-size: 32px;
    margin-bottom: 20px;
  }
 
  .section__subtitle--course {
    font-size: 16px;
    line-height: 1;
    padding: 10px 20px;
    border-radius: 999px;
  } 
}

/* テキスト
---------------------------------------------------- */

.a-marker,
p.a-marker {
  text-decoration: underline;
  text-decoration-thickness: 0.5em;
  text-decoration-color: #FAE79A;
  text-underline-offset: -0.3em;
  text-decoration-skip-ink: none;
}

.a-color {
  color: #C73521;
}

/* レイアウト
---------------------------------------------------- */

.l-padding {
  padding: 80px 0;
}

.l-inner {
  width: 100%;
  padding: 0 20px;
  margin: 0 auto;
  box-sizing: border-box;
}

@media screen and (min-width:768px) {
  .l-inner {
    max-width: 1000px;
  }
}

@media screen and (max-width:767px) {
  .l-padding {
    padding: 40px 0;
  }
}

/* PC・SP表示切り替え
---------------------------------------------------- */

/* 初期（スマホ） */
.sp { display: block; }
.tab { display: none; }
.pc { display: none; }

/* タブレット */
@media screen and (min-width:768px) and (max-width:859px) {
  .sp { display: none; }
  .tab { display: block; }
  .pc { display: none; }
}

/* PC */
@media screen and (min-width:860px) {
  .sp { display: none; }
  .tab { display: none; }
  .pc { display: block; }
}

/* スマホだけ改行
---------------------------------------------------- */

.sp-br {
  display: block;
}

@media (min-width: 768px) {
  .sp-br {
    display: none;
  }
}
/* ----------------------------------------------------
  ヘッダー
---------------------------------------------------- */

.header {
  background: #fff;
}

.header__rainbow {
  height: 5px;
  background: url("img/common/rainbow-bar.png") repeat-x; 
}

.header__top {
  padding: 0;
}

.header__inner {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.header__logo {
  margin: 0;
  width: 266px;
  flex-shrink: 0;
}

.header__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.header__copy {
  font-size: 16px;
  font-family:"tsukushi", sans-serif ;
  line-height: 1.8;
  opacity: 0.9;
  margin-left: 30px;
  margin-top: 20px;
  line-height: 1.6;
}

/* ボタン */

.header__btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  height: 60px;
  padding: 0 30px;
  background: #E70011;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 0 #b0000c;
  font-size: 20px;
}

.header__btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b0000c;
  opacity: 0.9;
  color: #fff;
}

.header__btn-icon {
  width: 28px;
  height: auto;
  margin-right: 5px;
}

/* ナビゲーション
---------------------------------------------------- */

.header__list {
  display: flex;
  justify-content: center;
  margin: 0;
  width: 100%;
}

.header__nav {
  margin-bottom: 10px;
}

.header__item a {
  display: block;
  padding: 14px 26px;
  color: #47331C;
  line-height: 1;
  font-family: "tsukushi", sans-serif;
  font-size: 18px;
}

/* ナビの区切り線 */
.header__item {
  position: relative;
}

.header__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 24px;
  background: #d8ccba;
  transform: translateY(-50%);
}

.header__item:first-child::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 24px;
  background: #d8ccba;
  transform: translateY(-50%);
}

/* 固定 */

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
}

/* ハンバーガー消す */
.header__toggle {
  display: none;
}

@media screen and (max-width:767px) {
  .header__inner {
    gap: 10px;
  }

  .header__logo {
    width: 150px;
  }

  .header__btn {
    min-width: auto;
    height: 35px;
    padding: 18px;
    font-size: 15px;
    letter-spacing: 0.1em;
    margin-top: -3px;
    padding-bottom: 15px;
    box-shadow: 0 3px 0 #b0000c;
  }

  .header__toggle {
    display: flex;
    width: 20px;
    height: 50px;
    margin-left: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
  }

  .header__toggle span {
    width: 24px;
    height: 2px;
    background: #47331C;
    display: block;
  }

  .header__nav {
    display: none;
  }

  .header__nav.is-open {
    display: block;
  }

  .header__list {
    display: block;
  }

  .header__item {
    text-align: center;
  }

  .header__item a {
    padding: 16px;
    border-bottom: 1px solid #eee3d3;
  }

  .header__item::before,
  .header__item::after {
    display: none;
  }

  .header__top {
    margin-top: 10px;
  }

  /* バッテン化 */
  .header__toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .header__toggle.is-open span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
  }

  .header__toggle span {
    transition: transform 0.3s, opacity 0.3s;
  }

  body {
    padding-top: 80px;
  }
}

@media screen and (min-width:768px) and (max-width:929px) {
   body {
    padding-top: 110px;
  }

  .header__inner {
    gap: 10px;
    margin-bottom: 0;
  }

   .header__top {
    margin-top: 0;
  }

  .header__logo {
    width: 180px;
  }

  .header__btn {
    min-width: auto;
    height: 45px;
    padding: 18px;
    font-size: 15px;
    letter-spacing: 0.1em;
    margin-top: -3px;
  
    box-shadow: 0 4px 0 #b0000c;
  }

   .header__btn-icon {
    width: 24px;
  }

  .header__toggle {
    display: flex;
    width: 30px;
    height: 60px;
    margin-left: 10px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
  }

  .header__toggle span {
    width: 28px;
    height: 2px;
    background: #47331C;
    display: block;
  }

  .header__nav {
    display: none;
  }

  .header__nav.is-open {
    display: block;
  }

  .header__list {
    display: block;
  }

  .header__item {
    text-align: center;
  }

  .header__item a {
    padding: 16px;
    border-bottom: 1px solid #eee3d3;
  }

  .header__item::before,
  .header__item::after {
    display: none;
  }

  .header__top {
    margin-bottom: 10px;
  }


  /* バッテン化 */
  .header__toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .header__toggle.is-open span:nth-child(2) {
    opacity: 0;
  }

  .header__toggle.is-open span:nth-child(3) {
    transform: translateY(-15px) rotate(-45deg);
  }

  .header__toggle span {
    transition: transform 0.3s, opacity 0.3s;
  }
}

/* サイズ変更による崩れ処置 */
@media screen and (min-width:768px) and (max-width:859px) {
  .header__top {
    margin-top: 8px;
  }

  body {
    padding-top: 60px;
  }
}

/* ----------------------------------------------------
  ヒーロー
---------------------------------------------------- */

.hero img {
  display: block;
}

/* ----------------------------------------------------
  イントロ（導入）
---------------------------------------------------- */

.intro {
  background: url("img/common/bg-deco.png") no-repeat center bottom 30% / 1418px,
              url("img/common/bg-beige.png") repeat;
  text-align: center;
}

.intro__banner {
  width: 400px;
  margin: 0 auto;
  display: block;
}

.intro__banner img {
  display: block;
  margin-bottom: 80px;
  margin-top: -20px;
}

.intro__subtitle-01 {
  font-size: 28px;
  letter-spacing: .05em;
  margin-bottom: 22px;
  margin-top: -10px;
}

.intro__subtitle-02 {
  font-size: 21px;
  text-align: center;
  letter-spacing: .05em;
  margin: 25px;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.7;

  display: inline-block;
  background: #47331C;
  color: #fff;
  padding: 5px 25px;
  border-radius: 999px;
}

.intro__main-copy {
  font-size: 40px;
  letter-spacing: .05em;
  padding: 20px;
  line-height: 1.75em;
}

.intro__main-copy::after {
  content: "";
  display: block;
  width: 300px;
  height: 30px;
  margin: 45px auto 0;
  background: url("img/common/ttl-deco.png") no-repeat center; background-size:contain;
}

.intro__sub-copy {
  text-align: center;
  font-size: 20px;
  margin-bottom: 0;
  line-height: 2;
}

.intro__title {
  display: block;
  margin: 0;
}

@media screen and (max-width:767px) {
  .intro__banner {
    width: 80%;
    margin: 0 auto;
  }

  .intro__banner img {
    display: block;
    width: 100%;
    height: auto;
    margin-top: -20px;
    margin-bottom: 40px;
  }

  .intro__main-copy::after {
    width: 230px;
    height: 30px;
    margin-top: 20px;
  }

  .intro__sub-copy {
    text-align: center;
    font-size: 16px;
    line-height: 1.75;
  }

  .intro__main-copy {
    margin-bottom: 0;
    font-size: 26px;
  }

  .intro__subtitle-02 {
    font-size: 16px;
    line-height: 1.5;
    margin: 20px;
    padding: 10px 20px;
    border-radius: 10px;
  }

  .intro__subtitle-01 {
    font-size: 21px;
  }
}


 /* ----------------------------------------------------
  おすすめ３つのポイント（point）
---------------------------------------------------- */

.point__item {
  margin-top: 30px;
}

.point__item--reverse .point__inner {
  flex-direction: row-reverse;
}

.point__num {
  width: 55px;
  margin: 0;
  margin-bottom: -15px;
  margin-left: 30px;
}

.point__num-01 {
  width: 49px;
}

.point__num--right {
  width: 55px;
  margin-left: auto;
  margin-right: 30px;
  margin-bottom: -15px;
}

.point__box {
  display: flex;
  align-items: center;
  background: #FCF3E8;
  border-radius: 10px;
  gap: 20px;
}

.point__inner {
  display: flex;
  padding: 20px 30px 20px;
  gap: 30px;
}

.point__title {
  color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 10px 10px 0 0;
  font-size: 24px;
  text-align: left;
  padding-left: 30px;
}

.point__item--reverse .point__title {
  text-align: right;
  padding-right: 30px;
  padding-left: 15px;
}

.point__item--reverse .point__num {
  margin-left: auto;
  margin-right: 30px;
}

.point__text{
  line-height: 1.8em;
}

.point__img {
  margin-top: -115px;
}

.point__img img {
  width: 300px;
  border-radius: 10px;
}

/* 色 */
.point__title--red {
  background: #E3023E;
}

.point__title--green {
  background: #23AC38;
}

.point__title--purple {
  background: #851F83;
}

/* sp.tab */
@media screen and (max-width:859px) {
 .point__img {
   width: 200px;
   margin: 0 auto;
 }

 .point__img img {
   width: 100%;
 }

.point__inner {
  display: block;
  padding: 20px;
 }

.point__item {
  margin-top: 10px;
 }

.point__num {
  width: 45px;
  height: auto;
  margin-bottom: -10px;
  margin-right: 20px;
  margin-left: auto;
 }

.point__num-01 {
   width: 40px;
 }

.point__num--right{
  width: 45px;
  margin-bottom: -12px;
  margin-right: 20px;
 }

.point__title {
  margin: 0;
  padding: 20px;
  font-size: 20px;
  line-height: 1.6;
 }

.point__item--reverse .point__title {
  text-align: left;
  padding: 20px;
 }
}

/* ----------------------------------------------------
  コース紹介（course）
---------------------------------------------------- */

.course {
  background: url("img/common/bg-yellow.png") repeat;
}

.course__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}

.course-card {
  border-radius: 10px;
  padding: 24px;
}

.course-card__box {
  background: #fff;
  padding-bottom: 10px;
}

.course-card__name {
  margin: 0 0 15px;
  font-size: 30px;
  text-align: center;
  color: #fff;
  margin-top: -3px;
}

.course-card__img img {
  display: block;
  width: 100%;
  height: auto;
}

.course-card__text {
  margin: 0;
  padding: 30px;
  line-height: 1.8;
}

/* 詳しく見る */
.course-card__btn {
  display: block;
  padding: 5px;
  text-align: center;
  background: #fff;
  border-radius: 5px;
  font-size: 16px;
  width: calc(100% - 40px); /* ←左右20pxずつ引く */
  margin: 0 20px 20px;
}

/* 色 */
.course-card--red {
  background: #E3023E;
}

.course-card--orange {
  background: #EC6918;
}

.course-card--green {
  background: #23AC39;
}

.course-card--blue {
  background: #17499D;
}

.course-card__btn--red {
  border: 1px solid #E3023E;
}

.course-card__btn--orange {
  border: 1px solid #EC6918;
}

.course-card__btn--green {
  border: 1px solid #23AC39;
}

.course-card__btn--blue {
  border: 1px solid #17499D;
}

@media screen and (max-width:767px) {
  .course__list {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
  }

  .course-card {
    padding: 20px;
  }

  .course-card__text {
    padding: 20px;
    line-height: 1.8;
    min-height: 0;
  }

  .course-card__box {
    padding-bottom: 5px;
  }

  .course-card__name {
    font-size: 28px;
  }
}

/* ----------------------------------------------------
  新着＆お知らせ（top-news）
---------------------------------------------------- */

.top-news {
  background: url("img/common/bg-beige.png") repeat;
  padding: 80px 0;
}

.top-news__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 60px;
  align-items: flex-start;
}

.top-news__heading {
  width: 100%;
  max-width: 250px;
}

.top-news__en {
  font-size: 20px;
  letter-spacing: 0.4em;
  margin-bottom: 18px;
  line-height: 1;
  text-align: center;
}

.top-news__title {
  font-size: 32px;
  line-height: 1.4;
  margin-bottom: 28px;
  text-align: center;
}

.top-news__title::after {
  content: "";
  display: block;
  width: 200px;
  height: 30px;
  margin: 20px auto 0;
  background: url("img/common/ttl-deco.png") no-repeat center; background-size:contain;
}

.top-news__content {
  flex: 1;
  min-width: 0;
}

.top-news__list {
  border-top: 1px solid rgba(90, 65, 40, 0.12);
}

.top-news__item {
  display: grid;
  grid-template-columns: 120px 140px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid rgba(90, 65, 40, 0.12);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.top-news__item:hover {
  opacity: 0.7;
}

.top-news__date {
  font-size: 16px;
  color: #6b6b6b;
  white-space: nowrap;
}

.top-news__category {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 28px;
  padding: 4px 16px;
  border-radius: 999px;
  background: #9b9b9b;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.top-news__text {
  font-size: 18px;
  line-height: 1.7;
  min-width: 0;
  color: #47331C;

}

.top-news__new {
  display: inline-block;
  margin-left: 10px;
  color: #E3023E;
  font-size: 16px;
}

.top-news__more {
  margin-top: 28px;
  text-align: right;
}

.top-news__more a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #47331C;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.top-news__more a:hover {
  opacity: 0.7;
}

.top-news__arrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #5a4128;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.top-news__empty {
  color: #5a4128;
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .top-news {
    padding: 40px 0;
  }

  .top-news__inner {
    display: block;
  }

  .top-news__heading {
    width: 100%;
    margin-bottom: 40px;
    margin: 0 auto;
  }

  .top-news__en {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .top-news__title {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .top-news__title::after {
    width: 230px;
    height: 30px;
  }

  .top-news__item {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px 0;
  }

  .top-news__date {
    font-size: 14px;
  }

  .top-news__category {
    width: fit-content;
    font-size: 12px;
  }

  .top-news__text {
    font-size: 16px;
    line-height: 1.6;
  }

  .top-news__new {
    font-size: 14px;
    margin-left: 8px;
  }

  .top-news__more {
    margin-top: 22px;
  }

  .top-news__more a {
    font-size: 16px;
    gap: 10px;
  }

  .top-news__arrow {
    width: 20px;
    height: 20px;
    font-size: 13px;
  }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
.top-news__inner {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-direction: column;
}

.top-news__heading {
  width: 100%;
  max-width: 500px;
}

.top-news__en {
  font-size: 21px;
}

.top-news__title {
  font-size: 40px;
}

.top-news__title::after {
  width: 300px;
  height: 30px;
 }
}

 /* ----------------------------------------------------
  生徒さんの声（voice)
---------------------------------------------------- */

.voice__inner {
  display: flex;
  gap: 20px;
  margin-top: 80px;
}

.voice__item {
  flex: 1;
  padding: 30px 30px;
  border-radius: 10px;
  position: relative;
}

/* 背景色 */
.voice__item--green {
  background: #eaf4ec;
}

.voice__item--pink {
  background: #f7e9ec;
}

.voice__item--orange {
  background: #f5ebe2;
}

/* 丸の線 */
.voice__item--green .voice__photo {
  border: 5px solid #eaf4ec;
}

.voice__item--pink .voice__photo {
  border: 5px solid #f7e9ec;
}

.voice__item--orange .voice__photo {
  border: 5px solid #f5ebe2;
}

/* 画像 */
.voice__photo {
  width: 195px;
  height: 195px;
  object-fit: cover;
  border-radius: 50%;
}

.voice__img-wrap {
  position: relative;
  text-align: center;
  margin-top: -60px;
}

/* Voiceラベル */
.voice__label {
  position: absolute;
  right: -15px;
  bottom: 0;
  transform: rotate(-17deg);
  transform-origin: center;
}

/* 見出し */
.voice__lead {
  font-size: 22px;
  margin: 20px 0;
  text-align: justify;
  text-justify: inter-ideograph;
  line-height: 1.6em;
  letter-spacing: -0.02em;
}

/* 本文 */
.voice__text {
  margin-bottom: 20px;
}

/* 下の情報 */
.voice__info {
  font-size: 18px;
  line-height: 1.5em;
  color: #666;
  border-top: 1px dashed #ccc;
  padding-top: 10px;
  margin-bottom: 10px;
}

@media screen and (max-width:767px) {
  .voice__inner {
    flex-direction: column;
    gap: 60px;
    margin-top: 75px;
  }

  .voice__info {
    font-size: 16px;
  }

  .voice__item {
    padding: 20px 20px;
  }

  .voice__photo {
    width: 150px;
    height: 150px;
    border: 3px solid #fff;
  }

  .voice__lead {
    text-align: justify;
    text-justify: inter-ideograph;
  }

  .voice__label-sp img {
    width: 100px;
    text-align: center;
    margin-bottom: 10px;
    margin-top: -8px;
  }
}

@media screen and (max-width: 860px) {
  .voice__inner {
    flex-direction: column;
    gap: 60px;
  }

  .voice__item {
    width: 100%;
  }
}

@media (min-width:768px) and (max-width:859px) {
  .sp {
    display: block;
  }

  .voice__label-sp img {
    width: 100px;
    text-align: center;
    margin-bottom: 10px;
  }
}

 /* ----------------------------------------------------
  開室の想い（profile）
---------------------------------------------------- */

.profile {
  background: url("img/common/bg-deco.png") no-repeat center bottom 10% / 1418px,
              url("img/common/bg-beige.png") repeat;
}

.profile__inner {
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  max-width: 800px;
}

.youtube-01 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 60px 0 80px 0;
}

.youtube-01 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.profile__text {
  line-height: 2em;
}

.profile__text-02 {
  line-height: 2em;
  margin-top: 60px;
}

.profile__teacher-photo img {
  width: 336px;
  display: block;
  margin: 0 auto;
  border-radius: 99%;
  margin-top: 60px;
}

.teacher-name {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 12px;
  margin-top: 30px;
}

.teacher-name__label {
  margin: 0;
  font-size: 18px;
  margin-bottom: -2px;
}

.teacher-name__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.teacher-name__ruby {
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.3em;
}

.teacher-name__name {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

@media screen and (max-width:767px) {
  .youtube-01 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .profile__teacher-photo img {
    margin-top: 30px;
    width: 200px;
  }

  .teacher-name__label {
    font-size: 15px;
    margin-bottom: -2px;
  }

  .teacher-name__name {
    font-size: 22px;
  }

  .teacher-name__ruby {
    font-size: 10px;
  }

  .profile__text-02 {
     margin-top: 30px;
 }
}

 /* ----------------------------------------------------
  アクセス（access）
---------------------------------------------------- */

.access {
  background: url("img/common/bg-yellow.png") repeat;
}

.access__inner{
  background: #fff;
  border-radius: 10px;
  margin-top: 60px;
  padding: 30px;
}

.access-map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin-bottom: 30px ;
  margin-top: 0;
}

.access-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.access-address  {
  margin-bottom: 0;
}

.access-url {
  margin-bottom: 0;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

@media screen and (max-width:767px) {
  .access__inner {
    padding: 20px;
    padding-top: 2px;
    margin-bottom: 40px;
    margin-top: 30px;
  }

  .access-map {
    padding-top: 70%;
    margin-bottom: 20px ;
    margin-top: 20px;
  }
}

/* CTA
---------------------------------------------------- */

.cta {
 padding: 100px 0 50px 0;
}

/* 上のコピー */
.cta__sub {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}

/* バンザイ装飾 */
.cta__deco {
  width: 20px;
  height: auto;
  flex-shrink: 0;
}

.cta__sub-text {
  margin: 0;
  font-size: 30px;
  font-family: "tsukushi", sans-serif;
}

.cta__main {
  font-size: 50px;
  letter-spacing: -0.05em;
  margin-bottom: 60px;
  text-align: center;
}

.cta__main::after {
  content: "";
  display: block;
  width: 300px;
  height: 30px;
  margin: 35px auto 0;
  background: url("img/common/ttl-deco.png") no-repeat center; background-size:contain;
}

/* ボタン */

a.cta__btn {
  display: block;
  background:#E70011;
  color: #fff;
  font-size: 35px;
  text-align: center;
  padding: 30px;
  border-radius: 20px;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: 0.05em;

  box-shadow: 0 6px 0 #b0000c;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}

.cta__btn:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #b0000c;
  opacity: 0.9;
}

@media screen and (max-width:767px) {
  a.cta__btn {
    font-size: clamp(20px, 4vw, 22px);
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    line-height: 1.5;

    box-shadow: 0 4px 0 #b0000c;
  }

  .cta {
    padding: 0;
  }

  .cta__main {
    margin-bottom: 20px;
  }

  .cta__main::after {
    width: 230px;
    height: 30px;
    margin-top: 20px;
  }

  .cta__main {
    font-size: 32px;
  }

  .cta__sub-text {
   font-size: 20px;
 }

 .cta__deco {
   width: 13px;
 }

 .cta__sub {
  gap: 5px;
 }
}

 /* ----------------------------------------------------
  フッター（footer）
---------------------------------------------------- */

.footer__top {
  background: #fff;
  position: relative;
  padding: 50px 0 50px;
}

.footer__top::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: url("img/common/rainbow-bar.png") repeat-x;
  position: absolute;
  top: 0;
  left: 0;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.footer__info {
  width: 26%;
}

.footer__logo {
  margin-bottom: 30px;
}

.footer__logo img {
  display: block;
  width: 250px;
  height: auto;
}

.footer__address {
 font-size: 16px;
 line-height: 1.75em;
}

.footer__nav-wrap {
  display: flex;
  gap: 0;
  width: 31%;
}

.footer__nav-block {
  position: relative;
  padding: 0 22px;
  border-right: 1px solid #cdbda8;
}

.footer__nav-block:first-child {
  border-left: 1px solid #cdbda8;
}

.footer__list a {
  white-space: nowrap;
  color: #47331C;
}

.footer__heading {
  display: inline-block;
  width: 130px;
  margin: 0 auto;
  text-align: center;
  padding: 5px 18px;
  background: #4b351b;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.footer__list {
  margin: 10px;
  font-size: 16px;
  line-height: 2em;
}

.footer__list li {
  position: relative;
  padding-left: 14px;
}

.footer__list li:last-child {
  margin-bottom: 0;
}

.footer__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}

.footer__sns {
  display: flex;
  width: 35%;
  position: relative;
  gap: 30px;
  padding-left: 40px;
}

.footer__sns::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #cdbda8;
}

.footer__sns-item {
  text-align: center;
}

.footer__qr {
  display: block;
  width: 110px;
  height: 110px;
  margin: 0 auto 16px;
}

a.footer__sns-btn {
  display: inline-block;
  min-width: 120px;
  padding: 8px 14px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}

a.footer__sns-btn--instagram {
  background: #DA46B0;
  box-shadow: 0 5px 0 #bd3998;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}

a.footer__sns-btn--line {
  background: #05B64D;
  box-shadow: 0 5px 0 #069d42;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
}

a.footer__sns-btn:hover {
  transform: translateY(2px);
  opacity: 0.9;
}

.footer__bottom {
  background: url("img/common/bg-beige.png") repeat;
  padding: 22px 0;
  text-align: center;
}

.footer__copyright {
  margin: 0;
  font-size: 14px;
  text-align: center;
  opacity: 0.8;
}

.footer__icon {
  display: block;
  width: 40px;
  height: auto;
  margin: 0 auto 10px;
}


@media screen and (max-width: 767px) {
  .footer__inner {
    display: block;
  }

  .footer__info,
  .footer__nav-wrap,
  .footer__sns {
    width: 100%;
  }

  .footer__info {
    margin-bottom: 32px;
    text-align: center;
  }

  .footer__logo img {
    margin: 0 auto 20px;
    width: 220px;
  }

  .footer__nav-wrap {
    display: block;
    margin-bottom: 32px;
  }

  .footer__nav-block {
    padding: 0;
    border: none;
    margin-bottom: 24px;
    text-align: center;
  }

  .footer__nav-block:first-child {
    border-left: none;
  }

  .footer__heading {
    margin-bottom: 12px;
    width: auto; 
  }

  .footer__list {
    margin: 0;
    padding: 0;
    text-align: center;
  }

  .footer__list li {
    padding-left: 0;
  }

  .footer__list li::before {
    display: none;
  }

  .footer__sns {
    justify-content: center;
    padding: 0;
    gap: 20px;
  }

  .footer__sns::after {
    display: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
  .footer__inner {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .footer__info {
    width: 100%;
    text-align: center;
  }

  .footer__logo {
    margin-bottom: 24px;
  }

  .footer__logo img {
    margin: 0 auto;
  }

  .footer__address {
    text-align: center;
  }

  .footer__nav-wrap {
    width: auto;
    display: flex;
    justify-content: center;
  }

  .footer__nav-block {
    width: 190px;
    padding: 0 20px;
    text-align: center;
  }

  .footer__list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 2;
  }

  .footer__list li {
    padding-left: 0;
    position: static;
  }

  .footer__list li::before {
    display: none;
  }

  .footer__sns {
    width: auto;
    display: flex;
    justify-content: center;
    gap: 36px;
    padding-left: 0;
    padding-top: 0;
  }

  .footer__sns::after {
    display: none;
  }

   .footer__heading {
    display: block;
    margin: 0 auto;
  }
 }

/* アイコンとQRコード */
@media screen and (max-width: 859px) {
  .footer__qr {
    display: none;
  }
}

@media screen and (min-width: 860px) {
  .footer__icon {
    display: none;
    width: 40px;
    height: auto;
  }
}

/* =======================================================================
  各教室ページ共通スタイル調整
======================================================================= */

/* 導入 */

.page-intro {
  background: url("img/common/bg-beige.png") repeat;
  text-align: center;
}

.page-intro__title {
  margin: 40px 0;
  line-height: 1.75;
}

.page-intro__txt {
  max-width: 800px;
  margin: 0 auto;
  line-height: 2;
}

.page-intro__txt-02 {
  max-width: 800px;
  margin: 60px auto -20px;
  line-height: 2;
}

/* 画像横並び2枚 */
.page-intro__img {
 display: flex;
 flex-direction: row;
 margin: 0 auto;
 max-width: 800px;
 gap: 20px;
 padding: 30px 0 60px;
}

.page-intro__img img {
  display: block;
  width: calc((100% - 20px) / 2);
  height: auto;
}

/* 画像1枚 */
.page-intro__img-02 {
  max-width: 800px;
  margin: 0 auto;
  margin-top: 60px;
}

/* 画像と文字のブロック */
.page-intro__block-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #47331C;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.page-intro__block {
  display: flex;
  max-width: 800px;
  margin: 30px auto;
  gap: 30px;
}

.page-intro__block-img {
  flex-shrink: 0;
}

.page-intro__block-img img {
  width: 300px;
  height: auto;
}

.page-intro__block-txt {
  line-height: 2;
}

@media screen and (max-width:767px) {
.page-intro__img {
  flex-direction: column;
  gap: 10px;
  padding: 20px 0 40px;
 }

 .page-intro__img img {
  width: 100%;
  margin: 0 auto;
 }

 .page-intro__img-02 {
  margin-top: 30px;
 }

 .page-intro__txt-02 {
  margin-top: 25px;
 }

 .page-intro__block {
    flex-direction: column;
    gap: 0;
  }

  .page-intro__block-img {
    width: 100%;
  }

  .page-intro__block-img img {
    width: 200px;
    margin-bottom: 10px;
  }
}


 /* ----------------------------------------------------
  おすすめ３つのポイント（各教室）
---------------------------------------------------- */

/* 親 */
.sub-point {
  display: flex;
  gap: 24px;
  margin-top: 100px;
}

/* カード */
.sub-point__item {
  position: relative;
  width: 100%;
  border-radius: 20px;
  background: #FCF3E8;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);

}

/* 上（色部分） */
.sub-point__head {
  padding: 20px;
  border-radius: 20px 20px 0 0;
  text-align: center;

  position: relative;
  z-index: 2;
}

/* タイトル */
.sub-point__title {
  color: #fff;
  font-size: 24px;
  line-height: 1.6;
  font-weight: 700;
  margin: 0;
}

/* 丸 */
.sub-point__circle {
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 0;
}

/* 数字 */
.sub-point__number {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  z-index: 3;
}

/* 下テキスト */
.sub-point__body p {
  padding: 30px;
  margin-bottom: 0;
}

/* 色バリエーション */
.sub-point__item--red .sub-point__head,
.sub-point__item--red .sub-point__circle {
  background: #E3023E;
}

.sub-point__item--orange .sub-point__head,
.sub-point__item--orange .sub-point__circle {
  background: #EC6918;
}

.sub-point__item--green .sub-point__head,
.sub-point__item--green .sub-point__circle {
  background: #2aa84a;
}

.sub-point__item--blue .sub-point__head,
.sub-point__item--blue .sub-point__circle {
  background: #17499D;
}

@media screen and (max-width:767px) {
.sub-point {
  flex-direction: column;
  gap: 50px;
  margin-top: 70px;
 }
 .sub-point__circle {
  top: -38px;
  width: 80px;
  height: 80px;
}

/* 数字 */
.sub-point__number {
  font-size: 24px;
 }

 .sub-point__body p {
  padding: 20px;
 }

 .sub-point__title {
  font-size: 22px;
  line-height: 1.4;
 }

 .sub-point__head {
  padding: 18px;
 }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
  .sub-point__title {
    font-size: 20px;
  }
}

 /* ----------------------------------------------------
  レッスンのコース（各教室）
---------------------------------------------------- */

.lesson {
  background: url("img/common/bg-yellow.png") repeat;
}

/* 親 */
.lesson__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1000px;
  margin: 60px auto 0;
}

.lesson__list-02 {
   display: flex;
   flex-direction: column;
   gap: 30px;
   max-width: 1000px;
   margin: -50px 0;
}

/* カード */
.lesson-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

/* ヘッダー */
.lesson-card__head {
  padding: 20px 30px;
  display: flex;
  gap: 20px;
}

/* タイトル */
.lesson-card__title {
  color: #fff;
  font-size: 30px;
  margin: 0;
  line-height: 1.4;
}

/* タイトル横（白） */
.lesson-card__title--note {
  background-color: #fff;
  color: #E3023E;
  border-radius: 5px;
  padding: 5px 20px;
  margin: 0;
  font-weight: 500;
}

/* タイトル横（黄色） */
.lesson-card__title--note-02 {
  background-color: #FCF800;
  color: #E3023E;
  border-radius: 5px;
  padding: 5px 20px;
  margin: 0;
  font-weight: 500;
}

/* 本文レイアウト */
.lesson-card__body {
  display: flex;
  gap: 24px;
  padding: 30px;
  align-items: flex-start;
}

/* 左 */
.lesson-card__content {
  flex: 1;
}

/* ラベル */
.lesson-card__labels {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.lesson-card__label {
  background: #47331C;
  color: #fff;
  font-size: 16px;
  padding: 5px 10px;
  border-radius: 4px;
  line-height: 1;
}

/* テキスト */
.lesson-card__text {
  margin: 0;
}

/* 画像 */
.lesson-card__image {
  width: 34%;
  min-width: 160px;
}

.lesson-card__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  margin-top: -80px;
}

.lesson--rhythmic .youtube-01 {
  margin: 40px 0;
}

/* 色 */
.lesson-card--red .lesson-card__head {
  background: #E3023E;
}

.lesson-card--orange .lesson-card__head {
  background: #ef6c17;
}

.lesson-card--green .lesson-card__head {
  background: #2aa84a;
}

.lesson-card--blue .lesson-card__head {
  background: #17499D;
}

/* SP */
@media screen and (max-width: 767px) {
  .lesson__list {
    gap: 20px;
    margin-top: 30px;
  }

  .lesson-card__body {
    flex-direction: column-reverse;
    padding: 20px;
  }

  .lesson-card__image {
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  .lesson-card__title {
    font-size: 26px;
    text-align: center;
  }

  .lesson-card__text {
    font-size: 14px;
  }

  .lesson-card__image img {
    margin-top: 0;
  }

  .lesson-card__head {
    flex-direction: column;
    gap: 10px;
  }

  .lesson-card__title--note,
  .lesson-card__title--note-02 {
    width: fit-content;
    margin: 0 auto;
    padding: 4px 40px;
  }

  .lesson--rhythmic .youtube-01 {
    margin: 10px 0;
 }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
 .lesson-card__image img {
    margin-top: 0;
  }
}

 /* ----------------------------------------------------
  生徒さんの声（各教室）
---------------------------------------------------- */
.voice--course__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 50px;
}

.voice--course__item {
  width: calc((100% - 20px) / 2); 
  padding: 30px;
  border-radius: 10px;
  position: relative;
  margin-top: 30px;
}

/* 背景色 */
.voice__item--red-pastel {
  background: #f7e9ec;
}

.voice__item--orange-pastel {
  background: #FDF1EA;
}

.voice__item--green-pastel {
  background: #eaf4ec;
}

.voice__item--blue-pastel {
  background: #EBF2FF;
}

/* 丸の線 */
.voice__item--red-pastel .voice__photo {
  border: 5px solid #f7e9ec;
}

.voice__item--orange-pastel .voice__photo {
  border: 5px solid #FDF1EA;
}

.voice__item--green-pastel .voice__photo {
  border: 5px solid #eaf4ec;
}

.voice__item--blue-pastel .voice__photo {
  border: 5px solid #EBF2FF;
}

/* 画像 */
.voice__photo {
  width: 195px;
  height: 195px;
  object-fit: cover;
  border-radius: 50%;
}

.voice__img-wrap {
  position: relative;
  text-align: center;
  margin-top: -60px;
}

/* Voiceラベル */
.voice--course__label {
  width: 100px;
  margin: 10px auto;
}

.voice__label img,
.voice__label-sp img {
  /* style.css 69行目の img { width: 100%; } がグローバルで効いており、
     SVG画像が親要素いっぱいに広がってしまうため、サイズを固定 */
  width: 90px !important;
  height: auto !important;
}

@media screen and (max-width:767px) {
  .voice--course__inner {
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
  }

  .voice--course__item {
  width: 100%; 
  margin-top: 30px;
  }

  .voice__photo {
    width: 150px;
    height: 150px;
  }

  .voice--course__label {
    margin-top: 0;
  }
}

/* ----------------------------------------------------
  レッスン料金（price）
---------------------------------------------------- */

.price__inner {
  display: flex;
  gap: 24px;
  margin: 60px 0 80px;
}

.price__item {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.price__head {
  padding: 20px;
  text-align: center;
}

.price__title {
  color: #fff;
  font-size: 28px;
  margin: 0;
  line-height: 1.2;
}

.price__title-note {
  display: block;
  color: #fff;
  font-size: 18px;
  margin-top: 6px;
  line-height: 1.4;
}

.price__body {
  padding: 20px;
  flex: 1;
}

.price__main {
  font-size: 30px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  text-align: center;
}

.price__main span {
  font-size: 14px;
  font-weight: 400;
}

.price__sub {
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  margin: 10px auto 10px;
}

.price__note {
  font-size: 18px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid #ccc;
  line-height: 1.4;
  text-align: center;
}

.line-title {
  text-align: center;
  border-top: 1px solid #857462;
  border-bottom: 1px solid #857462;
  padding: 10px 0;
  margin: 60px auto -20px;
}

.line-title span {
  background: #fff; /* 背景色と同じ */
  padding: 0 16px;
}

/* スケジュール */
.price__schedule {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 50px;
}

.price__schedule-title {
  font-size: 28px;
  margin: 0;
  line-height: 1.6;
  text-align: center;
  padding: 20px;
}

.price__schedule-title-02 {
  font-size: 24px;
  margin: 0;
  line-height: 1.6;
  text-align: center;
  padding: 23px;
}

/* 色 */
.price__item--red .price__head {
  background: #E3023E;
}

.price__item--orange .price__head {
  background: #EC6918;
}

.price__item--green .price__head {
  background: #23AC39;
}

.price__item--blue .price__head {
  background: #17499D;
}

.price__body--red-pastel {
  background-color: #f7e9ec;
}

.price__body--orange-pastel {
  background-color: #FDF1EA;
}

.price__body--green-pastel {
  background-color: #E5EFE6;
}

.price__body--blue-pastel {
  background: #EBF2FF;
}

/* 線 */
.schedule__line {
  width: 80%;
  margin: -10px auto;
  border-top: 1px solid #ccc;
}

.price__title-age {
  text-align: center;
  color: #17499D;
  font-size: 35px;
  margin: 60px auto -40px;
}

@media screen and (max-width: 767px) {
  .price__inner {
   flex-direction: column;
   gap: 20px;
   margin: 30px 0 40px;
 }

  .price__title {
   font-size: 30px;
 }

  .price__title-note {
   font-size: 18px;
 }

 .price__schedule-title {
   font-size: 23px;
 }

 .price__schedule {
   margin-top: 30px;
 }

 .line-title {
  padding: 10px 0;
  margin: 40px auto -10px;
 }

 .price__schedule-title-02 {
  font-size: 20px;
 }
}

@media screen and (max-width:767px) {
 .price__title-age {
  margin: 30px auto -40px;
 }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
 .price__inner {
  gap: 20px;
 }
}

/* ----------------------------------------------------
  お問い合わせフォーム
---------------------------------------------------- */

.contact {
  background: url("img/common/bg-yellow.png") repeat;
}

.contact__box {
  max-width: 800px;
  margin: 60px auto 0;
  padding: 40px 40px 0;
  background: #fff;
  border: 4px solid #47331C;
  border-radius: 20px;
}

.contact__box-title {
  padding: 10px 0;
  text-align: center;
  border-top: 1px solid #857462;
  border-bottom: 1px solid #857462;
}

.contact-note {
  display: block;
  margin-top: 10px;
  line-height: 1.5;
}

/* テーブルフォーム */
table.form {
  width: 100%;
  border-collapse: collapse;
}

table.form th,
table.form td {
  padding: 20px 15px;
  border-top: 1px solid #eee;
}

table.form th {
  width: 35%;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.7;
  text-align: left;
  vertical-align: top;
}

table.form td {
  width: 65%;
  vertical-align: middle;
}

table.form tr:first-child th,
table.form tr:first-child td {
  border-top: none;
}

table.form td:last-child {
  text-align: center;
}

/* 必須・任意 */
.hissu,
.nini {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
  color: #fff;
}

.hissu {
  background: #cd4a38;
}

.nini {
  background: #777;
}

/* プレースホルダー */
input::placeholder,
textarea::placeholder {
  color: #ccc;
  font-size: 14px;
}

/* Contact Form 7 全体 */
div.wpcf7 {
  display: block;
  width: 100%;
  margin: 0 auto !important;
  background: transparent;
  box-shadow: none;
}

div.wpcf7 p {
  margin: 0;
  padding: 0;
  line-height: 2;
}

/* 入力欄 */
div.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.wpcf7 textarea,
.wpcf7 select {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

div.wpcf7 textarea {
  min-height: 215px;
  resize: vertical;
}

div.wpcf7 select {
  min-height: 60px;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  border-color: #009de1;
  outline: none;
}

/* エラー表示 */
.wpcf7 .wpcf7-not-valid {
  background: #ffb6c1;
}

.wpcf7 span.wpcf7-not-valid-tip {
  font-size: 80%;
}

.wpcf7 .wpcf7-response-output {
  margin: 10px 0 0;
  padding: 8px 14px;
  border-radius: 4px;
}

.wpcf7 .wpcf7-validation-errors {
  color: #B94A48;
  background: #F2DEDE;
  border: 1px solid #EED3D7;
}

.wpcf7 .wpcf7-mail-sent-ok {
  color: #3A87AD;
  background: #D9EDF7;
  border: 1px solid #BCE8F1;
}

/* 送信ボタン */
input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 30px;
  border: none !important;
  border-radius: 20px !important;
  background: #E70011;
  color: #fff;
  font-size: 25px !important;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 0 6px 0 #b0000c;
  transition: transform 0.1s, box-shadow 0.1s, opacity 0.1s;
  -webkit-appearance: none;
}

input[type="submit"]:hover {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #b0000c;
  opacity: 0.9;
}

/* ------------------------------チェックボックスのデザイン------------------------------ */
.wpcf7-list-item {
  display: inline-block;
  margin: 0 20px 14px 0;
  padding: 0;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* コース・曜日だけ */
.wpcf7-list-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #00b498;
  cursor: pointer;

  transform: translateY(3px);
}

/* 同意チェックはリセット */
.contact-privacy__check input[type="checkbox"] {
  transform: none;
}

.wpcf7-list-item-label {
  padding-left: 5px;
  line-height: 1.6;
}

.wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
}

.wpcf7-list-item label:hover .wpcf7-list-item-label::after {
  border-color: #00b498;
}

.wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  opacity: 1;
}

.wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  border-color: #00b498;
}

@media screen and (max-width: 767px) {
  .wpcf7-list-item {
    display: block;
    margin: 0 0 12px;
  }
}

/* スマホ */
@media screen and (max-width: 767px) {
  .contact__box {
    margin-top: 20px;
    padding: 24px 20px 0;
    border-width: 3px;
    border-radius: 12px;
  }

  .contact__box-title {
    font-size: 24px;
    line-height: 1.5;
  }

  table.form,
  table.form tbody,
  table.form tr,
  table.form th,
  table.form td {
    display: block;
    width: 100%;
  }

  table.form th {
    padding: 16px 0 8px;
    border-top: 1px solid #eee;
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
  }

  table.form td {
    padding: 0 0 16px;
    border-top: none;
    text-align: left;
  }

  table.form tr:first-child th {
    border-top: none;
  }

  table.form td:last-child {
    text-align: left;
  }

  .contact-note {
    margin-top: 6px;
    font-size: 13px;
  }

  .wpcf7-list-item {
    margin-bottom: 12px;
  }

  input[type="submit"] {
    padding: 15px;
    font-size: 16px !important;
    border-radius: 10px !important;
  }
}

/* ----------------------------------------------------
  ブログ一覧
---------------------------------------------------- */
.blog {
  background: url("img/common/bg-beige.png") repeat;
}

ul.post {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  
  max-width: 1000px; /* ← ここ重要 */
  margin: 0 auto; /* ← 中央寄せ */
}

ul.post > li {
  width: 30%;
  margin: 0;
  padding: 0 0 20px 0;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
}

ul.post li p {
  font-size: 12px;
  margin: 0;
  padding: 0 20px;
  color: #7b7b7b;
}

ul.post img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin: 0 auto 15px auto;
}

ul.post li h3 {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 20px;
  margin: 0;
}

ul.post li h3 a {
  color: #7b7b7b;
}

.relative {
  position: relative;
}

.relative ul.post-categories {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  bottom: 40px;
  left: 20px;
  z-index: 10;
}

.relative ul.post-categories li {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0 0.5em;
  height: 20px;
  line-height: 15px;
  background: #333;
  border-radius: 30px;
  box-shadow: none;
  color: #fff;
}

.relative ul.post-categories li a {
  font-size: 10px;
  color: #fff;
}

.ymd {
  font-size: 12px;
  color: #7b7b7b;
  padding: 0 20px;
}

/* ページャー */
#pagenation { text-align: center; margin-top: 30px; }
#pagenation #pagenation-list { display: inline-block; }
#pagenation #pagenation-list li { float: left; list-style: none; padding: 0; margin: 0 5px 5px 0; }
#pagenation #pagenation-list a,
#pagenation #pagenation-list span { display: block; padding: 4px 9px; font-size: 12px; text-align: center; }
#pagenation #pagenation-list .current { background: #DEDEDE; color: #696969; border: 1px solid #E3E3E3; }
#pagenation #pagenation-list li a { color: #333; border: 1px solid #6B6B6B; text-decoration: none; }
#pagenation #pagenation-list a:hover { background: #F0F0F0; }

@media screen and (max-width: 767px) {
  ul.post li {
    width: 100%;
    max-width: 320px;
    margin: 10px 0;
  }

  ul.post li:nth-child(3n+2) {
    margin: 10px 0;
  }

  ul.post {
  gap: 10px;
 }
}

/* ----------------------------------------------------
  記事ページ
---------------------------------------------------- */

.single {
  background: url("img/common/bg-beige.png") repeat;
}

.single__post {
  background: #fff;
  border-radius: 10px;
  padding: 60px 80px;
}

.single__title {
  border-top: 1px solid #47331C;
  border-bottom: 1px solid #47331C;
  padding: 14px 0;
  margin: 10px 0 20px;
}

.single__cat {
  font-size: 15px;
  margin-bottom: 40px;
}

.single__date {
  margin-bottom: 10px;
}

.wp-block-heading {
  border-bottom: 1px solid #47331C;
  line-height: 2;
  margin: 80px 0 50px;
}

.single {
  background: url("img/common/bg-beige.png") repeat;
}

.single__post {
  background: #fff;
  border-radius: 10px;
  padding: 60px 80px;
}

.single__title {
  border-top: 1px solid #47331C;
  border-bottom: 1px solid #47331C;
  padding: 14px 0;
  margin: 10px 0 20px;
}

.single__cat {
  font-size: 15px;
  margin-bottom: 40px;
}

.single__date {
  margin-bottom: 10px;
}

.wp-block-heading {
  border-bottom: 1px solid #47331C;
  line-height: 2;
  margin: 80px 0 50px;
}

.wp-block-image {
  margin-top: 80px;
}



/* 関連記事 */
.kanren {
  font-weight: 500;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
.single__post {
  padding: 30px 20px;
 }

.single__title {
  font-size: 25px;
  padding: 15px 0;
  margin: 10px 0;
 }

.single__cat {
  margin-bottom: 20px;
 }

.wp-block-heading {
  line-height: 2;
  margin: 30px 0 30px;
  font-size: 20px;
 }

.kanren {
  font-weight: 500;
  margin: 30px 0 10px;
 }

ul.post  {
 margin-top: 0; 
 }

.single {
  padding-top: 35px;
 }
}

/* 関連記事 */
.kanren {
  font-weight: 500;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
.single__post {
  padding: 30px 20px;
 }

.single__title {
  font-size: 25px;
  padding: 15px 0;
  margin: 10px 0;
 }

.single__cat {
  margin-bottom: 20px;
 }

.wp-block-heading {
  line-height: 2;
  margin: 30px 0 30px;
  font-size: 20px;
 }

.kanren {
  font-weight: 500;
  margin: 30px 0 10px;
 }

ul.post  {
 margin-top: 0; 
 }

.single {
  padding-top: 35px;
 }

 .wp-block-image {
  margin-top: 30px;
 }
}


/* ----------------------------------------------------
  404
---------------------------------------------------- */

.not-found {
  background: url("img/common/bg-beige.png") repeat;
}

.not-found__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.not-found__code {
  font-size: 24px;
  font-weight: 700;
  color: #E70011;
  margin-bottom: 20px;
}

.not-found__title {
  font-size: 40px;
  margin-bottom: 30px;
}

.not-found__text {
  margin-bottom: 10px;
  line-height: 1.8;
}

.not-found__btn {
  margin-top: 40px;
}

.not-found__btn {
  margin-top: 40px;
  display: inline-block;
  width: auto;
  max-width: 600px;
}

.not-found__btn a {
  font-size: 30px;
  padding: 20px 40px;
}


@media screen and (max-width: 767px) {
  .not-found__code {
    font-size: 20px;
  }

  .not-found__title {
    font-size: 28px;
    line-height: 1.5;
  }

  .not-found__btn {
    margin-top: 20px;
  }

  .not-found__btn a {
    font-size: 20px;
    padding: 20px 40px;
 }
}

/* ----------------------------------------------------
  サンクスページ
---------------------------------------------------- */

.thanks {
  background: url("img/common/bg-beige.png") repeat;
}

.thanks__box {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 20px;
  text-align: center;
}

.thanks__title {
  font-size: 40px;
  margin-bottom: 30px;
  text-align: center;
}

.thanks__text {
  margin-bottom: 12px;
  line-height: 1.8;
}

.thanks__btn {
  margin-top: 40px;
  display: inline-block;
  width: auto;
  max-width: 600px;
}

.thanks__btn a {
  font-size: 30px;
  padding: 20px 40px;
}

@media screen and (max-width: 767px) {
.thanks__box {
  margin-top: 24px;
  border-width: 3px;
  }

.thanks__btn a {
  font-size: 20px;
  padding: 20px 40px;
 }

 .thanks__btn {
  margin-top: 20px;
 }

 .thanks__title {
  font-size: 28px;
  line-height: 1.5;
 }
}

/* ----------------------------------------------------
  個人情報保護方針
---------------------------------------------------- */
.contact-privacy__box {
  max-height: 180px;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  box-sizing: border-box;
}

.contact-privacy__box p {
  margin: 0 0 1em;
  font-size: 12px;
}

.contact-privacy__box p:last-child {
  margin-bottom: 0;
}

.contact-privacy__check {
  margin-top: 14px;
  line-height: 1.6;
}

.contact-privacy__check .wpcf7-list-item {
  margin: 0;
}