/*===========================
common
=============================*/
* {
  font-family: "Zen Maru Gothic";
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: inherit;
  background-color: transparent;
}

.text-red,
.news-container .text-red {
  --text-opacity: 1;
  color: red;
  color: rgba(255, 0, 0, var(--text-opacity));
}

.mt-6 {
  margin-top: 1.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

img {
  width: 100%;
  display: block;
}

.pc {
  display: inline-block;
}

.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: inline-block;
  }
}

/*===========================
header
=============================*/
.nav-logo {
  width: 187px;
  height: 59px;
  z-index: 2;
  position: absolute;
  left: 0.85rem;
}

.nav-logo img {
  width: 100%;
}

.pc-img {
  margin-top: 18px;
  width: 100%;
  height: 100%;
}

.menu {
  /* メニューを横に */
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 5.9rem;
  z-index: 2;
  background-color: transparent;
  gap: 2rem;
  width: auto;
  justify-content: flex-end;
  margin-right: 2rem;
}

.menu-list a {
  /* font-size: 1.6rem; */
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3125;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  height: 5.9rem;
  margin: 0 0;
  color: #ffffff;
  text-decoration: none;
  padding: 0 0;
}

.slider-item-style {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 0;
  width: 100%;
  padding-top: 50%;
}



.slider-item1 {
  background-image: url('../img/pc_main02.jpg');
  width: 100%;
}

.slider-item2 {
  background-image: url('../img/pc_main01.jpg');
  width: 100%;
}



.slider-wrapper {
  position: relative;
}

.main-img {
  position: absolute;
  top: 10vw;
  left: 0;
  width: 40%;
}

.main-img img {
  width: 100%;
  height: auto;
}

.mv-date {
  font-family: 'Zen Maru Gothic', sans-serif;
  /* font-size: 2.2rem; */
  font-size: 30px;
  font-weight: bold;
  line-height: calc(46 / 31);
  color: #fff;
  text-shadow: 0 0 6px #000;
  text-align: center;
  margin-left: 7.23vw;
}

.register_btn {
  margin-top: 4%;
  text-align: center;
  margin-left: 7.23vw;
}

.mv_register_btn {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 900;
  padding: 13px 54px 13px 41px;
  font-size: 21px;
  line-height: 30px;
  display: inline-block;
  max-width: 292px;
  background-color: #F38200;
  border: #FCA518 4px solid;
  color: #fff;
  text-decoration: none;
  position: relative;
  border-radius: 60px;
  transition: background-color .3s, color .3s;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.mv_register_btn::after {
  content: "";
  background-image: url(../img/btn_arrow.svg);
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 7%;
  transform: translateY(-50%);
}

.mv_register_btn:hover {
  background-color: #fff;
  color: #FCA518;
}

.announce {
  text-align: center;
  background-color: #F38200;
  transition: background-color .3s;
}

.announce:hover {
  background-color: #FCA518;
}

.announce a {
  display: block;
  font-size: 20px;
  line-height: calc(29 / 20);
  font-weight: bold;
  color: #fff;
  padding: 19px 0 22px;
}

/*===========================
ハンバーガーメニュー
=============================*/
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
  background-color: #fff;
  display: none;
}

.drawer-nav {
  z-index: 10;
}

@media screen and (max-width: 768px) {

  .drawer-hamburger-icon,
  .drawer-hamburger-icon:after,
  .drawer-hamburger-icon:before {
    display: inline-block;
  }
}

/*===========================
769px-1580px
=============================*/
@media screen and (min-width: 769px) and (max-width:1580px) {
  .main-img {
    width: 45%;
  }

  .mv-date {
    font-size: 19px;
  }
}

@media screen and (min-width: 769px) and (max-width:850px) {
  .mv-date {
    font-size: 15px;
  }

  .mv_register_btn {
    font-size: 16px;
    padding: 10px 44px 10px 31px;
  }
}

