/*
Theme Name: MGFF Theme
Author: BRIGHT inc.
Description: 公益財団法人 宮城県水産振興協会 オリジナルテーマ
Version: 1.0
*/


:root {
  --color-brand-blue: #00a7e2;
  --color-brand-blue-dark: #0084b5;
  --color-accent-green: #0b4238;
  --color-error: #e2554d; /* 必須マーク・フォームのエラーメッセージ */
  --background: #eaf6fc;
  --foreground: var(--color-brand-blue);
}

html {
  font-size: 10px;
  -webkit-text-size-adjust: none;
  font-feature-settings: "palt";
}
body {
  -webkit-font-smoothing: antialiased;
  background: #ffffff;
  color: var(--color-brand-blue);
  overflow-anchor: none;
}
blockquote, body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6,
input, li, ol, p, textarea, ul {
  margin: 0;
  padding: 0;
}
div, a, p, input, textarea, select {box-sizing: border-box;}
ul li {list-style: none;}
figure {margin: 0; position: relative;}
img {
  width: 100%;
  height: auto;
  user-drag: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
}
/* PC/SP画像切替用の<picture>はレイアウト上は無いものとして扱い、中のimgが従来どおり親要素基準で表示されるようにする(個別にdisplayを指定している箇所はそちらが優先) */
picture {display: contents;}
h1, h2, h3, h4, h5 {font-weight: normal; margin: 0;}
a {text-decoration: none; display: block; color: var(--color-brand-blue);}
a:focus, *:focus {outline: none;}
a:hover, a:hover p, input:hover, button:hover, .toggle:hover {cursor: pointer; transition: all ease .2s; outline: none;}
.pc a[href^="tel:"] {cursor: default; pointer-events: none;}
.none {display: none !important;}
button {background: none; border: none; padding: 0; margin: 0;}

.pc_br{display:block;}
.sp_br{display:none;}
.pc_disp{display:block;}
.sp_disp{display:none !important;}

