@charset "UTF-8";

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap');

/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}
body {
  min-height: 100%;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
main {
  display: block;
}
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
img,
picture {
  max-width: 100%;
  vertical-align: top;
}
svg,
img,
embed,
object,
iframe {
  vertical-align: top;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  border: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}
select::-ms-expand {
  display: none;
}
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}
[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}
button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}
label[for] {
  cursor: pointer;
}
hr {
  height: 0;
  margin: 0.8rem 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}
fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/*
 * HTML
 * -------------------------------------------------------------------
 */
html {
  font-size: 62.5%;
}
body {
  position: relative;
  line-height: 1.5;
  color: #333;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: normal;
  font-family: 'Noto Sans JP', YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mincho {
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
}
a {
  color: inherit;
  text-decoration: underline;
  transition: all 0.3s ease 0s;
}
a:hover {
  color: inherit;
  text-decoration: none;
  opacity: 0.5;
}
img[src$=".svg"] {
  width: 100%;
}

/*
 *  utility
 * ------------------------------------------------------------------- */
.wrap {
  max-width: 120rem;
  margin: 0 auto;
  padding: 0 3.5rem;
}
.inner {
  padding-left: 22.8rem;
}
.inner.both {
  padding-right: 22.8rem;
}
@media screen and (min-width: 768px) and (max-width: 1088px) {
}
/* display */
@media screen and (min-width:1280px) {
  .hide-pc-l {
    display: none;
  }
}
@media screen and (min-width:960px) {
  .hide-pc.show-tb {
    display: none;
  }
}
@media screen and (max-width:959px) {
  .hide-pc.show-tb {
    display: inline-block;
  }
}
@media screen and (min-width:768px) {
  .hide-pc {
    display: none;
  }
}
@media screen and (max-width:767px) {
  .hide-sp {
    display: none;
  }
}
/* btn */
.order__btn {
  display: inline-block;
  position: relative;
  min-width: 40rem;
  padding: 0.75em 1em 0.85em;
  border-radius: 2em;
  color: #fff !important;
  font-weight: bold;
  font-size: 2.4rem;
  text-align: center;
  text-decoration: none !important;
  background-color: #444444;
}
.order__btn::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 2.8rem;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  border-top: 0.2rem solid #fff;
  border-right: 0.2rem solid #fff;
  transform: rotate(45deg);
}
.border__btn {
  display: inline-block;
  position: relative;
  min-width: 25.3rem;
  padding: 0.95em 3.0em 1.1em 2.6em;
  border-radius: 2em;
  border: 1px solid #333;
  text-align: center;
  text-decoration: none !important;
}
.border__btn::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 1.4rem;
  bottom: 0;
  margin: auto;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  transform: rotate(45deg);
}
.link {
  display: inline-block;
  position: relative;
  padding-left: 1.8em;
}
.link::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
  transform: rotate(45deg);
}
/* heading */
.heading-a {
  margin-bottom: 6rem;
  line-height: 1.3;
  font-size: 6.8rem;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
.heading-b {
  margin-bottom: 7rem;
  line-height: 1.53;
  font-size: 6rem;
  font-weight: 500;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}
.heading-c {
  margin-top: 10rem;
  margin-bottom: 8.4rem;
  font-size: 4.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.heading-c.mb-s {
  margin-bottom: 4.5rem;
}
/* notes */
.notes {
  margin-top: 2.5em;
  padding-left: 1em;
  text-indent: -1em;
  font-size: 1.2rem;
}
.notes__list > div {
  display: flex;
  width: 100%;
  text-align: left;
}
.notes__list > div:not(:first-child) {
  margin-top: 1em;
}
.notes__list dt {
  flex-shrink: 0;
  margin-right: 0.5em;
}
.notes__list dd {
}
/* scroll-top */
.scroll-top {
	position: fixed;
	right: 4rem;
	bottom: 3rem;
	z-index: 2;
  width: 3.5rem;
	opacity: 0;
	visibility: hidden;
}
.scroll-top.js-scroll.is-active {
	animation: arrowmove 3s ease-in-out infinite;
}
.scroll-top.scroll-view:not(.is-hide) {
	opacity: 1;
	visibility: visible;
}
.scroll-top a {
  display: block;
  padding: 0 1rem;
}
@keyframes fadeInDown {
  0% {
    transform: translate3d(0, -3rem, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes arrowmove{
  0%{ transform: translate3d(0, 0, 0); }
  33%{ transform: translate3d(0, 1rem, 0); }
  66%{ transform: translate3d(0, 0, 0); }
}

/* header
 * ------------------------------------------------------------------- */
/* .l-header {
  position: relative;
  z-index: 100;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  opacity: 0;
}*/
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 7rem;
  background-color: rgba(255, 255, 255, 1);
  transition: all 0.4s ease 0s;
  opacity: 0;
}
.l-header .wrap {
  display: flex;
  align-items: center;
  max-width: none;
  height: 7rem;
  padding-right: 10.5rem;
}
.l-header.bg-opacity{
  background-color: rgba(255, 255, 255, 0.5);
}
.l-header.is-hide {
  top: -100%;
}
.l-header.is-back {
  top: 0 !important;
}
.is-pop-opend .l-header.front-header {
  top: -100% !important;
}
.is-pop-opend .l-header.back-header {
  top: 0 !important;
}
@media screen and (min-width: 1200px) {
 .l-header .wrap {
   padding-left: 3vw;
  }
}
.header__logo {
  width: 10.2rem;
  aspect-ratio: 102 / 27;
}
.header__brand__logo {
  width: 13.3rem;
  aspect-ratio: 133 / 34;
  margin-left: 4rem;
}
.header__brand__menu {
  display: flex;
  height: 100%;
  margin-left: auto;
}
.header__brand__menu > li {
  display: flex;
  position: relative;
}
.header__brand__menu > li:not(:first-child) {
  margin-left: 3em;
}
.header__brand__menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em 0;
  font-size: 2rem;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  text-decoration: none !important;
}
.header__brand__menu li a span {
  display: block;
  border-bottom: 1px solid transparent;
}
.header__brand__menu li a.current span {
  border-bottom-color: #333;
}
.header__menu {
  display: block;
  position: fixed;
  z-index: 101;
  top: 0.5rem;
  right: 2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 100%;
  cursor: pointer;
  /*background-color: #444;*/
  transition: opacity 0.3s ease 0s;
}
.header__menu:hover {
  opacity: 0.5;
}
.header__menu span{
  display: inline-block;
  position: absolute;
  left: 1rem;
  width: 3rem;
  height: 1px;
	background: #000;
  transition: all .4s;
}
.header__menu span:nth-of-type(1) {
	top: 2rem;
}
.header__menu span:nth-of-type(2) {
	top: 2.9rem;
}
.header__menu span:nth-of-type(3) {
	top: 3.8rem;
}
.header__menu.is-active span:nth-of-type(1) {
  top: 2.9rem;
  left: 1.7rem;
  width: 2.8rem;
  transform: rotate(-135deg);
}
.header__menu.is-active span:nth-of-type(2) {
	opacity: 0;
}
.header__menu.is-active span:nth-of-type(3){
  top: 2.9rem;
  left: 1.7rem;
  width: 2.8rem;
  transform: rotate(135deg);
}
/* l-nav */
.l-nav {
  position: fixed;
  z-index: -1;
  opacity: 0;
  top:0;
  width:100%;
  height: 100vh;
  padding-top: 6.9rem;
  background:#fff;
  transition: all 0.3s;
  visibility: hidden;
}
.l-nav.loading {
  display: none;
}
.l-nav.is-active {
	opacity: 1;
	z-index: 99;
  visibility: visible;
}
.l-nav .l-nav-block {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
}
.l-nav .l-nav-block::before,
.l-nav .l-nav-block::after {
  content: '';
  display: block;
  width: 100%;
  height: 5rem;
  flex-shrink: 0;
}
.l-nav .l-nav-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
  padding-top: 3rem;
}
.l-nav .site__logo {
  width: 20.3rem;
  margin: 0 auto 6rem;
}
.l-nav__list {
  text-align: center;
}
.l-nav__list li:not(:first-child) {
  margin-top: 1.6em;
}
.l-nav__list a {
  font-size: 1.8rem;
  text-decoration: none;
}
.l-nav__share {
  margin-top: 6rem;
}
.l-nav__share .share__heading {
  margin-bottom: 3.6rem;
  font-size: 1.8rem;
  text-align: center;
}
.l-nav__share .share__links li {
  width: 4rem;
}
.l-nav__share .share__links li:not(:first-child) {
  margin-left: 4rem;
}

/* footer
 * ------------------------------------------------------------------- */
.l-footer {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 5rem;
  font-family: YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
  background: #f1f2f1;
}
.l-footer .wrap {
  max-width: 144rem;
  padding: 0 2rem;
}
.l-footer a:hover {
  text-decoration: underline;
  opacity: 1;
}
/* footer__links */
.l-footer__links {
  padding-bottom: 2.5rem;
}
.l-footer__links p {
  margin-top: 0;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.l-footer__links .footer__links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0rem 2.5rem;
}
.footer__links__list li:not(:first-child) {
  margin-left: 2.5rem;
}
.footer__links__list li a {
  font-size: 1.8rem;
}
/* l-footer__bottom */
.l-footer__bottom {
  display: flex;
  padding-top: 2.5rem;
}
.l-footer__logo {
  margin-right: 2.5rem;
}
.l-footer__bottom__body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 128px);
  margin-top: -6px;
  gap: 8px 1.5rem;
  font-size: 1.4rem;
}
.l-footer__nav a {
  text-decoration: none;
}
.l-footer__nav a:not(:last-child) {
  margin-right: 1.5rem;
  position: relative;
}
.l-footer__nav a:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 17px;
  background-color: rgb(173, 173, 173);
  position: absolute;
  right: -1.5rem;
  top: 5px;
}
.l-footer__copyright {
  margin-top: 1.4rem;
  width: 100%;
  font-size: 12px;
}

