/* ヘッダー */
*{
	text-decoration: none;
}
html {
  font-size: 12pt;
	margin: 0;
	padding: 0;
}
body{
	margin: 0;
	padding: 0;	
}
header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed; /* ヘッダーを固定 */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff; /* 背景色 */
  z-index: 10000; /* 重なり順 */
}

h1{font-size:1.5em;}
h1 a{color:#0F0F0F;}
h2{font-size:1.1em;}

header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

header nav li {
	font-size:1em;
	line-height: 1.2em;
	font-weight: 700;
  margin-right: 40px;
	text-align: center;
}

nav{
	margin: 0 auto;
}
nav ul li a{
	color:#333;
  text-decoration: none;
}

nav ul li span{
	font-size:0.6rem;
	font-weight: 300;

}

header .contact {
  margin-left: auto; /* 右側に配置 */
	background:#cebd9c;
	color:#fff;
	font-size:1em;
	line-height: 1.2em;
	padding: 1em 2em;
	min-width: 100px;
	text-align: center;
}
header .contact span{
	font-size:0.7em;
}
@media (max-width: 760px){
	html,body{
		width: 100%;
		overflow-x: hidden;
	}
	header{
		width:100%;
	}
	nav{
		display:none;
	}
	header .contact{
		display: none;
	}
	
}
/* ロゴコンテナのスタイル */
.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ロゴ画像のスタイル */
.header-logo-image {
  max-height: 30px;
  width: auto;
  display: block;
  margin-bottom: 2px;
}

/* ロゴテキストのスタイル */
.logo-text {
  font-size: 12px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: #333; /* テキストの色を適宜調整 */
}

/* アンカーリンクのスタイルリセット */
.logo-container a {
  text-decoration: none;
  display: block;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .header-logo-image {
    max-height: 30px;
  }
  
  .logo-text {
    font-size: 9px;
  }
}


/* メインビジュアル */

main{
	padding:60px 5em 0;
	width:100%;
	max-width: 1200px;
	margin: 0 auto;
}
.main-visual {
  text-align: center;
}

.main-visual img{
  width: 100%;
  height: 550px;
  object-fit: cover; /* 画像を適切に表示 */
}

.main-visual p{
	text-align:left;
	margin-left: 5%;
	font-size:1.3em;
}
.top-visual{
	max-width:1200px;
	margin: 0 auto;
}
.top-visual img {
	width:100%;
	height: auto;
	margin-bottom: 1em;
}
.top-visual h1{
	line-height: 6em;
	background-image: url("img/dotted.png");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center 4em; /* 中央に配置 */
    background-size: 32px 8px; /* 背景画像のサイズを指定 */
	margin: -2.5em auto 2em;
	text-align: center;

}
.top-visual p{
	text-align: center;
}
.hero {
  position: relative; /* パンくずリストを配置するため */
  width: 100%; 
}
.breadcrumbs {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2; /* 画像の上に表示 */
  color: #fff;
  padding: 10px;
  font-size: 16px;
}
.breadcrumbs a{
	color: #fff;
}

.m_midashi {
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.m_midashi:before, .m_midashi:after {
  border-top: 1px solid;
  content: "";
  width: 1em; /* 線の長さ */
}
.m_midashi:before {
  margin-right: 0.5em; /* 文字の右隣 */
}
.m_midashi:after {
  margin-left: 0.5em; /* 文字の左隣 */
}

.top-visual h1.top_h1{
	margin-top:0;
}

@media (max-width: 760px){
	main{
	padding:60px 0 0;
	max-width:100%;
	margin: 0 auto 0;
	}
	.main-visual img{
		height:100%;
	}
	main br{
		display: none;
	}
	.main-visual p{
		font-size:1em;
		margin: 1em;
	}
	.top-visual h1{
		font-size:1em;
	}
	.breadcrumbs{
		font-size:0.6em;
		bottom: 10px;
		left: 10px;
	}
	.top-visual p{
		width:80%;
		margin: 2em auto ;
	}
	.top-visual p.m_midashi{
		margin: 1em auto;
	}
}


/* ギャラリー */
.gallery_wrap {
	position: relative;
  padding: 7% 0;
}
.gallery {
  display: flex;
  flex-wrap: wrap; /* 画像を折り返して表示 */
  justify-content: space-between; /* 左右に余白を作る */
	position: relative;
	z-index: 100;
}

.gallery_2 {
    max-width: 1000px;
    width: 100%;
    margin-inline: auto;
    /* 以下gridレイアウト用 */
    display: grid;
    gap: 2px;/* 画像間の余白 */
    grid-auto-flow: dense; /* 隙間を埋めながら配置 */
    grid-template-columns: repeat(6, 1fr); /* カラム数を設定 */
	position: relative;
	z-index: 100;
}
.gallery_2 img:first-child {
	grid-column: 1/5;
	grid-row: 1/3;
}
.gallery_2 img:nth-child(2) {
	grid-column: 5/8;
	grid-row: 1/2;
}
.gallery_2 img:nth-child(3) {
	grid-column: 5/8;
	grid-row: 2/3;
}
.gallery_2 img:nth-child(4) {
	grid-column: 1/3;
	grid-row: 4/5;
}
.gallery_2 img:nth-child(5) {
	grid-column: 1/3;
	grid-row: 5/6;
}
.gallery_2 img:nth-child(6) {
	grid-column: 3/8;
	grid-row: 3/6;
}
/* アスペクト比設定 */
.gallery_2 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;	
}
.gallery_2 img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.Gallery_dt {
	mix-blend-mode: normal;
	left: 0px;
	top: 0px;
	position: absolute;
	overflow: visible;
	width: 643px;
	white-space: nowrap;
	text-align: left;
	font-family: Helvetica;
	font-style: normal;
	font-weight: normal;
	font-size: 176px;
	color: rgba(235,233,228,1);
	letter-spacing: 0.8px;
	z-index: 1;
}

.gallery img {
  width: 21%; /* 画像の幅を調整 */
	margin-right: 0; 
	margin-left: 0;
}

/* 上段の画像を右寄せ */
.gallery img:nth-child(1) {
  margin-left: auto; /* 左側の余白を自動的に調整 */

}

/* 下段の画像を左寄せ */
.gallery img:nth-child(8) {
  margin-right: auto; /* 右側の余白を自動的に調整 */
}

/* 上段の画像グループを右端に */
.gallery::before {
  content: "";
  width: 2%; /* 右端に寄せるための余白 */
  display: block; 
}

/* 下段の画像グループを左端に */
.gallery::after {
  content: "";
  width: 2%; /* 左端に寄せるための余白 */
  display: block;
}

@media (max-width: 760px){
	.Gallery_dt{
		font-size:3em;
	}
	
}

/* こだわりのポイント */

.features_wrap{
	margin:5% auto;
	background: #fafafa;
	padding: 2% 5% 5% 5%;
}
.features_wrap h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.features_wrap2{
	margin:5% auto 0;
	background: #fafafa;
	padding: 2% 5% 5% 5%;
}
.features_wrap2 h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.features_box{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 必要に応じて折り返し */	
  margin-bottom: 2em;
}

.features_box img{
	width:30%;
	max-width: 250px;
	height: auto;
}
.features_box div{
	width: 60%;
}

.features_box h3{
	font-size:1.8em;
	line-height: 2.1em;
	color: #998675;
	margin-bottom: 0.5em;
    position: relative; /* ::before を配置するため */
    padding-left: 50px; /* 画像分の余白 */
}

.kodawari01::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
  width: 40px; /* 画像の幅 */
  height: 40px; /* 画像の高さ */
  background-image: url('img/plan/kodawari01.png'); /* 画像を設定 */
  background-size: cover; /* 画像をコンテナにフィット */
}
.kodawari02::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
  width: 40px; /* 画像の幅 */
  height: 40px; /* 画像の高さ */
  background-image: url('img/plan/kodawari02.png'); /* 画像を設定 */
  background-size: cover; /* 画像をコンテナにフィット */
}
.kodawari02::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* 垂直方向に中央揃え */
  width: 40px; /* 画像の幅 */
  height: 40px; /* 画像の高さ */
  background-image: url('img/plan/kodawari02.png'); /* 画像を設定 */
  background-size: cover; /* 画像をコンテナにフィット */
}

