@import url("normalize.css");
@font-face {
    font-family: 'サナフォン麦';
    src: url('../font/SNsanafonMugiV258.woff') format('woff');
}
@font-face {
    font-family: 'notoSans-bold';
    src: url('../font/NotoSansCJKjp-Bold.woff') format('woff');
}
@font-face {
    font-family: 'notoSans-black';
    src: url('../font/NotoSansCJKjp-Black.woff') format('woff');
}
@font-face {
    font-family: 'notoSans-light';
    src: url('../font/NotoSansCJKjp-Light.woff') format('woff');
}

/*-------- general ----------*/
* {
  padding:0;
  margin:0;
}
body {
  color: #333;
  background-color: #fff;
  line-height:1.5em;
  letter-spacing:0.8pt;
  font-family: notoSans-light,Verdana,"游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight:14px;
}

a:not([class*="nohover"]):hover {
  border-bottom: dashed 2px;
}
a {
  color:#333;
  text-decoration:none;
}
a.button {
  display:inline-block;
  font-weight:bold;
  padding:5px 20px;
  margin:10px;
  text-align:center;
  letter-spacing:1.5pt;
  background-color: #3fe9c2;
  border-radius: 15px;
  border: 0 1px 1px 0 #069 solid;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
a.classic {
  color:#00e;
}

ul.disc {
  list-style: disc inside;
}
ul.circle {
  list-style:circle inside;
}

/*-------- [font] ---------*/
.script { /* 手書き風 */
	font-family:"サナフォン麦", "HG丸ｺﾞｼｯｸM-PRO","ヒラギノ丸ゴ ProN","Hiragino Maru Gothic ProN","メイリオ";
}
.serif {
	font-family: "Times New Roman", "HG教科書体","ＭＳ Ｐ明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
}
.sans-serif {
	font-family: notoSans-light, Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.bold {
  font-weight:bold;
}
.font-small {
  font-size:12px;
}
/* 行間・文字間をbodyで広くしているので、ちょっと詰めたいところはこれ。*/
.dense { 
  line-height:1.2em;
  letter-spacing: normal;
}
.note {
  font-size:0.8em;
  color:#aaa;
}
.warning {
	color:#f33;
}
/*---------- [color] ----------*/
.color-brown {
	color:#a70;
}
.bgcolor-brown {
	background-color: #a70;
	color:#fff;
}
.color-faded {
	background-color:#bd9;
	color:#fff;
	font-weight:bold;
}
.color-faded a:hover {
	color:#00e;
}
.color-faded a {
	color:#fff;
	text-decoration: none;
}
.bgcolor-light {
	background-color: #c2e93f;
}
.color-dark {
	color:#18783c;
}
.color-accent{
   color:#3fe9c2;
}

/*----------- layout parts ----------*/
div#container-navi, div#container-footer {
	width: 860px;
	padding: 5px 50px; /* 左右のpaddingの結果、実際の画面幅は960になる */
	text-align: center;
	background-color: #a70;
  color:#fff;
  box-shadow: 0 8px 6px -6px rgba(0,0,0,.3) inset, 0 -8px 6px -6px rgba(0,0,0,.3) inset;
}
div#container-navi a, div#container-footer a {
  color:#fff;
}
div#container-navi>table {
	height:100%;
  width:790px;
}
div#container-navi td.separator {
	background-color: #960;
	width:3px;
}

div#container-navi td:hover {
	background-color: #a80;
}

div#container-sidemenu td {
	border-bottom: dotted 5px #bd9  ;
}
div.main-contents {
  margin:0px 10px 0 30px;
  width:730px;
}

