@charset "utf-8";
@property --grad-start {
    syntax: '<color>';
    initial-value: #d0b94d40;
    inherits: false;
}
@property --grad-end {
    syntax: '<color>';
    initial-value: #b2822b40;
    inherits: false;
}
:root {
    --swiper-height-pc: 210px;
    --swiper-height-sp: 290px;
    --height-increment: 10px;
    --current-base-height: var(--swiper-height-pc);
    --site-header-height: 134px;
    --next-section-pseudo-and-minor-adjustment-padding: 184px;
    --card-lead-line-height: 1.4;
    --card-lead_title-fz: 4rem;
    --card-lead_title-pos: calc(var(--site-header-height) + 100px);
    --card-lead_title-pos-include: calc(var(--card-lead_title-pos) + (var(--card-lead_title-fz) * var(--card-lead-line-height)));
    --card-lead_text-pos: calc(var(--card-lead_title-pos-include) + 70px);
    --card-lead_card-container-pos: calc(var(--card-lead_title-pos-include) + 142px);
    --card-lead_cost-pos: calc(var(--card-lead_title-pos-include) + 306px);
    --main-slider-padding: 8px;
}
@media screen and (max-width: 640px) {
  :root {
      --current-base-height: var(--swiper-height-sp);
      --site-header-height: 61px;
      --next-section-pseudo-and-minor-adjustment-padding: 153px;
      --card-lead_title-fz: 2.8rem;
      --card-lead_title-pos: calc(var(--site-header-height) + 60px);
      --card-lead_text-pos: calc(var(--card-lead_title-pos-include) + 40px);
      --card-lead_card-container-pos: calc(var(--card-lead_title-pos-include) + 120px);
      --card-lead_cost-pos: calc(var(--card-lead_title-pos-include) + 275px);
  }
}
/*-------------------------------------------
common
-------------------------------------------*/
.heading{
    font-size: 4.0rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 56px;
}
.sub-heading{
    font-size: 2.8rem;
    font-weight: bold;
    margin-bottom: 32px;
    text-align: center;
}
@media screen and (max-width:640px){
    .heading{
        font-size: clamp(14px, 6vw, 20px);
        margin-bottom: 30px;
        line-height: 1.5;
    }
    .sub-heading{
        font-size: 2.0rem;
        margin-bottom: 24px;
    }
}


body{
    background-color: #F7F7F7;
    overflow-x: hidden;
}
.fade-in-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.fade-in-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/*-------------------------------------------
content
-------------------------------------------*/
.main_area{
    font-weight: 500;
}
@media screen and (max-width:640px){
}

/* mv */
.mv{
    background: #F7F7F7;
}
.mv .img_wrap{
    position: relative;
}
.mv .img_wrap img{
    width: 100%;
}
.mv .img_wrap .js_scroll_pc{
    transition: transform 0.6s ease;
    transform: scale(1);
    border-radius: 0;
}
.mv .img_wrap .js_scroll_pc.shrunk{
    transform: scale(0.98);
    border-radius: 10px;
}
.scroll_indicator {
    position: absolute;
    right: -40px;
    bottom: 16px;
    text-align: center;
    animation: moveUpDown 2s ease-in-out infinite;
    z-index: 10;
}
.scroll_indicator .text {
    writing-mode: vertical-rl;
    color: #9F9F9F;
    font-size: 1.6rem;
    font-weight: 900;
}
.scroll_indicator .arrow {
    width: 24px;
    height: 24px;
    background: url(/shared/img/arw_scroll.svg);
    margin-left: 2px;
    border-radius: 50%;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, .16);
}
/* pc_mv_slider */
.mv .cmn_slide_block .slick-slide{
    margin: 0 0;
}
.mv .cmn_slide_block .item img{
    width: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;
}
@keyframes moveUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}
@media screen and (max-width:640px){
    .mv{
        padding-bottom: 32px;
    }
    .mv .section-inner{
        padding: 0;
    }
    .mv .img_wrap .js_scroll_sp{
        transition: transform 0.6s ease;
        transform: scale(1);
        border-radius: 0;
    }
    .mv .img_wrap .js_scroll_sp.shrunk{
        transform: scale(0.96);
        border-radius: 10px;
    }
    .scroll_indicator {
        right: 10px;
    }
    .scroll_indicator .text {
        color: #fff;
    }
    .mv .cmn_slide_block.slick-dotted.slick-slider{
        padding-bottom: 60px;
    }
}



