* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: serif;
}

html {
  font-size: 100px;
}

body {
  /* font family Yu Gothic 游ゴシック体 */
  font-family: 'Yu Gothic', 'YuGothic', '游ゴシック体', '游ゴシック', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size: 0.24rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.1em;
  -webkit-tap-highlight-color: transparent;
  color: #282828;
  background-color: #fafafa;
}


h1, h2, h3, h4, h5, h6, figure {
  margin: 0;
  font-weight: 600;
}
p {
  margin: 0;
}

button {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}

figure img {
  width: 100%;
  max-width: 100%;
}

iframe, img {
  vertical-align: top;
  max-width: 100%;
}

ul, ol {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover, a:focus {
  text-decoration: none;
}

body.s-scroll-disabled {
  width: 100%;
  position: fixed;
  overflow: hidden;
}
@media screen and (max-width: 749px) {
  html {
    font-size: 12.82051282051282vw;
  }
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  body {
    font-size: 0.26rem;
  }
}

@media screen and (min-width: 780px), screen and (orientation: landscape) {
  body {
    font-size: 0.16rem;
  }
}

[v-cloak] {
  display: none;
}
.h-fntInter {
  font-family: 'Inter', sans-serif;
}
.c-header {
  top: 0.25rem;
  padding-left: 0.21rem;
  padding-right: 0.21rem;
  /* height: 0.21rem; */
  /* width: 2rem; */
  width: 13.6rem;
  max-width: 100%;
  margin: 0 auto;
  left: 0;
  right: 0;
  z-index: 9;
}
.c-header__logo {
  height: 0.21rem;
  width: 2rem;
}
/* layout */
.c-mainGrid {
  width: 13.6rem;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  /* grid-template-columns: 1fr 6.4rem; */
  grid-template-columns: 53% 47%;
  min-height: 100vh;
  
  /* grid-template-columns: repeat(2, 1fr); */
  
}

.c-mainGrid:first-child {
  padding-top: 0;
}
.c-mainGrid__col--first {
  background-color: #f5f5f5;
}
.c-mainGrid__col--second {
  width: 6.4rem;
  max-width: 100%;
  padding-left: 0.49rem;
  padding-right: 0.49rem;
  padding-top: 0.4rem;
  padding-bottom: 0.7rem;
  background-color: #ffffff;
}
.c-gridTwo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 0.2rem;
}

.c-gridFive {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 0.1rem;
}
.c-mainGrid__colFirstInner {
  top: 0;
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-mainGrid {
    display: block;
    padding-top: 0;
    padding-bottom: 0;
  }
  .c-mainGrid__col.c-mainGrid__col--first{
    
    top: 0;
    right: 0;
    width: 100%;
    z-index: 9;
    transform-origin: top right;
    transition: scale 0.3s ease, box-shadow 0.3s ease;
  }
  .c-mainGrid__col.c-mainGrid__col--first.s-sticky {
    scale: 0.5;
    
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2);
    z-index: 10;
  }
  .c-mainGrid__col--second {
    width: 100%;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    padding-top: 0.6rem;
    padding-bottom: 1rem;
    transition: padding-top 0.3s ease;
  }
  .c-mainGrid__col--second.s-sticky {
    padding-top: 1rem;
  }

  .c-pictureModeBtn {
    top: 0.1rem;
    left: 0.1rem;
    
    width: 0.75rem;
    height: 0.5rem;
    
    border-radius: 0.04rem;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2);

    background-color: #ffffff;
    background-image: url('../images/common/p-in-p.svg');
    background-size: 100% 100%;
    z-index: 11;
    cursor: pointer;
  }
  .c-dragHandle {
    inset: 0;

    cursor: move;
  }
  .c-gridFive {
    grid-gap: 0.2rem;
  }
  
  .c-gridFive.c-gridFour_sp {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.2rem;
  }
}

@media screen and (min-width: 780px) and (max-width: 899px),
       screen and (orientation: landscape) and (max-width: 899px) {
  .c-mainGrid__col--second {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    padding-top: 0.3rem;
  }
  .c-sectorTitle {
    font-size: 0.18rem!important;
  }
}

/* end layout */

