/*!
 * 
 *  @event-page/gift-1.0.0.js
 *  Copyright (c) 2024 Rakuten.Inc
 *  Date : 2024-01-22 14:57:30
 *
 */
 /*================================================

おくりものナビ | 下層共通

=================================================*/
/*------------------------------------------------

Common

------------------------------------------------*/
:root {
    --text_color_1: #333333;
    --text_color_2: #00A38B;
    --bg_color_main: #ffffff;
    --bg_color_sub_1: #f7f7f7;
    --bg_color_sub_2: #eeeeee;
    --GRN_main: #53D7BB;
    --GRN_sub_1: #BAEDE0;
    --GRN_sub_2: #ECFDFB;
    --YLW_main: #F5DD00;
    --YLW_sub: #F4E982;
    --padding_common: 24px 16px;
  }
  
/* bgc */
.bgc-sub-1 {
  background-color: var(--bg_color_sub_1);
}

.bgc-sub-2 {
  background-color: var(--bg_color_sub_2);
}

/* aspect-ratio(追加) */
.aspect-ratio-2x1 {
  aspect-ratio: 2/1;
}

.aspect-ratio-3x2 {
  aspect-ratio: 3/2;
}


.cont-width-600{
  display: block;
  width:600px;
  margin-left:auto;
  margin-right:auto;
}

  /*------------------------------------------------
  
  floating_navi(下層のみ表示)
  
  ------------------------------------------------*/
/* [data-module-name=ecm-floating][aria-hidden=true]{
  opacity: 1;
  visibility: visible;
  position: relative !important;
  box-shadow: none !important;
  pointer-events: auto;
}

[data-module-name=ecm-floating][aria-hidden=false] + .scm-kanban{
  margin-top: 60px;
} */

.gift-floating-navi-container[data-pinned=false]{
  box-shadow:none !important;
  z-index: 5 !important;
}

/* floating navi 追加調整 */

.ecm-floating-navi-container[data-static=false][data-sticky=false] {
  z-index: 110;
}


  /*------------------------------------------------
  
  heading[scm]
  
  ------------------------------------------------*/
  /* H2(gift-section-heading) */
  /* .gift-section-logo-image {
    height: auto;
    width: 40px;
  }
   */
  /* H3(scm-headline) */
  .scm-headline-style {
    font-size: 16px;
    color: var(--text_color_1);
    font-weight: 700;
    padding: 8px 0;
  }
  .scm-headline-style.style01 {
    text-align: left;
    border-top: 2px solid var(--GRN_main);
    border-bottom: 2px solid var(--GRN_main);
  }
  .scm-headline-style.style01_YLW {
    text-align: left;
    border-top: 2px solid var(--YLW_main);
    border-bottom: 2px solid var(--YLW_main);
  }
  .scm-headline-style.style02 {
    text-align: center;
    border-top: 2px solid var(--GRN_main);
    border-bottom: 2px solid var(--GRN_main);
  }
  .scm-headline-style.style02_YLW {
    text-align: center;
    border-top: 1px solid var(--YLW_main);
    border-bottom: 1px solid var(--YLW_main);
  }
  .scm-headline-style.style03 {
    text-align: left;
    border-left: 2px solid var(--GRN_main);
    line-height: 1.3;
    padding: 0 0 0 4px;
  }
  .scm-headline-style.style03_YLW {
    text-align: left;
    border-left: 2px solid var(--YLW_main);
    line-height: 1.3;
    padding: 0 0 0 8px;
  }


  /* H4(scm-sub-headline) */
.H4H5_ttlSet{
  text-align: center;
  width:600px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 16px;
}
  .scm-sub-headline-style {
    background-color: var(--GRN_sub_1);
    font-size:16px;
    display: inline-block;
    width:auto;
    padding:8px 32px;
  }
  .scm-sub-headline-style::before {
    background: var(--GRN_sub_1);
    transform:scale(0.36) ;
    bottom:-15px;
  }


  .scm-sub-headline-style-YLW {
    background-color: var(--YLW_sub);
    font-size:16px;
    display: inline-block;
    width:auto;
    padding:8px 32px;
  }
  .scm-sub-headline-style-YLW::before {
    background: var(--YLW_sub);
    transform:scale(0.36) ;
    bottom:-15px;
  }
  
  /* H5(scm-sub-headline) */
  .scm-headline-style-h5 {
    font-size: 16px;
  }
  
  .scm-headline-style-h5-GRN {
    color: var(--text_color_2);
  }
  
  /*------------------------------------------------
  
  kanban[scm]
  
  ------------------------------------------------*/
  .scm-kanban .scm-kanban-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 36px;
    line-height: 1.5;
    font-weight: bold;
    text-align: center;
  }
