@charset "UTF-8";

/*　Install web fonts on the server  */
/*--- Zen Maru Gothic ------------------------------------------------
	Light 300
	Regular 400
	Medium 500
	Bold 700
	Black 900
*/
@font-face {
    font-family: "Zen Maru Gothic";
    src: url("../fonts/ZenMaruGothic-Light.woff2") format("woff2"),
        url("../fonts/ZenMaruGothic-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Maru Gothic";
    src: url("../fonts/ZenMaruGothic-Regular.woff2") format("woff2"),
        url("../fonts/ZenMaruGothic-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Maru Gothic";
    src: url("../fonts/ZenMaruGothic-Medium.woff2") format("woff2"),
        url("../fonts/ZenMaruGothic-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Maru Gothic";
    src: url("../fonts/ZenMaruGothic-Bold.woff2") format("woff2"),
        url("../fonts/ZenMaruGothic-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Maru Gothic";
    src: url("../fonts/ZenMaruGothic-Black.woff2") format("woff2"),
        url("../fonts/ZenMaruGothic-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/*--- Zen Loop ------------------------------------------------
	Regular 400
	Regular 400 Italic
*/
@font-face {
    font-family: "Zen Loop";
    src: url("../fonts/ZenLoop-Regular.woff2") format("woff2"),
        url("../fonts/ZenLoop-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Zen Loop";
    src: url("../fonts/ZenLoop-Italic.woff2") format("woff2"),
        url("../fonts/ZenLoop-Italic.woff") format("woff");
    font-weight: 400;
    font-style: Italic;
    font-display: swap;
}

/*--- Noto Serif JP ------------------------------------------------
	ExtraLight 200
	Light 300
	Regular 400
	Medium 500
	SemiBold 600
	Bold 700
	Black 900
*/
@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-ExtraLight.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-ExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Light.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Regular.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Medium.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-SemiBold.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-SemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Noto Serif JP";
    src: url("../fonts/NotoSerifJP-Black.woff2") format("woff2"),
        url("../fonts/NotoSerifJP-Black.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}


/* ========================================================

　Global Setting

=========================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%; /* 1.0rem = 10px */
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scroll-behavior: smooth;
}


/* ========================================================

　body

=========================================================== */

body {
    position: relative;
    color: rgba(115, 85, 50, 1.00);
    font: normal 400 1.6rem / 150% "Zen Maru Gothic", sans-serif;
    word-wrap: break-word;
    overflow-x: hidden;
}


/* ========================================================

　Link Color

=========================================================== */

a,
a:visited {
    color: rgba(180, 65, 0, 1.00);
    outline: none;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

/* phone call */
@media only screen and (min-width: 992px) {

    a[href*="tel:"] {
        color: rgba(115, 85, 50, 1.00) !important;
        pointer-events: none;
    }

}

/* anchor in <section> */
section a {
    display: inline-block;
    position: relative;
    padding: 0.5rem 0.5rem 0.75rem;
    word-break: break-all;
}

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

    body:not(.home) section a::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 100%;
        border-radius: 0.6rem;
        background-color: rgba(180, 65, 0, 0.10);
        content: '';
        opacity: 0;
        z-index: 0;
        transition: width 0.3s ease-in-out;
    }

    body:not(.home) section a:hover::after {
        width: 100%;
        opacity: 1;
    }

}


/* ========================================================

　Typography

=========================================================== */

h1,
h2,
h3,
h4,
h5,
span,
p,
li,
dt,
dd,
a {
    margin: 0;
    padding: 0;
    line-height: 1;
    word-break: break-word;
    word-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
dt {
    letter-spacing: 0.15rem;
}

p:nth-of-type(n+2) {
    margin-top: 1.4rem;
}


/* ========================================================

　nav

=========================================================== */

#navi {
    width: 100%;
}

#navi h1,
#navi p {
    position: absolute;
    top: 0.5rem;
    left: 1.9rem;
    width: 100%;
    color: rgba(115, 115, 15, 1.00);
    font-size: min(3.0vw, 1.3rem);
    font-weight: 500;
    letter-spacing: 0.15rem;
    transition: font-size 0.3s ease-in-out;
}

#navi h1::before,
#navi p::before {
    position: relative;
    top: 0.1rem;
    font-family: 'bootstrap-icons';
    content: "\f586";
}

#navi .navbar {
    position: fixed;
    min-height: 8.0rem;
    padding: 0 1.0rem;
    background: rgba(235, 235, 235, 0.70);
    backdrop-filter: blur(0.5rem);
    transition: all 0.3s ease-in-out;
}

/* when open */
#navi .navbar.opened {
    background-color: rgba(235, 235, 235, 1.00);
    transition: all 0.3s ease-in-out;
}

/* when scroll */
#navi .navbar.navbar-short {
    /*min-height: 6.0rem;*/
}

.navbar-dropdown {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 0;
    z-index: 1030;
}

/*　brand & logo
----------------------------------------------------------- */
#navi .navbar-brand {
    display: flex;
    align-items: center;
    min-height: 8.0rem;
    padding: 1.0rem 0 0;
    transition: all 0.3s ease-in-out;
}

#navi .navbar-brand span {
    vertical-align: -4px;
}

#navi .navbar-logo {
    vertical-align: middle;
}

#navi .navbar-logo a {
    outline: none;
}

#navi .navbar-logo img {
    width: auto;
    height: min(10.0vw, 3.4rem);
    transition: all 0.3s ease-in-out;
}

/*　hamburger button
----------------------------------------------------------- */
#navi button.navbar-toggler {
    position: relative;
    align-self: center;
    width: 3.1rem;
    height: 2.0rem;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#navi .hamburger span {
    position: absolute;
    right: 0;
    width: 3.0rem;
    height: 0.2rem;
    border-right: 0.5rem;
    background-color: rgba(100, 50, 0, 1.00);
}

#navi .hamburger span:nth-child(1) {
    top: 0;
    transition: all 0.2s ease-in-out;
}

#navi .hamburger span:nth-child(2) {
    top: 0.8rem;
    transition: all 0.15s ease-in-out;
}

#navi .hamburger span:nth-child(3) {
    top: 0.8rem;
    transition: all 0.15s ease-in-out;
}

#navi .hamburger span:nth-child(4) {
    top: 1.6rem;
    transition: all 0.2s ease-in-out;
}

/* when open */
#navi nav.opened .hamburger span:nth-child(1) {
    top: 0.8rem;
    right: 50%;
    width: 0;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

#navi nav.opened .hamburger span:nth-child(2) {
    transform: rotate(45deg);
    transition: all 0.25s ease-in-out;
}

#navi nav.opened .hamburger span:nth-child(3) {
    transform: rotate(-45deg);
    transition: all 0.25s ease-in-out;
}

#navi nav.opened .hamburger span:nth-child(4) {
    top: 0.8rem;
    right: 50%;
    width: 0;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

/*　menu
----------------------------------------------------------- */
#navi .nav-link {
    display: inline-block;
    color: rgba(115, 115, 15, 1.00);
    font-weight: 500;
}

#navi .nav-link.active {
    color: rgba(180, 65, 0, 1.00);
}

#navi .nav-item:focus,
#navi .nav-link:focus {
    outline: none;
}

/*　other
----------------------------------------------------------- */

/* contact button */
#navi .mail .btn {
    background-color: rgba(115, 115, 15, 1.00);
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.6rem;
}

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

    #navi .navbar-brand {
        flex-shrink: initial;
        flex-basis: auto;
        word-break: break-word;
        padding-right: 2.0rem;
    }

    #navi .navbar-toggler {
        flex-basis: auto;
        background: transparent;
        border-color: transparent;
    }

    #navi .navbar-toggler:focus,
    #navi .navbar-toggler:hover {
        text-decoration: none;
        box-shadow: none;
    }

    #navi .navbar-collapse {
        max-height: 80.0vh;
        min-height: 100vh;
    }

    #navi .navbar-collapse.show {
        overflow: auto;
    }

    #navi .navbar-nav {
        margin: 0;
        margin-top: 2.0rem;
        padding: 0 2.0rem;
    }

    #navi .nav-item {
        width: 100%;
        text-align: left;
    }

    #navi .nav-item:nth-of-type(n+2) {
        margin-top: 1.5rem;
    }

    #navi .nav-link {
        padding: 1.0rem 0;
        font-size: 1.8rem;
    }

    #navi .nav-link::before {
        position: relative;
        top: 0.25rem;
        margin-right: 0.5rem;
        color: rgba(0, 95, 20, 1.00);
        font-family: 'bootstrap-icons';
        content: "\f7bf";
    }

    #navi .contact {
        text-align: center;
    }

    #navi h5 {
        margin-top: 4.0rem;
        color: rgba(235, 95, 0, 1.00);
        font-family: "Noto Serif JP", serif;
        font-size: min(5.0vw, 2.4rem);
        font-weight: 600;
    }

    #navi .phone {
        margin-top: 2.0rem;
    }

    #navi .phone i {
        position: relative;
        top: min(1.25vw, 0.5rem);
        color: rgba(0, 0, 0, 1.00);
        font-size: min(8.0vw, 2.8rem);
    }

    #navi .phone a {
        margin-left: 0.25rem;
        color: rgba(75, 105, 0, 1.00);
        font-family: Georgia, "Times New Roman", Times, "serif";
        font-size: min(8.0vw, 3.0rem);
        font-weight: 700;
        letter-spacing: 0.2rem;
    }

    #navi .mail .btn {
        width: 20.0rem;
        height: 5.0rem;
        margin: 3.0rem auto 25.0rem;
        border-radius: 2.5rem;
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 5.0rem;
    }

}