.c-sectorTitle {
  font-size: 0.24rem;
  height: 0.62rem;
  line-height: 0.6rem;
  margin-bottom: 0.39rem;
  letter-spacing: 0.05em;
  border: 0.02rem solid #505050;
}
.c-sectorTitle__step {
  color: #ffffff;
  background-color: #14a195;
  font-size: 0.18rem;
  width: 1rem;
  font-weight: 500;
}
.c-sectorTitle__txt {
  padding-left: 0.21rem;
  padding-right: 0.21rem;
  flex: 1 0 auto;
}
/* c-mainImage */
.c-mainImage {
  /* padding-left: 0.2rem; */
  /* padding-right: 0.2rem; */

  /* padding-top: 0.4rem; */
  /* padding-bottom: 0.3rem; */
  /* min-height: 100vh; */
  background-color: #f5f5f5;
  /* position: sticky; */
  /* top: 0; */
}
.c-mainImage__image {
  /* zoom in cursor */
  cursor: zoom-in;
  /* remove late */
  /* width: 5.8rem; */
  /* max-width: 100%; */
  /* height: 5.8rem;
  max-width: 100%;
  width: auto; */
  width: 100%;
  aspect-ratio: 9/10;
  background-color: #515151;
  color: #ffffff;
  font-size: 0.3rem;
  display: block;
  object-fit: cover;
  overflow-clip-margin: unset;
  max-height: 100vh;
}
.c-mainImage__image.c-mainImage__image--canvas {
  cursor: default;
  background-color: #efefef;
  aspect-ratio: 1;
  height: 100%;
}
.c-mainImage figcaption {
  width: 5.6rem;
  max-width: 100%;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  

  /* position: absolute; */
  left: 0;
  right: 0;
  bottom: 0.2rem;
  margin: auto;
}


.c-mainImage__captionUpper {
  font-size: 0.13rem;
  grid-gap: 0.3rem;
  margin-bottom: 0.18rem;

  /* display: grid; */
  grid-template-columns: repeat(3, 1fr);
}
.c-mainImage__captionUpper.c-mainImage__captionUpper--2col {
  grid-template-columns: repeat(2, 1fr);
}
.c-mainImage__captionStat {
  border-bottom: 0.01rem solid #333333;
  padding-bottom: 0.02rem;
}
.c-mainImage__captionLower {
  font-size: 0.13rem;
}
@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-mainImage.c-mainImage--canvas {
    background-color: transparent;
  }
  .c-mainImage__captionStat label {
    margin-right: 0.07rem;
  }
  .c-mainImage figcaption.c-mainImage__info--outside {
    padding-top: 1.2em;
    padding-bottom: 1.2em;
  }
}


@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-mainImage {
    padding-left: 0rem;
    padding-right: 0rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    min-height: auto;

    grid-template-columns: repeat(2, 1fr);
  }
  .c-mainImage__zoom {
    width: 0.34rem;
    height: 0.34rem;
    top: 0.14rem;
    right: 0.14rem;
    pointer-events: none;
  }
  .c-mainImage__image {
    width: 100%;
    /* height: 5.2rem; */
    object-fit: cover;
    aspect-ratio: 13/12;
    order: 1;
  }
  .c-mainImage figcaption {
    width: auto;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    margin-top: 0.34rem;
  }
  .c-mainImage__captionStat {
    font-size: 0.2rem;
  }
  .c-mainImage__captionStat + .c-mainImage__captionStat {
    margin-top: 0.12rem;
  }
  .c-mainImage__captionStat label {
    color: #787878;
    font-size: 0.2rem;
  }
  .c-mainImage__captionUpper {
    margin-bottom: 0.22rem;
  }
  .c-mainImage__captionLower {
    font-size: 0.18rem;
    color: #787878;
  }

  .c-sectorTitle {
    height: 0.8rem;
    line-height: 0.72rem;
    border-width: 0.04rem;
    margin-bottom: 0.52rem;
  }
  .c-sectorTitle__step {
    width: 1.56rem;
    font-size: 0.24rem;
  }
  .c-sectorTitle__txt {
    font-size: 0.3rem;
  }
}
/* end c-mainImage */
/* c-orderNote */
.c-orderNote {
  font-size: 0.13rem;
}
.c-orderNote + .c-orderNote {
  margin-top: 0.08rem;
}
.c-orderNote__mark {
  /* height: 0.18rem; */
  /* width: 0.18rem; */
  margin-right: 0.03rem;
  /* background-image: url('../images/common/notice-mark.svg'); */
  /* background-size: 100% 100%; */
  /* vertical-align: top; */
}
.c-orderNote__mark:before {
  /* a bulet */
  /* content: "•"; */ /* this won't work in css */
  content: "\2022"; /* this is the unicode for a bullet */
}
.c-orderNote__text {
  line-height: 1.75;
  letter-spacing: 0;
  vertical-align: middle;
}

@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-orderNote.c-orderNote--outside {
    margin-top: -0.12rem;
    margin-bottom: 0.28rem;
  }
}

