/* ========================================================================== - Common (tokens/base/layout/components/utilities) - Page: Home (index.php) -> - Page: Template (template.html) -> ============================================================================ */ /* ========================================================================== 00. Tokens ============================================================================ */ :root { --c-primary: #0c50aa; --c-line: #d8dde6; --c-bg: #ebf4ff; --grad-stops-primary: #77b7e5 0%, #0076bf 50%, #004da1 100%; --header-h: 9rem; --gutter: 20rem; } @media (max-width: 768px) { :root { --header-h: 5.4rem; --gutter: 1.5rem; } } /* ========================================================================== 01. Base / Reset ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-size: 62.5%; } html.is-home { scroll-behavior: smooth; } @media (max-width: 768px) { html { font-size: 3.125vw; } } @media (min-width: 769px) and (max-width: 1280px) { html { font-size: 0.65125vw; } } @media (min-width: 1281px) and (max-width: 1600px) { html { font-size: 0.625vw; } } body { font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif; color: #000; background: var(--c-bg); margin: 0; letter-spacing: .01em; } body.is-open { overflow: hidden; touch-action: none; } body.is-open .c-toTop { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } img, svg { max-width: 100%; height: auto; vertical-align: middle; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } ul, ol { margin: 0; padding-left: 1.2em; } p { margin: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; } /* PC（マウス操作環境）では tel: リンクを無効化 */ @media (hover: hover) and (pointer: fine) { a[href^="tel:"] { pointer-events: none; color: inherit; text-decoration: none; cursor: default; } } [id] { scroll-margin-top: var(--header-h); } /* ========================================================================== 02. Utilities (u-* / is-*) ============================================================================ */ .is-en { font-family: "Afacad Flux", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em; } .font-min { font-family: "Noto Serif JP", serif; font-weight: 500; } .u-accent { color: var(--c-primary); } .u-brPc { display: inline; } .u-brSp { display: none; } .u-outlineBg { border: 2px solid var(--c-bg); } @media (max-width:768px) { .u-brPc { display: none; } .u-brSp { display: inline; } } /* ========================================================================== 04. Components (c-*) ============================================================================ */ .c-srOnly { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .c-button--gradient { --grad-dir: to left; background: linear-gradient(var(--grad-dir), var(--grad-stops-primary)); color: #fff; } .c-button--gradient.is-right { --grad-dir: to right; } .c-button--outlineWhite { border: 2px solid #fff; } .c-iconCircleArrow { position: relative; display: inline-block; width: 3.5rem; height: 3.5rem; border: 1.5px solid #fff; border-radius: 999px; --icon-scale: 1; --icon-flip: 1; transform: scaleX(var(--icon-flip)) scale(var(--icon-scale)); } .c-iconCircleArrow.is-flipX { --icon-flip: -1; } .c-iconCircleArrow::before { content: ""; position: absolute; top: calc(50% + .1rem); left: calc(50% - .9rem); width: 1.9rem; height: 1.5px; border-radius: 999px; background-color: #fff; } .c-iconCircleArrow::after { content: ""; position: absolute; top: calc(50%); right: .6rem; width: 1.1rem; height: 1.5px; border-radius: 999px; background-color: #fff; transform: rotate(45deg); transform-origin: calc(100% - .2rem) 50%; } /* ========================================================================== 03. Layout (l-*) ============================================================================ */ .l-main { padding-bottom: 5.6rem; } @media (min-width: 769px) { .l-main { padding-top: var(--header-h); } } body.is-open { overflow: hidden; } .c-gnav.is-open { display: block; } .l-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--c-bg); } .l-header__inner { display: flex; align-items: stretch; justify-content: space-between; margin-left: 2.6rem; margin-right: 0; } @media (min-width: 769px) { .l-header__inner { height: var(--header-h); } } .c-logo { display: flex; align-self: stretch; align-items: center; } .c-logo__inner { display: inline-flex; align-items: baseline; gap: 2.4rem; } .c-logo__img { height: auto; display: block; } .c-logo__img--header { width: 12rem; } .c-logo__text--header { position: relative; top: -.65rem; font-weight: 600; color: #1a1a1a; white-space: nowrap; font-size: 2rem; letter-spacing: .06em; } .c-logo__img--footer { width: 20rem; } .c-gnav__list { display: flex; align-items: stretch; height: 100%; list-style: none; gap: 4.5rem; font-size: 1.6rem; font-weight: 600; white-space: nowrap; padding: 0; letter-spacing: .08em; } .c-gnav__list>li { display: flex; align-items: center; height: 100%; } .c-gnav__btn { display: inline-flex; align-items: center; justify-content: center; height: 100%; padding: 0 3rem; border-radius: 0 0 0 3rem; } .c-menuBtn { display: none; flex-direction: column; align-items: center; justify-content: center; width: var(--header-h); height: var(--header-h); padding-top: .8rem; gap: 1rem; background: linear-gradient(to left, var(--grad-stops-primary)); border-radius: 0 0 0 1.8rem; border: none; } .c-menuBtn__lines { display: block; width: 2rem; height: 2px; background: #fff; position: relative; border-radius: 999px; } .c-menuBtn__lines::before, .c-menuBtn__lines::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; border-radius: 999px; } .c-menuBtn__lines::before { top: -.55rem; } .c-menuBtn__lines::after { top: .55rem; } .c-menuBtn__text { font-size: 1.2rem; /*1.15*/ font-weight: 400; color: #fff; letter-spacing: .06em; } .l-wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter, 20rem); } .l-wrap--left { width: 100%; max-width: 1600px; margin-inline: auto; padding-left: var(--gutter, 20rem); } .l-wrap--right { width: 100%; max-width: 1600px; margin-inline: auto; padding-right: var(--gutter, 20rem); } .p-surfaceShadow { position: relative; z-index: 0; } .p-surfaceShadow::before { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 3rem .2rem var(--c-bg); mix-blend-mode: multiply; z-index: -1; } .p-surface { margin-top: 4.2rem; margin-right: 10rem; border-radius: 0 8rem 8rem 0; background: #fff; } .p-surface__inner { max-width: calc(1600px - 10rem); margin-inline: auto; padding: 4.8rem 10rem 8rem 20rem; } .c-serviceCard { display: flex; flex-direction: column; height: 100%; border-radius: 2rem; overflow: hidden; background: var(--c-bg); } .c-serviceCard__img { width: 100%; height: auto; display: block; } .c-serviceCard__label { display: flex; align-items: center; justify-content: center; padding: 4rem 0rem; font-size: 1.95rem; font-weight: 600; color: var(--c-primary); text-align: center; line-height: 1.4; letter-spacing: .06em; flex: 1; } .c-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; font-size: 1.4rem; color: #000; justify-content: flex-end; padding: 0; margin: 0; } .c-breadcrumb__item:not(:last-child)::after { content: ">"; margin-left: .6rem; } .c-pageTitle { margin-top: 4.8rem; font-size: 8rem; color: var(--c-primary); } .c-pageSub { margin-top: 1.2rem; font-size: 2.4rem; font-weight: 600; letter-spacing: .1em; margin-bottom: 3rem; } .c-heading { font-size: 3.6rem; font-weight: 600; line-height: 2; color: #1A1A1A; margin-bottom: 3rem; } .c-leadText { margin-bottom: 3.2rem; width: 100%; font-size: 2rem; font-weight: 600; line-height: 2; color: #1A1A1A; } .c-barTitle { padding-left: 2.4rem; padding-right: 2.4rem; font-weight: 600; letter-spacing: .02em; } .c-barTitle--primary { padding-top: 1.6rem; padding-bottom: 1.6rem; font-size: 2.4rem; color: #fff; background: var(--c-primary); border-radius: 1.6rem 0; margin-bottom: 3.5rem; } .c-barTitle--line { position: relative; padding-bottom: 2rem; font-size: 2.4rem; color: var(--c-primary); margin-bottom: 3.5rem; } .c-barTitle--line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: .4rem; background: linear-gradient(to right, var(--grad-stops-primary)); } .c-barTitle--light { margin-bottom: 4.8rem; padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: 2rem; background: var(--c-bg); color: var(--c-primary); border-radius: 1.2rem; } .c-sectionText { margin-bottom: 3rem; font-size: 1.8rem; line-height: 2; } .c-media { display: grid; grid-template-columns: 1fr 1fr; gap: 4.8rem; align-items: start; margin-bottom: 3rem; } .c-media__title { font-size: 2rem; font-weight: 600; color: var(--c-primary); line-height: 1.7; } .c-media__text { margin-top: 1.4rem; font-size: 1.8rem; line-height: 1.7; } .c-media__img, .c-wideImage, .c-card__img { background: #e5e5e5; border-radius: 1.8rem; overflow: hidden; min-height: 10rem; } .c-media__img>img, .c-wideImage>img, .c-card__img>img { display: block; width: 100%; height: auto; } .c-media__img { margin: 1rem 0 0 0; } .c-wideImage, .c-card__img { margin: 0; margin-bottom: 3rem; } @media (max-width: 768px) { .c-wideImage, .c-card__img { margin-bottom: 0rem; } } .c-card { display: flex; flex-direction: column; gap: 2.4rem; } .c-card__title { font-size: 2rem; font-weight: 600; color: var(--c-primary); line-height: 1.7; text-align: center; } .c-card__text { font-size: 1.8rem; line-height: 1.7; } .l-grid-txt-center .c-card__text { text-align: center; } .l-grid { display: grid; gap: 4.8rem; margin-bottom: 3rem; } .l-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .l-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .c-kv { padding: 0; list-style: none; font-size: 1.8rem; margin-bottom: 3rem; } .c-kvRow { display: grid; grid-template-columns: minmax(14rem, 26rem) 1.6rem minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 4.2rem; padding-top: 4.2rem; } .c-kvRow::before, .c-kvRow::after { content: ""; grid-row: 2; height: 3px; } .c-kvRow::before { grid-column: 1; background: var(--c-primary); } .c-kvRow::after { grid-column: 3; background: #ccc; } .c-kvRow__term { /*display: flex;*/ align-items: center; justify-content: center; grid-column: 1; grid-row: 1; margin: 0; font-weight: 600; color: var(--c-primary); text-align: center; } .c-kvRow__desc { min-width: 0; grid-column: 3; grid-row: 1; margin: 0; color: #1a1a1a; line-height: 1.7; overflow-wrap: anywhere; word-break: break-word; } .c-kvRow-min { display: block; font-size: 1.3rem; color: #000; font-weight: 300; margin-top: 0.5rem; } .c-kvRow-txtl .c-kvRow__term { text-align: left; } .c-kv .c-list { margin-top: 0 !important; } .c-textBlock { font-size: 1.8rem; color: #1a1a1a; } .c-textBlock--underline { border-bottom: 1px solid var(--c-primary); } .c-text { padding: 3.2rem 0; } .c-list { padding: 0; list-style: none; font-size: 1.8rem; color: #1A1A1A; } .c-list--dot { display: grid; gap: 1.6rem; } .c-list--dot .c-list__item { display: flex; align-items: flex-start; gap: 1rem; margin: 0; } .c-list--dot .c-list__item::before { content: ""; width: 1rem; height: 1rem; margin-top: .45em; border-radius: 999px; background: var(--c-primary); flex: 0 0 1rem; } .c-linkRow { margin-top: 4.8rem; font-size: 1.6rem; color: #1A1A1A; } .c-link { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } .c-button { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 7rem; width: 30rem; height: 7rem; } .c-button__label { grid-column: 2; justify-self: center; font-size: 1.8rem; font-weight: 600; } .c-button__icon { grid-column: 3; justify-self: end; margin-right: 2rem; } .c-button.is-reverse .c-button__icon { grid-column: 1; justify-self: start; margin-right: 0rem; margin-left: 2rem; } .c-related { margin-bottom: 3.6rem; padding: 2.8rem; border-radius: 1.8rem; background: var(--c-bg); } .c-related__title { font-size: 2rem; font-weight: 600; color: var(--c-primary); } .c-related__body { padding: 1.2rem 1.6rem; font-size: 1.8rem; color: #1A1A1A; } .c-related .c-list { margin-top: 0.8rem !important; margin-bottom: 0.8rem !important; } .p-downloadPanel__surfaceShadow::before { content: ""; border-radius: 2rem; } .c-downloadPanel { position: relative; height: 100%; background: #fff; border: 2px solid #7299ce; border-radius: 2rem; } .c-downloadPanel__title { display: inline-block; width: 80%; margin: -1px 0 0 -1px; padding: 1.4rem 0; border-radius: 2rem 0; background: var(--c-primary); color: #fff; font-size: 2.5rem; font-weight: 600; text-align: center; } .c-downloadPanel__inner { padding: 4rem 3.5rem 2rem; } .c-download__title { font-size: 2rem; font-weight: 600; color: var(--c-primary); background: var(--c-bg); margin-top: 0rem; } .c-download__list { list-style: none; padding: 0; margin-bottom: 3rem; } .c-download__item { display: block; border: 1px solid var(--c-primary); border-radius: 2.4rem; background: #fff; font-size: 1.8rem; font-weight: 600; } .c-download__itemNote { padding: 2rem 0 3rem; font-size: 1.6rem; letter-spacing: 0; } .c-tel { text-align: center; } .c-tel-txt { text-align: center; font-size: 1.4rem; margin-top: 1rem; } .c-tel__label { font-size: 3.6rem; color: #1A1A1A; font-weight: 600; } .c-tel__number { font-size: 4.8rem; font-weight: 600; color: var(--c-primary) !important; } .c-pagination { display: flex; flex-wrap: wrap; gap: 1.8rem; justify-content: center; font-size: 1.6rem; } .c-pagination .is-disabled { opacity: .35; pointer-events: none; } .c-pagination__prev, .c-pagination__next, .c-pagination__num { display: inline-flex; align-items: center; justify-content: center; height: 4rem; color: var(--c-primary); border: 1px solid var(--c-primary); background: #fff; border-radius: .6rem; } .c-pagination__prev, .c-pagination__next { padding: 0 1.2rem; } .c-pagination__prev::before { content: "<"; margin-right: .8rem; } .c-pagination__next::after { content: ">"; margin-left: .8rem; } .c-pagination__num { min-width: 4rem; } .c-pagination__num.is-current { background: var(--c-bg); } .iframe-map { width: 100%; } .iframe-map iframe { width: 100%; height: 100%; border: 0; display: block; } .p-footerContact__surfaceShadow::before { content: ""; margin-left: 10rem; border-radius: 8rem 0 0 8rem; } .p-footerContact { background: var(--c-primary); margin-left: 10rem; border-radius: 8rem 0 0 8rem; } .p-footerContact__inner { max-width: calc(1600px - 10rem); margin-inline: auto; padding: 4rem 20rem 7rem 10rem; color: #fff; } .p-footerContact__top { display: grid; grid-template-columns: 41rem 0.95fr auto; align-items: start; } .p-footerContact__title { font-size: 8rem; color: #fff; } .p-footerContact__org { padding-top: 1rem; font-size: 2.4rem; font-weight: 600; } .p-footerContact__info { padding-top: 6.8rem; } .p-footerContact__info p { margin: 0; } .p-footerContact__addr { font-size: 1.6rem; } .p-footerContact__tel { padding: .6rem 0; font-size: 2.4rem; font-weight: 600; letter-spacing: .04em; } .p-footerContact__meta { padding-bottom: 1rem; font-size: 1.6rem; } .p-footerContact__cta { padding-top: 9rem; } .p-footerNav { margin-top: 4.8rem; } .p-footerNav__cols { display: grid; grid-template-columns: 14em repeat(2, minmax(0, 18rem)) repeat(3, minmax(0, 16rem)) 1fr; align-items: start; } .p-footerNav__head { display: inline-block; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.6rem; margin-bottom: 1rem; letter-spacing: .1em; } .p-footerNav__list { list-style: none; margin: 0; padding: 1rem 0 0 .2rem; display: grid; gap: .6rem; font-size: 1.2rem; } .p-footerNav__list a { color: #fff; } .p-footerNav__list>li { position: relative; padding-left: .7rem; } .p-footerNav__list>li::before { content: ""; position: absolute; left: 0; top: .8em; width: .25rem; height: .25rem; border-radius: 999px; background: #fff; transform: translateY(-50%); } .p-footerBottom { padding: 7rem 0 6rem; } .p-footerBottom__inner { position: relative; } .p-footerBottom__center { text-align: center; } .p-footerBottom__logo { width: 20rem; height: auto; display: inline-block; } .p-footerBottom__copy { padding-top: 4rem; font-size: 1.8rem; font-weight: 600; color: var(--c-primary); } .p-footerBottom__desc { padding: 2.2rem 0 0; font-size: 1.6rem; text-align: center; } .c-toTop { position: fixed; right: 4rem; bottom: 6.5rem; z-index: 1000; display: inline-flex; flex-direction: column; align-items: center; gap: .8rem; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; } .c-toTop.is-show { opacity: 1; visibility: visible; pointer-events: auto; } .c-toTop__icon { position: relative; width: 4.2rem; aspect-ratio: 1 / 1; border-radius: 999px; background: linear-gradient(to left, var(--grad-stops-primary)); display: grid; place-items: center; } .c-toTop__icon::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 1.2rem; height: 1.2rem; border-left: .15rem solid #fff; border-top: .15rem solid #fff; transform: rotate(45deg); border-radius: .1rem; } .c-toTop__icon::after { content: ""; position: absolute; top: 2rem; right: 0; bottom: 0; left: 0; margin: auto; width: .15rem; height: 1.5rem; background: #fff; border-radius: 999px; transform: translateY(-1rem); } .c-toTop__label { font-size: 1.5rem; font-weight: 800; letter-spacing: .04em; color: var(--c-primary); } @media (max-width: 768px) { .c-iconCircleArrow { width: 2.5rem; height: 2.5rem; } .c-iconCircleArrow::before { top: calc(50% + .1rem); left: calc(50% - .6rem); width: 1.3rem; } .c-iconCircleArrow::after { top: calc(50% - .03rem); right: .42rem; width: .9rem; } .l-main { padding-top: var(--header-h); padding-bottom: 3rem; } .l-header__inner { margin-left: 1.4rem; } .c-logo__inner { gap: 1rem; padding-top: 1rem; } .c-logo__img--header { width: 7.5rem; } .c-logo__text--header { top: -.6rem; font-size: 1.25rem; letter-spacing: .08em; } .c-menuBtn { display: inline-flex; } .c-gnav { position: fixed; inset: var(--header-h) 0 0 0; z-index: 60; background: var(--c-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } .c-gnav { position: fixed; height: auto; } .c-gnav.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .c-gnav__list { display: flex; flex-direction: column; gap: 0; } .c-gnav__list>li { height: auto; display: flex; border-bottom: 2px solid var(--c-primary); } .c-gnav__list>li:last-child { border-bottom: 0; } .c-gnav__list a { flex: 1; display: flex; align-items: center; padding: 1.6rem 3rem; font-size: 1.6rem; font-weight: 600; color: #000; text-decoration: none; border: 0; } .c-gnav__btn { display: flex; align-items: center; justify-content: flex-start; background: transparent; color: inherit; border-radius: 0; padding: 2rem 3rem; font-size: 2rem; font-weight: 600; text-align: start; } .c-menuBtn__lines { background: #fff; transition: background .2s ease; } .c-menuBtn__lines::before, .c-menuBtn__lines::after { transition: transform .2s ease, top .2s ease; } .c-menuBtn.is-open .c-menuBtn__lines { background: transparent; } .c-menuBtn.is-open .c-menuBtn__lines::before { top: 0; transform: rotate(45deg); } .c-menuBtn.is-open .c-menuBtn__lines::after { top: 0; transform: rotate(-45deg); } .l-wrap { padding-inline: var(--gutter, 1.5rem); } .l-wrap--left { padding-left: var(--gutter, 1.5rem); } .l-wrap--right { padding-right: var(--gutter, 1.5rem); } .p-surface { margin-top: 1rem; margin-right: 1rem; border-radius: 0 1.8rem 1.8rem 0; } .p-surface__inner { padding: 1.5rem 1.3rem 3rem 1.5rem; } .c-serviceCard { border-radius: 1.0rem; } .c-serviceCard__img { height: 7rem; } .c-serviceCard__label { padding: 1rem 0rem; font-size: 1.2rem; /*1.15*/ line-height: 1.7; } .c-breadcrumb__list { font-size: .8rem; } .c-pageTitle { margin-top: 1.5rem; font-size: 3rem; } .c-pageSub { margin-top: .5rem; font-size: 1.2rem; /*1.15*/ margin-bottom: 1.5rem; } .c-heading { font-size: 1.4rem; line-height: 1.7; margin-bottom: 1.5rem; } .c-leadText { font-size: 1.2rem; /*1.15*/ line-height: 1.7; } .c-barTitle { padding-left: 1.2rem; padding-right: 1.2rem; margin-bottom: 1rem; } .c-barTitle--primary { padding-top: .6rem; padding-bottom: .6rem; font-size: 1.3rem; border-radius: .6rem 0; margin-bottom: 1.5rem; } .c-barTitle--line { padding-bottom: 1.2rem; font-size: 1.3rem; } .c-barTitle--line::after { height: .2rem; } .c-barTitle--light { margin-top: 2.4rem; padding-top: .6rem; padding-bottom: .6rem; font-size: 1.2rem; /*1.15*/ border-radius: .6rem; margin-bottom: 0.5rem; } .c-sectionText { margin-top: 2rem; font-size: 1.2rem; /*1.15*/ margin-bottom: 2rem; } .c-media { grid-template-columns: 1fr; gap: 2rem; margin-bottom: 1.5rem; } .c-media__title { font-size: 1.2rem; /*1.15*/ } .c-media__text { font-size: 1.2rem; /*1.15*/ margin-top: 0.5rem; } .c-media__img { margin: 0; } .c-card { gap: 1rem; } .c-card__title { font-size: 1.2rem; /*1.15*/ } .c-card__text { font-size: 1.2rem; /*1.15*/ } .l-grid { gap: 2rem; } .l-grid--2 { grid-template-columns: 1fr; } .l-grid--3 { grid-template-columns: 1fr; } .c-kv { margin: 0rem 0 0rem 0 !important; font-size: 1.2rem; /*1.15*/ } /* 1行目: term / 2行目: desc / 3行目: line */ .c-kvRow { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 3px; row-gap: 0.9rem; padding-top: 0rem; } .c-kvRow__term { grid-column: 1; grid-row: 1; width: 100%; margin: 0; font-size: 1.4rem; background: var(--c-bg); padding: 0.8rem 1rem; } .c-kvRow__desc { grid-column: 1; grid-row: 2; width: 100%; margin: 0 0 1.5rem 0; } /* 線は一番下（3行目）に固定 */ .c-kvRow::before, .c-kvRow::after { display: none; } /* もともとPCは before=primary / after=gray を2本で表現しているので SPでは「1本」にするなら after を消すのが安全 */ .c-kvRow::after { display: none; } .c-kv .c-list { margin-bottom: 0rem !important; } .c-textBlock { font-size: 1.2rem; /*1.15*/ } .c-text { padding: 2rem 0; } .c-list { margin-top: 3rem; font-size: 1.2rem; /*1.15*/ } .c-list--dot { gap: 0.8em; } .c-list--dot .c-list__item { gap: .4rem; } .c-list--dot .c-list__item::before { margin-top: .3em; } .c-linkRow { margin-top: 3rem; font-size: 1.2rem; /*1.15*/ } .c-button { width: 20rem; height: 5rem; } .c-button__label { font-size: 1.2rem; } .c-button__icon { margin-right: 2rem; } .c-related { margin-top: 1.5rem; margin-bottom: 1.5rem; padding: 1.4rem; border-radius: 1.3rem; } .c-related__title { font-size: 1.2rem; } .c-related__body { padding: 0.5rem; font-size: 1.2rem; /*1.15*/ } .c-related .c-list { margin-bottom: 0.8rem !important; } .c-downloadPanel { border-radius: 1rem; margin: 0 .5rem; } .c-downloadPanel__inner { padding: 1.3rem 2rem 2rem; } .c-downloadPanel__title { width: 90%; margin: -1px 0 0 -1px; padding: .8rem 0; border-radius: 1rem 0; font-size: 1.4rem; text-align: center; } .c-download__title { font-size: 1.14rem; padding: 1.5rem 1.8rem !important; } .c-download__item { font-size: 1.2rem; /*1.15*/ padding: 1.2rem 2.8rem !important; } .c-download__itemNote { padding: .35rem 0 .6rem; font-size: .95rem; letter-spacing: 0; line-height: 1.7; } .c-tel__label { font-size: 1.8rem; } .c-tel__number { font-size: 2rem; } .c-tel-txt { font-size: 1.0rem; } .c-pagination { gap: .8rem; font-size: 1.2rem; /*1.15*/ } .c-pagination__prev, .c-pagination__next, .c-pagination__num { height: 2.2rem; border-radius: .3rem; } .c-pagination__prev, .c-pagination__next { padding: 0 .8rem; } .c-pagination__prev::before { margin-right: .4rem; } .c-pagination__next::after { margin-left: .4rem; } .c-pagination__num { min-width: 2.2rem; } .p-footerContact { margin-left: 1rem; padding-bottom: 4rem; border-radius: 3rem 0 0 3rem; } .p-footerContact__surfaceShadow::before { margin-left: 1rem; border-radius: 3rem 3rem 0 0; } .p-footerContact__inner { max-width: 100%; padding: 1.5rem 3rem 0rem; } .p-footerContact__top { grid-template-columns: 1fr; gap: 0; } .p-footerContact__title { font-size: 3rem; } .p-footerContact__org { padding-top: 1.3rem; font-size: 1.45rem; } .p-footerContact__info { padding-top: .6rem; } .p-footerContact__addr { font-size: 1.2rem; /*1.15*/ } .p-footerContact__addr .is-jp { padding-left: .6rem; letter-spacing: .12em; } .p-footerContact__tel { padding: .6rem 0; font-size: 1.5rem; } .p-footerContact__meta { padding-bottom: .3rem; font-size: 1.1rem; } .p-footerContact__cta { display: flex; justify-content: center; padding-top: 2.4rem; } .p-footerNav { margin-top: 2.4rem; } .p-footerNav__cols { grid-template-columns: .75fr 1fr; gap: 1.3rem 0rem; } .p-footerContact__top>*, .p-footerNav__col { min-width: 0; } .p-footerNav__head { font-size: 1.2rem; /*1.15*/ margin-bottom: 0rem; letter-spacing: .1em; } .p-footerNav__list { gap: .25rem; font-size: 1rem; } .p-footerNav__list a { overflow-wrap: anywhere; } .p-footerBottom { padding: 3.2rem 0 8rem; } .p-footerBottom__logo { width: 12.4rem; } .p-footerBottom__copy { padding-top: 2rem; font-size: 1.2rem; } .p-footerBottom__desc { padding: 1.2rem 0 0; font-size: 1.2rem; /*1.15*/ line-height: 1.6; letter-spacing: 0; text-align: start; } .c-toTop { right: 1rem; bottom: 1.5rem; gap: .2rem; } .c-toTop__label { font-size: 1.2rem; } } /* ========================================================================== 10. Page: Home (index.php) ============================================================================ */ .is-home .p-kv { position: relative; padding-bottom: 9rem; } .is-home .p-kv__inner { position: relative; isolation: isolate; } .is-home .p-kv__grid { display: grid; grid-template-columns: 1fr 90rem; gap: 4.8rem; padding-top: 2.5rem; padding-right: 4.5rem; } .is-home .p-kv__copy { z-index: 3; order: 1; padding-top: 6.4rem; } .is-home .p-kv__lead { font-size: 5.8rem; font-weight: 600; line-height: 1.6; color: #1a1a1a; } .is-home .p-kv__visual { width: 100%; height: 60rem; border-radius: 10rem 0; position: relative; z-index: 1; order: 2; overflow: hidden; } @media (max-width: 1280px) { .is-home .p-kv__lead { font-size: 5.6rem; } } .p-kv__visual>img { width: 100%; height: 100%; object-fit: cover; display: block; } .is-home .p-kv__brand { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(44.5%); z-index: 2; pointer-events: none; font-size: 26rem; font-weight: 500; color: #fff; text-align: center; } .is-home .p-homeDownload { background-image: url("/assets/img/home/home-download-bg.webp"); background-size: cover; background-repeat: no-repeat; background-position: 0 -4rem; } .is-home .p-homeDownload__inner { padding: 7rem 0 8rem; } .is-home .p-homeDownload__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: stretch; } .is-home .c-download__title { text-align: center; padding: .8rem 0; border-radius: 999rem; } .is-home .c-download__item { margin-top: 2rem; padding: 1.2rem 0; text-align: center; } .is-home .p-homeDownload__note { font-size: 1.5rem; text-align: center; padding-top: 4rem; } .is-home .p-homeDownload__cta { display: flex; justify-content: center; padding-top: 4rem; } .is-home .p-section__title { font-size: 8rem; } .is-home .p-homeService__surfaceShadow::before { content: ""; margin-right: 10rem; border-radius: 0 8rem 8rem 0; } .is-home .p-homeService__surfaceShadow::after { content: ""; position: absolute; inset: 50% 0 0 0; background: var(--c-primary); pointer-events: none; z-index: 0; } .is-home .p-homeService { background: linear-gradient(to bottom, var(--c-bg) 0%, var(--c-bg) 50%, var(--c-primary) 50%, var(--c-primary) 100%); } .is-home .p-homeService__surface { margin-right: 10rem; background: #fff; border-radius: 0 8rem 8rem 0; position: relative; z-index: 3; } .is-home .p-homeService__inner { max-width: calc(1600px - 10rem); margin-inline: auto; padding: 5rem 10rem 6rem 20rem; } .is-home .p-homeService__head { display: grid; grid-template-columns: 0.82fr 1fr; align-items: start; margin-bottom: 4.8rem; } .is-home .p-homeService__title { color: var(--c-primary); } .is-home .p-homeService__desc { font-size: 1.95rem; font-weight: 600; line-height: 2; letter-spacing: .06em; padding-right: 2rem; color: #1a1a1a; } .is-home .p-homeService__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem; } .is-home .p-homeService__grid>li { height: 100%; } .is-home .p-homeService__cta { display: flex; justify-content: center; padding-top: 6rem; } .is-home .p-homeNews { position: relative; margin-top: -1px; padding: 1px 0 0; color: #fff; background: var(--c-primary); z-index: 2; } .is-home .p-homeNews__inner { padding: 4rem 0 9rem; } .is-home .p-homeNews__title { color: #fff; } .is-home .p-homeNews__list { list-style: none; padding: 3rem 0 0; margin: 0; } .is-home .p-homeNews__item { display: grid; grid-template-columns: 14rem 0.7fr; grid-template-rows: auto 3px; column-gap: 5rem; row-gap: 3rem; align-items: center; position: relative; padding: 0 0 3rem; } .is-home .p-homeNews__item::before { content: ""; grid-column: 1; grid-row: 2; height: 3px; background: #fff; align-self: end; } .is-home .p-homeNews__item::after { content: ""; grid-column: 2; grid-row: 2; height: 3px; background: #fff; align-self: end; } @media (min-width: 769px) { .is-home .p-homeNews__item:last-child::before, .is-home .p-homeNews__item:last-child::after { content: none; } } .is-home .p-homeNews__date { margin: 0; font-size: 1.65rem; font-weight: 600; line-height: 1.8; letter-spacing: .04em; white-space: nowrap; align-self: start; } .is-home .p-homeNews__link { color: #fff; font-size: 1.6rem; line-height: 1.8; text-decoration: underline; text-underline-offset: .2rem; text-decoration-thickness: 1px; } .is-home .p-homeNews__cta { display: flex; justify-content: center; } .is-home .p-homeAccess__inner { display: grid; grid-template-columns: 0.5fr 1fr; gap: 2rem; padding: 5rem 5rem 10rem 0; } .is-home .p-homeAccess__title { color: var(--c-primary); } .is-home .p-homeAccess__name { padding-top: 6rem; font-size: 2.2rem; font-weight: 600; color: var(--c-primary); line-height: 1.6; } .is-home .p-homeAccess__address { padding-top: 3rem; font-size: 1.7rem; line-height: 2; font-style: normal; } .is-home .p-homeAccess__tel { font-size: 2.4rem; font-weight: 600; } .is-home .p-homeAccess__telLabel { color: var(--c-primary); } .is-home .p-homeAccess__telNum { color: var(--c-primary); text-decoration: none; } .is-home .p-homeAccess__meta { padding: .4rem 0 0; list-style: none; font-size: 1.6rem; display: grid; gap: .8rem; } .is-home .p-homeAccess__photo { width: 40rem; border-radius: 2rem; overflow: hidden; margin: 4rem 0 0; } .is-home .p-homeAccess__map { padding: 5rem 0 2rem; } @media (max-width: 768px) { .is-home .l-wrap--left { margin-inline: auto; padding: 0 var(--gutter, 1.5rem); } .is-home .p-kv { padding-bottom: 0; } .is-home .p-kv__inner { grid-template-columns: 1fr; } .is-home .p-kv__grid { grid-template-columns: 1fr; gap: 2.4rem; padding-top: 1rem; padding-right: 0; } .is-home .p-kv__copy { order: 2; padding-top: 0; } .is-home .p-kv__lead { font-size: 2.2rem; padding-left: .2rem; margin-top: -.4rem; } .is-home .p-kv__visual { order: 1; height: 19rem; border-radius: 3rem 0; } .is-home .p-kv__brand { font-size: 5.6rem; transform: translateY(-82%); } .is-home .p-homeDownload__inner { padding: 1.6rem 0 3.5rem; } .is-home .p-homeDownload__grid { grid-template-columns: 1fr; gap: 2.4rem; } .is-home .c-download__title { padding: .4rem 0; } .is-home .c-download__item { margin-top: 1.2rem; padding: .6rem 0; } .is-home .p-homeDownload__note { font-size: 1.2rem; /*1.15*/ padding-top: 2.4rem; } .is-home .p-homeDownload__cta { padding-top: 3rem; } .is-home .p-section__title { font-size: 3rem; } .is-home .p-homeService__surface { margin-right: 1rem; border-radius: 0 2rem 2rem 0; } .is-home .p-homeService__inner { padding: 3rem 2rem 4rem 2.5rem; } .is-home .p-homeService__head { grid-template-columns: 1fr; gap: .8rem; margin-bottom: 2.6rem; } .is-home .p-homeService__desc { font-size: 1.25rem; line-height: 1.7; padding-right: 0rem; } .is-home .p-homeService__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; } .is-home .p-homeService__cta { padding-top: 3rem; } .is-home .p-homeNews__inner { padding: 2.5rem .5rem 4rem; } .is-home .p-homeNews__list { padding: 2rem 0 0; } .is-home .p-homeNews__item { grid-template-columns: 1fr; grid-template-rows: auto auto 3px; row-gap: 1.2rem; } .is-home .p-homeNews__item::before, .is-home .p-homeNews__item::after { grid-column: 1; } .is-home .p-homeNews__item::after { display: none; } /* タイトル行に線が被るのを防ぐ：区切り線を3行目へ */ .is-home .p-homeNews__item::before, .is-home .p-homeNews__item::after { grid-row: 3; } /* 念のため配置を固定（自動配置任せにしない） */ .is-home .p-homeNews__date { grid-row: 1; } .is-home .p-homeNews__link { grid-row: 2; display: block; overflow-wrap: anywhere; /* 長い連続文字でも折り返す */ word-break: break-word; } .is-home .p-homeNews__date { font-size: 1.2rem; letter-spacing: .04em; } .is-home .p-homeNews__link { font-size: 1.1rem; } .is-home .p-homeAccess__inner { grid-template-columns: 1fr; padding: 2rem 0rem 0rem 0; } .is-home .p-homeAccess__name { padding-top: 2rem; font-size: 1.4rem; } .is-home .p-homeAccess__address { padding-top: .3rem; font-size: 1.2rem; } .is-home .p-homeAccess__tel { font-size: 1.6rem; } .is-home .p-homeAccess__meta { font-size: 1.1rem; gap: .2rem; } .is-home .p-homeAccess__photo { width: 100%; margin: 2rem 0 0; } .is-home .p-homeAccess__map { height: 20rem; padding: 2.4rem 0 0; } } /* ========================================================================== 11. Page: Template (template.html) ============================================================================ */ .is-template .p-surfaceShadow::before { content: ""; margin-right: 10rem; border-radius: 0 8rem 8rem 0; } .is-template .p-pageHead { padding-top: 0px; } .is-template .p-lead { margin-bottom: 4.2rem; } .is-template .p-sectionNav { padding-top: 5.6rem; } .is-template .p-mediaPairs { display: flex; flex-direction: column; gap: 6rem; padding-top: 3rem; } .is-template .p-wideImage { padding-top: 6rem; } .is-template .p-cardGrid { padding-top: 6rem; } .is-template .p-cardGridSmall { padding-top: 6rem; } .is-template .c-kv { margin-bottom: 4.2rem; } .is-template .c-list { margin-bottom: 3.2rem; } .is-template .p-textBlock { padding-top: 2.8rem; margin-bottom: 4rem; } .is-template .p-list { padding-top: 6rem; } .is-template .p-cta { display: flex; padding-top: 1.6rem; justify-content: center; margin-bottom: 3rem; } .is-template .p-cta a { color: #fff } .is-template .p-download { padding-bottom: 5rem; } .is-template .c-download__title { padding: 2rem 2.8rem; border-radius: 1.3rem; margin-bottom: 3rem; } .is-template .c-download__item { margin-top: 2.4rem; padding: 1.2rem 4.8rem; } .is-template .p-tel { padding-top: 4.8rem; } .is-template .p-bottomNav { padding-top: 4.8rem; } @media (min-width: 769px) { .is-template .p-lead__inner { text-align: center; } } @media (max-width: 768px) { .is-template .p-surfaceShadow::before { margin-right: 1rem; border-radius: 0 3rem 3rem 0; } .is-template .p-lead { padding-top: 1.5rem; margin-bottom: 2rem; } .is-template .p-sectionNav { padding-top: 0rem; } .is-template .p-mediaPairs { gap: 3rem; padding-top: 2rem; } .is-template .p-wideImage { padding-top: 1.5rem; margin-bottom: 2rem !important; } .is-template .p-cardGrid { padding-top: 4rem; } .is-template .p-cardGridSmall { padding-top: 0rem; } .is-template .p-textBlock { padding-top: 0rem; } .is-template .p-list { padding-top: 3rem; } .is-template .p-cta { padding-top: 3rem; } .is-template .p-download { padding-top: 0rem; padding-bottom: 2rem; } .is-template .p-tel { padding-top: 3rem; } .is-template .p-bottomNav { padding-top: 3rem; } } /* ========================================================================== 12. Page: News (archive-news.php/single-news.php) ============================================================================ */ .is-news .p-newsArchive__empty { padding: 6rem 0; font-size: 1.6rem; } .is-news .p-newsArchive__list { list-style: none; padding: 6rem 0 8rem; margin: 0; } .is-news .p-newsArchive__item { padding: 0; } .is-news .p-newsArchive__link { display: grid; grid-template-columns: 24rem 1fr; grid-template-rows: auto 3px; column-gap: 2rem; row-gap: 3rem; align-items: center; position: relative; padding: 3rem 0 0; } .is-news .p-newsArchive__link::before { content: ""; grid-column: 1; grid-row: 2; height: 3px; background: var(--c-primary); align-self: end; } .is-news .p-newsArchive__link::after { content: ""; grid-column: 2; grid-row: 2; height: 3px; background: #ccc; align-self: end; } @media (min-width: 769px) { .is-news .p-newsArchive__item:last-child .p-newsArchive__link::before, .is-news .p-newsArchive__item:last-child .p-newsArchive__link::after { content: none; } } .is-news .p-newsArchive__date { margin: 0; color: var(--c-primary); font-size: 1.8rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; text-align: center; } .is-news .p-newsArchive__title { overflow-wrap: anywhere; font-size: 1.8rem; } .is-news .p-newsSingle__inner { padding: 8rem 0; } .is-news .p-newsSingle__date { margin: 0; color: var(--c-primary); font-size: 1.8rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; } .is-news .p-newsSingle__title { position: relative; font-size: 2rem; color: var(--c-primary); line-height: 1.8; padding: 2.5rem 2rem 2rem; } .is-news .p-newsSingle__title::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(to right, var(--grad-stops-primary)); } .is-news .p-newsSingle__content { font-size: 1.6rem; line-height: 2; padding: 5rem 0; } .is-news .p-newsSingle__content ul, .is-news .p-newsSingle__content ol { padding: 0; list-style: none; color: #1A1A1A; display: grid; padding: 2rem 0; } .is-news .p-newsSingle__content li { display: flex; align-items: flex-start; gap: 1rem; margin: 0; } .is-news .p-newsSingle__content li::before { content: ""; width: 1rem; height: 1rem; margin-top: 1.25rem; border-radius: 999px; background: var(--c-primary); flex: 0 0 1rem; } .is-news .p-newsSingle__content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: .25em; } .is-news .p-newsSingle__content img { max-width: 100%; height: auto; display: block; border-radius: 2rem; overflow: hidden; margin: 0 0 4rem; } .is-news .c-pagination { align-items: center; gap: 2rem; padding: 0 0 10rem; } .is-news .p-news__cta { display: flex; justify-content: center; padding: 2rem 0 0; } @media (max-width: 768px) { .is-news .p-newsArchive__empty { padding: 2rem 0; font-size: 1.1rem; } .is-news .p-newsArchive__list { padding: 2rem 0 6rem; } .is-news .p-newsArchive__link { grid-template-columns: 1fr; grid-template-rows: auto 3px auto 3px; row-gap: 1.2rem; padding: 2rem 0 0; } .is-news .p-newsArchive__link::before { grid-column: 1; grid-row: 2; } .is-news .p-newsArchive__link::after { grid-column: 1; grid-row: 4; } .is-news .p-newsArchive__date { grid-column: 1; grid-row: 1; font-size: 1.2rem; letter-spacing: .04em; text-align: start; } .is-news .p-newsArchive__title { grid-column: 1; grid-row: 3; font-size: 1.1rem; } .is-news .p-newsSingle__inner { padding: 3rem 0; } .is-news .p-newsSingle__date { font-size: 1.2rem; /*1.15*/ letter-spacing: .04em; } .is-news .p-newsSingle__title { font-size: 1.1rem; padding: 1.5rem 0 1rem; } .is-news .p-newsSingle__content { font-size: 1.1rem; line-height: 1.8; padding: 3rem 0; } .is-news .p-newsSingle__content li { gap: .5rem; } .is-news .p-newsSingle__content li::before { width: .8rem; height: .8rem; margin-top: .7rem; flex: 0 0 .8rem; } .is-news .p-newsSingle__content img { margin: 0 0 3rem; } .is-news .p-newsSingle__navigation { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .is-news .p-newsSingle__navigation .c-pagination { gap: 1rem; padding: 0 0 3rem; } .is-news .p-newsSingle__navigation .c-button { width: 14rem; height: 4rem; } .is-news .p-newsSingle__navigation .c-button__label { font-size: 1.2rem; /*1.15*/ padding-left: 1rem; } .c-button.is-reverse .c-button__icon { margin-left: .6rem; } .is-news .p-newsSingle__navigation .c-iconCircleArrow.is-sm { --icon-scale: .8; } .is-news .c-pagination { gap: .6rem; padding: 0 0 1rem; } } /*各ページ調整*/ /*service サービス*/ /*Company 当組合*/ .txt-ms { line-height: 2.8; /* 既存と合わせる */ background-image: linear-gradient(to bottom, transparent calc(100% - 1px), #a1a1a1 100%); background-size: 100% 2.8em; /* = line-height */ background-repeat: repeat-y; font-size: 2.0rem; } .txt-name { font-size: 2.0rem; text-align: right; } .page-company .p-pageHead { margin-bottom: 8rem; } .page-company .p-wideImage { margin-bottom: 4rem; } /* Google Map iframe wrapper */ .iframe-map { width: 100%; max-width: 1200px; /* PC最大幅 */ margin: 0 auto; position: relative; /* アスペクト比 2:1（1200×600） */ aspect-ratio: 2 / 1; margin-bottom: 2rem; } #access .c-sectionText { margin-bottom: 2rem; } /* fallback（aspect-ratio 非対応ブラウザ用） */ @supports not (aspect-ratio: 2 / 1) { .iframe-map { height: 0; padding-top: 50%; } } .iframe-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 768px) { .txt-ms { font-size: 1.2rem; line-height: 2.2; /* 既存と合わせる */ background-size: 100% 2.2em; /* = line-height */ } .txt-name { font-size: 1.2rem; } .page-company .p-pageHead { margin-bottom: 2rem; } /* TOPの地図ブロックは横溢れしないように固定 */ .is-home .p-homeAccess__map.iframe-map { width: 100%; max-width: 100%; margin: 0; overflow: hidden; /* 念のため */ position: relative; /* absolute iframe の基準 */ aspect-ratio: 16 / 9; /* 好みで 2/1 でも可 */ } .is-home .p-homeAccess__map.iframe-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; } } .dl-txt { margin-top: 1rem; font-size: 1.6rem; } @media (max-width: 768px) { .dl-txt { font-size: 1.0rem; } } /*recruit リクルート*/ .c-media-message .c-media__text { text-align: left; } /* recruit リクルート：メッセージ（PC時右カラムを350px固定） */ @media (min-width: 769px) { .c-media.c-media-message { grid-template-columns: 1fr 35rem; /* 350px */ } } /*common*/ .bold { font-weight: 600; } .aligncenter { text-align: center; } .alignright { text-align: right; } .aligleft { text-align: right; } img.aligncenter { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; } img.alignright { display: block !important; margin-left: auto !important; margin-right: 0 !important; } img.alignleft { display: block !important; margin-left: 0 !important; margin-right: auto !important; } .section-page { margin-bottom: 5rem; } @media (max-width: 768px) { .section-page { margin-bottom: 3rem; } } /* ========================================= Header – SP only fix ========================================= */ @media (max-width: 768px) { .l-header { position: fixed; inset: 0 0 auto 0; /* top:0; left:0; right:0 */ width: auto; max-width: 100%; overflow-x: clip; /* 横方向のはみ出し防止 */ background: var(--c-bg); z-index: 1000; } .l-header__inner { display: flex; align-items: center; justify-content: space-between; /* 重要 */ min-width: 0; width: 100%; /* 左右余白は padding に寄せる */ margin: 0; padding-left: 1.4rem; padding-right: 0; } } /* 0〜10rem（0.5rem刻み）: N/10 rem / 例: mb-10 = 1.0rem */ .mb-0 { margin-bottom: 0.0rem } .mb-5 { margin-bottom: 0.5rem } .mb-10 { margin-bottom: 1.0rem } .mb-15 { margin-bottom: 1.5rem } .mb-20 { margin-bottom: 2.0rem } .mb-25 { margin-bottom: 2.5rem } .mb-30 { margin-bottom: 3.0rem } .mb-35 { margin-bottom: 3.5rem } .mb-40 { margin-bottom: 4.0rem } .mb-45 { margin-bottom: 4.5rem } .mb-50 { margin-bottom: 5.0rem } .mb-55 { margin-bottom: 5.5rem } .mb-60 { margin-bottom: 6.0rem } .mb-65 { margin-bottom: 6.5rem } .mb-70 { margin-bottom: 7.0rem } .mb-75 { margin-bottom: 7.5rem } .mb-80 { margin-bottom: 8.0rem } .mb-85 { margin-bottom: 8.5rem } .mb-90 { margin-bottom: 9.0rem } .mb-95 { margin-bottom: 9.5rem } .mb-100 { margin-bottom: 10.0rem } .mt-0 { margin-top: 0.0rem } .mt-5 { margin-top: 0.5rem } .mt-10 { margin-top: 1.0rem } .mt-15 { margin-top: 1.5rem } .mt-20 { margin-top: 2.0rem } .mt-25 { margin-top: 2.5rem } .mt-30 { margin-top: 3.0rem } .mt-35 { margin-top: 3.5rem } .mt-40 { margin-top: 4.0rem } .mt-45 { margin-top: 4.5rem } .mt-50 { margin-top: 5.0rem } .mt-55 { margin-top: 5.5rem } .mt-60 { margin-top: 6.0rem } .mt-65 { margin-top: 6.5rem } .mt-70 { margin-top: 7.0rem } .mt-75 { margin-top: 7.5rem } .mt-80 { margin-top: 8.0rem } .mt-85 { margin-top: 8.5rem } .mt-90 { margin-top: 9.0rem } .mt-95 { margin-top: 9.5rem } .mt-100 { margin-top: 10.0rem } .pb-0 { padding-bottom: 0.0rem } .pb-5 { padding-bottom: 0.5rem } .pb-10 { padding-bottom: 1.0rem } .pb-15 { padding-bottom: 1.5rem } .pb-20 { padding-bottom: 2.0rem } .pb-25 { padding-bottom: 2.5rem } .pb-30 { padding-bottom: 3.0rem } .pb-35 { padding-bottom: 3.5rem } .pb-40 { padding-bottom: 4.0rem } .pb-45 { padding-bottom: 4.5rem } .pb-50 { padding-bottom: 5.0rem } .pb-55 { padding-bottom: 5.5rem } .pb-60 { padding-bottom: 6.0rem } .pb-65 { padding-bottom: 6.5rem } .pb-70 { padding-bottom: 7.0rem } .pb-75 { padding-bottom: 7.5rem } .pb-80 { padding-bottom: 8.0rem } .pb-85 { padding-bottom: 8.5rem } .pb-90 { padding-bottom: 9.0rem } .pb-95 { padding-bottom: 9.5rem } .pb-100 { padding-bottom: 10.0rem } .pt-0 { padding-top: 0.0rem } .pt-5 { padding-top: 0.5rem } .pt-10 { padding-top: 1.0rem } .pt-15 { padding-top: 1.5rem } .pt-20 { padding-top: 2.0rem } .pt-25 { padding-top: 2.5rem } .pt-30 { padding-top: 3.0rem } .pt-35 { padding-top: 3.5rem } .pt-40 { padding-top: 4.0rem } .pt-45 { padding-top: 4.5rem } .pt-50 { padding-top: 5.0rem } .pt-55 { padding-top: 5.5rem } .pt-60 { padding-top: 6.0rem } .pt-65 { padding-top: 6.5rem } .pt-70 { padding-top: 7.0rem } .pt-75 { padding-top: 7.5rem } .pt-80 { padding-top: 8.0rem } .pt-85 { padding-top: 8.5rem } .pt-90 { padding-top: 9.0rem } .pt-95 { padding-top: 9.5rem } .pt-100 { padding-top: 10.0rem } /* md以上で上書き（例: mb-10 mb-md-20） */ @media (min-width:768px) { .mb-md-0 { margin-bottom: 0.0rem } .mb-md-5 { margin-bottom: 0.5rem } .mb-md-10 { margin-bottom: 1.0rem } .mb-md-15 { margin-bottom: 1.5rem } .mb-md-20 { margin-bottom: 2.0rem } .mb-md-25 { margin-bottom: 2.5rem } .mb-md-30 { margin-bottom: 3.0rem } .mb-md-35 { margin-bottom: 3.5rem } .mb-md-40 { margin-bottom: 4.0rem } .mb-md-45 { margin-bottom: 4.5rem } .mb-md-50 { margin-bottom: 5.0rem } .mb-md-55 { margin-bottom: 5.5rem } .mb-md-60 { margin-bottom: 6.0rem } .mb-md-65 { margin-bottom: 6.5rem } .mb-md-70 { margin-bottom: 7.0rem } .mb-md-75 { margin-bottom: 7.5rem } .mb-md-80 { margin-bottom: 8.0rem } .mb-md-85 { margin-bottom: 8.5rem } .mb-md-90 { margin-bottom: 9.0rem } .mb-md-95 { margin-bottom: 9.5rem } .mb-md-100 { margin-bottom: 10.0rem } .mt-md-0 { margin-top: 0.0rem } .mt-md-5 { margin-top: 0.5rem } .mt-md-10 { margin-top: 1.0rem } .mt-md-15 { margin-top: 1.5rem } .mt-md-20 { margin-top: 2.0rem } .mt-md-25 { margin-top: 2.5rem } .mt-md-30 { margin-top: 3.0rem } .mt-md-35 { margin-top: 3.5rem } .mt-md-40 { margin-top: 4.0rem } .mt-md-45 { margin-top: 4.5rem } .mt-md-50 { margin-top: 5.0rem } .mt-md-55 { margin-top: 5.5rem } .mt-md-60 { margin-top: 6.0rem } .mt-md-65 { margin-top: 6.5rem } .mt-md-70 { margin-top: 7.0rem } .mt-md-75 { margin-top: 7.5rem } .mt-md-80 { margin-top: 8.0rem } .mt-md-85 { margin-top: 8.5rem } .mt-md-90 { margin-top: 9.0rem } .mt-md-95 { margin-top: 9.5rem } .mt-md-100 { margin-top: 10.0rem } .pb-md-0 { padding-bottom: 0.0rem } .pb-md-5 { padding-bottom: 0.5rem } .pb-md-10 { padding-bottom: 1.0rem } .pb-md-15 { padding-bottom: 1.5rem } .pb-md-20 { padding-bottom: 2.0rem } .pb-md-25 { padding-bottom: 2.5rem } .pb-md-30 { padding-bottom: 3.0rem } .pb-md-35 { padding-bottom: 3.5rem } .pb-md-40 { padding-bottom: 4.0rem } .pb-md-45 { padding-bottom: 4.5rem } .pb-md-50 { padding-bottom: 5.0rem } .pb-md-55 { padding-bottom: 5.5rem } .pb-md-60 { padding-bottom: 6.0rem } .pb-md-65 { padding-bottom: 6.5rem } .pb-md-70 { padding-bottom: 7.0rem } .pb-md-75 { padding-bottom: 7.5rem } .pb-md-80 { padding-bottom: 8.0rem } .pb-md-85 { padding-bottom: 8.5rem } .pb-md-90 { padding-bottom: 9.0rem } .pb-md-95 { padding-bottom: 9.5rem } .pb-md-100 { padding-bottom: 10.0rem } .pt-md-0 { padding-top: 0.0rem } .pt-md-5 { padding-top: 0.5rem } .pt-md-10 { padding-top: 1.0rem } .pt-md-15 { padding-top: 1.5rem } .pt-md-20 { padding-top: 2.0rem } .pt-md-25 { padding-top: 2.5rem } .pt-md-30 { padding-top: 3.0rem } .pt-md-35 { padding-top: 3.5rem } .pt-md-40 { padding-top: 4.0rem } .pt-md-45 { padding-top: 4.5rem } .pt-md-50 { padding-top: 5.0rem } .pt-md-55 { padding-top: 5.5rem } .pt-md-60 { padding-top: 6.0rem } .pt-md-65 { padding-top: 6.5rem } .pt-md-70 { padding-top: 7.0rem } .pt-md-75 { padding-top: 7.5rem } .pt-md-80 { padding-top: 8.0rem } .pt-md-85 { padding-top: 8.5rem } .pt-md-90 { padding-top: 9.0rem } .pt-md-95 { padding-top: 9.5rem } .pt-md-100 { padding-top: 10.0rem } }