/*
Theme Name: houjinkai-shimane
Author: Infinimum
Author URI: https://infinimum.net/
Description: Please read: tidythemes.com/concept. Donations: https://calmestghost.com/donate. BlankSlate is the definitive WordPress boilerplate starter theme. We've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability and no intrusive visual CSS styles have been added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/tidythemes/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2022.8
Requires at least: 5.2
Requires PHP: 8.2.0
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme © 2011-2022 TidyThemes
BlankSlate is distributed under the terms of the GNU GPL
*/

/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700;900&display=swap');*/
/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
*/


/*---------reset css-----------*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
img{
  vertical-align: bottom;
  
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
display:block;
}
nav ul , ul{
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
mark {
background-color:#ff9;
color:#000; 
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
hr {
display:block;
height:1px;
border:0;   
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
/*
button, input, select, textarea {
    font: inherit;
    margin: 0;
    width: 100%;
    line-height: initial;
}
*/
button, select {
    text-transform: none;
}








/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
  color:#0f172a; background:#f7fbff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html, body { overflow-x: hidden; }



/* ============ Tokens ============ */
:root{
  /* Header */
  --hdr-height: 68px;
  --hdr-bg: #ffffffcc;
  --hdr-border: rgba(15,23,42,.08);
  --brand-color: #0f172a;
  --link: #0f172a;
  --link-hover: #0ea5e9;
  --pill-border: rgba(2,6,23,.12);
  --menu-pill-bg: #0071BC;
  --menu-pill-fg: #fff;
  --z-header: 50;
  --z-drawer: 60;

  /* Hero */
  --hero-min-h: 120vh;
  --parallax-back:.10; --parallax-mid:.20; --parallax-front:.35;

  /* カーブ形状の調整用（画面に合わせて数字だけ変えればOK） */
  --curve-w: 180vw;   /* カーブ楕円の横幅（大きいほどなだらか） */
  --curve-h: 64vw;    /* カーブ楕円の縦高さ */
  --curve-rise: 26vw; /* info側へせり上げる量（大きいほど高く食い込む） */
  --curve-soft: 1.5vw;/* エッジの柔らかさ（0でカリッと） */
  --bow-w:   160vw;   /* 半楕円の横幅（大きいほど緩やか） */
  --bow-h:    50vw;   /* 半楕円の縦高さ */
  --bow-rise: 20vw;   /* 上セクションへ食い込む量（大きいほど上に） */
  --bow-soft: 1px;    /* エッジの柔らかさ（0～2px程度） */
  /* 上にせり上げる高さはそのまま */
  --contact-curve-h: clamp(160px, 22vw, 360px);

  /* 以前より高め。必要に応じてさらに上げてOK */
  --wave-h: clamp(120px, 16vw, 220px);

  --page-bg: #f7fbff;

  /* ==== 共通（調整しやすい色と寸法） ========================== */
  --ov-top:   #F5F5EB;   /* overview の最上段 */
  --ov-mid:   #9BB9BE;   /* overview の中間 */
  --ov-seam:  #FFB955;   /* overview 最下段 = info の最上段（継ぎ目色） */

  /* info の空～地平の色：必要なら微調整してください */
  --info-sky-1: var(--ov-seam); /* 上端（継ぎ目） */
  --info-sky-2: #F39A3A;       /* 中間のオレンジ */
  --info-sky-3: #E26A22;       /* 低い夕焼け */
  --info-ground: #C2D8DE;      /* 地平～下部の色 */

  /* 下部に確保する余白（シルエット表示エリア） */
  --info-pad-b: clamp(180px, 22vw, 360px);

  /* info の上余白（空の高さ＋ボタンの上マージンのイメージ） */
  /*--info-top-pad: clamp(100px, 12vw, 180px);*/
  --info-top-pad: clamp(40px, 20vw, 160px);

  /* 夕日の縦位置（% はセクションの高さに対する割合）*/
  --info-pad-b: clamp(320px, 30vw, 560px);

  /* 背景の空の“頭”をやや短く（上の空白を減らす効果） */
  --info-top-sky: 34%;   /* 以前: 38% くらい */

  /* 夕日の縦位置（ボタンの下）—必要なら微調整可 */
  --sun-y: 56%;

  /* Greeting ⇄ Slogan の境界色（完全同色で合わせる） */
  --seam-gs: #F5F5EB;   /* 上側も下側もこの色で“面”を作る */

  --c1: #F5FFEB;   /* Symbol 上端 */
  --c2: #E6E6DC;   /* 継ぎ目（中間色） */
  --c3: #FFD2AA;   /* Movie 下方向 */
  --feather-h: 64px;  /* 継ぎ目のフェザー高さ */

  --seam-top: #F5FFEB;   /* Symbol の“いちばん上”の色（ほんのりグリーン） */
  
  /* 追加：movie 下側グラデ用の色 */
  --mv-g1: #FFD2AA;  /* 下側オレンジ寄り */
  --mv-g2: #AAAAAA;  /* 中間のグレー */
  --mv-g3: #F5F5EB;  /* 最下端（ページのオフ白に馴染む） */
}



