/* Theme Name: Tatsuki-Machida-Theme Template: swell Theme URI: Description: Child theme of SWELL Author: Version: 1.0.0 */ /* ================================ * Global * ================================ */ html { margin-top: 0 !important; } @media screen and (max-width: 782px){ html { margin-top: 0 !important; } } .home #content { padding-top: 0 !important; margin-top: 0 !important; } .home .p-mainVisual { margin-top: 0 !important; } /* ================================ * ヘッダー * ================================ */ #header .-txt .c-headLogo__link,#fix_header .l-fixHeader__logo .c-headLogo .c-headLogo__link{ font-family: "adobe-garamond-pro", serif ; font-weight: 400 !important; } .c-gnav .menu-item .c-smallNavTitle{ display: none;} /* タイトル共通 */ .c-pageTitle{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 2em; letter-spacing: .18em; color:#000; } .c-pageTitle.margin0{ margin-bottom:0; } .c-page_sub_Title_gray{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 2em; letter-spacing: .18em; color:#96a09b;; } .c-page_sub_Title_white{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 2em; letter-spacing: .18em; color:#fff;; } .c-pageTitle .c-pageTitle__subTitle{ font-size: .5em; display: block; font-style: normal; margin-left:0; } .c-pageTitle__subTitle{ font-style: normal !important; margin-left:0; } .color-black{ color:#000; } /* ================================ * フッター * ================================ */ .l-footer__widgetArea{background-color: #96a09b;} .l-footer__widgetArea .c-widget__title{display: none;} .l-footer__widgetArea .footer-title h4{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important;font-size: 1.2em;} .l-footer__widgetArea .footer-title p{font-size:.8em;} .l-footer__widgetArea .footer-photo-credit{font-size: .7em;} .l-footer__widgetArea .footer-copyright{font-size:.6em;} /* フッターメニュー */ .l-footer__foot .copyright{display: none;} .w-footer__box .c-listMenu .menu{ display: flex; flex-wrap: wrap; justify-content:left; align-items: center; gap: clamp(12px, 1vw, 36px); /* 項目間のスキマ（お好みで調整） */ margin: 0; padding: 0; list-style: none; } .w-footer__box .c-listMenu a{border: none;} /* SWELLの矢印/インデントを無効化してフラットに */ .w-footer__box .c-listMenu a{ padding-left: 0 !important; } .w-footer__box .c-listMenu a::before{ content: none !important; } /* 各項目＆リンクの当たり判定を広く */ .w-footer__box .c-listMenu .menu > li{ margin: 0; position: relative; } .w-footer__box .c-listMenu .menu > li > a{ display: block; padding: .7em 1.2em; /* ← 余白大きめ */ line-height: 1; text-decoration: none; color: var(--color_footer_text, #fff); letter-spacing: .12em; text-transform: uppercase; /* 英字を大文字に（不要なら削除） */ } /* ホバー時の軽いフィードバック（任意） */ .w-footer__box .c-listMenu .menu > li > a:hover{ opacity: .85; } /* スマホは中央寄せ＆少しコンパクトに */ @media (max-width: 782px){ .w-footer__box .c-listMenu .menu{ justify-content: flex-start; gap: 14px; font-size:1em; } .w-footer__box .c-listMenu .menu > li > a{ padding: .6em .9em; } .menu-footer-menu-container .menu-footer-menu .menu-item{font-size:1em;} } /* ================================ * SPメニュー * ================================ */ /* パネル幅と上部タイトル */ .p-spMenu__inner { width: 100vw; } .p-spMenu__nav { margin-top: 1em; } .c-widget__title.-spmenu{ background: none; position: fixed; top: 0; left: 0; right: 0; padding: 1em 0; color: #646e69; font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 1em !important; z-index: 1; /* メニュー本文より前に出す */ } /* タイポ・装飾の初期化 */ .p-spMenu__inner .menu, .p-spMenu__inner .sub-menu { list-style: none; margin: 0; padding: 0; } .p-spMenu__inner .menu-item{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 1.5em; letter-spacing: .18em; } .c-spnav a { border: none; } .c-listMenu a:before { display: none; } .c-smallNavTitle.desc { display: none; } /* 子メニューの文字サイズ（親より少し小さめ） */ .menu-item-has-children .menu-item { font-size: 1em; } /* 子メニューのインデント・余白調整 */ .c-listMenu .menu-item-has-children .menu-item a{ padding: .4em 1em .4em 3em; } /* ------- 親メニュー(子持ち)の見た目と矢印 ------- */ .p-spMenu__inner li.menu-item-has-children > a{ display: flex; align-items: center; justify-content: space-between; /* ラベルと矢印を左右に配置 */ gap: .75em; position: relative; padding-right: 2em; /* 右側に余白（矢印スペース） */ } /* 矢印（閉：下向き） */ .p-spMenu__inner li.menu-item-has-children > a::after{ font-family: icomoon !important; content: "\e910"; /* 下向き */ font-size: 1.1em; line-height: 1; opacity: .9; transition: transform .18s ease, opacity .18s ease; } /* 開：上向き（親が開いている時だけ） */ .p-spMenu__inner li.menu-item-has-children.is-open > a::after{ content: "\e912"; /* 上向き */ opacity: 1; } /* ------- サブメニュー開閉 ------- */ /* 初期状態は閉じる */ .p-spMenu__inner li.menu-item-has-children > .sub-menu{ display: none; opacity: 0; transform: translateY(6px); } /* is-open が付いた親だけ開く */ .p-spMenu__inner li.menu-item-has-children.is-open > .sub-menu{ display: block; /* ブロックで展開 */ opacity: 1; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; padding-left: 0; /* 余白は親の指定に任せる */ } /* ------- （一時）オーバーレイ無効化：確認用 ------- */ /* 本番では外す or 適切にレイアウトしてください */ .p-spMenu__overlay { pointer-events: none !important; } /* SPメニュー：SWELLのサブメニュー開閉ボタンを隠す */ #sp_menu .p-spMenu__inner li.menu-item-has-children > .c-accordionBtn, #sp_menu .p-spMenu__inner li.menu-item-has-children > .c-listMenu__toggle, #sp_menu .p-spMenu__inner li.menu-item-has-children > .c-iconBtn, #sp_menu .p-spMenu__inner li.menu-item-has-children > button { display: none !important; } /* 親を行全体タップのトグルにする体裁 */ #sp_menu .p-spMenu__inner li.menu-item-has-children > a{ display:flex; align-items:center; justify-content:space-between; } /* 矢印（閉→開） */ #sp_menu .p-spMenu__inner li.menu-item-has-children > a::after{ font-family: icomoon !important; content:"\e910"; /* 下向き */ font-size:1.1em; opacity:.9; transition:transform .18s ease, opacity .18s ease; } #sp_menu .p-spMenu__inner li.menu-item-has-children.is-open > a::after{ content:"\e912"; /* 上向き */ opacity:1; } /* サブメニュー開閉（初期は非表示） */ #sp_menu .p-spMenu__inner li.menu-item-has-children > .sub-menu{ display:none; } #sp_menu .p-spMenu__inner li.menu-item-has-children.is-open > .sub-menu{ display:block; } /* ========== HOME ========== */ .home #main_visual { position: relative !important; } .home #main_visual .p-mainVisual__inner { position: relative !important; } .home-section-wrap{position: relative;overflow: visible;} @media(max-width: 767px){ .home-section-wrap{padding: 1em;} } /* 各セクションの“後”（下端）に横線：最後のセクションは除外 */ .home-section-wrap:not(:last-child)::after{ content:""; position:absolute; left:50%; bottom:0; /* ← 下端を基準に */ transform: translate(-50%, 50%);/* 少しだけ外に出すなら 50% に */ width:100vw; /* 端から端まで */ height:1px; /* 線の太さ */ background: #96a09b; pointer-events:none; } /* 線まわりの余白（お好みで調整） */ .home-section-wrap{ padding-bottom: clamp(24px, 4vw, 48px); /* 線の直前（内側）の余白 */ margin-bottom: clamp(32px, 6vw, 72px); /* 線の直後（外側）の余白 */ } /* 初期は非表示（移動前にレイアウトが崩れないように） */ #home-title { display: none; } /* トップページだけ適用 */ .home #header{ /* レイアウトを崩さず重ねて隠す */ position: absolute; /* もともと上に重ねたい想定 */ top: 0; left: 0; right: 0; z-index: 100; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; } /* スクロール後に表示 */ .show-header .home #header{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* main_visual 内に移ったら表示＋オーバーレイ配置 */ #main_visual > #home-title{ display: block; position: absolute; left: 50%; bottom: 50px; /* ← ここを好みで調整 */ transform: translateX(-50%); z-index: 70; /* スライド/ページネーションより前面に */ text-align: center; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none; width:100%;/* スライダー操作を邪魔しない */ } /* タイトル内のリンクは操作できるように戻す */ #main_visual > #home-title a { pointer-events: auto; } /* タイポ微調整（お好みで） */ #main_visual > #home-title p{ margin: 0; line-height: 1.15; } #main_visual > #home-title .home-title-font{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 1em !important; letter-spacing: 0.18em; margin-bottom: 0.5em; } #main_visual > #home-title p.english-title{ font-family: "adobe-garamond-pro", serif; font-weight: 400 !important; font-size: 3.5em !important; letter-spacing: 0.18em; margin-bottom: 1em; } /* ========== メインメニュー（home-title内） ========== */ /* スライダーに隠れない対策 */ .home #main_visual, .home #main_visual .p-mainVisual__inner, .home #main_visual .swiper { overflow: visible !important; } .home #main_visual { position: relative; z-index: 2; } /* home-title をスライダー上に重ねる */ #home-title{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 160px; /* 位置は好みで調整 */ z-index: 1000; pointer-events: auto; } /* ===== メインメニュー（トップレベル） ===== */ #home-title .home-main-menu{ list-style: none; display: flex; gap: clamp(12px, 2.4vw, 28px); justify-content: center; align-items: center; flex-wrap: wrap; margin: 0; padding: 0; } #home-title .home-main-menu > li{ position: relative; /* サブメニューの基準 */ line-height: 1; } #home-title .home-main-menu > li > a{ position: relative; display: inline-block; color: #fff; text-decoration: none; font-family: "adobe-garamond-pro", serif; text-transform: uppercase; letter-spacing: .28em; padding: .65em .9em; line-height: 1; transition: color .18s ease, background-color .18s ease; } /* 下線アニメ（::before を絶対配置で下に敷く） */ #home-title .home-main-menu > li > a::before{ content:""; position:absolute; left:0; right:0; bottom:-0.2em; /* 文字下の少し下に線 */ height:1px; background:#fff; opacity:.9; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } #home-title .home-main-menu > li > a:hover::before, #home-title .home-main-menu > li:focus-within > a::before{ transform:scaleX(1); } /* 三角は右隣（::after） */ #home-title .home-main-menu > li.has-sub > a::after{ font-family: icomoon!important; content:"\e910"; /* 閉：下向き */ display:inline-block; margin-left:.5em; /* 文字との間隔 */ font-size:1.1em; vertical-align:middle; opacity:.9; transition:opacity .18s ease, transform .18s ease; } /* 開：上向き */ #home-title .home-main-menu > li.has-sub:hover > a::after, #home-title .home-main-menu > li.has-sub:focus-within > a::after{ font-family: icomoon!important;content:"\e912"; opacity:1; } /* has-sub アクティブ時の親タブ背景 */ #home-title .home-main-menu > li.has-sub:hover > a, #home-title .home-main-menu > li.has-sub:focus-within > a{ background: #dce6e1; color: #2a2a2a; } /* ===== サブメニュー（ドロップダウン） ===== - 親 li の幅に合わせる（left:0; right:0） - クラスが付いていない