@charset "UTF-8";
/*====================================================================================
1. START COMMON BASE.
====================================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --font-Montserrat: "Montserrat", serif;
  --co-pink: #ffa3ad;
  --co-brown: #726248;
  --co-brown_md: #a69983;
  --co-brown_light: #857255;
  --bg-pink: #ffa3ad;
  --bg-pink_md: #fcbbc1;
  --bg-pink_light: rgba(255, 163, 173, 0.5);
  --bg-brown: #726248;
  --bg-brown_md: #a69983;
  --bg-brown_light: #f7f5f2;
}

html {
  overflow-y: auto;
  font-size: 62.5%;
  line-height: 1.6;
}

:where(html:not(.sg-cms *)),
:where(figure:not(.sg-cms *)) {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Hiragino Kaku Gothic", "Yu Gothic", "Yu Gothic", "Yu Gothic", "YuGothic", "Meiryo", "Osaka", "MS PGothic", sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1.8;
  color: #000000;
}
body.lb-disable-scrolling {
  position: fixed;
  width: 100%;
}

@media only screen and (max-width: 47.9375em) {
  body {
    font-size: 1.4rem;
    line-height: 1.4;
  }
}
@media only screen and (max-width: 767px) {
  body img {
    width: auto;
    height: auto;
    max-width: 100%;
  }
}
#wrapper {
  position: relative;
  width: 100%;
  min-width: 32rem;
  height: 100%;
  overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  body {
    min-width: 119.9rem;
  }
  body #cm-header {
    width: 119.9rem;
  }
  body #wrapper {
    max-width: 119.9rem;
  }
}
.w-brall {
  word-break: break-all;
}

/* ---------- START ANCHORLINK ---------- */
a {
  text-decoration: underline;
  color: #4b3f2c;
  background-color: transparent;
}
a:hover, a:active, a:focus {
  outline: none;
}
a[href*="tel:"] {
  text-decoration: none;
  color: #000;
  cursor: default;
  pointer-events: none;
}

@media only screen and (min-width: 768px) {
  a {
    transition: all 0.3s ease;
  }
  a:hover {
    text-decoration: none;
    transition: all 0.3s ease;
  }
  a:hover img {
    opacity: 0.8;
  }
}
@media only screen and (max-width: 767px) {
  a[href*="tel:"] {
    cursor: pointer;
    pointer-events: auto;
  }
}
/*---------- START HOVER IMG  ----------*/
.ov-hover:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha( opacity=70)";
}

/* ----------  START code set ---------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6;
}

pre,
code,
kbd,
samp,
var,
.font_mono {
  font-size: 1.3rem;
  line-height: 1.6;
}

pre {
  box-sizing: border-box;
  width: 100%;
  padding: 10px;
  overflow-x: auto;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
}

img {
  margin: 0px;
  padding: 0px;
  vertical-align: top;
  border: 0px;
  transition: All 0.3s ease;
}

button {
  transition: all 0.3s ease;
}

input[type=submit], input[type=button] {
  transition: all 0.3s ease;
}

picture {
  display: block;
  line-height: 1.6;
}

figure {
  margin: 0;
  padding: 0;
}

.white-space_pre-wrap {
  display: -ms-grid;
  display: grid;
  width: 100%;
  white-space: pre-line;
}

/*====================================================================================
2. START COMMON CONTAINER.
====================================================================================*/
.container {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .container {
    max-width: 102rem;
    padding: 0 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 1.5rem;
  }
}
/*====================================================================================
3. START COMMON HEADER
====================================================================================*/
.lock-scroll {
  position: relative;
  height: 100%;
  overflow: hidden;
}

/*link_blank*/
.link_blank {
  position: relative;
}
.link_blank:after {
  content: "";
  width: 12px;
  height: 12px;
  margin-top: -3px;
  margin-left: 5px;
  background-image: url(../images/common_img/ico_blank_blue.svg);
  background-size: 100% auto;
  border: none;
}

/*---------- START PAGE UP ----------*/
#page-up {
  position: fixed;
  z-index: 9;
  right: 2%;
  bottom: 3.7rem;
  display: none;
}
#page-up .cm-arr--up {
  display: inline-block;
  width: auto;
  padding: 0.3rem;
  border: solid #ffffff;
  border-width: 0 0.2rem 0.2rem 0;
  transform: rotate(-135deg);
}
#page-up a {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  background: #111987;
  border: 1px solid #111987;
  transition: all 0.5s;
}
#page-up a span {
  width: 100%;
  text-align: center;
}
#page-up a:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  margin: auto;
  background: #ffffff;
  transition: all 0.5s;
}

