@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ============================================================
   デザイントークン（Figmaカラー変数）
============================================================ */
:root {
  --accent:     #4c98aa;
  --main:       #c5dee4;
  --sub:        #e8f0f2;
  --base:       #ffffff;
  --text-main:  #333333;
  --text-small: #bebebe;
}

/* ============================================================
   Reset CSS for HTML5
============================================================ */
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,caption,tbody,tfoot,thead,
article,aside,canvas,details,figcaption,figure,footer,header,main,menu,nav,
section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ul, ol, dl {
  list-style: none;
}

/* ============================================================
   ベース：0.1rem = 10px（reset より後ろに書くことで上書きを防ぐ）
============================================================ */
html {
  font-size: 62.5%;
}

/* ============================================================
   共通
============================================================ */
body {
  font-size: 1.6rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
  color: var(--text-main);
  background: var(--base);
}

a {
  color: var(--text-main);
  text-decoration: none;
  box-sizing: border-box;
}

a:hover {
  opacity: 0.6;
}

h1 {
  font-weight: normal;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.box_wrap {
  margin: 0 auto;
  max-width: 76.8rem;
  box-sizing: border-box;
}

/* トリミング用ラッパー */
.img_wrap {
  position: relative;
  display: block;
  overflow: hidden;
}

.img_wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* セクション間スペース */
main > section:not(:last-child) {
  margin-bottom: 6rem;
}

/* ============================================================
   ハンバーガーメニュー（新構造）
   ・.gnav: fixed（スクロール追従）/ header内: relative
   ・.menu_button: accent色ボタン
   ・.menu-main: max-heightアニメーションで開閉
============================================================ */
.gnav {
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 10000;
}

.gnav .menu_button {
  width: 4.2rem;
  height: 4.2rem;
  background: var(--accent);
  border: 0.1rem solid var(--accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
}

.gnav .menu_button span {
  display: block;
  width: 100%;
  height: 0.2rem;
  background: var(--base);
  border-radius: 0.1rem;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.gnav .menu_button:hover,
.gnav .menu_button.is-open {
  background: var(--base);
}

.gnav .menu_button:hover span,
.gnav .menu_button.is-open span {
  background: var(--accent);
}

.menu-main {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  transition: max-height 0.3s ease;
  z-index: 9999;
}

/* header内: インフローで breadcrumb を押し下げる */
header .box_wrap > .menu-main {
  margin-left: auto;
}

.menu-main ul li {
  border-bottom: 0.1rem solid #aaa;
}

.menu-main ul li > a {
  display: block;
  padding: 2rem 1.6rem;
  color: var(--text-main);
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
}

.menu-main ul li > a:hover {
  opacity: 0.5;
}

/* ============================================================
   HEADER
   ・Figma: flex-col, gap 80px, padding 30px, 背景画像あり
   ・ロゴ: SVG内包ボーダー（185×95）
   ・キャッチ: 24px Bold accent
   ・h1: 16px Normal accent
   ・ハンバーガー: header内ではrelative
============================================================ */
header .header_mv {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding: 3rem;
  background-image: url(images/mv.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  height: 36.5rem;
}

/* ロゴ
   SVG（185×95）にボーダーが内包されているためCSS側では不要 */
header .header_mv .header_logo {
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
  align-self: flex-start;
}

header .header_mv .header_logo img {
  width: 18.5rem;
  height: 9.5rem;
  display: block;
}

/* キャッチ + h1 + ハンバーガー 横並び */
header .header_mv .header_wrap {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2rem;
  background: transparent;
}

/* Figma固定幅 337px */
header .header_mv .header_wrap .header_content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 33.7rem;
  max-width: 100%;
  flex-shrink: 1;
}

/* キャッチコピー（24px Bold accent） */
header .header_mv .header_wrap .header_content p {
  font-size: 2.4rem;
  font-weight: bold;
  color: var(--accent);
  line-height: 1.5;
  margin: 0;
}

/* h1（16px Normal accent） */
header .header_mv .header_wrap .header_content h1 {
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--accent);
  line-height: 1.5;
}

/* header内: gnav fixed解除 */
header .header_mv .header_wrap .gnav {
  position: relative;
  top: auto;
  right: auto;
  flex-shrink: 0;
}

/* ============================================================
   セクションタイトル（TOPICS / RECOMMEND 共通）
   ・デコ画像（英文字）が背景に絶対配置
   ・日本語テキストが前面・下揃え
   ・accent色の区切り線
============================================================ */
.section_title {
  text-align: center;
  margin-bottom: 4rem;
}

.section_title_inner {
  position: relative;
  height: 8.7rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-top: 6rem;
  margin-bottom: 2rem;
}

/* TOPICS / RECOMMEND デコ文字画像 */
.section_title_deco {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 100%;
  height: 8.7rem;
}

/* 日本語テキスト（前面） */
.section_title_text {
  position: relative;
  font-size: 2rem;
  color: var(--accent);
  line-height: 1.5;
  font-weight: normal;
  margin: 0;
}

/* 区切り線 */
.section_title_line {
  display: block;
  width: 4rem;
  height: 0.1rem;
  background: var(--accent);
  margin: 0 auto;
}

/* ============================================================
   TOP（index）
   ・記事カード: 日付 → サムネイル → タイトル（--sub背景）
   ・ホバー: opacity 0.6
============================================================ */
.index .index_new ul {
  padding: 0 3rem;
}

.index .index_new ul li.top_box {
  border: none;
  padding: 0;
}

.index .index_new ul li.top_box:not(:last-child) {
  margin: 0 0 2rem;
}

/* カード全体をリンク */
.index .index_new ul li.top_box > a {
  display: block;
  color: var(--text-main);
}

.index .index_new ul li.top_box > a:hover {
  opacity: 0.6;
}

/* 日付（16px accent） */
.index .index_new ul li.top_box .top_box_date {
  display: block;
  font-size: 1.6rem;
  color: var(--accent);
  padding: 0 1rem 1rem;
  line-height: 1.5;
}

/* サムネイル（152px固定高） */
.index .index_new ul li.top_box .img_wrap {
  height: 15.2rem;
  margin: 0;
}

/* タイトル（18px, --sub背景, 1行省略） */
.index .index_new ul li.top_box .top_box_title {
  background: var(--sub);
  padding: 2rem 1rem;
  font-size: 1.8rem;
  font-weight: normal;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

/* ============================================================
   CATEGORY
============================================================ */
.category > .box_wrap {
  padding: 0 3rem;
}

/* カテゴリトップ */
.category .category_top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 4rem;
}

/* カテゴリヘッド：アイコン＋タイトル */
.category .category_head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.category .category_head_icon {
  flex-shrink: 0;
  line-height: 0;
}

.category .category_head_icon img {
  width: 5.3rem;
  height: 5.6rem;
  display: block;
}

.category .category_head h2 {
  flex: 1;
  font-size: 2rem;
  font-weight: normal;
  color: var(--accent);
  line-height: 1.5;
}

/* 説明テキスト */
.category .category_top > p {
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
}

/* サムネイル（250px固定高） */
.category .category_top .img_wrap {
  height: 25rem;
}

/* 記事一覧 */
.category .category_post {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.category .category_box {
  display: flex;
  flex-direction: column;
}

/* 記事ヘッド（デフォルト: --sub 背景） */
.category .category_box_head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: var(--sub);
  cursor: pointer;
}

/* ホバー: --accent 背景 */
.category .category_box_head:hover {
  background: var(--accent);
  opacity: 1;
}

.category .category_box_head:hover h3 {
  color: var(--base);
}

/* アローアイコン：mask-image で fill を CSS 変数制御 */
.category .category_box_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
}

.category .category_box_icon img {
  display: none;
}

.category .category_box_icon::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--main);
  -webkit-mask-image: url(images/icon_arrow.svg);
  mask-image: url(images/icon_arrow.svg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ホバー時：白 */
.category .category_box_head:hover .category_box_icon::before {
  background-color: var(--base);
}

/* 記事タイトル */
.category .category_box_head h3 {
  flex: 1;
  font-size: 1.8rem;
  font-weight: normal;
  line-height: 1.5;
}

.category .category_box_head h3 {
  color: var(--text-main);
}


/* 本文テキスト（accent色） */
.category .category_box > p {
  padding: 1rem;
  font-size: 1.6rem;
  color: var(--accent);
  line-height: 1.5;
}

/* ============================================================
   DETAIL
   ・Figma: sub背景, py:60
   ・detail_head: flex-col, gap:20, 下に6remマージン
   ・h2: 20px bold accent center
   ・img_wrap: height:250
   ・前文p: 16px text-main
   ・h3: 18px normal accent center, border-bottom accent, pb:20, px:10
   ・detail_post p: 16px text-main, padding:10
   ・detail_box間: 4remマージン（p+h3 / ul+h3）
============================================================ */
.detail {
  background: var(--sub);
  padding: 6rem 0;
}

.detail > .box_wrap {
  padding: 0 3rem;
}

.detail .box_wrap .detail_head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 6rem;
}

