@charset "utf-8";

html { scroll-behavior: smooth; }
#globalMain, #globalContents{ overflow: visible; }
#globalWrapper { box-sizing: border-box; }

/* =====================
  Foundation（ベース）
===================== */
/* Variables & Setup -------------------- */
:root {
  scroll-padding-top: 120px;
}

.fender-container-wrapper {
  container-type: inline-size;
  container-name: fender-container-wrapper;
}

.fender-container * { box-sizing: border-box; }

:root .fender-container {
  --color-blackalpha: #00000011;
  --color-black: #333;
  --color-gray: #777;
  --color-lightgray: #ccc;
  --color-offwhite: #f6f6f6;
  --color-white: #fff;
  --color-red: #d52b1e;
  --pdin-common: 1.5rem;
  --hover-opacity: 0.7;
  --shadow-blur: 2px 2px .5rem var(--color-blackalpha);
  --shadow-offset: 3px 3px 0 var(--color-blackalpha);
}

/* common -------------------- */ 
.fender-container {
  max-width: 1420px;
  margin-inline: auto;
  background-color: var(--color-white);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1.4;
@container fender-container-wrapper (max-width: 768px) {
  font-size: 14px;
}
@container fender-container-wrapper (max-width: 350px) {
  font-size: 13px;
}

  & section{
    padding-block: 3rem;
  @container fender-container-wrapper (max-width: 600px) {
    padding-block: 2.5rem;
  }
  @container fender-container-wrapper (max-width: 414px) {
    padding-block: 2rem;
  }
  }

  & .inner{
    padding-inline: var(--pdin-common);
  }

  & figure{ 
    text-align: center;
    overflow: hidden;
  }

  & img{
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }

  & a{
    color: inherit;
    text-decoration: none;
  }

  & span{
    color: inherit;
    font-weight: inherit;
  }
}

/* =====================
  Utility
===================== */
/* 背景色  */
.fender-container .bg-ow{
  background-color: var(--color-offwhite);
}

/* =====================
  UI / Component
===================== */
/* 見出し */
.fender-container .ui-heading-g{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 1rem;
  & > h2{
    font-family: Helvetica, sans-serif;
    color: var(--color-red);
    font-size: 300%;    
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  & > p{
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 125%;
    &::before,
    &::after{
      content: "";
      display: block;
      width: 2rem;
      height: 1px;
      background-color: var(--color-black);
    }
  }
@container fender-container-wrapper (max-width: 600px) {
  & > h2{
    font-size: 200%;
  }
}
}

/* 小見出し */
.fender-container .ui-sub-heading{
  margin-bottom: 1.5rem;
  padding-inline: .75rem;
  border-left: .5rem solid var(--color-red);
  border-bottom: 1px solid var(--color-black);
  font-size: 150%;
  font-weight: bold;
}

/* CTAボタン */
.fender-container .ui-btn-cta{
	display: block;
  width: fit-content;
  margin-inline: auto;
  padding-block: .5rem;
  padding-inline: 2rem;
  border-radius: 100vmax;
  background-color: var(--color-red);
  color: var(--color-white);
  text-align: center;
  font-weight: bold;
  &:hover{
    opacity: var(--hover-opacity);
  }
}

/* img：祖先要素ホバーで拡大 */
.fender-container .fx-expansion{
  & img {
    transition: transform 0.3s ease;
  }

  &:hover img {
    transform: scale(1.03);
  }
}

/* 文章 */
.fender-container .paragraph{
  line-height: 1.7;
  & + .paragraph{
    margin-top: .5rem;
  }
}

/* 2行以上で... */
.fender-container .textellipsis-2{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
  line-clamp: 2;
	-webkit-line-clamp: 2;
}

/* 3行以上で... */
.fender-container .textellipsis-3{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
  line-clamp: 3;
	-webkit-line-clamp: 3;
}

/* 点々のリスト */
.fender-container .ui-disc-list{
  list-style-type: disc;
  margin-left: 2rem;
  & > li + li{
    margin-top: .25rem;
  }
}

/* 動画ブロック（埋め込み） */
.fender-container .ui-moviebox{
  position: relative;
  width: 100%;
  margin-block: 0;
  margin-inline: auto;
  aspect-ratio: 16/9;
  & > iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
}

/* 動画のabsoアイコン（aにクラス名つける）*/
.fender-container .icon-movie{
	display: block;
	width: 100%;
	position: relative;
  &::after { position: absolute; display: block;	content: ""; width: 100%; height: 0; padding-top: 56.25%;top: 0;	left: 0;	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 68 48" width="100%" fill="%23ffffff"><path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="%23f00"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') no-repeat center center;	background-size: 20%; }
}

/* swiper -------------------- */
:root .fender-container{
  --swiper-theme-color: #d52b1e;
  --swiper-pagination-color:#d52b1e;
  --swiper-pagination-bullet-size: .75rem
  /* --swiper-navigation-size: 32px; */
}

.fender-container .swiper{
  position: relative;
}

.fender-container .swiper-pagination{
  position: relative;
  z-index: 0;
}

/* swiper：一時停止・再生ボタン */
.fender-container .swiper-ap-controls{
  position: absolute;
  z-index: 1;
  left: 2rem;
  bottom: 0;
  display: inline-flex;
  gap: 0 .5rem;

  & > button{
    width: 3rem;
    aspect-ratio: 1/1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: inherit;
    border: 0;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 1));
  }
  & > button.is-active{ opacity: 0.5;}

  & .swiper_pause{ background-image: url(../img/assets/pause_fill.svg); }
  & .swiper_start{ background-image: url(../img/assets/play_fill.svg); }
@container fender-container-wrapper (max-width: 600px) {
   > button{
    width: 2.5rem;
   }
}
}

/* gLightbox -------------------- */
:root {
  --plyr-color-main: #ff0000;
}

.goverlay {
	background: rgba(0, 0, 0, .7);
}