@charset "UTF-8";

/*********************************************************

					　　　　初期設定

**********************************************************/

html {
    font-family: "hiragino-mincho-pron", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: min(1.89vw,24px);
    line-height: 2;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: #eaeaea;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* クリック邪魔しない */
  z-index: 100;
}

main {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: auto;
}

.pc {
    display: block;
}

.sp {
    display: none;
}

.inner {
    width: 85%;
    margin: 0 auto;
    max-width: 1200px;
    height: auto;
}

 /* -----------------------------------ヘッダー----------------------------------- */ 

 header {
    position: relative;
 }

 h1 {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-200%);
    color: #eaeaea;
 }

/*------------------------------ メニュー ------------------------------*/

.move {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 2100px;
    margin: 0 auto;
}

.black {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: .6vw;
    max-height: 10px;
    background: #000;
    z-index: 1;
}

.move_inner {
    width: 100%;
    max-width: 2100px;
    height: auto;
    margin: 0 auto;
}

.sec0 {
    position: relative;
    margin:0 auto min(45vw,945px);
    overflow: hidden;
}

.inner00 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 90%;
    max-width: 1800px;
    transform: translateX(-50%);
    padding-top: min(5vw,105px);
}

.title_box {
    width: 20%;
    max-width: 300px;
}
.title {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 3vw;
}
.main_title {
    width: 80%;
    margin: 0 auto 2vw;
}
.main_title img {
    width: 100%;
}

nav {
    width: 75%;
    margin: 0 auto;
}
nav img {
    width: 100%;
    margin-bottom: 1.5vw;
}
nav a {
    display: block;
    transition: ease .3s;
}
nav a:hover {
    transform: scale(1.1);
}

.conveyor {
    position: relative;
    width: 67.5%;
    height: auto;
    margin-left: 32.5%;
    transform: translateY(-10px);
    z-index: 5;
}
.conveyor img {
    width: 100%;
    height: auto;
}

/* 移動するリフィル */

.moves,
.one_move {
    position: absolute;
    width: 6%;
    max-width: 125px;
    height: auto;
    top: -35%;
    right: -2%;
    z-index: 6;
}
.moves img,
.one_move img {
    width: 100%;
    height: auto;
}
@keyframes refill01 {
    0% {top: -35%; right: -2%;}
    90% {top: 40%; right: 58%;}
    98% {top: 74.8%; right: 58%;}
    100% {top: 74.8%; right: 58%;}
}

/* 一回だけ移動するリフィル */

.one_move01 {
    animation: one01 4s linear forwards;
    top: -18%;
    right: 13%;
}
.one_move02 {
    animation: one02 3s linear forwards;
    top: 0%;
    right: 26%;
}

@keyframes one01 {
    0% {top: -18%; right: 13%; opacity: 1;}
    85% {top: 40%; right: 58%; opacity: 1;}
    98% {top: 74.8%; right: 58%; opacity: 1;}
    100% {top: 74.8%; right: 58%; opacity: 0}
}
@keyframes one02 {
    0% {top: 0%; right: 26%; opacity: 1;}
    80% {top: 40%; right: 58%; opacity: 1;}
    98% {top: 74.8%; right: 58%; opacity: 1;}
    100% {top: 74.8%; right: 58%; opacity: 0;}
}

/* 動く手帳 */

.move_daily {
    position: absolute;
    top: 0;
    right: 56%;
    width: 10%;
    max-width: 210px;
    height: 100%;
}
.move_back {
    z-index: 5;
}
.move_front {
    z-index: 8;
}
.cover {
    width: 100%;
    height: 100%;
}
.sticky {
    position: sticky;
    top: 32.5vw;
    left: 0;
    width: 100%;
    height: auto;
}
.daily {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 9;
}

/* 手帳が開く */

.book {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity .5s ease,transform .6s ease;
}

.book_close {
    opacity: 1;
    transform: scale(1);
}

.book_open {
    transform: scale(1.18) translate(10%, 10%);
    opacity: 0;
}

.is-goal .book_close {
    opacity: 0;
    transform: scale(.98);
}

