@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Sawarabi+Mincho&family=Zen+Old+Mincho:wght@400;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,900;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap');


html {
  font-size: 62.5%;
}

#main {
  margin: 2.0rem auto;
  width: 98%;
  max-width: 1200px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.4rem;
  color: #707070;
}

#main * {
  box-sizing: border-box;
}

#main img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

#main a {
  transition: all 0.2s ease;
}

#main a:hover {
  opacity: 0.6;
}

#main .title {
  margin: 0;
  padding: 0;
  position: relative;
}

#main .title a {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.0;
  color: #fff;
  background-color: #A88B79;
  padding: 1.5rem 4.0rem;
  border: 0.43rem solid #A88B79;
  border-radius: 5rem;
  position: absolute;
  bottom: 5.0rem;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  transition: all 0.2s ease;
  word-break: keep-all;
  overflow-wrap: anywhere;

}

#main .title a:hover {
  color: #A88B79;
  background-color: #fff;
  opacity: 1;
}

@media screen and (max-width:768px) {
  #main .title a {
    font-size: 1.8rem;
    width: 85%;
    text-align: center;
  }
}



#main h2 {
  text-align: center;
  color: #707070;
  font-size: 1.6rem;
  font-weight: 400;
  margin: 10.0rem 0 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  width: 100%;
}

#main h2 strong {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 2.0rem;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#main .simulation {
  display: flex;
  flex-wrap: wrap;
  margin-top: 5.0rem;
  justify-content: space-around;
}

#main .simulation .preview {
  width: 49%;
  padding: 1.0rem;
  display: flex;
  flex-flow: column;
  justify-content: center;
  background-color: #F5F5F5;
  border-radius: 3.0rem;
}

#main .simulation .preview #sim_mat {
  width: 90%;
  margin: 1.0rem auto;
  border: solid 0.6rem;
  border-radius: 2.0rem;
  display: flex;
  justify-content: center;
  align-items: center;

  background: #fff;
  border-color: #fff;
}

#main .simulation .preview #sim_mat::after {
  content: "";
  display: block;
}

#main .simulation .preview .mat_size_1::after {
  padding-top: 65.5%;
}

#main .simulation .preview .mat_size_2::after {
  padding-top: 69.2%;
}

#main .simulation .preview .mat_size_3::after {
  padding-top: 62.5%;
}

#main .simulation .preview .mat_size_4::after {
  padding-top: 100%;
}

#main .simulation .preview .mat_size_5::after {
  padding-top: 66.6%;
}

#main .simulation .preview .mat_size_6::after {
  padding-top: 70%;
}

#main .simulation .preview .mat_size_7::after {
  padding-top: 75%;
}

#main .simulation .preview #sim_mat span {
  display: inline-block;
  color: #fff;
  background-color: #A88B79;
  font-size: 1.8rem;
  line-height: 1.0;
  font-weight: 700;
  padding: 1.0rem 2.0rem;
  border-radius: 10.0rem;
}

#main .simulation .preview #sim_detail {
  margin: 2.0rem 0 0 5%;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: 1.8rem;
  font-weight: 600;
}

#main .simulation .preview #sim_price {
  margin: 2.0rem 0 0 5%;
  font-size: 2.1rem;
  font-weight: 900;
  text-align: center;
}

#main .simulation .preview #sim_price strong {
  font-size: 3.6rem;
}

#main .simulation .preview>p {
  color: #A88B79;
  margin: 2.0rem 10%;
  font-size: 1.8rem;
  font-weight: 600;
}

#main .simulation .option {
  width: 49%;
  padding: 1.0rem;
}

#main .simulation .option h3 {
  margin: 5.0rem 0 0;
  font-size: 2.4rem;
  font-weight: 700;
  color: #707070;
}

#main .simulation .option h3:first-child {
  margin: 1.0rem 0 0;
}

#main .simulation .option h3 span {
  font-size: 1.8rem;
}

#main .simulation .option h3::before {
  content: attr(list);
  font-size: 1.6rem;
  line-height: 1.0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 1.0rem;
  background-color: #A88B79;
  border-radius: 50%;
  color: #fff;
}

#main .simulation .option input[type=radio] {
  display: none;
}

#main .simulation .option .sim_color {
  display: flex;
  flex-wrap: wrap;
}

#main .simulation .option .sim_color label {
  width: calc(100%/6 - 6%);
  margin: 1.0rem 3%;
  border: solid 1px #BCBCBC;
  border-radius: 50%;
}

#main .simulation .option .sim_color label::after {
  content: "";
  display: block;
  margin-top: 100%;
}