/* main
* ------------------------------------------------------------------- */
.main__contents {
  position: relative;
  padding: 7rem 0 21rem;
}

/* mv
* ------------------------------------------------------------------- */
.mv {
  background-color: #fff;
}
.mv .wrap {
  position: relative;
  max-width: 160rem;
  padding: 0;
  overflow: hidden;
}
/*.mv .wrap::before {
  content: '';
  display: block;
  padding-top: 49.78%;
}*/
.mv__img__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.mv .mv__img {
  opacity: 0;
}
.mv .mv__box {
  position: absolute;
  top: 35%;
  left: 8.93%;
  z-index: 2;
  width: 42.75%;
}
.mv .mv__box .mv__title {
  opacity: 0;
}
.mv .mv__box p {
  margin-top: 1.5em;
  color: #fff;
  line-height: 1.68;
  font-size: 2.34vw;
  letter-spacing: 0.1em;
  text-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
  opacity: 0;
}

.mv {}
.mv .wrap {
  position: relative;
  max-width: 160rem;
  padding: 0;
}
.mv .mv__img{
  opacity: 0;
}

.mv__img {
  position: relative;
}
.mv__img::before {
  content: '';
  display: block;
  padding-top: 56.73%;
}
.mv__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.mv__slider__wrap {
  position: relative;
}
.mv__slider__bottom {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  bottom: -3.2rem;
  z-index: 10;
  padding-right: 0.5rem;
}
.mv .mv__box {
  position: absolute;
  top: 35%;
  left: 8.93%;
  z-index: 2;
  width: 42.75%;
}
.mv .mv__box .mv__title {
  opacity: 0;
}
.mv__txt{
  margin-top: 1.5em;
  position: relative;
  opacity: 0;
}
.mv .mv__txt p {
  position: absolute;
  top:0;
  left: 0;
  color: #fff;
  line-height: 1.68;
  font-size: 2.34vw;
  letter-spacing: 0.1em;
  text-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2);
  transition: all 0.8s ease 0s;
}
.mv .mv__txt p.s1_txt, .mv .mv__txt p.s2_txt{
  opacity: 0!important;
}
.mv .mv__txt p.current{
  opacity: 1!important;
}

@media screen and (min-width: 1600px) {
  .mv .mv__box p {
    font-size: 3.2rem;
  }
}

/* message
* ------------------------------------------------------------------- */
.message {
  padding-top: 10.8rem;
  padding-bottom: 12.2rem;
  overflow: hidden;
  text-align: center;
}
.message .wrap {
  padding-right: 0;
  padding-left: 0;
}
.message__title {
  margin-bottom: 5.4rem;
  font-weight: 400;
  font-size: 4rem;
  letter-spacing: 0.1em;
}
.message__copy {
  line-height: 2.29;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
}

/* product
* ------------------------------------------------------------------- */
.product {
  padding-top: 10.8rem;
  padding-bottom: 12.2rem;
  background-color: #F4F0EC;
}
.product__name {
  max-width: 40.8rem;
  margin: 0 auto 6.2rem;
  aspect-ratio: 408 / 60;
}
.product__img {
  max-width: 48rem;
  margin: 0 auto;
  aspect-ratio: 480 / 480;
}
.product__detail {
  margin-top: 7rem;
  text-align: center;
}
a.mat__btn{
  max-width: 34rem;
  border: solid 1px #333;
  border-radius: 3em;
  text-decoration: none;
  margin: 3rem auto 0;
  padding: 1rem 2rem;
  text-align: center;
  font-size: 1.6rem;
  display: block;
  position: relative;
}
a.mat__btn::before{
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 12px;
  height: 12px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  transform: translateY(-6px) rotate(45deg);
}
.youtube {
  width: 90%;
  max-width: 896px;
  margin: 10rem auto 0;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}
