/* =================FV==================== */
.page-main {
  width: 100%;
  min-height:100vh;
  position: relative;
}

.page-main img {
   width:100%;
   min-height:100vh;
   object-fit:cover;
   position: relative;
   z-index: 1;
}

.page-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%; /* 上から50%の位置 */
  left: 50%; /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 中央寄せの調整 */
  color: #633418;; /* 文字色 */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  z-index: 2;
}

.page-title .page-en {
 font-size:56px;
 line-height:1.1;
}

.page-title .page-jp {
  font-size:20px;
}


/* ==============プランメニュー============== */
.plan-menus {
   position:relative;
  text-align:center;
  padding:50px 40px;
}

.decoration {
   position:absolute;
   inset:0;
   pointer-events:none;
   z-index: 0;
}

.left {
 position:absolute;
 top: -200px;
 left:-70px;

 width:400px;
 height:400px;

 background-image:url("../images/decoration/21.png");
 background-repeat:no-repeat;
 background-size:contain;
 background-position:center;
 z-index: 0;
}

.right{
 position:absolute;

 right:-50px;
 top:40px;

 width:300px;
 height:300px;

 background-image:url("../images/decoration/23-2.png");
 background-repeat:no-repeat;
 background-size:contain;
 background-position:center;

 z-index: 0;
}

.plan-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 20px;
  z-index: 1;
}

.plan-menu a {
  padding: 20px 80px;
  border: #633418 1px solid;
  color: #fff;
  background-color: #633418;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 70px;
}


.plan-menu a:hover {
  background: #D6956F;
  border: 1px solid #D6956F;
}




/* ==============プラン================ */
#photoplan-1,
#photoplan-2, 
#photoplan-3 {
  position: relative;
  margin-bottom: 80px;
} 

#photoplan-1 .plan-decoration1,
#photoplan-2 .plan-decoration1, 
#photoplan-3 .plan-decoration1 {
  width: 300px;
  height: 300px;
  background-color: #F7F3E9;
  border-radius: 50%;
  position: absolute;
  bottom: 300px;
  right: -30px;
  z-index: 0;
}

#photoplan-1 .plan-decoration2,
#photoplan-2 .plan-decoration2, 
#photoplan-3 .plan-decoration2 {
  width: 200px;
  height: 200px;
  background-color: #F7F3E9;
  border-radius: 50%;
  position: absolute;
  bottom: -100px;
  left: 80px;
  z-index: 0;
}


#photoplan-1 .container,
#photoplan-2 .container, 
#photoplan-3 .container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  z-index: 1;
}


#photoplan-1 h3,
#photoplan-2 h3,
#photoplan-3 h3 {
  color: #633418;
  font-size: 28px;
}

.plan-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;

  position: relative;
  z-index: 1;
}

.plan-left {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#photoplan-1 .plan-photo,
#photoplan-2 .plan-photo, 
#photoplan-3 .plan-photo {
  max-width: 600px;
  width: 100%;
  height: auto; /* 高さ自動 */
  aspect-ratio: 4 / 3; /* 縦横比を16:9に固定 */
  object-fit: cover; /* 画像が歪まないように全体をカバー */
  z-index: 1;
}

.price  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.price-tag {
  font-size: 32px;
  color: #633418;
}

.tax-included {
  font-size: 14px;
  color: #633418;
}

.plan-decoration3 {
  position: relative;
  max-width: 400px;
  width: 100%;
  max-height: 400px;
  height: 100%;
}

.plan-decoration3 img {
  position: absolute;
  top: -250px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.3;
  
  max-width: 500px;
  width: 100%;
  z-index: 0;
}

/* =============プランオプション============ */


.plan-option {
  position: relative;
  z-index: 1;
}

.plan-option p {
  font-size: 20px;
  text-align: center;
  color: #633418;
}


.plan-option table {
  width: 100%;
  border-collapse: separate; /* セル間隔を有効に */
  border-spacing: 20px;       /* セル間の隙間 */
}

.plan-option td {
  border: solid 1px #D6956F;
  background-color: #D6956F;
  border-spacing: 20px;
  text-align: center;
  padding: 10px 10px;
  color: #fff;
}

.small-text {
  font-size: 12px;
  margin-top: 4px;
}

.time p {
  font-size: 16px;
  color: #633418;
  border: solid 1px #633418;
  border-radius: 10px;
  padding: 10px 20px;
}


/* ================追加オプション================= */


.add-option {
  margin-bottom: 80px;
}

