/*
===================================================
        Reset
===================================================
*/
* {
    margin: 0px;
    padding: 0px;
    font-size: 100%;
}

*:focus {
    outline: none;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    color: #333;
}

address {
    font-style: normal;
}

/*
===================================================
        Base Setting
===================================================
*/
body {
    background: url(../img/bg1.gif);
    line-height: 1.8em;
    letter-spacing: 0.05em;
    color: #333;
    font-family: "Noto Serif JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS P Gothic", "Osaka", arial, sans-serif;
}

body.en {
    font-family: arial, sans-serif;
}

body.zh {
    font-family: 宋体, Arial, Helvetica, sans-serif;
}

body.ko {
    font-family: Dotum, '돋움', Helvetica, "Apple SD Gothic Neo", sans-serif;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

.sp-visible {
    height: 0px;
    overflow: hidden;
    visibility: hidden;
}

.maxWidth {
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: auto;
    margin-right: auto
}

#header {
    position: fixed;
    width: 100%;
    padding: 9px 0px 5px;
    background: #fff;
    z-index: 999;
}

#header .maxWidth {
    position: relative;
}

#header #logo svg {
    height: 45px;
    width: 200px;
}

#gMenu {
    position: absolute;
    right: 1em;
    top: 35%;
    margin-top: -1em;
}

#gMenu #nav {
    display: inline-block;
    vertical-align: middle;
}

#gMenu #navMenu {
    display: inline-block;
    margin-right: 20px;
}

#gMenu #navMenu>li {
    display: inline-block;
    position: relative;
}

#gMenu #navMenu>li>a {
    display: block;
    position: relative;
    padding: 10px;
}

#gMenu #navMenu>li>a:after {
    display: block;
    content: "";
    position: absolute;
    left: 0px;
    bottom: 6px;
    width: 100%;
    height: 2px;
    background: #bb0000;
    transform: scaleX(0);
    opacity: 0;
}

#gMenu #navMenu>li:hover a:after {
    opacity: 1;
    transition: 0.5s;
    transform: scaleX(1);
}

#gMenu #navMenu .submenu {
    transition: .5s;
    position: absolute;
    left: 0px;
    background: #fff;
    min-width: 200px;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

#gMenu #navMenu .submenu.active {
    opacity: 1;
    visibility: visible;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

#gMenu #navMenu .submenu li a {
    display: block;
    padding: 10px;
}

#gMenu #navMenu .submenu li a:hover {
    transition: .5s;
    background: #eee;
}

#gMenu #lan {
    display: inline-block;
    vertical-align: middle;
    margin-right: 25px;
    position: relative;
    cursor: pointer;
    visibility: hidden;
}

#gMenu #lan.visible {
    visibility: visible;
}

#gMenu #lan .active {
    min-width: 2.2em;
    text-align: center;
}

#gMenu #lan:after {
    position: absolute;
    display: block;
    content: "";
    border-top: solid #000 10px;
    border-left: solid transparent 3px;
    border-right: solid transparent 3px;
    right: -5px;
    top: 32%;
}

#gMenu #lan a {
    color: #fff;
}

#gMenu #lan .lanList {
    z-index: 3;
    position: absolute;
    opacity: 0;
    height: 0px;
    overflow: hidden;
    background: #000;
    color: #fff;
    padding: 8px;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    top: 0px;
    left: 0px;
    visibility: hidden;
}

#gMenu #lan .lanList li {
    border-bottom: solid 1px #555;
    cursor: pointer;
    padding: 2px 5px;
    text-align: center;
}

#gMenu #lan .lanList li:hover {
    transition: .5s;
    background: #888;
}

#gMenu #lan .lanList li:last-child {
    border-bottom: none;
}

#gMenu #lan .lanList.active {
    transition: 0.5s;
    opacity: 1;
    height: auto;
    opacity: 1;
    visibility: visible;
}

#gMenu #sns {
    display: inline-block;
    vertical-align: middle;
    padding-top: 4px;
}

#main {
    /*min-height: 1000px;*/
    width: 100%;
    overflow-x: hidden;
}

#footer {
    background: #000;
    color: #fff;
    padding: 40px 0px;
    margin-top: 100px;
}

#footer a {
    color: #fff;
    position: relative;
}

#footer .menu a:before {
    transition: .5s;
    background: transparent;
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    bottom: -2px;
}

#footer .menu a:hover:before {
    background: #aaa;
}

#footer .about {
    border-bottom: solid 1px #555;
    padding-bottom: 20px;
}

#footer .about #footerLogo {
    display: inline-block;
    vertical-align: middle;
    padding-right: 10px;
}

#footer .about address {
    display: inline-block;
    vertical-align: middle;
}

#footer .menu {
    padding-top: 50px;
}

#footer .menu>ul {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 16%;
}

#footer .menu>ul:before {
    position: absolute;
    content: "";
    display: block;
    border-top: solid 5px #E60012;
    width: 40px;
    top: -10px;
}

#footer .copyright {
    margin-top: 40px;
    font-size: 60%;
    text-align: center;
}

#footer .copyright a:hover {
    text-decoration: underline;
}

#footer .menu>ul>li {
    padding: 10px 0px;
}

#pagetop {
    position: fixed;
    z-index: 2;
    bottom: 15px;
    right: 15px;
    /*visibility: hidden;*/
    opacity: 0;
    background: #000;
    padding: 0px 15px 3px;
    border-radius: 40px;
    vertical-align: middle;
}

#pagetop.active {
    transition: 1s;
    visibility: visible;
    opacity: 1;
}

#pagetop a {
    position: relative;
    text-align: center;
}

#pagetop a:before {
    content: "";
    display: inline-block;
    border-bottom: solid #fff 10px;
    border-left: solid transparent 5px;
    border-right: solid transparent 5px;
    margin-right: 3px;
    margin-top: -3px;
    vertical-align: middle;
}

.tbl {
    display: table;
    width: 100%;
}

.tbl .cell1 {
    display: table-cell;
    width: 8.333%;
    vertical-align: top;
}

.tbl .cell2 {
    display: table-cell;
    width: 16.666%;
    vertical-align: top;
}

.tbl .cell3 {
    display: table-cell;
    width: 25%;
    vertical-align: top;
}

.tbl .cell4 {
    display: table-cell;
    width: 33.333%;
    vertical-align: top;
}

.tbl .cell5 {
    display: table-cell;
    width: 41.665%;
    vertical-align: top;
}

