@charset "utf-8";

/* =======================================
    セクション: 基本構造・タイトル
    ==================================== */

/* タイトル見出し (h3) */
.inner .page_title h3 {
    padding: 0.25em 0.5em;
    color: var(--character-color);
    background: transparent;
    border-left: solid 5px var(--main-color);
    text-align: left;
    /* margin-left: 30px; */
    margin-top: 50px;
    margin-bottom: 1.5em;
}

.inner .page_title h3:first-of-type {
    margin-top: 0;
}


/* 10/7追加 */
.category_wrap {
    display: flex;
    flex-wrap: wrap; /* 折り返し有効 */
    gap: 8px 5px;
    flex-grow: 1;
    min-width: 50%;
    margin-right: 10px;
}
.date_wrap {
    /* コンテンツの幅を維持 */
    flex-grow: 0;
    /* 要素が縮まないようにする */
    flex-shrink: 0;
}

/* 作品情報（カテゴリと日付） */
.work_info {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    color: var(--character-color);
    font-size: 0.9rem; /* モバイルサイズ */
    /* min-height: 80px; */
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 768px) {
    .work_info {
        font-size: 1.8rem; /* PCサイズ */
    }
}

/* カテゴリ "コース名" のスタイル */
.work_category {
    font-size: 1.5rem;
    padding: 7px 8px;
    border: 1px solid var(--character-color);
    border-radius: 4px;
    background-color: var(--base-color);
    color: var(--character-color);
}
@media  (min-width: 768px) {
    .work_category {
        padding: 10px 8px;
    }
}

/* 日付 */
.work_date {
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
}
@media (min-width: 768px) {
.work_date{
    font-size: 1.8rem;
}
}

/* p説明文のスタイル */
.inner .page_title p {
    line-height: 1.6;
    text-align: left;
    margin-left: 20px;
    margin-bottom: 0.8em;
}

.inner .page_title h3+h3 {
    margin-top: 3em;
}

.inner .page_title p:last-of-type {
    margin-bottom: 50px;
}

/* 作品タイトル */
h2.page_title {
    text-align: center;
    margin-bottom: 40px;
}

/* 【共通スタイル】2つのブロックの幅と中央寄せ */
.work_award_section,
.page_title {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* --- */

/* =======================================
    セクション: TOP画像・受賞バッジ
    ==================================== */

/* top画像レイアウト */
.detail_content_img_wrap {
    display: flex;
    justify-content: center;
    width: auto;
    max-width: 720px;
    height: auto;
    margin: 20px auto;
    position: relative;
    /* --- 額縁 --- (共通) */
    border-top: 20px solid #B37D4D;
    border-right: 20px solid #B37D4D;
    border-bottom: 20px solid #D2AE7E;
    border-left: 20px solid #D2AE7E;
    box-shadow: inset 0 0 10px #000;
}

.detail_content_img_wrap img:first-of-type {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    box-shadow: none;
    position: relative;
    z-index: -1;
}

/* 受賞バッジの位置 */
.award-badge {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 25%;
    height: auto;
    z-index: 10;
}
@media (min-width: 768px) {
    .award-badge {
        top: -6%;
        right: -6%;
        width: 23.6%;
    }
}

.page-content p {
    line-height: 1.8;
    margin-bottom: 2.5em;
}


/* =======================================
    セクション: 受賞歴
    ==================================== */

/* 【受賞歴ブロック専用】 */
.work_award_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: visible;
    margin-top: 50px;
}
@media (min-width: 768px) {
    .work_award_section {
        margin-top: 65px;
    }
}

/* 受賞歴セクションの文字サイズ調整 */
.work_award_section p {
    font-size: 1.8rem; /* モバイルサイズ */
    font-weight: bold;
    color: var(--character-color);
    line-height: 1.6;
    margin-top: 2em;
    margin-bottom: 5em;
    border-bottom: 2px dashed var(--character-color);
    text-align: center;
    position: relative;
    display: inline-block;
    /* padding:0 50px; */
}
@media (min-width: 768px) {
    .work_award_section p {
        font-size: 2.5rem; /* PCサイズ */
    }
}


