@charset "UTF-8";

/*=============================================
 * HOME
*=============================================*/
.btn-scroll {
   width: 12px;
   cursor: pointer;
   transition: all 0.3s;
   position: relative;
   text-align: center;
}

.btn-scroll dd {
   background-color: #ccc;
   width: 1px;
   height: 180px;
   margin: 10px auto 0;
   position: relative;
   overflow: hidden;
}

.btn-scroll dd:after {
   content: '';
   width: 100%;
   height: 100%;
   background-color: #008570;
   position: absolute;
   top: 0;
   left: 0;
   animation: sdl01 2s infinite;
}

.btn-scroll:hover {
   opacity: 0.7;
}

@keyframes sdl01 {
   0% {
      transform: translateY(-100%);
   }

   100% {
      transform: translateY(100%);
   }
}

/* -- -- */
#mv {
   display: flex;
   width: 100%;
   height: 100vh;
   position: relative;
}

/* animation cho ảnh thường */
@keyframes main {
   0% {
      opacity: 0;
      transform: scale(1);
   }

   10% {
      opacity: 1;
   }

   45% {
      opacity: 1;
   }

   55% {
      opacity: 0;
   }

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

/* animation riêng cho ảnh đầu */
@keyframes firstImageAnimation {
   0% {
      opacity: 1;
      transform: scale(1);
   }

   45% {
      opacity: 1;
   }

   55% {
      opacity: 0;
   }

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

/* layout */
.mv-img {
   width: 50%;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.mv-img .img {
   position: absolute;
   inset: 0;
}

.mv-img .img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   --animation-duration: 20s;
   --animation-delay-base: calc(var(--animation-duration) / 5);
   animation: main var(--animation-duration) linear infinite;
   transition: transform ease .4s, -webkit-transform ease .4s;
}

.mv-img .img:nth-child(1) img {
   opacity: 1;
   animation: firstImageAnimation var(--animation-duration) linear infinite;
}

.mv-img .img:nth-child(2) img {
   animation-delay: calc(var(--animation-delay-base));
}

.mv-img .img:nth-child(3) img {
   animation-delay: calc(2 * var(--animation-delay-base));
}

.mv-img .img:nth-child(4) img {
   animation-delay: calc(3 * var(--animation-delay-base));
}

.mv-img .img:nth-child(5) img {
   animation-delay: calc(4 * var(--animation-delay-base));
}

.mv-img .img:nth-child(6) img {
   animation-delay: calc(5 * var(--animation-delay-base));
}

.mv-title {
   width: max-content;
   position: absolute;
   bottom: -2.8vw;
   left: 50%;
   color: #fff;
   text-align: right;
   transform: translateX(-50%);
}

.mv-title .sub {
   font-family: "Zen Old Mincho", serif;
   font-weight: 700;
   font-style: normal;
   font-size: 2.4vw;
   line-height: 1.28;
}

.mv-title h2 {
   font-family: "Marcellus", serif;
   font-weight: 400;
   font-style: normal;
   font-size: 9.38vw;
   line-height: 1.28;
   letter-spacing: 0;
   text-transform: uppercase;
}

@media screen and (max-width: 767px) {
   #mv {
      flex-direction: column;
   }

   .mv-title {
      left: 52%;
   bottom: -2.2vw;
   }

   .mv-img {
      width: 100%;
      height: 50%;
   }

   .mv-title .sub {
      font-size: 4.2vw;
			margin-bottom:15px
   }
		.mv-title h2 {
	   font-size: 14.38vw;
	   line-height: 1.00;
	}
}

/* -- --*/
#concept {
   position: relative;
}

#concept .wrap {
   padding-top: 340px;
   padding-bottom: 100px;
}

#concept h3 {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 220px;
   height: 762px;
   font-weight: 500;
   font-size: 38px;
   letter-spacing: 0.3em;
   line-height: 1.57;
   background: url("../img/index/concept-deco.webp") no-repeat center top/cover;
   position: absolute;
   bottom: 0;
   right: 0;
}

#concept h3>span {
   width: 220px;
   height: 480px;
   margin: 0 auto;
}

#concept h3>span span {
   display: block;
}

#concept h3>span span:nth-child(2) {
   padding-top: 60px;
   padding-right: 20px;
}

#concept h3>span span:nth-child(3) {
   padding-top: 120px;
   padding-right: 20px;
}

#concept .txt {
   width: calc(100% - 250px);
   max-width: 795px;
   letter-spacing: 0.06em;
   line-height: 2.54;
   padding-top: 75px;
}

