@charset "UTF-8";

/*
Theme Name: SHAKU HUNTER
Theme URI: https://shaku-hunter.com/
Description: SHAKU HUNTER WordPress Theme
Author: SHAKU HUNTER
Version: 2026_01
Tested up to: 6.8
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: #000000;
}



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
#main {
  width: 100%; background: white; margin-bottom: 100px;
} /* #main */

.inner {width: min(1040px, 100%); margin: auto; padding: 0 20px}

/* ヘッダーまわり */
header {
  position: fixed; top:0; width: 100%; z-index: 100;
  .inner {width: min(100%); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 15px; align-items: center; }
  .site_title {line-height: 1;}
} /* header */


/* Gmap、YouTubeなどコンテンツのレスポンシブ */
iframe.respo {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 50px}

/* Loading */
#loading {position: fixed; width: 100%; height: 100%; z-index: 999; background: var(--main_color);}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.fadeUp {animation-name: fadeUpAnime; animation-duration:0.5s; animation-fill-mode:forwards; opacity: 0;}
@keyframes fadeUpAnime{
  from {opacity: 0;transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

/* common */
.h_title {text-transform: uppercase; line-height: 1.2; margin-bottom: 30px; letter-spacing: .1em}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {

  .each {
    h2.h_title {text-align: left !important}
    .figure img {width: 100%; aspect-ratio: 550/350; object-fit: cover;}
  }

  #hero {
    background: var(--main_color) url(img/home/hero_bg.jpg); background-size: cover; background-position: 50% 50%; display: grid; place-items: center; min-height: 100svh; margin-bottom: 100px;
    h2 {padding: 20px}
  } /* #hero */

  #lead {
    margin-bottom: 180px;
    .inner {display: grid; grid-template-columns: 42% 1fr; gap: 20px 35px;}
    .figure li {margin-bottom: 15px}
    .figure img {width: 100%; aspect-ratio: 540/350; object-fit: cover;}
  } /* #lead */

  #target {
    margin-bottom: 100px;
    .inner {display: grid; grid-template-columns: 1fr 41%; gap: 35px; align-items: center}
    .detail {order: 2}
    .detail .in_site_link {margin-top: 120px}
    .figure {order: 1}
  } /* #target */

  #slider {
    margin-bottom: 200px;
    .inner {width: min(100%); }
    .swiper-slider {overflow: hidden; position: relative}
    .swiper-slide {text-align: center}
    .swiper-slide img {width: 100%; aspect-ratio: 4/3; object-fit: cover;}
  } /* #slider */

  #about {
    margin-bottom: 200px;
    .inner {display: grid; grid-template-columns: 41% 1fr; gap: 25px 35px;}
    .detail {background: url(img/home/about_bg.svg) no-repeat right bottom; margin-top: 15px;} 
  } /* #about */

  #plan {
    .inner {display: grid; grid-template-columns: 1fr 41%; gap: 35px;}
    .detail {order: 2; margin-top: 15px;}
    .figure {order: 1}
  } /* #plan */
} /* home */




/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  background: var(--main_color) url(img/common/title_head_bg.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 110px;
  h2 {padding: 180px 0 110px; text-align: center; line-height: 1; margin-bottom: 0; color: white; text-transform: uppercase}
} /* #title_head */



/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
.page #main {
  h2.h_title {text-align: center; margin-bottom: 50px}
  hgroup {margin-bottom: 35px}
  hgroup h2.h_title {margin-bottom: 8px}
  hgroup p {margin-bottom: 0; font-weight: 500; text-align: center}
}

