@charset "UTF-8";
/*
Theme Name:         INABA GARAGE : 稲場自動車整備工場
Theme URI:          https://inaba-garage.com/
Author:             HITC / CODEUN
Author URI:         https://codeun.jp/
Description:        稲場自動車整備工場の INABA GARAGE 公式ウェブサイト用カスタムテーマ。フルスタックエンジニアリングによる高速・高アクセシビリティな設計。
Version:            1.0.0
Requires at least:  6.0
Tested up to:       6.4
Requires PHP:       7.4
License:            GNU General Public License v2 or later
License URI:        http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:        inaba-garage
Tags:               automotive, custom-colors, custom-menu, featured-images, full-site-editing, responsive-layout
*/

:root {
  --white: #ffffff;
  --black: #000000;
  --transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}
.is-fax a {
  pointer-events: none !important;
}

html {
  font-size: 62.5%; /* 16px * 62.5% = 10px 相当 */
}

body {
  font-size: 1.6rem;
  font-weight: 500;
  font-family: "Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  background-color: var(--white);
  color: var(--white);
  letter-spacing: 0.05em;
  overflow-x: hidden;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
body.js-is-loaded {
  opacity: 1;
}

/* 高解像度モニター（2560pxクラスなどの高画素密度）を判定 */
@media screen and (min-resolution: 2dppx) {
  /* ここに18remの設定 */
  body { font-size: 1.8rem; }
}

.container {
  --bs-gutter-x: 40px; /* 24px (左右合計の溝) */
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5); /* 12px */
  padding-left: calc(var(--bs-gutter-x) * 0.5);  /* 12px */
  margin-right: auto;
  margin-left: auto;
}
/* 1200px以上 (Extra Large) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
/* 1400px以上 (Extra Extra Large) */
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

.btn {
    display: inline-block;
    background-color: #6bb2d1;
    color: #ffffff;
    padding: 2.5rem 6.0rem;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s, opacity 0.3s;
    width: 313px;
    max-width: 100%;
}
.btn:hover {
    opacity: 0.75;
    background-color: #5fa4c5;
}

.d-none {display: none!important;}

/* --- Header & Logo --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  pointer-events: none; /* ヘッダーの透明な余白がクリックを邪魔しないようにする */
  z-index: 110;
  transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1) 0s;
  /* will-change: transform; */
  /* outline: none; */
  /* iOS対策 */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.header.is-hidden {
  -webkit-transform: translate3d(0, -105%, 0);
  transform: translate3d(0, -105%, 0);
  transition: transform 0.35s ease 0s, background 0.3s ease 0.35s;
}


.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.logo {
  pointer-events: auto;
  position: relative;
  z-index: 100;
}

.home .logo img {
  width: clamp(223px, 20vw, 423px);
}

.logo .logo-scrolled {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

@media only screen and (max-width: 767.98px) {
  .is-compact-header {
    background: #fff;
    box-shadow: 0px 2px 12px rgba(0, 0, 0, .1);
  }
}

/* --- 戻る時（通常サイズに戻る）のアニメーション --- */
body.js-is-scrolling-ready .logo .logo-default,
body.js-is-scrolling-ready .logo .logo-scrolled {
  transition:
    width 0s ease 0.35s,
    opacity 0.3s ease 0s;
}

/* --- コンテンツ領域到達時 (.is-compact / .is-compact-header) --- */

/* 縮小時と拡大時の transition をそれぞれの画像に適用 */
body.js-is-scrolling-ready .logo.is-compact .logo-default,
body.js-is-scrolling-ready .logo.is-compact .logo-scrolled {
  transition: opacity 0.3s ease 0s;
}

/* 縮小時 (.is-compact) */
.logo.is-compact .logo-default,
.logo.is-compact .logo-scrolled {
  width: 150px;
}

/* 画像のフェード入れ替え */
.logo.is-compact .logo-default { opacity: 0; }
.logo.is-compact .logo-scrolled { opacity: 1; }

@media only screen and (max-width: 767.98px) {
  .logo img {
      transition: none;
      width: 150px;
  }
  .logo.is-compact .logo-default,
  .logo.is-compact .logo-scrolled {
    transition: width 0s ease 0s, opacity 0.3s ease 0s !important;
    width: 100px;
  }
}


/* --- Hamburger Menu Icon --- */
.menu-trigger {
  width: 32px;
  height: 24px;
  position: relative; top: 20px; right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2100;
}

/* 1. 初期状態（白） */
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transition: transform 0.5s ease, opacity 0.3s, background-color 0.3s ease 0s;
}

.menu-trigger span:nth-child(1) { top: 0; }
.menu-trigger span:nth-child(2) { top: 11px; }
.menu-trigger span:nth-child(3) { bottom: 0; }

/* 2. スクロール時（黒） */
/* 色変更 */
body.js-is-loaded .is-compact-header .menu-trigger span {
  background-color: #000; /* スクロール後の色 */
  transition: transform 0.5s ease, opacity 0.3s, background-color 0.3s ease 0s;
}

/* 3. メニュー展開時（白） */
/* Active State (X shape) */
.menu-trigger.active span { 
  background-color: #ffffff!important; 
  transition: transform 0.5s ease, opacity 0.3s, background-color 0.3s ease 0s;
}
.menu-trigger.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.menu-trigger.active span:nth-child(2) { opacity: 0; }
.menu-trigger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* 4. スクロール中に閉じるとき（is-closingが付いている間）だけ（黒） */
body.is-closing .is-compact-header .menu-trigger span  {
  transition: transform 0.5s ease, background-color 0.3s ease 0.5s;
}

@media only screen and (max-width: 767.98px) {
  .menu-trigger {
    top: 8px;
    right: 8px;
  }
}


