body {
    font-family: 'M PLUS 1', Arial, sans-serif; /* M PLUS 1フォントを適用 */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* 横スクロールを防止 */
    background-color: #fff;
    background-image: url('../img/cloud.png'), url('../img/cloud.png'); /* 背景に雲の画像を追加 */
    background-position: -20px top, calc(100% + 20px) top;/* 左右の上に配置 */
    background-repeat: no-repeat; /* 繰り返しなし */
    background-size: 220px; /* サイズを小さく */
    animation: moveClouds 30s linear infinite; /* アニメーションを適用 */
}
@keyframes moveClouds {
    0% {
        background-position: -220px top, calc(100% + 220px) top; /* 初期位置 */
    }
    100% {
        background-position: calc(100% + 220px) top, -220px top; /* 終了位置 */
    }
}
.back_to_top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* 初期状態では非表示 */
    background-color: #FFA500;
    color: #fff;
    border: none;
    border-radius: 50%; /* 丸くする */
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: opacity 0.3s ease;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 1000; 
}

.back_to_top::before {
    content: "";
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 6px;
    transform: rotate(-135deg); /* 矢印の角度を調整 */
    -webkit-transform: rotate(-135deg); /* 矢印の角度を調整 */
    margin-top: 6px; /* 矢印の位置を下に調整 */
}

.back_to_top:hover {
    background-color: #e69500;
}
.main_content {
    margin-bottom: 80px;
    padding-top: 50px;
}
h1 {
    font-size: 16px; /* テキストサイズを小さく */
    margin: 0 20px;
}
h2 {
    font-size: 36px; /* フォントサイズを統一 */
}
h3 {
    font-size: 24px; /* フォントサイズを統一 */
}
p {
    font-size: 16px; /* フォントサイズを小さく */
    line-height: 1.6; /* 行間を広げる */
}
.top_annotation {
    padding:  10px 20px;
    text-align: left;
    font-size: 12px; /* フォントサイズを小さく */
    margin: 10px 20px; /* 上下に余白を追加 */
    line-height: 1.6; /* 行間を1.6に設定 */
}
.feature_annotation {
    padding: 10px 0 0;
    text-align: left;
    font-size: 12px; /* フォントサイズを小さく */
    margin: 5px 20px 0; /* 上下に余白を追加 */
    line-height: 1.6; /* 行間を1.6に設定 */
}
.step_annotation, .pc_annotation, .sp_annotation {
    display: none; /* デフォルトでは非表示 */
}

.annotation {
    text-align: left;
    padding: 10px 0;
    font-size: 12px; /* フォントサイズを小さく */
    line-height: 1.6; /* 行間を1.6に設定 */
}
.important_text {
    font-size: 16px; /* 特定の段落のフォントサイズを統一 */
    line-height: 1.6; /* 行間を1.6に設定 */

}
/* スラッシュの装飾 */
.decorated {
    position: relative;
    display: inline-block;
    clear: both; /* 回り込みを解除 */
}

.decorated::before,
.decorated::after {
    content: "/";
    color: #FFA500; /* オレンジ色に設定 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.decorated::before {
    left: -20px; /* 左側のスラッシュの位置 */
}

.decorated::after {
    right: -20px; /* 右側のスラッシュの位置 */
}
/* デフォルトではdecor_imageを非表示にする */
.decor_image {
    display: none;
}

.main_visual {
    display: flex;
    align-items: center;         /* 垂直方向も中央揃え */
    justify-content: center;     /* 水平方向を中央揃え */
    gap: 40px;                   /* テキストと画像の間隔（お好みで調整） */
}

.main_visual .text,
.main_visual .image {
    flex-shrink: 0;              /* 要素の縮小を防ぐ（必要に応じて） */
}

.main_visual .image img {
    height: auto; /* 高さを自動に設定 */
    max-width: 400px; 
    margin: 20px 0; /* 上下に20pxの余白を追加 */
}
.main_visual .text {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    min-width: 300px; /* 最小幅を設定 */
    align-items: center; /* パソコンの時に中央寄せ */
}

