@charset "utf-8";
/* ==========================================================

title :
scope : /products/kitchen/first-reform/process/

last modify : 2019/11/21 TCI_goto メイリオで1文字落ちしている箇所の調整

2019/11/05 TCV_ヴィ/ Doan Thi Tuong Vi 新規作成
========================================================== */

body {
  font-size: 17px;
}

/* =================================
  #title  SP用
==================================== */
@media screen and (max-width: 600px){
  .title p {
    font-size: 4.2vw;
  }
}

/* =================================
  .heading_ky_block
==================================== */
.heading_ky_block {
  background: url(../image/img-main-pc.jpg) no-repeat 0 0 / contain;
}

@media screen and (max-width: 736px) {
  .heading_ky_block {
    background: url(../image/img-main-sp.jpg) no-repeat 0 0 / contain;
  }

  .heading_ky_block h1 .main_heading {
    letter-spacing: normal;
    margin-left: 8.5%;
  }

  .heading_ky_block h1 .main_heading_small {
    font-size: 4.8vw;
  }
}

/* =================================
  .main_lead
==================================== */
.main_lead {
  color: #010101;
  max-width: 746px;
  width: 95%;
}

@media screen and (max-width: 600px) {
  .main_lead {
    width: 100%;
  }
}

/* =================================
  .content
==================================== */
.content {
  margin-top: 2.5em;
}

.anchor_block + .content {
  margin-top: 2.4em;
}

.content .content_inner {
  margin: 1.5em auto 0;
  max-width: 864px;
  width: 98%;
}

.content_lead01 {
  margin: 0 auto;
  max-width: 746px;
  text-align: justify;
  width: 95%;
}

.content_lead02 {
  margin: 2em auto 0;
  max-width: 746px;
  text-align: justify;
  width: 95%;
}

.content_lead01 p,
.content_lead02 p,
.text_block p,
.note_block p {
  color: #010101;
}
.content_lead01 p:not(:first-child),
.content_lead02 p:not(:first-child),
.text_block p:not(:first-child),
.note_block p:not(:first-child) {
  margin-top: 1em;
}

.anchor_block {
  margin-top: 3%;
}

.ttl_first_reform04 > * {
  letter-spacing: .06em;
}

.secondary_content {
  margin-top: 3em;
}

.secondary_content .secondary_content_inner {
  box-sizing: border-box;
  margin: 2.4% auto 0;
  max-width: 744px;
  width: 98%;
}

.secondary_content .border_block01 {
  border: 1px solid #a5c674;
  max-width: 804px;
  padding: 2.7% 0 2.8%;
}

.secondary_content .block_content {
  margin: 0 auto;
  max-width: 744px;
  width: 93%;
}
.kome {
  padding-left: 1em;
  text-indent: -1em;
}
.fs_small {
  font-size: 88.24%;
}
.taC {
  text-align: center;
}
.mt05 {
  margin-top: 0.5em;
}

@media screen and (max-width: 600px) {
  .content,
  .anchor_block + .content {
    box-sizing: border-box;
  }

  .content .content_inner {
    margin-top: 1em;
  }

  .secondary_content {
    margin-top: 2em;
  }

  .content_lead01 {
    width: 100%;
  }

  .content_lead02 p {
    text-align: justify!important;
  }

  .secondary_content .block_content {
    width: 100%;
  }

  .secondary_content .border_block01 {
    padding: 2.5% 3% !important;
  }
}