/* --- Header & Logo & Hamburger Menu Icon  PCトップページ以外 --- */
body:not(.home) .header {
  background-color: #fff;
  box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.15);
  padding: 12px;
  position: sticky;
  pointer-events:  auto;
}
body:not(.home) .logo img {
  width: 150px;
}

body:not(.home) .logo-default {display: none;}
body:not(.home) .logo-scrolled {opacity: 1;position: static;}
body:not(.home) .menu-trigger span {background-color: var(--black);}
body:not(.home) .menu-trigger {
  top: 0; right: 0; bottom: 0;
  margin: auto 0;
}
body:not(.home) .header-inner {
  align-items: center;
  height: 100%;
}

/* --- Header & Logo & Hamburger Menu Icon  SPトップページ --- */
@media only screen and (max-width: 767.98px) {
  .header {
    background-color: #fff;
    box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.15);
    padding: 12px;
    position: sticky;
    pointer-events:  auto;
  }
  .logo img {
    width: 120px!important;
  }
  
  .home .logo-default {display: none;}
  .home .logo-scrolled {opacity: 1;position: static;}
  .home .menu-trigger span {background-color: var(--black);}
  .menu-trigger {
    top: 0; right: 0; bottom: 0;
    margin: auto 0;
  }
  .header-inner {
    align-items: center;
    height: 100%;
  }
}



/* --- Navigation Overlay  --- */
.g-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    background-color: #6bb2d1;
    pointer-events: auto;
    transform: translateY(-100%);
    transition: transform 0.5s ease-out;
    z-index: 1500;
}
.g-nav-inner {
  height: 100%;
  padding-top: clamp(110px, 15vw, 210px);
  position: relative;
}

.g-nav-inner::before {
  background: url(images/logo-white.svg) no-repeat center / contain;
  content: "";
  display: block;
  aspect-ratio: 323 / 152;
  position: absolute;
  top: 10px; left: 10px; 
  width: clamp(150px, 20vw, 323px);
  opacity: 0;
  transform: translateX(-100px);
}

.menu-open .g-nav-inner::before {
  animation: logoSlideIn 1s cubic-bezier(0.35, 0.05, 0.32, 1.275) .75s forwards;
}
@keyframes logoSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.g-nav.active {
    transform: translateY(0);
}

.global-nav {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.nav-wrap {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  height: 100%;
}

.g-nav ul {
    list-style: none;
    position: relative;
    margin: 0;
    list-style: none;
}
@media (min-width: 768px) {
  .global-nav {
    justify-content: center;
  }
}

.g-nav ul li {
    margin: 0; /* マージンを一度リセット */
    padding: 0;
    opacity: 0;
    
    /* 【初期状態】
       すべての li を 1番目の位置に重ねるため、
       本来の高さ分だけマイナス方向に移動させておく 
    */
    transform: translateY(-50px); 
    
    /* 閉じるときは少し早めに、一斉に戻る */
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* --- 【展開時】優雅にパラパラと降りてくる --- */
.g-nav.active ul li {
    opacity: 1;
    transform: translateY(0); /* 本来の並び位置に戻る */
}

/* 各 li に時間差（ディレイ）と、
   「優雅な速度（0.8秒）」を設定。
   cubic-bezier(0.34, 1.56, 0.64, 1) は、
   少しだけ行き過ぎて戻るような、弾力のある優雅な動きになります。
*/
.g-nav.active ul li {
    transition: 
        opacity 0.35s ease-out, 
        transform 0.8s ease-out;
}

/* 順番に降りてくるディレイ設定 */
.g-nav.active ul li:nth-child(1) { transition-delay: 0.45s; }
.g-nav.active ul li:nth-child(2) { transition-delay: 0.5s; }
.g-nav.active ul li:nth-child(3) { transition-delay: 0.6s; }
.g-nav.active ul li:nth-child(4) { transition-delay: 0.7s; }
.g-nav.active ul li:nth-child(5) { transition-delay: 0.8s; }
.g-nav.active ul li:nth-child(6) { transition-delay: 0.9s; }
.g-nav.active ul li:nth-child(7) { transition-delay: 1.0s; }
.g-nav.active ul li:nth-child(8) { transition-delay: 1.1s; }
.g-nav.active ul li:nth-child(9) { transition-delay: 1.2s; }
.g-nav.active ul li:nth-child(10) { transition-delay: 1.3s; }

/* リンクテキスト */
.g-nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-align: left;
}
@media (min-width: 768px) {
  .g-nav ul li a {
    font-size: 2rem;
  }
}

.g-nav ul li a {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    display: block;
    margin: 0;
    padding: 16px 50px 16px 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    visibility: visible;
}

.g-nav ul li a:hover { opacity: 0.7; }



/* --- 検索 --- */

/* Screen reader text (A11y) */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.search-form__inner {
    display: flex;
    gap: 8px; /* Tailwindの gap-2 相当 */
}

.search-form__input-group {
    flex-grow: 1;
}

.search-form__input {
    width: 100%;
    /* 16px以上に設定することで、iOSのフォーカス時ズームを防止 */
    font-size: 16px; 
}


#drawer_menu_search {
  margin: 30px 20px 0;
  position: relative;
  width: auto;
  opacity: 0;
  pointer-events: none; /* 閉じている時はクリック不可にする */
  
  /* 消える時の設定 (デフォルト) */
  transition: 
    opacity 0.35s ease 0s, 
    visibility 0.35s ease 0s;
  visibility: hidden; /* スクリーンリーダーやタブ移動対策 */
}
.menu-open #drawer_menu_search {
  opacity: 1;
  pointer-events: auto; /* 開いている時はクリック可能 */
  visibility: visible;
  
  /* 表示される時の設定 (上書き) */
  transition: 
    opacity 0.75s ease 1s, 
    visibility 0.75s ease 1s;
}

