@charset "utf-8";
/* ==========================================================================
   スプランドゥール株式会社  静的サイト用スタイル
   旧WordPressテーマ（TCD AVALON）の見た目を再現して新規に記述したもの
   PC / スマホの切り替えは 1024px（旧テーマと同じ）
   ========================================================================== */

:root {
  --main: #FF6600;          /* テーマカラー（オレンジ） */
  --text: #333;
  --sub: #999;
  --main-bg: #fafafa;
  --font-base: Arial, "Hiragino Sans", "Yu Gothic Medium", "Meiryo", sans-serif;
  --font-headline: "Times New Roman", Times, "Yu Mincho", "游明朝", "游明朝体", "Hiragino Mincho Pro", serif;
  --font-rich: Garamond, "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  --font-logo: "Noto Sans JP", sans-serif;
  --side-width: 16.6667%;
}

/* リセット
---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, h1, h2, h3, p, a, img, ul, ol, li, hr, figure, header, footer, main, nav, aside, section, button {
  margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;
}
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; vertical-align: bottom; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
svg { display: block; fill: currentColor; }

/* 基本設定
---------------------------------------------------------------------- */
html { overflow-y: scroll; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-base); font-size: 16px; color: var(--text); line-height: 1; background: #fff; }
a { color: var(--text); text-decoration: none; transition: background-color .2s ease, color .2s ease; }
a:hover { color: var(--main); }
.fr { float: right; }
.mb15 { margin-bottom: 15px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb100 { margin-bottom: 100px !important; }

/* ローディング（JS有効時のみ表示） */
#site_loader_overlay { display: none; }
.js #site_loader_overlay {
  display: block; position: fixed; inset: 0; z-index: 99999; background: #fff;
  transition: opacity .8s ease;
}
.js #site_loader_overlay.is-hidden { opacity: 0; pointer-events: none; }
#site_loader_spinner {
  width: 60px; height: 60px; border-radius: 100%; margin: -30px 0 0 -30px;
  border: 4px solid rgba(255,102,0,0.2); border-top-color: var(--main);
  position: absolute; top: 50%; left: 50%;
  animation: loading 1.2s linear infinite;
}
@keyframes loading { to { transform: rotate(360deg); } }

/* ======================================================================
   PC（1025px以上）
   ====================================================================== */

/* サイドメニュー
---------------------------------------------------------------------- */
#side_col {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: var(--side-width); height: 100%; padding-top: 60px; background: #fff;
}
#logo_image { width: 80%; margin: 0 auto 50px; text-align: center; }
#logo_image .logo a { display: block; }
#logo_image img { width: 100%; }
.menu_button { display: none; }
#global_menu { margin: 60px 0; text-align: center; }
#global_menu li a { display: block; padding: 16px 0; font-size: 14px; color: var(--sub); }
#global_menu li a:hover { color: var(--main); }
#side_col .store-information {
  position: absolute; left: 5%; bottom: 30px; width: 90%;
  font-size: 12px; line-height: 1.6; text-align: center; color: var(--sub);
}
.store-information .store-name,
.store-information02 .store-name { font-size: 16px; line-height: 200%; font-weight: bold; }
.store-address { font-size: 12px; }

/* メイン
---------------------------------------------------------------------- */
#main_col {
  position: relative; margin-left: var(--side-width); width: calc(100% - var(--side-width));
  min-height: 100vh; background: var(--main-bg); border-left: 1px solid #efefef;
}
.container { width: 100%; max-width: 950px; margin: 0 auto; padding: 0 15px; display: flow-root; }

