@charset "UTF-8";

/*
Theme Name: Tales of Tono
Theme URI: https://talesoftono.com/
Description: Tales of Tono WordPress Theme
Author: Tales of Tono
Version: 2025_08
Tested up to: 6.7
Requires PHP: 8.3.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: silver;
  --bg_color: #E9E9E9;
  --red_color: #FF3B30;
}



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
#main {
  width: 100%; background: white;
  img {border-radius: 10px;}
  a {border-bottom: 1px solid #787878;}
} /* #main */

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

/* header footer 共通 */
header, footer {
.site_title {padding-top: 6px; margin-bottom: 58px;}
.site_title a {line-height: 1; text-transform: uppercase; width: 100%; padding-top: 6px; display: grid; grid-template-columns: 40% 1fr 36%; gap: 0 10px; font-size: clamp(1.2rem, 1.078rem + 0.52vw, 1.6rem)}
.site_title a .tales span {margin-right: 15%}
.site_title a .tales span:last-of-type {margin-right: 0}
.site_title a .of {text-align: center}
.site_title a .of span {margin-right: 40%}
.site_title a .of span:last-of-type {margin-right: 0}
.site_title a .tono {text-align: right}
.site_title a .tono span {margin-left: 20%}
.site_title a .tono span:first-of-type {margin-left: 0}
}

/* lng */
ul.lng li a {padding: 10px}
ul.lng .current-lang.lang-item-en a {background: url(img/common/current_en_light.svg) no-repeat top 6px left 2px;}
ul.lng .current-lang.lang-item-ja a {background: url(img/common/current_jp_light.svg) no-repeat top 4px left 0px;}

/* lng ダークモード */
.darkmode--activated {
footer ul.lng .current-lang.lang-item-en a {background: url(img/common/current_en_light.svg) no-repeat top 6px left 2px;}
footer ul.lng .current-lang.lang-item-ja a {background: url(img/common/current_jp_light.svg) no-repeat top 4px left 0px;}
}


