/*common*/

/* リセット */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html {
        overflow-x: hidden;
    }

    body, html {
        margin: 0;
        font-family: "Noto Serif JP", serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
        font-size: 11px;
        letter-spacing: 1px;
        color:252525;
        overflow-x: clip;
		background:url(../imgs/bg_wedding_system.jpg) no-repeat center top;
		background-attachment: fixed;
		background-size: cover;
    }
/*common*/
a{
    color:#252525;
    text-decoration: none;
}
a:hover{
    color:#f73500;
}
h1{
	font-size:3em;
    font-weight: 100;
    margin-bottom:2em;
	padding-top:3em;
	font-family:serif;
	text-align:center;
	line-height:1.6;
}
h1 span{
	display:block;
	font-size:22px;
}
.container h1{
	font-size:2.5em;
    font-weight: 100;
    margin-bottom:1.5em;
	padding-top:1.5em;
	font-family:serif;
	text-align:center;
	line-height:1.6;
}

p{
    font-size:clamp(1.5rem,2.5vw,1.6rem);
    line-height: 1.8;
    word-break: break-all;
    text-align: justify;
}

.container{
    width:96%;
    max-width:1000px;
    margin:0 auto;
    position: relative;
	padding:0 1em 4em 1em;
}

.flex-area{
    display: flex;
    flex-wrap: wrap;
}
.flex-between{
    justify-content: space-between;
}
.flex-center{
    justify-content: center;
}
.flex-left{
    justify-content: flex-start;
}
.flex-right{
    justify-content: flex-end;
}
.flex-around{
    justify-content: space-around;
}
.flex-middle{
    align-items: center;
}
.flex-nowrap{
    flex-wrap: nowrap;
}

.sp-only{display: none;}
.pc-only{display: block;}
.hihyouji{display: none;}

@media (max-width: 768px) {
	
    .flex-area{
    flex-direction: column;
}
    
    .sp-only{display: block;}
    .pc-only{display: none;}
}

/* Global nav */
.global-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}
.global-nav a {
  text-decoration: none;
  color: #f73500;
  font-size: 1.6rem;
}
/*=======drawer=======*/
/* Drawer toggle (2本線) */
.drawer-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 30;
}
.drawer-toggle span {
  display: block;
  height: 2px;
  background: white;
  transition: 0.3s;
    width:30px;
}

/* Drawer open状態（×に切り替え） */
.drawer-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.drawer-toggle.active span:nth-child(2) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* Drawer全画面メニュー */
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
    background-image: url(../img/bg_drawer.jpg);
    background-size: cover;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;

  /* アニメーション用 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.drawer.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.drawer-box{
   display: flex;
    max-width:750px;
    margin:0 auto;
    width:100%;
}
.title-box{
    order:2
}
.title-box h2 {

  writing-mode: vertical-rl;
  font-size: 3.6rem;
  margin:8rem;
    color: #252525;
    letter-spacing: 0.5em;
}

.nav-box{
    order:1;
    max-width:750px;
    margin:0 auto;
    width:50%;
}
.drawer nav {
  writing-mode: vertical-rl;
  font-size: 1.8rem;
  margin:clamp(1em, 2.5vw, 2em);
}
.drawer nav li{
    list-style: none;
}
.drawer nav a {
  color: #252525;
  text-decoration: none;
  margin: 1em 0;
}
/* Closeボタン */
#closeBtn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 4rem;
  color: #252525;
  cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {
  .global-nav {
    display: none;
  }
  .drawer-toggle {
    display: flex;
  }
    .drawer {
    background-image: url(../img/bg_drawer.jpg);
    background-size: cover;
    background-position: center 0%;
    align-items: center;
    justify-content: center;
  align-items: center;
}
    .drawer-box{
        display: flex;
        flex-direction: column;
        width:100vw
    }
    .title-box{ 
    order:1
    }
    .title-box h2 {
  font-size: 2.4rem;
    letter-spacing: 0.2em;
        width:35px;
        margin:0 auto;
}
    .nav-box{
    order:2
    }
    .drawer nav {
  writing-mode: vertical-rl;
  font-size: 1.6rem;
    width:inherit;
    }
}
@media (max-width: 520px) {
    .nav-box{
        width:100%;
    max-width: inherit;
    }
    .drawer nav {
  font-size: 1.3rem;
    width:auto;
    margin:0 auto;
    }
}

