@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=M+PLUS+Rounded+1c:wght@400;700;800&display=swap');

/*======================
        変数定義
======================*/
:root {
	/* ◆カラー◆ */
	--color-main: #ffeb9a;        /* メインカラー(タイトル等) */
	--color-text: #fff;        /* 本文カラー */
	--color-accent: #ec6d83;      /* アクセントカラー */
	--color-date: #32bade;        /* 発売日文字色 */
	--color-date-bg: #d0f9f7;     /* 発売日背景色 */
	--color-tag-bg: #feeec2;      /* タグ背景色 */
	--color-campaign-bg: #ffdcce; /* キャンペーン背景色 */
	--color-white: #fff;

	/* ◆リンクボタン◆ */
	--btn-color: #2683d1;         /* 文字・枠・矢印色 */
	--btn-bg: #fff;               /* 背景色 */
	--btn-color-hover: #fff;      /* ホバー時文字・矢印色 */
	--btn-bg-hover: #2683d1;      /* ホバー時背景色 */

	/* ◆info◆ */
	--info-bg: #fff;              /* info背景色 */
	--info-heading: #ec6d83;      /* info見出し色 */
	--info-text: #8b4826;         /* info本文色 */

	/* ◆背景色◆ */
	--bg1: #31b7da;
	--bg2: #00a9d9;

	/* ◆カラバリ◆ */
	--color-var1: #f03852;
	--color-var2: #2683d1;
	--color-var3: #ecc417;
	--color-var4: #3cc161;
	--color-var5: #a77bcb;

	/* ◆フォント◆ */
	--font-body: 'Comfortaa', 'Noto Sans JP', 'メイリオ', 'Meiryo', sans-serif;
	--font-heading: 'Comfortaa', 'M PLUS Rounded 1c', 'Noto Sans JP', 'メイリオ', 'Meiryo', sans-serif;
	--font-rounded: 'Comfortaa', 'M PLUS Rounded 1c';

	/* ◆タイトルグラデ◆ */
	--title-gradient: linear-gradient(180deg, #fff 0%, #e5f9f0 50%, #caf9fa 100%);
}

/*======================
           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,
	body .post-content h2,
	body .post-content h3{
		margin: 0;
	}
	#campaign .pc { display: none !important; }
	#campaign .sp { display: block !important; }

	#campaign {
		margin-top: 8px; /*Tokaiロゴとの距離*/
		background: var(--color-campaign-bg);
		padding-bottom:10px;
	}
	/*-------------------------------------- 共通 */

	body #eventinfo p,
	body #eventinfo th,
	body #eventinfo td,
	body #eventinfo li,
	body #eventinfo dt,
	body #eventinfo dd{
		font-family: var(--font-body);
		font-size:14px;
		line-height:1.75em;
		font-feature-settings : "palt";
		letter-spacing:0.05em;
		color: var(--color-text);
	}
	#eventinfo h1,
	#eventinfo h2,
	#eventinfo h3,
	#eventinfo h4,
	#eventinfo h5{
		font-family: var(--font-heading);
		transform: rotate(0.05deg);
		line-height:1.4em;
		font-weight: bold;
		font-feature-settings : "palt";
	}

	#eventinfo .bg1{ background-color: var(--bg1);}
	#eventinfo .bg2{ background-color: var(--bg2);}

	#eventinfo a{
		color: var(--color-main);
	}

	/*-------------------------------------- title_area */

	#eventinfo div#title_area {
		aspect-ratio: 1 / 1.25;/* ◆表紙位置調整1◆ */
		min-height: 380px;
		background:#ddd url(https://www.crafthearttokai.mom/static/event_info/202605_cheercos/images/mainimg_sp.jpg) no-repeat center 57%;/* ◆表紙位置調整2◆ */
		background-size: 102% auto ;
		position:relative;
		text-align: center;
		padding-top: 1px;
	}
	#eventinfo div#title_area h1{
		margin: 10% 0 10%;/* ◆タイトル文字位置◆ */
		font-size: 3vw;/* ◆タイトル文字サイズ◆ */
		color: var(--color-white);
		letter-spacing: -0.05em;
	}
	#eventinfo div#title_area h1 img{
		width: 40%;
		height: auto;
		margin-bottom: 10px;
	}
	#eventinfo div#title_area h1 strong{
		font-size: 10vw;
		line-height: 1.1em;
		font-weight: 800;
		background: var(--title-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#eventinfo div#title_area h1 span{
		font-size: 0.6em;
		letter-spacing: 0.3em;
		font-weight: 700;
	}
	#eventinfo div#title_area #datecircle{
		position:absolute;
		top: 1em; left: 1em;
		width: 86px;
		height: 86px;
		border-radius:50%;
		background: var(--color-date-bg);
		display:flex;
		align-items:center;
		justify-content:center;
		font-size: 0.7em;
	}
	#eventinfo div#title_area #datecircle p{
		font-family: var(--font-rounded);
		font-weight: bold;
		font-size: 1.8em;
		line-height: 1.1em;
		color: var(--color-date);
	}
	#eventinfo div#title_area #datecircle p > span{
		font-size: 0.65em;
	}


	/*-------------------------------------- about_area */

	#eventinfo div#about_area {
		position:relative;
		border-radius: 60px 60px 0 0;
		margin-top: -20%;
		padding-bottom: 28%;
	}
	#eventinfo div#about_area .outer{
		margin: 0 8%;
	}
	#eventinfo div#about_area .box_left{
		padding: 12% 0 0;
		text-align: center;
	}
	#eventinfo div#about_area .box_left img{
		width: 80%;
		margin: 0 10% 5%;
	}
	#eventinfo div#about_area h2{
		color: var(--color-main);
		font-size: 1.5em;
		margin-bottom: 6%;
	}
	#eventinfo div#about_area p{
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		font-size: 1em;
		letter-spacing: -0.01em;
	}
	#eventinfo div#about_area .workshop_link{
		margin: 5% 6%;
	}
	#eventinfo div#about_area .workshop_link img{
		width: 100%;
	}

	/*-------------------------------------- variation_area */

	#eventinfo div#variation_area{
		position:relative;
		border-radius: 60px 60px 0 0;
		margin-top: -20%;
		padding: 60px 0 20%;
	}
	#eventinfo div#variation_area h2{
		font-size: 1.6em;
		text-align: center;
		color: var(--color-main);
		line-height: 1em;
		margin-bottom: 3%;
	}
	#eventinfo div#variation_area h2 span{
		font-size: 0.6em;
		letter-spacing: 0.1em;
		font-weight: 700;
	}
	#eventinfo div#variation_area #colors{
		margin: 0 6% 6em;
	}
	#eventinfo div#variation_area #colors .box{
	}
	#eventinfo div#variation_area #colors .box img{
		width: 100%;
		border-radius: 30px 30px 0 0;
	}
	#eventinfo div#variation_area #colors .box h3{
		width: 100%;
		text-align: center;
		line-height: 2.2em;
		border-radius: 1em;
		color: var(--color-white);
		font-size: 1.2em;
		margin: 0 0 25px;
		border-radius: 0 0 30px 30px;
	}
	#eventinfo div#variation_area #colors .box h3.color1{ background: var(--color-var1);}
	#eventinfo div#variation_area #colors .box h3.color2{ background: var(--color-var2);}
	#eventinfo div#variation_area #colors .box h3.color3{ background: var(--color-var3);}
	#eventinfo div#variation_area #colors .box h3.color4{ background: var(--color-var4);}
	#eventinfo div#variation_area #colors .box h3.color5{ background: var(--color-var5);}


	#eventinfo div#variation_area #colors + p{
		text-align: center;
		margin: 0 0 2em;
		font-size: 0.9em;
	}

	#eventinfo div#variation_area #babys{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 5%;
		gap: 1.1%;
	}
	#eventinfo div#variation_area #babys .box{
		width: 18%;
		background-color: var(--color-white);
		border-radius: 20px;
		padding: 12px 10px;
		margin-bottom: 1.1%;
	}
	#eventinfo div#variation_area #babys .box img{
		width: 100%;
	}
	#eventinfo div#variation_area #babys .box h3{
		color: var(--color-main);
		font-size: 0.6em;
		text-align: center;
		margin-top: 5px;
	}
	#eventinfo div#variation_area #babys + p{
		text-align: center;
		margin: 2em 0 0;
		font-size: 0.9em;
	}
	/*-------------------------------------- movie_area */

	#eventinfo div#movie_area{
		position:relative;
		border-radius: 60px 60px 0 0;
		margin-top: -20%;
		padding: 60px 0 28%;
		text-align: center;
	}
	#eventinfo div#movie_area h2{
		font-size: 1.7em;
		color: var(--color-main);
		margin-bottom: 30px;
		text-align: center;
		letter-spacing: -0.01em;
	}
	#eventinfo div#movie_area h2 + p{
		font-size: 1em;
		font-weight: bold;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		letter-spacing: -0.01em;
		text-align: left;
	}
	#eventinfo div#movie_area .outer{
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: space-between;
		margin: 1em 6% 0;
	}
	#eventinfo div#movie_area .box_left{
		width: 59%;
	}
	#eventinfo div#movie_area .box_right{
		width: 35%;
	}
	#eventinfo div#movie_area .box_right img{
		border-radius: 30px;
		width: 100%;
	}
	#eventinfo div#movie_area .attention{
		margin: 0 6% ;
	}
	#eventinfo div#movie_area .attention p{
		font-size: 0.8em;
		margin-top: 3em;
		text-align: left;
	}

	/*-------------------------------------- detail_area */

	#eventinfo div#detail_area{
		position:relative;
		border-radius: 60px 60px 0 0;
		margin-top: -20%;
		padding: 40px 0 20%;
	}
	#eventinfo div#detail_area h1{
		font-size: 1.2em;
		color: var(--color-main);
		margin-bottom: 2%;
		letter-spacing: -0.01em;
		text-align: center;
	}
	#eventinfo div#detail_area h1 > strong{
		font-size: 1.8em;
		line-height: 1.4em;
	}
	#eventinfo div#detail_area h1 img{
		width: 50%;
		margin-bottom: 15px;
	}
	#eventinfo div#detail_area h1 + p{
		font-size: 1.2em;
		font-weight: bold;
		line-height: 2em;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		background-color: var(--color-tag-bg);
		color: var(--color-accent);
		letter-spacing: -0.01em;
		width: 12em;
		border-radius: 1em;
		text-align: center;
		margin: 0 auto;
	}
	#eventinfo div#detail_area .outer{
		margin: 0 6%;
	}
	#eventinfo div#detail_area .box_left{
		width: 300px;
		margin: 30px auto;
	}
	#eventinfo div#detail_area .box_left img{
		width: 100%;
	}
	#eventinfo div#detail_area table{
		margin: 30px 6% 0 ;
		border-collapse: collapse;
		width: 88%;
	}
	#eventinfo div#detail_area th{
		width: 8em;
		vertical-align: top;
		line-height:1.85em;
		color: var(--color-main);
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		padding: 10px 0;
		border-bottom: 1px solid var(--color-main);
		font-weight: bold;
		font-size: 1em;
	}
	#eventinfo div#detail_area td{
		padding: 10px 0;
		border-bottom: 1px solid var(--color-main);
		font-size: 1em;
	}
	#eventinfo div#detail_area .info{
		background-color: var(--info-bg);
		border-radius: 50px;
		padding: 40px;
		margin: 10% 6%;
	}
	#eventinfo div#detail_area .info h2{
		color: var(--info-heading);
		font-size: 1.4em;
		margin-bottom: 10px;
	}
	#eventinfo div#detail_area .info p{
		color: var(--info-text);
		font-size: 1em;
	}
	#eventinfo div#detail_area p.copyright{
		text-align: center;
	}

	/*-------------------------------------- link_button */

	#eventinfo .link_button{
		margin: 25px 0 0;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
	}
	#eventinfo .link_button a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 3.4em;
		position: relative;
		background: var(--btn-bg);
		border: 2px solid var(--btn-color);
		border-radius: 2em;
		box-sizing: border-box;
		color: var(--btn-color);
		line-height: 1.3;
		font-weight: bold;
		font-size: 1.1em;
		text-align: left;
		text-decoration: none;
		transition-duration: 0.3s;
	}
	#eventinfo .link_button a:before {
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-top: 2px solid var(--btn-color);
		border-right: 2px solid var(--btn-color);
		transform: rotate(45deg);
		position: absolute;
		top: 50%;
		right: 1em;
		margin-top: -6px;
	}
	#eventinfo .link_button a:hover {
		background: var(--btn-bg-hover);
		color: var(--btn-color-hover);
	}
	#eventinfo .link_button a:hover:before {
		border-top: 2px solid var(--btn-color-hover);
		border-right: 2px solid var(--btn-color-hover);
	}
}

