/* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input[type=radio], input[type=checkbox]):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :focus-visible { outline: none; } /* ======================================= layout ======================================= */ :root { --font_color: #40210F; --strong_color: #e95513; --primary_color: #ED7700; --secondary_color: #9677b5; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overscroll-behavior: none; } body { background: #fff; color: var(--font_color); font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", sans-serif; font-weight: 400; line-height: 1; margin: auto; width: 100%; } @media only screen and (max-width: 767px) { body { font-size: 3.733vw; } } @media only screen and (min-width: 768px) { body { font-size: 1.852vw; } } @media only screen and (min-width: 1080px) { body { font-size: 20px; min-width: 1080px; } } a { color: var(--font_color); text-decoration: none; } @media (any-hover: hover) { a:hover { opacity: 0.8; } } img { vertical-align: bottom; width: 100%; } .wrapper { width: 100%; } @media only screen and (min-width: 1080px) { .wrapper { margin: auto; max-width: 1080px; } } @media only screen and (min-width: 768px) { .sp_only { display: none !important; } } @media only screen and (max-width: 767px) { .pc_only { display: none !important; } } strong { font-weight: 700; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* ======================================= header ======================================= */ .header { background: #fff; left: 0; position: sticky; top: 0; width: 100%; z-index: 100; } .header__logo { align-items: center; display: flex; } @media only screen and (max-width: 767px) { .header__logo { background: #fff; gap: 2.667vw; height: 13.333vw; padding: 0 3.6vw 0; position: relative; z-index: 5; } } @media only screen and (min-width: 768px) { .header__logo { gap: 1.667vw; height: 9.815vw; } } @media only screen and (min-width: 1080px) { .header__logo { gap: 18px; height: 106px; } } @media only screen and (max-width: 767px) { .header__logo__company { width: 23.867vw; } } @media only screen and (min-width: 768px) { .header__logo__company { width: 16.574vw; } } @media only screen and (min-width: 1080px) { .header__logo__company { width: 179px; } } @media only screen and (max-width: 767px) { .header__logo__brand { width: 22.667vw; } } @media only screen and (min-width: 768px) { .header__logo__brand { width: 15.741vw; } } @media only screen and (min-width: 1080px) { .header__logo__brand { width: 170px; } } @media (any-hover: hover) { .header__logo__link:hover { opacity: 0.8; } } @media only screen and (max-width: 767px) { .toggle { background: transparent; box-sizing: content-box; cursor: pointer; display: block; height: 9.333vw; padding: 0; position: fixed; right: 2.667vw; top: 2vw; width: 9.333vw; z-index: 110; } } @media only screen and (max-width: 767px) { .toggle__bar { background: #333; display: block; height: 0.8vw; left: 1.067vw; position: absolute; transform-origin: 0; transition: all 0.3s linear; width: 7.2vw; } .toggle__bar--top { top: 1.467vw; } .toggle__bar--middle { top: 4.133vw; } .toggle__bar--bottom { top: 6.8vw; } } @media only screen and (max-width: 767px) { .nav { background: var(--primary_color); left: 0; max-height: 100vh; max-height: 100dvh; opacity: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: fixed; top: -100vh; transition: all 0.5s linear; visibility: hidden; width: 100%; } } @media only screen and (min-width: 768px) { .nav { padding: 2.315vw 0 2.315vw; } } @media only screen and (min-width: 1080px) { .nav { padding: 25px 0 25px; } } @media only screen and (min-width: 768px) { .nav__list { display: flex; justify-content: space-between; } } .nav__item { font-weight: 500; } @media only screen and (max-width: 767px) { .nav__item { font-size: 4vw; letter-spacing: 0.06em; position: relative; background-image: linear-gradient(to right, #fff, #fff 2px, transparent 2px, transparent 5px); background-size: 5px 1px; background-repeat: repeat-x; background-position: center bottom; } .nav__item::before { content: ""; height: 0.4vw; width: 2.8vw; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); left: 5.6vw; } .nav__item:last-child { background: none; } } @media only screen and (min-width: 768px) { .nav__item { border-right: 1px solid var(--font_color); font-size: 2.037vw; line-height: 2.273; } } @media only screen and (min-width: 1080px) { .nav__item { font-size: 22px; } } .nav__item:last-child { border: none; } .nav__item__link { display: block; white-space: nowrap; } @media only screen and (max-width: 767px) { .nav__item__link { color: #fff; padding: 5.067vw 12vw; } } @media only screen and (min-width: 768px) { .nav__item__link { padding: 0 6.667vw; } } @media only screen and (min-width: 1080px) { .nav__item__link { padding: 0 72px; } } @media only screen and (any-hover: hover) and (max-width: 767px) { .nav__item__link:hover { background: rgba(255, 255, 255, 0.2); } } @media only screen and (any-hover: hover) and (min-width: 768px) { .nav__item__link:hover { color: var(--secondary_color); } } @media only screen and (max-width: 767px) { .is_nav--open .toggle__bar--top { transform: rotate(45deg) translate(0.63vw, -0.53vw); } .is_nav--open .toggle__bar--middle { display: none; } .is_nav--open .toggle__bar--bottom { transform: rotate(-45deg) translate(0.63vw, 0.53vw); } .is_nav--open .nav { opacity: 1; top: 13.333vw; visibility: visible; } } /* ======================================= contents ======================================= */ .kv { background: 0/cover no-repeat; position: relative; } @media only screen and (max-width: 767px) { .kv { background-image: url(../images/fv_bg_sp.jpg); background-position: 0 0; background-size: 100%; background-color: #F29600; height: auto; padding-top: 2.533vw; padding-bottom: 16vw; } } @media only screen and (min-width: 768px) { .kv { background-image: url(../images/fv_bg.jpg); height: 113.241vw; padding-top: 2.037vw; } } @media only screen and (min-width: 1080px) { .kv { height: 1223px; padding-top: 22px; } } .kv_logo { position: relative; z-index: 99; } @media only screen and (min-width: 768px) { .kv_logo { width: 14.907vw; margin: 0 0 0 2.315vw; } } @media only screen and (min-width: 1080px) { .kv_logo { width: 161px; margin: 0 0 0 25px; } } @media only screen and (max-width: 767px) { .kv_image { width: 97.733vw; margin: 0 auto; } } @media only screen and (min-width: 768px) { .kv_image { width: 88.519vw; margin: -44px auto 0; } } @media only screen and (min-width: 1080px) { .kv_image { width: 956px; margin: -44px auto 0; } } .kv_text { text-align: center; font-weight: 700; } @media only screen and (max-width: 767px) { .kv_text { line-height: 2; margin: -10.267vw auto 0; } } @media only screen and (min-width: 768px) { .kv_text { font-size: 2.037vw; line-height: 3.333vw; margin: -8.981vw 0 2.037vw; } } @media only screen and (min-width: 1080px) { .kv_text { font-size: 22px; line-height: 36px; margin: -97px 0 22px; } } .kv_detail ul { display: flex; justify-content: center; flex-flow: row wrap; } @media only screen and (max-width: 767px) { .kv_detail ul { justify-content: flex-start; gap: 1.067vw 0; } } @media only screen and (min-width: 768px) { .kv_detail ul { gap: 1.852vw; } } @media only screen and (min-width: 1080px) { .kv_detail ul { gap: 20px; } } @media only screen and (max-width: 767px) { .kv_detail li:nth-child(1) { width: 86.667vw; margin-left: 4.667vw; } } @media only screen and (min-width: 768px) { .kv_detail li:nth-child(1) { width: 45.093vw; } } @media only screen and (min-width: 1080px) { .kv_detail li:nth-child(1) { width: 487px; } } @media only screen and (max-width: 767px) { .kv_detail li:nth-child(2) { width: 86.533vw; margin-left: 9.867vw; } } @media only screen and (min-width: 768px) { .kv_detail li:nth-child(2) { width: 46.019vw; } } @media only screen and (min-width: 1080px) { .kv_detail li:nth-child(2) { width: 497px; } } .course { background: linear-gradient(90deg, rgb(231, 56, 40) 0%, rgb(233, 85, 19) 100%); } @media only screen and (max-width: 767px) { .course { padding: 6.667vw 0 16vw; } } @media only screen and (min-width: 768px) { .course { padding: 3.426vw 0 4.63vw; } } @media only screen and (min-width: 1080px) { .course { padding: 37px 0 50px; } } .course__period { display: flex; justify-content: center; align-items: center; width: fit-content; width: -moz-fit-content; } @media only screen and (max-width: 767px) { .course__period { gap: 2.667vw; margin: 0 auto 4.667vw; padding: 0 0 2.667vw 1.2vw; border-bottom: 0.533vw solid #FFD800; } } @media only screen and (min-width: 768px) { .course__period { gap: 1.481vw; margin: 0 auto 2.315vw; padding: 0 0 1.111vw 0.833vw; border-bottom: 0.278vw solid #FFD800; } } @media only screen and (min-width: 1080px) { .course__period { gap: 16px; margin: 0 auto 25px; padding: 0 0 12px 9px; border-bottom: 3px solid #FFD800; } } .course__period__title { color: #E73828; background: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; text-align: center; } @media only screen and (max-width: 767px) { .course__period__title { width: 14.667vw; height: 14.667vw; border-radius: 1.333vw; font-size: 4.533vw; line-height: 5.067vw; } } @media only screen and (min-width: 768px) { .course__period__title { width: 12.037vw; height: 4.074vw; border-radius: 0.741vw; font-size: 2.407vw; } } @media only screen and (min-width: 1080px) { .course__period__title { width: 130px; height: 44px; border-radius: 8px; font-size: 26px; } } .course__period__date { color: #fff; font-weight: 700; white-space: nowrap; } .course__period__date strong { font-size: 150%; } .course__period__date span { font-size: 90%; } @media only screen and (max-width: 767px) { .course__period__date { font-size: 5.867vw; text-align: right; } } @media only screen and (min-width: 768px) { .course__period__date { font-size: 3.148vw; } } @media only screen and (min-width: 1080px) { .course__period__date { font-size: 34px; } } .course__lead { text-align: center; color: #fff; font-weight: 600; } @media only screen and (max-width: 767px) { .course__lead { line-height: 6.4vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 768px) { .course__lead { font-size: 2.037vw; } } @media only screen and (min-width: 1080px) { .course__lead { font-size: 22px; } } .course__list { display: flex; justify-content: center; flex-flow: row wrap; } @media only screen and (min-width: 768px) { .course__list { gap: 1.852vw; } } @media only screen and (min-width: 1080px) { .course__list { gap: 20px; } } @media only screen and (max-width: 767px) { .course__item { width: 85.333vw; } } @media only screen and (min-width: 768px) { .course__item { width: 45.37vw; } } @media only screen and (min-width: 1080px) { .course__item { width: 490px; } } @media only screen and (max-width: 767px) { .course__item__title { width: 89.2vw; margin: 0 0 -2.267vw -3.867vw; } } @media only screen and (min-width: 768px) { .course__item__title { width: 47.407vw; margin: 0 0 -1.019vw -2.037vw; } } @media only screen and (min-width: 1080px) { .course__item__title { width: 512px; margin: 0 0 -11px -22px; } } .course__item__detail { background: #fff; text-align: center; } @media only screen and (max-width: 767px) { .course__item__detail { border-radius: 0 0 3.467vw 3.467vw; } } @media only screen and (min-width: 768px) { .course__item__detail { height: 37.5vw; border-radius: 0 0 1.852vw 1.852vw; } } @media only screen and (min-width: 1080px) { .course__item__detail { height: 405px; border-radius: 0 0 20px 20px; } } .course__item__txt { font-weight: 600; } .course__item__txt strong { color: var(--strong_color); } @media only screen and (max-width: 767px) { .course__item__txt { font-size: 3.467vw; line-height: 6.133vw; } } @media only screen and (min-width: 768px) { .course__item__txt { font-size: 1.852vw; line-height: 3.333vw; } } @media only screen and (min-width: 1080px) { .course__item__txt { font-size: 20px; line-height: 36px; } } .course__item__deadline { border-top: 1px solid #F7B52C; color: var(--strong_color); letter-spacing: 0.05em; font-weight: 700; } .course__item__deadline span { font-weight: 500; } @media only screen and (max-width: 767px) { .course__item__deadline { width: 75.867vw; margin: 4vw auto 0; padding: 4vw 0 0; font-size: 5.2vw; line-height: 5.333vw; } .course__item__deadline span { font-size: 2.667vw; } } @media only screen and (min-width: 768px) { .course__item__deadline { width: 40.556vw; margin: 1.667vw auto 0; padding: 2.037vw 0 0; font-size: 2.778vw; line-height: 2.593vw; } .course__item__deadline span { font-size: 1.481vw; } } @media only screen and (min-width: 1080px) { .course__item__deadline { width: 438px; margin: 18px auto 0; padding: 22px 0 0; font-size: 30px; line-height: 28px; } .course__item__deadline span { font-size: 16px; } } .course__item__note { font-weight: 600; margin: 0 auto; text-align: left; } @media only screen and (max-width: 767px) { .course__item__note { width: 67.333vw; font-size: 2.4vw; line-height: 3.467vw; } } @media only screen and (min-width: 768px) { .course__item__note { width: 38.704vw; font-size: 1.111vw; line-height: 1.852vw; } } @media only screen and (min-width: 1080px) { .course__item__note { width: 418px; font-size: 12px; line-height: 20px; } } @media only screen and (max-width: 767px) { .course__item--01 .course__item__detail { padding: 5.333vw 0 6.667vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 768px) { .course__item--01 .course__item__detail { padding-top: 4.167vw; } } @media only screen and (min-width: 1080px) { .course__item--01 .course__item__detail { padding-top: 45px; } } @media only screen and (max-width: 767px) { .course__item--02 .course__item__detail { padding: 5.333vw 0 8vw; } .course__item--02 .course__item__deadline { margin-bottom: 1.733vw; } } @media only screen and (min-width: 768px) { .course__item--02 .course__item__detail { padding-top: 1.667vw; } .course__item--02 .course__item__txt { line-height: 2.963vw; } .course__item--02 .course__item__deadline { margin-top: 1.296vw; padding-top: 1.574vw; margin-bottom: 1.204vw; } } @media only screen and (min-width: 1080px) { .course__item--02 .course__item__detail { padding-top: 18px; } .course__item--02 .course__item__txt { line-height: 32px; } .course__item--02 .course__item__deadline { margin-top: 14px; padding-top: 17px; margin-bottom: 13px; } } .item { background-repeat: no-repeat; background-color: #FFF1CB; position: relative; } @media only screen and (max-width: 767px) { .item { background-image: url(../images/item_bg_sp.jpg); background-color: #FFF1CB; background-size: 100%; padding: 9.467vw 0 16vw; } } @media only screen and (min-width: 768px) { .item { background-image: url(../images/item_bg.jpg); background-size: 100%; padding-top: 7.407vw; padding-bottom: 10.185vw; } } @media only screen and (min-width: 1080px) { .item { padding-top: 80px; padding-bottom: 110px; } } @media only screen and (max-width: 767px) { .item__title { width: 89.067vw; margin: 0 auto 6.8vw; } } @media only screen and (min-width: 768px) { .item__title { width: 88.981vw; margin: 0 auto 2.13vw; } } @media only screen and (min-width: 1080px) { .item__title { width: 961px; margin: 0 auto 23px; } } .item__detail { background: #fff; margin: 0 auto; } @media only screen and (max-width: 767px) { .item__detail { border: 0.533vw solid var(--strong_color); border-radius: 5.2vw; width: 89.067vw; } } @media only screen and (min-width: 768px) { .item__detail { border: 0.278vw solid var(--strong_color); border-radius: 2.778vw; width: 88.889vw; } } @media only screen and (min-width: 1080px) { .item__detail { border: 3px solid var(--strong_color); border-radius: 30px; width: 960px; } } .item__name { margin: 0 auto; } .item__info { display: flex; justify-content: space-between; flex-flow: row wrap; } @media only screen and (max-width: 767px) { .item__info { display: block; } } @media only screen and (max-width: 767px) { .item__img { width: 88.8vw; } } @media only screen and (min-width: 768px) { .item__img { width: 47.222vw; } } @media only screen and (min-width: 1080px) { .item__img { width: 510px; } } .item__txt { font-weight: 500; } .item__txt strong { font-weight: 500; color: var(--strong_color); } .item__txt span { display: block; } .item__txt sup { font-size: 60%; } @media only screen and (max-width: 767px) { .item__txt { width: 75.733vw; font-size: 4.267vw; line-height: 7.733vw; margin-inline: auto; } .item__txt span { font-size: 2.667vw; line-height: 4vw; } .item__txt sup { vertical-align: 0.8vw; } } @media only screen and (min-width: 768px) { .item__txt { width: 31.481vw; font-size: 2.222vw; line-height: 3.889vw; } .item__txt span { font-size: 1.481vw; line-height: 2.593vw; } .item__txt sup { vertical-align: 0.556vw; } } @media only screen and (min-width: 1080px) { .item__txt { width: 340px; font-size: 24px; line-height: 42px; } .item__txt span { font-size: 16px; line-height: 28px; } .item__txt sup { vertical-align: 6px; } } .item__lineup { display: flex; flex-flow: row wrap; margin-inline: auto; } @media only screen and (max-width: 767px) { .item__lineup { width: 75.733vw; } } @media only screen and (min-width: 768px) { .item__lineup { width: 79.63vw; height: 26.296vw; } } @media only screen and (min-width: 1080px) { .item__lineup { width: 860px; height: 284px; } } .item__lineup__title { position: relative; text-align: center; color: #fff; font-weight: 700; } @media only screen and (max-width: 767px) { .item__lineup__title { width: 100%; border-radius: 2.667vw 2.667vw 0 0; font-size: 6.667vw; line-height: 8.933vw; padding: 2.667vw 0 5.467vw; } .item__lineup__title span { font-size: 4.8vw; } } @media only screen and (min-width: 768px) { .item__lineup__title { width: 32.13vw; border-radius: 1.389vw 0 0 1.389vw; font-size: 3.519vw; line-height: 4.167vw; padding: 5.556vw 0 0; } .item__lineup__title span { font-size: 2.593vw; } } @media only screen and (min-width: 1080px) { .item__lineup__title { width: 347px; border-radius: 15px 0px 0px 15px; font-size: 38px; line-height: 45px; padding: 60px 0 0; } .item__lineup__title span { font-size: 28px; } } .item__lineup__title__img { position: absolute; } @media only screen and (max-width: 767px) { .item__lineup__title__tag { width: 51.6vw; margin: 1.333vw auto 0; } } @media only screen and (min-width: 768px) { .item__lineup__title__tag { width: 27.407vw; margin: 2.315vw auto 0; } } @media only screen and (min-width: 1080px) { .item__lineup__title__tag { width: 296px; margin: 25px auto 0; } } @media only screen and (max-width: 767px) { .item__lineup__list { width: 100%; border-radius: 0 0 2.667vw 2.667vw; } } @media only screen and (min-width: 768px) { .item__lineup__list { width: 47.5vw; border-radius: 0 1.389vw 1.389vw 0; } } @media only screen and (min-width: 1080px) { .item__lineup__list { width: 513px; border-radius: 0 15px 15px 0; } } .item__lineup__list__inner { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .item__lineup__list__inner { gap: 4vw; } } @media only screen and (min-width: 768px) { .item__lineup__list__inner { gap: 5.556vw; } } @media only screen and (min-width: 1080px) { .item__lineup__list__inner { gap: 60px; } } .item__lineup__list__item { text-align: center; } .item__lineup__list__item p { font-weight: 500; } .item__lineup__list__item strong { font-size: 130%; } @media only screen and (max-width: 767px) { .item__lineup__list__item img { filter: drop-shadow(0.667vw 0.667vw 0.667vw rgba(25, 37, 74, 0.4)); } .item__lineup__list__item p { font-size: 4.267vw; line-height: 6.133vw; margin: 1.333vw 0 0; } .item__lineup__list__item span { font-size: 4.533vw; } } @media only screen and (min-width: 768px) { .item__lineup__list__item img { filter: drop-shadow(0.463vw 0.463vw 0.463vw rgba(25, 37, 74, 0.4)); } .item__lineup__list__item p { font-size: 2.222vw; line-height: 2.963vw; margin: 0.926vw 0 0; } .item__lineup__list__item span { font-size: 2.407vw; } } @media only screen and (min-width: 1080px) { .item__lineup__list__item img { filter: drop-shadow(5px 5px 5px rgba(25, 37, 74, 0.4)); } .item__lineup__list__item p { font-size: 24px; line-height: 32px; margin: 10px 0 0; } .item__lineup__list__item span { font-size: 26px; } } .item__detail--01 .item__lineup__title { background: #0B308E; } .item__detail--01 .item__lineup__list { background: #D2EAF9; color: #0B308E; } @media only screen and (max-width: 767px) { .item__detail--01 { padding: 6.933vw 0 8vw; margin-bottom: 9.333vw; } .item__detail--01 .item__name { width: 75.733vw; margin-bottom: 6.667vw; } .item__detail--01 .item__img { margin-left: 1.333vw; } .item__detail--01 .item__txt { margin-top: 4vw; } .item__detail--01 .item__lineup { margin-top: 9.333vw; } .item__detail--01 .item__lineup__title__img { width: 13.067vw; top: -6.4vw; left: 14.933vw; } .item__detail--01 .item__lineup__list { padding: 6.667vw 0 6.667vw; } .item__detail--01 .item__lineup__list__item--01 img { width: 15.733vw; } .item__detail--01 .item__lineup__list__item--02 img { width: 18.267vw; } } @media only screen and (min-width: 768px) { .item__detail--01 { padding: 4.352vw 0 4.815vw; margin-bottom: 3.704vw; } .item__detail--01 .item__name { width: 72.593vw; margin-bottom: 2.13vw; } .item__detail--01 .item__info { margin: 0 3.704vw 0 2.315vw; } .item__detail--01 .item__txt { margin-top: 0.926vw; } .item__detail--01 .item__lineup { margin-top: 4.63vw; } .item__detail--01 .item__lineup__title__img { width: 6.852vw; top: -3.519vw; left: 3.148vw; } .item__detail--01 .item__lineup__list { padding: 2.778vw 0 0; } .item__detail--01 .item__lineup__list__item--01 img { width: 8.426vw; } .item__detail--01 .item__lineup__list__item--02 img { width: 9.815vw; } } @media only screen and (min-width: 1080px) { .item__detail--01 { padding: 47px 0 52px; margin-bottom: 40px; } .item__detail--01 .item__name { width: 574px; margin-bottom: 23px; } .item__detail--01 .item__info { margin: 0 40px 0 25px; } .item__detail--01 .item__txt { margin-top: 10px; } .item__detail--01 .item__lineup { margin-top: 50px; } .item__detail--01 .item__lineup__title__img { width: 74px; top: -38px; left: 34px; } .item__detail--01 .item__lineup__list { padding: 30px 0 0; } .item__detail--01 .item__lineup__list__item--01 img { width: 91px; } .item__detail--01 .item__lineup__list__item--02 img { width: 106px; } } .item__detail--02 .item__lineup__title { background: #007636; } .item__detail--02 .item__lineup__list { background: #E1EECD; color: #007636; } .item__detail--02 .item__lineup__list span { font-weight: 700; } @media only screen and (max-width: 767px) { .item__detail--02 { padding: 6.933vw 0 8vw; } .item__detail--02 .item__name { width: 75.733vw; margin-bottom: 6.667vw; } .item__detail--02 .item__img { width: 89.2vw; margin-left: 1.333vw; } .item__detail--02 .item__txt { margin-top: 4vw; } .item__detail--02 .item__lineup { margin-top: 9.333vw; } .item__detail--02 .item__lineup__title__img { width: 13.067vw; top: -6.4vw; left: 59.467vw; } .item__detail--02 .item__lineup__list { padding: 6.667vw 0 6.667vw 2.667vw; } .item__detail--02 .item__lineup__list__item--01 img { width: 19.333vw; margin-bottom: 1.333vw; } .item__detail--02 .item__lineup__list__item--02 img { width: 36.4vw; margin: 2vw 0 4vw; } } @media only screen and (min-width: 768px) { .item__detail--02 { padding: 4.352vw 0 4.815vw; } .item__detail--02 .item__name { width: 72.593vw; margin-bottom: 2.13vw; } .item__detail--02 .item__info { margin: 0 3.704vw 0 2.315vw; } .item__detail--02 .item__txt { margin-top: 0.926vw; } .item__detail--02 .item__lineup { margin-top: 4.63vw; } .item__detail--02 .item__lineup__title__img { width: 6.852vw; top: -3.519vw; left: 22.222vw; } .item__detail--02 .item__lineup__list { padding: 3.241vw 0 0; } .item__detail--02 .item__lineup__list__inner { gap: 1.852vw; } .item__detail--02 .item__lineup__list__item--01 img { width: 11.481vw; margin-bottom: 0.648vw; } .item__detail--02 .item__lineup__list__item--02 img { width: 12.963vw; margin-bottom: 0.648vw; } } @media only screen and (min-width: 1080px) { .item__detail--02 { padding: 47px 0 52px; } .item__detail--02 .item__name { width: 784px; margin-bottom: 23px; } .item__detail--02 .item__info { margin: 0 40px 0 25px; } .item__detail--02 .item__img { width: 515px; } .item__detail--02 .item__txt { margin-top: 10px; } .item__detail--02 .item__lineup { margin-top: 50px; } .item__detail--02 .item__lineup__title__img { width: 74px; top: -38px; left: 240px; } .item__detail--02 .item__lineup__list { padding: 35px 0 0; } .item__detail--02 .item__lineup__list__inner { gap: 20px; } .item__detail--02 .item__lineup__list__item--01 img { width: 124px; margin-bottom: 7px; } .item__detail--02 .item__lineup__list__item--02 img { width: 234px; margin: 20px 0 15px; } } .cp { background: linear-gradient(90deg, rgb(231, 56, 40) 0%, rgb(233, 85, 19) 100%); } @media only screen and (max-width: 767px) { .cp { padding: 5.6vw 0 10.667vw; } } @media only screen and (min-width: 768px) { .cp { padding: 3.148vw 0 3.704vw; } } @media only screen and (min-width: 1080px) { .cp { padding: 34px 0 40px; } } @media only screen and (max-width: 767px) { .cp__ttl { width: 100vw; margin: 0 auto 1.333vw; } } @media only screen and (min-width: 768px) { .cp__ttl { width: 76.111vw; margin: 0 auto 1.667vw; } } @media only screen and (min-width: 1080px) { .cp__ttl { width: 822px; margin: 0 auto 18px; } } .cp__inner { background: #fff; } @media only screen and (max-width: 767px) { .cp__inner { width: 89.067vw; margin: 0 auto 6.667vw; padding: 0 0 9.333vw; border: 0.533vw solid #40210F; border-radius: 5.2vw; } } @media only screen and (min-width: 768px) { .cp__inner { width: 88.889vw; margin: 0 auto 6.296vw; padding: 0 0 6.296vw; border: 0.278vw solid #40210F; border-radius: 2.778vw; } } @media only screen and (min-width: 1080px) { .cp__inner { width: 960px; margin: 0 auto 68px; padding: 0 0 68px; border: 3px solid #40210F; border-radius: 30px; } } .cp__title { margin-inline: auto; } @media only screen and (max-width: 767px) { .cp__img { width: 82.133vw; margin: 0 auto 7.333vw; } } @media only screen and (min-width: 768px) { .cp__img { width: 68.611vw; margin: 0 auto 4.074vw; } } @media only screen and (min-width: 1080px) { .cp__img { width: 741px; margin: 0 auto 44px; } } .cp__sub { color: #fff; background: #40210F; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 100vh; font-weight: 700; } @media only screen and (max-width: 767px) { .cp__sub { margin: 0 auto 2vw; width: 75.733vw; height: 9.733vw; font-size: 4.533vw; } } @media only screen and (min-width: 768px) { .cp__sub { margin: 0 auto 1.389vw; width: 77.778vw; height: 5.185vw; font-size: 2.778vw; } } @media only screen and (min-width: 1080px) { .cp__sub { margin: 0 auto 15px; width: 840px; height: 56px; font-size: 30px; } } .cp__txt { margin-inline: auto; } .cp__txt p { font-weight: 500; } .cp__txt span { font-size: 16px; margin-top: -5px; } @media only screen and (max-width: 767px) { .cp__txt { width: 75.733vw; } .cp__txt p { font-size: 4.267vw; line-height: 7.467vw; } .cp__txt span { display: block; font-size: 2.667vw; line-height: 4vw; margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .cp__txt { width: 77.778vw; } .cp__txt p { font-size: 2.222vw; line-height: 3.519vw; } .cp__txt span { font-size: 1.481vw; margin-top: -0.463vw; } } @media only screen and (min-width: 1080px) { .cp__txt { width: 840px; } .cp__txt p { font-size: 24px; line-height: 38px; } .cp__txt span { font-size: 16px; margin-top: -5px; } } .cp__btn { display: block; } @media (any-hover: hover) { .cp__btn:hover { opacity: 0.8; transition: all 0.3s; } } @media only screen and (max-width: 767px) { .cp__btn { width: 80vw; margin: 0 auto 6.667vw; } } @media only screen and (min-width: 768px) { .cp__btn { width: 71.111vw; margin: 0 auto 3.241vw; } } @media only screen and (min-width: 1080px) { .cp__btn { width: 768px; margin: 0 auto 35px; } } @media only screen and (max-width: 767px) { .cp__inner--01 { padding-top: 11.6vw; } .cp__inner--01 .cp__title { width: 74.8vw; margin-bottom: 3.467vw; } } @media only screen and (min-width: 768px) { .cp__inner--01 { padding-top: 4.815vw; } .cp__inner--01 .cp__title { width: 73.889vw; margin-bottom: 2.778vw; } } @media only screen and (min-width: 1080px) { .cp__inner--01 { padding-top: 52px; } .cp__inner--01 .cp__title { width: 798px; margin-bottom: 30px; } } @media only screen and (max-width: 767px) { .cp__inner--02 { padding-top: 9.067vw; } .cp__inner--02 .cp__title { width: 66.533vw; margin-bottom: 3.333vw; } } @media only screen and (min-width: 768px) { .cp__inner--02 { padding-top: 4.352vw; padding-bottom: 4.167vw; margin-top: -0.648vw; } .cp__inner--02 .cp__title { width: 57.222vw; margin-bottom: 1.389vw; } } @media only screen and (min-width: 1080px) { .cp__inner--02 { padding-top: 47px; padding-bottom: 45px; margin-top: -7px; } .cp__inner--02 .cp__title { width: 618px; margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .apply { padding: 17.333vw 0 22.933vw; } } @media only screen and (min-width: 768px) { .apply { padding: 9.537vw 0 15.926vw; } } @media only screen and (min-width: 1080px) { .apply { padding: 103px 0 172px; } } .apply__ttl { position: relative; display: flex; justify-content: center; align-items: center; letter-spacing: 0.05em; font-weight: 900; } .apply__ttl::before, .apply__ttl::after { content: ""; display: block; width: 160px; height: 1px; background: #F7B52C; } @media only screen and (max-width: 767px) { .apply__ttl { font-size: 10.4vw; gap: 3.733vw; margin-bottom: 6.667vw; } .apply__ttl::before, .apply__ttl::after { width: 19.333vw; } } @media only screen and (min-width: 768px) { .apply__ttl { font-size: 5.556vw; gap: 5.093vw; margin-bottom: 3.519vw; } .apply__ttl::before, .apply__ttl::after { width: 14.815vw; } } @media only screen and (min-width: 1080px) { .apply__ttl { font-size: 60px; gap: 55px; margin-bottom: 38px; } .apply__ttl::before, .apply__ttl::after { width: 160px; } } .apply__inner { margin: 0 auto; display: flex; flex-flow: row wrap; } @media only screen and (max-width: 767px) { .apply__inner { gap: 1.867vw; } } @media only screen and (min-width: 768px) { .apply__inner { width: 88.889vw; gap: 4.167vw; } } @media only screen and (min-width: 1080px) { .apply__inner { width: 960px; gap: 45px; } } .apply__img { position: relative; } @media only screen and (max-width: 767px) { .apply__img { width: 59.467vw; margin-inline: auto; } } @media only screen and (min-width: 768px) { .apply__img { width: 31.852vw; } } @media only screen and (min-width: 1080px) { .apply__img { width: 344px; } } .apply__img__txt { position: absolute; right: 1em; } @media only screen and (max-width: 767px) { .apply__img__txt { top: 47.333vw; } } @media only screen and (min-width: 768px) { .apply__img__txt { font-size: 1.852vw; top: 25.556vw; } } @media only screen and (min-width: 1080px) { .apply__img__txt { font-size: 20px; top: 276px; } } .apply__step__sub { display: flex; align-items: center; font-weight: 700; color: #ED7700; } @media only screen and (max-width: 767px) { .apply__step__sub { font-size: 6.933vw; line-height: 9.067vw; gap: 2.133vw; margin-left: 6.267vw; } .apply__step__sub img { width: 14.667vw; filter: drop-shadow(0 0.667vw 0.667vw rgba(64, 33, 15, 0.3)); } } @media only screen and (min-width: 768px) { .apply__step__sub { font-size: 3.704vw; line-height: 4.815vw; gap: 1.481vw; } .apply__step__sub img { width: 7.778vw; filter: drop-shadow(0 0.463vw 0.463vw rgba(64, 33, 15, 0.3)); } } @media only screen and (min-width: 1080px) { .apply__step__sub { font-size: 40px; line-height: 52px; gap: 16px; } .apply__step__sub img { width: 84px; filter: drop-shadow(0 5px 5px rgba(64, 33, 15, 0.3)); } } .apply__step__txt { font-weight: 700; } @media only screen and (max-width: 767px) { .apply__step__txt { font-size: 4.8vw; line-height: 7.467vw; margin: 2vw 0 0 6.267vw; } } @media only screen and (min-width: 768px) { .apply__step__txt { font-size: 2.593vw; line-height: 4.167vw; margin-top: 1.389vw; } } @media only screen and (min-width: 1080px) { .apply__step__txt { font-size: 28px; line-height: 45px; margin-top: 15px; } } @media only screen and (max-width: 767px) { .apply__step__note { font-size: 3.467vw; margin: 2vw 0 0 6.267vw; } } @media only screen and (min-width: 768px) { .apply__step__note { font-size: 1.852vw; margin-top: 1.389vw; } } @media only screen and (min-width: 1080px) { .apply__step__note { font-size: 20px; margin-top: 15px; } } .apply__step__btn { display: block; background: #F7B52C; color: #fff; font-weight: 700; display: flex; align-items: center; border-radius: 100vh; } .apply__step__btn::after { content: ""; display: block; rotate: -45deg; } @media (any-hover: hover) { .apply__step__btn:hover { opacity: 0.8; transition: all 0.3s; } } @media only screen and (max-width: 767px) { .apply__step__btn { gap: 3.333vw; width: 89.067vw; height: 11.733vw; padding: 0 0 0 5.6vw; margin: 6vw 0 0 6.667vw; } .apply__step__btn::after { width: 2.133vw; height: 2.133vw; border-left: 0.267vw solid #FFF; border-bottom: 0.267vw solid #FFF; } } @media only screen and (min-width: 768px) { .apply__step__btn { gap: 1.389vw; width: 52.407vw; height: 6.111vw; font-size: 2.222vw; padding: 0 0 0 3.889vw; margin: 3.241vw 0 0; } .apply__step__btn::after { width: 1.111vw; height: 1.111vw; border-left: 0.185vw solid #FFF; border-bottom: 0.185vw solid #FFF; } } @media only screen and (min-width: 1080px) { .apply__step__btn { gap: 15px; width: 566px; height: 66px; font-size: 24px; padding: 0 0 0 42px; margin: 35px 0 0; } .apply__step__btn::after { width: 12px; height: 12px; border-left: 2px solid #FFF; border-bottom: 2px solid #FFF; } } @media only screen and (max-width: 767px) { .apply__inner--01 { margin-bottom: 13.333vw; } } @media only screen and (min-width: 768px) { .apply__inner--01 { margin-bottom: 5.926vw; } .apply__inner--01 .apply__step { padding-top: 2.963vw; } .apply__inner--01 .apply__step__sub { margin-bottom: 1.389vw; } } @media only screen and (min-width: 1080px) { .apply__inner--01 { margin-bottom: 64px; } .apply__inner--01 .apply__step { padding-top: 32px; } .apply__inner--01 .apply__step__sub { margin-bottom: 15px; } } @media only screen and (max-width: 767px) { .apply__inner--02 { margin-bottom: 13.333vw; } .apply__inner--02 .apply__step { padding-top: 3.333vw; } .apply__inner--02 .apply__step__sub { margin-bottom: 2.667vw; } } @media only screen and (min-width: 768px) { .apply__inner--02 { margin-bottom: 4.074vw; } .apply__inner--02 .apply__step { padding-top: 0.463vw; } .apply__inner--02 .apply__step__sub { margin-bottom: 1.852vw; } } @media only screen and (min-width: 1080px) { .apply__inner--02 { margin-bottom: 44px; } .apply__inner--02 .apply__step { padding-top: 5px; } .apply__inner--02 .apply__step__sub { margin-bottom: 20px; } } @media only screen and (min-width: 768px) { .apply__inner--03 .apply__step { padding-top: 4.167vw; } .apply__inner--03 .apply__step__sub { margin-bottom: 1.574vw; } } @media only screen and (min-width: 1080px) { .apply__inner--03 .apply__step { padding-top: 45px; } .apply__inner--03 .apply__step__sub { margin-bottom: 17px; } } .point { background: #F8C999; position: relative; } .point::before { content: ""; background: url(../images/point_ico.png) no-repeat center 0/100%; display: block; position: absolute; left: 0; right: 0; margin-inline: auto; } @media only screen and (max-width: 767px) { .point { padding: 13.067vw 0 16.4vw; } .point::before { width: 38.133vw; height: 40vw; top: -18vw; } } @media only screen and (min-width: 768px) { .point { padding: 6.944vw 0 9.259vw; } .point::before { width: 20.37vw; height: 21.296vw; top: -9.537vw; } } @media only screen and (min-width: 1080px) { .point { padding: 75px 0 100px; } .point::before { width: 220px; height: 230px; top: -103px; } } .point__ttl { text-align: center; font-weight: 900; position: relative; z-index: 2; } @media only screen and (max-width: 767px) { .point__ttl { font-size: 10.4vw; margin-bottom: 12.667vw; } } @media only screen and (min-width: 768px) { .point__ttl { font-size: 5.556vw; margin-bottom: 7.13vw; } } @media only screen and (min-width: 1080px) { .point__ttl { font-size: 60px; margin-bottom: 77px; } } .point__list { display: flex; justify-content: space-between; flex-flow: row wrap; margin-inline: auto; } @media only screen and (max-width: 767px) { .point__list { width: 89.067vw; gap: 13.333vw 0; } } @media only screen and (min-width: 768px) { .point__list { width: 88.889vw; gap: 6.852vw 0; } } @media only screen and (min-width: 1080px) { .point__list { width: 960px; gap: 74px 0; } } .point__item { background: #fff; } @media only screen and (max-width: 767px) { .point__item { width: 100%; border-radius: 3.467vw; padding: 0 0 9.867vw; } } @media only screen and (min-width: 768px) { .point__item { width: 43.519vw; border-radius: 1.852vw; padding: 0 0 6.111vw; } } @media only screen and (min-width: 1080px) { .point__item { width: 470px; border-radius: 20px; padding: 0 0 66px; } } .point__num { position: relative; } @media only screen and (max-width: 767px) { .point__num { width: 23.2vw; top: -7.067vw; margin: 0 auto -4.267vw; } } @media only screen and (min-width: 768px) { .point__num { width: 12.407vw; top: -3.889vw; margin: 0 auto -2.037vw; } } @media only screen and (min-width: 1080px) { .point__num { width: 134px; top: -42px; margin: 0 auto -22px; } } .point__sub { text-align: center; font-weight: 700; } @media only screen and (max-width: 767px) { .point__sub { font-size: 6.133vw; line-height: 8.667vw; } } @media only screen and (min-width: 768px) { .point__sub { font-size: 3.333vw; line-height: 4.63vw; } } @media only screen and (min-width: 1080px) { .point__sub { font-size: 36px; line-height: 50px; } } .point__txt span { display: block; } @media only screen and (max-width: 767px) { .point__txt { width: 75.733vw; margin: 4vw auto 0; } .point__txt p { font-size: 4.533vw; line-height: 7.733vw; } .point__txt span { margin-top: 1.067vw; line-height: 5.6vw; } } @media only screen and (min-width: 768px) { .point__txt { width: 35.185vw; margin: 2.037vw auto 0; } .point__txt p { font-size: 2.593vw; line-height: 3.889vw; } .point__txt span { margin-top: 0.741vw; font-size: 1.852vw; line-height: 2.963vw; } } @media only screen and (min-width: 1080px) { .point__txt { width: 380px; margin: 22px auto 0; } .point__txt p { font-size: 28px; line-height: 42px; } .point__txt span { margin-top: 8px; font-size: 20px; line-height: 32px; } } @media only screen and (min-width: 768px) { .point__item--last { width: 100%; } .point__item--last .point__txt { width: 80.556vw; } } @media only screen and (min-width: 1080px) { .point__item--last { width: 100%; } .point__item--last .point__txt { width: 870px; } } @media only screen and (max-width: 767px) { .caution { padding: 14.667vw 0 16vw; } } @media only screen and (min-width: 768px) { .caution { padding: 8.519vw 0; } } @media only screen and (min-width: 1080px) { .caution { padding: 92px 0; } } .caution__inner { margin-inline: auto; } @media only screen and (max-width: 767px) { .caution__inner { width: 89.067vw; border: 0.533vw solid var(--strong_color); border-radius: 5.333vw; padding-bottom: 8.533vw; } } @media only screen and (min-width: 768px) { .caution__inner { width: 88.889vw; border: 0.278vw solid var(--strong_color); border-radius: 2.778vw; padding-bottom: 5.926vw; } } @media only screen and (min-width: 1080px) { .caution__inner { width: 960px; border: 3px solid var(--strong_color); border-radius: 30px; padding-bottom: 64px; } } @media only screen and (max-width: 767px) { .caution__ttl { width: 93.867vw; margin: -8.933vw 0 0 -0.533vw; } } @media only screen and (min-width: 768px) { .caution__ttl { width: 90.463vw; margin: -4.815vw 0 -3.704vw -0.278vw; } } @media only screen and (min-width: 1080px) { .caution__ttl { width: 977px; margin: -52px 0 -40px -3px; } } .caution__lead { background: #FFF8B0; text-align: center; font-weight: 700; } .caution__lead strong { color: var(--strong_color); } @media only screen and (max-width: 767px) { .caution__lead { font-size: 4.533vw; line-height: 7.333vw; padding: 5.333vw; text-align: left; } } @media only screen and (min-width: 768px) { .caution__lead { font-size: 2.778vw; line-height: 3.889vw; padding: 1.852vw 0; } } @media only screen and (min-width: 1080px) { .caution__lead { font-size: 30px; line-height: 42px; padding: 20px 0; } } @media only screen and (max-width: 767px) { .caution__sub01 { width: 66.667vw; margin: 6.4vw 0 3.067vw 5.333vw; } } @media only screen and (min-width: 768px) { .caution__sub01 { width: 56.481vw; margin: 4.444vw auto 2.13vw; } } @media only screen and (min-width: 1080px) { .caution__sub01 { width: 610px; margin: 48px auto 23px; } } .caution__txt { margin: 0 auto; font-weight: 500; } @media only screen and (max-width: 767px) { .caution__txt { width: 77.333vw; font-size: 4.267vw; line-height: 7.467vw; } } @media only screen and (min-width: 768px) { .caution__txt { width: 77.778vw; font-size: 2.222vw; line-height: 3.519vw; } } @media only screen and (min-width: 1080px) { .caution__txt { width: 840px; font-size: 24px; line-height: 38px; } } .caution__hr { background: url(../images/bdr_sp.png) no-repeat center 0/100%; } @media only screen and (max-width: 767px) { .caution__hr { width: 76.267vw; height: 0.533vw; margin: 5.333vw auto 6.133vw; } } @media only screen and (min-width: 768px) { .caution__hr { width: 77.963vw; height: 0.278vw; margin: 3.704vw auto 4.259vw; } } @media only screen and (min-width: 1080px) { .caution__hr { width: 842px; height: 3px; margin: 40px auto 46px; } } @media only screen and (max-width: 767px) { .caution__sub02 { width: 55.333vw; margin: 3.067vw 0 2.667vw 5.333vw; } } @media only screen and (min-width: 768px) { .caution__sub02 { width: 48.796vw; margin: 2.13vw auto 0; } } @media only screen and (min-width: 1080px) { .caution__sub02 { width: 527px; margin: 0 auto 23px; } } .caution__ng { display: flex; justify-content: center; flex-flow: row wrap; } @media only screen and (max-width: 767px) { .caution__ng { gap: 2.667vw 3.467vw; margin: 5.333vw auto 0; } } @media only screen and (min-width: 768px) { .caution__ng { gap: 3.241vw; margin: 1.852vw auto 0; } } @media only screen and (min-width: 1080px) { .caution__ng { gap: 35px; margin: 20px auto 0; } } @media only screen and (max-width: 767px) { .caution__ng__item { width: 38.933vw; } } @media only screen and (min-width: 768px) { .caution__ng__item { width: 20.833vw; } } @media only screen and (min-width: 1080px) { .caution__ng__item { width: 225px; } } .caution__list__wrap { display: flex; flex-flow: row wrap; } @media only screen and (max-width: 767px) { .caution__list__wrap { margin: 7.333vw 0 0 6vw; } } @media only screen and (min-width: 768px) { .caution__list__wrap { gap: 7.407vw; margin: 4.352vw 0 0 10.185vw; } } @media only screen and (min-width: 1080px) { .caution__list__wrap { gap: 80px; margin: 47px 0 0 110px; } } .caution__list__item { font-weight: 700; } @media only screen and (max-width: 767px) { .caution__list__item { font-size: 4.8vw; line-height: 7.6vw; } .caution__list__item span { vertical-align: bottom; } } @media only screen and (min-width: 768px) { .caution__list__item { font-size: 2.593vw; line-height: 4.074vw; } } @media only screen and (min-width: 1080px) { .caution__list__item { font-size: 28px; line-height: 44px; } } .caution__list__item span { color: #c30d23; font-size: 125%; } .terms { background: #FBDA95 url(../images/reg_bg.jpg) no-repeat center bottom/100%; } @media only screen and (max-width: 767px) { .terms { background: #FBDA95 url(../images/reg_bg_sp.jpg) no-repeat center bottom/100%; padding: 10.667vw 0 0; } } @media only screen and (min-width: 768px) { .terms { padding: 6.852vw 0 0; } } @media only screen and (min-width: 1080px) { .terms { padding: 74px 0 0; } } .terms__inner { background: #fff; margin: 0 auto; } @media only screen and (max-width: 767px) { .terms__inner { padding: 4.8vw 0 0; width: 89.067vw; height: 117.867vw; border-radius: 2.667vw; } } @media only screen and (min-width: 768px) { .terms__inner { padding: 3.333vw 0 0; width: 88.889vw; height: 62.963vw; border-radius: 1.852vw; } } @media only screen and (min-width: 1080px) { .terms__inner { padding: 36px 0 0; width: 960px; height: 680px; border-radius: 20px; } } .terms__box { overflow-y: scroll; } @media only screen and (max-width: 767px) { .terms__box { width: 78.267vw; height: 106.667vw; padding: 4.667vw 2.667vw 0 0; margin: 0 0 0 7.2vw; } } @media only screen and (min-width: 768px) { .terms__box { width: 81.481vw; height: 57.5vw; padding: 1.852vw 1.852vw 0 0; margin: 0 0 0 5.556vw; } } @media only screen and (min-width: 1080px) { .terms__box { width: 880px; height: 621px; padding: 20px 20px 0 0; margin: 0 0 0 60px; } } .terms__ttl { text-align: center; font-weight: 700; } @media only screen and (max-width: 767px) { .terms__ttl { font-size: 5.867vw; margin-bottom: 5.067vw; } } @media only screen and (min-width: 768px) { .terms__ttl { font-size: 3.241vw; margin-bottom: 2.593vw; } } @media only screen and (min-width: 1080px) { .terms__ttl { font-size: 35px; margin-bottom: 28px; } } .terms__txt { color: #1A1A1A; } .terms__txt a { text-decoration: underline; } @media only screen and (max-width: 767px) { .terms__txt { font-size: 3.2vw; line-height: 5.6vw; } .terms__txt p { margin-bottom: 5.6vw; } } @media only screen and (min-width: 768px) { .terms__txt { font-size: 1.852vw; line-height: 3.148vw; } .terms__txt p { margin-bottom: 3.148vw; } } @media only screen and (min-width: 1080px) { .terms__txt { font-size: 20px; line-height: 34px; } .terms__txt p { margin-bottom: 34px; } } .terms__contact { text-align: center; } @media only screen and (max-width: 767px) { .terms__contact { padding: 8vw 0 12.4vw; } } @media only screen and (min-width: 768px) { .terms__contact { padding: 4.63vw 0 6.759vw; } } @media only screen and (min-width: 1080px) { .terms__contact { padding: 50px 0 73px; } } .terms__contact__ttl { font-weight: 900; letter-spacing: 0.1em; } @media only screen and (max-width: 767px) { .terms__contact__ttl { font-size: 7.2vw; line-height: 9.2vw; } } @media only screen and (min-width: 768px) { .terms__contact__ttl { font-size: 3.889vw; } } @media only screen and (min-width: 1080px) { .terms__contact__ttl { font-size: 42px; } } .terms__contact__name { font-weight: 700; } @media only screen and (max-width: 767px) { .terms__contact__name { font-size: 5.6vw; margin: 4.667vw 0 2.667vw; } } @media only screen and (min-width: 768px) { .terms__contact__name { font-size: 2.963vw; margin: 3.241vw 0 1.852vw; } } @media only screen and (min-width: 1080px) { .terms__contact__name { font-size: 32px; margin: 35px 0 20px; } } .terms__contact__mail { font-weight: 500; } @media only screen and (max-width: 767px) { .terms__contact__mail { font-size: 4.267vw; line-height: 6.8vw; } } @media only screen and (min-width: 768px) { .terms__contact__mail { font-size: 2.222vw; } } @media only screen and (min-width: 1080px) { .terms__contact__mail { font-size: 24px; } } /* ======================================= footer ======================================= */ .footer { color: #000; position: relative; text-align: center; } @media only screen and (max-width: 767px) { .footer { padding: 10.133vw 0 10.667vw; } } @media only screen and (min-width: 768px) { .footer { padding: 4.63vw 2.778vw 5.556vw; } } @media only screen and (min-width: 1080px) { .footer { padding: 50px 30px 60px; } } .footer__logo { align-items: center; display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .footer__logo { gap: 3.467vw; } } @media only screen and (min-width: 768px) { .footer__logo { gap: 2.037vw; } } @media only screen and (min-width: 1080px) { .footer__logo { gap: 22px; } } @media only screen and (max-width: 767px) { .footer__logo__company { width: 45.333vw; } } @media only screen and (min-width: 768px) { .footer__logo__company { width: 18.611vw; } } @media only screen and (min-width: 1080px) { .footer__logo__company { width: 201px; } } @media (any-hover: hover) { .footer__logo__link:hover { opacity: 0.8; } } @media only screen and (max-width: 767px) { .footer__nav { margin-top: 4.8vw; } } @media only screen and (min-width: 768px) { .footer__nav { margin-top: 2.778vw; } } @media only screen and (min-width: 1080px) { .footer__nav { margin-top: 30px; } } .footer__nav__list { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .footer__nav__list { margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .footer__nav__list { margin-top: 1.852vw; } } @media only screen and (min-width: 1080px) { .footer__nav__list { margin-top: 20px; } } @media only screen and (max-width: 767px) { .footer__nav__item { font-size: 3.2vw; line-height: 1.667; padding: 0 2.667vw; white-space: nowrap; } } @media only screen and (min-width: 768px) { .footer__nav__item { font-size: 2.037vw; line-height: 1.818; padding: 0 2.5vw; } } @media only screen and (min-width: 1080px) { .footer__nav__item { font-size: 22px; padding: 0 27px; } } .footer__nav__item:not(:last-child) { border-right: 1px solid #000; } .footer__nav__link { color: #000; } @media (any-hover: hover) { .footer__nav__link:hover { opacity: 0.8; text-decoration: underline; } } @media only screen and (max-width: 767px) { .license { font-size: 2.133vw; line-height: 1.75; margin-top: 3.333vw; } } @media only screen and (min-width: 768px) { .license { font-size: 1.481vw; margin-top: 4.444vw; } } @media only screen and (min-width: 1080px) { .license { font-size: 16px; margin-top: 48px; } } @media only screen and (max-width: 767px) { .copyright { font-size: 2.4vw; margin-top: 5.333vw; } } @media only screen and (min-width: 768px) { .copyright { font-size: 1.667vw; margin-top: 1.852vw; } } @media only screen and (min-width: 1080px) { .copyright { font-size: 18px; margin-top: 20px; } }/*# sourceMappingURL=style.css.map */