header { background-color: #E9D45A; }
.header_marquee { margin-right: 1rem; max-width: 640px; width: calc(100vw - 600px); background-color: #fff; padding: 8px 1rem; border-radius: 50px; overflow: hidden; }
.header_marquee p { line-height: 120%; width: 1400px; gap: 15px; 
    animation: marquee_animation1 12s linear infinite; 
}
.header_marquee p span { display: block; padding-left: 25px;
    background: url(../img/common/icn-u.svg) no-repeat left center;
    background-size: 18px auto; 
}

.header_wrap { width: 94%; padding: 1.25rem 0; }
.header_wrap .logo { width: 370px; }

main { padding: 92px 0 0; }

.fv { padding: 2rem 0; }
.fv_wrap { width: 94%; margin: auto; }
.fv_slider::before,
.fv_slider::after { width: 8px; top: 0; height: 100%; background-size: 100% auto; background-repeat: repeat-y; background-position: top left; background-image: url(../img/index/fv_overlay.png); z-index: 2; }

.fv_slider::before { left: 0; }
.fv_slider::after { right: 0; transform: rotate(180deg); }

.fv_slider { width: 100%; overflow: hidden; }
.fv_slider .slide { width: 34vw; opacity: 0.7; }
.fv_slider .slide a { display: block; overflow: hidden; }
.fv_slider .slide .box { padding: 1.5rem 6%; box-sizing: border-box; min-height: 135px; }
.fv_slider .slide .box::before { width: 100%; height: 33px; top: -30px; left: -1px; background: url(../img/index/fv_slide_border.png) no-repeat bottom left; background-size: 550px auto; z-index: 0; }
.fv_slider .slide .box .pre_title { top: -12px; z-index: 1; }
.fv_slider .slide .box .cat { font-size: 14px; }
.fv_slider .slide .box .date { font-size: 12px; }
.fv_slider .slide .box .title { font-weight: 600; font-size: 1.25rem; margin-bottom: 0.5rem; height: 59px; }
.fv_slider .slide.swiper-slide-active { opacity: 1; }
.fv_wrap .dots { padding: 1rem 0; position: relative; z-index: 1; } 
.fv_wrap .dots span { margin: 0 0.5rem !important; }
.fv_wrap .dots .swiper-pagination-bullet { background-color: #fff; opacity: 1; }
.fv_wrap .dots .swiper-pagination-bullet-active { background-color: #000; }

/* -------------------------------------------- concept */

.concept { padding: 4rem 0 1rem; }
.concept .h_style1 { position: relative; z-index: 1; }
.concept .txt { font-size: 1.25rem; line-height: 220%; position: relative; z-index: 1; }
.concept_wrap { padding: 2rem 3% 5rem; max-width: 1600px; box-sizing: border-box; margin: auto; position: relative; overflow: hidden; z-index: 0; }
.concept_wrap .box_wrap { left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; width: 1600px; }
.concept_wrap .box_wrap .boxes { width: 100%; position: relative; padding-top: 36%; }
.concept_wrap .box_wrap .box { position: absolute; }
.concept_wrap .box_wrap .box figure { position: relative; overflow: hidden; }
.concept_wrap .box_wrap .box .box_item { width: 101%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.concept_wrap .box_wrap .img1 { width: 14.5%; top: 0; left: 6.5%; }
.concept_wrap .box_wrap .img1 figure { padding-top: 68%; }
.concept_wrap .box_wrap .img2 { width: 7%; top: 11%; left: 22%; }
.concept_wrap .box_wrap .img2 figure { padding-top: 150%; }
.concept_wrap .box_wrap .img3 { width: 8.6%; top: 31%; left: 5.8%; }
.concept_wrap .box_wrap .img3 figure { padding-top: 145%; }
.concept_wrap .box_wrap .img4 { width: 14.5%; top: 72%; left: 0%; }
.concept_wrap .box_wrap .img4 figure { padding-top: 67%; }
.concept_wrap .box_wrap .img5 { width: 11.7%; top: 42%; left: 15.5%; }
.concept_wrap .box_wrap .img5 figure { padding-top: 160%; }
.concept_wrap .box_wrap .img6 { width: 10%; top: 11%; left: 71.25%; }
.concept_wrap .box_wrap .img6 figure { padding-top: 160%; }
.concept_wrap .box_wrap .img7 { width: 10%; top: 0%; left: 82.5%; }
.concept_wrap .box_wrap .img7 figure { padding-top: 68%; }
.concept_wrap .box_wrap .img8 { width: 15.7%; top: 22%; right: 0%; }
.concept_wrap .box_wrap .img8 figure { padding-top: 63%; }
.concept_wrap .box_wrap .img9 { width: 14.5%; top: 59%; left: 74%; }
.concept_wrap .box_wrap .img9 figure { padding-top: 67%; }
.concept_wrap .box_wrap .img10 { width: 8.65%; top: 67%; left: 90%; }
.concept_wrap .box_wrap .img10 figure { padding-top: 144%; }

.concept_marquee { padding: 4rem 0 0; overflow: hidden; }
.concept_marquee .marquee_wrap { width: 3600px;  animation: marquee_animation1 20s linear infinite;  }
.concept_marquee img { width: 430px; margin-left: 20px; }

/* -------------------------------------------- new_media */

.media { border-top: 2px solid #000; border-bottom: 2px solid #000; }
.media .inner { width: 100%; }
.media_wrap { flex-direction: row-reverse; }

.media_list li { width: 31%; max-width: 270px; margin-bottom: 3rem; }
.media_main { width: 70%; padding: 4rem 4%; box-sizing: border-box; max-width: calc(947px + 8%); margin: 0 auto; }
.media_main .btn_wrap .sns_ig { width: 34px; margin-left: 2rem; }

/* -------------------------------------------- about */

.about { padding: 4rem 0 2rem; background: url(../img/common/bg-net.png) repeat center center; background-size: 9px auto; position: relative; overflow: hidden; }
.about h3 { font-size: 1rem; } 
.about h3 span { display: inline-block; line-height: 110%; font-size: 3rem; padding-bottom: 0.75rem; }
.about h3 span::after { bottom: 0; left: 0; width: 0%; transition: 0.5s ease; transition-delay: 0.4s; height: 8px; background: url(../img/index/about-head-line.png) no-repeat left center; background-size: 324px auto; }
.about h3 span.active::after { width: 100%; }
.about h3 small { display: block; font-size: 1rem; padding-top: 1rem; }
.about .inner { max-width: 564px; position: relative; z-index: 1; }
.about_wrap { padding: 2rem 0; box-sizing: border-box; max-width: 1400px; margin: auto; position: relative; z-index: 1; }
.about_wrap .txt { padding: 2rem 0 1rem; font-size: 14px; font-weight: 500; line-height: 220%; }
.about .images { position: absolute; width: 1400px; left: 50%; top: 0; z-index: 0; transform: translate(-50%, 0); pointer-events: none; }
.about .images .img_wrap { padding-top: 68%; position: relative; pointer-events: none; }
.about .images img { position: absolute; z-index: 0; }
.about .images .img2 { width: 19%; top: 21%; left: 9%; }
.about .images .img3 { width: 18%; top: 51%; left: 15%; }
.about .images .img4 { width: 23.4%; top: 23%; left: 68%; }
.about .images .img5 { width: 12%; top: 46%; left: 72%; }
.about .images .obj1 { width: 14%; top: 8%; left: 2%; animation: rotateBackForth1 1.2s infinite steps(1); }
.about .images .obj2 { width: 7.5%; top: 15%; left: 15.5%; }
.about .images .obj3 { width: 10%; top: 9%; left: 19%; }
.about .images .obj4 { width: 14%; top: 60%; left: 0%; animation: rotateBackForth1 1s infinite steps(1); }
.about .images .obj5 { width: 6%; top: 73%; left: 14%; }
.about .images .obj6 { width: 12.5%; top: 81.5%; left: 14%;}
.about .images .obj7 { width: 11%; top: 9.5%; left: 77%; }
.about .images .obj8 { width: 3%; top: 16.5%; left: 80%; }
.about .images .obj9 { width: 17%; top: 12%; left: 82.5%; animation: rotateBackForth1 1.1s infinite steps(1); }
.about .images .obj10 { width: 9.5%; top: 44.5%; left: 87.5%; animation: rotateBackForth1 1.3s infinite steps(1); }
.about .images .obj11 { width: 4%; top: 55.5%; left: 90.5%; }
.about .images .obj12 { width: 5.4%; top: 57.5%; left: 95%; }
.about .images .obj13 { width: 15%; top: 67%; left: 83%; animation: rotateBackForth1 1.4s infinite steps(1); }
.about .images .obj14 { width: 12.5%; top: 83%; left: 74%; }
.about .images .obj15 { width: 6%; top: 88.5%; left: 83%; }

@keyframes rotateBackForth1 {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(10deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

@keyframes rotateBackForth2 {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(10deg); }
    50%  { transform: rotate(0deg); }
    75%  { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

/* -------------------------------------------- products */

.badge { position: absolute; width: 99px; height: 65px; z-index: 1; box-sizing: border-box; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
.badge span { font-size: 10px; }
.badge.new span { font-size: 1.25rem; }

.products { overflow: hidden; }
.prod_head { padding: 2rem 0; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.prod_head span { font-weight: 200; letter-spacing: 2px; font-size: 3rem; padding: 0 2rem; display: inline-block; line-height: 100%; }
.prod_head small { font-size: 1rem; display: inline-block; padding: 0 2rem; border-left: 1px solid #000; }

.product_wrap { padding: 5rem 0; max-width: 1600px; box-sizing: border-box; border-top: 2px solid #000; }
.product_wrap:first-of-type { border: none; }
.product_wrap .ttl { text-align: center; padding-bottom: 2.5rem; }
.product_wrap .ttl .num { padding-bottom: 2rem; }
.product_wrap .ttl .num span { letter-spacing: 2px; font-size: 2rem; display: inline-block; width: 127px; height: 83px; line-height: 83px; border-radius: 50%; }
.product_wrap .ttl h4 span { font-weight: 200; letter-spacing: 2px; display: block; font-size: 2.375rem; padding-bottom: 0.5rem; }
.product_wrap .ttl h4 small { font-size: 12px; }
.product_wrap .ttl .sub { font-size: 1.125rem; padding-top: 1.5rem; }
.product_wrap .img_wrap { z-index: 0; }
.product_wrap .img_wrap .badge { left: -1.5rem; top: -1.5rem; animation: badge_spin 5s linear infinite; }
.product_wrap .white_box { padding: 4rem; background-color: #fff; border-radius: 1rem; border: 2px solid #000; }
.product_wrap .white_box .img_box { width: 50%; }
.product_wrap .white_box .centered_img { padding-top: 70%; }
.product_wrap .white_box .ttl { font-size: 1.375rem; font-weight: 600; padding: 2rem 0 1.5rem; }
.product_wrap .white_box .txt { line-height: 200%; }
.product_wrap .white_box .btn_wrap { padding: 3rem 0 0; }
.product_wrap .others { padding: 4rem 0 2rem; }
.product_wrap .others .caption p { font-size: 1.375rem; padding: 0 1.5rem; margin: 0 2rem 1rem; }
.product_wrap .others .caption p::before,
.product_wrap .others .caption p::after { left: 0; top: 0; bottom: 0; margin: auto; width: 12px; height: 36px; background: url(../img/index/others-border.png) no-repeat center center; background-size: 11px auto; }
.product_wrap .others .caption p::after { left: auto; right: 0; transform: rotate(-180deg); }
.product_wrap .others .caption a { border-bottom: 1px solid #000; padding-bottom: 0.25rem; padding-right: 1.5rem; display: inline-block; font-size: 12px;
    background: url(../img/common/icn-arw-black.png) no-repeat right center;
    background-size: 1rem auto;
}
.product_wrap .others ul { padding: 0 2rem; }
.product_wrap .others ul li { width: 186px; padding: 0 0.5rem; }
.product_wrap .others ul li .ttl { text-align: left; font-size: 12px; padding: 0.5rem 0 0; }

@keyframes badge_spin {
    0% {
        transform: rotate(0deg);
    }
    30% {   /* rotate smoothly in first 2s of 3s total */
        transform: rotate(360deg);
    }
    100% {      /* pause at the end for remaining 1s */
        transform: rotate(360deg);
    }
}

/* -------------------------------------------- campaign_news */

.campaign_news .col { width: 50%; box-sizing: border-box; padding: 4rem 0 5rem; }
.campaign_news.col1 .col { width: 100%; }
.campaign_news.col1 .col_wrap { margin: auto; }
.campaign_news .col_wrap { max-width: 800px; margin: 0 auto; margin-left: 0; }
.campaign_news .col .inner { max-width: 605px; width: 88%; }
.campaign_news h4 { padding-bottom: 2rem; }
.campaign_news h4 span { display: block; font-size: 3rem; }
.campaign_news h4 small { font-size: 15px; }
.campaign_news .btn_wrap { padding: 3rem 0 1rem; }

.campaign_news .slide { max-width: 280px; width: 48%; }
.campaign_news .slide a { display: block; }
.campaign_news .slide .date { font-size: 12px; text-align: right; padding: 0.75rem 0 0; }
.campaign_news .slide .ttl { font-weight: 600; padding-top: 0.5rem; }


.campaign_news .campaign .col_wrap { margin-right: 0; margin-left: auto; }

/* -------------------------------------------- news */

/* -------------------------------------------- tablet */

@media screen and (max-width: 1100px) {

    .header_wrap { padding: 1rem 0; width: 92%; }
    .header_wrap .logo { width: 280px; }
    .header_marquee { width: calc(100vw - 520px); }

    header .menu_btn { width: 70px; }

    main { padding-top: 82px; }

    .fv_slider .slide { width: 480px; }

    .concept .h_style1 { padding-bottom: 2rem; }
    .concept .txt { font-size: 14px; }
    .concept_wrap { padding-bottom: 3rem; }
    .concept_wrap .box_wrap  { width: 1000px; }

    .media_wrap { display: block; }
    .media_main { width: 100%; padding-bottom: 2rem; }

    .about h3 span { font-size: 2.75rem; }
    .about .inner { max-width: 420px; }
    .about .images { width: 1000px; }

    .about_wrap { padding-bottom: 0; }
    .about_wrap img { width: 88%; }

    .prod_head { padding: 1rem 0; }
    .prod_head span { font-size: 2rem; }

    .product_wrap { padding: 3rem 0 1rem; }
    .product_wrap .others ul li { margin: 0.5rem 0; }
    .product_wrap .ttl h4 span { font-size: 2rem; }
    .product_wrap .white_box { padding: 2rem 4%; }
    .product_wrap .img_wrap .badge { left: -1rem; top: -1rem; }
    .product_wrap .white_box .txt { font-size: 14px; }

    .product_wrap .others .caption { padding-bottom: 2rem; }

    .badge { width: 88px; height: 60px; }
    .badge span { font-size: 8px; }
    .badge.new span { font-size: 1rem; }

    .campaign_news { display: block; }
    .campaign_news .col { width: 100%; }
    .campaign_news .col_wrap { margin: 0 auto !important; }
}

/* -------------------------------------------- sp */

@media screen and (max-width: 767px) {

    main { padding-top: 63px; }
    .header_wrap { width: 100%; }
    .header_wrap { padding: 1rem 3%; }
    .header_wrap .logo { width: 240px; }

    .fv { padding: 0; }
    .fv_wrap { width: 100%; }
    .fv_slider::before,
    .fv_slider::after { display: none; }

    .fv_slider .slide .box { background-color: #E9D45A; min-height: 0; }
    .fv_slider .slide .box::before { background-image: url(../img/index/fv_slide_border-sp.png); }
    .fv_slider .slide .box .cat::after { background-image: url(../img/common/box-corner-yellow.png); }

    .fv_marquee { height: calc(100% - 200px); width: 27px; box-sizing: border-box; top: 1rem; right: 1rem; z-index: 2; overflow: hidden; background-color: #fff; border-radius: 50px; pointer-events: none; }
    .fv_marquee p { animation: marquee_animation2 12s linear infinite; }
    .fv_marquee p span { font-size: 12px; display: block; width: 100%; writing-mode: vertical-rl; text-orientation: upright; line-height: 27px; padding: 25px 0 8px; 
        background: url(../img/common/icn-u.svg) no-repeat center top;
        background-size: 18px auto;
    }

    @keyframes marquee_animation2 {
        from { transform: translateY(0); }
        to { transform: translateY(-50%); }
    }
    
    .concept_wrap { padding: 0 6% 0; }
    .concept_wrap .box_wrap { width: 100%; position: static; top: auto; bottom: 0; left: 0; transform: unset; }
    .concept_wrap .box_wrap .boxes { padding-top: 120%; }
    .concept_wrap .box_wrap .img1 { z-index: 1; width: 20%; top: 18%; left: 39%; }
    .concept_wrap .box_wrap .img2 { z-index: 1; width: 22%; top: 60%; left: 20%; } 
    .concept_wrap .box_wrap .img3 { width: 23%; top: 65%; left: 0; }
    .concept_wrap .box_wrap .img4 { display: none; }
    .concept_wrap .box_wrap .img5 { top: 2%; left: 0; width: 42%; }
    .concept_wrap .box_wrap .img6 { width: 50%; top: 31%; left: 45%; }
    .concept_wrap .box_wrap .img7 { display: none; }
    .concept_wrap .box_wrap .img8 { width: 47%; top: 0; right: 0; }
    .concept_wrap .box_wrap .img9 { display: none; }
    .concept_wrap .box_wrap .img10 { display: none; }

    .concept .txt { font-size: 13px; padding-bottom: 2rem; }
    .concept_marquee { padding-top: 2rem; }
    .concept_marquee .marquee_wrap { width: 2720px; }
    .concept_marquee img { width: 320px; }

    .media_list li { width: 48%; max-width: none; margin-bottom: 1.5rem; }
    
    .media_main { padding: 4rem 6% 2rem; }
    .media_main .btn_wrap .btn { width: calc(100% - 50px); max-width: 320px; box-sizing: border-box; min-width: 0; }
    .media_main .btn_wrap .sns_ig { margin-left: 1rem; }

    .about { padding: 3rem 0; }
    .about h3 { position: relative; z-index: 2; }
    .about h3 span { font-size: 2.25rem; }
    .about h3 small { padding-top: 0.5rem; font-size: 13px; }
    
    .about .inner { max-width: 520px; }
    .about .images { height: 100%; z-index: 1; width: 100%; max-width: 480px; }
    .about .images .img_wrap { padding-top: 500px; height: 100%; }
    
    .about .images .obj15,
    .about .images .obj12,
    .about .images .obj11,
    .about .images .obj10,
    .about .images .obj8,
    .about .images .obj5,
    .about .images .obj2,
    .about .images .img5,
    .about .images .img4,
    .about .images .img3,
    .about .images .img2 { display: none; }

    .about .images .obj1 { width: 33%; top: 8%; left: 3%; }
    .about .images .obj3 { width: 27%; top: 15%; left: 6%; transform: rotate(-35deg); }
    .about .images .obj4 { width: 33%; top: 52%; left: 11%; }
    .about .images .obj6 { width: 31%; top: 62%; left: 14%; }
    .about .images .obj9 { width: 40%; top: 9%; left: 57%; }
    .about .images .obj7 { width: 32%; top: 15%; left: 61%; transform: rotate(32deg); }
    .about .images .obj13 { width: 34%; top: 52%; left: 51%; }
    .about .images .obj14 { width: 31%; top: 61%; left: 53%; }

    .about_wrap { overflow: hidden; padding: 5rem 0 18rem; }
    .about_wrap img { width: 480px; position: relative; left: 50%; transform: translateX(-50%); z-index: 0; }
    .about_wrap .txt { padding-top: 2rem; font-size: 13px; }

    .product_wrap .ttl { text-align: left; }
    .product_wrap .ttl .num { text-align: left; padding-bottom: 1rem; }
    .product_wrap .ttl .num span { text-align: center; font-size: 1.5rem; width: 90px; height: 58px; line-height: 58px; }
    .product_wrap .ttl h4 span { font-size: 1.75rem; }
    .product_wrap .ttl .sub { font-size: 1rem; }
    .product_wrap .white_box { padding: 1.25rem 4% 2rem; }
    .product_wrap .white_box .img_box { width: 100%; }
    .product_wrap .white_box .ttl { font-size: 1.25rem; padding: 1.5rem 0 1rem; }
    .product_wrap .white_box .txt { text-align: left; font-size: 13px; }
    .product_wrap .others .caption { font-size: 1.25rem; margin: 0; }
    .product_wrap .others ul { padding: 0; margin-left: -20px; width: 100%; }
    .product_wrap .others ul li { width: calc((100% - 40px) / 2); margin-left: 20px; box-sizing: border-box; padding: 0; }
    .product_wrap .img_wrap .badge { left: auto; right: -2%; top: -2rem; }

    .campaign_news h4 span { font-size: 2.75rem; }
    .campaign_news h4 small { font-size: 1rem; }
    .campaign_news .col { padding: 3rem 0 2.5rem; }
    .campaign_news .slide { width: 100%; max-width: none; padding: 0.75rem 0 }
    .campaign_news .slide a { display: flex; justify-content: space-between; }
    .campaign_news .slide .pic { width: 110px; border: 1px; }
    .campaign_news .slide .info { width: calc(100% - 120px); }
    .campaign_news .slide .date { text-align: left; padding: 0 0 0.25rem; }

    .badge { width: 81px; height: 52px; }
    
}