/* ヘッダー */
header {
  width: 100%; margin-bottom: 105px;
  .inner {position: relative; padding-bottom: 10px}
  .site_title {position: relative; z-index: 100}
  .title_nav {display: flex; justify-content: space-between; }
  .title_nav h2 {position: relative; z-index: 100; position: relative;}
  .title_nav h2 span{margin-right: 30px}
  .title_nav h2:hover::after {opacity: 1;}
  .title_nav h3 {margin-right: 30px}
  .title_nav .gnavi ul {display: flex; justify-content: flex-end; gap: 15px; margin-right: 50px}
  .title_nav li {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  a:hover {opacity: .7}
} /* header */


/* カレント処理 日本語ページ ヘッダー＋フッター */
.current-menu-item.menu-item-34 a {background: url(img/common/current_about_light.svg) no-repeat top 4px left 0; padding: 8px 15px}
.current-menu-item.menu-item-33 a {background: url(img/common/current_research_light.svg) no-repeat top 0px center; padding: 10px 8px}
.current-menu-item.menu-item-32 a {background: url(img/common/current_fieldwork_light.svg) no-repeat top 10px center; padding: 15px 11px}
.current-menu-item.menu-item-30 a {background: url(img/common/current_experience_light.svg) no-repeat top 9px center; padding: 16px 11px}
.current-menu-item.menu-item-31 a {background: url(img/common/current_calender_light.svg) no-repeat top 12px center; padding: 15px 13px}
/* カレント処理英語ページ ヘッダー＋フッター */
.current-menu-item.menu-item-277 a {background: url(img/common/current_about_light.svg) no-repeat top 4px left 0; padding: 8px 15px}
.current-menu-item.menu-item-276 a {background: url(img/common/current_research_light.svg) no-repeat top 0px center; padding: 10px 8px}
.current-menu-item.menu-item-275 a {background: url(img/common/current_fieldwork_light.svg) no-repeat top 10px center; padding: 15px 11px}
.current-menu-item.menu-item-274 a {background: url(img/common/current_experience_light.svg) no-repeat top 9px center; padding: 16px 11px}
.current-menu-item.menu-item-273 a {background: url(img/common/current_calender_light.svg) no-repeat top 12px center; padding: 15px 13px}

/* カレント処理 ヘッダーのみダークモード時 白丸にする */
.darkmode--activated {
.title_nav .current-menu-item.menu-item-34 a {background: url(img/common/current_about_dark.svg) no-repeat top 4px left 0; padding: 8px 15px}
.title_nav .current-menu-item.menu-item-33 a {background: url(img/common/current_research_dark.svg) no-repeat top 0px center; padding: 10px 8px}
.title_nav .current-menu-item.menu-item-32 a {background: url(img/common/current_fieldwork_dark.svg) no-repeat top 10px center; padding: 15px 11px}
.title_nav .current-menu-item.menu-item-30 a {background: url(img/common/current_experience_dark.svg) no-repeat top 9px center; padding: 16px 11px}
.title_nav .current-menu-item.menu-item-31 a {background: url(img/common/current_calender_dark.svg) no-repeat top 12px center; padding: 15px 13px}
/* カレント処理英語ページ ヘッダー＋フッター */
.title_nav .current-menu-item.menu-item-277 a {background: url(img/common/current_about_dark.svg) no-repeat top 4px left 0; padding: 8px 15px}
.title_nav .current-menu-item.menu-item-276 a {background: url(img/common/current_research_dark.svg) no-repeat top 0px center; padding: 10px 8px}
.title_nav .current-menu-item.menu-item-275 a {background: url(img/common/current_fieldwork_dark.svg) no-repeat top 10px center; padding: 15px 11px}
.title_nav .current-menu-item.menu-item-274 a {background: url(img/common/current_experience_dark.svg) no-repeat top 9px center; padding: 16px 11px}
.title_nav .current-menu-item.menu-item-273 a {background: url(img/common/current_calender_dark.svg) no-repeat top 12px center; padding: 15px 13px}
}

/* カレント処理 左余白の調整 */
#drawer-content, footer {
  /* 日本語ページ */
  .current-menu-item.menu-item-34 a {margin-left: -15px}
  .current-menu-item.menu-item-33 a {margin-left: -8px}
  .current-menu-item.menu-item-32 a {margin-left: -11px}
  .current-menu-item.menu-item-30 a {margin-left: -11px}
  .current-menu-item.menu-item-31 a {margin-left: -13px}
  /* 英語ページ */
  .current-menu-item.menu-item-277 a {margin-left: -15px}
  .current-menu-item.menu-item-276 a {margin-left: -8px}
  .current-menu-item.menu-item-275 a {margin-left: -11px}
  .current-menu-item.menu-item-274 a {margin-left: -11px}
  .current-menu-item.menu-item-273 a {margin-left: -13px}
}

/* 一覧のスタイル：ブロック */
.post_line {
  margin-bottom: 125px;
  .post_line_wrap {gap: 40px}
  article {position: relative;}
  article dt {text-align: center;}
} /* .post_line */

/* 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)}
.darkmode--activated #loading {background: #101010}


/* slide */
#slide {
  margin-bottom: 90px;
  .swiper-hero {overflow: hidden; position: relative}
  .swiper-slide {text-align: center}
  .swiper-pagination-bullet { opacity: 1; background: silver; }
  .swiper-pagination-bullet-active { background: #000000; opacity: 1}
  .swiper-pagination {text-align: right; max-width: 1600px; margin: auto; position: relative; padding-top: 10px}
  .swiper-button-prev:after, .swiper-button-next:after { color: var(--main_color); mix-blend-mode:difference;}

  .swiper-button-prev, .swiper-button-next {mix-blend-mode: difference; width: 49%; top: 0; opacity: 0; transition: all 0.3s ease;}
  .swiper-button-prev::after {background: url(img/common/arrow_previous_wh.svg) no-repeat center center;}
  .swiper-button-next::after {background: url(img/common/arrow_next_wh.svg) no-repeat center center; }
  .swiper-button-prev::after, .swiper-button-next::after {color: transparent}

  .swiper-button-prev {left:0; height: 100%}
  .swiper-button-prev::after {position: absolute; top: 48%; left: 5%;}
  .swiper-button-prev:hover {opacity: 1}

  .swiper-button-next {right: 0; height: 100%}
  .swiper-button-next::after {position: absolute; top: 48%; right: 5%;}
  .swiper-button-next:hover {opacity: 1}
}
.darkmode--activated #slide .swiper-pagination-bullet { background: #4d4d4d; opacity: 1}
.darkmode--activated #slide .swiper-pagination-bullet-active { background: white; opacity: 1}


