/**************************************
	xmas.css
	共通レイアウトスタイル定義
**************************************/

html {
  font-size: 62.5%;
  /* overflow-x: hidden; */
}

body {
  font-family: "Noto Serif JP", serif;
  color: #404040;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  font-weight: 500;
  -webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
  margin: 0;
  background-color: #fff;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

img {
  width: 100%;
  /* display: block; */
}

#body {
  position: relative;
  background: #173D3F;
}



#xmas_gift-wrapping {
  background: #fff;
  margin-top: 10px;
  margin-bottom: 120px;
}

#xmas_gift-wrapping h2 {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  line-height: 2.3;
}

.sub_text01,
.sub_text02 {
  display: block;
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
  line-height: 2.4;
}

.sub_text01 {
  color: #c00;
  padding-top: 50px;
}

.sub_text03 {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: normal;
  margin-left: 15px;
  font-weight: bold;
}

.gift_img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  max-width: 550px;
  margin-top: 20px;
  margin-bottom: 50px;
}

.xmas_text {
  text-align: center;
  font-size: 1.5rem;
  line-height: 2.1;
}

.sub_text04 {
  display: block;
  text-align: center;
  font-size: 1.4rem;
  font-weight: normal;
  margin-top: 30px;
}

.wrapping_btn {
  width: 350px;
  margin: 0 auto;
  /* padding-top: 40px; */
  padding-bottom: 80px;
}

.wrapping_btn a {
  display: block;
  color: #fff;
  background-color: #303030;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  font-size: 1.5rem;
}

.wrapping_btn a:hover {
  background-color: #909090;
  transition: 0.5s;
}


/* ------ */

@media (max-width: 970px) {

  #xmas_gift-wrapping h2 {
    font-size: 2.5rem;
  }

  .sub_text01,
  .sub_text02 {
    font-size: 1.8rem;
  }

  .xmas_text {

    font-size: 1.4rem;
    line-height: 2;
  }

}

@media (max-width: 768px) {

  #xmas_gift-wrapping {
    margin-top: 0;
    margin-bottom: 80px;
  }

  #xmas_gift-wrapping h2 {
    font-size: 2rem;
  }

  .sub_text01,
  .sub_text02 {
    font-size: 1.4rem;
  }

  .xmas_text {
    text-align: left;
    font-size: 1.2rem;
    line-height: 2.1;
  }

  .sub_text03 {
    font-size: 1.8rem;
    margin-left: 10px;
  }

  .gift_img {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 30px;
  }

  .sub_text04 {
    text-align: left;
    font-size: 1.2rem;
    margin-top: 25px;
  }

  .wrapping_btn {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 65px;
  }

}



/*---------------------------------- 
  hero & intro
---------------------------------- */

#hero_sec {
  margin-bottom: 50px;
}

.hero_img_area {
  width: 100%;
  margin: 0 auto;
  margin-top: 30px;
}

/* #hero_img {
  margin-bottom: 80px;
} */
#pc_hero_intro {
  display: block;
  width: 80%;
  margin: 0 auto;
}

#sp_hero_intro {
  display: none;
}

/* ------ */

@media (max-width: 970px) {

  #pc_hero_intro {
    display: none;
  }

  #sp_hero_intro {
    display: block;
    width: 80%;
    margin: 0 auto;
  }

}

@media (max-width: 768px) {
  #hero_sec {
    margin-bottom: 0;
  }

  .hero_img_area {
    margin: 0;
  }

  #sp_hero_intro {
    width: 100%;
  }
}


/*---------------------------------- 
  attention
---------------------------------- */
.sale_txt {
  font-size: 1.9rem;
  color: #c00;
  margin-bottom: 20px;
  line-height: 1.8;
  font-weight: bold;
}

.att_box {
  width: 80%;
  margin: 0 auto 10px;
  padding: 3rem 3rem 2rem;
  /* border: 2px solid #cac8b6; */
  background: #fff;
}