@media only screen and (min-width: 576px) and (max-width: 1199.98px) {

    #navi .contact {
        margin-left: 2.0rem;
        text-align: left;
    }

    #navi .mail .btn {
        margin: 3.0rem 0 25.0rem;
    }

}

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

    #navi h1,
    #navi p {
        left: 4.3rem;
    }

}

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

    #navi h1,
    #navi p {
        left: 3.3rem;
    }

    #navi .navbar {
        min-height: min(6.0vw, 10.0rem);
        padding: 0;
    }

    #navi .navbar-logo img {
        height: min(2.8vw, 5.0rem);
    }

    #navi .navbar-logo a:hover img {
        transform: scale(1.05)
    }

    #navi .navbar-collapse {
        justify-content: flex-end;
    }

    #navi .nav-link {
        position: relative;
        margin: 0 min(1.2vw, 2.4rem);
        padding: 0;
        transition: all 0.3s ease-in-out;
    }

    #navi .nav-link:hover {
        color: rgba(100, 50, 0, 1.00);
    }

    #navi .nav-link::after {
        position: absolute;
        left: 50%;
        bottom: -0.5rem;
        transform: translateX(-50%);
        width: 0;
        height: 0.1rem;
        content: '';
        background-color: rgba(100, 50, 0, 1.00);
        transition: all 0.3s ease-in-out;
    }

    #navi .nav-link:hover::after {
        width: 100%;
    }

    #navi h5,
    #navi .phone {
        display: none;
    }

    #navi .mail button {
        height: 4.0rem;
        margin: 0 0 0 min(1.2vw, 2.4rem);
        padding: 0 2.0rem;
        border: none;
        border-radius: 2.0rem;
        font-weight: 500;
    }

    #navi .mail button:hover {
        background-color: rgba(100, 50, 0, 1.00);
        color: rgba(255, 255, 255, 1.00);
        transform: scale(1.1);
    }

}

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

    #navi .nav-link,
    #navi .mail .btn {
        font-size: 1.8rem;
    }

}

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

    #navi h1,
    #navi p {
        left: 5.1rem;
    }

}


/* ========================================================

　header

=========================================================== */

.home header {
    display: grid;
    place-content: center start;
    height: 100vh;
    background: url("../img/background_header.jpg") left top / cover no-repeat;
}

/* white box */
.home header div[class^="col-"] {
    padding: min(6.0vw, 4.0rem);
    border-radius: 3.0rem;
    background: rgba(255, 255, 255, 0.70) url("../img/header_col.png") right min(6.0vw, 4.0rem) top min(6.0vw, 4.0rem) / min(20.0vw, 10.0rem) auto no-repeat;
    color: rgba(100, 50, 0, 1.00);
    text-align: justify;
}

.home header h2 {
    margin-bottom: 2.0rem;
    font-family: "Noto Serif JP", serif;
    font-weight: 600;
    font-size: min(9.5vw, 5.0rem);
    line-height: 140%;
    letter-spacing: 0.2rem;
}

.home header p {
    font-size: min(5.0vw, 1.8rem);
    line-height: 140%;
}

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

    .home header div[class^="col-"] {
        width: 94.0%;
        margin: 0 auto;
    }

}

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

    .home header div[class^="col-"] {
        padding: min(4.0vw, 6.0rem) !important;
        border-radius: 5.0rem;
        background-position: right min(4.0vw, 6.0rem) top min(4.0vw, 6.0rem);
        background-size: min(9.0vw, 13.0rem) auto;
    }

    .home header {
        background-position: center center;
    }

    .home header h2 {
        font-size: min(4.6vw, 7.0rem);
    }

}


/* ========================================================

　section

=========================================================== */

section {
    overflow: hidden;
}

section,
.container,
.container-fluid {
    position: relative;
    word-wrap: break-word;
}

/* heading part */
.home .heading h2 {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 100%;
    margin-bottom: min(5.0vw, 3.0rem);
    border-bottom: 0.5rem solid rgba(75, 105, 0, 1.00);
    font-family: "Noto Serif JP", serif;
    font-size: min(10.0vw, 3.6rem);
    font-weight: 600;
    line-height: 180%;
    letter-spacing: 0.2rem;
}

.home .heading h2::before {
    position: relative;
    top: 0.15rem;
    margin-right: 0.25rem;
    font-family: 'bootstrap-icons';
    font-weight: 400;
}

.home .heading h2::after {
    position: absolute;
    bottom: -0.5rem;
    left: 0;
    width: 20%;
    height: 0.5rem;
    background-color: rgba(145, 195, 30, 1.00);
    content: '';
}

.home .heading h2 i {
    margin-right: min(1.0vw, 0.5rem);
}

.home .heading h3 {
    color: rgba(100, 50, 0, 1.00);
    font-family: "Zen Loop", sans-serif;
    font-size: min(6.0vw, 2.4rem);
    font-weight: bold;
    text-transform: capitalize;
    letter-spacing: 0.2rem;
}

.home .heading h3::before {
    content: "- ";
}

/* text part */
.home section p {
    font-size: min(5.0vw, 1.8rem);
    text-align: justify;
    line-height: 160%;
}

/* image part */
img,
iframe {
    display: block;
    width: 100%;
}

/* button */
.btn {
    display: grid;
    place-content: center;
    transition: all 0.3s ease-in-out;
}

.more {
    margin-top: min(6.0vw, 4.0rem);
}

.more .btn {
    width: 20.0rem;
    height: 5.0rem;
    border-radius: 2.5rem;
    background-color: rgba(145, 195, 30, 1.00);
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.8rem;
    font-weight: 500;
}

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

    .container-fluid {
        padding-left: 32px;
        padding-right: 32px;
    }

    .more {
        display: grid;
        place-content: end;
    }

}

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

    .container {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .row {
        margin-left: -1.6rem;
        margin-right: -1.6rem;
    }

    .row > [class*=col] {
        padding-left: 1.6rem;
        padding-right: 1.6rem;
    }

    .home section h2 {
        font-size: min(10.0vw, 4.2rem);
    }

    .more .btn {
        position: relative;
        height: 6.0rem;
        border-radius: 3.0rem;
        transition: all 0.6s ease-in-out;
    }

    .more .btn:hover,
    .more .btn:active {
        background-color: rgba(255, 250, 195, 1.00);
        color: rgba(145, 195, 30, 1.00);
    }

    .more .btn:hover::before {
        position: absolute;
        top: -35%;
        left: 25%;
        border: 0.1rem solid rgba(145, 195, 30, 1.00);
        width: 10.0rem;
        height: 10.0rem;
        border-radius: 50%;
        content: '';
        opacity: 1;
        animation: 1.0s circle forwards;
    }

    .more .btn span {
        position: relative;
    }

    .more .btn span::after {
        position: absolute;
        left: 50%;
        bottom: -0.5rem;
        transform: translateX(-50%);
        width: 0;
        height: 0.1rem;
        content: '';
        background-color: rgba(145, 195, 30, 1.00);
        transition: width 0.8s ease-in-out;
    }

    .more .btn:hover span::after {
        width: 100%;
    }

    .more .btn:active span::after {
        width: 0;
    }

}

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

    .container-fluid {
        padding-left: 5.0rem;
        padding-right: 5.0rem;
    }

}

@keyframes circle {

    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }

}


/* ========================================================

　introduction

=========================================================== */

#introduction {
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background: rgba(255, 255, 255, 1.00) url("../img/background_bubble03.png") left center / cover no-repeat;
}

#introduction .row {
    align-items: center;
}

/* margin on image when using SP */
#introduction div[class^="col-"]:last-of-type {
    margin-top: 4.0rem;
}

/* title part */
#introduction h2::before {
    color: rgba(240, 155, 195, 1.00);
    content: "\f71f";
}

/* image part */
#introduction .wrapper {
    position: relative;
    padding: min(6.0vw, 3.0rem);
}

#introduction .wrapper::before {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-2deg);
    width: 100%;
    height: 100%;
    border: 0.6rem solid rgba(115, 115, 15, 0.50);
    border-radius: 3.0rem;
    content: '';
}

#introduction .wrapper img {
    transform: rotate(2deg);
    border-radius: 3.0rem;
}

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

    #introduction {
        padding: min(20.0vw, 15.0rem) 0;
    }

    #introduction div[class^="col-"]:last-of-type {
        margin-top: 0;
    }

}

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

    #introduction .wrapper::before {
        border-radius: 5.0rem;
    }

    #introduction .wrapper img {
        border-radius: 5.0rem;
    }

}

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

    #introduction {
        background-position: center center;
    }

}


/* ========================================================

　service

=========================================================== */

#service {
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background: rgba(115, 115, 15, 1.00) url("../img/background_bubble01.png") right center / cover no-repeat;
    color: rgba(255, 255, 255, 1.00);
}

#service .row {
    text-align: left;
}

#service div[class^="col-"] {
    padding-top: min(3.0vw, 3.0rem);
    padding-bottom: min(3.0vw, 3.0rem);
}

/* margin on image when using SP */
#service div[class^="col-"]:last-of-type {
    margin-top: 4.0rem;
}

/* block title part */
#service > div > h2,
#service > div > h2 span {
    margin-bottom: min(8.0vw, 8.0rem);
    font-family: "Noto Serif JP", serif;
    font-size: min(10.0vw, 5.0rem);
    font-weight: 600;
    text-align: center;
    line-height: 120%;
    letter-spacing: 1.0rem;
}

#service > div > h2 span {
    display: block;
}

/* image part */
#service img {
    padding: min(2.0vw, 0.6rem);
    border-radius: 3.0rem;
    background-image: linear-gradient(150deg, rgba(50, 15, 0, 1.00) 0, rgba(95, 5, 0, 1.00) 10%, rgba(230, 190, 70, 1.00) 40%, rgba(255, 245, 180, 1.00) 50%, rgba(245, 200, 80, 1.00) 60%, rgba(95, 5, 0, 1.00) 90%, rgba(50, 15, 0, 1.00) 100%);
    box-shadow: 0 0 min(2.4vw, 2.4rem) rgba(0, 0, 0, 0.50), 0 0 min(2.4vw, 2.4rem) rgba(100, 50, 0, 0.25);
}

#service .wrapper {
    position: relative;
    padding: min(2.0vw, 0.6rem);
}

#service .wrapper::before,
#service .wrapper::after {
    position: absolute;
    width: min(40.0vw, 20.0rem);
    height: 100%;
    content: "";
}

#service .wrapper::before {
    top: min(-2.0vw, -0.6rem);
    right: min(-2.0vw, -0.6rem);
    background: url("../img/flame_rt.png") right top / contain no-repeat;
}

#service .wrapper::after {
    bottom: min(-2.0vw, -0.6rem);
    left: min(-2.0vw, -0.6rem);
    background: url("../img/flame_lb.png") left bottom / contain no-repeat;
}

/* title part */
#service .heading h2 > span {
    position: relative;
    margin-right: 0.25rem;
}

#service .heading h2 i {
    color: rgba(255, 190, 0, 1.00);
    text-shadow: 0.2rem 0.2rem 0 rgba(255, 255, 255, 1.00);
}

#service .heading h2 em {
    font-style: normal;
}

#service .heading h2 em span {
    display: none;
}