#drawer_menu_search .input_area {
  background: #fff;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  position: relative;
}
#drawer_menu_search .input_area input {
  border: none;
  background: none;
  height: 50px;
  width: calc(100% - 50px);
  position: absolute;
  left: 0px;
  top: 2px;
  padding: 0 10px 0 25px;
  color: #000;
  outline: 0;
}
#drawer_menu_search .button_area {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 0px;
  top: 0px;
}
#drawer_menu_search .button_area:before {
    display: block;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    pointer-events: none;
    position: absolute;
    font-family: 'icomoon' !important;
    color: #000;
    font-size: 16px;
    content: '\e986'; /* icon-search */
    left: 14px;
    top: 18px;
    -webkit-transition: color 0.25s ease;
    transition: color 0.25s ease;
}
#drawer_menu_search .button_area button {
    width: 50px;
    height: 50px;
    border: none;
    background: none;
    cursor: pointer;
    outline: 0;
}


#drawer_tel {
  position: relative;
  margin: 30px 20px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* 消える時の設定（デフォルト） */
  transition: 
    opacity 0.35s ease 0s, 
    visibility 0.35s ease 0s;
}

.menu-open #drawer_tel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  /* 表示される時の設定（上書き） */
  transition: 
    opacity 0.75s ease 1s, 
    visibility 0.75s ease 1s;
}
#drawer_tel .tel {
  position: relative;
  font-size: 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: block;
  text-align: center;
  height: 50px;
  line-height: 48px;
}
#drawer_tel .tel:before {
  content: '\e958'; /* icon-mobile */
  font-family: 'icomoon' !important;
  font-size: 22px;
  position: relative;
  top: 1px;
  left: 0;
  margin: 0 5px 0 -5px;
}
#drawer_tel .desc {
  margin: 25px 0 -5px 0;
  line-height: 1.8em;
  text-align: center;
  color: #fff;
}

@media (min-width: 768px) {
  .menu-open #drawer_menu_search,
  #drawer_tel {
    width: 320px;
    max-width: 100%;
  }
}


/* * 【iOS 26対策】
  * 擬似要素を「最後の要素」として追加するが、
  * margin-top: auto を使うことで、Flexboxの中央配置計算から
  * このスペーサー分を「余りもの」として一番下に押しやる。
  */
#drawer_tel::after {
  content: "";
  display: block;
  flex-shrink: 0; /* 潰れないように固定 */
  
  /* 中央配置の計算を邪魔しないように、一番下へ突き放す */
  margin-top: auto; 
  
  /* iOS 26のUIを避けるための物理的な高さ */
  height: calc(env(safe-area-inset-bottom) + 100px);
  width: 100%;
}


/* --- post --- */
.headline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* --- Hero Section & Vertical Text --- */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 837;
  overflow: hidden;
}
.hero::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.slide-item img {
  opacity: .75;
}
.slide-item .img-2 {
  opacity: 1;
}

.slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero * {
  height: 100%;
}
.hero .desc.get_the_content,
.hero .desc.get_the_content *,
.splide__pagination {
  height: auto;
}

.hero .splide__pagination__page {
    height: 8px!important;
    margin-left: 6px;
    margin-right: 6px;
}

