@charset "UTF-8";
/* ------------------------------------------------------------------

  トレンド情報（trendnews）記事テンプレート用モジュール集

  ・対象は「新規記事」のみ。既存記事のCSS・HTMLには手を入れていない
  ・読み込み順（既存34本で最も多い「sub_style → common_hint」に trend-templates を足した形）：
      /jp/terasu/common/css/sub_style.css                        34/34本
      /jp/terasu/hint/css/common_hint.css                        33/34本
      /jp/terasu/trend/trendnews/common/css/trend-templates.css  ← このファイル（新設）
      /jp/terasu/trend/trendnews/{号}/{記事}/css/style.css       ← 記事固有
    ※ /jp/terasu/common/css/style.css は既存34本すべてでコメントアウトされているので読まない

  ・スコープは #container .section に統一した。
    74号（最新）の common/css/common.css がこの形で、そこに合わせている。
    記事固有CSSは #terasu-contents .section で書く（同じ詳細度で後勝ちになる）

  ・骨格（c-bg / c-sect / trendnews__ttl--01〜02 / trendnews-lead /
    trendnews-profile / more / p-btn__back / c-btn / p-modal / u-tc /
    u-color__orange / font-14 / font-16 / pc / sp / center）は
    上記の基盤CSSが提供するので、ここには含めない

  ・#terasu-contents には class="trendnews" だけを付ける。
    local5g（旧形 trendnews-box 専用）と jirei01（hint-templates 専用）は
    trend では効かない残骸なので付けない

  【重要】ここに置いた terasu__* 系モジュールは
  jp/terasu/hint/css/common.css からの移植です（trend は同ファイルを読まないため）。
  値を変えるときは hint 側と齟齬が出ないか確認してください。

------------------------------------------------------------------ */
/* ==================================================================
   1. 汎用ユーティリティ
   hint-templates.css と同じ内容（trend は同ファイルを読まないため再掲）
   ================================================================== */
.ali-C {
  text-align: center;
}

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

.ali-R {
  text-align: right;
}

.fwb {
  font-weight: 700;
}

.inline-b {
  display: inline-block;
}

.wid100Per {
  width: 100%;
  max-width: 100%;
}

img.wid100Per {
  height: auto;
}

.maxWidth600 {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.maxWidth800 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.maxWidth1000 {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.listStyle01 {
  font-size: 15px;
  line-height: 2.2;
}
@media screen and (max-width: 640px) {
  .listStyle01 {
    font-size: 14px;
    line-height: 2;
  }
}

.listStyle01 > li {
  position: relative;
  padding-left: 1em;
}
.listStyle01 > li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  position: absolute;
  top: 0.7em;
  left: 0;
}

.PcNodisplay {
  display: none !important;
}

.SpNodisplay {
  display: block !important;
}

@media screen and (max-width: 640px) {
  .PcNodisplay {
    display: block !important;
  }
  .SpNodisplay {
    display: none !important;
  }
}
@media screen and (max-width: 640px) {
  .img-scroll-wrapper {
    overflow-x: auto;
  }
  .img-scroll-wrapper > * {
    width: 600px;
  }
}

/* ==================================================================
   2. h1 内の会社名・所属（移植元：hint/css/common.css）
   ================================================================== */
#container .section .ttl-small {
  font-size: 22px;
  margin-top: 10px;
}
@media screen and (max-width: 640px) {
  #container .section .ttl-small {
    font-size: 15px;
  }
}

/* ==================================================================
   3. プロフィールの1名用修飾子（移植元：hint/css/common.css）
   複数名の more は common_hint.css が持っている
   ================================================================== */
#container .section .trendnews-profile.single {
  margin-top: 0;
}
#container .section .trendnews-profile__list.single {
  display: block;
}
#container .section .trendnews-profile__item figure img {
  height: auto;
}

/* ==================================================================
   4. MV（移植元：hint/css/common.css）
   1枚 = .terasu__mv ／ 複数枚 = .terasu__mv_wrapper（3枚は three）
   ================================================================== */