@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-orderNote {
    font-size: 0.2rem;
  }
  .c-orderNote + .c-orderNote {
    margin-top: 0;
  }
  .c-orderNote__mark {
    height: 0.28rem;
    width: 0.28rem;
  }
  .c-orderNote.c-orderNote--outside {
    margin-top: -0.12rem;
    margin-bottom: 0.38rem;
  }
}
/* end c-orderNote */

/* archetype section */
.c-archetype + .c-archetype {
  margin-top: 0.6rem;
}
.c-archetype__title {
  font-size: 0.18rem;
  margin-bottom: 0.21rem;
  border-bottom: 0.01rem solid #505050;
}
.c-archetype__notes {
  margin-top: 0.3rem;
}
.c-archetype__modalCallers {
  margin-top: 0.39rem;
}
.c-modalCaller {
  font-size: 0.16rem;
  color: #505050;
}
.c-modalCaller:before {
  content: "";
  display: inline-block;
  width: 0.05rem;
  height: 0.1rem;
  margin-right: 0.1rem;
  vertical-align: middle;
  background-image: url('../images/common/chev-right.svg');
  background-size: 100% 100%;
}
.c-modalCaller span {
  vertical-align: middle;
}
.c-modalCaller + .c-modalCaller {
  margin-left: 0.44rem;
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-archetype + .c-archetype {
    margin-top: 0.56rem;
  }
  .c-archetype__title {
    font-size: 0.26rem;
  }
  .c-archetype__notes {
    margin-top: 0.16rem;
  }
  .c-archetype__modalCallers {
    margin-top: 0.32rem;
  }
  .c-modalCaller {
    font-size: 0.26rem;
  }
  .c-modalCaller:before {
    width: 0.1rem;
    height: 0.17rem;
    margin-right: 0.18rem;
  }
  .c-modalCaller + .c-modalCaller {
    margin-left: 0.96rem;
  }
}
@media screen and (min-width: 780px) and (max-width: 899px),
       screen and (orientation: landscape) and (max-width: 899px) {
        .c-modalCaller {
          font-size: 0.13rem;
          
        }
        .c-modalCaller + .c-modalCaller {
          margin-left: 0.1rem;
        }
}
/* end archetype section */

/* btns CTA */
.c-btnCta {
  height: 0.4rem;
  width: 100%;
  line-height: 0.4rem;
  border-radius: 0.04rem;
  border: 0.01rem solid #e6e6e5;
  color: inherit;
}
.c-btnCta.c-btnCta--large {
  height: 0.6rem;
  line-height: 0.6rem;
}
.c-btnCta.active {
  background-color: #505050;
  border-color: transparent;
  color: white;
}
.c-squareBtn {
  font-size: 0.13rem;
  letter-spacing: 0;
  color: inherit
}

.c-squareBtn__main {
  border: 0.01rem solid #e6e6e5;
  background-color: #ffffff;
  border-radius: 0.04rem;
  margin-bottom: 0.04rem;
}
.c-squareBtn.c-squareBtn--wood .c-squareBtn__main {
  padding: 0.1rem;
}
.c-squareBtn.c-squareBtn--woodBig .c-squareBtn__main {
  padding: 0.07rem;
  aspect-ratio: 15/7;
}
.c-squareBtn.c-squareBtn--woodBig .c-squareBtn__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* .c-squareBtn__surface {
  inset: 0;
  
  background-size: 100% 100%;
  background-position: 0% 0;
} */

.c-squareBtn.active .c-squareBtn__main {
  border-color: transparent;
  background-color: #505050;
}


@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-btnCta {
    font-size: 0.13rem;
  }
  .c-btnCta.c-btnCta--large {
    font-size: 0.15rem;
  }
}

