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

  テンプレート：know系コンテンツ用
  item_list$ICE.xhtmlなど

********************************************************************************************************************/

:root{
  --seo-contents-bg-color: #F5F4F4;
}

.category_child{
  margin: 0 0 20px;
}
.category_child_menu{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.category_child_menu li{
  display: contents;
}
:not(#_) .category_child_menu li a{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  gap: 0;
  padding: 10px 10px 12px;
  color: #070606;
  background: #fff;
  text-decoration: none;
}
.category_child_menu li img{
  max-width: 100%;
  height: auto;
}
:not(#_) .category_child_menu li p{
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns: auto 15px;
  gap: 5px;
  margin: 12px 0 0;
  font-size: 16px;
  text-align: center;
}

:not(#_) .category_child_menu li p::after{
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  rotate: 45deg;
  border-top: 2px solid #C60240;
  border-right: 2px solid #C60240;
}
@media (width >= 768px) {
  :not(#_) .category_child_menu li p br{
    display: none;
  }
}
@media (width < 768px) {
  .category_child{
    margin: 0 0 20px;
  }
  .category_child_menu{
    /* display: flex;
    padding: 0 5px; */
    gap: 3px;
  }
  /* .category_child_menu li{
    padding: 0 3px;
  } */
  :not(#_) .category_child_menu li a{
    padding: 5px 5px 8px;
  }
  :not(#_) .category_child_menu li p{
    grid-template-columns: auto 10px;
    gap: 5px;
    margin: 10px 0 0;
    font-size: 13px;
  }
  :not(#_) .category_child_menu li p::after{
    width: 6px;
    height: 6px;
  }
}

/* #list{
  scroll-margin-top: 120px;
}

#itemList{
  scroll-margin-top: 120px;
} */
:not(#_) .ctg_level_section .itemListCategoryTitle {
  background: #fff;
  color: #000;
  font-size: 18px;
  padding: 8px 0 5px;
}


.category_child_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 0 20%;
}
.category_child_list li{
  display: contents;
}

:not(#_) .category_child_list li a{
  display: flex;
  justify-content: center;
  align-items: center;
  /* display: grid; */
  /* grid-template-rows: subgrid; */
  /* grid-row: span 2; */
  gap: 10px;
  padding: 15px 10px;
  color: #072649;
  background: #fff;
  text-decoration: none;
  border: 2px solid #8d9aa7;
  border-radius: 50px;
  font-size: 16px;
}
:not(#_) .category_child_list li a::after{
  content: '';
  display: block;
  /* position: absolute; */
  /* right: 0; */
  width: 8px;
  height: 8px;
  rotate: 45deg;
  border-top: 2px solid #031122;
  border-right: 2px solid #031122;
}
:not(#_) .category_child_list li a:hover {
  background: #678baf;
  color: #fff;
  transition: .2s;
}
:not(#_) .category_child_list li a:hover::after {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transition: .2s;
}

:not(#_) .ctg_level_section .itemListCategoryList .ctg_ch > li a {
  background: #fff;
  color: #072649;
  border: 2px solid #8d9aa7;
}


:not(#_) .ctg_level_section .itemListCategoryList .ctg_ch > li a:hover {
  background: #678baf;
  color: #fff;
  transition: .2s;
}
:not(#_) .ctg_level_section .itemListCategoryList .ctg_ch .mothersday_link {
  color: #ae2a33;
  border: 2px solid #fce5dd;
}
:not(#_) .ctg_level_section .itemListCategoryList .ctg_ch .mothersday_link:hover {
  background: #fce5dd;
  color: #cd8080;
  transition: .2s;
}

@media (width < 768px) {
  .category_child_list{
    gap: 5px;
    padding: 0 2%;
  }
  :not(#_) .category_child_list li a{
    padding: 10px;
    font-size: 13px;
    gap: 5px;
  }
  :not(#_) .category_child_list li a::after{
    width: 6px;
    height: 6px;
  }
}

/* アンカーリンク */
html{
  /* スムーススクロールの設定 */
  scroll-behavior: smooth;
  /* スクロールした時の間隔を設定 */
  scroll-padding-top: 120px;
}

@media (width < 768px) {
  html{
    scroll-padding-top: 30px;
  }

}

    /* 人気ランキング
  ****************************************************************/
