/* =========================
   基本設定
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {

    background-color: rgb(19,19,19);

    color:white;

    font-family:
    "Noto Sans JP",
    sans-serif;

}


a {

    color:inherit;

}



/* =========================
   ロゴ
========================= */

.logo img {

    height:80px;

    width:auto;

    display:block;

}



/* =========================
   Header
========================= */


header {

    display:flex;

    align-items:center;

    padding:8px 40px;

    background:#1d1c1c;

    color:white;

}



nav {

    margin-left:auto;

}



nav a {

    color:white;

    text-decoration:none;

    font-size:18px;

    margin-left:40px;

    transition:.2s;

}



nav a:hover {

    color:#60a5fa;

}



/* PCではハンバーガー非表示 */

.menu-button {

    display:none;

}





/* =========================
   Main
========================= */


main {

    padding:40px;

}





/* =========================
   共通ページ
========================= */


.page {

    max-width:1000px;

    margin:40px auto;

    padding:0 120px 0 160px;

}



.page a {

    color:#989b9d;

    text-decoration:underline;

    transition:.2s;

}



.page a:hover {

    color:#5c5b5b;

}



.page p {

    font-size:15px;

    font-weight:400;

    line-height:1.8;

}



.page h1 {

    font-size:42px;

    margin-bottom:15px;

}



.page h2 {

    font-size:30px;

    margin-bottom:15px;

}



.page h3 {

    font-size:18px;

    margin-bottom:15px;

}



.page ul {

    padding-left:20px;

}





/* =========================
   Google Formカード
========================= */


.bookmark-card {

    display:flex;

    width:800px;

    max-width:100%;


    border:1px solid #d9d9d9;

    border-radius:12px;


    overflow:hidden;


    text-decoration:none;

    color:white;


    background:#242424;


    margin-top:30px;


    transition:.2s;

}



.bookmark-card:hover {

    transform:translateY(-2px);

    box-shadow:
    0 8px 20px rgba(0,0,0,.2);

}



.bookmark-text {

    flex:4;

    padding:15px;

}



.bookmark-text h3 {

    font-size:22px;

    margin-bottom:5px;

}



.bookmark-text p {

    font-size:15px;

    line-height:1.4;

}



.bookmark-image {

    flex:1;

}



.bookmark-image img {

    width:100%;

    height:140px;

    object-fit:cover;

}





/* =========================
   メンバー表示
========================= */


.member {

    display:flex;

    gap:40px;

    margin-bottom:10px;

}



.role {

    width:150px;

    font-weight:bold;

}





/* =========================
   YouTube動画
========================= */


.video-container {

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}



.video-container iframe {

    flex:1;

    min-width:350px;

    aspect-ratio:16/9;

    border:none;

}





.youtube-videos {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}



.youtube-videos iframe {

    width:100%;

    aspect-ratio:16/9;

    border:none;

    border-radius:10px;

}





/* =========================
   YouTubeアカウントカード
========================= */


.link-card {

    display:flex;

    width:900px;

    max-width:100%;


    border:1px solid #444;

    border-radius:12px;


    overflow:hidden;


    text-decoration:none;

    color:white;


    background:#242424;


    margin-top:30px;


    transition:.2s;

}



.link-card:hover {

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(0,0,0,.25);

}



.link-text {

    flex:4;

    padding:18px;

}



.link-text h3 {

    font-size:22px;

    margin-bottom:8px;

}



.link-text p {

    color:#c8c8c8;

    line-height:1.5;

}



.link-url {

    display:flex;

    align-items:center;

    gap:8px;

    color:#999;

    font-size:14px;

}



.link-url img {

    width:18px;

    height:18px;

}



.link-image {

    flex:1;

}



.link-image img {

    width:100%;

    height:100%;

    object-fit:cover;

}





/* =========================
   メニューカード
========================= */


.menu-box {

    max-width:900px;

    margin:40px auto;


    background:#2b2b2b;


    border-radius:12px;


    overflow:hidden;

}



.menu-item {

    display:block;


    padding:20px 24px;


    color:white;


    text-decoration:none;


    font-size:22px;


    border-bottom:1px solid #444;


    transition:.2s;

}



.menu-item:last-child {

    border-bottom:none;

}



.menu-item:hover {

    background:#383838;

}





/* =========================
   SNS
========================= */


.sns-links {

    display:flex;

    gap:25px;

    align-items:center;

}



.sns-links img {

    width:40px;

    height:40px;


    filter:
    brightness(0)
    invert(1);


    transition:.2s;

}



.sns-links img:hover {

    transform:translateY(-3px);

    opacity:.7;

}





