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;} 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;} optgroup { font-weight: bold;} table { border-collapse: collapse; border-spacing: 0;} td,th { padding: 0;} :root { --c-black: #000000; --c-white: #FFFFFF; --c-black-600: #4e4e4e; --c-black-300: #606060; --c-black-100: #949494; --c-link: #2DA5EE; --c-danger: #D90004; --c-sand-100: #f1e4ce; --c-sand-200: #f0d9b5; --c-sand-300: #e6cba0; --c-sand-400: #d3a85a; --c-blue-100: #a3bfd3; --c-blue-200: #79afd8; --c-blue-300: #65a3d1; --c-green-100: #d3e5e2; --c-green-200: #8fb46f; --c-green-300: #719b4d; --c-coral-100: #ee8d7f; --c-coral-200: #e76855; --c-coral-300: #dc533e; --c-gray-100: #f5f5f5; --c-gray-200: #e5e5e5; --fs-4xl: 4.8rem; --fs-3xl: 3.6rem; --fs-2xl: 3.2rem; --fs-xl: 2.4rem; --fs-lg: 2rem; --fs-md: 1.6rem; --fs-sm: 1.5rem; --fs-xs: 1.4rem; --fs-2xs: 1.2rem; --fs-3xs: 1rem; --fs-4xl-sp: 3.2rem; --fs-3xl-sp: 2.8rem; --fs-2xl-sp: 2rem; --fs-xl-sp: 1.8rem; --fs-lg-sp: 1.6rem; --fs-md-sp: 1.5rem; --fs-sm-sp: 1.3rem; --fs-xs-sp: 1.2rem; --fs-2xs-sp: 1.1rem; --fs-3xs-sp: 1rem; --fw-default: 400; --fw-bold: 700; --fw-default-en: 300; --fw-bold-en: 800; --ff-sans-selif: YakuHanJPs, "Roboto", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif; --ff-en: YakuHanJPs, sans-serif; --ff-mincho: "BIZ UDPMincho", "BIZ UDMincho", serif; --ls-heading: .05em; --ls-body: .025em; --line-height: 1.6em; --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-13: calc(var(--spc) * 13); --spc-14: calc(var(--spc) * 14); --spc-15: calc(var(--spc) * 15); --spc-16: calc(var(--spc) * 16); --spc-20: calc(var(--spc) * 20); --spc-24: calc(var(--spc) * 24); --spc-27: calc(var(--spc) * 27); --spc-28: calc(var(--spc) * 28); --spc-30: calc(var(--spc) * 30); --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); --spc-60: calc(var(--spc) * 64); --spc-72: calc(var(--spc) * 72); --spc-80: calc(var(--spc) * 80); --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50; --frame-width: 1.6rem; --frame-width-sp: .8rem;} * { box-sizing: border-box; word-wrap: break-word; line-height: var(--h-line-height); color: var(--c-wb-blue-dark); transition: .2s ease; &:before, &:after { transition: .2s ease; }} html,body { overflow-x: hidden; background-color: var(--c-gray-100);} html { background-color: var(--c-white); font-size: 62.5%; font-family: var(--ff-sans-selif); -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; }}@media (min-width: 1440px) { html { font-size: calc(100vw / 144); }}@media (max-width: 480px) { html { font-size: calc(100vw / 48); }} body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,a,p,blockquote { margin: 0;} dd { padding-inline-start: 0;} body,h1,h2,h3,h4,h5,h6,ul,li,p,blockquote { color: var(--c-black);} body { display: flex; align-items: center; min-height: 100vh; flex-direction: column;} 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 { font-size: var(--fs-4xl); @media (max-width: 834px) { font-size: var(--fs-4xl-sp); }} h2 { font-size: var(--fs-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); }} h3 { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }} h4 { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }} h5 { font-size: var(--fs-2xs); @media (max-width: 834px) { font-size: var(--fs-2xs-sp); }} h6 { font-size: var(--fs-3xs); @media (max-width: 834px) { font-size: var(--fs-3xs-sp); }} ul { padding: 0; list-style: none;} p,li { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-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;}
.l-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-50); pointer-events: none;}
.l-container { max-width: 128rem; margin-inline: auto; padding-inline: var(--spc-24); container: layoutContainer / inline-size; @media (max-width: 520px) { padding-inline: var(--spc-8); } &.-narrow { max-width: 64rem; } &.-slim { max-width: 88rem; }}
@media (max-width: 834px) { :root { --frame-width: 0.8rem; }} .l-frame, .l-frame:before, .l-frame:after { position: fixed; display: block; background-color: var(--c-sand-100); z-index: var(--z-10); top: 0;} .l-frame { right: 0; left: 0; height: 1.6rem; @media (max-width: 834px) { height: 1.2rem; }} .l-frame:before, .l-frame:after { content: ''; width: var(--frame-width); bottom: 0;} .l-frame:before { left: 0;} .l-frame:after { right: 0;}
.l-main { flex-grow: 1; width: 100%;}
.l-section { position: relative; padding-block: var(--spc-24); padding-inline: var(--spc-24); z-index: 1; @media (max-width: 1150px) { padding-inline: var(--spc-16); } @media (max-width: 834px) { padding-block: var(--spc-12); padding-inline: var(--spc-8); }} .l-section--inline { padding-block: 0;}
.l-frame, .l-frame:before, .l-frame:after { position: fixed; display: block; background-color: var(--c-sand-100); z-index: var(--z-10); top: 0;} .l-frame { right: 0; left: 0; height: var(--frame-width); @media (max-width: 834px) { height: var(--frame-width-sp); }} .l-frame:before, .l-frame:after { content: ''; width: var(--frame-width); bottom: 0; @media (max-width: 834px) { width: var(--frame-width-sp); }} .l-frame:before { left: 0;} .l-frame:after { right: 0;}
.l-pageHero { position: relative; display: flex; align-items: center; justify-content: flex-end; padding: var(--spc-40) var(--spc-24) 0; @media (max-width: 834px) { padding: var(--spc-20) var(--spc-5) 0; }} .l-pageHero__inner { position: relative; z-index: 1;} .l-pageHero__title { color: var(--c-black-600);} .l-pageRibbon { position: absolute; top: var(--spc-24); right: 0; left: 0; z-index: 1; pointer-events: none; margin: 0; overflow: hidden; display: flex; justify-content: center;} .l-pageRibbon svg { display: block; width: 148rem; max-width: none; flex-shrink: 0; height: auto; @media (max-width: 834px) { width: 70rem; }} @keyframes ribbonDraw { to { stroke-dashoffset: 0; }} .l-pageRibbon.is-visible path { animation: ribbonDraw 2s cubic-bezier(0.35, 0.46, 0.65, 0.94) forwards;}
.l-bnav { position: fixed; inset: auto 0 0 0; transform: translateY(100%); @media (max-width: 1080px) { transform: translateY(0); }}
.l-footer { width: 100%; background-color: var(--c-sand-200); border-radius: var(--spc-16) var(--spc-16) 0 0; overflow: hidden; position: relative; margin-top: calc(var(--spc-8) * -1); z-index: 1; @media (max-width: 834px) { border-radius: var(--spc-12) var(--spc-12) 0 0; margin-top: calc(var(--spc-6) * -1); }} .l-footer__inner { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: var(--spc-24) var(--spc-24) var(--spc-20); @media (max-width: 834px) { flex-direction: column; gap: var(--spc-8); padding: var(--spc-12) var(--spc-8); }} .l-footer__ribbon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 142%; pointer-events: none;} .l-footer__ribbon img { width: 100%; height: auto; opacity: 0.5;} .l-footer__contact { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--spc-6);} .l-footer__contactTitle { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spc-2); color: var(--c-black-600); line-height: 2;} .l-footer__contactTitle span { background-color: var(--c-gray-100); padding: 0 var(--spc-3);} .l-footer__contactLead { color: var(--c-black-600);} .l-footer__logo { position: relative; z-index: 1; margin: 0; width: 28rem; flex-shrink: 0; @media (max-width: 834px) { width: 12rem; }} .l-footer__logo img { width: 100%; height: auto;} .l-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: var(--spc-5) var(--spc-24) var(--spc-9); position: relative; @media (max-width: 834px) { flex-direction: column; align-items: flex-start; gap: var(--spc-4); padding-inline: var(--spc-8); }} .l-footer__bottom::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: var(--spc-4); background-color: var(--c-sand-100); @media (max-width: 834px) { height: var(--spc-3); }} .l-footer__nav { display: flex; gap: var(--spc-6);} .l-footer__navLink { color: var(--c-white); text-decoration: none; font-weight: var(--fw-bold);} .l-footer__copy { margin: 0; color: var(--c-gray-100); font-weight: var(--fw-bold); letter-spacing: var(--ls-body);}
.c-btn { width: fit-content; display: flex; align-items: center; gap: var(--spc-5); height: var(--spc-15); border-radius: var(--spc-2); padding-inline: var(--spc-5) var(--spc-7); font-weight: var(--fw-bold); letter-spacing: var(--ls-body); white-space: nowrap; text-decoration: none; cursor: pointer; &:hover { opacity: 0.9; } @media (max-width: 834px) { height: var(--spc-12); gap: var(--spc-4); padding-inline: var(--spc-4) var(--spc-6); }} .c-btn:not(:has(> svg)):not(:has(> .c-dot)) { padding-inline: var(--spc-7); @media (max-width: 834px) { padding-inline: var(--spc-6); }} .c-btn--coral { background-color: var(--c-coral-300); color: var(--c-white); &:hover { color: var(--c-white); }} .c-btn--blue { background-color: var(--c-blue-200); color: var(--c-white); &:hover { color: var(--c-white); }}
 .text-4xl { font-size: var(--fs-4xl); @media (max-width: 834px) { font-size: var(--fs-4xl-sp); }}.text-3xl { font-size: var(--fs-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); }}.text-2xl { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }}.text-xl { font-size: var(--fs-xl); @media (max-width: 834px) { font-size: var(--fs-xl-sp); }}.text-lg { font-size: var(--fs-lg); @media (max-width: 834px) { font-size: var(--fs-lg-sp); }}.text-md { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); }}.text-sm { font-size: var(--fs-sm); @media (max-width: 834px) { font-size: var(--fs-sm-sp); }}.text-xs { font-size: var(--fs-xs); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }}.text-2xs { font-size: var(--fs-2xs); @media (max-width: 834px) { font-size: var(--fs-2xs-sp); }}.text-3xs { font-size: var(--fs-3xs); @media (max-width: 834px) { font-size: var(--fs-3xs-sp); }} .ls-heading { letter-spacing: var(--ls-heading);}.ls-body { letter-spacing: var(--ls-body);} .ff-mincho-h { font-family: var(--ff-mincho); font-weight: var(--fw-default); letter-spacing: var(--ls-heading); line-height: var(--line-height);}.ff-mincho-b { font-family: var(--ff-mincho); font-weight: var(--fw-default); letter-spacing: var(--ls-body); line-height: var(--p-line-height);}.ff-gothic-h { font-family: var(--ff-sans-selif); letter-spacing: var(--ls-heading); line-height: var(--line-height);}.ff-gothic-b { font-family: var(--ff-sans-selif); letter-spacing: var(--ls-body); line-height: var(--p-line-height);} @keyframes catchLineReveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0% 0 0); }} .c-catchLine { display: inline-block; background-color: var(--c-blue-200); color: var(--c-white); font-weight: var(--fw-default); line-height: 1; padding: var(--spc-3); letter-spacing: var(--ls-heading); white-space: nowrap; clip-path: inset(0 100% 0 0);} .c-catchLine.is-visible { animation: catchLineReveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;} .c-catchLine--sand { background-color: var(--c-sand-200); color: var(--c-black-300);} .c-catchLine--coral { background-color: var(--c-coral-300); color: var(--c-white);} .c-catchLine--green { background-color: var(--c-green-100); color: var(--c-black-300);} .c-catchLine--gray { background-color: var(--c-gray-100); color: var(--c-black-600);} .c-catchLine--blue { background-color: var(--c-blue-300); color: var(--c-white);} .c-catchLine--dark { background-color: var(--c-black-600); color: var(--c-white);}
