:root {
    --color1: #1c1c1c;
    --color2: #f0f0f0;
    --color3: #6E6E6E;
    --color4: #2B1C15;

}

html {
    scroll-behavior: smooth;
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none;
}

::selection {
    background-color: var(--color3);
    color: var(--color2);
}

/*Google Chrome、Safariへの対応*/
html::-webkit-scrollbar {
    display: none;
}

body {
    font-feature-settings: "palt";
    font-weight: 400;
    font-style: normal;
    font-family: "Oleo Script",
        system-ui, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS Ｐゴシック", sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
    color: var(--color2);
}

img {
    /* PCの右クリック禁止 */
    pointer-events: none;
    /* SPの長押し禁止 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
    object-fit: cover;
    width: 200px;
}

h1 {
    font-size: 50px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 22px;
}

h4 {
    font-size: 10px;
}

ul {
    display: flex;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--color2);
}

p {
    text-align: justify;
}

.inner {
    width: 69%;
    margin: 0 auto;
}

.title {
    width: auto;
    margin: 0 auto;
}

.title div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title div span {
    display: block;
    width: 80px;
    height: 2px;
    background-color: var(--color2);
}

.title div h1,
.title div h2 {
    margin: 0 40px;
}

.title h4 {
    text-align: center;
    font-size: 13px;
}

.bg-b {
    width: 100%;
    background-color: var(--color1);
}

/* -----スクロール------ */

/*Scrollテキストの描写*/
.scrolldown2 span {
    /*描画位置*/
    position: absolute;
    left: 10px;
    bottom: 7px;
    /*テキストの形状*/
    color: var(--color2);
    font-size: 1rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: -4px;
    /*丸の形状*/
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color2);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
        circlemove 1.6s ease-in-out infinite,
        cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
    0% {
        bottom: 45px;
    }

    100% {
        bottom: -5px;
    }
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
    }
}

/* 線の描写 */
.scrolldown2:after {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    left: 0;
    /*線の形状*/
    width: 2px;
    height: 50px;
    background: var(--color2);
}

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

/* ---スライダー--- */
@keyframes infinity-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.scroll-infinity {
    margin-top: 50px;
}

.scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
}

.scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0
}

.scroll-infinity__list--left {
    animation: infinity-scroll-left 25s infinite linear 0.5s both;
}

.scroll-infinity__item {
    width: calc(100vw / 4);
    height: 430px;
}

.scroll-infinity__item>img {
    width: 90%;
    height: 100%;
    object-fit: fill;
}

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

/* --------回転ボタン-------- */
/*== ボタン共通設定 */
.btn02 {
    /*背景の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    width: 100%;
    max-width: 450px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    outline: none;
    top: -20px;
}

/*ボタン内側の設定*/
.btn02 span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color1);
    /* 重なりを3Dで表示 */
    transform-style: preserve-3d;
    /* アニメーションの設定 数字が少なくなるほど早く回転 */
    transition: 0.5s;
}

/*== くるっと回転（奥に） */

/* 回転前 */
.rotateback span:nth-child(1) {
    background: var(--color1);
    color: var(--color2);
    transform: rotateX(0deg);
    border: 1px solid var(--color2);
    /*はじめは回転なし*/
    transform-origin: 0 50% -25px;
    /* 回転する起点 */
}

@media (any-hover: hover) and (pointer: fine) {

    /*hoverをした後の形状*/
    .rotateback:hover span:nth-child(1) {
        transform: rotateX(90deg);
        /* X軸に90度回転 */
    }
}

/* 回転後 */
.rotateback span:nth-child(2) {
    background: var(--color2);
    color: var(--color1);
    transform: rotateX(-90deg);
    /*はじめはX軸に-90度回転*/
    transform-origin: 0 50% -25px;
    /* 回転する起点 */
}

@media (any-hover: hover) and (pointer: fine) {

    /*hoverをした後の形状*/
    .rotateback:hover span:nth-child(2) {
        transform: rotateX(0deg);
        /* X軸に0度回転 */
    }
}

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

#container {
    display: flex;
    height: 100%;
}

/* ----------header---------- */
header {
    width: 12%;
    background-color: var(--color4);
    position: relative;
    z-index: 99;
}

#header {
    position: fixed;
    width: 12%;
    height: 100%;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--color2) var(--color4);
}

header a:first-child {
    display: block;
    width: 85%;
    margin: 0 auto;
}

header a:first-child img {
    width: 100%;
    padding-top: 15px;
}

nav {
    display: block;
    width: auto;
    margin: 50px auto 0;
}

nav ul {
    display: flex;
    flex-direction: column;
    text-align: center;
}

nav ul li a {
    transition: .3s all;
}

@media (any-hover: hover) and (pointer: fine) {
    nav ul li a:any-link:hover {
        transform: scale(1.2);
    }

    .fa-instagram:hover {
        color: #F60056;
    }

    .fa-square-facebook:hover {
        color: #4064AC;
    }

    .fa-x-twitter:hover {
        color: #1C9BEA;
    }

    nav+div a:hover {
        border-radius: 50%;
    }
}

nav ul li+li {
    margin-top: 40px;
}

nav+div {
    width: 100%;
    margin-block: 50px;
}

nav+div a {
    width: 100%;
    margin: 100px auto 0;
    padding: 10px 15px;
    background-color: var(--color2);
    color: var(--color4);
    text-align: center;
    transition: .3s all;
}


