@charset "utf-8";
main{
  background: url(../image/karato/bg_karato.jpg) repeat center center;
  background-size: 115px 196px;
}
@media screen and (max-width: 960px) {
  main{
    background-size: 92px 156px;
  }
}
/* -------------------------------------------
	#sec_sushi
------------------------------------------- */
#sec_sushi h2{
  position: relative;
}
#sec_sushi h2 .comment {
  position: absolute;
  top: 0;
  right: calc(50% - 271px);
  transform: translateX(100%);
}
#sec_sushi .feature{
  position: relative;
}
#sec_sushi .feature01{
  margin-top: 70px;
}
#sec_sushi .feature + .feature{
  margin-top: 90px;
}
#sec_sushi .feature article .inner{
  position: relative;
  z-index: 2;
}
#sec_sushi .feature02 article .inner{
  flex-direction: row-reverse;
}
#sec_sushi .feature article .inner .text{
  width: 38%;
}
#sec_sushi .feature .text .feature-num{
  line-height: 1;
}
#sec_sushi .feature01 .text .feature-num{
  color: #ca95c4;
}
#sec_sushi .feature02 .text .feature-num{
  color: #ec8f7d;
}
#sec_sushi .feature03 .text .feature-num{
  color: #7aae69;
}
#sec_sushi .feature .text .feature-num .num{
  font-size: 4em;
}
#sec_sushi .feature .text .border-ttl{
  margin-bottom: .38em;
  padding-bottom: .3em;
}
#sec_sushi .feature01 .text .border-ttl{
  border-bottom: solid 1px #ca95c4;
  padding-right: min(3.125vw, 60px);
}
#sec_sushi .feature02 .text .border-ttl{
  border-bottom: solid 1px #ec8f7d;
  padding-left: min(3.125vw, 60px);
}
#sec_sushi .feature03 .text .border-ttl{
  border-bottom: solid 1px #7aae69;
  padding-right: min(3.125vw, 60px);
}
#sec_sushi .feature01 article .text p,
#sec_sushi .feature03 article .text p{
  padding-right: min(3.125vw, 60px);
}
#sec_sushi .feature02 .text .feature-num,
#sec_sushi .feature02 article .text p{
  padding-left: min(3.125vw, 60px);
}
#sec_sushi .feature article .inner .img{
  width: 62%;
}
#sec_sushi .feature article .inner-img{
  position: relative;
  align-items: flex-end;
  margin-top: -4.16%;
  z-index: 3;
}
#sec_sushi .feature01 article .inner-img p.comment-img{
  position: relative;
  max-width: 504px;
}
#sec_sushi .feature article .inner-img p.comment-img span{
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 53.3%;
  font-size: 1rem;
}
#sec_sushi .box-enjoy{
  position: relative;
  width: min(100%, 1060px);
  padding: 60px 30px;
  z-index: 2;
}
#sec_sushi .box-enjoy .list li{
  width: 33%;
  padding: 0 min(1.5625vw, 30px);
}
#sec_sushi .box-enjoy .list li + li{
  border-left: solid 1px var(--blue);
}
#sec_sushi .box-enjoy .list li .text h4{
  text-align: center;
  margin-top: 1.25em;
}
#sec_sushi .feature .icon{
  position: absolute;
  z-index: 1;
}
#sec_sushi .feature .icon01 {
  top: 0;
  left: calc(50% - 806px);
  transform: translateY(-100%);
}
#sec_sushi .feature .icon02 {
  top: -7%;
  right: calc(50% - 806px);
}
#sec_sushi .feature .icon03 {
  top: 35%;
  right: calc(50% - 813px);
}
#sec_sushi .feature .icon04 {
  top: 53%;
  left: calc(50% - 854px);
}
#sec_sushi .feature .icon05 {
  top: 60%;
  right: 0;
}
#sec_sushi .feature .icon06 {
  top: 77%;
  left: 0;
}
#sec_sushi .feature .icon07 {
  top: 0;
  left: calc(50% - 806px);
  transform: translateY(-100%);
}
#sec_sushi .feature .icon08 {
  top: 0;
  right: 0;
  transform: translateY(-100%);
}
#sec_sushi .feature .icon09 {
  bottom: 3%;
  right: calc(50% - 806px);
}
#sec_sushi .feature .icon10 {
  top: -9%;
  left: calc(50% - 783px);
}
#sec_sushi .feature .icon11 {
  top: 58%;
  right: calc(50% - 839px);
}
#sec_sushi .feature .icon12 {
  bottom: 0;
  left: calc(50% - 852px);
}
@media screen and (max-width: 1200px) {
  #sec_sushi h2 img{
    width: min(100%, 582px);
  }
  #sec_sushi .feature01{
    margin-top: 15px;
  }
  #sec_sushi .feature + .feature{
    margin-top: 50px;
  }
  #sec_sushi .feature article .inner,
  #sec_sushi .feature article .inner-img{
    max-width: 612px;
  }
  #sec_sushi .feature article .inner .text{
    width: 100%;
  }
  #sec_sushi .feature01 .text .border-ttl,
  #sec_sushi .feature03 .text .border-ttl,
  #sec_sushi .feature01 article .text p,
  #sec_sushi .feature03 article .text p{
    padding-right: 0;
  }
  #sec_sushi .feature02 .text .feature-num,
  #sec_sushi .feature .text .border-ttl,
  #sec_sushi .feature02 article .text p{
    padding-left: 0;
  }
  #sec_sushi .feature article .inner .img,
  #sec_sushi .feature article .inner-img{
    width: 100%;
  }
  #sec_sushi .feature article .inner .img{
    margin-top: 20px;
  }
  #sec_sushi .feature article .inner-img{
    margin-top: 25px;
  }
  #sec_sushi .feature01 article .inner-img p.comment-img{
    margin: -12% auto 0;
  }
  #sec_sushi .box-enjoy{
    padding: 25px 15px;
  }
  #sec_sushi .feature .icon{
    display: none;
  }
}
@media (min-width: 535px) and (max-width: 1090px) {
  #sec_sushi .box-enjoy .list li{
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 0 0 min(1.5625vw, 30px);
  }
  #sec_sushi .box-enjoy .list li + li {
    padding-top: min(1.5625vw, 30px);
    border-top: solid 1px var(--blue);
    border-left: none;
  }
  #sec_sushi .box-enjoy .list li .img{
    width: 25%;
  }
  #sec_sushi .box-enjoy .list li .text{
    width: 74%;
    margin-left: 30px;
  }
  #sec_sushi .box-enjoy .list li .text h4{
    text-align: left;
  }
}
@media screen and (max-width: 534px) {
  #sec_sushi .feature article .inner-img p.comment-img span {
    font-size: clamp(10px, 3vw, 1rem);
  }
  #sec_sushi .box-enjoy h3 img{
    max-width: 216px;
  }
  #sec_sushi .box-enjoy .list li{
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 25px;
  }
  #sec_sushi .box-enjoy .list li + li{
    border-top: solid 1px var(--blue);
    border-left: none;
    padding-top: 25px;
  }
}

