@charset "UTF-8";

/*
Theme Name:
Theme URI:
Author:			O-GOE
*/

/* --------------------------------------------------------------------------------
	contents
-------------------------------------------------------------------------------- */
main{
  overflow-x: clip;
  position: relative;
}
footer{
  width: 100%;
  background-color: var(--color-lrd);
}
.main__wrap{
  max-width: 1728px;
  padding: 0 2vw;
  box-sizing: content-box;
  margin-inline: auto;
}
.main__ttlbox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 6.4rem;
  font-weight: bold;
  color: var(--color-rd);
  text-align: center;
  & .en {
    display: block;
    font-size: 2.4rem;
    line-height: 1; /* 余計な隙間を消す */
    font-family: "Poppins", sans-serif;
  }
  & .ja {
    display: block;
    font-size: 6.4rem;
    line-height: 1.2;
    margin-top: 5px;
  }
}
.main__subttl, .main__subttl_wh{
  width: 100%;
  font-size: 2.4rem;
  font-weight: bold;
  padding: 3px 0 5px 25px;
}
.main__subttl{
  border-left: 10px solid var(--color-rd);
}
.main__subttl_wh{
  border-left: 10px solid #fff;
  color: #fff;
}
.visually__hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .main__wrap{
    padding: 0 5vw;
  }
  .main__ttlbox {
    font-size: 2.6rem;
    text-align: left;
    & .en {
      font-size: 1.4rem;
    }
    & .ja {
      font-size: 2.6rem;
      margin-top: 5px;
    }
  }
  .main__subttl, .main__subttl_wh{
    width: 100%;
    font-size: 2rem;
    padding: 2px 0 4px 15px;
  }
  .footer-sp__btn{
    width: 100%;
    height: 100%;
    & a{
      width: 100%;
      height: 100%;
      background-color: var(--color-rd);
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      font-size: 1.4rem;
      text-align: center;
      line-height: 1em;
    }
    & a img{
      height: 25px;
      margin-right: 10px;
    }
  }
}
/* --------------------------------------------------------------------------------
  topimg
-------------------------------------------------------------------------------- */
.topimg__wrap{
  width: 100%;
  max-height: 100svh;
  aspect-ratio: 16 /9;
  background: url(../images/partner-pr/top-bg.svg) no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;   /* 上から順に並べる */
  justify-content: center;  /* 垂直方向中央 */
  align-items: center;      /* 水平方向中央 */
  text-align: center;       /* テキスト自体も中央寄せ */
}
.topimg__imgbox01{
  height: 100%;
  aspect-ratio: 652 / 1080;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.topimg__imgbox02{
  height: 100%;
  aspect-ratio: 721 / 1080;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.topimg__wrap h3,
.topimg__wrap h4,
.topimg__btnbox {
  position: relative;
  z-index: 2;
}
.topimg__wrap h3{
  font-size: clamp(3.5rem, 1.19rem + 2.76vw, 6.5rem);
  font-weight: 900;
  color: var(--color-rd);
  line-height: 2;
  text-align: center;
   & span{
    background-color: #fff;
    padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    /* 改行しても1行ずつ背景を独立させる魔法 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.topimg__wrap h4{
  font-size: clamp(2.0rem, 0.08rem + 2.3vw, 4.5rem);
  color: #fff;
  /* h2と幅を合わせるための設定 */
  width: 100%; /* 必要に応じてh2と同じ%に調整してください */
  margin: 30px; /* 上下の余白調整 */
  text-align: center;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.topimg__btnbox{
  width: 100%;
  max-width: 400px;
  margin-top: 30px;
  margin-inline: auto;
  & a{
    width: 100%;
    display: block;
    background-color: var(--color-ye);
    border-radius: 100px;
    color: var(--color-rd);
    padding: 10px 30px 12px 30px;
    font-weight: bold;
    position: relative;
    font-size: 2rem;
    &::before{
      font-family: 'Font Awesome 6 Pro';
      content: '\f105';
      font-size: 2rem;
      line-height: 1em;
      color: var(--color-rd);
      font-weight: 900;
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    &:hover{
      opacity: 0.5;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .topimg__wrap{
    width: 100%;
    max-height: calc(100svh - 60px);
    aspect-ratio: 9 / 16;
    background: url(../images/partner-pr/top-bg_sp.svg) no-repeat;
    background-position: center;
    background-size: cover;
  }
  .topimg__imgbox01{
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 807;
  }
  .topimg__imgbox02{
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 677;
  }
  .topimg__wrap h3{
    font-size: 3rem;
     & span{
      padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    }
  }
  .topimg__wrap h4{
    font-size: 2rem;
    margin: 15px; /* 上下の余白調整 */
  }
  .topimg__btnbox{
    display: none;
  }
}
/* --------------------------------------------------------------------------------
  vision
-------------------------------------------------------------------------------- */
.vision__deco{
  width: 29%;
  aspect-ratio: 500 / 815;
  position: absolute;
  top: -3vw;
  right: 3vw;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.vision__catch{
  width: 100%;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bold;
  margin-top: 50px;
}
.vision__maintxt{
  width: 100%;
  text-align: center;
  margin-top: 50px;
  line-height: 1.8;
  & span{
    font-weight: bold;
    color: var(--color-rd);
  }
}
.vision__wrap{
  width: 100%;
  margin-top: 50px;
}
/* --- PCスタイル（デフォルト：835px以上） --- */
.row {
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 50px;
  &:nth-child(even) {
    flex-direction: row-reverse;
  }
  &:last-child {
    margin-bottom: 0;
  }
} 
.vision__image {
  width: 45%;
  & img{
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 20px;
  }
}
.vision__text {
  width: 50%;
  & h4{
    font-size: 2.6rem;
    font-weight: bold;
    color: #fff;
    padding: 6px 0;
    & span{
      background-color: var(--color-rd);
      padding: 5px 15px 7px;
    }
  }
  & p{
    margin-top: 20px;
    & span{
      font-weight: bold;
      color: var(--color-rd);
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .vision__deco{
    width: 55%;
    position: absolute;
    top: -10vw;
    right: 3vw;
  }
  .vision__catch{
    text-align: left;
    font-size: 2rem;
    margin-top: 15px;
  }
  .vision__maintxt{
    width: 100%;
    text-align: left;
    margin-top: 30px;
    line-height: 1.5;
    font-size: 1.4rem;
  }
  .vision__wrap{
    width: 100%;
    margin-top: 50px;
  }
  .row {
    flex-direction: column; /* 縦並びにする */
  }
  /* PCで反転させていたのをリセットし、常に「画像が上」にする */
  .row:nth-child(even) {
    flex-direction: column; 
  }
  .vision__image, .vision__text {
    width: 100%; /* 横幅いっぱい */
  }
  .vision__image {
    margin-bottom: 20px; /* 画像と下のテキストの間の余白 */
  }
  .vision__text {
    width: 100%;
    & h4{
      font-size: 1.8rem;
      padding: 4px 0;
      & span{
        padding: 3px 15px 5px;
      }
    }
    & p{
      margin-top: 20px;
      font-size: 1.4rem;
    }
  }
}

/* --------------------------------------------------------------------------------
  merit
-------------------------------------------------------------------------------- */
.merit01__bg{
  background: #DE0515;
  background: linear-gradient(90deg,rgba(222, 5, 21, 1) 0%, rgba(222, 5, 21, 1) 50%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
}
.marit01__container{
  width: 100%;
  background-color: #DE0515;
  border-top-right-radius: 40px;
}
.merit02__bg{
  background: #DE0515;
  background: linear-gradient(90deg,rgba(222, 5, 21, 1) 0%, rgba(222, 5, 21, 1) 50%, rgba(229, 55, 68, 1) 50%, rgba(229, 55, 68, 1) 100%);
}
.marit02__container{
  width: 100%;
  background-color: #E53744;
  border-top-left-radius: 40px;
}
.merit03__bg{
  background: #EA5C67;
  background: linear-gradient(90deg,rgba(234, 92, 103, 1) 0%, rgba(234, 92, 103, 1) 50%, rgba(229, 55, 68, 1) 50%, rgba(229, 55, 68, 1) 100%);
}
.marit03__container{
  width: 100%;
  background-color: #EA5C67;
  border-top-right-radius: 40px;
}
.merit__wrap{
  display: flex;
  flex-direction: row; /* 横並び */
  align-items: flex-start;
  justify-content: space-between;
}
.marit02__container .merit__wrap{
  flex-direction: row-reverse;
}
.merit__image{
  width: 50%;
  & img{
    width: 100%;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    border-radius: 20px;
  }
}
.merit__cntbox{
  width: 47%;
  & h2{
    font-size: 4.4rem;
    font-weight: 900;
    color: #fff;
    margin-top: 15px;
  }
  & p{
    margin-top: 30px;
    color: #fff;
    line-height: 1.8;
  }
}
.merit__num{
  font-size: 8.4rem;
  line-height: 1; /* 余計な隙間を消す */
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--color-ye);
}
.merit__detail{
  width: 100%;
  margin-top: 50px;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin-top: 30px;
  }
}
.merit__summary{
  width: 100%;
  margin-top: 80px;
  text-align: center;
  font-size: 3.6rem;
  font-weight: bold;
  color: var(--color-rd);
  line-height: 2;
  text-align: center;
   & span{
    background-color: #fff;
    padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    /* 改行しても1行ずつ背景を独立させる魔法 */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .marit01__container{
    border-top-right-radius: 20px;
  }
  .marit02__container{
    border-top-left-radius: 20px;
  }
  .marit03__container{
    border-top-right-radius: 20px;
  }
  .merit__wrap{
    flex-direction: column;
  }
  .marit02__container .merit__wrap{
    flex-direction: column;
  }
  .merit__image{
    width: 100%;
    & img{
      width: 100%;
      border-radius: 10px;
    }
  }
  .merit__cntbox{
    width: 100%;
    margin-top: 30px;
    & h2{
      font-size: 2.2rem;
      margin-top: 10px;
    }
    & p{
      margin-top: 15px;
      line-height: 1.5;
      font-size: 1.4rem;
    }
  }
  .merit__num{
    font-size: 4.5rem;
  }
  .merit__detail{
    width: 100%;
    margin-top: 50px;
    & img{
      border-radius: 10px;
      margin-top: 30px;
    }
  }
  .merit__summary{
    margin-top: 50px;
    font-size: 1.6rem;
     & span{
      padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    }
  }
}
/* --------------------------------------------------------------------------------
  pr
-------------------------------------------------------------------------------- */
.pr__wrap h3{
  width: 100%;
  text-align: center;
  font-size: 2.4rem;
  color: #fff;
  line-height: 2;
  text-align: center;
   & span{
    background-color: var(--color-rd);
    padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.pr__wrap h2{
  width: 100%;
  margin-top: 10px;
  text-align: center;
  font-size: 3.2rem;
  font-weight: bold;
  color: #fff;
  line-height: 2;
  text-align: center;
   & span{
    background-color: var(--color-rd);
    padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}
.pr__maintxt{
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.pr__imgbox{
  width: 100%;
  margin-top: 50px;
  position: relative;
}
.pr__deco{
  width: 25%;
  aspect-ratio: 1 / 1;
  position: absolute;
  top: -75px;
  right: -75px;
  z-index: 1;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
.pr__img{
  width: 100%;
  position: relative;
  z-index: 2;
  & img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  & p{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-size: 1.2rem;
    & span{
      background-color: #333;
      padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .pr__wrap h3{
    font-size: 1.6rem;
  }
  .pr__wrap h2{
    width: 100%;
    margin-top: 10px;
    font-size: 2.5rem;
  }
  .pr__imgbox{
    width: 90%;
    margin-top: 50px;
    position: relative;
    margin-inline: auto;
  }
  .pr__deco{
    width: 35%;
    top: -30px;
    right: -25px;
  }
  .pr__maintxt{
    text-align: left;
    font-size: 1.4rem;
  }
  .pr__img{
    width: 100%;
    position: relative;
    z-index: 2;
    & img{
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    & p{
      width: 100%;
      position: static;
      bottom: 0;
      right: 0;
      font-size: 1.2rem;
      text-indent: -1.5em;
      background-color: #333;
      padding: 0.2em 0.5em 0.2em 1.5em;
      & span{
        padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
        -webkit-box-decoration-break: slice;
        box-decoration-break: slice;
      }
    }
  }
}
/* --------------------------------------------------------------------------------
  contact
-------------------------------------------------------------------------------- */
.contact__wrap{
  width: 100%;
  text-align: center;
  & h2{
    font-size: 12rem;
    font-weight: bold;
    line-height: 1; /* 余計な隙間を消す */
    font-family: "Poppins", sans-serif;
    color: var(--color-rd);
  }
  & p{
    margin-top: 30px;
  }
  & ul{
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }
  & ul li{
    background-color: #fff;
    border-radius: 100px;
    padding: 3px 15px 5px 15px;
  }
}
.contact__btnbox{
  width: 100%;
  max-width: 400px;
  margin-top: 50px;
  margin-inline: auto;
  text-align: center;
  & a{
    width: 100%;
    display: block;
    background-color: var(--color-rd);
    border-radius: 100px;
    color: #fff;
    padding: 15px 30px 17px 30px;
    font-weight: bold;
    position: relative;
    font-size: 2.8rem;
    &::before{
      font-family: 'Font Awesome 6 Pro';
      content: '\f105';
      font-size: 3rem;
      line-height: 1em;
      color: #fff;
      font-weight: 900;
      position: absolute;
      top: 50%;
      right: 15px;
      transform: translateY(-50%);
    }
    &:hover{
      opacity: 0.5;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .contact__wrap{
    width: 100%;
    text-align: left;
    & h2{
      font-size: 4.2rem;
    }
    & p{
      margin-top: 20px;
      font-size: 1.4rem;
    }
    & ul{
      width: 100%;
      margin-top: 20px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 5px;
    }
    & ul li{
      font-size: 1.4rem;
      padding: 3px 10px 5px 10px;
    }
  }
  .contact__btnbox{
    width: 100%;
    margin-top: 30px;
    & a{
      padding: 10px 30px 12px 30px;
      font-size: 2rem;
      &::before{
        font-size: 2rem;
      }
    }
  }
}
/* --------------------------------------------------------------------------------
  voice
-------------------------------------------------------------------------------- */
.voice__title {
  display: flex;
  align-items: center;
  color: #fff;
  margin-top: 50px;
  font-size: 2.2rem;
  font-weight: bold;
  & span{
    background-color: #333;
    padding: 10px 20px 12px;
    border-radius: 100px;
  }
}
.voice__title::after {
  content: "";
  flex-grow: 1;
  height: 0;              /* 線自体の高さは0にする（borderで線を引くため） */
  border-top: 2px dotted #333;
}
.voice__wrap{
  width: 100%;
  margin-top: 30px;
  & ul {
    width: 100%;
    display: grid;
    /* 2カラムで、高さは中身（特に名前の部分）の最大値に合わせる */
    grid-template-columns: repeat(2, 1fr);
    /* ここが魔法の一行：名前の行と本文の行を定義 */
    grid-template-rows: auto 1fr; 
    gap: 30px;
  }
  & ul li {
    /* li自体もGridにする */
    display: grid;
    grid-template-rows: subgrid; /* サブグリッド（対応ブラウザ用） */
    grid-row: span 2;            /* 2行分（名前＋本文）を占有 */
    background-color: #fff;
    padding: 30px 50px;
    border-radius: 10px;
    row-gap: 0;
  }
  & .voice__name {
    grid-row: 1; /* 必ず1行目に配置 */
    font-size: 2rem;
    font-weight: bold;
  }
  & p {
    grid-row: 2; /* 必ず2行目に配置 */
    border-top: 1px solid #333;
    margin-top: 15px;
    padding-top: 15px;
    line-height: 1.8;
    & span{
      background-color: #333;
      padding: 0.1em 0.4em; /* 上下左右の余白（背景のサイズ感） */
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  }
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .voice__title {
    margin-top: 30px;
    font-size: 1.6rem;
    & span{
      padding: 10px 20px 12px;
    }
  }
  .voice__title::after {
    content: "";
    flex-grow: 1;
    height: 0;              /* 線自体の高さは0にする（borderで線を引くため） */
    border-top: 2px dotted #333;
  }
  .voice__wrap{
    width: 100%;
    margin-top: 30px;
    & ul {
      grid-template-columns: 1fr; /* 1カラムにする */
      grid-template-rows: auto;   /* 行の定義をリセット */
      gap: 20px; /* スマホ用に余白を少し狭める場合（お好みで調整） */
    }
    & ul li {
      display: block;           /* シンプルなブロック要素に戻す */
      grid-row: auto;           /* span 2 を解除 */
      grid-template-rows: auto; /* subgrid を解除 */
      padding: 20px;            /* スマホ用に内側の余白を狭める場合（お好みで調整） */
    }
    & .voice__name {
      font-size: 1.6rem;
    }
    & p {
      font-size: 1.4rem;
      line-height: 1.5;
    }
  }
}
/* --------------------------------------------------------------------------------
  system
-------------------------------------------------------------------------------- */
.system__imgbox{
  width: 100%;
  margin-top: 50px;
  & img{
    width: 100%;
  }
}
.system__txtbox{
  margin-top: 30px;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .system__imgbox{
    margin-top: 30px;
  }
  .system__txtbox{
    font-size: 1.4rem;
    margin-top: 15px;
  }
}
/* --------------------------------------------------------------------------------
  system
-------------------------------------------------------------------------------- */
.company__wrap {
  width: 100%;
  margin-top: 30px;
  line-height: 1.8;
  text-align: left;
}

.company__list {
  text-align: left;
  line-height: 2.2;
}

.company__item {
  display: inline-block;
  white-space: nowrap;
}

.company__trigger,
.company__more-btn {
  display: none; /* PCでは隠す */
}

.company__txt {
  width: 100%;
  margin-top: 10px;
}

/* --- スマホ・タブレット (834px以下) --- */
@media screen and (max-width: 834px) {
  .company__wrap {
    font-size: 1.4rem;
    margin-top: 30px;
  }
  /* リスト部分（アコーディオン本体） */
  .company__list {
    max-height: 300px; /* 閉じた時の高さ */
    overflow: hidden;
    position: relative;
    transition: max-height 0.8s ease; /* 時間を少し長くして自然に */
    line-height: 1.8;
  }

  /* ★グラデーションのぼかし */
  .company__list::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 90%);
    pointer-events: none;
    transition: opacity 0.3s;
  }

  /* --- 開いた時のスタイル --- */
  
  /* チェックが入ったら高さを十分に広げる */
  .company__trigger:checked + .company__list {
      /* ここを増やしました。3万pxあれば足りなくなることはないはずです */
      max-height: 30000px; 
  }

  /* 開いたらグラデーションを完全に消す */
  .company__trigger:checked + .company__list::after {
      opacity: 0;
      visibility: hidden; /* 念のため非表示にして干渉を防ぐ */
  }

  /* --- ボタンのスタイル --- */
  .company__more-btn {
      display: block;
      text-align: center;
      background: var(--color-rd);
      color: #fff;
      padding: 12px;
      margin-top: 20px;
      cursor: pointer;
      border-radius: 100px;
      font-size: 1.4rem;
      font-weight: bold;
      transition: background 0.3s;
  }

  .company__more-btn::before { content: "More ↓"; }
  .company__trigger:checked ~ .company__more-btn::before { content: "Close ↑"; }

  .company__txt {
    font-size: 1.4rem;
    margin-top: 20px;
  }
}
/* --------------------------------------------------------------------------------
  faq
-------------------------------------------------------------------------------- */
.faq__wrap{
  width: 100%;
  margin-top: 50px;
  & ul{
    width: 100%;
  }
  & ul li{
    width: 100%;
    background-color: #f4f4f4;
    margin-top: 10px;
    border-radius: 10px;
    &:first-child{
      margin-top: 0;
    }
  }
}
.displayNone {
  display: none;
}
.accordion a {
  display: block;
}
.switch {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20px 2%;
  transition: 0.5s;
}
.switch:after {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-family: 'Font Awesome 6 Pro';
	content: '\2b';
  font-size: 30px;
  font-weight: 400;
  transition: 0.5s;
}
.switch.open:after {
  font-family: 'Font Awesome 6 Pro';
	content: '\f068';
  font-weight: 400;
}
.contentWrap {
  width: 100%;
  padding: 0 2% 20px 2%;
}
.faq__mark{
  width: 1em;
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2em;
  color: var(--color-rd);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.faq__qtxt{
  width: calc(100% - 2em);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.2em;
  color: var(--color-rd);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.faq__cntbox{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.faq__mark02{
  width: 1em;
  font-family: "Poppins", sans-serif;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.2em;
}
.faq__atxt{
  width: calc(100% - 2em);
  font-size: 1.6rem;
  line-height: 1.5em;
  padding-top: 3px;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .faq__wrap{
    width: 100%;
    margin-top: 30px;
  }
  .switch {
    padding: 20px 5%;
  }
  .switch:after {
    position: absolute;
    right: 3%;
    font-size: 20px;
  }
  .contentWrap {
    width: 100%;
    padding: 0 5% 20px 5%;
  }
  .faq__mark{
    font-size: 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .faq__qtxt{
    width: calc(100% - 1.5em);
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3px 20px 0 0;
  }
  .faq__cntbox{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .faq__mark02{
    font-size: 2rem;
  }
  .faq__atxt{
    width: calc(100% - 1.5em);
    font-size: 1.6rem;
    line-height: 1.5em;
    padding-top: 1px;
  }
}
/* --------------------------------------------------------------------------------
  sdgs
-------------------------------------------------------------------------------- */
.sdgs__wrap{
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}
/* --------------------------------------------------------------------------------
  slidecontact
-------------------------------------------------------------------------------- */
/* 外枠（div）の設定：位置とスライドの動きを制御 */
.slide-contact-wrapper {
  display: block;
  position: fixed;
  top: 20%; /* 真ん中より少し上 */
  right: -70px; /* 最初は画面の右外に隠しておく */
  z-index: 9999; /* 他の要素より一番上に表示 */
  transition: right 0.4s ease-out; /* 0.4秒かけてスッと動く */
}

/* JavaScriptでこのクラスが付与されたら画面内に出てくる */
.slide-contact-wrapper.show-contact-btn {
  right: 0; 
}

/* ボタン（aタグ）の設定：見た目と縦書きを制御 */
.slide-contact-btn {
  display: block;
  padding: 20px 10px;
  background-color: var(--color-rd); /* ボタンの背景色 */
  color: #ffffff; /* 文字色 */
  text-decoration: none;
  font-weight: bold;
  border-radius: 10px 0 0 10px; /* 左側の角だけ丸くする */
  box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2); /* 少し影をつける */
  
  /* 縦書きの設定 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.3em; /* 文字の隙間を少し広げる */
}

/* マウスを乗せた時に少し色を暗くする（お好みで） */
.slide-contact-btn:hover {
  opacity: 0.5;
}
@media screen and (min-width: 0px) and (max-width: 834px) {
  .slide-contact-wrapper {
    display: none;
  }
}