#main a.btn {
  display: block;
  padding: 0.875em 0;
  margin: 1em auto 0;
  background: rgb(251,189,0);
  background: -moz-linear-gradient(top,  rgba(251,189,0,1) 0%, rgba(217,159,20,1) 45%, rgba(180,122,20,1) 100%);
  background: -webkit-linear-gradient(top,  rgba(251,189,0,1) 0%,rgba(217,159,20,1) 45%,rgba(180,122,20,1) 100%);
  background: linear-gradient(to bottom,  rgba(251,189,0,1) 0%,rgba(217,159,20,1) 45%,rgba(180,122,20,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbbd00', endColorstr='#b47a14',GradientType=0 );
  border-radius: 0.3em;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.375;
  letter-spacing: 0.15em;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
#main a.btn:visited {
  color: #fff;
}

.bg_series {
  margin: 0.6em auto 0;
  padding: 0.4em 0 0;
  background: url(../image/bg_grade.png) 0 0 / 100% auto repeat-y;
}
#series_spec table thead th b {
  display: inline-block;
  padding: 0 0.5em;
  margin: 0 0 0.3em;
  background: -webkit-linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  background: -o-linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  background: linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  font-size: 117.65%;
}
#series_spec table thead th .name {
  display: inline-block;
  padding: 0 0.5em;
  font-size: 94.12%;
  color: #fff;
}
#series_spec table thead th:nth-child(1) .name {
  background: #b590d0;
}
#series_spec table thead th:nth-child(2) .name {
  background: #977865;
}
#series_spec table thead th:nth-child(3) .name {
  background: #3f96c3;
}
#series_spec table tbody th,
#series_spec table tbody td {
  border-bottom: 1.8em solid transparent;
}
#series_spec table tbody th span {
  display: block;
  background: #fff;
  color: #5e9c01;
  font-size: 105.88%;
  line-height: 1.83;
  letter-spacing: 0.2em;
}
#series_spec table tbody td b {
  display: inline-block;
}
#series_spec table tbody td {
  vertical-align: top;
}
#construction_costs .flex {
  margin: 1.8em auto 0;
}
#construction_costs dl {
  background: #fff6e4;
  
}
#construction_costs dl dt {
  height: 7em;
  color: #678931;
  font-weight: bold;
  text-align: center;
}
#construction_costs dl dd {
  padding: 0 1em 1em;
}
#construction_costs dl dd .price {
  display: block;
  text-align: center;
}
#construction_costs dl dd .price .fs_large {
  font-size: 141.18%;
  font-weight: bold;
}
#construction_costs dl dd .bg_white {
  height: 12.4em;
  background: #fff;
  border-radius: 0.8em;
  margin: 0.4em 0 0;
  padding: 0.7em 1em 0;
}
#construction_costs dl dd .bg_white p {
  font-size: 88.24%;
}
#construction_costs dl dd .bg_white p:not(:first-child) {
  margin-top: 1em;
}

.be_af {
  position: relative;
}
.be_af::after {
  border-bottom: 1.12rem solid transparent;
  border-left: 1rem solid #85b242;
  border-top: 1.12rem solid transparent;
  content: "";
  display: block;
  height: 0;
  position: absolute;
  left: 50.2%;
  top: 54.5%;
  -moz-transform: translate(-50.2%, -54.5%);
  -ms-transform: translate(-50.2%, -54.5%);
  -o-transform: translate(-50.2%, -54.5%);
  -webkit-transform: translate(-50.2%, -54.5%);
  transform: translate(-50.2%, -54.5%);
  width: 0;
}

.column_content {
  width: calc(358 / 744 * 100%);
}

.column_content .text_block {
  font-size: 18px;
  font-weight: 600;
  padding: .85% 0;
  text-align: center;
}

.column_content:first-child .text_block {
  background: #fff6e4;
  color: #5e9c01;
}

.column_content:last-child .text_block {
  background: #5e9c01;
  color: #fff;
}

.column_content:first-child .text_block p {
  color: #5e9c01;
}

.column_content:last-child .text_block p {
  color: #fff;
}

