@charset "UTF-8";

/*
Theme Name: maruwa home
Description: maruwa home
Version: 0.0.1
Author: xxx
*/

/*
size 
1920~1401px
@media (min-width:768px) and (max-width:1400px){}
@media (max-width:767px){}
*/


/* base
--------------------------------------------*/
*{
    margin: 0;
    padding: 0;
    /* border: 1px solid #40FF60; */
}

body{
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: 'Arya','Noto Sans JP';/*他何設定したらいいか相談で*/
}

/* decoration
--------------------------------------------*/
a{
    text-decoration: none;
    color: #2B2118;
}

ul{
    list-style-type: none;
}

/*logo*/
header .logo{
    width: 170px;
}

h2{
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-weight: bold;
    font-size: 64px;
    color: #E9332A;
}

h2 span{
    font-size: 24px;
    color: #2B2118;
}
@media (max-width:767px){
    h2 span{
        font-size: 20px;
    }
}


/*fancy*/
.fancy {
 background-color: transparent;
 /* test */
 border: 2px solid #000 !important;
 border-radius: 0;
 box-sizing: border-box;
 color: #fff;
 cursor: pointer;
 display: inline-block;
 float: right;
 font-weight: 700;
 letter-spacing: 0.05em;
 margin: 0;
 outline: none;
 overflow: visible;
 padding: 1.25em 2em;
 text-align: center;
 text-decoration: none;
 text-transform: none;
 transition: all 0.3s ease-in-out;
 user-select: none;
 font-size: 13px;
}

.fancy::before{
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background: black;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}
@media (max-width:767px){
    .fancy::before{
        left: calc(55vw - 10em);
    }
}

.fancy .fancy-text {
 font-size: 1.125em;
 line-height: 1.33333em;
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: black;
}
@media (max-width:767px){
    .fancy .fancy-text {
      text-align: center;
    }
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #D8DBE2;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #D8DBE2;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #D8DBE2;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: white;
 background: black;
}

.fancy:hover::before {
 width: 0.9375rem;
 background: white;
}

.fancy:hover .fancy-text {
 color: white;
 padding-left: 1.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}

/* section no
--------------------------------------------*/
span.section_no{
    font-size: 280px;
    line-height: 280px;
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: #FFFFFF 4px;
    display: block;
    position: absolute;
}
@media (max-width:767px){
    span.section_no{
        font-size: 200px;
        line-height: 200px;
    }
}

/* sectionの縁デザイン
--------------------------------------------*/
.curve{
    border-radius: 100px 0 100px 0;
    position: relative;
}

#pagetop.curve{
    border-radius: 0 0 100px 0;
    position: relative;
}

/*左上*/
.curve::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    z-index: -1;
}
/*右下*/
.curve::after{
    position: absolute;
    content: '';
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    z-index: -1;
}


@media (max-width:767px){
    .curve{
        border-radius: 40px 0 40px 0;
    }

    #pagetop.curve{
        border-radius: 0 0 40px 0;
    }

    #records_renovation.curve{
        border-radius: 40px 40px 0 0;
    }
    /*左上*/
    .curve::before{
        width: 40px;
        height: 40px;
    }
    /*右下*/
    .curve::after{
        width: 40px;
        height: 40px;
    }
}

/* sectionNoとか文字のfade設定
--------------------------------------------*/
.fade-up {
    -webkit-transition: opacity 1s .4s ease-out, -webkit-transform 1s .4s ease-out;
    transition: opacity 1s .4s ease-out, -webkit-transform 1s .4s ease-out;
    transition: transform 1s .4s ease-out, opacity 1s .4s ease-out;
    transition: transform 1s .4s ease-out, opacity 1s .4s ease-out, -webkit-transform 1s .4s ease-out;
    opacity: 0;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
}

.is-inview.fade-up {
    -webkit-transform: none;
    transform: none;
    opacity: 1
}

/* header
--------------------------------------------*/
header{
    z-index: 10;
}

header .logo{
    display: block;
    position: absolute;
    left: 120px;
    top: 40px;
}
@media (min-width:768px) and (max-width:1400px){
    header .logo{
        width:124px;
        left: 80px;
    }
}
@media (max-width:767px){
    header .logo{
        width: 56px;
        left: 16px;
        top: 16px;
    }
}
header .logo img{
    width: 100%;
}

