@charset "UTF-8";

/* ======= 共通パーツ ============================================ */
.material-icons,
*::before,
*::after {
  font-family: "Material Icons Round";
  display: inline-flex;
  vertical-align: middle;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.btn {
  display: inline-block;
  font-weight: 700;
  /* max-width: 450px; */
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
  position: relative;
  text-decoration: none;
  padding: 8px 16px;
  text-align: center;
  transition: all 400ms ease;
  box-shadow: 0px 0px 10px 0px rgba(16, 5, 97, 0.3);
  overflow: hidden;
  color: #fff;
  background: #0c1a49;
  box-sizing: border-box;
}

.en .btn {
  line-height: 1.2;
}

.btn span {
  display: inline-block;
  font-weight: 700;
  position: relative;
  color: #fff;
  z-index: 3;
}

@media screen and (max-width: 539px) {
  .btn {
    max-width: 280px;
  }
}

.btn:hover {
  /* サイト共通の a:hover{opacity:.7} を打ち消し、はっきりした色のまま浮き上がらせる */
  opacity: 1;
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0px 8px 18px 0px rgba(16, 5, 97, 0.4);
}

.btn:hover::before {
  width: 100%;
}

/* 先頭にmaterial-icons-round があった場合 */
.btn .material-icons-round {
  width: 1.4em;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  font-size: 16px;
}

.btn.app {
  background: rgb(219, 58, 135);
}

.btn.ded {
  color: #eee;
  background: rgb(150, 150, 150);
}

.btn.app.ded {
  color: #000;
  background: rgb(98, 0, 62);
}

.btn.contact {
  background-color: #00b79b;
}

.btn.document_app {
  background: #02b3f0;
}

.btn.contact:before,
.btn.exhibition_app:before,


.btn.document_app:before {
  display: inline-flex;
  font-size: 17px;
  line-height: 0.75;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  margin-right: 0.25em;
}

.en .btn.contact:before,
.en .btn.exhibition_app:before,
.en .btn.document_app:before {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.btn.contact:before {
  content: "mail";
}

.btn.exhibition_app:before {
  content: "create";
}

.btn.document_app:before {
  content: "description";
}

.btn.document_app:hover,
.btn.contact:hover,
.btn.exhibition_app:hover {
  opacity: 0.5;
}

.btn.coming {
  background-color: #dedede;
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
}

.btn.coming:hover {
  opacity: 1;
}

.btn.coming::after {
  font-family: "LINE Seed JP";
  content: "coming soon";
  display: block;
  color: #d92681;
  width: 100%;
  text-align: center;
  font-weight: 700;
  right: auto;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
}

.btn.download,
.btn[download] {
  padding: 16px 20px 16px 48px;
}

.btn.download:before,
.btn[download]:before {
  color: inherit;
  content: "\e2c4";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 16px;
  transition: all 400ms ease;
}

.btn.download:hover:before,
.btn[download]:hover:before {
  top: 60%;
}

/* 来場事前登録・聴講予約 専用ボタン
   ラベルは <a> の直下テキストでも <span> 包みでも同じ見た目になる。
   文字サイズは span ではなく要素自身が持つので <span> は不要（付いていても
   継承されるだけで二重には掛からない）。アイコンは ::before なので span とは無関係。 */
.btn_registration {
  font-weight: 700;
  font-size: 108%;
  text-decoration: none;
  transition: all 400ms ease;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 648px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: center;
  padding:8px 16px 8px 48px;
  color: #fff;
  background: linear-gradient(90deg, #2f6ae0 0%, #1f4bc4 100%);
}
.btn_registration::after,
.btn_registration::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}
.btn_registration::after {
  z-index: 2;
}
.btn_registration:hover::after {
  left: 16px;
}

/* 左側に置く登録アイコン(Material Icons Round: app_registration)。
   フォントは meta.php で読み込み済み(Material+Icons+Round)。リガチャで字形に置換されるため
   font-feature-settings:"liga" と、親の font-weight:700 を打ち消す font-weight:normal が必須 */
.btn_registration::before {
  content: "app_registration";
  left: 20px;
  font-family: "Material Icons Round";
  font-size: 22px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  color: #fff;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: left 400ms ease;
}

.btn_registration:hover::before {
  left: 16px;
  /* .btn:hover::before{width:100%} は塗りつぶし演出用の指定。.btn_registration では
     ::before がアイコン本体なので効かせない（効くとアイコンの箱が全幅になり、
     継承した text-align:center でグリフがボタン中央へ飛ぶ）。 */
  width: auto;
}

/* 来場事前登録・聴講予約 専用ボタン END */

/* ------------------------------------------------------------------------
   来場事前登録ボタン 一時停止（HTML/PHP側のaタグ・class="btn_registration"は変更なし）
   期間: 〜2026-08-27(木)。8/27以降は下の3ルール（a.btn_registration〜body.en a.btn_registration::after まで）を
   削除すれば、元のリンク・見た目に戻る。
   NOTE: pointer-events:none はマウス/タッチのクリックしか防げず、キーボードの
   Tab+Enterでは開けてしまうため、header-2026.js 側にも対になる後始末ブロックがある
   （末尾の「来場事前登録ボタン 一時停止のキーボード操作対策」）。8/27にはそちらも
   一緒に削除すること。
   ------------------------------------------------------------------------ */
a.btn_registration {
  pointer-events: none;
  filter: grayscale(0.8) brightness(0.85);
  /* オーバーレイ(::after)は半透明(82%)なので、ボタンが折り返して縦に伸びる
     狭い画面（iPad幅のen/about/registration.html フロー図など）では、下の
     本来のテキスト/アイコンが透けて二重に見えてしまう。色を消して確実に隠す
     （テキスト自体はDOM上に残るのでスクリーンリーダーには読み上げられる） */
  color: transparent;
}

a.btn_registration::before {
  color: transparent;
}

a.btn_registration::after {
  content: "Coming soon\A 8月27日(木)公開予定";
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  transform: none;
  z-index: 10;
  padding: 4px 8px;
  background: rgba(12, 26, 73, 0.82);
  color: #fff;
  font-family: "LINE Seed JP", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre-line;
}

a.btn_registration:hover::after {
  left: 0;
}

body.en a.btn_registration::after {
  content: "Coming soon\A Available from Aug 27 (Thu)";
}
/* 来場事前登録ボタン 一時停止 END */

/* ------------------------------------------------------------------------
   「来場事前登録は こちらから」インラインリンクの一時停止（〜2026-08-27(木)）
   対象: ja/contact/inquiry_for_registration/index.html の a.link_registration_pending
   8/27以降はこのブロックを削除すれば、元のリンクに戻る（href・文言は変更していない）。
   日程の注記（「（8月27日(木)公開予定）」の文言）はHTML側に直接書いているため、
   このCSSブロックの削除とあわせて該当ページ側も手動で外すこと。
   ------------------------------------------------------------------------ */
a.link_registration_pending {
  pointer-events: none;
  color: #999;
}
/* 来場事前登録リンク（インライン）一時停止 END */

/*coming/endボタン*/
.disable {
  background: #a9a9a9 !important;
  color: #ddd !important;
  pointer-events: none;
  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0));
}

