/***************************************************
  wordpress内のCSSカスタム
***************************************************/
.wp-element-caption {
  white-space: pre-wrap;
}

/***************************************************
  全体共通設定
***************************************************/

/* WEB-------------フォント-------------*/
body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #202020;
  overflow-x: hidden;
  line-height: 2;
}

/*----カラー変数--------------------*/
:root {
  --main_color: #A47864;

  /*グレー*/
  --pale_gray: #e9eff0;
  --light_gray: #b5c9c8;
  --dark_gray: #5a6363;

  /*--主にプログラム用--*/
  --red: #cc5852;
  --blue: #52B2CF;
  --purple: #BD74A8;
  --yellow: #9C7A00;
  --green: #498a7f;
  --orange: #D7730B;

  /*--各ROOMカラー--*/
  --room_a: #9C7A00;
  --room_a_rgb: 156, 122, 0;
  --room_b: #cc5852;
  --room_b_rgb: 204, 88, 82;
  --room_c: #498a7f;
  --room_c_rgb: 73, 138, 127;
  --room_d: #52B2CF;
  --room_d_rgb: 82, 178, 207;
  --room_e: #0f8c60;
  --room_e_rgb: 15, 140, 96;
  --room_f: #D7730B;
  --room_f_rgb: 215, 115, 11;


  /*--毎年全イベント共通--*/
  /*テクロスカラ-*/
  --tcross: #5E8000;
  --tcross_light: #AACE45;
  /*白*/
  --white: #fff;
}

/* -------------ブランドカラー--------------
#375c4a / rgb(55, 92, 74)がメインカラー
-----------------------------------------*/
header,
#copyright_text,
.main_color_bg {
  background: var(--main_color);
}

header {
  border-bottom: 2px solid #fabf14;
}

.main_color_text {
  color: var(--main_color);
}

.main_color_border {
  border: 1px solid var(--main_color);
}

.text_main {
  color: var(--main_color);
}

.bg_main {
  background-color: var(--main_color);
}

.text_link {
  color: #BA9325;
  text-decoration: none;
  background-color: transparent;
}

.text_link:hover {
  color: var(--main_color);
  text-decoration: none;
  background-color: transparent;
  transition-duration: 300ms;
}

.tcross_color {
  color: var(--tcross);
}

.tcross_bg {
  background-color: var(--tcross);
}

.notice_color {
  color: #961E3A;
}

.login_btn:hover {
  background-color: #c0c8cc;
  /* background-color: #c0ccc7; */
}

.onair_bg {
  background-color:#6495a4;
}



/* header-------------全体設定-------------*/
body>header {
  background-color: var(--main_color);
}

@media print {
  header {
    display: none;
  }
}

