@charset "UTF-8"; /* morenaku fujisan LP 2.2025 CSS Document */ /*** 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%; vertical-align: bottom; } /* 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; } h1, h2, h3, h4, h4, h5, h6, b, strong, em { font-weight: 700; } input[type="checkbox"], input[type="radio"] { all: revert; } input, select { vertical-align: middle; } /*-- animation --*/ @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { animation: fadeIn 1s ease 0s 1 normal; background: rgba(255, 255, 255, 1); color: #333; font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, "sans-serif"; min-height: 100dvh; letter-spacing: .05em; font-feature-settings: "pwid"; } a { transition: opacity 0.3s, background 0.3s, color 0.3s; text-decoration: none; color: inherit; } @media (hover: hover) { .button:where(:any-link, : enabled, summary):hover { transition: opacity 0.3s, background 0.3s, color 0.3s } } /*-- common --*/ .overlay { display: none; } .recommend_btn { display: flex; justify-content: center; align-items: center; width: clamp(180px, calc(26000vw / 1920), 260px); height: clamp(38px, calc(4600vw / 1920), 46px); padding: .4em; background: #ffd700; border-radius: 100vmax; font-size: clamp(14px, calc(1600vw / 1920), 16px); &:hover { background: #FFE560; } } .recommend nav { display: none; } .sat { color: #39c; } .sun, .hol { color: tomato; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; } .obj_top { object-position: top; } .obj_bot { object-position: bottom; } .red { color: #f22; } /*-- page--*/ #wrapper { width: 100%; margin: auto; } header.global { height: 90px; height: clamp(70px, calc(9000vw / 1920), 90px); background: #00a0e9; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; @media(max-width: 480px) { height: 50px; } p.logo { flex-grow: 2; } p.logo a { display: block; width: clamp(220px, calc(33200vw / 1920), 332px); height: auto; margin: 0 0 0 min(2vw, 50px); img { object-fit: contain; } @media(max-width: 480px) { width: min(40vw, 150px); margin-left: 5%; } @media(max-width: 320px) { margin-left: 3%; } } .recommend_plan { width: clamp(180px, calc(26000vw / 1920), 260px); margin: 0; @media(max-width: 480px) { width: auto; max-width: 154px; } .recommend_btn { @media(max-width: 480px) { /*max-width: 120px;*/ width: auto; height: 32px; padding: 0 1em; line-height: 32px; font-size: 12px; } @media(max-width: 375px) { width: auto; font-size: 10px; } @media(max-width: 320px) { height: 28px; font-size: 8px; } } } .logo_jr { display: flex; justify-content: center; align-items: center; width: clamp(70px, calc(9000vw / 1920), 90px); height: clamp(70px, calc(9000vw / 1920), 90px); margin: 0 0 0 3%; background: #111; img { display: block; } @media(max-width: 480px) { width: 50px; height: 50px; padding: 10px; } } } /*-- /header.global --*/ .breadcrumb { margin: 20px 2vw; font-size: .875em; ul { li { display: inline; margin: 0 1em 0 0; line-height: 1.7; &:not(:first-child)::before { content: "|"; margin: 0 1em 0 0; } a:hover { text-decoration: underline; color: #007ACC; } } } @media(max-width: 480px) { margin: .74em 2vw; font-size: 11px; } } /*-- /.breadcrumb --*/ /*-- LP main --*/ main { width: 1080px; margin: auto; container-type: inline-size; p, li { line-height: 1.7; } section { margin: 80px auto; &:first-of-type { margin: 40px auto 80px; } div { margin: 60px auto; ul { li { margin-block: .2em; a { text-decoration: underline; color: #39d; word-break: break-all; } } } dl { margin-block: 2em 0; @media(max-width: 480px){ margin-block: 1em 0; } div { display: flex; margin-block: .5em; dt { display: block; flex-shrink: 0; margin-inline: -.5em 0; } dd { display: block; a { text-decoration: underline; color: #39d; word-break: break-all; } } @media(max-width: 480px){ display: block; margin-block: .3em; dt, dd{ display: inline-block; } } } } } &:nth-of-type(3), &:nth-of-type(4) { h3 { padding-bottom: .4em; border-bottom: 2px solid #ccc; } } } h1, h2 { display: flex; margin: 0 0 .5em; font-size: 1.6em; &:not(first-of-type) { margin: .5em 0; } &::before { content: "■"; margin-right: .3em; } } h3 { display: flex; margin: 0 0 .7em; font-size: 1.4em; &::before { content: "\02022"; margin-right: .5em; } } h4 { font-size: 1.2em; color: #f60000; a { height: 1.8em; position: relative; display: inline-block; overflow: hidden; &::after { content: ""; position: absolute; left: 0; bottom: 0; display: inline-block; width: 100%; height: 3px; background: darkorange; opacity: 0; translate: -100% 0; transition: opacity .4s, translate .4s; } } @media(any-hover: hover) { a:hover { &::after { left: 0; opacity: 1; translate: 0; transition: opacity .4s, translate .4s; } } } + p { margin: .3em 0 1em; text-align: left; a { color: #39d; &:hover { color: #007ACC; } &::before { content: "→"; display: inline-block; margin-right: .5em; } } } } p { margin: 1em auto; text-align: justify; } img { width: 100%; max-width: 100%; height: auto; } p.caption{ margin: 0; text-align: right; font-size: .875em; @media(max-width: 480px){ font-size: .625em; } } section.recommend_area { > div { margin-block: 30px; padding: 0 .5em 30px; border-bottom: 1px dotted #02A0E9; &:first-of-type { border-top: 1px dotted #02A0E9; padding-block: 30px; } } } section:has(.table_of_contents) { padding: 3em; background: #f0f0f0; } .table_of_contents { margin: auto; padding: 3em; border: 1px solid #aaa; h2, h3 { font-size: 1.2em; &::before { content: none; } } h4 { margin: 0 0 .3em; } ul { margin: 0 0 1.5em; padding-inline: 3em 0; @media(max-width: 480px){ padding-inline: 1em 0; ; } > li { position: relative; display: block; margin-block: .5em; padding-left: 1.3em; text-indent: -1.3em; &::before { content: ""; display: block; width: .7em; height: .7em; margin: 0 .5em .5em 0; background: #666; border-radius: calc(1px / 0); position: absolute; top: .6em; left: 0; translate: -1.3em 0; } ul { margin-inline: 0; padding-inline: .5em 0; li:before { background-color: transparent; border: 2px solid #666; } } } li a { text-decoration: none; color: inherit; } } p strong { font-size: 1.2em; } @media(any-hover: hover) { a:hover { text-decoration: underline; color: #007ACC; } } } /*-- /table-of-contents --*/ section#banner { ul { li { a { display: block; text-align: center; img { width: auto; transition: opacity .3s; } } @media(any-hover: hover) { a:hover img { opacity: .8; transition: opacity .3s; } } } } } @media(max-width: 1080px) { width: 100%; padding: 0 4%; h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } h4 { font-size: 1em; } p { font-size: .875em; } ul li, dt, dd { font-size: .875em; } .table_of_contents { ul { font-size: 1em; } } } @media(max-width: 480px) { margin: auto; padding: 4%; section { margin: 15% auto; &:first-of-type { margin: 5% auto 15%; } div { margin: 10% auto; } } h1 { font-size: 1.2em; } h2 { font-size: 1em; } h3 { font-size: .96em; } h4 { font-size: .8em; } p { font-size: .76em; } ul li, dt, dd { font-size: .76em; } section:has(.table_of_contents) { padding: 0; } .table_of_contents { padding: 1em; border: none; h2 { font-size: .94em; } h3 { font-size: .92em; } ul li { font-size: .875em; } } } } /*-- /main --*/ .return_list { margin: 80px auto; text-align: center; @media(max-width: 480px) { margin: 3em 0; } button { width: 100%; @media(max-width: 480px) { width: 90%; } } button a { position: relative; display: flex; justify-content: center; align-items: center; width: 450px; height: 80px; margin: auto; padding: 23px; border: 2px solid #004EA2; border-radius: 100vmax; font-size: 24px; color: #004EA2; @media(max-width: 480px) { width: 100%; height: auto; padding: .5em; font-size: 5vw; } @media(any-hover: hover) { &:hover { background-color: #D3FDF9; } } &::after { position: absolute; top: 50%; right: 10%; translate: 0 -50%; rotate: 45deg; content: ""; width: 14px; height: 14px; border-top: 1px solid #004EA2; border-right: 1px solid #004EA2; } } } /*-- /.return_list --*/ footer.global { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: space-between; margin: min(calc(5000vw / 1920), 50px) auto 0; padding: min(calc(7500vw / 1920), 75px) min(calc(10000vw / 1920), 100px) min(calc(9800vw / 1920), 98px); background: #00a0e9; @media(max-width: 480px) { flex-direction: column; padding: 40px 0 1em; } .logo { @media(max-width: 480px) { margin: auto; & img { margin: auto; } } & img { margin: 0 0 2em; width: 253px; } } .nav { @media(max-width: 480px) { margin: 0 auto 2em; } & ul { display: none; } } .copyright { width: 100%; font-size: .875em; color: #fff; @media(max-width: 480px) { text-align: center; font-size: .75em; } } } /*-- /footer.global --*/