/* notification */
.notification{
    padding: 60px 0 0;
    background: #F7F7F7;
}
.notification_wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 48px;
}
.notification_wrap .ttl_box{
    width: 196px;
    padding-top: 26px;
}
.notification_wrap .column_box{
    width: calc(100% - 260px);
}
.notification_wrap .article_item {
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    background: #fff;
    width: 316px;
    height: 154px;
}
.notification_wrap .article_item a{
    padding: 30px 24px;
    display: inline-block;
}
.notification_wrap .article_item a:hover{
    opacity: 1;
}
.notification_wrap .article_item a.nolink{
    pointer-events: none;
}
.notification_wrap .article_meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 1.6rem;
    color: #6E6E6E;
}
.notification_wrap .article_meta .label {
    padding: 2px 8px;
    background-color: #F0FCFC;
    color: #096663;
    font-size: 1.4rem;
    border-radius: 4px;
}
.notification_wrap .article_title {
    overflow: hidden;
    margin-top: 16px;
    font-size: 1.4rem;
    color: #333333;
}
.notification_wrap .article_title .txt{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.notification_wrap .article_title .txt::after{
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-bottom: -7px;
    background: url(/shared/img/arw_orange_r.svg) no-repeat center / 100% auto;
    background-size: 16px;
}
.notification_wrap a[target="_blank"] .article_title .txt::after {
    width: 18px;
    height: 18px;
    margin-top: -2px;
    margin: -3px 0 0 8px;
    vertical-align: middle;
    background: url(/shared/img/icon_blank.svg) no-repeat center / 100% auto;
}
.notification_wrap .article_item a.nolink .txt::after{
    display: none;
}
.notification_wrap .article_item a:hover .article_title{
    text-decoration: underline;
}
.notification .slideArea{
    overflow: visible;
}
.notification .notification_slider{
    overflow: hidden;
}
.notification .cmn_slide_block.slick-dotted.slick-slider {
    padding-bottom: 50px;
}
.notification_wrap .slick-slide {
    margin-right: 10px;
}
.notification_wrap .cmn_secondary_btn {
    width: 100%;
}
@media screen and (max-width:640px){
    .notification{
        position: relative;
        overflow: hidden;
        padding: 46px 0 100px;
    }
    .notification .section-inner{
        padding: 0;
    }
    .notification .section-inner::before {
        content: '';
        display: block;
        position: absolute;
        bottom: -60px;
        right: -20px;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        border: 20px solid #F7F7F7;
        background: transparent;
        clip: rect(auto, auto, 40px, 40px);
        z-index: 2;
    }
    .notification .section-inner::after {
        content: '';
        display: block;
        position: absolute;
        bottom: -60px;
        left: -20px;
        border-radius: 50%;
        width: 80px;
        height: 80px;
        border: 20px solid #F7F7F7;
        background: transparent;
        clip: rect(auto, 40px, 40px, auto);
        z-index: 2;
    }
    .notification_wrap{
        flex-direction: column;
        gap: 0;
    }
    .notification_wrap .ttl_box{
        width: 100%;
        padding-top: 0;
        text-align: center;
    }
    .notification_wrap .ttl_box .cmn_normal_list{
        display: none;
    }
    .notification_wrap .column_box{
        width: 100%;
    }
    .notification_wrap .article_item {
        height: 140px;
    }
    .notification_wrap .article_item a{
        padding: 24px 20px;
    }
    .notification_wrap .article_meta {
        gap: 2px;
        font-size: 1.4rem;
    }
    .notification_wrap .article_meta .label {
        padding: 1px 8px;
        font-size: 1.2rem;
    }
    .notification_wrap .slick-slide {
        margin: 0 5px;
    }
}

/* catch */
.catch{
    position: relative;
    padding: 64px 0 0;
}
.catch .section-inner{
    position: relative;
    max-width: 760px;
}
.catch .panel_area{
    position: relative;
}
.catch .panel_area .item{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.catch .panel_area .img{
    width: 60.5%;
    margin-left: auto;
}
.catch .panel_area .img img{
    width: 100%;
}
.catch .panel_area .heading{
    font-size: 3.6rem;
    text-align: left;
    font-feature-settings: "palt";
}
@media screen and (max-width:640px){
    .catch{
        position: relative;
        padding: 0;
        background: transparent;
        padding: 40px 0 0;
        background-color: transparent;
    }
    .catch::after {
        height: 40px;
        border-top-left-radius: 1000px 200px;
        border-top-right-radius: 1000px 200px;
    }
    .catch .section-inner{
        max-width: 375px;
        padding: 0;
    }
    .catch .panel_area .item{
        top: -75px;
        left: 45px;
        transform: translateY(0);
    }
    .catch .panel_area .img{
        width: 100%;
    }
    .catch .panel_area .heading{
        line-height: 1.2;
    }
}

/* card_section */
.card_section{
    background: #fff;
    /* This is the style needed to overlap the section with the element above it. (Note: It will be overwritten when GSAP styles are applied.) */
    margin-top: -20px;
    /* Necessary for the stacking order of '::after{}'. */
    transform: translate(0px, 0px);
}
.card_section_inner {
  position: relative;
  width: 100%;
  /* Since the content volume is specified based on estimates, height adjustments will be necessary if content changes occur. */
  height: calc(var(--site-header-height) + 932px + var(--next-section-pseudo-and-minor-adjustment-padding));
  margin-inline: auto;
  padding-top: var(--site-header-height);
}
@media screen and (max-width:640px){
    .card_section{
    }
    .card_section_inner {
      width: 100%;
      /* Since the content volume is specified based on estimates, height adjustments will be necessary if content changes occur. */
      height: calc(40px + var(--site-header-height) + 1032px + var(--next-section-pseudo-and-minor-adjustment-padding));
    }
    .card_section .card_section_inner:before{
        background: url(/shared/img/top/fig_card_type_03.svg) no-repeat;
        width: 82px;
        height: 72px;
        top: -112px;
        right: 16px;
        left: auto;
    }
    .card_section .card_section_inner:after{
        background: url(/shared/img/top/fig_card_type_04.svg) no-repeat;
        width: 58px;
        height: 62px;
        top: 50%;
        right: auto;
        letter-spacing: 0;
    }
}


/* howto_card */
#section1{
    position: relative;
    top: 0;
    background: #fff;
    border-top-left-radius: 15000px 2000px;
    border-top-right-radius: 15000px 2000px;
    overflow: hidden;
}
#section1::after{
    transition: all 0.5s ease;
    content: "";
    display: block;
    translate: 0 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
/* For iPad */
#section1.overlay::after,
#section1.cardInfo::after {
    --grad-start: #d0b94d40;
    --grad-end: #b2822b40;
}
#section1.overlay::after,
#section1.cardInfo::after {
    background-image:
        linear-gradient(to right, var(--grad-start) 0%, var(--grad-end) 100%),
        url(/shared/img/top/bg_section01_texture.png);
    background-repeat: repeat;
    background-size: auto;
    transition: --grad-start 0.5s ease, --grad-end 0.5s ease, translate 0.5s ease;
}
#section1.overlay.silver::after,
#section1.cardInfo.silver::after {
    --grad-start: #cacaca40;
    --grad-end: #66666640;
}
.imgWrap{
    padding-top: 10px;
}
.imgWrap .card_ttl{
    display: none;
    margin-bottom: 32px;
}
.detail_wrap{
    opacity: 0;
}
#section1:not(.cardInfo) .main-slider-wrapper{
    max-width: 976px !important;
}
.main-slider-wrapper .main-next,
.main-slider-wrapper .main-prev,
.main-slider-wrapper .main-slider .check,
.main-slider-wrapper .main-slider .select,
.main-slider-wrapper .main-slider .main-slide .summary,
.main-slider-wrapper .main-slide .card_img{
    opacity: 0;
    display: none;
}
#section1:not(.cardInfo) .main-slider{
    max-width: 750px!important;
}
#section1:not(.cardInfo) .main-slider .main-slide{
    width: 50%!important;
    padding: 0 !important;
}
#section1.cardInfo .detail_wrap{
    opacity: 1;
    transition: opacity 0.5s ease;
    margin-top: 18px;
}

