@charset "UTF-8";

body {
  margin: 0;
  padding-top: 0;
}

main {
  text-align: center;
}

h2 {
  color: #B78D4A;
  padding-top: 100px;
}

/* スライド */
.item1 {
  opacity: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  animation: anime 25s infinite;
}

/* ←ここは外に出す！！！！ */
.item1:nth-of-type(2) {
  animation-delay: 5s;
}

.item1:nth-of-type(3) {
  animation-delay: 10s;
}

.item1:nth-of-type(4) {
  animation-delay: 15s;
}

.item1:nth-of-type(5) {
  animation-delay: 20s;
}
@keyframes anime {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

.slideBox {
  height: 100vh;       /* ←画面いっぱい */
  position: relative;  /* ←これ重要 */
  overflow: hidden;
  margin-top: 60px;
}



/* タブ */
#tabcontrol a {
  display: inline-block;
  padding: 0.75em 10em;
  text-decoration: none;
  color: black;
}

#tabbody div {
  padding: 1em;
}

/* ▼お宮参り */
.omiya-price-section {
  padding: 80px 20px;
}

.omiya-price-box {
  display: flex;
  gap: 50px;
  max-width: 1100px;
  margin: auto;
  flex-wrap: wrap;
}




/コース一覧/
/* デフォルトの矢印を削除する */
summary {
	display: block;
}

summary::-webkit-details-marker {
	display: none;
}

/* アコーディオンのタイトル 共通設定 */
.details-summary {
	position: relative;
	padding-left: 50px;
	font-size: 20px;
	cursor: pointer;
}

/* 1つ目のアコーディオンのタイトル CSSのみでカスタマイズ */
.icon-arrow:before {
  position: absolute;
  content: '';
  width: 50px;
  height: 18px;
  background: #00a5a0;
  border-radius: 50%;
  top: 50%;
  left: 0;
  margin-top: -7px;
}

.icon-arrow:after {
  position: absolute;
  content: '';
  width: 4px;
  height: 4px;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  top: 50%;
  left: 5px;
  transform: rotate(45deg);
  margin-top: -1px;
}

/* 1つ目のアコーディオンのタイトル オープン時 */
.details[open] .icon-arrow:after {
  transform: rotate(135deg);
  left: 7px;
}


/* ▼タブの配色 */
#tabcontrol a:nth-child(1), #tabbody div:nth-child(1) { background-color: #f8f7f2; }/* 1つ目のタブとその中身用の配色 */
#tabcontrol a:nth-child(2), #tabbody div:nth-child(2) { background-color: #ece5dd; }/* 2つ目のタブとその中身用の配色 */

/* ▼タブ */
#tabcontrol a {
   display: inline-block;            /* インラインブロック化 */
   border-width: 1px 1px 0px 1px;    /* 下以外の枠線を引く */
   border-style: solid;              /* 枠線の種類：実線 */
   border-color: #ece5dd;              /* 枠線の色：黒色 */
   border-radius: 0.35em 0.35em 0 0; /* 枠線の左上角と右上角だけを丸く */
   padding: 0.75em 10em;              /* 内側の余白 */
   text-decoration: none;            /* リンクの下線を消す */
   color: black;                     /* 文字色：黒色 */
   background-color: white;          /* 背景色：白色 */
   position: relative;               /* JavaScriptでz-indexを調整するために必要 */
}


/* ▼タブの中身 */
#tabbody div {
   margin-top: -17px;        /* 上側にあるタブと1pxだけ重ねるために「-1px」を指定 */
   padding: 1em;            /* 内側の余白量 */
   background-color: white; /* 背景色：白色 */
}






/* ===============================
   スタジオ案内 修正
=============================== */
.studio-box {
  text-align: center;
  padding: 60px 20px;
}

.studio-title {
  height: 120px;   /* ←好きなサイズ */
}

.studio-img {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 20px;
  display: block;
}

/* TELバー */
.tel-btn {
  display: block;
  padding: 20px 0;
  margin: 30px 0;
}