#storage_costs table.series {
  margin: 1.5em auto 0;
}
#storage_costs table.series th b {
  display: inline-block;
  padding: 0 0.5em;
  margin: 0 0 0.3em;
  background: -webkit-linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  background: -o-linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  background: linear-gradient(rgba(246,250,169,0) 0%, rgba(246,250,169,0) 45%, rgba(246,250,169,1) 45%, rgba(246,250,169,1) 100%);
  font-size: 117.65%;
}
#storage_costs table.series td {
  font-size: 94.12%;
  vertical-align: top;
}
#storage_costs table.series td a.detail_btn {
  display: block;
  width: 9.2em;
  margin: 0 auto;
  border: 1px solid #3e2701;
  border-radius: 0.25em;
  background: -moz-linear-gradient(top, #ffd38a 0%, #ffc564 45%, #e99e20 100%);
  background: -webkit-linear-gradient(top, #ffd38a 0%, #ffc564 45%, #e99e20 100%);
  background: linear-gradient(to bottom, #ffd38a 0%, #ffc564 45%, #e99e20 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd38a', endColorstr='#e99e20',GradientType=0 );
  color: #644400;
  font-weight: bold;
  text-align: center;
  line-height: 2.28;
  text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}
#set_plan {
  margin-bottom: 2em;
}
#set_plan .plan_wrap .price dl {
  display: flex;
}
#set_plan .plan_wrap .price dl dt {
  padding: 1em 0 0 1.4em;
  width: 8em;
  font-weight: bold;
}
#set_plan .plan_wrap .price dl dd {
  padding: 0.3em 0 0.3em 0;
  font-size: 158.82%;
  font-weight: bold;
}
#set_plan .plan_wrap .price dl dd .tax {
  font-size: 50%;
}
#set_plan .plan_wrap .photo {
  background: #fffbf3;
}
#set_plan .plan_wrap .price {
  background: #fffbf3;
}
#set_plan .plan_wrap .price table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}
#set_plan .plan_wrap .price table th {
  width: 7em;
  padding: 0 0 0 1em;
  background: #ae9b90;
  color: #fff;
  line-height: 3.88;
  text-align: left;
}
#set_plan .plan_wrap .price table td {
  padding: 0.8em 0.5em;
}

@media screen and (max-width: 600px) {
  .scroll_sp {
    position: relative;
    overflow-x: scroll;
    padding-bottom: 0.5em;
  }
  .scroll_sp::-webkit-scrollbar {
    height: 0.534vw;
  }

  .scroll_sp::-webkit-scrollbar-track {
    background: #e8f2f8;
    border-radius: 0.534vw;
  }

  .scroll_sp::-webkit-scrollbar-thumb {
    background: #8dc1dc;
    border-radius: 0.534vw;
  }
  .bnr_sekou_jirei {
    display: block;
    width: 92%;
    margin: 1.5em auto 0;
  }
  .table_cost_quotes {
    width: 175%;
  }
  #main a.btn {
    width: 92%;
  }
  .content_lead02 {
    margin: 1em auto 0;
  }
  #construction_costs dl {
    width: 90%;
    padding: 1.2em 0 0;
    margin: 0 auto 1.5em;
  }
  #construction_costs dl:last-child {
    margin: 0 auto;
  }
  #construction_costs dl dt {
    height: auto;
  }
  #construction_costs dl dt img {
    display: block;
    width: 25vw;
    margin: 0 auto 0.6em;
  }
  #construction_costs dl dd .bg_white {
    height: auto;
    padding: 0.7em 1em;
  }
  .column_content {
    width: 98%;
    margin: 0 auto;
  }

  .column_content:last-child {
    margin-top: 10%;
  }

  .column_content .text_block {
    font-size: 5vw;
  }

  .be_af::after {
    border-bottom: none;
    border-left: 1.12rem solid transparent;
    border-right: 1.12rem solid transparent;
    border-top: 1rem solid #85b242;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  /*#storage_costs table.series {
    width: 20%;
  }*/
  #storage_costs table.series th,
  #storage_costs table.series td {
    padding: 1em 0.5em 0;
  }
  #storage_costs table.series th:nth-child(2),
  #storage_costs table.series td:nth-child(2) {
    border-left: 0.267vw solid #c6d9ab;
    /*border-right: 0.267vw solid #c6d9ab;*/
  }
  #storage_costs table.series tr:last-child td {
    padding: 1em 0;
  }
  .ttl_first_reform04 {
    margin-bottom: 0.7em;
  }
  #set_plan .plan_wrap .photo {
    display: block;
    width: 90%;
    margin: 0 auto 1em;
    background: #fffbf3;
  }
  #set_plan .plan_wrap .price table {
    width: 150%;
  }
  #set_plan .plan_wrap .price table tr:not(:last-child) th {
    border-bottom: 0.267vw solid #fff;
  }
  #set_plan .plan_wrap .price table td {
    border-top: 0.267vw solid #ae9b90;
    border-right: 0.267vw solid #ae9b90;
    border-bottom: 0.267vw solid #ae9b90;
  }
  #set_plan .plan_wrap .price dl dt {
    width: 4em;
  }
  #series_spec .none_pc table:nth-child(1) {
    background: #f3fbe8;
    margin-bottom: 1.5em;
  }
  #series_spec .none_pc table:nth-child(2) {
    background: #f2fee1;
    margin-bottom: 1.5em;
  }
  #series_spec .none_pc table:nth-child(3) {
    background: #eeffd7;
  }
  #series_spec .none_pc table th,
  #series_spec .none_pc table td {
    padding: 0 1em;
    border-bottom: 1em solid transparent;
  }
}