#sns {
    width: 90%;
    display: flex;
    margin: 100px auto 0;
    padding-inline: 10px;
    justify-content: space-between;
}

#sns a {
    width: fit-content;
    margin: 0;
}

.fa-instagram,
.fa-square-facebook,
.fa-x-twitter {
    font-size: 40px;
}

.tb-reservation {
    display: none;
}

/* -------------------------- */
/* ----------footer---------- */
footer {
    width: 100%;
    background-color: var(--color1);
    padding-top: 20px;
    padding-bottom: 50px;
    font-family: "ヒラギノ角ゴ ProN W3";
}

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

#footer-left,
#footer-right {
    margin-top: 100px;
}

#footer-left p,
#footer-left a {
    font-size: 16px;
}

#footer-left p+p {
    margin-top: 15px;
}

#footer-left a {
    display: block;
    margin-top: 100px;
    text-decoration: underline;
    opacity: .5;
    transition: .5s all;
}

@media (any-hover: hover) and (pointer: fine) {
    #footer-left a:any-link:hover {
        opacity: 1;
    }
}

#footer-center {
    width: 30%;
}

#footer-center img {
    width: 100%;
}

#footer-right h5 {
    font-size: 24px;
}

#sns-icon {
    margin-top: 30px;
}

#sns-icon a+a {
    margin-left: 5px;
}

#sns-icon .fa-instagram,
#sns-icon .fa-square-facebook,
#sns-icon .fa-x-twitter {
    font-size: 40px;
}

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

/* ===============index.html================ */

/* ----------main---------- */
main {
    width: 88%;
    height: 100%;
}

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

/* -----------top------------ */
#top {
    width: 100%;
    height: auto;
    background-image: url(images/top.jpg);
    background-size: cover;
    position: relative;
}

#top-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 350px;
    padding-bottom: 450px;
}

#top-title h1 {
    font-size: 70px;
}

#reservation {
    display: block;
    width: 13%;
    padding: 10px 15px;
    /* background-color: var(--color2); */
    color: var(--color1);
    text-align: center;
    position: absolute;
    top: 80%;
    right: 15px;
}

#top a:last-child {
    display: flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--color2);
    align-items: center;
    justify-content: center;
    position: absolute;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
}

#page-top {
    position: relative;
    z-index: 99;
}

.fa-chevron-up {
    font-size: 25px;
    color: var(--color1);
    transition: .2s all;
}

@media (any-hover: hover) and (pointer: fine) {
    #page-top:any-link:hover {
        font-size: 30px;
    }
}

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

/* -----------about---------- */
#about {
    width: 100%;
    background-color: var(--color1);
    position: relative;
}



#about>p {
    width: fit-content;
    margin: 0 auto;
}

#about-title+p {
    font-size: 32px;
    margin-top: 110px;
}

#about p:nth-child(3) {
    width: fit-content;
    display: block;
    margin: 150px auto 0;
    padding: 5px 100px;
    font-size: 32px;
    color: var(--color1);
    background-color: var(--color2);
}

#trouble {
    width: fit-content;
    margin: 100px auto 0;
    font-size: 24px;
}

#trouble p:last-child {
    margin-top: 50px;
}

#about p img {
    width: 35px;
}

#about h3 {
    margin-top: 120px;
    font-size: 48px;
    text-align: center;
    position: relative;
    z-index: 10;
}

#scroll1 {
    position: absolute;
    top: 80%;
    left: 50px;
}

#decoration1 {
    position: absolute;
    right: 50px;
    bottom: -100px;
    rotate: 250deg;
    scale: 4;
    opacity: .4;
}

/* -------------------------- */
/* --------menu&price-------- */
#menu-price {
    background-color: var(--color1);
}

#menu-price-title {
    position: relative;
    margin-top: 200px;
    z-index: 10;
}

#menu {
    display: flex;
    margin-top: 150px;
    justify-content: space-between;
}

.menu-unit {
    width: 30%;
}

.menu-unit div {
    width: 100%;
}

.menu-unit img {
    width: 100%;
    aspect-ratio: 1;
    box-shadow: 5px 5px 10px 0px var(--color3);
}

.menu-unit h4 {
    font-size: 40px;
    text-align: center;
    margin: 10px 0 30px;
}

.menu-unit p {
    display: block;
    width: 80%;
    margin: 0 auto;
    font-size: 16px;
}

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

/* ----------price---------- */
#price {
    display: flex;
    margin-top: 150px;
    position: relative;
}

#price-left {
    width: 70%;
    margin-top: 150px;
    padding: 70px 200px 70px 30px;
    background-color: var(--color2);
    color: var(--color1);
}

.price-left-unit {
    width: 60%;
    margin-left: 50px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--color1);
}

.price-left-unit+p {
    margin-left: 50px;

}

.price-left-unit:nth-child(5) {
    width: 75%;
}

.price-left-unit~.price-left-unit {
    margin-top: 60px;
}

.price-left-unit div {
    display: flex;
}

.price-left-unit div h5+span {
    margin-left: 10px;
}

.price-left-unit h5 {
    font-size: 24px;
}

.price-left-unit span {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.price-left-unit div+div span+p {
    font-size: 24px;
    margin-left: 5px;
}

#maintenance {
    display: flex;
    margin-top: 90px;
}

#maintenance h4 {
    font-size: 24px;
}

#maintenance span {
    display: flex;
    align-items: center;
    margin-left: 10px;
}