.add-option1,
.add-option2,
.add-option3 {
  margin-bottom: 80px;
  position: relative;
}



.add-option3 .plan-decoration1 {
  width: 300px;
  height: 300px;
  background-color: #F7F3E9;
  border-radius: 50%;
  position: absolute;
  bottom: 300px;
  right: -30px;
  z-index: 0;
}


.add-option2 .plan-decoration2 {
  width: 200px;
  height: 200px;
  background-color: #F7F3E9;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 50px;
  z-index: 0;
}


.add-option3 .plan-decoration2 {
  width: 200px;
  height: 200px;
  background-color: #F7F3E9;
  border-radius: 50%;
  position: absolute;
  bottom: -100px;
  left: 80px;
  z-index: 0;
}

.add-option h4 {
  text-align: center;
  position: relative;
  color: #442817;
  font-size: 24px;
  z-index: 1;
}

.add-costume,
.add-photo,
.add-beauty {
  width: 100%;
  max-width: 600px;

  border: 1px solid #6b3518;
  margin: 0 auto;
  background-color: #f8f5ef;
  border-collapse: collapse;

  position: relative;
  z-index: 1;
}


.add-costume tr:not(:last-child),
.add-photo tr:not(:last-child),
.add-beauty tr:not(:last-child) {
  border-bottom: 1px solid #6b3518;
}

.add-costume td,
.add-photo td,
.add-beauty td {
  padding: 20px 30px;
  font-size: 16px;
  color: #6b3518;
  vertical-align: middle;
}

.label {
  width: 50%;
}

.colon {
  width: 30px;
  text-align: center;
}

.price {
  text-align: left;
}

.supplement {
  font-size: 12px;
}


/* ===============================================================================
　　　　　　　　　　　　　　　　　　　　　　　　　スマホ用のスタイル 
====================================================================================*/

/* 画面幅が767px以下のとき */
@media screen and (max-width: 767px) {

  /* ===========メインビジュアル========= */
  .page-main,
  .page-main img {
    max-width: 100%;
    min-height: auto;
  }

  .page-title .page-en {
    font-size: 42px;
  }

  .page-title .page-jp {
    font-size: 18px;
  }


  /* ==========プラン表========== */
    .left {
  position:absolute;
  top: -100px;
  left:-70px;

  width:300px;
  height:300px;

  background-image:url("../images/decoration/21.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  z-index: 0;
  }

  .right{
  position:absolute;

  right:-50px;
  top:40px;

  width:200px;
  height:200px;

  background-image:url("../images/decoration/23-2.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  z-index: 0;
  }



.plan-menu a {
  padding: 10px 20px;
  border: #633418 1px solid;
  color: #fff;
  background-color: #633418;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 70px;
}


  /* ==============プラン========== */
  .plan-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  }


  #photoplan-1 .plan-decoration1,
  #photoplan-2 .plan-decoration1, 
  #photoplan-3 .plan-decoration1 {
  width: 200px;
  height: 200px;
}

  #photoplan-1 .plan-decoration2,
  #photoplan-2 .plan-decoration2, 
  #photoplan-3 .plan-decoration2 {
    width: 100px;
    height: 100px;
  }

  #photoplan-1 h3,
  #photoplan-2 h3,
  #photoplan-3 h3 {
  font-size: 22px;
  }


  #photoplan-1 .plan-photo,
  #photoplan-2 .plan-photo, 
  #photoplan-3 .plan-photo {
    max-width: 400px;
    width: 100%;
    height: auto; /* 高さ自動 */
  }

  .price-tag {
  font-size: 28px;
  color: #633418;
  }

  .tax-included {
    font-size:  12px;
    color: #633418;
  }
  

  /* =============プランオプション============ */

  .plan-option {
    position: relative;
    z-index: 1;
  }

  .plan-option p {
    font-size: 16px;
  }


  .plan-option table {
    width: 100%;
    border-collapse: separate; /* セル間隔を有効に */
    border-spacing: 15px;       /* セル間の隙間 */
  }

  .plan-option td {
    border-spacing: 20px;
    text-align: center;
    padding: 10px 30px;
    color: #fff;
    font-size: 16px;
  }

  .small-text {
    font-size: 10px;
    margin-top: 4px;
  }

  .time p {
    font-size: 14px;
    color: #633418;
    border: solid 1px #633418;
    border-radius: 10px;
    padding: 10px 10px;
  }

  /* ================追加オプション================= */

  .add-option3 .plan-decoration1 {
  width: 200px;
  height: 200px;
 }


  .add-option2 .plan-decoration2 {
    width: 100px;
    height: 100px;
  }


  .add-option3 .plan-decoration2 {
    width: 100px;
    height: 100px;
  }

  .add-option1,
  .add-option2,
  .add-option3 {
    margin-bottom: 60px;
  }

  .add-option h4 {
    text-align: center;
    position: relative;
    color: #442817;
    font-size: 16px;
    z-index: 1;
  }

  .add-costume,
  .add-photo,
  .add-beauty {
    width: 100%;
    max-width: 450px;

    border: 1px solid #6b3518;
    margin: 0 auto;
    background-color: #f8f5ef;
    border-collapse: collapse;

    position: relative;
    z-index: 1;
  }


  .add-costume tr:not(:last-child),
  .add-photo tr:not(:last-child),
  .add-beauty tr:not(:last-child) {
    border-bottom: 1px solid #6b3518;
  }

  .add-costume td,
  .add-photo td,
  .add-beauty td {
    padding: 20px 30px;
    font-size: 14px;
    color: #6b3518;
    vertical-align: middle;
  }

  .label {
    width: 50%;
  }

  .colon {
    width: 30px;
    text-align: center;
  }

  .price {
    text-align: left;
  }

  .supplement {
    font-size: 10px;
  }

}
/* ===================================================-
　　　　　　　　　　　　　　　　　　　スマホ
===================================================== */