@media only screen and (min-width: 768px) {
  #page-up a:hover {
    color: #111987;
  }
  #page-up a:hover:after {
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }
  #page-up a:hover:before {
    border-color: #ffffff;
  }
  #page-up a:hover .cm-arr--up {
    border: solid #111987;
    border-width: 0 0.2rem 0.2rem 0;
  }
}
@media only screen and (min-width: 768px) {
  #page-up {
    bottom: 19rem;
  }
  #page-up a {
    width: 6rem;
    height: 6rem;
  }
}
/*====================================================================================
5. START COMMON CSS
====================================================================================*/
#cm-main {
  margin-top: var(--headerH);
}

.a-absolute {
  position: absolute;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@media only screen and (min-width: 768px) {
  .pc {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}
.text_center {
  text-align: center;
}

/*====================================================================================
TEXT.
====================================================================================*/
/*---------- TEXT INDENT ----------*/
.c-text-indent {
  display: block;
  margin-left: 1em;
  text-indent: -1em;
}

/* ---------- TEXT ALIGN ---------- */
.u-text-center {
  text-align: center !important;
}

.u-text-left {
  text-align: left !important;
}

.u-text-right {
  text-align: right !important;
}

@media only screen and (max-width: 767px) {
  .u-center-max-md {
    text-align: center !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-center-min-md {
    text-align: center !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-right-min-md {
    text-align: right !important;
  }
}
/*------------------------------------------------------------------------------------
ITEM.
------------------------------------------------------------------------------------*/
/*---------- ITEM ----------*/
.c-item strong {
  color: #006eb6;
  font-weight: 600;
}

/*---------- ITEM DOT, CIRCLE, STAR ----------*/
.c-item-dot,
.c-item-circle,
.c-item-star {
  position: relative;
  display: inline-block;
}
.c-item-dot::before,
.c-item-circle::before,
.c-item-star::before {
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (max-width: 767px) {
  .c-item,
  .c-item-dot,
  .c-item-circle,
  .c-item-star {
    line-height: 1.7;
  }
}
/*---------- ITEM DOT ----------*/
.c-item-dot {
  padding-left: 1em;
}
.c-item-dot::before {
  content: "・";
}

/*---------- ITEM CIRCLE ----------*/
.c-item-circle {
  padding-left: 1.3em;
}
.c-item-circle::before {
  content: "●";
}

/*---------- ITEM STAR ----------*/
.c-item-star {
  padding-left: 1.3em;
}
.c-item-star::before {
  content: "※";
}

/*------------------------------------------------------------------------------------
LIST.
------------------------------------------------------------------------------------*/
/*---------- LIST ----------*/
.c-list .c-item:not(:first-child) {
  margin-top: 0.7rem;
}

/*---------- LIST INDENT ----------*/
.c-list-indent > li {
  display: block;
  margin-left: 1em;
  text-indent: -1em;
}

/*---------- ITEM INDENT ----------*/
.c-item-indent {
  display: block;
  margin-left: 1em;
  text-indent: -1em;
}

/*---------- ITEM INDENT STEP ----------*/
.c-item-indent-step {
  display: block;
  margin-left: 4.5em;
  text-indent: -4.5em;
}

/*---------- ITEM INDENT NUMBER ----------*/
.c-item-indent-num {
  display: block;
  margin-left: 2.5em;
  text-indent: -2.5em;
}

.c-item-indent-num2 {
  display: block;
  margin-left: 1.4em;
  text-indent: -1.4em;
}

/*---------- ITEM ROMAN ----------*/
.c-item-roman {
  display: block;
  margin-left: 3em;
  text-indent: -3em;
}
.c-item-roman .c-list-indent-num {
  margin-left: -0.6em;
}

/*---------- LIST INDENT ----------*/
.c-list-indent-num > li {
  display: block;
  margin-left: 2.5em;
  text-indent: -2.5em;
}

/*---------- LIST INDENT ----------*/
.c-list-indent-num2 > li {
  display: block;
  margin-left: 1.4em;
  text-indent: -1.4em;
}

/*---------- LIST INDENT ----------*/
.c-list-indent-num3 > li {
  display: block;
  margin-left: 1.6em;
  text-indent: -1.6em;
}

/*---------- LIST INDENT 2 ----------*/
.c-list-indent2 > li {
  display: block;
  margin-left: 3.7em;
  text-indent: -3.7em;
}

/*---------- LIST DOT, CIRCLE, STAR ----------*/
.c-list-dot--blue > li::before,
.c-list-circle--blue > li::before,
.c-list-star--blue > li::before {
  color: #006eb6;
}
.c-list-dot--orange > li::before,
.c-list-circle--orange > li::before,
.c-list-star--orange > li::before {
  color: #e48820;
}
.c-list-dot > li,
.c-list-circle > li,
.c-list-star > li {
  position: relative;
}
.c-list-dot > li::before,
.c-list-circle > li::before,
.c-list-star > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

@media only screen and (max-width: 767px) {
  .c-list-dot,
  .c-list-circle,
  .c-list-star {
    line-height: 1.7;
  }
}
/*---------- LIST DOT ----------*/
.c-list-dot > li {
  padding-left: 1em;
}
.c-list-dot > li::before {
  content: "・";
}

/*---------- LIST CIRCLE ----------*/
.c-list-circle > li {
  padding-left: 1.2em;
}
.c-list-circle > li::before {
  content: "●";
  transform: scale(0.6);
}

/*------------------------------------------------------------------------------------
MARGIN, PADDING.
------------------------------------------------------------------------------------*/
/* ---------- COMPONENT MARGIN MINUS X ----------*/
@media only screen and (min-width: 768px) {
  .u-component-mx-xs-pc {
    margin-inline: -2rem !important;
  }
}
/* ---------- COMPONENT MARGIN BOTTOM ----------*/
@media only screen and (max-width: 767px) {
  .u-component-mb-xxl {
    margin-bottom: 3rem !important;
  }
  .u-component-mb-xl {
    margin-bottom: 2.5rem !important;
  }
  .u-component-mb-lg {
    margin-bottom: 2.5rem !important;
  }
  .u-component-mb-md {
    margin-bottom: 2rem !important;
  }
  .u-component-mb-sm {
    margin-bottom: 1.5rem !important;
  }
  .u-component-mb-xs,
  .u-component-mb-xxs {
    margin-bottom: 1rem !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-component-mb-xxl {
    margin-bottom: 6rem !important;
  }
  .u-component-mb-xl {
    margin-bottom: 5rem !important;
  }
  .u-component-mb-lg {
    margin-bottom: 4.5rem !important;
  }
  .u-component-mb-md {
    margin-bottom: 4rem !important;
  }
  .u-component-mb-sm {
    margin-bottom: 3rem !important;
  }
  .u-component-mb-xs {
    margin-bottom: 2rem !important;
  }
  .u-component-mb-xxs {
    margin-bottom: 1.5rem !important;
  }
}
/* ---------- SECTION MARGIN BOTTOM ----------*/
@media only screen and (max-width: 767px) {
  .u-section-mb-xl {
    margin-bottom: 5rem !important;
  }
  .u-section-mb-lg {
    margin-bottom: 4.5rem !important;
  }
  .u-section-mb-md {
    margin-bottom: 4rem !important;
  }
  .u-section-mb-sm {
    margin-bottom: 3.5rem !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-section-mb-xl {
    margin-bottom: 10rem !important;
  }
  .u-section-mb-lg {
    margin-bottom: 9rem !important;
  }
  .u-section-mb-md {
    margin-bottom: 8rem !important;
  }
  .u-section-mb-sm {
    margin-bottom: 7rem !important;
  }
}
/* ---------- COMPONENT PADDING ----------*/
@media only screen and (max-width: 767px) {
  .u-section-p-xl {
    padding-block: 5rem !important;
  }
  .u-section-p-lg {
    padding-block: 4.5rem !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-section-p-xl {
    padding-block: 10rem !important;
  }
  .u-section-p-lg {
    padding-block: 9rem !important;
  }
}
/* ---------- COMPONENT PADDING TOP ----------*/
@media only screen and (max-width: 767px) {
  .u-section-pt-xl {
    padding-top: 5rem !important;
  }
  .u-section-pt-lg {
    padding-top: 4.5rem !important;
  }
  .u-section-pt-md {
    padding-top: 4rem !important;
  }
}
@media only screen and (min-width: 768px) {
  .u-section-pt-xl {
    padding-top: 10rem !important;
  }
  .u-section-pt-lg {
    padding-top: 9rem !important;
  }
  .u-section-pt-md {
    padding-top: 8rem !important;
  }
}
/*---------- COLOR ----------*/
.u-c-black {
  color: #000000 !important;
}

.u-c-blue {
  color: #111987 !important;
}

.u-c-blue2 {
  color: #006eb6 !important;
}

.u-c-red {
  color: #ff0000 !important;
}

.u-c-orange {
  color: #f53f00 !important;
}

/*---------- BACKGROUND COLOR ----------*/
.u-bg-000000 {
  background-color: #000000 !important;
}

.u-bg-4c4b4b {
  background-color: #4c4b4b !important;
}

.u-bg-b3acac {
  background-color: #b3acac !important;
}

.u-bg-0067d1 {
  background-color: #0067d1 !important;
}

.u-bg-0398b3 {
  background-color: #0398b3 !important;
}

.u-bg-00baff {
  background-color: #00baff !important;
}

.u-bg-6ec8ff {
  background-color: #6ec8ff !important;
}

.u-bg-bce5ff {
  background-color: #bce5ff !important;
}

.u-bg-e9f6fe {
  background-color: #e9f6fe !important;
}

.u-bg-e8f5fd {
  background-color: #e8f5fd !important;
}