@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-squareBtn {
    font-size: 0.2rem;
  }
  .c-btnCta {
    font-size: 0.26rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .c-btnCta.c-btnCta--large {
    font-size: 0.28rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .c-squareBtn.c-squareBtn--wood .c-squareBtn__main {
    padding: 0.2rem;
  }
  .c-squareBtn.c-squareBtn--woodBig .c-squareBtn__main {
    padding: 0.2rem;
    aspect-ratio: 17/9;
  }
}
/* end btns CTA */

/* range input */
.c-rangeInput__input {
  height: 0.01rem;
  width: 4rem;
  background-color: #cccccc;
  appearance: none;
  -webkit-appearance: none;
}
.c-rangeInput__input:focus {
  outline: none;
  border: none
}
.c-rangeInput__input::-webkit-slider-thumb {
  width: 0.22rem;
  height: 0.22rem;
  background-color: #f2f2f2;
  border-radius: 50%;
  border: 0.02rem solid #505050;
  
  appearance: none;
  -webkit-appearance: none;
  
  anchor-name: --thumb;
}
.c-rangeInput__output {
  position-anchor: --thumb;
  position-area: top;
}
/* end range input */

/* c-selectBtn */
.c-selectBtn__select {
  font-size: 0.13rem;
  border-radius: 0.04rem;
  padding: 0 0.16rem;

  width: 100%;
  height: 0.5rem;
  appearance: none;
  border: 1px solid #505050;
  color: #000000;
  background-image: url('../images/common/arrow-down.svg');
  background-size: 0.12rem 0.06rem;
  background-repeat: no-repeat;
  background-position: right 0.09rem center;
}
.c-selectBtn__select:focus {
  outline: none;
}
@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-selectBtn__select {
    font-size: 0.13rem;
  }
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-selectBtn__select {
    font-size: 0.24rem;
    height: 0.8rem;
    background-size: 0.24rem 0.12rem;
    background-position: right 0.34rem center;
    border-radius: 0.08rem;
    background-color: #f5f5f5;
    padding-left: 0.38rem;
  }
}
/* end c-selectBtn */

/* c-accordion */
.c-accordionList >li {
  border-top: 0.01rem solid #505050;
}
.c-accordionList >li:last-child {
  border-bottom: 0.01rem solid #505050;
}
.c-accordion__title {
  font-size: 0.18rem;
  height: 0.6rem;
  line-height: 0.6rem;
  cursor: pointer;
}
.c-accordion__groupList {
  padding-top: 0.12rem;
}
.c-accordion__groupTitle {
  font-size: 0.14rem;
  margin-bottom: 0.14rem;
  letter-spacing: 0;
}
.c-accordion__groupList >li+li {
  margin-top: 0.3rem;
}
.c-accordion__content {
  padding-bottom: 0.4rem;
}
.c-accordion__icon {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  margin: auto;
  border: 0.01rem solid #cccccc;
}

.c-accordion__iconInner {
  width: 100%;
  height: 100%;
}
.c-accordion__iconInner:before,
.c-accordion__iconInner:after {
  content: '';
  display: block;
  position: absolute;
  width: 0.1rem;
  height: 0.01rem;
  background-color: #505050;
  margin: auto;
  inset: 0;
  transition: transform 0.3s linear;
}
.c-accordion__title:not(.is-open) .c-accordion__iconInner:after {
  transform: rotate(90deg);
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-accordion__groupTitle {
    font-size: 0.26rem;
    margin-bottom: 0.2rem;
  }
  
}
/* end c-accordion */

/* c-priceBox */
.c-priceBox {
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 90;
  max-width: 100%;
  /* width: 13.6rem; */
  /* width: 100%; */
  
  width: 6.4rem;
  margin-left: auto;
  /* display: grid; */
  /* grid-template-columns: 1fr 2rem; */
  height: 0.6rem;
  line-height: 0.6rem;
  color: #ffffff;
}
.c-priceBox__inner {
  /* width: 6.4rem; */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 2rem;
  height: 100%;
  /* to the right */
  /* margin-left: auto; */
}
.c-priceBox__price {
  font-size: 0.2rem;
  background-color: #505050;
  padding-right: 0.26rem;
}
.c-priceBox__confirmBtn {
  font-size: 0.16rem;
  color: #ffffff;
  background-color: #00A99D;
}
@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-priceBox {
    max-width: 100%;
    width: 13.6rem;
    margin-right: auto;
  }
  .c-priceBox__inner {
    width: 47%;
    margin-right: 0;
    margin-left: auto;
  }
  .c-priceBox__confirmBtn:before {
    content: '';
    width: 0.06rem;
    height: 0.12rem;
    right: 0.13rem;

    position: absolute;
    background-image: url('../images/common/chev-right-white.svg');
    background-size: 100% 100%;
    
    top: 0;
    bottom: 0;
    margin: auto;
  }
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-priceBox {
    left: 0;
    right: 0;
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    
    margin: 0;
  }
  .c-priceBox__inner {
    grid-template-columns: 0.8rem 1fr 3.2rem;
  }
  .c-priceBox__homeBtn {
    background-color: #1e1e1e;
    border-top-right-radius: 0.2rem;
  }
  .c-priceBox__homeBtn svg {
    width: 0.28rem;
    height: 0.28rem;
  }
  .c-priceBox__price {
    font-size: 0.36rem;
    padding-right: 0.16rem;
    border-top-left-radius: 0.2rem;
  }
  .c-priceBox__priceSymbol {
    font-size: 0.28rem;
    margin-right: -0.06rem;
  }
  .c-priceBox__confirmBtn {
    font-size: 0.28rem;
  }
  .c-confirmSpButtonGroup {
    width: 5.6rem;
  }
  .c-confirmSpBtn {
    color: #ffffff;
    border: 1px solid #ffffff;
    font-size: 0.28rem;
    border-radius: 0.5rem;
    padding: 0.26rem 0.4rem;
    line-height: 1.714285;
    position: relative;
  }
  .c-confirmSpBtn.c-confirmSpBtn--solid {
    border-color: #00aaa0;
    background-color: #00aaa0;
  }
  .c-confirmSpBtn.c-confirmSpBtn--solid:before {
    background-image: url('../images/common/pagearrows-white.svg');
    background-size: 100% 100%;
  }
  .c-confirmSpBtn + .c-confirmSpBtn {
    margin-top: 0.36rem;
  }
  .c-confirmSpBtn:before {
    content: '';
    display: block;
    position: absolute;
    width: 0.56rem;
    height: 0.56rem;
    background-image: url('../images/common/sp-pagearrows.png');
    background-size: 200% 100%;
    background-position: 100% 0%;
    right: 0.2rem;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .c-confirmSpText {
    margin-top: 0.36rem;
    text-indent: -1em;
    padding-left: 1em;
  }
}