#section1.overlay::after{
    translate: 0 0;
    z-index: -1;
}
#section1.overlay .heading{
    transition: opacity 0.5s ease;
    opacity: 0;
}
#section1.overlay p{
    transition: opacity 0.5s ease;
    opacity: 0;
}
#section1.cardInfo .main-slide .card_img{
    cursor: pointer;
    margin-top: 36px;
    width: 127px;
    height: auto;
    opacity: 1;
    display: block;
}
#section1.cardInfo .main-slide{
    padding-top: 0;
    width: 100%;
    position: absolute;
    top:0;
    left: 0;
}
#section1.cardInfo .main-slide{
    z-index: 3;
}
#section1.cardInfo .main-slide.active{
    position: relative;
    z-index: 1;
}
#section1.cardInfo .main-slide:not(.active){
    cursor: pointer;
}
#section1.cardInfo .main-slide.active .card_img{
    width: 186px;
    height: auto;
    margin-top: 0;
}
#section1.cardInfo .main-slide[data-index="0"] .card_img{
    margin-right: 343px;
}
#section1.cardInfo .main-slide[data-index="0"].active .select{
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #A66423;
    padding: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 70px;
    font-size: 1.4rem;
    justify-content: center;
    color: #A66423;
    font-weight: bold;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    left: 50px;
    z-index: -1;
}
#section1.cardInfo .main-slide[data-index="0"].active .card_img{
    margin-right: auto;
    margin-left: 113px;
}
#section1.cardInfo .main-slide[data-index="1"] .card_img{
    margin-left: 343px;
}
#section1.cardInfo .main-slide[data-index="1"].active .select{
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid #6A7181;
    padding: 10px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 70px;
    font-size: 1.4rem;
    justify-content: center;
    color: #6A7181;
    font-weight: bold;
    background: rgba(255, 255, 255, .5);
    position: absolute;
    right: 50px;
    z-index: -1;
}
#section1.cardInfo .main-slide[data-index="1"].active .card_img{
    margin-left: auto;
    margin-right: 113px;
}
#section1.cardInfo .imgWrap .card_ttl{
    display: block;
}
#section1.cardInfo .main-slider-wrapper .main-next,
#section1.cardInfo .main-slider-wrapper .main-prev,
#section1.cardInfo .main-slider-wrapper .main-slider .check,
#section1.cardInfo .main-slider-wrapper .main-slider .main-slide.active .summary{
    opacity: 1;
    display: block;
}
#section1.cardInfo .main-slider-wrapper .main-next,
#section1.cardInfo .main-slider-wrapper .main-prev{
    width: 40px;
    height: 40px;
    aspect-ratio: 1 / 1;
}
#section1.cardInfo .main-slider-wrapper .main-next[disabled],
#section1.cardInfo .main-slider-wrapper .main-prev[disabled]{
    width: 32px;
    height: 32px;
}
#section1.cardInfo .main-slider-wrapper .main-next{
    position: relative;
    background: url(/shared/img/arw_next_off.svg)no-repeat center center/contain;
    border-radius: 50%;
    box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.4);
}
#section1.cardInfo .main-slider-wrapper .main-next::before{
    white-space: pre;
    content:'au PAY カード\Aを見る';
    display: block;
    position: absolute;
    font-size: 1.2rem;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
    top: -42px;
}
#section1.cardInfo .main-slider-wrapper .main-next:first-line{
    font-weight: bold;
}
#section1.cardInfo .main-slider-wrapper .main-prev{
    position: relative;
    background: url(/shared/img/arw_gold_prev.svg)no-repeat center center/contain;
    border-radius: 50%;
    box-shadow: 0px 3px 7px -2px rgba(0, 0, 0, 0.4);
}
#section1.cardInfo .main-slider-wrapper .main-prev::before{
    white-space: pre;
    content:'au PAY ゴールドカード\Aを見る';
    display: block;
    position: absolute;
    font-size: 1.2rem;
    text-align: center;
    transform: translateX(-50%);
    left: 50%;
    top: -42px;
}
#section1.cardInfo .main-slider-wrapper .main-prev:first-line{
    font-weight: bold;
}
#section1.cardInfo .main-slider-wrapper .main-next:hover{
    background: url(/shared/img/arw_next_on.svg)no-repeat center center/contain;
}
#section1.cardInfo .main-slider-wrapper .main-prev:hover{
    opacity: .8;
}
#section1.cardInfo .main-slider-wrapper .main-next:disabled{
    background: url(/shared/img/arw_next_gray.svg)no-repeat center center/contain;
}
#section1.cardInfo .main-slider-wrapper .main-next:disabled::before{
    content:none;
}
#section1.cardInfo .main-slider-wrapper .main-prev:disabled{
    background: url(/shared/img/arw_prev_gray.svg)no-repeat center center/contain;
}
#section1.cardInfo .main-slider-wrapper .main-prev:disabled::before{
    content:none;
}
#section1.cardInfo .heading{
      display: none;
}
#section1.cardInfo p{
    opacity: 1;
}
#section1.cardInfo .grid{
      grid-template-columns: 223px 223px;
}
#section1.anm .imgWrap{
      transition: all 0.5s ease;
}