/* FLYFISHING IN TOHOKU */
.page-id-18 {
  #main {margin-bottom: 70px}

  #lead {
    p {margin-bottom: 50px}
  } /* #lead */

  .interval_figure {
    margin-bottom: 90px;
    img {width: 100%; aspect-ratio: 1366 / 600; object-fit: cover;}
  }

  #streams { 
    margin-bottom: 80px;
    h2.h_title {text-transform: none}
    p {margin-bottom: 50px}
    .swiper-streams {overflow: hidden; position: relative}
    .swiper-slide {text-align: center}
    .swiper-slide img {width: 100%; aspect-ratio: 10/6; object-fit: cover;}
    .swiper-button-next, .swiper-button-prev {width: 70px; height: 70px; }
    .swiper-button-prev::after {background: url(img/page/slider_prev.svg) no-repeat; width: 70px; height: 70px; color: transparent}
    .swiper-button-next::after {background: url(img/page/slider_next.svg) no-repeat; width: 70px; height: 70px; color: transparent}
  } /* #streams */

  #target {
    margin-bottom: 120px;
    dl {display: grid; grid-template-columns: 70% 1fr; gap: 30px 70px; align-items: center;}
    dd .h_title {text-align: left}
    dt img {width: 100%; aspect-ratio: 705/350; object-fit: cover;}
  } /* #target  */

  #regulations {
    margin-bottom: 120px;
    h2.h_title {margin-bottom: 20px}
    p {text-align: center}
    ul {max-width: 720px; margin: auto; margin-bottom: 20px}
  } /* #regulations  */

  #highlights {
    margin-bottom: 180px;
    .wrap {gap: 40px 10px}
    .wrap dt {margin-bottom: 10px}
    .wrap dd {text-align: center; font-weight: 500}
    .wrap dt img {width: 100%; aspect-ratio: 495/315; object-fit: cover;}
  } /* #highlights  */

  #access {
  } /* #access  */
} /* FLYFISHING IN TOHOKU */



/* TARGET FISH  */
.page-id-20 {
  #main {margin-bottom: 160px}

  #two {
    margin-bottom: 140px;
    .wrap {gap: 20px; margin-bottom: 20px}
    .wrap dt {font-size: clamp(2.8rem, 2.511rem + 1.19vw, 3.4rem); text-align: center; margin-bottom: 10px; text-transform: uppercase; font-weight: 700}
    .wrap dd img {width: 100%; aspect-ratio: 490/320; object-fit: cover;}
    .note {text-align: center}
  } /* #two  */

  #yamame {
    margin-bottom: 170px;
    .text {margin-bottom: 30px}
    .figure {margin-bottom: 30px}
    .figure .show-for-medium img {width: 100%; aspect-ratio: 10/6; object-fit: cover;}
    .intro {display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
        "a b"
        "c b"
        "d e"
        "f e";
      margin: 0;
    }
    .intro li:nth-child(1) { grid-area: a; }
    .intro li:nth-child(2) { grid-area: b; } /* 右側の大きい縦長スロット（縦に2行分を跨ぐ） */
    .intro li:nth-child(3) { grid-area: c; }
    .intro li:nth-child(4) { grid-area: d; }
    .intro li:nth-child(5) { grid-area: e; } /* 右下を跨ぐスロット（縦に2行分） */
    .intro li:nth-child(6) { grid-area: f; }
  } /* #yamame */
  
  #iwana {
    .text {margin-bottom: 30px}
    .figure {margin-bottom: 30px}
    .figure .show-for-medium img {width: 100%; aspect-ratio: 10/6; object-fit: cover;}
    ul {gap:10px}
    il img {width: 100%; aspect-ratio: 495/315; object-fit: cover;}
  } /* #iwana */
} /* TARGET FISH */



/* ABOUT SHAKU */
.page-id-22 {
  #title_head {
    background: var(--main_color) url(img/common/title_head_bg_about.jpg); background-size: cover; background-position: 50% 50%;
  }

  #main {margin-bottom: 240px}

  #size {
    margin-bottom: 50px;
    h2.h_title {text-transform: none}
  } /* #size */

  .figure_main {
    margin-bottom: 80px;
    .show-for-medium img {width: 100%; aspect-ratio: 1366/700; object-fit: cover;}
  }

  #why {
    h2.h_title {text-transform: none}
  } /* #why */
} /* ABOUT SHAKU */



