@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/* 最終手段: YouTubeの邪魔なUIを画面外に強制移動させる */

/* 1. プレーヤー上部のタイトル・日付・チャンネル名を画面外に移動 */
.ytp-title {
    /* 画面の左外に移動させ、視認を完全に不可能にする */
    position: absolute !important;
    left: -9999px !important; 
    top: -9999px !important;
    visibility: hidden !important; 
}

/* 2. 中央のローディングアイコン（白いぐるぐる）を非表示にする */
.ytp-spinner {
    display: none !important;
    visibility: hidden !important; 
}

/* 3. マウスオーバーや再生中に表示されるUIも念のため非表示 */
.ytp-chrome-top, 
.ytp-chrome-bottom,
.html5-endscreen {
    display: none !important;
    visibility: hidden !important;
}

/* 例：上下の余白と背景色を消す */
.フチの原因となっているクラス名 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: transparent !important;
}



/* プロフィールセクション全体のスタイル */
.sugimoto-profile-section {
    padding: 30px !important;
    /* 枠線（縁）を削除 */
    border: none !important; 
    margin-bottom: 30px !important;
    /* 薄いモルタルグレージュの背景色を!importantで確実に適用 */
    background-color: #f4f2f0 !important; 
}

/* タイトル（杉本 健のこだわり）のスタイル */
.profile-title {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 20px; /* 下のコンテンツとの間隔を調整 */
    color: #333;
    /* 不要になったサブタイトル用のスペースを削除するため、上下の余白を調整 */
    margin-top: 0;
}

/* 2カラムレイアウトのコンテナ */
.profile-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

/* テキストコンテンツ部分 */
.profile-text-content {
    flex: 1 1 55%;
    min-width: 300px;
}

/* 画像コンテンツ部分 */
.profile-image-content {
    flex: 1 1 35%;
    text-align: center;
    min-width: 200px;
}

/* 画像のスタイル */
.profile-image-style {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* リストのスタイル */
.profile-text-content ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 10px;
    margin-bottom: 15px;
}

/* スマートフォンでの表示調整（1カラムにする） */
@media (max-width: 768px) {
    .profile-columns {
        flex-direction: column;
    }
    .profile-text-content,
    .profile-image-content {
        flex: 1 1 100%;
        min-width: unset;
    }
}

/* 不要になったサブタイトルと、削除されたStylist Profileのスタイルを非表示にする */
.profile-subtitle,
.profile-title:before {
    display: none !important;
}




/* ======================================== */
/* 1. 口コミセクション (画像ギャラリー) のCSS */
/* ======================================== */

/* 口コミセクション全体のコンテナ (画像ギャラリー用) */
.review-section-container {
    /* ウィジェット間の余白を確保 */
    padding: 40px 0; 
    margin-bottom: 80px;
    /* プロフィールと同じ薄いモルタルグレージュの背景色 */
    background-color: #f7f6f5 !important; 
    /* 枠線は不要 */
    border: none !important;
}

/* タイトル */
.review-title {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 5px;
    color: #333;
    margin-top: 0;
}

/* サブタイトル */
.review-subtitle {
    font-size: 1.1em;
    text-align: center;
    margin-bottom: 30px; 
    color: #666;
}

/* スクロールヒント */
.scroll-hint {
    text-align: right;
    font-size: 0.9em;
    color: #999;
    margin-bottom: 10px;
    padding-right: 20px; /* 右端に寄せるためのパディング */
}

/* スクロール部分のラッパー */
.review-scroll-wrapper {
    /* 横スクロールを可能にする */
    overflow-x: auto;
    /* 縦方向のスクロールバーを非表示にする */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    
    /* カードを横に並べる */
    display: flex;
    flex-wrap: nowrap;
    gap: 15px; /* カード間のスペース */
    
    /* 左右の余白を確保 */
    padding: 0 20px 20px 20px; 
}

/* スクロールバーを非表示にする（Webkit系ブラウザ） */
.review-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* 個々の画像カードのコンテナ */
.review-card.image-card {
    /* カードの幅を固定し、縮まないようにする */
    flex-shrink: 0;
    width: 80vw; /* 画面幅の80%に設定 (モバイルでの見やすさ重視) */
    max-width: 300px; /* 最大幅を設定 */
    
    /* 画像を内包するための設定 */
    padding: 0;
    background: none;
    box-shadow: none;
    position: relative; /* オーバーレイの位置決めに必要 */
    overflow: hidden; /* 画像の角丸に対応 */
    border-radius: 8px;
}

/* 画像のスタイル */
.review-card.image-card .gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* カードの角丸と合わせる */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 画像に影をつける */
    /* オーバーレイの高さ分、画像を下にずらす */
    margin-top: 30px; 
}

