@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-optical-sizing: auto;
  font-style: normal;
  /*
  -webkit-transform: rotate(0.02deg);
  transform: rotate(0.02deg);
  */
}
*:before, *:after {
  pointer-events: none;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  line-height: 1.8;
  position: relative;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  letter-spacing: -0.05em;
  font-feature-settings: "palt";
}

ul li {
  list-style: none;
}

table {
  border-collapse: collapse;
}

picture {
  display: block;
}
picture.caption {
  position: relative;
  z-index: 1;
}
picture.caption::before, picture.caption::after {
  color: #000;
  text-shadow: -1px 0 5px #FFF, 1px 0 5px #FFF, 0 -1px 5px #FFF, 0 1px 5px #FFF, -1px 0 5px #FFF, 1px 0 5px #FFF, 0 -1px 5px #FFF, 0 1px 5px #FFF;
  font-size: 1.1rem;
  font-weight: bold;
  position: absolute;
  bottom: 3px;
  letter-spacing: -0.015em;
}
@media screen and (max-width: 960px) {
  picture.caption::before, picture.caption::after {
    bottom: 7px;
    font-size: 1rem;
  }
}
picture.caption::before {
  content: attr(data-left);
  left: 6px;
}
picture.caption::after {
  content: attr(data-right);
  right: 6px;
}
picture.caption.blackshadow::before, picture.caption.blackshadow::after {
  color: #FFF;
  text-shadow: -1px 0 5px #000, 1px 0 5px #000, 0 -1px 5px #000, 0 1px 5px #000;
}
picture.caption.nonshadow::before, picture.caption.nonshadow::after {
  text-shadow: none !important;
}
picture.caption.nonshadowwhite::before, picture.caption.nonshadowwhite::after {
  color: #FFF;
  text-shadow: none !important;
}

img {
  vertical-align: bottom;
  max-width: 100%;
}

sup {
  font-size: 50%;
}

.pc,
.tb,
.sp {
  display: none;
}

@media screen and (min-width: 1423.2222222222px) {
  .pc {
    display: inline-block;
  }
}
@media screen and (min-width: 1001px) and (max-width: 1422.2222222222px) {
  .pc {
    display: inline-block;
  }
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .tb {
    display: inline-block;
  }
}
@media screen and (max-width: 960px) {
  .sp {
    display: inline-block;
  }
}
.large {
  font-size: 2.2rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 960px) {
  .large {
    font-size: 1.8rem;
  }
}

.medium {
  font-size: 1.6rem;
}

.small {
  font-size: 1.2rem;
}

.initBox,
.initBox2,
.initBox3 {
  margin: 0 auto;
  width: 90%;
  max-width: 1280px;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .initBox,
  .initBox2,
  .initBox3 {
    width: 95%;
  }
}
@media screen and (max-width: 960px) {
  .initBox,
  .initBox2,
  .initBox3 {
    width: 90%;
  }
}

.initBox2 {
  margin: 0 auto;
  width: 80%;
  max-width: 1024px;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .initBox2 {
    width: 95%;
  }
}
@media screen and (max-width: 960px) {
  .initBox2 {
    width: 90%;
  }
}

.initBox3 {
  margin: 0 auto;
  width: 80%;
  max-width: 1000px;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .initBox3 {
    width: 95%;
  }
}
@media screen and (max-width: 960px) {
  .initBox3 {
    width: 90%;
  }
}