/* PLAN */
.page-id-24 {
  #main {margin-bottom: 50px}

  .each {
    .inner {width: min(840px, 100%); }
    h2.h_title {text-transform: none}
    hgroup p {font-weight: 700 !important; font-size: clamp(2rem, 1.759rem + 0.99vw, 2.5rem)}
    .note {border-top: 1px solid var(--main_color); border-bottom: 1px solid var(--main_color); padding:  20px 0; margin-bottom: 30px}
    .price {text-align: center; font-weight: 700; font-size: clamp(2.6rem, 2.407rem + 0.79vw, 3rem); line-height: 2; margin-bottom: 20px}
    .in_site_link {text-align: center}
    .appeal {text-align: center}
  }

  #plan_01 {
    margin-bottom: 150px;
  } /* #plan_01 */

  #plan_02 {
  } /* #plan_02 */
} /* PLAN */



/* MOVIE */
.page-id-26 {
  #main {margin-bottom: 180px}

  #movie {
    .inner {width: min(840px, 100%); }
    .each {margin-bottom: 100px}
    .each h2.h_title {text-transform: none; font-size: clamp(3rem, 2.519rem + 1.98vw, 4rem); margin-bottom: 40px}

    .each .thumb_wrap {position: relative; cursor: pointer; display: inline-block;}

    .each .thumb_wrap .movie_mark {
      position: absolute;
      z-index: 10;
      width: 150px;   /* 必要に応じ調整 */
      height: 150px;  /* 必要に応じ調整 */
      background: url(img/page/movie_mark.svg) no-repeat center/contain;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: auto; /* クリック可 */
      cursor: pointer;
    }
  } /* #movie */
} /* MOVIE */



/* GALLERY */
.page-id-28 {
  # {

  } /*  */
} /* GALLERY */



/* CONTACT */
.page-id-30 {
  #form_wrap {
    .inner {width: min(690px, 100%); }
  } /* form_wrap */
} /* CONTACT */



/* RESERVATION */
.page-id-32 {
  #lead .inner {width: min(1120px, 100%); }
  #form_wrap {
  .inner {width: min(690px, 100%); }
  .caution {height: 280px; padding: 20px; border: 1px solid #CCC; overflow: auto; text-align:left; font-size: 1.4rem; margin-bottom: 15px}
  [data-name="caution_agree"] {text-align: center}
  .smf-action {margin-top: 40px}
  } /* form_wrap */
} /* RESERVATION */



/* PRIVACY POLICY */
.page-id-3 {
  # {

  } /*  */

  # {
  
  } /*  */

  # {
  
  } /*  */

} /* PRIVACY POLICY */



