@charset "utf-8";


/* 山内担当エリア */
/* 全体共通設定 */
body{
    background-color: #FAF8F7;
    color: #2d2a29;
    font-size: 16px;
    line-height: 1.7;
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
body div{
    width: 100%;
}

/* 見出し・小見出し */

/* スクロールしてふわっと出す↓(森内) */
.js-fade {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s,visibility 1s, transform 1s;
}
.inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
/* スクロールしてふわっと出す↑(森内) */

body h1{
  font-size: 30px;
  text-align: center;
  margin-top: 10vh;
  margin-bottom: 5vh;
  color: #95a1ac;
  font-family: "Cinzel Decorative";
 
}
body h2{
  font-size: 21px;
  margin-bottom: 5vh;
  background: linear-gradient(25deg, #2b2b2b, #a9aa9e, #474747);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.pc {
  display: none;
}
.sp {
  display: block;
}


/* ナビゲーションの編集はこちら*/

.gMenu {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 99;
  }
  /* メニューアイコンを画面右上に固定しています */
  .gMenu .menu-icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 12px;
    padding-top: 5px;
    height: 12px;
  }
  /* メニューアイコン（三本線）の真ん中の線です */
  .gMenu .menu-icon .navicon {
    background: #2d2a29; /* 色は自由に変更可能です */
    display: block;
    height: 2px; /* 太さ */
    width: 31px; /* 長さ */
    position: relative;
    transition: background .4s ease-out; /* 形が変わる時のアニメーション */
  }
  /* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
  .gMenu .menu-icon .navicon::before,
  .gMenu .menu-icon .navicon::after {
    background: #2d2a29; /* 色は自由に変更可能です */
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .4s ease-out; /* 形が変わる時のアニメーション */
    width: 100%;
  }
  .gMenu .menu-icon .navicon::before {top: 10px;} /* 位置を上にずらしています */
  .gMenu .menu-icon .navicon::after {top: -10px;} /* 位置を下にずらしています */
  /* 表示されるメニューです */
  .gMenu .menu {
    background-color: rgba(255,255,255,0.9);
    overflow: hidden;
    max-height: 0; /* ★最初は高さを0にして非表示状態に */
    transition: max-height .6s; /* 表示されるときのアニメーション */
    text-align: center;
  }
  /* メニュー部分のデザインです */
  .gMenu .menu li:first-of-type {
    padding-top: 50px;
  }
  .gMenu .menu li a {
    color: #2d2a29;
    display: block;
    padding: 24px 20px;
    text-decoration: none;
    text-transform: uppercase;
  }
  .gMenu .menu li a:hover {
    background-color: #EFE9E6;
  }
  /* チェックボックスは常に非表示です */
  .gMenu .menu-btn {
    display: none;
  }
  /* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
  .gMenu .menu-btn:checked ~ .menu {
    max-height: 450px; /* ★チェックボックスがオンの時高さを338pxにして表示させます */
    transition: max-height .6s;
  }
  /* メニューボタンの中央の線を非表示に */
  .gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}
  
  /* メニューボタンの上下の線を45度傾けて✕印を作ります */
  .gMenu .menu-btn:checked ~ .menu-icon .navicon::before {transform: rotate(-45deg);top: 0;}
  .gMenu .menu-btn:checked ~ .menu-icon .navicon::after {transform: rotate(45deg);top: 0;}






  /* ヘッダーエリア */
  /* アイコンやキービジュアルの設定 */
  .name img{
    width: 50%;
    padding: 10px 10px;
  }

  .topEyecath {
    background: linear-gradient(180deg,#d0d9d9 0%,#d0d9d9 50%,#95a1ac 50%,#95a1ac 0%);

  }
   #eyecatch01 img{
    width: 30%;
   }
   #eyecatch02 img{
    display: block;
    width: 60%;
    margin: 0 auto;
   }
   #eyecatch03 {
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
    font-size: 20px;
    text-shadow: 
    1px 1px 5px #FAF8F7,
    2px 2px 5px #FAF8F7; 
  } 
