@charset 'UTF-8';

/*

    Header

*/

/*  content head  */
#c_header {
	padding: 10px 0;
	background-color: #f2f2f2;
	color: #666666;
	text-align: center;
}
@media screen and (min-width: 800px) {
	#c_header {
		margin: -2em 0 2em;
		padding: 30px 0;
	}
}





/*

    Common

*/

/*  heading  */
#c_main h2 {
	margin: 3em 0 1.5em;
	padding-bottom: 0.5em;
	border-bottom: 1px #cccccc solid;
}
#c_main h3 {
	margin: 2em 0 1em;
}

/*  message  */
#c_message {
	margin: 0 0 1em;
	padding: 1em;
	background-color: #f2f2f2;
}
#c_message.failure {
	color: #ff0000;
}

/*  text  */
#c_main .notes {
	color: #666666;
	font-size: smaller;
}
#c_main .em {
	margin: 1em 0;
	padding: 0.5em 1em;
	background-color: #eeeeee;
}

/*  button  */
#c_main a.button {
	display: inline-block;
	padding: 0.25em 0.5em;
	border: 1px #de6a1c solid;
	background-color: #de6a1c;
	color: #ffffff;
	cursor: pointer;
	border-radius: 5px;
}
#c_main a.button.type2 {
	background-color: #333333;
	border-color: #333333;
}
#c_main a.button.type3 {
	background-color: transparent;
	color: #de6a1c;
}
#c_main a.button.small {
	font-size: 1.3rem;
}
#c_main a.button.large {
	font-size: 1.8rem;
}

/*  table  */
#c_main table {
	margin: 1em 0;
}
#c_main table th,
#c_main table td {
	border: none;
	background: none;
	border-bottom: 3px #eeeeee solid;
}

/*  form  */
#c_main form dl dt {
	margin: 0.5em 0;
}
#c_main form dl dt em,
#c_main form dl dt span.label {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.25em 0.5em;
	font-style: normal;
	background-color: #999999;
	color: #ffffff;
	line-height: 1;
	font-size: smaller;
}
#c_main form dl dt em {
	background-color: #de6a1c;
}
#c_main form dl dd {
	margin: 0 0 1em;
}
#c_main form dl dd p {
	margin: 0 0 0.5em;
}
#c_main form input[type=submit] {
	display: inline-block;
	padding: 10px 30px;
	border: none;
	background-color: #de6a1c;
	color: #ffffff;
	font-size: 1.8rem;
	cursor: pointer;
	border-radius: 5px;
}
#c_main form input[name=name] { width: 30em;}
#c_main form input[name=ruby] { width: 30em;}
#c_main form input[name=password] { width: 20em;}
#c_main form input[name=password_confirm] { width: 20em;}
#c_main form input[name=email] { width: 40em;}
#c_main form input[name=address] { width: 100%;}
#c_main form input[name=number] { width: 4em;}


/*  back  */
#c_main p.back {
	margin: 2em 0;
	padding-top: 1em;
	border-top: 1px #cccccc solid;
}
#c_main p.back a,
#c_main a.back {
	display: inline-block;
	padding: 0.25em 1.5em;
	background-color: #cccccc;
	font-size: 1.8rem;
	color: #666666;
	border-radius: 3px;
}

/*  edit address  */
#c_content #c_main form.address table {
	width: 100%;
}
#c_content #c_main form.address table th,
#c_content #c_main form.address table td {
	border: none;
}
@media screen and (min-width: 800px) {
	#c_content #c_main form.address table th,
	#c_content #c_main form.address table td {
		border-bottom: 3px #eeeeee solid;
	}
}






/*

    Account

*/

/*  common  */
body.account #c_main h2 {
	padding: 0.5em 0;
	border-bottom: 5px #eeeeee solid;
}
body.account #c_main h2:first-child {
	margin-top: 0;
}
body.account #c_main form table {
	width: 100%;
}
body.account #c_main form table th,
body.account #c_main form table td {
	border-width: 0;
}
body.account #c_main form.confirm table th,
body.account #c_main form.confirm table td {
	border-width: 3px;
}
body.account #c_main form table th {
	white-space: nowrap;
}
body.account #c_main form input[type=submit] {
	background-color: #de6a1c;
}
@media screen and (max-width: 799px) {
	body.account #c_main form table tr,
	body.account #c_main form table th,
	body.account #c_main form table td {
		display: block;
		padding: 0;
	}
	body.account #c_main form table td {
		padding: 0.25em 0 1em;
	}
	body.account #c_main form table td input[type=text],
	body.account #c_main form table td input[type=password],
	body.account #c_main form table td select {
		width: 100%;
	}
}

