@charset "utf-8";
/* CSS Document */
.sp {
  display: block !important;
}
.pc {
  display: none !important;
}
.flex_top_nav {
  display: none;
}
.pc_img_latte_reaf {
  display: none;
}
.scrolldown2 {
  display: none;
}
@media screen and (min-width:768px) {
  .scrolldown2 {
    display: block;
  }
  .pc_img_latte_reaf {
    display: block;
    margin-top: 320px;
  }
  .pc_top_latte {
    width: 24%;
    margin-left: 13%;
    position: relative;
    z-index: 10;
  }
  .pc_top_coffeetree {
    width: 32%;
    margin-left: -80px;
  }
  .pc_top_hotcoffee {
    width: 24%;
    margin-left: -50px;
  }
  .flex_top_nav {
    display: block;
  }
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}
/*=== 9-1-2 丸が動いてスクロールを促す ====*/
/*スクロールダウン全体の場所*/
.scrolldown2 {
  /*描画位置※位置は適宜調整してください*/
  position: absolute;
  bottom: 10px;
  left: 50%;
}
/*Scrollテキストの描写*/
.scrolldown2 span {
  /*描画位置*/
  position: absolute;
  left: 10px;
  bottom: 10px;
  /*テキストの形状*/
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: -4px;
  /*丸の形状*/
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite, cirlemovehide 1.6s ease-out infinite;
}
/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove {
  0% {
    bottom: 45px;
  }
  100% {
    bottom: -5px;
  }
}
/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide {
  0% {
    opacity: 0
  }
  50% {
    opacity: 1;
  }
  80% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
  }
}
/* 線の描写 */
.scrolldown2:after {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom: 0;
  left: 0;
  /*線の形状*/
  width: 2px;
  height: 50px;
  background: #eee;
}
.box_tex {
  position: absolute;
  color: #fff;
  z-index: 5;
}
.box {
  position: relative;
}
.main_logo h1 {
  color: #fff;
  font-size: 2.5em;
  margin-top: 185px;
  margin-left: 70px;
}
@media screen and (min-width:768px) {
  .main_logo h1 {
    font-size: 3em;
    margin-top: 70px;
    margin-left: 80px;
  }
  .flex_top_nav {
    position: relative;
  }
  .pc_nav {
    position: absolute;
    z-index: 5;
    right: 0;
    margin-top: 220px;
    margin-right: 150px;
    font-size: 1.5em;
  }
  .pc_nav li {
    margin-bottom: 20px;
  }
  .pc_nav li a {
    text-decoration: none;
    color: #fff; /* メニューリストの文字色 */
  }
  .pc_snsicon {
    position: absolute;
    z-index: 5;
    right: 0;
    margin-right: 80px;
    margin-top: 90px;
  }
}
/* hamburgerここから */
/* inputを非表示 */
.input-hidden {
  display: none;
}
/* label */
.hamburger-demo-switch {
  cursor: pointer;
  position: absolute;
  right: 3%;
  top: 0; /* ハンバーガーアイコンの位置（上から） */
  z-index: 9999;
  width: 4em; /* アイコン（クリック可能領域）の幅 */
  height: 4em; /* アイコン（クリック可能領域の）高さ */
}
/* メニュー展開時にハンバーガーアイコンを固定 */
#hamburger-demo1:checked ~ .hamburger-demo-switch {
  position: fixed;
}
/* ハンバーガーアイコン */
.hamburger-switch-line1, .hamburger-switch-line1:before, .hamburger-switch-line1:after {
  width: 25px;
  height: 3px;
  background: #ccc; /* ハンバーガーアイコンの色 */
  position: absolute;
  top: 50%;
  left: 50%;
  transition: .3s;
  content: "";
}
.hamburger-switch-line1 {
  transform: translate(-50%, -50%);
}
.hamburger-switch-line1:before {
  transform: translate(-50%, -300%);
}
.hamburger-switch-line1:after {
  transform: translate(-50%, 200%);
}
/* ハンバーガーアイコン･アニメーション */
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1 {
  width: 0;
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:before {
  transform: rotate(45deg) translate(-40%, 325%);
}
#hamburger-demo1:checked ~ .hamburger-demo-switch .hamburger-switch-line1:after {
  transform: rotate(-45deg) translate(-40%, -325%);
}
/* メニューエリア */
.hamburger-demo-menuwrap {
  position: fixed;
  height: 100%;
  background: #fafafa; /* メニューエリアの背景色 */
  padding: 5em 3% 2em;
  z-index: 9998;
  transition: .3s;
  overflow-y: scroll; /* メニュー内容が多い場合に縦スクロールする */
  top: 0;
  left: 100%;
  width: 70%;
}
/* メニューリスト */
.hamburger-demo-menulist {
  margin-right: 3%;
  padding-left: 5% !important; /* !important不要な場合もあり */
  list-style: none;
}
.hamburger-demo-menulist li a {
  text-decoration: none;
  color: #333; /* メニューリストの文字色 */
  display: block;
  padding: 0.5em 0;
  font-size: 1.2em;
}
/* メニューエリア･アニメーション */
/* 右から */
#hamburger-demo1:checked ~ .hamburger-demo-menuwrap {
  left: 30%;
}
/* コンテンツカバー */
#hamburger-demo1:checked ~ .hamburger-demo-cover {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9997;
  background: rgba(3, 3, 3, .5);
  display: block;
}
/* PCではハンバーガーメニューを表示しない */
@media (min-width: 992px) {
  .hamburger-demo-menubox {
    display: none;
  }
}
.commitment {
  background-color: #272626;
  position: relative;
}
.about_us {
  position: absolute;
  left: 140px;
  top: 80px;
}
.about_tex {
  width: 80%;
  margin: auto;
	padding-top: 14px;
}
.about_p {
  width: 90%;
  margin: auto;
  margin-top: -50px;
}
.about commitment {
  position: relative;
}
@media (min-width: 992px) {
  .about_us {
    font-size: 1.3em;
    position: absolute;
    left: 50%;
    top: 260px;
    transform: translateX(-50%);
  }
	.about_p {
  width: 35%;
  margin-top: -150px;
}
	.about_tex {
  width: 35%;
  padding-top: 100px;
}
}
.position_goodtaste {
  position: relative;
}