.detail .box_wrap .detail_head h2 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  line-height: 1.5;
}

.detail .box_wrap .detail_head .img_wrap {
  height: 25rem;
}

.detail .box_wrap .detail_head > p {
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
}

.detail .box_wrap .detail_post h3 {
  font-size: 1.8rem;
  font-weight: normal;
  color: var(--accent);
  text-align: center;
  line-height: 1.5;
  border-bottom: 0.1rem solid var(--accent);
  padding: 0 1rem 2rem;
}

.detail .box_wrap .detail_post p + h3,
.detail .box_wrap .detail_post ul + h3,
.detail .box_wrap .detail_post blockquote + h3 {
  margin-top: 4rem;
}

.detail .box_wrap .detail_post p {
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
  padding: 1rem;
}

.detail a ,
.link_item{
  color: #ff9923;
  font-weight: bold;
}

blockquote {
  border-left: 0.4rem solid var(--accent);
  background: var(--sub);
  padding: 1.6rem 2rem;
  margin: 2rem 0;
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
}

.detail .box_wrap .detail_post blockquote p {
  padding: 0;
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 0.8rem;
  font-size: 1.6rem;
  color: var(--text-small);
  font-style: normal;
}

/* h3直後の引用: h3のpadding-bottomと合わせて詰めすぎないよう上マージンを確保 */
.detail .box_wrap .detail_post h3 + blockquote {
  margin-top: 2rem;
}