.main_visual .text a.cta_button {
    width: 230px; /* ボタンの幅を指定 */
    text-align: center; /* テキストを中央揃え */
    display: inline-block;
    padding: 8px 20px 10px;
    margin: 10px 0; /* 上下の余白を調整 */
    background-color: #FFA500; /* オレンジ色 */
    color: #fff;
    text-decoration: none;
    border-radius: 25px; /* 丸みを帯びたボタン */
    transition: transform 0.3s ease, background-color 0.3s ease; /* アニメーションの設定 */
}
.main_visual .text a.cta_button:hover {
    background-color: #e69500; /* ホバー時の色 */
    transform: scale(1.1); /* マウスオーバーで少し大きくする */
}
.main_visual .text img {
    width: 300px; /* ロゴの幅を小さく */
    height: auto; /* アスペクト比を維持 */
}

.full_width_image {
    display: block;
    max-width: 70%;
    height: auto;
    margin: -20px auto 20px auto;
}

.rounded_video {
    display: block;
    max-width: 40%;
    height: auto;
    border: 2px solid #ccc; /* グレーのフチ */
    border-radius: 10px; /* 角丸 */
    margin-top: 10px; /* 上に余白を追加 */
}

#site_description {
    background-color: #FFF2D5; /* 背景色を追加 */
}
.site_description_wrapper {
    background-color: #FFF2D5;
    padding: 50px 40px; /* 上下の余白を追加 */
}

.site_description {
    padding: 20px 40px 40px;
    border-radius: 5px; /* 角を少し丸める（任意） */
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    width: 100%; /* 幅を100%に設定 */
    text-align: center; /* 中央寄せ */
    margin: 0 auto; /* 中央寄せ */
    background-color: #fff; /* 白い背景を追加 */
}

.features_title {
padding: 40px 40px 10px;
    display: flex;
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap;
    text-align: center; /* テキストを中央揃え */
}

.features {
    padding: 0 40px 80px;
    display: flex;
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap;
    text-align: center; /* テキストを中央揃え */
    max-width: 1200px;
    margin: 0 auto;
}

.features h2 {
    text-align: center; /* 中央寄せ */
    clear: both; /* 回り込みを解除 */
    width: 100%; /* 幅を100%に設定してブロック要素にする */
    margin: 0 auto; /* 中央寄せ */
}

.feature {
    flex: 0 0 calc(33.333% - 20px); /* 3つを1ブロックとして表示 */
    box-sizing: border-box;
}
.shape_13_container {
    display: flex;
    justify-content: center; /* 中央寄せ */
    margin: -46px 0; /* 上下の余白を調整して背景色の変わり目に配置 */
    z-index: 1; /* 必要に応じて重なり順を調整 */
}

.shape_13 {
    width: 90px;
    height: auto;
    margin: 5px 0;
}
.shape_04_container, .shape_18_container {
    display: inline-block;
    vertical-align: middle;
}

.shape_04_container,.shape_07_container,.shape_07_container {
    float: left;
    margin: -46px 30px;
}
.shape_12_container {
    position: relative; /* 追加 */
    float: left;
    margin: 20px 40px 0;
    z-index: 10; /* フッターより上に重ねるためにz-indexを設定 */
}

.shape_18_container,.shape_03_container {
    float: right;
    margin: -46px 30px;
}
.step {
    display: flex;
    align-items: center;
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap; /* レスポンシブ対応 */
    background-color: #fff; /* 背景色を白に設定 */
    border-radius: 10px; /* 角を丸める */
    padding: 30px;
    margin: 20px auto 40px auto;
    max-width: 1200px;
}

.step_text {
    text-align: left; /* テキストを左揃え */
    width:50%;
}
@media (min-width: 768px) {
    .step_text {
    margin-right: 20px
}
}
.step_text h3 {
    margin-top: 0; /* 上の余白を削除 */
    margin-bottom: 10px; /* 下の余白を調整 */
}

.step_number {
    font-size: 3em; /* フォントサイズを大きくする */
    font-weight: bold; /* 太字にする */

    margin-bottom: 5px; /* 下に余白を追加 */
    margin-top: 0; /* 上の余白を削除 */
    color: #FFA500; /* オレンジ色に設定 */
}
.desktop_text {
    display: none; /* デフォルトでは非表示 */
}

.mobile_text {
    display: block; /* デフォルトでは表示 */
}
.company_info {
    padding: 20px;
    margin: 20px;
    color:black;
}