#eventtop{
    width: 100%;
    text-align: center;
}
#eventtop img{
    width: 80vw;
    margin: 70px auto;
}
/* オーナーバリスタのメッセージ */
.message p{
  width: 80%;
  margin: 10px auto 50px;
  font-size: 15px;
}

.sign{
  text-align: right;
  margin-bottom: 20vh;
  transform: rotate(-10deg);
}
.sign img{
  width: 40%;
  padding: 0 15vw 0 0;
  margin-top: -30px;
}



/* CONCEPTエリア */
/* CONCEPT１・２　設定共通 */
body .concept1{
  display: block;
}
body .concept1 .concept1_text{
  width: 80%;
  margin: 50px auto 20px;
  
}

body .concept1 .concept1_text p{
  /* line-height: 1.8em; */
}

.concept1_img{
  text-align: center;

}
.concept1 p {
  margin-bottom: 7px;
  line-height: 1.6em;
}
.concept1 p img{
  width: 70%;
}  


body .concept2{
  display: block;
}
body .concept2 .concept2_text{
  width: 80%;
  margin: 50px auto 20px;
}
body .concept2 .concept2_text p{
  margin-bottom: 7px;
  line-height: 1.6em;
}

.concept2_img{
  text-align: center;

}
.concept2 p img{
  width: 70%;
}  




/* パララックスの編集・調整はこちら*/
.parallax_box{
  width: 100%;
  margin-top: 50px;
}
.parallax_box img{
  width: 100%;
}
/* 画面下固定バナー */
.event_fix img{
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 10;
}
/* 山内スマホCSSここまで */


/* 「エミリー」About(マルコのストーリー)スマホ */
/* About全体共通設定 */
.innerwrap {
  width: 80%;
  margin: 50px auto 70px;
}

.innerwrap p,
.about_finaltext p {
  text-align: justify;
  margin-bottom: 20px;
  line-height: 1.6em;
  
}
.sp_margin {
  margin: 60px 0 30px;
}

/* ローマーのストリー背景 */
main .castle_top {
  width: 100%;
  margin: 0 auto;
}

.about_story {
  width: 100%;
  background-color: #d0d9d9;
  padding: 10px 0 ;
}

.about_text {
  margin-top: 30px;
  width: 100%;
}