#section1 .heading{
    font-size: 4rem;
    margin-bottom: 70px;
}
@media not screen and (max-width:640px){
    #section1.cardInfo .main-slide:not(.active){
        width: calc(100% - (var(--main-slider-padding) * 2));
        left: var(--main-slider-padding);
    }
}
@media screen and (max-width:960px){
    .detail_wrap{
        padding: 0 70px;
    }
}
@media screen and (max-width:780px){
    #section1.cardInfo .main-slider-wrapper .main-prev::before{
        content:'au PAY\Aゴールドカード\Aを見る';
        top: -60px;
    }
    #section1.cardInfo .main-slide[data-index="0"].active .select{
        left: 10px;
    }
    #section1.cardInfo .main-slide[data-index="1"].active .select{
        right: 10px;
    }
    #section1.cardInfo .main-slide[data-index="0"].active .card_img{
        margin-left: 68px;
    }
    #section1.cardInfo .main-slide[data-index="1"].active .card_img{
        margin-right: 72px;
    }
    #section1.cardInfo .main-slide[data-index="1"] .card_img{
        margin-left: 298px;
    }
    #section1.cardInfo .main-slide[data-index="0"] .card_img{
        margin-right: 302px;
    }
}
@media screen and (max-width:640px){
    #section1 {
        padding-top: 40px;
        margin-top: -40px;
        border-top-left-radius: 1000px 200px;
        border-top-right-radius: 1000px 200px;
    }
    #section1 .heading{
        font-size: 2.8rem;
        margin-bottom: 40px;
    }
    #section1 .main-slider{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #section1.overlay .main-slider,
    #section1.cardInfo .main-slider{
        gap: 15px;
        flex-direction: row;
        padding: 0 6.4% 0;
        align-items: normal;
    }
    #section1.cardInfo .main-slider{
        padding: 0;
    }
    #section1.cardInfo .main-slide .card_img{
        margin-top: 26px;
    }
    #section1.cardInfo .main-slide.active .card_img{
        height: auto;
        margin-top: 0px;
    }
    #section1.cardInfo .main-slide[data-index="0"] .card_img{
        margin-right: auto;
        margin-left: 0;
    }
    #section1.cardInfo .main-slide[data-index="0"].active .select{
        aspect-ratio: 1 / 1;
        padding: 0px;
        width: 44px;
        font-size: 1rem;
        left: -40px;
    }
    #section1.cardInfo .main-slide[data-index="0"].active .card_img{
        margin-right: auto;
        margin-left: 0;
    }
    #section1.cardInfo .main-slide[data-index="1"] .card_img{
        margin-right: 0;
        margin-left: auto;
    }
    #section1.cardInfo .main-slide[data-index="1"].active .select{
        aspect-ratio: 1 / 1;
        padding: 0px;
        width: 44px;
        font-size: 1rem;
        right: -40px;
    }
    #section1.cardInfo .main-slide[data-index="1"].active .card_img{
        margin-left: auto;
        margin-right: 0;
    }
    #section1.cardInfo .main-slider-wrapper .main-next::before,
    #section1.cardInfo .main-slider-wrapper .main-prev::before{
        content:none;
    }
    #section1.overlay.cardInfo .detail_wrap{
        padding: 0 6.4% 0;
    }
    #section1.cardInfo .main-slider-wrapper{
        width: 326px;
        margin-inline: auto;
        padding: 0;
    }
    #section1.cardInfo .main-slider-wrapper .main-next,
    #section1.cardInfo .main-slider-wrapper .main-prev{
        align-self: flex-start;
        width: 24px !important;
        height: 24px !important;
        margin-top: calc(92px - 24px);
        aspect-ratio: 1 / 1;
    }
    #section1.cardInfo .main-slider [data-index="0"].active{
        padding-left: 0;
    }
    #section1.cardInfo .main-slider [data-index="0"].active .summary{
        margin-right: 0;
    }
    #section1.cardInfo .main-slider [data-index="1"].active{
        padding-right: 0;
    }
    #section1.cardInfo .main-slider [data-index="1"].active .summary{
        margin-left: 0;
    }
}

/* #section1.overlay.anm  // section2領域＋アニメーション中、overlay状態かつアニメーション中 → 最優先で動きや見た目を変える
↓
#section1.cardInfo.anm // section3領域＋アニメーション中、cardInfo状態＋アニメーション中
↓
#section1.overlay      // section2領域状態、overlay状態（アニメーションなし）
↓
#section1.cardInfo     // section3領域状態、cardInfo状態（アニメなし）
↓
#section1              // 何もつかない初期状態 */



/* howto */
.howto{
    position: relative;
    background: #ffffff;
    margin-top: -1px;
}
/* .howto::before{
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: rgba(178, 130, 43, 0.25);
    border-top-left-radius: 15000px 2000px;
    border-top-right-radius: 15000px 2000px;
    z-index: 0;
} */
.howto .bg_area{
    padding: 0 0 220px;
    background: linear-gradient(to bottom, rgba(178, 130, 43, 0.25), rgba(208, 185, 77, 0.25));
    position: relative;
    z-index: 1;
}
.howto .sub-heading{
    text-align: center;
    margin-top: 45px;
}
@media screen and (max-width:640px){
/*     .howto::before{
        top: -40px;
        height: 40px;
        border-top-left-radius: 1000px 200px;
        border-top-right-radius: 1000px 200px;
    } */
    .howto .bg_area{
        padding: 10px 6.4% 100px;
    }
    .howto .sub-heading{
        margin-top: 32px;
    }
}
.main-slider-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.main-slider-wrapper * {
    /* transition-property: width, opacity;
    transition-duration: 0.4s,  0.4s;
    transition-timing-function: ease,  ease; */
    /* transition: all 0.4s ease; */
}
.main-slider-wrapper .main-prev,
.main-slider-wrapper .main-next {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s;
}
.main-slider-wrapper .main-prev:disabled,
.main-slider-wrapper .main-next:disabled {
    opacity: 0.3;
    cursor: default;
}
.main-slider {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 var(--main-slider-padding);
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    gap: 0;
    overflow: hidden;
}
.main-slide {
    width: 100%;
    flex-shrink: 0;
    text-align: center;
    overflow: hidden;
    padding-top: 10px;
}
.main-slide .check{
    position: relative;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 14px;
    margin-bottom: 20px;
    display: inline-block;
    max-width: 74px;
    width: 100%;
    padding: 2px;
    vertical-align: middle;
    animation: moveUpDown2 2s ease-in-out infinite;
}

@keyframes moveUpDown2 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(12px);
  }
}
.main-slide .check::after{
    content: '';
    position: absolute;
    width: 2px;
    height: 10px;
    bottom: -10px;
    background: #000;
    left: calc(50% - 1px);
    border-radius: 0 0 2px 2px;
}
.main-slide[data-index="0"] .check,
.main-slide[data-index="0"] .check:after{
    background-color: #A66423;
}
.main-slide[data-index="1"] .check,
.main-slide[data-index="1"] .check:after{
    background-color: #6A7181;
}

