html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset;}@media only screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body { margin: 0;} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary { display: block;} audio,canvas,progress,video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0;} [hidden],template { display: none;} a { background-color: transparent;} a:active,a:hover,input[type="text"], input[type="password"], textarea, select,button { outline: 0;} abbr[title] { border-bottom: 1px dotted;} b,strong { font-weight: bold;} dfn { font-style: italic;} h1 { font-size: 2em; margin: 0.67em 0;} mark { background: #ff0; color: #000;} small { font-size: 80%;} sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup { top: -0.5em;} sub { bottom: -0.25em;} img { border: 0;} svg:not(:root) { overflow: hidden;} figure { margin: 1em 40px;} hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre { overflow: auto; -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; }} code,kbd,pre,samp { font-family: monospace, monospace; font-size: 1em;} button,input,optgroup,select,textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; background: none;} button,select { text-transform: none;} button,html input[type="button"], input[type="reset"],input[type="submit"] { appearance: button; -webkit-appearance: button; cursor: pointer; } button[disabled],html input[disabled] { cursor: default;} button::-moz-focus-inner,input::-moz-focus-inner { border: 0; padding: 0;} input { line-height: normal;} input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { height: auto;} input[type="search"] { appearance: textfield; -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;} fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend { border: 0; padding: 0; } textarea { overflow: auto; -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; }} optgroup { font-weight: bold;} table { border-collapse: collapse; border-spacing: 0;} td,th { padding: 0;} :root { --c-white: #FFFFFF; --c-white-rgb: 255, 255, 255; --c-black: #0D253F; --c-black-rgb: 13, 37, 63; --c-black-900: #16304D; --c-blue: #0B3461; --c-blue-rgb: 11, 52, 97; --c-blue-900: #234C71; --c-blue-800: #3D6181; --c-blue-700: #577692; --c-blue-600: #718BA2; --c-blue-500: #8BA0B3; --c-blue-400: #A5B5C4; --c-blue-300: #BFCAD4; --c-blue-200: #D9E0E5; --c-blue-100: #F3F5F6; --c-blue-100-rgb: 243, 245, 246; --c-accent: #D50E50; --c-accent-900: #E52761; --c-accent-100: #FFF0F5; --c-gold: #B6921E; --c-gold-lighten: #CBAD49; --c-link: #2DA5EE; --c-danger: #DF171A; --fs-4xl: 6.4rem; --fs-3xl: 4.8rem; --fs-2xl: 3.6rem; --fs-xl: 2.8rem; --fs-lg: 2.4rem; --fs-md: 2rem; --fs-sm: 1.6rem; --fs-xs: 1.4rem; --fs-2xs: 1.2rem; --fs-3xs: 1.1rem; --fs-4xs: 1rem; --fs-4xl-sp: 4rem; --fs-3xl-sp: 2.8rem; --fs-2xl-sp: 2.4rem; --fs-xl-sp: 2rem; --fs-lg-sp: 1.6rem; --fs-md-sp: 1.4rem; --fs-sm-sp: 1.3rem; --fs-xs-sp: 1.2rem; --fs-2xs-sp: 1.1rem; --fs-3xs-sp: 1rem; --fs-4xs-sp: 1rem; --fw-default: 400; --fw-sans-serif-bold: 700; --fw-serif-bold: 500; --fw-en: 500; --ff-serif: YakuHanJPs, "Shippori Mincho", "游明朝", "Yu Mincho", "游明朝体", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "MS PMincho", "MS Mincho", serif; --ff-sans-serif: YakuHanJPs, "Roboto", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro W6", "MS PGothic", sans-serif; --ff-en: YakuHanJPs,"Lexend", sans-serif; --line-height: 1.4em; --p-line-height: 2em; --spc: .4rem; --spc-1: calc(var(--spc) * 1); --spc-2: calc(var(--spc) * 2); --spc-3: calc(var(--spc) * 3); --spc-4: calc(var(--spc) * 4); --spc-5: calc(var(--spc) * 5); --spc-6: calc(var(--spc) * 6); --spc-7: calc(var(--spc) * 7); --spc-8: calc(var(--spc) * 8); --spc-9: calc(var(--spc) * 9); --spc-10: calc(var(--spc) * 10); --spc-11: calc(var(--spc) * 11); --spc-12: calc(var(--spc) * 12); --spc-14: calc(var(--spc) * 14); --spc-16: calc(var(--spc) * 16); --spc-20: calc(var(--spc) * 20); --spc-24: calc(var(--spc) * 24); --spc-28: calc(var(--spc) * 28); --spc-32: calc(var(--spc) * 32); --spc-36: calc(var(--spc) * 36); --spc-40: calc(var(--spc) * 40); --spc-44: calc(var(--spc) * 44); --spc-48: calc(var(--spc) * 48); --spc-52: calc(var(--spc) * 52); --spc-56: calc(var(--spc) * 56); --spc-60: calc(var(--spc) * 60); --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --container-max-width: 128rem; --container-padding: var(--spc-20); --container-padding-lg: var(--spc-16); --container-padding-md: var(--spc-6); --contents-max-width: 72rem;} * { box-sizing: border-box; word-wrap: break-word; line-height: var(--line-height); transition: .2s ease; &:before, &:after { transition: .2s ease; }} body.is-noscroll { overflow: hidden;} html { background-color: var(--c-white); font-size: 62.5%; font-family: var(--ff-serif); color: var(--c-blue); -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: unset; scroll-behavior: smooth;}@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }} body,h1,h2,h3,h4,h5,h6,ul,li,a,p,blockquote { margin: 0;} body { display: flex; flex-direction: column; position: relative; min-height: 100vh;} img,svg { display: block; width: 100%; height: auto;} input,label,select,button,textarea { padding: 0; border:0;} h1,h2,h3,h4,h5,h6,p,li,th,td { a { color: var(--c-link); }} h1,h2,h3,h4,h5,h6 { font-weight: var(--fw-serif-bold);} h1 { font-size: var(--fs-3xl); @media (max-width: 768px) { font-size: var(--fs-3xl-sp); }} h2 { font-size: var(--fs-2xl); @media (max-width: 768px) { font-size: var(--fs-2xl-sp); }} h3 { font-size: var(--fs-xl); @media (max-width: 768px) { font-size: var(--fs-xl-sp); }} h4 { font-size: var(--fs-lg); @media (max-width: 768px) { font-size: var(--fs-lg-sp); }} h5 { font-size: var(--fs-md); @media (max-width: 768px) { font-size: var(--fs-md-sp); }} h6 { font-size: var(--fs-sm); @media (max-width: 768px) { font-size: var(--fs-sm-sp); }} ul { padding: 0; list-style: none;} p,li { font-size: var(--fs-sm); @media (max-width: 768px) { font-size: var(--fs-sm-sp); }} p { line-height: var(--p-line-height);} a { color: var(--c-link); text-decoration: none; &:hover { text-decoration: none; cursor: pointer; opacity: .8; }} button,textarea,select { display: block; appearance: none; -webkit-appearance: none; -moz-appearance: none;} textarea { resize: none;} figure { margin: 0;} html,body { -ms-overflow-style: none; scrollbar-width: none; } html::-webkit-scrollbar,body::-webkit-scrollbar { display: none; } * { -ms-overflow-style: none; scrollbar-width: none; } *::-webkit-scrollbar { display: none; } .grecaptcha-badge { visibility: hidden; }
 ::view-transition-old(root),::view-transition-new(root) { animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);} ::view-transition-old(root) { animation-name: page-out;} ::view-transition-new(root) { animation-name: page-in;} @keyframes page-out { from { opacity: 1; transform: scale(1) translateY(0); } to { opacity: 0; transform: scale(0.95) translateY(-20px); }} @keyframes page-in { from { opacity: 0; transform: scale(1.05) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); }}