.features_box p{
	font-size:1.3em;
	line-height: 1.5em;
	margin-bottom: 0.5em;
}

.features {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 必要に応じて折り返し */
}

.features h3{
	font-size:1em;
	font-weight:300;
}
.features p{
	font-size:0.8em;
	font-weight:300;
}

.features img{
	max-width:88px;
}

.feature {
  width: 30%; /* 各要素の幅 */
  text-align: center;
  margin-bottom: 20px;
}

/* プラン */
.plan_wrap{
	margin: 5% auto;
}

.plan_wrap a{
	color:#fff;
}

.plan{
	margin:2rem auto;
}

.plan .back{
	background-size: 1069px 300px; /* 背景画像のサイズを指定 */
	display: flex;
	justify-content: center; /* 水平方向の中央揃え */
	align-items: center; /* 垂直方向の中央揃え */
	height: 300px; /* 親divの高さ */
}
.plan .p01{
	background-image: url("img/plan_back01.jpg");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center;/* 中央に配置 */

}

.plan .p02{
	background-image: url("img/plan_back02.jpg");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center;/* 中央に配置 */

}

.plan .p03{
	background-image: url("img/plan_back03.jpg");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center;/* 中央に配置 */

}

.plan .p04{
	background-image: url("img/plan_back04.jpg");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center;/* 中央に配置 */

}


