@charset "UTF-8";
/* フォント */
body {
    min-width: 1280px;
    overflow-y: scroll;
}
a:hover {
    color: var(--font-hover-color);
}
:root {
}
.l-wrapper {
    display: flex;
}
.top-mv-show .l-wrapper {
    opacity: 0;
}
body:not(.top-mv-show) .p-hero {
    display: none;
}
section {
    padding-top: 100px;
}

/* =====================================================
*/
/* サイトトップ画像 */
/*
 ===================================================== */
.p-hero {
    background-image: url(../img/top/img-main_character.png),
        url(../img/top/img-main.jpg);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: clamp(800px, 84%, 1624px) auto, cover;

    height: 100vh;

    min-height: 840px;

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100000;
}
.p-hero h1 {
    font-size: 2rem;
}
.p-hero h1 img {
    display: block;
    width: 300px;
    height: auto;
}
/* =====================================================
*/
/* サイトの導入説明文(トップ画像の下セクション) */
/*
 ===================================================== */
.p-top-desc {
    /* 背景カレンダーの画像 */
    background-image: url(../img/top/img-about_back_01.jpg);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: clamp(170px, 48%, 360px) auto;
}
.p-top-desc__letter-wrap {
    padding-bottom: 50px;
}
.p-top-desc__letter-wrap p {
    margin: 0;
    font-size: 2rem;
    line-height: 2;
}

.p-top-desc__letter-wrap p:not(p:last-of-type) {
    margin-bottom: 1em;
}

.p-top-desc__policy {
    margin-top: 50px;
}
.p-top-desc__policy-keyword {
    width: calc(100% - 40px);
    max-width: 600px;
    display: block;
    margin: 0 auto;
}
.p-top-desc__policy-pictures {
    width: calc(100% - 60px);
    max-width: 540px;
    margin: -50px 0 50px 0;
    position: relative;
    z-index: -1;
}
.p-desc__policy .c-img-link {
    background-image: url(../img/btn-back_yellow.png);
    transform: scaleY(-1);
}
.p-desc__policy .c-img-link:hover {
    background-image: url(../img/btn-back_yellow_on.png);
}
.p-desc__policy .c-img-link span {
    transform: scaleY(-1);
}
/* =====================================================
*/
/* ニュース&トピック */
/*
 ===================================================== */
.p-news-topics {
    padding-top: 0;
}
/* ------------------------------------- */
/* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */
/*   h2文字共通設定    */
.p-top-section-title1 {
    font-family: var(--font-shantell-sans);
    font-weight: 600;
    font-style: italic;
    font-size: 10rem;
    text-align: center;
    letter-spacing: -0.05em;
    padding-bottom: 100px;
}
.p-top-section-title__sub {
    font-family: var(--font-zen-maru-gothic);
    color: var(--font-p-color);
    font-weight: bold;
    font-style: normal;
    display: block;
    font-size: 4rem;
    text-align: center;
    letter-spacing: 0.05em;
}
/* ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ */
/* ------------------------------------- */

/* h2ニュース&トピック文字固有設定
------------------------------------------- */
.p-news-topics .p-top-section-title1 {
    color: var(--blue3);
}
.p-news-topics__title-litle-letter {
    font-size: 0.6em;
}
/* バナー
------------------------------------------- */
.p-news-topics__bnr-link-group {
    display: flex;
    width: 620px;
    justify-content: space-between;
}
.p-news-topics__bnr-link-group:first-of-type {
    margin-top: 50px;
}
.p-news-topics__bnr-link-group + .p-news-topics__bnr-link-group {
    margin-top: 20px;
}
/* もっと見る(News&Topics詳細) */
.p-news-topics__bnr-more {
    background-image: url(../img/btn-back_yellow.png);
}
.p-news-topics__bnr-more:hover {
    background-image: url(../img/btn-back_yellow_on.png);
}
/* フェイスブック */
.p-news-topics__bnr-facebook {
    background-image: url(../img/btn-back_blue.png);
}
.p-news-topics__bnr-facebook:hover {
    background-image: url(../img/btn-back_blue_on.png);
}
/* インスタグラム */
.p-news-topics__bnr-instagram {
    background-image: url(../img/btn-back_pink.png);
}
.p-news-topics__bnr-instagram:hover {
    background-image: url(../img/btn-back_pink_on.png);
}
/* =====================================================
*/
/* Products商品紹介 */
/*
 ===================================================== */
.p-products {
    padding-top: 100px;
    background-color: var(--yellow3);
}
/* タイトルカラー */
.p-products .p-top-section-title1 {
    color: var(--orange1);
}
/* 共通設定 */
/* ################################################## */
/* ################################################## */
.p-products__image-item:not(.p-products__image-item:first-of-type),
.p-products__yahoo-image-item,
.p-products__bnr-group {
    margin-top: 100px;
}
/* ################################################## */
/* ################################################## */

/* 画像入りリンク */
.p-products__image-item {
    width: fit-content;
}
.p-products__image-item-picture {
    width: 400px;
    height: auto;
    margin-bottom: 20px;
}
.p-products__image-item:nth-of-type(even) {
    margin-left: auto;
}

