@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Zen+Old+Mincho&display=swap');
/*======================
					 mb					 
======================*/
@media screen and (max-width: 768px) {
	/* --------- 調整・消去 --------- */
	body .box-white{/*全体背景*/
		background-color: #f7eed3;
	}
	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;
	}
	#topic .pc { display: none !important; }
	#topic .sp { display: block !important; }


	/*------------------------
					 個別Style				
	------------------------*/

	#topic #contentDetail {
		color: #4b3a25;
		padding-bottom: 10px;
	}
	body #topic p,
	body #topic th,
	body #topic td,
	body #topic li,
	body #topic dt,
	body #topic dd{
		font-size:14px;
		line-height:1.75em;
		color: #4b3a25;
	}
	#topic h2,
	#topic h3,
	#topic h4,
	#topic h5{
		font-family: "Zen Maru Gothic";
		line-height:1.4em;
		font-feature-settings : "palt";
		color: #4b3a25;
		margin: 0;
	}
	#topic p{
		line-height:2em;
		margin:0 0 15px 0;
		font-size:14px;
	}
	/*-------------------------------------- header */

	#topic header {
		margin: 0 auto 10%;
	}
	#topic header p{
		margin: 7% 5%;
	}

	/*-------------------------------------- product */

	#topic .mold{
		padding: 12% 0;
		margin-bottom: 0;
	}
	#topic #hole{
		background: #fb8e48;
		background: linear-gradient(153deg,rgba(250, 160, 100, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(230, 237, 135, 1) 100%);
	}
	#topic #shaka {
		background: #E6ED87;
		background: linear-gradient(153deg,rgba(219, 227, 116, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(172, 230, 228, 1) 100%);
	}
	#topic #deco {
		background: #ACE6E4;
		background: linear-gradient(153deg,rgba(153, 218, 216, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(250, 200, 167, 1) 100%);
	}

	#topic .outer{
	}
	#topic div.itembox{
		border-radius: 50px;
		background-color: #fff;
		padding: 7% 7% 3%;
		margin: 5%;
	}
	#topic .mold h2{
		font-family: "Gloock","Zen Maru Gothic";
		font-size: 2em;
		line-height: 1em;
		color: #fff;
		margin-bottom: 12%;
	}
	#topic .mold h2 > span{
		font-size: 0.4em;
		letter-spacing: 0.45em;
	}


	#topic div.itembox .text-box{
		flex:1;
	}
	#topic div.itembox .img-box{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		gap: 1.5%;
	}
	#topic div.itembox .mainimg{
		flex: 0 0 100%;
	}
	#topic div.itembox .subimg{
		flex:  0 32%;
		margin-top: 1.5%;
	}

	#topic .img-box .mainimg img{
		width:100%;
		height:auto;
		border-radius: 30px;
	}
	#topic .img-box .subimg img{
		width: 100%;
		height:auto;
		border-radius: 20px;
	}

	#topic .mold h3{
		font-size: 0.9em;
		line-height: 0.9em;
		font-weight: bold;
		margin: 20px 0 10px;
		letter-spacing: 0em;
	}
	#topic .mold h3 b{
		font-size: 1.3em;
		font-family: "Zen Maru Gothic";
		font-weight: 600;
	}
	#topic #hole div.itembox h3{ color: #fb8e48;}
	#topic #deco div.itembox h3{ color: #8ddcd9;}
	#topic #shaka div.itembox h3{ color: #dbe374;}

	#topic .mold .jancord{
		color: #999;
		font-size: 0.85em;
		text-align: center;
		margin: 0;
	}
	#topic .mold .price{
		text-align: right;
	}
	#topic .mold .price span{
		font-size: 1.5em;
	}

}

/*======================
					 pc					
======================*/
@media print, screen and (min-width: 769px) {
	/* --------- 調整・消去 --------- */
	body .box-white{/*全体背景*/
		background-color: #f7eed3;
	}
	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%;
		max-width: 1480px;
	}
	body .post-content p{
		margin: 0;
	}
	#topic .pc { }
	#topic .sp { display: none !important; }

	/*------------------------
					 個別Style				
	------------------------*/

	#topic #contentDetail {
		color: #4b3a25;
	}
	body #topic p,
	body #topic th,
	body #topic td,
	body #topic li,
	body #topic dt,
	body #topic dd{
		font-size:14px;
		line-height:1.75em;
		color: #4b3a25;
	}
	#topic h2,
	#topic h3,
	#topic h4,
	#topic h5{
		font-family: "Zen Maru Gothic";
		line-height:1.4em;
		font-feature-settings : "palt";
		color: #4b3a25;
		margin: 0;
	}
	#topic p{
		line-height:2em;
		margin:0 0 15px 0;
		font-size:14px;
	}
	/*-------------------------------------- header */

	#topic header {
		max-width: 960px;
		margin: 0 auto;
	}
	#topic header p{
		margin: 5%;
	}

	/*-------------------------------------- product */

	#topic .mold{
		padding: 7% 0;
		margin-bottom: 0;
	}
	#topic #hole{
		background: #fb8e48;
		background: linear-gradient(153deg,rgba(250, 160, 100, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(230, 237, 135, 1) 100%);
	}
	#topic #shaka {
		background: #E6ED87;
		background: linear-gradient(153deg,rgba(219, 227, 116, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(172, 230, 228, 1) 100%);
	}
	#topic #deco {
		background: #ACE6E4;
		background: linear-gradient(153deg,rgba(153, 218, 216, 1) 0%, rgba(247, 238, 211, 1) 68%, rgba(250, 200, 167, 1) 100%);
	}

	#topic .outer{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		min-height: 0;
		gap: 1% 2%;
		width: 92%;
		max-width: 920px;
		margin: 0 auto 7%;
	}
	#topic div.itembox{
		border-radius: 80px;
		background-color: #fff;
		padding: 7% 7% 3%;
	}
	#topic .mold h2{
		font-family: "Gloock","Zen Maru Gothic";
		font-size: 2.5em;
		line-height: 1em;
		color: #fff;
		margin-bottom: 5%;
	}
	#topic .mold h2 > span{
		font-size: 0.4em;
		letter-spacing: 0.45em;
	}


	#topic div.itembox .text-box{
		flex:1;
	}
	#topic div.itembox .img-box{
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		gap: 1.5%;
	}
	#topic div.itembox .mainimg{
		flex: 0 0 100%;
	}
	#topic div.itembox .subimg{
		flex:  0 32%;
		margin-top: 1.5%;
	}

	#topic .img-box .mainimg img{
		width:100%;
		height:auto;
		border-radius: 60px;
	}
	#topic .img-box .subimg img{
		width: 100%;
		height:auto;
		border-radius: 20px;
	}

	#topic .mold h3{
		font-size: 1.2em;
		line-height: 0.9em;
		font-weight: bold;
		margin: 20px 0 10px;
	}
	#topic .mold h3 b{
		font-size: 1.4em;
		font-family: "Zen Maru Gothic";
		font-weight: 600;
	}
	#topic #hole div.itembox h3{ color: #fb8e48;}
	#topic #deco div.itembox h3{ color: #8ddcd9;}
	#topic #shaka div.itembox h3{ color: #dbe374;}

	#topic .mold .jancord{
		color: #999;
		font-size: 0.9em;
		text-align: center;
		margin: 0;
	}
	#topic .mold .price{
		text-align: right;
	}
	#topic .mold .price span{
		font-size: 1.5em;
	}



}