.plan .plan_content{
	width:40%;
	color: #fff;
	margin: auto;
	outline: 1px solid #fff; /* 内側に黒の実線でボーダー */
	outline-offset: -8px; /* ボーダーを内側にずらす */
	padding: 1.5em;
}

.plan .content01{
    background: rgba(221, 169, 204, 0.8);	
}
.plan .content02{
    background: rgba(112, 184, 230, 0.8);	
}
.plan .content03{
    background: rgba(114, 197, 186, 0.8);	
}
.plan .content04{
    background: rgba(242, 165, 180, 0.8);	
}

.plan .plan_content h2{
	text-align:center;
}
.plan .plan_content h3{
	text-align:center;
}

.plan .plan_price{
	font-size:1em;
	text-align:center;
}

.plan .plan_price span{
	font-size:0.8rem;
}

.plan .plan_txt{
	max-width: 400px;
	margin: 1em auto;
	font-size:0.8rem;
}
.plan h3.plan_txt{
	max-width: 400px;
	margin: 1em auto;
	font-size:0.8rem;
	font-weight: 300;
	text-align: left;
}

/* 撮影プラン */
.plan_wrap2{
	margin: 0 auto 5%;
}

.plan_wrap2 h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.plan2{  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* 必要に応じて折り返し */	
  margin-bottom: 4em;
}

.plan2 img{
	width:50%;
	max-width: 500px;
	height: auto;
}
.plan2 div{
	width: 50%;
}

.plan2 h3{
	font-size:1.8em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
    position: relative; /* ::before を配置するため */
	padding-bottom: 10px;
	background-image: linear-gradient(to right, #9d79bc 15%, transparent 15%); /* 左から30%を黒、残りを透明 */
	background-repeat: no-repeat;
	background-position: bottom left; /* 下線なので左下に配置 */
	background-size: 100% 2px; /* 下線の太さを2pxに設定 */
}
.plan2 .plan2_txt{
	font-size:1em;
	line-height: 1.2em;
}
.plan2 .price2{
	font-size:1.8em;
	font-weight: 700;
}
.plan2 .price2 span{
	font-size:0.6em;
	font-weight: 300;
}
.plan2 .link_img{
	width:50%;
	max-width:200px;
	display: block;
	margin: 1em auto 1em 3em;
}

.plan_area{
	background: #eee;
	width:100vw;
		/* 画面の幅 */
	margin-left: calc(50% - 50vw);	
	padding: 0 0 3em;
	margin-top: 0;
}
.plan_area div{
	width:100%;
	max-width: 1200px;
	margin: 2em auto;	
	padding: 0;
}

.plan_area div h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;	
}
.plan_area_box{
	max-width: 1200px;
	display: grid;
	grid: 1em;
	grid-template-columns: 1fr 1fr;
	margin: 5em auto 0;
}
.plan_area_box img{
	width: 90%;
	max-width:500px;
}
.plan_area_box h3{
	font-size:1.5em;
	border-left:4px solid #b27cc9;
	padding-left:5px;
	width:80%;
	margin: 0 auto 1em;
	
}

.plan_area_box h3.bd_b{
	border-left:4px solid #29abe2;
}
.plan_area_box p{
	width:80%;
	margin: 0 auto;
}
.box_r{
	order: 2
}

