@charset "UTF-8";

/*
Theme Name: 東北大学 電気通信研究所 深見･金井研究室
Theme URI: https://www.riec.tohoku.ac.jp/~fukamihp
Description: 東北大学 電気通信研究所 深見･金井研究室 WordPress Theme
Author: 東北大学 電気通信研究所 深見･金井研究室
Version: 2025_04
Tested up to: 6.7
Requires PHP: 8.2.0
*/

/* basic style setting in utility.css */

/* 変数 */
:root {
  --main_color: white;
  --bg_color: #070F1A;
  --sub_bk_color: #9a9a9a;
  --link_color: #FF07E2
}


html:lang(en-US) {
p,li,dl,dt,dd {text-align: left; }
a {word-break: normal;}
footer h2 {font-size: clamp(1.4rem, 1.339rem + 0.26vw, 1.6rem)}
footer small {font-size: 1rem}
} /* html:lang(en-US) 【英語サイト用】 */



/*---------------------------------------------------------------------
 共通レイアウト
---------------------------------------------------------------------*/
/* レイアウト */

#main {
width: 100%; color: white;
} /* #main */

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

/* ヘッダーまわり */
header {
  position: sticky; top:0; width: 100%; z-index: 100;
  .logo_lng {background: var(--bg_color);}
  .logo_lng .inner {width: min(1020px, 100%); padding: 15px 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 20px; position: relative}
  .logo_lng ul {display: flex; justify-content: flex-end; flex-wrap: wrap; position: absolute; top: 22px; right: 0;}
  .logo_lng ul .current-lang a {background: #707070;}
  .logo_lng ul li a {color: white; padding: 24px 15px; border-left: 1px solid white; font-weight: 700;}
  .logo_lng ul li a:hover { background: #909090}
  .logo_lng ul li:last-of-type a {border-right: 1px solid white;}
  .site_title {line-height: 1; color: white; font-size: clamp(1.2rem, 0.955rem + 1.04vw, 2rem); letter-spacing: .04em}
  .site_title span { font-size: clamp(1rem, 0.939rem + 0.26vw, 1.2rem); word-break: normal;}
  .site_nav_pc {background: white}
  .site_nav_pc .inner {padding: 10px 20px;}
  .site_nav_pc ul {display: flex; justify-content: center; flex-wrap: wrap; gap:10px 40px}
  .site_nav_pc a {font-size: 1.4rem; font-weight: 600; letter-spacing: .02em}
  .site_nav_pc a:hover {color: var(--link_color)}
  .site_nav_sp_tb .menu_drawer {border-top: 1px solid #cccccc;}
  .site_nav_sp_tb .menu_drawer a {text-transform: uppercase; font-weight: 600; padding: 16px 18px; border-bottom: 1px solid #cccccc; display: block; font-size: 1.4rem}
  .site_nav_sp_tb .menu_drawer a:hover { background: var(--bg_color); color: white}
  .site_nav_sp_tb .switcher {display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #cccccc;}
  .site_nav_sp_tb .switcher a {text-align: center; padding: 15px; display: block; font-weight: 700;}
  .site_nav_sp_tb .switcher .current-lang a {background: var(--bg_color); color: white}
  .site_nav_sp_tb .switcher .current-lang a:hover {opacity: .8}

  
  /* current（投稿ページにcurrentには、utility.js にて current-menu-item 付与を指定） */
  .current-menu-item a,
  .current-page-ancestor a {color: var(--link_color)}
  
  /* current 以外の設定 WordPress のメニュー名を入れる */
  #menu-fukami li { position: relative}
  #menu-fukami 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-fukami li:not(.current-menu-item) a:hover::after {transform: scale(1, 1);}
} /* header */

/* パンくず */
#breadcrumb {
  background: var(--bg_color);
  .inner {width: min(100%); padding: 25px 20px; padding-bottom: 80px; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  p {width: min(780px, 100%); font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); text-align: right; text-transform: uppercase; margin-bottom: 0; letter-spacing: 0.06em; color: white}
  span {color:rgb(192, 192, 192);}
  span.current-item {color: white}
  a span {transition: all 0.3s ease;}
  a:hover span {color: var(--link_color)}
} /* #breadcrumb */

html:lang(en-US) #breadcrumb p {text-align: right!important}


/* Google font */
.jost {font-family: "Jost", sans-serif;}

/* 一覧のスタイル：ブロック */
.post_line {
  margin-bottom: 80px;
  .inner {width: min(1280px, 100%); }
  .post_line_wrap {gap: 40px}
  article {position: relative;}
  article dt {text-align: center; margin-bottom: 15px}
  article dd h3 {font-size: clamp(1.8rem, 1.6rem + 1vw, 2.6rem); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} /* 2行目以降は「…」で省略 親の定義 */
  article dd.category_list li {pointer-events:none; margin-right: 5px}
  article dd.tag_list li {pointer-events:none; margin: 0 5px}
  article .new_mark {position: absolute; top: -10px; right: -10px;} /* NEW マーク位置調整 */
} /* .post_line */

/* 一覧のスタイル：水平 */
.post_line_horizontal {
  .inner {width: min(1280px, 100%)}
  article a {display: block; background: rgba(255, 255, 0, 0.33); border-bottom: 1px dotted #e2e2e2; padding: 20px 0 15px}
  article a:hover {background: rgba(255, 238, 0, 1)}
  article dl {display: grid; grid-template-columns: 1fr; align-items: center; gap: 10px 30px}
  article dd h3 {font-weight: 400; line-height: 1.4}
  article .new_mark {position: absolute; top: 40%; right: 10px;} /* NEW マーク位置調整 */
} /* .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%);}
.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);}
}
body:not(.home)  #loading_logo {display: none} /* トップページ以外 loading_logoを非表示  */

/*---------------------------------------------------------------------
 トップページ
---------------------------------------------------------------------*/
.home {
background: var(--bg_color);
#main {background: var(--bg_color);}

.h_title_home {text-align: center; color: white; font-weight: 400; margin-bottom: 70px; background: url(img/home/h_title_bg.svg) no-repeat center bottom; padding-bottom: 30px; letter-spacing: .01em}

  #hero {
    background: url(img/home/movie_bg.jpg); background-size: cover; background-position: 50% 50%;
    .inner {width: min(100%); display: grid; place-items: center; min-height: 700px; }
    dl {max-width: 460px}
    dt {color: white; text-align: center; margin-bottom: 35px}
    dd h2 {font-size: clamp(3rem, 2.449rem + 2.35vw, 4.8rem); text-align: center; margin-bottom: 15px; color: white}
    dd p {color: white; margin-block: 8px}
  } /* #hero */
  

  #lead {
    margin-bottom: 120px;
    ul {gap:0}
    li { position: relative;}
    li a {color: white;}
    li a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: clamp(1.6rem, 1.478rem + 0.52vw, 2rem); transition: all 0.3s ease;}
    li a:hover span {color: var(--link_color)}
  } /* #lead */


  #info {
    margin-bottom: 120px;
    .inner {width: min(1120px, 100%); }
    ul {color: white; background: url(img/home/info_bar.svg) no-repeat left bottom; padding-bottom: 0}
    li {background: url(img/home/info_bar.svg) no-repeat left top; padding: 30px 0}
    li a {text-decoration: underline}
    li a:hover {color: var(--link_color)}
  } /* #info */


  #news {
    margin-bottom: 120px;
    .inner {width: min(1120px, 100%); }
    .post_line_wrap {gap:60px 40px; margin-bottom: 60px}
    article dl {color: white}
    article dt {margin-bottom: 18px}
    article dt img {width: 100%; aspect-ratio: 9 / 5; object-fit: cover; transition: transform 0.5s, filter 0.5s;}
    article dd.category_date {display: flex; justify-content: space-between; flex-wrap: wrap; gap:20px; align-items: center; margin-bottom: 12px}
    article dd.category_date .category li {border: 1px solid white; padding: 2px 10px; font-size: 1.2rem; margin-right: 10px}
    article dd.category_date .date {font-size: 1.4rem}
    article dd.text {font-size: 1.4rem}
    article a:hover dd.text {color: var(--link_color); transition: all 0.3s ease;}
    article a:hover dt img {transform: scale(1.05);}
    .in_site_link {display: flex; justify-content: flex-end;}
    .in_site_link a {width: 200px; text-align: center; padding: 5px 0; border-top: 1px solid white; border-bottom: 1px solid white; color: white; display: block}
    .in_site_link a:hover {color: var(--link_color)}
  } /* #news */


  #video {
    margin-bottom: 60px;
    .inner {width: min(1120px, 100%); }
    .wrap {gap:30px}
    dl {color: white}
    dt {margin-bottom: 10px}
    dt img {cursor: pointer; transition: transform 0.5s, filter 0.5s;}
    dt img:hover  {transform: scale(1.05);}
    dd {font-size: 1.4rem}
  } /* #video */
  
} /* home */