/*  registration  */
body.account #c_main p.agreement {
	height: 250px;
	padding: 5px 10px;
	background-color: #F2F2F2;
	border: 1px #cccccc solid;
	overflow: auto;
}

/*  signin  */
body.account #c_main form.signin {
	border-top: 1px #cccccc solid;
}

/*  mypage  */
body.account #c_main #account-service .status {
	padding-bottom: 2em;
	margin-bottom: 1em;
	border-bottom: 1px #cccccc solid;
}
body.account #c_main #account-service .status p {
	margin: 0;
}
body.account #c_main #account-service ul {
	margin: 0;
	list-style: none;
}
body.account #c_main #account-service ul li {
	margin: 0 0 0.5em;
}
body.account #c_main #account-service ul li a {
	color: #666666;
}
body.account #c_main #account-service ul li a:before {
	content: '\003e';
	margin-right: 5px;
}
@media screen and (min-width: 800px) {
	body.account #c_main #account-service {
		padding-bottom: 6em;
		overflow: hidden;
	}
	body.account #c_main #account-service .status {
		float: right;
		width: 50%;
		margin: 0;
		padding: 1em;
		background-color: #eeeeee;
		border: none;
	}
}

/*  edit basic  */
body.account #c_main #password-edit {
	padding: 0.25em 1em;
	background-color: #eeeeee;
	border: 1px #cccccc solid;
	color: #666666;
	border-radius: 2px;
	cursor: pointer;
}

/*  edit addresses  */
body.account #c_main table.addresses {
	width: 100%;
}

/*  orderlog  */
body.account #c_main table.orderlog {
	width: 100%;
}

/*  orderdetail  */
body.account #c_main table.orderdetail {
	width: 100%;
}





/*

    Item detail

*/

/*  layout  */
body.item #c_content #c_main div.images a.main,
body.item #c_content #c_main div.item div.images ul {
	display: none;
}
@media screen and (min-width: 800px) {
	body.item #c_content div.item {
		overflow: hidden;
	}
	body.item #c_content #c_main div.item div.images {
		width: 40%;
		float: left;
	}
	body.item #c_content #c_main div.images a.main,
	body.item #c_content #c_main div.item div.images ul {
		display: block;
	}
	body.item #c_content #c_main div.item div.application {
		width: 55%;
		float: right;
		margin-top: 3em;
	}
}

/*  images  */
body.item #c_content #c_main div.images h1 {
	font-size: 2.1rem;
	font-weight: normal;
	color: #333333;
}
body.item #c_content #c_main div.images a.main {
	position: relative;
	margin: 10px 0;
}
body.item #c_content #c_main div.images img {
	display: block;
	margin: 0 auto;
}
body.item #c_content #c_main div.images ul {
	margin: 0 0 2em;
	list-style: none;
	text-align: center;
	letter-spacing: -1em;
}
body.item #c_content #c_main div.images ul li {
	display: inline-block;
	width: 33.3%;
	margin: 10px 5px;
	box-sizing: border-box;
	text-align: center;
	font-size: 1.5rem;
	letter-spacing: 0;
	vertical-align: middle;
}
@media screen and (min-width: 800px) {
	body.item #c_content #c_main div.images {
		margin-bottom: 3em;
	}
	body.item #c_content #c_main div.images a.main {
		border: none;
	}
	body.item #c_content #c_main div.images ul li {
		width: 20%;
	}
}

