@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

#underCheckWhole {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  display: none;
}

.ageWrap {
  display: table;
    border-collapse: collapse;
    border: none;
    position: fixed;
    z-index: 999999;
    height: 100vh;
    width: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(27,27,27,.9);
    color: #2e2826;
    font-size: 14px;
    font-weight: 300;
}

.ageWrap>* {
  display: table-cell;
  vertical-align: middle;
  padding: 10px 200px; /* 例: 上下10px、左右40pxのパディング */
 text-align: center;
}

.ageWrap .caution_memo {
  font-size: 20px;
  line-height: 1.75;
  font-weight: 400;
  color: #fff;
  margin-top: 0;
  margin-bottom: 35px;
}

.ageWrap .caution {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

.ageWrap .choice_buttons {
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}

.ageWrap .choice_buttons li {
  vertical-align: top;
  display: inline-block;
  margin-right: 20px;
  margin-left: 20px;
  text-align: center;
}

.ageWrap .choice_buttons a {
  font-size: 24px;
  line-height: 70px;
  font-weight: 600;
  color: #000;
  background-color: #fff;
  display: inline-block;
  height: 70px;
  width: 235px;
  padding: 0 0 0;
  transition: background-color .3s;
  cursor: pointer;
}
.ageWrap .choice_buttons a:hover{
  color: #fff;
  background-color: #009900;
}

.ageWrap .check_keep {
  margin-bottom: 20px;
}

.ageWrap .check_keep label {
  cursor: pointer;
  color: #fff;
}
.ageWrap .info {
  color: #fff;
}

.ageWrap .corpName {
  margin-top: 25px;
}

.ageWrap .corpName img {
  width: 134px;
}

.ageWrap .link_info {
  color: #fff;
}
.age_clear {
  position: fixed;
  top:20%;
  left: 50%;
  transform: translateY(-20%) translateX(-50%);
  width: auto;
  height: auto;
  display: block;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: #000;
  background-color: #fff;
  z-index: 999998;
  border-radius: 5px 10px;
  background: repeating-linear-gradient(45deg, #000000, #000000 14px, #FFD900 14px, #FFD900 28px);
  padding: 10px;
  cursor: pointer;
}
.age_clear span {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: block;
  pointer-events: none;
}

body.agecheck .kiji a:active {
  pointer-events: none;
}
body.agecheck .kiji a:hover {
  filter: blur(2px) !important;
}


/* ==================================================
   ブレークポイント： 480px以下
   スマートフォン向けのスタイル調整
   ================================================== */
@media all and (max-width: 480px) {
    .ageWrap {
        font-size: 12px;
        /* 必要であれば、スマートフォン向けにageWrap自体のパディングや幅を調整 */
    }

    /* ageWrap>* のパディング（セル内の余白）*/
    .ageWrap>* {
        padding: 15px 15px 100px 15px;　/* 例: 上下10px、左右15pxに調整 */
        text-align: center; /* セル内のコンテンツを中央寄せ */
    }

    /* 警告文テキスト（caution_memo）のスタイル調整 */
    .ageWrap .caution_memo {
        font-size: 13px;
        line-height: 1.4;
        margin-top: 0;
        margin-bottom: 15px;
        color: #fff;
        font-weight: 400;
        max-width: 95vw; /* ビューポート幅に対する割合で最大幅を制限 */
        margin-left: auto;
        margin-right: auto;
        padding: 0 5px; /* 内側余白 */
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
    }

    /* メインの質問テキスト（caution）のスタイル調整 */
    .ageWrap .caution {
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        margin-top: 0;
        margin-bottom: 10px;
        max-width: 90vw; /* ビューポート幅に対する割合で最大幅を制限 */
        margin-left: auto;
        margin-right: auto;
        padding: 0 5px; /* 内側余白 */
        word-wrap: break-word;
        overflow-wrap: break-word;
        text-align: center;
    }

    /* ボタンリスト全体のスタイル */
    .ageWrap .choice_buttons {
        margin-top: 10px; /* マージン調整 */
        margin-bottom: 15px; /* マージン調整 */
        padding: 0;
        text-align: center; /* リストアイテム（inline-block）を中央寄せ */
        list-style: none; /* リストの黒丸などを消す */
    }

    /* ★★★ ボタンのリストアイテム（li）のスタイル調整 ★★★ */
    .ageWrap .choice_buttons li {
        vertical-align: top;
        display: inline-block; /* 横に並ぶように */
        margin-right: 5px; /* ボタン間の左右マージンを小さく */
        margin-left: 5px; /* ボタン間の左右マージンを小さく */
        margin-bottom: 10px; /* ボタンが縦に並んだ場合の上下マージン */
        text-align: center; /* リストアイテム内のコンテンツ（ボタン）を中央寄せ */
        /* 幅を設定 - 画面幅に対して調整し、2つが収まるように考慮 */
        width: 45%; /* 例: 親要素(ul)の幅の45% */
        max-width: 160px; /* 例: リストアイテムの最大の幅 */
    }

    /* ★★★ ボタン（a）のスタイル調整 ★★★ */
    .ageWrap .choice_buttons a {
        font-size: 15px; /* ボタンのフォントサイズ調整 */
        line-height: 40px; /* ボタンの高さに合わせたラインハイト */
        height: 40px; /* ボタンの高さ */
        width: 100%; /* 親要素（li）の幅いっぱいに広がるように */
        /* max-width は li で設定しているのでここでは不要 */

        display: block; /* 親要素(li)の中で幅100%にするためにブロック要素にする */
        margin: 0 auto; /* ブロック要素を中央寄せ */
        padding: 0 5px; /* 例: ボタンの内側左右にパディングを追加 */
        background-color: #fff;
        color: #000;
        text-decoration: none;
        transition: background-color .3s;
        cursor: pointer;
        text-align: center; /* ボタン内のテキストを中央寄せ */
        box-sizing: border-box; /* パディングとボーダーを幅に含める */
    }

    .ageWrap .choice_buttons a:hover {
        color: #fff;
        background-color: #009900;
    }

    /* "次回より確認を省略" チェックボックスのスタイル (もし必要なら) */
    /* ... */

    .ageWrap .corpName {
        margin-top: 20px;
        margin-bottom: 10px;
        text-align: center;
    }
    .ageWrap .corpName img {
        width: 100px;
        max-width: 80vw;
        height: auto;
    }

    /* age_clear ボタンのスタイル */
     .age_clear {
        font-size: 12px;
        line-height: 1.2;
        font-weight: 600;
        padding: 8px;
        top: 15%;
        transform: translateY(-15%) translateX(-50%);
    }
    .age_clear span {
        padding: 8px;
    }

    /* body.agecheck のスタイルはそのまま */
    body.agecheck .kiji a:active {
        pointer-events: none;
    }
    body.agecheck .kiji a:hover {
        filter: blur(2px) !important;
    }
}

/* ==================================================
   ブレークポイント： 481px ～ 750px
   タブレットなどのスタイル。ここも必要に応じて調整が必要です。
   ================================================== */
@media all and (min-width: 481px)and (max-width: 750px) {
    .ageWrap {
        font-size: 13px; /* フォントサイズ調整 */
        /* 必要であれば、ageWrap自体のパディングや幅を調整 */
    }

    /* ★★★ .ageWrap>* のパディングを調整 ★★★ */
    .ageWrap>* {
        padding: 15px 30px; /* 例: 上下15px、左右30pxに */
        /* text-align: center; */
    }

    .ageWrap .caution_memo {
        font-size: 14px; /* フォントサイズ調整 */
        line-height: 1.6; /* 行間調整 */
        margin-bottom: 20px; /* マージン調整 */
        max-width: 90%; /* 例: 親要素の幅の90%に制限 */
        margin-left: auto;
        margin-right: auto;
        /* text-align: center; */
    }

    .ageWrap .caution {
        font-size: 20px; /* フォントサイズ調整 */
        margin-bottom: 10px; /* マージン調整 */
        max-width: 90%; /* 例 */
        margin-left: auto;
        margin-right: auto;
        /* text-align: center; */
    }

    .ageWrap .choice_buttons {
        margin-bottom: 15px; /* マージン調整 */
        /* font-size: 10px; */
        /* text-align: center; */
    }

    /* ★★★ ボタンのリストアイテムのマージンを調整 ★★★ */
    .ageWrap .choice_buttons li {
        margin-right: 10px; /* 例: 左右マージン調整 */
        margin-left: 10px; /* 例: 左右マージン調整 */
        /* ... */
    }

    /* ★★★ ボタンの幅などを調整 ★★★ */
    .ageWrap .choice_buttons a {
        font-size: 16px; /* フォントサイズ調整 */
        line-height: 40px; /* ラインハイト調整 */
        height: 40px; /* 高さ調整 */
        width: 180px; /* 例: 幅調整 */
        max-width: 95%; /* 例: 親要素 (li) の幅の95%に制限 */
        display: block; /* 中央寄せのため */
        margin: 0 auto; /* li の中で中央寄せ */
        padding: 0; /* パディング調整 */
        /* ... */
    }
    /* ... */
}

.age-hidden {
    display: none !important; /* このクラスが付いた要素を強制的に非表示にする */
}

</style>