#container .section .terasu__mv figure img,
#container .section .terasu__mv_wrapper figure img {
  display: block;
  width: 100%;
  height: auto;
}
#container .section .terasu__mv figure figcaption,
#container .section .terasu__mv_wrapper figure figcaption {
  margin-top: 3px;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv figure figcaption,
  #container .section .terasu__mv_wrapper figure figcaption {
    font-size: 11px;
  }
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv figure figcaption.sp-left {
    padding-left: 5px;
  }
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv.sp-space {
    padding: 0 5px;
  }
}
#container .section .terasu__mv_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 5px;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv_wrapper {
    padding: 0 5px;
  }
}
#container .section .terasu__mv_wrapper.three {
  grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv_wrapper.three {
    gap: 0 3px;
  }
}
@media screen and (max-width: 640px) {
  #container .section .terasu__mv_wrapper figure figcaption.spc {
    padding-right: 10px;
  }
}

/* ==================================================================
   5. 図版（移植元：hint/css/common.css ＋ 74号 common/css/common.css）
   ・.space の margin-bottom は 74号に合わせて 30px
     （hint 側は 25px。トレンド情報は最新号の値を採る）
   ================================================================== */
#container .section .terasu__img_wrapper {
  margin-top: 35px;
}
#container .section .terasu__img_wrapper figure {
  padding: 0;
  margin: 0;
}
#container .section .terasu__img_wrapper figure img {
  display: block;
  width: 100%;
  height: auto;
}
#container .section .terasu__img_wrapper figure figcaption {
  margin-top: 7px;
  font-size: 14px;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__img_wrapper figure figcaption {
    font-size: 12px;
  }
}
#container .section .terasu__img_wrapper figure.w600 {
  max-width: 600px;
}
#container .section .terasu__img_wrapper figure.w600.center {
  margin: 0 auto;
}
#container .section .terasu__img_wrapper figure.w800 {
  max-width: 800px;
  margin: 0 auto;
}
#container .section .terasu__img_wrapper.space {
  margin-bottom: 30px;
}

/* ==================================================================
   6. 見出し付き画像ボックス（移植元：hint/css/common.css）
   ================================================================== */
#container .section .terasu__img_box {
  border: 1px solid #978554;
  padding: 20px 40px;
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__img_box {
    padding: 5px 15px 20px;
    margin-top: 35px;
  }
}
#container .section .terasu__img_box .terasu__img_box_ttl {
  font-size: 20px;
  color: #978554;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__img_box .terasu__img_box_ttl {
    font-size: 16px;
    line-height: 1.4;
  }
}
#container .section .terasu__img_box .terasu__img_box_content {
  margin-top: 15px;
}
#container .section .terasu__img_box .terasu__img_box_content img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==================================================================
   7. 注釈（移植元：hint/css/common.css ＋ hint-templates.css）
   ================================================================== */
#container .section .terasu__notice {
  margin-top: 30px;
}
@media screen and (max-width: 640px) {
  #container .section .terasu__notice {
    margin-top: 25px;
  }
}
#container .section .terasu__notice li {
  padding-left: 15px;
  position: relative;
  font-size: 12px;
}
#container .section .terasu__notice li::before {
  display: inline-block;
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}
#container .section .terasu__notice.count {
  counter-reset: count;
}
#container .section .terasu__notice.count li {
  counter-increment: count;
  padding-left: 30px;
}
#container .section .terasu__notice.count li::before {
  content: "※" counter(count);
}
#container .section .trendnews__note {
  font-size: 12px;
  margin-top: 10px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__note {
    font-size: 11px;
  }
}

/* ==================================================================
   8. インタビュー（Q&A）

   号ごとに作り直されていた4系統を trendnews__interview* に統合した。
   　74号 special-interview__*   （最新・見た目はこれを採用）
   　71号 terasu__interview_*
   　73号 vol73__interview*
   　旧号 interview-q / interview-a
   旧クラス名のうち 1対1で対応するものはセレクタに併記して互換を保つ。
   terasu__interview_* と vol73__interview* は構造ごと違うため対応させていない
   ================================================================== */