/* ============ Header (PC=center nav / SP=hamburger) ============ */
.site-header{
  position: sticky; top:0; inset-inline:0; z-index: var(--z-header);
  height: var(--hdr-height);
  backdrop-filter: saturate(120%) blur(6px);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-border);
}
/* 絶対配置で 左/中央/右 を固定（他CSSの影響を受けにくい） */
.site-header__inner{
  position: relative;
  max-width: 1200px; margin: 0 auto; height: 100%;
  padding: max(0px, env(safe-area-inset-top))
           calc(16px + env(safe-area-inset-right))
           max(0px, env(safe-area-inset-bottom))
           calc(16px + env(safe-area-inset-left));
}

/* 幅が足りない環境向けに少しだけ詰める（任意） */
@media (max-width: 1140px){
  .nav .nav__list{ gap: 8px; }
  .nav .nav__main{ font-size: 13.5px; }
  .nav .nav__sub { font-size: 11.5px; }
}

/* === PCナビの被り＆点の対策（追記）=== */

@media (min-width: 1052px){
  .site-header{
    background: transparent !important;
    border-bottom: 0 !important;
    backdrop-filter: none !important; /* ぼかしも無効化 */
    box-shadow: none !important;
    position: absolute;

  }
  /* まず、左右の“空け幅”を設定（ブランドと右側ボタンの分を確保） */
  .site-header__inner{
    --guard-left: 320px;   /* ←ブランド側の予約幅。長ければ大きく */
    --guard-right: 160px;  /* ←右側SNS/ボタン分の予約幅 */
  }

  /* ナビ本体：中央配置のまま、最大幅を制限＆箇条書き点を無効化 */
  .nav .nav__list{
    list-style: none;      /* 箇条書きの黒点を消す */
    margin: 0;
    padding: 6px;

    position: absolute; left: 55%; top: 50%;
    transform: translate(-50%, -50%);
    /*max-width: calc(100% - var(--guard-left) - var(--guard-right));*/
    width: max-content;    /* 中身に合わせる（はみ出しを防ぐ） */
    white-space: nowrap;   /* 2段折返しを防ぐ */
    gap: 10px;             /* 必要なら 8px などに調整可 */
    background-color: #FFF;
    border: 0 !important;                /* 枠線を消す */
    box-shadow: none !important;         /* 影を消す */
    padding: 0 !important;               /* 余白を少し詰める */
  }
  /* クリック余白を少し確保（お好みで調整可） */
  .nav .nav__link{
    padding: 8px 0.5em !important;
    border-radius: 8px;                  /* 角丸は任意。不要なら削除 */
  }

  /* 仕切り用に以前追加したドットを強制的にOFFにする */
  .nav .nav__list li + li::before{
    content: none !important;
  }
}

/* === PCだけ、ヘッダーの白背景と境界線をなくす === */
@media (max-width: 640px){
  .hero{
    padding-top: 0;
  }
}


