/*@charset "utf-8";*/
@import url(https://fonts.googleapis.com/earlyaccess/notosansthaiui.css);

* {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
html {
	font-size: 85%; 
	line-height:1.3;
	letter-spacing:0.02em;
}

body {
	margin: 0px;
	color: #2F2617;
	font-family: 'Noto Sans Thai UI', Arial, Helvetica, "sans-serifＭＳ Ｐゴシック", "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	background-color:  rgba(136,109,66,0.7);
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
#top {
	background-color: rgba(255,255,255,0.9);
}
div.flag {
	width:100%;
	background-color: rgba(136,109,66,0.5); 
	text-align:center;
	color: #FCF6EC;
	text-shadow:-1px -1px rgba(136, 109, 66, 0.7);
	font-weight:bold;
	font-size:0.9em;
	margin:0 ;
	padding:0.2em 0;
}
.flag:empty {
	display: none;
}

#hero {
	height:300px;
	width:100%;
	margin: 0;
	clear: both;
}
#main {
	width: 100%;
	clear: both;
	position: relative;
	padding-bottom:10px;
}
#wrapper.hp {
	background-image: url(../images/k-trade-kadusaya-bg.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	position:relative;
}

   /* 表示領域が640px以上の場合に適用するスタイル ここから*/
@media print, screen and (min-width: 640px) {
body {
	background-image:url(../images/k-trade-bg.jpg);
	background-repeat:repeat;
}

#wrapper {
	max-width: 945px;
	height:auto;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
}
#top {
	overflow: hidden;
}
#left, #right  {
	width: 46%;
	padding:10px 2%;
	margin-left:2%;
	margin-right:2%;
	float: left;
	background-color: rgba(255,255,255,0.45);
	}
#middle {
	width: 60%;
	padding:10px 2%;
	margin-left:auto;
	margin-right:auto;
	background-color: rgba(255,255,255,0.45);
}
header h1 {
	clear:both;
	text-align: center;
	margin: 4% 0;
	color:#886d42;
	font-size: 64px;
	font-style: normal;
	font-weight: normal;
	font-family:"Kaisho MCBK1", "江戸勘亭流", "有澤太楷書P";
	text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.3);
        line-height:1;
}
header h1 .ktrade {
	font-size: 42px;
	font-family: chunk;
	font-style: normal;
	letter-spacing:0.05em;
}
#main article.kazusaya {
	clear: both;
	text-align:center;
	margin-top: 30px;
	margin-right: 4%;
	margin-bottom: 0px;
	padding: 10px 40px;
	border-radius: 10px;
	color: #886D42;
	background-color: rgba(252,246,236,0.8);
	border: 1px solid #886D42;
	float: right;
}
#main article.kazusaya h2 {
	color: #886D42;
	margin: 0 0 0.3em;
	border:none;
	font-size:16px;
	text-align:center;
}

#main article#left h2:first-child, #main article#right h2:first-child {
	margin-top:10px;
}

/*topに固定されるメニュー用*/
.fixed {
    position: fixed;
    top: 0;
    width:100%;
    max-width: 945px;
    z-index: 10000;
}
/* Intro start*/
.intro {
	padding:20px 4% 0;
	text-align:center
}
/* Intro end*/
footer p.footer_left {
   text-align: left;
   float: left;
}
footer p.footer_right {
   text-align: right;
}
}
   /* 表示領域が640px以上場合に適用するスタイル ここまで*/

   /* 表示領域が639px未満の場合に適用するスタイル ここから*/
@media screen and (max-width: 639px) {
html {
	font-size:95%;
	line-height:1.3;
	letter-spacing:0.01em;
}
body {
	background-color: #FFFFFF;
}
#top {
	overflow: visible;
}
#wrapper {
	width: 100%;
	margin:0 auto;
	background-color: #FFFFFF;
}
#left, #right {
	clear:both;
   	float:none;
	padding:0;
	width: 98%;
	margin:0 auto;
   	}
