@charset "utf-8";

.main-head {
    background: #f9d0b5;
    height: 400px;
}

.main-head .img-head {
    height: 400px;
}

main {
    background: #eeeada;
}

.box-diary {
    padding: 120px 0;
    background: url("../img/diary/bg_body.svg") no-repeat center -10px;
    background-size: auto 686px;
}

.box-diary .box-wrap {
    width: 600px;
    min-height: 290px;
    margin: 0 auto;
    position: relative;
    padding: 50px 0 20px;
    background: #FFF;
}

.box-diary .img {
    width: 162px;
    position: absolute;
    left: -85px;
    top:-95px;
}

.box-diary h1 {
    color: #eb6100;
    font-size: 46px;
    line-height: 180%;
    text-align: center;
    margin-bottom: 10px;
}

.box-single {
    border: solid 2px #FFCC00;
    width: 480px;
    margin: 0 auto 25px;
}

.box-single h2.tit {
    color: #FFF;
    border-bottom: solid 2px #FFCC00;
    background: #FF9900;
    padding: 6px 10px 5px;
}

.box-single .txt-box {
    padding: 20px 20px;
    text-align: left;
}

.list-pagelink {
    margin: 0 auto;
    width: 90%;
}

.list-pagelink,
.list-pagelink a,
.box-single .txt-box a {
    color: #6ec3b4;
}

.photo-list {
    display: flex;
    gap: 5px;
    margin: 0 15px 15px 20px;
}

.photo-list li {
    width: calc(20% - 5px);
}

.photo-list li a {
    display: block;
    overflow: hidden;
}

.photo-list li a img {
    object-fit: cover;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.box-photo,
.photo-main {
    text-align: center;
    margin-bottom: 20px;
}

.box-photoset {
    width: 90%;
    margin: auto;
}

.thumbnail .slick-track {
    transform: unset !important;
    margin: 0 0 15px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100% !important;
    text-align: center;
}

.thumbnail .slick-track img {
    object-fit: cover;
    width: calc( 100% - 6px) !important;
    height: auto;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition:all 0.3s ease;
	-webkit-transition: all .3s;
    border: 3px solid #FFF;
    margin: 0 auto;
}

.thumbnail .slick-track img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
}

.thumbnail .slick-track .slick-current {
    border: 3px solid #FF9900;
}

.slick-track:before, .slick-track:after {
    display: none;
}

.slider {
    width: 400px;
    margin: 0 auto 20px;
    text-align: center;
}

.slider .slick-track img {
    /*width: 400px !important;*/
    height: 300px !important;
    aspect-ratio: 3 / 4;
    object-fit:contain; 
    max-width: 400px;
    max-height: 100%;
    margin: 0 auto;
}

.slick-arrow {
    position: absolute;
    display: inline-block;
    width: 22.4px;
    height: 40.8px;
    cursor: pointer;
    z-index: 999;
    top:calc( 50% - 20.4px );
}

.slick-next {
    right: -5%;
}

.slick-prev {
    left: -5%;
}


.slick-arrow::before,
.slick-arrow::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 4px;
    border-radius: 9999px;
    background-color: #FF9900;
    top: calc(50% - 2px);
}

.slick-next::before,
.slick-next::after {
    right: 0;
    transform-origin: calc(100% - 2px) 50%;
}

.slick-prev::before,
.slick-prev::after {
    left: 0;
    transform-origin: 2px 50%;
}

.slick-prev::after,
.slick-next::after {
    transform: rotate(-45deg);
}

.slick-prev::before,
.slick-next::before {
    transform: rotate(45deg);
}

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

@media screen and (max-width: 900px) {
    
    .main-head,
    .main-head .img-head {
        height: auto;
        aspect-ratio: 16 / 5;
    }
    
    .box-diary {
        padding: 8% 5%;
        background: url("../img/diary/bg_body.svg") no-repeat center -2%;
        background-size: 120% auto;
    }

    .box-diary .box-wrap {
        width: 100%;
        padding: 5vw 0;
        min-height: auto;
    }

    .box-diary h1 {
        font-size: 4.3vw;
        margin-bottom: 6%;
    }
    
    .box-single {
        width: 90%;
    }
    
    .photo-list {
        margin: 0 15px 15px 20px;
    }
    .box-photo img,
    .photo-main img {
        max-width: 100%;
        height: auto;
    }
    
    .thumbnail .slick-track {
        margin: 0 0 1vh 0;
    }
    
    .slider {
        width: 100%;
        margin: 0 auto 20px;
    }

    .slider .slick-track img {
        height: auto !important;
        max-width: 100%;
        aspect-ratio: 4 / 3;
    }

    
}