@charset "UTF-8";

html {
    font-size: 100%;
}

body {
    color: #90dfff;
    background-image: url(../img/thumbnail8.png);
    background-size: cover;
    /* 画像を画面全体に拡大 */
    background-position: center;
    /* 中央に配置 */
    background-repeat: no-repeat;
    /* 繰り返しを防止 */
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

li {
    list-style: none;
}

a {
    color: #27359a;
}

a:hover {
    opacity: 0.7;
}

/* ロード画面 */

#loading {
    position: fixed;
    z-index: 888;
    inset: 0;
    display: grid;
    place-items: center;
    background-color: #2E5495;
}

#loading .pc {
    display: none;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

/* ロード画面 スマホ*/
@media screen and (max-width: 767px) {
    #loading {
        position: fixed;
        z-index: 888;
        inset: 0;
        display: grid;
        place-items: center;
    }

    #loading .pc {
        display: inline;
    }

    #loading .sf {
        display: none;

    }

    #loading .pc {
    display: block; /* inlineからblockへ変更して制御しやすくする */
    width: 100%;    /* 親要素の幅いっぱいに広げる */
    text-align: center;
}

    #loading .pc img {
    max-width: 90%;   /* 画面幅の90%までを上限にする */
    height: auto;     /* 縦横比を維持して自動調整 */
    display: block;
    margin: 0 auto;   /* 画像を中央に寄せる */
}


    .loaded {
        opacity: 0;
        visibility: hidden;
    }
}

/* ヘッダー */
.wrapper {
    max-width: 1000px;
    padding: 0 20px;
    margin: 0 auto;
}

#header {
    position: fixed;
    /*← fixedで固定 */
    width: 100%;
    height: 80px;
    background: rgba(28, 65, 125, 0.7);
    padding: 20px 100px;
    box-sizing: border-box;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    z-index: 777;
    /* ロゴとメニューを横並びにする */
    display: flex;
    justify-content: space-between;

}

#header .logo img {
    width: 20vw;        /* 画面幅の20% */
    max-width: 80px;   /* 最大200px */
    height: auto;       /* 縦横比維持 */
}

#header .logo a {
    display: block;
}

#header .navi {
    display: flex;
    align-items: center;
}

#header .navi li {
    font-size: 14px;
    margin-left: 20px;
}

#header .title {
    font-size: 30px;
    align-items: center;
    font-family: 'Comic Sans MS', Courier, monospace;
}

header a {
    display: block;
    text-decoration: none;
    color: white;
    margin-right: 0px;
}

a:hover {
    color: rgb(148, 255, 251);
}

/* ヘッダー スマホ*/
@media screen and (max-width: 767px) {

    .wrapper {
        max-width: 1000px;
        padding: 0 20px;
        margin: 0 auto;
    }

    #header {
        position: fixed;
        /*← fixedで固定 */
        width: 100%;
        height: 60px;
        background: rgba(28, 65, 125, 0.7);
        padding: 20px 20px;
        box-sizing: border-box;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        /* ロゴとメニューを横並びにする */
        display: flex;
        justify-content: space-between;
    }

   #header .logo img {
    width: 20vw;        /* 画面幅の20% */
    max-width: 60px;   /* 最大200px */
    height: auto;       /* 縦横比維持 */
}

    #header .logo a {
        display: block;
    }

    #header .navi {
        display: flex;
        align-items: center;
    }

    #header .navi li {
        font-size: 12px;
        margin-left: 10px;
    }

    #header .title {
        font-size: 30px;
        align-items: center;
        font-family: 'Comic Sans MS', Courier, monospace;
    }

    header a {
        display: block;
        text-decoration: none;
        color: white;
        margin-right: 0px;
    }

    a:hover {
        color: rgb(148, 255, 251);
    }
}

/* メイン */

.mainvisual {
    margin-bottom: 80px;
    margin-top: 110px;
}



/* フォーム */

#kinds,
#name,
#email,
#tel,
#requirements {
    background-color: #c8d9f3;
    width: 320px;
}

#requirements {
    height: 300px;
    margin-bottom: 20px;
}

.but {
    background-color: #90dfff;
    width: 50px;
}

#form {
    margin: 0 auto;
    padding-bottom: 30px;
}

/* エラーメッセージの文字 */
.error-text {
    color: #ff4d4d;
    font-size: 12px;
    margin-bottom: 10px;
}

/* エラー時の入力枠 */
.error-border {
    border: 2px solid #ff4d4d !important;
}

/* 要件欄をテキストエリアとして整える */
#requirements {
    display: block;
    resize: none;
    /* ユーザーが勝手にサイズを変えられないようにする */
    padding: 10px;
    box-sizing: border-box;
}

/* セクション　イラスト */

.introduction {
    text-align: center;
}

.introduction .catchphrase {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px;
}

.introduction .text {
    font-size: 14px;
}

.button1 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}

.section-title {
    text-align: center;
}

#Illustration {
    margin-bottom: 120px;
}

#select {
    display: flex;
}

.title-about {
    margin-bottom: 80px;
    text-align: center;
}

.h3about {
    background-color: rgba(216, 216, 216, 0.836);
    margin-bottom: 50px;
}

.h3-1 {
    margin-bottom: 15px;
}

.h3about {
    color: black;
}

.ai {
    color: #e91e63;
}

.scroll-inner {
    display: flex;
    flex-wrap: wrap;
    /* 折り返しを許可 */
    justify-content: center;
    gap: 10px;
}

.Illustration-item {
    width: calc(33.3% - 10px);
    /* 3枚並べる計算 */
}

.Illustration-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.button2 {
    color: #ffffff;
}