#container .section .trendnews__interview-profile,
#container .section .special-interview__profile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 40px;
  margin-top: 20px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__interview-profile,
  #container .section .special-interview__profile {
    display: block;
    text-align: center;
  }
}
#container .section .trendnews__interview-profile-company,
#container .section .special-interview__profile_company {
  font-size: 14px;
  line-height: 1.6;
}
#container .section .trendnews__interview-profile-name,
#container .section .special-interview__profile_name {
  font-size: 18px;
}
#container .section .trendnews__interview-profile-name span,
#container .section .special-interview__profile_name span {
  display: inline-block;
  font-size: 28px;
  padding-right: 10px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__interview-profile-name span,
  #container .section .special-interview__profile_name span {
    font-size: 24px;
  }
}
#container .section .trendnews__interview,
#container .section .special-interview__wrapper {
  margin-bottom: 30px;
}
#container .section .trendnews__interview-q,
#container .section .special-interview__q,
#container .section .interview-q {
  position: relative;
  padding-left: 1.6em;
  font-weight: 700;
  color: #00a051;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__interview-q,
  #container .section .special-interview__q,
  #container .section .interview-q {
    line-height: 2;
  }
}
#container .section .trendnews__interview-q::before,
#container .section .special-interview__q::before,
#container .section .interview-q::before {
  display: inline-block;
  content: "";
  width: 1.2em;
  height: 1px;
  background-color: currentColor;
  position: absolute;
  top: 17px;
  left: 0;
}
#container .section .trendnews__interview-a,
#container .section .special-interview__a,
#container .section .interview-a {
  margin-top: 10px;
}
#container .section .trendnews__interview-a span,
#container .section .special-interview__a span,
#container .section .interview-a span {
  font-weight: 700;
}

/* ==================================================================
   9. 動画埋め込み（移植元：74号 trend_3 の記事固有CSS）
   号固有だったものを汎用化。旧クラス名も併記
   ================================================================== */
#container .section .trendnews__movie,
#container .section .terasu__movie_wrapper {
  margin: 60px auto 25px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__movie,
  #container .section .terasu__movie_wrapper {
    margin: 0 auto;
  }
}
#container .section .trendnews__movie-ttl,
#container .section .terasu__movie_title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__movie-ttl,
  #container .section .terasu__movie_title {
    font-size: 14px;
  }
}
#container .section .trendnews__movie-items,
#container .section .terasu__movie_img_wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__movie-items,
  #container .section .terasu__movie_img_wrapper {
    grid-template-columns: 1fr;
    gap: 15px 0;
  }
}
#container .section .trendnews__movie-items.single,
#container .section .terasu__movie_img_wrapper.single {
  grid-template-columns: 1fr;
}
#container .section .trendnews__movie-item img,
#container .section .terasu__movie_img img {
  display: block;
  width: 100%;
  height: auto;
}
#container .section .trendnews__movie-item iframe,
#container .section .terasu__movie_img iframe {
  aspect-ratio: 16/9;
  display: block;
  width: 100%;
  height: 100%;
}

/* ==================================================================
   10. 外部サイトへのリンクボタン（移植元：hint/id_04033 の記事固有CSS .link-btn）
   ・記事固有だったものを汎用化。横に並べて置けるようにラッパを用意した
   ・SPは縦積み・全幅（id_04033 のSP指定に合わせている）
   ================================================================== */
#container .section .trendnews__link-btns {
  display: flex;
  justify-content: center;
  gap: 0 10px;
  margin-top: 60px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__link-btns {
    display: block;
    margin-top: 40px;
  }
}
#container .section .trendnews__link-btn {
  background: url(/jp/common/v2/img/icon_arow_light-blue.png) no-repeat right 10px center;
  border: 1px solid #3e6fcf;
  border-radius: 4px;
  color: #333;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  text-decoration: none;
  min-width: 240px;
  max-width: 500px;
  min-height: 40px;
  padding: 5px 30px 5px 10px;
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__link-btn {
    max-width: none;
    min-width: 0;
  }
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__link-btn + .trendnews__link-btn {
    margin-top: 10px;
  }
}

/* ==================================================================
   11. 冒頭リード文＋区切り線
   ・基盤CSSの trendnews-lead は「太字16px」。本文と同じ字面（15px標準）のまま
     区切り線だけ出したいとき用に、線の見た目だけ揃えたモジュールを用意した
   ・線のサイズ・色は trendnews-lead::after と同値（PC 130x1px／SP 70x1px・#ccc）
   ================================================================== */
#container .section .trendnews__lead {
  margin-top: 60px;
  padding-bottom: 60px;
  position: relative;
}
#container .section .trendnews__lead::after {
  content: "";
  background: #ccc;
  width: 130px;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 640px) {
  #container .section .trendnews__lead {
    margin-top: 40px;
    padding-bottom: 30px;
  }
  #container .section .trendnews__lead::after {
    width: 70px;
  }
}