.page-id-31 #hero dd p {text-align: center}



/*---------------------------------------------------------------------
 固定ページ共通
---------------------------------------------------------------------*/
#title_head {
  background: #ccc url(img/common/title_head_bg.jpg); background-size: cover; background-position: 50% 50%;
  h2 {padding: 80px 0; text-align: center; line-height: 1; margin-bottom: 0; color: white; text-transform: uppercase; font-size: clamp(2.1rem, 1.763rem + 1.44vw, 3.2rem)}
  h2 a {pointer-events:none;}
} /* #title_head */

.page #main {
h2.h_title {font-size: clamp(2rem, 1.9rem + 0.5vw, 2.4rem); border-left: 3px solid var(--main_color); padding: 8px 0 7px 20px; margin-bottom: 20px; line-height: 1.3; font-weight: 500; word-break: auto-phrase;}
}

.anchor_link {
 a {padding: 8px 26px 8px 42px; font-size: clamp(1.2rem, 1.078rem + 0.52vw, 1.6rem); font-weight: 600; border: 1px solid white; position: relative; display: inline-block;}
 a:hover {color: var(--link_color); border: 1px solid var(--sub_bk_color)}
 a:before {content: ''; width: 8px; height: 8px; border: 0; border-top: solid 2px white; border-right: solid 2px white; position: absolute; top: 50%; left: 22px; margin-top: -6px; transform: rotate(135deg); transition: all 0.3s ease;}
 a:hover:before {border-color: var(--link_color)}
}

