@charset "utf-8";
/* CSS Document */


/* 共通要素
----------------------------------------------------------- */
* {
	margin:0;
	padding:0;
}

body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333333;
	background-color: #b20d30/*#FFFFFF*/;/*背景カラーは一つ目のcolumnと同色にする必要あり（高さ取得で余裕を持たせているため、指定しないと白い空白が出る）
	font-size: /*100%*/;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
}

html {
	overflow-y:scroll;
}

h1 {
	font-size: 10vw;
	font-weight: bold;
	display: inline-block;
	line-height: 1 !important;
	font-family: 'Yeseva One', cursive;
	color: #ffd700;
	background: -webkit-linear-gradient(-45deg, #c9a849, #fff492, #ffffc1, #fad56a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

h1,h2,h3,h4,h5,h6 {
}

/*p,li,dt,dl {
	line-height:1.6;
}*/
/*p {
	margin:0 0 1em 0;
}*/
li {
	list-style-type:none;
}
img {
	border:0;
}
address {
	font-style:normal;
}

@media screen and (min-width: 731px) {
h1 {
	font-size: 6vw !important;
}
}

/* clearfix要素
----------------------------------------------------------- */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/* Link Color 今回は個別指定のため消した
----------------------------------------------------------- */
/*a:link {
	color:#078D00;
	text-decoration:none;
}
a:visited {
	color:#189B12;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
a:active {
	color:#666;
}*/



/* 商品のコンテナ 
----------------------------------------------------------- */
.eventbox {
	width: 100%;
}

.photo-container {
	display: flex;
	display: -webkit-flex;/*IE用*/
	padding:3vw 0 10vw;
	margin: 0 3vw;
	flex-wrap :wrap;
}

.photobox {
	width: calc(50% - 2vw);
	background-color: #FFFFFF;
	margin: 0 auto 2vw;
	position: relative;
	display: flex;
	flex-direction: column;/*画像サイズ混在対策-文字の枠内下詰め*/
	justify-content: space-between;
	display: -webkit-flex;/*IE用*/
	-webkit-flex-direction: column;/*IE用*/
	-webkit-justify-content: space-between;/*IE用*/
}

/*photobox内にリンクを入れるためのcss
…flexboxで作られたブロック全体にaタグでかこうと
aタグはinline要素なのでflexboxが効かなくなる*/
.photobox a{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.photobox a,a:active, a:hover {
	text-decoration: none;
	color: inherit;
}

.discount-rate-block {
	position: absolute;
	top: 1vw;
	left: 1vw;
	width: 14vw;
}

.discount-rate-block img {
	max-width: 100%;
}

.photo-block {
	padding: 2vw;
	min-height: 0%;/*flexの子要素にmin-height:0%;を付けないとIEの表示が崩れる*/
}

.photo-block img{
	max-width: 100%;
}

.word-block {
	line-height: 1.5;
	padding: 0 2vw 2vw;
	min-height: 0%;
}

.item-title {
	text-align: center;
	font-size: 2.6vw;
	line-height: 1.4 !important;
}

.recommended-words {
	text-align: center;
	color: /*#FF0000*/ #C90404;
	font-size: 2.4vw;
	font-weight:bold;
}

.price-words {
	color: /*#FF0000*/ #C90404;
	font-size: 6vw;
	text-align: right;
	font-weight: bold;
}

/*
以下discount-rate-words不採用。プライスの左に%表記用
（プライス表示が小さくなるので不採用）
       <li class="price-words">
       <span class="discount-rate-words">
       30% OFF
       </span>
       1,255,000円
       </li> 
*/
.discount-rate-words {
	color: /*#FF0000*/ #C90404;
	font-size: 1.4vw;
	font-weight: normal !important;
}


/* 731px以上に適用されるCSS（PC用） */
@media screen and (min-width: 731px) {
.photo-container {
	margin: 0 auto;
	max-width:1000px;
}

.photobox {
	width: calc(33% - 2vw);
	margin: /*0 auto 2vw;*//*0 1vw 2vh !important;*//*これにすれば左詰め可能⇒*/ 0 1vw 2vh;
}

.discount-rate-block {
	width: 7vw;
}

.photo-block {
	padding: 1.0vw;
}

.word-block {
	line-height: 1.1;
	padding: 0 1vw 1vw;
}

.item-title {
	font-size: 1.3vw;
	line-height: 1.4 !important;
}

.recommended-words {
	font-size: 1.5vw;
	line-height:1.4;
}

.price-words {
	font-size: 3.1vw;
}
}

/* 1367px以上に適用されるCSS（PC大画面用） */
@media screen and (min-width: 1367px) {
.discount-rate-block {
    width: 5vw;
}

.price-words {
	font-size: 2.0vw;
}
}

/*シリーズごとの背景色*/
.column-1{
	background: #b20d30;
}

.column-2{
	background: #e26b0b;
}

.column-3{
	background: #e9d758;	
}

.column-4{
	background: #79c99e;	
}

.column-5{
	background: #2978a0;
}

.column-6{
	background: #b7245c;
}

.column-7{
	background: #ed1c24;	
}

.column-8{
	background: #ef946c;	
}

.column-9{
	background: #048fa4;
}

.column-10{
	background: #508484;
}

.column-11{
	background: #e53d00;	
}

.column-12{
	background: #66101f;	
}

.column-13{
	background: #b20d30;
}

.column-14{
	background: #fe7f2d;
}

.column-15{
	background: #e9d758;	
}

.column-16{
	background: #79c99e;	
}

.column-17{
	background: #2978a0;
}

.column-18{
	background: #b7245c;
}

.column-19{
	background: #ed1c24;	
}

.column-20{
	background: #ef946c;	
}

.column-21{
	background: #048fa4;
}

.column-22{
	background: #508484;
}

.column-23{
	background: #e53d00;	
}

.column-24{
	background: #66101f;	
}

.series{
	line-height: 2.4;
	font-size: 2.6vw;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	padding: 0 3%;
}

@media screen and (min-width: 731px) {
.series{
	font-size: 1.5vw;
}
}



/*シリーズごとのタイトル用背景色*/
.s-1{
	background: #8f011f;
}

.s-2{
	background: #cf4900;
}

.s-3{
	background: #d7bd08;
}

.s-4{
	background: #26a561;
}

.s-5{
	background: #135e84;
}

.s-6{
	background: #991145;
}

.s-7{
	background: #b40910;
}

.s-8{
	background: #cf5d2a;
}

.s-9{
	background: #0c5675;
}

.s-10{
	background: #196464;
}

.s-11{
	background: #b13102;
}

.s-12{
	background: #42040f;
}

.s-13{
	background: #8f011f;
}

.s-14{
	background: #c3540d;
}

.s-15{
	background: #d7bd08;
}

.s-16{
	background: #26a561;
}

.s-17{
	background: #135e84;
}

.s-18{
	background: #991145;
}

.s-19{
	background: #b40910;
}

.s-20{
	background: #cf5d2a;
}

.s-21{
	background: #0c5675;
}

.s-22{
	background: #196464;
}

.s-23{
	background: #b13102;
}

.s-24{
	background: #42040f;
}



/* header要素
------------------------------------------*/
.announcement {
	background-color: #333333;
	color: #FFFFFF;
	text-align: center;
	font-size: /*1.8vw*/2.4vw;
	line-height: 3.4;
	font-weight: bold;
}

.announcement a{
	text-decoration:none;
	color: #FFFFFF;
}

.announcement a:active,a:hover{
	text-decoration:none;
	/*color: #FFFF00;*/
}

.sitelogo {
	width:100%;
	background-color: #e06a01;
	text-align:center;
}

.sitelogo a{
	/*display: inline-block;*/
}

.sitelogo img {
	max-width:15%;/*ideale:15%,tavola20%*/
	padding:1vw 0;
}



/*サイトヘッダーブランド一覧
------------------------------------------*/
.site-header{
	/*background: #fff;*/
	/*display: flex;*/
	/*justify-content: space-between;*/
	/*padding: 20px;*/
	position: absolute;
	width: 100%;
	z-index: 99;
	margin-bottom:1vh;
	top:0;
}

.header-change{
	/*background: #333;*/
	/*display: flex;*/
	/*justify-content: space-between;*/
	/*padding: 20px;*/
	position: fixed;
	/*top: -200px;*/
	transition: .5s;
	width: 100%;
	z-index:98;
	top:0;
}
.header-change.show{
	top: 0;
}
.header-change .headgnav__menu__item a{
	color: #fff;
	text-decoration: none;
}

.headgnav__menu{
	margin: 0 2vw 1vw;
	text-align: center;
	line-height: 1 !important;
	display: flex;
	display: -webkit-flex;
	flex-wrap :wrap;
	justify-content: space-between;
}

.headgnav__menu li{
	width: calc(25% - 1vw);
	padding:0.2vh 0 !important;
}

.headgnav__menu__item{
	
}
.site-header .headgnav__menu__item a{
	color: #333;
	text-decoration: none;
}

.eventbanner {
	width: 100%;
	background-color: #8f011f;
	text-align: center;
	padding: 1rem 0 1rem;
}
.ev-timetable {
	font-size :2vw;
	color: #FFFFFF;
	line-height: 1 !important;
	margin-bottom: 1rem;
}


/*追従ヘッダー用記述
------------------------------------------*/
.accordion {
margin:auto;
max-width: 100%;
}

.toggle {
display: none;
}

.option {
position: relative;
margin-bottom: 1em;
}

.title,
.content {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}

.title {
padding: 1em;
display: block;
color: #FFFFFF;
font-weight: bold;
text-align: center;
background-color:#8f011f;
font-size:4vw;
}

.title::after,
.title::before {
content: "";
position: absolute;
right: 1.35em;
top: 1.35em;
width: 1.3vw;
height: 1.0em;
background-color: #FFFFFF;
transition: all 0.3s;
}

.title::after {
transform: rotate(90deg);
}

.content {
max-height: 0;
overflow: hidden;
background-color:#8f011f;
}

.content p {
margin: 0;
padding: 0.5em 1em 1em;
font-size: 0.9em;
line-height: 1.5;
}

.toggle:checked + .title + .content {
max-height: 500px;
transition: all 1.5s;
}
.toggle:checked + .title::before {
transform: rotate(90deg) !important;
}

/*.toggle:checked + .title::before {
transform: rotate(45deg) !important;
}
.toggle:checked + .title::after {
transform: rotate(135deg) !important;
}*/


/* header要素
------------------------------------------*/
@media screen and (max-width: 730px) {
.sitelogopc {
	display:none;
}
}

/* header要素
------------------------------------------*/
@media screen and (min-width: 731px) {
.announcement {
	font-size: 1.5vw;
	line-height: 2;
	font-weight: normal;
}

.announcement a:active,a:hover{
	color: #FFFF00;/*PC専用*/
}

.sitelogo{
	display: none;
}

.sitelogopc {
	width:100%;
	background-color: #e06a01;
	text-align:center;
}

.sitelogopc a{
	display: inline-block;/*PC専用*/
}

.sitelogopc img {
	max-width:26%;/*ideale:26%,tavola36%*//*★★*/
	padding:1vw 0;
}

/*サイトヘッダーブランド一覧
------------------------------------------*/
.headgnav__menu{
	margin: 0 auto 1vw;
	width:45%;
}

.headgnav__menu li{
	width: calc(25% - 0.3vw);
}

.ev-timetable {
	font-size :1.4vw;
}


/*追従ヘッダー用記述
------------------------------------------*/

.title {
padding: 0.2em;
font-size:1.6vw;
}

.title::after,
.title::before {
right: 32%;/*PCのみ文言の長さに合わせて要調節*/
top: 0.5em;
width: 0.6vw;
}

.title::after {
transform: rotate(90deg);
}

.toggle:checked + .title + .content {
max-height: 700px;
transition: all 1.0s;
}

}





/*告知：pointup案内枠
------------------------------------------*/

.p-up {
	width: 70%;
	margin: 0 auto 2vw;
	padding-top: 1vw;
}

.p-uptitle {
	text-align: center;
	font-size: 2.4vw;
	font-weight: bold;
	color: #FFFFFF;
}

.p-updescription {
	text-align: center;
	font-size: 2.0vw;
	font-weight: bold;
	color: #FFFFFF;
}

/*告知：クーポン案内枠
------------------------------------------*/
.couponarea {
	width: 70%;
	margin: 0 auto 3vw;
}

.coupon-title {
	text-align: center;
	font-size: 4vw;
	font-weight: bold;
	color: #FFFFFF;
}

.coupon-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.eventcoupon {
	width: calc(50% - 3vw);
	margin: 1vh auto;
	text-align: center;
	font-size: 5vw;
	font-weight: bold;
	color: #FFFFFF;
	border: solid 0.1em #FFFFFF;
	border-radius: 10px;
}

.eventcoupon a {
	text-decoration: none;
	color: inherit;
}

/*クーポンの色指定*/
.eventcoupon:first-child {
	background-color: #CC0066;
}

.eventcoupon:nth-child(2) {
	background-color: #000099;
}

.eventcoupon:nth-child(3) {
	background-color: #CC3300;
}

.eventcoupon:nth-child(4) {
	background-color: #009933;
}

.eventcoupon:nth-child(5) {
	background-color: #800080;
}

.eventcoupon:nth-child(6) {
	background-color: #20b2aa;
}

.couponword {
	font-size: 4vw;
}

.eventcoupon > a > li > span {
	font-size: 3vw;
}


@media screen and (min-width: 731px) {
/*告知：pointup案内枠
------------------------------------------*/
.p-up {
	width: 36%;
}

.p-uptitle {
	font-size: 1.3vw;
}

.p-updescription {
	font-size: 1.3vw;
}

/*告知：クーポン案内枠
------------------------------------------*/
.couponarea {
	width: 60%;
}

.coupon-title {
	font-size: 1.4vw;
}

.eventcoupon {
	width: calc(25% - 3vw);
	font-size: 2.0vw;
}

.couponword {
	font-size: 1.4vw;
}

.eventcoupon > a > li > span {
	font-size: 1.0vw;
}
}


/*ページトップアイコン
------------------------------------------*/
@media screen and (max-width: 730px) {/*元834*/
#page-top {
	display:none !important;
}
}

@media screen and (min-width: 731px) {/*元835*/
/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:;
	width: 50px;
	height: 50px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;/*スマホのタッチイベント時の四角く出る枠の回避*/
    tap-highlight-color: rgba(0, 0, 0, 0) !important;/*スマホのタッチイベント時の四角く出る枠の回避*/
	cursor:pointer !important;/*スマホのタッチイベント時の四角く出る枠の回避*/
}

#page-top a{/*20210713IE用追記…表示には関係性が無さそう*/
	display: -webkit-flex;/*IE用*/
	-webkit-justify-content: center;/*IE用*/
}

#page-top a:hover{
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 10px;
	bottom:/*150px*/20vh;
	z-index: 100;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateX(100px);
}

