@charset "UTF-8";
/* CSS Document */
.ttl h4 {
	    text-align: center;
    font-weight: bold;
    font-size: 26px;
    margin: 0 auto 40px;
}

.goods-text {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.goods-text img {
  width: 100%;
  max-width: 290px;
  margin: 0 0 20px 0;
}
.goods-img {
  width: 100%;
  display: inline-block;
}
.goods-img img {
  width: 100%;
}
.process {
  padding: 0 30px;
  margin: 0 0 100px 0px;
}
.process h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}
.youtube {
  position: relative;
  width: 100%;
  padding-top: 56%;
  margin: 0 0 40px 0;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.flow-content {
  margin: 60px 0 0 0;
}
.step {
  margin-bottom: 80px;
}
.step-img img {
  max-width: 200px;
  width: 100%;
  display: block;
  margin: 0 auto 20px;
}
.order {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}
.flow-content p {
  text-align: center;
}
.arrow {
  position: relative;
  margin: 25px 0 0;
}
.arrow::before {
  content: '';
  width: 16px;
  height: 16px;
  border: 0px;
  border-top: solid 4px #727171;
  border-right: solid 4px #727171;
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.settle {
  padding: 0 30px;
  margin: 0 0 100px;
}

.settle h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

.settle-content {
  text-align: center;
}
.settle-point {
  margin: 0 0 40px;
}
.settle-point p {
  text-align: left;
  display: inline-block;
}
.settle-text span {
  font-weight: bold;
  font-size: 20px;
  color: #e4007f;
  margin: 0 1%;
}
.w-settle-point p {
  text-align: left;
  display: inline-block;
}
.u-cont {
  margin: 0 0 20px;
}
.settle-img img {
  max-height: 130px;
  width: auto;
  display: block;
  margin: 0 auto 20px;
}

.ttl h4 {
	    text-align: center;
    font-weight: bold;
    font-size: 26px;
    margin: 0 auto 40px;
}

.summary {
  padding: 0 30px;
  margin: 0 0 60px 0px;
}
.summary h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

.summary-cont {
	text-align: center;
}

.summury-detail {
	margin: 0 0 60px;
}

.summury-detail .item-img img {
    width: 100%;
    display: block;
    margin: 0 auto 30px;
    max-width: 220px;
}

.size {
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 10px;
}


.summury-text {
	text-align: left;
	display: inline-block;
}

.color {
  padding: 0 30px;
  margin: 0 0 60px 0px;
}
.color h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

.color-cont {
	text-align: center;
}

.color-detail {
	margin: 0 0 60px;
}

.color-detail .item-img img {
    width: 100%;
    display: block;
    margin: 0 auto 30px;
    max-width: 220px;
}

.opt-container {
  padding: 0 30px;
  margin: 0 0 60px;
}

.opt-container h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

.opt-detail {
	margin: 0 0 60px;
}

.opt-detail .item-img img {
    width: 100%;
    display: block;
    margin: 0 auto 30px;
    max-width: 220px;
}

.opt-text {
	text-align: left;
	display: inline-block;
}

	
	.opt-detail h4 {
		font-weight: bold;
		font-size: 20px;
		text-align: center;
    margin: 0 auto 10px;
	}

.lower-dtl {
	width: 100%;
    display: block;
}

.up-dtl{
	margin: 0 auto 20px;
}

.up-dtl p{
	margin: 0 auto 20px;
}

.up-dtl p:last-child{
	margin: 0;
}

.f-w-b {
	font-weight: bold;
}

.lower-dtl p {
	margin: 0 0 20px;
}

.lower-dtl p:last-child {
	margin: 0;
}

	.mark {
		vertical-align: -2px;
    width: 15px;
    margin: 0 2px;
	}

hr {
	width: 20%;
	margin: 0 auto 60px;
}

.info-container {
    padding: 0 30px;
    margin: 0 0 60px 0px;
}

.info-container h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

	.info-cont ul li {
		margin: 0 auto 20px;    
		padding-left: 1em;
    text-indent: -1em;
	}

	.info-cont ul li:last-child {
		margin: 0;
	}

.info-cont ul {
    list-style:  none;      /* デフォルトのアイコンを消す */
   margin: 0 auto 20px;           /* デフォルト指定上書き */
    padding: 0;             /* デフォルト指定上書き */
}
 
.info-cont ul li:before {
    content:  "";     /* 空の要素作成 */
    width:  12px;               /* 幅指定 */
    height:  12px;              /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #505050;  /* 背景色指定 */
    border-radius:  50%;       /* 要素を丸くする */
	margin: 0 0.25rem 0 0;
}

.info-container img {
	width: 100%;
	display: block;
}

.price-container {
    padding: 0 30px;
    margin: 0 0 60px 0px;
}

.price-container h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
	margin: 0;
}


.price-container th span {
	font-weight: bold;
	font-size: 18px;
}

.price-container th,td {
  padding: 10px;
	border-right: solid 1px #505050;
}

.price-container td:last-child {
	border-right: none;
}

.price-container th:last-child {
	border-right: none;
}

.price-container td:nth-child(2n+1){
	background-color: #e1e1e1;
}

.price-container th:nth-child(2n+1){
	background-color: #e1e1e1;
}

.price-container table {
    border-collapse:  collapse; 
	text-align: center;
    width: 100%;
}

.price-container tr {
	border-bottom: solid 1px #505050;
}


.price-container .place th {
	background-color: #fff;
	padding: 40px 0 10px;
}

.itm-info-container {
    padding: 0 30px;
    margin: 0 0 60px 0px;
}

.itm-info-container h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}