/* header -- sp nav ------------------ */
@media screen and (max-width: 1023px) {

  #navigation {
    margin-top: 5px;
    padding-bottom: 1rem;
    padding-left: 1rem;
    padding-top: 1rem;
  }

  /* logo + btn */
  #header__logo .custom-logo-link {
    display: block;
    height: auto;
    margin-left: 8px;
    margin-top: 6px;
    width: 38px;
  }

  #header__logo .custom-logo-link:hover {
    opacity: .8;
  }

  #header__logo img {
    display: inline-block;
    width: 100%;
    height: auto;
  }

  /* header > button */
  #header__logo>button {
    border-left: 1px solid var(--light_gray);
    cursor: pointer;
    display: block;
    height: 46px;
    margin-left: auto;
    position: fixed;
    top: 0px;
    z-index: 40 !important;
    width: 48px;
  }

  /* hamburger button */
  .hamburger {
    right: 0px;
  }

  .hamburger.-active .hamburger__line {
    background-color: white;
  }

  .hamburger.-active .hamburger__line::before {
    top: 0;
    transform: rotate(45deg);
  }

  .hamburger.-active .hamburger__line::after {
    top: 0;
    transform: rotate(-45deg);
  }

  .hamburger.-active .hamburger__text::before {
    content: '閉じる';
  }

  .hamburger__line {
    display: block;
    height: 2px;
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    background-color: white;
    transition: 0.4s;
  }

  .hamburger__line:before,
  .hamburger__line:after {
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    background-color: white;
    transition: inherit;
  }

  .hamburger__line:before {
    top: -6px;
  }

  .hamburger__line:after {
    top: 6px;
  }

  .hamburger__text {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  .hamburger__text::before {
    content: "メニュー";
    text-align: center;
    color: white;
    font-size: 10px;
    font-weight: 900;
  }

  /* 共通スタイル */
  .square_login,
  .square_register {
    position: absolute;
  }

  .login__icon,
  .register__icon {
    display: block;
    height: 21px;
    width: 21px;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.4s;
  }

  .login__icon::before,
  .login__icon::after,
  .register__icon::before,
  .register__icon::after {
    font-family: "Font Awesome 5 Free";
    font-size: 18px;
    font-weight: 900;
    color: var(--white);
    display: block;
    position: absolute;
    text-align: center;
    transition: inherit;
    width: 100%;
  }

  /* 各ボタンの個別スタイル */
  .square_login {
    right: 49px;
  }

  .square_register {
    right: 97px;
  }

  .login__icon::before {
    content: "\f007";
    opacity: 1;
  }

  .login__icon:hover::before, .login__icon:active::before {
    opacity: 0;
  }

  .login__icon::after {
    content: "\f26c";
    opacity: 0;
  }

  .login__icon:hover::after, .login__icon:active::after {
    opacity: 1;
  }

  .register__icon::before {
    content: "\f2f6";
    opacity: 1;
  }

  .register__icon:hover::before, .register__icon:active::before {
    opacity: 0;
  }

  .register__icon::after {
    content: "\e552";
    opacity: 0;
  }

  .register__icon:hover::after, .register__icon:active::after {
    opacity: 1;
  }

  .login__text, .register__text {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
  }

  .login__text::before {
    content: "ログイン";
    color: var(--white);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
  }

  .register__text::before {
    content: "登録する";
    color: var(--white);
    text-align: center;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
  }

  /* logo + btn */
  .header__nav-area {
    background-color: var(--main_color);
    opacity: 0;
    position: fixed;
    top: -100%;
    transition: 0.4s;
    z-index: 10;
    visibility: hidden;
    width: 100%;
  }

  .header__nav-area.-active {
    opacity: 1;
    top: 42px;
    visibility: visible;
  }

  /* navigation */
  .header__nav-area .global-navigation {
    padding: 5px 12px;
  }

  .global-navigation__list a {
    color: var(--white);
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;
  }

  .global-navigation__list a:hover {
    color: var(--room_d);
  }

  .global-navigation__list .box_btn a,
  .global-navigation__list.circle_btn a {
    color: var(--main_color);
    background-color: var(--white);
  }

  .global-navigation__list .box_btn,
  .global-navigation__list .circle_btn {
    display: inline-block;
    line-height: 2.5rem;
    margin-top: 2rem;
    height: 2.5rem;
    vertical-align: bottom;
  }

  .global-navigation__list .box_btn a {
    border-radius: 3px;
    display: inline;
    padding: 6px 1rem;
  }

  .global-navigation__list .circle_btn a {
    background-color: var(--white);
    border-radius: 50%;
    color: var(--main_color);
    display: inline-block;
    font-weight: bold;
    font-size: 32px;
    height: 2.0rem;
    line-height: 2.0rem;
    margin-left: 0.3rem;
    text-align: center;
    vertical-align: middle;
    width: 2.0rem;
  }

}

/* header -- pc nav ------------------ */
@media screen and (min-width: 1024px) {
  header>nav {
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    /* max-width: 1024px; */
    padding-right: 10px;
    padding-left: 10px;
    margin-left: auto;
    margin-right: auto;
  }

  #navigation {
    align-self: center;
    height: 100%;
    width: calc(100% - 60px);
  }

  /* logo + btn */
  #header__logo .custom-logo-link {
    display: block;
    height: auto;
    /* margin-left: 10px; */
    margin-top: 6px;
    width: 38px;
  }

  #header__logo img {
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0;
  }

  /* navigation */
  .global-navigation__list {
    display: flex;
    /* justify-content: center; */
    justify-content: flex-end;
    position: relative;
  }

  .global-navigation__list li {
    margin-right: 1.5em;
  }

  .global-navigation__list li:nth-last-child(2) {
    margin-right: 5em;
  }

  .mr--pc {
    margin-right: 3.5em;
  }

  .global-navigation__list li a {
    color: var(--white);
  }

  .global-navigation__list li a:hover {
    color: #BA9325;
  }

  .global-navigation__list li:last-child {
    position: absolute;
    right: 6px;
    height: 1.6rem;
    width: 1.6rem;
    background-color: var(--white);
    border-radius: 50%;
    text-align: center;
    vertical-align: middle;
    margin-right: 0em;
  }

  .global-navigation__list li:last-child:hover {
    background-color: #BA9325;
  }

  .global-navigation__list li:last-child a {
    color: var(--main_color);
    font-weight: bold;
    font-size: 28px;
    vertical-align: middle;
    line-height: 1.6rem;
  }
}