.text_link {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}

.text_link[download]::after,
.text_link::after {
  content: "launch";
  font-weight: 700;
  font-size: 16px;
  color: inherit;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

/**/

.sp_only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp_only {
    display: block;
  }

  .pc_only {
    display: none;
  }
}

/**/

.mnt_att {
  display: inline-block;
  font-size: 13px;
  margin-top: 16px;
  margin-bottom: 16px;
}

/* scrollbox */

.scrollbox {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.scrollbox::-webkit-scrollbar {
  height: 8px;
}

.scrollbox::-webkit-scrollbar-track {
  border-radius: 5px;
  background: #eee;
}

.scrollbox::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #17294b;
}

.scrollbox::-webkit-scrollbar-track-piece {
  background: #efefef;
}

/* width size */

.wid10 {
  width: 10% !important;
}

.wid15 {
  width: 15% !important;
}

.wid20 {
  width: 20% !important;
}

.wid25 {
  width: 25% !important;
}

.wid30 {
  width: 30% !important;
}

.wid35 {
  width: 35% !important;
}

.wid40 {
  width: 40% !important;
}

.wid45 {
  width: 45% !important;
}

.wid50 {
  width: 50% !important;
}

.wid60 {
  width: 60% !important;
}

.wid70 {
  width: 70% !important;
}