.att_txt {
  font-size: 1.8rem;
  font-weight: bold;
  color: #404040;
  margin-bottom: 20px;
  line-height: 2;
}

.att_txt02 {
  font-size: 1.3rem;
  line-height: 1.7;
}

.color_red {
  color: #c00;
}


/* ------ */

@media (max-width: 970px) {
  .att_box {
    width: 100%;
  }

  .sale_txt {
    font-size: 1.6rem;
  }
}

@media (max-width: 768px) {
  .sale_txt {
    font-size: 1.4rem;
  }

  .att_box {
    padding: 2rem 1.5rem 2rem;
  }

  .att_txt {
    font-size: 1.3rem;
    font-weight: bold;
    color: #404040;
    margin-bottom: 20px;
    line-height: 2;
  }
}


/*---------------------------------- 
  top_nav
---------------------------------- */

.top_nav {
  padding: 20px;
  background-color: #fff;
  width: 80%;
  margin: 50px auto 100px;
}

#forsec .top_nav {
  margin-top: 0;
}

.top_navi_menu_img {
  display: block;
  max-width: 350px;
  margin: 15px auto 25px;
}

.top_navi_ul {
  display: flex;
  flex-wrap: wrap;
}

.top_navi_ul li {
  width: 50%;
}

.top_navi_ul li a {
  display: block;
  border: 1px solid #eee;
  margin: 5px;
}

/* ------ */

@media (max-width: 970px) {
  .top_nav {
    width: 100%;
    margin-bottom: 50px;
  }
}

@media (max-width: 768px) {


  .top_navi_menu_img {
    margin-top: 10px;
    margin-bottom: 15px;
  }

  .top_navi_ul li {
    width: 100%;
  }

}


/*---------------------------------- 
  カテゴリ共通レイアウト
---------------------------------- */

.item_sec {
  margin-bottom: 100px;
}

#sec_3.item_sec {
  margin-bottom: 0;
}

.menu_img {
  margin-bottom: 70px;
}

/*----- item -----*/
.item_row {
  background-color: #fff;
  padding: 100px 50px;
}

#forman_sec.item_row {
  padding-top: 80px;
}

#forwoman_sec {
  padding-top: 100px;
}

.item_category_heading {
  text-align: center;
  font-size: 3rem;
  letter-spacing: 5px;
  margin-bottom: 70px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
}

.item_box {
  margin-bottom: 50px;
  position: relative;
}

.item_box a {
  display: block;
  margin: 0 0 1rem;
}

.item_name {
  display: block;
  margin: 10px 0;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: left;
  line-height: 1.4;
  letter-spacing: 1px;
  /* height: 50px; */
}

.price_wrap {
  text-align: right;
}



.yaji {
  color: #999;
  font-size: 11px;
  margin: 15px 0;
}

.off_label_wrap {
  text-align-last: left;
  margin-bottom: 2px;
}

.off_label {
  background-color: #811a2b;
  color: #fff;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 1.2rem;
  /* display: block; */
  width: 65px;
  text-align: center;
}

.saleprice {
  font-size: 1.3rem;
  color: #333;
}

.item_price {
  /* ▼セール時 */
  /* color: #900; */
  /* font-weight: 600; */

  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 15px;
  text-align: right;
  font-family: "IBM Plex Serif", serif;
  margin-right: 2px;
  /* letter-spacing: 1.5px; */
}

/* 金額部分 */
/* 割引前（元価格） */
.original_price {
  text-decoration: line-through;
  color: #777;
  margin-right: 4px;
}

/* 割引後の全体（赤字） */
.discount_price_wrap {
  color: red;
  font-weight: bold;
}

/* 割引後*/
.discount_number {
  font-size: 21px;
}

/* 割引後の「円（税込）」は小さく */
.discount_unit {
  font-size: 14px;
  font-weight: normal;
}

.arrow {
  margin: 0 6px;
}

