/* --------------------------------------------------
	ステージ
-------------------------------------------------- */

.l_substage_img{
 width:100%;
 height:109px;
 background-image:url('../image/img-stage-01.jpg');
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover;
	
}

/* --------------------------------------------------
	サイドメニュー
-------------------------------------------------- */
/* タイトル部分テキスト */
.l_sidemenu_title_txt{	
	height:101px;
	background-image:url('../image/txt-sidemenu-title.png');
	background-repeat:no-repeat;
	background-position:center 55px;
}

@media (max-width: 768px) {
.l_sidemenu_title_txt{	
	height:57px;
	background-image:url('../image/txt-sidemenu-title.png');
	background-repeat:no-repeat;
	background-position:center 10px;
}
}

/*----------------------------------------------------
　横並び画像ボックス（リキッド・レスポンシブ）
----------------------------------------------------*/

.unit_imgbox_sidebyside {
	margin:10px 14px;
	padding:0px;
/*	border:1px red solid;*/
}

.unit_imgbox_sidebyside img{
	width: calc(100% - 30px);
}

.uop_sbs2{
	width: 100%;
}

.uop_sbs2 .upts_imgbox{
	float:left;
	width: 46%;	
	margin: 0 2%;
}

/*
.unit_imgbox_sidebyside img{
	width: 100%;
}
*/


.uop_sbs3{
	width:100%;
}

.uop_sbs3 .upts_imgbox{
	float:left;
	width: 31%;	
	margin: 0 1%;
}



@media (max-width: 500px) {

	.uop_sbs2 .upts_imgbox{
		float:none;
		width: 100%;	
		margin: 0 0%;
	}


	.uop_sbs3 .upts_imgbox{
		float:none;
		width: 90%;	
		margin: 1%;
		text-align:center;
	}

}

.in_caption{
	width: calc(100% - 30px);
	margin-top:0px;
	margin-bottom:10px;
	text-align:center;
	background-color:#DEEBF3;
}



/*----------------------------------
 実行委員長からのご挨拶
----------------------------------*/
.col_textarea_full#message .message_img{
	float: left;
	margin: 0 1em .1em 0;
	width: 30%;
	max-width: 200px;
	min-width: 150px;
	object-fit: contain;
}
.col_textarea_full#message .right{
	text-align: right
}
/*----------------------------------
 記念行事のご案内
----------------------------------*/
.center{
	text-align: center;
}
.bold{
	font-weight: 600;
}
.bigger{
	font-size: 1.2em;
}
.wrap{
	display: inline-block;
}
.mincho{
	font-family: '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
}
.img_flex{
	display: flex;
	grid-gap: 1em;
	justify-content: center;
	flex-wrap: wrap;
}
.img_flex.img_2 img {
  width: 40%;
  object-fit: contain;
}
.img_flex.img_3 img {
  width: 32%;
  object-fit: contain;
}

@media (max-width: 768px) {
	.img_flex.img_3{
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.img_flex.img_3::after{
  		display: block;
		content: "";
		width: 48%;
		height: 0;
	}
	.img_flex.img_3 img {
	  width: 48%;
	}
}
@media (max-width: 500px) {
	.img_flex.img_2 img {
	  width: 45%;
	}
}
/*-----------------------------------
　会員様の口コミ
-----------------------------------*/
/*-------------アコーディオン-------------*/
.modern-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.accordion-item {
  border: 1px solid #7a4171;
  margin-bottom: 1em;
  overflow: hidden;
  background: #fff;
  transition: .3s;
}
.accordion-header {
  width: 100%;
  padding: 1em 2em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.accordion-item:hover {
  background-color: rgba(122,65,113,.05);
}

.header-content {
  text-align: left;
}

.title .name{

}
.title .review_midashi{
	font-size: 1.1em;
	font-weight: 600;
	margin: 1em 0 0 0;
}
/*十字*/
.icon-wrap {
  position: relative;
  width: 12px;
  height: 12px;
}
.line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #7a4171;
  transition: transform 0.3s ease;
}
.line:first-child {
  transform: translateY(-50%);
}
.line:last-child {
  transform: translateY(-50%) rotate(90deg);
}
.accordion-header.active .line:last-child {
  transform: translateY(-50%) rotate(0);
}
.accordion-body {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-out;

}
.body-content {
  padding: 0 2em 2em;


}

/* アニメーション用の状態 */
.accordion-body.entering {
  height: var(--content-height);
}

.accordion-body.leaving {
  height: 0;
}



/*----------------モーダルウィンドウここから----------------*/
/* モーダルを開くボタン */
.modal__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
	grid-row-gap: 1em;
	grid-column-gap: 0;
}
.modal__cards::after{
  content:"";
  display: block;
  width:31%;
  height: 0;
}
.modal__card {
  transition: .3s;
  width: 31%;
	box-sizing: border-box;
}

.modal__card:hover {
  background: rgba(122, 65, 113, .05);
}

.modal__trigger {
  cursor: pointer;
  border: 1px solid #7a4171;
  padding: 1em;
}
.modal-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.modal-card__content .review_midashi{
	font-size: 1.1em;
	font-weight: 600;
    margin: .5em 0 0 0;
}
@media (max-width: 500px) {

}

/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 2em;
  background: #fff;
}

.modal__inner {
  position: relative;
  overflow-y: auto;
  height: 100%;
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 44px;
  height: 44px;
  background: #7a4171;
  cursor: pointer;
  transition: opacity .6s;
}
.modal__close:hover {
  opacity: .6;
}
.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.profile__image {
  display: flex;
	justify-content: center;
  grid-gap: 1em;
}


.profile__image.img_2 img {
  width: 30%;
  object-fit: contain;
}
.profile__image.img_3 img {
  width: 30%;
  object-fit: contain;
}
.profile__image.img_4 img {
  width: 23%;
  object-fit: contain;
}
.profile__content{
	margin: 2em 3em 1em 0;
}

.profile__content .review_midashi{
	font-size: 1.1em;
	font-weight: 600;
    margin: 1em 0 .5em 0;

}
@media (max-width: 960px) {
	.modal__cards {
		justify-content: flex-start;
		grid-gap: 1em;
	}
	.modal__card {
		width: 48%;
	}
}

@media (max-width: 768px) {
	.modal__cards {
		justify-content: space-around;
		grid-row-gap: 1em;
		grid-column-gap: 0;
	}
	.modal__card {
		width: 31%;
	}
	.modal-card__content .review_midashi {
		font-size: 1em;
	}
	.profile__image.img_2 img {
	  width: 45%;
	}
	.profile__image.img_3{
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.profile__image.img_3::after{
  		display: block;
		content: "";
		width: 48%;
		height: 0;
	}
	.profile__image.img_3 img {
	  width: 48%;
	}
	
	.profile__image.img_4{
		flex-wrap: wrap;
		justify-content: space-around;
	}
	.profile__image.img_4::after{
  		display: block;
		content: "";
		width: 48%;
		height: 0;
	}

	.profile__image.img_4 img {
		width: 48%;
	}

}

@media (max-width: 600px) {
	.modal__cards {
		justify-content: flex-start;
		grid-gap: 1em;
	}
	.modal__card {
		width: 48%;
	}
}
@media (max-width: 428px) {
	.modal__cards {
		justify-content: center;
	}
	.modal__card {
		width: 90%;
	}
	.modal__trigger {
		padding: 2em;
	}
}