.p-products__image-item-benzo {
    background-image: url(../img/btn-back_blue.png);
}
.p-products__image-item-benzo:hover {
    background-image: url(../img/btn-back_blue_on.png);
}
.p-products__image-item-twin {
    background-image: url(../img/btn-back_pink.png);
}
.p-products__image-item-twin:hover {
    background-image: url(../img/btn-back_pink_on.png);
}
/* ヤフー店 */
.p-products__yahoo-image-item {
    width: 540px;
    height: auto;
    display: block;
    margin-inline: auto;
}
/* バナー */
.p-products__bnr:not(.p-products__bnr:last-of-type) {
    display: block;
    margin-bottom: 20px;
}
.p-products__bnr {
    display: block;
    width: 380px;
}
.p-products__bnr:nth-of-type(even) {
    margin-left: auto;
}
/* =====================================================
*/
/* リンク集セクション */
/*
 ===================================================== */
.p-link-section img {
    width: 540px;
    height: auto;
}
.p-link-section a {
    display: block;
    width: fit-content;
}
.p-link-section a:not(.p-link-section a:last-of-type) {
    margin-bottom: 100px;
}
.p-link-section a:nth-of-type(even) {
    margin-left: auto;
}
/* =====================================================
*/
/* SNSセクション */
/*
 ===================================================== */
.p-sns .p-top-section-title1 {
    color: var(--green3);
}
.p-sns {
    background-color: var(--green4);
}
.p-sns__instagram {
    max-width: 500px;
    width: calc(100% - 40px);
    margin-inline: auto;
}
.p-sns__instagram #sb_instagram #sbi_images {
    padding-bottom: 0;
}
.p-sns__facebook {
    text-align: center;
    margin-inline: auto;
    max-width: 500px;
    width: calc(100% - 40px);
}
.p-sns__group > div:not(div:last-of-type) {
    margin-bottom: 40px;
}
/* モバイル */
@media screen and (max-width: 767px) {
    body {
        min-width: inherit;
    }
    /* =====================================================
    */
    /* サイトトップ画像 */
    /*
    ===================================================== */
    .p-hero {
        background-image: url(../img/top/img-main_character_sp.png),
            url(../img/top/img-main_sp.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: center, center;
        background-size: auto clamp(480px, 65%, 528px), cover;
        min-height: 600px;
        min-width: 375px;
        z-index: 1000000;
    }

    .p-hero h1 img {
        width: 200px;
    }

    .l-wrapper {
        width: 100%;
        display: block;
    }

    /* =====================================================
    */
    /* サイトの導入説明文(トップ画像の下セクション) */
    /*
    ===================================================== */
    .p-top-desc {
        padding-top: 129px;
    }
    .p-top-desc__letter-wrap {
        padding-bottom: 50px;
    }
    .p-top-desc__letter-wrap p {
        font-size: 1.6rem;
        line-height: 1.625;
    }
    .p-top-desc__policy-pictures {
        margin-top: -30px;
        margin-bottom: 30px;
    }

    .p-top-desc__policy .c-img-link {
        margin-top: 29px;
    }
    /* =====================================================
    */
    /* ニュース&トピック */
    /*
    ===================================================== */
    /* h2文字 */
    .p-top-section-title1 {
        font-size: 5rem;
        padding-bottom: 50px;
    }
    .p-top-section-title__sub {
        font-size: 2rem;
        letter-spacing: 0.27em;
    }
    /* バナー
    ------------------------------------------- */
    .p-news-topics__bnr-link-group {
        width: 89.33vw;
    }
    .p-news-topics__bnr-link-group:first-of-type {
        margin-top: 30px;
    }
    .p-news-topics__bnr-link-group + .p-news-topics__bnr-link-group {
        margin-top: 10px;
    }
    /* =====================================================
    */
    /* Products商品紹介 */
    /*
    ===================================================== */
    /* 共通設定 */
    .p-products__image-item:not(.p-products__image-item:first-of-type),
    .p-products__yahoo-image-item,
    .p-products__bnr-group {
        margin-top: 50px;
    }
    /* 画像入りリンク */
    .p-products__image-item-picture {
        width: 200px;
        margin-bottom: 10px;
    }
    /* ヤフー店 */
    .p-products__yahoo-image-item {
        width: 300px;
    }
    /* バナー */
    .p-products__bnr:not(.p-products__bnr:last-of-type) {
        margin-bottom: 10px;
    }
    .p-products__bnr {
        display: block;
        width: 210px;
    }
    /* =====================================================
    */
    /* リンク集セクション */
    /*
    ===================================================== */
    .p-link-section img {
        width: 300px;
    }
    .p-link-section a:not(.p-link-section a:last-of-type) {
        margin-bottom: 50px;
    }
    /* =====================================================
    */
    /* SNSセクション */
    /*
    ===================================================== */
    .p-sns__group div:not(div:last-of-type) {
        margin-bottom: 30px;
    }
}