#middle {
	width: 100%;
	padding:10px 2%;
	margin:0;
	background-color: rgba(255,255,255,0.45);
}
header h1 {
	clear:both;
	text-align: center;
	margin: 6% 0;
        line-height:1;
	color:#886d42;
	font-size: 42px;
	font-style: normal;
	font-weight: normal;
	font-family:"Kaisho MCBK1", "江戸勘亭流", "有澤太楷書P";
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
}
header h1 .ktrade {
	font-size: 28px;
	font-family: chunk;
	font-style: normal;
	letter-spacing:0.05em;
}
#mainnav a {
	font-size: 0.9rem;
	white-space:nowrap;
	}
#main article.kazusaya {
	clear: both;
	text-align:center;
	margin:10rem 0 100px 0;
	padding: 0 0 1rem;
	color: #886D42;
/*	background-color: rgba(255,255,255,0.3);
	border-radius: 10px;
	border: 1px solid #886D42;*/
}
#main article.kazusaya h2 {
	color: #886D42;
	margin: 0 0 0.3em;
	border:none;
	font-size:16px;
}
/*topに固定されるメニュー用*/
.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
.fixed div.flag span:before {
  content: "\A\A";
  white-space: pre;
}
/* Intro start*/
.intro {
	width: 98%;
	margin:0 auto;
	padding:20px 0 0;
	text-align:left;
}
/* Intro end*/
footer p.footer_left {
   text-align: left;
   clear: both;
}
footer p.footer_right {
   text-align: left;
}
}

   /* 表示領域が639px未満の場合に適用するスタイル ここまで*/


.fixed div.flag {
	text-align:right;
	height:auto;
	padding-right: 0.5rem;
}
.fixed .lang {
	display:none;
}
.fixed h1 {
	display:inline-block;
	font-size:2rem;
	line-height:1em;
	margin:0.3em;
	padding:0;
	position:absolute;
	top:0;
}
.fixed h1 span.ktrade {
	font-size:1rem;
}
h1, h2 {
	font-family: georgia, Times New Roman, "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3";
	font-style: normal;
	clear: both;
}

#mainnav {
	margin: 0;
	clear: both;
	width:100%;
}
#mainnav ul {
	margin: 0;
	list-style-type: none;
	padding: 0;

}
#mainnav a {
	display: block;
	width: 25%;
	float: left;
	text-align: center;
	text-shadow: -1px -1px rgba(136, 109, 66, 0.85);
	padding: 7px 0;
	color: #ffffff;
	background-color: rgba(136,109,66,0.9);
	/*	background-image: url(../images/bg-30.jpg);*/
	border: rgba(136,109,66,0.3) 1px solid;
	border-left: none;

}


#mainnav a:hover, #mainnav a:active, #mainnav a:focus{
	background-color: rgba(136,109,66,0.75);
	text-decoration: underline;
	border: rgba(136,109,66,1) 1px solid;
}
#mainnav a.thispage{
	color: #583A0C;
	background-color: rgba(252,246,236,0.9);
	text-shadow: none;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.4) inset;
	border:rgba(136,109,66,0.5) 1px solid;
	border-left:none;
}

#main h2 {
	color: #886D42;
	margin-top: 2.5rem;
	border-left: 5px solid #886D42;
	text-indent: 5px;
}

h3 {
	margin-top: 0.5em;
	margin-bottom: 0px;
}

#hero img {
	max-width: 100%;
}

.space {
	margin:5px 0 0 10px;
}
figure {
	display: block;
	text-align: center;
}
figure img {
	max-width:300px;
	width:100%;
	height:auto;
	padding: 0;
	-webkit-box-shadow: 1px 1px 10px #886d42;
	box-shadow: 1px 1px 10px #886d42;
}