.tbl .cell6 {
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.tbl .cell7 {
    display: table-cell;
    width: 58.333%;
    vertical-align: top;
}

.tbl .cell8 {
    display: table-cell;
    width: 66.666%;
    vertical-align: top;
}

.tbl .cell9 {
    display: table-cell;
    width: 75%;
    vertical-align: top;
}

.tbl .cell10 {
    display: table-cell;
    width: 83.333%;
    vertical-align: top;
}

.tbl .cell11 {
    display: table-cell;
    width: 91.666%;
    vertical-align: top;
}

.tbl .cell12 {
    display: table-cell;
    width: 100%;
    vertical-align: top;
}

.valign-t {
    vertical-align: top !important;
}

.valign-m {
    vertical-align: middle !important;
}

.valign-b {
    vertical-align: bottom !important;
}

.align-l {
    text-align: left !important;
}

.align-c {
    text-align: center !important;
}

.align-r {
    text-align: right !important;
}

.mt1em {
    margin-top: 1em;
}

.mt2em {
    margin-top: 2em;
}

.mt3em {
    margin-top: 3em;
}

.mt4em {
    margin-top: 4em;
}

.mt5em {
    margin-top: 5em;
}

.font-s {
    font-size: 80%;
}

.font-ss {
    font-size: 50%;
}

.font-l {
    font-size: 120%;
    line-height: 1.3em;
}

.font-ll {
    font-size: 180%;
    line-height: 1.3em;
}

.ib {
    display: inline-block;
    vertical-align: top;
}

.dBlock {
    display: block;
}

.p10 {
    padding: 10px;
}

.p20 {
    padding: 20px;
}

.p30 {
    padding: 30px;
}

.pc-pl2 {
    padding-left: 2%;
}

.mr1em {
    margin-right: 1em;
}

.mr2em {
    margin-right: 2em;
}

.mr3em {
    margin-right: 3em;
}

.ml1em {
    margin-left: 1em;
}

.ml2em {
    margin-left: 2em;
}

.ml3em {
    margin-left: 3em;
}

.clearfix {
    overflow: hidden;
}

.float-l {
    float: left;
}

.float-r {
    float: right;
}

@media screen and (max-width: 769px) {
    .pc-pl2 {
        padding-left: 0;
    }
}

.btn1 a {
    display: inline-block;
    border: solid 1px #fff;
    padding: 5px 1em;
    min-width: 150px;
    text-align: center;
    color: #fff;
}

.btn1 a:hover {
    transition: 1s;
    color: #000;
    background: #fff;
}

.btn2 a {
    display: inline-block;
    border: solid 1px #000;
    padding: 5px 1em;
    min-width: 150px;
    text-align: center;
    color: #fff;
    background: #000;
    margin-top: 30px;
}

.btn2 a:hover {
    transition: 1s;
    color: #000;
    background: #fff;
}

.btn3 a {
    display: inline-block;
    border: solid 1px #000;
    padding: 5px 1em;
    min-width: 150px;
    text-align: center;
    color: #333;
}

.btn3 a:hover {
    transition: 1s;
    color: #fff;
    background: #000;
}

.pcBlock {
    display: block;
}

.red {
    color: #cc0000;
}

.listStyle1 {
    text-align: center;
    vertical-align: top;
}

.listStyle1 li {
    display: inline-block;
    vertical-align: top;
    margin: 0px 10px 40px;
}

.listStyle1 li a:hover {
    transition: 1s;
    box-shadow: 10px 8px 2px rgba(100, 100, 100, 0.5);
}

.listStyle1 li a {
    display: block;
    border: solid 1px #555;
    height: 96%;
    padding-bottom: 4%;
}

.listStyle2 {
    text-align: center;
}

.listStyle2 li {
    position: relative;
    width: 20%;
    min-width: 260px;
    display: inline-block;
    margin: 0px 10px 40px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
}

.listStyle2 li .num {
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 5px;
    background: rgba(40, 40, 40, 0.8);
    color: #fff;
    width: 2em;
}

.listStyle2 li:hover a {
    transition: 1s;
    box-shadow: 10px 8px 2px rgba(100, 100, 100, 0.5);
}

.listStyle2 li a {
    display: block;
    border: solid 1px #aaa;
    padding: 5%;
    height: 100%;
}

.listStyle3 {
    text-align: center;
}

.listStyle3 li .inner {
    display: inline-block;
    vertical-align: top;
    border-bottom: solid 1px #aaa;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.listStyle3 li:last-child .inner {
    border-bottom: none;
}

.listStyle3 li .photoArea {
    width: 30vw;
    display: inline-block;
}

.listStyle3 li .photoArea .cs {
    position: relative;
    display: inline-grid;
    width: min(100%, 363px);
    text-align: center;
    justify-content: center;
    align-content: center;
    aspect-ratio: 363 / 280;
    background: #ddd;
}

.listStyle3 li .photoArea .cs::before {
    content: "Coming soon...";
    display: block;
    width: fit-content;
    height: fit-content;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
}

.listStyle3 li .textArea {
    width: 40vw;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    padding: 15px;
}

.listStyle4 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.listStyle4 li {
    border-bottom: solid 1px #aaa;
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.listStyle4 li:last-child {
    border: none;
}

.listStyle5 {
    text-align: center;
}

.listStyle5 li {
    width: 33%;
    max-width: 300px;
    display: inline-block;
    margin: 0px 1% 40px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
}

.listStyle5_5 {
    text-align: center;
}

.listStyle5_5 li {
    width: 30%;
    max-width: 300px;
    display: inline-block;
    margin: 0px 1% 40px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
}

.listStyle6 {
    text-align: center;
}

.listStyle6 li {
    width: 45%;
    max-width: 455px;
    display: inline-block;
    margin: 0px 1% 40px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
}

.listStyle7 {
    text-align: center;
}

.listStyle7 li {
    width: 40%;
    display: inline-block;
    margin: 0px 1% 20px;
    text-align: left;
    vertical-align: top;
    font-size: 95%;
    border: solid 1px #aaa;
}

.listStyle7 li a {
    display: block;
    text-align: center;
    padding: 10px;
}

.listStyle7 li a:hover {
    transition: 1s;
    box-shadow: 4px 4px 2px rgba(0, 0, 0, 0.4);
}

.listStyle8 li {
    border-bottom: solid 1px #aaa;
}

.listStyle8 li a {
    display: block;
    padding: 10px;
}

.listStyle8 li a:hover {
    transition: 1s;
    background: #EEE;
}

.listStyle8 li:last-child a {
    border-bottom: none;
}

.listStyle9 li {
    display: inline-block;
    border: solid 1px #aaa;
    margin: 4px;
}

.listStyle9 li a {
    display: block;
    min-width: 150px;
    padding: 0 0.5em;
}

.listStyle9 li a:hover {
    transition: 1s;
    background: #000;
    color: #fff;
}

.border {
    border: solid 1px #aaa;
    padding: 2px 4px;
}

.btmBorder {
    position: relative;
    padding-bottom: 50px;
}

.btmBorder:after {
    position: absolute;
    content: "";
    display: block;
    width: 100px;
    border-bottom: solid 1px #aaa;
    left: 50%;
    margin-left: -50px;
    bottom: 25px;
}

.scrollEffect {
    transition: 1s;
    opacity: 0;
    transform: rotateX(0deg);
    -moz-perspective: 500px;
    -webkit-perspective: 500px;
    -o-perspective: 500px;
    -ms-perspective: 500px;
}

.scrollEffect .rotateTop {
    transition: 1s;
    transform: rotateX(10deg);
}

.scrollEffect .rotateLeft {
    transition: 1s;
    transform: rotateY(10deg);
}

.scrollEffect .rotateRight {
    transition: 1s;
    transform: rotateY(-10deg);
}

.scrollEffect.on {
    opacity: 1;
    transform: rotateX(0deg);
}

.scrollEffect.on .rotateTop {
    transform: rotateX(0deg);
}

.scrollEffect.on .rotateLeft,
.scrollEffect.on .rotateRight {
    transform: rotateY(0deg);
}

/*
===================================================
        loading
===================================================
*/
#loading {
    transition: 1s;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #000;
    z-index: 998;
}

#loading.hidden {
    opacity: 0;
    visibility: hidden;
}

