/* =========================================================
   Base
========================================================= */

:root {
  --black: #111111;

  --blue-main: #00AFFF;
  --blue: #005BAD;
  --light-cyan: #DAEFFB;
  --cyan: #5EC6D2;
  --purple: #BE98C4;
  --gray-blue: #98A7BB;

  --white: #ffffff;

  --section-padding: 8vw;
  --transition: 1.0s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   Reset
========================================================= */

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  color: var(--black);
  background: var(--white);

  font-family:
    "DIN Next",
    "Yu Gothic",
    "YuGothic",
    "游ゴシック",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-weight: 600;
  line-height: 1.8;

  overflow-x: hidden;
}

img {
  max-width: 100%;
}


/* =========================================================
   Single Page
========================================================= */

.site {
  width: 100%;
  overflow: hidden;
}


/* =========================================================
   Visual Image
========================================================= */

.visual {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  background: var(--white);
  overflow: hidden;
}

.visual__image {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   Smartphone Visual
========================================================= */

@media (orientation: portrait) {

  .motion-section .visual {
    position: relative;

    width: 100%;
    height: 100svh;
    max-width: none;
  }

  .motion-section .visual picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .motion-section .visual__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
  }

  .motion-section .center-image {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
  }

}


.sp-br {
  display: none;
}

@media screen and (max-width: 700px) {
  .sp-br {
    display: inline;
  }
}

/* =========================================================
   Section
========================================================= */

.section {
  position: relative;
  width: 100%;

  display: flex;
  align-items: center;

  padding:
    var(--section-padding)
    var(--section-padding);

  overflow: hidden;

  /* 基本状態 */
  opacity: 1;
  transform: translateY(0);

  transition:
    background-color var(--transition),
    color var(--transition),
    opacity var(--transition),
    transform var(--transition);
}



/* =========================================================
   Section Inner
========================================================= */

.section__inner {
  position: relative;

  width: 100%;
  max-width: 1400px;

  margin: 0 auto;

  z-index: 2;
}



/* =========================================================
   Typography
========================================================= */

.section__title {
  margin: 0;

  font-family:
    "Yu Gothic",
    "YuGothic",
    "游ゴシック",
    sans-serif;

  font-size: clamp(2.5rem, 7vw, 8rem);
  font-weight: 600;

  line-height: 1.05;
  letter-spacing: 0.02em;
}

.section__lead {
  margin-top: 2rem;

  font-size: clamp(1rem, 1.5vw, 1.4rem);
  line-height: 2;
}


/* =========================================================
   Section Color Variations
========================================================= */

.section--white {

  color: var(--blue-main);
  background: var(--white);
}

.section--blue-main {
  color: var(--white);
  background: var(--blue-main);
}

.section--blue {
  color: var(--white);
  background: var(--blue);
}

.section--light-cyan {
  color: var(--blue-main);
  background: var(--light-cyan);
}

.section--cyan {
  color: var(--black);
  background: var(--cyan);
}

.section--grayblue {
  color: var(--white);
  background: var(--gray-blue);
}


/* =========================================================
   text
========================================================= */

.brand {
  display: block;
  font-size: 2.4em;
  line-height: 1.1;
  font-family: "Barlow", sans-serif;
  font-weight: 500;
}

.brand-sub {
  display: block;
  margin-top: 2.5em;
  font-size: 0.7em;
  line-height: 1.8;
}

.brand-text {
  display: block;
  font-size: 0.9em;
  text-align: center;
  line-height: 2.8;
  margin-bottom: 0;
}

.brand-mini-text {
  display: block;
  font-size: 10pt;
  text-align: center;
  line-height: 5.2;
}
.section-05__text {
  display: block;
  font-size: 1.1em;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 2.4;
}

.section-06__text {
  display: block;
  font-size: 1.1em;
  color: #fff;
  text-align: center;
  line-height: 2.2;
  margin-bottom: 0;
}


/* =========================================================
   Scroll Animation
========================================================= */

