@charset "UTF-8";

/*
Theme Name: hoshilogy-v2
Author: ホシロジー
Description: 
*/
body,dd,dl,dt,form,h1,h2,h3,h4,h5,li,ol,p,table,td,th,ul{margin:0px;padding:0px;font-weight:normal;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;list-style-type:none;font-size:100%}
* html body{font-size:100%}a{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none}a img{border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none}a img.animate{-webkit-transition:0.5s;transition:0.5s}img{vertical-align:bottom;max-width:100%;height:auto;-webkit-backface-visibility:hidden;backface-visibility:hidden}button,input,select,textArea{background:none;margin:0px;outline:none;padding:0px;font-weight:normal;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;list-style-type:none;font-size:16px;-webkit-appearance:none}button{cursor:pointer}*{-webkit-box-sizing:border-box;box-sizing:border-box}a:link{color:#000000;text-decoration:none}a:visited{color:#000000;text-decoration:none}a:hover{color:#000000;text-decoration:underline;-webkit-transition:0.5s;transition:0.5s}a:hover img.animate{-webkit-transition:0.5s;transition:0.5s;opacity:0.8}.clear:after{content:"";display:block;clear:both}.clear_both{clear:both}input[type=text], input[type=url], input[type=password], input[type=email], input[type=search], input[type=tel], textarea {background-color: #fff;background-image: none;border: 1px solid #ccc;box-shadow: 0 1px 1px rgba(0,0,0,.075) inset;color: #9a9a9a;line-height: 1.42857;padding: 6px 12px;width: 100%;transition: border-color .15s ease-in-out 0,box-shadow .15s ease-in-out 0;box-sizing: border-box;}.button,button,input[type=submit],input[type=reset],input[type=button]{display:inline-block;margin-bottom:20px;padding:10px 60px;border:1px solid #75288b;border-radius:3px;background:#7e2877;color:#fff;text-decoration:none;font-weight:700;line-height:normal;cursor:pointer;font-size:1.2em}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover{opacity:.8}
@font-face{font-family:Mulish;src:url('../webfonts/mulish/Mulish-Regular.ttf') format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Mulish;src:url('../webfonts/mulish/Mulish-Black.ttf') format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Mulish;src:url('../webfonts/noto-serif/NotoSerifJP-Regular.ttf') format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Mulish;src:url('../webfonts/noto-serif/NotoSerifJP-Bold.ttf') format("truetype");font-weight:700;font-display:swap}
:root{
  --bg: #fff;
  --fg: #000;
  --border: #000;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --container: 1080px;
}

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

.fadein{opacity:0;transition:all .3s linear}
.fadein.in{opacity:1}
.ph {
    transform: scale(1, 1);
	transition: all .8s .1s linear;
}

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN",  "Yu Gothic", sans-serif;
  line-height: 1.75;
  overflow-x:clip;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}