.tel-btn img {
  width: 600px;
  max-width: 80%;
}

/* テキスト */
.studio-info {
  font-size: 25px;        /* ←25だとちょい大きいので少し調整おすすめ */
  font-weight: 500;
  margin-bottom: 6px;
  color: #5d5550;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 1px;
}

.studio-box p {
  margin: 5px 0;
  color: #5d5550;
}

/* SNS */
.sns {
  margin-top: 20px;
}

.sns img {
  width: 40px;
  margin: 0 6px;
}

/* LINEボタン */
.line-btn img {
  width: 200px;
  margin-top: 20px;
}

.line-btn img {
  width: 500px;   /* ←今より大きく */
}








/* 第一弾（5・6月）を赤ピンク主役に */
.col.first {
  border: 3px solid #eaa9aa;
  background: linear-gradient(180deg, #fff7f9 0%, #fff0f3 100%);
  transform: scale(1.02);
  z-index: 2;
  font-weight: normal;
  color: #5d5550;
}

/* バッジも赤ピンク */
.col.first .badge {
  color: #e96e7c;
  font-weight: bold;
}



/* 他は少し弱くする（重要） */
.col:not(.first) {
  opacity: 0.75;
}

/* 横並びの核 */
.row {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  border-bottom: 1px solid #ccc;
}

/* 各マス */
.plan {
  text-align: left;
  padding-left: 12px;
  font-weight: bold;
  white-space: nowrap;
}


/* ===============================
   幅調整（ここ追加）
=============================== */
.campaign {
  max-width: 1000px;   /* ←ここで調整 */
  margin: 0 auto;
  padding: 60px 30px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #d8cbb0;  /* ←枠の色 */
  border-radius: 12px;        /* ←角丸（可愛さ） */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* ←うっすら影 */
}

/* 上書き（こっちを優先させる） */
.price-table {
  width: 100%;
  max-width: 1000px;  /* ←campaignに合わせる */
  margin: 0 auto;
}

/* 余白と文字サイズ調整 */
.row > div {
  padding: 18px 14px;
  font-size: 20px;
}

.title {
  margin-bottom: 28px;
}

.lead {
  margin-bottom: 16px;
}


/* おでかけ（ピンク） */
.plan-out {
  color: #e8a79a;
}

/* 貸衣装（グリーン） */
.plan-rental {
  color:  #9fb89c;
}

/* 持ち込み（ベージュ） */
.plan-bring {
  color: #ceb786;
}

/* スタジオ（ブルー） */
.plan-studio {
  color:  #839fb8;
}

.plan {
  padding: 10px 12px;
  border-radius: 6px;
  font-weight: bold;
  border-left: 6px solid currentColor;
}

/* バッジ */
.focus-price::after {
  content: "今おすすめ";
  position: absolute;
  top: -12px;
  right: -10px;
  background: #e96e7c;
  color: #fff;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 20px;  /* ←丸くしてバッジ感UP */
  animation: badgeScale 1.5s infinite;
  font-weight: bold;
}

@keyframes badgeScale {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 15700円だけ赤にする */
.focus-price {
  color: #e63946 !important;
  font-weight: bold;
  font-size: 24px !important;
}

/* キャンペーン価格表タイトル */
.campaign .title {
  padding-top: 0;
  font-size: 32px;
  margin-top: -10px;
  text-align: center;
  line-height: 1.3;
  letter-spacing: 1px;
  font-weight: 600;
}

/* 上の小さい文字 */
.title .small {
  font-size: 20px;
  opacity: 0.6;
  margin-bottom: 2px;
  display: inline-block;
}

/* 下のライン */
.campaign .title::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 400px;
  height: 3px;
  background:#ceb786;
  margin: 8px auto 0;
  border-radius: 2px;
}





.plan-img{
  width:20%;
  margin:0 1%;
}

.main-title{
  color:#fffdff;
  font-size: 1px !important;
}