#main .simulation .option .sim_color input[type=radio]:checked+label {
  border: solid 4px #A88B79;
}

/* 糸 */
#main .simulation .option .sim_color #thread_color_1+label {
  background: #fff;
}

#main .simulation .option .sim_color #thread_color_2+label {
  background: #D1C8B7;
}

#main .simulation .option .sim_color #thread_color_3+label {
  background: #AC988B;
}

#main .simulation .option .sim_color #thread_color_4+label {
  background: #4B2F21;
}

#main .simulation .option .sim_color #thread_color_5+label {
  background: #CACACB;
}

#main .simulation .option .sim_color #thread_color_6+label {
  background: #6F6E6E;
}

#main .simulation .option .sim_color #thread_color_7+label {
  background: #B8CCDB;
}

#main .simulation .option .sim_color #thread_color_8+label {
  background: #5B657E;
}

#main .simulation .option .sim_color #thread_color_9+label {
  background: #D3BFCB;
}

#main .simulation .option .sim_color #thread_color_10+label {
  background: #A86B93;
}

#main .simulation .option .sim_color #thread_color_11+label {
  background: #D7DC9F;
}

#main .simulation .option .sim_color #thread_color_12+label {
  background: #C3CED1;
}

/* 縁 */
#main .simulation .option .sim_color #edge_color_1+label {
  background: #fff;
}

#main .simulation .option .sim_color #edge_color_2+label {
  background: #D1C8B7;
}

#main .simulation .option .sim_color #edge_color_3+label {
  background: #AC988B;
}

#main .simulation .option .sim_color #edge_color_4+label {
  background: #4B2F21;
}

#main .simulation .option .sim_color #edge_color_5+label {
  background: #CACACB;
}

#main .simulation .option .sim_color #edge_color_6+label {
  background: #6F6E6E;
}

#main .simulation .option .sim_color #edge_color_7+label {
  background: #B8CCDB;
}

#main .simulation .option .sim_color #edge_color_8+label {
  background: #5B657E;
}

#main .simulation .option .sim_color #edge_color_9+label {
  background: #D3BFCB;
}

#main .simulation .option .sim_color #edge_color_10+label {
  background: #A86B93;
}

#main .simulation .option .sim_color #edge_color_11+label {
  background: #D7DC9F;
}

#main .simulation .option .sim_color #edge_color_12+label {
  background: #000000;
}

#main .simulation .option .sim_height label {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.0;
  font-weight: 700;
  color: #707070;
  border: solid 1px #707070;
  padding: 1.5rem 2.5rem;
  border-radius: 5.0rem;
  margin: 2.0rem 0.7rem 0 0;
}

#main .simulation .option .sim_height input[type=radio]:checked+label {
  background-color: #A88B79;
  color: #fff;
  border: solid 1px #A88B79;
}

#main .simulation .option .sim_size label {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.0;
  font-weight: 700;
  color: #707070;
  border: solid 1px #707070;
  padding: 1.5rem 2.5rem;
  border-radius: 5.0rem;
  margin: 2.0rem 0.7rem 0 0;
}

#main .simulation .option .sim_size input[type=radio]:checked+label {
  background-color: #A88B79;
  color: #fff;
  border: solid 1px #A88B79;
}

#main .simulation .option .sim_anti label {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1.0;
  font-weight: 700;
  color: #707070;
  border: solid 1px #707070;
  padding: 1.5rem 2.5rem;
  border-radius: 5.0rem;
  margin: 2.0rem 0.7rem 0 0;
}

#main .simulation .option .sim_anti input[type=radio]:checked+label {
  background-color: #A88B79;
  color: #fff;
  border: solid 1px #A88B79;
}


@media screen and (max-width:768px) {
  #main .simulation .preview {
    width: 95%;
  }

  #main .simulation .option {
    width: 95%;
  }

}

#main .experience {
  background: #FAF5ED;
  padding: 1px 3% 5.0rem;
  margin: 5.0rem 0 0;
  display: flex;
  flex-wrap: wrap;
}

#main .experience>div {
  width: calc(100%/3 - 4%);
  margin: 4rem 2% 0;
}

#main .experience>div h3 {
  font-size: 2.0rem;
  font-weight: 900;
  text-align: center;
  margin: 2.0rem 0 0;
}

#main .experience>div p {
  margin: 2.0rem 0 0;
}

@media screen and (max-width:768px) {
  #main .experience>div h3 {
    font-size: 1.4rem;
    word-break: keep-all;
    overflow-wrap: break-word;

  }

  #main .experience>div {
    width: calc(100%/2 - 4%);
  }
}

#main .color {
  display: flex;
  flex-wrap: wrap;
}

