@charset "UTF-8";
/* CSS Document */

/*例：見出し：32px→24px
ボディテキスト：22.4px→16px
 font-size: 1.5em;  /*16×1.5=24 
 font-size: 0.7em;  /*24×0.7=16.8px*/


.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: #4C3C31;
  font-size: 10px;
}
@media(max-width:1160px) { /*　スマホ向け　この画面幅以下なら*/
	.section-top  {
    position:relative; /*親要素に相対的に絶対配置する ！*/
	}
	
  .section-top h2 {
    font-size: 2em;
    color: floralwhite;
    position: absolute; /*absoluteで位置指定する*/
    width: 90%;/* 横幅を調整 */
    top: 15%;
    left: 5%;
    line-height: 1em;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 1);
  }
  /*お知らせ*/
  .section-news {
    position: relative;
    margin: 0px 45px;
    margin-top: 3%;
    background-color: #d9ebdc;
    padding: 30px 24px;
  }
  .section-news h2 {
    font-size: 1.5em;
    padding-bottom: 20px;
    border-bottom: solid 1px #333;
    margin-bottom: 40px;
    text-align: center;
  }
  .section-news ol {
    list-style-type: none;
  }
  .section-news ol li {
    margin-bottom: 20px;
    text-align: left;
  }
  .section-news li time {
    font-weight: 800;
  }
  .section-news li time::after {
    content: " : ";
  }
  .section-news h3 {
    display: inline;
  }
  /*コンセプト*/
  .section-concept {
    max-width: 1800px;
    margin: 50px 45px;
  }
  .section-concept__item-picture {
    max-width: 100%;
    z-index: -1;
  }
  .section-concept .section-concept__comment {
    font-size: 1.5em;/*16×１.5=24 */
    line-height: 2em;
    background: #EFD8D7;
    opacity: 0.8; /*不透明度80％*/
    margin-left: 30%;
    margin-top: -10%;
    padding: 30px 30px 30px 30px;
  }
  .section-concept .section-concept__comment p {
    font-size: 0.7em;/*24×0.7=16.8px*/
    line-height: 1.5em;
  }
  /*メニュー*/
  .section-menu {
    margin: 30px 45px;
    margin-top: 10%;
    background-color: #EFD8D7;
    padding: 40px 24px;
  }
  .section-menu h2 {
    font-size: 2rem;
    padding-bottom: 40px;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
    margin-bottom: 20px;
  }
  .section-menu__comment1 {
    text-align: center;
    font-weight: bold; /*太字*/
    color: #E10206;
    font-size: 1.2em;
    line-height: 1em;
  }
  .section-menu__comment2 {
    margin-top: 20px;
    font-size: 1em;
    line-height: 1.2em;
    color: #4C3C31;
  }
  .section-menu ul {
    text-align: center;
  }
  .section-menu ul li {
    display: inline-block; /*要素の横並び*/
    list-style-type: none;
    margin: 0 auto; /*幅を固定して左右をautoにすると中央揃え*/
    margin: 10px;
  }
.section-menu img {
  width: 100%;
}	
	
  /*マップ*/
  .section-access {
    padding: 40px 24px 0px 24px; /*左右余白指定*/
  }
  .section-access h2 {
    font-size: 1.5em;
    padding-bottom: 20px;
    text-align: center;
    border-bottom: solid 1px #333; /*solidは実腺*/
    margin-bottom: 40px; /*線下余白*/
  }
  .section-access__break:after { /*afterとは疑似要素*/
    content: ""; /*改行無しの意味になる。*/
  }
  .section-access__map {
    max-width: 840px;
    margin: 0 auto;
    height: 340px;
  }
  .section-access__map iframe {
    width: 100%;
    height: 100%;
    border: solid 1px #333;
  }
  .section-access address {
    padding-top: 40px;
    text-align: center;
    font-size: 1.3em;
    line-height: 3rem;
  }
}
/*<-------------------------------------------------*/
@media(min-width:1160px) { /*PC向け　この画面幅以上なら*/
	.section-top  {
    position:relative; /*親要素に相対的に絶対配置する ！*/
	}
	
  .section-top h2 {
    font-size: 3.5em;
    color: floralwhite;
    position: absolute; /*absoluteで位置指定する*/
    width: 90%;
    top: 20%;
    left: 5%;
    line-height: 1em;
    text-shadow: 0 0 0.2em rgba(0, 0, 0, 1);
  }
  /*お知らせ*/
  .section-news {
    position: relative;
    margin: 0px 45px;
    margin-top: 3%;
    background-color: #d9ebdc;
    padding: 40px 24px;
  }
  .section-news h2 {
    font-size: 2em;
    padding-bottom: 40px;
    border-bottom: solid 1px #333;
    margin-bottom: 40px;
    text-align: center;
  }
  .section-news ol {
    list-style-type: none;
    font-size: 1.5em;
    line-height: 1.5em;
  }
  .section-news ol li {
    margin-bottom: 30px;
    text-align: left;
  }
  .section-news li time {
    font-weight: 800;
  }
  .section-news li time::after {
    content: " : ";
  }
  .section-news h3 {
    display: inline;
  }
  /*コンセプト*/
  .section-concept {
    max-width: 1800px;
    margin: 50px 45px;
  }
  .section-concept__item-picture {
    max-width: 80%;
    z-index: -1;
  }
  .section-concept .section-concept__comment {
    font-size: 2.5em;
    line-height: 2em;
    background: #EFD8D7;
    opacity: 0.8; /*不透明度80％*/
    margin-left: 60%;
    margin-top: -25%;
    padding: 10px 50px 50px 50px;
  }
  .section-concept .section-concept__comment p {
    font-size: 0.7em;
    line-height: 1.2em;
  }
  /*メニュー*/
  .section-menu {
    position: relative;
    margin: 30px 45px;
    margin-top: 13%;
    background-color: #EFD8D7;
    padding: 50px 24px;
  }
  .section-menu h2 {
    font-size: 2em;
    text-align: center;
    background: #4C3C31; /*背景*/
    color: white; /*文字を白*/
    padding: 10px 25px; /*内側余白*/
    border-radius: 20px; /*角丸*/
    margin-bottom: 50px;
  }
  .section-menu__comment1 {
    text-align: center;
    color: #E10206;
    font-size: 1.8em;
    line-height: 1.5em;
  }
  .section-menu__comment2 {
    margin-top: 20px;
    font-size: 1.3em;
    line-height: 1.5em;
    color: #4C3C31;
  }
  .section-menu ul {
    text-align: center;
  }
  .section-menu ul li {
    display: inline-block; /*要素の横並び*/
    margin: 30px 30px; /*幅を固定して左右をautoにすると中央揃え*/
  }
  .section-menu__item-picture {
    list-style-type: none;
    padding-top: 20px;
    width: 100%;
    height: 100%;
  }
  /*マップ*/
  .section-access {
    padding: 40px 24px 0px 24px; /*左右余白指定*/
  }
  .section-access h2 {
    font-size: 2em;
    padding-bottom: 40px;
    text-align: center;
    border-bottom: solid 1px #333; /*solidは実腺*/
    margin-bottom: 40px; /*線下余白*/
  }
  .section-access__break:after { /*afterとは疑似要素*/
    content: ""; /*改行無しの意味になる。*/
  }
  .section-access__map {
    max-width: 840px;
    margin: 0 auto;
    height: 340px;
  }
  .section-access__map iframe {
    width: 100%;
    height: 100%;
    border: solid 1px #333;
  }
  .section-access address {
    padding-top: 40px;
    text-align: center;
    font-size: 1.3em;
    line-height: 2em;
  }
}