@charset "utf-8";

body{
    background-color: #4c444d;
    color: #fff;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    box-sizing: border-box;
    font-size: max(0.8vw, 10px);
}

#main{
    width: calc(100vw - 80px);
    min-width: 1280px;
    height: 100svh;
    display: flex;
    margin: 0 auto;
}

/*#lefts,#rights{
    display: flex;
    width: 50%
}*/

#lefts{
    background: url('/img/bg.png') center no-repeat;
    background-size: cover;
    height: 100%;
    position: relative;
    display: flex;
    width: 50%
}

.load #lefts:before{
    backdrop-filter: blur(10px);
}

#lefts:before{
    width: 100%;
    height: 100%;
    content: "";
    display: block;
    position: absolute;
    background-color: #758492;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    transition: 1s;
}

#rights{
    border-right: 1px solid #758492;
    border-left: 1px solid #758492;
    display: flex;
    width: 50%;
    position: relative;
}

#rights #three-four{
    width: 100%
}


#main .column{
    width: 50%;
    border-left: 1px solid #758492;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

#main #two.column{
    background-color: #636466;
    padding: 0 max(2vw, 20px);
}

.topbox,.bottombox{
    width: 100%
}

.topbox{
    margin-top: max(5vw, 50px);
}

#main .names{
    display: flex;
    flex-direction: column;
    padding-top: max(5vw,50px);
    height: calc(25vw + max(1.6vw,25px));
    width: 100%;
    box-sizing: border-box;
    padding: 0 max(2vw,20px);
    border-bottom: 1px solid #758492;
    position: relative;
    justify-content: center;
}
#main .names img.copy {
    width: 30%;
    right: 20px;
    bottom: 20px;
    top: auto;
    left: auto;
}  

#main .names p{
    font-size: max(1.7vw,18px);
    line-height: 1;
    margin-bottom: max(1vw,20px);
    font-weight: 400
}

#main .names h1{
    font-size: max(4.2vw,46px);
    line-height: 1.2
}

#main .names h2{
    font-size: max(1.8vw,20px);
    line-height: 1;
    margin-top: max(0.8vw,10px);
}

#main .menus{
    width: 100%
}

#main .menus .tit{
    height: max(2.5vw,25px);
    border-bottom: 1px solid #758492;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    font-size: max(1vw,12px);
    
}

#main .menus ul{
    margin-top: max(2.5vw,25px);
}

#main .menus li{
    line-height: 1;
    width: 100%;
    background: transparent;
    height: max(4vw,40px);
    display: flex;
    align-items: center;
    transition: 0.2s;
    
}

#main .menus li:hover,
#main .menus li.on{
    background-color: #758492;
}

#main .menus li a{
    font-size: max(1.6vw,16px);
    display: flex;
    justify-content: space-between;
    padding: 0 max(1vw,10px);
    width: 100%;
    align-items: center;
}

#main .menus li a span{
    font-size: max(0.8vw,10px);
}

#main .copy{
    position: absolute;
    right: max(1vw,10px);
    bottom: max(1.4vw,14px);
    font-size: max(0.56vw,5px);
    text-align: right;
    
}

#main .copy span{
    font-size: max(0.46vw,4px);
    display: block;
    margin-top: 4px
}

#main .list .tit,
#main .tit.about{
    height: max(3vw,30px);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #758492;
    font-size: max(1.6vw,16px);
    
}

#main .list .tit span,
#main .tit.about span{
    font-size: max(1vw,10px);
    margin-left: max(1vw,10px);
}

#main .list .view{
    height: calc(100svh - max(7.6vw,76px));
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#main .list.recommend .view{
    height: calc(100svh - max(3vw,30px));
    overflow: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