.plan_voice{
	margin: 5% auto 0;
	padding: 2% 0 5%;
	width: 100vw; /* 画面の幅 */
	margin-left: calc(50% - 50vw); 
}
.plan_voice .voice_area{
	width:100%;
	max-width: 1200px;
	margin: 0 auto;	
}

.plan_voice .voice_area h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;	
}
.voice_box {
	width:80%;
	max-width: 1000px;
	margin:2em auto;
	padding: 2em 0;
	background: #eee;
}
.voice_box h3{
	font-size:2em;
	margin: 2% auto 0 10%;
	color: #cebd9c;
	position: relative; /* h3要素を基準に横棒を配置するため */
	padding-right: 1em;
}

.voice_box h3::after {
  content: ''; /* 疑似要素にコンテンツがないことを明示 */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%); /* 横棒を垂直方向に中央揃え */
  width: calc(100% - 1em - 100%); /* 横棒の長さを計算 */
  height: 2px; /* 横棒の太さ */
  background-color: #cebd9c; /* 横棒の色 */
}

.voice_box h3 span{
	font-size:1.2em;	
}
.voice_box p{
	width:80%;
	margin: 1em auto;
	display:block;
}

@media (max-width: 760px){
	.plan .plan_content{
		width:80%;
	}
	.plan2{  display: block;}
	.plan2 img{
	width:100%;
	max-width: 500px;
		margin: 1em auto;
	height: auto;
	}
	.plan2 div{
	width: 90%;
		margin: 0 auto;
	}
	.plan2 h3{
		font-size:1.2em;
	}
	.plan2 .price2{
		font-size:1.2em;
		text-align: center;
	}
	.plan2 .link_img{
		margin:2em auto 1em;
		width:80%;
	}
	.plan_area_box{
		display:block;
	}
	.plan_area_box img{
		margin:0 auto 1em;
		display: block;
	}
	
	.features_box{
  display:block;
		width: 100%;
  margin-bottom: 2em;
}
	.features_box img,.features_box div{
		width:100%;
	}
	.features_box img{
		max-width: 500px;
	}
}

/* ドットh2 */
.dotted{
	line-height: 8em;
	background-image: url("img/dotted.png");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center 6em; /* 中央に配置 */
    background-size: 32px 8px; /* 背景画像のサイズを指定 */
	margin: -3em auto 2em;
	text-align: center;
}

/* スライドショー */
.links{
	margin: 2em auto;
	max-width:250px;
	width:50%;
	display: block;
}
.costume-info {
  max-width: 900px; 
  margin: 0 auto; /* ボックスを中央寄せ */
	border:1px solid #eee;
	padding:0 2em;
	text-align: center;
}
.costume-info h3{
	line-height: 5em;
	background-image: url("img/isho_line.png");
	background-repeat: no-repeat; /* 繰り返しなし */
    background-position: center 4em; /* 中央に配置 */
    background-size: 166px 18px; /* 背景画像のサイズを指定 */

}


.slideshow-container {
  width: 100%; 
  overflow: hidden; /* はみ出た部分を隠す */
  position: relative; /* 後述の擬似要素を配置するため */
}

.slideshow {
  display: flex;
  transition: transform 0.5s ease-in-out; /* スムーズなスライド */
  width: fit-content; /* 画像の総幅に合わせる */
}

.slideshow img {
  width: calc(900px / 5); /* 画像の幅を調整 */
  margin-right: 10px; /* 画像間の余白 */
}

/* 左右に余白を作る */
.slideshow-container::before,
.slideshow-container::after {
  content: "";
  display: block;
  width: calc(900px / 6); /* ボックスの半分の幅 */
}

.slideshow-container::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; /* 画像の上に重ねる */
}

.slideshow-container::after {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1; /* 画像の上に重ねる */
}
@media (max-width: 760px){
	.costume-info{
		width:80%;
		padding: 0 1em;
	}
	.links{
		width:80%;
	}
}


/* 撮影エリア */
.area_wrap{
	margin: 7em auto 5%;
}