#loading .msg {
    position: fixed;
    top: 57%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 90%;
}

.sk-folding-cube {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -20px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #900;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}

.sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}

.sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}

.sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}

.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

@-webkit-keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

@keyframes sk-foldCubeAngle {

    0%,
    10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    }

    25%,
    75% {
        -webkit-transform: perspective(140px) rotateX(0deg);
        transform: perspective(140px) rotateX(0deg);
        opacity: 1;
    }

    90%,
    100% {
        -webkit-transform: perspective(140px) rotateY(180deg);
        transform: perspective(140px) rotateY(180deg);
        opacity: 0;
    }
}

/*
===================================================
        slider
===================================================
*/
#topSlider {
    background: #000;
    position: relative;
    height: 100vh;
}

#topSlider>.inner {
    position: relative;
    z-index: 3;
}

#topSlider .bgCanvas,
#topSlider .bgCanvas canvas {
    position: absolute;
    width: 100%;
    height: 100vh;
    z-index: 1;
    max-width: 1920px;
    left: 50%;
    transform: translate(-50%, 0px);
}

#topSlider .btnLeft:after,
#topSlider .btnRight:after {
    position: absolute;
    width: 100px;
    height: 100px;
    content: "";
    display: block;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: 1s;
}

#topSlider .btnLeft:after {
    top: -24px;
    left: -37px;
}

#topSlider .btnRight:after {
    top: -24px;
    right: -37px;
}

#topSlider .btnLeft:hover:after,
#topSlider .btnRight:hover:after {
    opacity: 1;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

#topSlider .btnLeft {
    position: absolute;
    z-index: 9;
    left: 5%;
    top: 50%;
    cursor: pointer;
}

#topSlider .btnLeft:before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-left: solid 1px #fff;
    border-top: solid 1px #fff;
    transform: rotate(-45deg);
}

#topSlider .btnRight {
    position: absolute;
    z-index: 9;
    right: 5%;
    top: 50%;
    cursor: pointer;
}

#topSlider .btnRight:before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    border-right: solid 1px #fff;
    border-top: solid 1px #fff;
    transform: rotate(45deg);
}

#topSlider ul {
    width: 100%;
    position: relative;
    z-index: 2;
}

#topSlider li {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    opacity: 0;
    transition: opacity 1s;
}

#topSlider li a {
    display: block;
    height: 100%;
    width: 100%;
}

#topSlider li img {
    visibility: hidden;
}

#topSlider li.active {
    z-index: 3;
    opacity: 1;
}

#topSlider .btnScroll,
.page.kawarasoba #page .btnScroll {
    position: absolute;
    z-index: 9;
    bottom: 30px;
    width: 100%;
    text-align: center;
}

#topSlider .btnScroll a,
.page.kawarasoba #page .btnScroll a {
    position: relative;
    z-index: 2;
}

#topSlider .btnScroll a:before,
.page.kawarasoba #page .btnScroll a:before {
    position: absolute;
    display: block;
    content: "";
    width: 80px;
    height: 80px;
    border-radius: 40px;
    left: 50%;
    top: -40px;
    margin-left: -40px;
    background: rgba(255, 255, 255, 0.2);
    opacity: 0;
    transition: 1s;
}

#topSlider .btnScroll a:hover:before,
.page.kawarasoba #page .btnScroll a:hover:before {
    opacity: 1;
}

#topSlider .btnScroll a:after,
.page.kawarasoba #page .btnScroll a:after {
    position: absolute;
    display: block;
    content: "";
    width: 20px;
    height: 20px;
    border-top: #fff solid 1px;
    border-right: #fff solid 1px;
    transform: rotate(135deg);
    left: 50%;
    top: 8px;
    margin-left: -11px;
    animation-name: animeBtnScroll;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes animeBtnScroll {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0;
    }
}

#bottomSlider {
    width: 85%;
    max-width: 1100px;
    margin: 100px auto 0px;
    text-align: center;
}

#bottomSlider .slick-slide img {
    display: inline-block;
    border: solid 2px #fff;
}

#bottomSlider .slick-prev {
    position: absolute;
    left: -30px;
    top: 40%;
    z-index: 2;
    overflow: hidden;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    border: none;
    border-top: solid 1px #333;
    border-left: solid 1px #333;
    background: transparent;
    transform: rotate(-45deg);
    cursor: pointer;
}

#bottomSlider .slick-next {
    position: absolute;
    right: -30px;
    top: 40%;
    z-index: 2;
    overflow: hidden;
    text-indent: -9999px;
    width: 30px;
    height: 30px;
    border: none;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    background: transparent;
    transform: rotate(45deg);
    cursor: pointer;
}

/*
===================================================
        index
===================================================
*/
.index #kawarasoba {
    color: #fff;
    background: #000;
    position: relative;
    overflow-y: auto;
    overflow: hidden;
    padding: 100px 0px 50px;
}

.index #kawarasoba .textArea {
    float: left;
    width: 26%;
    padding-left: 10%;
}



.index #kawarasoba .textArea .sub {
    font-size: 60%;
    position: relative;
}

.index #kawarasoba .textArea .sub span {
    display: inline-block;
    background: #000;
    position: relative;
    z-index: 2;
    padding-right: 10px;
}

.index #kawarasoba .textArea .sub:after {
    position: absolute;
    content: "";
    display: block;
    border-bottom: solid 1px #555;
    width: 100%;
    top: 50%;
    z-index: 1;
}

.index #kawarasoba .img {
    float: right;
    width: 60%;
    text-align: center;
}

.index #kawarasoba .scrollEffect {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.index #unameshi {
    color: #fff;
    background: #000;
    position: relative;
    overflow-y: auto;
    overflow: hidden;
    padding: 50px 0px 100px;
}

.index #unameshi .scrollEffect {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.index #unameshi .textArea {
    float: right;
    width: 26%;
    padding-right: 10%;
}

.index #unameshi .textArea .sub {
    font-size: 60%;
    position: relative;
}

.index #unameshi .textArea .sub span {
    display: inline-block;
    background: #000;
    position: relative;
    z-index: 2;
    padding-right: 10px;
}

.index #unameshi .textArea .sub:after {
    position: absolute;
    content: "";
    display: block;
    border-bottom: solid 1px #555;
    width: 100%;
    top: 50%;
    z-index: 1;
}

.index #unameshi .img {
    float: left;
    width: 60%;
    text-align: center;
}

.index #otherMenu {
    background: #000;
}