.anim-fade-up {
  opacity: 0;
  transform: translateY(80px);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-active .anim-fade-up {
  opacity: 1;
  transform: translateY(0);
}


.anim-fade {
  opacity: 0;

  transition:
    opacity 1.5s ease;
}

.is-active .anim-fade {
  opacity: 1;
}


.anim-scale {
  opacity: 0;
  transform: scale(0.85);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-active .anim-scale {
  opacity: 1;
  transform: scale(1);
}


.anim-slide-left {
  opacity: 0;
  transform: translateX(100px);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-active .anim-slide-left {
  opacity: 1;
  transform: translateX(0);
}


.anim-slide-right {
  opacity: 0;
  transform: translateX(-100px);

  transition:
    opacity 1s ease,
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.is-active .anim-slide-right {
  opacity: 1;
  transform: translateX(0);
}

.section-04 .anim-fade-up {
  transform: translateY(40px);
}

.section-04.is-active .anim-fade-up {
  transform: translateY(0);
}

.section-04 .logo-delay-0 {
  transition-delay: 0.5s;
}

.section-04 .logo-delay-1 {
  transition-delay: 1.2s;
}

.section-04 .logo-delay-2 {
  transition-delay: 1.5s;
}

.section-04 .logo-delay-3 {
  transition-delay: 1.8s;
}



/* =========================================================
   Delay
========================================================= */

.delay-1 {
  transition-delay: 0.1s;
}

.delay-2 {
  transition-delay: 0.2s;
}

.delay-3 {
  transition-delay: 0.3s;
}

.delay-4 {
  transition-delay: 0.4s;
}

.delay-5 {
  transition-delay: 0.5s;
}


/* =========================================================
   Logo
========================================================= */

.logo {
  display: block;

  width: min(70vw, 600px);
  height: auto;

  margin: 0 auto;
}


/* =========================================================
   Scroll Indicator
========================================================= */

.scroll-indicator {
  position: fixed;

  bottom: 1.5rem;
  left: 50%;

  transform: translateX(-50%);

  z-index: 100;

  font-family:
    "DIN Next",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 0.7rem;
  color: #000000;
  letter-spacing: 0.2em;

  text-transform: uppercase;

  opacity: 0.7;
}

.scroll-indicator::after {
  content: "";

  display: block;

  width: 1px;
  height: 40px;

  margin: 0.4rem auto 0;

  background: currentColor;

  animation:
    scroll-line 1.8s ease-in-out infinite;
}

@keyframes scroll-line {

  0% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }

  100% {
    transform: scaleY(0);
    transform-origin: bottom;
  }

}



/* =========================================================
   Responsive
========================================================= */

@media (orientation: portrait) {

  :root {
    --section-padding: 8vw;
  }

  .section {
    min-height: 100svh;
  }

  .section__title {
    font-size: clamp(2.5rem, 10vw, 5rem);
  }

  .section__lead {
    font-size: 1rem;
  }

  .scroll-indicator {
    bottom: 1rem;
  }

}



/* =========================================
   VISUAL IMAGE Opening Animation
========================================= */

.motion-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}

.intro-text {
  position: absolute;
  z-index: 10;

  top: 47%;
  left: 50%;

  width: 100%;

  transform: translate(-50%, -50%);

  text-align: center;
  color: #00a0e9;

  font-size: 18px;

  opacity: 0;

  animation: introTextFade 3s ease forwards;
}

.intro-text p {
  margin: 0;
}

@keyframes introTextFade {

  0% {
    opacity: 0;
  }

  33.333% {
    opacity: 1;
  }

  66.666% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}

@media screen and (max-width: 700px) {
  .intro-text__title {
    letter-spacing: -0.05em;
  }
}


/* =========================================
   VISUAL IMAGE
   3秒後から2秒かけて表示
========================================= */

.motion-section .visual {
  position: relative;

  width: 100%;
  max-width: none;

  opacity: 0;

  animation: visualFade 2s ease forwards;
  animation-delay: 3s;

  z-index: 1;
}

.motion-section .visual__image {
  display: block;

  width: 100%;
  height: auto;

  object-fit: cover;
  object-position: center center;
}

.motion-section .center-image {
  position: absolute;

  z-index: 2;

  top: 47%;
  left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0;
  animation: centerImageFade 1.5s ease forwards;
  animation-delay: 5s;
}

.motion-section .center-image img {
  display: block;

  width: 300px;
  height: auto;

  max-width: 50vw;
}


@media (orientation: portrait) {

  .motion-section .visual {
    height: 100svh;
  }

  .motion-section .visual picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .motion-section .visual__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .motion-section .center-image {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}



/* 2秒かけてVISUAL IMAGEを表示 */

@keyframes visualFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


/* ロゴタイプを浮かび上がらせる */

@keyframes centerImageFade {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}

/* =========================================
   SECTION 02：正三角形
========================================= */

.section-02 {
  position: relative;
  overflow: hidden;

  /* 三角形の最大幅1400pxに合わせる */
  height: min(
    calc(100vw * 0.8660254),
    calc(1400px * 0.8660254)
  );

  min-height: 0;
  padding: 0;
}


/* 正三角形 */

.section-02::before {
  content: "";
  position: absolute;

  top: 0;
  left: 50%;

  width: min(100vw, 1400px);

  height: min(
    calc(100vw * 0.8660254),
    calc(1400px * 0.8660254)
  );

  transform: translateX(-50%);

  background: var(--blue-main);

  clip-path: polygon(
    50% 0,
    100% 100%,
    0 100%
  );

  z-index: 0;
}

/* テキスト全体 */
.section-02__text {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  margin: 0;

  width: max-content;

  color: #ffffff;

  text-align: center;
}

.statement-text {
  display: block;
  font-size: 22px;
  text-align: center;
  line-height: 2.3;
  margin-bottom: 0;
}

.statement-mini-text {
  display: block;
  font-size: 10pt;
  text-align: center;
  line-height: 4.4;
  margin-bottom: 0;
}

.togaru {
  display: block;
  width: min(536px, 90vw);
  height: auto;
  margin: 0 auto;
}

.tagline-statement-space {
  display: block;
  height: 70px;12:33 2026/10/02
}


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

  .section-02 {
    height: 100svh;
    min-height: 760px;

    padding: 0 24px;
  }

  .section-02::before {
    width: 1400px;
    height: calc(1400px * 0.8660254);

    left: 50%;
    transform: translateX(-50%);
  }

}


/* =========================================
   SECTION 02：テキスト位置調整
========================================= */

/* タブレット */
@media screen and (min-width: 701px) and (max-width: 1023px) {

  .section-02__text {
    width: 90vw;
    transform: translate(-50%, -50%) translateY(90px);
  }

  .togaru {
    width: 40vw;
    max-width: 536px;
    height: auto;
    margin: 0 auto;
  }

  .tagline-statement-space {
    height: 30px;
  }

}


/* スマホ */
@media screen and (max-width: 700px) {

  .section-02__text {
    transform: translate(-50%, -50%) translateY(100px);
  }

}


/* =========================================
   SECTION 02
   PC Scroll Animation★★
========================================= */

@media screen and (min-width: 1025px) {

  .section-02 > .section__inner {
    transform: translateY(var(--section02-move, 0px));
    will-change: transform;
  }

}



/* =========================================
   SECTION 04 : Logo Design
========================================= */

.section-04 {
  background: var(--white);
  color: var(--blue-main);
}


/* =========================================
   SECTION 04 内部
========================================= */

.section-04__inner {
  width: 100%;
  max-width: 1400px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  gap: 80px;
}


/* =========================================
   上段
========================================= */

.section-04__top {
  width: 100%;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: start;

  gap: 6vw;
}


/* =========================================
   左：説明文
========================================= */

.section-04__description {
  width: 100%;
}


/* タイトル */

.section-04 .logo-title {
  display: block;

  margin: 0;
  font-family: "Barlow", sans-serif;
  font-size: clamp(2.4rem, 3.6vw, 3.36rem);

  line-height: 1.1;

  font-weight: 500;
}


/* 説明文 */

.section-04__text {
  margin: 30px 0 0;
  font-weight: bold;
  line-height: 1.8;
}

.section-04__text-space {
  display: block;
  height: 0.8em;
}


/* =========================================
   右上：メインロゴ
========================================= */

.section-04__main-logo {
  width: 100%;

  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  padding-top: 60px;
}

.section-04__main-logo img {
  display: block;

  width: 90%;
  max-width: 400px;

  height: auto;
}


/* =========================================
   下段：3種類のロゴ
========================================= */

.section-04__logos {
  width: 100%;

  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 5vw;

  align-items: start;
}


/* 各ロゴ */

.section-04 .logo-item {
  width: 100%;
}


/* ロゴ名称 */

.section-04 .logo-label {
  display: block;

  margin-bottom: 20px;

  font-weight: bold;

  line-height: 1.4;

  text-align: left;
}


/* ロゴ画像 */

.section-04 .logo-item img {
  display: block;

  width: 100%;
  max-width: 320px;

  height: auto;
}


/* =========================================
   SECTION 04 Responsive
========================================= */

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

  .section-04__inner {
    gap: 60px;
  }


  /* 上段を縦並びに */

  .section-04__top {
    grid-template-columns: 1fr;

    gap: 40px;
  }

  .section-04 .logo-title {
    font-size: 2.4rem;
  }

  .section-04__text {
    font-size: 14px;
  }


  /* メインロゴ */

  .section-04__main-logo {
    padding-top: 0;

    justify-content: center;
  }


  .section-04__main-logo img {
    width: 90%;
    max-width: 340px;
  }


  /* 下段3ロゴ */

  .section-04__logos {
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
  }


  .section-04 .logo-label {
    font-size: 11px;

    margin-bottom: 10px;

    text-align: center;
  }


  .section-04 .logo-item img {
    width: 100%;
    max-width: none;
  }

}


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

  .section-04__inner {
    gap: 50px;
  }


  .section-04__text {
    font-size: 14px;
    line-height: 1.8;
  }


  /* スマホでは3ロゴを縦にする */

  .section-04__logos {
    grid-template-columns: 1fr;

    gap: 40px;

    width: 80%;

    margin: 0 auto;
  }


  .section-04 .logo-item img {
    width: 100%;
    max-width: 300px;

    margin: 0 auto;
  }

}