.off-title {
    margin: 45px 0 10px 50px;
    font-size: 20px;
}

.off-title+.off-title {
    margin-top: 20px;
}

.off-title~div {
    display: flex;
    margin-left: 70px;
}

.off-title~div span,
.off-title~div i {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.off-title~div i {
    margin-inline: 20px;
}

.off-title~div p {
    font-size: 24px;
    margin-left: 5px;
}

.off-title~div p:last-child {
    color: #CD0000;
}

#price-right {
    width: 40%;
    position: absolute;
    top: 200px;
    right: 100px;
}

#price-right img {
    width: 100%;
    box-shadow: 5px 5px 10px 0px var(--color3);
}

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

/* ----------staff---------- */
#staff {
    width: 100%;
    margin-top: 200px;
    background-color: var(--color1);
    position: relative;
}

#staff-main {
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
}

.staff-unit {
    width: 30%;
    box-sizing: border-box;
}

.staff-unit-top {
    display: flex;
}

.staff-unit-top img {
    width: 50%;
}

.staff-unit-top h5 {
    display: flex;
    align-items: end;
    font-size: 32px;
    margin-left: 10px;
}

.staff-unit p {
    margin-top: 10px;
}

#scroll2 {
    position: absolute;
    top: 110%;
    left: 50px;
}

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

/* --------cut example------- */
#cut-example {
    width: 100%;
    margin-top: 200px;
    background-color: var(--color1);
    text-align: center;
    position: relative;
}

#cut-example-main {
    width: fit-content;
    display: flex;
    margin: 150px auto 0;
}

#cut-example-left {
    width: 30%;
}

#cut-example-left img,
#cut-example-right img {
    width: 100%;
    position: relative;
    z-index: 10;
}

#cut-example-right {
    width: 60%;
    margin-left: 30px;
}

#decoration2 {
    position: absolute;
    left: 80px;
    scale: 3;
    opacity: .6;
}


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

/* -----------review--------- */
#review {
    width: 100%;
    margin-top: 200px;
    background-color: var(--color1);
}

.scroll-infinity {
    margin-top: 150px;
    padding-bottom: 200px;
}

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

/* -------service flow------- */
#service-flow {
    width: 100%;
    background-color: var(--color1);
    position: relative;
}

#service-flow-main {
    width: 80%;
    display: flex;
    margin: 150px auto 0;
    justify-content: space-between;
}

.service-flow-unit {
    width: 40%;
    padding-bottom: 100px;
}

.service-flow-unit span {
    display: block;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 50px;
    color: var(--color1);
    background-color: var(--color3);
    z-index: 2;
    translate: 10px 0;
}

.service-flow-unit p {
    translate: 0 -40px;
}

.service-flow-unit div {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--color2);
    text-align: center;
    translate: 0 -60px;
}

.service-flow-unit div img {
    width: 40%;
    padding-top: 60px;
}

.service-flow-unit:last-child div img {
    width: 50%;
    padding-top: 40px;
}

.service-flow-unit div h5 {
    font-size: 30px;
    color: var(--color1);
}

.fa-chevron-right {
    font-size: 50px;
    color: var(--color3);
    translate: 0 150px;
}

#scroll3 {
    position: absolute;
    top: 40%;
    left: 50px;
}

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

/* -----------area----------- */
#area {
    width: 100%;
    padding-top: 100px;
}

#area .inner {
    width: 80%;
}

#area-title div h1,
#area-title h4,
#passable,
#not-passable,
tbody {
    color: var(--color2);
}

#area-title div span {
    background-color: var(--color2);
}

#area-main {
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
    padding-bottom: 100px;
}

#area-left {
    width: 40%;
}

#passable {
    display: flex;
    align-items: center;
}

#passable span {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color1);
    background-color: var(--color3);
}

#passable p {
    margin-left: 20px;
}

#not-passable {
    display: flex;
    align-items: center;
}

#not-passable span {
    width: 20px;
    height: 20px;
    border: 1px solid var(--color1);
    background-color: var(--color2);
}

#not-passable p {
    margin-left: 20px;
}

#sorting {
    width: 30%;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color2);
}

#area-left img {
    width: 100%;
}

#area-right {
    width: 50%;
    margin-top: 100px;
}

#area-right table {
    border-collapse: collapse;
    position: relative;
    z-index: 3;
}

#area-right tbody {
    width: 100%;
    font-size: 23px;
}

#area-right tbody td {
    font-family: "ヒラギノ角ゴ ProN W3";
    padding-inline: 30px;
    padding-block: 10px;
    text-align: center;
}

#area-right tbody>tr td:nth-child(2),
#area-right tbody>tr td:nth-child(3),
#area-right tbody>tr+tr td:first-child {
    border: 1px solid var(--color1);
    background-color: var(--color3);
    color: var(--color2);
}

#area-right tbody>tr+tr td:first-child {
    text-orientation: upright;
}

#area-right tbody>tr td:nth-child(2),
#area-right tbody>tr td:nth-child(3) {
    width: 40%;
}

#area-right tbody>tr:nth-child(2) td:nth-child(2),
#area-right tbody>tr:nth-child(2) td:nth-child(3) {
    background-color: var(--color2);
    color: var(--color1);
}

/* -----------faq------------ */
#faq {
    width: 100%;
    padding-top: 100px;
    background-color: var(--color1);
    position: relative;
}

