@charset "utf-8";
:root{
    --color-a: #43493a;
    --color-b: #f7f4ed;
    --color-c: #f8e9d3;
    --color-d: #E8B76E;
    --color-e: #13453f;
    --color-f: #ffffff;
}
html{
    font-size: 62.5%;
    font-family: "Zen Old Mincho", serif;
    color: var(--color-a);
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
*{
    margin: 0;
    padding: 0;
    letter-spacing: 0.08em;
}
img{
    border-radius: 6px;
}
.link{
    color: var(--color-a);
    text-decoration: none;
}
.link:hover{
    opacity: 0.6;
}
.first-heading{
    font-size: clamp(3.6rem, calc(100vw / 35.56), 4rem);
    text-align: center;
    margin: 0 auto clamp(3.6rem, calc(100vw / 35.56), 4rem);
}
.second-heading{
    font-size: clamp(2.8rem, calc(100vw / 45.7), 3.6rem);
    text-align: center;
    margin: 0 auto calc((100svw / 45.7)*1.6);
}
.third-heading{
    font-size: clamp(1.8rem, calc(100vw / 64), 2.4rem);
    margin: 0 auto  calc((100vw / 64)*0.8);
}
.btn{
    width: clamp(160px, calc(100vw / 8), 180px);
    height: clamp(40px, calc(100vw / 32), 60px);
    border: none;
    background: var(--color-d);
    color:  var(--color-b);
    font-family: "Zen Old Mincho", serif;
    cursor: pointer;
}
.link.btn{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: clamp(2rem, calc(100vw / 64), 2.4rem);
    margin: auto;
}
.bg-color{
    background-color: var(--color-b);
}
main .bg-color{
    padding-bottom: 80px;
}
#body{
    width: 100svw;
    background: var(--color-b);
    line-height: 1;
    font-size: 1.8rem;
}
#body.hidden{
    opacity: 0;
}
#header{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 80px;
    background: var(--color-b);
    position: fixed;
    top: 0;
    z-index: 30;
    transform-origin: top;
    transform: scaleY(1);
    transition: 0.6s;
}
#header.hidden{
    transform: scaleY(0);
}
#header .link{
    display: flex;
    align-items: center;
    height: 80px;
    padding: 0 2.2rem;
    font-size: 2.2rem;
}    
#header .list:last-child .link{
    background: var(--color-d);
    color: var(--color-b);
}
#header .list:last-child .link:hover{
    opacity: 0.8;
}
.nav-btn{
    display: none;
}
.hero{
    width: 100svw;
    height: 100svh;
}
.hero_slide1{
    width: 100svw;
    height: 100svh;
    background-image: url("../images/hero_img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: slide1 28s linear infinite;
    position: fixed;
    z-index: -10;
}
@keyframes slide1{
    0%{
        opacity: 1;
    }
    15%{
        opacity: 1;
    }
    25%{
        opacity: 0;
    }
    90%{
        opacity: 0;
    }
}
.hero_slide2{
    width: 100svw;
    height: 100svh;
    background-image: url("../images/hero_img2.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: slide2 28s linear infinite;
    position: fixed;
    opacity: 0;
    z-index: -10;
}
@keyframes slide2{
    15%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    40%{
        opacity: 1;
    }
    50%{
        opacity: 0;        
    }
}
.hero_slide3{
    width: 100svw;
    height: 100svh;
    background-image: url("../images/hero_img3.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: slide3 28s linear infinite;
    position: fixed;
    opacity: 0;
    z-index: -10;
}
@keyframes slide3{
    40%{
        opacity: 0;
    }
    50%{
        opacity: 1;       
    }
    65%{
        opacity: 1;        
    }
    75%{
        opacity: 0;
    }
}
.hero_slide4{
    width: 100svw;
    height: 100svh;
    background-image: url("../images/hero_img4.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    animation: slide4 28s linear infinite;
    position: fixed;
    opacity: 0;
    z-index: -10;
}
@keyframes slide4{
    65%{
        opacity: 0;       
    }
    75%{
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.hero_text{
    font-size: calc(100vw / 22.86);
    white-space: nowrap;
    position: absolute;
    bottom: 5vh;
    left: 5vw;
    z-index: 10;
    color: var(--color-b);
}
.hero_text span{
    line-height:  calc((100vw / 22.86)*1.6);
}
.overview{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100svw;
    height: 100svh;
}
.overview_text.fixed{
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: -5;
}
.overview_text{
    position: relative;
}
.overview_text,
.overview_bold{
    font-size: clamp(2rem, calc(100vw / 64), 2.4rem);
    line-height: 1.8;
    color: var(--color-b);
}
.overview_bold{  
    font-weight: bold;
}
.mission{
    display: flex;
    flex-direction: row-reverse;
    width: 100svw;
    height: 100svh;
}
.mission_item-right,
.about_item-left{
    display: grid;
    place-content: center;
    width: 60%;
}
.mission_item-left,
.about_item-right{
    width: 40%;
    display: grid;
    align-items: center;
}
.mission_item-left img{
    width: 30vw;
    height: calc(30vw * 1.414);
    margin: 5vw;
}
.about_item-right img{
    width:30vw;
    height: calc(30vw / 1.618);
    margin: 5vw;
}
.text-wrap{
    width: 100%;
    max-width: 800px;
    margin: auto;
}
.text-wrap p{
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    line-height: 1.8;
}
.text-wrap span{
    display: inline-block;
}
.third-heading span{
    display: inline-block;
}
.purpose{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90vw;
    margin: 0 auto 300px;
}
.purpose .second-heading{
    display: block;
    width: 100%;
}
.card{
    width: max(296px, calc(100vw / 4.32));
}
.project_img{
    display: block;
    width: 50vw;
    height: calc(50vw / 3.303);
    margin: auto;
    background-image: url(../images/morinokaori_image1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
}
#project{
    margin-bottom: 300px;
}
#about{
    display: grid;
    align-content: center;
    width: 100svw;
    height: auto;
    min-height: 100vh;
    margin-top: 80px;
    padding-top: 100px;
}
.table{
    width: auto;
    margin: 0 auto 160px;
    border-collapse: collapse;
}
.td li::before{
    content: "・";
    display: inline-block;
    width: clamp(1.6rem, calc(100vw / 80), 2rem);
    height: clamp(1.6rem, calc(100vw / 80), 2rem);
}
.table ul{
    list-style: none;
}
.table dl{
    display: flex;
    flex-wrap: wrap;
}
.table dd{
    margin-left: clamp(1.8rem, calc(100vw / 71), 2.2rem);
}
.th, .td{
    padding: clamp(1.08rem, calc((100vw / 71)*0.6), 1.32rem);
    border: 1px solid var(--color-d);
    font-size: clamp(1.8rem, calc(100vw / 71), 2.2rem);
    line-height: 1.8;
}
.about{
    display: flex;
    padding-top: 30px;
    padding-bottom: 30px;
    background: var(--color-c);
}
.about_item-left{
    margin-left: 5vw;
}
.about_item-right{
    width: 40%;
}
.about .text-wrap{
    margin-bottom: calc(100vw / 40);
}
.access{
    width: clamp(558px, calc(100svw / 2.04), 765px);
    margin: auto;
}
.access .text{
    font-size: clamp(1.8rem, calc(100vw / 71), 2.2rem);
    line-height: 1.6;
    margin-bottom: clamp(3.6rem, calc((100vw / 71)*2), 4.4rem);
}
.map{
    width: 100%;
    margin-bottom: clamp(3.2rem, calc((100vw / 80)*2), 4rem);
}
#contact{
    width: 100svw;
    height: auto;
    min-height: 100svh;
    display: grid;
    align-content: center;
    margin-top: 80px;
}
#contact .text span{
    display: inline-block;
}
#contact p{
    width: 80%;
    max-width: 1000px;
    margin:0 auto clamp(1.6rem, calc(100vw / 71), 2.2rem);
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    line-height: 1.8;
}
.form{
    width: 80%;
    max-width: 1000px;
    margin: 24px auto;
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    line-height: 1.8;
}
.form_item{
    display: flex;
    align-items: center;
    margin: 0 auto  clamp(0.96rem, calc((100vw / 71)*0.6), 1.32rem);
}
.form_name{
    display: inline-block;
    width: 30%;
    min-width: 200px;
}
.text{
    width: 90vw;
    max-width: 1000px;
}
input[type=text],
input[type=email],
input[type=tel]{
    width: calc(100svw / 4.3);
    min-width: 300px;
    padding: 2px;
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    background-color: var(--color-b);
    border: 1px solid var(--color-a);
}
textarea{
    width: 67%;
    height: auto;
    min-height: 5em;
    padding: 0.6rem;
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    background-color: var(--color-b);
}
.required::after{
    content: "[必須]";
    display: inline-block;
    margin: 0 clamp(1.6rem, calc(100vw / 71), 2.2rem);
    color: red;
}
.check-btn{
    display: block;
    width: auto;
    height: auto;
    padding: clamp(0.96rem, calc((100vw / 71)*0.6), 1.32rem);
    margin: 50px auto 0;
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
}
#popup{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.6);
}
.popup_items{
    display: grid;
    align-content: center;
    width: 800px;
    height: 90svh;
    padding: clamp(2.7rem, calc((100vw / 80)*1.5), 3rem);
    position: absolute;
    top: calc(50svh);
    left: calc(50svw);
    transform: translate(-50%, -50%);
    background: var(--color-b);
    overflow: scroll;
}
.popup_items dt,
.popup_items dd{
    font-size: clamp(1.6rem, calc(100vw / 80), 2rem);
    line-height: 1.6;
}
.popup_items dl{
    margin-bottom: 1.8rem;
}
.popup_items .btn{
    font-size: clamp(2rem, calc(100vw / 64), 2.4rem);
}
#popup.popup-hidden{
    display: none;
}
#text-check{
    white-space:pre-wrap;
}
.wrap_btn{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    margin-top: 40px;
}
#footer{
    width: 100svw;
    height: auto;
    position: relative;
    background: var(--color-b);
    padding-top: 30px;
}
#footer::before{
    content: "";
    display: block;
    width: 90svw;
    border: 1px solid var(--color-d);
    position: absolute;
    top: 0;
    left: 5svw;
}
#footer .lists{
    display: flex;
    justify-content: center;
}
#footer .link{
    display: block;
    font-size: clamp(1.6rem, calc(100vw / 71), 2.2rem);
    line-height: 1.8;
    font-weight: 600;
    margin: 0  clamp(1.6rem, calc(100vw / 71), 2.2rem);
}
#footer .list_lists .link{
    font-size: clamp(1.6rem, calc(100vw / 80), 2rem);
    font-weight: 400;
    margin-left: clamp(3.2rem, calc((100vw / 80)*2), 4rem);
}
#footer .list_list .link::before{
    content: "－";
    display: block;
    position: absolute;
    top: 0;
    left: clamp(1.6rem, calc(100vw / 80), 2rem);
}
.lists{
    display: flex;
    list-style: none;
}
.list_lists{
    list-style: none;
}
.list_list{
    position: relative;
}
.copy{
    display: block;
    text-align: center;
    margin: 30px auto 0;
    padding-bottom: 8px;
}
.sns-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sns-icon{
    width: clamp(5rem, calc(100vw / 22.6), 7rem);
    margin: clamp(5rem, calc(100vw / 22.6), 7rem);
}
.line-icon{
    padding: 0 50px;
}
/*morinokaori*/
.project1 #header .list:last-child .link{
    background: var(--color-e);
}
#morinokaori{
    width: 100svw;
    height: auto;
    min-height: 100svh;
}
#morinokaori .btn{
    background: var(--color-e);
}
.morinokaori_hero{
    width: 100vw;
    height: 100vh;
    background-image: url("../images/morinokaori_hero_img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.morinokaori-logo{
    width: 560px;
    position: absolute;
    top: 50svh;
    left: 50svw;
    transform: translate(-50%, -55%);
}
.project1 #footer{
    background-color: var(--color-b);
}
.project1 #footer::before{
    border: 1px solid var(--color-e);
}
.morinokaori-message{
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100vw;
    height: auto;
    min-height: 60svh;
    font-size: clamp(2rem, calc(100vw / 64), 2.4rem);
    line-height: 1.8;
}
.content-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100vw;
    margin-bottom: 240px;
}
.wrap_sendan-img{
    display: flex;
    justify-content: center;
    margin-bottom: 240px;
}
.sendan-img1,
.sendan-img2,
.sendan-img3{
    display: block;
    width: auto;
    max-width: auto;
    height: 640px;
    margin: 24px;
}
.content-wrap.reverse{
    flex-direction: row-reverse;
}
.morinokaori_item-text{
    width: 60vw;
}
.morinokaori_item-img{
    width: 30vw;
}
.morinokaori-img{
    display: block;
    width: 80%;
    margin: auto;
}
.sub-text{
    text-align: center;
    line-height: 1.6;
    font-size: clamp(1.4rem, calc(100vw / 91.4), 1.8rem);
    transform: translateX(-1%);
}
.label{
    margin-top: clamp(3.2rem, calc((100vw / 71)*2), 4.4rem);
}
.text-link{
    color: var(--color-e);
}
.text-link:hover{
    opacity: 0.6;
}