/*  application  */
body.item #c_content #c_main div.application form {
	padding: 10px;
	border: 1px #cccccc solid;
}
body.item #c_content #c_main div.application form h2 {
	margin: 0;
	border: none;
	font-size: 1.8rem;
}
body.item #c_content #c_main div.application form h3 {
	margin: 0;
	padding: 0.5em;
	background-color: #eeeeee;
	font-size: 1.5rem;
}
body.item #c_content #c_main div.application form h4 {
	margin: 0;
	padding: 0.5em;
}
@media screen and (min-width: 800px) {
	body.item #c_content #c_main div.application form {
		padding: 20px;
	}
}

/*  application - destinationselect  */
body.item #c_content #c_main div.destinationselect {
	margin: 1em 0;
	border: 1px #cccccc solid;
}
body.item #c_content #c_main div.destinationselect h4 {
	cursor: pointer;
}
body.item #c_content #c_main div.destinationselect ul.addresses {
	display: none;
	margin: 0;
}
body.item #c_content #c_main div.destinationselect ul.addresses li {
	margin: 0;
	padding: 0.75em;
	list-style: none;
	border-top: 1px #cccccc solid;
	background-color: #ffffff;
}

/*  application - destination  */
body.item #c_content #c_main div.destination {
	margin: 1em 0 0;
}

body.item #c_content #c_main div.destination div.town select {
	width: 100%;
	margin-right: 0.25em;
	margin-bottom: 0.25em;
}
body.item #c_content #c_main div.destination div.town input[type=text] {
	cursor: pointer;
}
body.item #c_content #c_main div.destination div.town input[type=text]:focus {
	outline: none;
}
body.item #c_content #c_main div.destination ul.towns {
	margin-top: 0.25em;
	margin-left: 1em;
	list-style: none;
}
body.item #c_content #c_main div.destination ul.towns li.initial {
	margin: 0 0 0.25em;
	padding: 0.25em 0.5em;
	border: 1px #cccccc solid;
	cursor: pointer;
}
body.item #c_content #c_main div.destination ul.towns > li {
	display: none;
}
body.item #c_content #c_main div.destination ul.towns li ul {
	margin-top: 0.25em;
	list-style: none;
}
body.item #c_content #c_main div.destination ul.towns li ul li {
	margin: 0 0 0.25em;
	padding: 0.125em 0.25em;
	border: 1px #cccccc solid;
	cursor: pointer;
}
@media screen and (min-width: 800px) {
	body.item #c_content #c_main div.destination div.town {
		display: flex;
	}
	body.item #c_content #c_main div.destination div.town select {
		width: auto;
		margin-bottom: 0;
	}
}

/*  application - calendar  */
body.item #c_content #c_main form.destination div.datetime h3 {
	margin: 1em 0;
}
body.item #c_content #c_main form.destination div.datetime h3,
body.item #c_content #c_main form.destination div.datetime div.date,
body.item #c_content #c_main form.destination div.datetime div.time,
body.item #c_content #c_main form.destination div.datetime a {
	cursor: pointer;
}
body.item #c_content #c_main form.destination div.datetime div.calendar {
	overflow: hidden;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table {
	float: left;
	margin: 0.5em;
	padding: 0.5em;
	border: 1px #cccccc solid;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table caption {
	padding: 0.25em 0;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table th,
body.item #c_content #c_main form.destination div.datetime div.calendar table td {
	padding: 0;
	text-align: center;
	border: none;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table th {
	padding: 0.5em 0;
	border-bottom: 1px #cccccc solid;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table td.time {
	width: 6em;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table td a,
body.item #c_content #c_main form.destination div.datetime div.calendar table td span {
	display: inline-block;
	width: 2.5em;
	height: 2.5em;
	line-height: 2.5em;
	border-radius: 10em;
	color: #333333;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table td span {
	opacity: 0.3;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table td a:hover {
	background-color: #eeeeee;
	opacity: 1;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table thead th {
	font-weight: normal;
	font-size: smaller;
	text-align: center;
}
body.item #c_content #c_main form.destination div.datetime div.calendar table tr th:nth-child(1) { color: #FF3366;}
body.item #c_content #c_main form.destination div.datetime div.calendar table tr td:nth-child(1) * { color: #FF3366;}
body.item #c_content #c_main form.destination div.datetime div.calendar table tr th:nth-child(7) { color: #3399FF;}
body.item #c_content #c_main form.destination div.datetime div.calendar table tr td:nth-child(7) * { color: #3399FF;}
@media screen and (min-width: 800px) {
	body.item #c_content #c_main form.destination div.datetime div.calendar table td a,
	body.item #c_content #c_main form.destination div.datetime div.calendar table td span {
		width: 2em;
		height: 2em;
		line-height: 2em;
	}
}

/*  application - datetime  */
body.item #c_content #c_main form.destination div.datetime div.timetable table {
	width: 100%;
}
body.item #c_content #c_main form.destination div.datetime div.timetable table td {
	padding: 0.25em;
	border: 1px #cccccc solid;
	cursor: pointer;
}
body.item #c_content #c_main form.destination div.datetime div.timetable table td a {
	color: #de6a1c;
}
body.item #c_content #c_main form.destination div.datetime div.date {
	font-weight: bold;
	font-size: larger;
}





