/*--------------------------------------------------------------
 element basic
 --------------------------------------------------------------*/
html, body {
	font-size: 14px;
	color: #333333;
}
@media screen and (min-width: 1000px)  {
	html, body {
		font-size: 20px;
	}
}
body {
	padding: 0;
	height: 100%;
}
.wrap-all {
	height: 100%;
}
.wrap-all-inner {
	padding-bottom: 0;
	height: 100%;
}
.container-contents {
	height: 100%;
	padding-bottom: 185px; /*フッター分*/
}

.header {
	position: relative;
	height: auto;
	border-bottom: none;
	text-align: center;
}
.header-inner {

}
.header h1 {
	margin: 0;
	padding: 1rem 0;
}
.header h1 img {
	width: 209px;
}

.content {
	max-width: 1000px;
	min-height: 300px;
	margin: 0 auto;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 40px;
}

.footer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 185px;
	background: #86b9c8;
	color: #FFF;
	padding-top: 1.5rem;
}
.footer-inner {
	max-width: 320px;
	margin: 0 auto;
}
.footer-logo {
	display: inline-block;
	vertical-align: top;
}
.footer-logo img {
	width: 95px;
}
.footer-links {
	display: inline-block;
	margin-left: 1rem;
}
.footer-links a {
	color: #FFF;
	font-size: 0.92rem;
	line-height: 1.8em;
}
.footer-copyright {
	font-size: 0.85rem;
}
@media screen and (min-width: 1000px)  {
	.footer {
		height: 240px;
	}
	.footer-inner {
		max-width: 500px;
	}
	.container-contents {
		padding-bottom: 360px; /*フッター分*/
	}
}


/*--------------------------------------------------------------
 common classes
 --------------------------------------------------------------*/
.text-headline {
	font-weight: bold;
	font-size: 1.28rem;
	padding: 20px 0;
}
.btn {
	font-weight: bold;
}
.btn01 {
	display: block;
	width: 100%;
	background: #db4930;
	border-radius: 4px;
	margin-bottom: 10px;
	font-size: 1.2rem;
}
.btn02 {
	display: block;
	width: 100%;
	background: #FFF;
	border: 1px solid #cccccc;
	color: #333333;
	border-radius: 4px;
	font-size: 1.2rem;
}
.btn02:hover,
.btn02:focus,
.btn02:active {
	color: #333333;
}
@media screen and (min-width: 1000px)  {
	.btn {
		max-width: 340px !important;
		margin-left: auto;
		margin-right: auto;
	}
}
.label-type01 {
	display: inline-block;
	padding: 0.3rem 1.6rem;
	color: #db4930;
	font-size: 0.85rem;
	border: 1px solid #db4930;
	border-radius: 14px;
	margin-top: 0;
}
.label-type02 {
	display: inline-block;
	padding: 0.2rem 1.6rem;
	color: #FFF;
	font-size: 1rem;
	background: #db4930;
	border-radius: 14px;
}
a.link-type01,
a.link-type02 {
	color: #6996bb;
	text-decoration: underline;
}
a.link-type01:hover,
a.link-type02:hover {
	color: #6996bb;
	text-decoration: underline;
}
a.link-type01:after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	background: url(../img/icon-question.png) no-repeat;
	background-size: contain;
	margin-top: -4px;
	margin-left: 4px;
}

.thumb-in-list img {
	max-width: 100px;
	max-height: 60px;
}
.thumb-in-list.small img {
	max-width: 50px;
	max-height: 30px;
}

table.type101 {
	width: 100%;
	font-size: 1rem;
	line-height: 1.6rem;
}
table.type101 tr {
	border: 1px solid #cccccc;
}
table.type101 th {
	font-weight: normal;
	color: #333;
	text-align: left;
	padding: 1rem 1.5rem;
	vertical-align: middle;
}
table.type101 td {
	vertical-align: middle;
	padding: 1rem 1.5rem;
	color: #333;
	text-align: right;
}

table.type102 {
	width: 100%;
	font-size: 1rem;
}
table.type102 tr {
	border: 1px solid #cccccc;
}
table.type102 th {
	font-weight: bold;
	color: #333;
	text-align: left;
	padding: 1rem 1.5rem;
	vertical-align: middle !important;
	line-height: 1.4em !important;
}
table.type102 td {
	vertical-align: middle !important;
	padding: 1rem 1.5rem;
	color: #333;
	text-align: left;
	line-height: 1.4em !important;
}

input[type="text"] {
	margin: 0;
	background-color: #fff;
	outline: 0;
	border-radius: 4px;
	border: 1px solid #cccccc;
	padding: 0.6rem 1rem;
	text-align: left;
	width: 100%;
}
select {
	margin: 0;
	outline: 0;
	border-radius: 4px;
	border: 1px solid #cccccc;
	padding: 0.6rem 0.6rem;
	text-align: left;
	width: 100%;
	background: #FFF url(../img/icon-select-cursor-down.png) no-repeat right 20px center;
	background-size: 11px;
}