/*---------------------------------------------------------------------
 フォーム snow monkey form
---------------------------------------------------------------------*/
.snow-monkey-form {
  .smf-item {margin-bottom: 20px; padding-bottom: 20px; display: grid; grid-template-columns: 31% 1fr; gap: 10px 30px;}
  .smf-item__label {margin-bottom: 0; font-weight: 400; font-size: clamp(1.6rem, 1.504rem + 0.4vw, 1.8rem)}
  .smf-item__label__text {position: relative;}
  .smf-item__label__text::after {position: absolute; content: '*'; color: red; top: 50%; transform: translateY(-50%); font-weight: 700}

  .smf-item.tel .smf-item__label__text::after,
  .smf-item.transportation .smf-item__label__text::after,
  .smf-item.country .smf-item__label__text::after,
  .smf-item.language .smf-item__label__text::after,
  .smf-item.language_other .smf-item__label__text::after,
  .smf-item.accommodation .smf-item__label__text::after,
  .smf-item.reservation_message .smf-item__label__text::after,
  .smf-item.zip .smf-item__label__text::after {display: none;} /* 必須マークの解除　設問のブロックに「高度な設定 → class名」を入れる */
  .smf-item.participants {}
  .smf-item.reservation_message,
  .smf-item.accommodation {grid-template-columns: 1fr;}
  .smf-item.language_other span {font-size: 1.2rem;}
  .confirmation h2 {text-align: center; font-size: 2rem; margin-bottom: 8px}
  .confirmation p {text-align: center}
  .confirmation p a {text-decoration: underline; font-size: 1.4rem}

  .smf-form .smf-text-control__control {width: 100%}

  input::placeholder {color: silver}
  textarea::placeholder {color: silver}

  /* 送信ボタン */
  .smf-action {text-align: center;}
  .smf-action .smf-button-control__control {letter-spacing: .15em; padding: 10px 50px; background: #999999; transition: all 0.3s ease; font-weight: 700; color: white}
  .smf-action .smf-button-control__control:hover {opacity: .8}
} /* .snow-monkey-form  */

/* 確認画面 */
[data-screen="confirm"] .smf-form--simple-table .smf-item {border-bottom: 1px solid silver; padding-bottom: 20px; margin-bottom: 20px}

/* 送信後画面 */
[data-screen="complete"] p {padding: 0; text-align: center}

/* 郵便番号　ハイフン無しで！の削除 */
#autozip {display: none !important;} 


/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single-post {
  #content .inner {width: min(780px, 100%)}
  
  .entry_title {line-height: 1.4}
  .entry_meta {
    margin-bottom: 10px;
    .date {margin-bottom: 5px}
    .category_list a {margin-right: 5px}
    .tag_list a {margin-right: 5px}
  } /* .entry_meta */
  
  .entry_content {
    padding-bottom: 100px; word-wrap: break-word; /* 折り返し解除 */
    h2 {font-size: clamp(2rem, 1.9rem + 0.5vw, 2.4rem); border-left: 3px solid var(--main_color); padding-left:20px; margin-bottom: 20px; line-height: 1.6; font-weight: 500; word-break: auto-phrase;}
    h3 {font-size: clamp(1.8rem, 1.725rem + 0.38vw, 2.1rem); margin-bottom: 16px; padding-bottom: 6px; font-weight: 500; border-bottom: 2px solid silver;}
    a img {pointer-events: none;} /* 画像にリンクがついてもリンク解除 */
    a img:hover {opacity: .8}
    figure {margin-bottom: 20px} /* 画像 */
    figure a { display: block}
    figcaption {margin-top: 6px; text-align: right; font-size: 1.4rem;} /* キャプション */
    p {margin-bottom: 30px; line-height: 1.8}
    a {color: var(--main_color); text-decoration: underline}
    ul {margin-bottom: 30px}
    .wp-block-file a {text-decoration: underline}
    .wp-block-file a:last-child {display: none}
    a[href$=".pdf"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_pdf_18.svg) no-repeat left center;}
    a[href$=".doc"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".docx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".xls"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".xlsx"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".csv"] {display: inline-block; padding: 2px 0 2px 26px; background: url(img/post/icon_csv_18.svg) no-repeat left center;}
    .wp-block-quote {background: #EBEBEB url(img/post/quote_bk.svg) no-repeat 30px 30px; padding: 80px 30px 30px 30px; border-radius: 30px; margin-bottom: 30px} /* 引用ブロック */
    .wp-block-quote cite {font-size: 1.2rem;} /* 引用 */
    .wp-block-quote cite a { text-decoration: underline} /* 引用 */
    .wp-block-quote cite::before {content: "引用元"; padding-right: 10px} /* 引用 */
    .wp-block-cover p {color: white} /* カバー */
    .wp-block-table table { margin-bottom: 10px} /* カバー */
    .wp-block-columns {gap:30px}
    .wp-block-columns p {margin-bottom: 15px}
    .wp-block-columns ul {margin-bottom: 15px}
    .wp-block-columns figure { margin-bottom: 0}
    .wp-block-gallery ul {margin-bottom: 0}
    .wp-block-button a {color: white; font-weight: bold; transition: all 0.3s ease;} /* ボタン */
    .wp-block-button a:hover {opacity: .8} /* ボタン */
    .wp-block-gallery {display: flex; flex-wrap: wrap;} /* ギャラリー縦並びになってしまう事の対処 */
    .wp-element-caption a {color: var(--main_color); border-bottom: 1px solid var(--main_color); display: inline-block} /* キャプションにリンクがある場合 */
    .youtube_movie {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* YouTube 埋め込み対応（utility.js にてjquery でクラス追加） */
    .google_map {aspect-ratio: 16 / 9; width: 100%; height: 100%; margin-bottom: 20px} /* Google Map 埋め込み対応（utility.js にてjquery でクラス追加） */
    .has-small-font-size { font-size: 1.2rem !important} /* フォントサイズ */
    .has-medium-font-size { font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem)!important}
    .has-large-font-size { font-size: clamp(1.7rem, 1.669rem + 0.13vw, 1.8rem)!important}
    .has-x-large-font-size { font-size: clamp(1.8rem, 1.739rem + 0.26vw, 2rem)!important}
  } /* .entry_content */
} /* single-post */


/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: #ccc; background-size: cover; background-position: 50% 50%; min-height: 60vh; display: grid; place-items: center; margin-bottom: 0}
  #main dt {margin-bottom: 30px; text-align: center}
  #main dt img {width: 260px}
  #main dd {color: var(--main_color); font-size: 3rem; text-align: center; text-transform: uppercase; font-weight: 700}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  width: 100%; padding-bottom: 25px;
  hr {margin-bottom: 60px}
  h2 {text-align: center; margin-bottom: 40px}
  .instagram {text-align: center; margin-bottom: 40px}
  .site_nav {max-width: 780px; margin: auto auto 60px}
  .site_nav ul {display: flex; justify-content: center; flex-wrap: wrap; gap:10px 30px}
  .site_nav ul .menu-item-37 {display: none}
  .site_nav a {font-size: 1.6rem; font-weight: 700; text-transform: uppercase}
  .copy {text-align: center; margin-bottom: 0}
  .copy small {font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); font-weight: 700}
  a:hover {opacity: .6}
} /* footer */



