img {
image-rendering: -webkit-optimize-contrast;

}

body.home,
body.interview,
body.shop,
body.map
 {
 font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  width:100%;
  height: 100%;
  background: #dfd5c7;
color:#0e0c0b;
}

a{text-decoration:none;color:#735026;}
.header {
  position: absolute;
  padding: 20px;
}

.hamburger {
  position: fixed;
  top: 15px;
  left: 15px;
  z-index: 100;
  width: 48px;
  height: 48px;
border:0;
  background: rgba(49, 145, 182, 0.3);
  cursor: pointer;
}
@media screen and (max-width:1200px){
.hamburger {
  background: rgba(88, 69, 51, 0.3);

}
.home .hamburger {
  position: fixed;
  background: rgba(49, 145, 182, 0.3);
}

}


.hamburger__line {
  position: fixed;
  left: 25px;
  top: 30px ;
  width: 26px;
  height: 2px;
  background-color: #f5f5f5;

  transition: all .4s;
}

.hamburger__line:nth-of-type(1) {
  top: 29px;
}
.hamburger__line:nth-of-type(2) {
  top: 38px;
}
.hamburger__line:nth-of-type(3) {
  top: 47px;
}

/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
left:400px;background-color: #ddd ;
}
.hamburger.active .hamburger__line:nth-of-type(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
  transform: translateY(-9px) rotate(45deg);
left:400px; background-color: #ddd ;
}
.hamburger.active {
  background: rgba(51, 51, 51, 0.0); 
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 100vh;
  background-color: rgba(255,255,255,0.9);
  box-shadow: 2px 0 4px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform .4s;
  z-index: 90;
padding-top:20px;
overflow-y: scroll;
}

.nav.active {
  transform: translateX(0);
}

.nav__list {
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
}

.nav__item {
  padding: 0 12px;
}
.nav__item.kakoi img {
padding:3px 12px;
  border:1px #ccc solid;
border-radius:6px;
margin-bottom:0px;
background:#fff;

}
.nav__link {
  display: block;
  padding: 5px 0;
  color: #333;
  text-decoration: none;
  border-bottom: 0px;

}
.nav__item img{width:280px;height:auto;max-width:90%;}

.nav__item img.w250{width:150px;height:auto;max-width:90%;}

@media screen and (max-width:680px){
/* メニューオープン時 */
.hamburger.active .hamburger__line:nth-of-type(1) {
left:300px;
}
.hamburger.active .hamburger__line:nth-of-type(3) {
left:300px;
}

.nav {
  width: 300px;
max-width:90%;
overflow-y: scroll;

}
.nav__item {
  padding: 0 8px;
}
.nav__item img{width:230px;height:auto;max-width:90%;}
}

.container {
  position: absolute;
top:70%;
left:11%;
  width: 24px;
  height: 24px;
}


.arrows {
  width: 60px;
  height: 72px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: 20px;
}

.arrows path {
  stroke: #fff;
  fill: transparent;
  stroke-width: 1px;  
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s; /* Safari 和 Chrome */
}



.container2 {
  position: rlative;
padding-top:35vh;
padding-left:15%;
  width: 24px;
  height: 24px;
}


.arrows2 {
  width: 60px;
  height: 72px;
  position: relative;
  left: 50%;
  margin-left: -30px;
  bottom: 20px;
}