.wid80 {
  width: 80% !important;
}

.wid90 {
  width: 90% !important;
}

.wid00 {
  width: 100% !important;
}

/* For margin */

.mgauto {
  margin-right: auto;
  margin-left: auto;
}

.mgt0 {
  margin-top: 0px !important;
}

.mgt4 {
  margin-top: 4px !important;
}

.mgt8 {
  margin-top: 8px !important;
}

.mgt16 {
  margin-top: 16px !important;
}

.mgt20 {
  margin-top: 20px !important;
}

.mgt24 {
  margin-top: 24px !important;
}

.mgt32 {
  margin-top: 32px !important;
}

.mgt36 {
  margin-top: 36px !important;
}

.mgt40 {
  margin-top: 40px !important;
}

.mgt44 {
  margin-top: 44px !important;
}

.mgt48 {
  margin-top: 48px !important;
}

.mgt56 {
  margin-top: 56px !important;
}

.mgb0 {
  margin-bottom: 0px !important;
}

.mgb4 {
  margin-bottom: 4px !important;
}

.mgb8 {
  margin-bottom: 8px !important;
}

.mgb16 {
  margin-bottom: 16px !important;
}

.mgb20 {
  margin-bottom: 20px !important;
}

.mgb24 {
  margin-bottom: 24px !important;
}

.mgb32 {
  margin-bottom: 32px !important;
}

.mgb36 {
  margin-bottom: 36px !important;
}

.mgb40 {
  margin-bottom: 40px !important;
}

.mgb44 {
  margin-bottom: 44px !important;
}

.mgb48 {
  margin-bottom: 48px !important;
}

.mgb56 {
  margin-bottom: 56px !important;
}

.mgb60 {
  margin-bottom: 60px !important;
}

.mgb64 {
  margin-bottom: 64px !important;
}

.mgb72 {
  margin-bottom: 72px !important;
}

.mgb80 {
  margin-bottom: 80px !important;
}

.mgl0 {
  margin-left: 0px !important;
}

.mgl4 {
  margin-left: 4px !important;
}

.mgl8 {
  margin-left: 8px !important;
}

.mgl16 {
  margin-left: 16px !important;
}

.mgl20 {
  margin-left: 20px !important;
}

.mgl24 {
  margin-left: 24px !important;
}

.mgr0 {
  margin-right: 0px !important;
}

.mgr4 {
  margin-right: 4px !important;
}

.mgr8 {
  margin-right: 8px !important;
}

.mgr16 {
  margin-right: 16px !important;
}

.mgr20 {
  margin-right: 20px !important;
}

.mgr24 {
  margin-right: 24px !important;
}

/* For padding */

.pdt0 {
  padding-top: 0px !important;
}

.pdt4 {
  padding-top: 4px !important;
}

.pdt8 {
  padding-top: 8px !important;
}

.pdt16 {
  padding-top: 16px !important;
}

.pdt20 {
  padding-top: 20px !important;
}

.pdt24 {
  padding-top: 24px !important;
}

.pdt32 {
  padding-top: 32px !important;
}