.ja_p_b,.ja_t,.ja_t_s,.ja_p_l,.contact_submit .cmn_btn > button,.form_list dt,.form_list dd,.cmn_btn > a,.cmn_btn > span,
.post_content h1,.post_content h2,.post_content h3,strong {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.ja_t_l,.footer_tagline,.ja_p,.ja_p_s,.post_content p,.post_content ul li,.post_content ol li,
form input[type="text"],form textarea,.form_list dt,.form_list dd input,.form_list dd select,
.wpcf7-response-output,.wpcf7-not-valid-tip { /* CF7 のメッセージは指定が無いと iOS で明朝になる */
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.en_t_l, .en_t, .en_p, .en_p_s {
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.footer_tagline {font-size:clamp(3.1rem, 4.832vw, 6.6rem);}
.ja_t_l {font-size: clamp(2rem, 3.075vw, 4rem); line-height: 1.6;}
.home_mv__copy .ja_t_l {font-size: clamp(2rem, 3.075vw, 5.6rem);} /* TOP FVコピー：1300px超のデスクトップでも拡大を続ける（上限56px） */
#home_about .numbered_feature_list__num {font-size: clamp(4.88rem, 7.496vw, 10.24rem);} /* TOP 私たちについて：History／Mission は数字（en_t_l）の8割 */
.ja_t {font-size: clamp(1.9rem, 2.050vw, 2.8rem); line-height: 1.6;}
.ja_t_s,.post_content h2 {font-size: clamp(1.8rem, 1.757vw, 2.4rem); line-height: 2;}
.outline_links__card .ja_t_s {font-size: min(clamp(1.8rem, 1.757vw, 2.4rem), 9.3cqi);} /* 関連リンクのカード:最長行(水産技術総合センター・10文字)がカード幅に収まるよう上限をかける */
.title_cmn__label {font-size: clamp(1.8rem, 1.318vw, 2.1rem);}
.ja_p_l,.form_list dt,.post_content h3,.contact_submit .cmn_btn > button {font-size: clamp(1.6rem, 1.318vw, 1.8rem);line-height: 2;}
.ja_p,.form_list dt,.form_list dd,.form_list dd input,.form_list dd select,.form_list dd textarea,.ja_p_b,.cmn_btn > a,.cmn_btn > span,.post_content p,.post_content ul li,.post_content ol li,.wpcf7-response-output {font-size: clamp(1.4rem, 1.171vw, 1.6rem); line-height: 1.9;} /* フォーム送信後のメッセージ（.wpcf7-response-output）は .ja_p と同じ */
.ja_p_s,.menu_main__btns a,.menu_main__links a span,.post_content .wp-caption-text {font-size: clamp(1.2rem, 1.025vw, 1.4rem); line-height: 1.65;} /* キャプションは本文の小さい文字と同じ */
.wpcf7-not-valid-tip {font-size: clamp(1.2rem, 1.025vw, 1.4rem); line-height: 1.65;}
.en_t_l {font-size: clamp(6.1rem, 9.370vw, 12.8rem);}
.en_p {font-size: clamp(1.2rem, 1.025vw, 1.4rem);}
.en_p_s,.main_nav__sub li:not(.main_nav__sub_all) a span,.main_nav__sub li:not(.main_nav__sub_all)::before {font-size: clamp(1.1rem, 0.878vw, 1.2rem);} /* 「事業一覧」は他のメニュー項目と同じ ja_p のサイズ */
.menu_main__wordmark {font-size: clamp(0.9rem, 0.659vw, 1rem);}

.home_intro__main_txt p,
.home_intro__main_txt h1 {line-height: 2.4;}
.home_intro__main_txt p + p,
.home_intro__main_txt p + h1 {margin-top:2.4rem;}
#home_news .cmn_btn_list h3 {line-height:1.65;}

.ja_p,.ja_p_l,.contact_submit .cmn_btn > button,.ja_p_b,.cmn_btn > a,.cmn_btn > span,.ja_p_s,.ja_p_l,.form_list dt,.form_list dd,.en_p,.post_content p,.wpcf7-response-output {letter-spacing: 0.06em;}
.ja_t,.ja_t_s,.en_p_s,.ja_p_s,.post_content h2,.post_content h3 {letter-spacing: 0.08em;}
.ja_t_l,.footer_tagline {letter-spacing: 0.14em;}
.en_t_l {letter-spacing: 0.02em;}

.trans_center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.c_pic,.footer_page_navi__grid article a {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: 2rem;
}
.c_pic:before {
  display: block;
  content: '';
  width: 100%;
  height: 0;
  padding: 0 0 100%;
}
.c_pic img {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  object-fit: cover;
  transition-duration: .4s;
}
a .c_pic:before {
  padding: 0 0 66.666%;
}
/* カード内のカテゴリー（[data-cat-href]）に乗せている間は、カード側のホバー演出（写真の拡大・矢印の反転）を出さない */
a:hover:not(:has([data-cat-href]:hover)) .c_pic img {
  opacity: .8;
  transform: translate(-50%, -50%) scale(1.05);
  transition-duration: .7s;
  transition-timing-function: ease-in-out;
  cursor: pointer;
}

.cmn_pic_frame {
  border-radius: 70% 70% 20px 20px / 20% 20% 20px 20px;
  overflow: hidden;
}
.cmn_pic_frame.c_pic:before {
  padding: 0 0 min(60rem, 87svh); /* 画面高が低い端末(スマホ横向き)でも1画面に収める */
}
#footer .cmn_pic_frame.c_pic:before {
  padding: 0 0 40rem;
}

.cmn_pic_wide {
  position: relative;
  height: 60rem;
  border-radius: 2rem;
  overflow: hidden;
}
.cmn_pic_wide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.cmn_btn_wrap {
  display: flex;
  width: 100%;
}
.cmn_btn_wrap.end {
  justify-content: flex-end;
}
.cmn_btn_wrap.center {
  justify-content:center;
}
.cmn_btn {display: table;margin-top: 7.5rem;}
.feature_block .cmn_btn {margin-top: 4.5rem;}
.cmn_card_list .cmn_btn {margin-top: 0;}
.cmn_btn > a,.cmn_btn > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--color-brand-blue);
  border-radius: 1rem;
  padding: 1.8rem 1.8rem 1.8rem 2.4rem;
  min-width: 30rem;
  cursor: pointer;
  color: #fff;
}
.cmn_btn:hover > a,.cmn_btn:hover > span,
a:hover .cmn_btn > a,a:hover .cmn_btn > span {
  background: #ffffff;
  color: var(--color-brand-blue);
}
.cmn_btn:hover .cmn_arrow,a:hover:not(:has([data-cat-href]:hover)) .cmn_arrow {background:var(--color-brand-blue);}
.cmn_btn:hover .cmn_arrow::before,a:hover:not(:has([data-cat-href]:hover)) .cmn_arrow::before {background: #ffffff;}
.cmn_btn:hover .cmn_arrow::after,a:hover:not(:has([data-cat-href]:hover)) .cmn_arrow::after {border-color: #ffffff;}

.cmn_btn.wh a {border-color: #ffffff; color: #ffffff;}
.cmn_btn.wh:hover a {background: #ffffff; color: var(--color-brand-blue); border-color: var(--color-brand-blue);}
.cmn_btn.wh .cmn_arrow {background: rgba(255, 255, 255, 0.15);}
.cmn_btn.wh .cmn_arrow::before {background: #ffffff;}
.cmn_btn.wh .cmn_arrow::after {border-color: #ffffff;}
.cmn_btn.wh:hover .cmn_arrow {background: #e7ebf2;}
.cmn_btn.wh:hover .cmn_arrow::before {background: var(--color-brand-blue);}
.cmn_btn.wh:hover .cmn_arrow::after {border-color: var(--color-brand-blue);}

.cmn_arrow {
  position: relative;
  display: flex;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  width: 1rem;
  height: 1rem;
  padding: 1rem;
  border-radius: 0.6rem;
  background: #fff;
}
.cmn_arrow::before, .cmn_arrow::after {
  content: "";
  position: absolute;
  top: 50%;
}
.cmn_arrow::before {
  height: 1px;
  width: calc(100% - 2rem);
  transform: translateY(-50%);
  background: var(--color-brand-blue);
}
.cmn_arrow::after {
  right: 1.1rem;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--color-brand-blue);
  border-right: 1px solid var(--color-brand-blue);
  transform: translateY(-50%) rotate(45deg);
}
.cmn_arrow.wh {background: #ffffff;}
.cmn_arrow.wh::before {background: var(--color-brand-blue);}
.cmn_arrow.wh::after {border-color: var(--color-brand-blue);}

.cmn_arrow.-prev {transform: rotate(180deg);}

.txt_wh {color: #ffffff;}
/* 文中の語句強調(水色地に白文字)。見出しspan内で使う場合は親の点線下線を打ち消す */
.txt_mark {
  display: inline-block;
  background: var(--color-brand-blue);
  color: #ffffff;
  border-radius: .3rem;
  padding: .1em .5em;
  margin-right: .3em;
  line-height: 1.5;
}
.ja_t span.txt_mark {border-bottom: none; padding-bottom: .1em;}

.txt_center {text-align: center;}

.svg_defs {position: absolute;}

main {
  background: linear-gradient(180deg, #ffffff 0%, #d0e5f7 66%, #98c8ec 100%);
  position: relative;
  padding-bottom: 16rem;
}
#footer {
  background: linear-gradient(180deg, #98c8ec 0%, #00a7e2 100%);
  position: relative;
  margin-top: -1px; /* iOS Safari で main との境目が小数ピクセルの隙間になり、body の白が 1px の線に見えるのを防ぐ（1px 重ねる） */
}

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cmn_table__row {
  display: flex;
  gap: 2rem;
  padding: 2.4rem 0;
  border-bottom: dotted 1.5px var(--color-brand-blue);
}
.cmn_table__row:first-child {border-top: dotted 1.5px var(--color-brand-blue);}
.cmn_table__label {
  flex: 0 0 16rem;
}
.cmn_table__label.-wide {flex-basis: 24rem;}
.cmn_table__label span {display: block;}
.cmn_table__value p + p {margin-top: 0.4rem;}
.cmn_table__value p:has(+ .cmn_btn_wrap) {margin-bottom: 2.4rem;}
.cmn_table__value .cmn_btn {margin-top: 0;}
.cmn_table__maplink {
  display: inline;
}
/* hover下線・外部リンク矢印は共通仕様(.footer_main_nav付近で定義) */

.title_sec {
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  margin-bottom: 6rem;
}
.title_sec__en {line-height: 1;}
.title_sec__ja {line-height: 1.5;}

.title_cmn_set {
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}

.title_cmn {
  display: flex;
  align-items: center;
  gap: 2.3rem;
  margin-left: -9.5rem;
}
.title_cmn__icon {
  position: relative;
  width: 7.2rem;
  aspect-ratio: 72.16 / 28.17;
  flex: 0 0 auto;
  overflow: hidden;
  -webkit-clip-path: url(#seaClip);
  clip-path: url(#seaClip);
}
.title_cmn__icon video {
  position: absolute;
  top: 50%; left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  display: block;
}

.title_suisai {
  display: block;
  height: clamp(7.1rem, 10.981vw, 15rem);
  width: auto;
  max-width: 100%;
  aspect-ratio: var(--suisai-ratio, 4.4 / 1);
  background: url("img/common/watercolor.png") center/cover no-repeat;
  -webkit-mask-image: var(--suisai-mask);
  mask-image: var(--suisai-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  color: transparent;
  overflow: hidden;
  margin-left: -10px;
}

/* 文字送りアニメーション版(-split): 親のマスクを外し、
   文字ごとの帯(clip-path)を持つ子spanが同じマスク+水彩背景を分担表示する。
   表示アニメーションはcss/common.css、発火はjs/common.js titleSuisaiAnimationIO()参照 */
.title_suisai.-split {
  position: relative;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.title_suisai_char {
  position: absolute;
  inset: 0;
  background: url("img/common/watercolor.png") center/cover no-repeat;
  -webkit-mask-image: var(--suisai-mask);
  mask-image: var(--suisai-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
  clip-path: inset(0 calc(100% - var(--char-r, 100%)) 0 var(--char-l, 0%));
}

.title_video {
  display: block;
  width: 100%;
  max-width: 98rem;
  aspect-ratio: var(--video-ratio, 980 / 140);
}
.title_video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: var(--video-mask);
  mask-image: var(--video-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}

.ja_t span,.ja_p_l span,.menu .main_nav ul li a,.member_lead__ttl p span,#about_visit h3 span {
  border-bottom: dotted 1.5px var(--color-brand-blue);
  padding-bottom: .5rem;
}
#about_visit h3 span {border-bottom: dotted 1.5px #ffffff;}
.title_sec__ja span {border:none;padding-bottom: 0;}

.wrap {
  overflow-anchor: none;
  overflow-x: clip;
  position: relative;
  height: 100%;
  width: 100%;
}
.sec_wrap {
  margin-top: 12rem;
  position: relative;
}
#footer {
  padding-top: 30rem;
}
.cnt_l {
  position: relative;
  width: calc(100% - 10rem);
  margin: 0 auto;
}
#single_head .cnt_l {
  max-width:2200px;
}
.cnt_m {
  position: relative;
  width: calc(100% - 28rem);
  max-width: 1600px;
  margin: 0 auto;
}
.cnt_s {
  position: relative;
  width: 88%;
  max-width: 880px;
  margin: 0 auto;
}
.grid_list_2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.5rem 9rem;
}
.grid_list_3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3rem;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
.header_inner {
  position: relative;
  display: flex;
  align-items: start;
  justify-content: space-between;
}
.header_title {padding:2rem 0 0 2rem;}
.header_title img {width: 14vw;max-width: 240px;min-width: 180px;}

.menu_btn_wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
}
.menu_btn_wrap,.menu {
  background: #ffffff;
  border-radius: 0 0 0 1.5rem;
}
.menu_btn_wrap .menu_icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu_btn_wrap .menu_icon span {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  background: var(--color-brand-blue);
}
.menu_btn_wrap .menu_icon span:before,
.menu_btn_wrap .menu_icon span:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: var(--color-brand-blue);
  transition: all .25s ease;
}
.menu_btn_wrap .menu_icon span:before {top: -0.5rem;}
.menu_btn_wrap .menu_icon span:after {top: 0.5rem;}
.menu_on .menu_btn_wrap .menu_icon span {background: transparent;}
.menu_on .menu_btn_wrap .menu_icon span:before {top: 0; transform: rotate(45deg);}
.menu_on .menu_btn_wrap .menu_icon span:after {top: 0; transform: rotate(-45deg);}

.menu_off .menu_btn_wrap:hover {
  background: var(--color-brand-blue);
  color: #ffffff;
}
.menu_off .menu_btn_wrap:hover .menu_icon span,
.menu_off .menu_btn_wrap:hover .menu_icon span:before,
.menu_off .menu_btn_wrap:hover .menu_icon span:after {background: #ffffff;}

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--color-brand-blue);
  z-index: 99999;
}
.loading_inner {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 海岸線シルエット(白・共通素材): 左端基準で画面高さいっぱいに表示 */
.loading_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
/* ロゴタイトル(PC=横書き版/SP=縦書き版を出し分け) */
.loading_ttl {
  --loading-ttl-w: clamp(40rem, 44vw, 56rem);
  position: absolute;
  top: 52%;
  /* 基本は画面中央寄り(中心56%)。地図の大きさは画面の高さで決まるため、縦に長い画面(iPad横など)でも
     地図から一定以上離す(65vh=幅1660×高1000pxでの見え方が基準)。右端からは4rem以上あける */
  left: min(max(calc(56% - var(--loading-ttl-w) / 2), 65vh), calc(100% - var(--loading-ttl-w) - 4rem));
  transform: translate(0, -50%);
  width: var(--loading-ttl-w);
  height: auto;
}
.loading_ttl.-sp {display: none;}
/* 帯スライス(10本): title_suisai風の跳ね上げ表示用。基準imgでサイズを確保し、帯コピーがclip-pathで1/10ずつ分担(動きはcss/common.css参照) */
.loading_ttl__base {
  display: block;
  visibility: hidden;
}
.loading_ttl__band {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.loading_ttl__band img {display: block;}
.loading_ttl__band:nth-of-type(1) {clip-path: inset(0 90% 0 0);}
.loading_ttl__band:nth-of-type(2) {clip-path: inset(0 80% 0 10%);}
.loading_ttl__band:nth-of-type(3) {clip-path: inset(0 70% 0 20%);}
.loading_ttl__band:nth-of-type(4) {clip-path: inset(0 60% 0 30%);}
.loading_ttl__band:nth-of-type(5) {clip-path: inset(0 50% 0 40%);}
.loading_ttl__band:nth-of-type(6) {clip-path: inset(0 40% 0 50%);}
.loading_ttl__band:nth-of-type(7) {clip-path: inset(0 30% 0 60%);}
.loading_ttl__band:nth-of-type(8) {clip-path: inset(0 20% 0 70%);}
.loading_ttl__band:nth-of-type(9) {clip-path: inset(0 10% 0 80%);}
.loading_ttl__band:nth-of-type(10) {clip-path: inset(0 0 0 90%);}

.menu {
  opacity: 0;
  z-index: 9999;
  position: fixed;
  top: 0; right: 0;
  width: 20vw;
  min-width: 300px;
  height: auto;
  /* 画面高を超える場合(スマホ横向き・サブメニュー展開時)はメニュー内をスクロール */
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu.no-anim {
  animation: none !important;
  opacity: 1;
}
.menu_inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.menu .bg_overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.menu_head_btn {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.menu_head_btn .menu_icon {background: #ffffff;}
.menu_head_btn .menu_icon span,
.menu_head_btn .menu_icon span:before,
.menu_head_btn .menu_icon span:after {background: var(--color-brand-blue);}
.menu_head_btn .menu_icon span:before {top: 0; transform: rotate(45deg);}
.menu_head_btn .menu_icon span:after {top: 0; transform: rotate(-45deg);}

.menu_main {padding: 5rem 2.4rem 1.6rem;}
.menu_main__logo {display: none;} /* SP（599px 以下）だけ表示。位置・サイズは responsive.css でヘッダーのロゴに合わせる */
.menu .main_nav ul {display: flex; flex-direction: column;}
.menu .main_nav ul li {border-top: 1px solid rgba(255, 255, 255, 0.3);}
.menu .main_nav ul li:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
.menu .main_nav ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0 1rem;
}
.main_nav__row {
  display: flex;
  align-items: center;
  border-bottom: dotted 1.5px var(--color-brand-blue);
}
.main_nav__row a {flex: 1;}
.menu .main_nav li.has_sub .main_nav__row > a {border-bottom: none; padding: 1.25rem 0 1rem;}
.main_nav__sub_toggle {
  position: relative;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  border-radius: 0.6rem;
  transition: background .2s;
}
.main_nav__row:hover .main_nav__sub_toggle {background: var(--color-brand-blue);}
.main_nav__row:hover .main_nav__sub_toggle span {background: #ffffff;}
.main_nav__sub_toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.2rem;
  height: 1px;
  background: var(--color-brand-blue);
  transform: translate(-50%, -50%);
  transition: transform .4s;
}
.main_nav__sub_toggle span:nth-child(2) {transform: translate(-50%, -50%) rotate(90deg);}
.main_nav li.is-open .main_nav__sub_toggle span:nth-child(1) {transform: translate(-50%, -50%) rotate(-45deg);}
.main_nav li.is-open .main_nav__sub_toggle span:nth-child(2) {transform: translate(-50%, -50%) rotate(45deg);}
.menu .main_nav ul.main_nav__sub {display: none; padding: 0 0 1.2rem 1.5rem;}
.menu .main_nav .main_nav__sub li {border: none;}
.menu .main_nav .main_nav__sub li a {justify-content: flex-start; padding: 0.6rem 0; border-bottom: none;}
/* 事業ページ（service01〜05）の項目は左端に「・」を付けてリスト表示。「・」はリンクの外（li）に置き、ホバー下線を文字だけにする */
.menu .main_nav .main_nav__sub li:not(.main_nav__sub_all) {display: flex; align-items: center;gap: .5rem;}
.menu .main_nav .main_nav__sub li:not(.main_nav__sub_all)::before {content: '・'; color: var(--color-brand-blue);}
/* hover下線はフッターnavと共通仕様(.footer_main_nav付近で定義) */
/* 開いている間は「事業紹介」直下の点線を消し、サブリスト最下部(liの下端)に移す */
.main_nav li.is-open .main_nav__row {border-bottom-color: transparent;}
.menu .main_nav ul > li.has_sub.is-open {border-bottom: dotted 1.5px var(--color-brand-blue);}
.menu_main__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.menu_main__btns a {
  background: var(--color-brand-blue);
  border:1px solid var(--color-brand-blue);
  color:#ffffff;
  padding: 1.6rem 0 1.8rem;
  border-radius: .75rem;
  line-height: 1;
  text-align:center;
}
.menu_main__btns a:hover {
  background: #ffffff;
  color:var(--color-brand-blue);
}
/* ボタン下の小リンク行(公開情報/賛助会員) */
.menu_main__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.menu_main__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0;
}
.menu_main__wordmark {
  margin-top: 2rem;
  text-transform: uppercase;
}

.footer {
  background: var(--color-brand-blue);
  padding: 6rem 0 3rem;
  position: relative;
}

.footer_main {
  background: var(--color-brand-blue);
  padding: 6rem 0 3rem;
  position: relative;
}
.footer_main_inner {
  display: flex;
  justify-content: space-between;
  max-width: 2200px;
  padding: 15rem 0 0;
  background-image: url(img/common/bg_footer_map.svg);
  background-repeat: no-repeat;
  /* 左端からの位置を枠幅に比例(1376px時の150px=枠幅1276pxの11.76%を基準)。地図の大きさは枠の高さに合わせたまま */
  background-position: left calc(min(100vw - 10rem, 2200px) * 0.1176) center;
  background-size: contain;
}

.footer_info_block h2 {margin-bottom: 1.5rem;}
.footer_info_block p + p {margin-top: 3rem;}

.footer_right_block {
  display: flex;
  flex-direction: column;
}
.footer_main_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 3rem;
  justify-content: end;
}
.footer_main_nav a {color: #ffffff;}
/* フッターサブナビ(2行目: 公開情報・賛助会員・みやぎ漁師カレッジ) */
.footer_sub_nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.4rem;
  justify-content: end;
  margin-top: 2rem;
}
.footer_sub_nav a {color: #ffffff; padding: .5rem 0; margin: -.5rem 0;} /* タップ範囲を上下に広げる(見た目は変えない) */
/* hover下線の共通仕様: テキストから0.5rem離した1px線を、少し遅れてフェード表示(フッターnav・メニューサブナビ・団体概要のGoogle Mapリンク・パンくず・TOP速報バナーの記事タイトル) */
.footer_main_nav a,
.footer_sub_nav a,
.menu .main_nav .main_nav__sub li a,
.cmn_table__maplink,
.breadcrumb a,
.home_mv__news .ja_p_s {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.5rem;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.footer_main_nav a:hover,
.footer_sub_nav a:hover,
.menu .main_nav .main_nav__sub li a:hover,
.cmn_table__maplink:hover,
.breadcrumb a:hover,
.home_mv__news:hover .ja_p_s {
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.3s ease 0.15s;
}
/* TOP速報バナー：閉じるボタンに乗せているときは記事タイトルに下線を出さない（リンクではなく閉じる操作のため） */
.home_mv__news:has(.home_mv__news_close:hover) .ja_p_s {text-decoration-color: transparent;}
.footer_sub_nav__ext::after,
.cmn_table__maplink::after {
  content: '\2197';
  margin-left: 0.4em;
  display: inline-block; /* atomic inline化で親のhover下線を矢印に及ぼさない */
}
.footer_tagline {text-align: left; margin: 8rem 0 18rem;color: #fff;}
.footer_tagline p {width: fit-content; margin-left: auto; margin-right:-10px;}
.footer_tagline_char {display: inline-block;}
.footer_copy {text-align: right;padding-bottom: 4rem;margin-right: 0;}
.footer_copy p {color: #ffffff;}

.footer_page_navi__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  margin-top: 6rem;
}
.footer_page_navi__grid article {position: relative;aspect-ratio: 3 / 1.8;}
.footer_page_navi__grid article a {position: relative;height: 100%;display: flex;padding: 4.5rem;align-items: flex-end;}
.footer_page_navi__grid article a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  transition: transform .7s ease-in-out;
}
.footer_page_navi__grid article a:hover::before {transform: scale(1.08);}
.footer_page_navi__grid article:nth-child(1) a::before {background-image:url("img/common/nav_service.webp");}
.footer_page_navi__grid article:nth-child(2) a::before {background-image:url("img/common/nav_contact.webp");}
.footer_page_navi__body {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  align-items: flex-start;
}
.footer_page_navi__body .cmn_arrow {margin-top: 1rem;}

#home_mv {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 60rem;
  overflow: hidden;
}
.home_mv_inner {
  height: 87svh;
  margin-top:8svh;
}
.home_mv__pic {
  position: absolute;
  inset: 0;
  /* Firefox：角丸で切り抜いた枠の中で画像を transform で動かすと GPU 合成に乗らずガクつくため、枠と画像を合成レイヤーに乗せる */
  transform: translateZ(0);
  isolation: isolate;
}
/* MVスライド: Swiper不使用の自前クロスフェード(切替・ズームの動きはcss/common.css、制御はjs/common.js homeMvSlideSetting) */
.home_mv__pic .home_mv__slider {
  position: relative;
  height: 100%;
}
.home_mv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity; /* フェード（opa_on）を合成レイヤーで */
}
.home_mv__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}
.home_mv__slide.is-on {z-index: 2;}
.home_mv__slide.is-off {opacity: 1; z-index: 1;}
.home_mv__pic_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  will-change: transform; /* ズーム（home_mv_zoom）を合成レイヤーで。Firefox のガクつき対策 */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.home_mv__copy {
  position: absolute;
  left: 6rem;
  bottom: 6rem;
  z-index: 1;
}
.home_mv__copy p {color: #ffffff;}
/* 文字送り用: 行ごとにブロック化し、1文字ずつフワッと表示(マスクなし。動きはcss/common.css参照) */
.home_mv__copy_line {display: block;}
.home_mv__copy_char {display: inline-block;}

.home_mv__news {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  max-width: 44rem;
  padding: 2rem 2rem 2rem 9rem;
  transition: opacity 0.4s ease-in-out;
}
.home_mv__news.is-footer-hide {
  opacity: 0;
  pointer-events: none;
}
.home_mv__news::after {
  content: '';
  position: absolute;
  left: 9rem;
  right: 0;
  top: 0;
  height: 100%;
  background-color: var(--color-brand-blue);
  z-index: -1;
}
.home_mv__news::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 9.1rem;
  height: 100%;
  background-color: var(--color-brand-blue);
  -webkit-mask-image: url(img/top/bg_mv_news.svg);
  mask-image: url(img/top/bg_mv_news.svg);
  mask-mode: alpha;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-position: right center;
  mask-position: right center;
  z-index: -1;
}
.home_mv__news_thumb {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  overflow: hidden;
}
.home_mv__news_thumb img {width: 100%; height: 100%; object-fit: cover;}
.home_mv__news_body p {color: #ffffff;}
.home_mv__news_body .ja_p_s {
  max-width: 18em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.home_mv__news_label {margin-bottom: 0.6rem;}
.home_mv__news_close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  background: #fff;
  border: 1px solid #fff; /* ホバー時の白い枠線と大きさを揃えるため通常時も白で引いておく */
  box-sizing: border-box; /* 枠線を足しても見た目の大きさは 20px のまま */
  border-radius: 100%;
  width: 2rem;
  height: 2rem;
  transition: background-color .3s;
}
.home_mv__news_close:hover {background: transparent;}
.home_mv__news_close:hover span {background-color: #ffffff;}
.home_mv__news_close::before {content: ''; position: absolute; inset: -1rem;} /* タップ範囲を40x40pxに広げる(見た目は20pxのまま) */
.home_mv__news_close span {
  position: absolute;
  top: 50%; left: 50%;
  width: 1rem;
  height: 1px;
  background-color: var(--color-brand-blue);
  transform: translate(-50%, -50%) rotate(45deg);
  transition: background-color .3s;
}
.home_mv__news_close span:nth-of-type(2) {transform: translate(-50%, -50%) rotate(-45deg);}

.home_intro__catch {
  padding: 16rem 0 8rem;
}
.title_video {
  margin: auto;
}
.home_intro__main {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.home_intro__main_pic {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.home_intro__main_pic img {width: 100%; height: 100%; object-fit: cover;}
.home_intro__main_txt {
  position: relative;
  z-index: 1;
  background: url(img/top/intro_main_bg.webp) no-repeat left 3rem top;
  background-size: contain;
  padding: 14rem 0 16rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.cmn_step_list article:nth-child(2),.cmn_step_list article:nth-child(4) {
  margin-top: 9rem;
}
.cmn_step_list .c_pic,
.numbered_feature_list__frame {
  margin-bottom: 3rem;
}
.cmn_step_list .numbered_feature_list__frame .c_pic {margin-bottom: 0;} /* TOP #home_about：frame と c_pic の余白が二重にならないように */
h3 + p {
  margin-top: 2.4rem;
}
.cmn_card_list h3 + p  {
  margin-top: 1.6rem;
}

.home_bg_sozai, .footer_sozai {position:absolute;}
.home_bg_sozai .inner, .footer_sozai .inner {position: absolute; inset: 0;}
.home_bg_sozai .sea_bg,
.footer_sozai .sea_bg {
  position: absolute;
  animation: sozai_balloon_float 7s ease-in-out infinite alternate;
}
@keyframes sozai_balloon_float {
  0%   {transform: translate(0, 0);}
  25%  {transform: translate(10px, 6px);}
  50%  {transform: translate(18px, 12px);}
  75%  {transform: translate(6px, 4px);}
  100% {transform: translate(12px, 10px);}
}
.home_bg_sozai .inner img, .footer_sozai .inner img {position: absolute;}

.sozai_c01      {width: 120px; height: auto;}
.sozai_a01      {width: 80px;  height: auto;}
.sozai_a02      {width: 53px;  height: auto;}
.sozai_a03      {width: 44px;  height: auto;}
.sozai_b01      {width: 60px;  height: auto;}
.sozai_b02      {width: 56px;  height: auto;}
.sozai_footer01 {width: 65px;  height: auto;}
.sozai_footer02 {width: 65px;  height: auto;}

.sozai_sea01 {width: 316px; aspect-ratio: 761 / 267; background: url(img/common/sozai/bg_sea01.webp) no-repeat center / contain;}
.sozai_sea02 {width: 321px; aspect-ratio: 679 / 356; background: url(img/common/sozai/bg_sea02.webp) no-repeat center / contain;}
.sozai_sea03 {width: 327px; aspect-ratio: 768 / 329; background: url(img/common/sozai/bg_sea03.webp) no-repeat center / contain;}
.sozai_sea04 {width: 94px;  aspect-ratio: 230 / 257; background: url(img/common/sozai/bg_sea04.webp) no-repeat center / contain;}

.home_bg_sozai.type_a {
  top: 0; right: 0;
  width: 36.71%;
  aspect-ratio: 501.43 / 205.22;
}
.home_bg_sozai.type_a .sea_bg {
  top: 0%; left: 31.41%;
}
.home_bg_sozai.type_a .inner img {
  transform-origin: center bottom;
  animation: sozai_sway 4.2s ease-in-out infinite;
}
.home_bg_sozai.type_a .inner img:nth-child(1) {top: 46.12%; left: 16.78%; animation-delay: -0.6s;}
.home_bg_sozai.type_a .inner img:nth-child(2) {top: 79.15%; left: 47.83%; animation-duration: 3.6s; animation-delay: -2.1s;}
.home_bg_sozai.type_a .inner img:nth-child(3) {top: 85.92%; left: 94.24%; animation-duration: 4.8s; animation-delay: -3.4s;}

.home_bg_sozai.type_b {
  top: 88%; left: 20%;
  width: 23.5%;
  aspect-ratio: 307.39 / 184.48;
}
.home_bg_sozai.type_b .sea_bg {
  top: 0%; left: 0%;
}
.home_bg_sozai.type_b .inner img:nth-child(1) {top: 65%; left: 61.53%; animation: sozai_katakata_1 4s cubic-bezier(.175,.885,.32,1.275) infinite;}
.home_bg_sozai.type_b .inner img:nth-child(2) {top: 88.90%; left: 82.94%; animation: sozai_katakata_2 4s cubic-bezier(.175,.885,.32,1.275) infinite .8s;}

.home_bg_sozai.type_c {
  top: 5%; right: 5%;
  width: 23.93%;
  aspect-ratio: 326.87 / 140.03;
}
.home_bg_sozai.type_c .sea_bg {
  top: 0%; left: 0%;
}
.home_bg_sozai.type_c .inner img:nth-child(1) {
  top: 80%; left: 88%;
  transform-origin: center bottom;
  animation: sozai_sway 4.2s ease-in-out infinite;
}

.home_bg_sozai.type_d {
  top: 90%; left: 28.26%;
  width: 17.98%;
  aspect-ratio: 245.50 / 282.4725;
  max-width: 180px;
}
.home_bg_sozai.type_d .sea_circle {
  position: absolute;
  top: 0%; left: 0%;
  width: 80.41%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.home_bg_sozai.type_d .sea_circle video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.home_bg_sozai.type_d .sea_bg {
  top: 62.80%; left: 61.72%;
}

.footer_sozai {
  top: 0; left: 0; right: 0;
  width: 96%;
  max-width: 2200px;
  margin: 0 auto;
  height: 25.6rem; /* PC幅は画面幅1600px時の高さで固定(幅に比例させると広い画面で魚が下がりバナーに重なる)。1024px以下はresponsive.cssで幅比例に戻す */
}
.footer_sozai .sea_bg1 {
  top: 8.5%; left: 5%;
}
.footer_sozai .sea_bg2 {
  top: 0%; left: 72%;
}
.footer_sozai .sea_bg3 {
  top: -5%; left: 37%;
}
.footer_sozai .inner img {
  position: absolute;
  transform-origin: center bottom;
}

.footer_sozai .inner img:nth-child(1) {
  top: 80%; left: 5%;
  animation: sozai_sway_flip 4.2s ease-in-out infinite;
}

.footer_sozai .inner img:nth-child(2) {
  top: 86%; left: 49%;
  animation: sozai_sway 4.6s ease-in-out infinite -1.2s;
}

.footer_sozai .inner img:nth-child(3) {
  top: 50%; left: 35%;
  transform-origin: center center;
  animation: sozai_katakata_2 4s cubic-bezier(.175,.885,.32,1.275) infinite .8s;
}
.footer_sozai .inner img:nth-child(4) {
  top: 75%; left: 86%;
  transform-origin: center center;
  animation: sozai_katakata_1 4s cubic-bezier(.175,.885,.32,1.275) infinite;
}
.footer_sozai .inner img:nth-child(5) {
  top: 75%; left: 62%;
  animation: sozai_sway 4.0s ease-in-out infinite -0.8s;
}
.footer_sozai .inner img:nth-child(6) {
  top: 50%; left: 69%;
  animation: sozai_sway 4.4s ease-in-out infinite -2.7s;
}

.footer_sozai .inner img:nth-child(7) {
  top: 75%; left: 25%;
  transform-origin: center center;
  animation: sozai_katakata_1 4s cubic-bezier(.175,.885,.32,1.275) infinite;
}
.footer_sozai .inner img:nth-child(8) {
  top: 55%; left: 97.45%;
  transform-origin: center center;
  animation: sozai_katakata_2 4s cubic-bezier(.175,.885,.32,1.275) infinite .8s;
}

@keyframes sozai_katakata_1 {
  0%, 25% {transform: translate(-50%, -50%) translateX(0)   rotate(0deg);}
  62.5%   {transform: translate(-50%, -50%) translateX(4px) rotate(-10deg);}
  100%    {transform: translate(-50%, -50%) translateX(0)   rotate(0deg);}
}
@keyframes sozai_katakata_2 {
  0%, 25% {transform: translate(-50%, -50%) translateX(0)    rotate(0deg);}
  62.5%   {transform: translate(-50%, -50%) translateX(-4px) rotate(10deg);}
  100%    {transform: translate(-50%, -50%) translateX(0)    rotate(0deg);}
}
@keyframes sozai_sway {
  0%, 100% {transform: translate(-50%, -50%) rotate(0deg) translateY(0) translateX(0);}
  25%      {transform: translate(-50%, -50%) rotate(-9deg) translateY(-9px) translateX(-4px);}
  50%      {transform: translate(-50%, -50%) rotate(0deg) translateY(-2px) translateX(0);}
  75%      {transform: translate(-50%, -50%) rotate(9deg) translateY(-7px) translateX(4px);}
}

@keyframes sozai_sway_flip {
  0%, 100% {transform: translate(-50%, -50%) scaleX(-1) rotate(0deg) translateY(0) translateX(0);}
  25%      {transform: translate(-50%, -50%) scaleX(-1) rotate(-9deg) translateY(-9px) translateX(-4px);}
  50%      {transform: translate(-50%, -50%) scaleX(-1) rotate(0deg) translateY(-2px) translateX(0);}
  75%      {transform: translate(-50%, -50%) scaleX(-1) rotate(9deg) translateY(-7px) translateX(4px);}
}


.report_list article a .c_pic {
  margin-bottom: 2rem;
}
.report_list article h3 {
  margin-bottom:1.8rem;
}
.cmn_list_date {color: var(--color-brand-blue);position: relative;padding-left: 2.7rem;margin-bottom: 0.25rem;}
.cmn_list_date:before {position:absolute;left:.3rem;top:50%;transform: translate(0, -50%);content:"";width:1.25rem;height:1.25rem;border-radius:.25rem;background:var(--color-brand-blue);}
.cat_cmn_wrap {
  display: inline-block;
  border: 1px solid var(--color-brand-blue);
  border-radius: 2rem;
  padding: .3rem .8rem .5rem;
  line-height: 1;
}

.cmn_btn_list {display: flex; flex-direction: column; border-bottom: 1px solid var(--color-brand-blue);}
.cmn_btn_list article {border-top: 1px solid var(--color-brand-blue);}
#home_news .cmn_btn_list {border-bottom-color: #ffffff;}
#home_news .cmn_btn_list article {border-top-color: #ffffff;}
#home_news .cmn_btn_list h3,#home_news .cmn_btn_list p {color:#ffffff;}
#home_news .cmn_list_date:before {background:#ffffff;}
#home_news .cat_cmn_wrap {border-color:#ffffff;}
#home_news .cat_cmn_wrap[data-cat-href]:hover {border-color: var(--color-brand-blue);} /* ホバー時は枠線も水色（上の白指定の方が詳細度が高く、共通のホバー指定では変わらないため） */

.cmn_btn_list__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 3rem;
}
.cmn_btn_list__row {
  align-items: center;
  display: grid;
  grid-template-columns: 26rem 1fr;
  gap: 4.5rem;
}
.cmn_btn_list__meta {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-shrink: 0;
}

.footer_banner {position: relative;}
.footer_banner > a {
  position: relative;
  display: block;
}
.footer_banner__pic:before {padding-bottom: 42%;}
.footer_banner__body {
  z-index: 1;
  text-align: center;
}
.footer_banner__body p + p {margin-top: 1.6rem;}
.footer_page_navi__arrow {
  position: absolute;
  right: 4rem;
  bottom: 4rem;
  z-index: 1;
}

#page_mv {
  position: relative;
  margin-top: 8svh;
}
.page_mv__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page_mv__copy {
  position: absolute;
  left: 6rem;
  right: 6rem;
  bottom: 6rem;
  z-index: 1;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}

.page_lead {
  margin-top: 6rem;
}
.breadcrumb a,
.breadcrumb span {color: #ffffff;}
.breadcrumb a {padding: .8rem 0; margin: -.8rem 0;} /* 見た目を変えずにタップ範囲を上下に広げる */
.breadcrumb__sep {opacity: .7;}
.breadcrumb > * {flex-shrink: 0; white-space: nowrap;} /* 長い記事タイトルに押されて「活動報告」などが折り返さないように */
.breadcrumb > span:last-child {flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;} /* 最後の項目（現在ページ）だけ1行で … 省略 */
.breadcrumb.-detail {margin-top: 1.6rem;} /* 事業紹介の各ページ（service01〜05）・お知らせ／活動報告の詳細のみ */

#page_mv.-nopic .breadcrumb a,
#page_mv.-nopic .breadcrumb span {color: var(--color-brand-blue);}
#page_mv.-nopic .breadcrumb__sep {opacity: 1;}

.feature_block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem 9rem;
  align-items: center;
}
.feature_block + .feature_block {
  margin-top: 6rem;
}
.feature_block__ttl {
  margin-bottom: 3.2rem;
}
.feature_block__ttl.title_video {margin-left:-8px;}

.accordion_icon {
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: .8rem;
  background: #ffffff;
  flex-shrink: 0;
  transition: background .2s;
}
.facility_item__head:hover .accordion_icon,
.disclosure_report__head:hover .accordion_icon {background: var(--color-brand-blue);}
.facility_item__head:hover .accordion_icon span,
.disclosure_report__head:hover .accordion_icon span {background-color: #ffffff;}
.accordion_icon span {
  position: absolute;
  top: 50%; left: 50%;
  width: 1.2rem;
  height: 1px;
  background-color: var(--color-brand-blue);
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .4s;
}
.accordion_icon span:nth-of-type(2) {transform: translate(-50%, -50%) rotate(90deg);}
.is-open .accordion_icon span:nth-of-type(1) {transform: translate(-50%, -50%) rotate(45deg);}
.is-open .accordion_icon span:nth-of-type(2) {transform: translate(-50%, -50%) rotate(-45deg);}

.facility_map {
  position: relative;
  margin-bottom: 6rem;
}
.facility_map__pic {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  scrollbar-width: none;}
.facility_map__pic::-webkit-scrollbar {display: none;}
.facility_map__canvas {
  position: relative;
  aspect-ratio: 2000 / 993;
}
.facility_map__canvas img {
  width: 100%;
  height: 100%;
  display: block;
}
/* キャプションは地図と同じグリッドセルに重ね、横スクロール時は sticky で画面側に固定（背景の地図だけが動く）。
   absolute だとスクロール容器の中身ごと動いてしまうため、グリッドで在フロー化して sticky を効かせる */
.facility_map__pic {display: grid;}
.facility_map__canvas {grid-area: 1 / 1;}
.facility_map__caption {
  grid-area: 1 / 1;
  position: sticky;
  left: 4rem;
  align-self: end;
  justify-self: start;
  margin-bottom: 4rem;
  z-index: 1;
}
.facility_map__pin {
  position: absolute;
  transform: translate(-50%, -100%); /* 線の先端(ピン下端)を基準に配置。マップの表示幅が変わっても同じ場所を指す */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.facility_map__pin_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: .8rem;
  background: var(--color-brand-blue);
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  flex-shrink: 0;
}
.facility_map__pin_line {
  width: 1px;
  height: 4.5rem;
  background: var(--color-brand-blue);
}
.facility_map__pin:hover .facility_map__pin_num,
.facility_map__pin.is-active .facility_map__pin_num {
  background: var(--color-brand-blue-dark);
}
.facility_map__desc {margin-top: 4rem;}

/* top/left = 線の先端が指す位置(マップ画像に対する%)。.cnt_m幅1400pxでの見え方を基準に算出 */
.facility_map__pin[data-facility="1"] {top: 26.86%; left: 9%; }
.facility_map__pin[data-facility="2"] {top: 23.46%; left: 20%;}
.facility_map__pin[data-facility="3"] {top: 25.17%; left: 28%;}
.facility_map__pin[data-facility="4"] {top: 30.36%; left: 35%;}
.facility_map__pin[data-facility="5"] {top: 26.06%; left: 50%;}
.facility_map__pin[data-facility="6"] {top: 32.96%; left: 64%;}
.facility_map__pin[data-facility="7"] {top: 27.76%; left: 56%;}
.facility_map__pin[data-facility="8"] {top: 43.27%; left: 89%;}

.facility_list {
  border-top: 1px solid #ffffff;
}
.facility_item {
  border-bottom: 1px solid #ffffff;
}
.facility_item__head {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  padding: 3rem 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.facility_item__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: .8rem;
  background: var(--color-brand-blue);
  color: #ffffff;
}
.facility_item__ttl,.facility_item__desc {flex-shrink: 0; color: var(--color-brand-blue);}
.facility_item__desc {flex: 1;}
.facility_item__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
}
.facility_item.is-open .facility_item__body {max-height: 200rem;}
.facility_item__body_inner {padding: 0 0 4rem;}
.facility_item__main_pic {
  margin-bottom: 3rem;
}
.facility_item__gallery_ttl {
  margin-bottom: 1.6rem;
}
.facility_item__gallery {
  display: flex;
  gap: 2rem;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.facility_item__gallery::-webkit-scrollbar {
  display: none;
}
/* 本体をマウスでつかんで横スクロールできる（js/common.js の initFacilityGalleryBar）。ドラッグ中は文字選択を出さない */
.facility_item__gallery.is-scrollable,
.facility_map__pic.is-scrollable {cursor: grab;}
.facility_item__gallery.is-dragging,
.facility_map__pic.is-dragging {cursor: grabbing; user-select: none; scroll-behavior: auto;}

.facility_item__gallery_bar,
.facility_map__bar {
  position: relative;
  box-sizing: content-box;
  height: 4px;
  padding: 8px 0;
  margin-top: .2rem;
  border-radius: 999px;
  background-color: rgba(0, 167, 226, .15);
  background-clip: content-box;
  cursor: pointer;
  touch-action: none;
}
.facility_item__gallery_bar.is-dragging,
.facility_map__bar.is-dragging {
  cursor: grabbing;
}
.facility_item__gallery_bar.is-hidden,
.facility_map__bar.is-hidden {
  display: none;
}
.facility_map__bar {margin-top: 1.2rem;}
.facility_item__gallery_bar_thumb,
.facility_map__bar_thumb {
  position: absolute;
  top: 8px; left: 0;
  width: 30%;
  height: 4px;
  border-radius: 999px;
  background: var(--color-brand-blue);
  pointer-events: none;
}
.facility_item__gallery {
  --gallery-visible: 4.5;
}
.facility_item__gallery figure {
  flex: 0 0 auto;
  width: calc((100% - 2rem * (var(--gallery-visible) - 1)) / var(--gallery-visible));
}
.facility_item__gallery img {
  width: 100%;
  aspect-ratio: 32 / 22;
  object-fit: cover;
  border-radius: 1rem;
  display: block;
  margin-bottom: 1rem;
}

.page_mv__copy .cat_cmn_wrap {
  border-color: #ffffff;
  color: #ffffff;
  margin-bottom: 1.5rem; /* タイトルの上に置くため下側に余白 */
  vertical-align: top; /* 行の下側にできる隙間を消し、タイトルとの間隔を margin どおりにする */
}

.cmn_num {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  line-height: 1;
  background: url("img/common/watercolor.png") center/cover no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.numbered_feature_list > article:first-child,#service01_feature .numbered_feature_list > article:last-child {
  grid-column: 1 / -1;
  margin-bottom: 3rem;
}

.numbered_feature_list__frame {
  position: relative;
}
.numbered_feature_list__num {
  position: absolute;
  right: 1rem;
  bottom: -5.5rem;
}
/* service03は見出しが長く数字と重なるため、数字を写真下端に寄せる(1024px以下と同じ位置) */
#service03_feature .numbered_feature_list__frame {margin-bottom: 3.5rem;}
#service03_feature .numbered_feature_list__num {bottom: -3.5rem;}
.home_about__item .numbered_feature_list__num {bottom: -3.5rem;} /* TOP 私たちについて：History／Mission を写真下端に寄せる */
.cmn_arrow.external::before {
  transform: translateY(-50%) rotate(-45deg);
}
.cmn_arrow.external::after {
  transform: translateY(-65%) rotate(0deg);
  transform-origin: 20% 50%;
}

.detail_feature__pic {margin: 3rem 0 6rem;}
.detail_feature__body p + p {margin-top: 2rem;}

.cmn_card_list .c_pic {margin-bottom: 3rem;}
.cmn_card_list p {margin-bottom: 2.4rem;}
.service_list__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.outline_message__ttl {
  margin-bottom: 7.5rem;
}
.outline_message__body {
  position: relative;
  background: url(img/top/intro_main_bg.webp) no-repeat left 3rem top;
  background-size: contain;
  z-index: 1;
  padding: 13rem 0 6rem;
  width: 100%;
}
#outline_message.sec_wrap {
  margin-top: 6rem;
}
.outline_message__body_inner {
  display: flex;
  justify-content: center;
}
.outline_message__body p {line-height: 2.2;padding-left: 4vw;}
.outline_message__body p + p {margin-top: 2rem;}
.outline_message__gallery {
  overflow: hidden;
  width: 100%;
  margin-top: 6rem;
  padding-bottom: 6rem;
}
.outline_message__gallery_track {
  display: flex;
  gap: 6rem;
  width: max-content;
  animation: outlineGalleryScroll 40s linear infinite;
}
@keyframes outlineGalleryScroll {
  0%   {transform: translateX(0);}
  100% {transform: translateX(-50%);}
}
.outline_message__gallery_item {
  flex-shrink: 0;
  width: 24rem;
}
.outline_message__gallery_item:nth-child(odd) {
  margin-bottom: 6rem;
}
.outline_message__gallery_item:nth-child(even) {
  margin-top: 6rem;
}

.outline_org {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6rem;
  row-gap: 3rem;
  width: 55%;
  min-width: 770px;
  margin: 0 auto;
}
.outline_org__box {
  position: relative;
  border: 2px solid var(--color-brand-blue);
  border-radius: 1.2rem;
  text-align: left;
}
.outline_org__box.-scope1 {grid-column: 1; grid-row: 1;}
.outline_org__box.-board  {grid-column: 1; grid-row: 2;}
.outline_org__box.-audit  {grid-column: 2; grid-row: 2;}
.outline_org__box.-office {grid-column: 1 / -1; grid-row: 3;}

.outline_org__box.-board::before,
.outline_org__box.-board::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 1px;
  height: 3rem;
  background: var(--color-brand-blue);
}
.outline_org__box.-board::before {top: -3rem;}
.outline_org__box.-board::after  {bottom: -3rem;}

.outline_org__box.-audit::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 6rem;
  height: 1px;
  background: var(--color-brand-blue);
}

.outline_org__box_ttl {
  padding: 1.6rem;
  border-bottom: dotted 1.5px var(--color-brand-blue);
  text-align: center;
}
.outline_org__box_body {padding: 1.8rem 1.6rem 2.4rem;}
.outline_org__box.-scope1 .outline_org__box_body,
.outline_org__box.-board .outline_org__box_body,
.outline_org__box.-audit .outline_org__box_body {
  text-align: center;
}
.outline_org__dept {
  width: 100%;
  border-collapse: collapse;
}
.outline_org__dept td {
  vertical-align: top;
  padding: 0.8rem 1rem;
}
.outline_org__dept tr + tr td {padding-top: 1.8rem;}
.outline_org__dept td:first-child {width: 20rem;}
.outline_org__dept td:nth-child(2) {width: 30%;}
.outline_org__dept td:nth-child(3) {width: 46%;}
.outline_org__dept li + li {margin-top: 0.4rem;}

.outline_links__group {
  padding: 3rem 0;
  border-bottom: dotted 1.5px var(--color-brand-blue);
}
.outline_links__group:first-child {border-top: dotted 1.5px var(--color-brand-blue);}
.outline_links__group_ttl {margin-bottom: 3rem;}
.outline_links__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}
.outline_links__grid+.outline_links__grid {
  margin-top: 2rem;
}
.outline_links__card {
  container-type: size; /* カード基準の単位(cqi=幅・cqh=高さ)で文字・ロゴの大きさを決めるため。高さはaspect-ratioで幅から決まる */
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  background: #ffffff;
  border-radius: 1.2rem;
  padding: 2rem;
  margin-bottom: 1.6rem;
}
/* ロゴの高さはカードの高さ基準(cqh)。%指定だとSafariでaspect-ratioの高さを基準にできず原寸表示になり、はみ出していた */
.outline_links__card img {width: auto; height: 25cqh; max-width: 100%; object-fit: contain;}
.outline_links__group:last-child .outline_links__grid > .outline_links__item:last-child .outline_links__card img {height: 80cqh;}
.outline_links__group:first-child .outline_links__grid > .outline_links__item:first-child .outline_links__card img {height: 15cqh;}
.outline_links__card p {text-align: center;}
.outline_links__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.outline_links__link{text-decoration: underline;}

#outline_other .cmn_card_list {margin-top: 6rem;}

#page_mv.-nopic {
  min-height: min(38rem, 80svh);
  display: flex;
  align-items: flex-end;
}
#page_mv.-nopic .page_mv__copy {position: static;}

#single_head {
  margin-top: 5rem;
  min-height: min(38rem, 80svh);
  display: flex;
  align-items: flex-end;
}
.single_head__meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 1.5rem; /* タイトルの上に置く。間隔は service の FV（.page_mv__copy .cat_cmn_wrap）と同じ 15px */
}
.single_head__meta .cat_cmn_wrap {border-color: var(--color-brand-blue);}
/* 活動報告・お知らせ詳細のカテゴリー（カテゴリー別一覧へのリンク）：ホバーで反転（一覧の絞り込みボタンと同じ仕様） */
a.cat_cmn_wrap, .cat_cmn_wrap[data-cat-href] {transition: background-color .3s, color .3s, border-color .3s;}
.single_head__meta a.cat_cmn_wrap:hover,
.cat_cmn_wrap[data-cat-href]:hover {background: var(--color-brand-blue); border-color: var(--color-brand-blue); color: #ffffff;}
.cat_cmn_wrap[data-cat-href] {cursor: pointer;} /* 一覧カード内のカテゴリー（カテゴリー別一覧へ。js/common.js） */
#single_head .breadcrumb a,
#single_head .breadcrumb span {color: var(--color-brand-blue);} /* 写真なしの見出しなので青文字（#page_mv.-nopic と同じ） */
#single_head .breadcrumb__sep {opacity: 1;}

.disclosure_report__row {
  border-bottom: dotted 1.5px var(--color-brand-blue);
}
.disclosure_report__row:first-child {border-top: dotted 1.5px var(--color-brand-blue);}
.disclosure_report__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 2.4rem 0;
  color: var(--color-brand-blue);
  cursor: pointer;
}
.disclosure_report__body {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
}
.disclosure_report__row.is-open .disclosure_report__body {max-height: 60rem;}
.disclosure_report__body_inner {padding: 0 0 2.4rem;}
.disclosure_report__link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: fit-content;
}
.disclosure_report__link + .disclosure_report__link {margin-top: 0.8rem;}
.disclosure_report__link a {display: inline-flex; align-items: center; gap: 0.8rem;} /* 資料名と「PDF」を1つのリンクに（どちらを押しても開く） */
.disclosure_report__link_txt {text-decoration: underline;} /* 下線は資料名だけ（「PDF」の丸囲みには付けない） */
.disclosure_report__link:hover .cat_cmn_wrap {
  background: var(--color-brand-blue);
  color: #ffffff;
}

.member_lead {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
  margin-top: 6rem;
}
.member_lead__ttl p span + span,#about_visit h3 span + span {margin-top: 1.5rem;}
.member_lead__ttl p span,#about_visit h3 span {display: table;}
.member_lead__ttl p .sp_disp {width: fit-content;} /* 1024px以下は.sp_dispのdisplay:block!importantが勝つため、幅を文字幅に合わせて点線が伸びないようにする */

.service01_process {
  margin-top: 6rem;
}
.service01_process__item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem 9rem;
  align-items: center;
  padding: 6rem 0;
  border-bottom: solid 1.5px #ffffff;
}
.service01_process__item:first-child {
  border-top: solid 1.5px #ffffff;
}
.service01_process__body,
.service01_process__pic {
  min-width: 0;
}
.service01_process__pic {position: relative; container-type: inline-size;} /* cqw基準(矢印ナビをキャプション1行目に揃えるため) */
.service01_process__pic .c_pic:before {padding: 0 0 66.666%;}
.service01_process__slider .swiper-slide {outline: none;}
.service01_process__caption {margin-top: 1.6rem; padding-right: 12.2rem;line-height:1.65;} /* 矢印ナビ幅+余白ぶん空け、長文はナビ手前で折り返す */
.service01_process__pic_foot {
  position: absolute;
  right: 0;
  top: calc(66.666cqw + 1.6rem); /* 写真の高さ(幅の66.666%)+キャプション上余白 */
  z-index: 2;
  display: flex;
  align-items: center;
}
.service01_process__nav {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.service01_process__nav button {cursor: pointer;}
.service01_process__count {
  min-width: 3rem;
  text-align: center;
}

.report_filter, .news_filter {
  display: flex;
  gap: 1.2rem;
  /* ボタンは折り返さず1行。収まらないときは横スクロールで送る（スクロールバーは出さない） */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: .8rem 0;   /* overflow で切れる上下のタップ範囲（button::before の -.8rem）ぶんを確保 */
  margin: -.8rem 0;   /* 上の padding で見た目の位置が動かないよう相殺 */
}
.report_filter::-webkit-scrollbar, .news_filter::-webkit-scrollbar {display: none;}
.report_filter button, .news_filter button {flex: 0 0 auto; white-space: nowrap;}
.report_filter button, .news_filter button {color: var(--color-brand-blue); cursor: pointer; position: relative;}
.report_filter button::before, .news_filter button::before {content: ''; position: absolute; inset: -.8rem -.4rem;} /* タップ範囲を上下に広げる(見た目は変えない) */
.report_filter .cat_cmn_wrap.is-active, .news_filter .cat_cmn_wrap.is-active,
.report_filter .cat_cmn_wrap:hover, .news_filter .cat_cmn_wrap:hover { /* ホバーも選択中と同じ反転（活動報告詳細のカテゴリーリンクと共通の見せ方） */
  background: var(--color-brand-blue);
  color: #ffffff;
}
.report_filter .cat_cmn_wrap, .news_filter .cat_cmn_wrap {transition: background-color .3s, color .3s;}
.report_list, .news_list {margin-top: 6rem;}
.report_list article.is-hidden, .news_list article.is-hidden {display: none;}

.report_pager, .news_pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  margin-top: 7.5rem;
}
.report_pager .is-disabled, .news_pager .is-disabled {visibility: hidden;} /* 先頭・最後のページの矢印は場所だけ残して非表示 */
.report_pager a:hover .cmn_arrow, .news_pager a:hover .cmn_arrow {background: var(--color-brand-blue);}
.report_pager a:hover .cmn_arrow::before, .news_pager a:hover .cmn_arrow::before {background: #ffffff;}
.report_pager a:hover .cmn_arrow::after, .news_pager a:hover .cmn_arrow::after {border-color: #ffffff;}
.report_pager__nums, .news_pager__nums {display: flex; align-items: center; list-style: none; margin: 0; padding: 0;}
.report_pager__nums li, .news_pager__nums li {display: flex; align-items: center;}
.report_pager__nums li + li::before, .news_pager__nums li + li::before {content: '・'; padding: 0 0.6rem; color: var(--color-brand-blue);}
.report_pager__num, .news_pager__num {
  display: inline-block; /* a の display:block（全体指定）を打ち消し、span と高さをそろえる */
  color: var(--color-brand-blue);
  text-decoration: underline transparent; /* 下線は色だけ切り替える（ホバーで位置がずれないように） */
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: text-decoration-color 0.3s;
}
.report_pager__num.is-current, .news_pager__num.is-current,
.report_pager a.report_pager__num:hover, .news_pager a.news_pager__num:hover {text-decoration-color: currentColor;}
.report_pager__gap, .news_pager__gap {color: var(--color-brand-blue);}

.post_content {
  word-break: break-all;
}
.post_content > h2:first-child,.post_content > h3:first-child {margin-top: 0;}
.post_content h2,.post_content h3 {margin: 4.5rem 0 2rem;}
.post_content a {
  text-decoration: underline;
  display: inline-block;
  color: var(--color-brand-blue);
}
.post_content a:hover {transition: all ease .3s; opacity: .6;}
.post_content > a:has(> img) {display: block; width: fit-content;} /* リンク付き画像：inline-block だと下に行の隙間（約4px）が出るため */

.post_content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 2rem;
}
.post_content br {width: 0; height: 0; margin: 0; padding: 0;}
.post_content .aligncenter {margin-right: auto; margin-left: auto;}
.post_content .alignright {float: right;}
.post_content .alignleft {float: left;}
.post_content > p+p {margin-top: 1.5rem;}
.post_content ul,.post_content ol,
.post_content > pre+p,.post_content > p+pre,.post_content > pre+div,
.post_content > img+pre,.post_content > pre+img,.post_content > figure+figure {
  margin-top: 3rem;
}
.post_content > ul+p,.post_content > ol+p {margin-top: 1.5rem;}
.post_content > picture {margin-bottom: 4.5rem; display: block;}
.post_content > div+p,.post_content > p+div,.post_content > div+div,
.post_content > img+p,.post_content > p+img,.post_content > img+img,.post_content p > img+img,
.post_content > img+div,.post_content > div+img,
.post_content > p+figure,.post_content > figure+p,
.post_content > a+p,.post_content > p+a,.post_content > a+a,.post_content > img+a,.post_content > a+img,
.post_content > figure+img,.post_content > img+figure,.post_content > figure+a,.post_content > a+figure {
  margin-top: 4rem;
}
.post_content .wp-caption-text {margin: .8rem 0 0; color: rgba(0,0,0,.5);}
.post_content .wp-caption {max-width: 100% !important;}
.post_content ol {padding-inline-start: 25px;}
.post_content ol li {list-style-type: decimal;}
.post_content ol li,.post_content ul li {display: list-item; text-align: -webkit-match-parent;}
.post_content ul,.post_content ol {
  margin-top: 1.5rem;
  padding-left: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post_content ul {list-style: disc;}
.post_content ul li {list-style-type: disc; position: relative;}
.post_content ol {list-style: decimal;}
.post_content hr {margin: 6rem 0 3rem; border: none; border-top: 1px solid rgba(0,167,226,0.2);}
.post_content iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  margin: 3rem 0;
  border-radius: 2rem;
}
/* 記事内の動画（メディアから「メディアプレーヤーを埋め込む」で挿入した [video]）。WordPress が付ける 640px 固定幅は functions.php で外している */
.post_content .wp-video {width: 100%; max-width: 100%; margin: 3rem 0;}
.post_content video {display: block; width: 100%; height: auto; border-radius: 2rem; background: #000;}

.post_content {margin-top: 4.5rem;}
.post_back {
  display: flex;
  justify-content: center;
}

.post_back .cmn_btn > a {position: relative; justify-content: center;}
/* 白背景ページ上のためホバーは白でなく薄水色にする(白だと背景が消えたように見える) */
.post_back .cmn_btn:hover > a {background: var(--background);}
.post_back .cmn_btn > a .cmn_arrow {
  position: absolute;
  left: 1.8rem;
  top: 50%;
  transform: translateY(-50%) rotate(180deg);
}

.contact_desc {margin-bottom: 4.5rem;}

.form_list {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.form_list__row {
  display: grid;
  grid-template-columns: 30rem 1fr;
  align-items: center;
  gap: 2rem;
}
.form_list__row--textarea {align-items: start; padding-top: 1.4rem;}
.form_list dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 2rem;
}
.form_required {
  color: var(--color-error);
  letter-spacing: 0.05em;
}

.form_list dd input[type="text"],
.form_list dd input[type="email"],
.form_list dd input[type="tel"],
.form_list dd select {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-brand-blue);
  border-radius: 1rem;
  outline: none;
  color: var(--color-brand-blue);
  padding: 1.4rem 1.8rem;
}
.form_list dd select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300a7e2' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.8rem center;
  padding-right: 3.2rem;
}
.form_list dd textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--color-brand-blue);
  border-radius: 1rem;
  outline: none;
  color: var(--color-brand-blue);
  min-height: 22rem;
  resize: vertical;
  padding: 1.4rem 1.8rem;
}
.form_list dd textarea::placeholder {color: var(--color-brand-blue); opacity: .5;} /* 水色。入力済みの文字（ブランドの青）と見分けがつくよう薄くする。Firefox の既定の薄さも上書き */

.contact_privacy {margin-top: 6rem;padding-top:6rem;border-top:1px solid var(--color-brand-blue);text-align:center;}
.contact_privacy a {display: inline;text-decoration: underline;}
.contact_privacy p + p {margin-top:2rem;}

.contact_submit {display: flex; justify-content: center; margin-top: 4.5rem;}
.contact_submit .cmn_btn {margin-top: 0;}
.contact_submit .cmn_btn > button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-brand-blue);
  border-radius: 1rem;
  padding: 1.8rem 2.4rem;
  min-width: 30rem;
  cursor: pointer;
  color: #ffffff;
}
.contact_submit .cmn_btn:hover > button {
  background: #ffffff;
  color: var(--color-brand-blue);
  transition: all ease .2s;
}

