@charset "UTF-8";
/*
START MEDIA QUERY MANAGER

@media only screen and (min-width: 1800px){}
@media only screen and (min-width: 1550px){}
@media only screen and (min-width: 1200px){}
@media only screen and (min-width: 1025px){}
@media only screen and (min-width: 992px){}
@media only screen and (min-width: 768px){}
@media only screen and (min-width: 576px){}
@media only screen and (min-width: 421px){}
@media only screen and (min-width: 381px){}

@media only screen and (max-width: 1799px){}
@media only screen and (max-width: 1549px){}
@media only screen and (max-width: 1199px){}
@media only screen and (max-width: 1024px){}
@media only screen and (max-width: 991px){}
@media only screen and (max-width: 767px){}
@media only screen and (max-width: 575px){}
@media only screen and (max-width: 420px){}
@media only screen and (max-width: 380px){}

@media only screen and (min-width: 1549px) and (max-width: 1799px){}
@media only screen and (min-width: 1025px) and (max-width: 1300px){}
@media only screen and (min-width: 992px) and (max-width: 1199px){}
@media only screen and (min-width: 992px) and (max-width: 1024px){}
@media only screen and (min-width: 768px) and (max-width: 991px){}
@media only screen and (min-width: 576px) and (max-width: 767px){}

END MEDIA QUERY MANAGER
*/
/*====================================================================================
START TABLE OF CONTENT

1. START COMMON BASE.
2. START COMMON CONTAINER.
3. START COMMON HEADER.
4. START COMMON FOOTER.
5. START COMMON BACK TO TOP.
6. START COMMON SECTION.
7. START COMMON ICON.
8. START COMMON HEADING, TITLE.
9. START COMMON BUTTON.
10. START COMMON DECORATION AND SHAPE.
11. START COMMON KEYFRAMES.
12. START COMMON TEXT.
13. START COMMON LINK.
14. START COMMON ITEM.
15. START COMMON LIST.
16. START COMMON BOX.
17. START COMMON BLOCK.
18. START COMMON IMAGE.
19. START COMMON EFFECT.
20. START COMMON LAYOUT.
21. START COMMON COLOR.
22. START COMMON BACKGROUND.
23. START COMMON CUSTOM MARGIN.
24. START COMMON CUSTOM PADDING.
25. START COMMON BANNER.
26. START COMMON.

END TABLE OF CONTENT

====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Noto+Sans+JP:wght@100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Hina+Mincho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
/*====================================================================================
1. START COMMON BASE.
====================================================================================*/
.m-plus-1p {
  font-family: "M PLUS 1p", sans-serif;
}

.noto-serif-jp {
  font-family: "Noto Serif JP", serif;
}

.sorts-mill-goudy {
  font-family: "Sorts Mill Goudy", serif;
}

.zen-kaku-gothic-antique {
  font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.shippori-mincho {
  font-family: "Shippori Mincho", serif;
}

.hina-mincho-regular {
  font-family: "Hina Mincho", serif;
}


/*---------- Start Colors ----------*/
:root {
  --color-black: #000000;
  --color-black-second: #222222;
  --color-black-third: #332626;
  --color-black-fourth: #443F3F;
  --color-black-fifth: #A09D9D;
  --color-white: #FFFFFF;
  --color-gray: #F7F5F4;
  --color-gray-second: #8A8A8A;
  --color-gray-third: #F4F3F2;
  --color-gray-fourth: #CCBEBB;
  --color-beige: #F2EEE9;
  --color-beige-second: #EAE3DA;
  --color-beige-third: #E3D6C8;
  --color-brown: #B78681;
  --color-brown-second: #994840;
  --color-green: #6DBC70;
  --color-umber: #C4A679;
  --color-salmon: #E69791;
  --color-baby-blue: #A8B9C9;
  --color-pear-yellow: #CB8F4A;
  --font-m-plus-1p: "M PLUS 1p", sans-serif;
  --font-noto-serif-jp: "Noto Serif JP", serif;
  --font-sorts-mill-goudy: "Sorts Mill Goudy", serif;
  --font-zen-kaku-gothic-antique: "Zen Kaku Gothic Antique", sans-serif;
}

/*---------- End Colors ----------*/
html,
body {
  -webkit-font-smoothing: antialiased;
}

html {
  font-size: 62.5%;
  overflow-y: auto;
  line-height: normal;
}

body {
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.03em;
  font-family: var(--font-zen-kaku-gothic-antique);
  color: var(--color-black-third);
  background-color: var(--color-white);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body.is-open, body.lb-disable-scrolling {
  position: fixed;
  width: 100%;
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
    line-height: 1.7;
  }
}
#wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 32rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
  .is-pc {
    min-width: 119.9rem;
  }
  .is-pc #header {
    width: 119.9rem;
  }
  .is-pc #wrapper {
    max-width: 119.9rem;
  }
}
/*====================================================================================
1. END COMMON BASE.
====================================================================================*/
/*====================================================================================
2. START COMMON CONTAINER.
====================================================================================*/
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

.container.no-gutter,
.container-fluid.no-gutter,
.container-xxl.no-gutter,
.container-xl.no-gutter,
.container-lg.no-gutter,
.container-md.no-gutter,
.container-sm.no-gutter {
  padding-left: 0;
  padding-right: 0;
}

.container {
  max-width: 111rem;
}

.container-sm {
  max-width: 103rem;
}

@media only screen and (max-width: 767px) {
  .container,
  .container-fluid,
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm {
    padding: 0 1rem;
  }
}
/*====================================================================================
2. END COMMON CONTAINER.
====================================================================================*/
/*====================================================================================
3. START COMMON HEADER.
====================================================================================*/
/*---------- START HAMBURGER ----------*/
.hamburger {
  position: fixed;
  cursor: pointer;
  z-index: 999;
  top: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  padding-top: 0.3rem;
  border-radius: 50%;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  background-color: var(--color-white);
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.2);
}

.hamburger__wrap {
  position: relative;
  width: 3.2rem;
  height: 2rem;
}

.hamburger__text {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
}

.hamburger span {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 0.2rem;
  background-color: #707070;
  transition: all 0.3s ease-in-out;
}
.hamburger span:nth-child(1), .hamburger span:nth-child(3) {
  transform-origin: center;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 0.9rem;
}
.hamburger span:nth-child(3) {
  top: 1.8rem;
}
.hamburger.active span:nth-child(1), .hamburger.active span:nth-child(3) {
  top: 0.9rem;
  width: 100%;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(-215deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(215deg);
}

@media only screen and (max-width: 767px) {
  .hamburger {
    top: 1.2rem;
    right: 1rem;
    width: 5.5rem;
    height: 5.5rem;
    box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.3);
  }
  .hamburger__wrap {
    width: 2.8rem;
  }
  .hamburger__text {
    margin-top: 0.4rem;
    font-size: 1.1rem;
  }
}
/*---------- END HAMBURGER ----------*/
/*---------- START HEADER SOCIAL ----------*/
.hsocial__list {
  display: flex;
  align-items: center;
}

.hsocial__item {
  line-height: 1;
  margin-left: 2.5rem;
}
.hsocial__item:first-child {
  margin-left: 0;
}

@media only screen and (max-width: 767px) {
  .hsocial__list {
    justify-content: center;
  }
}
/*---------- END HEADER SOCIAL ----------*/
/*---------- START HEADER BUTTON ----------*/
@media only screen and (min-width: 768px) {
  .hbtns__item {
    margin-top: 1.5rem;
  }
  .hbtns__item:first-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .hbtns__list {
    display: flex;
    justify-content: space-between;
  }
  .hbtns__item {
    width: calc(50% - 0.5rem);
    text-align: center;
  }
}
/*---------- END HEADER BUTTON ----------*/
/*---------- START HEADER CONTACT ----------*/
.hcontact {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 1.2rem;
}

.hcontact__left {
  margin-right: 3rem;
}

.hcontact__right {
  margin-left: 2.8rem;
}

/*---------- END HEADER CONTACT ----------*/
/*---------- START HEADER LIST, ITEM ----------*/
.hitem {
  margin-left: 3rem;
}

.hitem__link {
  font-size: 1.3rem;
}

@media only screen and (min-width: 768px) {
  .hitem__link {
    position: relative;
    display: inline-block;
  }
  .hitem__link::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background-color: currentColor;
    transition: all 0.4s ease;
  }
  .hitem__link:hover {
    color: var(--color-brown-second);
  }
  .hitem__link:hover::before {
    width: 100%;
  }
}
.hlist {
  display: flex;
  align-items: center;
}

/*---------- END HEADER LIST, ITEM ----------*/
/*---------- START HEADER SUB HEADER NAV AND HEADER NAV ----------*/
.sub-hnav {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #F8F6F3;
  box-shadow: 0.1rem 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
}

.sub-hnav__wrap {
  padding: 2rem 0;
}

.sub-hnav__list {
  display: flex;
  justify-content: center;
}

.sub-hnav__item {
  margin-right: 11.5rem;
}
.sub-hnav__item:last-child {
  margin-right: 0;
}

.sub-hnav__link {
  position: relative;
  display: inline-block;
  padding-right: 1.6rem;
  font-size: 1.4rem;
}
.sub-hnav__link::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: currentColor;
  transition: all 0.4s ease;
}

.sub-hnav .sub-dropdown .sub-hnav__link {
  position: relative;
  display: inline-block;
  padding-right: 1.6rem;
}
.sub-hnav .sub-dropdown .sub-hnav__link::after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 1.1rem;
  right: 0;
  width: 1rem;
  height: 0.6rem;
  background-image: url("./../images/common/arrow-down-black.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.4s ease;
}
.sub-hnav .sub-dropdown.active .sub-hnav__link {
  color: var(--color-brown-second);
}
.sub-hnav .sub-dropdown.active .sub-hnav__link::after {
  background-image: url("./../images/common/arrow-down-brown.svg");
  transform: rotate(180deg);
  transition-delay: 0.3s;
}

@media only screen and (min-width: 768px) {
  .sub-hnav__link:hover::before {
    width: 100%;
  }
  .sub-hnav .sub-dropdown .sub-hnav__link::before {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: transparent;
  }
  .sub-hnav .sub-dropdown.active .sub-hnav__link {
    color: var(--color-brown-second);
  }
  .sub-hnav .sub-dropdown.active .sub-hnav__link::before {
    width: 100%;
  }
  .sub-hnav .sub-dropdown .sub-hnav__link:hover {
    color: var(--color-brown-second);
  }
  .sub-hnav .sub-dropdown .sub-hnav__link:hover::after {
    background-image: url("./../images/common/arrow-down-brown.svg");
    transform: rotate(180deg);
    transition-delay: 0.3s;
  }
}
.hnav__list {
  display: flex;
}

.hnav__item {
  font-size: 1.4rem;
  margin-left: 2.85rem;
}

.hnav__link {
  position: relative;
  display: inline-block;
}