/* 下層ページ見出し（画像） */
#header { position: relative; width: 100%; margin-bottom: 100px; }
#header img { display: block; width: 100%; height: auto; }
.header-title {
  position: absolute; top: 50%; left: 0; width: 100%; padding: 0 40px; transform: translateY(-50%);
  font-family: var(--font-rich); font-size: 48px; font-weight: 500; line-height: 1.6; color: #fff; text-align: left;
}
.header-title span { display: block; max-width: 950px; margin: 0 auto; }
.header-title--no-img {
  font-family: var(--font-rich); font-size: 48px; font-weight: 500; line-height: 1.6;
  margin: 28px 0 33px; padding: 0 15px;
}
.container--no-img { margin-top: 47px; }
.header_notfound { position: relative; height: 200px; margin: 0 0 50px; background: #000; color: #fff; text-align: center; }
.header_notfound div { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }

/* パンくず */
#bread_crumb { margin: 10px auto 0; padding: 0 25px 20px; line-height: 1; }
#bread_crumb li { display: inline; position: relative; font-size: 12px; line-height: 160%; color: #aaa; }
#bread_crumb li + li { margin-left: 15px; padding-left: 15px; }
#bread_crumb li + li::before {
  content: ""; position: absolute; left: -1px; top: 50%; width: 5px; height: 5px; margin-top: -3px;
  border-top: 1px solid #aaa; border-right: 1px solid #aaa; transform: rotate(45deg);
}
#bread_crumb li a { color: #888; }
#bread_crumb li.home a { display: inline-block; vertical-align: -2px; }
#bread_crumb li.home svg { width: 14px; height: 14px; }
#bread_crumb li.home span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
#bread_crumb li.home a:hover { color: var(--main); }

/* 本文
---------------------------------------------------------------------- */
.post_content { font-size: 14px; }
.entry-content { padding: 0 15px; margin-bottom: 80px; }
#edit-area p { line-height: 250%; margin-bottom: 1em; word-wrap: break-word; }
.page-about #edit-area p { line-height: 220%; }
.post_content a { color: var(--main); }
.post_content a:hover { color: var(--main); text-decoration: underline; }
.post_content strong { font-weight: 700; }
.post_content h3 { clear: both; font-size: 130%; font-weight: 600; line-height: 1.2; margin: 0 0 10px; padding: 10px 0 0; }
.post_content hr { border-top: 1px solid #ccc; margin: 14px 0; }
.post_content ol { list-style: decimal outside; margin: 0 0 24px 1.5em; }
.post_content ul { list-style: circle outside; margin: 0 0 24px 1.3em; }
.post_content li { line-height: 2.2; }
.post_content img { max-width: 100%; height: auto; }
.post_content img.alignright { float: right; margin: 7px 0 7px 24px; }

#edit-area .headline {
  font-family: var(--font-headline); font-size: 42px; font-weight: 400; line-height: 1.6 !important;
  color: var(--main); margin-bottom: 100px; padding: 0;
}
.menu_category {
  font-family: var(--font-rich); font-size: 26px !important; font-weight: 400 !important;
  line-height: 1.1 !important; color: var(--main); margin: 0 0 20px !important; padding: 0 !important;
}
.desc1 { margin-bottom: 100px; }