.index #otherMenu .menu1,
.index #otherMenu .menu2 {
    height: 35vw;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    text-align: center;
}

.index #otherMenu h3 {
    position: relative;
    z-index: 2;
}

.index #otherMenu h3 a {
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
    position: relative;
    display: block;
    color: #fff;
    border: solid 1px #fff;
    height: 15vw;
    width: 15vw;
    min-width: 250px;
    min-height: 250px;
    margin: 0 auto;
    vertical-align: middle;
    transition: .5s;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.index #otherMenu .menu1:hover h3 a,
.index #otherMenu .menu2:hover h3 a {
    color: #000;
    background: rgba(255, 255, 255, 0.8);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.index #otherMenu h3 a:before {
    display: inline-block;
    content: "";
    height: 100%;
    width: 0px;
    overflow: hidden;
    vertical-align: middle;
}

.index #otherMenu h3 a .inner {
    display: inline-block;
    vertical-align: middle;
}

.index #otherMenu h3 a span {
    display: block;
    margin-top: 10px;
}

.index #otherMenu h3 a span:first-child {
    margin-top: 0px;
}

.index #otherMenu h3 a .link {
    position: absolute;
    bottom: 10px;
    text-align: center;
    width: 100%;
}

.index #otherMenu .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.index #otherMenu .bg img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 38vw;
    transition: 2s;
}

.index #otherMenu .menu1:hover .bg img,
.index #otherMenu .menu2:hover .bg img {
    transform: scale(1.2);
}

.index #shopGuide {
    background: #000;
    color: #fff;
    padding: 100px 0px;
}

.index #shopGuide a {
    color: #fff;
}

.index #netShop {
    background: url(../img/index/bg_netshop.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    height: 650px;
}

.index #netShop .inner {
    display: inline-block;
    margin: 12% 0px 0px 15%;
    vertical-align: middle;
    max-width: 350px;
}

.index #news {
    padding: 100px 0px 100px;
    text-align: center
}

.index #newsalign-c .textArea {
    display: inline-block;
    width: 400px;
    text-align: center;
}

.index #news.news_bg {
    background: #000;
    color: #FFF;
}

.newsList {
    max-width: 500px;
    margin: 2rem auto;
    padding: 0 20px;
}

.newsLink:hover {
    opacity: .7;
}

.newsLink {
    display: block;
    text-align: left;
    color: #FFF;
    padding: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.newsLink .date {
    min-width: 105px;
    display: inline-block;
}

.newsLink .categories {
    margin-right: 6px;
    display: inline-block;
}

.newsLink .category {
    border: 1px solid #FFF;
    padding: 0 4px;
    display: inline-block;
}

.newsLink .category:not(:last-child) {
    margin-right: 5px;
}

@media screen and (max-width: 500px) {
    .newsLink .date {
        min-width: 80px;
    }
}

.index #kawarasoba .textArea .sub {
    font-size: 60%;
    position: relative;
}

.index #kawarasoba .textArea .sub span {
    display: inline-block;
    background: #000;
    position: relative;
    z-index: 2;
    padding-right: 10px;
}

.index #kawarasoba .textArea .sub:after {
    position: absolute;
    content: "";
    display: block;
    border-bottom: solid 1px #555;
    width: 100%;
    top: 50%;
    z-index: 1;
}



/*
===================================================
        page
===================================================
*/
.page #page {
    padding-top: 150px;
}

.page #main h2 {
    text-align: center;
    font-size: 180%;
}

.page #main h2 span {
    display: block;
    font-size: 10px;
    margin-top: 1em;
    letter-spacing: 0.5em;
}

/*
===================================================
        page kawarasoba,
===================================================
*/
.page.kawarasoba #page {
    padding-top: 0px;
    position: relative;
}

.page.kawarasoba #page h2 {
    text-indent: -9999px;
    overflow: hidden;
    background: url(../img/main_img1.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    padding-bottom: 0px;
    position: relative;
    z-index: 1;
}

.page.kawarasoba #page h2>span {
    display: none;
}

.page.kawarasoba #about {
    background: url(../img/kawarasoba/main.jpg) center center;
    background-size: cover;
    position: relative;
    min-height: 650px;
}

.page.kawarasoba #about .textArea {
    position: absolute;
    width: 400px;
    left: 10%;
    top: 150px;
    color: #fff;
}

.page.kawarasoba #about2 {
    overflow: hidden;
    padding: 100px 0px;
}

.page.kawarasoba #about2 .photoArea {
    float: left;
    width: 60%;
}

.page.kawarasoba #about2 .textArea {
    float: right;
    width: 28%;
    padding-right: 8%
}

.page.kawarasoba #point {
    color: #fff;
}

.page.kawarasoba #point h3 {
    text-align: center;
}

.page.kawarasoba #point h4 {
    margin-top: 20px;
    text-align: center;
}

.page.kawarasoba #point h4 span {
    border: solid 1px #fff;
    padding: 1px 8px;
    margin-right: 6px;
    font-size: 80%;
}

.page.kawarasoba #point p {
    max-width: 400px;
    margin: 1.2em auto 0;
    /*margin-top: 1.2em;*/
}

.page.kawarasoba #point .point1 {
    background: url(../img/kawarasoba/bg1.jpg) no-repeat center center;
    background-size: cover;
    text-align: center;
    padding: 90px 0px;
}

.page.kawarasoba #point .point1 .inner {
    display: inline-block;
    width: 400px;
    text-align: left;
}

.page.kawarasoba #point .point2 {
    background: url(../img/kawarasoba/bg2.jpg) no-repeat center center;
    background-size: cover;
    padding: 8vw 5%;
}

.page.kawarasoba #point .point3 {
    background: url(../img/kawarasoba/bg3.jpg) no-repeat center center;
    background-size: cover;
    padding: 8vw 5%;
}

.page.kawarasoba #point .point4 {
    background: url(../img/kawarasoba/bg4.jpg) no-repeat center center;
    background-size: cover;
    padding: 8vw 5%;
}

.page.kawarasoba #how {
    overflow: hidden;
    padding: 100px 0px;
}

.page.kawarasoba #how #youtube {
    text-align: center;
}

.page.kawarasoba #how #youtube iframe {
    width: 95%;
    height: 50vw;
    display: inline-block;
}

.page.kawarasoba #how .listStyle2 li {
    text-align: center;
    max-width: 260px;
    border: solid 1px #aaa;
}

.page.kawarasoba #how .listStyle2 li .text {
    text-align: left;
}

.page.kawarasoba #how .listStyle2 li .text .num {
    text-align: center;
}

/*
===================================================
        page menu
===================================================
*/
.page.menu #page {
    background: #000;
    color: #fff;
    padding-bottom: 100px;
}

.page.menu #page .mainItem {
    position: relative;
}

.page.menu #page .mainItem img {
    position: relative;
}

.page.menu #page .mainItem .textArea {
    position: absolute;
    background: #000;
    z-index: 2;
    bottom: -20px;
    right: 0px;
    padding: 50px;
    width: 350px;
}