.hnav .dropdown .hnav__link {
  position: relative;
  display: inline-block;
  padding-right: 1.6rem;
}
.hnav .dropdown .hnav__link::after {
  position: absolute;
  content: "";
  z-index: 2;
  top: 1.1rem;
  right: 0;
  width: 1rem;
  height: 0.6rem;
  background-image: url("./../images/common/arrow-down-black.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform 0.4s ease;
}
.hnav .dropdown.active .hnav__link {
  color: var(--color-brown-second);
}
.hnav .dropdown.active .hnav__link::after {
  background-image: url("./../images/common/arrow-down-brown.svg");
  transform: rotate(180deg);
  transition-delay: 0.3s;
}

@media only screen and (min-width: 768px) {
  .hnav__link::before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: all 0.4s ease;
  }
  .hnav__link:hover {
    color: var(--color-brown-second);
  }
  .hnav__link:hover::before {
    width: 100%;
  }
  .hnav .dropdown .hnav__link > a {
    position: relative;
  }
  .hnav .dropdown .hnav__link > a::before {
    position: absolute;
    content: "";
    top: 100%;
    left: 0;
    width: calc(100% + 1.6rem);
    height: 2.9rem;
    background-color: transparent;
  }
  .hnav .dropdown.active .hnav__link {
    color: var(--color-brown-second);
  }
  .hnav .dropdown.active .hnav__link::before {
    width: 100%;
  }
  .hnav .dropdown:hover .hnav__link::after {
    background-image: url("./../images/common/arrow-down-brown.svg");
    transform: rotate(180deg);
    transition-delay: 0.3s;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1350px) {
  .hnav__item {
    margin-left: 1.5rem;
  }
}
/*---------- END HEADER SUB HEADER NAV AND HEADER NAV ----------*/
/*---------- START GROUP HEADER ----------*/
.group-header {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
}

.group-header__row {
  display: flex;
  justify-content: space-between;
  max-width: 80rem;
  margin: 0 auto;
  padding: 4rem 0;
}

.group-header__item {
  margin-bottom: 1.5rem;
}
.group-header__item:last-child {
  margin-bottom: 0;
}

/*---------- END GROUP HEADER ----------*/
/*---------- START PANEL HEADER ----------*/
.panel-header__list {
  display: flex;
  justify-content: space-between;
}

.panel-header__item {
  border-right: 1px solid var(--color-black-fifth);
}
.panel-header__item:last-child {
  padding-right: 0;
  border-right: 0;
}

.panel-header__item-group {
  margin-top: 3.5rem;
}
.panel-header__item-group:first-child {
  margin-top: 0;
}

.panel-header__item-title {
  margin-bottom: 1.2rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.panel-header__sub-item {
  margin-top: 1rem;
}
.panel-header__sub-item:first-child {
  margin-top: 0;
}

#panel-header01 .panel-header__item {
  padding-right: 3rem;
}
#panel-header01 .panel-header__item:last-child {
  padding-right: 0;
}

#panel-header02 .panel-header__item {
  padding-right: 0.7rem;
}
#panel-header02 .panel-header__item:last-child {
  padding-right: 0;
}

/*---------- END PANEL HEADER ----------*/
/*---------- START TAB HEADER ----------*/
.tab-header {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: var(--color-white);
}

.tab-header__wrap {
  padding-top: 4rem;
}

.tab-header__head {
  padding: 0 4rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-black-fourth);
}
.tab-header__head label {
  width: calc(50% - 2rem);
  padding: 0.5rem 1rem;
  color: var(--color-black-fourth);
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
  border-radius: 1rem 1rem 0 0;
  border: 1px solid var(--color-black-fourth);
  border-bottom: 0;
  transition: all 0.3s ease;
}

.tab-header__body {
  padding: 4rem 0;
}

.tab-header #tab-header01:checked ~ .tab__head .lbl-header01 {
  color: var(--color-white);
  border-color: var(--color-beige);
  background-color: var(--color-brown);
}
.tab-header #tab-header01:checked ~ .tab__body #panel-header01 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}
.tab-header #tab-header02:checked ~ .tab__head .lbl-header02 {
  color: var(--color-white);
  border-color: var(--color-beige);
  background-color: var(--color-brown);
}
.tab-header #tab-header02:checked ~ .tab__body #panel-header02 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}

/*---------- END TAB HEADER ----------*/
/*---------- START HEADER MAIN ----------*/
.hmain {
  display: flex;
  align-items: center;
}

.hmain__left {
  flex: 1;
  min-width: 1px;
  padding-right: 2.5rem;
}

.hmain__right {
  width: 17.5rem;
}

/*---------- END HEADER MAIN ----------*/
/*---------- START BUTTON MOBILE ----------*/
.btn-mobile a {
  display: inline-flex;
  width: 3.8rem;
  height: 3.8rem;
}

.btn-mobile__icon {
  width: 100%;
  height: 100%;
  text-align: center;
}
.btn-mobile__icon img {
  height: 100%;
  width: auto;
}

/*---------- END BUTTON MOBILE ----------*/
/*---------- START HEADER MOBILE ----------*/
.hmobile {
  padding-right: 6.7rem;
}

.hmobile__list {
  display: flex;
}

.hmobile .btn-mobile {
  width: 3.8rem;
  margin-left: 1.5rem;
}
.hmobile .btn-mobile:first-child {
  margin-left: 0.5rem;
}

.hmobile__text {
  margin-top: 0.5rem;
  font-size: 1rem;
}
.hmobile__text span {
  font-family: var(--font-m-plus-1p);
}

/*---------- END HEADER MOBILE ----------*/
/*---------- START HEADER LOGO ----------*/
@media only screen and (max-width: 767px) {
  .hlogo__link img {
    max-height: 6rem;
  }
}
/*---------- END HEADER LOGO ----------*/
.header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2rem 2.5rem;
  background-color: var(--color-beige);
}
.header a {
  text-decoration: none;
}

.header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (min-width: 768px) {
  .header {
    z-index: 1000;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1300px) {
  .header {
    padding: 2rem 1.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .header {
    padding: 1rem;
  }
}
/*---------- START TAB MENU ----------*/
.tab-menu {
  top: 100%;
  left: 0;
  width: 100%;
}

.tab-menu__head {
  display: flex;
  justify-content: space-between;
}
.tab-menu__head label {
  width: calc(50% - 2.5rem);
  padding: 0.5rem 1rem;
  font-size: 1.8rem;
  line-height: 1.6;
  text-align: center;
  border-radius: 3rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-black-fourth);
  transition: all 0.3s ease;
}

.tab-menu__body {
  padding: 3rem 0;
}

.tab-menu #tab-menu01:checked ~ .tab__head .lbl-menu01 {
  color: var(--color-white);
  border: 1px solid var(--color-brown);
  background-color: var(--color-brown);
}
.tab-menu #tab-menu01:checked ~ .tab__body #panel-menu01 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}
.tab-menu #tab-menu02:checked ~ .tab__head .lbl-menu02 {
  color: var(--color-white);
  border: 1px solid var(--color-brown);
  background-color: var(--color-brown);
}
.tab-menu #tab-menu02:checked ~ .tab__body #panel-menu02 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}

@media only screen and (max-width: 767px) {
  .tab-menu__head label {
    width: calc(50% - 0.5rem);
    font-size: 1.6rem;
  }
  .tab-menu__body {
    padding: 2.5rem 0;
  }
}
/*---------- END TAB MENU ----------*/
/*---------- START PANEL MENU ----------*/
.panel-menu__row {
  margin-top: 5rem;
}
.panel-menu__row:first-child {
  margin-top: 0;
}

.panel-menu .heading-menu {
  margin-bottom: 3rem;
}

.panel-menu__item {
  padding-left: 2.5rem;
  border-left: 1px solid var(--color-black-fifth);
}

.panel-menu__item-group {
  margin-top: 3.5rem;
}

.panel-menu__item-title {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.panel-menu__sub-item {
  margin-top: 0.5rem;
}
.panel-menu__sub-item:first-child {
  margin-top: 0;
}

@media only screen and (min-width: 576px) {
  .panel-menu__list {
    display: flex;
  }
  .panel-menu__item {
    width: 50%;
  }
  .panel-menu__item-group:first-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .panel-menu__row {
    margin-top: 2.5rem;
  }
  .panel-menu .heading-menu {
    margin-bottom: 2rem;
  }
  .panel-menu__item {
    padding-left: 2rem;
  }
  .panel-menu__item:first-child {
    border-left: 0;
    padding-left: 0;
    padding-right: 1.5rem;
  }
  .panel-menu__item-group {
    margin-top: 1.5rem;
  }
  .panel-menu__item-title {
    margin-bottom: 0.5rem;
  }
}
@media only screen and (max-width: 575px) {
  .panel-menu__item {
    padding-left: 0;
    border-left: 0;
  }
}
/*---------- END PANEL MENU ----------*/
/*---------- START COMMON MENU ----------*/
.cm-menu {
  position: fixed;
  z-index: 998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100%;
  padding: 5rem 0;
  opacity: 0;
  overflow-y: auto;
  visibility: hidden;
  background-color: var(--color-beige);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.cm-menu.active {
  opacity: 1;
  visibility: visible;
}
.cm-menu a {
  text-decoration: none;
}

.cm-menu__group {
  display: flex;
  margin-top: 2rem;
}

.cm-menu__list {
  width: 50%;
}

.cm-menu__item {
  margin-top: 1rem;
}
.cm-menu__item:first-child {
  margin-top: 0;
}

.cm-menu .hsocial,
.cm-menu .hbtns {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .cm-menu__row {
    display: flex;
  }
  .cm-menu__left {
    flex: 1;
    min-width: 1px;
  }
  .cm-menu__right {
    width: 60%;
  }
}
@media only screen and (max-width: 767px) {
  .cm-menu {
    padding: 7rem 0 9rem 0;
  }
  .cm-menu__left {
    margin-bottom: 2.5rem;
  }
  .cm-menu__group {
    margin-top: 2rem;
  }
  .cm-menu__item {
    margin-top: 0.5rem;
  }
  .cm-menu .hsocial,
  .cm-menu .hbtns {
    margin-bottom: 2.5rem;
  }
  .cm-menu .box-tel {
    text-align: center;
  }
  .cm-menu .box-tel__text {
    margin-top: 0.7rem;
    padding-left: 3rem;
    font-size: 1.4rem;
  }
  .cm-menu .box-tel__text span {
    font-size: 1.5rem;
  }
  .cm-menu .box-tel .text-tel {
    font-size: 3.2rem;
    letter-spacing: 0.06em;
  }
  .cm-menu .box-tel .text-tel a {
    padding-left: 3.5rem;
  }
  .cm-menu .box-tel .text-tel a::before {
    width: 2.5rem;
    height: 2.8rem;
  }
}
@media only screen and (max-width: 767px) {
  .cm-menu {
    padding: 7rem 0;
  }
}
/*---------- END COMMON MENU ----------*/
/*====================================================================================
3. END COMMON HEADER.
====================================================================================*/
/*====================================================================================
4. START COMMON FOOTER.
====================================================================================*/
/*---------- START FOOTER CONTACT ----------*/
.fcontact__btn + .fcontact__btn {
  margin-top: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .fcontact {
    display: flex;
    align-items: center;
  }
  .fcontact__left {
    flex: 1;
    min-width: 1px;
  }
  .fcontact__right {
    width: 26rem;
  }
}
@media only screen and (max-width: 767px) {
  .fcontact__left {
    margin-bottom: 1.5rem;
  }
}
/*---------- END FOOTER CONTACT ----------*/
/*---------- START FOOTER SUB NAV AND NAV ----------*/
.sub-fnav {
  margin-top: 1rem;
}

.sub-fnav__item {
  margin-bottom: 0.35rem;
}
.sub-fnav__item:last-child {
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .sub-fnav__item {
    margin-bottom: 0.8rem;
  }
}
.fnav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.fnav__item {
  margin-bottom: 2rem;
}

.fnav a {
  text-decoration: none;
}

@media only screen and (min-width: 768px) {
  .fnav__item:last-child {
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .fnav__list {
    width: 50%;
  }
  .fnav__item {
    margin-bottom: 1.5rem;
  }
}
/*---------- END FOOTER SUB NAV AND NAV ----------*/
.footer {
  padding: 9.5rem 0;
  background-color: var(--color-beige);
}

.footer__head {
  padding-bottom: 3.5rem;
  border-bottom: 1px solid var(--color-black-fifth);
}

.footer__body {
  padding-top: 5rem;
}

.footer__text {
  margin-top: 0.5rem;
  font-size: 1.4rem;
}

.footer__copy {
  margin-top: 5rem;
  font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .footer__row {
    display: flex;
    align-items: center;
  }
  .footer__left {
    flex: 1;
    min-width: 1px;
  }
  .footer__right {
    width: 59.5rem;
  }
  .footer .hsocial {
    padding-right: 3.5rem;
  }
}
@media only screen and (max-width: 767px) {
  .footer {
    padding: 4.7rem 0 19vw 0;
  }
  .footer__head {
    text-align: center;
  }
  .footer__left {
    margin-bottom: 2.5rem;
  }
  .footer__body {
    padding-top: 3rem;
  }
  .footer__text {
    margin-top: 1rem;
  }
  .footer .hsocial {
    margin-top: 0.5rem;
  }
  .footer .hsocial__list {
    justify-content: flex-start;
  }
  .footer__copy {
    margin-top: 1rem;
  }
}
/*====================================================================================
4. END COMMON FOOTER.
====================================================================================*/
/*====================================================================================
5. START COMMON BACK TO TOP.
====================================================================================*/
.to-top {
  position: fixed;
  cursor: pointer;
  z-index: 200;
  bottom: 2rem;
  right: 2rem;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background-color: var(--color-brown);
  border: 1px solid var(--color-white);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transform: translateY(9rem);
  transition: all 0.4s ease;
}

.to-top__wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.to-top__wrap::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0);
  background-color: var(--color-white);
  transition: transform 0.4s ease-out;
}

.to-top__arrow {
  position: relative;
  display: inline-block;
  width: 2.2rem;
  height: 1.3rem;
  margin-top: -0.5rem;
}
.to-top__arrow::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("./../images/common/arrow-up-white.png");
  background-image: -webkit-image-set(url("./../images/common/arrow-up-white.png") 1x, url("./../images/common/arrow-up-white@2x.png") 2x);
  background-image: image-set(url("./../images/common/arrow-up-white.png") 1x, url("./../images/common/arrow-up-white@2x.png") 2x);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.to-top.is-show {
  transform: translateY(0);
  transition: all linear 0.5s;
}

@media only screen and (min-width: 1200px) {
  .to-top:hover {
    border-color: var(--color-black-fourth);
  }
  .to-top:hover .to-top__wrap::before {
    transform: scale(1);
  }
  .to-top:hover .to-top__arrow::before {
    background-image: url("./../images/common/arrow-up-black.png");
    background-image: -webkit-image-set(url("./../images/common/arrow-up-black.png") 1x, url("./../images/common/arrow-up-black@2x.png") 2x);
    background-image: image-set(url("./../images/common/arrow-up-black.png") 1x, url("./../images/common/arrow-up-black@2x.png") 2x);
  }
}
@media only screen and (max-width: 767px) {
  .to-top {
    right: 1rem;
    bottom: 17.5vw;
    width: 5.5rem;
    height: 5.5rem;
  }
}
/*====================================================================================
5. END COMMON BACK TO TOP.
====================================================================================*/
/*====================================================================================
6. START COMMON SECTION.
====================================================================================*/
/*---------- START SECTION TOP ----------*/
.stn-map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 55.5rem;
  overflow: hidden;
}
.stn-map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 360px);
  margin-top: -170px;
}

