/*
Theme Name: Hanasyo
Theme URI: https://www.hanasyo.co.jp/
Author: 制作会社名をここに記入してください
Description: 有限会社花匠さまの企業サイト用テーマ。特許技術を起点に、会社・事業・社会貢献・花屋としての顔をまとめた構成です。ブロックテーマのため、文章・写真の修正はWordPressの「エディター」から行えます。
Version: 1.4.0
Requires at least: 6.4
Tested up to: 6.6
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: hanasyo
Tags: block-patterns, full-site-editing, business, one-column
*/

/* ------------------------------------------------------------------
   色・文字の基本設定は theme.json 側にあります。
   ここには、theme.json だけでは表現できない見た目を書いています。
   ------------------------------------------------------------------ */

/* 節づけ ─ 通し番号と金の細罫 */
.hs-kicker{
  display:flex;align-items:baseline;gap:1rem;
  margin:0 0 1.6rem;font-size:.72rem;letter-spacing:.32em;
  color:var(--wp--preset--color--sumi-3);font-weight:600;
}
.hs-kicker::before{
  content:attr(data-no);
  font-family:var(--wp--preset--font-family--mincho);
  font-size:.95rem;letter-spacing:.1em;color:var(--wp--preset--color--kin);font-weight:400;
}
.hs-kicker::after{content:"";flex:1;height:1px;background:rgba(168,122,30,.16)}

/* ヘッダー ─ 上段にロゴと電話、下段にメニュー。
   項目が増えても崩れないよう、二段に分けています。 */