#concept .button {
   padding-top: 60px;
}

@media screen and (max-width: 1023px) {
   #concept h2 {
      font-size: 40px;
   }

   #concept h3 {
      position: static;
      margin: 50px auto 0;
   }

   #concept .txt {
      width: auto;
   }
}

@media screen and (max-width: 767px) {
   #concept .wrap {
      padding-top: 100px;
      padding-bottom: 100px;
   }

   #concept h2 {
      font-size: 24px;
   }
	
	#concept h3 {
	   width: 180px;
	   height: 292px;
	   font-size: 21px;
	   letter-spacing: 0.3em;
	   line-height: 1.47;
	   margin-top: 30px;
	}

   #concept h3>span {
      width: 182px;
      height: 280px;
	   margin-left:-32px;
   }

   #concept h3>span span:nth-child(2) {
      padding-top: 50px;
   }

   #concept h3>span span:nth-child(3) {
      padding-top: 80px;
   }

   #concept .txt {
      padding-top: 30px;
   }

   #concept .button {
      padding-top: 30px;
   }
}

/* -- --*/
#menu {
   position: relative;
   margin: 250px 0 340px;
}

#menu .slider {
   display: flex;
   width: 95%;
   max-width: calc(50% + 610px);
   margin-left: auto;
   box-sizing: border-box;
   padding: 110px 0;
}

#menu .slider figure {
   width: 444px;
   margin-right: 66px;
}

#menu .slider figure figcaption {
   padding-top: 20px;
}

#menu .slick-arrow {
   position: absolute;
   bottom: 0;
}

#menu .slick-prev {
   left: 0;
}

#menu .slick-next {
   left: 40px;
}

#menu .button {
   position: absolute;
   top: 130px;
   right: calc(50% - 610px);
}

@media screen and (max-width: 1440px) {
   #menu .button {
      right: 5%;
      left: auto;
   }
}

@media screen and (max-width: 767px) {
   #menu {
      margin: 0 0 100px;
   }

   #menu .slider {
      padding: 30px 0 80px;
   }

   #menu .slider figure {
      width: 70vw;
      margin-right: 20px;
   }

   #menu .button {
      top: auto;
      bottom: -11px;
   }
}

/* -- --*/
#news {
   color: #fff;
   position: relative;
   padding: 340px 0;
}

#news video {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;
   left: 0;
}

#news .wrap {
   z-index: 1;
}

#news .box {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 70px;
   padding-top: 100px;
}

#news .box figure a {
   display: block;
   width: 100%;
   padding-top: 108%;
   position: relative;
}

#news .box figure img {
   position: absolute;
   top: 0;
   left: 0;
}

#news .box h3 {
   padding-top: 15px;
}

#news .box h3 a {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
}

#news .box time {
   display: block;
   font-size: 15px;
   letter-spacing: 0.16em;
   padding-top: 30px;
}

#news .button {
   position: absolute;
   top: 125px;
   right: 0;
}

@media screen and (max-width: 1023px) {
   #news {
      padding: 100px 0;
   }

   #news .box {
      display: block;
      padding-top: 30px;
   }

   #news .box .slick-list {
      margin: 0 -10px;
   }

   #news .box .col {
      margin: 0 10px;
   }

   #news .box time {
      padding-top: 15px;
   }

   #news .box h3 {
      padding-top: 10px;
   }

   #news .box .slick-arrow {
      width: 40px;
      height: 50px;
      background-image: url("../img/common/slider-arrow.webp");
      background-size: 18px auto;
      position: absolute;
      bottom: -105px;
      z-index: 1;
   }

   #news .box .slick-arrow:hover {
      opacity: 1;
   }

   #news .box .slick-prev {
      left: 0;
   }

   #news .box .slick-next {
      left: 50px;
   }

   #news .button {
      padding-top: 50px;
      position: static;
      text-align: right;
   }
}

@media screen and (max-width: 767px) {
   #news .wrap {
      padding: 0 5%;
   }
}

/* -- --*/
.cta {
   padding: 340px 0;
   position: relative;
   color: #fff;
}

.cta .wrap {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   width: 100%;
   max-width: 100%;
}

.cta .col {
   display: block;
   position: relative;
}

.cta .col:hover {
   opacity: 1;
}

.cta .text {
   position: absolute;
   top: 50%;
   right: 0;
   left: 0;
   transform: translateY(-50%);
}

.cta h2 {
   padding-bottom: 50px;
}

