/* CSS Document */

/* dropdown menu */
@media screen and (max-width:480px){
#header {
height: 50px;
}
#header .menu_button {
padding-top: 10px;
width: 50px;
}
#header .menu_button span {
font-size: 12px;
}
#header .menu_button span i {
font-size: 24px;
line-height: 14px;
}
main {
position: absolute;
top: 60px;
}
#footer div {
width: 96%;
margin: 0 auto;
text-align: center;
padding-top: 20px;
}
#footer div > a {
font-size: 0.75em;
}
#footer div div {
border-bottom: 1px solid #555555;
border-top: 1px solid #555555;
padding: 20px 0;
margin-top: 20px;
}
#footer div div a {
font-size: 0.7em;
display: block;
background: url(../image/silkon.gif) no-repeat top center;
background-size: 159px auto;
padding-top: 55px;
}
}
@media screen and (min-width:481px){
#footer div {
width: 96%;
max-width: 480px;
margin: 0 auto;
text-align: center;
padding-top: 40px;
}
#footer div > a {
font-size: 0.8em;
}
#footer div div {
border-bottom: 1px solid #555555;
border-top: 1px solid #555555;
padding: 30px 0;
margin-top: 30px;
text-align: left;
}
#footer div div a {
font-size: 0.6em;
display: block;
background: url(../image/silkon.gif) no-repeat left center;
background-size: 159px auto;
padding-left: 169px;
}
}
@media (min-width:481px) and (max-width:768px){
#header {
height: 70px;
}
#header .menu_button {
padding-top: 10px;
width: 60px;
}
#header .menu_button span i {
font-size: 32px;
line-height: 32px;
}
main {
position: absolute;
top: 80px;
}
}
@media screen and (max-width:768px){
#header {
background: #FFF;
width: 100%;
z-index: 1000;
position: fixed;
}
#header .menu_button {
float: right;
height: 100%;
text-align: center;
}
#header .menu_button span i {
display: block;
}
#header nav {
background: #FFF;
width: 100%;
position: absolute;
top: 100%;
}
#header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#header nav ul li:first-child {
border-top: solid 1px #161616;
}
#header nav ul li:nth-last-of-type(1) {
display: none;
}
#header nav ul li {
border-bottom: dotted 1px #161616;
}
#header nav ul li a {
display: block;
text-align: center;
padding: 1em;
}
#header nav ul li:nth-last-of-type(2) {
border-bottom: solid 1px #161616;
}
main {
position: absolute;
width: 100%;
}
}
@media screen and (min-width:769px){
header .menu_button {
display: none;
}
}

/* fade in */
.effect div, .effect h3, .effect h4, .effect ul, .effect p, .effect img {
transition: .8s;
}

body
{
background: #fff;
font-family: "Noto Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
color: #595757;
}
img {
width: 100%;
vertical-align: bottom;
}
a {
color: #727171;
text-decoration: none;
}
#header {
margin-left: auto;
margin-right: auto;
}
#mainContents {
margin: 0 auto;
}
#mainContents article div h2 {
font-weight: bold;
}
main {
display: block;
}
#goTop {
display: table;
margin-left: auto;
margin-right: auto;
border: 1px solid #595757;
border-radius: 50%; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%;
text-align: center;
background: #FFF;
}
#access {
background: #e6dfce;
width: 100%;
text-align: center;
}
#access iframe {
margin: 0 auto;
}

@media screen and (max-width:480px){
body
{
font-size: 14px;
letter-spacing: 1px;
line-height: 200%;
}
main {
padding-bottom: 20px;
}
#header h1 {
width: 40%;
padding: 10px 0 0 5px;
}
#sns {
padding: 8px 0 0 0;
}
#sns a {
margin-left: 8px;
}
#sns a i {
font-size: 30px;
line-height: 30px;
}
	
#goTop {
width: 30px;
height: 30px;
line-height: 25px;
font-size: 20px;
margin-top: 30px;
}
}
@media (min-width:481px) and (max-width:768px){
body
{
font-size: 16px;
letter-spacing: 2px;
line-height: 180%;
}
main {
padding-bottom: 40px;
}
#header h1 {
width: 40%;
padding: 6px 0 0 10px;
}
#header h1 {
width: 100%;
max-width: 416px;
height: auto;
margin: 0 auto 50px auto;
}
#sns {
padding: 15px 5px 0 0;
}
#sns a {
margin-right: 10px;
}
#sns a i {
font-size: 32px;
line-height: 32px;
}
	
#goTop {
width: 40px;
height: 40px;
line-height: 35px;
font-size: 25px;
margin-top: 40px;
}
}
@media screen and (max-width:768px){
#header h1 {
float: left;
}
#sns {
float: right;
}
#sns a:nth-of-type(1) i {
color: #305097;
}
#sns a:nth-of-type(2) i {
color: #cd201f;
}
#access {
padding: 40px 0;
}
#access h5 {
padding-bottom: 30px;
}
#access iframe {
width: 96%;
height: 300px;
}
}
@media screen and (min-width:769px){
body
{
font-size: 18px;
letter-spacing: 1px;
line-height: 150%;
}
	
main {
padding-bottom: 60px;
}
#header {
padding: 50px 0 30px;
}
#header h1 {
width: 100%;
max-width: 520px;
height: auto;
margin: 0 auto 50px auto;
}
#sns {
display: none;
}
.nav ul {
display: table;
table-layout: fixed;
width: 100%;
}
.nav ul li {
display:table-cell;
text-align: center;
}
.nav ul li a {
font-size: 0.8em;
line-height: 0.8em;
color: #231815;
}
.nav ul li a i {
padding-right: 5px;
}
.nav ul li:nth-last-of-type(1) a {
margin: 0 10px;
font-size: 1.2em;
}
	
#goTop {
width: 50px;
height: 50px;
line-height: 45px;
font-size: 30px;
margin-top: 50px;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
	
#access {
padding: 60px 0;
}
#access h5 {
padding-bottom: 40px;
}
#access iframe {
width: 768px;
height: 400px;
}
}
@media (min-width:769px) and (max-width:1024px){
#header {
width: 96%;
max-width: 800px;
}
}
@media screen and (max-width: 1024px){
#mainContents {
width: 90%;
}
}
@media screen and (min-width:1025px){
#header {
width: 800px;
}
	
a#goTop:hover {
background: #000;
color: #fff;
}
}