.pdt36 {
  padding-top: 36px !important;
}

.pdt48 {
  padding-top: 48px !important;
}

.pdb4 {
  padding-bottom: 4px !important;
}

.pdb8 {
  padding-bottom: 8px !important;
}

.pdb16 {
  padding-bottom: 16px !important;
}

.pdb20 {
  padding-bottom: 20px !important;
}

.pdb24 {
  padding-bottom: 24px !important;
}

.pdb32 {
  padding-bottom: 32px !important;
}

.pdl4 {
  padding-left: 4px !important;
}

.pdl8 {
  padding-left: 8px !important;
}

.pdr4 {
  padding-right: 4px !important;
}

.pdr8 {
  padding-right: 8px !important;
}

.txt-right {
  text-align: right !important;
  display: block !important;
}

.txt-left {
  text-align: left !important;
  display: block !important;
}

.txt-center {
  text-align: center !important;
  display: block !important;
}

.color-red {
  color: #c90000 !important;
}

.color-gray {
  color: #999 !important;
}

.color-black {
  color: #000 !important;
}

.color-bordeaux {
  color: #960c0c !important;
}

.font-bold {
  font-weight: 700;
  font-weight: bold !important;
}

.font-normal {
  font-weight: normal;
}

.font-italic {
  font-style: italic !important;
}

.font-strike {
  text-decoration: line-through !important;
}

.font-under {
  text-decoration: underline !important;
}

/* For link icon */
.link_text {
  position: relative;
}

.link_text::after {
  content: "open_in_new";
  font-size: 16px;
  transition: all 400ms ease;
}

/* font size */

.text5 {
  font-size: 5px !important;
}

.text6 {
  font-size: 6px !important;
}

.text7 {
  font-size: 7px !important;
}

.text8 {
  font-size: 8px !important;
}

.text9 {
  font-size: 9px !important;
}

.text10 {
  font-size: 10px !important;
}

.text11 {
  font-size: 11px !important;
}

.text12 {
  font-size: 12px !important;
}

.text13 {
  font-size: 13px !important;
}

.text14 {
  font-size: 14px !important;
}

.text15 {
  font-size: 15px !important;
}

.text16 {
  font-size: 16px !important;
}

.text17 {
  font-size: 17px !important;
}

.text18 {
  font-size: 18px !important;
}

.text19 {
  font-size: 19px !important;
}

.text20 {
  font-size: 20px !important;
}

.text25 {
  font-size: 25px !important;
}

.text30 {
  font-size: 30px !important;
}

.text35 {
  font-size: 35px !important;
}

.text40 {
  font-size: 40px !important;
}

.text50 {
  font-size: 50px !important;
}

/* 打ち消し */
.double_line {
  position: relative;
  display: inline-block;
}

.double_line::before,
.double_line::after {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(0);
  background-color: red;
  width: 100%;
  height: 1px;
  left: 0;
}

.double_line::before {
  top: 55%;
}

.double_line::after {
  top: 42%;
}

/* float */

.innerLf {
  float: left;
}

.innerRf {
  float: right;
}

.list_dod {
  list-style: disc;
}

.list_dod li {
  margin-left: 1.5em;
  margin-top: 0.25em;
  line-height: 1.4;
}

.list_decimal {
  list-style: decimal;
  margin-bottom: 0.25em;
}

.list_decimal li {
  margin-left: 1.5em;
  margin-top: 0.25em;
}

.list_numlist {
  margin-left: 0.5em;
  margin-bottom: 0.25em;
}

.list_numlist li {
  text-indent: -1.8em;
  margin-top: 0.25em;
}

/* 数字 olリスト*/
.list_number {
  position: relative;
  counter-reset: list-num;
}

.list_number::before {
  content: "";
  height: 100%;
  width: 2px;
  position: absolute;
  left: 0.7em;
  top: 0;
  z-index: 1;
  background-color: #e0e0e0;
}