/*===========================
header(tab)
=============================*/
@media screen and (max-width: 768px) {
  .nav-logo {
    width: 140px;
    height: auto;
    z-index: 2;
    position: absolute;
    left: 0.85rem;
  }

  .slider-item-style {
    padding-top: 146%;
    background-size: contain;
    background-position: center top;

  }

  .slider-item1 {
    background-image: url('../img/sp_main02.jpg');
    height: initial;
  }

  .slider-item2 {
    background-image: url('../img/sp_main01.jpg');
    height: initial;
  }

  .main-img {
    width: 100%;
  }

  .menu {
    display: none;
  }

  /* 開催日時が2行に折り返さないよう、30pxを上限に画面幅へ合わせて縮める。
     幅ごとの固定値だと430px（iPhoneのPro Maxなど）で字が大きすぎて折り返していた */
  .mv-date {
    font-size: min(30px, 5.3vw);
  }

  /* PCはメイン画像が画面の左半分だけなので margin-left でイラストに位置を合わせているが、
     スマホは画像が画面いっぱいなので、その分だけ右にずれてしまう。ここでは解除して中央に置く */
  .mv-date,
  .register_btn {
    margin-left: 0;
  }

  .mv_register_btn {
    padding: 7px 45px 7px 28px;
    font-size: 14px;
  }

  .mv_register_btn::after {
    width: 16px;
    height: 16px;
  }

  .slick-prev img,
  .slick-next img {
    width: 100%;
  }

  .register_btn {
    margin-top: 25px;
  }
}

/*===========================
header(sp)
=============================*/
@media screen and (max-width: 520px) {
  .register_btn {
    margin-top: 20px;
  }

  .nav-logo {
    width: 100px;
    height: auto;
  }
}



@media screen and (max-width: 398px) {
  .register_btn {
    margin-top: 10px;
  }

  .slick-prev {
    left: 0;
  }

  .slick-next {
    right: 0;
  }

  .mv_register_btn {
    padding: 3.5px 22px 3.5px 14px;
  }

  .nav-logo {
    width: 90px;
    height: auto;
  }
}


/*===========================
広告
=============================*/
.product-wrapper {
  background-color: #f3f3f3;
}

.product-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-row: auto;
  padding: 100px 0;
  margin: 0 auto;
  max-width: 769px;
}

.product-list {
  margin: 0 auto;
}


@media screen and (max-width: 768px) {
  .product-inner {
    -ms-grid-columns: minmax(0, 1fr);
    -ms-grid-rows: minmax(0, 1fr) 3rem minmax(0, 1fr);
    display: -ms-grid;
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    padding: 2rem 0;
  }
}


/*===========================
フッター
=============================*/
footer {
  -webkit-box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 10px 10px -5px rgb(0 0 0 / 4%);
}

.footer-container {
  text-align: center;
  padding: 40px 10px;
  display: flex;
  flex-direction: column;
}

.footer-logo {
  width: 100%;
  max-width: 166.08px;
  margin: 0 auto;
}

.footer-text {
  margin-top: 20px;
  white-space: nowrap;
}

.footer-text:nth-last-child(2) {
  font-size: 14px;
  margin: 20px auto 0;
}

.more-information {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: row;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .more-information {
    display: block;
    text-align: left;
  }
}

.information-item {
  padding: 0 1rem;
  margin-top: 1rem;
}

.information-item+.information-item {
  border-left: 1px solid #212121;
}

@media screen and (max-width: 768px) {
  .information-item+.information-item {
    border-left: none;
  }
}


@media screen and (min-width: 1024px) {
  .footer-text:last-child {
    margin-top: 36px;
  }

  .more-information {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
  }

  .information-item {
    margin-top: 0;
  }
}

/*===========================
事前登録ボタン
=============================*/
.pre-registration-link {
  width: 100%;
  max-width: 140px;
  height: 100%;
  max-height: 140px;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 50;
  margin: 30px;
  filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.pre-registration-link span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
  line-height: calc(32 / 22);
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #F38200;
  border-radius: 100vw;
  padding-bottom: 4px;
  transition: background-color .3s, color .3s;
}

