@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..400;1,100..400&display=swap');

/*======================

           mb           

======================*/

@media screen and (max-width: 768px) {

	/* --------- 調整・消去 --------- */
	body .box-white,
	body .post-content{
		padding: 0 0 0;
	}
	body .group{
		padding: 0 0 80px;
	}
	body main > .title_area,
	body .group::before,
	body .inner > header,
	body .inner dl.periodText{
		display: none !important;
	}
	body .group .inner{
		width: 100%;
	}
	body .post-content p{
		margin: 0;
	}
	#eventinfo .pc { display: none !important; }
	#eventinfo .sp { display: block !important; }


	/* ↓ここから個別↓ */


	#eventinfo .content-main {
		margin-bottom:20px;
		background:#c6e0d3;
	}

	body #eventinfo p,
	body #eventinfo th,
	body #eventinfo td,
	body #eventinfo li,
	body #eventinfo dt,
	body #eventinfo dd{
		font-family: 'Work Sans','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-size:14px;
		font-feature-settings : "palt";
		letter-spacing:0.05em;
		line-height:1.7em;
		color: #111;
	}

	body #eventinfo h1,
	body #eventinfo h2,
	body #eventinfo h3,
	body #eventinfo h4,
	body #eventinfo h5{
		font-family: 'Work Sans','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-feature-settings : "palt";
		letter-spacing:0.05em;
		line-height:1.4em;
		font-weight:bold;
		color: #111;
	}

	#eventinfo h2{
		font-size: 1.8em;
		line-height: 1em;
		margin-bottom: 30px;
	}
	#eventinfo h2 span{
		font-size: 0.5em;
	}
	#eventinfo h3{
		font-size: 1.4em;
	}
	#eventinfo h4{
		font-size: 1.2em;
		margin: 20px 0;
	}
	#eventinfo img{
		display:block;
	}


	/* ---------- header ---------- */

	#eventinfo header p{
		padding: 30px 15px 0;
	}

	/* ---------- area1 ---------- */

	#eventinfo div#area1  {
		padding:0px 15px 20px;
	}

	#eventinfo div#area1 .stepbox{
		border-radius: 10px;
		background-color: #FFF;
		margin-bottom:20px;
	}

	#eventinfo div#area1 .stepbox img{
		border-radius: 10px 10px 0 0;
	}

	#eventinfo div#area1 .stepbox p{
		padding: 15px;
	}

	#eventinfo div#area1 .exImg{
		margin: 15px auto;
		max-width:750px;
		width:85vw;
	}

	#eventinfo div#area1 .price{
		max-width:640px;
		margin: 0px auto;
		width:80vw;
	}

	/* ---------- area2 ---------- */

	#eventinfo div#area2 {
		margin :0 15px;
	}

	#eventinfo div#area2 table{
		margin: 30px auto 0 ;
		border-collapse: collapse;
		width: 100%;
	}

	#eventinfo div#area2 th{
		width: 8em;
		vertical-align: top;
		line-height:1.85em;
		font-size: 12px;
		padding: 10px 0;
		border-bottom: 1px solid #fff;
		font-weight: bold;
	}

	#eventinfo div#area2 td{
		padding: 10px 0;
		border-bottom: 1px solid #fff;
	}



	/* ---------- shop ---------- */


	#eventinfo div#shop {
		padding:0px 15px ;
	}
	#eventinfo table.ShopList {
		margin: 50px auto 80px;
		border-top: 1px solid #111;
		border-right: 1px solid #111;
		border-left: 1px solid #111;
		border-bottom: 0px solid #111;
		width: 100%;
	}
	#eventinfo table.ShopList td.place{
		font-size: 13px;
		padding: 7px 10px;
		border-bottom: 1px solid #111;
		border-right: 1px dotted #111;
		background-color: #fff;
		width: 5em;
	}
	#eventinfo table.ShopList td{
		padding: 7px 10px;
		border-bottom: 1px solid #111;
		background-color: #fff;
		text-align: left;
	}
	#eventinfo table.ShopList td a{
		text-decoration: none;
	}


	/* ---------- area3 ---------- */

	#eventinfo div#area3{
		padding: 15px 0;
		background-color: #fff;
	}
	#eventinfo div#area3 p{
		margin-bottom: 30px;
	}
	#eventinfo div#area3 .b_logo{
		background:#004999;
		padding:15px 10px 10px;
		text-align:right;
	}
	#eventinfo div#area3 .b_logo img{
		text-align:right;
		width:25vw;
		display:inline;
		margin:0;
	}
	#eventinfo div#area3 .soleilInfo{
		margin:15px;
	}
	#eventinfo div#area3 .soleil_head p{
		width:80vw;
		margin: 30px auto;
	}
	#eventinfo div#area3 .soleil_head h2{
		width:70vw;
		margin:10px auto 30px;
	}
	#eventinfo div#area3 h3{
		margin:30px auto 5px;
	}
	#eventinfo div#area3 .function{
		margin: 0 auto 15px;
	}
	#eventinfo div#area3 .function h5{
		background: #5bb28b;
		color:#FFF;
		padding:5px;
	}
	#eventinfo div#area3 .function h6{
		color:#3ca174;
		padding-top: 20px;
		font-size: 1.1em;
		margin-bottom: 15px;
	}
	#eventinfo div#area3 .function .andmore{
		width: 176px;
		margin:30px auto 0;
	}
}

/*----------------------*/

/*          pc          */

/*----------------------*/

