@charset "UTF-8";

/*--- ページ全体 ---*/

body {background-color: #ffffff;}
h1 {color: #000000;}
p{font-size: 15px;}

/*--- 共通部分 --- */

html {font-size: 100%;}
body{font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
  line-height: 1.7;  color: #000000;}
  body{user-select: none;
  	-moz-user-select: none;
  	-webkit-user-select: none;
  	-ms-user-select: none;
  	}/*--- 文書のコピペ禁止 ---*/
a {text-decoration: none;} /*--- タグ傍線の指定 ---*/
img {max-width: 100%;}


/*--- ロゴとメニューの余白　---*/
.wrapper {
        max-width: 1000px; /*--- 横幅の最大 ---*/
        margin: 0 auto;
        padding: 0 4%;} /*--- スマホ向けの余白 ---*/

/*--- HEADERのロゴサイズ ---- */
.page-header {
    display: flex;
    justify-content: space-between;
}

.logo {width: 55px;　　
  　　　margin-top: 14px;} /*--- トップページ左上のロゴ ---*/

.toppage {width: 400px;　　
    　　　margin-top: 15px;} /*--- トップページ中心の画像 ---*/

/*--- メニューの並び ---*/
.main-nav {
    display: flex;
    font-size: 1.25rem;
    text-transform: uppercase;
    margin-top: 15px;
    list-style: none;}
.main-nav li {margin-left: 25px;}
.main-nav a {color: #432;}
.main-nav a:hover {color: #0bd;}  /*--- a:hoverはカーソルを合わせた時の装飾 ---*/


/*--- トップページの画像の位置 ---*/
.home-content {
            text-align: center;
            margin-top: 12%;}

      /*--- 下からフェードイン ---*/
            .fade-in-bottom {
               opacity: 0;
               animation-name: fadein-bottom;
               animation-duration: 2.0s;
               animation-delay: .3s;
               animation-timing-function: ease-out;
               animation-fill-mode: forwards;
            }
            @keyframes fadein-bottom {
               0% {
                  opacity: 0;
                  transform: translateY(20px);
               }
               100% {
                  opacity: 1;
                  transform: translateY(0);
               }
             }
             /*--- 下からフェードイン GALLERY ---*/
                   .fade-in-bottom-g {
                      opacity: 0;
                      animation-name: fadein-bottom-g;
                      animation-duration: 2.0s;
                      animation-delay: .8s;
                      animation-timing-function: ease-out;
                      animation-fill-mode: forwards;
                   }
                   @keyframes fadein-bottom-g {
                      0% {
                         opacity: 0;
                         transform: translateY(20px);
                      }
                      100% {
                         opacity: 1;
                         transform: translateY(0);
                      }
                    }



      /*左からフェードイン*/
            .fade-in-left {
              opacity: 0;
              animation-name: fadein-left;
              animation-duration: 2.0s;
              animation-timing-function: ease-out;
              animation-fill-mode: forwards
             }
              @keyframes fadein-left {
                 0% {
                  opacity: 0;
                  transform: translateX(-20px);
                 }
                 100% {
                opacity: 1;
                transform: translateX(0);
                 }
                }

      /*右からフェードイン*/
            .fade-in-right {
               opacity: 0;
               animation-name: fadein-right;
               animation-duration: 2.0s;
               animation-timing-function: ease-out;
               animation-fill-mode: forwards
            }
           @keyframes fadein-right {
             0% {
              opacity: 0;
              transform: translateX(20px);
             }
             100% {
             opacity: 1;
            transform: translateX(0);
             }
            }


        /*フェードイン（SNSアイコン）*/

        .fadein {
           opacity: 0;
           animation-name: fadein;
           animation-duration: 2.5s;
           animation-timing-function: ease-out;
           animation-fill-mode: forwards
        }
        @keyframes fadein {
         0% {
          opacity: 0;
          transform: translateX(0px);
         }
         100% {
         opacity: 1;
        transform: translateX(0);
         }
        }


/*--- ABOUT ---*/
.about {
 text-align: center;
}
.about .text {
 text-align: left;
 display: inline-block;
}
.about a {color: #432;}
.about a:hover {color: #0bd;}  /*--- a:hoverはカーソルを合わせた時の装飾 ---*/

/*--- GALLERY ---*/
.gallery{
 text-align: center;
}
.about .text {
 text-align: left;
 display: inline-block;
}
.grid {
  text-align: center;
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 6%;
  margin-bottom: 50px;
}


/*--- CONTACT ---*/


/*--- SNSアイコン --- */

          ul.sns_demo {
            margin:auto;
            max-width: 300px;
            font-size: 0;
          }
          ul.sns_demo li {
              display: inline-block;
              vertical-align: top;
              width: calc(100%/3);
              margin: 0;
          }
          ul.sns_demo li a {
              display: block;
              max-width: 120px;
              margin: 0 auto;
              position: relative;
          }
          ul.sns_demo li img.off {
              transition: 0.5s all;
              position: relative;
              z-index: 2;
          }
          ul.sns_demo li img.on {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
          }
          ul.sns_demo li a:hover img {
              opacity: 1;
          }
          ul.sns_demo li a:hover img.off {
              opacity: 0;
          }
        .conta{
         display:flex;
         text-align: center;
         }

  /*--- フッター --- */
  html {
    position: relative;
    min-height: 100%;
    padding-bottom: 100px;
    box-sizing: border-box;
  }
  footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;

    background: #fff;
    text-align: center;
    padding: 26px 0;
    margin-bottom: 20px
  }
  footer p {
      color: #000;
      font-size: 0.875rem;
      padding-top: 20px;
  }

  /* パソコンで見たときは"pc"のclassがついた画像が表示される */
  .pc { display: block !important; }
  .sp { display: none !important; }

  /* モバイル版
  ------------------------------- */
  /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
  @media only screen and (max-width: 600px) {
      .pc { display: none !important; }
      .sp { display: block !important; }
  }
  @media (max-width: 600px) {
    .toppage{
       max-width: 75%;
	     height: auto;
     }
      .page-title {
          font-size: 2.5rem;
      }
      .page-header {
        align-items: center;
        flex-direction: column;
      }

      /* HEADER */
      .main-nav {
          font-size: 0.7rem;
          padding: 0;

      }
      .main-nav li {
          margin: 0 10px;
      }
      /* HOME */
      .home-content {
          margin-top: 20%;
      }
      /* ABOUT */
      .text{
          padding: 10px;
      }

      /* GALLERY */
      .menu-content {
          margin-top: 20%;
      }
      .grid {pointer-events: none;} /*--- 画像保存禁止 ---*/

      /* CONTACT */
      #contact .page-title {
          margin-top: 40px;
      }
    }