.hero-copy {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.vertical-text {
  font-size: clamp(30px, 4.25vw, 40px);
  font-weight: 700;
  letter-spacing: 0.15em;
  line-height: 1.8;
  color: var(--white);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media only screen and (max-width: 767.98px) {
  .hero {
      aspect-ratio: 1 / 1;
  }
}


/* --- ガレージ・ベネフィットセクション（全体） --- */
.garage-benefit {
  font-family: sans-serif;
  color: #333;
  line-height: 1.6;
}

/* 悩みセクション（上部白背景） */
.problem-area {
  background-color: #fff;
  padding-top: 60px;
  padding-bottom: 60px;
}

.problem-container,.solve-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.problem-text,.solve-text {
  font-size: 3rem;
  font-weight: bold;
  color: #669bc6;
  line-height: 1.8;
}

.problem-illustration,.solve-illustration {
  width: 100%;
  max-width: 450px;
}

.problem-container {
  position: relative;
  margin-bottom: 12rem;
  --arrow-size: 24px; /* 三角形のサイズ */
  --arrow-color: #669bc6; /* 三角形の色 */
}
.problem-container::after {
    content: "";
    position: absolute;
    top: 100%;
      transform: translate(-50%, calc(6rem - 50%));
    left: 50%;
    
    /* 三角形の形成 */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: var(--arrow-size) var(--arrow-size) 0 var(--arrow-size);
    border-color: var(--arrow-color) transparent transparent transparent;
    
    /* パフォーマンス最適化 */
    backface-visibility: hidden;
}


@media (min-width: 768px) {
  .solve-text {
    order: 2;
  }

  .solve-illustration {
    order: 1;
  }
}


/* 水色ボックス（角丸コンテナ）へのラッパー */
.features-box-wrapper {
  background-color: #fff;
  padding: 0 40px 60px;
}

/* 水色ボックス（角丸） */
.features-box {
  background-color: #eef8ff;
  padding: 80px 60px;
  border-radius: 20px;
}

/* --- 特徴テキスト・カード --- */

/* 最重要キャッチコピー（最も大きく、太く） */
.main-catchphrase {
  text-align: center;
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 900;
  margin-bottom: 50px;
  color: #000;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* 「こんな方にも」のタイトル */
.section-title {
  text-align: center;
  font-size: 2.6rem;
  font-weight: bold;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-title::before, .section-title::after {
  content: "";
  width: 30px;
  height: 1px;
  background: #333;
  margin: 0 15px;
}

/* カードのグリッドレイアウト */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

/* 各カードのスタイル */
.feature-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.card-title {
  padding: 20px;
  text-align: center;
  color: #5a96b3;
  font-size: 2.2rem;
  font-weight: bold;
}

.card-image, .img-placeholder {
  width: 100%;
  background-color: #ccc; /* 画像がない時のダミー色 */
  display: block;
}
.card-image {
  aspect-ratio: 4 / 3;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


@media (min-width: 768px) {
  .main-catchphrase br {
    display: none;
  }
}

/* --- レスポンシブ --- */
@media only screen and (max-width: 767.98px) {
  .problem-container,.solve-container {
      flex-direction: column;
      text-align: center;
  }
  .features-box {
    margin-left: -20px;
    margin-right: -20px;
    padding: 50px 20px;
  }
  .features-box-wrapper {
      padding: 0 0 40px;
  }
  .problem-text,.solve-text {
    font-size: clamp(2.4rem, 1.75rem + 1.75vw, 3rem);
    padding: 0 12px;
  }
  .main-catchphrase {
    display: flex;
    justify-content: center;
  }
}



/* --- 無料サービスセクション --- */
.service-section {
  background: url(images/bg2.svg) no-repeat center / cover;
  padding-top: 100px;
  padding-bottom: 100px;
  color: #333;
}
@media only screen and (max-width: 600px) {
  .service-section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

.service-inner {
  text-align: center;
}

/* タイトル部分のスラッシュアイコン */
.service-head {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}

.service-icon {
  font-size: 3.2rem;
  font-weight: 300;
  color: #669bc6;
  transform: scaleY(1.5);
}

.service-title-text {
  font-size: clamp(3rem, 1.2rem + 4vw, 4rem);
  font-weight: bold;
  color: #669bc6;
  letter-spacing: 0.1em;
  position: relative;
  padding: 2rem 2rem 2rem 6rem;
}
.service-title-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background-image: url("images/bg-ttl1.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  display: inline-block;
}


/* サブタイトル枠線 */
.service-subtitle-box {
  border-top: 4px solid #669bc6;
  border-bottom: 4px solid #669bc6;
  display: inline-block;
  padding: 10px 40px;
  margin-top: 30px;
  margin-bottom: 40px;
}

.service-subtitle {
  font-size: clamp(2.2rem, 1rem + 2vw, 2.6rem);
  font-weight: 500;
  color: #669bc6;
}
.service-subtitle span {
  display: inline-block;
}

.service-description {
  line-height: 2;
  margin-bottom: 50px;
  font-size: 1.8rem;
}
@media only screen and (max-width: 767.98px) {
  .service-description {
    text-align: left;
    display: flex;
    justify-content: center;
  }
}

/* スライダー部分 */
.slider_2nd {
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: 40px;
}

.service-section .splide__slide img {
  border-radius: 10px;
}

.splide__arrow {
    height: 4em;
    width: 4em;
    transition: .35s;
    opacity: .85;
}
.splide__arrow svg {
    fill: #444;
    height: 2em;
    width: 2em;
}

/* --- アコーディオン (既存維持) --- */
.accordion {
  width: 100%;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.accordion-trigger {
  width: 100%;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

.accordion button {
  /* ブラウザ固有のデフォルトスタイルを解除 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* テキストカラーの指定 */
  color: #333; /* ここに任意の色を指定 */
}
.accordion-inner ul > li {
    margin-left: 12px;
}

/* --- アイコン設定 (修正箇所) --- */
.icon-plus {
  position: relative;
  width: 16px;
  height: 16px;
  /* 180度回転のための設定 */
  transition: transform 0.75s ease; 
}

.icon-plus::before, .icon-plus::after {
  content: "";
  position: absolute;
  background: #333;
}

/* 横棒*/
.icon-plus::before { 
  width: 100%; height: 2px; top: 50%; left: 0; 
  transform: translateY(-50%);
}

/* 縦棒 */
.icon-plus::after { 
  width: 2px; height: 100%; top: 0; left: 50%; 
  transform: translateX(-50%);
}

/* --- 開いた時 --- */

/* アイコン全体を225度回転させて×にする */
.accordion-trigger.is-active .icon-plus { 
  transform: rotate(225deg); 
}

/* --- コンテンツエリア (既存維持) --- */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  text-align: left;
}

.accordion-inner {
  padding: 20px 30px;
  border-top: 1px solid #f0f0f0;
}
.accordion-inner ul>li {
  line-height: 1.428;
  margin-bottom: 12px;
}
.accordion-inner ul>li:last-child {
  margin-bottom: 0;
}



/* --- 有料サービスセクション --- */
.paid-service {
  background: url(images/bg1.svg) no-repeat center / cover;
  padding-top: 100px;
  padding-bottom: 100px;
  color: #333;
}

.service-lead {
  line-height: 1.8;
  margin-bottom: 60px;
  font-size: 1.8rem;
  text-align: center;
}

/* カードグリッド */
.paid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0 auto;
}

/* サービスカード単体 */
.paid-card {
  background: #fff;
  border-radius: 10px;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
}

.paid-card:hover {
  transform: translateY(-5px);
}

/* アイコン */
.paid-icon-wrapper {
  width: 110px;
  height: 100px;
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.paid-icon {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

/* 商品名と価格 */
.paid-item-name {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.paid-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: #669bc6;
}

.paid-note {
  font-size: 1.4rem;
  color: #666;
  margin-top: 5px;
}

/* --- レスポンシブ --- */
@media only screen and (max-width: 900px) {
  .paid-grid {
      grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 600px) {
  .paid-grid {
      grid-template-columns: 1fr;
  }
  .paid-service {
      padding-top: 60px;
      padding-bottom: 60px;
  }
}




/* --- 専門サービスセクション --- */
.expert-service {
  /* 画像の淡いパープル背景を再現 */
  background: url(images/bg3.svg) no-repeat center / cover;
  padding-top: 100px;
  padding-bottom: 100px;
  color: #333;
}

.expert-service .service-title-text {
  color: #9c88c7;
}
.expert-service .service-title-text::before {
  background-image: url("images/bg-ttl2.svg");
}

/* リード文 */
.service-lead {
  line-height: 1.8;
  margin-bottom: 6.0rem;
  font-size: 1.8rem;
  text-align: center;
}
@media only screen and (max-width: 767.98px) {
  .service-lead {
    text-align: left;
    display: flex;
    justify-content: center;
  }
}

/* カードグリッド */
.expert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.0rem;
  margin: 0 auto;
}

/* カード単体 */
.expert-card {
  background: #fff;
  border-radius: 1.0rem;
  padding: 4.0rem 2.0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1.0rem 3.0rem rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease;
}

.expert-card:hover {
  transform: translateY(-0.5rem);
}

/* アイコン */
.expert-icon-wrapper {
  width: 200px;
  height: 140px;
  margin-bottom: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.expert-icon {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.expert-card:not(:nth-of-type(4)) .expert-icon {
  padding: 1.5rem 0;
}
.expert-card:nth-of-type(1) .expert-icon,
.expert-card:nth-of-type(2) .expert-icon {
  padding: 2rem 0;
}

.expert-item-name {
  font-size: 1.8rem;
  font-weight: bold;
  color: #333;
}

/* --- レスポンシブ --- */
@media only screen and (max-width: 900px) {
  .expert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 600px) {
  .expert-grid {
    grid-template-columns: 1fr;
  }
  .expert-service {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}





/* --- シェアカーセクション --- */
.share-car {
    color: #333;
    padding: 10.0rem 0;
}

.service-detail {
    display: flex;
    align-items: center;
    gap: 2.5rem 5.0rem;
    margin-bottom: 8.0rem;
}
.detail-camper {
  margin-bottom: 0;
}


/* 共通パーツ設定 */
.detail-image-box { flex: 0 0 50%; }
.detail-text-box { flex: 1; }
.detail-image-box img { border-radius: 10px;}

.detail-light-truck {
    flex-direction: row;
}

.detail-camper {
    flex-direction: row-reverse;
}

.detail-heading {
    font-size: 2.6rem; 
    font-weight: bold;
    color: #669bc6;
    margin-bottom: 2.0rem;
}

.detail-body {
  line-height: 1.8;
  margin-bottom: 3.0rem;
}

.detail-price {
  font-size: 2.4rem;
  font-weight: bold;
  color: #669bc6;
}

/* モバイル対応（画像が上、テキストが下） */
@media only screen and (max-width: 767.98px) {
    .service-detail {
        flex-direction: column !important;
    }
    .detail-image-box {
        width: 100%;
        order: -1;
    }
}
@media only screen and (max-width: 600px) {
  .share-car {
      padding-top: 60px;
      padding-bottom: 80px;
  }
}


/* --- Information セクション --- */
.info-section {
    background-color: #efefef;
    padding: 8.0rem 0;
    text-align: center;
}

/* タイトル (約32px) */
.info-title {
    font-size: 3.2rem;
    color: #6bb2d1;
    margin-bottom: 4.0rem;
    font-weight: bold;
}

/* 白背景のカードボックス */
.info-card {
    background-color: #ffffff;
    border-radius: 1.0rem;
    padding: 4.0rem 6.0rem;
    box-shadow: 0 0.4rem 2.0rem rgba(0, 0, 0, 0.05);
    margin-bottom: 4.0rem;
    text-align: left;
}
.home .info-card {
    margin-bottom: 0;
}

/* リスト構造 */
.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-item {
    display: flex;
    padding: 2.5rem 0;
    border-bottom: 1px solid #ddd;
    align-items: flex-start;
    gap: 4.0rem;
}

/* 最後のアイテムは線を消す */
.info-item:last-child {
    border-bottom: none;
}

.info-date {
    color: #333;
    flex-shrink: 0;
    min-width: 10.0rem;
}

.info-text {
    color: #333;
    font-size: 1.6rem;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 768px) {
  .info-item .headline {
    -webkit-line-clamp: 1;
  }
}
.info-item .headline a {
  text-decoration: none;
  transition: opacity .35s;
}
.info-item .headline a:hover {
  opacity: .75;
  text-decoration: underline;
}


/* お知らせ一覧ボタン */
.info-btn-wrap {
    margin-top: 4.0rem;
}


/* --- レスポンシブ対応 --- */
@media only screen and (max-width: 767.98px) {
    .info-card {
        padding: 2.0rem;
    }
    .info-item {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1.5rem 0;
    }
}


/* --- Instagram セクション --- */
.share-car+.instagram-section {
  background-color: #efefef;
}

.instagram-section {
    padding: 8.0rem 0;
    text-align: center;
}

.insta-title {
    font-size: 3.2rem;
    color: #6bb2d1;
    margin-bottom: 5.0rem;
    font-weight: bold;
    letter-spacing: 0.05em;
}

/* 4列のグリッドレイアウト */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 5.0rem;
}

/* 投稿アイテム */
.insta-item {
    width: 100%;
}

/* 画像ダミー (グレーの矩形) */
.insta-dummy {
    background-color: #d9d9d9;
    width: 100%;
    /* 角は丸めずシャープなデザイン */
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.insta-dummy:hover {
    opacity: 0.8;
}

/* もっと見るボタン (Informationボタンと共通のデザイン言語) */
.insta-btn-wrap {
    margin-top: 2.0rem;
}

/* --- レスポンシブ --- */
@media only screen and (max-width: 900px) {
    .insta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.0rem;
    }
}

@media only screen and (max-width: 480px) {
    .insta-grid {
        grid-template-columns: 1fr;
    }
}



/* --- アクセスセクション --- */
.access-section {
    background-color: #ebf7ff;
    padding: 10.0rem 0;
}

/* フレックスコンテナ */
.access-map-flex {
    display: flex;
    gap: 2.0rem;
    justify-content: center;
}

/* パネル共通（外観・マップ） */
.access-photo, 
.access-map-container {
    flex: 1;
}

/* 外観プレースホルダー */
.photo-dummy {
    width: 100%;
    height: 100%;
    background-color: #cccccc;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 「外観」テキスト */
.photo-dummy span {
    font-size: 2.4rem;
    font-weight: bold;
    color: #333;
}

/* Google Map コンテナ */
.map-placeholder {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;   
}
.map-placeholder iframe {
  width: 100%;
  height: auto;
  min-height: 100%;
  border: none;
}

/* --- レスポンシブ（スマホ対応） --- */
@media only screen and (max-width: 767.98px) {
    .access-map-flex {
        flex-direction: column; /* 縦並び */
    }

    .access-photo, 
    .access-map-container {
        width: 100%;
        aspect-ratio: 4 / 3;
        min-height: auto;
    }
}





/* --- フッターセクション --- */
.footer {
  background-color: #6bb2d1;
  padding: 6.0rem 2.0rem;
  text-align: center;
  position: relative;
}

.footer-inner {
  max-width: 100.0rem;
  margin: 0 auto;
}

/* ロゴデザイン */
.footer-logo-wrap {
  margin-bottom: 4.0rem;
}

.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.0rem;
  margin-bottom: 1.0rem;
}
.footer-logo img {
  width: clamp(213px, 20vw, 313px);
}


/* 店舗情報 (1.4rem = 14px) */
.footer-info {
  font-style: normal;
  line-height: 2;
}

.company-name {
  font-size: 2rem;
  margin-bottom: 1.0rem;
}

.address-group span,
.contact-group span {
  display: inline-block;
  margin: 0 0.5rem;
}


/* --- Page Top ボタン基本 --- */
.page-top-btn {
  cursor: pointer;
  position: absolute;
  top: -25px;/* PCのデフォルト */
  right: 8px;
  width: 50px;
  height: 50px;
  background-color: #2b7bb9;
  border-radius: 0.8rem;
  border: 0;
  outline: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  text-decoration: none;

  /* 初期状態：フェードアウト */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  /* 透明度と位置移動のTransition */
  transition: opacity 0.4s ease, visibility 0.4s ease, background-color 0.3s;
}

/* スクロール中に付与するクラス */
.page-top-btn.is-fixed {
  position: fixed;
  top: auto;    /* absolute時のtopを打ち消す */
  bottom: 20px; /* JSで指定していたdefaultBottom */
}

.page-top-btn.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* 矢印アイコン */
.page-top-btn .arrow {
  width: 1.2rem;
  height: 1.2rem;
  border-top: 3px solid #ffffff;
  border-right: 3px solid #ffffff;
  transform: rotate(-45deg);
  margin-top: 0.5rem;
}



/* --- レスポンシブ --- */
@media only screen and (max-width: 767.98px) {
  .home .footer {
    padding-bottom: 100px;
  }
  .address-group span,
  .contact-group span {
    display: block;
    margin: 0;
    line-height: 1.6;
  }
  
  .footer-logo-wrap {
    margin-bottom: 3.0rem;
  }

  .home .page-top-btn {
    bottom: 90px;
  }
}



/* --- side-nav 基本設定 --- */
.side-nav {
  position: fixed;
  z-index: 50;
}

/* // side-nav：基本は画面外（右に100%隠す） */
@media (min-width: 768px) {
  .side-nav {
    right: 0;
    top: 50%;
    /* 100%右に隠れた状態 */
    transform: translateY(-50%) translateX(100%);
    z-index: 50;
    
    /* 消えるときはディレイなし（0s） */
    transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1) 0s;
  }

  /* // 出現時（中央を過ぎた時） */
  .side-nav.is-show {
    transform: translateY(-50%) translateX(0);
    /* 表示するときだけ 0.8s 待ってから開始 */
    transition-delay: 0.35s;
  }

  /* // PC：フッター重なり時（即座に右へ逃げる） */
  .side-nav.is-footer-overlap {
    transform: translateY(-50%) translateX(100%);
    /* 消える動作なのでディレイなし */
    transition-delay: 0s;
  }
}

/* --- スマホレイアウト：画面最下部（高さの揃った横並び） --- */
@media only screen and (max-width: 767.98px) {
  .side-nav {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 80px; /* 基本の高さを指定 */
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: stretch; /* 子要素の高さを親に合わせる（基本） */
    justify-content: space-between;
    /* 下からスライドアップ */
    transform: translateY(100%);
    transition: .75s ease .35s;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 視認性確保 */
  }

  /* スマホ即時出現 */
  .side-nav.is-show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* 各アイテム：高さを100%にして揃える */
  .side-nav a,
  .side-nav button {
    flex: 1;
    display: flex;
    align-items: center; /* 中身のテキスト・アイコンを中央に */
    justify-content: center;
    height: 100%; /* 親の高さ(60px)に追随 */
    text-decoration: none;
    border-right: 1px solid #eee;
    box-sizing: border-box;
  }

  .side-nav a:last-child,
  .side-nav button:last-child {
    border-right: none;
  }
}




/* アイテム共通スタイル */
.side-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  padding: 16px 10px;
  transition: opacity 0.3s;
}
.side-nav-item:hover {
  opacity: .8;
}
.side-nav-item .icon {
  aspect-ratio: 1 / 1;
  display: flex;
  width: 100%;
  max-width: 24px;
  margin-bottom: 8px;
}

/* 画像通りの配色 */
.nav-reserve { background-color: #b3515e; }
.nav-line    { background-color: #669bc6; }
.nav-access  { background-color: #1a3668; }

.nav-text {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.3;
}




/* --- page_header --- */
#page_header {
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: auto;
}
#page_header::before {
    background: transparent;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.page_header-inner {
    height: 85px;
    /* background-color: rgba(107,178,209,.75); */
    background-color: #6bb2d1;
    position: relative;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: cover;
}
@media only screen and (max-width: 767.98px) {
  .page_header-inner {
      height: 70px;
  }
}
.is-bgimage .page_header-inner {
    background: transparent;
    position: static;
}
 .page_header-inner .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
/* #page-title {
    padding: 4rem;
    background: #6bb2d1;
    min-width: 35%;
} */
#page-title .title {
    font-size: clamp(2.4rem, 1.5rem + 2vw, 4rem);
    font-weight: 500;
    text-align: center;
}


/* --- 記事 --- */
.contents-wrapper .post-content {
  padding-top: clamp(4rem, 4rem + 4vw, 8rem);
  padding-bottom: clamp(4rem, 4rem + 4vw, 8rem);
}
.post-content {
  color: #333;
}

.single .contents-wrapper .container {
  max-width: 1024px;
}

.post-title {
  color: #333;
  font-size: clamp(2.8rem, 1.4rem + 2vw, 3.8rem);
  display: flex;
  margin-bottom: 40px;
  justify-content: center;
}

.post-content .meta {
  color: #999;
  margin-top: 0;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .post-content .meta {
    font-size: 1.8rem;
  }
}


h2.wp-block-heading {
  margin-top: 0;
}
#the_content h2+.heading-h2 {
  margin-top: 3rem;
}
h2.wp-block-heading:not(:first-of-type) {
  margin-top: 8rem;
}
.heading-h2+.heading-h3,
.heading-h3+.heading-h4 {
  margin-top: 2rem;
}


h2.wp-block-heading {
    background-color: rgba(107,178,209,.75);
    color: #fff;
    font-size: clamp(2.2rem, 1.4rem + 2vw, 2.8rem);
    margin: 60px 0 20px;
    padding: 10px 20px;
    text-align: left;
}

h3.wp-block-heading {
    background-color: transparent;
    border: 1px solid transparent;
    color: #333;
    font-size: clamp(2rem, 1.4rem + 1.8vw, 2.2rem);
    margin: 6rem 0 2rem;
    overflow: hidden;
    position: relative;
    padding-bottom: .5rem;
    text-align: left;
}
h3.wp-block-heading::before,
h3.wp-block-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 4px;
}
h3.wp-block-heading::before {
    background-color: rgba(107,178,209,1);
}
h3.wp-block-heading::after {
    background-color: rgba(217,242,253,1);
}

h4.wp-block-heading {
  color: #333;
    font-size: clamp(1.8rem, 1.2rem + 2vw, 2rem);
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 6rem 0 2rem;
    text-align: left;
}
h4.wp-block-heading::before {
    content: "";
    width: 26px;
    height: 26px;
    background: rgba(107,178,209,1);
    border-radius: 50vw;
    flex-shrink: 0;
}


.post-content figure {
    margin: 20px 0;
}
:where(.wp-block-columns.is-layout-flex) {
    gap: 0 2em;
}
.post-content p {
  color: #333;
  line-height: 1.8;
  margin-bottom: 30px;
}

.post-content ol, .post-content ul {
  padding-left: 2em;
}
.post-content ol>li, .post-content ul>li {
  line-height: 1.6;
  margin-bottom: 12px;
}

.back-btn-wrap {
    text-align: center;
    margin-bottom: 100px;
}
@media only screen and (max-width: 767.98px) {
    .back-btn-wrap {
        text-align: center;
        margin-bottom: 80px;
    }
}

@media (min-width: 768px) {
    .post-content > h2:not(:first-child) {
        margin-top: 80px;
    }
}



/* --- 404 --- */
.file_not_found {
  color: #333;
  padding-top: clamp(4rem, 4rem + 4vw, 8rem);
  padding-bottom: clamp(4rem, 4rem + 4vw, 8rem);
}
.file_not_found h2 {
  font-size: clamp(2.2rem, 1.4rem + 2vw, 2.8rem);margin-bottom: 40px;
  display: flex;
  justify-content: center;
}
.file_not_found p {
  display: flex;
  justify-content: center;
}
.error404 .link {
  margin-bottom: 80px;
  text-align: center;
}




/* --- pagenation --- */
/* archive */
.pagenation {
  margin-top: 2.5rem;
  margin-bottom: 80px;
  padding: 1.5rem;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.pagenation span,
.pagenation a {
  border: 1px solid rgba(107, 178, 209, 1);
  border-radius: 0.25rem;
  color: rgba(107, 178, 209, 1)!important;
  display: block;
  margin: 4px 8px;
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none!important;
}
.pagenation .current,
.pagenation a:hover {
  color: #fff!important;
  background: rgba(107, 178, 209, 1);
}
.pagenation a.prev,
.pagenation a.next {
  border: none!important;
}
.pagenation .dots {
  border: none;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: normal;
  display: flex; justify-content: center; align-items: flex-end;
  margin: 0 .5rem;
  padding-top: 0;
  padding-bottom: 0;
  width: auto;
}
.pagenation ol,.pagenation ul {
  display: flex; justify-content: center; align-items: flex-end;
  width: auto;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.pagenation .paginationLinks>li {
  margin: 0;
}

/* single */
/* -----------------------------------------
  Pagination & Pager
----------------------------------------- */
#pagination {
  margin: 40px auto 80px;
  max-width: 1024px;
  padding-left: 20px;
  padding-right: 20px;
}

/* 前後ナビゲーションのコンテナ */
#pager {
  display: flex;
  justify-content: space-between; /* 左右に振り分け */
  align-items: center;
  flex-wrap: wrap; /* スマホで縦並びを許容 */
  gap: 20px;
  margin-bottom: 30px;
}

/* 各ナビゲーション項目 */
#pager .col-prev, #pager .col-next {
  flex: 1; /* 幅を均等に持たせる */
  min-width: 250px; /* 極端に狭くなるのを防ぐ */
  border: 1px solid #333;
  border-radius: 1rem;
  padding: 2rem;
}

#pager .col-prev:only-child, #pager .col-next:only-child {
    flex: 0 0 50%;
}
.col-prev:only-child {
  margin-right: auto;
}
.col-next:only-child {
  margin-left: auto;
}


#pager .prev {
  padding-left: 4rem;
}
#pager .next {
  padding-right: 4rem;
}

#pager .prev a,
#pager .next a {
  position: relative;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}
/* 1番目の要素 (prev) の左側に矢印 */
#pager .prev a::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor; /* 親の文字色に合わせる */
  border-left: 2px solid currentColor;
  transform: rotate(-45deg); /* 左向き */
  transition: transform 0.3s ease;
  margin: auto;
  position: absolute; top: 0;left: -3rem; bottom: 0;
}

/* 2番目の要素 (next) の右側に矢印 */
#pager .next a::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg); /* 右向き */
  transition: transform 0.3s ease;
  margin: auto;
  position: absolute; top: 0;right: -3rem; bottom: 0;
}

