@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap");

.product_pmc {
  line-height: 1.5;
  color: #333;
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
}
.product_pmc p {}
.product_pmc img {
  max-width: 100%;
  vertical-align: bottom;
}
.product_pmc a {
  text-decoration: none;
  color: #333;
}
.product_pmc a:hover{
  opacity: .8;
}

/*
 *  utility
 * ------------------------------------------------------------------- */
.mb0 { margin-bottom: 0 !important; }
.mb10 { margin-bottom: 1rem !important; }
.mb20 { margin-bottom: 2rem !important; }
.mb30 { margin-bottom: 3rem !important; }
.mb40 { margin-bottom: 4rem !important; }
.mb50 { margin-bottom: 5rem !important; }
.mb60 { margin-bottom: 6rem !important; }
.mb70 { margin-bottom: 7rem !important; }
.mb80 { margin-bottom: 8rem !important; }

.mt0 { margin-top: 0 !important; }
.mt10 { margin-top: 1rem !important; }
.mt20 { margin-top: 2rem !important; }
.mt30 { margin-top: 3rem !important; }
.mt40 { margin-top: 4rem !important; }
.mt50 { margin-top: 5rem !important; }
.mt60 { margin-top: 6rem !important; }
.mt70 { margin-top: 7rem !important; }
.mt80 { margin-top: 8rem !important; }

/* SPサイズ */
@media screen and (max-width:639px) {
.sp-mb0 { margin-bottom: 0 !important; }
.sp-mb10 { margin-bottom: 1rem !important; }
.sp-mb20 { margin-bottom: 2rem !important; }
.sp-mb30 { margin-bottom: 3rem !important; }
.sp-mb40 { margin-bottom: 4rem !important; }
.sp-mb50 { margin-bottom: 5rem !important; }
.sp-mb60 { margin-bottom: 6rem !important; }
.sp-mb70 { margin-bottom: 7rem !important; }
.sp-mb80 { margin-bottom: 8rem !important; }
.sp-mt0 { margin-top: 0 !important; }
.sp-mt10 { margin-top: 1rem !important; }
.sp-mt20 { margin-top: 2rem !important; }
.sp-mt30 { margin-top: 3rem !important; }
.sp-mt40 { margin-top: 4rem !important; }
.sp-mt50 { margin-top: 5rem !important; }
.sp-mt60 { margin-top: 6rem !important; }
.sp-mt70 { margin-top: 7rem !important; }
.sp-mt80 { margin-top: 8rem !important; }
}

/*ーーーー 共通　ーーーー */
.hide-pc{
  display: none;
}
.hide-sp{
  display: block;
}

/*ーーーー メイン　ーーーー */

.product_pmc .main_visual{
  max-width: 1000px;
  max-height: 540px;
  margin: 0 auto;
}

/* -----------------------------------
 gist
------------------------------------*/
.gist{
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 10rem 0 10rem;
  display: flex;
  justify-content: space-between;
}
.gist_txt{
  flex: 1;
  padding-top: 17%;
  line-height: 3;
}
.gist_txt p{
  font-size: 2.4rem;
  margin-bottom: 2.7rem;
}
.gist_img{
  width: 58%;
}
.btn_order{
  width: 100%;
  max-width: 41rem;
  display: block;
  border: solid 1px #000;
  text-align: center;
  margin: 0 auto;
  padding: 1.5rem 0;
}

.details_wrap{
  width: 100%;
  max-width: 100rem;
  display: flex;
  margin: 20rem auto 0;
}
.details_layout{
  width: calc((100% - 6rem) / 3);
  display: flex;
  flex-direction: column;
}
.details_layout:not(:first-child){
  margin-left: 3rem;
}
.details_layout .details_item_ttl{
  background-color: #01916D;
  color: #fff;
  font-weight: bold;
  font-size: 2.6rem;
  text-align: center;
  padding: .5rem 0;
  margin-bottom: 1.5rem;
  position: relative;
}
.details_layout .details_item_ttl::before, .details_layout .details_item_ttl::after{
  content: "";
  position: absolute;
  top: 50%;
  right:-1.6rem;
  width: 3px; 
  height: 20px;
  background: #01916D;
}
.details_layout .details_item_ttl::before {
  transform: translate(0,-50%) rotate(45deg);
}
.details_layout .details_item_ttl::after{
  transform: translate(0,-50%) rotate(-45deg);
}
.details_layout .details_item_ttl.last::before, .details_layout .details_item_ttl.last::after{
  display: none;
}

