@charset "utf-8";
/* 4メディア共通のスタイル。
 *
 * 宣材写真ドットコム（senzai-shashin.com / WPテーマ tukuru）のトップページと
 * 同じデザイン・UIに揃えてある。寸法・比率・挙動は tukuru の
 * style.css / front.css / magazine.css を移植した。
 *
 * ⚠️ 配色だけサイトごとに差し替える（レイアウトで --main-color 等を上書きする）。
 *    ここに具体的な色を直接書かない＝1枚のCSSで4サイトを賄う。
 * ⚠️ 記事本文の装飾は waiat.css が担当（WAIATと共通の資産なので混ぜない）。 */

:root{
  --main-color:#ff5a5f;
  --base-color:#fff2f3;
  --accent-color:#ff5a5f;
  --font-color:#3a3a3a;
  --muted-color:#717171;
  --line-color:#e8e8e8;
}

*{box-sizing:border-box;-webkit-box-sizing:border-box;outline:none !important}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  /* ⚠️ tukuru と同じ「emが画面幅に追従する」方式。以降の em 指定はすべてこれが基準 */
  margin:0;
  font-size:clamp(0px,(100vw / 80),16px);
  font-family:YakuHanJP,'PT Sans','Noto Sans JP',sans-serif;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.025em;
  color:var(--font-color);
  background-color:#fff;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}
a{color:#0693e3}

/*-----
header
-----*/
header.site{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3.75em;
  z-index:999;
}
/* スクロールで白背景に切り替える（site.js が .fixed を付ける） */
header.site.fixed{
  position:fixed;
  color:#3a3a3a;
  background-color:rgba(255,255,255,1);
  box-shadow:0 3px 25px rgb(77 77 99 / 10%);
}
header.site .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 auto;
  padding:0 1em;
  height:100%;
}
header.site .container .logo{
  margin:0;
  font-size:1em;
  line-height:1.2;
}
header.site .container .logo a{
  display:flex;
  align-items:baseline;
  gap:.5em;
  font-weight:bold;
  text-decoration:none;
  color:#3a3a3a;
}
header.site .container .logo a .logomark{
  align-self:center;
  width:1.75em;
  height:1.75em;
  object-fit:contain;
  flex:0 0 auto;
}
header.site .container .logo a .mark{
  align-self:center;
  width:.5em;
  height:.5em;
  border-radius:50%;
  background:var(--accent-color);
  flex:0 0 auto;
}
header.site .container .logo a .name{white-space:nowrap}
header.site .container .logo a .desc{
  font-size:.75em;
  font-weight:400;
  color:var(--muted-color);
  white-space:nowrap;
}
header.site .container nav{display:flex;align-items:center;height:100%}
header.site .container nav ul{
  display:flex;
  align-items:center;
  gap:1.25em;
  margin:0;
  padding:0;
  list-style:none;
}
header.site .container nav ul li a{
  font-size:.8125em;
  text-decoration:none;
  color:inherit;
  white-space:nowrap;
  transition:.2s;
}
header.site .container nav ul li a:hover{color:var(--accent-color)}
header.site .container nav .search{
  display:grid;
  place-items:center;
  width:2em;
  height:2em;
  border:1px solid currentColor;
  border-radius:50%;
  color:inherit;
  opacity:.6;
  transition:.2s;
}
header.site .container nav .search:hover{opacity:1;color:var(--accent-color)}

/* ⚠️ メインビジュアルの上でも文字色は濃いまま（宣材写真ドットコムと同じ扱い）。
   白抜きにすると明るい写真・淡い配色の上で完全に読めなくなる。 */

/* スマホは開閉式 */
header.site .toggle{display:none}