/*--------------------------------------------------------------
 着物カスタマイズ画面
 --------------------------------------------------------------*/
.kc-page {
	max-width: 700px;
	margin: 0 auto;
}
.kc-page-title {
	margin-bottom: 2rem;
}
.kc-page-desc {
	font-size: 1.28rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
/* テキスト入力ゾーン */
.kc-page-input {
	text-align: center;
	margin-bottom: 2rem;
	font-size: 1.28rem;
}
.kc-page-input input[type="text"] {
	margin-left: 2rem;
	width: 80px;
	border: 1px solid #db4930;
	text-align: center;
}
/* ヘルプモーダルリンク */
.kc-page-help {
	display: block;
	margin-bottom: 20px;
}
/* 「選択中の色」テキスト */
.kc-page-selected {
	width: 100%;
	padding: 0.5rem 1rem;
	border: 1px solid #999999;
	border-radius: 4px;
	margin-bottom: 20px;
	position: relative;
}
.kc-page-selected-text1 {
	position: absolute;
	left: 1rem;
	top: 0.5rem;
	font-size: 0.85rem;
	color: #999;
}
.kc-page-selected-text2 {
	font-size: 1.28rem;
	vertical-align: middle;
	font-weight: bold;
}
.kc-page-selected-text2 em {
	font-size: 0.85rem;
}
.kc-page-selected-icon {
	position: absolute;
	right: 1rem;
	top: 0.5rem;
}
.kc-page-selected-icon a img {
	width: 1rem;
}
/* 選択肢ゾーン */
.kc-page-selection {
	height: 320px;
	text-align: center;
	margin-bottom: 3rem;
	font-size: 1.28rem;
}
.kc-page-selection-left {
	float: left;
	width: 50%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-right: 5px;
}
.kc-page-selection-right {
	float: right;
	width: 50%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	padding-left: 5px;
}
.kc-page-selection:after {
	content: '';
	display: block;
	clear: both;
}
@media screen and (min-width: 1000px)  {
	.kc-page > * {
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.kc-page-input input[type="text"] {
		width: 120px;
	}
	.split-layout .kc-page-selection {
		max-width: 700px;
		height: 550px;
	}
	.split-layout .preview-image img {
		width: 350px;
		left: 0;
	}
	.split-layout .preview-image-front,
	.split-layout .preview-image-back {
		height: 285px;
	}
	.split-layout .preview-image-front img,
	.split-layout .preview-image-back img {
		margin-left: 0;
	}
}

/* ------------------------------------------
 画像型ラジオボタンリスト
*/
.radio-image-list {
	height: 100%;
	padding-bottom: 40px;
	position: relative;
}
.radio-image-list ul {
	height: 100%;
	overflow: auto;
	margin: 0 auto;
}
.radio-image-list input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	border: none;
	border-radius: 4px;
	margin: 0 auto 10px;
}
.radio-image-list input[type="radio"]:checked:before{
	content:"";
	position: absolute;
	display: inline-block;
	width: 100%;
	height: 100%;
	border: 1px solid #db4930;
	border-radius: 4px;
	background: url(../img/icon-check.png) no-repeat center center;
	background-size: 40px;
}
.radio-image-list input[type="radio"]:focus {
	outline: 0;
}
.radio-image-list:before {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(../img/icon-up.png) no-repeat center center;
	background-size: contain;
	margin-bottom: 10px;
}
.radio-image-list:after {
	content: '';
	display: inline-block;
	width: 13px;
	height: 13px;
	background: url(../img/icon-down.png) no-repeat center center;
	background-size: contain;
	margin-top: 10px;
}
.radio-image-list.hidden-before:before,
.radio-image-list.hidden-after:after {
	background: none;
}
/* type1 = 2列（色選択） */
.radio-image-list.type1 ul {
	max-width: 180px;
}
.radio-image-list.type1 ul li {
	float: left;
	width: 50%;
	height: 40px;
	box-sizing: border-box;
	padding: 3px;
}
.radio-image-list.type1 input[type="radio"]:checked:before{
	background-size: 26px;
}
/* type2 = 1列（柄選択） */
.radio-image-list.type2 ul {
	max-width: 350px;
}
.radio-image-list.type2 ul li {
	width: 100%;
	height: 90px;
	padding: 3px;
}
.radio-image-list.type2 input[type="radio"]:checked:before{
	background-size: 40px;
}

/* ------------------------------------------
 着物プレビュー画像
*/
.preview-image {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}
.preview-image img {
	max-width: none !important;
	max-height: none !important;
	width: 200px;
	height: auto;
	position: absolute;
	left: -50px;
	top: 0;
}
/* type1 1枚バージョン */
.preview-image.type1 {
}
.preview-image.type1 img {
}
/* type2 2枚バージョン */
.preview-image.type2 {
}
.preview-image-front,
.preview-image-back {
	display: block;
	position: relative;
	right: auto;
	top: auto;
	width: 100%;
	height: 148px;
	margin-bottom: 16px;
	overflow: hidden;
	text-align: center;
}
.preview-image-front img,
.preview-image-back img {
	position: absolute;
	left: 50%;
	top: 30px;
	margin-left: -80px;
	width: 160px;
	height: auto;
}
.preview-image-front:before,
.preview-image-back:before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
}
.preview-image-front:before {
	background: url(../img/icon-mae.png) no-repeat;
	background-size: contain;
}
.preview-image-back:before {
	background: url(../img/icon-ushiro.png) no-repeat;
	background-size: contain;
}

