@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
*/

/************************************
** TabiPark カスタマイズ
************************************/

/* =================================
   スマホヘッダー
   ================================= */
@media screen and (max-width: 1023px) {

  .mobile-header-menu-buttons {
    height: 76px;
    min-height: 76px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    background: #fff;
  }

  .mobile-header-menu-buttons .logo-menu-button {
    flex: 1 1 auto;
    height: 76px;
    min-width: 0;
  }

  .mobile-header-menu-buttons .logo-menu-button .menu-button-in {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .mobile-header-menu-buttons
  .logo-menu-button
  img.site-logo-image {
    max-height: 60px;
    width: auto;
    margin: 0 !important;
  }

  .mobile-header-menu-buttons .search-menu-button,
  .mobile-header-menu-buttons .navi-menu-button {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 76px;
  }

  .mobile-header-menu-buttons .search-menu-button .menu-button-in,
  .mobile-header-menu-buttons .navi-menu-button .menu-button-in {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 「検索」「メニュー」の文字は非表示 */
  .mobile-header-menu-buttons .menu-caption {
    display: none;
  }
}


/* =================================
   PCヘッダーロゴ
   ================================= */

.header-container-in.hlt-top-menu .logo-header {
  max-height: 100px;
}

.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100px;
}

#header {
  flex-shrink: 0;
}

/* =================================
   TabiPark おすすめカード
   ================================= */

/* カード本体には影を付けない */
#recommended .navi-entry-card {
    box-shadow: none !important;
    background: transparent !important;
    overflow: visible;
}

/* 画像を包んでいる部分 */
#recommended .navi-entry-card-thumb {
    margin: 0 !important;
    border-radius: 18px;
    overflow: hidden;

    /* やわらかい影 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

/* 画像 */
#recommended .navi-entry-card-image {
    display: block;
    width: 100%;
    height: auto;
}


/* ==============================
   PC
   ============================== */

@media screen and (min-width: 835px) {

    #recommended-in {
        width: 94%;
        max-width: 1280px;
    }

    /* カード同士に少し余白 */
    #recommended .navi-entry-card-link {
        padding: 7px !important;
        box-sizing: border-box;
    }
}

/* PCのみ：カーソルを乗せると浮く */
@media (hover: hover) and (pointer: fine) {

    #recommended .navi-entry-card-link:hover
    .navi-entry-card-thumb {
        transform: translateY(-5px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.13);
    }
}


/* ==============================
   スマホ
   ============================== */

@media screen and (max-width: 834px) {

    /* 4枚全体の外側に余白 */
    #recommended-in {
        padding: 14px 10px 18px !important;
        box-sizing: border-box;
    }

    /* カード同士の隙間 */
    #recommended .navi-entry-card-link {
        padding: 5px !important;
        box-sizing: border-box;
    }

    /* スマホは少し丸め */
    #recommended .navi-entry-card-thumb {
        border-radius: 18px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    }
}

/* =================================
   TabiPark スマホ小カテゴリメニュー
   4つ横並び
   ================================= */
@media screen and (max-width: 1023px) {

  /* メニュー全体 */
  #navi {
    background: #fff;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
  }

  #navi-in {
    width: 100%;
  }

  #navi .navi-in > .menu-mobile {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  /* Cocoon標準の50%を25%に変更 */
  #navi .navi-in > .menu-mobile > li {
    width: 25% !important;
    height: 72px !important;
    line-height: normal !important;
  }

  /* 1項目 */
  #navi .navi-in > .menu-mobile > li > a {
    width: 100%;
    height: 72px;
    padding: 8px 2px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px !important;
    color: #777;
  }

 /* アイコン */
#navi .navi-in > .menu-mobile > li > a::before {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 21px;
  line-height: 1;
}

/* ホテル */
#navi .navi-in > .menu-mobile > li:nth-child(1) > a::before {
  content: "🏨";
}

/* 交通 */
#navi .navi-in > .menu-mobile > li:nth-child(2) > a::before {
  content: "🚆";
}

/* パーク攻略 */
#navi .navi-in > .menu-mobile > li:nth-child(3) > a::before {
  content: "🗺️";
}

/* グッズ・通販 */
#navi .navi-in > .menu-mobile > li:nth-child(4) > a::before {
  content: "🛍️";
}
  /* 文字部分 */
  #navi .navi-in > .menu-mobile .caption-wrap {
    height: auto !important;
    line-height: 1.25 !important;
  }

  /* 項目間の薄い区切り線 */
  #navi .navi-in > .menu-mobile > li:not(:last-child) {
    border-right: 1px solid #eeeeee;
  }

  /* ホバー・タップ時 */
  #navi .navi-in > .menu-mobile > li > a:hover {
    background: #f8f8f8;
    color: #777;
  }
}

/* =================================
   TabiPark サイドバープロフィール
   画像｜名前・肩書きを横並び
   ================================= */