.inlineBox {
  display: inline-block;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex.itemcenter {
  align-items: center;
}
.flex.left {
  justify-content: left;
  align-items: center;
}
.flex.left > *:not(:last-child) {
  margin-right: 1em;
}
.flex.center {
  justify-content: center;
}
.flex.center > * {
  margin-right: 0.5em;
  margin-left: 0.5em;
}
.flex.c2 > * {
  width: 48%;
  margin-bottom: 1rem;
}
.flex.c2 > *:nth-last-child(1), .flex.c2 > *:nth-last-child(2) {
  margin-bottom: 0;
}
.flex.c2 > *.wide {
  width: 100%;
}
.flex.c2max {
  flex-wrap: nowrap;
}
.flex.c2max > * {
  width: 50%;
}
.flex.c1-2 > *, .flex.c3 > * {
  width: 30%;
  margin-bottom: 1rem;
}
.flex.c1-2 > *:nth-last-child(1), .flex.c1-2 > *:nth-last-child(2), .flex.c1-2 > *:nth-last-child(3), .flex.c3 > *:nth-last-child(1), .flex.c3 > *:nth-last-child(2), .flex.c3 > *:nth-last-child(3) {
  margin-bottom: 0;
}
.flex.c3 > *.wide2 {
  width: 65%;
}
.flex.c1-2 > *:nth-child(2n+1) {
  width: 30%;
}
.flex.c1-2 > *:nth-child(2n) {
  width: 65%;
}
.flex.c2-1 > *:nth-child(2n+1) {
  width: 65%;
}
.flex.c2-1 > *:nth-child(2n) {
  width: 30%;
}
.flex.c4 > * {
  width: 22%;
  margin-bottom: 1rem;
}
.flex.c4 > *:nth-last-child(1), .flex.c4 > *:nth-last-child(2), .flex.c4 > *:nth-last-child(3), .flex.c4 > *:nth-last-child(4) {
  margin-bottom: 0;
}
@media screen and (max-width: 960px) {
  .flex.c2.spone, .flex.c3.spone, .flex.c1-2.spone, .flex.c2-1.spone, .flex.c4.spone {
    flex-wrap: wrap;
  }
  .flex.c2.spone > *, .flex.c3.spone > *, .flex.c1-2.spone > *, .flex.c2-1.spone > *, .flex.c4.spone > * {
    width: 100%;
  }
  .flex.c2.spone > *:not(:last-child), .flex.c3.spone > *:not(:last-child), .flex.c1-2.spone > *:not(:last-child), .flex.c2-1.spone > *:not(:last-child), .flex.c4.spone > *:not(:last-child) {
    margin-bottom: 1em;
  }
}

.grid {
  display: grid;
}
.grid.g2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid > *.wide2 {
  grid-column: span 2;
}

.mt0 {
  margin-top: 0;
}

.mt05 {
  margin-top: 0.5em;
}

.mt1 {
  margin-top: 1em;
}

.mt2 {
  margin-top: 2em;
}

.mt4 {
  margin-top: 4em;
}

.mb0 {
  margin-bottom: 0;
}

.mb05 {
  margin-bottom: 0.5em;
}

.mb1 {
  margin-bottom: 1em;
}

.mb2 {
  margin-bottom: 2em;
}

.mb4 {
  margin-bottom: 4em;
}

.mbL {
  margin-bottom: 7rem;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .mbL {
    margin-bottom: 4rem;
  }
}
@media screen and (max-width: 960px) {
  .mbL {
    margin-bottom: 4rem;
  }
}

.mpL {
  padding-bottom: 7rem;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .mpL {
    padding-bottom: 4rem;
  }
}
@media screen and (max-width: 960px) {
  .mpL {
    padding-bottom: 4rem;
  }
}

.mtM {
  margin-top: 4rem;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .mtM {
    margin-top: 2rem;
  }
}
@media screen and (max-width: 960px) {
  .mtM {
    margin-top: 2rem;
  }
}

.mbM {
  margin-bottom: 4rem;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .mbM {
    margin-bottom: 2rem;
  }
}
@media screen and (max-width: 960px) {
  .mbM {
    margin-bottom: 2rem;
  }
}

.mbS {
  margin-bottom: 1rem;
}
@media only screen and (min-width: 961px) and (max-width: 1000px) {
  .mbS {
    margin-bottom: 0.5rem;
  }
}
@media screen and (max-width: 960px) {
  .mbS {
    margin-bottom: 0.5rem;
  }
}

.maincolor {
  color: #391b09;
}

.subcolor1 {
  color: #8d7642;
}

.subcolor2 {
  color: yellow;
}

.subcolor3 {
  color: #5882a7;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.redcolor {
  color: #c60f28;
}

.cautionUl li {
  text-align: left;
  list-style: none;
  margin-left: 1em;
  text-indent: -1em;
}

a {
  transition: 0.5s;
}
a.tel {
  text-decoration: none;
  pointer-events: none;
  color: black;
}
@media screen and (max-width: 960px) {
  a.tel {
    text-decoration: underline;
    color: #8d7642;
    pointer-events: all;
  }
}

.ggmap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
@media screen and (max-width: 960px) {
  .ggmap {
    padding-bottom: 75%;
  }
}
.ggmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 960px) {
  .spscroll {
    position: relative;
    width: 100%;
    overflow-x: scroll;
  }
  .spscroll::before, .spscroll::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .spscroll::before {
    content: "";
    width: 7rem;
    height: 7rem;
    background: rgba(0, 0, 0, 0.75);
  }
  .spscroll::after {
    font-family: "Material Symbols Outlined";
    content: "\e9ec";
    vertical-align: middle;
    line-height: 1.6;
    font-size: 5rem;
    color: white;
    animation: spscrollicon_after ease-in 1s infinite;
  }
  .spscroll.isactive::before, .spscroll.isactive::after {
    animation: spscrollicon 1s forwards;
  }
}
@keyframes spscrollicon_after {
  0% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(20deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-20deg);
  }
}
@keyframes spscrollicon {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10;
}
.modal-overlay .modal-content {
  position: relative;
  max-width: 1920px;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6);
  transform: translateY(-3rem);
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.modal-overlay.active .modal-content {
  transform: translateY(0);
  opacity: 1;
}
.modal-overlay .modal-close {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-size: 1.5rem;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: color 0.5s;
  z-index: 9;
}
.modal-overlay .modal-close:hover {
  color: rgba(255, 255, 255, 0.8);
}

