@charset "utf-8";

/*----- header -----*/
header {
    position: relative;
    width: 100%;
    height: 100vh;
}
header div.block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    margin: 0 auto;
}
header .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: auto;
    height: 30vh;
    max-height: 225px;
    transform: translate(-50%, -50%);
}
header div.scroll {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    padding: 0 0 10vh;
    margin: 0 auto;
}
header div.scroll::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 7.5vh;
    top: 0;
    left: 0;
    right: 0;
    background: #FFF;
    animation: scrollbar 2.5s ease-in-out infinite;
    margin: auto;
}

header a.newsBtn {
    position: fixed;
    top: 20px;
    left: 2.5%;
    z-index: 99;
    color: #FFF;
    font-size: calc( 9 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: 1.5;
}
header a.newsBtn::before {
    content: "●";
    display: inline-block;
    margin: 0 0.5em 0 0;
}
header a.newsBtn:hover {
    filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}

.swiper {
    overflow: hidden;
}
.swiper-slide {
    width: 100%;
    height: 100vh;
}
.swiper-slide.slide1 {
    background: url("../images/home_img1.jpg") no-repeat center center;
    background-size: cover;
}
.swiper-slide.slide2 {
    background: url("../images/home_img2.jpg") no-repeat center center;
    background-size: cover;
}
.swiper-slide.slide3 {
    background: url("../images/home_img3.jpg") no-repeat center center;
    background-size: cover;
}

@keyframes scrollbar {
  0% {
    height: 0;
    top: 0;
  }
  20% {
    height: 0;
    top: 0;
  }
  40% {
    height: 100%;
  }
  100% {
    top: 100%;
  }
}

@media screen and (max-width: 767px) {
header {
    position: relative;
    width: 100%;
    height: 100vh;
}
header div.block {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    margin: 0 auto;
}
header .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 9;
    width: auto;
    height: 20vh;
    max-height: 225px;
    transform: translate(-50%, -50%);
}
header div.scroll {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    width: 100%;
    padding: 0 0 10vh;
    margin: 0 auto;
}
header div.scroll::before {
    content: "";
    position: absolute;
    display: block;
    width: 1px;
    height: 7.5vh;
    top: 0;
    left: 0;
    right: 0;
    background: #FFF;
    animation: scrollbar 2.5s ease-in-out infinite;
    margin: auto;
}

.swiper {
    overflow: hidden;
}
.swiper-slide {
    width: 100%;
    height: 100vh;
}
.swiper-slide.slide1 {
    background: url("../images/home_img_sp1.jpg") no-repeat center center;
    background-size: cover;
}
.swiper-slide.slide2 {
    background: url("../images/home_img_sp2.jpg") no-repeat center center;
    background-size: cover;
}
.swiper-slide.slide3 {
    background: url("../images/home_img_sp3.jpg") no-repeat center center;
    background-size: cover;
}
}

/*----- main -----*/
.mainTtl {
    font-family: "georgia", sans-serif;
    font-size: clamp(calc( 30 / var(--root-font-size) * 1rem ), 2.8vw, calc( 42 / var(--root-font-size) * 1rem ));
    letter-spacing: 0.1em;
    line-height: 1.5;
    padding: 0 0 50px;
}
.mainTtl.center {
    font-size: calc( 30 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: 2;
    text-align: center;
    text-indent: 0.1em;
}

.imgWrap1 {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 100px 0 0;
}
.imgWrap1 .img1 {
    width: 32%;
    height: 30vw;
    background: url("../images/index_img2.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 0 0 10%;
}
.imgWrap1 .img2 {
    width: 48%;
    height: 56vw;
    background: url("../images/index_img3.jpg") no-repeat center center;
    background-size: cover;
}
.imgWrap2 {
    width: 100%;
    padding: 100px 0;
}
.imgWrap2 .img {
    width: 65%;
    height: 50vw;
    background: url("../images/index_img5.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 0 0 auto;
}

@media screen and (max-width: 767px) {
.mainTtl {
    font-family: "georgia", sans-serif;
    font-size: calc( 21 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: 1.5;
    padding: 0 0 25px;
}
.mainTtl.center {
    font-size: calc( 21 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: 2;
    text-align: center;
    text-indent: 0.1em;
}
section#restaurant .mainTtl {
    text-align: center;
    text-indent: 0.1em;
}

.imgWrap1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
    padding: 25px 0 0;
    margin: 0 auto;
}
.imgWrap1 .img1 {
    width: 53.6vw;
    height: 50.25vw;
    background: url("../images/index_img2.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 0 10vw;
}
.imgWrap1 .img2 {
    width: 82.5vw;
    height: 96.25vw;
    background: url("../images/index_img3.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 0 0 auto;
}
.imgWrap2 {
    width: 100%;
    padding: 25px 0 0;
}
.imgWrap2 .img {
    width: 100%;
    height: 80vw;
    background: url("../images/index_img5.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 auto;
}
}

/*----- About -----*/
section#about {
    padding: 100px 0;
}
section#about .copy {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    font-size: calc( 30 / var(--root-font-size) * 1rem );
    line-height: 1.5;
    text-align: center;
    text-indent: 0.1em;
    padding: 0 0 100px;
}
section#about .copy span {
    font-size: calc( 21 / var(--root-font-size) * 1rem );
}
section#about div.block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}
section#about div.block div.blockL {
    width: 40%;
    margin: 0 2vw;
}
section#about div.block div.blockL .img {
    width: 100%;
    height: 52vw;
    background: url("../images/index_img1.jpg") no-repeat center center;
    background-size: cover;
}
section#about div.block div.blockR {
    width: 40%;
    margin: 0 10vw 0 0;
}
section#about div.block div.blockR p.txt {
    font-size: calc( 15 / var(--root-font-size) * 1rem );
    line-height: 2;
}

