@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

#sub01 .sub-contents {
  text-align: center;
}
#sub01 .sub-contents h3 {
  padding-bottom: 0.5em;
}
#sub01 .sub-contents p {
  font-size: 105%;
  line-height: 1.8;
  padding-bottom: 2em;
}

/* ポップアップ動画：サムネイル画像 */
#sub02 .thumb-pci {
  background: url("images/movie01.jpg") no-repeat center center/cover;
}
#sub04 .thumb-pci {
  background: url("images/movie02.jpg") no-repeat center center/cover;
}

/* 2カラム内ページ内リンクボタン */
.column2 .sub-item a {
  width: 100%;
}
.column2 .sub-item a svg {
  transform: rotate(90deg);
}

.flex-container.column2 {
  justify-content: left;
}

.section-3rd-title {
  font-weight: bold;
  margin-bottom: 0.5em;
}
#sub08 .section-3rd-title,
#sub09 .section-3rd-title {
  margin-top: 4rem;
}
#sub08 .sub-item .text-container,
#sub09 .sub-item .text-container {
  margin-top: 0;
}
#sub08 .sub-item .img-container,
#sub09 .sub-item .img-container {
  margin-top: 2rem;
}
.sub-item-caption {
  margin-top: 0.5rem;
}
.center-caption {
  text-align: center;
  margin-top: 0.4em;
}
.right-caption {
  text-align: right;
  margin-top: 0.4em;
}
#sub11 h5 {
  font-weight: bold;
  margin-top: 1.5em;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* プラズマクラスター注釈 */
.pci-caption {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;
  border: 1px solid #959595;
  padding: 2rem 1em;
}

.pci-logo {
  inline-size: 16%;
  text-align: center;
}

.pci-logo img {
  inline-size: 50px;
}

.pci-text {
  flex: 1 0;
}

/* ====================================
	ホバーが有効な環境のみ
===================================== */
@media (hover: hover) and (pointer: fine) {
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media screen and (width < 768px) {
  .section-3rd-title {
    font-size: 1.6rem;
  }
  .sub-item-caption {
    font-size: 1.1rem;
  }
  #sub01 .sub-contents {
    padding: 3em 2em;
  }
  #sub10 .sub-img {
    width: 80%;
    margin: auto;
  }
  #sub10 .sub-contents {
    padding: 3.5em 2em 2em;
  }
  #sub10 .sub-contents .sub-txt h4 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }
  #sub10 .center-caption,
  #sub10 .right-caption {
    font-size: 1.3rem;
  }
  #sub11 .sub-img {
    width: 50%;
    margin: auto;
  }
  #sub11 h5 {
    font-size: 1.6rem;
  }
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print, screen and (width >=768px) {
  .section-3rd-title {
    font-size: 2rem;
  }
  .sub-item-caption {
    font-size: 1.2rem;
  }
  #sub01 .sub-contents {
    margin-top: 6em;
    padding: 6em 5em;
  }
  #sub10 .sub-contents {
    padding: 30px;
  }
  #sub10 .sub-contents .sub-img {
    flex: 0 0 auto;
    width: 200px;
  }
  #sub10 .sub-contents .sub-txt {
    flex: 1;
    padding-left: 30px;
  }
  #sub10 .sub-contents .sub-txt h4 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  #sub10 .center-caption,
  #sub10 .right-caption {
    font-size: 1.4rem;
  }
  #sub11 .sub-txt {
    flex: 1;
    padding-right: 40px;
  }
  #sub11 .sub-img {
    flex: 0 0 auto;
    width: 180px;
  }
  #sub11 h5 {
    font-size: 1.6rem;
  }
}

/* ====================================
	タブレット専用スタイル（768px～1080px）
===================================== */
@media screen and (768px <=width < 1080px) {
  /* プラズマクラスター注釈 */
  .pci-caption {
    column-gap: unset;
  }
}