.faq {
    padding: 0 40px; /* 左右に40pxの余白を追加 */
    margin: 20px 0; /* 上下に20pxの余白を追加 */
    text-align: center; /* テキストを中央揃え */
}
.faq_container {
    border: 2px solid gray; /* グレーの実線 */
    border-radius: 10px; /* 角丸 */
    padding: 0 20px 20px; /* 内側の余白 */
    background-color: #FFF2D5; /* 背景色をイエローに設定 */
    max-width: 1200px; /* 最大幅を1200pxに設定 */
    margin: 0 auto; /* 中央寄せ */
}
.faq_item h3 {
    position: relative;
    padding-bottom: 10px; /* 下に余白を追加 */
    margin-bottom: 20px; /* 下に余白を追加 */
}

.faq_item h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: gray; /* グレーの実線 */
}
.faq_item p {
    text-align: left;
}
.company_info h2 {
    margin-top: 0;
}
.more_link {
    display: block;
    text-align: center;
    color: black; /* テキストの色を黒に設定 */
    text-decoration: none; /* アンダーラインをなくす */
    margin: 20px; /* 余白を追加 */
    transition: color 0.3s ease; /* 色の変化にアニメーションを追加 */
    text-underline-offset: 4px; /* 下線をテキストから4px離す */
}

.more_link:hover {
    color: #FFA500; /* ホバー時の色をオレンジに設定 */
    text-decoration: underline; /* ホバー時にアンダーラインを追加 */
}


footer {
    background-color:#FFF2D5;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: relative;
    width: 100%;
    bottom: 0;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
    z-index: 1; 
}
footer .company_info a {
    text-underline-offset: 4px; /* 下線をテキストから4px離す */
    color: black; /* テキスト色 */
}

footer .company_info a:hover {
    color: #ccc; /* ホバー時の色を設定（任意） */
}

.shape_09_container {
    position: absolute;
    top: 2%;
    left: 43%;
    display: none; /* デフォルトでは非表示 */
}

.shape_11_container {
    position: absolute;
    top: 40%;
    right: 6%;
    display: none; /* デフォルトでは非表示 */
}
.shape_02_container {
    position: absolute;
    left: 7%;
}
.shape_02 {
    width: 90px; /* 画像の幅を設定 */
    height: auto; /* 高さを自動調整 */
}
.shape_01_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0; /* 上下に余白を追加 */
}

.shape_01_wrapper {
    display: none; /* デフォルトでは非表示 */
}

.shape_01 {
    width: 120px; /* 画像の幅を大きく設定 */
    height: auto; /* 高さを自動調整 */
}

.important_text {
    text-align: center; /* テキストを中央揃え */
    margin: 0; 
}

@media (min-width: 1024px) {
    .main_visual .text {
        transform: scale(1.2); /* サイズを1.2倍に拡大 */
        text-align: center; /* 必要に応じて中央揃え */
    }
    .shape_01_wrapper {
        display: block; /* パソコンの時だけ表示 */
    }
    .desktop_text {
        display: block; /* デスクトップで表示 */
    }
    .mobile_text {
        display: none; /* デスクトップで非表示 */
    } 
}
@media (min-width: 1200px) {
    .main_visual {
        gap: 150px; /* PCの広い画面では間隔を広げる */
        max-width: 1200px; /* 必要なら中央寄せ範囲を制限 */
        margin: 0 auto;
    }
}
/* デフォルトでは改行を非表示にする */
    .desktop_br {
    display: none;
}
    .sp_br {
    display: inline;
}
/* デフォルトではビデオ両方非表示 */
.desktop_video, .mobile_video {
    display: none; 
} 