/* end c-priceBox */

/* c-woodCombinationColors */
.c-woodCombination {
  position: sticky;
  top: 0;
  background-color: #ffffff;
}
.c-woodCombinationColors__main,
.c-woodCombinationColors__color {
  aspect-ratio: 72/37;
}
.c-woodCombinationColors__main img ,
.c-woodCombinationColors__color img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-woodCombinationColors figcaption {
  padding-left: 1em;
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-woodCombinationColors__main,
  .c-woodCombinationColors__color {
    aspect-ratio: 39/35;
  }
}
/* end c-woodCombinationColors */

/* c-tableCanvas */
.c-tableCanvas {
  width: 100%;
  background-size: 100% 100%;
  position: sticky;
  top: 0;
  aspect-ratio: 9/10;
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-tableCanvas {
    height: 7rem;
    background-size: contain;
    background-position: center;
    object-fit: contain;
  }
}
@media screen and (min-width: 780px) and (max-height: 700px) {
  .c-canvasWrapper {
    height: 100vh;
    display: flex;
    
    justify-content: center;
  }
  .c-tableCanvas {
    height: 100%;
    width: auto;
  }
}
/* end c-tableCanvas */

/* c-confirmScreen */
.c-confirmScreen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.6rem;
  
}
.c-confirmScreen__main {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
}
.c-confirmScreen__mainInner {
  width: 6.4rem;
  max-width: 100%;
  margin: 0 auto;
}
.c-confirmTitle {
  font-size: 0.24rem;
}
.c-confirmBlock {
  padding-bottom: 0.4rem;
}
.c-confirmBlock__title {
  font-size: 0.18rem;
  height: 0.5rem;
  line-height: 0.48rem;
  border: 0.02rem solid #505050;
  margin-bottom: 0.2rem;
}
.c-confirmBlock__info {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  grid-gap: 0.2rem;
}
.c-confirmBlock__infoTable {
  font-size: 0.14rem;
}
.c-confirmBlock__infoTable >li {
  border-bottom: 0.01rem solid #e6e6e6;
  padding-top: 0.21rem;
  padding-bottom: 0.03rem;
}
.c-confirmBlock__infoTable >li:first-child {
  border-top: 0.01rem solid #e6e6e6;
}
.c-confirmToFix {
  border-top: 0.01rem solid #000000;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.c-confirmBtn {
  width: 3rem;
  height: 0.5rem;
  line-height: 0.5rem;
  font-size: 0.16rem;
  color: #ffffff;
  background-color: #505050;
  border-radius: 0.5rem;
  margin: 0 auto
}
.c-confirmBtn.c-confirmBtn--borderedWhite {
  background-color: transparent;
  color: #ffffff;
  border: 0.01rem solid #ffffff;
}
.c-confirmBtn.c-confirmBtn--magenta {
  background-color: #00a99d;
}
.c-confirmBtn.c-confirmBtn--white {
  width: 2.4rem;
  height: 0.6rem;
  font-size: 0.16rem;
  line-height: 0.58rem;
  background-color: #ffffff;
  color: #505050;
  border: 0.01rem solid #505050;
}
.c-confirmBtn.c-confirmBtn--white.c-confirmBtn--white02 {
  width: 2rem;
}
.c-confirmScreen__side {
  background-color: #505050;
  color: #ffffff;
}
.c-confirmPrice {
  padding-bottom: 0.9rem;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  
}
.c-confirmPriceTag {
  width: 3.6rem;
  margin-bottom: 0.4rem;
  max-width: 100%;
  align-items: baseline;
  border-bottom: 0.01rem solid #a0a0a0;
}
.c-confirmPriceTag__label {
  font-size: 0.14rem;
}
.c-confirmPriceTag__value {
  font-size: 0.32rem;
  flex: 1 0 auto;
}
.c-confirmPriceTag__value small {
  font-size: 0.14rem;
}
.c-confirmReturnBtn {
  margin-bottom: 1em;
}
.c-confirmPriceBtn {
  margin-bottom: 2em;
}
.c-confirmPriceTxt {
  margin-bottom: 0.8rem;
}
.c-docDownload {
  font-size: 0.16rem;
  line-height: 1;
  color: #ffffff
}
.c-docDownload__icon {
  vertical-align: middle;
  width: 0.32rem;
  height: 0.32rem;
  background-image: url('../images/common/download-mark.svg');
  background-size: 100% 100%;
}
.c-docDownload__txt {
  vertical-align: middle;
}