#service .heading h2 span span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -60%);
    color: rgba(100, 50, 0, 1.00);
    font-size: min(6.0vw, 2.4rem);
    font-weight: 700;
}

#service .heading h3 {
    color: rgba(255, 255, 255, 1.00);
}

/* carousel part */
#service #carousel {
    position: relative;
}

#service .carousel-control {
    display: none;
}

#service .carousel-indicators {
    position: absolute;
    bottom: -8.0rem;
    z-index: 10;
}

#service .carousel-indicators button {
    width: min(10.0vw, 3.0rem);
    height: min(10.0vw, 3.0rem);
    margin: 0 1.0rem;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.25);
    color: rgba(255, 255, 255, 1.00);
    font-family: "Noto Serif JP", serif;
    font-size: min(5.0vw, 1.8rem);
    text-indent: inherit;
    line-height: 110%;
    opacity: 1;
    transition-property: all;
}

#service .carousel-indicators button.active {
    background-color: rgba(255, 190, 0, 1.00);
    color: rgba(100, 50, 0, 1.00);
    transform: scale(1.4);
    pointer-events: none;
}

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

    #service .heading h2 em span {
        display: inline;
    }

}

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

    #service {
        padding: min(20.0vw, 15.0rem) 0;
    }

    #service > div > h2 span {
        display: inline;
    }

    #service div[class^="col-"]:last-of-type {
        min-height: 52.0rem;
        margin-top: 0;
    }

    #service img {
        padding: min(1.0vw, 0.6rem);
    }

    #service .wrapper {
        padding: min(1.0vw, 0.6rem);
    }

    #service .wrapper::before,
    #service .wrapper::after {
        width: min(16.0vw, 20.0rem);
    }

    #service .wrapper::before {
        top: min(-1.0vw, -0.6rem);
        right: min(-1.0vw, -0.6rem);
    }

    #service .wrapper::after {
        bottom: min(-1.0vw, -0.6rem);
        left: min(-1.0vw, -0.6rem);
    }

    #service .carousel-control {
        display: block;
    }

    #service button[class^="carousel-control"] {
        top: inherit;
        bottom: -7.0rem;
        transform: scale(2.0);
        width: 2.0rem;
        height: 3.0rem;
        padding: 0.5rem;
        background-color: rgba(255, 255, 255, 0.50);
        opacity: 1;
        z-index: 60;
        transition: all 0.3s ease-in-out;
    }

    #service button[class^="carousel-control"]:first-of-type {
        left: 25.0vw;
        border-radius: 1.5rem 0.4rem 0.4rem 1.5rem;
    }

    #service .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(100, 50, 0, 1.00)'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
        transform: scale(1.5);
        transition: all 0.3s ease-in-out;
    }

    #service button[class^="carousel-control"]:last-of-type {
        right: 25.0vw;
        border-radius: 0.4rem 1.5rem 1.5rem 0.4rem;
    }

    #service .carousel-control-next-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(100, 50, 0, 1.00)'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        transform: scale(1.5);
        transition: all 0.3s ease-in-out;
    }

}

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

    #service > div > h2,
    #service > div > h2 span {
        font-size: min(12.0vw, 6.0rem);
    }

    #service div[class^="col-"]:last-of-type {
        min-height: 50.0rem;
    }

    #service img {
        border-radius: 5.0rem;
    }

    #service button[class^="carousel-control"]:hover {
        background-color: rgba(255, 255, 255, 1.00);
    }

    #service button[class^="carousel-control"]:active {
        background-color: rgba(255, 255, 255, 0.50);
    }

    #service button[class^="carousel-control"]:hover .carousel-control-prev-icon {
        transform: translateX(-10.0%) scale(1.5);
    }

    #service button[class^="carousel-control"]:hover .carousel-control-next-icon {
        transform: translateX(10.0%) scale(1.5);
    }

    #service .carousel-indicators button:hover {
        background-color: rgba(255, 255, 255, 1.00);
        color: rgba(100, 50, 0, 1.00);
    }

}

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

    #service {
        background-position: center center;
    }

    #service button[class^="carousel-control"]:first-of-type {
        left: 32.5vw;
    }

    #service button[class^="carousel-control"]:last-of-type {
        right: 32.5vw;
    }

}

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

    #service .wrapper::before,
    #service .wrapper::after {
        width: min(12.0vw, 24.0rem);
    }

    #service button[class^="carousel-control"] {
        bottom: -7.6rem;
        width: 3.0rem;
        height: 4.0rem;
    }

    #service button[class^="carousel-control"]:first-of-type {
        border-radius: 2.0rem 0.6rem 0.6rem 2.0rem;
    }

    #service .carousel-control-prev-icon {
        transform: scale(1.0);
    }

    #service button[class^="carousel-control"]:hover .carousel-control-prev-icon {
        transform: translateX(-10.0%) scale(1.0);
    }

    #service button[class^="carousel-control"]:last-of-type {
        border-radius: 0.6rem 2.0rem 2.0rem 0.6rem;
    }

    #service .carousel-control-next-icon {
        transform: scale(1.0);
    }

    #service button[class^="carousel-control"]:hover .carousel-control-next-icon {
        transform: translateX(10.0%) scale(1.0);
    }

}

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

    #service div[class^="col-"]:last-of-type {
        min-height: 50.0rem;
    }

    #service button[class^="carousel-control"]:first-of-type {
        left: 35.0vw;
    }

    #service button[class^="carousel-control"]:last-of-type {
        right: 35.0vw;
    }

}


/* ========================================================

　guidance

=========================================================== */

#guidance {
    background: url("../img/background_texture01.png") center center / 5.0rem auto repeat fixed;
}

#guidance .wrapper {
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background: url("../img/nearyouko.png") right bottom min(20.0vw, 10.0rem) / 95% auto no-repeat;
}

#guidance .row {
    align-items: center;
}

#guidance div[class^="col-"]:last-of-type {
    height: 70.0vw;
}

/* title part */
#guidance h2::before {
    display: inline-block;
    width: min(10.0vw, 3.6rem);
    height: min(10.0vw, 3.6rem);
    background: url("../img/icon_dog.png") left center / contain no-repeat;
    content: '';
}

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

    #guidance .wrapper {
        padding: min(20.0vw, 15.0rem) 0;
        background-position: right center;
        background-size: min(50.0vw, 80.0rem) auto;
    }

    #guidance div[class^="col-"]:last-of-type {
        height: inherit;
    }

}


/* ========================================================

　faq

=========================================================== */

#faq {
    position: relative;
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background: url("../img/background_dog.jpg") center center / cover no-repeat;
    color: rgba(255, 255, 255, 1.00);
}

#faq .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(100, 50, 0, 0.50);
    z-index: 0;
}

/* margin on image when using SP */
#faq div[class^="col-"]:last-of-type {
    margin-top: 4.0rem;
    z-index: 5;
}

/* title part */
#faq h2::before {
    content: "\f4bd";

}

#faq h3 {
    color: rgba(255, 255, 255, 1.00);
}

/* accordion part */
#faq .accordion-item {
    border: none;
    background: none;
}

#faq .accordion-item:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

#faq div[id^="heading"] {
    padding: min(1.25vw, 0.5rem);
    border: 0.4rem dotted rgba(255, 240, 0, 1.00);
    border-radius: 1.4rem;
    transition: border-color 0.3s ease-in-out;
}

#faq div[id^="heading"] div {
    position: relative;
    padding: min(2.0vw, 1.0rem) min(3.0vw, 1.5rem);
    border-radius: 1.0rem;
    background-color: rgba(255, 255, 255, 0.70);
    transition: background-color 0.3s ease-in-out;
}

#faq div[id^="heading"] div[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 1.00);
}

#faq div[id^="heading"] div::after {
    display: inline-block;
    position: absolute;
    top: 50%;
    right: min(1.5vw, 1.5rem);
    transform: translateY(-50%);
    color: rgba(100, 50, 0, 1.00);
    font-family: 'bootstrap-icons';
    font-weight: bold;
    content: "\f282";
    transition: all 0.3s ease-in-out;
}

#faq div[id^="heading"] div[aria-expanded="true"]::after {
    color: rgba(180, 65, 0, 1.00);
    content: "\f286";
}

#faq div[id^="heading"] p {
    margin-right: min(3.0vw, 3.0rem);
    color: rgba(100, 50, 0, 1.00);
    text-align: inherit;
    line-height: 140%;
}

#faq div[id^="heading"] div[aria-expanded="true"] p {
    color: rgba(180, 65, 0, 1.00);
}

#faq div[id^="collapse"] {
    margin: 1.0rem min(2.5vw, 1.0rem) 1.0rem 2.0rem;
    border: 0.2rem solid rgba(255, 190, 0, 1.00);
    border-radius: 2.0rem;
    background: none;
    background-color: rgba(255, 255, 255, 1.00);
}

#faq div[id^="collapse"] p {
    margin: min(5.0vw, 1.5rem) min(5.0vw, 2.0rem);
    color: rgba(30, 85, 85, 1.00);
}

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

    #faq {
        padding: min(20.0vw, 15.0rem) 0;
    }

}

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

    #faq div[class^="col-"]:last-of-type {
        margin-top: 0;
    }

    #faq div[id^="heading"]:hover {
        border-color: rgba(255, 240, 0, 1.00);
        cursor: pointer;
    }

    #faq div[id^="heading"]:hover div {
        background-color: rgba(255, 255, 255, 1.00);
    }

    #faq div[id^="heading"]:hover p {
        color: rgba(180, 65, 0, 1.00);
    }

    #faq div[id^="heading"]:hover div::after {
        color: rgba(180, 65, 0, 1.00);
    }

    #faq div[id^="heading"]:hover div[aria-expanded="true"]::after {
        transform: translateY(-50%) rotate(0)
    }

}


/* ========================================================

　consultation

=========================================================== */

#consultation {
    padding: min(30.0vw, 10.0rem) 2.5vw;
}

#consultation .row {
    align-items: center;
}

/* margin on image when using SP */
#consultation div[class^="col-"]:last-of-type {
    margin-top: 4.0rem;
}

/* title part */
#consultation h2::before {
    content: "\f7be";
}

/* button part */
#consultation a {
    display: block;
    position: relative;
    border: 0.6rem double rgba(145, 195, 30, 1.00);
    background-color: rgba(145, 195, 30, 0.10);
    background-image: url("../img/decoration_gl.png"), url("../img/decoration_gr.png");
    background-position: left min(1.5vw, 1.0rem) center, right min(1.5vw, 1.0rem) center;
    background-size: auto 80%;
    background-repeat: no-repeat;
    color: rgba(145, 195, 30, 1.00);
    font-weight: 500;
    text-transform: uppercase;
}