/* オーバーレイコンテナのスタイル */
.review-overlay-top {
    position: absolute;
    top: 0; /* 画像の上端に配置 */
    left: 0;
    right: 0;
    height: 30px; /* オーバーレイの高さ */
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    background-color: #f4f2f0; /* 背景色を背景と合わせる */
    padding: 0 10px;
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
    z-index: 10; /* 画像より手前に表示 */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* 日付のスタイル */
.review-overlay-top .date {
    margin-right: 8px;
    display: inline-block;
    color: #333; 
}

/* NEWタグのスタイル (ボタン風に修正) */
.review-overlay-top .new-tag {
    background-color: #e91e63; /* マゼンタ */
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px; /* 角を丸く */
    font-size: 0.8em;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}


/* ======================================== */
/* 2. プロフィールセクションのCSS */
/* ======================================== */

/* プロフィールセクション全体のスタイル */
.sugimoto-profile-section {
    /* 全体の背景色は一旦透明にし、子要素で設定する */
    background-color: transparent !important; 
    /* 枠線（縁）を削除 */
    border: none !important; 
    margin-bottom: 80px !important; /* ウィジェット間の余白 */
    padding: 0 !important; /* 子要素でパディングを設定するため、親要素は0に */
}

/* タイトル（経歴と仕事）のスタイル */
.profile-title {
    font-size: 1.8em;
    text-align: center;
    margin-bottom: 20px; /* 下のコンテンツとの間隔を調整 */
    color: #333;
    margin-top: 0;
    padding-top: 30px; /* タイトル上の余白 */
    background-color: #fff; /* タイトル部分の背景を白に */
}

/* 赤線から上：白背景部分 */
.profile-top-section {
    background-color: #fff; /* 白背景 */
    padding: 0 30px 30px 30px; /* 左右と下のパディング */
    text-align: center;
}

.profile-intro {
    font-size: 1.1em;
    margin-top: 0;
    margin-bottom: 0;
}

/* 赤線から下：グレージュ背景部分 */
.profile-bottom-section {
    /* 高級感のあるモルタルグレージュの背景色 */
    background-color: #f7f6f5 !important; 
    padding: 30px !important; /* 上下左右のパディング */
}

/* 2カラムレイアウトのコンテナ */
.profile-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}

/* テキストコンテンツ部分 */
.profile-text-content {
    flex: 1 1 55%;
    min-width: 300px;
}

/* 画像コンテンツ部分 */
.profile-image-content {
    flex: 1 1 35%;
    text-align: center;
    min-width: 200px;
}

/* 画像のスタイル */
.profile-image-style {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Q&Aの間隔調整 */
.profile-q {
    /* Qの上下に大きなマージンを設定 */
    margin-top: 3em; /* 3行分の間隔 */
    margin-bottom: 0.5em;
    font-size: 1.1em;
}

.profile-a {
    /* Aの上下にマージンを設定 */
    margin-top: 0.5em;
    margin-bottom: 0;
}

.profile-summary {
    margin-top: 3em; /* Q&Aセクションとの間隔 */
}

/* スマートフォンでの表示調整（1カラムにする） */
@media (max-width: 768px) {
    .profile-columns {
        flex-direction: column;
    }
    .profile-text-content,
    .profile-image-content {
        flex: 1 1 100%;
        min-width: unset;
    }
    .profile-top-section,
    .profile-bottom-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* 不要になったサブタイトルと、削除されたStylist Profileのスタイルを非表示にする */
.profile-subtitle,
.profile-title:before {
    display: none !important;
}





/* 修正版ご予約ボタン スタイル */
.booking-buttons-container-single {
  text-align: center; /* ボタンを中央寄せ */
  max-width: 600px; /* 最大幅 */
  margin: 40px auto; /* 中央寄せ */
  padding: 20px;
}

.booking-button-single {
  display: inline-block;
  padding: 20px 60px;
  font-size: 20px; /* 少し大きく */
  font-weight: 700; /* 太字に */
  color: white;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

/* ボタンカラー - #95BFBB（エメラルドグリーン） */
.booking-button-purple {
  background: linear-gradient(135deg, #95BFBB 0%, #7BA8A4 100%);
}

.booking-button-purple:hover {
  background: linear-gradient(135deg, #7BA8A4 0%, #619290 100%);
  box-shadow: 0 6px 20px rgba(149, 191, 187, 0.4);
  transform: translateY(-2px);
  /* 文字色は変えない */
  color: white;
}

.booking-button-purple:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(149, 191, 187, 0.2);
  /* 文字色は変えない */
  color: white;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .booking-buttons-container-single {
    padding: 15px;
  }

  .booking-button-single {
    padding: 18px 50px;
    font-size: 18px;
  }
}