@charset "utf-8";

@media screen and ( min-width:768px ) { /* PC ==================== */
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
}

.goods h3{
	font-size: 120%;
	margin:5px 0;
	text-align: center;
}
iframe{
	width:100%;
	aspect-ratio: 16 / 9;
}

.bg-character{
	top:0;

}
.content-footer{
	z-index: 4;
}
.content-blue-bg,
.content-red-bg,
.content-yellow-bg{
  width:100%;
  padding:20px 30px 30px 30px;
  border-radius: 20px;
  position: relative;
}
.content-blue-bg{
  background-color: #07587c;
}
.content-red-bg{
  background-color: #c8002a;
}
.content-yellow-bg{
  background-color: #ffae00;
}

@media screen and ( min-width:768px ) { /* PC ==================== */
	.title-left h3{
	width:95%;
	margin-bottom:5px;
	float: left;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
	.title-left h3{
	width:100%;
	margin-bottom:5px;
}
}


h4{
	text-align:center;
	font-weight:bold;
	font-size:150%;
	padding:30px 0 10px 0;
	border-bottom: 1px solid #fff;
	margin:0 10px 10px 10px;
}

.goods{
	margin-top:20px;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.goods-coment{
	width:70%;
	float: left;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
	.goods-coment{
}
}

.goods-coment h3{
	padding-top:15px;
	font-size: 120%;
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.goods-coment p{
	padding-right:20px;
	margin-top:10px;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
	.goods-coment p{
	margin-top:10px;
}
}
@media screen and ( min-width:768px ) { /* PC ==================== */
	.goods-coment-img{
	width:30%;
	float: left;
}
}
@media screen and ( max-width:767px ) { /* SP  ==================== */
	.goods-coment-img{
		margin-top:10px;
}
}

@media screen and ( min-width:768px ) { /* PC ==================== */

/* ITEM LIST ==================== */
.item-list-box{
	width:100%;
}
.item-list-box h5{
	clear:both;
	width:100%;
	margin:10px auto 5px;
	border-left:5px solid #de0000;
	text-indent:5px;
}
.item-list-box h5.farst_lineup{
	margin-top:0 !important;
}

.item-list-box .item-card-box,
.swiper-wrapper{
	width:98%;
	margin:0 auto;
}
.swiper-item-1column1{
	overflow: hidden;
}

.item-card{
  margin: 2px 2px;
  width: calc(20% - 4px);
	float: left;
}
.item-card:nth-child(4n+1){
	margin-right: 2px;
}
.item-card:nth-child(5n){
	float: left;
}

.item-list-box figure {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.item-list-box figcaption {
	position: absolute;
	bottom: -22px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 65px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	display:block;
	padding:3px !important;
	line-height:1.2;
	color:#fff;
}
.item-list-box figure:hover figcaption {
	bottom: 0;
	color:#fff;
}
}


@media screen and ( max-width:767px ) { /* SP  ==================== */
/* ITEM LIST ==================== */
.item-list-box{
	width:100%;
}
.item-list-box h5{
	clear:both;
	width:100%;
	margin:10px auto 5px;
	border-left:5px solid #de0000;
	text-indent:5px;
}
.item-list-box h5.farst_lineup{
	margin-top:0 !important;
}


.item-list-box .item-card-box,
.swiper-wrapper{
	width:98%;
	margin:0 auto;
}
.swiper-item-1column1{
	overflow: hidden;
}

.item-card{
  margin: 2px 2px;
  width: calc(50% - 4px);
	float: left;
}
.item-card:nth-child(2n+1){
	margin-right: 2px;
}
.item-card:nth-child(2n){
	float: right;
}


.item-lineup{
	margin:0 auto;
}
.item-lineup div{
	float:left;
	margin:0;
}
@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
.item-lineup{
	width:316px;
}
.item-lineup div{
	width:158px !important;
}
}
@media only screen and (orientation : landscape) { /*横向きの際に適用*/
.item-lineup{
	width:560px;
}
.item-lineup div{
	width:140px !important;
}
}
@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
.swiper-item-1column1,
.swiper-item-1column2,
.swiper-item-1column3,
.swiper-item-2column{
	width:318px;
	margin:0 auto;
	overflow:hidden;
}
.item-list-box .swiper-wrapper div{
	width:157px !important;
}
}
@media only screen and (orientation : landscape) { /*横向きの際に適用*/
.swiper-item-1column1,
.swiper-item-1column2,
.swiper-item-1column3,
.swiper-item-2column{
	width:564px;
	margin:0 auto;
	overflow:hidden;
}
.item-list-box .swiper-wrapper div{
	width:141px !important;
}
}
.item-list-box .swiper-wrapper div a{
	z-index:9998;
}
.item-list-box figure {
	position: relative;
	overflow: hidden;
	width: 100%;
}
.item-list-box figcaption {
	position: absolute;
	bottom: -20px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 63px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	display:block;
	padding:3px !important;
	line-height:1.2;
	color:#fff;
}
.item-list-box figure:hover figcaption {
	bottom: 0;
	color:#fff;
}
}