@media only screen and (max-width: 767px) {
  .stn-map {
    padding-top: 80%;
  }
}
/*---------- END SECTION TOP ----------*/
/*---------- START SECTION FIXED ----------*/
.stn-fixed {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: -0.1rem -0.5rem 1rem 0.5rem rgba(0, 0, 0, 0.1);
}

.stn-fixed__list {
  display: flex;
}

.stn-fixed .btn-fixed {
  padding: 0.5rem 0.7rem 0.7rem 0.7rem;
  text-align: center;
}
.stn-fixed .btn-fixed__icon {
  display: block;
  line-height: 0;
  margin-bottom: .5rem;
}
.stn-fixed .btn-fixed__icon img {
  width: auto;
  height: 5.5vw;
}
.stn-fixed .btn-fixed__text {
  display: block;
  color: var(--color-white);
  font-size: clamp(12px,3vw,20px);
  font-weight: 600;
  font-family: "M PLUS Rounded 1c", sans-serif;
  line-height: 1;
}
.stn-fixed .btn-fixed--mail {
  background-color: #f67e5a;
}
.stn-fixed .btn-fixed--mail .btn-fixed__icon img {
  transform: scale(0.7);
}
.stn-fixed .btn-fixed--line {
  background-color: #45a63b;
}
.stn-fixed .btn-fixed--tel {
  background-color: #c63067;
}
.stn-fixed .btn-fixed--tel .btn-fixed__icon img {
  transform: scale(0.85);
}

/*---------- END SECTION FIXED ----------*/
/*---------- START PANEL TOP ----------*/
.panel-top__row {
  margin-bottom: 5rem;
}
.panel-top__row:last-child {
  margin-bottom: 0;
}

.panel-top__heading {
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-black-third);
}

.panel-top__title {
  font-size: 2.4rem;
  font-weight: 400;
  font-family: var(--font-noto-serif-jp);
}

.panel-top__group {
  margin-bottom: 3rem;
}
.panel-top__group:last-child {
  margin-bottom: 0;
}
.panel-top__group .heading-top {
  margin-bottom: 0.5rem;
}

/*パネルの開閉*/
.panel-top__sub-list{
  display: none;
}

.panel-top__item .heading-top{
  position: relative;
}
.panel-top__item .heading-top::before{
  position: absolute;
    content: "";
    top: 50%;
    right: 2rem;
    width: 1rem;
    height: 2.4rem;
    margin-top: -1.2rem;
    background-image: url(./../common_img/arrow-down04-black.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.panel-top__item .heading-top.active::before {
  transform: rotate(180deg);
}

@media only screen and (min-width: 768px) {
  .panel-top__item .heading-top::before{
    right: 1rem;
  }
}
/*パネルの開閉ここまで*/

@media only screen and (min-width: 768px) {
  .panel-top__boxes {
    grid-gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .panel-top__list {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 576px) {
  .panel-top__boxes {
    display: grid;
  }
  .panel-top__list {
    display: grid;
    grid-gap: 0 2rem;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .panel-top__boxes {
    grid-gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .panel-top__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .panel-top__item {
    margin-top: 3rem;
  }
  .panel-top__item:nth-child(2) {
    margin-top: 0;
  }
}
@media only screen and (max-width: 767px) {
  .panel-top__row,
  .panel-top__heading {
    margin-bottom: 2.5rem;
  }
  .panel-top__title {
    font-size: 1.9rem;
  }
  .panel-top__item:first-child {
    margin-top: 0;
  }
}
@media only screen and (max-width: 575px) {
  .panel-top__boxes .box-top {
    width: 100%;
    margin-top: 1.5rem;
  }
  .panel-top__boxes .box-top:first-child {
    margin-top: 0;
  }
  .panel-top__item {
    margin-top: 2.5rem;
  }
}
/*---------- END PANEL TOP ----------*/
/*---------- START TAB TOP ----------*/
.tab-top__head {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-brown-second);
}
.tab-top__head label {
  width: calc(50% - 2px);
  padding: 2.3rem 1rem;
  border-radius: 1rem 1rem 0 0;
  color: var(--color-black-fourth);
  font-size: 2.4rem;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  font-family: var(--font-noto-serif-jp);
  background-color: var(--color-white);
  transition: all 0.3s ease;
}

.tab-top__body {
  padding: 4rem;
  background-color: var(--color-white);
}

.tab-top #tab-top01:checked ~ .tab__head .lbl-top01 {
  color: var(--color-white);
  border-color: var(--color-beige);
  background-color: var(--color-brown);
}

.tab-top .tab__head h3 {
  font-size: inherit;
  font-weight: inherit;
}
.tab-top #tab-top01:checked ~ .tab__body #panel-top01 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}
.tab-top #tab-top02:checked ~ .tab__head .lbl-top02 {
  color: var(--color-white);
  border-color: var(--color-beige);
  background-color: var(--color-brown);
}
.tab-top #tab-top02:checked ~ .tab__body #panel-top02 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}

@media only screen and (max-width: 767px) {
  .tab-top__head label {
    padding: 1.5rem 1rem;
    font-size: 1.9rem;
  }
  .tab-top__body {
    padding: 2rem 1.5rem;
  }
}
/*---------- END TAB TOP ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
6. END COMMON SECTION.
====================================================================================*/
/*====================================================================================
7. START COMMON ICON
====================================================================================*/
/*---------- START BASE ICON ----------*/
.base-icon {
  display: inline-block;
}
.base-icon::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*---------- END BASE ICON ----------*/
/*---------- START ICON ZOOM  ----------*/
.icon-zoom {
  position: relative;
  display: block;
  overflow: hidden;
}
.icon-zoom:before {
  position: absolute;
  display: inline-block;
  content: "";
  z-index: 3;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  background-image: url("../common_img/lightbox/icon-zoom.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 2rem 2rem;
  background-color: rgba(0, 0, 0, 0.2);
}

@media only screen and (min-width: 1200px) {
  .icon-zoom img {
    transition: transform 0.4s ease;
  }
  .icon-zoom:hover img {
    transform: scale(1.06);
  }
}
/*---------- END ICON ZOOM ----------*/
/*---------- START ICON, ARROW ----------*/
.icon,
.arrow {
  display: inline-block;
  overflow: hidden;
}

.icon__out,
.icon__in,
.arrow__out,
.arrow__in {
  position: absolute;
  display: inline-block;
  width: 100%;
  height: 100%;
  line-height: 0;
  transition: all 0.3s ease;
}

.icon__out img,
.icon__in img,
.arrow__out img,
.arrow__in img {
  width: auto;
  height: 100%;
}

.icon__out,
.arrow__out {
  left: -110%;
}

.icon__in,
.arrow__in {
  left: 0;
}

@media only screen and (min-width: 768px) {
  .icon:hover .icon__out,
  .icon:hover .arrow__out {
    left: 0;
  }
  .arrow:hover .icon__out,
  .arrow:hover .arrow__out {
    left: 0;
  }
  .icon:hover .icon__in,
  .icon:hover .arrow__in {
    left: 110%;
  }
  .arrow:hover .icon__in,
  .arrow:hover .arrow__in {
    left: 110%;
  }
}
/*---------- END ICON, ARROW ----------*/
/*---------- START ICON, ARROW LEFT ----------*/
.icon--left .icon__out,
.icon--left .arrow__out {
  left: 110%;
}

.arrow--left .icon__out,
.arrow--left .arrow__out {
  left: 110%;
}

@media only screen and (min-width: 768px) {
  .icon--left:hover .icon__out,
  .icon--left:hover .arrow__out {
    left: 0%;
  }
  .arrow--left:hover .icon__out,
  .arrow--left:hover .arrow__out {
    left: 0%;
  }
  .icon--left:hover .icon__in,
  .icon--left:hover .arrow__in {
    left: -110%;
  }
  .arrow--left:hover .icon__in,
  .arrow--left:hover .arrow__in {
    left: -110%;
  }
}
/*---------- END ICON, ARROW LEFT ----------*/
/*---------- START ICON INSTAGRAM ----------*/
.icon-ins,
.icon-twitter {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
}

/*---------- END ICON INSTAGRAM ----------*/
/*---------- START ICON TWITTER ----------*/
/*---------- END ICON TWITTER ----------*/
/*====================================================================================
7. END COMMON ICON.
====================================================================================*/
/*====================================================================================
8. START COMMON HEADING, TITLE.
====================================================================================*/
/*---------- START TITLE TOP ----------*/
.title-top {
  position: relative;
}
.title-top::before {
  position: absolute;
  content: "";
  background-color: #994840;
}

.title-top__en,
.title-top__ja {
  display: block;
  line-height: 1.5;
  font-weight: 400;
}

.title-top__en {
  color: var(--color-black-third);
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  font-family: var(--font-sorts-mill-goudy);
}

.title-top__ja {
  color: var(--color-gray-second);
  font-size: 1.6rem;
}
.title-top__ja small {
  font-size: 1.4rem;
}

.title-top--center {
  padding-top: 4rem;
  text-align: center;
}
.title-top--center::before {
  top: 0;
  left: 50%;
  width: 1px;
  height: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .title-top__en {
    margin-bottom: 0.5rem;
  }
  .title-top--pc-left::before {
    top: 2.3rem;
    left: -4.7rem;
    width: 2.8rem;
    height: 1px;
  }
}
@media only screen and (max-width: 767px) {
  .title-top__en {
    font-size: 2.5rem;
  }
  .title-top__ja {
    font-size: 1.4rem;
  }
  .title-top__ja small {
    font-size: 1.2rem;
  }
  .title-top--pc-left {
    padding-top: 3.5rem;
    text-align: center;
  }
  .title-top--pc-left::before {
    top: 0;
    left: 50%;
    width: 1px;
    height: 2.8rem;
  }
  .title-top--center {
    padding-top: 3.5rem;
  }
}
/*---------- END TITLE TOP ----------*/
/*---------- START TITLE LINE ----------*/
.title-line {
  position: relative;
  padding-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
}
.title-line::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 6rem;
  height: 1px;
  background-color: var(--color-brown-second);
}

.title-line--ver02 {
  margin-left: -0.85rem;
  padding-left: 0.85em;
  text-indent: -1em;
}

@media only screen and (max-width: 767px) {
  .title-line {
    padding-bottom: 1rem;
    font-size: 1.6rem;
  }
  .title-line::before {
    width: 5rem;
  }
}
/*---------- END TITLE LINE ----------*/
/*---------- START TITLE QUOTE ----------*/
.title-quote {
  color: var(--color-brown-second);
  font-size: 4.2rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: var(--font-sorts-mill-goudy);
}

.title-quote__text {
  position: relative;
  display: inline-block;
}

.title-quote__deco {
  position: relative;
  line-height: 1;
  font-size: 2.8rem;
  font-weight: 400;
  font-family: var(--font-sorts-mill-goudy);
}

.title-quote__deco-left {
  top: -1.9rem;
  margin-right: 0.7rem;
}

.title-quote__deco-right {
  bottom: -2rem;
  margin-left: 0.7rem;
}

@media only screen and (max-width: 767px) {
  .title-quote {
    display: flex;
    justify-content: center;
    font-size: 2.5rem;
    line-height: 1.4;
  }
  .title-quote__text {
    text-align: center;
  }
  .title-quote__deco {
    font-size: 2rem;
  }
  .title-quote__deco-left {
    top: -0.7rem;
  }
  .title-quote__deco-right {
    bottom: -1.3rem;
  }
}
/*---------- END TITLE QUOTE ----------*/
/*---------- START TITLE PAGE ----------*/
.title-page {
  position: relative;
  padding-left: 4.5rem;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: var(--font-noto-serif-jp);
}
.title-page::before {
  position: absolute;
  content: "";
  top: 2.2rem;
  left: 0;
  width: 2.8rem;
  height: 1px;
  background-color: var(--color-brown-second);
}

@media only screen and (max-width: 767px) {
  .title-page {
    padding-left: 3rem;
    font-size: 2.2rem;
  }
  .title-page::before {
    top: 1.7rem;
    width: 2rem;
  }
}
/*---------- END TITLE PAGE ----------*/
/*---------- START HEADING MENU ----------*/
.heading-menu {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-black-fourth);
}

.heading-menu__title {
  font-size: 2rem;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-noto-serif-jp);
}

@media only screen and (max-width: 767px) {
  .heading-menu {
    padding-bottom: 1rem;
  }
}
/*---------- END HEADING MENU ----------*/
/*---------- START HEADING TOP ----------*/
.heading-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.6rem;
  border-radius: 3rem;
  overflow: hidden;
  text-decoration: none;
  background-color: var(--color-beige-third);
  border: 1px solid var(--color-beige-third);
}

