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

@media(max-width: 480px) {html {font-size: 11px;}}
@media(min-width: 481px) {html {font-size: 14px;}}

body{
color:#6A6A6A;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
a{
color:#6A6A6A;
transition: .6s;
text-decoration: none;
}
img{
width:100%;
height:auto;
vertical-align:bottom;
}
main{
display: block;
}

.page-top img{
width: 40px;
position: fixed;
bottom: 10px;
right: 10px;
}

.readmore,.contactus{
display: inline-block;
padding: 4px 0;
color: #fff;
background: #0071bc;
text-align: center;
transition: .6s;
font-family: 'Khand', sans-serif;
font-size: 1.2em;
}
.readmore{
width: 100%;
}
a.readmore:hover,.contactus:hover{
background: #004370;
}
#contact p{
color: #0071bc;
}

#header{
position: fixed;
top: 0;
left: 0;
z-index: 1000;
font-family: 'Khand', sans-serif;
background: #fff;
}
#header h1 img{
display: block;
}
a#kumamon {
display: block;
}

footer{
background: #0071bc;
padding: 20px 0;
}
footer a{
color: #fff;
}


/*横幅480px以下*/
@media screen and (max-width:480px){
}
/*横幅481px以上*/
@media screen and (min-width:481px){
}
/*横幅481px〜768px*/
@media (min-width:481px) and (max-width:768px){
}

/*横幅768px以下*/
@media screen and (max-width:768px){
#contact{
width: 80%;
margin: 40px auto;
padding: 10% 5%;
border: 1px solid #0071bc;
}
#contact h2{
text-align: center;
}
#contact p{
margin: 20px 0;
}
.contactus{
width: 100%;
}

footer h4{
width: 90%;
margin: 0 auto;
font-size: 1.6em;
color: #fff;
}
footer ul{
width: 90%;
margin: 0 auto;
}
footer a{
display: block;
margin-top: 10px;
}
footer a::before{
content: ">";
margin-right: 4px;
}
}

/*横幅769px以上*/
@media screen and (min-width:769px){
#contact{
width: 100%;
background: url("../images/contact.jpg") center top;
background-size: cover;
border-top: 3px solid #0071bc;
padding: 100px 0;
text-align: center;
}
#contact p{
margin: 30px 0;
}
.contactus{
width: 300px;
}
	
footer h4{
display: none;
}
footer ul{
text-align: center;
}
footer ul li{
display: inline-block;
}
footer a{
padding: 0 20px;
border-right: 1px solid #fff;
}
footer li:last-child a{
border-right: none;
}
}

/*横幅769px〜1024px*/
@media (min-width:769px) and (max-width:1024px){
}

/*横幅1024px以下*/
@media screen and (max-width:1024px){
/*header*/
#header{
width: 100%;
height: 55px;
}
#header h1{
position: absolute;
top: 50%;
left: 15px;
-ms-transform: translateY(-50%);
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
}
#header h1 img{
width: auto;
height: 35px;
}
.menu-nav{
position: fixed;
display: grid;
place-items: center;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
transition: all .5s;
visibility: hidden;
opacity: 0;
}
.menu-nav > div {
display: table;
}
.menu-nav ul{
padding-bottom: 30px;
}
a#kumamon {
width: 60%;
max-width: 120px;
margin: 0 auto;
}
.menu-nav li{
width: 300px;
height: 40px;
line-height: 40px;
margin: 0 auto;
text-align: center;
}
.menu-nav li a{
display: block;
font-size: 16px;
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu-nav{
-webkit-transition: all .5s;
transition: all .5s;
visibility: visible;
opacity: 1;
}
#jsBtn{
width: 20px;
height: 25px;
cursor: pointer;
position: absolute;
right: 15px;
top: 18px;
}
#jsBtn div {position:relative} 
#jsBtn span {
display:block;
position:absolute; 
width:100%;
border-bottom:solid 3px #aa917d;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
z-index: 999;
}
#jsBtn span:nth-child(1) {top:0}
#jsBtn span:nth-child(2) {top:8px}
#jsBtn span:nth-child(3) {top:16px}
/* #nav-toggle 切り替えアニメーション */
.open #jsBtn span:nth-child(1){
top: 11px;
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
}
.open #jsBtn span:nth-child(2){
width: 0;
left: 50%;
}
.open #jsBtn span:nth-child(3){
top: 11px;
-webkit-transform: rotate(-315deg);
-moz-transform: rotate(-315deg);
transform: rotate(-315deg);
}
#header p{
display: none;
}
p.copyRight{
text-align: center;
font-size: 0.8em;
padding: 6px 0;
}
}

/*横幅1025px以上*/
@media screen and (min-width:1025px){
#contentsRight{
width: auto;
width: calc(100% - 200px);
margin: 0 0 0 200px;
height: 100%;
}
/*header*/
#header{
width: 200px;
height: 100%;
border-right: 1px solid #eee;
}
#header h1 img{
width:140px;
margin: 30px auto;
}
#jsBtn{
display: none;
}
#header nav{
margin-left: 30px;
}
#header nav li{
margin-bottom: 16px;
}
#header nav a{
font-size: 1.2em;
}
#header p{
position: absolute;
bottom: 10px;
left: 36px;
}
#header p small{
font-size: 0.8em;
}
#header nav li a{
display: block;
width: 100%;
position: relative;
}
#header nav li a:hover{
color: #0071bc;
}
#header nav li a::after{
position: absolute;
top: 7px;
right: 30px;
color: #0071bc;
font-family: "Font Awesome 5 Free";
font-size: 0.4em;
font-weight: 900;
content: "\f111";
display: none;
}
#header nav li a:hover::after{
display: block;
}
a#kumamon {
width: 80%;
margin-top: 20px;
}

p.copyRight{
display: none;
}
}