@charset "UTF-8";

/* 共通部分　*/
html {
    font-size: 100%;
    scroll-behavior: smooth; /*スクロールをスムーズに*/
}

body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", sans-serif;
    line-height: 1.7;
    color: #432;
    background-color: beige;
    text-align: center;
}

nav {
    margin: 0.5rem; /*上下余白*/
}

.main-nav {
    display:flex;
    justify-content: center;
    gap: 2.5rem;
    font-size: 1.2rem;
    list-style: none;
}

p {
    margin: 0 20px; /*左右余白*/
    margin-bottom: 0.5rem; /*下余白*/
}

img {
    max-width: 100%; 
    margin-top: 0.5rem;
}

h2 {
    margin: 0.5rem 0; /*上下余白*/
}

h3 {
    margin: 0.5rem 0; /*上下余白*/
}

.Footer {
    position: fixed; /* フッターを固定する */
    bottom: 0; /* 上部から配置の基準位置を決める */
    left: 0; /* 左から配置の基準位置を決める */
    width: 100%; /* フッターの横幅を指定する */
    height: 30px; /* フッターの高さを指定する */
    padding:5px; /* フッター内側の余白を指定する(上下左右) */
    background-color: #cf590a; /* フッターの背景色を指定する */
    color: #FFFFFF; /* フッターのフォントの色を指定する */
}

.Contents {
    width: 100%; /* コンテンツの横幅を指定する */
    overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
}

/*トップに戻るボタン関係*/

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

/*フレックス表示関係*/

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
}

.gallery-item {
    width: calc(15% - 10px); /*gapと合わせる*/
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out; /*アニメーションを滑らかに*/
}

.gallery-item img:hover {
    transform: scale(1.5); /*1.5倍に拡大*/
}

/*合作プラダン用*/

.gallery-item2 {
    width: calc(30% - 10px); /*gapと合わせる*/
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.gallery-item2 img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out; /*アニメーションを滑らかに*/
}

.gallery-item2 img:hover {
    transform: scale(1.4); /*1.4倍に拡大*/
}

/*個別プラダン・指導講師作品用*/

.gallery-item3 {
    width: calc(25% - 10px); /*gapと合わせる*/
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: visible;
}

.gallery-item3 img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease-in-out; /*アニメーションを滑らかに*/
}

.gallery-item3 img:hover {
    transform: scale(1.1); /*1.1倍に拡大*/
}

/*レスポンシブ対応*/

/*タブレット用のスタイル（画面幅が960px以下の場合に適用）*/
@media (max-width: 960px) {
    .gallery-item {
        width: calc(50% - 10px);
    }
    .gallery-item2 {
        width: calc(50% - 10px);
    }
    .gallery-item3 {
        width: calc(50% - 10px);
    }
}

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