@CHARSET "UTF-8";

/* ===================================================================
フォントの指定
=================================================================== */
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}

@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

/* ゴシック体 
html body{
  font-family: -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}*/

/* 明朝体*/
html body {
  font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* ================================================================ */

html body {
  background: #222629;
  margin: 0;
  color: #fff;
  overflow-x: hidden;
}

html body #container {
  line-height: 1.5;
}

img {
  display: block;
}

/* フォントサイズ設定 */
@media screen and (max-width: 480px) {
  html {
    font-size: 13px !important;
  }
}

@media screen and (min-width: 481px) and (max-width: 640px) {
  html {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 641px) {
  html {
    font-size: 16px !important;
  }
}


/* ===================================================================
ベース
=================================================================== */
article {
  margin: 1rem auto 0;
}

#container.area_flex {
  min-height: 100vh;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
}

#container .size {
  margin-left: auto;
  margin-right: auto;
}


#container {}


/* header */
header {
  font-size: 18px !important;
}

header.area_pc {
  background: #000;
  position: relative;
}

header.area_pc h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1.5; 
  font-size: 2.8rem;
}

#container nav.area_pc {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2d2d2d+0,383636+40,000000+100 */
  background: #222629;
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(45, 45, 45, 1) 0%, rgba(56, 54, 54, 1) 40%, rgba(0, 0, 0, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(45, 45, 45, 1) 0%, rgba(56, 54, 54, 1) 40%, rgba(0, 0, 0, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(45, 45, 45, 1) 0%, rgba(56, 54, 54, 1) 40%, rgba(0, 0, 0, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2d2d2d', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}

nav #main_menu {
  margin: 0 auto;
  text-align: center;
  border-left: 1px solid #6b6f70;
}

nav #main_menu>.flex-item {
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  padding: 1.6rem;
  border-right: 1px solid #6b6f70;
}

nav #main_menu .flex-item:hover {
  color: #628fa2 !important;
}


/* footer */
footer {
  padding-top: .5rem;
  background-color: #000;
  color: #fff;
}

footer a {
  color: #fff;
}

footer .reserve_btn {
  margin-bottom: 3rem;
}


/* copyright */
#bsc-copyright {
  font-size: .7em;
  text-align: left;
}

#copyright {
  font-size: .8em;
  text-align: center;
}

/* ===================================================================
pc nav固定
=================================================================== */
.nav_is-fixed {
  z-index: 50;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/* ===================================================================
見出し
=================================================================== */
h1 {
  font-size: 1.5rem;
  margin: .5rem 0;
}

h1 a {
  color: #000;
  text-decoration: none;
}

#sp_menu h1 {
  margin-left: .5em;
  color: #fff;
}

#wrapper *+h2,
#wrapper *+h3,
#wrapper *+h4,
#wrapper *+h5 {
  margin-top: 2rem;
}

h2 {
  font-size: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-bottom: .6rem;
}

/* ===================================================================
section
=================================================================== */
#wrapper>section {
  padding: 0 0 3rem 0;
}

/* ===================================================================
テキスト
=================================================================== */
.fc_red {
  color: #628fa2;
}

.bold {
  font-weight: bold;
}


/* ===================================================================
汎用
=================================================================== */
/* ページトップに戻る */
#totop {
  z-index: 2147483647;
  display: none;
  position: fixed;
  bottom: 1rem;
  right: 1rem;
}

#totop a {
  display: block;
  width: 2rem;
  height: 2rem;
  background: #333;
  text-align: center;
  color: #fff;
  text-decoration: none;
  line-height: 2rem;

  border-radius: 50%;
  /* CSS3草案 */
  -webkit-border-radius: 50%;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 50%;
  /* Firefox用 */
  text-decoration: none ! important;
}

#totop a:hover {
  -webkit-filter: opacity(0.7);
  -moz-filter: opacity(0.7);
  -o-filter: opacity(0.7);
  -ms-filter: opacity(0.7);
  filter: opacity(0.7);
}

.conversion {
  display: flex;
  width: 100%;
  position: fixed;
  bottom: 0;
}

.conversion img {
  width: 100%;
}

.reserve_btn a {
  text-decoration: none;
  color: #fff;
  background-color: #f79646;
  padding: .8rem 3rem;
}


/* ===================================================================
area
=================================================================== */

#about h3 {
  font-size: 1.5rem;
  color: #86bcf3;
  margin-bottom: 1rem;
}

