@charset "UTF-8";

h2 {
  padding: 32px;
  /*background-color: rgb(196, 227, 255);*/
  text-align: center;
  font-size: 1.4rem;
}
@media screen and (min-width: 960px) {
  h2 {
    font-size: 1.8rem;
  }
}

h3 {
  font-size: 0.8rem;
  font-weight: 600;
}


/*------------全体設定とヘッダーは別途css------------*/

#main {
  width: 100%;
  margin: 80px auto; /*グローバルナビ分空ける*/
}
@media screen and (min-width: 960px) {
  #main {
    margin: 24px auto;
  }
}

.mainimg {
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../images/TOPimg_mb.jpeg);
  background-position: right;
  max-width: 100%;
  height: 72vh;
  position: relative;
 
  animation-name: fadein1, fadeout1; /*アニメーション名*/
  animation-duration: 3.0s; /*アニメーションの所要時間*/
  animation-timing-function: ease-in-out; /*アニメーションのキーフレームの進み具合*/
  animation-delay: 0s; /*遅延時間*/
  animation-iteration-count: 1; /*繰り返し数*/
  animation-direction: normal; /*繰り返しの方向*/
  /*-webkit-animation: fadeout 2s ease 0s 1 normal;*/
}
@keyframes fadein1 {
  0% {opacity: 0}
  100% {opacity: 1}
}
@keyframes fadeout1 {
  0% {filter: grayscale(100%)}
  50% {filter: grayscale(90%)}
  80% {filter: grayscale(70%)}
  90% {filter: grayscale(40%)}
  100% {filter: grayscale(0)}
}

@media screen and (min-width: 960px) {
  .mainimg {
    background-image: url(../images/TOPimg.jpeg);
  }
  
}



.typing {
  position: absolute;
  top: 80%;
  width: 80%;
  left: 24px;
  background-color: #ffd900;
}
@media screen and (min-width: 960px) {
  .typing {
    width: 48%;
    top: 50%;
    left: calc(50%);
    right: calc(50%);
    background-color: #fff;
  }
}

.typing p {
  font-family: 'Allerta Stencil'!important;
}

/*タイピング風*/
.TextTyping span {
	display: none;
  font-size: 24px;
  text-align: center;
  left: 0;
}
@media screen and (min-width: 960px) {
  .TextTyping span {
    font-size: 36px;
  }
}

/*文字列後ろの線の設定*/
.TextTyping::after {
 	content: "|";
	animation: typinganime .8s ease infinite;
  font-size: 24px;
}
@media screen and (min-width: 960px) {
  .TextTyping::after {
   font-size: 36px;
 }
}

@keyframes typinganime{
	from{opacity:0}
	to{opacity:1}
}





#main .container {
  /*background-color: #d6ffa5;*/
  max-width: 100%;
}

#main .inner, .inner_cover-inner {
  width: 98%;
  margin: auto;
  padding: 24px 16px;
  /*background-color: aliceblue;*/
}
@media screen and (min-width: 960px) {
#main .inner, .inner_cover-inner {
  width: 1080px;
  padding: 72px 0px;
  }
}

/*背景ワイド100％の時*/
#main .inner_cover {
  width: 100%;
  margin: auto;
  background-color: #FDF5E4;
  clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
}
@media screen and (min-width: 960px) {
#main .inner_cover {
  width: 100%;
  padding: 80px 0px;
  }
}

.concept {
  background-image: url(../images/bg_concept_pc.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.concept .inner .sawarabif {
  text-align: center;
  margin: 24px auto 32px auto;
}

.thoughts {
  padding: 16px 16px 0px 16px!important;
}



/*----------------PickupInformation ここから-----------------*/
.pickup h2, .access h2 {
  padding-top: 80px;
}

.info_h3 {
  background: linear-gradient(transparent 50%, #FAE3AF 50%);
}

.ul_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}


.ul_info-item {
  width: 48%;
  margin-bottom: 1rem;
  padding: 8px;
  background-color: #fff;
  border-bottom: 4px solid rgba(221, 202, 175, 0.4);
  border-right: 4px solid rgba(221, 202, 175, 0.4);
}
@media screen and (min-width: 960px) {
.ul_info-item {
  width: 22%;
}
}

.ul_info img {
  margin-bottom: 8px;
}




/*----------------Instagram ここから-----------------*/
.insta-wrap {
  margin: 40px auto;
}

.gallery{
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style-type: none;
  justify-content: space-around;
}

/*jsでclassを付与*/
.gallery-item {
  width: 48%;
  height: auto;
  margin-top: 24px;
  /*background-color: #faf8ed;*/
}
@media screen and (min-width: 960px) {
/*jsでclassを付与*/
  .gallery-item {
    width: 30%;
  }
}

.gallery-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
@media screen and (min-width: 960px) {
  .gallery-item img {
    height: 240px;
  }
}




/*--------------アクセスここから---------------*/

.access p {
  padding-left: 2em;
	text-indent: -1em;
}

.mapflex {
  display: block;
  margin: auto;
}

@media screen and (min-width: 960px){
  .mapflex {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.mapflex-item {
  width: 98%;
  margin: auto;
}
@media screen and (min-width: 960px) {
  .mapflex-item {
  width: 48%;
  }
}

.iframe-wrapper {
  position: relative;
  padding-top: 56.25%;
  }

iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maptxt {
  padding: 16px;
}


.toibutton {
  width: 100%;
  margin: auto;
}

.btnnarabi {
  padding-bottom: 48px!important;
}

@media  screen and (min-width:960px) {
  .btnnarabi {
    width: 1080px;
    margin: auto;
    display: flex;
    justify-content: center;
  }
  .narabiflex {
    width: 100%;
  }
  .narabiflex .btn {
    width: 72%!important;
  }
}


.btn {
  appearance: none;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
}
.btn {
position: relative;
display: block;
padding: 1em 2em 1em 1em;
width: 50%;
font-size: 14px;
color: #3b3b3b;
text-align: center;
  line-height: 1;
background: #FFDA24;
/*F5F2D0*/
text-indent: 0.1em;
letter-spacing: 0.1em;
border: 1px solid #6f6152;
border-radius: 1.5em;
margin: 16px auto;
}
.btn4 {
  background: #fdc55d!important;
}

.btn:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border: 1px solid #3b3b3b;
  border-radius: 50vh;
  transition: 0.2s;
  width: 100%;
  height: 100%;
}

.btn:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 1.5em;
margin: auto;
display: inline-block;
width: 0.5em;
height: 0.5em;
border-right: 1px solid #6f6152;
border-top: 1px solid #6f6152;
transform: rotate(45deg);
transition: right 0.5s;
}

.btn:hover:after{
right: 1em;
}

@media screen and (min-width: 960px) {
  .btn {
    width: 30%;
  }
}

.btn2 {
  padding: 1em 2em 1em 1em;
  width: 98%;
  font-size: 14px;
  color: #C71E7E;
  text-align: center;
    line-height: 1;
  background: #fff;
  text-indent: 0.1em;
  letter-spacing: 0.1em;
  border: 1.6px solid #C71E7E;
  border-radius: 1.5em;
  margin: 16px auto;
}

.btn3 {
  padding: 1em 2em 1em 1em;
  width: 98%;
  font-size: 14px;
  color: #06c755;
  text-align: center;
    line-height: 1;
  background: #fff;
  text-indent: 0.1em;
  letter-spacing: 0.1em;
  border: 1.6px solid #06c755;
  border-radius: 1.5em;
  margin: 16px auto;
}