@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500&display=swap"); /* ----------------------------------------------- * Plugins エントリーポイント -------------------------------------------------- */ /*------------------------------------------------------------------------------ reset PC ------------------------------------------------------------------------------*/ html, input, textarea, select, button { font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", Meiryo, sans-serif; font-weight: 400; font-size: 16px; } html { color: #231815; background: #fff; font-size: 16px; line-height: 1.6; word-break: break-all; line-break: strict; } body { background: #fff; margin: 0; } .size_test1 { font-size: 40px; /* 文字サイズ指定 */ font-weight: bold; } .size_test2 { font-size: 35px; /* 文字サイズ指定 */ font-weight: bold; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } img { border: 0; margin: 0; vertical-align: top; max-width: 100%; } p { margin: 0; padding: 0; overflow-wrap: break-word; word-wrap: break-word; } a { color: #000; text-decoration: none; } input, select, textarea, button { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } select::-ms-expand { display: none; } textarea { resize: vertical; } ::-webkit-input-placeholder { color: #ccc; } :-ms-input-placeholder { color: #ccc; } ::-ms-input-placeholder { color: #ccc; } ::-moz-placeholder { color: #ccc; } ::placeholder { color: #ccc; } button { border: none; cursor: pointer; } label { cursor: pointer; } table { border-collapse: collapse; } ul, ol { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 14px; font-weight: 500; margin: 0; padding: 0; } main { display: block; } .inner-block { position: relative; width: calc(100% - 60px); margin: 0 auto; } #wrapper { position: relative; } dl, dt, dd { padding: 0; margin: 0; } @font-face { src: url(../font/MaboroshinoNijimiMincho.otf) format("opentype"); font-family: "nijimi"; font-weight: 400; font-display: swap; } .c-svg { display: inline-block; fill: currentColor; vertical-align: top; } .ib { display: inline-block; } /*------------------------------------------------------------------------------ reset SP ------------------------------------------------------------------------------*/ /* ----------------------------------------------- * Modules エントリーポイント -------------------------------------------------- */ /* ----------------------------------------------- * quiz Module * quizページ用 -------------------------------------------------- */ .quiz { min-height: 100vh; padding: 100px 0; background: #fff5db; } .quiz-content { border: 1px solid #222; background-color: rgba(255, 255, 255, 0.4); -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); position: relative; } .quiz-question-number { text-align: center; font-size: 26px; font-weight: bold; border-bottom: 1px solid #222; padding: 20px; } .quiz-question { font-size: 32px; font-weight: bold; line-height: 1.8; margin-bottom: 40px; position: relative; text-align: center; } .quiz-answer { display: grid; position: relative; } .quiz-answer::before { position: absolute; width: 200px; height: 200px; font-size: 200px; opacity: 0.7; top: -40px; left: 0; right: 0; margin: auto; font-weight: bold; line-height: 1; text-align: center; z-index: 2; pointer-events: none; } .quiz-answer.is-correct .checked { background: #ffb3b3; } .quiz-answer.is-correct::before { content: "〇"; color: #ffb3b3; opacity: 0.5; } .quiz-answer.is-incorrect .checked { background: #b3c7ff; } .quiz-answer.is-incorrect::before { content: "×"; color: #b3c7ff; } .quiz-answer li { position: relative; } .quiz-answer li label { color: #222; display: block; margin: 0 auto; height: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 100%; padding: 4px 20px 4px 80px; font-weight: bold; font-size: 18px; line-height: 1.16; position: relative; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; border: 1px solid #000; white-space: pre-wrap; } .quiz-answer li label:hover { background-color: rgba(0, 0, 0, 0.1); } .quiz-answer li label.is-checked { pointer-events: none; } .quiz-answer li::after { position: absolute; text-align: center; font-size: 20px; font-weight: bold; content: ""; width: 60px; height: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; top: 0; bottom: 0; left: 0; margin: auto; z-index: 1; pointer-events: none; border-right: 1px solid #000; } .quiz-answer li:nth-child(1)::after { content: "A"; } .quiz-answer li:nth-child(2)::after { content: "B"; } .quiz-answer li:nth-child(3)::after { content: "C"; } .quiz-answer li:nth-child(4)::after { content: "D"; } .finish { display: none; text-align: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; background-color: rgba(0, 0, 0, 0.6); z-index: 3; } .finish.is-show { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .finish .score-wrap { text-align: center; color: #fff; } .finish .score-wrap .score { font-size: 80px; font-weight: bold; } .finish .score-wrap .ja { font-size: 34px; } .finish .score-wrap .full { font-size: 24px; } .finish .goback-button { font-size: 14px; color: #fff; margin-top: 30px; display: inline-block; } /* ----------------------------------------------- * Page エントリーポイント -------------------------------------------------- */ @media only screen and (min-width: 751px) { .inner-block { max-width: 1000px; } .sp { display: none !important; } a[href^="tel:"] { pointer-events: none; } a, a::before, a::after, button { -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .quiz-question { padding: 30px 20vw 0px; } .quiz-answer { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 0 10vw 60px; } } @media only screen and (max-width: 750px) { body { font-size: 14px; position: relative; -webkit-appearance: none; -webkit-text-size-adjust: 100%; } .outer-block { min-width: 320px; } .inner-block { padding: 0 15px; width: auto; } #wrapper { min-width: 320px; position: relative; overflow: hidden; } input[type=submit] { -webkit-text-size-adjust: 100%; } input, select, textarea { font-size: 16px !important; } .pc { display: none !important; } .quiz { padding: 70px 0; } .quiz-content { padding: 40px 30px 60px; } .quiz-question-number { font-size: 16px; padding: 0 20px 20px; } .quiz-question { padding-top: 20px; font-size: 20px; line-height: 1.7; margin-bottom: 20px; } .quiz-answer { grid-template-columns: repeat(1, 1fr); padding: 0; gap: 8px; } .quiz-answer::before { top: 0; width: 200px; height: 200px; font-size: 200px; } .quiz-answer li label { font-size: 14px; height: 44px; } .quiz-answer li::after { top: 2px; left: 14px; width: 32px; height: 27px; } } @media only screen and (min-width: 1000px) { .quiz-question { padding: 30px 200px 0px; } .quiz-answer { padding: 0 200px 100px; } }