.coffeebeans06_img {
  width: 70px;
  float: right;
  margin-right: 10px;
  margin-top: 30px;
  margin-bottom: 20px;
}
.latte_reaf {
  width: 95%;
  display: block;
  margin: auto;
}
.coffeebeans04_img {
  width: 20%;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 50px;
}
@media screen and (min-width:768px) {
  .coffeebeans04_img {
    width: 10%;
    margin-left: 8%;
    margin-top: 280px;
    margin-bottom: 180px;
  }
  .coffeebeans06_img {
    width: 10%;
    margin-right: 190px;
  }
  .latte_reaf {
    display: none;
  }
  .pc_flexbox {
    display: flex;
    margin-bottom: 300px;
    margin-top: 100px;
  }
  .pc_step01 {
    height: 100%;
	width: 100%;  
  }
}
.goodtaste {
  position: absolute;
  margin-left: 115px;
  margin-top: 33px;
}
.quality_tex {
  width: 90%;
  margin: auto;
  margin-bottom: 25px;
}
@media screen and (min-width:768px) {
  .quality_tex {
    width: 50%;
  }

	.goodtaste {
  font-size: 1.3em;
  display: block;
  padding-left: 38%;
  padding-top: 67px;
}
}
.step_img {
  display: block;
  width: 77%;
  margin: auto;
}
.step_h3 {
  font-size: 1.2em;
  text-align: center;
  padding: 10px;
}
@media screen and (min-width:768px) {
	.step_h3 {
		padding-top: 35px;
		padding-bottom: 20px;
		font-size: 1.3em;
	}
}

