_base.scss
@use "color" as c; @use "font" as t; //mean type // base layout variables $width_pc: 1536px; $sideMargin_pc: 80px; $width_sp: 768px; $sideMargin_sp: 20px; // tablet width $width_tab: 900; // margin size $margin_s: 40; $margin_m-: 60; $margin_m: 100; $margin_l: 180; // default hover style a:hover { opacity: 0.5; } // br @media screen and (max-width: 768px) { .br_onPC { display: none; } } @media screen and (min-width: 769px) { .br_onSP { display: none; } } @function get_vw($size, $viewport: 375) { $rate: calc(100 / $viewport); @return $rate * $size * 1vw; } @function calc_fz($size, $viewport: 375) { $rate: calc(100 / $viewport); @return clamp(14px, #{$rate * $size}vw, #{$size}px); } @mixin font-rem($size, $base: 16) { font-size: $size + px; font-size: calc($size / $base) + rem; } // mixins @mixin media-pc { @media screen and (min-width: calc($width_sp + 1px)) { @content; } } @mixin media-sp { @media screen and (max-width: $width_sp) { @content; } } @mixin media-tab { @media screen and (min-width: calc($width_sp + 1px)) and (max-width: calc($width_tab * 1px)) { @content; } } @mixin textLink_arrow { position: relative; &::after { content: ""; position: absolute; width: calc(100% - 100px); height: 10px; background-image: url(../img/common/textLink_arrow.svg); background-size: contain; background-repeat: no-repeat; left: get_vw(-5, 1536); bottom: 5px; @include media-sp { width: 100%; left: 0; bottom: -2px; } } } //fade in up .fade { opacity: 0; visibility: hidden; transform: translate(0, 20px); transition: 0.5s all ease-in; &.active { opacity: 1; visibility: visible; transform: translate(0, 0); } }
_font_scss
// Serif jp (Noto Serif Base) $SerifJP: "Noto Serif JP", serif; // SanSerif jp (Noto Sans Base) $SanSerifJP: "Noto Sans JP", sans-serif; // Serif en (Cinzel Base) $SerifEN: "Cinzel", serif; $SanSerifEN: "Raleway", sans-serif; // font mixins @mixin cinzel { font-family: $SerifEN; font-weight: 400; } @mixin raleway_regular { font-family: $SanSerifEN; font-weight: 400; } @mixin raleway_semibold { font-family: $SanSerifEN; font-weight: 600; } @mixin SerifJP_light { font-family: $SerifJP; font-weight: 300; } @mixin SerifJP_regular { font-family: $SerifJP; font-weight: 400; } @mixin SerifJP_medium { font-family: $SerifJP; font-weight: 500; } @mixin SerifJP_bold { font-family: $SerifJP; font-weight: 700; } @mixin SanSerifJP_light { font-family: $SanSerifJP; font-weight: 300; } @mixin SanSerifJP_regular { font-family: $SanSerifJP; font-weight: 400; } @mixin SanSerifJP_medium { font-family: $SanSerifJP; font-weight: 500; }