.main-slide .card_img {
    width: 100%;
    opacity: 0.65;
    max-width: 186px;
    display: block;
    margin: 0 auto;
    transition: all 0.4s ease;
}
.main-slide.active .card_img {
    opacity: 1;
}
.main-slide .summary{
    transition: opacity 0.4s ease;
}
.main-slide .summary .ttl{
    margin-top: 16px;
    font-size: 1.4rem;
}
.main-slide .summary .ttl .card_type{
    font-size: 2.4rem;
    font-weight: bold;
    margin-left: 10px;
}
.main-slide .summary .cost{
    font-size: 1.0rem;
    font-weight: bold;
    color: #656565;
    margin-top: 10px;
}
.main-slide.active {
    opacity: 1;
    z-index: 2;
    padding-top: 0;
}
.main-slide.active .check{
    display: none!important;
}
.main-slider [data-index="0"].active{
}
.main-slider [data-index="1"].active{
}
@media screen and (max-width:780px){
  .main-slider-wrapper {
      max-width: 600px;
  }
}
@media screen and (max-width:640px){
    .main-slider-wrapper {
        padding: 0;
        max-width: 100%;
        gap: 18px;
    }
    .main-slider-wrapper .main-prev,
    .main-slider-wrapper .main-next {
        padding: 0;
    }
    .main-slider {
        padding: 0;
        gap: 8px;
        align-items: start;
        overflow: visible;
    }
    .main-slide {
        flex-shrink: 0;
        width: 35%;
        padding-top: 0;
        overflow: visible !important;
    }
    .main-slide .card_img {
        max-width: 98px;
    }
    .main-slide.active .card_img {
        max-width: 140px;
    }
    .main-slide .summary .ttl .card_type{
        font-size: 1.8rem;
        margin-left: 4px;
    }
    .main-slide .summary .cost{
        margin-top: 6px;
    }
    .main-slide.active {
        width: 55%;
        padding-top: 18px;
    }
    .main-slider [data-index="0"].active{
        padding-left: 0;
    }
    .main-slider [data-index="0"].active .summary{
        margin-right: -72%;
    }
    .main-slider [data-index="1"].active{
        padding-right: 0;
    }
    .main-slider [data-index="1"].active .summary{
        margin-left: -72%;
    }
}

.swiper-slide {
    height: var(--current-base-height);
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #CCCCCC;
}
.swiper-slide.swiper-slide-active {
    position: relative;
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
    transform: translateY(0);
}
.swiper-slide.swiper-slide-next {
    opacity: 0.7;
    transform: translateY(20px);
    z-index: 5;
}

.main-slider-dots {
    position: relative;
    z-index: 2;
    text-align: center;
    margin: 24px 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-slider-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #9F9F9F;
    margin: 0 8px;
    border: none;
    cursor: pointer;
}
.main-slider-dots .dot.active {
    width: 16px;
    height: 16px;
    background: #656565;
}
.detail-slider-area {
    position: relative;
    height: 332px;
    overflow: visible;
}
.card-slider-wrap {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 800px;
    transition: all 0.4s ease;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    opacity: 1;
}
/* 非表示中 */
.card-slider-wrap.left-peek {
    transform: translateX(-155%);
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}
.card-slider-wrap.right-peek {
    transform: translateX(55%);
    z-index: 1;
    opacity: 0.6;
    pointer-events: none;
}
.card-slider-wrap .swiper-slide{
    pointer-events: none;
}
.card-slider-wrap.active .swiper-slide{
    pointer-events: visible;
}
@media screen and (max-width:640px){
    .card-slider-wrap.left-peek {
        transform: translateX(-153%);
    }
    .card-slider-wrap.right-peek {
        transform: translateX(53%);
    }
}

