@charset "UTF-8";
/*見た目の変更CSS*/
.p-plan-inner {
  margin: 0;
  padding: 5.125rem 0 10.125rem 0;
  background: #d0cecf;
  position: relative;
}

/*凸凹用のCSS*/
.plan__items_wrap {
  display: block;
  width: 550px;
  max-width: 550px;
  width: 43vw;
}

.p-plan__item {
  display: block;
  position: relative;
  z-index: 2;
}

.p-plan__item + .p-plan__item {
  margin-top: 0.6rem;
  width: 43vw;
}

.p-plan__item:nth-child(1) {
  width: 63vw;
}

.p-plan__item:nth-child(2n) {
  width: 53vw;
}

.p-plan__item:nth-child(5n) {
  width: 63vw;
}

/*アコーディオン全体*/
.accordion-area {
  list-style: none;
  width: 96%;
  max-width: 900px;
  margin: 0 auto;
}

.accordion-area li {
  margin: 10px 0;
}

.accordion-area section {
  border: 1px solid #ccc;
}

/*アコーディオンタイトル*/
.title {
  position: relative; /*マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size: 1rem;
  font-weight: normal;
  padding: 3% 3% 3% 50px;
  transition: all 0.5s ease;
  background-color: #fff;
  border-radius: 0 10rem 10rem 0;
  font-size: 1.4rem;
}

/*▲アイコン表示*/
h3.title:after {
  -webkit-transform: translateX(-50%);
  position: absolute;
  top: 36%;
  right: 2vw;
  width: 18px;
  height: 18px;
  transform: translate(-50%);
  background: url(https://demo4.okimono.life/wp-content/uploads/2024/03/sankaku-brown.png)
    no-repeat center center / contain;
  content: "";
}
@media screen and (min-width: 760px) h3.title:after {
  top: 36%;
  width: 25px;
  height: 25px;
}

/*アコーディオンで現れるエリア*/
.box {
  display: none; /*はじめは非表示*/
  background: #f3f3f3;
  margin: 0 3% 3% 3%;
  padding: 3%;
}

//スクロールをしたら左から出てくるアニメーション
$(".fadeInLeftTriggerOnce").on("inview", function (event, isInView) {
  if (isInView) {
    //表示領域に入った時
    $(this).addClass("animate__animated animate__fadeInLeft"); //クラス名が付与
  }
});

//アコーディオンをクリックした時の動作
$(".title").on("click", function () {
  //タイトル要素をクリックしたら
  $(".box").slideUp(500); //クラス名.boxがついたすべてのアコーディオンを閉じる

  var findElm = $(this).next(".box"); //タイトル直後のアコーディオンを行うエリアを取得

  if ($(this).hasClass("close")) {
    //タイトル要素にクラス名closeがあれば
    $(this).removeClass("close"); //クラス名を除去
  } else {
    //それ以外は
    $(".close").removeClass("close"); //クラス名closeを全て除去した後
    $(this).addClass("close"); //クリックしたタイトルにクラス名closeを付与し
    $(findElm).slideDown(500); //アコーディオンを開く
  }
});

//ページが読み込まれた際にopenクラスをつけ、openがついていたら開く動作※不必要なら下記全て削除
$(window).on("load", function () {
  $(".accordion-area li:first-of-type section").addClass("open"); //accordion-areaのはじめのliにあるsectionにopenクラスを追加
  $(".open").each(function (index, element) {
    //openクラスを取得
    var Title = $(element).children(".title"); //openクラスの子要素のtitleクラスを取得
    $(Title).addClass("close"); ///タイトルにクラス名closeを付与し
    var Box = $(element).children(".box"); //openクラスの子要素boxクラスを取得
    $(Box).slideDown(500); //アコーディオンを開く
  });
});