@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
/* Noto Sans JP: Thin 100, ExtraLight 200, Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExtraBold 800, Black 900 */

/* @scope (.renew){ */
/* common start */
:root{
    --site-max-width:100%;
    --site-main-width:100%;
    --site-division:375;
	--site-font-family-Noto-Sans-JP:'Noto Sans JP', sans-serif;
    --site-font-size-ratio:calc(100vw / var(--site-division));
    --site-padding:calc(var(--site-max-width) / var(--site-division) * calc(calc(var(--site-division) - 345) / 2));
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    list-style: none;
}
::before,
::after{
    box-sizing: border-box;
}
input, textarea, select {
	outline: none;
}
textarea {
	resize: none;
}
fieldset{
    border: none;
}
img{
	vertical-align: top;
    max-width: 100%;
}
.is-mobile{
	display: initial;
}
.is-desktop{
	display: none;
}

.btn{
    display: block;
    width: calc(310 * var(--site-font-size-ratio));
    margin: auto;
}

.title{
    color: #0C1946;
    font-weight: 900;
    font-size: calc(26 * var(--site-font-size-ratio));
    line-height: calc(84 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    display: block;
    width: fit-content;
    position: relative;
}
.title::before{
    color: #FE7231;
    font-size: calc(14 * var(--site-font-size-ratio));
    position: absolute;
    line-height: initial;
    top: 0;
}
.title::after{
    content: "";
    display: block;
    width: calc(30 * var(--site-font-size-ratio));
    height: calc(5 * var(--site-font-size-ratio));
    background-color: #FE7231;
    position: absolute;
    bottom: 0;
}
.title-center{
    margin: auto;
}
.title-center::before,
.title-center::after{
    left: 50%;
    transform: translate(-50%);
}

.top{
    position: relative;
    padding-bottom: calc(calc(188 + 607 - 604 - 151) * var(--site-font-size-ratio));
    overflow: hidden;
}
.top::after{
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,transparent calc(calc(188 - 80) * var(--site-font-size-ratio)),#FCC91A calc(calc(188 - 80) * var(--site-font-size-ratio)) 100%);
    border-bottom-left-radius: calc(30 * var(--site-font-size-ratio));
    position: absolute;
    bottom: 0;
    z-index: -1;
    transform: translateX(calc(15 * var(--site-font-size-ratio)));
}
.top>picture>img{
    width: calc(360 * var(--site-font-size-ratio));
    border-bottom-right-radius: calc(30 * var(--site-font-size-ratio));
}
.top>h1{
    width: calc(327 * var(--site-font-size-ratio));
    margin-top: calc(calc(308 - 200 - 80) * var(--site-font-size-ratio));
}
.top>h1,
.top>ul{
    margin-left: calc(35 * var(--site-font-size-ratio));
}
.top>h1>span>span{
    background-color: #FFF6D8;
    color: #0C1946;
    font-weight: 900;
    font-size: calc(26 * var(--site-font-size-ratio));
    line-height: calc(44 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    padding: 0 calc(calc(44.24 - 35) * var(--site-font-size-ratio));
}
.top>ul{
    margin-top: calc(calc(495 - 308 - 176) * var(--site-font-size-ratio));
    color: #FFF6D8;
    font-weight: 800;
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(30 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
}
.top>ul>li{
    display: flex;
    align-items: center;
    gap: calc(5 * var(--site-font-size-ratio));
}
.top>ul>li::before{
    content: "";
    display: inline-block;
    width: calc(18.85 * var(--site-font-size-ratio));
    height: calc(17 * var(--site-font-size-ratio));
    background-image: url('../../images/toppage/renew/top-list.svg');
    background-size: cover;
}
.top>a.btn:first-of-type{
    margin-top: calc(calc(604 - 308 - 277) * var(--site-font-size-ratio));
}
/* common end */

/* -------------------------------base(mobile)↓-------------------------------------- */
body{
	font-family: var(--site-font-family-Noto-Sans-JP);
	max-width: var(--site-max-width);
    margin: auto;
    overflow-x: hidden;
}
main{
    max-width: var(--site-main-width);
	margin: auto;
}
main.nav-on{
    display: none;
}

/* header start */
header{
    padding: calc(7 * var(--site-font-size-ratio)) calc(15 * var(--site-font-size-ratio)) calc(calc(80 - 37 - 27.73) * var(--site-font-size-ratio));
    position: relative;
}
header>span:nth-child(1){
    display: block;
    text-align: center;
    font-size: calc(12 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    font-weight: 500;
}
header>a{
    width: calc(121.88 * var(--site-font-size-ratio));
    display: block;
    margin: calc(calc(37 - 17 - 7) * var(--site-font-size-ratio)) auto 0;
}
header>a>img{
    width: 100%;
}
header>img.hamburger-menu{
    width: calc(25 * var(--site-font-size-ratio));
    position: absolute;
    bottom: calc(calc(80 - 41 - 20) * var(--site-font-size-ratio));
    right: calc(25 * var(--site-font-size-ratio));
}
header>nav{
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    background-color: #FFF6D8;
    text-align: center;
    opacity: 0;
    height: 0;
    transform: translateX(100%);
    z-index: 999;
}
header.nav-on>nav{
    padding: 15% 10%;
    opacity: 1;
    height: 100vh;
    transform: translateX(0%);
    transition: transform 0.5s ease-in-out;
}
header.nav-off>nav{
    padding: 15% 10%;
    opacity: 1;
    height: 100vh;
    transform: translateX(100%);
    transition: transform 0.5s ease-in-out;
}
header>nav>i{
    font-size: calc(38 * var(--site-font-size-ratio));
    color: #FE7231;
}
header>nav>a{
    display: block;
    width: 100%;
    background-color: #ffffff;
    padding: calc(8 * var(--site-font-size-ratio)) calc(25 * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    margin: calc(15 * var(--site-font-size-ratio)) auto;
    text-decoration: none;
    color: #0C1946;
    border-radius: calc(10 * var(--site-font-size-ratio));
}
/* header end */

/* footer start */
footer{
    margin-top: calc(calc(5124 - 4339 - 725) * var(--site-font-size-ratio));
    text-align: center;
}
footer a{
    color: #000000;
}
footer>a>img{
    width: calc(206 * var(--site-font-size-ratio));
}
footer>p{
    margin-top: calc(calc(5192 - 5124 - 48) * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    font-weight: 600;
}
footer>div{
    margin-top: calc(calc(5300 - 5192 - 97) * var(--site-font-size-ratio));
    font-size: calc(16 * var(--site-font-size-ratio));
    line-height: calc(40 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    font-weight: 600;
}
footer>div>a{
    display: block;
    margin: auto;
    width: fit-content;
    text-decoration: none;
}
footer>small{
    margin-top: calc(calc(5922 - 5642 - 240) * var(--site-font-size-ratio));
    padding: calc(calc(5934 - 5922) * var(--site-font-size-ratio)) 0;
    display: block;
    width: 100%;
    background-color: #FCC91A;
    color: #ffffff;
    text-align: center;
    font-size: calc(12 * var(--site-font-size-ratio));
    line-height: calc(28 * var(--site-font-size-ratio));
    letter-spacing: 0.05em;
    font-weight: 600;
}
/* footer end */
/* -------------------------------base(mobile)↑-------------------------------------- */

/* -----------------desktop(include ipad)↓-------------------- */
@media screen and (min-width: 768px){
    /* common start */
    :root{
        --site-division: 1440;
        --site-padding: calc(80 * var(--site-font-size-ratio));
    }
	.is-mobile{
		display: none;
	}
	.is-desktop{
		display: initial;
	}

    .title{
        font-size: calc(28 * var(--site-font-size-ratio));
    }
    .title::before{
        font-size: calc(16 * var(--site-font-size-ratio));
    }
    
    .top{
        padding-bottom: calc(calc(140 + 635 - 654 - 81) * var(--site-font-size-ratio));
        display: grid;
        grid-template-areas:
            "top-mainImg top-p"
            "top-mainImg top-ul"
            "top-tetsuzuki top-tel";
        column-gap: calc(calc(735 - 310 - 395) * var(--site-font-size-ratio));
        grid-template-columns: 1fr 1fr;
    }
    .top::after{
        background: linear-gradient(to bottom,transparent calc(calc(140 - 80) * var(--site-font-size-ratio)),#FCC91A calc(calc(140 - 80) * var(--site-font-size-ratio)) 100%);
        border-bottom-left-radius: calc(30 * var(--site-font-size-ratio));
        transform: translateX(calc(220 * var(--site-font-size-ratio)));
    }
    .top>picture{
        grid-area: top-mainImg;
    }
    .top>picture>img{
        width: calc(844 * var(--site-font-size-ratio));
        max-width: initial;
        position: absolute;
        top: 0;
        left: 0;
    }
    .top>h1,
    .top>ul{
        margin-left: 0;
    }
    .top>h1{
        width: calc(668 * var(--site-font-size-ratio));
        margin-top: 0;
        margin-left: calc(-43 * var(--site-font-size-ratio));
        grid-area: top-p;
        align-self: flex-end;
        opacity: 0.8;
    }
    .top>h1>span{
        display: inline-block;
        width: 100%;
        background:linear-gradient(to right,#ffffff calc(160 * var(--site-font-size-ratio)),#FFF6D8 calc(160 * var(--site-font-size-ratio)) 100%);
        padding-left: calc(calc(711 - 682) * var(--site-font-size-ratio));
    }
    .top>h1>span:nth-of-type(1){
        margin-top: calc(calc(265 - 140) * var(--site-font-size-ratio));
    }
    .top>h1>span:nth-of-type(2){
        margin-top: calc(calc(350 - 265 - 70) * var(--site-font-size-ratio));
    }
    .top>h1>span>span{
        font-size: calc(38 * var(--site-font-size-ratio));
        line-height: calc(84 * var(--site-font-size-ratio));
        padding: 0;
        background:none;
    }
    .top>ul{
        padding-left: calc(180 * var(--site-font-size-ratio));
        margin-top: calc(calc(439 - 350 - 70) * var(--site-font-size-ratio));
        font-size: calc(22 * var(--site-font-size-ratio));
        line-height: calc(42 * var(--site-font-size-ratio));
        grid-area: top-ul;
    }
    .top>a.btn:first-of-type{
        margin-top: calc(calc(684 - 256 - 309) * var(--site-font-size-ratio));
        grid-area: top-tetsuzuki;
        margin-right: 0;
    }
    .top>a.btn:nth-of-type(2){
        grid-area: top-tel;
        margin-left: 0;
        display: flex;
        align-items: flex-end;
        height: 100%;
    }

    .btn{
        cursor: pointer;
    }
    /* common end */

    /* header start */
    header{
        width: 100%;
        padding: calc(21 * var(--site-font-size-ratio)) calc(101 * var(--site-font-size-ratio)) calc(calc(80 - 21 - 38) * var(--site-font-size-ratio));
        display: grid;
        grid-template-areas: "header-logo header-text header-nav";
        align-items: center;
        justify-content: left;
    }
    header>span:nth-child(1){
        text-align: center;
        font-size: calc(16 * var(--site-font-size-ratio));
        width: fit-content;
        margin-left: calc(calc(288 - 101 - 167) * var(--site-font-size-ratio));
        grid-area: header-text;
    }
    header>a{
        width: calc(167 * var(--site-font-size-ratio));
        margin: auto;
        grid-area: header-logo;
    }
    header>img.hamburger-menu{
        display: none;
    }
    header>nav,
    header.nav-on>nav,
    header.nav-off>nav{
        all:unset;
        grid-area: header-nav;
        display: flex;
        justify-content: center;
        gap: calc(15 * var(--site-font-size-ratio));
        margin-left: calc(calc(790 - 288 - 355) * var(--site-font-size-ratio));
    }
    header>nav>i{
        font-size: 0;
        display: none !important;
        opacity: 0;
    }
    header>nav>a{
        word-break: keep-all;
        background-color: initial;
        padding: 0;
        font-size: calc(14 * var(--site-font-size-ratio));
        font-weight: 500;
        margin: auto;
        color: #0C1946;
        border-radius: initial;
    }
    header>nav>a:first-of-type{
        display: none;
    }
    /* header end */

    /* footer start */
    footer{
        margin-top: calc(calc(3581 - 2998 - 523) * var(--site-font-size-ratio));
        text-align: left;
        display: grid;
        grid-template-areas:
            "footer-logo footer-nav"
            "footer-info footer-nav"
            "footer-copyright footer-copyright";
        column-gap: calc(calc(560 - 224 - 306) * var(--site-font-size-ratio));
    }
    footer>a,
    footer>p{
        width: calc(306 * var(--site-font-size-ratio));
        justify-self: flex-end;
    }
    footer>a>img{
        grid-area: footer-logo;
    }
    footer>p{
        margin-top: calc(calc(3649 - 3581 - 48) * var(--site-font-size-ratio));
        grid-area: footer-info;
    }
    footer>div{
        width: calc(525 * var(--site-font-size-ratio));
        margin-top: 0;
        grid-area: footer-nav;
        align-self: flex-end;
        display: flex;
        justify-content: space-between;
    }
    footer>div>a{
        display: inline-block;
    }
    footer>small{
        margin-top: calc(calc(3900 - 3830 - 30) * var(--site-font-size-ratio));
        padding: calc(calc(3912 - 3900) * var(--site-font-size-ratio)) 0;
        grid-area: footer-copyright;
    }
    /* footer end */
}

@media screen and (min-width: 1440px){
}
/* -----------------desktop(include ipad)↑-------------------- */
/* } */
/* end of scope */