.arrows2 path {
  stroke: #fff;
  fill: transparent;
  stroke-width: 1px;  
  animation: arrow 2s infinite;
  -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows2 path.a1 {
  animation-delay:-1s;
  -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows2 path.a2 {
  animation-delay:-0.5s;
  -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows2 path.a3 { 
  animation-delay:0s;
  -webkit-animation-delay:0s; /* Safari 和 Chrome */
}







.text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: .25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}


/*内部ページ要素*/
.wrap{width:100%;}

.main{
width:1400px;max-width:100%;margin:0 auto 7vh;background:#f1f1f1;border-right:5px solid #ddd;border-left:5px solid #ddd;padding:0 40px 100px;
}
.main_in{padding:30px 0;line-height:180%;font-size:0.9rem;font-weight:300;}
.main img{max-width:100%;}

h3{line-height:250%;font-size:140%;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt50{margin-top:50px;}
.mb0{margin-bottom:0px !important!;}
.mb10{margin-bottom:10px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.pt20{padding-top:20px;}
.pb20{padding-bottom:20px;}
.text-13{font-size:13px;line-height:160%;margin-top:0;}
.oya-d div .text-12{font-size:12px;line-height:140%;margin-top:0;}
.oya-d div h4{line-height:120%;margin-top:0;margin-bottom:10px;}
.text-11{font-size:11px;line-height:170%;margin-top:0;}
.text-12{font-size:12px;line-height:160%;}
.text-small{font-size:10px;line-height:160%;}
.waku{border:1px solid #0e0c0b;padding:10px;margin-bottom:20px;}
.waku700{width:700px;max-width:100%;border:1px solid #0e0c0b;padding:10px;margin-bottom:20px;}


.oya {
     display:block;
margin:50px 0 30px;
overflow:hidden;
}
.oya .box-1{
     width:100%;
padding:15px;
background:#fff;overflow:hidden;
}
.oya .box-1 img{width:300px;max-width:50%;float:left;margin-right:20px;}
.oya p{margin-top:15px;}



.oya-a {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0;
}
.oya-a .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 0 0px;
}
.oya-a .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 15px 0;
}

.oya-b2 {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0px;
}
.oya-b2 .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 0;
}
.oya-b2 .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 15px 0;
}


.oya-b {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:33.33% 33.33% 33.33%;
margin:0px;

}
.oya-b .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 0 0;
}
.oya-b .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 0 0 15px;
}
.oya-b .box-3{
     grid-column:3 / 4;
     grid-row:1 / 2;
padding:10px 0px 0 15px;
}


.oya-c {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:33.33% 33.33% 33.33%;
margin:0px;
}
.oya-c .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 30px;
}
.oya-c .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 15px 30px;
}
.oya-c .box-3{
     grid-column:3 / 4;
     grid-row:1 / 2;
padding:10px 15px 30px;
}
.oya-c .box-4{
     grid-column:1 / 2;
     grid-row:2 / 3;
padding:10px 15px 30px;
}
.oya-c .box-5{
     grid-column:2 / 3;
     grid-row:2 / 3;
padding:10px 15px 30px;
}
.oya-c .box-6{
     grid-column:3 / 4;
     grid-row:2 / 3;
padding:10px 15px 30px;
}
.oya-c .box-7{
     grid-column:1 / 2;
     grid-row:3 / 4;
padding:10px 15px 30px;
}
.oya-c .box-8{
     grid-column:2 / 3;
     grid-row:3 / 4;
padding:10px 15px 30px;
}
.oya-c .box-9{
     grid-column:3 / 4;
     grid-row:3 / 4;
padding:10px 15px 30px;
}
.oya-c .box-10{
     grid-column:1 / 2;
     grid-row:4 / 5;
padding:10px 15px 30px;
}
.oya-c .box-11{
     grid-column:2 / 3;
     grid-row:4 / 5;
padding:10px 15px 30px;
}
.oya-c .box-12{
     grid-column:3 / 4;
     grid-row:4 / 5;
padding:10px 15px 30px;
}
.oya-c .box-13{
     grid-column:1 / 2;
     grid-row:5 / 6;
padding:10px 15px 30px;
}
.oya-c .box-14{
     grid-column:2 / 3;
     grid-row:5 / 6;
padding:10px 15px 30px;
}
.oya-c .box-15{
     grid-column:3 / 4;
     grid-row:5 / 6;
padding:10px 15px 30px;
}
.oya-c .box-16{
     grid-column:1 / 2;
     grid-row:6 / 7;
padding:10px 15px 30px;
}
.oya-c .box-17{
     grid-column:2 / 3;
     grid-row:6 / 7;
padding:10px 15px 30px;
}
.oya-c .box-18{
     grid-column:3 / 4;
     grid-row:6 / 7;
padding:10px 15px 30px;
}

.oya-c .box-19{
     grid-column:1 / 2;
     grid-row:7 / 8;
padding:10px 15px 30px;
}
.oya-c .box-20{
     grid-column:2 / 3;
     grid-row:7 / 8;
padding:10px 15px 30px;
}
.oya-c .box-21{
     grid-column:3 / 4;
     grid-row:7 / 8;
padding:10px 15px 30px;
}


.oya-c2 {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0px;
}
.oya-c2 .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 30px;
}
.oya-c2 .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 15px 30px;
}
.oya-c2 .box-3{
     grid-column:1 / 2;
     grid-row:2 / 3;
padding:10px 15px 30px;
}
.oya-c2 .box-4{
     grid-column:2 / 3;
     grid-row:2 / 3;
padding:10px 15px 30px;
}




