@charset"UTF-8";


/* 新規作成*/

/* 共通　common
========================================================================================================
*/

h1.title01{
  display: none;
}

footer{
  margin: 0;
}

main.gift-contents{
  width:100%;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400; 
  padding: 0 0 40px 0;
  color: #444;
}

@media print, screen and (min-width:600px)  { 
  main.gift-contents{
   padding: 0 0 80px 0;
  }
}

/*---- ボタン ----*/

main a.gift-btn01{
  /*position: relative;*/
  width:100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;  
  background: #FAF4E5;
  border: 1px solid #D29836;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  color: #D29836;
  transition: 1s;
}

@media print, screen and (min-width:600px)  { 
  main a.gift-btn01{
    width:100%;
    height: 45px; 
    font-size: 1.5rem;
  }
}

main a.gift-btn01:hover{
  background: #D29836;
  color: #FFF;
}

main a.gift-btn02{
  position: relative;
  width:100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;  
  background: #D29836;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.3rem;
  color: #FFF;
  transition: 1s;
}

@media print, screen and (min-width:600px)  { 
  main a.gift-btn02{
    width:100%;
    height: 45px; 
    font-size: 1.5rem;
  }
}

main a.gift-btn02:hover{
  opacity: 0.7;
}

main a.gift-btn03{
  display: none;
}

@media print, screen and (min-width:600px)  { 
  main a.gift-btn03{
   position: relative;
   width:100%;
   max-width:280px;
   height: 50px;
   background: #FFF;
   border: 1px solid #D29836;
   display: flex;
   align-items: center;
   justify-content: center;     
   font-family: 'Noto Sans JP', sans-serif; 
   font-size: 1.6rem;
   color: #D29836;
   margin: 80px auto 0 auto;
   transition: 1s;
  }
  
  main a.gift-btn03:hover{
   position: relative;
   background: #D29836;
   border: 1px solid #D29836;
   color: #FFF;
  }
}

.icon-arrow-special01::after{
  content: "";
  width:6px;
  height: 6px;
  border-top: solid 2px #FFF;
  border-right: solid 2px #FFF;
  position: absolute;
  top:50%;
  right: 15px;
  transform: translateY(-50%) rotate(45deg);
  transition: 1s;
}

@media print, screen and (min-width:600px)  { 
  .lg-hide{
  display: none;
  }
}

@media print, screen and (max-width:599px)  { 
  .sm-hide{
  display: none;
  }
}

/* コンテンツ
========================================================================================================
*/
/*--------- 見出し ---------*/

/*---- h1 ----*/

main.gift-contents h1.gift-title01{
  width: 100%;
  font-size: 2.2rem;
  text-align: center;
  padding: 0 5px;
  margin: 0 0 30px 0;
}

main.gift-contents h1.gift-title01 span{
  position: relative;
  padding: 0 0 5px 0;
}

main.gift-contents h1.gift-title01 span::after{
  content: "";
  width:80%;
  height: 2px;
  background: #D29836;
  position: absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%);
}

@media print, screen and (min-width:600px)  { 
  main.gift-contents h1.gift-title01{
    font-size: 2.8rem;
    text-align: center;
    margin: 0 0 40px 0;
  }
  
  main.gift-contents h1.gift-title01 span{
    position: relative;
    padding: 0 0 10px 0;
  }
}

main.gift-contents h1.gift-title01 + p{
  width: 80%;
  text-align: center;
  margin: 0 auto;
}

/*---- h2 ----*/

main.gift-contents h2.title01{
  width:80%;  
  font-size:1.8rem;
  font-weight: 600;
  text-align: center;
  margin: 0 auto 15px auto;
}

@media print, screen and (min-width:600px)  { 
  main.gift-contents h2.title01{
    width:100%;
    max-width: 480px;   
    font-size:2.4rem;
    margin: 0 auto 30px auto;
  }
}

main.gift-contents h2.title02{
  width:100%;
  height: 40px;
  font-size: 1.6rem;
  font-weight: 600;
  background: #FAF4E5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 0 20px;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width:600px)  { 
main.gift-contents h2.title02{
  width:100%;
  height: 44px;
  font-size: 2.0rem;  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 30px;
  margin: 0 0 30px 0;
  }
}