@media screen and (min-width: 1280px) {
  .global-navigation__list li {
    margin-right: 3.5em;
  }
}

/***************************************************
  共通パーツ
***************************************************/
/* 見出し ---------------------------- */
.common_title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: .5rem;
  position: relative;
}

.common_title::after {
  background-color: var(--main_color);
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.5rem;
}

.sub_title {
  color: var(--main_color);
  font-size: 1.2rem;
  padding-bottom: .5rem;
}


/* 注意書きマーク ---------------------------- */
.kome::before {
  content: "※";
  margin-left: -1rem;
  padding-right: 0.25rem;
}

ol.numbers {
  list-style-type: none;
  counter-reset: item;
  margin-left: 0;
}

ol.numbers li:before {
  counter-increment: item;
  content: counter(item)')';
  margin-right: 5px;
}


/* 下層ページ 主に投稿記事で使用 */
.article_header_title {
  margin-bottom: 0;
}

.category-news .article_header_title .common_title {
  margin-bottom: .5rem;
}

.post-content,
.page-content {
  min-height: 30vh;
}

.post-content p,
.page-content p {
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

/* footer -- 事務局周り ------------------------ */
address.organizer,
address.handling_office {
  font-style: normal !important;
}

address {
  display: flex;
  margin-bottom: 1.5rem;
}

address>h4 {
  white-space: nowrap;
  width: 6.5rem !important;
}

@media (min-width: 768px) {
  footer address {
    width: 50%;
  }
}

/* footer -- トップへ戻る ------------------------ */
.page_top {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
  cursor: pointer;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity .6s, visibility 1s, transform 1s;
}

.page_top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

.page_top:hover {
  opacity: .7;
}


/***************************************************
  home
***************************************************/

/* main_view -- メインビジュアル ------------------ */
.main_view {
  padding-top: 50px;
}

@media screen and (min-width: 1024px) {
  .main_view {
    width: 100%;
    margin: 0 auto;
    max-width: 1024px;
  }
}

/* news -- 新着情報 ------------------ */
/*--スクロールバー --*/
#news_scroll {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

#news_scroll::-webkit-scrollbar {
  width: 5px;
}

#news_scroll::-webkit-scrollbar-track {
  background-color: #ccc;
}

#news_scroll::-webkit-scrollbar-thumb {
  background-color: var(--main_color);
}

/* 背景色 */
#news_scroll .newslist li:nth-of-type(even) {
  background-color: rgb(245 245 244);
}

.newslist li a:hover {
  color: #BA9325;
}

/* PICKUP -- Swiper 全体設定 -------------------- */
.swiper-slide {
  border: solid 1px var(--dark_gray);
  border-radius: 4px;
}

.swiper-slide .thumbnail>img {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.swiper-slide .custom-fields {
  padding: 3px 10px;
}

/* PICKUP -- Swiper SP用 -------------------- */
@media screen and (max-width: 1023px) {

  .swiper-button-prev,
  .swiper-button-next {
    color: #fff !important;
    background-color: var(--main_color);
    border-radius: 100%;
    width: 30px !important;
    height: 30px !important;
    opacity: .6;
    z-index: 30;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 10px !important;
    font-weight: 900;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 5px) !important;
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 5px) !important;
  }

  .swiper-button-prev:hover,
  .swiper-button-next:hover {
    opacity: 1;
  }
}

/* #register_info -- 参加登録 ----------------------- */