.heading-top__bg {
  position: absolute;
  display: inline-block;
  content: "";
  top: 50%;
  left: 0;
  height: 0;
  width: 100%;
  padding-top: 100%;
  transform: translateY(-50%);
}
.heading-top__bg::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0);
  background-color: var(--color-white);
  transition: transform 0.4s ease-out;
}

.heading-top__title {
  position: relative;
  z-index: 2;
  font-size: 1.5rem;
  font-weight: 400;
  text-align: center;
}

@media only screen and (min-width: 768px) {
  .heading-top--btn:hover {
    border-color: var(--color-black-fourth);
    transition-delay: 0.3s;
  }
  .heading-top--btn:hover .heading-top__bg::before {
    transform: scale(1);
  }
}
/*---------- END HEADING TOP ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
8. END COMMON HEADING, TITLE.
====================================================================================*/
/*====================================================================================
9. START COMMON BUTTON.
====================================================================================*/
/*---------- START BUTTON ----------*/
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  padding: 0;
  border: 0;
  outline: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
  vertical-align: middle;
  text-decoration: none !important;
}
.btn:focus {
  outline: none;
}
.btn.full-width {
  display: block;
  width: 100%;
}

.btn__bg {
  position: absolute;
  display: inline-block;
  content: "";
  top: 50%;
  left: 0;
  height: 0;
  width: 100%;
  padding-top: 100%;
  transform: translateY(-50%);
}
.btn__bg::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.4s ease-out;
}

.btn__arrow,
.btn__icon {
  position: absolute;
  z-index: 2;
}

.btn--brown {
  border: 1px solid var(--color-brown);
  background-color: var(--color-brown);
}
.btn--brown .btn__text {
  color: var(--color-white);
}
.btn--brown .btn__bg::before {
  background-color: var(--color-white);
}

.btn--umber {
  border: 1px solid var(--color-umber);
  background-color: var(--color-umber);
}
.btn--umber .btn__text {
  color: var(--color-white);
}
.btn--umber .btn__bg::before {
  background-color: var(--color-white);
}

.btn--green {
  border: 1px solid var(--color-green);
  background-color: var(--color-green);
}
.btn--green .btn__text {
  color: var(--color-white);
}
.btn--green .btn__bg::before {
  background-color: var(--color-white);
}

.btn--white {
  border: 1px solid var(--color-black-fourth);
  background-color: var(--color-white);
}
.btn--white .btn__text {
  color: var(--color-black-fourth);
}
.btn--white .btn__bg::before {
  background-color: var(--color-brown);
}

@media only screen and (min-width: 768px) {
  .btn--brown:hover,
  .btn--umber:hover,
  .btn--green:hover {
    border-color: var(--color-black-fourth);
  }
  .btn--brown:hover .btn__text,
  .btn--umber:hover .btn__text,
  .btn--green:hover .btn__text {
    color: var(--color-black-fourth);
  }
  .btn--white:hover {
    border-color: var(--color-brown);
  }
  .btn--white:hover .btn__text {
    color: var(--color-white);
  }
}
/*---------- END BUTTON ----------*/
/*---------- START BUTTON TOP ----------*/
.btn-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 17.5rem;
  min-height: 3.6rem;
  border-radius: 3rem;
  overflow: hidden;
}

.btn-top__text {
  position: relative;
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-zen-kaku-gothic-antique);
  transition-delay: 0.2s;
}

.btn-top__arrow {
  top: 50%;
  right: 1rem;
  width: 1.3rem;
  height: 0.9rem;
  margin-top: -0.45rem;
}

@media only screen and (min-width: 768px) {
  .btn-top:hover {
    transition-delay: 0.3s;
  }
  .btn-top:hover .btn__bg::before {
    transform: scale(1);
  }
  .btn-top:hover .btn__text {
    transition-delay: 0s;
  }
  .btn-top:hover .arrow__out {
    left: 0;
    transition-delay: 0.2s;
  }
  .btn-top:hover .arrow__in {
    left: 110%;
    transition-delay: 0.2s;
  }
}
/*---------- END BUTTON TOP ----------*/
/*---------- START BUTTON TOP MD ----------*/
.btn-top--md {
  max-width: 26rem;
  min-height: 5.8rem;
}
.btn-top--md .btn__text {
  font-size: 1.6rem;
  letter-spacing: 0.07em;
}
.btn-top--md .btn__arrow {
  right: 2rem;
  width: 1.75rem;
  height: 1.2rem;
  margin-top: -0.6rem;
}

@media only screen and (max-width: 767px) {
  .btn-top--md {
    min-height: 5rem;
  }
  .btn-top--md .btn__text {
    font-size: 1.4rem;
  }
  .btn-top--md .btn__arrow {
    right: 1.5rem;
    width: 1.3rem;
    height: 0.9rem;
    margin-top: -0.45rem;
  }
}
/*---------- END BUTTON TOP MD ----------*/
/*---------- START BUTTON TOP ----------*/
.btn-main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.8rem;
  border-radius: 4rem;
  padding: 0.5rem;
  overflow: hidden;
  margin: 0 auto;
}

.btn-main__text {
  position: relative;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  transition-delay: 0.2s;
}

.btn-main__arrow {
  top: 50%;
  right: 1.7rem;
  width: 0.6rem;
  height: 1.2rem;
  margin-top: -0.6rem;
}

.btn-main__icon {
  top: 50%;
  right: 1.7rem;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
}

@media only screen and (min-width: 768px) {
  .btn-main:hover {
    transition-delay: 0.3s;
  }
  .btn-main:hover .btn__bg::before {
    transform: scale(1);
  }
  .btn-main:hover .btn__text {
    transition-delay: 0s;
  }
  .btn-main:hover .arrow__out,
  .btn-main:hover .icon__out {
    left: 0;
    transition-delay: 0.2s;
  }
  .btn-main:hover .arrow__in,
  .btn-main:hover .icon__in {
    left: 110%;
    transition-delay: 0.2s;
  }
}
@media only screen and (max-width: 767px) {
  .btn-main {
    min-height: 5rem;
  }
  .btn-main__arrow {
    right: 1.5rem;
  }
}
/*---------- END BUTTON MAIN ----------*/
/*---------- START BUTTON MAIN LEFT ----------*/
.btn-main--left .btn__arrow {
  left: 2rem;
  right: auto;
}
.btn-main--left .btn__arrow__out {
  left: 110%;
}