.page.menu #item .maxWidth {
    max-width: 1000px;
}

/*
===================================================
        page store
===================================================
*/
.page.storeDetail #page {
    padding-top: 58px;
}

.page.storeDetail #about {
    margin-top: 70px;
}

.page.storeDetail #about.maxWidth {
    max-width: 960px;
}

.page.storeDetail #info {
    border-top: solid 1px #aaa;
    margin-top: 100px;
    padding-top: 50px;
}

.page.storeDetail #info h3 {
    border-left: solid 4px #888;
    padding-left: 4px;
    margin-bottom: 10px;
}

.page.storeDetail #info .map {
    text-align: center;
}

.page.storeDetail #info .map iframe {
    display: inline-block;
    max-width: 800px;
    width: 100%;
}

.page.storeDetail #info .tel:before {
    content: "";
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background: url(../img/icon_tel.svg) no-repeat center center;
    background-size: cover;
    vertical-align: middle;
    margin: 0px 5px 4px 0px;
}

.page.storeDetail #item {
    padding: 100px 0px;
    background: #000;
    color: #fff;
}

/*
===================================================
        page unameshi
===================================================
*/
.page.unameshi #page {
    padding-top: 58px;
}

.page.unameshi #about {
    background: #000;
    padding: 50px 0px 0px;
    color: #fff;
}

.page.unameshi #about .bg {
    background: url(../img/unameshi/bg1.jpg) no-repeat center center;
    position: relative;
    min-height: 500px;
}

.page.unameshi #about .textArea {
    position: absolute;
    top: 120px;
    right: 5%;
    max-width: 400px;
}

.page.unameshi #about2 {
    padding: 100px 0px 100px;
}

.page.unameshi #about2 .maxWidth {
    max-width: 450px;
}

.page.unameshi #about3 .bg1 {
    background: url(../img/unameshi/bg2.jpg) center center;
    background-size: cover;
    color: #fff;
    padding: 12%;
}

.page.unameshi #about3 .bg2 {
    background: url(../img/unameshi/bg3.jpg) center center;
    background-size: cover;
    color: #fff;
    padding: 12%;
}

.page.unameshi #how {
    overflow: hidden;
    padding: 100px 0px;
}

.page.unameshi #how .listStyle2 li {
    text-align: center;
    max-width: 260px;
    border: solid 1px #aaa;
}

.page.unameshi #how .listStyle2 li .text {
    text-align: left;
}

.page.unameshi #how .listStyle2 li .text .num {
    text-align: center;
}

.page.unameshi #youtube {
    text-align: center;
}

.page.unameshi #youtube iframe {
    width: 95%;
    height: 50vw;
    display: inline-block;
}

/*
===================================================
        page access
===================================================
*/
.page.access h3 {
    text-align: center;
}

.page.access h3 span {
    border: solid 1px #aaa;
    display: inline-block;
    padding: 1% 1%;
    margin: 5px;
    min-width: 26%;
}

.page.access h4.car,
.page.access h4.train {
    background: #555;
    color: #fff;
    text-align: center;
    padding: 10px 0px;
}

.page.access h4.car:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 2em;
    background: url(../img/access/car.png) no-repeat center center;
    background-size: contain;
    margin-right: 5px;
    vertical-align: bottom;
}

.page.access h4.train:before {
    content: "";
    display: inline-block;
    width: 2em;
    height: 2em;
    background: url(../img/access/train.png) no-repeat center center;
    background-size: contain;
    margin-right: 5px;
    vertical-align: bottom;
}

.page.access .map iframe {
    width: 100%;
}

.page.access #route2,
.page.access #route3 {
    margin-top: 100px;
}

.page.access .listStyle5 li,
.page.access .listStyle5_5 li {
    max-width: 270px;
}

/*
===================================================
        page kaiseki
===================================================
*/
.page.kaiseki .photo {
    width: 60%;
}

.page.kaiseki h3 {
    border-bottom: solid 1px #aaa;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.page.kaiseki .bg {
    background: #fff;
}

.page.kaiseki .text {
    width: 34%;
    padding: 2%;
}

/*
===================================================
        page banquet
===================================================
*/
.page.banquet #page {
    padding-top: 58px;
}

.page.banquet #item {
    padding: 100px 0px;
    background: #000;
    color: #fff;
}

.page.banquet #info,
.page.kaiseki #info {
    padding: 100px 0px;
}

.page.banquet .sougei,
.page.kaiseki .sougei {
    border-top: solid 1px #aaa;
    border-bottom: solid 1px #aaa;
    text-align: center;
    max-width: 960px;
    margin: 3em auto 0;
}

.page.banquet .sougei .inner,
.page.kaiseki .sougei .inner {
    padding: 60px;
    display: inline-block;
    text-align: left;
    padding-right: 200px;
    background: url(../img/banquet/bg_bus.png) no-repeat right center;
}