/*

    Cart and Checkout

*/

/*  title  */
#c_main .cart h2,
#c_main .checkout h2 {
	padding: 0.5em 0;
	border-bottom: 5px #eeeeee solid;
}

/*  nav  */
#c_main nav.checkout {
	padding: 1em 0;
}
#c_main nav.checkout a,
#c_main nav.checkout input {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.5em 2em;
	border: none;
	background-color: #de6a1c;
	color: #ffffff;
	font-size: 21px;
	font-size: 2.1rem;
	border-radius: 5px;
	cursor: pointer;
}
#c_main nav.checkout a.finish {
	padding: 0.75em 3em;
}

/*  table (common)  */
#c_main .checkout table {
	width: 100%;
}
#c_main .checkout table th {
	white-space: nowrap;
}
#c_main .checkout table td p {
	margin: 0.5em 0;
}
@media screen and (max-width: 799px) {
	#c_main .checkout table tr,
	#c_main .checkout table th,
	#c_main .checkout table td {
		display: block;
		padding: 0;
		border: none;
		white-space: normal;
	}
	#c_main .checkout table td {
		padding: 0.25em 0 1em;
	}
	#c_main .checkout table td input[type=text],
	#c_main .checkout table td input[type=password],
	#c_main .checkout table td select {
		width: 100%;
	}
}

/*  itemlist  */
#c_main table.orderitems {
	width: 100%;
}
#c_main table.orderitems td a.button {
	display: inline-block;
	padding: 0 0.75em;
	border: none;
	background-color: #cccccc;
	color: #666666;
	font-size: 13px;
	font-size: 1.3rem;
	border-radius: 5px;
	white-space: nowrap;
}
#c_main table.orderitems td {
	font-size: 15px;
	font-size: 1.5rem;
}
#c_main table.orderitems td img {
	display: none;
}
#c_main table.orderitems td .option {
	font-size: 13px;
	font-size: 1.3rem;
	color: #666666;
}
#c_main table.orderitems td input {
	width: 3em;
	text-align: center;
}
#c_main table.orderitems td .unitprice,
#c_main table.orderitems td a.button span {
	display: none;
}
#c_main table.orderitems td.number {
	text-align: right;
}
@media screen and (min-width: 800px) {
	#c_main table.orderitems td img {
		display: inline;
		max-width: 60px;
	}
	#c_main table.orderitems td .unitprice {
		display: inline;
		font-size: 13px;
		font-size: 1.3rem;
	}
	#c_main table.orderitems td a.button span {
		display: inline;
	}
}

/*  refresh  */
#c_main .cart .refresh input[type=submit] {
	padding: 0 10px;
	background-color: #054da3;
	font-size: 15px;
	font-size: 1.5rem;
	border-radius: 3px;
}
#c_main .cart .refresh span {
	margin-left: 5px;
	font-size: 13px;
	font-size: 1.3rem;
	color: #666666;
}

/*  summary  */
#c_main .cart .summary p {
	padding: 1em;
	background-color: #EEE;
	border: 1px #999 solid;
}
#c_main .cart .summary p strong {
	display: block;
}
#c_main .cart .summary p strong.shippingfree {
	color: #00B9EF;
}

/*  signin  */
#c_main .checkout form.signin {
	padding-top: 1em;
	border-top: 1px #cccccc solid;
}