/* =========================================
   SECTION 04：下余白調整
========================================= */

/* PC */
.section-04 {
  padding-bottom: 80px;
}

/* タブレット */
@media screen and (min-width: 701px) and (max-width: 1023px) {
  .section-04 {
    padding-bottom: 10px;
    min-height: auto;
  }
}

/* =========================================
   SECTION 06
========================================= */
.section-06 {
  position: relative;
  top: -1px;
  z-index: 1;
  border-top: 1px solid var(--light-cyan);

  min-height: calc(
    (100vw - 150px) * 1080 / 1920
    + 150px
  );

  background: var(--light-cyan);
  display: flex;
  align-items: center;
}

.section-06__image {
  position: absolute;

  top: 75px;
  left: 75px;
  right: 75px;

  z-index: 0;
}

.section-06__image picture {
  display: block;
  width: 100%;
}

.section-06__image img {
  display: block;
  width: 100%;
  height: auto;
}

.section-06 .section__inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
  top: -85px;
}

.section-06 .brand {
  color: #fff;
}

.section-06 .brand-text {
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.8;
}

.section-06 .brand-mini-text {
  color: #fff;
}


/* =========================================
   SECTION 06 : Color Palette
========================================= */

.section-06__palette {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.section-06__palette-item {
  width: 80px;
  height: 80px;
  flex-shrink: 0;

  border: 1px solid #fff;
  box-sizing: border-box;
}

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

  .section-06__palette-item {
    width: 60px;
    height: 60px;
  }

  .section-06__palette {
    gap: 15px;
  }

}

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

  .section-06__palette-item {
    width: 60px;
    height: 60px;
  }

  .section-06__palette {
    gap: 15px;
  }

}


