@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) 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 */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } /* ファイル名: _variables.scss 配置内容: テーマごとに変えたい変数を定義参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _function.scss 配置内容: 関数指定参考元: https://jajaaan.co.jp/css/responsive-font-size/ (font-sizeのvw指定) */ /* ファイル名: _mixins.scss 配置内容: コンポーネント化された使いまわし可能なスタイルの定義等参考元: https://itokoba.com/archives/2332#toc4 */ /* ファイル名: _base.scss 配置内容: HTML要素、標準スタイル、リセットCSS 接頭辞: なし参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ @font-face { font-family: "harenosora"; src: url("../font/Harenosora.woff") format("woff"); } :root { --ff-sans: "Noto Sans"; --ff-serif: "harenosora"; --col-text-reg: #414141; --col-gray: #D9D9D9; } body { font-family: var(--ff-serif); color: var(--col-text--reg); } a { color: var(--col-text--reg); opacity: 1; transition: all 0.3s ease-in-out; cursor: pointer; } a:hover, a:active, a:focus { color: var(--col-text--reg); opacity: 0.8; text-decoration: none; } button { background: none; border: none; } /* ファイル名: _layout.scss 配置内容: ヘッダー、メインエリアなどの大きなレイアウトを形成する要素。あくまでコンテンツが入る「枠」を定義するだけ。レイアウトに関わるスタイリング（gridやflex、width、margin、padding、float、positionなど）接頭辞: ly_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .ly_size { min-width: 1200px; max-width: 1600px; margin-left: auto; margin-right: auto; } /* ファイル名: _module.scss 配置内容: 再利用性のあるコンテンツ、もしくはひとまとまりのブロック接頭辞: なし命名規則: BEM Block：どこでも使い回せるパーツ Element：Blockの構成要素、Blockの中でしか機能しないもの Modifier：BlockやElementの修飾を定義するもの記法: Elementはアンダースコア2つ(__)、Modifierはハイフン2つ(--)で連結 block block__element block__element--modifier block--modifier block--modifier__element 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .front { position: relative; } .front_logo { position: fixed; top: 30px; right: 30px; display: block; width: 100px; z-index: 4; } .front_nav { position: fixed; left: 5%; display: flex; flex-flow: column nowrap; margin-top: min(12vw, 12vh); height: calc(100vh - min(12vw, 12vh)); font-size: min(24px, 1.2vw); letter-spacing: 0.15em; } .front_nav a { transition: all 0.3s ease-in-out; } .front_nav a:hover { padding-left: 0.3em; cursor: pointer; } .front_heading { position: fixed; bottom: min(4.5vw, 6vh); left: 5%; font-size: min(60px, 2.5vw); } .front_heading__catch { font-size: 0.5em; margin-top: 0.5em; } .front_container { width: 70%; margin: 0 0 0 auto; padding-top: min(18vw, 18vh); } .front_items { position: relative; font-size: min(21px, 1.25vw); padding: 10% 5%; } .front_items__heading { font-size: 1.5em; } .front_items.has_line-bg { background: linear-gradient(180deg, #fff 0%, #fff 20%, var(--col-gray) 20%); padding: 5% 5% 10% 5%; } .front_items.has_line-bg:after { content: ""; background-image: url("../images/top/ill_bg_line.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; display: block; z-index: 1; } .front_items .el_bubble { position: absolute; bottom: 10%; left: 40%; transform: translateX(-50%); width: 15%; } .front_items__inner { position: relative; display: grid; grid-template-columns: 35% 1fr; align-items: flex-end; z-index: 2; } .front_items__inner hgroup { padding-right: 1em; } .front_items__inner hgroup > * + * { margin-top: 1em; } .el_wave { position: fixed; top: 55%; left: 25vw; transform: translateY(-50%); width: min(30px, 2%); } .bl_nav-list > * + * { margin-top: 1em; } .el_front_link { position: relative; display: flex; align-items: center; width: -moz-fit-content; width: fit-content; margin-top: 4em; margin-left: auto; margin-right: 1.5em; font-size: 1.2em; text-align: right; z-index: 2; border-bottom: 1px solid transparent; } .el_front_link:hover { border-bottom: 1px solid var(--col-text-reg); padding-left: 0.3em; transform: translate3d(0.3em, 0, 0); } .bl_footer { display: flex; flex-flow: row nowrap; justify-content: center; gap: 2rem; padding: 1rem 0; background: var(--col-text-reg); color: #fff; font-family: var(--ff-sans); font-weight: 400; } .bl_footer a { text-decoration: underline; text-underline-offset: 0.3em; } /* ファイル名: _unique.scss 配置内容: ある特定の場所でしか使用していないスタイル ※どの画面で使用しているかそれぞれコメントを残す接頭辞: un_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ /* ファイル名: _helper.scss 配置内容: margin、padding、colorある部分だけを調節したいとなった場合に適用するスタイル接頭辞: mt_, mb_, pt_, pb_, cl_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .hp_pre a { opacity: 0.6; pointer-events: none; } .hp_pre a:after { content: "(準備中)"; display: inline-block; font-size: 0.8em; } .bg-gray { background: var(--col-gray); } /* ファイル名: _program.scss 配置内容: JSなどでHTML要素を取得する際にセレクタとなるクラス、状態を管理するクラスなど接頭辞: js_ または is_ 参考元: https://qiita.com/kum44/items/117b32a4e5bdf102b1cf */ .js_carousel .swiper-wrapper { transition-timing-function: linear; }