.ranking_title:not(#_) {
  display: flex;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 15px;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #fff;
  color: #000;
}
.ranking_title::before {
  content:'' ;
  /* position: absolute;
  top: 0;
  left: 30%; */
  display: block;
  width: 120px;
  /* height: 100%; */
  background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/category/VALENTINE/left.png) center center / contain no-repeat;
}
.ranking_title::after {
  content:'' ;
  /* position: absolute;
  top: 0;
  right: 30%; */
  display: block;
  width: 120px;
  /* height: 100%; */
  background: url(https://www.letao.jp/client_info/LETAO/view/userweb/images/category/VALENTINE/right.png) center center / contain no-repeat;
}
.ranking_cont {
  margin-bottom: 80px;
}
.rec_box_list:not(#_){
  display: flex;
  flex-wrap: wrap;
  background: none;
}
.rec_box_list li {
  width: 17.334%;
  margin-right: 3.3325%;
  margin-bottom: 55px;
  position: relative;
  padding: 25px 0 0 15px;
}
.rec_box_list li:nth-child(5n) {
  margin-right: 0;
}
.rec_box_list li:nth-child(n+6) {
  margin-bottom: 0;
}

.rank_icon {
  position: absolute;
  color: #413F3F;
  background-color: #E8E5E5;
  display: block;
  width: 40px;
  height: 40px;
  text-align: center;
  font-size: 25px;
  line-height: 1;
  padding: 9px 0 0;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

.item:not(#_) {
  padding: 0;
  border: none;
  text-decoration: none;

}

#ranking_no1 .rank_icon {
  background: #DBBA48;
}

#ranking_no2 .rank_icon {
  background: #AFAFAA;
}

#ranking_no3 .rank_icon {
  background: #B18F6D;
}


.rec_item_img {
  margin-bottom: 5px;
}

.rec_item_img img {
  width: 100%;
  height: auto;
}

.cart:not(#_) {
  display: block;
  width: 100%;
  height: 30px;
  padding: 5%;
  margin-top: 5px;
  border: none;
  text-decoration: none;
  text-align: center;
  font-size: 100%;
  color: #fff;
  font-weight: bold;
  background: #183D5F;
  border-radius: 30px;
}

.rec_item_name {
  margin-bottom: 10px;
  font-size: 11px;
  color: #000000;
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.rec_item_price {
  margin-right: 5px;
  font-size: 11px;
  text-align: right;
}

.rec_box_list li .rec_item_social_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 30px;
  margin-top: 5px;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 500;
  color: #183D5F;
  text-decoration: none;
  border: 1px solid #183D5F;
  border-radius: 30px;
}



@media screen and (max-width: 786px){
  /* 人気ランキング
  ****************************************************************/
  .ranking_cont {
    margin-bottom: 30px;
  }
  #main h2.ranking_title:not(#_) {
    font-weight: bold;
    background: #fff;
    color: #000;
    box-shadow: none;
  }
  .ranking_title::before {
    left: 20%;
    width: 20%;
  }
  .ranking_title::after {
    right: 20%;
    width: 20%;
  }


  .rec_box_list:not(#_){
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto;
    gap: 15px;
    padding: 0 10px;
    overflow-x: scroll;
    white-space: nowrap;
    background: none;
  }
    /* .rec_box_list {
    padding:0 2%;
  } */

  .rec_item_img img:not(#_) {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: cover;
  }

  .rec_box_list li:not(#_) {
    width: 170px;
    margin-right: 2%;
    margin-bottom: 20px;
    padding: 20px 0 0 3%;
    box-sizing: border-box;
    border: none;
  }

  .rec_box_list li .rank_icon{
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 25px;
    line-height: 1;
    padding: 8px 0 0;
    box-sizing: border-box;
  }

  .rec_box_list li .rec_item_img {
    margin-bottom: 5px;
  }

  .rec_box_list li .rec_item_img img {
    width: 100%;
    height: auto;
  }

  .rec_box_list li a {
    text-decoration: none;
  }

  .rec_box_list li a .rec_item_name {
    margin-bottom: 5px;
    font-size: 11px;
    color: #1a1e23;
    line-height: 1.4;
    letter-spacing: 0.03em;
    text-decoration: none;
  }

  .rec_box_list li .rec_item_price {
    font-size: 11px;
    text-align: right;
  }

  .rec_box_list li .rec_item_cart,
  .rec_box_list li .rec_item_social_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
    margin-bottom: 3px;
    margin-left: auto;
    box-sizing: border-box;
  }

  .rec_item_cart a:not(#_) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    /* padding: 0; */
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
    background-color: #183D5F;
    border-radius: 30px;
  }

  .rec_box_list li .rec_item_social_btn a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    font-size: 10px;
    color: #183D5F;
    background-color: #ffffff;
    box-sizing: border-box;
    border: solid #183D5F 1px;
  }

  .rec_box_list li .rec_item_cart.notputcart a {
    background-color: darkgray;
  }

  .rec_box_list li .property_txt {
    padding-top: 7px;
    line-height: 1.3;
  }
}