.cv_button_wrap{
    position: relative;
    z-index: 1;
    text-align: center;
}
.cv_button_wrap .cmn_primary_btn{
    margin-bottom: 45px;
}
@media screen and (max-width:960px){
    .card-slider-wrap {
        max-width: 100%;
    }
}
@media screen and (max-width:640px){
    .detail-slider-area {
        width: 100%;
        height: 330px;
        margin: 16px 0 0;
    }
    .main-slider-dots {
        margin: 170px 0 16px;
    }
}
#detail-swiper-0 .detail-swiper .swiper-slide{
    border-top: 10px solid #A66423;
}
#detail-swiper-1 .detail-swiper .swiper-slide{
    border-top: 10px solid #6A7181;
}
#detail-swiper-0 .detail-swiper-custom .swiper-slide{
    border-top: 10px solid #A66423;
}
#detail-swiper-1 .detail-swiper-custom .swiper-slide{
    border-top: 10px solid #6A7181;
}
.detail-swiper .swiper-slide,
.detail-swiper-custom .swiper-slide{
    position: relative;
    will-change: transform, opacity;
}
.detail-swiper .card-anim-out-up,
.detail-swiper-custom .card-anim-out-up{
    animation: detailCardOutUp 0.35s ease forwards;
    z-index: 2;
}
.detail-swiper .card-anim-out-down,
.detail-swiper-custom .card-anim-out-down{
    animation: detailCardOutDown 0.35s ease forwards;
    z-index: 2;
}
.detail-swiper .card-anim-in-up,
.detail-swiper-custom .card-anim-in-up{
    animation: detailCardInUp 0.35s ease forwards;
    z-index: 3;
}
.detail-swiper .card-anim-in-down,
.detail-swiper-custom .card-anim-in-down{
    animation: detailCardInDown 0.35s ease forwards;
    z-index: 3;
}
.detail-swiper-custom{
    position: relative;
    min-height: 280px;
    touch-action: pan-x;
}
@media screen and (max-width:640px){
  .detail-swiper-custom{
    min-height: 350px;
  }
}
.detail-swiper-custom .swiper-wrapper{
    position: relative;
}
.detail-swiper-custom .swiper-slide{
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.35s ease;
    user-select: none;
}
.detail-swiper-custom .swiper-slide{
  --i: 0;
  z-index: calc(10 - var(--i));
  height: calc(var(--current-base-height) + (var(--height-increment) * var(--i)));
}
.detail-swiper-custom .swiper-slide:nth-child(1){ --i: 0; }
.detail-swiper-custom .swiper-slide:nth-child(2){ --i: 1; }
.detail-swiper-custom .swiper-slide:nth-child(3){ --i: 2; }
.detail-swiper-custom .swiper-slide:nth-child(4){ --i: 3; }
.detail-swiper-custom .swiper-slide:nth-child(5){ --i: 4; }
.detail-swiper-custom .swiper-slide.is-active{
    pointer-events: auto;
}
.detail-swiper-custom .swiper-slide.is-hidden{
    opacity: 0;
    pointer-events: none;
}
@keyframes detailCardOutUp{
    from{transform: translateY(0); opacity: 1;}
    to{transform: translateY(-24px); opacity: 0;}
}
@keyframes detailCardOutDown{
    from{transform: translateY(0); opacity: 1;}
    to{transform: translateY(0); opacity: 0;}
}
@keyframes detailCardInUp{
    from{transform: translateY(0); opacity: 0;}
    to{transform: translateY(0); opacity: 1;}
}
@keyframes detailCardInDown{
    from{transform: translateY(-24px); opacity: 0;}
    to{transform: translateY(0); opacity: 1;}
}
.card-stack {
    display: none;
    position: absolute;
    bottom: 107px;
    left: 0;
    right: 0;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.stack-layer {
    position: absolute;
    left: 0;
    right: 0;
    background: #fff;
    border: 2px solid #CCCCCC;
    border-radius: 10px;
    height: 200px;
}
.layer-1 { bottom: 0px; z-index: 5; }
.layer-2 { bottom: -9px; z-index: 4; }
.layer-3 { bottom: -18px; z-index: 3; }
.layer-4 { bottom: -27px; z-index: 2; }
.layer-5 { bottom: -36px; z-index: 1; }

@media screen and (max-width:640px){
    .card-stack {
        bottom: 131px;
    }
}

.swipe_inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 86%;
    gap: 12px 0;
}
.swipe_inner .info_area{

}
.swipe_inner .label{
    display: inline-block;
    border-radius: 2px;
    font-size: 1.0rem;
    font-weight: bold;
    padding: 6px 2px;
    max-width: 148px;
    width: 100%;
    text-align: center;
}
.swipe_inner .info_area .ttl{
    position: relative;
    margin-top: 16px;
    font-size: 2rem;
    font-weight: bold;
    padding-left: 32px;
}
.swipe_inner .info_area .ttl:before{
    content: '';
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
}
.swipe_inner .info_area .ttl.icon_gold_01:before{
    background-image: url(/shared/img/top/icon_card_gold_01.svg);
}
.swipe_inner .info_area .ttl.icon_gold_02:before{
    background-image: url(/shared/img/top/icon_card_gold_02.svg);
}
.swipe_inner .info_area .ttl.icon_gold_03:before{
    background-image: url(/shared/img/top/icon_card_gold_03.svg);
}
.swipe_inner .info_area .ttl.icon_gold_04:before{
    background-image: url(/shared/img/top/icon_card_gold_04.svg);
}
.swipe_inner .info_area .ttl.icon_gold_05:before{
    background-image: url(/shared/img/top/icon_card_gold_05.svg);
}
.swipe_inner .info_area .ttl.icon_01:before{
    background-image: url(/shared/img/top/icon_card_01.svg);
}
.swipe_inner .info_area .ttl.icon_02:before{
    background-image: url(/shared/img/top/icon_card_02.svg);
}
.swipe_inner .info_area .ttl.icon_03:before{
    background-image: url(/shared/img/top/icon_card_03.svg);
}
.swipe_inner .info_area .ttl.icon_04:before{
    background-image: url(/shared/img/top/icon_card_04.svg);
}
.swipe_inner .info_area .ttl.icon_05:before{
    background-image: url(/shared/img/top/icon_card_05.svg);
}
.swipe_inner .info_area .text{
    margin-top: 6px;
    font-size: 1.6rem;
}
.swipe_inner .info_area .text .num{
    font-size: 3.2rem;
    line-height: 0.9;
    font-weight: bold;
    padding: 0 4px;
    vertical-align: text-bottom;
}
.swipe_inner .info_area .text .plus{
    font-size: 1.6rem;
    color: #9F9F9F;
    padding: 0 4px;
}
.swipe_inner .info_area .cmn_btn_wrap{
    margin-top: 22px;
    text-align: left;
}
.swipe_inner .icon_area{
    display: flex;
}
.swipe_inner .icon_area .cmn_secondary_btn{
    padding: 13px 60px;
    max-width: 100%;
    font-weight: bold;
}
.swipe_inner .icon_area .cmn_secondary_btn.pdS{
    padding: 13px 44px;
}
.cmn_btn_secondary._gold{
    border: 2px solid #a66423;
    color: #a66423;
}
.cmn_btn_secondary._gold::after{
    background: url(/shared/img/arw_gold_r_01.svg) no-repeat center / 100% auto;
}
.cmn_btn_secondary.--bdr_gray{
    border: 2px solid #6A7181;
    color: #6A7181;
    box-shadow: 0 5px 10px 0 rgba(106, 113, 129, .20);
}
.cmn_btn_secondary.--bdr_gray::after{
    background: url(/shared/img/arw_gray_r.svg) no-repeat center / 100% auto;
}
.cmn_btn_secondary.--bdr_gray:hover{
    background: #E9ECF5;
}
.swipe_inner._gold .label{
    background: #EDE2CB;
    color: #A66423;
}
.swipe_inner._gold .info_area .text .num{
    color: #A66423;
}
.swipe_inner._orange .label{
    background: #F2DFD8;
    color: #BD3501;
}
.swipe_inner._gray .label{
    background: #E9ECF5;
    color: #6A7181;
}
.swipe_inner._orange .info_area .text .num,
.swipe_inner._gray .info_area .text .num{
    color: #6A7181;
}
@media screen and (max-width:760px){
    .swipe_inner{
        width: 90%;
    }
    .swipe_inner .info_area .ttl{
        font-size: 1.8rem;
    }
    .swipe_inner .info_area .text{
        font-size: 1.4rem;
    }
    .swipe_inner .info_area .text .num{
        font-size: 2.8rem;
    }
    .swipe_inner .cmn_btn_secondary{
        font-size: 1.4rem;
    }
}
@media screen and (max-width:640px){
    .swipe_inner{
        width: 100%;
        flex-direction: column-reverse;
        gap: 0;
        padding: 10px;
    }
    .swipe_inner .info_area{
        width: 100%;
        text-align: center;
    }
    .swipe_inner .label{
        padding: 3px 2px;
        margin: 0 auto 12px;
    }
    .swipe_inner .info_area .ttl{
        margin-top: 8px;
        font-size: clamp(13px, 4.5vw, 16px);
        padding-left: 0;
    }
    .swipe_inner .info_area .ttl:before{
        content: none;
    }
    .swipe_inner .info_area .text{
        font-size: 1.3rem;
    }
    .swipe_inner .info_area .text .num{
        font-size: clamp(24px, 7vw, 32px);
    }
    .swipe_inner .info_area .text .plus{
        font-size: 1.3rem;
    }
    .swipe_inner .info_area .cmn_secondary_btn{
        margin-top: 15px;
        text-align: center;
    }
    .swipe_inner .info_area .cmn_secondary_btn a{
        max-width: 280px;
    }
    .swipe_inner .icon_area{
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 12px;
    }
    .swipe_inner .icon_area img{
        width: 42px;
    }
}

