@charset "UTF-8";

/*
Theme Name: すんぷちょ
Theme URI: https://sun-pucho.com/
Description: すんぷちょ WordPress Theme
Author: すんぷちょ
Version: 2025_09
Tested up to: 6.8
Requires PHP: 8.1.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: #408B20;
  --main_lite_color: #AFFF00;
  --sub_color: #FF3E4C;
  --bg_color: #FAFAF0;
  --fes_2021: #1A499D;
  --fes_2022: #B6CD48;
  --fes_2023: #E94A8D;
  --fes_2024: #65C3EF;
  --fes_2025: #E84995;
}

/* スクリーンリーダー対応 */
.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;}


/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */
#main {
width: 100%; background: white;
position: relative; z-index: 10; /* #slideの sticky を解除する場合は行を削除 */
img {border-radius: 10px;}
} /* #main */

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

/* ヘッダーまわり */
header {
  position: sticky; top:0; width: 100%; z-index: 100; background: rgba(255, 255, 255, 0.95);
  .inner {width: min(100%); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 10px 20px; align-items: center;}
  .site_title {line-height: 1; max-width: 138px}
  .site_nav_pc {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 30px; align-items: center}
  .site_nav_pc #menu-sunpucho {display: flex; justify-content: flex-end; gap: 10px 30px}
  .site_nav_pc .sns {display: flex; justify-content: flex-end; gap: 10px 15px}
  
  /* current（投稿ページにcurrentには、utility.js にて current-menu-item 付与を指定） */
  .current-menu-item a,
  .current-page-ancestor a {color: var(--main_color); position: relative; padding-bottom: 4px}
  .current-menu-item a::after,
  .current-page-ancestor a::after {content: "●"; position: absolute; bottom: -16px; left: 42%; font-size: 1.4rem}
  
  /* current 以外の設定 WordPress のメニュー名を入れる */
  #menu-sunpucho li { position: relative}
  #menu-sunpucho li:not(.current-menu-item) a::after {position: absolute; bottom: -1px; left: 0; content: ''; width: 100%; height: 2px; background: var(--main_color);transform: scale(0, 1); transform-origin: center top; transition: transform .3s;}
  #menu-sunpucho li:not(.current-menu-item) a:hover::after {transform: scale(1, 1);}
} /* header */

/* NEW マーク */
.new_mark {width: 50px; height: 50px; background: url(img/common/bg_new.svg) no-repeat;} 

/* 一覧のスタイル：ブロック */
.post_line {
  margin-bottom: 120px;
  .inner {width: min(1580px, 100%); }
  .post_line_wrap {gap: 80px 40px}
  article {position: relative; }
  article a {background: url(img/post/article_bg.svg) repeat-x center bottom; padding-bottom: 20px; display: block}
  article dt {text-align: center; margin-bottom: 15px}
  article dt img {width: 100%; aspect-ratio: 15/8; object-fit: cover;}
  article dd.date { font-size: 1.4rem; margin-bottom: 10px}
  article dd h3 {font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 15px} /* 2行目以降は「…」で省略 親の定義 */
  article dd.category_list ul {gap: 5px 10px}
  article dd.category_list li {pointer-events:none; font-size: 1rem; border-radius: 50px; border: 1px solid var(--main_lite_color); padding: 3px 14px}
  article .new_mark {position: absolute; top: -15px; right: -15px;} /* NEW マーク位置調整 */
} /* .post_line */

