html {
    font-size: 62.5%;
}

.pc {
    display: none;
}

body {
    background: #E1E4E6;
}

body.fixed {
    position: fixed;
    width: 100%;
    height: 100%;
}

.btn a {
    display: block;
    text-decoration: none;
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-align: right;
    color: #263940;
    padding-right: 70px;
    margin-right: 18px;
    background: url('../img/btn.png') no-repeat top right;
    height: 50px;
    line-height: 50px;
    margin-bottom: 15px;
}

img,
.googlemap-bw iframe {
    width: 100%;
}

.header {
    height: 50px;
    display: flex;
    padding: 29px 18px 0;
    justify-content: space-between;
}

.header-nav-wrap {
    display: none;
}

.headerWrap {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    z-index: 100;
}

.header-animation-frame {
    width: 100%;
    height: 100vh;
    position: relative;
}

.active {
    display: block;
}

/* nav */
.header-nav-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: transparent;
    /* Note: currently only Safari supports backdrop-filter 
backdrop-filter: blur(3px);
--webkit-backdrop-filter: blur(3px);
*/
    --webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);

    background-color: rgba(255, 255, 255, 0.15);

    z-index: 20000;
}

.header-nav-wrap nav {
    position: relative;
}

.header-nav {
    position: absolute;
    top: 0;
    right: 0;
    height: 100dvh;
    background: #F2F3F4;
    width: calc(100% - 75px);
    z-index: 1001;
    margin-left: 75px;
}

.header-nav .header-nav-main-ul {
    list-style: none;
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 22px;
    text-align: left;
    padding-left: 60px;
    padding-top: 20dvh;

}

.header-nav .header-nav-main-ul li a {
    display: block;
    padding: 20px 0;
    color: #263940 !important;
    text-decoration: none;
    background: url('../img/sp-nav-line.png') no-repeat left top;
}

.header-nav .header-nav-main-ul li:first-child a {
    background: none;
}

.header .lang-selector ul {
    display: flex;
    padding-top: 50px;
    padding-left: 60px;
}


.header .lang-selector ul li a {
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 14px;
    line-height: 66px;
    text-align: left;
    color: #263940;
    height: 23px;
}

.header .lang-selector ul li:first-child {
    padding-right: 40px;
    background: url('../img/sp-lang-line.png') no-repeat right center;
}


.header .lang-selector ul li:last-child a {
    margin-left: 40px;
}

.closer {
    position: absolute;
    width: 19px;
    height: 19px;
    right: 18px;
    top: 44px;
    z-index: 1200;
}

.openner {
    padding-top: 19px;
}

.open {
    display: block;
}

.lang-selector ul {
    list-style: none;
}

.lang-selector li a.selected {
    background: url('../img/sp_lang-select.png') no-repeat center bottom;

}

/* /nav */

.header h1,
.header h1 img {
    width: 135px;
}

.header-top-bg {
    width: 100%;
    position: relative;
    z-index: -120;
    height: 100vh;
}

.header-top-bg::before {
    background-image: url("../img/sp-top-bg.png");
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: -100;
}

.hero {
    position: absolute;
    padding: 138px 18px ;
   /* margin-bottom: env(safe-area-inset-bottom); */
    top: 0;
    width: 100%;
    height: 100dvh;
    box-sizing: border-box;
}

.hero-inner {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
    line-height: 2rem;
    text-align: left;
    color: #fff;

}

.hero-inner span.top {
    padding-left: 6px;
    font-style: italic;
}

.hero-inner small {
    padding-top: 3rem;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    line-height: 2rem;
    text-align: left;
    color: #fff;
    font-style: normal;

}

.hero-inner h1 {
    padding: 2rem 0;
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 4.5rem;
    letter-spacing: -0.01em;
    line-height: 6rem;
    text-align: left;
    color: #fff;
}

.top-address {
    display: none;
}

.info {
    display: flex;
    justify-content: space-between;
    background: #fff;
    height: 10rem;
    width: calc(100% - 18px);
    position: absolute;
    bottom: 0;
    right: 0;
    padding-top: 2rem;

    box-sizing: border-box;
}

.info dl dt {
    display: none;
}

.info dl dd {
    width: 25rem;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    line-height: 2rem;
    text-align: left;
    color: #263940;

}

.info dl dd time {
    font-family: "EB Garamond";
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    text-align: left;
    color: #263940;

}

.info-btn {
    padding-top: 1rem;
    width: calc(5rem + 18px);
}

.info-btn a {
    display: block;
    width: 5rem;
    height: 5rem;
    background: url('../img/btn.png');

}

.about-wrap {
    position: relative;
    width: 100%;
    height: 604px;
    z-index: 10;
}

.about-p {
    padding-top: 23rem;
    position: absolute;
    right: 0;
    top: 2.5rem;
    background-color: #F2F3F4;
    width: calc(100% - 18px);
    z-index: 100;
    padding-left: 3rem;
    padding-right: 3rem;
    box-sizing: border-box;
    padding-bottom: 2.5rem;
}