.oya-d {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0px;
}
.oya-d .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 5px 0 0;
}
.oya-d .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 0 0 5px;
}
.oya-d .box-3{
     grid-column:1 / 3;
     grid-row:2 / 3;
padding:5px 5px 0;
}
.oya-d div p{margin-bottom:7px;}


.oya-big {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0;
}

.oya-big .box-bog1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 5px 0 0;

}

.oya-big .box-bog2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 5px 0 0;
}


@media screen and (max-width:920px){
.main{
border-right:0px;border-left:0px;padding:0 25px;
}
.main_in{padding:30px 0px 30px;line-height:180%;font-size:0.9rem;font-weight:300;}
.oya-big {
     display:block;
margin:0px;
}
.oya-big .box-big1{
 display:block;
padding:10px 5px 0 0;

}

.oya-big .box-big2{
    display:block;
margin-top:50px !important;
padding:10px 5px 0 0;

}
.oya-b {
     display:grid;
     grid-template-rows:auto auto auto;
     grid-template-columns:50% 50%;
margin:0px 0 50px;
}
.oya-b .box-1{
     grid-column:1 / 2;
     grid-row:1 / 2;
padding:10px 15px 0 0;
}
.oya-b .box-2{
     grid-column:2 / 3;
     grid-row:1 / 2;
padding:10px 0 0 15px;
}
.oya-b .box-3{
     grid-column:1 / 3;
     grid-row:2 / 3;
padding:10px 0px 0;
}

}

/*内部ページ要素*/





/*ラッパー要素*/
.wrapper{padding:0;
	display: flex;
	justify-content: space-between;
	position: relative;
}
/*コンテンツのブロック*/
.wrapper .contents{ width: 50vw; padding-left:10%;}
.wrapper .contents div.scroll-box02{padding-top: 50vh;}
.wrapper .contents div.scroll-box03{padding-top: 50vh;}
.wrapper .contents div.scroll-box04{padding-top: 15vh;}
.wrapper .contents div.scroll-box05{padding-top: 15vh;}
.wrapper .contents div.scroll-box06{padding-top: 50vh;}
.wrapper .contents div.scroll-box07{padding-top: 15vh;}
.wrapper .contents div.scroll-box08{padding-top: 15vh;}

.wrapper .contents div.scroll-box01{ padding-top: 5vh;padding-bottom:20vh;}
.wrapper .contents div.scroll-box01 img.mh100{margin-left:30%;}



.wrapper .contents div.sato1{ padding-bottom:100px; }
/*画像のブロック*/
.wrapper .images{
	width: 50vw;
	height: 100vh;
	display: flex;
	align-items: center;
	position: sticky;
	position: -webkit-sticky;
	top:0;
}
.wrapper .images p {
	height: 100%;
	margin: auto;
	display: block;
	visibility: hidden;
	/* 画像が透過pngの時は背景色が必要です */
	background: #f1f1f1;
	position: absolute;
	top: 0;
	bottom: 0;
	/* フェード速度 */
	transition: .8s !important;
	opacity: 0;
}


.wrapper .images p img{max-width:100%; }

.wrapper .images p:first-child,
.wrapper .images p.active {
	visibility: visible;
	opacity: 1;
}