/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home, .page-id-143 {
  header {margin-bottom: 0; background: #F0F0F0}

#hero {
    position: relative;
    display: grid;
    place-items: center;
    background: #F0F0F0;
    min-height: 90svh;
    padding: 5% 0 10%;
  }
  
} /* home */

.darkmode--activated {
  #hero {
    filter: invert(1) hue-rotate(-180deg);
  }
}


/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  margin-bottom: 95px;
  h2 a {pointer-events:none;}
} /* #title_head */



/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* About */
.page-id-20, .page-id-146 {
  #detail {margin-bottom: 120px}
  #detail .text { margin-left: auto; width:50%;}
} /* About */



/* fieldwork */
.page-id-24, .page-id-150 {
  #lead {
  margin-bottom: 95px;
  .grid {margin-bottom: 120px}
  .title_lead h2 {text-transform: uppercase; margin-bottom: 68px; color: var(--red_color)}
  }

  .experience_info {
    .inner {gap: 95px 125px; padding-bottom: 95px}
    .each {
      hgroup .mark {text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--red_color)}
      hgroup .mark span {margin-right: 40px}
      hgroup h3 {margin-bottom: 24px; display: flex; gap:0 40px}
      .text {margin-bottom: 95px}
      }
  }

  #experience {
    margin-bottom: 95px;
    .each:nth-of-type(2) {margin-top: 320px}
    .each:nth-of-type(4) {margin-top: 200px}
  }

  #info {
    dl {margin-bottom: 38px}
    dt {font-weight: bold}
    dt::before {content: "•"; padding-right: 10px; }
    .access .each {margin-bottom: 145px}
    .transportation .each {margin-bottom: 145px}
    a:hover {opacity: .7}
  }
} /* fieldwork */



/* Experience */
.page-id-26, .page-id-152 {
  #festival {
    margin-bottom: 95px;
    .title h2 {text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--red_color)}
    .title h2 span {margin-right: 40px}
    .title h3 span {margin-right: 40px}
    .detail {margin-bottom: 55px}
    .figure {margin-bottom: 100px}
    .figure a {border-radius: 10px; background: #000000; display:block; border-bottom: none!important;}
    .figure a img:hover {opacity: .8}
   }

  .projects_publishing {
    .each {
      .title_lead {margin-bottom: 65px}
      .title_lead h2 {text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--red_color)}
      .title_lead h2 span {margin-right: 40px}
      .title_lead h3 {display: flex; gap: 0 40px}
      .title_lead h3 a:hover {opacity: .7}
      .figure a {border-radius: 10px; background: #000000; display:block; border-bottom: none!important;}
      .figure a img:hover {opacity: .8}
    }
    hr {margin-bottom: 65px}
   }

   #projects {
     .grid {gap: 65px 125px; margin-bottom: 125px}
    }
   
   #publishing {
    .inner {gap: 65px 125px; margin-bottom: 125px}
   }
} /* Experience */

/* ダークモード時のタイトルテキスト・画像hover調整 */
.darkmode--activated {
#festival .title h3 a:hover {opacity: 1!important; color: #5a5a5a}
#festival .figure a:hover {opacity: .8}
.projects_publishing .title_lead h3 a:hover {opacity: 1!important; color: #5a5a5a}
.projects_publishing .figure a:hover {opacity: .8}
}



/* Calender */
.page-id-27, .page-id-154 {
  #calender {
    .inner {gap: 95px 125px; margin-bottom: 125px}
    .each {
      .title h2 {text-transform: uppercase; line-height: 1; margin-bottom: 8px; color: var(--red_color)}
      .title h2 span {margin-right: 40px}
      .title h3 {margin-bottom: 28px}
      .title h3 span {margin-right: 40px}
      .event {margin-bottom: 45px}
    }
  }
} /* Calender */