@media screen and (max-width: 767px) {
section#about {
    padding: 75px 0 0;
}
section#about .copy {
    font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    line-height: 1.5;
    text-align: center;
    text-indent: 0.1em;
    padding: 0 0 50px;
}
section#about .copy span {
    font-size: calc( 21 / var(--root-font-size) * 1rem );
}
section#about div.block {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}
section#about div.block div.blockL {
    width: 95%;
    margin: 0 auto;
}
section#about div.block div.blockL .img {
    width: 100%;
    height: 120vw;
    background: url("../images/index_img1.jpg") no-repeat center center;
    background-size: cover;
}
section#about div.block div.blockR {
    width: 80%;
    padding: 0 0 75px;
    margin: 0 auto;
}
section#about div.block div.blockR p.txt {
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 2;
    text-align: center;
    text-indent: 0.05em;
}
}

/*----- Restaurant -----*/
section#restaurant {
    width: 80%;
    padding: 100px 0;
    margin: 0 auto;
}
section#restaurant div.block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 100px;
    margin: 0 auto;
}
section#restaurant div.block div.blockL {
    width: 33.75%;
}
section#restaurant div.block div.blockR {
    width: 66.75%;
}
section#restaurant div.block div.blockR section {
    display: flex;
    margin: 0 0 75px;
}
section#restaurant div.block div.blockR section .ttl {
    width: 22.5%;
    font-family: "georgia", sans-serif;
    font-size: calc( 24 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: clamp(30px, 2.8vw, 42px);
    padding: clamp(7.5px, 0.7vw, 10.5px) 0;
}
section#restaurant div.block div.blockR section p.txt {
    width: 77.5%;
    font-size: calc( 15 / var(--root-font-size) * 1rem );
    line-height: 2;
    padding: clamp(7.5px, 0.7vw, 10.5px) 0 0;
}
section#restaurant div.block div.blockR section p.txt span {
    font-weight: 700;
}
section#restaurant div.block div.blockR a.btn {
    display: inline-block;
    width: 300px;
    height: 60px;
    border: #FFF solid 1px;
    color: #FFF;
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    line-height: 58px;
    text-align: center;
    text-indent: 0.05em;
    margin: 0 0 0 22.5%;
}
section#restaurant div.block div.blockR a.btn:hover {
    filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}
section#restaurant section#chef {
    width: 100%;
    padding: 100px 0 0;
    margin: 0 auto;
}
section#restaurant section#chef .img {
    width: 43vw;
    height: 29vw;
    background: url("../images/index_img4.jpg") no-repeat center center;
    background-size: cover;
}
section#restaurant section#chef p.txt {
    width: 75%;
    font-size: calc( 15 / var(--root-font-size) * 1rem );
    line-height: 2;
    padding: 100px 0;
    margin: 0 0 0 auto;
}
section#restaurant section#chef div.profile {
    width: 75%;
    background: #66433C;
    padding: 45px min(4vw, 60px);
    margin: 0 0 0 auto;
}
section#restaurant section#chef div.profile div.inner {
    position: relative;
    z-index: 1;
}
section#restaurant section#chef div.profile p {
    font-size: calc( 15 / var(--root-font-size) * 1rem );
    line-height: 2;
}
section#restaurant section#chef div.profile a {
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    text-decoration: underline;
}
section#restaurant section#chef div.profile p.name {
    font-size: calc( 18 / var(--root-font-size) * 1rem );
    margin: 0 0 2em;
}
section#restaurant section#chef div.profile p.txt a:hover {
    text-decoration: none;
}

