@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* 基本設定 */
body {
  font-family: 'Cinzel', serif; /* 高級感のあるフォント */
}

.course-menu-wrapper {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.course-title .course-intro {
  display: block; 
  font-size: 0.6em;
  color: #7f6d4d;
  margin-bottom: 0px;
  font-weight: normal;
}

.course-description {
  text-align: center;
  font-size: 80%;
  margin-bottom: 20px;
}

/* セクションレイアウト */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.wp-block-column {
  flex: 1;
  min-width: 300px;
}

.my-menu {
  padding: 30px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.my-menu:hover {
  transform: translateY(-5px); /* ホバー時のアニメーション */
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
}

/* メニュー内テキスト */
.menu-heading {
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  color: #3b2e1c;
  border-bottom: 2px solid #7f6d4d;
  padding-bottom: 10px;
  margin-bottom: 10px;
  text-align: center;
}

.menu-time {
  text-align: center;
  color: #7f6d4d;
}

.my-price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #3b2e1c;
  padding: 10px 0;
}

.my-price strong {
  color: #c10000;
}

.mbottom20 {
  margin-bottom: 20px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
  }

  .my-menu {
  font-weight: normal; /* 必要に応じて太さを調整 */
  color: #333; /* 文字色 */
}

  .menu-heading {
    font-size: 22px;
  }


}


.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
}

.wp-block-column.point-column {
  flex: 1;
  background-color: #f9f7f4;
  padding: 27px;
  margin-bottom: 20px; /* カラム間の下マージン (レスポンシブ用) */
}


.read-more {
display: inline-block;
float: right;
text-align: right; / テキスト自体も右寄せ (念のため) */
margin-top: 1em; /* 必要に応じて上マージンを追加 */
}

.point-number {
  color: #7f6d4d;
}

.image-container {
position: relative; /* アスペクト比を維持するための基準 /
width: 100%; / 親要素いっぱいの幅にする /
overflow: hidden; / 画像がコンテナからはみ出さないように /
margin-bottom: 1em; / タイトルとの間隔 */
}
.ratio-3-2::before {
content: "";
display: block;
padding-top: calc(100% * 2 / 3); /* 高さ = 幅 * (高さ / 幅) = 幅 * (2 / 3) */
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* コンテナに合わせて画像をトリミングまたは伸縮 */
}

.point-title {
  color: #7f6d4d;
  margin-top: 0;
  margin-bottom: 1em;
}

.point-separator {
  background-color: #7f6d4d;
  color: #7f6d4d;
  margin: 1em auto; /* 中央寄せ */
}

.point-column p {
  margin-bottom: 1em;
}

.three-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.column {
  flex: 1;
  min-width: 200px;
}

a.column-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}