/*-----
main visual（.mv）
-----*/
.mv{position:relative;height:70vh}
.mv .container{
  position:relative;
  display:flex;
  align-items:end;
  justify-content:center;
  height:100%;
  z-index:3;
}
/* ドットの網。写真の上でも文字が沈まないようにする tukuru の作り */
.mv .container::after{
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url(../images/dot.png);
  background-position:left top;
  background-repeat:repeat;
  background-size:.125em auto;
  content:"";
  z-index:2;
}
/* ⚠️ 上端に淡い白のスクリムを敷く。宣材写真ドットコムはヘッダーの文字色を濃いまま
   写真に重ねているが、映像の左上が暗いとロゴとナビが読めなくなる（七五三・婚活で実発生）。
   白抜きに変えるより、写真側を少し起こすほうがデザインを崩さない。 */
.mv .container::before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:7em;
  background:linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.45) 45%, rgba(255,255,255,0) 100%);
  content:"";
  z-index:3;
  pointer-events:none;
}
.mv .container video,
.mv .container img.media{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-1;
}
/* 写真が未設置のあいだはサイトの配色で敷く（空の枠を出さない） */
.mv .container .fallback{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:
    radial-gradient(120% 90% at 78% 12%, #fff 0%, transparent 55%),
    linear-gradient(155deg, var(--base-color) 0%, var(--main-color) 100%);
  z-index:-1;
}
.mv .container .content{
  position:absolute;
  right:0;
  left:0;
  bottom:1em;
  margin:0 auto;
  width:92%;
  max-width:1280px;
  z-index:99;
}
.mv .container .content .wrap h2{
  margin:0;
  font-size:3em;
  line-height:1;
  letter-spacing:.025em;
}
.mv .container .content .wrap h2 span{
  display:inline-block;
  padding:.25em .25em;
  background-color:#fff;
  border-radius:.0625em;
}
.mv .container .content .wrap p{
  margin:.5em auto 0;
  padding-left:.125em;
  font-size:1.5em;
  font-weight:bold;
  line-height:1.6;
}
.mv .container .content .wrap p span{
  display:inline-block;
  padding:.25em .25em;
  background-color:#fff;
  border-radius:.0625em;
}

/*-----
記事・カテゴリのセクション（.post）
-----*/
.post{margin:2em 0}
.post .container{margin:0 auto;width:92%;max-width:1280px}
.post .container header.section{margin:0 0 1em}
.post .container header.section h2{display:inline-block;margin:0;font-size:1.25em}
.post .container header.section .en{
  display:inline-block;
  margin:0 0 0 1em;
  font-size:.75em;
  font-family:'Ubuntu',sans-serif;
  letter-spacing:.05em;
}
.post .container header.section .desc{margin:0 0 1em;font-size:.875em;color:var(--muted-color)}
.post .container header.section .more{
  float:right;
  font-size:.8125em;
  text-decoration:none;
  color:var(--muted-color);
}
.post .container header.section .more:hover{color:var(--accent-color)}

.post .container .row{display:flex;flex-wrap:wrap}
.post .container .row .column{margin:0 .5em .75em 0;width:calc((100% - 2em) / 5)}
.post .container .row .column:nth-child(5n){margin:0 0 .75em 0}
.post .container .row .column a{display:block;width:100%;text-decoration:none;color:inherit}
.post .container .row .column a figure{
  overflow:hidden;
  position:relative;
  margin:0 0 .5em;
  border-radius:.5em;
  border:.125em solid #fff;
  background:var(--base-color);
}
.post .container .row .column a:hover figure{border-color:var(--accent-color)}
.post .container .row .column a figure:before{content:"";display:block;padding-top:56.25%}
.post .container .row .column a figure img{
  display:block;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition-duration:.5s;
}
.post .container .row .column a:hover figure img{transform:scale(1.125)}
/* アイキャッチが無い記事の代替。写真の代わりにカテゴリ名を置く */
.post .container .row .column a figure .noimage{
  position:absolute;
  top:0;
  left:0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  padding:0 .5em;
  font-size:.875em;
  text-align:center;
  color:var(--main-color);
  opacity:.65;
}
.post .container .row .column a .title{
  overflow:hidden;
  margin:0;
  max-height:2.8em;
  font-size:.875em;
  line-height:1.4;
}
.post .container .row .column a:hover .title{color:var(--accent-color)}
.post .container .row .column .meta{
  margin:.125em 0 0;
  font-size:.6875em;
  color:var(--muted-color);
}
.post .container .empty{
  margin:2em 0;
  padding:2.5em 1em;
  border:1px dashed var(--line-color);
  border-radius:.5em;
  font-size:.875em;
  text-align:center;
  color:var(--muted-color);
}

/*-----
下層ページ共通
-----*/
.wrapper{margin:6em auto 0;width:92%;max-width:1140px}
.page-head{margin:0 0 2em}
.page-head h1{margin:0 0 .25em;font-size:1.5em;line-height:1.4}
.page-head .en{
  display:block;
  margin:0 0 .5em;
  font-size:.75em;
  font-family:'Ubuntu',sans-serif;
  letter-spacing:.05em;
  color:var(--muted-color);
}
.page-head .desc{margin:0;font-size:.875em;color:var(--muted-color)}

/* 親カテゴリのページで子へ振り分けるリンク */
.subcats{display:flex;flex-wrap:wrap;gap:.5em;margin:0 0 2em}
.subcats a{
  display:inline-block;
  padding:.4em 1em;
  font-size:.8125em;
  text-decoration:none;
  color:var(--font-color);
  background:var(--base-color);
  border-radius:2em;
  transition:.2s;
}
.subcats a:hover{color:#fff;background:var(--main-color)}

.breadcrumb{margin:0 0 1em;font-size:.75em;color:var(--muted-color)}
.breadcrumb a{text-decoration:none;color:inherit}
.breadcrumb a:hover{color:var(--accent-color)}
.breadcrumb span+span::before{content:"›";margin:0 .5em;opacity:.5}

/* 記事ページ。tukuru の single-magazine と同じ 本文65%＋目次サイドの2カラム */
.single{display:flex;gap:3%;align-items:flex-start}
.single main{width:65%}
.single aside{position:sticky;top:5em;width:32%}
.single aside .toc{
  padding:1em 1.25em;
  border:1px solid var(--line-color);
  border-radius:.5em;
}
.single aside .toc h4{margin:0 0 .5em;font-size:.875em}
.single aside .toc ul{margin:0;padding:0 0 0 1em;list-style:none;font-size:.8125em}
.single aside .toc ul li{margin:.375em 0}
.single aside .toc ul li.sub{padding-left:.75em;font-size:.9375em}
.single aside .toc ul li a{text-decoration:none;color:var(--muted-color)}
.single aside .toc ul li a:hover{color:var(--accent-color);text-decoration:underline}

.article-head{margin:0 0 1.5em}
.article-head h1{margin:.25em 0 .5em;font-size:1.75em;line-height:1.45}
.article-head .cat{
  display:inline-block;
  padding:.2em .75em;
  font-size:.75em;
  text-decoration:none;
  color:var(--main-color);
  background:var(--base-color);
  border-radius:1em;
}
.article-head .meta{
  display:flex;
  flex-wrap:wrap;
  gap:1em;
  margin:0 0 1.5em;
  font-size:.75em;
  color:var(--muted-color);
}
.article-head .thumb{margin:0 0 2em;border-radius:.5em;overflow:hidden}

.article-body{font-size:1em;line-height:1.9}
/* カテゴリのハブ本文。記事本文と同じ装飾CSS（waiat.css）を当てる */
.category-body{margin:0 0 3em}
.article-body h2{
  margin:2.5em 0 1em;
  padding:0 0 .5em;
  font-size:1.375em;
  border-bottom:.125em solid var(--main-color);
}
.article-body h3{margin:2em 0 .75em;padding-left:.6em;font-size:1.125em;border-left:.25em solid var(--main-color)}
.article-body h4{margin:1.5em 0 .5em;font-size:1em}
.article-body p{margin:0 0 1.5em}
.article-body ul,.article-body ol{margin:0 0 1.5em;padding-left:1.5em}
.article-body li{margin:.4em 0}
.article-body img{border-radius:.5em;margin:1.5em auto}
.article-body figure{margin:2em 0}
.article-body figcaption{margin:.5em 0 0;font-size:.8125em;text-align:center;color:var(--muted-color)}
.article-body table{width:100%;border-collapse:collapse;font-size:.875em;margin:1.5em 0}
.article-body th,.article-body td{border:1px solid var(--line-color);padding:.6em .75em;text-align:left}
.article-body th{background:var(--base-color)}
.article-body blockquote{margin:1.5em 0;padding:.25em 0 .25em 1em;border-left:.25em solid var(--line-color);color:var(--muted-color)}
/* 素の表は表だけ横スクロールさせる（本文ごと横に動かさない・器はWaiatHtmlが付ける） */
.article-body .waiat-table-wrap{overflow-x:auto;margin:1.5em 0}
.article-body .waiat-table-wrap table{margin:0}
/* 本文中の目次（TableOfContents が挿入する）。サイドの目次があるので控えめに */
.article-body .waiat-toc-nav{
  margin:2em 0;
  padding:1em 1.25em;
  border:1px solid var(--line-color);
  border-radius:.5em;
}
.article-body .waiat-toc-nav__title{margin:0 0 .5em;font-size:.9375em;font-weight:bold}
.article-body .waiat-toc-nav ul{margin:0;padding:0;list-style:none;font-size:.8125em}
.article-body .waiat-toc-nav__item{margin:.375em 0}
.article-body .waiat-toc-nav__item--h3{padding-left:1em}
.article-body .waiat-toc-nav a{text-decoration:none;color:var(--muted-color)}
.article-body .waiat-toc-nav a:hover{color:var(--accent-color);text-decoration:underline}

/* 記事末のCTA */
.cta{
  margin:3em 0 0;
  padding:2em 1.5em;
  text-align:center;
  background:var(--base-color);
  border-radius:.5em;
}
.cta .title{margin:0 0 .5em;font-size:1.125em;font-weight:bold}
.cta .note{margin:0 0 1.25em;font-size:.8125em;color:var(--muted-color)}
.btn{
  display:inline-block;
  padding:.75em 2em;
  font-size:.875em;
  font-weight:bold;
  text-decoration:none;
  color:#fff;
  background:var(--main-color);
  border-radius:2em;
  transition:.2s;
}
.btn:hover{opacity:.8}

/* 検索フォーム */
.search-form{display:flex;gap:.5em;margin:1em 0 0;max-width:26em}
.search-form input{
  flex:1;
  padding:.6em .8em;
  font:inherit;
  font-size:.875em;
  border:1px solid var(--line-color);
  border-radius:.25em;
}
.search-form button{
  padding:0 1.5em;
  font:inherit;
  font-size:.875em;
  font-weight:bold;
  color:#fff;
  background:var(--main-color);
  border:0;
  border-radius:.25em;
  cursor:pointer;
}

/* ページ送り */
.pagination{display:flex;justify-content:center;gap:.375em;margin:2.5em 0 0;padding:0;list-style:none;font-size:.875em}
.pagination a,.pagination span{
  display:grid;
  place-items:center;
  min-width:2.25em;
  height:2.25em;
  padding:0 .6em;
  text-decoration:none;
  color:inherit;
  border:1px solid var(--line-color);
  border-radius:.25em;
}
.pagination .active span{color:#fff;background:var(--main-color);border-color:var(--main-color)}
.pagination .disabled span{opacity:.4}

/* 固定ページ */
.page-body{font-size:1em;line-height:1.9}
.page-body h2{margin:2em 0 .75em;font-size:1.25em}
.page-body p{margin:0 0 1.25em}
.page-body table{width:100%;border-collapse:collapse;font-size:.875em;margin:1.5em 0}
.page-body th,.page-body td{border:1px solid var(--line-color);padding:.6em .75em;text-align:left}
.page-body th{width:10em;background:var(--base-color)}

/*-----
footer
-----*/
footer.site{margin:5em 0 0;border-top:1px solid var(--line-color)}
footer.site .container{margin:0 auto;padding:2em 0 1em;width:94%;max-width:1140px}
footer.site .container nav ul{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none}
footer.site .container nav ul li{margin:0 1em .5em 0;font-size:.8125em}
footer.site .container nav ul li a{display:block;text-decoration:none;color:inherit;transition:.3s}
footer.site .container nav ul li a:hover{text-decoration:underline;color:var(--accent-color)}
footer.site .container .sisters{margin:1em 0 0;font-size:.75em;color:var(--muted-color)}
footer.site .container .sisters a{margin:0 1em 0 0;text-decoration:none;color:inherit}
footer.site .container .sisters a:hover{color:var(--accent-color);text-decoration:underline}
footer.site .container .copyright{margin:2em 0 0;text-align:center}
footer.site .container .copyright a{display:inline-block;transition:.2s}
footer.site .container .copyright a:hover{opacity:.5}
footer.site .container .copyright a img{width:75px;height:auto}
footer.site .container .copyright .license{margin:0;font-size:.75em}
footer.site .container .copyright span{display:block;font-size:.625em;color:var(--muted-color)}

/*-----
スマホ（tukuru と同じ 769px で切り替える）
-----*/
@media (max-width:769px){
  .mv{height:60vh}
  .mv .container .content .wrap h2{font-size:1.5em}
  .mv .container .content .wrap p{font-size:.875em}

  .post .container .row .column{margin:0 .5em 1em 0;width:calc(100% / 2 - .25em)}
  .post .container .row .column:nth-child(2n){margin:0 0 1em 0}
  .post .container .row .column:nth-child(5n){margin:0 .5em 1em 0}
  .post .container .row .column a .title{font-size:.75em}

  .wrapper{margin:3.75em auto 0}
  .single{display:flex;flex-direction:column}
  .single main{width:100%}
  /* 目次は本文の前に置く（サイドが無くなるため） */
  .single aside{position:static;order:-1;width:100%;margin:0 0 2em}

  header.site .container .logo a .desc{display:none}
  header.site .container nav ul{display:none}
  header.site .container nav ul.open{
    display:block;
    position:fixed;
    top:3.75em;
    right:0;
    left:0;
    padding:1em 1.5em 1.5em;
    background:#fff;
    box-shadow:0 3px 25px rgb(77 77 99 / 10%);
  }
  header.site .container nav ul.open li{margin:0;border-bottom:1px solid var(--line-color)}
  header.site .container nav ul.open li a{display:block;padding:.9em 0;font-size:.9375em;color:#3a3a3a}
  header.site .toggle{
    display:grid;
    place-items:center;
    width:2.25em;
    height:2.25em;
    margin-left:.75em;
    padding:0;
    background:none;
    border:0;
    color:inherit;
    cursor:pointer;
  }
  header.site .toggle span{
    display:block;
    position:relative;
    width:1.25em;
    height:.125em;
    background:currentColor;
    transition:.2s;
  }
  header.site .toggle span::before,
  header.site .toggle span::after{
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    background:currentColor;
    content:"";
    transition:.2s;
  }
  header.site .toggle span::before{top:-.375em}
  header.site .toggle span::after{top:.375em}
  header.site .toggle.active span{background:transparent}
  header.site .toggle.active span::before{top:0;transform:rotate(45deg)}
  header.site .toggle.active span::after{top:0;transform:rotate(-45deg)}
  /* 開いている間はメニューが白背景なので、ヘッダーも白に倒す */
  header.site.menu-open{background:#fff}
  header.site.menu-open .container .logo a,
  header.site.menu-open .container .toggle{color:#3a3a3a !important}
}