@charset "UTF-8";

:root {
  /* 色管理用の変数 */
  --black-color: #1b1b1b;
  --white-color: #fff;
  --gray-color: #515151;
  --menu-divider-line-color: #ababab;
}

:root {
  /* コンテンツ幅管理用の変数 */
  --content-width: 784px;
}

:root {
  /* z-index管理用の変数 */
  --z-index-back: -1;
  --z-index-default: 1;
  --z-index-header: 100;
  --z-index-menu: 150;
  --z-index-opening: 999;
}

/* ---------- base ---------- */

html {
  scroll-behavior: smooth;
}

body {
  color: var(--black-color);
  font-size: 16px;
  font-family: "Nunito Sans", "Zen Kaku Gothic New", sans-serif;
  line-height: normal;
  letter-spacing: 0.04em;
}

body.__sample-02 {
  color: var(--black-color);
  font-size: 16px;
  font-family: "Crimson Text", "Shippori Mincho", sans-serif;
  line-height: normal;
  letter-spacing: 0.04em;
}

body.__bakery {
  color: var(--black-color);
  font-size: 16px;
  font-family: "Nunito Sans", "Zen Maru Gothic", sans-serif;
  line-height: normal;
  letter-spacing: 0.04em;
}

body.is-active {
  overflow: hidden;
}

/* ---------- layout ---------- */

.l_container {
  max-width: var(--content-width);
  margin: 0 auto;
}

@media screen and (max-width: 450px) {
  .l_container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

.l_header {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-index-header);
  padding: 0 16px;
  justify-content: space-between;
  transition: transform 0.3s 0.3s;
}

.l_header.__salon {
  color: var(--white-color);
}

.l_header.__office {
  color: var(--black-color);
}

@media screen and (max-width: 450px) {
  .__bakery .l_header {
    height: 45px;
  }
}

.l_header.default-color {
  background-color: transparent !important;
}

.l_header.hidden {
  transform: translateY(-60px);
}

@media screen and (max-width: 450px) {
  .l_header {
    justify-content: center;
  }
}

@media screen and (max-width: 450px) {
  .l_header {
    justify-content: flex-start;
  }
}

.l_header-nav {
  display: flex;
  align-items: center;
  width: 100%;
}

@media screen and (max-width: 450px) {
  .l_header-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-index-header);
    background-color: var(--white-color);
    flex-direction: column;
    justify-content: center;
    gap: 32px;
  }
}

@media screen and (max-width: 450px) {
  .l_header-nav.__salon {
    background-color: #ac8b8b;
  }
}

.l_header-logo_link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  position: relative;
}

.l_header-logo_text {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.05em;
}

.l_header-logo_text.__sample-02 {
  width: 300px;
  font-weight: 600;
}

@media screen and (max-width: 450px) {
  .l_header-logo_text {
    font-size: 20px;
  }
}

.l_header-nav_list {
  display: flex;
  gap: 0 32px;
  font-weight: 500;
  margin-left: auto;
}

@media screen and (max-width: 450px) {
  .l_header-nav.__salon .l_header-nav_list {
    background-color: #ac8b8b;
  }
}

@media screen and (max-width: 450px) {
  .l_header-nav_list {
    background-color: var(--white-color);
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 32px 0;
    width: 100vw;
  }
}

.l_header-nav_item {
  display: flex;
  gap: 48px;
}

.l_header-nav_link {
  letter-spacing: 0.05em;
  transition: 0.2s;
}

.l_header-nav_link:hover {
  opacity: 0.6;
}

.l_header-nav_link_text_en {
  font-size: 10px;
  text-align: center;
}

.l_header-nav_link_text_en.__sample-02,
.l_header-nav_link_text.__sample-02 {
  font-weight: 500;
}

.l_header-nav_link_text_en.__sample-02 {
  font-size: 14px;
  font-weight: 600;
}

.l_header-nav_link_text {
  font-size: 16px;
  text-align: center;
}

.l_header-sns-icons {
  display: flex;
  gap: 16px;
  margin-left: auto;
}

@media screen and (max-width: 450px) {
  .l_header-sns-icons {
    background-color: var(--white-color);
    align-items: center;
    justify-content: center;
    gap: 0 16px;
    width: 100vw;
  }
}

@media screen and (max-width: 450px) {
  .l_header-nav.__salon .l_header-sns-icons {
    background-color: #ac8b8b;
  }
}

.l_header-sns-icon_link {
  transition: 0.2s;
}

.l_header-sns-icon_link:hover {
  opacity: 0.6;
}

.l_header-sns-icon_img_wrapper {
  width: 24px;
}

.l_header-sns-icon_img.__white {
  filter: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(2%)
    hue-rotate(18deg) brightness(112%) contrast(100%);
}