/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
/* Research */
.page-id-22, .page-id-148 {
  .post_line_wrap {gap:95px 125px}
  .post_line dl {display: grid; grid-template-columns: 1fr;} 
  .post_line dt.catch {order: 3; margin-bottom: 0; background: #000000; border-radius: 10px;}
  .post_line dt.catch a {border: none!important}
  .post_line dt.catch img:hover {opacity: .8}
  .post_line dd.title {order: 2; display: flex; margin-bottom: 32px}
  .post_line dd.title span {margin-right: 40px}
  .post_line dd.title h3 a:hover {opacity: .7}
  .post_line dd.theme {order: 1; color: var(--red_color); text-transform: uppercase; line-height: 1}
  .post_line dd.theme span {margin-right: 40px}
} /* Research */


/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center; margin-bottom: 50px;
  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-researches {
  #title_head {
    a {border: none}
    .back_btn a {background: url(img/common/arrow_previous.svg) left 0 top 50% no-repeat; padding: 6px 14px;}
    .back_btn a:hover {opacity: .7}
    .title_nav {display: grid; grid-template-columns: 1fr 50px; gap: 20px;}
    .title_nav #single_page_nav ul {display: flex; justify-content: space-around;}
    .title_nav #single_page_nav #previous a {background: url(img/common/arrow_previous.svg) left 4px top 50% no-repeat; padding: 6px 14px;}
    .title_nav #single_page_nav #next a {background: url(img/common/arrow_next.svg) right 4px top 50% no-repeat; padding: 6px 14px; text-align: right;}
    .title_nav #single_page_nav #previous a:hover {opacity: .7}
    .title_nav #single_page_nav #next a:hover {opacity: .7}
    .title p {color: var(--red_color); text-transform: uppercase; margin-bottom: 3px; line-height: 1}
    .title p span {margin-right: 40px}
    h2 span {margin-right: 40px}
  }
  #slide img {width: 100%; aspect-ratio: 2000/1333; object-fit: cover;}
  
  #content {
    margin-bottom: 125px;
    .entry_content { margin-left: auto; width:47%; margin-bottom: 95px;}
    hr {margin-bottom: 95px}
    .culture_site {gap:125px 95px}
    .culture_site .theme {color: var(--red_color); text-transform: uppercase; margin-bottom: 10px; line-height: 1}
    .culture_site .theme span {margin-right: 40px}
    .culture_site h3 {margin-bottom: 24px}
    .culture_site h3 span {margin-right: 40px}
    .culture_site .detail {margin-bottom: 40px}
    .culture_site .figure {margin-bottom: 0}
    .culture_site .figure img {width: 100%; aspect-ratio: 800/533; object-fit: cover;}
    #culture {margin-bottom: 95px}
  }
} /* .single-researches */




.single-post {
  .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} /* ボタン */
    .wp-block-button: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 */


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



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


