@charset "utf-8";

/* スマホ向け：320px～499pxまで */


 .videobox{
    width:80%;
    max-width: 400px;
    margin:0 auto;
 } 
        
 #youtube{
  position: relative;
  width: 100%;
    margin:5px auto;
  padding-top: 56.25%;
}
#youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;}
    


@media only screen and (min-width: 10px) and (max-width:499px){
body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left
}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:underline;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    margin:0px auto;
    background-color:white;
    }
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:101%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    background-color:#dcdcdc;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 49%;
  height:50px;
  border-top: 2px solid #000;}
nav ul li:nth-child(2){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}  
nav ul li:nth-child(3){
    width:49%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(4){
    width:48%;
    height:50px;
    border-top: 2px solid #000;}
nav ul li:nth-child(5){
    width:49%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 48%;
        height:50px;
        border-top: 2px solid #000;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;
   float:left;
   margin:0 auto;
    background-color: white;}
#contents h1{
   width:100%;
   margin:0 auto;
    padding-top: 20px;
    text-align: center;}   
    
section p{
    font-size: 13px;
    }
    
/*==========================================
 アルバムスライドショー
===========================================*/    

    
    
 \#box1 {
    width:100%;
    max-width: px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    height:px;
}

#haichi{width:100%;
        margin-left: auto;
        margin-right: auto; }

    #album1 li{width:25%;float:left;}   
    
    
#haichi img{width:100%;
        margin-left: auto;
        margin-right: auto; }    
    




    
#album1 {width:100%;
        float:left;
        padding: 1%;}


#box1 section{width:100%;
              padding:2% 1%;
              float:;
              text-align:left;
              font-weight: bold;}
    
    #box1 section p#contents{font-size: 12px;
                             margin-top: 6px;}


    
  
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  


  
    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}
    
    
section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    
}



   

/* タブレット向けのレイアウトの指定：500px～960px */
@media only screen and (min-width:500px) and (max-width:960px){ 
body {
	width: 100%;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left
}

a {color:#000;
	text-decoration:none;}
a:hover {
	color:#000;
    text-decoration:underline;}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/  
header{
    margin:0px auto;
    background-color:white;}
header h1 {
	margin:0 auto 0 0;
	width:100%;
    text-align:center;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:101%;
    margin-left:auto;
    margin-right:auto;
    margin-top:10px;
    background-color:#dcdcdc;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 100%;
  border-right: 2px solid #000;
}   
 nav ul li:first-child{
  width: 33%;
  height:50px;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;}
nav ul li:nth-child(2){
    width:32%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}  
nav ul li:nth-child(3){
    width:33%;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(4){
    width:33%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(5){
    width:32%;
    height:50px;
    border-bottom: 2px solid #000;}
nav ul li:nth-child(6){
        width: 33%;
        height:50px;
        border-bottom: 2px solid #000;}        
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:100%;;
   margin:0 auto; 
    float:left;
    background-color:white;
    }  

#contents h1{
   width:100%;;
   margin:0 auto;
    padding-top:20px;
    text-align: center;}
section p{
    font-size: 13px;
    }
    
/*==========================================
 アルバムスライドショー
===========================================*/    
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 96%;
  border: 3px #fff solid;
}
    
    
 
    
       
#box1 {
    width:100%;
    max-width: px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    height:px;
}

#haichi{width:100%;
        margin-left: auto;
        margin-right: auto; }

    #album1 li{width:25%;float:left;}   
    
    
#haichi img{width:100%;
        margin-left: auto;
        margin-right: auto; }


 
footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  

    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
        
    
}



/* PC向け全画面表示レイアウトの指定：961px以上 */
@media only screen and (min-width: 961px) {

body {
	width: 1200px;
    margin:0 auto;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#000;
    background-color: #dcdcdc;
    text-align: left
}
a {
    color:#0000cd;
	text-decoration:none;
}
a:hover {
	color:#000;
    text-decoration:none;    
}
a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}
    
   
    
/*==========================================
 ヘッダーのスタイル
===========================================*/
/*logoの設定*/
header{
    background-color:white;
    }
header h1 {
	margin:0 auto 0 0;
	width:200px;
}
header h1 img {
	width:100%;
	max-width:200px;
}
header a {
    color:#000;
    text-decoration:none;}
header a:hover {
	color:#000;
    text-decoration:none;}
nav{ 
    width:100%;
    background-color: #dcdcdc;
    height:50px;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;}     
nav ul li {
  float: left;
  text-align: center;
  width: 198px;
  height:50px;
  border-right: 2px solid #000;
}    
nav ul li a{
  display:block;
  padding-top: 17px;
  padding-bottom: 20px;
  font-size: 14px;
}

nav ul li a:hover {
text-decoration: none;
background-color: whitesmoke;
}
    
#contents{
   width:1200px;
   float:left;
   margin:0px auto; 
   background-color: white;
    }   

#contents h1{
   width:100%;
   height:100%;
   margin:0px auto auto 30px;
   padding-top:20px;
   text-align: left;}
    
section p{
    font-size: 15px;
    }
    
/*==========================================
 アルバムスライドショー
===========================================*/    
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 96%;
  border: 3px #fff solid;
}
img{max-height:280px;}    
    
    

    
#box1 {
    width:100%;
    max-width: px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    height:px;
}

#haichi{width:100%;
        margin-left: auto;
        margin-right: auto; }

    #album1 li{width:25%;float:left;}   
    
    
#haichi img{width:100%;
        margin-left: auto;
        margin-right: auto; }    
    
    
 footer{ background-color: #696969;
        color:white;
        margin-top: 10px;
        padding-top:40px;
        width:100%;
        text-align:center;
        float:left;}
footer section{
        width:90%;
        margin-top: ;
        margin-left:auto;
        margin-right: auto;
    }     
footer a{ color:white;}  

    
div#footeradvertise{width:100%;
                    margin-bottom:15px;
                    margin-left:auto;
                    margin-right: auto;}
div#footeradvertise img{width:100%;}

section#footerbox{width:40%;
                  float:left;
                margin:5%} 

section#footernavi{margin-top: 250px;}    
    
    #footernivigation{margin-top: 100px;
        margin-bottom: 100px;
        width:95%;max-width: 400px; height: 130px;
        margin-left: auto;margin-right: auto;
        text-align: left;
        font-size: 10px;}
    
    #footernivigation div{width:45%;margin:10px 2.5% 0 2.5%;float:left;}
    
    

    
    

    
}