@charset "utf-8";
* {
    box-sizing: border-box; /* 余白もサイズに含める */
}
body {
    width: 100%;
    background-color: #f9db00;
    letter-spacing: 0.02rem;
    font-family: "Arial","YuGothic","Yu Gothic","Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Sans","Meiryo",sans-serif;
    font-weight: 400;
}
main {
    position: relative;
    padding-top: 60px;
}
/* スクロール時に黄色の背景色を重ねないと薄黄色の背景色が見えてしまう */
main::after {
    content: "";
    position: absolute;
    background-repeat: repeat;
    width: 100%;
    height: 60px;
    top: 0px;
    background-color: #f9db00;
    z-index: -2;
}
main::before {
    content: "";
    position: absolute;
    top: 60px;
    width: 100%;
    height: 100%;
    background-color: #fffae6;
    z-index: -1;
}
body,p,ul,ol,li,h1 {
    margin: 0;
    padding: 0;
}
ul {
    list-style-type: none; /* 箇条書きのスタイルを削除 */
}
.top h1 {
    margin-bottom: 6px;
}
.top h2 {
    position: relative;
    display: block;
    font-size: 1.2rem;
    text-align: center;
}
/* 波線 */
.top h2::after {
    position: absolute;
    content: "";
    display: inline-block;
    background-image: url(img/wave.svg);
    background-repeat: no-repeat;
    width: 40px;
    height: 10px;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
}
a {
    color: #000;
}
/* ヘッダーの高さ分、内部リンクがずれるので調整 */
.link_area {
    padding-top: 60px;
    margin-top: -60px;
}
/* 注記 */
.note {
    margin-top: 3px;
    color: #565656;
    font-size: 0.625rem; /* 10px */
    font-weight: bold;
}

/* ////////////// ヘッダー ////////////// */
header {
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    height: 60px;
    background-color: #f9db00;
}
.h_inner {
    max-width: 800px;
    margin: 0 auto; /* 上下　左右 */
    padding: 0 23px; /* 上下　左右 */
    height: 100%;
}
.h_flex_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}
.h_logo {
    width: 95px;
}
.menu {
    width: 30px
}

/* ////////////// フッター ////////////// */
footer {
    background-image: url(img/footer.svg);
    padding: 20px 10px 0 10px;
}
.f_nav_area {
    padding: 0 0 20px 20px;
}
.f_logo {
    width: 150px;
}
footer nav ul {
    list-style: "-";
    margin-right: 3px;
}
footer nav ul li {
    list-style: "-";
    padding-left: 5px;
    font-size: 0.8rem;
}
footer nav ul li a {
    text-decoration: none; /* リンクの下線なし */
}
.f_agreements {
    display: flex;
    font-size: 0.75rem;
    padding: 8px 0;
    border-top: solid 2px #fff;
}
.f_agreements li {
    padding: 0 3px;
}
.f_separator {
    border-left: solid 1px #000;
}
.f_copyright {
    text-align: center;
    font-size: 0.75rem;
}
/* ////////////// 利用規約・プライバシーポリシー ////////////// */
.agreements {
    font-size: 0.85rem;
    color: #494949;
    background-color: #fff;
}
.ag_inner {
    padding: 30px 12px;
    max-width: 650px;
    margin: 0 auto;
}
.ag_inner {
    padding-bottom: 13px;
    border-bottom: solid 1.3px #efefef;
}
.agreements dt {
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 1rem;
    color: #000;
}
.agreements dd {
    margin-left: 0;
}
.agreements h1 {
    margin-bottom: 8px;
    font-size: 1.5rem;
    color: #000;
}
.indent_1 {
    padding-left: 16px;
}
.indent_1 > li {
    margin-bottom: 6px;
}
.indent_2 {
    padding-left: 18px;
}
/* 小文字アルファベットのリスト */
.indent_2 li {
    list-style-type: lower-alpha;
    margin-bottom: 3px;
}
/* 括弧付き数字のリスト */
.indent_3 {
    padding-left: 0;
}
.indent_3 li {
    margin-bottom: 3px;
    list-style-type: none;
	counter-increment: cnt; /* 自動で連番をつけてくれる */
}
.indent_3 li::before {
	content: "(" counter(cnt) ") ";
}
/* 改訂日など */
.ag_btm {
    text-align: right;
    margin-top: 20px;
}


/* 特定商取引法に基づく表記 */
.container {
    max-width: 960px;
    margin: auto;
    background: white;
    padding: 100px 20px 20px 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    color: #333;
    text-align: center;
    white-space: nowrap;       /* 折り返しを防止 */
    overflow: hidden;          /* コンテナからのはみ出しを防ぐ */
    text-overflow: clip;       /* はみ出したテキストを切り捨てる */
    display: block;            /* ブロックレベル要素として扱う */
    width: 100%;               /* 親要素と同じ幅に設定 */
    font-size: 5vw;            /* ビューポートに基づいたフォントサイズ */
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.info-table th, .info-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

.info-table th {
    background-color: #f9f9f9;
}