.cover-block {
  position: relative;
  min-height: 205px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cover-inner {
  position: relative;
  text-align: center;
  background-color: rgba(230, 230, 230, 0.7); /* 半透明の明るいグレー */
  padding: 0.5em 1em;
  border-radius: 6px;
  margin-bottom: 0px!important;
}

.cover-title {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 0px!important;
  text-shadow: 0 0 4px #fff;
}


/* フロート */
.floatleft{float: left;margin: 5px}
.floatright{float: right;margin: 5px}
.al-c{text-align:center}
.al-r{text-align: right}
.al-l{text-align: left}
.clear{clear: both}

/* 画像と文のフレックスボックス */
.media-row {
  display: flex;
  gap: 2em;
  align-items: flex-start;
  margin: 0 50px 80px 50px;
  flex-wrap: wrap;
}
.media-image img {
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}
.media-text {
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .media-row {
    flex-direction: column;
    align-items: center;
    margin: 0 20px 60px 20px;
  }

  .media-image img {
    max-width: 100%;
  }

  .media-text {
    max-width: 100%;
  }
}

/* 文字*/
h3.komidashi{border: none !important; color: #7f6d4d; font-size: 12px !important; font-weight: normal !important; margin-bottom: 0 !important; padding: 0!important; text-align: left;}
a {color: #333;}
.non{text-decoration: none;}
.p-box{
	border: solid 1px rgba(51, 53, 19, 0.5);
    padding: 2em;
    margin: auto;
}

.reserve-link {
  display: inline-block;
  padding: 6px 14px;
  background-color: #00552e;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: background 0.3s ease, transform 0.2s ease;
}
.reserve-link:hover {
  background-color: rgba(0, 0, 0, 0.7);
  transform: translateY(-2px);
  color: #fff;
}


/* 文字サイズ */
.small {font-size: 50%;	font-style: italic}
.f70{font-size: 70%}
.f80{font-size: 80%}
.f90{font-size: 90%}
.f110{font-size: 110%}
.f120{font-size: 120%}
.f150{font-size: 150%}
.f12px{font-size: 12px!important}
.f22px{font-size: 22px!important}

/* 色 */
.white{color:#fff}
.green {color: #00552e}
.red {color: red}
.blue {color: #03c}
.tomato {color: tomato}

/* スペース */
.mtop0{margin-top:0px !important}
.mtop10{margin-top:10px !important}
.mtop20{margin-top:20px !important}
.mtop30{margin-top:30px !important}
.mtop50{margin-top:50px !important}
.mleft10{margin-left:10px !important}
.mleft20{margin-left:20px !important}
.mleft50{margin-left:50px !important}
.mbottom0{margin-bottom:0px !important}
.mbottom10{margin-bottom:10px !important}
.mbottom20{margin-bottom:20px !important}
.mbottom50{margin-bottom:50px !important}
.line-h1rem{line-height: 1rem !important}
.line-h15rem{line-height: 1.5rem !important}
.disp-b{display: block}
.disp-in-b{display: inline-block}

.list-none{list-style-type: none}


.page h2 {
  text-align: center;
  color: #7f6d4d;
  line-height: 1.5;
  margin-bottom: 0.5em;
  padding: 10px;
}
/*投稿日・更新日を非表示*/
.page .date-tags {
 display: none;
}
/*投稿者名を非表示*/
.page .footer-meta {
 display: none;
}

/*キャプションをスマホ最適化*/
.wp-caption {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.wp-caption img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
}

.wp-caption-text {
  text-align: center;
  font-size: 0.9rem;
  padding: 0.5em 0;
}

.aligncenter,
.aligncenter img,
.size-full {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}



.cta_btn09 {
  font-weight: bold; /* 文字の太さ */
  text-align: center;
  letter-spacing: 0.1em;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta_btn09-contact,
.cta_btn09-tel {
  color: #fff;
  position: relative;
  display: block; /* ボタン風に1行を占める */
  text-decoration: none;
  padding: 16px 16px 16px 60px; /* アイコン分の左余白 */
  border-radius: 100vh;
  width: 100%;
  max-width: 350px;
  transition: 0.3s;
  margin: auto; /* 中央寄せ＆上下余白 */
  box-sizing: border-box;
}

.cta_btn09-contact {
  background: #F88400; /* お問い合わせボタン色 */
}

.cta_btn09-tel {
  background: #009944; /* 電話ボタン色 */
}

.cta_btn09-contact::before,
.cta_btn09-tel::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: cover;
}
.cta_btn09-contact::before {
  width: 25px;
  height: 20px;
  background-image: url(https://seotimes.jp/wp-content/uploads/mail.png); /* メールアイコン */
}

.cta_btn09-tel::before {
  width: 18px;
  height: 18px;
  background-image: url(https://seotimes.jp/wp-content/uploads/cta-phone.png); /* 電話アイコン */
}

.cta_btn09 .copy_txt {
  line-height: 1;
  display: inline-block;
  padding: 0.2em 1.5em;
  letter-spacing: 0;
  background: #fff; /* 下文字背景色 */
  font-size: 90%; /* 下文字サイズ */
  border-radius: 5px;
}

.cta_btn09-contact .copy_txt {
  color: #F88400; /* 下文字色 */
}

.cta_btn09-tel .copy_txt {
  color: #009944; /* 下文字色 */
}

.cta_btn09 img {
    width: 1em;
    margin-right: 0.5em;
}

/* マウスオーバーした際のデザイン */
.cta_btn09-contact:hover,
.cta_btn09-tel:hover {
  transform: scale(1.05);
}

/* 本文中の予約ボタン */
.booking-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #00552e;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border: 4px double #fff;
  border-radius: 8px; /* 角を少し丸めます */
  transition: background-color 0.3s, transform 0.3s;
}

.booking-button:hover {
  background-color: #007746; /* 少し明るい緑に変化 */
  transform: scale(1.05);
}

.booking-button .fa {
  margin-right: 8px;
  font-size: 20px;
}


/* スクロールしたら出る予約ボタン */
.booking-cta {
  position: fixed;
  right: 20px;
  bottom: 120px;
  width: 64px;
  height: 173px;
  background: #00552e;
  opacity: 0;
  transform: translateY(20px) scale(1); /* 最初はちょっと下+普通サイズ */
  transition: all 0.8s ease; /* ゆっくり・なめらかに */
  z-index: 1000;
  padding: 10px; /* 枠内に少しスペースを確保 */
  border: 4px double #fff; /* 二重線の白い枠を追加 */
  box-sizing: border-box; /* 枠も含めてサイズを調整 */
}

.booking-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  font-weight: 500;
  text-decoration: none;
}

/* スクロール後に表示する状態 */
.booking-cta.show {
  opacity: 1;
  transform: translateY(0) scale(1.1); /* 少しだけ拡大して出現 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* さらに目立たせるため影を強調 */
}
/* スクロールしたら予約ボタン　ここまで */

/* 電話ボタン */
.phone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #fff; /* 背景は白 */
  color: #00552e; /* 文字色は深緑 */
  font-family: 'Noto Serif JP', serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border: 4px double #00552e; /* 二重線も深緑 */
  border-radius: 8px; /* 角を少し丸める */
  transition: background-color 0.3s, transform 0.3s, color 0.3s;
}

.phone-button:hover {
  background-color: #00552e; /* ホバー時、背景を深緑に */
  color: #fff; /* 文字を白に反転 */
}


/* XO Event Calendarここから---------------- */
.xo-event-calendar {
    margin: 0 auto;
}
.xo-months {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.xo-month-wrap {width: 31%; //カレンダーの横幅の最大を47%とする
}
@media screen and (max-width: 834px) {
    .xo-event-calendar {width: 70%; //カレンダー全体の表示幅の最大を70%とする
    }
    .xo-months {display: block; //カレンダーを縦に並べる
    }
    .xo-month-wrap {width: 100%; //カレンダーの横幅の最大を100%とする
    }
}
/* XO Event Calendarここまで---------------- */


/*-------------------- 吹き出しを作る（ここから）--------------------*/
.kaiwa {
 margin: 40px 0;
 padding : 0 40px;
 position: relative;
}
.kaiwa:after,.bal:before {
 clear: both;
 content: "";
 display: block;
}
.kaiwa-img-left {
 position: absolute;
 left: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa-img-right {
 position: absolute;
 right: 0;
 margin: 0;
 width: 60px;
 height: 60px;
}
.kaiwa  figure img {
 width: 100%;
 height: 100%;
 border: 1px solid #aaa;
 border-radius: 50%;
 margin: 0;
}
.kaiwa-img-description {
 padding: 5px 0 0;
 font-size: 10px;
 text-align: center;
 line-height: 1;
}
.kaiwa-text-right {
 position: relative;
 margin-left: 40px;
 padding: 10px;
 border: 1px solid #192f60;
 border-radius: 10px;
 float: left;
 max-width: 100%;
}
.kaiwa-text-left {
 position: relative;
 margin-right: 40px;
 padding: 10px;
 border: 1px solid #006400;
 border-radius: 10px;
 float: right;
 max-width: 100%;
}
.kaiwa p {
 margin: 0 0 20px;
}
.kaiwa p:last-child {
 margin-bottom: 0;
}
/* 会話 */
.kaiwa-text-right:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #192f60;
 top: 15px;
 left: -20px;
}
.kaiwa-text-right:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-right: 10px solid #fff;
 top: 15px;
 left: -19px;
}
.kaiwa-text-left:before {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #006400;
 top: 15px;
 right: -20px;
}
.kaiwa-text-left:after {
 position: absolute;
 content: '';
 border: 10px solid transparent;
 border-left: 10px solid #fff;
 top: 15px;
 right: -19px;
}
/* 考え毎 */
.think .kaiwa-text-right,.think .kaiwa-text-left {
 border-radius: 30px;
}
.think .kaiwa-text-right:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 left: -12px;
}
.think .kaiwa-text-right:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 left: -19px;
}
.think .kaiwa-text-left:before {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 8px;
 height: 8px;
 top: 15px;
 right: -12px;
}
.think .kaiwa-text-left:after {
 border: 1px solid #aaa;
 border-radius: 50%;
 width: 4px;
 height: 4px;
 top: 20px;
 right: -19px;
}
/*-------------------- 吹き出しを作る（ここまで）--------------------*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/

@media only screen and (min-width: 1001px) {
  .sumaho {display: none!important;}
}
@media screen and (max-width: 1000px){
 .pc {display: none!important}
 }
 
 
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
  .wp-block-columns {
    flex-direction: column;
  }
  .wp-block-column {
    min-width: auto;
  }
  .alignwide {
    max-width: 100%; /* 狭い画面では親要素いっぱいに */
  }
  .wp-block-columns {
    flex-direction: column; /* 縦並び */
  }
  .wp-block-column.point-column {
    margin-bottom: 0;
  }
  main.main, div.sidebar {
        padding: 0 5px 32px 5px;
        margin: 12px 0;
        border-width: 0;
  }
  .booking-cta {
  	position: fixed;
    right: 7px;
    bottom: 90px;
    width: 40px; /* 小さめに変更 */
    height: 70px; /* 幅と高さを合わせて丸に */
    opacity: 0;
    transform: translateY(0) scale(1);
    border: 2px double #fff; /* 白い二重線の枠 */
  }
  .booking-cta.show {
    transform: translateY(0) scale(1.1);
  }
  .booking-cta a {
    font-size: 14px; /* フォントサイズを小さくする */
    line-height: 20px; /* 行間を調整 */
  }
 
 /* メニューを最初は非表示 */
 /* 最初は非表示＋高さゼロで空間を詰める */
body:where(.mblt-header-mobile-buttons, .mblt-header-and-footer-mobile-buttons) {
    margin-top: 0 !important;
}
.mobile-header-menu-buttons {
  opacity: 0;
  visibility: hidden;
  height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease, height 0.6s ease;
}

/* 表示時に高さを元に戻す */
.show-header-menu {
  opacity: 1;
  visibility: visible;
  height: auto;
  overflow: visible;
}

.mobile-footer-menu-buttons {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.show-footer-menu {
  opacity: 1;
  visibility: visible;
}

}


/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}