.privacy_contact {
  margin-top: 2rem;
  padding: 3rem;
  background: rgba(255,255,255,0.8);
  border-radius: 1.5rem;
}
.privacy_contact p + p {margin-top: 0.8rem;}

/*-----------------------------------------------
  WP: 送信完了ページ（page-thanks.php）
-----------------------------------------------*/
.thanks_title {margin-bottom: 3rem;}

/*-----------------------------------------------
  WP: Contact Form 7
  入力欄の見た目は .form_list 側のルールをそのまま使う（CF7のspanラッパーは影響しない）
-----------------------------------------------*/
.wpcf7-form-control-wrap {display: block;}
.wpcf7-not-valid-tip {display: block; color: var(--color-error); margin-top: 0.8rem;} /* 各欄の「入力してください」。エラーメッセージ・必須マークと同じ赤 */
/* 表示されるのは入力エラー・送信失敗時のみ（送信完了はサンクスページへ）。
   CF7 本体の CSS が状態ごと（form.invalid 等）に黄・赤の 2px 枠を当てるため、同じ強さのセレクタで上書きする */
.wpcf7 form .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {margin: 3rem auto 0; padding: 2rem 2.6rem; border: 1px solid var(--color-error); color: var(--color-error); text-align: center;}
.wpcf7 form.sent .wpcf7-response-output {display: none;} /* 送信完了はサンクスページへ遷移するため出さない */
.wpcf7-spinner {display: none;}