@media only screen and (min-width: 768px) {
  .btn-main--left:hover .btn__arrow-out {
    left: 0%;
  }
  .btn-main--left:hover .btn__arrow-in {
    left: -110%;
  }
}
@media only screen and (max-width: 767px) {
  .btn-main--left .btn__arrow {
    left: 1.5rem;
  }
}
/*---------- END BUTTON MAIN LEFT ----------*/
/*---------- START BUTTON MAIN DOWNLOAD ----------*/
.btn-main--download .btn__arrow {
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.9rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--download .btn__arrow {
    width: 1.6rem;
    height: 1.6rem;
    margin-top: -0.8rem;
  }
}
/*---------- END BUTTON MAIN DOWNLOAD ----------*/
/*---------- START BUTTON MAIN UP ----------*/
.btn-main--up .btn__arrow {
  width: 1.4rem;
  height: 2rem;
  margin-top: -1rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--up .btn__arrow {
    width: 1.2rem;
    height: 1.8rem;
    margin-top: -0.9rem;
  }
}
/*---------- END BUTTON MAIN UP ----------*/
/*---------- START BUTTON MAIN DOWN ----------*/
.btn-main--down .btn__arrow {
  width: 1.2rem;
  height: 0.8rem;
  margin-top: -0.4rem;
}

/*---------- END BUTTON MAIN DOWN ----------*/
/*---------- START BUTTON MAIN AUTO ----------*/
.btn-main--auto {
  width: auto;
  padding: 1rem 4.5rem;
}
.btn-main--auto .btn__arrow {
  right: 2rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--auto {
    min-width: 26rem;
    padding: 0.8rem 3rem;
  }
  .btn-main--auto .btn__arrow {
    right: 1.5rem;
  }
}
/*---------- END BUTTON MAIN AUTO ----------*/
/*---------- START BUTTON MAIN SM ----------*/
.btn-main--sm {
  max-width: 24rem;
}
.btn-main--sm .btn__text {
  font-size: 2rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--sm .btn__text {
    font-size: 1.7rem;
  }
}
/*---------- END BUTTON MAIN SM ----------*/
/*---------- START BUTTON MAIN XS ----------*/
.btn-main--xs {
  max-width: 28rem;
  min-height: 4.5rem;
}
.btn-main--xs .btn__text {
  font-size: 1.6rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--xs {
    max-width: 26rem;
  }
  .btn-main--xs .btn__text {
    font-size: 1.4rem;
  }
}
/*---------- END BUTTON MAIN XS ----------*/
/*---------- START BUTTON MAIN MD ----------*/
.btn-main--md {
  max-width: 28rem;
}
.btn-main--md .btn__text {
  font-size: 1.6rem;
}

@media only screen and (max-width: 767px) {
  .btn-main--md {
    max-width: 26rem;
  }
  .btn-main--md .btn__text {
    font-size: 1.4rem;
  }
}
/*---------- END BUTTON MAIN MD ----------*/
/*---------- START BUTTON MAIN ENGLISH ----------*/
.btn-main--en .btn__text {
  font-family: var(--font-sorts-mill-goudy);
}

/*---------- END BUTTON MAIN ENGLISH ----------*/
/*---------- START BUTTON CIRCLE ----------*/
.btn-circle {
  position: absolute;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 1px solid var(--color-white);
}
.btn-circle::before {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0);
  background-color: var(--color-white);
  transition: transform 0.4s ease-out;
}

.btn-circle__arrow {
  position: absolute;
  content: "";
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 1.4rem;
  margin-left: -0.2rem;
  margin-top: -0.7rem;
}

@media only screen and (min-width: 768px) {
  .btn-circle:hover::before {
    transform: scale(1);
  }
  .btn-circle:hover .arrow__out {
    left: 0;
    transition-delay: 0.2s;
  }
  .btn-circle:hover .arrow__in {
    left: 110%;
    transition-delay: 0.2s;
  }
}
@media only screen and (max-width: 767px) {
  .btn-circle {
    width: 5rem;
    height: 5rem;
  }
}
/*---------- END BUTTON CIRCLE ----------*/
/*====================================================================================
9. END COMMON BUTTON.
====================================================================================*/
/*====================================================================================
10. START COMMON DECORATION AND SHAPE.
====================================================================================*/
/*---------- START BASE DECORATION ----------*/
.base-deco,
.base-shape {
  position: absolute;
  display: inline-block;
  pointer-events: none;
}

/*---------- END BASE DECORATION ----------*/
/*---------- START BASE SHAPE ----------*/
/*---------- END BASE SHAPE ----------*/
/*---------- START SHAPE TOP ----------*/
.shape-top__img {
  text-align: center;
}

@media only screen and (min-width: 1550px) {
  .shape-top .container {
    margin-top: -5rem;
  }
}
@media only screen and (max-width: 575px) {
  .shape-top .container {
    margin-top: 1.5rem;
  }
}
/*---------- END SHAPE TOP ----------*/
/*---------- START SHAPE TOP GRAY ----------*/
.shape-top--gray {
  background-color: var(--color-gray);
}

/*---------- END SHAPE TOP GRAY ----------*/
/*---------- START SHAPE TOP BEIGE ----------*/
.shape-top--beige {
  background-color: var(--color-beige);
}

/*---------- END SHAPE TOP BEIGE ----------*/
/*====================================================================================
10. END COMMON DECORATION AND SHAPE.
====================================================================================*/
/*====================================================================================
11. START COMMON KEYFRAMES.
====================================================================================*/
/*---------- START FADE IN ----------*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*---------- END FADE IN ----------*/
/*---------- START FADE IN LEFT ----------*/
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-3rem);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*---------- END FADE IN LEFT ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
11. END COMMON KEYFRAMES.
====================================================================================*/
/*====================================================================================
12. START COMMON TEXT.
====================================================================================*/
/*---------- START TEXT INDENT ----------*/
.text-indent {
  display: block;
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- END TEXT INDENT ----------*/
/*---------- START HOVER TEXT UNDERLINE ----------*/
a.tdn {
  text-decoration: none;
}
a.tdn:hover {
  text-decoration: underline;
}

/*---------- END HOVER TEXT UNDERLINE ----------*/
/*---------- START TEXT TELEPHONE ----------*/
.text-tel {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 400;
  letter-spacing: normal;
  font-family: var(--font-m-plus-1p);
}
.text-tel a {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
  text-decoration: none !important;
}
.text-tel a::before {
  position: absolute;
  content: "";
  z-index: 3;
  top: 0.25rem;
  left: 0;
  width: 1.7rem;
  height: 1.8rem;
  background-image: url("./../images/common/icon-tel-black.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/*---------- END TEXT TELEPHONE ----------*/

/*---------- START TEXT LEAD ----------*/
.text-lead {
	/*text-align: center;*/
	margin-bottom: 5rem;
}
@media only screen and (max-width: 767px) {
	.text-lead {
		/*text-align: left;*/
		margin-bottom: 2.5rem;
	}
}

/*---------- END TEXT INDENT ----------*/

/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
12. END COMMON TEXT.
====================================================================================*/
/*====================================================================================
13. START COMMON LINK.
====================================================================================*/
/* ---------- LINK DECORATION ---------- */
.not-mobile .link-sp {
  text-decoration: none;
}

.mobile .link-sp {
  text-decoration: underline;
}

/* ---------- END LINK DECORATION ---------- */
/* ---------- ADD LINK ---------- */
.add-link {
  position: relative;
}
.add-link > a {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* ---------- END ADD LINK ---------- */
/*---------- START LINK DASHED ----------*/
.link-dashed {
  position: relative;
  display: inline-block;
  padding-left: 1rem;
  font-size: 1.4rem;
  text-decoration: none !important;
  transition: color 0.4s ease;
}
.link-dashed::before {
  position: absolute;
  content: "";
  top: 1.4rem;
  left: 0;
  height: 1px;
  width: 0.4rem;
  background-color: currentColor;
}
.link-dashed small {
  font-size: 1.2rem;
}

@media only screen and (min-width: 768px) {
  .link-dashed p {
    display: inline;
    background: no-repeat 0 100%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
  }
  .link-dashed:hover {
    color: var(--color-brown-second);
  }
  .link-dashed:hover p {
    background-size: 100% 1px;
  }
}
@media only screen and (max-width: 767px) {
  .link-dashed::before {
    top: 1.1rem;
  }
}
/*---------- END LINK DASHED ----------*/
/*---------- START LINK DASHED MD ----------*/
.link-dashed--md {
  padding-left: 2.3rem;
  font-size: 1.6rem;
}
.link-dashed--md::before {
  top: 1.6rem;
  width: 1.3rem;
  background-color: var(--color-brown-second);
}

@media only screen and (max-width: 767px) {
  .link-dashed--md {
    padding-left: 1.5rem;
    font-size: 1.4rem;
  }
  .link-dashed--md::before {
    top: 1.1rem;
    width: 0.8rem;
  }
}
/*---------- END LINK DASHED MD ----------*/
/*---------- START LINK NORMAL ----------*/
.link-normal {
  position: relative;
  font-size: 1.6rem;
  text-decoration: none !important;
  transition: color 0.4s ease;
}

@media only screen and (min-width: 768px) {
  .link-normal p {
    display: inline;
    background: no-repeat 0 100%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
  }
  .link-normal:hover {
    color: var(--color-brown-second);
  }
  .link-normal:hover p {
    background-size: 100% 1px;
  }
}
@media only screen and (max-width: 767px) {
  .link-normal {
    font-size: 1.4rem;
  }
}
/*---------- END LINK NORMAL ----------*/
/*---------- START LINK ARROW ----------*/
.link-arrow {
  position: relative;
  display: inline-block;
  padding-left: 1.5rem;
  font-size: 1.4rem;
  text-decoration: none !important;
  transition: color 0.4s ease;
}
.link-arrow::before {
  position: absolute;
  content: "";
  top: 1.05rem;
  left: 0;
  width: 0.5rem;
  height: 0.85rem;
  background-image: url("./../images/common/arrow-right02-black.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media only screen and (min-width: 768px) {
  .link-arrow p {
    display: inline;
    background: no-repeat 0 100%;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    transition: background-size 0.5s cubic-bezier(0.43, 0.05, 0.17, 1) 0s;
  }
  .link-arrow:hover {
    color: var(--color-brown-second);
  }
  .link-arrow:hover::before {
    background-image: url("./../images/common/arrow-right02-brown.svg");
  }
  .link-arrow:hover p {
    background-size: 100% 1px;
  }
}
@media only screen and (max-width: 767px) {
  .link-arrow {
    padding-left: 1.2rem;
  }
  .link-arrow::before {
    top: 0.85rem;
  }
}
/*---------- END LINK ARROW ----------*/
/*---------- START LINK TOP ----------*/
.link-top {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 5rem;
  padding: 1rem 2rem 1rem 0;
  text-decoration: none;
}
.link-top::before, .link-top::after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 1px;
  transition: all 0.4s ease;
}
.link-top::before {
  z-index: 2;
  width: 0;
  background-color: var(--color-brown-second);
}
.link-top::after {
  z-index: 1;
  width: 100%;
  background-color: var(--color-black-fifth);
}

.link-top__desc {
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 400;
  transition: color 0.4s ease;
}
.link-top__desc small {
  font-size: 1.2rem;
}

.link-top .arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 0.6rem;
  height: 1rem;
  margin-top: -0.5rem;
}

@media only screen and (min-width: 768px) {
  .link-top:hover::before {
    width: 100%;
  }
  .link-top:hover .link-top__desc {
    color: var(--color-brown-second);
  }
  .link-top:hover .arrow__out {
    left: 0;
    transition-delay: 0.2s;
  }
  .link-top:hover .arrow__in {
    left: 110%;
    transition-delay: 0.2s;
  }
}
@media only screen and (max-width: 767px) {
  .link-top {
    min-height: 4.5rem;
  }
  .link-top__desc {
    font-size: 1.4rem;
  }
}
/*---------- END LINK TOP ----------*/
/*====================================================================================
13. END COMMON LINK.
====================================================================================*/
/*====================================================================================
14. START COMMON ITEM.
====================================================================================*/
/*---------- START ITEM BASE ----------*/
.item-base {
  position: relative;
}
.item-base::before {
  position: absolute;
  top: 0;
  left: 0;
}

/*---------- END ITEM BASE ----------*/
/*---------- START ITEM MARK DISC ----------*/
.item-mark-disc {
  padding-left: 1em;
}
.item-mark-disc::before {
  content: "・";
}

/*---------- END ITEM MARK DISC ----------*/
/*---------- START ITEM CIRCLE ----------*/
.item-circle {
  padding-left: 1.1em;
}
.item-circle::before {
  content: "●";
}

/*---------- END ITEM CIRCLE ----------*/
/*---------- START ITEM STAR ----------*/
.item-star {
  padding-left: 1.1em;
}
.item-star::before {
  content: "※";
}

/*---------- END ITEM STAR ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
14. END COMMON ITEM.
====================================================================================*/
/*====================================================================================
15. START COMMON LIST.
====================================================================================*/
/*---------- START LIST INDENT ----------*/
.list-indent li {
  padding-left: 1em;
  text-indent: -1em;
}

/*---------- END  LIST INDENT ----------*/
/*---------- START LIST BASE ----------*/
.list-base > li {
  position: relative;
}
.list-base > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

/*---------- END LIST BASE ----------*/
/*---------- START LIST MARK DISC ----------*/
.list-mark-disc > li {
  padding-left: 1em;
}
.list-mark-disc > li::before {
  content: "・";
}

/*---------- END  LIST MARK DISC ----------*/
/*---------- START LIST CIRCLE ----------*/
.list-circle > li {
  padding-left: 1.3em;
}
.list-circle > li::before {
  content: "●";
  transform: scale(0.8);
}

/*---------- END LIST CIRCLE ----------*/
/*---------- START LIST STAR ----------*/
.list-star > li {
  padding-left: 1.3em;
}
.list-star > li::before {
  content: "※";
}

/*---------- END LIST STAR ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
15. END COMMON LIST.
====================================================================================*/
/*====================================================================================
16. START COMMON BOX.
====================================================================================*/
/*---------- START BOX TELEPHONE ----------*/
.box-tel__wrap {
  display: inline-block;
  text-align: left;
}

.box-tel__text {
  margin-top: 0.2rem;
  padding-left: 1.5rem;
  font-size: 1.2rem;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.box-tel__text span {
  font-size: 1.3rem;
  font-family: var(--font-m-plus-1p);
}

.box-tel--md .box-tel__text {
  margin-top: 0.7rem;
  padding-left: 3rem;
  font-size: 1.4rem;
}
.box-tel--md .box-tel__text span {
  font-size: 1.5rem;
}
.box-tel--md .text-tel {
  font-size: 3.2rem;
  letter-spacing: 0.06em;
}
.box-tel--md .text-tel a {
  padding-left: 3.5rem;
}
.box-tel--md .text-tel a::before {
  width: 2.5rem;
  height: 2.8rem;
}

/*---------- END BOX TELEPHONE ----------*/
/*---------- START BOX TOP ----------*/
.box-top {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 11.5rem;
  padding: 2rem 1.2rem;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--color-black-fifth);
}

.box-top__icon,
.box-top__body {
  position: relative;
  z-index: 2;
}

.box-top__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7.6rem;
  height: 7.6rem;
}

.box-top__body {
  flex: 1;
  min-width: 1px;
  padding-left: 1rem;
}

.box-top__title,
.box-top__desc {
  transition-delay: 0.2s;
}

.box-top__title {
  font-size: 1.8rem;
  font-weight: 400;
}

.box-top__desc {
  margin-top: 0.3rem;
  font-size: 1.4rem;
}

.box-top__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 1.3rem;
  width: 0.6rem;
  height: 1rem;
  margin-top: -0.5rem;
}

@media only screen and (min-width: 768px) {
  .box-top__bg {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 0;
    height: 0;
    width: 100%;
    padding-top: 100%;
    transform: translateY(-50%);
  }
  .box-top__bg::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transform: scale(0);
    background-color: var(--color-brown);
    transition: transform 0.4s ease-out;
  }
  .box-top:hover .box-top__bg::before {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  .box-top:hover .box-top__title,
  .box-top:hover .box-top__desc {
    color: var(--color-white);
    transition-delay: 0s;
  }
  .box-top:hover .arrow__out {
    left: 0;
  }
  .box-top:hover .arrow__in {
    left: 110%;
  }
}
@media only screen and (max-width: 767px) {
  .box-top {
    min-height: 8.5rem;
    padding: 1rem;
  }
  .box-top__icon {
    width: 6.5rem;
    height: 6.5rem;
  }
  .box-top__title {
    font-size: 1.6rem;
  }
  .box-top__desc {
    font-size: 1.2rem;
  }
}
/*---------- END BOX TOP ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
16. END COMMON BOX.
====================================================================================*/
/*====================================================================================
17. START COMMON BLOCK.
====================================================================================*/
/*---------- START PANEL ----------*/
.panel {
  display: none;
  opacity: 0;
}

/*---------- END PANEL ----------*/
/*---------- START TAB ----------*/
.tab input[type=radio] {
  display: none;
}

.tab__head label {
  cursor: pointer;
}

.tab #tab01:checked ~ .tab__head .lbl01 {
  color: var(--color-brown);
}
.tab #tab01:checked ~ .tab__body #panel01 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}
.tab #tab02:checked ~ .tab__head .lbl02 {
  color: var(--color-brown);
}
.tab #tab02:checked ~ .tab__body #panel02 {
  display: block;
  animation: fadeIn ease 0.4s forwards;
  animation-delay: 0.2s;
}