#select #selectsystems .title {
  background: #5882a7;
  color: white;
  text-align: center;
  padding: 1em 0;
}
#select #selectsystems .title > * {
  position: relative;
  display: inline-block;
}
#select #selectsystems .title > *::before {
  content: attr(data-title) "";
  font-size: 3rem;
  letter-spacing: 0;
  width: 12rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c60f28;
  color: white;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: -14rem;
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 960px) {
  #select #selectsystems .title > *::before {
    font-size: 1.6rem;
    width: 5rem;
    top: -1.5rem;
    left: -3.5rem;
  }
}
#select #selectsystems .title > *.paid::before {
  background: #cc8944;
}
#select #selectsystems .title > * h3 {
  line-height: 1.5;
}
#select #selectsystems .title > * h3 .small {
  margin-left: 1em;
}
@media screen and (max-width: 960px) {
  #select #selectsystems .title > * h3 .small {
    display: block;
    margin-left: 0;
    margin-bottom: 1em;
  }
}
#select #selectsystems .tabnav ul li a {
  display: block;
  border: 1px solid #b09b6d;
  color: #8d7642;
  text-decoration: none;
  padding: 0.75em 0;
  letter-spacing: 0.1em;
  font-size: 2rem;
  line-height: 1.25;
}
#select #selectsystems .tabnav ul li a:hover {
  background: #b09b6d;
  color: white !important;
}
#select #selectsystems .tabnav ul li a.active {
  background: #b09b6d;
  color: white !important;
  position: relative;
}
#select #selectsystems .tabnav ul li a.active::after {
  content: "";
  position: absolute;
  bottom: -1.5em;
  left: 50%;
  border: 0.75em solid transparent;
  border-top-color: #b09b6d;
  transform: translateX(-50%);
}
#select #selectsystems .tabdetail > * {
  display: none;
}
#select #selectsystems .tabdetail > *.active {
  display: block;
}
#select #selectsystems .tabdetail > * dl {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background: #b09b6d;
  color: white;
  padding: 0.5em 1em;
}
#select #selectsystems .tabdetail > * dl dt {
  font-size: 2rem;
}
#select #selectsystems .tabdetail > * dl dt .small {
  margin-left: 1em;
}
@media screen and (max-width: 960px) {
  #select #selectsystems .tabdetail > * dl dd {
    font-size: 1.4rem;
    text-align: left;
  }
}
#select #selectsystems .tabdetail #vintage dl {
  background: #583714;
}
#select #selectsystems .tabdetail #natural dl {
  background: #a58e5a;
}
#select #selectsystems .tabdetail #coolash dl {
  background: #868983;
}
#select #selectsystems .tabdetail #calmwhite dl {
  background: #9e8f7e;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(1) a {
  border-color: #583714;
  color: #583714;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(1) a:hover {
  background: #583714;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(1) a.active {
  background: #583714;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(1) a.active::after {
  border-top-color: #583714;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(2) a {
  border-color: #a58e5a;
  color: #a58e5a;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(2) a:hover {
  background: #a58e5a;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(2) a.active {
  background: #a58e5a;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(2) a.active::after {
  border-top-color: #a58e5a;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(3) a {
  border-color: #868983;
  color: #868983;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(3) a:hover {
  background: #868983;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(3) a.active {
  background: #868983;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(3) a.active::after {
  border-top-color: #868983;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(4) a {
  border-color: #9e8f7e;
  color: #9e8f7e;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(4) a:hover {
  background: #9e8f7e;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(4) a.active {
  background: #9e8f7e;
}
#select #selectsystems #colorselect .tabnav ul li:nth-child(4) a.active::after {
  border-top-color: #9e8f7e;
}
@media screen and (max-width: 960px) {
  #select #selectsystems #colorselect .tabnav ul {
    flex-wrap: wrap;
  }
  #select #selectsystems #colorselect .tabnav ul li {
    width: 48%;
    margin-bottom: 1em;
  }
  #select #selectsystems #colorselect .tabnav ul li a {
    font-size: 1.4rem;
  }
  #select #selectsystems #colorselect .tabnav ul li a.active::after {
    border-width: 0.5rem;
    border-top-color: white !important;
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    left: auto;
  }
}
#select #selectsystems #planselect .plandetail .flex.c2 {
  position: relative;
}
#select #selectsystems #planselect .plandetail .flex.c2 > * {
  width: 42%;
}
#select #selectsystems #planselect .plandetail .flex.c2::before, #select #selectsystems #planselect .plandetail .flex.c2::after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: contain;
}
#select #selectsystems #planselect .plandetail .flex.c2::before {
  background-image: url(../img/select/plan_next.png);
  width: 12.5%;
  aspect-ratio: 381/260;
  top: 50%;
  transform: translate(-50%, -50%);
}
#select #selectsystems #planselect .plandetail .flex.c2::after {
  background-image: url(../img/select/plan_f_direction.png);
  width: 2.34375%;
  aspect-ratio: 74/93;
  bottom: 0;
  transform: translateX(-50%);
}
#select #selectsystems #planselect .plandetail .plansub img {
  width: max(27%, 198px);
}
@media screen and (max-width: 960px) {
  #select #selectsystems #planselect .tabnav {
    width: 90%;
  }
  #select #selectsystems #planselect .tabnav li a {
    font-size: 1.4rem;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(1) a {
    border-color: #727171;
    color: #727171;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(1) a:hover {
    background: #727171;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(1) a.active {
    background: #727171;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(1) a.active::after {
    border-top-color: #727171;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(2) a {
    border-color: #43749e;
    color: #43749e;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(2) a:hover {
    background: #43749e;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(2) a.active {
    background: #43749e;
  }
  #select #selectsystems #planselect .tabnav li:nth-child(2) a.active::after {
    border-top-color: #43749e;
  }
  #select #selectsystems #planselect .plandetail .flex.c2 > * {
    display: none;
    width: 100%;
  }
  #select #selectsystems #planselect .plandetail .flex.c2 > *.active {
    display: block;
  }
  #select #selectsystems #planselect .plandetail .flex.c2::before {
    content: none;
  }
  #select #selectsystems #planselect .plandetail .flex.c2::after {
    width: 3.90625%;
    right: 0;
    left: auto;
  }
}
#select #selectsystems #otherselect h4 {
  border-top: 1px solid #cc8944;
  padding: 1em;
  font-size: 2.4rem;
  letter-spacing: 0;
  color: #cc8944;
  border-bottom: 1px solid #cc8944;
  margin-bottom: 1em;
}
#select #selectsystems #otherselect h4 .small {
  margin-left: 1em;
}
@media screen and (max-width: 960px) {
  #select #selectsystems #otherselect h4 .small {
    display: block;
    margin-left: 0;
  }
}
#select #selectsystems #otherselect .flex.c2 > * {
  border: 1px solid #cc8944;
}
#select #selectsystems #otherselect .flex.c2 > * h5 {
  background: #cc8944;
  color: white;
  font-size: 1.8rem;
  padding: 0.75em 0;
  line-height: 1.25;
}
@media screen and (max-width: 960px) {
  #select #selectsystems #otherselect .flex.c2 > * h5 {
    font-size: 1.6rem;
  }
}
#select #selectsystems #otherselect .flex.c2 > * ul {
  padding: 0.5em 0;
}
#select #selectsystems #otherselect .flex.c2 > * ul li {
  padding: 0.5em 0;
}/*# sourceMappingURL=select.css.map */