@media print, screen and (min-width: 769px) {
	/* --------- 調整・消去 --------- */
	body .box-white,
	body .post-content{
		padding: 0 0 0;
	}
	body .inner > header,
	body .inner dl.periodText{
		display: none !important;
	}
	body .inner {
		max-width: 960px;
	}
	body .post-content p{
		margin: 0;
	}
	#eventinfo div.image{
		text-align:center;
	}
	#eventinfo .pc { display: block !important; }
	#eventinfo .sp { display: none !important; }
	#eventinfo img { display:block; }

	/* ↓ここから個別↓ */

	#eventinfo .content-main {
		margin-bottom:50px;
		background:#c6e0d3;
	}
	body #eventinfo p,
	body #eventinfo th,
	body #eventinfo td,
	body #eventinfo li,
	body #eventinfo dt,
	body #eventinfo dd{
		font-family: 'Work Sans','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-size: 15px;
		line-height: 1.8em;
		color: #111;
	}
	#eventinfo h1,
	#eventinfo h2,
	#eventinfo h3,
	#eventinfo h4,
	#eventinfo h5{
		font-family: 'Work Sans','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
		font-feature-settings : "palt";
		letter-spacing:0.05em;
		font-weight:bold;
		color: #111;
	}
	#eventinfo h2{
		font-size: 2em;
		line-height: 1.4em;
		margin-bottom: 40px;
	}
	#eventinfo h2 span{
		font-size: 0.4em;
	}
	#eventinfo img{
		display:block;
	}

	/* ---------- header ---------- */

	#eventinfo header p{
		padding:30px 40px 0;
	}

	/* ---------- area1 ---------- */

	#eventinfo div#area1 {
		margin:0px 40px 80px;
	}

	#eventinfo div#area1 .stepArea{
		display: flex;
		justify-content: space-between;
		flex-wrap : wrap;
		gap: 30px;
	}
	#eventinfo div#area1 .stepbox{
		border-radius: 10px;
		background-color: #FFF;
		margin-bottom:20px;
		/* width:430px; */
		flex: 1 1 47%;

	}
	#eventinfo div#area1 .stepbox img{
		border-radius: 10px 10px 0 0;
		width:430px;
	}
	#eventinfo div#area1 .stepbox p{
		padding: 20px;
	}
	#eventinfo div#area1 .exImg{
		margin: 20px auto;
		width:750px;
	}
	#eventinfo div#area1 .price{
		width:640px;
		margin: 0px auto;
	}
	#eventinfo div#area1 .price img{
		width:640px;
	}

	/* ---------- area2 ---------- */

	#eventinfo div#area2 {
		padding:0px 40px ;
	}
	#eventinfo div#area2 table{
		margin: 30px auto 0 ;
		border-collapse: collapse;
		width: 80%;
	}
	#eventinfo div#area2 th{
		width: 150px;
		vertical-align: top;
		line-height:1.85em;
		font-size: 14px;
		padding: 10px 0;
		border-bottom: 1px solid #fff;
		font-weight: bold;
	}
	#eventinfo div#area2 td{
		padding: 10px 0;
		border-bottom: 1px solid #fff;
	}

	/* ---------- shop ---------- */

	#eventinfo div#shop {
		padding:0px 15px ;
	}
	#eventinfo table.ShopList {
		margin: 50px auto 80px;
		border-top: 1px solid #111;
		border-right: 1px solid #111;
		border-left: 1px solid #111;
		border-bottom: 0px solid #111;
		width: 80%;
	}
	#eventinfo table.ShopList th{
		padding: 7px 15px 7px 15px;
		border-bottom: 1px solid #111;
		background-color: #fff;
	}
	#eventinfo table.ShopList td{
		padding: 7px 15px 7px 15px;
		border-bottom: 1px solid #111;
		background-color: #fff;
		text-align: left;
	}
	#eventinfo table.ShopList td a{
		text-decoration: none;
	}



	/* ---------- area3 ---------- */

	#eventinfo div#area3{
		margin:50px 0 0;
		background-color: #fff;
	}
	#eventinfo div#area3 .b_logo{
		background:#004999;
		padding:20px 10px 10px;
		text-align:right;
	}
	#eventinfo div#area3 .b_logo img{
		text-align:right;
		width:150px;
		display:inline;
		margin:0;
	}
	#eventinfo div#area3 .soleilInfo{
		margin:30px 60px 0;
	}
	#eventinfo div#area3 .soleil_head{
		display: flex;
		justify-content: space-between;
		margin: 0 0 20px 15px;
	}
	#eventinfo div#area3 .soleil_head p,#eventinfo div#area3 .soleil_head p img{
		width:490px;
	}
	#eventinfo div#area3 .soleil_head h2,#eventinfo div#area3 .soleil_head h2 img{
		width:320px;
	}
	#eventinfo div#area3 .soleil_head h2{
		margin-top:15px;
	}
	#eventinfo div#area3 .functionArea{
		display: flex;
		justify-content: space-between;
		flex-wrap : wrap;
		align-items: stretch;
		gap: 30px;
	}
	#eventinfo div#area3 .function{
		width: 270px;
		margin-bottom:20px;
		flex: 1 1 47%;
	}

	/* #eventinfo div#area3 .function img{
		width: 270px;
	} */

	#eventinfo div#area3 .function h5{
		background: #5bb28b;
		color:#FFF;
		padding:5px;
	}
	#eventinfo div#area3 .function h6{
		color:#3ca174;
		padding-top:8px;
	}
	#eventinfo div#area3 .function .andmore{
		width: 176px;
		margin:55px auto 0;
	}
}