/* 一覧のスタイル：水平 */
.post_line_horizontal {
  .inner {width: min(1280px, 100%)}
  article a {display: block; border-bottom: 1px dotted #e2e2e2; padding: 20px 0 15px}
  article a:hover {background: var(--bg_color)}
  article dl {display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px 30px}
  article dd h3 {font-weight: 400; line-height: 1.4; font-size: 1.6rem}
} /* .post_line_horizontal */

/* 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(--bg_color);}
#loading_logo {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#loading_logo img {max-width: 240px}
.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);}
}

/* タイトル */
.h_title {border-left: 3px solid var(--main_lite_color); padding-left: 20px; word-break: auto-phrase; letter-spacing: .1em; margin-bottom: 20px; font-size: clamp(2.1rem, 1.641rem + 1.96vw, 3.6rem); line-height: 1.4}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
  
  #slide {
    background: linear-gradient(180deg,white 0%,white 7%, var(--main_color) 7%,var(--main_color) 100%);
    position: sticky; top: 0; /* sticky を解除する場合は行を削除（#main の2行も削除する） */
    .inner {width: min(100%); padding: 0}
    .swiper-hero {overflow: hidden; position: relative}
    .swiper-slide {text-align: right}
    .swiper-slide a {}
    .swiper-slide a h3 {position: relative; display: inline-block; padding: 16px 80px 16px 50px; border: 3px solid white; color: white; transition: all 0.3s ease; background: var(--main_color);  border-radius:50px; font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem); line-height: 1.2; z-index: 10; bottom: 75px;}
    .swiper-slide a h3 span {position: absolute; top: 28%; right: 40px; transition: transform 0.3s ease; background: url(img/common/bg_arrow.svg) no-repeat center center; width: 30px; height: 23px;}
    .swiper-slide img {width: 100%; aspect-ratio: 15/8; object-fit: cover; transition: transform 0.3s, filter 0.3s; border-radius: 10px;} 
    .swiper-slide img:hover {transform: scale(1.02);}
    .swiper-pagination {bottom: 18px!important}
    .swiper-pagination-bullet { opacity: 1; background: white; }
    .swiper-pagination-bullet-active { background: var(--main_lite_color); opacity: 1}
    .swiper-button-prev:after, .swiper-button-next:after { color: var(--main_color)}
  } /* #slide */
  
  #appeal {
    .inner {width: min(840px, 100%); }
    background: var(--bg_color); padding: 50px 0;
    ul li:not(:last-child) { margin-bottom: 20px}
    .zoom_ex img {transition: transform 0.5s, filter 0.5s;} /* 画像の枠を外れて拡大 */
    .zoom_ex:hover img {transform: scale(1.02);}
  } /* #appeal */
  
  #news {
    padding-top: 100px; margin-bottom: 160px;
    .inner {margin-bottom: 60px}
    .h_title_deco {line-height: 1;display: flex; align-items: center; background: url(img/common/wave_line.svg) repeat-x center center; margin-bottom: 30px}
    .h_title_deco::before {content: url(img/home/news_title_bg.svg); background: white}
    .h_title_deco span {background: white; padding: 0 15px 0 10px}
  } /* #news */

  #fes {
    padding-left: 5%; margin-bottom: 100px;
   .inner {width:100%; padding: 80px 60px; border-radius: 60px 0 0 60px; background: var(--bg_color);}
    .h_title_deco {line-height: 1;display: flex; align-items: center; background: url(img/common/wave_line.svg) repeat-x center center; margin-bottom: 30px}
    .h_title_deco::before {content: url(img/home/fes_title_bg.svg); background: var(--bg_color)}
    .h_title_deco span {background: var(--bg_color); padding: 0 15px 0 10px}
    .latest dl {background: white; gap:0; align-items: center}
    .latest dd {padding: 50px}
    .latest .sub {font-size: 1.4rem; margin-bottom: 10px}
    .latest .title {font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem); margin-bottom: 10px; color: var(--fes_2025)}
    .latest .statement {font-size: 1.6rem; line-height: 1.8}
    .latest .in_site_link {text-align: right; margin-top: -36px; padding-right: 13%}
    .past h3 {margin-bottom: 20px}
    .past .wrap {gap:30px}
    .past dt {margin-bottom: 10px}
    .past dd {font-size: clamp(1rem, 0.878rem + 0.52vw, 1.4rem); letter-spacing: .1em; text-align: center}
  } /* #fes */

  #chachacha {
    padding-bottom: 60px;
    .inner {width: min(1060px, 100%); }
    .wrap {display: grid; grid-template-columns: 1fr 1fr; gap: 20px 60px; align-items: flex-start; position: relative; padding: 50px 0 80px 60px;}
    .wrap .figure img {box-shadow: 15px 15px 0 var(--main_lite_color)}
    .wrap::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 100%;
      background-color: var(--main_color); /* 疑似要素の背景色 */
      border-radius: 30px;      /* 疑似要素の角を丸くする */
      z-index: -1;              /* 親要素の下に配置 */
    }
    .in_site_link {text-align: right; margin-top: -82px; margin-bottom: 20px}
    .detail {padding-left: 50px; font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem)}
  } /* #chachacha */

} /* home */



/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  h2 a {pointer-events:none;}
  .appeal {display: grid; grid-template-columns: 1fr 1fr; gap: 0 100px; align-items: center; background: url(img/page/appeal_vertical_line.svg) no-repeat center center;}
  .appeal dt img {overflow: hidden; border-radius: 50%; border: 12px solid var(--main_lite_color);}
  .appeal dd {background: white; border-radius: 30px; padding: 50px; box-shadow: 15px 15px 0 var(--main_lite_color);}
  .appeal dd hgroup p {font-size: clamp(1.6rem, 1.447rem + 0.65vw, 2.1rem); text-transform: uppercase; color: var(--main_color); margin-bottom: 10px; padding-left: 10px}
  .appeal dd hgroup h2 {font-size: clamp(2.4rem, 2.033rem + 1.57vw, 3.6rem); color: white; background: var(--main_color); box-shadow: 10px 10px 0 var(--main_lite_color); display: inline-block; border-radius: 50px; padding: 6px 30px; margin-bottom: 28px}
  .appeal dd hgroup h2 span {font-size: clamp(1.4rem, 1.186rem + 0.91vw, 2.1rem)}
  .appeal dd .detail {margin-bottom: 0; line-height: 2}
} /* #title_head */