.area_wrap h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.area {
  display: flex; /* 横並びにする */
  margin: 3em 2em;
}
.area img{
	max-width:600px;
}
.area_box {
	margin:2em auto auto -100px;
	max-width: 500px;
	width:60%;
	padding-left:2em;
	height: 300px;
	color:#fff;
}
.area_box h3{
	font-size:3em;
	margin: 1em auto 0;
}
.area_box p{
	font-size:0.9em;
}
.area_box img{
	display: block;
	max-width:250px;
	width:70%;
	margin: 2em auto auto;
}
.area01{
	background: rgba(221, 169, 204, 0.8);
}
.area02{
    background: rgba(112, 184, 230, 0.8);	
}
.area03{
    background: rgba(114, 197, 186, 0.8);	
}

@media (max-width: 760px){
	.area_wrap h2{
		margin-left: 1em;
	}
	.area {
  display: block;
  margin: 3em 2em;
}
	.area img{
	max-width:600px;
		width:100%;
}

.area_box {
	position: relative;
	z-index: 100;
	margin:-5em auto 2em;
	width:90%;
	padding:1em 0;
	height: auto;
	color:#fff;
}
	.area_box h3{
		font-size:2em;
		margin: 1em;
	}
	.area_box p{
		margin: 1em;
	}
	.area_box img{
		width: 80%;
		margin: 1em auto;
	}
	
	
}

/* 申し込みの流れ */

.flow_wrap{
	margin: 2em auto;
}
.flow_wrap h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.flow{
	position: relative;
	padding:0 2em 2em;
	border-radius: 3em 3em 3em 0;
	width: 70%;
	margin: 4em 0 0 auto;
	background: #eee;
}
.flow .icon_txt{
	position: absolute;
	top:0;
	font-size:3em;
	color:#cebd9c;
	margin-top:-40px;
}
.flow .icon_txt span{
	font-size:0.5em;
}
.flow h3{
	padding-top: 2em;
	margin-bottom: 0.3em;
}
.flow p{
	font-size:0.9em;
	margin-right: 120px;
}
.flow p span{
	font-size:0.8em;
}
.flow img{
	position: absolute;
	right: 2em;
	top: 3em;
	max-width:100px;
}
.flow img.icon2{
	max-height: 100px;	
	
}
.flow_box{
	max-width:1000px;
	width:auto;
	margin: 3em auto;
}
@media (max-width: 760px){
	.flow{
		width:80%;
		margin: 3em auto;
		padding: 1em;
	}
	.flow h3{
		padding-top: 1rem;
	}
	.flow_wrap h2{
		margin-left:1em;
	}
	.flow img{
		top:5em;
	}
	.flow .icon_txt{
		font-size:3rem;
	}
	.flow .icon_txt span{
		font-size:1rem;
	}
}

/* QA */
.qa_area{
	margin: 5% auto 0;
	padding: 2% 0 5%;
	background-color:#eee;
	width: 100vw; /* 画面の幅 */
	margin-left: calc(50% - 50vw); 
}

.back_f{
	background-color:#fff;
}

.qa_area .qa_box{
	margin:0 auto;
	padding:0;
	max-width: 1200px;
	
}
.qa_area h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}
.qa{
	background: #fff;
	position: relative;
	width:70%;
	margin: 4em 0 0 auto;
    padding:0.25em 1em;
}
.qa p{
	margin: 0;
	padding:0;
}
.qa h3{
	margin:0 auto 2em 2em;
}
.qa p.qa_q{
	color: #cebd9c;
	font-size:3em;
	margin-top:-30px;
	margin-left: -10px;
}

.qa:before,.qa2:before,.qa:after,.qa2:after{ 
    content:'';
    width: 95%;
    height: 80px;
    position: absolute;
    display: inline-block;
}
.qa:before{
    border-top: solid 1px #cebd9c;
    top:0;
    right:-10px;
}
.qa2:before{
    border-right: solid 1px #cebd9c;
	top:-10px;
    right: 0;
}

.qa:after{
    border-bottom: solid 1px #cebd9c;
    bottom:0;
    left: -10px;
}
.qa2:after{
    border-left: solid 1px #cebd9c;
    bottom:-10px;
    left: 0;
}
@media (max-width: 760px){
	.qa_area{
		margin: 5em auto 0;
	}
	.qa{
		width:80%;
		margin: 3em auto;
	}
	.qa_area h2{
		margin-left:1em;
	}
}

/* faq */

.faq_area {
	margin: 5% auto 5%;
	padding: 2% 0 5%;
	width: 100vw;
	/* 画面の幅 */
	margin-left: calc(50% - 50vw);
}