.scm-kanban .scm-kanban-title .scm-kanban-title-small {
font-size: 20px;
}
.scm-kanban.kanban_01 {
position: relative;
padding: 48px 0;

}
.scm-kanban-flex-box{
display: flex;
justify-content: center;
width: 960px;
margin: 0 auto;
}

.scm-kanban.kanban_01::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 160px;
  background-color: #E8FAF5;
}
.scm-kanban.kanban_01 picture {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  width:250px;
  margin:0 auto;
}
.scm-kanban.kanban_01 .scm-kanban-image {
  width: 250px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
}

.scm-kanban.kanban_01 .scm-kanban-titleBox {
  width: 678px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.scm-kanban.kanban_01 .scm-kanban-titleBox .scm-kanban-title{
  align-items:start;  
  padding:0 32px;
}

.scm-kanban.kanban_02 {
  background: repeating-linear-gradient(-70deg, #E8FAF5, #E8FAF5 20px, #f4fdfa 13px, #f4fdfa 33px);
  padding-top: 89px;
}

.scm-kanban.kanban_02 .scm-kanban-whiteBox{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  background-color: #ffffff;
  position: relative;
  filter:drop-shadow( 0px -4px 2px rgba(0, 0, 0, 0.2));
}

.scm-kanban.kanban_02 .scm-kanban-whiteBox::before {
  content: "";
  width: 182px;
  padding-top: 182px;
  border-radius: 91px;;
  background-size: 100% auto;
  position: absolute;
  top: -40px;
  z-index: -1;
  background-color: #FFFFFF;
}

.scm-kanban.kanban_02 .scm-kanban-titleBox{
  width:960px;
  margin:0 auto;
}

.scm-kanban.kanban_02 .scm-kanban-title {
  position: relative;
  z-index: 0;
}

.scm-kanban.kanban_02 .gift-section-logo-image {
  margin-top: -17px;
  margin-bottom: 16px;
}
.scm-kanban.kanban_02 .leadP {
  width:504px;
  margin:0 auto;
  font-size:16px;
  text-align: center;
}

.scm-kanban-manner{
  width:960px;
  margin:0 auto;
}

.scm-kanban-manner .scm-kanban-title {
  border-top: 4px solid var(--YLW_main);
  border-bottom: 4px solid var(--YLW_main);
  background-color: #FFFDEA;
  padding: 24px 16px;
  font-size: 24px;
  line-height: 1.5;
  font-weight: bold;
  text-align: center;
}
  .scm-kanban-manner .scm-kanban-image {
    display: block;
  width:600px;
  margin:24px auto;
  }
  .scm-kanban-manner .leadP{
    font-size:14px;
    width:600px;
    margin:0 auto;
  }

  .leadP {
    font-size: 20px;
    line-height: 1.8;
  }
  .leadP span {
    font-weight: bold;
    color: var(--text_color_2);
  }
  .leadP a {
    text-decoration: underline;
  }
  
  .leadP_C {
    text-align: center;
  }
  

/*------------------------------------------------
index ( from social git 20241031)
------------------------------------------------*/

.gift-ancor-navi.-socialgift_custom .scm-anchor-navi-item:not(:first-child):before{
    height: 40px;
    width: 2px;
    margin-top: -20px;
  }
  .gift-ancor-navi.-socialgift_custom .scm-anchor-navi-link{
    font-size:18px;
  }
  .gift-ancor-navi.-socialgift_custom .scm-anchor-navi-link  .gift-anchor-navi__icon{
      line-height: 1.1;
  }
  
  .gift-ancor-navi.-socialgift_custom .scm-anchor-navi-link:hover{
    text-decoration: none;
    opacity: 0.8;
  }
  


  /*------------------------------------------------
  
  paragragh
  
  ------------------------------------------------*/


  .scm-paragragh {
    font-size: 14px;
    line-height: 1.5;
  }
  .scm-paragragh span {
    color: var(--text_color_2);
  }
  .scm-paragragh a {
    text-decoration: underline;
  }
  
  /*------------------------------------------------
  
  scm-content-card[scm]
  
  ------------------------------------------------*/
  .scm-content-card-column.scm-content-card-bordered {
    border: 1px solid var(--GRN_main);
  }
  .scm-content-card-column .scm-content-card-triangle {
    border-color: transparent transparent var(--GRN_main) transparent;
  }
  
  .scm-content-card-column-YLW.scm-content-card-bordered {
    border: 1px solid var(--YLW_main);
  }
  .scm-content-card-column-YLW .scm-content-card-triangle {
    border-color: transparent transparent var(--YLW_main) transparent;
  }
  
  /*------------------------------------------------
  
  ecm-button[ecm]
  
  ------------------------------------------------*/
  .ecm-button-style {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 48px;
    font-size: 14px;
    font-weight: bold;
    color: var(--text_color_1);
    margin:0 auto;
  }
.d-flex .ecm-button-style{
  margin: 0;
}

  .ecm-button-style .ecm-icon-chevron-right {
    margin-left: 4px;
  }
  .ecm-button-style.btn01 {
    border: 1px solid var(--GRN_main);
  }
  .ecm-button-style.btn01_YLW {
    border: 1px solid var(--YLW_main);
  }
  .ecm-button-style.btn02 {
    border: 1px solid var(--GRN_main);
    background-color: var(--GRN_sub_1);
  }
  .ecm-button-style.btn02:hover {
    background-color: #b2e3d7;
  }
  .ecm-button-style.btn02_YLW {
    border: 1px solid var(--YLW_main);
    background-color: var(--YLW_sub);
  }
  .ecm-button-style.btn02_YLW:hover {
    background-color: #eadf7c;
  }
  
  /*------------------------------------------------
  
  PC-bnr-box[contents]
  
  ------------------------------------------------*/
  .bnr_box {
    background-color: var(--bg_color_sub_1);
  }
  .bnr_box .scm-banner-image{
    width:400px;
    margin:0 auto;
  }

  .bnr_box .scm-banner-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text_color_1);
    text-align: center;
    margin-top: 12px;
  }
  
  /*------------------------------------------------
  
  TOC-box[contents]
  
  ------------------------------------------------*/
  .toc_box-index {
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    padding: 24px;
    box-sizing: border-box;
  }
  .toc_box-index .index-item {
    font-size: 14px;
    line-height: 1.5;
  }
  .toc_box-index .index-item:not(:last-child) {
    margin-bottom: 0.75em;
  }
  .toc_box-index .index-item.index-indent {
    padding-left: 1em;
  }
  .toc_box-index .index-item > a {
    color: var(--text_color_1);
    text-decoration: underline;
  }
  
  .gift-tab-trigger[aria-selected=true] {
    border-bottom: 2px solid #00a38b!important;
    color: #00a38b!important;
    font-weight: bold;
}