/* メインとsectionイラストスマホ */
@media screen and (max-width: 767px) {
    .mainvisual {
        margin-bottom: 30px;
        margin-top: 70px;
    }

    /* セクション　イラスト */

    .introduction {
        margin-bottom: 30px;
        text-align: center;
    }

    .introduction .catchphrase {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 0px;
    }

    .introduction .text {
        font-size: 14px;
    }


    .section-title {
        text-align: center;
    }

    .button1 {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 30px;
    }


    a {
        color: white;
    }

    .scroll-container {
        overflow: hidden;
        /* はみ出しを隠す */
        width: 100%;
    }

    .scroll-inner {
        flex-wrap: nowrap;
        /* 折り返さない */
        display: flex;
        width: max-content;
        /* 中身のサイズに合わせる */
    }

    .Illustration-item {
        width: 250px;
        /* スマホ時の1枚のサイズ */
        flex-shrink: 0;
    }

    #Illustration {
        margin-bottom: 50px;
    }

}

/* illustrationページ　選択 */

.figure {
    display: flex;
    flex-wrap: wrap;
}

.figure .list {
    width: 32%;
    margin: 0 2% 2% 0;
}

figure .list:nth-child(3n) {
    margin-right: 0;
}

a {
    color: white;
}

/* 選択 スマホ*/
@media screen and (max-width: 767px) {

    .figure {
        font-size: 14px;
        margin-bottom: 30px;
    }

    p {
        font-size: 14px;
    }

    a {
        font-size: 14px;
    }

    .figure {
        display: flex;
        flex-wrap: wrap;
    }

    .figure .list {
        width: 32%;
        margin: 0 2% 2% 0;
    }

    figure .list:nth-child(3n) {
        margin-right: 0;
    }

    a {
        color: white;
    }
}


/* フッター */

#footer {
    height: 240px;
    background: rgba(28, 65, 125, 0.7);
}

footer a {
    display: block;
    text-decoration: none;
    color: white;
    margin-right: 0px;
}

#footer .footer-menu {
    font-size: 24px;
    display: flex;
    justify-content: center;
}

#footer .footer-menu-c {
    font-size: 12px;
    text-align: center;
    margin-top: 30px;
}

#page-top {
    position: fixed;
    right: 30px;
    bottom: 50px;
    height: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 120%;
    line-height: 1.5rem;
    width: 50px;
    opacity: 0;
    transform: translateX(50px);
}

#page-top::before {
    display: block;
    position: absolute;
    top: -1px;
    left: 0px;
    width: 40px;
}


@media screen and (max-width: 767px) {
    #footer {
        font-size: 12px;
        height: 150px;
        background: rgba(28, 65, 125, 0.7);
    }

    #footer .title {
        font-size: 16px;
    }

    footer a {
        display: block;
        text-decoration: none;
        color: white;
        margin-right: 0px;
    }

    #footer .footer-menu {
        font-size: 14px;
        display: flex;
        justify-content: center;

    }

    #footer .footer-menu-c {
        text-align: center;
        margin-top: 15px;
    }


    #page-top {
        position: fixed;
        right: 30px;
        bottom: 160px;
        height: 50px;
        text-decoration: none;
        font-weight: bold;
        font-size: 120%;
        line-height: 1.5rem;
        width: 50px;
        opacity: 0;
        transform: translateX(50px);
    }

    #page-top.LeftMove {
        animation: LeftAnime 0.5s forwards;
    }

    @keyframes LeftAnime {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /*　右の動き　*/

    #page-top.RightMove {
        animation: RightAnime 0.5s forwards;
    }

    @keyframes RightAnime {
        from {
            opacity: 1;
            transform: translateX(0);
        }

        to {
            opacity: 1;
            transform: translateX(100px);
        }
    }
}


/* 依頼ページ */

.box {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    margin: 0 auto;
    color: #0000ff;
    background-color: #75baff;
}

.total {
    font-size: 1.5em;
    color: #e91e63;
    font-weight: bold;
}

select {
    margin-bottom: 10px;
    width: 100%;
    padding: 5px;
}

span {
    color: #e91e63;
}

.ru {
    margin-bottom: 30px;
}

textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: none;
    /* ユーザーが右下で手動で広げるのを禁止 */
    overflow-y: hidden;
    /* スクロールバーを隠す */
    box-sizing: border-box;
    /* パディングを含めたサイズ計算にする */
    font-size: 14px;
    line-height: 1.5;
}


@media screen and (max-width: 767px) {
    /* 作品依頼 */

    #select {
    display: block;
}

    #kinds,
    #name,
    #email,
    #tel,
    #requirements {
        background-color: #c8d9f3;
        width: 300px;
        font-size: 14px;
    }

    #requirements {
        height: 300px;
        margin-bottom: 20px;
    }

    .but {
        background-color: #90dfff;
        width: 50px;
    }

    #form {
        margin: 0 auto;
        padding-bottom: 30px;
    }




    /* 依頼 */
    .box {
        border: 1px solid #ccc;
        padding: 20px;
        border-radius: 8px;
        max-width: 400px;
        margin: 0 auto;
        color: #0000ff;
        background-color: #75baff;
    }

    .total {
        font-size: 1.5em;
        color: #e91e63;
        font-weight: bold;
    }

    select {
        margin-bottom: 10px;
        width: 100%;
        padding: 5px;
    }

    span {
        color: #e91e63;
    }

    .ru {
        margin-bottom: 30px;
    }

    textarea {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: none;
        /* ユーザーが右下で手動で広げるのを禁止 */
        overflow-y: hidden;
        /* スクロールバーを隠す */
        box-sizing: border-box;
        /* パディングを含めたサイズ計算にする */
        font-size: 14px;
        line-height: 1.5;
    }
}