@charset "utf-8";

/* オリジナル CSS */

/* 全体の設定 ここから ============================ */

body {
    background-color: #745523;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 500;
}

/* ============================ 全体の設定 ここまで */

/* headerの設定 ここから ============================ */

header {
    background-image: url(../image/BGimg/headerStar.png);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: top right;
    background-color: #F5DD61;
    position: relative;
    padding: 7vw 3.5vw 12vw 3.5vw;
}

.topTitle {
    font-family: "Caprasimo", serif;
    font-size: clamp(36px, 8vw, 70px);
    display: flex;
    flex-wrap: wrap;
    width: 35vw;
}

header .nav_sp {
    position: absolute;
    right: 0;
    top: 0;
}

header .topImg {
    text-align: center;
    margin-bottom: 5vw;
}

header .topImg_kinako {
    height: auto;
    width: clamp(36px, 80vw, 1000px);
}

header .headerText {
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    font-size: clamp(20px, 4vw, 70px);
    margin-bottom: 1vw;
}

header .topTextPC {
    display: none;
}

/* navの設定 ここから *************** */
#nav_pc {
    display: none;
}

/* ハンバーガーメニューの設定　ここから *************** */

/* チェックボックスを非表示にする */
.drawer_hidden {
    display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
    display: flex;
    height: 60px;
    width: 60px;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
    content: '';
    display: block;
    height: 3px;
    width: 33.59px;
    border-radius: 3px;
    background-color: #ffffff;
    transition: 0.5s;
    position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
    bottom: 10px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
    top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked~.drawer_open span {
    background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked~.drawer_open span::before {
    bottom: 0;
    transform: rotate(45deg);
}

#drawer_input:checked~.drawer_open span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav_content {
    width: 40%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;
    /* メニューを画面の外に飛ばす */
    z-index: 99;
    background: rgba(192, 192, 192, 0.8);
    transition: .5s;
    padding: 60px 10px 0 10px;
}

.nav_content .nav_list li {
    margin-bottom: 20px;
    font-size: clamp(18px, 4vw, 30px);
    line-height: 1em;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked~.nav_content {
    left: 60%;
    /* メニューを画面に入れる */
}

/* オーバーレイ背景（外側クリック用） */
.nav_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* 半透明の黒背景 */
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
    z-index: 98;
    /* メニューの下、コンテンツの上 */
}

/* チェックが入ったら背景を表示してクリック可能にする */
#drawer_input:checked~.nav_overlay {
    opacity: 1;
    pointer-events: auto;
}

/* *************** navの設定 ここまで */
/* *************** ハンバーガーメニューの設定　ここまで */

/* ============================ headerの設定 ここまで */

/* 空飛ぶキナコの設定 ここから ============================ */
.flying-kinako {
    position: fixed;
    bottom: -200px;
    right: -200px;
    z-index: 50;
    animation: flyAway 8s ease-in-out 2s infinite;
    pointer-events: none;
    /* クリックを無効化 */
}

.flying-kinako img {
    width: clamp(100px, 15vw, 200px);
    height: auto;
}