#main .color>div {
  width: calc(100%/3 - 4%);
  margin: 4rem 2% 0;
  background: url(om017.png);
  background-size: cover;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
  padding-bottom: 2rem;
}

#main .color>div>strong {
  display: block;
  margin: 3.0rem auto 0;
  width: 40%;
}

#main .color>div h3 {
  margin: 2.0rem 0 0;
  text-align: center;
  font-size: 1.2rem;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#main .color>div h3 strong {
  display: block;
  font-size: 2.4rem;
  font-weight: normal;
  font-family: "Zen Maru Gothic", sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}


#main .color>div>span {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
  margin: 2.0rem 0 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#main .color>div>p {
  display: block;
  font-size: 1.4rem;
  margin: 4.0rem auto;
  width: 70%;
}

#main .color>div::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: solid 3.0rem transparent;
  position: absolute;
  bottom: 0;
  right: 0;
}

@media screen and (max-width:768px) {
  #main .color>div h3 strong {
    font-size: 1.8rem;
  }

  #main .color>div>p {
    font-size: 1.2rem;
    width: 90%;
  }

}


#main .color>div:nth-of-type(1):after {
  border-right: solid 3.0rem #fff;
  border-bottom: solid 3.0rem #fff;
}

#main .color>div:nth-of-type(2):after {
  border-right: solid 3.0rem #D1C8B7;
  border-bottom: solid 3.0rem #D1C8B7;
}

#main .color>div:nth-of-type(3):after {
  border-right: solid 3.0rem #AC988B;
  border-bottom: solid 3.0rem #AC988B;
}

#main .color>div:nth-of-type(4):after {
  border-right: solid 3.0rem #4B2F21;
  border-bottom: solid 3.0rem #4B2F21;
}

#main .color>div:nth-of-type(5):after {
  border-right: solid 3.0rem #CACACB;
  border-bottom: solid 3.0rem #CACACB;
}

#main .color>div:nth-of-type(6):after {
  border-right: solid 3.0rem #6F6E6E;
  border-bottom: solid 3.0rem #6F6E6E;
}

#main .color>div:nth-of-type(7):after {
  border-right: solid 3.0rem #B8CCDB;
  border-bottom: solid 3.0rem #B8CCDB;
}

#main .color>div:nth-of-type(8):after {
  border-right: solid 3.0rem #5B657E;
  border-bottom: solid 3.0rem #5B657E;
}

#main .color>div:nth-of-type(9):after {
  border-right: solid 3.0rem #D3BFCB;
  border-bottom: solid 3.0rem #D3BFCB;
}

#main .color>div:nth-of-type(10):after {
  border-right: solid 3.0rem #A86B93;
  border-bottom: solid 3.0rem #A86B93;
}

#main .color>div:nth-of-type(11):after {
  border-right: solid 3.0rem #D7DC9F;
  border-bottom: solid 3.0rem #D7DC9F;
}

#main .color>div:nth-of-type(12):after {
  border-right: solid 3.0rem #C3CED1;
  border-bottom: solid 3.0rem #C3CED1;
}

@media screen and (max-width:768px) {
  #main .color>div {
    width: calc(100%/2 - 4%);
  }

}

#main .reception {
  margin: 5.0rem 0 0;
  background-color: #FAF5ED;
  padding: 1px 0 5rem;
}

#main .reception>div {
  margin: 2.0rem auto;
  border: solid 1px #fff;
  width: 80%;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

#main .reception>div div {
  width: 45%;
  padding: 2.0rem 0;
}

#main .reception>div div h3 {
  font-size: 2.0rem;
  font-weight: 900;
  position: relative;
  margin: 0;
  padding: 0;
}

#main .reception>div div h3::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #A88B79;
}

#main .reception>div div p {
  margin: 2.0rem 0.5rem 0;
  font-size: 1.6rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

#main .reception>div div ul {
  margin: 2.0rem 0 0;
  padding: 0;
}

#main .reception>div div ul li {
  list-style-type: none;
}

#main .reception>div div .map {
  width: 100%;
  margin: 2.0rem 0 0;
  position: relative;
}

#main .reception>div div .map::after {
  content: "";
  display: block;
  padding-top: 53%;
}

#main .reception>div div .map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:768px) {
  #main .reception>div div {
    width: 90%;
  }

  #main .reception>div div .map::after {
    padding-top: 100%;
  }

}




/* 
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Sawarabi Mincho', serif;
font-family: 'Zen Old Mincho', serif;
font-family: 'Noto Sans', sans-serif; 
font-family: "Zen Maru Gothic", sans-serif;

*/