.cta .more {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 14px;
   text-transform: uppercase;
   position: absolute;
   right: 25px;
   bottom: 25px;
}

.cta .more:before {
   content: '';
   width: 6px;
   height: 6px;
   background-color: #fff;
   border-radius: 50%;
   display: block;
}

.cta .more span {
   border-bottom: 1px solid;
}

@media screen and (max-width: 1440px) {
   .cta h2 {
      font-size: 40px;
   }
}

@media screen and (max-width: 1200px) {
   .cta h2 {
      font-size: 30px;
      padding-bottom: 20px;
   }

   .cta h2 .en {
      margin-bottom: 10px;
   }

   .cta .txt {
      font-size: 17px;
   }
}

@media screen and (max-width: 1023px) {
   .cta .wrap {
      grid-template-columns: 1fr;
   }
}

@media screen and (max-width: 767px) {
   .cta {
      padding: 100px 0;
   }

   .cta h2 {
      font-size: 22px;
   }

   .cta .txt {
      font-size: 12px;
   }

   .cta .more {
      gap: 10px;
      font-size: 12px;
      right: 20px;
      bottom: 20px;
   }
}

/*=============================================
 * メニュー
*=============================================*/
.menu-button {
   padding-top: 340px;
}

.menu-button ul {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px 40px;
}

.menu-button .button a {
   min-width: inherit;
}

@media screen and (max-width: 1023px) {
   .menu-button ul {
      gap: 20px;
   }

   .menu-button .button a {
      padding: 0 30px 2px 50px;
   }
}

@media screen and (max-width: 767px) {
   .menu-button {
      padding-top: 100px;
   }

   .menu-button .button {
      flex-direction: column;
      flex-wrap: nowrap;
   }

   .menu-button .button a {
      min-width: 240px;
   }
}

.menu-section {
   margin-top: 140px;
   color: #333;
   line-height: 1.73;
}

.menu-section+.menu-section {
   margin-top: 320px;
}

.menu-section .box {
   padding-top: 50px;
}

.menu-section .box+.box {
   padding-top: 80px;
}

.menu-section .box h3 {
   font-weight: 700;
   font-size: 24px;
   line-height: 2.54;
   letter-spacing: 0.04em;
   border-bottom: 1px solid #C7C7C7;
}

.menu-section .box h3 small {
   font-weight: 500;
   font-size: 17px;
   color: #555;
   margin-left: 20px;
}

.menu-section .box h3+.list-menu {
   padding-top: 50px;
}

.menu-section .list-menu {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px 50px;
}

.menu-section .list-menu figure {
   padding-bottom: 15px;
}

.menu-section .list-menu:has(figure) {
   gap: 50px;
}

.menu-section .list-menu.grid_1 {
   grid-template-columns: 1fr;
}

.menu-section .topping {
   background-color: #FAFAFA;
   margin-top: 40px;
   padding: 30px 25px;
}

.menu-section .topping h4 {
   font-weight: 700;
   font-size: 18px;
}

.menu-section .topping .txt {
   padding-top: 10px;
}

@media screen and (max-width: 1023px) {
   .menu-section .list-menu {
      grid-template-columns: repeat(2, 1fr);
   }

   .menu-section .box h3 small {
      display: block;
      font-size: 15px;
      margin-left: 0;
      padding-bottom: 10px;
   }
}

@media screen and (max-width: 767px) {
   .menu-section {
      margin-top: 70px;
   }

   .menu-section+.menu-section {
      margin-top: 100px;
   }

   .menu-section h2 {
      font-size: 28px;
   }

   .menu-section h2 .en {
      font-size: 13px;
   }

   .menu-section .list-menu {
      grid-template-columns: 1fr;
   }

   .menu-section .list-menu:has(figure) {
      gap: 30px;
   }

   .menu-section .topping {
      margin-top: 30px;
      padding: 20px;
   }

   .menu-section .box {
      padding-top: 30px;
   }

   .menu-section .box+.box {
      padding-top: 50px;
   }

   .menu-section .box h3 {
      font-size: 20px;
      line-height: 1.5;
      padding-bottom: 10px;
   }

   .menu-section .box h3 small {
      font-size: 14px;
      padding: 10px 0 5px;
   }

   .menu-section .box h3+.list-menu {
      padding-top: 30px;
   }
}

/*=============================================
 * Post type
*=============================================*/
.wp-pagenavi {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
   gap: 10px;
   font-size: 16px;
   margin-top: 100px;
   position: relative;
   color: #656565;
}

.wp-pagenavi .pages {
   display: none;
}