@media screen and (max-width: 440px) {
    .page-title .page-en {
    font-size: 32px;
  }

  .page-title .page-jp {
    font-size: 14px;
  }

   .left {
  position:absolute;
  top: -50px;
  left:-70px;

  width:200px;
  height:200px;

  background-image:url("../images/decoration/21.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  z-index: 0;
  }

  .right{
  position:absolute;

  right:-30px;
  top:100px;

  width: 100px;
  height: 100px;

  background-image:url("../images/decoration/23-2.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;

  z-index: 0;
  }

  .plan-menu {
    display: flex;
    flex-wrap: wrap;
  }

  .plan-menu a {
  padding: 10px 20px;
  border: #633418 1px solid;
  color: #fff;
  background-color: #633418;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.05em;
  border-radius: 30px;
  text-decoration: none;
  white-space: nowrap;
  min-width: 70px;
}
  
/* ==============プラン========== */
  .plan-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  }


  #photoplan-1 h3,
  #photoplan-2 h3,
  #photoplan-3 h3 {
  font-size: 20px;
  }


  #photoplan-1 .plan-photo,
  #photoplan-2 .plan-photo, 
  #photoplan-3 .plan-photo {
    max-width: 400px;
    width: 100%;
    height: auto; /* 高さ自動 */
  }

  .price-tag {
  font-size: 24px;
  color: #633418;
  }

  .tax-included {
    font-size:  10px;
    color: #633418;
  }
  

  /* =============プランオプション============ */

  .plan-option {
    position: relative;
    z-index: 1;
  }

  .plan-option p {
    font-size: 14px;
  }


  .plan-option table {
    width: 100%;
    border-collapse: separate; /* セル間隔を有効に */
    border-spacing: 15px;       /* セル間の隙間 */
  }

  .plan-option td {
    border-spacing: 20px;
    text-align: center;
    padding: 10px 30px;
    color: #fff;
    font-size: 12px;
  }

  .small-text {
    font-size: 10px;
    margin-top: 4px;
  }

  .time p {
    font-size: 12px;
    color: #633418;
    border: solid 1px #633418;
    border-radius: 10px;
    padding: 10px 10px;
  }



  .add-option h4 {
    text-align: center;
    position: relative;
    color: #442817;
    font-size: 14px;
    z-index: 1;
  }

  .add-costume,
  .add-photo,
  .add-beauty {
    width: 100%;
    max-width: 400px;

    border: 1px solid #6b3518;
    margin: 0 auto;
    background-color: #f8f5ef;
    border-collapse: collapse;

    position: relative;
    z-index: 1;
  }


  .add-costume tr:not(:last-child),
  .add-photo tr:not(:last-child),
  .add-beauty tr:not(:last-child) {
    border-bottom: 1px solid #6b3518;
  }

  .add-costume td,
  .add-photo td,
  .add-beauty td {
    padding: 20px 20px;
    font-size: 12px;
    color: #6b3518;
    vertical-align: middle;
  }

}