@charset "UTF-8";
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
/* === LINE Seed JP === */
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/line-seed-jp/LINESeedJP_OTF_Th.woff2") format("woff2"), url("../fonts/line-seed-jp/LINESeedJP_OTF_Th.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/line-seed-jp/LINESeedJP_OTF_Rg.woff2") format("woff2"), url("../fonts/line-seed-jp/LINESeedJP_OTF_Rg.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/line-seed-jp/LINESeedJP_OTF_Bd.woff2") format("woff2"), url("../fonts/line-seed-jp/LINESeedJP_OTF_Bd.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed JP";
src: url("../fonts/line-seed-jp/LINESeedJP_OTF_Eb.woff2") format("woff2"), url("../fonts/line-seed-jp/LINESeedJP_OTF_Eb.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
/* === LINE Seed Sans === */
@font-face {
font-family: "LINE Seed Sans";
src: url("../fonts/line-seed-sans/LINESeedSans_W_Th.woff2") format("woff2"), url("../fonts/line-seed-sans/LINESeedSans_W_Th.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed Sans";
src: url("../fonts/line-seed-sans/LINESeedSans_W_Rg.woff2") format("woff2"), url("../fonts/line-seed-sans/LINESeedSans_W_Rg.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed Sans";
src: url("../fonts/line-seed-sans/LINESeedSans_W_Bd.woff2") format("woff2"), url("../fonts/line-seed-sans/LINESeedSans_W_Bd.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed Sans";
src: url("../fonts/line-seed-sans/LINESeedSans_W_XBd.woff2") format("woff2"), url("../fonts/line-seed-sans/LINESeedSans_W_XBd.woff") format("woff");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "LINE Seed Sans";
src: url("../fonts/line-seed-sans/LINESeedSans_W_He.woff2") format("woff2"), url("../fonts/line-seed-sans/LINESeedSans_W_He.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
/* 利用例 */
:root {
--ff-jp: "LINE Seed JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
--ff-sans: "LINE Seed Sans", "Helvetica Neue", Arial, sans-serif;
}
/**
* uaplus.css version 0.0.1
*/
/**
* Different box model
*
* We use the traditional box model, where the padding and border
* of the element is drawn inside and not outside the specified
* width and height. That makes combining relative and absolute
* units in properties like inline-size and
* block-size easier.
*
* See https://en.wikipedia.org/wiki/CSS_box_model
*/
*,
*::after,
*::before {
box-sizing: border-box;
}
/**
* Improve focus styles
*
* Add spacing between content and its focus outline.
*/
:focus-visible {
outline-offset: 3px;
}
/**
* Disable text size adjustment
*
* To improve readability on non-mobile optimized websites, browsers
* like mobile Safari increase the default font size when you switch
* a website from portrait to landscape. We don't want that for our
* optimized sites.
*
* See https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/
*/
:where(html) {
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
/**
* Increase line height
*
* Long paragraphs are easier to read if the line height is higher.
*/
:where(html) {
line-height: 1.5;
}
/**
* Add scrollbar gutter
*
* Prevent the page from “jumping” when switching from a long to a short page.
*
*/
:where(html) {
scrollbar-gutter: stable;
}
/**
* Remove UA styles for h1s nested in sectioning content
*
* Nesting h1s in section, articles, etc., shouldn't influence the
* styling of the heading since nesting doesn't influence
* semantics either.
*
* See https://github.com/whatwg/html/issues/7867#issuecomment-2632395167
* See https://github.com/whatwg/html/pull/11102
* See https://html.spec.whatwg.org/#sections-and-headings
*/
:where(h1) {
font-size: 2em;
margin-block: 0.67em;
}
/**
* Improve abbreviations with titles
*
* The abbr element with the title isn't helpful regarding
* accessibility because support is inconsistent, and it's only
* accessible to some users. Still, it's commonly used.
* This rule shows a dotted underline on abbreviations in all
* browsers (there's a bug in Safari) and changes the cursor.
*
* See https://adrianroselli.com/2024/01/using-abbr-element-with-title-attribute.html
*/
:where(abbr[title]) {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dotted;
}
/**
* Optimize mark element in Forced Colors Mode
*
* The colors of the mark element don't change in Forced Colors Mode,
* which can be problematic. Use system colors instead.
*
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html#MarkWHCM
*/
@media (forced-colors: active) {
mark {
color: HighlightText;
background-color: Highlight;
}
}
/**
* Announce del, ins, and s to screen readers
*
* With the exception of NVDA (2024.4.2), which announces "deletion",
* none of the common screen readers announces the element.
* Voice Over on macOS and iOS and Narrator don't announce
* and . Usually, screen readers not announcing text-level
* semantics is something we just accept, but devs using elements
* like without knowing that they may not convey semantics is a
* common issue. We announce the start and end of stricken, inserted,
* and deleted content with pseudo-elements. For languages other
* than English, you should provide translations, e.g. :lang(de)
* :where(s::before) { content: "Durchgestrichener Text Beginn "; }
*
* See https://adrianroselli.com/2017/12/tweaking-text-level-styles.html
*/
:where(del, ins, s)::before,
:where(del, ins, s)::after {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
content: "test";
}
:where(s)::before {
content: "stricken text start ";
}
:where(s)::after {
content: " stricken text end";
}
:where(del)::before {
content: "deletion start ";
}
:where(del)::after {
content: " deletion end";
}
:where(ins)::before {
content: "insertion start ";
}
:where(ins)::after {
content: " insertion end";
}
/**
* Avoid overflow caused by embedded content
*
* Ensure that embedded content (audio, video, images, etc.)
* doesn't overflow its container.
*/
:where(audio, iframe, img, svg, video) {
max-block-size: 100%;
max-inline-size: 100%;
}
/**
* Prevent fieldsets from causing overflow
*
* Reset the default `min-inline-size: min-content` to prevent
* children from stretching fieldsets
*
* See https://github.com/twbs/bootstrap/issues/12359
* and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
*/
:where(fieldset) {
min-inline-size: 0;
}
/**
* Turn labels into block elements
*
* Labels for inputs, selects, and textarea should be block
* elements.
*/
:where(label):has(+ :where(textarea, input, select)) {
display: block;
}
/**
* Increase the block-size of textareas
*
* The default height of textareas is small. We increase it a bit.
*/
:where(textarea:not([rows])) {
min-block-size: 6em;
}
/**
* Inherit font styling in form elements
*
* buttons, inputs, selects, and textarea should have the same font
* family and size as the rest of the page.
*/
:where(button, input, select, textarea) {
font-family: inherit;
font-size: inherit;
}
/**
* Normalize search input styles
*
* Remove the rounded corners of search inputs on macOS and IOS
* and normalize the background color
*/
:where([type=search]) {
-webkit-appearance: textfield;
}
/* iOS only */
@supports (-webkit-touch-callout: none) {
:where([type=search]) {
border: 1px solid -apple-system-secondary-label;
background-color: canvas;
}
}
/**
* Maintain direction in some input types
*
* Some input types should remain left-aligned in right-to-left
* languages,but only if the value isn't empty because the
* placeholder should be right-aligned.
*
* See https://rtlstyling.com/posts/rtl-styling#form-inputs
*/
:where([type=tel], [type=url], [type=email], [type=number]):not(:-moz-placeholder) {
direction: ltr;
}
:where([type=tel], [type=url], [type=email], [type=number]):not(:placeholder-shown) {
direction: ltr;
}
/**
* Improve table styling
*
* With the default styling, tables are hard to scan. These rules
* add padding and collapsed borders.
*/
:where(table) {
border-collapse: collapse;
border: 1px solid;
}
:where(th, td) {
border: 1px solid;
padding: 0.25em 0.5em;
}
/**
* Fading dialogs
*
* Add fade in and fade out transitions for the dialog element
* and backdrops
*/
:where(dialog)::backdrop {
background: oklch(0% 0 0deg / 0.3);
}
:where(dialog),
:where(dialog)::backdrop {
opacity: 0;
transition: opacity 300ms ease-out, display 300ms allow-discrete, overlay 300ms allow-discrete;
}
:where(dialog[open]),
:where(dialog[open])::backdrop {
opacity: 1;
}
@starting-style {
:where(dialog[open]),
:where(dialog[open])::backdrop {
opacity: 0;
}
}
/**
* Increase specificity of [hidden]
*
* Make it harder to accidentally unhide elements with the
* [hidden] attribute while still maintaining the until-found
* functionality.
*/
[hidden]:not([hidden=until-found]) {
display: none !important;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.example-text {
font-size: clamp(1.125rem, 0.8846rem + 1.0256vw, 1.5rem);
}
html {
font-size: 16px;
scroll-behavior: smooth;
scroll-padding-top: 59px;
}
@media (min-width: 769px) {
html {
scroll-padding-top: 79px;
}
}
html * {
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
font-family: var(--ff-jp);
color: #222222;
background-color: #fff;
}
a {
text-decoration: underline;
color: inherit;
}
a:hover {
text-decoration: none;
}
img {
max-width: 100%;
height: auto;
}
::-moz-selection {
background-color: #3C67BC;
color: #fff;
}
::selection {
background-color: #3C67BC;
color: #fff;
}
blockquote {
position: relative;
padding: 30px 15px 8px 15px;
box-sizing: border-box;
font-style: italic;
background: #efefef;
color: #555;
}
blockquote:before {
display: inline-block;
position: absolute;
top: 13px;
left: 15px;
content: "“";
color: #cfcfcf;
font-size: 28px;
line-height: 1;
font-weight: 900;
}
blockquote p {
padding: 0;
margin: 10px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
figure {
margin-inline-start: 0;
margin-inline-end: 0;
max-width: 100%;
}
pre {
overflow: auto;
background: #efefef;
padding: 1rem;
}
:root {
--color-text: #222222;
--space-1: 1.25rem;
--space-2: 1.875rem;
}
/* ベース（本文用） */
h1, h2, h3, h4 {
font-family: var(--ff-jp);
font-weight: 700;
line-height: 150%;
letter-spacing: 0.03em;
color: var(--color-text);
/* セクション間の上下リズム */
margin-block: var(--space-1);
}
@media (min-width: 769px) {
h1, h2, h3, h4 {
margin-block: var(--space-2);
}
}
h1 {
font-size: 2rem;
}
@media (min-width: 769px) {
h1 {
font-size: min(3.2258064516vw, 2.5rem);
}
}
h2 {
font-size: 1.5rem;
}
@media (min-width: 769px) {
h2 {
font-size: clamp(1.5rem, 1.2832rem + 0.9249vw, 2rem);
}
}
h3 {
font-size: 1.25rem;
}
@media (min-width: 769px) {
h3 {
font-size: min(1.935483871vw, 1.5rem);
}
}
h4 {
color: #1B3E83;
font-size: 1rem;
margin-block: 1em;
}
@media (min-width: 769px) {
h4 {
font-size: min(1.4516129032vw, 1.125rem);
}
}
p {
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
p {
font-size: 1rem;
}
}
ul {
list-style: none;
padding: 0;
font-weight: 400;
line-height: 180%;
letter-spacing: 0.03em;
margin-block: 1rem;
font-size: 0.875rem;
}
@media (min-width: 769px) {
ul {
font-size: 1rem;
margin-block: 20px;
}
}
ul li {
position: relative;
padding-left: 1em;
}
ul li + li {
margin-top: 0.5rem;
}
@media (min-width: 769px) {
ul li + li {
margin-top: 0.75rem;
}
}
ul li::before {
content: "";
position: absolute;
width: 6px;
height: 6px;
background-color: #3C67BC;
left: 0;
top: 0.6em;
}
.p-block ol {
font-weight: 400;
font-size: 1rem;
line-height: 180%;
letter-spacing: 0.03em;
margin-left: -1.5em;
margin-block: 20px;
}
.p-block ol li + li {
margin-top: 0.75rem;
}
hr {
border: none;
border-top: 1px solid #EEEEEE;
margin-block: 1.125rem;
}
@media (min-width: 769px) {
hr {
margin-block: 1.875rem;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.d-none {
display: none !important;
}
.d-inline {
display: inline !important;
}
.d-block {
display: block !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-grid {
display: grid !important;
}
.d-inline-grid {
display: inline-grid !important;
}
.d-table {
display: table !important;
}
.d-table-cell {
display: table-cell !important;
}
.d-table-row {
display: table-row !important;
}
.d-xs-none {
display: none !important;
}
.d-xs-inline {
display: inline !important;
}
.d-xs-block {
display: block !important;
}
.d-xs-inline-block {
display: inline-block !important;
}
.d-xs-flex {
display: flex !important;
}
.d-xs-inline-flex {
display: inline-flex !important;
}
.d-xs-grid {
display: grid !important;
}
.d-xs-inline-grid {
display: inline-grid !important;
}
.d-xs-table {
display: table !important;
}
.d-xs-table-cell {
display: table-cell !important;
}
.d-xs-table-row {
display: table-row !important;
}
@media (min-width: 576px) {
.d-sm-none {
display: none !important;
}
.d-sm-inline {
display: inline !important;
}
.d-sm-block {
display: block !important;
}
.d-sm-inline-block {
display: inline-block !important;
}
.d-sm-flex {
display: flex !important;
}
.d-sm-inline-flex {
display: inline-flex !important;
}
.d-sm-grid {
display: grid !important;
}
.d-sm-inline-grid {
display: inline-grid !important;
}
.d-sm-table {
display: table !important;
}
.d-sm-table-cell {
display: table-cell !important;
}
.d-sm-table-row {
display: table-row !important;
}
}
@media (min-width: 769px) {
.d-md-none {
display: none !important;
}
.d-md-inline {
display: inline !important;
}
.d-md-block {
display: block !important;
}
.d-md-inline-block {
display: inline-block !important;
}
.d-md-flex {
display: flex !important;
}
.d-md-inline-flex {
display: inline-flex !important;
}
.d-md-grid {
display: grid !important;
}
.d-md-inline-grid {
display: inline-grid !important;
}
.d-md-table {
display: table !important;
}
.d-md-table-cell {
display: table-cell !important;
}
.d-md-table-row {
display: table-row !important;
}
}
@media (min-width: 1024px) {
.d-lg-none {
display: none !important;
}
.d-lg-inline {
display: inline !important;
}
.d-lg-block {
display: block !important;
}
.d-lg-inline-block {
display: inline-block !important;
}
.d-lg-flex {
display: flex !important;
}
.d-lg-inline-flex {
display: inline-flex !important;
}
.d-lg-grid {
display: grid !important;
}
.d-lg-inline-grid {
display: inline-grid !important;
}
.d-lg-table {
display: table !important;
}
.d-lg-table-cell {
display: table-cell !important;
}
.d-lg-table-row {
display: table-row !important;
}
}
@media (min-width: 1440px) {
.d-xl-none {
display: none !important;
}
.d-xl-inline {
display: inline !important;
}
.d-xl-block {
display: block !important;
}
.d-xl-inline-block {
display: inline-block !important;
}
.d-xl-flex {
display: flex !important;
}
.d-xl-inline-flex {
display: inline-flex !important;
}
.d-xl-grid {
display: grid !important;
}
.d-xl-inline-grid {
display: inline-grid !important;
}
.d-xl-table {
display: table !important;
}
.d-xl-table-cell {
display: table-cell !important;
}
.d-xl-table-row {
display: table-row !important;
}
}
@media (min-width: 1920px) {
.d-xxl-none {
display: none !important;
}
.d-xxl-inline {
display: inline !important;
}
.d-xxl-block {
display: block !important;
}
.d-xxl-inline-block {
display: inline-block !important;
}
.d-xxl-flex {
display: flex !important;
}
.d-xxl-inline-flex {
display: inline-flex !important;
}
.d-xxl-grid {
display: grid !important;
}
.d-xxl-inline-grid {
display: inline-grid !important;
}
.d-xxl-table {
display: table !important;
}
.d-xxl-table-cell {
display: table-cell !important;
}
.d-xxl-table-row {
display: table-row !important;
}
}
@media (min-width: 769px) {
.d-mobile-only {
display: none !important;
}
}
.d-desktop-only {
display: none !important;
}
@media (min-width: 769px) {
.d-desktop-only {
display: block !important;
}
}
.d-tablet-up {
display: none !important;
}
@media (min-width: 576px) {
.d-tablet-up {
display: block !important;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-body {
position: relative;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-header {
position: fixed;
z-index: 1000;
transition: all 0.3s ease;
background: #fff;
width: 100%;
height: 3.6875rem;
}
@media (min-width: 769px) {
.l-header {
height: 4.9375rem;
}
}
@media (min-width: 769px) {
.is-home .l-header {
transform: translateY(-100%);
}
}
.is-home .l-header.is-after-fv {
transform: translateY(0);
}
.l-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0 0 15px;
height: 100%;
}
@media (min-width: 769px) {
.l-header__inner {
padding: 0 15px;
}
}
@media (min-width: 1024px) {
.l-header__inner {
padding: 0 52px;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-footer {
background-color: #0C1F45;
position: relative;
z-index: 2;
color: #fff;
padding: 3.75rem 0 0;
border-radius: 15px 15px 0 0;
margin-top: -30px;
}
@media (min-width: 769px) {
.l-footer {
border-radius: 30px 30px 0 0;
padding: 5rem 0;
}
}
.l-footer__inner {
padding: 3.125rem 0;
}
@media (min-width: 769px) {
.l-footer__inner {
padding: 5rem 0;
}
}
.l-footer__row {
display: flex;
flex-direction: column;
gap: 40px;
max-width: 540px;
margin: 0 auto;
}
@media (min-width: 769px) {
.l-footer__row {
max-width: none;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
}
.l-footer__info {
width: 100%;
order: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #1B3E83;
padding: 26px 15px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.8);
}
@media (min-width: 769px) {
.l-footer__info {
display: block;
background: none;
color: #fff;
text-align: left;
order: 0;
padding: 0;
}
}
@media (min-width: 1024px) {
.l-footer__info {
width: auto;
}
}
.l-footer__info address {
font-style: normal;
font-weight: 400;
font-size: 0.75rem;
line-height: 180%;
letter-spacing: 0.03em;
text-align: center;
margin: 0;
}
@media (min-width: 769px) {
.l-footer__info address {
text-align: left;
font-size: 0.875rem;
}
}
.l-footer__company {
font-weight: 700;
font-size: 1rem;
margin-top: 0;
margin-bottom: 0.625rem;
line-height: 150%;
letter-spacing: 0.03em;
text-align: center;
}
@media (min-width: 769px) {
.l-footer__company {
text-align: left;
font-size: 1.25rem;
margin-bottom: 1.25rem;
}
}
.l-footer__nav {
order: 1;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (min-width: 769px) {
.l-footer__nav {
display: flex;
align-items: center;
justify-content: center;
gap: 10px 47px;
order: 0;
}
}
.l-footer__nav li {
font-weight: 400;
font-size: 0.875rem;
line-height: 150%;
letter-spacing: 0.03em;
padding: 0;
}
.l-footer__nav li + li {
margin-top: inherit;
}
.l-footer__nav li::before {
content: none;
}
.l-footer__nav a {
border-bottom: 1px solid transparent;
transition: all 0.3s ease;
text-decoration: none;
}
.l-footer__nav a:hover {
border-bottom: 1px solid #fff;
}
.l-footer__copy {
order: 3;
font-weight: 400;
font-size: 0.625rem;
line-height: 150%;
letter-spacing: 0.03em;
text-align: center;
margin: 0;
}
@media (min-width: 769px) {
.l-footer__copy {
text-align: right;
order: 0;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-container {
max-width: 1270px;
margin-inline: auto;
padding-inline: 15px;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-main {
background-color: #EEEEEE;
padding: 50px 0 120px;
}
@media (min-width: 769px) {
.l-main {
padding: 60px 0 120px;
}
}
.l-main > :first-child {
margin-top: 0;
}
.l-main > :last-child {
margin-bottom: 0;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.l-split {
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
}
@media (min-width: 769px) {
.l-split {
flex-direction: row;
align-items: stretch;
gap: 0 76px;
}
}
.l-split__title {
width: 100%;
margin: 0;
text-align: center;
}
@media (min-width: 769px) {
.l-split__title {
padding-top: 1.875rem;
max-width: 212px;
margin: inherit;
text-align: left;
}
}
.l-split__body {
background: #fff;
flex: 1;
width: 100%;
padding: 25px 15px;
border-radius: 10px;
}
.l-split__body > :first-child {
margin-top: 0;
}
.l-split__body > :last-child {
margin-bottom: 0;
}
@media (min-width: 769px) {
.l-split__body {
padding: 40px 50px;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
/* レイアウト用グリッド */
.l-grid {
display: grid;
/* 3カラム以上のレイアウトをブレークポイントごとに */
}
.l-grid > * {
margin-block: 0;
}
.l-grid--gap-md {
gap: 1.5625rem;
}
.l-grid--3col\@md {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.l-grid--3col\@md {
grid-template-columns: repeat(3, 1fr);
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-section-title {
position: relative;
margin-bottom: 1.5rem;
font-weight: 700;
font-size: 2rem;
line-height: 130%;
color: #222222;
letter-spacing: 0.08em;
margin-top: 0;
margin-bottom: 20px;
}
@media (min-width: 769px) {
.c-section-title {
font-size: min(3.2258064516vw, 2.5rem);
margin-bottom: 40px;
}
}
.c-section-title::before {
content: attr(data-en);
display: block;
font-size: 0.875rem;
font-weight: 800;
color: #3C67BC;
margin-bottom: 0.25rem;
letter-spacing: 0.08em;
font-family: var(--ff-sans);
line-height: 1;
margin-bottom: 25px;
}
@media (min-width: 769px) {
.c-section-title::before {
font-size: 1rem;
margin-bottom: 30px;
}
}
.c-section-title--center {
text-align: center;
}
.c-section-title--white {
color: #fff;
}
.c-section-title--white::before {
color: #fff;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 53px;
padding: 0 1rem;
min-width: 211px;
font-weight: 700;
border: 2px solid transparent;
transition: 0.2s ease;
text-decoration: none;
}
.c-btn--primary {
background: #1B3E83;
color: #fff;
border-color: #1B3E83;
}
.c-btn--primary:hover {
background: #fff;
color: #1B3E83;
}
.c-btn--secondary {
background: #3C67BC;
color: #fff;
border-color: #3C67BC;
}
.c-btn--secondary:hover {
background: #fff;
color: #3C67BC;
}
.c-btn--white {
background: #fff;
color: #1B3E83;
}
.c-btn--white:hover {
background: #1B3E83;
color: #fff;
}
.c-btn--sm {
min-height: 43px;
min-width: 157px;
font-size: 0.9375rem;
}
.c-btn--lg {
min-width: 260px;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-logo {
display: inline-block;
margin-block: 0;
max-width: 100px;
height: 39px;
}
@media (min-width: 769px) {
.c-logo {
max-width: 120px;
height: 47px;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-burger {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: transparent;
width: 59px;
height: 59px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.c-burger__icon {
position: relative;
width: 20px;
height: 14px;
cursor: pointer;
display: block;
transition: all 0.5s;
}
.c-burger__icon span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #222222;
border-radius: 2px;
}
.c-burger__icon span {
display: inline-block;
transition: all 0.5s;
}
.c-burger__icon span:nth-of-type(1) {
top: 0;
}
.c-burger__icon span:nth-of-type(2) {
top: 6px;
}
.c-burger__icon span:nth-of-type(3) {
bottom: 0;
}
.c-burger__icon span:nth-of-type(1) {
animation: btn07-bar01 0.75s forwards;
}
.c-burger__icon span:nth-of-type(2) {
transition: all 0.25s 0.25s;
opacity: 1;
}
.c-burger__icon span:nth-of-type(3) {
animation: btn07-bar03 0.75s forwards;
}
.c-burger[aria-expanded=true] .c-burger__icon span:nth-of-type(1) {
animation: active-btn07-bar01 0.75s forwards;
}
.c-burger[aria-expanded=true] .c-burger__icon span:nth-of-type(2) {
opacity: 0;
}
.c-burger[aria-expanded=true] .c-burger__icon span:nth-of-type(3) {
animation: active-btn07-bar03 0.75s forwards;
}
@media (min-width: 769px) {
.c-burger {
display: none;
}
}
@keyframes btn07-bar01 {
0% {
transform: translateY(6px) rotate(45deg);
}
50% {
transform: translateY(6px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes btn07-bar03 {
0% {
transform: translateY(-6px) rotate(-45deg);
}
50% {
transform: translateY(-6px) rotate(0);
}
100% {
transform: translateY(0) rotate(0);
}
}
@keyframes active-btn07-bar01 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(6px) rotate(0);
}
100% {
transform: translateY(6px) rotate(45deg);
}
}
@keyframes active-btn07-bar03 {
0% {
transform: translateY(0) rotate(0);
}
50% {
transform: translateY(-6px) rotate(0);
}
100% {
transform: translateY(-6px) rotate(-45deg);
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-breadcrumb__list {
display: flex;
flex-wrap: wrap;
justify-content: end;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
font-size: 0.75rem;
line-height: 150%;
letter-spacing: 0.03em;
font-weight: 400;
color: #222222;
}
.c-breadcrumb__item {
display: inline-flex;
align-items: center;
gap: 0.625rem;
}
.c-breadcrumb__item + li {
margin-top: inherit;
}
.c-breadcrumb__item + .c-breadcrumb__item::before {
content: "";
width: 1rem;
height: 1rem;
background-image: url(../images/ico_arrow01.svg);
background-size: contain;
background-position: center;
margin-left: 0.625rem;
}
.c-breadcrumb__link {
text-decoration: underline;
color: inherit;
}
.c-breadcrumb__link:hover, .c-breadcrumb__link:focus {
text-decoration: none;
}
.c-breadcrumb__current {
color: #3C67BC;
font-weight: 500;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-sec-hdg {
font-weight: 700;
font-size: 1.5rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #222222;
}
@media (min-width: 769px) {
.c-sec-hdg {
font-size: 2rem;
}
}
.c-sec-hdg--center {
text-align: center;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
:root {
--c-head-1: #3C67BC;
--c-head-2: #7EA8FC;
}
/* Component: 基本のテーブル */
.c-table {
width: 100%;
border-collapse: collapse;
border: none;
word-wrap: break-word;
table-layout: fixed;
}
.c-table thead {
color: #fff;
}
.c-table thead th {
padding: 0.75rem 1rem;
font-weight: 700;
text-align: left;
border: 2px solid #fff;
border-bottom: 10px solid #fff;
text-align: center;
}
@media (min-width: 769px) {
.c-table thead th {
padding: 0.625rem;
font-size: 0.875rem;
}
}
.c-table thead th:nth-of-type(even) {
background-color: var(--c-head-1);
}
.c-table thead th:nth-of-type(odd) {
background-color: var(--c-head-2);
}
.c-table thead th:nth-of-type(odd):first-child {
background-color: transparent;
border-right: 10px solid #fff;
width: 56px;
}
.c-table tbody th, .c-table tbody td {
padding: 0.75rem 1rem;
border: 2px solid #fff;
border-bottom: none;
border-top: none;
font-size: 0.75rem;
}
@media (min-width: 769px) {
.c-table tbody th, .c-table tbody td {
font-size: 0.875rem;
padding: 0.875rem 0.625rem;
}
}
.c-table tbody th[scope=row] {
background: #eef3ff;
text-align: left;
font-weight: 700;
width: 60px;
}
.c-table tbody th[scope=row]:first-child {
border-right: 10px solid #fff;
font-size: 0.8125rem;
color: #1B3E83;
}
@media (min-width: 769px) {
.c-table tbody th[scope=row]:first-child {
font-size: 0.875rem;
}
}
.c-table tbody tr:nth-child(odd) th {
background: #EFF5FF;
}
.c-table tbody tr:nth-child(even) th {
background: #FBFCFF;
}
.c-table tbody tr:nth-child(odd) td:nth-child(even) {
background: #E5EEFF;
}
.c-table tbody tr:nth-child(odd) td:nth-child(odd) {
background: #EFF5FF;
}
.c-table tbody tr:nth-child(even) td:nth-child(even) {
background: #EFF5FF;
}
.c-table tbody tr:nth-child(even) td:nth-child(odd) {
background: #FBFCFF;
}
.c-def-table {
border: none;
border-collapse: separate;
border-spacing: 7px;
margin-left: -7px;
margin-right: -7px;
width: calc(100% + 14px);
}
.c-def-table th, .c-def-table td {
border: none;
font-size: 0.8125rem;
line-height: 150%;
letter-spacing: 0.03em;
padding: 0.75rem 0.3125rem;
}
@media (min-width: 769px) {
.c-def-table th, .c-def-table td {
font-size: 0.875rem;
padding: 0.625rem 0.625rem 1rem;
}
}
.c-def-table th {
width: 30.1587301587%;
vertical-align: top;
border-bottom: 1px solid #7EA8FC;
color: #1B3E83;
text-align: left;
font-weight: 700;
}
@media (min-width: 769px) {
.c-def-table th {
border-bottom: 2px solid #7EA8FC;
width: 21.1267605634%;
}
}
.c-def-table td {
border-bottom: 1px solid #D9D9D9;
font-weight: 400;
vertical-align: top;
}
@media (min-width: 769px) {
.c-def-table td {
border-bottom: 2px solid #D9D9D9;
}
}
/* Project: レスポンシブ変形 */
@media (max-width: 1024px) {
.p-responsiveTable thead {
display: none;
}
.p-responsiveTable tbody tr {
display: block;
margin: 0.8125rem 0;
overflow: hidden;
}
.p-responsiveTable tbody tr:first-child {
margin-top: 0;
}
.p-responsiveTable tbody tr:nth-of-type(odd) th {
background-color: #3C67BC;
}
.p-responsiveTable tbody tr:nth-of-type(even) th {
background-color: #7EA8FC;
}
.p-responsiveTable tbody th[scope=row] {
display: block;
background: var(--c-head2);
color: #fff;
padding: 0.3125rem 0.625rem;
text-align: center;
width: 100%;
}
.p-responsiveTable tbody th[scope=row]:first-child {
border-right: 1px solid #fff;
color: #fff;
border-bottom: 3px solid #fff;
}
.p-responsiveTable tbody td {
width: 100%;
display: grid;
grid-template-columns: 96px 1fr;
gap: 10px;
padding: 0;
border-top: 1px solid #fff;
align-items: center;
}
.p-responsiveTable tbody td::before {
content: attr(data-label);
font-weight: 700;
color: #333;
padding: 0.5rem 0.625rem;
text-align: center;
border-right: 2px solid #fff;
color: #1B3E83;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-badge {
background-color: #EFF5FF;
color: #3C67BC;
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
padding: 0.5rem 0.9375rem;
margin-block: 1rem;
border-radius: 5px;
}
@media (min-width: 769px) {
.c-badge {
font-size: 1rem;
padding: 0.625rem 1.25rem;
margin-block: 1.25rem;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
/* サムネイル */
.c-thumb {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.c-thumb img {
width: 100%;
max-width: 246px;
height: auto;
-o-object-fit: cover;
object-fit: cover;
display: block;
}
@media (min-width: 769px) {
.c-thumb img {
width: 100%;
max-width: 100%;
}
}
.c-thumb figcaption {
margin-top: 0.9375rem;
color: #1B3E83;
font-weight: 700;
font-style: Bold;
font-size: 1.25rem;
line-height: 150%;
letter-spacing: 0.03em;
text-align: center;
}
@media (min-width: 769px) {
.c-thumb figcaption {
font-size: 1.5rem;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-textbox {
background-color: #EEEEEE;
padding: 1.25rem 0.9375rem;
border-radius: 0.3125rem;
}
@media (min-width: 769px) {
.c-textbox {
padding: 1.25rem 2.1875rem;
}
}
.c-textbox h1, .c-textbox h2, .c-textbox h3, .c-textbox h4 {
margin-top: 1.25rem;
margin-bottom: 0.625rem;
}
.c-textbox p {
margin-block: 0.625rem;
}
.c-textbox > :first-child {
margin-top: 0;
}
.c-textbox > :last-child {
margin-bottom: 0;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-link {
padding-left: 1.75rem;
position: relative;
transition: color 0.3s ease;
}
@media (min-width: 769px) {
.c-link {
padding-left: 1.875rem;
}
}
.c-link::before {
content: "";
position: absolute;
display: block;
left: 0;
top: 0.1em;
width: 1.125rem;
height: 1.125rem;
border-radius: 2px;
background-color: #1B3E83;
transition: background-color 0.3s ease;
}
@media (min-width: 769px) {
.c-link::before {
width: 1.25rem;
height: 1.25rem;
}
}
.c-link::after {
content: "";
position: absolute;
display: block;
left: 0.25em;
top: 0.48em;
width: 0.4375rem;
height: 0.4375rem;
transform: rotate(45deg);
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
@media (min-width: 769px) {
.c-link::after {
left: 0.35em;
top: 0.45em;
}
}
.c-link:hover {
color: #3C67BC;
}
.c-link:hover::before {
background-color: #3C67BC;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.c-filter-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.625rem;
}
@media (min-width: 769px) {
.c-filter-bar {
gap: 0.9375rem;
}
}
.c-filter-btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background: #fff;
padding: 0.5rem 0.9375rem 0.5rem 1.875rem;
border-radius: 0.25rem;
font-weight: 400;
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.03em;
color: #0C4B8A;
position: relative;
cursor: pointer;
}
@media (min-width: 769px) {
.c-filter-btn {
font-size: 1rem;
padding: 0.5rem 1.25rem 0.5rem 2rem;
}
}
.c-filter-btn::before {
content: "";
left: 0.625rem;
top: 50%;
width: 0.625rem;
height: 0.625rem;
position: absolute;
display: block;
background-color: #D9D9D9;
transform: translateY(-50%);
}
.c-filter-btn:hover::before {
background-color: #3C67BC;
}
.c-filter-btn[aria-pressed=true]::before {
background-color: #3C67BC;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-hero {
position: relative;
height: calc(100svh - 50px);
z-index: 1;
}
.p-hero__inner {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: calc(100% - 50px);
display: grid;
place-items: center;
}
.p-hero__img {
height: 100%;
text-align: right;
padding-top: 59px;
}
@media (min-width: 769px) {
.p-hero__img {
padding-top: 0;
padding-left: 200px;
}
}
.p-hero__img img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: left top;
object-position: left top;
border-radius: 0 0 0 10px;
overflow: hidden;
}
@media (min-width: 769px) {
.p-hero__img img {
border-radius: 0;
}
}
.p-hero__content {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
text-align: right;
gap: 20px;
right: 0;
bottom: 0;
background: #fff;
border-radius: 20px 0 0 0;
width: min(94.1333333333vw, 353px);
height: min(40.5333333333vw, 152px);
padding-right: 15px;
}
@media (min-width: 769px) {
.p-hero__content {
gap: min(1.2096774194vw, 15px);
width: min(42.96875vw, 440px);
height: min(19.3359375vw, 198px);
}
}
@media (min-width: 1024px) {
.p-hero__content {
width: min(68.7121212121vw, 907px);
height: min(13.064516129vw, 162px);
padding-right: min(3.8805970149vw, 52px);
}
}
@media (min-width: 1024px) {
.p-hero__content br {
display: none;
}
}
.p-hero__title {
width: 100%;
margin: 0;
padding: 0;
font-size: clamp(36px, 4.5161290323vw, 56px);
font-family: var(--ff-sans);
color: #1B3E83;
font-weight: 800;
line-height: 120%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-hero__title {
line-height: 130%;
}
}
.p-hero__subtitle {
margin: 0;
width: 100%;
font-weight: 700;
font-size: 1rem;
line-height: 120%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-hero__subtitle {
line-height: 130%;
font-size: min(2.0967741935vw, 26px);
}
}
.p-hero-nav {
position: absolute;
flex-direction: column;
align-items: center;
justify-content: center;
left: 0;
top: 0;
height: 100%;
min-height: 500px;
background: #fff;
width: max(19.5833333333vw, 282px);
z-index: 2;
display: none;
}
@media (min-width: 769px) {
.p-hero-nav {
display: flex;
}
}
.p-hero-nav__logo {
margin: 0 auto 100px;
text-align: center;
}
.p-hero-nav__list {
margin: 0 auto;
padding: 0;
text-align: center;
list-style: none;
max-width: 170px;
}
.p-hero-nav__list li {
border-bottom: solid 1px #EEEEEE;
padding: 0;
}
.p-hero-nav__list li + li {
margin-top: inherit;
}
.p-hero-nav__list li::before {
content: none;
}
.p-hero-nav__list a {
text-decoration: none;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1rem;
line-height: 150%;
letter-spacing: 0.03em;
}
.p-hero-nav__list a:hover {
color: #3C67BC;
}
.p-hero-nav__list .c-btn {
min-width: 170px;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-home-main {
position: relative;
background-color: #fff;
z-index: 2;
}
.p-home-message {
padding: 50px 0 0;
}
@media (min-width: 769px) {
.p-home-message {
padding: 90px 0;
}
}
.p-home-message__inner {
width: 100%;
max-width: 1270px;
margin: 0 auto;
padding: 0 15px;
display: flex;
flex-direction: column-reverse;
gap: 35px;
}
@media (min-width: 769px) {
.p-home-message__inner {
gap: 0;
flex-direction: row;
justify-content: space-between;
}
}
.p-home-message__image {
width: 100%;
}
@media (min-width: 769px) {
.p-home-message__image {
width: min(55.9842519685vw, 711px);
}
}
@media (min-width: 769px) {
.p-home-message__wrap {
flex: 1;
max-width: min(34.1129032258vw, 423px);
}
}
.p-home-message__text {
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-home-message__text {
font-size: 1rem;
}
}
.p-home-solutions {
padding: 50px 0;
}
@media (min-width: 769px) {
.p-home-solutions {
padding: 90px 0;
}
}
.p-home-solutions__sec-title {
color: #222222;
font-weight: 700;
font-size: 1.5rem;
line-height: 150%;
letter-spacing: 0.03em;
text-align: center;
margin-top: 0;
margin-bottom: 40px;
}
@media (min-width: 769px) {
.p-home-solutions__sec-title {
margin-bottom: 60px;
font-size: 2rem;
}
}
.p-home-solutions__list {
width: 100%;
max-width: 420px;
margin: 0 auto;
padding: 0 15px;
display: flex;
list-style: none;
flex-direction: column;
gap: 35px;
}
@media (min-width: 769px) {
.p-home-solutions__list {
max-width: 1270px;
gap: 30px;
flex-wrap: wrap;
flex-direction: row;
gap: min(2.4409448819vw, 31px);
}
}
.p-home-solutions__item {
flex: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px 0;
}
.p-home-solutions__item + li {
margin-top: inherit;
}
.p-home-solutions__item::before {
content: none;
}
.p-home-solutions__title {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.25rem;
line-height: 150%;
letter-spacing: 0.03em;
margin: 0;
color: #1B3E83;
}
@media (min-width: 769px) {
.p-home-solutions__title {
height: 4rem;
font-size: 1.5rem;
}
}
.p-home-solutions__text {
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
margin: 0;
}
@media (min-width: 769px) {
.p-home-solutions__text {
font-size: 1rem;
}
}
.p-home-works {
background-color: #EEEEEE;
padding: 50px 0 75px;
}
@media (min-width: 769px) {
.p-home-works {
padding: 90px 0;
}
}
.p-home-works__inner {
width: 100%;
max-width: 1270px;
margin: 0 auto;
padding: 0 15px;
display: flex;
flex-direction: column-reverse;
gap: 35px;
}
@media (min-width: 769px) {
.p-home-works__inner {
flex-direction: row-reverse;
justify-content: space-between;
gap: 0 min(8.3464566929vw, 106px);
}
}
.p-home-works__image {
width: 100%;
}
@media (min-width: 769px) {
.p-home-works__image {
width: min(55.9842519685vw, 711px);
}
}
.p-home-works__wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
}
@media (min-width: 769px) {
.p-home-works__wrap {
display: block;
}
}
.p-home-works__text {
margin: 0;
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-home-works__text {
font-size: 1rem;
}
}
.p-home-works .c-btn {
margin-top: 35px;
align-self: center;
}
@media (min-width: 769px) {
.p-home-works .c-btn {
margin-top: 40px;
}
}
.p-home-company {
border-radius: 15px;
background-color: #1B3E83;
overflow: hidden;
position: relative;
padding: 90px 0;
margin-block: -20px;
}
@media (min-width: 769px) {
.p-home-company {
border-radius: 20px;
}
}
.p-home-company__bg {
position: absolute;
z-index: 1;
inset: 0;
background-image: url(../images/p-home-company__bg01.jpg);
background-size: cover;
background-position: center;
opacity: 0.3;
}
.p-home-company__inner {
position: relative;
z-index: 2;
width: 100%;
max-width: 1270px;
margin: 0 auto;
padding: 0 15px;
display: flex;
align-items: center;
flex-direction: column;
}
.p-home-company__image {
width: 100%;
}
@media (min-width: 769px) {
.p-home-company__image {
width: min(55.9842519685vw, 711px);
}
}
.p-home-company__title {
text-align: left;
font-weight: 700;
font-size: 1.75rem;
line-height: 150%;
letter-spacing: 0.08em;
margin-top: 0;
margin-bottom: 40px;
}
@media (min-width: 769px) {
.p-home-company__title {
text-align: center;
font-size: 2.5rem;
}
}
.p-home-company__title::before {
text-align: center;
margin-bottom: 25px;
}
.p-home-company__wrap {
flex: 1;
}
.p-home-blog {
background-color: #EEEEEE;
padding: 80px 15px;
}
@media (min-width: 769px) {
.p-home-blog {
padding: 90px 15px;
}
}
.p-home-blog__inner {
background: #fff;
border-radius: 20px;
position: relative;
padding: 40px 20px;
margin: 0 auto;
}
@media (min-width: 769px) {
.p-home-blog__inner {
display: flex;
align-items: center;
min-height: 300px;
padding: 26px 26px 26px min(6.1290322581vw, 76px);
}
}
.p-home-blog__wrap {
display: flex;
align-items: center;
flex-direction: column;
}
@media (min-width: 769px) {
.p-home-blog__wrap {
flex: 1;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0 min(11.2903225806vw, 140px);
}
}
.p-home-blog__sub-wrap {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
@media (min-width: 769px) {
.p-home-blog__sub-wrap {
align-items: flex-start;
}
}
.p-home-blog__sub-wrap > * {
margin-block: 0;
}
.p-home-blog__title {
margin: 0 0 20px;
text-align: center;
}
@media (min-width: 769px) {
.p-home-blog__title {
margin: 0;
text-align: left;
}
}
.p-home-blog__desc {
margin: 0;
font-weight: 400;
font-size: 0.875rem;
line-height: 180%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-home-blog__desc {
font-size: 1rem;
}
}
.p-home-blog__note {
font-weight: 400;
font-size: 0.75rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #707070;
margin-bottom: 30px;
}
.p-home-blog__image {
position: absolute;
right: 0;
top: 0;
transform: translate(0, -40%);
width: min(34.9333333333vw, 131px);
}
@media (min-width: 769px) {
.p-home-blog__image {
position: static;
width: min(20.1612903226vw, 250px);
transform: translate(0);
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-drawer {
/* ルート。必要ならコンテナ化だけ */
}
/* 背景オーバーレイ */
.p-drawer__overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s step-end;
z-index: 998;
}
/* 右側パネル */
.p-drawer__panel {
position: fixed;
top: 0;
right: 0;
width: 70vw;
max-width: 240px;
height: 100dvh; /* 画面高さ100% */
background: #fff;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
transform: translate3d(120%, 0, 0); /* 右からスライドイン */
transition: transform 0.28s ease-out;
z-index: 999;
display: flex;
flex-direction: column;
-webkit-overflow-scrolling: touch;
will-change: transform;
}
/* 開いたときの状態 */
.is-open .p-drawer__overlay {
opacity: 1;
visibility: visible;
transition: opacity 0.25s ease, visibility 0s;
}
.is-open .p-drawer__panel {
transform: translate3d(0, 0, 0);
}
/* 低減動作へ配慮 */
@media (prefers-reduced-motion: reduce) {
.p-drawer__overlay, .p-drawer__panel, .c-hamburger__bar {
transition: none !important;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-gnav {
margin-left: auto;
display: none;
}
@media (min-width: 769px) {
.p-gnav {
display: block;
}
}
.p-gnav__list {
display: flex;
list-style: none;
align-items: center;
margin: 0;
}
.p-gnav__list li {
font-weight: 700;
font-size: 0.9375rem;
line-height: 150%;
letter-spacing: 0.03em;
text-align: center;
padding: 0;
}
.p-gnav__list li + li {
margin-top: inherit;
}
.p-gnav__list li::before {
content: none;
}
.p-gnav__list a {
padding-inline: 10px;
transition: all 0.3s ease;
text-decoration: none;
}
@media (min-width: 1024px) {
.p-gnav__list a {
padding-inline: 20px;
}
}
.p-gnav__list a:hover {
color: #3C67BC;
}
.p-gnav .c-btn {
margin-left: 20px;
}
.p-gnav-sp__inner {
padding: 60px 0 100px;
height: 100%;
position: relative;
}
.p-gnav-sp__list {
height: 100%;
list-style: none;
margin: 0;
padding: 0 30px;
display: flex;
flex-direction: column;
justify-content: center;
}
.p-gnav-sp li {
border-bottom: solid 1px #EEEEEE;
padding: 0;
}
.p-gnav-sp li + li {
margin-top: inherit;
}
.p-gnav-sp li::before {
content: none;
}
.p-gnav-sp li:nth-last-child(2), .p-gnav-sp li:nth-last-child(1) {
border-bottom: none;
}
.p-gnav-sp a {
height: 70px;
display: flex;
align-items: center;
transition: all 0.3s ease;
font-weight: 700;
font-size: 1rem;
line-height: 150%;
letter-spacing: 0.03em;
text-decoration: none;
}
.p-gnav-sp a:hover {
color: #3C67BC;
}
.p-gnav-sp li:has(.c-btn) {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.p-gnav-sp .c-btn {
width: 100%;
height: 80px;
padding-left: 30px;
justify-content: flex-start;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-contact {
border-bottom: 2px solid #EEEEEE;
}
.p-contact__inner {
display: flex;
flex-direction: column;
padding-bottom: 1.875rem;
}
@media (min-width: 769px) {
.p-contact__inner {
flex-direction: row;
justify-content: space-between;
}
}
.p-contact__title {
color: #fff;
font-size: 1.25rem;
font-weight: 700;
line-height: 150%;
letter-spacing: 0.03em;
margin-top: 0;
margin-bottom: 35px;
}
@media (min-width: 769px) {
.p-contact__title {
width: min(37.0967741935vw, 460px);
font-size: min(2.0967741935vw, 26px);
font-weight: 700;
}
}
.p-contact__title::before {
color: #fff;
text-align: center;
}
@media (min-width: 769px) {
.p-contact__title::before {
text-align: left;
}
}
.p-contact__wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 769px) {
.p-contact__wrap {
display: block;
max-width: 635px;
}
}
.p-contact p {
font-size: 0.875rem;
font-weight: 400;
line-height: 180%;
letter-spacing: 0.03em;
margin-top: 0;
margin-bottom: 40px;
}
@media (min-width: 769px) {
.p-contact p {
font-size: 1rem;
}
}
.p-contact .c-btn {
margin: 0 auto;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-page-top {
display: flex;
justify-content: flex-end;
}
.p-page-top a {
width: 60px;
height: 50px;
display: block;
position: relative;
}
.p-page-top a::before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-right: 32px solid transparent;
border-left: 32px solid transparent;
border-bottom: 32px solid #fff;
border-top: 0;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 0);
}
.p-page-top a:hover span {
opacity: 1;
}
.p-page-top span {
display: inline-block;
position: absolute;
left: 50%;
top: -6px;
transform: translate(-50%, 0);
width: 100%;
font-size: 0.6875rem;
text-align: center;
opacity: 0;
transition: all 0.3s ease;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-page-head__inner {
padding-bottom: 60px;
position: relative;
display: flex;
padding-top: 94px;
min-height: 278px;
}
@media (min-width: 769px) {
.p-page-head__inner {
align-items: center;
padding-top: 79px;
min-height: 295px;
}
}
.p-page-head__title {
margin: 0;
font-size: 2rem;
}
@media (min-width: 769px) {
.p-page-head__title {
font-size: 2.5rem;
}
}
@media (min-width: 769px) {
.p-page-head__title.c-section-title {
margin-top: 4.375rem;
}
}
.p-page-head .c-breadcrumb {
position: absolute;
right: 15px;
bottom: 20px;
}
@media (min-width: 769px) {
.p-page-head .c-breadcrumb {
bottom: 40px;
}
}
.p-page-head .c-section-title {
margin-bottom: 0;
}
.p-page-head .c-section-title::before {
margin-bottom: 15px;
}
@media (min-width: 769px) {
.p-page-head .c-section-title::before {
margin-bottom: 30px;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-block {
margin-block: 50px;
}
@media (min-width: 769px) {
.p-block {
margin-block: 90px;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-card {
background-color: #fff;
border-radius: 10px;
padding: 0;
}
.p-card::before {
content: none;
}
.p-card + li {
margin: 0;
}
.p-card__link {
display: flex;
height: 100%;
position: relative;
padding: 1.25rem 2.8125rem 1.25rem 0.9375rem;
transition: color 0.3s ease;
text-decoration: none;
align-items: center;
gap: 0.625rem;
}
@media (min-width: 769px) {
.p-card__link {
padding: 2.1875rem 1.875rem;
flex-direction: column;
align-items: stretch;
}
}
.p-card__link::before {
content: "";
position: absolute;
display: block;
right: 0.9375rem;
top: 50%;
width: 1.25rem;
height: 1.25rem;
border-radius: 2px;
background-color: #1B3E83;
transition: background-color 0.3s ease;
transform: translateY(-50%);
}
@media (min-width: 769px) {
.p-card__link::before {
right: 1.875rem;
top: auto;
bottom: 2.1875rem;
transform: translateY(0);
width: 1.875rem;
height: 1.875rem;
}
}
.p-card__link::after {
content: "";
position: absolute;
display: block;
right: calc(1.25rem + 0.35em);
top: calc(50% - 0.05em);
width: 0.4375rem;
height: 0.4375rem;
transform: rotate(45deg) translateY(-50%);
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
@media (min-width: 769px) {
.p-card__link::after {
right: calc(1.875rem + 0.75em);
top: auto;
bottom: calc(2.1875rem + 0.55em);
transform: rotate(45deg) translateY(0);
width: 0.625rem;
height: 0.625rem;
}
}
.p-card__link:hover {
color: #3C67BC;
}
.p-card__link:hover::before {
background-color: #3C67BC;
}
.p-card__link:hover .p-card__title {
color: #3C67BC;
}
.p-card__thumb {
text-align: center;
width: 31.5789473684%;
flex-shrink: 0;
}
@media (min-width: 769px) {
.p-card__thumb {
width: 100%;
max-height: 120px;
}
}
.p-card__body {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
@media (min-width: 769px) {
.p-card__body {
gap: 1.75rem;
}
}
.p-card__title {
margin: 0;
font-weight: 700;
font-size: 1.25rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #222222;
transition: color 0.3s ease;
}
@media (min-width: 769px) {
.p-card__title {
text-align: center;
font-size: 1.5rem;
}
}
.p-card__tags {
display: flex;
flex-wrap: wrap;
margin: 0.625rem 0 0;
padding: 0;
gap: 0.5rem;
}
@media (min-width: 769px) {
.p-card__tags {
margin-top: auto;
padding-right: 1.875rem;
}
}
.p-card__tags li {
padding: 0.3125rem 0.75rem;
border-radius: 4px;
background-color: #EEEEEE;
font-weight: 400;
font-size: 0.625rem;
line-height: 1;
letter-spacing: 0.03em;
color: #3C67BC;
}
@media (min-width: 769px) {
.p-card__tags li {
font-size: 0.75rem;
}
}
.p-card__tags li::before {
content: none;
}
.p-card__tags li + li {
margin: 0;
}
.p-card-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.625rem;
grid-template-columns: 1fr;
}
@media (min-width: 769px) {
.p-card-grid {
gap: 1.875rem 1.8958333313rem;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-card-grid {
gap: 1.875rem 1.8958333313rem;
grid-template-columns: repeat(3, 1fr);
}
}
.p-card {
opacity: 1;
transform: scale(1);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.p-card.is-hiding {
opacity: 0;
transform: scale(0.98);
} /* フェード中 */
.p-card.is-hidden {
display: none;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-achievement {
gap: 2.5rem;
}
@media (min-width: 769px) {
.p-achievement {
gap: 1.875rem;
}
}
@media (min-width: 769px) {
.p-achievement__title {
padding-top: 0;
max-width: 288px;
}
}
@media (min-width: 769px) {
.p-achievement__body {
padding: 1.875rem 3.125rem;
}
}
.p-achievement__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240, 1fr));
gap: 0.5rem 2rem;
}
@media (min-width: 769px) {
.p-achievement__list {
grid-template-columns: repeat(auto-fit, minmax(344px, 1fr));
}
}
.p-achievement__item {
margin: 0;
padding: 0;
font-weight: 400;
font-size: 1rem;
line-height: 180%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-achievement__item {
font-size: 1.125rem;
}
}
.p-achievement__item::before {
content: none;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-support__list {
margin-top: 4.6875rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 5rem 1.875rem;
}
.p-support__item {
background: #fff;
border-radius: 0.625rem;
padding: 3.75rem 1.25rem 1.25rem 1.25rem;
margin: 0;
text-align: center;
position: relative;
}
@media (min-width: 769px) {
.p-support__item {
padding: 4.375rem 1.25rem 1.25rem 1.25rem;
}
}
.p-support__item::before {
content: none;
}
.p-support__thumb {
position: absolute;
width: 100%;
text-align: center;
left: 0;
top: 0;
transform: translateY(-46%);
}
.p-support__heading {
margin: 0;
text-align: center;
font-weight: 700;
font-size: 1.25rem;
line-height: 150%;
letter-spacing: 0.03em;
color: #3C67BC;
}
@media (min-width: 769px) {
.p-support__heading {
font-size: 1.5rem;
}
}
.p-support__tasks {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin: 0.9375rem 0 0;
}
.p-support__tasks li {
background: #f7f9fb;
border-radius: 0.1875rem;
padding: 0.5rem 0.625rem 0.5rem 2.5rem;
text-align: left;
position: relative;
margin: 0;
font-weight: 700;
font-size: 0.875rem;
line-height: 150%;
letter-spacing: 0.03em;
}
@media (min-width: 769px) {
.p-support__tasks li {
padding: 0.75rem 0.9375rem 0.75rem 3.0625rem;
font-size: 1rem;
}
}
.p-support__tasks li::before {
top: 0.5rem;
left: 0.625rem;
width: 1.25rem;
height: 1.25rem;
background-image: url(../images/ico_check01.svg);
background-color: transparent;
background-size: contain;
background-repeat: no-repeat;
}
@media (min-width: 769px) {
.p-support__tasks li::before {
top: 0.6875rem;
left: 0.9375rem;
width: 1.5rem;
height: 1.5rem;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.p-works {
margin-bottom: 3.125rem;
}
@media (min-width: 769px) {
.p-works {
margin-bottom: 5.625rem;
}
}
.p-works .p-card-grid {
gap: 0.9375rem;
}
@media (min-width: 769px) {
.p-works .p-card-grid {
gap: 2.5rem 1.8958333313rem;
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.p-works .p-card-grid {
gap: 2.5rem 1.8958333313rem;
grid-template-columns: repeat(3, 1fr);
}
}
.p-works-related .p-card-grid {
margin-top: 35px;
}
.u-visuallyHidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
padding: 0;
}
.u-scrollLock {
touch-action: none;
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.u-text-left {
text-align: left !important;
}
.u-text-center {
text-align: center !important;
}
.u-text-right {
text-align: right !important;
}
.u-text-justify {
text-align: justify !important;
}
.u-text-start {
text-align: start !important;
}
.u-text-end {
text-align: end !important;
}
.u-text-xs-left {
text-align: left !important;
}
.u-text-xs-center {
text-align: center !important;
}
.u-text-xs-right {
text-align: right !important;
}
.u-text-xs-justify {
text-align: justify !important;
}
.u-text-xs-start {
text-align: start !important;
}
.u-text-xs-end {
text-align: end !important;
}
@media (min-width: 576px) {
.u-text-sm-left {
text-align: left !important;
}
.u-text-sm-center {
text-align: center !important;
}
.u-text-sm-right {
text-align: right !important;
}
.u-text-sm-justify {
text-align: justify !important;
}
.u-text-sm-start {
text-align: start !important;
}
.u-text-sm-end {
text-align: end !important;
}
}
@media (min-width: 769px) {
.u-text-md-left {
text-align: left !important;
}
.u-text-md-center {
text-align: center !important;
}
.u-text-md-right {
text-align: right !important;
}
.u-text-md-justify {
text-align: justify !important;
}
.u-text-md-start {
text-align: start !important;
}
.u-text-md-end {
text-align: end !important;
}
}
@media (min-width: 1024px) {
.u-text-lg-left {
text-align: left !important;
}
.u-text-lg-center {
text-align: center !important;
}
.u-text-lg-right {
text-align: right !important;
}
.u-text-lg-justify {
text-align: justify !important;
}
.u-text-lg-start {
text-align: start !important;
}
.u-text-lg-end {
text-align: end !important;
}
}
@media (min-width: 1440px) {
.u-text-xl-left {
text-align: left !important;
}
.u-text-xl-center {
text-align: center !important;
}
.u-text-xl-right {
text-align: right !important;
}
.u-text-xl-justify {
text-align: justify !important;
}
.u-text-xl-start {
text-align: start !important;
}
.u-text-xl-end {
text-align: end !important;
}
}
@media (min-width: 1920px) {
.u-text-xxl-left {
text-align: left !important;
}
.u-text-xxl-center {
text-align: center !important;
}
.u-text-xxl-right {
text-align: right !important;
}
.u-text-xxl-justify {
text-align: justify !important;
}
.u-text-xxl-start {
text-align: start !important;
}
.u-text-xxl-end {
text-align: end !important;
}
}
.u-text-mobile-center {
text-align: center !important;
}
@media (min-width: 769px) {
.u-text-mobile-center {
text-align: left !important;
}
}
.u-text-mobile-left {
text-align: left !important;
}
@media (min-width: 769px) {
.u-text-mobile-left {
text-align: center !important;
}
}
@media (min-width: 576px) {
.u-text-tablet-center {
text-align: center !important;
}
}
@media (min-width: 769px) {
.u-text-desktop-right {
text-align: right !important;
}
}
/* style.scss
FLOCSS structure: fundation, layout, component, project, utility */
.u-m-0 {
margin: 0rem !important;
}
.u-m-1 {
margin: 0.25rem !important;
}
.u-m-2 {
margin: 0.5rem !important;
}
.u-m-3 {
margin: 1rem !important;
}
.u-m-4 {
margin: 1.5rem !important;
}
.u-m-5 {
margin: 2rem !important;
}
.u-m-6 {
margin: 3rem !important;
}
.u-m-7 {
margin: 4rem !important;
}
.u-m-8 {
margin: 5rem !important;
}
.u-m-9 {
margin: 6rem !important;
}
.u-mt-0 {
margin-top: 0rem !important;
}
.u-mt-1 {
margin-top: 0.25rem !important;
}
.u-mt-2 {
margin-top: 0.5rem !important;
}
.u-mt-3 {
margin-top: 1rem !important;
}
.u-mt-4 {
margin-top: 1.5rem !important;
}
.u-mt-5 {
margin-top: 2rem !important;
}
.u-mt-6 {
margin-top: 3rem !important;
}
.u-mt-7 {
margin-top: 4rem !important;
}
.u-mt-8 {
margin-top: 5rem !important;
}
.u-mt-9 {
margin-top: 6rem !important;
}
.u-mr-0 {
margin-right: 0rem !important;
}
.u-mr-1 {
margin-right: 0.25rem !important;
}
.u-mr-2 {
margin-right: 0.5rem !important;
}
.u-mr-3 {
margin-right: 1rem !important;
}
.u-mr-4 {
margin-right: 1.5rem !important;
}
.u-mr-5 {
margin-right: 2rem !important;
}
.u-mr-6 {
margin-right: 3rem !important;
}
.u-mr-7 {
margin-right: 4rem !important;
}
.u-mr-8 {
margin-right: 5rem !important;
}
.u-mr-9 {
margin-right: 6rem !important;
}
.u-mb-0 {
margin-bottom: 0rem !important;
}
.u-mb-1 {
margin-bottom: 0.25rem !important;
}
.u-mb-2 {
margin-bottom: 0.5rem !important;
}
.u-mb-3 {
margin-bottom: 1rem !important;
}
.u-mb-4 {
margin-bottom: 1.5rem !important;
}
.u-mb-5 {
margin-bottom: 2rem !important;
}
.u-mb-6 {
margin-bottom: 3rem !important;
}
.u-mb-7 {
margin-bottom: 4rem !important;
}
.u-mb-8 {
margin-bottom: 5rem !important;
}
.u-mb-9 {
margin-bottom: 6rem !important;
}
.u-ml-0 {
margin-left: 0rem !important;
}
.u-ml-1 {
margin-left: 0.25rem !important;
}
.u-ml-2 {
margin-left: 0.5rem !important;
}
.u-ml-3 {
margin-left: 1rem !important;
}
.u-ml-4 {
margin-left: 1.5rem !important;
}
.u-ml-5 {
margin-left: 2rem !important;
}
.u-ml-6 {
margin-left: 3rem !important;
}
.u-ml-7 {
margin-left: 4rem !important;
}
.u-ml-8 {
margin-left: 5rem !important;
}
.u-ml-9 {
margin-left: 6rem !important;
}
.u-mx-0 {
margin-left: 0rem !important;
margin-right: 0rem !important;
}
.u-mx-1 {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important;
}
.u-mx-2 {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}
.u-mx-3 {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
.u-mx-4 {
margin-left: 1.5rem !important;
margin-right: 1.5rem !important;
}
.u-mx-5 {
margin-left: 2rem !important;
margin-right: 2rem !important;
}
.u-mx-6 {
margin-left: 3rem !important;
margin-right: 3rem !important;
}
.u-mx-7 {
margin-left: 4rem !important;
margin-right: 4rem !important;
}
.u-mx-8 {
margin-left: 5rem !important;
margin-right: 5rem !important;
}
.u-mx-9 {
margin-left: 6rem !important;
margin-right: 6rem !important;
}
.u-my-0 {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
.u-my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
.u-my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.u-my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
.u-my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.u-my-5 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
.u-my-6 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
.u-my-7 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
.u-my-8 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
.u-my-9 {
margin-top: 6rem !important;
margin-bottom: 6rem !important;
}
.u-p-0 {
padding: 0rem !important;
}
.u-p-1 {
padding: 0.25rem !important;
}
.u-p-2 {
padding: 0.5rem !important;
}
.u-p-3 {
padding: 1rem !important;
}
.u-p-4 {
padding: 1.5rem !important;
}
.u-p-5 {
padding: 2rem !important;
}
.u-p-6 {
padding: 3rem !important;
}
.u-p-7 {
padding: 4rem !important;
}
.u-p-8 {
padding: 5rem !important;
}
.u-p-9 {
padding: 6rem !important;
}
.u-pt-0 {
padding-top: 0rem !important;
}
.u-pt-1 {
padding-top: 0.25rem !important;
}
.u-pt-2 {
padding-top: 0.5rem !important;
}
.u-pt-3 {
padding-top: 1rem !important;
}
.u-pt-4 {
padding-top: 1.5rem !important;
}
.u-pt-5 {
padding-top: 2rem !important;
}
.u-pt-6 {
padding-top: 3rem !important;
}
.u-pt-7 {
padding-top: 4rem !important;
}
.u-pt-8 {
padding-top: 5rem !important;
}
.u-pt-9 {
padding-top: 6rem !important;
}
.u-pr-0 {
padding-right: 0rem !important;
}
.u-pr-1 {
padding-right: 0.25rem !important;
}
.u-pr-2 {
padding-right: 0.5rem !important;
}
.u-pr-3 {
padding-right: 1rem !important;
}
.u-pr-4 {
padding-right: 1.5rem !important;
}
.u-pr-5 {
padding-right: 2rem !important;
}
.u-pr-6 {
padding-right: 3rem !important;
}
.u-pr-7 {
padding-right: 4rem !important;
}
.u-pr-8 {
padding-right: 5rem !important;
}
.u-pr-9 {
padding-right: 6rem !important;
}
.u-pb-0 {
padding-bottom: 0rem !important;
}
.u-pb-1 {
padding-bottom: 0.25rem !important;
}
.u-pb-2 {
padding-bottom: 0.5rem !important;
}
.u-pb-3 {
padding-bottom: 1rem !important;
}
.u-pb-4 {
padding-bottom: 1.5rem !important;
}
.u-pb-5 {
padding-bottom: 2rem !important;
}
.u-pb-6 {
padding-bottom: 3rem !important;
}
.u-pb-7 {
padding-bottom: 4rem !important;
}
.u-pb-8 {
padding-bottom: 5rem !important;
}
.u-pb-9 {
padding-bottom: 6rem !important;
}
.u-pl-0 {
padding-left: 0rem !important;
}
.u-pl-1 {
padding-left: 0.25rem !important;
}
.u-pl-2 {
padding-left: 0.5rem !important;
}
.u-pl-3 {
padding-left: 1rem !important;
}
.u-pl-4 {
padding-left: 1.5rem !important;
}
.u-pl-5 {
padding-left: 2rem !important;
}
.u-pl-6 {
padding-left: 3rem !important;
}
.u-pl-7 {
padding-left: 4rem !important;
}
.u-pl-8 {
padding-left: 5rem !important;
}
.u-pl-9 {
padding-left: 6rem !important;
}
.u-px-0 {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
.u-px-1 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
.u-px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
.u-px-3 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
.u-px-4 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.u-px-5 {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.u-px-6 {
padding-left: 3rem !important;
padding-right: 3rem !important;
}
.u-px-7 {
padding-left: 4rem !important;
padding-right: 4rem !important;
}
.u-px-8 {
padding-left: 5rem !important;
padding-right: 5rem !important;
}
.u-px-9 {
padding-left: 6rem !important;
padding-right: 6rem !important;
}
.u-py-0 {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
.u-py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
.u-py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
.u-py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.u-py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.u-py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
.u-py-6 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.u-py-7 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.u-py-8 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
.u-py-9 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
@media (max-width: 768px) {
.u-sp-m-0 {
margin: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-1 {
margin: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-2 {
margin: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-3 {
margin: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-4 {
margin: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-5 {
margin: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-6 {
margin: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-7 {
margin: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-8 {
margin: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-m-9 {
margin: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-0 {
margin-top: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-1 {
margin-top: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-2 {
margin-top: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-3 {
margin-top: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-4 {
margin-top: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-5 {
margin-top: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-6 {
margin-top: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-7 {
margin-top: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-8 {
margin-top: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mt-9 {
margin-top: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-0 {
margin-right: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-1 {
margin-right: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-2 {
margin-right: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-3 {
margin-right: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-4 {
margin-right: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-5 {
margin-right: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-6 {
margin-right: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-7 {
margin-right: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-8 {
margin-right: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mr-9 {
margin-right: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-0 {
margin-bottom: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-1 {
margin-bottom: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-2 {
margin-bottom: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-3 {
margin-bottom: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-4 {
margin-bottom: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-5 {
margin-bottom: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-6 {
margin-bottom: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-7 {
margin-bottom: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-8 {
margin-bottom: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mb-9 {
margin-bottom: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-0 {
margin-left: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-1 {
margin-left: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-2 {
margin-left: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-3 {
margin-left: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-4 {
margin-left: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-5 {
margin-left: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-6 {
margin-left: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-7 {
margin-left: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-8 {
margin-left: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-ml-9 {
margin-left: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-0 {
margin-left: 0rem !important;
margin-right: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-1 {
margin-left: 0.25rem !important;
margin-right: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-2 {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-3 {
margin-left: 1rem !important;
margin-right: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-4 {
margin-left: 1.5rem !important;
margin-right: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-5 {
margin-left: 2rem !important;
margin-right: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-6 {
margin-left: 3rem !important;
margin-right: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-7 {
margin-left: 4rem !important;
margin-right: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-8 {
margin-left: 5rem !important;
margin-right: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-mx-9 {
margin-left: 6rem !important;
margin-right: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-0 {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-1 {
margin-top: 0.25rem !important;
margin-bottom: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-2 {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-4 {
margin-top: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-5 {
margin-top: 2rem !important;
margin-bottom: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-6 {
margin-top: 3rem !important;
margin-bottom: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-7 {
margin-top: 4rem !important;
margin-bottom: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-8 {
margin-top: 5rem !important;
margin-bottom: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-my-9 {
margin-top: 6rem !important;
margin-bottom: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-0 {
padding: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-1 {
padding: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-2 {
padding: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-3 {
padding: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-4 {
padding: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-5 {
padding: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-6 {
padding: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-7 {
padding: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-8 {
padding: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-p-9 {
padding: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-0 {
padding-top: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-1 {
padding-top: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-2 {
padding-top: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-3 {
padding-top: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-4 {
padding-top: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-5 {
padding-top: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-6 {
padding-top: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-7 {
padding-top: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-8 {
padding-top: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pt-9 {
padding-top: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-0 {
padding-right: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-1 {
padding-right: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-2 {
padding-right: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-3 {
padding-right: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-4 {
padding-right: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-5 {
padding-right: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-6 {
padding-right: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-7 {
padding-right: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-8 {
padding-right: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pr-9 {
padding-right: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-0 {
padding-bottom: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-1 {
padding-bottom: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-2 {
padding-bottom: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-3 {
padding-bottom: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-4 {
padding-bottom: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-5 {
padding-bottom: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-6 {
padding-bottom: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-7 {
padding-bottom: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-8 {
padding-bottom: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pb-9 {
padding-bottom: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-0 {
padding-left: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-1 {
padding-left: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-2 {
padding-left: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-3 {
padding-left: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-4 {
padding-left: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-5 {
padding-left: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-6 {
padding-left: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-7 {
padding-left: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-8 {
padding-left: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-pl-9 {
padding-left: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-0 {
padding-left: 0rem !important;
padding-right: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-1 {
padding-left: 0.25rem !important;
padding-right: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-2 {
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-3 {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-4 {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-5 {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-6 {
padding-left: 3rem !important;
padding-right: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-7 {
padding-left: 4rem !important;
padding-right: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-8 {
padding-left: 5rem !important;
padding-right: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-px-9 {
padding-left: 6rem !important;
padding-right: 6rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-0 {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-2 {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-5 {
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-6 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-7 {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-8 {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
}
@media (max-width: 768px) {
.u-sp-py-9 {
padding-top: 6rem !important;
padding-bottom: 6rem !important;
}
}/*# sourceMappingURL=styles.css.map */
/* add */
.g-map {
font-size: 0.875rem;
}
@media (max-width: 768px) {
.g-map{
font-size: 0.75rem;
}
}
.message-s-text {
font-size: 1.125rem;
font-weight: 700;
color:#1B3E83;
}
@media (max-width: 768px) {
.message-s-text {
font-size: 1rem;
}
}
.list-2clum {
column-count: 2;
column-gap: 2em;
}
@media (max-width: 768px) {
.list-2clum {
column-count: 1;
}
}
@media (min-width:769px){
.sp-only {
display: none;
}
}
@media (max-width: 768px) {
.pc-only {
display: none;
}
}
.prf-table th, .prf-table td {
border: none;
}
@media (min-width: 769px) {
.prf-table th {
width: 14.5%;
}
}
.c-unite {
background-color: white;
padding: 40px 50px;
border-radius: 10px;
text-align: center;
}
@media (min-width: 769px) {
.c-unite {
padding: 40px 50px;
}
}
@media (max-width: 768px) {
.c-unite p{
text-align: left;
}
}
.c-media img {
display: block;
margin-bottom: 24px;
border: 2px solid #000; /* 黒い枠線 */
border-radius: 8px; /* 角を丸くしたい場合 */
}
.c-media:last-child {
margin-bottom: 0;
}
.c-media__video-list {
display: flex;
gap: 24px;
flex-wrap: wrap; /* スマホ対応 */
}
.c-media__video-list .c-media {
flex: 1;
min-width: 300px; /* スマホで縦に落ちる */
}
/* .c-media__video-list img {
width: 100%;
height: auto;
display: block;
border-radius: 6px;
} */
.c-media__video-list img {
transition: 0.2s;
}
.c-media__video-list img:hover {
transform: scale(1.03);
}