@keyframes dotPulse { 0% { transform: scale(var(--dot-scale-from)); animation-timing-function: ease-out; } 49.9% { transform: scale(1); } 50% { transform: scale(var(--dot-scale-from)); animation-timing-function: ease-out; } 100% { transform: scale(1); }} .c-dot { display: block; border-radius: 50%; flex-shrink: 0; animation: dotPulse 3s infinite;} .c-dot--sm { width: var(--spc-2); height: var(--spc-2); --dot-scale-from: 0.25; } .c-dot--md { width: var(--spc-3); height: var(--spc-3); --dot-scale-from: 0.167; } .c-dot--blue { background-color: var(--c-blue-200);} .c-dot--white { background-color: var(--c-white);}
.c-wpcontents { * { & + * { margin-top: var(--spc-2); } } h2 { font-size: var(--fs-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); } } h3 { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); } } h4 { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); } } h5 { font-size: var(--fs-2xs); @media (max-width: 834px) { font-size: var(--fs-2xs-sp); } } h6 { font-size: var(--fs-3xs); @media (max-width: 834px) { font-size: var(--fs-3xs-sp); } } p, li, th, td { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); } } th { text-align: center; } ul, ol { padding-left: 2em; } ul { list-style-type: disc; } ol { & > li { & + li { margin-top: var(--spc-6); } } } li { line-height: var(--line-height); } hr { margin-block: var(--spc-12); border-width: .1rem; border-color: var(--c-black-100); } .wp-block-table { margin-inline: auto; }}
.c-headerNav { display: flex; justify-content: flex-end; align-items: flex-start; transition: transform 0.3s ease;} .c-headerNav__logo { margin-right: auto; margin-top: var(--spc-10); margin-left: var(--spc-10); display: block; width: 14.8rem; flex-shrink: 0; pointer-events: auto; @media (max-width: 834px) { margin-left: var(--spc-5); margin-top: var(--spc-6); width: 9.6rem; }} .c-headerNav__logo img { width: 100%; height: auto;} .c-headerNav.is-hidden { transform: translateY(-100%);} .c-headerNav__tab { display: flex; align-items: center; gap: var(--spc-10); position: relative; background-color: var(--c-sand-100); border-bottom-left-radius: var(--spc-6); padding: var(--spc-6) var(--spc-7) var(--spc-6) var(--spc-10); pointer-events: auto; @media (max-width: 834px) { padding: var(--spc-4); border-bottom-left-radius: var(--spc-4); .c-btn { display: none; } }} .c-headerNav__tabLink { display: flex; align-items: center; gap: var(--spc-3); font-weight: var(--fw-bold); color: var(--c-black-300); letter-spacing: var(--ls-body); white-space: nowrap; text-decoration: none; &:hover { opacity: 0.8; color: var(--c-black-300); }} .c-headerNav__tabBtnIcon { width: var(--spc-6); height: var(--spc-6); flex-shrink: 0; color: var(--c-white);} .c-headerNav__figure { position: absolute; width: 2.4rem; @media (max-width: 834px) { width: 1.6rem; }} .c-headerNav__figure--left { top: var(--frame-width); left: calc(var(--frame-width) * -1); @media (max-width: 834px) { top: var(--frame-width-sp); left: -1.6rem; }} .c-headerNav__figure--right { right: var(--frame-width); bottom: calc(var(--frame-width) * -1); @media (max-width: 834px) { right: var(--frame-width-sp); bottom: -1.6rem; }}