/* transition */


/* service */
.service{
    position: relative;
    padding: 0 0 20px;
    background: #F7F7F7;
    margin-top: -1px;
}
.service::before{
    content: "";
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
    background: #F7F7F7;
    border-top-left-radius: 15000px 2000px;
    border-top-right-radius: 15000px 2000px;
    z-index: 1;
}
.service .section-inner{
    margin-top: 1px;
}
.service .service_wrap .item{
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .16);
    overflow: hidden;
}
.service .service_wrap .item:last-child{
    margin-right: 0;
}
.service .service_wrap .item a{
    display: block;
    width: 100%;
    padding: 32px 24px 40px;
    height: 100%;
}
.service .service_wrap .item a:hover{
    background-color: #eee;
}
.service .service_wrap .item .ttl{
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.66;
    margin-bottom: 16px;
}
.service .service_wrap .item .txt{
    margin-top: 16px;
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.6rem;
}
.service .service_wrap .item .link{
    display: inline-block;
    margin-top: 24px;
    font-size: 1.4rem;
    padding-right: 24px;
    background: url(/shared/img/arw_orange_r_circle.svg) right center no-repeat;
    background-size: 16px;
    font-weight: 500;
}
.service .service_wrap .item a:hover .link{
    text-decoration: underline;
}
@media screen and (max-width:640px){
    .service{
        padding: 20px 0;
        border-radius: 0;
    }
    .service::before{
        top: -40px;
        height: 40px;
        border-top-left-radius: 1000px 200px;
        border-top-right-radius: 1000px 200px;
    }
    .service .service_wrap .item{
        display: flex;
        padding: 0;
        align-items: center;
    }
    .service .service_wrap .item a{
        padding: 32px 24px;
    }
    .service .service_wrap .item .ttl{
        font-size: 1.6rem;
        font-weight: 500;
        margin-bottom: 10px;
    }
    .service .service_wrap .item .icon img{
        width: 80px;
    }
    .service .service_wrap .item .txt{
        margin-top: 10px;
        font-size: 1.4rem;
        text-align: center;
    }
}

/* app */
.app{
    position: relative;
    padding: 20px 0;
    background: #F7F7F7;
}
.app .app_wrap{
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .16);
    padding: 32px;
}
.app .app_wrap .inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 14%;
    max-width: 710px;
    width: 100%;
    margin: 0 auto;
}
.app .app_wrap .item.col_l{
    width: 56%;
    max-width: 330px;
}
.app .app_wrap .item.col_r{
    width: 30%
}
.app .app_wrap .area_heading{
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}
.app .app_wrap .icon{
    text-align: center;
}
.app .app_wrap .text{
    font-size: 1.6rem;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
}
.app .app_wrap .download .ttl{
    font-size: 1.6rem;
    text-align: center;
    font-weight: 500;
}
.app .app_wrap .download .app_link{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
    gap: 20px;
}
.app .app_wrap .normal_list{
    max-width: 330px;
    margin-top: 20px;
}
.app .app_wrap .img_app img{
    max-width: 212px;
}
@media screen and (max-width:640px){
    .app{
        padding-top: 0;
    }
    .app .app_wrap{
        padding: 32px 24px;
    }
    .app .app_wrap .item.col_l,
    .app .app_wrap .item.col_r{
        width: 100%!important;
        max-width: 100%;
    }
    .app .app_wrap .item.col_r{
        text-align: center;
    }
    .app .app_wrap .area_heading{
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    .app .app_wrap .icon img{
        width: 80px;
    }
    .app .app_wrap .text{
        font-size: 1.4rem;
        margin-bottom: 32px;
    }
    .app .app_wrap .download .ttl{
        font-size: 1.4rem;
    }
    .app .app_wrap .download .app_link{
        margin-top: 24px;
        gap: 6%;
    }
    .app .app_wrap .download .app_link .ios{
        width: 42%;
    }
    .app .app_wrap .download .app_link .google{
        width: 52%;
    }
    .app .app_wrap .normal_list{
        margin-top: 16px;
    }
    .app .app_wrap .img_app{
        text-align: center;
        margin-bottom: 32px;
    }
    .app .app_wrap .img_app img{
        max-width: 133px;
    }
}


/* security */
.security{
    position: relative;
    padding: 100px 0;
    background: #F7F7F7;
}
.security .security_wrap .item{
    background: #fff;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .16);
    overflow: hidden;
}
.security .security_wrap .item a{
    display: block;
    width: 100%;
    padding: 24px 10px 32px;
    height: 100%;
}
.security .security_wrap .item a:hover{
    background-color: #eee;
}
.security .security_wrap .item .txt{
    margin-top: 8px;
    line-height: 1.5;
    font-weight: 400;
    font-size: 1.6rem;
}
.security .security_wrap .item .link{
    display: inline-block;
    margin-top: 24px;
    font-size: 1.4rem;
    padding-right: 30px;
    background: url(/shared/img/arw_orange_r_circle.svg) right center no-repeat;
    font-weight: 500;
}
.security .security_wrap .item a:hover .link{
    text-decoration: underline;
}
@media screen and (max-width:640px){
    .security{
        padding: 80px 0;
    }
    .security .security_wrap .item{
        display: flex;
        padding: 0;
        align-items: center;
        text-align: left;
    }
    .security .security_wrap .item a{
        display: flex;
        align-items: center;
        padding: 15px 48px 15px 20px;
        background: url(/shared/img/arw_orange_r_circle.svg) right 20px center no-repeat;
        gap: 10px;
    }
    .security .security_wrap .item .icon img{
        width: 64px;
    }
    .security .security_wrap .item .txt{
        margin-top: 0;
        font-weight: 500;
        font-size: 1.6rem;
    }
    .security .security_wrap .item .link{
        display: none;
    }
}

/* campaign */
.campaign{
    position: relative;
    padding: 0 0 110px;
    background: #F7F7F7;
    margin-top: -1px;
}
.campaign .cmn_secondary_btn{
    margin-top: 24px;
}
@media screen and (max-width:640px){
    .campaign{
        padding: 0 0 100px;
    }
    .campaign .section-inner{
        padding: 0;
    }
}

/* news */
.news{
    position: relative;
    padding: 0 0 120px;
    background: #F7F7F7;
    margin-top: -1px;
}
.news .tab br.sp_only{	
display: none;	
}	
@media screen and (max-width:720px){	
.news .tab br.sp_only{	
display: block!important;	
}	
}
@media screen and (max-width:640px){
    .news{
        padding: 0 0 88px;
    }
}

.tab_content .article_title.no_link:after {
    content: none;
}

.tab_content .article_title.pdf:after {
    background: url(/shared/img/icon_blank.svg) no-repeat center / 100% auto;
}

/*-------------------------------------------

custom slider controls

-------------------------------------------*/
.slider-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider-arrows {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.custom-prev,
.custom-next {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    z-index: 2;
    border: none;
    cursor: pointer;
}

.custom-prev {
    margin: 7px 28px 7px 0;
}

.custom-next {
    margin: 7px 0 7px 28px;
}

.custom-prev::before {
    background-image: url('/shared/img/arw_slider_prev.svg');
}

.custom-next::before {
    background-image: url('/shared/img/arw_slider_next.svg');
}

.custom-dots .slick-dots {
    position: static;
    display: flex;
    flex-wrap: wrap;
}

.custom-dots .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    background: none;
    border: none;
    outline: none;
}

.custom-dots .slick-dots li.slick-active {
    width: 25px;
}

.custom-dots .slick-dots li {
    width: 10px;
    height: 10px;
}

.custom-dots .slick-dots li.slick-active button:before {
    color: #656565;
    opacity: 1;
    width: 25px;
    height: 10px;
    background: #656565;
    border-radius: 5px;
}

.custom-dots .slick-dots li button:before {
    color: #B0B0B0;
    background: #B0B0B0;
    opacity: 1;
    font-size: 0;
    line-height: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.campaign_slider .img_block {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .16);
}

.campaign_slider .img_block img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

@media screen and (max-width:640px){
    .slider-controls {
        padding: 0 10px;
    }

    .custom-prev,
    .custom-next {
        min-width: 24px;
        height: 24px;
    }

    .custom-dots .slick-dots {
        gap: 10px 0px;
    }

    .custom-prev {
        margin-right: 20px;
    }

    .custom-next {
        margin-left: 20px;
    }
}

/*-------------------------------------------

announcement

-------------------------------------------*/
#announcement-area {
    padding: 20px 0;
    background: #FFF8F4;
}
#announcement-area .announcement:not(:first-child) {
    margin-top: 20px;
}
.announcement-link {
    display: flex;
    font-size: 12px;
}
.announcement-link:hover .announcement-date,
.announcement-link:hover .announcement-message {
    text-decoration: underline;
}
.nolink .announcement-link:hover .announcement-date,
.nolink .announcement-link:hover .announcement-message {
    text-decoration: none;
}
.announcement.nolink {
    pointer-events: none;
}
.announcement-date {
    position: relative;
    margin-right: 12px;
    padding-left: 30px;
}
.announcement-date::before {
    content: '';
    position: absolute;
    left: 0;
    width: 26px;
    height: 26px;
    background: url('/shared/img/top/icon_announcement.svg');
}
.announcement-message {
    flex: 1;
}
.announcement-link[target="_blank"] .announcement-message::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    margin: -3px 0 0 8px;
    vertical-align: middle;
    background: url(/shared/img/icon_blank.svg) no-repeat center / 100% auto;
}
@media screen and (max-width:640px){
    #announcement-area {
        padding: 20px 0;
    }
}