@media screen and (min-width: 780px) and (max-width: 999px) {
  .c-confirmBlock__info {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-confirmScreen {
    min-height: 100vh;
  }
}

@media screen and (min-width: 780px) and (max-width: 899px),
       screen and (orientation: landscape) and (max-width: 899px) {
  .c-confirmScreen {
    grid-template-columns: 50% 50%;
  }
}

@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-confirmScreen {
    display: block;
  }
  .c-confirmScreen__main {
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    padding-top: 0.52rem;
  }
  .c-confirmScreen__mainInner {
    width: 100%;
  }
  .c-confirmTitle {
    font-size: 0.36rem;
    margin-bottom: 0.42rem;
  }
  .c-confirmBlock {
    padding-bottom: 0.8rem;
  }
  .c-confirmBlock__infoTable >li {
    padding-top: 0.48rem;
    padding-bottom: 0.04rem;
    padding-left: 0.06rem;
  }
  .c-confirmBlock.c-confirmBlock--sp-last {
    padding-bottom: 1.98rem;
  }
  .c-confirmBlock__title {
    font-size: 0.3rem;
    height: 1rem;
    line-height: 1rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    margin-bottom: 0.4rem;
  }
  .c-confirmBlock__info {
    display: block;
  }
  .c-confirmBlock__infoTable {
    font-size: 0.26rem;
  }
  .c-confirmBlock__infoImage {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0.5rem;
  }
  .c-confirmBlock__infoImage figcaption {
    letter-spacing: 0.04em;
    padding: 0 0.38rem;
  }
  .c-confirmBlock__infoImage figcaption h4 {
    font-size: 0.22rem;
    margin-bottom: 0.14rem;
  }
  .c-confirmBlock__infoImage figcaption p {
    font-size: 0.3rem;
  }
  .c-confirm__value {
    font-size: 0.26rem;
  }
  .c-confirmScreen__side {
    padding-top: 0.82rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .c-confirmPrice {
    padding-bottom: 1.8rem;
  }
  .c-confirmPriceTag {
    width: 100%;
    margin-bottom: 1rem;
  }
  .c-confirmPriceTag__label {
    font-size: 0.26rem;
  }
  .c-confirmPriceTag__value {
    font-size: 0.58rem;
  }
  .c-confirmPriceTag__value small {
    font-size: 0.26rem;
  }
  .c-docDownload {
    font-size: 0.26rem;
    margin-top: 0.64rem;
    width: 5.6rem;
  }
  .c-docDownload__icon {
    width: 0.6rem;
    height: 0.6rem;
  }
  .c-confirmBtn.c-confirmBtn--white {
    width: 4rem;
    height: 1rem;
    line-height: 0.98rem;
    font-size: 0.28rem;
  }
  .c-confirmBtn.c-confirmBtn--white.c-confirmBtn--white02 {
    width: 3.6rem;
  }
}
/* end c-confirmScreen */

/* c-modal */
.c-modal {
  inset: 0;
  z-index: 999;
  overflow: auto;
}
.c-modal__cloak {
  inset: 0;
  background-color: rgba(40, 40, 40, 0.85);
  z-index: 2;
}
.c-modal__inner {
  width: 5.6rem;
  max-height: 100svh;
  z-index: 3;
  padding: 0.2rem 0;
}
.c-modal__inner.c-modal__inner--image {
  width: 80%;
  height: 100%;
  padding: 0.2rem;
  overflow: auto;
}
.c-modal__x {
  width: 0.3rem;
  height: 0.3rem;
  background-image: url('../images/common/modal-x.png');
  background-size: 100% 100%;
  top: 0.1rem;
  right: 0.1rem;
}
.c-modal__x.c-modal__x--image {
  top: 0.2rem;
  right: 0.2rem;
  z-index: 4;
}
.c-modalCard {
  background-color: #ffffff;
}
.c-modalCard__info {
  padding: 0.43rem 0.42rem 0.6rem;
}
.c-modalCard__info.c-modalCard__info--legs {
  letter-spacing: 0;
}
.c-modalCard__info.c-modalCard__info--legs p + p {
  margin-top: 0.31rem;
}
.c-modalCard__info.c-modalCard__info--legs img {
  margin-top: 0.12rem;
}
.c-modalCard__title {
  font-size: 0.24rem;
  margin-bottom: 0.22rem;
}
.c-modalCard__title.c-modalCard__title--legs {
  margin-bottom: 0.24rem;
}
.c-modalCard__button {
  margin-top: 0.53rem;
}


@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-modal__inner {
    width: 100%;
    padding: 0.4rem;
    overflow: auto;
  }
  .c-modal__x {
    width: 0.6rem;
    height: 0.6rem;
    top: 0.13rem;
    right: 0.13rem;
  }
  .c-modalCard__title {
    font-size: 0.36rem;
  }
  .c-modal__inner.c-modal__inner--image {
    padding: 0;
  }
  .c-modalCard__info.c-modalCard__info--legs {
    font-size: 0.28rem;
    padding-top: 0.5rem;
    padding-bottom: 0.82rem;
    letter-spacing: 0;
  }
  .c-modalCard__info.c-modalCard__info--legs p + p {
    margin-top: 0.56rem;
  }
  .c-modalCard__info.c-modalCard__info--legs img {
    margin-top: 0.08rem;
  }
  .c-modalCard__title.c-modalCard__title--legs {
    font-size: 0.4rem;
    margin-bottom: 0.28rem;
  }
  .c-modalCard__button {
    margin-top: 0.88rem;
  }
}
@media screen and (min-width: 780px) and (max-width: 899px),
       screen and (orientation: landscape) and (max-width: 899px) {
        .c-modal__inner {
          zoom: 0.8;
        }
}

