@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; }

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





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

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


@media screen and (max-width: 600px) {
  h2 { margin:0px 0px 0px 0px;
       position:relative;
       top:-2px; }}

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





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

.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; }

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





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

p1{ font-size:110%;
    line-height:1.5;
    letter-spacing:4px;
    padding:0px 30px 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:650px;       
        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:left;
           margin:5px 30px 5px 10px; }


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

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





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

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

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





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

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

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





/*==========================  iframe Youtube レスポンシブ  =======================*/

.iframe_wrap {
     position: relative;
     padding-bottom: 75%;  /*　←iframeサイズ変更　*/
     height: 0;
     overflow: hidden;
}


.iframe_wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}


@media screen and (max-width: 600px) {
  .iframe_wrap {
    padding-bottom: 100%; }}  /*　←iframeサイズ変更　*/

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





/*==================================== テーブル　=================================*/

table.t{ max-width:100%;
         margin:0px 0px 0px 80px;
         border-collapse:separate; }


table,tr,th,td{ border-collapse:collapse;
                border:2px solid #000000;
                padding:10px;
                margin:0px 0px 0px 30px; }


caption{ text-align:left;
         font-size:150%;
         margin:30px 0px 10px -50px; }


th{ text-align:left;
    width:170px; }

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