@charset "utf-8";

/* 全デバイス共通 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:  "Kiwi Maru",Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: rgb(67, 66, 66);
}

li{
  list-style: none
}

a{
  text-decoration: none;
}


/* PC用のスタイル */
/* ====FV==== */
header {
  height: 810px;
    /* オーバーレイを重ねて背景画像のコントラスト調整↓ */
    background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("../images/fv.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* 左側キャッチ */
.fv-text {
  position: absolute;
  top: 40%;
  margin-left: 106px;
  transform: translateY(-50%);
  text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.fv-text h1 {
  font-size: 64px;
  line-height: 1.5;
  color: #F5F5F5;
}

.sub {
  margin-top: 40px;
  color: #F5F5F5;
  font-size: 21px;
}

/* 右下 */
.goto-menu {
  position: absolute;
  right: 96px;
  bottom: 56px;
  color: #F5F5F5;
  font-size: 14px;
}

.goto-menu:hover {
  opacity: 0.7;
  color: #c7c6c5;
}

.fv-banner {
  height: 400px;
  background-image: url(../images/fv_banner_pc.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

/* ===FV終わり=== */

/* ===About=== */
#about {
  background-color: #FAFAF8;
  padding-top: 160px;
}

#about h2{

  text-align: center;
  font-size: 40px;
  color: #3F3F3F;
}

#about h3 {
  margin-top: 16px;
  text-align: center;
  font-size: 20px;
  color: #777777;
}

.about-wrap {
  padding: 120px 0px 160px;
  display: flex;
  justify-content: center;
  text-align: center;
  gap: 50px;
}

.about-wrap img {
  width: 464px;
}

.about-inner h4 {
  padding-bottom: 80px;
  font-size: 32px;
  color: #3F3F3F;
}

.about-inner p {
  font-size: 24px;
  color: #3F3F3F;
  text-align: left;
  line-height: 55px;
}

/* ===About終わり=== */

/* ===Concept=== */
#concept {
  background-color: #F8F7F4;
  padding: 160px 0px 80px;
}

#concept h2 {
  text-align: center;
  font-size: 40px;
  color: #3F3F3F;
}

#concept h3 {
  margin: 16px 0px 120px;
  text-align: center;
  font-size: 20px;
  color: #777777;
}

.concept-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 106px;
  padding-bottom: 80px;
}

/* 2つ目だけ横並びを逆に */
#concept .concept-wrap:nth-of-type(2) {
  flex-direction: row-reverse;
}

.concept-wrap img {
  width: 387px;
  border-radius: 8px;
  filter: contrast(70%);
}

.concept-inner h4 {
  width: 312px;
  font-size: 34px;
  color: #3F3F3F;
  margin-bottom: 77px;
}

.concept-inner p {
  width: 312px;
  font-size: 24px;
  line-height: 55px;
  color: #3F3F3F;
}

/* ===Concept終わり=== */

/* ===Menu=== */
#menu {
  background-color: #F8F7F4;
  padding: 160px 0px 106px;
}

#menu h2 {
  text-align: center;
  font-size: 40px;
  color: #3F3F3F;
}

#menu h3 {
  margin: 16px 0px 120px;
  text-align: center;
  font-size: 20px;
  color: #777777;
}

#menu h4 {
  font-size: 24px;
  color: #3F3F3F;
  margin: 80px 0px 40px;
  text-align: center;
}

.drink, .sweets {
  max-width: 630px;
  margin: 0 auto;
}

#menu dl {
    display: table;
    width: 100%;
    border: solid #e4e4e4;
    border-width: 1px 0;
}

#menu dt{
    display: table-cell;
    padding:16px;
    font-size: 24px;
    color: #3F3F3F;
}

#menu dd{
    text-align: right;
    display: table-cell;
    padding:16px;
    font-size: 24px;
    color: #3F3F3F;
}

/* ===Menu終わり=== */

/* ===Access=== */
#access {
  background-color: #F8F7F4;
  padding: 40px 0px 160px;
}

#access h2 {
  text-align: center;
  font-size: 40px;
  color: #3F3F3F;
}

#access h3 {
  margin: 16px 0px 120px;
  text-align: center;
  font-size: 20px;
  color: #777777;
}

#access dl {
  max-width: 800px;
  margin: 0 auto;
  color: #333333;
  font-size: 24px;
}