figcaption {
	font-size: 0.875em;
	font-weight: normal;
	text-align: center;
	display: block;
	margin-top: 5px;
}
.centered {
	margin-left: auto;
	margin-right: auto;
}
.center {
	text-align: center;
}

.floatleft {
	float: left;
	margin-left: 0px;
	margin-right: 10px;
}
.floatright {
	float: right;
	margin-left: 10px;
	margin-right: 0px;
}
.front-space {
	padding: 0 1%;
	white-space: nowrap;
}
footer {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 1%;
	color: #F2EDE6;
	font-size: 0.9em;
/*	background-image: url(../images/bg-30.jpg);*/
	margin: 0;
	background-color: rgba(136,109,66,0.5); 
}
footer p {
	margin:0;
	background-color:none;
}

footer span.year:before {
	content: "2020";	
}
footer span.kazusaya {
		font-family: georgia, Times New Roman, "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3";
}
footer a {
	text-decoration: underline;
}
footer a:link {
	color: #F2EDE6;
}
footer a:visited {
	color: #F2EDE6;

}
footer a:hover, a:active, a:focus {
	color: #F2EDE6;
	text-shadow: 0 0 5px #7F3300;
}

.glad-hol {
	background: rgb(242,237,230)/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZWRlNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2M3YjE4ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmMmVkZTYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(242,237,230,1) 0%, rgba(199,177,141,1) 50%, rgba(242,237,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(242,237,230,1)), color-stop(50%,rgba(199,177,141,1)), color-stop(100%,rgba(242,237,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(242,237,230,1) 0%,rgba(199,177,141,1) 50%,rgba(242,237,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(242,237,230,1) 0%,rgba(199,177,141,1) 50%,rgba(242,237,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(242,237,230,1) 0%,rgba(199,177,141,1) 50%,rgba(242,237,230,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(242,237,230,1) 0%,rgba(199,177,141,1) 50%,rgba(242,237,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2ede6', endColorstr='#f2ede6',GradientType=1 ); /* IE6-8 */
}

#main a {
	font-weight: bold;
	text-decoration: none;
}
#main a:link {
	color: #FF6600;
}
#main a:visited {
	color: #FF6600;

}
#main a:hover, a:focus {
	color: #7F3300;
	text-decoration: underline;
	text-shadow: none;
}

#main a:active {
	color: #7F3300;
	text-decoration: underline;
	text-shadow: 0 0 2px #FF6600;
}

a.tel {
	color: #886D42;
	text-decoration: underline;
}
a.nounderline:hover {
	color:inherit;
	text-decoration: none;
}
div.flag a.tel {
	color: #fff;
}

table {
    width: auto;
    border: 1px solid #C7B18D;
    border-collapse: collapse;
    border-spacing: 0;
}
table.rate{
	width:100%;
}
table.form {
    margin:20px 0 5px;
    width:100%;
}
th {
    color: #fff;
    padding: 5px;
    border-bottom: 1px solid #C7B18D;
    border-left: 1px solid #C7B18D;
    background: #886D42;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
}
table.form th {
    text-align: right;
}
td {
    padding: 5px;
    border-bottom: 1px solid #C7B18D;
    border-left: 1px solid #C7B18D;
}
table.form td {
    padding: 10px 5px;
}
tr:nth-child(2n+1) {
    background: #FCF6EC;
}
tr:nth-child(2n) {
    background: #FFFFFF;
}
table.rate tr td:nth-of-type(1) {
	text-align:right;
}
table.rate tr td:nth-of-type(2) {
	width:80px; 
	text-align:center;
}
table.rate tr td:nth-of-type(3) {
	text-align:right;
}
.align-top {
	vertical-align:top;
	white-space:nowrap;
}
p {
	margin-top: 0.3em;
	margin-left: 0em;
}
p.table-foot {
	margin-top: 0.3em;
	margin-bottom:0.5em;
	font-size:85%;
}
ul.remarks  {
	margin-top: 0.3em;
	margin-bottom:0.5em;
	font-size:85%;
	list-style-type: none;
	margin-left:0.5em;
}
ul.remarks li {
	line-height:1.3;
	letter-spacing:0.0em;
}
ul.remarks li:before {
	content: '* ';
	margin-left:-0.5em;

}
#main ul {
	margin: 0.3em 0 0 0.5em;
	padding-left: 1em;
}
#main li {
	margin-bottom:0.5em;
}
#top ul.lang {
	color: #BA9F73;
	font-size: 0.9em;
	margin: 0;
	padding:0;
	list-style-type: none;
}
/*#top ul.lang li{
	display:inline;
	margin:0;
	padding:0;
}*/
#top ul.lang li a {
	display:block;
	float:right;
	font-weight:normal;
	color: rgba(136,109,66,0.8);
	padding: 2px 10px 3px;
	border-bottom:1px solid  rgba(136, 109, 66, 0.3);
	border-left:1px solid  rgba(136, 109, 66, 0.4);
	border-radius: 0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	background-color: rgba(252,246,236,0.9);
}
#top ul.lang li a:hover,
#top ul.lang li a:active, 
#top ul.lang li a:focus,
#top ul.lang li a.thislang {
	text-shadow: -1px -1px rgba(136, 109, 66, 0.7);
	color: #ffffff;
	background-color: rgba(136,109,66,0.5);
}
p.exchange-info {
	text-align:left;
	color: #886D42;
/*	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);*/
	font-weight:bold;
	font-size:0.95em;
	margin:5px 0;
}
.nowrap {
	white-space:nowrap
}
#sns {
	clear:both; 
	width:100%; 
	height:20px; 
	margin:20px 0 0; 
	text-align:center;
}
#sns.home {
}