#register_info table {
  border-left: 1px solid rgb(214 211 209);
  /*←stone-300*/
  border-top: 1px solid rgb(214 211 209);
  /*←stone-300*/
}

#register_info th,
#register_info td {
  border-bottom: 1px solid rgb(214 211 209);
  /*←stone-300*/
  border-right: 1px solid rgb(214 211 209);
  /*←stone-300*/
  padding: 12px;
}

#register_info th {
  background-color: rgb(245 245 244);
  font-weight: normal;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {

  #register_info th,
  #register_info td {
    display: block;
    width: 100%;
  }
}

/***************************************************
			コンタクトフォーム
***************************************************/
.wpcf7-form {
  border-top: 1px solid var(--light_gray);
  margin-top: 2.5em;
}

.wpcf7-form p {
  margin-top: 1.5em;
}

.Form-Item-Label-Required {
  background-color: var(--main_color);
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  margin-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  width: 48px;
  text-align: center;
}

.wpcf7-form-control-wrap {
  border-bottom: 1px solid var(--light_gray);
  display: block;
  padding-bottom: 1.5em;
  padding-top: .8em;
}

.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap textarea {
  background: #eaedf2;
  border: 1px solid var(--light_gray);
  border-radius: 6px;
  padding-left: 1em;
  padding-right: 1em;
  height: 48px;
  flex: 1;
  width: 100%;
  max-width: 410px;
  font-size: 18px;
}

.wpcf7-form-control-wrap textarea {
  height: 150px;
  width: 100%;
  max-width: 768px;
  padding-bottom: 1em;
  padding-top: 1em;
}

.wpcf7-submit {
  background-color: var(--main_color);
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 0.05em;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  transition: filter 0.2s ease;
  width: 320px;
}

.wpcf7-submit:hover {
  filter: brightness(1.3);
  box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.5);
}


/* recaptchaバッジを基本非表示 */
body .grecaptcha-badge {
  display: none;
}

/* 問い合わせページだけ表示 postid-2は問い合わせフォームを記載しているページのID */
body.page-id-2 .grecaptcha-badge {
  display: block;
}

/***************************************************
  Program-detail
***************************************************/

/* nav-tabs */
.nav-tabs {
  border-bottom: 1px solid var(--main_color);
}

.nav-tabs .nav-link {
  text-align: center;
  border-radius: 0;
  color: #9CA3AF;
  /*tailwind gray-400と同色*/
  font-weight: bold;
  transition: .5s;
}

.nav-tabs .nav-link:hover {
  color: var(--dark_gray);
}

.nav-tabs .nav-link.active {
  color: var(--main_color);
  cursor: initial;
  font-weight: bold;
  border-top: 1px solid var(--main_color);
  border-right: 1px solid var(--main_color);
  border-left: 1px solid var(--main_color);
  border-bottom: 1px solid var(--white);
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  background: var(--white);
}

.nav-tabs .nav-item {
  margin-bottom: -2px;
  cursor: pointer;
}

/*---ROOM別ボタン---------------*/

.btn_all {
  color: var(--main_color);
  background-color: var(--white);
  border-color: var(--main_color);
}

.btn_all:hover {
  color: var(--white);
  background-color: var(--main_color);
}

.btn_all.current {
  color: var(--white);
  background-color: var(--main_color);
}

.btn_roomA {
  color: var(--room_a);
  background-color: var(--white);
  border-color: var(--room_a);
}

.btn_roomA:hover,
.btn_roomA.current {
  color: var(--white);
  background-color: var(--room_a);
}

.btn_roomB {
  color: var(--room_b);
  background-color: var(--white);
  border-color: var(--room_b);
}

.btn_roomB:hover,
.btn_roomB.current {
  color: var(--white);
  background-color: var(--room_b);
}

/*---ROOM別詳細部分カラー---------------*/

.roomA_time {
  background-color: rgba(var(--room_a_rgb), 0.1);
  color: var(--room_a);
  border-right: 3px solid var(--room_a);
}

.text_roomA {
  color: var(--room_a);
}

.roomB_time {
  background-color: rgba(var(--room_b_rgb), 0.1);
  color: var(--room_b);
  border-right: 3px solid var(--room_b);
}

.text_roomB {
  color: var(--room_b);
}