/*　左の動き　*/
#page-top.LeftMove{
	animation: LeftAnime 0.5s forwards;
}

@keyframes LeftAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }
  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/*　右の動き　*/
#page-top.RightMove{
	animation: RightAnime 0.5s forwards;
}
@keyframes RightAnime{
  from {
  	opacity: 1;
	transform: translateX(0);
  }
  to {
  	opacity: 1;
	transform: translateX(100px);
  }
}
}


/* フッター：現在地表示
----------------------------------------------------------- */
#footer{
	position: fixed;/*footer固定*/
	bottom: 0;
	height: auto;/*footerの高さ設定…文言の量が増減するため固定不可*/
	width:100%;
	justify-content: space-between;
	align-items: center;
	background:/*#FFF*//*#ffffe0*/#fffff5;
	color:#000;
	text-align: center;
}

/* フッター：レイアウト
----------------------------------------------------------- */
h2{
	font-size:2.8vw;
	text-decoration:underline dotted #000;
	-webkit-text-decoration:underline dotted #000;/*ios用*/
	-webkit-text-decoration-skip:underline dotted #000;/*ios用*/
	display:inline-block;
	line-height:/*3*/2.2;
}

nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom:2vh;/*iphoneの下部に出る黒い線を回避するためのスペース*/
}