.atention{margin-top:0px;font-size:0.8rem;color:#f5f5f5;font-weight:300;padding-right:20px;}
.unei{margin-top:300px;padding-bottom:100px;color:#f5f5f5;font-weight:300;}

.foot{padding-top:0px;padding-bottom:40px;text-align:center !important;margin:0 auto 40px;border-bottom:1px solid #ccc;}
.copy{padding-top:100px;padding-bottom:15px;text-align:center !important;margin:0 auto;}
.copy img{max-width:40%;margin:0 auto;width:300px;}
.home .copy{padding-top:100px;padding-bottom:15px;width:100%;text-align:left !important;}
.home .copy img{max-width:90%;width:300px;margin:0;}


@media screen and (max-width:1400px){
.wrapper .contents{ width: 50vw; padding-left:6%;}

/*画像のブロック*/
.wrapper .images{
	width: 50vw;}

.wrapper .images p img
{width:100%;height:100%;object-fit:cover; }
}

@media screen and (max-width:1160px){
.wrapper .images p{overflow:hidden;}
.wrapper .images p img{width:100%;height:100%;object-fit:cover; }

}

@media screen and (min-width:921px){
.wrapper1{display:none;}
.sm{display:none;}
}
@media screen and (max-width:920px){
.wrapper{display:none;}
.pc{display:none;}
.container {display:none;}
.wrapper1 .contents div {margin-top:0px; padding-top:0px !important;padding-bottom:0px !important;}
.wrapper1 .contents img.w300{width:300px; max-width:80%;margin:20px auto 0px !important;padding-bottom:0px !important;}
.scroll-space{
width:300px;height:20px;
  box-sizing: border-box;
  padding: 0px;
margin:0 auto;
}
.scroll-space .slidein{margin-top:0px!important; padding-top:0px !important;}

.copy img{max-width:80%;margin:auto;}
.home .copy{padding:0 11%;text-align:center;margin-bottom:15px;}
.home .copy img{max-width:80%;margin:auto;}

.atention{width:300px;margin:10px auto 0 !important;font-size:11px;color:#f5f5f5;font-weight:200;}
.unei{width:300px;margin:200px auto 150px;font-size:12px;color:#f5f5f5;font-weight:300;}

.wrapper1 .contents div.pb150{padding-bottom:150px !important;}
h3{line-height:200%;font-size:120%;}

.oya {

}
.oya .box-1 img{float:none;width:100%;margin-right:0px;display:block;}
.oya .box-2 img{float:none;width:100%;margin-right:0px;display:block;}
.oya .box-3 img{float:none;width:100%;margin-right:0px;display:block;}

.sm .box-1{margin-bottom:40px;}
.sm .box-2{margin-bottom:40px;}
.sm .box-3{margin-bottom:40px;}

.sm .oya-d .box-1{margin-bottom:0px;}
.sm .oya-d .box-2{margin-bottom:0px;}
.sm .oya-d .box-3{margin-bottom:0px;}
}



/*アニメ*/

.scroll-space{
  box-sizing: border-box;
  padding-top: 30px;
  height: 60px;

}
.scroll-space2{
  box-sizing: border-box;
  padding-top: 10px;
  height: 160px;
  overflow: hidden;
}
.scroll-space21{
  box-sizing: border-box;
  padding-top: 10px;
  height: 100px;
  overflow: hidden;
}
.scroll-space4{
  box-sizing: border-box;
  padding-top: 10px;
  overflow: hidden;
height:50px;
}
.scroll-space4shop{
  box-sizing: border-box;
  padding-top: 10px;
  overflow: hidden;
  height:330px;
}

.scroll-space4shop360{
  box-sizing: border-box;
  padding-top: 10px;
  overflow: hidden;
  height:360px;
}

@media screen and (max-width:1300px){
.pc .scroll-space4shop{
  box-sizing: border-box;
  padding-top: 10px;
  overflow: hidden;
  height:380px;
}
}

.scroll-space3{
  box-sizing: border-box;
  padding-top: 30px;
  height: 220px;
  overflow: hidden;
}


.waku img.shop_4{width:120px !important;float:right;margin-left:10px;}


@media screen and (max-width:920px){
.scroll-space2{
  height: 115px;
}

.scroll-space3{
  height: 170px;

}



}



.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 0.5s;
  &.slidein-left{
      transform: translate(-100%,0);
  }
  &.slidein-right{
      transform: translate(100%,0);
  }
  &.slidein-up{
      transform: translate(0,-100%);
  }
  &.slidein-bottom{
      transform: translate(0,100%);
  }
  &.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }
}

/*ここまでアニメ*/


/*blur*/
.blur-box{
  animation-name: blur;
  animation-duration: 1.3s;
  animation-fill-mode:none;
  animation-iteration-count: 1;

}

@keyframes blur{
  from {
    filter: blur(10px);
  }

  to {
    filter: blur(0) drop-shadow(5px 5px 5px rgba(21, 124, 147,0.5));
    transform: scale(1);
  }
}
/*ここまでblur*/



/*to top*/
#page-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 12px;
  line-height: 1;
  z-index: 99;
}
#page-top a {
  background: #4e4e4e;
  text-decoration: none;
  color: #fff;
  width: 60px;
  padding: 23px 5px;
  text-align: center;
  display: block;
  border-radius: 90px;
  opacity: 0.8;
  transition: all .3s ease;
}
#page-top a:hover {
  text-decoration: none;
  opacity: .5;
}
/*ここまでtotop*/