@charset "UTF-8";

/* すべてのhtmlで参照 */

/* 画像は視認性の問題がなければmax-width:700～800pxで統一 */



/* ★ レスポンシブ用 */

.main-pad-2 {
    padding: 0 2%;
}

.main-pad-3 {
    padding: 0 3%;
}



/* ★ フェードインのJavaScript用 */

/* 初期状態（透明＋少し下に移動） */
.item {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* スクロールで表示されたら適用 */
.item.show {
    opacity: 1;
    transform: translateY(0);
}



/* ★ ヒーロー画像＆テキスト用 */

.hero {
    text-align: center;
    text-shadow: 1px 0 10px #989898;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 100px 0;
    font-size: 40px;
    width: 100%;
}

/* トップページへ戻るボタン */
/* ボタン全体 */
.fa-angles-up{
    color: #ffffff;
    font-size:clamp(16px, 1.8vw, 26px);
}




@media (max-width: 760px) {
    .hero {
        padding: 80px 0;
        font-size: 34px;
        width: 100%;
    }
}



/* ★ 共通の設定とクラス名 */

html {
    margin: 0;
}

header,
footer {
    width: 100%;
    margin: 0 auto;
}

.main-content {
    margin: 0 auto;
}



/* ★ フォント関連*/

main {
    width: 100%;
    font-family: "BIZ UDGothic", sans-serif;
    font-weight: 400;
    font-style: normal
}

.bold {
    font-weight: bold;
    /* 太字 */
}

.small {
    font-size: x-small;
    /* 小文字 */
}



/* ★ 背景色を変更するためのコード */

/* .main-contentの親要素に設定して、.containerの後ろに番号を加えて運用してください */

/* .container {} */



/* ★ マーカー関連 */

.marker {
    background: linear-gradient(transparent 50%, #fae3cd 50%);
    /* マーカーを引く */
    display: inline;
    /* インライン属性を指定する */
}

.marker {
    background: linear-gradient(transparent 50%, #fae3cd 50%);
    display: inline;
    background-repeat: no-repeat;
    /* 背景の繰り返しを停止 */
    background-size: 0% 100%;
    /* マーカーの横方向を0にして縮める */
    transition: background-size 1.5s;
    /* マーカーが引かれる速度を指定 */
}

/* マーカーが引かれる際に付与するクラス */

.marker.on {
    background-size: 100% 100%;
    /* 横方向を100%にして、マーカーを引く */
}



/* ★ 空div用 汎用パディング */

.pad-0 {
    padding: 0;
}

.pad-20 {
    padding: 10px;
}

.pad-40 {
    padding: 20px;
}

.pad-60 {
    padding: 30px;
}

.pad-80 {
    padding: 40px;
}



/* ★ 空div用 汎用マージン */

.margin-0 {
    margin: 0;
}

.margin-20 {
    margin: 10px;
}

.margin-40 {
    margin: 20px;
}

.margin-60 {
    margin: 30px;
}

.margin-80 {
    margin: 40px;
}



/* ★ レスポンシブ対応時のコピペ用コード */

/* レスポンシブ対応サイズ指定サンプル */

.clamp-sample {
    font-size: clamp(12px, 1.3vw, 20px);
    /* 画面サイズに対して変動するフォントサイズ指定サンプル */
    box-shadow: #989898 0.8vw 0.6vw 0.3vw 0;
    /* 画面サイズに対して変動するボックスシャドウサイズ指定サンプル */
    padding: 0.8em 1.5em;
    /* フォントサイズに対して変動するパディングサンプル */
    white-space: nowrap;
    /* これで要素内の改行を防ぐ */
}


/* 矢印のスタイル */
.pagetop::before {
    display: block;
    font-size: 20px;
}

.is-active {
opacity: 1;
visibility: visible;
}

.pagetop.is-active {
right: -2px;
}

.pagetop {
    position: fixed;
    right: 0;
    bottom: 10px;
    padding: 1.5vw 2.0vw;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 9999;
    background-color: #ffc187;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    opacity: 0;
}



/* ★ 運用中のレスポンシブ対応 */



/* 1000px以下で  消える */

.break-1000 {
    display: inline;
}

@media (max-width: 1000px) {
    .break-1000 {
        display: none;
    }
}

/* 1000px以下で  現れる */

.show-1000 {
    display: none;
}

@media (max-width: 1000px) {
    .show-1000 {
        display: inline;
    }
}

/* 835px以下で  消える */

.break-835 {
    display: inline;
}

@media (max-width: 835px) {
    .break-835 {
        display: none;
    }
}

/* 835px以下で  現れる */

.show-835 {
    display: none;
}

@media (max-width: 835px) {
    .show-835 {
        display: inline;
    }
}

/* 710px以下で  消える */

.break-710 {
    display: inline;
}

@media (max-width: 710px) {
    .break-710 {
        display: none;
    }
}

/* 710px以下で  現れる */

.show-710 {
    display: none;
}

@media (max-width: 710px) {
    .show-710 {
        display: inline;
    }
}

/* 665px以下で  消える */

@media (max-width: 665px) {
    .break-665 {
        display: none;
    }
}

/* 665px以下で  現れる */

.show-665 {
    display: none;
}

@media (max-width: 665px) {
    .show-665 {
        display: inline;
    }
}

/* 625px以下で  現れる */

.show-625 {
    display: none;
}

@media (max-width: 625px) {
    .show-625 {
        display: inline;
    }
}

/* 550以下で消す */
@media (max-width: 550px) {
    .break-550 {
        display: none;
    }
}

/* 525px以下で  現れる */

.show-525 {
    display: none;
}

@media (max-width: 525px) {
    .show-525 {
        display: inline;
    }
}


/* 525px以下で  消える */

@media (max-width: 525px) {
    .break-525 {
        display: none;
    }
}

/* 510px以下で  現れる */

.show-510 {
    display: none;
}

@media (max-width: 510px) {
    .show-510 {
        display: inline;
    }
}

/* 500px以下で  消える */

@media (max-width: 500px) {
    .break-500 {
        display: none;
    }
}

/* 480px以下で  消える */

.break-480 {
    display: inline;
}

@media (max-width: 480px) {
    .break-480 {
        display: none;
    }
}

/* 440px以下で  現れる */

.show-440 {
    display: none;
}

@media (max-width: 440px) {
    .show-440 {
        display: inline;
    }
}

/* 440px以下で  消える */

.break-440 {
    display: inline;
}

@media (max-width: 440px) {
    .break-440 {
        display: none;
    }
}

/* 400px以下で  消える */

.break-400 {
    display: inline;
}

@media (max-width: 400px) {
    .break-400 {
        display: none;
    }
}

/* 370px以下で  消える */

.break-370 {
    display: inline;
}

@media (max-width: 370px) {
    .break-370 {
        display: none;
    }
}

/* 360px以下で  現れる */

.show-360 {
    display: none;
}

@media (max-width: 360px) {
    .show-360 {
        display: inline;
    }
}

/* 340px以下で  現れる */

.show-340 {
    display: none;
}

@media (max-width: 340px) {
    .show-340 {
        display: inline;
    }
}