@charset "utf-8";
/* ============================================================
   人とくるまのテクノロジー展 2026 / カスタムレイアウト (PC)
   iidCMS の <section class="detail"> 内 .free-custom 配下に適用
   ============================================================ */

:root {
 --color-bg-dark: #011e39;
 --color-text-light: #fff;
 --color-text-dark: #231815;
 --color-accent: #c9ea04;
 --color-thumb-bg: #262626;
 --shadow-button: 0 0 2px rgb(0 0 0 / 20%);
 --transition-base: all 450ms cubic-bezier(0.23, 1, 0.32, 1);
 --font-en: Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------------------
   gigaindex 全体
   ------------------------------------------------------------ */
.gigaindex {
 width: 1200px;
}
.gigaindex .sns-share, .gigaindex .head {
 display: none;
}
.gigaindex img {
 max-width: 100%;
 height: auto;
 vertical-align: top;
}
.gigaindex a {
 transition: var(--transition-base);
}
.gigaindex a:hover {
 color: var(--color-bg-dark);
}
.gigaindex a img:hover, .gigaindex .linkbutton:hover {
 opacity: 0.7;
}

/* ------------------------------------------------------------
   detail / free-custom ラッパー
   ------------------------------------------------------------ */
.detail {
 position: relative;
 margin-bottom: 30px;
}
.free-custom::before {
 content: "";
 display: block;
 width: 100%;
 height: 10px;
 background-color: var(--color-bg-dark);
}

/* ------------------------------------------------------------
   #header ヒーロー領域（タイトル + メインビジュアル）
   ------------------------------------------------------------ */
#header {
 position: relative;
 color: var(--color-text-light);
}
#txt-area {
 position: absolute;
 inset: 0;
 overflow: hidden;
 z-index: 10;
 box-sizing: border-box;
}
.title-box {
 position: relative;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 720px;
 padding: 40px 50px 50px;
 background: linear-gradient(30deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 90%));
 color: var(--color-text-dark);
 z-index: 10;
}
.title-box .section-logo {
 width: 700px;
 margin-bottom: 30px;
}
.title-box p {
 font-size: 16.5px;
 font-weight: 500;
 line-height: 1.8;
 letter-spacing: 0.5px;
}

/* ------------------------------------------------------------
   #slide メインビジュアル（2:1）
   ------------------------------------------------------------ */
.gigaindex #slide {
 display: inline-block;
 position: relative;
 width: 100%;
 aspect-ratio: 2 / 1;
 overflow: hidden;
 vertical-align: top;
}
.gigaindex #slide img {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 100%;
 max-width: none;
 height: auto;
}

/* ------------------------------------------------------------
   セクション見出し
   ------------------------------------------------------------ */
.section-ttl {
 position: relative;
 text-align: center;
}
.section-ttl span {
 display: inline-block;
 transform: skew(-10deg);
 color: var(--color-accent);
 font-family: var(--font-en);
 font-size: 1.8em;
 font-weight: 600;
}
#header .section-ttl {
 float: right;
 width: 100px;
 margin-right: 20px;
 padding: 0 20px;
}
#header .section-ttl::before, #header .section-ttl::after {
 content: "";
 position: absolute;
 top: 0;
 border-bottom: solid 28px transparent;
 z-index: 10;
}
#header .section-ttl::before {
 left: 0;
 border-right: solid 20px var(--color-bg-dark);
}
#header .section-ttl::after {
 right: 0;
 border-left: solid 20px var(--color-bg-dark);
}
#header .section-ttl span {
 position: absolute;
 top: 0;
 right: 20px;
 left: 20px;
 height: 28px;
 margin-bottom: 10px;
 background-color: var(--color-bg-dark);
 color: var(--color-text-light);
 font-size: 0.8em;
 text-align: center;
 transform: none;
 z-index: 10;
 box-sizing: border-box;
}

/* ------------------------------------------------------------
   #container 本文ブロック
   ------------------------------------------------------------ */
#container {
 position: relative;
 padding: 40px 40px 50px;
 background-color: var(--color-bg-dark);
 color: var(--color-text-light);
 z-index: 3;
}