.pre-registration-link:hover span {
  border: 3px solid #FCA518;
  background-color: #fff;
  color: #FCA518;
}

/*===========================
限定企画
=============================*/
.plan-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

@media screen and (min-width: 768px) {
  .plan-wrapper {
    flex-direction: row;
    margin-top: 2.5rem;
  }
}

/*===========================
お知らせ
=============================*/
.news {
  background-color: #d9ebf9;
}

.news-list {
  margin-top: 30px;
}

.news-unit {
  padding: 18px 30px;
  margin-top: 1.25rem;
  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  border-radius: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  --bg-opacity: 1;
  background-color: #fff;
  background-color: rgba(255, 255, 255, var(--bg-opacity));
}

.news-unit:first-child {
  margin-top: 0;
}

.news-unit time {
  font-size: 18px;
  line-height: calc(26 / 18);
}

.news-feature {
  display: flex;
}

.category {
  font-size: 14px;
  line-height: calc(20 / 14);
  padding: 0.22rem 0.5rem 0.28rem;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.125rem;
  background-color: #f38200;
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
}

.news-title {
  font-size: 16px;
  line-height: calc(24 / 16);
  margin-top: 0.75rem;
}

/* 開催期間セクション */
.period {
  background-color: #d9ebf9;
}

.period-container {
  position: relative;
  z-index: 30;
}

.period-heading {
  color: #f38200;
}

.period-list {
  margin-top: 30px;
}

/* いわきの案内と、福島で開催するイベントの一覧を区切る中見出しと注記 */
/* 関連イベント案内（いわき内覧会）は、この下の「わいわい市in福島」とは
   開催地も日程も別のイベントのため、セクションごと背景色を分けて区別する */
#home-period-related {
  background-color: #fdf1e3;
}

#home-period-related .period-heading {
  color: #f38200;
}

#home-period .period-heading {
  color: #4299e1;
}

/* 開催場所を勘違いされると困るので、白い枠のままにせず
   太字＋青い枠で他の注意書きより目立たせる */
.period-lead-note {
  margin-top: 30px;
  /* 左右の余白は詰めめ。スマホで「大道芸人ショー、駄菓子コーナーについては、」が1行に収まる */
  padding: 0.9rem 0.7rem;
  border-radius: 0.25rem;
  background-color: #eef6fc;
  border: 2px solid #4299e1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

/* 「わいわい市in福島　イベント案内」はスマホで幅に入りきらないため縮める。
   長いので入りきらないときは全角スペースの位置（「わいわい市in福島」と「イベント案内」の間）で改行する */
@media screen and (max-width: 767px) {
  #home-period .period-heading {
    font-size: min(2rem, 6.3vw);
  }
}

.period-item {
  padding: 18px 30px;
  margin-top: 1.25rem;
  -webkit-box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-left: 6px solid #4299e1;
}

.period-item:first-child {
  margin-top: 0;
}