/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* すんぷちょとは */
.page-id-2 {
  #title_head {
    background: var(--bg_color) url(img/page/appeal_title_head_bg.svg); background-size: cover; background-position: 50% 50%; padding: 50px 0; margin-bottom: 80px;
    .inner {width: min(1240px, 100%); }
  }

  #content {
    .inner {width: min(1120px, 100%) !important}
    .each_wrap {margin-bottom: 80px; background: var(--bg_color); border-radius: 30px; padding: 60px}
    #philosophy h2 {margin-bottom: 10px}
    #philosophy p {font-size: clamp(1.8rem, 0.943rem + 3.66vw, 4.6rem); text-align: center; margin-bottom: 0; line-height: 1.4}
    #activities .wp-block-group {margin-bottom: 50px}
    #activities h3 {line-height: 1.2;display: flex; align-items: center; gap: 8px;}
    #activities h3::before {font-size: 2rem; content: "●";}
    #summary table tr td:first-child {width: 18%}
    #history table tr td:first-child {width: 15%}
    table tbody tr:first-child {border-top: 1px solid #cdcdcd;}
    table tbody tr:nth-child(even) {border-bottom: 0; background: rgba(255, 255, 255, 0.6)}
  }
} /* すんぷちょとは */


/* スタジオちゃちゃちゃ */
.page-id-2726 {
#title_head {
 background: linear-gradient(180deg,white 0%,white 10%, var(--bg_color) 10%,var(--bg_color) 100%); padding-bottom:50px; margin-bottom: 100px;
  .inner {width: min(1240px, 100%); }
    dl {display: grid; grid-template-columns: 1fr 1fr; gap: 30px 60px; align-items: center; position: relative; padding: 100px 0 50px 100px; }
    dt {order: 2; z-index: 2}
    dt img {box-shadow: 15px 15px 0 var(--main_lite_color); border-radius: 10px;}
    dd {order: 1; z-index: 3}
    dd h2 {margin-bottom: 40px}
    dd p {color: white; font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem); margin-bottom: 0}
    dl::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 100%;
      background-color: var(--main_color); /* 疑似要素の背景色 */
      border-radius: 30px;      /* 疑似要素の角を丸くする */
      z-index: 0;              /* 親要素の下に配置 */
    }
  }

#content {
  .inner {width: min(1000px, 100%) !important}
  .each_wrap {margin-bottom: 120px}
  #program figure {margin-bottom: 10px}
  #mission li {font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem)}
  #application .wp-block-group {margin-bottom: 40px}
  #fee .note {margin-bottom: 50px}
  #fee ul {margin-bottom: 0}
  #caution h3 {line-height: 1.2;display: flex; align-items: center; gap: 8px;}
  #caution h3::before {font-size: 2rem; content: "●";}
  #caution .wp-block-group {margin-bottom: 40px}
  
  }
} /* スタジオちゃちゃちゃ */


/* 応援する */
.page-id-2728 {
  #title_head {
    background: var(--bg_color) url(img/page/appeal_title_head_bg.svg); background-size: cover; background-position: 50% 50%; padding: 50px 0; margin-bottom: 80px;
    .inner {width: min(1460px, 100%); }
  }

  #content {
    .inner {width: min(1000px, 100%) !important}
    .each_wrap {margin-bottom: 120px}
    #support .official_friends p {margin-bottom: 20px}
    #support .to_form {font-size: 1.8rem}
    #support .transfer {font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem)}
    #support .bank li:after {margin-bottom: .8em}
  }
} /* 応援する */


/* フラット♭シアターフェス 一覧 */
.page-id-2731 {
  #title_head {display: none}
  #main {background: var(--bg_color); margin-bottom: 10px}

  #latest {
    padding-top: 60px; margin-bottom: 80px;
    dt {margin-bottom: 10px}
    dd {text-align: center}
  }
  
  .post_line_wrap {
    gap: 40px;
    dt {margin-bottom: 10px}
    dd {text-align: center}
  }

  .dropmenu {
   li.menu-item-has-children::before {color: var(--main_color)}
   li ul li a {color: #222222}
  }
} /* フラット♭シアターフェス 一覧 */