.faq_area .faq_box {
	margin: 0 auto;
	padding: 0;
	max-width: 1200px;
}

.faq_area h2 {
	margin-top: -3rem;
	font-size: 1em;
	border-left: 1px solid #333;
	line-height: 7em;
	padding-left: 1em;
}

.faq {
	background: #fff;
	position: relative;
	width: 100%;
	margin: 4em 0 0 0;
	padding: 0.25em 1em;
}

.faq p {
	margin: 0;
	padding: 0;
}

.faq h3 {
	margin: 0 auto 2em 2em;
}
.faq .a_txt{
	margin: 0 auto 2em 2em;
}

.faq p.faq_q,
.faq p.faq_a {
	color: #cebd9c;
	font-size: 3em;
	margin-top: -30px;
	margin-left: -10px;
}
.faq p.faq_a {
	color: #7c7871;
}

.faq:before,
.faq2:before,
.faq:after,
.faq2:after {
	content: '';
	width: 95%;
	height: 80px;
	position: absolute;
	display: inline-block;
}

.faq:before {
	border-top: solid 1px #cebd9c;
	top: 0;
	right: -10px;
}

.faq2:before {
	border-right: solid 1px #cebd9c;
	top: -10px;
	right: 0;
}

.faq:after {
	border-bottom: solid 1px #cebd9c;
	bottom: 0;
	left: -10px;
}

.faq2:after {
	border-left: solid 1px #cebd9c;
	bottom: -10px;
	left: 0;
}

.faq.a_box::before,
.faq.a_box .faq2::before,
.faq.a_box::after,
.faq.a_box .faq2::after {
	border-color: #7c7871;
}

.a_box {
	display: none;
}
.faq.active {
	display: block;
}

@media (max-width: 760px) {
	.faq_area {
		margin: 5em auto 0;
	}

	.faq {
		width: 80%;
		margin: 3em auto;
	}

	.faq_area h2 {
		margin-left: 1em;
	}
}

/* contact */
.contact_wrap {
	margin: 7em auto 5%;
}

.contact_wrap h2 {
	margin-top: -3rem;
	font-size: 1em;
	border-left: 1px solid #333;
	line-height: 7em;
	padding-left: 1em;
}

.contact_box {
	margin: 3em auto;
	max-width: 760px;
}

.contact_info {
	padding: 2em;
	background-color: #ebe9e4;
}

.contact_form {
	max-width: 800px;
	margin: 0 auto;
}
.contact_form_box {
	width: 80%;
	margin: 0 auto;
}

.contact_form dd {
	margin-inline-start: 0;
	margin-bottom: 20px;
}

.contact_form input[type=text],
.contact_form input[type=textarea],
.contact_form input[type=tell],
.contact_form input[type=email],
.contact_form select
{
	padding: 0.5em;
	outline: 0;
}

.contact_form_text,
.contact_form_textarea {
	width: 95%;
}

.contact_form_textarea {
	height: 10em;
}

.contact_form_date {
	display: flex;
	width: 30%;
	gap: 10px;
}


.contact_submit {
	/* reset */
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	/* style */
	position: relative;
	display: block;
	background-color: #0071bc;
	color: #fff;
	font-weight: bold;
	width: 200px;
	padding: 1em;
	margin: 5em auto;
	border-radius: 10px;
	font-size: 1em;
}

.contact_submit::after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent #fff;
	top: 50%;
	left: 15%;
	transform: translate(-50%, -50%);
}

.required {
	color: red;
}

@media (max-width: 760px) {
	.contact_wrap h2 {
		margin-left: 1em;
	}

	.contact_box p {
		margin: 1em;
	}
	.contact_form_box p {
		margin: 1em 0;
	}
	.contact_info br {
		display: block;
	}

	.contact_form_date {
		display: block;
		width: 100%;
	}
	.contact_form_date input[type=text] {
		margin-bottom: 5px;
		width: 95%;
	}
}

/*プラン詳細*/
.top_plan_wrap{
	max-width:1200px;
	width:80%;
	margin:2em auto;
}
.top_plan_area{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1em;
}
.top_plan_area img{
	width:100%;
}
.top_plan_box h3{
	color:#998675;
	font-size:1em;
	margin-bottom:0.2em;
}
.top_plan_box p{
	margin-top: 0.5em;
}
.top_plan_box p.price3{
	font-size:1.8em;
	font-weight: bold;
}
.top_plan_box p.price3 span{
	font-size:0.5em;
	font-weight:normal;
}
.plan_optionbox{
	max-width: 1000px;
	margin: 2em auto;
	border: solid 1px #dedad3;
	text-align: center;
	padding-bottom: 2em;
}