.youtube p{
  margin-top: 2rem;
  text-align: center;
  line-height: 1.8;
}
.youtube p span{
  font-size: 1.4rem;
  display: block;
  margin-top: .5rem;
}
/* fitting
* ------------------------------------------------------------------- */
.fitting__block{
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 90rem;
  margin: 6rem auto 0;
}
.fitting__img{
  width: 100%;
  max-width: 45rem;
  background: url("../img/fitting_bg.png");
  background-size: cover;
  position: relative;
}
.fitting__img .frame{
  width: 100%;
  max-width: 27rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  z-index: 2;
}
.fitting__img .frame::before{
  content: "";
  display: block;
  padding-top: 135.5%;
}
.fitting__img .frame img{
  box-shadow: 3px 5px 5px #999;
}
.fitting__img .photo{
  width: 47%;
  position: absolute;
  top: 52%;
  left: 50%;
  background-position: 52% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate(-50%, -50%);
  box-shadow: inset 0.1rem 0.1rem 0.4rem rgba(0, 0, 0, 0.34);
}
.fitting__img .photo::before{
  content: '';
  display: block;
  padding-top: 142.47%;
}
.fitting__img .frame.horizontal .photo{
  width: 67.27%;
  top: 50%;
  left: 47.5%;
  background-position: 50% 47.5%;
}
.fitting__img .frame.horizontal .photo::before{
  padding-top: 70.18%;
}
.fitting__img .frameimg img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.fitting__img .frame.horizontal .frameimg img{
  transform: translate(-50%, -50%) rotate(90deg);
  box-shadow: 3px -5px 5px #999;
}
.fitting__img .frame .mat{
  width: 100%;
  max-width: 27rem;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
}
.fitting__img .frame.horizontal .mat{
  transform: translate(-50%, -50%) rotate(90deg);
}
.fitting__img .mat.no1{
  background: url("../img/fitting_mat_color1_sample.png");
  background-size: cover;
}
.fitting__img .mat.no2{
  background: url("../img/fitting_mat_color2_sample.png");
  background-size: cover;
}
.fitting__img .mat.no3{
  background: url("../img/fitting_mat_color3_sample.png");
  background-size: cover;
}
.fitting__img .mat.no4{
  background: url("../img/fitting_mat_color4_sample.png");
  background-size: cover;
}
.fitting__img .mat.no5{
  background: url("../img/fitting_mat_color5_sample.png");
  background-size: cover;
}
.fitting__img .mat.no6{
  background: url("../img/fitting_mat_color6_sample.png");
  background-size: cover;
}
.fitting__img .mat.no7{
  background: url("../img/fitting_mat_color7_sample.png");
  background-size: cover;
}
.fitting__img .mat.no8{
  background: url("../img/fitting_mat_color8_sample.png");
  background-size: cover;
}
.fitting__img .mat.no9{
  background: url("../img/fitting_mat_color9_sample.png");
  background-size: cover;
}
.fitting__img .mat.no10{
  background: url("../img/fitting_mat_color10_sample.png");
  background-size: cover;
}
.fitting__detail{
  flex: 1;
  margin-left: 10%;
}
.fitting__detail p{
  margin-bottom: .8rem;
}
.fitting__detail p:not(:first-child){
  margin-top: 2rem;
}
.fitting__btn__block{
  display: flex;
  justify-content: flex-start;
}
.fitting__btn__block li {
  flex: 1;
}
.fitting__btn__block li:not(:first-child) {
  margin-left: 2rem;
}
.fitting__btn{
  display: inline-block;
  min-width: 16rem;
  background-color: #fff;
  border: solid 1px #000;
  border-radius: 3em;
  padding: 1rem;
  text-align: center;
}
.fitting__btn:hover{
  opacity: .5;
}
.fitting__btn span img{
  display: inline;
  width: 1.3rem;
  vertical-align: baseline;
  margin-left: 1rem;
}
.fitting__btn__block input {
  display: none;
}
.mat_color_list{
  display: flex;
  flex-wrap: wrap;
}
.mat_color_list li{
  width: calc((100% - 6rem) / 5);
  vertical-align: bottom;
  margin-bottom: 1rem;
  cursor: pointer;
  position: relative;
}
.mat_color_list li::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background-color: #fff;
  display: block;
  pointer-events: none;
}

