/*################################################################################
グッズ専用CSS
################################################################################*/
body:before{
	content: "";
	width: 100%;
	height: 100vh;
	display: block;
	position: fixed;
	top:0;
	left: 0;
	background-image: url("../../img/bg_sq.png");
	background-size: 2.5em auto;
}
.contentsBox{
	width: calc(100% - 1em);
	padding: 3em 0;
	max-width: 1000px;
}
ul.notes{
	padding: 1em;
	border-top: var(--blue) 1px dashed;
}
.itemWrap{
	padding: 1em 1em 3em;
	margin: 0 auto;
}
.txt{
	padding: 1vw;
	text-align: center;
}
/*サイド青アイコン見出し*/
.blueIconMidashi{
	text-align: center;
	margin-bottom: 0.5em;
}
.blueIconMidashi span{
	position: relative;
	padding:0.5em 1em;
	display: inline-block;
}

/*商品名*/
h1 {
		margin-bottom: 0.5em;
}
h1 span{
	color: #fff;
	background-color:var(--blue);
	padding: 0.5em 1em;
	width: 100%;
	display: block;
	font-weight: bold;
	letter-spacing: 1px;
	border-radius: 50px;
	position: relative;
	overflow: hidden;
	border: var(--blue) 2px solid;
	text-shadow: none;
	text-align: center;
}
h1 span:before{
	content: "";
	width: 1.5em;
	top:0;
	bottom: 0;
	position: absolute;
	display: block;
	left: 0;
	background-position:left center;
	background-repeat: no-repeat;
	background-size:contain;

	background-image: url("../../img/sibe_icon_w.png");
}
h1 span:after{
	content: "";
	width: 1.5em;
	top:0;
	bottom: 0;
	position: absolute;
	display: block;
	right: 0;
	background-position:left center;
	background-repeat: no-repeat;
	background-size:contain;
	transform: scale(-1,1);

	background-image: url("../../img/sibe_icon_w.png");
}