#faq .inner {
    width: 60%;
}

#faq-title {
    position: relative;
    z-index: 10;
}

#faq-main {
    margin-top: 150px;
}

#faq-main ul {
    display: flex;
    flex-direction: column;
}

#faq-main li {
    height: 150px;
    font-family: "ヒラギノ角ゴ ProN W3";
    display: flex;
    flex-direction: column;
    padding: 20px 30px;
    background-color: var(--color2);
    color: var(--color1);
}

#faq-main li+li {
    margin-top: 30px;
}

#faq-main li h3 {
    font-size: 20px;
}

#faq-main li h3::first-letter {
    font-family: "Oleo Script";
    font-size: 35px;
    font-weight: normal;
    margin-right: 10px;
}

#faq-main li p {
    margin-top: 10px;
    margin-left: 35px;
    font-size: 16px;
}

#decoration3 {
    position: absolute;
    top: -100px;
    right: 150px;
    scale: 4;
    opacity: .6;
}

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

/* --------hot pepper-------- */
#hot-pepper {
    width: 100%;
    padding-block: 100px;
}

#hot-pepper a {
    display: block;
    width: 40%;
    margin: 0 auto;
    padding: 20px 30px;
    text-align: center;
    font-size: 32px;
}

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

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

/* ================recruit.html=============== */
/* ----------recruit--------- */
.recruit-header {
    overflow-y: hidden;
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none !important;
}

.recruit-header::-webkit-scrollbar {
    display: none;
}

.recruit-header #sns {
    margin: 100px auto 0;
}

.recruit-header #sns a+a {
    margin-left: 10%;
}

#recruit {
    width: 100%;
    background-color: var(--color1);
}

#recruit div+p {
    width: fit-content;
    margin: 150px auto 0;
    font-size: 24px;
}

#recruit table {
    width: fit-content;
    margin: 100px auto 0;
    border-collapse: collapse;
}

#recruit tbody {
    font-family: "ヒラギノ角ゴ ProN W3";
    font-size: 16px;
    text-align: center;
    background-color: var(--color2);
}

#recruit tbody tr td {
    padding-inline: 50px;
    padding-block: 20px;
    border: 1px solid var(--color1);
    color: var(--color1);
}

.left {
    text-align: left;
}


#place td:first-child,
#employment td:first-child,
#salary td:first-child,
#times td:first-child,
#human td,
#required td:first-child {
    color: var(--color2) !important;
    background-color: var(--color3) !important;
}

#recruit h2 {
    width: 70%;
    margin: 150px auto 0;
    text-align: center;
    font-size: 32px;
    color: var(--color1);
    background-color: var(--color2);
}

#recruit h2+p {
    width: 80%;
    margin: 50px auto 0;
    font-size: 24px;
}

#recruit dl {
    font-family: "ヒラギノ角ゴ ProN W3";
    width: 70%;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    font-size: 24px;
}

#recruit p+dl {
    border-block: 1px solid var(--color2);
    margin-top: 150px;
}

#recruit dl+dl {
    border-bottom: 1px solid var(--color2);
}

#recruit dt {
    width: 30%;
}

#map {
    width: fit-content;
    margin: 100px auto 0;
    padding-bottom: 100px;
}

/* -------------------------- */
/* ----------contact--------- */
#contact {
    width: 100%;
    padding-top: 100px;
    color: var(--color1);
    background-color: var(--color2);
}

#contact-title div span {
    background-color: var(--color1);
}

#contact .inner {
    width: 50%;
}


/* +++++++++フォーム++++++++++ */
.row {
    margin-top: 150px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row .col {
    padding: 0 20px;
    float: left;
    box-sizing: border-box;
}

.row .col.x-50 {
    width: 50%;
}

.row .col.x-100 {
    width: 100%;
}

.content-wrapper {
    min-height: 100%;
    position: relative;
}

.get-in-touch {
    max-width: 650px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.get-in-touch .title {
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN W3";
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 36px;
    line-height: 48px;
    padding-bottom: 48px;
}

.contact-form .form-field {
    position: relative;
    margin: 32px 0;
    color: var(--color1);
}

.form-field input {
    border-bottom: 1px solid var(--color1);
}

.contact-form .input-text {
    display: block;
    width: 100%;
    height: 36px;
    border-width: 0 0 1px 0;
    border-color: var(--color1);
    font-family: "ヒラギノ角ゴ ProN W3";
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
}

.contact-form .input-text:focus {
    outline: none;
}

.contact-form .input-text:focus+.label,
.contact-form .input-text.not-empty+.label {
    transform: translateY(-24px);
}

.contact-form .label {
    position: absolute;
    left: 20px;
    bottom: 11px;
    font-family: "ヒラギノ角ゴ ProN W3";
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: var(--color3);
    cursor: text;
    transition: transform 0.2s ease-in-out;
}

.label {
    font-size: 13px !important;
}

.contact-form .submit-btn {
    display: inline-block;
    background-color: var(--color1);
    color: var(--color2);
    font-family: "ヒラギノ角ゴ ProN W3";
    letter-spacing: 2px;
    font-size: 16px;
    line-height: 24px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
}

.form-field:last-child {
    width: fit-content;
    margin: 0 auto 150px;
}

.note {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    text-align: center;
    font-family: "ヒラギノ角ゴ ProN W3";
    font-size: 16px;
    line-height: 21px;
}

.note .link {
    color: var(--color3);
    text-decoration: none;
}

.note .link:hover {
    text-decoration: underline;
}

/* ++++++++++++++++++++++++++ */
/* -------------------------- */
/* =========================================== */

/* ============privacy-policy.html============ */
.privacy-policy-header {
    overflow-y: hidden;
    /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
    -ms-overflow-style: none;
    /*Firefoxへの対応*/
    scrollbar-width: none !important;
}

.privacy-policy-header::-webkit-scrollbar {
    display: none;
}

#privacy-policy {
    width: 100%;
    color: var(--color2);
    background-color: var(--color1);
}

#privacy-policy ul {
    font-family: "ヒラギノ角ゴ ProN W3";
    display: flex;
    flex-direction: column;
    padding-block: 150px;
}