.is-goal .book_open {
    opacity: 1;
    transform: scale(1.18) translate(10%, 10%);
}

/* 手帳が左にスライドされる */

.sticky.is-after {
    animation: slide_left .8s linear forwards;
    opacity: 1;
    transform: translateX(0);
}
@keyframes slide_left {
    0% {transform: translateX(0); opacity: 1;}
    100% {transform: translateX(-50vw); opacity: 0;}
}

 /* -----------------------------------はじめに----------------------------------- */ 

.sec {
    position: relative;
    height: 152vw;
    max-height: 3180px;
    margin-bottom: min(45vw,945px);
}

 .sticky_wrap {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
 }

 .com {
    width: 35%;
    height: auto;
    transform: translate(0%,0%);
 }
 .desk {
    transform: translate(-43%,0);
    width: 250%;
    max-width: 1837px;
    height: auto;
 }
 .cat {
    position: absolute;
    top: 41%;
    right: 44%;
    width: 17%;
    height: auto;
 }
 .cat_img {
    position: relative;
    width: 100%;
    z-index: 5;
 }
 .cat_hand {
    position: absolute;
    top: 18%;
    right: 0;
    transform: translate(40%,0) rotate(0deg);
    width: 55%;
    aspect-ratio: 5 / 5.4 ;
    animation: cat .5s linear infinite;
    transform-origin: center bottom;
 }
 .cat_hand img {
    display: block;
    width: 100%;
    height: auto;
 }
@keyframes cat {
  0% {
    transform: translate(40%,0) rotate(0deg);
	}
  50% {
    transform: translate(40%,0) rotate(30deg);
	}
  100% {
    transform: translate(40%,0) rotate(0deg);
  }
}

.start_inner {
    width: 65%;
    max-width: 1100px;
    transform: translateY(
  clamp(
    -252px,
    calc(
      -68px + (-252 + 23.04) * (100vw - 768px) / (2100 - 768)
    ),
    -23.04px
    )
    );
}
 .start {
    display: block;
    margin-left: auto;
    width: 70%;
    max-width: 640px;
 }

 h2 {
    text-align: center;
    width: 50%;
    margin-bottom: 1.5em;
 }
.start_img {
    width: auto;
    height: clamp(25px,3.3vw,53px);
 }
 .start_text {
    font-family: kozuka-mincho-pr6n, serif;
    font-weight: 200;
    font-style: normal;
    font-size: min(2.21vw,28px);
    margin-bottom: 1em;
    line-height: 2;
    text-align: justify;
    transform: scaleX(.9);
    transform-origin: left center;
 }

 .space {
    display: block;
    height: min(45vw,945px);
    width: 100%;
 }

 /* ----------------------------------- 見る ----------------------------------- */ 

#sec02 {
    padding: min(10vw,210px) 0 2vw;
    overflow: hidden;
}

 #sec02 h2 {
    margin: 0 auto 5vw;
 }

.box_text {
    width: auto;
    height: clamp(32px,4vw,67px);
 }

 /* リフィルが現れる */

 .area {
    position: relative;
    width: 48%;
    height: auto;
    aspect-ratio: 12 / 3;
    margin: 0 auto;
 }

  .refill {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 0;
    right: -35%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    align-items: flex-start;
    z-index: 7;
}

.refill img {
    width: 14%;
    height: auto;
    max-width: 140px;
    aspect-ratio: 5 / 9 ;
}

 .refill img:nth-child(1) {
    transform: translateX(-100%);
 }
 .refill img:nth-child(2) {
    transform: translateX(-250%);
 }
 .refill img:nth-child(3) {
    transform: translateX(-400%);
 }
 .refill img:nth-child(4) {
    transform: translateX(-550%);
 }
 .refill img:nth-child(5) {
    transform: translateX(-700%);
 }
 .refill img:nth-child(6) {
    transform: translateX(-850%);
 }