/* =========================
   Worksページ
========================= */


.works {

    max-width:1400px;

    margin:40px auto;

}




/* =========================
   Timeline
========================= */


.timeline-item {

    display:flex;

    gap:30px;

}



.timeline .date {

    width:150px;

}


/* =========================
   iPad、スマホ
========================= */


@media screen and (max-width:1024px) {



/* =========================
   Header
========================= */


header {

    flex-direction:row;

    justify-content:space-between;

    align-items:center;


    padding:10px 25px;

}



.logo img {

    height:60px;

}




/* =========================
   ハンバーガーボタン
========================= */


.menu-button {

    display:block;


    width:42px;

    height:42px;


    background:none;

    border:none;


    cursor:pointer;


    z-index:1100;

}



.menu-button span {


    display:block;


    width:32px;


    height:3px;


    background:white;


    margin:7px auto;


    transition:.3s;


}




/* ☰ → × */

.menu-button.active span:nth-child(1){

    transform:
    translateY(10px)
    rotate(45deg);

}


.menu-button.active span:nth-child(2){

    opacity:0;

}



.menu-button.active span:nth-child(3){

    transform:
    translateY(-10px)
    rotate(-45deg);

}






/* =========================
   ナビゲーション
========================= */


nav {


    position:fixed;


    top:0;


    right:-320px;


    width:300px;


    height:100vh;



    background:#1d1c1c;



    display:flex;


    flex-direction:column;



    padding-top:100px;



    transition:.35s;



    z-index:1000;


}



nav.active {


    right:0;


}



nav a {


    width:100%;


    margin:0;


    padding:22px 10px;


    text-align:center;


    font-size:18px;


}





/* =========================
   背景暗転
========================= */


.menu-overlay {


    position:fixed;


    inset:0;



    background:
    rgba(0,0,0,.65);



    opacity:0;


    pointer-events:none;



    transition:.35s;



    z-index:999;


}



.menu-overlay.active {


    opacity:1;


    pointer-events:auto;


}






/* =========================
   Main
========================= */


main {


    padding:25px;


}





/* =========================
   共通ページ
========================= */


.page {


    padding:0 30px;


    margin:30px auto;


}



.page h1 {


    font-size:36px;


}



.page h2 {


    font-size:26px;


}



.page h3 {


    font-size:17px;


}



.page p {


    font-size:14px;


}






/* =========================
   Googleフォーム
========================= */


.bookmark-card {


    width:100%;


}



.bookmark-text {


    padding:14px;


}



.bookmark-text h3 {


    font-size:20px;


}



.bookmark-text p {


    font-size:14px;


}



.bookmark-image {


    width:35%;


}



.bookmark-image img {


    height:100%;


    min-height:120px;


}






/* =========================
   メンバー
========================= */


.member {


    gap:20px;


}



.role {


    width:130px;


}







/* =========================
   動画
========================= */


.video-container {


    flex-direction:column;


}



.video-container iframe {


    min-width:100%;


    width:100%;


}






/* =========================
   YouTubeカード
   PCと同じ右画像表示
========================= */


.link-card {


    flex-direction:row;


    width:100%;


}



.link-text {


    flex:4;


    padding:14px;


}



.link-text h3 {


    font-size:18px;


}



.link-text p {


    font-size:13px;


}



.link-url {


    font-size:11px;


}



.link-image {


    flex:1;


    width:auto;


    height:auto;


}



.link-image img {


    height:100%;


    object-fit:cover;


}






/* =========================
   メニューカード
========================= */


.menu-box {


    width:100%;


}



.menu-item {


    font-size:18px;


    padding:18px;


}






/* =========================
   SNS
========================= */


.sns-links {


    justify-content:center;


}



.sns-links img {


    width:35px;


    height:35px;


}







/* =========================
   YouTube 3列動画
========================= */


.youtube-videos {


    grid-template-columns:1fr;


    gap:20px;


}






/* =========================
   Timeline
========================= */


.timeline-item {


    flex-direction:column;


    gap:8px;


}



.timeline .date {


    width:auto;


}



}





/* =========================
   小型スマホ
   500px以下
========================= */


@media screen and (max-width:500px) {



header {


    padding:10px 15px;


}



.logo img {


    height:50px;


}



nav {


    width:260px;


}



.page {


    padding:0 15px;


}



.page h1 {


    font-size:30px;


}



.link-card {


    min-height:120px;


}



.link-image {


    width:35%;


}



.link-text {


    padding:12px;


}



.link-text h3 {


    font-size:16px;


}



.link-text p {


    font-size:12px;


}



.link-url {


    display:none;


}



.bookmark-image {


    width:40%;


}



}