/*
===================================================
        sp
===================================================
*/
@media screen and (max-width: 768px) {
    body {
        font-size: 80%;
    }

    .pc-visible {
        height: 0px;
        overflow: hidden;
        visibility: hidden;
    }

    .sp-visible {
        visibility: visible;
    }

    .sp-menuBtn {
        cursor: pointer;
        position: fixed;
        z-index: 999;
        top: 10px;
        right: 7px;
        width: 35px;
        height: 35px;
        border-radius: 35px;
        background: rgba(255, 255, 255, 0.9);
    }

    .sp-menuBtn .sp-menuBtn__inner {
        transition: transform 0.5s;
        position: relative;
        top: 10px;
        left: 8px;
        width: 19px;
        height: 3px;
        background: #555555;
    }

    .sp-menuBtn .sp-menuBtn__inner::after {
        transition: transform 0.5s;
        position: absolute;
        top: 6px;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #555555;
    }

    .sp-menuBtn .sp-menuBtn__inner::before {
        transition: transform 0.5s;
        position: absolute;
        top: 12px;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #555555;
    }

    .sp-menuBtn.active .sp-menuBtn__inner {
        position: relative;
        top: 16px;
        left: 8px;
        width: 19px;
        height: 3px;
        background: #555555;
        transform: rotate(45deg);
    }

    .sp-menuBtn.active .sp-menuBtn__inner::after {
        position: absolute;
        top: 0px;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #555555;
        transform: rotate(90deg);
    }

    .sp-menuBtn.active .sp-menuBtn__inner::before {
        position: absolute;
        top: 0px;
        content: "";
        display: block;
        width: 100%;
        height: 3px;
        background: #555555;
    }

    .sp-menuBtn span {
        display: none;
    }

    .sp-menuArea {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        top: 0px;
        height: 0px;
        width: 100%;
        height: 100%;
        background: #fff;
        overflow-y: scroll;
    }

    .sp-menuArea.active {
        transition: opacity 0.5s;
        opacity: 1;
        visibility: visible;
        z-index: 998;
    }

    .sp-menuArea .sp-menu {
        padding: 50px 10px 10px;
    }

    .sp-menuArea .sp-menu li {
        border-bottom: solid 1px #eee;
    }

    .sp-menuArea .sp-menu li a {
        position: relative;
        display: block;
        padding: 10px 5px 10px 12px;
        color: #222222;
    }

    .sp-menuArea .sp-menu li a::before {
        position: absolute;
        left: 0px;
        top: 50%;
        margin-top: -3px;
        vertical-align: middle;
        content: "";
        display: block;
        border-left: solid 6px #bb0000;
        border-top: solid 4px transparent;
        border-bottom: solid 4px transparent;
    }

    .pc-w30 {
        width: inherit;
    }

    .pc-w33 {
        width: inherit;
    }

    #header {
        position: relative;
        width: 100%;
        padding: 5px 0px;
        background: #fff;
    }

    #header #logo svg {
        height: 40px;
        width: 180px;
    }

    #gMenu {
        top: 44%;
    }

    #gMenu #nav {
        display: none;
    }

    #footer {
        background: #000;
        color: #fff;
        padding: 20px 0px 40px;
        margin-top: 50px;
    }

    #footer a {
        color: #fff;
    }

    #footer .menu a:before {
        display: none;
    }

    #footer .about {
        text-align: center;
        border-bottom: solid 1px #555;
        padding-bottom: 20px;
        font-size: 80%;
    }

    #footer .about #footerLogo {
        display: inline-block;
        vertical-align: middle;
        padding-right: 10px;
    }

    #footer .about #footerLogo svg {
        height: 50px;
        width: auto;
    }

    #footer .about address {
        display: inline-block;
        vertical-align: middle;
    }

    #footer .menu {
        padding-top: 50px;
    }

    #footer .menu>ul {
        position: relative;
        display: block;
        vertical-align: top;
        width: auto;
        margin-bottom: 30px;
    }

    #footer .menu>ul:before {
        position: absolute;
        content: "";
        display: block;
        border-top: solid 5px #E60012;
        width: 40px;
        top: -10px;
    }

    #footer .menu>ul>li>a {
        display: block;
        padding: 8px;
        border-bottom: solid 1px #333;
    }

    #footer .menu>ul>li:last-child>a {
        border-bottom: none;
    }

    #footer .copyright {
        margin-top: 40px;
        font-size: 80%;
        text-align: center;
    }

    #footer .copyright a {
        display: block;
    }

    #footer .copyright a:hover {
        text-decoration: underline;
    }

    #footer .menu>ul>li {
        padding: 0px;
    }

    .listStyle1 {
        text-align: center;
    }

    .listStyle1 li {
        max-width: 43%;
        margin: 5px 5px 20px;
        font-size: 70%;
    }

    .listStyle1 li:hover {
        transition: 1s;
        box-shadow: 10px 8px 2px rgba(100, 100, 100, 0.5);
    }

    .listStyle1 li a {
        display: block;
        border: solid 1px #555;
    }

    .listStyle2 {
        text-align: center;
    }

    .listStyle2 li {
        width: auto;
        height: auto !important;
        display: block;
        margin: 0px 10px 20px;
        text-align: left;
        vertical-align: top;
        text-align: left;
    }

    .listStyle2 li:hover a {
        box-shadow: 0px 0px 0px rgba(100, 100, 100, 0);
    }

    .listStyle2 li a {
        display: block;
        border: none;
        border-bottom: solid 1px #aaa;
        padding: 15px;
        height: auto;
        overflow-y: auto;
    }

    .listStyle3 {
        text-align: center;
        font-size: 90%;
    }

    .listStyle3 li .inner {
        display: inline-block;
        vertical-align: top;
        border-bottom: none;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .listStyle3 li:last-child .inner {
        border-bottom: none;
    }

    .listStyle3 li .photoArea {
        width: auto;
        display: block;
    }

    .listStyle3 li .photoArea:has(.cs){
        width: min(100vw, 363px);
    }

    .listStyle3 li .textArea {
        width: auto;
        display: block;
        vertical-align: top;
        text-align: center;
        padding: 20px;
    }

    .listStyle5 li {
        width: 43%;
        margin: 0px 1% 40px;
    }

    .listStyle5_5 li {
        width: auto;
        margin: 0px 20px 40px;
    }

    .listStyle6 li {
        width: auto;
        margin: 0px 20px 40px;
    }

    .pcBlock {
        display: inline;
    }

    .w30 {
        width: 30% !important;
    }

    .w33 {
        width: 33% !important;
    }

    .pc-w30 {
        width: 30% !important;
    }

    .pc-w33 {
        width: 33% !important;
    }

    /*
===================================================
        sp slider
===================================================
 */
    #topSlider,
    #topSlider .bgCanvas,
    #topSlider .bgCanvas canvas,
    #topSlider li {
        height: 50vh;
    }

    #topSlider .btnRight,
    #topSlider .btnLeft {
        top: 50%;
    }

    #topSlider .btnLeft:after,
    #topSlider .btnRight:after {
        display: none;
    }

    #topSlider .btnLeft:before {
        width: 30px;
        height: 30px;
    }

    #topSlider .btnRight:before {
        width: 30px;
        height: 30px;
    }

    #bottomSlider {
        margin-top: 60px;
    }

    #bottomSlider .slick-prev {
        top: 30%;
        left: -20px;
        width: 20px;
        height: 20px;
    }

    #bottomSlider .slick-next {
        top: 30%;
        right: -20px;
        width: 20px;
        height: 20px;
    }

    /*
===================================================
        sp index
===================================================
 */
    .index #kawarasoba {
        padding: 60px 20px 30px;
    }

    .index #kawarasoba .textArea {
        float: none;
        width: auto;
        padding-left: 0%;
    }

    .index #kawarasoba .textArea .sub:after {
        position: absolute;
        content: "";
        display: block;
        border-bottom: solid 1px #555;
        width: 100%;
        top: 50%;
        z-index: 1;
    }

    .index #kawarasoba .img {
        float: none;
        width: 90%;
        margin: 0 auto 20px;
    }

    .index #kawarasoba .btn1 {
        text-align: center;
    }

    .index #news {
        padding: 60px 20px 30px;
    }

    .index #news .textArea {
        float: none;
        width: auto;
        padding: 15px;
        text-align: left;
    }

    .index #news .img {
        float: none;
        width: 90%;
        margin: 0 auto 20px;
    }

    .index #news .btn1 {
        text-align: center;
    }

    .index #unameshi {
        padding: 30px 20px 60px;
    }

    .index #unameshi .textArea {
        float: none;
        width: auto;
        padding-right: 0%;
    }

    .index #unameshi .img {
        float: none;
        width: 90%;
        margin: 0 auto 20px;
    }

    .index #unameshi .btn1 {
        text-align: center;
    }

    .index #otherMenu h3 {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 90%;
        padding-top: 10%;
    }

    .index #otherMenu h3 a {
        width: 90%;
        height: 82%;
        min-height: 0px;
    }

    .index #otherMenu .bg {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .index #otherMenu .bg img {
        height: 100%;
    }

    .index #otherMenu .menu1,
    .index #otherMenu .menu2 {
        width: auto;
        display: block;
        height: 80vw;
        position: relative;
        overflow: hidden;
    }

    .index #otherMenu .menu1:hover h3 a,
    .index #otherMenu .menu2:hover h3 a {
        color: #000;
        background: rgba(255, 255, 255, 0.8);
        text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    }

    .index #otherMenu h3 a:before {
        display: inline-block;
        content: "";
        height: 100%;
        width: 0px;
        overflow: hidden;
        vertical-align: middle;
    }

    .index #otherMenu h3 a .inner {
        display: inline-block;
        vertical-align: middle;
    }

    .index #otherMenu h3 a span {
        margin-top: 0px;
    }

    .index #otherMenu h3 a span:first-child {
        margin-top: 0px;
    }

    .index #otherMenu h3 a .link {
        position: absolute;
        bottom: 10px;
        left: 0px;
        text-align: center;
    }

    .index #shopGuide {
        background: #000;
        color: #fff;
        padding: 70px 0px;
    }

    .index #shopGuide .listStyle1.mt4em {
        margin-top: 40px;
    }

    .index #shopGuide a {
        color: #fff;
    }

    .index #netShop {
        background: url(../img/index/bg_netshop.jpg) no-repeat left center;
        color: #fff;
        height: 380px;
    }

    .index #netShop .inner {
        display: block;
        margin: 0px auto 0px;
        vertical-align: middle;
        max-width: 90%;
        padding-top: 60px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .index #news {
        padding: 70px 0px 70px;
    }

    .index #news .listStyle2.mt4em {
        margin-top: 40px;
    }

    /*
 ===================================================
  sp page
 ===================================================
 */
    .page #page {
        padding-top: 40px;
    }

    /*
===================================================
        sp page kawarasoba
===================================================
 */
    .page.kawarasoba #page h2 {
        height: 50vh;
    }

    .page.kawarasoba #page h2>span {
        display: none;
    }

    .page.kawarasoba #about {
        background: url(../img/kawarasoba/main.jpg) center center #000;
        background-size: cover;
        position: relative;
        min-height: 50vw;
    }

    .page.kawarasoba #about .textArea {
        position: relative;
        width: auto;
        top: 0px;
        left: 0px;
        color: #fff;
        padding: 40px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .page.kawarasoba #about2 {
        overflow: hidden;
        padding: 50px 0px;
    }

    .page.kawarasoba #about2 .photoArea {
        float: none;
        width: 80%;
        margin: 0 auto;
    }

    .page.kawarasoba #about2 .textArea {
        float: none;
        width: auto;
        padding: 20px;
    }

    .page.kawarasoba #point {
        color: #fff;
    }

    .page.kawarasoba #point h3 {
        text-align: center;
    }

    .page.kawarasoba #point h4 {
        margin-top: 10px;
        text-align: center;
    }

    .page.kawarasoba #point h4 span {
        border: solid 1px #fff;
        padding: 1px 8px;
        margin-right: 6px;
        font-size: 80%;
    }

    .page.kawarasoba #point p {
        margin-top: 1em;
    }

    .page.kawarasoba #point .point1 {
        text-align: center;
        padding: 0px
    }

    .page.kawarasoba #point .point1 .inner {
        display: block;
        width: auto;
        text-align: left;
        padding: 50px 30px;
    }

    .page.kawarasoba #point .point2 {
        padding: 50px 30px;
        display: block;
        width: auto;
    }

    .page.kawarasoba #point .point3 {
        padding: 50px 30px;
        display: block;
        width: auto;
    }

    .page.kawarasoba #point .point4 {
        padding: 50px 30px;
        display: block;
        width: auto;
    }

    .page.kawarasoba #how {
        overflow: hidden;
        padding: 50px 0px 70px;
    }

    .page.kawarasoba #how .mt4em {
        margin-top: 30px;
    }

    .page.kawarasoba #how #youtube {
        text-align: center;
    }

    .page.kawarasoba #how #youtube iframe {
        width: 95%;
        height: 50vw;
        display: inline-block;
    }

    .page.kawarasoba #how .listStyle2 li {
        max-width: none;
        border: none;
    }

    .page.kawarasoba #how .listStyle2 li .text {
        position: relative;
        text-align: left;
        padding-left: 3.5em;
        width: 70%;
        margin: 0 auto;
    }

    .page.kawarasoba #how .listStyle2 li .text .num {
        top: 1.2em;
        border-radius: 50%;
    }

    .page.kawarasoba #media .mt3em {
        margin-top: 20px;
    }

    /*
===================================================
 sp page store
===================================================
 */
    .page.store #about.mt4em {
        margin-top: 20px;
    }

    .page.storeDetail #page {
        padding-top: 0px;
    }

    .page.storeDetail #about {
        margin-top: 50px;
    }

    .page.storeDetail #about .maintext {
        text-align: left !important;
    }

    .page.storeDetail #about .tbl>* {
        display: block;
        width: auto;
        text-align: center !important;
    }

    .page.storeDetail #about .tbl p {
        text-align: left !important;
    }

    .page.storeDetail #about .tbl .photoCol2,
    .page.storeDetail #about .tbl .photoCol2 {
        display: inline-block;
        width: 45%;
        padding: 2%;
    }

    .page.storeDetail #info {
        border-top: solid 1px #aaa;
        margin-top: 50px;
        padding-top: 25px;
    }

    .page.storeDetail #info h3 {
        border-left: solid 4px #888;
        padding-left: 4px;
        margin-bottom: 10px;
    }

    .page.storeDetail #info .mr3em {
        margin-right: 0px;
    }

    .page.storeDetail #info .map {
        text-align: center;
    }

    .page.storeDetail #info .map iframe {
        display: inline-block;
        max-width: 800px;
        width: 100%;
    }

    .page.storeDetail #info .ib {
        display: block;
    }

    .page.storeDetail #item {
        padding: 50px 0px;
        background: #000;
        color: #fff;
    }

    .page.storeDetail .listStyle5 li .tbl *,
    .page.storeDetail .listStyle5_5 li .tbl * {
        display: block;
        width: auto;
        text-align: center !important;
    }

    /*
===================================================
 sp	page menu
===================================================
 */
    .page.menu #page {
        background: #000;
        color: #fff;
        padding-bottom: 50px;
    }

    .page.menu #page .mainItem {
        position: relative;
    }

    .page.menu #page .mainItem img {
        position: relative;
    }

    .page.menu #page .mainItem .textArea {
        position: static;
        background: #000;
        z-index: 2;
        bottom: -20px;
        right: 0px;
        padding: 20px 20px 30px;
        width: auto;
    }

    .page.menu #page .mainItem .textArea .btn1 {
        text-align: center;
    }

    .page.menu #item .tbl .cell6 {
        display: block;
        width: auto;
        text-align: center !important;
    }

    /*
===================================================
        sp page unameshi
===================================================
 */
    .page.unameshi #page {
        padding-top: 0px;
    }

    .page.unameshi #about {
        background: #000;
        padding: 40px 0px 0px;
        color: #fff;
    }

    .page.unameshi #about .bg {
        background: url(../img/unameshi/bg1.jpg) no-repeat left center;
        position: relative;
        min-height: 0px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    .page.unameshi #about .textArea {
        position: static;
        top: 0px;
        right: 0%;
        padding: 50px 20px;
        display: inline-block;
        text-align: left;
    }

    .page.unameshi #about .textArea h4 {
        text-align: center;
    }

    .page.unameshi #about2 {
        padding: 50px 0px 100px;
    }

    .page.unameshi #about2 .maxWidth {
        max-width: 450px;
    }

    .page.unameshi #about3 .bg1 {
        background: url(../img/unameshi/bg2.jpg) center center;
        background-size: cover;
        color: #fff;
        padding: 12%;
        display: block;
        width: auto;
    }

    .page.unameshi #about3 .bg2 {
        background: url(../img/unameshi/bg3.jpg) center center;
        background-size: cover;
        color: #fff;
        padding: 12%;
        display: block;
        width: auto;
    }

    .page.unameshi #how {
        overflow: hidden;
        padding: 50px 0px;
    }

    .page.unameshi #how .mt4em {
        margin-top: 20px;
    }

    .page.unameshi #how .listStyle2 li {
        max-width: none;
        border: none;
    }

    .page.unameshi #how .listStyle2 li .text {
        position: relative;
        text-align: left;
        padding-left: 3.5em;
        width: 70%;
        margin: 0 auto;
    }

    .page.unameshi #how .listStyle2 li .text .num {
        top: 1.2em;
        border-radius: 50%;
    }

    .page.unameshi #youtube {
        text-align: center;
    }

    .page.unameshi #youtube iframe {
        width: 95%;
        height: 50vw;
        display: inline-block;
    }

    /*
===================================================
        sp page kaiseki
===================================================
 */
    .page.kaiseki .mt4em {
        margin-top: 20px;
    }

    .page.kaiseki .photo {
        width: 100%;
    }

    .page.kaiseki h3 {
        border-bottom: solid 1px #aaa;
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .page.kaiseki .bg {
        background: none;
    }

    .page.kaiseki .text {
        width: 96%;
        padding: 2%;
    }

    /*
===================================================
 sp	page banquet
===================================================
 */
    .page.banquet #page {
        padding-top: 0px;
    }

    .page.banquet #item {
        padding: 50px 0px;
        background: #000;
        color: #fff;
    }

    .page.banquet #info {
        padding: 50px 0px;
    }

    .page.banquet .sougei {
        border-top: solid 1px #aaa;
        border-bottom: solid 1px #aaa;
        text-align: center;
        max-width: 960px;
        margin: 3em auto 0;
    }

    .page.banquet .sougei .inner {
        padding: 20px;
        display: inline-block;
        text-align: left;
        padding-right: 100px;
        background: url(../img/banquet/bg_bus.png) no-repeat right center;
        background-size: 100px auto;
        margin: 0px 10px;
    }

    .page.banquet .sougei .inner p {
        padding-right: 10px;
    }

    /*
===================================================
sp	page etc
===================================================
 */
    .page.etc #sitemap .tbl>* {
        display: block;
        width: auto;
    }
}