nav ul li{
	 font-size:2.6vw;
	 line-height:1.8;
	 padding:0 2%;
}

nav ul li a{
	display: block;
	text-decoration: none;
	color: #000000;
	transition:all 0.3s;
}

nav ul li a:active{
	color:#CC3333 !important;
	text-decoration:none !important;
}

nav ul li a:hover{
	color:#000000 !important;/*これはPCでは#CC3333で実装したい*/
	text-decoration:none !important;
}

nav ul li.current a{
	color:#CC3333 !important;
	border-bottom:#CC3333 solid 2px !important;
}


/* 731px以上に適用されるCSS（PC用） */
@media screen and (min-width: 731px) {
h2{
	font-size:1.8vw;
	line-height:2;
}

nav ul{
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom:1vh;/*iphoneの下部に出る黒い線を回避するためのスペース*/
}

nav ul li{
	 font-size:1.2vw;
	 line-height:1.6;
	 padding:0 1%;
}

nav ul li a:hover{
	color:#CC3333 !important;/*PCのみ*/
}
}


/*【フッターのレフト可に必要な変更点…以下▲▲部分】
----------------------------------------------------*/
/*注意：
・文字数によって2項目の並列、1項目の複数行可が発生する。
・幅1200px以上無いと、現状の使用では商品画像と被る

@media screen and (min-width: 731px)※これだけ追加で作る
#footer {
	position: fixed;
	right: 0;▲▲
	height: 100%;▲▲
	width: 10%;▲▲
	justify-content: space-between;
	align-items: center;
	background: #fffff5;
	color: #000;
	text-align: center;
	bottom: 0;
	z-index: 101;▲▲
}

@media screen and (min-width: 731px)※既存の内容変更
h2 {
	font-size: 1.3vw;▲▲
	line-height: 2;▲▲
	padding-top: 8vh;▲▲
	padding-bottom: 3vh;▲▲
}

@media screen and (min-width: 731px)※既存の内容変更
nav ul li {
	font-size: 1.1vw;▲▲
	line-height: 3;▲▲
	padding: 0 1%;
}*/