.period-condition-note {
  text-align: center;
  color: red;
  font-weight: 900;
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

/* イベント名の左右に添える、透過処理済みのイラスト（魔法使いなど）。
   カード背景に薄く敷くやり方と違い、色や輪郭をはっきり見せたいときに使う */
.period-title-illust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.period-title-illust-img {
  width: 56px;
  height: auto;
  flex-shrink: 0;
}

@media screen and (min-width: 600px) {
  .period-title-illust-img {
    width: 76px;
  }
}

@media screen and (min-width: 1024px) {
  .period-title-illust-img {
    width: 96px;
  }
}

/* 野菜のイラストは見出しの右側だけにまとめる。小さめのサイズにして、
   上下・左右・傾きをそれぞれ大きくずらし、1点ずつ散らばって見えるようにする */
.period-title-illust-cluster {
  display: flex;
  align-items: center;
}

.period-title-illust-cluster .period-title-illust-img {
  width: 30px;
}

@media screen and (min-width: 600px) {
  .period-title-illust-cluster .period-title-illust-img {
    width: 40px;
  }
}

@media screen and (min-width: 1024px) {
  .period-title-illust-cluster .period-title-illust-img {
    width: 50px;
  }
}

.period-title-illust-cluster .period-title-illust-img:nth-child(1) {
  transform: translate(2px, -16px) rotate(-16deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(2) {
  transform: translate(-6px, 12px) rotate(14deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(3) {
  transform: translate(4px, -6px) rotate(9deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(4) {
  transform: translate(-4px, 16px) rotate(-13deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(5) {
  transform: translate(5px, -14px) rotate(18deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(6) {
  transform: translate(-3px, 8px) rotate(-8deg);
}

.period-title-illust-cluster .period-title-illust-img:nth-child(1),
.period-title-illust-cluster .period-title-illust-img:nth-child(2) {
  width: 44px;
}

@media screen and (min-width: 600px) {
  .period-title-illust-cluster .period-title-illust-img:nth-child(1),
  .period-title-illust-cluster .period-title-illust-img:nth-child(2) {
    width: 58px;
  }
}

@media screen and (min-width: 1024px) {
  .period-title-illust-cluster .period-title-illust-img:nth-child(1),
  .period-title-illust-cluster .period-title-illust-img:nth-child(2) {
    width: 72px;
  }
}

/* いわき内覧会のカード。セクション自体の背景色（#home-period-related）で
   もう区別できているので、カードは他と同じ白のまま、左枠線などのアクセントだけオレンジにする */
.period-item-iwaki {
  border-left-color: #f38200;
}

.period-item-iwaki .period-category,
.period-item-iwaki .period-detail dt,
.period-item-iwaki .period-flyer-link {
  background-color: #f38200;
}

.period-item-iwaki .period-flyer-link {
  border-color: #f38200;
  color: #fff;
}

.period-item-iwaki .period-flyer-link:hover {
  background-color: #fff;
  color: #f38200;
}

.period-item-iwaki .period-note {
  background-color: #fff8ee;
  border-color: #f6d9b3;
}

/* 日付は「2026年11月13 / 日・14日」のように途中で折り返させない。
   一番長い「2026年11月13日・14日」が入りきらない狭い画面では、24pxを上限に縮める */
.period-item time {
  font-size: min(24px, 7vw);
  font-weight: 700;
  color: #4299e1;
  white-space: nowrap;
}

/* いわき内覧会だけ日付もオレンジに。.period-item time と詳細度が同じなので、
   後ろに置いて確実に上書きされるようにする */
.period-item-iwaki time {
  color: #f38200;
}

.period-feature {
  display: flex;
  /* 日付と開催曜日が横に並びきらないときは、曜日を下の行に送る */
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.period-category {
  font-size: 1rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.125rem;
  background-color: #4299e1;
  color: #fff;
  white-space: nowrap;
}

.period-title {
  font-size: 18px;
  font-weight: 600;
  margin-top: 0.75rem;
}

.period-title .heading {
  color: #000;
}

/* イベント名が「わいわい野菜詰め／市」のように語の途中で折り返さないよう、
   狭い画面では2remを上限に画面幅へ合わせて縮める。
   「大道芸人ショー・駄菓子コーナー」だけは長いので、中黒のところで2行になる */
@media screen and (max-width: 767px) {
  .period-title .heading {
    font-size: min(2rem, 6.3vw);
  }
}

/* 会期・場所などの明細。見出しが2文字なので、セミナー用の項目行（見出し5.5em固定）を
   流用すると見出しと内容の間が大きく空いてしまう。ここは内容幅ぴったりに詰めて中央に置く */
.period-detail {
  margin-top: 0.75rem;
  display: grid;
  grid-template-columns: -webkit-max-content minmax(0, -webkit-max-content);
  grid-template-columns: max-content minmax(0, max-content);
  justify-content: center;
  gap: 0.5rem 0.75rem;
  font-size: 16px;
  line-height: 1.7;
}

/* 見出しは「講師」ラベルと同じ小さなタグ表現に揃える */
.period-detail dt {
  font-size: 16px;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 0.125rem;
  background-color: #4299e1;
  color: #fff;
  align-self: center;
  text-align: center;
  white-space: nowrap;
}

.period-detail dd {
  font-weight: 600;
}

/* 開催チラシへのボタン。カード自体が白背景なので、枠線ではなく塗りのボタンにする */
.period-flyer {
  margin-top: 1.25rem;
  text-align: center;
}

.period-flyer-link {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background-color: #4299e1;
  border: 3px solid #4299e1;
  transition: background-color .3s, color .3s;
}

.period-flyer-link:hover {
  background-color: #fff;
  color: #4299e1;
}

/* PCは横幅に余裕があるので、会期・場所の横にチラシボタンを並べる（スマホ・タブレットは縦積みのまま） */
@media screen and (min-width: 1024px) {
  .period-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }

  .period-body .period-detail,
  .period-body .period-flyer {
    margin-top: 1rem;
  }
}

/* 大道芸人ショーの演目と時間。セミナーと同じ配色にして、同じ「予定の一覧」だと分かるようにする */
.program-list {
  width: 100%;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.program-item {
  padding: 12px 16px;
  border: 1px solid #cfe3f3;
  border-radius: 0.5rem;
  background-color: #f7fbfe;
}

/* 駄菓子コーナーの説明にもイラストを薄く敷く。仕組みはカードの背景
   （.period-item-bg）と同じ */
/* 駄菓子コーナーの説明に、透過処理済みの駄菓子袋イラストを添える */
.program-item-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.program-illust-img {
  width: 64px;
  height: auto;
  flex-shrink: 0;
}

@media screen and (min-width: 600px) {
  .program-illust-img {
    width: 84px;
  }
}

.program-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #0066cc;
}

.program-time {
  margin-top: 0.35rem;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.7;
}

/* 時間は「1回目：12:15～」の途中で折り返さず、回ごとに改行する */
.program-time span {
  display: inline-block;
  margin-right: 0.75rem;
  white-space: nowrap;
}

/* 日本語は語の途中でも改行されてしまうので、意味のかたまりをこれで囲む。
   かたまりの中では改行されず、入りきらないときはかたまりごと次の行に送られる */
.phrase {
  display: inline-block;
}

/* 時間ではなく説明文が入る項目（駄菓子コーナーなど） */
.program-text {
  margin-top: 0.35rem;
  font-size: 17px;
  line-height: 1.7;
}

/* 特に伝えたい個数などは、色だけでなく太字にして目に留まりやすくする */
.program-text .text-red {
  font-weight: 700;
}

.program-note {
  margin-top: 0.4rem;
  font-size: 16px;
  line-height: 1.6;
  color: #5a6b7b;
}

/* PCは3つの演目を横並びにする */
@media screen and (min-width: 1024px) {
  .program-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  /* 演目ではない項目は、3列に混ぜず1行を使って横いっぱいに置く */
  .program-item-wide {
    grid-column: 1 / -1;
  }
}

/* イベント名の下に置く注意書き。カードが白背景なので薄い枠で囲って本文と区別する */
.period-note {
  width: 100%;
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #f7fbfe;
  border: 1px solid #dbe6ef;
  font-size: 17px;
  line-height: 1.6;
}

.period-note li + li {
  margin-top: 0.25rem;
}

/* 注意書きの中で特に伝えたい部分。色だけでなく太字にして目に留まりやすくする */
.period-note .text-red {
  font-weight: 700;
}

/* 特別セミナー */
.seminar-list {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.seminar-item {
  padding: 16px;
  border: 1px solid #cfe3f3;
  border-radius: 0.5rem;
  background-color: #f7fbfe;
}

.seminar-head {
  padding-bottom: 0.75rem;
  border-bottom: 1px dashed #b9d8ef;
}

.seminar-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #0066cc;
}

.seminar-lecturer {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  margin-top: 0.5rem;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

/* 社名は途中で切らず、入らないときは行ごと下げる */
.seminar-lecturer-name {
  white-space: nowrap;
}

/* 「講師」の見出しラベル */
.seminar-label {
  font-size: 15px;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 0.125rem;
  background-color: #4299e1;
  color: #fff;
  /* 社名が長くてもラベルは縮めない */
  flex-shrink: 0;
  white-space: nowrap;
}

.seminar-detail {
  margin-top: 0.75rem;
}

/* 項目名と内容を2列に揃える */
.seminar-row {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 0.75rem;
  padding: 0.4rem 0;
  font-size: 17px;
  line-height: 1.7;
}

.seminar-row + .seminar-row {
  border-top: 1px solid #e6f0f8;
}

.seminar-row dt {
  font-weight: 700;
  color: #5a6b7b;
}

/* 時間や会場名は語の途中で折り返さず、まとまりごとに改行する */
.seminar-time,
.seminar-place {
  display: inline-block;
  margin-right: 0.75rem;
  white-space: nowrap;
}

.seminar-capacity {
  font-weight: 700;
  color: #d94800;
}

/* 無料のセミナーと見間違えないよう、参加費が有料のものだけ赤字で強調する */
.seminar-fee-paid {
  font-weight: 700;
  color: #c53030;
}

.seminar-apply {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #fff;
  border: 1px solid #dbe6ef;
}

/* 画面が狭いときは項目名を内容の上に置く（横に並べると文字が枠からはみ出すため） */
@media screen and (max-width: 400px) {
  .seminar-item {
    padding: 12px;
  }

  .seminar-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: 0.5rem 0;
  }

  .seminar-row dt {
    font-size: 13px;
  }
}

.seminar-caution {
  font-size: 17 px;
  font-weight: 700;
  line-height: 1.6;
  color: #c53030;
  margin-top: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
}

.text-blue {
  color: #0066cc;
}

.text-orange {
  color: #f38200;
}

.text-green {
  color: #00a86b;
}

@media screen and (min-width: 1024px) {
  .news-list {
    margin-top: 2.5rem;
  }

  .news-unit {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 30px;
  }

  .news-feature {
    white-space: nowrap;
  }

  .category {
    margin-left: 1rem;
  }

  .news-title {
    margin-top: 0;
    margin-left: 1rem;
  }
}

@media screen and (min-width: 1024px) {
  .period-list {
    margin-top: 2.5rem;
  }

  .period-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
  }

  .period-feature {
    white-space: normal;
    gap: 10px;
  }

  .period-category {
    margin-left: 0;
  }

  .period-title {
    margin-left: 0;
    margin-top: 1rem;
  }

  /* PCは2つのセミナーを横並びにする */
  .seminar-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
  }

  .seminar-item {
    padding: 20px;
  }

  .seminar-name {
    font-size: 18px;
  }

  .seminar-row {
    grid-template-columns: 6em 1fr;
    font-size: 17px;
  }
}

@media screen and (min-width: 1280px) {
  .news .news-container {
    width: 50%;
  }
}

/*===========================
開催概要
=============================*/
.event-outline {
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  --bg-opacity: 1;
}

.container {
  width: 100%;
  padding: 40px 1rem 60px 1rem;
  margin-left: auto;
  margin-right: auto;

}

.heading {
  font-size: 2rem;
  /* 2行になったときに行が詰まらないようにする */
  line-height: 1.3;
  font-weight: 900;
  /* font-style: italic; */
  text-align: center;
  color: #4299e1;
  margin-bottom: 15px;
}

.event-outline-wrapper {
  margin-top: 30px;
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.box-heading {
  --text-opacity: 1;
  color: #2d3748;
  color: rgba(45, 55, 72, var(--text-opacity));
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.text-wrapper {
  margin-top: 20px;
  font-size: 1.125rem;
  line-height: 2;
  text-align: center;
  margin-bottom: 40px;
}

.text-left {
  text-align: left;
}

.map-wrapper {
  height: 0;
  overflow: hidden;
  position: relative;
  margin-top: 0.5rem;
  text-align: center;
}

/* 地図を枠いっぱいに広げる（指定しないと600×450pxのまま表示され、端が切れる） */
.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media screen and (min-width: 768px) {
  .container {
    max-width: 768px;
  }

  .heading {
    font-size: 3rem;
    line-height: calc(61 / 42);
  }

  .box-heading {
    font-size: 1.875rem;
  }
}

@media screen and (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }

  .event-outline-wrapper {
    margin-top: 40px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .box {
    padding-left: 2rem;
    padding-right: 2rem;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    width: 50%;
  }

  .mt-0 {
    margin-top: 0;
  }
}

@media screen and (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/*===========================
みどころ
=============================*/
.highlight {
  background-color: rgba(0, 106, 189, 0.6);
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  position: relative;
  z-index: 0;
  border-top: 8px solid rgba(255, 255, 255, 0.3);
}

.highlight::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.highlight-container {
  position: relative;
  z-index: 30;
}

.color-white {
  color: #ffffff;
}

.text {
  text-align: center;
  font-size: 1.125rem;
  margin-bottom: px;
  font-weight: 600;
  line-height: 2;
}

/* みどころの一文がスマホで2行に折り返さないよう、画面幅に合わせて文字を縮める */
@media screen and (max-width: 480px) {
  .highlight .text {
    font-size: 3.6vw;
  }
}

/* ボタン1個分の枠。画面幅に応じて何列並ぶかをここで決める */
.link-wrapper {
  text-align: center;
  margin-top: 0;
  /* スマホは2列 */
  width: calc(50% - 0.5rem);
}

.highlight-link {
  padding: 0.75rem 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  --border-opacity: 1;
  border-color: #fff;
  border-color: rgba(255, 255, 255, var(--border-opacity));
  transition: background-color .3s, border-color .3s, color .3s;
  border: 4px solid #e2e8f0;
  /* 枠いっぱいに広げる。ただしPCで広がりすぎないよう上限を設ける */
  width: 100%;
  max-width: 240px;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  min-height: 54px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-link:hover {
  --tw-bg-opacity: 1;
  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(0, 0, 0, var(--tw-text-opacity));
}

/* 文字数が多いボタンは、枠内に1行で収まるよう小さくする */
.highlight-link.text-xl {
  font-size: 0.9rem;
}

/* 社名が長く、ボタン内で2行に折り返してしまうものだけ小さくする。
   1行に何文字入るかはボタンの内寸で決まり、実測は次のとおり。
     375px=140px / 600px=154px / 767px=167px / 768px=205px / PC=168px
   600〜767pxが一番狭い（3列になるのに文字は1.125remへ拡大されるため）ので、
   そこに合わせた値を基本にして、余裕のある768px以上で戻す。
   京セラインダストリアルツールズ（15文字）だけはどの幅でも1行に入らないが、
   1文字だけ極端に小さくすると浮くので、他と同じ大きさのまま2行にしている。 */
.highlight-link.text-sm {
  font-size: 0.75rem;
}

/* text-sm でもまだ1行に収まらない特に長い社名用。
   （京セラインダストリアルツールズ／ダイキンHVACソリューション東北／
     パナソニックFSエンジニアリング。一番長いのはダイキンで16pxなら250px必要）
   ボタンの外形は他と同じままにしたいので、まず左右の内側余白を詰めて文字が使える幅を稼ぎ、
   それでも足りない分だけ文字を小さくする。 */
.highlight-link.text-xs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 0.6rem;
}

/* 画面が狭いときは幅に合わせて縮める。
   400px以下は2列でもボタン内寸が132px（360px端末）まで細るため、
   remの固定値ではなく画面幅に追従させる */
@media screen and (max-width: 400px) {
  .highlight-link.text-xl {
    font-size: 3.6vw;
  }

  .highlight-link {
    font-size: 4vw;
  }

  .highlight-link.text-sm {
    font-size: 3.1vw;
  }

  .highlight-link.text-xs {
    font-size: 2.35vw;
  }
}

@media screen and (min-width: 768px) {
  .highlight-link.text-xl {
    font-size: 1.1rem;
  }

  /* 3列のままボタンが広がるので、ここからは縮めなくても1行に収まる */
  .highlight-link.text-sm {
    font-size: 1rem;
  }

  .highlight-link.text-xs {
    font-size: 0.85rem;
  }
}

/* PCはボタン240px固定＋左右余白2remで、768〜1023pxより内寸が狭い */
@media screen and (min-width: 1024px) {
  .highlight-link.text-sm {
    font-size: 0.9rem;
  }
}

.btn-wrapper{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 1rem;
  row-gap: 1rem;
  width: 100%;
}

/* タブレットは3列 */
@media screen and (min-width: 600px) {
  .link-wrapper {
    width: calc(33.333% - 0.7rem);
  }

  .highlight-link {
    /* 3列になってボタンが細くなる一方で文字は大きくなるため、
       左右の余白を詰めて8文字の社名が1行に収まる内寸を確保する */
    padding: 1rem 0.5rem;
    font-size: 1.125rem;
    min-height: 60px;
  }
}

/* PCは元のまま。ボタンは240px固定、間隔は1rem */
@media screen and (min-width: 1024px) {
  .link-wrapper {
    width: auto;
  }

  .highlight-link {
    width: 240px;
    max-width: none;
    padding: 1rem 2rem;
    font-size: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .lg-hidden {
    display: none;
  }

  .link-wrapper {
    margin-top: 0;
  }

  .text {
    margin-bottom: 15px;
  }

}

/*===========================
出展情報
=============================*/
.lineup {
  background-color: #d9ebf9;
}

.exhibit-wrapper {
  margin-top: 30px;
}

.exhibit-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.list-right {
  margin-top: 1rem;
}

.list-link {
  --text-opacity: 1;
  color: #fff;
  color: rgba(255, 255, 255, var(--text-opacity));
  text-align: center;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  border-radius: 0.375rem;
  font-size: 1.125rem;
  font-weight: 500;
  -webkit-transition-property: all;
  transition-property: all;
  padding: 1rem;
  font-weight: bold;
}

.list-left .list-link {
  background-color: #4fd1c5;
  border: 3px solid #4fd1c5;
  transition: background-color .3s;
}

.list-left .list-link:hover {
  background-color: #fff;
  border: 3px solid #4fd1c5;
  color: #4fd1c5;
}

.list-right .list-link {
  background-color: #4299e1;
  border: 3px solid #4299e1;
  transition: background-color .3s;
}

.list-right .list-link:hover {
  background-color: #fff;
  border: 3px solid #4299e1;
  color: #4299e1;
}

.exhibit-wrapper .list-link[disabled] {
  background-color: #D3D3D3;
  border: 3px solid #D3D3D3;
  color: #fff;
  pointer-events: none;
}

.exhibit-wrapper .list-link[disabled]::after {
  content: "Coming Soon.";
  display: block;
  margin-top: 8px;
  font-size: 1.2rem;
  line-height: 1.2;
}

@media screen and (min-width: 640px) {
  .exhibit-wrapper {
    margin-top: 40px;
  }

  .exhibit-list {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .list-left,
  .list-right {
    width: 50%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .list-right {
    margin-top: 0;
  }
}

@media screen and (min-width: 1280px) {
  .lineup-container {
    width: 50%;
  }
}