@charset "UTF-8";



div.contsArea-right .categoryBnr_block a {
    width: 100%;
}

div.contsArea-right .categoryBnr_block img {
    width: 100%;
}

@media screen and (min-width: 1025px) {}

div.contsArea-right h1 {
    line-height: 1.2;
    font-size: 1.8rem;
}

/*==========================================
BNR BLOCK
==========================================*/
div.contsArea-right .Bnr_block ul {
    margin: 20px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

div.contsArea-right .Bnr_block ul li {
    width: 48%;
    margin: 0 auto;
}

div.contsArea-right .Bnr_block ul li figure figcaption {
    margin: 15px auto 0;
}

div.contsArea-right .Bnr_block ul li img {
    width: 100%;
    height: auto;
}

div.contsArea-right .Bnr_block ul li p.contsLabel {
    position: absolute;
    left: 0;
    top: 0;
    background: #354c61;

    padding: 2px 10px;


}

div.contsArea-right .Bnr_block ul li p.partsTxt {
    text-align: left;
}

div.contsArea-right .Bnr_block ul li p.volDate {
    text-align: left;
}

div.contsArea-right .Bnr_block .moreBtn a {
    background: #eaedef;

}


@media screen and (min-width: 1025px) {
    div.contsArea-right .Bnr_block ul {
        margin: 0 auto;
    }

    div.contsArea-right .Bnr_block ul li {
        width: calc(100%/3.1);
        margin: 0;
    }

}

/*==========================================
CATEGORY BLOCK
==========================================*/

div.contsArea-right div.item_category {
    margin: 40px auto 0;
    padding: 0;
    border-top: 1px solid #EAE6DF;
}

div.contsArea-right div.item_category h1 {
    padding: 0 0 0 20px;
    line-height: 3.2em;
    background: #eaedef;
    display: block;
    /* width: 100%; */
    letter-spacing: -0.01em;
    text-align: left;

}

div.contsArea-right div.item_category h1 span {
    display: inline-block;
    padding-left: 20px;
}

div.contsArea-right div.item_category ul {
    margin: 40px auto 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    width: calc(100% - 20px);
}

div.contsArea-right div.item_category ul li {
    width: 46%;
    text-align: center;
    margin: 0 2% 60px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

div.contsArea-right div.item_category ul li figure img {
    width: 100%;
    height: auto;
}

div.contsArea-right ul li>figure figcaption {
    margin: 10px auto 0;
    text-align: left;
    width: 84%;
}

div.contsArea-right ul li>figure figcaption p {
    line-height: 1.2;
}

div.contsArea-right ul li>figure figcaption p.price {
    margin: 10px 0 0;
}

div.contsArea-right div.item_category ul li>figure figcaption p {
    margin: 10px auto 5px;
    line-height: 1.5;
}

div.contsArea-right div.item_category ul li>figure figcaption p.price {
    margin: 8px 0 0;
}

div.contsArea-right div.item_category ul li div.btnLine,
div.contsArea-right div.item_category ul li div.btnBeta {
    width: 100%;
    margin: 10px 0 0;
    letter-spacing: -0.01em;
}

div.contsArea-right div.item_category ul li div.btnLine figure figcaption,
div.contsArea-right div.item_category ul li div.btnBeta figure figcaption {
    margin: 0;
}

div.contsArea-right div.item_category ul li .rankNum {
    position: absolute;
    left: 6%;
    top: -3%;
    line-height: 1;
    font-style: italic;
}

div.contsArea-right div.item_category ul li .itemBtnArea {
    margin-top: auto;
}

div.contsArea-right div.item_category ul li figure {
    height: 100%;
}

div.contsArea-right .Category_ttl {
    margin: 0 0 30px;
}

div.contsArea-right .Category_content {
    margin: 30px 0;
}

@media screen and (min-width: 1025px) {
    div.contsArea-right div.item_category h1 span {
        display: block;
        margin: 20px auto 0;
    }

    div.contsArea-right div.item_category {
        margin: 60px auto 0;
        padding: 60px 0 0;
    }

    div.contsArea-right div.item_category h1 {
        padding: 0;
        line-height: 1;
        background: none;
        letter-spacing: 0em;
        margin: 0 auto 40px;
        text-align: center;
    }

    div.contsArea-right div.item_category ul {
        margin: 20px auto 0;
        width: 100%;
    }

    div.contsArea-right div.item_category ul li {
        width: 17%;
        margin: 0 1.5% 60px;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p {
        line-height: 1.3;
    }

    div.contsArea-right div.item_category ul li div.btnLine,
    div.contsArea-right div.item_category ul li div.btnBeta {
        width: 86%;
        margin: 15px 0 0;
    }

}

.categoryBnr_block_img {
    width: 100%;
    text-align: center;
}

@media screen and (min-width: 1401px) {
    div.contsArea-right div.item_category ul li>figure figcaption p {
        line-height: 1.5;
    }

    .categoryBnr_block_img {
        /* width: 1000px; */
        text-align: center;
        margin: 0 auto;
    }
}

@media screen and (min-width: 1025px) {


    div.contsArea-right div.item_category ul.cown {
        counter-reset: section;
    }

    div.contsArea-right div.item_category ul li figure img {
        width: 100%;
        height: auto;
    }

    div.contsArea-right div.item_category ul li>figure figcaption {
        margin: 10px auto 0;
        text-align: left;
        width: 84%;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p {
        line-height: 1.2;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p.price {
        margin: 10px 0 0;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p {
        margin: 10px auto 5px;
        line-height: 1.5;
    }

    div.contsArea-right div.item_category ul li>figure figcaption p.price {
        margin: 8px 0 0;
    }

    div.contsArea-right div.item_category ul li div.btnLine,
    div.contsArea-right div.item_category ul li div.btnBeta {
        width: 100%;
        margin: 10px auto 0;
        letter-spacing: -0.01em;
    }

    div.contsArea-right div.item_category ul li div.btnLine figure figcaption,
    div.contsArea-right div.item_category ul li div.btnBeta figure figcaption {
        margin: 0;
    }

    div.contsArea-right div.item_category ul li .rankNum {
        position: absolute;
        left: 6%;
        top: -3%;
        line-height: 1;
        font-style: italic;
    }

    div.contsArea-right div.item_category ul li .itemBtnArea {
        margin-top: auto;
    }

    div.contsArea-right div.item_category ul li figure {
        height: 100%;
    }
}

@media screen and (max-width: 1024px) {
    .ttl-sp {
        font-size: 2.2rem;
    }
}

/* List Container Layout */
ul.cown {
    margin: 40px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    counter-reset: section;
    /* Initialize counter */
}

/* List Item Layout */
ul.cown li {
    width: 46%;
    /* Default for mobile/tablet */
    text-align: center;
    margin: 0 2% 60px;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Ranking Triangle/Badge (Before/After) */

ul.cown li figure:before {
    counter-increment: section;
    content: "No." counter(section);
    color: #5c5c5c;
    width: 100%;
    display: block;
    text-align: center;
    box-sizing: border-box;
    font-size: 2.6rem;
    line-height: 1;
    margin: 0 0 12px;
    font-family: "BIZ UDPMincho", "BIZ UDP明朝", "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
    font-style: normal;
    font-weight: 400;
}



/* Figure Styles */
ul.cown li figure {
    /* height: 100%; Removed fixed height to allow content/text to flow naturally */
    margin: 0;
    position: relative;
    display: block;
    /* Default, but explicit */
}

ul.cown li figure img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* Text Styles: Name and Price (Inside Figure now) */
ul.cown li figure .name,
ul.cown li figure .price {
    text-align: left;
    margin: 10px 0;
    font-size: 1.1rem;
    line-height: 1.5;
}

ul.cown li figure .price {
    margin: 5px 0;
}

/* Look More Button / Link */
ul.cown li a {
    width: 80%;
    display: block;
    margin: auto auto 0;
    /* Auto top margin pushes it to bottom if li is flex-col */
    background: #736351;
    padding: 10px 0;
    border-radius: 30px;
    color: #fff;
    font-size: 1.6rem;
    font-family: 'Cormorant Infant', "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
    text-decoration: none;
    text-align: center;
}

ul.cown li a:hover {
    opacity: 0.7;
}

/* Utility Classes */
.fs80 {
    font-size: 80%;
}

/* Responsive (Tablet/Desktop) */
@media screen and (min-width: 1025px) {
    ul.cown {
        margin: 20px auto 0;
    }

    ul.cown li {
        width: 17%;
        margin: 0 1.5% 60px;
    }
}

/* ==================================================
Category List Grid
================================================== */
.cat_list {
    margin: 60px auto;
    max-width: 1200px;
}

.cat_list h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2.4rem;
    letter-spacing: 0.1em;
    font-weight: normal;
    color: #c5c5c5;
}

ul.cat_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 2%;
    padding: 0;
    list-style: none;
    margin: 0;
    width: 95%;
    margin: auto;
}

ul.cat_grid li {
    width: 32%;
    /* 3 columns */
    margin-bottom: 30px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    /* Subtle shadow for card feel */
}

ul.cat_grid li a {
    display: flex;
    align-items: center;
    position: relative;
    /* Base for absolute positioning */
    text-decoration: none;
    color: #5c5c5c;
    height: 100%;
    min-height: 100px;
    /* Ensure sufficient height */
    overflow: hidden;
    /* Crop image if it protrudes */
}

ul.cat_grid .img_wrap {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    /* Large image width */
    z-index: 1;
}

ul.cat_grid .img_wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill the area */
    object-position: left;
    display: block;
    transition: transform 0.5s ease;
}

ul.cat_grid li a:hover .img_wrap img {
    transform: scale(1.1);
}

ul.cat_grid .text_wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 70%;
    height: 100%;
    margin-left: auto;
    padding: 15px;
    box-sizing: border-box;
    text-align: right;
    z-index: 2;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 1) 20%);
}

ul.cat_grid .text_wrap p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin: 0;
    font-family: "游明朝", "Yu Mincho", serif;
}