#consultation a span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    transform: translate(-50%, -55%);
    text-align: center;
    transition: opacity 0.3s ease-in-out;
}

#consultation a span:last-of-type {
    opacity: 0;
}

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

    #consultation a {
        width: min(80.0vw, 46.0rem);
        height: min(24.0vw, 14.0rem);
        margin: 0 auto;
        border-radius: min(40.0vw, 23.0rem);
        font-size: min(10.0vw, 5.0rem);
    }

}

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

    #consultation {
        padding: min(20.0vw, 15.0rem) 0;
    }

    #consultation div[class^="col-"]:last-of-type {
        margin-top: 0;
    }

    #consultation a {
        width: 100%;
        height: min(20.0vw, 24.0rem);
        margin: 0;
        border-radius: min(10.0vw, 12.0rem);
        font-size: min(5.0vw, 8.0rem);
    }

}

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

    #consultation a {
        background-position: left min(1.5vw, 1.5rem) center, right min(1.5vw, 1.5rem) center;
    }

    #consultation a:hover {
        background-color: rgba(145, 195, 30, 1.00);
        background-image: url("../img/decoration_wl.png"), url("../img/decoration_wr.png");
        color: rgba(255, 255, 255, 1.00);
    }

    #consultation a:hover span:first-of-type {
        opacity: 0;
    }

    #consultation a:hover span:last-of-type {
        opacity: 1;
    }

}


/* ========================================================

　movie

=========================================================== */

#movie {
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background: rgba(30, 85, 85, 1.00) url("../img/background_bubble02.png") left center / cover no-repeat;
}

/* block title part */
#movie > h2,
#movie > h2 span {
    margin-bottom: min(8.0vw, 8.0rem);
    color: rgba(255, 255, 255, 1.00);
    font-family: "Noto Serif JP", serif;
    font-size: min(10.0vw, 5.0rem);
    font-weight: 600;
    text-align: center;
    line-height: 140%;
    letter-spacing: 1.0rem;
}

#movie > h2 span {
    display: block;
}

/* movie part */
#movie div[class^="col-"] {}

#movie .media {
    position: relative;
    padding: min(5.0vw, 2.4rem);
    cursor: pointer;
}

#movie .media img {
    transform: rotate(1deg);
    border-radius: 3rem;
}

#movie .wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 0, 0, 1.00);
    font-size: min(12.0vw, 8.0rem);
    transition: color 0.3s ease-in-out;
}

#movie .dashed-border {
    position: absolute;
    left: min(-0.5vw, -0.2rem);
    top: min(-0.5vw, -0.15rem);
    transform: rotate(-1deg);
    width: 100%;
    height: 100%;
    stroke: rgba(255, 255, 255, 0.50);
    stroke-width: 6;
    stroke-dasharray: 10, 10;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    fill: none;
    animation-play-state: running;
    overflow: visible;
    transition: all 0.3s ease-in-out;
}

#movie iframe {
    height: 100%;
    border: none;
}

#movie .modalWindow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 1.00);
    width: 100vw;
    height: 100vh;
    z-index: 50;
}

#movie .modalWindow-container {
    display: table-cell;
    vertical-align: middle;
}

#movie .modalWindow-video {
    max-width: 90.0vw;
    height: calc(44.9943757vw);
    margin: 0 auto;
}

#movie .close {
    display: grid;
    place-content: center;
    position: fixed;
    top: 2.5rem;
    right: 5.0vw;
    width: min(15.0vw, 6.0rem);
    height: min(15.0vw, 6.0rem);
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.70);
    color: rgba(0, 0, 0, 1.00);
    font-size: 2.2rem;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

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

    #movie {
        padding: min(20.0vw, 15.0rem) 0;
    }

    #movie > h2 span {
        display: inline;
    }

    #movie .media {
        padding: min(6.0vw, 3.0rem);
    }

    #movie .dashed-border {
        left: min(-0.25vw, -0.1rem);
        top: min(-0.25vw, -0.1rem);
        stroke-dasharray: 20, 15;
    }

    #movie .modalWindow-video {
        max-width: 80.0vw;
    }

}

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

    #movie > h2,
    #movie > h2 span {
        font-size: min(12.0vw, 6.0rem);
    }

    #movie .media img {
        filter: grayscale();
        transition: filter 0.3s ease-in-out;
    }

    #movie .media:hover img {
        filter: none;
    }

    #movie .media:hover .wrapper {
        color: rgba(255, 255, 255, 1.00);
    }

    #movie .modalWindow-video {
        max-width: 70.0vw;
    }

    #movie .media:hover .dashed-border {
        stroke: rgba(255, 240, 0, 1.00);
        stroke-dasharray: 20, 15;
        animation: border_running 20.0s linear infinite both;
        animation-play-state: running;
    }

    #movie .close:hover {
        background-color: rgba(255, 255, 255, 1.00);
        transform: scale(1.1);
    }

}

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

    #movie {
        background-position: center center;
    }

}

@keyframes border_running {

    100% {
        stroke-dashoffset: -1000;
    }

}


/* ========================================================

　staff

=========================================================== */

#staff {
    padding: min(30.0vw, 10.0rem) 2.5vw;
}

#staff .img1 {
    background-image: url("../img/near.jpg");
    background-size: cover;
    background-position: center;
}

#staff .img2 {
    background-image: url("../img/youko.jpg");
    background-size: cover;
    background-position: center;
}

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

    #staff {
        padding: min(20.0vw, 15.0rem) 0;
    }

}


/* ========================================================

　access

=========================================================== */

#access {
    padding: min(30.0vw, 10.0rem) 2.5vw;
    background-color: rgba(100, 50, 0, 1.00);
}

/* block title part */
#access > h2 {
    margin-bottom: min(8.0vw, 8.0rem);
    color: rgba(255, 255, 255, 1.00);
    font-family: "Noto Serif JP", serif;
    font-size: min(10.0vw, 5.0rem);
    font-weight: 600;
    text-align: center;
    line-height: 140%;
    letter-spacing: 1.0rem;
}

/* map part */
#access .google-map {
    position: relative;
    height: min(100.0vw, 50.0rem);
    border-radius: 2.0rem;
}

#access .google-map iframe {
    height: 100%;
    border-radius: 2.0rem;
}

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

    #access {
        padding: min(20.0vw, 15.0rem) 0;
    }

}

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

    #access > h2 {
        font-size: min(12.0vw, 6.0rem);
    }

}


/* ========================================================

　footer

=========================================================== */

footer {
    position: relative;
    width: 100%;
    background: rgba(235, 235, 230, 1.00) url("../img/background_bubble03.png") right center / cover no-repeat;
}

hr {
    margin: min(6.0vw, 2.0rem) 0;
}

/* wave part */
#wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

/* sitemap part */
.footer {
    padding: min(30.0vw, 10.0rem) 2.5vw min(24.0vw, 8.0rem);
}

.footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer p,
.footer li {
    line-height: 140%;
}

/* phone */
.cominfo div[class^="col-"]:nth-of-type(3) {
    margin-top: min(10.0vw, 4.0rem);
}

.cominfo h5 {
    margin-bottom: 1.0rem;
    color: rgba(235, 95, 0, 1.00);
    font-family: "Noto Serif JP", serif;
    font-size: min(5.0vw, 1.86rem);
    font-weight: 600;
    letter-spacing: 0;
}

.cominfo i {
    position: relative;
    top: min(1.25vw, 0.5rem);
    color: rgba(0, 0, 0, 1.00);
    font-size: min(8.0vw, 2.8rem);
}

.cominfo a[href*="tel:"] {
    margin-left: 0.25rem;
    color: rgba(75, 105, 0, 1.00);
    font-family: Georgia, "Times New Roman", Times, "serif";
    font-size: min(8.0vw, 3.0rem);
    font-weight: 700;
    letter-spacing: 0.2rem;
}

.cominfo span {
    display: inline-block;
    width: 11.0rem;
    margin-right: 1.6rem;
    text-align-last: justify;
}

/* sitemap */
.sitemap {
    margin-top: min(10.0vw, 4.0rem);
}

.sitemap ul:first-of-type li {
    margin-bottom: 1.0rem;
}

.sitemap ul:first-of-type li::before {
    position: relative;
    top: 0.3rem;
    margin-right: 0.25rem;
    font-family: 'bootstrap-icons';
    content: "\f470";
}

.sitemap ul:last-of-type {
    margin-top: min(6.0vw, 2.0rem);
}

.sitemap ul:last-of-type li {
    display: inline-block;
    font-size: 1.3rem;
}

.sitemap ul:last-of-type li:nth-last-of-type(n+2)::after {
    margin-left: 0.5rem;
    content: "/";
}

/* LINE QRcode */
.line-qr {
    display: none;
}

/* copyright part */
footer .copyright {
    padding-bottom: 6.0rem;
}

footer aside {
    color: rgba(245, 240, 235, 1.00);
    font-family: "Zen Loop", sans-serif;
    font-size: 2.0rem;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    letter-spacing: 0.2rem;
}

footer .copyright aside::first-letter {
    font-family: "Noto Serif JP", serif;
}

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

    .footer {
        padding: min(20.0vw, 15.0rem) 0 min(20.0vw, 12.0rem);
    }

    .sitemap {
        margin-top: 0;
    }

    .sitemap ul:first-of-type li {
        display: inline-block;
    }

    .sitemap ul:first-of-type li:nth-last-of-type(n+2) {
        margin-right: 1.0rem;
    }

}

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

    .sitemap ul:first-of-type a {
        position: relative;
    }

    .sitemap ul:first-of-type a::after {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 0;
        height: 0.1rem;
        content: '';
        background-color: rgba(100, 50, 0, 1.00);
        transition: all 0.3s ease-in-out;
    }

    .sitemap ul:first-of-type a:hover {
        color: rgba(100, 50, 0, 1.00);
    }

    .sitemap ul:first-of-type a:hover::after {
        width: 100%;
    }

    .line-qr {
        display: block;
    }

    .line-qr img {
        border-radius: 1.0rem;
    }

    footer .copyright {
        padding: 3.5rem 0 2.5rem;
    }

}

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

    footer {
        background-position: center center;
    }

    .sitemap ul:first-of-type li {
        margin-bottom: 0.5rem;
    }

}