@media screen and (max-width: 500px){
  .ranking_title::before {
    left: 5%;
    width: 20%;
  }
  .ranking_title::after {
    right: 5%;
    width: 20%;
  }
}


.content-title{
  margin: 0 0 20px;
  padding: 0 0 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  text-align: left;
  border-bottom: 1px solid #666;
}

#main h2.content-title:not(.itemListCategoryTitle) {
  @media (width < 768px) {
    margin: 0 0 10px;
    padding: 0 8px 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    font-family: 'Noto Sans JP', sans-serif;
    color: #1a1e23;
    line-height: 1.5;
    text-shadow: none;
    background: transparent;
    background-color: transparent;
  }
}

/* ルタオがお客さまに選ばれる理由 */
.reason-content{
  margin-top: 40px;
  @media (width < 768px) {
    margin-top: 20px;
  }
}
.reason-content > p{
  margin: 30px 0!important;
  @media (width < 768px) {
    margin: 20px 15px!important;
  }
}
.reason-content-grid{
  display: grid;
  grid-template-columns: 1fr 252px;
  align-items: center;
  gap: 40px;
  padding: 30px 10%;
  background: var(--seo-contents-bg-color);
  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 24px;
  }
}
.reason-content-grid + .reason-content-grid{
  margin-top: 20px;
  @media (width < 768px) {
    margin-top: 10px;
  }
}
.reason-content-grid__title{
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.3;
  @media (width < 768px) {
    margin-bottom: 20px;
  }
}
.reason-content-grid__image{
  @media (width < 768px) {
    max-width: 200px;
    margin-inline: auto;
  }
}
.reason-content-grid__image img{
  width: 100%;
  height: auto;
}
.reason-content-grid__text p{
  line-height: 1.5;
  @media (width >= 768px) {
    font-size: 16px!important;
  }
}

/* お客さまから嬉しいレビューをいただいております */
.review-content{
  margin-top: 80px;
  margin-bottom: 40px;
  @media (width < 768px) {
    margin-top: 40px;
    margin-bottom: 20px;
  }
}
.review-content-list{
  margin-top: 30px;
  @media (width < 768px) {
    margin-top: 20px;
  }
}
.review-content-list li + li{
  margin-top: 20px;
  @media (width < 768px) {
    margin-top: 10px;
  }
}
.review-content-list__item{
  display: grid;
  grid-template-columns: 80px min(calc(100% - 110px), 800px);
  justify-content: center;
  align-items: center;
  gap: 30px;
  padding: 20px 60px;
  background: var(--seo-contents-bg-color);
  @media (width < 768px) {
    grid-template-columns: 64px 1fr;
    padding: 16px 30px;
    gap: 20px;
  }
}
.review-content-list__item-image img{
  width: 100%;
  height: auto;
}
.review-content-list__item-text-title{
  margin-top: 10px;
}
.review-content-list__item-text p{
  margin: 10px 0 0 5px !important;
  line-height: 1.5;
  @media (width >= 768px) {
    font-size: 16px!important;
  }
}

/* 豆知識 */
.tips-content{
  margin-top: 60px;
  margin-bottom: 80px;
  @media (width < 768px) {
    margin-top: 30px;
    margin-bottom: 40px;
  }
}

/* よくある質問 */
.faq-content{
  margin-top: 40px;
  margin-bottom: 80px;
  @media (width < 768px) {
    margin-top: 20px;
    margin-bottom: 40px;
  }
}
.faq-content-item{
  padding: 30px 5%;
  background: var(--seo-contents-bg-color);
  @media (width < 768px) {
    padding: 24px 24px;
  }
}
.faq-content-item + .faq-content-item{
  margin-top: 20px;
  @media (width < 768px) {
    margin-top: 10px;
  }
}
.faq-content-item__title{
  font-size: 18px;
  margin-bottom: 15px;
  line-height: 1.3;
  @media (width < 768px) {
    font-size: 18px;
    margin-bottom: 10px;
  }
}
.faq-content-item p.faq-content-item__text {
  margin: 0!important;
  line-height: 1.5;
  @media (width >= 768px) {
    font-size: 16px!important;
  }
}
.faq-content-item p.faq-content-item__notice{
  margin: 10px 0 0!important;
  font-size: 12px!important;
  line-height: 1.5;
  @media (width >= 768px) {
    font-size: 14px!important;
  }
}