@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================================
   旅ブログテンプレート（デザインパターン01）
   赤 #e8313a × ターコイズ #0f9fae × 白。文字 #2b2b2b

   目次
     1. 色と基本
     2. ヘッダー（お問い合わせボタン／スマホ開閉メニュー）
     3. メインビジュアル
     4. 飾り帯
     5. カテゴリー（ピックアップバナー）
     6. セクション見出し（新着記事 —— VIEW ALL）
     7. 新着記事とサイドバー
     8. プロフィール
     9. デザインパターン（カンプ）
    10. 記事ページ
    11. お問い合わせフォーム
    12. フッター
   ========================================================== */


/* ==========================================================
   1. 色と基本
   ========================================================== */
:root {
  --tp-red: #e8313a;
  --tp-teal: #0f9fae;
  --tp-yellow: #ffc93c;
  --tp-ink: #2b2b2b;
  --tp-cream: #fdf8f0;
  --tp-line: #e8e4de;
}

.l-header { border-bottom: 4px solid var(--tp-red) !important; box-shadow: none !important; }
.c-gnav > li > a:hover { color: var(--tp-red); }
#pagetop { background: var(--tp-red) !important; color: #fff !important; }

/* SWELL 既定のセクション見出し（いまは使っていないが、使うときのため） */
.c-secLabel { text-align: center; font-size: 12px; letter-spacing: .3em; font-weight: 800; color: var(--tp-red); margin: 0 0 4px !important; }
.post_content h2.c-secTitle {
  text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .06em; color: var(--tp-ink) !important;
  background: none !important; border: none !important; padding: 0 !important; margin: 0 0 32px !important; box-shadow: none !important;
}
.post_content h2.c-secTitle::before { display: none !important; }
.post_content h2.c-secTitle::after { content: ""; display: block !important; width: 48px; height: 4px; margin: 12px auto 0; background: var(--tp-teal); border-radius: 2px; position: static; }