#main .list .view .box{
    border: 0.5px solid #758492;
    /*width: calc(100% / 3);*/
    width: 50%;
    height: calc(25vw - max(1.6vw,25px));
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#main .list .view .box h3.name{
    width: calc(100% - max(2vw,20px));
    height: max(5vw,50px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    top: 0;
    padding: 0;
    font-size: max(1.3vw, 15px);
    line-height: 1.3;
    margin-left: max(1vw,10px);
    border-bottom: 1px solid #fff;
    justify-content: center;
}

#main .list .view .box h3.name p,
#main .list .view .box h3.name .series,
#main .list .view .box h3.name .sub{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

#main .list .view .box h3.name .series,
#main .list .view .box h3.name .sub{
    font-size: max(0.7vw, 8px);
}

#main .list .view .box div.book{
    position: absolute;
    height: calc(100% - max(8vw,80px));
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    margin-top: max(2vw,20px);
    padding: max(1vw,10px)
}

#main .list .view .box div.book img{
    height: 80%;
    box-shadow: 0 0 10px rgba(0,0,0,0.6)
}

#main .list .view .box ul{
    width: 50%;
    box-sizing: border-box;
    padding: max(1vw,10px);
    height: calc(100% - max(8vw,80px));
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-top: max(2vw,20px);
    text-align: justify;
    font-size: max(1vw,12px);
    font-weight: 400
}

#main .list .view .box ul .cate{
    margin-top: max(2vw,20px);
    font-weight: 600
}

#main .list .view .box ul .cate p{
    font-size: max(0.6vw,8px)
}

#main .list .view .box ul .cate a{
    font-size: max(0.8vw,10px)
}


#main .list .view .box .more{
    width: 100%;
    height: max(3vw,30px);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #fff;
    position: absolute;
    bottom: 0
}

#main .list .view .box .more:before{
    content: "▶";
    margin-right: max(0.5vw,6px)
}

#main .list .view .box.cat0{
  background: linear-gradient(315deg, #2a5d9d, #839DB4);
  background-size: 200% 200%;
  animation: Grad 12s ease infinite;
}

#main .list .view .box.cat1{
  background: linear-gradient(315deg, #437872, #8FB8A6);
  background-size: 200% 200%;
  animation: Grad 12s ease infinite;
}

#main .list .view .box.cat2{
    background: linear-gradient(315deg, #933571, #b3b29b);
    background-size: 200% 200%;
    animation: Grad 12s ease infinite;
}


#main .list .view .box.big{
    /*width: calc(100% / 1.5)*/
    width: 100%
}

#main .list .view .box.big h3.name{
    position: relative;
    width: calc(50% - max(1vw,10px))
}

#main .list .view .box.big div.book{
    height: calc(100% - max(3vw,30px));
    margin-top: auto;
    margin-bottom: max(3vw, 30px);
}

#main .list .view .box div.book img{
    height: 80%;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    border-radius: max(0.1vw,1px)
}

#main .list .view .box div.book img.noimg{
    mix-blend-mode: luminosity;
}

#main .list .view .box.big ul{
    height: auto;
    margin-top: 0;
    padding-right: 0
}

@keyframes Grad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

#news{
    position: absolute;
    width: 100%;
    bottom: max(3vw, 30px);
    display: flex;
    font-size: max(0.8vw,10px);
    border-top: 1px solid #758492;
    border-bottom: 1px solid #758492;
    height: max(3vw, 30px);
}

#news dd{
    border-right: 1px solid #758492;
    width: 25%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

#news dt{
    width: 75%;
    box-sizing: border-box;
    padding: 0 max(1vw, 10px);
    display: flex;
    align-items: center;
    backdrop-filter: blur(3px);
}

#news dt a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cap{
    display: flex;
    justify-content: space-between;
    font-size: max(1.4vw,14px);
    align-items: center;
    line-height: 1;
    margin-bottom: max(0.8vw,10px);
}

.cap span{
    font-size: max(0.8vw,10px);
}

.topbox{
    padding-bottom: max(2vw,20px);
    margin-bottom: max(2vw,20px);
    border-bottom: 1px solid #758492;
}