.refill.active img {
    transform: translateX(0);
}
 .refill.active img:nth-child(1) {
    transition: .35s .2s ease;
 }
 .refill.active img:nth-child(2) {
    transition: .4s .4s ease;
 }
 .refill.active img:nth-child(3) {
    transition: .45s .6s ease;
 }
 .refill.active img:nth-child(4) {
    transition: .5s .8s ease;
 }
 .refill.active img:nth-child(5) {
    transition: .55s 1s ease;
 }
 .refill.active img:nth-child(6) {
    transition: .6s 1.2s ease;
 }

 .refill.active {
    right: 0%;
    transform: translateX(0%);
    transition: .8s 1.4s ease;
}

 /* ----------------------------------- 一覧 ----------------------------------- */ 

.wrapper {
    margin-top: min(10vw,210px);
    height: min(15vw,250px);
}

/*---------- リフィルのフィックス ----------*/
/* フェードアウト */
#sec03 {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
/* 現れる */
#sec03.is-visible {
    pointer-events: auto;
    opacity: 1;
}
/* フィックス */
#sec03.is-fixed {
    position: fixed;
    top: 0;
    left: 0%;
    width: 100vw;
    height: auto;
    max-height: 198px;
    background: #eaeaea;
    z-index: 50;
}
#sec03.is-fading {
  pointer-events: none;
}

/* 中身 */
.icon {
    display: flex;
    justify-content: space-between;
    width: 75%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 1vw 0;
    opacity: 0;
    transition: .5s ease;
}
.icon a {
    display: block;
    width: 15%;
    text-align: center;
    transition: opacity 0.5s ease;
}
.icon a:hover {
    opacity: .5;
}
.icon_img {
    display: block;
    margin: 0 auto;
    width: 80%;
    height: auto;
}

.icon_text {
    height: 1.1vw;
    min-height: 10px;
    max-height: 17px;
    width: auto;
}
.icon_text01 {
    height: 1.3vw;
    min-height: 13px;
    max-height: 17px;
    width: auto;
}

.wrapper.active02 .icon {
    opacity: 1;
}
 /* ----------------------------------- リフィル ----------------------------------- */ 

 /* Link飛ぶ際の空間 */
#sec004,
#sec005,
#sec006,
#sec007,
#sec008,
#sec009 {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 13vw;
    max-height: 198px;
    pointer-events: none;
}

#sec04 {
    position: relative;
    background: url(../img/back01.webp) no-repeat top center / contain; 
}
#sec05 {
    position: relative;
    background: url(../img/back02.webp) no-repeat top center / contain; 
}
#sec06 {
    position: relative;
    background: url(../img/back03.webp) no-repeat top center / contain; 
}
#sec07 {
    position: relative;
    background: url(../img/back04.webp) no-repeat top center / contain; 
}
#sec08 {
    position: relative;
    background: url(../img/back05.webp) no-repeat top center / contain; 
}
#sec09 {
    position: relative;
    background: url(../img/back06.webp) no-repeat top center / contain; 
}
.sec_refill {
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 3.64;
    align-content: center;
}

.refill_flex {
    display: flex;
    justify-content: space-between;
    height: auto;
}

 .refill_kind {
    display: flex;
    width: 55%;
    gap: 1.5em;
    z-index: 5;
 }

 .refill_text,
 .refill_text01 {
    width: 38%;
    text-align: justify;
 }

