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;}
html { margin-top: 0!important;} :root { --c-black: #042431; --c-white: #FFFFFF; --c-black-600: #A9A9A9; --c-black-300: #D9D9D9; --c-black-100: #F5F5F5; --c-black-100-rgb: 245,245,245; --c-wb-blue: #1F7385; --c-wb-blue-dark: #15525B; --c-wb-blue-dark-rgb: 21,82,91; --c-wb-blue-light: #89CAD2; --c-bb-pink: #FF3399; --c-link: #2DA5EE; --c-danger: #D90004; --fs-4xl: 6.4rem; --fs-3xl: 4.8rem; --fs-2xl: 3.6rem; --fs-xl: 3.2rem; --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: 4.8rem; --fs-3xl-sp: 3.2rem; --fs-2xl-sp: 2.8rem; --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; --fw-default: 400; --fw-bold: 700; --fw-default-en: 300; --fw-bold-en: 800; --ff-sans-selif: YakuHanJPs, "Roboto", "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "Hiragino Sans", "MS PGothic", "Hiragino Kaku Gothic ProN", sans-serif; --ff-en: YakuHanJPs, "Red Hat Display", sans-serif; --ff-en-script: YakuHanJPs, "Oooh Baby", sans-serif; --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-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); --z-0: 0; --z-10: 10; --z-20: 20; --z-30: 30; --z-40: 40; --z-50: 50;} * { 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;} 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; }} body,h1,h2,h3,h4,h5,h6,ul,li,a,p,blockquote { margin: 0;} body,h1,h2,h3,h4,h5,h6,ul,li,p,blockquote { color: var(--c-black);} 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-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); }} h2 { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }} h3 { font-size: var(--fs-xl); @media (max-width: 834px) { font-size: var(--fs-xl-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); }} 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;} .wpcf7-form { & > label { display: grid; grid-template-columns: 12rem 1fr; gap: var(--spc-3); color: var(--c-wb-blue); font-size: var(--fs-sm); font-weight: var(--fw-bold); @media (max-width: 834px) { display: block; font-size: var(--fs-sm-sp); } &.block { display: block; & > .g-head { & + * { margin-top: var(--spc-2); } } & > span { width: 100%; & > * { width: 100%; } } } &:has(.wpcf7-validates-as-required) { & > .g-head { &:after { content: "*必須"; display: block; color: var(--c-danger); font-size: var(--fs-3xs); line-height: 1em; @media (max-width: 834px) { display: inline-block; margin-left: var(--spc-1); font-size: var(--fs-3xs-sp); } } } } & + label { margin-top: var(--spc-4); } & > .g-head { padding-top: var(--spc-4); } & > span { display: block; & > input, & > textarea { padding-inline: var(--spc-2); border-bottom: solid .2rem var(--c-black-600); } & > input { width: 100%; line-height: calc(1.6em + (var(--spc-4) * 2)); } & > .wpcf7-not-valid-tip { margin-top: var(--spc-1); color: var(--c-danger); font-size: var(--fs-3xs); font-weight: var(--fw-bold); @media (max-width: 834px) { font-size: var(--fs-3xs-sp); } } & > .wpcf7-checkbox { & > .wpcf7-list-item { display: inline-flex; align-items: center; gap: var(--spc-2); margin: 0; } } } } > .wpcf7-submit { margin-top: var(--spc-6); }} .wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form .wpcf7-response-output { padding: var(--spc-3) var(--spc-4); border: solid .2rem var(--c-danger); color: var(--c-danger); font-size: var(--fs-xs); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }} .grecaptcha-badge { top: 28rem; bottom: auto!important;} .wpcf7-spinner { display: none!important;}
.fs-4xl { font-size: var(--fs-4xl); @media (max-width: 834px) { font-size: var(--fs-4xl-sp); }} .fs-3xl { font-size: var(--fs-3xl); @media (max-width: 834px) { font-size: var(--fs-3xl-sp); }} .fs-2xl { font-size: var(--fs-2xl); @media (max-width: 834px) { font-size: var(--fs-2xl-sp); }} .fs-xl { font-size: var(--fs-xl); @media (max-width: 834px) { font-size: var(--fs-xl-sp); }} .fs-lg { font-size: var(--fs-lg); @media (max-width: 834px) { font-size: var(--fs-lg-sp); }} .fs-md { font-size: var(--fs-md); @media (max-width: 834px) { font-size: var(--fs-md-sp); }} .fs-sm { font-size: var(--fs-sm); @media (max-width: 834px) { font-size: var(--fs-sm-sp); }} .fs-xs { font-size: var(--fs-xs); @media (max-width: 834px) { font-size: var(--fs-xs-sp); }} .fs-2xs { font-size: var(--fs-2xs); @media (max-width: 834px) { font-size: var(--fs-2xs-sp); }} .fs-3xs { font-size: var(--fs-3xs); @media (max-width: 834px) { font-size: var(--fs-3xs-sp); }} .fw-bold { font-weight: var(--fw-bold);} .ff-en { font-family: var(--ff-en); font-weight: var(--fw-default-en); letter-spacing: .05em; &.fw-bold { font-weight: var(--fw-bold-en); }} .ff-en-script { font-family: var(--ff-en-script);}
.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; }} html:has(.is-noscroll) { overflow: hidden;} .l-body { display: grid; grid-template-rows: 1fr auto; position: relative; min-height: 100vh; &.is-noscroll { overflow: hidden; } .l-body__main { grid-row: 1/2; position: relative; &.-stretch { display: grid; grid-template-rows: auto 1fr; } } .l-body__footer { grid-row: 2/3; position: relative; } .l-body__bg { position: fixed; inset: 0; background-size: cover; background-position: top; background-repeat: no-repeat; }} .l-head { .l-head-inner { display: flex; justify-content: space-between; align-items: center; padding-block: var(--spc-32) var(--spc-6); } .l-head__title { display: flex; flex-wrap: wrap; justify-content: end; align-items: center; column-gap: var(--spc-6); @media (max-width: 520px) { width: 100%; justify-content: space-between; } & > * { color: var(--c-black-300); } }} .l-content { display: flex; flex-wrap: wrap; align-content: stretch; &.-bt { border-top: solid .1rem var(--c-wb-blue-dark); } & > * { width: 100%; }} .l-section { padding-block: var(--spc-16); &.-devide { .l-section-inner { @container layoutContainer (min-width: 108rem) { display: grid; grid-template-columns: 32rem 1fr; } } } &.-gray, &.-white { .l-section-head { .l-section__title { color: var(--c-black); } .l-section__titleEn { color: var(--c-wb-blue); mix-blend-mode: normal; } } } &.-gray { background-color: var(--c-black-100); } &.-white { background-color: var(--c-white); } .l-section-head { & + * { margin-top: var(--spc-6); @container layoutContainer (min-width: 108rem) { margin-top: 0; } } .l-section__title { color: var(--c-black-300); } .l-section__titleEn { color: var(--c-wb-blue); mix-blend-mode: screen; } } .l-section-content { &.-bt { margin-top: var(--spc-6); padding-top: var(--spc-6); border-top: solid .1rem var(--c-black-100); } }} .l-breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--spc-8); @media (max-width: 834px) { display: none; } & > li { & > a { color: var(--c-black-300); } }} .l-gnav { position: fixed; inset: 0 0 auto 0; display: flex; justify-content: space-between; align-items: center; padding: var(--spc-9); z-index: var(--z-40); @media (max-width: 834px) { padding: var(--spc-5) var(--spc-6); } &.is-scrolled { padding: var(--spc-6); inset: var(--spc-5) var(--spc-5) auto var(--spc-5); border-radius: .8rem; background-color: rgba(var(--c-black-100-rgb),.9); backdrop-filter: blur(8px); box-shadow: 0 0 8px rgba(var(--c-wb-blue-dark-rgb),.25); @media (max-width: 834px) { inset: var(--spc-3) var(--spc-3) auto var(--spc-3); padding: var(--spc-4); backdrop-filter: none; } .l-gnav-head { & > a { & > img { &:first-of-type { opacity: 0; } &:last-of-type { opacity: 1; } } } } .l-gnav-content { .l-gnav__list { & > li { & > a { .l-gnav__list-head { color: var(--c-black-600); font-weight: var(--fw-bold); } .l-gnav__list-content { color: var(--c-wb-blue); } } } } .l-gnav__navSp { & > label { & > svg { fill: var(--c-black-600); } } } } } .l-gnav-head { & > a { display: block; position: relative; width: 16rem; @media (max-width: 834px) { width: 12rem; } & > img { &:last-of-type { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; } } } } .l-gnav-content { .l-gnav__list { display: flex; column-gap: var(--spc-8); @media (max-width: 834px) { display: none; } & > li { & > a { display: block; .l-gnav__list-head, .l-gnav__list-content { color: var(--c-black-300); } } } } .l-gnav__navSp { display: none; width: 3.2rem; padding: var(--spc-1); @media (max-width: 834px) { display: block; } & > svg { fill: var(--c-black-300); } } }} .l-footer { background-color: var(--c-black); .l-footerNews { padding-block: var(--spc-8); .l-footerNews-inner { @container layoutContainer (min-width: 108rem) { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; grid-template-areas: "content head" "content bottom"; column-gap: var(--spc-8); row-gap: var(--spc-2); } & > .g-head { grid-area: head; display: flex; flex-wrap: wrap; justify-content: end; align-items: center; column-gap: var(--spc-6); @media (max-width: 520px) { justify-content: space-between; } } & > .g-content { grid-area: content; align-self: end; } & > .g-bottom { grid-area: bottom; margin-top: var(--spc-6); @container layoutContainer (min-width: 108rem) { margin-top: 0; } } } } .l-footerNav { padding: var(--spc-8); .l-footerNav-head { & + * { margin-top: var(--spc-4); } } .l-footerNav-content { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--spc-6); & > ul { display: flex; gap: var(--spc-6); } } .l-footerNav__logo { display: block; width: 16rem; @media (max-width: 834px) { width: 12rem; } } .l-footerNav__item { & > a { display: block; } } }} .l-modal { display: grid; grid-template-rows: auto 1fr auto; position: fixed; inset: 0; background-color: var(--c-wb-blue-dark); transform: translateX(100%); z-index: 10001; &.is-active { transform: translateX(0); } .l-modal-head { display: flex; justify-content: space-between; align-items: center; padding: var(--spc-5) var(--spc-6); } .l-modal-content { display: grid; align-items: center; position: relative; padding-inline: var(--spc-16); &:before { content: ""; position: absolute; inset: 0; background-color: rgba(var(--c-wb-blue-dark-rgb), .2); mix-blend-mode: multiply; } } .l-modal-bottom { padding: var(--spc-8); background-color: var(--c-black); } .l-modal__close { display: block; padding: var(--spc-1); cursor: pointer; & > svg { width: 2.4rem; fill: var(--c-black-300); } } .l-modal__logo { display: block; width: 12rem; } .l-modal__nav { position: relative; & > li { padding-block: var(--spc-4); & > a { display: block; position: relative; & > span { display: block; align-self: center; &:first-of-type { color: var(--c-black-600); } &:last-of-type { color: var(--c-black-300); } } &:before, &:after { content: ""; position: absolute; right: 0; bottom: .4rem; height: .1rem; background-color: var(--c-black-300); } &:before { width: 5.6rem; } &:after { width: .8rem; transform: rotate(30deg); transform-origin: right bottom; } } & + li { border-top: solid .1rem var(--c-wb-blue-dark); } } } .l-modal__title { display: flex; align-items: center; gap: var(--spc-4); & > * { color: var(--c-wb-blue-dark); } & + * { margin-top: var(--spc-6); } } .l-modal__services { & > span { display: block; color: var(--c-wb-blue-dark); & + * { margin-top: var(--spc-3); } } & > ul { & > li { display: flex; justify-content: space-between; align-items: center; & > a { display: flex; align-items: center; & > img { width: 9.6rem; } } & + li { margin-top: var(--spc-4); } } } & + * { margin-top: var(--spc-6); } } .l-modal__link { display: flex; flex-wrap: wrap; gap: var(--spc-2); & > li { & > a { display: block; & > * { color: var(--c-wb-blue-dark); } } } & + * { margin-top: var(--spc-6); } } .l-modal__copyright { color: var(--c-wb-blue-dark); }} .l-wpcontents { * { & + * { margin-top: var(--spc-2); } } h2 { font-size: var(--fs-2xl); @container (max-width: 834px) { font-size: var(--fs-2xl-sp); } } h3 { display: grid; grid-template-columns: auto 1fr; gap: var(--spc-4); margin-top: var(--spc-8); color: var(--c-wb-blue-dark); font-size: var(--fs-xl); @container (max-width: 834px) { font-size: var(--fs-xl-sp); } &:after { content: ""; align-self: center; height: .1rem; background-color: var(--c-wb-blue-dark); } } h4 { font-size: var(--fs-md); @container (max-width: 834px) { font-size: var(--fs-md-sp); } } h5 { font-size: var(--fs-2xs); @container (max-width: 834px) { font-size: var(--fs-2xs-sp); } } h6 { font-size: var(--fs-3xs); @container (max-width: 834px) { font-size: var(--fs-3xs-sp); } } p, li, th, td { font-size: var(--fs-md); @container (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-btn { display: inline-grid; grid-template-columns: 1fr 4.8rem; grid-template-rows: auto auto; grid-template-areas: "en en" "title line"; column-gap: var(--spc-2); row-gap: var(--spc-3); min-width: 27.2rem; padding: var(--spc-3) var(--spc-4); border: solid .1rem var(--c-wb-blue-dark); @media (max-width: 520px) { display: grid; min-width: auto; width: 100%; } &.-whiteOutline { color: var(--c-black-300); border-color: var(--c-black-300); * { color: var(--c-black-300); } .g-line { background-color: var(--c-black-300); &:after { background-color: var(--c-black-300); } } } .g-en { grid-area: en; text-align: right; } .g-title { grid-area: title; } .g-line { grid-area: line; align-self: end; position: relative; height: .1rem; background-color: var(--c-wb-blue-dark); transform: translateY(calc(var(--spc-1) * -1)); &:after { content: ""; position: absolute; right: 0; bottom: 0; width: .8rem; height: .1rem; background-color: var(--c-wb-blue-dark); transform: rotate(30deg); transform-origin: right bottom; } }} .c-btnUnderLine { display: inline-grid; grid-template-columns: 2.4rem 1fr; grid-template-rows: auto auto; grid-template-areas: "icon en" "title title"; column-gap: var(--spc-2); row-gap: var(--spc-3); position: relative; min-width: 27.2rem; padding: var(--spc-3) var(--spc-4); border-bottom: solid .1rem; @media (max-width: 520px) { display: grid; min-width: auto; width: 100%; } &:after { content: ""; position: absolute; right: 0; bottom: -.1rem; width: .8rem; height: .1rem; background-color: var(--c-wb-blue-dark); transform: rotate(30deg); transform-origin: right bottom; } &.-whiteOutline { color: var(--c-black-300); border-color: var(--c-black-300); * { color: var(--c-black-300); } svg { fill: var(--c-black-300); } &:after { background-color: var(--c-black-300); } } .g-icon { grid-area: icon; position: relative; & > svg { position: absolute; top: 0; left: 0; width: 2.4rem; } } .g-en { grid-area: en; text-align: right; } .g-title { grid-area: title; }} .c-btnContacts { position: relative; width: 100%; max-width: 32rem; padding: var(--spc-8) var(--spc-5) var(--spc-4); border: solid .1rem var(--c-black); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-align: left; color: var(--c-black); background-color: transparent; &:hover { color: var(--c-black-300); background-color: var(--c-black); } @media (max-width: 834px) { font-size: var(--fs-xs-sp); }}
.c-news { max-width: 64rem; border-bottom: solid .1rem var(--c-wb-blue-dark); & > a { display: grid; grid-template-columns: 14.8rem 1fr 6.4rem; @media (max-width: 834px) { grid-template-columns: 9.6rem 1fr 5.6rem; } & > * { align-self: center; } & > .g-head { padding-inline: var(--spc-6); @media (max-width: 834px) { padding-inline: 0 var(--spc-4); } } & > .g-content { border-left: solid .1rem var(--c-wb-blue-dark); padding-inline: var(--spc-6); @media (max-width: 834px) { padding-inline: 0; border: none; } } & > .g-bottom { padding: var(--spc-5); svg { fill: var(--c-wb-blue-dark); } } }}
.c-social { display: flex; align-items: center; gap: var(--spc-3); mix-blend-mode: hard-light; &.-modal { mix-blend-mode: normal; .c-social-head { color: var(--c-wb-blue-dark); } .c-social-content { display: flex; align-items: center; gap: var(--spc-1); & > li { & > a { display: block; width: 1.6rem; fill: var(--c-wb-blue-dark); } } } } .c-social-head { color: var(--c-wb-blue-light); } .c-social-content { display: flex; align-items: center; gap: var(--spc-1); & > li { & > a { display: block; width: 2.4rem; fill: var(--c-wb-blue-light); } } }}
.p-ocHero { position: relative; padding-block: var(--spc-12) var(--spc-36); overflow: hidden; @media (max-width: 834px) { padding-block: var(--spc-12); } .p-ocHero-inner { position: relative; } .p-ocHero__bg { position: absolute; inset: 0; background-size: contain; background-position: top; background-repeat: no-repeat; transform: translateX(35%); } .p-ocHero__mission, .p-ocHero__missionEn { color: var(--c-wb-blue); } .p-ocHero__mission { & + * { margin-top: var(--spc-6); } } .p-ocHero__title, .p-ocHero__title span, .p-ocHero__description p { color: var(--c-black-100); } .p-ocHero__title { & + * { margin-top: var(--spc-6); } } .p-ocHero__description { max-width: 52rem; p { & + p { margin-top: var(--spc-2); } } }} .p-ocSection { padding-bottom: var(--spc-12); background-color: var(--c-white); .p-ocSection-head { & + * { border-top: solid .1rem var(--c-black-300); } } .p-ocSection__title { display: flex; gap: var(--spc-10); padding-block: var(--spc-6); @media (max-width: 834px) { gap: var(--spc-4); } .p-ocSection__title-head { display: flex; flex-wrap: wrap; align-content: center; width: 16rem; border-right: solid .1rem var(--c-black-300); border-left: solid .1rem var(--c-black-300); @media (max-width: 834px) { align-content: start; width: auto; padding-top: var(--spc-1); border-right: none; border-left: none; } * { width: 100%; text-align: center; line-height: 1em; @media (max-width: 834px) { text-align: left; } } } .p-ocSection__title-content { p { color: var(--c-wb-blue); } } } .p-ocSection__contents { display: grid; grid-template-columns: 1fr 32rem; grid-template-rows: auto auto; grid-template-areas: "solution solution" "content thumb"; @media (max-width: 1024px) { grid-template-columns: 20rem 1fr; grid-template-areas: "thumb solution" "content content"; column-gap: var(--spc-12); } @media (max-width: 834px) { grid-template-columns: auto; grid-template-rows: auto auto auto; grid-template-areas: "thumb" "solution" "content"; column-gap: var(--spc-10); } & > .g-solution { grid-area: solution; display: flex; align-items: center; position: relative; padding-block: var(--spc-6); @media (max-width: 1024px) { flex-wrap: wrap; align-content: center; } @media (max-width: 834px) { padding-block: var(--spc-4); } .g-solution-head, .g-solution-content { padding-block: var(--spc-6); color: var(--c-wb-blue); @media (max-width: 1024px) { width: 100%; padding-block: 0; } } .g-solution-head { padding-right: var(--spc-12); @media (max-width: 1024px) { padding-right: 0; } @media (max-width: 834px) { text-align: center; } & + * { @media (max-width: 1024px) { margin-top: var(--spc-2); } } } .g-solution-content { position: relative; padding-left: var(--spc-8); @media (max-width: 1024px) { padding-left: var(--spc-6); } &:before, &:after { content: ""; position: absolute; width: .1rem; height: 2rem; background-color: var(--c-black-300); @media (max-width: 1024px) { height: .8rem; } } &:before { inset: auto auto 50% 0; transform-origin: bottom left; transform: rotate(-45deg); @media (max-width: 1024px) { inset: auto auto 50% var(--spc-2); } } &:after { inset: calc(50% - .1rem) auto auto 0; transform-origin: top left; transform: rotate(45deg); @media (max-width: 1024px) { inset: calc(50% - .1rem) auto auto var(--spc-2); } } } } & > .g-content { grid-area: content; background-color: var(--c-black-100); } & > .g-thumb { grid-area: thumb; display: flex; align-items: center; @media (max-width: 834px) { padding-top: var(--spc-4); } & > img { transform: scale(1.3); @media (max-width: 1024px) { transform: scale(1.1); } @media (max-width: 834px) { width: 24rem; margin-inline: auto; transform: none; } } } }} .p-ocIssue { max-width: 52rem; padding: var(--spc-8) var(--spc-10); @media (max-width: 1024px) { max-width: none; } @media (max-width: 520px) { padding: var(--spc-4) var(--spc-5); } .p-ocIssue-head { & + * { margin-top: var(--spc-2); } } .p-ocIssue-content { & > p { & + p { margin-top: var(--spc-1); } & + section { margin-top: var(--spc-3); } } } .p-ocIssue__title { color: var(--c-wb-blue); } .p-ocIssue__point { position: relative; padding: var(--spc-5) var(--spc-6) var(--spc-5) var(--spc-20); background-color: var(--c-white); @media (max-width: 834px) { padding: var(--spc-5) var(--spc-6) var(--spc-5) var(--spc-16); } @media (max-width: 520px) { padding: var(--spc-3) var(--spc-4) var(--spc-3) var(--spc-12); } &:before { content: ""; position: absolute; inset: 0 auto 0 var(--spc-10); width: .8rem; height: .8rem; margin: auto; border-radius: 100%; background-color: var(--c-wb-blue); box-shadow: 0 0 .8rem var(--c-wb-blue); transform: translateX(-50%); @media (max-width: 834px) { inset: 0 auto 0 var(--spc-8); } @media (max-width: 520px) { inset: 0 auto 0 var(--spc-6); } } h5 { color: var(--c-wb-blue); } & + .p-ocIssue__point { margin-top: var(--spc-2); } } .p-ocIssue__result { display: grid; grid-template-columns: 6rem 1fr; gap: var(--spc-5); padding-block: var(--spc-4); @media (max-width: 834px) { grid-template-columns: 4.4rem 1fr; } @media (max-width: 520px) { grid-template-columns: 3.6rem 1fr; gap: var(--spc-3); } & > .g-head, & > .g-content { color: var(--c-wb-blue); } & > .g-head { align-self: center; position: relative; padding-bottom: var(--spc-1); @media (max-width: 520px) { padding-bottom: var(--spc-2); } &:before, &:after { content: ""; position: absolute; height: .1rem; background-color: var(--c-wb-blue); } &:before { inset: auto 0 0 0; } &:after { inset: auto 0 0 auto; width: .8rem; transform-origin: right bottom; transform: rotate(30deg); } } }}