@keyframes flyAway {
    0% {
        bottom: -200px;
        right: -200px;
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
    }

    10% {
        opacity: 1;
    }

    50% {
        bottom: 50vh;
        right: 50vw;
        transform: scale(1) rotate(-5deg);
    }

    90% {
        opacity: 1;
    }

    100% {
        bottom: 100vh;
        right: 100vw;
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
}

/* ============================ 空飛ぶキナコの設定 ここまで */

/* mainの設定 ここから ============================ */
main {
    padding: 5vw;
    text-align: center;
    background-image: url(../image/BGimg/bottomStars.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 85%;
    font-size: clamp(14px, 3vw, 100px);
    line-height: 1.4em;
    letter-spacing: 0.1em;
}

.characters,
.news,
.X,
.goods {
    background-image: url("../image/BGimg/editBGhazai.jpg");
    background-repeat: repeat;
    margin: 0 0 5vw 0;
    border-radius: 2vw;
    padding: 5vw 4vw 3vw 4vw;
}

.titleText {
    font-family: "Rubik Bubbles", serif;
    font-weight: 400;
    font-style: normal;
    text-transform: capitalize;
    font-size: clamp(30px, 7vw, 100px);
    margin-bottom: 1vw;
}

.titleTextRuby {
    font-size: clamp(14px, 3vw, 30px);
    margin-bottom: 2vw;
}

.viewMore {
    text-align: end;
    font-size: clamp(12px, 3vw, 24px);
    letter-spacing: 0;
}

.yajirusiSankaku {
    font-size: clamp(8px, 2vw, 20px);
}


/* 特設サイトバナーの設定 ここから ============================ */

.banner img {
    width: 90%;
    margin-bottom: 6vw;
}

.bannerPC {
    display: none;
}

/* ============================ 特設サイトバナーの設定 ここまで */


/* キャラクター紹介の設定 ここから ============================ */
.characterName {
    font-weight: bold;
    font-size: clamp(14px, 4vw, 50px);
    margin-bottom: 3vw;
}

.charactersKinakoContent {
    display: flex;
    flex-flow: column;
    text-align: center;
    border-bottom: dashed 0.3em #000;
    gap: 2vw;
}

.charactersChenilleContent {
    display: flex;
    flex-flow: column;
    text-align: center;
    gap: 2vw;
    margin-top: 4vw;
}

.charactersText {
    text-align: left;
    margin-bottom: 1.6em;
}

.charactersImgKinako {
    max-width: 300px;
    width: 30vw;
}

.characterImgChenille {
    max-width: 300px;
    width: 30vw;
}

.kinakononakamatachiBtn {
    display: none;
}

/* ============================ キャラクター紹介の設定 ここまで */

/* Newsの設定 ここから ============================ */

.newsTextContent {
    text-align: left;
    margin-bottom: 2vw;
}

.newsText {
    padding: 2vw;
    border-bottom: dashed 0.1vh #000;
    line-height: 1.5em;
}

/* ============================ Newsの設定 ここまで */

/* Xの設定 ここから ============================ */
.textKyu {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: bold;
    font-size: clamp(25px, 6vw, 500px);
}

.X img {
    width: 80%;
    height: auto;
    border: solid black 1px;
    margin: 30px 0 10px 0;
}

/* ============================ Xの設定 ここまで */

/* グッズ紹介の設定 ここから ============================ */

.goods img {
    width: 90%;
    height: auto;
}

.onlineshopBtn {
    display: none;
}

/* ============================ グッズ紹介の設定 ここまで */

.topBackBtn {
    width: clamp(75px, 20vw, 300px);
}

/* ============================ mainの設定 ここまで */

/* footerの設定 ここから ============================ */

footer {
    text-align: center;
    color: #ffffff;
    font-size: clamp(20px, 5vw, 100px);
    line-height: 1.4em;
    letter-spacing: 0.1em;
}

.SNSIconContent {
    margin: 5vw 0 3vw;
    display: flex;
    justify-content: center;
    gap: 10vw;
}

.SNSIcon {
    width: clamp(20px, 5vw, 60px);
}

.nav_end {
    display: none;
}

.copyright {
    font-size: clamp(10px, 3vw, 30px);
    line-height: 1.4em;
    letter-spacing: 0.1em;
    margin: 3vh 0 2vh;
}


/* ============================ footerの設定 ここまで */







/* レスポンシヴ対応　768px以上ver ここから ============================ */
@media (width >=768px) {


    /* 全体の設定 ここから ============================ */

    /* ============================ 全体の設定 ここまで */

    /* headerの設定 ここから ============================ */

    header {
        height: 48vw;
        background-image: url(../image/BGimg/PCheaderstar.png), url(../image/BGimg/BlackKinoko.png);
        background-size: 100%;
        background-position-x: center, center;
        background-position-y: -2vw, 43vw;
        background-size: 100%, 40%;
        background-repeat: no-repeat, repeat-x;
        padding: 3vw 3.5vw 4vw 3.5vw;
    }

    .topTitle {
        font-size: clamp(24px, 5vw, 100px);
        display: block;
        width: 70%;
        position: absolute;
        top: 18vw;
        right: 1.5vw;
        text-align: center;
    }

    header .topImg {
        position: absolute;
        top: 14vw;
        left: 5vw;
        margin-bottom: 2vw;
    }

    header .topImg_kinako {
        height: auto;
        width: clamp(20px, 30vw, 1000px);
    }

    header .headerText {
        font-size: 2.5vw;
        position: absolute;
        top: 25vw;
        right: 1.5vw;
        width: 70vw;
        text-align: center;
    }

    header .topTextPC {
        display: block;
        font-family: "Kiwi Maru", serif;
        font-weight: 400;
        font-style: normal;
        font-size: clamp(16px, 1.5vw, 50px);
        margin-top: 5vw;
    }

    /* navの設定 ここから *************** */

    #nav_sp {
        display: none;
    }

    #nav_pc {
        background-color: #745523;
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        width: 100%;
        height: 3.5vw;
        font-size: clamp(16px, 1.4vw, 30px);
        color: #ffffff;
    }

    .nav_list_pc {
        display: flex;
        justify-content: end;
        gap: 3vw;
        margin: 0 1.5vw 0 0;
    }

    .navLogo{
        height: 3.5vw;
        width: auto;
    }

    .nav_content_pc{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.5vw;
        margin-left:3.5vw;
    }

   

    /* *************** navの設定 ここまで */

    /* ============================ headerの設定 ここまで */

    /* mainの設定 ここから ============================ */

    main {
        padding: 5vw 9vw 0;
        position: relative;
        background-image: none;
        background-image: url(../image/BGimg/WhiteKinoko.png),
            url(../image/BGimg/BGBird.png), url(../image/BGimg/BGBird.png),
            url(../image/BGimg/BGLeafLeft.png), url(../image/BGimg/BGLeafLeft.png),
            url(../image/BGimg/BGLeafRight.png), url(../image/BGimg/BGLeafRight.png),
            url(../image/BGimg/BGLeafRound.png),
            url(../image/BGimg/BGMashroomTri.png),
            url(../image/BGimg/BGMashroomRound.png),
            url(../image/BGimg/BGStarFace.png),
            url(../image/BGimg/BGStarBig.png),
            url(../image/BGimg/BGStarSmall.png);
        background-size: 100%;
        background-position-x: center, 2%, 95%, 15%, 2%, 95%, 90%, 95%, 10%, 90%, 32%, 5%, 15%;
        background-position-y: 67.5%, 13%, 65%, 6%, 65%, 37%, 92%, 2%, 39.5%, 14.5%, 39%, 92%, 99%;
        background-size: 73%, 6%, 6%, 5%, 5%, 6%, 4%, 8%, 9%, 8.5%, 6%, 7.5%, 4%;
        background-repeat: no-repeat;
    }

    .characters,
    .news,
    .X,
    .goods {
        margin: 0 0 3vw 0;
        border-radius: 2vw;
        padding: 2vw 2vw 2vw 2vw;
    }

    .titleText {
        font-family: "Rubik Bubbles", system-ui;
        font-weight: 400;
        font-style: normal;
        text-transform: capitalize;
        font-size: clamp(16px, 4vw, 100px);
        text-shadow: 0px 3px 8px #a18f52;
        line-height: 0.8;
    }

    .titleTextRuby {
        font-size: clamp(14px, 1.8vw, 30px);
        line-height: 0.8;
    }


    /* 特設サイトバナーの設定 ここから ============================ */

    .banner {
        display: none;
    }

    .bannerPC {
        display: block;
    }

    .bannerPC img {
        width: 55vw;
        margin-bottom: 5vw;
    }

    /* ============================ 特設サイトバナーの設定 ここまで */

    /* キャラクター紹介の設定 ここから ============================ */

    .characters {
        padding-bottom: 0;
    }

    .charactersWrap {
        display: flex;
        justify-content: space-between;
        gap: 2vw;
    }

    .charactersKinakoContent,
    .charactersChenilleContent {
        display: flex;
        flex-flow: row;
        width: 40vw;
        margin-top: 0;
        border: 0;
    }

    .charactersImgKinako {
        width: 12vw;
    }

    .characterImgChenille {
        width: 10vw;
    }

    .characterName {
        font-size: 2vw;
        margin-bottom: 0;
        text-align: left;
    }

    .charactersText {
        font-size: clamp(14px, 1.2vw, 50px);
        line-height: 1.1em;
    }

    .kinakononakamatachiBtn {
        display: inline-block;
        border-radius: 50em;
        background-color: #ffbc04;
        width: auto;
        margin: 0 auto 3vw;
        padding: 1vw 2vw;
        font-size: clamp(14px, 2vw, 50px);
        font-weight: normal;
    }

    /* ============================ キャラクター紹介の設定 ここまで */

    /* news&Xの設定 ここから ============================ */
    .newsAndX {
        display: flex;
        justify-content: space-between;
        margin-bottom: 9vw;
    }

    .news,
    .X {
        width: 39vw;
    }

    .newsText {
        font-size: clamp(14px, 1.2vw, 50px);
        padding: 1vw;
    }

    .X img {
        width: 70%;
    }

    .textKyu {
        font-size: clamp(25px, 3.8vw, 500px);
    }

    /* ============================ news&Xの設定 ここまで */

    /* グッズ紹介の設定 ここから ============================ */
    .onlineshopBtn {
        display: inline-block;
        border-radius: 50em;
        background-color: #ffbc04;
        width: auto;
        margin: 0 auto 3vw;
        padding: 1vw 2vw;
        font-size: clamp(14px, 2vw, 50px);
        font-weight: normal;
    }

    /* ============================ グッズ紹介の設定 ここまで */

    .topBackBtn {
        width: clamp(30px, 11vw, 300px);
        /* 最小値,基準値,最大値 */
        position: absolute;
        right: 5vw;
        bottom: 2vw;
    }

    /* ============================ mainの設定 ここまで */

    /* footerの設定 ここから ============================ */

    footer {
        font-size: clamp(16px, 3vw, 100px);
        background-image: url(../image/BGimg/bottomStarsPC.png);
        background-repeat: no-repeat;
        background-size: 90%;
    }

    .SNSIconContent {
        margin: 2vw 0 3vw;
        gap: 10vw;
    }

    .SNSIcon {
        width: clamp(16px, 3vw, 60px);
    }

    .nav_end {
        display: block;
        line-height: 1.0;
        margin-top: 3vw;
    }

    .nav_list_end {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 62vw;
        margin: auto;
    }

    .nav_list_end li a {
        font-size: clamp(14px, 1.2vw, 24px);
        font-weight: lighter;
        padding: 0 2vw;
        border-left: solid 1px #fff;
    }


    .navRight {
        border-right: solid 1px #fff;
    }


    .copyright {
        font-size: clamp(14px, 1.2vw, 24px);
        font-weight: lighter;
        margin: 1vw auto 3vw;
    }

    /* ============================ footerの設定 ここまで */
}

/* ============================ レスポンシヴ対応　769px以上ver ここまで *