/* ------------------------------------------------------------
   Special Article : contentsList
   通常記事 (li > a.inner) と Coming Soon (li.banner-soon > .soon) の共通
   ------------------------------------------------------------ */
.contentsList {
 padding: 20px 0;
}
.contentsList li {
 margin-bottom: 30px;
 background-color: #fff;
 font-size: 16px;
 font-weight: 600;
}
.contentsList li .inner {
 display: block;
 position: relative;
 padding: 30px;
 margin-bottom: 30px;
}
.contentsList li .thumb {
 width: 40%;
 height: auto;
 margin-right: 5%;
 float: left;
 overflow: hidden;
 background: var(--color-thumb-bg) url("/base/images/noimage_m.png") no-repeat center / 120px auto;
}
.contentsList li .title {
 font-size: 1.4em;
 line-height: 1.6em;
 margin-bottom: 0.6em;
}
.contentsList li p {
 font-weight: normal;
 font-size: 15px;
 line-height: 1.6em;
 margin: 0 0 20px;
}

/* Coming Soon / 将来差し替え用 : banner-soon バリエーション */
.banner-soon {
 width: 100%;
}
.contentsList .banner-soon .inner, .contentsList .soon {
 display: block;
 position: relative;
 padding: 30px;
 margin-bottom: 30px;
}
.contentsList .banner-soon .subttl {
 margin: 30px 0 10px;
 font-size: 1.4em;
 font-weight: bolder;
}
.contentsList .banner-soon p {
 margin: 0 0 20px;
 font-size: 15px;
 font-weight: normal;
 line-height: 1.6;
}
.contentsList .banner-soon p b {
 font-size: 1.2em;
}
.contentsList .banner-soon p.at {
 color: #888;
 font-size: 14px;
}
.contentsList .banner-soon .thumb {
 width: 40%;
 height: auto;
 margin-right: 5%;
}
.contentsList .banner-soon .txt-box {
 display: inline-block;
 width: 55%;
}
.contentsList .banner-soon .title {
 margin-bottom: 0.6em;
 font-size: 1.4em;
 line-height: 1.6;
}
.banner-soon .soon p {
 margin: 40px 0;
 color: #ccc;
 font-family: var(--font-en);
 font-size: 2.6em;
 font-style: italic;
 font-weight: 600;
 text-align: center;
}

/* ------------------------------------------------------------
   Special Sponsor : banner
   ------------------------------------------------------------ */
.gigaindex .banner.flex {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 30px 40px;
 width: 100%;
 margin: 20px auto;
 padding: 40px 20px;
 background: #fff;
 box-sizing: border-box;
}
.gigaindex .item.link-banner {
 width: 30%;
 max-width: 400px;
 background: #fff;
 text-align: center;
}
.gigaindex .item.link-banner a {
 display: block;
 padding: 0;
 box-sizing: border-box;
 aspect-ratio: 336 / 80;
}
.gigaindex .item.link-banner img {
 width: 100%;
 height: 100%;
 object-fit: contain;
}

/* ------------------------------------------------------------
   共通 flex ユーティリティ
   ------------------------------------------------------------ */
.gigaindex .flex {
 display: flex;
 align-items: center;
 justify-content: center;
}

/* ------------------------------------------------------------
   linkbutton
   ------------------------------------------------------------ */
.gigaindex .linkbutton {
 position: absolute;
 right: 30px;
 bottom: 30px;
 display: inline-block;
 padding: 12px 80px;
 border-radius: 100px;
 background: var(--color-accent);
 color: var(--color-bg-dark);
 font-weight: bold;
 box-shadow: var(--shadow-button);
}
.gigaindex .linkbutton::after {
 content: "";
 position: absolute;
 top: 0;
 right: 6%;
 bottom: 0;
 margin: auto;
 width: 10px;
 height: 10px;
 border: 2px solid;
 border-color: var(--color-bg-dark) var(--color-bg-dark) transparent transparent;
 transform: rotate(45deg);
 transition: 0.3s;
}

/* ------------------------------------------------------------
   reset
   ------------------------------------------------------------ */
hr {
 margin: 0;
 padding: 0;
 height: 0;
 border: none;
}