/**
 * File: main.css
 * Usage: トップページのスタイルを定義します。
*/

/* front-page(言語選択画面) */
.bl_fv {
  position: relative;
}

.el_fvText {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  width: max-content;
  max-width: 90%;
  font-family: 'ShipporiMinchoB1', sans-serif;
  font-weight: 500;
  line-height: 1.8;
}

.el_fvText h1 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

.el_fvText h1.ja_only {
  line-height: 1.8;
}

.el_fvText p {
  font-size: 13px;
  margin-top: 20px;
}

.el_fvText p.ja_only {
  margin-top: 4px;
}

/* ================================================  
  intro
================================================ */
.bl_intro {
  position: relative;
  padding-block: 75px 40px;
}

.el_intro_bg {
  position: absolute;
  top: -50px;
  left: 0;
  width: 65%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
}

.bl_intro .el_as_square {
  position: absolute;
  top: 17px;
  left: 32px;
  width: 40px;
  height: 40px;
}

.bl_intro .el_as_circle {
  position: absolute;
  top: 21px;
  right: 16px;
  width: 70px;
  height: 33px;
}

.bl_intro_txt h2 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
  font-family: 'ShipporiMinchoB1', sans-serif;
  font-weight: 700;
  color: #42602d;
}

.bl_intro_txt p {
  margin-top: 40px;
  letter-spacing: 0.03em;
  font-weight: 500;
}

.bl_intro_img {
  margin-top: 40px;
  margin-inline: 16px;
}

/* ================================================  
Concept 
================================================ */

.bl_concept {
  position: relative;
  padding-bottom: 40px;
}

.bl_concept .el_as_square {
  position: absolute;
  top: 1%;
  left: 5%;
  width: 100%;
  max-width: 43px;
}

.bl_concept .el_concept_bg_wave {
  position: absolute;
  bottom: -2%;
  right: 2%;
  width: 100%;
  max-width: 77px;
  z-index: 1;
}

.bl_concept_img {
  margin-top: 32px;
}

.bl_concept_txt {
  max-width: calc(100% - 48px);
  margin-inline: auto;
  background: url('../img/top/concept_txt_bg.webp') lightgray 50% / cover no-repeat;
  margin-top: -60px;
  padding: 24px 16px 32px;
  position: relative;
}

.bl_concept_txt h3 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: 'ShipporiMinchoB1', sans-serif;
  font-weight: 700;
  color: #42602d;
}

.bl_concept_txt p {
  font-size: 14px;
  margin-top: 24px;
  letter-spacing: 0.03em;
  line-height: 180%;
}

.bl_concept_btns {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.el_concept_btn.el_concept_btn_reserve {
  background: #b58e1f;
  border: 1px solid #b58e1f;
  color: #fff;
}

/* ================================================  
studio 
================================================ */
.bl_studio {
  position: relative;
  padding: 40px 24px 0px;
}

.bl_studio_inner_green {
  background: #42602d;
  padding: 12px;
}

.bl_studio_inner {
  border: 1px solid #42602d;
  padding: 16px;
}

.bl_studio_txt h2 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
  font-family: 'ShipporiMinchoB1', sans-serif;
  font-weight: 700;
  color: #42602d;
  border-bottom: 1px dashed #42602d;
}

.bl_studio_txt p {
  margin-top: 12px;
}

.bl_studio_inner .el_btn {
  margin-top: 32px;
  margin-left: 0;
}

.bl_studio_img {
  margin-top: 40px;
}

/* ================================================  
Instagram 
================================================ */

.bl_instagram {
  position: relative;
  padding: 40px 24px 72px;
}

.bl_instagram .el_as_circle {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 80px;
  height: 38px;
}

.bl_instagram .el_as_square {
  position: absolute;
  top: 70px;
  right: 16px;
  width: 40px;
  height: 40px;
}

.bl_instagram_txt p {
  margin-top: 24px;
}

.bl_instagram_cont {
  margin-top: 16px;
	max-width: 1200px;
	padding-inline: 20px;
	margin-inline: auto;
}

.bl_instagram_txt .el_btn {
  margin-top: 16px;
}

/* ================================================  
Access 
================================================ */
.bl_access {
  background: rgba(219, 211, 188, 0.5);
  padding: 0 24px 40px;
  position: relative;
  letter-spacing: 0.03em;
  margin-bottom: 33px;
}

.bl_access p {
  margin-top: 32px;
}

.bl_access .el_btn {
  margin-top: 16px;
}

.bl_access_map {
  margin-top: 16px;
}

.bl_access_map iframe {
  width: 100%;
  height: 220px;
}

.bl_access .el_as_wave {
  position: absolute;
  top: -36px;
  right: 26px;
  width: 110px;
}
.bl_access .el_as_square {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 40px;
}

.bl_access .el_as_ougi {
  position: absolute;
  bottom: 10px;
  right: 6px;
  width: 40px;
}

.el_intro_top_pc {
  display: none;
}

/* ================================================  
responsive 
================================================ */

