@charset "UTF-8";
@import url(./base-style.css);

/* ------------------------------
レイアウト
------------------------------ */
/* main */
.sec_block {
  padding: 30px 5px;
}

/* ------------------------------
スライド画像
------------------------------ */
#bg_img {
  position: fixed;
  width: 100%;
  height: 100vh;
  z-index: -1;
  opacity: 0.8;
}

/* ------------------------------
各セクションの背景色と中のパーツの色
------------------------------ */
.bgcolor_2 {
  background-color: var(--bgcolor_2);
  color: var(--textcolor_2);
}
.bgcolor_2 .button_link > span > a {
  color: var(--textcolor_2);
  background-color: var(--btncolor_2);
}
.bgcolor_1 {
  background-color: var(--bgcolor_1);
  color: var(--textcolor_1);
}
.bgcolor_1 .button_link > span > a {
  color: var(--textcolor_2);
  background-color: var(--btncolor_1);
}

/* ------------------------------
section_h2
------------------------------ */
.section_h2 {
  padding: 0 30px;
}
/* h2 */
h2 {
  margin-bottom: 30px;
}

/* ------------------------------
キャッチコピー
------------------------------ */
.catch_copy {
  text-align: center;
  color: #fff;
  height: 95vh;
  overflow: hidden;
  padding-top: 180px;
}
/* 英語 */
.catch_copy .english {
  font-family: 'Sassy_Frass';
  font-size: 50px;
  font-style: italic;
  letter-spacing: 50px;
  margin-bottom: 30px;
  transform: translate(100px, 30px) rotate(-30deg);
  transition: 2s;
  opacity: 0;
}
.catch_copy .english.active {
  letter-spacing: 5px;
  transform: rotate(-5deg);
  opacity: 1;
}
/* 日本語 */
.catch_copy .japanese {
  font-family: serif;
  font-size: 16px;
}
.catch_copy .japanese span {
  display: inline-block;
  font-size: 150%;
  margin: 0 10px;
  transition: 3s;
  opacity: 0;
}
.catch_copy .japanese.active span {
  opacity: 1;
}
/* 「カワイイ」の横線のスタイル */
.catch_copy .japanese span::before,
.catch_copy .japanese span::after {
  bottom: 20px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  background-color: #fff;
  margin-bottom: 10px;
}
.catch_copy .japanese span::before {
  margin-right: 10px;
}
.catch_copy .japanese span::after {
  margin-left: 10px;
}


/* ------------------------------
画面サイズに応じたキャッチコピーの文字サイズ
------------------------------ */
@media screen and (min-width: 651px) and (max-width: 900px) {
   .catch_copy .english {
    font-size: 100px;
   }
   .catch_copy .japanese {
    font-size: 20px;
  }
}
@media screen and (min-width: 901px) {
   .catch_copy .english {
    font-size: 150px;
   }
   .catch_copy .japanese {
    font-size: 25px;
  }
  .catch_copy .japanese span {
    font-size: 170%;
  }
}

/* ------------------------------
コンセプト
------------------------------ */
#concept > .set_bgimage {
  background-image: url(../images/concept_bg02.jpg);
}
.concept {
  color: var(--textcolor_2);
  background-color: #000;
  opacity: 0.8;
}

/* ------------------------------
カタログ
------------------------------ */
.catalog_contents {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.catalog_contents > li {
  position: relative;
  width: 33%;
  min-width: 180px;
  height: 300px;
  margin-bottom: 5px;
}
.catalog_contents > li:nth-of-type(1) {
  background-image: url(../images/catalog_1.jpg);
}
.catalog_contents > li:nth-of-type(2) {
  background-image: url(../images/catalog_2.jpg);
}
.catalog_contents > li:nth-of-type(3) {
  background-image: url(../images/catalog_3.jpg);
}
.catalog_contents > li > span {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: #fff;
  padding: 10px;
  opacity: 0.9;
}


/* ------------------------------
メニュー
------------------------------ */
/* セクション */
#salon_menu .menu {
  margin-bottom: 100px;
}
#salon_menu .menu:last-child {
  margin-bottom: 30px;
}
/* メニュー欄 */
#salon_menu .item_container {
  border-bottom: solid 1px #888;
}
#salon_menu .menu_item {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  opacity: 0;
  transform: translateY(100%);
}
#salon_menu .menu_item.active {
  animation: set_text 1s ease-in-out forwards;
}
@keyframes set_text {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#salon_menu .menu_item dt {
  flex: 1;
}
#salon_menu .menu_item dd {
  flex: 0 0 30%;
  min-width: 5em;
  text-align: right;
}
#salon_menu .menu_item dd > span::before {
  content: "￥";
}

/* ------------------------------
営業時間
------------------------------ */
#business_hours .google_map iframe {
  width: 100%;
  height: 500px;
}
/* googleマップ */
#business_hours iframe {
  filter: grayscale(100%);
}

/* ------------------------------
ボタンリンク
------------------------------ */
.button_link {
  padding: 20px 0;
}
.button_link > span {
  display: inline-block;
  width: 200px;
}
.button_link > span > a {
  text-align: center;
  padding: 10px 0;
  transition: 0.5s;
}

/* ------------------------------
画面幅 850px以下
------------------------------ */
@media screen and (max-width: 850px) {

  /* ニュース・営業時間 */
  .news,
  .business_hours {
    padding: 0;   /* 上書き */
  }
}

/* ------------------------------
画面幅 851px以上
------------------------------ */
@media screen and (min-width: 851px) {
  /* ------------------------------
  レイアウト
  ------------------------------ */
  /* 大画面ではメニューが出現するのでその分余白を左に作る */
  .section_h2,
  .catch_copy {
    margin-left: calc(5% + 200px);
  }
  .section_h3 {
    margin-left: 10px;    /* 上書き */
  }
  /* ------------------------------
  キャッチコピー
  ------------------------------ */
  .catch_copy{
    height: 98vh;
  }
  /* ------------------------------
  コンセプト
  ------------------------------ */
  .concept {
    padding-left: 100px; padding-right: 100px;    /* paddingの上書き */
  }
  /* ------------------------------
  営業時間
  ------------------------------ */
  #business_hours .business_hours {
    display: flex;
  }
  #business_hours .google_map {
    flex: 1;
  }
  #business_hours .hours_content {
    flex: 0 0 50%;
  }
  /* ------------------------------
  ボタンリンクのアニメーション
  ------------------------------ */
  .button_link > span > a {
    opacity: 1;
  }
  .button_link > span > a:hover {
    opacity: 0.6;
  }

}

/* ------------------------------
画面幅1001px以下
------------------------------ */
@media screen and (max-width: 1000px) {

  /* 画像設定 */
  .set_bgimage {
    height: auto;   /* 上書き */
  }

  /* カタログ */
  #catalog .section_h2 {
    padding: 0;   /* 上書き */
  }
  .catalog_contents li {
    width: 48%;
  }
}

/* ------------------------------
画面幅 1001px以上
------------------------------ */
@media screen and (min-width: 1001px) {
  /* ------------------------------
  コンセプト
  ------------------------------ */
  .concept {
    padding-left: calc(100px + 5%); padding-right: calc(100px + 5%);    /* paddingの上書き */
  }
  /* ------------------------------
  メニュー
  ------------------------------ */
  #salon_menu .menu_block {
    display: flex;
    justify-content: space-between;
  }
  #salon_menu .menu_block .menu {
    width: 30%;
    margin-bottom: 30px;
  }
}