/* carousel arrow customize */

.udr_genre_tab .ecm-slider-prev{
    left:-28px;
    margin-top: -52px;
}
.udr_genre_tab .ecm-slider-next{
    right:-28px;
    margin-top: -52px;
}

.udr_pickup_carousel .ecm-slider-prev{
    left:-28px;
    margin-top: -48px;
}
.udr_pickup_carousel .ecm-slider-next{
    right:-28px;
    margin-top: -48px;
}

.udr_ranking .ecm-rank-link-prev{
  /* left:-28px; */
  top: calc(50% - 70px);
}
.udr_ranking .ecm-rank-link-next{
  /* right:-28px; */
  top: calc(50% - 70px);
}


  /*------------------------------------------------
  
  QA_box[contents]
  
  ------------------------------------------------*/
  .qa-accordion-list:not(:first-child) {
    margin-top: 16px;
  }
  
  .qa-accordion-list {
    background: #ffffff;
    box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
  }
  
  .qa-accordion-title {
    cursor: pointer;
    font-size: 12px;
    line-height: 1.3;
    color: #717171;
    padding: 16px 60px 16px 16px;
    position: relative;
  }
  
  .qa-accordion-title:before {
    position: absolute;
    content: "";
    top: 50%;
    right: 25px;
    height: 2px;
    width: 20px;
    background: var(--GRN_main);
    transform: rotate(90deg);
    transition: all 0.3s ease-in-out;
  }
  
  .qa-accordion-title:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 25px;
    height: 2px;
    width: 20px;
    background: var(--GRN_main);
    transition: all 0.3s ease-in-out;
  }
  
  .qa-accordion-icon {
    display: block;
    font-weight: bold;
    font-size: 16px;
    font-weight: bold;
    color: var(--GRN_main);
  }
  
  .qa-accordion-title.open:before {
    transform: rotate(180deg);
  }
  
  .qa-accordion-title.open:after {
    opacity: 0;
  }
  
  .qa-accordion-text {
    display: none;
    padding: 16px 44px 16px 0px;
    margin: 0 16px;
    font-size: 12px;
    line-height: 1.3;
    color: #717171;
    border-top: 1px solid #cccccc;
  }/*# sourceMappingURL=udr_cns_20240221.css.map */