.hs-header{background:var(--wp--preset--color--washi)}
/* ロゴ ─ 画面幅に応じて大きさを変える。企業サイトとして見劣りしない大きさに。 */
.hs-header .wp-block-site-logo{width:auto}
.hs-header .wp-block-site-logo img{
  width:clamp(125px,13vw,180px);height:auto;max-width:none;
  transition:opacity .2s ease;
}
.hs-header .wp-block-site-logo a:hover img{opacity:.7}
.hs-header__nav{
  border-top:1px solid rgba(34,36,30,.10);
  border-bottom:1px solid rgba(34,36,30,.13);
}
.hs-header__nav .wp-block-navigation{font-size:.95rem;letter-spacing:.08em}
.hs-header__nav .wp-block-navigation__container{gap:0}
.hs-header__nav .wp-block-navigation-item__content{padding:.9rem 1.15rem;display:block}
.hs-header__nav .wp-block-navigation-item__content:hover{color:var(--wp--preset--color--kin)}
.hs-header__nav .wp-block-navigation .wp-block-navigation__submenu-container{
  background:var(--wp--preset--color--washi);
  border:1px solid rgba(34,36,30,.13);
  min-width:15rem;
}
@media(max-width:781px){
  .hs-header__nav{padding-top:.4rem;padding-bottom:.4rem}
  .hs-header .hs-tel{text-align:left}
}
.hs-tel{line-height:1.4;text-align:right}
.hs-tel b{display:block;font-family:var(--wp--preset--font-family--mincho);font-size:1.35rem;font-weight:400;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.hs-tel small{font-size:.72rem;letter-spacing:.1em;color:var(--wp--preset--color--sumi-3)}

/* ヒーロー */
.hs-hero{position:relative;min-height:min(78vh,34rem)}
.hs-hero .wp-block-cover__inner-container{max-width:74rem;margin-inline:auto;width:100%}
/* カバーブロックは中の文字を白にするため、ここで墨色に戻す。
   淡い花の上に白い明朝を置くと読めなくなる。 */
.hs-hero,.hs-hero .wp-block-cover__inner-container{color:var(--wp--preset--color--sumi)}
/* 文章はかすみの濃い左側に置く。中央に来ると背景と重なって読みにくい。 */
.hs-hero .hs-hero-body{max-width:34rem;margin-left:0;margin-right:auto}
.hs-hero-eyebrow{font-size:.78rem;letter-spacing:.34em;color:var(--wp--preset--color--kin);font-weight:600}
/* 文字を読みやすくするための、左からのかすみ */
.hs-hero .wp-block-cover__background{
  background:linear-gradient(100deg,rgba(251,250,246,.94) 0%,rgba(251,250,246,.80) 34%,rgba(251,250,246,.10) 66%,rgba(251,250,246,0) 100%)!important;
  opacity:1!important;
}

/* 特許 */
.hs-patent-fig{position:relative;background:#fff;padding:1rem;border:1px solid rgba(34,36,30,.13);margin:0}
.hs-patent-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.hs-seal{
  position:absolute;right:-1.1rem;top:-1.1rem;width:5.6rem;height:5.6rem;border-radius:50%;
  background:var(--wp--preset--color--shu);color:#fff;display:grid;place-content:center;text-align:center;
  font-family:var(--wp--preset--font-family--mincho);font-size:.82rem;line-height:1.5;letter-spacing:.12em;
  box-shadow:0 2px 12px rgba(181,67,47,.28);
}
.hs-patent-no{
  display:inline-block;padding:.7rem 1.3rem;border:1px solid var(--wp--preset--color--kin);
  color:var(--wp--preset--color--kin);font-family:var(--wp--preset--font-family--mincho);
  font-size:1.05rem;letter-spacing:.12em;
}

/* 枠つきの三分割・カード */
.hs-boxes{border:1px solid rgba(34,36,30,.13);background:rgba(34,36,30,.13);gap:1px!important}
.hs-boxes>.wp-block-column{background:var(--wp--preset--color--washi);padding:2rem 1.8rem}
.hs-card{border:1px solid rgba(34,36,30,.13);background:var(--wp--preset--color--washi)}
.hs-card figure{margin:0}
.hs-card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hs-card__body{padding:1.9rem 1.8rem 2.1rem}
.hs-tag{
  display:inline-block;font-size:.74rem;letter-spacing:.16em;color:var(--wp--preset--color--kin);
  background:rgba(168,122,30,.14);padding:.3rem .7rem;
}

/* 数字 */
.hs-figs{border:1px solid rgba(34,36,30,.13);background:rgba(34,36,30,.13);gap:1px!important}
.hs-figs>.wp-block-column{background:var(--wp--preset--color--washi);padding:2rem 1.4rem;text-align:center}
.hs-figs .hs-num{
  font-family:var(--wp--preset--font-family--mincho);font-size:clamp(2.1rem,3.6vw,3rem);
  line-height:1.15;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:0;
}
.hs-figs .hs-num small{font-family:var(--wp--preset--font-family--gothic);font-size:.9rem;letter-spacing:.1em;margin-left:.35em;color:var(--wp--preset--color--sumi-2)}
.hs-figs .hs-num-label{margin:.7rem 0 0;font-size:.86rem;color:var(--wp--preset--color--sumi-2);letter-spacing:.08em}

/* 花のある毎日 */
.hs-band img{width:100%;display:block;opacity:.92}
.hs-gallery figure{margin:0;background:#fff;border:1px solid rgba(34,36,30,.13);padding:.7rem}
.hs-gallery img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hs-gallery figcaption{padding:.9rem .3rem .3rem;font-size:.88rem;color:var(--wp--preset--color--sumi-2);letter-spacing:.06em;text-align:center}

/* 社会貢献 */
.hs-list{list-style:none;margin:0;padding:0}
.hs-list li{border-top:1px solid rgba(34,36,30,.13);padding:1.2rem 0;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:baseline}
.hs-list li:last-child{border-bottom:1px solid rgba(34,36,30,.13)}
.hs-list i{font-style:normal;color:var(--wp--preset--color--kin);font-family:var(--wp--preset--font-family--mincho)}
.hs-list b{display:block;font-weight:400;font-family:var(--wp--preset--font-family--mincho);font-size:1.1rem;margin-bottom:.2rem}
.hs-list span{font-size:.92rem;color:var(--wp--preset--color--sumi-2);line-height:1.95}

/* 縦書きのひとこと */
.hs-tategaki{
  writing-mode:vertical-rl;text-orientation:upright;
  font-family:var(--wp--preset--font-family--mincho);
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:2.15;letter-spacing:.22em;
  height:24rem;padding:1.5rem 1.2rem;border-right:1px solid rgba(168,122,30,.16);margin:0;
}
@media(max-width:781px){.hs-tategaki{writing-mode:horizontal-tb;height:auto;border-right:0;border-left:1px solid rgba(168,122,30,.3);padding:0 0 0 1.2rem}}

/* 会社概要・沿革 */
.hs-table{width:100%;border-collapse:collapse;font-size:.96rem}
.hs-table th,.hs-table td{text-align:left;padding:1.05rem .3rem;border-bottom:1px solid rgba(34,36,30,.13);vertical-align:top}
.hs-table th{width:9.5rem;font-weight:400;color:var(--wp--preset--color--sumi-3);letter-spacing:.1em}
.hs-history{list-style:none;margin:0;padding:0}
.hs-history li{display:grid;grid-template-columns:6rem 1fr;gap:1.3rem;padding:1rem 0;border-bottom:1px solid rgba(34,36,30,.13)}
.hs-history time{font-family:var(--wp--preset--font-family--mincho);color:var(--wp--preset--color--kin);letter-spacing:.06em;font-variant-numeric:tabular-nums}

/* お問い合わせ・フッター */
.hs-contact-tel{font-family:var(--wp--preset--font-family--mincho);font-size:clamp(2.2rem,5vw,3.5rem);line-height:1.2;letter-spacing:.04em;font-variant-numeric:tabular-nums;margin:0}
.hs-footer{background:#191B16;color:rgba(242,241,235,.62);font-size:.9rem}
.hs-footer a{color:rgba(242,241,235,.82)}
.hs-footer h2,.hs-footer h3,.hs-footer h4{color:rgba(242,241,235,.42);font-family:var(--wp--preset--font-family--gothic);font-size:.74rem;letter-spacing:.24em;font-weight:600}
.hs-footer .wp-block-site-logo img{height:4rem;width:auto;background:#F2F1EB;padding:.5rem .7rem}
.hs-footer ul{list-style:none;margin:0;padding:0}
.hs-footer li{padding:.28rem 0}



/* 沿革・工程リストの中の文章 */
.hs-history p{margin:0;font-size:.96rem;color:var(--wp--preset--color--sumi-2);line-height:1.9}
.hs-history p b{color:var(--wp--preset--color--sumi)}

/* よくあるご質問の開閉 */
.hs-faq summary{list-style:none}
.hs-faq summary::-webkit-details-marker{display:none}
details summary::-webkit-details-marker{display:none}
details summary{list-style:none;position:relative;padding-right:2rem!important}
details summary::after{
  content:"＋";position:absolute;right:.3rem;top:50%;transform:translateY(-50%);
  color:var(--wp--preset--color--kin);font-size:.9rem;
}
details[open] summary::after{content:"−"}

/* 表の見出し行（エリア別の納期など） */
.hs-table thead th{
  font-size:.76rem;letter-spacing:.18em;color:var(--wp--preset--color--sumi-3);
  border-bottom:1px solid rgba(34,36,30,.26);
}


/* 下層ページの、ホームへ戻る導線 */
.hs-crumb{
  margin:0 0 1rem;font-size:.85rem;letter-spacing:.1em;
  color:var(--wp--preset--color--sumi-3);
}
.hs-crumb a{color:var(--wp--preset--color--sumi-3);text-decoration:none}
.hs-crumb a:hover{color:var(--wp--preset--color--kin);text-decoration:underline}
.hs-crumb a::before{content:"← "}

/* 下層ページのタイトル帯。金の細罫を一本だけ添える。 */
.hs-pagehead .wp-block-post-title{margin:0;position:relative;padding-left:1.6rem}
.hs-pagehead .wp-block-post-title::before{
  content:"";position:absolute;left:0;top:.42em;bottom:.42em;width:3px;
  background:var(--wp--preset--color--kin-bright);
}

/* 「要確認」の仮表示。公開前に消してください。 */
.hs-todo{border-bottom:1px dotted var(--wp--preset--color--sumi-3);display:inline-block;line-height:1.1}
.hs-todo::after{content:"要確認";font-size:.42em;vertical-align:super;margin-left:.25em;color:var(--wp--preset--color--shu);letter-spacing:.05em;font-family:var(--wp--preset--font-family--gothic)}

/* 読みやすさ ─ 60代の方が主な読み手のため、本文は大きめ */
.wp-block-post-content p,.entry-content p{max-width:40em}