@media screen and (max-width: 1024px) {
    ul.cat_grid li {
        width: 48%;
        /* 2 columns on tablet */
    }
}

@media screen and (max-width: 768px) {
    ul.cat_grid li {
        width: 100%;
        /* 1 column on mobile */
    }

    ul.cat_grid .text_wrap p {
        font-size: 1.3rem;
    }
}

/* ==================================================
Tag Area
================================================== */
.tag_area {
    background-color: #e6e2db;
    /* Beige color */
    padding: 60px 0;
    margin-top: 60px;
    width: 100%;
}

.tag_area_inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.tag_row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.tag_row.two_col .tag_section {
    width: 48%;
}

.tag_row.one_col .tag_section {
    width: 100%;
}

.tag_section h3 {
    font-size: 1.6rem;
    color: #382e25;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

.tag_icon {
    font-size: 2rem;
    margin-right: 10px;
    /* Placeholder style if using text icons */
    display: inline-block;
    width: 30px;
    text-align: center;
}

.tag_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    margin: 0 -5px;
    /* Negative margin for gutter */
}

.tag_list li {
    padding: 0 5px;
    margin-bottom: 15px;
    /* Reduced from 20px but more than 10px */
    box-sizing: border-box;
}

/* Size & Age Lists */
.size_list li,
.age_list li {
    width: 16.666%;
    /* 6 columns */
}