/* ホバー時のアニメーション（矢印を少し動かす） */
#pager .prev a:hover::before {
  transform: rotate(-45deg) translate(-3px, -3px);
}

#pager .next a:hover::after {
  transform: rotate(45deg) translate(3px, -3px);
}


/* リンクエリアの共通設定 */
#pager .prev,
#pager .next {
  display: block;
  transition: opacity 0.3s ease;
}

#pager .prev { text-align: left; }
#pager .next { text-align: right; }

#pager a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333; /* 任意の色に変更してください */
  font-weight: bold;
  gap: 10px;
}

#pager .next a {
  justify-content: flex-end;
}

/* タイトル部分（長すぎる場合に三点リーダーで省略） */
#pager span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* アイコンのスタイル */
#pager i {
  font-size: 1.2em;
  color: #666; /* 任意の色に変更してください */
  display: none;
  
}

/* ホバーエフェクト */
#pager a:hover {
  color: #6bb2d1;
}

/* -----------------------------------------
  Back to List Button
----------------------------------------- */
#back_to_list {
  text-align: center;
  margin-top: 40px;
}


/* -----------------------------------------
  Responsive (Mobile)
----------------------------------------- */
@media only screen and (max-width: 767.98px) {
  #pager {
    flex-direction: column; /* スマホでは縦並び */
    gap: 15px;
  }
  
  #pager .col-prev, #pager .col-next {
    width: 100%;
    min-width: auto;
  }
  
  #pager .prev,
  #pager .next {
    text-align: center;
  }
  
  #pager .prev a,
  #pager .next a {
    justify-content: center;
  }
}



