:root {
    --color-purple: #8f5e89;
    --color-box-bg: #f6f4ec;
    --color-red: #e60012;
    --color-yellow: #fed400;
    --color-white: #fff;
    --color-black: #333;
    --color-gray: #aaabab;
    --color-green-light: #bce37e;
    --color-green: #8fc43d;
    --color-pink: #f091a7;
}

/* remの設定 */
html {
    font-size: calc(100 / 1920 * 1vw);;
}
@media (max-width: 1200px) {
    html {
        font-size: 0.625px;
    }
}
body {
    font-size: 16px;
    min-width: 1200px;
}

/* 調整 */
.footer-bottom {
    margin-top: -10px;
}
.main a:hover {
    opacity: 1;
}

/* common */
.inner {
    width: 100%;
    padding: 0 240rem;
}
.color_red {
    color: var(--color-red);
}
.color_purple {
    color: var(--color-purple);
}
.font_b_irregular {
    font-weight: 700;
}
body.not_chrome .font_b_irregular {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* page_bg */
.page_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: 1200px;
    height: 100vh;
    height: 100dvh;
    background: url(../img/pc/product/randen/bg.jpg?v=1) repeat-y center top / 100% auto;
    will-change: background-position;
}
.page_bg_cover {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
}
.roadbed {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 600rem;
    height: 100%;
    background: url(../img/pc/product/randen/roadbed.png) repeat-y top center / 100% auto;
    z-index: 1;
    will-change: background-position;
}

/* main */
.main {
    min-width: 1200px;
    position: relative;
    z-index: 1;
    font-family: "Noto Sans JP", sans-serif;
    font-feature-settings: "palt";
    color: var(--color-black);
    font-weight: 700;
}
.main * {
    box-sizing: border-box;
}

/* .mv */
.mv {
    width: 100%;
    height: 950rem;
    padding-top: 20rem;
    position: relative;
}
.mv_ttl {
    width: 866rem;
    margin-inline: auto;
    line-height: 0;
}
.mv_note {
    width: 202rem;
    position: absolute;
    left: 36rem;
    bottom: 36rem;
}

/* content */
.content {
    padding: 260rem 0 360rem;
    display: flex;
    flex-direction: column;
    gap: 320rem;
}