.details_layout .details{
  border: solid 1px #ccc;
  padding: 3.4rem 2rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.details_box{
  flex-grow: 1;
}
.details_box.al-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 1em;
}

.details_layout .details img.logo{
  display: block;
  width: 17rem;
  margin: 0 auto 2.5rem;
}
.details_layout .details span{
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: block;
}
.details_layout .details .photo{
  width: 100%;
  margin-bottom: auto;
  display: block;
}

/* -----------------------------------
 color_image_wrap
------------------------------------*/
.color_image_wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100rem;
  margin: 15rem auto 0;
}
.color_image_wrap h2{
  width: 100%;
  font-size: 3.2rem;
  font-weight: 400;
  margin-bottom: 3rem;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.1em;
}
.photo_paper{
  width: 55%;
  position: relative;
}
.photo_paper_inner{
  position: relative;
}
.photo_paper_inner::before{
  content: '';
  display: block;
  padding-top: 72.72%;
}
.photo_paper .c_photo{
  position: absolute;
  top: 21%;
  left: 6.5%;
  width: 59.4%;
}
.photo_paper .c_photo img {
  display: block;
  width: 100%;
  transform: rotate(-45deg);
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.16);
}
.photo_paper .c_paper{
  position: absolute;
  top: 21%;
  right: 6.5%;
  width: 59.4%;
}
.photo_paper .c_paper img {
  display: block;
  position: relative;
  width: 100%;
  transform: rotate(-45deg);
  box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.26);
}
.txt_number{
  width: 40%
}
.color_info {
  border: solid 1px #ccc;
  padding: 1.3rem 2.5rem;
}
.photo_paper .color_info {
  max-width: 40rem;
  margin: 2.5rem auto 0;
}
.color_info .c_txt{
  font-size: 2.3rem;
  margin-bottom: 0.2em;
}
.color_info .c_number{
  font-size: 1.8rem;
}
/* -----------------------------------
 select_color
------------------------------------*/
.select_color_ttl{
  font-size: 2rem;
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 3rem;
  padding-top: 4rem;
  border-top: 1px dashed #ccc;
}
.select_color{
  width: 100%;
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.4%;
}
.select_color div{
  width: 10.4%;
  /* margin: 0 1rem 1rem; */
  border-radius: 50%;
  border: solid 4px #fff;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: block;
}
.select_color div.current{
  position: relative;
  outline: 2px solid #BEBEBE;
	box-shadow: none !important;
}
.select_color div::before{
  content: '';
  display: block;
  padding-top: 100%;
}

.color_1{background-position: 0 0;}
.color_2{background-position: -100px 0;}
.color_3{background-position: -200px 0;}
.color_4{background-position: -300px 0;}
.color_5{background-position: -400px 0;}
.color_6{background-position: -500px 0;}
.color_7{background-position: -600px 0;}
.color_8{background-position: -700px 0;}
.color_9{background-position: -800px 0;}
.color_10{background-position: -900px 0;}
.color_11{background-position: 0 -100px;}
.color_12{background-position: -100px -100px;}
.color_13{background-position: -200px -100px;}
.color_14{background-position: -300px -100px;}
.color_15{background-position: -400px -100px;}
.color_16{background-position: -500px -100px;}
.color_17{background-position: -600px -100px;}
.color_18{background-position: -700px -100px;}
.color_19{background-position: -800px -100px;}
.color_20{background-position: -900px -100px;}
.color_21{background-position: 0 -200px;}
.color_22{background-position: -100px -200px;}
.color_23{background-position: -200px -200px;}
.color_24{background-position: -300px -200px;}
.color_25{background-position: -400px -200px;}
.color_26{background-position: -500px -200px;}
.color_27{background-position: -600px -200px;}
.color_28{background-position: -700px -200px;}
.color_29{background-position: -800px -200px;}
.color_30{background-position: -900px -200px;}
.color_31{background-position: 0 -300px;}
.color_32{background-position: -100px -300px;}
.color_33{background-position: -200px -300px;}
.color_34{background-position: -300px -300px;}
.color_35{background-position: -400px -300px;}
.color_36{background-position: -500px -300px;}
.color_37{background-position: -600px -300px;}
.color_38{background-position: -700px -300px;}
.color_39{background-position: -800px -300px;}
.color_40{background-position: -900px -300px;}