.size_list li a,
.age_list li a {
    display: block;
    background: #6d5f53;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    /* Reverted to 8px */
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 10px;
    /* height: 100%; Removed to prevent stretching */
    display: flex;
    align-items: center;
    justify-content: center;
    /* For numbers/English */
}

.tag_list li a:hover {
    opacity: 0.8;
}

/* Scene List */
.scene_list li a {
    display: block;
    background: #6d5f53;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 1.3rem;
    text-decoration: none;
    border-radius: 30px;
    /* Pill shape */
}

/* Item Grid */
.item_list {
    display: flex;
    justify-content: space-between;
    margin: 0;
}

.item_list li {
    width: 24%;
    /* 4 columns */
    padding: 0;
    margin: 0;
}

.item_list li a {
    display: block;
    text-decoration: none;
    color: #333;
}

.item_box {
    background: #6d5f53;
    /* Dark background for card */
    padding: 2px;
    /* Border effect */
    border-radius: 10px;
    overflow: hidden;
}

.item_img_placeholder {
    background: #6d5f53;
    height: 200px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1.6;
    border: 1px solid #fff;
    /* Inner border like sketch */
    margin: 5px;
    border-radius: 6px;
    padding: 20px 0;
}

.item_box p {
    text-align: center;
    margin-top: 10px;
    font-size: 1.3rem;
    color: #333;
    /* Text outside box in original? Image shows inside box or outside?
                   Re-checking image: Text is BELOW the box in black */
}