/* フェス 最新 */
.page-id-2806 {
  .h_title {border-color: var(--fes_2025)}

  #title_head {display: none}
  #lead {
    background: linear-gradient(180deg,white 0%,white 10%, var(--bg_color) 10%,var(--bg_color) 100%); padding-bottom: 30px; text-align: center; margin-bottom: 80px;
    .inner {width: min(1240px, 100%); }
    h2 {font-size: clamp(2.1rem, 2.008rem + 0.39vw, 2.4rem); text-align: center; background: white; padding: 10px 36px; color: var(--fes_2025); display: inline-block; border-radius: 50px; line-height: 1.4}
  }

  #news {
    margin-bottom: 80px;
    .inner {width: min(820px, 100%); }
    .h_title {line-height: 1.2}
    .h_title span {font-size: 1.4rem; letter-spacing: .04em; line-height: 1.2}
  }

  #anchor_link {
    margin-bottom: 50px;
    .inner {width: min(880px, 100%); background: #fff url(img/page/fes_2025_line_wave.svg) repeat-x center bottom; padding-bottom: 40px}
    ul {display: flex; justify-content: center; flex-wrap: wrap; gap:10px 40px}
    li {font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem)}
    li a {line-height: 1;display: flex; align-items: center; gap: 6px;}
    li a:hover {color: var(--fes_2025)}
    li a::before {content: url(img/page/fes_2025_arrow.svg);}
  }

  #summary {
    background: var(--bg_color); padding: 60px 0; margin-bottom: 120px;
    .inner {width: min(1000px, 100%); background: white; border-radius: 30px; padding: 50px 60px 80px}
    hgroup p {margin-bottom: 6px; text-align: center}
    hgroup h2 {text-align: center; color: var(--fes_2025); text-align: center; margin-bottom: 10px; font-size: clamp(2.4rem, 2.278rem + 0.52vw, 2.8rem)}
    .flyer {margin-bottom: 40px}
    .flyer li {margin-bottom: 30px}
    .dl {text-align: center; margin-bottom: 50px;}
    .dl a {padding: 16px 40px; background: var(--fes_2025); color: white; border-radius: 50px; display: inline-block}
    .dl a:hover {opacity: .8}
    .statement {text-align: center; margin-bottom: 50px; line-height: 2}
    .date_place {gap: 40px;}
    .date_place dt {font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem); border-bottom: 1px solid silver; margin-bottom: 10px; padding-bottom: 6px}
    .date_place .date dd {font-size: 2.4rem}
    .date_place .date dd span {font-size: 1.6rem}
    .date_place .place a {color: var(--fes_2025); text-decoration: underline}
    .zoom_ex {position: relative; }
    .zoom_ex::after {z-index: 10; content: url(img/page/mark_expansion.svg); position: absolute; bottom: 5px; right: 10px;}
  }

  #schedule {
    margin-bottom: 120px;
    .inner {width: min(1000px, 100%); }
    .figure {text-align: right; line-height: 2.4}
    .list {background: var(--bg_color); padding: 40px; gap: 40px; border-radius: 30px;}
    .list h3 {border-radius: 50px; border: 3px solid silver; padding: 4px 20px; font-size: clamp(2.1rem, 1.886rem + 0.91vw, 2.8rem); max-width: 280px; margin: auto auto 20px; text-align: center; letter-spacing: .12em; background: white}
    .list dl {display: flex; gap:20px; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dotted silver;}
    .list dt {background: silver; border-radius: 50px; color: white; font-size: 2rem; padding: 3px 16px; text-transform: uppercase}
    .list dd li {text-align: left}
    .list .date_0913 h3 {color: #FD605A; border-color: #FD605A}
    .list .date_0913 dt {background: #FD605A}
    .list .date_0914 h3 {color: #782F9E; border-color: #782F9E}
    .list .date_0914 dt {background: #782F9E}
  }

  #artist {
    margin-bottom: 160px;
    .inner {width: min(1580px, 100%); }
    article a {background: url(img/post/article_bg_fes2025.svg) repeat-x center bottom;}
    article .title {margin-bottom: 20px}
    article .date_place {display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 10px}
    article .date_place li {padding: 2px 21px; font-size: clamp(1.6rem, 1.447rem + 0.65vw, 2.1rem); border: 3px solid silver; border-radius: 50px;}
    article .date_place .date_01 {border-color: #FD605A; color: #FD605A}
    article .date_place .date_02 {border-color: #782F9E; color: #782F9E}
  }

  #caution {
    margin-bottom: 120px;
    .wrap {gap: 30px 20px}
    .wrap dt {margin-bottom: 10px}
    .wrap dd {text-align: center}
    .wrap dd span {font-size: 1.2rem}
  }

  #ticket {
    table tbody tr:first-of-type {background: var(--bg_color);}
    table tbody tr:first-of-type td {text-align: center; padding: 10px}
  }

  #detail {
    .wp-block-columns {margin-bottom: 50px}
  }

  #content .inner {width: min(1000px, 100%) !important; }
  #content .each_wrap {margin-bottom: 80px}
  #content #detail .wp-block-group {margin-bottom: 50px}
} /* フェス 最新 */


/* フェス 過去 共通 */
.parent-pageid-2731{
  .dropmenu {
    li.menu-item-has-children::before {color: var(--main_color)}
    li ul li a {color: #222222}
  }

  #title_head {
    background: var(--bg_color); padding: 40px 0; margin-bottom: 80px;
    .inner {width: min(960px, 100%); }
    h2 {text-align: center; font-size: clamp(1.6rem, 1.355rem + 1.04vw, 2.4rem); margin-bottom: 0; line-height: 1.4}
    h2 span {background: white; border-radius: 50px; padding: 10px 30px; display: inline-block}
  }

  .entry_content {
    h2 {font-size: clamp(2.1rem, 1.947rem + 0.65vw, 2.6rem)!important}
    .wp-block-group {margin-bottom: 70px}
    .wp-block-buttons {margin-bottom: 30px}
  }

  #artist {
    background: var(--bg_color); padding: 60px 0; 
    .inner {width: min(1180px, 100%); }
    h2 {font-size: clamp(2.1rem, 1.947rem + 0.65vw, 2.6rem); border-left: 3px solid silver; padding-left: 20px; line-height: 1.6; word-break: auto-phrase; letter-spacing: .1em; margin-bottom: 40px}
  }

  #news {
    margin-bottom: 120px;
    .inner {width: min(780px, 100%); }
    h2 {font-size: clamp(2.1rem, 1.947rem + 0.65vw, 2.6rem); border-left: 3px solid silver; padding-left: 20px; line-height: 1.2; word-break: auto-phrase; letter-spacing: .1em; margin-bottom: 20px}
    h2 span {font-size: 1.4rem; letter-spacing: .04em}
  }
} /* フェス 過去 共通*/