/* About小見出しセンター・パディング */
.romestory_content h2 {
  padding-left: 20px;
  background: linear-gradient(25deg, #111111, #a0a095, #161616);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

.romestory_content h2 span {
  padding-left: 20px;
}

/* Aboutのメッセージ */
.about_message {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 70px;
}

.about_message img{
  width: 50%;
}

.about_messageRight {
  flex-basis: 45%;
  align-self: flex-end;
}

.about_messageRight p {
  margin: 0;
}

.about_messageRight img {
  width: 50%;
  margin-bottom: 15px;
}

/* About両親カフェエリア */
.about_oldcafe {
  width: 100%;
  line-height: 1.6em;
}

.about_oldcafe img {
  width: 100%;
}

/* Aboutマルコのギャラリーキャリアエリア */
.about_gallery {
  width: 100%;
}

.about_gallery img {
  width: 100%;
}

/* 日本に来るきっかけー夢への旅路 */
.about_dream {
  margin-top: 120px;
}
.about_dream p {
  text-align: center;
}
.dream_text p {
  text-align: left;
}
.about_dream img {
  width: 80%;
  margin-bottom: 50px;
}

/* バリスタへの道 */
/* 背景グラデーション */
.road {
  padding-top: 20px;
  background: rgb(208,217,217);
  background: linear-gradient(180deg, rgba(208,217,217,1) 45%, rgba(203,168,144,1) 100%);
}

/* 写真調整・重なる */
.road_container {
  width: 100%;
  position: relative;
  margin-bottom: 120px;
}

.road_pic1 {
  width: 65%;
}

.road_pic2 {
  width: 65%;
  position: absolute;
  top: 90px;
  right: 0px;
}

/* 最後の一言パディング */
.about_finaltext {
  width: 300px;
  margin: 200px auto 0px;
  padding-bottom: 100px;
}

.about_finaltext p {
  text-align: center;
  margin-bottom: 50px;
}

/* ここからタイピングアニメーション追加0414 */
.typing-effect p{
  text-align: justify;
  align-items: center;
  justify-content: center;
}

.typing {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.typing-effect {
  width: 70ch;
  animation: typing 10s steps(70), effect .1s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  /* font-size: 2em; */
  align-items: center;
  height: 20px;
}
 
@keyframes typing {
  from {
    width: 0;
  }
}
/* ここまでタイピングアニメーション0414 */


/* ★★★　ここから森内担当↓　★★★ */
/* 豆のこだわり説明エリア */
.bean_area {
  background: linear-gradient(0deg, #d0d9d9, #CBA890);
}
.bean_container1 .coffee_extraction_sp {
  display: block; /* スマホ用の画像を表示 */
  width: 100%;
  margin-bottom: 30px;
}
.bean_container1 .coffee_extraction_pc {
  display: none; /* パソコン用の画像は隠す */
}
.bean_area h2{
  width: 70%;
  margin: 0 auto 50px;
  background: linear-gradient(25deg, #050505, #494949, #020202);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}
.bean_area .bean_container1 {
  margin-bottom: 50px;
}
.bean_area .bean_container1 p {
  width: 80%;
  margin: 0 auto 20px ;
  line-height: 1.6em;
}

/* 地域別の味わいエリア */
.bean_area h3 img{
  width: 70%;
  display: block;
  margin: 0 auto;
}
.bean_container2 div{
  width: 100%;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 50px auto;
}
.bean_container2 p {
  width: 80%;
  margin: 0 auto;
}
.bean_container2 div dl{
  width: 45%;
  background-color: #efe9e6;
  border-radius: 30px;
  margin-bottom: 20px;
}
.bean_container2 div dl dd{
  font-size: 14px;
}
.bean_container2 div dl .taste{
  margin-top: 10px;
  font-weight: bold;

}

/* 気分に合わせてエリア */
.bean_container3 {
  margin-bottom: 80px;
}
.bean_container3 h3 {
  margin-bottom: 50px;
}
.bean_container3 p img{
  max-width: 60%;
  margin: 10px auto 0 ;
}
.bean_container3 div{
  background-color: #efe9e6;
  border-radius: 30px;
  text-align: center;
  width: 90%;
  margin: 10px auto;
  padding: 10px 0;
}
.feeling_area {
  display: flex;
  flex-wrap: wrap;
}
.feeling_area .feeling_img,.feeling_img1  {
  width: 40%;   /* 画像の微調整 */
}
.feeling_area .feeling_img1 img {
  width: 80px;  /* 画像の微調整 */
}
.feeling_area .feeling_img img {
  width: 110px;  /* 画像の微調整 */
}

.feeling_area dl {
  width: 60%;
  text-align: left;
  padding-left: 10px;
}
.feeling_area dl dd {
  margin-bottom: 10px;
}
.feeling_area dl dd p {
  padding: 0 5px;
  margin: 0 3px;
  display: inline-block;
  font-size: 11px;
  border: #95a1ac 1px solid;
  border-radius: 30px;
}
  /* パララックス効果 */
  .parallax_content.img_bg_03{
    background-image: url(img/tanoshimikata.png);
    background-size: cover;
  }
  

  /* cafe Stellaでの楽しみ方*/
.bean_container4 {
  margin-top: 50px;
  padding-top: 80px;
  text-align: center;
  margin: 0 auto ;
}
.bean_container4 p {
  width: 80%;
  margin: 50px auto 0;
  padding: 0 0 50px 0 ;
  text-align: left;
  color: black;
}

/* MENUエリア */
.menu_area {
  padding-top: 50px;
  background-color: #efe9e6;
}
.menu_area h2{
  width: 30%;
  margin: 0 auto;
  text-align: center;
  border-bottom: 0.5px solid #95a1ac;
}
.menu_area h2 + p {
  display: block;
  width: 80%;
  font-size: 15px;
  margin:20px auto;
  text-align: left;
  line-height: 1.6em;
}
.menu_area ul li p span {
  font-size: 13px;
}
.menu_area ul {
  margin-bottom: 50px;
}
.menu_area ul li {
  margin: 30px auto;
  height: 225px;
  width: 280px;
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
  &:hover {
    img {
      transform: scale(1.05);
    }
    div {
      bottom: 0;
    }
  }
  img {
    width: 100%;
    transition: 0.25s;
  }
  div {
    text-align: center;
    position: absolute;
    bottom: -30%;
    left: 0;
    width: 100%;
    margin: 0 auto ;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.562);
    color: #ffffff;
    transition: 1s;
  }
  div p {
    text-align: right;
    margin-bottom: 10px;
    font-size: 13px;
  }
}
.menu_area p img {
  display: block;
  margin: 0 auto;
}

/* ACCESSエリア */
.access_area {
  text-align: center;
}
.access_area .underline {
  width: 80%;
  margin: 0 auto 30px auto;
  text-align: left;
  border-bottom: 1px black solid;
}
.access_area ul {
  text-align: left;
  width: 60%;
  margin: 0 auto 30px 25vw;
}
.access_area ul li i {
  margin-right: 5px;
}
.access_area p {
  width: 90%;
  margin: 0 auto;
}

.access_area .access_point {
  text-align: left;
  font-size: 13px;
}
.map iframe {
  width: 100%;
  height: 240px;
  margin-bottom: 50px;
}

.sns_icon ul {
  display: flex;
  justify-content: flex-end;
  margin: 20px auto;
}
.sns_icon ul li img {
  width: 40px;
  margin: 0 5px;
}
/* さいごに */
.finally {
  background-color: #596066;
  padding: 100px 0 150px;
  text-align: center;
}
.finally p {
  color: #ffffff;
  font-size: 15px;
  width: 75vw;
  margin: 15px auto;
  line-height: 2em;
}




/*棚橋スマホ開始0226*/

/*グッズのコーヒー豆とマグカップのところを全て真ん中へ*/
#goodsArea .goods0102{
  width: 80%;
  margin: 50px auto;
}

/* ※※ここから下でアニメーション指示0228追加※※ */
.goods02_text{
  width: 100%;
  margin: 30px auto 50px;
}

.maingoods .goods01{
  width: 80%;
  margin: 0 auto;
}


.maingoods .goods01 .goods01_text {
  margin: 10px auto 0;
  height: 250px;
  width: 250px;
  position: relative;
  display: flex;
  text-align: center;
  /* flex-wrap: wrap; */
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  overflow: hidden;
  &:hover {
    .maingoods .goods01 .goods01_img img {
      transform: scale(1.05);
    }
    div {
      bottom: 0;
    }
  }
  img {
    width: 100%;
    transition: 0.25s;
  }

  div {
    text-align: right;
    position: absolute;
    bottom: -15%;
    left: 0;
    width: 100%;
    /* margin: 0 auto ; */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.562);
    color: #ffffff;
    transition: 1s;
  }

    div p{
      font-size: 20px;
    }
}

.maingoods .goods01 .goods01_text .goods01_img img {
  display: block;
  margin: 0 auto;
}



/* 0228アニメーション終了 */



/*コーヒーの見出し*/
.goods02_text h2{
  font-size: 20px;
  margin: 2% 0  30px;
  text-align: center;
}


/*othersのその他のところを並べる*/

.goods3{
  width: 90%;
  margin: 0 auto;
}

/*3つのグッズが左に写真、右に説明文*/
.othergoods{
  display: flex;
  margin: 10% 0;
  width: 100%;
}

.othergoods .othergoods_img{
  width: 50%;
}
.othergoods .othergoods_img img{
  width: 100%;

}

.goods3 .othergoods > dl{
  width: 50%;
  margin: 0 0 5% 5%;
}
.goods3 .othergoods  dl dd{
  font-size: 14px;
}

.goods3 .othergoods > dl > dd{
  padding-bottom: 2%;
}

/* ※※ここから商品名の下のボーダーのアニメーション含む※※ */
.goods3 .othergoods > dl > dt{
  font-size: 18px;
  padding-bottom: 5%;
  margin-bottom: 10%;
  position: relative;
}

.othergoods dl dt:before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
  border-bottom: 5px solid ;
  border-color: rgba(208, 217, 217, 0.5);
  border-radius: 5px;
	animation: border_anim 3s linear forwards;
  animation-iteration-count:infinite;
}

@keyframes border_anim {
	0%{
		width: 0%;
	}
	100%{
		width: 100%;
	}
}

/* 0228ボーダーのアニメーションおわり!!!!! */



/*ここからはLINEの案内*/

.line_text{
  width: 80%;
  margin: 5% auto;
}

.linetopic{
  width: 80%;
  margin: 5% auto;
}

.line_present{
  width: 100%;
  margin: 2% 0;
}

.linetopic .line_img .sp img{
  width: 100%;
  margin: 15% 0;
}

.linetopic .line_present p{
  padding-top: 10px;
  padding-bottom: 5px;
}

.linetopic .line_present .cookies_img{
  display: block;
  text-align: right;

}

.linetopic .line_present .search_img img{
  width: 50%;
  display: block;
  margin: 0 auto;
}




/* 山内【PC】CSSここから */
/* PC用メディアクエリ */
@media screen and (min-width:800px){


/* sp・pc切り替え */
body {
  width: 90vw;
  margin: 0 auto;
}
  .pc{
    display: block;

  }
  .sp{
    display: none;
  }
  .topEyecath {
    background: linear-gradient(180deg,#d0d9d9 0%,#d0d9d9 50%,#95a1ac 50%,#95a1ac 0%);
    height: 100vh;
   }
   .eyecatch {
     width: 100%;
     height: 70vh;
   }
   #eyecatch01 img{
    width: 200px;
    margin-left: 5%;
   }
   #eyecatch02{
    position: relative;
    top: -80px;
    margin: 0 auto;
    text-align: center;
   }
   #eyecatch02 img{
    height: 70vh;
    width: auto;   
   }
   #eyecatch03 {
    text-align: left; /* 縦書きへ */
    writing-mode: vertical-rl;
    display: inline-block;
    position: relative;
    left: 75%;
    top: -55%;
    line-height: 2;
    letter-spacing: 0.2em;
    font-size: 23px;
   }
  .event_fix img{
    width: 15%;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 10;
    animation: poyopoyo 3s ease-out infinite;
    opacity: 1;
  }
  
  @keyframes poyopoyo {
    0%, 40%, 60%, 80% {
      transform: scale(1.0);
    }
    50%, 70% {
      transform: scale(0.95);
    }
  }

  #eventtop img{
    width: 60vw;
    min-width: 600px;
    margin-top: 0;
}
body h1{
  font-size: 70px;
}
body h2{
  font-size: 30px;
}
body p{
  font-size: 20px;
  line-height: 1.5;
}