/* ========================================================

　modalContent

=========================================================== */

#modalContact ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#modalContact .modal-dialog {
    top: 20%;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
}

#modalContact .modal-content {
    padding: min(3.0vw, 3.0rem);
    border-radius: min(2.0vw, 3.0rem);
    box-shadow: 0 0 min(2.4vw, 2.4rem) rgba(0, 0, 0, 0.50), 0 0 min(2.4vw, 2.4rem) rgba(100, 50, 0, 0.25);
}

#modalContact .modal-header {
    margin-bottom: 2.0rem;
    padding-bottom: min(3.0vw, 3.0rem);
    text-align: center;
}

#modalContact .modal-header h3 {
    width: 100%;
    color: rgba(30, 85, 85, 1.00);
    font-size: 4.0rem;
}

#modalContact .btn-close {
    transform: scale(2.0);
    transition: color 0.3s ease-in-out;
}

#modalContact li:first-of-type p {
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

#modalContact li:first-of-type h4 {
    margin-top: 0.5rem;
    font-family: Georgia, "Times New Roman", Times, "serif";
    font-size: 4.0rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
}

#modalContact li:first-of-type i {
    position: relative;
    top: 0.5rem;
    color: rgba(0, 0, 0, 1.00);
    font-size: 3.6rem;
}

#modalContact li:last-of-type h4 {
    margin-top: 3.0rem;
}

#modalContact li:last-of-type a {
    color: rgba(115, 85, 50, 1.00);
    font-size: 2.8rem;
    font-weight: 500;
    letter-spacing: -0.2rem;
}

#modalContact li:last-of-type i {
    position: relative;
    top: 0.3rem;
    color: rgba(120, 120, 120, 1.00);
    font-size: 3.6rem;
}

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

    #modalContact .btn-close:hover {
        color: rgba(235, 95, 0, 1.00);
    }

    #modalContact li:last-of-type a:hover {
        color: rgba(180, 65, 0, 1.00);
    }

}


/* ========================================================

　fixed menu

=========================================================== */

#fixedMenu {
    position: fixed;
    right: 0.5rem;
    bottom: 0.75rem;
    left: 0.5rem;
    max-width: 48.0rem;
    margin: 0 auto;
    padding: min(3.0vw, 1.0rem) 0;
    border-radius: 2.5rem;
    border: 0.1rem solid rgba(115, 115, 15, 0.25);
    background-color: rgba(255, 255, 255, 0.70);
    text-align: center;
    z-index: 50;
}

#fixedMenu a {
    margin: 0 min(2.0vw, 1.0rem);
    font-weight: 500;
}

#fixedMenu a[href*="line.me"] {
    color: rgba(6, 199, 85, 1.00);
}

#fixedMenu a[href*="x.com"] {
    color: rgba(15, 20, 25, 1.00);
}

#fixedMenu a[href*="facebook.com"] {
    color: rgba(24, 119, 242, 1.00);
}

#fixedMenu a[href*="tel:"] {
    color: rgba(0, 0, 0, 1.00);
}

#fixedMenu a[href*="contact"] {
    color: rgba(120, 120, 120, 1.00);
}

#fixedMenu i {
    position: relative;
    top: 0.1rem;
    font-size: 2.0rem;
}

#fixedMenu span {
    margin-left: 0.25rem;
}

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

    #fixedMenu a {
        margin: 0 min(3.0vw, 2.0rem);
    }

}

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

    #fixedMenu {
        top: 50%;
        right: min(0.5vw, 1.0rem);
        transform: translateY(-50%);
        bottom: inherit;
        left: inherit;
        width: 4.0rem;
        max-width: inherit;
        margin: inherit;
        padding: 2.0rem 0.5rem;
        border-radius: 2.0rem;
    }

    #fixedMenu a {
        display: inline-block;
        margin: 0;
        line-height: 100%;
        transition-duration: 0.5s;
    }

    #fixedMenu a:hover {
        transform: rotate(360deg) scale(1.3);
    }

    #fixedMenu a[href*="calender"]:hover {
        color: rgba(235, 95, 0, 1.00);
        transform: none;
    }

    #fixedMenu a:nth-of-type(n+2) {
        margin-top: 2.0rem;
    }

    #fixedMenu a[href*="tel:"],
    #fixedMenu a[href*="contact"] {
        display: none;
    }

    #fixedMenu i {
        position: inherit;
        top: 0;
    }

    #fixedMenu span {
        margin-left: 0;
        writing-mode: vertical-rl;
        letter-spacing: -0.7rem;
    }

}


/* ========================================================

　Scroll to Pagetop

=========================================================== */

#slideIn {
    display: none;
    position: fixed;
    right: 0.5rem;
    bottom: 8.5rem;
    z-index: 60;
}

#slideIn i {
    position: relative;
    z-index: 60;
}

#slideIn a {
    display: grid;
    place-content: center;
    width: min(15.0vw, 8.0rem);
    height: min(15.0vw, 8.0rem);
    margin-bottom: 1.0vw;
    border-radius: 50%;
    background-color: rgba(100, 50, 0, 0.25);
    color: rgba(100, 50, 0, 1.00);
    font-size: min(8.0vw, 4.0rem);
    transition: all 0.5s ease-in-out;
}

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

    #slideIn {
        right: 1.0rem;
        bottom: 8.0rem;
    }

    #slideIn a:hover {
        border: 0.4rem dashed rgba(100, 50, 0, 1.00);
        background-color: transparent;
        transform: scale(1.15);
    }

}


/* ########################################################


　page.php / single.php


########################################################### */

body:not(.home) header {
    position: relative;
    height: min(50.0vw, 30.0rem);
    overflow: hidden;
}

/* background image */
body:not(.home) header img {
    height: 100%;
    object-fit: cover;
    transform: scale(1.0);
    animation: scaleup 20.0s linear;
    z-index: -1;
}

@keyframes scaleup {

    100% {
        transform: scale(1.5);
    }

}

/* top heading */
body:not(.home) header .inner {
    position: absolute;
    top: calc(50% + 4.0rem);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

body:not(.home) header h1 {
    color: rgba(0, 0, 0, 1.00);
    font-size: min(9.0vw, 4.0rem);
    font-family: "Noto Serif JP", serif;
    text-shadow: 0.15rem 0.15rem 0 rgba(255, 255, 255, 1.00), 0 0 1.5rem rgba(255, 255, 255, 0.75), 0 0 1.5rem rgba(255, 255, 255, 1.00);
}

body:not(.home) header em {
    display: block;
    color: rgba(0, 0, 0, 1.00);
    font-family: "Zen Loop", sans-serif;
    font-size: min(6.0vw, 2.4rem);
    font-weight: bold;
    font-style: normal;
    text-transform: capitalize;
    letter-spacing: 0.2rem;
    text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 1.00), 0 0 1.0rem rgba(255, 255, 255, 0.75), 0 0 1.0rem rgba(255, 255, 255, 1.00);
}

/* section */
body:not(.home) section {
    padding: min(14.0vw, 10.0rem) 2.5vw;
    background: url("../img/background_diagonal_l.png") left top / 15.0vw auto repeat-y fixed, url("../img/background_diagonal_r.png") right top / 15.0vw auto repeat-y fixed;
}

body:not(.home) section > .container > .row {
    justify-content: center;
}

/* text heading */
body:not(.home) section h2 {
    margin-bottom: min(5.0vw, 2.0rem);
    padding: min(4.6vw, 2.4rem) min(2.0vw, 1.0rem);
    background: url("../img/bg_page_h2.png") left center / 100% 100% no-repeat;
    color: rgba(125, 45, 0, 1.00);
    font-size: min(6.0vw, 3.0rem);
    text-shadow: 0.2rem 0.2rem 0 rgba(255, 255, 255, 1.00);
}

body:not(.home) section h2:nth-of-type(n+2) {
    margin-top: min(10.0vw, 8.0rem);
}

body:not(.home) section h3 {
    clear: both;
    position: relative;
    margin: min(7.0vw, 3.0rem) 0 min(7.5vw, 3.5rem);
    padding: 0 min(2.0vw, 1.0rem);
    color: rgba(125, 45, 0, 1.00);
    font-size: min(6.0vw, 2.0rem);
}

body:not(.home) section h3::after {
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    width: 100%;
    height: 1.0rem;
    background-image: repeating-linear-gradient(-45deg, rgba(125, 45, 0, 1.00), rgba(125, 45, 0, 1.00) 0.1rem, transparent 0.2rem, transparent 0.5rem);
    background-size: 0.7rem 0.7rem;
    backface-visibility: hidden;
    content: '';
}

body:not(.home) section h4 {
    margin: min(7.0vw, 3.0rem) 0 min(5.0vw, 2.0rem);
    padding: 0 min(2.0vw, 1.0rem) 0.75rem;
    border-bottom: 0.4rem dotted rgba(100, 140, 10, 1.00);
    color: rgba(100, 140, 10, 1.00);
    font-size: min(6.0vw, 1.8rem);
}

/* text */
body:not(.home) section p {
    line-height: 160%;
}

body:not(.home) section ul {
    margin-left: 1.6rem;
    padding: 0;
    list-style: none;
}

body:not(.home) section li {
    line-height: 200%;
}

body:not(.home) section dt,
body:not(.home) section dd {
    padding: min(6.0vw, 1.5rem);
}

body:not(.home) section dt {
    border-radius: 1.0rem;
    background-color: rgba(205, 225, 155, 0.25);
    color: rgba(100, 140, 10, 1.00);
    font-size: 110%;
    font-weight: 500;
}

body:not(.home) section dd {
    margin-bottom: min(6.0vw, 3.0rem);
}

body:not(.home) section dd a {
    padding: 0.5rem 0.5rem 0.75rem;
    line-height: 100%;
}

body:not(.home) section .att {
    color: rgba(235, 95, 0, 1.00);
}

/* font color */
body:not(.home) section .red,
body:not(.home) section .blu,
body:not(.home) section .pnk {
    font-weight: 500;
}

body:not(.home) section .red {
    color: rgba(255, 0, 0, 1.00);
}

body:not(.home) section .red.mid {
    font-size: 120%;
}

body:not(.home) section .blu {
    color: rgba(0, 115, 170, 1.00);
}

body:not(.home) section .pnk {
    color: rgba(240, 155, 195, 1.00);
    font-size: 150%;
}