/* フェス 過去 個別 */
/* vol.0 2021 */
.page-id-3232 #title_head {background: var(--fes_2021)}
.page-id-3232 .entry_content h2 {border-color: var(--fes_2021) !important}
.page-id-3232 .wp-block-button a {background: var(--fes_2021) !important} 
.page-id-3232 #artist h2 {border-color: var(--fes_2021)} 
.page-id-3232 #artist article a {background: url(img/post/article_bg_fes2021.svg) repeat-x center bottom;}
.page-id-3232 #news h2 {border-color: var(--fes_2021)} 

/* vol.1 2022 */
.page-id-3023 #title_head {background: var(--fes_2022)}
.page-id-3023 .entry_content h2 {border-color: var(--fes_2022) !important}
.page-id-3023 .wp-block-button a {background: var(--fes_2022) !important} 
.page-id-3023 #artist h2 {border-color: var(--fes_2022)} 
.page-id-3023 #artist article a {background: url(img/post/article_bg_fes2022.svg) repeat-x center bottom;}
.page-id-3023 #news h2 {border-color: var(--fes_2022)} 

/* vol.2 2023 */
.page-id-3025 #title_head {background: var(--fes_2023)}
.page-id-3025 .entry_content h2 {border-color: var(--fes_2023) !important} 
.page-id-3025 .wp-block-button a {background: var(--fes_2023) !important} 
.page-id-3025 #artist h2 {border-color: var(--fes_2023)} 
.page-id-3025 #artist article a {background: url(img/post/article_bg_fes2023.svg) repeat-x center bottom;}
.page-id-3025 #news h2 {border-color: var(--fes_2023)}

/* vol.3 2024 */
.page-id-3021 #title_head {background: var(--fes_2024)}
.page-id-3021 .entry_content h2 {border-color: var(--fes_2024) !important} 
.page-id-3021 .wp-block-button a {background: var(--fes_2024) !important} 
.page-id-3021 #artist h2 {border-color: var(--fes_2024)} 
.page-id-3021 #artist article a {background: url(img/post/article_bg_fes2024.svg) repeat-x center bottom;}
.page-id-3021 #news h2 {border-color: var(--fes_2024)} 
/* フェス 過去 個別 */


/* お問い合わせ */
.page-id-2733 {
  #title_head {display: none}
  #content {background: var(--bg_color); padding: 60px 0 100px; margin-bottom: 10px}
  #content .inner {width: min(860px, 100%) !important}
  .entry_content {background: white; border-radius: 30px; padding: 60px !important}
  #contact figure {margin-bottom: 15px}
} /* お問い合わせ */



/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
.page-id-2735, .archive, .category {
  #title_head {
    padding: 80px 0 80px;
    .inner {width: min(1360px, 100%); }
    h2 {background: #fff url(img/common/wave_line.svg) repeat-x center bottom; padding-bottom: 16px; font-size: clamp(2.4rem, 2.033rem + 1.57vw, 3.6rem)}
  }
} /* .page-id-2735, .archive, .category */

.category #title_head {
  h2 {display: flex; gap: 6px 10px; align-items: center; padding-bottom: 16px; flex-wrap: wrap; font-size: clamp(1.8rem, 1.371rem + 1.83vw, 3.2rem);}
  h2 span:nth-of-type(1) {font-size: 1.4rem; background: var(--main_color); color: white; border-radius: 10px; padding: 6px 16px}
}

/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center; margin-bottom: 100px;
  a {background:#f2f2f2 ; color: #7f7f7f;}
  span.current {font-weight: bold; color :#ffffff; background: var(--main_color); border: none;}
  span.pages {display: none !important}
} /* .wp-pagenavi */

#main .wp-pagenavi a, #main .wp-pagenavi span {
  border: none;
  font-size: clamp(1.5rem, 1.425rem + 0.38vw, 1.8rem);
  padding: .8em 1.3em;
  margin: 5px;
  border-radius: 70px; /* 正方形にする場合はここを削除 */
  transition: all .3s ease;
  display: inline-block
} /* #main .wp-pagenavi a */

#main .wp-pagenavi a:hover {background: var(--main_color); color: white;}



/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single-post, .page {
  #content .inner {width: min(780px, 100%)}
  
  .entry_content {
    padding-bottom: 100px; word-wrap: break-word; /* 折り返し解除 */
    h2 {border-left: 3px solid var(--main_lite_color); padding-left:20px; line-height: 1.6; word-break: auto-phrase; letter-spacing: .1em; line-height: 1.2}
    h3 {font-size: clamp(1.8rem, 1.725rem + 0.38vw, 2.1rem); margin-bottom: 16px; padding-bottom: 6px; border-bottom: 2px solid silver; letter-spacing: .1em}
    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(--sub_color); text-decoration: underline;}
    ul {margin-bottom: 30px}
    strong {color: var(--main_color)}
    .wp-block-file a {text-decoration: underline}
    .wp-block-file a:last-child {display: none}
    .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:40px}
    .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; background: var(--main_color); text-decoration: none;  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}
    
    .zoom_ex {position: relative; }
    .zoom_ex::after {z-index: 10; content: url(img/page/mark_expansion.svg); position: absolute; bottom: 5px; right: 10px;}
  } /* .entry_content */
} /* .single-post, .page */