h2{
	background: linear-gradient(90deg,#2a4073,#6174a0);
	padding: 0.5em;
	color: #fff;
	border-radius: 6px;
	position: relative;
	margin-bottom: 0.3em;
	
}
h2:before{
	content: "";
	width: 5em;
	top:0;
	bottom: 0;
	right: 0;
	background-image: url("../../img/img_lt.png");
	background-position: left top;
	background-repeat: no-repeat;
	transform: scale(-1,1);
	position: absolute;
	display: block;
	background-size: contain;
	
}

table{
	text-align: left;
}
/*画像*/
.img{
	text-align: center;
	padding:0;
	background-color:#fff;
   
}
.img.defo img{
	width: 70%;
	
}
strong{
	display: block;
	background-color: var(--blue);
	color: #fff;
	border-radius: 6px;
	font-weight: 400;
	padding: 0.5em;
}
.txtArea{
	padding: 0.5em 0;
}
.txtArea .txt{
	padding: 0.5em;
	text-align: left;
}
.setBox{
	padding: 1vw 1vw 2vw;
	position: relative;
	z-index: 3;
	margin-bottom: 0em;
	text-align: center;
}
.large .grid_box{
	border-radius: 10px;
	border:var(--blue) 2px solid;
	background-color: #fff;
}
.colorTxtBox{
	background-color:#fff;
	margin-bottom: 0.5em;
	padding: 0.5em;
	text-align: left;
	border-radius: 10px;
	border:var(--blue) 2px solid;
}
.large .colorTxtBox{
	border: 0;
	padding: 0;
}
.storyBox{
	padding: 0.5em;
	border-radius: 6px;
}
.large .storyBox{
	padding: 0;
}
.story{
	padding: 0.5em;
}
.story_midashi{
	display: inline-block;
	padding:0.2em 0.5em;
	color: #fff;
	background-color: var(--blue);
	border-radius: 6px;
	font-size: 0.9em;

}
/*グリッドBOXの設定--------------------*/
/*.defo_grid{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b" ;
	column-gap: 1vw;
	row-gap: 1vw;
}*/
.ani_limi{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b" 
    "c d";
	column-gap: 1vw;
	row-gap: 1vw;
}
.ani_digi{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b" ;
	column-gap: 1vw;
	row-gap: 1vw;
}
.str_set{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a a" 
    "b c";
	column-gap: 1vw;
	row-gap: 1vw;
}
.str_set_sp{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a a" 
    "c d"
	"b e";
	column-gap: 1vw;
	row-gap: 1vw;
}
.str_set_sp_ex{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a c" 
    "d e"
	"b f";
	column-gap: 1vw;
	row-gap: 1vw;
}

.eb_set{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b"
	"c d";
	column-gap: 1vw;
	row-gap: 1vw;
}

.sof_set{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b" ;
	column-gap: 1vw;
	row-gap: 1vw;
}
.goo_set{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a a"
	"b c";
	column-gap: 1vw;
	row-gap: 1vw;
}
.goo_set_sp{
	display: grid;
	grid-template-columns:repeat(2, 1fr);
	grid-template-areas:
	"a b"
	"c d";
	column-gap: 1vw;
	row-gap: 1vw;
}
/*グリッドの設定-------------------*/
.grid_box{
	border: var(--gold) 1px solid;
	display: grid;
	
}
.box_a,.box_a_center{grid-area: a;}
.box_b,.box_b_center{grid-area: b;}
.box_c,.box_c_center{grid-area: c;}
.box_d,.box_d_center{grid-area: d;}
.box_e,.box_e_center{grid-area: e;}

.grid_box.box_a_center,
.grid_box.box_b_center,
.grid_box.box_c_center,
.grid_box.box_d_center,
.grid_box.box_e_center{align-items: center;}

/*枠内ポップアップ*/
.popBt{
	cursor: pointer;
	display: block;
	text-align: center;
	background-color: #E3191C;
	color: #fff;
	border-radius: 6px;
	padding: 1em;
	width: calc(100% - 1em);
	margin: 1em auto 0.5em;
}
.popWrap{
	display: none;
	position: absolute;
	top:0;
	left: 0;
	bottom: 0;
	width: 100%;
	opacity: 0;
	z-index: 900;
	background:rgba(0,0,0,0.3);
	padding: 3em 1em;
	cursor: pointer;
	box-sizing: border-box;
}
.popWrap.show{
	
	display: grid;
	align-items: center;
	/*justify-content: center;*/
	opacity: 1;
}
.popWrap .popBox{
	padding: 2em;
	border: #900 2px solid;
	background-color: #fff;
	position: relative;
	cursor: default;
	
}
.popWrap .close{
	width: 2em;
	height: 2em;
	position: absolute;
	z-index: 3;
	right: 0;
	top:0;
	background-image: url("../../img/controls_close.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 70% auto;
	cursor: pointer;
}
.popTitle{
	text-align: center;
	background-color: #E3191C;
	color: #fff;
	padding: 0.5em;
	font-size: max(0.9em,10px);
}
.popTxt{
	padding: 0.5em 0;
	font-size: max(0.9em,10px);
}
/*################################################################################
  media query
################################################################################*/

/* タブレット */
@media screen and (max-width: 786px) {

/*商品名*/
h1 {
	line-height: 1.3em;
}
/*.defo_grid,*/
	.ani_limi,
	.ani_digi,
	.str_set,
	.str_set_sp,
	.str_set_sp_ex,
	.eb_set,
	.eb_set_sp,
	.sof_set,
	.goo_set,
	.goo_set_sp{
	display: block;
	column-gap: 1vw;
	row-gap: 1vw;
}
.grid_box{
	margin-bottom: 0.5em;
}
h1 span:before{
	content: "";
	width: 1.2em;
	top:0;
	bottom: 0;
	position: absolute;
	display: block;
	left: 0;
	background-position:right center;
	background-repeat: no-repeat;
	background-size:cover;

	background-image: url("../../img/sibe_icon_w.png");
}
h1 span:after{
	content: "";
	width: 1.2em;
	top:0;
	bottom: 0;
	position: absolute;
	display: block;
	right: 0;
	background-position:right center;
	background-repeat: no-repeat;
	background-size:cover;
	transform: scale(-1,1);

	background-image: url("../../img/sibe_icon_w.png");
}

}

/* スマホ */
@media screen and (max-width: 480px) {	

.img.defo img{
	width: 100%;
	
}

.popWrap{
	padding: 1em 0.5em;

}

.popWrap .popBox{
	padding:2em 1em;
	
}

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

	.popWrap{
		padding:0.5em;

	}
	.popTitle{
		font-size: 3.3vw;
	}
	.popTxt{
		padding: 0.5em 0;
		font-size: 3.3vw;
	}
}
@media (min-width: 1451px) {
	body{
		font-size:clamp(14px, 1.5vw, 16px);
		line-height: 1.5em;
	}
}