.about-img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 18px);
    z-index: 101;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.16);
}

.about-p h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 4.6rem;
    letter-spacing: -0.01em;
    line-height: 6.6rem;
    text-align: left;
    color: #263940;

}

.about-p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 3.6rem;
    text-align: left;
    color: #263940;

}

.quality {
    padding-bottom: 0;
}

.quality-head {
    width: 100%;
    height: 50rem;
    background: url(../img/quality.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: auto;
    padding-top: 5rem;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.quality-head h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 2.6rem;
    letter-spacing: -0.01em;
    text-align: center;
    color: #fff;
    margin-bottom: 3rem;
    height: 2.6rem;
    line-height: 2.6rem;
    overflow: hidden;
}

.quality-head p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
    line-height: 3.6rem;
    text-align: center;
    color: #fff;
    width: calc(100% - 75px);
    margin: auto;
    word-wrap:break-word;
    overflow: hidden;
}

.quality-body-wrap {
    position: relative;
    width: calc(100% - 36px);
    height: 1674px;
}

.quality-body {
    position: absolute;
    /* top: -230px; */
    left: 18px;
    background-color: #E1E4E6;
}

.quality-body h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 2.4rem;
    letter-spacing: -0.01em;
    line-height: 4rem;
    text-align: center;
    color: #263940;
    height: 80px;
    line-height: 80px;

}

.quality-list {
    width: calc(100% - 55px);
    margin: 0 auto 20px;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #fff;
    padding-bottom: 30px;
}


.quality-bottom {
    padding-top: 30px;
}

.quality-bottom h2 {
    width: calc(100% - 18px);
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 2.4rem;
    letter-spacing: -0.01em;
    line-height: 3.6rem;
    text-align: center;
    color: #263940;
    margin: auto;
    margin-bottom: 20px;

}

.quality-bottom p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    width: calc(100% - 75px);
    margin: 0 auto 100px;

}

.quality-bottom-box-wrap {
    margin-top: 100px;
}

.quality-bottom-box-wrap {
    margin: auto;
    width: calc(100% - 36px);
    position: relative;
    background: #F2F3F4;

}

.quality-list p {
    width: calc(100% - 60px);
    margin: auto;
}

.quantity-list {
    list-style: none;
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    padding: 0 10px;
    box-sizing: border-box;
}

.quantity-list li {
    margin-right: 20px;
    padding-left: 15px;
    position: relative;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-align: left;
    color: #fff;
    line-height: 20px;
    height: 20px;
    white-space: nowrap;

}

.quantity-list li:last-child {
    margin-right: 0;
}

.quantity-list li::before {
    content: " ";
    width: 10px;
    height: 10px;
    background-color: #A6CEE3;
    position: absolute;
    left: 0;
    top: 5px;
    border-radius: 10px;
}

.quantity-list li:nth-child(3n+1)::before {
    background-color: #3F86B5;
}

.quantity-list li:nth-child(3n)::before {
    background-color: #B2DF8A;
}

.quality-list-img {
    padding: 30px 40px 20px;
}

.quality-bottom-box {
    position: absolute;
    top: -40px;
    left: 20px;
    width: calc(100% - 40px);
    background: #fff;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.16);
}

.quality-bottom-box-item {
    height: 175px;
    border-bottom: 1px #E1E4E6 solid;
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 20px;
    letter-spacing: -0.01em;
    text-align: center;
    color: #263940;
}

.bottom-box-item-img {
    padding-top: 25px;
    height: 132px !important;
    box-sizing: border-box;
}

.bottom-box-item-img img {
    width: 87px;
}

.quality-bottom-p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    padding-top: 690px;
    padding-bottom: 40px;
}

.joinUs-top {
    margin-bottom: 40px;
}

.joinUs-top h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 46px;
    letter-spacing: -0.01em;
    line-height: 96px;
    height: 96px;
    text-align: center;
    color: #263940;

}

.joinUs-top-right p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    width: calc(100% - 36px);
    margin: auto;

}

.joinUs-mid h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 40px;
    text-align: center;
    color: #263940;
    margin-bottom: 15px;
}

.joinUs-mid-left p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    width: calc(100% - 36px);
    margin: 0 auto 15px;
}

.joinUs-mid-left-img,
.joinUs-mid-right {
    margin: 0 auto 15px;
    width: calc(100% - 36px);
}

.joinUs-mid-right {
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.16);
}

.joinUs-mid-left-img {
    display: flex;
    justify-content: space-between;
}

.joinUs-mid-left-img img {
    width: calc(50% - 5px);
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.16);
}

.joinUs-bottom h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 24px;
    letter-spacing: -0.01em;
    line-height: 40px;
    text-align: center;
    color: #263940;

}