/*--------[heading]-----*/
h1 {
	color:#18783c;
	font-family:"notoSans-black";
  font-size:24pt;
  margin: 20px 5px 5px 5px;
}
h1.with-leaf{
  vertical-align: top;
	padding: 5px 10px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 78%, #c2e93f 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(78%,#ffffff), color-stop(100%,#c2e93f)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 78%,#c2e93f 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#ffffff 78%,#c2e93f 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#ffffff 78%,#c2e93f 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 78%,#c2e93f 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#c2e93f',GradientType=0 ); /* IE6-9 */

}
h1.with-leaf:before {
 content:" ";
 margin:-10px 10px 0 0;
 display:inline-block;
 width:45px;
 height:45px;
 background:url("../images/leaf2.png");
 background-size:contain;
 vertical-align:middle;
 background-repeat: no-repeat;
 
}
h2 {
  margin-top:25px;
  margin-left:20px;
  margin-bottom:8px;
  min-width:100pt;
  max-width:200pt;
  padding:5px 15px ;
  font-family: "notoSans-black";
  font-size:18pt;
  color:#333;
  background-color:#c2e93f;
  box-shadow:2px 2px 2px 1px rgba(0,0,0,0.2);
    -webkit-transform: rotate(-1deg);
    -moz-transform: rotate(-1deg);
    -o-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

/*-----------[sidemenu]-------------*/
#sidemenu ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#sidemenu li{
  display: inline;
  padding: 0;
  margin: 0;
}
#sidemenu li a{
  border-bottom: 3px dotted #bd9;
  display: block;
  width:170px;
  text-decoration: none;
  text-align: center;
  padding: 5px 2px;
}
#sidemenu li a span{
  display:block;
  padding:5px;
  font-size: 14px;
}
#sidemenu li:nth-child(1) a span{
  color : #900;
}
#sidemenu li:nth-child(1) a span:hover{
  color:#fff;
  background-color:#900;
}
#sidemenu li:nth-child(2) a span {
  color : #f90;
}
#sidemenu li:nth-child(2) a span:hover{
  color:#fff;
  background-color:#f90;
}
#sidemenu li:nth-child(3) a span{
  color : #390;
}
#sidemenu li:nth-child(3) a span:hover{
  color:#fff;
  background-color:#390;
}
#sidemenu li:nth-child(4) a span{
  color : #060;
}
#sidemenu li:nth-child(4) a span:hover{
  color:#fff;
  background-color:#060;
}
#sidemenu li:nth-child(5) a span{
  color : #099;
}
#sidemenu li:nth-child(5) a span:hover{
  color:#fff;
  background-color:#099;
}
#sidemenu li:nth-child(6) a span{
  color : #609;
}
#sidemenu li:nth-child(6) a span:hover{
  color:#fff;
  background-color:#609;
}


/*--------[image]---------*/
img.small {
  width:100px;
}
img.medium {
  width:200px;
}
img.large {
  width:400px;
}
.float-left {
  float: left;
  margin: 0 2em 0 0.5em;
}
.float-right {
  float: right;
  margin: 0 0.5em 0.2em 0.5em;
}

figure {
  display:inline-block;
  background-color: #fbfbfb;
  padding:3px;
  border-radius:2px; 
  margin:0 2px;
}
figcaption {
  text-align: center;
  line-height: 1;
  vertical-align: middle;
  font-family: 'サナフォン麦', sans-serif;
  color: #333;
}


/*-------- table.basic ---------*/
table.basic  {
  border-spacing: 0;
  font-size:13px;
  width:680px;
}
table.basic  th {
  width:100px;
  color: #fff;
  padding: 8px 15px;
  background: #a70;
  background:-moz-linear-gradient(rgba(170,119,0,0.7), rgba(170,119,0,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(170,119,0,0.7)), to(rgba(170,119,0,0.9)));
  font-weight: bold;
  border-left:1px solid #a70;
  border-top:1px solid #a70;
  border-bottom:1px solid #a70;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(170,119,0,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table.basic  tr:first-child>*:first-child {
  border-radius: 5px 0 0 0;
}
table.basic  tr:first-child>*:last-child {
  border-radius:0 5px 0 0;
  border-right:1px solid #ed6;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
table.basic  tr td {
  padding: 8px 15px;
  border-bottom: 1px solid #ed6;
  border-left: 1px solid #ed6;
//  text-align: center;
}
table.basic  tr td:last-child {
  border-right: 1px solid #ed6;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table.basic  tr {
  background: #fff;
}
table.basic  tr:nth-child(2n+1) {
  background: #faf9cc;
}
table.basic  tr:last-child td {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table.basic  tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}
table.basic  tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}