.text_color {
    color: #fff;
}
.text_color01 {
    text-shadow:
    0 0 4px  rgba(23, 23, 23, 1),
    0 0 8px  rgba(23, 23, 23, 1),
    0 0 20px rgba(23, 23, 23, 1),
    0 0 40px rgba(23, 23, 23, 1),
    0 0 80px rgba(23, 23, 23, .8),
    0 0 140px rgba(23, 23, 23, .75);
    color: #fff;
}
.text_color02 {
    text-shadow:
    0 0 4px  rgba(0, 103, 155, 1),
    0 0 8px  rgba(0, 103, 155, 1),
    0 0 20px rgba(0, 103, 155, 1),
    0 0 40px rgba(0, 103, 155, 1),
    0 0 80px rgba(0, 103, 155, 0.8),
    0 0 140px rgba(0, 103, 155, 0.75);
    color: #fff;
}

 .kind {
    position: relative;
    text-align: center;
    width: calc(100% / 3);
 }

 .note {
    display: block;
    width: 100%;
    margin-bottom: .5em;
 }

 .kind_text {
    width: auto;
    height: 1.5vw;
    max-height: 25px;
 }
 .kind_text02 {
    width: auto;
    height: 1.7vw;
    max-height: 30px;
 }
 .kind_text05 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 135%;
    height: auto;
 }
 .kind_text06 {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: auto;
 }

 .refill_text img {
    width: auto;
    height: 3vw;
    max-height: 45px;
    margin: .5em 0 1em ;
 }

 .refill_text01 img {
    width: auto;
    height: 5vw;
    max-height: 80px;
    margin: .5em 0 .1em;
 }

 .blank {
    display: block;
    width: 100%;
    height: 30vw;
 }

/* モーダル専用画像 */

.modal-data {
    display: none;
}

 /* ----------------------------------- 詳細 ----------------------------------- */ 

.sec01 {
    padding: 10vw 0;
    margin-bottom: 20vw;
}

#sec10 h2 {
    margin: 0 auto 3em;
}

.inner01 {
    max-width: 900px;
}

.detail {
    display: flex;
    max-width: 1000px;
    margin: 0 auto 5em;
    justify-content: space-between;
}

.nomal {
    width: 38%;
    max-width: 315px;
    height: auto;
}

.nomal img {
    width: 100%;
    height: auto;
}

.detail_cont {
    position: relative;
    width: 55%;
    line-height: 1.8;
    padding-top: 1em;
}

.chara {
    position: absolute;
    bottom: 14%;
    right: -10%;
    width: 38%;
}
.mayoi {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 80%;
    height: auto;
    z-index: 5;
}
.serihu {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-75%);
    width: 100%;
}

.nakami_cont {
    width: 25%;
    margin-bottom: .54em;
}
.series {
    font-size: min(2.34vw,24px);
    margin-bottom: 1em;
}
.sheets {
    font-size: min(2.08vw,19px);
}

.item,
.item01,
.item02 {
    position: relative;
    font-size: min(2.34vw,21.6px);
    margin-bottom: 1em;
    padding-bottom: 1em;
    padding-left: 2rem;
    border-bottom: dashed 1.5px #333333;
    text-indent: -1em;
    line-height: 1.5;
}

.maru {
    font-size: .8em;
    padding-right: .2em;
    color: #7a7a7a;
}

.item01 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: .5em;
}
.item02 {
    border-bottom: solid 1px #333333;
}

.item01_price {
    padding-left: 1em;
}

.tax {
    font-size: min(1.56vw,15.3px);
}
.set {
    line-height: 1.3;
    margin-bottom: .5em;
}
.like {
    font-size: min(1.56vw,17.1px);
}
.anno {
    font-size: min(1.3vw,14px);
    padding-left: 2em;
}

.buy img {
    display: flex;
    margin: 0 auto .5em;
    width: 25%;
    transform: scale(1);
    transition: ease .3s;
}
.buy img:hover {
    transform: scale(1.1);
}
.buy p {
    display: flex;
    justify-content: center;
    font-size: min(1.3vw,14px);
}

 /* ----------------------------------- フッター ----------------------------------- */ 

 footer {
    position: relative;
 }

.waka {
    display: block;
    width: 25%;
    height: auto;
    margin: 0 auto;
    padding-bottom: 5vw;
}