@media screen and (max-width: 767px) {
section#restaurant {
    width: 100%;
    padding: 50px 0 75px;
    margin: 0 auto;
}
section#restaurant div.block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
    padding: 0 0 50px;
    margin: 0 auto;
}
section#restaurant div.block div.blockL {
    width: 100%;
}
section#restaurant div.block div.blockR {
    width: 100%;
}
section#restaurant div.block div.blockR section {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 50px;
}
section#restaurant div.block div.blockR section .ttl {
    width: 100%;
    font-family: "georgia", sans-serif;
    font-size: calc( 14 / var(--root-font-size) * 1rem );
    letter-spacing: 0.1em;
    line-height: 1.5;
    text-align: center;
    text-indent: 0.1em;
    padding: 0 0 25px;
}
section#restaurant div.block div.blockR section p.txt {
    width: 100%;
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 2;
    padding: 0;
}
section#restaurant div.block div.blockR section p.txt span {
    font-weight: 700;
}
section#restaurant div.block div.blockR a.btn {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    height: 45px;
    border: #FFF solid 1px;
    color: #FFF;
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 43px;
    text-align: center;
    text-indent: 0.05em;
    margin: 0 auto;
}
section#restaurant div.block div.blockR a.btn:hover {
    filter: alpha(opacity=60);
    -khtml-opacity: 0.6;
    -moz-opacity: 0.6;
    opacity: 0.6;
}
section#restaurant section#chef {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    padding: 50px 0 0;
    margin: 0 auto;
}
section#restaurant section#chef .img {
    order: 2;
    width: 100%;
    height: 53.95vw;
    background: url("../images/index_img4.jpg") no-repeat center center;
    background-size: cover;
    margin: 0 0 10px;
}
section#restaurant section#chef p.txt {
    order: 1;
    width: 100%;
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 2;
    padding: 25px 0;
    margin: 0 auto;
}
section#restaurant section#chef div.profile {
    order: 3;
    width: 100%;
    background: #66433C;
    padding: 30px min(6vw, 22.5px);
    margin: 0 auto;
}
section#restaurant section#chef div.profile div.inner {
    position: relative;
    z-index: 1;
}
section#restaurant section#chef div.profile p {
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 2;
}
section#restaurant section#chef div.profile a {
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    text-decoration: underline;
}
section#restaurant section#chef div.profile p.name {
    font-size: calc( 12 / var(--root-font-size) * 1rem );
    margin: 0 0 2em;
}
section#restaurant section#chef div.profile p.txt a:hover {
    text-decoration: none;
}
}

/*----- Shop -----*/
section#shop {
    width: 55%;
    padding: 100px 0 75px;
    margin: 0 10% 0 auto;
}
section#shop p {
    font-size: calc( 15 / var(--root-font-size) * 1rem );
    line-height: 2;
}

@media screen and (max-width: 767px) {
section#shop {
    width: 80%;
    padding: 50px 0;
    margin: 0 auto;
}
section#shop p {
    font-size: calc( 10 / var(--root-font-size) * 1rem );
    line-height: 2;
}
}

/*----- News -----*/
section#news {
    width: 55%;
    padding: 100px 0 150px;
    margin: 0 10% 0 auto;
}
section#news ul li.article {
    position: relative;
    background: transparent;
    border-bottom: #FFF solid 1px;
    padding: 30px 60px 30px 30px;
    transition: all 1.5s 0s ease-in-out;
}
section#news ul li.article:first-child {
    border-top: #FFF solid 1px;
}
section#news ul li.article:hover {
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.25s 0s ease-in-out;
}
section#news ul li.article::before,
section#news ul li.article::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    width: 15px;
    height: 1px;
    background: #FFF;
    margin: auto 0;
}
section#news ul li.article::before {
}
section#news ul li.article::after {
    transform: rotate(90deg);
}
section#news ul li.article div {
    display: flex;
    align-items: center;
}
section#news ul li.article a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#news ul li p {
    line-height: 1.5;
}

@media screen and (max-width: 767px) {
section#news {
    width: 80%;
    padding: 50px 0;
    margin: 0 auto;
}
section#news ul li.article {
    position: relative;
    background: transparent;
    border-bottom: #FFF solid 1px;
    padding: 15px 27px 15px 0;
    transition: all 1.5s 0s ease-in-out;
}
section#news ul li.article:first-child {
    border-top: #FFF solid 1px;
}
section#news ul li.article:hover {
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.25s 0s ease-in-out;
}
section#news ul li.article::before,
section#news ul li.article::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 7px;
    width: 7px;
    height: 1px;
    background: #FFF;
    margin: auto 0;
}
section#news ul li.article::before {
}
section#news ul li.article::after {
    transform: rotate(90deg);
}
section#news ul li.article div {
    display: flex;
    align-items: center;
}
section#news ul li.article a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
section#news ul li p {
    line-height: 1.5;
}
}