.bottombox{
    height: calc(100% - max(14vw,140px));
    display: flex;
    flex-direction: column;
}

.word-search{
    position: relative;
    display: flex;
    align-items: center;
}

.word-search input{
    width: 100%;
    background-color: #76859380;
    border: max(0.06vw,1px) solid #758492;
    box-shadow: none;
    height: max(1.8vw,18px);
    border-radius: max(0.9vw,9px);
    color: #fff;
    padding-left: 10px;
}

.word-search button{
    position: absolute;
    width: max(1vw,14px);
    right: max(1vw,10px);
    opacity: 0.5;
    transition: 0.2s
}

.word-search button:hover{
    opacity: 1
}

.tab-ui{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
}

.tab-ui li{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #76859380;
    font-size: max(0.8vw,10px);
    height: max(3vw,30px);
    transition: 0.2s
}

.tab-ui li.both{
    font-size: max(0.6vw,8px);
}

.tab-ui li:hover,
.tab-ui li.active{
    background-color: #758492;
}

.inner-box{
    background-color: #758492;
}

.inner-box .nest{
    padding: max(1vw,10px);
    height: calc(100% - max(2vw, 20px));
    overflow: auto;
}

.inner-box dl{
    width: 100%
}

.inner-box dl dd ul li:last-child{
    grid-column: 1 / -1;
    text-align: center;
}

.inner-box dl dd {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease;
}