/* 記事カード型のリスト */
.p-postList.-type-card .p-postList__item { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(43,43,43,.10); transition: transform .25s, box-shadow .25s; }
.p-postList.-type-card .p-postList__item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(43,43,43,.16); }
.p-postList.-type-card .p-postList__body { padding: 16px 18px 20px; }
.p-postList.-type-card .p-postList__title { font-size: 16px; font-weight: 700; line-height: 1.5; }
.c-postThumb__cat { background: var(--tp-red) !important; color: #fff !important; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 4px 12px; }
.c-postTimes { color: #8a8a8a; }
.p-postList__title { color: var(--tp-ink) !important; }

/* もっと見るボタン */
.is-style-more_btn a { background: var(--tp-red) !important; color: #fff !important; border: none !important; border-radius: 999px !important; font-weight: 800; padding: 14px 44px; box-shadow: 0 6px 16px rgba(232,49,58,.35); }
.is-style-more_btn a:hover { background: var(--tp-teal) !important; box-shadow: 0 6px 16px rgba(15,159,174,.35); }

/* 記事一覧の抜粋は2行で止める（カードの幅に関係なく） */
.p-postList__excerpt {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* ==========================================================
   2. ヘッダー
   ========================================================== */
/* ナビが6項目あるので少し詰める */
.c-gnav > li > a { padding-left: 12px; padding-right: 12px; }
@media (max-width: 1100px) { .c-gnav > li > a { padding-left: 9px; padding-right: 9px; font-size: 13px; } }

/* 末尾の「お問い合わせ」ボタン（赤いピル＋飛行機アイコン） */
.l-header .c-gnav > li.tp-navBtn > a,
.c-gnav > li.tp-navBtn > a,
li.tp-navBtn > a {
  display: inline-flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center !important;
  gap: 7px !important; white-space: nowrap !important; flex-wrap: nowrap !important;
  width: auto !important; height: auto !important; padding: 10px 20px !important;
}
/* 赤いピルの見た目は、ヘッダーのナビの中だけ */
.c-gnav > li.tp-navBtn > a {
  background: var(--tp-red); color: #fff !important;
  border-radius: 999px; font-size: 13px; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 12px rgba(232,49,58,.28); transition: background .2s, transform .2s;
}
.c-gnav > li.tp-navBtn > a:hover { background: #d0202a; transform: translateY(-2px); }
.c-gnav > li.tp-navBtn > a::before,
.c-gnav > li.tp-navBtn > a::after { display: none !important; }
.l-header .c-gnav > li.tp-navBtn > a .ttl,
li.tp-navBtn > a .ttl {
  display: inline-block !important; width: auto !important; margin: 0 !important;
  font-size: 13px !important; line-height: 1 !important; white-space: nowrap !important;
}
/* アイコンは元の比率（横長 64:46）を保つ */
.l-header .c-gnav > li.tp-navBtn > a img,
.l-fixHeader .c-gnav > li.tp-navBtn > a img {
  display: block; width: 19px !important; height: 14px !important;
  flex: 0 0 19px !important; margin: 0 !important; object-fit: contain !important;
}
@media (max-width: 959px) { .c-gnav > li.tp-navBtn { display: none; } }

/* 検索アイコンをお問い合わせボタンの左に置く */
.l-header .c-gnav,
.l-fixHeader .c-gnav { display: flex !important; align-items: center !important; }
.l-header .c-gnav > li.tp-navBtn,
.l-fixHeader .c-gnav > li.tp-navBtn { order: 100 !important; margin-left: 14px !important; display: flex; align-items: center; }
.l-header .c-gnav > li:not(.tp-navBtn),
.l-fixHeader .c-gnav > li:not(.tp-navBtn) { order: 1; }
.l-header .c-gnav > li.menu-item.-search,
.l-header .c-gnav > li[class*="search"],
.l-header .c-gnav > li:has(.icon-search),
.l-header .c-gnav > li:has([data-onclick="toggleSearch"]),
.l-fixHeader .c-gnav > li:has(.icon-search),
.l-fixHeader .c-gnav > li:has([data-onclick="toggleSearch"]) { order: 99 !important; }

/* 追従ヘッダーでは少し小さく */
.l-fixHeader .c-gnav > li.tp-navBtn > a { padding: 8px 18px !important; }
.l-fixHeader .c-gnav > li.tp-navBtn > a .ttl { font-size: 13px !important; }
.l-fixHeader .c-gnav > li.tp-navBtn > a img { width: 15px !important; height: 15px !important; }

/* スマホ開閉メニューでは、ほかの項目と同じ見た目にする */
.p-spMenu .c-listMenu .tp-navBtn > a,
.p-spMenu .tp-navBtn > a {
  display: block !important;
  padding: 10.53px 14.04px 10.53px 21.06px !important;
  background: none !important; border-radius: 0 !important;
  color: inherit !important; gap: 0 !important; box-shadow: none !important;
}
.p-spMenu .tp-navBtn > a img { display: none !important; }
.p-spMenu .tp-navBtn > a .ttl { font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; }


/* ==========================================================
   3. メインビジュアル
   外側（#main_visual）で高さを切り、中の写真を枠いっぱいに広げる
   ========================================================== */
#main_visual {
  height: 480px !important; max-height: 480px !important;
  overflow: hidden !important; position: relative !important;
  margin-bottom: 0 !important; display: block; line-height: 0; font-size: 0;
}
@media (min-width: 960px) {
  #main_visual .p-mainVisual__inner,
  #main_visual .p-mainVisual__slide,
  #main_visual .p-mainVisual__imgLayer { height: 100% !important; position: relative !important; overflow: visible !important; }
  #main_visual .p-mainVisual__imgLayer img,
  #main_visual .p-mainVisual__slide img {
    position: relative !important; inset: auto !important; margin-top: 0 !important;
    width: 100% !important; height: 100% !important; max-height: none !important;
    object-fit: cover !important; object-position: center center !important; display: block;
  }
}
/* スマホは画像の高さに合わせる */
@media (max-width: 959px) {
  #main_visual,
  #main_visual.-height-set, #main_visual.-height-img,
  #main_visual .p-mainVisual__inner, #main_visual .p-mainVisual__slide {
    height: auto !important; max-height: none !important; overflow: hidden !important;
  }
  #main_visual .p-mainVisual__imgLayer { position: relative !important; height: auto !important; }
  #main_visual .p-mainVisual__imgLayer img,
  #main_visual .p-mainVisual__slide img {
    position: relative !important; width: 100% !important; height: auto !important;
    margin-top: 0 !important; object-fit: contain !important;
  }
}


/* ==========================================================
   4. 飾り帯（カテゴリーの上下とフッターの上）
   ========================================================== */
.tp-lineBar {
  height: 16px;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background-color: var(--tp-teal) !important;
  background-image: url("gallery/line.png");
  background-repeat: repeat-x !important;
  background-size: auto 16px;
  background-position: left center !important;
  position: relative; z-index: 2; display: block; line-height: 0; font-size: 0;
}
.tp-lineBar + * { margin-top: 0 !important; }
.tp-lineBar.-footer { margin-bottom: 0; }
#main_visual + .tp-lineBar,
.home .l-content > .tp-lineBar:first-child { margin-top: 0 !important; }
@media (max-width: 959px) { .tp-lineBar { height: 12px; background-size: auto 12px; } }


/* ==========================================================
   5. カテゴリー（ピックアップバナー）
   ターコイズの帯に4枚。写真＋下の白帯＋赤い丸矢印
   ========================================================== */
#pickup_banner {
  position: relative; isolation: isolate;
  margin: 0 auto !important;
  padding: 22px 0 26px !important;
}
#pickup_banner.tp-catSlider {
  overflow: hidden;
  width: 100vw !important; max-width: none !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
