@charset "utf-8";

body {
    font-family: "Noto Serif JP", serif;
    background-color: #E3F2FD;
    color: #333;
    margin: 0;
    padding: 0;
    text-align: center;
}

header {
    background-color: #2196F3;
    color: white;
    padding: 13px 20px 1px 20px;
}

header h1 {
    margin: 0;
    font-size: 2em;
}

.profile, .voice-samples, .contact {
    padding: 30px;
}

.profile img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid #2196F3;
}

.voice-samples .sample {
    margin: 20px 0;
}

.contact .email {
    display: inline-block;
    background-color: #1976D2;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

.contact .social-links a {
    display: inline-block;
    margin: 10px;
    padding: 10px;
    color: white;
    background-color: #1E88E5;
    text-decoration: none;
    border-radius: 5px;
}

footer {
    background-color: #1565C0;
    color: white;
    padding: 13px;
    margin-top: 100px;
}

.yokonaga {
    display: flex;
   justify-content: center;
   margin-bottom: 5px;
}

.logomark {
    max-width: 55px;
}

.taito {
    margin-top: 8px;
    margin-left: 12px;
    letter-spacing: 0.1em;
}

.nanimo {
    font-size: 18px;
    margin-top: 18px;
    margin-left: 20px;
}

.taito2 {
    font-size: 18px;
    color: rgb(28, 27, 27);
    text-shadow: rgb(236, 234, 228) 1px 0 10px;
    margin-top: 18px;
    margin-left: 20px;
}

.navg {
    color: rgb(241, 233, 233);
    text-shadow: rgb(249, 227, 161) 1px 0 10px;
    font-weight: bold;
}

.navg:hover {
    color: white;
    opacity: 0.6;
}

.yokonagakowake {
    display: flex;
    margin-left: 70px;
    gap: 12px;
}

.mark2 {
    max-width: 24px;
    max-height: 24px;
}

.mark3 {
    max-width: 36px;
    max-height: 36px;
    margin-top: -6px;
}

.mark2:hover,.mark3:hover {
    opacity: 0.5;
}

.yokonagakowake2 {
    margin-top: 2px;
}

.yokonaga2 {
    display: flex;
   justify-content: center;
   margin-bottom: 10px;
   background-color: #2196F3; /* 背景色をつける（透明だと下の要素と重なる） */
   padding: 12px 20px 5px 20px;
   width: 100%;
   position: static; /* 初期状態では固定しない */
   transition: all 0.3s ease-in-out; /* スムーズな動きを追加 */
}

.yokonaga2.fixed {
    position: fixed; /* スクロールしたら固定 */
    top: 0;
    left: 0;
    z-index: 1000;
}

.smal {
    font-size: 12px;
}

.saisyo {
    margin-top: 120px;
}

.saisyotaito {
    font-size: 28px;
    text-shadow: rgb(84, 198, 239) 1px 0 10px;
    display: inline-block; /* border-bottom を適用するため */
    border-bottom: 4px double #1976D2 !important; /* 下線を適用 */
    padding-bottom: 5px !important; /* テキストと下線の間に余白を作る */
}

.saisyotaito2 {
    font-size: 22px;
    margin: 32px;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #2196F3, #1976D2);
    color: white;
    font-size: 15px;
    font-weight: bold;
    padding: 17px 32px;
    border-radius: 7px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    letter-spacing: 0.1em;
    margin-top: 16px;
}

.cta-button:hover {
    background: linear-gradient(135deg, #42A5F5, #1565C0);
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.shiyou {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.shiyouki {
    margin-top: 90px;
    text-align: left;
}

.shiyoukip {
    margin-top: 20px;
    font-size: 15px;
    letter-spacing: 0.1em;
    font-weight: bold;
}

.shiyoukip2 {
    letter-spacing: 0.5em;
}

.shiyoukiplh {
    line-height: 1.4;
}


.baik1, .baik11 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}


.show1 {
    opacity: 1;
    transform: translateY(0);
}

.homeh2 {
    font-weight: bold;
    letter-spacing: 0.2em;
}

.kaseao {
    text-decoration: underline 2px rgb(145, 145, 247) !important;
    text-underline-offset: 5px !important; /* テキストと下線の間に余白を作る */
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* 全体のフォントサイズを小さめに */
        padding: 0 10px; /* 画面端の余白を確保 */
    }


    .yokonaga {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logomark {
        max-width: 50px; /* ロゴを小さめに */
    }

    .taito {
        font-size: 20px; /* タイトルのサイズを小さく */
    }

    .taito2 {
        font-size: 16px;
    }

    .nanimo {
        font-size: 14px;
        margin-top: 5px;
    }


    .yokonaga2 {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    .yokonagakowake2 p {
        font-size: 14px;
    }

    .yokonagakowake2 {
       line-height: 6px;
       letter-spacing: 0.2em;
    }

    .navg {
        display: block; /* メニューを縦並びに */
        margin: 5px 0;
    }


    .navgsn1 img {
        width: 24px;
        height: auto;
        margin: 5px;
    }

 
    .saisyo {
        margin-top: 60px;
    }

    .saisyotaito {
        font-size: 20px; /* 見出しのフォントサイズを縮小 */
        text-align: center;
    }

    .saisyotaito2 {
        font-size: 16px;
        margin: 20px;
    }

    .cta-button {
        font-size: 14px;
        padding: 12px 24px; /* ボタンのサイズ調整 */
        margin-top: 1px;
    }


    .shiyou {
        flex-direction: column;
        text-align: center;
    }

    .shiyouki {
        margin-top: 50px;
        padding: 0 10px;
    }

    .shiyoukip {
        font-size: 13px;
    }

    .homeh2 {
        font-size: 18px;
    }


    .profile img {
        width: 80%; /* 画像を小さめに */
        max-width: 150px;
    }


    .voice-samples h2 {
        font-size: 18px;
    }

    .sample p {
        font-size: 14px;
    }

    audio {
        width: 100%; /* 音声プレイヤーを画面幅に合わせる */
    }


    .contact h2 {
        font-size: 18px;
    }

    .email {
        font-size: 14px;
        padding: 8px 16px;
    }

   
    footer {
        font-size: 12px;
        padding: 8px;
    }

    .yokonagakowakeles {
        margin-top: 20px;
      padding-right: 70px;
    }

    .markles {
        margin-top: 1px;
    }
}



@media screen and (max-width: 430px) {
    body {
        font-size: 14px; /* 全体のフォントサイズを小さめに */
        padding: 0 10px; /* 画面端の余白を確保 */
    }

    
    .yokonaga {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .logomark {
        max-width: 50px; /* ロゴを小さめに */
    }

    .taito {
        font-size: 20px; /* タイトルのサイズを小さく */
    }

    .taito2 {
        font-size: 16px;
    }

    .nanimo {
        font-size: 14px;
        margin-top: 5px;
    }

    
    .yokonaga2 {
        flex-direction: column;
        align-items: center;
        padding: 4px 0;
    }

    .yokonagakowake2 p {
        font-size: 14px;
    }

    .yokonagakowake2 {
       line-height: 6px;
       letter-spacing: 0.2em;
    }

    .navg {
        display: block; /* メニューを縦並びに */
        margin: 5px 0;
    }

    
    .navgsn1 img {
        width: 24px;
        height: auto;
        margin: 5px;
    }

    
    .saisyo {
        margin-top: 60px;
    }

    .saisyotaito {
        font-size: 20px; /* 見出しのフォントサイズを縮小 */
        text-align: center;
    }

    .saisyotaito2 {
        font-size: 16px;
        margin: 20px;
    }

    .cta-button {
        font-size: 14px;
        padding: 12px 24px; /* ボタンのサイズ調整 */
    }

   
    .shiyou {
        flex-direction: column;
        text-align: center;
    }

    .shiyouki {
        margin-top: 50px;
        padding: 0 10px;
    }

    .shiyoukip {
        font-size: 13px;
    }

    .homeh2 {
        font-size: 18px;
    }

   
    .profile img {
        width: 80%; /* 画像を小さめに */
        max-width: 150px;
    }

    
    .voice-samples h2 {
        font-size: 18px;
    }

    .sample p {
        font-size: 14px;
    }

    audio {
        width: 100%; /* 音声プレイヤーを画面幅に合わせる */
    }

    
    .contact h2 {
        font-size: 18px;
    }

    .email {
        font-size: 14px;
        padding: 8px 16px;
    }

    /* ▼ フッター */
    footer {
        font-size: 12px;
        padding: 8px;
    }

    .yokonagakowakeles {
        margin-top: 20px;
      padding-right: 70px;
    }

    .markles {
        margin-top: 1px;
    }
}

.anda {
    text-decoration: underline dashed 2px rgb(145, 145, 247) !important;
    text-underline-offset: 5px !important; /* テキストと下線の間に余白を作る */
}



.works-section {
    text-align: center;
    padding: 50px 20px;
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #1565C0;
    margin-bottom: 20px;
    margin-top: 28px;
}

.intro-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 52px;
    margin-top: 20px;
}

.works-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.work-item {
    padding: 20px;
    text-align: center;
}

.work-item h2 {
    font-size: 22px;
    color: #1378cb;
    margin-bottom: 5px;
}

.work-item p {
    font-size: 20px;
    color: #343434;
    margin: 15px;
}

.work-link, .youtube-link {
    display: inline-block;
    background-color: #1976D2;
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
    transition: all 0.3s ease-in-out;
}

.work-link:hover, .youtube-link:hover {
    background-color: #1565C0;
    transform: scale(1.05);
}


.youtube-link {
    background-color: #1976D2;
    margin-left: 10px;
}

.youtube-link:hover {
    background-color: #1565C0;
}

.youtube-icon {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: -3px;
}

.hanas {
    margin-bottom: 35px;
}

.vosa {
padding: 15px;
font-size: 16px !important;
}

.boma {
    margin-top: 26px;
    margin-bottom: 50px;
}

.voima {
    margin-bottom: 14px;
}

.doma {
    margin-top: 23px;
}