@media screen and (min-width: 960px) {
  .ly_cont {
    max-width: 1160px;
  }
  .el_fvText {
    text-align: left;
    top: 65%;
  }
  .el_fvText h1 {
    font-size: 56px;
    max-width: 800px;
  }

  .el_fvText p {
    font-size: 24px !important;
  }

  .el_fvText h1 .el_fvText p {
    font-size: 24px;
  }
  .ly_cont {
    max-width: 1160px;
  }

  .bl_intro {
    margin-bottom: 420px;
  }

  .bl_intro_txt {
    width: 47%;
    margin-top: 40px;
  }

  .bl_intro_txt h2 {
    font-size: 32px;
  }

  .bl_intro_txt p {
    font-size: 16px;
    margin-top: 64px;
  }

  .bl_intro_img {
    position: absolute;
    top: -10%;
    left: 42%;
    width: 50%;
    max-width: 720px;
  }

  .el_secTtl {
    font-size: 32px;
  }

  .el_secTtl img {
    width: 48px;
    height: 29px;
  }

  .bl_concept_txt {
    max-width: 893px;
    margin-top: -157px;
    padding: 40px;
  }

  .bl_concept_txt h3 {
    font-size: 24px;
    margin: 0;
  }

  /* ================================================  
  Concept
  ================================================ */

  .bl_concept {
    padding-bottom: 100px;
  }

  .bl_concept_img {
    max-width: 1160px;
    padding-inline: 20px;
    margin-inline: auto;
  }

  .bl_concept_txt p {
    font-size: 16px;
  }

  .bl_concept_btns {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }

  .bl_concept_btns .el_btn {
    margin: 0;
  }

  .bl_studio_inner {
    display: flex;
    gap: 40px;
  }

  .bl_studio_inner .el_btn {
    margin-top: 0;
  }

  .bl_studio {
    max-width: 1160px;
    margin-inline: auto;
  }

  .bl_studio_inner {
    padding: 40px;
  }

  .bl_studio_txt h2 {
    font-size: 24px;
  }

  .bl_studio_img {
    margin-top: 0;
  }

  .bl_studio_img img {
    aspect-ratio: 16/11;
    object-fit: cover;
  }

  .bl_studio_txt p {
    font-size: 16px;
  }

  .bl_studio_txt .el_btn {
    margin-top: 48px;
  }

  .bl_instagram {
    padding: 120px 0;
  }

  .bl_instagram_txt p {
    text-align: center;
    font-size: 16px;
  }

  .bl_instagram_cont {
    margin-top: 32px;
  }

  .bl_instagram_txt .el_btn {
    margin-top: 32px;
  }

  .bl_access {
    margin-bottom: 65px;
    padding: 73px 0 77px;
  }

  .bl_access_inner {
    max-width: 1160px;
    padding-inline: 20px;
    margin-inline: auto;
    font-size: 38px;
  }

  .bl_access_cont {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .bl_access_cont .el_btn {
    margin: 0;
  }

  .bl_access_map {
    margin-top: 32px;
  }

  .bl_access_map iframe {
    height: 480px;
  }

  .bl_guide {
    max-width: 1160px;
    padding-inline: 20px;
    margin-inline: auto;
    padding-bottom: 40px;
  }

  /* あしらい */
  .el_intro_top_pc {
    position: absolute;
    bottom: -27%;
    left: 5%;
    width: 100%;
    max-width: 272px;
    z-index: 1;
  }

  .el_intro_bg {
    width: 41%;
    height: 110%;
    overflow: hidden;
  }

  .bl_intro .el_as_square {
    left: 69px;
    width: 70px;
    height: 70px;
  }

  .bl_intro .el_as_circle {
    display: none;
  }

  .el_intro_top_pc {
    display: block;
  }

  .bl_concept .el_as_square {
    max-width: 122px;
  }

  .bl_access .el_as_square {
    width: 84px;
    top: 13%;
    left: 8%;
  }

  /* ================================================  
  Concept
  ================================================ */

  .bl_concept .el_concept_bg_wave {
    bottom: 0%;
    right: 4%;
    max-width: 165px;
  }

  /* ================================================  
  Instagram
  ================================================ */

  .bl_instagram .el_as_circle {
    top: 50px;
    left: 100px;
    width: 230px;
    height: 109px;
  }

  .bl_instagram .el_as_square {
    top: 200px;
    right: 96px;
    width: 73px;
    height: 73px;
  }

  .bl_instagram_txt p {
    margin-top: 48px;
  }

  .bl_access .el_as_wave {
    width: 187px;
    top: -56px;
    right: 170px;
  }

  .bl_access p {
    margin-top: 48px;
  }
}

/* ================================================  
ACF Google Map
================================================ */

.bl_shop_map {
  margin-top: 24px;
}

.acf-map {
  width: 100%;
  height: 260px;
  overflow: hidden;
}

/* Markers */
.acf-map img {
  max-width: inherit !important;
}

@media screen and (min-width: 768px) {
  .acf-map {
    height: 480px;
  }
}