#header_menu{
    position: fixed;
    top: 40px;
    right: 4vw;
    width: 216px;
    gap: 16px;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    z-index: 999;
}
@media (max-width:767px){
    #header_menu{
        top: 26px;
        right: 16px;
        width: 128px;
        gap: 0;
    }

    #header_menu.active{
        top: 10px;
        right: 17px;
        flex-direction: column;
        background-color: #A7A9B0;
        width: 137px;
        height: 359px;
        border-radius: 12px;
        padding: 16px 12px;
        color: #FFFFFF;
    }
}

#header_menu .header-menu-access{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 72px;
    height: 24px;
}
@media (max-width:767px){
    #header_menu .header-menu-access{
        width: 56px;
        height: 16px;
    }
    #header_menu.active .header-menu-access{
        position: absolute;
        bottom: 16px;
        left: 28px;
    }
}

#header_menu .header-menu-access span{
    width: 24px;
    aspect-ratio: 1;
    display: inline-block;
}
@media (max-width:767px){
    #header_menu .header-menu-access span{
        width: 16px;
    }
}

#header_menu .header-menu-access span.mail{
    background-image: url("./img/icon/mail.png");
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;
}

#header_menu .header-menu-access span.phone{
    background: url("./img/icon/phone.png");
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;
}

#header_menu.is-white .header-menu-access span.mail{
    background-image: url("./img/icon/mail-white.png");
}

#header_menu.is-white .header-menu-access span.phone{
    background-image: url("./img/icon/phone-white.png");
}
@media (max-width:767px){
    #header_menu.active .header-menu-access span.mail{
        background-image: url("./img/icon/mail-white.png");
    }

    #header_menu.active .header-menu-access span.phone{
        background-image: url("./img/icon/phone-white.png");
    }
}

.header_menu_nav{
    width: 128px;
    display: flex;
    gap: 16px;
    flex-direction: column;
    height: 24px;
}
@media (max-width:767px){
    .header_menu_nav{
        width: 5em;
        height: 16px;
        gap: 8px;
    }
    #header_menu.active .header_menu_nav{
        width: 95px;
        gap: 8px;
    }
}
@media (min-width:768px){
    #header_menu.open .header_menu_nav{
        height: 401px;
    }
}

#header_menu nav .header_menu_nav_top{
    display: inline-block;
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    text-indent: 28px;
    position: relative;
}
@media (max-width:767px){
    #header_menu nav .header_menu_nav_top{
        font-size: 16px;
        line-height: 16px;
        text-indent: 16px;
    }
}

#header_menu nav .header_menu_nav_top::before{
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 20px;
    aspect-ratio: 1;
    background-color: #2B2118;
    border-radius: 50%;
}
@media (max-width:767px){
    #header_menu nav .header_menu_nav_top::before{
        width: 12px;
    }
    #header_menu.active nav .header_menu_nav_top::before{
        background-color: #FFFFFF;
    }
}

#header_menu nav ul{
    width: 123px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 28px;
    gap: 8px;
/*     height: 361px; */
    transform: scaleY(0);
    transition-delay: .5s;
}
@media (max-width:767px){
    #header_menu nav ul{
        width: 100px; /*95px*/
        height: 275px;
        gap: 4px;
        margin-left: 16px;
        transition-delay: 0s;
    }
}

@media (min-width:768px){
    #header_menu.top nav ul,#header_menu.open nav ul{
        transform: scaleY(100%);
        transition-delay: 0s;
    }
}
@media (max-width:767px){
    #header_menu.active nav ul{
        transform: scaleY(100%);
        transition-delay: 0s;
    }
}

#header_menu nav li{
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 33px;
}

#header_menu nav .menu_nav_en,#header_menu nav .menu_nav_jp{
    line-height: 33px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    width: 100%;
    transition: .4s;
}
@media (max-width:767px){
    #header_menu nav .menu_nav_en,#header_menu nav .menu_nav_jp{
        font-size: 15px;
    }
}

#header_menu nav .menu_nav_jp{
    color: #E9332A;
    font-size: 14px;
}
@media (max-width:767px){
    #header_menu nav .menu_nav_jp{
        font-size: 12px;
    }
}

#header_menu nav li:hover .menu_nav_en,#header_menu nav li:hover .menu_nav_jp{
    transform: translateY(-100%);
}

/*menu animeation*/
#header_menu.is-white nav  .menu_nav_en,#header_menu.is-white .header_menu_nav_top{
    color: #FFFFFF;
}
@media (max-width:767px){
    #header_menu.active nav .menu_nav_en,#header_menu.active .header_menu_nav_top{
        color: #FFFFFF;
    }
}