.list_number li {
  display: flex;
  margin: 4px 0;
  line-height: 1.5em;
}

.list_number li:before {
  font-family: "LINE Seed JP";
  counter-increment: list-num;
  content: counter(list-num);
  background: #00b1eb;
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 50%;
  color: #fff;
  margin-right: 0.5em;
  font-weight: 700;
  z-index: 2;
}

.list_number li:not(:before) {
  width: 48px;
}

/*olリスト*/
.num_list {
  counter-reset: list-num;
}

.num_list li {
  display: flex;
  margin: 8px 0;
  line-height: 2em;
  flex-wrap: nowrap;
}

.num_list li:before {
  font-family: "LINE Seed JP";
  counter-increment: list-num;
  content: counter(list-num);
  background: #00b1eb;
  display: inline-block;
  width: 2em;
  min-width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  color: #fff;
  margin-right: 0.5em;
  font-weight: 700;
}

.num_list li:not(:before) {
  width: 48px;
}

.required {
  display: inline-block;
  padding: 0px 8px;
  font-size: 14px;
  color: #fff;
  background-color: #be0000;
}

.dspbl {
  display: block;
}

.dspil {
  display: inline;
}

.indent {
  padding-left: 1em;
  text-indent: -1em;
}

.indentbefore {
  padding-left: 1em;
  position: relative;
}

.indentbefore:before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
}

.en_indentbefore {
  padding-left: 0.5em;
  position: relative;
}

.en_indentbefore:before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
}

.note_indent {
  display: inline-block;
  padding-left: 2.9em;
  text-indent: -2.9em;
}

.notes_indent {
  /* sありの場合 */
  display: inline-block;
  padding-left: 3.5em;
  text-indent: -3.5em;
}

/* ページ内アンカーリンク用 */
.nav_anc ol {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  border-top: 1px solid #e3e3e8;
  border-left: 1px solid #e3e3e8;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fbfbfc;
}
.ax_area+.nav_anc,
.partners_area+.nav_anc,
.next_area+.nav_anc{
  margin-top: 2em;
}

.nav_anc li {
  border-right: 1px solid #e3e3e8;
  border-bottom: 1px solid #e3e3e8;
}

.nav_anc li a {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 16px 20px;
  text-decoration: none;
  color: #333;
  transition: background-color 300ms ease;
  font-weight: 700;
  font-size: 0.85rem;
}

.nav_anc li a:hover {
  background-color: #eef0f5;
}

.nav_anc li a::before {
  content: "arrow_downward";
  font-family: "Material Icons Round";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid #333;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
}

/* map 虫眼鏡アイコン*/

.area_img {
  width: 100%;
  padding-top: 20px;
  text-align: center;
  position: relative;
}

