@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
}
body {
  color: #333;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 1.6em;
  line-height: 2.4rem;
  text-align: center;
}
a:hover {
  opacity: 0.5;
}
/*縦横比を保ったまま画面幅に合わせる*/
img {
  max-width: 100%;
  height: auto;
}
.loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #8CB4C7;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}

.loading.is-active {
  opacity: 0;
  visibility: hidden;
}
.loading img {
	width: 260px;
}
.loading-animation {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #8CB4C7;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}

.loading-animation.is-active {
  opacity: 1;
  visibility: visible;
}
/* fadeUpをするアイコンの動き */

.fadeUp{
  animation-name: fadeUpAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
h3 {
	font-family: brandon-grotesque,sans-serif;
    font-weight: bold;
    font-style: normal;
	font-size: 2.0rem;
	line-height: 1.8rem;
	letter-spacing: 0.1rem;
	margin: 50px 0;
	display: inline-block;
	position: relative;
}
@media(min-width: 1025px) {
  h3 {
    margin: 80px 0;
  }
}
h3:before {
  position: absolute;
  content: "";
  display: inline-block;
  background-color: #8CB4C7;
  width: 10px;
  height: 10px;
  top: 3px;
  left: -18px;
}
h3 span {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}
/*htmlでクラス指定したら表示されない*/
.none {
  display: none;
}
/*header*/
.header {
  background-color: #efefef;
  height: 70px;
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.header:before {
   position: absolute;
  display: inline-block;
  content: "";
  background-color: #333;
  width: 1px;
  height: 14px;
	right: 70px;
}
.header h1 img {
  width: 70px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.header_nav ul li {
  display: none;
  line-height: 100%;
}
.header_nav ul li:nth-child(3) {
  display: block;
}
.header_nav ul li a {
  text-decoration: none;
  color: #333;
  font-size: 1.2rem;
  margin-left: 80px;
  line-height: 100%;
	position: relative;
}
.header_nav ul li a:hover {
	opacity: 1;
	color: #8CB4C7;
	position: relative;
}
.header_nav ul li a:before {
  background: #8CB4C7;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -4px;
  margin: auto;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.header_nav ul li a:hover:before {
  transform-origin: center top;
  transform: scale(1, 1);
}
.instagram-icon {
  width: 30px;
  min-width: 30px;
  height: auto;
  margin: 4px 24px 0 30px;
  position: relative;
}
.instagram-icon:hover {
	opacity: 1;
	transform: translateY(-5px);
}
.instagram-icon:hover:after {
	position: absolute;
	content: "Instagram";
	top: 30px;
	left: -20px;
	color: #8CB4C7;
	opacity: 1;
}
@media(min-width: 600px) {
  .header_nav ul li a {
    font-size: 1.6rem;
  }
	.header:before {
	right: 68px;
}
}
@media(min-width: 1025px) {
  .header {
    max-width: 1300px;
    margin: 0 auto;
  }
	.header:before {
	right: 78px;
}
  .header_nav ul li {
    display: block;
    position: relative;
  }
  .header_nav ul li:after {
    position: absolute;
    content: "";
    display: inline-block;
    background-color: #333;
    width: 1px;
    height: 12px;
    transform: rotate(30deg);
    top: 6px;
    right: -20px;
  }
  .header_nav ul li:last-child:after {
    display: none;
  }
  .header_nav ul {
    display: flex;
  }
  .header_nav ul li a {
    margin-left: 40px;
    line-height: 2.4rem;
  }
  .instagram-icon {
    margin-left: 44px;
  }
  .instagram-icon:before {
    left: -22px;
  }
}
/*main-image*/
#main-img {
  position: relative;
  max-width: 1300px;
  margin: auto;
}
.main-image_mobile {
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}
.main-title_mobile {
  color: #fff;
  font-size: 2.0rem;
  position: absolute;
  top: 20px;
  left: 24px;
  text-align: left;
  margin-right: 24px;
}
.main-title_pc {
  display: none;
}
.main-title_1, .main-title_2, .main-title_3 {
  padding: 8px 12px;
  margin-bottom: 10px;
  background-color: rgba(140, 180, 199, 0.8);
  display: inline-block;
}
.main-image_open-time {
  text-align: left;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  bottom: 40px;
  left: 24px;
  padding: 8px 12px;
  margin-right: 24px;
}
.main-image_open-time span {
  font-weight: bold;
}
span.smoothText {
	overflow: hidden;
}
span.smoothTextTrigger {
	transition: 1s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}
span.smoothTextTrigger.smoothTextAppear {
	transform: translate3d(0,0,0) skewY(0);
}
@media(min-width: 600px) {
  .main-title_mobile {
    top: 20px;
    left: 100px;
  }
  .main-image_open-time {
    left: 0;
    right: 0;
    margin: auto;
    display: inline-block;
    width: 280px;
  }
}
@media(min-width: 1025px) {
  .main-image_mobile {
    display: none;
  }
  .none {
    display: block;
    max-height: 680px;
    width: 100%;
    max-width: 1300px;
    object-fit: cover;
    margin: 0 auto;
  }
  .main-title_mobile {
    display: none;
  }
  .main-title_pc {
    display: block;
    color: #fff;
    font-size: 2.0rem;
    position: absolute;
    top: 200px;
    left: 60px;
    text-align: left;
    margin-right: 24px;
  }
}
/*concept*/
.section_concept_inside {
  padding: 30px 24px 30px;
	background-color: #fff;
}
.concept_counter {
  text-align: left;
}
.fadeUpTrigger {
	opacity: 0;
}
.fadeUp{
  animation-name: fadeUpAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeUpAnime{
	from {
		opacity: 0;
		transform: translateY(100px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.concept_late {
  text-align: right;
}
.concept_counter img, .concept_late img {
  width: 80%;
  max-width: 600px;
  height: auto;
  margin-bottom: 30px;
}
.concept_late img {
  width: 50%;
  max-width: 300px;
}
.section_concept_description {
  max-width: 500px;
  margin: auto;
}
.section_concept p {
  line-height: 3.0rem;
}
.bottom_space {
  margin-bottom: 24px;
}
@media(min-width: 600px) {
  .section_concept_inside {
    padding: 60px 83px 60px;
    max-width: 1300px;
    margin: auto;
  }
}
@media(min-width: 1025px) {
	.section_concept {
		background-color: #fff;
	}
  .section_concept_inside {
    padding: 80px 83px 80px;
  }
  .section_concept_image {
    display: flex;
    justify-content: center;
  }
  .concept_counter img {
    width: 90%;
    margin-right: 40px;
  }
  .concept_late img {
    width: 80%;
    margin: 150px 0 30px 40px;
  }
}
/*information*/
.information_flower {
  background-color: #ebefef;
  padding: 40px 24px;
  margin-top: 30px;
}
.infomation_pop-up {
  position: relative;
}
.information_pop-up_text {
  width: 8%;
  transform: rotate(-90deg);
  position: absolute;
  top: -23%;
  left: 22%;
}
.information_pop-up_description {
  text-align: left;
  margin: 30px 24px 100px;
}
.information_pop-up_title {
  font-weight: bold;
  margin-bottom: 30px;
}
.information_pop-up_description p {
  margin-bottom: 90px;
  line-height: 3.0rem;
}
.information_here {
  position: relative;
}
/*スクロールダウン全体の場所*/
.here {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  right: 50%;
  /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}
/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove {
  0% {
    bottom: -70px;
  }
  50% {
    bottom: -73px;
  }
  100% {
    bottom: -71px;
  }
}
/*Scrollテキストの描写*/
.here span {
  /*描画位置*/
  position: absolute;
  left: -20px;
  bottom: 10px;
  /*テキストの形状*/
  color: #8CB4C7;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 矢印の描写 */
.here:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: -6px;
  /*矢印の形状*/
  width: 2px;
  height: 20px;
  background: #8CB4C7;
  transform: skewX(-31deg);
}
.here:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  right: 0;
  /*矢印の形状*/
  width: 2px;
  height: 50px;
  background: #8CB4C7;
}
.instagram_link {
  display: block;
  text-decoration: none;
  background-color: #8CB4C7;
  color: #fff;
  height: 56px;
  width: auto;
  text-align: center;
  padding-top: 8px;
  letter-spacing: 0.1em;
  font-size: 1.2rem;
  box-shadow: 6px 6px #efefef;
}
.instagram_link img {
  width: 30px;
  height: auto;
  display: block;
  margin: auto;
}
.information_inside {
  background-color: #ebefef;
  padding: 40px 24px;
  margin-top: 30px;
}
.infomation_free-space {
  position: relative;
}
.information_free-space_text {
  width: 8%;
  transform: rotate(-90deg);
  position: absolute;
  top: -38%;
  left: 34%;
}
.information_free-space_description {
  text-align: left;
  margin: 30px 24px 70px;
}
.information_free-space_title {
  font-weight: bold;
  margin-bottom: 30px;
}
.information_free-space_description p {
  margin-bottom: 90px;
  line-height: 3.0rem;
}
@media(min-width: 600px) {
  .information_flower, .information_inside {
    padding: 70px 83px;
    max-width: 500px;
    margin: auto;
  }
  .information_pop-up_description, .information_free-space_description {
    max-width: 500px;
    margin: 30px auto 100px;
  }
  .information_pop-up_text {
    width: 6%;
    top: -20%;
    left: 26%;
  }
  .information_free-space_text {
    width: 6%;
    top: -32%;
  }
}
@media(min-width: 1025px) {
  .section_information {
    max-width: 1300px;
    margin: 0 auto 80px;
  }
  .infomation_part1, .infomation_part2 {
    display: flex;
  }
  .infomation_part2 {
    flex-direction: row-reverse;
  }
  .infomation_pop-up, .infomation_free-space {
    width: 50%;
  }
  .information_pop-up_text, .information_free-space_text {
    width: 6%;
    transform: initial;
    top: 32%;
    left: 96%;
  }
  .information_free-space_text {
    top: 20%;
    left: -3%;
  }
  .information_pop-up_description, .information_free-space_description {
    width: 40%;
  }
  .information_pop-up_description, .information_free-space_description {
    max-width: 500px;
    margin: auto;
  }
	.information_flower, .information_inside {
    padding: 100px 83px;
  }
}
/*about-coffee*/
.section_about-coffee {
  background-color: #ebefef;
  padding: 48px 24px;
}
.section_about-coffee h3 {
  margin-top: 70px;
}
.about-coffee_inside {
  background-color: #fff;
  padding: 0 18px 50px;
}
.about-coffee_description {
  line-height: 3.0rem;
  margin-bottom: 60px;
  text-align: left;
}
.about-specialty-coffee_link {
  position: relative;
  display: block;
  font-family: "BrandonGrotesque-Bold";
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1.8rem;
  text-decoration: none;
  background-color: #8CB4C7;
  padding: 14px 30px 14px 20px;
	box-shadow: 6px 6px #efefef;
}
.about-specialty-coffee_link span {
  font-size: 1.2rem;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
  font-weight: 500;
  position: relative;
}
.about-specialty-coffee_link:after {
  content: "";
  position: absolute;
  background-color: inherit;
  width: 10px;
  height: 10px;
  right: 20px;
  border-top: solid 2px;
  border-right: solid 2px;
  transform: rotate(45deg) translateY(-50%);
}
@media(min-width: 600px) {
  .about-coffee_description, .about-specialty-coffee_link {
    max-width: 500px;
    margin: 0 auto;
  }
  .about-coffee_description {
    margin-bottom: 70px;
  }
  .about-coffee_inside {
    padding-bottom: 70px;
    max-width: 1300px;
    margin: auto;
  }
  .section_about-coffee {
    padding: 70px 83px;
  }
  .about-specialty-coffee_link:after {
    display: none;
  }
  .about-specialty-coffee_link span {
    position: relative;
  }
  .about-specialty-coffee_link span:after {
    content: "";
    position: absolute;
    background-color: inherit;
    width: 10px;
    height: 10px;
    right: -80px;
    border-top: solid 2px;
    border-right: solid 2px;
    transform: rotate(45deg) translateY(-50%);
  }
}
/*menu*/
.section_menu h3 {
  margin-top: 70px;
}
.menu_list {
  text-align: left;
  margin: 0 24px 70px;
}
.menu_list ul {
  margin-bottom: 50px;
}
.menu_list ul li {
  padding: 15px 0 10px;
  border-bottom: solid 1px #bababa;
  list-style: none;
}
.menu_list ul li span {
  float: right;
  font-family: "BrandonGrotesque-Regular";
}
.section_menu p {
  line-height: 3.0rem;
}
.smoothTrigger {
	opacity: 0;
}
.smooth {
	animation-name: smoothAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	transform-origin: left;
	opacity: 0;
}
@keyframes smoothAnime {
	from {
		transform: translate3d(0,100%,0) skewY(12deg);
		opacity: 0;
	}
	to {
		transform: translate3d(0,0,0) skewY(0);
		opacity: 1;
	}
}
@media(min-width: 600px) {
  .menu_list {
    max-width: 500px;
    margin: 0 auto 70px;
  }
}
@media(min-width: 1025px) {
  .section_menu {
    padding: 50px 83px 50px;
  }
  .menu_list {
    max-width: 1000px;
    margin: auto;
    display: flex;
  }
  .menu_list_part1, .menu_list_part2 {
    width: 50%;
  }
  .menu_list_part1 {
    margin-right: 40px;
  }
  .menu_list_part2 {
    margin-left: 40px;
  }
}
/*access*/
.section_access {
  background-color: #ebefef;
  padding: 20px 0 48px;
}
.section_access P {
  display: inline-block;
  line-height: 3.0rem;
  text-align: left;
  margin: 0 24px 30px;
}
.section_access iframe {
  width: 100%;
  aspect-ratio: 16/9;
}
@media(min-width: 600px) {
  .access_address {
    text-align: center;
  }
  .section_access iframe {
    max-width: 800px;
  }
}
@media(min-width: 1025px) {
  .section_access {
    padding: 20px 0 80px;
  }
}
/*contact*/
.section_contact {
  margin: 70px 24px 70px;
}
.contact_inside {
  text-align: left;
  line-height: 3.0rem;
  margin-bottom: 50px;
	font-weight: 500;
}
@media(min-width: 600px) {
  .contact_inside, .section_contact a {
    max-width: 500px;
    margin: 0 auto 70px;
  }
}
/*footer*/
.footer {
  background-color: #ebefef;
  padding: 50px 24px 20px;
}
.footer a img {
  width: 70px;
  height: auto;
}
.footer nav ul {
  margin: 30px 0 30px;
}
.footer nav ul li a {
  text-decoration: none;
  color: #333;
  line-height: 3.0rem;
	position: relative;
}
.footer nav ul li a:hover {
	opacity: 1;
	color: #8CB4C7;
}
.footer nav ul li a:before {
  background: #8CB4C7;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -4px;
  margin: auto;
  transform-origin: center top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.footer nav ul li a:hover::before {
  transform-origin: center top;
  transform: scale(1, 1);
}
.footer small {
  font-size: 1.4rem;
}
@media(min-width: 1025px) {
  .footer {
    padding: 80px 83px 30px;
  }
  .footer_inside {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
  }
  .footer a img {
    width: 120px;
    margin-left: 80px;
  }
  .footer nav ul {
    margin: 0 0 30px 160px;
    text-align: left;
  }
}