/*-------------------------------------------

tab_content

-------------------------------------------*/
.tab_content_wrap.mod .tab_content {
}
.tab_content_wrap.mod .year_filter label {
    margin-right: 5px;
    font-size: 1.6rem;
}
.tab_content_wrap.mod .year_filter select {
    color: #6E6E6E;
    font-size: 1.4rem;
}
@media screen and (max-width:640px){
    .tab_content_wrap.mod .year_filter {
        padding: 15px;
        border: 1px solid #CCCCCC;
        border-top: none;
        border-bottom: none;
    }
    .tab_content_wrap.mod .year_filter label {
        font-size: 1.4rem;
    }
    .tab_content_wrap.mod .year_filter select {
        font-size: 1.2rem;
    }
}

/*-------------------------------------------

pagination_area

-------------------------------------------*/
@media screen and (max-width:640px){
    .pagination_area .page {
        min-width: 28px;
        height: 28px;
    }
}

@media screen and (max-width:366px){
    .pagination_area .page {
        min-width: 26px;
        height: 26px;
    }

}

/* card-lead */
.card-lead > * {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 300px;
    height: auto;
    margin-inline: auto;
    line-height: 1.4;
    text-align: center;
    z-index: 1;
}
.card-lead_title {
    top: var(--card-lead_title-pos);
    width: fit-content;
    font-size: var(--card-lead_title-fz);
    font-weight: 700;
    line-height: var(--card-lead-line-height);
    text-align: center;
}
.card-lead_text {
    top: var(--card-lead_text-pos);
}
:is(.card-lead_card-container, .card-lead_image) {
    top: var(--card-lead_card-container-pos);
}
.card-lead_card-container {
    width: 218px;
    height: 144px;
    perspective: 1000px;
}
.card-lead_card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}
.card-lead_card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.card-lead_card-face-front {
    transform: rotateY(0deg);
}
.card-lead_card-face-back {
    transform: rotateY(180deg);
}
.card-lead_card-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.card-lead_cost {
    top: var(--card-lead_cost-pos);
}
:is(.card-lead_text_first, .card-lead_text_second) {
    display: block;
    font-size: 2rem;
}
.card-lead_text_first {
    font-weight: 500;
}
.card-lead_text_second {
    font-weight: 700;
}
.card-lead_image {
    display: block;
    width: 237px;
}
.card-lead_cost {
    font-size: 1rem;
    font-weight: 700;
}
@media screen and (max-width:640px){
    .card-lead_contents {
        margin-top: 40px;
    }
    .card-lead_text_first {
        color: #656565;
    }
    .card-lead_text_second {
      margin-top: 2px;
    }
    .card-lead_image {
        width: 227px;
    }
    .card-lead_cost {
        color: #656565;
    }
}