.itm-info-txt {
	    display: inline-block;
    text-align: left;
	margin: 0 auto 20px;
}

.itm-info-cont h4{
	text-align: center;
	font-weight: bold;
	font-size: 18px;
}
.ban h4:before {
	content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 12px 10px 16px 0px;
    background: url("../../img/common/decoration/ban.png") no-repeat;
    background-size: contain;
    vertical-align: middle;
}

.app h4:before {
	content: "";
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 12px 10px 16px 0px;
    background: url("../../img/common/decoration/app.png") no-repeat;
    background-size: contain;
    vertical-align: middle;
}

	.itm-info-cont div {
		margin: 0 auto 40px;
	}

.cardboard-container {
    padding: 0 30px;
    margin: 0 0 60px 0px;
}

.cardboard-container h3 {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  letter-spacing: 0.3rem;
}

.cardboard-txt {
	    display: inline-block;
    text-align: left;
	margin: 0 auto 20px;
}

.cardboard-detail {
	margin: 0 0 60px;
}

.cardboard-detail .item-img img {
    width: 100%;
    display: block;
    margin: 0 auto 30px;
    max-width: 220px;
}

.cardboard-detail p {
	text-align: center;
}
@media screen and (min-width:760px) {
  /*　画面サイズが760pxからはここを読み込む　ipad表示*/
  .goods-text {
    width: 41%;
    margin: 0 4% 0px 0;
    vertical-align: middle;
  }
  .goods-img {
    width: 54%;
    vertical-align: middle;
  }
  .goods-img p {
    text-align: left;
  }
  .process {
    width: 85%;
    margin: 0 auto 120px;
    padding: 0;
    text-align: center;
    max-width: 920px;
  }
  .youtube {
    width: 55%;
    padding-top: 30%;
    margin: 0 auto 60px;
  }
  .step {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
	
	.step-img {
		height: 100px;
		position: relative;
    margin: 0 0 10px;
	}
  .step-img img {
    max-width: none;
	  max-height: 100px;
	  position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
  }
	.order {
		margin-bottom: 10px;
	}
	
  .flow-content {
    width: 20%;
    margin: 0;
  }
  .arrow {
    position: relative;
    margin: 0 3.5%;
    padding: 14px;
  }
  .arrow::before {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .step .upper {
    display: inline-flex;
    margin: 0 0 20px 0;
    justify-content: center;
    width: 100%;
  }
  .lower {
    display: inline-flex;
    margin: 20px 0 0 0;
    justify-content: center;
    width: 100%;
  }
  .settle {
    width: 85%;
    margin: 0 auto 120px;
    padding: 0;
    text-align: center;
    max-width: 920px;
  }
  .settle-point {
    margin: 0 2%
  }
  .w-settle-point {
    width: 100%;
    margin: 0;
  }
  .settle-content .upper {
    display: inline-flex;
    margin: 0 0 20px 0;
  }
  .u-cont {
    margin: 0;
  }
  .l-cont {
    margin: 0 20px 0 0;
  }
  .r-cont {
    margin: 0 0 0 20px;
  }
  .settle-content .lower-content {
    display: inline-flex;
  }
  .summary {
    width: 85%;
    margin: 0 auto 120px;
    padding: 0;
    text-align: center;
    max-width: 920px;
  }
	
	.summary-cont {
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
	}
	
	.summury-detail {
		width: 33%;
}
	
	.summury-detail .item-img {
		position: relative;
	  height: 150px;
		margin: 0 0 20px;
	}
	
		.summury-detail .item-img img{
    max-width: none;
    max-height: 150px;
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
	}
	
	  .color {
    width: 85%;
    margin: 0 auto 120px;
    padding: 0;
    text-align: center;
    max-width: 920px;
  }
	
	.color-cont {
		display: flex;
    flex-wrap: wrap;
    justify-content: center;
	}
	
	.color-detail {
		width: 33%;
}

	.opt-container {
    width: 85%;
    margin:0px auto 60px;
    padding: 0;
    text-align: center;
    max-width: 920px;
  }
	
		.opt-detail h4 {
		text-align: left;
	}
	
	.opt-text {
		display: block;
}
	
	.opt-detail {
		display: flex;
    align-items: end;
    justify-content: center;
	}
	
.up-dtl {
    margin: 0;
}
	
		.opt-detail .item-img {
		position: relative;
	  height: 150px;
		margin: 0 0 20px;
	}
	
		.opt-detail .item-img img{
    max-width: none;
    max-height: 150px;
    width: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
	}
	
	.lower-dtl {
    width: 50%;
    display: block;
}
	
	.left-dtl {
		width: 50%;
	}
	
	.contact-btn {
		margin: 0;
}

	.info-container {
    width: 85%;
    margin: 0px auto 120px;
    padding: 0;
    max-width: 920px;
}
	
	.info-cont {
		display: flex;
    justify-content: space-around;
    align-items: center;
	}
	
		.info-cont ul{
			width: 50%;
			padding: 0;
			margin: 0;
	}

	.info-img {
		width: 40%;
	}
	
		.price-container {
    width: 85%;
    margin: 0px auto 120px;
    padding: 0;
    max-width: 920px;
}	
	
	.price-container h3 {
		margin: 0 auto 40px;
}
	.price-container .sp_none{
		display: inline-table !important;
}

	.price-container tr:last-child {
	border-bottom: none;
}
	
	.price-container td:nth-child(2n+1){
	background-color: #fff;
}

.price-container th:nth-child(2n+1){
	background-color: #fff;
}
	
		.price-container td:nth-child(2n){
	background-color: #e1e1e1;
}

.price-container th:nth-child(2n){
	background-color: #e1e1e1;
}
	
	.price-container th:first-child{
		width: 44%;
}
	
	.itm-info-container {
    width: 85%;
    margin: 0px auto 120px;
    padding: 0;
    max-width: 920px;
		text-align: center;
}
	
	.itm-info-cont {
display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	}
	
	.itm-info-cont div {
		width: 45%;
		margin: 0 auto 60px;
	}
	
	.itm-info-cont p {
		text-align: left;
	}
	
	.itm-info-txt {
	margin: 0px auto 30px;
}
	
	.cardboard-container {
    width: 85%;
    margin: 0px auto 60px;
    padding: 0;
    max-width: 920px;
		text-align: center;
}
	
	.cardboard-cont {
display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	}
	
		.cardboard-txt {
	margin: 0px auto 30px;
}
		.cardboard-detail {
		width: 33%;
}
}
@media screen and (min-width:961px) {
  /*　画面サイズが961pxからはここを読み込む　PC画面表示*/
}
@media screen and (min-width:1400px) {
  /*　画面サイズが1400pxからはここを読み込む　大きいPC画面表示*/
}