/* 【PC】77ヘッダー部分 */
.name{
  width: 30vw;
  margin: 0;
}
.name img {
  width: 200px;
  padding: 20px 10px;
}

/* PC版ナビゲーションの調整はこちらから */
header nav div{
  width: 60vw;
}
header{
  display: flex;
  height: 80px;
}
header .wMenu{
  top: 40px;
  right: 0;

  z-index: 100;
}
header .wMenu ul{
  display: flex;
  justify-content: space-around;
  width: 60vw;
  margin: 30px 0 10px;
  padding: 10px 10px 0;
  color: #95a1ac;
  text-align: right;
}
header .wMenu ul li {
  padding-left: 5px;
}
header .wMenu ul li a:hover {
  text-decoration: underline;
}
nav .ffJosefin{
  position: relative;
}
/* eventバナー */
#eventtop{
  margin-top: 80px;
}

/* 【PC】マルコのメッセージ */
.message{
  width: 100%;
  margin: 80px auto 50px;
}
.message p{
  font-size: 20px;
  width: 70%;
}


/* 【PC】コンセプト */
body section {
  margin-bottom: 30px;
}
body .concept1{
  display: flex;
  width: 80%;
  margin: 0 auto;
  align-items: center;
}
body .concept1 .concept1_text{
  width: 50%;
  margin: 0;
}
body .concept1_text p {
  text-align: justify;
}
body .concept1_img{
  width: 50%;
}
body .concept2{
  display: flex;
  width: 75%;
  margin: 0 auto;
  align-items: center;
}
body .concept2 .concept2_text{
  width: 50%;
  margin: 0;
  order: 1;
}
body .concept2_text p {
  text-align: justify;
}
body .concept2_img{
  width: 50%;
}
/* 【PC】パララックスエリアの編集 */
.parallax_content.img_bg_01{
  width: 100%;
}
.parallax_content.img_bg_02{
  width: 100%;
}
.parallax_content{
  min-height: 500px;
}
.front_content{
  padding: 60px;
}
/* min-heightで窓の高さ調整 */
.parallax_box{
  margin-top: 200px;
}
.parallax_content{
  min-height: 200px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.front_content{
  padding: 25px;
  background-color: #FAF8F7;
}
/* background-imgでパララックス画像を変更 */
.parallax_content.img_bg_01{
  background-image: url(img/museum.png);
}
.parallax_content.img_bg_02{
  background-image: url(img/black-and-white.jpg);
}
.parallax_box p{
  font-size: 180px;
  font-weight: bold;
  text-align: center;
  padding: 150px 0;
  color: rgba(100, 100, 100, 0.8);
}

/* 山内【PC】CSSここまで */


/* PC「エミリー」About(マルコのストーリー)*/
/* About全体 */
.sp_margin {
  margin: 0;
} /*スマホ用マージン0に*/

.pc_margin {
  margin-bottom: 120px;
} /*PC用マージン調整*/

.innerwrap {
  margin: 50px auto 100px;
}

.about_photo {
  flex-basis: 40%;
}  /* 写真のサイズを調整 */

.about_text {
  margin-top: 0;
  flex-basis: 50%;
} /* 写真の説明の箱のサイズ */

.about_photo img {
  width: 100%;
} /* 写真サイズ調整 */

/* Aboutのメッセージ */
/*ストリーのパディング調整 */
.about_story {
  padding: 30px 0 100px;
} 

.romestory_content h2 {
  text-align: center;
  margin-bottom: 80px;
} /* Aboutの小見出しセンターに */

.romestory_content h2 span {
  padding-left: 20%;
}

.about_message img {
  width: 35% ;
  margin: 0 auto;
}  /* マルコの画像サイズ調整 */

.about_messageRight {
  flex-basis: 50%;
}

.about_messageRight img {
  width: 30%;
}

.about_pcText {
  width: 80%;
  margin: 120px auto;
}

/* About両親カフェエリア */
.about_oldcafe {
  display: flex;
  justify-content: space-between;
  align-items: center;
} /* flexboxに変更 */

/* マルコのギャラリーキャリアエリア */
.about_gallery {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding-right: 30px;
} /* flexboxに変更 */

/* 日本に来るきっかけー夢への旅路 */
.about_dream {
  padding: 70px 0;
}

.about_dream img {
  width: 60%;
  margin: 0 auto;
}

.dream_text {
  width: 95%;
  margin: 0;
}

.dream_text h2 {
  text-align: left;
}

/* バリスタの道へ */
.road h2 {
  text-align: left;
  margin-bottom: 50px;
}

/* 背景のグラデーション調整 */
body .road {
  margin-bottom: 0;
}
.road {
  background: linear-gradient(180deg, rgba(208,217,217,1) 10%, rgba(203,168,144,1) 100%);
}

/* flexboxに変更・写真サイズ調整 */
.road_container1 {
  width: 90%;
  display: flex;
  justify-content: space-between;
}

.road_container1 p {
  align-self: center;
}

.road_container2 {
  width: 90%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
}

/* 最後の一言エリア */
.about_finaltext {
  width: 80%;
  margin-top: 200px;
  padding-bottom: 10%;
}

.about_finaltext p {
  padding-bottom: 10%;
}

/* ここからタイピングアニメーションPC */
.typing-effect p{
  text-align: justify;
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}

.typing {
  /* height: 50vh; */
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.typing-effect {
  width: 23ch;
  animation: typing 3s steps(23),  step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  font-size: 2em;
  align-items: center;
  height: 30px;
}
 

    

/* ここまでタイピングアニメーション */

/* 【PC】ここから森内エリア */
.bean_container1 .coffee_extraction_sp {
  display: none;  /* スマホ用画像を非表示 */
}
.bean_container1 .coffee_extraction_pc {
  display: block; /* パソコン用画像を表示 */
  width: 100%;
  margin-bottom: 100px;
}
.bean_area h2{
  font-size: 30px;
  text-align: center;
  margin: 150px auto 100px;
}
.bean_area .bean_container1 {
  margin-bottom: 150px;
  margin: 0 auto 150px auto;
}
.bean_area .bean_container1 p {
width: 70%;
}
/* 地域別の味わい */
.bean_area .bean_container2 {
  margin-bottom: 150px;
}
.bean_area h3 img{
  width: 500px;
  display: block;
  margin: 0 auto;
}
.bean_container2 div {
  width: 80%;
}
.bean_container2 p {
  width: 85%;
  font-size: 17px;
}
.bean_container2 div dl{
  width: 200px; /* 横に４つ並べる */
}
.bean_container2 div dl dt{
  margin-top: 10px;
  font-size: 25px;
}
.bean_container2 div dl dd{
  font-size: 15px;
}
.bean_container2 div dl .taste{
  font-size: 20px;
  margin-top: 10px;
  font-weight: bold;
}

/* 気分に合わせて */
.bean_container3 {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}

.bean_container3 h3 {
  width: 100%;
}

.bean_container3 div{
  width: 33vw;
  margin-bottom: 20px;
  border-radius: 40px;
}
.bean_container3 div div{
  width: 100%;
}

.bean_container3 p img{
  max-width: 70%;
}

.feeling_area {
  justify-content: center;
}

.feeling_area .feeling_img1 img {
  width: 130px;
}
.feeling_area .feeling_img {
  width: 60%;
}
.feeling_area .feeling_img img {
  width: 170px;  
}
.feeling_area dl {
  margin-top: 30px;
  text-align: center;
  width: 100%;
}
.feeling_area dt {
  font-size: 20px;
}
.feeling_area dl dd {
  margin-bottom: 20px;
}
.feeling_area dl dd p {
  padding: 0 10px;
  margin: 10px  0 0 ;
  display: inline-block;
  font-size: 17px;
  border: #95a1ac 1px solid;
  border-radius: 30px;
} 
/* cafe Stellaの楽しみ方 */
.bean_container4 h2 {
  font-size: 40px;
}
.bean_container4 p {
  width: 80%;
  font-size: 20px;
  margin: 0 auto;
  padding-bottom: 150px;
  /* line-height: 1.8em; */
}
/* MENUエリア */
.menu_area {
  text-align: center;
}
.menu_area h2 {
  margin-top: 100px;
}
.menu_area h2 + p{
  text-align: center;
  font-size: 18px;
}
.menu_area p{
  width: 100%;
  margin-bottom: 20px;
  font-size: 20px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.menu_area ul {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  justify-content: space-between;
  margin: 0 auto;
  gap: 30px;
} 
.menu_area ul li {
  margin: 10px auto;
  height: 250px;
  width: 300px;
  img {
    width: 100%;
  }
  div {
    bottom: -25%;
    width: 100%;
    margin: 0 auto ;
    padding: 10px;
  }
  div p {
    font-size: 15px;
  }
}

.menu_area li {
  width: 400px;
}

.menu_area p img {
  width: 250px;
}

/* ★　ACCESSエリア　★ */
.access_area .underline {
  margin-bottom: 30px;
  width: 60%;
  text-align: center;
}
.access_area ul {
  text-align: center;
  margin: 0 auto 30px;
  font-size: 20px;
}
.access_area .access_point {
  text-align: center;
  font-size: 16px;
}

.map iframe {
  height: 400px;
}
.sns_icon ul {
  margin: 50px 10vw 20px auto;
}
.sns_icon ul li img {
  width: 40px;
  margin: 0 1vw;
}

/* さいごに */
.finally p {
  font-size: 23px;
  line-height: 2em;
  
}

/*棚橋PCすたーと*/
#goodsArea{
  margin-top: 50px;
  
}
.goods0102{
  width: 90%;
  text-align: center;
  margin-bottom: 100px;
}

.maingoods{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 85%;
  flex-wrap: nowrap;
}





/* ※※アニメーションに関する指示追加※※ */

.maingoods .goods01 .goods01_text {
  margin: 10px auto;
  height: 250px;
  img {
    width: 100%;
  }
  div {
    bottom: -15%;
    width: 100%;
    margin: 0 auto ;
    padding: 10px;
  }
  div p{
    font-size: 20px;
  }
}

.maingoods .goods01 .goods02_text h3{
  width: 90%;
  padding-left: 20%;
  font-weight: bold;

}
.goods01_text h2 {
  font-size: 18px;
}
.maingoods .goods01 .goods02_text p{
  width: 80%;
  padding-left: 20%;
  padding-top: 5%;
}

/*グッズ3つを縦に画像と説明文を貼る*/

.goods3{
  display: flex;
  width: 80%;
}

.othergoods{
  display: block;
}

.othergoods .othergoods_img{
  width: 70%;
  margin: 0 auto;
}
.goods3 .othergoods dl dd {
  font-size: 18px;
}
.goods3 .othergoods > dl{
  width: 60%;
  margin: 50px auto 0;
}


/*LINEの案内*/
.line_text{
  text-align: center;
  padding-bottom: 50px;
}

/*画像の大きさ設定*/

.linetopic{
  width: 80%;
  display: flex;
  align-items: center;
}

.linetopic .line_img{
  width: 70vw;
}


.linetopic .line_img .pc{
  width: 70%;
  margin: 0;
}


/*LINE画像の大きさを小さくする*/
.linetopic .line_img .pc img{
  width: 30vw;
  display: block;
}

.linetopic .line_present p{
  width: 85%;
  /* margin: 30px 0; */
  padding-bottom: 50px 0;
  text-align: left;
}

.linetopic .line_present .cookies_img{
  text-align: right;
}

.linetopic .line_present .search_img img{
  width: 40%;
}
.control{
  width: 100%;
}

.linetopic .line_present{
  min-width: 50%;
}

}