.single-post {
  #title_head {display: none}
  .entry_title {line-height: 1.4; font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem); background: url(img/common/wave_line.svg) repeat-x center bottom; padding-bottom: 20px; margin-bottom: 15px}
  .category_list {
    margin-bottom: 30px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px 10px;
    li a {font-size: 1rem; border-radius: 50px; border: 1px solid var(--main_lite_color); padding: 5px 14px}
    li a:hover {background: var(--main_color); color: white; border-color: var(--main_color)}
  }
  #content {background: var(--bg_color); padding: 60px 0 80px; margin-bottom: 30px}
  #content .inner {width: min(860px, 100%); background: white; border-radius: 30px; padding: 60px; border: 6px solid var(--main_color);}
  .entry_content {
    padding-bottom: 0;
    h2 {font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem); margin-bottom: 20px;}
    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;}
  }
}

.page {
  .entry_content {
    h2 {font-size: clamp(2.4rem, 2.033rem + 1.57vw, 3.6rem);  margin-bottom: 30px;}
  }
}


/* カテゴリーリンク（Archive single） */
.cat_list {
  margin-bottom: 60px;
  .inner {width: min(1360px, 100%); }
  ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 15px; }
  li {text-align: center}
  li a {font-size: clamp(1rem, 0.939rem + 0.26vw, 1.2rem); border-radius: 50px; border: 1px solid var(--main_lite_color); padding: 5px 14px}
  li a:hover {background: var(--main_color); color: white; border-color: var(--main_color)}
  ul ul {margin-top: 8px}
}

/* ページナビゲーション */
.single #single_page_nav {
  .inner {width: min(900px, 100%)}
  margin-bottom: 50px;
  ul {gap:20px;}
  li a {font-size: clamp(1.2rem, 1.15rem + 0.25vw, 1.4rem); display: inline-block; border: 2px solid var(--main_color); border-radius: 50px;}
  #previous a {background: white url(img/post/arrow_previous.svg) left 16px top 50% no-repeat; padding: 12px 20px 12px 44px; }
  #next a {background: white url(img/post/arrow_next.svg) right 16px top 50% no-repeat; padding: 12px 44px 12px 20px;}
  #next {text-align: right}

  #previous a:hover {background: var(--main_lite_color) url(img/post/arrow_previous.svg) left 10px top 50% no-repeat;}
  #next a:hover {background: var(--main_lite_color) url(img/post/arrow_next.svg) right 10px top 50% no-repeat;}
} /* .single #single_page_nav */



/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: var(--main_color); background-size: cover; background-position: 50% 50%; min-height: 50vh; display: grid; place-items: center;}
  #main dt {color: white; font-size: clamp(2.7rem, 2.25rem + 2.25vw, 4.5rem); text-align: center}
  #main dd {color: white; font-size: clamp(1.2rem, 1rem + 1vw, 2rem); text-align: center}
} /* error404 */


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  width: 100%; padding: 30px 0 20px; background: var(--bg_color); z-index: 100; position: relative;
  .inner {width: min(1280px, 100%); }
  .info {margin-bottom: 32px; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 20px; align-items: center}
  .info dt {max-width: 230px}
  nav {margin-bottom: 36px}
  nav ul {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px 30px;}
  nav ul a {border: 1px solid var(--main_lite_color); background: white; border-radius: 50px; padding: 10px 26px;}
  nav ul a:hover {background: var(--main_color); color: white; border-color: var(--main_color)}
  nav ul .sub-menu {display: none}

  .sns {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 30px} 
  .sns li img {transition: transform 0.3s, filter 0.3s;}
  .sns li img:hover {transform: scale(1.15);}

  .copy {text-align: center; margin-bottom: 0}
  .copy small {font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); }
} /* footer */

/* ページトップへ */
p.pagetop {
  position: fixed; bottom: 20px; right: 20px; opacity: 0; transform: scale(1.5); transition: all .5s; text-align: right; width: auto; z-index: 10;
  a {display: block}
  a:hover { transform: scale(1.2)}
  &.show {opacity: 1; transform: scale(1);}
} /* p.pagetop */


/*---------------------------------------------------------------------
 css hack
---------------------------------------------------------------------*/
/* Edge */
@supports (-ms-ime-align: auto) {
  .sample {}
}

/* Firefox */
@-moz-document url-prefix() {
  .sample {}
}

/* Safari */
::-webkit-full-page-media, :future, :root .class_name {
  .sample {}
}