#pickup_banner::after {
  content: ""; position: absolute; z-index: -1; inset: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--tp-teal);
}
/* 見出し「CATEGORY」（左に白い飛行機） */
#pickup_banner::before {
  content: "CATEGORY";
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 19px; font-weight: 800; letter-spacing: .18em; color: #fff;
  margin-bottom: 14px; padding-left: 0; text-indent: 22px;
  background-image: url("gallery/plane-white.png");
  background-repeat: no-repeat;
  background-size: 26px 19px !important;
  background-position: center left calc(50% - 86px) !important;
}
/* スライダーの部品は使わない（4枚固定） */
.tp-catSlider__nav, .tp-catSlider__dots { display: none !important; }
.tp-catSlider__viewport { width: 100% !important; max-width: none !important; overflow: visible !important; position: relative; }
#pickup_banner .p-pickupBanners__list,
#pickup_banner .p-pickupBanners__list.tp-catSlider__track {
  display: flex !important; flex-wrap: nowrap !important;
  width: min(1100px, 100vw - 48px) !important; max-width: none !important;
  margin: 0 auto !important; gap: 16px !important;
  padding: 0 !important; list-style: none;
  transform: none !important; transition: none !important; animation: none !important;
  justify-content: flex-start !important; align-items: stretch;
}
#pickup_banner .p-pickupBanners__item {
  flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
}
/* カード本体 */
.p-pickupBanners .c-bannerLink {
  display: block; position: relative; background: #fff;
  border-radius: 12px; overflow: hidden; padding-bottom: 34px;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
  transition: transform .25s, box-shadow .25s;
}
.p-pickupBanners .c-bannerLink:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0,0,0,.20); }
.p-pickupBanners .c-bannerLink__figure { aspect-ratio: 16 / 6 !important; border-radius: 0; position: relative; z-index: 1; }
.p-pickupBanners .c-bannerLink__img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; opacity: 1 !important; }
/* 下の白帯（カテゴリー名） */
.p-pickupBanners .c-bannerLink__label {
  position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  transform: none !important; width: 100% !important; max-width: none !important; height: 34px; z-index: 3;
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 0 !important;
  background: #fff !important; color: var(--tp-ink) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 32px 0 10px !important;
  font-size: 13px !important; font-weight: 800; line-height: 1.25;
}
.p-pickupBanners .c-bannerLink__label::before,
.p-pickupBanners .c-bannerLink__label::after { content: none !important; display: none !important; }
/* 右下の赤い丸＋白い矢印 */
.p-pickupBanners .c-bannerLink::after {
  content: ""; position: absolute; right: 8px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; z-index: 4;
  background-color: var(--tp-red);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 5l7 7-7 7%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
}
/* SWELL がホバー用に敷くグラデーション層は消す */
.p-pickupBanners .c-bannerLink::before,
.p-pickupBanners .c-bannerLink .c-bannerLink__figure::before,
.p-pickupBanners .c-bannerLink .c-bannerLink__figure::after { content: none !important; }