/* ギフトコンテンツ
========================================================================================================
*/

main.gift-contents{
  width:100%;
  padding: 0 0 80px 0;
  margin: 0 auto;
}

@media print, screen and (min-width:600px)  { 
  main.gift-contents{
   width:95%;
   max-width: 1200px;
   padding: 60px 0;
   margin: 0 auto;
  }
}

section.gift-contents01 figure a img{
  width:100%;
}

div.gift-ranking-wrap a img,
div.select-product-box a img{
  transition: 0.5s;
}

div.gift-ranking-wrap a:hover img,
div.select-product-box a:hover img{
    opacity: 0.7;
}

/*---------------------------------------- ギフト月間売れ筋ランキング ----------------------------------------*/

section.gift-ranking{
  width:100%;
  background: #FAF4E5;
  padding: 40px 0;
  margin: 30px 0 40px 0;
}

@media print, screen and (min-width:600px) {
  section.gift-ranking{
   padding: 30px 0 30px 0;
   margin: 60px 0;
  }
}

section.gift-ranking h2{
  position: relative;
  width:80%;
  height: 45px;
  background: #D29836;
  display: flex;
  align-items: center;
  justify-content: center;  
  padding: 0;
  margin: 0 auto;
}

@media print, screen and (min-width:600px) {
  section.gift-ranking h2{
   position: relative;
   width:100%;
   max-width: 480px;
   height: 50px;
  }
}

section.gift-ranking h2 span{
  color: #FFF;
}

section.gift-ranking h2::before{
  content: "";
  width:18px;
  height: 45px;
  background: #FAF4E5;
  clip-path: polygon( 0% 0%,100% 50%,0% 100%);
  position: absolute;
  top:0;
  left:-1px;
}

section.gift-ranking h2::after{
  content: "";
  width:18px;
  height: 45px;
  background: #FAF4E5;
  clip-path: polygon( 0% 50%,100% 0%,100% 100%);
  position: absolute;
  top:0;
  left:inherit;
  right:-1px;
  transform: none;
}

@media print, screen and (min-width:600px) {
section.gift-ranking h2::before{
  content: "";
  width:25px;
  height: 50px;
  background: #FAF4E5;
  clip-path: polygon( 0% 0%,100% 50%,0% 100%);
  position: absolute;
  top:0;
  left:-1px;
}

section.gift-ranking h2::after{
  content: "";
  width:25px;
  height: 50px;
  background: #FAF4E5;
  clip-path: polygon( 0% 50%,100% 0%,100% 100%);
  position: absolute;
  top:0;
  left:inherit;
  right:-1px;
  }
}

section.gift-ranking div.gift-ranking-wrap{
  position: relative;
  width:100%;  
  margin: 30px auto 0 auto;
}

@media print, screen and (min-width:600px)  { 
  section.gift-ranking div.gift-ranking-wrap{
   margin: 30px auto 0 auto;
  }
}

div.gift-ranking-wrap ul{
  width:100%;
}

@media print, screen and (min-width:600px) {
div.gift-ranking-wrap ul.gift-rank01{
  width:90%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
  }
  
  div.gift-ranking-wrap ul.gift-rank02{
  width:95%;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin: 0 auto;
  }
}

div.gift-ranking-wrap ul.gift-rank01 li{
  width:100%; 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  background: #FAF4E5;
  padding: 0 40px;
  margin: 0 auto;
 }

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul.gift-rank01 li{
    width:26%;
    max-width: 280px;  
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    padding: 0;
  }
}

div.gift-ranking-wrap ul.gift-rank02 li{
  width:100%; 
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;  
  background: #FAF4E5;
  padding: 0 40px;
  margin: 0 auto;
 }

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul.gift-rank02 li{
    width:22%;
    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    padding: 0;
  }
}

div.gift-ranking-wrap ul li h3{
  width:100%;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
  margin: 0 0 30px 0;
}