/* 画像ロゴ */
:root{
  --brand-img-h: 26px;         /* SP/タブレットの高さ */
}
@media (min-width:1052px){
  :root{ --brand-img-h: 31px; } /* PCで少し大きく */
}
.brand{
  position: absolute; left: calc(16px + env(safe-area-inset-left)); top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--brand-color); 
  text-decoration: none; 
  font-weight: 800; 
  white-space: normal;
  /* 画像ロゴだけになるので余計な隙間を消したい場合は gap を0に */
  gap: 0;
}
.brand__logo{
  width: 32px; 
  height: 32px; 
  display: inline-grid; 
  place-items:center;
  border-radius: 8px; 
  /*background: #0ea5e9; */
  color:#fff; 
  font-size:14px; 
  font-weight:900;
}
.brand__image{
  display:block;
  height: var(--brand-img-h);
  width: auto;
  max-width: min(60vw, 460px); /* 長すぎ対策（お好みで調整） */
}


/* 2行レイアウト */
.brand__text{
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  margin-left: 0.5em;
}
/* 上の小さめ行 */
.brand__sup{
  font-size: clamp(10px, 1.2vw, 12px);
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .85;
}
.brand__title{ 
  display: block;
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 900;
  letter-spacing: .06em;
  margin-top: 2px; /* 行間の微調整（お好みで 0–4px） */
}