/* 完成イメージ */
.kc-page-result > div {
	position: relative;
	width: 100%;
	overflow: hidden;
	text-align: center;
	margin-bottom: 20px;
}
.kc-page-result > div img {
	width: 100%;
	max-width: none;
	max-height: none;
}
.kc-page-result-image1,
.kc-page-result-image2 {
	height: 478px;
}
.kc-page-result-image1 img,
.kc-page-result-image2 img {
	width: 280px !important;
	height: 448px !important;
	position: absolute;
	left: 50%;
	margin-left: -140px;
	top: 30px;
}
.kc-page-result-image1 {
	margin-bottom: 40px !important;
}
.kc-page-result-image2 {
	margin-bottom: 40px !important;
}
.kc-page-result-image1:before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url(../img/icon-mae.png) no-repeat;
	background-size: contain;
}
.kc-page-result-image2:before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 26px;
	background: url(../img/icon-ushiro.png) no-repeat;
	background-size: contain;
}
.kc-page-result-other {

}
.kc-page-result-other-image {
	width: 100%;
	height: 90px;
	overflow: hidden;
	border-radius: 5px;
	margin-top: 10px;
}
.kc-page-result-price {
	border: 1px solid #cccccc;
	padding: 1.2rem 1rem 1rem;
	line-height: 1.4em;
	margin-bottom: 40px !important;
}
.kc-page-result-price-text1 {
	float: left;
	font-weight: bold;
}
.kc-page-result-price-text2 {
	clear: left;
	float: left;
	font-size: 0.85rem;
	color: #db4930;
}
.kc-page-result-price-text3 {
	float: right;
	font-weight: bold;
	font-size: 1.38rem;
	margin-top: 0.6rem;
}


/*--------------------------------------------------------------
 顧客情報入力画面
 --------------------------------------------------------------*/
.input-block {
	margin-bottom: 30px;
}
.input-label {
	text-align: left;
	font-weight: bold;
	margin-bottom: 0.4rem;
}
.input-row {
	margin-bottom: 10px;
}
.input-row:after {
	content: '';
	display: block;
	clear: both;
}
.input-row .input-half {
	display: block;
	float: left;
	width: 50%;
	box-sizing: border-box;
}
.input-row .input-half:first-child {
	padding-right: 4px;
}
.input-row .input-half:last-child {
	padding-left: 4px;
}
.input-buttons {
	padding-top: 10px;
}

/*--------------------------------------------------------------
 注文完了画面
 --------------------------------------------------------------*/
.order-complete{
	text-align: center;
}
.order-complete-headline {
	color: #db4930;
	font-size: 1.28rem;
	font-weight: bold;
	padding: 1.2rem 0 2rem;
}
.order-complete-body {
	margin-bottom: 1.5rem;
}
.order-complete-buttons {
	padding: 1rem 0;
}

/*--------------------------------------------------------------
 bootstrap modal custom
 --------------------------------------------------------------*/
.modal {
	text-align: center;
	padding: 0!important;
}
.modal:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px; /* Adjusts for spacing */
	margin-top: -27px;
}
.modal-dialog {
	display: inline-block;
	text-align: right;
	vertical-align: middle;
	/*margin-top: -27px;*/
}
.modal-dialog .btn-modal-close {
	width: 27px;
	height: 27px;
	background: url(../img/btn-close-modal.png) no-repeat;
	background-size: contain;
}
.modal-content {
	text-align: left;
	border-radius: 6px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.modal-body {
	/*max-height: 400px;*/
	overflow: auto;
}
.modal-body dl {
	width: 100%;
}
.modal-body dl dt {
	float: left;
	clear: left;
	width: 10%;
}
.modal-body dl dd {
	float: left;
	width: 90%;
	margin-bottom: 0.5rem;
}

.modal-color-name {
	font-size: 1.71rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}
.modal-color-name em {
	display: block;
	font-size: 0.85rem;
}
.modal-color-image {
	width: 100%;
	height: 60px;
	margin: 0 auto 20px;
	border-radius: 6px;
	overflow: hidden;
	background: no-repeat;
	background-size: cover;
}
.modal-color-image.image-lg {
	width: 100%;
	min-width: 300px;
	min-height: 200px;
}
.modal-color-desc {
	white-space: pre-line;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}