.inner-box dl dt {
    cursor: pointer;
    position: relative;
    height: max(2vw,20px);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.inner-box dl dt{
    position: relative;
}

/* ▼（回転させたい） */
.inner-box dl dt::after{
    position: absolute;
    top: 0;
    right: 0;
    width: max(2vw, 20px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "▼";
    font-size: max(0.6vw,8px);
    transition: transform 0.6s;
}

/* 縦線（回転させない） */
.inner-box dl dt::before{
    position: absolute;
    top: 0;
    right: max(2vw, 20px);
    height: 100%;
    content: "";
    border-left: 1px solid #758492;
}

.inner-box dl.open dt:after{
    transform: rotate(180deg);
}

/* 開いた状態 */
.inner-box dl.open dd {
    max-height: 1000px; /* 中身より大きければOK */
}


.inner-box dl dd ul{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}

.inner-box dl ul li{
    border-top: 1px solid #758492;
    border-bottom: 1px solid #758492;
}

.inner-box dl ul li.lg{
    font-size: max(0.54vw,10px);
}

.inner-box dl ul li a{
    height: max(2vw,20px);
    display: flex;
    align-items: center;
    padding-left: max(0.6vw,10px);
    position: relative;
    width: 100%
}

.inner-box dl dd ul li:last-child a{
    justify-content: center;
}

.inner-box dl ul li a:after{
    position: absolute;
    top: 0;
    right: 0;
    width: max(2vw, 20px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "▶";
    font-size: max(0.8vw,10px);
    transition: transform 0.6s;
    border-left: 1px solid #758492;
}

.inner-box a.all{
    height: max(2vw,20px);
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    border-top: 1px solid #636466;
    justify-content: center;
}

.inner-box a.all:after{
    position: absolute;
    top: 0;
    right: max(1.2vw,12px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    content: "▶";
    font-size: max(0.6vw,8px);
    transition: transform 0.6s;
}

.tag-search{
    display: flex;
    flex-direction: column;
    height: calc(100% - max(1.4vw,14px));
    overflow: hidden;
}

.inner-box {
    display: none;
    height: 100%;
    overflow: hidden;
}

.inner-box.active {
    display: block;
    height: 100%
}

.inner-box dl dt{ border-bottom: 1px solid #758492; }

.inner-box dl.cat0{
    background: linear-gradient(315deg, #2a5d9d, #839DB4);
    background-size: 200% 200%;
    animation: Grad 12s ease infinite;
}

.inner-box dl.cat0 dt{ 
    background-color:#075985;
    mix-blend-mode: lighten;
}
.inner-box dl.cat0 ul{ 
    background-color:#4F7FA3;
    mix-blend-mode: lighten;
}

.inner-box dl.cat1{
  background: linear-gradient(315deg, #437872, #8FB8A6);
  background-size: 200% 200%;
  animation: Grad 12s ease infinite;
}

.inner-box dl.cat1 dt{ 
    background-color:#288561;
    mix-blend-mode: lighten;
}
.inner-box dl.cat1 ul{ 
    background-color:#7ca6a0;
    mix-blend-mode: lighten;
}

.inner-box dl.cat2{
  background: linear-gradient(315deg, #933571, #b3b29b);
  background-size: 200% 200%;
  animation: Grad 12s ease infinite;
}

.inner-box dl.cat2 dt{ 
    background-color:#a1457e;
    mix-blend-mode: lighten;
}
.inner-box dl.cat2 ul{ 
    background-color:#8f7482;
    mix-blend-mode: lighten;
}

.article {
    padding: 40px 20px;
}

.article p {
  max-width: 42em;          /* 1行の長さを制限（重要） */
  margin: 0 auto 1.6em;     /* 中央寄せ + 段落間余白 */
  font-size: 16px;          /* 基本サイズ */
  line-height: 1.8;         /* 行間を広めに */
  letter-spacing: 0.02em;   /* 日本語は少しだけ字間 */
}

.article p:last-child {
  margin-top: 2.5em;
  font-weight: 600;
  text-align: right;
}

.item-view h3.name p {
  font-size: max(1.6vw,16px);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.6em;
}

.item-view dl.frame{
    display: grid;
    border-bottom: 1px solid #758492;
    grid-template-columns: repeat(2, 1fr);
    height: calc((50vw - 40px) / 2);
}

.item-view.cat0{ 
    /*background-color:#062F4A;*/
    background: linear-gradient(315deg, #2a5d9d, #839DB4);
    background-size: 200% 200%;
    animation: Grad 12s ease infinite;
}
.item-view.cat1{ 
    /*background-color:#0F2F23;*/
    background: linear-gradient(315deg, #437872, #8FB8A6);
    background-size: 200% 200%;
    animation: Grad 12s ease infinite;
}
.item-view.cat2{ 
    background: linear-gradient(315deg, #933571, #b3b29b);
    background-size: 200% 200%;
    animation: Grad 12s ease infinite;
}

.item-view dl.frame .view{
    height: calc((50vw - 40px) / 2);
    border-right: 1px solid #758492;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
}

.item-view dl.frame .view img{
    max-width: 80%;
    max-height: 80%;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
}

.item-view dl.frame .view img.noimg{
    mix-blend-mode: luminosity;
    pointer-events: none;
}

.item-view dl.frame .tit{
    padding: max(2vw,20px);
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
}

.item-view dl.frame .tit .cate{
    position: absolute;
    top: max(2vw,20px);
    display: flex;
}

.item-view dl.frame .tit .cate p{
    margin-right: max(1vw,10px);
}

.item-view dl.frame .tit dl{
    display: flex;
    margin-top: max(0.6vw,6px)
}

.item-view dl.frame .tit dl dd{
    width: max(2.2vw,22px)
}

.item-view dl.frame .tit dl dt{
    width: calc(100% - max(2.2vw,22px));
    display: flex;
    gap: 6px;
        flex-wrap: wrap;
}

.item-view .read{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid #758492;
}

.item-view .read li{
    overflow: hidden;
    height: calc((40vw - 40px) / 5);
    box-sizing: border-box;
    border-right: 1px solid #758492; 
}

.item-view .read li:nth-child(5){
    border-right: unset; 
}

.item-view .read li img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-view .read li img.noimg{
    pointer-events: none;
    mix-blend-mode: luminosity;
}

.information{
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #636466
}

.information .info-tab-ui{
    border-bottom: 1px solid #758492;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.information .info-tab-ui li{
    box-sizing: border-box;
    border-right: 1px solid #758492;
    display: flex;
    justify-content: center;
    align-items: center;
    height: max(2vw,20px)
}

.information .info-tab-ui li.active{
    background-color: #758492;
}

.information .info-tab-ui li.disable {
    cursor: default;
    opacity: 0.5;
}

.information .info-area{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 100%
}

.information .info-main {
  grid-column: span 3;
  height: calc(100dvh - 40px - calc((50vw - 40px) / 2) - max(2vw, 20px) - calc((40vw - 40px) / 5));
  overflow: auto;
    padding: max(2vw,20px) max(2vw,20px) 0 ;
    box-sizing: border-box;
    border-right: 1px solid #758492;
}

.information .info-spec {
  grid-column: span 2;
  height: calc(100dvh - calc((50vw - 40px) / 2) - max(2vw, 20px) - calc((40vw - 40px) / 5));
  overflow: auto;
  padding: max(2vw,20px) max(2vw,20px) 0 ;
  box-sizing: border-box;
}

.info-box{
    display: none;
}

.info-box p:last-child{
    padding-bottom: max(2vw,20px)
}

.info-box.active {
    display: block;
    height: 100%;
}

.info-box.active p+p{
    margin-top: max(1vw,10px)
}

.info-box p,
.info-box dd {
  line-height: 1.9;
  text-align: justify;
}

.info-box dt {
  line-height: 1.6;
  font-weight: 600;
}

.info-spec dl {
  display: grid;
  grid-template-columns: 6em 10em; /* ← 左：dd ／ 右：dt */
  column-gap: 1em;
  row-gap: 0.6em;
  padding-bottom: max(2vw,20px)
}

.info-spec dd {
  grid-column: 1;
  margin: 0;
}

.info-spec dt {
  grid-column: 2;
  font-weight: 600;
}


.detail #rights{
   border-left: 1px solid #758492; 
}

.img-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
}

.img-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
}

.img-modal-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-modal-content img {
    max-width: 90%;
    max-height: 90%;
}

.result-set{
    background-color: #758492;
    border-top: 1px solid #636466;
    padding: max(0.6vw,6px) 
}

.result-set h3{
    font-size: max(1vw, 10px);
    text-align: center;
    border-bottom: 1px solid #fff;
    padding-bottom: max(0.6vw,6px)
}

.type_and_number{
    display: flex;
    justify-content: space-between;
    padding-top: max(0.6vw,6px)
}

ul.pn{
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    background-color: #636466;
    border-top: 1px solid #636466;
    border-bottom: : 1px solid #636466
}

ul.pn li{
    background-color: #758492a8;
}

ul.pn li+li{
    border-left: 1px solid #636466;
}

ul.pn li a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: max(0.6vw,6px);
    background-color: #758492;
}

ul.pn li.current a{
    background-color: #93a6b7;
}

    #main .menus li a.pc{
        display: flex;
        pointer-events: auto;
    }

    #main .menus li a.sp{
        display: none;
        pointer-events: none;
    }

.purchase{
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(50vw - 42px);
    position: fixed;
    bottom: 0;
    background-color: #212121;
    height: 40px;
    back
}

@media (orientation: portrait){
    #main{
        min-width: auto;
        width: calc(100vw - 40px);
    }
    
    #lefts{
        background-position: 50% 70%;
        width: 25%;
        display: flex;
        flex-direction: column;
    }

    #lefts .column{
        height: 50%;
        width: 100%
    }

    #main .menus .tit{
        border-top: 1px solid #758492
    }

    #rights{
        width: 75%
    }

    #main .list .view .box.big{
        width: 100%
    }

    #main .list .view .box{
        height: 35vw;
        width: 50%
    }

    #main .names{
        scale: 0.9;
        border-bottom: none;
    }

    #news dt{
        overflow: hidden;
    }

    #news dt a{
        animation: ticker 10s linear infinite;
        overflow: visible;
        width: 100%;
    }

    @keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@media (orientation: portrait) and (max-width: 750px) {

    body{
        overflow: visible;
    }

    .result-set-outer{
    position: sticky;
    top: 0;
    z-index: 9;
    border-bottom: 1px solid #758492
    }

      #main{
        flex-direction: column;
        height: auto;
        border-left: 1px solid #758492;
        border-right: 1px solid #758492;
    }
    #lefts,
    #rights{
        width: 100%
    }

    #main .list .view .box{
        border: unset;
        border-bottom: 1px solid #758492
    }

    #main .list.recommend .view{
        height: auto;
            flex-direction: column;
    }
    #main .list .view .box{
        width: 100%;
        height: 75vw
    }

    /*#main #two.column{
        position: fixed;
        left: -100vw
    }*/