form {
	margin-bottom:20px;
}
input, textarea {
	font-size: 1.2rem; 
	line-height:1.2;
	width:95%;
	border:rgba(136,109,66,0.5) 1px solid;

}
input:hover, textarea:hover {
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.3) inset;

}
input.btn {
	width:45%;
	padding:0.5em 0;
	color: #583A0C;
	background-color: rgba(136,109,66,0.15);
	text-shadow: none;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.4) inset;
	border:rgba(136,109,66,0.5) 1px solid;
}

input.btn:hover {
	background-color: rgba(136,109,66,0.3);
	text-decoration: none;
	color: #886D42;
	font-weight: bold;
	text-shadow: 0 0 5px #fff,0 0 10px #fff, 0 0 15px #fff;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.3) inset;
	
}

/* メッセージ */
p.msg {
	color: #dd0000;
	margin: 2em;
}
span.msg {
	color: #dd0000;
	font-weight:bold;
}

/* 戻りボタン */
form.back {
	margin-top: 2em;
}
.clear {
	clear:both;
}
.red {
	color: #ff0000;
}
.blue {
	color: #0000ff;
}
table.rate span.red {
	font-size:0.8rem;
}
table.rate span.blue {
	font-weight:bold;
	font-size:0.8rem;
}

table.rate span.no-stock {
	color: #ff0000;
	font-size:0.8rem;
}
table.rate span.no-stock:after {
	content:"在庫なし";
}
table.rate span.campaign {
	color: #0000ff;
	font-weight:bold;
	font-size:0.8rem;
}
table.rate span.campaign:before {
	content:"キャンペーンレート";
}

.max-180 {
	max-width:180px;
}