/*---------- END TAB ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
17. END COMMON BLOCK.
====================================================================================*/
/*====================================================================================
18. START COMMON IMAGE.
====================================================================================*/
/*---------- START IMAGE OBJECT FIT  ----------*/
.img-ofi {
  width: 100%;
  height: 100%;
}

.img-ofi--center {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  font-family: "object-fit: cover; object-position: center", sans-serif;
}

.img-ofi--top {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center top;
  object-position: center top;
  font-family: "object-fit: cover; object-position: center top", sans-serif;
}

.img-ofi--bottom {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center bottom;
  object-position: center bottom;
  font-family: "object-fit: cover; object-position: center bottom", sans-serif;
}

.img-ofi--left {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: left center;
  object-position: left center;
  font-family: "object-fit: cover; object-position: left center", sans-serif;
}

.img-ofi--right {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: right center;
  object-position: right center;
  font-family: "object-fit: cover; object-position: right center", sans-serif;
}

/*---------- END IMAGE OBJECT FIT ----------*/
/*---------- START BACKGROUND IMAGE  ----------*/
.bg-img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/*---------- END BACKGROUND IMAGE ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
18. END COMMON IMAGE.
====================================================================================*/
/*====================================================================================
19. START COMMON EFFECT.
====================================================================================*/
/*---------- START EFFECT ZOOM ----------*/
.e-zoom {
  display: inline-block;
}

@media only screen and (min-width: 1200px) {
  .e-zoom {
    transition: transform 0.3s ease;
  }
  .e-zoom:hover {
    transform: scale(1.02);
  }
}
/*---------- END EFFECT ZOOM ----------*/
/*---------- START EFFECT OPACITY IMAGES ----------*/
@media only screen and (min-width: 1200px) {
  .e-opacity-img:hover img {
    opacity: 0.7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha( opacity=70)";
  }
}
/*---------- END EFFECT OPACITY IMAGES ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
19. END COMMON EFFECT.
====================================================================================*/
/*====================================================================================
20. START COMMON LAYOUT.
====================================================================================*/
/*---------- START FLEX LAYOUT ----------*/
.height-center {
  display: flex;
  align-items: center;
}

.width-center {
  display: flex;
  justify-content: center;
}

.width-between {
  display: flex;
  justify-content: space-between;
}

