@charset "UTF-8";
/* -------------------------- */
/* 全体 */
/* -------------------------- */
/* 下マージン */
.marginbottom {
  padding-bottom: 70px;
}


/* -------------------------- */
/* 7つのステップ */
/* -------------------------- */

/* 背景グリーン部分*/



/* 見出し部分　7つのステップ */
.step7 {

  /* color: #FFFFFF; */
   margin-top: 120px;
  margin-bottom: 40px;
  text-align: center;
  font-size: 40px;
    }


/* ---------------- */
.bg-green {
  background-color: #A8C3A0;
  padding: 40px;

    /* margin-top: 120px; */
}



.box {
    background-color: #fff;
    margin-top: 40px;
    margin: 0 auto;

  padding: 30px;
  width: 640px;
  height: 580px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1)

 
}





/* -------------------------- */
/* 1日の過ごし方 */
/* -------------------------- */
/* ※1日・3日の短期コースは、無理のない～部分 */
.text1{
  margin-top: 30px;
  margin-bottom: 30px;
  text-align: center;
}


/* dl　スケジュール部分（レスポンシブル対応）------------------------------------------------------------------------------ */
/* ====== 共通スタイル ====== */
dl {
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

dt, dd {
  padding: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}


dt {
  width:100px;
  text-align: center;
}

/* dd スケジュール内容 */
dd {
  background-color: #f9f9f9;
  width: 800px;
}


.bg-pink{
  background-color: #FEF6FF;
}

.bg-mizuiro{
  background-color: #F6FFFE;
}

span { 
  color: #DC9664;
  font-weight: bold;
  font-size: 20px;
}


/* 1日の流れ　h2の体裁 */
.heading2{

  
  margin-top: 50px;
  margin-right: 82px;
  position: relative; 
  left: 82px;                         /* ← これが重要 */
  width: 820px;                              /* 見出しの幅 */
  line-height: 82px; /* ← 高さと同じ値にする！ */
  color: #3B553D;
  background-image: url("../images/sub5_Q&A/heading_faq_02.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin-bottom: 20px;
  /* display: flex;   */
  text-align: center;/* テキストを縦中央に揃える */
  padding-bottom: 10px;
  font-size: 32px;
}

/* .heading2の前に画像をつける */
.heading2::before {
  content: "";
  position: absolute;
  top: 0;
  left: -82px;                                 /* ← 左端に配置 */
  width: 82px;          /* 画像サイズ調整 */
  height: 82px;
  background-image: url("../images/sub5_Q&A/heading_faq_01.png"); /* ← ここに画像URL */
  background-size: contain;          /* 画像が枠に収まるように */
  background-repeat: no-repeat;
}

/* ← 右端の画像を配置する */
.heading2::after {
  content: "";
  position: absolute;
  top: 0;
  right: -78px;                                 /* ← 右端に配置 */
  width: 78px;
  height: 83px;
  background-image: url("../images/sub5_Q&A/heading_faq_03.png");
  background-size: contain;
  background-repeat: no-repeat;
}




/* 1日の過ごし方 背景画像 */
dd.photo1 {
  background-image: url("../images/sub3_schedule/juice_100X100.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain; /* contain要素の中に収まるように画像を縮小/拡大 画像が全部見えるが余白ができることも  */
}

dd.photo2 {
  background-image: url("../images/sub3_schedule/yoga_100X100.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: contain;
}

dd.photo3 {
  background-image: url("../images/sub3_schedule/onsen_120X120.png");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 100px 100px; 
}



/* ====== PC表示（横並び） ====== */
@media screen and (min-width: 768px) {
  dl {display: table;}

  dt, dd {
    display: table-cell;      /* 横並びに */
    vertical-align: middle;   /* 中央揃え（縦方向） */
  }

  dt {
    width: 100px;             /* 左側（時間など）の幅 */
    font-weight: bold;
    /* background-color: #f0f0f0; */
  }

  dd {
    width: 830px;
    padding-left: 15px;
    /* background-color: #f9f9f9; */
  }

    
}/* ====== PC表示（横並び） 終了====== */


/* ====== スマホ表示（縦積み） ====== */
@media screen and (max-width: 500px) {
  dl, dt, dd {
    display: block;          /* 縦積み */
    width: 100%;}

  dt {
    font-weight: bold;
    background-color: #f0f0f0;}

  dd {
    background-color: #f9f9f9;
    margin-bottom: 16px;     /* 各項目の間に余白 */}
}









/* ====== スマホ表示（縦積み）終了 ====== */
/* dl部分のレスポンシブル対応 終了------------------------------------------------------------------------------ */