.kaisekiflex {
    display: flex;
    max-width: 966px;
    margin: 0 auto;
}

.kaisekiflex li {
    width: 90%;
    margin: 0 auto 80px;
}

@media screen and (max-width:768px) {
    .kaisekiflex {
        display: block;
        margin-bottom: 20px;
    }

    .kaisekiflex li {
        margin: 0 auto 30px;
    }
}

@media screen and (min-width:769px) {
    .kaisekiflex li {
        width: 45%;
    }
}

/*
===================================================
sp	cuisines
===================================================
 */
#cuisines {
    background-color: #000;
    color: #FFF;
    margin-top: 100px;
    padding-top: 50px;
    padding-bottom: 100px;
}

#cuisines h2 {
    border-bottom: 1px solid #FFF;
    padding-bottom: .8rem;
    margin-bottom: 3rem;
}

.cuisineList {
    display: flex;
    flex-wrap: wrap;
}

.cuisineItem {
    box-sizing: border-box;
    width: 50%;
    padding: 0 2%;
    margin-bottom: 4%;
}

.cuisineItemLink {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #FFF;
    font-size: 110%;
    font-size: clamp(110%, 3vw, 120%);
}

.cuisineItemLink:hover {
    opacity: .8;
}

.cuisineItem .image_box {
    position: relative;
    width: 100%;
    margin-bottom: .5rem;
}