.orderBtn_block{
  margin-top: 3rem;
}
.orderBtn{
  width: 34rem;
  margin: 0 auto;
  padding: 1.2rem 0;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 1.8rem;
  background-color: #ccc;
  border-radius: 3em;
  outline: none;
}
.modal-content.order{
}
.modal_order{
  display: flex;
  padding: 4.8rem 3.8rem 4.8rem 3.8rem;
  background-color: #fff;
}
.pop_l-size, .pop_half-size{
  /* width: 29.4rem; */
  width: calc((100% - 33.6rem) / 2);
  background-color: #F5F5F5;
  padding: 2rem 1.6rem 4rem;
  box-sizing: border-box;
  text-align: center;
  margin-left: 1.8rem;
}
.pop_l-size p, .pop_half-size p{
  font-size: 1.8rem;
  font-weight: 500;
  padding-bottom: 1rem;
  border-bottom: dashed 1px #ccc;
  margin-bottom: 3.5rem;
}
.pop_l-size img, .pop_half-size img{
  width: 24rem;
}
.pop_l-size a, .pop_half-size a{
  display: block;
  width: 100%;
  background-color: #fff;
  border: solid 1px #333;
  border-radius: 3em;
  text-align: center;
  font-weight: 500;
  padding: 1.3rem;
  margin-top: 3.5rem;
  font-size: 1.4rem;
  text-decoration: none;
  color: #333;
}
.color_info.pop{
  flex: 1;
  max-width: 30rem;
  border:none;
  padding: 0;
  align-self: center;
}
.color_info.pop .c_txt{
  font-size: 2rem;
  margin-bottom: 1rem;
}
.color_info.pop .c_number{
  font-size: 1.4rem;
  margin-bottom: 3rem;
}
.color_info.pop img{
  width: 90%;
}

.orderBtn#color1{background-color: #7F2C3C;}
.orderBtn#color2{background-color: #9C313F;}
.orderBtn#color3{background-color: #F993BC;}
.orderBtn#color4{background-color: #DA88BD;}
.orderBtn#color5{background-color: #EEB9D0;}
.orderBtn#color6{background-color: #ECB8BE;}
.orderBtn#color7{background-color: #EEDDD5; color: #333;}
.orderBtn#color8{background-color: #EDE8EF; color: #333;}
.orderBtn#color9{background-color: #FB857F;}
.orderBtn#color10{background-color: #E0674F;}
.orderBtn#color11{background-color: #E58148;}
.orderBtn#color12{background-color: #E2ED82; color: #333;}
.orderBtn#color13{background-color: #F7D372; color: #333;}
.orderBtn#color14{background-color: #F4EA7A; color: #333;}
.orderBtn#color15{background-color: #E3E9A6; color: #333;}
.orderBtn#color16{background-color: #EFE2BC; color: #333;}
.orderBtn#color17{background-color: #5E9168;}
.orderBtn#color18{background-color: #A2D982;}
.orderBtn#color19{background-color: #DCEAB7; color: #333;}
.orderBtn#color20{background-color: #DCE7D6; color: #333;}
.orderBtn#color21{background-color: #72BCB1;}
.orderBtn#color22{background-color: #C2EBE7; color: #333;}
.orderBtn#color23{background-color: #2A314C;}
.orderBtn#color24{background-color: #4268A0;}
.orderBtn#color25{background-color: #9ADBF0; color: #333;}
.orderBtn#color26{background-color: #D2F8F8; color: #333;}
.orderBtn#color27{background-color: #A6C5E4;}
.orderBtn#color28{background-color: #D9EDF4; color: #333;}
.orderBtn#color29{background-color: #3D3D64;}
.orderBtn#color30{background-color: #CDC3E5; color: #333;}
.orderBtn#color31{background-color: #DFDEEC; color: #333;}
.orderBtn#color32{background-color: #F0F1F6; color: #333;}
.orderBtn#color33{background-color: #E8E8DF; color: #333;}
.orderBtn#color34{background-color: #614A49;}
.orderBtn#color35{background-color: #D9C6AF;}
.orderBtn#color36{background-color: #E6E3D9; color: #333;}
.orderBtn#color37{background-color: #C0B9B1;}
.orderBtn#color38{background-color: #909A9F;}
.orderBtn#color39{background-color: #67686D;}
.orderBtn#color40{background-color: #353439;}


