@charset "shift_jis";

/*=======================================スタイルリセット=======================================*/
  /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,
q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,
th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

ul, ol, li {
  list-style: none;
}

a, a:hover {
  color: #333;
  text-decoration: none;
}

/*=======================================共通=======================================*/
body *{
    font-family:'Noto Sans JP','Yu Gothic black',sans-serif,'Lato','メイリオ';
    font-size: 4vw;
    letter-spacing:0;
    font-weight: normal;
    box-sizing: border-box;
}

#irisfes img{
    width: 100%;
    vertical-align: bottom;
}

#irisfes {
  background-color: #155daf;
}

#irisfes .smp_none {
    display: none;
} 


/*見出し
================================ */
#irisfes h2{
  text-align: center;
  font-size: 5vw;
  padding: 3.5vw 0;
  font-weight: 900;
  color: #fff;
} 

#irisfes .category h2{
  text-align: center;
  font-size: 5vw;
  padding: 3.5vw 0;
  font-weight: 900;
  color: #222222;
} 

#irisfes h4 {
  font-size: 3.4vw;
  text-align: center;
  width: 100%;
  padding: 1.5vw 0;
  font-weight: 600;
}

#irisfes h2.img_ti{
  padding: 1% 0;
  margin: 0 auto;
}

#irisfes p{
  text-align: center;
  font-size: 4vw;
  padding: 0 0 4vw;
  font-weight: 600;
  color: #fff;
} 

#irisfes li p{
  text-align: center;
  font-size: 2.5vw;
  padding: 0;
  font-weight: 600;
  color: #fff;
} 

/* 共通 カラム
================================ */
#irisfes ul[class^="col_"]{
  display: flex;
  flex-wrap: wrap;
  gap:1.2vw 1.2vw;
}

#irisfes ul.col_1 > li,
#irisfes ul.col_1 > div li{
  width:100%;
  /* margin-bottom: 1.2vw; */
}

#irisfes ul.col_2 > li,
#irisfes .anchor ul.col_4 > li{
  width: calc(calc(100% - 1.2vw) / 2);
}

#irisfes ul.col_3 > li,
#irisfes ul.col_4 > li{
  width: calc(calc(100% - calc(1.3vw* 2)) / 3)
}

#irisfes ul.col_5 > li{
  width: calc(calc(100% - calc(1.2vw * 2)) / 3);
}

/*超目玉アンカー ここから
================================ */
#irisfes .item_block .anchor ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 0.8vw #222;
  box-shadow: #222 0.5vw 0.5vw;
  border-radius: 5vw;
  height: 14vw;
  background-color: #fff;
}
#irisfes .item_block .anchor ul li a h3 {
  color: #222;
  font-size: 3.2vw;
  font-weight: bold;
  text-align: center;
}

#irisfes .item_block .anchor  ul li a::after{
  position: absolute;
  font-family: 'Material Icons';
  content: 'expand_more';
  transform: translate(50%);
  font-size: 4vw;
  bottom:-0.1vw;
  right: 50%;
  font-weight: bold;
}

/*アンカー ここから
================================ */
#irisfes section.anchor {
  max-width: none;
  background: #155daf;
  position: relative;
  z-index: 5;
  padding: 2vw 3vw;
}
#irisfes .anchor-h2 {
  width: 18em;
  max-width: 800px;
  margin: 0 auto .5%;
}
#irisfes .anchor-link {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto 1%;
  max-width: 900px; 
}
#irisfes .anchor-link li {
  /* width: calc(100% / 3 - 1%); */
  position: relative;
  overflow: hidden;
  border-radius: 2vw;
}

/*section side_anchor 右固定のアンカー
================================ */
#irisfes .toggle{
  position: fixed;
  z-index: 99;
  bottom: 2%;
  right: 2%;
  width: 16vw;
  height: 16vw;
  background-color: #191919e6;
  border-radius: 50%;
  display: block;
  border: solid 1px #fff;
}