/* -------------------------------------------
	#sec_slider
------------------------------------------- */
#sec_slider{
  max-height: min(75vw, 720px);
  overflow-y: hidden;
}
.slider .slick-track {
  transition-timing-function: linear !important;
}
#sec_slider .slider li{
  margin-left: min(4.16vw, 40px);
}
#sec_slider .slider li.w340{
  width: min(35.4vw, 340px) !important;
}
#sec_slider .slider li.w480{
  width: min(50vw, 480px) !important;
  margin-top: min(6.25vw, 60px);
}
#sec_slider .slider li img + img{
  margin-top: min(6.25vw, 60px);
}
/* -------------------------------------------
	#sec_bnr
------------------------------------------- */
#sec_bnr .bg{
  position: relative;
  background: url(../image/karato/bg_onlineshop.jpg) no-repeat center center;
  background-size: cover;
}
#sec_bnr .max1200{
  padding-bottom: min(34.3%, 440px);
}
#sec_bnr .inner{
  position: absolute;
  top: 50%;
  left: 0;
  width: min(41.4vw, 531px);
  transform: translateY(-50%);
}
#sec_bnr .inner .btn {
  position: absolute;
  bottom: 11.3%;
  left: 50%;
  width: 84.7%;
  text-align: center;
  transform: translateX(-50%);
}
@media screen and (max-width: 1200px) {
  #sec_bnr .bg {
    background: url(../image/karato/bg_onlineshop.jpg) no-repeat 46% center;
    background-size: cover;
  }
}
@media screen and (max-width: 1200px) {
  #sec_bnr .bg {
    background: url(../image/karato/bg_onlineshop_sp.jpg) no-repeat center bottom;
    background-size: cover;
  }
  #sec_bnr .max1200{
    padding-bottom: min(105.3%, 790px);
  }
  #sec_bnr .inner{
    top: 30px;
    left: 50%;
    width: min(82.6vw, 620px);
    transform: translateX(-50%);
  }
}
/*
===================================================
	#sec_location
===================================================
*/
#sec_location .map{
  width: 58%;
}
#sec_location .map .scroll_notice{
  display: none;
}
#guide {
	position: relative;
	width: min(100%, 750px);
	overflow: auto;
  margin-top: 2rem;
}
#guide .box{
  position: relative;
}
#guide li a {
	position: absolute;
	width: 4%;
	height: 4%;
	text-indent: -9999px;
}
#guide li.ph_01 a {
	top: 27%;
	left: 1%;
}
#guide li.ph_02 a {
	top: 25%;
	left: 22.5%;
}
#guide li.ph_03 a {
	top: 39%;
	left: 32%;
}
#guide li.ph_04 a {
	top: 58%;
	left: 44.5%;
}
#guide li.ph_05 a {
	top: 56.5%;
	left: 58.5%;
}
#guide li.ph_06 a {
	bottom: 12%;
	left: 38%;
}
#imgPreviewWithStyles2 {
	background: var(--blue) url(../image/fancybox/loading.gif) no-repeat center;
	padding: 15px;
	z-index: 999;
}
#imgPreviewWithStyles2 span {
	display: block;
	color: var(--white);
	text-align: center;
	padding: 10px 0 3px 0;
}
#sec_location .detail{
  width: 36%;
}
#sec_location .detail .border-box{
  border-bottom: solid 1px var(--white);
  margin-top: 25px;
  padding-bottom: 14px;
}
#sec_location .detail .border-box + .border-box{
  margin-top: 15px;
}
#sec_location .detail .border-box h3{
  margin-bottom: .3em;
}
#sec_location .detail .white-box{
  padding: 28px 40px 30px;
}
#sec_location .detail .white-box .link-btn2{
  width: min(100%, 390px);
}
@media screen and (max-width: 1200px) {
  #sec_location .inner{
    width: min(100%, 750px);
  }
  #sec_location .map,
  #sec_location .detail{
    width: 100%;
  }
  #sec_location .detail{
    margin-top: 35px;
  }
}
@media screen and (max-width: 960px) {
  #sec_location .detail .white-box{
    padding: 18px 15px 20px;
  }
}
@media screen and (max-width: 700px) {
  #sec_location .map .scroll_notice{
    display: block;
    margin-top: 1em;
  }
  #guide {
    height: 500px;
    margin-top: 10px;
  }
  #guide .box{
    width: 600px;
    height: 500px;
  }
}
/*
===================================================
	#sec_access
===================================================
*/
.tab{
  max-width: 960px;
}
.tab li{
  width: 48%;
}
.tab li a{
  position: relative;
	display: block;
  font-size: 1.25rem;
  text-align: center;
  line-height: 1.5;
	background:var(--white);
	margin:0 2px;
	padding: .75em .5em .65em;
}
.tab li.active a{
  color: var(--white);
	background:var(--beige);
}
.tab li.active a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 16px 12px 0 12px;
  border-color: var(--beige) transparent transparent;
  translate: -50% 100%;
}
.tab li a br{
  display: none;
}
.area {
	display: none;
	opacity: 0;
	margin-top: 60px;
}
.area.is-active {
  display: block;
  animation-name: displayAnime;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
#sec_access .btns .btn-box{
  width: min(100%, 390px);
  font-size: 1.125rem;
  margin: 0 20px;
}
#sec_access .btns .comment{
  position: relative;
  display: inline-block;
}
#sec_access .btns .comment::before,
#sec_access .btns .comment::after {
  position: absolute;
  display: block;
  content: "";
  top: 2px;
  height: .88em;
  border-left: solid 1px var(--white);
}
#sec_access .btns .comment::before {
  left: -15px;
  transform: rotate(-30deg) translateY(50%);
}
#sec_access .btns .comment::after {
  right: -15px;
  transform: rotate(30deg) translateY(50%);
}
#sec_access .btns .btn-box .link-btn2{
  width: 100%;
  padding: 1.05em 1.6em .94em;
}
#sec_access .parking{
  margin-top: 55px;
}
#sec_access .parking-table{
  overflow: hidden;
}
#sec_access .parking-table table{
  width: 100%;
  border-collapse: collapse;
  border: solid 1px var(--beige);
}
#sec_access .parking-table.pc tr + tr{
  border-top: solid 1px var(--beige);
}
#sec_access .parking-table th,
#sec_access .parking-table td.name{
  vertical-align: middle;
}
#sec_access .parking-table th{
  color: var(--white);
  font-weight: bold;
  line-height: 1.3;
  background: var(--beige);
  padding: 17px 20px 13px;
}
#sec_access .parking-table.pc th + th{
  border-left: solid 1px var(--white);
}
#sec_access .parking-table td{
  line-height: 1.5;
  background: var(--white);
  padding: 19px 20px 15px;
}
#sec_access .parking-table.pc td + td{
  border-left: solid 1px var(--beige);
}
#sec_access #bus .scroll_notice{
  display: none;
}
@media screen and (max-width: 960px) {
  .tab li a{
    font-size: 1rem;
  }
  .area{
    margin-top: 40px;
  }
  #sec_access .btns .btn-box{
    font-size: 1rem;
    margin: 0 auto;
  }
  #sec_access .btns .btn-box + .btn-box{
    margin-top: 20px;
  }
  #sec_access .parking{
    margin-top: 40px;
  }
  #sec_access .parking-table.sp table tr{
    display: block;
  }
  #sec_access .parking-table.sp table th,
  #sec_access .parking-table.sp table td{
    width: 100%;
    display: block;
  }
  #sec_access .parking-table.sp table td{
    width: 100%;
  }
  #sec_access .parking-table.sp table td + td{
    border-top: solid 1px var(--beige);
  }
}
@media screen and (max-width: 768px) {
  #sec_access #bus .scroll_notice{
    display: block;
    margin-top: 1rem;
  }
  #sec_access #bus .bus_box{
    overflow-x: auto;
    margin-top: 1rem;
  }
  #sec_access #bus .bus_box img{
    min-width: 959px;
  }
}
@media screen and (max-width: 360px) {
  .tab li a br{
    display: block;
  }
}
/*
===================================================
	#sec_spot
===================================================
*/
#sec_spot{
  background: url(../image/karato/bg_spot.jpg) no-repeat center center;
  background-size: cover;
}
#sec_spot .inner{
  padding: 70px 15px 80px;
}
#sec_spot .list{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
#sec_spot .list li{
  width: 30%;
  margin: 0 15px 50px;
}
#sec_spot .list li h3{
  margin-top: 1.25em;
}
#sec_spot .list li p.ex{
  min-height: 4em;
}
#sec_spot .list li .link-btn2{
  min-width: 80px;
  background: var(--white);
  border: solid 1px var(--blue);
  border-radius: 8px;
  margin-top: 1em;
  padding: 7px 32px 5px 12px;
}
#sec_spot .list li .link-btn2 svg{
  right: 10px;
}
@media screen and (max-width: 960px) {
  #sec_spot{
    background: url(../image/karato/bg_spot_sp.jpg) no-repeat center center;
    background-size: cover;
  }
  #sec_spot .inner{
    padding: 40px 15px 50px;
  }
  #sec_spot .list li{
    width: min(47%, 442px);
    margin: 0 7px 25px;
  }
}
@media screen and (max-width: 530px){
  #sec_spot .list li{
    width: 100%;
    margin: 0;
  }
  #sec_spot .list li + li{
    margin-top: 20px;
  }
  #sec_spot .list li p.ex{
    min-height: none;
  }
}