:root {
  --purpose-cyan: #41BAD2;
  --purpose-accent: #FCE965;
  --text-default: #404042;
}

/* 余白が生じるので横overflowをカット */
#content{ overflow-x: hidden; }

/* -------------------- Font -------------------- */

.font-kosugi-maru { font-family: "Kosugi Maru", sans-serif; font-weight: 400; font-style: normal; }
.font-m-plus-1p { font-family: "M PLUS 1p", sans-serif; font-weight: 700;}
.text-purpose-cyan { color: var(--purpose-cyan); }

/* -------------------- パーパス 見出し画像 section -------------------- */

#content #purpose-heading img {
  /* 横1920px(=137.14rem ※1rem=14px)まで見出し画像の画面幅いっぱい表示を保証。それ以降は縮小。 */
  max-width: 137.14rem; 
  height: auto;
}

/* スマホ表示の場合、正方形の画像に切り替える */
#content .is-sp { display: none; }
#content .is-pc { display: flex;} 
@media (max-width: 768px) {
  #content .is-pc { display: none; }
  #content #purpose-heading .is-sp {
    display: flex;
    width: 100%;
  }
}

/* -------------------- 『パーパス』ストーリーエリア -------------------- */

/* 背景: 非拡大(高さ基準) + オフセット */
#purpose-story {
  background-image: url("../img/img_purpose_03.png");
  background-repeat: no-repeat;
  background-position: 57.5% center; 
  background-size: cover;
}

.purpose-story-text-area-container{
padding-top: calc(10rem + 1lh);
padding-bottom: 2rem;
}

#purpose-story p {
  display: inline-block; 
  font-size: 1.25rem;
  color:#4A4B54 ;
  letter-spacing: 0.03rem;
  line-height: 2.25;
  paint-order: stroke;
}

/* 縦方向確保不可 & 縦長比率時: cover でトリミング */
@media (max-width: 576px) {
  #purpose-story {
    background-size: cover;
    background-position: 12.5% bottom; 
    background-size: auto 115%;
    padding-bottom:0!important;
  }
  #purpose-story p {
    font-size:1rem;
  }
  .purpose-story-text-area-container{
    padding-top: 7rem;
    padding-bottom: 2rem;
  }
}

  /* -------------------- 本文背景ぼかし -------------------- */

  .text-backdrop{
    position: relative; 
    padding:2px;
    z-index: 1; 
  }

  .text-backdrop::before{
    content: '';     
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    z-index: -1; 
    
    mix-blend-mode: lighten;
    opacity: 0.8;
  }


  @media (max-width: 768px){
    .text-backdrop::before{
    background-color: rgba(255, 255, 255, 0.8);
    }
  }

  /* -------------------- 本文背景ぼかし ここまで -------------------- */

/* -------------------- 『パーパス』ストーリーエリア ここまで -------------------- */



/* -------------------- 『パーパス』とは？ 見出しオビ -------------------- */

.head-border-container {
  position: relative;
  height: 3rem;
}
.head-border-container::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
  background: white;
}
.head-border {
  display: flex;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.head-border-text-wrapper {
  padding-left: 3rem;
  padding-right: 3rem;
  background: transparent;
  border-radius: 0 0 10px 10px;
  position: relative;
}

.head-border-text-wrapper p{
  font-size:1.25rem;
}


.head-border:before,
.head-border:after {
  content: "";
  height: 3rem;
  flex-grow: 1;
  border-radius: 10px;
  background-color: rgba(65, 186, 210, 0.9);
  box-shadow: 0 3px 1px rgba(0, 0, 0, 0.3);
}

.heading-shape-bottom { padding-top: .5rem; padding-bottom: 1rem; }
.heading-shape-bottom::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 0;
  border-radius: 0 0 1.5rem 1.5rem;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
  background: white;
  filter: drop-shadow(3px 3px 1px rgba(0, 0, 0, 0.2));
}

.head-border:before { border-radius: 0 1.5rem 0 0; }
.head-border:after  { border-radius: 1.5rem 0 0 0; }

@media (max-width: 768px) {
  .head-border-text-wrapper h1{
    font-size: 2rem;
  }
  .head-border-text-wrapper p{
    font-size:1rem;
    line-height: 1.75!important;
  }
  .heading-shape-bottom{
    margin:0.5rem!important;
  }
}

/* -------------------- 『パーパス』とは？ 見出しオビここまで -------------------- */



/* -------------------- パーパス動画 section -------------------- */

#purpose-movie { 
  background-color: var(--purpose-cyan); box-shadow: 0 -5px 10px -2px #41bad288; 
}

/* セクション上下ボーダー */
 .purpose-border-top, .purpose-border-bottom { height: 3rem; background: #41bad285; position: relative; }
 .purpose-border-top { box-shadow: inset 0 -3px 6px rgba(255,255,255,0.1), 0 -2px 4px rgba(255,255,255,0.15); }
 .purpose-border-bottom { box-shadow: inset 0 3px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.15); }


/* -------------------- 「ロング動画はこちら」用のボタン -------------------- */
.btn-container { text-align: center; margin: 1em 0; }
.arrow-btn-outline { --arrow-color: var(--purpose-accent); position: relative; border:1px solid var(--arrow-color); color:var(--arrow-color); text-decoration:none; padding:8px 30px; display:inline-block; text-align:center; transition:all .2s linear; }
.arrow-btn-outline::before { content:''; position:absolute; top:50%; transform:translateY(-50%) skewX(50deg); right:-20px; width:40px; height:10px; border-bottom:2px solid var(--arrow-color); border-right:2px solid var(--arrow-color); transition:all .3s ease-out; opacity:0; }
.arrow-btn-outline:hover { background:var(--purpose-accent); color:#333333; border-color:var(--purpose-accent); }
.arrow-btn-outline:hover::before { right:-25px; }



/* -------------------- youtube video embed -------------------- */
.video-container {
  position: relative;
  padding-top: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  max-height: 3rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 1rem;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 576px) {

  .head-border-text-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .video-container {
    padding-top: 75%;
    max-height: 2rem;
  }
}


/* -------------------- ユーティリティ -------------------- */

/* -------------------- 蛍光ペン -------------------- */
.marker {
  position: relative;
  display: inline-block;
  padding: 0 .25rem;
  margin-bottom: -0.5rem;
  line-height: 1;
}
.marker::before {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* 蛍光ペンのスタイルを移動 */
  background: linear-gradient(transparent 60%, var(--purpose-accent) 60%);
  border-radius: 0.2rem;
  
  /* テキスト（縁取り含む）の後ろに配置 */
  z-index: 2;
  
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
/* -------------------- 蛍光ペン ここまで -------------------- */