@charset "UTF-8";



/* base (reset)

---------------------------------------------------*/

body {

    width: 100%;

    height: 100%;

    margin: 0 auto;

    padding: 0;

}



h1,

h2,

h3,

h4,

h5,

h6,

p {

    margin: 0;

    padding: 0;

    font-size: 1.0em;

    font-weight: 400;

}



ul,

ol,

dl,

dt,

dd {

    margin: 0;

    padding: 0;

}



ol,

li {

    list-style: none;

}



img {

    border: none;

    line-height: 0;

    font-size: 0;

    vertical-align: middle;

    max-width:100%;

}



article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

    display: block;

}



/* ---------- */

a {

    margin: 0;

    padding: 0;

    font-size: inherit;

    background: transparent;

}



th,

td {

    font-style: normal;

    font-weight: normal;

    font-size: inherit;

    empty-cells: show;

}



input,

select {

    vertical-align: middle;

}



input,

textarea,

select {

    font-family: inherit;

    font-size: inherit;

    font-weight: inherit;

    /*-webkit-appearance: none;*/

    border-radius: 0;

}



pre {

    white-space: -moz-pre-wrap;/* Mozilla */

    white-space: -o-pre-wrap;/* Opera 7 */

    white-space: pre-wrap;/* CSS3 */

    word-wrap: break-word;/* IE 5.5+ */

}





/* color

---------------------------------------------------*/

:root {

    --key-color: #018838;

    --background-color: #FAF7E9;

    --font-color: #000000;

    --white-color: #FDFCF8;

    --black-color: #1D1F23;

}



/* Selected Text

---------------------------------------------------*/

::selection {

    background: #191919;

    color: #FFFFFF;

}



/* HTML

---------------------------------------------------*/

html {

    margin: 0;

    padding: 0;

    height: 100%;

    font-size: 62.5%;

    overflow-y: scroll;

}

body {

    position: relative;

    width: 100%;

    line-height: 1;

    color: var(--font-color);

    font-size: 1.0em;

    font-family: "Noto Sans JP", sans-serif;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    background-color: var(--white-color);

}

body[data-size="large"] {

    font-size: 1.4em;

}

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

:before,

:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}



.sp-no {display:block;}

.sp-noi {display:inline;}

br.sp-no {display: inline;}

.pc-no {display:none;}

br.pc-no {display:none;}



svg {

    display: block;

    width: 100%;

    height: auto;

    fill: var(--black-color);

}



/* 768 */

@media screen and (min-width:1px) and (max-width: 768px) {

    body {

        /*font-size: calc(10 / 375 * 100vw);*/

        font-size: calc(10 / 385 * 100vw);

        -webkit-text-size-adjust: 100%;

    }

    .pc-no {display: block;}

    br.pc-no {display: inline;}

    .sp-no {display: none;}

    .sp-noi {display: none;}

    br.sp-no {display: none;}

}





/* link

---------------------------------------------------*/

a {

    text-decoration: none;

}

a:link,

a:visited,

a:active {

    /*color: var(--font-color);*/

}

a:focus {

    outline: 2px solid #008de8;

    box-shadow: 0 0 0 4px #1EA9DB;

}

a:hover {

    /*color: var(--font-color);*/

}

a.u {

    text-decoration: underline;

    text-underline-offset: 0.2em;

}

a,

.hover {

    -webkit-transition: all 0.5s;

    transition: all 0.5s;

}

.hover:hover {

    opacity: 0.8;

    filter: alpha(opacity=80);

    -webkit-transition: all 0.5s;

    transition: all 0.5s;

}



@media screen and (min-width: 769px) {

    a[href^="tel:"] {

        pointer-events: none;

        cursor: default;

    }

}



/* clearfix

---------------------------------------------------*/

.clearfix:after {

    visibility: hidden;

    display: block;

    font-size: 0;

    content: '';

    clear: both;

    height: 0;

}

