@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) {

	.area.gray {

		background-color: #693c24;

		margin-top:1px;

	}

	html body .page-single .content >section{

		margin-top:0;

	}

	html body .page-single .post-content{

		padding-top:0;

	}

	html body .page-single .post-content .content-main{

		padding-top:0;

	}

	html body .single-news .content-news{

		padding:0;

	}

	body .single-news .contentWrap-style1{ /*外枠消す*/

		border:0px;

		border-radius:0;

	}

	body .single-news .content-news:before { /*ピン消す*/

		display: none !important;

	}

	body .page-single .header{

		display: none !important;

	}

	body .single-news dl.box-date{

		display: none !important;

	}

	.content img {

		width: 100%;

		height: auto;

		vertical-align: top;

	}

	#campaign a {

		text-decoration: underline;

		color: #b26e0d;

	}

	#campaign .pc { display: none !important; }





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



	#campaign {

		background-color: #fbf1dc;

		background-image: url(images/bg.png);

		background-size: 110%;

		background-position: 50% 50%;

	}

	#campaign strong{

		font-weight: bold;

	}



	/*-------------------------------------- 共通 */



	body #campaign p,

	body #campaign th,

	body #campaign td,

	body #campaign li,

	body #campaign dt,

	body #campaign dd{

		font-family: 'Work Sans','Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

		font-size:14px;

		line-height:1.75em;

		font-feature-settings : "palt";

		letter-spacing:0.03em;

		color: #693c24;

	}

	#campaign h1,

	#campaign h2,

	#campaign h3,

	#campaign h4,

	#campaign h5{

		font-family: 'Work Sans','Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

		line-height:1.4em;

		font-weight: bold;

		color: #4e2917;

	}



	#campaign .outer {

		margin: 50px 7vw;

	}

	#campaign .outer h1{

		color: #fbf3b5;

		width: 100%;

		line-height: 1.8em;

		background-color:#9fadf4;

		border-radius: 1.2em;

		text-align: center;

		font-size: 1.2em;

		margin-bottom: 40px;

	}



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



	#campaign header h1{

		margin-bottom: 40px;

	}

	#campaign header p{

		margin: 15px 7vw;

	}

	#campaign header h2{

		margin : 20px 0;

	}



	/*-------------------------------------- present */



	#campaign #period h1 + p{

		font-size: 1.1em;

		font-weight: bold;

		text-align: center;

		margin-bottom: 30px;

	}



	/*-------------------------------------- present */



	#campaign #present h1 + p{

		font-size: 1em;

		font-weight: bold;

		text-align: center;

		text-decoration: underline;

	}

	#campaign #present .present_box{

		margin: 15px 0;

	}



	@keyframes fuwafuwa {

		0%, 100% {transform: translateY(0);}

		50% {transform: translateY(-20px);}

	}

	.anime-fuwafuwa {

		animation: 3s fuwafuwa infinite;

	}

	#campaign #present .present_img{

		position: relative;

		margin: 50px 0 30px;

	}

	#campaign #present .huwahuwa{ position:absolute; top:-30px; left:-15px;}

	#campaign #present .huwahuwa img{width: 100px; height: auto;}

	#campaign #present .huwahuwa2{ position:absolute; top:-10px; right:-10px;}

	#campaign #present .huwahuwa2 img{width: 96px; height: auto;}



	#campaign #present h2{

		margin: 20px 0 10px;

	}



	/*-------------------------------------- step_detail */



	#campaign #howto{

		text-align: center;

	}

	#campaign #howto .step_outer{

		margin: 50px 0 0;

		text-align: left;

	}

	#campaign #howto .step_outer h2{

		border: 1px solid #693c24;

		text-align: center;

		background-color: #fff;

		border-radius: 20px;

		padding: 5px 0;

	}

	#campaign #howto .step_detail h2 {

		text-align : center;

		color: #693c24;

		font-weight: bold;

		font-size: 1.3em;

		letter-spacing: 0.1em;

		margin-bottom: 30px;

	}

	#campaign #howto .step_detail h3 {

		color: #9fadf4;

		font-weight: bold;

		font-size: 1.1em;

		letter-spacing: 0.05em;

		margin-top: 30px;

	}

	#campaign #howto .step_detail h3 + p{

		margin: 15px 0 30px;

	}

	#campaign #howto .step_detail span{

		background-color: #fff;

		color: #9fadf4;

		padding: 2px 5px;

	}

	#campaign #howto h4{

		font-size: 1em;

		font-weight: bold;

		text-align: center;

		line-height: 1.5em;

		margin: 40px 0 20px;

	}

	#campaign #howto h4 span{

		padding: 3px 10px;

		background-color: #fffa7b;

		border-radius: 20px;

	}

	#campaign #howto h4 + p{

		display: inline-block;

		text-align: left;

		font-size: 0.8em;

	}



	/*-------------------------------------- guideline */



	#campaign #guideline{

	}

	#campaign #guideline li{

		list-style-type: disc;

		margin-left: 20px;

		margin: 0 0 5px 7vw;

		font-size: 14px;

	}

	#campaign #guideline li a{

		color: #693c24;

	}

	#campaign #guideline table{

		margin: 30px auto;

		border-collapse: collapse;

	}

	#campaign #guideline th{

		vertical-align: top;

		line-height:1.85em;

		padding: 0 0 5px;

		border-bottom: 1px solid #eddab3;

		font-weight: bold;

		display: block;

	}

	#campaign #guideline td{

		display: block;

		padding:10px 0 30px;

	}

	#campaign #guideline td p{

		text-align: left;

	}

	#campaign #guideline li > ul li{

		list-style-type: circle;

		margin-left: 40px;

	}



	/*-------------------------------------- banner */



	#campaign .banner{

		padding: 0 5vw 80px;

	}

	#campaign .banner img{

		width: 100%;

	}

}





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