body:not(.home) section .pnk.mid {
    font-size: 120%;
}

body:not(.home) figcaption {
    color: rgba(160, 160, 160, 1.00);
    font-size: 1.4rem;
    text-align: center;
}

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

    body:not(.home) header em {
        margin-top: 0.5rem;
    }

    body:not(.home) section {
        background-size: 25.0vw auto;
    }

    body:not(.home) section dl {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    body:not(.home) section dt,
    body:not(.home) section dd {
        padding: min(3.0vw, 1.5rem) min(3.0vw, 2.0rem);
    }

    body:not(.home) section dt:nth-of-type(n+2),
    body:not(.home) section dd:nth-of-type(n+2) {
        margin-top: 1.0rem;
    }

    body:not(.home) section dt {
        display: grid;
        place-content: center;
        width: 36.0%;
    }

    body:not(.home) section dd {
        width: calc(100% - 36.0% - 3.0rem);
        margin: 0 0 0 3.0rem;
    }

}

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

    body:not(.home) header .inner {
        top: calc(50% + 5.0rem);
    }

}


/* ========================================================

　.aioseo-breadcrumbs

=========================================================== */

#breadcrumbs {
    text-align: right;
}

#breadcrumbs .aioseo-breadcrumbs {
    display: inline-block;
    margin-bottom: min(3.0vw, 3.0rem);
    border-bottom: 0.1rem dotted rgba(204, 204, 204, 1.00);
    font-size: 80%;
    text-align: right;
}


/* ========================================================

　.introduction

=========================================================== */

/* heding cloud area */
.introduction main > div {
    display: grid;
    place-content: center;
    margin: 0;
    padding: min(5.0vw, 10.0rem) 0 min(15.0vw, 15.0rem);
    background: rgba(125, 205, 245, 1.00) url("../img/bg_introduction_h2.png") center bottom / 100% auto no-repeat;
}

.introduction main > div h2 {
    color: rgba(255, 255, 255, 1.00);
    font-size: min(8.0vw, 3.0rem);
    line-height: 150%;
}

.introduction main > div h2 span {
    display: block;
    line-height: 150%;
}

.introduction main > div h2 span:nth-of-type(1) {
    margin-left: min(8.5vw, 3.4rem);
}

.introduction main > div h2 span:nth-of-type(2) {
    margin-left: min(17.0vw, 6.8rem);
}

.introduction section p {
    font-family: "Noto Serif JP", serif;
    font-size: min(4.6vw, 1.8rem);
    font-weight: 300;
}

/* marker */
.introduction section .mkr {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, rgba(255, 255, 105, 0.70), rgba(255, 255, 105, 0.70));
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 30%;
    transition: all 3.0s ease-in-out;
}

.introduction section .mkr.inview {
    background-size: 100% 30%;
}

/* image */
.introduction section .wrapper {
    position: relative;
    margin: min(10.0vw, 5.0rem) 0;
    padding: min(8.0vw, 5.0rem) min(6.0vw, 3.0rem) min(3.0vw, 2.0rem);
}

.introduction section .wrapper::before,
.introduction section .wrapper::after {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-3deg);
    width: 100%;
    height: 100%;
    border: min(1.5vw, 0.6rem) solid rgba(0, 185, 240, 0.25);
    border-radius: 3.0rem;
    content: '';
}

.introduction section .wrapper::after {
    transform: rotate(3deg);
    border: min(1.0vw, 0.3rem) solid rgba(240, 155, 195, 0.50);
}

.introduction section .wrapper img {
    border-radius: 3.0rem;
    border-radius: min(5.0vw, 5.0rem);
}

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

    .introduction main > div h2 span:nth-of-type(1) {
        margin-left: min(8.5vw, 3.2rem);
    }

    .introduction main > div h2 span:nth-of-type(2) {
        margin-left: min(17.0vw, 6.4rem);
    }

}

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

    .introduction main > div h2 {
        line-height: 100%;
    }

    .introduction main > div h2 span {
        display: inline-block;
    }

    .introduction main > div h2 span:nth-of-type(1),
    .introduction main > div h2 span:nth-of-type(2) {
        margin-left: 3.0rem;
    }

}

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

    .introduction section .wrapper {
        padding: min(8.0vw, 6.0rem) min(6.0vw, 4.0rem) min(3.0vw, 3.0rem);
    }

    .introduction section .wrapper::before,
    .introduction section .wrapper::after {
        border-radius: 5.0rem;
    }

}

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

    .introduction main > div {
        padding-bottom: min(15.0vw, 30.0rem);
    }

    .introduction main > div h2 {
        font-size: min(3.4vw, 4.8rem);
    }

}

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

    .introduction main > div {
        padding-bottom: 40.0rem;
    }

}


/* ========================================================

　.guidance

=========================================================== */

.guidance section .voice p {
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

/* youko photo */
.guidance section figure {
    margin: min(10.0vw, 3.0rem) auto;
    max-width: 24.0rem;
}

.guidance section figure img {
    border-radius: min(5.0vw, 3.0rem);
}

.guidance section h3 + ul {
    margin-left: 3.2rem;
    list-style: disc;
}

.guidance section h4 + ul {
    margin-left: 0;
    list-style: none;
}

/* outline */
.guidance section dd {
    line-height: 160%;
}

/* opening times */
.guidance section .time {
    display: block;
}

.guidance section .sat {
    color: rgba(0, 160, 230, 1.00)
}

.guidance section .sun {
    color: rgba(255, 0, 0, 1.00)
}

/* Times image */
.guidance section p img {
    margin-top: 1.0rem;
    max-width: min(40.0vw, 21.0rem);
}

/* map */
.guidance section #map {
    margin-top: -7.0rem;
    padding-top: 10.0rem;
}

.guidance section iframe {
    height: min(50.0vw, 36.0rem);
    border: min(1.5vw, 0.6rem) solid rgba(115, 115, 15, 0.50);
    border-radius: min(5.0vw, 3.0rem);
}

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

    .guidance section .time {
        display: inline;
    }

}

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

    .guidance section .voice {
        margin-top: 2.0rem;
    }

    .guidance section figure {
        float: right;
        margin: 2.4rem 0 min(10.0vw, 3.0rem) 0;
        max-width: min(26.0vw, 24.0rem);
    }

    .guidance section p img {
        float: right;
    }

}

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

    .guidance section #map {
        margin-top: -5.0rem;
        padding-top: 10.0rem;
    }

}

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

    .guidance section iframe {
        height: min(50.0vw, 46.0rem);
    }

}


/* ========================================================

　.price

=========================================================== */

.price section dl:last-of-type dt {
    background-color: rgba(240, 215, 225, 0.25);
    color: inherit;
}

/* 括弧書き */
.price section dt span {
    font-size: 70%;
}

.price section dd {
    font-size: 150%;
    font-weight: 500;
}

/* 漢方薬のご紹介 */
.price section dl:last-of-type dt em {
    display: block;
    margin-top: 2.0rem;
    font-size: 80%;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    line-height: 140%;
}

.price section dl:last-of-type dd span {
    font-size: 80%;
}

.price section dd img {
    max-width: 20.0rem;
    margin: 0 auto;
}

.price section dd span {
    display: block;
    width: 100%;
    margin-top: 2.0rem;
    text-align: center;
}

.price section dl + p {
    color: rgba(235, 95, 0, 1.00);
}

.price main section ul {
    margin-left: 3.2rem;
    list-style: disc;
}

.price main section ul li::after {
    margin-left: 0.25rem;
    font-family: 'bootstrap-icons';
    content: "\f1c5";
}

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

    body.price section dt {
        display: block;
        width: 70.0%;
    }

    body.price section dd {
        width: calc(100% - 70.0% - 3.0rem);
    }

    .price section dl:last-of-type dt {
        width: 50.0%;
    }

    .price section dl:last-of-type dd {
        width: calc(100% - 50.0% - 3.0rem);
    }

}


/* ========================================================

　.flow

=========================================================== */

body.flow section h2 {
    margin-bottom: min(8.0vw, 5.0rem);
    padding: min(7.0vw, 3.0rem);
    background: url("../img/bg_flow_h2.png") center bottom / 100% auto no-repeat;
    font-size: min(8.0vw, 4.0rem);
}

/* Step.2 以降 */
.flow section .inner:nth-of-type(n+2) {
    margin-top: min(8.0vw, 4.0rem);
}

/* 矢印 */
.flow section .inner:nth-last-of-type(n+2)::after {
    display: inline-block;
    width: 100%;
    height: min(12.0vw, 6.0rem);
    margin-top: min(4.0vw, 2.0rem);
    background: url("../img/arrow.png") center center / contain no-repeat;
    content: '';
}

/* Step 見出し */
.flow section .inner div {
    display: flex;
    align-items: center;
    color: rgba(100, 140, 10, 1.00);
    font-family: "Noto Serif JP";
    font-size: min(7.0vw, 3.6rem);
}

/* タグ画像 */
.flow section .inner div img {
    max-width: min(34.0vw, 26.0rem);
    height: auto;
    margin-right: 1.0rem;
}

.flow section h3 {
    line-height: 140%;
}

.flow section .inner ul {
    margin-left: 3.2rem;
    margin: min(7.0vw, 3.0rem) 0 min(6.0vw, 2.0rem) 3.2rem;
    color: rgba(235, 95, 0, 1.00);
    list-style: disc;
}

/* tab */
.flow section .nav-tabs {
    margin: 1.0rem 0 0;
    padding: 0;
    border-color: rgba(0, 160, 235, 1.00);
}

.flow section .nav-item .nav-link {
    color: rgba(0, 160, 235, 1.00);
}

.flow section .nav-item .nav-link::after {
    border-radius: 0.4rem 0.4rem 0 0;
}

.flow section .nav-item .nav-link.active {
    border-color: rgba(0, 160, 235, 1.00);
    border-bottom-color: rgba(255, 255, 255, 1.00);
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

.flow section .tab-content {
    margin-top: min(3.0vw, 5.0rem);
}

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

    .flow section .nav-tabs {
        border: none;
    }

    .flow section .nav-item {
        display: block;
    }

    .flow section .nav-item:nth-of-type(n+2) {
        margin-top: 1.0rem;
        margin-bottom: 0.5rem;
    }

    .flow section .nav-item .nav-link {
        padding: 0.5rem 1.0rem;
        border: 0.1rem solid rgba(0, 160, 235, 1.00);
        border-radius: 0.4rem;
        color: rgba(0, 160, 235, 1.00);
    }

    .flow section .nav-item .nav-link.active {
        border-color: rgba(0, 160, 235, 1.00);
        background-color: rgba(0, 160, 235, 1.00);
        color: rgba(255, 255, 255, 1.00);
    }

}

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

    .flow section .nav-item .nav-link {
        padding-left: 2.0rem;
        padding-right: 2.0rem;
        font-size: 1.8rem;
    }

}