/*---------------------------------------------------------------------
 footer
---------------------------------------------------------------------*/
footer {
  width: 100%; min-height: 100vh; background: #CDCDCD url(img/common/footer_bg.png) no-repeat center top; position: relative; 
  .inner_primary {background: #CDCDCD}
  .inner {background: #CDCDCD; padding-bottom: 30px}
  .title_nav_lng {display: grid; grid-template-columns: 53% 30% 1fr; gap: 20px; margin-bottom: 80px}
  .title_nav_lng h2 {margin-bottom: 30px}
  .title_nav_lng h2 span {margin-right: 30px}
  .title_nav_lng h3 {line-height: 1.6}
  .title_nav_lng .gnavi li {line-height: 1.5; font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  .title_nav_lng .lng p {text-align: right}
  .copy_sns {display: grid; grid-template-columns: 53% 40% 1fr; gap: 20px; position: relative}
  .copy_sns .copy {margin-bottom: 0}
  .copy_sns .copy small {text-transform: uppercase; opacity: .4}
  .copy_sns .sns {display: flex; flex-wrap: wrap; gap: 8px 18px}
  .copy_sns .sns li {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  .copy_sns .pagetop {position: absolute; top: -6px; right: 2px}
  .copy_sns .pagetop a {background: url(img/common/page_top.svg) no-repeat center 10px; width: 25px; height: 25px; display: block;}
  .copy_sns .pagetop a:hover {opacity: .7}

  .lng_dark {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 15px; align-items: flex-start}
  .lng_dark .lng {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0 5px}
  .lng_dark .lng li {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  .lng_dark .lng .lang-item-ja {order: 2}
  .lng_dark .lng .lang-item-en {order: 1}

  a:hover {opacity: .7}

} /* footer */



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

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

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


/*---------------------------------------------------------------------
 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
---------------------------------------------------------------------*/
/* drawer menu */
.drawer-wrap {position: absolute; top: 0; right: 0;	}
.drawer-label {position: fixed; top: 50px; right: 19px; font-size: 10px; z-index: 100;}
#drawer-checkbox:checked ~ #drawer-content {transform: translateX(0);}
#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;}
#drawer-checkbox {display: none;}
#drawer-icon {cursor: pointer; display: inline-block; width: 20px; height: 20px; position: absolute; top: 92px; right: 40px; z-index: 100;}

#drawer-icon span {
  position: absolute;
  top: 50%; 
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px; /* 中央に線が来るよう微調整 */
  background: none; /* 本体は透明 */}

#drawer-icon span::before,
#drawer-icon span::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #333;
  transition: all 0.3s ease-in-out;
}

#drawer-icon span::before {top: -6px;} /* 上の線（before） */
#drawer-icon span::after {top: 6px;} /* 下の線（after） */

/* メニュー開いた時（バツ印） */
#drawer-checkbox:checked ~ #drawer-icon span::before {top: 0; transform: rotate(45deg);}
#drawer-checkbox:checked ~ #drawer-icon span::after {top: 0; transform: rotate(-45deg);}

/* drawer contents */
#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  padding: 75px 35px 20px 65px;
  z-index: 40;
  width: 50vw;
  min-width: 50vw;
  height: 100%;
  background: #CDCDCD;
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(100%);
  h2 {margin-bottom: 80px}
  .nav_lng {display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 105px; align-items: flex-start}
  .nav_lng  li {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  .nav_lng .lng {display: flex; justify-content: flex-end; flex-wrap: wrap; gap:10px}
  .nav_lng .lng .lang-item-ja {order: 2}
  .nav_lng .lng .lang-item-en {order: 1}
  .lng_dark {display: flex; justify-content: flex-end; flex-wrap: wrap; gap:15px}
  .sns_pagetop {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center}
  .sns_pagetop .sns {display: flex; flex-wrap: wrap; gap: 8px 18px;}
  .sns_pagetop .sns li {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem)!important;}
  .sns_pagetop .pagetop a {background: url(img/common/page_top.svg) no-repeat center center; width: 25px; height: 25px; display: block;}
  .sns_pagetop .pagetop a:hover {opacity: .7}
}


/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ以降（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}
  .single .wp-caption {max-width: 100%}

  .inner {width: min(1680px, 100%); margin: auto; padding: 0 17px}
  header { margin-bottom: 60px}
  header .site_title  {margin-bottom: 28px;}
  #drawer-icon {top: 56px; right: 17px;}
  #drawer-content { width: 100vw; min-width: 100vw; padding: 120px 17px;}
  #title_head {margin-bottom: 70px}
  #title_head h2 br {display: none}
  #slide {margin-bottom: 70px}

  .home #hero .inner {padding: 0}

  .current-menu-item.menu-item-34 a {padding: 11px 20px;}
  .current-menu-item.menu-item-33 a {padding: 10px 14px;}
  .current-menu-item.menu-item-32 a {padding: 15px 17px;}
  .current-menu-item.menu-item-30 a {padding: 16px 20px;}
  .current-menu-item.menu-item-31 a {padding: 16px 18px;}

  .current-menu-item.menu-item-277 a {padding: 11px 20px;}
  .current-menu-item.menu-item-276 a {padding: 10px 14px;}
  .current-menu-item.menu-item-275 a {padding: 15px 17px;}
  .current-menu-item.menu-item-274 a {padding: 16px 20px;}
  .current-menu-item.menu-item-273 a {padding: 16px 18px;}


  /* 左寄せの余白調整 */
  .current-menu-item.menu-item-34 a {margin-left: -20px !important;}
  .current-menu-item.menu-item-33 a {margin-left: -14px !important;}
  .current-menu-item.menu-item-32 a {margin-left: -17px !important;}
  .current-menu-item.menu-item-30 a {margin-left: -20px !important;}
  .current-menu-item.menu-item-31 a {margin-left: -18px !important;}

  .current-menu-item.menu-item-277 a {margin-left: -20px !important;}
  .current-menu-item.menu-item-276 a {margin-left: -14px !important;}
  .current-menu-item.menu-item-275 a {margin-left: -17px !important;}
  .current-menu-item.menu-item-274 a {margin-left: -20px !important;}
  .current-menu-item.menu-item-273 a {margin-left: -18px !important;}

  .page-id-20, .page-id-146 {
    #detail .text {width: 100%;}
  }

  .page-id-22, .page-id-148 {
    .post_line dd.theme span {margin-right: 20px}
    .post_line dd.title span {margin-right: 20px}
    .post_line dd.title {margin-bottom: 20px;}
    .post_line_wrap {gap:75px}
  }

  .single-researches {
    header { margin-bottom: 12px}
    #content .entry_content {width: 100%;}
    #content #culture {gap: 80px} 
    #content .culture_site .theme {margin-bottom: 2px}
    #content .culture_site h3 {margin-bottom: 12px}
    #content .culture_site .detail {margin-bottom: 30px}
  }

  .page-id-24, .page-id-150 {
    #lead .grid {margin-bottom: 80px}
    #lead .title_lead h2 {margin-bottom: 40px;}
    .experience_info .each hgroup .mark {margin-bottom: 2px}
    .experience_info .each hgroup h3 {margin-bottom: 16px}
    .experience_info .each .text {margin-bottom: 30px}
    #experience .each:nth-of-type(2) {margin-top: 0}
    #experience .each:nth-of-type(4) {margin-top: 0}
    .experience_info .each hgroup .mark span {margin-right: 20px}
    .experience_info .each hgroup h3 {gap: 0 20px}
    .experience_info .each dd {line-height: 1.4}
    .experience_info .each .buret li:after {margin-bottom: 0}
    #info dl {margin-bottom: 20px} 
  }

  .page-id-26, .page-id-152 {
    #festival .title h2 span {margin-right: 20px}
    #festival .title h3 span {margin-right: 20px}
    #festival .detail {margin-bottom: 30px}
    #projects .grid {gap:90px; margin-bottom: 70px}
    .projects_publishing .each .title_lead {margin-bottom: 40px}
    .projects_publishing .each .title_lead h2 span {margin-right: 20px}
    .projects_publishing .each .title_lead h3 {gap: 0 20px}
    .projects_publishing .each .text p {margin-bottom: .5lh}
  }

  .page-id-27, .page-id-154 {
    #calender .inner {gap:60px}
    #calender .each .title h2 {margin-bottom: 0}
    #calender .each .title h2 span {margin-right: 20px}
    #calender .each .title h3 {margin-bottom: 20px}
    #calender .each .title h3 span {margin-right: 20px}
  }
  
  .single-researches .title_nav h3 {display: none}

  footer {background-size: 500%;}
  footer .site_title  {margin-bottom: 28px;}
  footer .title_nav_lng {grid-template-columns: 1fr; margin-bottom: 24px}
  footer .title_nav_lng h2 {margin-bottom: 24px}
  footer .lng_dark {gap:12px; position: absolute; top: 52px; right: 17px;}
  footer .lng_dark .lng {gap:12px}
  footer .copy_sns {grid-template-columns: 1fr; gap:0; position: relative}
  footer .copy {order: 2}
  footer .sns {order: 1}
}


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

  .page-id-22, .page-id-148 {.post_line_wrap {gap: 95px 40px;}}
  .page-id-24, .page-id-150 {.experience_info .wrap {gap: 95px 40px}}
  .page-id-24, .page-id-150 {.experience_info .inner {gap: 95px 40px}}
  .page-id-26, .page-id-152 {#projects .grid {gap: 95px 40px}}
  .page-id-26, .page-id-152 {#publishing .grid {gap: 95px 40px}}
  .page-id-27, .page-id-154{#calender .grid {gap: 95px 40px}}

  .current-menu-item.menu-item-34 a {padding: 11px 18px !important;}
  .current-menu-item.menu-item-33 a {padding: 10px 12px !important;}
  .current-menu-item.menu-item-32 a {padding: 15px 14px !important;}
  .current-menu-item.menu-item-30 a {padding: 16px 16px !important;}
  .current-menu-item.menu-item-31 a {padding: 16px 16px !important;}
  
  .current-menu-item.menu-item-277 a {padding: 11px 18px !important;;}
  .current-menu-item.menu-item-276 a {padding: 10px 12px !important;;}
  .current-menu-item.menu-item-275 a {padding: 15px 14px !important;;}
  .current-menu-item.menu-item-274 a {padding: 16px 16px !important;;}
  .current-menu-item.menu-item-273 a {padding: 16px 16px !important;;}
  
  /* 左寄せの余白調整 */
  .current-menu-item.menu-item-34 a {margin-left: -18px !important;}
  .current-menu-item.menu-item-33 a {margin-left: -12px !important;}
  .current-menu-item.menu-item-32 a {margin-left: -14px !important;}
  .current-menu-item.menu-item-30 a {margin-left: -16px !important;}
  .current-menu-item.menu-item-31 a {margin-left: -16px !important;}
  
  .current-menu-item.menu-item-277 a {margin-left: -18px !important;}
  .current-menu-item.menu-item-276 a {margin-left: -12px !important;}
  .current-menu-item.menu-item-275 a {margin-left: -14px !important;}
  .current-menu-item.menu-item-274 a {margin-left: -16px !important;}
  .current-menu-item.menu-item-273 a {margin-left: -16px !important;}

  /* current時の左余白の調整 */
  .title_nav .current-menu-item {margin-left: 10px}
}


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


/* 1024px以降 iPad 横 iPad 12.9 縦 含む */
@media screen and (min-width: 1024px) {
  .sample {}
}


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


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


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


/* ダークモードスイッチャー */
#darkmode-toggle-header,
#darkmode-toggle-footer {border: none; background: transparent; filter: invert(0); color:white !important}

/* iOS iPadOSのボタン色を調整 */
.is-ios #darkmode-toggle-header, .is-ios #darkmode-toggle-footer {color: white}
.is-ios.darkmode--activated #darkmode-toggle-header, .is-ios.darkmode--activated #darkmode-toggle-footer {color: #000000!important}

/* ダークモード時 */
.darkmode--activated {
#darkmode-toggle-header,
#darkmode-toggle-footer {filter: invert(0); color:#000000 !important}
header .site_title a {color: white !important}
header .title_nav {color: white}

header #drawer-icon span::before {background: white}
header #drawer-icon span::after {background: white}
header #drawer-checkbox:checked ~ #drawer-icon span::before {background: #000000}
header #drawer-checkbox:checked ~ #drawer-icon span::after {background: #000000}
#lead .title_lead h2,
hgroup .mark,
#title_head .title p,
#content .culture_site .theme,
#festival .title h2,
.projects_publishing .each .title_lead h2,
#calender .each .title h2 {filter: invert(0); color: var(--red_color);}

.post_line dd.title {color: white}

.light_mode_img {display: none;}
.dark_mode_img {display: block;}
}
.dark_mode_img {display: none;}