#privacy-policy li h2 {
    border-bottom: 1px solid var(--color2);
}

#privacy-policy li p {
    margin-top: 20px;
    letter-spacing: .2rem;
}

#privacy-policy li+li {
    margin-top: 100px;
}

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


/* ++++++++++++++++++++++++++++++++++++++++++++
                        PC
+++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width:1600px) {

    /* ----------price---------- */

    #price-left {
        width: 70%;
    }

    /* -------------------------- */
    /* ----------footer---------- */

    #footer-left a {
        margin-top: 50px;
    }

    /* ------------------------- */
}


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

    /* ----------header---------- */
    .fa-instagram,
    .fa-square-facebook,
    .fa-x-twitter {
        font-size: 40px;
    }

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

    /* ----------footer---------- */

    #footer-left,
    #footer-right {
        margin-top: 60px;
    }

    /* ------------------------- */
}

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

    h3 {
        font-size: 20px;
    }

    /* -------service flow------- */

    .service-flow-unit:last-child div img {
        width: 47%;
    }

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

    /* ================recruit.html=============== */
    /* ----------recruit--------- */
    .recruit-header {
        overflow-y: scroll;
        /*Firefoxへの対応*/
        scrollbar-width: thin !important;
    }

    .recruit-header::-webkit-scrollbar {
        display: block;
    }

    /* =========================================== */
}

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

    h3 {
        font-size: 18px;
    }

    h4 {
        font-size: 9px;
    }

    /* ----------price---------- */

    #price-left {
        width: 75%;
    }

    #price-right {
        width: 35%;
    }

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

    /* ----------staff---------- */

    .staff-unit-top h5 {
        font-size: 28px;
    }

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


    /* ----------faq---------- */

    #faq .inner {
        width: 66%;
    }

    /* ------------------------- */
}

/* ++++++++++++++++++++++++++++++++++++++++++++
                    タブレット
+++++++++++++++++++++++++++++++++++++++++++++++ */

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

    h3 {
        font-size: 17px;
    }

    /* ----------header---------- */


    #sns {
        width: fit-content;
        margin: 100px auto 0;
        flex-direction: column;
    }

    #sns a+a {
        margin-left: 0;
        margin-top: 20px;
    }


    .fa-instagram,
    .fa-square-facebook,
    .fa-x-twitter {
        font-size: 40px;
    }

    header a:first-child {
        width: 80%;
    }

    .pc-reservation {
        display: none;
    }

    .tb-reservation {
        display: block;
    }

    .tb-reservation {
        font-size: 60px;
    }

    /* ------------------------- */
    /* ----------footer---------- */
    #sns-icon .fa-instagram,
    #sns-icon .fa-square-facebook,
    #sns-icon .fa-x-twitter {
        font-size: 30px;
    }

    #footer-left p,
    #footer-left a {
        font-size: 14px;
    }

    /* ------------------------- */
    /* ----------about---------- */
    #about-title+p {
        font-size: 28px;
    }

    #decoration1 {
        scale: 2;
        right: 100px;
    }

    /* ------------------------- */
    /* ------------top---------- */
    #top a:last-child {
        width: 40px;
        height: 40px;
    }

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

    /* ------menu-price--------- */
    .menu-unit p {
        width: 100%;
    }

    /* ------------------------- */
    /* ----------price---------- */
    #price-left {
        width: 94%;
    }

    /* ------------------------- */
    /* ----------staff---------- */
    .staff-unit-top h5 {
        font-size: 20px;
    }

    /* ------------------------- */
    /* ----------review---------- */
    .scroll-infinity__item {
        width: calc(100vw / 3);
    }

    /* ------------------------- */
    /* -------service flow------- */
    #service-flow .inner {
        width: 80%;
    }

    .service-flow-unit span {
        width: 50px;
        height: 50px;
        font-size: 32px;
        translate: 0 0;
    }


    .service-flow-unit div {
        translate: 0 -50px;
    }

    .service-flow-unit:last-child div img {
        width: 40%;
    }

    .service-flow-unit div h5 {
        font-size: 25px;
    }

    .service-flow-unit p {
        translate: 0 -25px;
    }

    .fa-chevron-right {
        translate: 0 80px;
    }

    /* ------------------------- */
    /* -------area------- */


    #area-main {
        flex-direction: column;
    }

    #area-left {
        width: 65%;
        margin: 0 auto;
    }

    #area-right {
        width: 65%;
        margin: 100px auto;
    }


    #area-right tbody td {
        padding-inline: 20px;
        padding-block: 10px;
    }

    #sorting {
        width: 40%;
    }



    /* ------------------------- */
    /* -------faq------- */
    #faq .inner {
        width: 83%;
    }

    #decoration3 {
        scale: 2;
        right: 50px;
    }

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

    /* ================recruit.html=============== */
    /* ----------recruit--------- */
    #recruit .inner {
        width: 82%;
    }

    .recruit-header #sns a+a {
        margin-left: 0;
    }

    #map iframe {
        width: 700px;
        height: 300px;
    }

    /* ------------------------- */
    /* ----------contact--------- */
    #contact .inner {
        width: 65%;
    }

    /* -------------------------- */
    /* =========================================== */

    /* ============privacy-policy.html============ */
    .privacy-policy-header #sns {
        translate: 0 0;
    }

    /* =========================================== */
}