/* PC版ではdesktop_brを表示 */
@media (min-width: 769px) {
    .desktop_br {
        display: inline;
    }
    .sp_br {
        display: none;
    }
    .desktop_video {
        display: block;
        width: 400px;
    }
    .decor_image {
        display: inline;
        width: 20px; /* 装飾画像の幅を設定 */
        height: auto; /* 高さを自動に設定 */
        vertical-align: middle; /* テキストの中央に揃える */
        margin: 0 5px; /* テキストとの間に余白を追加 */
    }
    .pc_annotation {
        display: block; /* PCの時だけ表示 */
        text-align: left;
        padding: 10px 0;
        font-size: 12px; /* フォントサイズを小さく */
        line-height: 1.6; /* 行間を1.6に設定 */
    }
    .shape_09_container, .shape_11_container {
        display: block; /* パソコンの時だけ表示 */
    }
    .decorated::before {
        left: -40px; /* 左側のスラッシュの位置 */
    }
    
    .decorated::after {
        right: -40px; /* 右側のスラッシュの位置 */
    }
    .faq_container {
        padding: 0 40px 20px; /* 左右のパディングを調整 */
    }
}
@media (max-width: 800px) {
    .shape_09_container {
        display: none; /* 800px以下で非表示 */
    }
}
/* -------------------------
SP版
---------------------------- */
/* 幅が768px以下の場合は縦に一つずつ表示 */
@media (max-width: 768px) {
    body {
        margin: 10px 0 0; /* 小さい画面では余白を減らす */
    }
    h2 {
        font-size: 24px; /* フォントサイズを統一 */
    }
    h3 {
        font-size: 20px; /* フォントサイズを統一 */
    }
    p {
        font-size: 14px; /* スマホの場合の本文の文字サイズを14pxに設定 */
    }
    .main_visual {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;
    }

    .main_visual .text,
    .main_visual .image {
        margin-bottom: 20px; /* 下に余白を追加 */
    }

    .main_visual .text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding: 20px 0;
    }

    .main_visual .image {
        order: 1; /* 画像を1番目に表示 */
    }

    .main_visual .text a.cta_button {
        order: 2; /* ボタンを2番目に表示 */
        margin: 20px auto;
    }

    .full_width_image {
        display: block;
        max-width: 100%;
        height: auto;
        margin: -20px auto 20px auto;
    }
    .mobile_video {
        display: block;
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    .features {
        flex-direction : column;
        align-items: center; /* 中央寄せ */
    }

    .feature {
        flex: 1 0 100%; /* 幅を100%に設定 */
        margin: 10px 0;
    }
    .features_title {
        padding: 40px 40px 0;
    }
    .features h2 {
        text-align: center; /* 中央寄せ */
    }
    .shape_02, .shape_03, .shape_04, .shape_07, .shape_12, .shape_13, .shape_18{
        width: 50px; /* 画像の幅を設定 */
        height: auto; /* 高さを自動調整 */
        margin: 20px 0;
    }
    .shape_02_container{
        position: absolute;
        left: 7%;
    }
    .step {
        display: flex;
        align-items: center;
        justify-content: center; /* 中央寄せ */
        flex-wrap: wrap;
        margin-bottom: 30px;
        padding-top: 20px;
    }
    
    .step .step_text, .step .step_image {
        flex: 1;
        width: 50%; /* 横幅を50%に設定 */
        min-width: 200px;
        box-sizing: border-box;
        text-align: center;
    }
    .step .step_image img {
        width: 100%; /* 画像の横幅を100%に設定 */
        height: auto; /* 高さを自動に設定 */
    }
    .sp_annotation {
        display: block; /* SP版の時だけ表示 */
        text-align: left;
        padding-bottom: 10px;
        font-size: 12px; /* フォントサイズを小さく */
        line-height: 1.6; /* 行間を1.6に設定 */
    }
    /* スマホ版でpresent_img.pngをsp_present_img.pngに変更 */
    .feature img[src="common/img/present_img.png"] {
        content: url("../img/sp_present_img.png");
    }
    .step_annotation {
        display: block; /* スマホのときだけ表示 */
        padding: 10px 20px;
        text-align: left;
        font-size: 12px; /* フォントサイズを小さく */
        margin: 20px; /* 上下に余白を追加 */
        line-height: 1.6; /* 行間を1.6に設定 */
    }
@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.main_visual .image img {
    width: auto; /* 幅を自動に設定 */
    height: auto; /* 高さを自動に設定 */
    max-width: 300px; 
    margin: 20px 0; /* 上下に20pxの余白を追加 */
    animation: slideInFromRight 1s cubic-bezier(0.25, 0.8, 0.25, 1); /* アニメーションのイージングを変更 */
}
}



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

.animated_text {
    white-space: nowrap; /* テキストを改行させない */
    margin: 0;
}

.animated_text span {
    opacity: 0;
    display: inline-block;
    animation: fadeIn 0.5s forwards;
}

.animated_text .superscript {
    font-size: 12px; /* フォントサイズを12pxに設定 */
    vertical-align: super; /* 上付き文字の位置を調整 */
}