.step_p {
  width: 90%;
  margin: auto;
  margin-bottom: 100px;
}
.tree_bean_cup {
  display: block;
  width: 70%;
  margin: auto;
  margin-bottom: 70px;
}
@media screen and (min-width:768px) {
  .tree_bean_cup {
    width: 30%;
    margin: auto;
    margin-bottom: 200px;
  }
}
.enjoy_message {
  font-size: 2.5em;
  text-align: center;
  padding-bottom: 30px;
}
@media screen and (min-width:768px) {
  .enjoy_message {
    font-size: 3em;
    display: inline-block;
    margin-left: 450px;
    margin-top: 240px;
  }
  .enjoy_yourcoffee {
    width: 40%;
    float: right;
    margin-top: 50px;
    margin-right: 200px;
  }
}
.bag_bean04 {
  width: 30%;
  margin-left: 10px;
  margin-bottom: 40px;
  margin-top: 80px;
}
  .base_line {
    vertical-align: baseline;
    margin-bottom: -20px;
  }
@media screen and (min-width:768px) {
  .bag_bean04 {
    width: 13%;
    margin-top: 450px;
    margin-left: 140px;
    margin-bottom: 150px;
  }
  .base_line {
    vertical-align: baseline;
    margin-bottom: -20px;
  }
}
.cafe_info {
  background-color: #3b3939;
}
.about_cafe {
  position: absolute;
  margin-left: 170px;
  margin-top: 128px;
}
.cafe_tex {
  width: 60%;
  margin: auto;
  padding-top: 25px;
}
.cafe_p {
  width: 90%;
  margin: auto;
}
.coffee_table {
  display: block;
  width: 83%;
  margin: auto;
  margin-bottom: 40px;
}
@media screen and (min-width:768px) {
  .coffee_table {
    width: 40%;
    float: right;
    margin-right: 200px;
  }
  .about_cafe h2 {
    font-size: 1.3em;
    margin-left: 250px;
    margin-top: 350px;
  }
  .cafe_tex {
    position: relative;
    width: 25%;
    display: block;
    padding-top: 250px;
    margin-left: 200px;
  }
  .cafe_top_flex {
    display: flex;
  }
  .cafe_p {
    position: absolute;
    width: 30%;
    margin-left: 200px;
    margin-top: -150px;
  }
  .cafe_btn {
    position: absolute;
    margin-left: 380px;
    margin-top: -20px;
  }
}
.khemex_coffee {
  width: 20%;
  float: right;
  margin-right: 20px;
  margin-bottom: 50px;
}
@media screen and (min-width:768px) {
  .khemex_coffee {
    width: 8%;
    margin-top: 480px;
    margin-right: 650px;
    margin-bottom: 250px;
  }
}
.drip_coffee_img {
  margin-bottom: 20px;
}
.info_tex h3 {
  text-align: center;
  font-size: 1.4em;
  margin-top: 30px;
}
.info_tex p {
  width: 90%;
  margin: auto;
}
.last_p {
  padding-bottom: 90px;
}
@media screen and (min-width:768px) {
  .info_tex p {
    text-align: center;
    padding-bottom: 25px;
  }
  .info_tex h3 {
    font-size: 2em;
    margin-bottom: 25px;
    margin-top: 150px;
  }
  .info_tex {
    padding-bottom: 190px;
  }
}
.footer {
  background-color: #272626;
}
.footer h1 {
  font-size: 2.5em;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 50px;
}
.footer_p {
  width: 80%;
  float: right;
}
.icon_top_img {
  margin-left: 95px;
}
.icon {
  margin-right: 17px;
}
.btn_footer {
  display: none;
}
.snav {
  display: none;
}
@media screen and (min-width:768px) {
  .snav {
    display: block;
  }
  .snav ul li {
    display: inline-block;
    float: right;
    margin-right: 100px;
  }
  .footer h1 {
    display: block;
    margin-left: -1400px;
    padding-top: 100px;
  }
  .btn_footer {
    display: block;
    right: 0;
    margin-top: 100px;
    margin-right: 200px;
  }
  .footer_tex {
    display: block;
    margin-left: -328px;
  }
  .footer_tex h3 {
    margin-left: 300px;
  }
  .icon_top_img {
    display: block;
    margin-top: 250px;
    margin-left: 120px;
  }
  .footer_icon {
    margin-right: 30px;
  }
  .snav ul li a {
    font-size: 1.2em;
    text-decoration: none;
    color: #fff; /* メニューリストの文字色 */
  }
}
.footer_tex {
  margin-bottom: 200px;
}