/*---------------------------------------------------------------------
 個別ページ
---------------------------------------------------------------------*/
/* 研究（日英） */
.page-id-8, .page-id-42 {
.entry_content h2 {border-left: none !important;border-top: 1px solid white ;border-bottom: 1px solid white; padding-left: 0 !important; padding: 15px 15px!important ; background: #282828}
.entry_content iframe {aspect-ratio: 16 / 10; width: 100%; height: 100%;}
.entry_content li em {color: white; font-style: italic; font-weight: normal}
.entry_content li a:hover em {color: var(--link_color)}
.entry_content .wp-block-columns {align-items: center !important}
.entry_content .wp-block-list li {font-size: clamp(1rem, 0.878rem + 0.52vw, 1.4rem); }
} /* 研究（日英） */


/* 設備（日英） */
.page-id-14, .page-id-113 {
.anchor_link {display: flex; justify-content: center; flex-wrap: wrap; gap: 16px 40px; margin-bottom: 80px}

.equipment_wrap {
margin-bottom: 120px;
.wrap {gap: 50px 80px}
dt {text-align: center; margin-bottom: 10px}
dt img {width: 100%; aspect-ratio: 11/8; object-fit: cover;}
dd {text-align: center}
}
} /* 設備（日英） */


/* リンク（日英） */
.page-id-16, .page-id-115 {
#link {
.inner {width: min(800px, 100%)}
.primary_wrap {margin-bottom: 100px}
.secondary_wrap ul {margin-bottom: 60px}
.secondary_wrap h3 {font-size: 1.8rem; margin-bottom: 20px}
ul {border-top: 1px dotted #666666;}
li {border-bottom: 1px dotted #666666;}
a {position: relative;display: block; padding: 15px 0 15px 15px}
a::before {content: ""; position: absolute; top: 28px; left: 0; transform: translateY(-50%); border: 3px solid transparent; border-left: 5px solid gray;}
a::after {content: url(img/page/link_arrow.svg); padding-left: 8px;}
a:hover {color: var(--link_color)}
a.unlink::after {content: ""}
}
} /* リンク（日英） */


/* アクセス/問い合わせ（日英） */
.page-id-18, .page-id-145 {
#main .inner {width: min(800px, 100%)}
.entry_content .wp-block-group { margin-bottom: 60px}
.entry_content iframe {aspect-ratio: 16 / 10; width: 100%; height: 100%;}
} /* アクセス/問い合わせ */


/* 成果等 */
.page-id-12.logged-in #sort_lead { top: 140px;}
.page-id-3198.logged-in #sort_lead { top: 140px;}
.page-id-12, .page-id-3198 {
#breadcrumb .inner {padding-bottom: 15px}
#sort_lead {margin-bottom: 30px;position: sticky; top: 110px; background: rgba(7, 15, 26, 0.9); padding: 25px 0 10px; z-index: 10;}
#sort_lead .anchor_link {display: flex; flex-wrap: wrap; gap:6px 15px; margin-bottom: 18px}
#sort_lead .anchor_link a {font-size: 1.4rem; padding: 5px 14px 5px 28px; }
#sort_lead .anchor_link a:before {width: 6px; height: 6px; left: 14px; margin-top: -4px;}
#sort_lead .year_sort {display: flex; flex-wrap: wrap; gap:6px 12px; margin-bottom: 20px}
#sort_lead .year_sort button {padding: 4px 18px; border-radius: 20px; font-size: 1.4rem; letter-spacing: .04em; border: 1px solid white; font-weight: 600; transition: all 0.3s ease; background: transparent; color: white; cursor:pointer}
#sort_lead .year_sort button:hover {color: var(--link_color); border: 1px solid var(--sub_bk_color)}
#sort_lead .year_sort .filter.active button {color: white; border: 1px solid #323232; background: var(--link_color)} /* 押されたボタン */

.search-area {position: relative;}
.search-area input[type="text"] {padding: 5px 5px 3px; font-size: 1.4rem; background: #464646; border: none; color: white}
.search-area input[type="text"]::placeholder {color: white}
.search-area input[type="text"]:focus { background: #252525}
.search-result {margin-top: 20px;}
.hit-num__text span {font-weight: bold;}
#search-result__list {margin-top: 15px;}
#search-result__list span {display: inline-block; margin-right: 15px; padding: 5px; background: #F2F2F2;}
.target-area .hidden { display: none !important}
#search-text {width: 100%; padding: 5px 25px 5px 10px;}
.clear-btn {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 18px; color: #888;}
.clear-btn:hover {color: #fff;}
#result-count { font-size: 1.3rem; margin-top: -13px}

.sort-desc-asc {display: flex; justify-content: flex-end; flex-wrap: wrap; gap:10px; margin-top: -12px}
.sort-desc-asc button {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 1.2rem;
  border: 1px solid white;
  font-weight: 600;
  transition: all 0.3s ease;
  background: transparent;
  color: white;
  cursor: pointer;
}
.sort-desc-asc button.active {
  background: var(--link_color);
  color: #fff;
  border: 1px solid #323232;
}

#sort_lead p {text-align: center}
.each_wrap .inner {padding-bottom: 80px; margin-bottom: 100px; border-bottom: 1px solid var(--sub_bk_color); }
.each_wrap h2 {margin-bottom: 30px}
.each_wrap h2 span {font-size: clamp(1.2rem, 1.078rem + 0.52vw, 1.6rem); margin-left: 16px}
.each_wrap li {line-height: 1.6; font-size: 1.5rem; letter-spacing: .06em; text-align: left; position: relative; padding-left: 36px; width: 100%}
.each_wrap li:before {position: absolute; top: 0; left: 0;}
.each_wrap li:after {margin-bottom: 25px;}
.each_wrap li a {text-decoration: underline;}
.each_wrap li a:hover {color: var(--link_color)}
.each_wrap li mark {background: var(--link_color); color: white; padding: 0 3px}
#conference h3 {font-size: clamp(1.6rem, 1.478rem + 0.52vw, 2rem); border-bottom: 1px solid silver; margin-bottom: 16px; padding-bottom: 6px; padding-top: 10px}
#conference h3 span {font-size: 1.4rem; margin-left: 10px}
#conference h4 {font-size: clamp(1.4rem, 1.278rem + 0.52vw, 1.8rem); margin-bottom: 10px}
#conference h4 span {font-size: 1.4rem; margin-left: 10px}
#conference ol {margin-bottom: 80px}
#conference .anchor_link {display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px}
#conference .anchor_link li {width: auto; padding-left: 0}
#conference .anchor_link li a {font-size: 1.4rem; padding: 8px 20px 8px 38px}
#conference .anchor_link span {margin-left: 5px; font-size: 1.4rem}
#conference #domestic_plenary-invited .anchor_link li:first-of-type a:before {transform: rotate(-45deg); margin-top: -2px}
#conference #domestic_plenary-invited .anchor_link li:nth-of-type(2) a:before {transform: rotate(-45deg); margin-top: -2px}
#award .inner {border-bottom: none}

/* mixitup用 */
#sort_wrap .mix {display: none;} 

} /* 成果等 */



/* ＊＊個別ページ */
.page-id-＊ {

} /* ＊＊個別ページ */



/* ＊＊個別ページ */
.page-id-＊ {

} /* ＊＊個別ページ */



/*---------------------------------------------------------------------
 アーカイブ カテゴリ ニュース共通
---------------------------------------------------------------------*/
.archive {}
.category {}

/* メンバー一覧 */
.page-id-10, .page-id-150 {
#current {
margin-bottom: 200px;
.each_wrap {gap: 0 40px; margin-bottom: 80px; border-bottom: 1px solid silver;}
.tertiary {margin-bottom: 30px}
a {border-bottom: 1px dotted var(--sub_bk_color); padding-bottom: 30px; padding-top: 30px; display: block}
a img {transition: transform 0.5s, filter 0.5s;} /* 画像の枠を外れて拡大 */
a:hover {background: #1b1b1b}
a:hover img {transform: scale(1.05);}
a:hover dd .name {color: var(--link_color)}
dl {display: grid; grid-template-columns: 120px 1fr; gap: 10px 30px; align-items: center;}
dt img {width: 100%; aspect-ratio: 1/1; object-fit: cover;}
dd .post {background: #5b5b5b; display: inline-block; padding: 2px 10px; margin-bottom: 10px; font-size: 1.2rem;}
dd .name {font-size: clamp(1.8rem, 1.708rem + 0.39vw, 2.1rem); margin-bottom: 4px; text-decoration: underline; word-break: break-all;}
dd .mail {font-size: 1.4rem; line-height: 1.2; word-break: break-all; }
.unlink dd .name {text-decoration: none}
}

#past {
margin-bottom: 80px;
.each_wrap {gap: 0 40px;}
a {border-bottom: 1px dotted var(--sub_bk_color); padding-bottom: 20px; padding-top: 20px; display: block}
a:hover {background: #1b1b1b}
a:hover dd .name {color: var(--link_color)}
dt.post {background: #5b5b5b; display: inline-block; padding: 1px 6px; margin-bottom: 4px; font-size: 1.2rem}
dd .name {font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem); margin-bottom: 0px; text-decoration: underline}
dd .term {font-size: clamp(1.2rem, 1.139rem + 0.26vw, 1.4rem) ;word-break: break-all;}
.unlink dd .name {text-decoration: none}
}
} /* メンバー一覧 */


/* ニュース・イベント一覧 */
.page-template-article_list_all {
#main .inner {width: min(900px, 100%); }
.post_line {margin-bottom: 0}
article {display: grid; grid-template-columns: 100px 1fr; gap: 0px 30px;}
article .entry_meta {margin-top: -5px}
article .entry_meta .date p {margin-bottom: 6px}
article .entry_meta .category li {text-align: center; padding: 2px 10px; border: 1px solid silver; font-size: 1.2rem}
article .entry_content h2.post_title {font-size: clamp(1.6rem, 1.478rem + 0.52vw, 2rem); line-height: 1.4; border-top: 1px solid #919191; border-bottom: 1px solid #919191; padding: 12px 0; margin-bottom: 20px; border-left: none} 
article iframe {aspect-ratio: 16 / 9; width: 100%; height: 100%;}
article .accordion-wrapper {text-align: center;  }
article .accordion-toggle {
  background: #464646;
  color: #fff;
  border: none;
  cursor: pointer;
  display: block;
  width: 100%;
  padding: 10px;
  letter-spacing: .1em;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}
article .accordion-toggle:hover {color: var(--link_color)}


} /* ニュース・イベント一覧 */




/* 一覧のページナビ */
.wp-pagenavi {
  text-align: center; margin-bottom: 80px;
  a {color: white; }
  span.current {font-weight: bold; color : #000000; background: var(--sub_bk_color); }
  span.pages {display: none !important}
} /* .wp-pagenavi */

#main .wp-pagenavi a, #main .wp-pagenavi span {
  border: var(--sub_bk_color)!important;
  font-size: clamp(1.5rem, 1.425rem + 0.38vw, 1.8rem);
  padding: .3em .7em;
  margin: 5px;
  transition: all .3s ease;
  display: inline-block;￥
} /* #main .wp-pagenavi a */

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



/*---------------------------------------------------------------------
 投稿ページ共通
---------------------------------------------------------------------*/
.single #main .inner {width: min(1000px, 100%)}

.single, body.page {
  .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 {
    color: white;
    padding-bottom: 100px; word-wrap: break-word; /* 折り返し解除 */
    h2 {font-size: clamp(2rem, 1.9rem + 0.5vw, 2.4rem); border-left: 3px solid var(--sub_bk_color); padding-left:20px; margin-bottom: 20px; line-height: 1.6; font-weight: 500; word-break: auto-phrase;}
    h3 {font-size: clamp(1.6rem, 1.539rem + 0.26vw, 1.8rem); margin-bottom: 16px; padding-bottom: 6px; font-weight: 500; border-bottom: 1px solid var(--sub_bk_color); font-weight: 500}
    a img {pointer-events: none;} /* 画像にリンクがついてもリンク解除 */
    a img:hover {opacity: .8}
    a:hover {color: var(--link_color)}
    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 23px; background: url(img/post/icon_pdf_18.svg) no-repeat left center; margin-left: 2px}
    a[href$=".doc"] {display: inline-block; padding: 2px 0 2px 23px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".docx"] {display: inline-block; padding: 2px 0 2px 23px; background: url(img/post/icon_docx_18.svg) no-repeat left center;}
    a[href$=".xls"] {display: inline-block; padding: 2px 0 2px 23px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".xlsx"] {display: inline-block; padding: 2px 0 2px 23px; background: url(img/post/icon_xlsx_18.svg) no-repeat left center;}
    a[href$=".csv"] {display: inline-block; padding: 2px 0 2px 23px; 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}
    .wp-block-group {margin-bottom: 80px}
  } /* .entry_content */
} /* .single-post, body.page  */


/* メンバー個別ページ */
.single-members {
#main .inner {width: min(800px, 100%)}
#lead {
margin-bottom: 80px;
dl {display: grid; grid-template-columns: 240px 1fr; gap: 40px 50px; align-items: center;}
dt img {width: 100%; aspect-ratio: 1/1; object-fit: cover;}
dd .post {background: #5b5b5b; display: inline-block; padding: 2px 10px; margin-bottom: 15px; }
dd .name {font-size: clamp(2rem, 1.755rem + 1.04vw, 2.8rem); margin-bottom: 10px}
dd .mail {font-size: 1.6rem; line-height: 1.2}
}
}




/*---------------------------------------------------------------------
 Not 404
---------------------------------------------------------------------*/
.error404 {
  #title_head, #breadcrumb {display: none}
  #main {background: var(--bg_color) url(img/home/movie_bg.jpg); background-size: cover; background-position: 50% 50%; min-height: 60vh; 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; border-top: 1px solid white; color: white;
  .inner {width: min(1120px, 100%); }
  h2 {font-size: clamp(1.2rem, 0.955rem + 1.04vw, 2rem); margin-bottom: 16px; font-weight: 500}
  nav li:first-of-type {border-left: 1px solid white;}
  nav li {border-right: 1px solid white; float: left; padding: 0 10px; line-height: 1; margin-bottom: 8px; font-size: 1.4rem}
  nav li.current_page_item a {color: var(--link_color)}
  nav li a:hover {color: var(--link_color)} 
  .copy {margin-bottom: 0; clear: both; margin-top: 60px}
  .copy small {font-size: 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
---------------------------------------------------------------------*/
/* drawer メニュー */
.drawer-wrap {position: absolute; top: 0; right: 0;	}
.drawer-label {position: fixed; top: 50px; right: 19px; font-size: 10px; z-index: 100;}
#drawer-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  padding: 60px 0 0 0;
  z-index: 40;
  width: 30vw;
  min-width: 30vw;
  height: 100%;
  background: rgba(255, 255, 255, 0.93);
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(100%);
}
#drawer-checkbox:checked ~ #drawer-content {transform: translateX(0); box-shadow: 6px 0 24px rgba(0, 0, 0, 0.16);}

#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.3;}

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

#drawer-icon span {
    background: white;
    display: block;
    height: 1px;
    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 {
  -webkit-transform: rotate(0);
    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%;
  background: var(--bg_color);
}
#drawer-checkbox:checked ~ #drawer-icon span::before {transform: rotate(-45deg);}
#drawer-checkbox:checked ~ #drawer-icon span::after {transform: rotate(45deg);}




/*---------------------------------------------------------------------
 メディアクエリー
---------------------------------------------------------------------*/
/* スマホ「縦・横」対応 */
@media screen and (min-width: 320px) 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%}
  .single #single_page_nav ul {justify-content: center}

  header .site_title span {width: 85%; display: inline-block; padding-top: 5px}
  #drawer-content {width: 60vw;}

  .home .h_title_home {margin-bottom: 30px}
  .home #lead {margin-bottom: 60px}
  .home #info {margin-bottom: 60px}
  .home #news {margin-bottom: 60px}
  .home #video {margin-bottom: 0}
  .page-template-article_list_all article .entry_meta .category li {display: inline-block}      
  .page-template-article_list_all article .date {display: flex; flex-wrap: wrap; gap: 10px 15px}      
  .page-id-10, .page-id-150 {
  #past {margin-bottom: 20px}
  }

  .page-id-12.logged-in #sort_lead { top: 50px;}
  .page-id-3198.logged-in #sort_lead { top: 50px;}
  .page-id-12, .page-id-3198 {
    #sort_lead {top:50px}
    #sort_lead .anchor_link {margin-bottom: 10px}
    #sort_lead .anchor_link a {font-size: 1rem; padding: 5px 8px 5px 18px}
    #sort_lead .anchor_link a:before {left:8px}
    #sort_lead .year_sort {margin-bottom: 14px}
    #sort_lead .year_sort button {font-size: 1rem; padding: 4px 10px;}
    .sort-desc-asc button {font-size: 1rem}
    .each_wrap li {font-size: 1.2rem}
  }
  .page-id-14, .page-id-113 {
    #equipment_02 {margin-bottom: 20px}
  }

  .page-id-10, .page-id-150 {
    #current dl {gap: 20px}
    #past .each_wrap {gap: 0 20px} 
  }

 .single-members #lead dl {grid-template-columns: 1fr;}
  .page-template-article_list_all .entry_content {padding-bottom: 0!important}

  footer ul li {font-size: 1.2rem}
  footer .copy small {font-size: 1rem}
}


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


/* スマホ「縦」向き対応 */
@media screen and (min-width: 320px) and (orientation:portrait) {
  .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}
}


/* タブレット以降（640px 以降） */
@media screen and (min-width: 640px) {
  .logged-in header {padding-top: 32px; margin-top: -32px} /* ログイン時のアドミンバー対応（ヘッダー） */
  .logged-in .logo_lng ul {}
  .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: 140px 80%;}
  .post_line_horizontal article dt {padding-left: 10px}
  .entry_content .wp-block-table td, .wp-block-table th {padding: 1em;}


}


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


/* 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 {}
}