@charset "UTF-8";
/* CSS Document */


/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:top;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

a { text-decoration: none;}
ul, li { list-style: none;}
img { max-width: 100%; height: auto; }
body, h1, h2, h3, h4 { font-weight: normal; }

/*font*/
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 100%; }

/*clearfix*/
.clearfix { zoom: 1; }
.clearfix:after { content: ""; display: block; clear: both; }

/*image hover*/
a img {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
a:hover img {
	opacity: 0.3;
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
}


/* header ━━━━━━━━━━━━━━━ */

#header {
}

/* site_title */
.site_title {
	padding: 0 20px;
	font-size: 1.5em;
	line-height: 50px;
	height: 50px;
	letter-spacing: 0.1em;
	display: inline;
}
.site_title a { color:#000; }
.site_title a:hover { color:#ccc; }
@media only screen and (max-width: 480px) {
	.site_title { font-size: 1.3em; }
}

/* nav_main ━━━━━━━━━━━━━━━ */

/* pc style */

#menu { float: right; margin: 0 10px 0 0; }
#menu li {
	display: block;
	float: left;
	margin: 0 15px;
	padding: 0;
 }
#menu li a {
  display: block;
  padding: 0;
  color: #000;
  font-size: 0.9em;
  line-height: 50px;
  height: 50px;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
}
#menu li a:hover{ color: #ccc; }
#toggle{ display: none; }
@media only screen and (max-width: 900px) { #menu li { margin: 0 5px; } #menu li a { font-size: 0.75em; } }

/* mobile style */

@media only screen and (max-width: 640px) {
#header { padding: 0; }
#menu { display: none; float: none; margin: 0; }
#menu li {
	width: 100%;
	border-bottom: solid 1px #000;
	margin: 0; padding: 0;
}
#menu li a { font-size: 0.85em; color: #fff; background: #333; }
#menu li a:hover { background: #000; }
#toggle {
	margin: 12px 20px 0 0;
	float: right;
	display: block;
	position: relative;
	width: 25px; height: 25px;
}
#toggle a {
	position: relative;
	width: 25px; height: 22px;
	display: block;
	background: #000;
}
#toggle a:before, #toggle a:after {
	width: 25px; height: 8px;
	display: block;
	background: #fff;
	content: "";
	position: absolute;
}
#toggle a:before { top: 2px; left: 0; }
#toggle a:after { top: 12px; left: 0; }
}

/* contents ━━━━━━━━━━━━━━━ */

.test_box {
	background: #f0f0f0;
	margin: 0 auto; padding: 150px 0;
	max-width: 960px;
	}

/* footer ━━━━━━━━━━━━━━━ */

#footer {
	margin: 50px 0 0 0;
	padding: 50px 0 200px 0;
	background: #f0f0f0;
	text-align: center;
}
.to_top {
	margin: 0 0 60px 0;
	text-align: center;
	font-size: 0.5em;
	display: block;
}
.to_top a {
	color: #000;
	position: relative;
}
.to_top a:before, .to_top a:after {
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -10px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	background: #ccc;
}
.to_top a:after { top: 0; background: #f0f0f0; }
.to_top a:hover:before { background: #999; }
.footer_copyright {
	color: #666;
	font-size: 0.5em;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
}

/* layout ━━━━━━━━━━━━━━━ */

/* wide */
.wide_all { width: 100% }
.wide_center {
	margin: 0 auto;
	padding: 0 20px;
	max-width: 900px;
	display: block;
}
/* share */
.share { display: table; width: 100%; table-layout: fixed; }
.share section { display: table-cell; }
.share_space { width: 20px; }
@media only screen and (max-width: 640px) {
	.share, .share section { display: block; }
	.share_space { display: none; }
}
/* space */
.space_top { margin: 20px 0 0 0; }
.space_bottom { margin: 0 0 20px 0; }

/* copy ━━━━━━━━━━━━━━━ */

.title01 {
	margin: 0 0 15px 0;
	color: #000;
	font-size: 1em;
	line-height: 180%;
}
.copy01 {
	margin: 0 0 20px 0;
	color: #000;
	font-size: 0.75em;
	line-height: 220%;
	text-align: justify;
}
@media only screen and (max-width: 640px) {
	.title01 { font-size: 1.2em; }
	.copy01 { font-size: 0.85em; }
}

/* link ━━━━━━━━━━━━━━━ */

.link_more { }
.link_more a {
	color: #fff;
	background: #999;
	font-size: 0.85em;
	line-height: 3em;
	height: 3em;
	padding: 0 15px;
	display: block;
	position: relative;
}
.link_more a, .link_more a:before, .link_more a:after  {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.link_more a:hover { background: #ccc; }
.link_more a:before, .link_more a:after {
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	right: 15px;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	background: #fff;
}
.link_more a:after { right: 20px; background: #999; }
.link_more a:hover:after { background: #ccc; }

.link_button { text-align: center; padding: 20px 0; }
.link_button a {
	display: inline-block;
	padding: 0 20px;
	font-size: 0.8em;
	height: 3em;
	line-height: 3em;
	color: #767676;
	/*background: #666;*/
	border: solid 1px #767676;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.link_button a:hover { color: #fff; background: #333; }

.iframe-content {
    position: relative;
    width: 100%;
    padding: 56.25% 0 0 0;
}
.iframe-content iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.image_box {
	margin: 0 0 1px 0;
	padding: 20px 0;
	background: #000;
}
.image_title {
	padding: 20px 0;
	color: #767676;
	font-size: 1.5em;
	text-align: center;
}
.image_title02 {
	padding: 20px 0;
	color: #767676;
	font-size: 0.8em;
	text-align: center;
}

/*youtube*/
.youtube { position: relative; width: 100%; padding-top: 56.25%; }
.youtube iframe {
  position: absolute; top: 0; right: 0;
  width: 100% !important; height: 100% !important;
}