@charset "UTF-8";
body {
font-family: 'Inter', 'Noto Sans JP', sans-serif;
    background-color: #ffffff;
    color: #333;
    font-size: 16px;
    letter-spacing: 0.1rem;
    line-height: 24px;
}
.main-content-wrapper {
    max-width: 1280px;
    margin: 0 auto; /* 中央寄せ */
    /* これがヘッダーなどの他の要素を中央に配置している親要素です */
}
/*---------- メインコンテンツ部分 ----------*/

.howto-header{
    text-align: center;
    margin-bottom: 20px;
}
.howto-header img{
    width: 100%;
    height: auto;
}

.cachcopy{
    font-size: 22px;
    color: #4D4D4D;
    line-height: 45px;
    letter-spacing: 0.1em;
    margin: 50px auto 20px;
}

.howto-content-wrapper{
    text-align: center;
    margin-bottom: 70px;
}

h2{
    font-weight: 600;
    font-size: 32px;
    letter-spacing: 0.1em;
    margin-top: 40px;
}
h1{
    font-weight: 600;
    font-size: 38px;
    letter-spacing: 0.1em;
    color:#4D4D4D;
}
h3{
    font-size: 24px;
    font-weight: bold;
}

span{
    font-size: 18px;
    font-weight: bold;
}
.howto-text{
    line-height: 24px;
}

.howto-add{
    font-size: 14px;
    line-height: 20px;
    color: #e4183a;
}




/*---------- ヘッダー ----------*/
/* PC版のCSS領域 (メディアクエリの外側) */
.header-inner{
   background-color: #ffffff;
   padding: 15px;
   
}


/*---------- フッター ----------*/
footer{
    background-color: #8fd3f5;
    text-align: center;
    padding: 20px 0;
    font-size: 16px;
    color: #000000;
}


/* ======================================= */
/* TOPへ戻るボタンのスタイル */
/* ======================================= */
#page-top-btn {
    position: fixed; /* 画面に固定する */
    bottom: 80px;    /* 画面下から20pxの位置 */
    right: 20px;     /* 画面右から20pxの位置 */
    
    /* 初期状態: 透明で非表示 */
    opacity: 0;
    visibility: hidden;
    
    /* デザイン */
    background-color: #b7b7b7; /* 背景色 */
    color: #fff;            /* 文字色（白） */
    text-decoration: none;  /* 下線を消す */
    width: 80px;            /* ボタンの幅 */
    height: 80px;           /* ボタンの高さ */
    line-height: 80px;      /* テキストを垂直中央に */
    text-align: center;     /* テキストを水平中央に */
    border-radius: 50%;     /* 丸い形にする */
    z-index: 1000;          /* 最前面に表示 */
    
    /* アニメーションを滑らかにする */
    transition: opacity 0.3s, visibility 0.3s;
}

/* JavaScriptで付与する表示状態のクラス */
#page-top-btn.is-show {
    opacity: 1;      /* 不透明にして表示 */
    visibility: visible;
}

/*---------- 矢印スクロールアニメーション ----------*/
/* 親要素のコンテナ設定 */
.scroll-prompt-container {
    position: relative;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 50px;
    overflow: hidden;
    height: 120px;
}

.scroll-arrow-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* アニメーションを適用 */
    animation: svg-move-loop 2.5s infinite ease-in-out;
}

/* SVGの線の色を制御（デフォルトの黒を適用） */
.scroll-arrow-svg svg path {
    stroke: #8fd3f5;
    stroke-linecap: round;
    /* stroke-dasharrayとoffsetを使って、線の描画アニメーションを可能にする */
    stroke-dasharray: 55; 
    stroke-dashoffset: 55; /* 初期状態で線を非表示にする */
    transition: opacity 0.3s;
}
/* SVG全体を上下に移動させ、透明度を変化させるアニメーション */
@keyframes svg-move-loop {
    /* 0%: 画面外上部から透明で出現 */
    0% {
        opacity: 0;
        transform: translate(-50%, -150%); /* 上に大きく移動 */
    }
    
    /* 20%~60%: 定位置に降りてきて、実体化 */
    20% {
        opacity: 1;
        transform: translate(-50%, -50%); /* 中央定位置 */
    }

    60% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /* 90%~100%: 下に移動し、透明になって消える */
    90% {
        opacity: 0;
        transform: translate(-50%, 50%); /* 下に移動 */
    }
    
    /* 100%: 次のループのためにリセット */
    100% {
        opacity: 0;
        transform: translate(-50%, -150%);
    }
}
/* 線の描画アニメーション */
@keyframes draw-arrow {
    0% { stroke-dashoffset: 20; } /* 線を完全に非表示 */
    100% { stroke-dashoffset: 0; } /* 線を完全に描画 */
}