/*----------------------*/
/*          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,
	body .box-white,
	body .post-content{
		padding: 0 0 0;
	}
	body .inner{
		max-width: 960px;
		width: 100%;
	}
	body .inner > header,
	body .inner dl.periodText{
		display: none !important;
	}
	body .post-content p,
	body .post-content h2,
	body .post-content h3{
		margin: 0;
	}
	#campaign div.image{
		text-align:center;
	}
	#campaign .pc { display: block !important; }
	#campaign .sp { display: none !important; }
	#campaign img { display:block; }

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

	#campaign {
		background: var(--color-campaign-bg);
		padding-bottom:30px;
	}
	body #eventinfo p,
	body #eventinfo th,
	body #eventinfo td,
	body #eventinfo li,
	body #eventinfo dt,
	body #eventinfo dd{
		font-family: var(--font-body);
		font-size:14px;
		line-height:1.75em;
		font-feature-settings : "palt";
		letter-spacing:0.05em;
		color: var(--color-text);
	}
	#eventinfo h1,
	#eventinfo h2,
	#eventinfo h3,
	#eventinfo h4,
	#eventinfo h5{
		font-family: var(--font-heading);
		transform: rotate(0.05deg);
		line-height:1.4em;
		font-weight: bold;
		font-feature-settings : "palt";
	}

	#eventinfo .bg1{ background-color: var(--bg1);}
	#eventinfo .bg2{ background-color: var(--bg2);}

	#eventinfo a{
		color: var(--color-main);
	}


	/*-------------------------------------- title_area */

	#eventinfo div#title_area {
		aspect-ratio: 1 / 0.95;/* ◆表紙位置調整1◆ */
		background:#ddd url(https://www.crafthearttokai.mom/static/event_info/202605_cheercos/images/mainimg.jpg) no-repeat center 40%;/* ◆表紙位置調整2◆ */
		background-size: 100% auto ;
		position:relative;
		text-align: center;
		padding-top: 1px;
	}
	#eventinfo div#title_area h1{
		margin: 40px;
		font-size: 1.3em;
		color: var(--color-white);
	}
	#eventinfo div#title_area h1 img{
		width: 240px;
		height: auto;
		margin-bottom: 20px;
	}
	#eventinfo div#title_area h1 strong{
		font-size: 3.6em;/* ◆タイトル文字サイズ◆ */
		line-height: 1.3em;
		font-weight: 800;
		letter-spacing: -0.05em;
		background: var(--title-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	#eventinfo div#title_area h1 span{
		font-size: 0.6em;
		letter-spacing: 0.3em;
		font-weight: 700;
	}
	#eventinfo div#title_area #datecircle{
		position:absolute;
		top: 20px; left: 20px;
		width: 150px;
		height: 150px;
		border-radius:50%;
		background: var(--color-date-bg);
		display:flex;
		align-items:center;
		justify-content:center;
	}
	#eventinfo div#title_area #datecircle p{
		font-family: var(--font-rounded);
		font-weight: bold;
		font-size: 1.8em;
		line-height: 1.1em;
		color: var(--color-date);
	}
	#eventinfo div#title_area #datecircle p > span{
		font-size: 0.65em;
	}


	/*-------------------------------------- about_area */

	#eventinfo div#about_area {
		position:relative;
		border-radius: 120px 120px 0 0;
		margin-top: -20%;
		padding-bottom: 15%;
	}
	#eventinfo div#about_area .outer{
		display: flex;
		justify-content:center;
	}
	#eventinfo div#about_area .box_left{
		padding: 12% 0 0;
	}
	#eventinfo div#about_area .box_right{
		width: 40%;
		padding: 10% 0 0;
	}
	#eventinfo div#about_area .box_right img{
		width: 100%;
	}
	#eventinfo div#about_area h2{
		color: var(--color-main);
		font-size: 1.8em;
		margin-bottom: 6%;
		text-align: left;
	}
	#eventinfo div#about_area p{
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		font-size: 1.2vw;
		letter-spacing: -0.01em;
	}
	#eventinfo div#about_area .workshop_link{
		margin: 5% 12%;
	}
	#eventinfo div#about_area .workshop_link img{
		width: 100%;
	}

	/*-------------------------------------- variation_area */

	#eventinfo div#variation_area{
		position:relative;
		border-radius: 120px 120px 0 0;
		margin-top: -120px;
		padding: 100px 0 10%;
	}
	#eventinfo div#variation_area h2{
		font-size: 2em;
		text-align: center;
		color: var(--color-main);
		line-height: 1em;
		margin-bottom: 3%;
	}
	#eventinfo div#variation_area h2 span{
		font-size: 0.6em;
		letter-spacing: 0.1em;
		font-weight: 700;
	}
	#eventinfo div#variation_area #colors{
		display: flex;
		flex-wrap: wrap;
		margin: 0 12% 6em;
		justify-content:center;
		gap: 3%;
	}
	#eventinfo div#variation_area #colors .box{
		width: 48%;
		margin-bottom: 30px;
	}
	#eventinfo div#variation_area #colors .box img{
		width: 100%;
		border-radius: 30px;
	}
	#eventinfo div#variation_area #colors .box h3{
		width: 100%;
		text-align: center;
		line-height: 2em;
		border-radius: 1em;
		color: var(--color-white);
		font-size: 1.2em;
		margin-top: 15px;
	}
	#eventinfo div#variation_area #colors .box h3.color1{ background: var(--color-var1);}
	#eventinfo div#variation_area #colors .box h3.color2{ background: var(--color-var2);}
	#eventinfo div#variation_area #colors .box h3.color3{ background: var(--color-var3);}
	#eventinfo div#variation_area #colors .box h3.color4{ background: var(--color-var4);}
	#eventinfo div#variation_area #colors .box h3.color5{ background: var(--color-var5);}

	#eventinfo div#variation_area #colors + p{
		text-align: center;
		margin: 0 0 12%;
	}

	#eventinfo div#variation_area #babys{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 12%;
		gap: 2%;
	}
	#eventinfo div#variation_area #babys .box{
		width: 14%;
		background-color: var(--color-white);
		border-radius: 20px;
		padding: 15px;
		margin-bottom: 1em;
	}
	#eventinfo div#variation_area #babys .box img{
		width: 100%;
	}
	#eventinfo div#variation_area #babys .box h3{
		color: var(--color-main);
		font-size: 0.8em;
		text-align: center;
		margin-top: 3px;
	}
	#eventinfo div#variation_area #babys + p{
		text-align: center;
		margin: 2em 0 10%;
	}
	/*-------------------------------------- movie_area */

	#eventinfo div#movie_area{
		position:relative;
		border-radius: 120px 120px 0 0;
		margin-top: -120px;
		padding: 100px 0 10%;
	}
	#eventinfo div#movie_area h2{
		font-size: 1.8em;
		color: var(--color-main);
		margin-bottom: 3%;
		text-align: left;
	}
	#eventinfo div#movie_area h2 + p{
		font-size: 1.1em;
		font-weight: bold;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		margin: 2em 0;
		letter-spacing: -0.01em;
	}
	#eventinfo div#movie_area .outer{
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: space-between;
		margin: 0 12% 12%;
	}
	#eventinfo div#movie_area .box_left{
		width: 57%;
	}
	#eventinfo div#movie_area .box_right{
		width: 36%;
	}
	#eventinfo div#movie_area .box_right img{
		border-radius: 30px;
		width: 100%;
	}
	#eventinfo div#movie_area .attention p{
		font-size: 0.8em;
		margin-top: 3em;
	}

	/*-------------------------------------- detail_area */

	#eventinfo div#detail_area{
		position:relative;
		border-radius: 120px 120px 0 0;
		margin-top: -130px;
		padding: 100px 0 10%;
	}
	#eventinfo div#detail_area h1{
		font-size: 1.2em;
		color: var(--color-main);
		margin-bottom: 3%;
		letter-spacing: -0.01em;
	}
	#eventinfo div#detail_area h1 > strong{
		font-size: 1.8em;
		line-height: 1.4em;
	}
	#eventinfo div#detail_area h1 img{
		width: 240px;
		margin-bottom: 1em;
	}
	#eventinfo div#detail_area h1 + p{
		font-size: 1.2em;
		font-weight: bold;
		line-height: 2em;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		background-color: var(--color-tag-bg);
		color: var(--color-accent);
		letter-spacing: -0.01em;
		width: 12em;
		border-radius: 1em;
		text-align: center;
	}
	#eventinfo div#detail_area .outer{
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: space-between;
		margin: 0 12%;
		gap: 3%;
	}
	#eventinfo div#detail_area .box_left{
		width: 50%;
		border-radius: 30px;
	}
	#eventinfo div#detail_area .box_right{
		flex:1;
	}
	#eventinfo div#detail_area .box_right_center{
		flex:1;
		text-align: center;
	}
	#eventinfo div#detail_area .box_right_center h1 + p{
		 margin:0 auto;
	}
	#eventinfo div#detail_area .box_left img{
		width: 100%;
	}
	#eventinfo div#detail_area table{
		margin: 30px auto 0 ;
		border-collapse: collapse;
		width: 65%;
	}
	#eventinfo div#detail_area th{
		width: 150px;
		vertical-align: top;
		line-height:1.85em;
		font-size: 14px;
		color: var(--color-main);
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
		padding: 10px 0 10px 10px;
		border-bottom: 1px solid var(--color-main);
		font-weight: bold;
	}
	#eventinfo div#detail_area td{
		padding: 10px 0;
		border-bottom: 1px solid var(--color-main);
	}
	#eventinfo div#detail_area .info{
		background-color: var(--info-bg);
		border-radius: 50px;
		padding: 5%;
		margin: 5% 12%;
	}
	#eventinfo div#detail_area .info h2{
		color: var(--info-heading);
		font-size: 1.4em;
		margin-bottom: 1em;
	}
	#eventinfo div#detail_area .info p{
		color: var(--info-text);
	}
	#eventinfo div#detail_area p.copyright{
		text-align: center;
	}

	/*-------------------------------------- link_button */

	#eventinfo .link_button{
		margin: 25px 0 0;
		font-family: var(--font-rounded);
		transform: rotate(0.05deg);
	}
	#eventinfo .link_button a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 4em;
		position: relative;
		background: var(--btn-bg);
		border: 2px solid var(--btn-color);
		border-radius: 2em;
		box-sizing: border-box;
		color: var(--btn-color);
		line-height: 1.3;
		font-weight: bold;
		font-size: 1.1em;
		text-align: left;
		text-decoration: none;
		transition-duration: 0.3s;
	}
	#eventinfo .link_button a:before {
		content: '';
		width: 8px;
		height: 8px;
		border: 0;
		border-top: 2px solid var(--btn-color);
		border-right: 2px solid var(--btn-color);
		transform: rotate(45deg);
		position: absolute;
		top: 50%;
		right: 1em;
		margin-top: -6px;
	}
	#eventinfo .link_button a:hover {
		background: var(--btn-bg-hover);
		color: var(--btn-color-hover);
	}
	#eventinfo .link_button a:hover:before {
		border-top: 2px solid var(--btn-color-hover);
		border-right: 2px solid var(--btn-color-hover);
	}

}