@charset "UTF-8"; .js-breakpointSp { width: 750px; } .js-viewportWidthSp { width: 375px; } .js-viewportWidthPc { width: 1280px; } @-webkit-keyframes arrow-slide-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 40% { -webkit-transform: translateX(80%); transform: translateX(80%); opacity: 0; } 41% { -webkit-transform: translateX(-60%); transform: translateX(-60%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes arrow-slide-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 40% { -webkit-transform: translateX(80%); transform: translateX(80%); opacity: 0; } 41% { -webkit-transform: translateX(-60%); transform: translateX(-60%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-webkit-keyframes arrow-slide-left { 0% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } 40% { -webkit-transform: translateX(-80%) rotate(180deg); transform: translateX(-80%) rotate(180deg); opacity: 0; } 41% { -webkit-transform: translateX(60%) rotate(180deg); transform: translateX(60%) rotate(180deg); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } } @keyframes arrow-slide-left { 0% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } 40% { -webkit-transform: translateX(-80%) rotate(180deg); transform: translateX(-80%) rotate(180deg); opacity: 0; } 41% { -webkit-transform: translateX(60%) rotate(180deg); transform: translateX(60%) rotate(180deg); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } } /*---------------------------------------------------------------- reset -----------------------------------------------------------------*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; background-repeat: no-repeat; text-align: inherit; color: inherit; } th, td { font-weight: normal; color: inherit; } /* h1, h2, h3, h4, h5, h6 { line-height: 1; } */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } a { margin: 0; padding: 0; background: transparent; } ins { background-color: #ff9; color: #000; text-decoration: none; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } table { border-collapse: collapse; border-spacing: 0; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ddd; margin: 0; padding: 0; } input, select { vertical-align: middle; } img, svg { vertical-align: middle; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } main { display: block; } /* Form ______________________________________________*/ input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; font-family: inherit; } /* ios ______________________________________________*/ * { -webkit-overflow-scrolling: touch; } /* IE ______________________________________________*/ ::-ms-expand { display: none; } ::-moz-focusring { color: transparent; text-shadow: 0 0 0 #828c9a; } /* clearfix ______________________________________________*/ .clearfix:after { content: " "; display: block; clear: both; } /* bugfix ______________________________________________*/ body { -webkit-text-size-adjust: 100%; } /*---------------------------------------------------------------- Icons -----------------------------------------------------------------*/ /*---------------------------------------------------------------- アイコンユーティリティ（mask-image） 使い方: HTML : SCSS : &::after { content: ""; @extend .u-icon-arrow; background-color: red; } 色は background-color で指定。デフォルトは currentColor。 -----------------------------------------------------------------*/ .u-icon-blank, .f-bottom-nav a[target=_blank]::after, body.post-type-news .is-root-container a[target=_blank]::after, .c-post a[target=_blank]::after, body.post-type-insight .is-root-container a[target=_blank]::after, .c-post-insight a[target=_blank]::after, .u-icon-mail, .f-cta__block--contact .f-cta__link::after, .u-icon-download, .f-cta__link::after, .u-icon-arrow-left, .u-icon-arrow, .c-nav-solution__menu > li a::after, .c-card-solutions__title::after { display: inline-block; width: 20px; height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .u-icon-arrow, .c-nav-solution__menu > li a::after, .c-card-solutions__title::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 10.0034H5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L15 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 10.0034H5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L15 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .u-icon-arrow-left { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.0034H15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L5 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.0034H15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L5 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .u-icon-download, .f-cta__link::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.0035V17.5H17.5V10' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 9.58334L10 13.3333L6.25 9.58334' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.99658 2.5V13.3333' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 10.0035V17.5H17.5V10' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.75 9.58334L10 13.3333L6.25 9.58334' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.99658 2.5V13.3333' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .u-icon-mail, .f-cta__block--contact .f-cta__link::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3333 10V3.75H9.99996H1.66663V10V16.25H9.99996' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3333 14.1667H12.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.25 12.0833L18.3333 14.1667L16.25 16.25' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.66663 3.75L9.99996 10L18.3333 3.75' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M18.3333 10V3.75H9.99996H1.66663V10V16.25H9.99996' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M18.3333 14.1667H12.5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.25 12.0833L18.3333 14.1667L16.25 16.25' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1.66663 3.75L9.99996 10L18.3333 3.75' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .u-icon-blank, .f-bottom-nav a[target=_blank]::after, body.post-type-news .is-root-container a[target=_blank]::after, .c-post a[target=_blank]::after, body.post-type-insight .is-root-container a[target=_blank]::after, .c-post-insight a[target=_blank]::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91699 4.16683V2.91683C7.91699 2.45659 8.29008 2.0835 8.75033 2.0835H17.0837C17.5439 2.0835 17.917 2.45659 17.917 2.91683V12.0835C17.917 12.5437 17.5439 12.9168 17.0837 12.9168H15.417' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.2497 7.5H2.91634C2.4561 7.5 2.08301 7.8731 2.08301 8.33333V16.6667C2.08301 17.1269 2.4561 17.5 2.91634 17.5H11.2497C11.7099 17.5 12.083 17.1269 12.083 16.6667V8.33333C12.083 7.8731 11.7099 7.5 11.2497 7.5Z' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.08301 10.4165V14.5832' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5H9.16667' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.91699 4.16683V2.91683C7.91699 2.45659 8.29008 2.0835 8.75033 2.0835H17.0837C17.5439 2.0835 17.917 2.45659 17.917 2.91683V12.0835C17.917 12.5437 17.5439 12.9168 17.0837 12.9168H15.417' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.2497 7.5H2.91634C2.4561 7.5 2.08301 7.8731 2.08301 8.33333V16.6667C2.08301 17.1269 2.4561 17.5 2.91634 17.5H11.2497C11.7099 17.5 12.083 17.1269 12.083 16.6667V8.33333C12.083 7.8731 11.7099 7.5 11.2497 7.5Z' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.08301 10.4165V14.5832' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 12.5H9.16667' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /*---------------------------------------------------------------- base -----------------------------------------------------------------*/ :root { --color-bg-white: #fffefa; --color-accent: var(--wp--preset--color--color-accent, #57c7ec); --color-attention: var(--wp--preset--color--color-attention, #fb3640); --color-bg-beige: var(--wp--preset--color--color-bg-beige, #f8f5ec); --color-bg-bule: var(--wp--preset--color--color-bg-bule, #f4fbff); --color-bg-gray: var(--wp--preset--color--color-bg-gray, #f5f5f7); --color-border: var(--wp--preset--color--color-border, #dddddd); --color-current-bule: var(--wp--preset--color--color-current-bule, #005a93); --color-heading: var(--wp--preset--color--color-heading, #000000); --color-p: var(--wp--preset--color--color-p, #04080f); --color-placeholder: var(--wp--preset--color--color-placeholder, #919191); --color-primary: var(--wp--preset--color--color-primary, #00a9a5); --color-primary-dark: var(--wp--preset--color--color-primary-dark, #208b88); --color-secondary: var(--wp--preset--color--color-secondary, #0052a5); --color-secondary-dark: var(--wp--preset--color--color-secondary-dark, #40668d); --font-size-xxs: var(--wp--preset--font-size--font-size-xxs, 11px); --font-size-xs: var(--wp--preset--font-size--font-size-xs, 12px); --font-size-sm: var(--wp--preset--font-size--font-size-sm, 14px); --font-size-md: var(--wp--preset--font-size--font-size-md, 16px); --font-size-lg: var(--wp--preset--font-size--font-size-lg, 20px); --font-size-xl: var(--wp--preset--font-size--font-size-xl, 24px); --font-size-2xl: var(--wp--preset--font-size--font-size-2xl, 32px); --font-size-3xl: var(--wp--preset--font-size--font-size-3xl, 40px); --font-size-4xl: var(--wp--preset--font-size--font-size-4xl, 48px); --font-size-5xl: var(--wp--preset--font-size--font-size-5xl, 52px); --space-xxs: var(--wp--preset--spacing--space-xxs, 4px); --space-xs: var(--wp--preset--spacing--space-xs, 8px); --space-sm: var(--wp--preset--spacing--space-sm, 12px); --space-md: var(--wp--preset--spacing--space-md, 16px); --space-lg: var(--wp--preset--spacing--space-lg, 20px); --space-xl: var(--wp--preset--spacing--space-xl, 24px); --space-2xl: var(--wp--preset--spacing--space-2xl, var(--wp--preset--spacing--space-2-xl, 32px)); --space-3xl: var(--wp--preset--spacing--space-3xl, var(--wp--preset--spacing--space-3-xl, 40px)); --space-4xl: var(--wp--preset--spacing--space-4xl, var(--wp--preset--spacing--space-4-xl, 48px)); --space-5xl: var(--wp--preset--spacing--space-5xl, var(--wp--preset--spacing--space-5-xl, 56px)); --space-6xl: var(--wp--preset--spacing--space-6xl, var(--wp--preset--spacing--space-6-xl, 64px)); --space-7xl: var(--wp--preset--spacing--space-7xl, var(--wp--preset--spacing--space-7-xl, 80px)); --space-8xl: var(--wp--preset--spacing--space-8xl, var(--wp--preset--spacing--space-8-xl, 96px)); --space-9xl: var(--wp--preset--spacing--space-9xl, var(--wp--preset--spacing--space-9-xl, 120px)); --space-10xl: var(--wp--preset--spacing--space-10xl, var(--wp--preset--spacing--space-10-xl, 128px)); --space-11xl: var(--wp--preset--spacing--space-11xl, var(--wp--preset--spacing--space-11-xl, 140px)); --wp--preset--spacing--space-2xl: 32px; --wp--preset--spacing--space-2-xl: 32px; --wp--preset--spacing--space-3xl: 40px; --wp--preset--spacing--space-3-xl: 40px; --wp--preset--spacing--space-4xl: 48px; --wp--preset--spacing--space-4-xl: 48px; --wp--preset--spacing--space-5xl: 56px; --wp--preset--spacing--space-5-xl: 56px; --wp--preset--spacing--space-6xl: 64px; --wp--preset--spacing--space-6-xl: 64px; --wp--preset--spacing--space-7xl: 80px; --wp--preset--spacing--space-7-xl: 80px; --wp--preset--spacing--space-8xl: 96px; --wp--preset--spacing--space-8-xl: 96px; --wp--preset--spacing--space-9xl: 120px; --wp--preset--spacing--space-9-xl: 120px; --wp--preset--spacing--space-10xl: 128px; --wp--preset--spacing--space-10-xl: 128px; --wp--preset--spacing--space-11xl: 140px; --wp--preset--spacing--space-11-xl: 140px; } html { font-size: 62.5%; /* 1px = .1rem */ } @media screen and (max-width: 750px) { html { max-width: 100%; overflow-x: hidden; } @supports (overflow: clip) { html { overflow-x: clip; } } } body { background-color: var(--color-bg-white); color: var(--wp--preset--color--color-p); } body.wp-admin { z-index: 0; overflow: hidden; } @media screen and (max-width: 750px) { body { max-width: 100%; overflow-x: hidden !important; } @supports (overflow: clip) { body { overflow-x: clip !important; } } } h1 { font-size: var(--font-size-5xl); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { h1 { font-size: var(--font-size-3xl); } } h2 { font-size: var(--font-size-3xl); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { h2 { font-size: var(--font-size-2xl); } } h3 { font-size: var(--font-size-2xl); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { h3 { font-size: var(--font-size-xl); } } h4 { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { h4 { font-size: var(--font-size-lg); } } h5 { font-size: var(--font-size-lg); font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { h5 { font-size: var(--font-size-md); } } svg { width: 100%; height: auto; } a { -webkit-transition: all 0.2s; transition: all 0.2s; color: inherit; } a:where(:not(.wp-element-button)) { text-decoration: none; } strong { color: var(--wp--preset--color--color-primary); } .shadow-main-col { -webkit-box-shadow: var(--wp--preset--shadow--shadow-main-col); box-shadow: var(--wp--preset--shadow--shadow-main-col); } .shadow-black { -webkit-box-shadow: var(--wp--preset--shadow--shadow-black); box-shadow: var(--wp--preset--shadow--shadow-black); } figure, img { display: block; max-width: 100%; width: 100%; } i.fa { margin: 0 0.3em; } mark { color: var(--wp--preset--color--color-primary); } hr { border-top: 1px solid var(--wp--preset--color--color-border) !important; } table { width: 100%; } table th { text-align: left; } rt { line-height: 0; } .wp-block-table { width: 100%; } /* Tel click off ______________________________________________*/ a[href^="tel:"] { pointer-events: none; } @media screen and (max-width: 750px) { a[href^="tel:"] { pointer-events: auto; } } /* Slick 高さ揃える（縦方向Slickの時バグるので注意） ______________________________________________*/ .slick-track { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .slick-slide { height: auto !important; } /*---------------------------------------------------------------- layout -----------------------------------------------------------------*/ /* inner ______________________________________________*/ .l-outer { padding-left: var(--space-xl, 24px); padding-right: var(--space-xl, 24px); } @media screen and (max-width: 750px) { .l-outer { padding-left: var(--space-xl, 24px); padding-right: var(--space-xl, 24px); } } .l-inner-a { max-width: 1297px; margin-left: auto; margin-right: auto; } .l-inner-b, .p-news-archive, .c-case-section, .l-col2, .l-container-a { max-width: 1169px; margin-left: auto; margin-right: auto; } .l-inner-c { max-width: 912px; margin-left: auto; margin-right: auto; } .l-container-a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px) 0 var(--space-6xl, 64px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .l-container-a { padding: var(--space-2xl, 32px) var(--space-xl, 24px); } } .l-col2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 0 128px; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .l-col2 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .l-col2__main { max-width: 805px; width: 72.850678733%; } @media screen and (max-width: 750px) { .l-col2__main { width: 100%; padding: 24px; } } .l-col2__sidebar { width: 27.149321267%; padding: var(--space-2xl, 32px) 0; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .l-col2__sidebar { width: 100%; padding: 24px; } } .l-full { width: 100vw; margin-left: calc(50% - 50vw) !important; } @media screen and (max-width: 750px) { .l-full--sp { width: 100vw; margin-left: calc(50% - 50vw) !important; } } /* WordPress 自動生成レイアウトスタイルの調整 ______________________________________________*/ .is-layout-flex.is-vertical { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } .l-section, .l-section--top { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-6xl, 64px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .l-section, .l-section--top { padding: 0 24px 32px; } } .l-section--top { padding: var(--space-6xl, 64px) var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .l-section--top { padding: 24px; } } .l-section-b { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); padding-top: var(--space-6xl, 64px); padding-bottom: var(--space-10xl, 128px); } .l-section-b > * { width: 100%; } @media screen and (max-width: 750px) { .l-section-b { padding: 32px 20px 64px; gap: 32px; } } .alignfull { width: 100vw; margin-left: calc(50% - 50vw) !important; } @media screen and (max-width: 750px) { .wp-block-buttons { width: 100%; } } @media screen and (max-width: 750px) { .wp-block-button { width: 100%; } } .wp-block-post-terms__separator { display: none !important; } /*---------------------------------------------------------------- ブロックスタイル（is-style-*） -----------------------------------------------------------------*/ .is-style-p, body { font-family: var(--wp--preset--font-family--noto-sans-jp); font-size: var(--wp--preset--font-size--font-size-md); font-weight: 400; line-height: 1.8; } .is-style-font-size-xxs { font-size: var(--wp--preset--font-size--font-size-xxs); } .is-style-font-size-xs { font-size: var(--wp--preset--font-size--font-size-xs); } .is-style-font-size-sm { font-size: var(--wp--preset--font-size--font-size-sm); } .is-style-font-size-md { font-size: var(--wp--preset--font-size--font-size-md); } .is-style-font-size-lg { font-size: var(--wp--preset--font-size--font-size-lg); } .is-style-font-size-xl { font-size: var(--wp--preset--font-size--font-size-xl); } .is-style-font-size-2xl { font-size: var(--wp--preset--font-size--font-size-2xl); } .is-style-font-size-3xl { font-size: var(--wp--preset--font-size--font-size-3xl); } .is-style-font-size-4xl { font-size: var(--wp--preset--font-size--font-size-4xl); } .is-style-font-size-5xl { font-size: var(--wp--preset--font-size--font-size-5xl); font-family: var(--wp--preset--font-family--inter); font-weight: 700; line-height: 1.1; } /*---------------------------------------------------------------- wp-block-button カスタムスタイル 構造:
テキスト
::after で右側のアイコンエリアを表現 -----------------------------------------------------------------*/ @keyframes arrow-slide-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 40% { -webkit-transform: translateX(80%); transform: translateX(80%); opacity: 0; } 41% { -webkit-transform: translateX(-60%); transform: translateX(-60%); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes arrow-slide-left { 0% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } 40% { -webkit-transform: translateX(-80%) rotate(180deg); transform: translateX(-80%) rotate(180deg); opacity: 0; } 41% { -webkit-transform: translateX(60%) rotate(180deg); transform: translateX(60%) rotate(180deg); opacity: 0; } 100% { -webkit-transform: translateX(0) rotate(180deg); transform: translateX(0) rotate(180deg); opacity: 1; } } @-webkit-keyframes arrow-slide-right-bg { 0% { background-position: center; } 40% { background-position: calc(50% + 40px) center; } 41% { background-position: calc(50% - 30px) center; } 100% { background-position: center; } } @keyframes arrow-slide-right-bg { 0% { background-position: center; } 40% { background-position: calc(50% + 40px) center; } 41% { background-position: calc(50% - 30px) center; } 100% { background-position: center; } } @-webkit-keyframes arrow-slide-left-bg { 0% { background-position: center; } 40% { background-position: calc(50% - 40px) center; } 41% { background-position: calc(50% + 30px) center; } 100% { background-position: center; } } @keyframes arrow-slide-left-bg { 0% { background-position: center; } 40% { background-position: calc(50% - 40px) center; } 41% { background-position: calc(50% + 30px) center; } 100% { background-position: center; } } @-webkit-keyframes arrow-slide-bottom-bg { 0% { background-position: center; } 40% { background-position: center calc(50% + 40px); } 41% { background-position: center calc(50% - 30px); } 100% { background-position: center; } } @keyframes arrow-slide-bottom-bg { 0% { background-position: center; } 40% { background-position: center calc(50% + 40px); } 41% { background-position: center calc(50% - 30px); } 100% { background-position: center; } } .wp-block-button.is-style-btn-con .wp-block-button__link, .wp-block-button.is-style-btn-dl .wp-block-button__link, .wp-block-button.is-style-btn-arrow-white .wp-block-button__link, .wp-block-button .wp-block-button__link, .wp-block-button.is-style-btn-arrow .wp-block-button__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 292px; height: 50px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-sm, 14px); font-style: normal; font-weight: 700; line-height: 100%; /* 14px */ padding: 0 52px 0 0; z-index: 0; position: relative; background-color: transparent; } @media screen and (max-width: 750px) { .wp-block-button.is-style-btn-con .wp-block-button__link, .wp-block-button.is-style-btn-dl .wp-block-button__link, .wp-block-button.is-style-btn-arrow-white .wp-block-button__link, .wp-block-button .wp-block-button__link, .wp-block-button.is-style-btn-arrow .wp-block-button__link { width: 100%; } } .wp-block-button .wp-block-button__link:hover { background-color: transparent !important; } .wp-block-button .wp-block-button__link:hover::after { -webkit-animation: arrow-slide-right-bg 0.4s ease-in-out forwards; animation: arrow-slide-right-bg 0.4s ease-in-out forwards; } .wp-block-button.is-style-btn-con .wp-block-button__link::before, .wp-block-button.is-style-btn-dl .wp-block-button__link::before, .wp-block-button.is-style-btn-arrow-white .wp-block-button__link::before, .wp-block-button .wp-block-button__link::before, .wp-block-button.is-style-btn-arrow .wp-block-button__link::before { content: ""; display: block; width: calc(100% - 52px); height: 100%; border-radius: 4px; background: var(--color-primary, #00a9a5); z-index: -1; position: absolute; top: 0; left: 0; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .wp-block-button.is-style-btn-con .wp-block-button__link::after, .wp-block-button.is-style-btn-dl .wp-block-button__link::after, .wp-block-button.is-style-btn-arrow-white .wp-block-button__link::after, .wp-block-button .wp-block-button__link::after, .wp-block-button.is-style-btn-arrow .wp-block-button__link::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 50px; height: 50px; padding: var(--space-xs, 8px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 4px; background: var(--color-primary-dark, #208b88); background-repeat: no-repeat; background-position: center; background-size: 20px auto; } @media screen and (hover: hover) and (min-width: 751px) { .wp-block-button .wp-block-button__link:hover::before { background-color: #5dc1bf !important; } } .wp-block-button.is-style-btn-arrow-white .wp-block-button__link::after, .wp-block-button .wp-block-button__link::after, .wp-block-button.is-style-btn-arrow .wp-block-button__link::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M15%2010.0034H5'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M10%205L15%2010L10%2015'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); } .wp-block-button.is-style-btn-dl .wp-block-button__link::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M2.5%2010.0035V17.5H17.5V10'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M13.75%209.58334L10%2013.3333L6.25%209.58334'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M9.99658%202.5V13.3333'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); } .wp-block-button.is-style-btn-con .wp-block-button__link::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M18.3333%2010V3.75H9.99996H1.66663V10V16.25H9.99996'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M18.3333%2014.1667H12.5'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M16.25%2012.0833L18.3333%2014.1667L16.25%2016.25'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M1.66663%203.75L9.99996%2010L18.3333%203.75'%20stroke='white'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); } .wp-block-button .wp-block-button__link::before, .wp-block-button.is-style-btn-arrow .wp-block-button__link::before { background-color: var(--wp--preset--color--color-primary); } .wp-block-button .wp-block-button__link::after, .wp-block-button.is-style-btn-arrow .wp-block-button__link::after { background-color: var(--wp--preset--color--color-primary-dark); } .wp-block-button .wp-block-button__link:hover, .wp-block-button.is-style-btn-arrow .wp-block-button__link:hover { background-color: var(--wp--preset--color--color-primary-dark); } .wp-block-button.is-style-btn-arrow-white .wp-block-button__link { background-color: transparent; border: 1px solid var(--wp--preset--color--color-white); } .wp-block-button.is-style-btn-arrow-white .wp-block-button__link::after { background-color: rgba(255, 255, 255, 0.2); } .wp-block-button.is-style-btn-dl .wp-block-button__link { font-size: var(--wp--preset--font-size--font-size-xs); width: 192px; } .wp-block-button.is-style-btn-dl .wp-block-button__link::before { background-color: var(--wp--preset--color--color-secondary); } .wp-block-button.is-style-btn-dl .wp-block-button__link::after { background-color: var(--wp--preset--color--color-secondary-dark); } @media screen and (hover: hover) and (min-width: 751px) { .wp-block-button.is-style-btn-dl .wp-block-button__link:hover::before { background-color: #2e7bc9 !important; } .wp-block-button.is-style-btn-dl .wp-block-button__link:hover::after { -webkit-animation: none; animation: none; } } .wp-block-button.is-style-btn-con .wp-block-button__link { font-size: var(--wp--preset--font-size--font-size-xs); width: 192px; } .wp-block-button.is-style-btn-con .wp-block-button__link::before { background-color: var(--wp--preset--color--color-primary); } .wp-block-button.is-style-btn-con .wp-block-button__link::after { background-color: var(--wp--preset--color--color-primary-dark); } @media screen and (hover: hover) and (min-width: 751px) { .wp-block-button.is-style-btn-con .wp-block-button__link:hover::after { -webkit-animation: none; animation: none; } } .wp-block-button.is-style-btn-back .wp-block-button__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; width: 292px; height: 50px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-sm, 14px); font-weight: 700; line-height: 100%; padding: 0 0 0 52px; z-index: 0; position: relative; background-color: transparent; border-radius: 0; } @media screen and (max-width: 750px) { .wp-block-button.is-style-btn-back .wp-block-button__link { width: 100%; } } .wp-block-button.is-style-btn-back .wp-block-button__link:hover { background-color: transparent !important; } .wp-block-button.is-style-btn-back .wp-block-button__link:hover::before { background-color: #04080f !important; -webkit-animation: arrow-slide-left-bg 0.4s ease-in-out forwards; animation: arrow-slide-left-bg 0.4s ease-in-out forwards; } .wp-block-button.is-style-btn-back .wp-block-button__link::before { content: ""; position: absolute; left: 0; top: 0; width: 50px; height: 50px; border-radius: 4px; background-color: #04080f; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10.0034H15' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L5 10L10 15' stroke='white' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px auto; z-index: 1; } .wp-block-button.is-style-btn-back .wp-block-button__link::after { content: ""; position: absolute; right: 0; top: 0; width: calc(100% - 52px); height: 100%; border-radius: 4px; background-color: #5d5d5d; z-index: -1; background-image: none; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .wp-block-button.is-style-btn-back .wp-block-button__link strong { color: currentColor; } .wp-block-button.is-style-btn-text .wp-block-button__link { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; width: auto; height: auto; padding: 0; color: var(--wp--preset--color--color-primary-dark); font-family: "Noto Sans JP"; font-size: var(--wp--preset--font-size--font-size-md); font-weight: 700; line-height: 1; background-color: transparent; position: static; z-index: auto; } .wp-block-button.is-style-btn-text .wp-block-button__link:hover { color: var(--wp--preset--color--color-primary); background-color: transparent !important; } .wp-block-button.is-style-btn-text .wp-block-button__link:hover::after { -webkit-transform: translateX(10px); transform: translateX(10px); } .wp-block-button.is-style-btn-text .wp-block-button__link::before { display: none; } .wp-block-button.is-style-btn-text .wp-block-button__link::after { content: ""; position: static; display: inline-block; width: 20px; height: 20px; padding: 0; border-radius: 0; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M15%2010.0034H5'%20stroke='%23208B88'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M10%205L15%2010L10%2015'%20stroke='%23208B88'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: none; bottom: auto; left: auto; max-height: 100%; position: relative; right: auto; color: currentColor; margin: 0; overflow: auto; padding: var(--space-sm, 12px) 0 0; text-align: center; text-shadow: none; font-size: 16px; font-style: normal; font-weight: 400; line-height: 1.3; } @media screen and (max-width: 750px) { .wp-block-gallery > * { width: 100% !important; } } /*---------------------------------------------------------------- Block -----------------------------------------------------------------*/ /* .block-google-map ______________________________________________*/ .block-google-map iframe { width: 100%; height: auto; aspect-ratio: 944/400; } @media screen and (max-width: 750px) { .block-google-map iframe { aspect-ratio: 1; } } /*---------------------------------------------------------------- Post 投稿記事用 -----------------------------------------------------------------*/ /* .post 投稿用 ______________________________________________*/ body.post-type-news .is-root-container, .c-post, body.post-type-insight .is-root-container, .c-post-insight { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; gap: var(--space-xl, 24px) 0; } body.post-type-news .is-root-container h2, .c-post h2, body.post-type-insight .is-root-container h2, .c-post-insight h2 { font-size: var(--font-size-xl, 24px); font-weight: 700; line-height: 1.3; margin: calc(var(--space-6xl, 64px) - 24px) 0 10px; } body.post-type-news .is-root-container h2:nth-of-type(1), .c-post h2:nth-of-type(1), body.post-type-insight .is-root-container h2:nth-of-type(1), .c-post-insight h2:nth-of-type(1) { margin: calc(var(--space-6xl, 64px)) 0 10px; } body.post-type-news .is-root-container h3, .c-post h3, body.post-type-insight .is-root-container h3, .c-post-insight h3 { margin: 8px 0 8px; color: #000; font-family: "Noto Sans JP"; font-size: var(--space-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.3; } body.post-type-news .is-root-container h4, .c-post h4, body.post-type-insight .is-root-container h4, .c-post-insight h4 { line-height: 1.3; } body.post-type-news .is-root-container h5, .c-post h5, body.post-type-insight .is-root-container h5, .c-post-insight h5 { line-height: 1.3; } body.post-type-news .is-root-container h6, .c-post h6, body.post-type-insight .is-root-container h6, .c-post-insight h6 { line-height: 1.3; } body.post-type-news .is-root-container section, .c-post section, body.post-type-insight .is-root-container section, .c-post-insight section { clear: both; padding-bottom: 1em; } body.post-type-news .is-root-container > p, .c-post > p, body.post-type-insight .is-root-container > p, .c-post-insight > p { display: block; } body.post-type-news .is-root-container a, .c-post a, body.post-type-insight .is-root-container a, .c-post-insight a { color: var(--wp--preset--color--color-primary); } body.post-type-news .is-root-container a[target=_blank], .c-post a[target=_blank], body.post-type-insight .is-root-container a[target=_blank], .c-post-insight a[target=_blank] { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 4px; } body.post-type-news .is-root-container a[target=_blank]::after, .c-post a[target=_blank]::after, body.post-type-insight .is-root-container a[target=_blank]::after, .c-post-insight a[target=_blank]::after { content: ""; background-color: currentColor; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } body.post-type-news .is-root-container strong, .c-post strong, body.post-type-insight .is-root-container strong, .c-post-insight strong { color: var(--wp--preset--color--color-primary); } body.post-type-news .is-root-container em, .c-post em, body.post-type-insight .is-root-container em, .c-post-insight em { font-style: italic; } body.post-type-news .is-root-container blockquote, body.post-type-news .is-root-container q, .c-post blockquote, body.post-type-insight .is-root-container blockquote, .c-post-insight blockquote, .c-post q, body.post-type-insight .is-root-container q, .c-post-insight q { color: #666; background-color: #fff; font-style: italic; padding: 2em 2em 2em 5em; position: relative; margin: 1em 0; border-left: solid 5px #ccc; } @media screen and (max-width: 750px) { body.post-type-news .is-root-container blockquote, body.post-type-news .is-root-container q, .c-post blockquote, body.post-type-insight .is-root-container blockquote, .c-post-insight blockquote, .c-post q, body.post-type-insight .is-root-container q, .c-post-insight q { padding: 3em 2.5em 2em; } } body.post-type-news .is-root-container blockquote::before, body.post-type-news .is-root-container q::before, .c-post blockquote::before, body.post-type-insight .is-root-container blockquote::before, .c-post-insight blockquote::before, .c-post q::before, body.post-type-insight .is-root-container q::before, .c-post-insight q::before { content: ""; display: block; background-image: url("../images/ico6.png"); background-size: contain; background-repeat: no-repeat; width: 2em; height: 2em; position: absolute; left: 2em; top: 2em; } @media screen and (max-width: 750px) { body.post-type-news .is-root-container blockquote::before, body.post-type-news .is-root-container q::before, .c-post blockquote::before, body.post-type-insight .is-root-container blockquote::before, .c-post-insight blockquote::before, .c-post q::before, body.post-type-insight .is-root-container q::before, .c-post-insight q::before { left: 2.5em; top: 0.3em; } } body.post-type-news .is-root-container blockquote footer, body.post-type-news .is-root-container q footer, .c-post blockquote footer, body.post-type-insight .is-root-container blockquote footer, .c-post-insight blockquote footer, .c-post q footer, body.post-type-insight .is-root-container q footer, .c-post-insight q footer { text-align: right; font-size: pxToEm(12); } @media screen and (max-width: 750px) { body.post-type-news .is-root-container blockquote footer, body.post-type-news .is-root-container q footer, .c-post blockquote footer, body.post-type-insight .is-root-container blockquote footer, .c-post-insight blockquote footer, .c-post q footer, body.post-type-insight .is-root-container q footer, .c-post-insight q footer { font-size: 0.9em; } } body.post-type-news .is-root-container blockquote a, body.post-type-news .is-root-container q a, .c-post blockquote a, body.post-type-insight .is-root-container blockquote a, .c-post-insight blockquote a, .c-post q a, body.post-type-insight .is-root-container q a, .c-post-insight q a { color: #666; } body.post-type-news .is-root-container img, .c-post img, body.post-type-insight .is-root-container img, .c-post-insight img { display: block; width: 100%; height: auto; border-radius: 5px; } body.post-type-news .is-root-container > .wp-block-image, .c-post > .wp-block-image, body.post-type-insight .is-root-container > .wp-block-image, .c-post-insight > .wp-block-image { margin: 8px auto 0; } body.post-type-news .is-root-container .wp-element-caption, .c-post .wp-element-caption, body.post-type-insight .is-root-container .wp-element-caption, .c-post-insight .wp-element-caption { margin-top: 8px; margin-bottom: 0; font-size: var(--font-size-sm, 14px); font-style: normal; font-weight: 400; line-height: 1.5; } body.post-type-news .is-root-container .wp-block-table, .c-post .wp-block-table, body.post-type-insight .is-root-container .wp-block-table, .c-post-insight .wp-block-table { margin-top: 8px; } body.post-type-news .is-root-container .list-box, .c-post .list-box, body.post-type-insight .is-root-container .list-box, .c-post-insight .list-box { margin: 10px 0 23px; } body.post-type-news .is-root-container .list-box > *, .c-post .list-box > *, body.post-type-insight .is-root-container .list-box > *, .c-post-insight .list-box > * { padding-left: 24px; } body.post-type-news .is-root-container .list-box h4, .c-post .list-box h4, body.post-type-insight .is-root-container .list-box h4, .c-post-insight .list-box h4 { color: var(--color-primary, #00a9a5); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ position: relative; } body.post-type-news .is-root-container .list-box h4::before, .c-post .list-box h4::before, body.post-type-insight .is-root-container .list-box h4::before, .c-post-insight .list-box h4::before { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: var(--color-primary, #00a9a5); position: absolute; top: 12px; left: 8px; } body.post-type-news .is-root-container .list-box h4:not(:first-of-type), .c-post .list-box h4:not(:first-of-type), body.post-type-insight .is-root-container .list-box h4:not(:first-of-type), .c-post-insight .list-box h4:not(:first-of-type) { margin-top: var(--space-xl, 24px); padding-top: var(--space-2xl, 32px); border-top: 1px solid var(--color-border, #ddd); } body.post-type-news .is-root-container .list-box h4:not(:first-of-type)::before, .c-post .list-box h4:not(:first-of-type)::before, body.post-type-insight .is-root-container .list-box h4:not(:first-of-type)::before, .c-post-insight .list-box h4:not(:first-of-type)::before { top: calc(12px + var(--space-2xl, 32px)); } /* シングル insight：コンテンツ幅を 805px に制限 ______________________________________________*/ body.single-insight .wp-block-post-content { max-width: 805px; margin-left: auto; margin-right: auto; } body.post-type-insight .is-root-container > *, .c-post-insight > * { margin-left: 0 !important; margin-right: 0 !important; } body.post-type-insight .is-root-container .wp-block-columns, .c-post-insight .wp-block-columns { gap: 32px; padding-top: 6px; } /*---------------------------------------------------------------- background -----------------------------------------------------------------*/ .c-bg-full, .p-top-case, .p-top-insight { position: relative; z-index: 0; } .c-bg-full::before, .p-top-case::before, .p-top-insight::before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: 100vw; height: 100%; background: #fff; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; } /*---------------------------------------------------------------- Table -----------------------------------------------------------------*/ /* table ______________________________________________*/ .wp-block-table { width: 100%; } /* .c-table1 ______________________________________________*/ .c-table1, body.post-type-news .is-root-container .wp-block-table, .c-post .wp-block-table, body.post-type-insight .is-root-container .wp-block-table, .c-post-insight .wp-block-table, .wp-block-table { width: 100%; } .c-table1 table, body.post-type-news .is-root-container .wp-block-table table, .c-post .wp-block-table table, body.post-type-insight .is-root-container .wp-block-table table, .c-post-insight .wp-block-table table, .wp-block-table table { width: 100%; max-width: 100%; } .c-table1 table tfoot, body.post-type-news .is-root-container .wp-block-table table tfoot, .c-post .wp-block-table table tfoot, body.post-type-insight .is-root-container .wp-block-table table tfoot, .c-post-insight .wp-block-table table tfoot, .wp-block-table table tfoot, .c-table1 table thead, body.post-type-news .is-root-container .wp-block-table table thead, .c-post .wp-block-table table thead, body.post-type-insight .is-root-container .wp-block-table table thead, .c-post-insight .wp-block-table table thead, .wp-block-table table thead { border: none; } .c-table1 table tfoot th, body.post-type-news .is-root-container .wp-block-table table tfoot th, .c-post .wp-block-table table tfoot th, body.post-type-insight .is-root-container .wp-block-table table tfoot th, .c-post-insight .wp-block-table table tfoot th, .wp-block-table table tfoot th, .c-table1 table tfoot td, body.post-type-news .is-root-container .wp-block-table table tfoot td, .c-post .wp-block-table table tfoot td, body.post-type-insight .is-root-container .wp-block-table table tfoot td, .c-post-insight .wp-block-table table tfoot td, .wp-block-table table tfoot td, .c-table1 table thead th, body.post-type-news .is-root-container .wp-block-table table thead th, .c-post .wp-block-table table thead th, body.post-type-insight .is-root-container .wp-block-table table thead th, .c-post-insight .wp-block-table table thead th, .wp-block-table table thead th, .c-table1 table thead td, body.post-type-news .is-root-container .wp-block-table table thead td, .c-post .wp-block-table table thead td, body.post-type-insight .is-root-container .wp-block-table table thead td, .c-post-insight .wp-block-table table thead td, .wp-block-table table thead td { border: none !important; background-color: #000 !important; color: #fff; } .c-table1 table > * > tr > th, body.post-type-news .is-root-container .wp-block-table table > * > tr > th, .c-post .wp-block-table table > * > tr > th, body.post-type-insight .is-root-container .wp-block-table table > * > tr > th, .c-post-insight .wp-block-table table > * > tr > th, .wp-block-table table > * > tr > th, .c-table1 table > * > tr > td, body.post-type-news .is-root-container .wp-block-table table > * > tr > td, .c-post .wp-block-table table > * > tr > td, body.post-type-insight .is-root-container .wp-block-table table > * > tr > td, .c-post-insight .wp-block-table table > * > tr > td, .wp-block-table table > * > tr > td { border: none; text-align: left; padding: 30px 0; border-top: solid 1px var(--wp--preset--color--color-border); border-bottom: solid 1px var(--wp--preset--color--color-border); } @media screen and (max-width: 750px) { .c-table1 table > * > tr > th, body.post-type-news .is-root-container .wp-block-table table > * > tr > th, .c-post .wp-block-table table > * > tr > th, body.post-type-insight .is-root-container .wp-block-table table > * > tr > th, .c-post-insight .wp-block-table table > * > tr > th, .wp-block-table table > * > tr > th, .c-table1 table > * > tr > td, body.post-type-news .is-root-container .wp-block-table table > * > tr > td, .c-post .wp-block-table table > * > tr > td, body.post-type-insight .is-root-container .wp-block-table table > * > tr > td, .c-post-insight .wp-block-table table > * > tr > td, .wp-block-table table > * > tr > td { padding: 24px 0; } } .c-table1 table > * > tr > td, body.post-type-news .is-root-container .wp-block-table table > * > tr > td, .c-post .wp-block-table table > * > tr > td, body.post-type-insight .is-root-container .wp-block-table table > * > tr > td, .c-post-insight .wp-block-table table > * > tr > td, .wp-block-table table > * > tr > td { padding: var(--space-md, 16px); } .c-table1 table > * > tr > td:first-child, body.post-type-news .is-root-container .wp-block-table table > * > tr > td:first-child, .c-post .wp-block-table table > * > tr > td:first-child, body.post-type-insight .is-root-container .wp-block-table table > * > tr > td:first-child, .c-post-insight .wp-block-table table > * > tr > td:first-child, .wp-block-table table > * > tr > td:first-child, .c-table1 table > * > tr > th, body.post-type-news .is-root-container .wp-block-table table > * > tr > th, .c-post .wp-block-table table > * > tr > th, body.post-type-insight .is-root-container .wp-block-table table > * > tr > th, .c-post-insight .wp-block-table table > * > tr > th, .wp-block-table table > * > tr > th { width: 230px; padding: var(--space-md, 16px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; background: var(--color-bg-beige, #f8f5ec); vertical-align: middle; } @media screen and (max-width: 750px) { .c-table1 table > * > tr > td:first-child, body.post-type-news .is-root-container .wp-block-table table > * > tr > td:first-child, .c-post .wp-block-table table > * > tr > td:first-child, body.post-type-insight .is-root-container .wp-block-table table > * > tr > td:first-child, .c-post-insight .wp-block-table table > * > tr > td:first-child, .wp-block-table table > * > tr > td:first-child, .c-table1 table > * > tr > th, body.post-type-news .is-root-container .wp-block-table table > * > tr > th, .c-post .wp-block-table table > * > tr > th, body.post-type-insight .is-root-container .wp-block-table table > * > tr > th, .c-post-insight .wp-block-table table > * > tr > th, .wp-block-table table > * > tr > th { width: auto; } } .c-table1 table a, body.post-type-news .is-root-container .wp-block-table table a, .c-post .wp-block-table table a, body.post-type-insight .is-root-container .wp-block-table table a, .c-post-insight .wp-block-table table a, .wp-block-table table a { color: var(--wp--preset--color--color-primary); } @media screen and (hover: hover) and (min-width: 751px) { .c-table1 table a:hover, body.post-type-news .is-root-container .wp-block-table table a:hover, .c-post .wp-block-table table a:hover, body.post-type-insight .is-root-container .wp-block-table table a:hover, .c-post-insight .wp-block-table table a:hover, .wp-block-table table a:hover { text-decoration: underline !important; } } .c-table1 table iframe, body.post-type-news .is-root-container .wp-block-table table iframe, .c-post .wp-block-table table iframe, body.post-type-insight .is-root-container .wp-block-table table iframe, .c-post-insight .wp-block-table table iframe, .wp-block-table table iframe { margin: 10px 0; width: 100%; height: 321px; } .c-table1 table .link-map, body.post-type-news .is-root-container .wp-block-table table .link-map, .c-post .wp-block-table table .link-map, body.post-type-insight .is-root-container .wp-block-table table .link-map, .c-post-insight .wp-block-table table .link-map, .wp-block-table table .link-map { float: right; } .c-table1 .logo-sss, body.post-type-news .is-root-container .wp-block-table .logo-sss, .c-post .wp-block-table .logo-sss, body.post-type-insight .is-root-container .wp-block-table .logo-sss, .c-post-insight .wp-block-table .logo-sss, .wp-block-table .logo-sss { width: 171px; margin-top: 8px; display: block; } /* .c-table2 ______________________________________________*/ .c-table2 { width: 100%; } @media screen and (max-width: 750px) { .c-table2 { overflow-x: auto; } } .c-table2 table { width: 100%; max-width: 100%; table-layout: fixed !important; } .c-table2 table tfoot, .c-table2 table thead { border: none; } .c-table2 table tfoot th, .c-table2 table tfoot td, .c-table2 table thead th, .c-table2 table thead td { border: none !important; background: var(--color-primary, #00a9a5) !important; color: #fff; } .c-table2 table tfoot th:first-child, .c-table2 table tfoot td:first-child, .c-table2 table thead th:first-child, .c-table2 table thead td:first-child { background: var(--color-primary-dark, #208b88) !important; } .c-table2 table > td { padding: var(--space-md, 16px); } .c-table2 table th:not(:first-child), .c-table2 table td:not(:first-child) { width: auto !important; } .c-table2 table td:first-child, .c-table2 table th:first-child { width: 230px !important; min-width: 230px !important; max-width: 230px !important; padding: var(--space-md, 16px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; background: var(--color-bg-beige, #f8f5ec); vertical-align: middle; text-align: center; } @media screen and (max-width: 750px) { .c-table2 table td:first-child, .c-table2 table th:first-child { width: 100px !important; min-width: 100px !important; max-width: 100px !important; padding: 6px !important; line-height: 1.4; } } @media screen and (max-width: 750px) { .c-table2 table > * > tr > th, .c-table2 table > * > tr > td { display: table-cell; width: auto; max-width: none; padding: var(--space-md, 16px); border-top: solid 1px var(--wp--preset--color--color-border); border-bottom: solid 1px var(--wp--preset--color--color-border); } } .c-table2 table a { color: var(--wp--preset--color--color-primary); } @media screen and (hover: hover) and (min-width: 751px) { .c-table2 table a:hover { text-decoration: underline !important; } } .c-table-sitemap td:nth-child(1) { width: 1%; font-weight: bold !important; white-space: nowrap !important; } .c-table-sitemap td:nth-child(2) { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 1em; } .c-table-sitemap td:nth-child(2) br { display: none; } .c-table-sitemap a { color: var(--black) !important; display: inline-block; margin-right: 1em; } @media screen and (max-width: 750px) { .c-table-sitemap a { display: block; } } /*---------------------------------------------------------------- HEADER -----------------------------------------------------------------*/ /* .h-header ______________________________________________*/ .h-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-xl, 24px); -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-width: 100%; z-index: 10; margin: 0 !important; } @media screen and (max-width: 750px) { .h-header { padding: var(--space-sm, 12px); height: 74px; } } .is-home .h-header { color: #fff; } .h-logo { leading-trim: both; text-edge: cap; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 800; line-height: 100%; /* 24px */ white-space: nowrap; } .h-logo a { color: currentColor; text-decoration: none !important; } .h-gnav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 48px; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (max-width: 1440px) { .h-gnav { gap: 20px; } } @media screen and (max-width: 750px) { .h-gnav { display: none; } } .h-gnav__main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 40px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-2xl, 32px); /* nav */ font-family: "Noto Sans JP"; font-size: 14px; font-style: normal; font-weight: 700; line-height: 100%; /* 14px */ -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (max-width: 1440px) { .h-gnav__main { gap: 15px; } } @media screen and (max-width: 1300px) { .h-gnav__main { font-size: 13px; } } .h-gnav__main a { display: block; padding-bottom: 2px; } .h-gnav__main .current-menu-item a { border-bottom: solid 1px currentColor; } .h-gnav__sub { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-sm, 12px); padding-right: calc(var(--space-sm, 12px) + 50px); } .c-btn-menu { z-index: 10; position: fixed !important; right: var(--space-xl, 24px); display: block; width: 50px; height: 50px; background-color: var(--wp--preset--color--color-p); border-radius: 4px; cursor: pointer; font-size: 0; } @media screen and (max-width: 750px) { .c-btn-menu { right: var(--space-sm, 12px); } } .c-btn-menu::before, .c-btn-menu::after { content: ""; position: absolute; left: 50%; width: 14px; height: 2px; background-color: #fff; border-radius: 1px; -webkit-transition: -webkit-transform 0.25s ease-out, -webkit-box-shadow 0.25s ease-out; transition: -webkit-transform 0.25s ease-out, -webkit-box-shadow 0.25s ease-out; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, -webkit-transform 0.25s ease-out, -webkit-box-shadow 0.25s ease-out; } .c-btn-menu::before { top: calc(50% - 5.625px); -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-box-shadow: 0 5px 0 0 #fff; box-shadow: 0 5px 0 0 #fff; } .c-btn-menu::after { top: calc(50% + 4.375px); -webkit-transform: translateX(-50%); transform: translateX(-50%); } .is-hamburger-open .c-btn-menu::before { width: 20px; -webkit-transform: translateX(-50%) translateY(5px) rotate(45deg); transform: translateX(-50%) translateY(5px) rotate(45deg); -webkit-box-shadow: 0 5px 0 0 transparent; box-shadow: 0 5px 0 0 transparent; } .is-hamburger-open .c-btn-menu::after { width: 20px; -webkit-transform: translateX(-50%) translateY(-5px) rotate(-45deg); transform: translateX(-50%) translateY(-5px) rotate(-45deg); } /* ===== DRAWER MENU ===== */ body.is-hamburger-open { overflow: hidden; } .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0); z-index: 8; pointer-events: none; -webkit-transition: background 0.4s ease; transition: background 0.4s ease; } .is-hamburger-open .drawer-overlay { background: rgba(0, 0, 0, 0.5); pointer-events: auto; } .drawer-panel { position: fixed; top: 0; right: 0; width: 360px; max-width: 90vw; height: 100vh; background: #fff; z-index: 9; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); transition: -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 48px 40px !important; -webkit-box-sizing: border-box; box-sizing: border-box; } .is-hamburger-open .drawer-panel { -webkit-transform: translateX(0); transform: translateX(0); } .drawer-nav { width: 100%; margin: 60px 0 0 !important; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .drawer-nav > ul a, .drawer-nav > ul li { width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .drawer-nav a { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 15px; color: var(--color-p); text-decoration: none; padding: 16px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); display: block; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .drawer-nav a:hover { opacity: 0.6; } .drawer-footer { margin-top: auto; padding-top: 32px; } .drawer-contact-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; background: var(--color-p); color: #fff; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 14px; border-radius: 4px; text-decoration: none; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; margin-top: auto; } .drawer-contact-btn:hover { opacity: 0.8; } /*---------------------------------------------------------------- Footer -----------------------------------------------------------------*/ .f-cta { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 0 var(--space-xl, 24px) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs, 8px); } @media screen and (max-width: 750px) { .f-cta { grid-template-columns: 1fr; padding: 0 var(--space-xl, 24px); } } .f-cta__block { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-flex: 1; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; border-radius: 4px; background: var(--color-secondary, #0052a5); color: #fff; cursor: pointer; -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (hover: hover) and (min-width: 751px) { .f-cta__block:hover { background: #2e7bc9; } } @media screen and (max-width: 750px) { .f-cta__block { padding: var(--space-xl, 24px); min-height: 180px; } } .f-cta__title { color: #fff; font-family: "Noto Sans JP"; font-size: var(--space-xl, 24px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: 12px !important; } @media screen and (max-width: 750px) { .f-cta__title { font-size: var(--space-lg, 20px); } } .f-cta__lead { color: #fff; font-family: "Noto Sans JP"; font-size: var(--space-md, 16px); font-style: normal; font-weight: 400; line-height: 1.3; margin-bottom: var(--space-2xl, 32px) !important; } @media screen and (max-width: 750px) { .f-cta__lead { margin-bottom: var(--space-2xl, 32px) !important; } } .f-cta__link { color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-xs, 8px); } @media screen and (max-width: 750px) { .f-cta__link { line-height: 1.3; } } .f-cta__link::after { content: ""; background-color: #fff; } .f-cta__link a { color: inherit; text-decoration: none; } .f-cta__link a::before { content: ""; position: absolute; inset: 0; border-radius: 4px; z-index: 1; } .f-cta__link a:focus-visible { outline: none; } .f-cta__link a:focus-visible::before { outline: 2px solid #fff; outline-offset: -4px; } .f-cta__block--contact { background: var(--color-primary, #00a9a5); } @media screen and (hover: hover) and (min-width: 751px) { .f-cta__block--contact:hover { background: #5dc1bf; } } .f-cta__block--contact .f-cta__link::after { content: ""; background-color: #fff; } .f-container { background-color: var(--color-bg-white); padding: var(--space-xl, 24px); } @media screen and (max-width: 750px) { .f-container { padding: 0; } } .f-main { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 auto; max-width: 1280px; padding: var(--space-6xl, 64px) 40px var(--space-10xl, 128px); gap: 64px; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 750px) { .f-main { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; gap: var(--space-2xl, 32px); padding: var(--space-6xl, 64px) var(--space-xl, 24px) var(--space-6xl, 64px); } } .f-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-3xl, 40px); } .f-nav > * > p { color: var(--color-p, #04080f); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-2xl, 32px); } @media screen and (hover: hover) and (min-width: 751px) { .f-nav a:hover { text-decoration: underline; } } @media screen and (max-width: 750px) { .f-nav { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border, #dddddd); } .f-nav > * { width: 100%; padding: var(--space-md, 16px) 0; border-bottom: 1px solid var(--color-border, #dddddd); } .f-nav > * > p { margin-bottom: var(--space-sm, 12px); } } .f-nav__sub { font-size: var(--font-size-sm, 14px); font-style: normal; line-height: 1.3; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-sm, 12px); } @media screen and (max-width: 750px) { .f-nav__sub { line-height: 1.2; } } .f-main__title { color: #02010a; font-size: var(--font-size-3xl, 40px); font-style: normal; font-weight: 700; line-height: 1.3; white-space: nowrap; } @media screen and (max-width: 750px) { .f-main__title { font-size: var(--font-size-2xl, 32px); text-align: center; white-space: normal; } } .f-bottom { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-10xl, 128px) var(--space-2xl, 32px) var(--space-2xl, 32px) var(--space-2xl, 32px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-10xl, 128px); -webkit-box-flex: 1; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; border-radius: 4px; background: var(--color-p, #04080f); color: #fff; } @media screen and (max-width: 750px) { .f-bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-2xl, 32px); margin: 0 calc(var(--space-xl, 24px) * -1); padding: var(--space-2xl, 32px) var(--space-xl, 24px); border-radius: 4px 4px 0 0; } } .f-copyright { font-size: 14px; font-weight: 400; line-height: 1.3; } @media screen and (max-width: 750px) { .f-copyright { text-align: center; } } .f-bottom-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-2xl, 32px); } .f-bottom-nav a { font-size: var(--font-size-sm, 14px); font-weight: 400; line-height: 1.3; } .f-bottom-nav a[target=_blank] { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 4px; } .f-bottom-nav a[target=_blank]::after { content: ""; background-color: var(--color-primary-dark, #208b88); } @media screen and (max-width: 750px) { .f-bottom-nav { width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0; border: 1px solid rgba(255, 255, 255, 0.25); } .f-bottom-nav a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: var(--space-sm, 12px); border-top: 1px solid rgba(255, 255, 255, 0.25); font-size: var(--font-size-xs, 12px); } .f-bottom-nav a:first-child { border-top: 0; } } /*---------------------------------------------------------------- SIDEBAR -----------------------------------------------------------------*/ /*---------------------------------------------------------------- Box -----------------------------------------------------------------*/ /* .c-box ______________________________________________*/ /*---------------------------------------------------------------- Block -----------------------------------------------------------------*/ /* .c-mv ______________________________________________*/ .c-mv { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px) var(--space-6xl, 64px) var(--space-3xl, 40px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-sm, 12px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; margin: 0 auto; position: relative; } @media screen and (max-width: 750px) { .c-mv { padding: var(--space-2xl, 32px) var(--space-xl, 24px) var(--space-sm, 12px) var(--space-xl, 24px); margin-bottom: var(--space-sm, 12px); } } .c-mv::after { content: ""; display: block; height: 1px; background: #000; position: absolute; bottom: 0; width: calc(100% - var(--space-6xl, 64px) * 2); left: var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .c-mv::after { width: calc(100% - var(--space-xl, 24px) * 2); left: var(--space-xl, 24px); } } .c-mv-title-en { color: var(--color-p, #04080f); leading-trim: both; text-edge: cap; font-family: Roboto; font-size: var(--font-size-md, 16px); font-weight: 700; line-height: 1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-xs, 8px); } @media screen and (max-width: 750px) { .c-mv-title-en { line-height: 1.3; } } .c-mv-title-en::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary); -webkit-transform: translateY(0.3em); transform: translateY(0.3em); } .c-mv-title-ja { color: var(--color-p, #04080f); font-family: "Noto Sans JP"; font-size: var(--font-size-5xl, 52px); font-style: normal; font-weight: 700; line-height: 1.2; } @media screen and (max-width: 750px) { .c-mv-title-ja { font-size: var(--font-size-2xl, 32px); } } /* .c-insight-meta ______________________________________________*/ .c-insight-meta { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; gap: 4px var(--space-md, 16px); -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (max-width: 750px) { .c-insight-meta { margin-bottom: 5px; } } .c-insight-meta__cats { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; gap: var(--space-xxs); -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .c-insight-meta__cats > * { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-xxs, 4px) var(--space-xs, 8px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; border-radius: 4px; border: 1px solid var(--color-primary, #00a9a5); background: #fff; color: var(--color-primary, #00a9a5); /* p-xs */ font-family: "Noto Sans JP"; font-size: var(--font-size-xs, 12px); font-style: normal; font-weight: 400; line-height: 180%; /* 21.6px */ } .c-mv-case { max-width: 1297px; margin: 0 auto; padding: var(--space-6xl, 64px); gap: var(--space-6xl, 64px); border-radius: 4px; background: var(--color-bg-beige, #f8f5ec); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: var(--space-10xl, 128px); } @media screen and (max-width: 750px) { .c-mv-case { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: var(--space-xl, 24px); gap: var(--space-2xl, 32px); margin-bottom: 42px; } } .c-mv-case__image { min-width: 47.2626176219%; } .c-mv-case__body { min-width: 47.3053892216%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; padding-bottom: var(--space-2xl, 32px); } .c-mv-case__title { color: #000; font-size: var(--font-size-2xl, 32px); font-style: normal; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { .c-mv-case__title { font-size: var(--space-xl, 24px); } } .c-mv-case__company { color: #000; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.8; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-xs, 8px); } .c-mv-case__company::before { content: ""; display: block; width: 6px; height: 30px; border-radius: 2px; background: var(--color-primary, #00a9a5); } .c-case-section { margin: 0 auto; padding: 0 0 var(--space-10xl, 128px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .c-case-section { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--font-size-xl, 24px); padding: var(--font-size-xl, 24px) var(--font-size-xl, 24px) 64px; } } .c-case-section__header { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-md, 16px); } .c-case-section__header h2 { color: var(--color-primary, #00a9a5); leading-trim: both; text-edge: cap; font-family: Roboto; font-size: 16px; font-style: normal; font-weight: 700; line-height: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-xs, 8px); } .c-case-section__header h2::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary, #00a9a5); } .c-case-section__header h3 { color: #000; font-family: "Noto Sans JP"; font-size: var(--font-size-xl, 24px); font-style: normal; font-weight: 700; line-height: 1.2; } .c-case-section__body { width: 920px; min-width: 920px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-xl, 24px); } @media screen and (max-width: 750px) { .c-case-section__body { width: 100%; min-width: 0; } } .c-case-section__body h3 { color: #000; font-family: "Noto Sans JP"; font-size: var(--space-xl, 24px); font-style: normal; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { .c-case-section__body h3 { font-size: 18px; } } .c-case-check-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: var(--space-2xl, 32px) var(--space-2xl, 32px) var(--space-2xl, 32px) calc(var(--space-2xl, 32px) + var(--space-2xl, 32px) + 48px); gap: 12px; border-radius: 6px; border: 1px solid var(--color-primary, #00a9a5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M20 0C31.046 0 40 8.954 40 20C40 31.046 31.046 40 20 40C8.954 40 0 31.046 0 20C0 8.954 8.954 0 20 0ZM20 4C15.7565 4 11.6869 5.68571 8.68629 8.68629C5.68571 11.6869 4 15.7565 4 20C4 24.2435 5.68571 28.3131 8.68629 31.3137C11.6869 34.3143 15.7565 36 20 36C24.2435 36 28.3131 34.3143 31.3137 31.3137C34.3143 28.3131 36 24.2435 36 20C36 15.7565 34.3143 11.6869 31.3137 8.68629C28.3131 5.68571 24.2435 4 20 4ZM27.07 12.762C27.4291 12.3995 27.9131 12.1879 28.4231 12.1706C28.9331 12.1533 29.4303 12.3316 29.8132 12.6689C30.196 13.0063 30.4354 13.4772 30.4824 13.9852C30.5294 14.4933 30.3804 15.0002 30.066 15.402L29.9 15.59L18.728 26.764C18.3467 27.1453 17.8386 27.3732 17.3003 27.4045C16.762 27.4359 16.231 27.2684 15.808 26.934L15.616 26.764L10.1 21.248C9.73749 20.8889 9.52594 20.4049 9.50863 19.8949C9.49133 19.385 9.66959 18.8877 10.0069 18.5048C10.3443 18.122 10.8152 17.8826 11.3232 17.8356C11.8313 17.7886 12.3382 17.9376 12.74 18.252L12.928 18.42L17.172 22.662L27.072 12.762H27.07Z' fill='%2300A9A5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 40px 40px; background-position: 36px center; } @media screen and (max-width: 750px) { .c-case-check-box { background-size: 32px 32px; padding: 64px 24px 24px; background-position: top 18px center; } } .c-case-check-box H4, .c-case-check-box .c-case-check-box__title { color: var(--color-heading, #000); font-family: "Noto Sans JP"; font-size: var(--space-lg, 20px); font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ } .p-case-btn-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-bottom: var(--space-10xl, 128px); } @media screen and (max-width: 750px) { .p-case-btn-area { padding-bottom: var(--space-10xl, 128px); } .p-case-btn-area .wp-block-button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } /*---------------------------------------------------------------- Card -----------------------------------------------------------------*/ /* .c-card-insight ______________________________________________*/ .c-card-insight { position: relative; } @media screen and (hover: hover) and (min-width: 751px) { .c-card-insight:hover .c-card-insight__image img { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.6; } .c-card-insight:hover .c-card-insight__title { text-decoration: underline; } } .c-card-insight .c-insight-meta { z-index: 2; } .c-card-insight__image { border-radius: 4px; overflow: hidden; background-color: #000; aspect-ratio: 16/9; } .c-card-insight__image img { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-card-insight__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xxs, 4px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; padding: var(--space-sm, 12px) 0 0; } .c-card-insight__title { color: var(--color-primary-dark, #208b88); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ } .c-card-insight__title a::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* .c-card-case ______________________________________________*/ .c-card-case { position: relative; } @media screen and (hover: hover) and (min-width: 751px) { .c-card-case:hover .c-card-case__image img { -webkit-transform: scale(1.1); transform: scale(1.1); opacity: 0.6; } .c-card-case:hover .c-card-case__title { text-decoration: underline; } } .c-card-case__image { border-radius: 4px; overflow: hidden; background-color: #000; } .c-card-case__image img { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; aspect-ratio: 16/9; -o-object-fit: cover; object-fit: cover; } .c-card-case__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xxs, 4px); padding: var(--space-sm, 12px) 0 0; } .c-card-case__title { color: var(--color-primary-dark, #208b88); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 180%; /* 28.8px */ } .c-card-case__title a::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* .c-card-solutions ______________________________________________*/ .c-card-solutions { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-md, 16px); position: relative; } @media screen and (max-width: 750px) { .c-card-solutions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .c-card-solutions__image { min-width: 150px; width: 150px; height: 150px; border-radius: 4px; overflow: hidden; } @media screen and (max-width: 750px) { .c-card-solutions__image { width: 100%; display: none; } } .c-card-solutions__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-card-solutions__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-xs, 8px); } .c-card-solutions__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; color: var(--color-heading, #000); font-family: "Noto Sans JP"; font-size: var(--font-size-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.3; min-height: 50px; padding-right: 60px; position: relative; } .c-card-solutions__title::before { content: ""; display: block; width: 50px; height: 50px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 4px; background: var(--color-primary-dark, #208b88); position: absolute; top: 50%; right: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .c-card-solutions__title::after { content: ""; display: block; position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; background-color: #fff; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } .c-card-solutions__link { opacity: 0; } .c-card-solutions__link a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: red; z-index: 2; } /*---------------------------------------------------------------- Navs -----------------------------------------------------------------*/ /* .c-breadcrumb ______________________________________________*/ .c-breadcrumb { padding: var(--space-xl, 24px) var(--space-6xl, 64px) var(--space-xl, 24px) var(--space-6xl, 64px); margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--space-xs, 8px); color: var(--color-p, #04080f); font-family: "Noto Sans JP"; font-size: var(--font-size-xs, 12px); font-style: normal; font-weight: 400; line-height: 1.3; } @media screen and (max-width: 750px) { .c-breadcrumb { display: none; } } .c-breadcrumb .separate { display: block; width: 6px; height: 6px; border-radius: 6px; background: var(--color-primary, #00a9a5); -webkit-transform: translateY(2px); transform: translateY(2px); } .c-breadcrumb a { color: var(--color-placeholder, #919191); } @media screen and (hover: hover) and (min-width: 751px) { .c-breadcrumb a:hover { text-decoration: underline !important; } } /* .c-nav-side-menu ______________________________________________*/ .c-nav-side-menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: -webkit-sticky; position: sticky; top: 24px; width: 100%; } .c-nav-side-menu > * { width: 100%; margin: 0; } .c-nav-side-menu > *:last-child a { border-bottom: 1px solid var(--color-border, #ddd); } .c-nav-side-menu a { padding: var(--space-xl, 24px) 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-top: 1px solid var(--color-border, #ddd); line-height: 1.26; position: relative; } @media screen and (max-width: 750px) { .c-nav-side-menu a { padding: 18px 0; } } .c-nav-side-menu a::after { content: ""; display: block; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 20px; height: 20px; background-color: var(--color-primary, #00a9a5); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 10.0035H5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L15 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15 10.0035H5' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 5L15 10L10 15' stroke='%23000' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; position: absolute; top: 50%; right: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (hover: hover) and (min-width: 751px) { .c-nav-side-menu a:hover::after { -webkit-transform: translate(10px, -50%); transform: translate(10px, -50%); } } /* .c-pager ______________________________________________*/ .c-pager { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin: var(--space-10xl, 128px) 0 0; } @media screen and (max-width: 750px) { .c-pager { margin: 64px 0 0; } } .c-pager .wp-block-query-pagination-numbers { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: var(--space-2xl, 32px); } .c-pager .page-numbers { color: var(--color-primary, #00a9a5); font-family: Roboto; font-size: var(--space-xl, 24px); font-style: normal; font-weight: 700; line-height: 1.6; } @media screen and (hover: hover) and (min-width: 751px) { .c-pager a:hover { background-color: #fff; color: var(--wp--preset--color--color-primary); } } .c-pager .current { color: var(--color-placeholder, #919191); } .c-pager .wp-block-query-pagination-previous, .c-pager .wp-block-query-pagination-next { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 24px; font-size: 0; } .c-pager .wp-block-query-pagination-previous::after, .c-pager .wp-block-query-pagination-next::after { content: ""; display: block; width: 24px; height: 24px; -webkit-mask-image: url("../images/icon-svg/icon-arrow1.svg"); mask-image: url("../images/icon-svg/icon-arrow1.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--wp--preset--color--color-primary); -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (hover: hover) and (min-width: 751px) { .c-pager .wp-block-query-pagination-previous:hover::after, .c-pager .wp-block-query-pagination-next:hover::after { -webkit-transform: translateX(10px); transform: translateX(10px); background-color: var(--wp--preset--color--color-primary); } } .c-pager .wp-block-query-pagination-previous { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .c-nav-solution { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 var(--space-2xl, 32px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } @media screen and (max-width: 750px) { .c-nav-solution { padding: 0 var(--space-xl, 24px); } } .c-nav-solution__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; gap: var(--space-10xl, 128px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 4px; border-top: 1px solid var(--color-heading, #000); } @media screen and (max-width: 750px) { .c-nav-solution__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 24px 0 var(--space-6xl, 64px); gap: 18px; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .c-nav-solution__menu { width: 100%; max-width: 911px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2xl, 32px); -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @media screen and (max-width: 750px) { .c-nav-solution__menu { padding: 0; grid-template-columns: repeat(1, minmax(0, 1fr)); } } .c-nav-solution__menu > li { border-bottom: 1px solid var(--color-border, #ddd); } .c-nav-solution__menu > li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 19px 0; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; color: var(--color-p, #04080f); font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 1.8; position: relative; } @media screen and (max-width: 750px) { .c-nav-solution__menu > li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-sm, 12px) 0; } } .c-nav-solution__menu > li a::after { content: ""; display: block; position: absolute; top: 50%; right: 0; width: 20px; height: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--wp--preset--color--color-primary); } .c-nav-solution__menu .current-menu-item a { color: var(--color-placeholder, #919191); } /*---------------------------------------------------------------- Button -----------------------------------------------------------------*/ /* .c-btn ______________________________________________*/ /*---------------------------------------------------------------- Form -----------------------------------------------------------------*/ /* .c-form ______________________________________________*/ .c-form { --c-form-accent-color: var(--color-primary, #00a9a5); --c-form-accent-icon-color: var(--color-primary-dark, #208b88); color: var(--wp--preset--color--color-p); } .c-form ::-webkit-input-placeholder { opacity: 0.5; color: #696969; } .c-form ::-moz-placeholder { opacity: 0.5; color: #696969; } .c-form :-ms-input-placeholder { opacity: 0.5; color: #696969; } .c-form ::-ms-input-placeholder { opacity: 0.5; color: #696969; } .c-form ::placeholder { opacity: 0.5; color: #696969; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]):focus, .c-form textarea:focus, .c-form select:focus { border: solid 2px var(--c-form-accent-color, var(--color-primary, #00a9a5)); outline: none; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]), .c-form textarea { border-radius: 5px; background-color: #fff; width: 100%; padding: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; border: solid 2px var(--wp--preset--color--color-border, #ddd); } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]).ss, .c-form textarea.ss { width: 5em; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]) ::-webkit-input-placeholder, .c-form textarea ::-webkit-input-placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]) ::-moz-placeholder, .c-form textarea ::-moz-placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]) :-ms-input-placeholder, .c-form textarea :-ms-input-placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]) ::-ms-input-placeholder, .c-form textarea ::-ms-input-placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-form input:not([type=radio]):not([type=checkbox]):not([type=submit]) ::placeholder, .c-form textarea ::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-form textarea { height: 280px; width: 100%; } @media screen and (max-width: 750px) { .c-form textarea { height: 280px; } } .c-form [type=text], .c-form [type=email], .c-form [type=tel] { height: 61px; } .c-form [type=radio] { border-radius: 50%; width: 21px; height: 21px; background-color: #fff; border: solid 1px var(--wp--preset--color--color-border); display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .c-form [type=radio]:checked::after { content: ""; display: block; width: 11px; height: 11px; border-radius: 50%; background-color: var(--c-form-accent-color, var(--color-primary, #00a9a5)); } .c-form [type=checkbox] { border-radius: 3px; width: 20px; height: 20px; background-color: #fff; border: solid 1px #ccc; -webkit-transform: translateY(-2px); transform: translateY(-2px); } .c-form [type=checkbox]:checked::after { content: ""; display: block; width: 21px; height: 9px; border-left: solid 3px var(--c-form-accent-color, var(--color-primary, #00a9a5)); border-bottom: solid 3px var(--c-form-accent-color, var(--color-primary, #00a9a5)); -webkit-transform: rotate(-45deg) translate(1px, 0); transform: rotate(-45deg) translate(1px, 0); } .c-form [type=file] { width: 320px !important; margin: 1em 0; padding: 1em 1.5em !important; line-height: 1; } @media screen and (max-width: 750px) { .c-form [type=file] { width: 274px !important; margin: 0.5em 0 !important; padding: 1em 0.5em !important; font-size: 0.8em !important; } } .c-form [type=file]::-webkit-file-upload-button { display: none; } .c-form [type=file]::file-selector-button { display: none; } @media screen and (max-width: 750px) { .c-form [type=file]::-webkit-file-upload-button { display: block; font-size: 0.8em !important; } .c-form [type=file]::file-selector-button { display: block; font-size: 0.8em !important; } } .c-form .file-block { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 150px; } @media screen and (max-width: 750px) { .c-form .file-block { display: block; margin: 2em 0; } } .c-form select { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%2C0l6%2C12H0Z%22%20transform%3D%22translate%2812%2012%29%20rotate%28180%29%22%20fill%3D%22%2300a9a5%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center right 16px; background-size: 12px auto; border-radius: 5px; line-height: 1; background-color: #fff; border: solid 1px var(--wp--preset--color--color-border, #ddd); padding: 0.5em 2.6em 0.5em 1em; min-height: 52px; min-width: 230px; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin-right: 6px; } @media screen and (max-width: 750px) { .c-form select { padding: 0.5em 2.2em 0.5em 1em; margin-right: 3px; background-position: center right 14px; width: 100%; } } .c-form select:not(:first-child) { margin-left: 15px; } @media screen and (max-width: 750px) { .c-form select:not(:first-child) { margin-left: 5px; } } .c-form .middle { width: 340px !important; } .c-form .policy { margin: 60px 0; text-align: center; } @media screen and (max-width: 750px) { .c-form .policy { font-size: 1.4rem; text-align: left; } } .c-form .policy input { margin-right: 0.5em; } .c-form .policy a { text-decoration: underline; } @media screen and (min-width: 751px) { .c-form .policy a:hover { text-decoration: none; } } .c-form .policy .formError { position: absolute !important; bottom: 20px; white-space: nowrap; } .c-form .policy > * { position: relative; } .c-form .note { font-size: 1.6rem; } @media screen and (max-width: 750px) { .c-form .note { font-size: 1.4rem; } } .c-form .c-link1[target=_blank]::after, .c-form a[target=_blank]::after { width: 1.2em; height: 1.2em; -webkit-transform: translateY(0.3em); transform: translateY(0.3em); } .c-form .icon-blank { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } .c-form { /* validation ______________________________________________*/ } .c-form .validate-ok:not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-radio), .c-form [id^=form-validation-field-] { background-image: url("data:image/svg+xml,%3Csvg id='clr1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='System'%3E%3Cg id='check_circle_fill'%3E%3Cpath id='MingCute' d='M20,0V20H0V0ZM10.495,19.382h-.01l-.059.03-.016,0h0l-.013,0-.059-.03a.018.018,0,0,0-.02,0l0,.009-.014.356,0,.017.009.01.086.062.012,0h0l.01,0,.086-.062.011-.013h0l0-.014-.014-.356a.018.018,0,0,0-.013-.015Zm.221-.094-.012,0-.154.077-.008.009h0l0,.009.015.358,0,.011h0l.007.006.167.077a.021.021,0,0,0,.024-.007l0-.012-.028-.512a.021.021,0,0,0-.016-.018Zm-.6,0a.019.019,0,0,0-.023,0l0,.012-.028.512a.019.019,0,0,0,.014.02h.013l.167-.077.008-.007h0l0-.01.015-.358,0-.01h0l-.008-.007Z' fill='none'/%3E%3Cpath id='形状' d='M10.333,2A8.333,8.333,0,1,1,2,10.333,8.333,8.333,0,0,1,10.333,2ZM13.28,7.318,9.155,11.443,7.387,9.675a.833.833,0,0,0-1.179,1.179l2.3,2.3a.917.917,0,0,0,1.3,0L14.458,8.5A.833.833,0,0,0,13.28,7.318Z' transform='translate(-0.333 -0.333)' fill='%2300a9a5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center right 10px; } .c-form .wpcf7-not-valid:not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-radio), .c-form .formError-target { border: solid 2px #f87676 !important; background-color: #fff7f7 !important; position: relative !important; background-image: url("data:image/svg+xml,%3Csvg id='close_circle_fill' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath id='MingCute' d='M20,0V20H0V0ZM10.495,19.382h-.01l-.059.03-.016,0h0l-.013,0-.059-.03a.018.018,0,0,0-.02,0l0,.009-.014.356,0,.017.009.01.086.062.012,0h0l.01,0,.086-.062.011-.013h0l0-.014-.014-.356a.018.018,0,0,0-.013-.015Zm.221-.094-.012,0-.154.077-.008.009h0l0,.009.015.358,0,.011h0l.007.006.167.077a.021.021,0,0,0,.024-.007l0-.012-.028-.512a.021.021,0,0,0-.016-.018Zm-.6,0a.019.019,0,0,0-.023,0l0,.012-.028.512a.019.019,0,0,0,.014.02h.013l.167-.077.008-.007h0l0-.01.015-.358,0-.01h0l-.008-.007Z' fill='none'/%3E%3Cpath id='形状' d='M10.333,2A8.333,8.333,0,1,1,2,10.333,8.333,8.333,0,0,1,10.333,2ZM8.566,7.387a.833.833,0,0,0-1.248,1.1l.069.079,1.768,1.768L7.387,12.1a.833.833,0,0,0,1.1,1.248l.079-.069,1.768-1.768L12.1,13.28a.833.833,0,0,0,1.248-1.1L13.28,12.1l-1.768-1.768L13.28,8.566a.833.833,0,0,0-1.1-1.248l-.079.069L10.333,9.155Z' transform='translate(-0.333 -0.333)' fill='%23f87676'/%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center right 10px; } .c-form .formError { position: relative !important; top: 100% !important; left: 0 !important; margin-top: 0 !important; pointer-events: none !important; font-size: 1.6rem; } @media screen and (max-width: 750px) { .c-form .formError { font-size: 1.4rem; } } .c-form .formError .formErrorContent { width: 100% !important; background: none !important; position: relative !important; color: #f87676 !important; min-width: 0 !important; font-size: 1em !important; border: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; white-space: nowrap; } .c-form .formErrorArrow { display: none; } .c-form .box1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .c-form .privacy-line label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-form .header { margin-bottom: 110px; } @media screen and (max-width: 750px) { .c-form .header { margin-bottom: 60px; } } .c-form hr { margin-bottom: 30px; } .c-form .policy-check { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 1.5em; } .c-form .submit-wrap { --c-submit-active-color: var(--color-primary, #00a9a5); --c-submit-active-icon-color: var(--color-primary-dark, #208b88); position: relative; margin: 60px auto 0; font-weight: bold; width: calc(400px + 2px + 70px); max-width: 100%; height: 70px; border-radius: 4px; font-family: "Noto Sans JP"; font-size: 1.8rem; cursor: not-allowed; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 750px) { .c-form .submit-wrap { width: 100%; margin: 40px auto 0; } } .c-form .submit-wrap::before { content: "入力が完了していません"; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 0; width: calc(100% - 2px - 70px); height: 70px; border-radius: 4px; border: 1px solid #ddd; background-color: #ccc; color: #fff; font-weight: 700; font-style: normal; font-size: 1.8rem; line-height: 1; -webkit-box-sizing: border-box; box-sizing: border-box; pointer-events: none; } .c-form .submit-wrap::after { content: ""; display: block; position: absolute; top: 0; right: 0; z-index: 0; width: 70px; height: 70px; border-radius: 4px; background-color: #aaa; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Cpath%20d='M21.5%202.5L10%2014'%20stroke='white'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M21.5%202.5L14.2%2021L10%2014L3%209.8L21.5%202.5Z'%20stroke='white'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 24px 24px; pointer-events: none; } .c-form .submit-wrap [type=submit] { display: block; position: relative; z-index: 1; width: 100%; height: 70px; padding: 0 calc(2px + 70px) 0 0; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; border-radius: 0; color: transparent !important; background-color: transparent !important; border: 0 !important; cursor: not-allowed; font-size: 1.8rem; font-weight: 700; font-style: normal; line-height: 1; text-align: center; opacity: 1; -webkit-appearance: none; -moz-appearance: none; appearance: none; pointer-events: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .c-form .submit-wrap .wpcf7-spinner { position: absolute; top: 50%; right: 23px; z-index: 2; margin: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .c-form .submit-wrap { font-size: var(--font-size-sm, 14px); } .c-form .submit-wrap::before, .c-form .submit-wrap [type=submit] { font-size: var(--font-size-sm, 14px); } .c-form .c-form-bottom { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; margin-top: var(--space-2xl, 32px); border: 1px solid var(--wp--preset--color--color-border, #ddd); border-radius: 5px; padding: 16px; } .c-form a { color: var(--c-form-accent-color, var(--color-primary, #00a9a5)); } @media screen and (hover: hover) and (min-width: 751px) { .c-form a:hover { text-decoration: underline; } } .c-form.download { --c-form-accent-color: var(--color-secondary, #0052a5); --c-form-accent-icon-color: var(--color-secondary-dark, #40668d); } .c-form.download select { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20d%3D%22M6%2C0l6%2C12H0Z%22%20transform%3D%22translate%2812%2012%29%20rotate%28180%29%22%20fill%3D%22%230052a5%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center right 16px; background-size: 12px auto; } .c-form.download .validate-ok:not(.wpcf7-checkbox):not(.wpcf7-acceptance):not(.wpcf7-radio), .c-form.download [id^=form-validation-field-] { background-image: url("data:image/svg+xml,%3Csvg id='clr1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg id='System'%3E%3Cg id='check_circle_fill'%3E%3Cpath id='MingCute' d='M20,0V20H0V0ZM10.495,19.382h-.01l-.059.03-.016,0h0l-.013,0-.059-.03a.018.018,0,0,0-.02,0l0,.009-.014.356,0,.017.009.01.086.062.012,0h0l.01,0,.086-.062.011-.013h0l0-.014-.014-.356a.018.018,0,0,0-.013-.015Zm.221-.094-.012,0-.154.077-.008.009h0l0,.009.015.358,0,.011h0l.007.006.167.077a.021.021,0,0,0,.024-.007l0-.012-.028-.512a.021.021,0,0,0-.016-.018Zm-.6,0a.019.019,0,0,0-.023,0l0,.012-.028.512a.019.019,0,0,0,.014.02h.013l.167-.077.008-.007h0l0-.01.015-.358,0-.01h0l-.008-.007Z' fill='none'/%3E%3Cpath id='形状' d='M10.333,2A8.333,8.333,0,1,1,2,10.333,8.333,8.333,0,0,1,10.333,2ZM13.28,7.318,9.155,11.443,7.387,9.675a.833.833,0,0,0-1.179,1.179l2.3,2.3a.917.917,0,0,0,1.3,0L14.458,8.5A.833.833,0,0,0,13.28,7.318Z' transform='translate(-0.333 -0.333)' fill='%230052a5'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; background-position: center right 10px; } .c-form.download .submit-wrap { --c-submit-active-color: var(--color-secondary, #0052a5); --c-submit-active-icon-color: var(--color-secondary-dark, #40668d); } body.en-US .c-form .submit-wrap::before { content: "The input is not complete"; } form.validate-all-ok .submit-wrap::before { content: "" !important; border-color: var(--c-submit-active-color, var(--color-primary, #00a9a5)) !important; background-color: var(--c-submit-active-color, var(--color-primary, #00a9a5)) !important; color: transparent !important; } form.validate-all-ok .submit-wrap::after { background-color: var(--c-submit-active-icon-color, var(--color-primary-dark, #208b88)) !important; } form.validate-all-ok .submit-wrap [type=submit] { color: #fff !important; cursor: pointer !important; pointer-events: auto !important; } form.validate-all-ok .submit-wrap { cursor: pointer !important; } form.validate-all-ok .submit-wrap:focus-within { outline: 2px solid var(--c-submit-active-icon-color, var(--color-primary-dark, #208b88)); outline-offset: 4px; } form.validate-all-ok .submit-wrap { -webkit-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } @media screen and (hover: hover) and (min-width: 751px) { form.validate-all-ok .submit-wrap:hover { opacity: 0.7; } } [data-name=checkbox] .formError { position: absolute !important; } /* list ______________________________________________*/ .c-form-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-form-list { gap: var(--space-2xl, 32px); } } .c-form-list__item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media screen and (max-width: 750px) { .c-form-list__item { gap: 14px; } } .c-form-list__label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 5px; color: #000; font-weight: 700; margin-top: 3px; } .c-form-list__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; line-height: 1.6; } .c-form-list__required { color: #fff; font-size: 12px; font-weight: 700; line-height: 1.6; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; padding: 4px 8px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 5px; background: var(--wp--preset--color--color-attention, #fb3640); -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .c-form-list__hint { color: var(--wp--preset--color--color-placeholder, #919191); font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "游ゴシック", "Yu Gothic", "YuGothic", "Helvetica Neue", "Helvetica", sans-serif; font-size: var(--wp--preset--font-size--font-size-sm, 14px); font-weight: 400; line-height: 1.8; } .c-form-list__field { width: 100%; } .c-form-list__field--radio .wpcf7-radio { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 8px; width: 100%; } .c-form-list__field--radio .wpcf7-list-item { display: block; margin: 0; } .c-form-list__field--radio label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; width: 100%; min-height: 61px; padding: 14px var(--space-md, 16px); border: 2px solid var(--wp--preset--color--color-border, #ddd); border-radius: 5px; background: #fff; cursor: pointer; } .c-form-list__field--radio .wpcf7-list-item-label { color: #000; font-size: var(--wp--preset--font-size--font-size-md, 16px); font-weight: 400; line-height: 1.8; } .c-form-list__field--mail { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; gap: var(--space-md, 16px); } @media screen and (max-width: 750px) { .c-form-list__field--mail { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .c-form-list__field--mail .wpcf7-form-control-wrap { -webkit-box-flex: 1; -webkit-flex: 1 1 0; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; } .c-form-list__mail-unit { -webkit-box-flex: 1; -webkit-flex: 1 1 0; -ms-flex: 1 1 0px; flex: 1 1 0; min-width: 0; } .c-form-list__confirm { padding-bottom: 16px; color: #000; font-size: var(--wp--preset--font-size--font-size-md, 16px); line-height: 1.8; } @media screen and (max-width: 750px) { .c-form-list__confirm { padding-bottom: 0; } } .c-form-list__field--postcode { max-width: 456.5px; } @media screen and (max-width: 750px) { .c-form-list__field--postcode { max-width: none; } } .c-form-privacy .wpcf7-list-item { margin: 0; } .c-form-privacy label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } .c-form-privacy .wpcf7-list-item-label { color: var(--c-form-accent-color, var(--color-primary, #00a9a5)); font-size: var(--wp--preset--font-size--font-size-md, 16px); line-height: 1.8; } .c-form-privacy .wpcf7-list-item-label::before, .c-form-privacy .wpcf7-list-item-label::after { content: none; display: none; } .c-form-privacy a[target=_blank] { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 4px; } .c-form-privacy a[target=_blank]::after { content: "" !important; display: inline-block !important; width: 20px !important; min-width: 20px; height: 20px !important; min-height: 20px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-left: 0; vertical-align: initial; background-color: var(--c-form-accent-icon-color, var(--color-primary-dark, #208b88)) !important; background-image: none !important; background-repeat: no-repeat !important; background-size: contain !important; background-position: center !important; mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M7.91699%204.16683V2.91683C7.91699%202.45659%208.29008%202.0835%208.75033%202.0835H17.0837C17.5439%202.0835%2017.917%202.45659%2017.917%202.91683V12.0835C17.917%2012.5437%2017.5439%2012.9168%2017.0837%2012.9168H15.417'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M11.2497%207.5H2.91634C2.4561%207.5%202.08301%207.8731%202.08301%208.33333V16.6667C2.08301%2017.1269%202.4561%2017.5%202.91634%2017.5H11.2497C11.7099%2017.5%2012.083%2017.1269%2012.083%2016.6667V8.33333C12.083%207.8731%2011.7099%207.5%2011.2497%207.5Z'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M7.08301%2010.4165V14.5832'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5%2012.5H9.16667'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; mask-repeat: no-repeat !important; mask-size: contain !important; mask-position: center !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%3E%3Cpath%20d='M7.91699%204.16683V2.91683C7.91699%202.45659%208.29008%202.0835%208.75033%202.0835H17.0837C17.5439%202.0835%2017.917%202.45659%2017.917%202.91683V12.0835C17.917%2012.5437%2017.5439%2012.9168%2017.0837%2012.9168H15.417'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M11.2497%207.5H2.91634C2.4561%207.5%202.08301%207.8731%202.08301%208.33333V16.6667C2.08301%2017.1269%202.4561%2017.5%202.91634%2017.5H11.2497C11.7099%2017.5%2012.083%2017.1269%2012.083%2016.6667V8.33333C12.083%207.8731%2011.7099%207.5%2011.2497%207.5Z'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M7.08301%2010.4165V14.5832'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Cpath%20d='M5%2012.5H9.16667'%20stroke='%23000'%20stroke-width='1.25'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") !important; -webkit-mask-repeat: no-repeat !important; -webkit-mask-size: contain !important; -webkit-mask-position: center !important; } .c-form .c-form-privacy a[target=_blank]::after { display: block; width: 20px !important; min-width: 20px; height: 20px !important; min-height: 20px; margin-left: 0; -webkit-transform: translateY(0); transform: translateY(0); } .wpcf7-form-control-wrap { display: block; position: relative; } .wpcf7-not-valid-tip { position: absolute; top: 50%; left: 24px; -webkit-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none; } .c-form-list__mail-unit .wpcf7-not-valid-tip { top: 100%; left: 5px; -webkit-transform: none; transform: none; } .c-form .wpcf7-form-control-wrap.is-inputting .wpcf7-not-valid-tip, .c-form .wpcf7-form-control-wrap:focus-within .wpcf7-not-valid-tip { display: none; } /*---------------------------------------------------------------- グリッドのコンポーネント -----------------------------------------------------------------*/ /*---------------------------------------------------------------- List -----------------------------------------------------------------*/ /*.c-list-disc ______________________________________________*/ .c-list-disc { list-style-type: disc; padding-left: 2em; } /*.c-list-li ______________________________________________*/ .c-list-li, .wp-block-list, body.post-type-news .is-root-container ul, .c-post ul, body.post-type-insight .is-root-container ul, .c-post-insight ul { padding-left: 0; list-style-type: none; } .c-list-li > li, .wp-block-list > li, body.post-type-news .is-root-container ul > li, .c-post ul > li, body.post-type-insight .is-root-container ul > li, .c-post-insight ul > li { position: relative; padding-left: 1.2em; } .c-list-li > li::before, .wp-block-list > li::before, body.post-type-news .is-root-container ul > li::before, .c-post ul > li::before, body.post-type-insight .is-root-container ul > li::before, .c-post-insight ul > li::before { content: ""; display: block; width: 4px; height: 4px; top: 0.8em; left: 0.3em; position: absolute; border-radius: 50%; background-color: currentColor; } /*.c-list-ol ______________________________________________*/ .c-list-ol, body.post-type-news .is-root-container ol, .c-post ol, body.post-type-insight .is-root-container ol, .c-post-insight ol { list-style-type: none; counter-reset: item_a; } .c-list-ol > li, body.post-type-news .is-root-container ol > li, .c-post ol > li, body.post-type-insight .is-root-container ol > li, .c-post-insight ol > li { position: relative; padding-left: 24px; } .c-list-ol > li::before, body.post-type-news .is-root-container ol > li::before, .c-post ol > li::before, body.post-type-insight .is-root-container ol > li::before, .c-post-insight ol > li::before { content: counter(item_a) "."; counter-increment: item_a; position: absolute; top: 0; left: 0; background: none; } /*.c-list-insight ______________________________________________*/ .c-list-insight { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-list-insight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm, 12px); } } /*.c-list-case ______________________________________________*/ .c-list-case { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-list-case { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } } .c-list-top-category { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-list-top-category { gap: var(--space-sm, 12px); } } /*.c-list-news ______________________________________________*/ .c-list-news > * { border-top: 1px solid var(--color-border, #ddd); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-xl, 24px) 0; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xl, 24px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; position: relative; } @media screen and (hover: hover) and (min-width: 751px) { .c-list-news > *:hover .c-list-news__title { text-decoration: underline; } } .c-list-news > * a::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 750px) { .c-list-news > * { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-xxs, 4px); padding: var(--space-sm, 12px) 0; } } .c-list-news__title { color: var(--color-primary-dark, #208b88); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 400; line-height: 1.8; } /*.c-list-assignment ______________________________________________*/ .c-list-assignment { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-md, 16px); } @media screen and (max-width: 750px) { .c-list-assignment { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } } .c-list-assignment__item { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-2xl, 32px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 4px; background: var(--color-bg-beige, #f8f5ec); } @media screen and (max-width: 750px) { .c-list-assignment__item { padding: var(--space-xl, 24px); gap: var(--space-sm, 12px); } } .c-list-assignment__num { color: var(--color-primary, #00a9a5); font-family: "Noto Sans JP"; font-size: var(--font-size-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-xxs, 4px); } @media screen and (max-width: 750px) { .c-list-assignment__num { font-size: var(--font-size-sm, 14px); margin-bottom: 0; line-height: 1.2; } } .c-list-assignment__title { color: var(--color-heading, #000); font-family: "Noto Sans JP"; font-size: var(--font-size-xl, 24px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-sm, 12px); } @media screen and (max-width: 750px) { .c-list-assignment__title { font-size: var(--font-size-lg, 20px); margin-bottom: 0; line-height: 1.1; } } /*---------------------------------------------------------------- Text, Lead -----------------------------------------------------------------*/ /* text ______________________________________________*/ /* .c-icon--blank 外部リンクアイコン ______________________________________________*/ .c-icon--blank::after, .c-link1[target=_blank]::after, body.post-type-news .is-root-container a[target=_blank]::after, .c-post a[target=_blank]::after, body.post-type-insight .is-root-container a[target=_blank]::after, .c-post-insight a[target=_blank]::after, .c-table1 table a[target=_blank]::after, .c-post .wp-block-table table a[target=_blank]::after, .c-post-insight .wp-block-table table a[target=_blank]::after, .wp-block-table table a[target=_blank]::after, .c-table2 table a[target=_blank]::after, .c-form a[target=_blank]::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 4px; vertical-align: middle; background-color: currentColor; -webkit-mask-image: url("../images/icon-svg/icon-blank.svg"); mask-image: url("../images/icon-svg/icon-blank.svg"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } /* .c-link ______________________________________________*/ @media screen and (max-width: 750px) { .c-ttl-1 { font-size: 20px; line-height: 1.5; } } .c-link-pdf::before { color: #c30909 !important; } .c-title-a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-xs); font-family: "Roboto", sans-serif; font-size: var(--font-size-md, 16px); font-weight: 700; line-height: 1.5; } .c-title-a::before { content: ""; display: block; width: 6px; height: 30px; background: var(--color-primary); border-radius: 2px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 750px) { body.home .c-title-a { margin-bottom: 13px; } } .c-title-b { font-family: "Noto Sans JP"; font-size: var(--space-3xl, 40px); font-style: normal; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 750px) { .c-title-b { font-size: var(--space-2xl, 32px); } } .c-title-c { color: #000; font-family: "Noto Sans JP"; font-size: var(--font-size-2xl, 32px); font-style: normal; font-weight: 700; line-height: 1.3; } .c-title-d { color: var(--color-primary, #00a9a5); font-family: "Noto Sans JP"; font-size: var(--font-size-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.8; } .c-title-e { color: var(--color-p, #04080f); leading-trim: both; text-edge: cap; font-family: Roboto; font-size: var(--font-size-4xl, 48px); font-style: normal; font-weight: 700; line-height: 1.5; } @media screen and (max-width: 750px) { .c-title-e { font-size: var(--font-size-3xl, 40px); line-height: 1; } } .c-title-f { color: var(--color-primary, #00a9a5); text-align: center; font-family: Akshar; font-size: 100px; font-style: normal; font-weight: 500; line-height: 1.3; } @media screen and (max-width: 750px) { .c-title-f { font-size: 50px; } } .c-title-dot, .c-title-d, .c-title-e { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 8px; } .c-title-dot::before, .c-title-d::before, .c-title-e::before { content: ""; display: block; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; -webkit-transform: translateY(0.6em); transform: translateY(0.6em); } /*---------------------------------------------------------------- Media -----------------------------------------------------------------*/ /* Responsive Video(16:9) ______________________________________________*/ .c-video { width: 100%; height: auto; aspect-ratio: 16/9; margin-left: auto; margin-right: auto; display: block; } /*---------------------------------------------------------------- Color -----------------------------------------------------------------*/ /*---------------------------------------------------------------- Tab -----------------------------------------------------------------*/ .js-tabPanel { display: none; } .js-tabPanel.is-active { display: block; } .c-tab__nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-tab__btn { cursor: pointer; } /*---------------------------------------------------------------- プロジェクト、ページ用ユニークスタイル .p- -----------------------------------------------------------------*/ /* トップページ ______________________________________________*/ .c-hero { position: relative !important; width: 100%; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 173px; } @media screen and (max-width: 750px) { .c-hero { padding-bottom: 173px; } } .c-hero__video { --overlay-alpha: 0; background-color: #ddd; } .c-hero__video::after { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: background-color 0.08s linear; transition: background-color 0.08s linear; background-color: rgba(0, 0, 0, var(--overlay-alpha)); z-index: -1; } .c-hero__video video { position: fixed; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; z-index: -2; } .c-hero__copy { position: absolute; bottom: 135px; left: 131px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-md); z-index: 1; padding: 80px 0 80px 61px; } @media screen and (max-width: 750px) { .c-hero__copy { bottom: 43%; left: var(--space-xl, 24px); padding: 0 30px 0 41px; } } .c-hero__copy::before { content: ""; display: block; position: absolute; background: var(--color-primary); width: 124px; height: 100%; border-radius: 4px; left: 0; top: 0; } @media screen and (max-width: 750px) { .c-hero__copy::before { display: block; position: absolute; background: var(--color-primary); width: 24px; border-radius: 4px; } } .c-hero__title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 64px; color: white; line-height: 1.3; position: relative; z-index: 1; white-space: nowrap; } @media screen and (max-width: 750px) { .c-hero__title { color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-2xl, 32px); font-style: normal; font-weight: 700; line-height: 130%; /* 41.6px */ } } .c-hero__lead { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; color: white; line-height: 1.3; position: relative; z-index: 1; white-space: nowrap; } @media screen and (max-width: 750px) { .c-hero__lead { color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; font-weight: 700; line-height: 130%; /* 20.8px */ white-space: normal; } } .p-top-story { background: transparent; position: relative; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 750px) { .p-top-story { height: auto; } } .p-top-story__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-6xl); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: var(--space-10xl); color: #fff; } @media screen and (max-width: 750px) { .p-top-story__inner { padding: var(--space-6xl, 64px) var(--space-xl, 24px) 64px var(--space-xl, 24px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-2xl, 32px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .p-top-story__inner .c-title-b br { display: none; } } .p-top-story__left { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-3xl); -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p-top-story__heading { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-sm); } .p-top-story__right { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 20px; color: white; line-height: 2; } @media screen and (max-width: 750px) { .p-top-story__right { font-size: var(--font-size-md, 16px); font-weight: 700; line-height: 1.8; } } .p-top-solution { position: relative; z-index: 1; background: var(--color-bg-white); padding-top: 128px; } @media screen and (max-width: 750px) { .p-top-solution { padding: var(--space-6xl, 64px) 0 0; } } .p-top-solution .solution-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; padding: 0 var(--space-6xl) var(--space-6xl); } @media screen and (max-width: 750px) { .p-top-solution .solution-header { padding: 0 var(--space-xl, 24px); gap: var(--space-xl, 24px); } } @media screen and (max-width: 750px) { .p-top-solution .solution-header .c-title-b br { display: none; } } .p-top-solution { /* elevator */ } .p-top-solution .elevator-wrap { height: 500vh; position: relative; } @media screen and (max-width: 750px) { .p-top-solution .elevator-wrap { height: 420vh; margin-top: var(--space-6xl, 64px); } } .p-top-solution .elevator-sticky { position: -webkit-sticky; position: sticky; top: 0; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-6xl); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0 var(--space-6xl); background: #f8f5ec; overflow: hidden; } @media screen and (max-width: 750px) { .p-top-solution .elevator-sticky { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xl, 24px); height: 100svh; min-height: 100svh; -webkit-box-sizing: border-box; box-sizing: border-box; padding: var(--space-6xl, 64px) var(--space-xl, 24px); } } .p-top-solution .elevator-left, .p-top-solution .p-top-solution__elevator-left { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; position: relative; min-width: 0; height: 100%; } @media screen and (max-width: 750px) { .p-top-solution .elevator-left, .p-top-solution .p-top-solution__elevator-left { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; height: clamp(300px, 42svh, 360px); } } .p-top-solution .elevator-item-text { position: absolute; inset: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-2xl); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; -webkit-transform: translateY(60px); transform: translateY(60px); -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } @media screen and (max-width: 750px) { .p-top-solution .elevator-item-text { gap: 0; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-transform: translateY(32px); transform: translateY(32px); } } .p-top-solution .elevator-item-text.active { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } .p-top-solution .elevator-item-text.exit { opacity: 0; -webkit-transform: translateY(-60px); transform: translateY(-60px); -webkit-transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), -webkit-transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .p-top-solution .elevator-right { min-width: 552px; width: clamp(552px, 45vw, 900px); height: clamp(600px, 60vh, 900px); -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; position: relative; border-radius: 4px; overflow: hidden; } @media screen and (max-width: 750px) { .p-top-solution .elevator-right { min-width: 0; width: 100%; height: auto; aspect-ratio: 460/500; } } .p-top-solution .elevator-item-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px; opacity: 0; z-index: 0; overflow: hidden; } .p-top-solution .elevator-item-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; border-radius: inherit; } .p-top-solution { /* progress bar */ } .p-top-solution .elevator-progress { position: absolute; left: var(--space-6xl); bottom: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 8px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 750px) { .p-top-solution .elevator-progress { position: static; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-transform: none; transform: none; margin-top: 20px; } } .p-top-solution .elevator-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; border: none; padding: 0; -webkit-transition: background 0.3s, -webkit-transform 0.3s; transition: background 0.3s, -webkit-transform 0.3s; transition: background 0.3s, transform 0.3s; transition: background 0.3s, transform 0.3s, -webkit-transform 0.3s; cursor: pointer; } .p-top-solution .elevator-progress-dot.active { background: var(--color-primary); -webkit-transform: scale(1.4); transform: scale(1.4); } .p-top-solution { /* reuse existing sub-styles */ } .p-top-solution .solution-number { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 16px; } .p-top-solution .solution-num-primary { font-family: "Roboto", sans-serif; font-weight: 700; font-size: 16px; color: var(--color-primary); line-height: 1.5; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 16px; } .p-top-solution .solution-num-primary::after { content: ""; display: block; width: 1px; height: 11px; background: var(--color-p, #04080f); } .p-top-solution .solution-num-secondary { font-family: "Roboto", sans-serif; font-weight: 700; font-size: 16px; color: var(--color-p); line-height: 1.5; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p-top-solution .solution-item-title { font-family: "Noto Sans JP", sans-serif; font-weight: 700; font-size: 40px; color: var(--color-p); line-height: 1.3; } @media screen and (max-width: 750px) { .p-top-solution .solution-item-title { font-size: var(--space-2xl, 32px); padding: var(--space-md, 16px) 0 24px; } } .p-top-solution .solution-lead { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-xs); } @media screen and (max-width: 750px) { .p-top-solution .solution-lead { margin-bottom: var(--space-2xl, 32px); } } .p-top-solution .solution-lead-sub { font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 20px; color: var(--color-primary); line-height: 1.5; } @media screen and (max-width: 750px) { .p-top-solution .solution-lead-sub { font-size: var(--space-lg, 20px); } } .p-top-solution .solution-lead-body { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 16px; color: var(--color-p); line-height: 1.8; } .p-top-insight { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-10xl, 128px) var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-6xl, 64px); -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .p-top-insight::before { background: var(--color-bg-white); } @media screen and (max-width: 750px) { .p-top-insight { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0; padding: var(--space-6xl, 64px) var(--space-xl, 24px) var(--space-6xl, 64px); } } .p-top-insight__header { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .p-top-insight__header .c-title-a { margin-bottom: var(--space-sm, 12px); } @media screen and (max-width: 750px) { .p-top-insight__header { width: 100%; display: contents; } .p-top-insight__header .c-title-b { margin-bottom: var(--space-xl, 24px); } .p-top-insight__header > * { width: 100%; } .p-top-insight__header .wp-block-buttons.wp-block-buttons-is-layout-flex, .p-top-insight__header .wp-block-buttons.is-layout-flex { -webkit-box-ordinal-group: 5; -webkit-order: 4; -ms-flex-order: 4; order: 4; margin-top: var(--space-2xl, 32px); } } .p-top-insight__nav { padding: var(--space-3xl, 40px) 0; overflow: hidden; } @media screen and (max-width: 750px) { .p-top-insight__nav { width: 100%; padding: 0 0 5px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 26px; } } .p-top-insight__nav > * { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-sm, 12px); } @media screen and (max-width: 750px) { .p-top-insight__nav > * { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; gap: var(--space-lg, 20px); width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: 100%; } } .p-top-insight__nav > * a { color: var(--color-p, #04080f); font-family: "Noto Sans JP"; font-size: var(--font-size-md, 16px); font-style: normal; line-height: 1.8; white-space: nowrap; } @media screen and (hover: hover) and (min-width: 751px) { .p-top-insight__nav > * a:hover { text-decoration: underline !important; } } .p-top-insight__nav > * .is-active a { font-weight: 700; } .p-top-insight__body { width: 849px; } @media screen and (max-width: 750px) { .p-top-insight__body { width: 100%; -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; margin-bottom: 50px; } } .p-top-case { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; display: flex; padding: var(--space-10xl, 128px) var(--space-6xl, 64px); flex-direction: column; align-items: flex-start; gap: var(--space-6xl, 64px); align-self: stretch; overflow: hidden; } .p-top-case::before { background: var(--color-bg-beige, #f8f5ec); } @media screen and (max-width: 750px) { .p-top-case { padding: var(--space-6xl, 64px) var(--space-xl, 24px); gap: var(--space-2xl, 32px); } } .p-top-case__slide { width: 100vw; padding-bottom: calc(var(--space-xl, 24px) + 30px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 750px) { .p-top-case__slide { width: calc(100vw - var(--space-xl, 24px)); padding-bottom: 54px; } } .p-top-case__slide .c-card-case { width: 380px; margin-right: 32px; } @media screen and (max-width: 750px) { .p-top-case__slide .c-card-case { width: 200px; margin-right: var(--space-sm, 12px); } } .p-top-case__slide .slick-prev, .p-top-case__slide .slick-next { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--color-primary-dark, #208b88); background: #fff; opacity: 1; -webkit-transition: background 0.2s; transition: background 0.2s; z-index: 1; top: auto; left: 0; bottom: 0; -webkit-transform: none; transform: none; } .p-top-case__slide .slick-prev::before, .p-top-case__slide .slick-next::before { display: none; } .p-top-case__slide .slick-prev svg, .p-top-case__slide .slick-next svg { width: 20px; height: 20px; stroke: var(--color-primary-dark, #208b88); stroke-width: 1.25px; fill: none; -webkit-transition: stroke 0.2s; transition: stroke 0.2s; } .p-top-case__slide .slick-prev:hover, .p-top-case__slide .slick-next:hover { background: var(--color-primary-dark, #208b88); } .p-top-case__slide .slick-prev:hover svg, .p-top-case__slide .slick-next:hover svg { stroke: #fff; } .p-top-case__slide .slick-next { left: 38px; } .p-top-news { background: var(--color-bg-white); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-10xl, 128px); -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-11xl, 140px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .p-top-news { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0; padding: var(--space-6xl, 64px) var(--space-xl, 24px); } } .p-top-news__header { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .p-top-news__header .c-title-a { margin-bottom: var(--space-sm, 12px); } .p-top-news__header .c-title-b { margin-bottom: var(--space-3xl, 40px); } @media screen and (max-width: 750px) { .p-top-news__header { width: 100%; display: contents; } .p-top-news__header .c-title-b { margin-bottom: 0; } .p-top-news__header > * { width: 100%; } .p-top-news__header .wp-block-buttons.wp-block-buttons-is-layout-flex, .p-top-news__header .wp-block-buttons.is-layout-flex { -webkit-box-ordinal-group: 4; -webkit-order: 3; -ms-flex-order: 3; order: 3; margin-top: var(--space-2xl, 32px); } } .p-top-news__body { width: 737px; } @media screen and (max-width: 750px) { .p-top-news__body { width: 100%; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; margin: var(--space-2xl, 32px) 0; } } /* Knowledge Insights ______________________________________________*/ .p-insight-header__title { margin-bottom: 24px; } .p-insight-eye-catch { margin-top: var(--space-xl, 24px); } .p-insight-eye-catch img { border-radius: 4px; overflow: hidden; } .p-insight-header { margin-bottom: var(--space-xl, 24px); } .p-insight-btn-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: var(--space-10xl, 128px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .p-insight-btn-area { padding-top: 64px; } } .p-news-btn-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-10xl, 128px) 0 var(--space-10xl, 128px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .p-news-btn-area { padding: 64px 0 64px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } /* About ______________________________________________*/ .c-about-block-a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 4px; background: var(--color-bg-beige, #f8f5ec); } @media screen and (max-width: 750px) { .c-about-block-a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 32px 24px; } } .c-about-block-a__header { width: 48.3319076133%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; gap: 24px; padding-bottom: var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-about-block-a__header { width: 100%; padding-bottom: var(--space-2xl, 32px); } } .c-about-block-a__body { width: 46.1933276305%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 750px) { .c-about-block-a__body { width: 100%; } } .c-about-block-a__imgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md, 16px); } .c-about-block-a__imgs > :first-child { grid-column: span 2; } .c-about-block-a__imgs img { border-radius: 4px; } .c-about-block-b { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 64px; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .c-about-block-b { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 32px 0; gap: 12px; } } .c-about-block-b > * { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-about-block-b .c-title-d { margin-bottom: 8px; } @media screen and (max-width: 750px) { .c-about-block-b .c-title-d { line-height: 1.4; } } .c-about-block-b__l { gap: 26px; padding-bottom: var(--space-2xl, 32px); } .c-about-block-b__r { gap: var(--space-2xl, 32px); -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; min-height: 100%; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } .p-solutions-index { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-10xl, 128px) var(--space-10xl, 128px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .p-solutions-index { padding: var(--space-3xl) var(--space-xl, 24px) 47px var(--space-xl, 24px); } } .c-solutions-index-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl, 32px) var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .c-solutions-index-menu { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 18px; } } .c-sol-block-a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px) var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-6xl, 64px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .c-sol-block-a { padding: var(--space-2xl, 32px) var(--space-xl, 24px) var(--space-6xl, 64px) var(--space-xl, 24px); gap: var(--space-6xl, 64px); } } .c-sol-block-a-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .c-sol-block-a-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-2xl, 32px); } } .c-sol-block-a-header__image { width: 540px; min-width: 540px; border-radius: 4px; overflow: hidden; } @media screen and (max-width: 750px) { .c-sol-block-a-header__image { min-width: 0; width: 100%; } } .c-sol-block-a-header__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-sol-block-a-header__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; padding-bottom: var(--space-2xl, 32px); } .c-sol-block-b { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 var(--space-6xl, 64px) var(--space-10xl, 128px) var(--space-6xl, 64px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; color: #fff; } @media screen and (max-width: 750px) { .c-sol-block-b { padding: 0 var(--space-xl, 24px) var(--space-6xl, 64px) var(--space-xl, 24px); } } .c-sol-block-b .c-title-a::before { background: #fff; } .c-sol-block-b .c-title-b { margin: 24px 0; } .c-sol-block-b__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-6xl, 64px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 4px; background: var(--color-primary, #00a9a5); } @media screen and (max-width: 750px) { .c-sol-block-b__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-2xl, 32px) var(--space-xl, 24px); -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xl, 24px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } .c-sol-block-b__r { width: 457px; min-width: 457px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-md, 16px); } @media screen and (max-width: 750px) { .c-sol-block-b__r { width: 100%; min-width: 0; } } .c-sol-block-b__r .wp-block-image { border-radius: 4px; overflow: hidden; } .c-sol-block-b__box { margin-top: var(--space-2xl, 32px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-3xl, 40px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xl, 24px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border-radius: 4px; background: #26928f; } @media screen and (max-width: 750px) { .c-sol-block-b__box { padding: var(--space-2xl, 32px) var(--space-xl, 24px); } } .c-sol-block-b__box__title { color: #fff; font-family: "Noto Sans JP"; font-size: var(--font-size-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: var(--space-sm, 12px); } .c-sol-block-c { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: 0 var(--space-10xl, 128px) var(--space-10xl, 128px) var(--space-10xl, 128px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; gap: var(--space-6xl, 64px); } @media screen and (max-width: 750px) { .c-sol-block-c { padding: 0 var(--space-xl, 24px) var(--space-6xl, 64px) var(--space-xl, 24px); -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } .c-sol-block-c .c-title-a { margin-bottom: 24px; } .c-sol-block-c .c-title-b { margin-bottom: 24px; } .c-sol-menu-list { margin-top: calc(var(--space-xl, 24px) + var(--space-2xl, 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md, 16px); } @media screen and (max-width: 750px) { .c-sol-menu-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); } } .c-sol-menu-card { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-2xl, 32px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: var(--space-2xl, 32px); -webkit-box-flex: 1; -webkit-flex: 1 0 0; -ms-flex: 1 0 0px; flex: 1 0 0; border-radius: 4px; background: var(--color-bg-beige, #f8f5ec); } @media screen and (max-width: 750px) { .c-sol-menu-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: var(--space-2xl, 32px) var(--space-xl, 24px); gap: var(--space-xl, 24px); } } .c-sol-menu-card__image { width: 150px; min-width: 150px; } @media screen and (max-width: 750px) { .c-sol-menu-card__image { width: 100%; } } .c-sol-menu-card__title { color: var(--color-heading, #000); font-family: "Noto Sans JP"; font-size: var(--font-size-lg, 20px); font-style: normal; font-weight: 700; line-height: 1.3; margin-bottom: 12px; } .c-oecm-section { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-6xl, 64px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } @media screen and (max-width: 750px) { .c-oecm-section { padding: 0 var(--space-xl, 24px) var(--space-6xl, 64px); gap: var(--space-3xl, 40px); } } .c-oecm-lead { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-xl, 24px); width: 100%; } .c-oecm-lead .c-title-a { margin-bottom: 0; } .c-oecm-lead .c-title-b { max-width: 100%; margin: 0; } .c-oecm-merit, .c-oecm-merit--clr { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: var(--space-2xl, 32px); width: 100%; padding: var(--space-2xl, 32px); border: 1px solid var(--color-primary, #00a9a5); border-radius: 4px; background: #fff; } @media screen and (max-width: 750px) { .c-oecm-merit, .c-oecm-merit--clr { grid-template-columns: 1fr; gap: var(--space-xl, 24px); padding: var(--space-xl, 24px); } } .c-oecm-merit--clr { background: var(--color-primary, #00a9a5); color: #fff; } .c-oecm-merit--clr .c-oecm-merit__label { background: var(--color-primary-dark, #208b88); } .c-oecm-merit__label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 45px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; padding: var(--space-sm, 12px); border-radius: 4px; background: var(--color-primary, #00a9a5); color: #fff; font-size: var(--font-size-md, 16px); font-weight: 700; line-height: 1.3; text-align: center; } @media screen and (max-width: 750px) { .c-oecm-merit__label { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } .c-oecm-merit__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-md, 16px); min-width: 0; } .c-oecm-merit__list { display: grid; margin: 0; padding: 0; list-style: none; } .c-oecm-merit__list > li { position: relative; padding-left: 1.5em; line-height: 1.8; } .c-oecm-merit__list > li::before { content: ""; position: absolute; top: 0.78em; left: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .c-oecm-card-grid { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: var(--space-md, 16px); width: 100%; } .c-oecm-card-grid > * { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } .c-oecm-photo-card { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-sm, 12px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; text-align: center; } .c-oecm-photo-card figure { width: 100%; margin: 0; } .c-oecm-photo-card img { display: block; width: 100%; aspect-ratio: 4/3; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: 4px; } .c-oecm-photo-card figcaption, .c-oecm-photo-card p { margin: var(--space-sm, 12px) 0 0; font-size: var(--font-size-md, 16px); line-height: 1.3; } .c-oecm-assignment-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md, 16px); width: 100%; } @media screen and (max-width: 750px) { .c-oecm-assignment-list { grid-template-columns: 1fr; } } .c-oecm-flow { display: grid; grid-template-columns: minmax(0, 755px) 350px; gap: var(--space-6xl, 64px); width: 100%; padding: var(--space-6xl, 64px); border-radius: 4px; background: var(--color-primary, #00a9a5); color: #fff; } @media screen and (max-width: 750px) { .c-oecm-flow { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; display: flex; padding: var(--space-2xl, 32px) var(--space-xl, 24px); -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: var(--space-xl, 24px); -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; } } .c-oecm-flow .c-title-a::before { background: #fff; } @media screen and (max-width: 750px) { .c-oecm-flow .c-title-b { font-size: var(--font-size-xl, 24px); } } .c-oecm-flow__title-m { margin: 38px 0 27px !important; } .c-oecm-flow__images { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: var(--space-md, 16px); } @media screen and (max-width: 750px) { .c-oecm-flow__images { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } } .c-oecm-flow__images figure { margin: 0; overflow: hidden; border-radius: 4px; aspect-ratio: 16/9; } .c-oecm-flow__images img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-oecm-table-wrap, .wp-block-table.c-oecm-table, .wp-block-table.c-oecm-table--green { width: 100%; overflow-x: auto; margin: 0; } .c-oecm-table-wrap + .c-oecm-table-wrap, .c-oecm-table-wrap + .wp-block-table.c-oecm-table, .c-oecm-table-wrap + .wp-block-table.c-oecm-table--green, .wp-block-table.c-oecm-table + .c-oecm-table-wrap, .wp-block-table.c-oecm-table--green + .c-oecm-table-wrap, .wp-block-table.c-oecm-table + .wp-block-table.c-oecm-table, .wp-block-table.c-oecm-table--green + .wp-block-table.c-oecm-table, .wp-block-table.c-oecm-table + .wp-block-table.c-oecm-table--green, .wp-block-table.c-oecm-table--green + .wp-block-table.c-oecm-table--green { margin-top: var(--space-2xl, 32px); } @media screen and (max-width: 750px) { .c-oecm-table-wrap, .wp-block-table.c-oecm-table, .wp-block-table.c-oecm-table--green { overflow-x: visible; } } .c-oecm-table, .c-oecm-table--green { width: 100%; font-size: var(--font-size-md, 16px); line-height: 1.8; } .c-oecm-table table, .c-oecm-table--green table { width: 100%; border-collapse: collapse; table-layout: fixed; } .c-oecm-table th, .c-oecm-table--green th, .c-oecm-table td, .c-oecm-table--green td { padding: var(--space-md, 16px); border-top: 1px solid var(--color-border, #ddd); vertical-align: middle; } .c-oecm-table thead th, .c-oecm-table--green thead th, .c-oecm-table thead td, .c-oecm-table--green thead td { background: var(--color-primary, #00a9a5); color: #fff; font-weight: 700; text-align: center; } .c-oecm-table thead th:first-child, .c-oecm-table--green thead th:first-child { background: var(--color-primary-dark, #208b88); } .c-oecm-table tbody th, .c-oecm-table--green tbody th, .c-oecm-table tbody td:first-child, .c-oecm-table--green tbody td:first-child { width: 230px; background: var(--color-bg-beige, #f8f5ec); color: var(--color-p, #04080f); font-weight: 400; text-align: center; } .c-oecm-table tbody td:not(:first-child), .c-oecm-table--green tbody td:not(:first-child) { background: #fff; color: var(--color-p, #04080f); } .c-oecm-table tbody tr:last-child th, .c-oecm-table--green tbody tr:last-child th, .c-oecm-table tbody tr:last-child td, .c-oecm-table--green tbody tr:last-child td { border-bottom: 1px solid var(--color-border, #ddd); } @media screen and (max-width: 750px) { .c-oecm-table th, .c-oecm-table--green th, .c-oecm-table td, .c-oecm-table--green td { padding: var(--space-xs, 8px); } .c-oecm-table tbody th, .c-oecm-table--green tbody th, .c-oecm-table tbody td:first-child, .c-oecm-table--green tbody td:first-child { width: 100px; word-break: break-word; } } .c-oecm-table--green th { border: none; padding: 16px 0 !important; } @media screen and (max-width: 750px) { .c-oecm-table--green th { display: block; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding: var(--space-xs, 8px) var(--space-sm, 12px); -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; border: none; } } .c-oecm-table--green td { border-color: rgba(255, 255, 255, 0.35) !important; padding: 19px 26px 18px !important; } @media screen and (max-width: 750px) { .c-oecm-table--green td { display: block; border: none !important; } } .c-oecm-table--green tbody th, .c-oecm-table--green tbody td:first-child { width: 132px !important; background: var(--color-primary-dark, #208b88) !important; color: #fff; font-weight: 700; border: none; padding: 16px 10px !important; } @media screen and (max-width: 750px) { .c-oecm-table--green tbody th, .c-oecm-table--green tbody td:first-child { width: 100% !important; padding: var(--space-xs, 8px) var(--space-sm, 12px) !important; text-align: left; border: none !important; } } .c-oecm-table--green tbody td:not(:first-child) { background: rgba(255, 255, 255, 0.12); color: #fff; } @media screen and (max-width: 750px) { .c-oecm-table--green tbody td:not(:first-child) { background: none; padding: var(--space-xs, 8px) 0 var(--space-xl, 24px) !important; } } @media screen and (max-width: 750px) { .c-oecm-table--green tbody th, .c-oecm-table--green tbody td:first-child { width: 100px; } } .p-news-archive { padding: var(--space-6xl, 64px) 0 var(--space-10xl, 128px); } @media screen and (max-width: 750px) { .p-news-archive { padding: 32px 24px 64px; } } .p-news-archive .c-list-news > * { border-top: none; border-bottom: 1px solid var(--color-border, #ddd); } /* 404 ______________________________________________*/ .p-404 { text-align: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .p-thanks { text-align: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /*---------------------------------------------------------------- for JavaScript -----------------------------------------------------------------*/ /* .js- ______________________________________________*/ /*---------------------------------------------------------------- 状態管理 -----------------------------------------------------------------*/ /* .is- ______________________________________________*/ .is-tb, .is-tb-flex, .is-tb-inline-flex, .is-tb-inline, .is-tb-inline-block { display: none !important; } .is-sp, .is-sp-flex, .is-sp-inline-flex, .is-sp-inline, .is-sp-inline-block { display: none !important; } .is-pc { display: block !important; } .is-pc-flex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .is-pc-inline-flex { display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } .is-pc-inline { display: inline !important; } .is-pc-inline-block { display: inline-block !important; } @media only screen and (max-width: 750px) { .is-pc, .is-pc-flex, .is-pc-inline-flex, .is-pc-inline, .is-pc-inline-block { display: none !important; } .is-sp { display: block !important; } .is-sp-flex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .is-sp-inline-flex { display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } .is-sp-inline { display: inline !important; } .is-sp-inline-block { display: inline-block !important; } } /*---------------------------------------------------------------- Utilitys -----------------------------------------------------------------*/ /* Grid System ______________________________________________*/ .u-grid { display: grid; gap: 40px; grid-template-columns: repeat(12, minmax(0, 1fr)); } .u-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media screen and (max-width: 750px) { .u-grid--2 { grid-template-columns: 1fr; } } .u-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media screen and (max-width: 750px) { .u-grid--3 { grid-template-columns: 1fr; } } .u-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media screen and (max-width: 750px) { .u-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 750px) { .u-grid--sp-1 { grid-template-columns: 1fr; } .u-grid--sp-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .u-grid--gap-s { gap: 20px; } .u-grid--gap-l { gap: 60px; } .u-grid__col-2 { grid-column: span 2; } .u-grid__col-3 { grid-column: span 3; } .u-grid__col-4 { grid-column: span 4; } .u-grid__col-6 { grid-column: span 6; } .u-grid__col-12 { grid-column: span 12; } @media screen and (max-width: 750px) { .u-grid__col-2, .u-grid__col-3, .u-grid__col-4, .u-grid__col-6 { grid-column: span 12; } .u-grid__col-sp-2 { grid-column: span 2; } .u-grid__col-sp-3 { grid-column: span 3; } .u-grid__col-sp-4 { grid-column: span 4; } .u-grid__col-sp-6 { grid-column: span 6; } .u-grid__col-sp-12 { grid-column: span 12; } } /* カラー ______________________________________________*/ /* モノクロ ______________________________________________*/ .u-mono { -webkit-filter: grayscale(100%); filter: grayscale(100%); } @media screen and (max-width: 750px) { .u-mono--sp { -webkit-filter: grayscale(100%); filter: grayscale(100%); } } /* 背景 ______________________________________________*/ .u-bgCover { background-size: cover; background-position: center; } .u-bgContain { background-size: contain; background-position: center; background-repeat: no-repeat; } @media screen and (max-width: 750px) { .u-bgCover--sp { background-size: cover; background-position: center; } .u-bgContain--sp { background-size: contain; background-position: center; background-repeat: no-repeat; } } /***************************************************** object/_utility.scss *****************************************************/ .u-scroll::-webkit-scrollbar { overflow: hidden; width: 0.5em; } .u-scroll::-webkit-scrollbar:horizontal { height: 0.5em; } .u-scroll::-webkit-scrollbar-button { display: none; } .u-scroll::-webkit-scrollbar-thumb { border-radius: 0.25em; background-color: #c1c1c1; } .u-scroll::-webkit-scrollbar-corner { display: none; } @media screen and (max-width: 750px) { .u-scroll--sp::-webkit-scrollbar { overflow: hidden; width: 0.5em; } .u-scroll--sp::-webkit-scrollbar:horizontal { height: 0.5em; } .u-scroll--sp::-webkit-scrollbar-button { display: none; } .u-scroll--sp::-webkit-scrollbar-thumb { border-radius: 0.25em; background-color: #c1c1c1; } .u-scroll--sp::-webkit-scrollbar-corner { display: none; } } /* ----------------------------------------------- font weight ----------------------------------------------- */ .u-fwBold, .u-fontWeightBold { font-weight: bold !important; } .u-fwNormal, .u-fontWeightNormal { font-weight: normal !important; } @media screen and (max-width: 750px) { .u-fwBold--sp, .u-fontWeightBold--sp { font-weight: bold !important; } .u-fwNormal--sp, .u-fontWeightNormal--sp { font-weight: normal !important; } } /* ----------------------------------------------- font-size ----------------------------------------------- */ .u-fs0_6rem { font-size: 0.6rem !important; } .u-fs0_7rem { font-size: 0.7rem !important; } .u-fs0_8rem { font-size: 0.8rem !important; } .u-fs0_9rem { font-size: 0.9rem !important; } .u-fs1_0rem { font-size: 1rem !important; } .u-fs1rem { font-size: 1rem !important; } .u-fs1_1rem { font-size: 1.1rem !important; } .u-fs1_2rem { font-size: 1.2rem !important; } .u-fs1_3rem { font-size: 1.3rem !important; } .u-fs1_4rem { font-size: 1.4rem !important; } .u-fs1_5rem { font-size: 1.5rem !important; } .u-fs1_6rem { font-size: 1.6rem !important; } .u-fs1_7rem { font-size: 1.7rem !important; } .u-fs1_8rem { font-size: 1.8rem !important; } .u-fs1_9rem { font-size: 1.9rem !important; } .u-fs2_0rem { font-size: 2rem !important; } .u-fs2rem { font-size: 2rem !important; } .u-fs2_1rem { font-size: 2.1rem !important; } .u-fs2_2rem { font-size: 2.2rem !important; } .u-fs2_3rem { font-size: 2.3rem !important; } .u-fs2_4rem { font-size: 2.4rem !important; } .u-fs2_5rem { font-size: 2.5rem !important; } .u-fs2_6rem { font-size: 2.6rem !important; } .u-fs2_7rem { font-size: 2.7rem !important; } .u-fs2_8rem { font-size: 2.8rem !important; } .u-fs2_9rem { font-size: 2.9rem !important; } .u-fs3_0rem { font-size: 3rem !important; } .u-fs3rem { font-size: 3rem !important; } .u-fs3_1rem { font-size: 3.1rem !important; } .u-fs3_2rem { font-size: 3.2rem !important; } .u-fs3_3rem { font-size: 3.3rem !important; } .u-fs3_4rem { font-size: 3.4rem !important; } .u-fs3_5rem { font-size: 3.5rem !important; } .u-fs3_6rem { font-size: 3.6rem !important; } .u-fs3_7rem { font-size: 3.7rem !important; } .u-fs3_8rem { font-size: 3.8rem !important; } .u-fs3_9rem { font-size: 3.9rem !important; } .u-fs4_0rem { font-size: 4rem !important; } .u-fs4rem { font-size: 4rem !important; } .u-fs4_1rem { font-size: 4.1rem !important; } .u-fs4_2rem { font-size: 4.2rem !important; } .u-fs4_3rem { font-size: 4.3rem !important; } .u-fs4_4rem { font-size: 4.4rem !important; } .u-fs4_5rem { font-size: 4.5rem !important; } .u-fs4_6rem { font-size: 4.6rem !important; } .u-fs4_7rem { font-size: 4.7rem !important; } .u-fs4_8rem { font-size: 4.8rem !important; } .u-fs4_9rem { font-size: 4.9rem !important; } .u-fs5_0rem { font-size: 5rem !important; } .u-fs5rem { font-size: 5rem !important; } .u-fs0_1em { font-size: 0.1em !important; } .u-fs0_2em { font-size: 0.2em !important; } .u-fs0_3em { font-size: 0.3em !important; } .u-fs0_4em { font-size: 0.4em !important; } .u-fs0_5em { font-size: 0.5em !important; } .u-fs0_6em { font-size: 0.6em !important; } .u-fs0_7em { font-size: 0.7em !important; } .u-fs0_8em { font-size: 0.8em !important; } .u-fs0_9em { font-size: 0.9em !important; } .u-fs1_0em { font-size: 1em !important; } .u-fs1em { font-size: 1em !important; } .u-fs1_1em { font-size: 1.1em !important; } .u-fs1_2em { font-size: 1.2em !important; } .u-fs1_3em { font-size: 1.3em !important; } .u-fs1_4em { font-size: 1.4em !important; } .u-fs1_5em { font-size: 1.5em !important; } .u-fs1_6em { font-size: 1.6em !important; } .u-fs1_7em { font-size: 1.7em !important; } .u-fs1_8em { font-size: 1.8em !important; } .u-fs1_9em { font-size: 1.9em !important; } .u-fs2_0em { font-size: 2em !important; } .u-fs2em { font-size: 2em !important; } .u-fs2_1em { font-size: 2.1em !important; } .u-fs2_2em { font-size: 2.2em !important; } .u-fs2_3em { font-size: 2.3em !important; } .u-fs2_4em { font-size: 2.4em !important; } .u-fs2_5em { font-size: 2.5em !important; } .u-fs2_6em { font-size: 2.6em !important; } .u-fs2_7em { font-size: 2.7em !important; } .u-fs2_8em { font-size: 2.8em !important; } .u-fs2_9em { font-size: 2.9em !important; } .u-fs3_0em { font-size: 3em !important; } .u-fs3em { font-size: 3em !important; } @media screen and (max-width: 750px) { .u-fs0_6rem--sp { font-size: 0.6rem !important; } .u-fs0_7rem--sp { font-size: 0.7rem !important; } .u-fs0_8rem--sp { font-size: 0.8rem !important; } .u-fs0_9rem--sp { font-size: 0.9rem !important; } .u-fs1_0rem--sp { font-size: 1rem !important; } .u-fs1rem--sp { font-size: 1rem !important; } .u-fs1_1rem--sp { font-size: 1.1rem !important; } .u-fs1_2rem--sp { font-size: 1.2rem !important; } .u-fs1_3rem--sp { font-size: 1.3rem !important; } .u-fs1_4rem--sp { font-size: 1.4rem !important; } .u-fs1_5rem--sp { font-size: 1.5rem !important; } .u-fs1_6rem--sp { font-size: 1.6rem !important; } .u-fs1_7rem--sp { font-size: 1.7rem !important; } .u-fs1_8rem--sp { font-size: 1.8rem !important; } .u-fs1_9rem--sp { font-size: 1.9rem !important; } .u-fs2_0rem--sp { font-size: 2rem !important; } .u-fs2rem--sp { font-size: 2rem !important; } .u-fs2_1rem--sp { font-size: 2.1rem !important; } .u-fs2_2rem--sp { font-size: 2.2rem !important; } .u-fs2_3rem--sp { font-size: 2.3rem !important; } .u-fs2_4rem--sp { font-size: 2.4rem !important; } .u-fs2_5rem--sp { font-size: 2.5rem !important; } .u-fs2_6rem--sp { font-size: 2.6rem !important; } .u-fs2_7rem--sp { font-size: 2.7rem !important; } .u-fs2_8rem--sp { font-size: 2.8rem !important; } .u-fs2_9rem--sp { font-size: 2.9rem !important; } .u-fs3_0rem--sp { font-size: 3rem !important; } .u-fs3rem--sp { font-size: 3rem !important; } .u-fs3_1rem--sp { font-size: 3.1rem !important; } .u-fs3_2rem--sp { font-size: 3.2rem !important; } .u-fs3_3rem--sp { font-size: 3.3rem !important; } .u-fs3_4rem--sp { font-size: 3.4rem !important; } .u-fs3_5rem--sp { font-size: 3.5rem !important; } .u-fs3_6rem--sp { font-size: 3.6rem !important; } .u-fs3_7rem--sp { font-size: 3.7rem !important; } .u-fs3_8rem--sp { font-size: 3.8rem !important; } .u-fs3_9rem--sp { font-size: 3.9rem !important; } .u-fs4_0rem--sp { font-size: 4rem !important; } .u-fs4rem--sp { font-size: 4rem !important; } .u-fs4_1rem--sp { font-size: 4.1rem !important; } .u-fs4_2rem--sp { font-size: 4.2rem !important; } .u-fs4_3rem--sp { font-size: 4.3rem !important; } .u-fs4_4rem--sp { font-size: 4.4rem !important; } .u-fs4_5rem--sp { font-size: 4.5rem !important; } .u-fs4_6rem--sp { font-size: 4.6rem !important; } .u-fs4_7rem--sp { font-size: 4.7rem !important; } .u-fs4_8rem--sp { font-size: 4.8rem !important; } .u-fs4_9rem--sp { font-size: 4.9rem !important; } .u-fs5_0rem--sp { font-size: 5rem !important; } .u-fs5rem--sp { font-size: 5rem !important; } .u-fs0_1em--sp { font-size: 0.1em !important; } .u-fs0_2em--sp { font-size: 0.2em !important; } .u-fs0_3em--sp { font-size: 0.3em !important; } .u-fs0_4em--sp { font-size: 0.4em !important; } .u-fs0_5em--sp { font-size: 0.5em !important; } .u-fs0_6em--sp { font-size: 0.6em !important; } .u-fs0_7em--sp { font-size: 0.7em !important; } .u-fs0_8em--sp { font-size: 0.8em !important; } .u-fs0_9em--sp { font-size: 0.9em !important; } .u-fs1_0em--sp { font-size: 1em !important; } .u-fs1em--sp { font-size: 1em !important; } .u-fs1_1em--sp { font-size: 1.1em !important; } .u-fs1_2em--sp { font-size: 1.2em !important; } .u-fs1_3em--sp { font-size: 1.3em !important; } .u-fs1_4em--sp { font-size: 1.4em !important; } .u-fs1_5em--sp { font-size: 1.5em !important; } .u-fs1_6em--sp { font-size: 1.6em !important; } .u-fs1_7em--sp { font-size: 1.7em !important; } .u-fs1_8em--sp { font-size: 1.8em !important; } .u-fs1_9em--sp { font-size: 1.9em !important; } .u-fs2_0em--sp { font-size: 2em !important; } .u-fs2em--sp { font-size: 2em !important; } .u-fs2_1em--sp { font-size: 2.1em !important; } .u-fs2_2em--sp { font-size: 2.2em !important; } .u-fs2_3em--sp { font-size: 2.3em !important; } .u-fs2_4em--sp { font-size: 2.4em !important; } .u-fs2_5em--sp { font-size: 2.5em !important; } .u-fs2_6em--sp { font-size: 2.6em !important; } .u-fs2_7em--sp { font-size: 2.7em !important; } .u-fs2_8em--sp { font-size: 2.8em !important; } .u-fs2_9em--sp { font-size: 2.9em !important; } .u-fs3_0em--sp { font-size: 3em !important; } .u-fs3em--sp { font-size: 3em !important; } } /* ----------------------------------------------- float ----------------------------------------------- */ .u-floatRight { float: right !important; } .u-floatLeft { float: left !important; } .u-floatNone { float: none !important; } @media screen and (max-width: 750px) { .u-floatRight--sp { float: right !important; } .u-floatLeft--sp { float: left !important; } .u-floatNone--sp { float: none !important; } } /* ----------------------------------------------- position ----------------------------------------------- */ .u-pRelative { position: relative !important; } .u-pAbsolute { position: absolute !important; } .u-pStatic { position: static !important; } .u-pFixed { position: fixed !important; } @media screen and (max-width: 750px) { .u-pRelative--sp { position: relative !important; } .u-pAbsolute--sp { position: absolute !important; } .u-pStatic--sp { position: static !important; } .u-pFixed--sp { position: fixed !important; } } /* ----------------------------------------------- white-space ----------------------------------------------- */ .u-wsNowrap { white-space: nowrap !important; } .u-nowrap { white-space: nowrap !important; } .u-wsNormal { white-space: normal !important; } @media screen and (max-width: 750px) { .u-wsNowrap--sp { white-space: nowrap !important; } .u-nowrap--sp { white-space: nowrap !important; } .u-wsNormal--sp { white-space: normal !important; } } /* ----------------------------------------------- line-height ----------------------------------------------- */ .u-lh1_1 { line-height: 1.1; } .u-lh1_2 { line-height: 1.2; } .u-lh1_3 { line-height: 1.3; } .u-lh1_4 { line-height: 1.4; } .u-lh1_5 { line-height: 1.5; } .u-lh1_6 { line-height: 1.6; } .u-lh1_7 { line-height: 1.7; } .u-lh1_8 { line-height: 1.8; } .u-lh1_9 { line-height: 1.9; } .u-lh2_0 { line-height: 2; } .u-lh2_1 { line-height: 2.1; } .u-lh2_2 { line-height: 2.2; } .u-lh2_3 { line-height: 2.3; } .u-lh2_4 { line-height: 2.4; } .u-lh2_5 { line-height: 2.5; } .u-lh2_6 { line-height: 2.6; } .u-lh2_7 { line-height: 2.7; } .u-lh2_8 { line-height: 2.8; } .u-lh2_9 { line-height: 2.9; } .u-lh3_0 { line-height: 3; } .u-lh3_1 { line-height: 3.1; } .u-lh3_2 { line-height: 3.2; } .u-lh3_3 { line-height: 3.3; } .u-lh3_4 { line-height: 3.4; } .u-lh3_5 { line-height: 3.5; } .u-lh3_6 { line-height: 3.6; } .u-lh3_7 { line-height: 3.7; } .u-lh3_8 { line-height: 3.8; } .u-lh3_9 { line-height: 3.9; } .u-lh4_0 { line-height: 4; } @media screen and (max-width: 750px) { .u-lh1_1 { line-height: 1.1; } .u-lh1_2 { line-height: 1.2; } .u-lh1_3 { line-height: 1.3; } .u-lh1_4 { line-height: 1.4; } .u-lh1_5 { line-height: 1.5; } .u-lh1_6 { line-height: 1.6; } .u-lh1_7 { line-height: 1.7; } .u-lh1_8 { line-height: 1.8; } .u-lh1_9 { line-height: 1.9; } .u-lh2_0 { line-height: 2; } .u-lh2_1 { line-height: 2.1; } .u-lh2_2 { line-height: 2.2; } .u-lh2_3 { line-height: 2.3; } .u-lh2_4 { line-height: 2.4; } .u-lh2_5 { line-height: 2.5; } .u-lh2_6 { line-height: 2.6; } .u-lh2_7 { line-height: 2.7; } .u-lh2_8 { line-height: 2.8; } .u-lh2_9 { line-height: 2.9; } .u-lh3_0 { line-height: 3; } .u-lh3_1 { line-height: 3.1; } .u-lh3_2 { line-height: 3.2; } .u-lh3_3 { line-height: 3.3; } .u-lh3_4 { line-height: 3.4; } .u-lh3_5 { line-height: 3.5; } .u-lh3_6 { line-height: 3.6; } .u-lh3_7 { line-height: 3.7; } .u-lh3_8 { line-height: 3.8; } .u-lh3_9 { line-height: 3.9; } .u-lh4_0 { line-height: 4; } } /* ----------------------------------------------- Width ----------------------------------------------- */ .u-w0 { width: 0% !important; } .u-w10 { width: 10% !important; } .u-w20 { width: 20% !important; } .u-w30 { width: 30% !important; } .u-w40 { width: 40% !important; } .u-w50 { width: 50% !important; } .u-w60 { width: 60% !important; } .u-w70 { width: 70% !important; } .u-w80 { width: 80% !important; } .u-w90 { width: 90% !important; } .u-w100 { width: 100% !important; } @media screen and (max-width: 750px) { .u-w0--sp { width: 0% !important; } .u-w10--sp { width: 10% !important; } .u-w20--sp { width: 20% !important; } .u-w30--sp { width: 30% !important; } .u-w40--sp { width: 40% !important; } .u-w50--sp { width: 50% !important; } .u-w60--sp { width: 60% !important; } .u-w70--sp { width: 70% !important; } .u-w80--sp { width: 80% !important; } .u-w90--sp { width: 90% !important; } .u-w100--sp { width: 100% !important; } } /* ----------------------------------------------- Flex Box ----------------------------------------------- */ .u-flexItem { -webkit-box-flex: 1 !important; -webkit-flex: 1 1 0% !important; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important; } .u-flexAuto { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-flexAuto > * { -webkit-box-flex: 1 !important; -webkit-flex: 1 1 0% !important; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important; } .u-flexWrap { -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-flexNowrap { -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .u-flex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .u-flexLeft { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .u-flexCenter { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .u-flexRight { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end !important; -webkit-justify-content: flex-end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .u-flexBetween { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify !important; -webkit-justify-content: space-between !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .u-flexAround { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: space-around !important; -ms-flex-pack: distribute !important; justify-content: space-around !important; } .u-flexTop { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .u-flexMiddle { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; } .u-flexBottom { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: end !important; -webkit-align-items: flex-end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .u-flexReverse { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -webkit-flex-direction: row-reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .u-flexItemTop { -webkit-align-self: flex-start !important; -ms-flex-item-align: start !important; align-self: flex-start !important; } .u-flexItemMiddle { -webkit-align-self: center !important; -ms-flex-item-align: center !important; align-self: center !important; } .u-flexItemBottom { -webkit-align-self: flex-end !important; -ms-flex-item-align: end !important; align-self: flex-end !important; } @media screen and (max-width: 750px) { .u-flexItem--sp { -webkit-box-flex: 1 !important; -webkit-flex: 1 1 0% !important; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important; } .u-flexAuto--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-flexAuto--sp > * { -webkit-box-flex: 1 !important; -webkit-flex: 1 1 0% !important; -ms-flex: 1 1 0% !important; flex: 1 1 0% !important; } .u-flexWrap--sp { -webkit-flex-wrap: wrap !important; -ms-flex-wrap: wrap !important; flex-wrap: wrap !important; } .u-flexNowrap--sp { -webkit-flex-wrap: nowrap !important; -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; } .u-flex--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .u-flexLeft--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: start !important; -webkit-justify-content: flex-start !important; -ms-flex-pack: start !important; justify-content: flex-start !important; } .u-flexCenter--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: center !important; -webkit-justify-content: center !important; -ms-flex-pack: center !important; justify-content: center !important; } .u-flexRight--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end !important; -webkit-justify-content: flex-end !important; -ms-flex-pack: end !important; justify-content: flex-end !important; } .u-flexBetween--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: justify !important; -webkit-justify-content: space-between !important; -ms-flex-pack: justify !important; justify-content: space-between !important; } .u-flexAround--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-justify-content: space-around !important; -ms-flex-pack: distribute !important; justify-content: space-around !important; } .u-flexTop--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: start !important; -webkit-align-items: flex-start !important; -ms-flex-align: start !important; align-items: flex-start !important; } .u-flexMiddle--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; } .u-flexBottom--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: end !important; -webkit-align-items: flex-end !important; -ms-flex-align: end !important; align-items: flex-end !important; } .u-flexReverse--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: horizontal !important; -webkit-box-direction: reverse !important; -webkit-flex-direction: row-reverse !important; -ms-flex-direction: row-reverse !important; flex-direction: row-reverse !important; } .u-flexItemTop--sp { -webkit-align-self: flex-start !important; -ms-flex-item-align: start !important; align-self: flex-start !important; } .u-flexItemMiddle--sp { -webkit-align-self: center !important; -ms-flex-item-align: center !important; align-self: center !important; } .u-flexItemBottom--sp { -webkit-align-self: flex-end !important; -ms-flex-item-align: end !important; align-self: flex-end !important; } } /* ----------------------------------------------- text-arign ----------------------------------------------- */ .u-taCenter { text-align: center !important; } .u-taLeft { text-align: left !important; } .u-taRight { text-align: right !important; } @media screen and (max-width: 750px) { .u-taCenter--sp { text-align: center !important; } .u-taLeft--sp { text-align: left !important; } .u-taRight--sp { text-align: right !important; } } /* ----------------------------------------------- display ----------------------------------------------- */ .u-dNone { display: none !important; } .u-dBlock { display: block !important; } .u-dInline { display: inline !important; } .u-dTable { display: table !important; } .u-dTableCell { display: table-cell !important; } .u-dFlex { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .u-dInlineFlex { display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } @media screen and (max-width: 750px) { .u-dNone--sp { display: none !important; } .u-dBlock--sp { display: block !important; } .u-dInline--sp { display: inline !important; } .u-dTable--sp { display: table !important; } .u-dTableCell--sp { display: table-cell !important; } .u-dFlex--sp { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } .u-dInlineFlex--sp { display: -webkit-inline-box !important; display: -webkit-inline-flex !important; display: -ms-inline-flexbox !important; display: inline-flex !important; } } /* ----------------------------------------------- margin padding ----------------------------------------------- */ .u-m0px { margin: 0px !important; } .u-mt0px { margin-top: 0px !important; } .u-mb0px { margin-bottom: 0px !important; } .u-ml0px { margin-left: 0px !important; } .u-mr0px { margin-right: 0px !important; } .u-pt0px { padding-top: 0px !important; } .u-pb0px { padding-bottom: 0px !important; } .u-pl0px { padding-left: 0px !important; } .u-pr0px { padding-right: 0px !important; } .u-p0px { padding: 0px !important; } .u-m5px { margin: 5px !important; } .u-mt5px { margin-top: 5px !important; } .u-mb5px { margin-bottom: 5px !important; } .u-ml5px { margin-left: 5px !important; } .u-mr5px { margin-right: 5px !important; } .u-pt5px { padding-top: 5px !important; } .u-pb5px { padding-bottom: 5px !important; } .u-pl5px { padding-left: 5px !important; } .u-pr5px { padding-right: 5px !important; } .u-p5px { padding: 5px !important; } .u-m10px { margin: 10px !important; } .u-mt10px { margin-top: 10px !important; } .u-mb10px { margin-bottom: 10px !important; } .u-ml10px { margin-left: 10px !important; } .u-mr10px { margin-right: 10px !important; } .u-pt10px { padding-top: 10px !important; } .u-pb10px { padding-bottom: 10px !important; } .u-pl10px { padding-left: 10px !important; } .u-pr10px { padding-right: 10px !important; } .u-p10px { padding: 10px !important; } .u-m15px { margin: 15px !important; } .u-mt15px { margin-top: 15px !important; } .u-mb15px { margin-bottom: 15px !important; } .u-ml15px { margin-left: 15px !important; } .u-mr15px { margin-right: 15px !important; } .u-pt15px { padding-top: 15px !important; } .u-pb15px { padding-bottom: 15px !important; } .u-pl15px { padding-left: 15px !important; } .u-pr15px { padding-right: 15px !important; } .u-p15px { padding: 15px !important; } .u-m20px { margin: 20px !important; } .u-mt20px { margin-top: 20px !important; } .u-mb20px { margin-bottom: 20px !important; } .u-ml20px { margin-left: 20px !important; } .u-mr20px { margin-right: 20px !important; } .u-pt20px { padding-top: 20px !important; } .u-pb20px { padding-bottom: 20px !important; } .u-pl20px { padding-left: 20px !important; } .u-pr20px { padding-right: 20px !important; } .u-p20px { padding: 20px !important; } .u-m25px { margin: 25px !important; } .u-mt25px { margin-top: 25px !important; } .u-mb25px { margin-bottom: 25px !important; } .u-ml25px { margin-left: 25px !important; } .u-mr25px { margin-right: 25px !important; } .u-pt25px { padding-top: 25px !important; } .u-pb25px { padding-bottom: 25px !important; } .u-pl25px { padding-left: 25px !important; } .u-pr25px { padding-right: 25px !important; } .u-p25px { padding: 25px !important; } .u-m30px { margin: 30px !important; } .u-mt30px { margin-top: 30px !important; } .u-mb30px { margin-bottom: 30px !important; } .u-ml30px { margin-left: 30px !important; } .u-mr30px { margin-right: 30px !important; } .u-pt30px { padding-top: 30px !important; } .u-pb30px { padding-bottom: 30px !important; } .u-pl30px { padding-left: 30px !important; } .u-pr30px { padding-right: 30px !important; } .u-p30px { padding: 30px !important; } .u-m35px { margin: 35px !important; } .u-mt35px { margin-top: 35px !important; } .u-mb35px { margin-bottom: 35px !important; } .u-ml35px { margin-left: 35px !important; } .u-mr35px { margin-right: 35px !important; } .u-pt35px { padding-top: 35px !important; } .u-pb35px { padding-bottom: 35px !important; } .u-pl35px { padding-left: 35px !important; } .u-pr35px { padding-right: 35px !important; } .u-p35px { padding: 35px !important; } .u-m40px { margin: 40px !important; } .u-mt40px { margin-top: 40px !important; } .u-mb40px { margin-bottom: 40px !important; } .u-ml40px { margin-left: 40px !important; } .u-mr40px { margin-right: 40px !important; } .u-pt40px { padding-top: 40px !important; } .u-pb40px { padding-bottom: 40px !important; } .u-pl40px { padding-left: 40px !important; } .u-pr40px { padding-right: 40px !important; } .u-p40px { padding: 40px !important; } .u-m45px { margin: 45px !important; } .u-mt45px { margin-top: 45px !important; } .u-mb45px { margin-bottom: 45px !important; } .u-ml45px { margin-left: 45px !important; } .u-mr45px { margin-right: 45px !important; } .u-pt45px { padding-top: 45px !important; } .u-pb45px { padding-bottom: 45px !important; } .u-pl45px { padding-left: 45px !important; } .u-pr45px { padding-right: 45px !important; } .u-p45px { padding: 45px !important; } .u-m50px { margin: 50px !important; } .u-mt50px { margin-top: 50px !important; } .u-mb50px { margin-bottom: 50px !important; } .u-ml50px { margin-left: 50px !important; } .u-mr50px { margin-right: 50px !important; } .u-pt50px { padding-top: 50px !important; } .u-pb50px { padding-bottom: 50px !important; } .u-pl50px { padding-left: 50px !important; } .u-pr50px { padding-right: 50px !important; } .u-p50px { padding: 50px !important; } .u-m55px { margin: 55px !important; } .u-mt55px { margin-top: 55px !important; } .u-mb55px { margin-bottom: 55px !important; } .u-ml55px { margin-left: 55px !important; } .u-mr55px { margin-right: 55px !important; } .u-pt55px { padding-top: 55px !important; } .u-pb55px { padding-bottom: 55px !important; } .u-pl55px { padding-left: 55px !important; } .u-pr55px { padding-right: 55px !important; } .u-p55px { padding: 55px !important; } .u-m60px { margin: 60px !important; } .u-mt60px { margin-top: 60px !important; } .u-mb60px { margin-bottom: 60px !important; } .u-ml60px { margin-left: 60px !important; } .u-mr60px { margin-right: 60px !important; } .u-pt60px { padding-top: 60px !important; } .u-pb60px { padding-bottom: 60px !important; } .u-pl60px { padding-left: 60px !important; } .u-pr60px { padding-right: 60px !important; } .u-p60px { padding: 60px !important; } .u-m65px { margin: 65px !important; } .u-mt65px { margin-top: 65px !important; } .u-mb65px { margin-bottom: 65px !important; } .u-ml65px { margin-left: 65px !important; } .u-mr65px { margin-right: 65px !important; } .u-pt65px { padding-top: 65px !important; } .u-pb65px { padding-bottom: 65px !important; } .u-pl65px { padding-left: 65px !important; } .u-pr65px { padding-right: 65px !important; } .u-p65px { padding: 65px !important; } .u-m70px { margin: 70px !important; } .u-mt70px { margin-top: 70px !important; } .u-mb70px { margin-bottom: 70px !important; } .u-ml70px { margin-left: 70px !important; } .u-mr70px { margin-right: 70px !important; } .u-pt70px { padding-top: 70px !important; } .u-pb70px { padding-bottom: 70px !important; } .u-pl70px { padding-left: 70px !important; } .u-pr70px { padding-right: 70px !important; } .u-p70px { padding: 70px !important; } .u-m75px { margin: 75px !important; } .u-mt75px { margin-top: 75px !important; } .u-mb75px { margin-bottom: 75px !important; } .u-ml75px { margin-left: 75px !important; } .u-mr75px { margin-right: 75px !important; } .u-pt75px { padding-top: 75px !important; } .u-pb75px { padding-bottom: 75px !important; } .u-pl75px { padding-left: 75px !important; } .u-pr75px { padding-right: 75px !important; } .u-p75px { padding: 75px !important; } .u-m80px { margin: 80px !important; } .u-mt80px { margin-top: 80px !important; } .u-mb80px { margin-bottom: 80px !important; } .u-ml80px { margin-left: 80px !important; } .u-mr80px { margin-right: 80px !important; } .u-pt80px { padding-top: 80px !important; } .u-pb80px { padding-bottom: 80px !important; } .u-pl80px { padding-left: 80px !important; } .u-pr80px { padding-right: 80px !important; } .u-p80px { padding: 80px !important; } .u-m85px { margin: 85px !important; } .u-mt85px { margin-top: 85px !important; } .u-mb85px { margin-bottom: 85px !important; } .u-ml85px { margin-left: 85px !important; } .u-mr85px { margin-right: 85px !important; } .u-pt85px { padding-top: 85px !important; } .u-pb85px { padding-bottom: 85px !important; } .u-pl85px { padding-left: 85px !important; } .u-pr85px { padding-right: 85px !important; } .u-p85px { padding: 85px !important; } .u-m90px { margin: 90px !important; } .u-mt90px { margin-top: 90px !important; } .u-mb90px { margin-bottom: 90px !important; } .u-ml90px { margin-left: 90px !important; } .u-mr90px { margin-right: 90px !important; } .u-pt90px { padding-top: 90px !important; } .u-pb90px { padding-bottom: 90px !important; } .u-pl90px { padding-left: 90px !important; } .u-pr90px { padding-right: 90px !important; } .u-p90px { padding: 90px !important; } .u-m95px { margin: 95px !important; } .u-mt95px { margin-top: 95px !important; } .u-mb95px { margin-bottom: 95px !important; } .u-ml95px { margin-left: 95px !important; } .u-mr95px { margin-right: 95px !important; } .u-pt95px { padding-top: 95px !important; } .u-pb95px { padding-bottom: 95px !important; } .u-pl95px { padding-left: 95px !important; } .u-pr95px { padding-right: 95px !important; } .u-p95px { padding: 95px !important; } .u-m100px { margin: 100px !important; } .u-mt100px { margin-top: 100px !important; } .u-mb100px { margin-bottom: 100px !important; } .u-ml100px { margin-left: 100px !important; } .u-mr100px { margin-right: 100px !important; } .u-pt100px { padding-top: 100px !important; } .u-pb100px { padding-bottom: 100px !important; } .u-pl100px { padding-left: 100px !important; } .u-pr100px { padding-right: 100px !important; } .u-p100px { padding: 100px !important; } @media screen and (max-width: 750px) { .u-m0px--sp { margin: 0px !important; } .u-mt0px--sp { margin-top: 0px !important; } .u-mb0px--sp { margin-bottom: 0px !important; } .u-ml0px--sp { margin-left: 0px !important; } .u-mr0px--sp { margin-right: 0px !important; } .u-pt0px--sp { padding-top: 0px !important; } .u-pb0px--sp { padding-bottom: 0px !important; } .u-pl0px--sp { padding-left: 0px !important; } .u-pr0px--sp { padding-right: 0px !important; } .u-p0px--sp { padding: 0px !important; } .u-m5px--sp { margin: 5px !important; } .u-mt5px--sp { margin-top: 5px !important; } .u-mb5px--sp { margin-bottom: 5px !important; } .u-ml5px--sp { margin-left: 5px !important; } .u-mr5px--sp { margin-right: 5px !important; } .u-pt5px--sp { padding-top: 5px !important; } .u-pb5px--sp { padding-bottom: 5px !important; } .u-pl5px--sp { padding-left: 5px !important; } .u-pr5px--sp { padding-right: 5px !important; } .u-p5px--sp { padding: 5px !important; } .u-m10px--sp { margin: 10px !important; } .u-mt10px--sp { margin-top: 10px !important; } .u-mb10px--sp { margin-bottom: 10px !important; } .u-ml10px--sp { margin-left: 10px !important; } .u-mr10px--sp { margin-right: 10px !important; } .u-pt10px--sp { padding-top: 10px !important; } .u-pb10px--sp { padding-bottom: 10px !important; } .u-pl10px--sp { padding-left: 10px !important; } .u-pr10px--sp { padding-right: 10px !important; } .u-p10px--sp { padding: 10px !important; } .u-m15px--sp { margin: 15px !important; } .u-mt15px--sp { margin-top: 15px !important; } .u-mb15px--sp { margin-bottom: 15px !important; } .u-ml15px--sp { margin-left: 15px !important; } .u-mr15px--sp { margin-right: 15px !important; } .u-pt15px--sp { padding-top: 15px !important; } .u-pb15px--sp { padding-bottom: 15px !important; } .u-pl15px--sp { padding-left: 15px !important; } .u-pr15px--sp { padding-right: 15px !important; } .u-p15px--sp { padding: 15px !important; } .u-m20px--sp { margin: 20px !important; } .u-mt20px--sp { margin-top: 20px !important; } .u-mb20px--sp { margin-bottom: 20px !important; } .u-ml20px--sp { margin-left: 20px !important; } .u-mr20px--sp { margin-right: 20px !important; } .u-pt20px--sp { padding-top: 20px !important; } .u-pb20px--sp { padding-bottom: 20px !important; } .u-pl20px--sp { padding-left: 20px !important; } .u-pr20px--sp { padding-right: 20px !important; } .u-p20px--sp { padding: 20px !important; } .u-m25px--sp { margin: 25px !important; } .u-mt25px--sp { margin-top: 25px !important; } .u-mb25px--sp { margin-bottom: 25px !important; } .u-ml25px--sp { margin-left: 25px !important; } .u-mr25px--sp { margin-right: 25px !important; } .u-pt25px--sp { padding-top: 25px !important; } .u-pb25px--sp { padding-bottom: 25px !important; } .u-pl25px--sp { padding-left: 25px !important; } .u-pr25px--sp { padding-right: 25px !important; } .u-p25px--sp { padding: 25px !important; } .u-m30px--sp { margin: 30px !important; } .u-mt30px--sp { margin-top: 30px !important; } .u-mb30px--sp { margin-bottom: 30px !important; } .u-ml30px--sp { margin-left: 30px !important; } .u-mr30px--sp { margin-right: 30px !important; } .u-pt30px--sp { padding-top: 30px !important; } .u-pb30px--sp { padding-bottom: 30px !important; } .u-pl30px--sp { padding-left: 30px !important; } .u-pr30px--sp { padding-right: 30px !important; } .u-p30px--sp { padding: 30px !important; } .u-m35px--sp { margin: 35px !important; } .u-mt35px--sp { margin-top: 35px !important; } .u-mb35px--sp { margin-bottom: 35px !important; } .u-ml35px--sp { margin-left: 35px !important; } .u-mr35px--sp { margin-right: 35px !important; } .u-pt35px--sp { padding-top: 35px !important; } .u-pb35px--sp { padding-bottom: 35px !important; } .u-pl35px--sp { padding-left: 35px !important; } .u-pr35px--sp { padding-right: 35px !important; } .u-p35px--sp { padding: 35px !important; } .u-m40px--sp { margin: 40px !important; } .u-mt40px--sp { margin-top: 40px !important; } .u-mb40px--sp { margin-bottom: 40px !important; } .u-ml40px--sp { margin-left: 40px !important; } .u-mr40px--sp { margin-right: 40px !important; } .u-pt40px--sp { padding-top: 40px !important; } .u-pb40px--sp { padding-bottom: 40px !important; } .u-pl40px--sp { padding-left: 40px !important; } .u-pr40px--sp { padding-right: 40px !important; } .u-p40px--sp { padding: 40px !important; } .u-m45px--sp { margin: 45px !important; } .u-mt45px--sp { margin-top: 45px !important; } .u-mb45px--sp { margin-bottom: 45px !important; } .u-ml45px--sp { margin-left: 45px !important; } .u-mr45px--sp { margin-right: 45px !important; } .u-pt45px--sp { padding-top: 45px !important; } .u-pb45px--sp { padding-bottom: 45px !important; } .u-pl45px--sp { padding-left: 45px !important; } .u-pr45px--sp { padding-right: 45px !important; } .u-p45px--sp { padding: 45px !important; } .u-m50px--sp { margin: 50px !important; } .u-mt50px--sp { margin-top: 50px !important; } .u-mb50px--sp { margin-bottom: 50px !important; } .u-ml50px--sp { margin-left: 50px !important; } .u-mr50px--sp { margin-right: 50px !important; } .u-pt50px--sp { padding-top: 50px !important; } .u-pb50px--sp { padding-bottom: 50px !important; } .u-pl50px--sp { padding-left: 50px !important; } .u-pr50px--sp { padding-right: 50px !important; } .u-p50px--sp { padding: 50px !important; } .u-m55px--sp { margin: 55px !important; } .u-mt55px--sp { margin-top: 55px !important; } .u-mb55px--sp { margin-bottom: 55px !important; } .u-ml55px--sp { margin-left: 55px !important; } .u-mr55px--sp { margin-right: 55px !important; } .u-pt55px--sp { padding-top: 55px !important; } .u-pb55px--sp { padding-bottom: 55px !important; } .u-pl55px--sp { padding-left: 55px !important; } .u-pr55px--sp { padding-right: 55px !important; } .u-p55px--sp { padding: 55px !important; } .u-m60px--sp { margin: 60px !important; } .u-mt60px--sp { margin-top: 60px !important; } .u-mb60px--sp { margin-bottom: 60px !important; } .u-ml60px--sp { margin-left: 60px !important; } .u-mr60px--sp { margin-right: 60px !important; } .u-pt60px--sp { padding-top: 60px !important; } .u-pb60px--sp { padding-bottom: 60px !important; } .u-pl60px--sp { padding-left: 60px !important; } .u-pr60px--sp { padding-right: 60px !important; } .u-p60px--sp { padding: 60px !important; } .u-m65px--sp { margin: 65px !important; } .u-mt65px--sp { margin-top: 65px !important; } .u-mb65px--sp { margin-bottom: 65px !important; } .u-ml65px--sp { margin-left: 65px !important; } .u-mr65px--sp { margin-right: 65px !important; } .u-pt65px--sp { padding-top: 65px !important; } .u-pb65px--sp { padding-bottom: 65px !important; } .u-pl65px--sp { padding-left: 65px !important; } .u-pr65px--sp { padding-right: 65px !important; } .u-p65px--sp { padding: 65px !important; } .u-m70px--sp { margin: 70px !important; } .u-mt70px--sp { margin-top: 70px !important; } .u-mb70px--sp { margin-bottom: 70px !important; } .u-ml70px--sp { margin-left: 70px !important; } .u-mr70px--sp { margin-right: 70px !important; } .u-pt70px--sp { padding-top: 70px !important; } .u-pb70px--sp { padding-bottom: 70px !important; } .u-pl70px--sp { padding-left: 70px !important; } .u-pr70px--sp { padding-right: 70px !important; } .u-p70px--sp { padding: 70px !important; } .u-m75px--sp { margin: 75px !important; } .u-mt75px--sp { margin-top: 75px !important; } .u-mb75px--sp { margin-bottom: 75px !important; } .u-ml75px--sp { margin-left: 75px !important; } .u-mr75px--sp { margin-right: 75px !important; } .u-pt75px--sp { padding-top: 75px !important; } .u-pb75px--sp { padding-bottom: 75px !important; } .u-pl75px--sp { padding-left: 75px !important; } .u-pr75px--sp { padding-right: 75px !important; } .u-p75px--sp { padding: 75px !important; } .u-m80px--sp { margin: 80px !important; } .u-mt80px--sp { margin-top: 80px !important; } .u-mb80px--sp { margin-bottom: 80px !important; } .u-ml80px--sp { margin-left: 80px !important; } .u-mr80px--sp { margin-right: 80px !important; } .u-pt80px--sp { padding-top: 80px !important; } .u-pb80px--sp { padding-bottom: 80px !important; } .u-pl80px--sp { padding-left: 80px !important; } .u-pr80px--sp { padding-right: 80px !important; } .u-p80px--sp { padding: 80px !important; } .u-m85px--sp { margin: 85px !important; } .u-mt85px--sp { margin-top: 85px !important; } .u-mb85px--sp { margin-bottom: 85px !important; } .u-ml85px--sp { margin-left: 85px !important; } .u-mr85px--sp { margin-right: 85px !important; } .u-pt85px--sp { padding-top: 85px !important; } .u-pb85px--sp { padding-bottom: 85px !important; } .u-pl85px--sp { padding-left: 85px !important; } .u-pr85px--sp { padding-right: 85px !important; } .u-p85px--sp { padding: 85px !important; } .u-m90px--sp { margin: 90px !important; } .u-mt90px--sp { margin-top: 90px !important; } .u-mb90px--sp { margin-bottom: 90px !important; } .u-ml90px--sp { margin-left: 90px !important; } .u-mr90px--sp { margin-right: 90px !important; } .u-pt90px--sp { padding-top: 90px !important; } .u-pb90px--sp { padding-bottom: 90px !important; } .u-pl90px--sp { padding-left: 90px !important; } .u-pr90px--sp { padding-right: 90px !important; } .u-p90px--sp { padding: 90px !important; } .u-m95px--sp { margin: 95px !important; } .u-mt95px--sp { margin-top: 95px !important; } .u-mb95px--sp { margin-bottom: 95px !important; } .u-ml95px--sp { margin-left: 95px !important; } .u-mr95px--sp { margin-right: 95px !important; } .u-pt95px--sp { padding-top: 95px !important; } .u-pb95px--sp { padding-bottom: 95px !important; } .u-pl95px--sp { padding-left: 95px !important; } .u-pr95px--sp { padding-right: 95px !important; } .u-p95px--sp { padding: 95px !important; } .u-m100px--sp { margin: 100px !important; } .u-mt100px--sp { margin-top: 100px !important; } .u-mb100px--sp { margin-bottom: 100px !important; } .u-ml100px--sp { margin-left: 100px !important; } .u-mr100px--sp { margin-right: 100px !important; } .u-pt100px--sp { padding-top: 100px !important; } .u-pb100px--sp { padding-bottom: 100px !important; } .u-pl100px--sp { padding-left: 100px !important; } .u-pr100px--sp { padding-right: 100px !important; } .u-p100px--sp { padding: 100px !important; } } .u-m0em { margin: 0em !important; } .u-mt0em { margin-top: 0em !important; } .u-mb0em { margin-bottom: 0em !important; } .u-ml0em { margin-left: 0em !important; } .u-mr0em { margin-right: 0em !important; } .u-pt0em { padding-top: 0em !important; } .u-pb0em { padding-bottom: 0em !important; } .u-pl0em { padding-left: 0em !important; } .u-pr0em { padding-right: 0em !important; } .u-p0em { padding: 0em !important; } .u-m0_5em { margin: 0.5em !important; } .u-mt0_5em { margin-top: 0.5em !important; } .u-mb0_5em { margin-bottom: 0.5em !important; } .u-ml0_5em { margin-left: 0.5em !important; } .u-mr0_5em { margin-right: 0.5em !important; } .u-pt0_5em { padding-top: 0.5em !important; } .u-pb0_5em { padding-bottom: 0.5em !important; } .u-pl0_5em { padding-left: 0.5em !important; } .u-pr0_5em { padding-right: 0.5em !important; } .u-p0_5em { padding: 0.5em !important; } .u-m1em { margin: 1em !important; } .u-mt1em { margin-top: 1em !important; } .u-mb1em { margin-bottom: 1em !important; } .u-ml1em { margin-left: 1em !important; } .u-mr1em { margin-right: 1em !important; } .u-pt1em { padding-top: 1em !important; } .u-pb1em { padding-bottom: 1em !important; } .u-pl1em { padding-left: 1em !important; } .u-pr1em { padding-right: 1em !important; } .u-p1em { padding: 1em !important; } .u-m1_5em { margin: 1.5em !important; } .u-mt1_5em { margin-top: 1.5em !important; } .u-mb1_5em { margin-bottom: 1.5em !important; } .u-ml1_5em { margin-left: 1.5em !important; } .u-mr1_5em { margin-right: 1.5em !important; } .u-pt1_5em { padding-top: 1.5em !important; } .u-pb1_5em { padding-bottom: 1.5em !important; } .u-pl1_5em { padding-left: 1.5em !important; } .u-pr1_5em { padding-right: 1.5em !important; } .u-p1_5em { padding: 1.5em !important; } .u-m2em { margin: 2em !important; } .u-mt2em { margin-top: 2em !important; } .u-mb2em { margin-bottom: 2em !important; } .u-ml2em { margin-left: 2em !important; } .u-mr2em { margin-right: 2em !important; } .u-pt2em { padding-top: 2em !important; } .u-pb2em { padding-bottom: 2em !important; } .u-pl2em { padding-left: 2em !important; } .u-pr2em { padding-right: 2em !important; } .u-p2em { padding: 2em !important; } .u-m2_5em { margin: 2.5em !important; } .u-mt2_5em { margin-top: 2.5em !important; } .u-mb2_5em { margin-bottom: 2.5em !important; } .u-ml2_5em { margin-left: 2.5em !important; } .u-mr2_5em { margin-right: 2.5em !important; } .u-pt2_5em { padding-top: 2.5em !important; } .u-pb2_5em { padding-bottom: 2.5em !important; } .u-pl2_5em { padding-left: 2.5em !important; } .u-pr2_5em { padding-right: 2.5em !important; } .u-p2_5em { padding: 2.5em !important; } .u-m3em { margin: 3em !important; } .u-mt3em { margin-top: 3em !important; } .u-mb3em { margin-bottom: 3em !important; } .u-ml3em { margin-left: 3em !important; } .u-mr3em { margin-right: 3em !important; } .u-pt3em { padding-top: 3em !important; } .u-pb3em { padding-bottom: 3em !important; } .u-pl3em { padding-left: 3em !important; } .u-pr3em { padding-right: 3em !important; } .u-p3em { padding: 3em !important; } .u-m3_5em { margin: 3.5em !important; } .u-mt3_5em { margin-top: 3.5em !important; } .u-mb3_5em { margin-bottom: 3.5em !important; } .u-ml3_5em { margin-left: 3.5em !important; } .u-mr3_5em { margin-right: 3.5em !important; } .u-pt3_5em { padding-top: 3.5em !important; } .u-pb3_5em { padding-bottom: 3.5em !important; } .u-pl3_5em { padding-left: 3.5em !important; } .u-pr3_5em { padding-right: 3.5em !important; } .u-p3_5em { padding: 3.5em !important; } .u-m4em { margin: 4em !important; } .u-mt4em { margin-top: 4em !important; } .u-mb4em { margin-bottom: 4em !important; } .u-ml4em { margin-left: 4em !important; } .u-mr4em { margin-right: 4em !important; } .u-pt4em { padding-top: 4em !important; } .u-pb4em { padding-bottom: 4em !important; } .u-pl4em { padding-left: 4em !important; } .u-pr4em { padding-right: 4em !important; } .u-p4em { padding: 4em !important; } .u-m4_5em { margin: 4.5em !important; } .u-mt4_5em { margin-top: 4.5em !important; } .u-mb4_5em { margin-bottom: 4.5em !important; } .u-ml4_5em { margin-left: 4.5em !important; } .u-mr4_5em { margin-right: 4.5em !important; } .u-pt4_5em { padding-top: 4.5em !important; } .u-pb4_5em { padding-bottom: 4.5em !important; } .u-pl4_5em { padding-left: 4.5em !important; } .u-pr4_5em { padding-right: 4.5em !important; } .u-p4_5em { padding: 4.5em !important; } .u-m5em { margin: 5em !important; } .u-mt5em { margin-top: 5em !important; } .u-mb5em { margin-bottom: 5em !important; } .u-ml5em { margin-left: 5em !important; } .u-mr5em { margin-right: 5em !important; } .u-pt5em { padding-top: 5em !important; } .u-pb5em { padding-bottom: 5em !important; } .u-pl5em { padding-left: 5em !important; } .u-pr5em { padding-right: 5em !important; } .u-p5em { padding: 5em !important; } .u-m5_5em { margin: 5.5em !important; } .u-mt5_5em { margin-top: 5.5em !important; } .u-mb5_5em { margin-bottom: 5.5em !important; } .u-ml5_5em { margin-left: 5.5em !important; } .u-mr5_5em { margin-right: 5.5em !important; } .u-pt5_5em { padding-top: 5.5em !important; } .u-pb5_5em { padding-bottom: 5.5em !important; } .u-pl5_5em { padding-left: 5.5em !important; } .u-pr5_5em { padding-right: 5.5em !important; } .u-p5_5em { padding: 5.5em !important; } .u-m6em { margin: 6em !important; } .u-mt6em { margin-top: 6em !important; } .u-mb6em { margin-bottom: 6em !important; } .u-ml6em { margin-left: 6em !important; } .u-mr6em { margin-right: 6em !important; } .u-pt6em { padding-top: 6em !important; } .u-pb6em { padding-bottom: 6em !important; } .u-pl6em { padding-left: 6em !important; } .u-pr6em { padding-right: 6em !important; } .u-p6em { padding: 6em !important; } .u-m6_5em { margin: 6.5em !important; } .u-mt6_5em { margin-top: 6.5em !important; } .u-mb6_5em { margin-bottom: 6.5em !important; } .u-ml6_5em { margin-left: 6.5em !important; } .u-mr6_5em { margin-right: 6.5em !important; } .u-pt6_5em { padding-top: 6.5em !important; } .u-pb6_5em { padding-bottom: 6.5em !important; } .u-pl6_5em { padding-left: 6.5em !important; } .u-pr6_5em { padding-right: 6.5em !important; } .u-p6_5em { padding: 6.5em !important; } .u-m7em { margin: 7em !important; } .u-mt7em { margin-top: 7em !important; } .u-mb7em { margin-bottom: 7em !important; } .u-ml7em { margin-left: 7em !important; } .u-mr7em { margin-right: 7em !important; } .u-pt7em { padding-top: 7em !important; } .u-pb7em { padding-bottom: 7em !important; } .u-pl7em { padding-left: 7em !important; } .u-pr7em { padding-right: 7em !important; } .u-p7em { padding: 7em !important; } .u-m7_5em { margin: 7.5em !important; } .u-mt7_5em { margin-top: 7.5em !important; } .u-mb7_5em { margin-bottom: 7.5em !important; } .u-ml7_5em { margin-left: 7.5em !important; } .u-mr7_5em { margin-right: 7.5em !important; } .u-pt7_5em { padding-top: 7.5em !important; } .u-pb7_5em { padding-bottom: 7.5em !important; } .u-pl7_5em { padding-left: 7.5em !important; } .u-pr7_5em { padding-right: 7.5em !important; } .u-p7_5em { padding: 7.5em !important; } .u-m8em { margin: 8em !important; } .u-mt8em { margin-top: 8em !important; } .u-mb8em { margin-bottom: 8em !important; } .u-ml8em { margin-left: 8em !important; } .u-mr8em { margin-right: 8em !important; } .u-pt8em { padding-top: 8em !important; } .u-pb8em { padding-bottom: 8em !important; } .u-pl8em { padding-left: 8em !important; } .u-pr8em { padding-right: 8em !important; } .u-p8em { padding: 8em !important; } .u-m8_5em { margin: 8.5em !important; } .u-mt8_5em { margin-top: 8.5em !important; } .u-mb8_5em { margin-bottom: 8.5em !important; } .u-ml8_5em { margin-left: 8.5em !important; } .u-mr8_5em { margin-right: 8.5em !important; } .u-pt8_5em { padding-top: 8.5em !important; } .u-pb8_5em { padding-bottom: 8.5em !important; } .u-pl8_5em { padding-left: 8.5em !important; } .u-pr8_5em { padding-right: 8.5em !important; } .u-p8_5em { padding: 8.5em !important; } .u-m9em { margin: 9em !important; } .u-mt9em { margin-top: 9em !important; } .u-mb9em { margin-bottom: 9em !important; } .u-ml9em { margin-left: 9em !important; } .u-mr9em { margin-right: 9em !important; } .u-pt9em { padding-top: 9em !important; } .u-pb9em { padding-bottom: 9em !important; } .u-pl9em { padding-left: 9em !important; } .u-pr9em { padding-right: 9em !important; } .u-p9em { padding: 9em !important; } .u-m9_5em { margin: 9.5em !important; } .u-mt9_5em { margin-top: 9.5em !important; } .u-mb9_5em { margin-bottom: 9.5em !important; } .u-ml9_5em { margin-left: 9.5em !important; } .u-mr9_5em { margin-right: 9.5em !important; } .u-pt9_5em { padding-top: 9.5em !important; } .u-pb9_5em { padding-bottom: 9.5em !important; } .u-pl9_5em { padding-left: 9.5em !important; } .u-pr9_5em { padding-right: 9.5em !important; } .u-p9_5em { padding: 9.5em !important; } .u-m10em { margin: 10em !important; } .u-mt10em { margin-top: 10em !important; } .u-mb10em { margin-bottom: 10em !important; } .u-ml10em { margin-left: 10em !important; } .u-mr10em { margin-right: 10em !important; } .u-pt10em { padding-top: 10em !important; } .u-pb10em { padding-bottom: 10em !important; } .u-pl10em { padding-left: 10em !important; } .u-pr10em { padding-right: 10em !important; } .u-p10em { padding: 10em !important; } .u-mAuto { margin-left: auto !important; margin-right: auto !important; } .u-pAuto { padding-left: auto !important; padding-right: auto !important; } .u-m0 { margin: 0 !important; } .u-mt0 { margin-top: 0 !important; } .u-mb0 { margin-bottom: 0 !important; } .u-ml0 { margin-left: 0 !important; } .u-mr0 { margin-right: 0 !important; } .u-pt0 { padding-top: 0 !important; } .u-pb0 { padding-bottom: 0 !important; } .u-pl0 { padding-left: 0 !important; } .u-pr0 { padding-right: 0 !important; } .u-p0 { padding: 0 !important; } @media screen and (max-width: 750px) { .u-m0em--sp { margin: 0em !important; } .u-mt0em--sp { margin-top: 0em !important; } .u-mb0em--sp { margin-bottom: 0em !important; } .u-ml0em--sp { margin-left: 0em !important; } .u-mr0em--sp { margin-right: 0em !important; } .u-pt0em--sp { padding-top: 0em !important; } .u-pb0em--sp { padding-bottom: 0em !important; } .u-pl0em--sp { padding-left: 0em !important; } .u-pr0em--sp { padding-right: 0em !important; } .u-p0em--sp { padding: 0em !important; } .u-m0_5em--sp { margin: 0.5em !important; } .u-mt0_5em--sp { margin-top: 0.5em !important; } .u-mb0_5em--sp { margin-bottom: 0.5em !important; } .u-ml0_5em--sp { margin-left: 0.5em !important; } .u-mr0_5em--sp { margin-right: 0.5em !important; } .u-pt0_5em--sp { padding-top: 0.5em !important; } .u-pb0_5em--sp { padding-bottom: 0.5em !important; } .u-pl0_5em--sp { padding-left: 0.5em !important; } .u-pr0_5em--sp { padding-right: 0.5em !important; } .u-p0_5em--sp { padding: 0.5em !important; } .u-m1em--sp { margin: 1em !important; } .u-mt1em--sp { margin-top: 1em !important; } .u-mb1em--sp { margin-bottom: 1em !important; } .u-ml1em--sp { margin-left: 1em !important; } .u-mr1em--sp { margin-right: 1em !important; } .u-pt1em--sp { padding-top: 1em !important; } .u-pb1em--sp { padding-bottom: 1em !important; } .u-pl1em--sp { padding-left: 1em !important; } .u-pr1em--sp { padding-right: 1em !important; } .u-p1em--sp { padding: 1em !important; } .u-m1_5em--sp { margin: 1.5em !important; } .u-mt1_5em--sp { margin-top: 1.5em !important; } .u-mb1_5em--sp { margin-bottom: 1.5em !important; } .u-ml1_5em--sp { margin-left: 1.5em !important; } .u-mr1_5em--sp { margin-right: 1.5em !important; } .u-pt1_5em--sp { padding-top: 1.5em !important; } .u-pb1_5em--sp { padding-bottom: 1.5em !important; } .u-pl1_5em--sp { padding-left: 1.5em !important; } .u-pr1_5em--sp { padding-right: 1.5em !important; } .u-p1_5em--sp { padding: 1.5em !important; } .u-m2em--sp { margin: 2em !important; } .u-mt2em--sp { margin-top: 2em !important; } .u-mb2em--sp { margin-bottom: 2em !important; } .u-ml2em--sp { margin-left: 2em !important; } .u-mr2em--sp { margin-right: 2em !important; } .u-pt2em--sp { padding-top: 2em !important; } .u-pb2em--sp { padding-bottom: 2em !important; } .u-pl2em--sp { padding-left: 2em !important; } .u-pr2em--sp { padding-right: 2em !important; } .u-p2em--sp { padding: 2em !important; } .u-m2_5em--sp { margin: 2.5em !important; } .u-mt2_5em--sp { margin-top: 2.5em !important; } .u-mb2_5em--sp { margin-bottom: 2.5em !important; } .u-ml2_5em--sp { margin-left: 2.5em !important; } .u-mr2_5em--sp { margin-right: 2.5em !important; } .u-pt2_5em--sp { padding-top: 2.5em !important; } .u-pb2_5em--sp { padding-bottom: 2.5em !important; } .u-pl2_5em--sp { padding-left: 2.5em !important; } .u-pr2_5em--sp { padding-right: 2.5em !important; } .u-p2_5em--sp { padding: 2.5em !important; } .u-m3em--sp { margin: 3em !important; } .u-mt3em--sp { margin-top: 3em !important; } .u-mb3em--sp { margin-bottom: 3em !important; } .u-ml3em--sp { margin-left: 3em !important; } .u-mr3em--sp { margin-right: 3em !important; } .u-pt3em--sp { padding-top: 3em !important; } .u-pb3em--sp { padding-bottom: 3em !important; } .u-pl3em--sp { padding-left: 3em !important; } .u-pr3em--sp { padding-right: 3em !important; } .u-p3em--sp { padding: 3em !important; } .u-m3_5em--sp { margin: 3.5em !important; } .u-mt3_5em--sp { margin-top: 3.5em !important; } .u-mb3_5em--sp { margin-bottom: 3.5em !important; } .u-ml3_5em--sp { margin-left: 3.5em !important; } .u-mr3_5em--sp { margin-right: 3.5em !important; } .u-pt3_5em--sp { padding-top: 3.5em !important; } .u-pb3_5em--sp { padding-bottom: 3.5em !important; } .u-pl3_5em--sp { padding-left: 3.5em !important; } .u-pr3_5em--sp { padding-right: 3.5em !important; } .u-p3_5em--sp { padding: 3.5em !important; } .u-m4em--sp { margin: 4em !important; } .u-mt4em--sp { margin-top: 4em !important; } .u-mb4em--sp { margin-bottom: 4em !important; } .u-ml4em--sp { margin-left: 4em !important; } .u-mr4em--sp { margin-right: 4em !important; } .u-pt4em--sp { padding-top: 4em !important; } .u-pb4em--sp { padding-bottom: 4em !important; } .u-pl4em--sp { padding-left: 4em !important; } .u-pr4em--sp { padding-right: 4em !important; } .u-p4em--sp { padding: 4em !important; } .u-m4_5em--sp { margin: 4.5em !important; } .u-mt4_5em--sp { margin-top: 4.5em !important; } .u-mb4_5em--sp { margin-bottom: 4.5em !important; } .u-ml4_5em--sp { margin-left: 4.5em !important; } .u-mr4_5em--sp { margin-right: 4.5em !important; } .u-pt4_5em--sp { padding-top: 4.5em !important; } .u-pb4_5em--sp { padding-bottom: 4.5em !important; } .u-pl4_5em--sp { padding-left: 4.5em !important; } .u-pr4_5em--sp { padding-right: 4.5em !important; } .u-p4_5em--sp { padding: 4.5em !important; } .u-m5em--sp { margin: 5em !important; } .u-mt5em--sp { margin-top: 5em !important; } .u-mb5em--sp { margin-bottom: 5em !important; } .u-ml5em--sp { margin-left: 5em !important; } .u-mr5em--sp { margin-right: 5em !important; } .u-pt5em--sp { padding-top: 5em !important; } .u-pb5em--sp { padding-bottom: 5em !important; } .u-pl5em--sp { padding-left: 5em !important; } .u-pr5em--sp { padding-right: 5em !important; } .u-p5em--sp { padding: 5em !important; } .u-m5_5em--sp { margin: 5.5em !important; } .u-mt5_5em--sp { margin-top: 5.5em !important; } .u-mb5_5em--sp { margin-bottom: 5.5em !important; } .u-ml5_5em--sp { margin-left: 5.5em !important; } .u-mr5_5em--sp { margin-right: 5.5em !important; } .u-pt5_5em--sp { padding-top: 5.5em !important; } .u-pb5_5em--sp { padding-bottom: 5.5em !important; } .u-pl5_5em--sp { padding-left: 5.5em !important; } .u-pr5_5em--sp { padding-right: 5.5em !important; } .u-p5_5em--sp { padding: 5.5em !important; } .u-m6em--sp { margin: 6em !important; } .u-mt6em--sp { margin-top: 6em !important; } .u-mb6em--sp { margin-bottom: 6em !important; } .u-ml6em--sp { margin-left: 6em !important; } .u-mr6em--sp { margin-right: 6em !important; } .u-pt6em--sp { padding-top: 6em !important; } .u-pb6em--sp { padding-bottom: 6em !important; } .u-pl6em--sp { padding-left: 6em !important; } .u-pr6em--sp { padding-right: 6em !important; } .u-p6em--sp { padding: 6em !important; } .u-m6_5em--sp { margin: 6.5em !important; } .u-mt6_5em--sp { margin-top: 6.5em !important; } .u-mb6_5em--sp { margin-bottom: 6.5em !important; } .u-ml6_5em--sp { margin-left: 6.5em !important; } .u-mr6_5em--sp { margin-right: 6.5em !important; } .u-pt6_5em--sp { padding-top: 6.5em !important; } .u-pb6_5em--sp { padding-bottom: 6.5em !important; } .u-pl6_5em--sp { padding-left: 6.5em !important; } .u-pr6_5em--sp { padding-right: 6.5em !important; } .u-p6_5em--sp { padding: 6.5em !important; } .u-m7em--sp { margin: 7em !important; } .u-mt7em--sp { margin-top: 7em !important; } .u-mb7em--sp { margin-bottom: 7em !important; } .u-ml7em--sp { margin-left: 7em !important; } .u-mr7em--sp { margin-right: 7em !important; } .u-pt7em--sp { padding-top: 7em !important; } .u-pb7em--sp { padding-bottom: 7em !important; } .u-pl7em--sp { padding-left: 7em !important; } .u-pr7em--sp { padding-right: 7em !important; } .u-p7em--sp { padding: 7em !important; } .u-m7_5em--sp { margin: 7.5em !important; } .u-mt7_5em--sp { margin-top: 7.5em !important; } .u-mb7_5em--sp { margin-bottom: 7.5em !important; } .u-ml7_5em--sp { margin-left: 7.5em !important; } .u-mr7_5em--sp { margin-right: 7.5em !important; } .u-pt7_5em--sp { padding-top: 7.5em !important; } .u-pb7_5em--sp { padding-bottom: 7.5em !important; } .u-pl7_5em--sp { padding-left: 7.5em !important; } .u-pr7_5em--sp { padding-right: 7.5em !important; } .u-p7_5em--sp { padding: 7.5em !important; } .u-m8em--sp { margin: 8em !important; } .u-mt8em--sp { margin-top: 8em !important; } .u-mb8em--sp { margin-bottom: 8em !important; } .u-ml8em--sp { margin-left: 8em !important; } .u-mr8em--sp { margin-right: 8em !important; } .u-pt8em--sp { padding-top: 8em !important; } .u-pb8em--sp { padding-bottom: 8em !important; } .u-pl8em--sp { padding-left: 8em !important; } .u-pr8em--sp { padding-right: 8em !important; } .u-p8em--sp { padding: 8em !important; } .u-m8_5em--sp { margin: 8.5em !important; } .u-mt8_5em--sp { margin-top: 8.5em !important; } .u-mb8_5em--sp { margin-bottom: 8.5em !important; } .u-ml8_5em--sp { margin-left: 8.5em !important; } .u-mr8_5em--sp { margin-right: 8.5em !important; } .u-pt8_5em--sp { padding-top: 8.5em !important; } .u-pb8_5em--sp { padding-bottom: 8.5em !important; } .u-pl8_5em--sp { padding-left: 8.5em !important; } .u-pr8_5em--sp { padding-right: 8.5em !important; } .u-p8_5em--sp { padding: 8.5em !important; } .u-m9em--sp { margin: 9em !important; } .u-mt9em--sp { margin-top: 9em !important; } .u-mb9em--sp { margin-bottom: 9em !important; } .u-ml9em--sp { margin-left: 9em !important; } .u-mr9em--sp { margin-right: 9em !important; } .u-pt9em--sp { padding-top: 9em !important; } .u-pb9em--sp { padding-bottom: 9em !important; } .u-pl9em--sp { padding-left: 9em !important; } .u-pr9em--sp { padding-right: 9em !important; } .u-p9em--sp { padding: 9em !important; } .u-m9_5em--sp { margin: 9.5em !important; } .u-mt9_5em--sp { margin-top: 9.5em !important; } .u-mb9_5em--sp { margin-bottom: 9.5em !important; } .u-ml9_5em--sp { margin-left: 9.5em !important; } .u-mr9_5em--sp { margin-right: 9.5em !important; } .u-pt9_5em--sp { padding-top: 9.5em !important; } .u-pb9_5em--sp { padding-bottom: 9.5em !important; } .u-pl9_5em--sp { padding-left: 9.5em !important; } .u-pr9_5em--sp { padding-right: 9.5em !important; } .u-p9_5em--sp { padding: 9.5em !important; } .u-m10em--sp { margin: 10em !important; } .u-mt10em--sp { margin-top: 10em !important; } .u-mb10em--sp { margin-bottom: 10em !important; } .u-ml10em--sp { margin-left: 10em !important; } .u-mr10em--sp { margin-right: 10em !important; } .u-pt10em--sp { padding-top: 10em !important; } .u-pb10em--sp { padding-bottom: 10em !important; } .u-pl10em--sp { padding-left: 10em !important; } .u-pr10em--sp { padding-right: 10em !important; } .u-p10em--sp { padding: 10em !important; } .u-mAuto--sp { margin-left: auto !important; margin-right: auto !important; } .u-pAuto--sp { padding-left: auto !important; padding-right: auto !important; } .u-m0--sp { margin: 0 !important; } .u-mt0--sp { margin-top: 0 !important; } .u-mb0--sp { margin-bottom: 0 !important; } .u-ml0--sp { margin-left: 0 !important; } .u-mr0--sp { margin-right: 0 !important; } .u-pt0--sp { padding-top: 0 !important; } .u-pb0--sp { padding-bottom: 0 !important; } .u-pl0--sp { padding-left: 0 !important; } .u-pr0--sp { padding-right: 0 !important; } .u-p0--sp { padding: 0 !important; } } /* ================================================= Layout ================================================= */ .u-blockCenter { margin-left: auto; margin-right: auto; } .u-tdUnderline { text-decoration: underline; } /*---------------------------------------------------------------- Print -----------------------------------------------------------------*/ @media print { body { -webkit-print-color-adjust: exact; } } /*---------------------------------------------------------------- arrow hover animation (mask icons) ソリューションカード / ソリューションnav(page-list) の矢印を ボタン(wp-block-button__link)と同様にホバーでスライド ※SCSS側: _gutenberg.scss(keyframes) / _card.scss / _navigation.scss -----------------------------------------------------------------*/ @keyframes arrow-slide-right-mask { 0% { -webkit-mask-position: center; mask-position: center; } 40% { -webkit-mask-position: calc(50% + 40px) center; mask-position: calc(50% + 40px) center; } 41% { -webkit-mask-position: calc(50% - 30px) center; mask-position: calc(50% - 30px) center; } 100% { -webkit-mask-position: center; mask-position: center; } } @media screen and (hover: hover) and (min-width: 751px) { .c-card-solutions:hover .c-card-solutions__title::after { animation: arrow-slide-right-mask 0.4s ease-in-out forwards; } .c-nav-solution__menu > li a:hover::after { animation: arrow-slide-right-mask 0.4s ease-in-out forwards; } }