/* カラー */

.section-06__palette-item:nth-child(1) {
  background-color: #005bac;
}

.section-06__palette-item:nth-child(2) {
  background-color: #cb9ec7;
}

.section-06__palette-item:nth-child(3) {
  background-color: #5cc2d9;
}

.section-06__palette-item:nth-child(4) {
  background-color: #00a0e9;
}

.section-06__palette-item:nth-child(5) {
  background-color: #93a8bd;
}

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

  .section-06 {
    height: 100svh !important;
    min-height: 100svh !important;

    padding: 0;
  }

  .section-06__image {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .section-06__image picture {
    width: 100%;
    height: 100%;
  }

  .section-06__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

}

/* =========================================
   SECTION 07 : ANNOUNCEMENT
========================================= */
.section-07 {
  position: relative;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.section-07__image {
  display: block;
  width: 100%;
  height: auto;
}

.section-07__inner {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* ロゴ＋テキスト */

.section-07__content {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 20px;

  transform: translateY(120px);
}

.section-07__logo {
  display: block;

  width: 300px;
  max-width: 60vw;
  margin-top: 350px;
  height: auto;
  margin-bottom: 30px;
}

.section-07__text {
  margin: 0;
  color: #ffffff;
  font-size: clamp(0.9rem, 1vw, 1.2rem);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.08em;
}

.section-07__pdf-links {
  margin-top: 14px;
  text-align: center;
}

.section-07__pdf-links-row {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
}

.section-07__pdf-links a {
  display: block;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.section-07__text a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}


/* タブレット */

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

  .section-07__content {
    transform: translateY(110px);
  }

}

/* スマホ */
@media screen and (max-width: 767px) {

  .section-07__content {
    transform: translateY(10px);
  }

  .section-07__pdf-links a {
    font-size: 0.9em;
  }

}
  .section-07__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

}



