/* =================================
   location intro
================================= */

.location-intro{
  position:relative;
  overflow:hidden;
  padding:100px 0 95px;
  background:#fff;
}

.location-intro-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.location-copy{
  position:relative;
  min-height:250px;
  padding:3px 0 0;
  background:
    url("/content/dam/31sumai/mfr/L2402/asset/images/location/bg.png")
    left top / 210px auto no-repeat;
}

.location-copy-title{
  margin:80px 0;
  text-align:center;
  color:#111;
  font-size:clamp(34px, 3.6vw, 48px);
  font-weight:400;
  line-height:1.45;
  letter-spacing:.1em;
  white-space:nowrap;
}

/* =================================
   location banner
================================= */

.location-banner{
  position:relative;
}

.location-banner picture,
.location-banner-img{
  display:block;
  width:100%;
  height:auto;
}

.location-banner-note{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.05em;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
}

/* =================================
   location scene
================================= */

.location-scene{
  padding:140px 0;
}

.location-scene-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.scene-row{
  display:flex;
  align-items:center;
  gap:60px;
}

.scene-row + .scene-row{
  margin-top:-40px;
}

.scene-row-left{
  justify-content:flex-start;
}

.scene-row-right{
  justify-content:flex-end;
}

.scene-image{
  position:relative;
  width:min(760px, 64vw);
}

.scene-image-small{
  width:min(440px, 38vw);
}

.scene-image picture,
.scene-image img{
  display:block;
  width:100%;
  height:auto;
}

.scene-note{
  position:absolute;
  right:8px;
  bottom:8px;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:12px;
  line-height:1.4;
  letter-spacing:.05em;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
}

.scene-text{
  flex-shrink:0;
}

.scene-text p{
  margin:0;
  color:#3d342f;
  font-size:clamp(18px, 1.9vw, 23px);
  font-weight:400;
  line-height:1.7;
  letter-spacing:.08em;
}

/* =================================
   location shop
================================= */

.location-shop{
  padding:120px 0;
}

.location-shop-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.location-shop-group{
  position:relative;
}

.location-shop-main img,
.location-shop-sub img{
  display:block;
  width:100%;
  height:auto;
}

/* top group */

.location-shop-group-top{
  height:980px;
}

.location-shop-main{
  position:absolute;
  top:0;
  left:0;
  width:720px;
}

.location-shop-sub-01{
  position:absolute;
  top:320px;
  left:20px;
  width:420px;
}

.location-shop-text{
  position:absolute;
  top:320px;
  left:470px;
  width:220px;
  font-size:15px;
  line-height:2.2;
  letter-spacing:.08em;
}

.location-shop-text p{
  margin:0;
}

.location-shop-sub-02{
  position:absolute;
  top:320px;
  left:760px;
  width:260px;
}

.location-shop-sub-03{
  position:absolute;
  top:560px;
  left:560px;
  width:230px;
}

/* bottom group */

.location-shop-group-bottom{
  height:760px;
  margin-top:40px;
}

.location-shop-sub-04{
  position:absolute;
  top:0;
  left:80px;
  width:320px;
}

.location-shop-sub-05{
  position:absolute;
  top:80px;
  left:360px;
  width:400px;
}

.location-shop-text-bottom{
  position:absolute;
  top:320px;
  left:780px;
  width:260px;
}

.location-shop-sub-06{
  position:absolute;
  top:500px;
  left:540px;
  width:260px;
}

/* =================================
   animation
================================= */

/* 下から */
.js-scroll-fade,
.js-group-fade{
  transform:translateY(40px);
  transition:transform 1s ease-out;
}

.js-scroll-fade.is-show,
.js-group-fade.is-show{
  transform:translateY(0);
}


/* 右から */
.js-scroll-fade-right{
  transform:translateX(40px);
  transition:transform 1s ease-out;
}

.js-scroll-fade-right.is-show{
  transform:translateX(0);
}


/* 左から */
.js-scroll-fade-left{
  transform:translateX(-40px);
  transition:transform 1s ease-out;
}