@media print, screen and (min-width:600px) {
div.gift-ranking-wrap ul li h3{
   font-size: 2.2rem;
   margin: 0 0 15px 0;
  }
}

div.gift-ranking-wrap ul li h3 span{  
  position: relative;
  display: inline-block;
  padding: 0 0 0 50px;
}

div.gift-ranking-wrap ul li h3 span::before{
  content: "";
  width:42px;
  height: 28px;
  position: absolute;
  top:50%;
  left:0;
  transform: translateY(-50%); 
}

div.gift-ranking-wrap ul li h3#no1 span::before{
  background: url("https://mizuha.itembox.design/item/images/gift/icon-no1.png");
  background-size: 100%;
}

div.gift-ranking-wrap ul li h3#no2 span::before{
  background: url("https://mizuha.itembox.design/item/images/gift/icon-no2.png");
  background-size: 100%;
}

div.gift-ranking-wrap ul li h3#no3 span::before{
  background: url("https://mizuha.itembox.design/item/images/gift/icon-no3.png");
  background-size: 100%;
}

/*----    div ----*/

div.gift-ranking-wrap ul li div{
  position: relative;
  width:48%;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li div{
    width:100%;
  }
}

/*----    dl ----*/

div.gift-ranking-wrap ul li dl{
  min-height: 100px;
  display: flex;
  flex-flow: column;
  margin: 0 0 25px 0;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li dl{ 
    min-height: 110px;
    margin: 5px 0 10px 0;
  }
}

div.gift-ranking-wrap ul li dl dt{
  flex-grow: 1;
  font-size: 1.5rem;
  line-height: 150%;
  font-weight: 500;
  color: #1C0404;
  text-align: left;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li dl dt{
   flex-grow: 1;
   font-size: 1.6rem;
   text-align: center;
  }
}

div.gift-ranking-wrap ul li dl dd{  
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: #000;
  text-align: center;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li dl dd{  
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 2.0rem;
   font-weight: 600;
   color: #000;
   text-align: center;
  }
}

div.gift-ranking-wrap ul li dl dd span{  
  display: inline-block;
  font-size: 1.2rem;
  margin: 0 0 0 5px;
}

/*----    a ----*/
div.gift-ranking-wrap ul li div a{
  position: absolute;
  left:0;
  bottom: 5px;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li div a{
    position: relative;  
    left:inherit;
    bottom: inherit;
  }
}

/*----    figure ----*/

div.gift-ranking-wrap ul li figure{
  width:48%;
}

@media print, screen and (min-width:600px) {
  div.gift-ranking-wrap ul li figure{
    width:100%;
  }
}

div.gift-ranking-wrap ul li figure img{
  width:100%;
}


  .swiper-slider-gift01 .swiper-controller{
   width:100%;
   height: 25px;
   position: absolute;
   bottom:35%;
   left:50%;
   transform: translate(-50%,-50%);
   padding: 0 7px;
   z-index: 101;
   }

  .swiper-slider-gift01 .swiper-controller .swiper-button-prev,
  .swiper-slider-gift01 .swiper-controller .swiper-button-next{
   position: relative;
   background-color: rgba(70,70,70,0.8);
   width: 20px;
   height: 20px;
   cursor: pointer;
  }

  .swiper-slider-gift01 .swiper-controller .swiper-button-prev::after{
   content: "";
   border-top: solid 2px #FFF;
   border-left: solid 2px #FFF;
   width: 8px;
   height: 8px;
   position: absolute;
   top:50%;
  left:50%;
  transform:translate(-30%,-50%) rotate(-45deg) ;
 }

 .swiper-slider-gift01 .swiper-controller .swiper-button-next::after{
   content: "";
   border-top: solid 2px #FFF;
   border-right: solid 2px #FFF;
   width: 8px;
   height: 8px;
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-70%,-50%) rotate(45deg);
  }

@media print, screen and (min-width:600px) {
 .swiper-slider-gift01 .swiper-controller{
   display: none;
  }
}

/*---------------------------------------- 価格から選ぶ ----------------------------------------*/

section.select-price{
  width:100%;
  padding:0;
  margin: 0 auto;
}