.plan_optionbox h3{
	color:#998675;
}
.option_box{
	display: flex;
	width: 80%;
	margin:0 auto;
}
.option{
	color:#998675;
	margin: 0.5em ;
	width:8em;
}
.option img{
	width:auto;
	max-height: 70px
}
.option p{
	font-size:0.8em;
	margin: 0.5em auto;
}

.plan_option2{
	margin:2em auto;
	background: #eee;
	padding: 1em;
}
.plan_option2 div{
	margin: 1em;
}
.plan_option2 div img{
	width:50%;
}
.option_r{
	font-size:0.9em;
	color:#ed1c24;
}
.price5{
	font-size:1.2em;
	font-weight: bold;
}
.txt_s{
	font-size:0.8em;
}

@media (max-width: 760px){
	.top_plan_area{
		display: block;
		width:90%;
		margin: auto;
	}
	.top_plan_wrap{
		width: 100%;
	}
}

/* その他オススメ */
.osusume_wrap{
	max-width:1200px;
	width:80%;
	margin:5em auto 2em;	
}
.osusume_wrap h2{
	margin-top:-3rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;
}

.osusume_box{
	max-width: 800px;
	height: 230px;
	margin: 2em auto;
	text-align: center;
	color:#fff;
	overflow:hidden;
}
.osusume_plan1{
	background:url("img/plan/plan01_back.jpg")no-repeat;
	background-position: center;
	background-size: cover;
}
.osusume_box p{
	margin: 2em auto 0;
}
.osusume_box h3{
	margin: 1em auto 2em;
	font-size:1.2em;
}

/* スタジオ */
.studio_wrap{
	width:100vw;
		/* 画面の幅 */
	margin-left: calc(50% - 50vw);	
	padding: 0 0 3em;
	margin-top: 5em;
	background: #eee;
	padding-top:5px;
}
.studio_wrap div{
	max-width:1200px;
	width:80%;
	margin:2em auto;
}
.studio_wrap h2 {
	margin-top: -3rem;
	font-size: 1em;
	border-left: 1px solid #333;
	line-height: 7em;
	padding-left: 1em;
}

.studio_box{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1em;
	max-width:1000px;
	margin: 2em auto 4em;
}
.studio_box img{
	width:100%;
}
.studio_box h4{
	color:#fff;
	font-size:1em;
	padding: 1em;
	text-align: center;
	background: #b7b2a9;
	border-radius: 1em;
}
.studio_stn h4{
	background: #998675;	
}
.studio_pre h4{
	background: #c69c6d;	
}
.top_plan_box p{
	margin-top: 0.5em;
}
.top_plan_box p.price3{
	font-size:1.8em;
	font-weight: bold;
}
.top_plan_box p.price3 span{
	font-size:0.5em;
	font-weight:normal;
}
.plan_optionbox{
	max-width: 1000px;
	margin: 2em auto;
	border: solid 1px #dedad3;
	text-align: center;
	padding-bottom: 2em;
}

.plan_optionbox h3{
	color:#998675;
}
.option_box{
	display: flex;
	width: 80%;
	margin:0 auto;
}
.option{
	color:#998675;
	margin: 0.5em ;
	width:8em;
}
.option img{
	width:auto;
	max-height: 70px
}
.option p{
	font-size:0.8em;
	margin: 0.5em auto;
}

.plan_option2{
	margin:2em auto;
	background: #eee;
	padding: 1em;
}
.plan_option2 div{
	margin: 1em;
}
.plan_option2 div img{
	width:50%;
}
.option_r{
	font-size:0.9em;
	color:#ed1c24;
}
.price5{
	font-size:1.2em;
	font-weight: bold;
}
.txt_s{
	font-size:0.8em;
}
@media (max-width: 760px){
	.option_box{
		display:grid;
		grid-template-columns: 1fr 1fr;
		gap:1em;
		width:auto;
	}
	.option{
		width: auto;
	}
	.plan_option2 div img{
		width:90%;
	}
	.plan_optionbox{
		width:90%;
		margin: auto;
		
	}
	.studio_wrap div{
		width:90%;
	}
	.studio_box{
		display: block;
	}
	.osusume_wrap{
		width:90%;
	}
	.osusume_box h3{
		font-size:1em;
		margin-bottom:1em;
	}
	.osusume_box .links{
		margin: 1em auto;
		width:60%;
	}
}