/*  address list  */
#c_main .checkout ul.addresses li {
	margin: 0 0 1em;
	padding: 1em 0;
	border-bottom: 1px #cccccc solid;
	overflow: hidden;
	list-style: none;
}
#c_main .checkout ul.addresses li .name {
	float: left;
	width: 60%;
}
#c_main .checkout ul.addresses li .select {
	float: right;
	width: 35%;
	text-align: right;
}

/*  payment  */
#c_main .checkout textarea[name=other] {
	width: 100%;
	height: 6em;
}

/*  cod  */
#c_main .checkout .cod {
	padding: 1em;
	background-color: #eeeeee;
}

/*  card  */
#c_main .checkout .card_token {
	padding: 1em;
	background-color: #eeeeee;
}
#c_main .checkout .card_token .payment-cards {
	letter-spacing: -10px;
}
#c_main .checkout .card_token .payment-cards span {
	display: inline-block;
	width: 45px;
	height: 30px;
	margin: 1%;
	background-size: contain;
	background-position: center center;
	letter-spacing: 0;
}
#c_main .checkout .card_token .payment-cards span.visa            { background-image: url('images/cards/visa.png');}
#c_main .checkout .card_token .payment-cards span.mastercard      { background-image: url('images/cards/mastercard.png');}
#c_main .checkout .card_token .payment-cards span.jcb             { background-image: url('images/cards/jcb.png');}
#c_main .checkout .card_token .payment-cards span.americanexpress { background-image: url('images/cards/americanexpress.png');}
#c_main .checkout .card_token .payment-cards span.discover        { background-image: url('images/cards/discover.png');}
#c_main .checkout .card_token .payment-cards span.dinersclub      { background-image: url('images/cards/dinersclub.png');}
#c_main .checkout .card_token .payment-errors {
	display: none;
	margin: 0.25em 0;
	padding: 0.25em 0.5em;
	background-color: #eeeeee;
}
#c_main .checkout .card_token label {
	display: block;
	margin-bottom: 0.5em;
}
#c_main .checkout .card_token div {
	margin-bottom: 0.5em;
}
#c_main .checkout .card_token div span {
	display: block;
}
#c_main .checkout .card_token label span {
	display: block;
}
#c_main .checkout .card_token label input[name=card_number] {
	width: 100%;
	max-width: 400px;
}
#c_main .checkout .card_token label input[name=card_cvc] {
	width: 8em;
}
#c_main .checkout .card_token div label {
	display: inline;
}

/*  delivery  */
#c_main .checkout div.delivery {
	margin: 1em 0;
	padding: 0 1em;
	background-color: #eeeeee;
	border: 1px #cccccc solid;
}
@media screen and (max-width: 799px) {
	#c_main .checkout div.delivery select {
		width: 100%;
		margin: 0.25em 0;
	}
}

/*  finish  */
#c_main .checkout .orderid {
	margin: 1em 0;
	padding: 1em 1em;
	background-color: #eeeeee;
}





/*

    Other

*/

/*  line  */
#c_main p.line {
	margin: 1.5em 0;
	padding: 1.5em 0;
	border-top: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
}
#c_main p.line a {
	display: block;
	color: #333333;
}
#c_main p.line img.qr {
	display: none;
}
#c_main p.line a span {
	display: block;
	color: #01b901;
	font-size: 1.8rem;
	line-height: 1;
}
#c_main p.line a span img {
	display: inline-block;
	height: 1.5em;
	padding-right: 0.5em;
	vertical-align: middle;
}
#c_main p.line a:after {
	content: 'ご登録はこちら';
	display: block;
	margin: 1em 0 0.5em;
	padding: 0.5em 0;
	background-color: #1dcd00;
	color: #ffffff;
	text-align: center;
	font-size: 1.8rem;
}
@media screen and (min-width: 800px) {
	#c_main p.line a {
		text-align: left;
		overflow: hidden;
	}
	#c_main p.line img.qr {
		display: block;
		float: right;
		max-width: 200px;
	}
	#c_main p.line a span {
		margin-top: 0.5em;
		text-align: left;
		font-size: 2.4rem;
	}
	#c_main p.line a:after {
		content: none;
	}
}