@charset "utf-8";
/* CSS Document */
.nosp{
	display: none;
}
.breadcrumb {
	max-width: 100%;
}
.main {
	font-family: 'Noto Sans JP', sans-serif;
  font-size: 3.6vw;
  line-height: 1.5;
	font-weight: 500;
	color: #2C2A29;
	& a {
		text-decoration: none;
		/*color: inherit!important;*/
	}
	& img{
		width: 100%;
		vertical-align: bottom;
	}
}
#contents {
  padding: 10vw 0;  
}
.contents-wrap {
  width: calc(675vw / 7.5);
  margin: 0 auto;  
}
/*-----------------------------------------------
共通
-----------------------------------------------*/
.coupon-price {
  /*font-family: "メイリオ", Meiryo,"Roboto", sans-serif;*/
	font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "Noto Sans JP", sans-serif;  
  vertical-align: -.8vw;
}

/*-----------------------------------------------
MV
-----------------------------------------------*/
#mv {
  background-color: #c2c2c2;
  background-image: url("../img/coupon_mv_ovs_sp.jpg");
  background-size: cover;
  background-position-x: center;
  & p {
    font-weight: bold;
  }
  & #main-title {
    /*width: calc(675vw / 7.5);*/
    width: calc(700vw / 7.5);
    margin: 0 auto;
    color: #fff;
    text-align: center;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
    padding: 4vw 0 3vw;
    & .top-txt {
      width: fit-content;
      font-size: 4vw;
      line-height: 1.3;
      border: solid 1px #fff;
      padding: 1.2vw 1.6vw 1.2vw;
      margin: 0 auto 1vw;
    }
    & .sub-txt {
      font-size: 5.6vw;
      line-height: 1.3;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1vw;
      & .left-txt {
        font-size: 4.2vw;
        border-top: solid 1px #fff;
        line-height: 1.3em;
        border-bottom: solid 1px #fff;
        display: inline-block;
        padding: 1.8vw 0;
        margin: 2vw 2vw 1.4vw 0;
      }
    }
    & h2 {
      font-size: 8vw;
      font-weight: bold;
      line-height: 1;
		& .text-small {
			font-size: 8vw; 
		}
      & .price-large {
        font-size: 14vw;
        margin-right: .8vw;
      }
      & .price-small {
        font-size: 8vw;
      }
    }
  }
}

#mv_secret {
  background-color: #c2c2c2;
  background-image: url("../img/coupon_mv_secret_sp.jpg");
  background-size: cover;
  background-position-x: center;
  & p {
    font-weight: bold;
  }
  & #main-title {
    width: calc(675vw / 7.5);
    margin: 0 auto;
    color: #fff;
    text-align: center;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
    padding: 4vw 0 3vw;
    & .top-txt {
      width: fit-content;
      font-size: 4vw;
      line-height: 1;
      border: solid 1px #fff;
      padding: 1.6vw 1.6vw 1.8vw;
      margin: 0 auto 1.6vw;
    }
    & .sub-txt {
    font-size: 5.6vw;
    line-height: 1.3;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2vw;
		color: #ffd272;
      & .left-txt {
        font-size: 4.2vw;
        border-top: solid 1px #fff;
        line-height: 1.3em;
        border-bottom: solid 1px #fff;
        display: inline-block;
        padding: 1.8vw 0;
        margin: 2vw 2vw 1.4vw 0;
      }
    }
    & h2 {
      font-size: 8vw;
      font-weight: bold;
      line-height: 1;
      color: #ffd272;
		& .text-small {
			font-size: 8vw; 
		}
      & .price-large {
        font-size: 14vw;
        margin-right: 1.2vw;
      }
      & .price-small {
        font-size: 8vw;
      }
    }
  }
}
  
/*-----------------------------------------------
リード
-----------------------------------------------*/
#targetArea p {
  font-size: 4vw;
  font-weight: bold;
  text-align: center;
  color: #fff;  
  background: #2C2A29;
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.3);
  padding: 2vw 0;   
}

/*-----------------------------------------
クーポン
-----------------------------------------*/
/*クーポン見出し*/
#couponArea {
  text-align: center;
  & p {
    font-weight: bold;
  }
  & .coupon-price, .coupon-price-box {
    color: #c9000f;
  }
  & .head-coupon {
    margin-bottom: 10vw;
    & .coupon-section {
      font-size: 4.8vw;
      margin-bottom: 2vw;
    }
    & .coupon-price-box {
      display: inline-block;
      font-size: 6vw;
      color: #c9000f;
      line-height: 1.3;
      background: linear-gradient(transparent 68%, #fff231 0%);
      padding: 0 2vw 0;
      margin-bottom: 6vw;
      & .price-large {
        font-size: 10vw;
        line-height: 1;
      }
      & .price-small {
        font-size: 8vw;
      }
    }
    & .coupon-date {
      display: inline-block;
      border: solid 1px #2C2A29;
      font-size: 4.2vw;
      & span {
        width: 100%;
        display: inline-block;
        padding: 2vw;
      }
      & .period {
        background: #2C2A29;
        color: #fff;
      }
    }
  }
}