/* リボンデザイン */
.sub_title_ribbon {
    display: inline-block;
    position: relative;
    padding: 15px 60px;
    font-size: 1.8rem; /* モバイルサイズ */
    font-family: "Kiwi Maru", serif;
    color: var(--character-color);
    background: var(--main-color);
    margin-bottom: 20px;
    align-self: flex-start;
    /* margin-left: 10%; */
}
@media (min-width: 768px) {
    .sub_title_ribbon {
        padding: 15px 100px;
        font-size: 2.5rem; /* PCサイズ */
    }
}

.sub_title_ribbon::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px var(--main-shadow);
}

/* 受賞歴テキストにアイコンを追加 */
.work_award_section p::after {
    content: '';
    position: absolute;
    bottom: -70px;
    right: 20px;
    width: 55px;
    height: 55px;
    background-image: url('../img/robo_happy.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(13deg);
}

/* --- */

/* =======================================
    セクション: ページネーション
    ==================================== */

.pagination {
    display: flex;
    justify-content: space-evenly;
    padding-top: 20px; /* モバイルサイズ */
    padding-bottom: 40px; /* モバイルサイズ */
}
@media (min-width: 768px) {
    .pagination {
        padding-top: 32px;
        padding-bottom: 64px;
    }
}
@media (min-width: 1280px) {
    .pagination {
        padding-top: 40px;
        padding-bottom: 80px;
    }
}

/* 前へ次へボタン */
.pagination_back,
.pagination_next {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* 前へボタンに＜*/
.pagination_back::before {
    content: '<';
    transform: translateY(-0.125em);
}

/* 次へボタンに＞ */
.pagination_next::after {
    content: '>';
    transform: translateY(-0.125em);
}

/* --- */

/* =======================================
    セクション: ギャラリー（ジグザグ）
    ==================================== */

/* ギャラリー画像（ジグザグ配置） */
.work_gallery_zigzag {
    margin-top: 8em;
    margin-bottom: 80px;
}

.work_gallery_item_zigzag {
    width: 80%;
    margin-bottom: 30px;
}

.work_gallery_item_zigzag img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 720px;
    height: auto;
    margin: 0 auto;
}

/* 左寄せ */
.work_gallery_item_zigzag.left {
    margin-left: 0;
    margin-right: auto;
}

/* 右寄せ */
.work_gallery_item_zigzag.right {
    margin-left: auto;
    margin-right: 0;
}



/* 権利表記 */
.rights_notation{
    display: block;
    margin-left: auto;
    margin-right: 0;
    width: 80%;
}
.rights_notation p {
    text-align: right;
    margin: 0;
}


/* =======================================
    セクション: 制作者情報
    ==================================== */

/* 制作者情報（個人ごとのブロック） */
.author_about {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    margin-left: 0;
}


/* 制作者名 */
.authoress_name {
    color: var(--character-color);
    margin-bottom: 0;
}


/* 2つ目以降の制作者ブロックの上マージンを調整 */
.author_about + .author_about {
    margin-top: 5px;
}







/* =======================================
    セクション: 受講生の作品 (コース作品と他の作品)
    ==================================== */

/* 受講生の作品コンテナ */
.others_work {
    position: relative;
    margin: 170px 30px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 3px solid var(--main-color) ;
    border-radius: 20px ;
    /* padding: 25px 20px 80px; */
    text-align: center;
}
@media (min-width: 768px) {
    .others_work {
        margin: 120px 64px; /* PCサイズ */
    }
}

.others_work_inner{
    width: 100%;
    max-width: 100%;
    margin: -57px auto 0;
    padding: 0 18px;
}

/* タブレット */
@media  (min-width: 768px) {
    .others_work_inner{
        padding: 0 64px;
        margin: -75px auto 0;
    }
}

/* pc */
@media  (min-width: 1280px) {
    .others_work_inner {
        padding: 0 90px;
        margin: -85px auto 0;
    }
}

/* タイトルリボン */
.others_work_title {
    display: inline-block;
    position: relative;
    padding: 10px 30px;
    font-size: 1.5rem;
    font-family: "Kiwi Maru", serif;
    color: var(--character-color);
    background: var(--main-color);
    white-space: normal;
    margin-bottom: 50px;
}
@media (min-width: 768px) {
    .others_work_title {
        font-size: 2.5rem;
        padding: 15px 80px;
        white-space: nowrap;
    }
}

.others_work_title::after {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 15px transparent;
    border-right: solid 20px var(--main-shadow);
}

/* 作品リストの全体ラッパー */
.others_work_wrap {
    /* モバイル：縦積み（他の作品リストとグリッドエリアで使われるスタイルを併記） */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    /* padding: 0 20px;
    margin: 40px auto 30px; */
}


/* --- 他の受講生の作品リスト（ul） --- */

.others_work_wrap ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: center; /* モバイルは中央寄せ */
    gap: 20px;
}
@media (min-width: 768px) {
    .others_work_wrap ul {
        gap: 40px;
        padding-top: 30px;

        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .media_list a{
        margin: 0 auto;
    }
}
@media (min-width: 1280px) {
    .others_work_wrap ul {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}



.others_work_photo {
    /* 画像の下にカテゴリーを配置（順序を逆転） */
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    /* モバイル版で1列表示にする */
    flex-basis: 100%;
    max-width: none;
    min-width: auto;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .others_work_photo {
        flex-basis: calc(33.33% - 14px);
    }
}

/* カテゴリー名 */
.others_work_category{
    display: inline-block;
    font-size: 1rem;
    padding: 5px 10px;
    margin-top: 10px;
    margin-bottom: 0;
    border: 1px solid var(--character-color);
    border-radius: 4px;
    color:var(--character-color);
}
@media (min-width: 768px) {
.others_work_category{
    padding: 2px 10px;
}
}


/* カテゴリーのラップ（高さ決め） */
.others_work_category_wrap{
    height: 50px;
}

/* 画像 */

/* バッヂ用のwrap */
.others_work_img_wrap{
    position: relative;
    width: 100%;
    height: 100%;
}

.others_work_photo img {
    width: 100%;
    height: auto;
    display: block;
    max-width: 300px;
    object-fit: cover;
    aspect-ratio: 16/9;
    object-position: top;

}
@media (min-width: 768px) {
    .others_work_photo img {
        max-width: none;
    }
}


/*----------------------------------------
    受賞バッヂ（作品ページのみ）
----------------------------------------*/
.others_work_img_wrap::after {
    /* 基本は表示にする */
    content: '';
    position: absolute;
    top: -8.5px;
    right: 4px;
    z-index: 10;

    /* バッジのサイズ */
    width: 40px;
    height: 40px;
    background-image: url('../img/works_award_badge_tag.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    .others_work_img_wrap::after {
    width: 40px;
    height: 40px;
    top: -8px;
    right: -6px;
}
}


/* もっと見るボタン */
.works_more_btn {
    width: 100%;
    max-width: 270px;
    min-width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    /* margin: 0 auto; */
    /*ボタン位置調整のため、修正 By Hara*/
    margin: 50px auto;
    border: solid 1px var(--character-color);
    box-shadow: 3px 3px 0px var(--character-color);
    border-radius: 12px;
    padding: 13px 15px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
@media (min-width: 768px) {
    .works_more_btn {
        width: 300px;
        max-width: 300px;
        font-size: 1.6rem;
    }
}

.works_more_btn:hover {
    transform: translate(3px, 3px);
    box-shadow: 0px 0px 0px var(--character-color);
    background-color: var(--accent-green);
}

.works_more_btn::after{
    content: ">";
    margin-left: 10px;
    transform: translateY(-0.125em);
}