/* 描画アニメーションの実行を制御するクラス */
.scroll-arrow-svg {
    /* ... 既存のスタイル ... */
    animation: svg-move-loop 2.5s infinite ease-in-out;
}

.scroll-arrow-svg svg path {
    /* ... 既存のスタイル ... */
    animation: draw-arrow 0.5s forwards 0.5s; /* 描画を遅延(0.5s)させ、一度だけ実行(forwards) */
}




/* ---画像並べ--- */
/* 1. 全体を制御するコンテナ */
.item-grid-container {
    width: 90%;
       margin: 50px auto; /* 中央寄せ */
    display: flex;       /* Flexboxを有効にして子要素を横並びに */
    flex-wrap: wrap;     /* 1行に収まらない場合は次の行に折り返す */
    justify-content: space-between; /* 両端揃え（3つ並びの時は均等配置） */
}

/* 2. 各アイテムの幅設定 */
.grid-item {
    /* 1280px 幅で3つ並べるため、約33.33%の幅を設定 */
    width: calc(100% / 3 - 30px); /* 隙間（マージン）のために少し引く */
    margin-bottom: 50px; 
    
    /* 画像とテキストを縦に並べる設定 */
    display: flex;
    flex-direction: column; 
    align-items: center; /* 中央寄せ */
}

.item-image img{
    width: 100%;
    margin: 5px auto 10px;
}


/* --- 段ごとにずらし --- */
/*  2つ目のアイテムをずらす (斜めに配置する) */
.item-grid-container .grid-item:nth-child(2) {
    margin-top: 50px; 
}

.item-grid-container .grid-item:nth-child(3) {
    margin-top: 100px; 
}

.item-grid-container .grid-item:nth-child(4) {
    margin-top: 50px; 
}

.item-grid-container .grid-item:nth-child(5) {
    margin-top: 100px;
}
.item-grid-container .grid-item:nth-child(6) {
    margin-top: 150px; 
}

.item-grid-container .grid-item:nth-child(7){
    margin-top: 50px; 
}
.item-grid-container .grid-item:nth-child(8){
    margin-top: 100px; 
}
.item-grid-container .grid-item:nth-child(9){
    margin-top: 150px; 
}


/*---------- モバイル対応 ----------*/

@media (max-width: 767px) {

.sp{
    display: none;
}

    .main-content-wrapper {
        width: 100%; /* 画面幅いっぱいに広げる */
        padding: 0 40px; /* 左右に少し余白を追加 */
        box-sizing: border-box; /* パディングを含めて幅を計算 */
    }

#page-top-btn {
    bottom: 60px;
}

/* --- 段戻し --- */
.item-grid-container .grid-item:nth-child(2) {
    margin-top: 0px; 
}

.item-grid-container .grid-item:nth-child(3) {
    margin-top: 0px; 
}

.item-grid-container .grid-item:nth-child(4) {
    margin-top: 0px; 
}

.item-grid-container .grid-item:nth-child(5) {
    margin-top: 0px;
}
.item-grid-container .grid-item:nth-child(6) {
    margin-top: 0px; 
}

.item-grid-container .grid-item:nth-child(7){
    margin-top: 0px; 
}
.item-grid-container .grid-item:nth-child(8){
    margin-top: 0px; 
}
.item-grid-container .grid-item:nth-child(9){
    margin-top: 0px; 
}
    


/* 1. ベースフォントサイズ */
    body {
        /* 全体の基準フォントを小さくする */
        font-size: 14px; 
    }
    .cachcopy{
    font-size: 16px;
    line-height: 30px;
letter-spacing: 0.05em;}
    
    h1{
        font-size: 30px; 
        margin: 10px;
    }
    h2{        
        font-size: 18px; 
margin-top:30px;

    }
.howto-add{
 font-size: 12px;
}
    .cachcopy{
        font-size: 14px;
        text-align: left;
        margin-top: 30px;
    }

    .item-grid-container{
        width: 100%;
        display: block;
        justify-content: center;
        margin: 0px auto; 
    }
.grid-item {
width: 100%;
margin: 80px auto;
}

.howto-footer{
    margin-bottom: 110px;
}

.scroll-prompt-container{
    padding-top: 0;
    padding-bottom: 0;
    height: 60px;
}



 footer{
    padding: 10px 0;
    font-size: 12px;
    }


}