/* WordPressブロックの装飾 */
.has-text-align-center { text-align: center; }
.has-vivid-cyan-blue-color { color: #0693e3; }
.has-luminous-vivid-orange-color { color: #ff6900; }
.wp-block-image { margin: 0 0 1em; }
.wp-block-columns { display: flex; gap: 2em; margin-bottom: 1.75em; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.post_content hr.wp-block-separator { border-top: 2px solid #808080; }

/* HOW TO DO ページの見出し（旧サイトのページ別CSS） */
.page-howtodo h3.title {
  margin: 60px 0 40px; padding: .5em;
  color: #494949; background: #fffaf4; border-left: 5px solid #ffaf58;
}
.page-howtodo hr { margin: 60px 0 40px; }

/* COMMITMENT */
.menu_contents .row { display: flex; margin-bottom: 100px; }
.menu_article { width: 50%; padding: 0 25px; }
.menu_names { list-style: none !important; margin: 0 !important; font-size: 14px; }
.menu_names li { line-height: 2.5 !important; }

/* ACCESS */
.row.mb60 { display: flex; }
.col-half { width: 50%; padding: 0 25px; }
#edit-area .store-name { font-size: 18px; font-weight: bold; line-height: 180%; }
.pt_google_map iframe { display: block; width: 100%; height: 400px; }

/* トップページ（全画面セクション）
---------------------------------------------------------------------- */
.section {
  position: relative; display: flex; align-items: center; min-height: 100vh;
  background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: cover;
}
.section.has_overlay::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.section_inner { position: relative; width: 100%; }
.section .container { max-width: 1200px; padding: 0 30px; }
.section .container::after { content: ""; display: block; clear: both; }
.top-container { float: left; width: 66.6667%; padding: 0 25px; }
.top-container.fr { float: right; }
.top-container .headline { font-family: var(--font-headline); font-weight: 500; line-height: 1.6; margin: 1em 0 10px; }
.top-container .disc { font-size: 14px; line-height: 2.5; margin-bottom: 2em; }
.btn_def {
  display: inline-block; width: 184px; line-height: 52px; text-align: center; font-size: 16px;
  color: #fff; background-color: rgba(0,0,0,0.5); border: 1px solid #fff;
  transition: all .5s;
}
.btn_def:hover { color: #fff; opacity: .5; transition: all .7s; }
#Page0 .btn_def:hover { background-color: rgba(255,102,0,0.9); }
#Page1 .btn_def:hover { background-color: rgba(255,102,0,0.1); }
#Page2 .btn_def:hover { background-color: rgba(0,0,0,0.5); }

.fp-nav { position: absolute; left: 50%; bottom: 7%; z-index: 10; display: flex; gap: 15px; transform: translateX(-50%); }
.fp-nav a { display: block; width: 24px; height: 24px; color: #fff; }
.fp-nav a:hover { color: #858585; }
.fp-nav svg { width: 24px; height: 24px; }

/* スクロールで表示（JS有効時のみ） */
.js .movein { opacity: 0; transform: translateY(50px); transition: opacity 2s, transform 2s; }
.js .movein.movein_ef { opacity: 1; transform: translateY(0); }

/* PCではセクション単位でスクロールが止まる（旧サイトの fullPage.js の代わり） */
@media screen and (min-width: 1025px) {
  html:has(body.home) { scroll-snap-type: y mandatory; }
  .home .section { scroll-snap-align: start; }
  .home #footer { scroll-snap-align: end; }
}

/* フッター
---------------------------------------------------------------------- */
.footer_container { max-width: 950px; margin: 0 auto; padding: 30px 0 70px; border-top: 1px dotted #888; }
#footer_logo { text-align: center; margin-bottom: 60px; }
#footer_logo .logo { font-size: 40px; }
#footer_logo .logo a { font-family: var(--font-logo); font-weight: 700; color: var(--text); }
#footer_logo .logo a:hover { color: var(--main); }
#footer_logo .desc { font-size: 12px; margin-top: 20px; }
.store-information02 { display: none; }
.store-information01 { height: 60px; line-height: 60px; text-align: center; font-size: 12px; color: #fff; background: var(--main); }
.store-information01 .store-name { font-size: 14px; font-weight: bold; margin-right: 1.5em; }
.store-information01 .store-address { margin-right: 1.5em; }
.store-information01 .store-tel { font-size: 24px; }
#copyright { height: 60px; line-height: 60px; text-align: center; font-size: 12px; color: #fff; background: #000; }

/* ページ上部へ戻るボタン */
#return_top { position: fixed; right: 20px; bottom: 70px; z-index: 10; transform: translate3d(0, 300%, 0); transition: transform .35s; }
#return_top.active { transform: translate3d(0, 0, 0); }
#return_top a { display: block; width: 40px; height: 40px; border-radius: 100%; background: #555; color: #fff; }
#return_top a:hover { background: var(--main); }
#return_top svg { width: 16px; height: 16px; margin: 0 auto; position: relative; top: 11px; }

/* 画面の高さが低いPCではサイドの会社情報をメニューの下に置く（旧サイトと同じ） */
@media screen and (min-width: 1025px) and (max-height: 499px) {
  #side_col { position: absolute; height: auto; min-height: 100%; }
  #side_col .store-information { position: static; width: 90%; margin: 0 auto 30px; }
}

/* ======================================================================
   スマートフォン・タブレット（1024px以下）
   ====================================================================== */
@media screen and (max-width: 1024px) {

  /* ヘッダー（サイドメニューを上部に） */
  #side_col { position: relative; width: 100%; height: auto; padding: 0; z-index: 20; }
  #logo_image { width: auto; margin: 0; }
  #logo_image .logo a { display: inline-block; }
  #logo_image img { width: 100px; height: 100px; margin: 17px 0; }
  .menu_button { display: block; position: absolute; top: 3px; right: 0; z-index: 9; width: 60px; height: 60px; color: #000; }
  .menu_button svg { width: 22px; height: 22px; margin: 0 auto; }
  .menu_button .icon-close,
  .menu_button.active .icon-open { display: none; }
  .menu_button.active .icon-close { display: block; }
  #global_menu { display: none; position: relative; z-index: 9; margin: 0; text-align: left; box-shadow: 1px 2px 1.5px rgba(0,0,0,0.1); }
  #global_menu.open { display: block; }
  #global_menu li { position: relative; }
  #global_menu li a {
    margin: 0 0 -1px; padding: 2px 10px 2px 20px; border: 1px solid #000;
    font-size: 12px; line-height: 40px; color: #fff; background: #000;
  }
  #global_menu li a:hover { color: #fff; background: var(--main); }
  #global_menu li::after {
    content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px; margin-top: -3px;
    border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); pointer-events: none;
  }
  #side_col .store-information { display: none; }

  #main_col { margin-left: 0; width: 100%; min-height: 0; border-left: none; }

  /* 下層ページ */
  #header { margin-bottom: 0; }
  .header-title { padding: 0; font-size: 26px !important; }
  .header-title span { padding: 0 15px; }
  .container--no-img { margin-top: 0; }
  .header-title--no-img { font-size: 26px !important; margin: 16px 0 24px; }
  .single_wrap { padding: 30px 15px 0; border-bottom: 1px dotted #888; }
  #bread_crumb { padding: 0 0 20px; }
  .entry-content { padding: 0; }
  #edit-area .container { padding-top: 30px; }
  #edit-area .headline { font-size: 22px; line-height: 1.4 !important; margin-bottom: 10px !important; }
  .menu_category { margin: 10px 0 !important; padding: 10px 0 0 !important; line-height: 1.2 !important; }
  .desc1 { margin-bottom: 20px; }
  .mb100 { margin-bottom: 0 !important; }
  .post_content img.alignright { float: none; display: block; width: 100%; margin: 7px 0; }

  .menu_contents .row,
  .row.mb60 { display: block; margin-bottom: 30px; }
  .menu_article,
  .col-half { width: 100%; padding: 0; margin-bottom: 20px; }

  /* トップページ */
  .section .container { padding: 0; }
  .top-container,
  .top-container.fr { float: none; width: 100%; padding: 0 15px; }
  .top-container .headline { font-size: 22px !important; }
  .top-container .disc { font-size: 12px; line-height: 2.2; margin-bottom: 20px; }
  .btn_def { width: 144px; font-size: 12px; line-height: 43px; }
  .fp-nav { display: none; }

  /* フッター */
  #footer { background: var(--main-bg); }
  .footer_container { padding: 45px 0 0; border-top: none; }
  #footer_logo,
  .store-information01 { display: none; }
  .store-information02 { display: block; margin: 50px 0 30px; font-size: 12px; text-align: center; color: var(--sub); }
  .store-information02 .store-address { margin-top: 5px; }
  #copyright { height: 50px; line-height: 50px; font-size: 11px; }
  #return_top { right: 0; bottom: 60px; }
  #return_top a { width: 50px; height: 50px; border-radius: 0; background: #888; }
  #return_top svg { top: 17px; }
}

@media screen and (max-width: 781px) {
  .wp-block-columns { display: block; }
}