.wp-pagenavi span,
.wp-pagenavi a {
   display: block;
   border-bottom: 1px solid transparent;
}

.wp-pagenavi .previouspostslink {
   margin-right: 20px;
}

.wp-pagenavi .nextpostslink {
   margin-left: 20px;
}

.wp-pagenavi a:hover {
   border-bottom-color: #656565;
}

.wp-pagenavi .current {
   pointer-events: none;
   border-bottom-color: #656565;
}

@media screen and (max-width: 767px) {
   .wp-pagenavi {
      margin-top: 50px;
   }

   .wp-pagenavi a,
   .wp-pagenavi span {
      font-size: 16px;
   }
}

/* -- -- */
/* -- -- */
.news__list {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 80px 50px;
   color: #333;
   line-height: 1.73;
}

.news__list figure a {
   width: 100%;
   padding-top: 68.8%;
   position: relative;
}

.news__list figure img {
   position: absolute;
   top: 0;
   left: 0;
}

.news__list time {
   display: block;
   font-weight: 400;
   font-size: 15px;
   letter-spacing: 0.1em;
   padding-top: 20px;
}

.news__list .ttl {
   font-weight: 500;
   font-size: 18px;
   letter-spacing: 0.04em;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   display: -webkit-box;
   overflow: hidden;
   margin-top: 5px;
}

@media screen and (max-width: 1023px) {
   .news__list {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 767px) {
   .news__list {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .news__list time {
      font-size: 13px;
   }

   .news__list .ttl {
      font-size: 16px;
   }
}

/*=============================================
 * Post
 *=============================================*/
.pt-news {
   padding-top: 340px;
}

@media screen and (max-width: 767px) {
   .pt-news {
      padding-top: 100px;
   }
}

/*=============================================
 * Post Detail
 *=============================================*/
.pt-detail {
   color: #333;
   line-height: 1.73;
   position: relative;
   padding-top: 340px;
}

.pt-detail-time {
   display: block;
   font-weight: 400;
   font-size: 15px;
   letter-spacing: 0.1em;
}

.pt-detail-cate {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 10px;
   font-weight: 500;
   line-height: 30px;
}

.pt-detail-cate a {
   display: block;
   background-color: #1471CA;
   color: #fff;
   font-weight: 700;
   font-size: 15px;
   line-height: 30px;
   padding: 5px 20px;
}

.pt-detail-cate a:hover {
   background-color: #333;
   opacity: 1;
}

.pt-detail-title {
   width: 100%;
   font-weight: 700;
   font-size: 34px;
   letter-spacing: 0.06em;
}

.pt-detail-content {
   letter-spacing: 0.02em;
   line-height: 1.83;
   margin-top: 50px;
}

.pt-detail-content .thumbnail {
   margin-bottom: 70px;
}

.pt-detail-content h2 {
   background-color: #f2f2f2;
   font-weight: 700;
   font-size: 24px;
   letter-spacing: 0.04em;
   margin: 70px 0 35px;
   padding: 20px 25px;
}

.pt-detail-content h3 {
   font-weight: 700;
   font-size: 22px;
   letter-spacing: 0.04em;
   border-bottom: 2px solid #D2D2D2;
   margin: 70px 0 35px;
   padding: 0 0 10px;
}

.pt-detail-content h4 {
   font-weight: 700;
   font-size: 20px;
   letter-spacing: 0.02em;
   border-left: 5px solid #3D3D3D;
   margin: 70px 0 35px;
   padding: 0 0 0 15px;
}

.pt-detail-content h1:first-child,
.pt-detail-content h2:first-child,
.pt-detail-content h3:first-child,
.pt-detail-content h4:first-child,
.pt-detail-content h5:first-child,
.pt-detail-content h6:first-child {
   margin-top: 0;
}

.pt-detail-content h2+h3,
.pt-detail-content h2+h4,
.pt-detail-content h3+h4 {
   margin-top: 0;
}

.pt-detail-content mark {
   background-color: #FFF6A8;
   color: #333;
}

.pt-detail-content strong {
   font-weight: 700;
}

.pt-detail-content a {
   text-decoration: underline;
}

.pt-detail-content a:hover {
   text-decoration: none;
}

.pt-detail-content hr {
   margin: 30px 0;
}

.pt-detail .button {
   padding-top: 110px;
}

@media screen and (max-width: 1023px) {
   .pt-detail-content p img {
      display: block;
      margin: 0 auto 15px;
   }

   .pt-detail-content p img:last-child {
      margin: 0 auto;
   }
}

@media screen and (max-width: 767px) {
   .pt-detail {
      padding-top: 100px;
   }

   .pt-detail-cate a {
      padding: 0 15px;
   }

   .pt-detail-time {
      font-size: 13px;
   }

   .pt-detail-title {
      font-size: 22px;
      line-height: 32px;
   }

   .pt-detail-content {
      margin-top: 20px;
   }

   .pt-detail-content .thumbnail {
      margin-bottom: 40px;
   }

   .pt-detail-content h2 {
      font-size: 22px;
      line-height: 32px;
      padding: 15px 20px;
   }

   .pt-detail-content h3 {
      font-size: 20px;
      line-height: 30px;
   }

   .pt-detail-content h4 {
      font-size: 18px;
      line-height: 26px;
   }

   .pt-detail-content p img {
      display: block;
      margin: 0 auto 15px;
   }

   .pt-detail-content p img.alignright {
      margin: 0 auto 15px;
   }

   .pt-detail-content p img:last-child {
      margin: 0 auto !important;
   }

   .pt-detail .button {
      padding-top: 50px;
   }

   .pt-detail hr {
      margin-top: 40px;
   }
}

/*# sourceMappingURL=contents.css.map */

#leads .intro {
   margin-top: 100px;
   font-size: 20px;
}

#leads .box {
   display: grid;
   grid-template-columns: 1fr 450px;
   gap: 70px;
   background: url("../img/bg.png") no-repeat center top/cover;
   margin-top: 90px;
   padding: 70px 60px;
}

