@charset "UTF-8"; /*** 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):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; } @keyframes fadeInTabs { from { opacity: 0; } to { opacity: 1; } } :root { scroll-padding-top: 130px; } @media (max-width: 767px) { :root { scroll-padding-top: 60px; } } html { font-size: 62.5%; } body { min-height: 100vh; font-family: "LINE Seed JP", sans-serif; font-size: 16px; line-height: 1.5; font-weight: 400; overflow-wrap: break-word; overflow-x: hidden; letter-spacing: 0; text-align: left; } @media (max-width: 767px) { body { font-size: 14px; line-height: 1.7142857143; } body.is-open { overflow: hidden; } } button, input, select, textarea { font-family: "LINE Seed JP", sans-serif; } button:not(:disabled):focus-visible, a:not(:disabled):focus-visible, pre:not(:disabled):focus-visible, input:not(:disabled):focus-visible, select:not(:disabled):focus-visible, button:not(:disabled):focus-visible, textarea:not(:disabled):focus-visible { transition-duration: 0s; outline: none; } html.disableScroll body, html.disableScroll { overflow: hidden; width: 100%; height: 100%; position: fixed; } h3 { display: block; } h3:before { content: none; } .visually_hidden { border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; } a { color: inherit; text-decoration: none; transition-duration: 0.3s; text-decoration: none; } @media (hover: hover) { a:hover { opacity: 0.75; } } a:focus { outline: none; text-decoration: none; } @media (min-width: 768px) { a[href^=tel] { pointer-events: none; text-decoration: none; opacity: 1 !important; cursor: default !important; } } ul, ol { margin: 0; padding: 0; } ul li, ol li { list-style: none; } h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0; } figure { margin: 0; padding: 0; line-height: 0; } figure img { width: 100%; } input[type=submit] { border: none; transition-duration: 0.2s; } table { border-spacing: inherit; border-collapse: collapse; } * { box-sizing: border-box; word-break: break-word; } img { max-width: 100%; height: auto; vertical-align: middle; } strong, b { font-weight: bold; } button { cursor: pointer; } .image-cover { overflow: hidden; } .image-cover img { font-family: "object-fit: cover;"; display: block; width: 100%; height: 100%; object-fit: cover; } .hover-zoom { overflow: hidden; } .hover-zoom img { transition: 0.3s linear; } @media (hover: hover) { a:hover .hover-zoom:hover img { transform: scale(1.05); } } .js-inview { opacity: 0; visibility: hidden; transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateY(80px); } .js-inview.is-show { transform: translateY(0); opacity: 1; visibility: visible; } .js-title { position: relative; display: inline-block; } .js-title:after { content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background-color: #fff; position: absolute; top: -2px; right: -2px; clip-path: inset(0 0 0 0%); transition: clip-path 0.8s cubic-bezier(0.83, 0, 0.17, 1); } .js-title.is-show { opacity: 1; visibility: visible; } .js-title.is-show:after { clip-path: inset(0 0 0 100%); } sup { font-size: 0.6em; vertical-align: super; } .w-full { width: 100%; } @media screen and (max-width: 767px) { .w-full-sp { width: 100% !important; } } .img-normal { width: inherit; } .indent { text-indent: -1.5em; padding-left: 1.5em; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .text-super { vertical-align: super; } .flex-center { display: flex; justify-content: center; flex-wrap: wrap; } @media (min-width: 768px) { .pc-text-left { text-align: left; } .pc-text-center { text-align: center; } .pc-text-right { text-align: right; } .pc-text-justify { text-align: justify; } } @media (max-width: 767px) { .sp-text-left { text-align: left; } .sp-text-center { text-align: center; } .sp-text-right { text-align: right; } .sp-text-justify { text-align: justify; } } .fadeInUp { opacity: 0; transform: translate(0, 20px); transition: all 0.8s ease 0s; } .fadeInUp.is-anim { opacity: 1; transform: translate(0, 0); } .fadeInDown { opacity: 0; transform: translate(0, -20px); transition: all 0.8s ease 0s; } .fadeInDown.is-anim { opacity: 1; transform: translate(0, 0); } .fadeInLeft { opacity: 0; transform: translate(20px, 0); transition: all 0.8s ease 0s; } .fadeInLeft.is-anim { opacity: 1; transform: translate(0, 0); } .fadeInRight { opacity: 0; transform: translate(-20px, 0); transition: all 0.8s ease 0s; } .fadeInRight.is-anim { opacity: 1; transform: translate(0, 0); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .bg-black { background-color: #000000; } .bg-white { background-color: #FFFFFF; } .bg-gray1 { background-color: #F5F7FB; } .bg-gradient { pointer-events: none; position: relative; height: 64px; overflow: hidden; background: #fff; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.55) 10%, rgba(255, 255, 255, 0.45) 15%, rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 0) 40%); } .bg-gradient:after { content: ""; position: absolute; inset: 8px; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #ACB4D9 1.86%, #86CFEA 19.32%, #C8DD97 34.89%, #FAE8A1 52.11%, #F5C699 68.39%, #EBBACD 84.43%, #E79A9B 100%); top: 0; height: 100%; width: calc(100% + 40px); left: 50%; transform: translateX(-50%); } .bg-gradient--medium { margin-top: 8px; height: 55px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 10%, rgba(255, 255, 255, 0.25) 15%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 30%); } .bg-gradient--green { height: 48px; } .bg-gradient--green::after { background: linear-gradient(270deg, #59B770 0%, #5BC5EF 25%, #F6EA91 60%, #59B770 100%); } @media screen and (max-width: 767px) { .bg-gradient { height: 48px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.45) 15%, rgba(255, 255, 255, 0.35) 20%, rgba(255, 255, 255, 0.25) 25%, rgba(255, 255, 255, 0) 50%); } .bg-gradient--medium { height: 15px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0.45) 30%, rgba(255, 255, 255, 0) 60%); } .bg-gradient--green { height: 48px; } } .bg-gradient--small { margin-top: 8px; height: 15px; mask: linear-gradient(180deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.95) 25%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.75) 35%, rgba(255, 255, 255, 0) 80%); max-width: 130px; overflow: visible; position: relative; } .bg-gradient--small::after { filter: blur(9px); width: calc(100% - 20px); } @media screen and (max-width: 767px) { .bg-gradient--small { margin-top: 11px; } } .bg-service { background: linear-gradient(180deg, #E99495 0%, #EBB7CE 17%, #FDC689 34%, #F6EA91 50%, #B9D989 66%, #67C5EA 83%, #B0ABD5 100%); } .bg-corporate { background: linear-gradient(180deg, #59B770 0%, #5BC5EF 25%, #F4ECA4 34%, #F6EA91 60%, #59B770 100%); } .border-t { border-top: 1px solid; } .border-b { border-bottom: 1px solid; } .border-l { border-left: 1px solid; } .border-r { border-right: 1px solid; } .border-none { border: none !important; } .border-r-none { border-right: none !important; } .border-l-none { border-left: none !important; } .radius-0 { border-radius: 0 !important; } .border-m { border: 2px solid; } .border-color-w { border-color: #D9DDE3 !important; } .border-radius-s { border-radius: 8px; } .border-radius-m { border-radius: 16px; } .color-black333 { color: #333; } .color-white { color: #FFFFFF; } .color-blue { color: #00469B; } .cursor-auto { cursor: auto; } .cursor-pointer { cursor: pointer; } @media (min-width: 768px) { .sp { display: none !important; } } @media screen and (min-width: 768px) and (max-width: 1200px) { .tb { display: none !important; } } @media screen and (min-width: 768px) and (max-width: 1080px) { .tb_small { display: none !important; } } @media (max-width: 767px) { .pc { display: none !important; } } .hidden { display: none; } .overflow-hidden { overflow: hidden; } .visible { visibility: visible; } .invisible { visibility: hidden; } .inline { display: inline; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; } .block { display: block; } .flex { display: flex; } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-row-reverse { flex-direction: row-reverse; } .items-center { align-items: center; } .items-start { align-items: start; } .items-end { align-items: end; } .items-stretch { align-items: stretch; } .items-baseline { align-items: baseline; } .justify-center { justify-content: center; } .justify-start { justify-content: start; } .shrink { flex-shrink: 1; } .grow { flex-grow: 1; } .shrink-0 { flex-shrink: 0; } .grid { display: grid; } .flex-wrap { flex-wrap: wrap; } @media screen and (min-width: 768px) { .pc-flex-row { flex-direction: row !important; } .pc-justify-center { justify-content: center !important; } .pc-flex-col { flex-direction: column !important; } .pc-flex-wrap { flex-wrap: wrap !important; } .pc-justify-right { justify-content: flex-end !important; } .pc-justify-left { justify-content: flex-start !important; } } @media screen and (max-width: 767px) { .sp-justify-left { justify-content: flex-start !important; } .sp-justify-right { justify-content: flex-end !important; } .sp-justify-center { justify-content: center !important; } .sp-flex-col { flex-direction: column !important; } .sp-flex-wrap { flex-wrap: wrap !important; } .block-sp { display: block !important; } } .m-0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .ml-0 { margin-left: 0 !important; } .mr-0 { margin-right: 0 !important; } .mx-0 { margin-left: 0 !important; margin-right: 0 !important; } .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; } .p-0 { padding: 0 !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .pl-0 { padding-left: 0 !important; } .pr-0 { padding-right: 0 !important; } .px-0 { padding-left: 0 !important; padding-right: 0 !important; } .py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .gap-0 { --variable-gap: 0; gap: 0 !important; } .m-x4s { margin: 4px !important; } .mt-x4s { margin-top: 4px !important; } .mb-x4s { margin-bottom: 4px !important; } .ml-x4s { margin-left: 4px !important; } .mr-x4s { margin-right: 4px !important; } .mx-x4s { margin-left: 4px !important; margin-right: 4px !important; } .my-x4s { margin-top: 4px !important; margin-bottom: 4px !important; } .p-x4s { padding: 4px !important; } .pt-x4s { padding-top: 4px !important; } .pb-x4s { padding-bottom: 4px !important; } .pl-x4s { padding-left: 4px !important; } .pr-x4s { padding-right: 4px !important; } .px-x4s { padding-left: 4px !important; padding-right: 4px !important; } .py-x4s { padding-top: 4px !important; padding-bottom: 4px !important; } .gap-x4s { --variable-gap: 4px; gap: 4px !important; } .m-x3s { margin: 8px !important; } .mt-x3s { margin-top: 8px !important; } .mb-x3s { margin-bottom: 8px !important; } .ml-x3s { margin-left: 8px !important; } .mr-x3s { margin-right: 8px !important; } .mx-x3s { margin-left: 8px !important; margin-right: 8px !important; } .my-x3s { margin-top: 8px !important; margin-bottom: 8px !important; } .p-x3s { padding: 8px !important; } .pt-x3s { padding-top: 8px !important; } .pb-x3s { padding-bottom: 8px !important; } .pl-x3s { padding-left: 8px !important; } .pr-x3s { padding-right: 8px !important; } .px-x3s { padding-left: 8px !important; padding-right: 8px !important; } .py-x3s { padding-top: 8px !important; padding-bottom: 8px !important; } .gap-x3s { --variable-gap: 8px; gap: 8px !important; } .m-x2s { margin: 12px !important; } .mt-x2s { margin-top: 12px !important; } .mb-x2s { margin-bottom: 12px !important; } .ml-x2s { margin-left: 12px !important; } .mr-x2s { margin-right: 12px !important; } .mx-x2s { margin-left: 12px !important; margin-right: 12px !important; } .my-x2s { margin-top: 12px !important; margin-bottom: 12px !important; } .p-x2s { padding: 12px !important; } .pt-x2s { padding-top: 12px !important; } .pb-x2s { padding-bottom: 12px !important; } .pl-x2s { padding-left: 12px !important; } .pr-x2s { padding-right: 12px !important; } .px-x2s { padding-left: 12px !important; padding-right: 12px !important; } .py-x2s { padding-top: 12px !important; padding-bottom: 12px !important; } .gap-x2s { --variable-gap: 12px; gap: 12px !important; } .m-xs { margin: 16px !important; } .mt-xs { margin-top: 16px !important; } .mb-xs { margin-bottom: 16px !important; } .ml-xs { margin-left: 16px !important; } .mr-xs { margin-right: 16px !important; } .mx-xs { margin-left: 16px !important; margin-right: 16px !important; } .my-xs { margin-top: 16px !important; margin-bottom: 16px !important; } .p-xs { padding: 16px !important; } .pt-xs { padding-top: 16px !important; } .pb-xs { padding-bottom: 16px !important; } .pl-xs { padding-left: 16px !important; } .pr-xs { padding-right: 16px !important; } .px-xs { padding-left: 16px !important; padding-right: 16px !important; } .py-xs { padding-top: 16px !important; padding-bottom: 16px !important; } .gap-xs { --variable-gap: 16px; gap: 16px !important; } .m-s { margin: 20px !important; } .mt-s { margin-top: 20px !important; } .mb-s { margin-bottom: 20px !important; } .ml-s { margin-left: 20px !important; } .mr-s { margin-right: 20px !important; } .mx-s { margin-left: 20px !important; margin-right: 20px !important; } .my-s { margin-top: 20px !important; margin-bottom: 20px !important; } .p-s { padding: 20px !important; } .pt-s { padding-top: 20px !important; } .pb-s { padding-bottom: 20px !important; } .pl-s { padding-left: 20px !important; } .pr-s { padding-right: 20px !important; } .px-s { padding-left: 20px !important; padding-right: 20px !important; } .py-s { padding-top: 20px !important; padding-bottom: 20px !important; } .gap-s { --variable-gap: 20px; gap: 20px !important; } .m-m { margin: 24px !important; } .mt-m { margin-top: 24px !important; } .mb-m { margin-bottom: 24px !important; } .ml-m { margin-left: 24px !important; } .mr-m { margin-right: 24px !important; } .mx-m { margin-left: 24px !important; margin-right: 24px !important; } .my-m { margin-top: 24px !important; margin-bottom: 24px !important; } .p-m { padding: 24px !important; } .pt-m { padding-top: 24px !important; } .pb-m { padding-bottom: 24px !important; } .pl-m { padding-left: 24px !important; } .pr-m { padding-right: 24px !important; } .px-m { padding-left: 24px !important; padding-right: 24px !important; } .py-m { padding-top: 24px !important; padding-bottom: 24px !important; } .gap-m { --variable-gap: 24px; gap: 24px !important; } .m-l { margin: 32px !important; } .mt-l { margin-top: 32px !important; } .mb-l { margin-bottom: 32px !important; } .ml-l { margin-left: 32px !important; } .mr-l { margin-right: 32px !important; } .mx-l { margin-left: 32px !important; margin-right: 32px !important; } .my-l { margin-top: 32px !important; margin-bottom: 32px !important; } .p-l { padding: 32px !important; } .pt-l { padding-top: 32px !important; } .pb-l { padding-bottom: 32px !important; } .pl-l { padding-left: 32px !important; } .pr-l { padding-right: 32px !important; } .px-l { padding-left: 32px !important; padding-right: 32px !important; } .py-l { padding-top: 32px !important; padding-bottom: 32px !important; } .gap-l { --variable-gap: 32px; gap: 32px !important; } .m-xl { margin: 40px !important; } .mt-xl { margin-top: 40px !important; } .mb-xl { margin-bottom: 40px !important; } .ml-xl { margin-left: 40px !important; } .mr-xl { margin-right: 40px !important; } .mx-xl { margin-left: 40px !important; margin-right: 40px !important; } .my-xl { margin-top: 40px !important; margin-bottom: 40px !important; } .p-xl { padding: 40px !important; } .pt-xl { padding-top: 40px !important; } .pb-xl { padding-bottom: 40px !important; } .pl-xl { padding-left: 40px !important; } .pr-xl { padding-right: 40px !important; } .px-xl { padding-left: 40px !important; padding-right: 40px !important; } .py-xl { padding-top: 40px !important; padding-bottom: 40px !important; } .gap-xl { --variable-gap: 40px; gap: 40px !important; } .m-xl2 { margin: 44px !important; } .mt-xl2 { margin-top: 44px !important; } .mb-xl2 { margin-bottom: 44px !important; } .ml-xl2 { margin-left: 44px !important; } .mr-xl2 { margin-right: 44px !important; } .mx-xl2 { margin-left: 44px !important; margin-right: 44px !important; } .my-xl2 { margin-top: 44px !important; margin-bottom: 44px !important; } .p-xl2 { padding: 44px !important; } .pt-xl2 { padding-top: 44px !important; } .pb-xl2 { padding-bottom: 44px !important; } .pl-xl2 { padding-left: 44px !important; } .pr-xl2 { padding-right: 44px !important; } .px-xl2 { padding-left: 44px !important; padding-right: 44px !important; } .py-xl2 { padding-top: 44px !important; padding-bottom: 44px !important; } .gap-xl2 { --variable-gap: 44px; gap: 44px !important; } .m-x2l { margin: 48px !important; } .mt-x2l { margin-top: 48px !important; } .mb-x2l { margin-bottom: 48px !important; } .ml-x2l { margin-left: 48px !important; } .mr-x2l { margin-right: 48px !important; } .mx-x2l { margin-left: 48px !important; margin-right: 48px !important; } .my-x2l { margin-top: 48px !important; margin-bottom: 48px !important; } .p-x2l { padding: 48px !important; } .pt-x2l { padding-top: 48px !important; } .pb-x2l { padding-bottom: 48px !important; } .pl-x2l { padding-left: 48px !important; } .pr-x2l { padding-right: 48px !important; } .px-x2l { padding-left: 48px !important; padding-right: 48px !important; } .py-x2l { padding-top: 48px !important; padding-bottom: 48px !important; } .gap-x2l { --variable-gap: 48px; gap: 48px !important; } .m-x3l { margin: 60px !important; } .mt-x3l { margin-top: 60px !important; } .mb-x3l { margin-bottom: 60px !important; } .ml-x3l { margin-left: 60px !important; } .mr-x3l { margin-right: 60px !important; } .mx-x3l { margin-left: 60px !important; margin-right: 60px !important; } .my-x3l { margin-top: 60px !important; margin-bottom: 60px !important; } .p-x3l { padding: 60px !important; } .pt-x3l { padding-top: 60px !important; } .pb-x3l { padding-bottom: 60px !important; } .pl-x3l { padding-left: 60px !important; } .pr-x3l { padding-right: 60px !important; } .px-x3l { padding-left: 60px !important; padding-right: 60px !important; } .py-x3l { padding-top: 60px !important; padding-bottom: 60px !important; } .gap-x3l { --variable-gap: 60px; gap: 60px !important; } .m-x3l2 { margin: 64px !important; } .mt-x3l2 { margin-top: 64px !important; } .mb-x3l2 { margin-bottom: 64px !important; } .ml-x3l2 { margin-left: 64px !important; } .mr-x3l2 { margin-right: 64px !important; } .mx-x3l2 { margin-left: 64px !important; margin-right: 64px !important; } .my-x3l2 { margin-top: 64px !important; margin-bottom: 64px !important; } .p-x3l2 { padding: 64px !important; } .pt-x3l2 { padding-top: 64px !important; } .pb-x3l2 { padding-bottom: 64px !important; } .pl-x3l2 { padding-left: 64px !important; } .pr-x3l2 { padding-right: 64px !important; } .px-x3l2 { padding-left: 64px !important; padding-right: 64px !important; } .py-x3l2 { padding-top: 64px !important; padding-bottom: 64px !important; } .gap-x3l2 { --variable-gap: 64px; gap: 64px !important; } .m-x4l { margin: 80px !important; } .mt-x4l { margin-top: 80px !important; } .mb-x4l { margin-bottom: 80px !important; } .ml-x4l { margin-left: 80px !important; } .mr-x4l { margin-right: 80px !important; } .mx-x4l { margin-left: 80px !important; margin-right: 80px !important; } .my-x4l { margin-top: 80px !important; margin-bottom: 80px !important; } .p-x4l { padding: 80px !important; } .pt-x4l { padding-top: 80px !important; } .pb-x4l { padding-bottom: 80px !important; } .pl-x4l { padding-left: 80px !important; } .pr-x4l { padding-right: 80px !important; } .px-x4l { padding-left: 80px !important; padding-right: 80px !important; } .py-x4l { padding-top: 80px !important; padding-bottom: 80px !important; } .gap-x4l { --variable-gap: 80px; gap: 80px !important; } .m-x5l { margin: 96px !important; } .mt-x5l { margin-top: 96px !important; } .mb-x5l { margin-bottom: 96px !important; } .ml-x5l { margin-left: 96px !important; } .mr-x5l { margin-right: 96px !important; } .mx-x5l { margin-left: 96px !important; margin-right: 96px !important; } .my-x5l { margin-top: 96px !important; margin-bottom: 96px !important; } .p-x5l { padding: 96px !important; } .pt-x5l { padding-top: 96px !important; } .pb-x5l { padding-bottom: 96px !important; } .pl-x5l { padding-left: 96px !important; } .pr-x5l { padding-right: 96px !important; } .px-x5l { padding-left: 96px !important; padding-right: 96px !important; } .py-x5l { padding-top: 96px !important; padding-bottom: 96px !important; } .gap-x5l { --variable-gap: 96px; gap: 96px !important; } .m-x6l { margin: 128px !important; } .mt-x6l { margin-top: 128px !important; } .mb-x6l { margin-bottom: 128px !important; } .ml-x6l { margin-left: 128px !important; } .mr-x6l { margin-right: 128px !important; } .mx-x6l { margin-left: 128px !important; margin-right: 128px !important; } .my-x6l { margin-top: 128px !important; margin-bottom: 128px !important; } .p-x6l { padding: 128px !important; } .pt-x6l { padding-top: 128px !important; } .pb-x6l { padding-bottom: 128px !important; } .pl-x6l { padding-left: 128px !important; } .pr-x6l { padding-right: 128px !important; } .px-x6l { padding-left: 128px !important; padding-right: 128px !important; } .py-x6l { padding-top: 128px !important; padding-bottom: 128px !important; } .gap-x6l { --variable-gap: 128px; gap: 128px !important; } .m-custom70 { margin: 70px !important; } .mt-custom70 { margin-top: 70px !important; } .mb-custom70 { margin-bottom: 70px !important; } .ml-custom70 { margin-left: 70px !important; } .mr-custom70 { margin-right: 70px !important; } .mx-custom70 { margin-left: 70px !important; margin-right: 70px !important; } .my-custom70 { margin-top: 70px !important; margin-bottom: 70px !important; } .p-custom70 { padding: 70px !important; } .pt-custom70 { padding-top: 70px !important; } .pb-custom70 { padding-bottom: 70px !important; } .pl-custom70 { padding-left: 70px !important; } .pr-custom70 { padding-right: 70px !important; } .px-custom70 { padding-left: 70px !important; padding-right: 70px !important; } .py-custom70 { padding-top: 70px !important; padding-bottom: 70px !important; } .gap-custom70 { --variable-gap: 70px; gap: 70px !important; } .m-custom36 { margin: 36px !important; } .mt-custom36 { margin-top: 36px !important; } .mb-custom36 { margin-bottom: 36px !important; } .ml-custom36 { margin-left: 36px !important; } .mr-custom36 { margin-right: 36px !important; } .mx-custom36 { margin-left: 36px !important; margin-right: 36px !important; } .my-custom36 { margin-top: 36px !important; margin-bottom: 36px !important; } .p-custom36 { padding: 36px !important; } .pt-custom36 { padding-top: 36px !important; } .pb-custom36 { padding-bottom: 36px !important; } .pl-custom36 { padding-left: 36px !important; } .pr-custom36 { padding-right: 36px !important; } .px-custom36 { padding-left: 36px !important; padding-right: 36px !important; } .py-custom36 { padding-top: 36px !important; padding-bottom: 36px !important; } .gap-custom36 { --variable-gap: 36px; gap: 36px !important; } .m-x2l2 { margin: 52px !important; } .mt-x2l2 { margin-top: 52px !important; } .mb-x2l2 { margin-bottom: 52px !important; } .ml-x2l2 { margin-left: 52px !important; } .mr-x2l2 { margin-right: 52px !important; } .mx-x2l2 { margin-left: 52px !important; margin-right: 52px !important; } .my-x2l2 { margin-top: 52px !important; margin-bottom: 52px !important; } .p-x2l2 { padding: 52px !important; } .pt-x2l2 { padding-top: 52px !important; } .pb-x2l2 { padding-bottom: 52px !important; } .pl-x2l2 { padding-left: 52px !important; } .pr-x2l2 { padding-right: 52px !important; } .px-x2l2 { padding-left: 52px !important; padding-right: 52px !important; } .py-x2l2 { padding-top: 52px !important; padding-bottom: 52px !important; } .gap-x2l2 { --variable-gap: 52px; gap: 52px !important; } .m-x2l3 { margin: 56px !important; } .mt-x2l3 { margin-top: 56px !important; } .mb-x2l3 { margin-bottom: 56px !important; } .ml-x2l3 { margin-left: 56px !important; } .mr-x2l3 { margin-right: 56px !important; } .mx-x2l3 { margin-left: 56px !important; margin-right: 56px !important; } .my-x2l3 { margin-top: 56px !important; margin-bottom: 56px !important; } .p-x2l3 { padding: 56px !important; } .pt-x2l3 { padding-top: 56px !important; } .pb-x2l3 { padding-bottom: 56px !important; } .pl-x2l3 { padding-left: 56px !important; } .pr-x2l3 { padding-right: 56px !important; } .px-x2l3 { padding-left: 56px !important; padding-right: 56px !important; } .py-x2l3 { padding-top: 56px !important; padding-bottom: 56px !important; } .gap-x2l3 { --variable-gap: 56px; gap: 56px !important; } .m-2line { margin: 14px !important; } .mt-2line { margin-top: 14px !important; } .mb-2line { margin-bottom: 14px !important; } .ml-2line { margin-left: 14px !important; } .mr-2line { margin-right: 14px !important; } .mx-2line { margin-left: 14px !important; margin-right: 14px !important; } .my-2line { margin-top: 14px !important; margin-bottom: 14px !important; } .p-2line { padding: 14px !important; } .pt-2line { padding-top: 14px !important; } .pb-2line { padding-bottom: 14px !important; } .pl-2line { padding-left: 14px !important; } .pr-2line { padding-right: 14px !important; } .px-2line { padding-left: 14px !important; padding-right: 14px !important; } .py-2line { padding-top: 14px !important; padding-bottom: 14px !important; } .gap-2line { --variable-gap: 14px; gap: 14px !important; } .mx-auto { margin-inline: auto !important; } @media screen and (max-width: 767px) { .mx-auto-sp { margin-inline: auto !important; } .m-0-sp { margin: 0 !important; } .mt-0-sp { margin-top: 0 !important; } .mb-0-sp { margin-bottom: 0 !important; } .ml-0-sp { margin-left: 0 !important; } .mr-0-sp { margin-right: 0 !important; } .mx-0-sp { margin-left: 0 !important; margin-right: 0 !important; } .my-0-sp { margin-top: 0 !important; margin-bottom: 0 !important; } .p-0-sp { padding: 0 !important; } .pt-0-sp { padding-top: 0 !important; } .pb-0-sp { padding-bottom: 0 !important; } .pl-0-sp { padding-left: 0 !important; } .pr-0-sp { padding-right: 0 !important; } .px-0-sp { padding-left: 0 !important; padding-right: 0 !important; } .py-0-sp { padding-top: 0 !important; padding-bottom: 0 !important; } .gap-0-sp { --variable-gap: 0; gap: 0 !important; } .m-x4s-sp { margin: 4px !important; } .mt-x4s-sp { margin-top: 4px !important; } .mb-x4s-sp { margin-bottom: 4px !important; } .ml-x4s-sp { margin-left: 4px !important; } .mr-x4s-sp { margin-right: 4px !important; } .mx-x4s-sp { margin-left: 4px !important; margin-right: 4px !important; } .my-x4s-sp { margin-top: 4px !important; margin-bottom: 4px !important; } .p-x4s-sp { padding: 4px !important; } .pt-x4s-sp { padding-top: 4px !important; } .pb-x4s-sp { padding-bottom: 4px !important; } .pl-x4s-sp { padding-left: 4px !important; } .pr-x4s-sp { padding-right: 4px !important; } .px-x4s-sp { padding-left: 4px !important; padding-right: 4px !important; } .py-x4s-sp { padding-top: 4px !important; padding-bottom: 4px !important; } .gap-x4s-sp { --variable-gap: 4px; gap: 4px !important; } .m-x3s-sp { margin: 8px !important; } .mt-x3s-sp { margin-top: 8px !important; } .mb-x3s-sp { margin-bottom: 8px !important; } .ml-x3s-sp { margin-left: 8px !important; } .mr-x3s-sp { margin-right: 8px !important; } .mx-x3s-sp { margin-left: 8px !important; margin-right: 8px !important; } .my-x3s-sp { margin-top: 8px !important; margin-bottom: 8px !important; } .p-x3s-sp { padding: 8px !important; } .pt-x3s-sp { padding-top: 8px !important; } .pb-x3s-sp { padding-bottom: 8px !important; } .pl-x3s-sp { padding-left: 8px !important; } .pr-x3s-sp { padding-right: 8px !important; } .px-x3s-sp { padding-left: 8px !important; padding-right: 8px !important; } .py-x3s-sp { padding-top: 8px !important; padding-bottom: 8px !important; } .gap-x3s-sp { --variable-gap: 8px; gap: 8px !important; } .m-x2s-sp { margin: 12px !important; } .mt-x2s-sp { margin-top: 12px !important; } .mb-x2s-sp { margin-bottom: 12px !important; } .ml-x2s-sp { margin-left: 12px !important; } .mr-x2s-sp { margin-right: 12px !important; } .mx-x2s-sp { margin-left: 12px !important; margin-right: 12px !important; } .my-x2s-sp { margin-top: 12px !important; margin-bottom: 12px !important; } .p-x2s-sp { padding: 12px !important; } .pt-x2s-sp { padding-top: 12px !important; } .pb-x2s-sp { padding-bottom: 12px !important; } .pl-x2s-sp { padding-left: 12px !important; } .pr-x2s-sp { padding-right: 12px !important; } .px-x2s-sp { padding-left: 12px !important; padding-right: 12px !important; } .py-x2s-sp { padding-top: 12px !important; padding-bottom: 12px !important; } .gap-x2s-sp { --variable-gap: 12px; gap: 12px !important; } .m-xs-sp { margin: 16px !important; } .mt-xs-sp { margin-top: 16px !important; } .mb-xs-sp { margin-bottom: 16px !important; } .ml-xs-sp { margin-left: 16px !important; } .mr-xs-sp { margin-right: 16px !important; } .mx-xs-sp { margin-left: 16px !important; margin-right: 16px !important; } .my-xs-sp { margin-top: 16px !important; margin-bottom: 16px !important; } .p-xs-sp { padding: 16px !important; } .pt-xs-sp { padding-top: 16px !important; } .pb-xs-sp { padding-bottom: 16px !important; } .pl-xs-sp { padding-left: 16px !important; } .pr-xs-sp { padding-right: 16px !important; } .px-xs-sp { padding-left: 16px !important; padding-right: 16px !important; } .py-xs-sp { padding-top: 16px !important; padding-bottom: 16px !important; } .gap-xs-sp { --variable-gap: 16px; gap: 16px !important; } .m-s-sp { margin: 20px !important; } .mt-s-sp { margin-top: 20px !important; } .mb-s-sp { margin-bottom: 20px !important; } .ml-s-sp { margin-left: 20px !important; } .mr-s-sp { margin-right: 20px !important; } .mx-s-sp { margin-left: 20px !important; margin-right: 20px !important; } .my-s-sp { margin-top: 20px !important; margin-bottom: 20px !important; } .p-s-sp { padding: 20px !important; } .pt-s-sp { padding-top: 20px !important; } .pb-s-sp { padding-bottom: 20px !important; } .pl-s-sp { padding-left: 20px !important; } .pr-s-sp { padding-right: 20px !important; } .px-s-sp { padding-left: 20px !important; padding-right: 20px !important; } .py-s-sp { padding-top: 20px !important; padding-bottom: 20px !important; } .gap-s-sp { --variable-gap: 20px; gap: 20px !important; } .m-m-sp { margin: 24px !important; } .mt-m-sp { margin-top: 24px !important; } .mb-m-sp { margin-bottom: 24px !important; } .ml-m-sp { margin-left: 24px !important; } .mr-m-sp { margin-right: 24px !important; } .mx-m-sp { margin-left: 24px !important; margin-right: 24px !important; } .my-m-sp { margin-top: 24px !important; margin-bottom: 24px !important; } .p-m-sp { padding: 24px !important; } .pt-m-sp { padding-top: 24px !important; } .pb-m-sp { padding-bottom: 24px !important; } .pl-m-sp { padding-left: 24px !important; } .pr-m-sp { padding-right: 24px !important; } .px-m-sp { padding-left: 24px !important; padding-right: 24px !important; } .py-m-sp { padding-top: 24px !important; padding-bottom: 24px !important; } .gap-m-sp { --variable-gap: 24px; gap: 24px !important; } .m-l-sp { margin: 32px !important; } .mt-l-sp { margin-top: 32px !important; } .mb-l-sp { margin-bottom: 32px !important; } .ml-l-sp { margin-left: 32px !important; } .mr-l-sp { margin-right: 32px !important; } .mx-l-sp { margin-left: 32px !important; margin-right: 32px !important; } .my-l-sp { margin-top: 32px !important; margin-bottom: 32px !important; } .p-l-sp { padding: 32px !important; } .pt-l-sp { padding-top: 32px !important; } .pb-l-sp { padding-bottom: 32px !important; } .pl-l-sp { padding-left: 32px !important; } .pr-l-sp { padding-right: 32px !important; } .px-l-sp { padding-left: 32px !important; padding-right: 32px !important; } .py-l-sp { padding-top: 32px !important; padding-bottom: 32px !important; } .gap-l-sp { --variable-gap: 32px; gap: 32px !important; } .m-xl-sp { margin: 40px !important; } .mt-xl-sp { margin-top: 40px !important; } .mb-xl-sp { margin-bottom: 40px !important; } .ml-xl-sp { margin-left: 40px !important; } .mr-xl-sp { margin-right: 40px !important; } .mx-xl-sp { margin-left: 40px !important; margin-right: 40px !important; } .my-xl-sp { margin-top: 40px !important; margin-bottom: 40px !important; } .p-xl-sp { padding: 40px !important; } .pt-xl-sp { padding-top: 40px !important; } .pb-xl-sp { padding-bottom: 40px !important; } .pl-xl-sp { padding-left: 40px !important; } .pr-xl-sp { padding-right: 40px !important; } .px-xl-sp { padding-left: 40px !important; padding-right: 40px !important; } .py-xl-sp { padding-top: 40px !important; padding-bottom: 40px !important; } .gap-xl-sp { --variable-gap: 40px; gap: 40px !important; } .m-xl2-sp { margin: 44px !important; } .mt-xl2-sp { margin-top: 44px !important; } .mb-xl2-sp { margin-bottom: 44px !important; } .ml-xl2-sp { margin-left: 44px !important; } .mr-xl2-sp { margin-right: 44px !important; } .mx-xl2-sp { margin-left: 44px !important; margin-right: 44px !important; } .my-xl2-sp { margin-top: 44px !important; margin-bottom: 44px !important; } .p-xl2-sp { padding: 44px !important; } .pt-xl2-sp { padding-top: 44px !important; } .pb-xl2-sp { padding-bottom: 44px !important; } .pl-xl2-sp { padding-left: 44px !important; } .pr-xl2-sp { padding-right: 44px !important; } .px-xl2-sp { padding-left: 44px !important; padding-right: 44px !important; } .py-xl2-sp { padding-top: 44px !important; padding-bottom: 44px !important; } .gap-xl2-sp { --variable-gap: 44px; gap: 44px !important; } .m-x2l-sp { margin: 48px !important; } .mt-x2l-sp { margin-top: 48px !important; } .mb-x2l-sp { margin-bottom: 48px !important; } .ml-x2l-sp { margin-left: 48px !important; } .mr-x2l-sp { margin-right: 48px !important; } .mx-x2l-sp { margin-left: 48px !important; margin-right: 48px !important; } .my-x2l-sp { margin-top: 48px !important; margin-bottom: 48px !important; } .p-x2l-sp { padding: 48px !important; } .pt-x2l-sp { padding-top: 48px !important; } .pb-x2l-sp { padding-bottom: 48px !important; } .pl-x2l-sp { padding-left: 48px !important; } .pr-x2l-sp { padding-right: 48px !important; } .px-x2l-sp { padding-left: 48px !important; padding-right: 48px !important; } .py-x2l-sp { padding-top: 48px !important; padding-bottom: 48px !important; } .gap-x2l-sp { --variable-gap: 48px; gap: 48px !important; } .m-x3l-sp { margin: 60px !important; } .mt-x3l-sp { margin-top: 60px !important; } .mb-x3l-sp { margin-bottom: 60px !important; } .ml-x3l-sp { margin-left: 60px !important; } .mr-x3l-sp { margin-right: 60px !important; } .mx-x3l-sp { margin-left: 60px !important; margin-right: 60px !important; } .my-x3l-sp { margin-top: 60px !important; margin-bottom: 60px !important; } .p-x3l-sp { padding: 60px !important; } .pt-x3l-sp { padding-top: 60px !important; } .pb-x3l-sp { padding-bottom: 60px !important; } .pl-x3l-sp { padding-left: 60px !important; } .pr-x3l-sp { padding-right: 60px !important; } .px-x3l-sp { padding-left: 60px !important; padding-right: 60px !important; } .py-x3l-sp { padding-top: 60px !important; padding-bottom: 60px !important; } .gap-x3l-sp { --variable-gap: 60px; gap: 60px !important; } .m-x3l2-sp { margin: 64px !important; } .mt-x3l2-sp { margin-top: 64px !important; } .mb-x3l2-sp { margin-bottom: 64px !important; } .ml-x3l2-sp { margin-left: 64px !important; } .mr-x3l2-sp { margin-right: 64px !important; } .mx-x3l2-sp { margin-left: 64px !important; margin-right: 64px !important; } .my-x3l2-sp { margin-top: 64px !important; margin-bottom: 64px !important; } .p-x3l2-sp { padding: 64px !important; } .pt-x3l2-sp { padding-top: 64px !important; } .pb-x3l2-sp { padding-bottom: 64px !important; } .pl-x3l2-sp { padding-left: 64px !important; } .pr-x3l2-sp { padding-right: 64px !important; } .px-x3l2-sp { padding-left: 64px !important; padding-right: 64px !important; } .py-x3l2-sp { padding-top: 64px !important; padding-bottom: 64px !important; } .gap-x3l2-sp { --variable-gap: 64px; gap: 64px !important; } .m-x4l-sp { margin: 80px !important; } .mt-x4l-sp { margin-top: 80px !important; } .mb-x4l-sp { margin-bottom: 80px !important; } .ml-x4l-sp { margin-left: 80px !important; } .mr-x4l-sp { margin-right: 80px !important; } .mx-x4l-sp { margin-left: 80px !important; margin-right: 80px !important; } .my-x4l-sp { margin-top: 80px !important; margin-bottom: 80px !important; } .p-x4l-sp { padding: 80px !important; } .pt-x4l-sp { padding-top: 80px !important; } .pb-x4l-sp { padding-bottom: 80px !important; } .pl-x4l-sp { padding-left: 80px !important; } .pr-x4l-sp { padding-right: 80px !important; } .px-x4l-sp { padding-left: 80px !important; padding-right: 80px !important; } .py-x4l-sp { padding-top: 80px !important; padding-bottom: 80px !important; } .gap-x4l-sp { --variable-gap: 80px; gap: 80px !important; } .m-x5l-sp { margin: 96px !important; } .mt-x5l-sp { margin-top: 96px !important; } .mb-x5l-sp { margin-bottom: 96px !important; } .ml-x5l-sp { margin-left: 96px !important; } .mr-x5l-sp { margin-right: 96px !important; } .mx-x5l-sp { margin-left: 96px !important; margin-right: 96px !important; } .my-x5l-sp { margin-top: 96px !important; margin-bottom: 96px !important; } .p-x5l-sp { padding: 96px !important; } .pt-x5l-sp { padding-top: 96px !important; } .pb-x5l-sp { padding-bottom: 96px !important; } .pl-x5l-sp { padding-left: 96px !important; } .pr-x5l-sp { padding-right: 96px !important; } .px-x5l-sp { padding-left: 96px !important; padding-right: 96px !important; } .py-x5l-sp { padding-top: 96px !important; padding-bottom: 96px !important; } .gap-x5l-sp { --variable-gap: 96px; gap: 96px !important; } .m-x6l-sp { margin: 128px !important; } .mt-x6l-sp { margin-top: 128px !important; } .mb-x6l-sp { margin-bottom: 128px !important; } .ml-x6l-sp { margin-left: 128px !important; } .mr-x6l-sp { margin-right: 128px !important; } .mx-x6l-sp { margin-left: 128px !important; margin-right: 128px !important; } .my-x6l-sp { margin-top: 128px !important; margin-bottom: 128px !important; } .p-x6l-sp { padding: 128px !important; } .pt-x6l-sp { padding-top: 128px !important; } .pb-x6l-sp { padding-bottom: 128px !important; } .pl-x6l-sp { padding-left: 128px !important; } .pr-x6l-sp { padding-right: 128px !important; } .px-x6l-sp { padding-left: 128px !important; padding-right: 128px !important; } .py-x6l-sp { padding-top: 128px !important; padding-bottom: 128px !important; } .gap-x6l-sp { --variable-gap: 128px; gap: 128px !important; } .m-custom70-sp { margin: 70px !important; } .mt-custom70-sp { margin-top: 70px !important; } .mb-custom70-sp { margin-bottom: 70px !important; } .ml-custom70-sp { margin-left: 70px !important; } .mr-custom70-sp { margin-right: 70px !important; } .mx-custom70-sp { margin-left: 70px !important; margin-right: 70px !important; } .my-custom70-sp { margin-top: 70px !important; margin-bottom: 70px !important; } .p-custom70-sp { padding: 70px !important; } .pt-custom70-sp { padding-top: 70px !important; } .pb-custom70-sp { padding-bottom: 70px !important; } .pl-custom70-sp { padding-left: 70px !important; } .pr-custom70-sp { padding-right: 70px !important; } .px-custom70-sp { padding-left: 70px !important; padding-right: 70px !important; } .py-custom70-sp { padding-top: 70px !important; padding-bottom: 70px !important; } .gap-custom70-sp { --variable-gap: 70px; gap: 70px !important; } .m-custom36-sp { margin: 36px !important; } .mt-custom36-sp { margin-top: 36px !important; } .mb-custom36-sp { margin-bottom: 36px !important; } .ml-custom36-sp { margin-left: 36px !important; } .mr-custom36-sp { margin-right: 36px !important; } .mx-custom36-sp { margin-left: 36px !important; margin-right: 36px !important; } .my-custom36-sp { margin-top: 36px !important; margin-bottom: 36px !important; } .p-custom36-sp { padding: 36px !important; } .pt-custom36-sp { padding-top: 36px !important; } .pb-custom36-sp { padding-bottom: 36px !important; } .pl-custom36-sp { padding-left: 36px !important; } .pr-custom36-sp { padding-right: 36px !important; } .px-custom36-sp { padding-left: 36px !important; padding-right: 36px !important; } .py-custom36-sp { padding-top: 36px !important; padding-bottom: 36px !important; } .gap-custom36-sp { --variable-gap: 36px; gap: 36px !important; } .m-x2l2-sp { margin: 52px !important; } .mt-x2l2-sp { margin-top: 52px !important; } .mb-x2l2-sp { margin-bottom: 52px !important; } .ml-x2l2-sp { margin-left: 52px !important; } .mr-x2l2-sp { margin-right: 52px !important; } .mx-x2l2-sp { margin-left: 52px !important; margin-right: 52px !important; } .my-x2l2-sp { margin-top: 52px !important; margin-bottom: 52px !important; } .p-x2l2-sp { padding: 52px !important; } .pt-x2l2-sp { padding-top: 52px !important; } .pb-x2l2-sp { padding-bottom: 52px !important; } .pl-x2l2-sp { padding-left: 52px !important; } .pr-x2l2-sp { padding-right: 52px !important; } .px-x2l2-sp { padding-left: 52px !important; padding-right: 52px !important; } .py-x2l2-sp { padding-top: 52px !important; padding-bottom: 52px !important; } .gap-x2l2-sp { --variable-gap: 52px; gap: 52px !important; } .m-x2l3-sp { margin: 56px !important; } .mt-x2l3-sp { margin-top: 56px !important; } .mb-x2l3-sp { margin-bottom: 56px !important; } .ml-x2l3-sp { margin-left: 56px !important; } .mr-x2l3-sp { margin-right: 56px !important; } .mx-x2l3-sp { margin-left: 56px !important; margin-right: 56px !important; } .my-x2l3-sp { margin-top: 56px !important; margin-bottom: 56px !important; } .p-x2l3-sp { padding: 56px !important; } .pt-x2l3-sp { padding-top: 56px !important; } .pb-x2l3-sp { padding-bottom: 56px !important; } .pl-x2l3-sp { padding-left: 56px !important; } .pr-x2l3-sp { padding-right: 56px !important; } .px-x2l3-sp { padding-left: 56px !important; padding-right: 56px !important; } .py-x2l3-sp { padding-top: 56px !important; padding-bottom: 56px !important; } .gap-x2l3-sp { --variable-gap: 56px; gap: 56px !important; } .m-2line-sp { margin: 14px !important; } .mt-2line-sp { margin-top: 14px !important; } .mb-2line-sp { margin-bottom: 14px !important; } .ml-2line-sp { margin-left: 14px !important; } .mr-2line-sp { margin-right: 14px !important; } .mx-2line-sp { margin-left: 14px !important; margin-right: 14px !important; } .my-2line-sp { margin-top: 14px !important; margin-bottom: 14px !important; } .p-2line-sp { padding: 14px !important; } .pt-2line-sp { padding-top: 14px !important; } .pb-2line-sp { padding-bottom: 14px !important; } .pl-2line-sp { padding-left: 14px !important; } .pr-2line-sp { padding-right: 14px !important; } .px-2line-sp { padding-left: 14px !important; padding-right: 14px !important; } .py-2line-sp { padding-top: 14px !important; padding-bottom: 14px !important; } .gap-2line-sp { --variable-gap: 14px; gap: 14px !important; } } @media screen and (min-width: 768px) { .mx-auto-pc { margin-inline: auto !important; } .m-0-pc { margin: 0 !important; } .mt-0-pc { margin-top: 0 !important; } .mb-0-pc { margin-bottom: 0 !important; } .ml-0-pc { margin-left: 0 !important; } .mr-0-pc { margin-right: 0 !important; } .mx-0-pc { margin-left: 0 !important; margin-right: 0 !important; } .my-0-pc { margin-top: 0 !important; margin-bottom: 0 !important; } .p-0-pc { padding: 0 !important; } .pt-0-pc { padding-top: 0 !important; } .pb-0-pc { padding-bottom: 0 !important; } .pl-0-pc { padding-left: 0 !important; } .pr-0-pc { padding-right: 0 !important; } .px-0-pc { padding-left: 0 !important; padding-right: 0 !important; } .py-0-pc { padding-top: 0 !important; padding-bottom: 0 !important; } .gap-0-pc { --variable-gap: 0; gap: 0 !important; } .m-x4s-pc { margin: 4px !important; } .mt-x4s-pc { margin-top: 4px !important; } .mb-x4s-pc { margin-bottom: 4px !important; } .ml-x4s-pc { margin-left: 4px !important; } .mr-x4s-pc { margin-right: 4px !important; } .mx-x4s-pc { margin-left: 4px !important; margin-right: 4px !important; } .my-x4s-pc { margin-top: 4px !important; margin-bottom: 4px !important; } .p-x4s-pc { padding: 4px !important; } .pt-x4s-pc { padding-top: 4px !important; } .pb-x4s-pc { padding-bottom: 4px !important; } .pl-x4s-pc { padding-left: 4px !important; } .pr-x4s-pc { padding-right: 4px !important; } .px-x4s-pc { padding-left: 4px !important; padding-right: 4px !important; } .py-x4s-pc { padding-top: 4px !important; padding-bottom: 4px !important; } .gap-x4s-pc { --variable-gap: 4px; gap: 4px !important; } .m-x3s-pc { margin: 8px !important; } .mt-x3s-pc { margin-top: 8px !important; } .mb-x3s-pc { margin-bottom: 8px !important; } .ml-x3s-pc { margin-left: 8px !important; } .mr-x3s-pc { margin-right: 8px !important; } .mx-x3s-pc { margin-left: 8px !important; margin-right: 8px !important; } .my-x3s-pc { margin-top: 8px !important; margin-bottom: 8px !important; } .p-x3s-pc { padding: 8px !important; } .pt-x3s-pc { padding-top: 8px !important; } .pb-x3s-pc { padding-bottom: 8px !important; } .pl-x3s-pc { padding-left: 8px !important; } .pr-x3s-pc { padding-right: 8px !important; } .px-x3s-pc { padding-left: 8px !important; padding-right: 8px !important; } .py-x3s-pc { padding-top: 8px !important; padding-bottom: 8px !important; } .gap-x3s-pc { --variable-gap: 8px; gap: 8px !important; } .m-x2s-pc { margin: 12px !important; } .mt-x2s-pc { margin-top: 12px !important; } .mb-x2s-pc { margin-bottom: 12px !important; } .ml-x2s-pc { margin-left: 12px !important; } .mr-x2s-pc { margin-right: 12px !important; } .mx-x2s-pc { margin-left: 12px !important; margin-right: 12px !important; } .my-x2s-pc { margin-top: 12px !important; margin-bottom: 12px !important; } .p-x2s-pc { padding: 12px !important; } .pt-x2s-pc { padding-top: 12px !important; } .pb-x2s-pc { padding-bottom: 12px !important; } .pl-x2s-pc { padding-left: 12px !important; } .pr-x2s-pc { padding-right: 12px !important; } .px-x2s-pc { padding-left: 12px !important; padding-right: 12px !important; } .py-x2s-pc { padding-top: 12px !important; padding-bottom: 12px !important; } .gap-x2s-pc { --variable-gap: 12px; gap: 12px !important; } .m-xs-pc { margin: 16px !important; } .mt-xs-pc { margin-top: 16px !important; } .mb-xs-pc { margin-bottom: 16px !important; } .ml-xs-pc { margin-left: 16px !important; } .mr-xs-pc { margin-right: 16px !important; } .mx-xs-pc { margin-left: 16px !important; margin-right: 16px !important; } .my-xs-pc { margin-top: 16px !important; margin-bottom: 16px !important; } .p-xs-pc { padding: 16px !important; } .pt-xs-pc { padding-top: 16px !important; } .pb-xs-pc { padding-bottom: 16px !important; } .pl-xs-pc { padding-left: 16px !important; } .pr-xs-pc { padding-right: 16px !important; } .px-xs-pc { padding-left: 16px !important; padding-right: 16px !important; } .py-xs-pc { padding-top: 16px !important; padding-bottom: 16px !important; } .gap-xs-pc { --variable-gap: 16px; gap: 16px !important; } .m-s-pc { margin: 20px !important; } .mt-s-pc { margin-top: 20px !important; } .mb-s-pc { margin-bottom: 20px !important; } .ml-s-pc { margin-left: 20px !important; } .mr-s-pc { margin-right: 20px !important; } .mx-s-pc { margin-left: 20px !important; margin-right: 20px !important; } .my-s-pc { margin-top: 20px !important; margin-bottom: 20px !important; } .p-s-pc { padding: 20px !important; } .pt-s-pc { padding-top: 20px !important; } .pb-s-pc { padding-bottom: 20px !important; } .pl-s-pc { padding-left: 20px !important; } .pr-s-pc { padding-right: 20px !important; } .px-s-pc { padding-left: 20px !important; padding-right: 20px !important; } .py-s-pc { padding-top: 20px !important; padding-bottom: 20px !important; } .gap-s-pc { --variable-gap: 20px; gap: 20px !important; } .m-m-pc { margin: 24px !important; } .mt-m-pc { margin-top: 24px !important; } .mb-m-pc { margin-bottom: 24px !important; } .ml-m-pc { margin-left: 24px !important; } .mr-m-pc { margin-right: 24px !important; } .mx-m-pc { margin-left: 24px !important; margin-right: 24px !important; } .my-m-pc { margin-top: 24px !important; margin-bottom: 24px !important; } .p-m-pc { padding: 24px !important; } .pt-m-pc { padding-top: 24px !important; } .pb-m-pc { padding-bottom: 24px !important; } .pl-m-pc { padding-left: 24px !important; } .pr-m-pc { padding-right: 24px !important; } .px-m-pc { padding-left: 24px !important; padding-right: 24px !important; } .py-m-pc { padding-top: 24px !important; padding-bottom: 24px !important; } .gap-m-pc { --variable-gap: 24px; gap: 24px !important; } .m-l-pc { margin: 32px !important; } .mt-l-pc { margin-top: 32px !important; } .mb-l-pc { margin-bottom: 32px !important; } .ml-l-pc { margin-left: 32px !important; } .mr-l-pc { margin-right: 32px !important; } .mx-l-pc { margin-left: 32px !important; margin-right: 32px !important; } .my-l-pc { margin-top: 32px !important; margin-bottom: 32px !important; } .p-l-pc { padding: 32px !important; } .pt-l-pc { padding-top: 32px !important; } .pb-l-pc { padding-bottom: 32px !important; } .pl-l-pc { padding-left: 32px !important; } .pr-l-pc { padding-right: 32px !important; } .px-l-pc { padding-left: 32px !important; padding-right: 32px !important; } .py-l-pc { padding-top: 32px !important; padding-bottom: 32px !important; } .gap-l-pc { --variable-gap: 32px; gap: 32px !important; } .m-xl-pc { margin: 40px !important; } .mt-xl-pc { margin-top: 40px !important; } .mb-xl-pc { margin-bottom: 40px !important; } .ml-xl-pc { margin-left: 40px !important; } .mr-xl-pc { margin-right: 40px !important; } .mx-xl-pc { margin-left: 40px !important; margin-right: 40px !important; } .my-xl-pc { margin-top: 40px !important; margin-bottom: 40px !important; } .p-xl-pc { padding: 40px !important; } .pt-xl-pc { padding-top: 40px !important; } .pb-xl-pc { padding-bottom: 40px !important; } .pl-xl-pc { padding-left: 40px !important; } .pr-xl-pc { padding-right: 40px !important; } .px-xl-pc { padding-left: 40px !important; padding-right: 40px !important; } .py-xl-pc { padding-top: 40px !important; padding-bottom: 40px !important; } .gap-xl-pc { --variable-gap: 40px; gap: 40px !important; } .m-xl2-pc { margin: 44px !important; } .mt-xl2-pc { margin-top: 44px !important; } .mb-xl2-pc { margin-bottom: 44px !important; } .ml-xl2-pc { margin-left: 44px !important; } .mr-xl2-pc { margin-right: 44px !important; } .mx-xl2-pc { margin-left: 44px !important; margin-right: 44px !important; } .my-xl2-pc { margin-top: 44px !important; margin-bottom: 44px !important; } .p-xl2-pc { padding: 44px !important; } .pt-xl2-pc { padding-top: 44px !important; } .pb-xl2-pc { padding-bottom: 44px !important; } .pl-xl2-pc { padding-left: 44px !important; } .pr-xl2-pc { padding-right: 44px !important; } .px-xl2-pc { padding-left: 44px !important; padding-right: 44px !important; } .py-xl2-pc { padding-top: 44px !important; padding-bottom: 44px !important; } .gap-xl2-pc { --variable-gap: 44px; gap: 44px !important; } .m-x2l-pc { margin: 48px !important; } .mt-x2l-pc { margin-top: 48px !important; } .mb-x2l-pc { margin-bottom: 48px !important; } .ml-x2l-pc { margin-left: 48px !important; } .mr-x2l-pc { margin-right: 48px !important; } .mx-x2l-pc { margin-left: 48px !important; margin-right: 48px !important; } .my-x2l-pc { margin-top: 48px !important; margin-bottom: 48px !important; } .p-x2l-pc { padding: 48px !important; } .pt-x2l-pc { padding-top: 48px !important; } .pb-x2l-pc { padding-bottom: 48px !important; } .pl-x2l-pc { padding-left: 48px !important; } .pr-x2l-pc { padding-right: 48px !important; } .px-x2l-pc { padding-left: 48px !important; padding-right: 48px !important; } .py-x2l-pc { padding-top: 48px !important; padding-bottom: 48px !important; } .gap-x2l-pc { --variable-gap: 48px; gap: 48px !important; } .m-x3l-pc { margin: 60px !important; } .mt-x3l-pc { margin-top: 60px !important; } .mb-x3l-pc { margin-bottom: 60px !important; } .ml-x3l-pc { margin-left: 60px !important; } .mr-x3l-pc { margin-right: 60px !important; } .mx-x3l-pc { margin-left: 60px !important; margin-right: 60px !important; } .my-x3l-pc { margin-top: 60px !important; margin-bottom: 60px !important; } .p-x3l-pc { padding: 60px !important; } .pt-x3l-pc { padding-top: 60px !important; } .pb-x3l-pc { padding-bottom: 60px !important; } .pl-x3l-pc { padding-left: 60px !important; } .pr-x3l-pc { padding-right: 60px !important; } .px-x3l-pc { padding-left: 60px !important; padding-right: 60px !important; } .py-x3l-pc { padding-top: 60px !important; padding-bottom: 60px !important; } .gap-x3l-pc { --variable-gap: 60px; gap: 60px !important; } .m-x3l2-pc { margin: 64px !important; } .mt-x3l2-pc { margin-top: 64px !important; } .mb-x3l2-pc { margin-bottom: 64px !important; } .ml-x3l2-pc { margin-left: 64px !important; } .mr-x3l2-pc { margin-right: 64px !important; } .mx-x3l2-pc { margin-left: 64px !important; margin-right: 64px !important; } .my-x3l2-pc { margin-top: 64px !important; margin-bottom: 64px !important; } .p-x3l2-pc { padding: 64px !important; } .pt-x3l2-pc { padding-top: 64px !important; } .pb-x3l2-pc { padding-bottom: 64px !important; } .pl-x3l2-pc { padding-left: 64px !important; } .pr-x3l2-pc { padding-right: 64px !important; } .px-x3l2-pc { padding-left: 64px !important; padding-right: 64px !important; } .py-x3l2-pc { padding-top: 64px !important; padding-bottom: 64px !important; } .gap-x3l2-pc { --variable-gap: 64px; gap: 64px !important; } .m-x4l-pc { margin: 80px !important; } .mt-x4l-pc { margin-top: 80px !important; } .mb-x4l-pc { margin-bottom: 80px !important; } .ml-x4l-pc { margin-left: 80px !important; } .mr-x4l-pc { margin-right: 80px !important; } .mx-x4l-pc { margin-left: 80px !important; margin-right: 80px !important; } .my-x4l-pc { margin-top: 80px !important; margin-bottom: 80px !important; } .p-x4l-pc { padding: 80px !important; } .pt-x4l-pc { padding-top: 80px !important; } .pb-x4l-pc { padding-bottom: 80px !important; } .pl-x4l-pc { padding-left: 80px !important; } .pr-x4l-pc { padding-right: 80px !important; } .px-x4l-pc { padding-left: 80px !important; padding-right: 80px !important; } .py-x4l-pc { padding-top: 80px !important; padding-bottom: 80px !important; } .gap-x4l-pc { --variable-gap: 80px; gap: 80px !important; } .m-x5l-pc { margin: 96px !important; } .mt-x5l-pc { margin-top: 96px !important; } .mb-x5l-pc { margin-bottom: 96px !important; } .ml-x5l-pc { margin-left: 96px !important; } .mr-x5l-pc { margin-right: 96px !important; } .mx-x5l-pc { margin-left: 96px !important; margin-right: 96px !important; } .my-x5l-pc { margin-top: 96px !important; margin-bottom: 96px !important; } .p-x5l-pc { padding: 96px !important; } .pt-x5l-pc { padding-top: 96px !important; } .pb-x5l-pc { padding-bottom: 96px !important; } .pl-x5l-pc { padding-left: 96px !important; } .pr-x5l-pc { padding-right: 96px !important; } .px-x5l-pc { padding-left: 96px !important; padding-right: 96px !important; } .py-x5l-pc { padding-top: 96px !important; padding-bottom: 96px !important; } .gap-x5l-pc { --variable-gap: 96px; gap: 96px !important; } .m-x6l-pc { margin: 128px !important; } .mt-x6l-pc { margin-top: 128px !important; } .mb-x6l-pc { margin-bottom: 128px !important; } .ml-x6l-pc { margin-left: 128px !important; } .mr-x6l-pc { margin-right: 128px !important; } .mx-x6l-pc { margin-left: 128px !important; margin-right: 128px !important; } .my-x6l-pc { margin-top: 128px !important; margin-bottom: 128px !important; } .p-x6l-pc { padding: 128px !important; } .pt-x6l-pc { padding-top: 128px !important; } .pb-x6l-pc { padding-bottom: 128px !important; } .pl-x6l-pc { padding-left: 128px !important; } .pr-x6l-pc { padding-right: 128px !important; } .px-x6l-pc { padding-left: 128px !important; padding-right: 128px !important; } .py-x6l-pc { padding-top: 128px !important; padding-bottom: 128px !important; } .gap-x6l-pc { --variable-gap: 128px; gap: 128px !important; } .m-custom70-pc { margin: 70px !important; } .mt-custom70-pc { margin-top: 70px !important; } .mb-custom70-pc { margin-bottom: 70px !important; } .ml-custom70-pc { margin-left: 70px !important; } .mr-custom70-pc { margin-right: 70px !important; } .mx-custom70-pc { margin-left: 70px !important; margin-right: 70px !important; } .my-custom70-pc { margin-top: 70px !important; margin-bottom: 70px !important; } .p-custom70-pc { padding: 70px !important; } .pt-custom70-pc { padding-top: 70px !important; } .pb-custom70-pc { padding-bottom: 70px !important; } .pl-custom70-pc { padding-left: 70px !important; } .pr-custom70-pc { padding-right: 70px !important; } .px-custom70-pc { padding-left: 70px !important; padding-right: 70px !important; } .py-custom70-pc { padding-top: 70px !important; padding-bottom: 70px !important; } .gap-custom70-pc { --variable-gap: 70px; gap: 70px !important; } .m-custom36-pc { margin: 36px !important; } .mt-custom36-pc { margin-top: 36px !important; } .mb-custom36-pc { margin-bottom: 36px !important; } .ml-custom36-pc { margin-left: 36px !important; } .mr-custom36-pc { margin-right: 36px !important; } .mx-custom36-pc { margin-left: 36px !important; margin-right: 36px !important; } .my-custom36-pc { margin-top: 36px !important; margin-bottom: 36px !important; } .p-custom36-pc { padding: 36px !important; } .pt-custom36-pc { padding-top: 36px !important; } .pb-custom36-pc { padding-bottom: 36px !important; } .pl-custom36-pc { padding-left: 36px !important; } .pr-custom36-pc { padding-right: 36px !important; } .px-custom36-pc { padding-left: 36px !important; padding-right: 36px !important; } .py-custom36-pc { padding-top: 36px !important; padding-bottom: 36px !important; } .gap-custom36-pc { --variable-gap: 36px; gap: 36px !important; } .m-x2l2-pc { margin: 52px !important; } .mt-x2l2-pc { margin-top: 52px !important; } .mb-x2l2-pc { margin-bottom: 52px !important; } .ml-x2l2-pc { margin-left: 52px !important; } .mr-x2l2-pc { margin-right: 52px !important; } .mx-x2l2-pc { margin-left: 52px !important; margin-right: 52px !important; } .my-x2l2-pc { margin-top: 52px !important; margin-bottom: 52px !important; } .p-x2l2-pc { padding: 52px !important; } .pt-x2l2-pc { padding-top: 52px !important; } .pb-x2l2-pc { padding-bottom: 52px !important; } .pl-x2l2-pc { padding-left: 52px !important; } .pr-x2l2-pc { padding-right: 52px !important; } .px-x2l2-pc { padding-left: 52px !important; padding-right: 52px !important; } .py-x2l2-pc { padding-top: 52px !important; padding-bottom: 52px !important; } .gap-x2l2-pc { --variable-gap: 52px; gap: 52px !important; } .m-x2l3-pc { margin: 56px !important; } .mt-x2l3-pc { margin-top: 56px !important; } .mb-x2l3-pc { margin-bottom: 56px !important; } .ml-x2l3-pc { margin-left: 56px !important; } .mr-x2l3-pc { margin-right: 56px !important; } .mx-x2l3-pc { margin-left: 56px !important; margin-right: 56px !important; } .my-x2l3-pc { margin-top: 56px !important; margin-bottom: 56px !important; } .p-x2l3-pc { padding: 56px !important; } .pt-x2l3-pc { padding-top: 56px !important; } .pb-x2l3-pc { padding-bottom: 56px !important; } .pl-x2l3-pc { padding-left: 56px !important; } .pr-x2l3-pc { padding-right: 56px !important; } .px-x2l3-pc { padding-left: 56px !important; padding-right: 56px !important; } .py-x2l3-pc { padding-top: 56px !important; padding-bottom: 56px !important; } .gap-x2l3-pc { --variable-gap: 56px; gap: 56px !important; } .m-2line-pc { margin: 14px !important; } .mt-2line-pc { margin-top: 14px !important; } .mb-2line-pc { margin-bottom: 14px !important; } .ml-2line-pc { margin-left: 14px !important; } .mr-2line-pc { margin-right: 14px !important; } .mx-2line-pc { margin-left: 14px !important; margin-right: 14px !important; } .my-2line-pc { margin-top: 14px !important; margin-bottom: 14px !important; } .p-2line-pc { padding: 14px !important; } .pt-2line-pc { padding-top: 14px !important; } .pb-2line-pc { padding-bottom: 14px !important; } .pl-2line-pc { padding-left: 14px !important; } .pr-2line-pc { padding-right: 14px !important; } .px-2line-pc { padding-left: 14px !important; padding-right: 14px !important; } .py-2line-pc { padding-top: 14px !important; padding-bottom: 14px !important; } .gap-2line-pc { --variable-gap: 14px; gap: 14px !important; } } .italic { font-style: italic; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } .font-light { font-weight: 300 !important; } .font-normal { font-weight: 400 !important; } .font-medium { font-weight: 500 !important; } .font-semibold { font-weight: 600 !important; } .font-bold { font-weight: 700 !important; } .font-black { font-weight: 900 !important; } .l-header { width: 100%; position: fixed; left: 0; top: 0; z-index: 1001; transition: 0.3s ease-in-out; } .l-header.is-menu-open { z-index: 999999; } .l-header__inner { width: 1240px; max-width: 100%; margin-inline: auto; padding-inline: 20px; } .l-header__top { position: relative; z-index: 1; background: #fff; padding: 10px 0; } .l-header__top .bg-gradient { position: absolute; width: 100%; top: 100%; left: 0; height: 100%; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 8%, rgba(255, 255, 255, 0.1) 13%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 25%); } .l-header__top-inner { display: flex; align-items: center; height: 100%; position: relative; z-index: 1; gap: 0 40px; justify-content: flex-end; } @media screen and (min-width: 768px) and (max-width: 940px) { .l-header__top-inner { flex-wrap: wrap; } } .l-header__logo { flex-shrink: 0; display: block; } .l-header__logo img { display: block; width: 107px; } .l-header__utility { margin-left: auto; } .l-header__utility-list { display: flex; align-items: center; gap: 40px; } .l-header__utility-item { font-size: 0; line-height: 0; } .l-header__utility-link, .l-header__corporate-link { display: inline-flex; align-items: center; color: #727272; font-size: 13px; line-height: 1.6153846154; font-weight: 700; white-space: nowrap; transition: color 0.3s ease; } @media (hover: hover) { .l-header__utility-link:hover, .l-header__corporate-link:hover { color: #333333; opacity: 1; } } .l-header__actions { display: flex; align-items: center; gap: 21px; } .l-header__menu-toggle { display: none; } .l-header__login { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 181px; height: 40px; padding: 0 20px; border-radius: 999px; color: #333333; font-size: 14px; line-height: 1; white-space: nowrap; transition: all 0.3s ease; background-color: #E3CB8C; } .l-header__login-text { font-size: 14px; font-weight: 700; line-height: 1.7142857143; position: relative; z-index: 1; } .l-header__login-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 100px; transition: all 0.3s ease; } .l-header__login-icon::after { content: ""; position: absolute; top: 50%; left: calc(50% + 1px); transform: translate(-50%, -50%); width: 8px; height: 11px; border-radius: 50%; mask-image: url("/7card/usr/file/attachment/icon_arrow_01.svg"); mask-size: contain; background-color: #9D843E; transition: all 0.3s ease; } .l-header__login-icon::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: #ffffff; border-radius: 50px; transform: translate(-50%, -50%); left: 50%; top: 50%; transition: all 0.3s ease; } @media (hover: hover) { .l-header__login:hover { opacity: 1; } .l-header__login:hover .l-header__login-icon:before { transform: translate(-50%, -50%) scale(1.15); } } .l-header__search { position: relative; display: flex; align-items: center; width: 120px; padding-left: 25px; } .l-header__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .l-header__search-input { width: 100%; min-width: 0; padding-left: 0; border: 0; outline: 0; color: #555; font: inherit; font-size: 13px; line-height: 1.6153846154; } .l-header__search-input::placeholder { color: rgba(114, 114, 114, 0.68); opacity: 1; font-weight: 700; } .l-header__search-btn { position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 1; width: 20px; height: 20px; display: flex; transition: opacity 0.3s ease; background: transparent url("/7card/usr/file/attachment/icon_search.svg") left center/19px 19px no-repeat; } .l-header__search-btn:hover { opacity: 0.75; } .l-header__primary { position: relative; background: rgba(255, 255, 255, 0.5); } .l-header__primary::before { content: ""; position: absolute; width: 100%; inset: 0; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(1.5px); } .l-header__primary-list { display: flex; max-width: 1200px; justify-content: center; height: 100%; margin: 0 auto; } .l-header__sp-menu { display: none; } .l-header__primary-item { position: relative; display: flex; justify-content: center; padding-top: 15px; width: 232px; padding: 15px 12px 0; } .l-header__primary-item + .l-header__primary-item::before { position: absolute; top: 15px; left: 0; width: 1px; height: 29px; background: #d9dee5; content: ""; } .l-header__primary-link { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #333333; font-size: 16px; line-height: 1.25; font-weight: 700; text-align: center; transition: color 0.3s ease; position: relative; width: 100%; padding-bottom: 8px; } .l-header__primary-link:after { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; opacity: 0; transition: opacity 0.3s ease-in; background: linear-gradient(90deg, #E99495 0%, #EBB7CE 17%, #FDC689 34%, #F6EA91 50%, #B9D989 66%, #67C5EA 83%, #B0ABD5 100%); } .l-header__primary-link span.en { font-size: 13px; line-height: 1.6153846154; } .l-header__primary-link span:only-child { font-size: 16px; } @media (hover: hover) { .l-header__primary-link:hover:after { opacity: 1; } } .l-header__primary-link.is-active:after { opacity: 1; } .l-header .line-pink { --header-menu-accent: #EBB7CE; } .l-header .line-green2 { --header-menu-accent: #B9D989; } .l-header .line-blue { --header-menu-accent: #67C5EA; } .l-header .line-purple { --header-menu-accent: #B0ABD5; } .l-header .line-orange { --header-menu-accent: #FDC689; } .l-header .line-green { --header-menu-accent: #59B770; } .l-header__dropdown { --header-dropdown-accent: #ebb7ce; display: none; position: absolute; top: 100%; left: 0; width: 100%; min-height: calc(100vh - 127px); z-index: 30; color: #000000; } .l-header__dropdown.is-open { display: block; animation: headerDropdownFadeIn 0.24s ease forwards; } .l-header__dropdown--green { --header-dropdown-accent: #b9d989; } .l-header__dropdown--blue { --header-dropdown-accent: #67c5ea; } .l-header__dropdown--purple { --header-dropdown-accent: #b0abd5; } .l-header__dropdown--orange { --header-dropdown-accent: #fdc689; } .l-header__dropdown-panel { position: relative; z-index: 2; background: #fff; } .l-header__dropdown-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px 36px; } .l-header__dropdown-head { border-top: 1px solid #D9DDE3; border-bottom: 1px solid #D9DDE3; } .l-header__dropdown-head .l-header__inner { min-height: 91px; display: flex; align-items: center; justify-content: space-between; } .l-header__dropdown-top-link, .l-header__dropdown-heading { position: relative; display: inline-flex; align-items: center; gap: 14px; font-size: 18px; line-height: 1.4; text-decoration: none; font-weight: 700; } .l-header__dropdown-top-link::after, .l-header__dropdown-heading::after { display: inline-block; width: 8px; height: 11px; background: var(--header-dropdown-accent); content: ""; mask: url("/7card/usr/file/attachment/icon_arrow_01.svg") center/contain no-repeat; } .l-header__dropdown-close { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: #111; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; } .l-header__dropdown-close-icon { width: 20px; height: 20px; background: url(/7card/usr/file/attachment/icon_plus.svg) no-repeat; background-size: contain; } .l-header__dropdown-content { display: flex; gap: 25px; padding: 35px 0 40px; } .l-header__dropdown-column { width: 220px; display: flex; flex-direction: column; } .l-header__dropdown-heading { gap: 8px; font-size: 14px; line-height: 1.7142857143; } .l-header__dropdown-heading--sub { margin-top: 20px; } .l-header__dropdown-list { margin-top: 15px; } .l-header__dropdown-item { margin-top: 11px; } .l-header__dropdown-link { position: relative; display: inline-block; padding-left: 14px; font-size: 14px; line-height: 1.7142857143; } .l-header__dropdown-link::before { position: absolute; top: 12px; left: 0; width: 6px; height: 2px; background: var(--header-dropdown-accent); content: ""; } .l-header__dropdown-overlay { display: block; width: 100%; height: 100vh; margin: 0; padding: 0; border: 0; background: rgba(133, 139, 151, 0.9); cursor: pointer; } @keyframes headerDropdownFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @media screen and (max-width: 767px) { .l-header__inner { width: 100%; padding-inline: 15px; } .l-header__top { padding: 8px 0; min-height: 60px; } .l-header__top-inner { gap: 8px; } .l-header__top-inner h1 { flex-shrink: 0; } .l-header__logo img { width: 86px; } .l-header__utility-list { gap: 0; } .l-header__utility-link { display: none; } .l-header__utility-link--faq { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 64px; width: 64px; height: 42px; padding: 0; color: #B39F67; gap: 3px; font-size: 7px; font-weight: 700; line-height: 1; transform-origin: center; background-color: #ffffff; border: 1px solid #9D843E; box-shadow: 0px 2px 0px #9D843E; border-radius: 8px; } .l-header__utility-link--faq::before { content: ""; width: 18px; height: 18px; background: #B39F67; mask: url("/7card/usr/file/attachment/icon_faq.svg") center/contain no-repeat; } .l-header__search, .l-header__corporate-link { display: none; } .l-header__actions { margin-left: 0; } .l-header__login { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 64px; width: 64px; height: 42px; padding: 0; color: #B39F67; gap: 3px; font-size: 7px; font-weight: 700; line-height: 1; transform-origin: center; background-color: #ffffff; border: 1px solid #9D843E; box-shadow: 0px 2px 0px #9D843E; border-radius: 8px; } .l-header__login::before { content: ""; width: 15px; height: 15px; background: #B39F67; mask: url("/7card/usr/file/attachment/icon_person.svg") center/contain no-repeat; position: relative; border-radius: 0; } .l-header__login:after { content: none; } .l-header__login-text { max-width: 100%; font-size: 7px; line-height: 1; transform-origin: center; } .l-header__login-icon { display: none; } .l-header__menu-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; min-width: 64px; width: 64px; height: 42px; padding: 0; color: #B39F67; gap: 3px; font-size: 7px; font-weight: 700; line-height: 1; transform-origin: center; background-color: #ffffff; border: 1px solid #9D843E; box-shadow: 0px 2px 0px #9D843E; border-radius: 8px; } .l-header__menu-icon { display: block; width: 24px; height: 15px; position: relative; } .l-header__menu-icon span { display: inline-block; transition: all 0.4s; position: absolute; width: 18px; height: 2px; background: #B39F67; top: 50%; left: 50%; transform: translate(-50%, -50%); } .l-header__menu-icon span:nth-of-type(1) { margin-top: -6px; } .l-header__menu-icon span:nth-of-type(3) { margin-top: 6px; } .l-header__menu-text { font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: 0; } .l-header.is-menu-open .l-header__primary { right: 0; } .l-header__primary-list { display: block; max-width: none; height: auto; padding: 10px 15px 16px; } .l-header__primary-item { display: block; padding: 0; } .l-header__primary-item + .l-header__primary-item { margin-top: 8px; } .l-header__primary-item + .l-header__primary-item::before { display: none; } .l-header__primary-link { align-items: flex-start; min-height: 48px; padding: 10px 42px 10px 16px; border: 1px solid #d9dde3; border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.35; text-align: left; } .l-header__primary-link::before { content: ""; position: absolute; top: 50%; right: 17px; width: 8px; height: 8px; border-right: 2px solid #858B97; border-bottom: 2px solid #858B97; transform: translateY(-65%) rotate(45deg); } .l-header__primary-link::after { top: 0; bottom: auto; width: 5px; height: 100%; opacity: 1; border-radius: 8px 0 0 8px; } .l-header__primary-link span.en { font-size: 11px; line-height: 1.2; } .l-header__primary-link span:only-child { font-size: 14px; } .l-header__primary-link.is-active::before { transform: translateY(-35%) rotate(225deg); } .l-header__dropdown { position: absolute; top: 60px; min-height: calc(100vh - 60px); } .l-header__dropdown.is-open { animation: headerMenuFadeIn 0.24s ease forwards; } .l-header__dropdown-panel { max-height: calc(100vh - 60px); overflow-y: auto; box-shadow: 0 12px 26px rgba(38, 52, 74, 0.14); } .l-header__dropdown-head { border-top: 0; border-bottom: 0; padding-top: 16px; } .l-header__dropdown-head .l-header__inner { min-height: auto; padding: 0; } .l-header__dropdown-top-link { display: flex; justify-content: flex-start; width: 100%; min-height: 22px; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; color: #333333; font-size: 13px; font-weight: 700; line-height: 1.6923076923; } .l-header__dropdown-top-link:after { content: none; } .l-header__dropdown-top-link:before { content: ""; position: absolute; top: 11px; left: 0; width: 6px; height: 1px; background: var(--header-dropdown-accent); } .l-header__dropdown-content { display: block; padding: 18px 0 24px; } .l-header__dropdown-column { width: 100%; } .l-header__dropdown-column + .l-header__dropdown-column { margin-top: 18px; padding-top: 18px; border-top: 1px solid #edf0f3; } .l-header__dropdown-heading { display: flex; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border: 1px solid #edf0f3; border-left: 5px solid var(--header-dropdown-accent); border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.45; } .l-header__dropdown-list { margin-top: 10px; } .l-header__dropdown-item { margin-top: 0; border-bottom: 1px solid #edf0f3; } .l-header__dropdown-link { display: block; padding: 11px 10px 11px 20px; font-size: 13px; line-height: 1.5; } .l-header__dropdown-link::before { top: 20px; left: 8px; } .l-header::before { content: ""; position: fixed; inset: 0; z-index: 21; background: rgba(133, 139, 151, 0.7); opacity: 0; visibility: hidden; transition: all 0.3s ease; } .l-header.is-menu-open::before { visibility: visible; opacity: 1; } .l-header.is-menu-open .l-header__top { background: transparent; pointer-events: none; } .l-header.is-menu-open .l-header__top .bg-gradient { display: none; } .l-header__primary { position: fixed; top: 0; right: -100%; left: auto; z-index: 22; width: calc(100vw - 56px); max-width: 319px; height: 100vh; height: 100dvh; padding: 78px 24px 40px; overflow-y: auto; background: #fff; box-shadow: none; transition: all 0.3s ease; } .l-header__primary::before { content: none; } .l-header__primary .btn-clode-menu { position: absolute; top: 20px; right: 20px; } .l-header__primary-list { padding: 0; } .l-header__primary-item { width: 100%; } .l-header__primary-item + .l-header__primary-item { margin-top: 24px; } .l-header__primary-link { flex-direction: row; align-items: center; justify-content: flex-start; min-height: 20px; padding: 0 24px 0 0; border: 0; border-radius: 0; background: transparent; color: #333333; font-size: 13px; line-height: 1.5384615385; text-align: left; } .l-header__primary-link::before { content: ""; position: absolute; top: 50%; right: 1px; width: 11px; height: 11px; mask-image: url("/7card/usr/file/attachment/icon_arrow_01.svg"); mask-size: contain; mask-position: center; mask-repeat: no-repeat; background-color: #9D843E; transform: translateY(-50%) rotate(90deg); } .l-header__primary-link::after { content: none; } .l-header__primary-link span.en, .l-header__primary-link span:only-child { font-size: 13px; line-height: 1.5384615385; } .l-header__primary-link.is-active::before { transform: translateY(-50%) rotate(-90deg); } .l-header__dropdown { display: none; position: static; width: 100%; min-height: 0; margin: 0; overflow: hidden; } .l-header__dropdown.is-open { display: none; animation: none; } .l-header__dropdown-panel { max-height: none; overflow: visible; box-shadow: none; background: transparent; } .l-header__dropdown-close, .l-header__dropdown-overlay { display: none; } .l-header__dropdown-body .l-header__inner { width: 100%; padding: 0; } .l-header__dropdown-content { display: block; padding: 8px 0 0; } .l-header__dropdown-column { width: 100%; } .l-header__dropdown-column + .l-header__dropdown-column { margin-top: 8px; padding-top: 0; border-top: 0; } .l-header__dropdown-heading { display: flex; justify-content: flex-start; width: 100%; min-height: 22px; padding: 0 0 0 14px; border: 0; border-radius: 0; background: transparent; color: #333333; font-size: 13px; font-weight: 400; line-height: 1.6923076923; } .l-header__dropdown-heading::before { content: ""; position: absolute; top: 11px; left: 0; width: 6px; height: 1px; background: var(--header-dropdown-accent); } .l-header__dropdown-heading::after { content: none; } .l-header__dropdown-heading--sub { margin-top: 8px; } .l-header__dropdown-list { display: none; } .l-header__sp-menu { display: block; margin-top: 24px; } .l-header__sp-link-item + .l-header__sp-link-item { margin-top: 24px; } .l-header__sp-link { display: block; min-height: 20px; color: #727272; font-size: 13px; font-weight: 700; line-height: 1.5384615385; } .l-header__sp-search { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; margin-top: 32px; padding: 0 23px 0 24px; border: 1px solid #D9DDE3; border-radius: 50px; background: #F5F7FB; } .l-header__sp-search-input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #333333; font-size: 13px; line-height: 1.5384615385; height: 100%; } .l-header__sp-search-input::placeholder { color: #858B97; opacity: 1; } .l-header__sp-search-button { width: 24px; height: 24px; padding: 0; flex-shrink: 0; border: 0; background: #333333; mask: url("/7card/usr/file/attachment/icon_search.svg") center/contain no-repeat; } @keyframes headerMenuFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } .l-header-c { width: 100%; position: fixed; left: 0; top: 0; z-index: 20; } .l-header-c .bg-gradient { position: absolute; width: 100%; top: 100%; left: 0; height: 100%; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.2) 8%, rgba(255, 255, 255, 0.1) 13%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 25%); } .l-header-c .bg-gradient:after { background: linear-gradient(90deg, #59B770 0%, #5BC5EF 25%, #F6EA91 60.1%, #59B770 100%); } .l-header-c__inner { width: 1200px; max-width: 100%; height: 100%; margin-inline: auto; padding-inline: 20px; } .l-header-c__top { position: relative; z-index: 1; padding: 10px 0; background-color: #ffffff; } .l-header-c__top .l-header-c__inner { display: flex; align-items: center; justify-content: space-between; } .l-header-c__brand { display: inline-flex; align-items: center; height: 100%; gap: 24px; } .l-header-c__menu-toggle, .l-header-c__menu-close { display: none; } .l-header-c__anniversary { display: inline-flex; align-items: center; justify-content: center; width: 85px; height: 48px; border: 1px solid #000000; color: #000000; font-size: 16px; font-weight: 700; line-height: 1.6875; } .l-header-c__logo-text { display: inline-flex; align-items: baseline; color: #000000; font-weight: 800; line-height: 1; white-space: nowrap; } .l-header-c__logo-prefix { margin-right: 4px; font-size: 22px; } .l-header-c__logo-name { font-size: 28px; } .l-header-c__nav { position: relative; height: 60px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(1.5px); } .l-header-c__nav-list { display: flex; align-items: center; gap: 32px; width: max-content; min-width: 100%; height: 100%; margin: 0; padding: 0 36px; list-style: none; } .l-header-c__nav-item { position: relative; display: flex; align-items: center; flex: 0 0 200px; height: 100%; } .l-header-c__nav-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -16px; width: 1px; height: 30px; background-color: #D9DDE3; transform: translateY(-50%); } .l-header-c__nav-item--top { display: none; } .l-header-c__dropdown-root { position: relative; width: 100%; height: 100%; } .l-header-c__dropdown-root.is-open .l-header-c__nav-button { color: #333333; } .l-header-c__dropdown-root.is-open .l-header-c__nav-button::after { opacity: 1; } .l-header-c__dropdown-root.is-open .l-header-c__dropdown { display: block; } .l-header-c__dropdown-root.is-open .l-header-c__nav-sub { display: block; } .l-header-c__dropdown-root.is-open .l-header-c__nav-arrow { transform: rotate(90deg) scale(-1); } .l-header-c__nav-link, .l-header-c__nav-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; padding: 8px 24px; border: 0; background-color: transparent; color: #333333; font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.6875; text-align: center; cursor: pointer; list-style: none; } .l-header-c__nav-link::after, .l-header-c__nav-button::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background-color: #59B770; opacity: 0; transition: opacity 0.3s ease; } @media (hover: hover) { .l-header-c__nav-link:hover:after, .l-header-c__nav-button:hover:after { opacity: 1; } } .l-header-c__nav-link:focus-visible, .l-header-c__nav-button:focus-visible { outline: 2px solid #59B770; outline-offset: -4px; } .l-header-c__nav-link { cursor: pointer; } .l-header-c__nav-text-wrap { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 33px; } .l-header-c__nav-sub { display: none; margin-bottom: -6px; font-size: 13px; font-weight: 700; line-height: 1.6153846154; } .l-header-c__nav-text { display: block; } .l-header-c__nav-arrow { display: block; width: 8px; height: 11px; margin-top: -3px; mask-image: url(/7card/usr/file/attachment/icon_arrow_01.svg); mask-size: contain; mask-repeat: no-repeat; background-color: #59B770; transform: rotate(90deg); transition: transform 0.3s ease; } .l-header-c__dropdown { position: absolute; top: 100%; left: -16px; display: none; overflow: hidden; width: 232px; min-height: 72px; background-color: #ffffff; } .l-header-c__dropdown-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 24px 36px; color: #000000; font-size: 14px; font-weight: 700; line-height: 1.7142857143; white-space: nowrap; } .l-header-c__dropdown-arrow { display: block; width: 8px; height: 11px; flex: 0 0 auto; mask-image: url(/7card/usr/file/attachment/icon_arrow_01.svg); mask-size: contain; mask-repeat: no-repeat; background-color: #59B770; transform: rotate(0deg); } @media (hover: hover) { .l-header-c .l-header-c__nav-link:hover, .l-header-c .l-header-c__dropdown-root:hover .l-header-c__nav-button, .l-header-c .l-header-c__dropdown-link:hover { color: #333333; opacity: 1; } } @media screen and (max-width: 767px) { .l-header-c { min-height: 84px; } .l-header-c::before { top: 60px; z-index: 2; height: 24px; background: linear-gradient(90deg, #59B770 0%, #5BC5EF 34%, #F4ECA4 62%, #59B770 100%); filter: blur(2px); opacity: 0.65; mask: none; } .l-header-c::after { content: ""; position: fixed; inset: 0; z-index: 21; background-color: rgba(133, 139, 151, 0.7); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; } .l-header-c.is-menu-open::after { opacity: 1; visibility: visible; pointer-events: auto; } .l-header-c.is-menu-open .l-header-c__nav { right: 0; } .l-header-c__top { height: 60px; padding: 7px 0; } .l-header-c__inner { width: 100%; padding-inline: 16px; } .l-header-c__brand { min-width: 0; gap: 0; } .l-header-c__anniversary { display: none; } .l-header-c__logo-text { display: block; max-width: calc(100vw - 116px); overflow: hidden; color: #000000; line-height: 1; text-overflow: ellipsis; white-space: nowrap; } .l-header-c__logo-prefix { margin-right: 0; font-size: 13px; } .l-header-c__logo-name { font-size: 13px; } .l-header-c__menu-toggle { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; width: 45px; min-width: 45px; height: 45px; padding: 0; border: 1px solid #59B770; border-radius: 50%; background-color: #ffffff; color: #59B770; font-family: inherit; cursor: pointer; } .l-header-c__menu-icon { position: relative; display: block; width: 18px; height: 15px; } .l-header-c__menu-icon span { position: absolute; left: 0; display: block; width: 18px; height: 2px; background-color: #59B770; border-radius: 2px; } .l-header-c__menu-icon span:nth-child(1) { top: 0; } .l-header-c__menu-icon span:nth-child(2) { top: 7px; } .l-header-c__menu-icon span:nth-child(3) { top: 14px; } .l-header-c__menu-text { display: block; margin-top: 4px; color: #59B770; font-size: 7px; font-weight: 700; line-height: 1; letter-spacing: 0.05em; } .l-header-c__nav { position: fixed; top: 0; right: -100%; left: auto; z-index: 22; width: calc(100vw - 56px); max-width: 319px; height: 100vh; height: 100dvh; padding: 78px 24px 40px; overflow-y: auto; background-color: #ffffff; transition: right 0.3s ease; } .l-header-c__nav-inner { height: auto; padding: 0; overflow: visible; } .l-header-c__nav-list { display: block; width: 100%; min-width: 0; height: auto; padding: 0; } .l-header-c__nav-item, .l-header-c__nav-item--top { display: block; width: 100%; height: auto; padding: 20px 0; flex: none; } .l-header-c__nav-item:not(:last-child)::after, .l-header-c__nav-item::after, .l-header-c__nav-item--top:not(:last-child)::after, .l-header-c__nav-item--top::after { content: ""; position: absolute; top: auto; right: 0; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #59B770 0%, #5BC5EF 35%, #F4ECA4 65%, #59B770 100%); transform: none; } .l-header-c__nav-item--top { padding-top: 0; } .l-header-c__dropdown-root { height: auto; } .l-header-c__nav-link, .l-header-c__nav-button { align-items: center; justify-content: flex-start; gap: 0; height: auto; min-height: 20px; padding: 0; color: #000000; font-size: 13px; font-weight: 700; line-height: 1.5384615385; text-align: left; } .l-header-c__nav-link::after, .l-header-c__nav-button::after { content: none; } .l-header-c__nav-button { pointer-events: none; } .l-header-c__nav-text-wrap { align-items: flex-start; min-height: 0; } .l-header-c__nav-sub, .l-header-c__nav-arrow { display: none; } .l-header-c__dropdown { position: static; display: block !important; overflow: visible; width: 100%; min-height: 0; margin-top: 8px; background-color: transparent; } .l-header-c__dropdown-link { position: relative; justify-content: flex-start; gap: 0; min-height: 22px; padding: 0 0 0 14px; color: #000000; font-size: 13px; font-weight: 400; line-height: 1.6923076923; white-space: normal; } .l-header-c__dropdown-link::before { content: ""; position: absolute; top: 11px; left: 0; width: 6px; height: 2px; background-color: #59B770; } .l-header-c__dropdown-link + .l-header-c__dropdown-link { margin-top: 8px; } .l-header-c__dropdown-arrow { display: none; } } footer { background-color: unset; margin-top: unset; padding-top: 0; } footer:before { content: none; } .l-footer { position: relative; overflow: hidden; min-height: 300px; } .l-footer .bg-gradient { height: 73px; } .l-footer .footer-top { display: flex; gap: 24px; padding-bottom: 64px; } .l-footer .col { display: flex; flex-direction: column; gap: 40px; } .l-footer .col:first-child { width: 254px; flex-shrink: 0; margin-right: 45px; gap: 0; } .l-footer .col:last-child { gap: 7px; } .l-footer .col:last-child .footer-section:last-child { margin-top: 26px; } .l-footer .col:nth-child(2), .l-footer .col:nth-child(3), .l-footer .col:nth-child(4) { flex: 1; max-width: 282px; } .l-footer .footer-logo { display: block; max-width: 138px; margin: 0 auto; width: 100%; } .l-footer .social-list { display: flex; justify-content: center; gap: 16px; margin-top: 24px; } .l-footer .social-list-item a { display: block; transition: opacity 0.3s ease; } @media (hover: hover) { .l-footer .social-list-item a:hover:hover { opacity: 0.75; } } .l-footer .social-list-item a img { display: block; width: 100%; height: 100%; } .l-footer .footer-section { display: flex; flex-direction: column; } .l-footer .footer-title { font-size: 16px; line-height: 1.6875; font-weight: 700; color: #333333; margin-bottom: 8px; } .l-footer .footer-title::before { content: unset; } .l-footer .footer-title-link { display: inline-block; transition: opacity 0.3s ease; } @media (hover: hover) { .l-footer .footer-title-link:hover:hover { opacity: 0.75; } } .l-footer .footer-title-link .icon_target { display: inline-flex; align-items: flex-start; } .l-footer .footer-title-link .icon_target::after { content: ""; display: inline-block; width: 19px; height: 19px; background-image: url(/7card/usr/file/attachment/icon_target.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; } .l-footer .footer-list { display: flex; flex-direction: column; gap: 8px; margin-top: 0; } .l-footer .footer-item { position: relative; } .l-footer .footer-item::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background-color: transparent; } .l-footer .footer-item--pink::before { background-color: #E99495; } .l-footer .footer-item--green::before { background-color: #B9D989; } .l-footer .footer-item--orange::before { background-color: #FDC689; } .l-footer .footer-item--blue::before { background-color: #67C5EA; } .l-footer .footer-item--purple::before { background-color: #B0ABD5; } .l-footer .footer-link { display: block; font-size: 14px; line-height: 1.7142857143; color: #333333; padding-left: 14px; transition: opacity 0.3s ease; } @media (hover: hover) { .l-footer .footer-link:hover:hover { opacity: 0.75; } } .l-footer .footer-bottom { border-top: 1px solid #D9DDE3; padding-top: 13px; padding-bottom: 13px; } .l-footer .footer-bottom-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .l-footer .footer-bottom-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1.6153846154; color: #333333; white-space: nowrap; transition: opacity 0.3s ease; position: relative; padding-right: 22px; margin-right: 25px; } .l-footer .footer-bottom-link:not(:last-child)::before { content: ""; right: 0; left: auto; width: 1px; height: 16px; background-color: #858B97; position: absolute; } .l-footer .footer-bottom-link:last-child { padding-right: 0; margin-right: 0; } @media (hover: hover) { .l-footer .footer-bottom-link:hover:hover { opacity: 0.75; } } .l-footer .footer-bottom-link .icon_target { margin-left: 4px; transform: translateY(3px); } .l-footer .footer-bottom-link .icon_target::after { content: ""; display: inline-block; width: 19px; height: 19px; background-image: url(/7card/usr/file/attachment/icon_target.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-left: 0; margin-bottom: 0; } .l-footer .footer-copyright { margin-top: 15px; padding-top: 24px; padding-bottom: 24px; } @media screen and (min-width: 768px) { .l-footer .footer-copyright .footer-logo_bottom { max-width: 295px; } } .l-footer .footer-copyright .footer-info { display: flex; margin-top: 17px; justify-content: space-between; } .l-footer .footer-copyright .footer-registration { display: flex; gap: 24px; } .l-footer .footer-copyright .footer-registration p { font-size: 12px; line-height: 1.5; color: #727272; margin: 0; } .l-footer .footer-copyright .footer-copy { font-family: "Poppins", sans-serif; font-size: 12px; line-height: 1.5; color: #727272; margin: 0; } @media screen and (min-width: 768px) and (max-width: 1080px) { .l-footer .col:first-child { margin-right: 3.44vw; } .l-footer .footer-bottom-link { padding-right: 14px; margin-right: 14px; } } @media screen and (max-width: 767px) { .l-footer .bg-gradient { height: 30px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 10%, rgba(255, 255, 255, 0.25) 15%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 40%); } .l-footer .l-inner { padding-inline: 16px; } .l-footer .footer-top { flex-direction: column; width: 100%; margin-top: 9px; padding-bottom: 14px; } .l-footer .col { gap: 24px; } .l-footer .col:first-child { width: 100%; margin-right: 0; margin-bottom: 0px; gap: 0; } .l-footer .col:last-child { gap: 7px; } .l-footer .col:last-child .footer-section:last-child { margin-top: 0px; } .l-footer .col:last-child .footer-section .footer-title { letter-spacing: 0.04em; } .l-footer .col:nth-child(2), .l-footer .col:nth-child(3), .l-footer .col:nth-child(4) { max-width: 100%; } .l-footer .social-list-item a { width: 32px; height: 32px; } .l-footer .footer-title { font-size: 14px; line-height: 1.7142857143; margin-bottom: 10px; letter-spacing: 0.06em; } .l-footer .footer-title::before { content: unset; } .l-footer .footer-title-link { font-size: 13px; line-height: 1.6923076923; } .l-footer .footer-title-link .icon_target { transform: translateY(5px); } .l-footer .footer-list { gap: 8px; } .l-footer .footer-link { font-size: 13px; line-height: 1.6923076923; padding-left: 14px; } .l-footer .footer-bottom { border-top: 1px solid #D9DDE3; padding-top: 14px; padding-bottom: 14px; } .l-footer .footer-bottom-nav { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 6px 12px; } .l-footer .footer-bottom-link { gap: 0; font-size: 12px; line-height: 1.5833333333; padding-right: 11px; margin-right: 0; } .l-footer .footer-bottom-link:not(:first-child)::before { left: auto; right: 0; } .l-footer .footer-bottom-link:last-child { padding-right: 0; margin-right: 0; } .l-footer .footer-bottom-link:last-child::before { content: unset; } .l-footer .footer-bottom-link:nth-child(2)::before { content: unset; } .l-footer .footer-bottom-link .icon_target { margin-left: 4px; transform: translateY(0px); line-height: 1; } .l-footer .footer-copyright { margin-top: 11px; padding-top: 10px; padding-bottom: 20px; } .l-footer .footer-copyright .footer-logo_bottom { max-width: 294px; margin: 0 auto; } .l-footer .footer-copyright .footer-info { margin-top: 17px; flex-direction: column; text-align: center; } .l-footer .footer-copyright .footer-registration { gap: 0; flex-direction: column; } .l-footer .footer-copyright .footer-registration p { font-size: 11px; line-height: 1.6363636364; color: #333333; } .l-footer .footer-copyright .footer-copy { font-size: 10px; line-height: 1.9; margin-top: 7px; color: #333333; } } .back-to-top { position: relative; } .back-to-top.is-active .back-to-top-link { opacity: 1; } .back-to-top.is-active.is-stop .back-to-top-link { position: absolute; } .back-to-top .back-to-top-link { position: fixed; bottom: 14px; right: 20px; z-index: 19; transition: opacity 0.3s ease; opacity: 0; will-change: transform; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media screen and (max-width: 767px) { .back-to-top .back-to-top-link { right: 10px; width: 50px; height: 50px; bottom: 10px; } } .l-footer-c .bg-gradient { opacity: 0.8; } .l-footer-c .social-list { margin-top: 0; } .l-footer-c .footer-top { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-bottom: 40px; } .l-footer-c .footer-logo { max-width: 400px; } .l-footer-c .footer-nav-list { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; } .l-footer-c .footer-nav-item { min-width: 180px; position: relative; padding-inline: 16px; } .l-footer-c .footer-nav-item::before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 30px; background-color: #DEE2E8; transform: translateX(-50%) translateY(-50%); } .l-footer-c .footer-nav-item:last-child::before { content: unset; } .l-footer-c .footer-nav-item a { padding: 12px 0; font-size: 16px; line-height: 1.6875; color: #333333; font-weight: 700; display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; } .l-footer-c .footer-bottom-c { margin-top: 30px; border-top: 1px solid #DEE2E8; padding-top: 16px; padding-bottom: 24px; } .l-footer-c .footer-bottom-c .footer-bottom-nav { justify-content: flex-start; } .l-footer-c .footer-bottom-c .footer-bottom-link { margin-right: 0; font-size: 12px; line-height: 1.6666666667; gap: 0; padding-inline: 9px; } .l-footer-c .footer-bottom-c .footer-bottom-link::before { content: unset; } .l-footer-c .footer-bottom-c .footer-bottom-link:last-child { padding-right: 0; } .l-footer-c .footer-bottom-c .footer-bottom-link:first-child { padding-left: 0; } @media screen and (min-width: 768px) and (max-width: 1080px) { .l-footer-c .footer-nav-list { max-width: 767px; margin-inline: auto; } .l-footer-c .footer-nav-item:nth-child(4)::before { content: unset; } } @media screen and (max-width: 767px) { .l-footer-c .footer-logo { max-width: 270px; } .l-footer-c .bg-gradient { opacity: 1; height: 72px; } .l-footer-c .social-list { margin-top: 0; } .l-footer-c .social-list-item a { width: 40px; height: 40px; } .l-footer-c .footer-top { margin-top: 0; gap: 28px; padding-bottom: 32px; } .l-footer-c .footer-nav-list { gap: 0 30px; max-width: 328px; margin-inline: auto; } .l-footer-c .footer-nav-item { min-width: 148px; } .l-footer-c .footer-nav-item::before { content: ""; position: absolute; right: -17px; top: 50%; width: 1px; height: 30px; background-color: #DEE2E8; transform: translateX(-50%) translateY(-50%); } .l-footer-c .footer-nav-item:last-child::before { content: unset; } .l-footer-c .footer-nav-item:nth-child(even)::before { content: unset; } .l-footer-c .footer-nav-item a { padding: 12px 0; font-size: 14px; line-height: 1.7142857143; min-height: 60px; position: relative; } .l-footer-c .footer-nav-item a::after { content: ""; position: absolute; right: 0; bottom: 0; width: 100%; height: 1px; background-color: #DEE2E8; } .l-footer-c .footer-nav-item:last-child a::after, .l-footer-c .footer-nav-item:nth-child(5) a::after { content: unset; } .l-footer-c .footer-bottom-c { margin-top: 15px; padding-top: 16px; padding-bottom: 16px; } .l-footer-c .footer-bottom-c .footer-bottom-nav { justify-content: center; gap: 6px 0px; } } @media (max-width: 359px) { .l-footer-c .footer-nav-list { gap: 0 8.35vw; width: 100%; } .l-footer-c .footer-nav-item { min-width: 45%; padding-inline: 4.83vw; } .l-footer-c .footer-nav-item::before { right: -17px; } .l-footer-c .footer-nav-item a { padding: 8px 0; font-size: 12px; line-height: 1.6666666667; } } #l-wrapper { position: relative; padding-top: 127px; } @media screen and (max-width: 767px) { #l-wrapper { padding-top: 60px; } } .l-main { overflow: hidden; padding-bottom: 80px; } @media screen and (min-width: 768px) and (max-width: 940px) { .l-main { padding-top: 64px; } } @media screen and (max-width: 767px) { .l-main { padding-bottom: 56px; } } .l-inner { width: 1240px; max-width: 100%; margin-inline: auto; padding-inline: 20px; } @media screen and (max-width: 767px) { .l-inner { padding-inline: 16px; } } .l-inner-small { width: 1080px; max-width: 100%; margin-inline: auto; padding-inline: 20px; } @media screen and (max-width: 767px) { .l-inner-small { padding-inline: 16px; } } .l-content { padding-top: 56px; } .l-content > div { padding-bottom: 0; } @media screen and (max-width: 767px) { .l-content { padding-top: 40px; } } .c-content + .c-content { margin-top: 56px; } @media screen and (max-width: 767px) { .c-content + .c-content { margin-top: 40px; } } .c-pageTitle { padding-bottom: 56px; overflow: hidden; position: relative; background-color: #F5F7FB; min-height: 266px; display: flex; flex-direction: column; } .c-pageTitle__inner { width: 1240px; max-width: 100%; margin-inline: auto; padding-inline: 20px; flex: 1; display: flex; align-items: center; justify-content: center; } .c-pageTitle__content { padding: 0; text-align: center; display: flex; flex-direction: column; gap: 16px; } .c-pageTitle:not(:has(.bg-gradient)) { padding-bottom: 35px; } .c-pageTitle__subtitle { font-size: 22px; line-height: 1.5; font-family: "LINE Seed JP", sans-serif; font-weight: 700; color: #333333; margin-bottom: 0; } .c-pageTitle__title { font-size: 44px; line-height: 1.4545454545; font-family: "LINE Seed JP", sans-serif; font-weight: 700; color: #333333; margin: 0; } @media screen and (max-width: 767px) { .c-pageTitle { padding-bottom: 32px; min-height: 188px; } .c-pageTitle__content { padding: 32px 0; } .c-pageTitle__subtitle { font-size: 18px; line-height: 1.5; } .c-pageTitle__title { font-size: 32px; line-height: 1.375; } } .c-heading { padding-bottom: 56px; overflow: hidden; position: relative; text-align: center; } .c-heading-02 { text-align: left; font-size: 44px; line-height: 1.4545454545; } .c-heading-03 { text-align: left; font-size: 22px; line-height: 1.5; } .c-heading--en .c-heading__title--en { font-family: "Poppins", sans-serif; font-weight: 700; color: #59B770; margin: 0; font-size: 50px; line-height: 0.96; } .c-heading--en .c-heading__content { display: flex; flex-direction: column; row-gap: 12px; } .c-heading__content { padding: 0; } .c-heading:not(:has(.bg-gradient)) { padding-bottom: 35px; } .c-heading__subtitle { font-size: 22px; line-height: 1.5; font-family: "LINE Seed JP", sans-serif; font-weight: 700; color: #333333; margin-bottom: 0; } .c-heading__subtitle:has(+ .bg-gradient--small) { text-align: left; } .c-heading__title { font-size: 44px; line-height: 1.4545454545; font-family: "LINE Seed JP", sans-serif; font-weight: 700; color: #333333; margin: 0; } .c-heading__title--2 { font-size: 36px; line-height: 1.6111111111; } .c-heading--sub { padding-top: 56px; padding-bottom: 0; } .c-heading--sub .bg-gradient { margin-top: 8px; height: 55px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.35) 10%, rgba(255, 255, 255, 0.25) 15%, rgba(255, 255, 255, 0.15) 20%, rgba(255, 255, 255, 0) 30%); } .c-heading--sub .c-heading__subtitle:is(:first-child):not(:nth-child(2)) { margin-bottom: 8px; } .c-heading--sub .c-heading__subtitle:is(:nth-child(2)):not(:first-child) { margin-top: 8px; } .c-heading--sub .c-heading__title { font-size: 36px; line-height: 1.6111111111; } .c-heading:has(.bg-gradient--small) { padding-bottom: 8px; } @media screen and (max-width: 767px) { .c-heading { padding-bottom: 32px; } .c-heading-02 { font-size: 32px; line-height: 1.375; text-align: center; } .c-heading--en .c-heading__title--en { font-size: 44px; line-height: 1.0909090909; } .c-heading--en .c-heading__content { row-gap: 10px; } .c-heading:not(:has(.bg-gradient)) { padding-bottom: 24px; } .c-heading__subtitle { font-size: 18px; line-height: 1.3333333333; } .c-heading__title { font-size: 32px; line-height: 1.375; } .c-heading__title--2 { font-size: 32px; line-height: 1.375; } .c-heading--sub { padding-bottom: 40px; } .c-heading--sub .bg-gradient { height: 15px; mask: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.65) 20%, rgba(255, 255, 255, 0.55) 25%, rgba(255, 255, 255, 0.45) 30%, rgba(255, 255, 255, 0) 60%); } .c-heading--sub .c-heading__title { font-size: 24px; line-height: 1.5833333333; padding: 0 16px; } .c-heading--sub .c-heading__subtitle { font-size: 18px; line-height: 1.5; } } .c-title-xxxxl { font-size: 54px; line-height: 1.3888888889; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xxxxl { font-size: 32px; line-height: 1.40625; font-weight: 400; } } .c-title-xxxxl-bold { font-size: 54px; line-height: 1.3888888889; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xxxxl-bold { font-size: 32px; line-height: 1.40625; font-weight: 700; } } .c-title-xxxl { font-size: 44px; line-height: 1.4545454545; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xxxl { font-size: 32px; line-height: 1.375; font-weight: 400; } } .c-title-xxxl-bold { font-size: 44px; line-height: 1.4545454545; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xxxl-bold { font-size: 32px; line-height: 1.375; font-weight: 700; } } .c-title-xxl { font-size: 36px; line-height: 1.6111111111; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xxl { font-size: 24px; line-height: 1.5833333333; font-weight: 400; } } .c-title-xxl-bold { font-size: 36px; line-height: 1.6111111111; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xxl-bold { font-size: 24px; line-height: 1.5833333333; font-weight: 700; } } .c-title-xl { font-size: 22px; line-height: 1.5; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xl { font-size: 18px; line-height: 1.5; font-weight: 400; } } .c-title-xl-bold { font-size: 22px; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xl-bold { font-size: 18px; line-height: 1.5; font-weight: 700; } } .c-title-l { font-size: 18px; line-height: 1.5; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-l { font-size: 16px; line-height: 1.5; font-weight: 400; } } .c-title-l-bold { font-size: 18px; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-l-bold { font-size: 16px; line-height: 1.5; font-weight: 700; } } .c-title-m { font-size: 16px; line-height: 1.6875; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-m { font-size: 14px; line-height: 1.7142857143; font-weight: 400; } } .c-title-m-bold { font-size: 16px; line-height: 1.6875; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-m-bold { font-size: 14px; line-height: 1.7142857143; font-weight: 700; } } .c-title-s { font-size: 15px; line-height: 1.4666666667; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-s { font-size: 13px; line-height: 1.3846153846; font-weight: 400; } } .c-title-s-bold { font-size: 15px; line-height: 1.4666666667; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-s-bold { font-size: 13px; line-height: 1.3846153846; font-weight: 700; } } .c-title-xs { font-size: 14px; line-height: 1.7142857143; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xs { font-size: 13px; line-height: 1.6923076923; font-weight: 400; } } .c-title-xs-bold { font-size: 14px; line-height: 1.7142857143; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xs-bold { font-size: 13px; line-height: 1.5384615385; font-weight: 700; } } .c-title-xxs { font-size: 13px; line-height: 1.6153846154; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xxs { font-size: 12px; line-height: 1.5833333333; font-weight: 400; } } .c-title-xxs-bold { font-size: 13px; line-height: 1.6153846154; font-weight: 700; } @media screen and (max-width: 767px) { .c-title-xxs-bold { font-size: 12px; line-height: 1.5833333333; font-weight: 700; } } .c-title-xxs-extrabold { font-size: 13px; line-height: 1.6153846154; font-weight: 800; } @media screen and (max-width: 767px) { .c-title-xxs-extrabold { font-size: 12px; line-height: 1.5833333333; font-weight: 800; } } .c-title-xxxs { font-size: 12px; line-height: 1.6666666667; font-weight: 400; } @media screen and (max-width: 767px) { .c-title-xxxs { font-size: 11px; line-height: 1.6363636364; font-weight: 400; } } .c-typo-xxxxl { font-size: 54px; line-height: 1.3888888889; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xxxxl { font-size: 32px; line-height: 1.40625; font-weight: 400; } } .c-typo-xxxl { font-size: 44px; line-height: 1.4545454545; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xxxl { font-size: 32px; line-height: 1.375; font-weight: 400; } } .c-typo-xxxl-bold { font-size: 44px; line-height: 1.4545454545; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-xxxl-bold { font-size: 32px; line-height: 1.375; font-weight: 700; } } .c-typo-xxl { font-size: 36px; line-height: 1.6111111111; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xxl { font-size: 24px; line-height: 1.5833333333; font-weight: 400; } } .c-typo-xxl-bold { font-size: 36px; line-height: 1.6111111111; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-xxl-bold { font-size: 24px; line-height: 1.5833333333; font-weight: 700; } } .c-typo-xl { font-size: 22px; line-height: 1.5; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xl { font-size: 18px; line-height: 1.5; font-weight: 400; } } .c-typo-xl-bold { font-size: 22px; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-xl-bold { font-size: 18px; line-height: 1.5; font-weight: 700; } } .c-typo-l { font-size: 18px; line-height: 1.5; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-l { font-size: 16px; line-height: 1.5; font-weight: 400; } } .c-typo-l-bold { font-size: 18px; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-l-bold { font-size: 16px; line-height: 1.5; font-weight: 700; } } .c-typo-m { font-size: 16px; line-height: 1.6875; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-m { font-size: 14px; line-height: 1.7142857143; font-weight: 400; } } .c-typo-m-bold { font-size: 16px; line-height: 1.6875; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-m-bold { font-size: 14px; line-height: 1.7142857143; font-weight: 700; } } .c-typo-s { font-size: 15px; line-height: 1.4666666667; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-s { font-size: 13px; line-height: 1.3846153846; font-weight: 400; } } .c-typo-s-bold { font-size: 15px; line-height: 1.4666666667; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-s-bold { font-size: 13px; line-height: 1.3846153846; font-weight: 700; } } .c-typo-xs { font-size: 14px; line-height: 1.7142857143; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xs { font-size: 13px; line-height: 1.6923076923; font-weight: 400; } } .c-typo-xs-bold { font-size: 14px; line-height: 1.7142857143; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-xs-bold { font-size: 13px; line-height: 1.5384615385; font-weight: 700; } } .c-typo-xxs { font-size: 13px; line-height: 1.6153846154; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xxs { font-size: 12px; line-height: 1.5833333333; font-weight: 400; } } .c-typo-xxs-bold { font-size: 13px; line-height: 1.6153846154; font-weight: 700; } @media screen and (max-width: 767px) { .c-typo-xxs-bold { font-size: 12px; line-height: 1.5833333333; font-weight: 700; } } .c-typo-xxs-extrabold { font-size: 13px; line-height: 1.6153846154; font-weight: 800; } @media screen and (max-width: 767px) { .c-typo-xxs-extrabold { font-size: 12px; line-height: 1.5833333333; font-weight: 800; } } .c-typo-xxxs { font-size: 12px; line-height: 1.6666666667; font-weight: 400; } @media screen and (max-width: 767px) { .c-typo-xxxs { font-size: 11px; line-height: 1.6363636364; font-weight: 400; } } .c-title_default, .c-title--default { font-family: "LINE Seed JP", sans-serif; color: #333333; letter-spacing: 0; font-size: 44px; line-height: 1.4545454545; font-weight: 700; } @media screen and (max-width: 767px) { .c-title_default, .c-title--default { font-size: 32px; line-height: 1.375; font-weight: 700; } } .c-title_default-2, .c-title--default-2 { font-family: "LINE Seed JP", sans-serif; color: #333333; letter-spacing: 0; font-size: 36px; line-height: 1.6111111111; font-weight: 700; } @media screen and (max-width: 767px) { .c-title_default-2, .c-title--default-2 { font-size: 24px; line-height: 1.5833333333; font-weight: 700; } } .c-title-list { display: grid; gap: 24px; margin: 0; } .c-title-list__item { padding-bottom: 24px; } .c-title-list__label { margin: 0 0 8px; font-family: "Poppins", sans-serif; font-size: 13px; line-height: 1.6153846154; font-weight: 700; color: #858B97; } @media screen and (max-width: 767px) { .c-title-list { gap: 20px; } .c-title-list__item { padding-bottom: 20px; } } .c-logo { width: 60px; display: inline-block; margin-left: 10px; } .c-title-details { font-size: 38px; color: #333333; line-height: 1.5; letter-spacing: 0; } @media screen and (max-width: 767px) { .c-title-details { font-size: 22px; } } .c-anchor-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; } .c-anchor-list:not(:last-child) { margin-bottom: 24px; } .c-anchor-list__item { text-align: center; display: flex; } .c-anchor-list__item .c-text-link { display: inline-flex; justify-content: center; align-items: center; margin-bottom: 0; } .c-anchor-list__item .c-text-link__arrow { width: 36px; height: 36px; mask-size: 8px 11px; margin-right: 0; top: 0; } @media screen and (max-width: 767px) { .c-anchor-list { flex-wrap: wrap; } .c-anchor-list:not(:last-child) { margin-bottom: 40px; } .c-anchor-list__item { margin-top: 0; margin-left: 0; padding-left: 0; text-align: left; } .c-anchor-list__item:first-child { margin-top: 0; } .c-anchor-list:has(.c-text-link) { justify-content: flex-start; flex-direction: column; gap: 8px; } } .c-anchor-list--2 { gap: 16px; } @media screen and (max-width: 767px) { .c-anchor-list--2 .c-anchor-list__item { width: calc((100% - 32px) / 3); } .c-anchor-list--2 .c-anchor { padding: 10px 16px 22px; min-height: 104px; } .c-anchor-list--2 .c-anchor__image { width: 73px; } .c-anchor-list--2 .c-anchor__text { margin: 0 -16px; font-size: 12px; min-height: auto; line-height: 1.1666666667; } .c-anchor-list--2 .c-anchor::after { bottom: 9px; } } .c-anchor { padding-left: 22px; font-size: 15px; line-height: 1.4666666667; font-weight: 700; padding: 16px 16px 32px; text-align: center; background: #ffffff; box-shadow: 0px 0px 24px #DEE2E8; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100%; min-width: 240px; max-width: 100%; min-height: 96px; } .c-anchor::before { content: ""; position: absolute; inset: 0; background: linear-gradient(134.81deg, #e99495 5.92%, #ebb7ce 21.65%, #fdc689 37.38%, #f6ea91 52.19%, #b9d989 66.99%, #67c5ea 82.72%, #b0abd5 98.45%); filter: blur(8px); border-radius: 16px; opacity: 0; transition: opacity 0.3s linear; z-index: -1; } .c-anchor::after { content: ""; position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%) rotate(90deg); width: 8px; height: 11px; border-radius: 50%; mask-image: url(/7card/usr/file/attachment/icon_arrow_01.svg); mask-size: contain; background-color: #9d843e; transition: all 0.3s ease; } .c-anchor__image { width: 100%; max-width: 112px; margin-bottom: 8px; } .c-anchor__text { min-height: 48px; display: inline-flex; align-items: center; margin: 0 -5px; } .c-anchor:has(.c-anchor__image) { min-width: auto; } @media (hover: hover) { .c-anchor:hover { opacity: 1; } .c-anchor:hover::before { opacity: 1; } } .c-anchor.c-anchor--no-border, .c-anchor:active { text-decoration: none; } @media screen and (max-width: 767px) { .c-anchor { min-height: 80px; min-width: 282px; padding: 8px 16px 24px; font-size: 13px; line-height: 1.3846153846; } } .c-anchor-list02 { display: flex; justify-content: center; flex-wrap: wrap; gap: 200px; } .c-anchor-list02:not(:last-child) { margin-bottom: 24px; } @media screen and (max-width: 767px) { .c-anchor-list02 { flex-wrap: wrap; gap: 16px; } .c-anchor-list02:not(:last-child) { margin-bottom: 40px; } } .btn-wrap_component { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .wrap_component-divider { width: 100%; } .wrap-btn { display: flex; gap: 16px; flex-wrap: wrap; } .wrap-btn.center { justify-content: center; } .wrap-btn.right { justify-content: flex-end; } .wrap-btn.left { justify-content: flex-start; } .c-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border: none; border-radius: 50px; font-weight: bold; text-align: center; cursor: pointer; text-decoration: none; position: relative; color: #333333; font-size: 15px; line-height: 1.4666666667; z-index: 1; } .c-btn.str-width { max-width: 360px; } .c-btn.txt-nowrap .c-btn__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-btn__label { display: inline-block; flex: 1 1 auto; } .c-btn--icon { background-repeat: no-repeat; background-position: center; background-size: contain; flex-shrink: 0; background-image: none; mask-image: none; mask-size: contain; mask-repeat: no-repeat; transition: background 0.3s ease, transform 0.3s ease; display: flex; align-items: center; justify-content: center; } .c-btn--icon::after { margin-left: 0 !important; margin-bottom: 0 !important; width: 24px !important; height: 24px !important; } .c-btn--icon-2 { flex: 1 0 auto; width: auto; height: 36px; } .c-btn--icon-2 img { width: auto; } .c-btn--primary { padding: 12px 12px; max-width: 100%; } .c-btn--primary .c-btn--icon { width: 36px; height: 36px; } @media (min-width: 768px) { .c-btn--primary { transform: translateY(-2px); } } .c-btn--primary { transition: transform 0.3s ease; } .c-btn--primary::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #9D843E; background-color: #ffffff; border-radius: 50px; z-index: -1; } .c-btn--primary::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #9D843E; border-radius: 50px; z-index: -2; transform: translateY(4px); transition: transform 0.3s ease; } .c-btn--primary:not(:has(.c-btn--icon:is(:first-child))) { padding-left: 24px; } .c-btn--primary:has(.c-btn--icon.targetLink) { padding-inline: 18px; } .c-btn--small { padding: 8px; width: 180px; font-size: 14px; line-height: 1.7142857143; } .c-btn--small .c-btn--icon { width: 24px; height: 24px; } .c-btn--medium { width: 260px; } .c-btn--large { width: 320px; } .c-btn--2line { width: 440px; } .c-btn--left { text-align: left; padding-left: 24px; gap: 33px; } .c-btn--left:before { content: none; } @media (hover: hover) { .c-btn:hover { opacity: 1; } .c-btn:hover.c-btn--primary { transform: translateY(0); } .c-btn:hover.c-btn--primary::after { transform: translateY(0); } } .c-btn .c-btn--icon.arrowRight { mask-image: url("/7card/usr/file/attachment/icon_arrow_circle.svg"); background-color: #9D843E; } .c-btn .c-btn--icon.arrowLeft { mask-image: url("/7card/usr/file/attachment/icon_arrow_circle.svg"); background-color: #9D843E; transform: scaleX(-1); } .c-btn .c-btn--icon.targetLink { mask-image: url("/7card/usr/file/attachment/icon_target.svg"); mask-size: 19px; mask-position: center; background-color: #858B97; width: 36px; height: 36px; } .c-btn .c-btn--icon.targetLink--gray4 { background-color: #858B97; width: 24px; height: 24px; } .c-btn .c-btn--icon.closeRight { mask-image: none; background-image: url("/7card/usr/file/attachment/icon_close_circle.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-btn--cta { background-color: #9D843E; } .c-btn--cta .c-btn__label { color: #ffffff; } .c-btn--cta .c-btn--icon.arrowRight { background-color: #ffffff; } .c-btn--cta .c-btn--icon.arrowLeft { background-color: #ffffff; } .c-btn--cta::before { border-color: #9D843E; background-color: #9D843E; } .c-btn--cta::after { background-color: #6C4F00; } .c-btn--green.c-btn--primary::before { border-color: #59B770; } .c-btn--green.c-btn--primary::after { background-color: #59B770; } .c-btn--green .c-btn--primary::after { background-color: #59B770; } .c-btn--green .c-btn--icon.arrowRight { background-color: #59B770; } .c-btn--green .c-btn--icon.arrowLeft { background-color: #59B770; } @media screen and (max-width: 767px) { .c-btn { font-size: 13px; line-height: 1.3846153846; margin-inline: auto; } .c-btn--primary { padding: 12px 12px; } .c-btn--primary .c-btn--icon { width: 24px; height: 24px; } .c-btn--primary .c-btn--icon.targetLink { width: 24px; height: 24px; } .c-btn--primary::before { border-width: 2px; } .c-btn--medium { width: 240px; } .c-btn--large { width: 280px; } .c-btn--2line { width: 280px; } } .c-btn--02 { background-color: #DDF2FA; display: flex; align-items: center; justify-content: center; padding: 15px 12px; font-weight: 700; font-size: 18px; line-height: 1.5; color: #333333; } @media screen and (max-width: 767px) { .c-btn--02 { padding: 16px 12px; } } .c-btn-clode-menu { position: absolute; top: 20px; right: 20px; display: block; width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; } .c-btn-clode-menu:after, .c-btn-clode-menu:before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background-color: #C3A75E; border-radius: 50px; transform-origin: center; } .c-btn-clode-menu:after { transform: translate(-50%, -50%) rotate(45deg); } .c-btn-clode-menu:before { transform: translate(-50%, -50%) rotate(-45deg); } .c-btn-clode-menu--green:after, .c-btn-clode-menu--green:before { background-color: #59B770; } .page-notification .l-main { padding-block: 40px; } @media screen and (max-width: 767px) { .page-notification .l-main { padding-block: 24px; } } .c-notification { display: flex; width: 100%; max-width: 1200px; margin-inline: auto; color: #EF3A3C; } .c-notification__title { display: flex; align-items: center; flex: 0 0 174px; margin: 0; padding: 8px 24px; border: 1px solid #EF3A3C; border-right: 0; border-radius: 4px 0 0 4px; background-color: #FFEAEA; font-size: 14px; font-weight: 700; line-height: 1.7142857143; } .c-notification__icon { width: 14px; height: 13px; background: url("/7card/usr/file/attachment/icon_noti.svg") center no-repeat; background-size: 14px 13px; margin-right: 8px; } .c-notification__title-text { white-space: nowrap; } .c-notification__list { flex: 1 1 auto; min-width: 0; border: 1px solid #EF3A3C; border-radius: 0 4px 4px 0; } .c-notification__item { display: flex; padding: 7px 0; margin: 0 24px; } .c-notification__item + .c-notification__item { border-top: 1px solid #D9DDE3; } .c-notification__item .c-notification__icon { display: none; } .c-notification__link { display: inline-flex; align-items: center; color: #EF3A3C; font-size: 15px; font-weight: 700; line-height: 1.4666666667; text-decoration: underline; text-underline-offset: 2px; } @media (hover: hover) { .c-notification__link:hover { opacity: 0.75; text-decoration: none; } } .c-notification__text { display: inline-flex; align-items: center; color: #EF3A3C; font-size: 15px; font-weight: 700; line-height: 1.4666666667; } @media screen and (max-width: 767px) { .c-notification { display: block; } .c-notification__title { display: none; } .c-notification__list { border: 1px solid #EF3A3C; border-radius: 8px; overflow: hidden; } .c-notification__item { position: relative; border: 0; margin: 0; padding: 0; } .c-notification__item + .c-notification__item { border-top: 1px solid #EF3A3C; } .c-notification__item .c-notification__icon { display: inline-block; height: auto; width: 30px; flex-shrink: 0; background-color: #FFEAEA; padding-right: 0; margin-right: 0; } .c-notification__link { display: flex; border-left: 0; border-radius: 0; font-size: 13px; line-height: 1.3846153846; text-decoration: none; padding: 8px 16px 7px; } .c-notification__text { display: flex; border-left: 0; border-radius: 0; font-size: 13px; line-height: 1.3846153846; padding: 8px 16px 7px; } } .c-tab__control { display: flex; gap: 24px; width: max-content; max-width: 100%; margin: 0 auto 62px; padding: 8px; border-radius: 50px; background-color: #DEE2E8; } .c-tab__button { flex: 1 1 0; min-height: 48px; width: 302px; padding: 10px 6px; border: 0; border-radius: 40px; color: #727272; font-size: 15px; font-weight: 700; line-height: 1.4666666667; text-align: center; display: inline-flex; justify-content: center; align-items: center; } .c-tab__button.is-active { color: #333333; background-color: #ffffff; } @media screen and (min-width: 768px) { .c-tab__button.is-active { font-size: 16px; line-height: 1.6875; } } .c-tab__panels .c-tab__content { display: none; } .c-tab__content { display: none; } .c-tab__content.is-active { display: block; } @media screen and (max-width: 767px) { .c-tab__control { border-radius: 16px; gap: 0px; margin-bottom: 24px; padding: 6px; width: 100%; } .c-tab__control:has(.c-tab__button:nth-child(-n+2):is(:last-child)) { border-radius: 30px; } .c-tab__control:has(.c-tab__button:nth-child(-n+2):is(:last-child)) .c-tab__button { border-radius: 40px; } .c-tab__button { font-size: 13px; line-height: 1.3846153846; border-radius: 12px; padding: 8px; width: auto; } } .c-tab__animation { opacity: 0; transition: opacity 0.25s linear 0.17s; } .c-tab__content.is-active .c-tab__animation { animation: fadeInTabs 0.25s linear 0.17s forwards; } .c-condition { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 62px; } .c-condition__item { position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 340px; padding: 11px 24px; border-radius: 8px; background-color: #ffffff; box-shadow: 0 0 24px rgba(222, 226, 232, 0.95); color: #727272; font-size: 16px; font-weight: 700; line-height: 1.6875; text-align: center; cursor: pointer; isolation: isolate; transition: color 0.3s ease, box-shadow 0.3s ease; } .c-condition__item > * { position: relative; z-index: 1; } .c-condition__item::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #fff; } .c-condition__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(134.81deg, #E99495 5.92%, #EBB7CE 21.65%, #FDC689 37.38%, #F6EA91 52.19%, #B9D989 66.99%, #67C5EA 82.72%, #B0ABD5 98.45%); filter: blur(8px); border-radius: 16px; opacity: 0; transition: opacity 0.3s linear; z-index: -1; } .c-condition__item:has(.c-condition__input:checked) { box-shadow: 0 0 16px rgba(133, 139, 151, 0.18); color: #333333; } .c-condition__item:has(.c-condition__input:checked)::after { opacity: 1; } .c-condition__item:has(.c-condition__input:focus-visible) { outline: 2px solid #9D843E; outline-offset: 4px; } @media (hover: hover) { .c-condition__item:hover { color: #333333; } } .c-condition__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; border: 0; clip: rect(0 0 0 0); white-space: nowrap; } .c-condition__text { position: relative; z-index: 1; } @media screen and (max-width: 767px) { .c-condition { gap: 20px 16px; margin-bottom: 32px; } .c-condition__item { width: 164px; min-height: 50px; padding: 3px 12px; font-size: 14px; line-height: 1.7142857143; } } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: 0; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-slider .slick-track { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-right: auto; margin-left: auto; } .slick-track:after, .slick-track:before { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir=rtl] .slick-slide { float: right; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .c-slider { margin: 0 auto; } .c-slider .slick-slide { border: solid 1px #DEE2E8; border-radius: 20px; overflow: hidden; padding: 40px; } .c-slider .slick-slide img { width: auto; height: auto; } .c-slider:has(.c-textBox-images) .slick-track { display: flex; } .c-slider:has(.c-textBox-images) .slick-track .slick-slide { border: none !important; padding: 0 !important; border-radius: 0 !important; height: auto; } .c-slider:has(.c-textBox-images) .slick-track .slick-slide .c-textBox-images { height: 100%; } .c-slider .slick-arrow { position: absolute; top: calc(50% - 54px); z-index: 4; width: 60px; height: 60px; border: 1px solid #D9DDE3; border-radius: 50%; background-color: rgba(245, 247, 251, 0.6); font-size: 0; } .c-slider .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-top: 2px solid #858B97; border-right: 2px solid #858B97; } .c-slider .slick-prev { left: 0; transform: translateX(-50%); } .c-slider .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .c-slider .slick-next { right: 0; transform: translateX(50%); } .c-slider .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); } .c-slider .slick-dots { display: flex; justify-content: center; gap: 16px; margin-top: 24px; } .c-slider .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background-color: #DEE2E8; font-size: 0; } .c-slider .slick-dots .slick-active button { background-color: #858B97; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-slider .slick-prev { left: 10px; } .c-slider .slick-next { right: 10px; } } @media screen and (max-width: 767px) { .c-slider { max-width: 300px; margin: 0 auto; } .c-slider .slick-slide { padding: 24px 16px; border-radius: 16px; } .c-slider .slick-slide img { width: 100%; } .c-slider .slick-arrow { display: block; width: 44px; height: 44px; } .c-slider .slick-arrow::before { width: 8px; height: 8px; } .c-slider .slick-prev { left: 0; } .c-slider .slick-next { right: 0; } } .c-kv-slider { margin: 0 auto; } .c-kv-slider .slick-slide { margin: 24px 50px; box-shadow: 0px 0px 24px #dee2e8; border-radius: 20px; max-width: 1000px; } .c-kv-slider .slick-slide img { width: 100%; height: auto; } .c-kv-slider .slick-slide:has(+ .slick-center) { transform-origin: right center; } .c-kv-slider .slick-slide.slick-center + .slick-slide { transform-origin: left center; } .c-kv-slider .slick-slide:not(.slick-center) { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transition: 0.2s linear; } .c-kv-slider .slick-arrow { position: absolute; top: calc(50% - 53px); z-index: 4; width: 80px; height: 80px; border: 1px solid #D9DDE3; border-radius: 50%; background-color: rgba(245, 247, 251, 0.6); font-size: 0; } .c-kv-slider .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-top: 2px solid #858B97; border-right: 2px solid #858B97; } .c-kv-slider .slick-prev { left: calc(50% - 500px - 40px); } .c-kv-slider .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .c-kv-slider .slick-next { right: calc(50% - 500px - 40px); } .c-kv-slider .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); } .c-kv-slider .slick-dots { display: flex; justify-content: center; gap: 16px; margin-top: 8px; } .c-kv-slider .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background-color: #DEE2E8; font-size: 0; } .c-kv-slider .slick-dots .slick-active button { background-color: #858B97; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-kv-slider .slick-prev { left: 100px; } .c-kv-slider .slick-next { right: 100px; } } @media screen and (max-width: 767px) { .c-kv-slider .slick-slide { margin: 24px 10px; max-width: 280px; } .c-kv-slider .slick-slide img { width: 100%; } .c-kv-slider .slick-arrow { display: block; width: 44px; height: 44px; } .c-kv-slider .slick-arrow::before { width: 8px; height: 8px; } .c-kv-slider .slick-prev { left: 16px; } .c-kv-slider .slick-next { right: 16px; } .c-kv-slider .slick-dots { margin-top: 0; } } @media (min-width: 768px) { .c-spSlider.show_all { position: relative; width: 100%; padding: 0; overflow: visible; flex-direction: column; max-width: 1010px; align-items: center; margin-inline: auto; } .c-spSlider.show_all .slick-list { overflow: visible; mask-image: url(/7card/usr/file/attachment/mask_slider.png); mask-size: 1440px 100%; mask-repeat: no-repeat; mask-position: center; } .c-spSlider.show_all .slick-track { display: flex; } .c-spSlider.show_all .slick-slide { height: auto; margin: 0 16px; } .c-spSlider.show_all .pic_item { width: 282px; } .c-spSlider.show_all .pic_item img { width: 100%; height: 100%; object-fit: cover; } .c-spSlider.show_all .slick-arrow { font-size: 0; position: absolute; top: calc(50% - 53px); z-index: 4; width: 80px; height: 80px; border: 1px solid #D9DDE3; border-radius: 50%; background-color: rgba(245, 247, 251, 0.6); } .c-spSlider.show_all .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-top: 2px solid #858B97; border-right: 2px solid #858B97; } .c-spSlider.show_all .slick-arrow.slick-prev { left: 0px; } .c-spSlider.show_all .slick-arrow.slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .c-spSlider.show_all .slick-arrow.slick-next { right: 0px; } .c-spSlider.show_all .slick-arrow.slick-next::before { transform: translate(-65%, -50%) rotate(45deg); } .c-spSlider.show_all .slick-dots { display: flex; justify-content: center; gap: 16px; margin-top: 3px; } .c-spSlider.show_all .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background-color: #DEE2E8; font-size: 0; } .c-spSlider.show_all .slick-dots .slick-active button { background-color: #858B97; } } .c-spSlider.show_all[data-center-mode=false] { align-items: normal; } @media screen and (max-width: 767px) { .c-spSlider.show_all .slick-arrow { top: calc(50% - 18px); } .c-spSlider.show_all.show_all[data-center-mode=false] { margin-inline: 0; width: 100%; } .c-spSlider.show_all.show_all[data-center-mode=false] .slick-arrow.slick-prev { left: 0; } .c-spSlider.show_all.show_all[data-center-mode=false] .slick-arrow.slick-next { right: 0; } .c-spSlider.show_all.show_all[data-center-mode=false] .slick-track { align-items: stretch; height: 100%; } .c-spSlider.show_all.show_all[data-center-mode=false] .c-flow { align-items: center; } .c-spSlider.show_all.show_all[data-center-mode=false] .c-flow__item { height: auto; } } @media screen and (max-width: 767px) { .c-spSlider { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); padding: 0; overflow: visible; } .c-spSlider.is-animating .slick-slide > * { transition: transform 0.5s ease; } .c-spSlider .slick-list { overflow: visible; } .c-spSlider .slick-track { display: flex; align-items: center; } .c-spSlider .slick-slide { height: auto; margin: 0 12px; } .c-spSlider .slick-slide:has(+ .slick-center) { transform-origin: right center; } .c-spSlider .slick-slide.slick-center + .slick-slide { transform-origin: left center; } .c-spSlider .slick-slide:not(.slick-center) { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transition: 0.2s linear; } .c-spSlider .slick-arrow { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); z-index: 2; display: block; width: 44px; height: 44px; border: 1px solid #D9DDE3; border-radius: 50%; background-color: rgba(245, 247, 251, 0.6); font-size: 0; } .c-spSlider .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 1px solid #858B97; border-right: 1px solid #858B97; } .c-spSlider .slick-arrow.slick-prev { left: 16px; } .c-spSlider .slick-arrow.slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .c-spSlider .slick-arrow.slick-next { right: 16px; } .c-spSlider .slick-arrow.slick-next::before { transform: translate(-65%, -50%) rotate(45deg); } .c-spSlider .slick-dots { display: block; margin-top: 24px; display: flex; justify-content: center; gap: 16px; } .c-spSlider .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background-color: #DEE2E8; font-size: 0; } .c-spSlider .slick-dots .slick-active button { background-color: #858B97; } } .c-spSlider .c-flow__item { width: 320px; padding: 16px; } .c-spSlider .slick-slide:has(.c-flow) { margin: 0 8px; } .no-scale .slick-slide { transform: scale(1) !important; } .no-mark { overflow: hidden !important; } .slick-disabled { pointer-events: none; opacity: 0; } .c-textBox-images { padding: 40px; border: solid 1px #DEE2E8; border-radius: 20px; } .c-textBox-images__image { height: 400px; width: auto; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .c-textBox-images__image img { width: 100%; height: auto; object-fit: contain; } .c-textBox-images__image:not(:first-child) { margin-top: 24px; } @media screen and (max-width: 767px) { .c-textBox-images { padding: 24px 16px; border-radius: 16px; } .c-textBox-images__image { height: 420px; } } @media (min-width: 768px) { .no-arrow .slick-arrow, .no-arrow .slick-dots { display: none !important; } } @media (min-width: 768px) { .l-topics__list:has(.l-topics__item:nth-child(3):is(:last-child)) .slick-arrow, .l-topics__list:has(.l-topics__item:nth-child(3):is(:last-child)) .slick-dots { display: none !important; } } .slick-slide .c-flow { margin-top: 0; } @media screen and (min-width: 768px) { *:not(.page-home) .c-spSlider.show_all .slick-arrow { width: 60px; height: 60px; } *:not(.page-home) .c-spSlider.show_all .slick-arrow.slick-prev { transform: translateX(-50%); left: 0; } *:not(.page-home) .c-spSlider.show_all .slick-arrow.slick-next { transform: translateX(50%); right: 0; } *:not(.page-home) .no-mark { overflow: visible !important; } } @media screen and (min-width: 768px) and (max-width: 1200px) { *:not(.page-home) .c-spSlider.show_all .slick-arrow.slick-prev { left: 10px; } *:not(.page-home) .c-spSlider.show_all .slick-arrow.slick-next { right: 10px; } } .c-slider__items-image picture { position: relative; display: inline-block; } .c-slider__items-image .app-link { position: absolute; } .c-slider__items-image .app-link--appstore { width: 216px; height: 79px; bottom: 0; left: 0; } .c-slider__items-image .app-link--playstore { width: 266px; height: 79px; bottom: 0; right: 0; } @media screen and (max-width: 767px) { .c-slider__items-image .app-link { transform: translateX(-50%); } .c-slider__items-image .app-link--appstore { width: 154px; height: 57px; bottom: 29%; left: 50%; } .c-slider__items-image .app-link--playstore { width: 189px; height: 57px; bottom: 9%; left: 50%; } } .c-flow { display: flex; gap: 24px; margin-top: 24px; flex-wrap: wrap; height: 100%; } .c-flow__head { display: flex; align-items: center; align-self: stretch; gap: 32px; padding-bottom: 7px; border-bottom: solid 1px #DEE2E8; } .c-flow__item { display: flex; flex-direction: column; align-items: center; max-width: 330px; width: 100%; padding: 24px 32px 32px; background-color: #ffffff; border: 2px solid #d9dde3; border-radius: 16px; gap: 16px; } .c-flow__item--full { width: 100%; max-width: 100%; padding: 22px 38px; } .c-flow__item--full > .c-flow__head > .c-flow__step { padding-bottom: 0; } .c-flow__item--full > .c-flow__head > .c-flow__step:after { content: none; } .c-flow__item--full .c-flow__body { gap: 9px; } .c-flow__item--full .c-flow__body--img { margin-inline: auto; } .c-flow__item--full .c-spSlider .c-flow__item { width: 309px; max-width: 100%; } .c-flow__step { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding-bottom: 4px; color: #C3A75E; font-family: "Poppins", sans-serif; font-size: 22px; line-height: 1.3636363636; font-weight: 700; position: relative; flex-shrink: 0; } .c-flow__step.no-line { padding-bottom: 0; } .c-flow__step.no-line:after { content: none; } .c-flow__step:after { content: ""; position: absolute; width: 20px; height: 3px; background-color: #C3A75E; bottom: 0; left: 50%; transform: translateX(-50%); border-radius: 10px; } .c-flow__step span { font-size: 32px; line-height: 1.03125; transform: translateY(-1px); } .c-flow__title { font-size: 22px; line-height: 1.5; font-weight: 700; flex: 1 1 100%; } .c-flow__thumbnail { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 134px; } .c-flow__thumbnail img { max-width: 100%; width: auto; height: auto; } .c-flow__body { display: flex; flex-direction: column; width: 100%; gap: 16px; } .c-flow__text { width: 100%; font-size: 16px; line-height: 1.6875; color: #000000; } @media screen and (max-width: 767px) { .c-flow { flex-direction: column; align-items: center; } .c-flow__item { padding: 24px 16px; width: 100%; } .c-flow__item--full { gap: 22px; padding: 22px 14px; } .c-flow__title { font-size: 18px; line-height: 1.5; } .c-flow__body { font-size: 14px; line-height: 1.7142857143; } .c-flow__step { font-size: 18px; line-height: 1.6666666667; } .c-flow__step span { font-size: 30px; line-height: 1; } } .c-flow-2 { max-width: 1040px; width: 100%; margin-top: 24px; } .c-flow-2.option-white .c-flow-2__item:before { background-color: #ffffff; } .c-flow-2.option-white .c-flow-2__item:after { background-color: #ffffff; } .c-flow-2.option-white .c-flow-2__item--current .c-flow-2__label { background-color: #C3A75E; color: #ffffff; } .c-flow-2.option-white .c-flow-2__item--current:before { background-color: #C3A75E; } .c-flow-2.option-white .c-flow-2__item--current:after { background-color: #C3A75E; } .c-flow-2.option-white .c-flow-2__label { background-color: #ffffff; } .c-flow-2__list { display: flex; width: 100%; } .c-flow-2__item { flex: 1 1 0; overflow: hidden; position: relative; padding: 0 35px; } .c-flow-2__item:before { content: ""; position: absolute; width: 35px; height: 100%; top: 0; left: 1px; mask-image: url(/7card/usr/file/attachment/mask-flow_01.png); mask-size: 100% 100%; mask-repeat: no-repeat; background-color: #F5F7FB; z-index: 1; } .c-flow-2__item:after { content: ""; position: absolute; width: 35px; height: 100%; top: 0; right: 2px; mask-image: url(/7card/usr/file/attachment/mask-flow_02.png); mask-size: 100% 100%; mask-repeat: no-repeat; background-color: #F5F7FB; z-index: 1; } .c-flow-2__item:first-child { z-index: 3; padding-left: 0; border-radius: 6px 0 0 6px; overflow: hidden; } .c-flow-2__item:first-child::before { content: none; } .c-flow-2__item:first-child .c-flow-2__label { padding-left: 15px; } .c-flow-2__item:not(:first-child) { z-index: 2; margin-left: -15px; } .c-flow-2__item:last-child { z-index: 1; padding-right: 0; border-radius: 0 6px 6px 0; overflow: hidden; } .c-flow-2__item:last-child:after { content: none; } .c-flow-2__item:last-child .c-flow-2__label { padding-right: 15px; } .c-flow-2__item--current .c-flow-2__label { background-color: #C3A75E; color: #ffffff; } .c-flow-2__item--current:before { background-color: #C3A75E; } .c-flow-2__item--current:after { background-color: #C3A75E; } .c-flow-2__label { position: relative; z-index: 2; background-color: #F5F7FB; padding: 19px 0; display: block; color: #000000; font-size: 18px; line-height: 1.5; font-weight: 700; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .c-flow-2__list { min-height: 100px; } .c-flow-2__item { padding: 0 24px 0 8px; font-size: 16px; line-height: 1.5; } .c-flow-2__item:not(:first-child) { padding-left: 28px; } .c-flow-2__item:first-child .c-flow-2__label { padding-left: 8px; } .c-flow-2__item:last-child .c-flow-2__label { padding-right: 8px; } .c-flow-2__label { font-size: 16px; line-height: 1.5; } } .c-flow-3 { max-width: 1040px; width: 100%; margin-top: 24px; } .c-flow-3.option-white .c-flow-3__item:before { background-color: #ffffff; } .c-flow-3.option-white .c-flow-3__item:after { background-color: #ffffff; } .c-flow-3.option-white .c-flow-3__item--current .c-flow-3__label { background-color: #C3A75E; color: #ffffff; } .c-flow-3.option-white .c-flow-3__item--current:before { background-color: #C3A75E; } .c-flow-3.option-white .c-flow-3__item--current:after { background-color: #C3A75E; } .c-flow-3.option-white .c-flow-3__label { background-color: #ffffff; } .c-flow-3__list { display: flex; width: 100%; } .c-flow-3__item { flex: 1 1 0; overflow: hidden; position: relative; padding: 0 35px; } .c-flow-3__item:before { content: ""; position: absolute; width: 35px; height: 100%; top: 0; left: 1px; mask-image: url(/7card/usr/file/attachment/mask-flow_01.png); mask-size: 100% 100%; mask-repeat: no-repeat; background-color: #F5F7FB; z-index: 1; } .c-flow-3__item:after { content: ""; position: absolute; width: 35px; height: 100%; top: 0; right: 2px; mask-image: url(/7card/usr/file/attachment/mask-flow_02.png); mask-size: 100% 100%; mask-repeat: no-repeat; background-color: #F5F7FB; z-index: 1; } .c-flow-3__item:first-child { z-index: 3; border-radius: 6px 0 0 6px; overflow: hidden; } .c-flow-3__item:first-child::before { background-color: #f5f7fb; mask-image: none; } .c-flow-3__item:first-child .c-flow-3__label { padding-left: 15px; } .c-flow-3__item:not(:first-child):not(:last-child) { z-index: 2; margin: 0 -15px; } .c-flow-3__item:not(:first-child):not(:last-child):nth-child(3) { z-index: 2; margin: 0 -15px 0 0; } .c-flow-3__item:last-child { max-width: 120px; z-index: 1; padding-right: 0; border-radius: 0 6px 6px 0; overflow: hidden; } .c-flow-3__item:last-child:after { content: none; } .c-flow-3__item:last-child .c-flow-3__label { padding-right: 15px; } .c-flow-3__item--current .c-flow-3__label { background-color: #C3A75E; color: #ffffff; } .c-flow-3__item--current:before { background-color: #C3A75E; } .c-flow-3__item--current:after { background-color: #C3A75E; } .c-flow-3__label { position: relative; z-index: 2; background-color: #F5F7FB; padding: 19px 0; display: block; color: #000000; font-size: 18px; line-height: 1.5; font-weight: 700; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .c-flow-3__list { min-height: 100px; } .c-flow-3__item { padding: 0 15px 0 0px; font-size: 16px; line-height: 1.5; } .c-flow-3__item::before { mask-image: url(/7card/usr/file/attachment/mask-flow_01_sp.png); width: 12px; left: 4px; } .c-flow-3__item::after { mask-image: url(/7card/usr/file/attachment/mask-flow_02_sp.png); width: 13px; right: 3px; } .c-flow-3__item:not(:first-child) { padding-left: 16px; } .c-flow-3__item:first-child .c-flow-3__label { padding-left: 8px; } .c-flow-3__item:last-child { max-width: 86px; } .c-flow-3__item:last-child .c-flow-3__label { padding-right: 8px; } .c-flow-3__label { font-size: 16px; line-height: 1.35; padding: 2px 0; } } .c-flow-payment { margin-top: 32px; } .c-flow-payment__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .c-flow-payment__item { width: 330px; min-height: 167px; padding: 31px 31px 23px; background-color: #ffffff; border: 1px solid #D9DDE3; border-radius: 16px; } .c-flow-payment__title { padding-bottom: 8px; border-bottom: 1px solid #D9DDE3; color: #000000; font-size: 22px; line-height: 1.5; font-weight: 700; text-align: center; } .c-flow-payment__text { margin-top: 16px; color: #000000; font-size: 16px; line-height: 1.6875; } @media screen and (max-width: 767px) { .c-flow-payment__list { gap: 16px; } .c-flow-payment__item { width: 100%; min-height: initial; padding: 24px 16px; } .c-flow-payment__title { font-size: 18px; line-height: 1.5; } .c-flow-payment__text { font-size: 14px; line-height: 1.7142857143; } } .c-cashing-point { margin-top: 24px; } .c-cashing-point__title { color: #333333; font-size: 22px; line-height: 1.5; font-weight: 700; text-align: center; } .c-cashing-point__list { display: flex; justify-content: center; gap: 40px; margin-top: 24px; } .c-cashing-point__item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 170px; height: 170px; border: 4px solid #C3A75E; border-radius: 50%; padding: 15px 5px; } .c-cashing-point__label { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding-bottom: 0; color: #C3A75E; font-family: "Poppins", sans-serif; font-size: 18px; line-height: 1.6666666667; font-weight: 700; position: relative; } .c-cashing-point__label::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 20px; height: 3px; background-color: #C3A75E; border-radius: 10px; transform: translateX(-50%); } .c-cashing-point__label span:last-child { font-size: 24px; line-height: 1.375; } .c-cashing-point__text { margin-top: 10px; color: #333333; font-size: 14px; line-height: 1.5; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .c-cashing-point__title { font-size: 18px; line-height: 1.5; } .c-cashing-point__list { gap: 5px; } .c-cashing-point__item { width: 110px; height: 110px; padding: 7px 3px; } .c-cashing-point__label { font-size: 12px; gap: 2px; } .c-cashing-point__label span:last-child { font-size: 20px; } .c-cashing-point__text { font-size: 10px; line-height: 1.4; margin-top: 5px; } } @media screen and (max-width: 350px) { .c-cashing-point__item { width: 29vw; height: 29vw; padding: 1vw; } .c-cashing-point__label { font-size: 3vw; } .c-cashing-point__label:after { height: 2px; } .c-cashing-point__label span:last-child { font-size: 5vw; } .c-cashing-point__text { font-size: 2.7vw; } } .w-800 { max-width: 800px; width: 100%; } .c-bnr { position: relative; width: 100%; max-width: 1044px; min-height: 275px; margin-inline: auto; padding: 41px 54px 40px 64px; border-radius: 20px; background-color: #F5F7FB; display: flex; align-items: center; width: 100%; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr { padding: 30px; } } .c-bnr.no-bg { background-color: transparent; } .c-bnr--auto { min-height: auto; } .c-bnr__wrap { display: flex; width: 100%; gap: 30px; } .c-bnr__content { width: 52.6%; } .c-bnr__title { margin: 0; color: #333333; font-size: 22px; font-weight: 700; line-height: 1.5; margin-bottom: 24px; } .c-bnr__text { color: #333333; font-size: 16px; font-weight: 700; line-height: 1.6875; } .c-bnr__btn { margin-top: 27px; } .c-bnr__image { display: flex; align-items: center; margin: 0; line-height: 0; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr__image { flex-shrink: 1; } } .c-bnr-2 { position: relative; } .c-bnr-2 .wrap-btn { position: absolute; width: 100%; bottom: 40px; } @media screen and (max-width: 767px) { .c-bnr { display: flex; flex-direction: column; min-height: 0; padding: 22px 16px; border-radius: 15px; } .c-bnr__image { margin-bottom: 32px; max-width: 184px; } .c-bnr__wrap { gap: 0; flex-direction: column-reverse; align-items: center; } .c-bnr__content { width: 100%; } .c-bnr__title, .c-bnr .c-title-l-bold { font-size: 18px; line-height: 1.5; margin-bottom: 0; } .c-bnr__text { margin-top: 8px; font-size: 14px; line-height: 1.7142857143; color: #000000; } .c-bnr__btn { text-align: center; margin-top: 24px; } } .c-bnr-02 { display: flex; } .c-bnr-02 img { width: 100%; height: 100%; object-fit: cover; } .c-bnr-qr { position: relative; padding: 0; border-radius: 0; } @media screen and (min-width: 768px) { .c-bnr-qr a:not(.c-btn) { pointer-events: none; } } .c-bnr-qr__content { position: absolute; max-width: 50%; width: 480px; height: 100%; right: 0; top: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; padding-top: 30px; padding-right: 10px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr__content { padding-block: 10px; width: clamp(320px, 44vw, 480px); } } .c-bnr-qr__store { display: flex; gap: 27px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr__store { gap: clamp(12px, 2.2vw, 27px); } } .c-bnr-qr__store a:hover { opacity: 1; } .c-bnr-qr__store-ttl { margin-bottom: 24px; display: block; width: 162px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr__store-ttl { margin-inline: auto; width: clamp(100px, 15vw, 162px); margin-bottom: clamp(12px, 2.2vw, 24px); } } .c-bnr-qr__store a:nth-child(2) .c-bnr-qr__store-ttl { width: 183px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr__store a:nth-child(2) .c-bnr-qr__store-ttl { width: clamp(100px, 16.94vw, 183px); } } .c-bnr-qr__store-qr { width: 143px; max-width: 100%; margin: 0 auto; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr__store-qr { width: clamp(100px, 12.96vw, 143px); } } .c-bnr-qr__store-btn { display: none; } .c-bnr-qr .wrap-btn { margin-top: 27px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-bnr-qr .wrap-btn { margin-top: clamp(12px, 1.8vw, 27px); } } @media screen and (max-width: 767px) { .c-bnr-qr { max-width: 345px; margin-inline: auto; } .c-bnr-qr__content { bottom: 0; left: 0; top: auto; right: 0; max-width: 100%; margin-top: auto; padding: 40px 20px; } .c-bnr-qr__store { gap: 16px; margin-top: auto; } .c-bnr-qr__store-ttl { display: none; } .c-bnr-qr__store-qr { display: none; } .c-bnr-qr__store-btn { display: block; height: 44px; } .c-bnr-qr .wrap-btn { margin-top: 16px; } .c-bnr-qr--2 .c-bnr-qr__content { justify-content: flex-start; } .c-bnr-qr--2 .c-bnr-qr__store { margin-top: 130px; } .c-bnr-qr--2 .wrap-btn { margin-top: auto; width: 100%; } .c-bnr-qr--2 .c-btn--medium { min-width: 280px; } .c-bnr-qr--2 .c-btn--primary { padding: 13px 12px; } } .hover-gradient { position: relative; display: block; border-radius: 16px; isolation: isolate; overflow: visible; background: transparent; transition: box-shadow 0.3s linear; } .hover-gradient > * { position: relative; z-index: 1; } .hover-gradient::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #fff; } .hover-gradient::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; background: linear-gradient(134.81deg, #e99495 5.92%, #ebb7ce 21.65%, #fdc689 37.38%, #f6ea91 52.19%, #b9d989 66.99%, #67c5ea 82.72%, #b0abd5 98.45%); filter: blur(8px); opacity: 0; transition: opacity 0.3s linear; } @media (hover: hover) { .hover-gradient:hover { box-shadow: none !important; } .hover-gradient:hover::after { opacity: 1; } } .c-block { display: flex; align-items: center; gap: 24px; } .c-block__content { flex: 1; } .c-block__content .wrap-btn { margin-top: 48px; display: flex; gap: 16px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .c-block__content .wrap-btn { flex-direction: column; align-items: flex-start; } } .c-block__image { width: 508px; max-width: 50%; flex-shrink: 0; border-radius: 20px; overflow: hidden; text-align: center; } .c-block__image img { width: auto; } .c-block__image--2 { width: 480px; } .c-block__ttl { font-size: 36px; line-height: 1.6111111111; font-weight: 700; margin-bottom: 16px; } .c-block .c-txt { font-weight: bold; } .c-block + .c-block { margin-top: 56px; } .c-block--reverse { flex-direction: row-reverse; } .c-block--reverse .c-block__content { margin-right: -5px; } @media screen and (max-width: 767px) { .c-block { flex-direction: column; } .c-block--reverse { flex-direction: column; } .c-block--reverse .c-block__content { margin-right: 0; } .c-block__image { width: 100%; margin-top: 16px; max-width: 100%; } .c-block__ttl { font-size: 24px; line-height: 1.5833333333; } .c-block + .c-block { margin-top: 40px; } .c-block .wrap-btn { flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 24px; } } .bg-black { background-color: #333333 !important; } .bg-white { background-color: #D9DDE3 !important; } .bg-white1 { background-color: #ffffff !important; } .bg-gray { background-color: #727272 !important; } .bg-gray-1 { background-color: #F5F7FB !important; } .bg-gray-2 { background-color: #DEE2E8 !important; } .bg-gray-3 { background-color: #C5C9D0 !important; } .bg-gray-4 { background-color: #858B97 !important; } .bg-red-1 { background-color: #FFEAEA !important; } .bg-red-2 { background-color: #E99495 !important; } .bg-pink-1 { background-color: #FFECF5 !important; } .bg-pink-2 { background-color: #EBB7CE !important; } .bg-orange-1 { background-color: #FFECD6 !important; } .bg-orange-2 { background-color: #FDC689 !important; } .bg-yellow-1 { background-color: #FFF8C3 !important; } .bg-yellow-2 { background-color: #F6EA91 !important; } .bg-green-1 { background-color: #E3F2CE !important; } .bg-green-2 { background-color: #B9D989 !important; } .bg-green-3 { background-color: #C1F0D5 !important; } .bg-green { background-color: #59B770 !important; } .bg-blue-1 { background-color: #DDF2FA !important; } .bg-blue-2 { background-color: #67C5EA !important; } .bg-blue-3 { background-color: #C0DEFF !important; } .bg-blue { background-color: #5BC5EF !important; } .bg-purple-1 { background-color: #EBE9F8 !important; } .bg-purple-2 { background-color: #B0ABD5 !important; } .bg-gold-1 { background-color: #C3A75E !important; } .bg-gold-2 { background-color: #9D843E !important; } .bg-yellow { background-color: #F4ECA4 !important; } .bg-red { background-color: #EF3A3C !important; } .color-black { color: #333333 !important; } .color-black0 { color: #000000 !important; } .color-white { color: #D9DDE3 !important; } .color-white1 { color: #ffffff !important; } .color-gray { color: #727272 !important; } .color-gray-1 { color: #F5F7FB !important; } .color-gray-2 { color: #DEE2E8 !important; } .color-gray-3 { color: #C5C9D0 !important; } .color-gray-4 { color: #858B97 !important; } .color-red-1 { color: #FFEAEA !important; } .color-red-2 { color: #E99495 !important; } .color-pink-1 { color: #FFECF5 !important; } .color-pink-2 { color: #EBB7CE !important; } .color-orange-1 { color: #FFECD6 !important; } .color-orange-2 { color: #FDC689 !important; } .color-yellow-1 { color: #FFF8C3 !important; } .color-yellow-2 { color: #F6EA91 !important; } .color-green-1 { color: #E3F2CE !important; } .color-green-2 { color: #B9D989 !important; } .color-green { color: #59B770 !important; } .color-blue-1 { color: #DDF2FA !important; } .color-blue-2 { color: #67C5EA !important; } .color-blue { color: #5BC5EF !important; } .color-purple-1 { color: #EBE9F8 !important; } .color-purple-2 { color: #B0ABD5 !important; } .color-gold-1 { color: #C3A75E !important; } .color-gold-2 { color: #9D843E !important; } .color-yellow { color: #F4ECA4 !important; } .color-red { color: #EF3A3C !important; } .bd-black { border-color: #333333 !important; } .bd-white { border-color: #D9DDE3 !important; } .bd-white1 { border-color: #ffffff !important; } .bd-gray { border-color: #727272 !important; } .bd-gray-1 { border-color: #F5F7FB !important; } .bd-gray-2 { border-color: #DEE2E8 !important; } .bd-gray-3 { border-color: #C5C9D0 !important; } .bd-gray-4 { border-color: #858B97 !important; } .bd-red-1 { border-color: #FFEAEA !important; } .bd-red-2 { border-color: #E99495 !important; } .bd-pink-1 { border-color: #FFECF5 !important; } .bd-pink-2 { border-color: #EBB7CE !important; } .bd-orange-1 { border-color: #FFECD6 !important; } .bd-orange-2 { border-color: #FDC689 !important; } .bd-yellow-1 { border-color: #FFF8C3 !important; } .bd-yellow-2 { border-color: #F6EA91 !important; } .bd-green-1 { border-color: #E3F2CE !important; } .bd-green-2 { border-color: #B9D989 !important; } .bd-green-3 { border-color: #C1F0D5 !important; } .bd-green { border-color: #59B770 !important; } .bd-blue-1 { border-color: #DDF2FA !important; } .bd-blue-2 { border-color: #67C5EA !important; } .bd-blue-3 { border-color: #C0DEFF !important; } .bd-blue { border-color: #5BC5EF !important; } .bd-purple-1 { border-color: #EBE9F8 !important; } .bd-purple-2 { border-color: #B0ABD5 !important; } .bd-gold-1 { border-color: #C3A75E !important; } .bd-gold-2 { border-color: #9D843E !important; } .bd-yellow { border-color: #F4ECA4 !important; } .bd-red { border-color: #EF3A3C !important; } .c-noteList__item { font-size: 12px; line-height: 1.6666666667; color: #000000; } .c-noteList__item .c-mark { margin-right: 4px; } .c-noteList__item:has(.c-mark) { text-indent: -1.5em; padding-left: 1.5em; } .c-noteList__item + .c-noteList__item { margin-top: 4px; } .c-noteList__item a { display: inline; color: #0000ee; } @media (hover: hover) { .c-noteList__item a:hover { opacity: 1; text-decoration: underline; } } .c-noteList__item .icon-target:after, .c-noteList__item a[target=_blank]:after { width: 14px; height: 14px; margin-left: 4px; margin-right: 4px; margin-bottom: -2px; } @media screen and (max-width: 767px) { .c-noteList__item { font-size: 11px; line-height: 1.6363636364; } } .c-list__item { padding-left: 24px; position: relative; color: #000000; } .c-list__item + .c-list__item { margin-top: 4px; } .c-list--disc .c-list__item::before { content: ""; position: absolute; top: 10px; left: 10px; width: 4px; height: 4px; background-color: #333333; border-radius: 50%; } .c-list--disc .c-list__item.red { color: #EF3A3C; } .c-list--disc .c-list__item.red::before { background-color: #EF3A3C; } @media screen and (max-width: 767px) { .c-list__item { padding-left: 20px; } .c-list--disc .c-list__item::before { top: 12px; left: 9px; width: 3px; height: 3px; } } .c-breadcrumb { padding: 8px 0; border-bottom: solid 1px #DEE2E8; } .c-breadcrumb__list { display: flex; gap: 10px; font-family: "LINE Seed JP", sans-serif; font-size: 12px; line-height: 1.6666666667; color: #333333; } .c-breadcrumb__list a { color: #858B97; text-decoration: none; text-underline-offset: 3px; } @media (hover: hover) { .c-breadcrumb__list a:hover { opacity: 1; text-decoration: underline; color: #9D843E; } } .c-breadcrumb__item:not(:last-child)::after { content: ""; mask-image: url("/7card/usr/file/attachment/icon_arrow_03.svg"); mask-size: contain; mask-repeat: no-repeat; background-color: #858B97; margin-left: 10px; width: 4px; height: 8px; display: inline-block; } @media screen and (max-width: 767px) { .c-breadcrumb { display: none; } } .l-cardLink-list { display: flex; gap: 25px; flex-wrap: wrap; } .l-cardLink-list .c-cardLink { max-width: 100%; } .l-cardLink-list__item { max-width: 100%; width: 100%; } @media screen and (max-width: 767px) { .l-cardLink-list__item:has(.c-cardLink--100-sp) { max-width: 100% !important; } } .l-cardLink-list--2col { gap: 24px; } .l-cardLink-list--2col .l-cardLink-list__item { max-width: calc(50% - 12px); } @media screen and (max-width: 767px) { .l-cardLink-list--2col .l-cardLink-list__item { max-width: 100%; margin: 0 auto; } } @media screen and (max-width: 767px) { .l-cardLink-list--2col-sp { gap: 16px; } .l-cardLink-list--2col-sp .l-cardLink-list__item { max-width: calc(50% - 8px); } } .l-cardLink-list--3col { gap: 25px; } .l-cardLink-list--3col .l-cardLink-list__item { max-width: calc((100% - 50px) / 3); } @media screen and (max-width: 767px) { .l-cardLink-list--3col .l-cardLink-list__item { max-width: 240px; margin: 0 auto; } } .l-cardLink-list--4col { gap: 24px; } .l-cardLink-list--4col .l-cardLink-list__item { max-width: calc((100% - 72px) / 4); } @media screen and (max-width: 767px) { .l-cardLink-list--4col { gap: 16px 24px; } .l-cardLink-list--4col .l-cardLink-list__item { max-width: calc((100% - 24px) / 2); } } .c-cardLink { display: flex; flex-direction: column; max-width: 383px; width: 100%; color: #333333; text-decoration: none; position: relative; filter: drop-shadow(0px 0px 24px #DEE2E8); height: 100%; transform: rotate(0); } .c-cardLink::after { content: ""; position: absolute; inset: 0; background-color: #ffffff; border-radius: 16px; transition: opacity 0.3s linear; z-index: -1; } .c-cardLink::before { content: ""; position: absolute; inset: 0; background: linear-gradient(134.81deg, #E99495 5.92%, #EBB7CE 21.65%, #FDC689 37.38%, #F6EA91 52.19%, #B9D989 66.99%, #67C5EA 82.72%, #B0ABD5 98.45%); filter: blur(8px); border-radius: 16px; opacity: 0; transition: opacity 0.3s linear; z-index: -2; } .c-cardLink__image { position: relative; overflow: hidden; border-radius: 16px 16px 0 0; background-color: #ffffff; display: flex; align-items: flex-end; justify-content: center; } .c-cardLink__body { position: relative; padding: 16px 24px; min-height: 68px; display: flex; align-items: center; justify-content: space-between; border-top: 0; background-color: #ffffff; border-radius: 0 0 16px 16px; flex: 1; } .c-cardLink__body:has(.c-cardLink__icon) { padding-right: 72px; } .c-cardLink__text { align-self: stretch; } .c-cardLink__text .c-cardLink__title { margin-bottom: 4px; } .c-cardLink__title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; } .c-cardLink--border .c-cardLink__image { border: 1px solid #D9DDE3; border-bottom: none; } .c-cardLink--border .c-cardLink__body { border: 1px solid #D9DDE3; border-top: none; } .c-cardLink--small { max-width: 280px; } .c-cardLink--large { width: 508px; max-width: 100%; } @media screen and (min-width: 768px) { .c-cardLink--large .c-cardLink__title { font-size: 22px; line-height: 1.5; } } .c-cardLink--full { width: 100%; max-width: 100%; flex-direction: row; padding: 24px 24px 24px 40px; background-color: #ffffff; border-radius: 16px; gap: 30px; } .c-cardLink--full .c-cardLink__image { width: 120px; border-radius: 0; margin-inline: auto; } .c-cardLink--full .c-cardLink__text { align-self: auto; } .c-cardLink--full .c-cardLink__body { flex: 1; padding: 0; gap: 36px; } @media screen and (max-width: 767px) { .c-cardLink--full { flex-direction: column; padding: 0; gap: 0; } .c-cardLink--full .c-cardLink__image { border: 1px solid #D9DDE3; width: 100%; border-radius: 16px 16px 0 0; border-bottom: none; } .c-cardLink--full .c-cardLink__body { padding: 16px; border: 1px solid #D9DDE3; border-top: none; gap: 10px; } .c-cardLink--full .c-cardLink__body:is(:first-child) { border-radius: 16px; border: 1px solid #D9DDE3; } } .c-cardLink:not(a) { cursor: default; } .c-cardLink:not(a)::before { content: none; } @media (hover: hover) { .c-cardLink:hover:is(a) { opacity: 1; filter: none; } .c-cardLink:hover:is(a):before { opacity: 1; } .c-cardLink:hover:is(a) .c-cardLink__icon { background-color: #9D843E; } .c-cardLink:hover:is(a) .c-cardLink__icon::after { background-color: #ffffff; } } @media screen and (max-width: 767px) { .c-cardLink { margin-inline: auto; } .c-cardLink--small .c-cardLink__title { font-size: 16px; line-height: 1.5; } .c-cardLink--small .c-cardLink__body { padding: 16px; } .c-cardLink__body { padding: 16px 20px; } .c-cardLink__body:has(.c-cardLink__icon) { padding-right: 45px; min-height: 80px; } .c-cardLink__title { font-size: 18px; line-height: 1.5; } .c-cardLink__image { min-height: initial; } .c-cardLink--100-sp { max-width: 100% !important; } } .c-icon { position: relative; width: 36px; height: 36px; border: 1px solid #9d843e; border-radius: 100px; transition: background-color 0.3s ease; flex-shrink: 0; } .c-icon::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 11px; border-radius: 50%; mask-image: url("/7card/usr/file/attachment/icon_arrow_01.svg"); mask-size: contain; background-color: #9d843e; transition: background-color 0.3s ease; } .c-icon--noborder { border: none; } .c-icon--noborder::after { mask-image: url("/7card/usr/file/attachment/icon_arrow_08.svg"); mask-repeat: no-repeat; width: 16px; height: 16px; } .c-icon--green { border-color: #59B770; } .c-icon--green::after { background-color: #59B770; } .c-icon--small { width: 24px; height: 24px; } .c-icon--disabled { border-color: #858B97; cursor: not-allowed; } .c-icon--disabled::after { background-color: #858B97; } .c-icon--play::after { mask-image: url("/7card/usr/file/attachment/icon_arrow_05.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; border-radius: 0; } .c-icon--pause::after { mask-image: url("/7card/usr/file/attachment/icon_pause.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; border-radius: 0; } .c-icon--target::after { mask-image: url("/7card/usr/file/attachment/icon_target.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: center; border-radius: 0; width: 12px; height: 12px; top: 48%; left: 52%; } .c-icon--warning { border-radius: none; border: none; width: 20px; height: 20px; background-color: transparent; } .c-icon--warning::after { width: 100%; height: 100%; background-color: transparent; background-image: url("/7card/usr/file/attachment/icon_notification.svg"); mask-image: none; mask-position: center; border-radius: 0; background-size: contain; } .c-icon--warning_off::after { background-image: url("/7card/usr/file/attachment/icon_notification_off.svg"); } @media screen and (max-width: 767px) { .c-icon { width: 24px; height: 24px; } .c-icon--warning { width: 18px; height: 18px; } .c-icon--warning::after { mask-image: none; mask-position: center; border-radius: 0; } } @media (hover: hover) { a:not(.disabled):hover .c-icon { background-color: #9D843E; } a:not(.disabled):hover .c-icon::after { background-color: #ffffff; } a:not(.disabled):hover .c-icon--play { background-color: #9D843E; } a:not(.disabled):hover .c-icon--play::after { background-color: #ffffff; } a:not(.disabled):hover .c-icon--green { background-color: #59B770; } a:not(.disabled):hover .c-icon--green::after { background-color: #ffffff; } a:not(.disabled):hover .c-icon--noborder { background-color: transparent; } a:not(.disabled):hover .c-icon--noborder::after { background-color: #9D843E; } } .c-hero-banner + .c-hero-banner:not(.slick-slide) { margin-top: 24px; } .c-hero-banner__inner { display: flex; gap: 32px; align-items: center; padding: 24px; border-radius: 16px; background-color: #ffffff; color: #333333; text-decoration: none; box-shadow: 0px 0px 24px #DEE2E8; position: relative; } @media (hover: hover) { .c-hero-banner__inner:hover { opacity: 1; } } .c-hero-banner__image { overflow: hidden; border-radius: 16px; line-height: 0; width: 530px; flex-shrink: 0; max-width: 50%; } .c-hero-banner__image-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(41, 41, 41, 0.6); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 44px; line-height: 1.4545454545; font-weight: 700; } .c-hero-banner__body { flex: 1; } .c-hero-banner__badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .c-hero-banner__badge { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px 0; border-radius: 19px; font-size: 13px; font-weight: 700; line-height: 1.6153846154; } .c-hero-banner__badge--gold { background-color: #9D843E; color: #ffffff; } .c-hero-banner__badge--black { background-color: #333333; color: #ffffff; } .c-hero-banner__badge--red { background-color: #FFEAEA; color: #333333; } .c-hero-banner__badge--purple { background-color: #EBE9F8; color: #333333; } .c-hero-banner__badge--white { background-color: #ffffff; color: #333333; border: 1px solid #B0ABD5; } .c-hero-banner__badge--txt { color: #9D843E; padding: 0; } .c-hero-banner__status { color: #9D843E; font-size: 13px; font-weight: 800; line-height: 1.6153846154; } .c-hero-banner__text { margin-top: 24px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 1px solid #D9DDE3; } .c-hero-banner__title { margin: 0; color: #333333; font-size: 22px; font-weight: 700; line-height: 1.5; } .c-hero-banner__description { margin: 4px 0 0; font-size: 16px; line-height: 1.6875; } .c-hero-banner__date { font-size: 14px; font-weight: 700; line-height: 1.7142857143; } .c-hero-banner--medium { max-width: 1040px; } .c-hero-banner--medium .c-hero-banner__inner { gap: 24px; } .c-hero-banner--medium .c-hero-banner__image { width: 468px; } @media screen and (max-width: 767px) { .c-hero-banner:not(.slick-slide) { max-width: 280px; margin-inline: auto; } .c-hero-banner__inner { display: block; width: 100%; padding: 16px; } .c-hero-banner__inner + .c-hero-banner__inner { margin-top: 0; } .c-hero-banner__image { border-radius: 15px; width: 100%; max-width: 100%; } .c-hero-banner__image-overlay { font-size: 24px; line-height: 1.5833333333; } .c-hero-banner__body { margin-top: 24px; } .c-hero-banner__badges { flex-wrap: wrap; gap: 0 12px; } .c-hero-banner__badge { min-height: 24px; font-size: 12px; line-height: 1.5833333333; } .c-hero-banner__status { font-size: 12px; line-height: 1.5833333333; } .c-hero-banner__text { margin-top: 16px; padding-bottom: 16px; } .c-hero-banner .c-icon { display: none; } .c-hero-banner__title { font-size: 18px; line-height: 1.5; } .c-hero-banner__description { font-size: 14px; line-height: 1.7142857143; } .c-hero-banner__date { font-size: 13px; line-height: 1.5384615385; } } /* ======================================== component: Parts card FLOCSS: component ======================================== */ .c-card { padding: 24px; color: #333333; font-size: 1rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; } .c-card:hover { text-decoration: none; opacity: 1; } .c-card__label, .c-card__image + .c-card__label { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 30px; padding-right: 35px; font-size: 1.25rem; } .c-card__image + .c-card__label { margin-top: 24px; color: #333333; } .c-card__image { position: relative; display: block; overflow: hidden; border-radius: 10px; } .c-card__image img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; } .c-card__image::after { content: ""; position: absolute; inset: 0; background-color: #ffffff; opacity: 0; transition: opacity 0.3s ease; } .c-card__label::before, .c-card__label::after { content: ""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .c-card[target=_blank] .c-card__label::before, .c-card--icon-link[target=_blank] .c-card__label::before { right: -1px; width: 30px; height: 30px; background-color: #9D843E; mask: url("/7card/usr/file/attachment/icon_target.svg") center/contain no-repeat; } .c-card__description { color: #333333; font-size: 1rem; font-weight: 400; line-height: 1.8; letter-spacing: -0.01em; } @media (hover: hover) { .c-card:hover { border-color: #9D843E; } .c-card:hover .c-card__label::after { border-color: #9D843E; background-color: #9D843E; transform: translateY(-50%) scale(1.2); } .c-card:hover .c-card__label::before { background-color: #ffffff; } .c-card:hover .c-card__image img { transform: scale(1.05); } .c-card:hover .c-card__image::after { opacity: 0.3; } } @media (hover: hover) { .c-card[target=_blank]:hover .c-card__label::before { background-color: #ffffff; } } .o-card-block--text-links .c-card { flex-grow: unset; padding: 24px; } .c-card-panel__link { position: relative; display: block; padding: 16px 30px 18px; } .c-card-panel__link::after { content: ""; position: absolute; right: 10px; bottom: 10px; z-index: 5; display: block; width: 20px; height: 20px; background-color: #9D843E; mask: url("/7card/usr/file/attachment/icon_arrow_circle.svg") center/contain no-repeat; transition: width 0.3s ease, height 0.3s ease, right 0.3s ease, bottom 0.3s ease; } @media (hover: hover) { .c-card-panel__link:hover::after { right: 8px; bottom: 8px; width: 24px; height: 24px; } } .c-card-panel__image { display: block; line-height: 0; text-align: center; } .c-card-panel__image > img { display: inline-block; } .c-card-panel__label { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 9px; color: #333333; font-size: 1rem; font-weight: 700; line-height: 1.4; } @media (hover: hover) { .c-card-box__link:hover { text-decoration: none; } .c-card-box__link:hover .c-card-box__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .c-card-box__link:hover .c-card-box__info::before { background-color: #9D843E; } .c-card-box__link:hover .c-card-box__info::after { background-color: #F5F7FB; } .c-card-box__link:hover .c-card-box__image img { transform: scale(1.05); } .c-card-box__link:hover .c-card-box__image::after { opacity: 0.3; } } .c-card-box__info { position: relative; z-index: 1; padding-right: 55px; } .c-card-box__info::before, .c-card-box__info::after { content: ""; position: absolute; top: 50%; right: 0; display: block; transform: translateY(-50%); } .c-card-box__info::before { right: 20px; z-index: 10; width: 8px; height: 11px; background-color: #ffffff; mask: url("/7card/usr/file/attachment/icon_arrow_01.svg") center/contain no-repeat; } .c-card-box__info::after { right: 0; z-index: 5; width: 48px; height: 48px; border: 1px solid #9D843E; border-radius: 50%; background-color: #9D843E; transition: background-color 0.3s ease; } .c-card-box__image { position: relative; overflow: hidden; border-radius: 6px; } .c-card-box__image img { display: block; width: 100%; height: auto; transition: transform 0.3s ease; } .c-card-box__image::after { content: ""; position: absolute; inset: 0; background-color: #ffffff; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .c-card-box__title { margin-top: 16px; padding-bottom: 3px; border-bottom: 1px solid transparent; color: #333333; font-size: 1.375rem; font-weight: 700; line-height: 1.4; letter-spacing: 4px; } .c-card-box__meta { margin-top: 4px; font-size: 0.875rem; font-weight: 400; line-height: 1.4; opacity: 0.8; } .c-card-box__tagarea { margin-top: 8px; color: #333333; } .c-card-box__tagarea > .c-card-box__tag { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 24px; padding: 6px 15px; border: 1px solid #9D843E; border-radius: 24px; font-size: 0.75rem; font-weight: 700; line-height: 1; } @media screen and (max-width: 767px) { .c-card__label, .c-card__image + .c-card__label { min-height: 26px; font-size: 1.0625rem; } .c-card__label::before { right: 9px; width: 7px; height: 10px; } .c-card__label::after { width: 26px; height: 26px; } .c-card__description { font-size: 0.875rem; } .c-card-panel__link { padding: 14px 30px 18px; } .c-card-panel__label { margin-top: 2px; font-size: 0.875rem; } .l-row--5 .c-card-panel__link, .l-row--6 .c-card-panel__link { padding: 8px 22px; } .l-row--5 .c-card-panel__link::after, .l-row--6 .c-card-panel__link::after { right: 8px; bottom: 8px; width: 14px; height: 14px; } .c-card-box__title { padding-bottom: 0; font-size: 1.125rem; } .c-card-box__meta { margin-top: 8px; font-size: 0.75rem; } } .c-image { margin: 0 auto; max-width: 100%; text-align: center; } .c-image--840 { width: 840px; } .o-btn-block { display: flex; align-items: center; padding: 8px 60px 8px 24px; } .o-btn-block--cta { display: flex; justify-content: center; align-items: center; gap: 0 6px; padding: 12px 48px; } .o-btn-block--md { max-width: 628px; } .o-btn-iblock { display: inline-block; padding: 6px 26px 6px 16px; } .o-card-block { display: flex; flex-direction: column; width: 100%; min-height: 72px; padding: 0; border-radius: 20px; background-color: #ffffff; box-sizing: border-box; box-shadow: 2px 2px 10px 0 rgba(133, 139, 151, 0.14); } .o-card-block--no-shadow { box-shadow: none; } .o-card-block--with-image { display: block; padding: 24px 24px 16px !important; } .o-card-block--md { max-width: 626px; } .o-card-block__text { width: 100%; padding-top: 24px; margin-top: 24px; border-top: 1px solid #D9DDE3; } .o-card-block--text-links .o-card-block__text { position: relative; box-sizing: border-box; padding: 24px; margin: 0; border-top: none; } .o-card-block--text-links .o-card-block__text::before { content: ""; position: absolute; top: 0; width: calc(100% - 64px); height: 1px; background: #D9DDE3; background-position: center; } .o-card-panel { position: relative; z-index: 1; width: 100%; min-height: 84px; padding: 0; border: 1px solid #D9DDE3; border-radius: 20px; background-color: #ffffff; box-sizing: border-box; } .o-card-panel--shadow { box-shadow: 2px 2px 10px 0 rgba(133, 139, 151, 0.14); } .o-card-panel--no-shadow { box-shadow: none; } .o-news-container { display: flex; flex-direction: row; gap: 64px; } .o-news-list-wrapper { flex: 0 0 66%; } .o-news-list { padding: 0; } .o-news-list__item { margin-bottom: 0; } .o-schedule-list-wrapper { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .o-accordion-list { padding: 0; margin-bottom: 40px; } .o-accordion-list:last-of-type { margin-bottom: 0; } .o-accordion-list__item { margin-bottom: 0; border-bottom: 1px solid #D9DDE3; } @media (hover: hover) { .o-card-block--shadow:hover { box-shadow: none; } } @media screen and (max-width: 767px) { .o-card-panel, .o-card-block { border-radius: 16px; } .o-card-block__text { padding-top: 16px; margin-top: 20px; } .o-news-container { flex-direction: column; } .o-accordion-list { margin-bottom: 16px; } .o-btn-block--cta { padding: 12px 24px; } } /* ------------------------------ ------------------------------ */ .l-row { display: flex; flex-wrap: wrap; } .l-col { flex: 1 1 0%; } .l-col--full { width: 100% !important; max-width: 100% !important; flex: none !important; } .l-row--2 > .l-col { --variable-gap--2:calc((100% - var(--variable-gap)) / 2); flex: 0 0 var(--variable-gap--2); max-width: clamp(321px, var(--variable-gap--2), 100%); } .l-row--3 > .l-col { --variable-gap--3:calc((100% - var(--variable-gap)*2) / 3) ; flex: 0 0 var(--variable-gap--3); max-width: clamp(321px, var(--variable-gap--3), 100%); } .l-row--4 > .l-col { --variable-gap--4:calc((100% - var(--variable-gap)*3) / 4); flex: 0 0 var(--variable-gap--4); max-width: clamp(321px, var(--variable-gap--4), 100%); } .l-row--5 > .l-col { --variable-gap--5:calc((100% - var(--variable-gap)*4) / 5); flex: 0 0 var(--variable-gap--5); max-width: clamp(220px, var(--variable-gap--5), 100%); } .l-row--3:has(.o-card-box) > .l-col { --variable-gap-card--3:calc((100% - var(--variable-gap)*4) / 3); flex: 0 0 var(--variable-gap-card--3); max-width: clamp(220px, var(--variable-gap-card--3), 100%); } .l-flex-top-left { display: flex; justify-content: flex-start; align-items: flex-start; } .l-flex-top-center { display: flex; justify-content: center; align-items: flex-start; } .l-flex-top-right { display: flex; justify-content: flex-end; align-items: flex-start; } .l-flex-center-left { display: flex; justify-content: flex-start; align-items: center; } .l-flex-center { display: flex; justify-content: center; align-items: center; } .l-flex-center-right { display: flex; justify-content: flex-end; align-items: center; } .l-flex-bottom-left { display: flex; justify-content: flex-start; align-items: flex-end; } .l-flex-bottom-center { display: flex; justify-content: center; align-items: flex-end; } .l-flex-bottom-right { display: flex; justify-content: flex-end; align-items: flex-end; } /* ------------------------------ ------------------------------ */ @media screen and (max-width: 767px) { .l-row--1-sp > .l-col { flex: 0 0 100%; max-width: 100%; } .l-row--2-sp > .l-col { flex: 0 0 calc((100% - var(--variable-gap)) / 2); max-width: calc((100% - var(--variable-gap)) / 2); } .l-row--3-sp > .l-col { flex: 0 0 calc((100% - var(--variable-gap) * 2) / 3); max-width: calc((100% - var(--variable-gap) * 2) / 3); } .l-row--4-sp > .l-col { flex: 0 0 calc((100% - var(--variable-gap) * 3) / 4); max-width: calc((100% - var(--variable-gap) * 3) / 4); } .l-row--5-sp > .l-col { flex: 0 0 calc((100% - var(--variable-gap) * 4) / 5); max-width: calc((100% - var(--variable-gap) * 4) / 5); } .l-row--3:has(.o-card-box) > .l-col { flex: 0 0 100%; max-width: 100%; } .l-row--4:has(.o-card-panel) > .l-col { flex: 0 0 calc((100% - var(--variable-gap)) / 2); max-width: calc((100% - var(--variable-gap)) / 2); } .l-row--5:has(.o-card-panel), .l-row--6:has(.o-card-panel) { gap: 8px; } .l-row--5:has(.o-card-panel) > .l-col, .l-row--6:has(.o-card-panel) > .l-col { flex: 0 0 calc((100% - var(--variable-gap)) / 3); max-width: calc((100% - var(--variable-gap)) / 3); } .flex-col-sp { flex-direction: column; } .flex-row-sp { flex-direction: row; } } .c-accordion { display: flex; flex-direction: column; gap: 16px; } .c-accordion__item { border-bottom: 1px solid #D9DDE3; } .c-accordion__item.is-active .c-accordion__animation { animation: fadeIn 0.33s linear 0.33s forwards; } .c-accordion__item.is-active .c-accordion__arrow::after { transform: translateY(-50%) rotate(0deg); } .c-accordion__item.is-active .c-accordion__body { visibility: visible; } .c-accordion__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px 16px 0; cursor: pointer; transition: 0.3s linear; outline: none; } @media (hover: hover) { .c-accordion__header:hover { opacity: 0.75; } } .c-accordion__header:focus-visible { outline: 2px solid #C3A75E; outline-offset: 4px; } .c-accordion__question { display: flex; align-items: flex-start; flex: 1; } .c-accordion__content { padding-block: 8px 16px; } .c-accordion__q-label, .c-accordion__a-label { font-family: "Poppins", sans-serif; font-size: 36px; line-height: 1; font-weight: bold; color: #C3A75E; flex-shrink: 0; min-width: 50px; width: auto; margin-right: 5px; } .c-accordion__q-text { flex: 1; margin-top: 2px; } .c-accordion__q-text p { font-family: "LINE Seed JP", sans-serif; font-size: 16px; line-height: 1.6875; color: #333333; margin: 0; font-weight: bold; } .c-accordion__arrow { flex-shrink: 0; transition: transform 0.3s linear; width: 14px; height: 14px; position: relative; } .c-accordion__arrow::after, .c-accordion__arrow::before { content: ""; position: absolute; width: 100%; height: 2px; background-color: #9D843E; transform: translateY(-50%); transition: transform 0.3s linear; border-radius: 20px; top: 50%; } .c-accordion__arrow::after { transform: translateY(-50%) rotate(90deg); } .c-accordion__arrow::before { transform: translateY(-50%) rotate(0deg); } .c-accordion__body { height: 0; transition: height 0.5s cubic-bezier(0.73, 0, 0.83, 1); visibility: hidden; } .c-accordion__animation { opacity: 0; animation: fadeOut 0.17s linear forwards; } .c-accordion__answer { display: flex; align-items: flex-start; gap: 16px; padding-block: 8px 16px; } .c-accordion__a-text { flex: 1; padding-top: 5px; } .c-accordion__a-text p { font-family: "LINE Seed JP", sans-serif; font-size: 16px; line-height: 1.6875; color: #333333; margin: 0; } .c-accordion--faq .c-accordion__arrow { background-image: url("/7card/usr/file/attachment/icon_arrow_01.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 10px; height: 10px; position: relative; transform: translateY(-50%) rotate(90deg); transition: transform 0.3s linear; } .c-accordion--faq .c-accordion__arrow::after, .c-accordion--faq .c-accordion__arrow::before { content: none; } .c-accordion--faq .c-accordion__item.is-active .c-accordion__arrow { transform: translateY(-50%) rotate(90deg) scale(-1); } @media screen and (max-width: 767px) { .c-accordion { gap: 12px; } .c-accordion__header { padding: 16px 16px 16px 0; gap: 12px; } .c-accordion__header:focus-visible { outline-offset: 2px; } .c-accordion__question { gap: 12px; align-items: center; } .c-accordion__content { padding-block: 0 16px; } .c-accordion__arrow { width: 12px; } .c-accordion__q-label, .c-accordion__a-label { font-size: 24px; line-height: 1; min-width: 30px; margin-right: 0; } .c-accordion__q-text { padding-top: 0; } .c-accordion__q-text p { font-size: 14px; line-height: 1.7142857143; } .c-accordion__answer { gap: 12px; padding-block: 0 16px; } .c-accordion__a-text { padding-top: 0; } .c-accordion__a-text p { font-size: 14px; line-height: 24px; } } .c-accordion [class^=icon-] { width: 36px; } @media screen and (max-width: 767px) { .c-accordion [class^=icon-] { width: 24px; } .c-accordion [class^=icon-]:after { margin-left: 0; } } .title_components { position: relative; padding: 40px 0; margin-bottom: 40px; } .title_components:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 7px; background-color: #727272; background: linear-gradient(90deg, #ACB4D9 1.86%, #86CFEA 19.32%, #C8DD97 34.89%, #FAE8A1 52.11%, #F5C699 68.39%, #EBBACD 84.43%, #E79A9B 100%); } .c-sns__list { display: flex; gap: 40px; } .c-sns__list.center { justify-content: center; } .c-sns__item { width: 80px; } .c-sns__link { display: block; width: 100%; } .c-sns__link img { width: 100%; height: auto; display: block; } .c-kv-img { border-radius: 20px; overflow: hidden; box-shadow: 0px 0px 24px #dee2e8; } .c-img { text-align: center; max-width: 100%; } .c-img--nanaco img { width: 460px; max-width: 100%; } @media screen and (max-width: 767px) { .c-img--nanaco img { width: 248px; } } .c-listLink__item { display: flex; flex-direction: column; gap: 16px; border-bottom: 1px solid #d9dde3; } .c-link__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0 15px; cursor: pointer; transition: 0.3s linear; outline: none; position: relative; } @media (hover: hover) { .c-link__item:hover { opacity: 1; } .c-link__item:hover .c-cardLink__icon { background-color: #9D843E; } .c-link__item:hover .c-cardLink__icon::after { background-color: #ffffff; } } .c-link__item:focus-visible { outline: 2px solid #C3A75E; outline-offset: 4px; } .c-link__item-label { font-family: "Poppins", sans-serif; font-size: 36px; line-height: 1; font-weight: bold; color: #C3A75E; flex-shrink: 0; min-width: 40px; width: auto; } .c-link__item-text { flex: 1; margin-top: 2px; } .c-link__item-text p { font-family: "LINE Seed JP", sans-serif; font-size: 16px; line-height: 1.6875; color: #333333; margin: 0; font-weight: bold; } .c-link .c-cardLink__icon { position: relative; flex-shrink: 0; right: 0; transform: translateY(0); } @media screen and (max-width: 767px) { .c-link { gap: 12px; } .c-link__item { padding: 16px 0 15px; gap: 12px; } .c-link__item:focus-visible { outline-offset: 2px; } .c-link__item-label { font-size: 24px; line-height: 1; min-width: 30px; margin-right: 0; } .c-link__item-text { margin-top: 0; } .c-link__item-text p { font-size: 14px; line-height: 1.7142857143; } .c-link .c-cardLink__icon { width: 24px; height: 24px; } } .c-link_v2__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 0 23px; cursor: pointer; transition: 0.3s linear; outline: none; position: relative; text-decoration: none; color: inherit; } @media (hover: hover) { .c-link_v2__item:hover { opacity: 1; } .c-link_v2__item:hover .c-cardLink__icon { background-color: #9D843E; } .c-link_v2__item:hover .c-cardLink__icon::after { background-color: #ffffff; } } .c-link_v2__item:focus-visible { outline: 2px solid #C3A75E; outline-offset: 4px; } .c-link_v2__item-content { flex: 1; display: flex; flex-direction: column; gap: 6px; } .c-link_v2__item-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .c-link_v2__item-date { font-family: "LINE Seed JP", sans-serif; font-size: 13px; line-height: 1.6153846154; font-weight: 700; color: #333333; } .c-link_v2__item-badge { font-family: "LINE Seed JP", sans-serif; font-size: 13px; line-height: 1.6153846154; font-weight: 700; color: #333333; padding: 4px 12px; border: 1px solid #D9DDE3; border-radius: 40px; background-color: #ffffff; } .c-link_v2__item-text-wrapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .c-link_v2__item-text { font-family: "LINE Seed JP", sans-serif; font-size: 16px; line-height: 1.6875; color: #333333; margin: 0; font-weight: 400; } @media screen and (max-width: 767px) { .c-link_v2__item { padding: 24px 0; gap: 16px; } .c-link_v2__item:focus-visible { outline-offset: 2px; } .c-link_v2__item-content { gap: 8px; } .c-link_v2__item-header { gap: 12px; } .c-link_v2__item-date { font-size: 12px; line-height: 1.5833333333; } .c-link_v2__item-badge { font-size: 12px; line-height: 1.5833333333; padding: 3px 12px; } .c-link_v2__item-text { font-size: 14px; line-height: 1.7142857143; } .c-link_v2__item-text-wrapper { gap: 8px; } } .icon-pdf:after, .icon_pdf:after { content: ""; margin-left: 8px; display: inline-block; width: 24px; height: 24px; background: url("/7card/usr/file/attachment/icon_pdf.svg") center no-repeat; background-size: contain; margin-bottom: -6px; } .icon-target::after, .icon_target::after { content: ""; display: inline-block; width: 19px; height: 19px; background-image: url(/7card/usr/file/attachment/icon_target.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-target--small::after, .icon_target--small::after { width: 16px; height: 16px; margin-bottom: -2px; margin-left: 4px; } .icon-target-small::after, .icon_target-small::after { content: ""; display: inline-block; width: 16px; height: 16px; background-image: url(/7card/usr/file/attachment/icon_target.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -2px; margin-left: 8px; } .icon-arrowRight::after, .icon_arrowRight::after { content: ""; display: inline-block; width: 8px; height: 11px; mask-image: url(/7card/usr/file/attachment/icon_arrow_01.svg); mask-size: contain; mask-repeat: no-repeat; flex-shrink: 0; margin-left: 4px; background-color: #0000EE; } .icon-pair::after, .icon_pair::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_pair.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-innovation::after, .icon_innovation::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_innovation.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-passion::after, .icon_passion::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_passion.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-culture::after, .icon_culture::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_culture.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-card-ng::after, .icon_card_ng::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_card_ng.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-sync::after, .icon_sync::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_sync.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-private::after, .icon_private::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_private.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-modal::after, .icon_modal::after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_modal.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-left: 8px; } .icon-notice::after { content: ""; display: inline-block; width: 22px; height: 20px; background-image: url(/7card/usr/file/attachment/icon_noti.svg); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; margin-bottom: -4px; margin-right: 8px; } .c-list-vertical { display: flex; gap: 16px; flex-wrap: wrap; } .c-list-hoz { display: flex; gap: 32px; flex-direction: column; flex-wrap: wrap; } @media screen and (max-width: 767px) { .c-list-hoz { gap: 24px; } } .c-list-decimal { padding-left: 20px; } .c-list-decimal li { list-style: decimal; } .c-list-decimal li + li { margin-top: 8px; } @media screen and (max-width: 767px) { .c-list-decimal li + li { margin-top: 0; } } .c-list-disc { padding-left: 20px; } .c-list-disc li { list-style: disc; } .c-list-disc li + li { margin-top: 8px; } @media screen and (max-width: 767px) { .c-list-disc li + li { margin-top: 0; } } .c-list-number { list-style-type: none; padding-left: 0; margin: 0; counter-reset: paren-counter; } .c-list-number__item { padding-left: 28px; margin-bottom: 0; font-size: 16px; line-height: 1.6875; font-weight: 400; color: #000000; position: relative; } .c-list-number__item::before { counter-increment: paren-counter; content: "(" counter(paren-counter) ")"; position: absolute; left: 0; top: 0; } @media screen and (max-width: 767px) { .c-list-number__item { padding-left: 25px; font-size: 14px; line-height: 1.7142857143; } } .c-pickup { border-radius: 10px; border: solid 2px #FFF329; overflow: hidden; max-width: 518px; } .c-pickup__head { background: #FFF329; padding: 8px 16px; border-radius: 10px 10px 0 0; min-height: 64px; } .c-pickup__title { font-size: 32px; line-height: 1.5; font-family: "Poppins", sans-serif; text-align: center; color: #202831; font-weight: 700; } .c-pickup__body { background: #ffffff; padding: 24px; min-height: 113px; } @media screen and (max-width: 767px) { .c-pickup__head { padding: 11px; } .c-pickup__title { font-size: 28px; } } .c-point { color: #202831; display: flex; align-items: center; white-space: nowrap; } .c-point > span { display: flex; align-items: center; gap: 6px; } .c-point__number { font-size: 44px; line-height: 1.5; font-weight: 600; font-family: "Poppins", sans-serif; } .c-point__text-wrap { display: flex; flex-direction: column; align-items: flex-start; } .c-point__text { font-size: 22px; line-height: 1.5; font-weight: bold; } .c-point__separator { margin-inline: 16px; width: 13px; height: 16px; background-image: url("/7card/usr/file/attachment/icon_arrow_right.svg"); background-size: contain; background-repeat: no-repeat; } @media screen and (max-width: 767px) { .c-point { flex-direction: column; } .c-point > span { display: flex; align-items: center; justify-content: center; } .c-point__number { font-size: 38px; line-height: 1.5; } .c-point__text { font-size: 18px; line-height: 1.5; } .c-point__separator { transform: rotate(90deg); margin-inline: 0; margin-block: 0 -5px; } } .c-txt { font-size: 16px; line-height: 1.6875; font-weight: 500; color: #000000; } .c-txt + .c-txt { margin-top: 32px; } @media screen and (max-width: 767px) { .c-txt { font-size: 14px; line-height: 1.7142857143; } .c-txt.c-text-default-sp { font-size: 16px; line-height: 1.6875; } .c-txt + .c-txt { margin-top: 24px; } } .c-txt .c-text-link { display: inline; } .c-text-link { color: #0000EE; text-decoration: none; text-underline-offset: 3px; transition: all 0.3s ease; display: inline-block; position: relative; touch-action: manipulation; word-break: break-all; } .c-text-link__arrow { width: 8px; height: 11px; mask-image: url(/7card/usr/file/attachment/icon_arrow_01.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: #0000EE; transform: rotate(90deg); transition: all 0.3s ease; position: relative; display: inline-block; vertical-align: middle; flex-shrink: 0; margin-right: 14px; top: -2px; } .c-text-link[target=_blank]:after { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_target.svg); background-size: contain; background-repeat: no-repeat; background-position: center; margin-bottom: -4px; margin-left: 8px; } @media screen and (max-width: 767px) { .c-text-link[target=_blank]:after { width: 16px; height: 16px; margin-bottom: -2px; } } .c-text-link.icon-pdf:after { content: ""; margin-left: 8px; display: inline-block; width: 24px; height: 24px; background: url("/7card/usr/file/attachment/icon_pdf.svg") center no-repeat; background-size: contain; margin-bottom: -6px; } @media (hover: hover) { .c-text-link:hover { text-decoration: underline; opacity: 1; } .c-text-link:hover:before { content: none !important; } } .c-textBox { padding: 32px; background-color: #F5F7FB; border-radius: 16px; margin-top: 32px; } .c-textBox__title { font-size: 18px; line-height: 1.5; font-weight: 700; margin-bottom: 16px; color: #292929; } .c-textBox--white { border: 2px solid #DEE2E8; background-color: #FFFFFF; } @media screen and (max-width: 767px) { .c-textBox { padding: 24px 16px; margin-top: 24px; } .c-textBox__title { font-size: 16px; line-height: 1.5; } } .no-bg { background-color: transparent !important; margin-top: 0; } .text-vertical { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; } .page-component .c-table { max-width: 840px; margin: 0 auto; border-collapse: collapse; table-layout: fixed; } .c-table__table { width: 100%; max-width: 840px; margin: 0 auto; border-collapse: collapse; } .c-table__table-fixed { table-layout: fixed; } .c-table__table--full { max-width: calc(100% - 2px); } .c-table__thead { background-color: #F5F7FB; position: relative; } .c-table__thead::before { content: ""; position: absolute; bottom: 0; left: 0; width: calc(100% + 1px); height: 1px; background: #858b97; } .c-table__thead th { border-bottom: 1px solid #D9DDE3; } .c-table__thead th:first-child { border-left: 1px solid #F5F7FB; } .c-table__thead th:last-child { border-right: 1px solid #F5F7FB; } .c-table__thead th.border-bottom { border-bottom: 1px solid #F5F7FB; } .c-table__thead th.border-bottom--white { border-bottom: 1px solid #D9DDE3 !important; } .c-table__thead th.border-bottom--white1 { border-bottom: 1px solid #ffffff !important; } .c-table__box { min-height: 47px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .c-table__title { font-size: 16px; line-height: 1.6875; font-family: "LINE Seed JP", sans-serif; color: #333333; text-align: center; min-height: 80px; padding: 16px 10px; border: 1px solid #ffffff; vertical-align: middle; } .c-table__text { text-align: center; min-height: 80px; padding: 16px 10px; border: 1px solid #D9DDE3; vertical-align: middle; } .c-table__th { font-size: 16px; line-height: 1.6875; font-family: "LINE Seed JP", sans-serif; font-weight: 700; color: #000000; text-align: center; height: 80px; padding: 26px 16px; border: 1px solid #ffffff; vertical-align: middle; } .c-table__th--col1 { width: 240px; } .c-table__th--col2 { width: 400px; } .c-table__th--col3 { width: 200px; } .c-table__tbody .c-table__title { background-color: #F5F7FB; border: 1px solid #F5F7FB; border-bottom: 1px solid #ffffff; border-right: 1px solid #D9DDE3; position: relative; } .c-table__tbody tr th:last-child { border-bottom: 1px solid #F5F7FB; } .c-table__tbody tr .border-bottom { border-bottom: 1px solid #F5F7FB; } .c-table__tbody tr .border-bottom--white { border-bottom: 1px solid #D9DDE3 !important; } .c-table__tbody tr .border-bottom--white1 { border-bottom: 1px solid #ffffff !important; } .c-table__tbody tr .border-right { border-right: 1px solid #F5F7FB; } .c-table__tbody tr .border-right--white { border-right: 1px solid #D9DDE3 !important; } .c-table__tbody tr .border-right--white1 { border-right: 1px solid #ffffff !important; } .c-table__td { font-size: 16px; line-height: 1.6875; font-family: "LINE Seed JP", sans-serif; font-weight: 400; color: #000000; text-align: center; height: 80px; padding: 26px 16px; border: 1px solid #D9DDE3; vertical-align: middle; } .c-table--horizontal .c-table__tbody .c-table__th { background-color: #F5F7FB; border: 1px solid #F5F7FB; border-bottom: 1px solid #ffffff; border-right: solid 1px #858B97; position: relative; } .c-table--horizontal .c-table__tbody .c-table__th--col1 { width: 328px; } .c-table--horizontal .c-table__tbody .c-table__td--col2 { width: calc(100% - 328px); } .c-table--horizontal .c-table__tbody { position: relative; } .c-table--horizontal .c-table__tbody tr:last-child .c-table__th { border-bottom: 1px solid #F5F7FB; } .c-table--schedule .c-table__thead::before { content: none; } .c-table--schedule .c-table__thead .c-table__th--col1 { border-right: 1px solid #858B97; } .c-table--schedule .c-table__thead .c-table__th--col-group { border-bottom: 1px solid #858B97; } .c-table--schedule th, .c-table--schedule td { width: 35.699%; } .c-table--schedule th.c-table__th--col1, .c-table--schedule td.c-table__td--col1 { width: 28.602%; } @media screen and (max-width: 767px) { .c-table { padding: 0 0 16px; width: 660px; } .c-table-scroll { overflow: auto; position: relative; margin: 0 0 20px 0; -webkit-overflow-scrolling: touch; } .c-table-scroll::-webkit-scrollbar { height: 8px; } .c-table-scroll::-webkit-scrollbar-track { background: #DEE2E8; border-radius: 5px; } .c-table-scroll::-webkit-scrollbar-thumb { background: #858B97; border-radius: 5px; } .c-table__table { max-width: 100%; } .c-table__th { font-size: 14px; line-height: 1.5; height: 56px; padding: 16px 8px; } .c-table__th--col1 { width: 220px; } .c-table__th--col2 { width: 220px; } .c-table__th--col3 { width: 110px; } .c-table__td { font-size: 14px; line-height: 1.5; height: 56px; padding: 16px 8px; } .c-table--horizontal { width: 100%; } .c-table--horizontal .c-table__tbody .c-table__th--col1 { width: 100%; } .c-table--horizontal .c-table__tbody .c-table__td--col2 { width: 100%; } .c-table--horizontal .c-table__tbody .c-table__th { width: 100%; border: 1px solid #f5f7fb; height: 40px; padding: 8px 8px; } .c-table--horizontal .c-table__tbody .c-table__td { width: 100%; padding: 8px 5px; height: auto; min-height: 40px; display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 1.5; } .c-table--horizontal .c-table__tbody .c-table__title { width: 100%; padding: 8px 5px; height: auto; min-height: 40px; display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 1.5; } .c-table--horizontal .c-table__tbody .c-table__text { width: 100%; border: 1px solid #f5f7fb; min-height: 40px; padding: 8px 8px; } .c-table--horizontal .c-table__tbody .c-table__box { min-height: auto; } .c-table--horizontal .c-table__tbody tr { display: flex; flex-direction: column; } .c-table--schedule th, .c-table--schedule td { line-height: 1.71428; } } @media screen and (max-width: 767px) { .c-scroll { overflow: auto; position: relative; margin: 0 0 20px 0; -webkit-overflow-scrolling: touch; } .c-scroll::-webkit-scrollbar { height: 8px; } .c-scroll::-webkit-scrollbar-track { background: #DEE2E8; border-radius: 5px; } .c-scroll::-webkit-scrollbar-thumb { background: #858B97; border-radius: 5px; } .c-scroll--content { padding: 0 0 16px; width: 660px; } } .c-modal { position: fixed; inset: 0; display: flex; flex-direction: column; margin: 0; padding: 0; z-index: 10002; outline: none; overscroll-behavior-y: contain; opacity: 1; visibility: hidden; pointer-events: none; align-items: stretch; } .c-modal .is-noactive { visibility: hidden; } .c-modal.is-active { visibility: visible; pointer-events: auto; } .c-modal.is-closing { pointer-events: none; } .c-modal_overlay { position: fixed; inset: 0; z-index: -1; background: rgba(133, 139, 151, 0.9); opacity: 0; transition: opacity 0.25s linear; will-change: opacity; } .c-modal.is-active .c-modal_overlay { opacity: 1; transition-delay: 0s; } .c-modal.is-closing .c-modal_overlay { opacity: 0; transition-delay: 0.17s; } .c-modal_wrap { position: relative; box-sizing: border-box; flex: 1; min-height: 0; z-index: 100; overflow-x: clip; overflow-y: visible; display: flex; align-items: center; justify-content: center; padding: 20px; } .c-modal_inner { display: flex; flex-direction: column; margin: 0 auto; height: auto; max-height: 100%; width: 100%; max-width: 1200px; transform: translateY(100px); opacity: 0; transition: transform 0.5s cubic-bezier(0.33, 0, 0.24, 1), opacity 0.25s linear; background: #ffffff; padding: 50px 0; border-radius: 20px; position: relative; } .c-modal.is-active .c-modal_inner { transform: translateY(0); opacity: 1; } .c-modal.is-closing .c-modal_inner { transform: translateY(100px); opacity: 0; } .c-modal-btn-close { position: absolute; top: 24px; right: 24px; background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.3s ease; } @media (hover: hover) { .c-modal-btn-close:hover { opacity: 0.7; } } .c-modal-btn-close .btn-text { font-size: 14px; line-height: 1; font-weight: 600; font-family: "Poppins", sans-serif; color: #333333; } .c-modal_content { overflow-y: auto; position: relative; padding-inline: 35px; -webkit-overflow-scrolling: touch; } .c-modal_content::-webkit-scrollbar { width: 8px; } .c-modal_content::-webkit-scrollbar-track { background: #DEE2E8; border-radius: 5px; } .c-modal_content::-webkit-scrollbar-thumb { background: #858B97; border-radius: 5px; } .c-modal .modal__head { display: flex; width: 100%; flex-wrap: wrap; justify-content: center; align-items: center; } .c-modal .modal__head .modal__logo { display: flex; width: 300px; height: 102px; justify-content: center; align-items: center; } .c-modal .modal__head .modal__logo img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .c-modal .modal__head .modal__name { font-size: 24px; font-weight: 700; width: 100%; margin-top: 8px; text-align: center; color: #333; } .c-modal .modal__text { font-size: 22px; font-weight: 400; width: 100%; text-align: center; } .c-modal .type-list { display: flex; width: 100%; margin-top: 36px; justify-content: center; } .c-modal .type-list .type-list__item { display: flex; height: 54px; margin-left: 2%; text-align: center; color: #fff; border-radius: 10px; background: #ccc; flex-basis: 18%; justify-content: center; align-items: center; } .c-modal .type-list .type-list__item.type-list__item--tamaru { background: #b69fd4; } .c-modal .type-list .type-list__item.type-list__item--charge { background: #f5bf62; } .c-modal .type-list .type-list__item.type-list__item--zandaka { background: #aed254; } .c-modal .type-list .type-list__item.type-list__item--koukan { background: #f18c92; } .c-modal .is-active { display: block; } .c-modal .index-wrap__row-btn { margin-top: 29px; } .c-modal .modal__annotation { font-size: 16px; font-weight: 400; display: flex; width: 100%; margin-top: 31px; justify-content: center; align-items: flex-start; } .c-modal .is-noactive { visibility: hidden; } .c-modal.cp-modal .modal__date { font-size: 16px; font-weight: 700; width: 100%; margin-top: 17px; padding: 8px; text-align: left; background: #DEE2E8; } .c-modal.cp-modal .modal__name { font-size: 24px; font-weight: 700; width: 100%; margin-top: 8px; text-align: center; color: #333333; margin-top: 15px; text-align: left; } .c-modal.cp-modal .modal__text { font-size: 13px; font-weight: 400; text-align: left; color: #6c6c6c; width: 100%; } .c-modal.cp-modal .c-modal__body { margin-top: 12px; padding-top: 5px; border-top: 1px solid #dfdfd8; display: flex; align-items: center; flex-direction: column; } .c-modal.cp-modal .c-modal__body tr td img { max-width: 120px; margin: 0 auto; } .c-modal.cp-modal .c-modal__body td img { position: absolute; top: 2px; right: -17px; width: 17px; height: 18px; } @media screen and (max-width: 767px) { .c-modal_inner { width: calc(100% - 32px); padding: 40px 0; } .c-modal_content { padding-inline: 20px; } .c-modal-btn-close { top: 15px; right: 15px; } .c-modal-btn-close .btn-text { flex-shrink: 0; } .c-modal .modal__head .modal__logo { width: 200px; height: 87px; } .c-modal .modal__head .modal__name { font-size: 25px; } .c-modal .c-modal__body .modal__text { font-size: 18px; } .c-modal .type-list { margin-top: 32px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-modal .type-list .type-list__item { height: 48px; margin-top: 8px; -webkit-flex-basis: 41%; -ms-flex-preferred-size: 41%; flex-basis: 41%; } .c-modal .type-list .type-list__item.type-list__item--tamaru { background: #b69fd4; } .c-modal .type-list .type-list__item.type-list__item--charge { background: #f5bf62; } .c-modal .type-list .type-list__item.type-list__item--zandaka { background: #aed254; } .c-modal .type-list .type-list__item.type-list__item--koukan { background: #f18c92; } .c-modal .index-wrap__row-btn { margin-top: 31px; } .c-modal .modal__annotation { margin-top: 30px; } } .demo-content { min-height: 500px; } .c-tag { width: fit-content; padding: 3px 12px; min-width: 126px; min-height: 29px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: #EBB7CE; border: 1px solid #EBB7CE; color: #333333; flex-shrink: 0; font-size: 13px; line-height: 1.6153846154; font-weight: 700; } .c-tag--red1 { background-color: #FFEAEA; border: 1px solid #FFEAEA; } .c-tag--purple1 { background-color: #EBE9F8; border: 1px solid #EBE9F8; } .c-tag--green { background-color: #E3F2CE; border: 1px solid #E3F2CE; } .c-tag--blue { background-color: #DDF2FA; border: 1px solid #DDF2FA; } .c-tag--filter { background-color: #ffffff; border: 1px solid #858B97; color: #333333; } .c-tag--icon { background-color: #ffffff; border: none; color: #333333; justify-content: flex-start; display: inline-flex; align-items: center; position: relative; padding: 0; gap: 4px; } .c-tag--icon::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; } .c-tag--point::before { background-image: url(/7card/usr/file/attachment/icon_point.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-tag--credit::before { background-image: url(/7card/usr/file/attachment/icon_credit.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-tag--money::before { background-image: url(/7card/usr/file/attachment/icon_money.svg); background-size: contain; background-repeat: no-repeat; background-position: center; } .c-tag--target { background-color: #C3A75E; border: 1px solid #C3A75E; color: #ffffff; } .c-tag--member { background-color: #333333; border: 1px solid #333333; } @media screen and (max-width: 767px) { .c-tag { font-size: 12px; line-height: 1.5833333333; } } .c-tag--blue3 { background-color: #C0DEFF; border-color: #C0DEFF; } .c-tag--green3 { background-color: #C1F0D5; border-color: #C1F0D5; } .c-tag--yellow2 { background-color: #F6EA91; border-color: #F6EA91; } .c-tag-2 { width: fit-content; padding: 3px 12px; min-height: 29px; display: flex; align-items: center; justify-content: center; border-radius: 100px; color: #333333; font-size: 13px; line-height: 1.6153846154; flex-shrink: 0; font-weight: 700; } .c-tag-2--blue { background-color: #C0DEFF; } .c-tag-2--green { background-color: #C1F0D5; } .c-tag-2--yellow { background-color: #F6EA91; } .c-tag-2--blue3 { background-color: #C0DEFF; } .c-tag-2--green3 { background-color: #C1F0D5; } .c-tag-2--yellow2 { background-color: #F6EA91; } .c-tag-2--red1 { background-color: #FFEAEA; } .c-tag-2--purple1 { background-color: #EBE9F8; } .c-find { width: 100%; max-width: 840px; } .c-find__form { display: flex; align-items: center; width: 100%; /* min-height: 75px; */ height: 75px; padding: 0 39px; border: 1px solid #D9DDE3; border-radius: 50px; background-color: #F5F7FB; } .c-find__input { min-width: 0; flex: 1; padding: 0; border: 0; outline: 0; background-color: transparent; color: #333333; font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.6875; height: 100%; } .c-find__input::placeholder { color: #858B97; opacity: 1; } .c-find__input::-webkit-search-decoration, .c-find__input::-webkit-search-cancel-button, .c-find__input::-webkit-search-results-button, .c-find__input::-webkit-search-results-decoration { appearance: none; } .c-find__button { position: relative; width: 24px; height: 24px; margin-left: 24px; padding: 0; flex: 0 0 24px; border: 0; background-color: transparent; cursor: pointer; } .c-find__button::before { content: ""; position: absolute; inset: 0; background-color: #333333; mask: url("/7card/usr/file/attachment/icon_search.svg") center/contain no-repeat; } @media (max-width: 767px) { .c-find { max-width: 344px; } .c-find__form { /* min-height: 56px; */ height: 56px; padding-inline: 23px; } .c-find__input { font-size: 14px; line-height: 1.7142857143; } .c-find__button { margin-left: 16px; } } .c-loginTransition { margin-top: 32px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 24px; } @media screen and (min-width: 768px) { .c-loginTransition--2col { grid-template-columns: repeat(2, 1fr); } } .c-loginTransition__col { background: #F5F7FB; border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } .c-loginTransition__title { display: block; font-size: 22px; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 767px) { .c-loginTransition__title { font-size: 16px; line-height: 1.6875; } } .c-loginTransition__image { width: 100%; display: block; } @media screen and (max-width: 767px) { .c-loginTransition { margin-top: 24px; } .c-loginTransition__col { padding: 24px 16px; } .c-loginTransition__title { font-size: 18px; line-height: 1.5; } } .c-supportPhone { margin-top: 32px; background: #F5F7FB; border-radius: 16px; padding: 32px 64px; text-align: center; } .c-supportPhone__title { display: block; font-size: 22px; line-height: 1.5; color: #333333; font-weight: 700; margin-bottom: 8px; } .c-supportPhone__notice { font-size: 18px; line-height: 1.5; font-weight: 700; color: #EF3A3C; margin-bottom: 0; } .c-supportPhone__divider { height: 1px; background: #858B97; margin: 24px 0; } .c-supportPhone__number { font-family: "Poppins", sans-serif; font-size: 48px; line-height: 1; font-weight: 600; color: #333333; } @media screen and (max-width: 767px) { .c-supportPhone { margin-top: 24px; padding: 24px 16px; } .c-supportPhone__title { font-size: 18px; line-height: 1.5; } .c-supportPhone__notice { font-size: 16px; line-height: 1.5; } .c-supportPhone__number { font-size: 36px; line-height: 1; } } .filter-box { display: flex; justify-content: center; column-gap: 41px; margin-inline: auto; margin-bottom: 56px; } .filter-box__button { display: flex; column-gap: 8px; font-size: 16px; line-height: 1.6875; font-weight: 400; } .filter-box__button.is-active { text-decoration: underline; text-underline-offset: 4px; font-weight: 700; } @media screen and (max-width: 767px) { .filter-box { flex-wrap: wrap; column-gap: 32px; margin-bottom: 32px; } .filter-box__button { display: flex; column-gap: 8px; font-size: 14px; line-height: 1.7142857143; } .filter-box__button.is-active { text-underline-offset: 6px; } } .c-scroll-content { max-width: 1040px; width: max-content; padding: 0 0 16px; } .wrap-fixed { position: fixed; bottom: 0; width: 100%; padding: 24px 0; box-shadow: 0 0 24px #DEE2E8; background-color: #ffffff; z-index: 18; display: none; visibility: visible; transition: visibility 0.3s ease, transform 0.3s ease; } .wrap-fixed.is-hidden { transform: translateY(101%); pointer-events: none; visibility: hidden; } .wrap-fixed.show { display: block; } .fixed-image { width: 80px; } .c-btn-fixed { display: flex; align-items: center; gap: 16px; text-align: center; } .c-btn-fixed__arrow img { width: auto; } .c-btn-fixed p { flex-shrink: 0; } .c-btn-fixed.disabled { pointer-events: none; } .fixed-close { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background-image: url(/7card/usr/file/attachment/icon_close_2.svg); background-size: contain; background-repeat: no-repeat; display: block; cursor: pointer; } @media screen and (max-width: 767px) { .fixed-image { width: 64px; } .fixed-image.app { width: 130px; } } .c-noticeBox { background-color: #F5F7FB; border-radius: 16px; padding: 32px 64px; } .c-noticeBox__title { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 22px; line-height: 1.5; font-weight: 700; color: #333333; } .c-noticeBox__title .ico-notice { display: block; width: 22px; height: 22px; background: url("/7card/usr/file/attachment/icon_noti.svg") no-repeat center center; background-size: 22px 22px; flex-shrink: 0; } @media screen and (max-width: 767px) { .c-noticeBox { padding: 24px 16px; } .c-noticeBox__title { border-radius: 16px; margin-bottom: 24px; font-size: 18px; line-height: 1.5; } .c-noticeBox .c-noteList__item { font-size: 12px; line-height: 1.6666666667; } } @media screen and (max-width: 767px) { .page-home .c-btn--medium { min-width: 240px; } } .l-kv { padding: 24px 0 57px; background-color: #F5F7FB; } .l-kv__inner { padding-top: 82px; } @media screen and (max-width: 767px) { .l-kv { min-height: auto; padding-bottom: 52px; } .l-kv__inner { padding-top: 24px; } .l-kv .c-notification { margin-bottom: 36px; } } .l-bnr { padding: 56px 0; } .l-bnr .c-bnr__image { margin-top: 9px; width: 410px; flex-shrink: 0; } .l-bnr .c-bnr__image img { width: auto; } @media screen and (max-width: 767px) { .l-bnr { padding: 40px 0; } .l-bnr .c-bnr__image { width: 184px; margin-inline: auto; } } .l-service { padding-bottom: 56px; } .l-service__card { position: relative; min-height: 432px; display: flex; justify-content: center; flex-direction: column; padding: 64px; max-width: 1044px; margin-inline: auto; border-radius: 20px; overflow: hidden; z-index: 1; } .l-service__card + .l-service__card { margin-top: 40px; } .l-service__card-bg { position: absolute; inset: 0; display: block; z-index: -1; } .l-service__card-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; } .l-service__card-text { font-size: 18px; line-height: 1.2; font-weight: 700; } .l-service__card-title { font-size: 36px; line-height: 1.6111111111; font-weight: 700; } .l-service__card-btn { margin-top: 40px; } @media screen and (max-width: 767px) { .l-service { padding-bottom: 40px; } .l-service__card { padding: 40px 15px; min-height: 503px; max-width: 344px; } .l-service__card + .l-service__card { margin-top: 24px; } .l-service__card-text { font-size: 16px; line-height: 1.5; } .l-service__card-title { font-size: 24px; line-height: 1.5833333333; } .l-service__card-btn { margin-top: auto; text-align: center; } } .l-how-to-used { padding-bottom: 56px; } .l-how-to-used__content { position: relative; } .l-how-to-used__card { position: absolute; inset: 0; } .l-how-to-used__card .c-cardLink { position: absolute; } @media screen and (min-width: 768px) and (max-width: 1080px) { .l-how-to-used__card .c-cardLink { max-width: 21vw; } } .l-how-to-used__card .c-cardLink--01 { top: 0; left: 0; } .l-how-to-used__card .c-cardLink--02 { top: 0; right: 0; } .l-how-to-used__card .c-cardLink--03 { bottom: 0; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 767px) { .l-how-to-used { padding-bottom: 47px; } .l-how-to-used__content { margin: 0 auto; max-width: 375px; } .l-how-to-used__content-bg { max-width: 326px; margin-left: auto; margin-right: -7px; } .l-how-to-used__card .c-cardLink--01 { top: 36px; } .l-how-to-used__card .c-cardLink--02 { top: 36px; } .l-how-to-used__card .c-cardLink--03 { left: 0; bottom: inherit; top: 68%; transform: translateX(0); } } .l-campaign { padding-bottom: 56px; background-color: #F5F7FB; } .l-campaign .bg-gradient { background-color: #F5F7FB; } .l-campaign__list-item + .l-campaign__list-item { margin-top: 24px; } .l-campaign__list-arrow, .l-campaign__list-dots { display: none; } .l-campaign__card { display: flex; gap: 32px; align-items: center; padding: 24px; border-radius: 16px; background-color: #ffffff; color: #333333; text-decoration: none; box-shadow: 0px 0px 24px #DEE2E8; position: relative; } @media (hover: hover) { .l-campaign__card:hover { opacity: 1; } .l-campaign__card:hover .l-campaign__icon { background-color: #9D843E; } .l-campaign__card:hover .l-campaign__icon::before { border-color: #ffffff; } } .l-campaign__image { overflow: hidden; border-radius: 16px; line-height: 0; width: 530px; flex-shrink: 0; max-width: 50%; } .l-campaign__body { flex: 1; } .l-campaign__badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .l-campaign__badge { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px 0; border-radius: 19px; font-size: 13px; font-weight: 700; line-height: 1.6153846154; } .l-campaign__badge--gold { background-color: #9D843E; color: #ffffff; } .l-campaign__badge--black { background-color: #333333; color: #ffffff; } .l-campaign__badge--red { background-color: #FFEAEA; color: #333333; } .l-campaign__badge--purple { background-color: #EBE9F8; color: #333333; } .l-campaign__badge--white { background-color: #ffffff; color: #333333; border: 1px solid #B0ABD5; } .l-campaign__status { color: #9D843E; font-size: 13px; font-weight: 800; line-height: 1.6153846154; } .l-campaign__text { margin-top: 24px; } .l-campaign__title { margin: 0; color: #333333; font-size: 22px; font-weight: 700; line-height: 1.5; } .l-campaign__description { margin: 4px 0 0; font-size: 16px; line-height: 1.6875; } .l-campaign__date { margin-top: 24px; padding-top: 8px; border-top: 1px solid #D9DDE3; font-size: 14px; font-weight: 700; line-height: 1.7142857143; } .l-campaign__icon { position: relative; display: block; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #9D843E; border-radius: 50%; background-color: #ffffff; transition: background-color 0.3s linear; } .l-campaign__icon::before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-top: 1px solid #9D843E; border-right: 1px solid #9D843E; transform: translate(-62%, -50%) rotate(45deg); transition: border-color 0.3s linear; } .l-campaign__button { margin-top: 56px; text-align: center; } @media screen and (max-width: 767px) { .l-campaign { padding-bottom: 40px; } .l-campaign__list-item + .l-campaign__list-item { margin-top: 0; } .l-campaign__tab { min-height: 42px; padding: 8px; font-size: 12px; line-height: 1.5; } .l-campaign__tab.is-active { font-size: 13px; line-height: 1.3846153846; } .l-campaign__card { display: block; width: 100%; padding: 16px; } .l-campaign__card + .l-campaign__card { margin-top: 0; } .l-campaign__image { border-radius: 15px; width: 100%; max-width: 100%; } .l-campaign__body { margin-top: 24px; } .l-campaign__badges { flex-wrap: wrap; gap: 0 12px; } .l-campaign__badge { min-height: 24px; font-size: 12px; line-height: 1.5833333333; } .l-campaign__status { font-size: 12px; line-height: 1.5833333333; } .l-campaign__text { margin-top: 16px; } .l-campaign .c-icon { display: none; } .l-campaign__title { font-size: 18px; line-height: 1.5; } .l-campaign__description { font-size: 14px; line-height: 1.7142857143; } .l-campaign__date { margin-top: 21px; font-size: 13px; line-height: 1.5384615385; } .l-campaign__button { margin-top: 37px; } } .page-home .topics .l-topics { padding-bottom: 56px; } @media screen and (max-width: 767px) { .page-home .topics .l-topics { padding-bottom: 38px; } } .l-topics__list { display: flex; gap: 24px; } .l-topics__item { display: flex; } @media screen and (max-width: 767px) { .l-topics__list { display: block; } .l-topics .c-spSlider__arrow { top: calc(50% - 20px); } .l-topics__item { width: auto; } .l-topics .c-cardLink { display: block; min-height: 244px; max-width: 100%; } .l-topics .c-cardLink__image img { width: 100%; height: 100%; object-fit: cover; } .l-topics .c-cardLink__body { min-height: 104px; padding: 16px 24px; } .l-topics .c-cardLink__title { font-size: 16px; line-height: 1.5; } .l-topics .c-cardLink__icon { display: none; } } .l-news .l-topics__list { margin-top: 90px; } @media screen and (max-width: 767px) { .l-news .l-topics__list { margin-top: 66px; } } .news_content { display: flex; justify-content: space-between; margin-top: -3px; column-gap: 20px; } .news_content--left { width: max-content; flex-shrink: 0; } .news_content--right { flex: 1; max-width: 690px; width: 100%; padding-top: 6px; } @media screen and (max-width: 767px) { .news_content { flex-direction: column; } .news_content--left { width: 100%; margin-bottom: 30px; } } @media screen and (max-width: 767px) { .l-faq .c-btn--medium { min-width: 280px; } } .topics .l-topics { padding-bottom: 0; } @media screen and (min-width: 768px) { .c-notification_top .c-accordion__header { padding: 21px 22px 21px 0; gap: 10px; } .c-notification_top .c-accordion__header.c-accordion__link { padding: 21px 10px 21px 0; } .c-notification_top .c-accordion__answer { padding-block: 0px 16px; padding-inline: 26px 0; } } @media screen and (max-width: 767px) { .c-notification_top .c-accordion__header.c-accordion__link { padding: 16px 10px 16px 0; } } .page-sei .l-main { padding-bottom: 160px; } .page-nanaco .shop-wrap { border: none; max-width: 946px; margin-inline: auto; padding-top: 0; } .page-nanaco .shop-wrap .shop-wrap__content { margin-right: 6%; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .page-nanaco .shop-wrap .shop-wrap__thumbnail { min-width: 23%; max-width: 23%; } .page-nanaco .shop-wrap .shop-wrap__thumbnail img { width: 100%; height: auto; } .page-nanaco .shop-add { position: relative; border: 4px solid #fed000; border-radius: 10px; } .page-nanaco .shop-add:after { position: absolute; right: 5%; bottom: -26px; content: url(../img/top/img_top_shop03.png); } .page-nanaco .shop-add .shop-add__header { font-weight: 700; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 3px 12px; color: #fff; background: #fed000; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .shop-add .shop-add__title { font-size: 28px; } .page-nanaco .shop-add .shop-add__text { font-size: 15px; margin-left: 30px; } .page-nanaco .shop-add .shop-add__content { padding: 15px; border-radius: 0 0 10px 10px; background: #fffbe5; } .page-nanaco .shop-add .shop-add__list { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .shop-add .shop-add__list-item { width: 20%; margin-right: 7%; background: rgba(255, 255, 255, 0.3); box-shadow: 3px 3px 12px 2px rgba(255, 255, 255, 0.1); } .page-nanaco .shop-add .shop-add__list-item:last-child { width: 19%; margin-right: 0; } .page-nanaco .shop-add .shop-add__list-item img { width: auto; max-width: 100%; max-height: 52px; } .page-nanaco .shop-logo { display: -webkit-flex; display: -ms-flexbox; display: flex; display: block; width: 100%; height: 46px; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .shop-logo img { position: relative; top: 50%; left: 50%; display: block; width: auto; max-width: 100%; max-height: 100%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); } @media screen and (max-width: 767px) { .page-nanaco .l-cardLink-list--3col .c-cardLink__body { padding: 20px; } .page-nanaco .shop-wrap { padding: 0; border: none; } .page-nanaco .shop-wrap .shop-add__header { position: relative; } .page-nanaco .shop-wrap .shop-wrap__content { margin-right: 0; } .page-nanaco .shop-wrap .shop-add { border: none; } .page-nanaco .shop-add:after { content: none; } .page-nanaco .shop-add .shop-add__header { display: block; text-align: center; } .page-nanaco .shop-add .shop-add__title { font-size: 20px; } .page-nanaco .shop-add .shop-add__text { margin-left: 0; } } .page-nanaco .grid-wrapper { overflow: visible; width: 100%; max-width: 1080px; } .page-nanaco .grid-wrapper .grid { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: 0; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 16px; } .page-nanaco .grid-wrapper .grid.grid--7-icononly { margin-left: -16px; } .page-nanaco .grid-wrapper .grid.grid--7-icononly .grid-item { box-sizing: border-box; max-width: 116px; min-width: calc((100% - 128px) / 8); margin-top: 0; margin-left: 16px; } .page-nanaco .grid-wrapper .grid-item { margin-top: 24px; } .page-nanaco .grid-wrapper .grid-item > a { position: relative; display: block; width: 100%; height: 100%; } .page-nanaco .grid-wrapper.grid-wrapper--store .grid-item { position: relative; z-index: 1; transition: all 0.5s ease; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .page-nanaco .grid-wrapper.grid-wrapper--store .grid-item .search-result { transition-delay: 0.3s; } .page-nanaco .grid-wrapper.grid-wrapper--store .grid-item.is-hide { overflow: hidden; min-width: 0; max-width: 0; height: 0; margin-top: 0; margin-left: 0; opacity: 0; } .page-nanaco .grid-wrapper.grid-wrapper--store .grid-item.is-hide .search-result { opacity: 0; } .page-nanaco .store-list__wrapper .grid-wrapper .grid-item > a { display: -webkit-flex; display: -ms-flexbox; display: flex; } .page-nanaco .store-list__wrapper.is-inactive { display: none; } .page-nanaco .title-h2 { margin-top: 100px; padding-top: 100px; text-align: center; border-top: 1px solid #858B97; } .page-nanaco .title-h2 .title-h2__inner { display: inline-block; max-width: 1100px; padding: 0 10px; } .page-nanaco .genre-title { margin-top: -20px; padding-top: 120px; } .page-nanaco .genre-title .title-h2 { margin-top: 0; } .page-nanaco .list-item { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-nanaco .list-item .list-item__description { width: 30px; } .page-nanaco .list-item .list-item__element { width: calc(100% - 30px); } .page-nanaco .list-item.list-item--attention .list-item__description { position: relative; width: 44px; padding-left: 14px; } .page-nanaco .list-item.list-item--attention .list-item__description::before { font-size: 16px; position: absolute; top: 0; left: 0; margin: 0; content: "▼"; color: #4c4c4c; } .page-nanaco .list-item.list-item--attention .list-item__element { width: calc(100% - 44px); } .page-nanaco .supplement { padding: 22px 27px; background: linear-gradient(-45deg, #efefed 25%, transparent 25%, transparent 50%, #efefed 50%, #efefed 75%, transparent 75%, transparent 100%), linear-gradient(45deg, #efefed 25%, transparent 25%, transparent 50%, #efefed 50%, #efefed 75%, transparent 75%, transparent 100%); background-color: #fff; background-size: 5px 5px; } .page-nanaco .supplement .supplement-text__title { font-size: 16px; font-weight: 700; } .page-nanaco .supplement .supplement-text { margin-top: 10px; } .page-nanaco .table-normal { width: 100%; table-layout: fixed; border: none; } .page-nanaco .table-normal tr { border-bottom: none; } .page-nanaco .table-normal tr th { font-size: 22px; line-height: 1.5; font-weight: 700; width: 40%; padding: 15px; text-align: center; vertical-align: middle; color: #fff; border-right: none; background: #f18c92; border: solid 1px #f18c92; } .page-nanaco .table-normal tr td { font-size: 16px; width: 60%; padding: 15px; vertical-align: middle; background: #fff; border: solid 1px #D9DDE3; } .page-nanaco .table-normal tr td img { max-width: 120px; margin: 0 auto; } .page-nanaco .table-normal tr.table-normal--w-type1 th { width: 220px; } .page-nanaco .table-normal tr.table-normal--w-type1 td { width: calc(100% - 220px); } .page-nanaco .table-normal tr:first-child th { border-bottom: solid 1px #ffffff; } @media screen and (max-width: 767px) { .page-nanaco .table-normal tr:first-child th { border-bottom: none; } } .page-nanaco .link-text { position: relative; display: inline-block; } .page-nanaco .link-text .link-text__item { position: relative; margin-bottom: 3px; text-decoration: underline; } .page-nanaco .link-text .link-text__item:active { text-decoration: none; } .page-nanaco .link-text.link-text--no-border .link-text__item { text-decoration: none; } .page-nanaco .link-text.pointcp-link { font-size: 24px; font-weight: 700; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .c-content:last-child { padding-bottom: 0; } .page-nanaco .c-form { margin-top: 31px; } .page-nanaco .c-form .filter-list { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-left: 0; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px; } .page-nanaco .c-form .filter-list .filter-list__item { margin-left: 0; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .page-nanaco .c-form .filter-item { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; cursor: pointer; border: 2px solid #b69fd4; border-radius: 16px; background: #fff; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .c-form .filter-item input { display: none; } .page-nanaco .c-form .filter-item label { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; padding: 13px; cursor: pointer; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .c-form .filter-item:active, .page-nanaco .c-form .filter-item.is-active { color: #fff; background-color: #b69fd4; } .page-nanaco .c-form .filter-item:active .filter-title, .page-nanaco .c-form .filter-item.is-active .filter-title { color: #fff; } .page-nanaco .c-form .filter-item.is-active .filter-item__input::after { border-color: #222; } .page-nanaco .c-form .filter-item .filter-item__input { position: relative; min-width: 20px; max-width: 20px; height: 20px; margin-right: 30px; border: 1px solid #858B97; background: #fff; border-radius: 0; } .page-nanaco .c-form .filter-item .filter-item__input::after { content: ""; position: absolute; width: 10px; height: 7px; border: solid 2px #858B97; border-width: 0 0 2px 2px; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); color: #858B97; } .page-nanaco .c-form .filter-item .filter-title { font-size: 16px; font-weight: 700; text-align: center; color: #b69fd4; } .page-nanaco .c-form .filter-item.filter-item--charge { border-color: #f5bf62; } .page-nanaco .c-form .filter-item.filter-item--charge .filter-title { color: #f5bf62; } .page-nanaco .c-form .filter-item.filter-item--charge.is-active, .page-nanaco .c-form .filter-item.filter-item--charge:active { background-color: #f5bf62; } .page-nanaco .c-form .filter-item.filter-item--charge.is-active .filter-title, .page-nanaco .c-form .filter-item.filter-item--charge:active .filter-title { color: #fff; } .page-nanaco .c-form .filter-item.filter-item--zandaka { border-color: #aed254; } .page-nanaco .c-form .filter-item.filter-item--zandaka .filter-title { color: #aed254; } .page-nanaco .c-form .filter-item.filter-item--zandaka.is-active, .page-nanaco .c-form .filter-item.filter-item--zandaka:active { background-color: #aed254; } .page-nanaco .c-form .filter-item.filter-item--zandaka.is-active .filter-title, .page-nanaco .c-form .filter-item.filter-item--zandaka:active .filter-title { color: #fff; } .page-nanaco .c-form .filter-item.filter-item--koukan { border-color: #f18c92; } .page-nanaco .c-form .filter-item.filter-item--koukan .filter-title { color: #f18c92; } .page-nanaco .c-form .filter-item.filter-item--koukan.is-active, .page-nanaco .c-form .filter-item.filter-item--koukan:active { background-color: #f18c92; } .page-nanaco .c-form .filter-item.filter-item--koukan.is-active .filter-title, .page-nanaco .c-form .filter-item.filter-item--koukan:active .filter-title { color: #fff; } .page-nanaco .search-result { position: relative; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; padding: 14px 0; cursor: pointer; border-radius: 16px; border: none; background: #fff; box-shadow: 0px 0px 10px #C5C9D0; flex-wrap: wrap; justify-content: space-between; } .page-nanaco .search-result:active::after { position: absolute; top: 0; left: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; content: ""; opacity: 1; background: linear-gradient(134.81deg, #E99495 5.92%, #EBB7CE 21.65%, #FDC689 37.38%, #F6EA91 52.19%, #B9D989 66.99%, #67C5EA 82.72%, #B0ABD5 98.45%); filter: blur(8px); border-radius: 16px; z-index: -1; } .page-nanaco .search-result.is-inactive:active::after { content: none; } .page-nanaco .search-result .search-result__logo { position: relative; width: 80%; height: 88px; margin: 0 auto; } .page-nanaco .search-result .search-result__logo img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .page-nanaco .search-result .type-list { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-top: -10px; padding-top: 20px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-nanaco .search-result .type-list__item { margin: 10px 0 0 2%; padding: 6px 0; text-align: center; color: #fff; border-radius: 10px; background: #ccc; -webkit-flex-basis: 49%; -ms-flex-preferred-size: 49%; flex-basis: 49%; } .page-nanaco .search-result .type-list__item:nth-child(odd) { margin-left: 0; } .page-nanaco .search-result .type-list__item.type-list__item--tamaru { background: #b69fd4; } .page-nanaco .search-result .type-list__item.type-list__item--charge { background: #f5bf62; } .page-nanaco .search-result .type-list__item.type-list__item--zandaka { background: #aed254; } .page-nanaco .search-result .type-list__item.type-list__item--koukan { background: #f18c92; } @media screen and (max-width: 767px) { .page-nanaco .search-result { padding: 8px 0; } } .page-nanaco .search-result__nomatch { font-size: 16px; display: none; text-align: center; } .page-nanaco .search-result__nomatch.is-active { display: block; } .page-nanaco .genre-select { position: relative; } .page-nanaco .genre-select select { font-size: 16px; width: 100%; padding: 12px 16px; color: #000000; border: 1px solid #858B97; border-radius: 16px; background: #eee; -webkit-appearance: none; } .page-nanaco .genre-select select::-ms-expand { display: none; } .page-nanaco .genre-select::after { content: ""; position: absolute; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 16px solid #000000; } @media screen and (max-width: 767px) { .page-nanaco .genre-select::after { border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid #000000; } } .page-nanaco .l-alliance-lead-wrap { width: 870px; margin: 0 auto 56px; } @media screen and (max-width: 767px) { .page-nanaco .l-alliance-lead-wrap { margin-bottom: 40px; } } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead { display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 40px; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .c-title_default-2 { margin-bottom: 16px; } @media screen and (max-width: 767px) { .page-nanaco .l-alliance-lead-wrap .l-alliance-lead { flex-direction: column; } } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__thumbnail { width: 255px; flex-shrink: 0; margin: 0 auto; } @media screen and (max-width: 767px) { .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__thumbnail { width: 220px; } } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__thumbnail-sp { display: none; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__content { padding-top: 20px; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__content .c-title { text-align: left; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__text { font-size: 18px; font-weight: 700; } .page-nanaco #new .c-cardLink__image { padding: 24px 24px 0; } .page-nanaco #new .c-cardLink__image img { height: 120px; } .page-nanaco #new .c-cardLink__body { padding: 24px; justify-content: center; min-height: 80px; } @media screen and (max-width: 767px) { .page-nanaco #new .c-cardLink__body { padding: 16px; } .page-nanaco #new .c-cardLink__image { padding: 16px 16px 0; } .page-nanaco #new .c-cardLink__image img { height: 50px; width: auto; } .page-nanaco #new .c-cardLink .c-title { font-size: 14px; line-height: 1.7142857143; } } .page-nanaco .c-pointcp { margin-top: 32px; } .page-nanaco .c-pointcp__list { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .page-nanaco .c-pointcp__image { cursor: pointer; text-align: center; background: #FFFFFF; box-shadow: 0px 0px 24px #DEE2E8; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; height: 160px; width: 160px; padding: 16px; } @media screen and (max-width: 767px) { .page-nanaco .c-pointcp { margin-top: 15px; max-width: 345px; margin-inline: auto; } .page-nanaco .c-pointcp__list { display: block; } .page-nanaco .c-pointcp__list:after, .page-nanaco .c-pointcp__list:before { content: ""; position: absolute; width: 50px; height: 100%; background-color: #ffffff; top: 0; z-index: 1; } .page-nanaco .c-pointcp__list:after { right: 0; } .page-nanaco .c-pointcp__list:before { left: 0; } .page-nanaco .c-pointcp .c-spSlider__dots { margin-top: 16px; } .page-nanaco .c-pointcp__item { padding: 8px; } .page-nanaco .c-pointcp__image { width: 104px; height: 104px; min-width: initial; flex-shrink: 0; box-shadow: 0px 0px 10px #C5C9D0; } .page-nanaco .c-pointcp img { height: 73px; width: auto; } .page-nanaco .c-pointcp .slick-arrow { position: absolute; top: calc(50% - 10px); transform: translateY(-50%); z-index: 4; width: 80px; height: 80px; border: 1px solid #D9DDE3; border-radius: 50%; background-color: rgba(245, 247, 251, 0.6); font-size: 0; } .page-nanaco .c-pointcp .slick-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; border-top: 2px solid #858B97; border-right: 2px solid #858B97; } .page-nanaco .c-pointcp .slick-prev::before { transform: translate(-35%, -50%) rotate(-135deg); } .page-nanaco .c-pointcp .slick-next::before { transform: translate(-65%, -50%) rotate(45deg); } .page-nanaco .c-pointcp .slick-dots { display: flex; justify-content: center; gap: 16px; margin-top: 8px; } .page-nanaco .c-pointcp .slick-dots button { display: block; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background-color: #DEE2E8; font-size: 0; } .page-nanaco .c-pointcp .slick-dots .slick-active button { background-color: #858B97; } .page-nanaco .c-pointcp .slick-arrow { display: block; width: 44px; height: 44px; } .page-nanaco .c-pointcp .slick-arrow::before { width: 8px; height: 8px; } .page-nanaco .c-pointcp .slick-prev { left: 0; } .page-nanaco .c-pointcp .slick-next { right: 0; } .page-nanaco .c-pointcp .slick-dots { margin-top: 20px; } } .page-nanaco .modal-wrap { display: none; } .page-nanaco .modal-wrap .overlay { z-index: 9999; } .page-nanaco .modal-wrap .modal { position: fixed; z-index: 10000; top: 50%; left: 50%; display: -webkit-flex; display: -ms-flexbox; display: flex; box-sizing: border-box; width: 75vw; max-width: 1080px; padding: 80px 35px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: #fff; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-nanaco .modal-wrap .modal-inner { width: 100%; } .page-nanaco .modal-wrap .modal-btn-close { position: absolute; top: 10px; right: 10px; height: 39px; } .page-nanaco .modal-wrap .modal-btn-close img { width: 39px; height: 39px; } .page-nanaco .modal-wrap .modal__head { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .modal-wrap .modal__head .modal__logo { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 300px; height: 102px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .modal-wrap .modal__head .modal__logo img { width: auto; max-width: 100%; height: auto; max-height: 100%; } .page-nanaco .modal-wrap .modal__head .modal__name { font-size: 24px; font-weight: 700; width: 100%; margin-top: 8px; text-align: center; color: #333; } .page-nanaco .modal-wrap .modal__content { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-top: 24px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .modal-wrap .modal__content .modal__text { font-size: 22px; font-weight: 400; width: 100%; text-align: center; } .page-nanaco .modal-wrap .type-list { display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-top: 36px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .page-nanaco .modal-wrap .type-list .type-list__item { display: -webkit-flex; display: -ms-flexbox; display: flex; height: 54px; margin-left: 2%; text-align: center; color: #fff; border-radius: 10px; background: #ccc; -webkit-flex-basis: 18%; -ms-flex-preferred-size: 18%; flex-basis: 18%; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--tamaru { background: #b69fd4; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--charge { background: #f5bf62; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--zandaka { background: #aed254; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--koukan { background: #f18c92; } .page-nanaco .modal-wrap.is-active { display: block; } .page-nanaco .modal-wrap .index-wrap__row-btn { margin-top: 29px; } .page-nanaco .modal-wrap .modal__annotation { font-size: 16px; font-weight: 400; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; margin-top: 31px; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .page-nanaco .modal-wrap .is-noactive { visibility: hidden; } .page-nanaco .cp-modal .modal { padding: 30px; } .page-nanaco .cp-modal .modal__head { -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .page-nanaco .cp-modal .modal__head .modal__name { margin-top: 15px; text-align: left; } .page-nanaco .cp-modal .modal__content { margin-top: 12px; padding-top: 5px; border-top: 1px solid #858B97; } .page-nanaco .cp-modal .modal__content .modal__text { font-size: 13px; text-align: left; color: #6c6c6c; } .page-nanaco .cp-modal .modal__content .modal__date { font-size: 16px; font-weight: 700; width: 100%; margin-top: 17px; padding: 8px; text-align: left; background: #f6f6f6; } .page-nanaco .cp-modal .modal__content td img { position: absolute; top: 2px; right: -17px; width: 17px; height: 18px; } @-webkit-keyframes accordion-rotate--open { 0% { rotate: 0deg; } 100% { rotate: 90deg; } } @keyframes accordion-rotate--open { 0% { rotate: 0deg; } 100% { rotate: 90deg; } } @-webkit-keyframes accordion-rotate--close { 0% { rotate: 90deg; } 100% { rotate: 0deg; } } @keyframes accordion-rotate--close { 0% { rotate: 90deg; } 100% { rotate: 0deg; } } .page-nanaco .modal-overlay { position: fixed; z-index: 1002; top: 0; left: 0; display: -webkit-flex; display: -ms-flexbox; display: flex; visibility: hidden; width: 100%; height: 100%; transition: opacity 0.3s ease, visibility 0s 0.3s; opacity: 0; background-color: rgba(0, 0, 0, 0.7); -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .modal-overlay.is-visible { visibility: visible; transition: opacity 0.3s ease; opacity: 1; } .page-nanaco .modal-overlay.is-visible .modal { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .page-nanaco .modal-overlay .modal { position: relative; overflow-y: auto; box-sizing: border-box; width: 90%; max-width: 1080px; max-height: 90vh; padding: 80px 40px 40px; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); background-color: #fff; } .page-nanaco .modal-overlay .modal-close-button { position: absolute; top: 8px; right: 8px; width: 39px; height: 39px; cursor: pointer; border: none; background: 0 0; } .page-nanaco .modal-overlay .modal-body { display: -webkit-flex; display: -ms-flexbox; display: flex; flex-direction: column; -webkit-flex-direction: column; -ms-flex-direction: column; gap: 40px; } .page-nanaco .modal-overlay .modal-content-block { display: none; } .page-nanaco .modal-overlay .modal-content-block.is-modal_active { display: block; } .page-nanaco .modal-overlay .modal-image { width: 100%; max-width: 600px; margin: 0 auto 20px; } .page-nanaco .modal-overlay .modal-image img { width: 100%; } .page-nanaco .modal-overlay .modal-title { font-size: 24px; font-weight: 700; margin-bottom: 40px; padding: 20px; border-bottom: 4px solid #ffdbde; background-color: #fff5f6; } .page-nanaco .modal-overlay .modal-contents { margin-bottom: 40px; } .page-nanaco .modal-overlay .modal-contents:last-child { margin-bottom: 0; } .page-nanaco .modal-overlay .modal-contents__flow-head { display: -webkit-flex; display: -ms-flexbox; display: flex; margin-bottom: 20px; background-color: #fff5f6; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 14px; } .page-nanaco .modal-overlay .modal-contents__about-txt { margin-bottom: 20px; } .page-nanaco .modal-overlay .modal-contents__about-note.modal-contents__about-note--layout2 { margin-bottom: 20px; } .page-nanaco .modal-overlay .modal-contents__about-note.modal-contents__about-note--layout2 li { font-size: 14px; position: relative; padding-left: 2em; color: #6c6c6c; } .page-nanaco .modal-overlay .modal-contents__about-note.modal-contents__about-note--layout2 li::before { position: absolute; top: 0; left: 0; content: attr(data-note); } .page-nanaco .modal-overlay .modal-contents__about-title { font-size: 16px; font-weight: 700; position: relative; margin-bottom: 20px; } @media only screen and (max-width: 768px) { .page-nanaco .grid-wrapper .grid.grid--sp-4 { margin-left: -16px; } .page-nanaco .grid-wrapper .grid.grid--sp-4 .grid-item { min-width: calc((100% - 64px) / 4); max-width: calc((100% - 64px) / 4); margin-left: 16px; margin-top: 0; } .page-nanaco .grid-wrapper .grid.grid--sp-4 .grid-item .search-result__logo { height: 58px; } .page-nanaco .grid-wrapper.grid-wrapper--store .grid .grid-item.is-hide { min-width: 0; max-width: 0; margin-left: 0; } .page-nanaco .title-h2 { margin-top: 40px; padding: 60px 0 0; } .page-nanaco .genre-title { margin-top: 40px; padding-top: 0; } .page-nanaco .supplement { padding: 20px; } .page-nanaco .supplement .supplement-text { font-weight: 500; } .page-nanaco .table-normal { table-layout: auto; border: none; } .page-nanaco .table-normal td { border: solid 1px #D9DDE3; } .page-nanaco .table-normal.table-normal--sp-column tbody, .page-nanaco .table-normal.table-normal--sp-column tr { display: block; } .page-nanaco .table-normal.table-normal--sp-column tbody td, .page-nanaco .table-normal.table-normal--sp-column tbody th, .page-nanaco .table-normal.table-normal--sp-column tr td, .page-nanaco .table-normal.table-normal--sp-column tr th { display: block; width: auto; padding: 14px; } .page-nanaco .table-normal.table-normal--sp-column tbody th, .page-nanaco .table-normal.table-normal--sp-column tr th { font-size: 18px; border-right: none; padding: 24px 16px; } .page-nanaco .link-text .link-text__item { font-size: 13px; } .page-nanaco .pointcp-link .link-text__item { font-size: 18px; } .page-nanaco .c-form .filter-list { margin: 0; gap: 16px; } .page-nanaco .c-form .filter-list .filter-item label { padding: 12px 10px 14px; } .page-nanaco .c-form .filter-list .filter-list__item { min-width: initial; max-width: initial; width: calc((100% - 16px) / 2); margin: 0; flex: auto; } .page-nanaco .c-form .filter-list .filter-list__item:nth-child(odd) { margin-left: 0; } .page-nanaco .c-form .filter-list .filter-item__input { margin-right: 10px; } .page-nanaco .c-form .filter-list .filter-title { font-size: 14px; text-align: left; } } @media only screen and (max-width: 768px) and (max-width: 767px) { .page-nanaco .c-form { margin-top: 40px; } } @media only screen and (max-width: 768px) { .page-nanaco .l-alliance-lead-wrap { width: 100%; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__sub-block { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__thumbnail-sp { display: inline-block; width: 40%; margin-right: 0; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__content { padding-top: 0; } .page-nanaco .l-alliance-lead-wrap .l-alliance-lead .l-alliance-lead__shop-number { display: inline-block; width: 50%; padding-top: 10px; } .page-nanaco .pointcp-slider-area { height: 132px; } .page-nanaco .pointcp-slider { width: 68vw; max-width: 280px; } .page-nanaco .pointcp-slider .slick-track { left: 0; } .page-nanaco .pointcp-slider .pointcp-slider__item { width: 21vw; max-width: 84px; height: 21vw; max-height: 84px; margin-left: 2vw; } .page-nanaco .pointcp-slider .pointcp-slider__item .pointcp-store .pointcp-store__logo { height: 60px; } .page-nanaco .pointcp-slider .pointcp-slider__item .pointcp-store img { max-width: 70%; max-height: 70%; } .page-nanaco .modal-wrap .modal { overflow-y: auto; width: 92vw; height: 80vh; padding: 70px 15px; } .page-nanaco .modal-wrap .modal-btn-close { top: 15px; right: 15px; } .page-nanaco .modal-wrap .modal__head .modal__logo { width: 200px; height: 87px; } .page-nanaco .modal-wrap .modal__head .modal__name { font-size: 25px; } .page-nanaco .modal-wrap .modal__content .modal__text { font-size: 18px; } .page-nanaco .modal-wrap .type-list { margin-top: 32px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .page-nanaco .modal-wrap .type-list .type-list__item { height: 48px; margin-top: 8px; -webkit-flex-basis: 41%; -ms-flex-preferred-size: 41%; flex-basis: 41%; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--tamaru { background: #b69fd4; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--charge { background: #f5bf62; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--zandaka { background: #aed254; } .page-nanaco .modal-wrap .type-list .type-list__item.type-list__item--koukan { background: #f18c92; } .page-nanaco .modal-wrap .index-wrap__row-btn { margin-top: 31px; } .page-nanaco .modal-wrap .modal__annotation { margin-top: 30px; } .page-nanaco .cp-modal .modal { padding: 30px 15px; } .page-nanaco .cp-modal .modal__content { padding-top: 8px; } .page-nanaco .cp-modal .modal__content .modal__text { font-size: 14px; } .page-nanaco .cp-modal .modal__content .modal__date { font-size: 18px; margin-top: 15px; } .page-nanaco .cp-modal .modal__content .index-wrap__row-btn { margin-bottom: 15px; } .page-nanaco .modal-overlay .modal { padding: 32px 16px; } .page-nanaco .modal-overlay .modal-body { gap: 20px; } .page-nanaco .modal-overlay .modal-image { margin-bottom: 10px; } .page-nanaco .modal-overlay .modal-title { font-size: 16px; margin-bottom: 20px; padding: 10px 20px; border-bottom: 2px solid #ffdbde; } .page-nanaco .modal-overlay .modal-contents { margin-bottom: 20px; } } @media only screen and (min-width: 769px) { .page-nanaco .sp-only { display: none; } .page-nanaco .link-text .link-text__item:hover { text-decoration: none; } .page-nanaco .c-anchor:hover { text-decoration: none; } .page-nanaco .conversion-btn .conversion-btn__bnr:hover { opacity: 0.8; } .page-nanaco .filter-item:hover { color: #fff; background-color: #b69fd4; } .page-nanaco .filter-item:hover .filter-title { color: #fff; } .page-nanaco .filter-item.filter-item--charge:hover { background-color: #f5bf62; } .page-nanaco .filter-item.filter-item--charge:hover .filter-title { color: #fff; } .page-nanaco .filter-item.filter-item--zandaka:hover { background-color: #aed254; } .page-nanaco .filter-item.filter-item--zandaka:hover .filter-title { color: #fff; } .page-nanaco .filter-item.filter-item--koukan:hover { background-color: #f18c92; } .page-nanaco .filter-item.filter-item--koukan:hover .filter-title { color: #fff; } .page-nanaco .search-result:hover::after { content: none; } .page-nanaco .search-result.is-inactive:hover::after { content: none; } } .l-exchange-list { display: flex; gap: 16px; flex-wrap: wrap; } .l-exchange-item { width: calc((100% - 48px) / 4); } @media screen and (min-width: 768px) and (max-width: 1080px) { .l-exchange-item { width: calc((100% - 32px) / 3); } } @media screen and (max-width: 767px) { .l-exchange-item { width: calc((100% - 16px) / 2); } } .c-exchange { position: relative; display: block; height: 100%; } .c-exchange__content { display: flex; flex-direction: column; gap: 24px; height: 100%; width: 100%; color: #333333; text-decoration: none; position: relative; filter: drop-shadow(0px 0px 24px #DEE2E8); background-color: #ffffff; border-radius: 16px; padding: 24px; } .c-exchange::before { content: ""; position: absolute; inset: 0; background: linear-gradient(134.81deg, #E99495 5.92%, #EBB7CE 21.65%, #FDC689 37.38%, #F6EA91 52.19%, #B9D989 66.99%, #67C5EA 82.72%, #B0ABD5 98.45%); filter: blur(8px); border-radius: 16px; opacity: 0; transition: all 0.3s linear; z-index: -1; } .c-exchange__title { font-size: 18px; line-height: 1.5; font-weight: 700; margin-bottom: 19px; } .c-exchange__thumbnail { display: flex; align-items: center; min-height: 76px; margin-top: auto; } .c-exchange__thumbnail img { max-width: 100%; height: auto; } .c-exchange__flow { display: flex; gap: 24px; position: relative; } .c-exchange__flow:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 7px solid transparent; border-left: 8px solid #727272; border-bottom: 7px solid transparent; } .c-exchange__step { flex: 1; } .c-exchange__step-title { font-size: 13px; line-height: 1.6153846154; font-weight: 700; color: #ffffff; padding: 2px; width: 100%; border-radius: 24px; text-align: center; margin-bottom: 8px; } .c-exchange__step-title--partner { background-color: #B0ABD5; } .c-exchange__step-title--nanaco { background-color: #67C5EA; } .c-exchange__step-text { text-align: center; color: #000000; font-weight: 700; font-size: 16px; line-height: 1.6875; margin: 0 -5px; } .c-exchange__step-emphasis { font-size: 24px; line-height: 1.375; font-weight: 700; color: #333333; } .c-exchange[target=_blank] .c-exchange__content:after { content: ""; position: absolute; width: 0; height: 0; border-bottom: 40px solid #C3A75E; border-left: 40px solid transparent; bottom: 0; right: 0; z-index: 0; } .c-exchange[target=_blank] .c-exchange__content::before { content: ""; position: absolute; width: 14px; height: 14px; mask-image: url(/7card/usr/file/attachment/icon_target.svg); mask-size: contain; background-color: #ffffff; bottom: 4px; right: 4px; z-index: 1; } @media (hover: hover) { .c-exchange:hover { opacity: 1; } .c-exchange:hover .c-exchange__content { filter: none; } .c-exchange:hover:before { opacity: 1; } } @media screen and (max-width: 767px) { .c-exchange__content { gap: 16px; padding: 16px; } .c-exchange__title { font-size: 16px; line-height: 1.5; margin-bottom: 0; } .c-exchange__flow { gap: 15px; } .c-exchange__flow:after { border-top: 6px solid transparent; border-left: 6px solid #727272; border-bottom: 6px solid transparent; } .c-exchange__flow:first-child .c-flow__step { order: 1; } .c-exchange__flow:first-child .c-flow__title { order: 2; } .c-exchange__flow:first-child .c-flow__thumbnail { order: 3; } .c-exchange__flow:first-child .c-flow__body { order: 4; } .c-exchange__flow:first-child .c-flow__note { order: 5; } .c-exchange__flow__body { order: 2; } .c-exchange__flow__thumbnail { order: 3; } .c-exchange__flow__step { order: 1; } .c-exchange__step-text { font-size: 12px; line-height: 2.25; } .c-exchange__step-emphasis { font-size: 20px; line-height: 1.65; } .c-exchange[target=_blank] .c-exchange__content:after { border-bottom-width: 32px; border-left-width: 32px; } .c-exchange[target=_blank] .c-exchange__content::before { width: 12px; height: 12px; bottom: 2px; right: 2px; } } .page-payment .c-textBox { border: solid 1px #DEE2E8; max-width: 840px; margin: 32px auto; } .page-payment .c-textBox__title-2 { font-size: 28px; line-height: 1.5714285714; font-weight: 700; color: #333333; margin-bottom: 0; text-align: center; display: block; } .page-payment .c-textBox__title-sub { font-size: 16px; line-height: 1.5625; font-weight: 400; color: #333333; margin-bottom: 16px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 24px; } .page-payment .c-textBox__title-sub span { display: inline-flex; align-items: center; gap: 4px; background-color: #F5F7FB; } .page-payment .c-textBox__title-sub span.c-number { font-size: 32px; line-height: 1.53125; font-weight: 700; color: #C3A75E; } @media screen and (max-width: 767px) { .page-payment .c-textBox { padding: 16px; } .page-payment .c-textBox__title-2 { font-size: 18px; line-height: 1.5; } .page-payment .c-textBox__title-sub { gap: 16px; margin-bottom: 8px; } .page-payment .c-textBox__title-sub span { font-size: 12px; gap: 2px; } .page-payment .c-textBox__title-sub span.c-number { font-size: 22px; } } .page-payment .c-payment-img { width: 768px; max-width: 100%; margin: 32px auto; } @media screen and (max-width: 767px) { .page-payment .c-payment-img { margin: 24px auto; } } .page-payment .c-payment-table { width: 100%; max-width: 840px; margin-inline: auto; } .page-payment .c-payment-table__table { border-collapse: collapse; table-layout: fixed; margin-bottom: 24px; } .page-payment .c-payment-table__table--pc { width: 840px; } .page-payment .c-payment-table__table--sp { display: none; } .page-payment .c-payment-table__col { width: 280px; } .page-payment .c-payment-table__th, .page-payment .c-payment-table__td, .page-payment .c-payment-table__row-head { border: 1px solid #D9DDE3; vertical-align: middle; } .page-payment .c-payment-table__th { height: 59px; padding: 16px 24px; border-color: #ffffff; background-color: #F5F7FB; color: #333333; font-weight: 700; text-align: center; font-size: 16px; line-height: 1.6875; } .page-payment .c-payment-table__td, .page-payment .c-payment-table__row-head { padding: 16px 24px; color: #000000; font-size: 16px; line-height: 1.6875; } .page-payment .c-payment-table__td { border-color: #D9DDE3; font-weight: 400; text-align: center; } .page-payment .c-payment-table__row-head { border-color: #ffffff; background-color: #F5F7FB; font-weight: 700; text-align: center; } .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__td, .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__row-head { height: 140px; } .page-payment .c-payment-table__tbody tr:last-child .c-payment-table__td, .page-payment .c-payment-table__tbody tr:last-child .c-payment-table__row-head { height: 80px; } .page-payment .c-payment-table__td--payment { height: 220px; } .page-payment .c-payment-table__text { display: inline-block; } @media screen and (max-width: 767px) { .page-payment .c-payment-table { max-width: 344px; margin-top: 32px; padding-bottom: 0; overflow-x: visible; } .page-payment .c-payment-table__table--pc { display: none; } .page-payment .c-payment-table__table--sp { display: table; width: 344px; max-width: 100%; } .page-payment .c-payment-table__col--store { width: 100px; } .page-payment .c-payment-table__col--period, .page-payment .c-payment-table__col--date { width: 122px; } .page-payment .c-payment-table__th { height: 40px; padding: 8px; font-size: 14px; line-height: 1.7142857143; } .page-payment .c-payment-table__td, .page-payment .c-payment-table__row-head { padding: 8px 7px; font-size: 14px; line-height: 1.7142857143; } .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__td, .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__row-head { height: 160px; } .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__td .c-payment-table__text, .page-payment .c-payment-table__tbody tr:first-child .c-payment-table__row-head .c-payment-table__text { text-align: center; } .page-payment .c-payment-table__tbody tr:last-child .c-payment-table__td, .page-payment .c-payment-table__tbody tr:last-child .c-payment-table__row-head { height: 80px; } .page-payment .c-payment-table__td--payment { height: 160px; } } .page-payment .c-payment-table-2 { width: 100%; max-width: 980px; margin-inline: auto; } .page-payment .c-payment-table-2__table { width: 980px; border-collapse: collapse; table-layout: fixed; margin-bottom: 24px; } .page-payment .c-payment-table-2__col--method { width: 320px; } .page-payment .c-payment-table-2__col--payment { width: 220px; } .page-payment .c-payment-table-2__th, .page-payment .c-payment-table-2__td, .page-payment .c-payment-table-2__row-head { border: 1px solid #D9DDE3; vertical-align: middle; } .page-payment .c-payment-table-2__th { position: relative; height: 59px; padding: 16px 24px; border-color: #ffffff; background-color: #F5F7FB; color: #333333; font-weight: 700; text-align: center; font-size: 16px; line-height: 1.6875; } .page-payment .c-payment-table-2__td, .page-payment .c-payment-table-2__row-head { height: 59px; padding: 16px 24px; border-color: #D9DDE3; color: #000000; text-align: center; font-size: 16px; line-height: 1.6875; } .page-payment .c-payment-table-2__row-head { font-weight: 400; } .page-payment .c-payment-table-2__td { font-weight: 400; } @media screen and (max-width: 767px) { .page-payment .c-payment-table-2 { max-width: 344px; overflow-x: visible; } .page-payment .c-payment-table-2__table { width: 344px; max-width: 100%; } .page-payment .c-payment-table-2__col--method { width: 142px; } .page-payment .c-payment-table-2__col--payment { width: 67.3333333333px; } .page-payment .c-payment-table-2__th, .page-payment .c-payment-table-2__td, .page-payment .c-payment-table-2__row-head { padding: 8px; font-size: 14px; line-height: 1.7142857143; } .page-payment .c-payment-table-2__th { height: 101px; overflow-wrap: anywhere; } .page-payment .c-payment-table-2__th:not(:first-child) { padding-bottom: 21px; vertical-align: top; } .page-payment .c-payment-table-2__th:not(:first-child)::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 9px; height: 11px; background-color: #C3A75E; clip-path: polygon(0 0, 100% 0, 50% 100%); transform: translateX(-50%); } .page-payment .c-payment-table-2__td, .page-payment .c-payment-table-2__row-head { height: 64px; } } .p-card__content-list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 24px; } .p-card__content-list--items { width: calc((100% - 48px) / 3); min-height: 262px; } .p-card__content-list--items a { display: flex; flex-direction: column; align-items: center; background: #FFFFFF; box-shadow: 0 0 24px #DEE2E8; border-radius: 16px; padding: 16px 24px; height: 100%; } .p-card__content-list--items a:hover { opacity: 1; } .p-card__content-list--items a > *:last-child { padding-bottom: 0; } .p-card__content-list--items-pic { width: 212px; } .p-card__content-list--items-ttl { font-size: 18px; line-height: 1.5; padding: 16px 0; } .p-card__content-list--items-info { display: flex; align-items: center; justify-content: flex-start; align-self: stretch; gap: 8px; } .p-card__content-list--items-info + .p-card__content-list--items-info { margin-top: 8px; } .p-card__content-list--items-txt { font-size: 12px; line-height: 1.6666666667; } .p-card__content-list--items .c-tag-2 { padding: 2px 10px; min-height: auto; } @media screen and (max-width: 767px) { .p-card__content-list--items { width: 100%; height: auto; } .p-card__content-list--items a { border-radius: 15px; padding: 16px 24px 22px; } .p-card__content-list--items-ttl { margin-top: 0; padding: 21px 0 12px; } } .p-card__boxs { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .p-card__boxs-detail { width: 508px; } .p-card__boxs-detail .l-service__card-title { margin-bottom: 16px; } .p-card__boxs-detail .l-service__card-btn { margin-top: 48px; } .p-card__boxs-pic { width: calc(100% - 508px - 24px); } @media screen and (max-width: 767px) { .p-card__boxs { flex-direction: column; } } .page-credit .p-signup { padding-top: 64px; } .page-credit .p-signup__content { position: relative; height: 100%; margin-top: 32px; } .page-credit .p-signup__content-code { width: 374px; position: absolute; top: 63px; right: 59px; } .page-credit .p-signup__content-code .l-service__card-btn { margin-top: 31px; text-align: center; } .page-credit .p-signup__content-code .l-service__card-btn .c-btn--medium { min-width: 320px; } .page-credit .p-signup__content-qr { display: flex; justify-content: space-between; gap: 29px; } .page-credit .p-signup__content-qr--app { width: 161px; } .page-credit .p-signup__content-qr--google { width: calc(100% - 161px - 29px); } @media screen and (max-width: 767px) { .page-credit .p-signup .l-inner-small { padding-inline: 0; } .page-credit .p-signup { padding-top: 40px; } .page-credit .p-signup__content { position: relative; } .page-credit .p-signup__content-code { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; } .page-credit .p-signup__content-code .l-service__card-btn { position: absolute; bottom: 62px; left: 0; right: 0; margin-top: 0; text-align: center; } .page-credit .p-signup__content-code .l-service__card-btn .c-btn--medium { min-width: 320px; } .page-credit .p-signup__content-qr { position: absolute; top: 17.1rem; left: 0; right: 0; margin: 0 auto; gap: 16px; width: 294px; } .page-credit .p-signup__content-qr--app { width: 133px; } .page-credit .p-signup__content-qr--google { width: 145px; } } @media screen and (min-width: 768px) { .page-credit .l-cardLink-list { padding-top: 7px; } } .page-detail .l-detail p + p { margin-top: 24px; } .page-detail p { font-size: 16px; line-height: 1.6875; } @media screen and (max-width: 767px) { .page-detail .l-detail p + p { margin-top: 16px; } .page-detail p { font-size: 16px; line-height: 1.6875; } } .page-information .c-heading__content { padding-top: 15px; padding-bottom: 18px; } .page-information .c-list-vertical { justify-content: center; } .page-information .c-link_v2__item { padding: 24px 0 29px; } .page-information .c-link_v2__item-header { gap: 22px; } .page-information .c-link_v2__item-content { gap: 13px; } @media screen and (max-width: 767px) { .page-information .c-heading__content { padding-top: 60px; padding-bottom: 60px; } .page-information .c-heading__subtitle { font-size: 18px; line-height: 1.5; } .page-information .c-link_v2__item { padding: 22px 0 21px; } .page-information .c-link_v2__item-content { gap: 4px; } } .cat_year_list { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; } .cat_year_link { display: flex; align-items: center; justify-content: center; text-decoration: underline; text-underline-offset: 3px; color: #333333; font-size: 22px; line-height: 1.5; font-weight: bold; } .cat_year_link.is-active { text-decoration: none; } @media screen and (max-width: 767px) { .cat_year_list { justify-content: flex-start; gap: 8px 16px; } } .page-rule .c-list-hoz { gap: 35px; } .page-rule .l-rule__inner:last-child { margin-bottom: 42px; } @media screen and (max-width: 767px) { .page-rule .c-text-link { display: flex; } .page-rule .c-text-link::after { flex-shrink: 0; } .page-rule .c-list-hoz { gap: 24px; } .page-rule .c-pageTitle__inner { padding-inline: 5px; } .page-rule .l-rule__inner:last-child { margin-bottom: 0; } } .page-biz .l-main { padding-bottom: 0; } .page-biz .l-cardLink-list--3col { gap: 24px; } .page-biz .l-cardLink-list--3col .c-cardLink__body { align-items: flex-start; padding: 24px 24px; } .page-biz .l-cardLink-list--3col .c-cardLink__title--large { font-size: 22px; line-height: 1.5; } .page-biz .l-cardLink-list--3col .c-cardLink__image { min-height: auto; } .page-biz .news_content { margin-top: 0; } .page-biz .news_content--left { margin-top: 15px; } .page-biz .news_content--left .wrap-btn { margin-top: 42px; } .page-biz .news_content--right { padding-top: 4px; } .page-biz .news_content .c-link_v2__item { padding: 25px 0 30px; } .page-biz .news_content .c-link_v2__item-badge { padding-block: 3px; } .page-biz .news_content .c-link_v2__item-content { gap: 13px; } @media screen and (max-width: 767px) { .page-biz .l-main { padding-bottom: 0; } .page-biz .l-cardLink-list--3col { gap: 16px; } .page-biz .l-cardLink-list--3col .c-cardLink { max-width: 280px; } .page-biz .l-cardLink-list--3col .c-cardLink__body { padding: 16px 24px; } .page-biz .l-cardLink-list--3col .c-cardLink__title--large { font-size: 16px; line-height: 1.5; } .page-biz .c-cardLink__title { margin-bottom: 8px; } .page-biz .c-cardLink__body { padding: 14px 24px; } .page-biz .news_content--left { margin-top: 10px; } .page-biz .news_content--right { padding-top: 6px; } .page-biz .news_content .c-link_v2__item { padding: 22px 0 21px; } .page-biz .news_content .c-link_v2__item-text { display: flex; } .page-biz .news_content .c-link_v2__item-text::after { flex-shrink: 0; } .page-biz .news_content .c-link_v2__item-content { gap: 4px; } .page-biz .news_content .wrap-btn { margin-top: 40px; } } .page-biz-point .l-cardLink-list .c-cardLink, .page-biz-gift .l-cardLink-list .c-cardLink { padding: 40px 32px; filter: none; border: 2px solid #d9dde3; border-radius: 16px; } .page-biz-point .l-cardLink-list .c-cardLink__body, .page-biz-gift .l-cardLink-list .c-cardLink__body { padding: 0; margin-top: 32px; } @media screen and (max-width: 767px) { .page-biz-point .l-cardLink-list .c-cardLink, .page-biz-gift .l-cardLink-list .c-cardLink { padding: 32px 24px; } .page-biz-point .l-cardLink-list .c-cardLink__body, .page-biz-gift .l-cardLink-list .c-cardLink__body { margin-top: 24px; } } .page-biz-gift .grid-wrapper .grid-item > a:hover:before { background-color: transparent; } .page-biz-merchant .l-phoneList__item { border: 1px solid #DEE2E8; padding: 16px; border-radius: 16px; text-align: center; color: #000000; } .page-biz-merchant .l-phoneList__tel { font-size: 22px; line-height: 1.5; text-decoration: underline; font-weight: 400; position: relative; margin-left: 28px; margin-top: 4px; } .page-biz-merchant .l-phoneList__tel::before { content: ""; position: absolute; top: 50%; left: -28px; transform: translateY(-50%); width: 24px; height: 24px; background-image: url("/7card/usr/file/attachment/icon_call.svg"); background-size: cover; } @media screen and (max-width: 767px) { .page-biz-merchant .l-phoneList__item { display: flex; align-items: center; padding: 15px 40px; gap: 8px; } .page-biz-merchant .l-phoneList__item::before { width: 16px; height: 16px; } .page-biz-merchant .l-phoneList__tel { font-size: 18px; line-height: 1.3333333333; margin-left: 20px; margin-top: 0; } .page-biz-merchant .l-phoneList__tel::before { width: 16px; height: 16px; left: -20px; } } .page-biz-merchant .c-textBox--white { border: 1px solid #DEE2E8; padding: 24px; background-color: #FFFFFF; } @media screen and (max-width: 767px) { .page-biz-merchant .c-noteList__item:not(.indent) { display: block; } .page-biz-merchant .c-textBox { margin-top: 24px; } } .page-pointcp .l-pointcp__content:not(:first-child) { margin-top: 32px; } .page-pointcp .l-pointcp-underway { display: flex; align-items: center; gap: 24px; } .page-pointcp .l-pointcp-box { display: flex; min-width: 109px; min-height: 74px; align-items: center; justify-content: center; background-color: #EF3A3C; border-radius: 16px; padding: 8px; color: #ffffff; } .page-pointcp .l-pointcp .c-list--disc { margin-top: 2px; } .page-pointcp .l-pointcp-image { display: flex; gap: 24px; max-width: 824px; margin-inline: auto; } .page-pointcp .c-pointcp__list { display: flex; gap: 16px; flex-wrap: wrap; } .page-pointcp .c-pointcp__item { padding: 16px; text-align: center; background: #FFFFFF; box-shadow: 0px 0px 24px #DEE2E8; border-radius: 16px; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; height: 160px; max-width: 160px; width: 100%; cursor: pointer; } @media screen and (max-width: 767px) { .page-pointcp .l-pointcp_text { margin-top: -7px; font-size: 18px; line-height: 1.5; } .page-pointcp .l-pointcp-underway span { font-size: 22px; line-height: 1.7272727273; } .page-pointcp .l-pointcp-underway .l-pointcp-box { font-size: 36px; line-height: 1.6111111111; } .page-pointcp .l-pointcp__content.l-pointcp__content-underway { margin-top: 8px; } .page-pointcp .l-pointcp__content.l-pointcp__content-campaign { margin-top: -10px; } .page-pointcp .l-pointcp .c-list--disc { margin-top: -8px; padding-left: 0; gap: 1px; } .page-pointcp .l-pointcp-image { flex-direction: column; gap: 16px; max-width: 240px; } } .c-campaign-notice { background-color: #E99495; padding: 10px; } .c-campaign-notice__txt { font-size: 36px; line-height: 1.5; font-weight: 700; color: #FFFFFF; text-align: center; } @media screen and (max-width: 767px) { .c-campaign-notice__txt { font-size: 18px; } } .page-reward-credit .c-image { margin-inline: auto; } .page-reward-credit .c-image--442 { width: 442px; } .page-reward-credit .c-image--312 { width: 312px; } .page-reward-credit .l-row--1-sp > .l-col { display: flex; } @media screen and (max-width: 767px) { .page-reward-credit .c-image--442 { width: 344px; } .page-reward-credit .c-image--312 { width: 240px; } } .page-cp .l-cp__closed .c-btn-open { display: none !important; } .page-cp .l-cp__closed.is-closed .l-campaign__list { display: none; } .page-cp .l-cp__closed.is-closed .c-btn.c-btn-open { display: inline-flex !important; } .page-cp .l-cp__closed.is-closed .c-btn.c-btn-close { display: none; } .page-cp .l-campaign { background: transparent; padding-bottom: 0; } .page-cp .l-campaign__badges .l-campaign__badge--new { margin-left: -9px; } .page-cp .l-campaign__badge--new { color: #9D843E; } .page-cp .l-campaign__card { gap: 24px; min-height: auto; } .page-cp .l-campaign__image { max-width: 468px; width: 100%; flex-shrink: unset; } .page-cp .l-campaign__image-overlay { display: none; } .page-cp .l-campaign__image img { height: auto; } .page-cp .l-campaign__list-item.is-closed .l-campaign__image { position: relative; } .page-cp .l-campaign__list-item.is-closed .l-campaign__image-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(41, 41, 41, 0.6); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 44px; line-height: 1.4545454545; font-weight: 700; } .page-cp .c-tab__control { margin-bottom: 32px; width: 660px; gap: 0; } .page-cp .c-bnr--01 { padding: 40px 48px 45px 64px; } .page-cp .c-bnr--01 .c-bnr__content { padding-top: 5px; } .page-cp .c-bnr--01 .c-bnr__title { margin-bottom: 8px; } .page-cp .c-bnr--01 .c-bnr__btn { margin-top: 28px; } .page-cp .c-bnr--01 .c-bnr__image { max-width: 250px; } .page-cp .c-bnr--02 .c-bnr__content { max-width: 480px; } .page-cp .c-bnr--02 .c-bnr__image { max-width: 361px; } @media screen and (min-width: 768px) { .page-cp .c-bnr--02 .c-bnr__image { margin-left: 4px; margin-top: 6px; } } .page-cp .l-cp--02 .c-heading { padding-bottom: 40px; } .page-cp .c-cardLink__body { padding-block: 24px; } .page-cp .c-cardLink__image { min-height: auto; } @media screen and (min-width: 768px) and (max-width: 1080px) { .page-cp .l-campaign__image { width: 100%; margin-block: auto; max-width: 47.1%; } .page-cp .l-campaign__body { flex-shrink: 0; } .page-cp .l-campaign__list-item.is-closed .l-campaign__image-overlay { font-size: 28px; line-height: 1.1428571429; } } @media screen and (max-width: 767px) { .page-cp .l-campaign { background: transparent; } .page-cp .l-campaign__badges { gap: 10px 2px; } .page-cp .l-campaign__badges .l-campaign__badge--new { margin-left: 0; } .page-cp .l-campaign__badge { padding: 1px 10px 0; } .page-cp .l-campaign__badge--new { color: #9D843E; } .page-cp .l-campaign__card { min-height: auto; padding: 16px 16px 22px 16px; } .page-cp .l-campaign__image { max-width: 100%; width: 100%; flex-shrink: unset; } .page-cp .l-campaign__date { margin-top: 16px; } .page-cp .l-campaign__list-item { margin-inline: 32px; margin-top: 24px; } .page-cp .l-campaign__list-item.is-closed .l-campaign__image { position: relative; } .page-cp .l-campaign__list-item.is-closed .l-campaign__image-overlay { font-size: 24px; line-height: 1.5833333333; } .page-cp .c-tab__control { margin-bottom: 40px; width: 100%; max-width: 375px; gap: 0; } .page-cp .c-bnr--01 { padding: 32px 16px; } .page-cp .c-bnr--01 .c-bnr__wrap { flex-direction: column; } .page-cp .c-bnr--01 .c-bnr__content { padding-top: 5px; order: 2; } .page-cp .c-bnr--01 .c-bnr__title { margin-bottom: 8px; font-size: 22px; line-height: 1.5; margin-top: 42px; margin-right: -5px; } .page-cp .c-bnr--01 .c-bnr__text { margin-top: 8px; font-size: 16px; line-height: 1.6875; padding-bottom: 2px; } .page-cp .c-bnr--01 .c-bnr__btn { margin-top: 23px; } .page-cp .c-bnr--01 .c-bnr__image { max-width: 174px; order: 1; margin-inline: auto; margin-bottom: 0; } .page-cp .c-bnr--02 .c-bnr__content { max-width: 100%; } .page-cp .c-bnr--02 .c-bnr__image { max-width: 184px; margin-inline: auto; } .page-cp .l-cp__closed .l-campaign__badge { padding: 1px 10px 0; } .page-cp .l-cp__closed .l-campaign__card { padding: 16px; } .page-cp .l-cp__closed .l-campaign__list-item { margin-top: 0; } .page-cp .l-cp__closed .l-campaign__list-item + .l-campaign__list-item { margin-top: 10px; } .page-cp .l-cp--02 .c-heading { padding-bottom: 34px; } .page-cp .c-cardLink__body { padding-left: 24px; } .page-cp .c-cardLink__title { font-size: 16px; line-height: 1.5; } } .page-bokin .image-bokin01 { max-width: 400px; margin-inline: auto; } .page-bokin .image-bokin02 { max-width: 360px; margin-inline: auto; } .page-bokin .c-list--disc { gap: 3px; padding-top: 3px; } .page-bokin .wrap-btn { margin-top: 35px; } @media screen and (max-width: 767px) { .page-bokin .c-pageTitle__inner { padding-inline: 12px; } .page-bokin .c-list--disc { gap: 0px; padding-top: 0; padding-left: 0; } .page-bokin .c-txt { margin-right: -1px; } .page-bokin .icon-target::after { margin-bottom: -4px; } .page-bokin .image-bokin01 { max-width: 688px; } .page-bokin .image-bokin02 { max-width: 688px; } .page-bokin .wrap-btn { margin-top: 24px; } } .img_card { max-width: 588px; margin-inline: auto; text-align: center; } .img_card img{ max-width: 300px; } .page-card .c-noteList--tb { max-width: 984px; margin-inline: auto; } .page-card .c-table { margin-top: 33px; } .page-card .c-table__table { max-width: 982px; } .page-card .c-table .c-table__td { padding: 16px 16px; } .page-card .c-point { justify-content: center; margin-left: 13px; } @media screen and (max-width: 767px) { .img_card img{ max-width: 180px; } .page-card .image-saison01 { max-width: 688px; } .page-card .c-noteList--tb { max-width: 100%; margin-inline: auto; } .page-card .c-noteList--btn { margin-bottom: 0; margin-top: 30px; } .page-card .c-point { margin-left: 0; margin-bottom: 3px; } .page-card .c-table { margin-top: 9px; } .page-card .c-table--horizontal { width: 100%; } .page-card .c-table__table { max-width: 100%; } .page-card .c-table .c-table__th { width: 100%; border: 1px solid #F5F7FB; height: 40px; padding: 8px 8px; } .page-card .c-table .c-table__th::before { content: none; background: transparent; } .page-card .c-table .c-table__td { width: 100%; padding: 0px 5px; height: auto; min-height: 40px; display: flex; justify-content: center; align-items: center; } .page-card .c-table tr { display: flex; flex-direction: column; } .page-card .c-text-link { font-size: 14px; line-height: 1.7142857143; } .page-card .wrap-btn { margin-top: 5px; } } .page-credit-revolving .imgage_revolving { max-width: 960px; margin: 32px auto 24px; } @media screen and (max-width: 767px) { .page-credit-revolving .imgage_revolving { max-width: 100%; margin: 24px auto; } } .page-credit-revolving .c-table__td, .page-credit-revolving .c-table__th { height: auto; padding: 16px 16px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th { background-color: #F5F7FB; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--empty { border-bottom: none; border-top: none; width: 280px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--heading { width: 560px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--amount { width: 140px; border-bottom: 1px solid #858B97; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--vertical { width: 64px; writing-mode: vertical-rl; text-orientation: upright; height: auto; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--course { width: 216px; border-right: 1px solid #D9DDE3; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--group { width: 108px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--course2 { width: 108px; border-right: 1px solid #D9DDE3; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__tr .c-table__th.--empty { border-bottom: 1px solid #858B97; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup { width: 560px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup2 { width: 140px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup3 { width: 420px; } @media screen and (max-width: 767px) { .page-credit-revolving .c-table--terms01 { width: 880px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--empty { width: 248px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--heading { width: 400px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--amount { width: 100px; height: 64px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__th.--vertical { width: 32px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__tr .c-table__th.--empty { border-bottom: 1px solid #858B97; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup { width: 400px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup2 { width: 100px; } .page-credit-revolving .c-table--terms01 .c-table__tbody .c-table__td.--textgroup3 { width: 300px; } } .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__th.--group { width: 280px; } .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__th.--amount { width: 280px; border-right: 1px solid #ffffff; border-bottom: 1px solid #DEE2E8; } .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__td.--textgroup { width: 560px; } @media screen and (max-width: 767px) { .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__th.--group { width: 100%; background-color: transparent; border: none; text-align: left; } .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__th.--amount { width: 100%; border-right: 1px solid #ffffff; border-bottom: 1px solid #DEE2E8; } .page-credit-revolving .c-table--terms02 .c-table__tbody .c-table__td.--textgroup { width: 100%; } } .page-credit-revolving .c-table--terms03 { width: calc((100% - 56px) / 2); } .page-credit-revolving .c-table--terms03 .c-table__tbody .c-table__th.--group { border-bottom: 1px solid #858B97; border-right: none; } .page-credit-revolving .c-table--terms03 .c-table__tbody .c-table__th.--amount { border-right: 1px solid #DEE2E8; } .page-credit-revolving .c-table--terms03 .c-table__tbody .c-table__th.--bor { border-bottom: 1px solid #DEE2E8; } @media screen and (max-width: 767px) { .page-credit-revolving .c-table--terms03 { width: 100%; } .page-credit-revolving .c-table--terms03 .c-table__tbody tr { flex-direction: row; } .page-credit-revolving .c-table--terms03 .c-table__tbody .c-table__th.--amount { width: 120px; height: auto; display: flex; align-items: center; border-bottom: 1px solid #ffffff; } .page-credit-revolving .c-table--terms03 .c-table__tbody .c-table__td.--smailw { width: 224px; } } .page-credit-revolving .c-table--terms04 .c-table__tbody .c-table__th { border-bottom: 1px solid #858B97; border-right: none; } @media screen and (max-width: 767px) { .page-credit-revolving .c-table--terms04 .c-table__tbody tr { flex-direction: row; } .page-credit-revolving .c-table--terms04 .c-table__tbody .c-table__th { height: auto; border-right: 1px solid #ffffff; display: flex; align-items: center; justify-content: center; } } .page-credit-revolving .p-revolving-terms__items-flex { display: flex; justify-content: space-between; gap: 56px; } @media screen and (max-width: 767px) { .page-credit-revolving .p-revolving-terms__items-flex { gap: 24px; flex-direction: column; } } .page-credit-revolving .p-revolving-important .c-noteList__item { padding-left: 15px; text-indent: -15px; } @media screen and (max-width: 767px) { .page-credit-revolving .p-revolving-important .c-noteList__item { padding-left: 0; text-indent: 0; } } .page-credit-revolving .c-table--nn .c-table__box { min-height: auto; } .page-credit-revolving .c-table--nn .c-table--w280 { width: 280px; } @media screen and (max-width: 767px) { .page-credit-revolving .c-table--nn .c-table--w248-sp { width: 248px; } } .page-creditFirst .c-kv-slider .slick-dots { margin-top: 16px; } .page-creditFirst .c-block__content .wrap-btn { margin-top: 50px; } .page-creditFirst .c-block + .c-block { margin-top: 30px; } .page-creditFirst .c-cardLink__body { padding: 14px 24px; } .page-creditFirst .c-cardLink .c-txt { margin-top: 4px; } .page-creditFirst .btn-member .c-btn--primary { padding: 20px 22px; } .page-creditFirst .btn-member .c-btn--large { min-width: auto; max-width: 430px; width: 100%; } .page-creditFirst .l-campaign { background: transparent; } .page-creditFirst .c-hero-banner__image { max-width: 47.2%; } .page-creditFirst .c-hero-banner__inner { gap: 24px; } @media screen and (max-width: 767px) { .page-creditFirst .l-kv { padding: 0px 0 16px; } .page-creditFirst .c-kv-slider .slick-dots { margin-top: 24px; } .page-creditFirst .c-bnr__content { max-width: 486px; } .page-creditFirst .c-bnr-02 figure { width: 100%; } .page-creditFirst .c-bnr--02 { padding: 20px 16px; } .page-creditFirst .c-bnr--02 .c-bnr__content { max-width: 100%; } .page-creditFirst .c-bnr--02 .c-bnr__image { max-width: 184px; margin-inline: auto; } .page-creditFirst .c-bnr--02 .c-btn--medium { max-width: 240px; } .page-creditFirst .c-block__content .wrap-btn { margin-top: 22px; } .page-creditFirst .c-block + .c-block { margin-top: 26px; } .page-creditFirst .c-block__ttl { margin-bottom: 12px; } .page-creditFirst .c-block .c-btn--medium { max-width: 240px; } .page-creditFirst .c-block .c-block__image { border-radius: 15px; } .page-creditFirst .c-cardLink { max-width: 100%; } .page-creditFirst .c-cardLink__body { padding: 14px 24px; } .page-creditFirst .c-cardLink .c-txt { margin-top: 4px; } .page-creditFirst .btn-member .c-btn--primary { padding: 16px 22px; text-align: left; } .page-creditFirst .btn-member .c-btn--large { min-width: auto; max-width: 430px; width: 100%; } .page-creditFirst .l-campaign { background: transparent; } .page-creditFirst .l-campaign__button { margin-top: 24px; } .page-creditFirst .l-campaign .c-btn--medium { max-width: 240px; } .page-creditFirst .c-hero-banner__image { max-width: 100%; } .page-creditFirst .c-hero-banner__inner { gap: 24px; } .page-creditFirst .c-content-appeal .c-heading--sub .c-heading__title { padding: 0 12px; } .page-creditFirst .c-content-feature .c-cardLink__image picture { display: block; width: 100%; } .page-creditFirst .c-hero-banner:not(.slick-slide) { max-width: 100%; } .page-creditFirst .l-topics__list { display: flex; flex-direction: column; } .page-creditFirst .l-topics .c-cardLink__body { padding: 16px 24px; min-height: 97px; } } .page-credit-skip .p-skip-visual { width: 960px; max-width: 100%; margin: 32px auto 0; } .page-credit-skip .p-skip-visual img { width: 100%; height: auto; } .page-credit-skip .p-skip-table { width: 100%; max-width: 840px; margin: 32px auto 0; } .page-credit-skip .p-skip-table .c-table__table { max-width: 100%; } .page-credit-skip .p-skip-table .c-table__th { padding: 16px; height: auto; } .page-credit-skip .p-skip-table .c-table__td { padding: 16px; height: auto; } .page-credit-skip .p-skip-table .c-table--horizontal .c-table__tbody .c-table__th { border-right: 1px solid #D9DDE3; } .page-credit-skip .p-skip-table--fee .c-table__th--col1 { width: 280px; } .page-credit-skip .p-skip-table--fee .c-table__td--col2 { width: 560px; } .page-credit-skip .p-skip-table--example .c-table__th--col1 { width: 420px; } .page-credit-skip .p-skip-table--example .c-table__td--col2 { width: 420px; } .page-credit-skip .p-skip-table--example .p-skip-table__header { width: 100%; border-right: 0; border-bottom: 1px solid #858B97; } .page-credit-skip .p-skip-table--example .c-table--horizontal tr:has(+ tr:is(:last-child)) .c-table__th { border-bottom: 1px solid #D9DDE3; } .page-credit-skip #skip-term-table { width: 840px; } .page-credit-skip #skip-term-table .col1 { width: 420px; } .page-credit-skip .p-skip-notes .c-noteList__item { padding-left: 16px; text-indent: -16px; } @media screen and (max-width: 767px) { .page-credit-skip .p-skip-visual { margin-top: 24px; } .page-credit-skip .p-skip-table { margin-top: 24px; } .page-credit-skip .p-skip-table .c-table__td, .page-credit-skip .p-skip-table .c-table__th { padding: 8px; } .page-credit-skip .p-skip-table--fee .c-table__th--col1, .page-credit-skip .p-skip-table--fee .c-table__td--col2 { width: 100%; } .page-credit-skip .p-skip-table--example .c-table__th--col1 { width: 120px; } .page-credit-skip .p-skip-table--example .c-table__td--col2 { width: calc(100% - 120px); } .page-credit-skip .p-skip-table--example .p-skip-table__header, .page-credit-skip .p-skip-table--example .p-skip-table__total { height: auto; min-height: 40px; } .page-credit-skip .p-skip-table--example .c-table--horizontal .c-table__tbody tr { display: table-row; } .page-credit-skip .p-skip-table--example .c-table--horizontal .c-table__td { display: table-cell; } .page-credit-skip .p-skip-table .c-table__th { padding: 8px; } .page-credit-skip #skip-term-table { width: 100%; } } .main_pic { margin: 4rem auto; } .main_box { display: flex; align-items: center; justify-content: center; } .main_pic-img { margin: 0 1rem; } .main_pic-txt { margin: 0 1rem; width: 410px; } .main_pic-txt h1 { text-align: center; } .main_pic-txt img { width: 100%; } .main_pic-txt img.logo { width: 80%; } .main_note { margin-top: 2rem; font-size: 1rem; } @media screen and (max-width: 768px) { .main_box { flex-direction: column; } .main_pic-img img { width: 150px; } .main_pic-txt { margin-top: 2rem; } .main_pic-txt { width: auto; } } /* =================== Margin =================== */ /* margin */ .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mt30 { margin-top: 30px; } .mt35 { margin-top: 35px; } .mt40 { margin-top: 40px; } .mt45 { margin-top: 45px; } .mt50 { margin-top: 50px; } .mb0 { margin-bottom: 0 !important; } .mb5 { margin-bottom: 5px; } .mb10 { margin-bottom: 10px !important; } .mb15 { margin-bottom: 15px !important; } .mb20 { margin-bottom: 20px; } .mb25 { margin-bottom: 25px; } .mb30 { margin-bottom: 30px !important; } .mb35 { margin-bottom: 35px; } .mb40 { margin-bottom: 40px; } .mb45 { margin-bottom: 45px; } .mb50 { margin-bottom: 50px !important; } .mb60 { margin-bottom: 60px !important; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .mr15 { margin-right: 15px; } .mr20 { margin-right: 20px; } .mr25 { margin-right: 25px; } .mr30 { margin-right: 30px; } .mr35 { margin-right: 35px; } .mr40 { margin-right: 40px; } .mr45 { margin-right: 45px; } .mr50 { margin-right: 50px; } .ml5 { margin-left: 5px; } .ml10 { margin-left: 10px; } .ml15 { margin-left: 15px; } .ml20 { margin-left: 20px; } .ml25 { margin-left: 25px; } .ml30 { margin-left: 30px; } .ml35 { margin-left: 35px; } .ml40 { margin-left: 40px; } .ml45 { margin-left: 45px; } .ml50 { margin-left: 50px; } .tac { text-align: center; } .taR { text-align: right; } .page-chargeornot .l-chargeornot__description .c-typo-l { max-width: 738px; margin-inline: auto; } .page-chargeornot .l-chargeornot .image-chargeornot01 { max-width: 526px; margin-top: 32px; margin-inline: auto; } .page-chargeornot .l-chargeornot .image-chargeornot02 { max-width: 806px; margin-top: 27px; margin-bottom: 26px; margin-inline: auto; } .page-chargeornot .l-chargeornot .image-chargeornot03 { max-width: 806px; margin-top: 25px; margin-bottom: 25px; margin-inline: auto; } .page-chargeornot .l-chargeornot .image-chargeornot04 { max-width: 806px; margin-top: 25px; margin-bottom: 25px; margin-inline: auto; } .page-chargeornot .l-chargeornot__warn { background-color: #F5F7FB; padding: 32px 64px; border-radius: 16px; } .page-chargeornot .l-chargeornot__warn .c-title-xl-bold > span { display: inline-flex; width: 22px; } .page-chargeornot .l-chargeornot__noti { background-color: #ffffff; border: 2px solid #D9DDE3; border-radius: 16px; padding: 24px 40px 16px; } .page-chargeornot .l-chargeornot__noti .c-title-xl-bold { border-color: #D9DDE3; } @media screen and (max-width: 767px) { .page-chargeornot .l-chargeornot .c-heading--sub .c-heading__title { padding: 0px 12px; } .page-chargeornot .l-chargeornot .image-chargeornot01 { margin-top: 24px; } .page-chargeornot .l-chargeornot .image-chargeornot02 { margin-top: 25px; margin-bottom: 25px; } .page-chargeornot .l-chargeornot .image-chargeornot03 { margin-top: 27px; margin-bottom: 27px; } .page-chargeornot .l-chargeornot .image-chargeornot04 { max-width: 806px; margin-top: 25px; margin-bottom: 25px; margin-inline: auto; } .page-chargeornot .l-chargeornot__warn { padding: 37px 16px 32px; } .page-chargeornot .l-chargeornot__warn .c-title-xl-bold { flex-direction: column; } .page-chargeornot .l-chargeornot__noti { padding: 24px 16px 22px; } } .page-3dSecure .l-3dSecure .image-3dSecure--01 { max-width: 15.2rem; margin: 0 auto 16px; } .page-3dSecure .l-3dSecure .image-3dSecure--02 { width: 100%; max-width: 104rem; } .page-3dSecure .l-3dSecure .c-slider .c-list-decimal li + li { margin-top: 24px; } .page-3dSecure .l-3dSecure .c-slider .c-slider__items { padding: 40px; } .page-3dSecure .l-3dSecure .c-slider.slider-02 .c-slider__items { padding: 40px 40px 72px; } .page-3dSecure .l-3dSecure__benefits-box:not(:first-child) { margin-top: 32px; } .page-3dSecure .l-3dSecure__benefits-icon { width: 68px; } .page-3dSecure .l-3dSecure__benefits-content { width: calc(100% - 88px); } .page-3dSecure .l-3dSecure__register { background-color: #f5f7fb; border-radius: 16px; padding: 32px; max-width: 50.8rem; width: 100%; margin: 32px auto 0; } .page-3dSecure .l-3dSecure__register .btn-wrap { margin-top: 26px; } .page-3dSecure .l-3dSecure__register-logo { width: 100%; max-width: 80px; margin: 0 auto; } .page-3dSecure .l-3dSecure__utilization-step { padding: 24px 40px; } .page-3dSecure .l-3dSecure__utilization-step + .l-3dSecure__utilization-step { margin-top: 32px; } .page-3dSecure .l-3dSecure__utilization-step .step-heading { gap: 32px; margin-bottom: 16px; padding-bottom: 6px; border-bottom: 1px solid #D9DDE3; } .page-3dSecure .l-3dSecure__utilization-step .step-heading .step-num { font-family: "Poppins", sans-serif; color: #C3A75E; font-weight: bold; font-size: 22px; line-height: 1.3636363636; display: inline-flex; align-items: center; gap: 4px; flex: 1 0 auto; } .page-3dSecure .l-3dSecure__utilization-step .step-heading .step-num > span { font-size: 32px; line-height: 1.03125; } .page-3dSecure .l-3dSecure__utilization-step .step-heading .c-title-xl-bold { flex: 1 1 100%; } .page-3dSecure .l-3dSecure__utilization-step .step-content { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-right: 68px; } .page-3dSecure .l-3dSecure__utilization-step .step-content__image { width: 585px; } .page-3dSecure .l-3dSecure__utilization-step .step-content__text { width: calc(100% - 595px); } .page-3dSecure .l-3dSecure__utilization-warn { background-color: #F5F7FB; padding: 32px 28px; border-radius: 16px; margin-top: 6px; } .page-3dSecure .l-3dSecure__utilization-warn .c-title-xl-bold > span { display: inline-flex; width: 22px; } @media screen and (min-width: 768px) and (max-width: 1080px) { .page-3dSecure .l-3dSecure__utilization-step .step-content { flex-direction: column; padding-right: 0; } .page-3dSecure .l-3dSecure__utilization-step .step-content__image { width: calc(100% - 46px); } .page-3dSecure .l-3dSecure__utilization-step .step-content__text { width: 100%; } } @media screen and (max-width: 767px) { .page-3dSecure .l-3dSecure .c-slider .c-list-decimal li + li { margin-top: 0; } .page-3dSecure .l-3dSecure .c-slider .c-slider__items { padding: 24px 16px; } .page-3dSecure .l-3dSecure .c-slider.slider-02 .c-slider__items { padding: 24px 16px; } .page-3dSecure .l-3dSecure__benefits-box:not(:first-child) { margin-top: 24px; } .page-3dSecure .l-3dSecure__benefits-box { flex-direction: column; align-items: center; gap: 16px; } .page-3dSecure .l-3dSecure__benefits-content { width: 100%; } .page-3dSecure .l-3dSecure__register { padding: 32px 16px; margin: 24px auto 0; } .page-3dSecure .l-3dSecure__register-logo { max-width: 60px; } .page-3dSecure .l-3dSecure__register .btn-wrap { margin: 23px auto 0; } .page-3dSecure .l-3dSecure__utilization-step { padding: 23px 16px; } .page-3dSecure .l-3dSecure__utilization-step + .l-3dSecure__utilization-step { margin-top: 24px; } .page-3dSecure .l-3dSecure__utilization-step .step-heading { margin-bottom: 24px; } .page-3dSecure .l-3dSecure__utilization-step .step-heading .step-num { font-size: 18px; line-height: 1.6666666667; } .page-3dSecure .l-3dSecure__utilization-step .step-heading .step-num > span { font-size: 32px; line-height: 0.84375; } .page-3dSecure .l-3dSecure__utilization-step .step-content { gap: 24px; margin-top: 24px; justify-content: center; padding-right: 0; } .page-3dSecure .l-3dSecure__utilization-step .step-content__image { width: calc(100% - 40px); } .page-3dSecure .l-3dSecure__utilization-step .step-content__text { width: 100%; } .page-3dSecure .l-3dSecure__utilization-warn { padding: 32px 16px; } .page-3dSecure .l-3dSecure__utilization-warn .c-title-xl-bold { flex-direction: column; } } .page-nanacocard .link-anchor__inner::before { content: none; } .page-nanacocard .c-btn--primary { padding-block: 14px; } .page-nanacocard .c-table__table { max-width: 100%; } @media screen and (max-width: 767px) { .page-nanacocard .c-table { width: 100%; } .page-nanacocard .c-table__table { table-layout: unset; } .page-nanacocard .c-table .c-table__title { min-height: auto; padding: 16px 8px; width: 160px; } } .page-guide-beginner .l-main { padding-bottom: 0; } .page-shopping .c-block--main .c-block__content { padding-bottom: 24px; } .page-shopping .c-block--main .c-block__content .wrap-btn { margin-top: 50px; } .page-shopping .c-block-list .c-block { margin-top: 0; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid #DEE2E8; } .page-shopping .c-block-list .c-block__content .wrap-btn { margin-top: 32px; } .page-shopping .wrap-btn--shopping { display: flex; gap: 32px; } @media screen and (max-width: 767px) { .page-shopping .wrap-btn--shopping { flex-direction: column; gap: 16px; } .page-shopping .c-block--main .c-block__content { padding-bottom: 0; } .page-shopping .c-block--main .c-block__content .wrap-btn { margin-top: 25px; } .page-shopping .c-block__ttl { margin-bottom: 12px; } .page-shopping .c-block-list .c-block { margin-bottom: 24px; padding-bottom: 24px; } .page-shopping .c-block-list .c-block__content .wrap-btn { margin-top: 24px; } } .page-credit-installments .c-table-wrapper { max-width: 980px; margin-inline: auto; } .page-credit-installments .c-table-wrapper.table-medium-width { max-width: 840px; margin: 0 auto; } .page-credit-installments .c-table-wrapper .c-table__table { max-width: calc(100% - 1px); } .page-credit-installments #installment-rate-table .col1 { width: 130px; padding-inline: 0; } .page-credit-installments #installment-rate-table .col2 { width: 70px; padding-inline: 0; } @media screen and (max-width: 767px) { .page-credit-installments #installment-rate-table { width: 760px; } } .page-credit-installments #term-mapping-table .col1 { width: 488px; } @media screen and (max-width: 767px) { .page-credit-installments #term-mapping-table { width: 100%; } .page-credit-installments #term-mapping-table .c-table__td { padding: 8px 8px; } } .p-credit-service-others-net__card { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; } .p-credit-service-others-net__card__item { width: 240px; } .p-credit-service-others-net__card__item-img { width: 100%; } .p-credit-service-others-net__card__item-img img { display: block; width: 100%; height: auto; } .p-credit-service-others-net__card__item-title { display: block; margin-top: 16px; font-size: 18px; line-height: 1.5; font-weight: 700; text-align: center; color: #333333; } @media screen and (max-width: 767px) { .p-credit-service-others-net__card { flex-direction: column; align-items: center; } } @media screen and (min-width: 768px) { .page-credit-service-others-net .c-list__item { line-height: 1.685; } } @media screen and (max-width: 767px) { .page-credit-service-others-net .c-pageTitle__inner { padding-inline: 16px; } } @media screen and (max-width: 767px) { .page-credit-service-others-net .c-loginTransition__col { padding: 41px 16px; } .page-credit-service-others-net .c-loginTransition__col .c-btn--large { min-width: 240px; } } @media screen and (max-width: 767px) { .page-credit-service-others-net .c-noticeBox { padding-block: 32px; } } .page-credit-use-howto .p-credit-use-howto__card { display: flex; flex-wrap: wrap; gap: 24px; } .page-credit-use-howto .p-credit-use-howto__card-item { width: calc(50% - 12px); } .page-credit-use-howto .p-credit-use-howto__card-item img { width: 100%; height: auto; display: block; } @media screen and (max-width: 767px) { .page-credit-use-howto .p-credit-use-howto__card { gap: 20px; } .page-credit-use-howto .p-credit-use-howto__card-item { width: 100%; } } @media screen and (max-width: 767px) { .page-credit-use-howto .c-noteList__item { font-size: 12px; line-height: 1.6666666667; } .page-credit-use-howto .c-txt.fix-leading-sp { line-height: 1.9285714286; } } @media screen and (max-width: 767px) { .page-howto-guide .c-pageTitle__inner { padding-inline: 16px; } } @media screen and (min-width: 768px) { .page-howto-guide .c-block__content.u-pb-fix-pc { padding-bottom: 26px; } } @media screen and (max-width: 767px) { .page-howto-guide .c-block__image { margin-top: 0; } } @media screen and (max-width: 767px) { .page-entry-top .c-block__ttl { margin-bottom: 12px; } .page-entry-top .c-block__image { border-radius: 15px; } } @media screen and (min-width: 768px) { .page-entry-top .c-flow { gap: 32px; } } @media screen and (min-width: 768px) { .page-entry-top .c-flow__item { padding: 22px 38px; } } @media screen and (max-width: 767px) { .page-entry-top .c-flow__item { gap: 22px; padding: 22px 14px; } .page-entry-top .c-flow__item .c-txt { font-size: 16px; line-height: 1.6875; } } .page-entry-top .c-flow__step { padding-bottom: 0; line-height: 1; align-items: center; } .page-entry-top .c-flow__step::after { content: none; } .page-entry-top .c-flow__head { padding-bottom: 7px; } .page-entry-top .credit-card-card { padding-top: 16px; } @media screen and (max-width: 767px) { .page-entry-top .credit-card-card { padding-top: 8px; } } .page-entry-top .credit-card-card-01 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .page-entry-top .credit-card-card-01__img { max-width: 304px; margin-inline: auto; } .page-entry-top .credit-card-card-01__description { margin-top: 16px; font-size: 18px; line-height: 1.5; font-weight: 700; color: #292929; text-align: center; } @media screen and (max-width: 767px) { .page-entry-top .credit-card-card-01 { grid-template-columns: repeat(1, 1fr); } .page-entry-top .credit-card-card-01__description { font-size: 16px; line-height: 1.5; } } .page-entry-top .credit-card-card-02 { display: flex; justify-content: flex-end; align-items: center; } .page-entry-top .credit-card-card-02__qr { display: flex; gap: 30px; } .page-entry-top .credit-card-card-02__img { max-width: 637px; margin-left: -100px; } @media screen and (max-width: 767px) { .page-entry-top .credit-card-card-02__links { margin-bottom: 24px; display: flex; justify-content: center; gap: 16px; } .page-entry-top .credit-card-card-02__links img { width: auto; height: 44px; } } @media screen and (max-width: 767px) { .page-entry-top .credit-card-card-02 { flex-direction: column; gap: 24px; } .page-entry-top .credit-card-card-02__img { margin-left: 0; max-width: 100%; } } .page-entry-top .credit-card-card-03__img { max-width: 400px; margin-inline: auto; } .page-entry-top .credit-card-card-04 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; } .page-entry-top .credit-card-card-04__description { margin-top: 16px; font-size: 16px; line-height: 1.6875; font-weight: 400; color: #000000; } .page-entry-top .credit-card-card-04__img { max-width: 448px; margin-inline: auto; } @media screen and (max-width: 767px) { .page-entry-top .credit-card-card-04 { grid-template-columns: repeat(1, 1fr); } .page-entry-top .credit-card-card-04__description { font-size: 14px; line-height: 1.7142857143; } } .page-entry-top .c-emoney-card { position: relative; border-radius: 20px; overflow: hidden; } .page-entry-top .c-emoney-card__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .page-entry-top .c-emoney-card__bg img { width: 100%; height: 100%; object-fit: cover; } .page-entry-top .c-emoney-card__body { position: relative; z-index: 2; width: 100%; } @media screen and (min-width: 768px) { .page-entry-top .c-emoney-card__body-inner { padding: 60px 62px 63px; min-height: 522px; display: flex; flex-direction: column; justify-content: center; } } .page-entry-top .c-emoney-card__content { width: 536px; } .page-entry-top .c-emoney-card__lead { font-size: 18px; line-height: 1.5; font-weight: 700; color: #333333; } .page-entry-top .c-emoney-card__ttl { font-size: 36px; line-height: 1.6111111111; font-weight: 700; color: #333333; margin-bottom: 16px; } .page-entry-top .c-emoney-card__txt { font-weight: 700; } .page-entry-top .c-emoney-card__btn { margin-top: 64px; } @media screen and (max-width: 767px) { .page-entry-top .c-emoney-card { border-radius: 15px; } .page-entry-top .c-emoney-card__body { padding-bottom: 0; } .page-entry-top .c-emoney-card__body-inner { aspect-ratio: 344/560; padding: 40px 16px 24px; display: flex; flex-direction: column; justify-content: space-between; } .page-entry-top .c-emoney-card__content { width: 100%; } .page-entry-top .c-emoney-card__lead { font-size: 16px; line-height: 1.5; } .page-entry-top .c-emoney-card__ttl { margin-bottom: 0; font-size: 24px; line-height: 1.5833333333; } .page-entry-top .c-emoney-card__txt { font-weight: 700; } .page-entry-top .c-emoney-card__btn { margin-top: 40px; gap: 24px; } } @media screen and (min-width: 768px) { .page-entry-top .c-block__content.fix-pb-pc { padding-bottom: 26px; } .page-entry-top .c-block .c-txt { margin-right: -0.4em; } } @media screen and (min-width: 768px) { .page-sitepolicy .c-table-sitepolicy { max-width: 840px; margin: 0 auto; } .page-sitepolicy .c-table-sitepolicy .--col-1 { width: 280px; } } @media screen and (max-width: 767px) { .page-sitepolicy .c-table-sitepolicy .c-table__tbody tr { display: table-row; width: 100%; } .page-sitepolicy .c-table-sitepolicy .c-table__tbody .c-table__th { width: auto; border: none; height: auto; padding: 8px 5px; } .page-sitepolicy .c-table-sitepolicy .c-table__tbody .c-table__td { display: table-cell; width: auto; padding: 8px 5px; } } .page-sitepolicy .c-list__item + .c-list__item { margin-top: 0; } .page-sitepolicy .c-list-number.u-mt-fix { margin-top: 37px; } @media screen and (max-width: 767px) { .page-sitepolicy .c-list-number.u-mt-fix { margin-top: 35px; } .page-sitepolicy .c-list-number.u-mt-fix li + li { margin-top: 10px; } } @media screen and (min-width: 768px) { .page-howto-menu-resignation .c-flow__body { gap: 24px; } } .page-howto-menu-resignation .c-flow__thumbnail { width: 310px; } @media screen and (max-width: 767px) { .page-howto-menu-resignation .c-flow__thumbnail { max-width: 100%; margin-inline: auto; } } .page-cashless .c-block__content { padding-bottom: 25px; } .page-cashless .c-block__content .wrap-btn { margin-top: 50px; } @media screen and (max-width: 767px) { .page-cashless .c-block__content { padding-bottom: 0; } .page-cashless .c-block__content .wrap-btn { margin-top: 25px; } .page-cashless .c-block__image--cs { width: 70%; margin-inline: auto; } .page-cashless .c-content + .c-content { margin-top: 36px; } .page-cashless .c-content + .c-content:last-child { margin-top: 40px; } .page-cashless .c-btn--medium { max-width: 240px; } .page-cashless .c-cardLink { flex-direction: column; } .page-cashless .c-cardLink__body { padding-top: 0; } } .page-cashless .main_pic-txt { margin: 0 auto; width: 80%; max-width: 400px; } .page-cashless .main_pic-txt h1 { text-align: center; } .page-cashless .main_pic-txt img.logo { width: 80%; max-width: 375px; } .page-cashless .main_pic-txt .main_note { margin-top: 20px; font-size: 10px; text-align: center; } .page-cashless .mod-anchor-ttl { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; width: 100%; margin: -10px -4px 0; } .page-cashless .mod-anchor-ttl li { display: inline-block; margin: 10px 4px 0; } .page-cashless .mod-anchor-ttl li a { position: relative; display: block; padding: 2px 18px 2px 28px; font-size: 14px; font-size: 1.4rem; border: 1px solid #2b589b; border-radius: 2px; text-decoration: none; color: #2b589b; } .page-cashless .mod-anchor-ttl li a::before { position: absolute; top: 50%; left: 10px; width: 5px; height: 3px; margin-top: -1px; background: url(../img/credit/cashless/ico_anchor_arrow_01.png) no-repeat; content: ""; } @media screen and (max-width: 767px) { .page-cashless .mod-anchor-ttl { display: block; width: auto; margin: 0 -15px; } .page-cashless .mod-anchor-ttl li { display: block; margin: 0; border-bottom: 1px solid #2b589b; border-left: none; border-right: none; } .page-cashless .mod-anchor-ttl li:first-child { border-top: 1px solid #2b589b; } .page-cashless .mod-anchor-ttl li a { padding: 12px 15px 12px 35px; font-size: 12px; font-size: 1.2rem; border-radius: 0; border: none; background-color: transparent !important; } .page-cashless .mod-anchor-ttl li a::before { left: 15px; width: 11px; height: 6px; margin-top: -3px; background: url(../img/credit/cashless/ico_anchor_arrow_01_sp.png) no-repeat; background-size: 11px 6px; } } .page-credit-sumarevo .imgage_sumarevo { max-width: 697px; margin: 0 auto 56px; } .page-credit-sumarevo .c-payment-example__pic { max-width: 686px; margin: 32px auto 0; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-payment-example__pic { max-width: 100%; margin: 24px auto 0; } } .page-credit-sumarevo .c-button-box { background-color: #F5F7FB; border-radius: 16px; text-align: center; padding: 32px 64px; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-button-box { padding: 60px 16px 32px; } } .page-credit-sumarevo .c-button-box .c-title-xl { position: relative; display: inline-block; } .page-credit-sumarevo .c-button-box .c-title-xl::before { content: ""; position: absolute; top: 50%; left: -30px; width: 22px; height: 20px; background: url(../img/credit/service/shopping/payment/icon-warning.png) no-repeat; background-size: contain; transform: translateY(-50%); } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-button-box .c-title-xl::before { top: -28px; left: 0; right: 0; margin: 0 auto; transform: translateY(0%); } } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__th { width: 280px; border-bottom: 1px solid #858B97; border-right: 1px solid #ffffff; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-payment-table .c-table__tbody tr { display: table-row; } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__th:first-child { width: 80px; } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__th:nth-child(2) { width: 132px; } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__th:last-child { width: 132px; } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__td { display: table-cell; width: 132px; } .page-credit-sumarevo .c-payment-table .c-table__tbody .c-table__td.--rows { width: 80px; } } .page-credit-sumarevo .c-slider__items { padding: 4rem; } .page-credit-sumarevo .c-slider__items-pic { width: 301px; margin: 24px auto 0; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-slider__items { padding: 24px 16px; margin-inline: 10px; } .page-credit-sumarevo .c-slider__items-pic { width: 100%; margin: 16px auto 0; } } .page-credit-sumarevo .c-bnr__wrap .c-bnr__image { max-width: 420px; flex-shrink: auto; } @media screen and (min-width: 768px) and (max-width: 1080px) { .page-credit-sumarevo .c-bnr__wrap .c-bnr__image { width: 35%; } } .page-credit-sumarevo .c-list__item { text-align: left; } .page-credit-sumarevo .c-payment-table3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 56px; } .page-credit-sumarevo .c-payment-table3 .c-payment-table__table { width: calc((100% - 56px) / 2); } .page-credit-sumarevo .c-payment-table3 .c-payment-table__thead .c-payment-table__th { border-bottom: 1px solid #858B97; } .page-credit-sumarevo .c-payment-table3 .c-payment-table__tbody tr:first-child .c-payment-table__row-head { height: auto; } .page-credit-sumarevo .c-payment-table3 .c-payment-table__tbody tr:first-child .c-payment-table__td { height: auto; } .page-credit-sumarevo .c-payment-table3 .c-payment-table__tbody tr:last-child .c-payment-table__td { height: auto; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-payment-table3 { flex-direction: column; gap: 8px; } .page-credit-sumarevo .c-payment-table3 .c-payment-table__table { width: 100%; } .page-credit-sumarevo .c-payment-table3 .c-table { width: 100%; } } .page-credit-sumarevo .c-btn--icon.icon-pdf { width: 24px; height: 24px; } .page-credit-sumarevo .c-btn--icon.icon-pdf::after { margin-left: -8px; margin-bottom: 0; } @media screen and (max-width: 767px) { .page-credit-sumarevo .c-btn--large { max-width: 100%; } } .page-applepay .l-applepay .main_pic { margin: 40px auto; } .page-applepay .l-applepay .main_pic-img { margin: 0 10px; } .page-applepay .l-applepay .main_pic-txt { margin: 0 10px; width: 425px; } .page-applepay .l-applepay .main_pic-txt h1 { text-align: center; } .page-applepay .l-applepay .main_pic-txt img { width: 100%; } .page-applepay .l-applepay .main_pic-txt img.logo { width: 80%; } .page-applepay .l-applepay .main_box { display: flex; align-items: center; justify-content: center; } .page-applepay .l-applepay .main_note { margin-top: 20px; font-size: 10px; } .page-applepay .l-applepay .main_note p { font-size: 11px; margin: 0 0 5px; } @media screen and (max-width: 767px) { .page-applepay .l-applepay .main_box { flex-direction: column; } .page-applepay .l-applepay .main_pic { margin: 20px auto; } .page-applepay .l-applepay .main_pic-txt { width: auto; margin-top: 20px; } } .page-creditCard .bg-lightYellow { width: 100%; background-color: #fffada; padding: 40px; margin-bottom: 50px; position: relative; text-align: center; } .page-creditCard .bg-lightYellow a { margin: 0 auto; position: relative; color: #ce2509; padding-right: 38px; } .page-creditCard .bg-lightYellow a::after { content: ""; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: block; width: 16px; height: 14px; background: url(../img/support/creditcard/ico_arrow_01.png) no-repeat; background-size: cover; transition: transform 0.3s ease; } .page-creditCard .bg-lightYellow .container-01 { width: 960px; margin: 0 auto; } .page-creditCard .bg-lightYellow .container-01::before { content: ""; width: 600px; height: 1px; background-color: #000; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); } .page-creditCard .bg-lightYellow .container-01 .s-nw { display: inline-block; margin: 0 auto; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09 { position: relative; padding-left: 44px; font-size: 20px; font-weight: bold; color: #ce2509; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09::before { content: ""; width: 30px; height: 26px; position: absolute; background: url(../img/support/creditcard/ico_danger_03.png) no-repeat; -webkit-background-size: 30px 26px; background-size: 30px 26px; top: 2px; left: 6px; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09:first-child { margin-bottom: 20px; } @media screen and (max-width: 767px) { .page-creditCard .bg-lightYellow { padding: 10px 5px; margin-bottom: 0; position: relative; } .page-creditCard .bg-lightYellow .container-01 { width: 100%; padding: 0 15px; } .page-creditCard .bg-lightYellow .container-01::before { width: 90%; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09 { padding-left: 26px; font-size: 15px; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09::before { content: ""; width: 22px; height: 19px; -webkit-background-size: 22px 19px; background-size: 22px 19px; top: 50%; transform: translateY(-50%); left: 2px; } .page-creditCard .bg-lightYellow .container-01 .ttl-cmn-09:first-child { margin-bottom: 15px; } } .page-creditCard .wrap-pic { max-width: 420px; width: 100%; margin: 32px auto 0; text-align: center; } @media screen and (max-width: 767px) { .page-creditCard .c-table { width: 100%; } .page-creditCard .wrap-pic { max-width: 100%; } .page-creditCard .wrap-pic._width01 { width: 213px; } } .page-contactless .l-contactless .img-touch-01 { max-width: 640px; margin: 0 auto; } .page-contactless .l-contactless .list-btn-link-01 { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: center; } .page-contactless .l-contactless .list-btn-link-01 > li { max-width: 460px; width: 100%; } .page-contactless .l-contactless .box-cmn-border-01 { margin-bottom: 40px; padding: 35px 30px; border: 1px solid #2b589b; border-radius: 4px; } .page-contactless .l-contactless .box-cmn-border-01:last-child { margin-bottom: 0; } .page-contactless .l-contactless .box-cmn-border-01 figure img { max-width: 250px; margin: 0 auto; } .page-contactless .l-contactless .box-touch-01 { margin: 0 auto; width: 100%; } .page-groupapp .p-groupapp .content-video { max-width: 740px; height: 415px; margin: 0 auto; } .page-groupapp .p-groupapp .content-video iframe { width: 100%; height: 100%; } .page-groupapp .p-groupapp .entry-logo { max-width: 88px; margin: 10px auto; } .page-groupapp .p-groupapp__slider .slick-list { border: solid 1px #DEE2E8; border-radius: 20px; overflow: hidden; } .page-groupapp .p-groupapp__slider .c-slider__items { border: none; border-radius: 0; padding: 35px 30px; gap: 40px; } .page-groupapp .p-groupapp__slider .c-slider__items figure { width: 480px; margin-inline: auto; } @media screen and (max-width: 767px) { .page-groupapp .p-groupapp .content-video { max-width: 100%; height: 190px; } .page-groupapp .p-groupapp .entry-logo { max-width: 82px; margin: 20px auto 10px; } .page-groupapp .p-groupapp__slider .c-slider__items { padding: 24px 16px; flex-direction: column-reverse; gap: 30px; } .page-groupapp .p-groupapp__slider .c-slider__items figure { width: 100%; } } @media screen and (min-width: 768px) { .page-autocharge .conversion-item__thumbnail { min-height: 120px; } } .page-autocharge .conversion-item__thumbnail--2 { display: flex; flex-direction: column; gap: 20px; } @media screen and (min-width: 768px) { .page-autocharge .conversion-item__thumbnail--2 { flex-direction: row; } .page-autocharge .conversion-item__thumbnail--2 picture { display: block; } .page-autocharge .conversion-item__thumbnail--2 picture:first-child { width: 100%; flex: 1; } .page-autocharge .conversion-item__thumbnail--2 img { width: auto; height: 165px; object-fit: cover; display: block; margin-inline: auto; } } @media screen and (max-width: 767px) { .page-autocharge .conversion-wrap + .conversion-wrap { margin-top: 20px; } } @media screen and (max-width: 767px) { .page-autocharge .conversion-wrap:first-child picture { width: 50%; margin-inline: auto; } } @media screen and (max-width: 767px) { .grid-wrapper .grid.grid--2-separate .grid-item:nth-child(even) { margin-left: 3%; } } @media screen and (max-width: 767px) { .grid-wrapper .grid.grid--sp-resolve__type2 .grid-item { margin-left: 0 !important; } } .conversion-wrap .conversion-item { width: inherit; } .grid-wrapper .grid { justify-content: center; } @media screen and (min-width: 768px) { .grid-wrapper .grid.grid--2-separate .grid-item:nth-child(1):is(:last-child) { min-width: 50%; max-width: 50%; } } .page-cashing .image-cashing { margin: 32px 0; } @media screen and (max-width: 767px) { .page-cashing .image-cashing { margin: 24px 0; } } .page-cashing .c-table.c-table--ver01 { margin: 24px 0; } .page-cashing .c-table.c-table--ver01 .c-table__table tr:first-child th { border-bottom: 1px solid #ffffff; } .page-cashing .c-table.c-table--ver01 .c-table__title { border: 1px solid #D9DDE3; width: 280px; } .page-cashing .c-table__table { max-width: 100%; overflow: hidden; } .page-cashing .c-noteList--disc .c-noteList__item { list-style-type: disc; } .page-cashing .c-slider__items { padding: 40px; } .page-cashing .c-voice { margin-top: 32px; } @media screen and (max-width: 767px) { .page-cashing .c-noticeBox__title { flex-direction: column; text-align: center; } .page-cashing .c-table.c-table--ver01 { width: 100%; padding-bottom: 0; } .page-cashing .c-table.c-table--ver01 .c-table__title { width: 90px; } .page-cashing .slick-track { width: 100% !important; } .page-cashing .c-slider__items { padding: 24px 16px; width: 100% !important; } } @media only screen and (min-width: 768px) { .p-sej-nanaco .step-anchor__number { flex-direction: column; width: 100px; padding: 0 10px; font-size: 24px; letter-spacing: 0.96px; } } .page-service-cashing .c-cashing-box { display: flex; justify-content: space-between; gap: 32px; } .page-service-cashing .c-cashing-box__content { flex: 1; } .page-service-cashing .c-cashing-box__image { max-width: 450px; width: 100%; } @media screen and (max-width: 767px) { .page-service-cashing .c-cashing-box { flex-direction: column; gap: 24px; } } .page-service-cashing .c-cashing-box-2 { border: solid 2px #DEE2E8; border-radius: 16px; padding: 40px; } .page-service-cashing .c-cashing-box-2__image { height: auto; width: 386px; max-width: 100%; margin-inline: auto; } .page-service-cashing .c-cashing-box-2__image img { width: 100%; height: 100%; object-fit: contain; } @media screen and (max-width: 767px) { .page-service-cashing .c-cashing-box-2 { padding: 24px 16px; } } .page-service-cashing .c-cashing-card { display: flex; margin-top: 32px; gap: 40px; } .page-service-cashing .c-cashing-card__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; max-width: 500px; width: 100%; border-radius: 16px; border: solid 2px #DEE2E8; padding: 24px; margin: 0 auto; } .page-service-cashing .c-cashing-card__title { font-size: 32px; line-height: 1.03125; font-weight: 700; color: #C3A75E; text-align: center; } .page-service-cashing .c-cashing-card__subtitle { font-size: 22px; line-height: 1.5; font-weight: 700; color: #000000; } .page-service-cashing .c-cashing-card__image { height: 139px; width: auto; } .page-service-cashing .c-cashing-card__image img { width: 100%; height: 100%; object-fit: contain; } .page-service-cashing .c-cashing-card__btn { align-self: stretch; text-align: center; } @media screen and (max-width: 767px) { .page-service-cashing .c-cashing-card { flex-direction: column; gap: 24px; } .page-service-cashing .c-cashing-card__title { font-size: 22px; line-height: 1.2272727273; } } .page-service-cashing .p-cashing-rule__item + .page-service-cashing .p-cashing-rule__item { margin-top: 64px; } .page-service-cashing .p-cashing-rule__heading { padding-bottom: 24px; } .page-service-cashing .p-cashing-rule__media { display: flex; align-items: flex-start; gap: 32px; } .page-service-cashing .p-cashing-rule__image { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 8px; } .page-service-cashing .p-cashing-rule__image img { width: 100%; height: auto; } .page-service-cashing .p-cashing-rule__image--paper { width: 68px; } .page-service-cashing .p-cashing-rule__image--box { width: 100px; } .page-service-cashing .p-cashing-rule__image--limit { width: 68px; } .page-service-cashing .p-cashing-rule__content { flex: 1; min-width: 0; } .page-service-cashing .p-cashing-rule__detail { margin-top: 32px; } .page-service-cashing .p-cashing-rule__detail .c-txt { margin-top: 16px; } .page-service-cashing .p-cashing-rule__detail .c-txt + .c-txt { margin-top: 8px; } .page-service-cashing .p-cashing-rule__notes { margin-top: 16px; } .page-service-cashing .p-cashing-rule__accordion { gap: 0; } .page-service-cashing .p-cashing-rule__accordion .c-accordion__item { border-bottom: 1px solid #D9DDE3; } .page-service-cashing .p-cashing-rule__accordion .c-accordion__header { padding: 16px 0; } .page-service-cashing .p-cashing-rule__accordion .c-accordion__answer { display: block; } .page-service-cashing .p-cashing-rule__accordion .c-accordion__a-text { padding-top: 0; } .page-service-cashing .p-cashing-rule__usage { font-weight: 400; } .page-service-cashing .c-table__table { max-width: 980px; } @media screen and (max-width: 767px) { .page-service-cashing .p-cashing-rule { margin-top: 0; } .page-service-cashing .p-cashing-rule__item + .page-service-cashing .p-cashing-rule__item { margin-top: 48px; } .page-service-cashing .p-cashing-rule__heading { padding-bottom: 16px; } .page-service-cashing .p-cashing-rule__media { flex-direction: column; align-items: center; gap: 20px; } .page-service-cashing .p-cashing-rule__image { margin-top: 0; } .page-service-cashing .p-cashing-rule__image--paper, .page-service-cashing .p-cashing-rule__image--limit { width: 60px; } .page-service-cashing .p-cashing-rule__image--box { width: 86px; } .page-service-cashing .p-cashing-rule__detail { margin-top: 24px; } .page-service-cashing .p-cashing-rule__detail .c-txt { margin-top: 12px; } .page-service-cashing .p-cashing-rule__accordion .c-accordion__answer { padding-top: 12px; } } /* howto */ #atm_pop div.inner div.howto { position: relative; width: 508px; margin: 15px 0 0 0; padding: 10px; border: 1px solid #F89848; } #atm_pop div.inner div.howto h4 { position: absolute; top: 10px; left: 10px; } #atm_pop div.inner div.howto p.attention { position: absolute; top: 50px; left: 10px; } #atm_pop div.inner div.howto ol, #atm_pop div.inner div.howto ul { padding: 0 0 0 146px; } #atm_pop div.inner div.howto ul li { margin-bottom: 10px; } #atm_pop div.inner div.howto ul.hedge { padding: 0; } #atm_pop div.inner div.howto ul.hedge li { margin-bottom: 0; } #atm_pop div.inner div.howto p.pict { padding: 10px 0 0 146px; } /* atm_pop ----------------------------*/ #atm_pop div.inner { width: 530px; padding: 16px 0; margin: 0 auto; line-height: 1.4; } #atm_pop div.inner p.mlead { margin: 0 0 12px 0; } #atm_pop div.inner p.slead { margin: 0; } #atm_pop div.inner em { color: #E10000; } #atm_pop div.inner p.charge { padding: 0 0 25px 12px; } #atm_pop div.inner h3 { width: 530px; padding: 0; margin: 0 0 15px 0; background: none; } #atm_pop div.inner ul.hedge li.pass { margin-bottom: 10px; font-size: 116%; } /* flow */ #atm_pop { margin: 0 auto; width: 550px; } #atm_pop div.inner #flow { margin-bottom: 0; } #atm_pop div.inner div.flow-chart { width: 530px; padding-bottom: 14px; margin: 15px 0 22px; background: url(/service/cashing/images/kaigaiatm/foreign_flow_bg.gif) repeat-y 0 0; } #atm_pop div.inner div.flow-chart dl { position: relative; } #atm_pop div.inner div.flow-chart dt { float: left; width: 147px; margin-right: 20px; } #atm_pop div.inner div.flow-chart dd { float: left; width: 354px; padding-bottom: 10px; } #atm_pop div.inner div.flow-chart dd span.country { color: #856D1D; } #atm_pop div.inner div.flow-chart dd p.flow05-input { width: 336px; margin: 10px 0; padding: 8px; border: 1px solid #7B641A; } /* clearfix --------------------------------------*/ #atm_pop div.inner div.flow-chart dl:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } *:first-child + html #atm_pop div.inner div.flow-chart dl { display: inline-block; } * html #atm_pop div.inner div.flow-chart dl { height: 1%; } .page-credit-change .p-credit-change .image-change01 { max-width: 698px; width: 100%; margin: 30px auto 42px; } .page-credit-change .p-credit-change .image-change02 { max-width: 768px; width: 100%; margin: 0 auto; } .page-credit-change .p-credit-change .c-table-wrapper { margin: 0 auto; max-width: 980px; } .page-credit-change .p-credit-change .c-table-wrapper.table-medium-width { max-width: 840px; margin: 0 auto; } .page-credit-change .p-credit-change .c-table__table .c-table__box { min-height: auto; } .page-credit-change .p-credit-change .c-table__table th, .page-credit-change .p-credit-change .c-table__table td { height: auto; min-height: 59px; padding: 15.5px 24px; align-content: center; } @media screen and (min-width: 768px) { .page-credit-change .p-credit-change .c-table--horizontal .c-table__table td { width: 76.19%; display: inline-block; } .page-credit-change .p-credit-change .c-table--horizontal .c-table__table th { width: 23.81%; display: inline-block; } } .page-credit-change .p-credit-change .c-table--ver01 .c-table__table th, .page-credit-change .p-credit-change .c-table--ver01 .c-table__table td { width: 24.4893333333%; } .page-credit-change .p-credit-change .c-table--ver01 .c-table__table th:first-child, .page-credit-change .p-credit-change .c-table--ver01 .c-table__table td:first-child { width: 26.532%; } @media screen and (max-width: 767px) { .page-credit-change .p-credit-change .image-change01 { max-width: 100%; margin: 23px auto 45px; } .page-credit-change .p-credit-change .image-change02 { max-width: 100%; } .page-credit-change .p-credit-change .c-table { padding-bottom: 4px; width: 100%; } .page-credit-change .p-credit-change .c-table-wrapper { max-width: 100%; } .page-credit-change .p-credit-change .c-table-wrapper.table-medium-width { max-width: 100%; } .page-credit-change .p-credit-change .c-table__table th, .page-credit-change .p-credit-change .c-table__table td { min-height: 40px; padding: 7px; } .page-credit-change .p-credit-change .c-table--horizontal .c-table__tbody .c-table__td { line-height: 1.71428; text-align: left; } .page-credit-change .p-credit-change .c-table--ver01 .c-table__table .tb-icon { width: 9px; height: 11px; display: block; background-image: url(/7card/usr/file/attachment/icon_arrow_07.svg); background-size: contain; background-repeat: no-repeat; background-position: center; margin: 4px auto 0; } .page-credit-change .p-credit-change .c-table--ver01 .c-table__table th, .page-credit-change .p-credit-change .c-table--ver01 .c-table__table td { width: 19.4893333333%; } .page-credit-change .p-credit-change .c-table--ver01 .c-table__table th:first-child, .page-credit-change .p-credit-change .c-table--ver01 .c-table__table td:first-child { width: 41.532%; } .page-credit-change .p-credit-change .c-slider { max-width: 100%; } } .page-creditcharge-change .c-tab-change .c-tab__button { flex-direction: column; } .page-creditcharge-change .c-tab-change .c-tab__button .c-title-x2s-bold { font-size: 12px; } .page-howto .l-howto .image-howto01 { max-width: 60rem; margin: 0 auto; } .page-howto .l-howto .image-howto02 { max-width: 84rem; margin: 0 auto; } .page-howto .l-howto .image-howto03 { max-width: 17.4rem; } .page-howto .l-howto .image-howto04 { max-width: 51.2rem; margin: 0 auto; } .page-howto .l-howto .c-table-wrapper.table-medium-width { max-width: 840px; margin: 0 auto; } .page-howto .l-howto figure.logo-jcb { width: 72px; margin: 0 auto; } @media screen and (min-width: 768px) { .page-howto .l-howto .c-table--horizontal .c-table__tbody .c-table__th, .page-howto .l-howto .c-table--horizontal .c-table__tbody .c-table__td { padding: 16px 24px; } .page-howto .l-howto .c-table--horizontal .c-table__tbody .c-table__th--col1 { width: 280px; } .page-howto .l-howto .c-table--horizontal .c-table__tbody .c-table__td--col2 { width: calc(100% - 280px); } } .page-howto .l-howto .c-table__box { min-height: auto; } .page-howto .l-howto .c-table__box .c-txt { line-height: 1.615; } @media screen and (min-width: 768px) { .page-howto .l-howto .c-table--time .c-table__td--col1, .page-howto .l-howto .c-table--time .c-table__th--col1 { width: 200px; min-width: 200px; } } .page-howto .l-howto .c-flow__step { padding-bottom: 0; align-items: center; } .page-howto .l-howto .c-flow__step::after { content: none; } .page-howto .l-howto .c-flow__item { padding: 24px 40px; } @media screen and (max-width: 767px) { .page-howto .l-howto .image-howto02 { margin: 40px auto 0; } .page-howto .l-howto .image-howto02 .c-scroll--content { width: 84rem; } .page-howto .l-howto .c-table--horizontal .c-table__tbody .c-table__td--col2 figure.logo-jcb { height: 112px; } .page-howto .l-howto .image-howto03 { margin: 0 auto; } .page-howto .l-howto .c-slider { max-width: 100%; } .page-howto .l-howto .c-table--time { width: 640px; } .page-howto .l-howto .c-table--time .c-table__td--col2, .page-howto .l-howto .c-table--time .c-table__th--col2 { width: 280px; } .page-howto .l-howto .c-table--time .c-table__td--col1, .page-howto .l-howto .c-table--time .c-table__th--col1 { width: 80px; min-width: 80px; } .page-howto .l-howto .c-table--time .c-table__text, .page-howto .l-howto .c-table--time .c-table__title { padding: 8px; } .page-howto .l-howto .c-table--time02 { width: 720px; } .page-howto .l-howto .c-table--time02 .c-table__text, .page-howto .l-howto .c-table--time02 .c-table__title { padding: 8px; } .page-howto .l-howto .c-table--time02 .c-table__text { width: 280px; } .page-howto .l-howto .c-table--time02 .c-table__tbody .c-table__title, .page-howto .l-howto .c-table--time02 .c-table__thead .c-table__title:first-child { width: 160px; } .page-howto .l-howto .c-flow__item { padding: 26px 16px; } .page-howto .l-howto .c-flow__text { font-size: 14px; line-height: 1.7142857143; } } .page-howto-confirm .points-image { width: 690px; margin: 0 auto; } @media screen and (max-width: 767px) { .page-howto-confirm .points-image { width: 100%; } } #atm_pop, #atm_pop div.inner, #atm_pop div.inner div.howto { max-width: 100%; } .l-sej_nanaco { font-family: "Noto Sans JP", sans-serif; } .grid-wrapper.heading-sej-dl { max-width: 850px; } .page-etc .c-ect-exam { border-bottom: 1px solid #DEE2E8; padding-bottom: 56px; } .page-etc .c-ect-exam .c-flow__item { justify-content: flex-start; } .page-etc .c-ect-exam .c-flow__item .c-flow__step { flex: 0 0 auto; } .page-etc .c-slider__items { padding: 40px; } @media screen and (max-width: 767px) { .page-etc .c-slider .slick-track { width: 100% !important; } .page-etc .c-slider__items { width: 100% !important; } } .page-app .c-block__lable { font-size: 16px; line-height: 1.6875; font-weight: bold; max-width: 160px; width: 100%; background-color: #C3A75E; border-radius: 20px; text-align: center; color: #ffffff; padding: 3px 0; margin-bottom: 16px; } @media screen and (max-width: 767px) { .page-app .c-block__lable { max-width: 116px; padding: 2px 0; } } @media screen and (max-width: 767px) { .page-app .c-slider._phone-sp .c-slider__items { height: 660px; } } .page-app .c-slider._phone .c-slider__items { height: 594px; } @media screen and (max-width: 767px) { .page-app .c-slider._phone .c-slider__items { height: 660px; } } .page-app .c-slider__items { padding: 40px; height: 562px; } @media screen and (max-width: 767px) { .page-app .c-slider__items { padding: 24px 16px; height: 568px; } } .page-app .c-slider__items-image { text-align: center; } .page-app .c-slider__items-image img { width: auto !important; } .page-app .c-slider__items-lable { font-size: 13px; line-height: 1.6153846154; font-weight: bold; color: #ffffff; margin-bottom: 8px; border-radius: 19px; padding: 1px 10px; display: inline-block; } .page-app .c-slider__items-lable.bg_purple { background-color: #B0ABD5; } .page-app .c-slider__items-lable.bg_red { background-color: #E99495; } .page-app .c-slider__items .text_link { text-decoration: underline; } .page-app .c-slider__items.bor_purple { border: 1px solid #B0ABD5; } .page-app .c-slider__items.bor_red { border: 1px solid #E99495; } .page-app .c-slider__items .color-blue-3 { color: #0000EE; } .page-app .c-slider .icon_blank { position: relative; padding-left: 24px; } .page-app .c-slider .icon_blank::before { content: ""; position: absolute; top: 50%; left: 0; width: 24px; height: 24px; background: url(../img/credit/use/app/icon_blank.png) no-repeat; background-size: cover; transform: translateY(-50%); } .page-auth .l-auth .image-auth01 { max-width: 107px; } .page-auth .l-auth .image-auth02 { max-width: 66px; } .page-auth .l-auth .image-auth03 { max-width: 168px; } .page-auth .l-auth .image-auth04 { max-width: 384px; margin: 0 auto; } @media screen and (max-width: 767px) { .page-auth .l-auth .image-auth01 { max-width: 90px; } .page-auth .l-auth .image-auth02 { max-width: 55px; } .page-auth .l-auth .image-auth03 { max-width: 142px; } .page-auth .l-auth .c-noticeBox { padding: 32px 16px; } .page-auth .l-auth .c-noticeBox__title { flex-direction: row; font-size: 22px; } } .page-gift .l-gift .image-gift01 { max-width: 250px; margin: 0 auto; } .page-gift .l-gift .image-gift02 { margin: 0 auto; } .page-gift .l-gift__boxIn__content { width: 508px; } .page-gift .l-gift__boxIn__image { flex: 1 auto; max-width: 508px; display: flex; align-items: center; justify-content: center; } @media screen and (max-width: 767px) { .page-gift .l-gift .image-gift01 { max-width: 168px; } .page-gift .l-gift__boxIn__content { width: 100%; } .page-gift .l-gift__boxIn__image { max-width: 100%; } .page-gift .l-gift .c-heading__title { padding: 0; } } .page-gift-charge .c-flow-chang .c-flow__item { max-width: 304px; } .page-gift-charge .c-spSlider .c-flow__item { width: 309px; } @media screen and (max-width: 767px) { .page-gift-charge .c-spSlider .c-flow__item { width: 290px; } } @media screen and (max-width: 767px) { .page-howto-gift .target-list .target-list__item { font-size: 12px; } } .page-howto-gift .l-cardLink-list .c-cardLink { padding: 32px 24px; border: 2px solid #D9DDE3; border-radius: 16px; filter: none; } .page-howto-gift .l-cardLink-list .c-cardLink__body { padding: 0; flex-direction: column; } .page-howto-gift .l-cardLink-list .c-cardLink__image img { width: auto; height: auto; } .page-howto-gift .c-loginTransition__col { align-items: initial; } .page-matomebarai .l-matomebarai .logo-img { width: 47px; } .page-matomebarai .l-matomebarai .c-table-full { max-width: 99%; } .page-matomebarai .l-matomebarai .c-table-full .c-table__thead .c-table__box { min-height: auto; } .page-matomebarai .l-matomebarai .c-table-full .c-table__text { min-width: 100px; min-height: auto; } @media screen and (max-width: 767px) { .page-matomebarai .l-matomebarai .logo-img { width: 24px; } } .c-myjcheck-timing { border: 1px solid #2b589b; border-radius: 4px; } .c-myjcheck-timing .img { padding: 20px; } .c-myjcheck-timing .img img { width: 100%; height: auto; display: block; } .c-myjcheck-timing .text { margin-top: 10px; width: max-content; margin-left: auto; } .c-myjcheck-timing__example { display: flex; align-items: center; gap: 20px; background-color: #e87722; color: #ffffff; padding: 20px 32px; margin-top: 24px; border-radius: 0 0 4px 4px; } .c-myjcheck-timing__example-label { font-size: 14px; white-space: nowrap; flex-shrink: 0; } .c-myjcheck-timing__example-title { font-size: 28px; font-weight: 700; white-space: nowrap; } .c-myjcheck-timing__example-arrow { position: relative; margin-left: 50px; padding-left: 80px; } .c-myjcheck-timing__example-arrow::before { content: ""; position: absolute; top: 50%; left: 0; width: 40px; height: 23px; margin-top: -12px; background: url(/7card/usr/file/attachment/img_arrow_right_01.png) 0 0 no-repeat; background-size: 40px 23px; } .c-myjcheck-timing__example-text { color: #ffffff; } @media screen and (max-width: 767px) { .c-myjcheck-timing .img { padding: 16px; } .c-myjcheck-timing .img img { width: 100%; } .c-myjcheck-timing .text { padding: 0 16px; margin-left: 0; margin-top: 12px; width: 100%; } .c-myjcheck-timing__example { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0; padding: 16px 20px; } .c-myjcheck-timing__example-label { font-size: 14px; font-weight: 700; } .c-myjcheck-timing__example-title { font-size: 14px; font-weight: 700; } .c-myjcheck-timing__example-arrow { display: none; } .c-myjcheck-timing__example-text { font-size: 14px; font-weight: 700; line-height: 1.5; } } .page-jcb .l-jcb .logo-jcb { width: 110px; } .page-jcb .l-jcb .list_dot { margin: 0 0 0 10px; } .page-jcb .l-jcb .list_dot > li { position: relative; padding: 0 0 0 16px; } .page-jcb .l-jcb .list_dot > li + li { margin-top: 8px; } .page-jcb .l-jcb .list_dot > li::before { content: ""; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; background-color: #2b5899; border-radius: 10px; transform: translate(50%, 0); } .page-credit-service-others-net-registration-jcb-pc .c-block { padding: 24px 40px; border-radius: 16px; border: solid 2px #DEE2E8; } .page-credit-service-others-net-registration-jcb-pc .c-block__image { width: 300px; } .page-credit-service-others-net-registration-jcb-pc .c-block .c-txt { font-weight: 400; } .page-search .c-find { margin: 0 auto; } .page-search .search-results--box { display: flex; justify-content: space-between; gap: 56px; } .page-search .search-results--box-info { width: calc((100% - 56px) / 2); } .page-search .search-results--box-info .info-ttl { background-color: #F5F7FB; padding: 16px 24px; border: 1px solid #D9DDE3; font-weight: bold; font-size: 16px; line-height: 1.6875; color: #333333; } .page-search .search-results--box-info .info-detail { padding: 22px 24px; border: 1px solid #DEE2E8; } @media screen and (max-width: 767px) { .page-search .search-results--box { flex-direction: column; gap: 24px; } .page-search .search-results--box-info { width: 100%; } .page-search .search-results--box-info .info-ttl { padding: 8px; font-size: 16px; line-height: 1.6875; } .page-search .search-results--box-info .info-detail { padding: 16px 8px; } } .page-search .pager-area { position: relative; } .page-search .pager-area .s-logo { width: 54px; position: absolute; right: 0; } .page-search .pager-area .c-pager { display: flex; gap: 32px; margin: auto; justify-content: center; align-items: center; } .page-search .pager-area .c-pager__next a, .page-search .pager-area .c-pager__prev a { position: relative; overflow: hidden; text-indent: -500%; border: 1px solid #9D843E; width: 32px; height: 32px; display: block; } .page-search .pager-area .c-pager__next a::before, .page-search .pager-area .c-pager__prev a::before { position: absolute; top: 0; right: 12px; bottom: 0; display: inline-block; width: 9px; height: 9px; margin: auto; content: ""; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); vertical-align: middle; border-top: 2px solid #9D843E; border-right: 2px solid #9D843E; } .page-search .pager-area .c-pager__prev a::before { transform: rotate(-135deg); right: 9px; } .page-search .pager-area .c-pager__list { display: flex; gap: 16px; flex-wrap: wrap; } .page-search .pager-area .c-pager__list li { display: block; letter-spacing: normal; } .page-search .pager-area .c-pager__list li.current a { color: #ffffff; border-color: #9D843E; background: #9D843E; } .page-search .pager-area .c-pager__list li a { font-family: "Poppins", sans-serif; display: block; font-size: 20px; line-height: 1.65; font-weight: 400; width: 32px; height: 32px; text-align: center; text-decoration: none; border: 1px solid #9D843E; color: #333333; } @media screen and (max-width: 767px) { .page-search .pager-area .s-logo { width: 54px; position: absolute; top: -34px; } .page-search .pager-area .c-pager { gap: 24px; margin-top: 64px; } .page-search .pager-area .c-pager__list { max-width: 224px; } } .page-search .box-ranking { display: flex; } .page-search .box-ranking dt { width: 240px; background-color: #F5F7FB; border: 1px solid #D9DDE3; font-weight: bold; font-size: 16px; line-height: 1.6875; color: #333333; padding: 19px 23px; } .page-search .box-ranking dd { width: calc(100% - 240px); padding: 16px 18px; border: 1px solid #DEE2E8; } .page-search .box-ranking dd .list-ranking { display: flex; justify-content: flex-start; align-items: center; gap: 16px; } .page-search .box-ranking dd .list-ranking li { display: flex; align-items: center; gap: 8px; } .page-search .box-ranking dd .list-ranking li b { font-family: "Poppins", sans-serif; width: 32px; height: 32px; font-weight: bold; font-size: 24px; line-height: 1.375; text-align: center; color: #ffffff; display: inline-block; } .page-search .box-ranking dd .list-ranking li b.bg-01 { background-color: #AE9C05; } .page-search .box-ranking dd .list-ranking li b.bg-02 { background-color: #70706F; } .page-search .box-ranking dd .list-ranking li b.bg-03 { background-color: #8D7B65; } .page-search .box-ranking dd .list-ranking li b.bg-04 { background-color: #999999; } .page-search .box-ranking dd .list-ranking li b.bg-05 { background-color: #999999; } @media screen and (max-width: 767px) { .page-search .box-ranking { flex-direction: column; } .page-search .box-ranking dt { width: 100%; padding: 8px; } .page-search .box-ranking dd { width: 100%; padding: 8px; } .page-search .box-ranking dd .list-ranking { flex-direction: column; align-items: flex-start; gap: 16px; } .page-search .box-ranking dd .list-ranking li { gap: 8px; } .page-search .box-ranking dd .list-ranking li b { font-family: "Poppins", sans-serif; width: 24px; height: 24px; font-size: 16px; line-height: 1.6; } } .page-search .c-result-title { border-bottom: 1px solid #D9DDE3; padding-bottom: 16px; } .page-search .item { margin-top: 24px; display: flex; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid #D9DDE3; } .page-search .thumbnail { width: 120px; } .page-search .item dl { width: calc(100% - 120px - 16px); } .page-search .item dl.full-w { width: 100%; } .page-search .item dl dt { color: #0000EE; font-weight: bold; font-size: 16px; line-height: 1.6875; margin-bottom: 16px; } .page-search .keyword, .page-search .isfw_keyword { display: inline-block; background-color: #FFF8C3; } .page-search .url { font-weight: 400; font-size: 12px; line-height: 1.6666666667; color: #0000EE; margin-top: 8px; } @media screen and (max-width: 767px) { .page-search .item { margin-top: 16px; gap: 8px; } .page-search .thumbnail { width: 86px; } .page-search .item dl { width: calc(100% - 86px - 8px); } .page-search .item dl.full-w { width: 100%; } .page-search .item dl dt { margin-bottom: 8px; font-size: 14px; line-height: 1.7142857143; } .page-search .url { margin-top: 4px; } } .page-loss .pink-line { background: linear-gradient(transparent 65%, #fecef7 65%); } .page-loss .c-noticeBox__image figure { max-width: 180px; margin: 0 auto; } .page-others .image-jcb { max-width: 126px; margin: 0 auto; } .page-phishing .pink-line { background: linear-gradient(transparent 65%, #fecef7 65%); } .page-phishing .c-noticeBox__image figure { max-width: 161px; margin: 0 auto; } .page-phishing .image-phishing01 { max-width: 665px; } .page-phishing .image-passkey01 { max-width: 200px; margin: 0 auto; } .page-phishing .phishing-disc > li { list-style: decimal; margin-left: 20px; } .page-phishing .passkey_title { color: #d450c1; font-size: 26px; } .page-phishing .c-table__table { max-width: 99%; } @media screen and (max-width: 767px) { .page-phishing .passkey_title { font-size: 22px; } } .page-sitemap .l-sitemap__inner { display: flex; gap: 56px; } .page-sitemap .l-sitemap__list { width: calc(50% - 28px); } .page-sitemap .l-sitemap__item:not(:first-child) { margin-top: 40px; } .page-sitemap .l-sitemap__item-title { display: flex; flex-direction: column; align-items: flex-start; } .page-sitemap .l-sitemap__item-title > a { display: inline-flex; align-items: center; font-size: 16px; line-height: 1.6875; font-weight: bold; color: #333333; transition: opacity 0.3s ease; } .page-sitemap .l-sitemap__item-title > a .targetLink { display: inline-block; width: 24px; height: 24px; margin-left: 8px; background: url(/7card/usr/file/attachment/icon_target.svg) center no-repeat; background-size: contain; transform: translateY(-3px); } @media (hover: hover) { .page-sitemap .l-sitemap__item-title > a:hover { opacity: 0.75; } } .page-sitemap .l-sitemap__item-subTitle { display: flex; flex-direction: column; align-items: flex-start; margin-top: 16px; } .page-sitemap .l-sitemap__item-subTitle > a { display: inline-block; position: relative; font-size: 16px; line-height: 1.6875; font-weight: 400; color: #333333; padding-left: 14px; transition: opacity 0.3s ease; } @media (hover: hover) { .page-sitemap .l-sitemap__item-subTitle > a:hover { opacity: 0.75; } } .page-sitemap .l-sitemap__item-subTitle > a::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background-color: #e99495; } .page-sitemap .l-sitemap__sublist { margin-top: 8px; padding-left: 14px; } .page-sitemap .l-sitemap__sublist-v2 { padding-left: 16px; margin-top: 8px; } .page-sitemap .l-sitemap__sublist-v2 > li + li { margin-top: 8px; } .page-sitemap .l-sitemap__sublist-v2 > li > a { font-size: 16px; line-height: 1.6875; font-weight: 400; color: #0000ee; display: inline-block; transition: opacity 0.3s ease; } @media (hover: hover) { .page-sitemap .l-sitemap__sublist-v2 > li > a:hover { opacity: 0.75; } } .page-sitemap .l-sitemap__sublist > li + li { margin-top: 8px; } .page-sitemap .l-sitemap__sublist > li > a { font-size: 16px; line-height: 1.6875; font-weight: 400; color: #0000ee; display: inline-block; transition: opacity 0.3s ease; } @media (hover: hover) { .page-sitemap .l-sitemap__sublist > li > a:hover { opacity: 0.75; } } @media screen and (max-width: 767px) { .page-sitemap .l-sitemap__inner { flex-direction: column; gap: 40px; } .page-sitemap .l-sitemap__list { width: 100%; } .page-sitemap .l-sitemap__item-title > a { font-size: 14px; line-height: 1.7142857143; } .page-sitemap .l-sitemap__item-subTitle { margin: 8px 0; } .page-sitemap .l-sitemap__item-subTitle > a { font-size: 14px; line-height: 1.7142857143; } .page-sitemap .l-sitemap__sublist { margin-top: 4px; padding-left: 14px; } .page-sitemap .l-sitemap__sublist + .l-sitemap__item-subTitle { margin-top: 16px; } .page-sitemap .l-sitemap__sublist-v2 { padding-left: 14px; margin-top: 4px; } .page-sitemap .l-sitemap__sublist-v2 > li + li { margin-top: 4px; } .page-sitemap .l-sitemap__sublist-v2 > li > a { font-size: 14px; line-height: 1.7142857143; } .page-sitemap .l-sitemap__sublist > li + li { margin-top: 8px; } .page-sitemap .l-sitemap__sublist > li > a { font-size: 14px; line-height: 1.7142857143; } } .page-credit-service-others-net-passkey .merit_list li { display: flex; align-items: center; gap: 20px; } .page-credit-service-others-net-passkey .merit_list li:not(:first-child) { margin-top: 20px; } .page-credit-service-others-net-passkey .merit_icon { max-width: 80px; } .page-credit-service-others-net-passkey .merit_icon img { width: 100%; height: auto; object-fit: cover; } .page-credit-service-others-net-passkey .myjcb_logo { max-width: 90px; margin: 0 auto; } .page-credit-service-others-net-passkey .c-textBox-images__image { max-width: 480px; width: 100%; height: auto; } .page-credit-service-others-net-passkey .slick-slide { display: flex; height: auto; } .page-credit-service-others-net-passkey .slick-list { height: 100%; display: flex; flex-direction: column; } .page-credit-service-others-net-passkey .slick-track { height: 100%; display: flex; } .page-credit-service-others-net-passkey .c-slider { width: 100%; } .page-credit-service-others-net-passkey .c-slider .slick-prev { left: 0; transform: translateX(-50%); } .page-credit-service-others-net-passkey .c-slider .slick-next { right: 0; transform: translateX(50%); } .page-credit-service-others-net-passkey .c-accordion__answer { position: relative; padding: 35px 30px; } .page-credit-service-others-net-passkey .pk_system_img { max-width: 487px; } @media screen and (max-width: 767px) { .page-credit-service-others-net-passkey .c-textBox-images__image { max-height: 100%; } } .page-furusato .box-furusato-01 { margin-bottom: 40px; padding: 32px 27px 40px; border: 2px solid #D9DDE3; border-radius: 16px; position: relative; } .page-furusato .box-content-furusato-01 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 20px; } .page-furusato .ttl-cmn-06 { margin-bottom: 5px; color: #333333; font-size: 27px; font-size: 2.7rem; font-weight: 700; text-align: center; } .page-furusato .s-ta-l { text-align: left !important; } .page-furusato .ttl-cmn-04 { color: #333333; font-size: 18px; font-size: 1.8rem; font-weight: 700; text-align: left; } .page-furusato .box-furusato-01 .text-01 { margin-bottom: 15px; } .page-furusato .box-furusato-01 .uncher { text-align: center; padding: 15px 0; font-size: 17px; font-size: 1.7rem; } .page-furusato .box-furusato-01 .uncher li { display: inline-block; padding: 0 5px; } .page-furusato .box-furusato-01 .uncher li a { font-weight: bold; color: #000; vertical-align: middle; text-decoration: underline; } .page-furusato .box-furusato-01 .uncher li a:before { content: ""; display: inline-block; width: 1em; height: 1em; background: #f5801c; border-radius: 50%; margin-right: 5px; position: relative; top: 2px; } .page-furusato .link-furusato-01 { text-align: center; margin-top: 15px; } .page-furusato .s-mb-05 { margin-bottom: 5px !important; } .page-furusato .is-opacity { opacity: 1; } .page-furusato .is-opacity:hover { opacity: 0.7; text-decoration: none; } .page-furusato .link-furusato-01 img { max-width: 100%; } .page-furusato .s-ta-c { text-align: center !important; } .page-furusato .ico-window-01 { font-size: 14px; color: #333333; display: inline-block; word-break: break-word; } .page-furusato .ico-window-01:after { position: relative; display: inline-block; width: 10px; height: 10px; margin-left: 5px; background: url(../img/credit/use/howto/furusato/ico_link_02.png) no-repeat; background-size: 10px 10px; content: ""; } .page-furusato .c-flow__body--sample { text-align: center; width: 100%; max-width: 512px; margin: 15px auto 0; } .page-furusato .c-flow__body--sample > .ttl { background: #2c579b; color: #fff; font-weight: bold; font-size: 17px; margin-bottom: 25px; padding: 5px; } .page-furusato .c-flow__body--sample .about { width: 100%; max-width: 512px; margin: 30px auto 0; background: #efefef; border-radius: 10px; padding: 15px; overflow: hidden; text-align: center; } .page-furusato .c-flow__body--sample .about_ttl { font-weight: bold; text-align: left; font-size: 17px; color: #333333; margin-bottom: 5px; } .page-furusato .c-flow__body--sample .about_note { display: inline-block; width: auto; float: left; } .page-furusato .c-flow__body--sample .about_note > li { position: relative; font-size: 12px; text-align: left; } .page-furusato .c-flow__body--sample .about_btn { font-size: 14px; background: #f3802f; padding: 5px; color: #fff; text-align: center; font-weight: bold; border-radius: 5px; display: inline-block; } .page-furusato .c-flow__body--sample .about_btn:hover { opacity: 1; text-decoration: underline; } .page-furusato .list-furusato-01 { border: 1px solid #D9DDE3; border-radius: 4px; display: flex; flex-wrap: wrap; } .page-furusato .list-furusato-01 li { width: 25%; padding: 20px 24px 30px; border-right: 1px solid #d4daea; } .page-furusato .ttl-cmn-06 { margin-bottom: 10px; color: #333333; font-size: 27px; font-weight: 700; text-align: center; } .page-furusato .list-furusato-01 li .image { margin-bottom: 20px; } .page-furusato .list-furusato-01 li .image img { width: 100%; } .page-furusato .otoku { text-align: center; } .page-furusato .ttl-cmn-02 { position: relative; margin-bottom: 25px; font-size: 28px; text-align: center; font-weight: normal; } .page-furusato .ttl-cmn-02 .fuki { display: block; width: 3em; height: 1em; line-height: 1; box-sizing: content-box; background: #2B589B; color: #fff; font-weight: bold; padding: 30px; border-radius: 50%; transform: rotate(-15deg); position: absolute; top: -30px; left: -20px; } .page-furusato .ttl-cmn-02 .fuki:after { content: ""; display: block; background: #2B589B; width: 10px; height: 10px; position: absolute; left: 50%; bottom: -3px; transform: rotate(-45deg); } .page-furusato .otoku .image img { width: auto; max-width: 80%; } @media screen and (min-width: 768px) and (max-width: 1080px) { .page-furusato .list-furusato-01 li { width: 50%; } .page-furusato .otoku h2 .fuki { position: relative; left: 0; top: 0; margin: 0 auto 5px; } } @media screen and (max-width: 767px) { .page-furusato .box-furusato-01 { margin-bottom: 40px; padding: 25px 15px 25px; } .page-furusato .box-content-furusato-01 { margin-bottom: 15px; } .page-furusato .box-content-furusato-01 .box-detail { width: calc(100% - 150px); } .page-furusato .box-furusato-01 .title-01 { font-size: 17px; letter-spacing: -0.2rem; line-height: 1.3; margin-bottom: 0; } .page-furusato .box-content-furusato-01 .box-image { width: 150px; } .page-furusato .box-content-furusato-01 img { width: 100%; } .page-furusato .ttl-cmn-04 { font-size: 14px; } .page-furusato .box-furusato-01 .text-01 { margin-bottom: 10px; } .page-furusato .box-furusato-01 .uncher { text-align: left; font-size: 14px; } .page-furusato .box-furusato-01 .uncher li { padding: 0; } .page-furusato .c-flow__body--sample > .ttl { font-size: 14px; } .page-furusato .c-flow__body--sample .about_ttl { font-size: 14px; } .page-furusato .c-flow__body--sample .about_note { font-size: 10px; } .page-furusato .c-flow__body--sample .about_note > li { position: relative; font-size: 12px; text-align: left; text-indent: -1em; padding-left: 1em; line-height: 1.6363636364; } .page-furusato .c-flow__body--sample .about_btn { float: none; margin: 10px auto 0; padding: 5px; width: 200px; } .page-furusato .list-furusato-01 li { width: 50%; padding: 19px 15px 21px; border-bottom: 1px solid #d4daea; } .page-furusato .list-furusato-01 li:nth-child(odd) { border-right: 1px solid #d4daea; } .page-furusato .list-furusato-01 li:nth-child(even) { border-right: none; } .page-furusato .list-furusato-01 li .title { margin-bottom: 2px; font-size: 17px; } .page-furusato .list-furusato-01 li .image { margin-bottom: 15px; padding: 0 11px; } .page-furusato .ttl-cmn-02 { margin-bottom: 10px; font-size: 17px; } .page-furusato .ttl-cmn-02 .fuki { position: relative; padding: 10px; left: 0; top: 0; margin: 0 auto 5px; } .page-furusato .ttl-cmn-02 .fuki:after { margin-left: -2px; } } .page-creditcharge .link-anchor__list { justify-content: center; } .page-creditcharge .conversion-wrap { align-items: flex-start; gap: 20px; } @media screen and (min-width: 768px) { .page-creditcharge .conversion-item__thumbnail { min-height: 120px; } } .page-creditcharge .conversion-item__thumbnail--3 { height: 165px; } .page-creditcharge .c-loginTransition__col { display: block; text-align: left; } .page-creditcharge .charge-topics { padding: 20px 30px 25px; background: #F5F7FB; border-radius: 20px; } .page-creditcharge .charge-topics .grid-item--title { color: #67C5EA; border-radius: 8px; border: 2px solid #67C5EA; font-weight: bold; max-width: 240px; padding: 12px 0; margin: 0 auto; } @media screen and (max-width: 767px) { .page-creditcharge .charge-topics { border-radius: 16px; } } .page-creditcharge .charge-topics--bg-blue { background-color: #DDF2FA; } .page-mailmagazine .mailmagazine { position: relative; z-index: 0; width: 100%; padding: 100px 0; background: url(/7card/usr/file/attachment/bg/bg_cloud.png) scroll; background-size: 100% auto; } .page-mailmagazine .mailmagazine-background--type01 { position: relative; max-width: 1100px; margin: -60px auto 0; padding-top: 60px; } .page-mailmagazine .mailmagazine-background--type01::before { position: absolute; z-index: -1; top: 8px; left: -4px; width: 160px; height: 68px; content: ""; background: url(/7card/usr/file/attachment/bg_rainbow.png) no-repeat scroll; background-size: 160px 68px; } .page-mailmagazine .mailmagazine-background--type03 { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto -100px; padding-bottom: 144px; } .page-mailmagazine .mailmagazine-background--type03::before { position: absolute; z-index: -1; bottom: -68px; left: 30px; width: calc(100% - 60px); height: 96px; content: ""; border-radius: 50%/48px; background: #ccdb86; } .page-mailmagazine .mailmagazine-background--type03::after { position: absolute; z-index: 0; bottom: 0; left: 108px; width: 134px; height: 222px; content: ""; background: url(/7card/usr/file/attachment/illust_nanaro.png) no-repeat scroll; background-size: 134px 222px; } .page-mailmagazine .mailmagazine .contents-wrap { max-width: 1100px; margin: 0 auto; padding: 0 10px; } .page-mailmagazine .mailmagazine .mailmagazine-content:first-child { margin-top: 0; } @media screen and (max-width: 767px) { .page-mailmagazine .mailmagazine-background--type03 { position: relative; overflow: hidden; max-width: 1100px; margin: 0 auto -100px; padding-bottom: 144px; } .page-mailmagazine .mailmagazine-background--type03::before { position: absolute; z-index: -1; bottom: -34px; left: 15px; width: calc(100% - 30px); height: 48px; content: ""; border-radius: 50%/30px; background: #ccdb86; } .page-mailmagazine .mailmagazine-background--type03::after { position: absolute; z-index: 0; bottom: 0; left: 54px; width: 67px; height: 111px; content: ""; background: url(/7card/usr/file/attachment/illust_nanaro.png) no-repeat scroll; background-size: 67px 111px; } } html .sug_list{ min-width: 200px !important; z-index: 999999 !important; } /*# sourceMappingURL=style_renew.css.map */