.l-aside { padding-block: var(--spc-24); background-color: var(--c-blue-900); @media (max-width: 768px) { padding-block: var(--spc-12); }} .l-aside-inner { display: grid; grid-template-columns: auto 1fr; gap: var(--spc-16); @media (max-width: 1024px) { gap: var(--spc-10); } @media (max-width: 768px) { grid-template-columns: 1fr; gap: var(--spc-8); } & > .g-actions { grid-column: 2 / 3; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 1 / 2; } & > *:first-of-type + * { margin-top: var(--spc-6); padding-top: var(--spc-6); border-top: solid .1rem var(--c-blue-800); } } & > .g-contacts { display: flex; flex-direction: column; gap: var(--spc-6); justify-content: space-between; grid-column: 1 / 2; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 2 / 3; } }}
.l-bottomNav { background-color: var(--c-blue-100);} .l-bottomNav-inner { display: grid; grid-template-columns: auto 1fr; @media (max-width: 768px) { grid-template-columns: 1fr; }} .l-bottomNav-head { display: flex; flex-direction: column; justify-content: center; @media (max-width: 768px) { grid-row: 2 / 3; } & > a { display: block; padding: var(--spc-12) var(--spc-12) var(--spc-12) 0; @media (max-width: 768px) { display: grid; grid-template-columns: auto 1fr; gap: var(--spc-4); padding: var(--spc-6) 0; & > .g-head { grid-column: 2 / 3; grid-row: 1 / 2; } & > .g-icon { grid-column: 1 / 2; grid-row: 1 / 2; align-self: center; } } &:hover { opacity: 1; * { color: var(--c-blue-600); } svg { fill: var(--c-blue-600); transform: translateX(calc(var(--spc-2) * -1)); } } } * { color: var(--c-blue-400); & + svg { margin-top: var(--spc-2); } } svg { width: 3.2rem; height: 3.2rem; fill: var(--c-blue-400); @media (max-width: 768px) { width: 1.6rem; height: 1.6rem; } } & + .l-bottomNav-content { border-left: solid .1rem var(--c-blue-200); @media (max-width: 768px) { border-left: none; border-bottom: solid .1rem var(--c-blue-200); } }} .l-bottomNav-content { display: flex; flex-direction: column; justify-content: center; padding: var(--spc-12) 0 var(--spc-12) var(--spc-16); gap: var(--spc-4); @media (max-width: 768px) { grid-row: 1 / 2; gap: var(--spc-2); padding: var(--spc-8) 0; } & > * { color: var(--c-blue-400); }} .l-bottomNav__titleEn { line-height: 1em;} 
.l-container { max-width: var(--container-max-width); margin-inline: auto; padding-inline: var(--container-padding); @media (max-width: 768px) { padding-inline: var(--container-padding-lg); } @media (max-width: 600px) { padding-inline: var(--container-padding-md); }}
.l-contents { position: relative; &.--secondary { background-color: var(--c-blue-100); & + .l-bottomNav { border-top: solid .1rem var(--c-blue-200); } } &.--reverse { background-color: var(--c-blue-900); } &.--transparent { border-top: solid .1rem var(--c-blue-100); padding-top: var(--spc-16); background-color: var(--c-white); }} .l-contents-head { padding-block: var(--spc-6);} .l-contents-mw { max-width: var(--contents-max-width);}
.l-footer { --footer-content-width: 26rem; --footer-content-max-width: 64rem; position: relative; width: 100%; background-color: var(--c-black);} .l-footer-content { padding-block: var(--spc-16); @media (max-width: 768px) { padding-block: var(--spc-12); }} .l-footer-content-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spc-6); @media (max-width: 1024px) { flex-direction: column; justify-content: flex-start; gap: var(--spc-12); } @media (max-width: 768px) { gap: var(--spc-8); }} .l-footer-content-head { width: var(--footer-content-width);} .l-footer-content-content { flex: 1; max-width: var(--footer-content-max-width);} .l-footer-bottom { padding-block: var(--spc-12); border-top: solid .1rem var(--c-blue-900); @media (max-width: 768px) { padding-block: var(--spc-8); }} .l-footer-bottom-inner { display: grid; grid-template-columns: var(--footer-content-width) 1fr; gap: var(--spc-12); @media (max-width: 1024px) { grid-template-columns: 1fr; } @media (max-width: 768px) { gap: var(--spc-8); } & > .g-head { display: flex; flex-direction: column; gap: var(--spc-8); grid-column: 2 / 3; grid-row: 1 / 2; width: 100%; max-width: var(--footer-content-max-width); justify-self: end; @media (max-width: 1024px) { grid-column: 1 / 2; grid-row: 1 / 2; justify-self: flex-start; } } & > .g-content { grid-column: 1 / 2; grid-row: 1 / 2; @media (max-width: 1024px) { grid-column: 1 / 2; grid-row: 2 / 3; } } & > .g-bottom { grid-column: 1 / 3; grid-row: 2 / 3; @media (max-width: 1024px) { grid-column: 1 / 2; grid-row: 3 / 4; } }} .l-footer__logo { display: block; width: 20rem; @media (max-width: 768px) { width: 12rem; }}.l-footer__links { display: flex; flex-wrap: wrap; gap: var(--spc-12); @media (max-width: 768px) { gap: var(--spc-6); } & > li > a { display: flex; align-items: center; gap: var(--spc-5); &:hover { opacity: 1; & > svg { transform: translateX(var(--spc-2)); } } & > svg { width: 1.6rem; height: 1.6rem; fill: var(--c-blue-800); & + * { flex: 1; color: var(--c-blue-800); & > span { display: block; color: var(--c-blue-900); } } } }} .l-footer__guides { display: flex; flex-wrap: wrap; gap: var(--spc-6); & > li > a { color: var(--c-blue-800); }} .l-footer__copyright { text-align: right; color: var(--c-blue-800);}
.l-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-40);}
.l-hero.--show { .l-hero-content { color: var(--c-blue-400); } .l-hero-bottom { padding-bottom: var(--spc-12); } .l-hero__title { max-width: 60rem; & + .l-hero__release { margin-top: var(--spc-5); } }} .l-hero-inner { position: relative;} .l-hero__figure { display: flex; align-items: center; position: absolute; inset: var(--spc-4) 0 var(--spc-4) auto; width: 40%; @media (max-width: 1024px) { align-items: flex-start; inset: var(--spc-20) 0 var(--spc-4) auto; width: 30%; } @media (max-width: 768px) { inset: var(--spc-16) 0 var(--spc-4) auto; } & > * { width: 100%; }} .l-hero-content,.l-hero-bottom { position: relative; z-index: 1;} .l-hero-content { width: calc(60% - var(--spc-8)); padding-block: var(--spc-48) var(--spc-12); @media (max-width: 1024px) { width: 100%; } @media (max-width: 768px) { padding-block: var(--spc-32) var(--spc-8); }} .l-hero__release { color: var(--c-blue-400); & + .l-hero__tags { margin-top: var(--spc-2); }} .l-hero__tags { display: flex; gap: var(--spc-2); & > li > a { display: block; color: var(--c-blue); }}
.l-investors { padding-block: var(--spc-4);} .l-investors-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spc-12); @media (max-width: 768px) { gap: var(--spc-2); }} .l-investors-head { color: var(--c-blue-600);} .l-investors-content { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spc-2); @media (max-width: 768px) { gap: var(--spc-1); } li { width: 12rem; @media (max-width: 768px) { width: calc((100% - var(--spc-3)) / 4); } & > a { display: block; } }}
.l-logo { position: absolute; top: var(--spc-10); left: var(--spc-10); width: 18rem; z-index: var(--z-30); @media (max-width: 768px) { width: 12rem; top: var(--spc-6); left: var(--spc-6); }}
.l-main { flex: 1; position: relative; width: 100%; overflow: hidden;}
.l-menu { position: fixed; inset: 0; background-color: rgba(var(--c-black-rgb), 0.95); backdrop-filter: blur(var(--spc-4)); z-index: var(--z-50); display: none; opacity: 0; transition: opacity 0.4s ease; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; } &.is-opened { opacity: 1; }} .l-menu-inner { display: flex; flex-direction: column; gap: var(--spc-16); position: relative; width: 100%; height: 100%; @media (max-width: 768px) { gap: var(--spc-8); }} .l-menu-head,.l-menu-content,.l-menu-bottom { padding-inline: var(--spc-12); @media (max-width: 768px) { padding-inline: var(--spc-8); }} .l-menu-head { display: flex; justify-content: space-between; align-items: center; padding-top: var(--spc-12); @media (max-width: 768px) { padding-top: var(--spc-8); }} .l-menu-content { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--spc-8); max-width: 80rem; @media (max-width: 768px) { & > * { align-self: center; } }} .l-menu-bottom { display: grid; grid-template-columns: auto 1fr auto; padding-bottom: var(--spc-12); gap: var(--spc-16); @media (max-width: 1280px) { grid-template-columns: auto 1fr; } @media (max-width: 768px) { grid-template-columns: 1fr; gap: var(--spc-8); padding-bottom: var(--spc-8); } & > .g-actions { grid-column: 2 / 3; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 1 / 2; } & > *:first-of-type + * { margin-top: var(--spc-6); padding-top: var(--spc-6); border-top: solid .1rem var(--c-blue-800); } } & > .g-contacts { display: flex; flex-direction: column; gap: var(--spc-6); justify-content: space-between; grid-column: 1 / 2; grid-row: 1 / 2; @media (max-width: 768px) { grid-column: 1 / 2; grid-row: 2 / 3; } } & > .g-maaa { display: grid; max-width: 26rem; grid-column: 3 / 4; grid-row: 1 / 2; @media (max-width: 1280px) { display: none; } & > img { align-self: flex-end; } }} .l-menu__logo { width: 18rem; @media (max-width: 768px) { width: 12rem; } & > a { display: block; }} .l-menu__close { display: flex; align-items: center; gap: var(--spc-2); &:hover { .l-menu__close-content { transform: rotate(90deg); } }} .l-menu__close-head { color: var(--c-blue-100);} .l-menu__close-content { position: relative; width: 1.6rem; height: 1.6rem; @media (max-width: 768px) { width: 1.2rem; height: 1.2rem; } &::before, &::after { content: ""; position: absolute; inset: 0; margin: auto; background-color: var(--c-blue-100); transform: rotate(45deg); } &::before { width: 100%; height: .2rem; } &::after { width: .2rem; height: 100%; }}
.l-nextContents { padding-block: var(--spc-8); background-color: var(--c-blue-900); @media (max-width: 768px) { padding-block: var(--spc-6); }}
.l-related { padding-block: var(--spc-12); background-color: var(--c-blue-900); @media (max-width: 768px) { padding-block: var(--spc-8); }}
.l-rows { display: flex; flex-direction: column; position: relative; &.--spc0 { gap: 0; } &.--spc1 { gap: var(--spc-1); } &.--spc2 { gap: var(--spc-2); } &.--spc3 { gap: var(--spc-3); } &.--spc4 { gap: var(--spc-4); } &.--spc5 { gap: var(--spc-5); } &.--spc6 { gap: var(--spc-6); } &.--spc7 { gap: var(--spc-7); } &.--spc8 { gap: var(--spc-8); } &.--spc9 { gap: var(--spc-9); } &.--spc10 { gap: var(--spc-10); } &.--spc11 { gap: var(--spc-11); } &.--spc12 { gap: var(--spc-12); } &.--spc14 { gap: var(--spc-14); } &.--spc16 { gap: var(--spc-16); } &.--spc20 { gap: var(--spc-20); } &.--spc24 { gap: var(--spc-24); } &.--spc28 { gap: var(--spc-28); } &.--spc32 { gap: var(--spc-32); } &.--spc36 { gap: var(--spc-36); } &.--spc40 { gap: var(--spc-40); } &.--spc44 { gap: var(--spc-44); } &.--spc48 { gap: var(--spc-48); } &.--spc52 { gap: var(--spc-52); } &.--spc56 { gap: var(--spc-56); } &.--spc60 { gap: var(--spc-60); } @media (max-width: 768px) { &.--spc0-lg { gap: var(--spc-0); } &.--spc1-lg { gap: var(--spc-1); } &.--spc2-lg { gap: var(--spc-2); } &.--spc3-lg { gap: var(--spc-3); } &.--spc4-lg { gap: var(--spc-4); } &.--spc5-lg { gap: var(--spc-5); } &.--spc6-lg { gap: var(--spc-6); } &.--spc7-lg { gap: var(--spc-7); } &.--spc8-lg { gap: var(--spc-8); } &.--spc9-lg { gap: var(--spc-9); } &.--spc10-lg { gap: var(--spc-10); } &.--spc11-lg { gap: var(--spc-11); } &.--spc12-lg { gap: var(--spc-12); } &.--spc14-lg { gap: var(--spc-14); } &.--spc16-lg { gap: var(--spc-16); } &.--spc20-lg { gap: var(--spc-20); } &.--spc24-lg { gap: var(--spc-24); } &.--spc28-lg { gap: var(--spc-28); } &.--spc32-lg { gap: var(--spc-32); } &.--spc36-lg { gap: var(--spc-36); } &.--spc40-lg { gap: var(--spc-40); } &.--spc44-lg { gap: var(--spc-44); } &.--spc48-lg { gap: var(--spc-48); } &.--spc52-lg { gap: var(--spc-52); } &.--spc56-lg { gap: var(--spc-56); } &.--spc60-lg { gap: var(--spc-60); } }}
.l-scrollNav { display: none; position: fixed; inset: 0 0 auto 0; padding: var(--spc-3) var(--spc-3) 0 var(--spc-3); z-index: var(--z-40); transform: translateY(-100%); &.is-scroll { transform: translateY(0); } @media (max-width: 1024px) { display: block; } @media (max-width: 768px) { padding: var(--spc-2) var(--spc-2) 0 var(--spc-2); }} .l-scrollNav-inner { display: flex; align-items: center; justify-content: space-between; padding: var(--spc-7); border-radius: var(--spc-2); background-color: rgba(var(--c-white-rgb), .95); backdrop-filter: blur(var(--spc-2)); box-shadow: 0 0 var(--spc-3) rgba(var(--c-black-rgb), .1); @media (max-width: 768px) { padding: var(--spc-4); }} .l-scrollNav__logo { display: block; width: 18rem; @media (max-width: 768px) { width: 12rem; }}
.l-section-head { padding-block: var(--spc-8); border-top: solid .1rem var(--c-blue-200);} .l-section-content { padding-bottom: var(--spc-28); @media (max-width: 768px) { padding-bottom: var(--spc-16); } &.--top { padding-top: var(--spc-12); @media (max-width: 768px) { padding-top: var(--spc-8); } }} .l-section-content-inner { padding-top: var(--spc-16);}
.l-sideNav-wrap { position: fixed; top: 0; right: 0; max-height: 100svh; overflow-y: scroll; z-index: var(--z-40); -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; } @media (max-width: 1024px) { display: none; }} .l-sideNav { margin: var(--spc-5) var(--spc-5) var(--spc-5) var(--spc-3); border-radius: var(--spc-4); background-color: rgba(var(--c-white-rgb), .8); backdrop-filter: blur(var(--spc-2)); box-shadow: 0 0 var(--spc-3) rgba(var(--c-black-rgb), .1); &.is-scroll { .l-sideNav__logo > a { transform: translateY(0); } } .js-side-nav-shrink { overflow: hidden; transition: height 0.3s ease; }} .l-sideNav-head { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--spc-8) var(--spc-8) var(--spc-6) var(--spc-8);} .l-sideNav-content { display: flex; flex-direction: column; gap: var(--spc-1);} .l-sideNav-bottom { display: flex; flex-direction: column; gap: var(--spc-4); padding: 0 var(--spc-8) var(--spc-8);} .l-sideNav__logo { width: 14rem; overflow: hidden; & > a { display: block; width: fit-content; transform: translateY(100%); }} .l-sideNav__category { margin-inline: var(--spc-4); border-radius: var(--spc-2); &:hover { background-color: rgba(var(--c-white-rgb), .6); } &.is-open { background-color: rgba(var(--c-white-rgb), .6); .l-sideNav__category-head:hover > span { transform: rotate(180deg); } .l-sideNav__category-head > span::after { transform: rotate(90deg); } }} .l-sideNav__category-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; position: relative; padding: var(--spc-4); color: var(--c-blue-800); &:hover { color: var(--c-blue-900); & > span { background-color: var(--c-blue-900); transform: rotate(90deg); &::after { background-color: var(--c-blue-900); } } } & > span { display: block; position: relative; width: .8rem; height: .1rem; background-color: var(--c-blue-800); &::after { content: ''; position: absolute; inset: 0; margin: auto; width: .1rem; height: .8rem; background-color: var(--c-blue-800); } }} .l-sideNav__category-content { height: 0; overflow: hidden; transition: height 0.3s ease; } .l-sideNav__category-content-inner { padding: var(--spc-4); border-top: .1rem solid var(--c-blue-200);} .l-sideNav__others { margin-top: var(--spc-3); padding: var(--spc-6) var(--spc-8); border-top: .1rem solid var(--c-blue-300);} .l-sideNav__links { display: flex; flex-direction: column; gap: var(--spc-3); &.--divided { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--spc-6); row-gap: var(--spc-4); } & > li > a { display: flex; align-items: center; justify-content: space-between; color: var(--c-blue-600); &:hover { color: var(--c-blue-800); opacity: 1; & > span, & > span::after { background-color: var(--c-blue-800); } & > span { transform: translateX(var(--spc-1)); } } & > span, & > span::after { height: .1rem; background-color: var(--c-blue-400); } & > span { display: block; position: relative; width: .8rem; &::after { content: ''; position: absolute; top: 0; right: 0; width: .4rem; transform: rotate(30deg); transform-origin: bottom right; } } }} .l-sideNav__btns > li:not(:first-of-type) > a { margin-top: var(--spc-2);}
.l-spNav { display: none; position: absolute; inset: var(--spc-10) var(--spc-10) auto auto; z-index: var(--z-40); @media (max-width: 1024px) { display: block; } @media (max-width: 768px) { inset: var(--spc-6) var(--spc-6) auto auto; }}
.l-tabs { --bg-color-current: var(--c-blue); --text-color: var(--c-blue-600); --text-color-hover: var(--c-blue-100); --bg-color-current-reverse: var(--c-blue-200); --text-color-reverse: var(--c-blue-200); --text-color-hover-reverse: var(--c-blue-900); --border-radius: var(--spc-2); --border-radius-lg: var(--spc-1); position: relative; width: fit-content; background-color: var(--c-white); border-radius: var(--border-radius); overflow: hidden; @media (max-width: 768px) { --border-radius: var(--border-radius-lg); } &:hover .l-tabs__item.is-current:not(:hover)::before { opacity: 0; transform: scaleX(0); } &:hover .l-tabs__item.is-current:not(:hover) a { color: var(--text-color) !important; } &.--reverse { background-color: var(--c-blue-900); &:hover .l-tabs__item.is-current:not(:hover) a { color: var(--text-color-reverse) !important; } .l-tabs__item { color: var(--text-color-reverse); &::before { background-color: var(--bg-color-current-reverse); } &:hover a { color: var(--text-color-hover-reverse) !important; } &.is-current a { color: var(--text-color-hover-reverse); } &.is-current::before { background: var(--bg-color-current-reverse); } & > a { color: var(--text-color-reverse); } } .l-tabs__indicator { background-color: var(--bg-color-current-reverse); } }} .l-tabs-inner { position: relative; display: flex;} .l-tabs__item { position: relative; background-color: transparent; border: none; color: var(--text-color); white-space: nowrap; cursor: pointer; &::before { content: ''; position: absolute; inset: 0; background-color: var(--bg-color-current); border-radius: var(--border-radius); opacity: 0; transform: scaleX(0); transform-origin: left; @media (max-width: 768px) { border-radius: var(--border-radius-lg); } } &:hover::before { opacity: 1; transform: scaleX(1); } &:hover a { color: var(--text-color-hover) !important; } &.is-current a { color: var(--text-color-hover); } &.is-current::before { opacity: 1; transform: scaleX(1); background: var(--bg-color-current); } & > a { display: block; position: relative; padding: .75em 1.5em; color: var(--text-color); z-index: 1; @media (max-width: 768px) { padding: .5em 1em; } &:hover { opacity: 1; } }} .l-tabs__indicator { position: absolute; inset: 0 auto 0 0; background-color: var(--bg-color-current); border-radius: var(--border-radius); pointer-events: none; opacity: 0; visibility: hidden; @media (max-width: 768px) { border-radius: var(--border-radius-lg); }}
.action { &.--reverse > a .action-content > span { color: var(--c-blue-400); & + * { color: var(--c-blue-100); } } & > a { display: flex; align-items: center; gap: var(--spc-6); padding-right: var(--spc-6); @media (max-width: 768px) { gap: var(--spc-4); } &:hover { opacity: 1; .action-head > svg { transform: translateX(var(--spc-2)); fill: var(--c-blue); } .action-head::before { width: 100%; } .action-bottom { transform: translateX(var(--spc-2)); } } }} .action-head { display: grid; position: relative; width: 6.4rem; height: 6.4rem; border: solid .1rem var(--c-blue-400); @media (max-width: 768px) { width: 3.6rem; height: 3.6rem; } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background-color: var(--c-blue-400); } & > svg { position: relative; align-self: center; justify-self: center; width: 1.6rem; height: 1.6rem; fill: var(--c-blue-400); @media (max-width: 768px) { width: .8rem; height: .8rem; } }} .action-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-2); & > * { line-height: 1em; } & > span { color: var(--c-blue-600); & + * { color: var(--c-blue-400); } }} .action-bottom,.action-bottom::after { height: .1rem; background-color: var(--c-blue-400);} .action-bottom { display: block; position: relative; width: 1.2rem; &::after { content: ''; position: absolute; top: 0; right: 0; width: .6rem; transform: rotate(30deg); transform-origin: bottom right; }}
.advisor { display: grid; grid-template-columns: 22rem 1fr; column-gap: var(--spc-8); row-gap: var(--spc-3); & > .g-heading { grid-column: 1 / 3; } & > .g-thumb { grid-column: 1 / 2; grid-row: 2 / 3; min-height: 14.8rem; } & > .g-content { grid-column: 2 / 3; grid-row: 2 / 3; display: flex; flex-direction: column; justify-content: center; gap: var(--spc-2); @media (max-width: 1024px) { grid-column: 1 / 3; grid-row: 3 / 4; } }} .advisor__thumb { height: 100%; border-radius: var(--spc-2); background-size: cover; background-position: center; background-repeat: no-repeat;} .advisor__name { display: flex; align-items: center; gap: 1em; color: var(--c-blue-700); & > span { color: var(--c-blue-300); }} 
.btn { --height: 4.25em; display: flex; align-items: center; justify-content: center; position: relative; width: fit-content; height: var(--height); appearance: none; cursor: pointer; &::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--height); } &:hover { opacity: 1; &::after { width: 100%; } .btn-head svg { transform: translateX(.6em); } } & > * { position: relative; z-index: 1; } &.--block { width: 100%; } &.--primary { background-color: var(--c-blue-900); &::after { background-color: var(--c-blue); } &:hover { .btn-head svg { fill: var(--c-blue-200); } .btn-content { color: var(--c-blue-100); } } .btn-head svg { fill: var(--c-blue-400); } .btn-content { color: var(--c-blue-100); } } &.--secondary { background-color: var(--c-blue-700); &::after { background-color: var(--c-blue-800); } &:hover { .btn-head svg { fill: var(--c-blue-100); } .btn-content { color: var(--c-blue-100); } } .btn-head svg { fill: var(--c-blue-500); } .btn-content { color: var(--c-blue-200); } } &.--tertiary { background-color: var(--c-blue-600); &::after { background-color: var(--c-blue-700); } &:hover { .btn-head svg { fill: var(--c-blue-100); } .btn-content { color: var(--c-blue-100); } } .btn-head svg { fill: var(--c-blue-400); } .btn-content { color: var(--c-blue-100); } } &.--submit { background-color: var(--c-accent-900); &::after { background-color: var(--c-accent); } &:hover { .btn-head svg { fill: var(--c-white); } .btn-content { color: var(--c-white); } } .btn-head svg { fill: var(--c-accent-100); } .btn-content { color: var(--c-accent-100); } & > input { position: absolute; inset: 0; opacity: 0; } & > span { display: none; } } &.--outline { border: .1rem solid var(--c-blue); &::after { border-right: solid .1rem var(--c-blue); } &:hover::after { opacity: 0; } .btn-head svg { fill: var(--c-blue); } .btn-content { color: var(--c-blue); } } &.is-loading { pointer-events: none; opacity: .8; cursor: not-allowed; &:hover { opacity: .8; .btn-head svg { transform: none; } } }} .btn-head { width: var(--height); svg { width: 1em; height: 1em; margin-inline: auto; }} .btn-content { flex: 1; padding-inline: calc(var(--height) * .4); text-align: center;}
.checkbox { &:hover { & > span label span { color: var(--c-blue); } } & > span { margin: 0; label { display: flex; align-items: center; gap: var(--spc-2); width: fit-content; cursor: pointer; input { display: block; position: relative; width: 2rem; height: 2rem; padding: 0; appearance: none; background: var(--c-white); border: solid .2rem var(--c-blue-300); box-shadow: 0 0 0 0 transparent; &::before { content: ''; display: block; position: absolute; inset: 0; width: .8rem; height: .4rem; margin: auto; border-left: solid .2rem var(--c-blue-100); border-bottom: solid .2rem var(--c-blue-100); transform: translateY(-.1rem) rotate(-45deg); opacity: 0; } &:checked { background: var(--c-blue); border-color: var(--c-blue); &::before { opacity: 1; } & + span { color: var(--c-blue); } } } span { white-space: nowrap; color: var(--c-blue-600); } } }}
.documentTile { & > a { display: flex; flex-direction: column; gap: var(--spc-2); }} .documentTile-content { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--spc-2); color: var(--c-blue); & > span { display: block; position: relative; width: fit-content; margin-left: auto; padding: 0 var(--spc-3) var(--spc-2) 0; color: var(--c-blue); &::before, &::after { content: ''; position: absolute; inset: auto 0 0 auto; height: .1rem; background-color: var(--c-blue); } &::before { width: 2.4rem; } &::after { width: .6rem; transform: rotate(30deg); transform-origin: right bottom; } }}
.faq { --head-padding-y: var(--spc-6); --head-padding-y-lg: var(--spc-4); --padding-x: var(--spc-8); --padding-x-lg: var(--spc-4); --content-padding-y: var(--spc-7); --content-padding-y-lg: var(--spc-4); --icon-width: 1rem; --icon-height: 1rem; border-radius: var(--spc-2); background-color: var(--c-white); cursor: pointer; &:hover { box-shadow: 0 0 var(--spc-2) 0 rgba(var(--c-black-rgb), .1); .faq-head > span { transform: rotate(90deg); } } &.is-open { .faq-head > span { transform: rotate(90deg); &::after { transform: rotate(90deg); } } }} .faq-head,.faq-content-inner { display: flex;} .faq-head { position: relative; & > span { position: absolute; inset: 0 var(--padding-x) 0 auto; width: var(--icon-width); height: var(--icon-height); margin: auto; @media (max-width: 768px) { inset: 0 var(--padding-x-lg) 0 auto; } &::before, &::after { content: ''; position: absolute; inset: 0; margin: auto; background-color: var(--c-blue-400); } &::before { width: .1rem; height: 100%; } &::after { width: 100%; height: .1rem; } }} .faq-content { height: 0; overflow: hidden; transition: height .3s ease-in-out;} .faq-content-inner { background-color: var(--c-blue-200);} .faq__heading { padding: var(--head-padding-y) var(--padding-x); @media (max-width: 768px) { padding: var(--head-padding-y-lg) var(--padding-x-lg); } & > span { display: block; transform: translate(.1em, .05em); } &.--question { color: var(--c-blue-300); & > span::before { content: 'Q.'; } } &.--answer { color: var(--c-blue-800); & > span::before { content: 'A.'; } }} .faq__title,.faq__answer { flex: 1;} .faq__title { padding: var(--content-padding-y) calc(var(--padding-x) * 2 + var(--icon-width)) var(--content-padding-y) var(--padding-x); border-left: solid .1rem var(--c-blue-100); line-height: var(--p-line-height); @media (max-width: 768px) { padding: var(--content-padding-y-lg) calc(var(--padding-x-lg) * 2 + var(--icon-width)) var(--content-padding-y-lg) var(--padding-x-lg); }} .faq__answer { padding: var(--content-padding-y) var(--padding-x) var(--content-padding-y) 0; @media (max-width: 768px) { padding: var(--content-padding-y-lg) var(--padding-x-lg) var(--content-padding-y-lg) 0; }}
.form { max-width: 60rem; font-family: var(--ff-sans-serif); & + .form { margin-top: var(--spc-6); } &.--required { .form-head { display: flex; gap: var(--spc-2); &::after { content: '*必須'; font-size: min(var(--fs-3xs), .75em); color: var(--c-danger); } } } &.--short { .form-content { max-width: 32rem; } } &.--select { .form-content > span { position: relative; &::before, &::after { content: ''; position: absolute; inset: var(--spc-5) var(--spc-4) auto auto; width: .3rem; height: .3rem; @media (max-width: 768px) { inset: 1.8rem var(--spc-4) auto auto; } } &::before { border-top: solid .2rem var(--c-blue-300); border-right: solid .2rem var(--c-blue-300); transform: translateY(.3rem) rotate(135deg); } &::after { border-bottom: solid .2rem var(--c-blue-300); border-left: solid .2rem var(--c-blue-300); transform: translateY(-.3rem) rotate(135deg) } } } .wpcf7-not-valid-tip { display: block; width: fit-content; margin-top: var(--spc-2); padding: var(--spc-1) var(--spc-2); font-size: var(--fs-3xs); color: var(--c-white); background-color: var(--c-danger); border-radius: var(--spc-1); }} .form-head { font-weight: var(--fw-sans-serif-bold); & + .form-content { margin-top: var(--spc-2); }} .form-content > span { display: block;} .form-content input,.form-content select,.form-content textarea { display: block; width: 100%; padding: var(--spc-3) var(--spc-4); font-weight: var(--fw-sans-serif-bold); border-radius: var(--spc-1); color: var(--c-blue-700); background-color: var(--c-blue-100); &::placeholder { color: var(--c-blue-300); } &:hover, &:focus { background-color: var(--c-blue-200); }} .form-content select { cursor: pointer;} .form__description { & + * { margin-top: var(--spc-2); }} .wpcf7 form .wpcf7-response-output { width: fit-content; margin: var(--spc-2) 0 0 0; padding: var(--spc-2) var(--spc-4); border: none; border-radius: var(--spc-1); background-color: var(--c-accent-100); font-family: var(--ff-sans-serif); font-size: var(--fs-2xs); font-weight: var(--fw-sans-serif-bold); color: var(--c-accent-900);}
.heading { display: flex; flex-direction: column; gap: var(--spc-3); @media (max-width: 768px) { gap: var(--spc-1); } &.--right { .heading__title, .heading__titleEn { text-align: right; @media (max-width: 1024px) { text-align: left; } } } &.--accent { .heading__titleEn { color: var(--c-blue-400); } .heading__title { color: var(--c-blue); } } &.--reverse { .heading__titleEn { color: var(--c-blue-400); } .heading__title { color: var(--c-blue-100); } }} .heading__titleEn { line-height: 1em; color: var(--c-blue-200);} .heading__title { color: var(--c-blue-300);}
.maaa { max-width: 26rem; @media (max-width: 768px) { max-width: 16rem; }}
.memberCard { display: grid; grid-template-columns: 32rem 1fr; column-gap: var(--spc-6); max-width: 80rem; border-radius: var(--spc-4); background-color: var(--c-white); cursor: pointer; @media (max-width: 768px) { grid-template-columns: 18rem 1fr; gap: 0; border-radius: var(--spc-3); } @media (max-width: 480px) { grid-template-columns: 1fr; } &:hover { box-shadow: 0 0 var(--spc-3) 0 rgba(var(--c-black-rgb), .1); & > .g-label span { transform: rotate(90deg); } } &.is-open { & > .g-label span { transform: rotate(90deg); &::after { transform: rotate(90deg); } } .memberCard__label::before { content: 'プロフィールをとじる'; } } & > .g-thumb { grid-column: 1 / 2; grid-row: 1 / 2; padding: var(--spc-4); @media (max-width: 768px) { padding: var(--spc-3); } @media (max-width: 480px) { padding: var(--spc-4); } } & > .g-info { grid-column: 2 / 3; grid-row: 1 / 2; align-self: center; padding: var(--spc-4) var(--spc-12) var(--spc-4) var(--spc-4); @media (max-width: 768px) { padding: var(--spc-3); } @media (max-width: 480px) { grid-column: 1 / 2; grid-row: 2 / 3; padding: 0 var(--spc-6) var(--spc-5); } } & > .g-profile { grid-column: 1 / 3; grid-row: 2 / 3; overflow: hidden; height: 0; transition: height 0.3s ease-in-out; @media (max-width: 480px) { grid-column: 1 / 2; grid-row: 3 / 4; } } & > .g-label { grid-column: 1 / 3; grid-row: 3 / 4; display: flex; justify-content: flex-end; align-items: center; gap: var(--spc-4); padding: var(--spc-5) var(--spc-6); border-top: solid .1rem var(--c-blue-100); @media (max-width: 768px) { padding: var(--spc-3) var(--spc-4); } @media (max-width: 480px) { grid-column: 1 / 2; grid-row: 4 / 5; } span { position: relative; width: 1rem; height: 1rem; &::before, &::after { content: ''; position: absolute; inset: 0; margin: auto; background-color: var(--c-blue-400); } &::before { width: .1rem; height: 100%; } &::after { width: 100%; height: .1rem; } } }} .memberCard__thumb { aspect-ratio: 3 / 2; border-radius: var(--spc-2); background-size: cover; background-position: center; background-repeat: no-repeat;} .memberCard__position { color: var(--c-blue-600); & + .memberCard__name { margin-top: var(--spc-1); @media (max-width: 768px) { margin-top: 0; } }} .memberCard__name + .memberCard__infoEn { margin-top: var(--spc-2); @media (max-width: 768px) { margin-top: var(--spc-1); }} .memberCard__infoEn { display: flex; align-items: center; flex-wrap: wrap; gap: .75em; color: var(--c-blue-200); span { display: block; & + span { display: flex; align-items: center; gap: .75em; &::before { content: ''; display: block; width: .1rem; height: 1em; background-color: var(--c-blue-200); transform: rotate(20deg); } } } & + .memberCard__links { margin-top: var(--spc-3); @media (max-width: 768px) { margin-top: var(--spc-2); } }} .memberCard__links { display: flex; gap: var(--spc-2); & > li { width: 1.6rem; height: 1.6rem; & > a { display: block; } }} .memberCard__profile { padding: var(--spc-6) var(--spc-12) var(--spc-12); @media (max-width: 768px) { padding: var(--spc-4) var(--spc-8) var(--spc-7); } @media (max-width: 480px) { padding: var(--spc-4) var(--spc-6) var(--spc-5); }} .memberCard__profile-head { color: var(--c-blue-400); & + .memberCard__profile-content { margin-top: var(--spc-1); }} .memberCard__label { color: var(--c-blue-500); &::before { content: 'プロフィールをみる'; }}
.menuBtn { display: flex; flex-direction: column; gap: var(--spc-1); width: 3.2rem; cursor: pointer; @media (max-width: 768px) { gap: .3rem; width: 2rem; } &:hover { .menuBtn-content > span:nth-child(2), .menuBtn-content > span:nth-child(3) { width: 100%; } } &.--reverse { .menuBtn-head > svg { fill: var(--c-white); } .menuBtn-content > span { background-color: var(--c-white); } }} .menuBtn-head > svg { fill: var(--c-blue);} .menuBtn-content { display: flex; flex-direction: column; gap: var(--spc-1); @media (max-width: 768px) { gap: .3rem; } & > span { display: block; width: 100%; height: .2rem; margin-left: auto; background-color: var(--c-blue); @media (max-width: 768px) { height: .1rem; } &:nth-child(2) { width: 65%; } &:nth-child(3) { width: 30%; } }}
.news { display: grid; grid-template-columns: 13.2rem 10.8rem 1fr; align-items: center; position: relative; padding-block: var(--spc-5); @media (max-width: 768px) { grid-template-columns: auto 1fr; column-gap: var(--spc-4); row-gap: var(--spc-2); } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background-color: var(--c-blue-200); } &:hover { opacity: 1; @media (min-width: 769px) { &::before { width: 100%; } .news-bottom > span { transform: translateX(var(--spc-2)); } } } &.--reverse { &::before { background-color: var(--c-blue-800); } .news-head { color: var(--c-blue-400); } .news-content, .news-bottom { color: var(--c-blue-200); } .news-content { border-color: var(--c-blue-700); } .news-bottom > span, .news-bottom > span::after { background-color: var(--c-blue-300); } } & > * { position: relative; }} .news-head { padding-inline: var(--spc-6); color: var(--c-blue-400); @media (max-width: 768px) { padding: 0; }} .news-content { padding-inline: var(--spc-3); border-right: solid .1rem var(--c-blue-300); border-left: solid .1rem var(--c-blue-300); text-align: center; color: var(--c-blue-700); @media (max-width: 768px) { padding: 0; border: none; text-align: left; }} .news-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--spc-4); padding-inline: var(--spc-6) var(--spc-8); color: var(--c-blue-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @media (max-width: 768px) { grid-column: 1 / 3; grid-row: 2 / 3; padding: 0; } & > span { display: block; position: relative; width: 2.4rem; height: .1rem; background-color: var(--c-blue-600); &::after { content: ''; position: absolute; inset: auto 0 0 auto; width: .6rem; height: .1rem; background-color: var(--c-blue-600); transform: rotate(30deg); transform-origin: right bottom; } }} .news__title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.numberHeading { --height: 2.4em; --padding-top: calc((var(--height) - var(--line-height)) / 2); display: flex; gap: 1.25em; &.--reverse .numberHeading-head { border-color: var(--c-white); }} .numberHeading-head { display: flex; align-items: center; justify-content: center; width: var(--height); height: var(--height); border: solid .1rem var(--c-blue-200); svg { width: 1.5em; height: 1.5em; transform: translate(.6em, -1em); fill: var(--c-gold); }} .numberHeading-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-1); padding-top: var(--padding-top);}
.point { color: var(--c-blue); &.--reverse { color: var(--c-blue-100); .point-head::before { background-color: var(--c-blue-100); } .point-content { &::before { background-color: var(--c-blue-700); } &::after { background-color: var(--c-blue-100); transform: translateX(-100%); animation: pointBarSlide 3s ease-in-out infinite; } } }} .point-head { display: flex; align-items: center; gap: .5em; &::before { content: ''; display: block; width: .75em; height: .75em; background-color: var(--c-blue); border-radius: 50%; animation: pulse-expand 1.5s ease-in-out infinite; } & + .point-content { margin-top: var(--spc-2); }} .point-content { position: relative; width: fit-content; padding-bottom: var(--spc-3); overflow: hidden; & + .point-bottom { margin-top: var(--spc-3); } &::before, &::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: .1rem; } &::before { background-color: var(--c-blue-300); } &::after { background-color: var(--c-blue); transform: translateX(-100%); animation: pointBarSlide 3s ease-in-out infinite; }} @keyframes pulse-expand { 0% { transform: scale(.4); } 100% { transform: scale(1); }} @keyframes pointBarSlide { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); }}
.reason { background-color: var(--c-white);} .reason-head { padding: var(--spc-3) var(--spc-4); & + .reason-content { border-top: solid .1rem var(--c-blue-100); }} .reason-content { display: grid; grid-template-columns: auto 1fr auto; gap: var(--spc-8); min-height: 12.8rem; padding: var(--spc-4) var(--spc-6) var(--spc-4) var(--spc-4); @media (max-width: 1024px) { gap: var(--spc-6); } @media (max-width: 600px) { grid-template-columns: 1fr auto; gap: var(--spc-3); }} .reason__thumb { width: 26rem; padding-inline: var(--spc-2); background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 1024px) { width: 12rem; } @media (max-width: 600px) { width: 100%; max-width: 20rem; aspect-ratio: 8 / 3; } svg { width: 2.4rem; fill: var(--c-gold); transform: translateY(calc(var(--spc-4) * -1)); }} .reason__contents { flex: 1; display: flex; flex-wrap: wrap; align-content: center; gap: var(--spc-1); @media (max-width: 600px) { grid-column: 1 / 3; grid-row: 2 / 3; } & > * { width: 100%; }} .reason__catch { display: flex; align-items: center; width: 12rem; @media (max-width: 1024px) { width: 9.6rem; }}
.sheet { display: grid; grid-template-columns: 1fr auto; background-color: var(--c-white); @media (max-width: 768px) { display: block; margin-inline: calc(var(--container-padding-lg) * -1); } @media (max-width: 600px) { margin-inline: calc(var(--container-padding-md) * -1); } &.--small { @media (max-width: 768px) { margin-inline: calc(var(--container-padding-lg) * -1 + var(--spc-4)); } @media (max-width: 600px) { margin-inline: calc(var(--container-padding-md) * -1 + var(--spc-4)); } .sheet__title, .sheet__btn { padding: var(--spc-6) var(--spc-8); @media (max-width: 768px) { padding: var(--spc-3) calc(var(--container-padding-lg) - var(--spc-4)); } @media (max-width: 600px) { padding: var(--spc-3) calc(var(--container-padding-md) - var(--spc-2)); } } .sheet-content { padding: var(--spc-8); @media (max-width: 768px) { padding: var(--spc-4) calc(var(--container-padding-lg) - var(--spc-4)); } @media (max-width: 600px) { padding: var(--spc-4) calc(var(--container-padding-md) - var(--spc-2)); } } } &.--secondary { background-color: var(--c-blue-100); .sheet-head + .sheet-content { border-color: var(--c-white); } .sheet__list > li + li { border-color: var(--c-white); } } &.--tertiary { background-color: var(--c-blue-200); .sheet-head + .sheet-content { border-color: var(--c-blue-300); } .sheet__list > li + li { border-color: var(--c-blue-300); } } &.--quaternary { background-color: var(--c-blue-800); .sheet-head + .sheet-content { border-color: var(--c-blue-700); } .sheet-content p { color: var(--c-blue-100); } .sheet__title { color: var(--c-blue-100); } .sheet__btn { color: var(--c-blue-300); &::before { background-color: var(--c-blue-700); } &:hover { color: var(--c-blue-100); .sheet__btn-head::before, .sheet__btn-head::after { background-color: var(--c-blue-200); } } .sheet__btn-head::before, .sheet__btn-head::after { background-color: var(--c-blue-300); } } .sheet__list > li + li { border-color: var(--c-blue-700); } } &.--outline { background-color: transparent; border: solid .1rem var(--c-blue-200); @media (max-width: 768px) { border: none; } .sheet-head + .sheet-content { border-color: var(--c-blue-200); } .sheet__btn { color: var(--c-blue-500); &::before { background-color: var(--c-blue-200); } &:hover { color: var(--c-blue-700); .sheet__btn-head::before, .sheet__btn-head::after { background-color: var(--c-blue-600); } } .sheet__btn-head::before, .sheet__btn-head::after { background-color: var(--c-blue-400); } } .sheet__list > li + li { border-color: var(--c-blue-200); } }} .sheet-head + .sheet-content { border-top: solid .1rem var(--c-blue-100);} .sheet-content { grid-column: 1 / 3; grid-row: 2 / 3; display: flex; flex-direction: column; gap: var(--spc-6); padding: var(--spc-10); @media (max-width: 768px) { padding: var(--spc-6) var(--container-padding-lg); } @media (max-width: 600px) { padding: var(--spc-6) var(--container-padding-md); }} .sheet__title,.sheet__btn { padding: var(--spc-8) var(--spc-10); @media (max-width: 768px) { padding: var(--spc-4) var(--container-padding-lg); } @media (max-width: 600px) { padding: var(--spc-4) var(--container-padding-md); }} .sheet__btn { display: flex; align-items: center; gap: var(--spc-10); position: relative; height: 100%; @media (max-width: 768px) { gap: var(--spc-6); padding-inline: var(--spc-4); } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .1rem; @media (max-width: 768px) { width: 100%; } } &:hover { opacity: 1; &::before { width: 100%; } .sheet__btn-head { transform: rotate(90deg); } }} .sheet__btn-head,.sheet__btn-content { position: relative;} .sheet__btn-head { position: relative; width: 1.6rem; height: 1.6rem; @media (max-width: 768px) { width: 1.2rem; height: 1.2rem; } &::before, &::after { content: ''; position: absolute; inset: 0; width: 100%; height: .2rem; margin: auto; } &::after { transform: rotate(90deg); }} .sheet__subtitle + * { margin-top: var(--spc-5); @media (max-width: 768px) { margin-top: var(--spc-2); }} .sheet__section { display: flex; flex-direction: column; gap: var(--spc-4); & + .sheet__section { padding-top: var(--spc-8); border-top: solid .1rem var(--c-blue-100); }} .sheet__section-content { display: flex; gap: var(--spc-12); @media (max-width: 768px) { flex-direction: column; gap: var(--spc-3); } & > * { flex: 1; } & > section { display: flex; align-items: center; gap: var(--spc-6); & > img { max-width: 8rem; } } & > ul { display: flex; flex-wrap: wrap; & > li { flex: 1; max-width: 9.6rem; } }} .sheet__culture > li + li { margin-top: var(--spc-8); padding-top: var(--spc-6); border-top: solid .1rem var(--c-blue-100);} .sheet__list { & > li + li { margin-top: var(--spc-8); padding-top: var(--spc-6); border-top: solid .1rem var(--c-blue-100); }} .sheet__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--spc-12);}
.table { overflow-x: auto; width: 100%; -ms-overflow-style: none; scrollbar-width: none; &::-webkit-scrollbar { display: none; }} .table-inner { display: grid; grid-template-columns: auto repeat(3, 1fr); @media (max-width: 768px) { min-width: max-content; }} .table__cell { padding: var(--spc-6) var(--spc-4); display: flex; align-items: center; justify-content: center; border-top: solid .1rem var(--c-white); text-align: center; background-color: var(--c-blue-100); &.--fixed { position: sticky; left: 0; border-color: var(--c-blue-900); background-color: var(--c-blue); z-index: 1; &.--header { color: var(--c-blue-400); background-color: var(--c-blue-300); } } &.--combined { grid-column: span 2; } &.--header, &.--first { border-top: none; } &.--header { padding-block: var(--spc-4); img { max-width: 12.8rem; } &.--mal { background-color: var(--c-blue); } &.--company-a { background-color: var(--c-blue-700); } &.--company-b { background-color: var(--c-blue-600); } } &.--comparison { color: var(--c-blue-100); } &.--mal { border-color: var(--c-blue-100); background-color: var(--c-white); }} .table__cell-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spc-1); .table__cell-head > span { display: block; position: relative; width: 2rem; height: 2rem; &::before, &::after { content: ''; position: absolute; inset: 0; margin: auto; } &.--double-circle { &::before, &::after { border-radius: 50%; border: solid .2rem var(--c-blue); } &::before { width: 45%; height: 45%; } } &.--cross { &::before, &::after { background-color: var(--c-blue-200); transform: rotate(45deg); } &::before { width: .2rem; height: 100%; } &::after { width: 100%; height: .2rem; } } }} .table__cell-content { color: var(--c-blue-600); span { color: var(--c-blue); }} [class="table__cell"] + [class="table__cell"] { border-left: .1rem solid var(--c-white);}
.tel.--reverse { .tel-head, .tel-content > a, .tel-bottom { color: var(--c-blue-100); }} .tel-head,.tel-content > a,.tel-bottom { color: var(--c-blue-900);} .tel-head + .tel-content { margin-top: var(--spc-1);} .tel-content > a { display: block; width: fit-content; line-height: 1em;} .tel-content + .tel-bottom { margin-top: var(--spc-2);} .tel-bottom { display: flex; align-items: center; gap: var(--spc-3);}
.text-4xl { font-size: var(--fs-4xl); @media (max-width: 768px) { font-size: var(--fs-4xl-sp); }} .text-3xl { font-size: var(--fs-3xl); @media (max-width: 768px) { font-size: var(--fs-3xl-sp); }} .text-2xl { font-size: var(--fs-2xl); @media (max-width: 768px) { font-size: var(--fs-2xl-sp); }} .text-xl { font-size: var(--fs-xl); @media (max-width: 768px) { font-size: var(--fs-xl-sp); }} .text-lg { font-size: var(--fs-lg); @media (max-width: 768px) { font-size: var(--fs-lg-sp); }} .text-md { font-size: var(--fs-md); @media (max-width: 768px) { font-size: var(--fs-md-sp); }} .text-sm { font-size: var(--fs-sm); @media (max-width: 768px) { font-size: var(--fs-sm-sp); }} .text-xs { font-size: var(--fs-xs); @media (max-width: 768px) { font-size: var(--fs-xs-sp); }} .text-2xs { font-size: var(--fs-2xs); @media (max-width: 768px) { font-size: var(--fs-2xs-sp); }} .text-3xs { font-size: var(--fs-3xs); @media (max-width: 768px) { font-size: var(--fs-3xs-sp); }} .text-4xs { font-size: var(--fs-4xs); @media (max-width: 768px) { font-size: var(--fs-4xs-sp); }} .text-en { font-family: var(--ff-en); font-weight: var(--fw-en);} .text-bold { font-weight: var(--fw-serif-bold);} .text-ss { font-family: var(--ff-sans-serif); &.text-bold { font-weight: var(--fw-sans-serif-bold); }}
.triangle { display: grid; aspect-ratio: 49 / 62; position: relative; &.is-inview { .triangle__left, .triangle__right, .triangle__center { opacity: 1; } .triangle__left { transform: translate(0, 0); } .triangle__right { transform: translate(0, 0); } .triangle__center { clip-path: inset(0 0 0 0); } }} .triangle__left,.triangle__right,.triangle__center { grid-column: 1 / 2; grid-row: 1 / 2; opacity: 0;} .triangle__left,.triangle__right { width: calc(100% * 30 / 49); transition: transform 0.6s ease-out 0.6s, opacity 0.6s ease-out 0.6s; svg { fill: var(--c-blue-200); }} .triangle__left { align-self: end; transform: translate(-12.5%, -6%);} .triangle__right { justify-self: end; transform: translate(12.5%, 3.5%);} .triangle__center { justify-self: center; align-self: center; width: 100%; clip-path: inset(0 100% 0 0); transition: clip-path 0.6s ease-out, opacity 0.6s ease-out; svg { fill: var(--c-blue-100); }}
.document { &.--reverse { .document__title, .document__desc { color: var(--c-white); } & > a > .g-content > span { color: var(--c-white); &::before, &::after { background-color: var(--c-white); } } } & > a { display: grid; grid-template-columns: 28rem 1fr; column-gap: var(--spc-6); row-gap: var(--spc-4); @media (max-width: 1024px) { grid-template-columns: 20rem 1fr; row-gap: var(--spc-3); } @media (max-width: 600px) { grid-template-columns: 1fr; } & > .g-head { grid-column: 1 / 3; @media (max-width: 600px) { grid-column: 1 / 2; } } & > .g-content { display: flex; flex-direction: column; justify-content: space-between; gap: var(--spc-2); & > span { display: block; position: relative; width: fit-content; margin-left: auto; padding: 0 var(--spc-3) var(--spc-2) 0; color: var(--c-blue); &::before, &::after { content: ''; position: absolute; inset: auto 0 0 auto; height: .1rem; background-color: var(--c-blue); } &::before { width: 2.4rem; } &::after { width: .6rem; transform: rotate(30deg); transform-origin: right bottom; } } } }} .document__title,.document__desc { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color: var(--c-blue);} .document__title { -webkit-line-clamp: 2;} .document__desc { -webkit-line-clamp: 1;}
.domain { display: flex; flex-direction: column; gap: var(--spc-8); @media (max-width: 768px) { gap: var(--spc-6); }} .domain-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--spc-6); @media (max-width: 768px) { flex-direction: column; gap: var(--spc-4); }} .domain-content > * + * { margin-top: var(--spc-10); padding-top: var(--spc-10); border-top: solid .1rem var(--c-blue-700);} .domain__title { display: flex; flex-direction: column; gap: var(--spc-4); h3 { color: var(--c-blue-100); font-weight: var(--fw-default); }} .domain__btn { display: flex; align-items: center; gap: var(--spc-6); position: relative; padding: var(--spc-6); color: var(--c-blue-300); @media (max-width: 768px) { width: fit-content; gap: var(--spc-4); padding: var(--spc-3) var(--spc-4); } &::before { content: ''; position: absolute; inset: 0 auto 0 0; width: .1rem; background-color: var(--c-blue-700); } &:hover { opacity: 1; color: var(--c-blue-100); &::before { width: 100%; } & > .domain__btn-head { transform: rotate(90deg); &::before, &::after { background-color: var(--c-blue-200); } } }} .domain__btn-head,.domain__btn-content { position: relative;} .domain__btn-head { position: relative; width: 1rem; height: 1rem; &::before, &::after { content: ''; position: absolute; inset: 0; width: 100%; height: .1rem; margin: auto; background-color: var(--c-blue-300); } &::after { transform: rotate(90deg); }}
.menuSections { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; column-gap: var(--spc-12); row-gap: var(--spc-8); @media (max-width: 768px) { display: block; } &.--footer { row-gap: var(--spc-6); & > .g-head { color: var(--c-blue-900); } & > .g-content > li > a { color: var(--c-blue-800); } } & > .g-head { grid-row: 1 / 2; color: var(--c-blue-500); @media (max-width: 768px) { & + * { margin-top: var(--spc-3); } } } & > .g-content { display: flex; flex-direction: column; gap: var(--spc-3); grid-row: 2 / 3; @media (max-width: 768px) { column-gap: var(--spc-6); & + * { margin-top: var(--spc-8); } } & > li > a { color: var(--c-blue-200); white-space: nowrap; } } & > .g-content.--about-us { grid-column: 1 / 2; } & > .g-content.--support { grid-column: 2 / 3; } & > .g-content.--others { grid-column: 3 / 4; @media (max-width: 768px) { flex-direction: row; flex-wrap: wrap; } }}
.newsList.--reverse .newsList-content > li + li { border-top: solid .1rem var(--c-blue-800);} .newsList-content > li + li { border-top: solid .1rem var(--c-blue-200);}
.numberSection { display: flex; flex-direction: column; gap: var(--spc-4);} .numberSection-content { display: flex; @media (max-width: 768px) { flex-direction: column; } &.--overflow-x { @media (max-width: 768px) { margin-right: calc(var(--container-padding-lg) * -1); } @media (max-width: 600px) { margin-right: calc(var(--container-padding-md) * -1); } }} .numberSection-content-head { padding: var(--spc-7) var(--spc-5); background-color: var(--c-blue); @media (max-width: 768px) { padding: var(--spc-2) var(--spc-3); } h6 { writing-mode: vertical-rl; color: var(--c-blue-100); @media (max-width: 768px) { writing-mode: horizontal-tb; } }} .numberSection-content-content { flex: 1; & > section { &:first-of-type { background-color: var(--c-blue-100); .numberSection__title { color: var(--c-blue-800); & + .numberSection__contents { border-color: var(--c-blue-200); } } } &:last-of-type { border: solid .1rem var(--c-blue-100); .numberSection__title { color: var(--c-blue-600); & + .numberSection__contents { border-color: var(--c-blue-100); } } } }} .numberSection__title { padding: var(--spc-3) var(--spc-4); @media (max-width: 768px) { padding: var(--spc-2) var(--spc-3); }} .numberSection__contents { display: flex; align-items: center; gap: var(--spc-4); border-top: solid .1rem; padding: var(--spc-4); @media (max-width: 1024px) { flex-direction: column; align-items: flex-start; gap: var(--spc-2); } @media (max-width: 768px) { padding: var(--spc-3); }} .numberSection__contents-head { width: 24rem; padding: var(--spc-4); text-align: center; @media (max-width: 1024px) { width: 100%; padding: 0; br { display: none; } }} .numberSection__contents-content { flex: 1;}
.product { & > a { display: flex; gap: var(--spc-12); color: var(--c-blue-100); @media (max-width: 768px) { gap: var(--spc-6); } &:hover { opacity: 1; .product__contents .product__contents-content > span::before { transform: translateX(var(--spc-2)); } .product__contents .product__contents-content > span > span { transform: translateX(var(--spc-2)); } } }} .product-head { padding-right: var(--spc-3); border-right: solid .1rem var(--c-blue-700); @media (max-width: 768px) { padding-right: var(--spc-1); } span { writing-mode: vertical-rl; color: var(--c-blue-500); }} .product-content { flex: 1; display: flex; flex-direction: column; gap: var(--spc-4);} .product__contents { display: flex; gap: var(--spc-10); flex-wrap: wrap; @media (max-width: 768px) { flex-direction: column; gap: var(--spc-6); }} .product__contents-head { max-width: 32rem; & > img { width: 100%; height: auto; }} .product__contents-content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--spc-4); & > img { width: 14rem; @media (max-width: 768px) { width: 12rem; } } & > span { position: relative; width: fit-content; padding: 0 var(--spc-4) var(--spc-2) 0; color: var(--c-blue-300); & > span { position: absolute; inset: auto 0 0 0; &::before, &::after { content: ''; position: absolute; inset: auto 0 0 auto; height: .1rem; background-color: var(--c-blue-300); } &::before { width: 2.4rem; } &::after { width: .6rem; transform: rotate(30deg); transform-origin: right bottom; } } }}
.reasonSheet { --thumb-width: 42rem; --padding-x: var(--spc-10); --padding-y: var(--spc-7); --padding-y-lg: var(--spc-4); background-color: var(--c-white); @media (max-width: 768px) { margin-inline: calc(var(--container-padding-lg) * -1); }} .reasonSheet-head { display: grid; grid-template-columns: 1fr var(--thumb-width); @media (max-width: 1024px) { grid-template-columns: 1fr; } & > .g-heading, & > .g-content { grid-column: 1 / 3; padding: var(--padding-y) var(--thumb-width) var(--padding-y) var(--padding-x); @media (max-width: 1024px) { grid-column: 1 / 2; padding: var(--padding-y) var(--padding-x); } @media (max-width: 768px) { padding: var(--padding-y-lg) var(--container-padding-lg); } } & > .g-heading { grid-row: 1 / 2; background-color: var(--c-blue-600); } & > .g-content { grid-row: 2 / 3; display: flex; flex-direction: column; gap: var(--spc-2); @media (max-width: 1024px) { padding: var(--padding-y) var(--padding-x) 0; } @media (max-width: 768px) { padding: var(--padding-y-lg) var(--container-padding-lg) 0; } } & > .g-thumb { grid-column: 2 / 3; grid-row: 1 / 3; padding: var(--padding-y) var(--padding-x); @media (max-width: 1024px) { grid-column: 1 / 2; grid-row: 3 / 4; } @media (max-width: 768px) { padding: var(--padding-y-lg) var(--container-padding-lg); } }} .reasonSheet-content { padding: 0 var(--padding-x) var(--padding-x); @media (max-width: 768px) { padding: 0 var(--container-padding-lg) var(--container-padding-lg); } & > *:first-child { padding-top: var(--padding-y); border-top: solid .1rem var(--c-blue-100); }} .reasonSheet__heading { color: var(--c-white);} .reasonSheet__thumb { height: 100%; border-radius: var(--spc-1); background-size: cover; background-position: center; background-repeat: no-repeat; @media (max-width: 1024px) { width: 100%; max-width: 20rem; aspect-ratio: 8 / 3; } & > svg { width: 2.8rem; fill: var(--c-gold); transform: translate(var(--spc-4), calc(var(--spc-5) * -1)); }} .reasonSheet__desc { padding-block: var(--padding-y);} .reasonSheet__img { img { max-width: 12rem; }}
.relatedPosts { display: flex; flex-direction: column; gap: var(--spc-3); @media (max-width: 768px) { gap: var(--spc-2); } &.--reverse .relatedPosts__title { color: var(--c-white); }}
.spNavItems { display: flex; align-items: center; gap: var(--spc-10); @media (max-width: 768px) { gap: var(--spc-6); } &.--reverse { .spNavItems__item > a { color: var(--c-white); } }} .spNavItems-content { display: flex; align-items: center; gap: var(--spc-6); @media (max-width: 768px) { display: none; }} .spNavItems__item > a { display: block; color: var(--c-blue);}
.wp-contents-wrap { padding: var(--spc-12) var(--spc-16); background-color: var(--c-white); @media (max-width: 768px) { padding: var(--spc-4) var(--spc-6); }} .wpcontents { &.--ss { * { font-family: var(--ff-sans-serif); a { font-weight: var(--fw-sans-serif-bold); } } h2, h3, h4, h5, h6 { font-weight: var(--fw-sans-serif-bold); } } & > * { &:first-child { margin-top: 0; padding-top: 0; border-top: none; } & + * { margin-top: var(--spc-6); @media (max-width: 768px) { margin-top: var(--spc-4); } } } h2, h3, h4, h5, h6 { color: var(--c-blue-900); } h2 { margin-top: var(--spc-12); padding-top: var(--spc-12); border-top: solid .1rem var(--c-blue-200); font-size: var(--fs-xl); @media (max-width: 768px) { margin-top: var(--spc-8); padding-top: var(--spc-8); font-size: var(--fs-xl-sp); } } h3 { margin-top: var(--spc-10); font-size: var(--fs-lg); @media (max-width: 768px) { margin-top: var(--spc-6); font-size: var(--fs-lg-sp); } } h4 { font-size: var(--fs-md); @media (max-width: 768px) { font-size: var(--fs-md-sp); } } h5 { font-size: var(--fs-sm); @media (max-width: 768px) { font-size: var(--fs-sm-sp); } } h6 { font-size: var(--fs-xs); @media (max-width: 768px) { font-size: var(--fs-xs-sp); } } p, li, th, td { font-size: var(--fs-sm); @media (max-width: 768px) { font-size: var(--fs-sm-sp); } } th { text-align: center; } ul, ol { margin-top: var(--spc-4); padding-left: 2.8em; & > li + li { margin-top: var(--spc-4); } ul, ol { padding-left: 1em; } } ul { list-style-type: disc; } li { line-height: var(--line-height); } hr { margin-block: var(--spc-12); border-width: .1rem; border-color: var(--c-blue-100); } .wp-block-table { margin-inline: auto; } .bg-white { width: fit-content; padding: var(--spc-7) var(--spc-8); background-color: var(--c-white); @media (max-width: 768px) { padding: var(--spc-5) var(--spc-6); } & > *:first-child { margin-top: 0; padding-top: 0; border-top: none; } } .sheet { margin-top: var(--spc-12); }}
.a-fadeInUp { opacity: 0; transform: translateY(var(--spc-6)); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); &.is-inview { opacity: 1; transform: translateY(0); }} .a-fadeInDown { opacity: 0; transform: translateY(calc(var(--spc-6) * -1)); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); &.is-inview { opacity: 1; transform: translateY(0); }} .a-fadeInRight { opacity: 0; transform: translateX(var(--spc-6)); transition: opacity .4s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); &.is-inview { opacity: 1; transform: translateX(0); }}
.u-hidden-3xl { @media (max-width: 1440px) { display: none!important; }} .u-hidden-2xl { @media (max-width: 1280px) { display: none!important; }} .u-hidden-xl { @media (max-width: 1024px) { display: none!important; }} .u-hidden-lg { @media (max-width: 768px) { display: none!important; }} .u-hidden-md { @media (max-width: 600px) { display: none!important; }} .u-hidden-sm { @media (max-width: 480px) { display: none!important; }} .u-hidden-xs { @media (max-width: 414px) { display: none!important; }} .u-hidden-2xs { @media (max-width: 375px) { display: none!important; }} .u-hidden-3xs { @media (max-width: 320px) { display: none!important; }}
.u-visible-3xl { display: none!important; @media (max-width: 1440px) { display: block!important; }} .u-visible-2xl { display: none!important; @media (max-width: 1280px) { display: block!important; }} .u-visible-xl { display: none!important; @media (max-width: 1024px) { display: block!important; }} .u-visible-lg { display: none!important; @media (max-width: 768px) { display: block!important; }} .u-visible-md { display: none!important; @media (max-width: 600px) { display: block!important; }} .u-visible-sm { display: none!important; @media (max-width: 480px) { display: block!important; }} .u-visible-xs { display: none!important; @media (max-width: 414px) { display: block!important; }} .u-visible-2xs { display: none!important; @media (max-width: 375px) { display: block!important; }} .u-visible-2xs { display: none!important; @media (max-width: 320px) { display: block!important; }}