#leads .box h3 {
   display: inline-block;
   background-color: #333;
   color: #fff;
   padding: 8px 27px;
}

#leads .box .txt {
   padding-top: 35px;
}

@media screen and (max-width: 1023px) {
   #leads .box {
      grid-template-columns: 1fr;
   }

   #leads .box figure {
      text-align: center;
   }
}

@media screen and (max-width: 767px) {
   #leads {
      padding: 50px 0;
   }

   #leads .swiper-slide {
      width: 260px;
      margin-right: 30px;
   }

   #leads .desc {
      font-size: 16px;
      line-height: 32px;
      padding-top: 20px;
   }

   #leads .box {
      gap: 20px;
      padding: 20px;
      margin-top: 40px;
   }

   #leads .box .txt {
      padding-top: 15px;
      font-size: 15px;
   }

   #leads .intro {
      margin-top: 50px;
      font-size: 16px;
   }
}


#features .box {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 60px 70px;
   padding-top: 100px;
}

#features .box h3,
#features .box .txt {
   padding-top: 20px;
}

@media screen and (max-width: 1023px) {
   #features .box {
      gap: 60px 30px;
   }
}

@media screen and (max-width: 767px) {
   #features {
      background-size: 120% auto;
      padding: 50px 0;
   }

   #features h2 .ja {
      width: auto;
      padding: 4px 20px;
   }

   #features .box {
      grid-template-columns: 100%;
      gap: 50px;
      padding-top: 40px;
   }
}

.about-slider {
   display: flex;
   margin-top: 250px;
}

.about-slider figure {
   width: 480px;
   margin-right: -1px;
}

@media screen and (max-width: 767px) {
   .about-slider figure {
      width: 290px;
   }

   .about-slider {
      margin-top: 50px;
      margin-bottom: 20px;
   }
}

.shop h3 {
   text-align: left;
   font-size: 22px;
   margin-top: 10px;
}

.shop h4 {
   color: #ccc;
   margin: 0px 0 30px 0;
   padding-bottom: 30px;
   font-size: 14px;
   border-bottom: 1px solid #E7E7E7;
   font-family: "Marcellus", serif;
   font-weight: 400;
}

.shop dl {
   display: flex;
   gap: 20px;
   color: #555;
   font-size: 15px;
   margin-bottom: 15px;
}

.shop dl dt {
   width: 35%;
}

.shop dl dd {
   width: 65%;
}

.shop a {
   text-decoration: underline;
}

.shop a:hover {
   text-decoration: none;
}


@media screen and (max-width: 767px) {
   .shop h3 {
      font-size: 18px;
   }

   .shop h4 {
      color: #ccc;
      margin: 0px 0 20px 0;
      padding-bottom: 20px;
      font-size: 12px;
   }

   .shop dl {
      display: block;
      font-size: 14px;
   }

   .shop dl dt {
      width: auto;
      font-weight: bold;
   }

   .shop dl dd {
      width: auto;
   }
}