/* =========================================
   SECTION 08 VIDEO
========================================= */

.section--08 {
  position: relative;
  overflow: hidden;
}

.section-08__video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 0;
}

.section-08__video video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;
}


/* テキストを動画の上に表示 */

.section--08 .section__inner {
  position: relative;
  z-index: 1;
}



/* =========================================
   セクション間の余白調整
========================================= */

/* VISUAL IMAGE → SECTION 00 */
.motion-section {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;

  /* SECTION 00自身のpaddingで余白を作る */
  margin-bottom: 0;
}


/* SECTION 00 */
.section-00 {
  min-height: 0;

  padding-top: 128px;
  padding-bottom: 128px;

  margin-top: 0;
  margin-bottom: 0;
}


/* SECTION 00 → SECTION 01 */
.section-00 {
  min-height: 0;
  padding-top: 128px;
  padding-bottom: 128px;
  margin-top: 0;
  margin-bottom: 0;
}

/* SECTION 01 */
.section-01 {
  padding-top: 0;
  margin-bottom: 128px;
}


/* スマホ：SECTION 00 の上下余白を縮める */
@media screen and (max-width: 700px) {
  .section-00 {
    padding-top: 60px;
    padding-bottom: 80px;
  }
}

/* SECTION 01 → SECTION 02 */
.section-01 {
  margin-bottom: 128px;
}

.section-02 {
  padding-bottom: 0;
}

/* SECTION 04 → SECTION 05 */
.section-04 {
  margin-bottom: 128px;
}

/* SECTION 05 → SECTION 06 */
.section-05 {
  margin-bottom: 0;
}

@media screen and (min-width: 701px) and (max-width: 1023px) {
  .section-05 {
    min-height: auto;
padding-bottom: calc(8vw + 60px);
  }
}

/* SECTION 06 → SECTION 07 */
.section-06 {
  margin-bottom: 0px;
}

/* SECTION 07 → SECTION 08 */
.section-07 {
  margin-bottom: 0;
}


/* =========================================================
   JAIST共通ヘッダー・フッターのみ：元サイトのフォント
========================================================= */

.site-header,
.site-header *,
#nav_block,
#nav_block *,
#copyright_block,
#copyright_block * {
  font-family:
    'メイリオ',
    Meiryo,
    'ヒラギノ角ゴ Pro W3',
    'Hiragino Kaku Gothic Pro',
    'ＭＳ Ｐゴシック',
    'MS P Gothic',
    sans-serif;

  font-weight: normal;
}

@media screen and (min-width: 768px) {
  #copyright_area {
    padding-top: 24px;
    padding-bottom: 37px;
  }
}

/* =========================================
   Google検索窓
   スマホ・タブレット調整
========================================= */

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

  #utility_search {
    width: 100% !important;
    box-sizing: border-box;
    padding: 10px;
  }

  #utility_search .gsc-control-cse {
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box;
  }

  #utility_search .gsc-control-wrapper-cse {
    width: 100% !important;
  }

  #utility_search form.gsc-search-box {
    width: 100% !important;
    margin: 0 !important;
  }

  #utility_search table.gsc-search-box {
    width: 100% !important;
    margin: 0 !important;
    table-layout: auto !important;
  }

  #utility_search td.gsc-input {
    width: 100% !important;
    padding-right: 0 !important;
  }

  #utility_search .gsc-input-box {
    width: 100% !important;
    box-sizing: border-box;
  }

  #utility_search .gsib_a {
    width: auto !important;
  }

  #utility_search input.gsc-input {
    width: 100% !important;
    box-sizing: border-box;
  }

}