/* 中央：PCナビ（SPは非表示） */
.nav{ display:none; }
.nav__list{
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
  display: inline-flex; 
  gap: 10px; 
  align-items:center;
  background:#fff; 
  border:1px solid var(--pill-border);
  border-radius: 999px; 
  padding: 6px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.nav__link{
  display:inline-flex; 
  align-items:center; gap:6px;
  padding:10px 14px; 
  border-radius:999px; 
  color:var(--link);
  text-decoration:none; 
  font-weight:700; 
  font-size:14px; 
  line-height:1;
}
/*.nav__link:hover{ color:var(--link-hover); }*/

/* 右：SNS（PC）/ ハンバーガー（SP） */
.socials, .hamburger{
  position: absolute; 
  right: calc(35px + env(safe-area-inset-right)); 
  top: 50%;
  transform: translateY(-50%);
}
.socials{
  display:none; 
  gap:10px;
  position:absolute; 
  right: calc(55px + env(safe-area-inset-right)); 
  top:50%;
  transform: translateY(-50%);
}

@media (min-width: 1052px){ 
  .socials{ 
    display:flex; 
  } 
}

/* 画像ボタンの見た目（白丸の中に画像） */
.socials__btn{
  /*display:grid; */
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
  overflow:hidden;
  display:inline-grid; 
  place-items:center; 
  width:45px; 
  height:45px; 
  border-radius:999px;
  /*background:#fff; */
  /*border:1px solid var(--pill-border); */
  text-decoration:none;
}
.socials__btn img{
  width:100%; 
  height:100%; 
  object-fit:none; 
  display:block;
}
/*.socials__btn:hover{ filter:brightness(1.05); }*/


/* hamburger */
.hamburger{
  display:inline-grid; 
  place-items:center; 
  min-width:56px; 
  height:44px;
  padding:0 10px; 
  border:0; 
  border-radius:10px;
  background:var(--menu-pill-bg); 
  color:var(--menu-pill-fg);
  font-weight:800; 
  cursor:pointer;
}
.hamburger__inner{ 
  display:grid; 
  grid-template-columns:1fr auto; 
  align-items:center; 
  gap:10px; 
}
.hamburger__icon{ 
  width:22px; 
  height:14px; 
  position:relative; 
}
.hamburger__icon::before, 
.hamburger__icon::after, 
.hamburger__icon span{
  content:""; 
  position:absolute; 
  left:0; 
  right:0; 
  height:2px; 
  background:#fff; 
  border-radius:2px;
}
.hamburger__icon::before{ top:0; } 
.hamburger__icon::after{ bottom:0; }
.hamburger__icon span{ top:6px; } 

/* Drawer */
.drawer{
  position: fixed; 
  inset: 0 0 0 auto; 
  width: min(82vw, 360px);
  background:#fff; 
  z-index: var(--z-drawer); 
  transform: translateX(100%);
  transition: transform .25s ease; 
  box-shadow: -12px 0 32px rgba(2,6,23,.18);
  display: grid; 
  grid-template-rows: auto 1fr auto;
}
.drawer.is-open{ 
  transform: translateX(0); 
}
.drawer__head{ 
  display:flex; 
  align-items:center; 
  justify-content: space-between; 
  padding: 16px; 
  border-bottom:1px solid rgba(2,6,23,.08); 
}
.drawer__title{ 
  font-weight:800; 
}
.drawer__close{ 
  border:0; 
  background:#f1f5f9; 
  border-radius:10px; 
  padding:10px 12px; 
  cursor:pointer; 
  font-weight:800; 
}
.drawer__body{ 
  padding:12px 16px; 
  overflow:auto; 
}
.drawer__list{ 
  display:grid; 
  gap:8px; 
  list-style:none; 
  margin:0; 
  padding:0; 
}
.drawer__link{
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:14px; 
  border:1px solid rgba(2,6,23,.1);
  border-radius:12px; 
  text-decoration:none; 
  color:#0f172a; 
  font-weight:700;
}
.drawer__link:hover{ 
  /*background:#f8fafc; */
}
.drawer__foot{ 
  padding:14px 16px; 
  border-top:1px solid rgba(2,6,23,.08); 
  display:flex; 
  gap:10px; 
}
.drawer__foot a{ 
  flex:0 0 44px; 
  height:44px; 
  border-radius:12px; 
  display:grid; 
  place-items:center; 
  background:#fff; 
  /*border:1px solid rgba(2,6,23,.12); */
  border:none; 
}
.drawer__foot a img{
  width: 100%; 
}
.overlay{
  position: fixed; 
  inset:0; 
  background: rgba(2,6,23,.32);
  opacity:0; 
  pointer-events:none; 
  transition: opacity .2s ease; 
  z-index: calc(var(--z-drawer) - 1);
}
.overlay.is-open{ 
  opacity:1; 
  pointer-events:auto; 
}

/* PCで中央ナビ＆SNS表示、SPでハンバーガー表示 */
@media (min-width: 1052px){
  .nav{ display:block; }
  .hamburger{ display:none; }
  .drawer, .overlay{ display:none; }
}

/* ---- PCだけ、英語↑／日本語↓ の2行にする（SPには効かない） ---- */
@media (min-width: 1052px){

  /* クリック余白 */
  .nav .nav__link{ 
    display:flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.08;
    padding: 10px 18px;
 }
 /* 英語（上） */
  .nav .nav__main{
    display:block;
    color:#0071BC;
    font-weight:700;
    font-size:14px;
    letter-spacing:.02em;
    font-family: "Lunasima", system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
                 "Yu Gothic", "Meiryo", sans-serif;
    font-weight: 700;
    font-style: italic;

  }
  /* 日本語（下） */
  .nav .nav__sub{
    display:block;
    color:#000;
    font-size:12px;
    letter-spacing:.01em;
    opacity:.82;
  }
  /* 英字を少し濃く */
  /*.nav .nav__link:hover .nav__main{ color:#005e9c; }*/
  /* 日本語を少しはっきり */
  /*.nav .nav__link:hover .nav__sub{  opacity: .95; }*/

  /* 項目間のドット */
  .nav .nav__list{ 
    background:#fff;
    border:0;
    box-shadow:none;
    padding:8px 14px;
    border-radius:999px;
    gap:26px;
    list-style:none;
   }
  .nav .nav__list li{ 
    position:relative;
    /*min-width: 120px;*/
    min-width: 90px;
    width: 100%;
  }
  .nav .nav__list li + li::after{
    content:"";
    position:absolute;
    left:-13px;
    top:50%;
    transform:translateY(-50%);
    width:1px;
    height:24px;
    background:#E6E6E6;
  }
}


@media (min-width: 1200px){
  .nav .nav__list li{ 
    position:relative;
    min-width: 120px;
    width: 100%;
  }
}


/* ===== Information ===== */
.info{
  position: relative;
  isolation: isolate;
  /* ↑ ここはすでにお使いの指定でOK。変数が効くようになります */
  padding: var(--info-top-pad) 16px var(--info-pad-b);

  /* 画像3枚（左／夕日／右）＋ 夕景グラデーション */
  background-image:
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-4.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/yuhi.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-5.png"),
    /* 空の“頭”を増やす：上の色(#dec085)を var(--info-top-sky)% まで伸ばす */
    linear-gradient(
      180deg,
      #dec085 0%,
      #dec085 var(--info-top-sky),
      #f3a34e calc(var(--info-top-sky) + 20%),
      #e26a22 calc(var(--info-top-sky) + 42%),
      #c2d8de 100%
    );

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* 夕日だけ縦位置を変数でコントロール（ボタン群の下に来るように） */
  background-position:
    left 25%  bottom 30%,
    65% var(--sun-y),
    right 10% bottom 0,
    0 0;

  background-size:
    clamp(200px, 30vw, 320px) auto,
    clamp(96px,  10vw, 140px) auto,
    auto clamp(44%, 50vh, 62%),
    100% 100%;
  }
/* 画面が狭い時はさらに少し小さめに */
@media (max-width: 900px){
  .info{
    background-size:
      clamp(150px, 26vw, 260px) auto,
      clamp(72px,  11vw, 110px) auto,
      auto 28%,                    /* 右：高さ 46% 程度に */
      100% 100%;
  }
}

/* overview→info の“髪の毛ライン”対策：上端1pxかぶせ＋フェザー */
.info::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height:56px; pointer-events:none;
  background: linear-gradient(180deg, var(--ov-seam) 0%, rgba(255,185,85,0) 100%);
  z-index:0;
}
/* レスポンシブ（右シルエットを少し小さく） */
@media (max-width: 900px){
  .info{
    background-size:
      clamp(150px, 26vw, 260px) auto,
      clamp(72px,  11vw, 110px) auto,
      auto 28%,
      100% 100%;
  }
}