/* .search-results #search
---------------------------------------- */
.search .post h2 {
  color: #333;
  font-size: clamp(2.3rem, 1.5rem + 2vw, 3.2rem);
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.search .post-list {
  list-style: none;
}

#search.post {
  padding-top: clamp(4rem, 4rem + 4vw, 8rem);
  padding-bottom: clamp(4rem, 4rem + 4vw, 8rem);
}
#search.post .container {
  max-width: 1000px;
}
.search-results #search.post .post-list {
  display: flex;
  flex-wrap: wrap;
  margin: -20px -8px;
  transform: translateY(40px);
  transition: transform .75s ease .15s;
}
.search-results.js-is-loaded #search.post .post-list {
  transform: translateY(0px);
}

.search-results #search.post .post-list>li {
  width: calc(100% / 2);
  padding: 20px 8px;
}
/* .search-results #search.post .post-list>li>article {
  display: flex;
  flex-direction: column;
  gap: 12px;
} */

.search-results #search.post .post-list>li>article>a {
  color: #333;
  text-decoration: none;
}

.search-results .post .row>* {
  padding-left: .75rem;
  padding-right: .75rem;
}

.search-results .post .thumbnail {
  /* aspect-ratio: 1/1;
  background: #e9e9e9; */
  display: block;
  margin-bottom: 20px;
}
.search-results .post .thumbnail figure {
  aspect-ratio: 1447 / 1108;
  border-radius: 8px;
  overflow: hidden;
}
.search-results .post .thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: transform .75s;
}

.search-results .post .headline {
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: .75rem;
}
.search-results .post .time,
.search-results .post .cpt {
  color: #666;
  line-height: 1.4;
  margin-bottom: .25rem;
}
.search-results .post .cpt {
  font-size: 1.4rem;
  opacity: .75;
}

.search-results .post .no-result {
  border: none;
}

/* .search-results .post .headline a {
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
} */
 .search-results .post a:hover img {
  transform: scale(1.2);
}


.search-no-results .post-list {
  margin-left: 1em;
}
.search-no-results .no-result {
  color: #333;
  font-size: 1.8rem;
}


@media (min-width: 768px) {
  .search-results #search.post .post-list {
    margin: -20x;
  }
  .search-results #search.post .post-list>li {
    width: calc(100% / 3);
    padding: 20px;
  }
}
@media only screen and (max-width: 767.98px) {
  .search-results .post .headline {
    font-size: 1.6rem;
  }
}


/* HTMLの構造的にsectionにh2が必要だが
   デザイン的に非表示にする場合のstyle.
---------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}