/* フッター */
footer{
	margin: 0;
	padding: 0;
	background:#ebe9e4;
	width: 100vw; /* 画面の幅 */
	margin-left: calc(50% - 50vw); 
}
.foot{
	margin: 0 auto;
	padding: 5em 0;
	width: 80%;
	max-width: 1200px;
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3つのカラムを均等に配置 */
	gap: 0; /* アイテム間の隙間 */
}
.foot li{
	font-size:0.9em;
	font-weight: 700;
	line-height: 2em;
	list-style: none;
}
.foot li span{
	font-weight: 300;
}
.foot_contents{
	background:#fff;
	text-align: center;
	padding: 2em;
}

.foot_contents .dotted{
	line-height: 5em;
	background-position: center 4em;
}
.tel{
	font-size:1em;
	font-weight: 700;
}
.foot_cv{
	background: #cebd9c;
	color: #fff;
	font-size:0.8em;
	margin: 1em auto;
	padding:0.8em 0;
	line-height: 1.1em;
}
.foot_faq{
	background: #7c7871;
	color: #fff;
	font-size:0.8em;
	margin: 1em auto;
	padding:0.8em 0;
	line-height: 1.1em;
}
.foot_cv span, .foot_faq span{
	font-size:0.7em;
}

.copy{
	text-align: center;
	font-size:0.8em;
	padding-bottom: 1em;
	margin: 0;
}
@media (max-width: 760px){
	footer{
		margin: 0 auto 0;
	}
	.foot{
		display: block;
	}
	.foot div{
		margin: 2em auto;
	}
}
/* ハンバーガーメニュー全体 */
    #menu-toggle {
      display: none;
    }

    .hamburger-menu {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 100;
      display: none;
    }

    /* スマホサイズでのみ表示 */
    @media (max-width: 768px) {
      .hamburger-menu {
        display: block;
      }
    }

    /* ハンバーガーボタン */
    .hamburger-button {
      width: 30px;
      height: 30px;
      background-color: transparent;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    .hamburger-bar {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #333;
      margin: 5px 0;
      transition: all 0.3s ease-in-out; /* アニメーション */
    }

    /* メニューリスト */
    .menu-list {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .menu-item {
      margin: 10px 0;
	list-style:none;
    }
.menu-item span{
	font-size:0.8rem;
}



    .menu-item a {
      color: #fff;
      text-decoration: none;
      font-size: 20px;
    }

    /* チェックボックスがチェックされた時のスタイル */
    #menu-toggle:checked + .hamburger-button + .menu-list {
      display: flex;
    }

    #menu-toggle:checked + .hamburger-button .hamburger-bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    #menu-toggle:checked + .hamburger-button .hamburger-bar:nth-child(2) {
      opacity: 0;
    }

    #menu-toggle:checked + .hamburger-button .hamburger-bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

/* 共通コンテンツ */
.main_back_f, .main_back_g{
	margin: 0;
	padding: 0;
	width: 100vw; /* 画面の幅 */
	margin-left: calc(50% - 50vw); 
	padding-bottom:4em;
	padding-top:5px;
}
.main_back_g{
	background: #eee;
}
.main_back_f{
	background: #fff;
}
.main_back_f h2, .main_back_g h2{
	margin-top:-2rem;
	font-size:1em;
	border-left:1px solid #333;
	line-height: 7em;
	padding-left:1em;	
	max-width: 1200px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
.in_box{
	max-width:1000px;
	width: 90%;
	margin: 3em auto;
}
.in_box h3{
	font-size:1.2rem;
}
.main_img{
	max-width:1000px;
	width: 90%;
	margin: 1em auto;
}
@media (max-width: 768px) {
	.main_back_f h2, .main_back_g h2{
		width: 85%;
	}
}

/* 衣装ページ */
.dress_box{
	max-width:1000px;
	width:90%;
	margin: 2em auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1em;
}
.dress_box img{
	width: 100%;
	height: auto;
}