@charset "utf-8";

/* =======================================
   CSS BrowserReset & Layout
   (C) Gallery-O5 All Rights Reserved.
   http://gallery-o5.jp/
 ======================================= */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
/*	outline: 0;*/
}

html {
  font-size: 62.5%;
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}
body * {
  box-sizing: border-box;
}
img {
  vertical-align: text-bottom;
  -ms-interpolation-mode: bicubic;
	max-width: 100%;
	height:auto;
}
h1, h2, h3, h4, h5, h6, strong {
	font-weight: bold;
}
ol, ul {
  list-style: none;
}

/* Layout ======================================= */
body {
  font-size: 1.4rem;
	line-height: 1.5em;
	font-family: "Sawarabi Gothic";
}
h1, h2, h3, h4, h5, h6 {
  font-size: 1.4em;
	color: #a27a40;
}
strong {
	color: #a27a40;
}
body > h1.title {
  background: linear-gradient(#cea972, #654c2d);
	color: #fff;
	text-align: center;
	line-height: 2em;
	font-weight: normal;
}
#wrap {
  padding: 1em;
}

p.cap {
	color: #a27a40;
	font-weight: bold;
  text-align: center;
	font-size: 1em;
	line-height: 3em;
}
p.caution {
  color: #f00;
	font-size: 0.9em;
	line-height: 1.2em;
	border-top: 1px solid #f00;
	border-bottom: 1px solid #f00;
	padding: 0.5em;
}

ol.breadcrumb li {
  display: inline-block;
	line-height: 2.5em;
}
ol.breadcrumb li a {
  text-transform: uppercase;
	text-decoration: none;
}
ol.breadcrumb li a:hover {
	text-decoration: underline;
}
ol.breadcrumb li:not(:first-child):before {
  content: ">";
	margin-right: 0.2em;
}

#wrap header {
	margin-bottom: 1em;
}
#wrap header h1 {
  text-align: center;
}
#wrap p:not(:last-child) {
  margin-bottom: 0.5em;
}

#wrap #contents section {
	margin-bottom: 2em;
}
#wrap #contents section h1 {
	text-shadow: 1px 1px 1px #ccc;
	border-bottom: 3px solid #a27a40;
	margin-bottom: 0.2em;
	padding-bottom: 0.2em;
	font-weight: normal;
}
#wrap #contents section h2 {
  font-size: 1.2em;
	margin-bottom: 0.2em;
}
#wrap #contents section p.example {
  border: 2px solid #a27a40;
	background: #fafafa;
	line-height: 1.3em;
	padding: 1em;
}
#wrap #contents section hr {
  border: 1px dashed #999;
}

p#formLink a {
  display: block;
	text-align: center;
	color: #fff;
  background: linear-gradient(#cea972, #654c2d);
	text-decoration: none;
	line-height: 3em;
	border-radius: 5px;
}
p#formLink a:hover {
  background: linear-gradient(#654c2d, #cea972);
}

body > footer {
  background: linear-gradient(#cea972, #654c2d);
	color: #fff;
	text-align: center;
	line-height: 2em;
}

@media all and (min-width: 600px) {
body {
  font-size: 1.6rem;
}
#wrap {
  max-width: 700px;
	margin: 0 auto;
  padding: 3em;
  padding-top: 2em;
	box-shadow:
	  -5px 0 5px 0px rgba(0, 0, 0, 0.3),
	  5px 0 5px 0px rgba(0, 0, 0, 0.3)
	;
}
}