.info__wrap{ 
  max-width: 1080px; 
  margin-inline:auto; 
}

/* ボタングリッド */
.info-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap: 14px 22px;
  justify-items: center;
  margin: 6px auto 22px;
  max-width: 920px;
}

/* 青い丸ボタン */
.info-btn{
  position: relative;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  min-width: 220px; 
  height: 42px; 
  padding: 0 18px;
  background:#0071BC; 
  color:#fff; 
  text-decoration:none; 
  font-weight:800;
  border-radius:999px; 
  letter-spacing:.04em;
  box-shadow: 0 10px 26px rgba(14,165,233,.25);
  transition: transform .08s ease, filter .2s ease;
}
.info-btn::after{
  content:"›"; margin-left:.6em; transform: translateY(-1px);
  font-weight:900; font-size: 1.05em; opacity:.9;
}
.info-btn:hover{ 
  /*filter:brightness(1.05); */
  /*transform: translateY(-1px); */
}

/* レスポンシブ：2列→1列 */
@media (max-width: 1052px){
  .info-links{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 560px){
  .info-links{ grid-template-columns: 1fr; }
  .info-btn{ min-width: 100%; }
}
  



/* ===== Contact セクション ===== */
/* padding は .cta に集約し、ここは色とレイヤだけ持たせます */
#contact{
  position: relative;
  isolation: isolate;
  background:#000;
  padding: clamp(64px, 8vw, 120px) 16px;
  color:#fff;
  overflow: visible;           /* ← 上に出るカーブを見せるため必須 */
}

#contact::before{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(-1 * var(--bow-rise));   /* 上へ持ち上げて .info に食い込ませる */
  width:  var(--bow-w);
  height: var(--bow-h);
  pointer-events:none;
  z-index: 0;

  /* 半楕円の中が透明 → それ以外（外側）が黒になる */
  background: radial-gradient(
    90% 80% at 57% 0, /* 50%:横半径 / 100%:縦半径, 原点は上辺中央 */ 
    transparent calc(50% - var(--bow-soft)), 
    #000 50% /* ここから下が黒 */
  );
}


/* 内側幅は最前面に */
#contact .cta__wrap{ position:relative; z-index:1; }

/* （任意）小さめ画面で少し控えめに */
@media (max-width: 768px){
  :root{
    --bow-w:   180vw;
    --bow-h:    56vw;
    --bow-rise: 18vw;

    --curve-w: 200vw;
    --curve-h: 80vw;
    --curve-rise: 22vw;
    --curve-soft: 2vw;
  }
  #contact::before{
    /* 半楕円の中が透明 → それ以外（外側）が黒になる */
    background: radial-gradient(
      75% 50% at 57% 0, /* 50%:横半径 / 100%:縦半径, 原点は上辺中央 */ 
      transparent calc(50% - var(--bow-soft)), 
      #000 50% /* ここから下が黒 */
    );
  }

}


