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


/* CSSリセット

--------------------------------------------------------------------------------------------------------------------------------------------- */
* {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

body,div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, img
{
 margin: 0;
 padding: 0;
}

ul li {
	list-style: none;
}

fieldset, img{
 border: 0;
}

abbr, acronym{
 border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var{
 font-style: normal;
 font-weight: normal;
}

strong {
font-weight: bold;
}

h1, h2, h3, h4, h5, h6{
 font-size: 1.0em;
 font-weight: normal;
}

a{
	color:#222;
	text-decoration:none;
	transition-duration: 0.3s;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
}
a:hover{ color:#92682c;}

a:hover img {
opacity: 0.8;
filter: alpha(opacity=80);
-ms-filter: "alpha(opacity=80)";
}


/* clearfix hack */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    font-size: 0;
	line-height:0; 
    visibility: hidden;
}

.clearfix {
	display: inline-table;
	min-height: 1%;
}
/*
.clearfix {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	min-height: 1%;
}
*/
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


body {
	font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, YuGothic, 'Noto Sans Japanese', "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "メイリオ", Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.8;
  color: #222;
}

/* for IE6 */
* html body { font-size: 88%; }
/* for IE7 */
*:first-child+html body { font-size: 88%; }
/*
各pxに対応する、IEハックで指定するパーセントの値
12px	75%
13px	82%
14px	88%
15px	94%
16px	100%
*/

/**********************************************
共通
**********************************************/
p {
margin-bottom: 0.6em;
}

.content {
width: 1000px;
margin: 0px auto;
padding-bottom: 30px;
}

.content2 {
width: 100%;
background-color: #e3e3e3;
}

.tx_c {
text-align: center;
}

.tx_l {
text-align: left;
}

.tx_r {
text-align: right;
}

h3 {
    width: 100%;
    padding: 5px;
    font-size: 1.2em;
    font-weight: bold;
    border-bottom: 2px solid #92682C;
	margin-bottom: 1em;
}

.m_5 {
margin: 5px;
}

/**********************************************
header
**********************************************/

.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 150px;
}

.button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 60px auto 0 ;
  }

.button i {
font-size: 1.3em;
padding: 8px 15px;
font-style: normal;
}

#jp_logo {
width: 280px;
height: 280px;
}

.h_img {
width: 100%;
height: 200px;
}

#h_img_top {
    height: 450px;
    background-image: url(../img/h_img_top.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-clip: padding-box;
    background-position: 0% bottom;}


/**********************************************
footer
**********************************************/

footer {
background-color: #e3e3e3;
width: 100%;
padding: 20px;
}

footer .content img {
float: left;
margin-right: 25px;
}

footer .content p {
width: 300px;
float: left;
margin-right: 15px;
}

footer .content iframe {
width: 450px;
height: 200px;
float: left;
}

footer bold {
font-size: 1.8em;
font-weight: bold;
}

#copy {
font-size: 0.8em;
text-align: center;
}



@media screen and (max-width:800px) {

body {
font-size: 14px;
  line-height: 1.6;
}

.header {
  height: 50px;
}

.button {
display: none
}

.h_img {
height: 150px;
}

#h_img_top {
    height: 150px;
    background-size: 100% auto;
}

#jp_logo {
width: 100px;
height: 100px;
}

#jp_logo img {
width: 100px;
height: 100px;
}


.content {
width: 100%;
padding: 0 5% 30px;
}

.content h2 img {
width: 120%;
height: auto;
margin-left: -5%;
}

footer {
width: 100%;
padding: 3px;
text-align: center;
}
footer .content img {
float: none;
margin-right: 0;
}

footer .content p {
width: 100%;
float: none;
margin-right: 0;
}

footer .content iframe {
width: 100%;
height: 200px;
float: none;
}


}