/*---------------------------------------------------------------------
 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
---------------------------------------------------------------------*/
/* プルダウンメニュー */
.dropmenu {
  li {position: relative;}
  li a {display: block;}
  li ul {position: absolute; z-index: 50; top: 103%; left: 0; width: 100%}
  li ul li {overflow: hidden; height: 0; transition: .2s;}
  li ul li a {padding: 12px 16px; background: var(--bg_color); text-align: center; width: 100%; font-size: 1.2rem; border-bottom: 1px dotted var(--main_color);}
  > li:hover > a {}
  > li:hover li:hover > a {background: var(--main_color); color: white;}
  > li:hover > ul > li {overflow: visible; height: auto;}
  > li.menu-item-has-children {position: relative; padding-left: 18px; }/* 1階層目で子アリに▼を表示 */
  > li.menu-item-has-children::before {content:url(img/common/header_arror.svg); font-size: 1rem; position: absolute; left: 2px; top: 40%; transform: translateY(-50%) scale(1.5, 1);}
  li ul li ul {top: 0; left: 100%;}
  li:last-child ul li ul {left: -100%; width: 100%;}
  li ul li ul:before {position: absolute; content: ""; top: 15px; left: -20px; border: 5px solid transparent; border-left-color: #454e08;}
  li:last-child ul li ul:before {position: absolute; content: ""; top: 15px; left: 200%; margin-left: -20px; border: 5px solid transparent; border-right-color: #454e08;}
  li ul li:hover > ul > li {overflow: visible; height: 50px}
  li ul li ul li a {background: #616d0b}
  li:hover ul li ul li a:hover {background: glay}
  .sub-menu .current-menu-item a:after {content:''}
} /* .dropmenu */

/* ハンバーガーメニュー */
.button_container {position: fixed; top: 18px; right: 18px; height: 27px; width: 35px; cursor: pointer; z-index: 200;}
.button_container:after {content: ""; position: absolute; top: -18px; right: -18px; z-index: -1; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.5);}
.button_container:hover {opacity: .8;}
.button_container.active .top {transform: translateY(13px) translateX(0) rotate(45deg); background: var(--main_color); z-index: 200}
.button_container.active .middle {opacity: 0; background: var(--main_color);}
.button_container.active .bottom {transform: translateY(-13px) translateX(0) rotate(-45deg); background: var(--main_color); z-index: 200}
.button_container span {background: var(--main_color); border: none; height: 3px; width: 100%; position: absolute; top: 0; left: 0; transition: all .35s ease; cursor: pointer;}
.button_container span:nth-of-type(2) {top: 13px;}
.button_container span:nth-of-type(3) {top: 26px;}

/* メニュー内 */
.overlay {
  position: fixed; background: var(--bg_color) ; top: 0; left: 0; width: 100%; height: 0%; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s, height .35s; overflow: auto; z-index: 99;
  .overlay-menu {width: calc(100% - 40px); margin: 20px auto 0}
  .site_logo {text-align: center; margin: 0 auto 24px; padding-bottom: 20px; border-bottom: 1px solid var(--main_color);}
  .site_logo img {max-width: 200px}
  li {margin-bottom: 20px; position: relative; opacity: 0; text-align: center}
  li a {color: var(--main_color); font-size: 1.8rem; padding: 0 16px 8px}
  .current-menu-item a {border-color: var(--main_color)}
  .sub-menu {display: none}
  .sns {display: flex; justify-content: center; flex-wrap: wrap; padding-top: 30px}
  .current-menu-item a::after,
  .current-page-ancestor a::after {left: 46%;}
} /* .overlay */

.overlay.open {
  opacity: .96; visibility: visible; height: 100%;
  li {animation: fadeInRight .5s ease forwards; animation-delay: .35s;}
  li:nth-of-type(2) {animation-delay: .40s;}
  li:nth-of-type(3) {animation-delay: .45s;}
  li:nth-of-type(4) {animation-delay: .50s;}
  li:nth-of-type(5) {animation-delay: .55s;}
  li:nth-of-type(6) {animation-delay: .60s;}
  li:nth-of-type(7) {animation-delay: .65s;}
  li:nth-of-type(8) {animation-delay: .70s;}
} /* .overlay.open */
@keyframes fadeInRight {0% {opacity: 0; left: 20%;} 100% {opacity: 1;left: 0;}}


/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（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: 1em 0.6em!important; font-size: 1.4rem}
  .single .wp-caption {max-width: 100%}
  .single #single_page_nav ul {justify-content: center}

  #loading_logo img {max-width: 160px}

  header .site_title {max-width: 100px; }
  a.move_arrow_btn {padding: 10px 60px 10px 40px; font-size: 1.6rem}
  a.move_arrow_btn span {top: 22%; right: 25px;}
  footer .info dt {max-width: 180px}
  footer nav ul {gap: 14px 10px}
  footer nav ul a {padding: 6px 12px}
  footer nav li {font-size: 1.2rem}
  
  .home {
    #slide .swiper-slide a h3 {font-size: 1rem; padding: 8px 16px 8px 16px; border-width: 2px; bottom: 60px;}
    #slide .swiper-slide a h3 span {display: none}
    #slide .swiper-slide img {aspect-ratio: 2 / 3; }
    #slide .swiper-pagination {bottom: 10px!important}
    #news {padding-top: 60px; margin-bottom: 100px}
    #fes {padding: 0}
    #fes .inner {padding: 40px 20px}
    #fes .h_title_deco {margin-bottom: 20px}
    #fes .latest dd {padding: 20px 20px 40px}
    #fes .latest .in_site_link {margin-top: -25px; margin-bottom: 30px; text-align: center; position: initial; padding-right: 0}
    #fes .past h3 {margin-bottom: 10px}
    #chachacha .wrap {grid-template-columns: 1fr; padding: 40px 30px 20px}
    #chachacha .wrap::after {width: 100%;}
    #chachacha .wrap .figure img {box-shadow: 8px 8px 0 var(--main_lite_color);}
    #chachacha .in_site_link {margin-top: -18px; text-align: center}
    #chachacha .detail {padding-left: 0}
  }
  
  .page .entry_content {padding-bottom: 0}

  .page-id-2, .page-id-2728 {
    #title_head {background-size: 200%;}
    #title_head .appeal {grid-template-columns: 1fr; background: none}
    #title_head .appeal dt {order: 2; margin-top: -20px}
    #title_head .appeal dt img {border: 8px solid var(--main_lite_color)}
    #title_head .appeal dd {box-shadow: 8px 8px 0 var(--main_lite_color); padding: 30px 30px 40px}
  }

  .page-id-2 {
    #content .each_wrap {padding: 30px 20px} 
    #content #summary table tr td:first-child {width: 30%}
    #content #history table tr td:first-child {width: 25%}
  }

  .page-id-2726 {
    #title_head {margin-bottom: 80px}
    #title_head dl {grid-template-columns: 1fr; padding: 40px 30px}
    #title_head dl::before {width: 100%;}
    #title_head dt img {box-shadow: 8px 8px 0 var(--main_lite_color);}
    #title_head dd h2 {margin-bottom: 20px}
    .entry_content .zoom_ex::after {display: none}
  }

  .page-id-2728 {}

  .page-id-2733 .entry_content {padding: 40px 30px!important}

  .single-post {
    #content {padding: 30px 10px 40px}
    #content .inner {padding: 30px}
  }

  .single-post .entry_content .zoom_ex {pointer-events: none;}
  .page .entry_content .zoom_ex {pointer-events: none;}

  .category #title_head h2 {flex-wrap: wrap;}

  .parent-pageid-2731 {
    .entry_content .zoom_ex::after {content:''}
    #news h2 {line-height: 1.4}
  }  

  /* 最新のフェス（2025） */
  .page-id-2806 {
    #anchor_link ul {gap:16px}
    #summary {padding: 40px 10px}
    #summary .inner {padding: 30px}
    #summary .zoom_ex::after {display: none}
    #schedule .list {padding: 30px 20px}
  }
}