#irisfes .toggle span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 50%;
  width: 6.4vw;
  height: 3px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

#irisfes .toggle span:nth-of-type(1) { top: calc(50% - 10px)}
#irisfes .toggle span:nth-of-type(2) { top: calc(50%);}
#irisfes .toggle span:nth-of-type(3) { top: calc(50% + 10px);}
#irisfes .toggle.active span:nth-of-type(1) {
  top: calc(100%/2);
  transform: translate(-50%,-50%)   rotate(-45deg);
}

#irisfes .toggle.active span:nth-of-type(2) { opacity: 0; }
#irisfes .toggle.active span:nth-of-type(3){
  top: calc(100%/2);
  transform: translate(-50%,-50%)  rotate(45deg);;
}

#irisfes .side_anchor{
  position: fixed;
  height: 100vh;
  bottom: 0;
  right: -100%;
  width: 50vw;
  background-color: #3d3d3dd7;
  transition: 0.6s;
  z-index: 98;
  padding: 1.2vw 1.2vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#irisfes .side_anchor.panelactive{/*メニュー*/
  right: 0;
}

#irisfes .side_anchor ul {
  width: 100%;
}

#irisfes .side_anchor ul li:last-child{
  border-bottom: 0;
}

#irisfes .side_anchor ul li{
  width: 100%;
  border-bottom: dotted 0.5vw #fff;
}

#irisfes .side_anchor ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  padding: 5% 0;
  font-weight: 600;
  transition: 0.2s;
  font-size: 4vw;
  height: 16vw;
}

#irisfes .side_anchor ul li a::after{
  position: absolute;
  font-family: 'Material Icons';
  content: 'expand_more';
  transform: translate(50%,-50%);
  top:50%;
  right: 10%;
}

#irisfes .side_anchor ul li:last-child a::after{
  font-family: 'Material Icons';
  content: '';
}

/* fotter
================================ */
#irisfes .fotter {
  background: #212121;
  padding: 5% 0;
  text-align: center;
  color: #fff;
}

#irisfes .fotter a {
  color: #fff;
  font-size: 4vw;
}

#irisfes h2 > span {
  color: #ffffff;
  font-size: 4vw;
  padding-bottom: 10px;
}


/* 共通 商品
================================ */
#irisfes .item_block{
  width: 100%;
  margin: 0 auto;
  padding: 3vw;
  /* margin-bottom: 5vw; */
} 

/*アウトレットセール========*/
#irisfes #outlet{
  background-color: #fffa5d;
} 

/*超目玉========*/
#irisfes #medama_sale{
  background-color: #155daf;
}   

/*カテゴリ========*/
#irisfes .category{
  background-color: #f4f1e7;
  width: 100%;
  margin: 0 auto;
  padding:0 2% 5% 2%;
}

#irisfes .category ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  z-index: 0;
  flex-wrap: wrap;
}
#irisfes .item_block ul{
  display: flex;
  flex-wrap: wrap;
  gap:2vw 1.2vw;
  padding: 0.8vw 0;
} 


#irisfes .item_block ul li a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 2vw;
  background-color: #fff;
  z-index: 0;
} 

#irisfes .item_block dl dt{/*商品名*/
  font-size: 3.5vw;
  text-align: center;
  font-weight: bold;
  margin: 2% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9vw;
  line-height: 4vw;
}

#irisfes .item_block	dl dd.point{/*ポイント*/
  display: flex;
  align-items: center;
  margin: 2% 0;
  padding: 2% 0 3%;
  font-size: 4vw;
  background-color: #cc0001;
  color: #fff65f;
  font-weight: bold;
  height: 12vw;
  justify-content: center;
  text-align: center;
}

/*1カラムの時だけ========*/
#irisfes .item_block ul.col_1 li a img{
  width: 50%;
  margin-right: 15px;
}

#irisfes .medama_item ul.col_1 li a img{
  width: 100%;
  margin-right: 0%;
}