.center-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/*---------- END FLEX LAYOUT ----------*/
/*---------- START FLEX LIST ----------*/
.list-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.list-between {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list-wrap {
  display: flex;
  flex-wrap: wrap;
}

/*---------- END FLEX LIST ----------*/
/*---------- START LAYOUT ----------*/
.layout777 {
  max-width: 77rem;
}

@media only screen and (max-width: 767px) {
  .layout777 {
    padding: 0 3rem;
  }
}
/*---------- END LAYOUT ----------*/
/*---------- START BREAK TEXT ----------*/
.br-sp{
  display: block;
}

.br-pc{
  display: none;
}

@media only screen and (min-width: 768px) {
  .br-sp{
    display: none;
  }

  .br-pc{
    display: block;
  }
}
/*---------- END BREAK TEXT ----------*/
/*====================================================================================
20. END COMMON LAYOUT.
====================================================================================*/
/*====================================================================================
21. START COMMON COLOR.
====================================================================================*/
.c-FFFFFF {
  color: #FFFFFF !important;
}

.c-000000 {
  color: #000000 !important;
}

.c-222222 {
  color: #222222 !important;
}

.c-443F3F {
  color: #443F3F !important;
}

.c-F7F5F4 {
  color: #F7F5F4 !important;
}

.c-F2EEE9 {
  color: #F2EEE9 !important;
}

.c-EAE3DA {
  color: #EAE3DA !important;
}

.c-B78681 {
  color: #B78681 !important;
}

.c-994840 {
  color: #994840 !important;
}

.c-C4A679 {
  color: #C4A679 !important;
}

.c-E69791 {
  color: #E69791 !important;
}

.c-A8B9C9 {
  color: #A8B9C9 !important;
}

.c-CB8F4A {
  color: #CB8F4A !important;
}

/*====================================================================================
21. END COMMON COLOR.
====================================================================================*/
/*====================================================================================
22. START COMMON BACKGROUND.
====================================================================================*/
.bg-FFFFFF {
  background-color: #FFFFFF !important;
}

.bg-000000 {
  background-color: #000000 !important;
}

.bg-222222 {
  background-color: #222222 !important;
}

.bg-443F3F {
  background-color: #443F3F !important;
}

.bg-F7F5F4 {
  background-color: #F7F5F4 !important;
}

.bg-F2EEE9 {
  background-color: #F2EEE9 !important;
}

.bg-EAE3DA {
  background-color: #EAE3DA !important;
}

.bg-B78681 {
  background-color: #B78681 !important;
}

.bg-994840 {
  background-color: #994840 !important;
}

.bg-C4A679 {
  background-color: #C4A679 !important;
}

.bg-E69791 {
  background-color: #E69791 !important;
}

.bg-A8B9C9 {
  background-color: #A8B9C9 !important;
}

.bg-CB8F4A {
  background-color: #CB8F4A !important;
}

/*====================================================================================
22. END COMMON BACKGROUND.
====================================================================================*/
/*====================================================================================
23. START COMMON CUSTOM MARGIN.
====================================================================================*/
/*---------- START TITLE MARGIN TOP ----------*/
/*---------- END TITLE MARGIN TOP ----------*/
/*---------- START TITLE MARGIN BOTTOM ----------*/
.tt-mg-bottom01 {
  margin-bottom: 5rem !important;
}

.tt-mg-bottom02 {
  margin-bottom: 4.5rem !important;
}

.tt-mg-bottom03 {
  margin-bottom: 3.5rem !important;
}

@media only screen and (max-width: 767px) {
  .tt-mg-bottom01 {
    margin-bottom: 2.5rem !important;
  }
  .tt-mg-bottom02,
  .tt-mg-bottom03 {
    margin-bottom: 2rem !important;
  }
}
/*---------- END TITLE MARGIN BOTTOM ----------*/
/*---------- START TITLE MARGIN LEFT ----------*/
/*---------- END TITLE MARGIN LEFT ----------*/
/*---------- START TITLE MARGIN RIGHT ----------*/
/*---------- END TITLE MARGIN RIGHT ----------*/
/*---------- START TABLE MARGIN TOP ----------*/
/*---------- END TABLE MARGIN TOP ----------*/
/*---------- START TABLE MARGIN BOTTOM ----------*/
.tbl-mg-bottom01 {
  margin-bottom: 2rem !important;
}

.tbl-mg-bottom02 {
  margin-bottom: 1.2rem !important;
}

@media only screen and (max-width: 767px) {
  .tbl-mg-bottom01 {
    margin-bottom: 1.5rem !important;
  }
  .tbl-mg-bottom02 {
    margin-bottom: 1rem !important;
  }
}
/*---------- END TABLE MARGIN BOTTOM ----------*/
/*---------- START TABLE MARGIN LEFT ----------*/
/*---------- END TABLE MARGIN LEFT ----------*/
/*---------- START TABLE MARGIN RIGHT ----------*/
/*---------- END TABLE MARGIN RIGHT ----------*/
/*---------- START MARGIN TOP ----------*/
.mg-top01 {
  margin-top: 10rem !important;
}

.mg-top02 {
  margin-top: 9rem !important;
}

.mg-top03 {
  margin-top: 8rem !important;
}

.mg-top04 {
  margin-top: 7rem !important;
}

.mg-top05 {
  margin-top: 6rem !important;
}

.mg-top06 {
  margin-top: 5rem !important;
}

.mg-top07 {
  margin-top: 4rem !important;
}

.mg-top08 {
  margin-top: 3rem !important;
}

.mg-top09,
.mg-top10 {
  margin-top: 2rem !important;
}

.mg-top11 {
  margin-top: 1.5rem !important;
}

@media only screen and (max-width: 767px) {
  .mg-top01 {
    margin-top: 5rem !important;
  }
  .mg-top02 {
    margin-top: 4.5rem !important;
  }
  .mg-top03 {
    margin-top: 4rem !important;
  }
  .mg-top04 {
    margin-top: 3.5rem !important;
  }
  .mg-top05 {
    margin-top: 3rem !important;
  }
  .mg-top06 {
    margin-top: 2.5rem !important;
  }
  .mg-top07 {
    margin-top: 2rem !important;
  }
  .mg-top08,
  .mg-top09 {
    margin-top: 1.5rem !important;
  }
  .mg-top10,
  .mg-top11 {
    margin-top: 1rem !important;
  }
}
/*---------- END MARGIN TOP ----------*/
/*---------- START MARGIN BOTTOM ----------*/
.mg-bottom01 {
  margin-bottom: 10rem !important;
}

.mg-bottom02 {
  margin-bottom: 9rem !important;
}

.mg-bottom03 {
  margin-bottom: 8rem !important;
}

.mg-bottom04 {
  margin-bottom: 7rem !important;
}

.mg-bottom05 {
  margin-bottom: 6rem !important;
}

.mg-bottom06 {
  margin-bottom: 5rem !important;
}

.mg-bottom07 {
  margin-bottom: 4rem !important;
}

.mg-bottom08 {
  margin-bottom: 3rem !important;
}

.mg-bottom09,
.mg-bottom10 {
  margin-bottom: 2rem !important;
}

@media only screen and (max-width: 767px) {
  .mg-bottom01 {
    margin-bottom: 5rem !important;
  }
  .mg-bottom02 {
    margin-bottom: 4.5rem !important;
  }
  .mg-bottom03 {
    margin-bottom: 4rem !important;
  }
  .mg-bottom04 {
    margin-bottom: 3.5rem !important;
  }
  .mg-bottom05 {
    margin-bottom: 3rem !important;
  }
  .mg-bottom06 {
    margin-bottom: 2.5rem !important;
  }
  .mg-bottom07 {
    margin-bottom: 2rem !important;
  }
  .mg-bottom08,
  .mg-bottom09 {
    margin-bottom: 1.5rem !important;
  }
  .mg-bottom10 {
    margin-bottom: 1rem !important;
  }
}
/*---------- END MARGIN BOTTOM ----------*/
/*---------- START MARGIN LEFT ----------*/
.m-mg-left01 {
  margin-left: -0.1em;
}

.m-mg-left02 {
  margin-left: -0.2em;
}

.m-mg-left03 {
  margin-left: -0.3em;
}

.m-mg-left04 {
  margin-left: -0.4em;
}

.m-mg-left05 {
  margin-left: -0.5em;
}

.m-mg-left06,
.m-mg-left07 {
  margin-left: -0.6em;
}

.m-mg-left08 {
  margin-left: -0.8em;
}

.m-mg-left09 {
  margin-left: -0.9em;
}

.m-mg-left10 {
  margin-left: -1em;
}

/*---------- END MARGIN LEFT ----------*/
/*---------- START MARGIN RIGHT ----------*/
/*---------- END MARGIN RIGHT ----------*/
/*---------- START LAYOUT MARGIN RES ----------*/
.mg-layout01 {
  margin: 10rem 0 !important;
}

.mg-layout02 {
  margin: 9.5rem 0 10rem 0 !important;
}

.mg-layout03 {
  margin: 9.5rem 0 !important;
}

.mg-layout04 {
  margin: 9rem 0 9.5rem 0 !important;
}

.mg-layout05 {
  margin: 9rem 0 !important;
}

.mg-layout06 {
  margin: 8.5rem 0 9rem 0 !important;
}

.mg-layout07 {
  margin: 8.5rem 0 !important;
}

.mg-layout08 {
  margin: 8rem 0 8.5rem 0 !important;
}

.mg-layout09 {
  margin: 8rem 0 !important;
}

@media only screen and (max-width: 767px) {
  .mg-layout01 {
    margin: 5rem 0 !important;
  }
  .mg-layout02 {
    margin: 4.7rem 0 5rem 0 !important;
  }
  .mg-layout03 {
    margin: 4.7rem 0 !important;
  }
  .mg-layout04 {
    margin: 4.5rem 0 4.7rem 0 !important;
  }
  .mg-layout05 {
    margin: 4.5rem 0 !important;
  }
  .mg-layout06 {
    margin: 4.2rem 0 4.5rem 0 !important;
  }
  .mg-layout07 {
    margin: 4.2rem 0 !important;
  }
  .mg-layout08 {
    margin: 4rem 0 4.2rem 0 !important;
  }
  .mg-layout09 {
    margin: 4rem 0 !important;
  }
}
/*---------- END LAYOUT MARGIN RES ----------*/
/*---------- START MARGIN TOP BELOW PAGE VISUAL ----------*/
.pv-mg-top01 {
  margin-top: 7rem !important;
}

@media only screen and (max-width: 767px) {
  .pv-mg-top01 {
    margin-top: 4.5rem !important;
  }
}
/*---------- END MARGIN TOP BELOW PAGE VISUAL ----------*/
/*====================================================================================
23. END COMMON CUSTOM MARGIN.
====================================================================================*/
/*====================================================================================
24. START COMMON CUSTOM PADDING.
====================================================================================*/
/*---------- START TITLE PADDING TOP ----------*/
/*---------- END TITLE PADDING TOP ----------*/
/*---------- START TITLE PADDING BOTTOM ----------*/
/*---------- END TITLE PADDING BOTTOM ----------*/
/*---------- START TITLE PADDING LEFT ----------*/
/*---------- END TITLE PADDING LEFT ----------*/
/*---------- START TITLE PADDING RIGHT ----------*/
/*---------- END TITLE PADDING RIGHT ----------*/
/*---------- START TABLE PADDING TOP ----------*/
/*---------- END TABLE PADDING TOP ----------*/
/*---------- START TABLE PADDING BOTTOM ----------*/
/*---------- END TABLE PADDING BOTTOM ----------*/
/*---------- START TABLE PADDING LEFT ----------*/
.tbl-pd-left01 {
  padding-left: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .tbl-pd-left01 {
    padding-left: 1rem;
  }
}
/*---------- END TABLE PADDING LEFT ----------*/
/*---------- START TABLE PADDING RIGHT ----------*/
.tbl-pd-right01 {
  padding-right: 1.5rem;
}

@media only screen and (max-width: 767px) {
  .tbl-pd-right01 {
    padding-right: 1rem;
  }
}
/*---------- END TABLE PADDING RIGHT ----------*/
/*---------- START PADDING TOP ----------*/
.pd-top01 {
  padding-top: 10rem !important;
}

.pd-top02 {
  padding-top: 9rem !important;
}

.pd-top03 {
  padding-top: 8rem !important;
}

.pd-top04 {
  padding-top: 7rem !important;
}

.pd-top05 {
  padding-top: 6rem !important;
}

.pd-top06 {
  padding-top: 5rem !important;
}

.pd-top07 {
  padding-top: 4rem !important;
}

.pd-top08 {
  padding-top: 3rem !important;
}

.pd-top09,
.pd-top10 {
  padding-top: 2rem !important;
}

@media only screen and (max-width: 767px) {
  .pd-top01 {
    padding-top: 5rem !important;
  }
  .pd-top02 {
    padding-top: 4.5rem !important;
  }
  .pd-top03 {
    padding-top: 4rem !important;
  }
  .pd-top04 {
    padding-top: 3.5rem !important;
  }
  .pd-top05 {
    padding-top: 3rem !important;
  }
  .pd-top06 {
    padding-top: 2.5rem !important;
  }
  .pd-top07 {
    padding-top: 2rem !important;
  }
  .pd-top08,
  .pd-top09 {
    padding-top: 1.5rem !important;
  }
  .pd-top10 {
    padding-top: 1rem !important;
  }
}
/*---------- END PADDING TOP ----------*/
/*---------- START PADDING BOTTOM ----------*/
.pd-bottom01 {
  padding-bottom: 10rem !important;
}

.pd-bottom02 {
  padding-bottom: 9rem !important;
}

.pd-bottom03 {
  padding-bottom: 8rem !important;
}

.pd-bottom04 {
  padding-bottom: 7rem !important;
}

.pd-bottom05 {
  padding-bottom: 6rem !important;
}

.pd-bottom06 {
  padding-bottom: 5rem !important;
}

.pd-bottom07 {
  padding-bottom: 4rem !important;
}

.pd-bottom08 {
  padding-bottom: 3rem !important;
}

.pd-bottom09,
.pd-bottom10 {
  padding-bottom: 2rem !important;
}

@media only screen and (max-width: 767px) {
  .pd-bottom01 {
    padding-bottom: 5rem !important;
  }
  .pd-bottom02 {
    padding-bottom: 4.5rem !important;
  }
  .pd-bottom03 {
    padding-bottom: 4rem !important;
  }
  .pd-bottom04 {
    padding-bottom: 3.5rem !important;
  }
  .pd-bottom05 {
    padding-bottom: 3rem !important;
  }
  .pd-bottom06 {
    padding-bottom: 2.5rem !important;
  }
  .pd-bottom07 {
    padding-bottom: 2rem !important;
  }
  .pd-bottom08,
  .pd-bottom09 {
    padding-bottom: 1.5rem !important;
  }
  .pd-bottom10 {
    padding-bottom: 1rem !important;
  }
}
/*---------- END PADDING BOTTOM ----------*/
/*---------- START PADDING LEFT ----------*/
/*---------- END PADDING LEFT ----------*/
/*---------- START PADDING RIGHT ----------*/
/*---------- END PADDING RIGHT ----------*/
/*---------- START LAYOUT PADDING RES ----------*/
.pd-layout01 {
  padding: 10rem 0 !important;
}

.pd-layout02 {
  padding: 9.5rem 0 10rem 0 !important;
}

.pd-layout03 {
  padding: 9.5rem 0 !important;
}

.pd-layout04 {
  padding: 9rem 0 9.5rem 0 !important;
}

.pd-layout05 {
  padding: 9rem 0 !important;
}

.pd-layout06 {
  padding: 8.5rem 0 9rem 0 !important;
}

.pd-layout07 {
  padding: 8.5rem 0 !important;
}

.pd-layout08 {
  padding: 8rem 0 8.5rem 0 !important;
}

.pd-layout09 {
  padding: 8rem 0 !important;
}

.pd-layout10 {
  padding: 9.5rem 0 0 0 !important;
}

.pd-layout11 {
  padding: 0 0 10rem 0 !important;
}

.pd-layout13 {
  padding: 0 0 6rem 0 !important;
}

.pd-layout12 {
  padding: 6rem 0 6rem 0 !important;
}





@media only screen and (max-width: 767px) {
  .pd-layout01 {
    padding: 5rem 0 !important;
  }
  .pd-layout02 {
    padding: 4.7rem 0 5rem 0 !important;
  }
  .pd-layout03 {
    padding: 4.7rem 0 !important;
  }
  .pd-layout04 {
    padding: 4.5rem 0 4.7rem 0 !important;
  }
  .pd-layout05 {
    padding: 4.5rem 0 !important;
  }
  .pd-layout06 {
    padding: 4.2rem 0 4.5rem 0 !important;
  }
  .pd-layout07 {
    padding: 4.2rem 0 !important;
  }
  .pd-layout08 {
    padding: 4rem 0 4.2rem 0 !important;
  }
  .pd-layout09 {
    padding: 4rem 0 !important;
  }
  .pd-layout12 {
    padding: 3.5rem 0 3.5rem 0 !important;
  }
  
}
/*---------- END LAYOUT PADDING RES ----------*/
/*---------- START PADDING TOP BELOW PAGE VISUAL ----------*/
.pv-pd-top01 {
  padding-top: 7rem !important;
}

@media only screen and (max-width: 767px) {
  .pv-pd-top01 {
    padding-top: 4.5rem !important;
  }
}
/*---------- END PADDING TOP BELOW PAGE VISUAL ----------*/
/*====================================================================================
24. END COMMON CUSTOM PADDING.
====================================================================================*/
/*====================================================================================
25. START COMMON BANNER.
====================================================================================*/
/*---------- START BANNER MAIN ----------*/
.bnr-main {
  position: relative;
  overflow: hidden;
}

.bnr-main__figure img {
  width: 100%;
  transition: all 0.5s ease;
}

.bnr-main__wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  width: 100%;
}