#about div.about_img {
  flex-basis: 35%;
}

#about div.about_txt {
  flex-basis: 65%;
  margin-left: 1.8rem;
}

#about div.about_txt p+p {
  margin-top: .8rem;
}


#greeting h3 {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: .8rem;
}

/*#greeting div.greeting_img { flex-basis: 35%;}*/
#greeting div.greeting_txt {
  flex-basis: 100%;
  margin-right: 1.8rem;
}

#greeting div.greeting_txt p {
  text-indent: 1rem;
}


#app {
  background-color: #6b6f70;
  padding: 1rem 0 !important;
}

#app h3 {
  font-size: 1.2rem;
}

#schedule h3 {
  border-bottom: 0.5px solid #ccc;
  display: inline-block;
  margin-left: .5rem;
  font-size: 1.2rem;
  margin-bottom: .8rem;
}

#schedule ul li.schedule_item,
#schedule ul li.lunch_item,
#schedule ul li.place{
  border: 1px solid #eee;
}

#schedule>ul li.schedule_item,
#schedule>ul li.lunch_item {
  flex-basis: 24%;
}

#schedule .lunch_item {
  margin-right: .5rem;
}

#schedule>ul li.place,
#schedule>ul li.redroom {
  flex-basis: 49%;
}

#schedule>ul>li h5 {
  border-bottom: 0.5px solid #ccc;
  display: inline-block;
  margin-left: .5rem;
  font-size: 1rem;
  margin-bottom: .3rem;
}

#schedule>ul>li ul li {
  margin: 0 .5rem;
}

#schedule .place>div {
  margin: 0 .5rem;
}

/*#schedule .redroom > div*/
#schedule .place_txt {
  font-size: 1rem;
}

/*#schedule .redroom > div .redroom_txt*/

/*#schedule .redroom > div .redroom_img*/
#schedule a.place_link {
  color: #a9976d !important;
}

/*#schedule a.redroom_link { color: #a9976d !important;}*/
#schedule a.place_link:hover {
  color: #628fa2 !important;
}

/*#schedule a.redroom_link:hover { color: #628fa2 !important;}*/
#schedule .contact {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

#schedule .contact a {
  display: block;
  width: 100%;
  padding: .6rem 0;
  border: 1.5px solid #628fa2;
  background-color: #628fa2;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

#schedule .contact a:hover {
  color: #628fa2;
  border: 1.5px solid #628fa2;
  background-color: #fff;
}

#schedule .attention {
  margin-top: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  font-size: .9rem;
}

#schedule .attention>div {
  margin-top: .8rem;
}

#schedule .attention .asterisk {
  font-size: 1.1em;
}

#schedule .attention .asterisk:before {
  content: "※";
  display: inline-block;
  margin-left: -1rem;
}

#gallery ul li {
  width: 19%;
  margin: .5rem 0;
}


#info h4 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

#info #guest {
  border-bottom: 2px dashed #ccc;
  padding-bottom: 3rem;
  margin-bottom: 2.5rem;
}

#info #join {
  padding-top: 2rem;
}

#info #join ul {
  margin-bottom: 1.2rem;
}

#info #join .join_application {
  margin-top: 5.0rem;
  margin-bottom: 1.5rem;
}

.join_application a {
  border: 1.5px solid #628fa2;
  background-color: #628fa2;
  padding: 1.5rem 9.5rem;
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
}

.join_application a:hover {
  color: #628fa2;
  border: 1.5px solid #628fa2;
  background-color: #fff;
}


#member>div+div {
  border-top: 2px dashed #ccc;
  margin-top: 2rem;
}

#member h3 {
  border-left: 8px solid #bb342e;
  font-size: 1.2rem;
  margin: 1.5rem 0;
  padding-left: .8rem;
}

#member table {
  width: 100%;
  background-color: #fff;
  color: #333;
}

#member table tr>* {
  border: 1px solid #ccc;
  padding: .5rem 1rem;
  vertical-align: middle;
}

#member table tr>*:nth-of-type(1) {
  width: 46%;
  font-weight: bold;
  text-align: left;
}

#member table tr>*:nth-of-type(2) {
  background: #fff4f4;
  width: 27%;
  text-align: center;
}

#member table tr>*:nth-of-type(3) {
  background: #fbfff7;
  width: 27%;
  text-align: center;
}

#member table tr th:nth-of-type(1) {
  border-bottom: 5px solid #333;
}