/* スマホ〜タブレット共通（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}

  .home {
    #slide .swiper-slide a h3 {font-size: 1.5rem; padding: 8px 16px 8px 16px; border-width: 2px; bottom: 50px;}
    #slide .swiper-slide a h3 span {display: none}
    #slide .swiper-slide img {aspect-ratio: 1 / 1;}
    #slide .swiper-pagination {bottom: 8px!important}
  }

  .page-id-2, .page-id-2728 {
    #title_head {background-size: 200%;}
    #title_head .appeal {grid-template-columns: 1fr; background: none}
    #title_head .appeal dt {order: 2; margin-top: -20px}
    #title_head .appeal dt img {border: 8px solid var(--main_lite_color)}
    #title_head .appeal dd {box-shadow: 8px 8px 0 var(--main_lite_color); padding: 30px 30px 40px}
  }
  .page-id-2726 {
    #title_head {margin-bottom: 80px}
    #title_head dl {grid-template-columns: 1fr; padding: 40px 30px}
    #title_head dl::before {width: 100%;}
    #title_head dt img {box-shadow: 8px 8px 0 var(--main_lite_color);}
    #title_head dd h2 {margin-bottom: 20px}
  }
  .single-post {
    #content {padding: 30px 10px 40px}
  }
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .gtranslate_wrapper {top: 112px} /* ログイン時のアドミンバー対応（GTranslate） */
  .search #title_head input.serch_text {width: 400px} 
  .mw_wp_form dl {display: grid; grid-template-columns: 25% 1fr;}
  .post_line_horizontal article dl {display: grid; grid-template-columns: 120px 80%;}
  .post_line_horizontal article dt {padding-left: 10px}
  .entry_content .wp-block-table td, .wp-block-table th {padding: 1.6em;}
}


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  .mw_wp_form .no_requir dt {padding-left: 42px}
  header .site_nav_pc {gap:10px}
  header .site_nav_pc #menu-sunpucho {gap:10px}
  header .site_nav_pc #menu-sunpucho li {font-size: 1.46rem; letter-spacing: .02em}
}


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

/* PCモニター（1140px以降） */
@media screen and (min-width: 1140px) {
  header .site_nav_pc {gap:20px;}
  header .site_nav_pc #menu-sunpucho {gap:20px}
  header .site_nav_pc #menu-sunpucho li {font-size: 1.5rem; letter-spacing: .1em}
}


/* PCモニター（1240px以降） */
@media screen and (min-width: 1240px) {
  header .inner {padding: 15px 40px}
  header .site_nav_pc {gap:30px}
  header .site_nav_pc #menu-sunpucho {gap:30px}
  header .site_nav_pc #menu-sunpucho li {font-size: 1.6rem;}
}


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