#access dl dt {
  padding-bottom: 10px;
}

#access dl dd {
  padding-bottom: 32px;
}

/* ===Access終わり=== */

/* ===footer=== */
footer {
  background-color: #ECEAE6;
  padding: 40px 0px;
}

footer h5 {
  text-align: center;
  color: #333333;
  margin-bottom: 7px;
  font-size: 20px;
}

footer h6 {
  text-align: center;
  color: #777777;
  font-size: 15px;
  margin-bottom: 40px;
}

footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-bottom: 40px;
}

footer ul li {
  color: #555555;

}

small {
  display: block;
  text-align: center;
  color: #888888;
  font-size: 14px;
}

/* ===footer終わり=== */

/* ここまでPC用のスタイル */


/*
　メディアクエリの記述によるメディアの指定（どのようなメディアに対する指示か）
　新しいスクリーンのみ
　幅は最大500pxまで（500px以下）
 */
@media only screen and (max-width:600px) {

  header {
    height: 400px;
  }

  .fv-text h1 {
    font-size: 30px;
  }

  .sub {
    margin-top: 16px;
    font-size: 12px;
  }

  /* 右下 */
  .goto-menu {
    right: 32px;
    bottom: 16px;
    font-size: 10px;
  }

  .fv-banner {
    height: 180px;
    background-image: url(../images/fv_banner_sp.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
  }

  /* ===About=== */
  #about {
    padding-top: 80px;
  }

  #about h2{
    font-size: 24px;
    }

  #about h3 {
    font-size: 10px;
  }

  .about-wrap {
    padding: 40px 0px 106px;
    display: block;
    justify-content: center;
    text-align: center; 
  }

  .about-wrap img {
    width: 229px;
    margin-bottom: 40px;
  }  

  .about-inner h4 {
    padding-bottom: 20px;
    font-size: 16px;
  }

  .about-inner p {
    font-size: 12px;
    line-height: 24px;
    text-align: center; 

  }
/* ===About終わり=== */

/* ===Concept=== */
  #concept {
    padding: 80px 0px 106px;
  }

  #concept h2 {
    font-size: 24px;
  }

  #concept h3 {
    margin: 16px 0px 40px;
    font-size: 10px;
  }

  .concept-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding-bottom: 40px;
  }

  .concept-wrap img {
    width: 190px;
    display: block;
    margin: 0 auto 16px;
  }

  .concept-inner {
    text-align: center;
  }

  #concept .concept-wrap:nth-of-type(2) {
    flex-direction: column;
  }


  .concept-inner h4,
  .concept-inner p {
    width: auto;
}

  .concept-inner h4 {
    font-size: 20px;
    margin-bottom: 8px;
    text-align: center;
  }

  .concept-inner p {
    font-size: 12px;
    line-height: 24px;
    text-align: center;
  }

/* ===Concept終わり=== */

/* ===Menu=== */
#menu {
  padding: 0px 0px 80px;
}

#menu h2 {
  font-size: 24px;
}

#menu h3 {
  margin: 16px 0px 0px;
  font-size: 12px;
}

#menu h4 {
  font-size: 16px;
  margin: 40px 0px 32px;
}

.drink, .sweets {
  max-width: 294px;
}

#menu dt{
    font-size: 12px;
}

#menu dd{
    font-size: 12px;
}

/* ===Menu終わり=== */

/* ===Access=== */
#access {
  padding: 40px 0px 80px;
}

#access h2 {
  font-size: 24px;
}

#access h3 {
  margin: 16px 0px 32px;
  font-size: 12px;
}

#access dl {
  max-width: 250px;
  font-size: 12px;
}

#access dl dt {
  padding-bottom: 8px;
}

#access dl dd {
  padding-bottom: 16px;
}

/* ===Access終わり=== */

/* ===footer=== */
footer {
  padding: 80px 0px;
}

h5 {
  margin-bottom: 4px;
  font-size: 15px;
}

h6 {
  font-size: 12px;
  margin-bottom: 16px;
}

footer ul {
  display: block;
  margin-bottom: 16px;
}

footer ul li {
  text-align: center;
  font-size: 12px;
  line-height: 30px;
}

small {
  font-size: 10px;
}

/* ===footer終わり=== */


}
/*上記以外の命令はメディアクエリの外の記述と、タブレット用の記述が適用される*/

/* ここまでスマホ用スタイル */