/* 見出し（既存の .section- 系を流用しつつ色だけ白寄りに） */
/*.cta__head{ text-align:center; margin-bottom: clamp(22px, 4vw, 34px); }*/
#contact .cta__head { text-align: center; }
.cta__title{ color:#fff; }
.cta__sub{ color:#fff; opacity:.72; }

/* 2カラム */
#contact .cta__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(340px, 520px));
  gap: clamp(16px, 3vw, 28px);
  justify-content: center;   /* セクション中央に */
  justify-items: stretch;    /* カードを列幅いっぱい */
  /*align-items: start;*/
  align-items: stretch;   /* ← ここを stretch に */
}


/* カード */
/* 各カード内の文字を中央揃えに */
#contact .cta-card{
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(2,6,23,.06);
  border-radius:18px;
  /*box-shadow:0 12px 32px rgba(2,6,23,.14);*/
  padding: clamp(18px, 3vw, 28px);
  text-align:center;

  height: 100%;              /* ← グリッドエリアの高さまで伸ばす */
  display: flex;             /* 任意：中身の縦並び */
  flex-direction: column;    /* 任意 */
}

/* カード見出し（アイコン＋ラベル） */
#contact .cta-card__eyebrow{
  /*justify-content:center;*/
  /*color:#111;*/

  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  margin: 0 0 .6rem;
  /*font-weight: 800;*/

}
/* ボタン一式も中央に */
#contact .cta-actions{
  display:grid;
  gap:.75rem;
  justify-items:center;
  text-align:center;
  margin-top:auto;
}

/* スマホは1列で中央に */
@media (max-width: 768px){
  #contact .cta__grid{
    grid-template-columns: minmax(260px, 640px);
  }
}


/* 画像パスはここで一括管理（必要なら変更） */
:root{
  --icon-tel:  url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/icon_tel.png");
  --icon-mail: url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/icon_mail.png");
}
/* 既存の .cta-icon の背景色などは無効化して画像表示に */
#contact .cta-card__eyebrow{
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:.5rem;
  font-family: 'Gothic A1', sans-serif;
  font-size: 1.25em;
}
.cta-icon{
  width: 28px;           /* PCの見た目（お好みで 26–32px） */
  height: 28px;
  display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size: contain;
  /* 以前の淡い背景色があれば打ち消し */
  background-color: transparent !important;
  border-radius: 0;       /* 角丸不要なら 0 */
}

/* 黒電話・封筒をそれぞれ指定 */
.cta-icon--tel  { background-image: var(--icon-tel);  }
.cta-icon--mail { background-image: var(--icon-mail); }

/* 小さめ画面で少し小さく */
@media (max-width: 768px){
  .cta-icon{ width:24px; height:24px; }
}

/* 電話番号を大きく青く */
.cta-phone{
  margin:.2rem 0 .8rem;
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(22px, 3.2vw, 41px);
}
.cta-phone a{ 
  color:#0071BC;
  text-decoration:none;
  font-family: 'Roboto', sans-serif;
 }
.cta-phone a:hover{ 
  /*text-decoration:underline;*/
}

/* 補足テキスト */
#contact .cta-card__note{ color:#0f172a; }
#contact .cta-card__note p{ margin:.25rem 0; }
#contact .cta-small{ }

/* ボタン */
#contact .cta-actions .btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  min-height: 42px; padding: 0 18px;
  border-radius: 999px; 
  text-decoration:none; 
  font-weight:800;
  width: min(560px, 65%);
  min-height:50px;
  border-radius:999px;
  font-family: 'Gothic A1', sans-serif;

}


.btn--primary{ 
  background:#0071BC; 
  color:#fff; 
  box-shadow:0 8px 20px rgba(14,165,233,.28); 
   filter:brightness(1.05);
}
/* 矢印付きボタン（テキストの右側に白い三角形） */
.btn--arrow{
  display:inline-flex;
  align-items:center;
  gap:3em;                 /* 文字と矢印の間隔 */
}

