@charset "UTF-8";
/* CSS Document */
.main {
  background-color: #FFF;
  padding-bottom: 50px;
}
.section-top__main-image img {
  width: 100%;
  height: 50vw; /*画面に合わせて画像を大きくする方法。VWは画面横幅を100としたの値を入れる*/
  max-height: 800px; /*上記では縦が大きくなるため最大を入れる*/
  object-fit: cover; /*画像の埋め込み方*/
  object-position: 50% 50%; /*真ん中に埋める*/
}
/*画像送りスリックJAVA用*/
.section-top .slick-dots {
  bottom: 10px;
}
.section-top .slick-dots li button:before {
  color: #FFF;
  font-size: 10px;
}
@media(max-width:1160px) { /*　スマホ向け　この画面幅以下なら*/
  .section-top h2 {
    font-size: 2.2em;
    color: floralwhite;
    position: absolute; /*absoluteで位置指定する*/
    width: 100%;
    top: 15%;
    left: 5%;
    line-height: 1em;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 1);
  }
  /*メニュー body*/
  .section-menu1 {
    position: relative;
    margin: 30px 45px;
    margin-top: 10%;
    background-color: #EFD8D7;
    opacity: 0.8; /*不透明度80％*/
    padding: 40px 24px;
  }
  .section-menu1 h2 {
    font-size: 1.8em;
    padding-bottom: 10px;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
  }
  .section-menu__top-description {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.2em;
    line-height: 1.3em;
    color: #4C3C31;
  }
  .section-menu1 ul {
    text-align: center;
  }
  .section-menu1 ul li {
    display: inline-block; /*要素の横並び*/
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /*幅を固定して左右をautoにすると中央揃え*/
    background-color: #FFF;
    margin-bottom: 40px;
    border-radius: 6px 6px 6px 6px; /*ボックスの角を丸くする*/
    text-align: left; /*文字の左揃え*/
    font-size: 1.2em;
    line-height: 1.2em;
  }
  .section-menu1 ul li:last-child { /*最後の要素*/
    margin-right: 0;
  }
  .section-menu__item-picture {
    width: 100%;
    height: 80%;
    object-fit: cover;
    border-radius: 6px 6px 6px 6px; /*ボックスの角を丸くする*/
  }
  .section-menu__item-title {
    font-size: 1.1em;
  }
  /*メニュー face*/
  .section-menu2 {
    position: relative;
    margin: 30px 45px;
    margin-top: 10%;
    background-color: #EFD8D7;
    opacity: 0.8; /*不透明度80％*/
    padding: 40px 24px;
  }
  .section-menu2 h2 {
    font-size: 1.8em;
    padding-bottom: 10px;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
  }
  .section-menu2__top-description {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.2em;
    line-height: 1.3em;
    color: #4C3C31;
  }
  .section-menu2 ul {
    text-align: center;
  }
  .section-menu2 ul li {
    display: inline-block; /*要素の横並び*/
    width: 100%;
    max-width: 500px;
    margin: 0 auto; /*幅を固定して左右をautoにすると中央揃え*/
    background-color: #FFF;
    margin-bottom: 40px;
    border-radius: 6px 6px 6px 6px; /*ボックスの角を丸くする*/
    text-align: left; /*文字の左揃え*/
    font-size: 1.2em;
    line-height: 1.2em;
  }
  .section-menu2 ul li:last-child { /*最後の要素*/
    margin-right: 0;
  }
  .section-menu2__item-picture {
    width: 100%;
    height: 80%;
    object-fit: cover;
    border-radius: 6px 6px 6px 6px; /*ボックスの角を丸くする*/
  }
}
@media(min-width:1160px) { /*PC向け　この画面幅以上なら*/
  .section-top h2 {
    font-size: 3.5em;
    color: floralwhite;
    position: absolute; /*absoluteで位置指定する*/
    width: 100%;
    top: 20%;
    left: 5%;
    line-height: 1em;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 1);
  }
  /*メニュー body*/
  .section-menu1 {
    margin: 20px 45px;
    margin-top: 5%;
    background-color: #fef3f6;
    opacity: 0.9; /*不透明度80％*/
    padding: 40px 24px;
  }
  .section-menu1 h2 {
    font-size: 2em;
    padding-bottom: 40px;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
  }
  .section-menu__top-description {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.8em;
    line-height: 1.3em;
    color: #4C3C31;
  }
  .section-menu1 ul {
    text-align: center;
  }
  .section-menu1 ul li {
    display: inline-block; /*要素の横並び*/
    width: 500px;
    margin: 0 auto; /*幅を固定して左右をautoにすると中央揃え*/
    background-color: #FFF;
    margin-bottom: 40px;
    border-radius: 0px 0px 6px 6px; /*ボックスの角を丸くする*/
    text-align: left; /*文字の左揃え*/
    font-size: 1.3em;
    line-height: 1.2em;
  }
  .section-menu1 ul li:last-child { /*最後の要素*/
    margin-right: 0;
  }
  .section-menu__item-picture {
    width: 100%;
    height: 300px;
    border-radius: 0px 0px 0px 0px; /*ボックスの角を丸くする*/
  }
  .section-menu__item-title {
    font-size: 1.1em;
  }
  /*メニュー face*/
  .section-menu2 {
    margin: 20px 45px;
    margin-top: 5%;
    background-color: #fef3f6; /*#EFD8D7*/
    opacity: 0.9; /*不透明度80％*/
    padding: 40px 24px;
  }
  .section-menu2 h2 {
    font-size: 1.8em;
    padding-bottom: 40px;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
  }
  .section-menu2__top-description {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 1.8em;
    line-height: 1.3em;
    color: #4C3C31;
  }
  .section-menu2 ul {
    text-align: center;
  }
  .section-menu2 ul li {
    display: inline-block; /*要素の横並び*/
    width: 500px;
    margin: 0 auto; /*幅を固定して左右をautoにすると中央揃え*/
    background-color: #FFF;
    margin-bottom: 40px;
    border-radius: 0px 0px 6px 6px; /*ボックスの角を丸くする*/
    text-align: left; /*文字の左揃え*/
    font-size: 1.3em;
    line-height: 1.2em;
  }
  .section-menu2 ul li:last-child { /*最後の要素*/
    margin-right: 0;
  }
  .section-menu2__item-picture {
    width: 100%;
    height: 300px;
    border-radius: 6px 6px 6px 6px; /*ボックスの角を丸くする*/
  }
}