section.select-price ul{
  width:90%;    
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  padding:0;
  margin: 0 auto 20px auto;
}

@media print, screen and (min-width:600px) {
  section.select-price ul{
   width:100%;    
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   grid-gap: 30px;
   padding:0;
   margin: 0 auto 60px auto;
  }
}

section.select-price ul li img{
  width:100%;
}


/*---------------------------------------- 商品から探す ----------------------------------------*/

div.select-product-box{
   width: 90%;  
   display: grid;
   grid-template-columns: repeat(1,1fr);
   grid-gap: 60px;
   margin: 0 auto;
}

@media print, screen and (min-width:960px)  { 
  div.select-product-box{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 50px;
    margin: 60px auto 60px auto;
  }
}

div.select-product-box div{
  width:100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

div.select-product-box div div{     
  flex-basis:auto;  
  display: flex;
  flex-flow: column;
  justify-content: flex-start;   
  padding: 0 0 0 15px;
}

@media print, screen and (min-width:960px)  { 
  div.select-product-box div div{      
    flex-basis:auto;
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    padding: 0 0 0 30px;
  }
}

div.select-product-box div h3{
  font-size: 1.8rem;
  font-weight: 600;
  color: #D29836;
  padding: 10px 0 0 0;
  margin: 0 0 15px 0;
}

@media print, screen and (min-width:600px)  { 
  div.select-product-box div h3{
   font-size: 2.4rem;
   padding: 10px 0 0 0;
   margin: 0 0 35px 0;
  }
}

div.select-product-box div p{
  flex-grow: 1;
  font-size: 1.4rem;
  line-height: 150%;
}

@media print, screen and (min-width:600px)  { 
  div.select-product-box div p{
    flex-grow: 1;  
    font-size: 1.6rem;
    line-height: 150%;
  }
}

div.select-product-box div figure{
  flex-basis:80%;
}

div.select-product-box div figure img{
  display: block;
  width:100%;
}

/* ご利用について
========================================================================================================
*/

main.gift-contents section.about-use{
  width:90%;
  margin: 20px auto 0 auto;
}

@media print, screen and (min-width:600px)  { 
  main.gift-contents section.about-use{
     max-width:1060px;
     padding: 80px 0 0 0;
     margin: 0 auto;
  }
}

 section.about-use ul{
  width:100%;
}

 section.about-use ul li{
  width:100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  border-bottom: 1px solid #593B1C;
  padding: 40px 0;
}

@media print, screen and (min-width:600px)  { 
   section.about-use ul li{
    width:100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    padding: 40px 0 40px 8%;
  }
}

 section.about-use ul li figure{
   padding:0;
}

@media print, screen and (min-width:600px)  { 
  section.about-use ul li figure{
    padding: 0 8% 0 0;
  }
}

 section.about-use ul li figure img{
  width:100%;
  max-width:175px;
}

@media print, screen and (min-width:600px)  { 
   section.about-use ul li figure img{  
    width:100%;
    width:215px;
  }
}

section.about-use ul li div{
  width:95%;
  text-align: center;
  margin: 20px 0 0 0;
}

@media print, screen and (min-width:600px)  {
  section.about-use ul li div{
    width:auto; 
    text-align: left;
  }
}

section.about-use ul li div h3{
  font-size: 2.0rem;
  margin: 0 0 20px 0;
}

@media print, screen and (min-width:600px)  {
  section.about-use ul li div h3{
    font-size: 2.4rem;
    margin: 0 0 40px 0;
  }
}

section.about-use ul li div p{
  font-size: 1.5rem;
}

@media print, screen and (min-width:600px)  {
  section.about-use ul li div p{
    padding: 0 10px 0 0;
  }
}

aside.about-use-btn-top{
  width:100%;
  margin: 60px auto;
}

@media print, screen and (min-width:600px)  {
  aside.about-use-btn-top{
   width:100%;
   max-width: 1200px;
   margin: 80px auto 100px auto;
  }
}

aside.about-use-btn-top a{
  width:100%;
  max-width: 280px;
  margin: 0 auto;
}