.black02 {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: .6vw;
    max-height: 10px;
    background: #000;
}


 /* ----------------------------------- 2100 ----------------------------------- */ 
 
  @media screen and (min-width: 2100px) {

    .sticky {
        top: 682.5px;
    }
  }
 
 /* ----------------------------------- 768 ----------------------------------- */ 

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

    html {
        font-size: min(4.53vw,20px);
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }


    /* メニュー */

    .inner00 {
        position: initial;
        transform: initial;
        margin: 0 auto;
        padding:30vw 0 10vw;
    }

    .title_box {
        width: 35vw;
        max-width: initial;
        margin: 0 auto;
    }

    .conveyor {
        transform: initial;
        width: 85%;
        margin-left: 15%;
    }

    /* 移動するリフィル */
    .moves,
    .one_move {
        width: 8.5%;
        top: 30%;
        right: -30%;
    }
    @keyframes refill01 {
        0% {top: 30%; right: -30%;}
        90% {top: 70%; right: 70%;}
        98% {top: 88%; right: 70%;}
        100% {top: 88%; right: 70%;}
    }

    /* 1回だけ */

    .one_move01 {
        animation: one01 4.2s linear forwards;
        top: 40%;
        right: -3%;
    }
    .one_move02 {
        animation: one02 3s linear forwards;
        top: 49%;
        right: 17%;
    }

    @keyframes one01 {
        0% {top: 40%; right: -3%; opacity: 1;}
        80% {top: 70%; right: 70%; opacity: 1;}
        90% {top: 88%; right: 70%; opacity: 1;}
        100% {top: 88%; right: 70%; opacity: 0;}
    }
    @keyframes one02 {
        0% {top: 49%; right: 17%; opacity: 1;}
        78% {top: 70%; right: 70%; opacity: 1;}
        90% {top: 88%; right: 70%; opacity: 1;}
        100% {top: 88%; right: 70%; opacity: 0;}
    }


    /* 動く手帳 */

    .move_daily {
        right: 67.2%;
        width: 14%;
        height: 270vw;
    }
    .sticky_sp {
        position: sticky;
        top: 119vw;
        left: 0;
        width: 100%;
        height: auto;
        z-index: 10;
    }

    /* はじめに */

    .sec {
        height: auto;
    }

    h2 {
        width: 100%;
    }

    .sticky_wrap {
        position: initial;
        top: 38%;
        padding-top: 20vw;
    }

    .start_img {
        width: auto;
        height: 6vw;
    }

    .start_text {
        width: 111.111%;
        font-size: min(4.69vw,22px);
    }

    .com {
        position: relative;
        width: 45%;
        z-index: 4;
    }

    .desk {
        transform: translate(-54%,0);
    }

    .cat {
        right: 62%;
    }

    /* SP用メニュー */

    .sp_botton {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        overflow: hidden;
    }

    .mokuzi_01,
    .mokuzi_02,
    .mokuzi_03 {
        position: absolute;
        left: 0;
        transform: rotate(30deg) translateX(-100%);
        transform-origin: left top;
        width: 125%;
        height: 10vw;
        z-index: 10;
    }

    .mokuzi_01 {
        top: 0;
        background: #ffff00;
    }
    .sp_botton.animate .mokuzi_01 {
        animation: draw01 .6s .4s ease-out forwards ;
    }
    
    .mokuzi_02 {
        top: 15%;
        background: #abff00;
    }
    .sp_botton.animate .mokuzi_02 {
        animation: draw02 .6s .2s ease-out forwards ;
    }

    .mokuzi_03 {
        top: 30%;
        background: #ff8a00;
    }
    .sp_botton.animate .mokuzi_03 {
        animation: draw03 .6s ease-out forwards ;
    }
    @keyframes draw01 {
        to {
            transform: rotate(30deg) translateX(0);
            }
    }
    @keyframes draw02 {
        to {
            transform: rotate(30deg) translateX(0);
            }
    }
    @keyframes draw03 {
        to {
            transform: rotate(30deg) translateX(0);
            }
    }

    .mokuzi_01 img {
        position: absolute;
        top: -55%;
        right: 15%;
        transform: rotate(-30deg);
        width: 28%;
        height: auto;
    }
    .mokuzi_02 img {
        position: absolute;
        top: -30%;
        right: 24%;
        transform: rotate(-30deg);
        width: 22%;
        height: auto;
    }
    .mokuzi_03 img {
        position: absolute;
        top: -25%;
        right: 34%;
        transform: rotate(-30deg);
        width: 20%;
        height: auto;
    }

    /* シリーズを見る */

    #sec02 {
        padding: 5vw 0 0;
        margin-top: min(40vw,250px);
    }

    .box_text {
        width: auto;
        height: 7vw;
    }

    .wrapper {
        margin-top: 5vw;
        height: 15vw;
    }
    
    .icon {
        width: 100%;
        padding: 1.5vw 0;
    }

    .icon_text,
    .icon_text01 {
        display: none;
    }

    /* シリーズ一覧 */

    .sec_refill {
        aspect-ratio: 10 / 13.75;
    }

    .refill_flex {
        display: block;
    }

    .refill_kind {
        width: 100%;
        margin-bottom: 10vw;
    }

    .note {
        margin-bottom: 0;
    }

    .kind_text {
        height: 4vw;
        max-height: 25px;
    }

    .kind_text02 {
        height: 3.5vw;
        max-height: inherit;
    }

    .refill_text,
    .refill_text01 {
        width: 90%;
        margin: 0 auto;
    }
    .refill_text img {
        display: block;
        margin: 0 auto 1em;
        height: 7vw;
        max-height: 50px;
    }
    .refill_text01 img {
        display: block;
        margin: 0 auto;
        max-height: initial;
        height: 12vw;
        max-height: 80px;
    }

    /* リフィル詳細 */

    .modal {
        position: fixed;
        inset: 0;
        z-index: 9999;
    }

    .modal-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.8);
    }

    .modal-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .modal img {
        max-width: 60%;
        height: auto;
    }

    .modal-next {
        padding-left: 1em;
    }
    .modal-prev {
        padding-right: 1em;
    }
    .modal-prev,
    .modal-next {
        background: none;
        border: none;
        color: #fff;
        font-size: 7vw;
        cursor: pointer;
    }

    @keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
    }

    /* 背景 */
    #sec04 {
        background: url(../img/sp_back01.webp)no-repeat center / contain;
    }
    #sec05 {
        background: url(../img/sp_back02.webp)no-repeat center / contain;
    }
    #sec06 {
        background: url(../img/sp_back03.webp)no-repeat center / contain;
    }
    #sec07 {
        background: url(../img/sp_back04.webp)no-repeat center / contain;
    }
    #sec08 {
        background: url(../img/sp_back05.webp)no-repeat center / contain;
    }
    #sec09 {
        background: url(../img/sp_back06.webp)no-repeat center / contain;
    }

    /* 詳細を知る */

    .sec01 {
        padding: 5vw 0 0;
    }
    
    .detail {
        display: block;
        margin: 0 auto 12vw;
    }

    .nomal {
        position: relative;
        width: 55%;
        margin-bottom: 3vw;
    }
    .nomal img {
        width: 100%;
    }
    .chara {
        bottom: 0%;
        right: -65%;
        width: 50%;
    }
    .nomal img.serihu {
        width: 160%;
        transform: translate(15%, -80%);
    }

    .detail_cont {
        width: 100%;
    }

    .nakami_cont {
        width: 30%;
    }
    .series {
        font-size: min(4.53vw,18px);
    }
    .sheets {
        font-size: min(3.9vw,15px);
    }
    .item,
    .item01,
    .item02 {
        padding-left: 1.5em;
        font-size: min(4.53vw,18px);
    }

    .set {
        margin-bottom: 0;
    }

    .item01 {
        margin-bottom: 5vw;
    }

    .like {
        font-size: min(3.9vw,15px);
    }
    .tax {
        font-size: min(3.28vw,14px);
    }

    .buy {
        width: 82%;
        margin: 0 auto;
    }
    .buy img {
        width: 100%;
        max-width: 300px;
        margin-bottom: 3vw;
    }

    .anno{
        font-size: min(3.9vw,15px);
        text-indent: -1em;
        padding-left: 2.5em;
        padding-right: 1em;
    }

    
    .buy p {
        font-size: min(3.9vw,15px);
        text-indent: -1em;
        padding-left: 1em;
    }


    /* フッター */

    .waka {
        width: 40%;
    }

    .black02 {
        min-height: 3px;
    }
 }