/* Wait, in my HTML I put P inside .item_box.
   Let fix CSS to make .item_box transparency or handle it.
   Actually, looking closely at image, the large boxes are brown with white illustration outlines.
   And text "ワンピーススーツ" is below the box in black.
   So .item_box should effectively be the "image card", and P should be outside or handled differently.
*/
.item_box {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.item_img_placeholder {
    background: #6d5f53;
    height: 250px;
    /* Taller */
    margin: 0 0 10px;
    border: none;
    border-radius: 10px;

    /* Centering content */
    display: flex;
    align-items: center;
    justify-content: center;
}

.item_img_placeholder img {
    max-width: 90%;
    max-height: 90%;
    width: auto;
    height: auto;
}

.item_list li p {
    color: #333;
    font-size: 1.3rem;
    text-align: center;
    margin: 0;
}


/* Buttons */
.tag_btn {
    text-align: left;
    margin-top: 15px;
}

.tag_btn a {
    display: inline-block;
    border: 1px solid #333;
    background: #fff;
    /* Assuming white button based on "Size about here" */
    color: #333;
    padding: 8px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.2rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .tag_row.two_col {
        display: block;
        /* Stack on mobile */
    }

    .tag_row.two_col .tag_section {
        width: 100%;
        margin-bottom: 40px;
    }

    .size_list li,
    .age_list li {
        width: 25%;
        /* 4 cols on mobile */
    }

    .item_list {
        flex-wrap: wrap;
    }

    .item_list li {
        width: 48%;
        margin-bottom: 20px;
    }
}

.border-ttlset {
    background: none;
    padding: 8px 0px 8px 20px;
    border-top: none;
    margin: 0 0 40px 20px;
    color: #5c5c5c;
    text-align: center;
    height: auto;
    line-height: 1.2em;
}

@media screen and (max-width: 768px) {
    .border-ttlset {
        background: none;
        padding: 8px 0px 8px 20px;
        border-top: none;
        margin: 0 0 40px 0;
        color: #b4a391;
        text-align: center;
        height: auto;
        line-height: 1.2em;
    }
}

.logo_area {
    padding: 20px 0 0;
}
.logo_area .logo {
    width: 80px;
    margin: auto;
}
.logo_area .logo img {
}

@media screen and (min-width: 751px) {
    .logo_area {
        padding: 0;
    }
    .logo_area .logo {
        width: 150px;
        margin: auto;
    }
    .logo_area .logo img {
    }
}

.info-boxes {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0px auto;
    padding: 20px;
}

@media screen and (max-width: 768px) {
    .info-boxes {
        margin: 0px auto;
    }
}