@media (max-width: 959px) {
  #pickup_banner, #pickup_banner.tp-catSlider { padding: 20px 0 24px !important; }
  #pickup_banner::before { font-size: 16px; margin-bottom: 12px; background-size: 20px 15px !important; background-position: center left calc(50% - 68px) !important; }
}
@media (max-width: 599px) {
  /* 2列に折り返す */
  #pickup_banner .p-pickupBanners__list,
  #pickup_banner .p-pickupBanners__list.tp-catSlider__track { flex-wrap: wrap !important; width: calc(100% - 24px) !important; gap: 10px !important; }
  #pickup_banner .p-pickupBanners__item { flex: 0 0 calc(50% - 5px) !important; }
  .p-pickupBanners .c-bannerLink__label { height: 32px; font-size: 12px !important; }
}


/* ==========================================================
   6. セクション見出し（新着記事 —— VIEW ALL）
   ========================================================== */
.tp-secHead {
  display: flex; align-items: center; gap: 12px;
  max-width: 1100px; margin: 0 auto 24px; padding: 0 8px;
}
.tp-secHead__icon {
  width: 26px; height: 19px; flex: 0 0 26px;
  background: var(--tp-teal);
  -webkit-mask: url("gallery/plane-white.png") center / contain no-repeat;
          mask: url("gallery/plane-white.png") center / contain no-repeat;
}
.tp-secHead__title {
  font-size: 20px !important; font-weight: 800; letter-spacing: .06em; color: var(--tp-ink) !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: none !important;
  box-shadow: none !important; white-space: nowrap; line-height: 1.3;
}
.tp-secHead__title::before, .tp-secHead__title::after { display: none !important; }
.tp-secHead__line { flex: 1 1 auto; height: 2.25px; border-radius: 2px; background: var(--tp-teal); opacity: .8; }
.tp-secHead__more {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--tp-ink);
  text-decoration: none !important;
}
.tp-secHead__more:hover { color: var(--tp-red); }
.tp-secHead__arrow {
  width: 22px; height: 22px; border-radius: 50%; background-color: var(--tp-red);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9 5l7 7-7 7%27 fill=%27none%27 stroke=%27white%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px 11px;
  transition: transform .2s;
}
.tp-secHead__more:hover .tp-secHead__arrow { transform: translateX(3px); }
@media (max-width: 599px) {
  .tp-secHead { gap: 8px; margin-bottom: 16px; }
  .tp-secHead__title { font-size: 17px !important; }
  .tp-secHead__more { font-size: 10px; letter-spacing: .1em; }
  .tp-secHead__icon { width: 20px; height: 15px; flex: 0 0 20px; }
}


/* ==========================================================
   7. 新着記事とサイドバー
   ========================================================== */
.home #content.l-content { position: relative; padding-top: 0 !important; padding-bottom: 56px !important; }
.home #content.l-content::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: #ffffff;
}
.home .l-mainContent__inner { background: transparent !important; }
.home .l-mainContent { padding-top: 40px; }
/* 本文とサイドバーの頭を、飾り帯から同じだけ下げる */
@media (min-width: 960px) {
  .home .l-mainContent { padding-top: 78px !important; }
  .home .l-sidebar { padding-top: 78px; }
}
/* 1件ずつの間隔（区切り線はそのまま） */
.home .p-postList.-type-simple .p-postList__item { padding: 3px 0 !important; }
.home .p-postList.-type-simple .p-postList__item:first-child { padding-top: 0 !important; }
@media (max-width: 959px) {
  .p-postList.-type-simple .p-postList__title { font-size: 14px !important; }
}


/* ==========================================================
   8. プロフィール（サイドバー）
   丸窓のアイコンと、ボタンで開く続き
   ========================================================== */
.p-profileBox__icon {
  width: 124px; height: 124px; margin: 21px auto 12px;
  border-radius: 50%; overflow: hidden;
  background: var(--tp-cream);
  box-shadow: 0 0 0 2px var(--tp-red);
}
.p-profileBox__icon img,
.p-profileBox__iconImg {
  width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block;
}
.p-profileBox .tp-prof__more { display: none; }
.p-profileBox.is-open .tp-prof__more { display: inline; }
.p-profileBox__btnLink { cursor: pointer; }


