@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Zen+Old+Mincho:wght@400;500;600;700;900&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

/*======================
        変数定義
======================*/
:root{
	/* color */
	--c-primary:    #0e7340;  /* 見出し・th */
	--c-accent:     #da4c7b;  /* リンク・ボタン */
	--c-text:       #111111;
	--c-bg-main:    #e8e67e;
	--c-bg-sp:      #ffdcce;
	--c-border:     #f7f6c9;
	--c-base:       #fff;     /* ボタン文字・hover背景 */
	--c-disabled:   #999;     /* button_out */
	--c-shadow:     rgba(205, 205, 205, 1);

	/* font */
	--f-body:    'Comfortaa','Noto Sans JP','メイリオ','Meiryo',sans-serif;
	--f-head:    'Zen Old Mincho','Hiragino Mincho ProN','游明朝','Yu Mincho','YuMincho','ＭＳ Ｐ明朝',serif;
	--f-btn:     'Zen Maru Gothic',sans-serif;
}

/*======================
        共通設定
======================*/

/* --------- 調整・消去 --------- */
body .box-white,
body .post-content{
	padding: 0 0 0;
}
body .inner > header,
body .inner dl.periodText{
	display: none !important;
}
body .post-content p,
body .post-content h2,
body .post-content h3{
	margin: 0;
}

#event img{
	display: block;
}
#event a{
	color: var(--c-accent);
}
#event .content-main{
	background-color: var(--c-bg-main);
	text-align: center;
	padding-bottom: 30px;
}
body #event p,
body #event b,
body #event td,
body #event li,
body #event dt,
body #event dd{
	font-family: var(--f-body);
	font-size: 14px;
	line-height: 1.75em;
	color: var(--c-text);
}
#event h1,
#event h2,
#event h3,
#event h4,
#event h5{
	font-family: var(--f-head);
	transform: rotate(0.05deg);
	line-height: 1.4em;
	font-weight: 600;
	font-feature-settings: "palt";
	color: var(--c-primary);
}
#event .margin-top30{
	margin-top: 30px;
}

/*------------------------------------- main */

#event h2{
	color: var(--c-primary);
}
#event h2 > span{
	font-size: 0.7em;
}
#event h3{
	font-size: 1.4em;
	color: var(--c-primary);
	font-weight: normal;
}
#event h4{
	margin-top: 70px;
}
#event h4 span{
	font-size: 1.2em;
}
#event .box-img img{
	border-radius: 0px;
}
#event .box-txt{
	flex: 1;
	padding-top: 20px;
}
#event p.design_img{
	margin: 40px auto;
}
#event p.design_img img{
	display: inline-block;
}
#event p{
	text-align: left;
}
#event table{
	text-align: left;
}
#event th{
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
	font-size: 1.1em;
	font-weight: normal;
	color: var(--c-primary);
}
#event td{
	padding: 12px 0;
	border-bottom: 1px solid var(--c-border);
}

/*-------------------------------------- btn */

#event .button a {
	color: var(--c-base);
	font-size: 1.15em;
	font-weight: bold;
	text-decoration: none;
	font-family: var(--f-btn);
	background: var(--c-accent);
	border-radius: 50px;
	border: none;
	position: relative;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 30px;
	transition: 0.3s ease-in-out;
}
#event .button a:hover {
	background: var(--c-base);
	color: var(--c-accent);
}
#event .button a:after {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 3px solid var(--c-base);
	border-right: 3px solid var(--c-base);
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 50%;
	right: 20px;
	border-radius: 2px;
	transition: 0.3s ease-in-out;
}
#event .button a:hover:after {
	border-color: var(--c-accent);
}
#event .button_out {
	margin: 60px auto 0px;
	width: 400px;
	background-color: var(--c-disabled);
	color: var(--c-base);
	border-radius: 50px;
	font-family: var(--f-btn);
	font-size: 1.15em;
	padding: 20px 30px;
	text-align: center;
}

/*======================
           mb
======================*/
@media screen and (max-width: 768px) {

	body .group{
		padding: 0 0 80px;
	}
	body main > .title_area,
	body .group::before{
		display: none !important;
	}
	body .group .inner{
		width: 100%;
	}

	#event .pc { display: none !important; }
	#event .sp { display: block !important; }

	#event {
		margin-top: 8px; /*Tokaiロゴとの距離*/
		background: var(--c-bg-sp);
	}
	.content-main img {
		width: 100%;
		height: auto;
		vertical-align: top;
	}
	#event .content img.img-responsive {
		width: 100%;
		height: auto;
		vertical-align: top;
	}

	/*------------------------------------- main */

	#event h2{
		font-size: 1.5em;
		margin: 50px 5vw 30px;
	}
	#event h3{
		text-align: center;
		margin: 0 5vw;
	}
	#event .box-outer{
		margin: 0 5vw;
	}
	#event p{
		margin: 20px 0;
	}
	#event table{
		margin: 20px 5vw;
	}
	#event th{
		width: 6.5em;
	}

	/*-------------------------------------- btn */

	#event .button {
		margin: 0px 10vw 70px;
	}
}

/*----------------------*/
/*          pc          */
/*----------------------*/
@media print, screen and (min-width: 769px) {

	body header.title_area,
	body .group:nth-of-type(2n-1)::before {
		display: none !important;
	}
	body .group{
		padding: 0 0 0;
	}
	body .inner{
		max-width: 960px;
		width: 100%;
	}

	#event .pc { display: block !important; }
	#event .sp { display: none !important; }

	#event div.image{
		text-align: center;
	}
	#event .content-topic {
		margin: 0 auto;
		padding-top: 68px;
		padding-bottom: 100px;
	}
	#event .content-topic a:hover {
		text-decoration: none;
		opacity: 0.7;
	}

	#event .content-main{
		box-shadow: 0px 0px 15px 0px var(--c-shadow);
		max-width: 960px;
	}
	#event th{
		font-family: var(--f-head);
		transform: rotate(0.05deg);
		line-height: 1.4em;
		font-feature-settings: "palt";
		width: 10em;
	}
	#event #main_outer{
		margin: 0 5%;
	}

	/*------------------------------------- main */

	#event h2{
		font-size: 1.6em;
		margin: 70px 0 30px;
	}
	#event h3{
		text-align: left;
	}
	#event .box-outer{
		display: flex;
		gap: 30px;
		flex-direction: row-reverse;
		max-width: 800px;
		margin: 0 auto;
	}
	#event .box-img{
		width: 380px;
	}
	#event p{
		max-width: 740px;
		margin: 20px auto;
	}
	#event table{
		max-width: 700px;
		margin: 20px auto;
	}

	/*-------------------------------------- btn */

	#event .button {
		margin: 0px auto 70px;
		width: 400px;
	}
}