@charset "UTF-8";

/*============================================

  style.css

============================================*/


/* 3.particles
------------------------------------------- */
.tbl {
  display: table;
  width: 100%;
}
.cell { display: table-cell;}

.hide-txt {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
.write { line-height: 2;}
.write > *:not(:last-child) { margin: 0 0 1rem;}
.clip { margin: 0 0 2rem;}
.pc-br { display: block;}
.appeal { color: #e4597a;}
.em { font-weight: bold;}
.em.line { background: linear-gradient(transparent 60%, #fbe539 60%);}

.bc-em {
  color: #3cb4c8;
  font-weight: bold;
}
.under-link { text-decoration: underline;}
.sp-show { display: none;}

@media screen and (max-width: 850px) {

.sp-show { display: block;}
.sp-hide { display: none;}
.pc-br .sp-show { display: inline;}

}

@media screen and (max-width: 480px) {

.head-copy { font-size: 1rem;}
.write p { font-size: 1.3rem;}
.msg { font-size: 1.2rem;}
.pc-br { display: inline;}

}

@media screen and (max-width: 320px) {
	
.write p { font-size: 1.1rem;}

}
/* heading */
.sec-ttl.detail { font-size: 2rem;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea {
  padding: .8em;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  background-color: #fff;
}

.check_select input {
  display: none;
}
.check_label {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  border-radius: 3px;
  padding: 6px 0;
  width: 100%;
  height: 35px;
  border: 1px solid #ddd;
  background-color: #f6f7f8;
  background-repeat: no-repeat;
  background-position: 15px 50%;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;
}
.check_select input[type=checkbox]:checked + .check_label:before {
  opacity: 1;
}
.check_label:before {
  box-sizing: border-box;
  position: absolute;
  top: -2px;
  left: -2px;
  display: block;
  padding: 6px 15px;
  border-radius: 3px;
  border: 2px solid #f5be00;
  content: '';
  opacity: 0;
  width: calc(100% + 4px);
  height: 36px;
}

.simple-list li {
  position: relative;
  padding-left: 1.4rem;
}
.simple-list li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "・";
}
.notification {
  margin-bottom: 40px;
  text-align: center;
}
.notification .ttl {
  margin-bottom: 8px;
  color: #3cb4c8;
  font-size: 116%;
  font-weight: bold;
}
.notification {
  margin-bottom: 40px;
  text-align: center;
}
.notification .ttl {
  margin-bottom: 8px;
  color: #3cb4c8;
  font-size: 116%;
  font-weight: bold;
}

/* 5.contents
------------------------------------------- */
.separate {
  padding-top: 30px;
  margin-bottom: 60px;
  border-top: 1px solid #ddd;
}
.box-frame {
  padding: 30px;
  background-color: #f1f8f9;
}

@media screen and (max-width: 768px) {

.box-frame { padding: 15px;}

}

.item-block .db-arw {
  padding-right: 2rem;
  line-height: 1.4rem;
  background-size: auto 1.4rem;
}
.item-block .load-arw {
  padding-right: 2.4rem;
  line-height: 1.4rem;
  background-size: auto 1.4rem;
}
.item-list .badge .item { position: relative;}

.item-list .badge .item::after {
  content: "";
  height: 20px;
  position: absolute;
  right: 5px;
  top: 0;
  width: 17px;
  background-image: url(../img/common/candidate.webp);
  background-size: 17px 20px;
}
.no-webp .item-list .badge .item::after { background-image: url(../img/common/candidate.png); }

@media screen and (max-width: 850px) {

/* logo list */
.item-list li { width: 31%;}
.item-list li:not(:nth-child(5n)) { margin-right: auto;}
.item-list li:not(:nth-child(3n)) { margin-right: 3.5%;}

}

@media screen and (max-width: 480px) {

.item-list li .belong { display: block;}
.item-list li .belong .judge {
  display: block;
  padding-top: .6em;
  padding-bottom: .6em;
  margin-bottom: 8px;
}

}

@media screen and (max-width: 414px) {

.item-block .more {
  padding: 1.4rem 0;
  font-size: 1.2rem;
}
.item-list li span { font-size: 1rem;}

.item-list .badge .item::after {
  background-size: 13px 15px;
  height: 15px;
  width: 13px;
  right: 7px;
}

}

/* modal */
.remodal { padding: 25px 35px;}

/* modal */
.modal-close {
  margin-bottom: 1.4rem;
  text-align: right;
  font-size: 1.5rem;
  font-weight: bold;
}
.modal-close span {
  background-image: url(../img/common/cross.webp);
  background-position: 0 50%;
  background-size: auto 1.5rem;
  line-height: 1.5rem;
  padding-left: 2rem;
  cursor: pointer;
}
.no-webp .modal-close span {background-image: url(../img/common/cross.png); }
.modal-item img { border: 1px solid #ddd;}
.modal-info { margin-bottom: 1.4rem;}

.modal-num {
  width: 48%;
  text-align: left;
  vertical-align: middle;
}
.modal-price {
  width: 48%;
  text-align: right;
  vertical-align: middle;
}
.modal-price .tax-out {
  font-size: 1.7rem;
  font-weight: bold;
}
.modal-price .num_price{ font-size: 2.8rem;}

.modal-oparate li {
  display: block;
  margin: 0;
}
.modal-oparate li a { display: block;}

.modal-candidate .candidate-ico {
  background-size: auto 1.5rem;
  padding-left: 2rem;
}
.modal-candidate .candidate-out .candidate-ico {
  padding-left: 3rem;
}
.modal-cancel .cancel-ico {
  background-size: auto 1.5rem;
  padding-left: 2rem;
}

@media screen and (max-width: 640px) {

/* modal */
.modal-head { margin-bottom: 1rem;}
.modal-close { font-size: 1.3rem;}

.modal-close span {
  background-size: auto 1.3rem;
  line-height: 1.3rem;
}
.modal-info { font-size: 1.3rem;}
.modal-name { width: 44%;}
.modal-price { width: 52%;}

.modal-oparate li {
  display: block;
  margin: 0 0 1rem;
}
.modal-candidate {
  float: none;
  width: 100%;
}
.modal-detail {
  float: none;
  width: 100%;
}
.modal-cancel {
  float: none;
  width: 100%;
}

}

@media screen and (max-width: 540px) {

/* modal */
.remodal { padding: 2rem 6%;}
.candidate-btn { font-size: 1.3rem;}
.modal-info { margin-bottom: 1rem;}

.modal-num {
  display: block;
  width: 100%;
}
.modal-price {
  display: block;
  text-align: left;
  width: 100%;
}
.modal-price .num_price{ font-size: 2.4rem;}

.detail-btn {
  font-size: 1.3rem;
  padding: 1.5rem 0;
}

}

@media screen and (max-width: 414px) {

.remodal.badge .modal-item::after {
  height: 20px;
  right: 10px;
  width: 17px;
  background-size: 17px 20px;
}
.modal-info { font-size: 1.2rem;}
.modal-price .num_price{ font-size: 2rem;}
.candidate-btn { padding: 1.2rem 0;}
.detail-btn { padding: 1.2rem 0;}

}

/* 7.footer
------------------------------------------- */
.candidate {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 3;
}
.candidate-ttl {
  display: inline-block;
  padding: 8px;
  background: #e4597a;
}
.candidate-block {
  display: flex;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.candidate-list {
  display: flex;
  flex: 1;
  padding: 12px;
  background: #f4f4f4;
}
.candidate-list li {
  width: 80px;
  background: #fff;
  margin-right: 12px;
  margin-bottom: 0;
}
.candidate-list li:nth-child(n+6) { display: none;}

.candidate-list li a {
  display: block;
  border: 1px solid #ddd;
}
.candidate .more {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 120px;
  font-size: 1.2rem;
  font-weight: bold;
  background: #ddd;
}
.candidate .more {
  margin-left: auto;
  width: 120px;
  font-size: 1.2rem;
  font-weight: bold;
}
.candidate .more a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 100%;
  background: #ddd;
}

@media screen and (max-width: 959px) {

.candidate { opacity: 0; visibility: hidden; }

}

/* 1.home
------------------------------------------- */
.pr_ttl {
  margin-bottom: 30px;
  color: #f9527e;
  font-size: 2rem;
  text-align: center;
}
.pr_ttl span {
  position: relative;
  display: inline-block;
}
.pr_ttl span::before,
.pr_ttl span::after {
  background-color: #f9527e;
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 2px;
}
.pr_ttl span::before {
  left: -2em;
  transform: rotate(-30deg);
}
.pr_ttl span::after {
  right: -2em;
  transform: rotate(30deg);
}
.pr_block {
  margin: 0 auto;
  max-width: 800px;
}
.prl_box {
  float: left;
  width: 47%;
}
.prl_box:last-child {
  float: right;
}
.prl_box_ttl {
  margin-bottom: 5px;
  font-weight: bold;
}
.pr_clip {
  position: relative;
  margin-bottom: 12px;
}
.pr_clip .logo {
  position: absolute;
}
.pr_clip .nc_logo {
  top: 30%;
  left: 15%;
  width: 36%;
}
.pr_clip .hp_logo {
  top: 37%;
  left: 26%;
  width: 20%;
}
.pr_clip .logo img {
  height: auto;
  width: 100%;
}
.pr_detail_list {
  margin-bottom: 10px;
}
.pr_detail_list li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 8px;
  font-weight: bold;
}
.pr_detail_list .label {
  display: inline-block;
  padding: 3px 6px;
  margin-right: 8px;
  color: #fff;
}
.pr_detail_list .cancel_label {
  vertical-align: text-bottom;
}
.pr_detail_list .cancel_label {
  color: #e86e56;
  border: 2px solid #e86e56;
}
.pr_detail_list .nc_label { background-color: #1496fa;}
.pr_detail_list .en_label { background-color: #96d228;}
.pr_detail_list .hp_label { background-color: #fa3296;}

.pr_detail_list .num_price{
  margin-right: 5px;
  font-size: 2.8rem;
}
.pr_detail_list .txt {
  margin-right: 5px;
  font-size: 2rem;
}
.prl_box .basic_btn {
  text-align: center;
}
.prl_box .basic_btn a {
  display: block;
  padding: 10px 0;
}

@media screen and (max-width: 640px) {

/* option_thanks */
.pr_ttl { font-size: 1.3rem;}

.pr_ttl span::after {  right: -10px;}
.pr_ttl span::before { left: -10px;}

.pr_detail_list li {
  display: block;
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.pr_detail_list .num_price{ font-size: 2rem;}
.prl_box .basic_btn { font-size: 1.1rem;}

.pr_detail_list .label {
  display: block;
  margin-right: 0;
  margin-bottom: 4px;
  padding: 3px 8px;
}

}

@media screen and (max-width: 480px) {

.pr_detail_list .txt {
    font-size: 1.6rem;
}

}

/* searchbox */
.searchbox {
	background-color: #f4f4f4;
	border-bottom: #ddd 1px solid;
	padding: 2rem 0;
}
.searchbox__row {
	display:-webkit-box; display:-ms-flexbox; display:flex;
}
.searchbox__ttl {
	display:-webkit-box; display:-ms-flexbox; display:flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	font-size: 1.6rem;
	width: 11rem;
}
input[type="text"].searchbox__input {
	border: #3cb4c8 2px solid;
	border-radius: 6px 0 0 6px;
	font-size: 1.6rem;
	width: calc(100% - 4rem - 4px);
}
input[type="text"].searchbox__input:focus { outline: none; }
.searchbox__btn {
	background-color: #3cb4c8;
	border-radius: 0 6px 6px 0;
	color: #fff;
	font-size: 2rem;
	padding: 1rem;
	transition: background .3s;
}
.searchbox__btn:hover { background-color: #63c3d3; }

@media screen and (max-width: 767px) {
	.searchbox__ttl { display: none; }
}
@media screen and (min-width: 768px) {
	input[type="text"].searchbox__input { width: calc(100% - 16.4rem - 4px); }
	input[type="text"].searchbox__input::placeholder { color: transparent; }
	.searchbox__btn { font-size: 2.4rem; padding: 2rem; }
}


/* 2.archive
------------------------------------------- */
.result-num {
  margin-bottom: 3rem;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.result-num .num_price{
  font-size: 3.2rem;
}
.tying-list li {
  display: inline-block;
  padding: .6em 1em;
  margin-top: 8px;
  margin-right: 8px;
  font-size: 1.2rem;
  border-radius: 3px;
  background-color: #eaf3f4;
}
.tying-list .tying-delete {
  padding-left: .8rem;
  cursor: pointer;
}
.keyword-list {
  text-align: center;
}
.keyword-list li {
  display: inline-block;
  margin: 2rem .6rem 0;
  font-size: 1.3rem;
}
.keyword-list li a {
  display: inline-block;
  padding: .6em 1em;
  color: #006bc4;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  background-color: #f8f8f8;
  transition: background-color 0.3s;
}
.keyword-list li a:hover {
  background-color: #fff;
}
.cat-list li {
  display: inline-block;
  width: 24%;
  margin: 2rem 0 0;
  vertical-align: top;
}
.cat-list li a {
  display: inline-block;
  text-decoration: underline;
  transition: text-decoration 0.3s;
}
.cat-list li a:hover {
  text-decoration: none;
}
.point-list li {
   padding-left: 1.6em;
  position: relative;
}
.point-list li::before {
  color: #3cb4c8;
  content: "»";
  left: 0;
  position: absolute;
}

.suggest {
  padding: 0 15%;
  margin-bottom: 4rem;
}
.suggest .inner {
  padding: 1.6rem 6%;
  background: #f8f8f8;
  border: 1px solid #ddd;
}
.suggest-nyan {
  width: 12%;
  vertical-align: middle;
}
.suggest-txt {
  padding-left: 4%;
  width: 88%;
  vertical-align: middle;
  font-weight: bold;
}
.suggest-txt span {
  color: #f9527e;
  font-size: 108%;
}

@media screen and (max-width: 850px) {

.suggest { padding: 0;}

}

@media screen and (max-width: 640px) {

.keyword-list li a { padding: 0.8rem 1.6rem;}

.cat-list li {
  margin: 1.6rem 0 0;
  width: 32%;
}
.point-list li { width: 48%;}

}


@media screen and (max-width: 540px) {

/* contents */

.suggest-txt { font-size: 1.2rem;}

.suggest-nyan {
  display: block;
  margin-bottom: 1rem;
  padding: 0 40%;
  width: 100%;
}
.suggest-txt {
  display: block;
  padding-left: 0;
  width: 100%;
}

/* archive */
.result-num .num_price{ font-size: 2.8rem;}
.result-num { margin-bottom: 2rem;}

}

@media screen and (max-width: 414px) {

.result-num .num_price{ font-size: 2.4rem;}
.result-num { margin-bottom: 1.5rem;}

.tying-list li {
  font-size: 1rem;
}
.keyword-list li {
  margin: 1rem 0.4rem 0;
  font-size: 1.1rem;
}
.keyword-list li a { padding: 0.6rem 1.2rem;}
.cat-list li { font-size: 1.1rem;}

}

@media screen and (max-width: 320px) {

.keyword-list li { font-size: 1rem;}
.suggest-txt { font-size: 1.1rem;}

}


/* 3.single
------------------------------------------- */
.item-use li {
  position: relative;
}
.item-use li a {
  display: block;
}
.item-use-clip li:not(:first-child) {
  display: none;
}
.item-use-thumb {
  display: flex;
  flex-wrap: wrap;
}
.item-use-thumb li {
  float: left;
  margin-top: 8px;
  width: 19.2%;
  cursor: pointer;
}
.item-use-thumb li:not(:last-child) {
  margin-right: 1%;
}
.item-use-clip li {
  border: 1px solid #ddd;
}
.item-use .item-use-thumb li {
  position: relative;
}
.item-use .item-use-thumb li::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.item-use .item-use-thumb .active::before {
  border: 3px solid #3cb4c8;
}
.pos-logo {
  position: absolute;
}
.nc-set .pos-logo {
  left: 23%;
  top: 37%;
  width: 27%;
}
.en-set .pos-logo {
  left: 13%;
  bottom: 30%;
  width: 14%;
}
.hp-set .sp-pos-logo {
  left: 9%;
  bottom: 43%;
  width: 15%;
}
.hp-set .pc-pos-logo {
  left: 27%;
  bottom: 42%;
  width: 22%;
}
.plate-set .pos-logo {
  left: 11%;
  bottom: 43%;
  width: 27%;
}
.shirt-set .pos-logo {
  left: 37%;
  top: 28%;
  width: 23%;
}


/* 4.arrange
------------------------------------------- */
.base-box {
  position: relative;
  width: 32%;
  border: 1px solid #ddd;
  vertical-align: middle;
}
.arg-box {
  padding-left: 8%;
  width: 68%;
  vertical-align: top;
}
.arg-box .inner {
  padding: 1.4rem 4%;
  border: 1px solid #3cb4c8;
}
.arg-name {
  padding-bottom: .6rem;
  margin-bottom: 2rem;
  color: #3cb4c8;
  font-size: 1.8rem;
  font-weight: bold;
  border-bottom: 1px solid #3cb4c8;
}
.arg-name dd {
  text-align: right;
}
.arg-name .num_price{
  font-size: 2.8rem;
}
.arg-txt {
  font-size: 1.3rem;
  padding-right: 4%;
  width: 60%;
}
.arg-txt p {
  margin: 0;
}
.arg-clip {
  width: 35%;
  vertical-align: middle;
}
.base-box::after {
  content: "";
  height: 30px;
  position: absolute;
  right: -18%;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  background-image: url(../img/common/plus.webp);
  background-size: cover;
}
.no-webp .base-box::after {background-image: url(../img/common/plus.png);}
.arg-oparate .ope-btn {
  padding: 1.2rem 6rem;
}
.layout-atc {
  margin-top: 1em;
}
.arrange #arg-main {
  display: none;
}
#arg-main {
  position: relative;
  padding: 6rem 0;
  background: #f9f9f9;
}
#arg-main::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -30px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 30px 30px 0 30px;
  border-color: #fff transparent transparent transparent;
}
.arg-select {
  margin-bottom: 4rem;
}
.color-list {
  margin-right: -1.28%;
}
.color-list li {
  float: left;
  margin-bottom: 2rem;
  margin-right: 1.28%;
  width: 13%;
  text-align: center;
}
.arg-select input[type="radio"] {
  display: none;
}
.color-list label {
  color: #8f8f8f;
  cursor: pointer;
  font-weight: bold;
}
.circle {
  margin: 0 auto .6rem;
  border-radius: 30px;
  height: 60px;
  width: 60px;
  background-position: 50% 50%;
}
.cc1 { background-color: #ef0000; }
.cc2 { background-color: #fca000; }
.cc3 { background-color: #fff500; }
.cc4 { background-color: #9ec700; }
.cc5 { background-color: #009825; }
.cc6 { background-color: #009e9f; }
.cc7 { background-color: #00a3e7; }
.cc8 { background-color: #0072b6; }
.cc9 { background-color: #000c7a; }
.cc10 { background-color: #a1007e; }
.cc11 { background-color: #f00082; }
.cc12 { background-color: #ef005a; }
.cc13 { background-color: #666; }
.cc14 { background-color: #000; }

.color-list li input[type="radio"]:checked + label {
  color: #333;
}
.color-list li input[type="radio"]:checked + label .circle {
  /*display: block;*/
  background-image: url(../img/common/check.webp);
  background-size: 20px auto;
}
.no-webp .color-list li input[type="radio"]:checked + label .circle {background-image: url(../img/common/check.png);}
.arg-etc {
  text-align: center;
}
.arg-etc label {
  cursor: pointer;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 2.8rem;
  color: #8f8f8f;
  display: inline-block;
  font-weight: bold;
  padding: 1.4rem 5rem;
}
.check-ico {
  padding-left: 2.6rem;
  background-image: url(../img/common/g-check.webp);
  background-position: 0 50%;
  background-size: auto 17px;
}
.no-webp .check-ico {background-image: url(../img/common/g-check.png);}
.arg-etc input[type="radio"]:checked + label {
  color: #3cb4c8;
}
.arg-etc input[type="radio"]:checked + label .check-ico  {
  background-image: url(../img/common/b-check.webp);
}
.no-webp .arg-etc input[type="radio"]:checked + label .check-ico { background-image: url(../img/common/b-check.png); }
.arg-select-oparate .ope-btn {
  /*padding: 1.2rem 10rem;*/
  padding: 1.2rem 7rem;
}
.input {
  margin-bottom: 5rem;
  text-align: center;
}
.input-h {
  margin-bottom: .6rem;
  color: #797979;
  font-weight: bold;
}
.input-user {
  text-align: center;
}
.input-user li {
  display: inline-block;
  margin: 0 0.5rem;
}
.input-user .prev-btn {
  background-color: #3cb4c8;
  border: medium none;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  padding: 1rem;
}
input.input-txt {
  padding: 1.2rem 3rem;
  text-align: center;
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .1);
   -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .1);
      box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .1);
}
.case-list li {
  float: left;
}
.case-list li label {
  display: block;
  border: 1px solid #ddd;
  cursor: pointer;
  background: #fff;
}
.preview-txt {
  display: table;
  width: 100%;
  height: 12rem;
}
.preview-txt span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.case-block {
  background: #fcfcfc;
  border-top: 1px solid #ddd;
  padding: 1.2rem 4%;
  color: #797979;
  font-weight: bold;
}
.case-select {
  text-align: right;
}
.case-select span {
  display: inline-block;
  padding-left: 2.8rem;
  background-image: url(../img/common/g-check.webp);
  background-position: 0 50%;
  background-size: auto 17px;
}
.no-webp .case-select span {background-image: url(../img/common/g-check.png);}
.case-list li input[type="radio"]:checked + label {
  border: 1px solid #3cb4c8;
}
.case-list li input[type="radio"]:checked + label .case-block {
  color: #3cb4c8;
}
.case-list li input[type="radio"]:checked + label .case-select span {
  background-image: url(../img/common/b-check.webp);
}
.no-webp .case-list li input[type="radio"]:checked + label .case-select span {background-image: url(../img/common/b-check.png);}
.input-write {
  font-size: 2.2rem;
}
.fstyle-mincho { font-family: Ryumin Bold KL;}
.fstyle-gothic { font-family: Shin Go Regular ; }
.fstyle-maru-gothic { font-family: Shin Maru Go Regular ;}
.fstyle-fude { font-family: "Kensen";}
.fstyle-gyosho { font-family: Sei Kaisho CB1;}
.fstyle-design { font-family: Folk Regular;}

.font-list {
  margin-right: -3.333%;
}
.font-list li {
  margin-right: 3.333%;
  margin-bottom: 3rem;
  width: 30%;
}
.font-list {
  margin-right: -3.333%;
}
.font-list li {
  margin-right: 3.333%;
  margin-bottom: 3rem;
  width: 30%;
}
.placement-list {
  margin-right: -2%;
}
.placement-list li {
  margin-right: 2%;
  margin-bottom: 3rem;
  width: 23%;
}
.type-clip {
  padding: 3rem 18%;
}
.cfm-item {
  margin: 0 auto;
  width: 420px;
  text-align: center;
}
.cfm-logo {
  margin-bottom: 2rem;
  border: 1px solid #ddd;
}
.cfm-num {
  margin-bottom: 1.2rem;
  font-size: 1.4rem;
}
.cfm-price {
  margin-bottom: 2rem;
  font-weight: bold;
}
.cfm-price .num_price{
  font-size: 3.2rem;
}
.cfm-price {
  margin-bottom: 2rem;
  font-weight: bold;
}
.cfm-price .num_price{
  font-size: 3.2rem;
}
.cfm-name {
  border: 1px solid #ddd;
  background-color: #fdfdfd;
}
.cfm-name .inner {
  padding: 2rem 8%;
}
.cfm-name .cfm-arg-point {
  font-size: 1.6rem;
  padding: 1rem 0;
}
.cfm-arg {
  margin-right: -2.333%;
  margin-bottom: 3rem;
}
.cfm-arg-col {
  float: left;
  margin-right: 2.333%;
  width: 31%;
  text-align: center;
  border: 1px solid #ddd;
  background: #fff;
}
.cfm-arg-col .inner {
  padding: 2rem 8%;
}
.cfm-arg-head {
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #ddd;
}
.cfm-arg-h {
  margin-bottom: .4rem;
  color: #666;
  font-size: 1.6rem;
  font-weight: bold;
}
.cfm-arg-price {
  color: #3cb4c8;
  font-size: 1.7rem;
  font-weight: bold;
}
.cfm-arg-price .num_price{
  font-size: 2.8rem;
}
.cfm-arg-point {
  padding: 2rem 0;
  color: #797979;
  font-weight: bold;
}
.point-font {
  line-height: 1;
}
.cfm-edit .btn {
  padding: .8rem 3rem;
  font-weight: bold;
}
.cfm-edit .btn .edit-ico {
  background-image: url(../img/common/edit.webp);
  background-position: 0 50%;
  background-size: auto 1.4rem;
  line-height: 1.4rem;
  padding-left: 2.4rem;
}
.no-webp .cfm-edit .btn .edit-ico {background-image: url(../img/common/edit.png);}
.cfm-bottom {
  text-align: center;
}
.cfm-bottom {
  margin-bottom: 3rem;
  font-weight: bold;
  text-align: center;
}
.cfm-tax {
  margin-bottom: 1rem;
}
.cfm-total {
  font-size: 1.6rem;
}
.cfm-total .num_price{
  font-size: 3.2rem;
}
.point-font span {
  font-size: 1.6rem;
}
.cfm-contents {
  border-top: 1px solid #ddd;
}
.cfm-row-block {
  display: table;
  width: 100%;
}
.cfm-row-info {
  display: table-cell;
  width: 80%;
  vertical-align: middle;
}
.cfm-row-price {
  display: table-cell;
  padding: 1.2rem 20px;
  width: 20%;
  text-align: right;
  vertical-align: middle;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.cfm-table {
  width: 100%;
  border-left: 1px solid #ddd;
}
.cfm-table th,
.cfm-table td {
  padding: 1.6rem 20px;
  vertical-align: middle;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.cfm-table th {
  width: 200px;
  background-color: #f8f8f8;
}
.cfm-row-arg .cfm-row-price {
  color: #3cb4c8;
}
.cfm-row-item {
  border: 1px solid #ddd;
  margin-right: 10px;
  vertical-align: middle;
  width: 100px;
}
.cfm-row-price {
  font-weight: bold;
}
.cfm-row-price .num,
.cfm-btm-price .num_price{
  font-size: 2rem;
}
.cfm-btm-price {
  text-align: right;
  font-weight: bold;
}
.cfm-row-total {
  margin-bottom: 20px;
  border-top: 1px solid #ddd;
  margin-top: 2rem;
}
.cfm-table a {
  display: inline-block;
  padding: .2rem 1rem;
  margin-left: 1.4rem;
}
.cfm-table .edit-btn {
  display: inline-block;
  padding: 0.6rem 1rem;
  font-size: 1.1rem;
}
.cfm-table .edit-btn .edit-ico {
  padding-left: 1.6rem;
  background-image: url(../img/common/edit.webp);
  background-position: 0 50%;
  background-size: auto 1.1rem;
}
.no-webp .cfm-table .edit-btn .edit-ico {background-image: url(../img/common/edit.png);}
.cfm-edit-detail {
  display: table-cell;
  width: 70%;
}
.cfm-edit-btn {
  display: table-cell;
  width: 30%;
  text-align: right;
}

@media screen and (max-width: 850px) {

.cfm-table th,
.cfm-table td {
  display: block;
  padding: 1rem 4%;
  width: 100%;
}
.cfm-row-info { width: 68%;}
.cfm-row-price { width: 32%;}

/* arrange */
.arg-txt { font-size: 1.2rem;}
.case-list { margin-right: -3%;}

.case-list li {
  margin-right: 3%;
  width: 47%;
}
.cfm-arg-col .inner { padding: 2rem 6%;}

.cfm-arg-col .cfm-edit .btn {
  display: block;
  padding: 0.8rem 0;
}

}

@media screen and (max-width: 640px) {

.cfm-table th, .cfm-table td {
  font-size: 1.2rem;
  padding: .8rem 4%;
}
.cfm-row-item { width: 80px;}
.cfm-table .edit-btn { font-size: 1rem;}

.base-box {
  display: block;
  margin: 0 auto 5rem;
  width: 50%;
}
.base-box::after {
  bottom: -4rem;
  margin-right: -15px;
  margin-top: 0;
  right: 50%;
  top: auto;
}
.arg-box {
  padding: 0;
  display: block;
  width: 100%;
}
.color-list { margin-right: -2%;}

.color-list li {
  margin-right: 2%;
  width: 23%;
  font-size: 1.1rem;
}
.circle {
  border-radius: 22px;
  height: 44px;
  width: 44px;
}
.cfm-arg-h { font-size: 1.2rem;}
.cfm-arg-price { font-size: 1.2rem;}
.cfm-arg-price .num_price{ font-size: 1.6rem;}
.cfm-arg-col .inner { padding: 1rem 6%;}
.cfm-edit { font-size: 1.1rem;}

}

@media screen and (max-width: 540px) {

/* contents */
.input-user li {
  display: block;
  margin: 0 0 1rem;
}
.cfm-arg { margin-right: 0;}

.cfm-arg-col {
  float: none;
  margin-bottom: 1rem;
  margin-right: 0;
  width: 100%;
}
.cfm-arg-col .inner {
  display: table;
  padding: 1.6rem 2%;
  width: 100%;
}
.cfm-arg .cfm-arg-head {
  border-bottom: none;
  display: table-cell;
  padding-bottom: 0;
  vertical-align: middle;
  width: 30%;
}
.cfm-arg .cfm-arg-point {
  display: table-cell;
  vertical-align: middle;
  width: 48%;
}
.cfm-arg .cfm-edit {
  display: table-cell;
  vertical-align: middle;
  width: 22%;
}

/* arrange */
.font-list { margin-right: 0;}

.font-list li {
  margin-right: 0;
  margin-bottom: 2rem;
  width: 100%;
}
.preview-txt { height: 8rem;}
.input { margin-bottom: 4rem;}
.case-block { font-size: 1.2rem;}

.arg-select-oparate li {
  display: block;
  margin: 0;
}

}

@media screen and (max-width: 480px) {

/* contents */
.cfm-row-info,
.cfm-row-price {
  display: block;
  width: 100%;
}
.cfm-row-price { border-left: 1px solid #ddd;}
.item img { transform: scale(1);}

.arg-name {
  margin-bottom: 1rem;
  font-size: 1.4rem;
}
.base-box { margin: 0 auto 4rem;}

.base-box::after {
  bottom: -3rem;
  height: 20px;
  margin-right: -10px;
  width: 20px;
}
.arg-name .num_price{ font-size: 2rem;}
.arg-box .inner { padding: 1rem 3% 2rem;}

.arg-txt {
  display: block;
  padding-right: 0;
  margin-bottom: 1rem;
  width: 100%;
}
.arg-clip {
  display: block;
  padding: 0 15%;
  vertical-align: middle;
  width: 100%;
}
.arg-oparate li {
  float: left;
  margin: 0;
  width: 48%;
}
.arg-oparate li:last-child { float: right;}
.arg-oparate .ope-btn { padding: 1.2rem 0;}
.case-list li { margin-bottom: 1.6rem;}
.cfm-item { width: 100%;}
.cfm-price .num_price{ font-size: 2.4rem;}

}

@media screen and (max-width: 414px) {


input.input-txt {
  padding: 1.2rem 0;
  width: 100%;
}
.type-clip { padding: 2rem 8%;}
.cfm-arg-price { font-size: 1.1rem;}

}

@media screen and (max-width: 375px) {

.cfm-arg-point {
  font-size: 1.2rem;
  padding: 1rem 0;
}

}

@media screen and (max-width: 320px) {

.cfm-arg-point { font-size: 1.1rem;}

}

/* 5.payment
------------------------------------------- */
.login-sec {
  padding: 4rem 1em;
  margin-bottom: 4rem;
  text-align: center;
  background-color: #f9f9f9;
}
.short-set-operate .btn {
  border: 1px solid #3cb4c8;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 1.4rem 5rem;
}
.identity {
  margin: 0 auto 3rem;
  width: 70%;
}
.identity ul {
  padding: 1.6rem;
  border: 1px solid #ddd;
  background: #fcfcfc;
}
.identity ul li {
  display: inline-block;
  font-size: 1.2rem;
  margin-right: 1rem;
}
.sum-table {
  width: 100%;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.sum-table th,
.sum-table td {
  padding: 1.4rem 0;
  text-align: center;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.sum-table th {
  padding: 1rem 0;
  background: #f7f7f7;
}
.sum-table .total-h {
  background-color: #eee;
}
.sum-table .total-d {
  font-weight: bold;
  background-color: #fcfcfc;
}
.sum-item-logo img {
  width: 180px;
  border: 1px solid #ddd;
}
.pay-box {
  display: none;
  margin-bottom: 6rem;
}
.pay-tab li {
  text-align: center;
  width: 50%;
  font-size: 1.6rem;
  font-weight: bold;
  border-top: 3px solid #fff;
  border-bottom: 1px solid #ddd;
}
.pay-tab li a {
  display: block;
  padding: 2rem 0;
}
.pay-tab .active {
  border-top: 3px solid #3cb4c8;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #ddd;
}
.pay-tab .active a {
  color: #3cb4c8;
}
.pay-tab li span {
  position: relative;
  padding-right: 2rem;
}
.pay-tab li span::after {
  position: absolute;
  top: 0;
  right: 0;
  content: "▼";
  font-size: 1.4rem;
}
.pay-block {
  padding-top: 3rem;
}
.pay-box-block {
  margin-bottom: 3rem;
}
.credit-msg {
  margin-bottom: 2rem;
  color: #e4597a;
  font-size: 1.2rem;
}
.wide-cc {
  margin-right: 3%;
  width: 22%;
}
.sct-line {
  margin-right: 2%;
  width: 25%;
}
.form-table .remark {
  margin-top: 1rem;
  font-size: 1.2rem;
}
.pay-sec {
  float: left;
  margin-bottom: 2rem;
  width: 48%;
}
.pay-sec:last-child {
  float: right;
}
.pay-sec-h {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
}
.use-card-h {
  margin-bottom: .6rem;
}
.use-card-clip {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 1.6rem 20%;
  margin-bottom: 1rem;
}
.bank-name {
  display: inline-block;
  padding: 1rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.7rem;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #f9f9f9;
}
.cal-main {
  margin: 0 auto 1rem;
  width: 40%;
}
.error-link {
  text-align: center;
}
.js-cal-txt {
  color: #3cb4c8;
  cursor: pointer;
}

@media screen and (max-width: 850px) {

/* contents */
.sum-table {
  display: block;
  position: relative;
  width: 100%;
}
.sum-table th {
  display: block;
}
.sum-table thead{ 
  display: block; 
  float: left; 
  width: 44%;
}
.sum-table thead tr {
  display: block;
}
.sum-table tbody{ 
  display: block;
  overflow-x: auto;
  position: relative;
  white-space: nowrap;
  width: auto;
}
.sum-table tbody tr{ 
  display: block;
  vertical-align: top; 
}
.sum-table td {
  display: block;
  padding: 1.4rem 2rem;
  text-align: left;
}
.sum-table th {
  padding: 1.4rem 2rem;
  text-align: left;
}
.sum-table th,
.sum-table td {
  padding: 10px 2rem 0;
}
.sum-table .order-t-logo { min-height: 144px;}
.sum-table .order-t-txt { min-height: 44px;}
.sum-item-logo img { width: 140px;}

.pay-sec {
  float: none;
  margin-bottom: 0;
  width: 100%;
}
.pay-sec:last-child {
  float: none;
  margin-top: 2rem;
}

}

@media screen and (max-width: 640px) {

.pay-tab li { font-size: 1.4rem;}

.use-card-h {
  display: block;
  margin-bottom: 0.6rem;
}
.use-card-clip { display: block;}

.pay-box-info {
  float: none;
  margin-bottom: 2rem;
  width: 100%;
}
.pay-box-cal {
  float: none;
  width: 100%;
}
.pay-box-cal { padding: 1rem 8%;}
.cal-main { width: 100%;}

}

@media screen and (max-width: 540px) {

.identity { width: 100%;}

.identity ul li {
  display: block;
  margin-bottom: .6rem;
  text-align: left;
}

}

@media screen and (max-width: 480px) {

/* contents */
.sum-table { font-size: 1.2rem;}

.sum-table th,
.sum-table td {
  padding: 1.4rem 1rem;
}
.sct-line { width:34%;}

}

@media screen and (max-width: 414px) {

/* contents */
.sum-table th, .sum-table td {
  padding: 1.2rem 1rem;
}
.sum-table th.sum-logo { height: 100px;}
.pay-tab li a { padding: 1.2rem 0;}
.pay-tab li { font-size: 1.3rem;}
.pay-sec-h { font-size: 1.3rem;}

}

@media screen and (max-width: 375px) {

/* contents */
.sum-table { font-size: 1.1rem;}
.stand-key-btn { font-size: 1.2rem;}

}

@media screen and (max-width: 320px) {

.stand-key-btn { font-size: 1.1rem;}

}

/* 6.form
------------------------------------------- */
.form-table {
  width: 100%;
  border-top: 1px solid #ddd;
}
.form-table th,
.form-table td {
  padding: 2rem 2%;
  font-size: 1.4rem;
  border-bottom: 1px solid #ddd;
}
.form-table th {
  width: 34%;
  font-weight: bold;
}
.form-table td {
  width: 66%;
}
.heed {
  padding: 1px 6px;
  margin-right: 1rem;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 3px;
}
.any.heed { background-color: #999; }
.req.heed { background-color: #f9527e; }
.input-line {
  margin-right: 2rem;
  margin-left: 1rem;
}

input::-webkit-input-placeholder {
  color: #999;
}
input:-moz-placeholder {
  color: #999;
}
input::-moz-placeholder {
  color: #999;
}
input:-ms-input-placeholder {
  color: #999;
}
.wide-xs { width: 16%; }
.wide-s { width: 20%; }
.wide-m { width: 60%; }
.wide-l { width: 100%; }

.term-block {
  width: 100%;
  height: 200px;
  overflow-y: scroll;
  border: 1px solid #ddd;
  -webkit-overflow-scrolling: touch;
  background-color: #fafafa;
}
#cookiepolicy .terms-box p {
  margin-bottom: 1rem;
}
#cookiepolicy .terms-box a { text-decoration: underline; }
.form-term {
  margin-bottom: 2rem;
  font-size: 1.1rem;
}
.form-term .inner {
  padding: 20px;
}
.terms-ttl {
  margin: 0 auto 24px;
  font-weight: bold;
}
.terms-box {
  margin: 40px 0 0;
  line-height: 1.6;
}
.terms-box-ttl {
  margin-bottom: 16px;
  font-weight: bold;
}
.terms-box ol {
  margin: 0 0 0 1rem;
}
.terms-box ol li {
  list-style: inside none decimal;
  margin: 16px 0 0;
}
.terms-box ol li ol li {
  list-style-type: none;
  margin: 1rem 0 0;
}
.terms-date {
  margin-top: 2rem;
  text-align: right;
}
.agree-btn {
  display: none;
}
.agree-btn + label {
  display: inline-block;
  padding: 1.4rem 3rem;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 3px;
  background-color: #bbb;
}
.agree-btn:checked + label {
  background-color: #3cb4c8;
}
.agree_check {
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
}
.agree_check .heed {
  font-weight: bold;
  float: none;
}
.agree_check input[name="agree"] {
  appearance: auto;
  width: 1em;
  height: 1em;
}
.form .ope-btn {
  padding: 1.4rem 8rem;
}
.msg {
  background: #fff4f7;
  border: 1px solid #e4597a;
  padding: 16px;
}
.tying-list + .msg { margin-top: 1.8vh; }
.msg-txt {
  color: #e4597a;
}
.pay_select_list li:first-child {
  margin-bottom: 1rem;
}
.pay_select_list label {
  display: inline-block;
  padding-left: 5px;
}
.terms-check {
  margin-bottom: 3rem;
  text-align: center;
}
.member-login {
  font-size: 1.2rem;
  padding: 0.6rem 1.4rem;
  cursor: pointer;
}
.existing-sec {
  background-color: #f9f9f9;
}

@media screen and (max-width: 850px) {

/* contents */

.form-table th,
.form-table td {
  display: block;
  padding: 1.6rem 0;
  width: 100%;
}
.form-table th {
  padding: 1.6rem 0 0;
  border: none;
}

}

@media screen and (max-width: 640px) {

.heed { font-size: 1.1rem;}

.input-line {
  margin-left: 0.8rem;
  margin-right: 1rem;
}
.wide-xs { width: 28%; }
.wide-s { width: 32%; }
.wide-m { width: 100%; }
.wide-l { width: 100%; }

}

/* 7.form
------------------------------------------- */
.order-box {
  padding: 2rem 0;
  width: 540px;
  margin: 0 auto 3rem;
  text-align: center;
  background: #f2f9fa;
}
.order-num .num_price{
  display: block;
  font-size: 2.3rem;
}
.option-block {
  border-top: 1px solid #ddd;
}
.option-box {
  border-bottom: 1px solid #ddd;
}
.option-box label {
  display: block;
  padding: 1.6rem 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
     -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
}
.option-box label:hover {
  background-color: #fff;
}
.option-box input[type="checkbox"]:checked + label {
  background-color: #fff;
}
.option-box input[type="checkbox"]:checked + label .option-main::before {
  background-image: url(../img/common/l-check-on.webp);
}
.no-webp .option-box input[type="checkbox"]:checked + label .option-main::before {background-image: url(../img/common/l-check-on.png);}
.option-box input {
  display: none;
}
.option-main {
  position: relative;
  padding-left: 60px;
}
.option-main::before {
  position: absolute;
  top: 50%;
  left: 2%;
  content: "";
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background-image: url(../img/common/l-check-off.webp);
  background-size: auto 20px;
}
.no-webp .option-main::before {background-image: url(../img/common/l-check-off.png);}
.option-info {
  vertical-align: middle;
  width: 66%;
}
.option-view {
  width: 34%;
  vertical-align: middle;
}
.option-h {
  margin-bottom: .4rem;
  font-size: 1.6rem;
  font-weight: bold;
}
.option-desc {
  color: #666;
  font-size: 1.3rem;
}
.option-clip {
  padding: 0 10%;
  width: 60%;
  vertical-align: middle;
}
.option-price {
  width: 40%;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}
.option-price .num_price{
  font-size: 2.2rem;
}
.option-oparate .basic-btn {
  border: 1px solid #3cb4c8;
}
.option-price .count {
  font-size: 1.2rem;
  font-weight: normal;
}
.bank-receipt {
  margin: 0 auto;
  width: 710px;
}
.trans-price-h {
  display: block;
  font-size: 1.4rem;
}
.trans-price {
  margin-bottom: 3rem;
  text-align: center;
  font-size: 1.7rem;
  font-weight: bold;
}
.trans-price .num_price{
  font-size: 3.2rem;
}
.trans-info {
  margin-bottom: 3rem;
}
.bank-table {
  margin-bottom: .4rem;
  width: 100%;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.bank-table th,
.bank-table td {
  padding: 1.6rem;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.bank-table th {
  width: 30%;
  background-color: #f4f4f4;
}
.print-link {
  text-align: right;
}
.print-link .ico {
  line-height: 15px;
  padding-left: 2rem;
  background-image: url(../img/common/print.webp);
  background-position: 0 50%;
  background-size: auto 15px;
}
.no-webp .print-link .ico {background-image: url(../img/common/print.png);}
.trans-contact .basic-btn {
  padding: 1.4rem 3rem;
  font-weight: bold;
}
.trans-blk {
  display: block;
}
.corp-info {
  display: none;
  text-align: center;
}
.corp-info-h {
  margin: 0 auto 1.6rem;
  width: 22%;
}

@media screen and (max-width: 850px) {

.option-h { font-size: 1.4rem;}

}

@media screen and (max-width: 768px) {

.bank-receipt { width: 100%;}

}

@media screen and (max-width: 640px) {

.bank-oparate li { display: block;}
.bank-oparate .ope-btn { width: 100%;}

.option-info {
  display: block;
  width: 100%;
}
.option-view {
  display: block;
  width: 100%;
}
.option-info { margin-bottom: 1rem;}
.option-oparate li { display: block;}
.option-oparate li .basic-btn { width: 100%;}

}

@media screen and (max-width: 540px) {

/* contents */
.order-box {
  padding: 1.6rem 4%;
  width: 100%;
}
.order-num { font-size: 1.3rem;}
.order-num .num_price{ font-size: 2rem;}
.order-txt { font-size: 1.1rem;}

}

@media screen and (max-width: 480px) {

/* contents */
.option-main { padding-left: 48px;}
.option-box label { padding: 1.2rem 0;}

.option-clip {
  padding: 0 5% 0 0;
  width: 25%;
}
.option-price {
  text-align: left;
  width: 75%;
}
.option-desc { font-size: 1.1rem;}

}

@media screen and (max-width: 414px) {

.option-h {
  font-size: 1.3rem;
  margin-bottom: .2rem;
}
.option-info { margin-bottom: .4rem;}
.option-price .num_price{ font-size: 1.8rem;}
.bank-table { font-size: 1.2rem;}
.bank-table th, .bank-table td { padding: 1.2rem;}

}

@media screen and (max-width: 375px) {

.trans-price .num_price{ font-size: 2.8rem;}

}

/* 8.page
------------------------------------------- */
/* section */
.home .sec,
.guide .sec { margin-top: -50px; padding-top: 50px; }
@media screen and (min-width: 375px) {
	.home .sec,.guide .sec { margin-top: -60px; padding-top: 60px; }
}
@media screen and (min-width: 768px) {
	.home .sec,.guide .sec { margin-top: -90px; padding-top: 90px; }
}
@media screen and (min-width: 960px) {
	.home .sec,.guide .sec { margin-top: 0; padding-top: 0; }
}

/* common - layout */
.contents-gray {
	background-color: #f4f4f4;
	padding: 2rem;
}
.contents-row {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -ms-flex-wrap: wrap; flex-wrap: wrap;
}
.contents-row.start {
	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
}
.contents-row.reverse {
	-webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;
}
.contents-row .col38,
.contents-row .col48,
.contents-row .col58,
.contents-row .col30,
.contents-row .col66 {
  width: 100%;
	max-width: 705px;
}
.contents-row *[class^=col] + *[class^=col] {
  margin-top: 2rem;
}
.contents-hr {
	border-bottom: #ddd 1px solid;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
.contents-img {
	border: #ddd 2px solid;
}
@media screen and (min-width: 768px) {
	.contents-gray { padding: 4rem 5rem; }
  .contents-row .col38 { width: 38%; }
  .contents-row .col48 { width: 48%; }
  .contents-row .col58 { width: 58%; }
  .contents-row .col30 { width: 30%; }
  .contents-row .col66 { width: 66%; }
  .contents-row *[class^=col] + *[class^=col] { margin-top: 0; }
}

/* common - header */
.header-bar {
	margin-bottom: 1em;
	padding-bottom: 0.7em;
	position: relative;
	z-index: 0;
}
.header-bar::before,
.header-bar::after {
	border-top: #ddd 2px solid;
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
}
.header-bar::after {
	border-top-color: #3cb4c8;
	width: 200px;
}
.header-bar-sub {
	margin-bottom: 1rem;
	padding-left: 1.5em;
	position: relative;
	z-index: 0;
}
.header-bar-sub::before {
	border-top: #3cb4c8 2px solid;
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 2px);
	left: 0;
	width: 1em;
	height: 0;
}

/* guide */
.guide-ttl {
  text-align: center;
  font-weight: bold;
}
.guide-ttl .head-ico {
  display: inline-block;
  padding-top: 6rem;
  background-position: 50% 0;
  background-size: 46px auto;
}
.member-head-ico { background-image: url(../img/guide/member-ico.webp); }
.filter-head-ico { background-image: url(../img/guide/filter-ico.webp); }
.step-head-ico { background-image: url(../img/guide/step-ico.webp); }
.pay-head-ico { background-image: url(../img/guide/pay-ico.webp); }
.comp-head-ico { background-image: url(../img/guide/comp-ico.webp); }
.arrange-head-ico { background-image: url(../img/guide/arrange-ico.webp); }
.no-webp .member-head-ico { background-image: url(../img/guide/member-ico.png); }
.no-webp .filter-head-ico { background-image: url(../img/guide/filter-ico.png); }
.no-webp .step-head-ico { background-image: url(../img/guide/step-ico.png); }
.no-webp .pay-head-ico { background-image: url(../img/guide/pay-ico.png); }
.no-webp .comp-head-ico { background-image: url(../img/guide/comp-ico.png); }
.no-webp .arrange-head-ico { background-image: url(../img/guide/arrange-ico.png); }
.guide-box {
  padding: 2rem 0 0;
}
.g-member-blcok {
  margin-right: -3.333%;
}
.g-member-col {
  float: left;
  margin-right: 3.333%;
  width: 30%;
  text-align: center;
  border-top: 3px solid #3cb4c8;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  background-color: #fafafa;
}
.g-member-col .inner {
  padding: 1.8rem 6%;
}
.g-col-h {
  margin-bottom: 1rem;
  font-weight: bold;
}
.g-col-desc {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.g-step-block {
  margin-right: -3%;
}
.g-step-col {
  float: left;
  margin-right: 3%;
  width: 22%;
}
.g-step-h {
  font-weight: bold;
}
.g-pay-block {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.g-pay-box:first-child {
  border-right: 1px solid #ddd;
}
.g-pay-h {
  padding: 1.2rem 0;
  text-align: center;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  background-color: #f7f7f7;
}
.g-pay-main {
  padding: 1.6rem 4%;
}
.g-pay-card img {
  width: 240px;
}
.guide-atc {
  margin-top: 24px;
}
.day-box {
  margin: 0 auto 4rem;
  width: 560px;
  text-align: center;
  border: 4px double #ddd;
  background-color: #fafafa;
}
.day-box .inner {
  padding: 2rem 4% 1rem;
}
.day-box-h {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.6rem;
  padding-bottom: 1.6rem;
}
.day-box-h img {
  width: 60%;
}
.g-data-block {
  display: flex;
}
.g-data-col {
  width: 32%;
  border: 1px solid #ddd;
  background-color: #fafafa;
}
.g-data-col:not(:last-child) {
  margin-right: 2%;
}
.g-data-col .inner {
  padding: 2.6rem 6%;
}
.g-data-clip {
  vertical-align: middle;
  width: 18%;
}
.g-data-info {
  padding-left: 8%;
  vertical-align: middle;
  width: 82%;
}
.g-data-h {
  margin-bottom: .6rem;
  font-size: 1.5rem;
  font-weight: bold;
}

/* faq */
.faq-box {
  padding: 16px 0;
  border-bottom: 1px dashed #ddd;
}
.faq-box-ttl a:hover {
  text-decoration: underline;
}
.cap {
  position: relative;
  padding-left: 3rem;
}
.cap::before {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2rem;
  line-height: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.q-cap::before {
  color: #3cb4c8;
  content: "Q.";
}
.a-cap::before {
  top: .2em;
  color: #e4597a;
  content: "A.";
}
.faq-box-main {
  display: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.faq-box.active {
  background-color: #f8f8f8;
}
.faq-box-main a {
  color: #3cb4c8;
  text-decoration: underline;
}
.faq-single-main a {
  color: #3cb4c8;
  text-decoration: underline;
}

.legal-table {
  width: 100%;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.legal-table th,
.legal-table td {
  padding: 1.6rem 2%;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.legal-table th {
  width: 30%;
  background-color: #f7f7f7;
}

.half-box {
  float: left;
  width: 48%;
}
.half-box:last-child {
  float: right;
}
.offset-left {
  float: left;
  width: 58%;
}
.offset-right {
  float: right;
  width: 38%;
}

@media screen and (max-width: 850px) {

.g-data-clip {
  display: block;
  padding: 0 40%;
  margin-bottom: 2rem;
  width: 100%;
}
.g-data-info {
  display: block;
  padding-left: 0;
  width: 100%;
  text-align: center;
}
.half-box {
  float: none;
  width: 100%;
}
.half-box:last-child {
  float: none;
  margin-top: 1.6rem;
}
.offset-left { width: 48%;}
.offset-right { width: 48%;}

}

@media screen and (max-width: 640px) {

.g-member-blcok { margin-right: 0;}

.g-member-col {
  float: none;
  margin-right: 0;
  margin-bottom: 2rem;
  width: 100%;
}
.g-step-block { margin-right: 0;}

.g-step-col {
  float: none;
  margin-right: 0;
  margin-bottom: 3rem;
  width: 100%;
}
.g-pay-box {
  display: block;
  width: 100%;
}
.g-pay-box:first-child {
  border-right: none;
  border-bottom: 1px solid #ddd;
}
.day-box { width: 100%;}

.g-data-col {
  margin-right: 0;
  width: 100%;
}
.g-data-col:not(:last-child) { margin-bottom: 20px;}

.g-data-clip {
  display: table-cell;
  padding: 0;
  width: 16%;
}
.g-data-info {
  display: table-cell;
  padding-left: 8%;
  text-align: left;
  width: 82%;
}

.legal-table { font-size: 1.1rem;}

.legal-table th,
.legal-table td {
  display: block;
  padding: 1.2rem 2%;
  width: 100%;
}
.offset-left,
.offset-right {
  width: 100%;
}
.g-data-block { flex-direction: column;}

}

@media screen and (max-width: 414px) {

.day-box-h img { width: 80%;}

}

/* top */

.faq-block {
  margin-bottom: 4rem;
}
.stand-btn {
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
}
.stand-btn .btn {
  padding: 1em 2em;
}
.center-btn {
  text-align: center;
}
.center-btn li {
  display: inline-block;
  margin: 0 1em;
}
.center-btn li a {
  padding: 0.8em 3em;
}

@media screen and (max-width: 640px) {

.center-btn li { display: block;}
.center-btn li:not(:first-child) { margin-top: 1.6rem;}
.center-btn li a { display: block;}

.stand-btn .btn { display: block;}
.stand-btn { font-size: 1.4rem;}

}

/* search */
.guide-sub-ttl {
  text-align: center;
  font-weight: bold;
}
.guide-sub-ttl .can-bal.bal {
  color: #e4597a;
}
.guide-sub-ttl .ttl {
  display: block;
  font-size: 1.8rem;
}
.guide-sub-ttl .label {
  background-color: #3cb4c8;
  color: #fff;
  display: inline-block;
  margin-bottom: 1em;
  padding: .2em .6em;
}
.guide-sub-ttl .can-label.label {
  background-color: #e4597a;
}

/* step */
.step-box:not(:last-child) {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ddd;
}
.step-box .label {
  display: inline-block;
  padding: .2em .4em;
  color: #3cb4c8;
  border: 2px solid #3cb4c8;
}
.step-box .step-ttl {
  margin-bottom: .6em;
  font-size: 2rem;
  font-weight: bold;
}
.step-desc a {
  color: #3cb4c8;
  text-decoration: underline;
}

@media screen and (max-width: 850px) {
/* step */
.step-box .step-ttl { font-size: 1.8rem;}
}

@media screen and (max-width: 640px) {
/* step */
.step-box .step-ttl { font-size: 1.6rem;}
.step-box .offset-right { margin-top: 20px;}
}

/* arrange */
.arrange-ttl {
  color: #3cb4c8;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}
.arrange-clip {
  margin-bottom: 4rem;
}

@media screen and (max-width: 640px) {

.arrange-ttl {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

}

/* member */
.member-sec {
  padding: 60px;
  border: 1px solid #3cb4c8;
}

@media screen and (max-width: 640px) {

/* member */
.member-sec { padding: 30px;}

}

/* guide */
.guide-navi li {
  float: left;
  margin-bottom: 1.6em;
  width: 32%;
  font-size: 1.4rem;
  font-weight: bold;
}
.guide-navi li:not(:nth-child(3n)) {
  margin-right: 2%;
}
.guide-navi li a {
  display: block;
  padding: 2em 1.6em;
  border: 1px solid #ddd;
  background-color: #fcfcfc;
}
.guide-navi li .ttl {
  display: block;
  font-size: 1.7rem;
}
.guide-navi li .pnav-ico {
  position: relative;
  display: block;
  padding-left: 5em;
  background-position: 0 50%;
  background-size: auto 100%;
}
.guide-navi li .pnav-ico::after {
  position: absolute;
  content: "";
  top: 50%;
  right: 0;
  width: 8px;
  margin-top: -7px;
  height: 14px;
  background-image: url(../img/common/b-arrow.webp);
  background-size: 8px 14px;
}
.no-webp .guide-navi li .pnav-ico::after {background-image: url(../img/common/b-arrow.png);}
.guide-navi .search-c { background-image: url(../img/guide/pg-search-ico.webp);}
.guide-navi .step-c { background-image: url(../img/guide/pg-cart-ico.webp);}
.guide-navi .arrange-c { background-image: url(../img/guide/pg-design-ico.webp);}
.guide-navi .payment-c { background-image: url(../img/guide/pg-card-ico.webp);}
.guide-navi .delivery-c { background-image: url(../img/guide/pg-folder-ico.webp);}
.guide-navi .member-c { background-image: url(../img/guide/pg-member-ico.webp);}
.no-webp .guide-navi .search-c { background-image: url(../img/guide/pg-search-ico.png);}
.no-webp .guide-navi .step-c { background-image: url(../img/guide/pg-cart-ico.png);}
.no-webp .guide-navi .arrange-c { background-image: url(../img/guide/pg-design-ico.png);}
.no-webp .guide-navi .payment-c { background-image: url(../img/guide/pg-card-ico.png);}
.no-webp .guide-navi .delivery-c { background-image: url(../img/guide/pg-folder-ico.png);}
.no-webp .guide-navi .member-c { background-image: url(../img/guide/pg-member-ico.png);}
@media screen and (max-width: 850px) {
.guide-navi li { width: 48%;}
.guide-navi li:not(:nth-child(3n)) { margin-right: 0;}
.guide-navi li:not(:nth-child(2n)) { margin-right: 2%;}
.guide-navi li .ttl { font-size: 1.5rem;}
.guide-navi li a { padding: 1.6em 1.2em;}
}
@media screen and (max-width: 640px) {
.guide-navi li:not(:nth-child(2n)) { margin-right: 0;}
.guide-navi li {
  margin-bottom: 1em;
  width: 100%;
}
.guide-navi li a { padding: 1em 4%;}
}
.guide-header {
	background-position: 0 50%; background-size: auto 100%; background-repeat: no-repeat;
	padding-left: 1.5em;
}
.guide-header.search { background-image: url("../img/guide/pg-search-ico.webp"); }
.guide-header.flow { background-image: url("../img/guide/pg-cart-ico.webp"); }
.guide-header.payment { background-image: url("../img/guide/pg-card-ico.webp"); }
.guide-header.deliver { background-image: url("../img/guide/pg-folder-ico.webp"); }
.guide-header.arrange { background-image: url("../img/guide/pg-design-ico.webp"); }
.guide-header.register { background-image: url("../img/guide/pg-member-ico.webp"); }
.no-webp .guide-header.search { background-image: url("../img/guide/pg-search-ico.png"); }
.no-webp .guide-header.flow { background-image: url("../img/guide/pg-cart-ico.png"); }
.no-webp .guide-header.payment { background-image: url("../img/guide/pg-card-ico.png"); }
.no-webp .guide-header.deliver { background-image: url("../img/guide/pg-folder-ico.png"); }
.no-webp .guide-header.arrange { background-image: url("../img/guide/pg-design-ico.png"); }
.no-webp .guide-header.register { background-image: url("../img/guide/pg-member-ico.png"); }
.step-box .label {
  display: inline-block;
  padding: .2em .4em;
  color: #3cb4c8;
  border: 2px solid #3cb4c8;
}
.guide-payment-tax {
	border: #e4597a 2px solid;
	padding: 1em;
}
.payment-box .contents-gray {
	max-width: 480px;
	padding: 1em;
}
.guide-payment-card {
	width: 220px;
}
.guide-payment-privacy ol > li {
	list-style: outside decimal;
	margin: 1rem 0 1rem 2em;
}
.guide-payment-privacy ul li {
	list-style: outside disc;
	margin-left: 1em;
}
.guide-deliver-header {
	-webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start;
	-webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
}
.guide-deliver-header .icon {
	margin-right: 1rem;
	width: 36px;
}
@media screen and (max-width: 767px) {
	.contents-row.search .contents-img { border: 0; }
}
@media screen and (min-width: 768px) {
	.step-box .col38 { max-width: 380px; }
}

/* price */
.price-lead .col30 {
	width: 80%;
	max-width: 564px;
	margin-left: auto;
	margin-right: auto;
}
.price-feature-header .inside {
	display: inline-block;
	padding: 0 6%;
	position: relative;
	z-index: 0;
}
.price-feature-header .inside::before,
.price-feature-header .inside::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	width: 0;
	height: 102%;
	border-left: #3cb4c8 2px solid;
}
.price-feature-header .inside::before {
	transform: rotate(-13deg);
	left: 3%;
}
.price-feature-header .inside::after {
	transform: rotate(13deg);
	right: 3%;
}
.price-feature-header .marker {
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, #ffed77 50%);
}
.price-arrangebox {
	border: #3cb4c8 1px solid;
	padding: 2rem;
}
.price-arrangetable thead th {
	padding-bottom: 0.6em;
}
.price-arrangetable tr {
	border-bottom: #ddd 1px solid;
}
.price-arrangetable tbody th,
.price-arrangetable tbody td {
	padding: 0.6em 5%;
}
.price-arrangetable tbody th {
	background-color: #f4f4f4;
	font-weight: 600;
	width: 10em;
}
.price-opttable tr {
	border-bottom: #ddd 1px solid;
}
.price-opttable thead th {
	padding-bottom: 0.6em;
}
.price-opttable tbody th,
.price-opttable tbody td {
	padding: 15px 0;
}
.price-opttable .detail { width: calc(70% - 4rem); }
.price-opttable .figure { width: 20%; padding-left: 2rem; padding-right: 2rem; }
.price-opttable .price { width: 10%; min-width: 9rem; text-align: center; }
.price-opttable .ribbon {
	background-color: #e4597a;
	color: #fff;
	display: inline-block;
	font-size: 1.2rem;
	height: 20px;
	line-height: 20px;
	margin-left: 1rem;
	padding: 0 10px;
	position: relative;
	text-align: center;
	z-index: 0;
}
.price-opttable .ribbon::before,
.price-opttable .ribbon::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 0; height: 0; top: 0;
	z-index: 1;
}
.price-opttable .ribbon::before {
	border-width: 10px 0px 10px 5px;
  border-color: transparent transparent transparent #f4f4f4;
  border-style: solid;
	left: 0;
}
.price-opttable .ribbon::after {
	border-width: 10px 5px 10px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
	right: 0;
}
@media screen and (max-width: 767px) {
	.price-opttable { display: block; }
	.price-opttable tr { 
		display:-webkit-box; display:-ms-flexbox; display:flex;
		-ms-flex-wrap: wrap; flex-wrap: wrap;
	}
	.price-opttable .detail { width: 100%; }
	.price-opttable .detail .fz-p16 { font-size: 1.3rem; }
	.price-opttable .detail .fz-p14 { font-size: 1.1rem; }
	.price-opttable .figure { padding-top: 0; padding-left: 0; width: 100px; }
	.price-opttable .price { 
		padding-top: 0;
		display:-webkit-box; display:-ms-flexbox; display:flex;
		-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	}
}
@media screen and (min-width: 768px) {
	.price-lead .col30 { width: 30%; }
	.price-arrangebox { padding: 3rem; }
}
@media screen and (min-width: 1024px) {
	.price-opttable .detail { width: calc(87% - 189px); }
	.price-opttable .figure { width: 189px; }
	.price-opttable .price { width: 13%; }
}

/* fullorder */
.fc-type2 { color: #f99e00; }
.fullorder-typettl {
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	line-height: 4;
	text-align: center;
	width: 4em;
}
.fullorder-typettl.type1 { background-color: #3cb4c8; }
.fullorder-typettl.type2 { background-color: #f99e00; }
.fullorder-copy .inside {
	display: inline-block;
	padding: 0 7.5%;
	position: relative;
	z-index: 0;
}
.fullorder-copy .inside::before,
.fullorder-copy .inside::after {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	width: 0;
	height: 102%;
	border-left: #3cb4c8 3px solid;
}
.fullorder-copy .inside::before {
	transform: rotate(-20deg);
	left: 3.5%;
}
.fullorder-copy .inside::after {
	transform: rotate(20deg);
	right: 3.5%;
}
.fullorder-copy .marker {
	background: linear-gradient(rgba(255, 255, 255, 0) 50%, #ffed77 50%);
}
.fullorder-type .fullorder-typettl {
	position: relative;
	z-index: 1;
}
.fullorder-type .contents-img {
	margin-top: -2rem;
}
.fullorder-service {
	display:-webkit-box; display:-ms-flexbox; display:flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.fullorder-service .fullorder-typettl {
	display: block;
	margin-right: 1rem;
	width: 56px;
}
.fullorder-service .ttl {
	display: block;
	width: calc(100% - 66px);
}
.fullorder-comparison-table {
	white-space: nowrap;
}
.fullorder-comparison-table tbody th,
.fullorder-comparison-table tbody td {
	border: #ddd 1px solid;
	padding: 1.2em 1.3rem;
	text-align: center;
}
.fullorder-comparison-table .sp { display: none; }
.fullorder-comparison-table .service {
	border-radius: 20px 20px 0 0;
	width: 27%;
	min-width: 200px;
	text-align: center;
	vertical-align: top;
	padding: 3.5rem 0 2rem;
}
.fullorder-comparison-table .service.store { background-color: #cff2f8; }
.fullorder-comparison-table .service.logoichi { background-color: #fff5a6; }
.fullorder-comparison-table .service.logoplus { background-color: #c9e4f6; }
.fullorder-comparison-table .service .logo {
	height: 2.8rem;
	margin-bottom: 1rem;
}
.fullorder-comparison-table .service .logo picture { width: 100%; height: 100%; }
.fullorder-comparison-table .service .logo img { height: 100%; width: auto; }
.fullorder-comparison-table .ttl {
	background-color: #f4f4f4;
}
.fullorder-comparison-table .btn {
	display:-webkit-box; display:-ms-flexbox; display:flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	padding-top: 0; padding-bottom: 0; height: 46px;
}
@media screen and (max-width: 767px) {
	.fullorder-comparison-table { overflow: auto; }
	.fullorder-comparison-table::-webkit-scrollbar { height: 5px; }
	.fullorder-comparison-table::-webkit-scrollbar-track { background: #ddd; }
	.fullorder-comparison-table::-webkit-scrollbar-thumb { background: #555; }
	.fullorder-comparison-table table {
		width: auto;
		margin-left: 1px;
		margin-right: 1px;
	}
	.fullorder-comparison-table .sp { 
		display: table-row;
	}
	.fullorder-comparison-table .sp .ttl {
		padding-top: 0.8em; padding-bottom: 0.8em;
	}
	.fullorder-comparison-table .sp .inside {
		position: sticky; position: -webkit-sticky;
		left: 1.3rem;
		width: calc(92vw - 2.6rem);
		height: 100%;
	}
	.fullorder-comparison-table .blank,
	.fullorder-comparison-table th.ttl[scope="row"]{ display: none; }
}
@media screen and (min-width: 768px) {
	.fullorder-lead { text-align: center; }
	.fullorder-copy .inside { padding: 0 5%; }
	.fullorder-service .fullorder-typettl { width: 64px; }
	.fullorder-service .ttl { width: calc(100% - 74px); }
	.fullorder-comparison-table .btn { max-width: 200px; margin: auto; }
}

.sns .sns-h {
  margin-bottom: .4em;
  color: #666;
  font-size: 93%;
  font-weight: bold;
}
.sns ul {
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.sns li {
  float: left;
  width: 25%;
  text-align: center;
  font-size: 11px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-position: 50% 50%;
}
.sns .mail-btn {
  background-image: url(../img/common/i-mail.webp);
  background-size: auto 10px;
}
.sns .fb-btn {
  background-image: url(../img/common/i-fb.webp);
  background-size: auto 16px;
}
.sns .tw-btn {
  background-image: url(../img/common/i-tw.webp);
  background-size: auto 12px;
}
.sns .hb-btn {
  background-image: url(../img/common/i-hb.webp);
  background-size: auto 12px;
}
.no-webp .sns .mail-btn {background-image: url(../img/common/i-mail.png);}
.no-webp .sns .fb-btn {background-image: url(../img/common/i-fb.png);}
.no-webp .sns .tw-btn {background-image: url(../img/common/i-tw.png);}
.no-webp .sns .hb-btn {background-image: url(../img/common/i-hb.png);}
.sns li a {
  display: block;
  padding: 1em 0;
  color: #999;
  text-decoration: none;
}

.detail-designer {
  display: flex;
  flex-direction: row-reverse;
}
.detail-designer .thumb {
  margin-left: 40px;
  width: 200px;
}
.detail-designer .thumb img {
  border: 1px solid #ccc;
}
.detail-designer .excerpt {
  flex: 1;
}
.detail-designer .excerpt .name {
  margin-bottom: 20px;
  font-size: 2.2rem;
  line-height: 1;
  border-left: 6px solid #3cb4c8;
  padding-left: .5em;
}
.detail-designer .more .btn {
  padding: 4px 8px;
}

.detail-designer.hide {
  flex-direction: column;
}
.detail-designer.hide .thumb {
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
}
.detail-designer.hide .excerpt .name {
  text-align: center;
}
.detail-designer.hide .more {
  text-align: center;
}

.easy-flow {
  display: flex;
  flex-wrap: wrap;
}
.easy-flow li {
  position: relative;
  counter-increment: number;
  width: 22%;
  z-index: 0;
}
.easy-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-15px - 6%);
  margin-top: -40px;
  display: block;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px 0 20px 15px;
  border-color: transparent transparent transparent #3cb4c8;
}
.easy-flow li:not(:last-child) {
  margin-right: 4%;
}
.easy-flow .ttl {
  margin-bottom: 8px;
  text-align: center;
  font-size: 1.5rem;
}
.easy-flow .heading {
  margin-bottom: 8px;
}
.easy-flow .capture {
  position: relative;
} 
.easy-flow .capture::before {
  position: absolute;
  top: -.9em;
  left: 0;
  content: counter(number);
  color: #d8f0f4;
  font-size: 6.4rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  z-index: -1;
}
.easy-flow .capture .flow-credit {
  position: absolute;
  padding: 5px;
  top: 8px;
  right: 8px;
  width: 60%;
  border: 1px solid #ddd;
  background-color: #fff;
}
.easy-flow .capture .flow-credit img {
  vertical-align: middle;
}
.easy-flow .desc {
  line-height: 1.6;
  font-size: 1.2rem;
}
.easy-flow .relation a {
  text-decoration: underline;
}
.second-item {
  border: 1px solid #ddd;
}

.designer-box:not(:last-child) {
  padding-bottom: 60px;
  margin-bottom: 60px;
  border-bottom: 1px solid #ddd;
}
.designer-box .detail-designer {
  margin-bottom: 24px;
}
.make-item .ttl {
  margin-bottom: 16px;
  font-size: 1.6rem;
}
.make-item .links {
  display: flex;
  justify-content: flex-end;
  font-size: 1.4rem;
}
.make-item .links li:not(:last-child) {
  margin-right: 16px;
}
.make-item .links a {
  padding: 6px 10px;
}
.designer-single .profile {
  padding-bottom: 30px;
}
.designer-single .profile .name {
  margin-bottom: 20px;
  font-size: 2.2rem;
  line-height: 1;
  border-left: 6px solid #3cb4c8;
  padding-left: .5em;
}
.designer-single .profile .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}
.designer-single .profile .thumb {
  margin-right: 40px;
  width: 400px;
}
.designer-single .profile .info {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}
.designer-single .profile .info dl {
  width: 48%;
}
.designer-single .profile .info dl:not(:nth-child(2n)) {
  margin-right: 4%;
}

.designer-single .profile .info dt {
  padding: 8px 10px;
  font-weight: bold;
  background-color: #f5f5f5;
}
.designer-single .profile .info dd {
  padding: 8px 10px 16px;
}
.designer-single .profile .message {
  margin-bottom: 24px;
}
.designer-single .profile .message .ttl {
  font-size: 1.6rem;
}

.error-block {
  margin-top: 1rem;
  background: #fff4f7;
  border: 1px solid #e4597a;
  padding: 8px;
  text-align: left;
  color: #e4597a;
  font-weight: bold;
}

@media screen and (max-width: 850px) {

.easy-flow { flex-direction: column;}

.easy-flow li {
  display: flex;
  width: 100%;
  align-items: center;
}
.easy-flow li:not(:last-child) {
  margin-right: 0;
  margin-bottom: 60px;
}
.easy-flow li .heading {
  margin-right: 20px;
  width: 200px;
}
.easy-flow li .desc { flex: 1;}
.easy-flow .ttl { font-size: 1.4rem;}

.easy-flow li:not(:last-child)::after {
  top: auto;
  bottom: -35px;
  right: auto;
  left: 50%;
  margin-top: 0;
  margin-left: -20px;
  border-width: 15px 20px 0 20px;
  border-color: #3cb4c8 transparent transparent transparent;
}

}

@media screen and (max-width: 768px) {

.make-item .links {
  flex-direction: column;
  justify-content: space-between;
}
.make-item .links li {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
}
.make-item .links li:not(:last-child) {
  margin-right: 0;
  margin-bottom: 16px;
}
.make-item .links li a {
  display: block;
  padding: 12px 20px;
}
.detail-designer .excerpt .name { font-size: 1.6rem;}
.make-item .ttl { font-size: 1.4rem;}

.designer-single .profile .name {
  margin-bottom: 16px;
  font-size: 1.8rem;
  text-align: center;
}
.designer-single .profile .head { flex-direction: column;}

.designer-single .profile .thumb {
  width: 200px;
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto;
}
.designer-single .profile .info {
  font-size: 1.2rem;
}

}

@media screen and (max-width: 414px) {

.easy-flow li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.easy-flow li .heading {
  margin-right: 0;
  margin-bottom: 16px;
  width: 240px;
}
.detail-designer { flex-direction: column;}

.detail-designer .thumb {
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
}
.detail-designer .excerpt .name { text-align: center;}
.detail-designer .more { text-align: center;}
}

/* クーポンコード入力欄 */
.cfm-coupon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cfm-coupon-row .coupon-input {
  flex: 1;
  min-width: 200px;
}