/* ========================================================

　.acupuncture

=========================================================== */

body.acupuncture section h2 {
    margin-bottom: min(8.0vw, 5.0rem);
    padding: min(4.0vw, 2.4rem) min(2.0vw, 1.0rem);
    background: url("../img/bg_about_h2.png") center bottom / 100% auto no-repeat;
}

.acupuncture main section ul {
    margin: 2.4rem 0;
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

/* 醫 */
.acupuncture section em {
    font-size: 200%;
    font-weight: 500;
    font-style: normal;
}

.acupuncture section #photo {
    margin-top: min(10.0vw, 4.0rem);
}

/* 写真 */
.acupuncture section figure {
    display: grid;
    place-content: center;
    max-width: 36.0rem;
    margin: 0 auto;
    padding: min(2.0vw, 0.6rem);
    border-radius: min(5.0vw, 3.0rem);
    background-image: linear-gradient(150deg, rgba(50, 15, 0, 1.00) 0, rgba(95, 5, 0, 1.00) 10%, rgba(230, 190, 70, 1.00) 40%, rgba(255, 245, 180, 1.00) 50%, rgba(245, 200, 80, 1.00) 60%, rgba(95, 5, 0, 1.00) 90%, rgba(50, 15, 0, 1.00) 100%);
    overflow: hidden;
}

.acupuncture section figure img {
    border-radius: min(4.0vw, 2.4rem);
    object-fit: cover;
}

.acupuncture section #photo > div[class^="col"]:nth-of-type(n+2) {
    margin-top: 1.0rem;
}

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

    body.acupuncture section h2 {
        padding: min(4.0vw, 2.4rem) min(2.0vw, 1.0rem);
        font-size: min(5.0vw, 2.8rem);
    }

}

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

    body.acupuncture section h2 {
        padding: min(6.0vw, 3.0rem);
    }

    .acupuncture section #photo > div[class^="col"]:nth-of-type(n+2) {
        margin-top: 0;
    }

    .acupuncture section figure {
        max-width: 100%;
        margin: 0;
    }

}

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

    body.acupuncture section h2 {
        padding: min(4.6vw, 4.0rem) min(2.0vw, 1.0rem);
    }

}


/* ========================================================

　.facial-aesthetic

=========================================================== */

body.facial-aesthetic section h2 {
    margin-bottom: min(8.0vw, 5.0rem);
    padding: min(4.0vw, 2.4rem) min(2.0vw, 1.0rem);
    background: url("../img/bg_about_h2.png") center bottom / 100% auto no-repeat;
}

.facial-aesthetic main section ul {
    margin: 2.4rem 0;
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

/* 段落の余白 */
.facial-aesthetic section p:nth-of-type(n+2) {
    margin-top: min(6.0vw, 2.4rem);
}

/* 金額 */
.facial-aesthetic section em {
    font-size: 110%;
    font-weight: 700;
    font-style: normal;
}

/* 写真 */
.facial-aesthetic section figure {
    display: grid;
    place-content: center;
    max-width: 36.0rem;
    margin: 1.0rem auto 0;
    padding: min(1.5vw, 0.6rem);
    border-radius: min(5.0vw, 3.0rem);
    background-image: linear-gradient(150deg, rgba(50, 15, 0, 1.00) 0, rgba(95, 5, 0, 1.00) 10%, rgba(230, 190, 70, 1.00) 40%, rgba(255, 245, 180, 1.00) 50%, rgba(245, 200, 80, 1.00) 60%, rgba(95, 5, 0, 1.00) 90%, rgba(50, 15, 0, 1.00) 100%);
    overflow: hidden;
}

.facial-aesthetic section figure:last-of-type {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.facial-aesthetic section img {
    border-radius: min(4.0vw, 2.4rem);
    object-fit: cover;
}

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

    body.facial-aesthetic section h2 {
        padding: min(4.0vw, 2.4rem) min(2.0vw, 1.0rem);
        font-size: min(5.0vw, 2.8rem);
    }

}

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

    body.facial-aesthetic section h2 {
        padding: min(6.0vw, 3.0rem);
    }

    .facial-aesthetic section figure {
        float: right;
        max-width: 24.0rem;
        margin: 1.0rem 0 1.0rem 2.0rem;
    }

}

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

    body.facial-aesthetic section h2 {
        padding: min(4.6vw, 4.0rem) min(2.0vw, 1.0rem);
    }

    .facial-aesthetic section figure {
        max-width: min(24.0vw, 30.0rem);
    }

}


/* ========================================================

　.want-a-baby

=========================================================== */

.want-a-baby main section ul {
    margin: 2.4rem 0;
    color: rgba(235, 95, 0, 1.00);
    font-weight: 500;
}

/* 段落の余白 */
.want-a-baby section p:nth-of-type(n+2) {
    margin-top: min(6.0vw, 2.4rem);
}

/* ART */
.want-a-baby section em {
    font-weight: 500;
    font-style: normal;
}

/* 写真 */
.want-a-baby section figure {
    display: grid;
    place-content: center;
    max-width: 36.0rem;
    margin: 1.0rem auto 0;
    padding: min(1.5vw, 0.6rem);
    border-radius: min(5.0vw, 3.0rem);
    background-image: linear-gradient(150deg, rgba(50, 15, 0, 1.00) 0, rgba(95, 5, 0, 1.00) 10%, rgba(230, 190, 70, 1.00) 40%, rgba(255, 245, 180, 1.00) 50%, rgba(245, 200, 80, 1.00) 60%, rgba(95, 5, 0, 1.00) 90%, rgba(50, 15, 0, 1.00) 100%);
    overflow: hidden;
}

.want-a-baby section figure:last-of-type {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.want-a-baby section img {
    border-radius: min(4.0vw, 2.4rem);
    object-fit: cover;
}

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

    .want-a-baby section figure {
        float: right;
        max-width: 24.0rem;
        margin: 1.0rem 0 1.0rem 2.0rem;
    }

}

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

    .want-a-baby section figure {
        max-width: min(24.0vw, 30.0rem);
    }

}


/* ========================================================

　.chinese-medicine

=========================================================== */

/* 段落の余白 */
.chinese-medicine section p:nth-of-type(n+2) {
    margin-top: min(6.0vw, 2.4rem);
}

/* 漢方薬　/ OTC薬 */
.chinese-medicine section em {
    font-weight: 500;
    font-style: normal;
}

/* 写真 */
.chinese-medicine section figure {
    display: grid;
    place-content: center;
    max-width: 36.0rem;
    margin: 1.0rem auto 0;
    padding: min(1.5vw, 0.6rem);
    border-radius: min(5.0vw, 3.0rem);
    background-image: linear-gradient(150deg, rgba(50, 15, 0, 1.00) 0, rgba(95, 5, 0, 1.00) 10%, rgba(230, 190, 70, 1.00) 40%, rgba(255, 245, 180, 1.00) 50%, rgba(245, 200, 80, 1.00) 60%, rgba(95, 5, 0, 1.00) 90%, rgba(50, 15, 0, 1.00) 100%);
    overflow: hidden;
}

.chinese-medicine section figure:last-of-type {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.chinese-medicine section img {
    border-radius: min(4.0vw, 2.4rem);
    object-fit: cover;
}

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

    .chinese-medicine section figure {
        float: right;
        max-width: 24.0rem;
        margin: 1.0rem 0 1.0rem 2.0rem;
    }

}

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

    .chinese-medicine section figure {
        max-width: min(24.0vw, 30.0rem);
    }

}


/* ========================================================

　.recruit

=========================================================== */

.recruit section h5 {
    color: rgba(240, 155, 195, 1.00);
    font-size: min(5.4vw, 2.4rem);
    font-weight: 500;
    line-height: 140%;
}


/* ========================================================

　.calender

=========================================================== */

/* h3 から始まるので位置調整 */
.calender section h3:first-of-type {
    margin-top: 0;
}

/* カレンダーの見方 */
.calender section .note {
    padding: min(5.0vw, 2.0rem) min(6.0vw, 3.0rem);
    border-radius: 1.0rem;
    background: url("../img/background_texture01_note.png") left top repeat;
}

.calender section .note em {
    font-weight: 500;
    font-style: normal;
}

.calender section .note span {
    display: block;
    margin-left: 1.6rem;
    line-height: 160%;
}

/* Googleカレンダー */
.calender section .table-responsive-md {
    margin: min(10.0vw, 4.0rem) 0;
}

.calender section iframe {
    width: 80.0rem;
    height: 50.0rem;
}

/* ご予約はこちらから */
.calender section #reservation {
    text-align: center;
}

.calender section #reservation .note {
    padding: min(5.0vw, 4.0rem) min(6.0vw, 3.0rem);
}

.calender #reservation .note p {
    margin-bottom: 1.0rem;
    font-size: min(6.0vw, 2.4rem);
    font-weight: 500;
    line-height: 100%;
}

.calender #reservation a {
    margin: 0 auto;
    padding: 0;
}

.calender #reservation img {
    max-width: 20.0rem;
    height: auto;
    margin: 0 auto;
    transition: transform 0.3s ease-in-out;
}

.calender #reservation img[src*="M_ywj5871x_GW"] {
    margin-top: 2.0rem;
}

.calender #reservation .note .row .row > div p {
    margin-top: 3.0rem;
}

.calender #reservation .note .row .row > div a {
    padding: 0.5rem 0.5rem 1.0rem;
    font-family: "Noto Serif JP";
    font-size: min(5.4vw, 2.4rem);
}

.calender #reservation .note .row .row > div i {
    position: relative;
    top: 0.2rem;
    margin-right: 0.5rem;
    font-size: min(5.4vw, 2.4rem);
}

.calender #reservation .note .row .row > div:last-of-type a {
    font-family: Georgia, "Times New Roman", Times, "serif";
    font-size: min(8.0vw, 3.6rem);
    font-weight: bold;
    letter-spacing: 0.2rem;
}