.yen {
  font-size: 1.4rem;
}

.tax {
  font-size: 1.2rem;
  letter-spacing: 0;
}

.btn_box {
  display: flex;
}

.item_box .btn_box {
  /* display: flex; */
  /* position: absolute; */
  /* bottom: -70px; */
  width: 100%;
}

.btn_box a {
  margin: 1%;
}

.btn_box .view {
  color: #fff;
  border: 1px solid #811A2B;
  font-size: 1.6rem;
  padding: 10px 0;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background-color: #811A2B;
  position: relative;
  transition: 0.8s;
  letter-spacing: 2px;
}

.btn_box a::before {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
  content: "";
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: all 0.2s ease-in-out;
}

.btn_box a:hover {
  opacity: 0.7;
}

/* ------ */

@media (max-width: 970px) {

  .item_row {
    background-color: #fff;
    padding: 50px 20px;
  }

  .discount_price {
    font-size: 16px;

  }

}

@media (max-width: 768px) {
  .item_box {
    margin-bottom: 30px;
  }

  .discount_price {
    font-size: 16px;


  }

  .discount_number {
    font-size: 16px;
  }
}


/*---------------------------------- 
  link button
---------------------------------- */
.more_category_btn_box {
  width: 100%;
  max-width: 800px;
  margin: 70px auto 50px;
}

.more_category_btn_box.n01 {
  margin: 70px auto 100px;
}

.more_category_btn_box .view {
  display: block;
  color: #fff;
  font-size: 2rem;
  padding: 25px 0;
  width: 100%;
  font-weight: 600;
  box-sizing: border-box;
  text-align: center;
  background-color: #b38c57;
  position: relative;
  transition: .8s;
  letter-spacing: 4px;
}

.more_category_btn_box a:hover {
  opacity: .8;
}

/* ------ */

@media (max-width: 970px) {
  .more_category_btn_box .view {
    width: 90%;
    margin: 0 auto;
  }

}

@media (max-width: 768px) {

  /* .more_category_btn_box {
    width: 90%;
  } */
  .more_category_btn_box {
    margin: 50px auto;
  }

  .more_category_btn_box.n01 {
    margin: 50px auto 70px;
  }

  .more_category_btn_box .view {
    padding: 16px 0;
    letter-spacing: 3px;
    font-size: 1.2em;
  }

}

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

#page-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: #b38c57;
  border-radius: 50%;
  /* color: #a1a1a1; */
  /* text-align: center; */
  /* text-transform: uppercase; */
  /* text-decoration: none; */
  /* font-size: 0.6rem; */
  transition: all 0.3s;
}

#page-top a:hover {
  /* background: #404040; */
  opacity: .8;
}

.pagetop__arrow {
  height: 10px;
  width: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(20%) rotate(-45deg);
}

/*　上に上がる動き　*/
#page-top.UpMove {
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/
#page-top.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(100px);
  }
}

@media (max-width: 768px) {
  #page-top {
    right: 20px;
    bottom: 40px;
  }

  #page-top a {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 576px) {
  #page-top {
    bottom: 30px;
  }
}

/*---------------------------------- 
  footer
---------------------------------- */

#footer {
  color: #fff;
  height: 50px;
}

.copy {
  text-align: center;
  padding: 10px;
  color: #fff;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
}

/*----- morelink -----*/
.more_link_area {
  overflow: hidden;
  position: relative
}

.footer_info p {
  color: #fff;
  font-size: 2.1rem;
  text-align: center;
  padding-top: 150px;
  letter-spacing: 2px;
}

.more_link_box {
  max-width: 350px;
  padding-bottom: 6%;
  margin: 0 auto;
}

.more_link_box a {
  font-family: 'Libre Caslon Text', 'Roman', 'Times New Roman', 'Cambria Math', 'Times New Roman', 'Javanese Text', 'Times', serif;
  background-color: #8c2a21;
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 2px;
  padding: 15px;
  transition: ease .2s;
}