/*========footer========*/
footer{
    width:100%;
    background-color: #821c00;
    margin:4rem 0 0 0;
    padding:4rem 0;
    color:#fff;
    font-size:1.4rem;
    text-align: center;
}
footer .container h1{
    font-size:2rem;
    color:#fff;
    font-weight:lighter;
    margin-bottom:1em;
}
address{
    font-style: normal;
}
/* Responsive */
@media (max-width: 768px) {
    footer{
    margin:0rem 0 0 0;
}
}

/*申し込みフォーム*/
/* =========================
   フォーム全体
========================= */

.wpcf7 form {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
	padding:30px 50px;
	background:rgba(255,255,255,0.75);
	border-radius:15px;
}

.wpcf7 p {
  margin-bottom: 1.2em;
}

/* =========================
   入力要素 共通
========================= */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="date"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
.wpcf7 input[type="number"]{
	display:inline;
	width:33%;
	margin-right:0.5em;
}
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: #d0576b;
}

/* =========================
   label
========================= */

.wpcf7 label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4em;
}
.wpcf7 .form_text02{
	margin-bottom:0;
	margin-top:2em;
}
/* =========================
   fieldset / legend
========================= */

.wpcf7 fieldset {
  border: none;
  margin: 1.8em 0;
  padding: 0;
}

.wpcf7 legend {
  display: block;
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 0.6em;
  color: #333;
}

/*再保存用*/
.wpcf7 h2{
font-size: 2.4em;
    text-align: center;
    margin-bottom: 2em;
}

/*確認画面用*/
.cf7-confirm-wrap h4{
        margin:0.5em 0;
    }
.cf7-confirm-wrap ul{
        margin-bottom:0.5em;
    }
    .cf7-confirm-wrap ul li{
        list-style: none;
        padding:0.5em ;
        margin-left: 1em;
        line-height: 1.5;
    }
    .cf7-confirm-wrap ul li:nth-child(odd){
        background:#fff9f6;
    }
    .confirm_button{
        display: flex;
        gap:12px;
		margin-top:1em;
    }
    .confirm_button button{
	font-size:1em;
	color: #fff;
	font-family:serif;
    border: #ff9763 thin solid;
    background: #ff9763;
    vertical-align: middle;
	border-style:none;
		border-radius:5px;
	display:flex;
	justify-content:center;
	align-items:center;
	width:250px;
	height:50px;
}
.confirm_button button:hover{
    border: #ff9763 thin solid;
    background: #fff;
	color:#ff9763;
	cursor:pointer
}

/* =========================
   予約候補グループ（任意）
========================= */

.wedding-date-item label {
  margin-bottom: 0.8em;
}

/* 日付＋時間を横並びにしたくなったら使える */
.wedding-date-item .date-time-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 新郎新婦のフィールド横並び（スマホでは縦） */
.groombride-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.groombride-item .sei-mei-row{
	display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 768px) {
  .groombride-item {
    grid-template-columns: 1fr;
  }
}
.groombride-item > fieldset {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

/*フォームに差し込む各種文章（注意文など）*/
.form_text{
	font-size:0.9em;
	font-weight:100;
}

/* =========================
   送信ボタン
========================= */

.wpcf7 input[type="submit"] {
  background: #d0576b;
  color: #fff;
  border: none;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
}

.wpcf7 input[type="submit"]:hover {
  background: #b94b5e;
}

/* =========================
   エラーメッセージ
========================= */

.wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 0.9em;
  margin-top: 4px;
}

.wpcf7-response-output {
  margin-top: 1.5em;
  padding: 12px;
  border-radius: 4px;
}