#header_menu.is-white .header_menu_nav_top::before{
    background-color: #FFFFFF;
}
@media (max-width:767px){
    #header_menu.active .header_menu_nav_top::before{
       background-color: #FFFFFF;
    }
}

@media (min-width:768px){
    #header_menu.top nav li a, #header_menu.open nav li a{
        pointer-events: auto;
        transition-delay: 0s;
        animation: navigationItemsShow 1s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both;
    }
}
@media (max-width:767px){
    #header_menu.active nav li a{
        pointer-events: auto;
        transition-delay: 0s;
        animation: navigationItemsShow 1s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both;
    }
}

#header_menu nav li a{
    animation: navigationItemsHide 5s cubic-bezier(.19, 1, .22, 1) 0s 1 normal both;
}


@keyframes navigationItemsShow {
    0% {
        transform: translateY(100%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes navigationItemsHide {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(100%)
    }
}

/*close button*/
#header_menu #nav_close{
    width: 0;
    height: 0;
    background: url("./img/icon/close.png") center no-repeat;
    visibility: hidden;
    position: absolute;
    top: 16px;
    right: 9px;
}
@media (max-width:767px){
    #header_menu.active #nav_close{
        width: 16px;
        height: 16px;
        visibility: visible;
    }
}


/* footer
--------------------------------------------*/
footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    padding-top: 40px;
    padding-bottom: 64px;
}

footer .container{
    display: flex;
    flex-direction: row;
    width: 1240px;
    justify-content: center;
    align-items: center;
    gap: 104px;
}
@media (min-width:768px) and (max-width:1400px){
    footer .container{
        width: calc(100% - 128px);/*-margin*/
        margin: 0 64px;
        gap: 64px;
    }
}
@media (max-width:767px){
    footer .container{
        width: calc(100% - 32px);/*-margin*/
        margin: 64px 16px 0px;
        gap: 64px;
        flex-direction: column;
    }
}

footer .container .link{
    width: 170px;
    height: 294px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
}

footer .container .sns{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

footer .container .information{
    width: 758px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
@media (max-width:767px){
    footer .container .information{
        width: 100%;
    }
}

footer .container .information .text{
    flex-direction: column;
    gap: 24px;
}

footer .container .information .text h4{
    font-size: 32px;
    font-weight: bold;
    color: #E9332A;
}

footer .container .information .text p{
    font-size: 16px;
    line-height: 24px;
}

footer .container .information .area{
    background-color: #D8DBE2;
    padding: 16px;
    width: calc(100% - 32px);
    font-size: 16px;
    font-weight: bold;
}

footer .container .information .information-container{
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: clamp(20px,3vw ,40px);
}
@media (max-width:767px){
    footer .container .information .information-container{
        flex-direction: column;
    }
}

footer .container .information .information-container .phone .number{
    font-size: clamp(10px, 3vw ,36px);
    font-weight: bold;
    color: #E9332A;
    display: flex;
    align-items: center;
}
@media (max-width:767px){
    footer .container .information .information-container .phone{
        text-align: center;
    }
    footer .container .information .information-container .phone .number{
        justify-content: center;
        font-size: 36px;
    }
}

footer .container .information .information-container .phone p{
    font-size: clamp(10px, 1.2vw, 16px);
}
@media (max-width:767px){
    footer .container .information .information-container .phone p{
        font-size: 16px;
    }
}

footer .container .information .information-container a.mail{
    /* width: calc(296px - 32px); */
    /* max-height: calc(75px - 32px); */
    padding: 16px clamp(5px, 1vw, 16px);
    background-color: #E9332A;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    font-size: clamp(7px,1.5vw,20px);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
@media (max-width:767px){
    footer .container .information .information-container a.mail{
        font-size: 20px;
    }
}

@media (min-width:768px) and (max-width:1400px){
    footer .container .information .information-container a.mail img{
        width: clamp(7px, 3vw, 37px);
        aspect-ratio: 1;
    }
}

footer .text-link{
    padding: 64px 0;
    width: 1240px;
    border-top: 1px solid #D8DBE2;
    border-bottom: 1px solid #D8DBE2;
}
@media (min-width:768px) and (max-width:1400px){
    footer .text-link{
        width: calc(100% - 128px);
    }
}
@media (max-width:767px){
    footer .text-link{
        width: calc(100% - 16px);
    }
}

footer .text-link ul{
    display: flex;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;
    font-size: 18px;
    font-weight: bold;
}
@media (max-width:767px){
    footer .text-link ul{
        gap: 16px;
    }
}

footer .copyright{
    font-size: 12px;
}