@media screen and (max-width:834px) {
    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 12px;
    }

    h4 {
        font-size: 9px;
    }

    /* ----------header---------- */
    .fa-instagram,
    .fa-square-facebook,
    .fa-x-twitter {
        font-size: 30px;
    }

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

    /* ----------footer---------- */
    #footer-left,
    #footer-right {
        margin-top: 35px;
    }

    #footer-left p,
    #footer-left a {
        font-size: 13px;
    }

    #footer-left a {
        margin-top: 30px;
    }

    #footer-right h5 {
        font-size: 20px;
    }

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

    /* ===============index.html================*/
    /* -----------top------------ */

    #top {
        height: 5%;
    }

    #top-title {
        padding-top: 270px;
    }

    .title div span {
        width: 60px;
    }

    .title div h2 {
        margin: 0 35px;
    }

    #top-title h1 {
        font-size: 50px;
    }

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

    /* -----------about---------- */
    #about-title+p {
        font-size: 20px;
    }

    #about p:nth-child(3) {
        margin: 100px auto 0;
        font-size: 25px;
    }

    #trouble {
        margin: 50px auto 0;
        font-size: 16px;
    }

    #about h3 {
        margin-top: 80px;
        font-size: 35px;
    }

    #decoration1 {
        scale: 1.5;
    }

    /* -------------------------- */
    /* --------menu&price-------- */
    #menu-price .inner {
        width: 90%;
    }

    .menu-unit h4 {
        font-size: 28px;
    }

    /* -------------------------- */
    /* ----------price---------- */
    #price {
        margin-top: 30px;
    }

    #price-left {
        padding: 70px 100px 70px 30px;
    }

    .price-left-unit h5 {
        font-size: 20px;
    }

    #maintenance {
        flex-direction: column;
    }

    #price-right {
        width: 30%;
        top: 170px;
        right: 20px;
    }

    /* -------------------------- */
    /* -----------staff---------- */
    #staff .inner {
        width: 85%;
    }

    .staff-unit-top img {
        width: 55%;
    }

    #scroll2 {
        top: 125%;
    }

    /* -------------------------- */
    /* --------cut example------- */
    #cut-example .inner {
        width: 80%;
    }

    #decoration2 {
        scale: 2;
        left: 20px;
    }

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

    /* -------service flow------- */
    .service-flow-unit div img {
        padding-top: 35px;
    }

    .service-flow-unit:last-child div img {
        padding-top: 35px;
    }

    /* -------------------------- */
    /* ------------area---------- */
    #area-right {
        width: 72%;
    }

    /* -------------------------- */
    /* ------------faq----------- */
    #faq-main li h3 {
        font-size: 16px;
    }

    #faq-main li p {
        font-size: 14px;
    }

    #decoration3 {
        scale: 1.5;
    }

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


    /* ================recruit.html=============== */
    /* ----------recruit--------- */
    #recruit .inner {
        width: 63%;
    }

    .title div h1,
    .title div h2 {
        text-align: center;
        line-height: 3.5rem;
    }

    #recruit div+p {
        font-size: 18px;
    }

    #recruit h2+p {
        width: 100%;
        margin-inline: 0;
        font-size: 18px;
    }

    #recruit dl {
        width: 100%;
        margin-inline: 0;
        font-size: 18px;
    }


    #recruit tbody tr td {
        padding-inline: 40px;
        padding-block: 15px;
    }

    /* -------------------------- */
    /* =========================================== */

}

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

    /* ----------header---------- */

    #header {
        overflow-y: scroll;
    }

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

    /* ================recruit.html=============== */
    /* ----------recruit--------- */
    #recruit .inner {
        width: 70%;
    }

    /* -------------------------- */
    /* ----------recruit--------- */
    #map iframe {
        width: 600px;
        height: 250px;
    }

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

}

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

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 20px;
    }

    .inner {
        width: 75%;
    }

    .scrolldown2:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--color2);
        animation: circlemove 1.6s ease-in-out infinite,
            cirlemovehide 1.6s ease-out infinite;
    }

    .scrolldown2 span {
        position: absolute;
        left: 7px;
        bottom: 11px;
        color: var(--color2);
        font-size: .7rem;
        letter-spacing: 0.05em;
        -ms-writing-mode: tb-rl;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
    }

    .scroll-infinity__item {
        width: calc(100vw / 1);
    }

    .title div span {
        width: 40px;
    }

    /* ----------header---------- */
    header {
        width: 18%;
    }

    #header {
        width: 17%;
    }

    .tb-reservation {
        font-size: 40px;
        translate: -1px;
    }

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

    /* ----------footer---------- */
    #footer .inner {
        width: 85%;
    }

    #footer-left p,
    #footer-left a {
        font-size: 11px;
    }

    #footer-center {
        width: 15%;
        position: relative;
        top: -15px;
        left: -20px;
    }

    #footer-right h5 {
        font-size: 18px;
    }

    #sns-icon {
        margin-top: 15px;
    }

    #sns-icon .fa-instagram,
    #sns-icon .fa-square-facebook,
    #sns-icon .fa-x-twitter {
        font-size: 25px;
    }

    /* -------------------------- */
    main {
        width: 85%;
    }

    /* -----------top------------ */
    #top {
        background-position: 45%;
    }

    #reservation {
        width: 23%;
    }

    #top a:last-child {
        right: 10px;
        bottom: 10px;
    }

    /* -------------------------- */
    /* ----------about---------- */
    #about-title+p {
        font-size: 16px;
    }

    #about p:nth-child(3) {
        margin: 70px auto 0;
        font-size: 21px;
        padding: 5px 33px;
    }

    #trouble {
        margin: 40px auto 0;
        font-size: 13px;
    }

    #trouble p:last-child {
        margin-top: 25px;
    }

    #about p img {
        width: 20px;
    }

    #about h3 {
        margin-top: 55px;
        font-size: 25px;
    }

    #scroll1 {
        left: 17px;
    }

    /* ------------------------- */
    /* --------menu-price------- */
    #menu {
        flex-direction: column;
    }

    .menu-unit {
        width: 60%;
        margin: 0 auto;
    }

    .menu-unit+.menu-unit {
        margin-top: 50px;
    }

    .menu-unit div {
        width: 65%;
        margin: 0 auto;
    }

    .menu-unit p {
        font-size: 14px;
    }

    #price-left {
        width: 100%;
        padding: 50px 20px;
    }

    .price-left-unit {
        width: 80%;
        margin-left: 20px;
    }

    .price-left-unit h5 {
        font-size: 18px;
    }

    .price-left-unit span {
        font-size: 13px;
    }

    .price-left-unit+p {
        margin-left: 20px;
    }

    .price-left-unit div+div span+p {
        font-size: 18px;
    }

    .price-left-unit:nth-child(5) {
        width: 95%;
    }


    #maintenance span {
        font-size: 13px;
    }

    .off-title {
        margin: 45px 0 10px 20px;
        font-size: 17px;
    }


    .off-title~div span,
    .off-title~div i {
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .off-title~div p {
        font-size: 20px;
        margin-left: 5px;
    }

    #price-right {
        display: none;
    }

    /* ------------------------- */
    /* ----------staff---------- */
    #staff-main {
        flex-direction: column;
    }

    .staff-unit {
        width: 90%;
        margin: 0 auto;
    }

    .staff-unit+.staff-unit {
        margin-top: 40px;
    }

    .staff-unit-top h5 {
        font-size: 30px;
    }

    .title div h1,
    .title div h2 {
        line-height: 2.5rem;
    }

    .title h4 {
        margin-top: 5px;
    }

    #scroll2 {
        top: 110%;
        left: 17px;
    }

    /* ------------------------- */
    /* -------cut-example------- */
    #cut-example div h1 {
        margin: 0 17px;
    }

    #cut-example-main {
        flex-direction: column;
    }

    #cut-example-left {
        width: 70%;
        margin: 0 auto;
    }

    #cut-example-right {
        width: 90%;
        margin: 40px auto 0;
    }

    #decoration2 {
        scale: 1.3;
        left: 0px;
        bottom: -219px;
    }

    /* ------------------------- */
    /* ---------review---------- */
    #review .inner {
        width: 85%;
    }

    #review-title div span {
        position: relative;
    }

    /* ------------------------- */
    /* -------service flow------- */
    #service-flow-main {
        flex-direction: column;
    }

    .service-flow-unit {
        width: 80%;
        padding-bottom: 100px;
        margin: 0 auto;
    }

    .fa-chevron-right {
        translate: -5px 60px;
        transform: rotate(90deg);
    }

    #scroll3 {
        left: 17px;
    }

    /* ------------------------- */
    /* ----------area---------- */
    #area-left {
        width: 75%;
    }

    #passable p {
        font-size: 13px;
    }

    #not-passable p {
        font-size: 13px;
    }

    #area-right {
        width: 85%;
    }

    #area-right tbody {
        font-size: 13px;
    }


    /* ------------------------- */
    /* ------------faq---------- */
    #faq .inner {
        width: 95%;
    }

    #faq-main li h3 {
        font-size: 15px;
    }

    #faq-main li:first-child,
    #faq-main li:nth-child(2) {
        overflow-y: scroll;
    }


    #faq-main li h3::first-letter {
        font-size: 25px;
    }

    #faq-main li p {
        font-size: 13px;
    }

    #decoration3 {
        right: 18px;
        bottom: 1000px;
    }

    /* ------------------------- */
    /* --------hot pepper-------- */
    #hot-pepper {
        padding-block: 70px;
    }

    #hot-pepper a {
        width: 50%;
        translate: -30px;
    }

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

    /* ================recruit.html=============== */

    /* ----------recruit--------- */
    .recruit-header {
        overflow-y: hidden !important;
    }

    #recruit .inner {
        width: 85%;
    }

    .recruit-top #top-title h1 {
        padding-top: 50px;
    }

    #recruit-title div h1,
    #recruit-title div h2 {
        margin: 0 0px;
    }

    #recruit div+p {
        font-size: 14px;
    }

    #recruit tbody {
        font-size: 12px;
    }

    #recruit tbody tr:nth-child(5) {
        text-align: left;
    }

    #recruit tbody tr td {
        padding-inline: 25px;
        padding-block: 15px;
    }

    #recruit h2 {
        font-size: 20px;
    }

    #recruit h2+p {
        font-size: 14px;
    }

    #recruit dl {
        font-size: 12px;
    }


    #map iframe {
        width: 300px;
        height: 150px;
    }

    /* ----------contact--------- */
    #contact .inner {
        width: 90%;
    }

    #contact-title div h1,
    #contact-title div h2 {
        margin: 0 25px;
    }

    .row {
        margin-top: 100px;
    }

    .row .col {
        padding: 0 5px;
    }

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

    /* =========================================== */
    /* =============privacy-policy.html=============== */

    .privacy-policy-top #top-title h1 {
        padding-top: 50px;
    }

    #top-title h1 {
        font-size: 40px;
    }

    #privacy-policy ul {
        padding-block: 100px;
    }

    #privacy-policy li p {
        font-size: 13px;
    }

    /* =========================================== */
}

