@charset "UTF-8";

.addableResult td { position:relative; }
.addableResult td > strong { display:inline-block; width:30px; height:30px; border-radius:100%; margin-right:5px; background-color:transparent; position:absolute; left:10px; top:50%; transform:translateY(-50%); }

.btn_removeItem {
  color: #FFF;
  text-decoration: none;
  display: inline-flex;
  padding: 7px 7px;
  border: 1px solid #AAA;
  background: #999;
  border-radius: 7px;
  font-size: 0.875rem;
  line-height: 1;
}

@media screen and (max-width:640px) {
  .addableResult td > strong { width:10px; border-radius:5px; }
}

#finish{ text-align:center; padding: 40px 0; }
#finish h2{ font-size:20px; }

.disabled{ filter: alpha(opacity=50); -moz-opacity:0.50; opacity:0.50; }
.good{ background: #FEE !important; }
.bad{ background: #EEF !important; }

input[type="text"],input[type="tel"],select{
-webkit-appearance: none;
border-radius: 4px;
border: 1px solid #DDD;
padding: 0.5em;
}

select {
  /* styling */
  background-color: white;
  border: thin solid #DDD;
  border-radius: 4px;
  display: inline-block;
  font: inherit;
  line-height: 1.2em;
  padding: 0 3em 0 0.5em;
height:2em;

  /* reset */

  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand { display:none; }

select.classic {
  background-image:
    linear-gradient(45deg, transparent 50%, #808080 50%),
    linear-gradient(135deg, #808080 50%, transparent 50%),
    linear-gradient(to right, #F5F5F5, #EEE);
  background-position:
    calc(100% - 17px) calc(1em - 2px),
    calc(100% - 12px) calc(1em - 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2em 2em;
  background-repeat: no-repeat;
}

select.classic:focus {
  background-image:
    linear-gradient(45deg, white 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, white 50%),
    linear-gradient(to right, gray, gray);
  background-position:
    calc(100% - 12px) calc(1em - 2px),
    calc(100% - 17px) calc(1em - 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2em 2em;
  background-repeat: no-repeat;
  border-color: grey;
  outline: 0;
}

#model01,#model02{
	display: none;
}

label img,
label input[type="radio"],
label input[type="checkbox"] { cursor:pointer; }

input[type="text"] { padding-left:5px; padding-right:5px; }
input[type="number"] { padding-left:5px; }

input[type="text"][readonly]{
    color:#000;
    cursor:not-allowed; /* 禁止カーソル */
text-align:right;
border:0;
padding:0;
}

/* Content */

.content{
	max-width: 980px;
	margin: 40px auto;
}

.lead{
text-align:center;
font-size:16px;
margin: 0 0 40px;
line-height:1.75;
}

/* Section */

section{
border: 1px solid #DDD;
padding: 0 0 20px;
margin: 0 0 20px;
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: flex-start;
align-items: center;
}

section h2{ width:100%; padding:15px; margin: 0 0 20px; background:#F5F5F5; }
section h2 input{ margin-right: 10px; }
section div h3, section div input,section div select{ margin-left: 20px; }
section .color,section .size,section .volume{ width:calc((100% - 40px) / 3); border-left: 1px solid #DDD; }
section .color{ border: 0; }
section .color input[type="text"][readonly]{ color:#000; text-align:center; width:200px; padding:8px;  background:#F7F7F7; }
section .color a{ display:inline-block; color:#000; background:#FFF; padding:0 20px; font-size:14px; border: 1px solid #000; text-decoration:none; line-height:32px; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; }
section .volume input{ width:80px; text-align:right; }
section .volume span{ display:inline-block; font-size:12px; color:#666; margin-left:10px; }
section > p{
width:100%;
text-align:right;
margin: -80px 0 20px;
padding: 15px;
}
.add_btn{ width: 320px; margin: 0 auto; }
.add_btn a{ display: block; background: #FFF; color: #333; border: 1px solid #333; padding: 10px 0; text-align: center; font-size: 16px; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; text-decoration: none; max-width: }



.section p{
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}

.section p span{
display:block;
font-size:12px;
color:#666;
text-indent:-1em;
padding-left:1em;
}

#add_btn{ text-align:center; }
#add_btn a{ display:inline-block; color:#000; background:#FFF; padding:0 20px; font-size:16px; border: 1px solid #000; text-decoration:none; line-height:40px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

/* Headline */

h2{
font-size: 20px;
font-weight: bold;
color: #04593A;
margin-bottom: 30px;
}

h2 span{
display: inline-block;
background: #04593A;
color: #FFF;
width:32px;
height:32px;
line-height:32px;
text-align:center;
border-radius:50%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
margin-right:10px;
}

h3{
font-size: 18px;
font-weight: bold;
color: #000;
margin-bottom: 20px;
}

/* Lead */

#lead{ display:block; margin-bottom:40px; }

#lead h3{ margin: 0 20px 20px; }

#lead ul{
list-style: disc;
padding-bottom:20px;
padding-left: 25px;
margin: 0 20px;
}

#lead ul li{
list-style: disc;
margin-bottom:10px;
}

#lead dl{
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: flex-start;
border-bottom: 1px solid #DDD;
margin: 0 20px 10px;
}

#lead dt{
width:20%;
padding: 10px 0;
border-top: 1px solid #DDD;
color:#666;
}

#lead dd{
width:30%;
padding: 10px 0;
border-top: 1px solid #DDD;
}

/* Finish */

.section#finish{
text-align:left;
}

.section#finish > p{
font-size:14px;
margin: 0 0 20px 42px;
}

.section#finish ul{
display:flex;
flex-direction: row;
flex-wrap:wrap;
margin: 0 0 0 42px;
}

.section#finish ul li{
width:calc((100% - 60px) / 3);
margin: 0 30px 20px 0;
}

.section#finish ul li:nth-child(3n){
margin: 0;
}

.section#finish ul li label{ display:block; font-size:14px; font-weight:bold; }
.section#finish ul li img{ width:100%; border:1px solid #DDD; margin: 0 0 10px; }
.section#finish ul li input{ margin-right:5px; }
.section#finish ul li label p{ font-size:12px; font-weight:normal; color:#444; }
.section#finish ul li label p sup{ color:#900; }
.section#finish > div > p{ text-indent: -1em; padding-left:1em; font-size:14px; color:#900; margin:0 0 15px; }
.section#finish > div dl{
display:flex;
flex-direction: row;
flex-wrap:wrap;
border: 2px solid #DDD;
padding:15px;
}

.section#finish > div dl dt{
width:80%;
font-size:14px;
color:#444;
}

.section#finish > div dl dd{
width:20%;
text-align:right;
font-size:14px;
font-weight:bold;
}
.section#finish > div dl dt:after{
content: " …";
}