/* end c-modal */

/* c-modalGallery */
.c-modalGallery {
  width: 100%;
}
.c-modalGallery__item {
  width: 100%;
}
.c-modalGallery__item + .c-modalGallery__item  {
  margin-top: 0.2rem;
}
.c-modalGallery__item img {
  width: 100%;
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-modalGallery {
    width: 100%;
  }
}
/* end c-modalGallery */
#confirmUrl {
  display: none;
}

/* c-spPageChanger */
.c-spPageChanger {
  margin-top: 1.08rem;
  /* display: grid; */
  grid-template-columns: 2.2rem 2.2rem;
  justify-content: space-between;
  /* padding-left: 0rem; */
  /* padding-right: 0rem; */
}
.c-spPageChanger__btn {
  height: 1rem;
  line-height: 1rem;
  font-size: 0.26rem;
  border-radius: 0.5rem;
  border: 1px solid #505050;
  font-weight: 600;
  padding-left: 0.52rem;
  padding-right: 0.5rem;
  color: #505050;
}
.c-spPageChanger__btn.c-spPageChanger__btn--darkbg {
  border-color: #ffffff;
  color: #ffffff
}
.c-spPageChanger__btn:before {
  content: "";
  display: block;
  position: absolute;
  width: 0.56rem;
  height: 0.56rem;
  background-image: url('../images/common/sp-pagearrows.png');
  background-size: 200% 100%;
  background-position: 100% 0;
  right: 0.2rem;
  top: 0;
  bottom: 0;
  margin: auto;
}
.c-spPageChanger__btn.c-spPageChanger__btn--prev {
  text-align: right;
  padding-left: 0.8rem;
}
.c-spPageChanger__btn.c-spPageChanger__btn--prev:before {
  background-position: 0 0;
  right: auto;
  left: 0.2rem;
}
.c-spPageChanger__btn.c-spPageChanger__btn--confirm {
  width: 4.2rem;
  background-color: #00aaa0;
  color: #ffffff;
  border-color: #00aaa0;
  padding-left: 0.96rem;
}
.c-spPageChanger__btn.c-spPageChanger__btn--confirm:before {
  background-position: 0 0;
  transform: rotateY(180deg);
}
.c-spPageChanger__btn.c-spPageChanger__btn--confirmPrev {
  width: 2.2rem;
}