.cuisineItem .image_box:empty {
    display: none;
}

.cuisineItem .image_box::before {
    content: "";
    display: block;
    padding-top: 66%;
}

.cuisineItem .image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cuisineItem .date,
.cuisineItem .title {
    display: inline-block;
}

.d-block {
    display: block;
}

.d-iblock {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-flex.wrap{
    flex-wrap: wrap;
}

.d-flex.j-center{
    justify-content: center;
}

.d-flex.ai-center{
    align-items: center;
}

@media screen and (max-width: 500px) {
    .sp-dinline {
        display: inline;
    }

    .sp-diblock {
        display: inline-block;
    }

    .sp-dblock {
        display: block;
    }

    .sp-dflex {
        display: flex;
    }
}

.entry_link {
    width: 85%;
    max-width: 714px;
    margin: 0 auto;
    background-color: #D33939;
    color: #FFF;
    display: block;
    text-align: center;
}

.entry_link_text {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-size: clamp(18px, 4vw, 200%);
    line-height: 3em;
    padding-right: 30px;
}

.entry_link_text::before,
.entry_link_text::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
}

.entry_link_text::before {
    border: 1px solid #FFF;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.entry_link_text::after {
    right: 9px;
    border-right: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    width: 7px;
    height: 7px;
    transform: rotate(-45deg);
}

.limited_news_wrap {
    display: block;
    margin: 2rem auto;
    font-size: 0.8em;
}

.limited_news_wrap p {
    width: max-content;
    font-size: 1.5em;
    background: #000;
    color: #fff;
    /*border-bottom: solid 5px #E60012;*/
    margin: 1em auto;
    padding: 0.5em;
}

.limited_news_table_wrap {
    display: flex;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.limited_news_wrap tbody {
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.limited_news_table_th {
    display: none;
}

.limited_news_table_wrap tr {
    /*max-width: 421px;*/
}

.limited_news_tables {
    display: block;
}

.limited_news_tables tbody {
    display: block;
    /*width: 421px;*/
}

.limited_news_wrap table th {
    display: block;
    /* margin: 0 auto; */
    font-size: 1.2em;
    border-bottom: solid 3px #E60012;
}

.limited_news_tables tr {
    display: flex;
    margin: 0 0.7em 0.7em;
    padding: 0 0.5em;
}

.limited_news_tables td {
    /*border-bottom: solid #000 1px;*/

}

.limited_news_tables td:nth-of-type(2n) {
    margin-left: 1em;
}

.break-keep {
    word-break: keep-all;
}

/* 20230809追加 */
.sp_only {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp_only {
        display: block;
    }
}