/*    #main .menus{
        display: none;
    }*/

    #main .column,
    #rights{
        border: unset;
    }

    #main #two.column{
        background-color: transparent;
    }

    .topbox{
    margin-top: 0

    }

    .bottombox{
        display: none;
    }

    #lefts.sp .bottombox{
        display: block;
    }

    #lefts.sp{
        height: 100dvh;
        overflow: auto;
    }

    #main .names{
        scale:1;
        padding: 10vw 0 5vw;
        height: auto;
        align-items: center;
        order: 1
    }

    #lefts:before{
        position: fixed;
width: calc(100vw - 42px);
            left: 21px;
    }

    .bottombox,
    .tag-search,
    .inner-box .nest{
        height: auto;
    }

    footer{
        order: 2
    }

/*    #main .menus{
        order: 3
    }*/

    #main .copy{
        position: static;
        text-align: center;
        margin-bottom: 3vw
    }

    #main .names a{
        width: 60%;
    }
    #main .names img.copy{
    right: auto;
    bottom: auto;
    top: 20px;
    position: relative;
    width: 40%
    }

    #lefts .column{
        height: auto;
    }

    #main .menus .tit{
        height: auto;
        padding: 10px 0;

        display: none;
    }

    #main .menus ul{
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
    }

    #main .menus li:hover,
    #main .menus li.on{
        background-color: transparent;
    }

    #main .menus li{
        width: auto;
        padding: 0px 10px;
        height: auto;
    }

    #main .menus li a.pc{
        display: none;
        pointer-events: none;
    }

    #main .menus li a.sp{
        display: flex;
        pointer-events: auto;
    }

    #main .menus li+li{
        border-left: 1px solid #758492
    }

    #main .menus li a span{
        display: none;
    }

    #main .menus li a{
        font-size: 10px;
        padding: 0
    }

    #main .list .view{
        height: auto;
    }

    .item-view dl.frame{
        grid-template-columns: repeat(1, 1fr);
        height: auto;
    }

    .item-view dl.frame .view{
        height: auto;
        border-right: unset;
        padding: 16px 16px 0
    }
    .item-view dl.frame .tit .cate{
        position: static;
        margin-bottom: 10px
    }

    .item-view .read li{
        height: 15vw
    }

    .information{
        flex-direction: column;
        height: auto;
    }

    .information .info-tab-ui{
            grid-template-columns: repeat(3, 1fr);
    }

    .information .info-area{
            grid-template-columns: repeat(1, 1fr);
    }

    .information .info-main,
    .information .info-area,
    .information .info-spec{
        height: auto;
    }

    .information .info-spec{
        padding-bottom: 50px
    }

    .information .info-main{
        border-right: unset;
        border-bottom: 1px solid #758492;
    }

    .item-view dl.frame .tit dl dd{
        width: max(3vw, 30px);
    }

    .item-view dl.frame .tit dl dt{
        width: calc(100% - max(3vw, 30px));
    }

    .article p{
        font-size: 12px;
        text-align: justify;
    }

    .purchase{
        width: calc(100% - 42px);
        left: 21px;
    }
}