.c-pageIndicators {
  margin-top: 0.44rem;
}
.c-pageIndicator {
  /* width: 0.16rem;
  height: 0.16rem;
  margin: 0 0.22rem;
  border-radius: 50%;
  background-color: #cccccc;
  position: relative; */
  width: 0.2rem;
  height: 0.23rem;
  line-height: 0.11rem;
  margin: 0 0.05rem;
  color: #b3b3b3;
  border: 1px solid transparent;
  cursor: pointer;
}
.c-pageIndicator.s-active {
  color: #505050;
  border-bottom-color: #505050;
}


@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-spPageChanger {
    margin-top: 0.59rem;
    grid-template-columns: 1.4rem 1.4rem;
    /* and spread the columns to both end */
    /* justify-content: space-between; */
  }
  .c-spPageChanger__btn {
    height: 0.6rem;
    font-size: 0.16rem;
    line-height: 0.6rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  
  .c-spPageChanger__btn:before {
    width: 0.4rem;
    height: 0.4rem;
    right: 0.08rem;
  }
  .c-spPageChanger__btn.c-spPageChanger__btn--prev {
    padding-left: 0.4rem;
  }
  .c-spPageChanger__btn.c-spPageChanger__btn--prev:before {
    left: 0.08rem;
  }
  .c-spPageChanger__btn.c-spPageChanger__btn--confirm {
    width: 2.2rem;
    padding-right: 0.6rem;
    padding-left: 0.4rem;
  }
  .c-spPageChanger__btn.c-spPageChanger__btn--confirm:before {
    background-position: 0 0;
    transform: rotateY(180deg);
  }
  .c-spPageChanger__btn.c-spPageChanger__btn--confirmPrev {
    width: 1.4rem;
  }
  .c-pageIndicators {
    margin-top: 0.24rem;
    margin-bottom: 0.44rem;
  }
}
@media screen and (min-width: 780px) and (max-width: 899px),
       screen and (orientation: landscape) and (max-width: 899px) {
        .c-spPageChanger {
          grid-template-columns: 1.2rem 1.2rem;
        }
        .c-spPageChanger__btn {
          font-size: 0.13rem;
          height: 0.4rem;
          line-height: 0.4rem;
        }
        .c-spPageChanger__btn:before {
          width: 0.3rem;
          height: 0.3rem;
          right: 0.05rem;
        }
        .c-spPageChanger__btn.c-spPageChanger__btn--prev:before {
          left: 0.05rem
        }
        .c-spPageChanger__btn.c-spPageChanger__btn--confirmPrev {
          width: 1.2rem;
        }
        .c-spPageChanger__btn.c-spPageChanger__btn--confirm {
          width: 1.8rem;
          padding-left: 0.2rem;
        }
}
@media screen and (max-width: 779px) and (orientation: portrait) {
  .c-pageIndicators {
    margin-bottom: 1.4rem;
  }
  .c-pageIndicator {
    width: 0.4rem;
    height: 0.4rem;
    line-height: 0.22rem;
    margin: 0 0.1rem;
  }
}
/* end c-spPageChanger */

/* c-modalCard__info--wood */
.c-modalCard__info.c-modalCard__info--wood {
  padding-top: 0.62rem;
}
.c-modalCard__title.c-modalCard__title--wood {
  margin-bottom: 0.54rem;
}
.c-modalWoodList >li + li {
  margin-top: 0.76rem;
}
.c-modalWoodList__image {
  margin-bottom: 0.3rem;
}
.c-modalWoodList__name {
  font-size: 0.3rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
}
/* end c-modalCard__info--wood */

/* c-appSplashScreen */
.c-appSplashScreen {
  height: 100vh;
  
  background-image: url('../images/common/top_splash.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.c-appSplashScreen__inner {
  
  max-width: 100%;
  height: 100%;
}
.c-appSplashScreen__logo {
  /* margin-bottom: 6.4rem; */
  margin-bottom: 75.82222%;
  width: 4.8rem;
}
.c-appSplashScreen__logo img {
  width: 100%;
  height: auto;
}
.c-appSplashScreen__mainBtn {
  background-color: #ffffff;
  color: #1e1e1e;
  font-size: 0.28rem;
  width: 5.6rem;
  height: 1.2rem;
  line-height: 1.2rem;
  border-radius: 1.2rem;
}
@media screen and (min-width: 780px), screen and (orientation: landscape) {
  .c-appSplashScreen__inner {
    width: 6.4rem;
    margin-left: auto;
  }
  .c-appSplashScreen__logo {
    margin-bottom: 0.8rem;
    width: 2.4rem;
  }
  .c-appSplashScreen__mainBtn {
    font-size: 0.14rem;
    width: 2.8rem;
    height: 0.6rem;
    line-height: 0.6rem;
    border-radius: 0.6rem;
    
  }
}
/* end c-appSplashScreen */