/*クーポン*/
#couponArea .copy-txt {
  font-size: 3.2vw;
  margin-bottom: 2vw;
}
#couponArea .coupon-list {
  & li {
    border: 4px solid #c9000f;
	  margin-bottom: 2vw;
  }  
  & h3 {
    background: #c9000f;
    padding: 1.4vw 0 2.2vw;
    font-size: 4.2vw;
    font-weight: bold;
    line-height: 1.3;
    color: #FFF;
    text-align: center;
  }
  & .coupon-price-box {
    font-size: 8vw;
    line-height: 1;
    padding: 3vw 0;
    margin: 0 2vw 2vw;
    border-bottom: 2px dotted #c9000f;
    & .price-large {
      font-size: 12vw;
      margin-right: 1.2vw;
    }
    & .price-small {
      font-size: 10vw;
    }
    & .note {
      display: block;
      font-size: 4.2vw;
      margin-top: 1.2vw;
    }
  }
	& .coupon-date {
	 font-size: 3.4vw;
		font-weight: normal;
	}
	& .copy-area {
    padding: 2vw 0;
	  & .copy {
		  color: #c9000f;
		  font-size: 3.0vw;
	  }
  }
  & input {
  width: 80%;
  display: block;
  font-size: 4.8vw;
  font-weight: bold;
  text-align: center;
  color: #2C2A29;
  padding: 1vw 2vw 2vw;
  margin: 1.4vw auto 2.8vw;
  border: 2px solid;
  text-box-trim: trim-start;  
  }
  & .copy-area {
    padding: 2vw 0 4vw;
  }
  & .copy {
    font-size: 4.2vw;
  }
  & button {
    font-size: 4vw;
    text-align: center;
    color: #2C2A29;
    border: none;
    border-radius: 8px;
    padding: 2.8vw 4vw;
    text-box-trim: trim-start;
    cursor: pointer;
    border: solid 1px #757575;
    background: #e8e8e8;
    &:hover {
      opacity: .7;
      transition: all 0.6s ease;
    }
  }
}

/*-----------------------------------------
クーポン詳細
-----------------------------------------*/
#infoArea {
  font-size: 3.6vw;
  & h3 {
    font-size: 6.0vw;
    text-align: center;
    margin: 16vw 0 6vw;
  }
  & h4 {
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: .8vw;
    border-left: solid 2vw #2C2A29;
    padding-left: 1.4vw;
  }
  & .infoBox {
    margin-bottom: 4.8vw;
    border-bottom: solid 1px #888888;  
    & p {
      padding-bottom: 4.8vw;  
    }
    & .note-tag {
      position: relative;
      padding: 0 0 4.8vw 4vw;
      &::before {
        content: "※";
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    & .info-list:last-of-type .note-tag02:last-child {
        padding-bottom: 4.8vw;
    }
  }
  & .notice-list{
    & li {
      padding-left: 4vw;
      position: relative;
      &::before {
        content: "※";
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}

/*-----------------------------------------
検索BOX
-----------------------------------------*/
#searchArea {
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);  
  padding-top: 5.2vw;
  margin-bottom: 10vw;
  & h3 {
    width: calc(675vw / 7.5);
    margin: 0 auto;
    font-size: 4.98vw;
    text-align: center;
    margin-bottom: 4vw;
  } 
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#searchArea {
    margin-right: auto;
    margin-left: auto;  
  }
}
/*検索ボタンリセット*/
#searchArea {
  & select {color: #2C2A29;}
  & .rn-searchMod__inputField, .rn-searchMod__select, .rn-searchMod__toggle {
    font-size: 14px !important;
  }
  & .rn-searchMod__buttonSearchWrap a {
    font-size: 15px !important;
  }
  & .rn-searchMod__formDomLink {
    font-size: 12px !important;
  }
  &.rn-searchMod__label::before {
    font-size: 10px !important;
  }
  &.rn-searchMod__buttonSearch {
    padding: 15.6px 15px 16px 80px!important;
  }
}

/*サイド丸ボタン*/
#search-button {
  display: none;
  position: fixed;
  right: 0;
  bottom: 16vw;
  z-index: 100;
  filter: drop-shadow(1px 1px 4px rgba(0,0,0,0.4)); 
    & a {
    display: block;
    width: 24vw;
    & img {
      width: 100%;
      }
    }
  & .close {
    position: absolute;
    right: 1.6vw;
    top: 0.4vw;
    & a {
      width: 4.8vw;
      height: 4.8vw;
      background-color: #fff;
      border-radius: 50%;
      text-align: center;
      font-size: 3.6vw;
      font-weight: bold;
      line-height: 4.8vw;
      color: #888;
    }
  }
}

/*-----------------------------------------
下部バナー
-----------------------------------------*/
#foot-bnr {
  width: calc(675vw / 7.5);  
  display: flex;
  justify-content: center;
  margin: 0 auto 14vw;  
}

/*-----------------------------------------
検索ボタン
-----------------------------------------*/
#contents .search-btn {
	padding: 5vw 0;
	text-align: center;
	width: 84vw;
	margin: 0 auto;
	& a {
		display: block;
		color: #fff;
		background-color: #c9000f;
		font-size: 4.4vw;
		padding: 2vw 0 2.4vw;
		border-radius: 10vw;
		position: relative;
		&::after {
			content: "";
			display: inline-block;
			width: 6vw;
			height: 6vw;
			background: url(/cmn/icon/icon_arrow_right_white.svg) no-repeat;
			background-size: contain;
			position: absolute;
			right: 2vw;
			top: 3vw;
		}
	}
}
/*-----------------------------------------
検索ボックス
-----------------------------------------*/
.search-ttl {
    text-align: center;
    font-size: 6vw;
}

/*------------------------------------------------
	ページトップボタン
--------------------------------------------------*/
.goTop{
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 100;
}
.goTop a{
    width: 48px;
    height: 48px;
	display: flex;
    border: none;
    outline: none;
    cursor: pointer;
    transition: .2s ease-out;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(105, 113, 128, .5);
    text-decoration-line: none;
}
.goTop a p{
	color: #fff;
    font-size: 24px;
    line-height: 1;
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}