@font-face {
    font-family: 'LINESeedJP-Bd';
    src: url('../fonts/LINESeedJP_TTF_Bd.eot'); /* IE9用 */
    src: url('../fonts/LINESeedJP_TTF_Bd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8用 */
         url('../fonts/LINESeedJP_TTF_Bd.woff2') format('woff2'), /* 最新ブラウザ用 */
         url('../fonts/LINESeedJP_TTF_Bd.woff') format('woff'), /* モダンブラウザ用 */
         url('../fonts/LINESeedJP_OTF_Bd.woff2') format('woff2'), /* 最新ブラウザ用 */
         url('../fonts/LINESeedJP_OTF_Bd.woff') format('woff'); /* モダンブラウザ用 */
}

@font-face {
    font-family: 'LINESeedJP-Rg';
    src: url('../fonts/LINESeedJP_TTF_Rg.eot'); /* IE9用 */
    src: url('../fonts/LINESeedJP_TTF_Rg.eot?#iefix') format('embedded-opentype'), /* IE6-IE8用 */
         url('../fonts/LINESeedJP_OTF_Rg.woff2') format('woff2'), /* 最新ブラウザ用 */
         url('../fonts/LINESeedJP_OTF_Rg.woff') format('woff'); /* モダンブラウザ用 */
}

@font-face {
    font-family: 'LINESeedJP-Th';
    src: url('../fonts/LINESeedJP_TTF_Th.eot'); /* IE9用 */
    src: url('../fonts/LINESeedJP_TTF_Th.eot?#iefix') format('embedded-opentype'), /* IE6-IE8用 */
         url('../fonts/LINESeedJP_OTF_Th.woff2') format('woff2'), /* 最新ブラウザ用 */
         url('../fonts/LINESeedJP_OTF_Th.woff') format('woff'); /* モダンブラウザ用 */
}

@font-face {
    font-family: 'LINESeedJP-Eb';
    src: url('../fonts/LINESeedJP_OTF_Eb.woff2') format('woff2'), /* 最新ブラウザ用 */
         url('../fonts/LINESeedJP_OTF_Eb.woff') format('woff'); /* モダンブラウザ用 */
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
    opacity: 0;
    background-color: #F8F6F4; /* 背景色を設定 */
}

body.fade-in {
    opacity: 1;
    animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
	background-color: #F8F6F4; /* 背景色を設定 */
}

.person {
    margin-top: 11%; /* 元の位置に戻します */
    text-align: center;
    margin-bottom: 28%;
}

.person img {
    width: 100%; /* 画像のサイズを元に戻します */
    max-width: 1086px;
    height: auto;
}

@keyframes fadeInChar {
    from {
        opacity: 0;
        line-height: 2.6; /* 追加 */
    }
    to {
        opacity: 1;
        line-height: 2.6; /* 追加 */
    }
}

[data-text-wrap] {
    display: inline-block;
}

[data-text-inner] {
    display: inline-block;
    opacity: 0;
    background: transparent;
    animation-fill-mode: forwards;
    margin-right: 0; /* マージンをリセット */
    margin-left: 0; /* マージンをリセット */
    padding-top: 0; /* パディングをリセット */
    padding-bottom: 0; /* パディングをリセット */
    line-height: 2.6; /* 追加 */
    white-space: nowrap; /* 追加 */
}

.about p {
    display: inline-block;
    font-size: 1.2em;
    flex-direction: column;
    font-family: 'LINESeedJP-Rg', sans-serif;
    writing-mode: vertical-rl;
    text-align: start; /* 上揃え */
    line-height: 2.85; /* line-heightを2.7に設定 */
    letter-spacing: 0.27em;
    white-space: nowrap; /* 追加 */
}

/* スマホ用スタイル */
@media (max-width: 767px) {
    .container {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .logo {
        text-align: center;
        margin-top: 14%;
    }

    .logo img {
        width: 27%;
        max-width: 130px;
        height: auto;
    }

    .about {
        text-align: center;
        margin-top: 14%;
        opacity: 1;
    }

    .about p {
        font-size: 1.2em;
    }

    .about p br {
        display: block;
        margin-bottom: 1em;
    }

    .person {
        margin-top: 11%;
        text-align: center;
        margin-bottom: 28%;
    }

    .person img {
        width: 53%;
        max-width: 1086px;
        height: auto;
    }
}

/* PC用スタイル */
@media (min-width: 1025px) {
    .container {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .logo {

        text-align: center;
        margin-top: 7%;
    }

    .logo img {
        width: 40%;
        max-width: 130px;
        height: auto;
    }

    .about {
        text-align: center;
        margin-top: 6%;
        opacity: 1;
    }

    .about p {
        font-size: 1.3em;
    }

    .about p br {
        display: block;
        margin-bottom: 1em;
    }

    .person {
        margin-top: 5%;
        text-align: center;
        margin-bottom: 28%;
    }

    .person img {
        width: 25%;
        max-width: 1086px;
        height: auto;
    }
}

/* タブレット用スタイル */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 100%;
        max-width: 1080px;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .logo {
        text-align: center;
        margin-top: 12%;
    }

    .logo img {
        width: 40%;
        max-width: 150px;
        height: auto;
    }

    .about {
        text-align: center;
        margin-top: 12%;
        opacity: 1;
    }

    .about p {
        font-size: 1.9em;
    }

    .about p br {
        display: block;
        margin-bottom: 1em;
    }

    .person {
        margin-top: 9%;
        text-align: center;
        margin-bottom: 28%;
    }

    .person img {
        width: 45%;
        max-width: 1086px;
        height: auto;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

body.fade-out {
    animation: fadeOut 1s ease-out;
    opacity: 0;
}