.calender #reservation .note .row .row > div:last-of-type i {
    position: relative;
    top: 0.3rem;
    margin-right: 0.5rem;
    font-size: min(7.0vw, 3.6rem);
}

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

    .calender section h3 + .note p:last-of-type {
        display: none;
    }

    .calender section iframe {
        width: 100%;
        height: 70.0rem;
    }

    .calender #reservation .note .row .row > div:first-of-type p {
        margin-top: 0;
    }

    .calender #reservation .note .row .row > div:last-of-type p {
        margin-top: 6.0rem;
    }

    .calender #reservation .note .row .row > div a {
        font-size: min(5.4vw, 1.8rem);
    }

    .calender #reservation .note .row .row > div i {
        font-size: min(5.4vw, 1.8rem);
    }

    .calender #reservation .note .row .row > div:last-of-type a {
        font-size: min(8.0vw, 3.0rem);
    }

    .calender #reservation .note .row .row > div:last-of-type i {
        top: 0.4rem;
        font-size: min(7.0vw, 3.0rem);
    }

}

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

    .calender #reservation a:hover img {
        transform: scale(1.05);
    }

    .calender #reservation .note .row .row > div a {
        font-size: min(5.4vw, 2.4rem);
    }

    .calender #reservation .note .row .row > div i {
        top: 0.3rem;
        margin-right: 0.75rem;
        font-size: min(5.4vw, 2.4rem);
    }

    .calender #reservation .note .row .row > div:last-of-type a {
        font-size: min(8.0vw, 3.6rem);
    }

    .calender #reservation .note .row .row > div:last-of-type i {
        margin-right: 1.00rem;
        font-size: min(7.0vw, 3.6rem);
    }

}


/* ========================================================

　.low

=========================================================== */

body.low section dt {
    display: block;
    background-color: rgba(204, 204, 204, 0.25);
    color: rgba(51, 51, 51, 1.00);
    line-height: 140%;
}

.low section dd {
    line-height: 160%;
}

.low section dd span {
    display: block;
}

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

    .low section dd span {
        display: inline;
    }

}

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

    /* 横並びに */
    .low section dl {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .low section dt,
    .low section dd {
        padding: min(3.0vw, 1.5rem) min(3.0vw, 2.0rem);
    }

    .low section dt:nth-of-type(n+2),
    .low section dd:nth-of-type(n+2) {
        margin-top: 1.0rem;
    }

    .low section dt {
        width: 36.0%;
        line-height: 100%;
    }

    .low section dd {
        width: calc(100% - 36.0% - 3.0rem);
        margin: 0 0 0 3.0rem;
    }

}


/* ========================================================

　.privacy-policy

=========================================================== */

/* 上下のボックス */
.privacy-policy section .note {
    padding: min(5.0vw, 2.0rem) min(6.0vw, 3.0rem);
    border-radius: 1.0rem;
    background: url("../img/background_texture01_note.png") left top repeat;
}

.privacy-policy section .note em {
    display: block;
    font-weight: 500;
    font-style: normal;
}

.privacy-policy section .note span {
    display: block;
}

.privacy-policy section dl {
    margin: min(10.0vw, 4.0rem) 0;
}

body.privacy-policy section dt {
    display: block;
    background-color: rgba(204, 204, 204, 0.25);
    color: rgba(51, 51, 51, 1.00);
    line-height: 140%;
}

.privacy-policy section dd {
    line-height: 160%;
}

.privacy-policy section dd ul {
    margin: 1.0rem 0 0 3.2rem;
    list-style: disc;
}

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

    .privacy-policy section .note span {
        display: inline;
    }

}


/* ========================================================

　.contact

=========================================================== */

.contact section .note {
    padding: min(5.0vw, 2.0rem) min(6.0vw, 3.0rem);
    border-radius: 1.0rem;
    background: url("../img/background_texture01_note.png") left top repeat;
}

.contact section .note span {
    display: block;
}

.contact section .note a {
    font-size: min(8.0vw, 2.0rem);
    font-weight: 500;
}

.contact section .note i {
    position: relative;
    margin-right: 0.25rem;
}

/* form */
.contact #mailformpro dl {
    margin-top: min(10.0vw, 5.0rem);
}

/* 必須 */
.contact #mailformpro dt .must {
    float: right;
    padding: 0.5rem 1.0rem;
    background-color: rgba(245, 150, 0, 1.00);
    border-radius: 0.4rem;
    color: rgba(255, 255, 255, 1.00);
    font-size: 1.2rem;
    line-height: 1.4rem;
}

/* 各項目 */
.contact #mailformpro input:not(.check),
.contact #mailformpro textarea,
.contact #mailformpro select {
    width: 100% !important;
    height: 4.0rem;
    padding-left: 1.0rem;
    padding-right: 1.0rem;
    border-radius: 0.6rem;
    border: 0.1rem solid rgba(204, 204, 204, 1.00);
    color: rgba(0, 0, 0, 1.00);
    font-size: 1.6rem;
    outline: none;
    transition: all 0.3s ease-in-out;
}

.contact #mailformpro textarea {
    height: 20.0rem !important;
    padding-top: 1.0rem;
}

.contact #mailformpro .sex label {
    display: inline-block;
}

.contact #mailformpro input:not(.check):focus,
.contact #mailformpro textarea:focus {
    border: 0.1rem solid rgba(140, 200, 65, 0.70);
    background-color: rgba(140, 200, 65, 0.05);
}

.contact #mailformpro input.check {
    position: relative;
    top: -0.1rem;
    width: 2.0rem;
    height: 2.0rem;
}

/* 送信前チェック */
.contact #mailformpro .lastCheck p {
    margin-bottom: 1.0rem;
}

.contact #mailformpro label {
    display: block;
    font-size: min(4.15vw, 1.6rem);
}

.contact #mailformpro label:last-of-type {
    margin-top: 1.5rem;
}

.contact #mailformpro label input.check {
    position: relative;
    top: 0.2rem;
}

.contact #mailformpro label.mfp_not_checked,
.contact #mailformpro label.mfp_checked {
    border: none;
    background: none;
}

.contact #mailformpro label.mfp_checked {
    color: rgba(235, 95, 0, 1.00);
}

/* エラー表示 */
div.mfp_err {
    display: none;
    margin: 0.5rem 0 0 0;
    padding: 0;
    background: none;
    color: rgba(255, 0, 0, 1.00);
    font-size: 1.4rem;
    line-height: 100%;
}

div.mfp_err:before {
    position: relative;
    top: 0.4rem;
    margin-right: 0.5rem;
    font-family: 'bootstrap-icons';
    font-size: 1.8rem;
    content: "\f33a";
}

/* ボタン */
div.mfp_buttons {
    clear: both;
    display: grid;
    place-content: center;
    margin-top: 3.0rem;
}

div.mfp_buttons button {
    padding: 0;
    border: none;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

div.mfp_buttons button:first-of-type {
    width: 22.0rem;
    height: 6.0rem;
    margin-bottom: 2.0rem;
    background-color: rgba(0, 175, 240, 1.00);
    color: rgba(255, 255, 255, 1.00);
    font-size: 2.4rem !important;
}

div.mfp_buttons button:first-of-type:hover {
    background-color: rgba(0, 115, 170, 1.00);
}

div.mfp_buttons button:last-of-type {
    width: 100%;
    height: 3.0rem !important;
    background-color: transparent;
    color: rgba(160, 160, 160, 1.00);
    font-size: 1.6rem !important;
}

div.mfp_buttons button:last-of-type:hover {
    color: rgba(204, 0, 0, 1.00);
}

/* 確認画面 */
.contact table {
    font-size: 1.6rem !important;
}

.contact th {
    margin: 1.5rem;
}

.contact td {
    margin: 0 1.5rem 1.5rem;
}

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

    .contact section .note span {
        display: inline;
    }

}

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

    body.contact section dt {
        display: block;
        width: 40.0%;
    }

    body.contact section dd {
        width: calc(100% - 40.0% - 3.0rem);
    }

}

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

    .contact #mailformpro label input.check {
        top: 0.4rem;
    }

}

/*　Placeholder color */
*::placeholder {
    opacity: 0.8;
    transition: opacity 0.3s ease-in-out;
}

/*　Pseudo-hide placeholders when in focus */
*:focus::placeholder {
    opacity: 0;
}

/*　送信完了
/*-------------------------------------------*/
body.thanks section h2 {
    font-size: min(6.0vw, 2.8rem);
    text-align: center;
    line-height: 140%;
}

.thanks section h2 span {
    display: block;
}

.thanks section .note {
    display: grid;
    place-content: center;
    margin-bottom: min(6.0vw, 3.0rem);
    padding: min(5.0vw, 2.0rem) min(6.0vw, 3.0rem);
    border-radius: 1.0rem;
    background: url("../img/background_texture01.png") left top repeat;
}

.thanks section #mfp_thanks {
    font-size: min(5.0vw, 2.0rem);
    text-align: center;
}

.thanks section #mfp_thanks span {
    display: block;
    margin: min(3.0vw, 2.0rem) 0;
    color: rgba(235, 95, 0, 1.00);
    font-size: min(10.0vw, 3.6rem);
    font-weight: 500;
}

/* メールが届いていない場合 */
.thanks main section ul {
    margin: 2.4rem 0 2.4rem 3.2rem;
    color: rgba(235, 0, 0, 1.00);
    list-style: disc;
}

.thanks section i {
    position: relative;
    top: 0.2rem;
}

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

    body.thanks section h2 {
        line-height: 100%;
    }

    .thanks section h2 span {
        display: inline;
    }

    .thanks section #mfp_thanks {
        line-height: 200%;
    }

    .thanks section #mfp_thanks span {
        display: inline-block;
        position: relative;
        top: 0.4rem;
        margin: 0 1.0rem;
    }

}

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

    body.thanks section h2 {
        font-size: min(6.0vw, 3.0rem);
    }

}



/* break point -----------------------------------------------
	<576px , >=576px , =>768px , =>992px , =>1200px
	iPhone5 320x568
	iPhone6-8 375x667 *
	iPhone6-8Plus 414x736
	iPhoneX 375x812
	iPad（iPad Mini）768x1024 *
	iPadPro 1024x1366
	Pixel2 411x731
	Pixel2 XL 411x823
	PC lg 992 *
	PC xl 1200 *
-------------------------------------------------------------- */
/* branc -----------------------------------------------------
	1-0.25rem
	2-0.5rem
	3-1.0rem
	4-1.5rem
	5-3.0rem
-------------------------------------------------------------- */


/* ---- End of file ------------------------------------------ */