.l_section {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media screen and (max-width: 450px) {
  .l_section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

.l_footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
}

.l_footer.__salon {
  color: var(--menu-divider-line-color);
}

@media screen and (max-width: 450px) {
  .l_footer {
    padding: 8px;
  }
}

/* ---------- module ---------- */

.m_hamburger {
  display: none;
}

@media screen and (max-width: 450px) {
  .m_hamburger {
    display: block;
    width: 20px;
    height: 16px;
    position: absolute;
    z-index: var(--z-index-menu);
    right: 16px;
  }
}

.m_hamburger-bar {
  width: 100%;
  height: 2px;
  position: absolute;
  background: var(--black-color);
  left: 50%;
  transition: 0.2s;
  border-radius: 4px;
}

.m_hamburger-bar.__white {
  background: var(--white-color);
}

.m_hamburger-bar:first-child {
  top: 0;
  transform: translate(-50%, 0);
}

.m_hamburger-bar:nth-child(2) {
  top: 50%;
  transform: translate(-50%, -50%);
}

.m_hamburger-bar:last-child {
  top: 100%;
  transform: translate(-50%, -100%);
}

.m_title_wrapper {
  font-weight: 500;
  text-align: center;
}

.m_title_wrapper.__sample-02,
.m_title_wrapper.__salon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.m_title_wrapper.__sample-02::after {
  content: "";
  height: 20px;
  width: 1px;
  display: block;
  background-color: var(--black-color);
  margin-top: 32px;
}

@media screen and (max-width: 450px) {
  .m_title_wrapper.__sample-02::after {
    height: 15px;
    margin-top: 20px;
  }
}

.m_title_en {
  letter-spacing: 0.05em;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media screen and (max-width: 450px) {
  .m_title_en {
    font-size: 14px;
    gap: 4px;
  }
}

.m_title_en::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background-color: var(--black-color);
}

@media screen and (max-width: 450px) {
  .m_title_en::after {
    width: 26px;
  }
}

.m_sample-02_title_en,
.m_salon_title_en {
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 32px;
}

@media screen and (max-width: 450px) {
  .m_sample-02_title_en,
  .m_salon_title_en {
    font-size: 24px;
  }
}

.m_title {
  font-size: 24px;
  letter-spacing: 0.16em;
  margin-top: 16px;
}

@media screen and (max-width: 450px) {
  .m_title {
    font-size: 20px;
    margin-top: 12px;
  }
}

.m_sample-02_title,
.m_salon_title {
  margin-top: 4px;
  letter-spacing: 0.07em;
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .m_sample-02_title,
  .m_salon_title {
    margin-top: 2px;
    font-size: 12px;
  }
}

/* shopsite_kv */
.shopsite_kv {
  max-height: 650px;
}

.shopsite_kv_img {
  height: 650px;
  object-fit: cover;
}

@media screen and (max-width: 450px) {
  .shopsite_kv_img {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

/* shopsite_about */
.shopsite_main-copy {
  font-weight: 500;
  font-size: 28px;
  text-align: center;
  margin-top: 48px;
}

@media screen and (max-width: 450px) {
  .shopsite_main-copy {
    margin-top: 24px;
    font-size: 16px;
  }
}

.shopsite_sub-copy {
  font-size: 20px;
  margin-top: 32px;
  line-height: 1.8;
}

@media screen and (max-width: 450px) {
  .shopsite_sub-copy {
    margin-top: 20px;
    font-size: 14px;
  }
}

/* shopsite_menu */
.shopsite_menu {
  font-size: 16px;
}

.shopsite_menu_list {
  max-width: 1050px;
  margin: 48px auto 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

@media screen and (max-width: 900px) {
  .shopsite_menu_list {
    padding: 0 32px;
    gap: 60px 26px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_menu_list {
    gap: 26px 26px;
  }
}

.shopsite_menu_list_item {
  max-width: calc((100% - 90px) / 4);
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 900px) {
  .shopsite_menu_list_item {
    max-width: calc((100% - 26px) / 2);
  }
}

.shopsite_menu_list_item_title {
  font-size: 20px;
  color: #96b262;
  text-align: center;
  background-color: var(--white-color);
  border-radius: 25px;
  border: 1px solid #96b262;
  padding: 4px 0;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .shopsite_menu_list_item_title,
  .shopsite_menu_list_item_desc {
    font-size: 14px;
  }
}

.shopsite_menu_list_item_img_wrapper {
  max-width: 240px;
  height: auto;
  margin-top: 16px;
}

@media screen and (max-width: 900px) {
  .shopsite_menu_list_item_img_wrapper {
    max-width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_menu_list_item_img_wrapper {
    margin-top: 12px;
  }
}

.shopsite_menu_list_item_desc {
  margin-top: 12px;
}

@media screen and (max-width: 450px) {
  .shopsite_menu_list_item_desc {
    margin-top: 8px;
  }
}

.shopsite_menu_list_item_img {
  border-radius: 4px;
}

/* shopsite_sample */
.shopsite_sample {
  margin: 80px auto 0;
  max-width: 1070px;
  border-radius: 20px;
}

@media screen and (max-width: 1080px) {
  .shopsite_sample {
    margin: 80px 24px 0;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample {
    margin: 0px;
    border-radius: 0px;
  }
}

.shopsite_sample_list {
  margin-top: calc(48px + 25px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 46px;
  gap: 24px;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list {
    padding: 0 16px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list {
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }
}

.shopsite_sample_list_item {
  max-width: calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white-color);
  border-radius: 20px;
  position: relative;
  padding: 40px 16px;
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list_item {
    flex-direction: row;
    max-width: 100%;
    padding: 24px 18px;
    align-items: center;
  }
}

.shopsite_sample_list_numbering {
  position: absolute;
  top: -25px;
  font-size: 24px;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New";
  background-color: #afcb7a;
  color: var(--white-color);
  letter-spacing: 0.16em;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 6px 11px;
  border-radius: 100vw;
}

.shopsite_sample_list_item:first-of-type .shopsite_sample_list_numbering {
  padding: 6px 12px;
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list_numbering {
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 4px 8px;
    left: -5px;
    top: -20px;
  }
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list_item:first-of-type .shopsite_sample_list_numbering {
    padding: 4px 9px;
  }
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list_item_text_wrapper {
    order: 1;
    width: 100%;
    margin-left: 18px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_text_wrapper {
    margin-left: 12px;
  }
}

.shopsite_sample_list_item_title {
  font-size: 20px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.13em;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}

.shopsite_sample_list_item_title::after {
  content: "";
  width: 70%;
  background-color: #afcb7a;
  height: 1px;
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_title,
  .shopsite_sample_list_item_desc {
    font-size: 14px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_title {
    text-align: left;
    gap: 8px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_title::after {
    width: 100%;
  }
}

.shopsite_sample_list_item_desc {
  margin: 16px 0;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_desc {
    margin-top: 8px;
  }
}

.shopsite_sample_list_item_img_wrapper {
  max-width: 220px;
  height: auto;
  margin-top: 16px;
}

@media screen and (max-width: 900px) {
  .shopsite_sample_list_item_img_wrapper {
    max-width: 200px;
    order: 0;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_sample_list_item_img_wrapper {
    max-width: 120px;
    order: 0;
  }
}

/* shopsite_shop */

@media screen and (max-width: 450px) {
  .shopsite_shop {
    padding-bottom: 20px;
  }
}

.shopsite_shop_container {
  margin-top: 48px;
  display: flex;
  flex-direction: row;
  gap: 48px;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .shopsite_shop_container {
    flex-direction: column;
    gap: 20px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_shop_container {
    margin-top: 24px;
  }
}

.shopsite_shop_img_wrapper {
  max-width: 660px;
  height: auto;
  flex-shrink: 0;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_img_wrapper {
    max-width: 340.5px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }
}

.shopsite_shop_desc_address {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc_address {
    gap: 4px 0;
  }
}

.shopsite_shop_desc_title,
.shopsite_shop_desc_contact_title {
  font-weight: 500;
}

.shopsite_shop_desc_opening-hours_detail,
.shopsite_shop_desc_contact_title {
  display: flex;
  flex-flow: row;
  gap: 12px;
  align-items: center;
}

.shopsite_shop_desc_title + .shopsite_shop_desc_opening-hours_detail {
  margin-top: 12px;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc_title + .shopsite_shop_desc_opening-hours_detail {
    margin-top: 4px;
  }
}

.shopsite_shop_desc_opening-hours_detail
  + .shopsite_shop_desc_opening-hours_detail {
  margin-top: 8px;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc_opening-hours_detail
    + .shopsite_shop_desc_opening-hours_detail {
    margin-top: 4px;
  }
}

.shopsite_shop_desc_contact {
  margin-top: 24px;
  display: flex;
  flex-flow: row;
  gap: 12px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc_contact {
    margin-top: 30px;
  }
}

.shopsite_shop_desc_contact + .shopsite_shop_desc_contact {
  margin-top: 24px;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_desc_contact + .shopsite_shop_desc_contact {
    margin-top: 30px;
  }
}

.shopsite_shop_desc_contact_line {
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--black-color);
}

.shopsite_shop_map_wrapper {
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.shopsite_shop_map {
  width: 1215px;
  height: 535px;
}

@media screen and (max-width: 450px) {
  .shopsite_shop_map {
    width: 100%;
    height: 256px;
  }
}

/* shopsite_contact */
.shopsite_contact {
  margin-top: 80px;
  padding: 80px 0;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .shopsite_contact {
    padding: 80px 16px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_contact {
    margin-top: 20px;
    padding: 24px 0px;
  }
}

.shopsite_contact_link {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  background-color: rgba(255, 255, 255);
  width: 600px;
  padding: 28px 0;
  font-size: 20px;
  gap: 4px;
  letter-spacing: 0.05em;
  transition: 0.2s;
}

@media screen and (max-width: 1280px) {
  .shopsite_contact_link {
    max-width: 600px;
    width: 100%;
    padding: 20px 0;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_contact_link {
    max-width: 320px;
    width: 100%;
    font-size: 16px;
  }
}

.shopsite_contact_link:hover {
  opacity: 0.6;
}

.shopsite-store-sample02_contact_link_text {
  font-weight: 500;
}

/*---------- shopsite-store-02 kv ----------*/
.shopsite-store-02_kv {
  max-height: 650px;
  display: grid;
}

@media screen and (max-width: 450px) {
  .shopsite-store-02_kv {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.shopsite-store-02_kv_img {
  height: 650px;
  object-fit: cover;
  grid-area: 1/-1;
  min-height: 0;
}

@media screen and (max-width: 450px) {
  .shopsite-store-02_kv_img {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.shopsite-store-02_kv_text_wrapper {
  grid-area: 1/-1;
  z-index: 1;
  margin: auto 0px auto 24px;
  font-size: 28px;
  letter-spacing: 0.05em;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .shopsite-store-02_kv_text_wrapper {
    margin: auto 0px auto 12px;
    font-size: 20px;
  }
}

.shopsite-store-02_kv_text_en {
  font-size: 15px;
  margin-top: 4px;
}

/* shopsite-store-sample02_about */

@media screen and (max-width: 450px) {
  .shopsite-store-02_about.l_container.l_section {
    padding-bottom: 0px;
  }
}

.shopsite_main-copy.__sample-02 {
  margin-top: 32px;
  letter-spacing: 0.08em;
}

@media screen and (max-width: 450px) {
  .shopsite_main-copy.__sample-02 {
    margin-top: 20px;
    letter-spacing: 0.04em;
    font-size: 16px;
  }
}

.shopsite_sub-copy.__sample-02 {
  letter-spacing: 0.08em;
}

@media screen and (max-width: 450px) {
  .shopsite_sub-copy.__sample-02 {
    letter-spacing: 0.04em;
    font-size: 15px;
  }
}

.shopsite-store-02_about_img_wrapper {
  margin: 48px auto 0;
  max-width: 690px;
  max-height: 230px;
}

@media screen and (max-width: 450px) {
  .shopsite-store-02_about_img_wrapper {
    margin: 32px calc(50% - 50vw) 0;
  }
}

.shopsite-store-02_about_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* shopsite-store-sample02_products */

.shopsite_store-sample02_products_list {
  margin: 32px auto 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 54px 40px;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .shopsite_store-sample02_products_list {
    padding: 0 16px;
    gap: 32px 30px;
  }
}

.shopsite_store-sample02_products_list_item {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: calc((100% - 80px) / 3);
}

@media screen and (max-width: 900px) {
  .shopsite_store-sample02_products_list_item {
    width: calc((100% - 60px) / 2);
    gap: 4px;
  }
}

.shopsite_store-sample02_products_list_item_desc {
  letter-spacing: 0.08em;
  font-weight: 500;
  font-size: 18px;
}

@media screen and (max-width: 450px) {
  .shopsite_store-sample02_products_list_item_desc {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

.shopsite_store-sample02_products_list_item_desc.__price {
  color: var(--gray-color);
}

.shopsite-sp_menu_item_images {
  display: flex;
  gap: 8px;
  width: 100%;
}

.shopsite-sp_menu_item_image_wrapper {
  max-width: calc((100% - 16px) / 3);
}

.shopsite-sp_menu_item_image {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}

/*---------- flowers ----------*/
/* flowers_values */
.flowers_values_bg {
  max-height: 650px;
  display: grid;
}

@media screen and (max-width: 450px) {
  .flowers_values_bg {
    aspect-ratio: 1 / 1;
    height: auto;
    margin-top: 40px;
  }
}

.flowers_values_bg_img {
  height: 650px;
  object-fit: cover;
  grid-area: 1/-1;
  min-height: 0;
}

@media screen and (max-width: 450px) {
  .flowers_values_bg_img {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.flowers_values_text_wrapper {
  grid-area: 1/-1;
  z-index: 1;
  margin: auto 0px auto 80px;
  font-weight: 500;
  color: var(--white-color);
}

@media screen and (max-width: 780px) {
  .flowers_values_text_wrapper {
    margin: auto 0px auto 24px;
  }
}

@media screen and (max-width: 450px) {
  .flowers_values_text_wrapper {
    margin: auto 0px auto 24px;
    font-size: 20px;
  }
}

.flowers_values_text_title_wrapper {
  font-size: 32px;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .flowers_values_text_title_wrapper {
    font-size: 24px;
    gap: 8px;
  }
}

.flowers_values_text_title_wrapper::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background-color: var(--white-color);
  top: 0;
  bottom: 0;
  margin-top: 20px;
}

@media screen and (max-width: 450px) {
  .flowers_values_text_title_wrapper::after {
    width: 50px;
    margin-top: 12px;
  }
}

.flowers_values_text_title_en {
  letter-spacing: 0.12em;
}

.flowers_values_text_title_ja {
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

@media screen and (max-width: 450px) {
  .flowers_values_text_title_ja {
    font-size: 12px;
    margin-top: 2px;
  }
}

.flowers_values_text_desc {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.8;
  font-weight: 400;
}

@media screen and (max-width: 450px) {
  .flowers_values_text_desc {
    font-size: 14px;
  }
}

/* flowers_line-up */
.flowers_line-up_list {
  margin: 40px auto 0;
  display: flex;
  max-width: calc(798px + 32px);
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 24px;
  justify-content: center;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_list {
    gap: 12px;
  }
}

.flowers_line-up_list_item {
  width: calc((100% - 48px) / 3);
  position: relative;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_list_item {
    width: calc((100% - 24px) / 3);
  }
}

.flowers_line-up_list_item_link {
  transition: 0.2s;
}

.flowers_line-up_list_item_link:hover {
  opacity: 0.8;
}

.flowers_line-up_list_item_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-color);
  font-size: 24px;
  width: 100%;
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_list_item_title {
    font-size: 16px;
  }
}

.flowers_line-up_button_wrapper {
  margin-top: 40px;
}

.flowers_line-up_button {
  letter-spacing: 0.1em;
  color: var(--black-color);
  font-weight: 400;
  border: 1px solid var(--black-color);
  display: flex;
  position: relative;
  box-sizing: border-box;
  max-width: 400px;
  text-align: center;
  padding: 16px 32px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_button {
    max-width: 320px;
  }
}

.flowers_line-up_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 1px;
  background: var(--black-color);
  transition: all 0.3s ease;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_button::after {
    width: 40px;
    right: -15px;
  }
}

.flowers_line-up_button:hover::after {
  animation: OutIn-Line 700ms;
  transition: all 0.3s;
}

.flowers_line-up_button_icon {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 450px) {
  .flowers_line-up_button_icon {
    width: 24px;
    height: 24px;
  }
}

/* flowers_banner */
.flowers_banner_wrapper {
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  max-height: 350px;
  transition: 0.2s;
  aspect-ratio: 27500 / 7873;
}

@media screen and (max-width: 450px) {
  .flowers_banner_wrapper {
    margin-top: 20px;
  }
}

.flowers_banner_wrapper:hover {
  opacity: 0.8;
}

@media screen and (max-width: 450px) {
  .flowers_banner_wrapper {
    height: 180px;
  }
}

.flowers_banner_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 450px) {
  .flowers_banner_img {
    object-fit: cover;
  }
}

/* flowers_access */
.flowers_access {
  padding-bottom: 0px !important;
}

@media screen and (max-width: 450px) {
  .flowers_access {
    padding-top: 0px;
  }
}

@media screen and (max-width: 450px) {
  .flowers_shopsite_access_container {
    flex-flow: wrap-reverse !important;
    margin-top: 0;
  }
}

/*---------- salon ----------*/
/* salon_kv */
.salon_kv {
  max-height: 650px;
  display: grid;
}

@media screen and (max-width: 450px) {
  .salon_kv {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.salon_kv_img {
  height: 650px;
  object-fit: cover;
  grid-area: 1/-1;
  min-height: 0;
}

@media screen and (max-width: 450px) {
  .salon_kv_img {
    aspect-ratio: 1 / 1;
    height: auto;
    object-position: -240px top;
  }
}

/* salon_values */
.salon_values_bg {
  max-height: 650px;
  display: grid;
}

@media screen and (max-width: 450px) {
  .salon_values_bg {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.salon_values_bg_img {
  height: 650px;
  object-fit: cover;
  grid-area: 1/-1;
  min-height: 0;
}

@media screen and (max-width: 450px) {
  .salon_values_bg_img {
    aspect-ratio: 1 / 1;
    height: auto;
  }
}

.salon_values_text_wrapper {
  grid-area: 1/-1;
  z-index: 1;
  margin: auto 0px auto 80px;
  font-weight: 500;
  color: var(--white-color);
}

@media screen and (max-width: 780px) {
  .salon_values_text_wrapper {
    margin: auto 0px auto 24px;
  }
}

@media screen and (max-width: 450px) {
  .salon_values_text_wrapper {
    margin: auto 0px auto 24px;
    font-size: 20px;
  }
}

.salon_values_text_title_wrapper {
  font-size: 32px;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .salon_values_text_title_wrapper {
    font-size: 24px;
    gap: 8px;
  }
}

.salon_values_text_title_wrapper::after {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  background-color: var(--white-color);
  top: 0;
  bottom: 0;
  margin-top: 20px;
}

@media screen and (max-width: 450px) {
  .salon_values_text_title_wrapper::after {
    width: 50px;
    margin-top: 12px;
  }
}

.salon_values_text_title_en {
  letter-spacing: 0.12em;
}

.salon_values_text_title_ja {
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

@media screen and (max-width: 450px) {
  .salon_values_text_title_ja {
    font-size: 12px;
    margin-top: 2px;
  }
}

.salon_values_text_desc {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.8;
  font-weight: 400;
}

@media screen and (max-width: 450px) {
  .salon_values_text_desc {
    font-size: 14px;
  }
}

/* salon_hairstyle */
.salon_hairstyle_list {
  margin: 32px auto 0;
  max-width: 1430px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 24px 20px;
  justify-content: center;
  padding: 0 16px;
}

@media screen and (max-width: 900px) {
  .salon_hairstyle_list {
    padding: 0 16px;
    gap: 24px;
  }
}

.salon_hairstyle_list_item {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: calc((100% - 80px) / 5);
}

@media screen and (max-width: 900px) {
  .salon_hairstyle_list_item {
    width: calc((100% - 60px) / 2);
    gap: 4px;
  }
}

/* salon_staff */
.salon_staff {
  max-height: 650px;
  position: relative;
}

@media screen and (max-width: 450px) {
  .salon_staff {
    height: auto;
    padding-bottom: 60px;
  }
}

.salon_staff_text_wrapper {
  margin: auto;
  font-weight: 500;
  color: var(--black-color);
  height: 650px;
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

@media screen and (max-width: 450px) {
  .salon_staff_text_wrapper {
    font-size: 20px;
    height: auto;
    margin-top: 40px;
  }
}

.salon_staff_text_title_wrapper {
  font-size: 32px;
  font-weight: 500;
  margin: 0 80px;
}

@media screen and (max-width: 450px) {
  .salon_staff_text_title_wrapper {
    margin: 0 16px;
  }
}

@media screen and (max-width: 900px) {
  .salon_staff_text_title_wrapper {
    font-size: 24px;
    gap: 8px;
    margin: 0 16px;
  }
}

.salon_staff_text_title_en {
  letter-spacing: 0.12em;
}

.salon_staff_text_title_ja {
  font-size: 16px;
  letter-spacing: 0.07em;
  margin-top: 4px;
}

@media screen and (max-width: 450px) {
  .salon_staff_text_title_ja {
    font-size: 12px;
    margin-top: 2px;
  }
}

.salon_staff_swiper {
  padding-right: 160px;
  height: 650px;
}

.salon_staff_swiper .swiper-wrapper {
  width: 100%;
  display: flex;
  gap: 24px;
  padding-right: 20px;
  height: 100%;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .salon_staff_swiper {
    padding-right: 30%;
    height: auto;
  }
}

@media screen and (max-width: 376px) {
  .salon_staff_swiper {
    padding-right: 15%;
    height: auto;
  }
}

.salon_staff_swiper .swiper-slide {
  width: auto;
  max-height: calc(100% - 210px);
  height: 100%;
}

@media screen and (max-width: 450px) {
  .salon_staff_swiper .swiper-slide {
    width: auto;
    height: 240px !important;
    width: 180px !important;
  }
}

.salon_staff_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}

.swiper-buttons_wrapper {
  position: absolute;
  bottom: 0;
  right: 80px;
  width: 140px;
  display: flex;
  gap: 24px;
}

@media screen and (max-width: 900px) {
  .swiper-buttons_wrapper {
    position: absolute;
    bottom: -44px;
    right: 20px;
    width: 90px;
    display: flex;
    gap: 24px;
  }
}

.swiper-button-next,
.swiper-button-prev {
  background-color: var(--white-color);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  border: solid 1px #ac8b8b;
}

@media screen and (max-width: 900px) {
  .swiper-button-next,
  .swiper-button-prev {
    width: 30px;
    height: 30px;
  }
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  color: #ac8b8b;
  font-size: 16px;
}

@media screen and (max-width: 900px) {
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 10px;
  }
}

.swiper-button-next {
  margin-left: 24px;
}

.swiper-button-next::after {
  content: "\f054"; /* FontAwesomeの右矢印 */
}

.swiper-button-prev::after {
  content: "\f053"; /* FontAwesomeの左矢印 */
}

/* salon_shop */
.salon_shop_list {
  display: flex;
  flex-flow: column;
  gap: 120px;
  max-width: 936px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 80px;
}

@media screen and (max-width: 450px) {
  .salon_shop_list {
    padding-left: 0px;
    padding-right: 0px;
    gap: 40px;
    margin: 40px auto 0;
  }
}

.salon_shop_list_item {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 24px;
}

@media screen and (max-width: 450px) {
  .salon_shop_list_item {
    gap: 16px;
  }
}

@media screen and (max-width: 450px) {
  .salon_shop_list_item:nth-child(odd) {
    padding-left: 16px;
  }
}

@media screen and (max-width: 450px) {
  .salon_shop_list_item:nth-child(2n) {
    padding-right: 16px;
  }
}

.salon_shop_list_item:nth-child(2n) {
  flex-flow: row-reverse;
}

.salon_shop_list_desc_wrapper {
  width: 426px;
}

@media screen and (max-width: 376px) {
  .salon_shop_list_desc_wrapper {
    width: calc(100vw / 2);
  }
}

.salon_shop_list_title {
  font-size: 24px;
}

@media screen and (max-width: 450px) {
  .salon_shop_list_title {
    font-size: 16px;
  }
}

.salon_shop_list_desc {
  margin-top: 24px;
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .salon_shop_list_desc {
    font-size: 12px;
  }
}

.salon_shop_list_img_wrapper {
  max-width: 486px;
  max-height: 350px;
}

@media screen and (max-width: 450px) {
  .salon_shop_list_img_wrapper {
    object-fit: cover;
  }
}

@media screen and (max-width: 450px) {
  .salon_shop_list_img {
    width: 210px;
    height: 150px;
  }
}

/* shopsite_access */
.salon_reservation {
  padding: 80px 0;
  width: 100%;
  margin-top: 80px;
}

@media screen and (max-width: 1280px) {
  .salon_reservation {
    padding: 80px 16px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 450px) {
  .salon_reservation {
    padding: 24px 0px;
  }
}

.salon_reservation_link {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  width: 600px;
  padding: 16px 0;
  font-size: 20px;
  gap: 4px;
  letter-spacing: 0.05em;
  transition: 0.2s;
}

@media screen and (max-width: 1280px) {
  .salon_reservation_link {
    max-width: 600px;
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .salon_reservation_link {
    max-width: 320px;
    width: 100%;
    font-size: 16px;
  }
}

.salon_reservation_link:hover {
  opacity: 0.6;
}

.salon_reservation_link_text_en {
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .salon_reservation_link_text_en {
    font-size: 14px;
  }
}

/*---------- shopsite-sample-bakery ---------*/

/* bakery_kv */
.bakery_kv {
  max-height: 100%;
  margin-top: 60px;
  padding: 0 16px;
  position: relative;
}

@media screen and (max-width: 450px) {
  .bakery_kv {
    margin-top: 45px;
    padding: 0 12px;
  }
}

.bakery_kv::after {
  content: "Bakery";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-color);
  font-size: 100px;
  font-family: "Grey Qo", cursive;
}

@media screen and (max-width: 450px) {
  .bakery_kv::after {
    font-size: 60px;
  }
}

.bakery_kv_img {
  width: 100%;
  height: 100%;
  aspect-ratio: 734 / 295;
}

@media screen and (max-width: 450px) {
  .bakery_kv_img {
    aspect-ratio: 425 / 370;
    height: auto;
  }
}

/* bakery_banner */
.bakery_banner_swiper {
  margin-top: 26px;
}

@media screen and (max-width: 450px) {
  .bakery_banner_swiper {
    margin-top: 16px;
  }
}

.bakery_banner_swiper-wrapper {
  align-items: center;
  justify-content: center;
  gap: 20px;
}

@media screen and (max-width: 800px) {
  .bakery_banner_swiper-wrapper {
    gap: 0px;
  }
}

@media screen and (max-width: 450px) {
  .bakery_banner_swiper-wrapper {
    gap: 0px;
  }
}

@media screen and (max-width: 800px) {
  .bakery_banner_swiper-wrapper {
    justify-content: inherit;
  }
}

.bakery_banner_swiper-slide {
  max-width: 390px;
  transition: 0.2s;
}

.bakery_banner_swiper-slide:hover {
  opacity: 0.8;
}

.bakery_banner_swiper-slide img {
  height: auto;
  width: 100%;
}

/* bakery_news */
.bakery_news {
  margin-top: 40px;
}

@media screen and (max-width: 1300px) {
  .bakery_news_swiper {
    padding: 0 24px;
  }
}

.bakery_news_swiper-wrapper {
  margin-top: 40px;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

@media screen and (max-width: 1100px) {
  .bakery_news_swiper-wrapper {
    gap: 0px;
    justify-content: inherit;
  }
}

.bakery_news_swiper-slide {
  max-width: 321px;
}

.bakery_news_swiper-slide img {
  height: auto;
  width: 100%;
  max-width: 321px;
}

.bakery_news_swiper-slide_desc_wrapper {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.bakery_news_swiper-slide_desc_date {
  position: relative;
  display: flex;
  justify-content: center;
  font-weight: 500;
  align-items: center;
  gap: 12px;
}

.bakery_news_swiper-slide_desc_date::before,
.bakery_news_swiper-slide_desc_date::after {
  content: "";
  display: block;
  width: 1px;
  height: 15px;
  background-color: var(--black-color);
  transform: rotate(150deg);
}

.bakery_news_swiper-slide_desc_date::before {
  transform: rotate(150deg);
}

.bakery_news_swiper-slide_desc_date::after {
  transform: rotate(-150deg);
}

.bakery_news_swiper-slide_desc_text {
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .bakery_news_swiper-slide_desc_text {
    gap: 14px;
  }
}

/* bakery_line-up */
.bakery_line-up_list {
  margin: 40px auto 0;
  display: flex;
  max-width: calc(798px + 32px);
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 24px;
  justify-content: center;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_list {
    gap: 12px;
  }
}

.bakery_line-up_list_item {
  width: calc((100% - 48px) / 3);
  position: relative;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_list_item {
    width: calc((100% - 24px) / 3);
  }
}

.bakery_line-up_list_item_link {
  transition: 0.2s;
}

.bakery_line-up_list_item_link:hover {
  opacity: 0.8;
}

.bakery_line-up_list_item_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-color);
  font-size: 24px;
  width: 100%;
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_list_item_title {
    font-size: 16px;
  }
}

.bakery_line-up_button_wrapper {
  margin-top: 40px;
}

.bakery_line-up_button {
  letter-spacing: 0.1em;
  color: var(--black-color);
  font-weight: 400;
  border: 1px solid var(--black-color);
  display: flex;
  position: relative;
  box-sizing: border-box;
  max-width: 400px;
  text-align: center;
  padding: 16px 32px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_button {
    max-width: 320px;
  }
}

.bakery_line-up_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 1px;
  background: var(--black-color);
  transition: all 0.3s ease;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_button::after {
    width: 40px;
    right: -15px;
  }
}

.bakery_line-up_button:hover::after {
  animation: OutIn-Line 700ms;
  transition: all 0.3s;
}

.bakery_line-up_button_icon {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 450px) {
  .bakery_line-up_button_icon {
    width: 24px;
    height: 24px;
  }
}

@keyframes OutIn-Line {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }

  50% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
  }

  50.1% {
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }
}

/* bakery_genre */
.bakery_genre_wrapper {
  margin-top: 80px;
  padding: 0 16px;
  display: flex;
  gap: 40px;
  flex-flow: column;
}

@media screen and (max-width: 450px) {
  .bakery_genre_wrapper {
    gap: 80px;
  }
}

.bakery_genre {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  gap: 80px;
}

.bakery_genre:nth-child(2n) {
  flex-flow: row-reverse;
}

@media screen and (max-width: 450px) {
  .bakery_genre,
  .bakery_genre:nth-child(2n) {
    flex-flow: column;
    gap: 24px;
  }
}

.bakery_genre_desc_wrapper {
  max-width: 580px;
}

.bakery_genre_title {
  font-size: 24px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-flow: row;
  letter-spacing: 0.16em;
}

@media screen and (max-width: 450px) {
  .bakery_genre_title {
    font-size: 20px;
  }
}

.bakery_genre_title::before {
  content: "";
  width: 20px;
  height: 1px;
  display: block;
  background-color: var(--black-color);
}

.bakery_genre_title_desc {
  margin-top: 24px;
  font-size: 20px;
}

@media screen and (max-width: 450px) {
  .bakery_genre_title_desc {
    font-size: 14px;
  }
}

.bakery_genre_images {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 516px;
}

@media screen and (max-width: 450px) {
  .bakery_genre_images {
    max-width: 375px;
    gap: 12px;
    justify-content: center;
  }
}

.bakery_genre_image_wrapper {
  max-width: calc((100% - 32px) / 2);
}

/* bakery_gallery */
.bakery_gallery_swiper {
  margin-top: 40px;
}

@media screen and (max-width: 450px) {
  .bakery_gallery_swiper {
    margin-top: 0px;
  }
}

.bakery_gallery_swiper-wrapper {
  transition-timing-function: linear;
}

.bakery_gallery_swiper-slide img {
  height: auto;
  width: 100%;
}

/* bakery_interior */
.bakery_interior_wrapper {
  margin: 80px auto 0;
  max-width: 900px;
}

@media screen and (max-width: 900px) {
  .bakery_interior_wrapper {
    padding: 0 24px;
  }
}

@media screen and (max-width: 450px) {
  .bakery_interior_wrapper {
    margin: 40px auto 0;
  }
}

.bakery_interior_img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media screen and (max-width: 450px) {
  .bakery_interior_img {
    aspect-ratio: 4 / 3;
  }
}

/* bakery_shop */
.bakery_shop_list {
  display: flex;
  flex-flow: column;
  gap: 120px;
  max-width: 936px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 40px;
}

@media screen and (max-width: 450px) {
  .bakery_shop_list {
    padding-left: 0px;
    padding-right: 0px;
    gap: 40px;
    margin: 0 auto;
  }
}

.bakery_shop_list_item {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 24px;
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_item {
    gap: 16px;
  }
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_item:nth-child(1) {
    padding-left: 16px;
  }
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_item:nth-child(2n) {
    padding-right: 16px;
  }
}

.bakery_shop_list_item:nth-child(2n) {
  flex-flow: row-reverse;
}

.bakery_shop_list_desc_wrapper {
  width: 426px;
}

@media screen and (max-width: 376px) {
  .bakery_shop_list_desc_wrapper {
    width: calc(100vw / 2);
  }
}

.bakery_shop_list_title {
  font-size: 24px;
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_title {
    font-size: 16px;
  }
}

.bakery_shop_list_desc {
  margin-top: 24px;
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_desc {
    font-size: 12px;
  }
}

.bakery_shop_list_img_wrapper {
  max-width: 486px;
  max-height: 350px;
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_img_wrapper {
    object-fit: cover;
  }
}

@media screen and (max-width: 450px) {
  .bakery_shop_list_img {
    width: 210px;
    height: 150px;
  }
}

/* bakery_access */
@media screen and (max-width: 450px) {
  .shopsite_access {
    padding-bottom: 20px;
  }
}

.shopsite_access_container {
  margin-top: 48px;
  display: flex;
  flex-direction: row;
  gap: 48px;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .shopsite_access_container {
    flex-direction: column;
    gap: 20px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access_container {
    margin-top: 24px;
  }
}

.shopsite_access_map {
  width: 680px;
  height: 480px;
  flex-shrink: 0;
}

@media screen and (max-width: 1280px) {
  .shopsite_access_map {
    max-width: 680px;
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access_map {
    max-height: 300px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc {
    padding-left: 16px;
    padding-right: 16px;
    font-size: 14px;
  }
}

.shopsite_access_desc_address {
  display: flex;
  flex-direction: column;
  gap: 8px 0;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_address {
    gap: 4px 0;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access_map {
    max-height: 300px;
  }
}

.shopsite_access_desc_opening-hours {
  margin-top: 40px;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_opening-hours {
    margin-top: 16px;
  }
}

.shopsite_access_desc_title,
.shopsite_access_desc_contact_title {
  font-weight: 500;
}

.shopsite_access_desc_opening-hours_detail,
.shopsite_access_desc_contact_title {
  display: flex;
  flex-flow: row;
  gap: 12px;
  align-items: center;
}

.shopsite_access_desc_title + .shopsite_access_desc_opening-hours_detail {
  margin-top: 12px;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_title + .shopsite_access_desc_opening-hours_detail {
    margin-top: 4px;
  }
}

.shopsite_access_desc_opening-hours_detail
  + .shopsite_access_desc_opening-hours_detail {
  margin-top: 8px;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_opening-hours_detail
    + .shopsite_access_desc_opening-hours_detail {
    margin-top: 4px;
  }
}

.shopsite_access_desc_opening-hours_line,
.shopsite_access_desc_contact_line {
  display: block;
  width: 16px;
  height: 1px;
  background-color: var(--black-color);
}

.shopsite_access_desc_contact {
  margin-top: 40px;
  display: flex;
  flex-flow: row;
  gap: 12px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_contact {
    margin-top: 24px;
  }
}

.shopsite_access_desc_contact + .shopsite_access_desc_contact {
  margin-top: 12px;
}

@media screen and (max-width: 450px) {
  .shopsite_access_desc_contact + .shopsite_access_desc_contact {
    margin-top: 8px;
  }
}

.shopsite_reservation {
  padding: 80px 0;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .shopsite_reservation {
    padding: 80px 16px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_reservation {
    padding: 24px 0px;
  }
}

.shopsite_reservation_link {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  width: 600px;
  padding: 16px 0;
  font-size: 20px;
  gap: 4px;
  letter-spacing: 0.05em;
  transition: 0.2s;
}

.shopsite_reservation_link.__izakaya {
  padding: 26px 0;
}

@media screen and (max-width: 1280px) {
  .shopsite_reservation_link {
    max-width: 600px;
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_reservation_link {
    max-width: 320px;
    width: 100%;
    font-size: 16px;
  }
}

.shopsite_reservation_link:hover {
  opacity: 0.6;
}

.shopsite_reservation_link_text_en {
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .shopsite_reservation_link_text_en {
    font-size: 14px;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access.__cafe {
    margin-top: 20px;
    padding: 0;
  }
}

@media screen and (max-width: 450px) {
  .shopsite_access_container.__cafe {
    flex-direction: column-reverse;
    gap: 20px;
    margin-top: 0;
    margin-bottom: 24px;
  }
}

/* ---------- office ---------- */
.office_kv {
  margin-top: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 60px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .office_kv {
    flex-direction: column;
    gap: 40px;
    margin-top: 105px;
    padding: 0 16px;
  }
}

.office_kv_text_wrapper {
  display: flex;
  gap: 12px;
  flex-direction: column;
}

@media screen and (max-width: 450px) {
  .office_kv_text_wrapper {
    gap: 8px;
  }
}

.office_kv_text_ja {
  margin-left: 10px;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

@media screen and (max-width: 450px) {
  .office_kv_text_ja {
    font-size: 20px;
  }
}

.office_kv_text_en {
  color: var(--menu-divider-line-color);
   margin-left: 14px;
  letter-spacing: 0.05em;
  font-size: 15px;
}

.office_kv_img_wrapper {
  max-width: 620px;
}

@media screen and (max-width: 450px) {
  .office_kv_img_wrapper {
    max-width: 360px;
  }
}

/* office_about */
.office_about.l_section {
  padding-top: 120px;
  padding-bottom: 120px;
}

@media screen and (max-width: 450px) {
  .office_about.l_section {
    padding: 60px 16px;
  }
}

.office_about {
  margin-top: 60px;
}

.office_about_title {
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  line-height: 1.65;
  letter-spacing: 0.12em;
  display: flex;
  gap: 24px;
  flex-direction: column;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .office_about_title {
    font-size: 20px;
    text-align: left;
    align-items: flex-start;
  }
}

.office_about_title::after {
  content: "";
  height: 32px;
  width: 1px;
  background-color: var(--black-color);
}

@media screen and (max-width: 450px) {
  .office_about_title::after {
    height: 1px;
    width: 40px;
  }
}

.office_about_text {
  font-size: 20px;
  line-height: 2.2;
  text-align: center;
  margin-top: 24px;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 450px) {
  .office_about_text {
    font-size: 14px;
    text-align: left;
  }
}

.office_about_content_wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
  max-width: calc(1014px + 32px);
  padding: 0 16px;
  margin: 60px auto 0;
}

@media screen and (max-width: 450px) {
  .office_about_content_wrapper {
    flex-direction: column;
    margin: 32px auto 0;
    gap: 32px;
  }
}

.office_about_content_img_wrapper {
  max-width: 600px;
}

.office_about_content_text_title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0.12em;
}

@media screen and (max-width: 450px) {
  .office_about_content_text_title {
    text-align: center;
    font-size: 20px;
  }
}

.office_about_content_text_desc {
  margin-top: 24px;
  font-size: 14px;
  line-height: 2.2;
}

@media screen and (max-width: 450px) {
  .office_about_content_text_desc {
    font-size: 13px;
    line-height: 1.8;
    margin-top: 12px;
  }
}

/* office_service */
.office_service {
  max-width: calc(955px + 32px);
  padding: 0 16px;
  margin: 80px auto;
}

@media screen and (max-width: 450px) {
  .office_service {
    margin: 40px auto;
  }
}

.office_service_title_wrapper {
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.office_service_title {
  font-weight: 500;
  font-size: 32px;
  letter-spacing: 0.12em;
}

@media screen and (max-width: 450px) {
  .office_service_title {
    font-size: 24px;
  }
}

.office_service_title_en {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.07em;
  color: #5198c8;
}

@media screen and (max-width: 450px) {
  .office_service_title_en {
    font-size: 12px;
  }
}

.office_service_title_wrapper::after {
  content: "";
  height: 20px;
  width: 1px;
  display: block;
  background-color: var(--black-color);
  margin-top: 32px;
}

@media screen and (max-width: 450px) {
  .office_service_title_wrapper::after {
    height: 15px;
    margin-top: 20px;
  }
}

.office_service_content_wrapper {
  margin: 32px auto 0;
  display: flex;
  flex-direction: row;
  padding: 40px;
  gap: 40px;
  align-items: center;
  box-shadow: 4px 4px 15px 0px rgba(202, 206, 207, 0.8);
}

.office_service_content_wrapper + .office_service_content_wrapper {
  margin-top: 40px;
}

@media screen and (max-width: 450px) {
  .office_service_content_wrapper {
    flex-direction: column;
    padding: 32px 20px;
    margin: 20px auto 0;
    gap: 16px;
  }
}

.office_service_content_desc_wrapper {
  display: flex;
  gap: 12px;
  flex-direction: column;
  max-width: 375px;
}

.office_service_content_desc_title {
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.12em;
  padding-bottom: 12px;
  border-bottom: 1px solid #c6d3db;
}

@media screen and (max-width: 450px) {
  .office_service_content_desc_title {
    text-align: center;
  }
}

.office_service_content_desc_text {
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.office_service_content_desc_ex_list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background-color: rgba(172, 211, 228, 0.2);
}

.office_service_content_desc_ex_item {
  font-size: 14px;
  gap: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.office_service_content_desc_ex_item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 100vw;
  background-color: #5198c8;
}

.office_service_images_wrapper {
  display: flex;
  flex-direction: row;
  max-width: 830px;
  gap: 40px;
  margin: 60px auto 0;
  flex-wrap: wrap;
  padding: 0 16px;
}

@media screen and (max-width: 450px) {
  .office_service_images_wrapper {
    display: flex;
    flex-direction: row;
    max-width: 100%;
    gap: 12px 10px;
    margin: 40px auto 0;
    justify-content: center;
  }
}

.office_service_img_wrapper {
  position: relative;
  transition: 0.3s;
  max-width: calc((100% - 80px) / 3);
}

@media screen and (max-width: 450px) {
  .office_service_img_wrapper {
    max-width: calc((100% - 20px) / 3);
  }
}

.office_service_img_wrapper:hover {
  box-shadow: 4px 4px 15px 0px rgba(202, 206, 207, 0.8);
  opacity: 0.8;
}

.office_service_img_title {
  position: absolute;
  color: var(--white-color);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 145px;
  font-weight: 500;
  letter-spacing: 0.36em;
  font-size: 24px;
}

@media screen and (max-width: 450px) {
  .office_service_img_title {
    font-weight: 400;
    letter-spacing: 0.04em;
    font-size: 20px;
    width: 100%;
    text-align: center;
  }
}

/* shopsite_sample */
.office_sample {
  margin: 80px auto 0;
  max-width: 1070px;
  border-radius: 20px;
}

@media screen and (max-width: 1080px) {
  .office_sample {
    margin: 80px 24px 0;
  }
}

@media screen and (max-width: 450px) {
  .office_sample {
    margin: 0px;
    border-radius: 0px;
  }
}

.office_sample_list {
  margin-top: calc(48px + 25px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0 46px;
  gap: 24px;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .office_sample_list {
    padding: 0 16px;
  }
}

@media screen and (max-width: 450px) {
  .office_sample_list {
    flex-direction: column;
    gap: 40px;
    margin-top: 40px;
  }
}

.office_sample_list_item {
  max-width: calc((100% - 48px) / 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white-color);
  border-radius: 20px;
  position: relative;
  padding: 40px 16px;
}

@media screen and (max-width: 900px) {
  .office_sample_list_item {
    flex-direction: row;
    max-width: 100%;
    padding: 24px 18px;
    align-items: center;
  }
}

.office_sample_list_numbering {
  position: absolute;
  top: -25px;
  font-size: 24px;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New";
  background-color: #5198c8;
  color: var(--white-color);
  letter-spacing: 0.16em;
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 6px 11px;
  border-radius: 100vw;
}

.office_sample_list_item:first-of-type .office_sample_list_numbering {
  padding: 6px 12px;
}

@media screen and (max-width: 900px) {
  .office_sample_list_numbering {
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 4px 8px;
    left: -5px;
    top: -20px;
  }
}

@media screen and (max-width: 900px) {
  .office_sample_list_item:first-of-type .office_sample_list_numbering {
    padding: 4px 9px;
  }
}

@media screen and (max-width: 900px) {
  .office_sample_list_item_text_wrapper {
    order: 1;
    width: 100%;
    margin-left: 18px;
  }
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_text_wrapper {
    margin-left: 12px;
  }
}

.office_sample_list_item_title {
  font-size: 20px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.13em;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}

.office_sample_list_item_title::after {
  content: "";
  width: 70%;
  background-color: #5198c8;
  height: 1px;
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_title,
  .office_sample_list_item_desc {
    font-size: 14px;
  }
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_title {
    text-align: left;
    gap: 8px;
  }
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_title::after {
    width: 100%;
  }
}

.office_sample_list_item_desc {
  margin: 16px 0;
  letter-spacing: 0.04em;
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_desc {
    margin-top: 8px;
  }
}

.office_sample_list_item_img_wrapper {
  max-width: 220px;
  height: auto;
  margin-top: 16px;
}

@media screen and (max-width: 900px) {
  .office_sample_list_item_img_wrapper {
    max-width: 200px;
    order: 0;
  }
}

@media screen and (max-width: 450px) {
  .office_sample_list_item_img_wrapper {
    max-width: 120px;
    order: 0;
  }
}

/* office_banner */
.office_banner_wrapper {
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  max-height: 350px;
  transition: 0.2s;
  aspect-ratio: 27500 / 7873;
}

@media screen and (max-width: 450px) {
  .office_banner_wrapper {
    margin-top: 20px;
  }
}

.office_banner_wrapper:hover {
  opacity: 0.8;
}

@media screen and (max-width: 450px) {
  .office_banner_wrapper {
    height: 180px;
  }
}

.office_banner_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 450px) {
  .office_banner_img {
    object-fit: cover;
  }
}

/* office_access */
@media screen and (max-width: 450px) {
  .office_access {
    padding-top: 20px;
    padding-bottom: 0px !important;
  }
}

@media screen and (max-width: 450px) {
  .office_shopsite_access_container {
    flex-flow: wrap-reverse;
    margin-top: 0;
  }
}

/* office_contact */

.office_contact {
  padding: 80px 0;
  width: 100%;
}

@media screen and (max-width: 1280px) {
  .office_contact {
    padding: 80px 16px;
    margin-top: 20px;
  }
}

@media screen and (max-width: 450px) {
  .office_contact {
    padding: 24px 0px;
  }
}

.office_contact_link {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  flex-flow: column;
  text-align: center;
  background-color: var(--white-color);
  width: 600px;
  padding: 26px 0;
  font-size: 20px;
  gap: 4px;
  letter-spacing: 0.05em;
  transition: 0.2s;
}

@media screen and (max-width: 1280px) {
  .office_contact_link {
    max-width: 600px;
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .office_contact_link {
    max-width: 330px;
    width: 100%;
    font-size: 16px;
  }
}

.office_contact_link:hover {
  opacity: 0.6;
}

.office_contact_link_text_en {
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .office_contact_link_text_en {
    font-size: 14px;
  }
}

/* ---------- retails ---------- */

.l_header.__retails.default-color {
  color: var(--white-color);
}

.l_header.__retails.default-color .l_header-sns-icon_img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(99%) saturate(2%)
    hue-rotate(18deg) brightness(112%) contrast(100%);
}

.l_header.__retails .l_header-sns-icon_img {
  filter: brightness(0%) contrast(300%) grayscale(100%);
}

.l_header.__retails.default-color .m_hamburger-bar {
  background-color: var(--white-color);
}

/* retails_line-up */
.retails_line-up_list {
  margin: 40px auto 0;
  display: flex;
  max-width: calc(798px + 32px);
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 24px;
  justify-content: center;
}

@media screen and (max-width: 450px) {
  .retails_line-up_list {
    gap: 12px;
  }
}

.retails_line-up_list_item {
  width: calc((100% - 48px) / 3);
  position: relative;
}

@media screen and (max-width: 450px) {
  .retails_line-up_list_item {
    width: calc((100% - 24px) / 3);
  }
}

.retails_line-up_list_item_link {
  transition: 0.2s;
}

.retails_line-up_list_item_link:hover {
  opacity: 0.8;
}

.retails_line-up_list_item_title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--white-color);
  font-size: 24px;
  width: 100%;
  text-align: center;
  letter-spacing: 0.08em;
  font-weight: 500;
}

@media screen and (max-width: 450px) {
  .retails_line-up_list_item_title {
    font-size: 16px;
  }
}

.retails_line-up_button_wrapper {
  margin-top: 40px;
}

.retails_line-up_button {
  letter-spacing: 0.1em;
  color: var(--black-color);
  font-weight: 400;
  border: 1px solid var(--black-color);
  display: flex;
  position: relative;
  box-sizing: border-box;
  max-width: 400px;
  text-align: center;
  padding: 16px 32px;
  margin: 24px;
  margin-inline: auto;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

@media screen and (max-width: 450px) {
  .retails_line-up_button {
    max-width: 320px;
  }
}

.retails_line-up_button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  width: 60px;
  height: 1px;
  background: var(--black-color);
  transition: all 0.3s ease;
}

@media screen and (max-width: 450px) {
  .retails_line-up_button::after {
    width: 40px;
    right: -15px;
  }
}

.retails_line-up_button:hover::after {
  animation: OutIn-Line 700ms;
  transition: all 0.3s;
}

.retails_line-up_button_icon {
  width: 30px;
  height: 30px;
}

@media screen and (max-width: 450px) {
  .retails_line-up_button_icon {
    width: 24px;
    height: 24px;
  }
}

/* retails_menu1 */
.retails_menu1_list {
  margin: 32px auto 0;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 54px 40px;
  justify-content: center;
}

@media screen and (max-width: 900px) {
  .retails_menu1_list {
    padding: 0 16px;
    gap: 32px 30px;
  }
}

.retails_menu1_list_item {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: calc((100% - 80px) / 3);
}

@media screen and (max-width: 900px) {
  .retails_menu1_list_item {
    width: calc((100% - 60px) / 2);
    gap: 4px;
  }
}

.retails_menu1_list_item_desc {
  letter-spacing: 0.08em;
  font-weight: 500;
  font-size: 18px;
}

@media screen and (max-width: 450px) {
  .retails_menu1_list_item_desc {
    font-size: 12px;
    letter-spacing: 0.06em;
  }
}

.retails_menu1_list_item_desc.__price {
  color: var(--gray-color);
}

/* retails_shop_desc1 */
.retails_shop_desc1 {
  display: flex;
  flex-flow: column;
  gap: 120px;
  max-width: 936px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 80px;
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1 {
    padding-left: 0px;
    padding-right: 0px;
    gap: 40px;
    margin-top: 40px;
  }
}

.retails_shop_desc1_item {
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 24px;
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_item {
    gap: 16px;
  }
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_item:nth-child(1) {
    padding-left: 16px;
  }
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_item:nth-child(2n) {
    padding-right: 16px;
  }
}

.retails_shop_desc1_item:nth-child(2n) {
  flex-flow: row-reverse;
}

.retails_shop_desc1_desc_wrapper {
  width: 426px;
}

@media screen and (max-width: 376px) {
  .retails_shop_desc1_desc_wrapper {
    width: calc(100vw / 2);
  }
}

.retails_shop_desc1_title {
  font-size: 24px;
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_title {
    font-size: 16px;
  }
}

.retails_shop_desc1_desc {
  margin-top: 24px;
  font-size: 16px;
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_desc {
    font-size: 12px;
  }
}

.retails_shop_desc1_img_wrapper {
  max-width: 486px;
  max-height: 350px;
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_img_wrapper {
    object-fit: cover;
  }
}

@media screen and (max-width: 450px) {
  .retails_shop_desc1_img {
    width: 210px;
    height: 150px;
  }
}

/* retails_banner */
.retails_banner_wrapper {
  display: inline-block;
  width: 100%;
  margin-top: 40px;
  max-height: 350px;
  transition: 0.2s;
  aspect-ratio: 27500 / 7873;
}

@media screen and (max-width: 450px) {
  .retails_banner_wrapper {
    margin-top: 20px;
  }
}

.retails_banner_wrapper:hover {
  opacity: 0.8;
}

@media screen and (max-width: 450px) {
  .retails_banner_wrapper {
    height: 180px;
  }
}

.retails_banner_img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media screen and (max-width: 450px) {
  .retails_banner_img {
    object-fit: cover;
  }
}

/* retails_access */
@media screen and (max-width: 450px) {
  .retails_access {
    padding-top: 20px;
  }
}

@media screen and (max-width: 450px) {
  .retails_shopsite_access_container {
    flex-flow: wrap-reverse;
    margin-top: 0;
  }
}

/* retails_contact */
@media screen and (max-width: 450px) {
  .retails_contact {
    margin-top: 0;
  }
}

/* js */
.js_navigation.is-active {
  opacity: 1;
  pointer-events: inherit;
}

@media screen and (max-width: 450px) {
  .js_navigation {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s;
  }
}

.js_hamburger.is-active .m_hamburger-bar:first-child {
  top: 50%;
  transform: translate(-50%, 0) rotate(45deg);
}

.js_hamburger.is-active .m_hamburger-bar:nth-child(2) {
  opacity: 0;
}

.js_hamburger.is-active .m_hamburger-bar:last-child {
  top: 50%;
  transform: translate(-50%, 0) rotate(-45deg);
}