/* section_box */
.section_box {
    width: 100%;
    border: 32rem solid var(--color-purple);
    background-color: var(--color-box-bg);
    padding-inline: 88rem;
}
.section_ttl_wrap {
    position: relative;
    width: 100%;
    height: 320rem;
}
.section_ttl_wrap::after {
    content: "";
    display: block;
    width: 300rem;
    height: 300rem;
    rotate: 45deg;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-block: auto;
}
.section_ttl_box {
    width: 100%;
    height: 100%;
    border: 16rem solid var(--color-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14rem;
    background-color: var(--color-white);
    position: relative;
    z-index: 1;
}
.section_ttl_box_inner {
    border: 6rem solid var(--color-yellow);
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section_ttl_box_deco {
    --deco-size: 17.5rem;
}
.section_ttl_box_deco::before,
.section_ttl_box_deco::after {
    content: "";
    display: block;
    position: absolute;
    border-top: var(--deco-size) solid var(--deco-color-top, transparent);
    border-left: var(--deco-size) solid var(--deco-color-left, transparent);
    border-right: var(--deco-size) solid var(--deco-color-right, transparent);
    border-bottom: var(--deco-size) solid var(--deco-color-bottom, transparent);
}
.section_ttl_box_deco::before {
    left: 0;
    --deco-color-left: var(--color-yellow);
}
.section_ttl_box_deco::after {
    right: 0;
    --deco-color-right: var(--color-yellow);
}
.section_ttl_box_deco_top::before,
.section_ttl_box_deco_top::after {
    top: 0;
    --deco-color-top: var(--color-yellow);
}
.section_ttl_box_deco_bottom::before,
.section_ttl_box_deco_bottom::after {
    bottom: 0;
    --deco-color-bottom: var(--color-yellow);
}
.section_ttl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36rem;
}
.section_ttl_txt {
    font-size: 48rem;
    line-height: 1;
    font-weight: 900;
}
.section_ttl_deco {
    width: 400rem;
    height: 127rem;
    position: absolute;
    top: -28rem;
    z-index: 1;
}
.section_ttl_deco_path {
    fill-rule: evenodd;
}

/* trip */
.trip {
    padding-block: 83rem 88rem;
    background: var(--color-box-bg) url(../img/pc/product/randen/trip_bottom_img.png) no-repeat center bottom / 100% auto;
}
.trip .section_ttl_img {
    width: 952rem;
}
.trip .section_ttl_wrap::after {
    background-color: var(--color-purple);
    left: 0;
}
.trip .section_ttl_deco {
    right: -57rem;
}
.trip .section_ttl_deco_path {
    fill: var(--color-red);
}
.trip_en_txt {
    font-size: 24rem;
    color: var(--color-gray);
    line-height: 1;
    font-weight: 900;
    text-align: center;
    margin-top: 52rem;
}
.trip_lead {
    margin-top: 28rem;
    position: relative;
}
.trip_lead_txt {
    font-size: 28rem;
    line-height: calc(60/28);
    text-align: center;
}
.trip_lead_line {
    background: linear-gradient(transparent 75%, var(--color-green-light) 75%);
}
.trip_lead_chara {
    position: absolute;
}
.trip_lead_chara1 {
    width: 319rem;
    top: 187rem;
    left: 0;
}
.trip_lead_chara2 {
    width: 168rem;
    top: 143rem;
    right: 96rem;
}
.news {
    margin-top: 39rem;
}
.news_ttl_wrap {
    width: 100%;
    height: 248rem;
    position: relative;
}
.news_ttl_wrap::after {
    content: "";
    display: block;
    width: 100%;
    height: 20rem;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin-block: auto;
    background: var(--color-box-bg) url(../img/pc/product/randen/line_repeat.jpg) repeat-x top left / auto 100%;
}
.news_ttl {
    width: 364rem;
    padding-inline: 58rem;
    background-color: var(--color-box-bg);
    position: relative;
    z-index: 1;
    margin-inline: auto;
}
.news_ttl_txt {
    position: absolute;
    top: 111rem;
    left: 138rem;
    width: 94rem;
}
.news_cont {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80rem;
    margin-top: 37rem;
}
.news_cont a {
    width: calc((100% - 80rem) / 2);
    display: block;
    color: var(--color-black);
    text-decoration: none;
    position: relative;
}
.news_date {
    font-size: 20rem;
    line-height: 1;
    font-weight: 500;
    color: var(--color-white);
    padding: 8rem 9rem;
    background-color: var(--color-gray);
    position: absolute;
    bottom: 100%;
    left: 0;
}
.news_link_img {
    width: 100%;
    height: 360rem;
    overflow: hidden;
}
.news_link_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news_link_txt_box {
    width: 100%;
    height: calc(100% - 360rem);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rem 45rem;
    position: relative;
    background-color: var(--color-yellow);
}
.news_link_txt_box::after {
    content: "";
    display: block;
    border-top: 12rem solid transparent;
    border-left: 17rem solid var(--color-red);
    border-bottom: 12rem solid transparent;
    position: absolute;
    top: 0;
    right: 24rem;
    bottom: 0;
    width: 0;
    height: 0;
    margin-block: auto;
}
.news_link_txt {
    font-size: 24rem;
    line-height: 1.5;
}
@media (hover: hover) {
    .news_link_txt_box {
        transition: background-color 0.3s;
    }
    .news_link_txt_box::after {
        transition: border-left-color 0.3s;
    }
    .news_link_txt {
        transition: color 0.3s;
    }
    .news_cont a:hover .news_link_txt_box {
        background-color: var(--color-red);
    }
    .news_cont a:hover .news_link_txt_box::after {
        border-left-color: var(--color-white);
    }
    .news_cont a:hover .news_link_txt {
        color: var(--color-white);
    }
}

/* about */
.about {
    padding-block: 90rem;
}
.about_list {
    display: flex;
    gap: 80rem;
}
.about_list {
    margin-top: 64rem;
}
.about_list li {
    width: calc((100% - 80rem) / 2);
}
.about_list_ttl {
    width: 388rem;
    height: 212rem;
    background: url(../img/pc/product/randen/about_ougi.png) no-repeat center / contain;
    margin-inline: auto;
    position: relative;
}
.about_list_ttl_img {
    position: absolute;
    top: 22rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    display: block;
}
.about_randen_ttl {
    width: 174rem;
}
.about_aran_ttl {
    width: 243rem;
}
.about_list_cont {
    display: flex;
    flex-direction: column;
    gap: 24rem;
    margin-top: 24rem;
    position: relative;
    z-index: 1;
}
.about_list_img {
    width: 100%;
    line-height: 0;
}
.about_list_txt {
    font-size: 20rem;
    line-height: calc(36/20);
    font-weight: 500;
}
.about_btn_area {
    position: relative;
    margin-top: 57rem;
}
.about_deco {
    position: absolute;
}
.about_deco1 {
    top: -104rem;
    right: 41rem;
    width: 312rem;
    height: 72rem;
}
.about_deco2 {
    top: 38rem;
    left: 39rem;
    width: 307rem;
    height: 74rem;
}
.about_deco_path {
    fill: var(--color-gray);
    fill-rule: evenodd;
}
.about_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 572rem;
    height: 152rem;
    margin-inline: auto;
    position: relative;
    z-index: 1;
    background-color: var(--color-white);
    border: 8rem solid var(--color-purple);
    padding: 7rem;
    text-decoration: none;
    color: var(--color-black);
}
.about_btn_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rem;
    width: 100%;
    height: 100%;
    border: 3rem solid var(--color-purple);
    position: relative;
}
.about_btn_deco {
    --deco-size: 9rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.about_btn_deco::before,
.about_btn_deco::after {
    content: "";
    display: block;
    position: absolute;
    border-top: var(--deco-size) solid var(--deco-color-top, transparent);
    border-left: var(--deco-size) solid var(--deco-color-left, transparent);
    border-right: var(--deco-size) solid var(--deco-color-right, transparent);
    border-bottom: var(--deco-size) solid var(--deco-color-bottom, transparent);
}
.about_btn_deco::before {
    left: 0;
    --deco-color-left: var(--color-purple);
}
.about_btn_deco::after {
    right: 0;
    --deco-color-right: var(--color-purple);
}
.about_btn_deco_top::before,
.about_btn_deco_top::after {
    top: 0;
    --deco-color-top: var(--color-purple);
}
.about_btn_deco_bottom::before,
.about_btn_deco_bottom::after {
    bottom: 0;
    --deco-color-bottom: var(--color-purple);
}
.about_btn_txt {
    font-size: 28rem;
}
.about_icn_blank {
    width: 22rem;
    height: 22rem;
}
.about_icn_blank_path {
    fill-rule: evenodd;
}
@media (hover: hover) {
    .about_btn_inner {
        transition: background-color 0.3s;
    }
    .about_btn_txt {
        transition: color 0.3s;
    }
    .about_icn_blank_path {
        transition: fill 0.3s;
    }
    .about_btn:hover .about_btn_inner {
        background-color: var(--color-purple);
    }
    .about_btn:hover .about_btn_txt {
        color: var(--color-white);
    }
    .about_btn:hover .about_icn_blank_path {
        fill: var(--color-white);
    }
}

/* collabo */
.collabo {
    padding-block: 83rem 173rem;
}
.collabo .section_ttl_img {
    width: 393rem;
}
.collabo .section_ttl_wrap::after {
    background-color: var(--color-green);
    right: 0;
}
.collabo .section_ttl_deco {
    left: -57rem;
    scale: -1 1;
}
.collabo .section_ttl_deco_path {
    fill: var(--color-pink);
}
.collabo_list {
    display: flex;
    flex-direction: column;
    gap: 120rem;
    margin-top: 117rem;
    position: relative;
    z-index: 2;
}
.collabo_list > li {
    position: relative;
}
.collabo_num_wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 23rem;
}
.collabo_num {
    width: 129rem;
}
.collabo_list_ttl {
    line-height: 0;
    padding-bottom: 36rem;
    background: url(../img/pc/product/randen/line_repeat.jpg) repeat-x left bottom / auto 20rem;
}
.collabo_detail_area {
    display: flex;
    flex-direction: column;
    gap: 16rem;
}
.collabo_detail {
    display: flex;
    align-items: flex-start;
    gap: 28rem;
}
.collabo_detail dt {
    padding-block: 8rem;
    background-color: var(--color-green);
    color: var(--color-white);
    font-size: 24rem;
    line-height: 1;
    text-align: center;
    width: 126rem;
    min-width: 126rem;
}
.collabo_detail dd {
    font-size: 28rem;
    line-height: calc(44/28);
    margin-top: -2rem;
}
.collabo_txt {
    font-size: 20rem;
    line-height: calc(36/20);
    font-weight: 500;
}
.collabo_deco_path {
    fill: var(--color-pink);
}
/* collabo1 */
.collabo_list_item1 {
    display: flex;
    justify-content: space-between;
    gap: 48rem;
}
.collabo1_img {
    width: 760rem;
    line-height: 0;
    position: relative;
}
.collabo1_pop {
    position: absolute;
    width: 250rem;
    top: -100rem;
    left: 491rem;
}
.collabo1_txt_area {
    width: 392rem;
}
.collabo1_list_ttl {
    width: 386rem;
}
.collabo1_txt {
    font-size: 20rem;
    line-height: calc(36/20);
    font-weight: 500;
    text-align: center;
}
.collabo1_txt1 {
    margin-top: 7rem;
}
.collabo1_detail {
    margin-top: 10rem;
    display: flex;
    flex-direction: column;
    gap: 11rem;
}
.collabo1_detail dt {
    font-size: 24rem;
    line-height: 1;
    background-color: var(--color-green);
    padding: 8rem;
    color: var(--color-white);
    text-align: center;
}
.collabo1_detail dd {
    font-size: 28rem;
    line-height: 1;
    text-align: center;
}
.collabo1_txt2 {
    margin-top: 38rem;
}
.collabo1_chara {
    position: absolute;
    width: 262rem;
    top: -285rem;
    right: 41rem;
}
/* collabo2 */
.collabo2_list_ttl {
    width: 390rem;
}
.collabo2_txt {
    margin-top: 32rem;
}
.collabo2_chara {
    position: absolute;
    top: -68rem;
    left: 584rem;
    width: 385rem;
}
.collabo2_deco {
    width: 312rem;
    position: absolute;
    bottom: 0;
    right: 0;
}
/* collabo3 */
.collabo3_detail_wrap {
    padding-left: 360rem;
}
.collabo3_list_ttl {
    width: 387rem;
}
.collabo3_txt {
    margin-top: 24rem;
}
.collabo3_pop {
    position: absolute;
    top: -40rem;
    right: 0;
    width: 250rem;
}
.collabo3_note_list {
    font-size: 20rem;
    line-height: calc(36/20);
    font-weight: 500;
    margin-top: 24rem;
}
.collabo3_chara {
    width: 194rem;
    position: absolute;
    top: -82rem;
    left: 62rem;
    z-index: 1;
}
.collabo3_deco {
    scale: -1 1;
    width: 335rem;
    position: absolute;
    left: 0;
    bottom: 0;
}