/* スライダー表示不具合 */
.ecm-slider-container:not([data-initialized='true']){   display: none; }

/*
GENRExPRICE SEARCH
--------------------------------------------------*/
.genre_search_bg form{
    width:568px;
    margin:0 auto;
    letter-spacing: -.5em;
  }
  
  .genre_search_bg form .genre_search_left,
  .genre_search_bg form .genre_search_right{
    display: inline-block;
    width:252px;
    height: 60px;
    position: relative;
    letter-spacing: normal;
  }
  .genre_search_bg form .genre_search_left select,
  .genre_search_bg form .genre_search_right select{
    width:252px;
    height: 60px;
    border-color: #cccccc;
    border-radius: 4px;
    font-size:18px;
    font-weight: bold;
    padding-left: 20px;
    -webkit-appearance: none;
    appearance: none; 
    position: relative;
  }
  
  .genre_search_bg form .genre_search_left select option,
  .genre_search_bg form .genre_search_right select option{
    appearance: none;
    -webkit-appearance: none;
      text-indent: 1em;
  }
  
  .genre_search_bg form .genre_search_left:after,
  .genre_search_bg form .genre_search_right:after{
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    display: block;
    content: "";
    position: absolute;
    right: 9px;
    top: calc(50% - 2px);
    width: 4px;
    height: 4px;
    transform: rotate(45deg);
  }
  
  .genre_search_bg form .genre_search_times{
    display: inline-block;
    width: 64px;
    letter-spacing: normal;
    text-align: center;
    font-size:18px;
    font-weight: bold;
    color:#333333;
  }
  
  .genre_search_bg form .genre_search_btn{
    display: block;
    width:400px;
    height:68px;
    margin:32px auto 0;
    background: #09b198;
    color:#ffffff;
    font-size:16px;
    border: none;
    border-radius: 8px;
  }
  
  .genre_search_bg form .genre_search_btn:hover{
    opacity:0.8;
    text-decoration: none;
  }

  /* ranking customize */

.ecm-du-ranking-genre-tab.-gift_customize  {
    border-top:none;
        border-bottom: 1px solid #ccc;
    color: #717171!important;
    font-weight: 300!important;
    margin-top: 2px!important;
}
.ecm-du-ranking-genre-tab.-gift_customize .ecm-du-ranking-tab-unlink {
    border-top: 0!important;
    border-bottom: 2px solid #53d7bb!important;
    color: #53d7bb!important;
    font-family: Hiragino Kaku Gothic ProN,HiraKakuProN-W3,Hiragino Kaku Gothic Pro,メイリオ,meiryo,sans-serif!important;
    font-weight: 600!important;
    margin-top: 2px!important;
}


.ecm-du-ranking-header.-gift_customize{
    justify-content: end;
    text-align: right;
    padding-right: 32px;
    font-size:10px;
    margin:10px 0;
}

.ecm-du-ranking-pc .ecm-du-ranking-header.-gift_customize .ecm-du-ranking-header-link{
    font-size:10px;
    color:#717171;
}

/* ranking 追加 */

h3.ecm-du-ranking-header-title {
  display: none;
}

.ecm-du-ranking-pc .ecm-du-ranking-header {
  justify-content: right;
}