/* Guide start*/
article.guide h1 {
	font-size:24px;
	font-weight:bold;
}
.text_area {
	max-width:100%;
	margin: 20px 4%;
	padding: 15px;
	border: 1px solid #ccc;
}
.text_area h3 {
	text-align:center;
	font-size: 18px;
	font-weight: bold;
	margin: 0 0 10px;
	padding: 0 0 5px;
	border-bottom: 1px dashed #ccc;
}
.text_area p {
	margin: 0 0 1em;
}
.text_area p:last-child {
	margin: 0;
}
#main .column_link {
	margin:0.5rem 0;
	font-size:1.2rem;
}
#main .column_link a {
	display: block;
	max-width: 500px;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	padding:0.5rem 0;
	text-shadow: -1px -1px rgba(136, 109, 66, 0.85);
	color: #ffffff;
	background-color: rgba(136,109,66,0.9);
	border: rgba(136,109,66,0.3) 1px solid;
}
#main .column_link a:visited {
	text-shadow: -1px -1px rgba(136, 109, 66, 0.85);
	color: #ffffff;
}

#main .column_link a:hover {
	font-weight:bold;
	color: #583A0C;
	background-color: rgba(136,109,66,0.15);
	text-shadow: none;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.4) inset;
	border: rgba(136,109,66,0.5) 1px solid;
}

.guide {
	padding:0 4% 400px;
}
div #breadcrumbs {
	margin-top: 10px;
}
.img-right-s {
    float: right;
    margin: 0 0 4% 4%;
    width: 35%;
}
.img-left-s img, .img-right-s img, .img-left-l img, .img-right-l img {
    vertical-align: middle;
    width: 100%;
}
div.btn{
	clear:both;
	text-align:center;
} 
div.btn button {
	text-align: center;
	font-size: 1.2rem;
	padding: 0.8rem 2rem;
	color: #583A0C;
	background-color: rgba(136,109,66,0.15);
	text-shadow: none;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.4) inset;
	border:rgba(136,109,66,0.5) 1px solid;
}

div.btn button:hover {
	background-color: rgba(136,109,66,0.3);
	text-decoration: none;
	color: #886D42;
	font-weight: bold;
	text-shadow: 0 0 5px #fff,0 0 10px #fff, 0 0 15px #fff;
	box-shadow: 1px 1px 1px 1px rgba(136,109,66,0.3) inset;
	cursor : pointer;
}
/* Guide end*/

article.campaign-frame {
	clear: both;
	margin-top: 0;
	padding: 3px;
	border: 1px solid rgba(136,109,66,0.4);
	border-top: 1px solid #DBD3C6;
	border-right 1px solid rgba(136,109,66,0.4);
	border-bottom: 1px solid rgba(136,109,66,0.7);
	border-left: 1px solid #DBD3C6;
	background: -moz-linear-gradient(#FDF8F0, rgba(136,109,66,0.7));
	background: -ms-linear-gradient(top, #FDF8F0, rgba(136,109,66,0.7));
	background: -webkit-gradient(linear, left top, left bottom, from(#FDF8F0), to(rgba(136,109,66,0.7)));
}

#main h3.campaign-title {
	color: #BA9F73;
	margin: 5px 10px;
	font-size:16px;
	font-weight:bold;
	text-align:left;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.7);
}

div.campaign {
	text-align:left;
	color: #886D42;
	text-shadow:1px 1px 2px rgba(0,0,0,.3);
	border:1px solid rgba(136,109,66,0.2);
	padding:10px 10px 0 10px;
	background-color:rgba(255,255,255,0.6);
}

.stripe-bg {
	background: repeating-linear-gradient(
	-45deg,
	rgba(252,246,236,0.8),
	rgba(252,246,236,0.8) 5px,
	rgba(136,109,66,0.1) 5px,
	rgba(136,109,66,0.1) 6px);
}
.stripe-grad-bg {
	background: 
	 /* On "top" */
	  repeating-linear-gradient(
	  45deg,
	  transparent,
	  transparent 10px,
	  #E6DDCE 10px,
	  #E6DDCE 11px
	  ),
         /* on "bottom" */
          linear-gradient(
          to bottom,
          #FDF8F0,
          rgba(136,109,66,0.5)
         );
}

@media print {
	#mainnav a {
		border:none;
	}
	#mainnav a.thispage {
		border:1px solid #886D42;
	}
}