/* ==========================================================
   9. デザインパターン（カンプ）
   ========================================================== */
.tp-secHead--comp { margin-top: 100px; }
.tp-planNote {
  margin: 0 0 22px; padding: 22px 26px;
  background: var(--tp-cream);
  border-left: 4px solid var(--tp-teal);
}
.tp-planNote__lead { margin: 0 0 12px; font-weight: 700; font-size: 15px; color: var(--tp-ink); }
.tp-planNote__list { margin: 0; padding-left: 1.2em; list-style: disc; }
.tp-planNote__list li { margin-bottom: 7px; font-size: 14px; line-height: 1.75; color: var(--tp-ink); }
.tp-planNote__list li:last-child { margin-bottom: 0; }
.tp-planNote__list strong { color: var(--tp-red); }
.tp-comp { margin: 0 0 8px; }
.tp-comp img { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }


/* ==========================================================
   10. 記事ページ
   ========================================================== */
.single .post_content h2:not(.c-secTitle):not(.p-postList__title) { color: #fff !important; }
.post_content h3 { border-bottom-color: var(--tp-teal) !important; }
/* 写真は縦長でも高くなりすぎないよう、高さで上限をかける（切り抜かない） */
.single .p-articleThumb { text-align: center; }
.single .p-articleThumb img {
  max-height: 460px; width: auto; max-width: 100%;
  margin-left: auto; margin-right: auto; display: block; object-fit: contain;
}
.single .post_content .wp-block-image img {
  max-height: 520px; width: auto; max-width: 100%;
  margin-left: auto; margin-right: auto; display: block;
}
.single .post_content .wp-block-image figcaption { text-align: center; }


/* ==========================================================
   11. お問い合わせフォーム（Contact Form 7）
   ========================================================== */
.tp-form { max-width: 640px; margin: 32px auto 0; }
.tp-form__row { margin-bottom: 22px; }
.tp-form__row br { display: none; }
.tp-form .wpcf7-form-control-wrap { display: block; }
.tp-form__label {
  display: block; margin-bottom: 8px;
  font-weight: 700; font-size: 15px; color: var(--tp-ink);
}
.tp-form__req {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font-size: 11px; font-weight: 700; line-height: 1.6;
  color: #fff; background: var(--tp-red);
}
.tp-form input[type="text"],
.tp-form input[type="email"],
.tp-form textarea {
  width: 100%; padding: 12px 14px;
  font-size: 15px; color: var(--tp-ink);
  background: #fff; border: 1px solid #d5d5d5; border-radius: 0;
  transition: border-color .2s;
}
.tp-form input[type="text"]:focus,
.tp-form input[type="email"]:focus,
.tp-form textarea:focus { border-color: var(--tp-teal); outline: none; }
.tp-form textarea { min-height: 180px; resize: vertical; }
.tp-form__note { margin: 4px 0 24px; font-size: 13px; color: #777; }
.tp-form__submit { text-align: center; margin: 0; }
.tp-form input[type="submit"] {
  min-width: 220px; padding: 14px 32px;
  font-size: 16px; font-weight: 700; letter-spacing: .06em;
  color: #fff; background: var(--tp-red);
  border: none; border-radius: 999px; cursor: pointer;
  transition: opacity .2s, transform .2s;
}
.tp-form input[type="submit"]:hover { opacity: .85; transform: translateY(-2px); }
.wpcf7 form .wpcf7-response-output { margin: 20px 0 0; border-width: 1px; font-size: 14px; }
.wpcf7-not-valid-tip { font-size: 13px; color: var(--tp-red); }
.wpcf7-spinner { display: block; margin: 12px auto 0; }


/* ==========================================================
   12. フッター
   ========================================================== */
.l-footer { background: var(--tp-teal) !important; color: #ffffff !important; }
.l-footer a { color: #ffffff !important; }
.l-footer a:hover { color: var(--tp-red) !important; }
.l-footer .c-copyright,
.l-footer .l-footer__foot { color: #ffffff !important; }
.tp-footNav {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 8px 28px; padding: 18px 16px 0;
}
.tp-footNav a { font-size: 13px; color: #ffffff !important; text-decoration: none !important; opacity: .92; }
.tp-footNav a:hover { opacity: 1; text-decoration: underline !important; }