.js-scroll-fade-left.is-show{
  transform:translateX(0);
}

/* =================================
   SP
================================= */

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

  .location-intro{
    padding:70px 0 20px;
  }

  .location-intro-inner,
  .location-scene-inner,
  .location-shop-inner{
    width:calc(100% - 20px);
  }

  .location-copy{
    min-height:260px;
    background-size:220px auto;
    background-position:left top;
  }

  .location-copy-title{
    font-size:clamp(24px, 7vw, 34px);
    line-height:1.6;
    letter-spacing:.06em;
    white-space:normal;
  }

  .location-banner-note{
    right:12px;
    bottom:10px;
    font-size:10px;
  }

  .location-scene{
    padding:20px 0;
  }

  .scene-row{
    flex-direction:column;
    gap:24px;
  }

  .scene-row + .scene-row{
    margin-top:70px;
  }

  .scene-row:nth-child(even){
    flex-direction:column-reverse;
  }

  .scene-image,
  .scene-image-small{
    width:100%;
  }

  .scene-text{
    width:100%;
  }

  .scene-text p{
    font-size:clamp(18px, 5vw, 28px);
    line-height:2;
  }

	
  .scene-note{
    right:10px;
    bottom:10px;
    font-size:10px;
  }

  .location-shop{
    padding:80px 0;
  }

  .location-shop-group-top,
  .location-shop-group-bottom{
    height:auto;
    margin-top:60px;
  }

  .location-shop-main,
  .location-shop-sub,
  .location-shop-text,
  .location-shop-text-bottom{
    position:static;
    width:auto;
    margin:0 0 24px;
  }

}

.location-pc{
  padding:0 0 965px;
}

.location-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.location-pc-group{
  position:relative;
}

.location-image-main{
  display:block;
  width:100%;
  height:auto;
}

.location-image-sub{
  position:absolute;

  right:0;
  bottom:-965px;

  width:100%;

  display:block;

  opacity:0;
  transform:translateY(50px);
  filter:blur(10px);

  transition:
    opacity 1.6s cubic-bezier(.22,.61,.36,1) 1.2s,
    transform 1.6s cubic-bezier(.22,.61,.36,1) 1.2s,
    filter 1.8s cubic-bezier(.22,.61,.36,1) 1.2s;
}

.location-pc-group.is-show .location-image-sub{
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}


.location-sp{
  display:none;
}

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

  .location-pc{
    display:none;
  }

  .location-sp{
    display:block;
    width:calc(100% - 20px);
    margin:0 auto;
    padding:40px 0 80px;
  }

  .location-sp-img{
    display:block;
    width:100%;
    height:auto;
  }
	.sp_t20{
		padding-top: 20px;
	}
  .location-sp-text{
    padding:20px 0px 20px;
  }

  .location-sp-text p{
    margin:0;
    color:#3d342f;
    font-size:18px;
    line-height:2;
  }

}





/* =================================
   LIFE INFO
================================= */

.life-info{
  position:relative;

  width:100vw;
  margin-left:calc(50% - 50vw);

  padding:140px 0;

  background:#e9e9e7;
}

.life-info-head{
  margin:0 0 70px;
  text-align:center;
}

.life-info-title{
  margin:0;

  color:#221f1f;

  font-family:"Cinzel", serif;
  font-size:clamp(35px, 4vw, 62px);
  font-weight:400;

  line-height:1;
  letter-spacing:.12em;
}

.life-info-sub{
  margin:16px 0 0;

  color:#555;
  font-size:13px;
  letter-spacing:.18em;
}

.life-info-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.life-info-img{
  display:block;
  width:100%;
  height:auto;
}
.area-block.is-show{
  opacity:1;
}

@media screen and (max-width:767px){
	.life-info{
	  padding:60px 0;
	}

}

/* =================================
   AREA
================================= */

.area-pc{
  padding:40px 0 40px;
}

.area-inner{
  width:min(1200px, calc(100% - 40px));
  margin:0 auto;
}