/*---------------------------------------------------------------------
 print
---------------------------------------------------------------------*/
@media print {
  body {-webkit-print-color-adjust: exact;} /* Chrome 背景色強制印刷 */
  a[href]:after {content: "" !important;}
  abbr[title]:after {content: "" !important;}
  .show-for-small-only {display: none !important}
  .pagetop.show {display: none !important}
  body, h1, h2, h3, h4, h5, h6, li, dt, dd, p, th, td, .mincho {font-family: sans-serif !important} /* Chrome印刷で日本語が表示されない対応 */
}

/*---------------------------------------------------------------------
 jquery js 関連 css
---------------------------------------------------------------------*/
/* ヘッダー背景色の変更 */
header.change-color {background-color: rgba(0, 0, 0, 0.9); transition: 1s;}

/* drawer */
.drawer-wrap {position: absolute; top: 0; right: 0;	}

#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  padding: 80px 36px;
  z-index: 40;
  width: 40vw;
  min-width: 40vw;
  height: 100%;
  background: var(--main_color);
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(100%);

  .site_nav li {margin-bottom: 30px}
  #menu-item-45 a {padding: 10px 50px 10px 20px; color: var(--main_color); background: #cccccc url(img/common/header_reservation_arrow.svg) no-repeat top 50% right 20px;} 
  #menu-item-45 a:hover {opacity: .6}
  #menu-item-334 {display: none}
  a {color: white; text-transform: uppercase; font-weight: 700; transition: all 0.3s ease; border-bottom: 1px solid var(--main_color);}
  a:hover {border-bottom: 1px solid white;}
  .sns_shop {position: absolute; bottom: 0; left: 30px;}
  .sns_shop li:nth-of-type(2) a {border-bottom: 1px solid var(--main_color); }
  .sns_shop li:nth-of-type(2) a:hover {opacity: .6}
}

#drawer-checkbox:checked ~ #drawer-content {transform: translateX(0); box-shadow: 6px 0 24px rgba(0, 0, 0, 0.2);}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 39;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {display: block; opacity: 0.8;}