.section#finish > div{
margin: 0 0 0 42px;
}

/* Result */

#result{
padding: 40px 0;
	border-top: 1px solid #DDD;
	background: #F7F7F7;
}

#result .lead{
text-align:left;
}

#result .lead h3{
font-weight:bold;
}

#result > div{
	width:980px;
	margin: 0 auto;
}

#result table{
	border-top: 2px solid #DDD;
	border-left: 2px solid #DDD;
	margin-bottom: 20px;
	width: 100%;
}

#result table th,
#result table td{
 width:20%;
	padding: 10px;
	border-bottom: 2px solid #DDD;
	border-right: 2px solid #DDD;
	text-align: center;
	font-size: 16px;
	vertical-align: middle;
}

#result table th{
	background: #EEE;
	vertical-align: middle;
	white-space:nowrap;
	text-align:right;
}

#result table td{
	background: #FFF;
	vertical-align: middle;
	text-align:right;
}

#result table td span{
}

#result table label input{ margin-right: 10px; }

#result table td input{
color:#000;
border:0;
background:#FFF;
font-weight:bold;
text-align:right;
font-size:24px;
}

#result table td dl dt{
display:inline-block;
}

#result table td dl dd{
display:inline-block;
width:10em;
}

#result > div > dl{
	text-align: right;
	border-bottom: 2px solid #DDD;
	padding-bottom: 10px;
}

#result > div > dl dt{
	font-weight: bold;
	margin-bottom: 10px;
	display: inline;
	padding-right: 20px;
	color: #666;
}

#result > div > dl dd{
	display: inline;
}

#result > div > dl dd strong{
	font-size: 24px;
}
#result > div > dl dd strong input{
	font-size:28px;
	background:none;
	border:0;
	text-align:right;
	color:#000;
	font-weight:bold;
}


/* Order */

#order > dl{
	display: table;
	width: 100%;
	padding-bottom: 40px;
}

#order > dl > dt,
#order > dl > dd{
	display: table-cell;
	vetical-align: middle;
	font-size: 18px;
}

#order > dl > dt{ width: 20%; }
#order > dl > dd{ width: 30%; }

#order > dl > dt{ font-size: 18px; text-align: center; }
#order > dl > dd input{ width: 100%; }