/* collabo4 */
.collabo4_detail_wrap {
    padding-left: 120rem;
}
.collabo4_list_ttl {
    width: 497rem;
}
.collabo4_txt {
    font-size: 28rem;
    line-height: calc(52/28);
    margin-top: 12rem;
}
.collabo4_chara {
    position: absolute;
    width: 198rem;
    top: -115rem;
    right: 153rem;
    z-index: 1;
}
.collabo4_deco {
    width: 350rem;
    position: absolute;
    bottom: 0;
    right: 108rem;
}
.collabo4_detail_wrap .collabo_num_wrap {
    gap: 32rem;
}
.bottom_logo {
    width: 767rem;
    margin-inline: auto;
    margin-top: 115rem;
}

/* bnr_nittai */
.bnr_nittai {
    display: block;
    line-height: 0;
    border-radius: 16rem;
    overflow: hidden;
    width: 1256rem;
    margin-inline: auto;
    box-shadow: 0px 5rem 14rem 1rem rgba(23, 21, 47, 0.4);
}

/* animation */
.about_list_ttl {
    --fadein-up: 80rem;
}
.fadein_left,
.fadein_right,
.fadein_up {
    opacity: 0;
    transition: opacity 0.4s ease-out, translate 0.4s ease-out;
}
.fadein_up {
    translate: 0 var(--fadein-up, 40rem);
}
.fadein_left {
    translate: -40rem 0;
}
.fadein_right {
    translate: 40rem 0;
}
.animation_loaded [data-offset-animation].is_animated .fadein_left,
.animation_loaded [data-offset-animation].is_animated .fadein_right,
.animation_loaded [data-offset-animation].is_animated.fadein_left,
.animation_loaded [data-offset-animation].is_animated.fadein_right,
.animation_loaded [data-offset-animation].is_animated .fadein_up,
.animation_loaded [data-offset-animation].is_animated.fadein_up {
    opacity: 1;
    translate: 0;
}