.area_img a::after {
  content: "search";
  font-family: 'Material Icons Round';
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(12, 26, 73, 0.7);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  pointer-events: auto;
  z-index: 1;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.area_img a:hover::after {
  background-color: rgba(12, 26, 73, 0.9);
}

.area_img img {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}


/* テーブル */
.tb_style {
  width: 100%;
}

.tb_style td {
  width: 80%;
  padding-top: 2em;
  padding-bottom: 2em;
  border-bottom: 1px solid #91a2c3;
}

.tb_style th {
  width: 20%;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 2em;
  border-bottom: 1px solid #91a2c3;
  text-align: left;
  font-weight: 700;
}

.tb_style tr:last-child th,
.tb_style tr:last-child td {
  border-bottom: none;
}

@media screen and (max-width: 767px) {
  .tb_style th,
  .tb_style td {
    border-bottom: none;
    display: block;
    width: 100%;
    padding-top: 1em;
    padding-bottom: 0em;
    padding-right: 0em;
  }

  .tb_style td {
    padding-top: 0.25em;
    padding-bottom: 1em;
    border-bottom: 1px solid #91a2c3;
  }
}

/*dl table タイプ（横罫線区切り・dtはブランドカラー）*/
.unit_table {
  display: grid;
  grid-template-columns: max-content 2fr;
  column-gap: 0;
}

.unit_table dt,
.unit_table dd {
  margin: 0;
  padding: 20px 1.25em;
  border-bottom: 1px solid #e5e8ee;
}

.unit_table dt {
  font-weight: 700;
  color: var(--ceatecblue);
  border-bottom: 2px solid #7792c8;
}

.unit_table dd {
  color: #333;
}

.unit_table dt:last-of-type,
.unit_table dd:last-of-type {
  border-bottom: none;
}

@media screen and (max-width: 767px) {
  .unit_table,
  .en .unit_table {
    grid-template-columns: 1fr;
  }

  .unit_table dt {
    padding: 16px 0 4px;
    border-bottom: none;
  }

  .unit_table dd {
    padding: 0 0 16px;
  }

  .unit_table dt:last-of-type,
  .unit_table dd:last-of-type {
    border-bottom: none;
  }
}

.flex_unit {
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.flex_unit img {
  width: 100%;
}

@media screen and (max-width: 640px) {
  .flex_unit {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.around {
  justify-content: space-around;
}
.justifycontent_center {
  justify-content: center;
}
.alignitems_center {
  align-items: center;
}

/* 右左比率違い横並びタイプ  */

.flex_unit.unit_img_text {
  flex-wrap: wrap;
}

.unit_img_text .col_l {
  width: 67%;
}

.unit_img_text .col_r {
  width: 30%;
}

.unit_img_text .col_r img {
  object-fit: cover;
  height: 100%;
}

@media screen and (max-width: 640px) {
  .unit_img_text .col_l {
    width: 100%;
  }

  .unit_img_text .col_r {
    width: 100%;
    margin-top: 8px;
  }

  .unit_img_text .col_r img {
    max-height: 152px;
  }
}

/*背景カラー*/
span.new {
  display: inline-block;
  background-color: #be0058;
  border-radius: 20px;
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  margin-left: 4px;
}

.slick-dots {
  display: flex;
  justify-content: center;
  bottom: initial !important;
}

.slick-dots li {
  margin: 0 !important;
  display: inline-block;
  width: 80px !important;
  height: 8px !important;
  margin: min(4px, 20px) !important;
  background-color: #dfdfdf;
  border-radius: 10px;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.slick-dots li:hover {
  opacity: 0.5;
}

.slick-dots li:last-of-type {
}

.slick-dots button {
  position: relative;
  text-indent: -9999px;
  border: none;
  display: block;
  width: 0%;
  height: 8px !important;
  padding: 0;
  background-color: #efefef;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  opacity: 0;
}

.slick-dots li button:before {
  content: none;
}

.slick-dots .slick-active button {
  background-color: #02b3f0;
  opacity: 1;
}

.slick-slider .slide-arrow {
  position: absolute;
  top: 50%;
  margin-top: -12px;
  background-color: transparent;
}

.slick-slider .prev-arrow {
  left: -40px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 25px solid #113463;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.slick-slider .next-arrow {
  right: -40px;
  width: 0;
  height: 0;
  border-right: 0 solid transparent;
  border-left: 25px solid #113463;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

/*movie wp*/
.movie-rs {
  position: relative;
  padding-bottom: 56.25%;
  /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}

.movie-rs iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* プレスページ */
.press .info_cont{
  width: 50%;
}

.press .info_flex_cont figure{
  width: 46%;
}

.press .info_flex_cont{
display: flex;
align-items: center;
justify-content: space-between;
  flex-wrap:wrap;
}

.press .info_cont dt{
margin-bottom: 8px;
line-height: 2;
border-bottom: 1px solid #a9a9a9;
  border-image: linear-gradient(to right, #e3308c 0%, #00b8ff 100%) 1;
font-size: 1.1rem;
font-weight: 700;
}

.press .info_cont dd{
margin-bottom: 16px;
}


.btn.comingsoon{
  text-align:center;
  background: #bebebe;
  padding: 4px 56px;
  box-shadow: none;
  pointer-events: none;
}


.btn.comingsoon::after,
.btn.comingsoon::before{
  display:none;
}

.btn.comingsoon span{
  color:#767676;
}


@media screen and (max-width:768px){
.press .info_flex_cont figure,
  .press .info_cont{
  width: 100%;
}

}



/* NOTE: ボタンはサイト共通の .btn (add.css) を使う。ここでは行の中央寄せのみ担当する */
.under-btn-row {
  text-align: center;
  margin-top: 16px;
}

/* テキスト + 画像(約40%)の横並びイントロブロック（About等） */
.under-media-block {
  display: flex;
  align-items: center;
  gap: 40px;
}

.under-media-block__body {
  flex: 1 1 auto;
  min-width: 0;
}

.under-media-block__figure {
  flex: 0 0 40%;
  max-width: 40%;
  margin: 0;
}

.under-media-block__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #eef1f5;
}

.under-media-block__figure--wide {
  flex: 0 0 50%;
  max-width: 50%;
}

/* 画像を切り取らず全体表示したい場合用 */
.under-media-block__figure--contain img {
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
}

.under-media-block__body h4.under-h4 {
  padding-top: 0;
  border-top: none;
}

/* 地図・図解などの非トリミング画像（写真以外）用 */
.under-media-block__figure--diagram img {
  aspect-ratio: auto;
  object-fit: contain;
  background: none;
}

@media screen and (max-width: 767px) {
  .under-media-block {
    flex-direction: column;
  }

  .under-media-block__figure {
    flex-basis: auto;
    max-width: 100%;
  }
}

/* The Pillars of CEATEC: 角丸カードグリッド（数字 + 画像 + タイトル/説明文） */
/* グラデーションタイトル */
h3.ttl_color {
  background: linear-gradient(90deg, #008ad2 0%, #947cb9 25%, #bb61a7 50%, #ee328b 75%, #fec558 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.under-main-p{
      font-weight: 700;
    font-size: 18px;
    margin-top: 1em;
    line-height: 2;
}

.under-content .pillars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 40px;
  column-gap: 20px;
}
.under-content .pillars__item {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 13.333px); /* 3列 + 2列（中央寄せ） */
  border-radius: 8px;
  background: var(--color-white);
  border: 1px solid #eef1f5;
}

/* 2列 + 2列 + 1列（中央寄せ）
   NOTE: ベースの .under-content .pillars__item（詳細度0,2,0）に対して
   ここが .pillars__item 単体（詳細度0,1,0）だと詳細度で負けて上書きできず、
   画面幅を変えても常に3列のままになる。.under-content を付けて詳細度を揃える */
@media screen and (max-width: 767px) {
  .under-content .pillars__item {
    flex-basis: calc(50% - 10px);
  }
}

/* 縦1列 */
@media screen and (max-width: 500px) {
  .under-content .pillars__item {
    flex-basis: 100%;
  }

}

.under-content .pillars__num {
  position: absolute;
  top: -32px;
  left: 20px;
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 72px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--ceatecblue);
  z-index: 1;
  pointer-events: none;
}

@supports (-webkit-text-stroke: 1px black) {
  .pillars__num {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ceatecblue);
  }
}

.under-content .pillars__figure {
  position: relative;
  margin: 0;
  z-index: 0;
}

.pillars__figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 8px 8px 0 0;
  background: #eef1f5;
}

.pillars__body {
  padding: 16px 20px 20px;
}

.under-content h4.pillars__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 8px;
  color: #111;
}

.under-content .pillars__desc {
  line-height: 1.7;
  color: #555;
  margin: 0;
}