.more_link_box span {
  position: relative;
  z-index: 3;
  color: #D7D8D8;
}

.more_link_box a:hover span {
  color: #352d27;
}

/* 背景が流れる（下から上） */
.bg-bottom:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  background-color: #8c2a21;
  width: 100%;
  height: 0;
  transition: .4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}

.bg-bottom:hover:before {
  height: 100%;
  background-color: #D7D8D8;
}




/*md –
★☆★☆画面幅768px以下
★☆★☆*/
@media (max-width: 768px) {
  .copy {
    font-size: 1.2rem;
  }

  .item_row {
    padding: 50px 0;
  }

  .off.off_30 {
    padding: 2px 5px;
    font-size: 1.1rem;
  }

  .item_name {
    font-size: 1.2rem;
    margin: 10px 0 5px;
  }

  .item_price {
    font-size: 1.4rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
    margin-right: 3px;

  }

  .saleprice {
    font-size: 1.1rem;

  }

  .price_wrap {
    text-align: left;
  }

  .yen {
    font-size: 1.2rem;
  }

  .tax {
    font-size: 1.2rem;
  }

  .btn_box .view {
    font-size: 1.2rem;
    padding: 7px 0;
  }

  .btn_box a::before {
    right: 12px;
  }

}

/*sm – ★☆★☆
画面幅576px以下
★☆★☆*/
@media (max-width: 576px) {

  .aniv_sale_link {
    font-size: 1.7rem;
  }

  .aniv_sale_link::after {
    font-size: 1rem;
    margin-top: -7px;
  }

  .event_text {
    font-size: 1.4rem;
  }

  .sec_event_2 .event_text {
    font-size: 1.8rem;
  }

  .event_text p {
    line-height: 1.7;
  }

  .novelty_h4 {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}





/*アニメーション*/
.js-fade {
  opacity: 0;
}

.js-fade.active {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInUp20 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInUp20 {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 追加
--------------------------------------------------------*/

.ul_style01 {
  margin: 30px auto;
  max-width: 1140px;
  padding: 0;
}

.ul_style01 li {
  position: relative;
  margin: 0 0 0.5rem;
  padding: 0 0 0 1.5rem;
  font-size: 1.4rem;
  line-height: 1.7;
}

.ul_style01.disc01 li::after {
  position: absolute;
  content: "※";
  top: 0;
  left: 0;
}

.sec_event_2 .point_detail {
  margin: 0 auto 30px;
}

.sec_event_3.aniv_bg_red {
  padding: 20px 0 60px;
}

.saleitem_list li {
  margin: 0 0 70px;
  text-align: center;
}

.saleitem_list li a {
  display: block;
  padding: 30px;
  background: #fff;
}

.saleitem_list li img {
  max-width: 860px;
}

@media (max-width: 768px) {
  .saleitem_list li {
    margin: 0 0 30px;
  }

  .saleitem_list li a {
    padding: 5px;
  }

  .sec_event_2 .point_detail {
    margin: 0 auto;
  }

  .ul_style01 li {
    padding: 0 1.5rem;
  }
}


/*---------------------------------- 
  Generic class
---------------------------------- */

/* only display */
.only_pc {
  display: block;
}

.only_pc_tb {
  display: block;
}

.only_tb {
  display: none;
}

.only_tb_sp {
  display: none;
}

.only_sp {
  display: none;
}

/* ------ */

@media screen and (min-width: 769px) and (max-width: 970px) {
  .only_pc {
    display: none;
  }

  .only_pc_tb {
    display: block;
  }

  .only_tb {
    display: block;
  }

  .only_tb_sp {
    display: block;
  }

  .only_sp {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .only_pc {
    display: none;
  }

  .only_pc_tb {
    display: none;
  }

  .only_tb {
    display: none;
  }

  .only_tb_sp {
    display: block;
  }

  .only_sp {
    display: block;
  }
}