@charset "UTF-8";

@font-face {
    font-family: "hkbr";
    src: url("../../1saioya/f/HakoberaMaruGothicA-Medium.ttf");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "hkbr";
    src: url("../../1saioya/f/HakoberaMaruGothicA-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

.age2 {
    text-align: center;

    }
    .age2 img {
    margin-left: auto;
    margin-right: auto;
    }
    .age2 .fv {
        margin-bottom: 2em;
    }
    
    .age2 p {
    font-size: 1.25em;
    }
    
    .age2 .sp {
    display: none !important;
    }
    
    .age2 img+img {
    margin-top: 20px;
    }
    
    .age2 table td {
    padding: 10px;
    }
    .age2 table td:not([colspan="2"]) {
    width: 50%;
    }
    .age2 table tr.prd-b td {
    vertical-align: middle;
    }
    
    .age2 h2 {
    font-size: 2em;
    font-weight: bold;
    margin: 2em 0 1em;
    }
    
    .age2 h3 {
    font-size: 1.75em;
    font-weight: bold;
    margin: 2em 0 1em;
    }
    
    .age2 h4 {
    font-size: 1.5em;
    margin-top: 1em;
    line-height: 1.5em;
    }
    
    .age2 .flex {
    display: flex;
    }
    
    
    #toc h2 {
    text-align: left;
    width: 75%;
    margin: 2em auto 0.5em;
    }
    
    #toc .box {
    width: 90%;
    margin: 0 auto;
    background: #fffae6;
    border: 3px solid #6e5a4d;
    border-radius: 20px;
    padding: 60px 80px;
    margin-bottom: 120px;
    text-align: left;
    }
    
    #toc dl+dl {
    margin-top: 20px;
    }
    
    #toc dt {
    font-size: 1.5em;
    line-height: 1.75em;
    }
    
    #toc dd {
    font-size: 1.25em;
    line-height: 1.75em;
    }
    
    #toc dt+dd {
    margin-top: 0.5em;
    }
    
    #toc a {
    text-decoration: underline;
    }
    
    .age2 table {
    text-align: left;
    margin-top: 2em;
    }
    
    .age2 table h3 {
    margin-top: 1em;
    }
    
    .age2 table p.detail {
    background: #fffae6;
    padding: 0.5em;
    border-radius: 0.25em;
    }
    
    .age2 table .item-f {
    margin-bottom: 1em;
    }
    
    .age2 table .item-f span {
    font-size: 1.25em;
    padding: 0.25em;
    border-radius: 0.25em;
    }
    
    .age2 table .item-f span.pnk {
    background: #f7d9d8;
    }
    
    .age2 table .item-f span.grn {
    background: #e9f1d7;
    }
    
    .age2 table .price {
    display: block;
    text-align: right;
    margin-bottom: 1em;
    }
    
    .age2 table .price b {
    font-size: 1.75em;
    }
    
    
    #mean .flex {
    margin-bottom: 40px;
    column-gap: 2%;
    margin-top: 1em;
    }
    #mean .flex .box {
    padding: 30px 0 20px;
    width: 32%;
    border: 3px solid #fffae6;
    border-radius: 12px;
    }
    #mean .flex h3 {
    font-size: 1em;
    margin-bottom: 1em;
    }
    #mean .flex p {
    font-size: 1em;
    text-align: left;
    padding: 1em 1.5em 0;
    }
    
    .age2 #growth .flex {
    justify-content: center;
    }
    
    .age2 .source a {
    display: inline-block;
    margin-top: 1em;
    line-height: 1.5em;
    text-decoration: underline;
    }
    
    .age2 #growth .flex>div {
    width: 25%;
    padding: 0 10px;
    }
    
    .age2 #wooden .ttl {
    position: relative;
    margin-top: 2em;
    }
    
    .age2 #wooden .ttl+p {
    margin-top: 2em;
    }
    
    .age2 #wooden h2 {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    }
    
    .age2 #cat .flex {
    flex-wrap: wrap;
    gap: 20px 2%;
    }
    
    .age2 #cat .flex a {
    width: 49%;
    }
    .age2 #named h2 {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    }
    #point {
    margin-bottom: 3em;
    }
    #point>.wrap2 .flex {
    flex-wrap: wrap;
    max-width: 400px;
    margin: 2em auto;
    justify-content: center;
    gap: 20px 5%;
    }
    #point>.wrap2 .flex > div {
    width: 47.5%;
    }
    #point .bg-ylw .box {
    background: #fff;
    border-radius: 12px;
    padding: 30px 0;
    }
    #point .bg-ylw .box+.box {
    margin-top: 40px;
    }
    #point .bg-ylw .box#p1 {
    border: 3px solid #f6d6d6;
    }
    #point .bg-ylw .box#p2 {
    border: 3px solid #f8d8c6;
    }
    #point .bg-ylw .box#p3 {
    border: 3px solid #e9f1d7;
    }
    #point .bg-ylw .box#p4 {
    border: 3px solid #d0e9f6;
    }
    #point .bg-ylw .box#p5 {
    border: 3px solid #e4d3e5;
    }
    #point .bg-ylw .box#p1 .ttl {
    border-right: 5px solid #f6d6d6;
    }
    #point .bg-ylw .box#p2 .ttl {
    border-right: 5px solid #f8d8c6;
    }
    #point .bg-ylw .box#p3 .ttl {
    border-right: 5px solid #e9f1d7;
    }
    #point .bg-ylw .box#p4 .ttl {
    border-right: 5px solid #d0e9f6;
    }
    #point .bg-ylw .box#p5 .ttl {
    border-right: 5px solid #e4d3e5;
    }
    #point .bg-ylw .box#p2 a:not(.linkbtn) {
    display: block;
    padding: 0 30px;
    margin: 30px 0;
    }
    #point .bg-ylw .box#p2 a:not(.linkbtn) img {
    display: block;
    border-top: 4px solid #f8d8c6;
    }
    #point .bg-ylw .box a.linkbtn {
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    display: block;
    color: #fff;
    margin-top: 0.5em;
    padding: 0.5em;
    border-radius: 0.25em;
    }
    #point .bg-ylw .box#p2 a.linkbtn {
    background: #f8d8c6;
    }
    #point .bg-ylw .box#p3 a.linkbtn {
    background: #e9f1d7;
    }
    #point .bg-ylw .box#p4 a.linkbtn {
    background: #d0e9f6;
    }
    #point .box .flex {
    align-items: center;
    }
    #point .box .ttl {
    width: 220px;
    padding: 20px 0;
    }
    #point .box .ttl img {
    margin: 0 auto;
    }
    #point .box h3 {
    font-size: clamp(14px, 1.8vw, 20px);
    }
    #point .box .txt {
    flex: 1;
    padding-left: 1em;
    padding-right: 2em;
    text-align: left;
    line-height: 1.25em;
    }
    
    
    
    @media screen and (max-width: 768px) {

    .age2 .sp {
    display: block !important;
    }
    .age2 .pc {
    display: none !important;
    }
    
    
    .age2 p {
    font-size: 3.8vw;
    }
    .age2 >div >p {
    padding-left: 1em;
    padding-right: 1em;
    }
    
    .age2 h2 {
    font-size: 5vw;
    font-weight: bold;
    margin: 2em 0 1em;
    }
    
    .age2 h3 {
    font-size: 4.5vw;
    font-weight: bold;
    margin: 2em 0 1em;
    }
    
    .age2 h4 {
    font-size: 4vw;
    margin-top: 1em;
    line-height: 1.5em;
    }
    .age2 table {
    display: flex;
    }
    .age2 table tr.prd-b {
    display: flex;
    flex-direction: column;
align-items:center;
    }
    .age2 table tr.prd-b td:last-of-type {
    width: 100%;
    }
    #toc {
        padding-bottom: 25vw;
    }
    #toc h2 {
        width: 100%;
        font-size: 6.5vw;
        padding-left: 2em;
    }
    #toc .box {
        width: 100%;
        padding: 8vw 3vw;
        margin-bottom: 10vw;
    }
    #toc dl+dl {
        margin-top: 0.5em;
    }
    #toc dt {
        font-size: 4.8vw;
    }
    #toc dd {
        font-size: 4vw;
    }
    #toc .box+a {
        display: block;
        width: 90vw;
        margin: 0 auto;
    }
    #mean .flex {
    flex-direction: column;
    align-items: center;
    }
    #mean .flex .box {
    width: 80vw;
    margin-top: 10vw;
    }
    #mean .flex h3 {
    font-size: 4.2vw;
    }
    .age2 #wooden h2 {
    margin-top: 3vw;
    }
    .age2 #growth .flex {
    flex-wrap:wrap;
    }
    .age2 #growth .flex>div {
    width: 50%;
    }
    
    #point > .wrap2 .flex div {
    width: 33%;
    }
    #point .bg-ylw .box {
    width: 90%;
    margin: 0 auto;
    }
    #point .bg-ylw .flex {
    flex-direction: column;
    }
    #point .box h3 {
    font-size: 4vw;
    }
    #point .bg-ylw .box {
    padding: 0 5vw;
    }
    #point .bg-ylw .box .ttl {
    width: 30vw;
    padding: 3vw 0;
    border-right: 0 !important;
    }
    #point .box .txt {
    padding: 5vw 0;
    }
    #point .bg-ylw .box#p2 {
    padding-bottom: 5vw;
    }
    #point .bg-ylw .box#p2 a:not(.linkbtn) {
    padding: 0;
    }
    #point .bg-ylw .box#p1 .ttl {
    border-bottom: 3px solid #f6d6d6;
    }
    #point .bg-ylw .box#p2 .ttl {
    border-bottom: 3px solid #f8d8c6;
    }
    #point .bg-ylw .box#p3 .ttl {
    border-bottom: 3px solid #e9f1d7;
    }
    #point .bg-ylw .box#p4 .ttl {
    border-bottom: 3px solid #d0e9f6;
    }
    #point .bg-ylw .box#p5 .ttl {
    border-bottom: 3px solid #e4d3e5;
    }
    #point .bg-ylw .box a.linkbtn {
    font-size: 4vw;
    width: 55vw;
    margin: 1.5em auto 0;
    padding: 0.5em 0.25em;
    }
    }

    #intro {
    
        .wrap {
            >p {
                padding-top: 4em;
            }
    
            h2 {
                font-family: "hkbr";
                margin-bottom: 0.5em;
            }
    
            ul {
                margin-top: 0;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: 4em;
    
                li {
                    width: 100%;
    
                    &:nth-of-type(n+3) {
                        width: 48%;
                    }
    
                    p {
                        margin-bottom: 0;
                        padding-left: 0;
                        padding-right: 0;
                    }
    
                    a {
                        display: flex;
                        padding: 0.75em 2.5em;
                        border-bottom: 1px solid #6e5a4d;
                        position: relative;
    
                        &:after {
                            content: "▼";
                            position: absolute;
                            top: 50%;
                            right: 2.5em;
                            transform: translateY(-50%);
                            color: #6e5a4d;
                        }
    
                        span {
                            color: #6e5a4d;
                            padding-right: 1em;
                        }
                    }
    
                    +li {
                        margin-top: 0.75em;
                    }
                }
            }
        }
    }

@media screen and (max-width:768px) {
    #intro .wrap {
        ul {
            width: 90vw;
            margin-left: auto;
            margin-right: auto;

            li {
                p {
                    text-align: left;
                }

                a {
                    padding: 0.75em 1em;
                    flex-direction: column;

                    &:after {
                        top: auto;
                        bottom: 0.75em;
                        right: 1em;
                        transform: none;
                    }
                }
            }
        }
    }
}