/* 文字ではなくCSS三角形で描画 */
.btn--arrow::after{
  content:"";
  display:inline-block;
  width:0; height:0;
  border-style:solid;
  border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent currentColor;
  transform: translate(15px, 0.5px);  /* ← ここを調整（右, 下） */
}

/* 既存の色指定があればそのまま。currentColorを使うので文字色に追従します */
.btn--primary{ background:#0071BC; color:#fff; }

/* メール側のレイアウト微調整 */
.cta-actions{ 
  display:grid; 
  gap:.6rem; 
}

/* レスポンシブ：1カラムに */
/* SP：1カラム */
@media (max-width: 900px){
  #contact .cta__grid{
    grid-template-columns: minmax(260px, 720px);
  }
  #contact .cta-actions .btn{ width: 100%; }
}



/* ===== Footer Banners ===== */
.footbnr{
  /*background:#fff;*/
  padding: clamp(20px, 4vw, 34px) 20px 36px;
}
.footbnr__wrap{
  max-width: 1080px; 
  margin-inline:auto;
  display:grid; gap: clamp(12px, 2.2vw, 20px);
  grid-template-columns: repeat(2, 1fr);
}
.footbnr__item{
  display:block; 
  overflow:hidden;
  text-align: center;
  margin: 0 auto;  
}
.footbnr__item:hover{ 
  /*transform: translateY(-2px); */
  /*filter: brightness(1.02); */
}
.footbnr__item img{
  width:80%; 
  /*height:100%; */
  display:block; 
  object-fit:cover;
  aspect-ratio: 16 / 4;
  max-width: 480px;
  margin: 0 auto;
}

/* スマホは縦並び */
@media (max-width: 640px){
  .footbnr__wrap{ grid-template-columns: 1fr; }
}

/* ===== Footer / Copyright ===== */
.site-footer{
  background:#000; 
  color:#fff;
  padding: 12px 16px 22px;
}
.site-footer__inner{
  max-width: 1080px; 
  margin-inline:auto; 
  text-align:center;
}
.site-footer__copy{
  font-size: 12px; 
  letter-spacing:.02em; 
  opacity:.84;
}





/* 見出し */
.section-head{ 
  text-align:center; 
  margin-bottom: 22px; 
}
.section-title{
  margin:0; 
  font-weight: 800; 
  letter-spacing:.02em;
  font-size: clamp(28px, 3.2vw, 38px);
  font-family: "Lunasima", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #0071BC;

}
.section-sub{ 
  margin:.25rem 0 0; 
  font-size:12px; 
  /*opacity:.7; */
  letter-spacing:.18em; 
  font-family: 'Gothic A1', sans-serif;
}

/* カード */
.card{
  background:#fff; 
  border:1px solid rgba(2,6,23,.08); 
  border-radius:16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(18px, 3.2vw, 28px);
}
.card + .card{ margin-top: clamp(16px, 3vw, 24px); }
.card__eyebrow{
  margin:0 0 10px; 
  font-weight:800; 
  color:#0f172a; 
  letter-spacing:.02em;
}
.card__eyebrow small{ 
  font-weight:700; 
  opacity:.6; 
  margin-left:.5em; 
}
.card__text{ 
  margin: .8rem 0 0; 
  line-height:1.9; 
  font-size:14px; 
  color:#0f172a; 
  opacity:.9; 
}

/* 小さめ画面の余白調整 */
@media (max-width: 640px){
  .card__text{ font-size:13px; }
}






/* 内容は前面へ */
#overview .panel__box,
#overview .overview__wrap{ 
  position:relative; 
  z-index: 1; 
}
.overview__wrap{ 
  max-width: 1040px; 
  margin-inline: auto; 
}

.ov-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  padding: clamp(22px, 4vw, 36px);
}

/* 定義リスト（ラベル列／内容列） */
.ov-dl{ margin:0; }
.ov-row{
  display:grid;
  grid-template-columns: 140px 1fr;   /* 左：ラベル / 右：本文（PC） */
  gap: 14px;
  align-items:flex-start;
  padding: 14px 0;
  border-top: 1px dashed rgba(2,6,23,.10);
}
.ov-row:first-child{ border-top:0; }

