@charset "utf-8";

/* ######################################################################################

　ボタン

###################################################################################### */

/* ====================================================
　基本スタイル
==================================================== */
.buttonStyle,
button.buttonStyle,
a.buttonStyle,
input.buttonStyle {
    box-sizing:border-box;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.95, #F1F1F1), color-stop(0.00, #F9F9F9)) !important;
    background: -webkit-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -moz-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -o-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: -ms-linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    background: linear-gradient(top, #F9F9F9 0%, #F1F1F1 95%) !important;
    padding: 0.6em 1.5em;
    text-align: center;
    vertical-align:middle;
    text-decoration: none;
    line-height:1;
    font-weight: normal;
    font-size:1.5rem;
    color: #757575;
    cursor: pointer;
    overflow: hidden;
}

@media print, screen and (max-width: 767px) {
.buttonStyle.xs-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media print, screen and (max-width: 991px) {
.buttonStyle.sm-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 1199px) {
.buttonStyle.md-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}

@media screen and (max-width: 9999px) {
.buttonStyle.lg-block {
    display: block;
    width: 100%;
    margin: 1em 0;
    padding: 0.75em 1em;
}
}


@media only screen and (min-width: 1000px) {
.buttonStyle.thin,
a.buttonStyle.thin,
input.buttonStyle.thin {
    padding: 0.3em 1em;
    font-size:1.4rem;
}
}
@media only screen and (max-width: 999px) {
.buttonStyle.thin,
a.buttonStyle.thin,
input.buttonStyle.thin {
    padding: 0.75em 1em;
    font-size:1.4rem;
}
}

/* ====================================================
　Load
==================================================== */
.buttonStyle.load,
a.buttonStyle.load,
input.buttonStyle.load {
}

/* ====================================================
　New
==================================================== */
.buttonStyle.new,
a.buttonStyle.new,
input.buttonStyle.new {
}

/* ====================================================
　Upload
==================================================== */
.buttonStyle.upload,
a.buttonStyle.upload,
input.buttonStyle.upload {
}

/* ====================================================
　del
==================================================== */
.buttonStyle.del,
a.buttonStyle.del,
input.buttonStyle.del {
}
/* ====================================================
　disable
==================================================== */
.buttonStyle.disable,
a.buttonStyle.disable,
input.buttonStyle.disable {
    background:#ffffff !important;
    border-color: #cccccc !important;
    color: #cccccc !important;
    cursor:default;
}
/* ====================================================
　regist
==================================================== */
.buttonStyle.regist,
a.buttonStyle.regist,
input.buttonStyle.regist {
}
/* ====================================================
　next
==================================================== */
.buttonStyle.next,
a.buttonStyle.next,
input.buttonStyle.next {
}

/* ====================================================
　autoAdd
==================================================== */
.buttonStyle.autoAdd,
a.buttonStyle.autoAdd,
input.buttonStyle.autoAdd {
}
@media print, screen and (min-width: 600px) {
    .buttonStyle.autoAdd,
    a.buttonStyle.autoAdd,
    input.buttonStyle.autoAdd {
        margin-left:1em;
    }
}
@media print, screen and (max-width: 599px) {
    .buttonStyle.autoAdd,
    a.buttonStyle.autoAdd,
    input.buttonStyle.autoAdd {
        display:block;
        margin-top:0.25em;
    }
}


/* ====================================================
  button
==================================================== */
.button {
  opacity: 1;
  display: inline-block;
  position: relative;
  border: none;
  -webkit-appearance: none;
  font-size: 16px;
  font-weight: 600;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
  vertical-align: middle;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}
@media print, screen and (min-width: 768px) {
  a.button.block,
  .button.block {
      display: block;
      width: 100%;
      margin: 12px auto;
  }

}
@media screen and (max-width: 767px) {
  a.button.block,
  .button.block {
      display: block;
      width: 100%;
      margin: 0 auto;
  }
}

/* ====================================================
大きさ
==================================================== */
@media print, screen and (min-width: 768px) {
  .button {padding: 1.15em 0.75em; max-width: 335px;}
  .button.small {padding: 0.75em 1.25em; width: 226px;}
  .button.small.paddingWide {padding: 0.75em 0.5em;}
}
@media screen and (max-width: 767px) {
  .button {padding: 1.15em 1.25em;}
  .button.sp-medium{padding: 1em; font-size: 1.4rem;}
  .button.small {padding: 0.75em 1.25em; width: 226px;}
  .button.smaller {padding: 0.5em; width: 226px;}
  .button.small.paddingWide {padding: 0.75em 0.5em;}
}


/* ====================================================
左よせ
==================================================== */
.button.alignL{text-align: left!important;}

/* ====================================================
角丸
==================================================== */
.button.round {border-radius: 3px;}
.button.round2 {border-radius: 3em;}

/* ====================================================
  色
==================================================== */
.button.orange {
  background: #CF5749;
  border: 1px solid #CF5749;
  color: #fff;
}

.button.orange.reverse {
  background: #fff;
  color: #CF5749;
}
.button.orange.reverse:hover {
  background: #CF5749;
  color: #fff;
}


.button.red {
background: #C30216;
border: 1px solid #C30216;
color: #fff;
}
.button.red:hover {
background: #D43936;
}
.button.red.reverse {
  background: #fff;
  border: 1px solid #C30216;
  color: #C30216;
  }
  .button.red.reverse:hover {
  background: #C30216;
  color: #fff;
  }


.button.red.reverse.text-bk {
  color: #000;
}
.button.red.reverse.text-bk:hover{
  color: #fff;
}

.button.gray {
  border: 1px solid #D7D7D7;
  background: #F2F2F2;
  color: #707070;
}
.button.gray:hover {
  background: #e8e8e8;
  color: #707070;
}
.button.gray.reverse {
  background: #fff;
  border: 1px solid #ddd;
  color: #000;
}
.button.gray.reverse:hover {
  background: #f1f1f1;
  opacity: 1;
  color: #000;
}

input.button.gray {padding: 1.15em 1.25em;}

.button.disabled:hover,
.button.disabled{border-color: #D7D7D7; background: #F2F2F2; color: #707070; cursor: inherit; pointer-events: none;}

@media print, screen and (min-width: 768px) {
  .button.orange:hover {
    background: #fff;
    opacity: 1;
    color: #CF5749;
  }
}
@media only screen and (max-width: 767px){
  .button.spBgRed {background-color: #C30216; border: 1px solid #C30216;}
}




/* ====================================================
  矢印
==================================================== */
.button.arrow:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 6px;
  height: 12px;
  transform: translateY(-50%);
  display: block;
  background-image: url(../img/common/icon_arrow_white.svg);
  background-size: 100% auto;
  font-size: 16px;
}
.button.reverse.arrow:after {
  background-image: url(../img/common/icon_arrow.svg);
}
.button.orange.arrow:hover:after {
  background-image: url(../img/common/icon_arrow_orange.svg);
}



/* ====================================================
	ボタンボックス
==================================================== */
.buttonBox {
    text-align: center;
}
.buttonBox.pageMove {
    margin-top:20px;
    margin-bottom:40px;
}
.buttonBox p { text-align: center; }
.buttonBox li .button {
    display: block;
    padding: 0.75em;
}
.buttonBox.last li .button {
  padding: 1.15em 1.25em;
}

.buttonBox.center .row {
    display: inline-block;
    width: 103%;
    max-width: 450px;
}
.buttonBox.center.single .row { max-width: 200px; }

.buttonBox.center .row.wide{
    max-width: 700px;
}

.buttonBox .row .buttonStyle,
.buttonBox .row a.buttonStyle,
.buttonBox .row input.buttonStyle {display:block; width:100%;}

.buttonBox .double {max-width: 718px; margin: 24px auto 0;}

@media print, screen and (max-width: 767px) {
.buttonBox > .row > .col-xs-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
.buttonBox.center .row.wide{
    max-width: 450px;
}
}

@media print, screen and (max-width: 991px) {
.buttonBox > .row > .col-sm-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 1199px) {
.buttonBox > .row > .col-md-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media screen and (max-width: 9999px) {
.buttonBox > .row > .col-lg-12 {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
}
}

@media print, screen and (min-width: 768px) {
  .buttonBox.last{margin-top: 150px; margin-bottom: 0;}
  .buttonBox.last ul{display: flex; justify-content: center; flex-direction: row-reverse;}
  .buttonBox.last.reverse ul{flex-direction: row;}
  .buttonBox.last li{width: 335px;}
  .buttonBox.last li + li{margin-right: 25px;}
}
@media only screen and (max-width: 767px){
  .buttonBox.last{
    margin-top: 80px;
    margin-bottom: 0;
  }
  .buttonBox.last ul li{display: block;}
  .buttonBox.last ul li + li{margin-top: 10px;}
}


/* buttonList */
.buttonList{display: flex; flex-wrap: wrap; margin-left: -4px; margin-right: -4px;}

.buttonList__item{width: 50%; padding: 0 4px; margin: 5px 0;}
.buttonList__item.col1{width: 100%;}

.buttonList__item .button{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
@media print, screen and (min-width: 768px) {
}
@media only screen and (max-width: 767px){
}



/* ######################################################################################

　ボックス

###################################################################################### */

/* ====================================================
　ボーダーボックス
==================================================== */
.contentsBoxBorder {
    border:1px solid #e1e1e1;
    background:#ffffff;
}

@media only screen and (min-width: 1000px) {
    .contentsBoxBorder {
        padding: 15px 22px;
    }
}
@media only screen and (max-width: 999px) {
    .contentsBoxBorder {
        padding: 15px 10px;
    }
}
/* ====================================================
　ボックス
==================================================== */
.contentsBox {
}
.contentsBox + .contentsBox {
    margin-top:30px;
}

/* ====================================================
  背景ボックス
==================================================== */
.bgArea {background: #F4F8FE;}
.bgArea.gray{background: #F1F1F1;}

@media print, screen and (min-width: 768px) {
    .bgArea {padding: 40px 20px;}
}
@media only screen and (max-width: 767px){
    .bgArea {padding: 50px 15px; margin-left: -15px; margin-right: -15px;}
}



/* ######################################################################################

　表示・非表示

###################################################################################### */
@media print, screen and (min-width: 768px) {
  p.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp {display: none!important;}
  span.sp, img.sp, em.sp, br.sp {display: none!important;}
}
@media screen and (max-width: 767px) {
  p.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc {display: none!important;}
  span.pc, img.pc, em.pc, br.pc {display: none!important;}
}




/* ######################################################################################

　リスト

###################################################################################### */
/* ====================================================
  numberList
==================================================== */
.numberList {
  counter-reset: count 0;
}
.numberList li{position: relative; padding-left: 1.5em; font-size: 1.4rem; line-height: 1.71;}
.numberList li:before {
  content: counter(count) ". ";
  counter-increment: count 1;
  position: absolute;
  top: 0;
  left: 0;
}
.numberList.numBold li:before{
font-weight: bold;
}

@media print, screen and (min-width: 768px) {
  .numberList li + li{margin-top: 1.5em;}
}
@media only screen and (max-width: 767px){
  .numberList li + li{margin-top: 1em;}
}


/* ====================================================
dotList
==================================================== */
.dotList {
}
.dotList li{position: relative; padding-left: 1em; font-size: 1.4rem; line-height: 1.71;}
.dotList li:before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}


/* ====================================================
asteriskList
==================================================== */
.asteriskList {
}
.asteriskList li{position: relative; padding-left: 1em; font-size: 1.4rem; line-height: 1.71;}
.asteriskList li:before {
  content: "※";
  position: absolute;
  top: 0;
  left: 0;
}


/* ====================================================
largeDotList
==================================================== */
.largeDotList {
}
.largeDotList li{position: relative; padding-left: 1.25em; font-size: 1.4rem; line-height: 1.71;}
.largeDotList li:before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
}


/* ====================================================
countList
==================================================== */
.countList {counter-reset: list;}
.countList li {position: relative; padding-left: 35px; line-height: 1.7143;}
.countList li .num {
display: inline-block;
position: absolute;
left: 0;
top: -1px;
width: 26px;
height: 26px;
padding-top: 2px;
border-radius: 50%;
text-align: center;
font-weight: 700;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
background: #C30216;
color: #fff;
}
.countList li .num + .num {top: 30px;}

@media print, screen and (min-width: 768px) {
.countList.large li {max-width: none;}
.countList li.link {padding-bottom: 10px;}
.countList li + li {margin-top: 30px;}
.countList li.wide + li {margin-top: 172px;}
.countList li .num {font-size: 1.9rem;}
}
@media screen and (max-width: 767px) {
.countList li {padding-left: 30px;}
.countList li .num {
  top: -1px;
  width: 25px;
  height: 25px;
  font-size: 1.8rem;
}
}

/* ====================================================
stepBox
==================================================== */
.stepBox .image picture {display: block;}
.stepBox .image img{max-width: 100%; height: auto;}
.stepBox .detail .button {margin-left: 0;}
.stepBox .cation {
display: block;
padding-left: 1em;
text-indent: -1em;
color: #C30216;
}

@media print, screen and (min-width: 768px) {
.stepBox .step {display: flex; justify-content: space-between; flex-wrap: nowrap;}
.stepBox .image{width: 50%; max-width: 478px;}
.stepBox .detail {width: 50%; max-width: 430px; min-width: 320px;}

.stepBox + .stepBox{margin-top: 150px;}
.stepBox .step + .step {margin-top: 90px;}
.stepBox .step + .step.mt15 {margin-top: 15px;}

.stepBox .detail {padding-top: 0; padding-left: 25px;}
.stepBox .stepTitle {margin-bottom: 27px;}
.stepBox .stepTitle .step {padding-top: 20px;}
.stepBox .stepSubTitle {margin-top: 2em; margin-bottom: 0.5em; font-size: 1.9rem; line-height: 1.5;}
.stepBox .stepMiniTitle {margin-bottom: 1.5em; font-size: 1.9rem; line-height: 1.5;}
.stepBox .leftBorderTitle {margin-bottom: 30px;}
.stepBox .detail .button {
  margin-top: 20px;
  margin-left: -35px;
  margin-bottom: 30px;
}
}
@media screen and (max-width: 767px) {
.stepBox + .stepBox {margin-top: 27px;}
.stepBox .stepTitle {margin-bottom: 16px;}
.stepBox .stepSubTitle {margin-top: 2em; margin-bottom: 0.25em; font-size: 1.6rem;}
.stepBox .stepMiniTitle {margin-bottom: 1.5em; font-size: 1.5rem;}
.stepBox .image {max-width: 250px; margin: 0 auto 16px;}
.stepBox .leftBorderTitle + .image {margin-top: 33px;}
.stepBox + .stepBox {margin-top: 60px;}
.stepBox .detail{margin-top: 40px;}
.stepBox .step.mt15 .detail{margin-top: 15px;}
.stepBox .detail li + li {margin-top: 10px;}
.stepBox .detail .button {margin-top: 10px; margin-bottom: 20px;}
}


/* ====================================================
flowBox
==================================================== */
.flowBox{display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 5.5em; margin-bottom: 5.5em;}
.flowBox__item{position: relative;}
.flowBox__item__img{text-align: center;}
.flowBox__item__text{
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 3em;
  line-height: 1.47;
  font-weight: bold;
}
.flowBox__item__text .num{
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  padding-top: 2px;
  border-radius: 50%;
  text-align: center;
  font-weight: 700;
  line-height: 1;
  background: #C30216;
  color: #fff;
}
.flowBox__item__text .marker{
  display: inline-block;
  line-height: 1.5;
  background: -moz-linear-gradient(top, rgba(195, 2, 22, 0) 55%, rgba(195, 2, 22, 0.1) 55%, rgba(195, 2, 22, 0.1) 100%);
  background: -webkit-linear-gradient(top, rgba(195, 2, 22, 0) 55%, rgba(195, 2, 22, 0.1) 55%, rgba(195, 2, 22, 0.1) 100%);
  background: linear-gradient(to bottom, rgba(195, 2, 22, 0) 55%, rgba(195, 2, 22, 0.1) 55%, rgba(195, 2, 22, 0.1) 100%);
}
@media print, screen and (min-width: 768px) {
  .flowBox__item{width: 25%;}
  .flowBox__item + .flowBox__item:before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -2em;
    background-image: url(../img/tpl2025/contents/guide/flow/arrow.svg);
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background-size: contain;
  }
  .flowBox__item__text{font-size: 1.7rem;}
  .flowBox__item__text .num{
    top: -0.5em;
    left: 1.5em;
    width: 26px;
    height: 26px;
    font-size: 1.9rem;
  }
  .flowBox__item__text .marker{padding: 0 1em;}
}
@media screen and (max-width: 767px) {
  .flowBox__item{width: 46%; margin-bottom: 1.5em;}
  .flowBox__item:nth-of-type(2n):before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -1.75em;
    background-image: url(../img/tpl2025/contents/guide/flow/arrow.svg);
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    background-size: contain;
  }
  .flowBox__item__text{font-size: 1.6rem;}
  .flowBox__item__text .num{
    top: 0.5em;
    left: 0.5em;
    width: 30px;
    height: 30px;
    font-size: 1.8rem;
  }
  .flowBox__item__text .marker{padding: 0 0.5em;}
}


/* ====================================================
　columnList
==================================================== */
@media print, screen and (min-width: 768px) {
    .columnList{display: flex; justify-content: space-between; flex-wrap: nowrap;}
    .columnList + .columnList {margin-top: 6em;}
    .columnListitem{width: 43.788%;}
}
@media screen and (max-width: 767px) {
    .columnList + .columnList {margin-top: 5em;}
    .columnListitem + .columnListitem{margin-top: 75px;}
}




/* ######################################################################################

　selectDesignPreview

###################################################################################### */
.selectDesignPreview .image{text-align: center;}
.selectDesignPreview .image span,
.selectDesignPreview .image a {
  margin: 0 6px 6px;
  display: inline-block;
  margin-bottom: 33px;
  box-shadow: 0 0 3px rgba(0,0,0,0.16);
  max-width: 430px;
}


.selectDesignPreview img{width: 100%; max-width: 430px;}
.selectDesignPreview .designNumber{
  text-align: center;
  margin-bottom: 14px;
  font-weight: bold;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
  .selectDesignPreview{max-width: 230px; margin-left: auto; margin-right: auto;}
}


/* typeTag */
.typeTag{display: flex;}
.typeTag span{
  background: #2CB7CB;
  padding: 0.5em 0.25em 0.3em;
  color: #fff;
  text-align: center;
  display: inline-block;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 90px;
}


.typeTag span.icon_1{background: #006374;}
.typeTag span.icon_2{background: #006374;}
.typeTag span.icon_3{background: #458F6B; font-size: 1.2rem;}
.typeTag span.icon_4{background: #2CB7CB;}
.typeTag span.icon_5{background: #F3A9A7;}
.typeTag span.icon_6{background: #B8966F;}

.typeTag span.icon_atena {background: #CB3E2C;}
.typeTag span.icon_inkjet {background: #458F6B; letter-spacing: -1px;}
.typeTag span.icon_kitteside {background: #E7ABA8;}


/* スライダーに転用 */
.selectDesignPreview .slick-slide .typeTag{margin-left: 6px; margin-right: 6px;}
.selectDesignPreview .slick-slide .image a {margin: 0 6px 6px;}
.selectDesignPreview .slick-slide .designNumber {
  line-height: 1.45;
  margin-bottom: 0;
  text-decoration: underline;
  color: #2CB7CB;
}
@media screen and (max-width: 767px) {
  .selectDesignPreview.slider{max-width: 100%;}
}




/* ######################################################################################

　テキスト

###################################################################################### */
.txt-red{color: #C30216; vertical-align: baseline;}
.txt-blue{color: #2CB7CB; vertical-align: baseline;}
.txt-bold{font-weight: bold;}


@media print, screen and (min-width: 768px) {
  .txt-large{font-size: 2.2rem;}
  .txt-medium{font-size: 1.6rem;}
  .pc-alignC{text-align: center;}
}
@media only screen and (max-width: 767px){
  .txt-large{font-size: 2.2rem;}
  .txt-medium{font-size: 1.6rem;}
  .sp-alignC{text-align: center;}
}



/* .leadText */
.leadText{font-weight: bold;}
.leadText.small{font-weight: normal;}

@media print, screen and (min-width: 768px) {
  .leadText{text-align: center; margin-bottom: 25px; font-size: 1.8rem;}
  .leadText.small{font-size: 1.4rem;}
}
@media only screen and (max-width: 767px){
  .leadText{margin-bottom: 25px; font-size: 1.4rem;}
}



/* ######################################################################################

　タイトル

###################################################################################### */

/* ====================================================
　下線つき
==================================================== */
.bottomBorderTitle {position: relative; text-align: center;}
.bottomBorderTitle:before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: block;
    height: 3px;
    background: #C30216;
}
.bottomBorderTitle.purple:before {background: #737492;}

.bottomBorderTitle.side {margin-bottom: 20px; padding-bottom: 12px; font-size: 1.8rem;}
.bottomBorderTitle.side:before {width: 44px;}

@media print, screen and (min-width: 768px) {
  .bottomBorderTitle {margin-bottom: 1.15em; padding-bottom: 21px; font-size: 3rem;}
  .bottomBorderTitle:before {
      bottom: 0;
      width: 70px;
      height: 5px;
  }
  .bottomBorderTitle.side:before{
      height: 3px;
  }
  * + .bottomBorderTitle{margin-top: 140px;}
  .typeSelect + *{margin-top: 80px;}
}
@media only screen and (max-width: 767px) {
    .bottomBorderTitle {
      margin-bottom: 1em;
      padding-bottom: 15px;
      font-size: 2.2rem;
    }
    .bottomBorderTitle:before {width: 50px;}
    * + .bottomBorderTitle{margin-top: 85px;}
    .typeSelect + *{margin-top: 50px;}
}

/* 説明文
-------------------------------------*/
.bottomBorderTitle + .copy {text-align: center;}
@media print, screen and (min-width: 768px) {
    .bottomBorderTitle + .copy {
        margin-top: 24px;
        margin-bottom: 42px;
        font-size: 1.6rem;
        line-height: 1.3125;
    }
}
@media only screen and (max-width: 767px) {
    .bottomBorderTitle + .copy {
        margin-top: 21px;
        margin-bottom: 36px;
        line-height: 1.7143;
    }
}


/* ====================================================
　メインカラー帯タイトル
==================================================== */
.titleMainColor {
    margin-bottom: 1.25em;
    padding:0.5em;
    line-height:1.2;
    font-weight: normal;
    color: #fff;
}
@media only screen and (min-width: 1000px) {
.titleMainColor {
    font-size:1.7rem;
}
}
@media only screen and (max-width: 999px) {
.titleMainColor {
    margin-left:-10px;
    margin-right:-10px;
    padding:1.25em 1em;
    font-size:1.7rem;
}
}

/* ====================================================
　タブ＋キャプションタイトル
==================================================== */


.titleTabCaption {
    border-bottom:5px solid #555555;
    margin-bottom:1.25em;
    text-align:left;
    line-height:1;
    font-weight:normal;
    font-size:1.5rem;
	font-family:'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro','メイリオ','Meiryo','ＭＳ Ｐゴシック',sans-serif;
}
.titleTabCaption span {
    display:inline-block;
    background:#555555;
    padding:0.25em 0.75em 0.1em;
    color:#ffffff;
    font-size:2.0rem;
}
.titleTabCaption small {
    display:inline-block;
    position:relative;
    top:-0.15em;
    margin-left:1em;
    font-size:1.6rem;
}

.titleTabCaption.step1 {border-color:#c10d23;}
.titleTabCaption.step2 {border-color:#006837;}
.titleTabCaption.step3 {border-color:#1b1464;}

.titleTabCaption.step1 span {background-color:#c10d23;}
.titleTabCaption.step2 span {background-color:#006837;}
.titleTabCaption.step3 span {background-color:#1b1464;}

@media only screen and (min-width: 1000px) {
}
@media only screen and (max-width: 999px) {
}

/* ====================================================
  boldTitle
==================================================== */
.boldTitle{
  margin-bottom: 1.5em;
  font-size: 1.8rem;
}
.boldTitle.large{
  font-size: 2rem;
}

@media print, screen and (min-width: 768px) {
    * + .boldTitle{margin-top: 30px;}
}
@media only screen and (max-width: 767px){
  * + .boldTitle{margin-top: 30px;}
}


/* ====================================================
  bgTitle
==================================================== */
.bgTitle{
  font-size: 1.6rem;
  background-color: #CF5749;
  padding: 0.6em;
  text-align: center;
  color: #fff;
}
.bgTitle.red {background-color: #C30216;}

@media print, screen and (min-width: 768px) {
  .bgTitle + *{margin-top: 80px;}
  .bgTitle + .typeSelect{margin-top: 0;}
}
@media only screen and (max-width: 767px){
  .bgTitle{margin-left: -15px; margin-right: -15px;}
  .bgTitle + *{margin-top: 50px;}
  .bgTitle + .typeSelect{margin-top: 0;}
}



/* ====================================================
  stepTitle
==================================================== */
.stepTitle{letter-spacing: 0.05em; font-weight: 700; line-height: 1;}
.stepTitle .step {display: block;}

@media print, screen and (min-width: 768px) {
  .stepTitle {font-size: 2.2rem; line-height: 1.5; font-feature-settings: "palt";}
  .stepTitle.small {font-size: 1.9rem;}
  .stepTitle .step img{width: auto; height: 62px; max-width: 100%;}
}
@media only screen and (max-width: 767px){
  .stepTitle {font-size: 1.5rem; line-height: 1.5;}
  .stepTitle .step img{width: auto; height: 26px;}
}


/* ====================================================
  leftBorderTitle
==================================================== */
.leftBorderTitle.wide {margin-bottom: 2em;}
.leftBorderTitle.bottomZero {margin-bottom: 0;}
.leftBorderTitle.bottomZero + .formBloc {padding-top: 5px;}
.leftBorderTitle span {
  display: block;
  border-left: 5px solid #C30216;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.leftBorderTitle.purple span {border-left: 5px solid #737492;}

@media print, screen and (min-width: 768px) {
  .leftBorderTitle {
    font-size: 22px;
    line-height: 1.27;
  }
  .leftBorderTitle span {padding-left: 25px;}
  .leftBorderTitle.small{font-size: 2rem;}

  * + .leftBorderTitle{margin-top: 100px;}
  .leftBorderTitle + *{margin-top: 35px;}
  .leftBorderTitle + .leftBorderTitleInner{padding-left: 30px; padding-right: 30px;}
  .leftBorderTitle + img{margin-top: 40px;}
  .leftBorderTitle + .inputListBox{margin-top: 17.5px;}
}
@media only screen and (max-width: 767px){
  .leftBorderTitle {
    font-size: 20px;
    line-height: 1.4;
  }
  .leftBorderTitle span {padding-left: 15px;}
  .leftBorderTitle.bottomZero + .formBloc {padding-top: 15px;}

  * + .leftBorderTitle{margin-top: 35px;}
  .leftBorderTitle + *{margin-top: 16px;}
  .leftBorderTitle + img,
  .leftBorderTitle + .img{margin-top: 30px;}
}
/* ====================================================
  exclamationTitle
==================================================== */
.exclamationTitle{margin-bottom: 25px;}
.exclamationTitle:before{
  content: "";
  position: relative;
  top: -0.1em;
  display: inline-block;
  vertical-align: middle;
  width: 1em;
  height: 1em;
  margin-right: 0.5em;
  background-image: url(../img/contents/ico_exclamation.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  font-weight: 700;
  letter-spacing: 0.1em;
}
@media print, screen and (min-width: 768px) {
  .exclamationTitle{font-size: 2.0rem;}
  .exclamationTitle.small{font-size: 1.7rem;}
}
@media screen and (max-width: 767px) {
  .exclamationTitle{font-size: 2.0rem;}
}



/* ====================================================
　titleBold
==================================================== */
@media print, screen and (min-width: 768px) {
  .titleBold{font-size: 1.9rem;}
}
@media screen and (max-width: 767px) {
  .titleBold{font-size: 1.5rem;}
}




/* ######################################################################################

　Box

###################################################################################### */
.borderBox {
    border:1px solid #e1e1e1;
    border-radius:3px;
    background:#ffffff;
}
.borderBox:after {
    content:"";
    display:table;
    clear:both;
}
@media only screen and (min-width: 1000px) {
    .borderBox {
        padding:1.5%;
    }
}
@media only screen and (max-width: 999px) {
    .borderBox {
        padding:1.5%;
    }
}



/* ######################################################################################

　dl

###################################################################################### */

/* ====================================================
　項目横並び
==================================================== */
dl.innerInline + dl.innerInline {margin-top:0.25em;}

dl.innerInline dt,
dl.innerInline dd {
    display:inline-block;
}


/* ######################################################################################

　テーブル

###################################################################################### */
/* ====================================================
　基本設定
==================================================== */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
caption {
    text-align: left;
    font-size:80%;
    font-weight: bold;
}
th,
td {
    border-color: #DDDDDD;
    padding: 0.5em;
    text-align: left;
    font-weight: normal;
}
#undercolumn .subTotal .pricebox {width: 100%;}
.pricebox td .price_r{color: #f00; font-weight: bold;}

@media print, screen and (min-width: 768px) {
    th {
        background: #F4F8FE;
        padding: 1.15em;
        vertical-align: middle;
        font-size: 1.5rem;
    }
    td {
      padding: 1.15em;
      font-size: 1.5rem;
    }
}

@media screen and (max-width: 767px) {
    th {
      background: #F4F8FE;
      padding: 1em;
      font-size: 1.4rem;
    }
    td {
      padding: 1em;
      font-size: 1.4rem;
    }
}
/* ====================================================
　囲み
==================================================== */
.borderHorizon th,
.borderHorizon td { border-width: 1px 0; }

table.borderBox{border: none; padding: 0;}
.borderBox th, .borderBox td {
  border-width: 1px;
}
.borderBox tr + tr td, .borderBox tr + tr th {
  border-top-width: 0;
}
.borderBox th + th,
.borderBox th + td,
.borderBox td + td,
.borderBox td + td {
  border-left-width: 0;
}

/* ====================================================
　線種
==================================================== */
.borderSolid th { border-style: solid; }
.borderSolid td { border-style: solid; }
.borderSolid td:before { border-style: solid; }
.borderDotted th { border-style: dotted; }
.borderDotted td { border-style: dotted; }
.borderDotted td:before { border-style: dotted; }
.borderDashed th { border-style: dashed; }
.borderDashed td { border-style: dashed; }
.borderDashed td:before { border-style: dashed; }
/* ====================================================
　*のときTHをサイドに作る
==================================================== */
table.cell-xs-create td:before,
table.cell-sm-create td:before,
table.cell-md-create td:before,
table.cell-lg-create td:before {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 1px 0 0;
    border-color: #cccccc;
    background: #eeeeee;
    width: 6em;
    height: 100%;
    padding: 0.5em;
}
table.borderHorizon.cell-xs-create td:before,
table.borderHorizon.cell-sm-create td:before,
table.borderHorizon.cell-md-create td:before,
table.borderHorizon.cell-lg-create td:before { border: none; }

@media screen and (max-width: 767px) {
/* ====================================================
　xsのときcellをBlock
==================================================== */
    table.xs-block { display: block; }
    table.xs-block caption,
    table.xs-block thead,
    table.xs-block tbody,
    table.xs-block tr,
    table.xs-block th,
    table.xs-block td { display: block; }
    table.xs-block th,
    table.xs-block td { margin-bottom: -1px; }
    table.xs-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-xs-create th { display: none; }
    table.cell-xs-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-xs-create td:before { content: attr(title); }
}

@media screen and (max-width: 999px) {
/* ====================================================
　smのときcellをBlock
==================================================== */
    table.sm-block { display: block; }
    table.sm-block caption,
    table.sm-block thead,
    table.sm-block tbody,
    table.sm-block tr,
    table.sm-block th,
    table.sm-block td { display: block; }
    table.sm-block th,
    table.sm-block td { margin-bottom: -1px; }
    table.sm-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-sm-create tr:first-child th { display: none; }
    table.cell-sm-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-sm-create td:before { content: attr(title); }
}

@media screen and (max-width: 1199px) {
/* ====================================================
　mdのときcellをBlock
==================================================== */
    table.md-block { display: block; }
    table.md-block caption,
    table.md-block thead,
    table.md-block tbody,
    table.md-block tr,
    table.md-block th,
    table.md-block td { display: block; }
    table.md-block th,
    table.md-block td { margin-bottom: -1px; }
    table.md-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-md-create th { display: none; }
    table.cell-md-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-md-create td:before { content: attr(title); }
}

@media screen and (max-width: 9999px) {
/* ====================================================
　lgのときcellをBlock
==================================================== */
    table.lg-block { display: block; }
    table.lg-block caption,
    table.lg-block thead,
    table.lg-block tbody,
    table.lg-block tr,
    table.lg-block th,
    table.lg-block td { display: block; }
    table.lg-block th,
    table.lg-block td { margin-bottom: -1px; }
    table.lg-block th {
        padding-top: 0;
        padding-bottom: 0;
    }
    table.cell-lg-create th { display: none; }
    table.cell-lg-create td {
        position: relative;
        overflow: hidden;
        padding-left: 7em;
    }
    table.cell-lg-create td:before { content: attr(title); }
}


/* ====================================================
　estimateTable
==================================================== */
.estimateTable th,
.estimateTable td{
  padding: 0.65em;
}
.estimateTable th{
  width: 175px;
  font-size: 1.4rem;
}
.estimateTable td{
  text-align: right;
  font-size: 1.5rem;
}
.estimateTable .total td{
  padding-top: 1.25em;
  padding-bottom: 1.25em;
  font-size: 2.0rem;
  font-weight: bold;
}
.estimateTable .title{
  text-align: center;
  font-weight: bold;
}
.estimateTable .title.normal {font-weight: normal;}

/* wide */
.estimateTable.wide td{font-weight: bold;}
@media print, screen and (min-width: 768px) {
  .estimateTable.wide th,
  .estimateTable.wide td{padding: 1em 0.75em;}
  .estimateTable.wide .title{padding: 0.65em;}
}
@media screen and (max-width: 767px) {
}


/* total */
@media print, screen and (min-width: 768px) {
  .estimateTable.total th,
  .estimateTable.total td{padding-top: 1em; padding-bottom: 1em;}
  .estimateTable.total .total td{padding-top: 1.5em; padding-bottom: 1.5em;}
  .estimateTable.total th{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .estimateTable.total td{font-weight: bold;}
}


/* address */
.estimateTable.address{}
@media print, screen and (min-width: 768px) {
  .estimateTable.address th:not(.title){width: 125px;}
  .estimateTable.address th:not(.title),
  .estimateTable.address td:not(.title){font-size: 1.5rem; padding: 1em 2em 1em 3em;}
}
@media screen and (max-width: 767px) {
  .estimateTable.address th{width: 90px;}
  .estimateTable.address th:not(.title),
  .estimateTable.address td:not(.title){text-align: left; font-size: 1.3rem; padding: 1em 1.5em;}
  .estimateTable.address th.title{font-size: 1.5rem;}
}

.estimateTable td ul.design_list li {
    display: inline;
}
.estimateTable td ul.design_list li:not(:first-child):before {
    content:'・'
}

/* ====================================================
discountText
==================================================== */
.discountText {margin-bottom: -10px; color: #E98B3C; font-size: 2.8rem;}
.discountText span.large {
  position: relative;
  display: inline-block;
  top: -3px;
  padding-left: 3px;
  font-size: 3.6rem;
  letter-spacing: 1px;
  font-weight: bold;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
  .discountText {text-align: center;}
}



/* ====================================================
　selectCount
==================================================== */
.selectCount{}
.selectCountResult{
  position: relative;
  display: none;
  padding-top: 90px;
}
.selectCountResult.on{display: block;}

.selectCountResult:before{
  content: "";
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background-image: url(../img/contents/ico_down.svg);
  background-size: contain;
}


@media print, screen and (min-width: 768px) {
  .selectCount .formBloc input[type="number"]{max-width: 80%;}
  .selectCount .formInnerBloc input[type="number"]{max-width: 60%;}
}
@media screen and (max-width: 767px) {
  .selectCount .formBloc input[type="number"]{max-width: 150px; margin-right: 0.5em;}
}





/* ######################################################################################

　フォーム

###################################################################################### */
    table.inputTable select {
        margin-bottom:0;
        vertical-align:middle;
        }
    table.inputTable .inputSpan {
        box-sizing: border-box;
        display: inline-block;
    }

@media only screen and (min-width: 1000px) {
    table.inputTable .inputSpan {
        margin-right: 5px;
    }
}
@media only screen and (max-width: 999px) {
    table.inputTable .inputSpan {
        position: relative;
        top: -8px;
        width: 50%;
        margin: 0 0 -8px;
    }
    table.inputTable .inputSpan + .inputSpan {
        padding-left:5px;
    }
}

table.inputTable .size-input-name { width: 16em; }
table.inputTable .size-input-zip { width: 7em; }
table.inputTable .size-input-address { width: 26em; }
table.inputTable .size-input-company { width: 17em; }
table.inputTable .size-input-division { width: 17em; }

@media only screen and (min-width: 1000px) {
table.inputTable .size-input-nameS { width: 120px; }
/*
.size-input-quantity { width: 5em; }
.size-input-zip3 { width: 4em; }
.size-input-zip4 { width: 5em; }
.size-input-pref { width: 6em; }
.size-input-tel { width: 12.5em; }
.size-input-telS { width: 5em; }
.size-input-homepage { width: 35em; }
.size-input-email { width: 20em; }
.size-input-message { width: 100%; }
*/
}
@media only screen and (max-width: 999px) {
    table.inputTable .size-input-nameS {width:100%;}

table.inputTable .size-input-name,
table.inputTable .size-input-zip,
table.inputTable .size-input-address,
table.inputTable .size-input-company,
table.inputTable .size-input-division {max-width:100%;}
}

form table .sample {
    display:inline-block;
    vertical-align:middle;
    font-size:1.4rem;
}


/* ====================================================
　基本設定
==================================================== */
input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #ffffff;
  max-width: 100%;
  padding: 0.95em 0.95em!important;
  font-size: 1.5rem;
  color: #000000 !important;
  font-family: Hiragino Sans, "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
}

label.select select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  box-shadow: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-color: #ffffff;
  max-width: 100%;
  padding: 0.95em 0.95em;
  font-size: 1.5rem;
  color: #000000 !important;
  font-family: Hiragino Sans, "ヒラギノ角ゴシック", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "YuGothic Medium", "游ゴシック", YuGothic, "メイリオ", "Meiryo", sans-serif;
}

input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
  height: auto;
}

textarea {
  width: 100%;
  min-height: 6em;
}

@media print, screen and (min-width: 768px) {
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"],
  label.select select, textarea {font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] ,
  label.select select, textarea {font-size: 1.6rem;}
  input[type="text"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="email"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="number"] {
    padding: 0.65em!important;
  }
}


/* ====================================================
　placeholder
==================================================== */
input-placeholder {
  color: #ddd !important;
}

::-webkit-input-placeholder {
  color: #ddd !important;
}

::-moz-placeholder {
  color: #ddd !important;
}

::-ms-input-placeholder {
  color: #ddd !important;
}

-webkit-input-placeholder {
  color: #ddd !important;
}

input:-ms-input-placeholder {
  color: #ddd !important;
}

-moz-placeholder {
  color: #ddd !important;
}

:-ms-input-placeholder {
  color: #ddd !important;
}

/* ====================================================
　focus
==================================================== */
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="number"]:focus {
  border-color: #C30216;
  box-shadow: none;
}

label.select select:focus,
textarea:focus {
  border-color: #C30216;
  box-shadow: none;
}

input + label, input + span {
  cursor: pointer;
}


/* ====================================================
　select
==================================================== */
label.select select:not([multiple]) {
  box-shadow: none;
  margin: 0;
  padding-right: 2em;
}
label.select {
  display: inline-block;
  position: relative;
}
select::-ms-expand {
  display: none;
}
label.select select option{
  background: #626364;
  color: #fff;
}
@media print, screen and (min-width: 768px) {
  label.select,
  label.select select{min-width: 110px;}
}
@media screen and (max-width: 767px) {
  label.select,
  label.select select{min-width: 110px;}
}

label.select:before, label.select:after {
  display: inline-block;
  position: absolute;
  font-size: 50%;
}
label.select:after {
  pointer-events: none;
  content: "";
  top: 50%;
  transform: translateY(-50%);
  right: 1.75em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 6px 0 6px;
  border-color: #000000 transparent transparent transparent;
}

label.select.disabled,
label.select.disabled select{pointer-events: none; cursor: default;}
label.select.disabled select{background: #F2F2F2; color: #707070; border-color: #707070;}

/* select2 */
label.select2:before,
label.select2:after {
  pointer-events: none;
  content: "";
  top: 50%;
  right: 1.75em;
  width: 0;
  height: 0;
  border-style: solid;

}
label.select2:before{
  border-color: transparent transparent #000000 transparent;
  border-width: 0 6px 6px 6px;
  transform: translateY(-150%);
}
label.select2:after{
  border-color: #000000 transparent transparent transparent;
  border-width: 6px 6px 0 6px;
  transform: translateY(50%);
}

/* ====================================================
  blocInner
==================================================== */
@media print, screen and (min-width: 768px) {
  .blocInner {padding: 0 36px;}
  * + .blocInner {margin-top: 100px;}
  * + .blocInner.narrow {margin-top: 20px;}
  .blocInner .detail {margin-bottom: 10px; font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  * + .blocInner {margin-top: 74px;}
  * + .blocInner.narrow {margin-top: 15px;}
}



/* ====================================================
  formBloc
==================================================== */
.formBloc{position: relative; padding-top: 15px;}
.formBloc + .formBloc{margin-top: 0.75em;}
.formBloc > dt{margin-bottom: 0.65em; font-size: 1.3rem;}
.formBloc > dd{font-size: 1.5rem;}
.formBloc > dd + dd{margin-top: 0.75em;}
.formBloc > dd.formBloc__button{margin-top: 30px;}

.formInnerBloc{display: flex; align-items: center;}
.formInnerBloc > dt{width: 100px; padding-right: 1em;}

.formBloc > dd .txt-red {margin-top: 1em; line-height: 1.5; font-size: 1.3rem;}

@media print, screen and (min-width: 768px) {
  .formInnerBloc + .formInnerBloc{margin-top: 1em;}
  .formInnerBloc > dt{width: 100px; padding-right: 1em;}
  .formBloc.topwide {padding-top: 43px;}
  .formBloc > dd .zip{display: inline-block; margin-left: 1em; margin-top: 0.5em; margin-bottom: 0.5em;}
}
@media screen and (max-width: 767px) {
  .formInnerBloc + .formInnerBloc{margin-top: 0.5em;}
  .formInnerBloc > dt{width: 80px; padding-right: 1em;}
  .formBloc.topwide .balloon {top: -25px;}
  .formBloc > dd .button.zip{display: inline-block; margin-left: auto; margin-right: auto; margin-top: 2em;}
  .formBloc > dd .zip{display: block; width: 100%; text-align: center; margin-top: 1em;}
  .formBloc.sp-full{margin-left: -15px; margin-right: -15px;}
  .formBloc.sp-full img{width: 100%;}
}

/*　formBlocWrap
-------------------------------------*/
@media print, screen and (min-width: 768px) {
  .formBlocWrap{display: flex; flex-wrap: wrap; align-items: flex-start;}
  .formBlocWrap.end {align-items: flex-end;}
  .formBlocWrap .formBloc{margin-right: 0.75em;}
  .formBlocWrap.nowrap{flex-wrap: nowrap;}
  .formBlocWrap.nowrap .formBloc{width: 100%; max-width: 290px;}
  .formBlocWrap.nowrap.narrow .formBloc{width: 100%; max-width: 160px;}
  .formBlocWrap.nowrap.mochuNarrow .formBloc{width: auto; max-width: auto;}
  .formBlocWrap.nowrap.mochuNarrow .singleGaiji .input-size-s {max-width: 160px;}
  .formBlocWrap.nowrap.mochuNarrow .singleGaiji .gaijiDetail + .balloon {left: calc(50% - 53px);}
  .formBlocWrap.nowrap .formBloc input{width: 100%;}
}
@media screen and (max-width: 767px) {
  .formBlocWrap.nowrap{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
  .formBlocWrap.nowrap.end{align-items: flex-end;}
  .formBlocWrap.nowrap > .attention {display: block; width: 100%;}
  .formBlocWrap.nowrap .formBloc{width: 48%;}
  .formBlocWrap.nowrap .formBloc.full{width: 100%; text-align: center;}
  .formBlocWrap.nowrap .formBloc.fullwide{width: 100%;}
  .formBlocWrap.nowrap .formBloc input{width: 100%;}

  .formBlocWrap.nowrap.nowrapPc {display: block;}
  .formBlocWrap.nowrap.nowrapPc .formBloc{width: 100%;}

}


/*　addForm
-------------------------------------*/
.addForm .addFormInner{background: #F4F8FE; border: 1px solid #ddd; }
.addForm.border {border: 1px solid #ddd;}
.addForm.border .addFormInner {border: none;}
.addForm .addFormInner .bgTitle{padding: 0.25em 0; font-weight: bold;}
.addForm .addFormInner .bgTitle + *{margin-top: 20px;}
.addForm .addFormInner .deleteBtnBox{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media print, screen and (min-width: 768px) {
  .addForm.space + .addForm.space {margin-top: 35px;}
  .addForm .addFormInner{padding: 0 30px 50px;}
  .addForm .addFormInner.narrow{padding: 0 30px 37px;}
  .addForm .addFormInner .bgTitle{width: calc(100% + 60px); margin: -1px -30px 0;}
  .addForm .addFormInner .deleteBtnBox ul{display: flex;}
  .addForm .addFormInner .deleteBtnBox ul li + li{margin-left: 1em;}
}
@media screen and (max-width: 767px) {
  .addForm{margin-left: -15px; margin-right: -15px;}
  .addForm.space + .addForm.space {margin-top: 35px;}
  .addForm .addFormInner{padding: 0 15px 30px;}
  .addForm .addFormInner .bgTitle{width: calc(100% + 30px); margin: -1px -15px 0;}
  .addForm .addFormInner .deleteBtnBox ul li + li{margin-top: 1em;}
  .addForm .addFormInner .bgTitle + .mail-radioList {margin-top: 34px;}
}



/*　address-inputList
-------------------------------------*/
.address-inputList li + li{margin-top: 0.75em;}


/*　name-inputList
-------------------------------------*/
.name-inputList{display: flex; justify-content: space-between; max-width: 400px;}
.name-inputList li{width: 49%;}

@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
}



/*　gaiji
-------------------------------------*/
.formBlocWrap.gaiji{}
@media print, screen and (min-width: 768px) {
  .formBlocWrap.gaiji .button{margin-bottom: 0.25em;}
}
@media screen and (max-width: 767px) {
  .formBlocWrap.gaiji .button{margin-bottom: 0.25em; width: 100%; max-width: 226px;}
}



/*　formBloc-pcTable
-------------------------------------*/
@media print, screen and (min-width: 768px) {
  .formBloc-pcTable .formBlocWrap.nowrap{flex-wrap: wrap;}
  .formBloc-pcTable .formBlocWrap.nowrap .formBloc{max-width: 100%;}
  .formBloc-pcTable .formBloc,
  .formBloc-pcTable .formBloc dt,
  .formBloc-pcTable .formBloc dd{margin: 0; padding: 0;}
  .formBloc-pcTable .formBloc{
    display: flex;
    width: 100%;
  }
  .formBloc-pcTable .formBloc dt,
  .formBloc-pcTable .formBloc dd{
    padding: 0.75em;
    border-color: #ddd;
    border-style: solid;
    border-right-width: 1px;
    border-bottom-width: 1px;
    font-size: 1.5rem;
    line-height: 1.86;
  }
  .formBloc-pcTable .formBloc:first-child dt,
  .formBloc-pcTable .formBloc:first-child dd{border-top-width: 1px;}
  .formBloc-pcTable .formBlocWrap:not(:first-child) .formBloc:first-child dt,
  .formBloc-pcTable .formBlocWrap:not(:first-child) .formBloc:first-child dd{border-top-width: 0;}
  .formBloc-pcTable .formBloc dt{
    padding-top: 1.5em;
    width: 30%;
    max-width: 300px;
    border-left-width: 1px;
    background: #F4F8FE;
  }
  .formBloc-pcTable .formBloc dt.mtNarrow{padding-top: 0.85em; padding-bottom: 0.5em;}
  .formBloc-pcTable .formBloc dt .txt-red{display: block;}
  .formBloc-pcTable .formBloc dt .required{float: right;}
  .formBloc-pcTable .formBloc dd{width: 70%;}
}



/* ====================================================
　checkbox
==================================================== */
/*　check01
-------------------------------------*/
input[type="checkbox"] + label.check01 {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
}
input[type="checkbox"] + label.check01:before, input[type="checkbox"] + label.check01:after {
  width: 1em;
  height: 1em;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: none;
  margin: 0;
}
input[type="checkbox"] + label.check01:before{
  content: "";
  background: url(../img/contents/ico_check.svg) center no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}
input[type="checkbox"]:checked + label.check01:after {
  content: "";
  background: url(../img/contents/ico_check_on.svg) center no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
}

input[type="checkbox"] + label.check01.large {padding-left: 65px;}
input[type="checkbox"] + label.check01.large:before{width: 48px; height: 48px;}
input[type="checkbox"]:checked + label.check01.large:after {width: 48px; height: 48px;}


/*　check01 DM不要チェック
-------------------------------------*/
input[type="checkbox"] + label.check_non_dm {
    padding-left: 45px;
    text-align: left;
    line-height: 1.75;
}
input[type="checkbox"] + label.check_non_dm span {
    color: #C30216;
    font-weight: bold;
    line-height: 3em;
}
input[type="checkbox"] + label.check_non_dm:before, input[type="checkbox"] + label.check_non_dm:after {
    top: 7px;
    transform: none;
}

@media screen and (max-width: 767px) {
  input[type="checkbox"] + label.check_non_dm span {
    line-height: 1.75;
  }
}


/*　check02
-------------------------------------*/
input[type="checkbox"] + label.check02 {
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 65px;
  font-size: 1.5rem;
}
input[type="checkbox"] + label.check02:before, input[type="checkbox"] + label.check02:after {
  width: 1em;
  height: 1em;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: none;
  margin: 0;
}
input[type="checkbox"] + label.check02:before{
  content: "";
  background: url(../img/contents/ico_check_2.svg) center no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
}
input[type="checkbox"]:checked + label.check02:after {
  content: "";
  background: url(../img/contents/ico_check_on.svg) center no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
}



/* ====================================================
　radio
==================================================== */
/*　radio01
-------------------------------------*/
input[type="radio"] + label.radio01 {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.58em 0.5em;
  background: #F1F1F1;
  color: #707070;
  border-radius: 3px;
}
input[type="radio"] + label.radio01:before, input[type="radio"] + label.radio01:after {
  width: 1em;
  height: 1em;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: none;
  margin: 0;
}
input[type="radio"] + label.radio01:before{display: none;}
input[type="radio"] + label.radio01 .radio01__text{
  display: block;
  text-align: center;
  margin-top: 0.75em;
  font-size: 1.3rem;
  font-weight: bold;
}

input[type="radio"]:checked + label.radio01:after {display: none;}
input[type="radio"]:checked + label.radio01{background: #C30216; color: #fff;}

/* imgRadioList */
.imgRadioList{display: flex; justify-content: center;}
.imgRadioList__item{width: 100%; max-width: 109px;}
.imgRadioList__item + .imgRadioList__item{margin-left: 1em;}
.imgRadioList__item img{width: 100%;}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px) {
  .imgRadioList {margin-bottom: 60px;}
}

/* tel-radioList */
.tel-radioList{
  display: flex;
  flex-wrap: wrap;
  /* max-width: 460px; */
  margin-bottom: 10px;
}
.tel-radioList.bottomWide {margin-bottom: 35px;}
.tel-radioList > li:last-child{margin-right: 0; margin-bottom: 0;}
.tel-radioList > li.last {margin-right: 0;}
.tel-radioList > li .other{display: inline; margin-top: 0.75em;}

@media print, screen and (min-width: 768px) {
  .tel-radioList.bottomWide {margin-bottom: 35px;}
  .tel-radioList > li{margin-right: 1em; margin-bottom: 1.2667em;}
  .tel-radioList > li .other.block {display: block;}
  .tel-radioList input[type="radio"] + label{font-size: 1.5rem;}
  .tel-radioList > li .other.wide {margin-left: 1em;}
}
@media screen and (max-width: 767px) {
  .tel-radioList.bottomWide {margin-bottom: 35px;}
  .tel-radioList.bottomWideSp {margin-bottom: 35px;}
  .tel-radioList > li{margin-right: 0.75em; margin-bottom: 1em;}
  .tel-radioList > li .other.block input {width: auto;}
  .tel-radioList > li:nth-child(4){margin-right: 0;}
  .tel-radioList > li.grow {flex-grow: 1; width: 100%;}
  .tel-radioList input[type="radio"] + label{font-size: 1.3rem;}
  .tel-radioList > li .other {padding-left: 23px;}
  .tel-radioList > li .other input {width: auto;}
}

/* mail-radioList */
.mail-radioList{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.mail-radioList > li{margin-right: 1em; margin-bottom: 1em;}
.mail-radioList > li .formBloc{margin-left: 1em; padding-bottom: 15px;}

@media print, screen and (min-width: 768px) {
  .mail-radioList input[type="radio"] + label{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .mail-radioList input[type="radio"] + label{font-size: 1.3rem;}

  .mail-radioList > li.inputEmail {width: 100%; margin-right: 0;}
  .mail-radioList > li.inputEmail .formBloc {margin-left: 0;}
}

/* print-radioList */
.print-radioList + *{margin-top: 1.5em;}
.print-radioList > li + li{margin-top: 1.5em;}

@media print, screen and (min-width: 768px) {
  .print-radioList input[type="radio"] + label{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .print-radioList input[type="radio"] + label{font-size: 1.3rem;}
}




/* ====================================================
　フォームサイズ
==================================================== */
@media print, screen and (min-width: 768px) {
  .select.input-size-l,
  .select.input-size-l select,
  .input-size-l{width: 435px;}
  .input-size-ll{width: 723px;}
  .input-size-lll{width: 850px;}
  .input-size-m{width: 290px;}
  .input-size-s{width: 145px;}
  .input-size-ss{width: 100px;}
  .input-size-sss{width: 60px;}
  .input-size-full{width: 100%;}
}
@media screen and (max-width: 767px) {
  .select.input-size-l,
  .select.input-size-l select,
  .input-size-l{width: 100%;}
  .input-size-ll{width: 100%;}
  .input-size-lll{width: 100%;}
  .input-size-m{width: 100%;}
  .input-size-s{width: 80px;}
  .input-size-ss{width: 80px;}
  .input-size-sss{width: 60px;}
  .input-size-full{width: 100%;}
}




/* ====================================================
    特殊文字吹き出し
==================================================== */
form .balloon{
  position: absolute;
  left: 25%;
  display: none;
}
form .balloon.active{display: block;}

form .balloon span{
  position: relative;
  padding: 0.4em 0.75em 0.65em;
  background: #CF5749;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
}


form .balloon span:before,
form .balloon span:after{
  content: "";
  position: absolute;
}
form .balloon span:before {
  z-index: 1;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg) skew(5deg,5deg); /* 傾斜角(skew) */
}
form .balloon span:after {
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
form .balloon span em {
position: relative;
z-index: 3;
font-style: normal;
font-weight: bold;
}
form .balloon span,
form .balloon span:before,
form .balloon span:after {
background: #CF5749; /* 背景色 */
}

form span.singleGaiji {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
form span.singleGaiji .balloon {
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
}

@media print, screen and (min-width: 768px) {
  form .balloon{top: 0;}
  form .balloon span{font-size: 1.5rem;}
  form .balloon span:before {
      width: 20px;
      height: 20px;
  }
}
@media screen and (max-width: 767px) {
  form .balloon{top: 0;}
  form .balloon span{font-size: 1.4rem;}
  form .balloon span:before {
    width: 20px;
    height: 20px;
  }

  form span.singleGaiji:first-of-type .balloon {transform: translateX(-40%);}
}
@media screen and (max-width: 370px) {
form .balloon span{font-size: 1.3rem; padding: 0.5em 0.4em 0.75em;}
}



/* ====================================================
    必須
==================================================== */
form .required{
  position: relative;
  display: inline-block;
  background: #C30216;
  border-radius: 3px;
  color: #FFFFFF;
  padding: 0.45em 0.75em 0.4em;
  margin: 0 0.5em;
  font-size: 1.3rem;
  line-height: 1;
}


/* ====================================================
    エラー
==================================================== */
form .error{
  margin-top: 0.5em;
  color: #C30216;
  font-size: 1.3rem;
}


/* ====================================================
    利用規約に同意
==================================================== */
.agreeBox{margin-top: 30px; text-align: center;}



/* ######################################################################################

　電話ボックス

###################################################################################### */
.telBox dt {
	background: #fff;
	border: 1px solid #CF5749;
	color: #CF5749;
	text-align: center;
}
.telBox .tel span {display: block; text-align: center;}
.telBox .tel a {text-decoration: none; color: #000;}
.telBox .tel a:before {
    content: "";
    position: relative;
    top: 3px;
    display: inline-block;
    width: 53px;
    height: 35px;
    margin-right: 10px;
    background-image: url("../img/common/icon_tel.svg");
    background-size: 53px 35px;
}
.telBox .cationList {font-size: 1.2rem;}

@media print, screen and (min-width: 768px) {
	.telBox dt {
        margin-bottom: 8px;
		padding-top: 2px;
		font-size: 1.8rem;
	}
    .telBox .tel {margin-left: 10px; margin-bottom: 8px; font-size: 3.3rem;}
    .telBox .tel .term,
    .telBox .tel .term li {font-size: 1.2rem;}
    .telBox .tel .term {display: inline-block; text-align: left;}
    .telBox .tel a {pointer-events: none;}

    .telBox .cationList li {letter-spacing: -1px;}
    .telBox .cationList li + li {margin-top: 7px;}
}
@media only screen and (max-width: 767px) {
	.telBox dt {
        margin-bottom: 8px;
        padding-top: 6px;
        padding-bottom: 3px;
    }
    .telBox .tel {margin-bottom: 10px; font-size: 3.2rem;}
    .telBox .tel span,
    .telBox .tel .term li {font-size: 1.4rem;}

    .telBox .cationList li {
        line-height: 1.3333;
        padding-left: 1em;
        text-indent: -1em;
    }
    .telBox .cationList li + li {margin-top: 5px;}
}


/* ######################################################################################

　レスポンシブ

###################################################################################### */
/* ######################################################################################

　スライダー：slickSlider

###################################################################################### */
/* ====================================================
　3＠デフォルト
==================================================== */
/* スライドloading DF
-------------------------------------*/
/* .slickSlider {
    background: url(../../_assets/_widget/_css/ajax-loader.gif) center no-repeat;
  } */

  /* loading */
  /* スライド同士の間隔 DF
  -------------------------------------*/
  .slick-slide {
    margin: 0px 0;
    padding: 1px;
  }

  /* 左右ボタンスタイル DF
  -------------------------------------*/
  .slick-prev,
  .slick-next {
    z-index: 10;
    width: auto;
    height: auto;
  }

  .slick-prev {
    left: 15px;
  }

  .slick-next {
    right: 15px;
  }

  .slick-prev:before,
  .slick-next:before {
    font-family: FontAwesome;
    opacity: .75;
  }

  /* ====================================================
  　左右ボタンスタイル：＜＞
  ==================================================== */
  .slick-prev:before,
  .slick-next:before {
    color: #000000;
  }

  /* ＜＞ 色 */
  .slick-prev::before {
    content: "\f104";
  }

  /* ＜ 形状 */
  .slick-next::before {
    content: "\f105";
  }

  /* ＞ 形状 */
  @media print, screen and (min-width: 768px) {
    .slick-prev:before,
    .slick-next:before {
      font-size: 40px;
    }

    /* ＜＞ サイズ */
  }
  @media screen and (max-width: 767px) {
    .slick-prev:before,
    .slick-next:before {
      font-size: 30px;
    }

    /* ＜＞ サイズ */
  }
  /* 黒丸ボタンスタイル DF
  -------------------------------------*/
  .slick-dots {
    bottom: -1.5em;
  }

  .slick-dots li,
  .slick-dots li button,
  .slick-dots li button::before {
    display: inline-block;
    padding: 0;
    width: auto;
    height: auto;
    line-height: 1;
  }

  .slick-dots li button {
    display: block;
  }

  .slick-dots li button:before {
    position: relative;
    padding: 0.25em;
    border-radius: 50%;
    opacity: 1;
  }

  /* ====================================================
  　黒丸ボタンスタイル：・・・
  ==================================================== */
  .slick-dots li {
    margin: 0 4px;
  }

  /* ●の間隔 */
  .slick-dots li button::before {
    color: #999999;
  }

  /* ● DF色 */
  .slick-dots li button:hover:before {
    color: #f00;
  }

  /* ● hover色 */
  .slick-dots li.slick-active button::before {
    color: #000000;
  }

  /* ● active色 */
  @media print, screen and (min-width: 768px) {
    .slick-dots li button::before {
      font-size: 10px;
    }

    /* ●サイズ */
  }
  @media screen and (max-width: 767px) {
    .slick-dots li button::before {
      font-size: 10px;
    }

    /* ●サイズ */
  }
  /* ====================================================
  　黒丸ボタンカスタマイズ：長方形横
  ==================================================== */
  .dotteSolid .slick-dots li {
    margin: 0 2px;
  }

  /* ●の間隔 */
  .dotteSolid .slick-dots li button:before {
    display: none;
  }

  /* ●の非表示 */
  .dotteSolid .slick-dots li button {
    width: 30px;
    height: 5px;
  }

  /* ボタンの形状 */
  .dotteSolid .slick-dots li button {
    background: #75975e;
  }

  /* ● DFの色 */
  .dotteSolid .slick-dots li.slick-active button {
    background: #d9a300;
  }

  /* ● active色 */
  /* ====================================================
  　黒丸ボタンカスタマイズ：長方形縦
  ==================================================== */
  .dotteBar .slick-dots {
    text-align: right;
  }

  /* ●の配置 */
  .dotteBar .slick-dots li {
    margin: 0 4px;
  }

  /* ●の間隔 */
  .dotteBar .slick-dots li button:before {
    display: none;
  }

  /* ●の非表示 */
  .dotteBar .slick-dots li button {
    /* ボタンの形状 */
    width: 8px;
    height: 15px;
    transform: rotate(45deg);
  }

  .dotteBar .slick-dots li button {
    background: #cccccc;
  }

  /* ● DFの色 */
  .dotteBar .slick-dots li.slick-active button {
    background: #000000;
  }

  /* ● active色 */
  /* ====================================================
  　[1] ファーストビュー全画面
  ==================================================== */
  .fullscreen.slickSlider img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }

  .fullscreen.slickSlider .slick-dots {
    bottom: 1.5em;
  }

  /* ====================================================
  　センター配置：画面幅に応じて左右が見える。
    767以下でレスポンシブ対応（1枚表示）
  ==================================================== */
  @media print, screen and (min-width: 768px) {
    .centerRes.slickSlider .slick-slide {
      width: 400px !important;
      /* ※PCの時の画像サイズ指定 */
    }
  }
  /* ============================================================================
    [9] 768以上：センター配置＋自動再生＋画面幅に応じて左右が見える＋サムネイルタイル配置
        767以下：センター配置＋サムネイル３つ中央アクティブ
  ============================================================================ */
  .centerRes2.slickSlider {
    overflow: hidden;
  }
  .thumb-item2-nav {
    margin: 30px auto 0;
  }
  .thumb-item2-nav .slick-list{
    text-align: center;
  }
  .thumb-item2-nav .slick-track {
    transform: translate3d(0, 0, 0) !important;
    width: auto !important;
    display: inline-flex;
    flex-direction: column;
  }
  .thumb-item2-nav .slick-slide {
    width: auto!important;
    padding: 1px;
    cursor: pointer;
    float: none;
    display: inline-block;
  }

  .thumb-item2-nav .slick-slide img {
    width: 100% !important;
    height: auto;
  }
  .thumb-item2-nav .slick-arrow {
    top: -20px;
    transform: translateY(0);
    width: 54px;
  }
  .thumb-item2-nav .slick-prev {
    left: 0;
  }
  .thumb-item2-nav .slick-prev:before{
    content: "";
    display: block;
    width: 54px;
    height: 18px;
    background-image: url(../img/contents/slider_prev.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }
  .thumb-item2-nav .slick-next {
    right: 0;
  }
  .thumb-item2-nav .slick-next:before{
    content: "";
    display: block;
    width: 54px;
    height: 18px;
    background-image: url(../img/contents/slider_next.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }


  /* オプション　infinite: true */
  /* .thumb-item2-nav .slick-slide:first-child,
  .thumb-item2-nav .slick-slide:last-child {
    display: none;
  } */
  .thumb-item2-nav .slick-slide.slick-cloned{
    display: none;
}

@media print, screen and (min-width: 768px) {
  .centerRes2.slickSlider .slick-slide {
    width: 31vw!important;
    width: calc(30vw + 10px)!important;
    max-width: 444px!important;
  /* ※PCの時の画像サイズ指定 */
  }
}
@media print, screen and (min-width: 880px) {
  .centerRes2.slickSlider .slick-slide {
    width: 35vw!important;
    /* ※PCの時の画像サイズ指定 */
  }
}
@media screen and (max-width: 767px) {
  .centerRes2.slickSlider .slick-slide {
    width: 66vw!important;
    /* ※PCの時の画像サイズ指定 */
  }
}


    /* フェード
    -------------------------------------*/
    .centerRes2.slickSlider .slick-prev,
    .centerRes2.slickSlider .slick-next {
      top: 0;
      background: rgba(255, 255, 255, 0.5);
      width: 50%;
      height: 100%;
    }

    /* フェードの位置 */
    .centerRes2.slickSlider .slick-prev {
      transform: translateX(-216px);
    }

    .centerRes2.slickSlider .slick-next {
      transform: translateX(216px);
    }

    /* 前後ボタンの位置 */
    .centerRes2.slickSlider .slick-prev:before,
    .centerRes2.slickSlider .slick-next:before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    .centerRes2.slickSlider .slick-prev:before {
      right: 30px;
    }

    .centerRes2.slickSlider .slick-next:before {
      left: 30px;
    }

    /* サムネイルのフェード */
    /* .thumb-item2-nav .slick-slide:not(.slick-current) {
      opacity: 0.5;
    } */


  /* ====================================================
  　アクティブの画像がズームする
  ==================================================== */
  .slickSlider.zoom .slick-current img {
    display: inline-block;
    animation: scale 5s linear 0s forwards, fade 0.5s ease-in 4.5s forwards;
    z-index: 30;
  }

  .slickSlider.zoom .slick-current + .slick-slide {
    display: block !important;
    opacity: 1 !important;
  }

  .slickSlider.zoom .slick-current + .slick-slide img {
    animation: scalePre 5s linear 0s forwards;
  }

  @keyframes scalePre {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.25);
    }
  }
  @keyframes scale {
    0% {
      transform: scale(1.25);
    }
    100% {
      transform: scale(1.5625);
    }
  }
  @keyframes fade {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/* ######################################################################################

    productList

###################################################################################### */
.productList {display: flex; flex-wrap: wrap;}
.productList li {text-align: center;}
.productList li .inner {background: #F4F8FE; height: 100%; position: relative;}
.productList li img{height: auto; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);}
.productList li p {font-weight: bold;}

@media print, screen and (min-width: 768px) {
    .productList {margin-left: -5px; margin-right: -5px;}
    .productList li {
        width: 25%;
        margin-bottom: 10px;
        padding-left: 5px;
        padding-right: 5px;
    }
    .productList li .inner {padding-top: 35px; padding-bottom: 25px;}
    .productList li img {width: 107px;}
    .productList li .inner a:hover {opacity: 0.7;}
    .productList li p {margin-top: 20px; font-size: 15px;}
}
@media only screen and (max-width: 767px){
    .productList {margin-left: -10px; margin-right: -10px;}
    .productList li {
        width: 50%;
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .productList li .inner {padding-top: 14px; padding-bottom: 10px;}
    .productList li img {width: 57.926%;}
    .productList li p {margin-top: 12px; font-size: 12px;}
}


/* ====================================================
    ラジオボタンありに転用
==================================================== */
/* 初期化ここから */
.productList.radioSelect .list_area span,
.productList.radioSelect .catelist .list_area span{
    min-width: inherit;
    border-radius: 0;
    padding: 0;
    border: none;
    color: #707070;
}
.productList.radioSelect .list_area input[type="radio"] + span.select:before,
.productList.radioSelect .list_area input[type="radio"] + span.select:after,
.productList.radioSelect .list_area input[type="radio"]:checked + span.select:before,
.productList.radioSelect .list_area input[type="radio"]:checked + span.select:after,
.productList.radioSelect .catelist .list_area input[type="radio"] + span.select:before,
.productList.radioSelect .catelist .list_area input[type="radio"] + span.select:after,
.productList.radioSelect .catelist .list_area input[type="radio"]:checked + span.select:before,
.productList.radioSelect .catelist .list_area input[type="radio"]:checked + span.select:after {
    display: none;
}
.productList.radioSelect label,
.productList.radioSelect .catelist label {display: block; cursor: pointer;}

.productList.radioSelect label img,
.productList.radioSelect .catelist label img{pointer-events: none;}
/* 初期化ここまで */

.productList.radioSelect li .inner{padding: 0!important;}
.productList.radioSelect .list_area input[type="radio"] + span.select {position: relative; display: block;}
.productList.radioSelect .list_area input[type="radio"]:checked + span.select:before,
.productList.radioSelect .list_area input[type="radio"] + span.select:before{
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10px;
  left: 10px;
  background-image: url(../img/contents/products/list/check.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  z-index: 1;
}
.productList.radioSelect .list_area .alignC{display: block;}
.productList.radioSelect .list_area .itemname{letter-spacing: 0.01em;}
.productList.radioSelect .list_area input[type="radio"]:checked + span.select:after{
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 10px;
  left: 10px;
  background-image: url(../img/contents/products/list/check_on.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  z-index: 2;
}

@media print, screen and (min-width: 768px) {
  .productList.radioSelect .list_area input[type="radio"] + span.select {
    padding-top: 35px;
    padding-bottom: 25px;
  }
  .productList.radioSelect .list_area .alignC{margin-top: 19px;}
  .productList.radioSelect .list_area .itemname{font-size: 1.5rem;}
}
@media screen and (max-width: 767px) {
  .productList.radioSelect .list_area input[type="radio"] + span.select {border: 1px solid #ddd;}
  .productList.radioSelect .list_area input[type="radio"] + span.select {
    padding-top: 32px;
    padding-bottom: 21px;
  }
  .productList.radioSelect .list_area .alignC{margin-top: 21px;}
  .productList.radioSelect .list_area .itemname{font-size: 1.2rem;}
}



/* ====================================================
    チェックボックスありに転用
==================================================== */
/* 初期化ここから */
.productList.checkboxSelect .list_area span,
.productList.checkboxSelect .catelist .list_area span{
    min-width: inherit;
    border-radius: 0;
    padding: 0;
    border: none;
    color: #707070;
}
.productList.checkboxSelect .list_area input[type="checkbox"] + span.select:before,
.productList.checkboxSelect .list_area input[type="checkbox"] + span.select:after,
.productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:before,
.productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:after,
.productList.checkboxSelect .catelist .list_area input[type="checkbox"] + span.select:before,
.productList.checkboxSelect .catelist .list_area input[type="checkbox"] + span.select:after,
.productList.checkboxSelect .catelist .list_area input[type="checkbox"]:checked + span.select:before,
.productList.checkboxSelect .catelist .list_area input[type="checkbox"]:checked + span.select:after {
    display: none;
}
.productList.checkboxSelect label,
.productList.checkboxSelect .catelist label {display: block; cursor: pointer;}

.productList.checkboxSelect label img,
.productList.checkboxSelect .catelist label img{pointer-events: none;}
/* 初期化ここまで */

.productList.checkboxSelect li .inner{padding: 0 0 1em 0!important;}
.productList.checkboxSelect .list_area label{width: 38px;}
.productList.checkboxSelect .list_area p label{display: inline; width: auto;}
.productList.checkboxSelect .list_area input[type="checkbox"] + span.select {position: relative; display: block;}
.productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:before,
.productList.checkboxSelect .list_area input[type="checkbox"] + span.select:before{
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-image: url(../img/contents/products/list/check.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  z-index: 1;
}
.productList.checkboxSelect .list_area .alignC{display: block;}
.productList.checkboxSelect .list_area .itemname{letter-spacing: 0.01em;}
.productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:after,
.productList.checkboxSelect .list_area input[type="checkbox"].active + span.select:after{
  content: "";
  display: block;
  position: absolute;
  width: 25px;
  height: 25px;
  background-image: url(../img/contents/products/list/check_on.png);
  background-size: 25px 25px;
  background-repeat: no-repeat;
  z-index: 2;
}

@media print, screen and (min-width: 768px) {
  .productList.checkboxSelect .list_area input[type="checkbox"] + span.select {
    width: 25px;
    height: 25px;
    margin: 6px;
  }
  .productList.checkboxSelect .list_area .alignC{margin-top: 19px;}
  .productList.checkboxSelect .list_area .itemname{font-size: 1.5rem;}
  .productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:before,
  .productList.checkboxSelect .list_area input[type="checkbox"] + span.select:before,
  .productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:after,
  .productList.checkboxSelect .list_area input[type="checkbox"].active + span.select:after{
    top: 0;
    left: 0;
  }
}
@media screen and (max-width: 767px) {
  .productList.checkboxSelect .list_area input[type="checkbox"] + span.select {
    width: 25px;
    height: 25px;
    margin: 6px;
  }
  .productList.checkboxSelect .list_area .alignC{margin-top: 15px;}
  .productList.checkboxSelect .list_area .itemname{font-size: 1.4rem;}
  .productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:before,
  .productList.checkboxSelect .list_area input[type="checkbox"] + span.select:before,
  .productList.checkboxSelect .list_area input[type="checkbox"]:checked + span.select:after,
  .productList.checkboxSelect .list_area input[type="checkbox"].active + span.select:after{
    top: 0;
    left: 0;
  }
}




/* ######################################################################################

    productsConrifmList

###################################################################################### */
.productsConrifmListWarp{width: 100%; max-width: 800px; margin-left: auto; margin-right: auto;}
.productsConrifmListWarp .leftBorderTitle + *{margin-top: 16px;}

.productsConrifmList .estimateTable{height: 100%;}
.productsConrifmList .estimateTable tr td{font-weight: bold;}
.productsConrifmList .estimateTable tr.productsConrifmList__detail__button th,
.productsConrifmList .estimateTable tr.productsConrifmList__detail__button td{height: auto; text-align: center; vertical-align: middle;}

.productsConrifmList__img .estimateTable th{text-align: center;}
.productsConrifmList__img .estimateTable td{padding: 1.5em 1em;}
.productsConrifmList__img .selectDesignPreview a{margin: 0;}

.productsConrifmList .estimateTable .estimateNumber th {background-color: #FCDC4A;}
.productsConrifmList .estimateTable .estimateNumber th .attention {
  display: block;
  margin-top: 0.5em;
  font-size: 0.56em;
  line-height: 1.5;
}
.productsConrifmList .estimateTable .estimateNumber td {color: #C30216;}

@media print, screen and (min-width: 768px) {
  * + .productsConrifmListWarp{margin-top: 100px;}
  .productsConrifmList{width: 100%; display: flex;}
  .productsConrifmList__img{width: 37.5%;}
  .productsConrifmList__detail{width: 62.5%;}

  .productsConrifmList .estimateTable tr:nth-child(1) th,
  .productsConrifmList .estimateTable tr:nth-child(1) td{font-size: 1.5rem;}
  .productsConrifmList .estimateTable tr th,
  .productsConrifmList .estimateTable tr td{height: 50px;}
  .productsConrifmList .estimateTable th {width: 200px;}

  .productsConrifmList__img .estimateTable th{border-right-width: 0;}
  .productsConrifmList__img .estimateTable td{border-right-width: 0;}
  .productsConrifmList__img .selectDesignPreview a{max-width: 168px;}

  .productsConrifmList .estimateTable .estimateNumber th,
  .productsConrifmList .estimateTable .estimateNumber td {font-size: 2.3rem;}
  .productsConrifmList .estimateTable .estimateNumber td {padding-top: 1.6em;}
}
@media screen and (max-width: 767px) {
  * + .productsConrifmListWarp{margin-top: 60px;}
  .productsConrifmList__img .estimateTable th{font-weight: bold; font-size: 1.5rem;}
  .productsConrifmList__img .estimateTable tr:last-child th,
  .productsConrifmList__img .estimateTable tr:last-child td{border-bottom-width: 0;}
  .productsConrifmList .estimateTable tr.productsConrifmList__detail__button td{
    padding-top: 35px;
    padding-bottom: 35px;
    border-right-width: 0;
    border-left-width: 0;
    border-bottom-width: 0;
  }
  .productsConrifmList__img .selectDesignPreview a{max-width: 175px;}
  .productsConrifmList .estimateTable tr.productsConrifmList__detail__button .button{width: 162px;}

  .productsConrifmList .estimateTable th {width: 150px;}
  .productsConrifmList .estimateTable .estimateNumber th {font-size: 1.7rem;}
  .productsConrifmList .estimateTable .estimateNumber td {padding-top: 2em; font-size: 1.8rem;}
}




/* ######################################################################################

    mochuCategoryList

###################################################################################### */
.mochuCategoryList li a {
    display: block;
    border-radius: 3px;
    text-decoration: none;
}
@media print, screen and (min-width: 768px) {
    .mochuCategoryList {margin-left: -5px; margin-right: -5px;}
    .mochuCategoryList.row li {margin-bottom: 10px; padding-left: 5px; padding-right: 5px;}
    .mochuCategoryList li a:hover {opacity: 0.7;}
}
@media only screen and (max-width: 767px) {
    .mochuCategoryList.row li {margin-bottom: 10px;}
}





/* ######################################################################################

    typeSelect

###################################################################################### */
.typeSelect{
  display: flex;
  justify-content: center;
  background: #F4F8FE;
}

.typeSelect li{
  width: 50%;
  text-align: center;
}
.typeSelect li > input[type="radio"] + label,
.typeSelect li > span,
.typeSelect li > a {
  position: relative;
  display: flex;
  padding: 0;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 60px;
  font-weight: bold;
  color: #9B9B9B;
  background: #F1F1F1;
  text-decoration: none;
}
/* .typeSelect li > a:hover, */
.typeSelect .typeSelect__item input[type="radio"] {display: none;}
.typeSelect .typeSelect__item > input[type="radio"]:checked + label,
.typeSelect .typeSelect__item > span,
.typeSelect .typeSelect__item > span > a,
.typeSelect li > a.active {
  background: #C30216;
  color: #fff;
  text-decoration: none;
}
.typeSelect__item > input[type="radio"] + label:before,
.typeSelect__item > input[type="radio"] + label:after,
.typeSelect__item > span:before,
.typeSelect__item > span:after,
.typeSelect__item > a:before,
.typeSelect__item > a:after {
  content: "";
  position: relative;
  top: 0;
  display: block;
  width: 40px;
  height: 40px;
  margin-top: 0;
  background: none;
  background-size: contain;
  background-repeat: no-repeat;
  border: none;
  border-radius: 0;
}
.typeSelect__item > input[type="radio"] + label:after,
.typeSelect__item > span:after,
.typeSelect__item > a:after {
  position: absolute;
  z-index: 1;
  top: 1px;
}

@media print, screen and (min-width: 768px) {
  .typeSelect li{max-width: 188px;}
  .typeSelect__item > input[type="radio"] + label,
  .typeSelect li > span,
  .typeSelect li > a{font-size: 1.5rem;}
}
@media only screen and (max-width: 767px) {
  .typeSelect{margin-left: -15px; margin-right: -15px;}
  .typeSelect__item > input[type="radio"] + label,
  .typeSelect li > span,
  .typeSelect li > a{font-size: 1.4rem;}
}

/* ====================================================
    type01
==================================================== */
.typeSelect.type01 .item01 > input[type="radio"] + label::before,
.typeSelect.type01 .item01 > a:before{background-image: url(../img/contents/ico_person.svg);}
/* .typeSelect.type01 .item01 > a:hover:after, */
.typeSelect.type01 .item01 > input[type="radio"]:checked + label::before,
.typeSelect.type01 .item01 > span:before{background-image: url(../img/contents/ico_person_w.svg);}
.typeSelect.type01 .item02 > input[type="radio"] + label::before,
.typeSelect.type01 .item02 > a:before{background-image: url(../img/contents/ico_building.svg);}
/* .typeSelect.type01 .item02 > a:hover:after, */
.typeSelect.type01 .item02 > input[type="radio"]:checked + label::before,
.typeSelect.type01 .item02 > span:before{background-image: url(../img/contents/ico_building_w.svg);}






/* ######################################################################################

    linkSelectBox

###################################################################################### */
.linkSelectBox__title{
  border: 1px solid #ddd;
  text-align: center;
  background: #F4F8FE;
  padding: 0.5em 0.75em;
  border-radius: 3px 3px 0 0;
  font-size: 1.5rem;
  font-weight: bold;
}
.linkSelectBox__list li a{
  position: relative;
  display: block;
  border-color: #ddd;
  border-style: solid;
  border-width: 0 1px 1px 1px;
  font-size: 1.4rem;
  color: #111;
  text-decoration: none;
}
.linkSelectBox__list li a:after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  vertical-align: middle;
  width: 7px;
  height: 7px;
  border-top: 1px solid #111;
  border-right: 1px solid #111;
  -webkit-transform: rotate(45deg) skew(-10deg, -10deg);
  transform: rotate(45deg) skew(-10deg, -10deg);
}

@media print, screen and (min-width: 768px) {
  .linkSelectBox__list li a{padding: 1.1em 1.5em;}
  .linkSelectBox__list li a:after{right: 1.5em;}
}
@media only screen and (max-width: 767px) {
  .linkSelectBox__list li a{padding: 1.1em 1em;}
  .linkSelectBox__list li a:after{right: 1em;}
}


/* ######################################################################################

    toast　ポップアップ

###################################################################################### */
#toast-container {
    position: fixed;
    top: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: rgba(112, 112, 112, 0.65);
}
#toast-container .toast {
    width: 95vw !important;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto;
    background: #FFFFFF;
    border: none;
    box-shadow: none;
    opacity: 1;
    overflow: auto;
    cursor: default !important;
    color: #000;
}
#toast-container>div.toast:hover{box-shadow: none;}
#toast-container>.toast-info.toast {background-image: none !important;}
#toast-container .toast-title {margin-bottom: 0;}
#toast-container .toast-title,
#toast-container .toast h3{font-weight: normal;}
#toast-container .toast-close-button {
    font-size: 2em;
    cursor: pointer;
    color: #000;
}
#toast-container .toast-title,
#toast-container .toast h3,
#toast-container .toast .marked{font-size: 1.4rem; line-height: 1.71;}
#toast-container .toast .marked{
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 0;
}
#toast-container .toast-message p + *{margin-top: 1.5em;}
#toast-container .toast-message p + .marked.cation{margin-top: 0;}
#toast-container .toast .marked.cation{
    margin-top: 0;
    color: #C30216;
}
#toast-container .buttonBox {
    margin: 2em 0 0;
}

@media print, screen and (min-width: 768px) {
    #toast-container {padding-top: 100px;}
    #toast-container .toast {max-height: calc(100vh - 200px);}
    #toast-container .toast {padding: 80px 70px;}
    #toast-container .toast .toast-close-button {right: -25px; top: -25px;}
}
@media screen and (max-width: 767px) {
    #toast-container {padding-top: 70px;}
    #toast-container .toast {max-height: calc(100vh - 140px);}
    #toast-container .toast {padding: 80px 8px;}
    #toast-container .toast .toast-close-button {
        right: 10px;
        top: -70px;
    }
}

/* ######################################################################################

    orderflow

###################################################################################### */
.orderflow {border: 1px solid #e1e1e1;}
.orderflow dt {padding: 1em 0.75em 0.75em; border-bottom: 1px solid #e1e1e1;}
.orderflow dd {padding: 1em 0.75em;}
.orderflow dd ol {display: flex; flex-wrap: wrap;}
.orderflow dd li {margin-right: 8px; color: #ccc; line-height: 1.5;}
.orderflow dd li.active {color: #CF5749; font-weight: bold;}
.orderflow dd li:before {content: ">"; margin-right: 5px;}

@media print, screen and (min-width: 768px) {
  .orderflow {margin-bottom: 80px; font-size: 1.5rem;}
  .orderflow.narrow {margin-bottom: 40px;}
  .bgTitle + .orderflow {margin-top: 40px;}
}
@media only screen and (max-width: 767px) {
  .orderflow {margin-bottom: 50px; font-size: 1.4rem;}
  .orderflow.narrow {margin-bottom: 30px;}
  .bgTitle + .orderflow {margin-top: 30px;}
}








/* end */