#drawer-checkbox {display: none;}
#drawer-icon {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  position: fixed;
  width: 50px;
  right: 20px;
  top: 20px;
  z-index: 100;	
}

#drawer-icon span {
  background: white;
  display: block;
  height: 2px;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 46%;
  transition: all 0.3s ease-in-out 0s;
  width: 84%;
}
#drawer-icon span::before,
#drawer-icon span::after {
  background: white;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -50%;
  position: absolute;
  top: 50%;
  transform: rotate(0);
  transition: all 0.3s ease-in-out;
  width: 100%;
}
#drawer-icon span::before {margin-top: -13px;}
#drawer-icon span::after {margin-top: 10px;}
#drawer-checkbox:checked ~ #drawer-icon span {background: rgba(51, 51, 51, 0);}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  margin: -8% 0 0 -42%;
  position: absolute;
  top: 50%;
  width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {transform: rotate(-45deg);}
#drawer-checkbox:checked ~ #drawer-icon span::after {transform: rotate(45deg);}

/* GTranslate Google 翻訳 */
#drawer-content .gtranslate_wrapper {position: absolute; top: 20px; right: 80px;}
#drawer-content .gtranslate_wrapper a {color: var(--main_color)}
#drawer-content .gt_float_switcher .gt-selected {background: #909090}
#drawer-content .gt_options {background: #b2b2b2}



/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（639px 以下） */
@media screen and (max-width: 639px) {
  .no_br_sp br {display: none !important}
  br.sp_non {display: none}
  table tr th, table tr td {padding: 0.4em 0.8em; font-size: 1.2rem}

  #drawer-content {width: 100vw; min-width: 100vw;}
  #drawer-content .site_nav li {margin-bottom: 10%}
  .in_site_link {text-align: center; margin-top: 30px}
  .in_site_link a {margin-left: -20px}

  header {
    .site_title {width: 40px}  
  }

  #drawer-icon {top: 16px; right: 16px}

  .home {
    #hero { background: var(--main_color) url(img/home/hero_bg_sp.jpg); background-size: cover; background-position: 50% 50%; margin-bottom: 30px}
    #hero h2 img {max-width: 200px}
    #main .each {margin-bottom: 60px}
    #main .each h2.h_title {text-align: center !important; margin-bottom: 20px}
    #lead .detail {order: 2}
    #lead .figure {order: 1}
    #target .detail .in_site_link {margin-top: 30px}
    #slider {margin-bottom: 80px}
    #about .detail {order: 2; padding-top: 180px; background-position: top center; margin-top: 0}
    #about .figure {order: 1; margin: 0 calc(50% - 50vw);}
    #plan .figure {margin: 0 calc(50% - 50vw);}
  }

  #title_head {
    margin-bottom: 60px;
    h2 {font-size: 2.4rem; padding: 90px 0 30px}
  }

  .page #main {
    margin-bottom: 80px;
    h2.h_title {margin-bottom: 20px}
    hgroup {margin-bottom: 20px}
  }

  .page-id-18 {
    .interval_figure img {width: 100%; aspect-ratio: 1/1; object-fit: cover;}
    #streams {margin-bottom: 0}
    #streams .wrap {display: grid; grid-template-columns: 1fr;}
    #streams .wrap .text {order: 2}
    #streams .wrap .swiper-streams {order: 1; margin-bottom: 30px}
    #streams .swiper-button-next, #streams .swiper-button-prev {width: 40px; height: 40px; position: top: 60%}
    #streams .swiper-button-prev::after {background: url(img/page/slider_prev.svg) no-repeat; background-size: 40px; width: 40px; height: 40px;}
    #streams .swiper-button-next::after {background: url(img/page/slider_next.svg) no-repeat; background-size: 40px; width: 40px; height: 40px;}
    #target {margin-bottom: 50px}
    #target dl {position: relative}
    #target dd {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
    #target dd h2 {color: white; width: 100%; font-size: 2.2rem; text-align: center; margin-bottom: 10px !important}
    #target dd p {margin-top: 0}
    #target dd p a {color: white; margin-left: 0}
    #target dd p a.move_arrow_btn span {background: url(img/common/bg_arrow_wh.svg) no-repeat left top;}
    #regulations {background: #e6e6e6; padding: 80px 0}
    #regulations h2.h_title {margin-bottom: 50px}
    #highlights {margin-bottom: 60px}
    #highlights .wrap {gap: 20px 10px}
    #highlights .wrap dd {font-size: 1rem}
    #access .inner {padding: 0}
  }

  .page-id-20 {
    #two {margin-bottom: 60px}
    #two .note {text-align: left}
    #yamame {margin-bottom: 60px}
    #yamame .figure {margin: 0 calc(50% - 50vw); margin-bottom: 10px}
    #yamame ul {gap: 2px}
    #iwana {margin-bottom: 60px}
    #iwana .figure {margin: 0 calc(50% - 50vw); margin-bottom: 10px}
    #iwana ul {gap: 2px}
  }

  .page-id-22 {
    #title_head h2 {margin-left: -30px}
    #size .figure_main {margin: 0 calc(50% - 50vw); margin-bottom: 10px}
  }

  .page-id-24 {
    .each hgroup p {font-size: 1.6rem}
    #plan_01 {margin-bottom: 80px}
  }

  .page-id-26 {
    #movie .each {margin-bottom: 40px}
    #movie .each h2.h_title {font-size: 1.8rem; margin-bottom: 20px}
    #movie .each .thumb_wrap .movie_mark {width: 80px; height: 80px}
  }

  .page-id-30 {
    #lead p {text-align: left}
    #form_wrap .smf-item {grid-template-columns: 1fr;}
  }

  .page-id-32 {
    #lead p {text-align: left}
    #form_wrap .smf-item {grid-template-columns: 1fr;}
  }

  footer {
    .inner {padding: 0}
    h2 {max-width: 240px; margin: auto auto 40px}
    .site_nav ul {gap:0}
    .site_nav li {width: 100%; text-align: center; border-bottom: 1px solid var(--main_color);}
    .site_nav li:nth-of-type(2) {border-top: 1px solid var(--main_color);}
    .site_nav li a {display: block; padding: 16px 0}
  }
}