hr{margin:2em 0}
a{color:#000;text-decoration:none;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
a:hover{color:#999;text-decoration:none !important;}
a:hover img{opacity:.75;filter:alpha(opacity=75);-ms-filter:"alpha(opacity=75)";-khtml-opacity:.75;-moz-opacity:.75;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}

a:focus-visible,
button:focus-visible,
label:focus-visible{
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

.li-disc{list-style: disc;}
.li-disc li{list-style: disc;}
.li-number{list-style: decimal;}
.li-number li{list-style: decimal;}
.li-disc li a,
.li-number li a{
	text-decoration:underline;
}
.li-disc li a:hover,
.li-number li a:hover{
	text-decoration: none;
}

.purple{color:#b696b9}
.deep-purple{color:#883190}
.brown{color:#4a2d0e}
.marker-purple{background: linear-gradient(transparent 50%, #f8ecf9 50%);}
.border-purple{ border:2px solid #b696b9; padding:1em 1em 0; margin:0 0 2em; background:#f8f0f9}
.border-red{ border:2px solid #d16e83; padding:1em 1em 0; margin:0 0 2em; background:#feedf1}
.border-black{ border:2px solid #9d9d9d; padding:1em; margin:0 0 2em; background:#f4f4f4}
.border-blue{ border:2px solid #88c6ed; padding:1em; margin:0 0 2em; background:#e5f5ff}
.border-green{ border:2px solid #90cdb4; padding:1em; margin:0 0 2em; background:#e5fff4}
.border-orange{ border:2px solid #edc388; padding:1em; margin:0 0 2em; background:#fff2e5}
.border-purple ul,
.border-purple ol,
.border-red ul,
.border-red ol,
.border-black ul,
.border-black ol,
.border-blue ul,
.border-blue ol,
.border-green ul,
.border-green ol,
.border-orange ul,
.border-orange ol{margin: 0 0 1em 1em !important;}
.border-purple p:last-of-type,
.border-red p:last-of-type,
.border-black p:last-of-type,
.border-blue p:last-of-type,
.border-green p:last-of-type,
.border-orange p:last-of-type{margin:0 0 1em !important}

/* Layout helpers */
.l-container{
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.l-section{
  padding-block: var(--space-5);
}

.p-top{
	padding-top:2em !important;
}
.search-edit{
	border: 1px solid #eee !important;
    box-shadow: inherit !important;
    border-radius: 1em;
	padding:1em !important;
}
.search-box {
    margin: 0 0 1em;
    padding: 0;
    position: relative;
}
.search-submit {
    position: absolute;
    right: 10px;
    top: 16px;
    font-size: 1.4em;
    cursor: pointer;
    line-height: 32px;
    border: 0;
    color: #ddd;
    padding: 0;
    background: #fff;
}
/* =========================
   Header
========================= */
.header{
  position: sticky;
  top: 0;

  /* ★ロゴはdrawerの下に（drawerは45） */
  z-index: 30;

  background: var(--bg);
}

.header__inner{
  display: grid;
  grid-template-columns: 3rem 1fr 3rem;
  align-items: center;
  height: 64px;

  /* ★ロゴ中央を安定させる（念のため） */
  justify-items: center;
}

.header__logo{
  display: flex;
  justify-content: center;
  /* ★中央カラムに確実に置く */
  grid-column: 2;
}

.logo__img{
  height: 28px;
  width: auto;
}

.header__spacer{
  width: 3rem;
  height: 1px;
  grid-column: 3;
}

/* =========================
   Drawer (no JS)
========================= */

/* checkbox本体（画面外へ） */
.drawer__toggle{
  position: fixed;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
  /* ★これを追加 */
  pointer-events: none;
}

/* ハンバーガーボタン */
.drawer__button{
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  /* ★常にdrawerより前に出す（ロゴは隠れてもOK） */
  position: fixed;
  z-index: 1000;

  /* ★ヘッダー左カラム位置に固定（64pxの中央に寄せる） */
  top: 16px;   /* (64 - 32) / 2 = 16 */
  left: 16px;

  /* ★背景が透けると見失うので薄く敷く（不要なら削除OK） */
  background: rgba(255,255,255,0.92);
}

/* =========
   3本線 → ×
========= */
.drawer__icon{
  position: relative;
  width: 22px;
  height: 16px;
}

/* 3本線の共通 */
.drawer__icon,
.drawer__icon::before,
.drawer__icon::after{
  content: "";
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--fg);
  transition:
    transform 220ms ease,
    top 220ms ease,
    opacity 180ms ease;
}

/* 中央線 */
.drawer__icon{
  top: 14px;
}

/* 上線 */
.drawer__icon::before{
  top: -7px;
}

/* 下線 */
.drawer__icon::after{
  top: 7px;
}

/* ====== 開いた状態：×に変形 ====== */
/* 中央線を消す */
.drawer__toggle:checked ~ .header__inner .drawer__icon{
	background: transparent;
}

/* 上下を中央に寄せて回転 */
.drawer__toggle:checked ~ .header__inner .drawer__icon::before{
  top: 0;
  transform: rotate(45deg);
}

.drawer__toggle:checked ~ .header__inner .drawer__icon::after{
  top: 0;
  transform: rotate(-45deg);
}

/* =========
   Overlay
========= */
.drawer__overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  z-index: 40;
  transition: background 200ms ease;
}

/* =========
   Drawer本体
========= */
.drawer{
  position: fixed;
  inset: 0 auto 0 0;
  width: min(80vw, 360px);
  background: var(--bg);
  border-right: 1px solid var(--border);
  transform: translateX(-105%);
  transition: transform 240ms ease;
  z-index: 45;
  padding: var(--space-4) 0;
}

/* 開いた状態 */
.drawer__toggle:checked ~ .drawer{
  transform: translateX(0);
}

.drawer__toggle:checked ~ .drawer__overlay{
  background: rgba(0,0,0,0.35);
  pointer-events: auto;
}

/* =========
   Drawer nav
========= */
.drawer__nav{
  margin-top: var(--space-4);
}

.drawer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  border-bottom: 1px solid #eee;
}

.drawer__link{
  display: block;
  position:relative;
  padding: var(--space-2);
  border-top: 1px solid #eee;
}

.drawer__link:hover{
  background: var(--fg);
  color: var(--bg);
}
.drawer__link::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    width: 7px;
    height: 7px;
    margin: auto;
    border-left: 2px solid #D5D7DD;
    border-bottom: 2px solid #D5D7DD;
    transform: rotate(-135deg);
}
.drawer__nav--search{
	margin:0 1em;
}

/**** breadcrumb ********************/
#breadcrumb{
	background-size: 2px 2px;
	padding:0 2em;
}
.breadcrumb-list ul{
	display: table;
}
.breadcrumb-list ul li {
    margin: 0 .6em 0 0;
    display: inline;
}
.breadcrumb-list ul li a{
	color:#000;
	font-size: .8em;
}
.breadcrumb-list ul li a:hover{
	color:#999;
}
.breadcrumb-list ul li a span{
	position:relative;
	margin: 0 12px 0;
}
.breadcrumb-list ul li:first-child a span{
	margin: 0 12px 0 0;
}
.breadcrumb-list ul li a span::after {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    right: -20px;
    margin: auto;
    width: 7px;
    height: 7px;
    margin: auto;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-135deg);
}
.breadcrumb-list ul li:last-child a span::after {
	display:none;
}

@media screen and (max-width: 450px) {
	#breadcrumb{
		padding:0 1em;
	}

}

/* =========================
   Hero
   - background-image ではなく img を背景として扱う（object-fit）
   - sticky header 分を考慮
   - 矢印が初期表示から見える
   - safe-area も考慮
========================= */

/* header高さ（sticky分）を変数化 */
:root{
  --header-h: 64px;
}
@media (max-width: 768px){
  :root{ --header-h: 56px; }
}

.hero{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  position: relative;
  padding-top: var(--header-h);

  /* 背景画像がはみ出す前提 */
  overflow: hidden;

  /* レイヤーの重なりを安定させる */
  isolation: isolate;
  background: var(--bg);
}

/* 背景画像（img要素を背景として扱う） */
.hero__media{
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;

  /* ★SPの余白問題を根本解決：余白を出さない */
  object-fit: cover;

  /* ★街並みを下に残す（必要なら数値調整） */
  object-position: center bottom;

  pointer-events: none;
  user-select: none;
  opacity: 40%;
}

/* 中央のテキストエリア */
.hero__inner{
  position: relative;
  z-index: 2;
  text-align: center;
  padding-block: var(--space-5);
}

/* 背景線画の上でも読めるように白パネルを敷く */
.hero__panel{
  display: inline-block;
  max-width: 92ch;
}

.hero__title{
  font-size: clamp(2rem, 5vw, 10rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-2);
  display: inline-block;
  padding: 4px;
}
.pc-only{
    display: inline;
  }

.hero__lead,
.hero__sub{
  margin: 0;
}

.hero__lead{
  font-size: 1rem;
  margin-top: var(--space-2);
}

.hero__sub{
  font-size: 1rem;
  margin-top: var(--space-1);
  max-width: 56ch;
  margin-inline: auto;
}

/* 矢印：下端から確実に見える位置に */
.hero__scroll{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(34px + env(safe-area-inset-bottom));
  z-index: 3;

  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;

  /* 背景画像の上でも視認しやすく */
  background: rgba(255,255,255,0.4);
}

.hero__scroll:hover{
  background: var(--fg);
  color: var(--bg);
}

.hero__arrow{
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 矢印クリックで #info などに飛んだとき、見出しがheaderに隠れないように */
#info,
#reason,
#about,
#service,
#contact{
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* SP微調整：どこを残すか（街並み/星座）を詰める */
@media (max-width: 768px){
  .hero__panel{
    width: 100%;
  }
  .pc-only{
  display: none;
  }

  /* 例：星座ももう少し見せたい場合は上に寄せる */
  .hero__media{
    object-position: center 75%;
  }
}




/* =========================
   Section headings
========================= */
.section-title{
  position: relative;
  text-align: center;
  margin-bottom: var(--space-4);
}

.section-title::before{
  content: attr(title);
  display: block;
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: 0.08em;
  line-height: 1;
}
.section-title{
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  opacity: 0.8;
}

/* =========================
   Info / News list
========================= */
.news{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-1);
}

.news__item{
	display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  padding: var(--space-2);
  border-bottom: 1px dotted var(--border);
}

.news__link{
  text-underline-offset: 3px;
}

.news__link:hover{
  text-decoration: underline;
}

.news__button{
  margin: 2em auto;
  text-align: center;
}

.news__button a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(116, 116, 116, 1);
  color: rgba(31, 36, 48, .85);
  font-size: 13px;
  letter-spacing: .04em;
  width: fit-content;
  transition: background .2s ease, border-color .2s ease;
}

.news__button a::after{
  content: "→";
  opacity: .75;
}

.news__button a:hover{
  background: var(--fg);
  color: var(--bg);
}

.news__item--content a{
	display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  padding: var(--space-2);
  border-bottom: 1px dotted var(--border);
}
.news__head{
	width:80%;
}
.news__head h3{
	font-size:1.2em;
	font-weight:900;
}
.news__item--content a figure{
	width:20%;
	border: 1px solid #eee;
	margin:0;
}

@media (max-width: 768px){
	.news__item--content a{
		padding:.4em 0;
	}
	.news__head{
		width:70%;
	}
	.news__head h3{
		font-size:.88em;
		font-weight:700;
		line-height:1.4;
	}
	.news__date{
		font-size:.8em;
	}
	.news__item--content a figure{
		width:28%;
	}
}

/* =========================
   SP：日付 / タイトルを列分け
   （PC表示は一切変更しない）
========================= */
@media (max-width: 768px){
	.news{gap:0}
  .news__item{
    display: block;
  }

  /* 日付：左列 */
  .news__date{
    flex: 0 0 7.5rem;      /* 列幅（必要なら調整） */
    white-space: nowrap;
    font-size: .8rem;
    color: var(--muted, #666);
    font-variant-numeric: tabular-nums;
  }

  /* タイトル：右列 */
  .news__link{
    flex: 1 1 auto;
    min-width: 0;          /* 折り返し崩れ防止 */
    display: block;
    line-height: 1.5;
  }
}


/* =========================
   Feature blocks (Reason / About)
   PC: 左右2分割（比率指定あり）
   SP: 縦積み（画像→文章）、どちらも100%
========================= */

.feature{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* =========================
   PC（デフォルト）
========================= */
.feature__inner{
  display: flex;
  align-items: stretch;
}

/* 文字側（l-container を無効化してカラム化） */
.feature__content{
  max-width: none; /* l-container の max-width を打ち消し */
  margin: 0;       /* l-container の中央寄せを打ち消し */

  padding-block: 8em;
  padding-inline: clamp(2rem, 4vw, 5rem);

  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* タイトル/本文 */
.feature__title{
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  line-height: 1.25;
  margin: 0 0 var(--space-2);
}

.feature__text{
  margin: 0 0 var(--space-3);
  font-size: 1rem;
}

/* 画像側 */
.feature__media{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.feature__img{
  display: block; /* ★追加：画像が潰れたり消えたりする事故を減らす */
  width: 100%;
  height: 100%;
  max-height: 80vh;
  object-fit: contain;
}

/* -------------------------
   PC 比率指定
   Reason: 左40%(text) / 右60%(image)
------------------------- */
.feature--image-right .feature__inner{
  flex-direction: row;
}

.feature--image-right .feature__content{
  flex: 0 0 40%;
  width: 40%;
}

.feature--image-right .feature__media{
  flex: 0 0 60%;
  width: 60%;
}

/* -------------------------
   PC 比率指定
   About: 左60%(image) / 右40%(text)
   （row-reverseで「画像が左」になる）
------------------------- */
.feature--image-left .feature__inner{
  flex-direction: row-reverse;
}

.feature--image-left .feature__content{
  flex: 0 0 40%;
  width: 40%;
}

.feature--image-left .feature__media{
  flex: 0 0 60%;
  width: 60%;
}

/* ボタン */
.button{
  display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(116, 116, 116, 1);
    color: rgba(31, 36, 48, .85);
    font-size: 13px;
    letter-spacing: .04em;
    width: fit-content;
    transition: background .2s ease, border-color .2s ease;
	background:#fff;
}
.button::after {
    content: "→";
    opacity: .75;
}
.button:hover{
  background: var(--fg);
  color: var(--bg);
}

/* =========================
   SP（768px以下）
   - flex解除 → 縦積み
   - 画像→文章
   - どちらも100%
========================= */
@media (max-width: 768px){
  .feature--image-right .feature__inner,
  .feature--image-left .feature__inner{
    flex-direction: column-reverse;
  }

  /* PC指定（40/60）を確実に無効化：同等の詳細度で上書き */
  .feature--image-right .feature__content,
  .feature--image-right .feature__media,
  .feature--image-left  .feature__content,
  .feature--image-left  .feature__media{
    width: 100%;
  }

  /* 画像を上に */
  .feature__media{
    margin-bottom: var(--space-4);
  }

  .feature__img{
    width: 100%;
    height: auto;   /* ★SPはautoに戻す（親の高さ0問題を避ける） */
    max-height: none;
    object-fit: contain;
  }

  /* テキスト */
  .feature__content{
    padding-block: var(--space-4);
    padding-inline: var(--space-3);
  }
}

/* =========================
   Services
========================= */
.cards{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}

.card{
  border: 1px solid rgba(116, 116, 116, 1);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 220px;
  border-radius: 20px;
}
.card__icon{
	margin:0 20%;
}
.card__title{
  margin: 0;
  font-size: 1.125rem;
  font-weight:900;
  text-align:center;
}

.card__text{
  margin: 0;
  font-size: 1rem;
  flex: 1;
}

.card__link{
 display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 999px;
    border: 1px solid rgba(116, 116, 116, 1);
    color: rgba(31, 36, 48, .85);
    font-size: 13px;
    letter-spacing: .04em;
    width: fit-content;
    transition: background .2s ease, border-color .2s ease;
}
.card__link::after {
    content: "→";
    opacity: .75;
}

.card__link:hover{
  background: var(--fg);
  color: var(--bg);
}

/* =========================
   Footer
========================= */
.hl-footer{
	background: #000;
    margin: 1em;
    padding: 2em;
    color: #fff;
    border-radius: 1em;
}
.footer{
  border-top: 1px solid var(--border);
  padding-block: var(--space-3);
}

.footer__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-2);
}

.footer__link{
  text-underline-offset: 3px;
  color:#fff !important;
}
.footer__link:hover{
	text-decoration:underline;
}

.footer__copy{
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px){
	.hl-footer{
		padding:1em;
		margin:1em;
	}
  .footer__inner{
	  display:block;
  }
  .footer__nav{
	  margin:0 0 2em;
  }
  .footer__list{
	  display:block;
  }
  
  
}

/* =========================
   Responsive (<=768px)
   - feature: 画像は端に「少しだけ見える」
   - services: 2列
========================= */
@media (max-width: 768px){
  .header__inner{
    height: 56px;
    grid-template-columns: 3rem 1fr 3rem;
  }

  .logo__img{
    height: 24px;
  }

  .l-section{
    padding-block: var(--space-4);
  }

  .cards{
    grid-template-columns: repeat(1, 1fr);
  }
}

.pagination{display: flex;justify-content: center; margin:4em 0}
.pagination li{margin:.2em;}
.pagination a{text-decoration:none;border:1px solid #000;padding:0 .6em .2em;font-size:1em;display:block;border-radius:4px}
.pagination li:not([class*="current"]) a:hover{background:#000; color:#fff}
.pagination .current a{background-color:#eee;cursor:default;pointer-events:none;}

.post-wrapper{
	padding:0;
}
.post-wrapper figure{
	width: min(100% - 2rem, 640px);
    margin-inline: auto;
}
.post-container {
    width: min(100% - 2rem, 640px);
    margin-inline: auto;
}
@media (max-width: 768px){
  .post-wrapper figure{
    margin:0 0 2em;
	width:100%;
  }
}
.post-header{
	margin:0 0 2em;
}
.post-title{
	font-size:2em;
	font-weight:900;
}
.post-header-items{
	display:flex;
	list-style: none;
    justify-content: space-between;
    padding: 0;
}
.post-category{
	background:#000;
	color:#fff;
	padding:0 .4rem;
	border:1px solid #000;
}
.post-category:hover{
	background:#fff;
	color:#000;
}
.post-container figure{
	margin: 0 0 3em;
}
.post-contents p{
	font-size:1.2rem;
	line-height:2em;
	margin:0 0 2rem;
}
.post-contents h2{
	font-size:2rem;
	line-height:2em;
	font-weight:900;
	margin:0 0 2rem;
}
.post-contents h3{
	font-size:1.6rem;
	line-height:2em;
	font-weight:900;
	margin:0 0 2rem;
}
.post-contents h4{
	font-size:1.4rem;
	line-height:2em;
	font-weight:900;
	margin:0 0 2rem;
}
.post-contents h5,
.post-contents h6{
	font-size:1.2rem;
	line-height:2em;
	font-weight:900;
	margin:0 0 2rem;
}
.post-contents ul, .post-contents ol{margin: 0 0 2em 1em;line-height: 2;font-size:1.2rem;}

.post-contents table,.post-contents th,.post-contents td {border-collapse: collapse;}
.post-contents table{width:100%;margin:0 auto 2em;box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);font-size:.88em;line-height: 1.6;}
.post-contents th {border-bottom: 1px solid #494949;padding:1em;font-weight: 700;text-align: center;width: 20%;min-width: 4em;}
.post-contents td{padding:1em;border-bottom: 1px solid #eee;}
.post-contents tr:nth-of-type(even) {background: #f9f9f9;}
.post-contents td a{text-decoration:underline}

.post-writer{
	border-bottom:1px solid #999;
	border-top:1px solid #999;
	padding:1em;
	display: flex;
	justify-content: space-between;
}
.post-writer-image{
	width:10%;
}
.post-writer-profile{
	width:86%;
}
.post-writer-name{
	font-size:1.2rem;
	font-weight:900;
	margin:0 0 .4em;
}
.post-writer-profile p{
	margin:0;
}

@media (max-width: 768px){
	.post-title{
		font-size:1.6em;
		line-height: 1.4em;
        margin: 0 0 .4em;
	}
	.post-header-items li{
		font-size:.8em;
	}
	.post-container img{
		width:100%;
		height:auto;
	}
	.post-contents p{
		font-size:1em;
	}
	.post-contents ul,
	.post-contents ol{
		font-size:1em;
	}
	.post-contents h2{
		font-size:1.4em;
	}
	.post-contents h3{
		font-size:1.2em;
	}
	.post-contents h4,
	.post-contents h5,
	.post-contents h6{
		font-size:1em;
	}
	.post-writer{
		padding:1em 0;
	}
	.post-writer-image{
		width:20%;
	}
	.post-writer-profile{
		width:76%;
	}

}

:root {
--color_faq_q: #e32564;
--color_faq_a: #5383b4;
}
.faq-form {
    --swl-faq_icon_radius: 0;
}
.is-style-faq-border .faq-form__item {
    padding-left: .5em;
    padding-right: .5em;
}
.faq-form .faq_q {
    font-size: inherit;
    font-weight: 700;
    line-height: 1.5;
    margin: 0;
    padding: 1em 1em 1em 3em;
    position: relative;
}
.faq-form .faq_a {
    line-height: 1.5;
    padding: 1em 1em 1em 3em;
    position: relative;
}
[data-q=fill-custom] .faq_q:before {
    background-color: var(--color_faq_q);
    color: #fff;
}
.faq-form .faq_q:before {
    border-radius: var(--swl-faq_icon_radius);
    bottom: unset;
    content: "Q";
    display: block;
    font-family: Arial, sans-serif;
    font-weight: 400;
    left: 0;
    line-height: 2;
    position: absolute;
    text-align: center;
    top: .75em;
    width: 2em;
}
[data-a=fill-custom] .faq_a:before {
    background-color: var(--color_faq_a);
    color: #fff;
}
.faq-form .faq_a:before {
    border-radius: var(--swl-faq_icon_radius);
    content: "A";
    display: block;
    font-family: Arial, sans-serif;
    left: 0;
    line-height: 2;
    position: absolute;
    text-align: center;
    top: .75em;
    width: 2em;
}

/* -----------------------------
   16 kan
----------------------------- */
.kan-hero{
  position: relative;
  min-height: calc(100svh - var(--hl-header-h)); /* iPhone対策 */
  display:grid;
  align-items: stretch;
  overflow: hidden;
  margin:0 0 2em;
}
.kan-hero__text{
  width: min(var(--hl-container), calc(100% - (var(--hl-gutter) * 2)));
  margin-inline: auto;
}
.kan-hero__image{
  position:absolute;
  inset:0;
}
.kan-hero__image img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
  opacity:.1;
}

/* overlay */
.kan-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 30%, rgba(251,251,252,.80), rgba(251,251,252,.12) 60%),
    linear-gradient(180deg, rgba(251,251,252,.65), rgba(251,251,252,.10) 55%, rgba(251,251,252,.88));
  pointer-events:none;
}

.kan-hero__text{
  position: relative;
  z-index: 1;
  padding-top: clamp(46px, 8vh, 92px);
  padding-bottom: clamp(40px, 8vh, 86px);
  display:flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}

.kan-hero__text .kan-heading{
  margin:0;
  color: rgba(0, 0, 0,1);
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.14;
  letter-spacing: 0.01em;
  font-weight: 900;
}

.kan-hero__text .kan-text{
  margin:0;
  background:rgba(0, 0, 0,1);
  color: rgba(255, 255, 255,1);
  letter-spacing: .06em;
  font-size: 13px;
}

.kan-lead{
	font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 1em;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference){
  .kan-hero__text{
    animation: hlFadeUp .55s ease both;
  }
  @keyframes hlFadeUp{
    from{ opacity: 0; transform: translateY(10px); }
    to{ opacity: 1; transform: translateY(0); }
  }
}

.kan-section + .kan-section{
  border-top: 1px solid var(--hl-line);
}
.kan-section {
    padding-block: var(--hl-section-pad);
}
.kan-section {
    width: min(var(--hl-container), calc(100% - (var(--hl-gutter) * 2)));
    margin-inline: auto;
}

.kan-content-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr); /* デフォルト：2個ずつ × 8行 */
	gap: 12px; /* 任意：余白 */
}
.kan-section ul{margin: 0 0 2em;}

@media screen and (min-width: 768px) {
	.kan-lead{
		font-size:2rem;
	}
	.kan-concept-text{
		text-align: center;
	}
	.kan-content-list {
		grid-template-columns: repeat(4, 1fr);
	}
}
.kan-search {
    width: min(var(--hl-container), calc(100% - (var(--hl-gutter) * 2)));
    margin-inline: auto;
}
.kan-title{margin: 0 0 12px;font-size: 22px;font-weight: 650; text-align:center}
.kan-btn{margin: 0; background:#000}

.kan-cap-box{border: 1px solid #000;clear: both;margin: -2px 0 2em;position: relative;z-index: 0;}
.kan-cap-box-heading{font-size: .85em;max-width: 100%;min-width: 2em;overflow: hidden;padding: .25em 1em;white-space: nowrap;align-items: center;background-color: #000;color: #fff;line-height: 1.5;margin-bottom: 0 !important;text-align: center;z-index: 1;}
.kan-cap-box-item{padding:1em 1em 0}
.kan-cap-box-item ul{margin:0 0 1em; text-align:center}
.kan-group{border: 1px solid #000; padding: 1em; border-radius: 1em;}
@media screen and (min-width: 768px) {
	.kan-cap-box-item ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
}

.p-ballon{align-content: flex-start;display: flex;justify-content: space-between; margin:0 0 2em;}
.p-ballon-image{flex-shrink: 0;position: relative;text-align: center;width: 60px; margin:0}
.p-ballon-image img{width:60px;height:60px;border-radius: 50%;}
.p-ballon-image figcaption{display: block;font-size: 10px;line-height: 1;opacity: .8;padding-top: 4px;}
.p-ballon-body{justify-content: flex-start;align-items: flex-start;display: flex;flex-basis: 100%;padding: 4px 24px;position: relative;}
.p-ballon-body:after {content: "";display: inline-block;position: absolute;top: 18px; left: 0;border: 12px solid transparent;border-right: 12px solid #f3f3f3}
.p-ballon-text {border-radius: 8px;color: #333;line-height: 1.6;max-width: 560px;padding: 1em;position: relative; background:#f3f3f3}
.p-ballon-text p{margin:0}
.cap-box{border: 1px solid #333;clear: both;margin: -2px 0 2em;position: relative;z-index: 0;}
.cap-box-heading{font-size: .85em;max-width: 100%;min-width: 2em;overflow: hidden;padding: .25em 1em;position: absolute;white-space: nowrap;align-items: center;background-color: #333;color: #fff;display: flex;gap: .5em;justify-content: center;line-height: 1.5;margin-bottom: 0 !important;text-align: center;z-index: 1;}
.cap-box-item{padding:2em 1em 0}
.cap-box-item ul, .cap-box-item ol{margin:0 0 1em 1em}

.outline{
	width:80%;
	font-size:.88em;
	border:1px solid #000;
	padding:1em;
	background:#f9f9f9;
	margin: 0 0 2em;
}
.outline ul{font-size:1em !important;}
.outline__list{margin: 0 0 0 1em !important;}
.outline__list li a:hover{color:#999;}
.outline__title{ margin:0 0 1em !important;background: #000;display: inline-block;padding: 0 1em;color: #fff;font-weight: 700;font-size: 1em !important;}

.b-card{margin:0;position:relative}
.b-card a{border:1px solid #c0b5a2;display:flex;justify-content:space-between;text-decoration:none;padding:1em}
.b-card a:hover{transform:translateY(-5px)}
.b-card-thumbnail{width:24%;margin: 0 1em 0 0;}
.b-card-content{width:100%}
.b-card-title{color:#000;font-size:1em;font-weight:700;margin:0 0 .4em}
.b-card-excerpt{color:#999;font-size:.8em}
@media screen and (min-width: 576px) {
	.b-card-thumbnail{width:16%;}
}

.transform-table{
	width:100%;
}
.table-wide__scroll{
    display: block;
    max-width: 100%;
    overflow-x: auto;
	-webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    padding-bottom: 10px;
    width: 100%;
	margin:0 0 22px;
}
@media (max-width: 768px){
	.transform-table th{
		display: block;
		text-align:left;
		width:auto;
		border-bottom:0;
		padding: 1em 1em 0;
	}
	.transform-table td{
		display: block;
		text-align:left;
	}
	.google-form{
		width:100%;
	}
}
/* FullCalendar list view の日付ヘッダーに「日」を付ける */
.fc-list-header-right::after {
  content: "日";
}

.post-tag a{
    display: block;
    margin: 0 0 1em;
    text-align: center;
    border-radius: 1em;
	border:1px solid #000;
    padding: .2em 0;
}
.post-tag a:hover{
	background: #000;
	color: #fff;
}
.post-header-items li a{
    margin: 0 0 1em;
    text-align: center;
    border-radius: 1em;
	border:1px solid #000;
    padding: .2em 1em;
    font-size: .8em;
}
.post-header-items li a:hover{
	background: #000;
	color: #fff;
}