@charset "UTF-8"; /** * * common.scss * */ /* ---------------------------------------------------------------------------------------------------- Foundation ---------------------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------ size ------------------------------------------------------------ */ :root { /* ---------------------------------------- window size ---------------------------------------- */ --vw: calc( 100vw / 100 ); --vh: calc( 100vh / 100 ); --ww: calc( var( --vw ) * 100 ); --wh: calc( var( --vh ) * 100 ); /* ---------------------------------------- ブレイクポイント JavaScriptでは取得して使用する変数 ハンバーガーメニューなどブレイクポイントで発動する関数などで使用する ※cssのメディアクエリでは使用できない ---------------------------------------- */ /* ---------- min-width mqUp ---------- */ --mqUp-3xs: 321; --mqUp-2xs: 391; --mqUp-xs: 431; --mqUp-sm: 561; --mqUp-md: 768; --mqUp-lg: 1024; --mqUp-xl: 1281; --mqUp-2xl: 1441; --mqUp-3xl: 1728; --mqUp-fhd: 1921; --mqUp-2k: 2049; --mqUp-wqhd: 2561; /* ---------- max-width mqDown ---------- */ --mqDown-3xs: 320; --mqDown-2xs: 390; --mqDown-xs: 430; --mqDown-sm: 560; --mqDown-md: 767; --mqDown-lg: 1023; --mqDown-xl: 1280; --mqDown-2xl: 1440; --mqDown-3xl: 1727; --mqDown-fhd: 1920; --mqDown-2k: 2048; --mqDown-wqhd: 2560; /* ---------------------------------------- インナーの横幅 デフォルトはデザインサイズを入れる ---------------------------------------- */ /* ---------------------------------------- コンテンツの横幅 ---------------------------------------- */ --contents: calc( var(--ww) - var(--outside) * 2 ); --contents-lg: calc( var(--ww) - var(--outside-sm) * 2 ); --contents-sm: calc( var(--ww) - var(--outside-lg) * 2 ); --contents-sm2: calc( var(--ww) - var(--outside-lg2) * 2 ); --grid1: calc( var(--grid) * 1 + var(--gap) * 0 ); --grid2: calc( var(--grid) * 2 + var(--gap) * 1 ); --grid3: calc( var(--grid) * 3 + var(--gap) * 2 ); --grid4: calc( var(--grid) * 4 + var(--gap) * 3 ); --grid5: calc( var(--grid) * 5 + var(--gap) * 4 ); --grid6: calc( var(--grid) * 6 + var(--gap) * 5 ); --grid7: calc( var(--grid) * 7 + var(--gap) * 6 ); --grid8: calc( var(--grid) * 8 + var(--gap) * 7 ); --grid9: calc( var(--grid) * 9 + var(--gap) * 8 ); --grid10: calc( var(--grid) * 10 + var(--gap) * 9 ); --grid11: calc( var(--grid) * 11 + var(--gap) * 10 ); --grid12: calc( var(--grid) * 12 + var(--gap) * 11 ); /* ---------------------------------------- sticky ---------------------------------------- */ --sticky-top: 12rem ; /* ---------------------------------------- layout ---------------------------------------- */ /* ---------------------------------------- アイコン ---------------------------------------- */ --icon-loading: 3rem ; } @supports (height: 100svw) { :root { --vw: calc( 100svw / 100 ); } } @supports (height: 100svh) { :root { --vh: calc( 100svh / 100 ); } } @media screen and (min-width: 1024px) { :root { --min-wh: 76.8rem ; --max-wh: var( --wh ); } } @media screen and (max-width: 1023px) and (min-width: 561px) { :root { --min-wh: 76.8rem ; --max-wh: 102.4rem ; } } @media screen and (max-width: 560px) { :root { --min-wh: 42rem ; --max-wh: 89.6rem ; } } @media screen and (min-width: 1024px) { :root { --base-width: 1728; } } @media screen and (max-width: 1023px) { :root { --base-width: 390; } } @media screen and (min-width: 1024px) { :root { --outside: 3.47222vw; --outside-sm: 1.15741vw; --outside-lg: 4.62963vw; --outside-lg2: 5.78704vw; --grid: 6.71296vw; --gap: 1.15741vw; } } @media screen and (max-width: 1023px) { :root { --outside: 5.12821vw; --outside-sm: 2.5641vw; --outside-lg: 7.69231vw; --outside-lg2: var( --outside-lg ); --grid: 5.12821vw; --gap: 2.5641vw; } } @media screen and (min-width: 1024px) { :root { --header-height: 10rem ; } } @media screen and (max-width: 1023px) { :root { --header-height: 8rem ; } } /* ------------------------------------------------------------ math 数学的変数の設定 ------------------------------------------------------------ */ :root { --root2: 1.41421; } /* ------------------------------------------------------------ anchor-padding ------------------------------------------------------------ */ :root { --anchor-padding: 0.3rem ; --anchor-padding-lg: 1rem ; } /* ------------------------------------------------------------ color ------------------------------------------------------------ */ :root { /* ------------------------------------------------------------ palette パレットは、同じレイアウトで色のみ違う場合に使用する変数 主にテーマクラスとして使用する そうでないものは、--color変数で扱う なので、パレットの色とメインカラーの色は 仮に同じ色だったとしても、用途が違う場合は別々に記述する ------------------------------------------------------------ */ --pallet-transp: rgba(0,0,0,0); /* ---------------------------------------- chromatic ---------------------------------------- */ /* ------------------------------------------------------------ filter filterで白やグレーにする場合の変数 ------------------------------------------------------------ */ /* ------------------------------------------------------------ hover hoverの不透明度や拡大率の変数 ------------------------------------------------------------ */ --hover-opacity: 0.35; --hover-scale: scale(1.1); --hover-scale2: scale(2.8); --hover-scale3: scale(1.04); --hover-scale4: scale(0.8); /* ------------------------------------------------------------ state current,disabledの不透明度の変数 ------------------------------------------------------------ */ --current-opacity: 0.3; --disabled-opacity: 0.3; /* ------------------------------------------------------------ color ------------------------------------------------------------ */ --color-main: #00A95F; --color-main2: #00C871; --color-main3: #5BA96C; --color-main4: #20CF83; --color-accent: #005FAC; --color-accent2: #005BAC; --color-accent3: #0082E3; --color-accent4: #004697; --color-accent5: #0070D3; --color-hover: var( --color-accent ); --color-hover-bg: rgba(255,255,255,.085); --color-hover-bg2: rgba(0,0,0,.035); --color-bg: #FFFFFF; --color-bg2: #000000; --color-bg3: #F5F5F5; --color-bg4: rgba(0,0,0,.07); --color-bg5: rgba(0, 70, 151, 0.06); --color-bg6: #383838; --color-bg7: rgba(0, 0, 0, 0.08); --color-bg8: rgba(255, 255, 255, 0.6); --color-bg9: rgba(255, 255, 255, 0.3); --color-bg10: #DAECFA; --color-bg11: rgba(255, 255, 255, 0.7); --color-bg12: #E0E4DE; --color-bg13: #333333; --color-bg14: #DFF2F6; --color-bg15: rgba(0, 0, 0, var(--scroll-opacity)); --color-bg16: rgba(0, 95, 172, 0.1); --color-bg17: rgba(0, 70, 151, 0.1); --color-backdrop: #7BB9DA; --color-backdrop-gradation: var( --pallet-transp ); --color-backdrop2: #838B7F; --color-backdrop2-gradation: linear-gradient(180deg, rgba(131, 139, 127, 0.00) 0%, #838B7F 100%); --color-backdrop3: #1E322F; --color-backdrop3-gradation: linear-gradient(180deg, rgba(30, 50, 47, 0.00) 0%, #1E322F 100%); --color-backdrop4: #809694; --color-backdrop4-gradation: linear-gradient(180deg, rgba(128, 150, 148, 0.00) 0%, #809694 100%); --color-backdrop5: #D5DAD4; --color-backdrop5-gradation: linear-gradient(180deg, rgba(213, 218, 212, 0.00) 0%, #D5DAD4 100%); --color-line: rgba(0, 0, 0, 0.15); --color-line2: rgba(0, 0, 0, 0.4); --color-line3: black; --color-line4: rgba(0, 0, 0, 0.05); --color-line5: rgba(0, 0, 0, 0.07); --color-line6: rgba(255, 255, 255, 0.4); --color-txt: #000000; --color-txt2: #FFFFFF; --color-txt3: rgba(0,0,0,.6); --color-overlay: rgba(0,0,0,.3); --overlay-blur: blur(15px); --overlay-blur2: blur(10px); --color-shadow: rgba(0,0,0,.25); --color-gradation: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); --color-gradation2: linear-gradient(180deg, #0070D3 0%, #00C871 100%); --color-gradation3: linear-gradient(180deg, #00C871 0%, #005FAC 100%); --color-gradation4: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); --color-gradation5: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); --color-gradation6: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 100%); --color-gradation7: linear-gradient(180deg, #B0E1FF 0%, #E2FFFC 100%); --color-gradation8: linear-gradient(180deg, #00AFCC 0%, #FFF 100%); --color-gradation9: linear-gradient(180deg, #E2D054 0%, #FFF 100%); --color-gradation10: linear-gradient(180deg, #5BA96C 0%, #005FAC 100%); --color-gradation11: linear-gradient(180deg, rgba(0,112,211,0.85) 0%, rgba(0,200,113,0.85) 100%); --color-gradation12: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,var(--scroll-opacity)) 100%); --color-gradation13: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%); --color-comic: #F07F7F; --color-infrastructure: #36D14A; --color-electrical: #FF826C; --color-solution: #008DFF; --color-rental: #F0AC00; --color-security: #AD42F4; /* ---------------------------------------- ui ---------------------------------------- */ /* ---------- input ---------- */ --color-input-bg: rgba(0, 0, 0, 0.07); --color-input-bg-hover: rgba(0, 0, 0, 0.1); --color-input-bg-focus: rgba(0, 0, 0, 0.1); --color-input-bg-done: #F0F0F0; --color-input-bg-check: #F5F5F5; --color-input-arrow: #000000; --color-input-placeholder: rgba(0, 0, 0, 0.4); /* ---------- state ---------- */ --color-required: #FF0000; --color-error: #FF0000; --color-error-bg: rgba(255, 0, 0, 0.075); } /* ------------------------------------------------------------ theme ------------------------------------------------------------ */ .theme-infrastructure { --theme-color: var( --color-infrastructure ); } .theme-electrical { --theme-color: var( --color-electrical ); } .theme-solution { --theme-color: var( --color-solution ); } .theme-rental { --theme-color: var( --color-rental ); } .theme-security { --theme-color: var( --color-security ); } /* ------------------------------------------------------------ ease ------------------------------------------------------------ */ :root { /* ------------------------------------------------------------ ease ------------------------------------------------------------ */ --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94 ); --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1); --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1); --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1); --easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1); --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55 ); --ease-level0: var( --easeOutQuad ); --ease-level1: var( --easeOutCubic ); --ease-level2: var( --easeOutQuint ); --ease-heavy1: var( --easeInOutQuint ); --ease-coin: var( --easeInOutBack ); --ease-scale: var( --easeInOutBack ); /* ------------------------------------------------------------ transition ------------------------------------------------------------ */ /* ---------- hover ---------- */ --transition-hover: 410ms var( --ease-level1 ); --transition-hover-slow: 700ms var( --ease-level1 ); --animation-hover: 600ms var( --ease-level2 ); /* ---------- ui ---------- */ --transition-sitemap: 650ms var( --ease-level2 ); --transition-gnav: 500ms var( --ease-level1 ); --transition-gnav-height: 300ms var( --ease-level1 ); --transition-slider: 1200ms var( --ease-level2 ); --transition-carousel: var( --ease-level2 ); --transition-dots: 500ms var( --ease-level2 ); --transition-accordion: 500ms var( --ease-heavy1 ); --transition-modal: 600ms var( --ease-level1 ); --transition-overlay: 600ms var( --ease-level1 ); --transition-icon: 200ms var( --ease-level1 ); --transition-input: 200ms var( --ease-level1 ); /* ---------- effect ---------- */ --transition-fade: 1300ms var( --ease-level1 ); --transition-fadeup: 750ms var( --ease-level1 ); --transition-fadeup2: 1500ms var( --ease-level1 ); --transition-splittext: 1500ms var( --ease-level1 ); --transition-scale: 800ms var( --ease-scale ); /* ------------------------------------------------------------ animation ------------------------------------------------------------ */ --animation-slider-move: 6000ms linear forwards; --animation-fluffy: 15000ms steps(1) infinite; --animation-fluffy2: 20000ms steps(1) infinite; --animation-fluffy3: 22000ms steps(1) infinite; /* ------------------------------------------------------------ loading ------------------------------------------------------------ */ --transition-loading: 2200ms var( --ease-level0 ); --transition-loading2: 500ms var( --ease-level0 ); --transition-symbol: 1000ms var( --ease-level1 ); --transition-eye: 200ms var( --ease-level1 ); --transition-coin: 1200ms var( --ease-coin ); --animation-eye: 3300ms ease infinite; } /* ------------------------------------------------------------ font-family ------------------------------------------------------------ */ :root { /* ------------------------------------------------------------ font ------------------------------------------------------------ */ --font-gothic: 'Noto Sans JP' , sans-serif; --font-mincho: 'Zen Old Mincho' , sans-serif; --font-sans-serif: 'Inter' , sans-serif; --font-sans-serif2: 'Montserrat' , sans-serif; --font-sans-serif3: 'Roboto Condensed' , sans-serif; --font-serif: 'Abril Fatface' , serif; --font-form: var( --font-gothic ); } /* ------------------------------------------------------------ font-size max関数 13〜39pxまではmax関数を使用し可変する。 非対応ブラウザはJavaScriptのalternativeFontSizeMaxで生成 ------------------------------------------------------------ */ :root { --font-size1: max(0.1rem, 1px); --font-size2: max(0.2rem, 2px); --font-size3: max(0.3rem, 3px); --font-size4: max(0.4rem, 4px); --font-size5: max(0.5rem, 5px); --font-size6: max(0.6rem, 6px); --font-size7: max(0.7rem, 7px); --font-size8: max(0.8rem, 8px); --font-size9: max(0.9rem, 9px); --font-size10: max(1.0rem, 10px); --font-size11: max(1.1rem, 11px); --font-size12: max(1.2rem, 12px); --font-size13: max(1.3rem, 12px); --font-size14: max(1.4rem, 12px); --font-size15: max(1.5rem, 12px); --font-size16: max(1.6rem, 12px); --font-size17: max(1.7rem, 12px); --font-size18: max(1.8rem, 13px); --font-size19: max(1.9rem, 14px); --font-size20: max(2.0rem, 14px); --font-size21: max(2.1rem, 15px); --font-size22: max(2.2rem, 16px); --font-size23: max(2.3rem, 17px); --font-size24: max(2.4rem, 17px); --font-size25: max(2.5rem, 18px); --font-size26: max(2.6rem, 19px); --font-size27: max(2.7rem, 19px); --font-size28: max(2.8rem, 20px); --font-size29: max(2.9rem, 21px); --font-size30: 3.0rem; --font-size31: 3.1rem; --font-size32: 3.2rem; --font-size33: 3.3rem; --font-size34: 3.4rem; --font-size35: 3.5rem; --font-size36: 3.6rem; --font-size37: 3.7rem; --font-size38: 3.8rem; --font-size39: 3.9rem; --font-size40: 4.0rem; --font-size41: 4.1rem; --font-size42: 4.2rem; --font-size43: 4.3rem; --font-size44: 4.4rem; --font-size45: 4.5rem; --font-size46: 4.6rem; --font-size47: 4.7rem; --font-size48: 4.8rem; --font-size49: 4.9rem; --font-size50: 5.0rem; --font-size51: 5.1rem; --font-size52: 5.2rem; --font-size53: 5.3rem; --font-size54: 5.4rem; --font-size55: 5.5rem; --font-size56: 5.6rem; --font-size57: 5.7rem; --font-size58: 5.8rem; --font-size59: 5.9rem; --font-size60: 6.0rem; --font-size61: 6.1rem; --font-size62: 6.2rem; --font-size63: 6.3rem; --font-size64: 6.4rem; --font-size65: 6.5rem; --font-size66: 6.6rem; --font-size67: 6.7rem; --font-size68: 6.8rem; --font-size69: 6.9rem; --font-size70: 7.0rem; --font-size71: 7.1rem; --font-size72: 7.2rem; --font-size73: 7.3rem; --font-size74: 7.4rem; --font-size75: 7.5rem; --font-size76: 7.6rem; --font-size77: 7.7rem; --font-size78: 7.8rem; --font-size79: 7.9rem; --font-size80: 8.0rem; --font-size81: 8.1rem; --font-size82: 8.2rem; --font-size83: 8.3rem; --font-size84: 8.4rem; --font-size85: 8.5rem; --font-size86: 8.6rem; --font-size87: 8.7rem; --font-size88: 8.8rem; --font-size89: 8.9rem; --font-size90: 9.0rem; --font-size91: 9.1rem; --font-size92: 9.2rem; --font-size93: 9.3rem; --font-size94: 9.4rem; --font-size95: 9.5rem; --font-size96: 9.6rem; --font-size97: 9.7rem; --font-size98: 9.8rem; --font-size99: 9.9rem; --font-size100: 10.0rem; --font-size101: 10.1rem; --font-size102: 10.2rem; --font-size103: 10.3rem; --font-size104: 10.4rem; --font-size105: 10.5rem; --font-size106: 10.6rem; --font-size107: 10.7rem; --font-size108: 10.8rem; --font-size109: 10.9rem; --font-size110: 11.0rem; --font-size111: 11.1rem; --font-size112: 11.2rem; --font-size113: 11.3rem; --font-size114: 11.4rem; --font-size115: 11.5rem; --font-size116: 11.6rem; --font-size117: 11.7rem; --font-size118: 11.8rem; --font-size119: 11.9rem; --font-size120: 12.0rem; --font-size121: 12.1rem; --font-size122: 12.2rem; --font-size123: 12.3rem; --font-size124: 12.4rem; --font-size125: 12.5rem; --font-size126: 12.6rem; --font-size127: 12.7rem; --font-size128: 12.8rem; --font-size129: 12.9rem; --font-size130: 13.0rem; --font-size131: 13.1rem; --font-size132: 13.2rem; --font-size133: 13.3rem; --font-size134: 13.4rem; --font-size135: 13.5rem; --font-size136: 13.6rem; --font-size137: 13.7rem; --font-size138: 13.8rem; --font-size139: 13.9rem; --font-size140: 14.0rem; --font-size141: 14.1rem; --font-size142: 14.2rem; --font-size143: 14.3rem; --font-size144: 14.4rem; --font-size145: 14.5rem; --font-size146: 14.6rem; --font-size147: 14.7rem; --font-size148: 14.8rem; --font-size149: 14.9rem; --font-size150: 15.0rem; --font-size151: 15.1rem; --font-size152: 15.2rem; --font-size153: 15.3rem; --font-size154: 15.4rem; --font-size155: 15.5rem; --font-size156: 15.6rem; --font-size157: 15.7rem; --font-size158: 15.8rem; --font-size159: 15.9rem; --font-size160: 16.0rem; --font-size161: 16.1rem; --font-size162: 16.2rem; --font-size163: 16.3rem; --font-size164: 16.4rem; --font-size165: 16.5rem; --font-size166: 16.6rem; --font-size167: 16.7rem; --font-size168: 16.8rem; --font-size169: 16.9rem; --font-size170: 17.0rem; --font-size171: 17.1rem; --font-size172: 17.2rem; --font-size173: 17.3rem; --font-size174: 17.4rem; --font-size175: 17.5rem; --font-size176: 17.6rem; --font-size177: 17.7rem; --font-size178: 17.8rem; --font-size179: 17.9rem; --font-size180: 18.0rem; --font-size181: 18.1rem; --font-size182: 18.2rem; --font-size183: 18.3rem; --font-size184: 18.4rem; --font-size185: 18.5rem; --font-size186: 18.6rem; --font-size187: 18.7rem; --font-size188: 18.8rem; --font-size189: 18.9rem; --font-size190: 19.0rem; --font-size191: 19.1rem; --font-size192: 19.2rem; --font-size193: 19.3rem; --font-size194: 19.4rem; --font-size195: 19.5rem; --font-size196: 19.6rem; --font-size197: 19.7rem; --font-size198: 19.8rem; --font-size199: 19.9rem; --font-size200: 20.0rem; } /* ------------------------------------------------------------ letter-spacing ------------------------------------------------------------ */ :root { --letter-spacing-2xs: 0.01em; --letter-spacing-xs: 0.02em; --letter-spacing-sm: 0.03em; --letter-spacing-rg: 0.04em; --letter-spacing-md: 0.05em; --letter-spacing-lg: 0.06em; --letter-spacing-xl: 0.07em; --letter-spacing-2xl: 0.08em; --letter-spacing-3xl: 0.09em; --letter-spacing-4xl: 0.10em; --letter-spacing-_2xs: -0.01em; --letter-spacing-_xs: -0.02em; --letter-spacing-_sm: -0.03em; --letter-spacing-_rg: -0.04em; --letter-spacing-_md: -0.05em; --letter-spacing-_lg: -0.06em; --letter-spacing-_xl: -0.07em; --letter-spacing-_2xl: -0.08em; --letter-spacing-_3xl: -0.09em; --letter-spacing-_4xl: -0.10em; } /* ------------------------------------------------------------ line-height ------------------------------------------------------------ */ :root { --line-height-noraml: 1.219; --line-height-noraml2: 1.4; } /* ------------------------------------------------------------ line ------------------------------------------------------------ */ :root { /* ------------------------------------------------------------ solid ------------------------------------------------------------ */ --solid-current: solid 1px currentColor; --solid: solid 1px var( --color-line ); --solid2: solid 1px var( --color-line2 ); --solid3: solid 1px var( --color-line3 ); --solid4: solid 1px var( --color-line4 ); --solid5: solid 1px var( --color-line5 ); --solid6: solid 1px var( --color-line6 ); --solid-accent: solid 1px var( --color-accent ); --solid-accent2: solid 1px var( --color-accent2 ); --solid-small-current: solid 2px currentColor; --solid-medium-current: solid 0.4rem currentColor; --solid-medium-comic: solid 0.4rem var( --color-comic ); } @media screen and (min-width: 1024px) { :root { --solid-small-current2: solid 2px currentColor; --solid-bold-current: solid 0.6rem currentColor; --solid-bold-main3: solid 0.6rem var( --color-main3 ); } } @media screen and (max-width: 1023px) { :root { --solid-small-current2: solid 1px currentColor; --solid-bold-current: solid 0.4rem currentColor; --solid-bold-main3: solid 0.4rem var( --color-main3 ); } } /* ------------------------------------------------------------ radius ------------------------------------------------------------ */ :root { --radius-4xs: 0.3rem; --radius-3xs: 0.5rem; --radius-2xs: 1rem; --radius-xs: 2rem; --radius-max: 1000px; } @media screen and (min-width: 1024px) { :root { --radius-xs2: 2rem; --radius-sm: 4rem; --radius-md: 6rem; } } @media screen and (max-width: 1023px) { :root { --radius-xs2: 1rem; --radius-sm: 2rem; --radius-md: 4rem; } } /* ------------------------------------------------------------ shadow ------------------------------------------------------------ */ :root { --shadow: drop-shadow(0 0.4rem 0.4rem var(--color-shadow)); --shadow2: 0 0 2.0rem 0 var( --color-shadow ); } /* ------------------------------------------------------------ slope ------------------------------------------------------------ */ /* ------------------------------------------------------------ space 上下の余白 utilityクラスと連動 ------------------------------------------------------------ */ /* ------------------------------------------------------------ z-index BEMシステムのBlock部分 のz-indexを一括管理 ページ固有のBlock部分は page-hoge.scssで指定する BEMシステムのElement部分 は個別で直接指定 ------------------------------------------------------------ */ :root { --z-index-: -1; --z-index-l-main: 0; --z-index-l-footer: 10; --z-index-l-header: 100; --z-index-l-gnav-bg: 1000; --z-index-l-gnav__children: 10000; --z-index-l-gnav__parent: 100000; --z-index-l-header__sub: 1000000; --z-index-l-sitemap: 10000000; --z-index-l-header__button: 100000000; --z-index-l-header__logo: 1000000000; --z-index-js-modal2: 1000000010; --z-index-js-modal: 1000000100; --z-index-l-loading: 1000001000; --z-index-l-loading2: 1000010000; } /** * * reset.scss * */ /* ------------------------------------------------------------ reset basic ------------------------------------------------------------- */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } img, picture { max-width: 100%; } picture { display: block; } img { max-width: 100%; height: auto; vertical-align: bottom; padding: 0; } a img { border: none; } a { background: transparent; vertical-align: baseline; font-size: 100%; text-decoration: none; cursor: pointer; } a:hover, a:hover img { -webkit-backface-visibility: hidden; backface-visibility: hidden; } a, span, small, time, button { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; } template { display: none; } /* ------------------------------------------------------------ reset form ------------------------------------------------------------- */ input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer; } textarea { resize: vertical; overflow: auto; } [type="file"] { line-height: 1 !important; } select::-ms-expand { display: none; } select::-moz-focusring { color: transparent; text-shadow: 0 0 0 #fff; } input:-webkit-autofill, select:-webkit-autofill, option:-webkit-autofill { -webkit-text-fill-color: #000 !important; -webkit-box-shadow: 0 0 0px 1000px #fff inset; } /** * * base.scss * */ /* ------------------------------------------------------------ setting ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* ---------- scrollbar ---------- */ /* ---------- selection ---------- */ ::selection { background-color: var(--color-accent); color: var(--color-txt2); } ::-moz-selection { background-color: var(--color-accent); color: var(--color-txt2); } /* ------------------------------------------------------------ base ------------------------------------------------------------ */ html { height: 100vh; font-size: 62.5%; } @media screen and (min-width: 2561px) { html { font-size: calc( (10 / 2560) * 100vw); } } @media screen and (max-width: 1440px) and (min-width: 1024px) { html { font-size: calc( (10 / 1440) * 100vw); } } @media screen and (max-width: 767px) and (min-width: 561px) { html { font-size: calc( (10 / 767) * 100vw); } } @media screen and (max-width: 390px) { html { font-size: calc( (10 / 390) * 100vw); } } body { background-color: var(--color-bg); color: var(--color-txt); font-family: var(--font-gothic); font-weight: 500; font-size: 1rem ; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: geometricPrecision; text-decoration-thickness: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2); overflow-x: clip; overflow-y: scroll; -ms-scroll-chaining: none; overscroll-behavior: none; } body:not(.is-load):not(#tinymce) { pointer-events: none; } main { position: relative; overflow: clip; } h1, h2, h3, h4, h5, h6 { font-weight: 500; } dt, dd, address, th, td, li { font-size: inherit; line-height: inherit; } ul, ol { list-style-position: inside; } a.is-current, button.is-current { opacity: var(--current-opacity); pointer-events: none; } a.is-disabled, button.is-disabled { opacity: var(--disabled-opacity); pointer-events: none; } input, select, textarea, button { font-family: inherit; -webkit-font-feature-settings: 'palt' 1; font-feature-settings: 'palt' 1; } svg { fill: currentColor; transition: fill var(--transition-hover); } img { width: 100%; } body.ua-chrome img { image-rendering: -webkit-optimize-contrast; } /* ------------------------------------------------------------ ページ内リンク ページ内リンクのターゲットで上に余白を持たせたい場合は、idを [area-] から記述する。 以下スタイルでアニメーション後の上の余白を一括調整 上の余白がいらないものは、 [target-] で記述する。 ------------------------------------------------------------ */ [id^="area-"] { -webkit-transform: translateY(calc( var(--sticky-top) * -1)); transform: translateY(calc( var(--sticky-top) * -1)); } [id^="area2-"] { margin-top: calc( var(--sticky-top) * -1); padding-top: var(--sticky-top); } /** * * eye.scss * */ /* ------------------------------------------------------------ eye ------------------------------------------------------------ */ @-webkit-keyframes eye { 0%, 8%, 28%, 36%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } 4%, 32% { -webkit-transform: scaleY(0.01); transform: scaleY(0.01); } } @keyframes eye { 0%, 8%, 28%, 36%, 100% { -webkit-transform: scaleY(1); transform: scaleY(1); } 4%, 32% { -webkit-transform: scaleY(0.01); transform: scaleY(0.01); } } /** * * hover.scss * */ /* ------------------------------------------------------------ hover-arrow ------------------------------------------------------------ */ @-webkit-keyframes hover-arrow { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); opacity: 0; } 50.001% { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); opacity: 0; } } @keyframes hover-arrow { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(60%, 0, 0); transform: translate3d(60%, 0, 0); opacity: 0; } 50.001% { -webkit-transform: translate3d(-60%, 0, 0); transform: translate3d(-60%, 0, 0); opacity: 0; } } /* ------------------------------------------------------------ hover-blank ------------------------------------------------------------ */ @-webkit-keyframes hover-blank { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(60%, -60%, 0); transform: translate3d(60%, -60%, 0); opacity: 0; } 50.001% { -webkit-transform: translate3d(-60%, 60%, 0); transform: translate3d(-60%, 60%, 0); opacity: 0; } } @keyframes hover-blank { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(60%, -60%, 0); transform: translate3d(60%, -60%, 0); opacity: 0; } 50.001% { -webkit-transform: translate3d(-60%, 60%, 0); transform: translate3d(-60%, 60%, 0); opacity: 0; } } /* ------------------------------------------------------------ hover-down ------------------------------------------------------------ */ @-webkit-keyframes hover-down { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; } 50.0000001% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); opacity: 0; } } @keyframes hover-down { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } 50% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; } 50.0000001% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); opacity: 0; } } @-webkit-keyframes hover-down-center { 0%, 100% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); opacity: 1; } 50% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); opacity: 0; } 50.0000001% { -webkit-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); opacity: 0; } } @keyframes hover-down-center { 0%, 100% { -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); opacity: 1; } 50% { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); opacity: 0; } 50.0000001% { -webkit-transform: translate3d(0, -150%, 0); transform: translate3d(0, -150%, 0); opacity: 0; } } /** * * loopslider.scss * */ /* ------------------------------------------------------------ loopslider-x ------------------------------------------------------------ */ @-webkit-keyframes loopslider-x { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(calc( var(--original-width) * -1), 0, 0); transform: translate3d(calc( var(--original-width) * -1), 0, 0); } } @keyframes loopslider-x { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(calc( var(--original-width) * -1), 0, 0); transform: translate3d(calc( var(--original-width) * -1), 0, 0); } } /* ------------------------------------------------------------ loopslider-y ------------------------------------------------------------ */ /** * * slide.scss * */ /* ------------------------------------------------------------ slide ------------------------------------------------------------ */ @-webkit-keyframes slide_tb { 0% { -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slide_tb { 0% { -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slide_bt { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } } @keyframes slide_bt { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } } @-webkit-keyframes slide_lr { 0% { -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slide_lr { 0% { -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slide_rl { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } } @keyframes slide_rl { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } } /* * * step.scss * */ /* ------------------------------------------------------------ step-rotate 回転 ------------------------------------------------------------ */ /* ------------------------------------------------------------ step-fluffy 上下左右に動く ------------------------------------------------------------ */ @-webkit-keyframes step-fluffy { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(-10%, -4%, 0); transform: translate3d(-10%, -4%, 0); } 50% { -webkit-transform: translate3d(-4%, 4%, 0); transform: translate3d(-4%, 4%, 0); } 75% { -webkit-transform: translate3d(12%, 2%, 0); transform: translate3d(12%, 2%, 0); } 100% { -webkit-transform: translate3d(5%, -4%, 0); transform: translate3d(5%, -4%, 0); } } @keyframes step-fluffy { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(-10%, -4%, 0); transform: translate3d(-10%, -4%, 0); } 50% { -webkit-transform: translate3d(-4%, 4%, 0); transform: translate3d(-4%, 4%, 0); } 75% { -webkit-transform: translate3d(12%, 2%, 0); transform: translate3d(12%, 2%, 0); } 100% { -webkit-transform: translate3d(5%, -4%, 0); transform: translate3d(5%, -4%, 0); } } @-webkit-keyframes step-fluffy2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(5%, 5%, 0); transform: translate3d(5%, 5%, 0); } 50% { -webkit-transform: translate3d(10%, -2%, 0); transform: translate3d(10%, -2%, 0); } 75% { -webkit-transform: translate3d(0%, 3%, 0); transform: translate3d(0%, 3%, 0); } 100% { -webkit-transform: translate3d(-10%, 4%, 0); transform: translate3d(-10%, 4%, 0); } } @keyframes step-fluffy2 { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 25% { -webkit-transform: translate3d(5%, 5%, 0); transform: translate3d(5%, 5%, 0); } 50% { -webkit-transform: translate3d(10%, -2%, 0); transform: translate3d(10%, -2%, 0); } 75% { -webkit-transform: translate3d(0%, 3%, 0); transform: translate3d(0%, 3%, 0); } 100% { -webkit-transform: translate3d(-10%, 4%, 0); transform: translate3d(-10%, 4%, 0); } } /** * Swiper 8.4.2 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: September 15, 2022 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .swiper-vertical > .swiper-wrapper { flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 0; display: flex; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; box-sizing: content-box; } .swiper-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-pointer-events { touch-action: pan-y; } .swiper-pointer-events.swiper-vertical { touch-action: pan-x; } .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto; } .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: height,-webkit-transform; transition-property: transform,height; transition-property: transform,height,-webkit-transform; } .swiper-backface-hidden .swiper-slide { -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, 0.15); } .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-horizontal.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-vertical.swiper-css-mode > .swiper-wrapper { -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } .swiper-centered > .swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999; } .swiper-centered.swiper-horizontal > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-start: var(--swiper-centered-offset-before); margin-inline-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-horizontal > .swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after); } .swiper-centered.swiper-vertical > .swiper-wrapper > .swiper-slide:first-child { -webkit-margin-before: var(--swiper-centered-offset-before); margin-block-start: var(--swiper-centered-offset-before); } .swiper-centered.swiper-vertical > .swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after); } .swiper-centered > .swiper-wrapper > .swiper-slide { scroll-snap-align: center center; } .swiper-virtual .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); } .swiper-virtual.swiper-css-mode .swiper-wrapper::after { content: ''; position: absolute; left: 0; top: 0; pointer-events: none; } .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after { height: 1px; width: var(--swiper-virtual-size); } .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after { width: 1px; height: var(--swiper-virtual-size); } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); z-index: 10; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-button-next.swiper-button-hidden, .swiper-button-prev.swiper-button-hidden { opacity: 0; cursor: auto; pointer-events: none; } .swiper-navigation-disabled .swiper-button-next, .swiper-navigation-disabled .swiper-button-prev { display: none !important; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { content: 'prev'; } .swiper-button-next, .swiper-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: 'next'; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-disabled > .swiper-pagination, .swiper-pagination.swiper-pagination-disabled { display: none !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px)); height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px)); display: inline-block; border-radius: 50%; background: var(--swiper-pagination-bullet-inactive-color, #000); opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2); } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet:only-child { display: none !important; } .swiper-pagination-bullet-active { opacity: var(--swiper-pagination-bullet-opacity, 1); background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0; display: block; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; transition: .2s transform,.2s top; } .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px); } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s left; } .swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transition: .2s transform,.2s right; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite, .swiper-pagination-progressbar.swiper-pagination-vertical, .swiper-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-disabled > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-disabled { display: none !important; } .swiper-horizontal > .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader, .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader { -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-free-mode > .swiper-wrapper { transition-timing-function: ease-out; margin: 0 auto; } .swiper-grid > .swiper-wrapper { flex-wrap: wrap; } .swiper-grid-column > .swiper-wrapper { flex-wrap: wrap; flex-direction: column; } .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out; } .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity; } .swiper-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube { overflow: visible; } .swiper-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-cube.swiper-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-cube .swiper-slide-active, .swiper-cube .swiper-slide-next, .swiper-cube .swiper-slide-next + .swiper-slide, .swiper-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-cube .swiper-slide-shadow-bottom, .swiper-cube .swiper-slide-shadow-left, .swiper-cube .swiper-slide-shadow-right, .swiper-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; opacity: .6; z-index: 0; } .swiper-cube .swiper-cube-shadow:before { content: ''; background: #000; position: absolute; left: 0; top: 0; bottom: 0; right: 0; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-flip { overflow: visible; } .swiper-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-flip .swiper-slide-active, .swiper-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-flip .swiper-slide-shadow-bottom, .swiper-flip .swiper-slide-shadow-left, .swiper-flip .swiper-slide-shadow-right, .swiper-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-creative .swiper-slide { -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; transition-property: opacity,height,-webkit-transform; transition-property: transform,opacity,height; transition-property: transform,opacity,height,-webkit-transform; } .swiper-cards { overflow: visible; } .swiper-cards .swiper-slide { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; } .swiper-wrapper { transition-timing-function: var(--transition-carousel) !important; } /* ---------------------------------------------------------------------------------------------------- Object ---------------------------------------------------------------------------------------------------- */ /* * * anchor.scss * */ /* ------------------------------------------------------------ c-anchor-line ------------------------------------------------------------ */ .c-anchor-lineIn { background-repeat: no-repeat; background-image: linear-gradient(180deg, currentColor, currentColor); transition: background-size var(--transition-hover); background-size: 0 1px; background-position: 100% 100%; } @media (hover: hover) { .c-anchor-lineIn:hover, a:hover .c-anchor-lineIn { background-size: 100% 1px; background-position: 0% 100%; } } .c-anchor-lineOut { background-repeat: no-repeat; background-image: linear-gradient(180deg, currentColor, currentColor); transition: background-size var(--transition-hover); background-size: 100% 1px; background-position: 0% 100%; } @media (hover: hover) { .c-anchor-lineOut:hover, a:hover .c-anchor-lineOut { background-size: 0 1px; background-position: 100% 100%; } } /* * * animation.scss * */ /* ------------------------------------------------------------ c-anime-rotate ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-anime ------------------------------------------------------------ */ .c-anime-fluffy { -webkit-animation: step-fluffy var(--animation-fluffy); animation: step-fluffy var(--animation-fluffy); } .c-anime-fluffy2 { -webkit-animation: step-fluffy2 var(--animation-fluffy2); animation: step-fluffy2 var(--animation-fluffy2); } .c-anime-fluffy3 { -webkit-animation: step-fluffy var(--animation-fluffy3); animation: step-fluffy var(--animation-fluffy3); } /* ------------------------------------------------------------ delay ------------------------------------------------------------ */ .c-anime-delay-1 { -webkit-animation-delay: 800ms; animation-delay: 800ms; } .c-anime-delay-2 { -webkit-animation-delay: 1600ms; animation-delay: 1600ms; } .c-anime-delay-3 { -webkit-animation-delay: 2400ms; animation-delay: 2400ms; } .c-anime-delay-4 { -webkit-animation-delay: 3200ms; animation-delay: 3200ms; } .c-anime-delay-5 { -webkit-animation-delay: 4000ms; animation-delay: 4000ms; } .c-anime-delay-6 { -webkit-animation-delay: 4800ms; animation-delay: 4800ms; } .c-anime-delay-7 { -webkit-animation-delay: 5600ms; animation-delay: 5600ms; } .c-anime-delay-8 { -webkit-animation-delay: 6400ms; animation-delay: 6400ms; } .c-anime-delay-9 { -webkit-animation-delay: 7200ms; animation-delay: 7200ms; } .c-anime-delay-10 { -webkit-animation-delay: 8000ms; animation-delay: 8000ms; } .c-anime-delay-11 { -webkit-animation-delay: 8800ms; animation-delay: 8800ms; } .c-anime-delay-12 { -webkit-animation-delay: 9600ms; animation-delay: 9600ms; } .c-anime-delay-13 { -webkit-animation-delay: 10400ms; animation-delay: 10400ms; } .c-anime-delay-14 { -webkit-animation-delay: 11200ms; animation-delay: 11200ms; } .c-anime-delay-15 { -webkit-animation-delay: 12000ms; animation-delay: 12000ms; } .c-anime-delay-16 { -webkit-animation-delay: 12800ms; animation-delay: 12800ms; } .c-anime-delay-17 { -webkit-animation-delay: 13600ms; animation-delay: 13600ms; } .c-anime-delay-18 { -webkit-animation-delay: 14400ms; animation-delay: 14400ms; } .c-anime-delay-19 { -webkit-animation-delay: 15200ms; animation-delay: 15200ms; } .c-anime-delay-20 { -webkit-animation-delay: 16000ms; animation-delay: 16000ms; } /** * * bg.scss * */ /* ------------------------------------------------------------ c-bg 背景にしたい場合に使用します。 ------------------------------------------------------------ */ .c-bg { width: 100%; height: 100%; position: absolute !important; top: 0; left: 0; z-index: -1; overflow: hidden; pointer-events: none; } .c-bg img { -webkit-transform: scale(1.01) rotate(0.00001deg); transform: scale(1.01) rotate(0.00001deg); transition: -webkit-transform var(--transition-hover-slow); transition: transform var(--transition-hover-slow); transition: transform var(--transition-hover-slow), -webkit-transform var(--transition-hover-slow); } @media (hover: hover) { a:hover .c-bg img, button:hover .c-bg img { -webkit-transform: var(--hover-scale3) rotate(0.00001deg); transform: var(--hover-scale3) rotate(0.00001deg); } } /* ------------------------------------------------------------ c-bg2 bg2はhoverで拡大のみ ------------------------------------------------------------ */ .c-bg2 { overflow: hidden; } .c-bg2.-visible { overflow: visible; } .c-bg2 img { -webkit-transform: scale(1.01) rotate(0.00001deg); transform: scale(1.01) rotate(0.00001deg); transition: -webkit-transform var(--transition-hover-slow); transition: transform var(--transition-hover-slow); transition: transform var(--transition-hover-slow), -webkit-transform var(--transition-hover-slow); } @media (hover: hover) { a:hover .c-bg2 img { -webkit-transform: var(--hover-scale3) rotate(0.00001deg); transform: var(--hover-scale3) rotate(0.00001deg); } } /* ------------------------------------------------------------ c-bg-fixed 背景をfixedさせたい時に使用します。 固定させたい要素を「c-bg-fixed__bg」 全体を囲む親要素を「c-bg-fixed」として使用します。 ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-bg-texture 背景にテクスチャをかけたい場合に使用します。 ------------------------------------------------------------ */ /** * * column.scss * */ /* ------------------------------------------------------------ c-column ------------------------------------------------------------ */ .c-column { display: grid; } [class*="c-column"] { /* ------------------------------------------------------------ column ------------------------------------------------------------ */ /* ---------- -col-2 ---------- */ /* ---------- -col-3 ---------- */ /* ---------- -col-4 ---------- */ /* ------------------------------------------------------------ gap ------------------------------------------------------------ */ /* ----- -gap-20 ----- */ /* ------------------------------------------------------------ gap column ------------------------------------------------------------ */ /* ----- -gap-c-gap ----- */ /* ----- -gap-c-40 ----- */ /* ----- -gap-c-80 ----- */ /* ----- -gap-c-60 ----- */ /* ------------------------------------------------------------ gap row ------------------------------------------------------------ */ /* ----- -gap-r-10 ----- */ /* ----- -gap-r-60 ----- */ /* ----- -gap-r-80 ----- */ /* ----- -gap-r-60 ----- */ } [class*="c-column"].-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media screen and (min-width: 1024px) { [class*="c-column"].-col-2-lg { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 1023px) { [class*="c-column"].-col-2-lg { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media screen and (min-width: 768px) { [class*="c-column"].-col-2-md { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { [class*="c-column"].-col-2-md { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media screen and (min-width: 1024px) { [class*="c-column"].-col-3-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 1023px) { [class*="c-column"].-col-3-lg { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media screen and (min-width: 1024px) { [class*="c-column"].-col-3-lg-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media screen and (max-width: 1023px) and (min-width: 561px) { [class*="c-column"].-col-3-lg-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 560px) { [class*="c-column"].-col-3-lg-sm { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media screen and (min-width: 1024px) { [class*="c-column"].-col-4-lg-sm { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media screen and (max-width: 1023px) and (min-width: 561px) { [class*="c-column"].-col-4-lg-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 560px) { [class*="c-column"].-col-4-lg-sm { grid-template-columns: repeat(1, minmax(0, 1fr)); } } @media screen and (min-width: 1024px) { [class*="c-column"].-gap-20 { gap: 2rem ; } } @media screen and (max-width: 1023px) { [class*="c-column"].-gap-20 { gap: 1rem ; } } [class*="c-column"].-gap-20-2 { gap: 2rem ; } [class*="c-column"].-gap-c-gap { -webkit-column-gap: var(--gap); -moz-column-gap: var(--gap); column-gap: var(--gap); } [class*="c-column"].-gap-c-40 { -webkit-column-gap: 2.31481vw; -moz-column-gap: 2.31481vw; column-gap: 2.31481vw; } [class*="c-column"].-gap-c-80 { -webkit-column-gap: 4.62963vw; -moz-column-gap: 4.62963vw; column-gap: 4.62963vw; } @media screen and (min-width: 1024px) { .c-inner.-max [class*="c-column"].-gap-c-80 { -webkit-column-gap: 8rem ; -moz-column-gap: 8rem ; column-gap: 8rem ; } } @media screen and (min-width: 1024px) { [class*="c-column"].-gap-r-60 { row-gap: 6rem ; } } @media screen and (max-width: 1023px) { [class*="c-column"].-gap-r-60 { row-gap: 4rem ; } } [class*="c-column"].-gap-r-80 { row-gap: 8rem ; } @media screen and (min-width: 1024px) { [class*="c-column"].-gap-r-80-2 { row-gap: 8rem ; } } @media screen and (max-width: 1023px) { [class*="c-column"].-gap-r-80-2 { row-gap: 2rem ; } } /* ------------------------------------------------------------ c-column-flex [html] .c-column-flex > .c-column-flex__inner marginはtopで統一するので、内側に一つ要素を作り、それでネガディブマージンを使用する ------------------------------------------------------------ */ /* ------------------------------------------------------------ gap column ------------------------------------------------------------ */ /* ------------------------------------------------------------ gap row ------------------------------------------------------------ */ /* ----- -gap-r-18 ----- */ /* ------------------------------------------------------------ c-column-scroll スマホのみ横スクロールするカラム ------------------------------------------------------------ */ /** * * dashed.scss * * 破線の感覚をSVGとJSを使って再現 * 汎用性のある要素なので、 * project,layout以外のカスケーティングも許容する * */ /* ------------------------------------------------------------ c-dashed ------------------------------------------------------------ */ .c-dashed, .c-dashed-y, .c-dashed-x { position: relative; } .c-dashed.is-init .c-dashed__svg, .c-dashed-y.is-init .c-dashed__svg, .c-dashed-x.is-init .c-dashed__svg { opacity: 1; } .c-dashed .c-dashed__svg, .c-dashed-y .c-dashed__svg, .c-dashed-x .c-dashed__svg { display: block; position: absolute; overflow: visible; pointer-events: none; opacity: 0; } @media (hover: hover) { .c-dashed:hover rect, .c-dashed-y:hover rect, .c-dashed-x:hover rect { -webkit-animation: strok-loop var(--animation-strok-loop); animation: strok-loop var(--animation-strok-loop); } } .c-dashed rect, .c-dashed line, .c-dashed-y rect, .c-dashed-y line, .c-dashed-x rect, .c-dashed-x line { fill: none; stroke: var(--border-color, currentColor); stroke-width: var(--border-width); stroke-dasharray: var(--border-dasharray); vector-effect: non-scaling-stroke; transition: var(--transition-hover); transition-property: stroke; } /* ------------------------------------------------------------ c-dashed ------------------------------------------------------------ */ .c-dashed .c-dashed__svg { width: 100%; height: 100%; top: 0; left: 0; } body.ua-dp-1 .c-dashed .c-dashed__svg { width: calc( 100% - 0.5px); height: calc( 100% - 0.5px); } .c-dashed .c-dashed__svg rect { width: calc(100% - var(--border-width)); height: calc(100% - var(--border-width)); -webkit-transform: translate(calc(var(--border-width) / 2), calc(var(--border-width) / 2)); transform: translate(calc(var(--border-width) / 2), calc(var(--border-width) / 2)); } /* ------------------------------------------------------------ c-dashed-x ------------------------------------------------------------ */ .c-dashed-x .c-dashed__svg.-x { height: var(--border-width); } .c-dashed-x.-top .c-dashed__svg.-x, .c-dashed-x.-bottom .c-dashed__svg.-x { width: 100%; left: 0; } .c-dashed-x.-top > .c-dashed__svg.-x { top: 0; } .c-dashed-x.-bottom > .c-dashed__svg.-x { bottom: 0; } /* ------------------------------------------------------------ c-dashed-y ------------------------------------------------------------ */ .c-dashed-y .c-dashed__svg.-y { width: var(--border-width); } .c-dashed-y.-right .c-dashed__svg.-y, .c-dashed-y.-left .c-dashed__svg.-y { height: 100%; top: 0; } .c-dashed-y.-right > .c-dashed__svg.-y { right: 0; } .c-dashed-y.-left > .c-dashed__svg.-y { left: 0; } /* * * dots.scss * */ /* ------------------------------------------------------------ c-dots ------------------------------------------------------------ */ .c-dots { display: flex; align-items: center; gap: 1.5rem ; } .c-dots li.is-active button { width: 4.8rem ; } .c-dots button { width: 0.8rem ; height: 0.8rem ; border-radius: 0.5rem ; background-color: currentColor; transition: width var(--transition-dots); } /** * * iframe.scss * */ /* ------------------------------------------------------------ c-iframe ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-iframe-child ------------------------------------------------------------ */ .c-iframe-child { position: relative; } .c-iframe-child > iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ------------------------------------------------------------ c-iframe-hidden ------------------------------------------------------------ */ /** * * inner.scss * */ /* ------------------------------------------------------------ c-inner ------------------------------------------------------------ */ .c-inner { width: var(--contents); margin-inline: auto; } .c-inner.-max { max-width: 160.8rem ; } @media screen and (min-width: 1024px) { .c-inner.-grid-10 { width: var(--grid10); } } @media screen and (min-width: 1024px) { .c-inner__grid-9 { width: var(--grid9); margin-left: auto; margin-right: 0; } } @media screen and (min-width: 1024px) { .c-inner__grid-10 { max-width: 133.6rem ; width: var(--grid10); margin-inline: auto; } } /* ------------------------------------------------------------ c-inner2 ------------------------------------------------------------ */ .c-inner2 { width: var(--contents-lg); margin-inline: auto; } .c-inner2__inner { width: var(--contents-sm); margin-inline: auto; } .c-inner2__inner2 { width: var(--contents-sm2); margin-inline: auto; } /** * * lazy.scss * */ /* ------------------------------------------------------------ c-lazy ------------------------------------------------------------ */ .c-lazy { content-visibility: auto; } /** * * list.scss * */ /* ------------------------------------------------------------ c-list-disc-small ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-disc ------------------------------------------------------------ */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -blue ---------- */ /* ------------------------------------------------------------ c-list-decimal ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-num ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-brackets ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-en ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-iroha ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-comma ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-list-slash ------------------------------------------------------------ */ /** * * object-fit.scss * */ /* ------------------------------------------------------------ c-objectfit ------------------------------------------------------------ */ .c-objectfit { /* ---------- -cover ---------- */ /* ---------- -contain ---------- */ } .c-objectfit.-cover { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; position: absolute; top: 0; left: 0; } .c-objectfit.-contain { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; position: absolute; top: 0; left: 0; } /* ---------- video ---------- */ /** * * object.scss * */ [class*="c-object"]:not(.c-objectfit) { position: absolute; z-index: var(--z-index, 1); top: var(--position-top); bottom: var(--position-bottom); left: var(--position-left); right: var(--position-right); pointer-events: none; } [class*="c-object"]:not(.c-objectfit) img { width: 100%; } /* ------------------------------------------------------------ c-object 縦横方向ともに固定 ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-object2 横は可変、縦は固定 ------------------------------------------------------------ */ .c-object2 { --position-top: calc( var(--top) * 0.1rem ); --position-bottom: calc( var(--bottom) * 0.1rem ); --position-left: calc( ( var(--left) / var(--base-width) ) * 100%); --position-right: calc( ( var(--right) / var(--base-width) ) * 100%); width: calc( ( var(--width) / var(--base-width) ) * 100%); } .c-object2 > * { position: relative; } .c-object2.-center { display: flex; justify-content: center; } .c-object2.-center > * { width: calc( var(--width) * 0.1rem) !important; } .c-object2.-right { display: flex; justify-content: flex-end; } .c-object2.-right > * { width: calc( var(--width) * 0.1rem) !important; } .c-object2.-left { display: flex; justify-content: flex-start; } .c-object2.-left > * { width: calc( var(--width) * 0.1rem) !important; } /* ------------------------------------------------------------ c-object3 横は固定、縦は可変 ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-object4 横幅のみ可変 ------------------------------------------------------------ */ /* ------------------------------------------------------------ c-object5 全て可変 ------------------------------------------------------------ */ .c-object5 { --z-index: 4; --position-top: calc( ( var(--top) / var(--base-height) ) * 100%); --position-bottom: calc( ( var(--bottom) / var(--base-height) ) * 100%); --position-left: calc( ( var(--left) / var(--base-width) ) * 100%); --position-right: calc( ( var(--right) / var(--base-width) ) * 100%); width: calc( ( var(--width) / var(--base-width) ) * 100%); height: calc( ( var(--height) / var(--base-height) ) * 100%); display: flex; align-items: flex-end; justify-content: center; } .c-object5 > * { max-width: calc( var(--width) * 0.15rem); } @media screen and (max-width: 1023px) and (min-width: 561px) { .c-object5 > * { max-width: calc( var(--width) * 0.14rem); } } .c-object5 button { pointer-events: auto; } .c-object5.-right { justify-content: flex-end; } .c-object5.-left { justify-content: flex-start; } @media screen and (min-width: 1024px) { .c-object5.-right-left { justify-content: flex-end; } } @media screen and (min-width: 1024px) { .c-object5.-right-left { justify-content: flex-start; } } /** * * overlay.scss * */ /* ------------------------------------------------------------ c-overlay ------------------------------------------------------------ */ .c-overlay { position: fixed; top: 0; right: 0; z-index: var(--z-index-c-overlay); width: 100%; height: 100%; -webkit-backdrop-filter: var(--overlay-blur); backdrop-filter: var(--overlay-blur); background-color: var(--color-overlay); opacity: 0; visibility: hidden; transition: var(--transition-overlay); transition-property: opacity,visibility; } .c-overlay.is-visible { opacity: 1; visibility: visible; } /** * * radius.scss * */ /* ------------------------------------------------------------ c-radius ------------------------------------------------------------ */ [class*="c-radius-"] { position: relative; z-index: 0; } [class*="c-radius-"].-hidden { overflow: hidden; } a[class*="c-radius-"], button[class*="c-radius-"], figure[class*="c-radius-"] { overflow: hidden; } .c-radius-4xs { border-radius: var(--radius-4xs); } .c-radius-3xs { border-radius: var(--radius-3xs); } .c-radius-2xs { border-radius: var(--radius-2xs); } .c-radius-xs { border-radius: var(--radius-xs); } .c-radius-max { border-radius: var(--radius-max); } .c-radius-xs2 { border-radius: var(--radius-xs2); } .c-radius-sm { border-radius: var(--radius-sm); } .c-radius-md { border-radius: var(--radius-md); } /** * * sticky.scss * */ /* ------------------------------------------------------------ c-sticky ------------------------------------------------------------ */ .c-sticky { position: sticky; top: var(--sticky-top); } /* ------------------------------------------------------------ c-sticky2 ------------------------------------------------------------ */ .c-sticky2 { position: sticky; top: 0; height: 100vh; } /** * * youtube.scss * */ /* ------------------------------------------------------------ c-youtube ------------------------------------------------------------ */ .c-youtube { position: relative; aspect-ratio: 560 / 315; } .c-youtube > iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ------------------------------------------------------------ c-youtube2 JavaScriptと連動してアスペクト比の実装を行う。 主にWPのthe_contentで使用するもので、 JavaScriptでiframeのsrcにyoutubeがあるか否かを判定して ある場合「is-aspect」クラスを付与。レスポンシブ対応と行う。 ------------------------------------------------------------ */ .c-youtube2:has(iframe[src*="youtube"]) { position: relative; aspect-ratio: 560 / 315; } .c-youtube2:has(iframe[src*="youtube"]) > iframe { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /** * * 3line.scss * */ /* ------------------------------------------------------------ c-3line ------------------------------------------------------------ */ .c-3line { display: grid; transition: gap var(--transition-accordion); will-change: gap; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ } .c-3line span { display: block; width: 100%; height: 1px; background-color: currentColor; transition: var(--transition-accordion); transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; will-change: opacity, transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; } @media screen and (max-width: 1023px) { .js-accordion-click-mqDown-lg.is-open .c-3line { gap: 0px; } .js-accordion-click-mqDown-lg.is-open .c-3line span:nth-of-type(2) { opacity: 0; } .js-accordion-click-mqDown-lg.is-open .c-3line span:nth-of-type(1) { -webkit-transform: translateY(100%) rotate(45deg); transform: translateY(100%) rotate(45deg); } .js-accordion-click-mqDown-lg.is-open .c-3line span:nth-of-type(3) { -webkit-transform: translateY(-100%) rotate(-45deg); transform: translateY(-100%) rotate(-45deg); } } .c-3line.-small { width: 2.4rem ; gap: 0.4rem ; } /** * * arrow.scss * */ /* ------------------------------------------------------------ c-arrow 矢印のみ ------------------------------------------------------------ */ .c-arrow { display: block; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------------------------------------- color デフォルトはcurrentColor それ以外は上書きする ---------------------------------------- */ } .c-arrow, .c-arrow svg { width: var(--arrow-width); height: var(--arrow-height); } .c-arrow svg { fill: none; } .c-arrow path { stroke: var(--arrow-color, currentColor); transition: stroke var(--transition-hover); } @media (hover: hover) { a:hover .c-arrow svg, button:hover .c-arrow svg { -webkit-animation: hover-arrow var(--animation-hover); animation: hover-arrow var(--animation-hover); } } .c-arrow.-small { --arrow-width: 0.7rem ; --arrow-height: 1rem ; } /* ---------- c-arrow-wrapper ---------- */ /** * ページャーなどで使用している c-arrow が入るarrow * デフォルトはグレー*currentColor * それ以外は上書きする */ .c-arrow-wrapper { width: 3rem ; height: 3rem ; } .c-arrow-wrapper a, .c-arrow-wrapper button { --color-hover-bg: var( --color-hover ); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: var(--solid-current); border-color: var(--border-color, var(--color-line2)); transition: var(--transition-hover); transition-property: border-color, color; } @media (hover: hover) { .c-arrow-wrapper a:hover, .c-arrow-wrapper button:hover { border-color: var(--hover-border-color, var(--color-txt2)); color: var(--hover-arrow-color, var(--color-txt2)); } } .c-arrow-wrapper.-white a, .c-arrow-wrapper.-white button { --color-hover-bg: var( --color-bg ); --border-color: var( --color-line6 ); --hover-border-color: var( --color-bg ); --hover-arrow-color: var( --color-txt ); } /* ------------------------------------------------------------ c-arrow2 丸の中に矢印 ------------------------------------------------------------ */ .c-arrow2 { display: flex; align-items: center; justify-content: center; min-width: var(--circle-size); width: var(--circle-size); min-height: var(--circle-size); height: var(--circle-size); border-radius: var(--radius-max); border: var(--solid-current); border-color: var(--border-color, var(--color-line)); padding-left: var(--padding-left); transition: var(--transition-hover); transition-property: border-color, background-color, color; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -xxsmall ---------- */ /* ---------- -xsmall ---------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------------------------------------- color デフォルトはグレー*currentColor それ以外は上書きする ---------------------------------------- */ /* ---------- -currentColor ---------- */ /* ---------- -whiteCurrent ---------- */ } .c-arrow2 svg { width: var(--arrow-width); height: var(--arrow-height); fill: none; } .c-arrow2 path { stroke: var(--arrow-color, currentColor); transition: stroke var(--transition-hover); } @media (hover: hover) { a:not(.js-hover-sm):hover .c-arrow2, button:hover .c-arrow2 { border-color: var(--hover-border-color, var(--color-hover)); background-color: var(--hover-bg-color, var(--color-hover)); color: var(--hover-arrow-color, var(--color-txt2)); } a:not(.js-hover-sm):hover .c-arrow2 svg, button:hover .c-arrow2 svg { -webkit-animation: hover-arrow var(--animation-hover); animation: hover-arrow var(--animation-hover); } } .c-arrow2.-xxsmall { --circle-size: 2rem ; --padding-left: 0.1rem ; --arrow-width: 0.6rem ; --arrow-height: 0.9rem ; } .c-arrow2.-xsmall { --padding-left: 0.1rem ; } @media screen and (min-width: 1024px) { .c-arrow2.-xsmall { --circle-size: 2.4rem ; --arrow-width: 0.6rem ; --arrow-height: 0.9rem ; } } @media screen and (max-width: 1023px) { .c-arrow2.-xsmall { --circle-size: 2rem ; --arrow-width: 0.6rem ; --arrow-height: 0.9rem ; } } .c-arrow2.-small { --circle-size: 3rem ; --arrow-width: 0.7rem ; --arrow-height: 1rem ; } .c-arrow2.-small2 { --circle-size: 3.2rem ; --padding-left: 0.2rem ; --arrow-width: 0.8rem ; --arrow-height: 1.2rem ; } @media screen and (min-width: 1024px) { .c-arrow2.-medium { --circle-size: 4.8rem ; --padding-left: 0.3rem ; --arrow-width: 1.1rem ; --arrow-height: 1.8rem ; } } @media screen and (max-width: 1023px) { .c-arrow2.-medium { --circle-size: 3.2rem ; --padding-left: 0.2rem ; --arrow-width: 0.8rem ; --arrow-height: 1.2rem ; } } .c-arrow2.-currentColor { --border-color: currentColor; --arrow-color: currentColor; } .c-arrow2.-whiteCurrent { --border-color: var( --color-line6 ); --arrow-color: currentColor; --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-txt2 ); --hover-arrow-color: var( --color-txt ); } /* ------------------------------------------------------------ c-arrow3 丸から矢印のみ ------------------------------------------------------------ */ .c-arrow3 { position: relative; display: flex; align-items: center; justify-content: center; width: var(--circle-size); height: var(--circle-size); border-radius: 50%; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -accent3-white ---------- */ } .c-arrow3::before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; border-radius: 50%; background-color: var(--circle-color); transition: -webkit-transform var(--transition-hover); transition: transform var(--transition-hover); transition: transform var(--transition-hover), -webkit-transform var(--transition-hover); } .c-arrow3 svg { position: relative; z-index: 1; width: var(--arrow-width); height: var(--arrow-height); fill: none; opacity: 0; transition: opacity var(--transition-hover); } .c-arrow3 path { stroke: var(--arrow-color, currentColor); } @media (hover: hover) { a:hover .c-arrow3::before, button:hover .c-arrow3::before { -webkit-transform: var(--hover-scale2); transform: var(--hover-scale2); } a:hover .c-arrow3 svg, button:hover .c-arrow3 svg { opacity: 1; } } .c-arrow3.-medium { --circle-size: 1.1rem ; --arrow-width: 0.7rem ; --arrow-height: 1rem ; } .c-arrow3.-accent3-white { --circle-color: var( --color-accent3 ); --arrow-color: var( --color-txt2 ); } /** * * down * */ /* ------------------------------------------------------------ c-down 下矢印 ------------------------------------------------------------ */ .c-down { position: relative; width: calc( var(--down-size) * var(--root2)); height: calc( var(--down-size) * var(--root2)); /* ---------------------------------------- size ---------------------------------------- */ } .c-down::before { content: ''; display: block; width: var(--down-size); height: var(--down-size); border-left: var(--solid-current); border-bottom: var(--solid-current); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } @media (hover: hover) { a:hover .c-down, button:hover .c-down, .p-form__select:hover .c-down { -webkit-animation: hover-down-center var(--animation-hover); animation: hover-down-center var(--animation-hover); } } .c-down.-small { --down-size: 0.8rem ; } /** * * icon.scss * */ /* ------------------------------------------------------------ c-icon ------------------------------------------------------------ */ .c-icon { display: inline-block; vertical-align: middle; letter-spacing: 0; line-height: 0; } /** * * play.scss * */ /* ------------------------------------------------------------ c-play ------------------------------------------------------------ */ .c-play { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; width: var(--square-size); height: var(--square-size); border-radius: var(--radius-4xs); background-color: var(--square-color); padding-left: var(--padding-left); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -white-black ---------- */ } .c-play::before { content: ''; display: block; width: var(--play-size); height: var(--play-size); clip-path: polygon(0 0, 0% 100%, 100% 50%); background-color: var(--play-color); } @media (hover: hover) { a:hover .c-play::before, button:hover .c-play::before { -webkit-animation: hover-arrow var(--animation-hover); animation: hover-arrow var(--animation-hover); } } .c-play.-small { --square-size: 3.2rem ; --play-size: 1.2rem ; --padding-left: 0.3rem ; } .c-play.-white-black { --square-color: var( --color-bg ); --play-color: var( --color-txt ); } /** * * looptxt.scss * */ /* ------------------------------------------------------------ c-looptxt ------------------------------------------------------------ */ .c-looptxt { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ /* ---------- -large2 ---------- */ } @media screen and (min-width: 1024px) { .c-looptxt.-medium { --slide-gap: 8rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-medium { --slide-gap: 4rem ; } } @media screen and (min-width: 1024px) { .c-looptxt.-medium .c-looptxt__en { font-size: var(--font-size128); line-height: calc( 160 / 128 * 1em); } } @media screen and (max-width: 1023px) { .c-looptxt.-medium .c-looptxt__en { font-size: var(--font-size64); } } @media screen and (min-width: 1024px) { .c-looptxt.-medium .c-looptxt__character { --slide-width: 14rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-medium .c-looptxt__character { --slide-width: 8rem ; } } @media screen and (min-width: 1024px) { .c-looptxt.-large { --slide-gap: 8rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-large { --slide-gap: 4rem ; } } @media screen and (min-width: 1024px) { .c-looptxt.-large .c-looptxt__en { font-size: var(--font-size160); line-height: 1; } } @media screen and (max-width: 1023px) { .c-looptxt.-large .c-looptxt__en { font-size: var(--font-size64); } } @media screen and (min-width: 1024px) { .c-looptxt.-large .c-looptxt__character { --slide-width: 14rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-large .c-looptxt__character { --slide-width: 8rem ; } } @media screen and (min-width: 1024px) { .c-looptxt.-large2 { --slide-gap: 8rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-large2 { --slide-gap: 3rem ; } } @media screen and (min-width: 1024px) { .c-looptxt.-large2 .c-looptxt__en { font-size: var(--font-size160); line-height: 1; } } @media screen and (max-width: 1023px) { .c-looptxt.-large2 .c-looptxt__en { font-size: var(--font-size64); } } @media screen and (min-width: 1024px) { .c-looptxt.-large2 .c-looptxt__character { --slide-width: 14rem ; } } @media screen and (max-width: 1023px) { .c-looptxt.-large2 .c-looptxt__character { --slide-width: 7rem ; } } .c-looptxt__en { font-family: var(--font-sans-serif2); font-weight: 600; letter-spacing: var(--letter-spacing-_xs); line-height: var(--line-height-noraml); } /** * * ls.scss * */ /* ------------------------------------------------------------ c-ls letter-spacingで生じる余白をmarginを使って相殺 ------------------------------------------------------------ */ [class*="c-ls"] { letter-spacing: var(--letter-spacing); } .c-ls { margin-right: calc( var( --letter-spacing ) * -1); } .c-ls-v { margin-bottom: calc( var( --letter-spacing ) * -1); } @media screen and (min-width: 1024px) { .c-ls-v-h-lg { margin-bottom: calc( var( --letter-spacing ) * -1); } } @media screen and (max-width: 1023px) { .c-ls-v-h-lg { margin-right: calc( var( --letter-spacing ) * -1); } } @media screen and (min-width: 1024px) { .c-ls-h-v-lg { margin-right: calc( var( --letter-spacing ) * -1); } } @media screen and (max-width: 1023px) { .c-ls-h-v-lg { margin-bottom: calc( var( --letter-spacing ) * -1); } } /** * * small * */ /* ------------------------------------------------------------ c-small ------------------------------------------------------------ */ .c-small { display: flex; align-items: baseline; line-height: inherit; } .c-small::before { content: '※'; } .c-small small { flex: 1; } /** * * table.scss * */ /* ------------------------------------------------------------ c-table ------------------------------------------------------------ */ .c-table { border-bottom: var(--solid); line-height: var(--line-height-noraml); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ /* ---------------------------------------- dt size ---------------------------------------- */ /* ---------- -grid2 ---------- */ /* ---------- -grid3 ---------- */ } .c-table dl { border-top: var(--solid); } @media screen and (min-width: 1024px) { .c-table dl { display: flex; align-items: baseline; gap: var(--gap); } } @media screen and (max-width: 1023px) { .c-table dl { display: grid; gap: 1rem ; padding: 1.9rem 0 ; } } .c-table dt { display: flex; } @media screen and (min-width: 1024px) { .c-table dt { gap: var(--gap); } } .c-table dd { font-weight: 400; } @media screen and (min-width: 1024px) { .c-table dd { flex: 1; } } @media screen and (min-width: 1024px) { .c-table.-medium { font-size: var(--font-size16); } } @media screen and (max-width: 1023px) { .c-table.-medium { font-size: var(--font-size14); } } @media screen and (min-width: 1024px) { .c-table.-medium dl { padding: 2.9rem 0 ; } } @media screen and (min-width: 1024px) { .c-table.-large { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .c-table.-large { font-size: var(--font-size14); } } @media screen and (min-width: 1024px) { .c-table.-large dl { gap: calc( var(--gap) * 0.5); padding: 2.4rem 0 ; } } .c-table.-large dt { font-weight: 400; } @media screen and (max-width: 1023px) { .c-table.-large dt { gap: 1em; } } @media screen and (min-width: 1024px) { .c-table.-large .c-table__year { width: var(--grid); } } @media screen and (min-width: 1024px) { .c-table.-large .c-table__month { width: var(--grid2); } } @media screen and (min-width: 1024px) { .c-table.-grid2 dt { width: var(--grid2); } } @media screen and (min-width: 1024px) { .c-table.-grid3 dt { width: var(--grid3); } } /* ---------- c-table__list ---------- */ .c-table__list { display: grid; gap: 3rem ; } .c-table__list__title { font-weight: 700; font-size: inherit; line-height: inherit; } .c-table__list__txt { font-size: inherit; line-height: inherit; margin-top: 0.5rem ; } @media screen and (min-width: 1024px) { .c-table__list__txt { line-height: calc( 24 / 16 * 1em); } } /** * * title.scss * */ /* ------------------------------------------------------------ c-title キャッチコピー ------------------------------------------------------------ */ .c-title { letter-spacing: var(--letter-spacing-_rg); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .c-title.-small { font-weight: 700; } @media screen and (min-width: 1024px) { .c-title.-small { font-size: var(--font-size48); line-height: calc( 72 / 48 * 1em); } } @media screen and (max-width: 1023px) { .c-title.-small { font-size: var(--font-size24); line-height: calc( 36 / 24 * 1em); } } @media screen and (min-width: 1024px) { .c-title.-medium { font-size: var(--font-size64); line-height: calc( 86 / 64 * 1em); } } @media screen and (max-width: 1023px) { .c-title.-medium { font-size: var(--font-size24); line-height: calc( 36 / 24 * 1em); } } .c-title.-large { font-weight: 700; } @media screen and (min-width: 1024px) { .c-title.-large { font-size: var(--font-size72); line-height: calc( 100 / 72 * 1em); } } @media screen and (max-width: 1023px) { .c-title.-large { font-size: var(--font-size26); line-height: calc( 40 / 26 * 1em); } } /* ------------------------------------------------------------ c-title2 日本語のみのタイトル ------------------------------------------------------------ */ .c-title2 { font-weight: 700; line-height: var(--line-height-noraml); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -regular ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ /* ---------------------------------------- space 余白はベースじゃない時は上書きする ---------------------------------------- */ /* ---------- -space-md ---------- */ /* ---------- -space-lg ---------- */ } @media screen and (min-width: 1024px) { .c-title2 { margin-bottom: 4rem ; } } @media screen and (max-width: 1023px) { .c-title2 { margin-bottom: 3rem ; } } @media screen and (min-width: 1024px) { .c-title2.-small { font-size: var(--font-size30); } } @media screen and (max-width: 1023px) { .c-title2.-small { font-size: var(--font-size24); } } @media screen and (min-width: 1024px) { .c-title2.-regular { font-size: var(--font-size32); } } @media screen and (max-width: 1023px) { .c-title2.-regular { font-size: var(--font-size24); } } @media screen and (min-width: 1024px) { .c-title2.-regular2 { font-size: var(--font-size32); line-height: calc( 48 / 32 * 1em); } } @media screen and (max-width: 1023px) { .c-title2.-regular2 { font-size: var(--font-size24); } } @media screen and (min-width: 1024px) { .c-title2.-medium { font-size: var(--font-size36); } } @media screen and (max-width: 1023px) { .c-title2.-medium { font-size: var(--font-size24); } } @media screen and (min-width: 1024px) { .c-title2.-medium2 { font-size: var(--font-size36); } } @media screen and (max-width: 1023px) { .c-title2.-medium2 { font-size: var(--font-size32); } } @media screen and (min-width: 1024px) { .c-title2.-large { font-size: var(--font-size40); } } @media screen and (max-width: 1023px) { .c-title2.-large { font-size: var(--font-size24); } } @media screen and (min-width: 1024px) { .c-title2.-space-md { margin-bottom: 6rem ; } } @media screen and (max-width: 1023px) { .c-title2.-space-md { margin-bottom: 3rem ; } } @media screen and (min-width: 1024px) { .c-title2.-space-md2 { margin-bottom: 5.4rem ; } } @media screen and (max-width: 1023px) { .c-title2.-space-md2 { margin-bottom: 4rem ; } } @media screen and (min-width: 1024px) { .c-title2.-space-lg { margin-bottom: 8rem ; } } @media screen and (max-width: 1023px) { .c-title2.-space-lg { margin-bottom: 4rem ; } } /* ------------------------------------------------------------ c-title3 フッターなどにある、英字日本語の横並びタイトル ------------------------------------------------------------ */ .c-title3 { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ /* ---------------------------------------- align ---------------------------------------- */ /* ---------- -align-end ---------- */ } @media screen and (min-width: 1024px) { .c-title3 { display: flex; align-items: center; } } @media screen and (min-width: 1024px) { .c-title3.-small { gap: 4rem ; } } @media screen and (min-width: 1024px) { .c-title3.-small .c-title3__en { font-size: var(--font-size48); } } @media screen and (max-width: 1023px) { .c-title3.-small .c-title3__en { font-size: var(--font-size36); } } @media screen and (min-width: 1024px) { .c-title3.-small .c-title3__ja { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .c-title3.-small .c-title3__ja { font-size: var(--font-size15); margin-top: 0.7rem ; } } @media screen and (min-width: 1024px) { .c-title3.-medium { gap: 4rem ; } } .c-title3.-medium .c-title3__en { font-family: var(--font-sans-serif2); font-weight: 600; } @media screen and (min-width: 1024px) { .c-title3.-medium .c-title3__en { font-size: var(--font-size64); line-height: 1; } } @media screen and (max-width: 1023px) { .c-title3.-medium .c-title3__en { font-size: var(--font-size36); } } @media screen and (min-width: 1024px) { .c-title3.-medium .c-title3__ja { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .c-title3.-medium .c-title3__ja { font-size: var(--font-size16); } } @media screen and (min-width: 1024px) { .c-title3.-large { gap: 4rem ; } } .c-title3.-large .c-title3__en { text-transform: uppercase; font-family: var(--font-sans-serif2); font-weight: 600; letter-spacing: var(--letter-spacing-_xs); } @media screen and (min-width: 1024px) { .c-title3.-large .c-title3__en { font-size: var(--font-size96); line-height: calc( 86 / 96 * 1em); } } @media screen and (max-width: 1023px) { .c-title3.-large .c-title3__en { font-size: var(--font-size48); } } .c-title3.-large .c-title3__ja { font-weight: 600; letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .c-title3.-large .c-title3__ja { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .c-title3.-large .c-title3__ja { font-size: var(--font-size16); } } @media screen and (min-width: 1024px) { .c-title3.-align-end { align-items: baseline; } } .c-title3__en { font-family: var(--font-sans-serif); line-height: var(--line-height-noraml); } .c-title3__ja { line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ c-title4 p-blockなどにある丸付きタイトル ------------------------------------------------------------ */ .c-title4 { display: flex; align-items: center; letter-spacing: var(--letter-spacing-_rg); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -regular ---------- */ } .c-title4::before { content: ''; display: block; min-width: var(--circle-size); width: var(--circle-size); min-height: var(--circle-size); height: var(--circle-size); border-radius: 50%; background: var(--color-gradation2); } .c-title4.-small { --circle-size: 1.6rem ; gap: 0.8rem ; } @media screen and (min-width: 1024px) { .c-title4.-small { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .c-title4.-small { font-size: var(--font-size18); } } .c-title4.-regular { --circle-size: 1.6rem ; gap: 0.8rem ; font-weight: 700; } @media screen and (min-width: 1024px) { .c-title4.-regular { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .c-title4.-regular { font-size: var(--font-size20); } } /* ------------------------------------------------------------ c-title5 イラスト、英語、日本語が縦並びのタイトル ------------------------------------------------------------ */ .c-title5 { text-align: center; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ } .c-title5::before { content: ''; display: block; margin-inline: auto; background-image: url("../img/common/illust/character_8.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .c-title5.-medium::before { margin-bottom: 0.7rem ; } @media screen and (min-width: 1024px) { .c-title5.-medium::before { width: 6.2rem ; height: 6.4rem ; } } @media screen and (max-width: 1023px) { .c-title5.-medium::before { width: 4.7rem ; height: 4.8rem ; } } @media screen and (min-width: 1024px) { .c-title5.-medium .c-title5__en { font-size: var(--font-size48); } } @media screen and (max-width: 1023px) { .c-title5.-medium .c-title5__en { font-size: var(--font-size32); } } @media screen and (min-width: 1024px) { .c-title5.-medium .c-title5__ja { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .c-title5.-medium .c-title5__ja { font-size: var(--font-size15); } } .c-title5__en { font-family: var(--font-sans-serif); font-weight: 600; line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-_2xs); } .c-title5__ja { line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-_rg); } /* ------------------------------------------------------------ c-title6 c-title3の縦並びバージョン 英字日本語の縦並びタイトル ------------------------------------------------------------ */ .c-title6 { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -xlarge ---------- */ } .c-title6.-small .c-title6__en { font-size: var(--font-size36); letter-spacing: 0; } .c-title6.-small .c-title6__ja { font-weight: 600; font-size: var(--font-size14); letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .c-title6.-medium .c-title6__en { font-size: var(--font-size64); line-height: 1; } } @media screen and (max-width: 1023px) { .c-title6.-medium .c-title6__en { font-size: var(--font-size48); } } @media screen and (min-width: 1024px) { .c-title6.-medium .c-title6__ja { font-size: var(--font-size20); margin-top: 1.5rem ; } } @media screen and (max-width: 1023px) { .c-title6.-medium .c-title6__ja { font-size: var(--font-size16); } } @media screen and (min-width: 1024px) { .c-title6.-xlarge .c-title6__en { font-size: var(--font-size140); line-height: calc( 120 / 140 * 1em); } } @media screen and (max-width: 1023px) { .c-title6.-xlarge .c-title6__en { font-size: var(--font-size46); line-height: calc( 42 / 46 * 1em); } } .c-title6.-xlarge .c-title6__ja { font-weight: 700; } @media screen and (min-width: 1024px) { .c-title6.-xlarge .c-title6__ja { font-size: var(--font-size36); margin-top: 2rem ; } } @media screen and (max-width: 1023px) { .c-title6.-xlarge .c-title6__ja { font-size: var(--font-size24); margin-top: 0.6rem ; } } .c-title6__en { font-family: var(--font-sans-serif2); font-weight: 600; line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-_xs); } .c-title6__ja { line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ c-title7 お問い合わせなどにある１行ごとに背景がついたタイトル ------------------------------------------------------------ */ .c-title7 { padding-left: var(--padding-lr); padding-right: var(--padding-lr); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -large ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -main-white ---------- */ } .c-title7 .js-linewrap__line { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: var(--radius-3xs); background-color: var(--bg-color); color: var(--txt-color); font-weight: 700; padding-top: var(--padding-top); padding-left: var(--padding-lr); padding-right: var(--padding-lr); padding-bottom: var(--padding-bottom); margin-left: calc( var(--padding-lr) * -1); margin-right: calc( var(--padding-lr) * -1); } .c-title7 .js-linewrap__line + .js-linewrap__line { margin-top: var(--line-gap); } @media screen and (min-width: 1024px) { .c-title7.-large { font-size: var(--font-size48); --padding-top: 0.7rem ; --padding-bottom: 0.9rem ; --padding-lr: 1rem ; --line-gap: 1rem ; } } @media screen and (max-width: 1023px) { .c-title7.-large { font-size: var(--font-size24); --padding-top: 0.5rem ; --padding-bottom: 0.7rem ; --padding-lr: 1rem ; --line-gap: 0.5rem ; } } .c-title7.-main-white { --bg-color: var( --color-main ); --txt-color: var( --color-txt2 ); } /** * * txt.scss * */ /* ------------------------------------------------------------ c-txts ------------------------------------------------------------ */ .c-txts > *:not(:last-child)::after { content: '\A\A'; display: inline; white-space: pre; } /* xs : 12 sm : 13 rg : 14 md : 15 lg : 16 xl : 18 2xl : 20 3xl : 22 4xl: 24 */ /* ------------------------------------------------------------ c-txt-sm ------------------------------------------------------------ */ .c-txt-sm { line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .c-txt-sm { font-size: var(--font-size13); } } @media screen and (max-width: 1023px) { .c-txt-sm { font-size: var(--font-size12); } } /* ------------------------------------------------------------ c-txt-rg ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .c-txt-rg { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-rg { font-size: var(--font-size12); line-height: calc( 20 / 12 * 1em); } } /* ------------------------------------------------------------ c-txt-md ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .c-txt-md { font-size: var(--font-size15); line-height: calc( 26 / 15 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-md { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } /* ------------------------------------------------------------ c-txt-lg ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .c-txt-lg { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-lg { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); letter-spacing: var(--letter-spacing-_md); } } .c-txt-lg2 { font-weight: 400; } @media screen and (min-width: 1024px) { .c-txt-lg2 { font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); } } @media screen and (min-width: 1024px) and (max-height: 768px) { .c-txt-lg2 { font-size: max(2.08333vh , 14px , 1.4rem ); } } @media screen and (max-width: 1023px) { .c-txt-lg2 { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } .c-txt-lg3 { font-weight: 400; } @media screen and (min-width: 1024px) { .c-txt-lg3 { font-size: var(--font-size16); line-height: calc( 26 / 16 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-lg3 { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); letter-spacing: var(--letter-spacing-_rg); } } .c-txt-lg4 { font-weight: 400; font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); } .c-txt-lg5 { font-weight: 400; } @media screen and (min-width: 1024px) { .c-txt-lg5 { font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-lg5 { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } /* ------------------------------------------------------------ c-txt-xl ------------------------------------------------------------ */ .c-txt-xl { font-weight: 400; } @media screen and (min-width: 1024px) { .c-txt-xl { font-size: var(--font-size18); line-height: calc( 36 / 18 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-xl { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } /* ------------------------------------------------------------ c-txt-2xl ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .c-txt-2xl { font-size: var(--font-size20); line-height: calc( 48 / 20 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-2xl { font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); } } .c-txt-2xl2 { font-weight: 700; } @media screen and (min-width: 1024px) { .c-txt-2xl2 { font-size: var(--font-size20); line-height: calc( 40 / 20 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-2xl2 { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } .c-txt-2xl3 { font-weight: 700; } @media screen and (min-width: 1024px) { .c-txt-2xl3 { font-size: var(--font-size20); line-height: calc( 40 / 20 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-2xl3 { font-size: var(--font-size15); line-height: calc( 30 / 15 * 1em); } } @media screen and (min-width: 1024px) { .c-txt-2xl4 { font-size: var(--font-size20); line-height: calc( 32 / 20 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-2xl4 { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); } } @media screen and (min-width: 1024px) { .c-txt-2xl5 { font-size: var(--font-size20); line-height: calc( 36 / 20 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-2xl5 { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); } } /* ------------------------------------------------------------ c-txt-3xl ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .c-txt-3xl { font-size: var(--font-size22); line-height: calc( 40 / 22 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-3xl { font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); letter-spacing: var(--letter-spacing-_rg); } } /* ------------------------------------------------------------ c-txt-4xl ------------------------------------------------------------ */ .c-txt-4xl { letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .c-txt-4xl { font-size: var(--font-size24); line-height: calc( 48 / 24 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-4xl { font-size: var(--font-size18); line-height: calc( 36 / 18 * 1em); } } .c-txt-4xl2 { letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .c-txt-4xl2 { font-size: var(--font-size24); line-height: calc( 56 / 24 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-4xl2 { font-size: var(--font-size16); line-height: calc( 32 / 16 * 1em); } } .c-txt-4xl3 { letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .c-txt-4xl3 { font-size: 1.38889vw; line-height: calc( 48 / 24 * 1em); } } @media screen and (min-width: 1728px) { .c-txt-4xl3 { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .c-txt-4xl3 { font-size: var(--font-size15); line-height: calc( 28 / 15 * 1em); } } .c-txt-4xl4 { font-weight: 700; } @media screen and (min-width: 1024px) { .c-txt-4xl4 { font-size: var(--font-size24); line-height: calc( 36 / 24 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-4xl4 { font-size: var(--font-size16); line-height: calc( 24 / 16 * 1em); } } @media screen and (min-width: 1024px) { .c-txt-4xl5 { font-size: var(--font-size24); line-height: calc( 56 / 24 * 1em); } } @media screen and (max-width: 1023px) { .c-txt-4xl5 { font-size: var(--font-size16); line-height: calc( 36 / 16 * 1em); } } /** * * delay.scss * */ /* ------------------------------------------------------------ js-delay- ------------------------------------------------------------ */ .js-delay-1 { transition-delay: calc( var( --transition-delay , 200ms ) + 160ms) !important; } .js-delay-2 { transition-delay: calc( var( --transition-delay , 200ms ) + 320ms) !important; } .js-delay-3 { transition-delay: calc( var( --transition-delay , 200ms ) + 480ms) !important; } .js-delay-4 { transition-delay: calc( var( --transition-delay , 200ms ) + 640ms) !important; } .js-delay-5 { transition-delay: calc( var( --transition-delay , 200ms ) + 800ms) !important; } .js-delay-6 { transition-delay: calc( var( --transition-delay , 200ms ) + 960ms) !important; } .js-delay-7 { transition-delay: calc( var( --transition-delay , 200ms ) + 1120ms) !important; } .js-delay-8 { transition-delay: calc( var( --transition-delay , 200ms ) + 1280ms) !important; } .js-delay-9 { transition-delay: calc( var( --transition-delay , 200ms ) + 1440ms) !important; } .js-delay-10 { transition-delay: calc( var( --transition-delay , 200ms ) + 1600ms) !important; } .js-delay-11 { transition-delay: calc( var( --transition-delay , 200ms ) + 1760ms) !important; } .js-delay-12 { transition-delay: calc( var( --transition-delay , 200ms ) + 1920ms) !important; } .js-delay-13 { transition-delay: calc( var( --transition-delay , 200ms ) + 2080ms) !important; } .js-delay-14 { transition-delay: calc( var( --transition-delay , 200ms ) + 2240ms) !important; } .js-delay-15 { transition-delay: calc( var( --transition-delay , 200ms ) + 2400ms) !important; } .js-delay-16 { transition-delay: calc( var( --transition-delay , 200ms ) + 2560ms) !important; } .js-delay-17 { transition-delay: calc( var( --transition-delay , 200ms ) + 2720ms) !important; } .js-delay-18 { transition-delay: calc( var( --transition-delay , 200ms ) + 2880ms) !important; } .js-delay-19 { transition-delay: calc( var( --transition-delay , 200ms ) + 3040ms) !important; } .js-delay-20 { transition-delay: calc( var( --transition-delay , 200ms ) + 3200ms) !important; } /* ------------------------------------------------------------ js-var-delay- ------------------------------------------------------------ */ .js-var-delay-0 { --transition-delay: 0ms; } .js-var-delay-1 { --transition-delay: 160ms; } .js-var-delay-2 { --transition-delay: 320ms; } .js-var-delay-3 { --transition-delay: 480ms; } .js-var-delay-4 { --transition-delay: 640ms; } .js-var-delay-5 { --transition-delay: 800ms; } .js-var-delay-6 { --transition-delay: 960ms; } .js-var-delay-7 { --transition-delay: 1120ms; } .js-var-delay-8 { --transition-delay: 1280ms; } .js-var-delay-9 { --transition-delay: 1440ms; } .js-var-delay-10 { --transition-delay: 1600ms; } .js-var-delay-11 { --transition-delay: 1760ms; } .js-var-delay-12 { --transition-delay: 1920ms; } .js-var-delay-13 { --transition-delay: 2080ms; } .js-var-delay-14 { --transition-delay: 2240ms; } .js-var-delay-15 { --transition-delay: 2400ms; } .js-var-delay-16 { --transition-delay: 2560ms; } .js-var-delay-17 { --transition-delay: 2720ms; } .js-var-delay-18 { --transition-delay: 2880ms; } .js-var-delay-19 { --transition-delay: 3040ms; } .js-var-delay-20 { --transition-delay: 3200ms; } /** * * svg.scss * */ /* ------------------------------------------------------------ js-svg ------------------------------------------------------------ */ img.js-svg { opacity: 0; } /** * * fade.scss * */ /* ------------------------------------------------------------ js-fade ------------------------------------------------------------ */ .js-fade { opacity: 0; transition: var(--transition-fade); transition-property: opacity; transition-delay: var(--transition-delay, 200ms); } .js-fade.is-shown, .is-shown .js-fade { opacity: 1; } .js-fades > * { opacity: 0; transition: var(--transition-fade); transition-property: opacity; } .js-fades > *:nth-child(1) { transition-delay: calc( var( --transition-delay , 200ms ) + 160ms); } .js-fades > *:nth-child(2) { transition-delay: calc( var( --transition-delay , 200ms ) + 320ms); } .js-fades > *:nth-child(3) { transition-delay: calc( var( --transition-delay , 200ms ) + 480ms); } .js-fades > *:nth-child(4) { transition-delay: calc( var( --transition-delay , 200ms ) + 640ms); } .js-fades > *:nth-child(5) { transition-delay: calc( var( --transition-delay , 200ms ) + 800ms); } .js-fades > *:nth-child(6) { transition-delay: calc( var( --transition-delay , 200ms ) + 960ms); } .js-fades > *:nth-child(7) { transition-delay: calc( var( --transition-delay , 200ms ) + 1120ms); } .js-fades > *:nth-child(8) { transition-delay: calc( var( --transition-delay , 200ms ) + 1280ms); } .js-fades > *:nth-child(9) { transition-delay: calc( var( --transition-delay , 200ms ) + 1440ms); } .js-fades > *:nth-child(10) { transition-delay: calc( var( --transition-delay , 200ms ) + 1600ms); } .js-fades > *:nth-child(11) { transition-delay: calc( var( --transition-delay , 200ms ) + 1760ms); } .js-fades > *:nth-child(12) { transition-delay: calc( var( --transition-delay , 200ms ) + 1920ms); } .js-fades > *:nth-child(13) { transition-delay: calc( var( --transition-delay , 200ms ) + 2080ms); } .js-fades > *:nth-child(14) { transition-delay: calc( var( --transition-delay , 200ms ) + 2240ms); } .js-fades > *:nth-child(15) { transition-delay: calc( var( --transition-delay , 200ms ) + 2400ms); } .js-fades > *:nth-child(16) { transition-delay: calc( var( --transition-delay , 200ms ) + 2560ms); } .js-fades > *:nth-child(17) { transition-delay: calc( var( --transition-delay , 200ms ) + 2720ms); } .js-fades > *:nth-child(18) { transition-delay: calc( var( --transition-delay , 200ms ) + 2880ms); } .js-fades > *:nth-child(19) { transition-delay: calc( var( --transition-delay , 200ms ) + 3040ms); } .js-fades > *:nth-child(20) { transition-delay: calc( var( --transition-delay , 200ms ) + 3200ms); } .js-fades.is-shown > *, .is-shown .js-fades > * { opacity: 1; } /** * * fadeup.scss * */ /* ------------------------------------------------------------ js-fadeup ------------------------------------------------------------ */ .js-fadeup { opacity: 0; -webkit-transform: translate3d(0, 2rem, 0) rotate(0.001deg); transform: translate3d(0, 2rem, 0) rotate(0.001deg); transition: var(--transition-fadeup); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-delay: var(--transition-delay, 200ms); } .js-fadeup.is-shown, .is-shown .js-fadeup { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0.001deg); transform: translate3d(0, 0, 0) rotate(0.001deg); } /* ------------------------------------------------------------ js-fadeups ------------------------------------------------------------ */ .js-fadeups > * { opacity: 0; -webkit-transform: translate3d(0, 2rem, 0) rotate(0.001deg); transform: translate3d(0, 2rem, 0) rotate(0.001deg); transition: var(--transition-fadeup); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } .js-fadeups > *:nth-child(1) { transition-delay: calc( var( --transition-delay , 200ms ) + 160ms); } .js-fadeups > *:nth-child(2) { transition-delay: calc( var( --transition-delay , 200ms ) + 320ms); } .js-fadeups > *:nth-child(3) { transition-delay: calc( var( --transition-delay , 200ms ) + 480ms); } .js-fadeups > *:nth-child(4) { transition-delay: calc( var( --transition-delay , 200ms ) + 640ms); } .js-fadeups > *:nth-child(5) { transition-delay: calc( var( --transition-delay , 200ms ) + 800ms); } .js-fadeups > *:nth-child(6) { transition-delay: calc( var( --transition-delay , 200ms ) + 960ms); } .js-fadeups > *:nth-child(7) { transition-delay: calc( var( --transition-delay , 200ms ) + 1120ms); } .js-fadeups > *:nth-child(8) { transition-delay: calc( var( --transition-delay , 200ms ) + 1280ms); } .js-fadeups > *:nth-child(9) { transition-delay: calc( var( --transition-delay , 200ms ) + 1440ms); } .js-fadeups > *:nth-child(10) { transition-delay: calc( var( --transition-delay , 200ms ) + 1600ms); } .js-fadeups > *:nth-child(11) { transition-delay: calc( var( --transition-delay , 200ms ) + 1760ms); } .js-fadeups > *:nth-child(12) { transition-delay: calc( var( --transition-delay , 200ms ) + 1920ms); } .js-fadeups > *:nth-child(13) { transition-delay: calc( var( --transition-delay , 200ms ) + 2080ms); } .js-fadeups > *:nth-child(14) { transition-delay: calc( var( --transition-delay , 200ms ) + 2240ms); } .js-fadeups > *:nth-child(15) { transition-delay: calc( var( --transition-delay , 200ms ) + 2400ms); } .js-fadeups > *:nth-child(16) { transition-delay: calc( var( --transition-delay , 200ms ) + 2560ms); } .js-fadeups > *:nth-child(17) { transition-delay: calc( var( --transition-delay , 200ms ) + 2720ms); } .js-fadeups > *:nth-child(18) { transition-delay: calc( var( --transition-delay , 200ms ) + 2880ms); } .js-fadeups > *:nth-child(19) { transition-delay: calc( var( --transition-delay , 200ms ) + 3040ms); } .js-fadeups > *:nth-child(20) { transition-delay: calc( var( --transition-delay , 200ms ) + 3200ms); } .js-fadeups.is-shown > *, .is-shown .js-fadeups > * { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0.001deg); transform: translate3d(0, 0, 0) rotate(0.001deg); } /* ------------------------------------------------------------ js-fadeup2 ------------------------------------------------------------ */ .js-fadeup2 { opacity: 0; -webkit-transform: translate3d(0, 1rem, 0) rotate(0.001deg); transform: translate3d(0, 1rem, 0) rotate(0.001deg); transition: var(--transition-fadeup2); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-delay: var(--transition-delay, 300ms); } .js-fadeup2.is-shown, .is-shown .js-fadeup2 { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0.001deg); transform: translate3d(0, 0, 0) rotate(0.001deg); } /* ------------------------------------------------------------ js-fadeup2s ------------------------------------------------------------ */ .js-fadeup2s > * { opacity: 0; -webkit-transform: translate3d(0, 1rem, 0) rotate(0.001deg); transform: translate3d(0, 1rem, 0) rotate(0.001deg); transition: var(--transition-fadeup2); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } .js-fadeup2s > *:nth-child(1) { transition-delay: calc( var( --transition-delay , 300ms ) + 200ms); } .js-fadeup2s > *:nth-child(2) { transition-delay: calc( var( --transition-delay , 300ms ) + 400ms); } .js-fadeup2s > *:nth-child(3) { transition-delay: calc( var( --transition-delay , 300ms ) + 600ms); } .js-fadeup2s > *:nth-child(4) { transition-delay: calc( var( --transition-delay , 300ms ) + 800ms); } .js-fadeup2s > *:nth-child(5) { transition-delay: calc( var( --transition-delay , 300ms ) + 1000ms); } .js-fadeup2s > *:nth-child(6) { transition-delay: calc( var( --transition-delay , 300ms ) + 1200ms); } .js-fadeup2s > *:nth-child(7) { transition-delay: calc( var( --transition-delay , 300ms ) + 1400ms); } .js-fadeup2s > *:nth-child(8) { transition-delay: calc( var( --transition-delay , 300ms ) + 1600ms); } .js-fadeup2s > *:nth-child(9) { transition-delay: calc( var( --transition-delay , 300ms ) + 1800ms); } .js-fadeup2s > *:nth-child(10) { transition-delay: calc( var( --transition-delay , 300ms ) + 2000ms); } .js-fadeup2s > *:nth-child(11) { transition-delay: calc( var( --transition-delay , 300ms ) + 2200ms); } .js-fadeup2s > *:nth-child(12) { transition-delay: calc( var( --transition-delay , 300ms ) + 2400ms); } .js-fadeup2s > *:nth-child(13) { transition-delay: calc( var( --transition-delay , 300ms ) + 2600ms); } .js-fadeup2s > *:nth-child(14) { transition-delay: calc( var( --transition-delay , 300ms ) + 2800ms); } .js-fadeup2s > *:nth-child(15) { transition-delay: calc( var( --transition-delay , 300ms ) + 3000ms); } .js-fadeup2s > *:nth-child(16) { transition-delay: calc( var( --transition-delay , 300ms ) + 3200ms); } .js-fadeup2s > *:nth-child(17) { transition-delay: calc( var( --transition-delay , 300ms ) + 3400ms); } .js-fadeup2s > *:nth-child(18) { transition-delay: calc( var( --transition-delay , 300ms ) + 3600ms); } .js-fadeup2s > *:nth-child(19) { transition-delay: calc( var( --transition-delay , 300ms ) + 3800ms); } .js-fadeup2s > *:nth-child(20) { transition-delay: calc( var( --transition-delay , 300ms ) + 4000ms); } .js-fadeup2s.is-shown > *, .is-shown .js-fadeup2s > * { opacity: 1; -webkit-transform: translate3d(0, 0, 0) rotate(0.001deg); transform: translate3d(0, 0, 0) rotate(0.001deg); } /** * * mask.scss * */ /* ------------------------------------------------------------ js-mask ------------------------------------------------------------ */ /** * * parallax.scss * */ /* ------------------------------------------------------------ js-parallax-img ------------------------------------------------------------ */ /** * * scale.scss * */ /* ------------------------------------------------------------ js-scale ------------------------------------------------------------ */ .js-scale { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); transition: var(--transition-scale); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-delay: var(--transition-delay, 200ms); } .js-scale.is-shown, .is-shown .js-scale { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* ------------------------------------------------------------ js-scales ------------------------------------------------------------ */ .js-scales > * { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); transition: var(--transition-scale); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } .js-scales > *:nth-child(1) { transition-delay: calc( var( --transition-delay , 200ms ) + 120ms); } .js-scales > *:nth-child(2) { transition-delay: calc( var( --transition-delay , 200ms ) + 240ms); } .js-scales > *:nth-child(3) { transition-delay: calc( var( --transition-delay , 200ms ) + 360ms); } .js-scales > *:nth-child(4) { transition-delay: calc( var( --transition-delay , 200ms ) + 480ms); } .js-scales > *:nth-child(5) { transition-delay: calc( var( --transition-delay , 200ms ) + 600ms); } .js-scales > *:nth-child(6) { transition-delay: calc( var( --transition-delay , 200ms ) + 720ms); } .js-scales > *:nth-child(7) { transition-delay: calc( var( --transition-delay , 200ms ) + 840ms); } .js-scales > *:nth-child(8) { transition-delay: calc( var( --transition-delay , 200ms ) + 960ms); } .js-scales > *:nth-child(9) { transition-delay: calc( var( --transition-delay , 200ms ) + 1080ms); } .js-scales > *:nth-child(10) { transition-delay: calc( var( --transition-delay , 200ms ) + 1200ms); } .js-scales > *:nth-child(11) { transition-delay: calc( var( --transition-delay , 200ms ) + 1320ms); } .js-scales > *:nth-child(12) { transition-delay: calc( var( --transition-delay , 200ms ) + 1440ms); } .js-scales > *:nth-child(13) { transition-delay: calc( var( --transition-delay , 200ms ) + 1560ms); } .js-scales > *:nth-child(14) { transition-delay: calc( var( --transition-delay , 200ms ) + 1680ms); } .js-scales > *:nth-child(15) { transition-delay: calc( var( --transition-delay , 200ms ) + 1800ms); } .js-scales > *:nth-child(16) { transition-delay: calc( var( --transition-delay , 200ms ) + 1920ms); } .js-scales > *:nth-child(17) { transition-delay: calc( var( --transition-delay , 200ms ) + 2040ms); } .js-scales > *:nth-child(18) { transition-delay: calc( var( --transition-delay , 200ms ) + 2160ms); } .js-scales > *:nth-child(19) { transition-delay: calc( var( --transition-delay , 200ms ) + 2280ms); } .js-scales > *:nth-child(20) { transition-delay: calc( var( --transition-delay , 200ms ) + 2400ms); } .js-scales.is-shown > *, .is-shown .js-scales > * { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* ------------------------------------------------------------ js-scale2 ------------------------------------------------------------ */ .js-scale2 { opacity: 0; -webkit-transform: scale(0); transform: scale(0); transition: var(--transition-scale); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; transition-delay: var(--transition-delay, 200ms); } .js-scale2.is-shown, .is-shown .js-scale2 { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /* ------------------------------------------------------------ js-scale2s ------------------------------------------------------------ */ .js-scale2s > * { opacity: 0; -webkit-transform: scale(0); transform: scale(0); transition: var(--transition-scale); transition-property: opacity,-webkit-transform; transition-property: opacity,transform; transition-property: opacity,transform,-webkit-transform; } .js-scale2s > *:nth-child(1) { transition-delay: calc( var( --transition-delay , 200ms ) + 120ms); } .js-scale2s > *:nth-child(2) { transition-delay: calc( var( --transition-delay , 200ms ) + 240ms); } .js-scale2s > *:nth-child(3) { transition-delay: calc( var( --transition-delay , 200ms ) + 360ms); } .js-scale2s > *:nth-child(4) { transition-delay: calc( var( --transition-delay , 200ms ) + 480ms); } .js-scale2s > *:nth-child(5) { transition-delay: calc( var( --transition-delay , 200ms ) + 600ms); } .js-scale2s > *:nth-child(6) { transition-delay: calc( var( --transition-delay , 200ms ) + 720ms); } .js-scale2s > *:nth-child(7) { transition-delay: calc( var( --transition-delay , 200ms ) + 840ms); } .js-scale2s > *:nth-child(8) { transition-delay: calc( var( --transition-delay , 200ms ) + 960ms); } .js-scale2s > *:nth-child(9) { transition-delay: calc( var( --transition-delay , 200ms ) + 1080ms); } .js-scale2s > *:nth-child(10) { transition-delay: calc( var( --transition-delay , 200ms ) + 1200ms); } .js-scale2s > *:nth-child(11) { transition-delay: calc( var( --transition-delay , 200ms ) + 1320ms); } .js-scale2s > *:nth-child(12) { transition-delay: calc( var( --transition-delay , 200ms ) + 1440ms); } .js-scale2s > *:nth-child(13) { transition-delay: calc( var( --transition-delay , 200ms ) + 1560ms); } .js-scale2s > *:nth-child(14) { transition-delay: calc( var( --transition-delay , 200ms ) + 1680ms); } .js-scale2s > *:nth-child(15) { transition-delay: calc( var( --transition-delay , 200ms ) + 1800ms); } .js-scale2s > *:nth-child(16) { transition-delay: calc( var( --transition-delay , 200ms ) + 1920ms); } .js-scale2s > *:nth-child(17) { transition-delay: calc( var( --transition-delay , 200ms ) + 2040ms); } .js-scale2s > *:nth-child(18) { transition-delay: calc( var( --transition-delay , 200ms ) + 2160ms); } .js-scale2s > *:nth-child(19) { transition-delay: calc( var( --transition-delay , 200ms ) + 2280ms); } .js-scale2s > *:nth-child(20) { transition-delay: calc( var( --transition-delay , 200ms ) + 2400ms); } .js-scale2s.is-shown > *, .is-shown .js-scale2s > * { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } /** * * scrollscale.scss * */ /* ------------------------------------------------------------ js-scrollscale ------------------------------------------------------------ */ .js-scrollscale { overflow: hidden; } .js-scrollscale__figure { width: 100%; height: 100%; } /** * * splittext.scss * */ /* ------------------------------------------------------------ js-splittext ------------------------------------------------------------ */ .js-splittext { opacity: 0; } .js-splittext.is-split { opacity: 1; } .js-splittext__char { opacity: 0.08; transition: opacity var(--transition-splittext); } .is-shown.js-splittext .js-splittext__char, .is-shown .js-splittext .js-splittext__char { opacity: 1; } /** * * tobari.scss * */ /* ------------------------------------------------------------ js-tobari ------------------------------------------------------------ */ /** * * accordion.scss * */ /* ------------------------------------------------------------ js-accordion__panel ------------------------------------------------------------ */ @media screen and (max-width: 1023px) { .js-accordion-click-mqDown-lg .js-accordion__panel { height: 0; overflow: hidden; transition: height var(--transition-accordion); } } /** * * hover.scss * */ /* ------------------------------------------------------------ js-hover ------------------------------------------------------------ */ .js-hover, .js-hover-sm { position: relative; overflow: hidden; } .js-hover.-back, .js-hover-sm.-back { -webkit-transform: translateZ(0); transform: translateZ(0); } .js-hover.-back .js-hover__ripple, .js-hover-sm.-back .js-hover__ripple { z-index: -1; } .js-hover__ripple { position: absolute; left: 0; top: 0; z-index: 100; border-radius: 50%; pointer-events: none; will-change: transform, opacity; } /* ------------------------------------------------------------ js-hover-txt ------------------------------------------------------------ */ .js-hover-txt { position: relative; } .js-hover-txt__upper { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--color-hover); clip-path: circle(0 at 0 0); font: inherit; letter-spacing: inherit; white-space: inherit; } /** * * loopslider.scss * */ /* ------------------------------------------------------------ js-loopslider ------------------------------------------------------------ */ .js-loopslider { -webkit-user-select: none; -ms-user-select: none; user-select: none; cursor: -webkit-grab; cursor: grab; display: flex; overflow: hidden; } .js-loopslider.-txt { pointer-events: none; } .js-loopslider.-rtl, .js-loopslider.-ltr { touch-action: pan-y; } .js-loopslider.-ttb, .js-loopslider.-btt { touch-action: pan-x; } .js-loopslider.is-dragging { cursor: -webkit-grabbing; cursor: grabbing; pointer-events: none; } .js-loopslider .js-loopslider__content { display: flex; align-items: center; flex-wrap: nowrap; gap: var(--slide-gap, 0px); width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; } .js-loopslider .js-loopslider__content > *:not(.p-card) { flex: 0 0 auto; display: flex; min-width: var(--slide-width, auto); width: var(--slide-width, auto); } .js-loopslider.-ttb .js-loopslider__content, .js-loopslider.-btt .js-loopslider__content { flex-direction: column; } .js-loopslider.-ttb .js-loopslider__content > *, .js-loopslider.-btt .js-loopslider__content > * { width: 100%; } .js-loopslider .js-loopslider__txt { display: block; white-space: nowrap; padding-right: 0.25em; } .js-loopslider img { display: block; user-drag: none; } /* * * modal.scss * */ /* ------------------------------------------------------------ js-modal ------------------------------------------------------------ */ .js-modal { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-index-js-modal); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition-modal); transition-property: opacity,visibility; -webkit-backdrop-filter: var(--overlay-blur); backdrop-filter: var(--overlay-blur); } .js-modal.is-loading, .js-modal.is-visible { opacity: 1; visibility: visible; } .js-modal.is-loading { pointer-events: none; } .js-modal.is-loading::after { opacity: 1; } .js-modal::after { content: ''; display: block; width: var(--icon-loading); height: var(--icon-loading); background-image: url("../img/common/icon/apng-loading.png"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(0.00001deg); transform: translate(-50%, -50%) rotate(0.00001deg); z-index: 10; pointer-events: none; opacity: 0; transition: opacity var(--transition-icon); } .js-modal__inner { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: var(--gap); } .js-modal__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } /* ---------------------------------------- js-modal__youtube ---------------------------------------- */ .js-modal__youtube { position: relative; z-index: 100; max-width: 120rem ; width: 100%; max-height: 80%; opacity: 0; visibility: hidden; transition: var(--transition-modal); transition-property: opacity,visibility; pointer-events: none; } .js-modal__youtube::after { content: ''; display: block; padding-top: 56.25%; } .js-modal__youtube.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } .js-modal__youtube.is-change { opacity: 0; visibility: hidden; pointer-events: none; } .js-modal__youtube__iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: auto; } .js-modal__youtube__caption { display: none; } /* ------------------------------------------------------------ ui ------------------------------------------------------------ */ /* ---------- js-modal__navigation ---------- */ .js-modal__navigation { display: none; } /* ---------- js-modal__close ---------- */ .js-modal__close { position: absolute; z-index: 100; padding: 1rem ; margin: -1rem ; pointer-events: auto; cursor: pointer; transition: opacity var(--transition-hover); transition: opacity var(--transition-hover); } @media (hover: hover) { .js-modal__close:hover { opacity: var(--hover-opacity); } } @media screen and (min-width: 1024px) { .js-modal__close { top: 6rem ; right: 6rem ; } } @media screen and (max-width: 1023px) { .js-modal__close { top: 3rem ; right: 3rem ; } } .js-modal__close button { position: relative; display: block; } @media screen and (min-width: 1024px) { .js-modal__close button { width: 5rem ; height: 5rem ; } } @media screen and (max-width: 1023px) { .js-modal__close button { width: 3rem ; height: 3rem ; } } .js-modal__close span { display: block; width: 135%; height: 1px; background-color: var(--color-bg); margin: auto; position: absolute; top: 50%; left: 50%; } .js-modal__close span:nth-of-type(1) { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .js-modal__close span:nth-of-type(2) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); } /* ------------------------------------------------------------ js-modal2 コンテンツのモーダル ------------------------------------------------------------ */ .js-modal2 { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: var(--z-index-js-modal2); opacity: 0; visibility: hidden; transition: var(--transition-modal); transition-property: opacity,visibility; -webkit-backdrop-filter: var(--overlay-blur); backdrop-filter: var(--overlay-blur); } @media screen and (min-width: 1024px) { .js-modal2 { --space: 3rem ; } } @media screen and (max-width: 1023px) { .js-modal2 { --space: 6.4rem ; } } .js-modal2.is-visible { opacity: 1; visibility: visible; } .js-modal2.is-change * { pointer-events: none !important; } .js-modal2-template { display: none !important; } .js-modal2__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: none; } .js-modal2__contents { position: relative; z-index: 10; width: 100%; max-height: 100%; opacity: 0; visibility: hidden; transition: 400ms ease; transition-property: opacity,visibility; pointer-events: none; } .js-modal2__contents > * { pointer-events: auto; } .js-modal2__contents::before, .js-modal2__contents::after { content: ''; display: block; min-height: var(--space); height: var(--space); } .js-modal2__contents.is-visible { opacity: 1; visibility: visible; } .js-modal2__contents.is-change { opacity: 0; visibility: hidden; } /* ---------------------------------------- js-modal2__close ---------------------------------------- */ .js-modal2__close { display: none; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 100; } @media screen and (min-width: 1024px) { .js-modal2__close { bottom: 12rem ; } } @media screen and (max-width: 1023px) { .js-modal2__close { bottom: 8rem ; } } /* ---------------------------------------- js-modal2__navigation ---------------------------------------- */ .js-modal2__navigation__prev, .js-modal2__navigation__next { display: none; } /* * * slider.scss * */ /* ------------------------------------------------------------ js-slider ------------------------------------------------------------ */ .js-slider { /* ---------- js-slider__content ---------- */ } .js-slider .js-slider__content { width: 100%; height: 100%; position: relative; overflow: hidden; } .js-slider .js-slider__content li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: var(--transition-slider); transition-property: opacity,visibility; } .js-slider .js-slider__content li.is-active { opacity: 1; visibility: visible; } .js-slider .js-slider__content li.-tb { height: 102%; -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } .js-slider .js-slider__content li.-tb.is-put { -webkit-animation: var(--animation-slider-move) slide_tb; animation: var(--animation-slider-move) slide_tb; } .js-slider .js-slider__content li.-bt { height: 102%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js-slider .js-slider__content li.-bt.is-put { -webkit-animation: var(--animation-slider-move) slide_bt; animation: var(--animation-slider-move) slide_bt; } .js-slider .js-slider__content li.-lr { width: 102%; -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } .js-slider .js-slider__content li.-lr.is-put { -webkit-animation: var(--animation-slider-move) slide_lr; animation: var(--animation-slider-move) slide_lr; } .js-slider .js-slider__content li.-rl { width: 102%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js-slider .js-slider__content li.-rl.is-put { -webkit-animation: var(--animation-slider-move) slide_rl; animation: var(--animation-slider-move) slide_rl; } @media screen and (max-width: 1023px) { .js-slider-mqDown-lg { /* ---------- js-slider__content ---------- */ } .js-slider-mqDown-lg .js-slider__content { width: 100%; height: 100%; position: relative; overflow: hidden; } .js-slider-mqDown-lg .js-slider__content li { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; transition: var(--transition-slider); transition-property: opacity,visibility; } .js-slider-mqDown-lg .js-slider__content li.is-active { opacity: 1; visibility: visible; } .js-slider-mqDown-lg .js-slider__content li.-tb { height: 102%; -webkit-transform: translate3d(0, -2%, 0); transform: translate3d(0, -2%, 0); } .js-slider-mqDown-lg .js-slider__content li.-tb.is-put { -webkit-animation: var(--animation-slider-move) slide_tb; animation: var(--animation-slider-move) slide_tb; } .js-slider-mqDown-lg .js-slider__content li.-bt { height: 102%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js-slider-mqDown-lg .js-slider__content li.-bt.is-put { -webkit-animation: var(--animation-slider-move) slide_bt; animation: var(--animation-slider-move) slide_bt; } .js-slider-mqDown-lg .js-slider__content li.-lr { width: 102%; -webkit-transform: translate3d(-2%, 0, 0); transform: translate3d(-2%, 0, 0); } .js-slider-mqDown-lg .js-slider__content li.-lr.is-put { -webkit-animation: var(--animation-slider-move) slide_lr; animation: var(--animation-slider-move) slide_lr; } .js-slider-mqDown-lg .js-slider__content li.-rl { width: 102%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .js-slider-mqDown-lg .js-slider__content li.-rl.is-put { -webkit-animation: var(--animation-slider-move) slide_rl; animation: var(--animation-slider-move) slide_rl; } } /** * * accordion.scss * */ /* ------------------------------------------------------------ p-accordion | | '質問', | 'panel' => '回答', | ), | ); | ?> dl.p-accordion.js-accordion-click dt.p-accordion__switch button( type="button" ).js-accordion__switch span.p-accordion__switch__txt.c-disc span.c-crop i.c-plus dd.p-accordion__panel.js-accordion__panel div.p-accordion__panel__inner p.c-txt-xs.c-crop ------------------------------------------------------------ */ /** * * article.scss * */ /* ------------------------------------------------------------ p-article ------------------------------------------------------------ */ /* ---------------------------------------- p-article__header ---------------------------------------- */ .p-article__header { border-bottom: var(--solid); } @media screen and (min-width: 1024px) { .p-article__header { padding-bottom: 6rem ; margin-bottom: 6rem ; } } @media screen and (max-width: 1023px) { .p-article__header { padding-bottom: 4rem ; margin-bottom: 4rem ; } } .p-article__time { font-family: var(--font-sans-serif); font-weight: 400; line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-xs); } @media screen and (min-width: 1024px) { .p-article__time { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .p-article__time { font-size: var(--font-size14); } } .p-article__title { line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-article__title { font-size: var(--font-size40); margin-top: 2rem ; } } @media screen and (max-width: 1023px) { .p-article__title { font-size: var(--font-size24); margin-top: 1rem ; } } /** * * block.scss * 名前が思い浮かばなかったのでblockとする * */ /* ------------------------------------------------------------ p-block serviceで使用している小セクション ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .p-block { display: flex; flex-direction: row-reverse; align-items: center; gap: 8rem ; padding-left: 0.3rem ; } } .p-block__illust { min-width: 11rem ; width: 11rem ; } @media screen and (max-width: 1023px) { .p-block__illust { margin-top: 3rem ; margin-inline: auto; } } .p-block__contents { flex: 1; position: relative; background-color: var(--color-bg5); } @media screen and (min-width: 1024px) { .p-block__contents { padding: 3.8rem 4rem 4rem ; } } @media screen and (max-width: 1023px) { .p-block__contents { padding: 2.9rem 3.1rem ; } } .p-block__contents::before { content: ''; display: block; position: absolute; background-color: var(--color-bg5); } @media screen and (min-width: 1024px) { .p-block__contents::before { width: 2.9rem ; height: 2.8rem ; clip-path: polygon(100% 0, 0 50%, 100% 100%); top: 50%; right: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media screen and (max-width: 1023px) { .p-block__contents::before { width: 2.8rem ; height: 3rem ; clip-path: polygon(100% 0, 0 0, 50% 100%); top: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .p-block__txt { margin-top: 1.8rem ; } /* ------------------------------------------------------------ p-block2 contactで使用している小セクション ------------------------------------------------------------ */ .p-block2 { position: relative; background-color: var(--color-bg17); } @media screen and (min-width: 1024px) { .p-block2 { padding: 7.5rem 4rem 6rem ; } } @media screen and (max-width: 1023px) { .p-block2 { padding: 5.8rem 2rem 4rem ; } } .p-block2__txt { margin-top: 2.8rem ; } .p-block2__illust { position: absolute; } @media screen and (min-width: 1024px) { .p-block2__illust { top: -2rem ; right: 3.7rem ; } } @media screen and (max-width: 1023px) { .p-block2__illust { top: -1.8rem ; right: 2.6rem ; } } @media screen and (min-width: 1024px) { .p-block2__illust [src*="character_4.svg"] { width: 8rem ; } } @media screen and (max-width: 1023px) { .p-block2__illust [src*="character_4.svg"] { width: 7rem ; } } @media screen and (min-width: 1024px) { .p-block2__illust [src*="character_5.svg"] { width: 8.2rem ; } } @media screen and (max-width: 1023px) { .p-block2__illust [src*="character_5.svg"] { width: 7.2rem ; } } @media screen and (min-width: 1024px) { .p-block2__illust [src*="character_10.svg"] { width: 11.5rem ; } } @media screen and (max-width: 1023px) { .p-block2__illust [src*="character_10.svg"] { width: 10.1rem ; } } /** * * button.scss * */ /* ------------------------------------------------------------ p-button c-arrow2とテキストのボタン ------------------------------------------------------------ */ .p-button { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ } .p-button a { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: flex; align-items: center; padding: var(--anchor-padding) 0; margin: calc( var( --anchor-padding ) * -1) 0; } .p-button.-small a { gap: 1rem ; } @media screen and (min-width: 1024px) { .p-button.-small .p-button__txt { font-size: var(--font-size16); } } @media screen and (max-width: 1023px) { .p-button.-small .p-button__txt { font-size: var(--font-size14); } } .p-button.-medium a { gap: 2rem ; } @media screen and (min-width: 1024px) { .p-button.-medium .p-button__txt { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .p-button.-medium .p-button__txt { font-size: var(--font-size16); } } .p-button__txt { font-weight: 400; line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ p-button2 ボーダー角丸ボタン ------------------------------------------------------------ */ .p-button2 { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -black-white ---------- */ /* ---------- -white-black ---------- */ /* ---------- -white-accent4 ---------- */ /* ---------- -white-comic ---------- */ /* ---------- -theme-white ---------- */ } .p-button2 > * { position: relative; z-index: 0; overflow: hidden; display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-radius: var(--radius-max); border: var(--solid-current); border-color: var(--border-color, currentColor); background-color: var(--bg-color, var(--pallet-transp)); color: var(--txt-color, currentColor); font-weight: 400; transition: var(--transition-hover); transition-property: background-color, color; } @media (hover: hover) { .p-button2 > a:hover, a:hover .p-button2 > * { border-color: var(--border-color, currentColor); background-color: var(--hover-bg-color, var(--pallet-transp)); color: var(--hover-txt-color, currentColor); } } .p-button2.-small > * { font-size: var(--font-size14); line-height: calc( 30 / 14 * 1em); padding: 0.4rem 1.9rem ; } @media screen and (min-width: 1024px) { .p-button2.-medium > * { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); padding: 1.4rem 2.9rem ; } } @media screen and (max-width: 1023px) { .p-button2.-medium > * { font-size: var(--font-size14); line-height: calc( 30 / 14 * 1em); padding: 0.4rem 2.9rem ; } } @media screen and (min-width: 1024px) { .p-button2.-medium2 > * { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); padding: 1.4rem 2.9rem ; } } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-button2.-medium2 > * { font-size: max(2.08333vh , 12px , 1.2rem ); padding: 1.82292vh 3.77604vh; } } @media screen and (max-width: 1023px) { .p-button2.-medium2 > * { font-size: var(--font-size14); line-height: calc( 30 / 14 * 1em); padding: 0.4rem 2.9rem ; } } .p-button2.-medium3 > * { font-weight: 700; font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); padding: 0.8rem 2.9rem ; } .p-button2.-medium4 > * { font-weight: 400; } @media screen and (min-width: 1024px) { .p-button2.-medium4 > * { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); padding: 1.4rem 2.9rem ; } } @media screen and (max-width: 1023px) { .p-button2.-medium4 > * { font-size: var(--font-size14); line-height: calc( 30 / 14 * 1em); padding: 0.9rem 2.9rem ; } } .p-button2.-black-white { --color-hover-bg: var( --color-bg2 ); --border-color: var( --color-txt ); --txt-color: var( --color-txt ); --hover-border-color: var( --color-txt ); --hover-txt-color: var( --color-txt2 ); } .p-button2.-white-black { --color-hover-bg: var( --color-txt2 ); --border-color: var( --color-txt2 ); --txt-color: var( --color-txt2 ); --hover-border-color: var( --color-txt2 ); --hover-txt-color: var( --color-bg6 ); } .p-button2.-white-black2 { --border-color: var( --color-txt2 ); --txt-color: var( --color-txt2 ); --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-bg ); --hover-txt-color: var( --color-txt ); } .p-button2.-white-black3 { --border-color: var( --color-txt2 ); --txt-color: var( --color-txt2 ); --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-bg ); --hover-txt-color: var( --color-bg6 ); } .p-button2.-white-accent4 { --border-color: var( --color-txt2 ); --bg-color: var( --color-txt2 ); --txt-color: var( --color-accent2 ); --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-accent2 ); --hover-txt-color: var( --color-txt2 ); } .p-button2.-white-comic { --border-color: var( --color-txt2 ); --bg-color: var( --color-txt2 ); --txt-color: var( --color-comic ); --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-txt2 ); --hover-txt-color: var( --color-comic ); } .p-button2.-theme-white { --border-color: var( --color-txt2 ); --bg-color: var( --theme-color ); --txt-color: var( --color-txt2 ); --hover-border-color: var( --color-txt2 ); --hover-bg-color: var( --color-txt2 ); --hover-txt-color: var( --theme-color ); } /* ------------------------------------------------------------ p-button3 裏シンカでのボタン ------------------------------------------------------------ */ .p-button3 { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -white-accent3 ---------- */ } .p-button3 > * { display: flex; align-items: center; border-radius: var(--radius-max); } .p-button3.-medium > * { gap: 2rem ; } @media screen and (min-width: 1024px) { .p-button3.-medium > * { padding: 2rem 3rem ; } } @media screen and (max-width: 1023px) { .p-button3.-medium > * { padding: 1.45rem 3rem ; } } @media screen and (min-width: 1024px) { .p-button3.-medium .p-button3__txt { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .p-button3.-medium .p-button3__txt { font-size: var(--font-size16); } } .p-button3.-white-accent3 > * { background-color: var(--color-bg); color: var(--color-accent3); } .p-button3__txt { display: block; letter-spacing: var(--letter-spacing-_xs); line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ p-button4 ベタ塗りボタン ------------------------------------------------------------ */ .p-button4 { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------------------------------------- color ---------------------------------------- */ /* ---------- -black-white ---------- */ } .p-button4 a { position: relative; display: block; border: var(--solid-current); border-color: var(--border-color, currentColor); background-color: var(--bg-color, var(--pallet-transp)); text-align: center; line-height: var(--line-height-noraml); color: var(--txt-color, currentColor); transition: var(--transition-hover); transition-property: background-color, color; } @media (hover: hover) { .p-button4 > a:hover, a:hover .p-button4 > * { border-color: var(--border-color, currentColor); background-color: var(--hover-bg-color, var(--pallet-transp)); color: var(--hover-txt-color, currentColor); } } .p-button4.-medium a { font-size: var(--font-size16); padding: 1.9rem 1rem ; } .p-button4.-black-white a { --color-hover-bg: var( --color-bg ); --border-color: var( --color-bg2 ); --bg-color: var( --color-bg2 ); --txt-color: var( --color-txt2 ); --hover-border-color: var( --color-bg2 ); --hover-bg-color: var( --color-bg2 ); --hover-txt-color: var( --color-txt ); } /** * * card.scss * */ /* ------------------------------------------------------------ p-card お知らせ ------------------------------------------------------------ */ .p-card { border-top: var(--solid); /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -medium2 ---------- */ } .p-card:last-of-type { border-bottom: var(--solid); } .p-card a { --color-hover-bg: var( --color-hover-bg2 ); } @media screen and (min-width: 1024px) { .p-card a { display: flex; align-items: flex-start; gap: var(--gap); } } @media screen and (max-width: 1023px) { .p-card a { display: block; } } .p-card .c-arrow { margin-left: auto; } @media screen and (max-width: 1023px) { .p-card .c-arrow { display: none; } } @media screen and (min-width: 1024px) { .p-card.-medium a { padding: 4rem 0 ; } } @media screen and (max-width: 1023px) { .p-card.-medium a { padding: 1.8rem 0 1.9rem ; } } .p-card.-medium .p-card__time { opacity: .6; } @media screen and (min-width: 1024px) { .p-card.-medium .p-card__time { width: var(--grid2); font-size: var(--font-size20); margin-top: 0.2rem ; } } @media screen and (max-width: 1023px) { .p-card.-medium .p-card__time { font-size: var(--font-size14); } } @media screen and (min-width: 1024px) { .p-card.-medium .p-card__title { width: var(--grid6); font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .p-card.-medium .p-card__title { font-size: var(--font-size16); margin-top: 1rem ; } } @media screen and (min-width: 1024px) { .p-card.-medium .c-arrow { margin-top: 1rem ; margin-right: 1.2rem ; } } @media screen and (min-width: 1024px) { .p-card.-medium2 a { padding: 3rem 0 ; } } @media screen and (max-width: 1023px) { .p-card.-medium2 a { padding: 2rem 0 ; } } @media screen and (min-width: 1024px) { .p-card.-medium2 .p-card__time { width: var(--grid2); font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); } } @media screen and (max-width: 1023px) { .p-card.-medium2 .p-card__time { font-size: var(--font-size14); } } @media screen and (min-width: 1024px) { .p-card.-medium2 .p-card__title { width: var(--grid6); font-size: var(--font-size20); line-height: calc( 30 / 20 * 1em); } } @media screen and (max-width: 1023px) { .p-card.-medium2 .p-card__title { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); margin-top: 1rem ; } } .p-card__time { font-family: var(--font-sans-serif); font-weight: 400; line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-sm); padding-top: 0.1rem ; } .p-card__title { font-weight: 400; line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ p-card2 クロストーク（トップなど） ------------------------------------------------------------ */ .p-card2 { position: relative; z-index: 0; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ } .p-card2 + .p-card2 { margin-left: 2rem ; } .p-card2 a { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; color: var(--color-txt2); } @media screen and (min-width: 1024px) { .p-card2.-medium, .p-card2.-medium2 { width: 48rem ; height: 72rem ; } } @media screen and (max-width: 1023px) { .p-card2.-medium, .p-card2.-medium2 { width: 32rem ; height: 48rem ; } } .p-card2.-medium .p-card2__heading, .p-card2.-medium2 .p-card2__heading { gap: 1rem ; } @media screen and (min-width: 1024px) { .p-card2.-medium .p-card2__heading, .p-card2.-medium2 .p-card2__heading { padding: 2rem ; } } @media screen and (max-width: 1023px) { .p-card2.-medium .p-card2__heading, .p-card2.-medium2 .p-card2__heading { padding: 1rem ; } } @media screen and (min-width: 1024px) { .p-card2.-medium .p-card2__num, .p-card2.-medium2 .p-card2__num { width: 3.6rem ; height: 3.6rem ; font-size: var(--font-size15); } } @media screen and (min-width: 1024px) { .p-card2.-medium .p-card2__title, .p-card2.-medium2 .p-card2__title { font-size: var(--font-size18); } } @media screen and (max-width: 1023px) { .p-card2.-medium .p-card2__title, .p-card2.-medium2 .p-card2__title { font-size: var(--font-size16); } } @media screen and (min-width: 1024px) { .p-card2.-medium .p-card2__txt, .p-card2.-medium2 .p-card2__txt { font-size: var(--font-size20); line-height: calc( 30 / 20 * 1em); padding: 6rem 2rem 2rem ; } } @media screen and (max-width: 1023px) { .p-card2.-medium .p-card2__num { width: 3.6rem ; height: 3.6rem ; font-size: var(--font-size14); } } @media screen and (max-width: 1023px) { .p-card2.-medium .p-card2__txt { font-size: var(--font-size16); line-height: calc( 28 / 16 * 1em); padding: 4.6rem 1rem 1rem ; } } @media screen and (max-width: 1023px) { .p-card2.-medium2 .p-card2__num { width: 3.2rem ; height: 3.2rem ; font-size: var(--font-size13); } } @media screen and (max-width: 1023px) { .p-card2.-medium2 .p-card2__txt { font-size: var(--font-size18); line-height: calc( 26 / 18 * 1em); padding: 4.2rem 2rem 2rem ; } } /* ---------- p-card2__heading ---------- */ .p-card2__heading { display: flex; align-items: center; background: var(--color-gradation5); } .p-card2__num { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-gradation2); font-family: var(--font-sans-serif); font-weight: 600; } .p-card2__title { font-weight: 600; line-height: var(--line-height-noraml); } /* ---------- p-card2__txt ---------- */ .p-card2__txt { background: var(--color-gradation6); font-weight: 600; } /* ------------------------------------------------------------ p-card3 クロストーク（一覧） ------------------------------------------------------------ */ .p-card3 { position: relative; z-index: 0; } .p-card3:nth-of-type(2n-1) a { background-color: var(--color-accent2); } .p-card3:nth-of-type(2n) a { background-color: var(--color-main); } @media screen and (min-width: 1024px) { .p-card3 + .p-card3 { margin-top: 4rem ; } } @media screen and (max-width: 1023px) { .p-card3 + .p-card3 { margin-top: 2rem ; } } .p-card3 a { position: relative; width: 100%; display: flex; align-items: flex-end; color: var(--color-txt2); } @media screen and (min-width: 1024px) { .p-card3 a { min-height: 80rem ; max-height: 96rem ; } } @media screen and (max-width: 1023px) { .p-card3 a { min-height: 36rem ; max-height: 43.2rem ; } } .p-card3 a::after { content: ''; display: block; } @media screen and (min-width: 1024px) { .p-card3 a::after { padding-top: 49.75124%; } } @media screen and (max-width: 1023px) { .p-card3 a::after { padding-top: 102.85714%; } } /* ---------- p-card3__figure ---------- */ .p-card3__figure { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } @media screen and (min-width: 561px) { .p-card3__figure { -webkit-mask-image: url("../img/common/mask_symbol.webp"); mask-image: url("../img/common/mask_symbol.webp"); -webkit-mask-size: 119.15423% 265.5%; mask-size: 119.15423% 265.5%; -webkit-mask-position: 0 50%; mask-position: 0 50%; } } @media screen and (max-width: 560px) { .p-card3__figure { -webkit-mask-image: url("../img/common/mask_symbol2.webp"); mask-image: url("../img/common/mask_symbol2.webp"); -webkit-mask-size: 163.42857% 176.38889%; mask-size: 163.42857% 176.38889%; -webkit-mask-position: 44% 50%; mask-position: 44% 50%; } } /* ---------- p-card3__contents ---------- */ .p-card3__contents { width: 100%; background: var(--color-gradation4); } @media screen and (min-width: 1024px) { .p-card3__contents { padding: 10rem 6rem 8rem ; } } @media screen and (max-width: 1023px) { .p-card3__contents { gap: 1.5rem ; padding: 4rem 2rem 2rem ; } } @media screen and (min-width: 1024px) { .p-card3__contents .p-button2 { margin-top: 4.5rem ; } } @media screen and (max-width: 1023px) { .p-card3__contents .p-button2 { margin-top: 1.5rem ; } } .p-card3__title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; border-bottom: var(--solid-small-current); font-weight: 600; line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-card3__title { font-size: var(--font-size24); padding-bottom: 1rem ; } } @media screen and (max-width: 1023px) { .p-card3__title { font-size: var(--font-size14); padding-bottom: 0.3rem ; } } .p-card3__catch { font-weight: 600; letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .p-card3__catch { font-size: var(--font-size48); line-height: calc( 64 / 48 * 1em); margin-top: 3.6rem ; } } @media screen and (max-width: 1023px) { .p-card3__catch { max-width: 31rem ; width: 100%; font-size: var(--font-size20); line-height: var(--line-height-noraml); margin-top: 1.4rem ; } .p-card3__catch.-type2 { letter-spacing: var(--letter-spacing-_4xl); } } /* ---------- p-card3__illust ---------- */ .p-card3__illust { position: absolute; z-index: 1; } @media screen and (min-width: 1024px) { .p-card3__illust { right: 2.7rem ; bottom: 0 ; } } @media screen and (max-width: 1023px) { .p-card3__illust { right: 0.9rem ; bottom: -1.4rem ; } } .p-card3__illust__balloon { display: flex; align-items: center; justify-content: center; background-image: url("../img/common/balloon.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; text-align: center; font-weight: 700; line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-card3__illust__balloon { width: 29rem ; height: 14.5rem ; font-size: 3rem ; padding-left: 1rem ; padding-bottom: 2.1rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__balloon { width: 12rem ; height: 5.9rem ; font-size: 1.3rem ; padding-bottom: 0.7rem ; } } @media screen and (min-width: 1024px) { .p-card3__illust__balloon.-small { font-size: 2.8rem ; letter-spacing: var(--letter-spacing-_xs); padding-bottom: 0.8rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__balloon.-small { letter-spacing: var(--letter-spacing-_xl); } } .p-card3__illust__character { margin-left: auto; } @media screen and (min-width: 1024px) { .p-card3__illust__character { margin-top: -1.7rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__character { margin-top: -2.4rem ; } } @media screen and (min-width: 1024px) { .p-card3__illust__character:has([src*="character_11.svg"]) { width: 17.7rem ; margin-right: 4.1rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__character:has([src*="character_11.svg"]) { width: 5.9rem ; margin-right: 2.2rem ; } } @media screen and (min-width: 1024px) { .p-card3__illust__character:has([src*="character_12.svg"]) { width: 17.8rem ; margin-right: 4rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__character:has([src*="character_12.svg"]) { width: 5.9rem ; margin-right: 2.5rem ; } } @media screen and (min-width: 1024px) { .p-card3__illust__character:has([src*="character_13.svg"]) { width: 18.8rem ; margin-right: 3.6rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__character:has([src*="character_13.svg"]) { width: 6.3rem ; margin-right: 2.4rem ; } } @media screen and (min-width: 1024px) { .p-card3__illust__character:has([src*="character_14.svg"]) { width: 18.4rem ; margin-right: 3.8rem ; } } @media screen and (max-width: 1023px) { .p-card3__illust__character:has([src*="character_14.svg"]) { width: 6.1rem ; margin-right: 2.3rem ; } } /** * * comic.scss * */ /* ------------------------------------------------------------ p-comic コミックのカード ------------------------------------------------------------ */ .p-comic { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .p-comic a { display: flex; align-items: flex-end; width: 100%; height: 100%; border: var(--solid-bold-current); border-color: var(--theme-color); background-color: var(--theme-color); } .p-comic .p-button2 { position: absolute; z-index: 10; color: var(--color-txt2); } @media screen and (max-width: 1023px) { .p-comic.-medium, .p-comic.-large { --base-width:342; --base-height:342; aspect-ratio: 350 / 350; } .p-comic.-medium .p-comic__figure, .p-comic.-large .p-comic__figure { height: 67.25146%; } .p-comic.-medium .p-comic__heading, .p-comic.-large .p-comic__heading { margin-top: 3.21637%; margin-left: 3.80117%; } .p-comic.-medium .p-comic__sub, .p-comic.-large .p-comic__sub { max-width: 19.2rem ; width: 56.14035%; margin-left: 4.38596%; } .p-comic.-medium .p-comic__sub__txt, .p-comic.-medium .p-comic__sub__num, .p-comic.-large .p-comic__sub__txt, .p-comic.-large .p-comic__sub__num { font-size: 8.33333cqw; } .p-comic.-medium .p-comic__sub__num, .p-comic.-large .p-comic__sub__num { margin-left: 0.625em; } .p-comic.-medium .p-comic__title, .p-comic.-large .p-comic__title { max-width: 28.5rem ; width: 83.33333%; margin-top: -1.8rem ; } .p-comic.-medium .p-comic__title span, .p-comic.-large .p-comic__title span { font-size: 7.7193cqw; } .p-comic.-medium .p-comic__illust, .p-comic.-large .p-comic__illust { margin-top: -2.5rem ; margin-left: 2.33918%; } .p-comic.-medium .p-comic__illust [src*="character_1.svg"], .p-comic.-large .p-comic__illust [src*="character_1.svg"] { max-width: 6.3rem ; width: 18.42105%; } .p-comic.-medium .p-comic__illust [src*="character_2.svg"], .p-comic.-large .p-comic__illust [src*="character_2.svg"] { max-width: 6.3rem ; width: 18.42105%; } .p-comic.-medium .p-comic__illust [src*="character_3.svg"], .p-comic.-large .p-comic__illust [src*="character_3.svg"] { max-width: 6rem ; width: 17.54386%; } .p-comic.-medium .p-comic__illust [src*="character_4.svg"], .p-comic.-large .p-comic__illust [src*="character_4.svg"] { max-width: 6.5rem ; width: 19.00585%; } .p-comic.-medium .p-comic__illust [src*="character_5.svg"], .p-comic.-large .p-comic__illust [src*="character_5.svg"] { max-width: 6.7rem ; width: 19.59064%; } .p-comic.-medium .p-button2, .p-comic.-large .p-button2 { left: 4.67836%; bottom: 4.67836%; } .p-comic.-medium .p-comic__illust2:has([src*="comic_2.webp"]), .p-comic.-large .p-comic__illust2:has([src*="comic_2.webp"]) { --width: 285; --right: -27; --bottom: -60; } .p-comic.-medium .p-comic__illust2:has([src*="comic_5.webp"]), .p-comic.-large .p-comic__illust2:has([src*="comic_5.webp"]) { --width: 150; --right: 38; --bottom: -94; } .p-comic.-medium .p-comic__illust2:has([src*="comic_1.webp"]), .p-comic.-large .p-comic__illust2:has([src*="comic_1.webp"]) { --width: 235; --right: -28; --bottom: -6; } .p-comic.-medium .p-comic__illust2:has([src*="comic_3.webp"]), .p-comic.-large .p-comic__illust2:has([src*="comic_3.webp"]) { --width: 338; --right: -40; --bottom: -7; } .p-comic.-medium .p-comic__illust2:has([src*="comic_4.webp"]), .p-comic.-large .p-comic__illust2:has([src*="comic_4.webp"]) { --width: 325; --right: -4; --bottom: -4; } } @media screen and (min-width: 1024px) { .p-comic.-medium { --base-width:379; --base-height:632; aspect-ratio: 387 / 640; } .p-comic.-medium a { border: var(--solid-medium-current); border-color: var(--theme-color); } .p-comic.-medium .p-comic__figure { height: 64.24051%; } .p-comic.-medium .p-comic__heading { margin-top: 10.55409%; margin-left: 6.33245%; } .p-comic.-medium .p-comic__sub { aspect-ratio: 203 / 42; max-width: 20.3rem ; width: 53.56201%; margin-left: 5.01319%; } .p-comic.-medium .p-comic__sub__txt, .p-comic.-medium .p-comic__sub__num { font-size: 7.88177cqw; } .p-comic.-medium .p-comic__sub__num { margin-left: 0.625em; } .p-comic.-medium .p-comic__title { max-width: 32.9rem ; width: 86.80739%; margin-top: -1.5rem ; } .p-comic.-medium .p-comic__title span { font-size: 7.33945cqw; } .p-comic.-medium .p-comic__illust { margin-top: -3.6rem ; margin-left: 0.5277%; } .p-comic.-medium .p-comic__illust [src*="character_1.svg"] { max-width: 7.9rem ; width: 20.84433%; } .p-comic.-medium .p-comic__illust [src*="character_2.svg"] { max-width: 7.9rem ; width: 20.84433%; } .p-comic.-medium .p-comic__illust [src*="character_3.svg"] { max-width: 7.5rem ; width: 19.78892%; } .p-comic.-medium .p-comic__illust [src*="character_4.svg"] { max-width: 8.1rem ; width: 21.37203%; } .p-comic.-medium .p-comic__illust [src*="character_5.svg"] { max-width: 8.4rem ; width: 22.16359%; } .p-comic.-medium .p-button2 { left: 6.86016%; bottom: 4.11392%; } .p-comic.-medium .p-comic__illust2:has([src*="comic_2.webp"]) { --width: 413; --right: -107; --bottom: -26; } .p-comic.-medium .p-comic__illust2:has([src*="comic_5.webp"]) { --width: 195; --right: 27; --bottom: 4; } .p-comic.-medium .p-comic__illust2:has([src*="comic_1.webp"]) { --width: 360; --right: -100; --bottom: 0; } .p-comic.-medium .p-comic__illust2:has([src*="comic_3.webp"]) { --width: 594; --right: -90; --bottom: -12; } .p-comic.-medium .p-comic__illust2:has([src*="comic_4.webp"]) { --width: 512; --right: -31; --bottom: -16; } } @media screen and (min-width: 1024px) { .p-comic.-large { --base-width:752; --base-height:752; aspect-ratio: 764 / 764; } .p-comic.-large .p-comic__figure { height: 69.94681%; } .p-comic.-large .p-comic__heading { margin-top: 5.85106%; margin-left: 3.45745%; } .p-comic.-large .p-comic__sub { max-width: 28.4rem ; width: 37.76596%; margin-left: 4.65426%; } .p-comic.-large .p-comic__sub__txt, .p-comic.-large .p-comic__sub__num { font-size: 8.4507cqw; } .p-comic.-large .p-comic__sub__num { margin-left: 0.41667em; } .p-comic.-large .p-comic__title { max-width: 49.2rem ; width: 65.42553%; margin-top: -2.6rem ; } .p-comic.-large .p-comic__title span { font-size: 8.13008cqw; } .p-comic.-large .p-comic__title.-small span { font-size: 7.31707cqw; } .p-comic.-large .p-comic__illust { margin-top: -4.4rem ; margin-left: 3.05851%; } .p-comic.-large .p-comic__illust [src*="character_1.svg"] { max-width: 10.5rem ; width: 14.22764%; } .p-comic.-large .p-comic__illust [src*="character_2.svg"] { max-width: 10.6rem ; width: 14.36314%; } .p-comic.-large .p-comic__illust [src*="character_3.svg"] { max-width: 10rem ; width: 13.55014%; } .p-comic.-large .p-comic__illust [src*="character_4.svg"] { max-width: 10.9rem ; width: 14.76965%; } .p-comic.-large .p-comic__illust [src*="character_5.svg"] { max-width: 11.2rem ; width: 15.17615%; } .p-comic.-large .p-button2 { left: 5.85106%; bottom: 4.52128%; } .p-comic.-large .p-comic__illust2:has([src*="comic_2.webp"]) { --width: 637; --right: -70; --bottom: -98; } .p-comic.-large .p-comic__illust2:has([src*="comic_5.webp"]) { --width: 351; --right: 80; --bottom: -221; } .p-comic.-large .p-comic__illust2:has([src*="comic_1.webp"]) { --width: 542; --right: -50; --bottom: -6; } .p-comic.-large .p-comic__illust2:has([src*="comic_3.webp"]) { --width: 896; --right: -124; --bottom: -6; } .p-comic.-large .p-comic__illust2:has([src*="comic_4.webp"]) { --width: 844; --right: -20; --bottom: -56; } } /* --------- p-comic__figure ---------- */ .p-comic__figure { --slope-tan: 0.2493280028; --slope-tan: tan(14deg); --slope-height: calc(var(--slope-tan) * var(--width) ); --path-position: calc( 100% - var(--slope-height) ); position: absolute; top: 0; left: 0; z-index: 0; width: 100%; mix-blend-mode: lighten; opacity: .8; clip-path: polygon(0 0, 100% 0, 100% var(--path-position), 0% 100%); } .p-comic__figure img { -o-object-position: 0 0; object-position: 0 0; } /* --------- p-comic__heading ---------- */ .p-comic__heading { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; } /* ----- p-comic__sub ----- */ .p-comic__sub { container-type: inline-size; aspect-ratio: 284 / 48; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg2); color: var(--color-txt2); padding-bottom: 0.2rem ; } .p-comic__sub__txt { display: block; font-weight: 700; } .p-comic__sub__num { display: block; font-family: var(--font-sans-serif); font-weight: 600; padding-top: 0.135em; } /* ----- p-comic__title ----- */ .p-comic__title { container-type: inline-size; aspect-ratio: 492 / 135; display: flex; align-items: center; justify-content: center; background-image: url("../img/common/frame.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .p-comic__title span { display: block; font-weight: 700; } /* --------- p-comic__illust2 ---------- */ [class*="p-comic__illust2-"] { --z-index: 10; } [class*="p-comic__illust2-"] img { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* * * form.scss * */ /* ------------------------------------------------------------ p-form ------------------------------------------------------------ */ .p-form { --input-height: 8rem ; } @media screen and (min-width: 1024px) { .p-form { display: flex; justify-content: space-between; gap: var(--gap); } } @media screen and (min-width: 1024px) { .p-form__header { width: var(--grid4); } } @media screen and (min-width: 1024px) { .p-form__form { width: var(--grid8); } } /* ------------------------------------------------------------ form settings ------------------------------------------------------------- */ .p-form__control { position: relative; width: 100%; } .p-form__control.is-done .p-form__txtbox input { background-color: var(--color-input-bg-done); } .p-form__control.is-done .p-form__txtbox input:-webkit-autofill, .p-form__control.is-done .p-form__txtbox select:-webkit-autofill, .p-form__control.is-done .p-form__txtbox option:-webkit-autofill { -webkit-text-fill-color: var(--color-txt) !important; -webkit-box-shadow: 0 0 0px 1000px var(--color-input-bg-done) inset; } /* ---------------------------------------- p-form__txtbox ---------------------------------------- */ .p-form__txtbox { display: flex; } .p-form__txtbox input, .p-form__txtbox textarea, .p-form__radio label { min-height: var(--input-height); } .p-form__file label, .p-form__select select { height: var(--input-height); } .p-form__txtbox input, .p-form__txtbox textarea, .p-form__file label, .p-form__select select, .p-form__radio label { position: relative; width: 100%; background-color: var(--color-input-bg); color: var(--color-txt); font-family: var(--font-form) !important; font-weight: 400; font-size: var(--font-size16); line-height: normal; word-break: break-all; overflow: hidden; caret-color: var(--color-txt); transition: var(--transition-input); } @media (hover: hover) { .p-form__txtbox input:hover, .p-form__txtbox textarea:hover, .p-form__file label:hover, .p-form__select select:hover, .p-form__radio label:hover { border-color: var(--color-input-bg-hover); background-color: var(--color-input-bg-hover); } } .p-form__txtbox input:-ms-input-placeholder, .p-form__txtbox textarea:-ms-input-placeholder, .p-form__file label:-ms-input-placeholder, .p-form__select select:-ms-input-placeholder, .p-form__radio label:-ms-input-placeholder { font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input:placeholder-shown, .p-form__txtbox textarea:placeholder-shown, .p-form__file label:placeholder-shown, .p-form__select select:placeholder-shown, .p-form__radio label:placeholder-shown { font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input:placeholder, .p-form__txtbox textarea:placeholder, .p-form__file label:placeholder, .p-form__select select:placeholder, .p-form__radio label:placeholder { font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input::-webkit-input-placeholder, .p-form__txtbox textarea::-webkit-input-placeholder, .p-form__file label::-webkit-input-placeholder, .p-form__select select::-webkit-input-placeholder, .p-form__radio label::-webkit-input-placeholder { font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input:-moz-placeholder, .p-form__txtbox textarea:-moz-placeholder, .p-form__file label:-moz-placeholder, .p-form__select select:-moz-placeholder, .p-form__radio label:-moz-placeholder { opacity: 1; font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input::-moz-placeholder, .p-form__txtbox textarea::-moz-placeholder, .p-form__file label::-moz-placeholder, .p-form__select select::-moz-placeholder, .p-form__radio label::-moz-placeholder { opacity: 1; font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input:-ms-input-placeholder, .p-form__txtbox textarea:-ms-input-placeholder, .p-form__file label:-ms-input-placeholder, .p-form__select select:-ms-input-placeholder, .p-form__radio label:-ms-input-placeholder { font-family: var(--font-form) !important; font-weight: 400; color: var(--color-input-placeholder); } .p-form__txtbox input:focus, .p-form__txtbox textarea:focus, .p-form__file label:focus, .p-form__select select:focus, .p-form__radio label:focus { background-color: var(--color-input-bg-focus) !important; } .p-form__txtbox input, .p-form__txtbox textarea, .p-form__file label, .p-form__select select { padding: 2.8rem 3rem ; } .p-form__txtbox textarea { min-height: 38rem ; max-height: 80rem ; height: 38rem ; } input:-webkit-autofill, select:-webkit-autofill, option:-webkit-autofill { -webkit-text-fill-color: var(--color-txt) !important; -webkit-box-shadow: 0 0 0px 1000px var(--color-input-bg-done) inset; } /* ---------------------------------------- p-form__checkbox p-form__radio ---------------------------------------- */ .p-form__checkbox [type="checkbox"], .p-form__checkbox [type="radio"], .p-form__radio [type="checkbox"], .p-form__radio [type="radio"] { display: none; } .p-form__checkbox [type="checkbox"]:checked + label span:nth-of-type(1), .p-form__checkbox [type="radio"]:checked + label span:nth-of-type(1), .p-form__radio [type="checkbox"]:checked + label span:nth-of-type(1), .p-form__radio [type="radio"]:checked + label span:nth-of-type(1) { background-color: var(--color-input-bg-done); } .p-form__checkbox [type="checkbox"]:checked + label span:nth-of-type(1)::before, .p-form__checkbox [type="radio"]:checked + label span:nth-of-type(1)::before, .p-form__radio [type="checkbox"]:checked + label span:nth-of-type(1)::before, .p-form__radio [type="radio"]:checked + label span:nth-of-type(1)::before { opacity: 1; } .p-form__checkbox label, .p-form__radio label { display: flex; align-items: center; } .p-form__checkbox label > span, .p-form__radio label > span { position: relative; display: block; } .p-form__checkbox label > span:nth-of-type(1), .p-form__radio label > span:nth-of-type(1) { width: 2rem ; height: 2rem ; background-color: var(--color-input-bg); -webkit-transform: rotate(0.0001deg); transform: rotate(0.0001deg); } .p-form__checkbox label > span:nth-of-type(1)::before, .p-form__radio label > span:nth-of-type(1)::before { content: ''; display: block; width: 100%; height: 100%; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity var(--transition-input); } .p-form__checkbox label > span:nth-of-type(2), .p-form__radio label > span:nth-of-type(2) { flex: 1; font-weight: 400; font-size: var(--font-size15); line-height: var(--line-height-noraml); margin-left: 1.5rem ; } /* ---------- checkbox ---------- */ .p-form__checkbox label > span:nth-of-type(1)::before { background-image: url("../img/common/icon/check.svg"); } /* ---------------------------------------- p-form__select ---------------------------------------- */ .p-form__select { position: relative; width: 100%; } .p-form__select .c-down { position: absolute; top: 50%; right: 3rem ; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } /* ------------------------------------------------------------ p-form__txt ------------------------------------------------------------- */ @media screen and (min-width: 1024px) { .p-form__txt { margin-bottom: 8rem ; } } @media screen and (max-width: 1023px) { .p-form__txt { margin-bottom: 6rem ; } } .p-form__txt2 + .p-form__txt2 { margin-top: 3rem ; } /* ------------------------------------------------------------ p-form__table ------------------------------------------------------------- */ .p-form__table { display: grid; gap: 3rem ; } @media screen and (min-width: 1024px) { .p-form__table.-check .p-form__table__cell { display: flex; align-items: baseline; } } @media screen and (min-width: 1024px) { .p-form__table.-check .p-form__table__cell dt { width: var(--grid2); } } @media screen and (max-width: 1023px) { .p-form__table.-check .p-form__table__cell dt { font-weight: 500; } } .p-form__table.-check .p-form__table__cell dd { flex: 1; font-weight: 400; line-height: 1.8; } @media screen and (min-width: 1024px) { .p-form__table.-check .p-form__table__cell dd { font-size: var(--font-size16); } } @media screen and (max-width: 1023px) { .p-form__table.-check .p-form__table__cell dd { opacity: .8; font-size: var(--font-size14); margin-top: 1rem ; } } /* ----- p-form__table__cell ----- */ .p-form__table__cell > dt { font-weight: 400; font-size: var(--font-size16); line-height: var(--line-height-noraml); } .p-form__table__cell > dd { margin-top: 1.5rem ; } /* ---------- p-form__required ---------- */ .p-form__required { color: var(--color-required); } /* ---------- p-form__error ---------- */ .p-form__error { background-color: var(--color-error-bg); color: var(--color-error); margin-top: 1rem ; padding: 1em; } @media screen and (min-width: 1024px) { .p-form__error { font-size: var(--font-size11); } } @media screen and (max-width: 1023px) { .p-form__error { font-size: var(--font-size9); } } /* ------------------------------------------------------------ p-form__privacy ------------------------------------------------------------- */ .p-form__privacy { display: grid; gap: 4rem ; border: var(--solid); margin-top: 3rem ; } @media screen and (min-width: 1024px) { .p-form__privacy { padding: 7.8rem 8rem ; } } @media screen and (max-width: 1023px) { .p-form__privacy { padding: 6rem var(--outside); } } .p-form__privacy__title { display: flex; flex-wrap: wrap; row-gap: 0.8rem ; } @media screen and (max-width: 1023px) { .p-form__privacy__title { justify-content: center; } } .p-form__privacy__title span { display: block; border-bottom: var(--solid-current); font-weight: 700; line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-form__privacy__title span { font-size: var(--font-size24); padding-bottom: 1rem ; } } @media screen and (max-width: 1023px) { .p-form__privacy__title span { font-size: var(--font-size20); padding-bottom: 0.5rem ; } } .p-form__privacy__item { display: grid; gap: 1rem ; } .p-form__privacy__title2 { font-weight: 700; font-size: var(--font-size16); line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ p-form__footer ------------------------------------------------------------- */ .p-form__footer { margin-top: 5rem ; } @media screen and (min-width: 1024px) { .p-form__footer { display: flex; align-items: center; justify-content: space-between; } } /* ---------------------------------------- p-form__agree ---------------------------------------- */ @media screen and (max-width: 1023px) { .p-form__agree { display: flex; flex-direction: column; align-items: center; } } /* ---------------------------------------- p-form__button ---------------------------------------- */ @media screen and (max-width: 1023px) { .p-form__button { margin-top: 3rem ; } } .p-form__button.is-disabled a { cursor: not-allowed; opacity: .3; pointer-events: none; } .p-form__button.-col-2 { width: 100%; } @media screen and (min-width: 1024px) { .p-form__button.-col-2 { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; } } @media screen and (min-width: 1024px) { .p-form__check, .p-form__submit, .p-form__reset, .p-form__home { width: var(--grid3); } } @media screen and (max-width: 1023px) { .p-form__back { display: flex; justify-content: center; margin-top: 2rem ; padding-right: 1rem ; } } /* ------------------------------------------------------------ p-form__reCAPTCHA ------------------------------------------------------------- */ .p-form__reCAPTCHA { font-family: var(--font-sans-serif); font-weight: 400; font-size: var(--font-size12); line-height: var(--line-height-noraml2); opacity: .5; letter-spacing: var(--letter-spacing-xs); } @media screen and (min-width: 1024px) { .p-form__reCAPTCHA { margin-top: 5rem ; } } @media screen and (max-width: 1023px) { .p-form__reCAPTCHA { text-align: center; margin-top: 3.2rem ; padding: 0 2rem ; } } /* ------------------------------------------------------------ p-form__sent ------------------------------------------------------------- */ /** * * gallery.scss * */ /* ------------------------------------------------------------ p-gallery ------------------------------------------------------------ */ .p-gallery { display: grid; gap: var(--slide-gap); } @media screen and (min-width: 1024px) { .p-gallery { --slide-gap: 2rem ; } } @media screen and (max-width: 1023px) { .p-gallery { --slide-gap: 1rem ; } } @media screen and (min-width: 1024px) { .p-gallery li.-size-x { --slide-width: 80rem ; } } @media screen and (max-width: 1023px) { .p-gallery li.-size-x { --slide-width: 53.3rem ; } } @media screen and (min-width: 1024px) { .p-gallery li.-size-y { --slide-width: 45rem ; } } @media screen and (max-width: 1023px) { .p-gallery li.-size-y { --slide-width: 30rem ; } } /** * * header.scss * */ /* ------------------------------------------------------------ p-header ------------------------------------------------------------ */ .p-header { color: var(--color-txt2); } .p-header .c-inner { display: flex; align-items: center; justify-content: space-between; } /** * * hero.scss * */ /* ------------------------------------------------------------ p-hero 英語、日本語が縦並びのhero（ラインの有無あり） ------------------------------------------------------------ */ header[class*="p-hero"] { /* ---------------------------------------- -space ---------------------------------------- */ /* ---------- -space-sm ---------- */ /* ---------- -space-md ---------- */ /* ---------- -space-lg ---------- */ } @media screen and (min-width: 1024px) { header[class*="p-hero"].-space-sm { margin-bottom: 8rem ; } } @media screen and (min-width: 1024px) { header[class*="p-hero"].-space-md { margin-bottom: 10rem ; } } @media screen and (max-width: 1023px) { header[class*="p-hero"].-space-md { margin-bottom: 4rem ; } } @media screen and (min-width: 1024px) { header[class*="p-hero"].-space-lg { margin-bottom: 16rem ; } } @media screen and (max-width: 1023px) { header[class*="p-hero"].-space-lg { margin-bottom: 8rem ; } } @media screen and (min-width: 1024px) { header[class*="p-hero"].-space-lg2 { margin-bottom: 16rem ; } } @media screen and (max-width: 1023px) { header[class*="p-hero"].-space-lg2 { margin-bottom: 6rem ; } } .p-hero { /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ /* ---------------------------------------- -line ---------------------------------------- */ /* ---------- -line ---------- */ } @media screen and (min-width: 1024px) { .p-hero.-medium .c-inner { padding: 18rem 0 8rem ; } } @media screen and (max-width: 1023px) { .p-hero.-medium .c-inner { padding: 12rem 0 4rem ; } } @media screen and (min-width: 1024px) { .p-hero.-medium .p-hero__en { font-size: var(--font-size96); line-height: calc( 92 / 96 * 1em); } } @media screen and (max-width: 1023px) { .p-hero.-medium .p-hero__en { font-size: var(--font-size40); line-height: var(--line-height-noraml); } } @media screen and (min-width: 1024px) { .p-hero.-medium .p-hero__ja { font-size: var(--font-size32); margin-top: 2rem ; } } @media screen and (max-width: 1023px) { .p-hero.-medium .p-hero__ja { font-size: var(--font-size16); margin-top: 0.8rem ; } } @media screen and (min-width: 1024px) { .p-hero.-large .c-inner { padding: 24rem 0 8rem ; } } @media screen and (max-width: 1023px) { .p-hero.-large .c-inner { padding: 16rem 0 6rem ; } } @media screen and (min-width: 1024px) { .p-hero.-large .p-hero__en { font-size: var(--font-size128); line-height: calc( 110 / 128 * 1em); } } @media screen and (max-width: 1023px) { .p-hero.-large .p-hero__en { font-size: var(--font-size48); line-height: var(--line-height-noraml); } } @media screen and (min-width: 1024px) { .p-hero.-large .p-hero__ja { font-size: var(--font-size32); margin-top: 4rem ; } } @media screen and (max-width: 1023px) { .p-hero.-large .p-hero__ja { font-size: var(--font-size20); margin-top: 0.8rem ; } } .p-hero.-line .c-inner { border-bottom: var(--solid); } .p-hero__en { font-family: var(--font-sans-serif); } .p-hero__ja { font-weight: 600; letter-spacing: var(--letter-spacing-_rg); line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ p-hero2 英語、日本語が横並びのhero（シングルページ） ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .p-hero2 .c-inner { display: flex; align-items: center; padding: 24rem 0 8rem ; } } @media screen and (max-width: 1023px) { .p-hero2 .c-inner { padding: 15.8rem 0 6rem ; } } .p-hero2__en { font-family: var(--font-sans-serif); letter-spacing: var(--letter-spacing-2xs); } @media screen and (min-width: 1024px) { .p-hero2__en { font-size: var(--font-size64); line-height: calc( 110 / 64 * 1em); } } @media screen and (max-width: 1023px) { .p-hero2__en { font-size: var(--font-size48); line-height: var(--line-height-noraml); } } .p-hero2__ja { font-weight: 600; letter-spacing: var(--letter-spacing-_rg); line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-hero2__ja { font-size: var(--font-size20); margin-left: 4rem ; } } @media screen and (max-width: 1023px) { .p-hero2__ja { font-size: var(--font-size20); margin-top: 0.8rem ; } } /* ------------------------------------------------------------ p-hero3 親、日本語、英語が縦並びののhero（詳細ページ） ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .p-hero3 .c-inner { padding: 24rem 0 8rem ; } } @media screen and (max-width: 1023px) { .p-hero3 .c-inner { padding: 12rem 0 4rem ; } } /* ---------- p-hero3__parent ---------- */ .p-hero3__parent { display: flex; align-items: center; } @media screen and (min-width: 1024px) { .p-hero3__parent { gap: 1.5rem ; } } @media screen and (max-width: 1023px) { .p-hero3__parent { gap: 1rem ; } } .p-hero3__parent__num { min-width: var(--width); width: var(--width); min-height: var(--height); height: var(--height); display: flex; align-items: center; justify-content: center; background-image: url("../img/common/icon/title_symbol.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; color: var(--color-txt2); font-family: var(--font-sans-serif); } @media screen and (min-width: 1024px) { .p-hero3__parent__num { --width: 5rem ; --height: 4.3rem ; font-size: var(--font-size16); padding-top: 0.5rem ; } } @media screen and (max-width: 1023px) { .p-hero3__parent__num { --width: 3.4rem ; --height: 3rem ; font-size: var(--font-size14); padding-top: 0.3rem ; } } .p-hero3__parent__txt { display: block; font-weight: 600; letter-spacing: var(--letter-spacing-_rg); line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-hero3__parent__txt { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .p-hero3__parent__txt { font-size: var(--font-size16); } } /* ---------- p-hero3__ja ---------- */ .p-hero3__ja { font-weight: 600; letter-spacing: var(--letter-spacing-_rg); } @media screen and (min-width: 1024px) { .p-hero3__ja { font-size: var(--font-size72); line-height: var(--line-height-noraml); margin-top: 3.5rem ; } } @media screen and (max-width: 1023px) { .p-hero3__ja { font-size: var(--font-size36); line-height: calc( 48 / 36 * 1em); margin-top: 1.7rem ; } } /* ---------- p-hero3__en ---------- */ .p-hero3__en { font-family: var(--font-sans-serif); letter-spacing: var(--letter-spacing-_xs); line-height: var(--line-height-noraml); margin-top: 1.4rem ; } @media screen and (min-width: 1024px) { .p-hero3__en { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .p-hero3__en { font-size: var(--font-size16); } } /* ---------------------------------------- p-hero3__figure ---------------------------------------- */ .p-hero3__figure { position: relative; } @media screen and (min-width: 1024px) { .p-hero3__figure { max-height: 104.88rem ; } } @media screen and (max-width: 1023px) { .p-hero3__figure { max-height: 43.2rem ; } } .p-hero3__figure::after { content: ''; display: block; } @media screen and (min-width: 1024px) { .p-hero3__figure::after { padding-top: 50.5787%; } } @media screen and (max-width: 1023px) { .p-hero3__figure::after { padding-top: 92.30769%; } } /* ------------------------------------------------------------ p-hero4 コミックのhero（サイズ違いあり） ------------------------------------------------------------ */ .p-hero4 { position: relative; overflow: hidden; background-color: var(--color-comic); margin-top: var(--header-height); padding: 0.1px 0; /* ---------------------------------------- size ---------------------------------------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } @media screen and (min-width: 1024px) { .p-hero4.-medium { aspect-ratio: 1728 / 720; } } @media screen and (max-width: 1023px) and (min-width: 561px) { .p-hero4.-medium { aspect-ratio: 390 / 440; } } @media screen and (max-width: 560px) { .p-hero4.-medium { aspect-ratio: 390 / 560; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__title { max-width: 85.1rem ; width: 49.24769%; margin-top: 5.78704%; z-index: 15; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust { --base-width: 1728; --base-height: 720; aspect-ratio: 1728 / 720; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust { --base-width: 390; --base-height: 560; aspect-ratio: 390 / 560; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust__1 { --width: 615; --left: -14; --bottom: 68; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust__1 { --width: 228; --left: -13; --bottom: 88; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust__2 { --width: 849; --left: -14; --bottom: -338; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust__2 { --width: 313; --left: 43; --bottom: -37; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust__3 { --width: 852; --left: 550; --bottom: -42; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust__3 { --width: 314; --left: -77; --bottom: -9; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust__4 { --width: 802; --right: 0; --bottom: -107; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust__4 { --width: 296; --right: -50; --bottom: -16; } } @media screen and (min-width: 1024px) { .p-hero4.-medium .p-hero4__illust__5 { --width: 371; --right: 105; --bottom: -179; } } @media screen and (max-width: 1023px) { .p-hero4.-medium .p-hero4__illust__5 { --width: 137; --right: -5; --bottom: 11; } } @media screen and (min-width: 1024px) { .p-hero4.-large { aspect-ratio: 1728 / 1017; } } @media screen and (max-width: 1023px) and (min-width: 561px) { .p-hero4.-large { aspect-ratio: 390 / 470; } } @media screen and (max-width: 560px) { .p-hero4.-large { aspect-ratio: 390 / 640; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__title { max-width: 108.7rem ; width: 62.90509%; margin-top: 11.63194%; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__bg { opacity: .5; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust { --base-width: 1728; --base-height: 1017; aspect-ratio: 1728 / 1017; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust { --base-width: 390; --base-height: 640; aspect-ratio: 390 / 640; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust__1 { --width: 648; --left: -19; --bottom: 122; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust__1 { --width: 228; --left: -13; --bottom: 88; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust__2 { --width: 894; --left: -54; --bottom: -337; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust__2 { --width: 313; --left: 43; --bottom: -17; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust__3 { --width: 898; --left: 540; --bottom: -25; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust__3 { --width: 314; --left: -77; --bottom: -9; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust__4 { --width: 844; --right: -67; --bottom: -42; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust__4 { --width: 296; --right: -50; --bottom: -16; } } @media screen and (min-width: 1024px) { .p-hero4.-large .p-hero4__illust__5 { --width: 391; --right: 13; --bottom: -25; } } @media screen and (max-width: 1023px) { .p-hero4.-large .p-hero4__illust__5 { --width: 137; --right: -5; --bottom: 11; } } .p-hero4__title { position: relative; z-index: 10; margin-inline: auto; } @media screen and (max-width: 1023px) { .p-hero4__title { max-width: 35.7rem ; width: 91.53846%; margin-top: 16.66667%; } } .p-hero4__bg { mix-blend-mode: lighten; opacity: .6; } /* ---------- p-hero4__illust ---------- */ .p-hero4__illust { position: absolute; left: 50%; bottom: 0; z-index: 11; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; } .p-hero4__illust img { max-width: 100%; } .p-hero4__illust__1 { --z-index: 1; } .p-hero4__illust__2 { --z-index: 2; } .p-hero4__illust__3 { --z-index: 3; } .p-hero4__illust__4 { --z-index: 2; } .p-hero4__illust__5 { --z-index: 1; } /** * * pagination.scss * */ /* ------------------------------------------------------------ p-pagination ------------------------------------------------------------ */ .p-pagination { display: flex; align-items: center; justify-content: center; --gap: 3rem ; gap: var(--gap); margin-top: 8rem ; } /* ---------------------------------------- p-pagination__num ---------------------------------------- */ .p-pagination__num { display: flex; gap: var(--gap); } .p-pagination__num a { display: block; font-family: var(--font-sans-serif); font-weight: 400; padding: var(--anchor-padding-lg); margin: calc( var( --anchor-padding-lg ) * -1); } @media screen and (min-width: 1024px) { .p-pagination__num a { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .p-pagination__num a { font-size: var(--font-size16); } } .p-pagination__ellipsis { display: flex; align-items: center; justify-content: center; font-size: var(--font-size12); } /* ---------------------------------------- p-pagination__arrow ---------------------------------------- */ /* ------------------------------------------------------------ p-pagination2 ------------------------------------------------------------ */ .p-pagination2 { border-top: var(--solid); } @media screen and (min-width: 1024px) { .p-pagination2 { margin-top: 14rem ; padding-top: 12rem ; } } @media screen and (max-width: 1023px) { .p-pagination2 { margin-top: 8rem ; padding-top: 6rem ; } } /** * * pv.scss * */ /* ------------------------------------------------------------ p-pv ------------------------------------------------------------ */ .p-pv { display: flex; align-items: flex-end; justify-content: flex-start; color: var(--color-txt2); text-align: left; padding: 1rem ; } @media screen and (min-width: 1024px) { .p-pv { width: 30rem ; height: 16.8rem ; } } @media screen and (max-width: 1023px) { .p-pv { aspect-ratio: 350 / 196; } } @media screen and (max-width: 1023px) and (min-width: 561px) { .p-pv { width: 35rem ; } } @media screen and (max-width: 560px) { .p-pv { width: 100%; } } .p-pv::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; background: var(--color-gradation); } @media screen and (min-width: 1024px) { .p-pv::before { height: 47.61905%; } } @media screen and (max-width: 1023px) { .p-pv::before { height: 40.81633%; } } .p-pv__contents { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.8rem ; } /* ---------- p-pv__txts ---------- */ .p-pv__title { font-size: var(--font-size12); line-height: var(--line-height-noraml); } .p-pv__time { font-family: var(--font-sans-serif2); font-size: var(--font-size12); line-height: var(--line-height-noraml); } /** * * service.scss * */ /* ------------------------------------------------------------ p-service ------------------------------------------------------------ */ .p-service { background-color: var(--color-bg6); } @media screen and (min-width: 1024px) { .p-service { padding: 16rem 0 ; } } @media screen and (max-width: 1023px) { .p-service { padding: 12rem 0 ; } } @media screen and (max-width: 1023px) { .p-service .p-header { margin-bottom: 4rem ; } } .p-service__section { background-color: var(--color-bg6); color: var(--color-txt2); } @media screen and (min-width: 1024px) { .p-service__section { position: sticky; top: 0; height: 100vh; padding: 20.6rem 0 11.6rem ; display: flex; } } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-service__section { padding: 26.82292vh 0 15.10417vh; } } @media screen and (min-width: 1024px) { .p-service__section + .p-service__section { margin-top: 30rem ; } } @media screen and (max-width: 1023px) { .p-service__section + .p-service__section { margin-top: 8rem ; } } @media screen and (min-width: 1024px) { .p-service__section__inner { display: flex; justify-content: space-between; } } @media screen and (max-width: 1023px) { .p-service__section__inner { display: block; } } /* ---------------------------------------- p-service__figure ---------------------------------------- */ .p-service__figure { position: relative; } @media screen and (min-width: 1024px) { .p-service__figure { width: var(--grid6); } } @media screen and (max-width: 1023px) { .p-service__figure { max-height: 46rem ; } .p-service__figure::after { content: ''; display: block; padding-top: 65.71429%; } } /* ---------------------------------------- p-service__contents ---------------------------------------- */ .p-service__contents { position: relative; } @media screen and (min-width: 1024px) { .p-service__contents { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: var(--grid5); } } @media screen and (max-width: 1023px) { .p-service__contents { margin-top: 2rem ; } } @media screen and (min-width: 1024px) { .p-service__contents .p-button2 { margin-top: 8rem ; } } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-service__contents .p-button2 { margin-top: 10.41667vh; } } @media screen and (max-width: 1023px) { .p-service__contents .p-button2 { margin-top: 4rem ; } } .p-service__num { --width: 5rem ; --height: 4.3rem ; min-width: var(--width); width: var(--width); min-height: var(--height); height: var(--height); display: flex; align-items: center; justify-content: center; background-image: url("../img/common/icon/title_symbol.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; font-family: var(--font-sans-serif); font-size: var(--font-size16); padding-top: 0.5rem ; } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-service__num { --width: 6.51042vh; --height: 5.59896vh; font-size: 2.08333vh; padding-top: 0.65104vh; } } .p-service__title { font-weight: 400; letter-spacing: var(--letter-spacing-_rg); line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .p-service__title { font-size: 2.77778vw; margin-top: 4rem ; } } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-service__title { font-size: max(4.16667vh , 30px , 3.0rem ); margin-top: 5.20833vh; } } @media screen and (min-width: 1441px) { .p-service__title { font-size: var(--font-size48); } } @media screen and (max-width: 1023px) { .p-service__title { font-size: var(--font-size30); margin-top: 2rem ; } } @media screen and (min-width: 1024px) { .p-service__txt { margin-top: 2rem ; } } @media screen and (min-width: 1024px) and (max-height: 768px) { .p-service__txt { margin-top: 2.60417vh; } } @media screen and (max-width: 1023px) { .p-service__txt { margin-top: 1.5rem ; } } /** * * special.scss * */ /* ------------------------------------------------------------ p-special スマホは共通 ------------------------------------------------------------ */ /* ------------------------------------------------------------ p-special__looptxt ------------------------------------------------------------ */ .p-special__looptxt { --slide-gap: 4rem ; /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } @media screen and (max-width: 1023px) { .p-special__looptxt { margin-bottom: 8rem ; } } @media screen and (min-width: 1024px) { .p-special__looptxt.-medium { margin-bottom: 8rem ; } .p-special__looptxt.-medium .p-special__looptxt__en { font-size: var(--font-size96); } .p-special__looptxt.-medium .p-special__looptxt__img { --slide-width: 24rem ; border-radius: var(--radius-2xs); } } @media screen and (min-width: 1024px) { .p-special__looptxt.-large { margin-bottom: 16rem ; } .p-special__looptxt.-large .p-special__looptxt__en { font-size: var(--font-size128); } .p-special__looptxt.-large .p-special__looptxt__img { --slide-width: 30rem ; } } @media screen and (min-width: 1024px) { .p-special__looptxt__cell + .p-special__looptxt__cell { margin-top: 4rem ; } } @media screen and (max-width: 1023px) { .p-special__looptxt__cell + .p-special__looptxt__cell { margin-top: 2rem ; } } .p-special__looptxt__en { font-family: var(--font-sans-serif2); font-weight: 400; letter-spacing: var(--letter-spacing-_rg); } @media screen and (max-width: 1023px) { .p-special__looptxt__en { font-size: var(--font-size64); } } @media screen and (max-width: 1023px) { .p-special__looptxt__img { --slide-width: 16rem ; } } /* ------------------------------------------------------------ p-special__inners ------------------------------------------------------------ */ .p-special__inners { display: grid; grid-template-columns: 1fr; } @media screen and (min-width: 1024px) { .p-special__inners.-col-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem ; } .p-special__inners.-col-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem ; } } /* ---------------------------------------- p-special__item ---------------------------------------- */ .p-special__item { /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .p-special__item a { --color-hover-bg: var( --color-hover-bg2 ); display: block; } @media screen and (max-width: 1023px) { .p-special__item a { height: 64rem ; } } @media screen and (max-width: 1023px) { .p-special__item + .p-special__item { margin-top: 2rem ; } } @media screen and (min-width: 1024px) { .p-special__item.-small a { height: 72rem ; } } @media screen and (min-width: 1024px) { .p-special__item.-medium a { height: 72rem ; } } @media screen and (min-width: 1024px) { .p-special__item.-large { position: sticky; top: 0; } .p-special__item.-large:nth-of-type(1) { top: 12rem ; padding-bottom: 4rem ; } .p-special__item.-large:nth-of-type(2) { top: 14rem ; padding-bottom: 2rem ; margin-top: 14rem ; } .p-special__item.-large:nth-of-type(3) { top: 16rem ; margin-top: 16rem ; } .p-special__item.-large a { height: 80rem ; } } /* ---------------------------------------- p-special__finding ---------------------------------------- */ .p-special__finding { /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .p-special__finding a { background-color: var(--color-bg14); } @media screen and (max-width: 1023px) { .p-special__finding a { padding: 6.4rem var(--outside); } } @media screen and (min-width: 1024px) { .p-special__finding.-small a { display: block; padding: 6.2rem var(--outside-sm); } .p-special__finding.-small .p-special__finding__title { width: 34.4rem ; } .p-special__finding.-small .p-special__finding__catch { width: 26.2rem ; margin-top: 0.6rem ; } .p-special__finding.-small .p-special__finding__txt { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); margin-top: 2.4rem ; } .p-special__finding.-small .p-special__finding__figure { height: 40.4rem ; } .p-special__finding.-small .p-special__finding__figure img { min-width: 115.86998%; left: -10%; } } @media screen and (min-width: 1024px) { .p-special__finding.-medium a { display: block; padding: 6.2rem var(--outside-sm); } .p-special__finding.-medium .p-special__finding__title { width: 51.6rem ; } .p-special__finding.-medium .p-special__finding__catch { width: 41.9rem ; margin-top: 1rem ; } .p-special__finding.-medium .p-special__finding__txt { font-size: var(--font-size16); line-height: calc( 24 / 16 * 1em); margin-top: 2.6rem ; } .p-special__finding.-medium .p-special__finding__figure { height: 39.5rem ; } } @media screen and (min-width: 1024px) { .p-special__finding.-large a { display: flex; align-items: flex-start; justify-content: space-between; padding: 7.2rem 6rem ; padding: 7.2rem var(--outside); } .p-special__finding.-large .p-special__finding__catch { width: 42rem ; } .p-special__finding.-large .p-special__finding__txt { font-size: var(--font-size18); line-height: calc( 28 / 18 * 1em); margin-top: 2.7rem ; } .p-special__finding.-large .p-special__finding__figure { height: 47rem ; } } @media screen and (min-width: 1024px) { .p-special__finding.-large .p-special__finding__title { width: 60.32rem ; } } @media screen and (min-width: 1441px) { .p-special__finding.-large .p-special__finding__title { width: 67.86rem ; } } @media screen and (min-width: 1728px) { .p-special__finding.-large .p-special__finding__title { width: 75.4rem ; } } /* ---------- p-special__finding__title ---------- */ @media screen and (max-width: 1023px) { .p-special__finding__title { width: 30.1rem ; } } /* ---------- p-special__finding__contents ---------- */ @media screen and (max-width: 1023px) { .p-special__finding__contents { margin-top: 0.9rem ; } } @media screen and (max-width: 1023px) { .p-special__finding__catch { width: 26.2rem ; } } .p-special__finding__txt { font-weight: 700; } @media screen and (max-width: 1023px) { .p-special__finding__txt { font-size: var(--font-size14); line-height: calc( 24 / 14 * 1em); margin-top: 2.4rem ; } } /* ---------- p-special__finding__figure ---------- */ .p-special__finding__figure { position: absolute; left: 0; bottom: 0; z-index: -1; width: 100%; } @media screen and (max-width: 1023px) { .p-special__finding__figure { height: 34.2rem ; } } .p-special__finding__figure img { -o-object-position: 50% 0; object-position: 50% 0; } /* ---------------------------------------- p-special__comic ---------------------------------------- */ .p-special__comic { /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .p-special__comic a { display: flex; align-items: center; justify-content: center; border: var(--solid-medium-comic); background-color: var(--color-comic); } @media screen and (min-width: 1024px) { .p-special__comic.-small .p-special__comic__title { width: 32.16rem ; } .p-special__comic.-small .p-special__comic__looptxt { --slide-gap: 1rem ; height: 3.4rem ; } .p-special__comic.-small .p-special__comic__looptxt p { font-size: var(--font-size24); } } @media screen and (min-width: 1728px) { .p-special__comic.-small .p-special__comic__title { width: 40.2rem ; } } @media screen and (min-width: 1024px) { .p-special__comic.-medium .p-special__comic__title { width: 44.7rem ; } .p-special__comic.-medium .p-special__comic__looptxt { --slide-gap: 1rem ; height: 4.2rem ; } .p-special__comic.-medium .p-special__comic__looptxt p { font-size: var(--font-size36); } } @media screen and (min-width: 1024px) { .p-special__comic.-large .p-special__comic__title { width: 96.9rem ; } .p-special__comic.-large .p-special__comic__looptxt { --slide-gap: 3rem ; height: 5.4rem ; } .p-special__comic.-large .p-special__comic__looptxt p { font-size: var(--font-size48); } } /* ---------- p-special__comic__title ---------- */ @media screen and (max-width: 1023px) { .p-special__comic__title { width: 30.3rem ; } } /* ---------- p-special__comic__looptxt ---------- */ .p-special__comic__looptxt { position: absolute; left: 0; z-index: 10; width: 100%; background-color: var(--color-bg); color: var(--color-comic); } @media screen and (max-width: 1023px) { .p-special__comic__looptxt { --slide-gap: 1rem ; height: 3.4rem ; } } .p-special__comic__looptxt.-top { top: 0; } .p-special__comic__looptxt.-bottom { bottom: 0; } .p-special__comic__looptxt p { text-transform: uppercase; font-family: var(--font-sans-serif3); font-weight: 700; letter-spacing: var(--letter-spacing-_xl); } @media screen and (max-width: 1023px) { .p-special__comic__looptxt p { font-size: var(--font-size24); } } /* ---------- p-special__comic__bg ---------- */ .p-special__comic__bg { mix-blend-mode: lighten; opacity: .9; } /* ---------------------------------------- p-special__numbers ---------------------------------------- */ .p-special__numbers { /* ---------- -small ---------- */ /* ---------- -medium ---------- */ /* ---------- -large ---------- */ } .p-special__numbers a { background-color: var(--color-bg12); } @media screen and (max-width: 1023px) { .p-special__numbers a { padding: 6rem 0 0 ; } } @media screen and (min-width: 1024px) { .p-special__numbers.-small a { padding: 6rem 0 0 ; } .p-special__numbers.-small .p-special__numbers__ja { width: 24rem ; } .p-special__numbers.-small .p-special__numbers__en { width: 20rem ; margin-top: 1rem ; } .p-special__numbers.-small .p-special__numbers__txt { font-size: var(--font-size16); line-height: calc( 24 / 16 * 1em); margin-top: 2rem ; } .p-special__numbers.-small .p-special__numbers__illust { --base-width: 523; display: flex; align-items: flex-end; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-special__numbers.-small .p-special__numbers__illust__illust div.-unique1 { max-width: 39.9rem ; width: 76.29063%; margin-bottom: -3.8rem ; -webkit-transform: translateX(5.8rem); transform: translateX(5.8rem); } .p-special__numbers.-small .p-special__numbers__illust__illust div.-unique2 { --width: 152; --top: -182; --left: -32; } .p-special__numbers.-small .p-special__numbers__illust__illust div.-unique3 { --width: 93; --top: -128; --right: 7; } .p-special__numbers.-small .p-special__numbers__illust__illust div.-unique4 { --width: 141; --top: 43; --left: 30; } .p-special__numbers.-small .p-special__numbers__illust__num { font-size: var(--font-size96); } .p-special__numbers.-small .p-special__numbers__illust__num.-unique1 { --top: 102; --left: 45; } .p-special__numbers.-small .p-special__numbers__illust__num.-unique2 { --top: 88; --right: -60; } .p-special__numbers.-small .p-special__numbers__illust__num.-unique3 { --top: -42; --left: 8; } .p-special__numbers.-small .p-special__numbers__illust__num.-unique4 { display: none; } .p-special__numbers.-small .p-special__numbers__illust__num.-unique5 { --top: 277; --right: 60; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(1) { left: 16.6348%; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(2) { left: 33.2696%; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(3) { left: 49.9044%; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(4) { left: 66.5392%; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(5) { left: 83.174%; } .p-special__numbers.-small .p-special__numbers__bg .-line-y:nth-of-type(6) { display: none; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(1) { top: 12.5%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(2) { top: 25%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(3) { top: 37.5%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(4) { top: 50%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(5) { top: 62.5%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(6) { top: 75%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(7) { top: 87.5%; } .p-special__numbers.-small .p-special__numbers__bg .-line-x:nth-of-type(8) { display: none; } } @media screen and (min-width: 1024px) { .p-special__numbers.-medium a { padding: 6rem 0 0 ; } .p-special__numbers.-medium .p-special__numbers__contents { position: relative; z-index: 10; width: 59.82368%; } .p-special__numbers.-medium .p-special__numbers__ja { width: 32.9rem ; } .p-special__numbers.-medium .p-special__numbers__en { width: 28.5rem ; margin-top: 1rem ; } .p-special__numbers.-medium .p-special__numbers__txt { font-size: var(--font-size20); line-height: calc( 24 / 20 * 1em); margin-top: 5rem ; } .p-special__numbers.-medium .p-special__numbers__illust { --base-width: 794; display: flex; align-items: flex-end; justify-content: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-special__numbers.-medium .p-special__numbers__illust__illust div.-unique1 { max-width: 39.9rem ; width: 50.25189%; margin-right: 1.1335%; margin-left: auto; margin-bottom: 11.3rem ; } .p-special__numbers.-medium .p-special__numbers__illust__illust div.-unique2 { --width: 152; --top: -209; --right: 160; } .p-special__numbers.-medium .p-special__numbers__illust__illust div.-unique3 { --width: 93; --top: -128; --right: 7; } .p-special__numbers.-medium .p-special__numbers__illust__illust div.-unique4 { --width: 141; --top: 292; --right: 181; } .p-special__numbers.-medium .p-special__numbers__illust__num { font-size: var(--font-size96); } .p-special__numbers.-medium .p-special__numbers__illust__num.-unique1 { --top: 440; --left: 2; } .p-special__numbers.-medium .p-special__numbers__illust__num.-unique2 { --top: 34; --right: 146; } .p-special__numbers.-medium .p-special__numbers__illust__num.-unique3 { --top: -25; --left: 2; } .p-special__numbers.-medium .p-special__numbers__illust__num.-unique4 { --top: 545; --right: -32; } .p-special__numbers.-medium .p-special__numbers__illust__num.-unique5 { --top: 259; --right: 307; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(1) { left: 14.285%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(2) { left: 28.57%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(3) { left: 42.855%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(4) { left: 57.14%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(5) { left: 71.425%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-y:nth-of-type(6) { left: 85.71%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(1) { top: 12.5%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(2) { top: 25%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(3) { top: 37.5%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(4) { top: 50%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(5) { top: 62.5%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(6) { top: 75%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(7) { top: 87.5%; } .p-special__numbers.-medium .p-special__numbers__bg .-line-x:nth-of-type(8) { display: none; } } @media screen and (min-width: 1024px) { .p-special__numbers.-large a { display: flex; } .p-special__numbers.-large .p-special__numbers__contents { width: 35.18519vw; } .p-special__numbers.-large .p-special__numbers__ja { width: 34.7rem ; } .p-special__numbers.-large .p-special__numbers__en { width: 34.2rem ; margin-top: 3rem ; } .p-special__numbers.-large .p-special__numbers__txt { font-size: var(--font-size18); line-height: calc( 32 / 18 * 1em); margin-top: 4rem ; } .p-special__numbers.-large .p-special__numbers__illust { --base-width: 1000; display: flex; align-items: flex-end; justify-content: center; width: 57.87037vw; padding-bottom: 3.4rem ; } .p-special__numbers.-large .p-special__numbers__illust__illust div.-unique1 { max-width: 75.4rem ; width: 75.4%; -webkit-transform: translateX(1rem); transform: translateX(1rem); } .p-special__numbers.-large .p-special__numbers__illust__illust div.-unique2 { --width: 285; --top: -193; --left: 157; } .p-special__numbers.-large .p-special__numbers__illust__illust div.-unique3 { --width: 176; --top: -171; --right: 252; } .p-special__numbers.-large .p-special__numbers__illust__illust div.-unique4 { --width: 265; --top: 82; --left: -6; } .p-special__numbers.-large .p-special__numbers__illust__num { font-size: var(--font-size160); } .p-special__numbers.-large .p-special__numbers__illust__num.-unique1 { --top: -37; --left: 103; } .p-special__numbers.-large .p-special__numbers__illust__num.-unique2 { --top: 88; --right: -40; } .p-special__numbers.-large .p-special__numbers__illust__num.-unique3 { --left: -20; --bottom: -7; } .p-special__numbers.-large .p-special__numbers__illust__num.-unique4 { --right: 253; --bottom: -102; } .p-special__numbers.-large .p-special__numbers__illust__num.-unique5 { --right: 96; --bottom: 174; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(1) { left: 16.66667%; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(2) { left: 33.33333%; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(3) { left: 50%; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(4) { left: 66.66667%; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(5) { left: 83.33333%; } .p-special__numbers.-large .p-special__numbers__bg .-line-y:nth-of-type(6) { display: none; } .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(1) { top: 33.333%; } .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(2) { top: 66.666%; } .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(3), .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(4), .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(5), .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(6), .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(7), .p-special__numbers.-large .p-special__numbers__bg .-line-x:nth-of-type(8) { display: none; } } /* ---------- p-special__numbers__contents ---------- */ .p-special__numbers__contents { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (max-width: 1023px) { .p-special__numbers__ja { width: 18rem ; } } @media screen and (max-width: 1023px) { .p-special__numbers__en { width: 19.9rem ; margin-top: 1rem ; } } .p-special__numbers__txt { text-align: center; font-weight: 700; } @media screen and (max-width: 1023px) { .p-special__numbers__txt { font-size: var(--font-size16); line-height: calc( 24 / 16 * 1em); margin-top: 2rem ; } } /* ---------- p-special__numbers__illust ---------- */ .p-special__numbers__illust { position: relative; z-index: 1; } @media screen and (max-width: 1023px) { .p-special__numbers__illust { --base-width: 350; margin-top: 9.6rem ; } } .p-special__numbers__illust__illust { position: relative; z-index: 10; width: 100%; } .p-special__numbers__illust__illust div:not(.-unique1) { position: absolute; } .p-special__numbers__illust__illust div.-unique1 { position: relative; margin-inline: auto; } @media screen and (max-width: 1023px) { .p-special__numbers__illust__illust div.-unique1 { max-width: 39.13rem ; width: 86%; } } @media screen and (max-width: 1023px) { .p-special__numbers__illust__illust div.-unique2 { display: none; } } @media screen and (max-width: 1023px) { .p-special__numbers__illust__illust div.-unique3 { --width: 93; --top: -88; --right: 53; } } @media screen and (max-width: 1023px) { .p-special__numbers__illust__illust div.-unique4 { --width: 141; --top: -70; --left: 18; } } .p-special__numbers__illust__num { font-family: var(--font-serif); font-weight: 400; line-height: normal; opacity: 0.05; } @media screen and (max-width: 1023px) { .p-special__numbers__illust__num { display: none; } } /* ---------- p-special__numbers__bg ---------- */ .p-special__numbers__bg { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; } .p-special__numbers__bg .-line-x, .p-special__numbers__bg .-line-y { position: absolute; } .p-special__numbers__bg .-line-y { top: 0; width: 0; height: 100%; border-left: var(--solid5); } @media screen and (max-width: 1023px) { .p-special__numbers__bg .-line-y:nth-of-type(1) { left: 20%; } .p-special__numbers__bg .-line-y:nth-of-type(2) { left: 40%; } .p-special__numbers__bg .-line-y:nth-of-type(3) { left: 60%; } .p-special__numbers__bg .-line-y:nth-of-type(4) { left: 80%; } .p-special__numbers__bg .-line-y:nth-of-type(5) { display: none; } } .p-special__numbers__bg .-line-x { left: 0; width: 100%; height: 0; border-top: var(--solid5); } @media screen and (max-width: 1023px) { .p-special__numbers__bg .-line-x:nth-of-type(1) { top: 10.9375%; } .p-special__numbers__bg .-line-x:nth-of-type(2) { top: 21.875%; } .p-special__numbers__bg .-line-x:nth-of-type(3) { top: 32.8125%; } .p-special__numbers__bg .-line-x:nth-of-type(4) { top: 43.75%; } .p-special__numbers__bg .-line-x:nth-of-type(5) { top: 54.6875%; } .p-special__numbers__bg .-line-x:nth-of-type(6) { top: 65.625%; } .p-special__numbers__bg .-line-x:nth-of-type(7) { top: 76.5625%; } .p-special__numbers__bg .-line-x:nth-of-type(8) { top: 87.5%; } } /** * * ui.scss * */ /* ------------------------------------------------------------ p-ui ------------------------------------------------------------ */ .p-ui { display: flex; align-items: center; justify-content: center; gap: 3rem ; } @media screen and (min-width: 1024px) { .p-ui { margin-top: 3.8rem ; } } @media screen and (max-width: 1023px) { .p-ui { margin-top: 8.5rem ; } } /** * * editor.scss * */ /* ------------------------------------------------------------ s-editor ------------------------------------------------------------ */ .s-editor { word-break: break-all; word-wrap: break-word; font-weight: 400; /* ----- space ----- */ /* ----- text ----- */ /* ----- ul,ol ----- */ /* ----- img,iframe ----- */ /* ----- hr ----- */ /* ----- blockquote ----- */ } @media screen and (min-width: 1024px) { .s-editor { font-size: var(--font-size20); line-height: calc( 36 / 20 * 1em); } } @media screen and (max-width: 1023px) { .s-editor { font-size: var(--font-size16); line-height: calc( 30 / 16 * 1em); } } @media screen and (min-width: 1024px) { .s-editor * + p, .s-editor * + ul, .s-editor * + ol, .s-editor * + table, .s-editor * + figure, .s-editor * + .wp-caption, .s-editor * + pre, .s-editor * + blockquote { margin-top: 8rem ; } } @media screen and (max-width: 1023px) { .s-editor * + p, .s-editor * + ul, .s-editor * + ol, .s-editor * + table, .s-editor * + figure, .s-editor * + .wp-caption, .s-editor * + pre, .s-editor * + blockquote { margin-top: 6rem ; } } @media screen and (min-width: 1024px) { .s-editor * + h2, .s-editor * + h3 { margin-top: 8rem ; } } @media screen and (max-width: 1023px) { .s-editor * + h2, .s-editor * + h3 { margin-top: 6rem ; } } .s-editor * + h4, .s-editor * + h5, .s-editor * + h6 { margin-top: 3rem ; } @media screen and (min-width: 1024px) { .s-editor h2 + * { margin-top: 4rem ; } } @media screen and (max-width: 1023px) { .s-editor h2 + * { margin-top: 2rem ; } } .s-editor h3 + *, .s-editor h4 + *, .s-editor h5 + *, .s-editor h6 + * { margin-top: 2rem ; } .s-editor img + img, .s-editor figure + figure, .s-editor .c-youtube2 + .c-youtube2 { margin-top: 4rem ; } .s-editor li + li { margin-top: 1.5rem ; } .s-editor h2, .s-editor h3, .s-editor h4, .s-editor h5, .s-editor h6 { font-weight: 700; line-height: inherit; } .s-editor h2 { display: flex; align-items: flex-start; border-bottom: var(--solid); } @media screen and (min-width: 1024px) { .s-editor h2 { font-size: var(--font-size32); line-height: calc( 48 / 32 * 1em); gap: 2rem ; padding-bottom: 2rem ; } } @media screen and (max-width: 1023px) { .s-editor h2 { font-size: var(--font-size20); gap: 1rem ; padding-bottom: 1.7rem ; } } .s-editor h2::before { content: ''; display: block; background-image: url("../img/common/icon/title_symbol.svg"); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } @media screen and (min-width: 1024px) { .s-editor h2::before { width: 3.7rem ; height: 3.2rem ; margin-top: 1.1rem ; } } @media screen and (max-width: 1023px) { .s-editor h2::before { width: 2.8rem ; height: 2.4rem ; margin-top: 0.4rem ; } } .s-editor h3 { border-radius: var(--radius-3xs); background-color: var(--color-bg4); } @media screen and (min-width: 1024px) { .s-editor h3 { font-size: var(--font-size24); padding: 1rem 2rem ; } } @media screen and (max-width: 1023px) { .s-editor h3 { font-size: var(--font-size18); padding: 0.8rem 1.5rem ; } } @media screen and (min-width: 1024px) { .s-editor h4 { font-size: var(--font-size24); } } @media screen and (max-width: 1023px) { .s-editor h4 { font-size: var(--font-size20); } } @media screen and (min-width: 1024px) { .s-editor h5 { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .s-editor h5 { font-size: var(--font-size16); } } @media screen and (min-width: 1024px) { .s-editor h6 { font-size: var(--font-size16); } } @media screen and (max-width: 1023px) { .s-editor h6 { font-size: var(--font-size15); } } .s-editor a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5rem ; } @media (hover: hover) { .s-editor a:hover { text-decoration: none; } .s-editor a:hover img { opacity: var(--hover-opacity); } } .s-editor b, .s-editor strong { font-weight: bold; } .s-editor em { font-style: italic; } .s-editor i { font-style: italic; } .s-editor ul { list-style-type: circle; } .s-editor ol { list-style-type: decimal; } .s-editor li { line-height: var(--line-height-noraml); } .s-editor img, .s-editor iframe { width: auto; max-width: 100%; } .s-editor .wp-caption { max-width: 100% !important; } .s-editor .wp-video { width: auto !important; } .s-editor video { max-width: 100%; width: auto !important; height: auto !important; } .s-editor hr { border: none; height: 1px; background-color: var(--color-line); } @media screen and (min-width: 1024px) { .s-editor hr { margin-top: 8rem ; margin-bottom: 8rem ; } } @media screen and (max-width: 1023px) { .s-editor hr { margin-top: 6rem ; margin-bottom: 6rem ; } } .s-editor blockquote { background-color: var(--color-bg3); font-style: italic; padding: 2em; } /* ---------------------------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------------------------- */ /** * * footer.scss * */ /* ------------------------------------------------------------ l-footer ------------------------------------------------------------ */ .l-footer { position: relative; z-index: var(--z-index-l-footer); border-top: var(--solid); background-color: var(--color-bg); } @media screen and (min-width: 1024px) { .l-footer { padding-top: 12rem ; } } @media screen and (max-width: 1023px) { .l-footer { padding-top: 8rem ; } } @media screen and (min-width: 1024px) { .l-special + .l-footer { margin-top: 24rem ; } } @media screen and (max-width: 1023px) { .l-special + .l-footer { margin-top: 8rem ; } } /* ------------------------------------------------------------ l-footer__contact ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .l-footer__contact__inner { display: flex; align-items: flex-end; justify-content: space-between; } } /* ---------------------------------------- l-footer__contact__contents ---------------------------------------- */ .l-footer__contact__button { display: flex; flex-wrap: wrap; } @media screen and (min-width: 1024px) { .l-footer__contact__button { margin-top: 8rem ; gap: 2rem ; } } @media screen and (max-width: 1023px) { .l-footer__contact__button { margin-top: 4rem ; gap: 1rem ; } } @media screen and (min-width: 1024px) { .l-footer__contact__button li { width: 33.2rem ; height: 8rem ; } } @media screen and (max-width: 1023px) { .l-footer__contact__button li { height: 6rem ; } } @media screen and (max-width: 1023px) and (min-width: 561px) { .l-footer__contact__button li { width: 35rem ; } } @media screen and (max-width: 560px) { .l-footer__contact__button li { width: 100%; } } .l-footer__contact__button a { --color-hover-bg: var( --color-txt ); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: var(--solid3); letter-spacing: var(--letter-spacing-_rg); transition: color var(--transition-hover); } @media screen and (min-width: 1024px) { .l-footer__contact__button a { font-size: var(--font-size20); } } @media screen and (max-width: 1023px) { .l-footer__contact__button a { font-size: var(--font-size16); } } @media (hover: hover) { .l-footer__contact__button a:hover { color: var(--color-txt2); } } /* ---------------------------------------- l-footer__contact__contents ---------------------------------------- */ @media screen and (min-width: 1024px) { .l-footer__pv { margin-right: 2.89352vw; } } @media screen and (max-width: 1023px) { .l-footer__pv { margin-top: 6rem ; } } /* ------------------------------------------------------------ l-footer__looptxt ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .l-footer__looptxt { --slide-width: 195.5rem ; margin-top: 12rem ; } } @media screen and (max-width: 1023px) { .l-footer__looptxt { --slide-width: 153.7rem ; margin-top: 6rem ; } } /* ------------------------------------------------------------ l-footer__main ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .l-footer__main { margin-top: 12rem ; } } @media screen and (max-width: 1023px) { .l-footer__main { margin-top: 6rem ; padding-bottom: 8rem ; } } @media screen and (min-width: 1024px) { .l-footer__main__inner { display: flex; flex-direction: column-reverse; } } /* ---------------------------------------- l-footer__main__company ---------------------------------------- */ @media screen and (min-width: 1024px) { .l-footer__main__company { display: flex; align-items: center; justify-content: space-between; border-top: var(--solid); padding: 4rem 0 ; margin-top: 10rem ; } } /* ---------- l-footer__main__profile ---------- */ @media screen and (min-width: 1024px) { .l-footer__main__profile { display: flex; align-items: center; } } .l-footer__main__logo { width: 16rem ; } @media screen and (max-width: 1023px) { .l-footer__main__logo { margin-inline: auto; } } .l-footer__main__address { font-weight: 400; font-size: var(--font-size14); line-height: calc( 20 / 14 * 1em); } @media screen and (min-width: 1024px) { .l-footer__main__address { margin-left: 4rem ; } } @media screen and (max-width: 1023px) { .l-footer__main__address { text-align: center; margin-top: 2rem ; } } /* ---------- l-footer__main__copyright ---------- */ .l-footer__main__copyright { font-family: var(--font-sans-serif); font-weight: 400; font-size: var(--font-size10); line-height: calc( 20 / 10 * 1em); } @media screen and (max-width: 1023px) { .l-footer__main__copyright { text-align: center; margin-top: 4rem ; } } /* ---------------------------------------- l-footer__main__nav ---------------------------------------- */ @media screen and (max-width: 1023px) { .l-footer__main__nav { margin-top: 6rem ; border-bottom: var(--solid); } } @media screen and (min-width: 1024px) { .l-footer__main__nav__list { display: flex; gap: var(--gap); } } @media screen and (min-width: 1024px) { .l-footer__main__nav__cell { flex-basis: 100%; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__cell { border-top: var(--solid); } } @media screen and (min-width: 1024px) { .l-footer__main__nav__cell2 { flex-basis: 100%; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__cell2 { border-top: var(--solid); padding-top: 2.3rem ; } } .l-footer__main__nav__cell2 + .l-footer__main__nav__cell2 { border-top: none; } .l-footer__main__nav__cell2:last-of-type { padding-bottom: 2rem ; } /* ---------- l-footer__main__nav__parent ---------- */ .l-footer__main__nav__parent { display: flex; justify-content: space-between; /* ---------- 子カテゴリーなし ---------- */ } .l-footer__main__nav__parent > span, .l-footer__main__nav__parent > a { display: flex; align-items: center; justify-content: space-between; } @media screen and (min-width: 1024px) { .l-footer__main__nav__parent > span, .l-footer__main__nav__parent > a { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__parent > span, .l-footer__main__nav__parent > a { flex: 1; padding: 2.2rem 0 ; } } .l-footer__main__nav__parent > span span, .l-footer__main__nav__parent > a span { display: block; font-weight: 700; font-size: var(--font-size16); line-height: var(--line-height-noraml); } @media screen and (min-width: 1024px) { .l-footer__main__nav__parent .c-arrow2 { display: none; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__parent.-single a { padding: 0 1.7rem 0 0 ; } } @media screen and (min-width: 1024px) { .l-footer__main__nav__parent__button { display: none; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__parent__button { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem ; margin-left: 1.5rem ; } .l-footer__main__nav__parent__button::before { content: ''; display: block; width: 0; height: 2.4rem ; border-left: var(--solid); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } /* ---------- l-footer__main__nav__children ---------- */ @media screen and (min-width: 1024px) { .l-footer__main__nav__children { margin-top: 2rem ; } } .l-footer__main__nav__children ul { display: grid; } @media screen and (min-width: 1024px) { .l-footer__main__nav__children ul { gap: 1rem ; } } @media screen and (max-width: 1023px) { .l-footer__main__nav__children ul { gap: 1.5rem ; padding-bottom: 2rem ; } } .l-footer__main__nav__children a { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: var(--color-txt3); font-weight: 400; font-size: var(--font-size15); line-height: var(--line-height-noraml); } /* ------------------------------------------------------------ l-footer__ura ------------------------------------------------------------ */ .l-footer__ura { position: relative; z-index: 1; overflow: hidden; background-color: var(--color-bg2); } @media screen and (min-width: 1024px) { .l-footer__ura { max-height: 86.4rem ; min-height: 64.8rem ; height: 41.66667vw; } } @media screen and (max-width: 1023px) { .l-footer__ura { max-height: 58.8rem ; min-height: 44.1rem ; height: 125.64103vw; } } .l-footer__ura a { display: block; width: 100%; height: 100%; } /* ---------------------------------------- l-footer__ura__contents ---------------------------------------- */ .l-footer__ura__contents { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } @media screen and (min-width: 1024px) { .l-footer__ura__contents { gap: 3.3rem ; padding-bottom: 2rem ; } } @media screen and (max-width: 1023px) { .l-footer__ura__contents { gap: 2.1rem ; padding-top: 2.3rem ; } } @media screen and (min-width: 1024px) { .l-footer__ura__logo { width: 103rem ; } } @media screen and (max-width: 1023px) { .l-footer__ura__logo { width: 34.2rem ; } } /* ---------------------------------------- l-footer__ura__figure ---------------------------------------- */ .l-footer__ura__figure { display: flex; justify-content: center; padding: 0.5rem 0 ; opacity: .7; --slide-gap: 0.5rem ; } @media screen and (min-width: 1024px) { .l-footer__ura__figure { --slide-width: 48rem ; } } @media screen and (max-width: 1023px) { .l-footer__ura__figure { --slide-width: 32.5rem ; } } .l-footer__ura__figure li { position: relative; height: 100%; } .l-footer__ura__figure [src*="footer_ura_2.webp"] { transition-delay: 60ms; } .l-footer__ura__figure [src*="footer_ura_3.webp"] { transition-delay: 120ms; } .l-footer__ura__figure [src*="footer_ura_4.webp"] { transition-delay: 180ms; } /* ------------------------------------------------------------ l-footer__deep ------------------------------------------------------------ */ .l-footer__deep { height: 41.6666666667vw; position: relative; z-index: 1; background-color: #00A95F; } .l-footer__deep a { display: block; width: 100%; height: 100%; padding-top: 31.8287037037vw; } .l-footer__deep__img { position: absolute; top: 0; left: 0; z-index: 1; } .l-footer__deep .p-button3 { width: 30rem; position: relative; margin: 0 auto; z-index: 2; } @media screen and (max-width: 1023px) { .l-footer__deep .p-button3 { width: 26rem; } } @media screen and (max-width: 768px) { .l-footer__deep { height: 123.0769230769vw; } .l-footer__deep a { padding: 94.358974359vw 0 0; } } /** * * gnav.scss * */ /* ------------------------------------------------------------ l-gnav ------------------------------------------------------------ */ @media screen and (max-width: 1023px) { .l-gnav { display: none; } } .l-gnav-bg { position: fixed; top: 1rem ; left: 0.5787vw; z-index: var(--z-index-l-gnav-bg); width: 98.84259vw; background-color: var(--color-bg); opacity: 0; visibility: hidden; transition: opacity var(--transition-gnav), visibility var(--transition-gnav), height var(--transition-gnav-height); pointer-events: none; } .l-gnav-bg.is-open { opacity: 1; visibility: visible; } /* ---------------------------------------- l-gnav__parent ---------------------------------------- */ .l-gnav__parent { position: fixed; top: 0; left: 0; z-index: var(--z-index-l-gnav__parent); width: 100%; height: var(--header-height); pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 2rem ; color: var(--color-txt2); mix-blend-mode: difference; } .l-gnav__parent a, .l-gnav__parent button { position: relative; z-index: 11; display: block; font-size: var(--font-size14); padding: var(--anchor-padding-lg) 0; margin: calc( var( --anchor-padding-lg ) * -1) 0; pointer-events: auto; } @media (hover: hover) { .l-gnav__parent a:hover::before, .l-gnav__parent button:hover::before { width: 100%; left: 0; right: auto; } } .l-gnav__parent a::before, .l-gnav__parent button::before { content: ''; display: block; width: 0; height: 2px; background-color: currentColor; position: absolute; left: auto; right: 0; bottom: 0; transition: width var(--transition-hover); } .l-gnav__parent a.is-current, .l-gnav__parent button.is-current { opacity: 1; } .l-gnav__parent a.is-current::before, .l-gnav__parent button.is-current::before { width: 100%; left: 0; right: auto; } /* ---------------------------------------- l-gnav__children ---------------------------------------- */ .l-gnav__children__panel { position: fixed; top: 1rem ; left: 0.5787vw; z-index: var(--z-index-l-gnav__children); width: 98.84259vw; padding: 10rem 2.89352vw 6rem; opacity: 0; visibility: hidden; transition: var(--transition-gnav); transition-property: opacity visibility; } .l-gnav__children__panel.is-open { opacity: 1; visibility: visible; } .l-gnav__children__inner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap); } /* ---------- l-gnav__children__heading ---------- */ .l-gnav__children__heading { width: var(--grid4); } .l-gnav__children__heading .p-button2 { margin-top: 4rem ; } .l-gnav__children__en { font-family: var(--font-sans-serif); font-size: var(--font-size64); line-height: calc( 57 / 64 * 1em); letter-spacing: var(--letter-spacing-_rg); } .l-gnav__children__ja { font-weight: 600; font-size: var(--font-size20); line-height: var(--line-height-noraml); letter-spacing: var(--letter-spacing-_rg); margin-top: 1.4rem ; } /* ---------- l-gnav__children__list ---------- */ .l-gnav__children__list { width: var(--grid8); } .l-gnav__children__figure-comic { border: var(--solid-medium-comic); } .l-gnav__children__pagename { display: flex; align-items: center; gap: 1rem ; margin-top: 1.5rem ; } .l-gnav__children__pagename__txt { font-size: var(--font-size16); line-height: var(--line-height-noraml); padding-bottom: 0.1rem ; } /** * * header.scss * */ /* ------------------------------------------------------------ l-header ------------------------------------------------------------ */ .l-header { /* ---------------------------------------- type ---------------------------------------- */ /* ---------- -fill ---------- */ /* ---------- -inner ---------- */ } .l-header.-fill .l-header__main { background-color: var(--color-bg); pointer-events: auto; } .l-header.-inner .l-header__inner { -webkit-backdrop-filter: var(--overlay-blur2); backdrop-filter: var(--overlay-blur2); background-color: var(--color-bg11); pointer-events: auto; } @media screen and (max-width: 1023px) { .l-header.-inner-mqDown-lg .l-header__inner { -webkit-backdrop-filter: var(--overlay-blur2); backdrop-filter: var(--overlay-blur2); background-color: var(--color-bg11); pointer-events: auto; } } .l-header__main { position: fixed; top: 0; left: 0; z-index: var(--z-index-l-header); display: flex; align-items: center; justify-content: center; width: 100%; height: var(--header-height); pointer-events: none; } .l-header__main a, .l-header__main button { pointer-events: auto; } .l-header__inner { height: 6rem ; } @media screen and (min-width: 1024px) { .l-header__inner { width: 95.37037vw; } } @media screen and (max-width: 1023px) { .l-header__inner { width: 94.87179vw; } } /* ------------------------------------------------------------ l-header__logo ------------------------------------------------------------ */ .l-header__logo { position: fixed; z-index: var(--z-index-l-header__logo); width: 13.4rem ; } @media screen and (min-width: 1024px) { .l-header__logo { top: 3.9rem ; left: var(--outside); } } @media screen and (max-width: 1023px) { .l-header__logo { top: 2.9rem ; left: var(--outside); } } .l-header__logo a { display: block; } .l-header__logo.-txt { mix-blend-mode: difference; pointer-events: none; } /* ------------------------------------------------------------ l-header__sub ------------------------------------------------------------ */ .l-header__sub { position: fixed; z-index: var(--z-index-l-header__sub); display: flex; gap: 0.5rem ; } @media screen and (min-width: 1024px) { .l-header__sub { top: 3rem ; right: var(--outside); } } @media screen and (max-width: 1023px) { .l-header__sub { display: none; } } .l-header__sub li { width: 12rem ; height: 4rem ; } .l-header__sub li.-border a { --color-hover-bg: var( --color-accent2 ); color: var(--color-accent2); } @media (hover: hover) { .l-header__sub li.-border a:hover { color: var(--color-txt2); } } .l-header__sub li.-fill a { --color-hover-bg: var( --color-bg ); background-color: var(--color-accent2); color: var(--color-txt2); } @media (hover: hover) { .l-header__sub li.-fill a:hover { color: var(--color-accent2); } } .l-header__sub a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: var(--solid-accent2); font-size: var(--font-size13); padding-bottom: 0.1rem ; transition: var(--transition-hover); transition-property: color; } /* ------------------------------------------------------------ l-header__button ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .l-header__button { display: none; } } @media screen and (max-width: 1023px) { .l-header__button { position: fixed; top: 3.4rem ; right: var(--outside); z-index: var(--z-index-l-header__button); padding: var(--anchor-padding-lg); margin: calc( var( --anchor-padding-lg ) * -1); mix-blend-mode: difference; } } .l-header__button.is-open .l-header__button__icon span:nth-of-type(2) { opacity: 0; } .l-header__button.is-open .l-header__button__icon span:nth-of-type(1) { -webkit-transform: translateY(0.5rem) rotate(135deg); transform: translateY(0.5rem) rotate(135deg); } .l-header__button.is-open .l-header__button__icon span:nth-of-type(3) { -webkit-transform: translateY(-0.5rem) rotate(-135deg); transform: translateY(-0.5rem) rotate(-135deg); } .l-header__button__icon { display: flex; flex-direction: column; justify-content: space-between; width: 4rem ; height: 1.1rem ; } .l-header__button__icon span { display: block; width: 100%; height: 1px; background-color: var(--color-bg); transition: var(--transition-sitemap); transition-property: opacity, -webkit-transform; transition-property: opacity, transform; transition-property: opacity, transform, -webkit-transform; } /** * * loading.scss * */ /* ------------------------------------------------------------ l-loading トップページの１回のみ ------------------------------------------------------------ */ .l-loading { --mask-size: 16rem ; --mask-size-fx: 16rem ; position: fixed; top: 0; left: 0; z-index: var(--z-index-l-loading); width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); } .l-loading.is-none { display: none; } .l-loading__bg { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background-color: var(--color-bg); -webkit-mask-image: linear-gradient(#000 0 0), url("../img/common/layout/loading_mask.svg"); mask-image: linear-gradient(#000 0 0), url("../img/common/layout/loading_mask.svg"); mask-composite: exclude; -webkit-mask-composite: xor; -webkit-mask-repeat: no-repeat, no-repeat; mask-repeat: no-repeat, no-repeat; -webkit-mask-position: 0 0, center; mask-position: 0 0, center; -webkit-mask-size: 100% 100%, var(--mask-size) var(--mask-size); mask-size: 100% 100%, var(--mask-size) var(--mask-size); will-change: mask-size; opacity: 0; transition: -webkit-mask-size var(--transition-loading); transition: mask-size var(--transition-loading); transition: mask-size var(--transition-loading), -webkit-mask-size var(--transition-loading); } /* ---------------------------------------- l-loading__coin ---------------------------------------- */ .l-loading__coin { position: relative; -webkit-perspective: 2000px; perspective: 2000px; min-width: var(--mask-size); width: var(--mask-size); min-height: var(--mask-size); height: var(--mask-size); transition: var(--transition-loading); transition-property: min-width, width, min-height, height; will-change: min-width, width, min-height, height; } .l-loading__card { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background-color var(--transition-loading), -webkit-transform var(--transition-coin); transition: transform var(--transition-coin), background-color var(--transition-loading); transition: transform var(--transition-coin), background-color var(--transition-loading), -webkit-transform var(--transition-coin); -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--color-bg16); } .l-loading__card.-front { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .l-loading__card.-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } /* ---------- l-loading__character ---------- */ .l-loading__character { min-width: var(--mask-size-fx); width: var(--mask-size-fx); min-height: var(--mask-size-fx); height: var(--mask-size-fx); } .l-loading__character__eye { transform-box: fill-box; -webkit-transform-origin: 50% 80%; transform-origin: 50% 80%; -webkit-animation: eye var(--animation-eye); animation: eye var(--animation-eye); transition: opacity var(--transition-eye); } .l-loading__character__wink { opacity: 0; transition: opacity var(--transition-eye); } /* ---------- l-loading__symbol ---------- */ .l-loading__symbol { min-width: var(--mask-size); width: var(--mask-size); min-height: var(--mask-size); height: var(--mask-size); transition: var(--transition-loading); transition-property: min-width, width, min-height, height; will-change: min-width, width, min-height, height; } .l-loading__symbol__oval { transform-box: fill-box; opacity: 1; transition: opacity var(--transition-symbol); } /* ---------------------------------------- animation is-op1 ウインク is-op2 ひっくり返る is-op3 くりぬき is-op4 拡大 is-none 破壊 ---------------------------------------- */ body.is-op1 .l-loading__character__eye { -webkit-animation: none; animation: none; } body.is-op1 .l-loading__character__eye.-right { opacity: 0; } body.is-op1 .l-loading__character__wink { opacity: 1; } body.is-op2 .l-loading__card.-front { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } body.is-op2 .l-loading__card.-back { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } body.is-op3 .l-loading { background: none; } body.is-op3 .l-loading__bg { opacity: 1; } body.is-op3 .l-loading__symbol__oval { opacity: 0; } body.is-op4 .l-loading { --mask-size: max(400vw, 600vh); pointer-events: none; } body.is-op4 .l-loading__card { background-color: var(--pallet-transp); } /* ------------------------------------------------------------ l-loading 派生ページと２回目以降のトップページ ------------------------------------------------------------ */ .l-loading2 { position: fixed; top: 0; left: 0; z-index: var(--z-index-l-loading2); width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg); transition: var(--transition-loading2); transition-property: opacity, visibility; } .l-loading2.is-none { display: none; } .l-loading2.is-hidden { opacity: 0; visibility: hidden; } /** * * sitemap.scss * */ /* ------------------------------------------------------------ l-sitemap ------------------------------------------------------------ */ .l-sitemap { position: fixed; top: 0; right: 0; z-index: var(--z-index-l-sitemap); width: 100%; height: 100%; background-color: var(--color-bg); padding: 14rem 0 12rem ; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-scroll-chaining: none; overscroll-behavior: none; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); transition: var(--transition-sitemap); transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .l-sitemap.is-open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .l-sitemap.is-open .l-sitemap__inner { opacity: 1; transition-delay: 400ms; } @media screen and (min-width: 1024px) { .l-sitemap { display: none; } } .l-sitemap__inner { opacity: 0; transition: var(--transition-sitemap); transition-property: opacity; } /* ---------------------------------------- l-sitemap__nav ---------------------------------------- */ .l-sitemap__nav { border-bottom: var(--solid); } .l-sitemap__nav__cell { border-top: var(--solid); } .l-sitemap__nav__cell2 { border-top: var(--solid); padding-top: 2.3rem ; } .l-sitemap__nav__cell2 + .l-sitemap__nav__cell2 { border-top: none; } .l-sitemap__nav__cell2:last-of-type { padding-bottom: 2rem ; } /* ---------- l-sitemap__nav__parent ---------- */ .l-sitemap__nav__parent { display: flex; justify-content: space-between; /* ---------- 子カテゴリーなし ---------- */ } .l-sitemap__nav__parent > span, .l-sitemap__nav__parent > a { display: flex; align-items: center; justify-content: space-between; flex: 1; padding: 2.2rem 0 ; } .l-sitemap__nav__parent > span span, .l-sitemap__nav__parent > a span { display: block; font-weight: 700; font-size: var(--font-size16); line-height: var(--line-height-noraml); } .l-sitemap__nav__parent.-single a { padding: 0 1.7rem 0 0 ; } .l-sitemap__nav__parent__button { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 1.5rem ; margin-left: 1.5rem ; } .l-sitemap__nav__parent__button::before { content: ''; display: block; width: 0; height: 2.4rem ; border-left: var(--solid); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } /* ---------- l-sitemap__nav__children ---------- */ .l-sitemap__nav__children ul { display: grid; gap: 1.5rem ; padding-bottom: 2rem ; } .l-sitemap__nav__children a { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; color: var(--color-txt3); font-weight: 400; font-size: var(--font-size15); line-height: var(--line-height-noraml); } /* ---------------------------------------- l-sitemap__contact ---------------------------------------- */ .l-sitemap__contact { margin-top: 6rem ; } .l-sitemap__contact__button { display: flex; gap: 1rem ; margin-top: 3rem ; } @media screen and (max-width: 560px) { .l-sitemap__contact__button { flex-wrap: wrap; } } .l-sitemap__contact__button li { height: 6rem ; } @media screen and (max-width: 1023px) and (min-width: 561px) { .l-sitemap__contact__button li { flex-basis: 100%; } } @media screen and (max-width: 560px) { .l-sitemap__contact__button li { width: 100%; } } .l-sitemap__contact__button a { --color-hover-bg: var( --color-txt ); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: var(--solid3); font-size: var(--font-size16); letter-spacing: var(--letter-spacing-_rg); transition: color var(--transition-hover); } @media (hover: hover) { .l-sitemap__contact__button a:hover { color: var(--color-txt2); } } /* ---------------------------------------- l-sitemap__pv ---------------------------------------- */ .l-sitemap__pv { margin-top: 6rem ; } /* ---------------------------------------- l-sitemap__looptxt ---------------------------------------- */ .l-sitemap__looptxt { position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: var(--ww); --slide-width: 153.7rem ; margin-top: 4rem ; } /** * * special.scss * */ /* ------------------------------------------------------------ l-special ------------------------------------------------------------ */ @media screen and (min-width: 1024px) { .l-special { margin-top: 20rem ; } } @media screen and (max-width: 1023px) { .l-special { margin-top: 12rem ; } } /* ---------------------------------------------------------------------------------------------------- Page ---------------------------------------------------------------------------------------------------- */ /* ---------------------------------------------------------------------------------------------------- Object - utility ---------------------------------------------------------------------------------------------------- */ /** * * bg.scss * */ /* ------------------------------------------------------------ background-color ------------------------------------------------------------ */ /** * * display.sc2xs * */ /* ------------------------------------------------------------ display ------------------------------------------------------------ */ .u-ib { display: inline-block !important; } .u-inline { display: inline !important; } .u-block { display: block !important; } .u-n { display: none !important; } @media screen and (min-width: 1281px) { .u-n-mqUp-xl { display: none !important; } } @media screen and (min-width: 1024px) { .u-n-mqUp-lg { display: none !important; } } @media screen and (min-width: 768px) { .u-n-mqUp-md { display: none !important; } } @media screen and (min-width: 561px) { .u-n-mqUp-sm { display: none !important; } } @media screen and (min-width: 431px) { .u-n-mqUp-xs { display: none !important; } } @media screen and (min-width: 391px) { .u-n-mqUp-2xs { display: none !important; } } @media screen and (max-width: 1280px) { .u-n-mqDown-xl { display: none !important; } } @media screen and (max-width: 1023px) { .u-n-mqDown-lg { display: none !important; } } @media screen and (max-width: 767px) { .u-n-mqDown-md { display: none !important; } } @media screen and (max-width: 560px) { .u-n-mqDown-sm { display: none !important; } } @media screen and (max-width: 430px) { .u-n-mqDown-xs { display: none !important; } } @media screen and (max-width: 390px) { .u-n-mqDown-2xs { display: none !important; } } /** * * font.scss * */ /* ------------------------------------------------------------ font ------------------------------------------------------------ */ /* ------------------------------------------------------------ // font-color ------------------------------------------------------------ */ .u-font-main { color: var(--color-main); } .u-font-main2 { color: var(--color-main2); } .u-font-main3 { color: var(--color-main3); } .u-font-main4 { color: var(--color-main4); } .u-font-accent { color: var(--color-accent); } .u-font-accent2 { color: var(--color-accent2); } .u-font-accent3 { color: var(--color-accent3); } .u-font-accent4 { color: var(--color-accent4); } .u-font-accent5 { color: var(--color-accent5); } /* ------------------------------------------------------------ // font weight ------------------------------------------------------------ */ /* ------------------------------------------------------------ // font style ------------------------------------------------------------ */ .u-uppercase { text-transform: uppercase; } /* ------------------------------------------------------------ // fontsize ------------------------------------------------------------ */ /** * * full.scss * */ /* ------------------------------------------------------------ full ------------------------------------------------------------ */ /** * * letter-spacing.scss * */ /* ------------------------------------------------------------ letter-spacing ------------------------------------------------------------ */ /** * * pointerevent.scss * */ /* ------------------------------------------------------------ pointerevent ------------------------------------------------------------ */ .u-pointerevent-none { pointer-events: none; } /** * * position.scss * */ /* ------------------------------------------------------------ position ------------------------------------------------------------ */ /** * * radius.scss * */ /* ------------------------------------------------------------ radius ------------------------------------------------------------ */ /** * * reverse.scss * */ /* ------------------------------------------------------------ reverse ------------------------------------------------------------ */ .u-reverse { -webkit-transform: scale(-1, 1); transform: scale(-1, 1); } /** * * spcae.scss * */ /* ------------------------------------------------------------ fixed ------------------------------------------------------------ */ /* --------- margin ---------- */ /* --------- padding ---------- */ /* ------------------------------------------------------------ variable 基本的に余白は下から上に付けるので、top系しか設定しない ------------------------------------------------------------ */ /** * * text.scss * */ /* ------------------------------------------------------------ text ------------------------------------------------------------ */ .u-t-center { text-align: center; } /*# sourceMappingURL=sourcemaps/common.css.map */