/* 全体フォント */
.fc {
  font-family: "Noto Sans JP", sans-serif;
	font-size:13px;
	font-weight:600;
	width:96%;
	margin:0 auto;
}
.fc a{
	color:252525;
}
/* ヘッダー */
.fc-header-toolbar {
  margin-bottom: 20px;
}

/* ボタン */
.fc-button {
  background: #333;
  border: none;
  border-radius: 6px;
}

.fc-button:hover {
  background: #555;
}

/* 今日セル */
.fc-day-today {
  background-color: #fff3cd !important;
}

/* イベント */
.fc-event {
  border-radius: 6px;
  padding: 2px 4px;
}

/* 日曜 */
.fc-col-header-cell.fc-day-sun {
  color: #d9534f;
}

/* 土曜 */
.fc-col-header-cell.fc-day-sat {
  color: #0275d8;
}
/*日付数字の色を変える*/
.fc-daygrid-day.fc-day-sun .fc-daygrid-day-number {
  color: #d9534f;
}

.fc-daygrid-day.fc-day-sat .fc-daygrid-day-number {
  color: #0275d8;
}
/*前月・次月ボタン*/
.nav-btn, button.button-primary{
	padding:0.5em 1em;
	background:#f9e8d9;
	border:#fff thin solid;
	border-radius:10px;
}
button.button-primary{font-size:1.3em;}
.nav-btn:hover, button.button-primary:hover{
	background:#ffded4;
	cursor:pointer;
}

/*来月以降の予約一覧リスト*/
.reservation-list{
	font-size:1.5rem
}
.reservation-list h2{
	font-size:1.4em;
	font-weight:100;
	margin:1em 0 2em;
	text-align:center;
}

/* テーブル全体 */
.reservation-list table {
  width: 100%;
  border-collapse: collapse;
  background: #fffdfb;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* ヘッダー */
.reservation-list th {
  background: #f9e8d9;
  color: #5a4a42;
  font-weight: 600;
  padding: 14px 12px;
  text-align: left;
  font-size: 1.2em;
  letter-spacing: 0.05em;
}

/* セル */
.reservation-list td {
  padding: 14px 12px;
  border-bottom: 1px solid #eee;
  color: #4a403a;
  font-size: 1em;
}

/* 行ホバー */
.reservation-list tr:hover td {
  background: #fff6ef;
}

/* 最後の行の線消す */
.reservation-list tr:last-child td {
  border-bottom: none;
}

/* 確認状態の入力欄：枠線を消して背景を薄くする */
.wpcf7-form input.is-confirm,
.wpcf7-form textarea.is-confirm {
    border: none !important;
    background-color: #f9f9f9 !important;
    box-shadow: none !important;
    pointer-events: none; /* クリックも無効化 */
    color: #252525;
    padding-left: 0;
}

/* 確認画面のメッセージ */
.confirm-msg {
    text-align: center;
    background: #fff3cd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: bold;
}

/* ボタンの並び（修正ボタンと送信ボタンを横並びに） */
#confirm-step .confirm_button {
    display: flex;
    gap: 20px;
    justify-content: center;
}

#back-to-input-btn {
    background: #ccc;
    color: #fff;
    border: none;
    padding: 14px 24px;
    border-radius: 4px;
    cursor: pointer;
}

/* --- 表示切り替えの強制設定 --- */

/* 最初は確認エリアを隠す */
#confirm-step {
    display: none;
}

/* 入力ステップの中のボタンは、入力中だけ表示 */
#input-step .confirm_button {
    display: flex !important; /* 強制表示 */
    justify-content: center;
    margin-top: 20px;
}

/* 確認ステップに切り替わった時 */
#confirm-step.active {
    display: block !important;
}

/* 確認中の入力欄： pointer-events: none が強すぎてスクロールできない場合があるため調整 */
.is-confirm {
    background-color: #f9f9f9 !important;
    border: 1px solid #eee !important;
    color: #555 !important;
    cursor: not-allowed;
}