@charset "UTF-8";





@media screen and (orientation: landscape) {
   /* 横向きの場合のスタイル */
}
@media screen and (orientation: portrait) {
   /* 縦向きの場合のスタイル */
}





/*======================  画像を画面のサイドいっぱいにする  ======================*/

img{ max-width: 100%;
     height: auto;
     width /***/:auto; }

/*--------------------------------------------------------------------------------*/





/*==================  ＜div class="class1"＞を付けてセンターへ  ==================*/

.class1 { text-align: center; }

/*--------------------------------------------------------------------------------*/





/*==============================  画面フェードイン  ==============================*/

body{ background-color:#000000;    
      background-image:url("../images/.jpg");
      background-repeat:no-repeat;
      animation: fadeIn 2s ease 0s 1 normal;
     -webkit-animation: fadeIn 2s ease 0s 1 normal;}


@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}


@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}

/*--------------------------------------------------------------------------------*/





/*====================================  背景  ====================================*/

body{ background-image: url("../images/haikei3.png");
      background-repeat: no-repeat;
      background-position:center top; }

/---------------------------------------------------------------------------------*/





/*===============================  小さいメニュー  ===============================*/

ul{ list-style-type:none; }


#smallmenu-top { margin:13px auto 0px auto;                
                 padding:15px 0px 10px 0px;                 
                 text-align: center; }


ul#smallmenu-top2 li{ display:inline;
                      margin:0px 0px 0px 0px;
                      font-size:160%;
                      padding:0px 15px 0px 15px; 
                      background-color:#;
                      color:#000000; }


a:hover{ color:#ff0000; }


a{ font-family:serif;
   font-size:100%;
   color:#000000;
   text-decoration:none; }


#waku-img{ margin:0px 0px -70px 0px; }

/*--------------------------------------------------------------------------------*/





/*==============================  タイトル上の言葉  ==============================*/

#p-1{ font-family:serif;
      text-align:center; 
      margin-top:14px;      
      color:#808080; }

/*--------------------------------------------------------------------------------*/





/*===============================  タイトルの位置  ===============================*/

.t{ margin:-8px 0px 17px 0px; }


@media screen and (max-width: 600px) {
  .t { margin:0px 0px 10px 0px; }}

/*--------------------------------------------------------------------------------*/





/*================================  見えない文字  ================================*/

h1{ font-size:0%; }
h3{ font-size:0%; }
#no-p{ font-size:0%;
       text-align:center; }

/*--------------------------------------------------------------------------------*/





/*==================================  見出し文字  ==================================*/

h2 { text-align:center;
     font-family:"Times New Roman",serif; 
     font-size:180%;
     letter-spacing:6px;
     margin:4px 0px 12px 0px; }


@media (max-width: 600px) {
     h2 { letter-spacing:0px;
          font-size:160%;
          margin:8px 0px 12px 0px;  }}

/*--------------------------------------------------------------------------------*/





/*============================  背景色透過 　説明領域  ===========================*/

p1{ font-size:110%;
    line-height:1.5;
    letter-spacing:4px;
    padding:8px 25px 30px 30px; 
    display:block;   
    text-align:left;
    color:#000000;
    background-color:rgba(255,255,255,0.7); }


a:hover { background-color:rgba(192,237,232,0.5); }


@media (max-width: 600px) {
     p1 { float: none;
          margin: 0px 0px 0px 0px;          
          max-width:90%;  }}
/*--------------------------------------------------------------------------------*/





/*=============================  説明領域をセンターに  ===========================*/

#center{ margin:-40px auto 0px auto;
         width:550px;
         max-width:90%;
         padding:0px 0px; }


@media screen and (max-width: 600px) {
  #center { padding:0px 0px 0px 0px;
            margin:-40px auto 0px auto; 
            max-width:90%; }}

/*--------------------------------------------------------------------------------*/





/*==================================  回り込み  ==================================*/

.clear{ clear:both; }


.img-edit{ float:right;
           margin:5px 23px 5px 10px; }


@media (max-width: 550px) {
     .img-edit { float: none;                  
                 margin: 0px auto 10px auto;   /*　←画像の上下位置指定　*/
                 padding:0px 0px 0px 0px; }}

/*--------------------------------------------------------------------------------*/





/*===============================  戻るボタン位置  ===============================*/

.modoru{ margin:10px 0px 100px 0px; }

/*--------------------------------------------------------------------------------*/





/*===================================  フッダー  =================================*/

#foot{ text-align:center;
       margin:40px 0px 30px 0px;
       font-style:normal;
       font-size:18px;
       color:#666633; }

/*--------------------------------------------------------------------------------*/





/*===================================  リスト  ===================================*/

.menu{ display: flex;
       justify-content:center;
       margin:-30px 0px 60px 0px; }


.menu li { list-style: none;
           width: calc(100%/1);          /*←画像を横に2つ並べる場合*/
           margin:-8px 0px 0px 0px;     /*←画像位置
           padding:0px 15px 0px 15px;      /*←画像の左右に5pxの余白を入れる場合*/
	   box-sizing:border-box;
           width:178px;
           height:auto; }


.menu li img { max-width:100%;           /*画像のはみだしを防ぐ*/
               height: auto;             /*画像の縦横比を維持 */
               border:solid 1px #ffffff; }

/*--------------------------------------------------------------------------------*/





/*============================  オンマウスで文字出現  ============================*/

figure{position:relative;
       width: 175px;}


figure img{position:relative;
           z-index: 2;}


figure h3{ font-size:0%;}


figure p{color:#ffffff;
	 position: absolute;
         bottom: 0;
         left:40px;
         z-index: 1;
         opacity: 0;
         -webkit-transition: .3s;
         transition: .3s;}


figure:hover h3{bottom: -35px;
                 opacity: 1;}


figure:hover p{bottom: -25px;
               opacity: 1;}

/*--------------------------------------------------------------------------------*/