.bnr-main__title {
  position: relative;
  padding-left: 4.5rem;
}
.bnr-main__title::before {
  position: absolute;
  content: "";
  top: 2.4rem;
  left: 0;
  width: 2.8rem;
  height: 1px;
  background-color: var(--color-white);
}

.bnr-main__title-en,
.bnr-main__title-ja {
  display: block;
  color: var(--color-white);
  line-height: 1.5;
  font-weight: 400;
}

.bnr-main__title-en {
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  font-family: var(--font-sorts-mill-goudy);
}

.bnr-main__title-ja {
  font-family: var(--font-zen-kaku-gothic-antique);
}

.bnr-main .btn-circle {
  right: 5rem;
}

@media only screen and (min-width: 768px) {
  .bnr-main:hover .bnr-main__figure img {
    transform: scale(1.08);
  }
  .bnr-main:hover .btn-circle::before {
    transform: scale(1);
  }
  .bnr-main:hover .btn-circle .arrow__out {
    left: 0;
    transition-delay: 0.2s;
  }
  .bnr-main:hover .btn-circle .arrow__in {
    left: 110%;
    transition-delay: 0.2s;
  }
}
@media only screen and (max-width: 767px) {
  .bnr-main {
    display: block;
  }
  .bnr-main__title {
    padding-left: 3rem;
  }
  .bnr-main__title::before {
    top: 1.6rem;
    width: 2rem;
  }
  .bnr-main__title-en {
    font-size: 2.5rem;
  }
  .bnr-main__title-ja {
    font-size: 1.4rem;
  }
  .bnr-main .btn-circle {
    right: 1.5rem;
  }
}
/*---------- END BANNER MAIN ----------*/
.cm-bnr .container {
  max-width: 128rem;
}

.cm-bnr__list {
  border-radius: 1rem;
  overflow: hidden;
}

@media only screen and (min-width: 576px) {
  .cm-bnr__list {
    display: flex;
  }
  .cm-bnr .bnr-main {
    width: 50%;
  }
}
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
25. END COMMON BANNER.
====================================================================================*/
/*====================================================================================
26. START COMMON.
====================================================================================*/
/*---------- START FULL HEIGHT ----------*/
.full-height {
  min-height: 100vh;
}

@media only screen and (max-width: 575px) {
  .full-height {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }
}
/*---------- END FULL HEIGHT ----------*/
input,
select,
optgroup,
option,
textarea {
  font-size: 1.6rem;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0.03em;
  font-family: var(--font-zen-kaku-gothic-antique);
  color: var(--color-black-third);
  background-color: var(--color-white);
}

.ios input,
.ios select,
.ios optgroup,
.ios option,
.ios textarea {
  font-size: 1.6rem;
}

input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
  width: 100%;
  height: 4.5rem;
  padding-left: 2rem;
  padding-right: 2rem;
  border: 1px solid var(--color-black-fifth);
}
input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=text]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=text]::placeholder, input[type=password]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder {
  opacity: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=tel]:focus {
  outline: none;
  border: 1px solid var(--color-brown-second);
}
input[type=number] {
  -moz-appearance: textfield;
}
input[type=number]:focus {
  outline: none;
  border: 1px solid var(--color-brown-second);
}
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.form-select {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 4.5rem;
}
.form-select select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.form-select select::-ms-expand {
  display: none;
}
.form-select:after {
  position: absolute;
  content: "▼";
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  color: var(--color-black-third);
  font-size: 1.3rem;
  pointer-events: none;
}

select {
  width: 100%;
  height: 4.5rem;
  padding-left: 2rem;
  padding-right: 3rem;
  color: #bfbfbf;
  background-image: none;
  border: 1px solid var(--color-black-fifth);
}
select:focus {
  outline: none;
  border: 1px solid var(--color-brown-second);
}
select option {
  color: var(--color-black-third);
}

textarea {
  resize: none;
  width: 100%;
  padding: 1rem 2rem;
  border: 1px solid var(--color-black-fifth);
}
textarea::-moz-placeholder {
  opacity: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
  opacity: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
}
textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea::placeholder {
  opacity: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
}
textarea:focus {
  outline: none;
  border: 1px solid var(--color-black-third);
}

@media only screen and (max-width: 767px) {
  input,
  select,
  optgroup,
  option,
  textarea {
    line-height: 1.7;
  }
  input[type=text], input[type=password], input[type=email], input[type=tel], input[type=number] {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=text]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=text]::-ms-input-placeholder, input[type=password]::-ms-input-placeholder, input[type=email]::-ms-input-placeholder, input[type=tel]::-ms-input-placeholder, input[type=number]::-ms-input-placeholder, input[type=text]::placeholder, input[type=password]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder {
    font-size: 1.4rem;
  }
  select {
    padding-left: 1rem;
    padding-right: 2.5rem;
  }
  textarea {
    padding: 1rem;
  }
  textarea::-moz-placeholder {
    font-size: 1.4rem;
    font-size: 1.4rem;
  }
  textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea:-ms-input-placeholder, textarea::-ms-input-placeholder, textarea::placeholder {
    font-size: 1.4rem;
  }
}
/*---------- START RADIO ----------*/
.rdo input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  display: none;
  background: transparent;
}
.rdo input[type=radio] + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-left: 3rem;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.rdo input[type=radio] + label::before, .rdo input[type=radio] + label::after {
  position: absolute;
  display: block;
  content: "";
  border-radius: 50%;
}
.rdo input[type=radio] + label::before {
  top: 0.3rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-black-fifth);
  background-color: var(--color-white);
}
.rdo input[type=radio] + label::after {
  z-index: 2;
  top: 0.7rem;
  left: 0.4rem;
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0;
  visibility: hidden;
  background-color: var(--color-brown-second);
}
.rdo input[type=radio]:checked + label::before {
  border-color: var(--color-brown-second);
}
.rdo input[type=radio]:checked + label::after {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 767px) {
  .rdo input[type=radio] + label::before {
    top: 0.1rem;
  }
  .rdo input[type=radio] + label::after {
    top: 0.5rem;
  }
}
/*---------- END RADIO ----------*/
/*---------- START CHECKBOX ----------*/
.chk input[type=checkbox] {
  display: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}
.chk input[type=checkbox] + label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding-left: 3rem;
  line-height: 1.6;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.chk input[type=checkbox] + label::before, .chk input[type=checkbox] + label::after {
  position: absolute;
  display: block;
  content: "";
}
.chk input[type=checkbox] + label::before {
  top: 0.4rem;
  left: 0;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--color-black-fifth);
  background-color: var(--color-white);
}
.chk input[type=checkbox] + label::after {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  top: 0.7rem;
  left: 0.7rem;
  width: 0.6rem;
  height: 1.1rem;
  border: solid var(--color-brown-second);
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(40deg);
}
.chk input[type=checkbox]:checked + label::before {
  border-color: var(--color-brown-second);
}
.chk input[type=checkbox]:checked + label::after {
  opacity: 1;
  visibility: visible;
}

@media only screen and (max-width: 767px) {
  .chk input[type=checkbox] + label {
    padding-left: 2.7rem;
  }
  .chk input[type=checkbox] + label::before {
    top: 0.15rem;
  }
  .chk input[type=checkbox] + label::after {
    top: 0.5rem;
  }
}
/*---------- END CHECKBOX ----------*/
/*---------- START  ----------*/
/*---------- END  ----------*/
/*====================================================================================
26. END COMMON.
====================================================================================*/
/*update 20240417*/
.bg-white {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
}

/*====================================================================================
Width
====================================================================================*/
.w-15 {
  width: 15rem !important;
  max-width: 100%;
}
.w-25 {
  width: 25rem !important;
  max-width: 100%;
}
.w-60 {
   width: 60rem !important;
   max-width: 100%;
}
.w-80 {
  width: 80rem !important;
  max-width: 100%;
}

.w-100p {
  width: 100% !important;
}

.maxWidthNone {
  max-width: none;
}

.minWidth100p {
  min-width: 100%;
}

.fw-bold {
  font-weight: bold !important;
}