/* スマホ〜タブレット共通（1023px 以下） */
@media screen and (max-width: 1023px) {
  .no_br br {display: none !important}
}


/* スマホ「横」向き対応 */
@media screen and (max-width: 940px) and (orientation:landscape) {
  .sample {}
}


/* スマホ以降（375px 以下）iPhone SE */
@media screen and (max-width: 375px) {
  .inner {padding: 0 10px}
}


/* スマホ以降（320px 以下）旧 iPhone SE */
@media screen and (max-width: 320px) {
  .sample {}
}


/* スマホ以降（321px 以降） */
@media screen and (min-width: 321px) {
  .sample {}
}


/* タブレット対応 */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  .no_br_tb br {display: none !important}
  br.tb_non {display: none}
  #drawer-content {width: 50vw; min-width: 50vw;}
  .home #main h2.h_title {margin-bottom: 20px} 
  .home #target .detail .in_site_link {margin-top: 0}
  .home #about .detail {background: url(img/home/about_bg.svg) no-repeat right top; background-size: 80px; }
  .page-id-18 #target dl {grid-template-columns: 1fr 1fr; gap:30px}
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .gtranslate_wrapper {top: 112px} /* ログイン時のアドミンバー対応（GTranslate） */
}


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  .no_br_pc br { display: none}
  br.pc_non {display: none} 
  .mw_wp_form .no_requir dt {padding-left: 42px}
}


/* PCモニター（1025px以降） */
@media screen and (min-width: 1025px) {
  .sample {}
}


/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  .sample {}
}


/* PCモニター大（1480px以降） */
@media screen and (min-width: 1480px) {
  .sample {}
}