@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP');

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

h1{
font-size: 38px;
font-weight: bold; /*装飾*/
font-family: "futura" ;
}

h2{
font-size: 15px;
font-weight: 400;
}



body {
    font-family: "Montserrat", 'Noto Sans JP', sans-serif;
    background-color: white;
    color: #66678E;
    line-height: 1.6;
    margin: 0;
  background-size: contain;
  background-image: url(../img/funyapict/background.png); 
  background-repeat: repeat;
background-size: auto;
}

header {
    margin: 30px 0px 0px 0px;
    text-align: center;
    padding: 2rem 0;
    background-color: transparent;
    color: #66678E;
}


header img {
   width: 65%;
   vertical-align: top;
}



.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    padding: 50px 40px 110px 40px;
    margin: 0px 250px;
    background: rgba(255,255,255,0.5);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    border-radius: 8px;

}

.gallery-item {
    width: calc((100% - 30px) / 2);
    background-color: transparent;

}

.gallery-item img {
    width: 100%;
    height: auto;
 }


.gallery-item img {
    user-drag: none; /* ドラッグ禁止 */
    user-select: none; /* 選択禁止 */
    -webkit-user-drag: none; /* Webkitブラウザ（ChromeやSafari）向け */
    -webkit-user-select: none;
    -moz-user-select: none; /* Firefox向け */
    -ms-user-select: none; /* IE向け */
    pointer-events: none; /* 右クリックや長押し禁止 */
}


footer {
    text-align: center;
    margin: 50px 0px 30px 0px;
    padding: 2rem 0;
    background-color: transparent;
    color: #66678E;

}

.profile {     
    text-align: center;
    padding: 10px 0px 15px 0px;
    background-color: transparent;
    color: #66678E;   
}

.profile img {
   width: 25%;
}

.homeicon {     
    text-align: center;
    padding: 0px 0px 50px 0px;
    background-color: transparent;
    color: #66678E;   
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    cursor:pointer;
}

.homeicon:focus {
  outline: none;
}


.homeicon img {
   width: 8%;
}


/* ------------------------------------------------ */
/* ここからがレスポンシブ対応のメディアクエリ */
/* ------------------------------------------------ */

/* タブレット用のスタイル（画面幅が1020px以下の場合に適用） */
@media (max-width: 1020px) {
    .gallery-item {
        width: calc(50% - 20px);
    }
    .gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 20px 40px 80px 40px;
    margin: 4px 150px;

    }

.profile {     
    text-align: center;
    padding: 10px 0px 0px 0px;
    background-color: transparent;
    color: #66678E;   
}

.profile img {
   width: 30%;
}

.homeicon {     
    text-align: center;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    color: #66678E;   
}

.homeicon img {
   width: 8%;
}
}


/* スマートフォン用のスタイル（画面幅が720px以下の場合に適用） */
@media (max-width: 720px) {
    .gallery-item {
        width: 85%;
       
 }

header {
    margin: 0px 0px 0px 0px;
    text-align: center;
    padding: 2rem 0;
    background-color: transparent;
    color: #66678E;
   display: flex;
  justify-content: center;
}

header img {
   width: 90%;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 20px 20px;
    margin: 4px 55px;

    }

footer {
    text-align: center;
    padding: 2rem 0;
    background-color: transparent;
    color: #66678E;

}

.profile {     
    text-align: center;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    color: #66678E;   
}

.profile img {
   width: 60%;
}

.homeicon {     
    text-align: center;
    padding: 0px 0px 0px 0px;
    background-color: transparent;
    color: #66678E;   
}

.homeicon img {
   width: 13%;
}

}