/*------- table with heading on the left ----*/
table.heading-on-the-side  {
  border-spacing: 0;
  font-size:13px;
  width: 680px;
}
table.heading-on-the-side  tr:nth-child(2n+1) {
  background: #faf9cc;
}
table.heading-on-the-side  th {
  width:100px;
  color: #fff;
  padding: 8px 15px;
  border: 1px solid #a70;
  background: #a70;
  background:-moz-linear-gradient(rgba(170,119,0,0.7), rgba(170,119,0,0.9) 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(rgba(170,119,0,0.7)), to(rgba(170,119,0,0.9)));
  font-weight: bold;
  line-height: 120%;
  text-shadow:0 -1px 0 rgba(170,119,0,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
table.heading-on-the-side  td {
  padding: 8px 15px;
  border-bottom: 1px solid #ed6;
  border-right: 1px solid #ed6;
}
table.heading-on-the-side  tr>*:first-child {
  border-left:1px solid #ed6;
  box-shadow: 2px 0px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
table.heading-on-the-side  tr>*:last-child {
  border-right:1px solid #ed6;
  box-shadow: 2px 0px 1px rgba(0,0,0,0.1),0px 1px 1px rgba(255,255,255,0.3) inset;
}
table.heading-on-the-side  tr:first-child>* {
  border-top: 1px solid #ed6;
}
table.heading-on-the-side  tr:first-child>*:first-child {
  border-radius: 3px 0 0 0;
}
table.heading-on-the-side  tr:first-child>*:last-child {
 border-radius: 0 3px 0 0;
}
table.heading-on-the-side  tr:last-child>* {
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
table.heading-on-the-side  tr:last-child>*:first-child {
  border-radius: 0 0 0 3px;
}
table.heading-on-the-side  tr:last-child>*:last-child {
  border-radius: 0 0 3px 0;
}

table.simple {
  border-collapse: separate;
  border-spacing:4px;
  width:680px;
  font-size:13px;
  text-align:left;
}
table.simple tr:first-child td, table.simple tr:first-child th {
  border-top: 3px solid #bd9;
}
table.simple td, table.simple th {
  padding: 2px 8px;
  border-bottom: 1px solid #bd9;
  vertical-align: top;
}

/*------- sticky note -------*/
.sticky-note {
	padding:15px;
    line-height: 160%;
    color:#333;
    font-weight:normal;
    font-size:14px;
	margin-top: 30px;
	margin-left: 220px;

    width:400px;
    height:160px;
    //background-color:#eee;
    position: relative;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}
.sticky-note:after {
    z-index: -1; /* 重なり順を背面へ */
    background-color: #c2e93f;
	width:430px;
    height:180px;
    content: "";
    position: absolute;
    top: 0px;
    right: 3px;
    -webkit-box-shadow: 0 5px 5px #555 ;
    -moz-box-shadow: 0 5px 5px #555 ;
    box-shadow: 0 5px 5px #555 ;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -o-transform: rotate(4deg);
    -ms-transform: rotate(4deg);
    transform: rotate(4deg);
}

/*------------- letter ------------------*/
div.thumbnail {
  width:520px;
  height:440px;
  margin: 10px auto;
  padding: 3px auto;
  border:1px solid #3B5998;
  border-radius: 5px;
  align:center;
}

p.thumbnail {
	width:500px;
	height:420px;
	overflow:hidden;
}

img.thumbnail {
  /*width: 100%; */
  width:480px;
  position:relative; top:-100px;
  /* border: 1px solid #666;*/
  /* border-radius: 5px; */
}
/*------------- facebook ------------------*/
div.fb-container {
  width:520px;
  height:440px;
  margin: 10px auto;
  border:1px solid #3B5998;
  border-radius: 5px;
  align:center;
}
div.fb-container .header {
  background-color: #3B5998;
  color: #fff;
  padding:5px;
}
div.fb-container .fb-page{
  margin:0 auto;
}

 /*--------[poraloid-like gallery]---------*/
 ul.polaroids {
  list-style: none;
  margin-top:30px;
  text-align:center;
  font-size:0.8em;
 }
 ul.polaroids a>img {
  display:block;
 }
 ul.polaroids a:ahttps://www.facebook.com/pages/%E9%A2%A8%E3%81%AE%E4%B8%98%E3%83%95%E3%82%A1%E3%83%BC%E3%83%A0/305085149540356fter {
  content: attr(title);
  font-family: 'サナフォン麦', sans-serif;
  color: #333;
  font-size:0.8em;
  width:160px;
  display:table;
  table-layout:fixed;
  word-wrap:break-word;
}
ul.polaroids li a {
  cursor:default;
  position: relative;
  float: left;
  text-align: center;
  padding: 8px 8px 16px;
  background-color: white;
  -moz-box-shadow: 0 4px 10px #333;
  -webkit-box-shadow: 0 4px 10px #333;
  box-shadow: 0 4px 10px #333;
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  transform: rotate(3deg);
  left:5px;
}
ul.polaroids li:nth-child(3n) a {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  transform: rotate(3deg);
  top: -5px;
}
ul.polaroids li:nth-child(4n) a {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  transform: rotate(-3deg);
  top: -10px;
  left: 5px;
}
ul.polaroids li:nth-child(2) a {
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  transform: rotate(-3deg);
  top: -10px;
  left: 10px;
}

/*-------- product panel ---------*/
div.panel {
  display:inline-block;
  float: left;
  border:1px solid rgba(0,0,0,.1);
  border-radius:3px;
  padding:4px;
  margin:3px;
  max-width:225px;
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 1px 0 0 rgba(255,255,255,1), 0 1px 0 rgba(255,255,255,1), 1px 0 0 rgba(255,255,255,1) inset ;
  background-color: #f9f0cc;
}
div.panel figure {
  display:block;
  text-align: center;
  margin-bottom:5px;
}
div.panel figcaption {
  font-weight: bold;
}
div.panel hr {
  width:80%;
  border: 1px dashed #999;
}

div.panel-wide {
  display: block;
  width: 600px;
  max-width: 620px;
}
div.panel-wide figure {
  display:inline-block;
  float: left;
  text-align: center;
  margin-bottom:5px;
}
div.panel-wide div {
  display:inline;
  text-align: left;
}
div.panel-wide div p.heading {
  margin: 2px 100px;
  border-bottom: 1px dashed #999;
}