@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-size: 62.5%; } body { background: #ffffff; color: #333; font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; font-size: 1.5rem; letter-spacing: 0; line-height: 2; text-align: justify; min-width: 375px; } @media screen and (min-width: 601px) { body { overflow-y: scroll; min-width: 1140px; } } body.is-fixed { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } img, svg { display: block; width: 100%; height: auto; max-width: 100%; } @media screen and (min-width: 601px) { img, svg { width: auto; } } .c-svg-sprite { display: none; } a, button { cursor: pointer; } @media screen and (min-width: 601px) { .l-wrapper { min-width: 1080px; } } .l-inner { max-width: 1100px; width: 100%; margin-inline: auto; } @media screen and (max-width: 600px) { .l-inner { padding-inline: 30px; } } .c-loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background-color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .c-loading__text { font-size: 1.6rem; letter-spacing: 0.12em; font-weight: 500; } .c-loading__count { font-size: 3rem; letter-spacing: 0.08em; font-weight: 500; line-height: 1; margin: 8px 0; } .c-loading__indicator { width: 400px; height: 2px; margin: 16px 0 0; background-color: rgba(0, 0, 0, 0.2); } .c-loading__progress { width: 0%; height: 100%; background-color: rgba(0, 0, 0, 0.6); transition: width 0.2s ease; } .-loaded .c-loading { opacity: 0; pointer-events: none; transition: opacity 1.2s ease; } .-loaded .c-loading__grp { transform: translate(0, -30%); transition: transform 2s ease; } .c-svg-sprite { display: none; width: 0; height: 0; opacity: 0; overflow: hidden; } .mw_wp_form { width: 100%; margin: 30px auto; background-color: #f0ede1; padding: 15px; } .c-form__title { font-weight: bold; font-size: 3rem; margin-bottom: 15px; color: #9d834e; } @media screen and (max-width: 600px) { .c-form__title { font-size: 2rem; } } .c-form__parts { display: flex; background-color: white; margin-bottom: 1em; padding: 0.5em; } @media screen and (max-width: 600px) { .c-form__parts { flex-direction: column; } } .c-form__parts-label { width: 170px; font-weight: bold; font-size: 1.5rem; } .c-form__parts-label span { position: relative; } .c-form__parts-label span::before { content: "※"; position: absolute; top: 0; bottom: 0; margin: auto; right: -1.5em; color: #f00; font-size: 1.2rem; line-height: 1; height: -moz-fit-content; height: fit-content; } .c-form__parts-contents { display: flex; gap: 5px; width: calc(100% - 170px); } @media screen and (max-width: 600px) { .c-form__parts-contents { width: 100%; } } .c-form__parts-contents.flex p { display: flex; align-items: center; gap: 5px; } @media screen and (max-width: 600px) { .c-form__parts-contents.flex { flex-direction: column; gap: 5px; } } .c-form__parts-contents.textarea { display: flex; flex-direction: column; } .c-form__parts-contents.textarea p { width: 100%; } .c-form__parts-contents.text { display: flex; flex-direction: column; } .c-form__parts-contents.text p { width: 100%; } @media screen and (max-width: 600px) { .c-form__parts-contents.tel .c-form__tel { width: 25%; } } .c-form__text { width: 100%; border: 1px solid gray; padding: 0.3em; } .c-form__text:-moz-placeholder-shown { color: rgba(0, 0, 0, 0.1882352941); } .c-form__text:placeholder-shown { color: rgba(0, 0, 0, 0.1882352941); } .c-form__select { position: relative; cursor: pointer; line-height: 1; height: 30px; border: 1px solid gray; padding: 0.3em; padding-right: 2em; } .c-form__parts-contents-select { position: relative; display: flex; width: -moz-fit-content; width: fit-content; } .c-form__parts-contents-select::before { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; width: 7px; height: 1px; background-color: black; right: 10px; transform: rotate(45deg); } .c-form__parts-contents-select::after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; width: 7px; height: 1px; background-color: black; right: 5px; transform: rotate(-45deg); } .c-form__parts-contents-block { display: flex; gap: 5px; } .c-form__textarea { width: 100%; border: 1px solid gray; padding: 0.3em; } .c-form__textarea:-moz-placeholder-shown { color: rgba(0, 0, 0, 0.1882352941); } .c-form__textarea:placeholder-shown { color: rgba(0, 0, 0, 0.1882352941); } .c-form__buttonArea { display: flex; justify-content: center; gap: 50px; } @media screen and (max-width: 600px) { .c-form__buttonArea { flex-direction: column; align-items: center; gap: 10px; } } .confirm_btn, .back_btn { text-align: center; width: 200px; height: 50px; border-radius: 30px; border: 1px solid #9d834e; background-color: white; transition: opacity 0.3s ease; cursor: pointer; } .confirm_btn:hover, .back_btn:hover { opacity: 0.7; } .wpcf7-spinner { display: none; } .mwform-radio-field { display: flex; gap: 1rem; } .mwform-radio-field label { display: flex; align-items: center; cursor: pointer; font-size: 1.4rem; } .mwform-radio-field label input[type=radio] { margin-right: 0.5rem; width: auto; height: auto; appearance: auto; -webkit-appearance: radio; -moz-appearance: radio; width: 16px; height: 16px; border: 2px solid #9d834e; border-radius: 50%; background-color: white; cursor: pointer; } .mwform-radio-field label input[type=radio]:checked { background-color: #9d834e; border-color: #9d834e; } .mw_wp_form_confirm .c-form__parts-contents-select::before { display: none; } .mw_wp_form_confirm .c-form__parts-contents-select::after { display: none; } .c-accordion { border: solid 1px #9d834e; margin-bottom: 15px; background: rgba(240, 237, 225, 0.2117647059); } .c-accordion__title { position: relative; font-weight: bold; padding: 1em 0.5em; cursor: pointer; } @media screen and (max-width: 600px) { .c-accordion__title { font-size: 1.4rem; padding: 1em 2em 1em 0.5em; } } .c-accordion__title::before, .c-accordion__title::after { position: absolute; content: ""; width: 10px; height: 1px; background: #9d834e; right: 10px; top: 0; bottom: 0; margin: auto; transition: transform 0.3s ease; } .c-accordion__title::before { transform: rotate(45deg); right: 16.5px; } .c-accordion__title::after { transform: rotate(-45deg); } .c-accordion__contents { display: none; } .c-accordion.active .c-accordion__title::before { transform: rotate(-45deg); } .c-accordion.active .c-accordion__title::after { transform: rotate(45deg); } .c-accordion.active .c-accordion__contents { display: block; padding: 1em; border-top: 1px solid #9d834e; } .fnt_bold { font-weight: bold; } .fnt_beige { color: #9d834e; } .fnt_red { color: #f00; } .page-title { position: relative; z-index: -1; overflow: hidden; } .page-title::before { content: ""; position: absolute; top: 0; left: -100vw; width: 200vw; height: 100%; background-color: #efefe1; z-index: -1; } @media screen and (max-width: 600px) { .page-title::before { display: none; } } @media screen and (max-width: 600px) { .page-title { left: -30px; width: calc(100% + 60px); margin-bottom: 40px; } } .line_link { display: flex; justify-content: center; align-items: center; background-color: #7fbf26; padding: 2em; margin: 30px auto; color: white; } .line_link span { font-size: 20px; font-weight: bold; text-align: center; } @media screen and (max-width: 600px) { .line_link { padding: 1em; } } .s-header { display: flex; flex-direction: column; } .s-header-head { background-color: #512d0b; overflow: hidden; } .s-header-head .l-inner { padding: 5px 0; } @media screen and (max-width: 600px) { .s-header-head .l-inner { padding: 5px; } } @media screen and (max-width: 600px) { .s-header-head { display: flex; align-items: center; } } .s-header-head h1 { color: white; font-size: 1rem; line-height: 1; font-weight: 400; } @media screen and (max-width: 600px) { .s-header-head h1 { width: 100%; white-space: nowrap; } } @media screen and (max-width: 600px) { .s-header .s-header__logo { width: 120px; } } .s-header__block { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } @media screen and (max-width: 600px) { .s-header__block { height: 75px; } } .s-header__block .l-inner { display: flex; justify-content: space-between; } @media screen and (max-width: 600px) { .s-header__block .l-inner { padding-inline: 15px; align-items: center; gap: 15px; justify-content: flex-start; } } .s-header__block-left { width: 210px; display: flex; } @media screen and (max-width: 600px) { .s-header__block-left { width: 120px; } } .s-header__block-right { display: flex; gap: 20px; } @media screen and (max-width: 600px) { .s-header__block-right { width: calc(100% - 120px); } } .s-header .s-header__linkArea-main { display: flex; gap: 10px; } .s-header .s-header__linkArea-main a { display: flex; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; padding: 10px 20px; border-radius: 10px; background-size: cover; width: 126px; height: 46px; } @media screen and (max-width: 600px) { .s-header .s-header__linkArea-main a { width: 70px; height: 25px; border-radius: 3px; } } .s-header .s-header__linkArea-main a:nth-of-type(even) { background-image: url(https://esthe-miku.net/img/common/header_btn_01.gif); } .s-header .s-header__linkArea-main a:nth-of-type(odd) { background-image: url(https://esthe-miku.net/img/common/header_btn_02.gif); } .s-header .s-header__linkArea-sub ul { display: flex; gap: 10px; } .s-header .s-header__linkArea-sub ul li { position: relative; font-size: 1.2rem; padding-left: 1em; } .s-header .s-header__linkArea-sub ul li::before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 5px solid #555555; border-right: 0; top: 50%; left: 0; transform: translateY(-50%); } .s-header .s-header__contactArea { display: flex; align-items: center; flex-direction: column; } .s-header .s-header__contactArea p { font-size: 1.8rem; font-weight: 700; color: #9d834e; } .s-header .s-header__contactArea span { text-align: center; line-height: 1; } .s-header__menu { position: relative; box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, 0.2); } .s-header__menu::before { position: absolute; content: ""; width: 100%; height: 3px; background-color: #9d834e; bottom: 0; left: 0; } .s-header__menu .l-inner { display: flex; justify-content: center; align-items: end; } .s-header__menu-parts { position: relative; } .s-header__menu-parts::before { position: absolute; content: ""; width: 100%; height: 0; background-color: #9d834e; bottom: 0; transition: height 0.2s ease; opacity: 0.1; pointer-events: none; } .s-header__menu-parts .s-header__menu-parts-sub { position: absolute; top: 100%; left: 0; width: 100%; height: 0; opacity: 0; transition: height 0.2s ease; } .s-header__menu-parts .s-header__menu-parts-sub a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: rgba(45, 37, 24, 0.3764705882); } .s-header__menu-parts .s-header__menu-parts-sub a span { color: white; font-size: 1.4rem; font-weight: 700; text-align: center; line-height: 1.2; } .s-header__menu-parts .s-header__menu-parts-sub a span small { font-size: 1.2rem; } .s-header__menu-parts:hover::before { height: 100%; } .s-header__menu-parts:hover .s-header__menu-parts-sub { height: 100%; opacity: 1; } .s-header__menu-parts:hover .s-header__menu-parts-sub a:hover { opacity: 0.8; } .s-header__humburger { position: absolute; top: 0; right: 0; bottom: 0; margin: auto; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5px; width: 50px; height: 50px; border: solid 1px #333; border-radius: 5px; } .s-header__humburger span { width: 20px; height: 1px; background-color: #333; transition: all 0.2s ease; } .s-header__humburger::after { position: absolute; content: "MENU"; left: 0; right: 0; bottom: 0px; margin: auto; font-size: 1rem; text-align: center; } .s-header__humburger.is-active span:nth-of-type(1) { transform: translateY(6px) rotate(45deg); } .s-header__humburger.is-active span:nth-of-type(2) { opacity: 0; } .s-header__humburger.is-active span:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); } .s-header__block-left { position: relative; } .s-header__block-right { position: relative; } .s-hamburger__menu { display: none; } .s-hamburger__menu.is-active { position: fixed; top: 95px; left: 0; width: 100%; height: calc(100% - 95px); background-color: white; display: block; z-index: 3; overflow-y: auto; -webkit-overflow-scrolling: touch; } body.menu-open { overflow: hidden; position: fixed; width: 100%; } .s-hamburger__menu .wrapper { padding: 20px; } .s-hamburger__menu .accordion.parts { border-bottom: 1px solid #e0e0e0; margin-bottom: 10px; } .s-hamburger__menu .accordion.parts .accordion_title { padding: 15px 10px; background-color: #f5f5f5; cursor: pointer; font-weight: bold; font-size: 1.4rem; position: relative; } .s-hamburger__menu .accordion.parts .accordion_title::after { content: "+"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; transition: transform 0.3s ease; } .s-hamburger__menu .accordion.parts .accordion_title:hover { background-color: #eeeeee; } .s-hamburger__menu .accordion.parts .conditions { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: white; } .s-hamburger__menu .accordion.parts .conditions a { display: block; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; color: #333; text-decoration: none; } .s-hamburger__menu .accordion.parts .conditions a:hover { background-color: #f8f8f8; } .s-hamburger__menu .accordion.parts .conditions a span { font-size: 1.3rem; } .s-hamburger__menu .accordion.parts.active .accordion_title::after { transform: translateY(-50%) rotate(45deg); } .s-hamburger__menu .accordion.parts.active .conditions { max-height: 500px; } .s-hamburger__menu .btn_area { margin: 30px 0; display: flex; justify-content: center; gap: 15px; } .s-hamburger__menu .btn_area .link_btn { display: block; text-align: center; } .s-hamburger__menu .btn_area .link_btn img { max-width: 100%; height: auto; } .s-hamburger__menu .sns_area { display: flex; justify-content: center; gap: 15px; margin-top: 20px; } .s-hamburger__menu .sns_area .parts_link { display: flex; justify-content: center; align-items: center; width: 25%; height: auto; aspect-ratio: 1/1; border: 1px solid lightgray; border-radius: 5px; } .s-hamburger__menu .sns_area .parts_link img { width: 70%; height: auto; border-radius: 20px; } .s-hamburger__menu .sns_area .parts_link.blog { background-color: #FF8D95; } .s-hamburger__menu .sns_area .parts_link.fb { background-color: #3B5998; } .s-hamburger__menu .sns_area .parts_link.line { background-color: #7FBF26; } .s-hamburger__menu .sns_area .parts_link.twitter { background-color: black; } .s-hamburger__menu .sns_area .parts_link.twitter img { width: 40%; border-radius: unset; } .s-footer { overflow: hidden; margin-top: 50px; border-top: 5px solid #512d0b; } .s-footer__pageLink { display: flex; justify-content: space-between; } .s-footer__pageLink-block ul li a { position: relative; padding-left: 1em; font-size: 1.4rem; } .s-footer__pageLink-block ul li a::before { position: absolute; content: ""; width: 10px; height: 10px; background-image: url(../../assets/images/arrow_01.gif); background-size: cover; background-position: center; left: 0; top: 50%; transform: translateY(-50%); } .s-footer__pageLink-block ul ol { margin-left: 1em; } .s-footer__pageLink-block ul ol li a { font-size: 1.1rem; padding-left: 1em; } .s-footer__pageLink-block ul ol li a::before { width: 8px; height: 8px; background-image: url(../../assets/images/arrow_02.svg); background-size: cover; background-position: center; top: 5px; transform: unset; } .s-footer__contents { position: relative; display: flex; justify-content: space-between; margin: 15px 0; } .s-footer__contents::before { position: absolute; content: ""; width: 200vw; height: 1px; background-color: #512d0b; top: -8px; left: -100vw; } .s-footer__contents-block { width: 100%; display: flex; justify-content: space-between; gap: 30px; } @media screen and (max-width: 600px) { .s-footer__contents-block { flex-direction: column; gap: 15px; } } .s-footer__contents-block__left { width: 200px; } @media screen and (max-width: 600px) { .s-footer__contents-block__left { width: 100%; } .s-footer__contents-block__left img { width: 215px; margin: 0 auto 15px; } } .s-footer__contents-block__center { width: calc((100% - 200px) / 2); font-size: 1.2rem; line-height: 1.4; } @media screen and (max-width: 600px) { .s-footer__contents-block__center { width: 100%; text-align: center; } } .s-footer__contents-block__right { width: calc((100% - 200px) / 2); } @media screen and (max-width: 600px) { .s-footer__contents-block__right { width: 100%; display: flex; flex-direction: column-reverse; } } .s-footer__contents ul { display: flex; align-items: center; gap: 15px; line-height: 1; margin-bottom: 15px; } .s-footer__contents ul li { position: relative; font-size: 1.2rem; padding-left: 1em; } .s-footer__contents ul li::before { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 5px solid #555555; border-right: 0; top: 50%; left: 0; transform: translateY(-50%); } @media screen and (max-width: 600px) { .s-footer__contents .copyright { width: 200px; margin: auto; } } @media screen and (max-width: 600px) { .s-footer__contents .caution { text-align: center; font-size: 1.2rem; color: #555555; margin-bottom: 15px; } } @media screen and (min-width: 601px) { .u-sp { display: none; } } @media screen and (max-width: 600px) { .u-pc { display: none; } } .u-mt05 { margin-top: 0.5em; } .u-mb05 { margin-bottom: 0.5em; } .u-pt05 { padding-top: 0.5em; } .u-pb05 { padding-bottom: 0.5em; } .u-mt1 { margin-top: 1em; } .u-mb1 { margin-bottom: 1em; } .u-pt1 { padding-top: 1em; } .u-pb1 { padding-bottom: 1em; } .u-mt2 { margin-top: 2em; } .u-mb2 { margin-bottom: 2em; } .u-pt2 { padding-top: 2em; } .u-pb2 { padding-bottom: 2em; } .u-mt3 { margin-top: 3em; } .u-mb3 { margin-bottom: 3em; } .u-pt3 { padding-top: 3em; } .u-pb3 { padding-bottom: 3em; } .u-mt4 { margin-top: 4em; } .u-mb4 { margin-bottom: 4em; } .u-pt4 { padding-top: 4em; } .u-pb4 { padding-bottom: 4em; } .u-mt5 { margin-top: 5em; } .u-mb5 { margin-bottom: 5em; } .u-pt5 { padding-top: 5em; } .u-pb5 { padding-bottom: 5em; } .u-white { color: #fff; fill: #fff; } .u-white * { color: #fff; fill: #fff; } .u-center { text-align: center; margin-left: auto; margin-right: auto; } .u-right { text-align: right; margin-left: auto; } .u-left { text-align: left; margin-right: auto; } @media screen and (min-width: 601px) { .u-sp { display: none !important; } } @media screen and (max-width: 600px) { .u-pc { display: none !important; } }