.ov-row dt{
  margin:0;
  font-weight:800;
  color:#0071BC;
  letter-spacing:.18em;
  text-align:right;
  white-space:nowrap;
}
.ov-row dd{
  margin:0;
  color:#0f172a;
  line-height:1.9;
  font-size:14px;
}

/* 箇条書き（大会内容） */
.ov-list{ 
  margin:.2rem 0 0; 
  padding-left: 1.2em; 
}
.ov-list li{ margin:.15em 0; }

/* SP：縦積み */
@media (max-width: 768px){
  .ov-row{ 
    grid-template-columns: 1fr; 
    gap: 6px; 
    padding: 12px 0; 
  }
  .ov-row dt{ text-align:left; }
}


/* View more */
/* ボタンはカードの外の下に余白を付与 */
.news-more{
  display:grid; 
  place-items:center;
  padding: 4em 6px 0;
}
.news-more__btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  min-width: 160px; 
  height: 40px; 
  padding: 0 18px;
  background: #0071BC; 
  color:#fff; 
  text-decoration:none; 
  font-weight:800;
  border-radius: 999px; 
  box-shadow: 0 6px 18px rgba(14,165,233,.28);
  z-index: 40;
}


/* -----------------------------------------------------------
breadcrumbs
パンくず
----------------------------------------------------------- */
.breadcrumbs {
  white-space: nowrap;
  overflow: hidden;
  zoom: 1;
  position: relative;
  width: 100%;
  margin: 3em auto 0;
  background-color: #F0EFEF;
}
  @media (max-width: 767px) {
    .breadcrumbs {
      margin: 2em auto;
    }
  }
  .breadcrumbs:after {
    content: "";
    display: block;
    clear: both;
  }
  .breadcrumbs ul {
    max-width: 1400px;
    overflow: hidden;
    margin: 0 auto;
    padding: 20px 0;
  }
    @media (max-width: 767px) {
      .breadcrumbs ul {
        padding: .25em 0;
      }
    }
    .breadcrumbs ul li {
      font-size: 12.5px;
      font-size: 1.25rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      float: left;
      padding-right: 5px;
    }
      .breadcrumbs ul li span {
        position: relative;
        padding: 5px;
        color: #d4ab37;
      }
      .breadcrumbs ul li a {
        position: relative;
        padding-right: 10px;
        color: #d4ab37;
      }
        .breadcrumbs ul li a:after {
          vertical-align: middle;
          content: "";
          position: absolute;
          top: 25%;
          bottom: 0;
          right: 0;
          width: 8px;
          height: 8px;
          border-top: 1px solid #d4ab37;
          border-right: 1px solid #d4ab37;
          transform: rotate(45deg);
        }
        .breadcrumbs ul li a:hover {
          text-decoration: underline;
          color: #d4ab37;
        }
          .breadcrumbs ul li a:hover span {
            color: #d4ab37;
          }



table.mailform {
	width: 100%;
}
table.mailform strong{
	background: #0071BC;
    color: #fff;
	padding: 3px;
	font-size: 10px;
}
table.mailform input, table.mailform select, table.mailform textarea {
	font-size: 15px;
	padding : 6px;
}
table.mailform select {
	width: 40%;
}
table.mailform textarea {
	width: 80%;
}

table.mailform th {
	vertical-align: middle;
}
table.mailform th, table.mailform td {
	border-bottom: 1px solid #ddd;
	padding: 20px 0;
}
table.mailform th.join , table.mailform td.join {
	border:none;
	padding-bottom: 0;
}
.wpcf7-submit {
	padding : 10px;
    background: #0071BC;
    color: #fff;
}
.btncenter {
	margin : 15px 0 0 0;
	width : 100%;
	text-align: center;
}
@media (max-width: 640px){
	table.mailform th, table.mailform td {
		display: block;
		border:none;
		padding: 10px 0;
	}
	table.mailform th.join , table.mailform td.join {
		padding: 10px 0;
	}
	table.mailform input,table.mailform textarea {
	width: 100%;
}
}
.grecaptcha-badge { visibility: hidden; }