/* リンク直後・直前の引用 */
.detail .box_wrap .detail_post .link_item + blockquote,
.detail .box_wrap .detail_post blockquote + .link_item {
  margin-top: 2rem;
}

.link_item {
  margin-block: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.link_item img {
  width: revert-layer;
  max-width: 100%;
}

/* 画像バナーとテキストリンクが隣接する場合は余白なし */
.link_item + .link_item {
  margin-block-start: 0;
}

.link_item:has(+ .link_item) {
  margin-block-end: 0;
}

/* ============================================================
   RECOMMEND
   ・セクションタイトル: .section_title 共通クラスを使用
   ・カード: サムネイル（152px）→ タイトル（18px accent）→ テキスト
============================================================ */
.recommend {
  margin-bottom: 6rem;
}

.recommend .box_wrap > ul {
  padding: 0 3rem;
}

.recommend .box_wrap ul li:not(:last-child) {
  margin: 0 0 2rem;
}

/* サムネイル（152px固定高） */
.recommend .box_wrap ul li .img_wrap {
  height: 15.2rem;
  margin: 0 0 1rem;
}

/* タイトル（18px accent, font-normal） */
.recommend .box_wrap ul li strong {
  display: block;
  font-weight: normal;
  margin-bottom: 0.5rem;
}

.recommend .box_wrap ul li strong a {
  display: block;
  font-size: 1.8rem;
  color: var(--accent);
  font-weight: normal;
  margin: 0;
}

/* 本文テキスト */
.recommend .box_wrap ul li p {
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
}

/* ============================================================
   FOOTER
   ・page_top: accent背景ボタン（右寄せ）
   ・fnav: カテゴリ18px + サブ16px（・bullet）
   ・footer_logo: header同様の枠付きロゴ
   ・copyright: 右寄せ, text-small
============================================================ */

/* TOPへ戻るボタン */
footer .page_top {
  border-bottom: none;
  margin: 0;
  padding: 0 3rem 2rem;
  border-bottom: 0.1rem solid var(--main);
}

footer .page_top .box_wrap {
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

footer .page_top .box_wrap a {
  display: inline-block;
  background: var(--accent);
  border: 0.1rem solid var(--accent);
  border-radius: 0.3rem;
  padding: 1rem;
  color: var(--base);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: normal;
  width: auto;
  margin-right: 3rem;
}

footer .page_top .box_wrap a::before,
footer .page_top .box_wrap a::after {
  display: none;
}

footer .page_top .box_wrap a:hover {
  background: var(--base);
  color: var(--accent);
  opacity: 1;
}

/* フッターコンテンツエリア */
footer > .box_wrap {
  padding: 3rem 3rem 0;
}

/* フッターナビ */
footer > .box_wrap .fnav {
  margin: 0 0 2rem;
}

footer > .box_wrap .fnav > div > ul {
  width: 40rem;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* カテゴリタイトル（18px accent） */
footer > .box_wrap .fnav > div > ul > li > a {
  display: block;
  font-size: 1.8rem;
  color: var(--accent);
  font-weight: normal;
  padding: 0;
  line-height: 1.5;
  margin-bottom: 1rem;
}

footer > .box_wrap .fnav > div > ul > li > a::before {
  display: none;
}

footer > .box_wrap .fnav > div > ul > li > a:hover,
footer > .box_wrap .fnav > div > ul > li > ul > li > a:hover,
footer > .box_wrap .fnav > div > ul > li > ul > li > a:hover::before {
  opacity: 1;
  color: #BEBEBE;
}

footer > .box_wrap .fnav > div > ul > li > ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* サブ記事（16px text-main + ・bullet） */
footer > .box_wrap .fnav > div > ul > li > ul > li > a {
  display: flex;
  align-items: flex-start;
  font-size: 1.6rem;
  color: var(--text-main);
  font-weight: normal;
  padding: 0;
  line-height: 1.5;
}

footer > .box_wrap .fnav > div > ul > li > ul > li > a::before {
  content: "・";
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1.5;
  flex-shrink: 0;
  width: 1.6rem;
  display: block;
  background: none;
  border-radius: 0;
  position: static;
  height: auto;
  top: auto;
  left: auto;
}

/* フッターロゴ（ヘッダーと同様の枠付き） */
footer > .box_wrap .footer_logo {
  margin: 0 0 2rem;
}

footer > .box_wrap .footer_logo a img {
  width: auto;
  height: auto;
}

/* About me */
footer > .box_wrap .footer_about {
  width: 40rem;
  max-width: 100%;
  background: url(images/icon_footer.svg) no-repeat left top;
  background-size: 3.6rem 3rem;
  padding: 4rem 0 0;
  margin: 0 0 2rem;
}

footer > .box_wrap .footer_about span {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

footer > .box_wrap .footer_about a {
  display: inline;
  color: var(--text-main);
  font-weight: bold;
}

/* コピーライト（右寄せ, text-small） */
footer > .box_wrap .copyright {
  padding: 1rem 0;
}

footer > .box_wrap .copyright small {
  display: block;
  text-align: right;
  font-size: 1.6rem;
  font-weight: normal;
  color: var(--text-small);
}

/* ============================================================
   パンくずリスト
============================================================ */
.breadcrumb {
  padding: 3rem;
}

.breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.breadcrumb ul li {
  font-size: 1.6rem;
  color: var(--text-main);
  line-height: 1.5;
  padding-right: 5px;
  display: inline-block;
}

.breadcrumb ul li a {
  color: var(--accent);
}

.breadcrumb ul li span {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.4rem;
}

.breadcrumb ul li a span {
  font-weight: bold;
}

.breadcrumb ul li:first-child span img {
  width: 1.6rem;
  height: 1.6rem;
  flex-shrink: 0;
}

/* ============================================================
   SP（max-width: 767px）
============================================================ */
@media (max-width: 767px) {

  header .header_mv {
    gap: 2.4rem;
  }
  
  header .header_mv .header_wrap {
  flex-direction: column; 
  gap: 1.8rem;
  padding: 0;
  }

  header .header_mv {
    height: 41rem;
  }

  header .box_wrap {
    padding: 0;
  }
	
  .section_title_deco {
    max-width: 90%;
  }

  .box_wrap {
    padding: 0 1.6rem;
  }

  .category > .box_wrap,
  .detail > .box_wrap {
    padding: 0 1.6rem;
  }

  footer > .box_wrap {
    padding: 3rem 1.6rem 0;
  }

  .index .index_new ul,
  .recommend .box_wrap > ul {
    padding: 0;
  }
}