@media screen and (min-width: 601px) {
  .none_pc {
    display: none;
  }
  .bnr_sekou_jirei {
    display: block;
    width: 432px;
    margin: 2em auto 0;
  }
  .table_cost_quotes {
    display: block;
    width: 777px;
    margin: 1.5em auto 0;
  }
  .bg_series {
    width: 744px;
  }
  .bg_series td img {
		display: block;
		width: 228px;
		margin: 0 auto;
	}
  .series td img {
		display: block;
		width: 228px;
		margin: 0 auto;
	}
  #main a.btn {
    width: 28.5em;
  }
  #series_spec table {
    width: 724px;
    margin: 0 auto;
  }
  #series_spec table th:first-child,
  #series_spec table td:first-child {
    padding-right: 21px;
  }
  #series_spec table th:last-child,
  #series_spec table td:last-child {
    padding-left: 21px;
  }
  #series_spec table th:only-child,
  #series_spec table td:only-child {
    padding: 0;
  }
  #construction_costs .flex {
    width: 744px;
  }
  #construction_costs dl {
    width: 238px;
    padding: 1.2em 0 0;
  }
  #construction_costs dl dt img {
    display: block;
    width: 56px;
    margin: 0 auto 0.6em;
  }
  #storage_costs table.series {
    width: 774px;
  }
  #storage_costs table.series th,
  #storage_costs table.series td {
    width: 227px;
    padding: 1em 15px 0;
  }
  #storage_costs table.series th:nth-child(2),
  #storage_costs table.series td:nth-child(2) {
    border-left: 1px solid #c6d9ab;
    /*border-right: 1px solid #c6d9ab;*/
  }
  #storage_costs table.series tr:last-child td {
    padding: 1em 15px 1em;
  }
  #set_plan .plan_wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5em 0 0;
  }
  #set_plan .plan_wrap .photo {
    width: 320px;
  }
  #set_plan .plan_wrap .price {
    width: 392px;
  }
  #set_plan .plan_wrap .price table tr:not(:last-child) th {
    border-bottom: 1px solid #fff;
  }
  #set_plan .plan_wrap .price table td {
    border-top: 1px solid #ae9b90;
    border-right: 1px solid #ae9b90;
    border-bottom: 1px solid #ae9b90;
  }
}

.c-icon-swipe {

  z-index: 3;
  position: absolute;
  right:0;
/*
  right: calc(-75px);
*/
  top: calc(50% - 67px);
  /*overflow: hidden;*/
  height: 134px;
  width: 75px;
}

@media print, screen and (min-width: 600px) {
  .c-icon-swipe {
    display: none;
  }
}

.c-icon-swipe div {

    position: relative;
    left: calc(0px);
    /* top: calc(50% - 67px); */
    width: 134px;
    height: 134px;
    background: rgba(87, 115, 140, 0.9);
    border-radius: 67px;
}

.c-icon-swipe div img {
      width: 70%;
      position: absolute;

      right: 33%;
      top: 15%;
      transition: right 0.5s;
}

.c-icon-swipe div img.-visible {
   right: 30%;
}

.c-icon-swipe>div::after {
      content: "スワイプ";
      font-size: 12px;
      position: absolute;
      bottom: 24px;
      left: 24px;
      color: $color-font-swipe;
      font-weight: bold;
      letter-spacing: -1px;
    color: white;
}