.sidebar .widget_author_box .author-box {
    display: grid !important;
    grid-template-columns: 76px 1fr;
    grid-template-areas:
        "photo name"
        "photo label"
        "description description"
        "follow follow";
    column-gap: 14px;
    row-gap: 0;
    align-items: center;

    text-align: left !important;
}


/* author-content の箱をなくして
   中身をGridに直接参加させる */
.sidebar .widget_author_box .author-content {
    display: contents;
}


/* プロフィール画像 */
.sidebar .widget_author_box .author-thumb {
    grid-area: photo;

    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    align-self: center;
}

.sidebar .widget_author_box .author-thumb img {
    width: 76px !important;
    height: 76px !important;
    object-fit: cover;
}


/* 名前 */
.sidebar .widget_author_box .author-name {
    grid-area: name;

    margin: 0 0 3px !important;
    padding: 0 !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left !important;
}


/* 肩書き */
.sidebar .widget_author_box .author-widget-name {
    grid-area: label;

    margin: 0 !important;
    padding: 0 0 7px !important;

    font-size: 11px;
    line-height: 1.4;
    color: #999;
    text-align: left !important;

    border-bottom: 1px solid #eadfce;
}


/* 自己紹介文 */
.sidebar .widget_author_box .author-description {
    grid-area: description;

    margin: 18px 0 0 !important;
    padding: 0 !important;

    font-size: 13px;
    line-height: 1.75;
    text-align: left !important;
}


/* SNS */
.sidebar .widget_author_box .author-follows {
    grid-area: follow;

    margin-top: 12px !important;
    text-align: left !important;
}

/* =================================
   TabiPark PCヘッダー検索
   ================================= */
@media screen and (min-width: 1024px) {

  /* 水色ヘッダー全体を基準にする */
  #header-container {
    position: relative !important;
  }

  /* 内側の要素を位置基準にしない */
  #header-container-in,
  #header,
  #header-in {
    position: static !important;
  }

  /* PC検索を右側中央へ */
  .tabipark-pc-search {
    position: absolute !important;
    top: 50% !important;
    right: 20vw !important;
    left: auto !important;
    transform: translateY(-50%) !important;

    width: 220px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1000;
  }

  .tabipark-pc-search form {
    margin: 0 !important;
    padding: 0 !important;
  }

  .tabipark-pc-search input[type="search"],
  .tabipark-pc-search input[type="text"] {
    width: 100% !important;
    height: 40px !important;
    box-sizing: border-box;
    padding: 0 42px 0 16px;

    border: 1px solid #ddd;
    border-radius: 20px;
    background: #fff;
  }
}

/* スマホでは追加検索を出さない */
@media screen and (max-width: 1023px) {
  .tabipark-pc-search {
    display: none !important;
  }
}

/* =========================================
   TabiPark プロフィールSNS
   ヒトデブログ風：アイコン＋文字
   ========================================= */

:root {
  --tabipark-blue: #32c0c1;
}

/* フォローしてください等の見出しがあれば非表示 */
.sidebar .widget_author_box .sns-follow-message {
  display: none !important;
}

/* SNS全体 */
.sidebar .widget_author_box .author-follows {
  margin-top: 18px !important;
}

/* 3列 × 2段 */
.sidebar .widget_author_box .sns-follow-buttons {
  display: grid !important;
  grid-template-columns: repeat(3, max-content);
  justify-content: start !important;
  gap: 10px 18px !important;
}

/* 各SNS */
.sidebar .widget_author_box
.author-follows
.sns-follow-buttons
a.follow-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px;

  width: auto !important;
  height: auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--tabipark-blue) !important;
  text-decoration: none !important;
}

/* Cocoon標準アイコン */
.sidebar .widget_author_box
.sns-follow-buttons
a.follow-button span {
  color: var(--tabipark-blue) !important;
  line-height: 1 !important;
}

.sidebar .widget_author_box
.sns-follow-buttons
a.follow-button span::before {
  font-size: 16px !important;
}

/* SNS名 */
.sidebar .widget_author_box
.sns-follow-buttons
a.follow-button::after {
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: var(--tabipark-blue);
}


/* ---------- 表示する5種類 ---------- */

.sidebar .widget_author_box
a[href*="x.com"]::after,
.sidebar .widget_author_box
a[href*="twitter.com"]::after {
  content: "X";
}

.sidebar .widget_author_box
a[href*="instagram.com"]::after {
  content: "Instagram";
}

.sidebar .widget_author_box
a[href*="youtube.com"]::after {
  content: "YouTube";
}

.sidebar .widget_author_box
a[href*="line.me"]::after,
.sidebar .widget_author_box
a[href*="lin.ee"]::after {
  content: "LINE";
}

.sidebar .widget_author_box
a[href*="tiktok.com"]::after {
  content: "TikTok";
}


/* =========================================
   プロフィールSNS
   Instagram・LINEだけ表示
   ========================================= */

/* InstagramとLINE以外をすべて非表示 */
.sidebar .widget_author_box
.sns-follow-buttons
a.follow-button:not(.instagram-follow-button-sq):not(.line-follow-button-sq) {
  display: none !important;
}