.second-heading{
    font-size: 2.8rem;
    text-align: center;
    margin: 0 auto 2.8rem;
}
.third-heading{
    font-size: 1.8rem;
    margin: 0 auto  calc(1.8rem*0.8);
}
#body.fixed{
    overflow: hidden;
}
#header{
    height: 60px;
}
#header .nav{
    display: none;
}
#header .nav.display{
    display: grid;
    justify-content: center;
    align-content: center;
    width: 100svw;
    height: 100svh;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--color-b);
}
.lists{
    display: block;
    flex-wrap: wrap;
}
#header .list:last-child .link{
    background: none;
    color: var(--color-a);
}
#header .list:last-child .link:hover{
    opacity: 0.6;
}
.nav-btn{
    display: block;
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: var(--color-b);
    cursor: pointer;
}
.nav-icon{
    width: 40px;
    height: 4px;
    background: var(--color-a);
    position: absolute;
    top: 38px;
    right: 10px;
    transform: rotate(0);
    transition-property: transform, top;
    transition-duration: 0.3s, 0.3s;
}
.nav-icon.active{
    top: 28px;
    transform: rotate(45deg);
    transition: transform 0.3s;
}
.nav-icon::before,
.nav-icon::after{
    content: "";
    width: 40px;
    height: 4px;
    background: var(--color-a);
}
.nav-icon::before{
    position: absolute;
    top: -20px;
    left: 0;
    transform: rotate(0);
    transition-delay: 0.3s;
    transition: top 0.4s;
}
.nav-icon.active::before{
    top: 0;
    transform: rotate(90deg);
    transition: transform 0.6s;
}
.nav-icon::after{
    position: absolute;
    top: -10px;
    left: 0;
    transition-delay: 0.3s;
    transition: top 0.4s;
}
.nav-icon.active::after{
    top: 0;
    opacity: 0;
}
main .bg-color{
    padding-bottom: 2.8rem;
}
.hero_slide1{
    background-image: url("../images/hero_img5.jpg");
}
.hero_slide2{
    background-image: url("../images/hero_img6.jpg");
}
.hero_slide3{
    background-image: url("../images/hero_img7.jpg");
}
.hero_slide4{
    background-image: url("../images/hero_img8.jpg");
}
.hero_text{
    -ms-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: calc(100vw / 11.7);
    bottom: 50%;
    left: 50svw;
    transform: translate(-50%, 50%);
}
.hero_text br{
    display: none;
}
.hero_text span{
    line-height: calc((100vw / 11.7)*1.6);
    margin-bottom: calc(100vw / 11.7);
}
.overview{
    width: 90svw;
    margin: auto;
}
.overview_text.fixed{
    width: 90%;
}
.overview_text,
.overview_bold{
    font-size: 1.6rem;
}
.overview_text span{
    display: inline-block;
}
.overview_text {
    display: block;
    margin-bottom: 1.6rem;
}
.overview_text.fixed{
    left: 5svw;
}
.mission{
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    height: auto;
    padding-top: 80px;
}
.mission_item-right,
.about_item-left{
    width: 90%;
}
.about_item-left{
    margin-left: 0;
}
.about_item-left .text-wrap{
    margin-bottom: 2.6em;
}
.about_item-left .btn{
    margin-bottom: 2.6rem;
}
.mission_item-left,
.about_item-right{
    width: 90%;
}
.mission_item-left img{
    width: 100%;
    height: calc(100vw * 1.414);
    margin: 1.6rem auto 0;
}
.about_item-right img{
    width: 100%;
    height: calc(100vw / 1.618);
    margin: 0 auto;
}
.text-wrap p{
    font-size: 1.6rem;
}
.purpose{
    width: 90%;
    margin: 80px auto 0;
}
.card{
    width: 100%;
    padding: 0;
    margin-bottom:  3.2rem;
}
.card:last-of-type{
    margin-bottom: 0;
}
.card .text-wrap{
    border-top: 1px solid var(--color-d);
}
#project{
    margin: 80px auto 2.8rem;
}
.project_img{
    width: 90vw;
    height: 90vw;
    background-image: url(../images/morinokaori_image2.jpg);
}
.about{
    flex-wrap: wrap;
    justify-content: center;
    padding: 5.2rem 0;
}
#footer .lists{
    flex-wrap: wrap;
}
#footer .list{
    width: 90%;
    padding: 1rem 0;
    margin: auto;
    border-top: 1px solid var(--color-c);
}
#footer .list:last-child{
    border-bottom: 1px solid var(--color-c);
}
#footer .link{
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    margin: 0;
    position: relative;
}
#footer .link::after{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url(../images/arrow.svg);
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
}
#footer .list_lists .link{
    font-size: 1.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    margin:0 0 0 1.8rem; 
}
#footer .list_lists .link::after{
    top: calc(50% + 0.5rem);
    right: calc(5% + 1.8rem);
}
#footer .list_list .link::before{
    content: "";
}
/*about*/
.first-heading{
    font-size: 3.6rem;
    margin: 0 auto 3.6rem;
}
.tr{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.th, .td{
    width: 90vw;
    border: none;
    font-size: 1.6rem;
}
.td{
    margin-bottom:  3.2rem;
}
.th{
    text-align: start;
}
.access{
    width: 90vw;
    margin: auto;
}
.access .text{
    font-size: 1.6rem;
    margin-bottom: 3.2rem;
}
iframe{
    width: 100%;
}
/*contact*/
#contact{
    flex-wrap: wrap;
}
#contact .text span{
    display: inline-block;
}
#contact p{
    width: 90%;
}
.text{
    width: 100%;
}
.form{
    width: 90%;
}
.form_item{
    flex-wrap: wrap;
    margin: 0 auto calc(1.8rem*0.6);
}
.form_name{
    display: block;
    width: 100%;
}
input[type=text],
input[type=email],
input[type=tel]{
    width: 100%;
    max-width: 420px;
}
textarea{
    width: 90vw;
}
.popup_items{
    width: 80vw;
}
.wrap_btn{
    flex-wrap: wrap;
}
.wrap_btn .btn:first-child{
    margin-bottom: 20px;
}
/*morinokaori*/
.project1 #header .list:last-child .link{
    background: none;
}
.morinokaori_hero{
    background-image: url("../images/morinokaori_hero_img2.jpg");
}
.morinokaori-logo{
    width:240px;
}
.morinokaori-message{
    width: 90svw;
    font-size: 1.8rem;
    margin: auto;
}
.sendan-img1,
.sendan-img2,
.sendan-img3{
    display: block;
    width: auto;
    max-width: auto;
    height: 240px;
    margin: 8px;
}
.content-wrap.reverse{
    flex-direction: row;
}
.morinokaori_item-text{
    width: 90svw;
}
.morinokaori_item-img{
    width: 90svw;
}
.morinokaori-img{
    width: 100%;
    margin-top: 1.6rem;
}
.project1 #footer .link::after{
    background-image: url("../images/aroow_morinokaori.svg");
}
.project1 #footer .list{
    border-top: 1px solid var(--color-e);
}
.project1 #footer .list:last-child{
    border-bottom: 1px solid var(--color-e);
}