/*目玉商品が画像の時に適用========*/
#irisfes .item_block ul.col_1 li a dl{
  width: 50%;
}

/*2カラムの時だけ========*/
#irisfes .item_block ul.col_2 li a{
  flex-direction: column;
}

#irisfes .item_block ul.col_2  li a dl{
  width: 100%;
}

/*価格プロ====================*/
#irisfes .prdisp-price span:first-child{/*価格*/
    display: none;
}

#irisfes .item_block .price_block{
    display: flex;
    justify-content: center;
    color: #cc0001;
    text-align: center;
    font-weight: bolder;
    align-items: flex-end;
}

#irisfes .item_block .price_block .value{
    font-family: 'Lato';
    font-weight: bolder;
    /* letter-spacing: 2px; */
    font-size: 8vw;
    margin-bottom: -0.5vw;
}

#irisfes .item_block .price_block span{
  font-family: 'Noto Sans JP';
  font-size: 5vw;
  letter-spacing: 0px;
  font-weight: bolder;
  /* margin-bottom: 1vw; */
} 

#irisfes .item_block .price_block span.real{
  font-size: 3vw;
  padding-bottom: 1vw;
} 

#irisfes .item_block	dl dd.price_nomal{/*通常価格*/
  font-family: 'Lato';
  text-align: center;
  font-size: 3vw;
  color: #8c8c8c;
  text-decoration: line-through;
  justify-content: center;
  align-items: center;
  height: 3vw;
  margin: 1vw;
} 

#irisfes .item_block	dl .btn{/*ご購入はこちら*/
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vw 0 0 0;
  height: 9vw;
  border-radius: 50px;
  color: #fff;
  font-size: 3.5vw;
  background-color: #202020;
  border:solid 2px #202020;
} 

#irisfes .item_block	dl .btn::after{
  position: absolute;
    right: 12%;
    top:50%;
    transform: translate(50%,-50%);
  font-family:'Material Icons';
  content: "\e5cc";
} 

/* カテゴリボタン======= */

#irisfes .item_block .btn,
#irisfes .item_block .banner{
  margin-top: 3%;
}

#irisfes .item_block .banner ul.col_1 li a img{
  margin: 0;
  width: 100%;
}

#irisfes .item_block .banner ul.col_1 li a img{
  margin: 0;
  width: 100%;
}

#irisfes .banner .default_title{
  justify-content: center;
  font-size: 25px;
  display: flex;
  width: 100%;
}

#irisfes .banner .default_title p{
  padding: 0;
  color: #ffffff;
}

#irisfes .banner ul li a{
  padding: 0;
}

#irisfes .item_block ul.btn{
  border-bottom: solid 0.1vw #8d8d8d;
}

#irisfes .item_block ul.btn:last-child{
  border-bottom: none;
}

#irisfes .item_block ul.btn a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 11vw;
  background: #202020;
  color: #ffffff;
  font-size: 4.5vw;
  text-align: center;
  border-radius: 50vw;
  font-weight: bold;
}

#irisfes .item_block ul.btn li a::after{
  position: absolute;
  font-family: 'Material Icons';
  content: 'navigate_next';
  transform: translate(50%,-50%);
  top:50%;
  right: 10%;
  font-weight: 400
}

/* イベント
================================ */

#irisfes #nav h3 {
  text-align: center;
  font-size: 5vw;
  padding: 3.5vw 0 1vw;
  font-weight: 900;
  color: #ffffff;
}

#irisfes #nav .g-nav__2cal .col_2 {
  margin: 0 2vw 8%;
}


#irisfes #nav .nav-title {
  position: relative;
  width: 100%;
}

/* ナビゲーション ザブロウ配置 */
#irisfes #nav .g-nav__left .nav-img.left {
  width: 80%;
  max-width: 200px;
  margin: 0 auto;
}
#irisfes #nav .g-nav__right .nav-img.right-tit {
  position: absolute;
  right: 3%;
  top: -13%;
  width: 18%;
  margin: 0 auto;
}