@media screen and (max-width:390px) {
    h1 {
        font-size: 30px;
    }

    .title h4 {
        font-size: 11px;
    }

    .title div span {
        width: 40px;
    }

    .title div h2 {
        margin: 0 20px;
    }

    .title div h1,
    .title div h2 {
        line-height: 1.5rem;
    }

    /* ----------header--------- */
    header {
        width: 20%;
    }

    #header {
        width: 20%;
    }

    /* ------------------------- */
    /* ----------footer--------- */
    #footer.inner {
        width: 80%;
    }

    #footer-left,
    #footer-right {
        margin-top: 45px;
    }

    #footer-right {
        width: 38%;
    }

    #footer-right h5 {
        font-size: 16px;
    }

    /* ------------------------- */
    main {
        width: 80%;
    }

    /* ------------top---------- */
    #top-title h1 {
        font-size: 35px;
    }

    h2 {
        font-size: 20px;
    }

    #top a:last-child {
        width: 35px;
        height: 35px;
        right: 10px;
        bottom: 10px;
    }

    /* ------------------------- */
    /* ---------about----------- */
    #about .inner {
        width: 80%;
    }

    #about-title+p {
        font-size: 15px;
        margin-top: 85px;
    }

    #about p:nth-child(3) {
        margin: 50px auto 0;
        font-size: 16px;
        padding: 5px 30px;
    }

    #trouble {
        font-size: 12px;
    }

    #about h3 {
        font-size: 21px;
    }

    #scroll1 {
        top: 120%;
    }


    #decoration1 {
        scale: 1;
    }

    /* ------------------------- */
    /* --------menu-price------- */
    #menu-price-title div h1 {
        margin: 0 25px;
    }

    .menu-unit {
        width: 75%;
    }

    .menu-unit div {
        width: 80%;
    }

    #price-left {
        padding: 50px 15px;
    }

    .price-left-unit {
        width: 90%;
        margin-left: 15px;
        flex-direction: column;
    }

    .tax-included-price {
        justify-content: end;
    }

    #maintenance h4 {
        font-size: 20px;
    }


    .off-title {
        margin: 45px 0 10px 5px;
        font-size: 15px;
    }


    .off-title~div {
        margin-left: 30px;
    }


    /* ------------------------- */
    /* ---------staff----------- */


    .staff-unit p {
        font-size: 13px;
    }


    /* ------------------------- */
    /* --------service-flow-------- */
    #service-flow-title div h1 {
        line-height: 2rem;
        margin: 0 22px;
    }

    .service-flow-unit {
        width: 100%;
    }

    .service-flow-unit span {
        translate: 10px 0;
    }

    .service-flow-unit div h5 {
        font-size: 20px;
    }

    .service-flow-unit div {
        width: 70%;
        margin: 0 auto;
    }

    .service-flow-unit div img {
        padding-top: 30px;
    }

    .fa-chevron-right {
        translate: -5px 30px;
        font-size: 35px;
    }

    .service-flow-unit:last-child div img {
        padding-top: 25px;
    }

    /* ------------------------- */
    /* ----------area----------- */
    #area-right {
        width: 100%;
    }

    #sorting {
        width: 50%;
    }

    #area-right tbody td {
        padding-inline: 10px;
        padding-block: 10px;
    }

    /* ------------------------- */
    /* -----------faq----------- */
    #faq-main li {
        height: 130px;
        padding: 10px 20px;
    }

    #faq-main li p {
        margin-left: 0px;
    }


    #faq-main li h3::first-letter {
        font-size: 20px;
    }


    #decoration3 {
        scale: 1;
    }

    /* ------------------------- */
    /* --------hot pepper-------- */
    #hot-pepper a {
        width: 60%;
    }

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

}

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

    /* ----------footer---------- */
    #footer.inner {
        width: 85%;
    }

    #footer-right {
        width: 36%;
    }

    #recruit p+dl {
        margin-top: 100px;
    }

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

    /* ----------about---------- */
    #trouble {
        font-size: 11px;
    }

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

    /* --------menu-price------- */

    .off-title {
        font-size: 15px;
    }


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



    /* ================recruit.html=============== */
    #recruit div+p {
        margin: 100px auto 0;
    }

    #recruit tbody tr td {
        padding-inline: 14px;
        padding-block: 15px;
    }

    /* =========================================== */
}