.roomAll_time {
  background-color: rgba(87, 178, 228, 0.1);
  color: #57B2E4;
  border-right: 3px solid #57B2E4;
}

.text_roomAll {
  color: #57B2E4;
}

@media only screen and (max-width : 768px) {
  .roomA_time {
    border-right: none;
    border-left: 3px solid var(--room_a);
  }

  .roomB_time {
    border-right: none;
    border-left: 3px solid var(--room_b);
  }

  .roomAll_time {
    border-right: none;
    border-left: 3px solid #57B2E4;
  }
}

/* ==============================
   タイムテーブル全体
   ============================== */
.tt-wrapper{
  max-width:1100px;
  margin:0 auto;
  padding:8px 16px;
  overflow-x:auto; /* ★横スクロール対応 */
}

/* ==============================
   グリッド本体
   ============================== */
.tt-grid{
  position:relative;
  display:grid;
  grid-template-columns: var(--gutter,72px) repeat(var(--cols), 1fr);
  grid-template-rows: var(--headerH,48px) repeat(var(--rows), var(--rowh,28px));
  --gy: 8px;
  gap: var(--gy);

  --pitch: calc( (var(--rowh) + var(--gy)) * var(--hourRows) );
  --base: calc( var(--headerH) + var(--gy) );

  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.15) 0 1px, transparent 1px)
      calc(var(--gutter)) var(--base) / calc(100% - var(--gutter)) var(--pitch) repeat-y,
    linear-gradient(to bottom,
      rgba(0,0,0,.07) 0 1px, transparent 1px)
      calc(var(--gutter)) calc(var(--base) + var(--pitch) / 2)
      / calc(100% - var(--gutter)) var(--pitch) repeat-y;
}

/* ==============================
   Roomヘッダ
   ============================== */
.tt-colhead{
  position: sticky;
  top:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--room-color, #b71c1c);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  font-weight:700;
  font-size:14px;
}

/* ==============================
   時刻ラベル
   ============================== */
.tt-time{
  grid-column:1;
  align-self:start;
  margin-top:-8px;
  font-size:12px;
  color:#666;
  padding-left:4px;
  white-space:nowrap;
  font-feature-settings:"tnum";
}

/* ==============================
   セッションカード
   ============================== */
.tt-item{
  position:relative;
  background:#f7f7f7;
  border:1px solid #ddd;
  border-left:4px solid var(--room-color, #c62828);
  padding:10px 12px 28px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:box-shadow .15s ease, transform .05s;
  height:100%;
  box-sizing:border-box;
}
.tt-item:hover{box-shadow:0 6px 18px rgba(0,0,0,.12);}

/* 上段バー */
.tt-item__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
}

/* field色ドット */
.field-dot{
  width:12px; height:12px; border-radius:2px;
  background:#bbb;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
}
.is-field-pci .field-dot{ background:#d32f2f; }
.is-field-evt .field-dot{ background:#f57c00; }
.is-field-shd .field-dot{ background:#1976d2; }
.is-field-ms .field-dot{ background:#388e3c; }
.is-field-arrhythmia .field-dot{ background:#f9a825; }

/* typeバッジ */
.type-badges{ display:flex; gap:6px; }
.badge{ font-size:11px; padding:4px 8px; border-radius:4px; font-weight:700; }
.badge--muted{ color:#555; background:#eee; border:1px solid #ddd; }
.badge--live{ color:#fff; background:#d32f2f; border:1px solid #b71c1c; }

/* タイトル等 */
.tt-item__time{ font-size:12px; color:#666; margin:2px 0 4px; }
.tt-item__title{ font-size:14px; font-weight:700; margin:0 0 2px; line-height:1.3; }
.tt-item__sub{ font-size:12px; color:#666; }

/* スポンサー */
.tt-item__sponsor{
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:11px;
  color:#666;
  max-width: calc(100% - 20px);
  word-break: break-word;
}

/* ==============================
   長尺カード圧縮
   ============================== */
.tt-item.is-long .tt-item__inner{ max-height: calc(100% - 24px); overflow:hidden; }
.tt-item.is-long .tt-item__inner::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:28px;
  background: linear-gradient(to bottom, rgba(247,247,247,0), rgba(247,247,247,.95));
}