.clearfix {

    min-height: 1px;

    zoom: 1;

}

* html .clearfix {

    height: auto;

    overflow: hidden;

}





/* wrapper

---------------------------------------------------*/

#wrapper {

    position: relative;

    width: 100%;

    background-color: var(--white-color);

    margin: 0 auto;

    overflow: hidden;

}



/* 768 */

@media screen and (min-width:1px) and (max-width: 768px) {

    #wrapper {

        padding-top: calc(50 / 375 * 100vw);

    }

}



/* size-selector

---------------------------------------------------*/

#size-selector {

    position: fixed;

    top: 20px;

    right: 57px;

    display: flex;

    align-items: center;

    width: fit-content;

    min-width: 180px;

    height: 40px;

    background-color: var(--key-color);

    border-radius: 5px;

    padding: 0 8px;

    z-index: 999;

}

#size-selector dl.size-list {

    display: flex;

    justify-content: flex-end;

    align-items: center;

}

#size-selector dl.size-list dt {

    color: #fff;

    line-height: 1.4em;

    font-size: 1.4em;

    font-weight: 500;

    letter-spacing: 0.02em;

    margin-right: 15px;

}

#size-selector dl.size-list dd {

    width: fit-content;

    background-color: #d4d4d4;

    border-radius: 4px;

    overflow: hidden;

}

#size-selector dl.size-list dd a {

    display: block;

    line-height: 1.4em;

    color: var(--font-color);

    font-size: 1.3em;

    font-weight: 500;

    padding: 0.2em 0.6em;

}

#size-selector dl.size-list dd a.is-current {

    background-color: #fff;

    pointer-events: none;

}



#size-selector dl.size-list dd + dd {

    margin-left: 5px;

}



/* 768 */

@media screen and (min-width:1px) and (max-width: 768px) {

    #size-selector {

        position: fixed;

        top: 0;

        left: 0;

        right: auto;

        justify-content: flex-end;

        width: 100%;

        height: calc(50 / 375 * 100vw);

        border-radius: 0;

        padding: 0 calc(15 / 375 * 100vw);

    }

    #size-selector dl.size-list dt {

        margin-right: calc(15 / 375 * 100vw);

    }

    #size-selector dl.size-list dd {

        border-radius: calc(4 / 375 * 100vw);

    }

    #size-selector dl.size-list dd + dd {

        margin-left: calc(5 / 375 * 100vw);

    }

}





/* Footer

---------------------------------------------------*/

#Footer {

    position: relative;

    z-index: 1;

}

#Footer .inner {

    background-color: var(--key-color);

    padding: 85px 0;

}

#Footer p {

    text-align: center;

    line-height: 2em;

    color: #fff;

    font-size: 1.5em;

}



/* 768 */

@media screen and (min-width:1px) and (max-width: 768px) {

    #Footer {

        padding-top: calc(127 / 375 * 100vw);

    }

    #Footer .inner {

        padding: calc(49 / 375 * 100vw) 0 calc(44 / 375 * 100vw);

    }

    #Footer p {

        font-size: calc(15 / 375 * 100vw);

    }

}





/* page-top

---------------------------------------------------*/

#page-top {

    position: fixed;

    right: 30px;

    bottom: 40px;

    width: min(149px, calc(149 / 1280 * 100vw));

    aspect-ratio: 1 / 1;

    cursor: pointer;

    z-index: 999;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.5s;

}

#page-top img {

    width: 100%;

}

#page-top.is-view {

    opacity: 1;

    pointer-events: auto;

}



@media screen and (min-width: 769px) {

    #page-top {

        top: auto !important;

    }

}

/*  768  */

@media screen and (max-width: 768px) {

    #page-top {

        left: calc(135 / 375 * 100vw);

        right: auto;

        bottom: calc(20 / 375 * 100vw);

        width: calc(105 / 375 * 100vw);

    }

    #page-top.is-static {

        position: absolute;

        top: 0;

        bottom: auto;

    }

}