#order dd p.error1,
#order dd p.error2 { display:none; color:#F30; text-align:left; }
#order dd.error1 p.error1,
#order dd.error2 p.error2 { display:block; }
#order dd.error1 p.error1 input[type="text"],
#order dd.error2 p.error2 input[type="text"] { background:#FCC; }

p.error3 { display:none; color:#F30; text-align:center; }
#order.error3 p.error3 { display:block; }


/* Modal */

.modal_color{
position: fixed;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
top:0;
left:0;
}

.modal_color > div{
position: absolute;
width:800px;
height:600px;
top:50%;
left:50%;
margin: -300px 0 0 -400px;
background: #FFF;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

.modal_color p{
height:50px;
line-height:50px;
text-align:center;
}

.modal_color ul{
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: center;
align-items: center;
height:550px;
padding: 0 5px 5px 0;
overflow-y: scroll;
}
.modal_color ul li{ margin:5px 0 0 5px; }
.modal_color ul li a{ display:block; width:48px; height:48px; line-height:48px; text-align:center; border-radius:24px; font-size:12px; text-decoration:none; cursor:pointer;border:1px solid #FFF; }


.modal_color > div .close_btn {
position:absolute;
top:-10px;
right:-10px;
}

.close_btn {
  display: block;
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #333;
  border: 1px solid #FFF;
}

.close_btn span{ display: none; }
 
.close_btn::before, .close_btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 21px;
  background: #fff;
}
 
.close_btn::before { transform: translate(-50%,-50%) rotate(45deg); }
.close_btn::after { transform: translate(-50%,-50%) rotate(-45deg); }


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

}

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

}

@media screen and (max-width:640px) {
.content{ margin: 20px 15px; }
.lead{ margin-bottom: 20px; font-size:14px; }
h2{ font-size:16px; margin-bottom: 20px; }
h3{ font-size:16px; margin-bottom: 10px; }
#result h2{ font-size:18px; }

#lead{ margin-bottom:20px; }
#lead ul li{ font-size:14px; }
#lead dt{ width:40%; font-size:14px; }
#lead dd{ width:60%; font-size:14px; }

section .color,section .size,section .volume{
width:100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}

section .color h3,section .size h3,section .volume h3{
width:20%;
margin-bottom: 10px;
}

section .color input[type="text"][readonly] { width: 40%; margin: 0 10px 10px 0; }
section .color a{ margin-bottom: 10px; }
section .size select{ margin-bottom: 10px; }

.add_btn{ width: 100%; }

#result{
	border-top: 1px solid #DDD;
	background: #F7F7F7;
padding: 20px 15px;
}

#result > div{
	width: auto;
}

.colbox > div.lead{
font-size:14px;
margin-bottom: 15px;
}

.colbox > div.lead p{
font-size:14px;
}

#result table{
	border-top: 2px solid #DDD;
	border-left: 2px solid #DDD;
	margin-bottom: 20px;
	width: 100%;
}

#result table th{ font-size:14px; }
#result table td{ font-size:14px; }

#result table td span{
}

#result table label input{ margin-right: 10px; }

#result table td input{
color:#000;
border:0;
background:#FFF;
font-weight:bold;
text-align:right;
font-size:18px;
width:50%;
}

#result table td dl dt{
display:inline-block;
}

#result table td dl dd{
display:inline-block;
width:50%;
}

#result > div > dl{
	width: 100%;
	text-align: right;
	border-bottom: 2px solid #DDD;
	padding-bottom: 10px;
}

#result > div > dl dt{
display:inline-block;
	font-weight: bold;
	margin-bottom: 10px;
	padding-right: 0;
	font-size:14px;
	color: #666;
	display:block;
	text-align:left;
}

#result > div > dl dd{
display:inline-block;
}

#result > div > dl dd strong input{
	font-size:22px;
	display:inline-block;
	width: 70%;
}

#order > dl{
	display: block;
	width: 100%;
	padding-bottom: 40px;
}

#order > dl > dt,
#order > dl > dd{
	display: block;
	width: 100%; 
}

#order > dl > dt{ font-size: 14px; text-align: left; margin-bottom:5px; }
#order > dl > dd{ margin-bottom: 20px; }
#order > dl > dd input{ width: 100%; }

/* Modal */

.modal_color > div {
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100vh - 30px);
    top: 15px;
    left: 15px;
    margin: 0;
    background: #FFF;
    box-shadow: 10px 10px 10px rgb(0 0 0 / 40%);
}

.modal_color p{ font-size:14px; }

.modal_color ul{
height: calc(100vh - 80px);
}

}