/*          pc          */

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

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

	body .page-single .header{

		display: none !important;

	}

	body .single-news dl.box-date{

		display: none !important;

	}

	#campaign div.image{

		text-align:center;

	}

	#campaign a {

		text-decoration: underline;

		color: #b26e0d;

		-webkit-transition-duration: 200ms;

		-moz-transition-duration: 200ms;

		-o-transition-duration: 200ms;

		-ms-transition-duration: 200ms;

		transition-duration: 200ms;

	}

	#campaign a:hover {

		text-decoration: none;

		opacity: 0.7;

		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

		filter: alpha(opacity=70);

	}

	#campaign .pc { display: block !important; }

	#campaign .sp { display: none !important; }



	body .single-news .content-news:before { /*ピン消す*/

		display: none !important;

	}



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



	#campaign {

		background: #fbf1dc url(images/bg.png) 0 540px repeat-y;

	}

	#campaign strong {

		font-weight:bold;

	}

	/*-------------------------------------- 共通 */



	body #campaign p,

	body #campaign th,

	body #campaign td,

	body #campaign li,

	body #campaign dt,

	body #campaign dd{

		font-family: 'Work Sans','Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

		font-size:16px;

		line-height:1.75em;

		color: #693c24;

	}

	#campaign h1,

	#campaign h2,

	#campaign h3,

	#campaign h4,

	#campaign h5{

		font-family: 'Work Sans','Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','游ゴシック Medium','Yu Gothic Medium','游ゴシック体','Yu Gothic',YuGothic,'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;

		line-height:1.4em;

		font-weight: bold;

		color: #693c24;

	}

	#campaign .outer {

		margin: 70px 140px;

	}

	#campaign .outer h1{

		color: #fbf3b5;

		width: 100%;

		line-height: 2.4em;

		background-color:#9fadf4;

		border-radius: 1.2em;

		text-align: center;

		font-size: 1.5em;

		letter-spacing: 0.1em;

		margin-bottom: 40px;

	}



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



	#campaign header h1{

		margin-bottom: 50px;

	}

	#campaign header p{

		margin: 15px 160px;

	}

	#campaign header h2{

		margin : 20px 0;

	}



	/*-------------------------------------- present */



	#campaign #period h1 + p{

		font-size: 1.4em;

		font-weight: bold;

		text-align: center;

		margin-bottom: 30px;

	}



	/*-------------------------------------- present */



	#campaign #present h1 + p{

		font-size: 1.4em;

		font-weight: bold;

		text-align: center;

		text-decoration: underline;

	}

	#campaign #present .present_box{

		width: 640px;

		margin: 0 auto;

	}



	@keyframes fuwafuwa {

		0%, 100% {transform: translateY(0);}

		50% {transform: translateY(-20px);}

	}

	.anime-fuwafuwa {

		animation: 3s fuwafuwa infinite;

	}

	#campaign #present .present_img{

		position: relative;

		margin: 70px 0 30px;

	}

	#campaign #present .huwahuwa{ position:absolute; top:-30px; left:-20px;}

	#campaign #present .huwahuwa img{width: 160px; height: auto;}

	#campaign #present .huwahuwa2{ position:absolute; top:-10px; right:-10px;}

	#campaign #present .huwahuwa2 img{width: 156px; height: auto;}



	#campaign #present h2{

		font-size: 1.2em;

		margin: 20px 0 10px;

	}



	/*-------------------------------------- step_detail */



	#campaign #howto{

		text-align: center;

	}

	#campaign #howto .step_outer{

		display: flex;

		align-items: flex-start;

		width: 640px;

		margin: 50px auto 0;

		border-bottom: 1px solid #eddab3;

		text-align: left;

	}

	#campaign #howto .step_outer h2{

		width: 160px;

		border: 3px solid #693c24;

		text-align: center;

		background-color: #fff;

		border-radius: 20px;

		padding: 9px 0;

		font-size: 1.10em;

	}

	#campaign #howto .step_outer .step_detail{

		flex: 1;

	}

	#campaign #howto .step_detail {

		margin: 0 0 0 40px;

	}

	#campaign #howto .step_detail h2 {

		text-align : center;

		color: #693c24;

		font-weight: bold;

		font-size: 1.3em;

		letter-spacing: 0.1em;

		margin-bottom: 30px;

	}

	#campaign #howto .step_detail h3 {

		color: #9fadf4;

		font-weight: bold;

		font-size: 1.1em;

		letter-spacing: 0.05em;

	}

	#campaign #howto .step_detail h3 + p{

		margin: 15px 0 40px;

	}

	#campaign #howto .step_detail span{

		background-color: #fff;

		color: #9fadf4;

		padding: 2px 5px;

	}

	#campaign #howto h4{

		font-size: 1.3em;

		font-weight: bold;

		text-align: center;

		line-height: 1.5em;

		margin: 40px 0 20px;

	}

	#campaign #howto h4 span{

		padding: 2px 15px;

		background-color: #fffa7b;

		border-radius: 20px;

	}

	#campaign #howto h4 + p{

		display: inline-block;

		text-align: left;

		font-size: 0.9em;

	}



	/*-------------------------------------- guideline */





	#campaign #guideline li{

		list-style-type: disc;

		margin-left: 20px;

		margin: 0 0 5px 0;

		font-size: 14px;

	}

	#campaign #guideline li a{

		color: #693c24;

	}

	#campaign #guideline table{

		margin: 30px auto;

		border-collapse: collapse;

	}

	#campaign #guideline th{

		width: 120px;

		vertical-align: top;

		line-height:1.85em;

		padding: 17px 15px 17px 0;

		border-bottom: 1px solid #eddab3;

		font-weight: bold;

		font-size: 14px;

	}

	#campaign #guideline td{

		padding: 17px 30px;

		border-bottom: 1px solid #eddab3;

		font-size: 14px;

	}

	#campaign #guideline td span{

		font-size: 1.5em;

	}

	#campaign #guideline td strong{

		font-size: 1.1em;

		font-weight: bold;

	}

	#campaign #guideline td p{

		text-align: left;

	}

	#campaign #guideline li > ul li{

		list-style-type: circle;

		margin-left: 40px;

	}





	/*-------------------------------------- banner */



	#campaign .banner{

		padding: 0 50px 80px;

	}

	#campaign .banner img{

		width: 100%;

	}

}