.area-block{
  opacity:0;

  transform:translateY(60px);

  filter:
    blur(10px)
    brightness(1.12);

  transition:
    opacity 1.6s cubic-bezier(.22,.61,.36,1),
    transform 1.6s cubic-bezier(.22,.61,.36,1),
    filter 1.8s cubic-bezier(.22,.61,.36,1);
}

.area-block.is-show{
  opacity:1;

  transform:translateY(0);

  filter:
    blur(0)
    brightness(1);
}

.area-block + .area-block{
  margin-top:90px;
}

.area-block img{
  display:block;
  width:100%;
  height:auto;
}

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

  .area-pc{
    display:none;
  }

}

.area-block:nth-of-type(3){
  margin-top:-160px;
}
.area-block:nth-of-type(4){
  margin-top:-100px;
}
.area-block:last-of-type{
  margin-top:0;
}

.area-note{
  margin:28px 0 0;

  color:#444;

  font-size:12px;
  line-height:2;
  letter-spacing:.04em;
}

.area-note-wrap{
	padding-bottom: 60px;
}

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

  .area-inner{
    width:100%;
  }
.area-note {
    margin: 0px 20px;
	}
}


.area-map-section{
  width:min(1000px, calc(100% - 20px));
  margin:0 auto;
}

.area-tabs{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:2px;
  margin-bottom:30px;
}

.area-tabs-bottom{
  margin-top:35px;
  margin-bottom:0;
}

.area-tabs button{
  height:46px;
  border:1px solid #999;
  background:#d9d9d9;
  color:#555;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.area-tabs button.is-active{
  background:#6f6b5f;
  color:#fff;
}

.area-map-image img{
  display:block;
  width:100%;
  height:auto;
  transition:opacity .35s ease;
}

.area-map-image img.is-fade{
  opacity:0;
}

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

  .area-map-section{
    width:100%;
  }

  .area-tabs{
    grid-template-columns:repeat(2, 1fr);
    padding:0 15px;
  }
	.area-tabs button{
	  height:40px;
}

.area-tabs button{
  position:relative;

  height:58px;

  border:none;

  background:linear-gradient(
    to bottom,
    #f2f2f2 0%,
    #d9d9d9 100%
  );

  color:#666;

  font-family:inherit;
  font-size:13px;
  font-weight:600;

  cursor:pointer;

  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.08) inset,
    0 2px 6px rgba(0,0,0,.08);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.area-tabs button{
  transition:
    transform .35s cubic-bezier(.22,.61,.36,1),
    box-shadow .35s cubic-bezier(.22,.61,.36,1),
    background .35s ease,
    color .35s ease;
}

.area-tabs button:hover{
  transform:translateY(-1px);

  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 rgba(0,0,0,.06) inset,
    0 4px 10px rgba(0,0,0,.10);

  background:linear-gradient(
    to bottom,
    #f5f5f5 0%,
    #dddddd 100%
  );
}

.area-tabs button.is-active{
  background:linear-gradient(
    to bottom,
    #7d786d 0%,
    #5f5a50 100%
  ) !important;

  color:#fff !important;

  box-shadow:
    0 1px 0 rgba(255,255,255,.15) inset,
    0 4px 12px rgba(0,0,0,.18);
}
@media (hover:hover){

  .area-tabs button:hover{
    transform:translateY(-1px);

    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 -1px 0 rgba(0,0,0,.06) inset,
      0 4px 10px rgba(0,0,0,.10);
  }

}

.area-map-image img{
  transition:opacity .6s ease;
}

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

  .area-map-image{
    padding:0 20px;
  }

  .area-map-image img{
    width:100%;
    height:auto;
  }
	
	.area-tabs button{
  height:40px;

		

}	
	
@media screen and (max-width:767px){
	.life-info-title {
    font-size: clamp(26px, 4vw, 62px);
	}
	
	.life-info-head {
		margin: 0 0 40px;
	}
  .area-tabs-bottom{
    display:none;
  }

}