.joinUs-bottom-item {
    width: calc(100% - 36px);
    margin: 0 auto 20px;
    background: #f2f3f4;
    box-shadow: 30px 30px 30px rgba(0, 0, 0, 0.16);
}

.joinUs-bottom-item p {
    padding-right: 27px;
    box-sizing: border-box;
}

.joinUs-bottom-item-header {
    width: 100%;
    display: flex;
}

.joinUs-bottom-item-header h3 {
    writing-mode: vertical-rl;
    width: 44px;
    height: 143px;
    background: #263940;
    color: #fff;
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 12px;
    letter-spacing: -0.01em;
    line-height: 44px;
    text-align: center;
    color: #fff;

}

.joinUs-bottom-item-wrap {
    margin-bottom: 30px;
}

.joinUs-bottom-item p {
    width: 299px;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 26px;
    text-align: left;
    color: #263940;
    margin: 15px 0 0 44px;
    padding-bottom: 25px;
}

.company {
    background: #F2F3F4;
    padding: 40px 0 10px;
}

.company h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 46px;
    letter-spacing: -0.01em;
    line-height: 66px;
    text-align: left;
    color: #263940;
    padding-left: 18px;
    margin-bottom: 15px;
}

.company-top-right dl {
    margin-bottom: 30px;
    border-bottom: #E1E4E6 1px solid;
    margin: 0 auto 30px;
    padding-bottom: 30px;

    width: calc(100% - 36px);
}

.company-top-right dl dt {
    font-family: "EB Garamond";
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    margin-top: 15px;
    padding-left: 18px;
    height: 36px;
    background: url('../img/list-point.png') no-repeat 0 17px;

}

.company-top-right dl dd {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #384246;
    padding-left: 18px;
}

.mapItem-header-left {
    width: calc(100% - 36px);
    margin: auto;
}

.mapItem-header h2 {
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
}


.googlemap-bw {
    width: calc(100% - 36px);
    margin: 0 auto 30px;
    height: 210px;
}

.googlemap-bw iframe {
    height: 210px;
}

.footer {
    padding-top: 30px;
}

.footer-top {
    box-sizing: border-box;
    padding: 30px;
    border: 1px solid #fff;
    width: calc(100% - 36px);
    margin: 0 auto 30px;
}

.footer h2 {
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 46px;
    letter-spacing: -0.01em;
    line-height: 66px;
    text-align: center;
    color: #263940;
    margin-bottom: 30px;
}

.footer-top-right p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #384246;
    margin-bottom: 15px;

}

.footer-btns {
    display: flex;
    justify-content: space-between;
}

.footer-btns .btn a {
    margin: 0;
}

.footer_icon {
    margin: auto;
    text-align: center;
    padding-bottom: 35px;
}

.footer_icon img {
    width: 135px;
}

.footer-bottom {
    display: flex;
    flex-direction: column-reverse;
}

.footer-bottom small {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-align: center;
    color: #263940;
    font-style: normal;
    margin-bottom: 80px;
}

.footer-privacy p {
    text-align: center;
    margin-bottom: 20px;
}

.footer-privacy p a,
.footer-nav ul li a,
.lang-selector ul li a {
    text-decoration: none;
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #263940;

}

.footer-nav ul {
    width: calc(100% - 125px);
    margin: auto;
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-bottom: 30px;
}

.footer .lang-selector ul {
    width: calc(100% - 300px);
    margin: auto;
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-bottom: 35px;
}

.privacy-page .header {
    height: 110px;
    background-color: #fff;
}

.privacy-page .breadCrumb {
    padding-top: 110px;
    background: #f2f3f4;
    box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.16);

}

.privacy-page .breadCrumb ul {
    height: 17px;
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 13px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #384246;
    line-height: 17px;
    display: flex;
    list-style: none;
    padding-left: 18px;
    height: 30px;
}

.privacy-page .breadCrumb ul li {
    padding: 7px 24px 0 0;
}

.privacy-page .breadCrumb ul li:first-child {
    background-image: url(../img/breadCrumbBg.png);
    background-repeat: no-repeat;
    background-position: top 12px right 10px;
}

.breadCrumb ul li a {
    color: #8cb808;
    text-decoration: underline;
}

.privacy-page .document {
    padding: 40px 18px;
    width: 100%;
    box-sizing: border-box;
}

.document h2 {
    height: 36px;
    font-family: "Old Standard TT";
    font-weight: normal;
    font-style: italic;
    font-size: 36px;
    letter-spacing: -0.01em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    margin-bottom: 30px;
}

.document h3 {
    font-family: "EB Garamond";
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #384246;
    margin-bottom: 20px;
}

.document p {
    font-family: "EB Garamond";
    font-weight: normal;
    font-size: 16px;
    letter-spacing: 0.02em;
    line-height: 36px;
    text-align: left;
    color: #263940;
    margin-bottom: 30px;
}