/* -----------------------------------
 spec
------------------------------------*/
.spec{
  width: 100%;
  max-width: 100rem;
  margin: 15rem auto 10rem;
}
.spec_img{
  margin-bottom: 4rem;
  position: relative;
}
.spec .headding_ttl{
  font-size: 3.6rem;
  font-weight: normal;
  position: absolute;
  bottom: 2rem;
  left: 3rem;
  color: #fff;
  text-shadow: 1px 1px 3px #555;
  letter-spacing: .1em;
}
.headding_ttl{
  font-size: 3.2rem;
  font-weight: normal;
}
.headding_ttl_b{
  font-size: 2.8rem;
  font-weight: normal;
}
.headding_ttl + .headding_ttl_b{
  margin-top: 5rem;
}
.spec_layout{
  display: flex;
  justify-content: flex-start;
  margin-top: 5rem;
  line-height: 2;
  align-items: flex-start;
  margin-bottom: 5rem;
}
.spec_layout .ttl{
  border:solid 1px #333;
  font-size: 2rem;
  padding: .6rem 2.2rem;
  margin-right: 4.6rem;
}
.spec_layout ul{
  flex:1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.spec_layout ul li{
  width: calc(100%/2);
  font-size: 1.8rem;
  letter-spacing: .14em;
  margin-bottom: 1rem;
}

.spec_sub_img{
  width: 100%;
  max-width: 113rem;
  margin: 21rem auto 20rem;
  display: flex;
}
.specimg_layout{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4rem;
  margin-bottom: 10rem;
}
.specimg_layout .specimg_item {
  width:calc((100% - 4rem) / 2);
  line-height: 2;
  letter-spacing: .14em;
  border: solid 1px #ccc;
  padding: 3rem;
}
.specimg_layout .specimg_item:last-child{
}
.specimg_layout .specimg_item:nth-child(2n) {
  margin-left: 4rem;
}
.specimg_layout .specimg_item:nth-child(n+3) {
  margin-top: 4rem;
}
.specimg_layout img{
  width: 100%;
}
.specimg_layout .specimg_ttl{
  font-size: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}
/* price-info */
.price-info {
  display: flex;
  width: 100%;
  margin-top: 4rem;
}
.price-info-left {
  width: 37%;
  margin-right: 4rem;
}
.price-info-right {
  flex: 1;
  padding: 2rem;
  border: 1px solid #ccc;
}
.price-table {
  width: 100%;
}
.price-table thead th {
  padding: 0 1em 1em;
  border-bottom: 1px solid #ccc;
}
.price-table tbody th,
.price-table tbody td {
  padding: 0.5em 1em;
  vertical-align: middle;
}
.price-table tbody tr:first-child th,
.price-table tbody tr:first-child td {
  padding-top: 1em;
}
.price-table tbody th {
  width: 30%;
  font-weight: bold;
}

/* -----------------------------------
 size
------------------------------------*/
.size{
  width: 100%;
  max-width: 100rem;
  margin: 10rem auto;
}
.size_layout{
  width: 100%;
  max-width: 84.3rem;
  margin: 6.6rem auto 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.size_layout div:last-child{
  margin-left: 8.6rem;
}
.popup_link{
  text-decoration: underline;
  text-align: center;
  margin: 3.5rem 0 20rem;
}

/* -----------------------------------
 delivery payment
------------------------------------*/
.delivery, .payment{
  width: 100%;
  max-width: 100rem;
  margin: 10rem auto ;
}
.delivery .headding_ttl, .payment .headding_ttl{
  margin-bottom: 2rem;
}
.delivery .delivery_wrap, .payment .delivery_wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 3rem;
}
.delivery_wrap .delivery_layout{
  width: 48%;
}
.delivery_wrap .delivery_layout:nth-child(n+3){
  margin-top: 3rem;
}
.delivery_wrap .delivery_layout .pmc_sub_ttl{
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.delivery_wrap .delivery_layout ul li{
  margin-top: .5rem;
  text-indent: -1em;
  padding-left: 1em;
}
.payment .delivery_wrap .delivery_layout ul{
  display: flex;
  justify-content: flex-start;
}
.payment .delivery_wrap .delivery_layout ul li{
  width: calc((100% - 3rem) / 3);
  text-indent: 0;
  margin-top: 0;
  margin-right: 1rem;
  padding-left: 0;
}
.payment .delivery_wrap .delivery_layout ul li:nth-child(3n){
  margin-right: 0;
}
.payment .delivery_wrap .delivery_layout ul li a{
  display: block;
  border: solid 1px #ccc;
}

/* -----------------------------------------
Small PC
------------------------------------------- */
@media screen and ( max-width:1150px) {
  .gist {
    padding: 20rem 2rem 10rem;
  }
  .color_image_wrap {
    padding: 0 2rem;
    overflow: hidden;
  }
  .size {
    padding: 0 2rem;
  }
  .color_image_wrap h2 {
    font-size: 2.8rem;
  }
  .color_info {
    padding: 1em;
  }
  .color_info .c_txt {
    font-size: 2.2rem;
  }
}
@media screen and ( max-width:1000px) {
  .pop_l-size, .pop_half-size {
    width: 32%;
  }
  .color_info .c_txt {
    font-size: 2.2vw;
  }
  .spec_layout ul li{
  font-size: 1.6rem;
  }
  .details_wrap{
  padding: 0 2rem;
  }
  .delivery, .payment{
  padding: 0 2rem;
}
}

/* -----------------------------------------
 Tablet
------------------------------------------- */
@media screen and ( max-width:820px) {
.hide-pc{
  display: block;
}
.hide-sp{
  display: none;
}
.header{
  height: 6rem;
}
.corp{
  width: 6rem;
  margin-right: 1rem;
}
.koufukuron{
  width: 5.6rem;
}
.f_pantone_logo img{
  width:28rem;
}
#pagetop-fix {
  right: 1rem;
  width: 4rem;
  height: 4rem;
  transform: translate3d(0, 1rem, 0);
}
#pagetop-fix::after {
  width: 1.5rem;
  height: 1.5rem;
}
/* -----------------------------------
 MV
------------------------------------*/
.mv{
  margin:2.5rem 0 0 0;
}
.mv_ttl{
  display: block;
  margin-bottom: 2.5rem;
  font-size: 1.6rem;
}
.mv_ttl span{
  padding: 0 3rem;
  position: relative;
  letter-spacing: .2em;
}
.mv_ttl span::before, .mv_ttl span::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%);
  width: 2.5rem;
  height: .1rem;
  background-color: #707070;
}
.mv_ttl span::after{
  left: inherit;
  right: -2.5rem;
}
/* -----------------------------------
 gist
------------------------------------*/
.gist{
  width: 100%;
  padding: 9rem 0 5rem;
  display: block;
}
.gist_txt{
  flex: 1;
  padding-top: 0;
  padding-bottom: 10rem;
  line-height: 3;
  text-align: center;
}
.gist_txt p{
  font-size: 2.2rem;
  margin-bottom: 2.7rem;
}
.gist_img{
  width: 100%;
}
.btn_order{
  width: 80%;
}
.details_wrap{
  width: 90%;
  display: block;
  margin: 10rem auto 5rem;
  padding: 0 3rem;
}
.details_layout{
  width: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.details_layout:not(:first-child){
  margin-left: 0;
  margin-top: 5rem;
}
.details_layout::before, .details_layout::after{
  content: "";
  position: absolute;
  top: -4rem;
  left: 50%;
  width: 3px; 
  height: 30px;
  background: #01916D;
}
.details_layout::before {
  transform: translate(-50%,0) rotate(45deg);
}
.details_layout::after{
  transform: translate(-50%,0) rotate(-45deg);
}
.details_layout:first-child::before, .details_layout:first-child::after{
  display: none;
}
.details_layout .details_item_ttl{
  font-size: 2rem;
  margin-bottom: 0;
}
.details_layout .details_item_ttl::before, .details_layout .details_item_ttl::after{
  display: none;
}

.details_layout .details{
  padding: 3rem 2rem 2rem;
}
.details_layout .details:last-child{
  padding: 2rem;
}
.details_layout .details img.logo{
  width: 17rem;
  margin: 0 auto 1.5rem;
}
.details_layout .details span{
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.details_layout .details .photo{
  width: 100%;
}

/* -----------------------------------
 spec
------------------------------------*/
.spec{
  margin: 10rem auto 10rem;
}
.spec .headding_ttl{
  font-size: 2.6rem;
  bottom: 1.5rem;
  left: 1.5rem;
}
.headding_ttl{
  font-size: 2.4rem;
}
.headding_ttl_b{
  font-size: 2rem;
}
.headding_ttl + .headding_ttl_b{
  margin-top: 3rem;
}
.spec_layout{
  display: block;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.spec_layout .ttl{
  border:solid 1px #333;
  font-size: 1.6rem;
  padding: .4rem 3rem;
  margin-bottom: 2rem;
  margin-right: 0;
  display: inline-block;
  line-height: 1.4;
}
.spec_layout ul{
  display: block;
}
.spec_layout ul li{
  width: 100%;
  font-size: 1.6rem;
  letter-spacing: .1em;
  margin-bottom: .5rem;
}
.specimg_layout{
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 8rem;
}
.specimg_layout .specimg_item{
  width: calc((100% - 3rem) / 2);
  padding: 2rem;
  line-height: 2;
  letter-spacing: .08em;
  font-size: 1.6rem;
}
.specimg_layout .specimg_item:nth-child(2n){
  margin-left: 3rem;
}
.specimg_layout .specimg_item:nth-child(n+3){
  margin-top: 3rem;
}
.specimg_layout .specimg_item .ttl{
  font-size: 1.8rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: normal;
}
.spec_sub_img{
  width: 100%;
  max-width: 65rem;
  display: block;
  margin: 10rem auto 10rem;
}
.price-info {
  display: block;
  margin-top: 2rem;
}
.price-info-left {
  width: 60%;
  margin: 0 auto 3rem;
}
/* -----------------------------------
 size
------------------------------------*/
.size{
  margin: 10rem auto 8rem;
}
.size_layout{
  width: 100%;
  margin: 6.6rem auto 0;
  display: block;
}
.size_layout div{
  margin-left:3rem;
  text-align: center;
}
.size_layout div:last-child{
  width: 75%;
  margin-left:5.5rem;
  margin-top: 3rem;
}
.popup_link{
  margin: 3.5rem 0 8rem;
}

/* -----------------------------------
 color_image_wrap
------------------------------------*/
.color_image_wrap{
  margin: 10rem auto 0;
  padding: 0 2rem 0.4rem;
  display :flex;
  flex-direction: column;
}
.photo_paper{
  width: 100%;
  padding-top: 3rem;
  margin-bottom: 2rem;
  order: 1;
}
.photo_paper_inner{
  width: 80%;
  margin: 0 auto;
}
.txt_number{
  width: 100%;
  order: 2;
}
.color_image_wrap h2{
  font-size: 2.6rem;
  margin-bottom: 0;
  line-height: 1.6;
}
.color_info{
  width: 90%;
  margin: 0 auto;
  text-align: center;
  border: solid 1px #ccc;
  margin-top: 1.5rem;
  padding: 1rem 2rem;
}
.color_info .c_txt{
  font-size: 1.6rem;
  margin-bottom: .7rem;
}
.color_info .c_number{
  font-size: 1.3rem;
}
/* -----------------------------------
 select_color
------------------------------------*/
.select_color_ttl{
  margin-top: 1rem;
  margin-bottom: 2rem;
  padding-top: 2rem;
}
.select_color{
  max-width: 58rem;
  padding: 0 2rem;
  justify-content: center;
  gap: 1.5rem 4%;
}
.select_color div {
  width: 9%;
}

/* -----------------------------------
footer
------------------------------------*/
.comment{
  margin: 0 0 2rem;
  text-align: left;
}
.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;
}
  

.orderBtn_block{
  margin-top: 2rem;
}
.orderBtn{
  width: 34rem;
  margin: 0 auto;
  padding: 1.2rem 0;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 1.8rem;
  background-color: #ccc;
  border-radius: 3em;
}
.modal-content.order{
  padding: 3rem;
}
.modal_order{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 2rem;
}
.spacer{
  width: 100%;  
}
.pop_l-size, .pop_half-size{
  width: calc((100% - 3rem) / 2);
  padding: 2rem ;
}
.pop_l-size{
  margin: 1.5rem 1.5rem 1.5rem 0;  
}
.pop_half-size{
  margin: 1.5rem 0 1.5rem 1.5rem;  
}
.color_info.pop{
  width: 80%;
  margin: 0 auto;
}
.color_info.pop img{
  width: 50%;
  margin-bottom: 2rem;
}
.color_info.pop .c_number {
  margin-bottom: 2rem;
}
  
}

/* -----------------------------------------
 SP
------------------------------------------- */
@media screen and (max-width: 768px){
  html {
    /* font-size: calc(100vw/38); */
  }
  .f_pantone_logo img {
    width: 17rem;
  }
  .specimg_layout{
    display: block;
  }
  .specimg_layout .specimg_item {
    width: auto;
  }
  .specimg_layout .specimg_item:nth-child(2n){
    margin-left: 0;
  }
  .specimg_layout .specimg_item:nth-child(n+3){
    margin-top: 2rem;
  }
  .specimg_layout .specimg_item:nth-child(n+2){
    margin-top: 2rem;
  }
  .specimg_layout .specimg_item .ttl {
    line-height: 1.7;
  }
  .details_wrap{
    width: 100%;
  }
  .details_box.al-center {
    padding-bottom: 0;
  }
  .price-info-left {
    width: 80%;
    margin-bottom: 3rem;
  }
  .price-info-right {
    padding: 0;
  }
  .price-table {
    width: 100%;
    font-size: 1.5rem;
  }
  .price-table thead th {
    padding: 0.8em 1em;
  }
  .price-table thead th:first-child {
  }
  .price-table tbody th,
  .price-table tbody td {
    padding: 0.5em 0.9em;
  }
  .price-table tbody tr:first-child th,
  .price-table tbody tr:first-child td {
    padding-top: 1em;
  }
  .price-table tbody tr:last-child th,
  .price-table tbody tr:last-child td {
    padding-bottom: 1em;
  }
  .price-table tbody th {
    width: 6em;
    font-weight: bold;
  }
  
  /* -----------------------------------
  color_image_wrap
  ------------------------------------*/
  .photo_paper {
    margin-bottom: 0.7rem;
    padding-top: 2rem;
  }
  .photo_paper_inner {
    width: 96%;
  }
  /* select_color */
  .select_color {
    justify-content: center;
  }
  .select_color_ttl {
    margin-bottom: 1em;
    margin-top: 1rem;
    padding-top: 1em;
    font-size: 1.6rem;
  }
  .select_color {
    gap: 0.4rem 2.4%;
  }
  .select_color div {
    width: 10.4%;
  }
  
/* -----------------------------------
10月更新分
------------------------------------*/
.orderBtn_block{
  width: 90%;
  margin: 1em auto 0;
  padding-top: 0;
  border-top: none;
  text-align: center;
}
.orderBtn{
  display: inline-block;
  width: auto;
  margin: 0 auto 1rem;
  padding: .7em 1.8em;
  text-align: center;
  color: #fff;
  font-weight: 500;
  font-size: 1.6rem;
  background-color: #ccc;
  border-radius: 3em;
}
.orderBtn_block .orderBtn {
  margin-bottom: 0;
}
.iziModal_order {
  top: 3.2rem;
}
.modal-content.order{
  padding: 2rem;
  /* max-height: 60rem; */
  max-height: 81vh;
  overflow-y: auto;
}
.modal_order{
  display: block;
}
.spacer{
  display: none;
}
.pop_l-size, .pop_half-size{
  width: 100%;
  padding: 1rem 2rem 2rem;
}
.pop_l-size{
  margin: 0;  
}
.pop_half-size{
  margin: 1.5rem 0 0 0;  
}
.photo_paper .color_info {
  margin-top: 1em;
}
.color_info.pop{
  width: 100%;
  margin: 0 auto;
}
.color_info .c_txt{
  margin-bottom: 0.3rem;
}
.pop_l-size p, .pop_half-size p{
  margin-bottom: 2.5rem;  
}
.pop_l-size a, .pop_half-size a{
  font-size: 1.5rem;
  margin-top: 2.5rem;
}
.color_info.pop img{
  width: 80%;
  margin-bottom: 2.5rem;
}
.color_info.pop .c_number {
  margin-bottom: 2rem;
}
.color_info.pop .c_txt{
  font-size: 1.8rem;
}
/* -----------------------------------
 delivery payment
------------------------------------*/
.delivery, .payment{
  margin: 5rem auto 0;
}
.delivery .headding_ttl, .payment .headding_ttl{
  margin-bottom: 2rem;
}
.delivery .delivery_wrap, .payment .delivery_wrap{
  display: block;
}
.delivery_wrap .delivery_layout, .payment .delivery_wrap .delivery_layout{
  width: 100%;
  padding: 1.5rem;
  margin-top: 2rem;
}
.delivery_wrap .delivery_layout .pmc_sub_ttl{
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.payment .delivery_wrap .delivery_layout ul li{
  width: calc((100% - 2rem) / 3);
}
  .vismo-block {
    padding-bottom: 6rem;
  }
  
}

/* -----------------------------------------
 modal
------------------------------------------- */
.iziModal {
  width: 90%;
}
.modal-content {
  padding: 6%;
  background-color: #fff;
}
.is-modal-open {
  overflow: visible;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  border:none;
  border-radius: 50%;
  background-color: transparent;
  z-index: 2;
}
.modal-close::before,
.modal-close::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: .3rem;
  height: 2.8rem;
  background-color: #fff;
}
.modal-close::before {
  transform: rotate(45deg);
}
.modal-close::after {
  transform: rotate(-45deg);
}
.popup_inner{
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
}
.popup_img{
  width: 50%;
}
.popup_txt{
  width: 45%;
  margin-left: 5%;
}
.popup_txt > p{
  font-weight: bold;
  font-size: 2.4rem;
}
.popup_txt > p span{
  font-weight: bold;
  font-size: 1.6rem;
  display: block;
  margin-top: .8rem;
}
.popup_txt .info{
  margin-top: 4rem;
}
.popup_txt .info p{
  font-weight: bold;
  border-bottom: solid 1px #ccc;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
@media screen and (max-width: 820px){
.iziModal {
  width: 90%;
}
.modal-close {
  top: 2rem;
}
.modal-content {
  padding: 6%;
  background-color: #fff;
}
.popup_inner{
  display: block;
  margin-bottom: 2rem;
}
.popup_img{
  width: 100%;
  margin-bottom: 1rem;
}
.popup_txt{
  width: 100%;
  margin-left: 0;
}
.popup_txt > p{
  font-size: 1.8rem;
}
.popup_txt > p span{
  font-size: 1.4rem;
  margin-top: .5rem;
}
.popup_txt .info{
  margin-top: 1.5rem;
  font-size: 1.4rem;
}
.popup_txt .info p{
  padding-bottom: .6rem;
  margin-bottom: .6rem;
}
.popup_inner .btn_order{
    padding: 1rem;
  }

}