#member table tr th:nth-of-type(2) {
  border-bottom: 5px solid #bb342e;
}

#member table tr th:nth-of-type(3) {
  border-bottom: 5px solid #4a9500;
}

#member table tr th {
  font-size: 1.1rem;
}

#member table tr td:nth-of-type(2) {
  font-size: 1.3rem;
  color: #bb342e
}

#member table tr td:nth-of-type(3) {
  font-size: 1.3rem;
  color: #360
}

#contact_btn a {
  border: 1.5px solid #628fa2;
  background-color: #628fa2;
  padding: 1.5rem 5rem;
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
}

#contact_btn a:hover {
  color: #628fa2;
  border: 1.5px solid #628fa2;
  background-color: #fff;
}

#link_area {
  margin-top: 3rem;
  padding: 3rem 0;
  background-color: #6b6f70;
}

#insta ul.insta_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 0;
}

#insta ul.insta_list li {
  position: relative;
  width: calc((100% - 50px)/3);
  height: 100%;
  margin-bottom: 10px;
  padding: 0;
}

#insta ul.insta_list li::before {
  content: "";
  display: block;
  padding-top: 100%;
}

#insta ul.insta_list a {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

#insta ul.insta_list img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#insta div.insta_btn {
  background-color: #000;
  padding: .5em 1em;
  width: fit-content;
  margin: 0 auto;
  cursor: pointer;
  transition: .3s
}

#insta div.insta_btn a {
  color: #fff;
  text-decoration: none;
}

#insta div.insta_btn:hover {
  background-color: #999;
}

#officer table {
  width: 100%;
}

#officer table tr th {
  text-align: left;
}

#officer table tr>* {
  border-bottom: 1px solid #fff;
  padding: .5rem;
}

#officer table a {
  color: #fff;
  text-decoration: none;
}

/* ===================================================================
media screen
=================================================================== */
/* スマホ */
@media screen and (max-width: 640px) {
  .sp_main-img {
    margin-top: 3.5rem;
    position: relative;
  }

  .sp_main-img h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.8rem;
    white-space: nowrap;
  }

  #wrapper>section {
    padding-top: 3.5rem;
  }

  #about>div,
  #greeting>div,
  #schedule>ul,
  #member>div.disp-flex {
    display: inline;
  }

  #about div.about_txt {
    margin-left: 0;
  }

  #greeting div.greeting_txt {
    margin-right: 0;
  }

  #app ul li {
    width: 50%;
  }

  #app ul li img {
    width: 80%;
    margin: 1rem auto;
  }

  #schedule>ul>li {
    width: 100%;
    margin-bottom: .5rem;
  }

  #schedule>ul>li ul li {
    font-size: 1rem !important;
  }

  #schedule .contact {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }

  #schedule .place>div .place_txt {
    font-size: .9rem;
  }

  #gallery ul li {
    width: 48%;
  }

  #member dl+dl {
    margin-top: 1rem;
  }

  #link_area .link_item {
    text-align: center;
  }

  #link_area .link_item+.link_item {
    margin-top: 2rem;
  }

  #link_area .link_item img {
    display: inline;
  }

  #officer table tr>* {
    padding: .5rem .2rem !important;
  }

}

/* タブレット1 */
@media screen and (min-width: 641px) {
  #wrapper>section {
    margin-top: 4rem;
  }

  #link_area>div {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
  }

  #link_area .link_item+.link_item {
    margin-left: 3rem;
  }
}

/* タブレット2以下 */
@media screen and (max-width: 800px) {
  #schedule>ul>li ul li {
    font-size: .8rem !important;
  }
}


/* タブレット2以上 */
@media screen and (min-width: 801px) {}

@media screen and (max-width: 900px) {
  #schedule>ul>li ul li {
    font-size: .9rem;
  }
}

/* ipad */
@media screen and (min-width: 801px) and (max-width: 1024px) {
}

/* ipad以下 */
@media screen and (max-width: 1024px) {
  .size {
    padding-left: .8rem;
    padding-right: .8rem;
    width: 100%;
  }

  .sp_main-img {
    margin-top: 3.5rem;
    position: relative;
  }

  .sp_main-img h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.3rem;
    white-space: nowrap;
  }
}

/* PC */
@media screen and (min-width: 1025px) {
  .size {
    width: 1000px;
  }
}


@media screen and (min-width: 1000px) {
  .sp_main-img {
    display: none !important;
  }
}