/*============
body
=============*/
.body{
    background: var(--color-top-bg);
}
.more-btn {
    width: fit-content;
    scale: 1.6;
    margin: 0 22% 0 auto;
    padding: 0.25em 0.5em;
    border: 1px solid transparent;
    border-bottom: 1px dashed var(--color-333);
    text-align: right;
    color: var(--color-333);
    font-family: var(--font-FugazOne);
    font-size: calc(16 / 1280 * 100vw);
    transition: 0.3s ease;
}
.archive .more-btn{
    margin: 1em 3% 0 auto;
}
.more-btn:hover{
    border: 1px solid var(--color-333);
    background: var(--color-333);
    cursor: pointer;
}
.more-btn .link{
    display: block;
    /* animation: 1s scale01 infinite 2s; */
}
.more-btn:hover .link{
    color: var(--color-white);
}

/*============
  new
=============*/
.new{
    position: relative;
    /* margin-top: 10rem; */
    margin-top: 6rem;
    padding-top: 2rem;
}
.new .new-title{
    width: 80%;
    margin: 0 auto 0;
    font-family: var(--font-ZenKakuGothicNew);
    font-size: calc(42 / 1280 * 100vw);
    font-weight: 800;
    line-height: 2;
    animation: clippath-left01 1s;
}
.new .icon-box{
    position: absolute;
    top: 0;
    left: 5%;
}
.new .icon{
    position: relative;
    padding: 0 1em;
    font-family: var(--font-FugazOne);
    font-size: calc(20 / 1280 * 100vw);
    font-size: max(25px, calc(25 / 1280 * 100vw));
    transform: rotate(-25deg);
    /* animation: flashing01 infinite 1000ms; */
}
.new .icon::before,
.new .icon::after{
    content: "";
    display: block;
    width: 0.1vw;
    height: 100%;
    position: absolute;
    top: 0;
    background: var(--color-333);
}
.new .icon::before{
    left: 0;
    transform: rotate(-35deg);
}
.new .icon::after{
    right: 0;
    transform: rotate(35deg);
}
.new .photo-box{
    position: relative;
    margin-top: 2rem;
}
.new .photo-box .link{
    display: block;
    width: 80%;
    margin-inline: auto;
}
.new .photo{
    display: flex;
    aspect-ratio: 1 / 0.6;
    overflow: hidden;
    opacity: 0;
}
.new .photo.active{
    animation: fade 2s forwards 0.8s;
    animation-timing-function: ease-in-out;
}
.new .photo .image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 0% 75%;
    transition: 0.3s ease;
}
.new .photo .image._02{
    object-position: 0% 40%;
}
.new .photo:hover .image{
    scale: 1.06;
    opacity: 0.8;
}
.new .date{
    position: absolute;
    top: 0;
    right: calc(10% - 1.5em);
    font-family: var(--font-FugazOne);
    font-size: calc(14 / 1280 * 100vw);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
}
.new .category{
    margin: 0.75em auto 0 10%;
    font-family: var(--font-ZenKakuGothicNew);
    font-size: calc(12 / 1280 * 100vw);
}
.new .text{
    width: 60%;
    margin: 2em auto 0;
    text-align: justify;
    font-family: var(--font-ZenKakuGothicNew);
    font-size: calc(14 / 1280 * 100vw);
    line-height: 1.6;
}
/*============
  archive
=============*/
.archive .archive-box{
    width: 60%;
    margin: 12% auto 0;
}
.archive .archive-box:not(:first-child){
    margin-top: 8%;
}
.archive-title{
    margin-left: 0.1em;
    font-family: var(--font-ZenKakuGothicNew);
    font-size: calc(22 / 1280 * 100vw);
    font-weight: 800;
    line-height: 1.6;
}
.archive .archive-box .photo-wrapper{
    position: relative;
    margin-top: 1%;
}
.archive .archive-box .photo-wrapper .link{
    display: flex;
}
.archive .archive-box .photo-wrapper .photo{
    width: calc(100% / 3);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    opacity: 0;
}
.archive .archive-box .photo-wrapper .photo.active{
    animation: clippath-left01 2s forwards 0.4s;
}
.archive .archive-box .photo-wrapper .photo .image{
    transition: 0.3s ease;
}
.archive .archive-box .photo-wrapper .photo .image._02{
    object-fit: cover;
    height: 100%;
}
.archive .archive-box .photo-wrapper .link:hover .photo .image{
    scale: 1.2;
    opacity: 0.8;
}
.archive .archive-box .date{
    position: absolute;
    top: 0;
    right: -1.5em;
    font-family: var(--font-FugazOne);
    font-size: calc(12 / 1280* 100vw);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
}
.archive .category-text{
    margin: 0.5em auto 0 0.2em;
    text-align: justify;
    font-family: var(--font-ZenKakuGothicNew);
    font-size: calc(10 / 1280 * 100vw);
    line-height: 1.4;
}
.archive .category-text span{
    margin-left: 0.5em;
}
/*============
追加
=============*/
.archive video{
    width: inherit;
    padding-bottom: 9%;
    scale: 5;
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){ 
    .more-btn{
        margin-top: 0.5em;
        margin-right: 10%;
        font-size: calc(14 / 375 * 100vw);
    }
    .more-btn:hover{
        border: none;
        background: transparent;
        cursor: pointer;
    }
    .archive .more-btn{
        margin-right: 9%;
    }
    .more-btn:hover .link{
        color: var(--color-333);
    }
    .new{
        margin-top: 16%;
        padding-top: 1.5em;
    }
    .new .icon-box{
        left: 3%;
    }
    .new .icon{
        font-size: calc(18 / 375 * 100vw);
        transform: rotate(-3deg);
    }
    .new .new-title{
        width: 90%;
        font-size: calc(21 / 375 * 100vw);
    }
    .new .photo-box{
        margin-top: 3%;
    }
    .new .photo-box .link{
        width: 100%;
    }
    .new .date{
        top: 4%;
        right: 3%;
        font-size: calc(10 / 375* 100vw);
    }
    .new .category{
        margin-left: 5%;
        font-size: calc(10 / 375 * 100vw);
    }
    .new .text{
        width: 90%;
        margin-top: 1em;
        font-size: calc(14 / 375 * 100vw);
    }
    .archive .archive-box,
    .archive .archive-box:not(:first-child){
        width: 100%;
        margin-top: 20%;
    }
    .archive-title{
        width: 90%;
        margin-inline: auto;
        font-size: calc(16 / 375 * 100vw);
    }
    .archive .archive-box .photo-wrapper{
        margin-top: 3%;
    }
    .archive .archive-box .photo-wrapper .photo{
        aspect-ratio: 1 / 1.3;
    }
    .archive .archive-box .date{
        top: 6%;
        right: 2%;
        left: auto;
        font-size: calc(6 / 375 * 100vw);
    }
    .archive .category-text{
        width: 90%;
        margin: 3% auto 0;
        font-size: calc(10 / 375 * 100vw);
        line-height: 1.6;
    }
    .archive .category-text span{
        font-size: calc(14 / 375 * 100vw);
    }
}


/*============
追加
=============*/
/* travel/20250410-hakonehonbako */
.archive video{
    position: relative;
    left: 1%;
    width: inherit;
    padding-bottom: 9%;
    scale: 5;
    transition: 0.3s ease;
}
.archive .archive-box .photo-wrapper .link:hover video{
    scale: 6;
    opacity: 0.9;
}
/*============
@media (max-width: 768px)
=============*/
@media (max-width: 768px){ 
    /* travel/20250410-hakonehonbako */
    .archive video{
        padding-top: 3%;
        padding-bottom: 0;
    }
}