.mat_color_list li:not(:first-child), .frame_color_list li:not(:first-child){
  margin-left: 1.5rem;
}
.mat_color_list li:nth-child(5n+1){
  margin-left: 0;
}
.mat_color_list li button.current, .frame_color_list li button.current{
  border: solid 2px #9d9d9d;
  display: block;
}
.mat_color_list li:nth-child(n+5) button.current{
  border: solid 2px #9d9d9d;
  display: block;
}
.fitting__detail p.mat_color_txt{
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.frame_color_list{
  display: flex;
}
.frame_color_list li{
  width: 12rem;
  cursor: pointer;
}
.comment{
  font-size: 1.2rem;
  margin-top: 2rem;
  text-align: center;
}
/* features
* ------------------------------------------------------------------- */
.features__block {
  padding-top: 10.8rem;
  padding-bottom: 12.2rem;
  overflow-x: hidden;
}
.features__block.-beige {
  background-color: #F4F0EC;
}
/* horizontal__block */
.horizontal__block {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.horizontal__block.-reverse {
  flex-direction: row-reverse;
}
.horizontal__block .features__detail {
  width: 53.98%;
}
.horizontal__block .features__img {
  width: 38.93%;
}
.horizontal__block.-img-l .features__detail {
  width: 46.81%;
}
.horizontal__block.-img-l .features__img {
  width: 44.24%;
}
.features1__img__box {
  aspect-ratio: 500 / 557;
}
.features3__img__box {
  aspect-ratio: 440 / 440;
}
.features__title {
  max-width: 38.1rem;
  margin-bottom: 2.8rem;
  margin-left: -4%;
  aspect-ratio: 381 / 163;
}
.features__topics {
  margin-bottom: 0.7em;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 1.2rem;
}
.features__hd {
  margin-bottom: 1.1em;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.features__hd.offset {
  margin-right: -1em;
}
.features__text {
  line-height: 2;
  letter-spacing: 0.15em;
}
.features__text + .features__text {
  margin-top: 1em;
}
.onecopy__example {
  margin-top: 6rem;
}
.onecopy__example .example__img:not(:first-child) {
  margin-top: 5.3rem;
}
.onecopy__happiness {
  max-width: 29rem;
}
.onecopy__day {
  max-width: 14.9rem;
}
.onecopy__example p {
  margin-top: 0.7em;
}
/* gold-embossing__block */
.gold-embossing__wrap {
  display: flex;
  width: 100%;
  margin-top: 11rem;
  overflow-y: hidden;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.gold-embossing__wrap + .gold-embossing__wrap {
  margin-top: 4.5rem;
}
.gold-embossing__wrap::-webkit-scrollbar {
  display:none;
}
.gold-embossing__block {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  min-width: 76.8rem;
  margin: 0 auto;
}
.gold-embossing__item {
  width: 18%;
  margin-left: 2%;
  text-align: center;
  margin-bottom: 4rem;
}
.gold-embossing__item:nth-of-type(5n+1) {
  margin-left: 0;
}
.gold-embossing__item a{
  text-decoration: none;
}
.gold-embossing__item a span{
  display: block;
  position: relative;
}
.gold-embossing__item a span::before{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(225,225,225,.9);
}
.gold-embossing__item a span::after{
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url("../img/icon_expand.svg");
  background-size: cover;
}
.gold-embossing__item p {
  margin-top: 1em;
  font-size: 1.4rem;
}
/* swiper */
.img-slider .swiper-slide {
  position: relative;
}
.img-slider .swiper-slide::before {
  content: '';
  display: block;
  padding-top: 100%;
}
.img-slider .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.swiper-controll {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 3.2rem;
}
.swiper-controll .swiper-pagination {
  display: flex;
  position: relative;
  bottom: auto;
  width: auto;
  margin-right: 2.4rem;
  margin-left: 2.4rem;
}
.swiper-controll .swiper-pagination-bullet {
  width: 1rem;
  height: 1rem;
  background-color: #ccc;
  opacity: 1;
}
.swiper-controll .swiper-pagination-bullet-active {
  background-color: #444;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 0.8rem;
}
.swiper-controll .swiper-button-prev,
.swiper-controll .swiper-button-next {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  width: 1.3rem;
  height: 2.5rem;
  margin-top: 0;
  color: #333;
}
.swiper-controll .swiper-button-prev::after,
.swiper-controll .swiper-button-next::after {
  width: 1.3rem;
  height: 2.5rem;
  color: #333;
  font-size: 3rem;
}
.swiper-controll .swiper-button-prev::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  font-size: inherit;
  transform: rotate(-135deg);
}
.swiper-controll .swiper-button-next::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 1.8rem;
  height: 1.8rem;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  font-size: inherit;
  transform: rotate(45deg);
}

/* spec
* ------------------------------------------------------------------- */
.spec__mv {
  position: relative;
}
.spec__mv .wrap {
  position: relative;
  max-width: 160rem;
  padding: 0;
}
.spec__mv .wrap::before {
  content: '';
  display: block;
  padding-top: 54.02%;
}
.spec__mv .mv__img__wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.spec__mv .mv__title {
  position: absolute;
  top: 72.22%;
  left: 8.41%;
  z-index: 2;
  width: 19.25%;
}
.spec__info {
  padding-top: 7.2rem;
  padding-bottom: 12rem;
}
.spec__block:not(:first-child) {
  margin-top: 7.2rem;
  padding-top: 7.2rem;
  border-top: 1px dotted #666;
}
.spec__hd {
  margin-bottom: 1.5em;
  font-size: 2.1rem;
  font-weight: bold;
}
.spec__sub__hd {
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.4;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  white-space: nowrap;
  min-width: 30rem;
}
.spec__color__text {
  display: flex;
}
.spec__color__text.marginTop{
  margin-top: 4rem;
}
.spec__color__text p {
  margin-top: 0.4em;
  margin-left: 10rem;
  line-height: 2;
  letter-spacing: 0.1em;
}
.spec__color__wrap {
  display: flex;
  margin-top: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.spec__color__wrap::-webkit-scrollbar {
  display:none;
}
.spec__color {
  display: flex;
  min-width: 76.8rem;
}
.spec__color > li {
  display: flex;
  flex: 1 1 0;
}
.spec__color > li:not(:first-child) {
  margin-left: 6.63%;
}
/* spec__size__info */
.spec__size__info {
  display: flex;
  justify-content: space-between;
}
.spec__size__info .spec__size__block {
  width: 46.01%;
}
.spec__size__block .spec__sub__hd {
  margin-bottom: 0.5em;
}
.spec__size__block p {
  margin-bottom: 1em;
  letter-spacing: 0.1em;
}
.spec__size__detail {
  width: 100%;
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.spec__size__detail dl > div {
  display: flex;
}
.spec__size__detail dl > div:not(:first-child) {
  margin-top: 0.5em;
}
.spec__size__detail dl dt {
  width: 7em;
  font-weight: bold;
}
/* spec__print__block */
.spec__print__block {
  display: flex;
}
.spec__print__block--left {
  width: 27.8rem;
}
.spec__print__block--right {
  flex: 1;
}
.spec__print__block--right p {
  margin-bottom: 4.5rem;
}
.spec__color__img{
  width: 100%;
  max-width: 600px;
  margin: 0 auto 7rem;
}
.spec__color__img .img-slider .swiper-slide::before {
  content: '';
  display: block;
  padding-top: 65.5%;
}
.spec__block .gold-embossing__wrap{
  margin-top: 0;
}
.spec__hd.marginTop{
  margin-top: 10rem;
}

/* package
* ------------------------------------------------------------------- */
.package__mv {
  position: relative;
  background-color: #444;
}
.package__mv .wrap {
  position: relative;
  max-width: 160rem;
  padding: 0;
}
.package__mv .mv__title {
  position: absolute;
  top: 7.61%;
  left: 8.41%;
  z-index: 2;
  width: 19.25%;
}
.package__mv .mv__box {
  position: absolute;
  top: 40.47%;
  left: 53%;
  z-index: 2;
  width: 40%;
  color: #fff;
}
.package__mv .mv__sub__title {
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.4;
  font-size: 2.92vw;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.package__mv .mv__box p {
  margin-top: 2.5em;
  line-height: 2;
  font-size: 1.17vw;;
  letter-spacing: 0.15em;
}
@media screen and (min-width: 1600px) {
  .package__mv .mv__sub__title {
    font-size: 4rem;
  }
  .package__mv .mv__box p {
    font-size: 1.6rem;
  }
}

/* price
* ------------------------------------------------------------------- */
.price {
  padding-top: 10.8rem;
  padding-bottom: 12.2rem;
}
.price__title {
  max-width: 61.6rem;
  margin-bottom: 7.2rem;
}
.price__block {
  display: flex;
}
.price__block:not(:first-of-type) {
  margin-top: 7.2rem;
  padding-top: 7.2rem;
  border-top: 1px dotted #666;
}
.price__block p {
  letter-spacing: 0.15em;
}
.price__block .price__block--left {
  width: 11.8rem;
}
.price__block .price__block--right {
  flex: 1;
}
.price__block .price__block--right p:first-child {
  margin-top: 0.2em;
}
.price__hd {
  font-size: 2.1rem;
  font-weight: bold;
}
.price__sub__hd {
  margin-top: -0.3em;
  margin-bottom: 0.5em;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.4;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.size__block {
  display: flex;
  width: 100%;
  margin-bottom: 7rem;
}
.size__block .size__block--left {
  width: 48%;
}
.size__block .size__block--right {
  flex: 1;
}

/* order
* ------------------------------------------------------------------- */
.order {
  padding-top: 13rem;
  padding-bottom: 10.6rem;
  background-color: #F4F0EC;
}
.order__title {
  max-width: 24.6rem;
}
.order__block {
  max-width: 86.8rem;
  margin: 0 auto;
  text-align: center;
}
.order__hd {
  margin-bottom: 2em;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.7;
  font-size: 2.6rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
}
.order__img {
  max-width: 60rem;
  margin: 0 auto;
}
.order .btn__wrap {
  margin-top: 6.2rem;
}
.order .notes__list {
  margin-top: 8.5rem;
}

/* guide
* ------------------------------------------------------------------- */
.guide {
  padding-top: 11.3rem;
  padding-bottom: 12rem;
}
.guide__title {
  max-width: 29.8rem;
  margin-bottom: 4.8rem;
}
.guide__block:not(:first-of-type) {
  margin-top: 8rem;
  padding-top: 8rem;
  border-top: 1px dotted #666;
}
.guide__hd {
  font-size: 2.1rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
.guide__inner {
  margin-left: 11.8rem;
}
.faq__list {
  margin-top: 4rem;
}
.faq__list > div:not(:first-of-type) {
  margin-top: 6rem;
}
.faq__list dt {
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.4;
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.faq__list dd {
  margin-top: 1em;
  line-height: 1.75;
  font-size: 1.8rem;
  letter-spacing: 0.1em;
}
/* inquiry__info */
.inquiry__info {
  margin-top: 6rem;
  letter-spacing: 0.1em;
}
.inquiry__hd {
  margin-bottom: 1.3em;
  font-weight: bold;
  font-size: 1.8rem;
}
.inquiry__tel {
  margin-bottom: 0.3em;
  font-size: 3.2rem;
}
.tel__link {
  text-decoration: none !important;
}
.inquiry__info .notes__list {
  margin-top: 4rem;
  font-size: 1.6rem;
}
.inquiry__info .btn__wrap {
  margin-top: 4rem;
}
/* kofukuron__block */
.kofukuron__block {
  max-width: 42rem;
  margin: 10rem auto 0;
}
.kofukuron__hd {
  display: flex;
  justify-content: center;
  margin-bottom: 8rem;
  padding-left: 1em;
  font-family: 'Noto Serif JP', "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
  line-height: 1.5;
  font-size: 4rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}
.kofukuron__img {
  position: relative;
  text-align: center;
}
.kofukuron__img img {
  width: 52.85%;
  margin-left: 8.8%;
}
.kofukuron__block .btn__wrap {
  margin-top: 8.5rem;
  font-size: 2.1rem;
  text-align: center;
}
.kofukuron__block .border__btn {
  padding: 0.65em 3.0em 0.8em 2.6em;
}

/* about
* ------------------------------------------------------------------- */
.about {
  padding-top: 11.5rem;
  padding-bottom: 12rem;
  background-color: #F4F0EC;
}
.about__title {
  max-width: 31.3rem;
  margin-bottom: 9rem;
}
.about__block {
  max-width: 86.8rem;
  margin: 0 auto;
  text-align: center;
}
.about__hd {
  max-width: 34.8rem;
  margin: 0 auto 6.8rem;
  padding-right: 7%;
}
.about__text {
  margin-bottom: 6.8rem;
  line-height: 2.1;
  font-size: 2.1rem;
  letter-spacing: 0.1em;
  text-align: center;
}
.about__img {
  max-width: 52rem;
  margin: 0 auto 5rem;
}
.about__item__block {
  display: flex;
  justify-content: center;
  max-width: 72.8rem;
  margin: 9.2rem auto 0;
}
.about__item__block .about__item {
  display: flex;
  justify-content: center;
}
.about__item__block .about__item a{
  width: calc((80% - 12%) / 2);
  margin-left: 3%;
  margin-right: 3%;
}

/* page__bottom
* ------------------------------------------------------------------- */
.page__bottom {
  margin-top: 7.5rem;
}
.share__heading {
  margin-bottom: 3.4rem;
  font-size: 2.4rem;
  text-align: center;
  letter-spacing: 0.1em;
}
.share__links {
  display: flex;
  justify-content: center;
}
.share__links li {
  width: 4rem;
}
.share__links li:not(:first-child) {
  margin-left: 4rem;
}

/* フェードイン・アップ */
.fade-in-up {
  opacity: 0;
}
.fade-in-up.active {
  animation: fadeInUp 1.6s ease-out forwards;
}
@keyframes fadeInUp {
  0% {
    transform: translate3d(0, 3rem, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
/* ブラー */
.blur {
  opacity: 0;
}
.blur.active {
  animation: blurAnime 1.5s ease forwards;
}

@keyframes blurAnime{
  0% {
    filter: blur(2rem);
    opacity: 0;
  }
  100% {
    filter: blur(0);
    opacity: 1;
  }
}

/* modal
* ------------------------------------------------------------------- */
.iziModal {
  box-shadow: none;
}
.iziModal.modal_wrap, .iziModal > .modal_wrap{
  width: 93.33%;
}
.iziModal-content {
  position: relative;
}
/*.iziModal-content::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}*/
.iziModal .iziModal-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.iziModal-navigate-prev, .iziModal-navigate-next {
  background: transparent;
}
.iziModal-navigate>button {
  opacity: .8;
  position: absolute;
}
.iziModal-navigate-prev a, .iziModal-navigate-next a {
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
}
.iziModal-navigate-prev::before, .iziModal-navigate-next::before {
  position: absolute;
  content: "";
  display: block;
  border-top: .4rem solid #fff;
  border-left: .4rem solid #fff;
  height: 4rem;
  width: 4rem;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  transform: rotate(-45deg);
}
.iziModal-navigate-prev::before {
	left: 1rem;
}
.iziModal-navigate-next::before {
	right: 1rem;
  border-left: none;
  border-right: .4rem solid #fff;
  transform: rotate(45deg);
}
.modal-close {
  display: none;
  position: fixed;
  top: -13rem;
  right: -8.4rem;
  z-index: 1000;
  top: 1rem;
  right: 1rem;
  width: 6rem;
  height: 6rem;
  background-color: rgba(255, 255, 255, 0.5);
}
.modal-close.is-active {
  display: block;
}
.modal-close::before,
.modal-close::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 5rem;
  height: 1px;
  background-color: #000;
}
.modal-close::before {
  transform: rotate(45deg);
}
.modal-close::after {
  transform: rotate(-45deg);
}
body.is-pop-opend {
  position: fixed;
  width: 100%;
}

.modal-close.js-modal-mat-close {
  width: 2rem;
  height: 2rem;
}
.modal-close.js-modal-mat-close::before,
.modal-close.js-modal-mat-close::after {
  width: 2rem;
}

/* -----------------------------------------
 レスポンシブ
------------------------------------------- */
/* small pc size */
@media screen and (min-width: 768px) and (max-width: 959px) {
  .header__logo {
    width: 12.2rem;
  }
  .header__brand__logo {
    width: 16.3rem;
    margin-left: 3rem;
    padding-top: 0.2em;
  }
  .header__brand__menu li a {
    font-size: 1.6rem;
  }
}
/* tablet size */
@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw/39);
  }
  body {
    font-size: 1.4rem;
  }
  a:hover {
    opacity: 1;
  }
  /* heading */
  .heading-a {
    margin-bottom: 3.5rem;
    font-size: 2.9rem;
  }
  .heading-b {
    margin-bottom: 4.3rem;
    line-height: 1.5;
    font-size: 2.4rem;
  }
  .heading-c {
    margin-top: 4.3rem;
    margin-bottom: 3.5rem;
    font-size: 2.1rem;
  }
  .heading-c.mb-s {
    margin-bottom: 3rem;
  }
  /* button */
  .order__btn {
    min-width: 29rem;
    padding: 0.7em 1em 0.8em;
    font-size: 1.8rem;
  }
  .order__btn::before {
    right: 2rem;
    width: 1.6rem;
    height: 1.6rem;
  }
  .border__btn {
    min-width: 21.5rem;
    padding: 0.95em 2.6em 1em 2.2em;
  }
  .border__btn::before {
    right: 1.6rem;
  }
  .border__btn:hover {
    opacity: 1;
  }
  .button__wrap {
    margin-top: 3rem;
    padding-right: 5rem;
  }
  /* scroll-top */
  .scroll-top {
    position: fixed;
    right: 1rem;
    bottom: 2rem;
    width: 3.3rem;
  }
  /* header */
  .l-header{
    height: 9rem;
  }
  .l-header .wrap {
    flex-wrap: wrap;
    padding: 2.2rem 2.2rem 0;
    height: auto;
    min-height: 9rem;
  }
  .header__logo {
    width: 6.6rem;
    padding-top: 0.2em;
  }
  .header__logo img {
    display: block;
  }
  .header__brand__logo {
    width: 9.1rem;
    margin-left: 2rem;
    padding-top: .1rem;
  }
  .header__brand__logo img {
    display: block;
  }
  .header__brand__menu {
    width: 100%;
    height: auto;
    margin-left: 0;
    transition: all 0.3s;
  }
  .is-pop-opend .header__brand__menu {
    opacity: 0;
    visibility: hidden;
  }
  .header__brand__menu > li {
    display: flex;
  }
  .header__brand__menu > li:not(:first-child) {
    margin-left: 3em;
  }
  .header__brand__menu li a {
    padding: 1em 0;
    font-size: 1.2rem;
  }
  .header__menu {
    top: .7rem;
    right: 1rem;
    width: 4.8rem;
    height: 4.8rem;
  }
  .header__menu:hover {
    opacity: 1;
  }
  .header__menu span{
    left: 1.4rem;
    width: 2rem;
  }
  .header__menu span:nth-of-type(1) {
    top: 1.6rem;
  }
  .header__menu span:nth-of-type(2) {
    top: 2.3rem;
  }
  .header__menu span:nth-of-type(3) {
    top: 3.0rem;
  }
  .header__menu.is-active span:nth-of-type(1),
  .header__menu.is-active span:nth-of-type(3){
    top: 2.4rem;
    left: 1.1rem;
    width: 2.6rem;
  }
  /* l-nav */
  .l-nav {
    padding-top: 4.6rem;
  }
  .l-nav .l-nav-inner {
    min-height: 0;
    padding-top: 1.5rem;
  }
  .l-nav__list li:not(:first-child) {
    margin-top: 1.5em;
  }
  .l-nav .site__logo {
    width: 16.3rem;
    margin-bottom: 4rem;
  }
  .l-nav__list a {
    font-size: 1.8rem;
  }
  .l-nav__share {
    margin-top: 5rem;
  }
  .l-nav__share .share__heading {
    margin-bottom: 3.2rem;
    font-size: 1.8rem;
    text-align: center;
  }
  .l-nav__share .share__links li {
    width: 4rem;
  }
  .l-nav__share .share__links li:not(:first-child) {
    margin-left: 4rem;
  }
  
  /* footer
   * ------------------------------------------------------------------- */
  .l-footer{
    padding-top: 0;
    padding-bottom: 6rem;
  }
  .l-footer .wrap{
    padding: 0 2.2rem;
  }
  .l-footer__bottom{
    display: block;
    padding-top: 4rem;
  }
  .l-footer__logo{
    display: block;
    margin-right: 0;
    margin-bottom: 4rem;
    text-align: center;
  }
  .l-footer__logo img{
    width: 15.2rem;
  }
  .l-footer__bottom__body{
    display: flex;
    flex-wrap: wrap;
  }
  .l-footer__nav{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0;
    margin-bottom: 1.6rem;
    gap: 8px 1.4rem;
    font-size: 1.4rem;
  }
  .l-footer__nav a:not(:last-child){
    margin-right: 1.4rem;
  }
  .l-footer__nav a:not(:last-child)::after {
      right: -1.4rem;
    }
  .l-footer__copyright{
    margin-top: 0;
    font-size: 1.2rem;
  }
  /* main */
  .main__contents {
    position: relative;
    padding: 9rem 0 15.7rem;
  }
  /* mv */
  .mv .wrap{
    padding: 0;
  }
  .mv__img::before {
    padding-top: 76.92%;
  }
  .mv .mv__box {
    position: absolute;
    top: 41%;
    left: 10%;
    width: 80%;
  }
  .mv .mv__box p {
    width: 100%;
    font-size: 4.3vw;
    font-weight: 700;
    text-align: center;
    left: 50%;
    transform: translateX(-50%)!important;
  }

  /* message
  * ------------------------------------------------------------------- */
  .message {
    padding-top: 3.6rem;
    padding-bottom: 5.5rem;
  }
  .message__title {
    margin-bottom: 3rem;
    padding-left: 0.5em;
    font-size: 3.2rem;
  }
  .message__copy {
    padding-left: 0.5em;
    font-size: 1.6rem;
  }

  /* product
  * ------------------------------------------------------------------- */
  .product {
    padding-top: 6rem;
    padding-bottom: 6.4rem;
  }
  .product__name {
    max-width: 20.3rem;
    margin: 0 auto 3.6rem;
  }
  .product__detail {
    margin-top: 4rem;
  }
  .product__detail.sp-indent {
    margin-right: -1em;
    margin-left: -1em;
  }
  .youtube {
  width: 100%;
  margin: 0 auto;
  }
  .youtube p{
    font-size: 1.5rem;
    padding: 0 1.5rem;
  }
  .youtube p span{
    margin-top: 1rem;
    font-size: 1.2rem;
    text-indent: -.9em;
    padding-left: .9em;
  }
  /* fitting
* ------------------------------------------------------------------- */
  .fitting__block{
    display: block;
    margin: 3rem auto 0;
  }
  .fitting__img{
    position: relative;
  }
  .fitting__img::before{
    content: "";
    display: block;
    padding-top: 100%;
  }
  .fitting__detail{
    margin-top: 2rem;
    margin-left: 0;
  }
  .fitting__img .frame{
    position: absolute;
    width: 60%;
    max-width: 19rem;
  }
  .fitting__btn{
    width: 100%;
    min-width: inherit;
    max-width: 18rem;
  }
  .mat_color_list__wrap{
    width: auto;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    display: flex;
  }
  .mat_color_list{
    width: 100%;
    min-width: 56rem;
    display: flex;
    flex-wrap: nowrap;
  }
  .mat_color_list li{
    width: calc((100% - 13.5rem) / 10);
  }
  .mat_color_list li:not(:first-child){
    margin-left: 1.5rem;
  }

  /* features
  * ------------------------------------------------------------------- */
  .features__block {
    padding-top: 4.2rem;
    padding-bottom: 5.5rem;
  }
  /* horizontal__block */
  .horizontal__block {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .horizontal__block.-reverse {
    flex-direction: column;
  }
  .horizontal__block .features__detail {
    width: 100%;
  }
  .horizontal__block .features__img {
    width: 100%;
    order: 2;
  }
  .horizontal__block.-img-l .features__detail {
    width: 100%;
  }
  .horizontal__block.-img-l .features__img {
    width: 100%;
  }
  .features__title {
    width: 76.25%;
    margin: 0 auto 2.5rem;
  }
  .features__topics {
    margin-bottom: 0.6em;
  }
  .features__hd {
    margin-bottom: 0.8em;
    font-size: 3.1rem;
  }
  .features__text {
    margin-top: 2.2em;
    letter-spacing: 0.1em;
  }
  .swiper__wrap + .features__text {
    margin-top: 3em;
  }
  .onecopy__example {
    margin-top: 4rem;
  }
  .onecopy__example .example__img:not(:first-child) {
    margin-top: 5rem;
  }
  .onecopy__example p {
    margin-top: 0.7em;
    line-height: 2;
  }
  /* gold-embossing__block */
  .gold-embossing__wrap {
    width: auto;
    margin-top: 5.5rem;
    margin-right: -3.5rem;
  }
  .gold-embossing__wrap + .gold-embossing__wrap {
    margin-top: 4.5rem;
  }
  .gold-embossing__block {
    margin-right: 3.5rem;
    min-width: 226.8rem;
  }
  .gold-embossing__item {
    width: calc((100% - 13.5rem) / 10);
    margin-bottom: 0;
    
    margin-left: 1.5rem;
  }
  .gold-embossing__item p {
    font-size: 1.2rem;
  }
  /* swiper */
  .swiper-controll {
    margin-top: 2rem;
  }
  .swiper-controll .swiper-pagination {
    margin-right: 2rem;
    margin-left: 2rem;
  }
  .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.7rem;
  }
  .swiper-controll .swiper-button-prev,
  .swiper-controll .swiper-button-next {
    width: 1.2rem;
    height: 2.2rem;
  }
  .swiper-controll .swiper-button-prev::after,
  .swiper-controll .swiper-button-next::after {
    width: 1.2rem;
    height: 2.2rem;
  }
  .swiper-controll .swiper-button-prev::after {
    width: 1.6rem;
    height: 1.6rem;
  }
  .swiper-controll .swiper-button-next::after {
    width: 1.6rem;
    height: 1.6rem;
  }

  /* spec
  * ------------------------------------------------------------------- */
  .spec__mv .wrap {
    padding: 0;
  }
  .spec__mv .wrap::before {
    padding-top: 93.84%;
  }
  .spec__mv .mv__title {
    top: 83.87%;
    left: 22.05%;
    width: 52.56%;
  }
  .spec__info {
    padding-top: 8.6rem;
    padding-bottom: 5.5rem;
  }
  .spec__block:not(:first-child) {
    margin-top: 4.2rem;
    padding-top: 4.2rem;
  }
  .spec__hd {
    margin-bottom: 1.3em;
    font-size: 1.6rem;
  }
  .spec__sub__hd {
    font-size: 2.8rem;
  }
  .spec__color__text {
    display: block;
  }
  .spec__color__text p {
    margin-top: 2.0em;
    margin-left: 0;
    line-height: 2;
  }
  .spec__color__wrap {
    margin-top: 2.5rem;
    margin-right: -3.5rem;
  }
  .spec__color {
    margin-right: 3.5rem;
  }
  .spec__color > li:not(:first-child) {
    margin-left: 3rem;
  }
  /* spec__size__info */
  .spec__size__info {
    display: block;
  }
  .spec__size__info .spec__size__block {
    width: auto;
  }
  .spec__size__info .spec__size__block:not(:first-child) {
    margin-top: 5.5rem;
  }
  .spec__size__block .spec__sub__hd {
    margin-bottom: 1em;
  }
  .spec__size__block p {
    margin-bottom: 1.5em;
    line-height: 2;
  }
  .spec__size__detail {
    display: block;
    width: 100%;
    margin-top: 3.2rem;
  }
  .spec__size__detail dl > div {
    display: flex;
  }
  .spec__size__detail dl > div:not(:first-child) {
    margin-top: 0.5em;
  }
  .spec__size__detail dl dt {
    width: 7em;
    font-weight: bold;
  }
  /* spec__print__block */
  .spec__print__block {
    display: block;
  }
  .spec__print__block--left {
    width: auto;
  }
  .spec__print__block--right p {
    margin-bottom: 4.2rem;
  }
  .spec__print__block .btn__wrap {
    text-align: center;
  }

  /* package
  * ------------------------------------------------------------------- */
  .package__mv .wrap {
    padding-top: 12.5rem;
  }
  .package__mv .mv__title {
    position: absolute;
    top: 8.3%;
    left: 20.51%;
    width: 58.97%;
  }
  .package__mv .mv__box {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    padding: 2.8rem 2.5rem 5.5rem 3.5rem;
  }
  .package__mv .mv__sub__title {
    font-size: 3.2rem;
  }
  .package__mv .mv__box p {
    margin-top: 1.5em;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
  }

  /* price
  * ------------------------------------------------------------------- */
  .price {
    padding-top: 5rem;
    padding-bottom: 5.5rem;
  }
  .price__title {
    max-width: 30.8rem;
    margin-bottom: 5.2rem;
  }
  .price__block {
    display: block;
  }
  .price__block:not(:first-of-type) {
    margin-top: 3.8rem;
    padding-top: 3.8rem;
  }
  .price__block p {
    letter-spacing: 0.1em;
  }
  .price__block .price__block--left {
    width: auto;
  }
  .price__block .price__block--right {
    flex: 1;
  }
  .price__block .price__block--right p:first-child {
    margin-top: 0.2em;
  }
  .price__hd {
    margin-bottom: 1.3em;
    font-size: 1.6rem;
  }
  .price__sub__hd {
    margin-top: 0;
    margin-bottom: 0.7em;
    font-size: 2.8rem;
  }
  .size__block {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 3rem;
  }
  .size__block .size__block--left {
    width: 47%;
  }
  .size__block .size__block--right {
    width: 47%;
    flex: 0 0 auto;
  }
  .size__block p {
    font-size: 1.6rem;
  }

  /* order
  * ------------------------------------------------------------------- */
  .order {
    padding-top: 4.2rem;
    padding-bottom: 7.6rem;
  }
  .order__title {
    max-width: 19.7rem;
    margin: 0 auto 3.8rem;
  }
  .order__block {
    margin: 0 auto;
    text-align: center;
  }
  .order__hd {
    margin-bottom: 1.6em;
    line-height: 1.75;
    font-size: 1.6rem;
  }
  .order .btn__wrap {
    margin-top: 3.4rem;
  }
  .order .notes__list {
    margin-top: 4.8rem;
  }

  /* guide
  * ------------------------------------------------------------------- */
  .guide {
    padding-top: 6.2rem;
    padding-bottom: 6rem;
  }
  .guide__title {
    max-width: 21.1rem;
    margin: 0 auto 5.6rem;
  }
  .guide__block:not(:first-of-type) {
    margin-top: 5.2rem;
    padding-top: 5.2rem;
  }
  .guide__hd {
    font-size: 1.6rem;
  }
  .guide__inner {
    margin-left: 0;
  }
  .faq__list {
    margin-top: 4rem;
  }
  .faq__list > div:not(:first-of-type) {
    margin-top: 4.2rem;
  }
  .faq__list dt {
    font-size: 2.8rem;
  }
  .faq__list dd {
    margin-top: 1em;
    line-height: 2;
    font-size: 1.4rem;
  }
  /* inquiry__info */
  .inquiry__info {
    margin-top: 4.4rem;
  }
  .inquiry__hd {
    margin-bottom: 1.1em;
    line-height: 1.75;
    font-size: 1.6rem;
  }
  .inquiry__info p {
    font-size: 1.2rem;
  }
  .inquiry__info .inquiry__tel {
    margin-bottom: 0.5em;
    font-size: 2.8rem;
  }
  .inquiry__info .notes__list {
    margin-top: 2rem;
    font-size: 1.2rem;
  }
  .inquiry__info .btn__wrap {
    margin-top: 4rem;
  }
  /* kofukuron__block */
  .kofukuron__block {
    margin: 4.3rem auto 0;
  }
  .kofukuron__hd {
    display: flex;
    justify-content: center;
    margin-bottom: 5rem;
    padding-left: 1em;
    font-size: 3.2rem;
  }
  .kofukuron__img {
    position: relative;
    text-align: center;
  }
  .kofukuron__img img {
    width: 56.87%;
    margin-left: 10.6%;
  }
  .kofukuron__block .btn__wrap {
    margin-top: 5.3rem;
    font-size: 1.4rem;
  }
  .kofukuron__block .border__btn {
    padding: 0.95em 2.6em 1em 2.2em;
  }
  /* page__bottom */
  .page__bottom {
    margin-top: 7rem;
  }
  .share__heading {
    font-size: 1.8rem;
  }

  /* about
  * ------------------------------------------------------------------- */
  .about {
    padding-top: 6.2rem;
    padding-bottom: 6rem;
  }
  .about__title {
    max-width: 24rem;
    margin: 0 auto 5rem;
  }
  .about__hd {
    width: 68%;
    margin: 0 auto 3.8rem;
    padding-right: 9%;
  }
  .about__text {
    margin-bottom: 3.8rem;
    font-size: 1.6rem;
  }
  .about__img {
    max-width: 52rem;
    margin: 0 auto 3.4rem;
  }
  .about__item__block {
    display: block;
    margin: 6rem 0 0;
  }
  .about__item__block .about__item {
    width: auto;
  }
  .about__item__block .about__item:not(:first-of-type) {
    margin-top: 3rem;
  }
  .about__item__block .about__item a{
    width: calc((100% - 8%) / 2);
    margin-left: 2%;
    margin-right: 2%;
  }
} /* query end */


.iziModal .section .wrap{
  padding: 0 10%;
  line-height: 2;
  letter-spacing: 0.1em;
  font-size: 1.4rem;
}
.iziModal .section .title{
  font-size: 3.4rem;
  text-align: center;
  padding: 7rem 0 0;
}
.iziModal .section .beige{
  background-color: #F4F0EC;
}
.iziModal .section .ttl{
  font-size: 2.6rem;
  margin-bottom: 2rem;
  padding-top: 6rem;
}
.iziModal .section .img{
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  padding: 4rem 0;
}
.mat_inner{
  padding: 1rem 2rem 2rem;
}
.modal_mat .ttl{
  text-align: center;
  font-size: 2rem;
  margin-bottom:  1rem;
}
.mat_inner img{
  margin-bottom: 1rem;
  pointer-events: none;
}

/* modal-bottom-close */
.modal-bottom-close {
  display: inline-block;
  position: relative;
  padding: 0 0.5em;
  color: inherit;
  font-size: 2rem;
  text-align: center;
  text-decoration: none !important;
}
.modal-bottom-close::before,
.modal-bottom-close::after {
  content: '';
  position: absolute;
  top: .5rem;
  left: -2.2rem;
  bottom: 0;
  margin: auto;
  width: 2rem;
  height: 1px;
  background-color: #000;
}
.modal-bottom-close::before {
  transform: rotate(45deg);
}
.modal-bottom-close::after {
  transform: rotate(-45deg);
}
.modal-bottom-btn {
  text-align: center;
  padding-bottom: 2rem;
}

/* tablet size */
@media screen and (max-width: 767px) {
.iziModal .section .wrap{
  padding: 0 6%;
  line-height: 1.6;
  font-size: 1.4rem;
}
.iziModal .section .title{
  font-size: 2.6rem;
  text-align: center;
  padding: 6rem 0 0;
}
.iziModal .section .ttl{
  font-size: 1.9rem;
  margin-bottom: 2rem;
  padding-top: 5rem;
}
.iziModal .section .img {
  max-width: 90%;
  padding: 3rem 0 4rem;
} 
.modal-close {
  top: 0.8rem;
  right: 0.8rem;
  width: 4rem;
  height: 4rem;
}
.modal-close::before,
.modal-close::after {
  width: 3.6rem;
}
.iziModal-navigate-prev{
  left: 56%;
}
.iziModal-navigate-next{
  right:56%;
}
.iziModal-navigate-prev::before, .iziModal-navigate-next::before{
  width: 2rem;
  height: 2rem;
  border-top: .3rem solid #fff;
}
.iziModal-navigate-prev::before{
  border-left: .3rem solid #fff;
}
.iziModal-navigate-next::before{
  border-right: .3rem solid #fff;
}
.iziModal.sp_wrap{
  width: 80%;  
}
}