/* タブレットのみ */
@media screen and (min-width: 768px) and (max-width: 1023px) {

  .header-utility-main-cont {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;

    top: 78px !important;
    bottom: auto !important;

    display: block !important;
  }

  .header-utility-main-cont-sec {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;

    padding: 10px !important;
    box-sizing: border-box;
  }

}


/* =========================================
   SECTION 07 → Footer
   SECTION 08 非表示中
========================================= */

.section-07 {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* =========================================
   Footer レスポンシブ調整
========================================= */


/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1023px) {

#copyright_area {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  padding: 15px 20px;
}
  #copyright_block #footer_link {
    order: 1;

    width: 100%;
    height: auto !important;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    text-align: right;
    line-height: 1.5;
  }

  #copyright_block .address {
    order: 2;

    width: 100%;

    margin: 15px 0 0 !important;
    padding: 0;

    box-sizing: border-box;

    line-height: 1.6;
  }
}


/* スマホ */
@media screen and (max-width: 767px) {

  #copyright_area {
    padding-top: 10px;
    padding-bottom: calc(
      10px + var(--utility--btn--height)
    );
  }

}


/* =========================================
   スマホ版 SECTION 06・07
   1画面分の高さ
========================================= */

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

  .section-06,
  .section-07 {
    height: 100svh !important;
    min-height: 100svh !important;
  }

}


/* =========================================
   スマホ版 SECTION 04
   Brand系見出しと位置を統一
========================================= */

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

  .section-04 {
    min-height: 0;
    height: auto;
    padding-bottom: 0;
  }

  .section-04__top {
    display: block;
  }

  .section-04__description {
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .section-04 .logo-title {
    margin: 0;
    font-size: 2.7em;
    line-height: 1.1;
  }

  .section-04__main-logo {
    margin-top: 40px;
  }
}



/* =========================================
   スマホ：Scroll Indicator位置調整
========================================= */
@media screen and (max-width: 767px) {

  .scroll-indicator {
    bottom: calc(var(--utility--btn--height) + 15px);
  }

}

.scroll-indicator {
  transition: opacity 0.3s ease;
}

.scroll-indicator.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* =========================================
   スマホ版 テキスト調整
========================================= */

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

  .brand-text {
    font-size: 0.9em;
  }

  .section-05__text {
    font-size: 0.9em;
  }

.section-04__text {
  font-size: 0.9em;
  line-height: 2.4;
}

  .statement-text {
    font-size: 1.0em;
  line-height: 2.4;
  }

  .statement-mini-text {
    font-size: 9pt;
  }

  .section-06__text {
    font-size: 0.9em;
  }

  .section-07__text {
    font-size: 0.9em;
  }
}


/* =========================================
   Google検索窓
   Google CSE仕様変更対策（Google検索窓3点セットは全部必須です）
========================================= */

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

  #utility_search .gsc-control-cse,
  #utility_search .gsc-control-wrapper-cse,
  #utility_search .gsc-search-box-tools,
  #utility_search form.gsc-search-box,
  #utility_search table.gsc-search-box {
    width: 100% !important;
    max-width: none !important;
  }

  #utility_search table.gsc-search-box {
    table-layout: auto !important;
  }

  #utility_search td.gsc-input {
    width: 100% !important;
  }

  #utility_search .gsc-input-box {
    width: 100% !important;
  }

}

/* =========================================
   Google検索窓：幅を強制的に100%化
========================================= */

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

  #utility_search .gsc-search-box-tools,
  #utility_search .gsc-search-box,
  #utility_search .gsc-search-box table,
  #utility_search table.gsc-search-box,
  #utility_search tbody,
  #utility_search tr {
    width: 100% !important;
  }

  #utility_search td.gsc-input {
    width: 100% !important;
    max-width: none !important;
  }

  #utility_search .gsc-input-box,
  #utility_search .gsib_a,
  #utility_search .gsib_b {
    width: 100% !important;
    max-width: none !important;
  }

}


/* =========================================
   Googleカスタム検索
   Google側の300px固定幅を解除
========================================= */

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

  #utility_search .gsc-control {
    width: 100% !important;
    max-width: none !important;
  }

}