Create New Item
×
Item Type
File
Folder
Item Name
×
Search file in folder and subfolders...
File Manager
/
test.smcse.co.jp
/
wp-content
/
themes
/
Sumitomo-Mitsui
/
css
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
@charset "UTF-8"; /* リキッドレイアウト対応 */ body { font-family: "noto-sans-cjk-jp", sans-serif; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-transition: opacity 0.8s 0.3s ease-out; transition: opacity 0.8s 0.3s ease-out; opacity: 0; -webkit-font-smoothing: antialiased; line-break: strict; } footer { margin-top: auto; } div[id^=track-], #chart, #history, #base { scroll-margin-top: 80px; } @media screen and (min-width: 768px) { div[id^=track-], #chart, #history, #base { scroll-margin-top: 130px; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } } html { font-size: 10px; } @media (max-width: 375px) { html { font-size: 2.6666666667vw; } } @media screen and (min-width: 768px) { html { font-size: 0.78125vw; } } @media (min-width: 1280px) { html { font-size: 10px; } } /* ホバー */ a { text-decoration: none; color: inherit; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Remove default padding */ ul, ol { padding: 0; } /* Remove default margin */ body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } /* Set core root defaults */ html { scroll-behavior: smooth; } /* Set core body defaults */ body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } /* Remove list styles on ul, ol elements with a class attribute */ ul, ol { list-style: none; } /* A elements that don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /* Make images easier to work with */ img { max-width: 100%; display: block; width: 100%; } /* Natural flow and rhythm in articles by default */ article > * + * { margin-top: 1em; } /* Form reset */ input, button, select, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; border-radius: 0; font: inherit; outline: none; padding: 0; } textarea { resize: vertical; } input[type=checkbox], input[type=radio] { display: none; } input[type=submit], input[type=button], label, button, select { cursor: pointer; } select::-ms-expand { display: none; } .c-breadcrumb { padding-top: 8px; padding-top: 0.8rem; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .c-breadcrumb { padding-top: 1.6rem; } } .c-button { width: -webkit-max-content; width: -moz-max-content; width: max-content; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 64px; padding-left: 6.4rem; font-size: 20px; font-size: 2rem; position: relative; letter-spacing: 0.1em; min-height: 48px; min-height: 4.8rem; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; line-height: 1.3; } .c-button:hover { color: #4880E0; } .c-button::before { content: ""; display: block; width: 48px; width: 4.8rem; height: 48px; height: 4.8rem; border: 1px solid #D3D3D3; border-radius: 50%; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; -webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } .c-button:hover::before { border-color: #4880E0; } .c-button::after { content: ""; display: block; width: 16px; width: 1.6rem; height: 16px; height: 1.6rem; background-image: url(../images/icon/button-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 16px; left: 1.6rem; } .c-entitle { text-transform: capitalize; color: #4880E0; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1; } @media screen and (min-width: 768px) { .c-entitle { font-size: 2.4rem; } } .corporate .c-entitle { color: #3E40A4; text-transform: uppercase; font-size: 32px; font-size: 3.2rem; font-weight: 400; } @media screen and (min-width: 768px) { .corporate .c-entitle { font-size: 6.4rem; } } .c-entitle.c-entitle--capitalize { text-transform: none; } .c-entitle.c-entitle--capitalize::first-letter { text-transform: capitalize; } .c-img { position: relative; width: 100%; } .c-img::before { content: ""; display: block; } .c-img img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link { display: block; width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: 160px; min-width: 16rem; padding: 5.5px 5px; padding: 0.55rem 0.5rem; color: #FFF; text-align: center; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; font-weight: 400; background-color: #3E40A4; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .c-link { font-size: 1.6rem; padding: 1.2rem 0.5rem; min-width: 24rem; } } .c-link--construction { font-size: 14px; font-size: 1.4rem; } @media screen and (max-width: 767px) { .c-link--construction { min-width: 20rem; } } .c-link:hover { background-color: #222470; } .c-text { font-family: "Noto Sans JP", sans-serif; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 2; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .c-text { font-size: 1.6rem; } } .c-theme { font-weight: 500; line-height: 1.25; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .c-theme { font-size: 3.2rem; } } .c-title { width: -webkit-max-content; width: -moz-max-content; width: max-content; font-weight: 500; font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; margin-top: -3.5px; margin-top: -0.35rem; } @media screen and (min-width: 768px) { .c-title { font-size: 4.8rem; margin-top: -0.5rem; -webkit-column-gap: 0.4rem; -moz-column-gap: 0.4rem; column-gap: 0.4rem; } } .c-title::after { content: ""; display: block; width: 40px; width: 4rem; height: 1px; background-color: #333; line-height: 1; } @media screen and (min-width: 768px) { .c-title::after { width: 8rem; } } .bottom .c-title { width: auto; line-height: 1.25; margin-top: -0.5px; margin-top: -0.05rem; margin: 4px -2px 0 0; margin: 0.4rem -0.2rem 0 0; } @media screen and (min-width: 768px) { .bottom .c-title { margin: 0.6rem 0 0 0; } } .bottom .c-title::after { content: none; } .corporate .c-title { margin-top: 8px; margin-top: 0.8rem; font-size: 16px; font-size: 1.6rem; -webkit-column-gap: 0.65rem; -moz-column-gap: 0.65rem; column-gap: 0.65rem; line-height: 1.25; } @media screen and (min-width: 768px) { .corporate .c-title { margin-top: 1.4rem; font-size: 2rem; -webkit-column-gap: 1.4rem; -moz-column-gap: 1.4rem; column-gap: 1.4rem; } } .corporate .c-title::after { width: 50px; width: 5rem; } @media screen and (min-width: 768px) { .corporate .c-title::after { width: 10rem; } } .l-404 { padding-top: 120px; padding-top: 12rem; padding-bottom: 120px; padding-bottom: 12rem; } .l-inner { width: 100%; padding-right: 16px; padding-left: 16px; margin-right: auto; margin-left: auto; max-width: 592px; } @media screen and (min-width: 768px) { .l-inner { max-width: 1330px; padding-right: 25px; padding-left: 25px; } } @media screen and (min-width: 768px) { .l-inner--narrow { max-width: 1170px; } } @media screen and (min-width: 768px) { .l-inner--narrowest { max-width: 1130px; } } .l-related { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-related { padding-top: 11.95rem; padding-bottom: 12rem; } } .l-topAbout { padding-top: 60px; padding-top: 6rem; padding-bottom: 76px; padding-bottom: 7.6rem; } @media screen and (min-width: 768px) { .l-topAbout { padding-top: 12.05rem; padding-bottom: 16rem; } } .l-topBlog { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topBlog { padding-top: 11.95rem; padding-bottom: 12rem; } } .l-topHowto { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topHowto { padding-top: 12.05rem; padding-bottom: 12rem; } } .l-topInformation { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topInformation { padding-top: 12.05rem; padding-bottom: 12rem; } } .l-topInterview { padding-top: 56px; padding-top: 5.6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topInterview { padding-top: 11.65rem; padding-bottom: 12rem; } } .l-topPerson { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topPerson { padding-top: 12rem; padding-bottom: 12rem; } } .l-topResearch { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topResearch { padding-top: 11.95rem; padding-bottom: 12rem; } } .l-topTalk { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-topTalk { padding-top: 12.15rem; padding-bottom: 12rem; } } .l-wrapper { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .l-wrapper { padding-top: 12rem; padding-bottom: 12rem; } } .wp-pagenavi { text-align: center; font-size: 24px; font-size: 2.4rem; font-weight: 500; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; padding-bottom: 24px; padding-bottom: 2.4rem; } @media screen and (min-width: 768px) { .wp-pagenavi { -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; padding-bottom: 4.8rem; } } .pagenavi-bottom { margin-top: 24px; margin-top: 2.4rem; padding-bottom: 0; } @media screen and (min-width: 768px) { .pagenavi-bottom { margin-top: 4.8rem; } } .wp-pagenavi a, .wp-pagenavi span { border-radius: 0.8rem; background-color: #FFF; padding: 0px 6.5px; padding: 0rem 0.65rem; white-space: nowrap; -webkit-transition: color 0.3s, background-color 0.3s, border 0.3s; transition: color 0.3s, background-color 0.3s, border 0.3s; text-align: center; text-decoration: none; border: 1px solid #333; width: 48px; width: 4.8rem; height: 48px; height: 4.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: bold; } .wp-pagenavi .previouspostslink { margin: 0; padding: 0 11px; padding: 0 1.1rem; letter-spacing: 2px; letter-spacing: 0.2rem; position: relative; color: transparent; } .wp-pagenavi .nextpostslink { margin: 0; padding: 0 11px; padding: 0 1.1rem; letter-spacing: 2px; letter-spacing: 0.2rem; position: relative; color: transparent; } .wp-pagenavi .previouspostslink::after { content: ""; position: absolute; width: 12px; width: 1.2rem; height: 12px; height: 1.2rem; border-top: 3px solid #333; border-left: 3px solid #333; top: 50%; left: 25px; left: 2.5rem; -webkit-transform: rotate(-45deg) translateY(-0.7rem); transform: rotate(-45deg) translateY(-0.7rem); } .wp-pagenavi .nextpostslink::after { content: ""; position: absolute; width: 12px; width: 1.2rem; height: 12px; height: 1.2rem; border-bottom: 3px solid #333; border-right: 3px solid #333; top: 50%; right: 14px; right: 1.4rem; -webkit-transform: rotate(-45deg) translateY(-0.7rem); transform: rotate(-45deg) translateY(-0.7rem); } .wp-pagenavi .pages, .wp-pagenavi .first, .wp-pagenavi .last, .wp-pagenavi .extend { display: none; } .wp-pagenavi span.current { color: #FFF; background-color: #4880E0; border: 1px solid #4880E0; } .wp-pagenavi a:hover { color: #FFF; background-color: #333; opacity: 1; } .wp-pagenavi .previouspostslink:hover, .wp-pagenavi .nextpostslink:hover { color: transparent; background-color: #333; } .wp-pagenavi .previouspostslink:hover::after { border-top: 2px solid #FFF; border-left: 2px solid #FFF; } @media screen and (min-width: 768px) { .wp-pagenavi .previouspostslink:hover::after { border-top: 3px solid #FFF; border-left: 3px solid #FFF; } } .wp-pagenavi .nextpostslink:hover::after { border-bottom: 2px solid #FFF; border-right: 2px solid #FFF; } @media screen and (min-width: 768px) { .wp-pagenavi .nextpostslink:hover::after { border-bottom: 3px solid #FFF; border-right: 3px solid #FFF; } } @media screen and (min-width: 768px) { .p-topInterview .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } } @media screen and (min-width: 768px) { .p-topInterview .swiper-slide { width: 100% !important; } } .swiper .swiper-pagination-bullet { background: #D9D9D9; opacity: 1; } @media screen and (min-width: 768px) { .p-fv .swiper-pagination-bullet, .p-topHowto .swiper-pagination-bullet, .p-internship .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; } } @media screen and (min-width: 768px) { .p-post .swiper-pagination-bullet { width: 1.2rem; height: 1.2rem; } } .swiper .swiper-pagination-bullet-active { background: #ABABAB; } .p-post .swiper .swiper-pagination-bullet-active { background: #3E40A4; } .p-fv .swiper-horizontal > .swiper-pagination-bullets, .p-fv .swiper-pagination-bullets.swiper-pagination-horizontal, .p-fv .swiper-pagination-custom, .p-fv .swiper-pagination-fraction, .p-topInterview .swiper-horizontal > .swiper-pagination-bullets, .p-topInterview .swiper-pagination-bullets.swiper-pagination-horizontal, .p-topInterview .swiper-pagination-custom, .p-topInterview .swiper-pagination-fraction, .p-topHowto .swiper-horizontal > .swiper-pagination-bullets, .p-topHowto .swiper-pagination-bullets.swiper-pagination-horizontal, .p-topHowto .swiper-pagination-custom, .p-topHowto .swiper-pagination-fraction, .p-internship .swiper-horizontal > .swiper-pagination-bullets, .p-internship .swiper-pagination-bullets.swiper-pagination-horizontal, .p-internship .swiper-pagination-custom, .p-internship .swiper-pagination-fraction, .p-post .swiper-horizontal > .swiper-pagination-bullets, .p-post .swiper-pagination-bullets.swiper-pagination-horizontal, .p-post .swiper-pagination-custom, .p-post .swiper-pagination-fraction { bottom: 0; } @media screen and (min-width: 768px) { .p-fv .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-fv .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet, .p-topHowto .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-topHowto .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet, .p-internship .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-internship .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet, .p-post .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .p-post .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 0.8rem; } } .p-topHowto .swiper-slide, .p-post .swiper-slide { opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-topHowto .swiper-slide, .p-post .swiper-slide { opacity: 1; } } .p-topHowto .swiper-slide-active, .p-post .swiper-slide-active { opacity: 1; } .p-404__title { text-align: center; opacity: 0.4; color: #333; font-size: 32px; font-size: 3.2rem; } @media screen and (min-width: 768px) { .p-404__title { font-size: 6.4rem; } } .p-404__title { font-family: "Noto Sans JP", sans-serif; letter-spacing: 0.1em; font-weight: 300; text-transform: uppercase; } .p-404__text { text-align: center; margin-top: 42px; margin-top: 4.2rem; } @media screen and (min-width: 768px) { .p-404__text { font-size: 3rem; } } .p-404__button { margin-top: 80px; margin-top: 8rem; text-align: center; } .p-404__button a { margin-inline: auto; } .p-accordion__theme { border-left: 6px solid #4880E0; padding-left: 4px; padding-left: 0.4rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-accordion__theme { border-width: 8px; padding-left: 0.8rem; font-size: 2.4rem; } } .p-accordion__contents { margin-top: 4px; margin-top: 0.4rem; } @media screen and (min-width: 768px) { .p-accordion__contents { margin-top: 0.75rem; } } .p-accordion__wrap:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-accordion__wrap:nth-of-type(n+2) { margin-top: 4.05rem; } } .p-accordion__block { border-bottom: 2px solid #F2F2F2; padding: 6px 8px 8px; padding: 0.6rem 0.8rem 0.8rem; } @media screen and (min-width: 768px) { .p-accordion__block { padding: 1.35rem 1.6rem; } } .p-accordion__term { position: relative; cursor: pointer; } .p-accordion__term p, .p-accordion__description p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 1.55rem; -moz-column-gap: 1.55rem; column-gap: 1.55rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-accordion__term p, .p-accordion__description p { -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem; } } .p-accordion__description a { color: #4880E0; } .p-accordion__term p { font-size: 16px; font-size: 1.6rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; padding-right: 24px; padding-right: 2.4rem; } @media screen and (min-width: 768px) { .p-accordion__term p { font-size: 2rem; padding-right: 5rem; } } .p-accordion__description p { font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-accordion__description p { font-size: 1.6rem; } } .p-accordion__term p::before { content: "Q"; color: #4880E0; font-weight: 500; font-size: 20px; font-size: 2rem; } @media screen and (min-width: 768px) { .p-accordion__term p::before { font-size: 2.4rem; } } .p-accordion__description p::before { content: "A"; font-weight: 500; font-size: 20px; font-size: 2rem; } @media screen and (min-width: 768px) { .p-accordion__description p::before { font-size: 2.4rem; } } .p-accordion__term span, .p-accordion__description span { display: block; margin-top: 2px; margin-top: 0.2rem; } @media screen and (min-width: 768px) { .p-accordion__term span, .p-accordion__description span { margin-top: 0.3rem; } } @media screen and (min-width: 768px) { .p-accordion__description span { margin-top: 0.55rem; } } .p-accordion__open { position: absolute; top: 2px; top: 0.2rem; right: 0; width: 16px; width: 1.6rem; height: 16px; height: 1.6rem; } @media screen and (min-width: 768px) { .p-accordion__open { top: 0.75rem; } } .p-accordion__open::before, .p-accordion__open::after { content: ""; position: absolute; display: block; height: 2px; height: 0.2rem; width: 16px; width: 1.6rem; background-color: #4880E0; top: 50%; left: 50%; } .p-accordion__open::before { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .p-accordion__open::after { -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate(-50%, -0.1rem) rotate(90deg); transform: translate(-50%, -0.1rem) rotate(90deg); } .active .p-accordion__open::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .p-accordion__description { margin-top: 8px; margin-top: 0.8rem; display: none; opacity: 0; -webkit-transition: opacity 0.6s 0.2s; transition: opacity 0.6s 0.2s; } @media screen and (min-width: 768px) { .p-accordion__description { margin-top: 1.05rem; } } .p-accordion__description.open { display: block; opacity: 1; } .p-accordion__description a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .p-blog__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-blog__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-blog__items { margin-top: 24.5px; margin-top: 2.45rem; display: grid; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-blog__items { margin-top: 4.75rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-blog__posts { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-blog__posts { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-blog__posts--taxonomy { background-color: transparent; } .p-blog__container { margin-top: 24px; margin-top: 2.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-blog__container { margin-top: 4.8rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } .p-blog__single .p-blog__container { margin-top: 0; } .p-products__noResults { font-size: 16px; font-size: 1.6rem; } .p-blog__contents { width: 100%; } @media screen and (min-width: 768px) { .p-blog__sidebar { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; max-width: 36rem; } } .p-blog__archivePosts { display: grid; gap: 24px; gap: 2.4rem; } .p-blog__single { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-blog__single { padding-top: 8.55rem; padding-bottom: 12rem; } } @media screen and (min-width: 768px) { .p-blog__postContents { width: 100%; max-width: 88rem; } } .p-blog__postTitle { margin-top: 6.5px; margin-top: 0.65rem; font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-blog__postTitle { margin-top: 1.45rem; font-size: 3.2rem; } } .p-blog__tags { margin-top: 4px; margin-top: 0.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; gap: 0.8rem; font-weight: 500; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-blog__tags { margin-top: 0.8rem; gap: 1.5rem; font-size: 1.6rem; } } .p-blog__thumbnail { margin-top: 24.5px; margin-top: 2.45rem; } @media screen and (min-width: 768px) { .p-blog__thumbnail { margin-top: 4.8rem; } } .p-blog__thumbnail img { border-radius: 1.6rem; height: auto; } .p-blog__content { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-blog__content { margin-top: 5.25rem; } } .p-blog__content h2 { margin-top: 24px; margin-top: 2.4rem; font-weight: 500; line-height: 1.25; font-size: 16px; font-size: 1.6rem; padding-left: 8px; padding-left: 0.8rem; padding-bottom: 4px; padding-bottom: 0.4rem; border-bottom: 2px solid #4880E0; } @media screen and (min-width: 768px) { .p-blog__content h2 { width: -webkit-max-content; width: -moz-max-content; width: max-content; min-width: 48rem; margin-top: 4rem; font-size: 2.4rem; padding-left: 1.6rem; padding-bottom: 0.85rem; border-width: 4px; } } .p-blog__content h3 { margin-top: 24px; margin-top: 2.4rem; font-weight: 500; line-height: 1.25; font-size: 16px; font-size: 1.6rem; } @media screen and (min-width: 768px) { .p-blog__content h3 { margin-top: 4rem; font-size: 2rem; } } .p-blog__content h4 { margin-top: 20px; margin-top: 2rem; font-weight: 500; line-height: 1.25; font-size: 15px; font-size: 1.5rem; } @media screen and (min-width: 768px) { .p-blog__content h4 { margin-top: 3.2rem; font-size: 1.8rem; } } .p-blog__content h5 { margin-top: 20px; margin-top: 2rem; font-weight: 500; line-height: 1.25; font-size: 14px; font-size: 1.4rem; } @media screen and (min-width: 768px) { .p-blog__content h5 { margin-top: 3.2rem; font-size: 1.6rem; } } .p-blog__content p, .p-blog__content ol, .p-blog__content ul { margin-top: 12px; margin-top: 1.2rem; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 2; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-blog__content p, .p-blog__content ol, .p-blog__content ul { margin-top: 2.4rem; font-size: 1.6rem; } } .p-blog__content a { font-size: 14px; font-size: 1.4rem; line-height: 2; letter-spacing: 0.1em; color: #4880E0; text-decoration: underline; } @media screen and (min-width: 768px) { .p-blog__content a { font-size: 1.6rem; } } .p-blog__content ol { list-style: decimal; margin-left: 22px; margin-left: 2.2rem; } @media screen and (min-width: 768px) { .p-blog__content ol { margin-left: 2.5rem; } } .p-blog__content ul { list-style: disc; margin-left: 17px; margin-left: 1.7rem; } @media screen and (min-width: 768px) { .p-blog__content ul { margin-left: 2rem; } } .p-blog__content blockquote { margin-top: 24px; margin-top: 2.4rem; border: 1px solid #AAAAAA; border-radius: 0.3rem; padding: 16px; padding: 1.6rem; } @media screen and (min-width: 768px) { .p-blog__content blockquote { padding: 2rem; } } .p-blog__content blockquote p { margin-top: 0; } .p-bottomCorporate { margin-top: 80px; margin-top: 8rem; position: relative; height: 240px; height: 24rem; background-repeat: no-repeat; background-size: cover; background-position: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (min-width: 768px) { .p-bottomCorporate { margin-top: 13rem; display: block; } } .p-bottomCorporate::after { content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4); width: 100%; height: 100%; } .p-bottomCorporate__container { width: 100%; padding-right: 16px; padding-left: 16px; margin-inline: auto; max-width: 592px; position: relative; z-index: 1; color: #FFF; } @media screen and (min-width: 768px) { .p-bottomCorporate__container { -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; max-width: max(38.8888888889vw, 56rem); height: 100%; background-color: rgba(62, 64, 164, .8); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4rem; } } @media screen and (min-width: 768px) { .p-bottomCorporate__wrap { width: 100%; max-width: 48rem; } } .p-bottomCorporate__title { font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-bottomCorporate__title { font-size: 3.2rem; } } .p-bottomCorporate__text { font-size: 14px; font-size: 1.4rem; line-height: 2; margin-top: 4px; margin-top: 0.4rem; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-bottomCorporate__text { margin-top: 0.8rem; } } .p-bottomFv { margin-top: 80px; margin-top: 8rem; position: relative; height: 240px; height: 24rem; background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .p-bottomFv { margin-top: 13rem; } } .p-bottomFv::after { content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .4); width: 100%; height: 100%; } .p-bottomFv__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; } .p-bottomFv__container { position: relative; z-index: 1; color: #FFF; } @media screen and (min-width: 768px) { .p-bottomFv__container { margin-top: 0.8rem; } } .p-bottomFv__title { font-weight: 600; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-bottomFv__title { font-size: 3.2rem; } } .p-bottomFv__text { margin-top: 3px; margin-top: 0.3rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-bottomFv__text { margin-top: 0.8rem; } } .p-business__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-business__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-business__headingImg { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-business__headingImg { margin-top: 4.8rem; max-width: 80rem; margin-inline: auto; } } .p-business__headingImg::before { padding-top: 83.0903790087%; } @media screen and (min-width: 768px) { .p-business__headingImg::before { padding-top: 83%; } } .p-business__headingWrap { margin-top: 24px; margin-top: 2.4rem; width: 100%; margin-inline: auto; } @media screen and (min-width: 768px) { .p-business__headingWrap { margin-top: 4.8rem; max-width: 144rem; } } .p-business__headingInner { width: 100%; padding-right: 16px; padding-left: 16px; margin-right: auto; margin-left: auto; max-width: 592px; } @media screen and (min-width: 768px) { .p-business__headingInner { max-width: calc(136rem + 25px); padding-right: 25px; padding-left: 0; margin-left: 0; } } @media screen and (min-width: 768px) { .p-business__headingWrap--strength .p-business__headingInner { margin-left: auto; margin-right: 0; padding-right: 0; padding-left: 25px; } } .p-business__headingBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-business__headingBlock { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-business__headingWrap--strength .p-business__headingBlock { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 768px) { .p-business__headingBlockImg { max-width: 68rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-business__headingBlockImg::before { padding-top: 74.9271137026%; } @media screen and (min-width: 768px) { .p-business__headingBlockImg::before { padding-top: 66.6176470588%; } } .p-business__headingTheme { font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-business__headingTheme { font-size: 2.4rem; } } .p-business__headingText { margin-top: 8px; margin-top: 0.8rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-business__headingText { margin-top: 1.6rem; } } .p-business__strength { background-color: #EFEFEF; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-business__strength { padding-top: 12rem; padding-bottom: 12rem; } } .p-business__local { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-business__local { margin-top: 4.8rem; width: 100%; max-width: 103.2rem; margin-inline: auto; } } .p-business__localItems { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-business__localItems { gap: 2.4rem; } } .p-business__localItem { width: 100%; max-width: calc(50% - 1.2rem); position: relative; background-color: #FFF; border: 2px solid #3E40A4; border-radius: 50%; } @media screen and (min-width: 768px) { .p-business__localItem { max-width: 24rem; } } .p-business__localItem::before { content: ""; display: block; width: 100%; padding-top: 100%; } .p-business__localItem p { width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: #3E40A4; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; font-size: 14px; font-size: 1.4rem; } @media screen and (min-width: 768px) { .p-business__localItem p { font-size: 2rem; } } .p-business__localBottom { margin-top: 24px; margin-top: 2.4rem; background-color: #3E40A4; color: #FFF; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; text-align: center; padding: 14px 10px; padding: 1.4rem 1rem; font-size: 16px; font-size: 1.6rem; } @media screen and (min-width: 768px) { .p-business__localBottom { padding: 2rem 1rem; margin-top: 4.8rem; font-size: 2.4rem; } } .p-business__localBottom span { display: block; font-size: 32px; font-size: 3.2rem; } @media screen and (min-width: 768px) { .p-business__localBottom span { font-size: 4rem; } } .p-business__results { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-business__results { padding-top: 12rem; padding-bottom: 12rem; } } .p-business__resultsTheme { margin-top: 24px; margin-top: 2.4rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-business__resultsTheme { margin-top: 4.8rem; font-size: 2.4rem; } } .p-business__resultsItems { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-business__resultsItems { margin-top: 4.8rem; grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3.2rem; } } .p-business__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-business__link { margin-top: 4.8rem; } } .p-business__link a { margin-inline: auto; } .p-business__development { background-color: #EFEFEF; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-business__development { padding-top: 12rem; padding-bottom: 12rem; } } .p-business__developmentItems { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 8px; row-gap: 0.8rem; } @media screen and (min-width: 768px) { .p-business__developmentItems { margin-top: 4.8rem; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } } .p-business__related { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-business__related { padding-top: 12rem; padding-bottom: 12rem; } } .p-business__related--bg { background-color: #EFEFEF; } .p-business__related--other { background-color: #EFEFEF; } .p-business__relatedItems { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-business__relatedItems { margin-top: 4.8rem; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; } } .p-career__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-career__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-career__headingBlock { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-career__headingBlock { margin-top: 4.75rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-career__headingImg { max-width: 48rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-career__headingImg::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-career__headingImg::before { padding-top: 66.6666666667%; } } .p-career__headingImg img { border-radius: 1.6rem; } .p-career__headingText { white-space: pre-wrap; } .p-career__headingItems { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-career__headingItems { margin-top: 4.8rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-career__headingItem { border-radius: 1.6rem; border: 2px solid #4880E0; overflow: hidden; } .p-career__headingTitle { min-height: 46px; min-height: 4.6rem; padding-bottom: 2px; padding-bottom: 0.2rem; background-color: #4880E0; color: #FFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-weight: 500; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-career__headingTitle { font-size: 1.6rem; } } .p-career__headingBody { padding: 16px 14px 14px; padding: 1.6rem 1.4rem 1.4rem; } @media screen and (min-width: 768px) { .p-career__headingBody { padding: 1.6rem 1.3rem 1.4rem; } } .p-career__headingTheme { text-align: center; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__headingTheme { font-size: 2rem; } } .p-career__headingItemText { margin-top: 8px; margin-top: 0.8rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__headingItemText { margin-top: 1.6rem; } } .p-career__training { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60.5px; padding-bottom: 6.05rem; } @media screen and (min-width: 768px) { .p-career__training { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-career__trainingContainer { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-career__trainingContainer { margin-top: 4.75rem; } } .p-career__trainingWrap { overflow-x: scroll; width: 100%; padding-bottom: 12px; padding-bottom: 1.2rem; } @media screen and (min-width: 768px) { .p-career__trainingWrap { padding-bottom: 0; overflow: visible; } } .p-career__trainingImg { width: 560px; width: 56rem; } @media screen and (min-width: 768px) { .p-career__trainingImg { width: 100%; } } .p-career__trainingImg::before { padding-top: 42.1428571429%; } @media screen and (min-width: 768px) { .p-career__trainingImg::before { padding-top: 42.03125%; } } .p-career__trainingInfo { margin-top: 26.5px; margin-top: 2.65rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-career__trainingInfo { margin-top: 4.8rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; width: 100%; max-width: 124rem; } } .p-career__trainingBlock { width: 100%; } .p-career__trainingBlockHeading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } .p-career__trainingTheme { border-radius: 0.8rem; background-color: #FFE94D; width: 100%; max-width: 122px; max-width: 12.2rem; -ms-flex-negative: 0; flex-shrink: 0; text-align: center; padding: 8px 0; padding: 0.8rem 0; font-weight: 500; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-career__trainingTheme { max-width: 16rem; font-size: 2rem; padding: 1.5rem 0; } } .p-career__trainingBlock:nth-of-type(2) .p-career__trainingTheme { background-color: #4880E0; color: #FFF; } .p-career__trainingTitle { font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-career__trainingTitle { font-size: 2.4rem; } } .p-career__trainingBottom { margin-top: 12px; margin-top: 1.2rem; padding: 16px; padding: 1.6rem; border-radius: 0.8rem; background-color: #FFF; } @media screen and (min-width: 768px) { .p-career__trainingBottom { margin-top: 2.4rem; padding: 1.6rem 2.4rem; } } .p-career__trainingBottom p { font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-career__trainingBottom p { font-size: 2rem; } } .p-career__trainingBottom p:nth-of-type(n+2) { margin-top: 16px; margin-top: 1.6rem; } .p-career__trainingBottom span { display: block; font-weight: 400; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; margin-top: 0.5px; margin-top: 0.05rem; } @media screen and (min-width: 768px) { .p-career__trainingBottom span { font-size: 1.6rem; margin-top: 0.4rem; } } .p-career__system { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-career__system { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-career__systemContents { margin-top: 24.5px; margin-top: 2.45rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; gap: 1.5rem; } @media screen and (min-width: 768px) { .p-career__systemContents { margin-top: 4.75rem; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } } .p-career__systemItem { border-radius: 1.6rem; position: relative; padding-top: 100%; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-career__systemItem { height: 16rem; padding: 0; } } .p-career__systemItem::after { content: ""; display: block; width: 100%; height: 100%; border: 2px solid #4880E0; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 1.6rem; } .p-career__systemItem:hover { background-color: #4880E0; } .p-career__systemItemLocation { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; color: #4880E0; font-size: 16px; font-size: 1.6rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; text-align: center; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__systemItemLocation { font-size: 2rem; } } .p-career__systemItemBlock { width: calc(100% - 2rem); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFF; opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-career__systemItemBlock { width: calc(100% - 3.2rem); } } .p-career__systemItem:hover .p-career__systemItemBlock { opacity: 1; z-index: 1; } .p-career__systemItemTheme { font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; text-align: center; font-weight: 500; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__systemItemTheme { font-size: 1.6rem; } } .p-career__systemItemText { margin-top: 8px; margin-top: 0.8rem; border-top: 2px solid #FFF; padding-top: 8px; padding-top: 0.8rem; font-size: 13px; font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__systemItemText { font-size: 1.4rem; } } @media screen and (min-width: 768px) { .p-career__theme { margin-top: 4.8rem; } } .p-career__text { white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-career__text { margin-top: 2.4rem; } } .p-child__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-child__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-child__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-child__container { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-child__side { width: 100%; max-width: 36rem; -ms-flex-negative: 0; flex-shrink: 0; position: sticky; top: 16rem; } } .p-child__sideItems { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 6px; row-gap: 0.6rem; } @media screen and (min-width: 768px) { .p-child__sideItems { row-gap: 0.8rem; } } .p-child__sideItem { background-color: #EFEFEF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.6rem; -moz-column-gap: 0.6rem; column-gap: 0.6rem; padding: 7.5px 16px; padding: 0.75rem 1.6rem; letter-spacing: 0.1em; font-size: 16px; font-size: 1.6rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-child__sideItem { -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-size: 2rem; } } .p-child__sideItem:hover { opacity: 0.8; } .p-child__sideItem::before { content: ""; display: block; width: 12px; width: 1.2rem; height: 16px; height: 1.6rem; margin: 5px 0 0 2px; margin: 0.5rem 0 0 0.2rem; background-image: url(../images/icon/achievement-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } @media screen and (min-width: 768px) { .p-child__sideItem::before { width: 1.6rem; height: 2.1rem; } } .p-child__sideItem:hover::before { -webkit-transform: translateX(0.3rem); transform: translateX(0.3rem); } @media screen and (min-width: 768px) { .p-child__contents { width: 100%; max-width: 88rem; } } .p-child__profileContainer { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__profileContainer { margin-top: 3.2rem; } } .p-child__chart { margin-top: 80px; margin-top: 8rem; } @media screen and (min-width: 768px) { .p-child__chart { margin-top: 10.6rem; } } .p-child__chartImg { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__chartImg { margin-top: 4.8rem; } } .p-child__history { margin-top: 72px; margin-top: 7.2rem; } @media screen and (min-width: 768px) { .p-child__history { margin-top: 12rem; } } .p-child__historyContainer { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__historyContainer { margin-top: 3.2rem; } } .p-child__base { margin-top: 80px; margin-top: 8rem; } @media screen and (min-width: 768px) { .p-child__base { margin-top: 12rem; } } .p-child__baseContainer { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__baseContainer { margin-top: 4.8rem; } } .p-child__baseCategories { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; gap: 1.6rem; display: grid; grid-template-columns: repeat(3, 1fr); } @media screen and (min-width: 768px) { .p-child__baseCategories { width: 100%; max-width: 76.8rem; margin-inline: auto; gap: 1.8rem 2.4rem; } } .p-child__baseCategory { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border: 2px solid #3E40A4; background-color: #3E40A4; padding: 17.5px 0; padding: 1.75rem 0; text-align: center; color: #FFF; font-size: 18px; font-size: 1.8rem; line-height: 1.25; font-weight: 500; letter-spacing: 0.1em; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-child__baseCategory { font-size: 2.4rem; padding: 2.3rem 0; } } .p-child__baseCategory:hover { background-color: #222470; } .p-child__baseCategory::after { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 12px; width: 1.2rem; height: 12px; height: 1.2rem; background-color: #FFF; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); } @media screen and (min-width: 768px) { .p-child__baseCategory::after { width: 1.6rem; height: 1.6rem; } } .p-child__baseContents { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__baseContents { margin-top: 5.4rem; } } .p-child__baseBlock:nth-of-type(n+2) { margin-top: 28px; margin-top: 2.8rem; } @media screen and (min-width: 768px) { .p-child__baseBlock:nth-of-type(n+2) { margin-top: 4.6rem; } } .p-child__address { margin-top: 12px; margin-top: 1.2rem; font-weight: 500; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__address { margin-top: 2.4rem; font-size: 2rem; } } .p-child__address--second { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__address--second { margin-top: 4.8rem; } } .p-child__map { display: block; margin-top: 16px; margin-top: 1.6rem; position: relative; width: 100%; height: 300px; height: 30rem; } @media screen and (min-width: 768px) { .p-child__map { margin-top: 2.4rem; height: 49.5rem; } } .p-child__baseList { margin-top: 4px; margin-top: 0.4rem; } @media screen and (min-width: 768px) { .p-child__baseList { margin-top: 0.8rem; } } .p-child__map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-child__philosophyContainer { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__philosophyContainer { margin-top: 4.8rem; } } .p-child__philosophyBlocks { display: grid; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-child__philosophyBlocks { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } .p-child__philosophyBlock { border: 2px solid #3E40A4; padding: 14px; padding: 1.4rem; } @media screen and (min-width: 768px) { .p-child__philosophyBlock { min-height: 20rem; } } .p-child__philosophyTheme { color: #3E40A4; font-weight: 500; font-size: 18px; font-size: 1.8rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__philosophyTheme { font-size: 2rem; } } .p-child__philosophyText { margin-top: 8px; margin-top: 0.8rem; font-weight: 300; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__philosophyText { font-size: 1.6rem; } } .p-child__charter { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__charter { margin-top: 4.8rem; } } .p-child__charterText { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__charterText { margin-top: 2.4rem; } } .p-child__charterContents { margin-top: 16px; margin-top: 1.6rem; border: 2px solid #3E40A4; padding: 14px 13.5px; padding: 1.4rem 1.35rem; } @media screen and (min-width: 768px) { .p-child__charterContents { margin-top: 2.4rem; } } .p-child__charterItem:not(:first-of-type) { padding-top: 16px; padding-top: 1.6rem; } .p-child__charterItem:not(:last-of-type) { padding-bottom: 16px; padding-bottom: 1.6rem; border-bottom: 2px solid #F2F2F2; } .p-child__greetings { margin-top: 80px; margin-top: 8rem; } @media screen and (min-width: 768px) { .p-child__greetings { margin-top: 12rem; } } .p-child__greetingsContainer { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__greetingsContainer { margin-top: 2.7rem; } } .p-child__greetingsImg { width: 100%; max-width: 240px; max-width: 24rem; margin-inline: auto; } .p-child__greetingsText { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__greetingsText { margin-top: 2.2rem; } } .p-child__greetingsBottom { margin-top: 24px; margin-top: 2.4rem; text-align: right; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__greetingsBottom { margin-top: 4rem; font-size: 2rem; } } .p-child__greetingsPresident { text-align: right; margin-top: 4px; margin-top: 0.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__greetingsPresident { -webkit-column-gap: 1.4rem; -moz-column-gap: 1.4rem; column-gap: 1.4rem; font-size: 2rem; } } .p-child__greetingsPresident span { font-weight: 500; font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__greetingsPresident span { font-size: 3.2rem; } } .p-child__policyContainer { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__policyContainer { margin-top: 4.8rem; } } .p-child__policyContents { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__policyContents { margin-top: 4.8rem; } } .p-child__policyBlock:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-child__policyBlock:nth-of-type(n+2) { margin-top: 4.8rem; } } .p-child__policyContents .p-child__policyText { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__policyContents .p-child__policyText { margin-top: 2.4rem; } } .p-child__policyContents ul { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__policyContents ul { margin-top: 2.4rem; } } .p-child__policyContents li { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-child__policyContents li::before { content: "・"; -ms-flex-negative: 0; flex-shrink: 0; } .p-child__policyBottom { font-family: "Noto Sans JP", sans-serif; font-weight: 300; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; margin-top: 16px; margin-top: 1.6rem; text-align: right; } @media screen and (min-width: 768px) { .p-child__policyBottom { margin-top: 2.4rem; font-size: 1.6rem; } } .p-child__use { margin-top: 80px; margin-top: 8rem; } @media screen and (min-width: 768px) { .p-child__use { margin-top: 12rem; } } .p-child__policyDate { text-align: right; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-child__policyDate { font-size: 1.6rem; } } .p-child__policyHeadingText { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__policyHeadingText { margin-top: 2.4rem; } } .p-child__pdf { margin-top: 16px; margin-top: 1.6rem; display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #3E40A4; letter-spacing: 0.1em; font-size: 14px; font-size: 1.4rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media screen and (min-width: 768px) { .p-child__pdf { margin-top: 2.2rem; font-size: 1.6rem; } } .p-child__pdf:hover { opacity: 0.7; } .p-child__pdf span { position: relative; } .p-child__pdf span::after { content: ""; display: block; width: 14px; width: 1.4rem; height: 14px; height: 1.4rem; background-image: url(../images/icon/pdf.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; bottom: 2.5px; bottom: 0.25rem; left: 3px; left: 0.3rem; } @media screen and (min-width: 768px) { .p-child__pdf span::after { width: 1.6rem; height: 1.6rem; left: 0.7rem; bottom: 0.3rem; } } .p-child__downloadContents { margin-top: 16px; margin-top: 1.6rem; display: grid; row-gap: 30px; row-gap: 3rem; } @media screen and (min-width: 768px) { .p-child__downloadContents { margin-top: 2.6rem; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 2rem; -moz-column-gap: 2rem; column-gap: 2rem; } } .p-child__downloadBlock { padding: 0 8px; padding: 0 0.8rem; } .p-child__download { margin-top: 8px; margin-top: 0.8rem; display: block; width: 100%; padding: 10px 5px; padding: 1rem 0.5rem; color: #FFF; text-align: center; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; font-weight: 400; background-color: #3E40A4; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-child__download { font-size: 1.6rem; padding: 1.2rem 0.5rem; } } .p-child__download:hover { background-color: #222470; } .p-child__downloadText { margin-top: 16px; margin-top: 1.6rem; white-space: pre-wrap; } .p-child__documentTitle { margin-top: 13px; margin-top: 1.3rem; font-weight: 500; font-size: 16px; font-size: 1.6rem; font-weight: 500; text-align: center; letter-spacing: 0.1em; } .p-child__documentText { margin-top: 8px; margin-top: 0.8rem; white-space: pre-wrap; } .p-child__downloadXls { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-child__downloadXls { margin-top: 2.2rem; } } .p-child__xls { display: block; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #3E40A4; letter-spacing: 0.1em; font-size: 14px; font-size: 1.4rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media screen and (min-width: 768px) { .p-child__xls { font-size: 1.6rem; } } .p-child__xls:hover { opacity: 0.7; } .p-child__xls span { position: relative; } .p-child__xls span::after { content: ""; display: block; width: 14px; width: 1.4rem; height: 14px; height: 1.4rem; background-image: url(../images/icon/xls.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; bottom: 2.5px; bottom: 0.25rem; left: 3px; left: 0.3rem; } @media screen and (min-width: 768px) { .p-child__xls span::after { width: 1.6rem; height: 1.6rem; left: 0.7rem; bottom: 0.3rem; } } .p-child__xls:nth-of-type(n+2) { margin-top: 12px; margin-top: 1.2rem; } .p-company__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-company__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-company__headingBlocks { display: grid; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-company__headingBlocks { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3.2rem; } } .p-company__headingBlock { padding: 16px; padding: 1.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 16px; row-gap: 1.6rem; border: 2px solid #3E40A4; } @media screen and (min-width: 768px) { .p-company__headingBlock { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 4rem; min-height: 20rem; padding: 2.4rem 4rem; } } .p-company__headingBlockImg { width: 100px; width: 10rem; height: 100px; height: 10rem; margin-inline: auto; -ms-flex-negative: 0; flex-shrink: 0; } .p-company__headingBlockImg img { height: 100%; } @media screen and (min-width: 768px) { .p-company__headingBlockWrap { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .p-company__headingBlockTitle { color: #3E40A4; line-height: 1.25; font-size: 24px; font-size: 2.4rem; font-weight: 500; } .p-company__headingBlockText { margin-top: 8px; margin-top: 0.8rem; white-space: pre-wrap; } .p-company__headingBlockLink { display: block; background-color: #3E40A4; color: #FFF; margin-top: 8px; margin-top: 0.8rem; width: 160px; width: 16rem; padding: 4.5px; padding: 0.45rem; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; text-align: center; margin-left: auto; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-company__headingBlockLink { margin-top: auto; } } .p-company__headingBlockLink:hover { background-color: #222470; } .p-company__information { position: relative; background-image: url(../images/corporate/bg-information.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-company__information { padding-top: 12rem; padding-bottom: 12rem; } } .p-company__information::before { content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, .9); width: 100%; height: 100%; } .p-company__informationWrap { position: relative; z-index: 1; } .p-company__contents { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 19px; row-gap: 1.9rem; } @media screen and (min-width: 768px) { .p-company__contents { margin-top: 4.8rem; grid-template-columns: repeat(3, 1fr); -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; } } .p-company__blockImg::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-company__blockImg::before { padding-top: 66.75%; } } .p-company__blockTitle { margin-top: 8px; margin-top: 0.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-weight: 500; line-height: 1.25; font-size: 24px; font-size: 2.4rem; letter-spacing: 0.1em; } .p-company__blockTitle::before { content: ""; display: block; width: 6px; width: 0.6rem; background-color: #3E40A4; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (min-width: 768px) { .p-company__blockTitle::before { width: 0.8rem; } } .p-company__items { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-company__items { margin-top: 3.2rem; } } .p-construction { margin-top: 32px; margin-top: 3.2rem; } @media screen and (min-width: 768px) { .p-construction { margin-top: 6.4rem; } } .p-construction__section { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-construction__section { padding-top: 12rem; padding-bottom: 12rem; } } .p-construction__section--bg { background-color: #EFEFEF; } .p-construction__wrap { width: 100%; margin-inline: auto; } @media screen and (min-width: 768px) { .p-construction__wrap { max-width: 144rem; } } .p-construction__headingInner { width: 100%; padding-right: 16px; padding-left: 16px; margin-right: auto; margin-left: auto; max-width: 592px; } @media screen and (min-width: 768px) { .p-construction__headingInner { max-width: calc(136rem + 25px); padding-right: 25px; padding-left: 0; margin-left: 0; } } @media screen and (min-width: 768px) { .p-construction__headingInner--reverse { margin-left: auto; margin-right: 0; padding-right: 0; padding-left: 25px; } } .p-construction__headingBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-construction__headingBlock { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-construction__headingInner--reverse .p-construction__headingBlock { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 768px) { .p-construction__headingBlockImg { max-width: 68rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-construction__headingBlockImg::before { padding-top: 74.9271137026%; } @media screen and (min-width: 768px) { .p-construction__headingBlockImg::before { padding-top: 75%; } } .p-construction__headingTheme { margin-top: 24px; margin-top: 2.4rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-construction__headingTheme { margin-top: 4.8rem; font-size: 2.4rem; } } .p-construction__headingText { margin-top: 8px; margin-top: 0.8rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-construction__headingText { margin-top: 1.6rem; } } .p-construction__link { margin-top: 23.5px; margin-top: 2.35rem; } @media screen and (min-width: 768px) { .p-construction__link { margin-top: 4.75rem; } } .p-construction__bottom { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-construction__bottom { margin-top: 4.8rem; } } .p-construction__bottomBlock:nth-of-type(n+2) { margin-top: 32px; margin-top: 3.2rem; } @media screen and (min-width: 768px) { .p-construction__bottomBlock:nth-of-type(n+2) { margin-top: 4rem; } } .p-construction__categories { margin-top: 16px; margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 23px; gap: 2rem 2.3rem; } @media screen and (min-width: 768px) { .p-construction__categories { margin-top: 2.4rem; grid-template-columns: repeat(5, 1fr); gap: 1.6rem 2rem; } } .p-construction__category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px; padding: 0.5rem; font-size: 16px; font-size: 1.6rem; font-weight: 500; text-align: center; line-height: 1.25; letter-spacing: 0.1em; background-color: #EFEFEF; border: 2px solid #3E40A4; color: #3E40A4; min-height: 48px; min-height: 4.8rem; -webkit-transition: color 0.3s ease-out, background-color 0.3s ease-out; transition: color 0.3s ease-out, background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-construction__category { font-size: 2rem; min-height: 7.2rem; } } .p-construction__section--bg .p-construction__category { background-color: #FFF; } .p-construction__categories .p-construction__category:hover { background-color: #3E40A4; color: #FFF; } .p-curriculum__list { display: grid; row-gap: 5px; row-gap: 0.5rem; } @media screen and (min-width: 768px) { .p-curriculum__list { grid-template-columns: 16rem 24rem 84.8rem; -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } } .p-curriculum__list:nth-of-type(n+2) { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-curriculum__list:nth-of-type(n+2) { margin-top: 0.8rem; } } .p-curriculum__list p { border-radius: 0.8rem; border: 2px solid #4880E0; background-color: #FFF; padding: 6px 14px; padding: 0.6rem 1.4rem; font-weight: 500; } @media screen and (min-width: 768px) { .p-curriculum__list p { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1rem 1.4rem; min-height: 6.4rem; } } .p-curriculum__list--holiday p { background-color: #D9D9D9; text-align: center; } @media screen and (max-width: 767px) { .p-curriculum__list--heading { display: none; } } .p-curriculum__list--heading p { background-color: #4880E0; color: #FFF; } @media screen and (min-width: 768px) { .p-curriculum__list--heading p { font-size: 2rem; padding: 0.95rem; min-height: auto; } } .p-curriculum__date { font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; text-align: center; } @media screen and (min-width: 768px) { .p-curriculum__date { font-size: 2rem; } } .p-curriculum__time { font-size: 14px; font-size: 1.4rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; text-align: center; } @media screen and (min-width: 768px) { .p-curriculum__time { font-size: 1.6rem; } } p.p-curriculum__content { font-size: 14px; font-size: 1.4rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { p.p-curriculum__content { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; font-size: 1.6rem; } } .p-develop { position: relative; height: 120px; height: 12rem; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; border: 2px solid #3E40A4; background-color: #FFF; } @media screen and (min-width: 768px) { .p-develop { height: 16rem; } } .p-develop:hover { background-color: #3E40A4; } .p-develop__title { text-align: center; color: #3E40A4; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; font-size: 20px; font-size: 2rem; font-weight: 500; line-height: 1.25; } @media screen and (min-width: 768px) { .p-develop__title { font-size: 2.4rem; } } .p-develop__title span { display: block; margin-bottom: 8px; margin-bottom: 0.8rem; font-size: 32px; font-size: 3.2rem; } @media screen and (min-width: 768px) { .p-develop__title span { font-size: 4rem; margin-bottom: 1.2rem; } } .p-develop__hover { width: calc(100% - 3.2rem); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFF; opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .p-develop:hover .p-develop__hover { opacity: 1; z-index: 1; } .p-develop__hoverTitle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; } @media screen and (min-width: 768px) { .p-develop__hoverTitle { font-size: 2rem; } } .p-develop__hoverTitle br { display: none; } .p-develop__hoverText { margin-top: 4px; margin-top: 0.4rem; font-weight: 300; font-size: 14px; font-size: 1.4rem; line-height: 1.25; } @media screen and (min-width: 768px) { .p-develop__hoverText { margin-top: 0.8rem; font-size: 1.6rem; } } .p-faq__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-faq__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-faq__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-faq__links { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0 4rem; } } .p-faq__entitle { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-faq__entitle { margin-top: 4.8rem; } } .p-faq__contents { margin-top: 24.5px; margin-top: 2.45rem; } @media screen and (min-width: 768px) { .p-faq__contents { margin-top: 4.7rem; } } .p-faq__bottom { margin-top: 40px; margin-top: 4rem; border-radius: 1.6rem; border: 2px solid #4880E0; overflow: hidden; width: 100%; margin-inline: auto; } @media screen and (min-width: 768px) { .p-faq__bottom { margin-top: 6rem; max-width: 85rem; } } .p-faq__bottomTitle { min-height: 46px; min-height: 4.6rem; padding-bottom: 2px; padding-bottom: 0.2rem; background-color: #4880E0; color: #FFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-faq__bottomTitle { font-size: 2rem; } } .p-faq__bottomText { padding: 16px 14px 14px; padding: 1.6rem 1.4rem 1.4rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-faq__bottomText { padding: 1.6rem 4rem 1.4rem; } } .p-faq__bottomText a { color: #4880E0; text-decoration: underline; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .p-faq__bottomText a:hover { opacity: 0.8; } @media screen and (min-width: 768px) { .p-footer__entries { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-footer__entry { height: 80px; height: 8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; color: #FFF; font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; background-color: #4880E0; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-footer__entry { width: 50%; height: 12rem; font-size: 3.2rem; } } .p-footer__entry--career { background-color: #3149A1; } .p-footer__entry:hover { background-color: #4572C0; } .p-footer__entry--career:hover { background-color: #273770; } .p-footer__container { background-color: #333; color: #FFF; padding-top: 40px; padding-top: 4rem; padding-bottom: 37.5px; padding-bottom: 3.75rem; } @media screen and (min-width: 768px) { .p-footer__container { padding-top: 8rem; padding-bottom: 7.85rem; } } .p-footer--corporate .p-footer__container { background-color: #F5F5F5; color: #333; } .p-footer__contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 20.5px; row-gap: 2.05rem; } @media screen and (min-width: 768px) { .p-footer__contents { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .p-footer__logo { width: 100%; max-width: 320px; max-width: 32rem; display: block; margin-inline: auto; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media screen and (min-width: 768px) { .p-footer__logo { max-width: 48rem; -webkit-margin-start: 0; margin-inline-start: 0; -webkit-margin-end: 0; margin-inline-end: 0; } } .p-footer__address { margin-top: 16.5px; margin-top: 1.65rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; margin-inline: auto; font-size: 12px; font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-footer__address { margin-top: 2.45rem; width: auto; font-size: 1.4rem; } } .p-footer__contact { margin-top: 6.5px; margin-top: 0.65rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1.55rem; -moz-column-gap: 1.55rem; column-gap: 1.55rem; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-footer__contact { font-size: 1.4rem; -webkit-column-gap: 2.3rem; -moz-column-gap: 2.3rem; column-gap: 2.3rem; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .p-footer__contact a { -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .p-footer__contact a:hover { opacity: 0.6; } .p-footer__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px 15.5px; gap: 1.2rem 1.55rem; padding: 0 20px; padding: 0 2rem; } @media screen and (min-width: 768px) { .p-footer__links { margin: -0.15rem 0 0 auto; width: 100%; max-width: 60.3rem; -ms-flex-negative: 0; flex-shrink: 0; display: grid; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; grid-template-columns: 12.3rem 16.9rem 15.4rem; -webkit-column-gap: 7.9rem; -moz-column-gap: 7.9rem; column-gap: 7.9rem; padding: 0; } } @media screen and (max-width: 767px) { .p-footer--corporate .p-footer__links { padding: 0 1.5rem; } } @media screen and (min-width: 768px) { .p-footer--corporate .p-footer__links { max-width: 58.7rem; grid-template-columns: 9.3rem 9.3rem 24.7rem; -webkit-column-gap: 7.8rem; -moz-column-gap: 7.8rem; column-gap: 7.8rem; } } .p-footer__linksBlock { display: contents; } @media screen and (min-width: 768px) { .p-footer__linksBlock { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 0.4rem; } } .p-footer__link { font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; border-bottom: 1px solid transparent; -webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-out; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .p-footer__link:hover { border-color: #FFF; } .p-footer--corporate .p-footer__link:hover { border-color: #3E40A4; } .p-footer__copyright { padding: 11px 15px 75px; padding: 1.1rem 1.5rem 7.5rem; } @media screen and (min-width: 768px) { .p-footer__copyright { padding: 2.2rem 2rem; } } .p-footer--corporate .p-footer__copyright { background-color: #333; color: #FFF; } .p-footer__copyright small { display: block; font-family: "Noto Sans JP", sans-serif; font-weight: 300; font-size: 12px; font-size: 1.2rem; text-align: center; line-height: 1.45; } @media screen and (min-width: 768px) { .p-footer__copyright small { font-size: 1.4rem; letter-spacing: 0.017em; } } .p-fv { margin-top: 80px; margin-top: 8rem; position: relative; height: calc(100vh - 8rem); } @media screen and (min-width: 768px) { .p-fv { margin-top: 13rem; height: auto; } } @media screen and (min-width: 768px) { .corporate .p-fv { height: calc(100vh - 13rem); } } .p-fv__main { position: relative; } .p-fv__main::before { padding-top: calc(62.5vh - 5rem); } @media screen and (min-width: 768px) { .p-fv__main::before { padding-top: calc(66.66667vh - 8.66667rem); } } @media screen and (min-width: 768px) { .p-fv__imgs { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-fv__sub { position: relative; } @media screen and (min-width: 768px) { .p-fv__sub { width: 0.3333333333; } } .p-fv__sub::before { padding-top: calc(12.5vh - 1rem); } @media screen and (min-width: 768px) { .p-fv__sub::before { padding-top: calc(33.33333vh - 4.33333rem); } } .swiper.p-fv__swiper { padding-bottom: 20px; padding-bottom: 2rem; } @media screen and (min-width: 768px) { .swiper.p-fv__swiper { padding-bottom: 3.1rem; } } .p-fv__title { position: absolute; top: 48.5%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; background-color: rgba(62, 64, 164, .8); color: #FFF; font-weight: 500; font-size: min(5.3333333333vw, 30px); font-size: min(5.3333333333vw, 3rem); z-index: 2; text-align: center; letter-spacing: 0.1em; padding: 5px 0; padding: 0.5rem 0; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-fv__title { top: 48%; font-size: 4.8rem; padding: 0.4rem 0; } } .p-fv__mainTitle { padding: 0 16px; padding: 0 1.6rem; color: #FFF; font-size: min(8.5333333333vw, 42px); font-size: min(8.5333333333vw, 4.2rem); font-weight: 400; letter-spacing: 0.1em; position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(62, 64, 164, .8); } @media screen and (min-width: 768px) { .p-fv__mainTitle { padding: 0.4rem 5.5555555556vw; font-size: 4.8rem; } } .p-fv__subtitle { width: 200px; width: 20rem; position: absolute; bottom: 8px; bottom: 0.8rem; left: 16px; left: 1.6rem; color: #FFF; font-size: 16px; font-size: 1.6rem; border-bottom: 1px solid #FFF; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-fv__subtitle { bottom: 1.7rem; font-size: 2.4rem; } } .p-fv__img::before { padding-top: calc(100vh - 8rem); } @media screen and (min-width: 768px) { .p-fv__img::before { padding-top: 50.5555555556%; } } .p-hamburger::after { content: ""; display: block; position: absolute; bottom: -17px; bottom: -1.7rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 35px; width: 3.5rem; height: 9.5px; height: 0.95rem; background-image: url(../images/common/menu.png); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-transition: background-image 0.3s ease-out; transition: background-image 0.3s ease-out; } .p-header--corporate .p-hamburger.open::after { background-image: url(../images/common/menu-white.png); } .p-hamburger span { display: block; position: absolute; width: 100%; height: 2px; background-color: #333; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-header--corporate .p-hamburger span { -webkit-transition: background-color 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: background-color 0.3s ease-out, -webkit-transform 0.3s ease-out; transition: background-color 0.3s ease-out, transform 0.3s ease-out; transition: background-color 0.3s ease-out, transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-header--corporate .p-hamburger.open span { background-color: #FFF; } .p-hamburger span:first-child { top: 0; } .p-hamburger span:nth-child(2) { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-hamburger span:last-child { bottom: 0; } .p-hamburger.open span { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-hamburger.open span:first-child { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .p-hamburger.open span:nth-child(2) { display: none; } .p-hamburger.open span:last-child { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .p-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; background-color: #FFF; height: 80px; height: 8rem; } @media screen and (min-width: 768px) { .p-header { height: 13rem; } } @media screen and (max-width: 767px) { .p-header__inner.l-inner { max-width: none; } } .p-header__contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .p-header__logo { width: 100%; max-width: 270px; max-width: 27rem; display: block; position: relative; margin-top: 14px; margin-top: 1.4rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-header__logo { margin-top: 2.4rem; max-width: 48rem; } } .p-header--corporate .p-header__logo { height: 27px; height: 2.7rem; } @media screen and (min-width: 768px) { .p-header--corporate .p-header__logo { height: 4.8rem; } } .p-header--corporate .p-header__logo img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-header--corporate .p-header__logo img { -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .p-header--corporate .p-header__logo .open { opacity: 0; } .p-header--corporate .p-header__logo.open .open { opacity: 1; } .p-header--corporate .p-header__logo.open .close { opacity: 0; } .p-header__logo:hover { opacity: 0.6; } .p-header__logo::after { content: "採用サイト"; position: absolute; bottom: -26px; bottom: -2.6rem; left: 0; font-size: 10px; font-size: 1rem; letter-spacing: 0.1em; display: block; text-align: center; color: #4880E0; border: 1px solid #4880E0; padding: 4px; padding: 0.4rem; line-height: 1; width: 120px; width: 12rem; } @media screen and (min-width: 768px) { .p-header__logo::after { left: auto; right: -12.1rem; bottom: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); font-size: 1.2rem; width: 11.3rem; padding: 0.5rem; } } .p-header--corporate .p-header__logo::after { content: "コーポレートサイト"; color: #3E40A4; border-color: #3E40A4; -webkit-transition: color 0.3s ease-out, border-color 0.3s ease-out; transition: color 0.3s ease-out, border-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-header--corporate .p-header__logo::after { width: 16.6rem; right: -17.4rem; } } .p-header--corporate .p-header__logo.open::after { color: #FFF; border-color: #FFF; } .p-header__hamburger { position: relative; margin: 16px 2px 0 auto; margin: 1.6rem 0.2rem 0 auto; width: 32px; width: 3.2rem; height: 18px; height: 1.8rem; } @media screen and (min-width: 768px) { .p-header__hamburger { display: none; } } .p-internship__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-internship__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } @media screen and (max-width: 767px) { .p-internship__heading--post { padding-bottom: 2.2rem; } } .swiper.p-internship__swiper { margin-top: 54.5px; margin-top: 5.45rem; padding-bottom: 19.5px; padding-bottom: 1.95rem; } @media screen and (min-width: 768px) { .swiper.p-internship__swiper { margin-top: 4.75rem; padding-bottom: 3.15rem; } } .p-internship__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-internship__img::before { padding-top: 66.75%; } } .p-internship__img img { border-radius: 1.6rem; } .p-internship__description { margin-top: 20.5px; margin-top: 2.05rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-internship__description { margin-top: 4.45rem; } } .p-internship__program { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-internship__program { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-internship__course { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-internship__course { margin-top: 4.75rem; } } .p-internship__recruiting { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-internship__recruiting { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-internship__recruitingContents { margin-top: 16.5px; margin-top: 1.65rem; } @media screen and (min-width: 768px) { .p-internship__recruitingContents { margin-top: 3.4rem; } } .p-internship__recruitingList { padding: 7.5px 0 8px; padding: 0.75rem 0 0.8rem; border-bottom: 2px solid #F2F2F2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 7.5px; row-gap: 0.75rem; } @media screen and (min-width: 768px) { .p-internship__recruitingList { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 1.55rem 0 1.6rem 0; } } .p-internship__recruitingTitle { font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-internship__recruitingTitle { width: 27.6rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-internship__recruitingText { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; margin-right: -2px; margin-right: -0.2rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-internship__recruitingText { margin-top: 0.05rem; } } .p-internship__contact { margin-top: 24px; margin-top: 2.4rem; display: block; width: 100%; max-width: 320px; max-width: 32rem; background-color: #4880E0; color: #FFF; font-size: 14px; font-size: 1.4rem; border-radius: 99.9rem; font-weight: 500; padding: 9.5px; padding: 0.95rem; letter-spacing: 0.1em; text-align: center; margin-inline: auto; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-internship__contact { margin-top: 4.8rem; } } .p-internship__contact:hover { background-color: #4572C0; } .p-internship__headingBlock { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-internship__headingBlock { margin-top: 4.75rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-internship__headingImg { max-width: 48rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-internship__headingImg::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-internship__headingImg::before { padding-top: 66.6666666667%; } } .p-internship__headingImg img { border-radius: 1.6rem; } .p-internship__headingText { white-space: pre-wrap; } .p-internship__outline { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-internship__outline { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-internship__outlineContents { margin-top: 24.5px; margin-top: 2.45rem; } @media screen and (min-width: 768px) { .p-internship__outlineContents { margin-top: 4.75rem; } } .p-internship__outlineList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 8px; row-gap: 0.8rem; } @media screen and (min-width: 768px) { .p-internship__outlineList { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 1.6rem; } } .p-internship__outlineList:nth-of-type(n+2) { margin-top: 16px; margin-top: 1.6rem; } .p-internship__outlineTheme { border-radius: 0.8rem; background-color: #4880E0; color: #FFF; text-align: center; font-size: 16px; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.1em; padding: 8px; padding: 0.8rem; } @media screen and (min-width: 768px) { .p-internship__outlineTheme { width: 16rem; -ms-flex-negative: 0; flex-shrink: 0; font-size: 2rem; padding: 0.9rem; } } .p-internship__outlineText { font-size: 16px; font-size: 1.6rem; line-height: 1.25; font-weight: 500; } @media screen and (min-width: 768px) { .p-internship__outlineText { font-size: 2.4rem; margin-top: 0.85rem; } } .p-internship__curriculum { margin-top: 60px; margin-top: 6rem; } @media screen and (min-width: 768px) { .p-internship__curriculum { margin-top: 11.95rem; } } .p-internship__curriculumContents { margin-top: 24.5px; margin-top: 2.45rem; } @media screen and (min-width: 768px) { .p-internship__curriculumContents { margin-top: 4.75rem; } } .p-internship__curriculumBottomText { margin-top: 24px; margin-top: 2.4rem; font-weight: 500; line-height: 1.25; font-size: 16px; font-size: 1.6rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-internship__curriculumBottomText { margin-top: 1.6rem; font-size: 2rem; } } .p-internship__album { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-internship__album { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-internship__albumContents { margin-top: 23.5px; margin-top: 2.35rem; display: grid; row-gap: 28px; row-gap: 2.8rem; } @media screen and (min-width: 768px) { .p-internship__albumContents { margin-top: 4.75rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-internship__albumImg::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-internship__albumImg::before { padding-top: 66.75%; } } .p-internship__albumImg img { border-radius: 1.6rem; } .p-internship__albumText { margin-top: 16px; margin-top: 1.6rem; line-height: 1.25; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; } .p-internshipItem { display: block; border-radius: 1.6rem; -webkit-box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); overflow: hidden; } @media screen and (min-width: 768px) { .p-internshipItem { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-internshipItem__img { overflow: hidden; } @media screen and (min-width: 768px) { .p-internshipItem__img { max-width: 40rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-internshipItem__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-internshipItem__img::before { padding-top: 66.75%; } } .p-internshipItem__img img { top: 0; left: 0; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-internshipItem:hover .p-internshipItem__img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .p-internshipItem__body { background-color: #FFF; width: 100%; padding: 42px 16px 41px; padding: 4.2rem 1.6rem 4.1rem; } @media screen and (min-width: 768px) { .p-internshipItem__body { padding: 1.5rem 4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .p-internshipItem__course { font-weight: 500; line-height: 1.25; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-internshipItem__course { font-size: 2rem; } } .p-internshipItem__theme { font-weight: 500; line-height: 1.25; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; padding-bottom: 4px; padding-bottom: 0.4rem; border-bottom: 2px solid #4880E0; } @media screen and (min-width: 768px) { .p-internshipItem__theme { margin-top: 0.35rem; font-size: 2.4rem; padding-bottom: 0.85rem; border-width: 4px; } } .p-internshipItem__lists { position: relative; margin-top: 8.5px; margin-top: 0.85rem; } @media screen and (min-width: 768px) { .p-internshipItem__lists { margin-top: 1.6rem; } } .p-internshipItem__list { font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-internshipItem__list { font-size: 1.6rem; } } .p-internshipItem__list:nth-of-type(n+2) { margin-top: 8.5px; margin-top: 0.85rem; } @media screen and (min-width: 768px) { .p-internshipItem__list:nth-of-type(n+2) { margin-top: 1.6rem; } } .p-internshipItem__list p:nth-of-type(2) { margin-top: 2px; margin-top: 0.2rem; } @media screen and (min-width: 768px) { .p-internshipItem__list p:nth-of-type(2) { margin-top: 0.4rem; } } .p-internshipItem__arrow { width: 32px; width: 3.2rem; height: 32px; height: 3.2rem; position: absolute; bottom: 3px; bottom: 0.3rem; right: -1px; right: -0.1rem; border: 1px solid #D3D3D3; border-radius: 50%; -webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } @media screen and (min-width: 768px) { .p-internshipItem__arrow { bottom: 0.6rem; right: 0; } } .p-internshipItem:hover .p-internshipItem__arrow { border-color: #4880E0; } .p-internshipItem__arrow::after { content: ""; display: block; width: 10px; width: 1rem; height: 10px; height: 1rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url(../images/icon/button-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } .p-interview__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-interview__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-interview__headingBlock { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-interview__headingBlock { margin-top: 4.75rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-interview__img { max-width: 64rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-interview__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-interview__img::before { padding-top: 66.71875%; } } .p-interview__img img { border-radius: 1.6rem; } @media screen and (min-width: 768px) { .p-interview__wrap { margin-top: -0.4rem; } } @media screen and (min-width: 768px) { .p-interview__wrap--single { margin: 0; } } .p-interview__theme { font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interview__theme { font-size: 3.2rem; line-height: 1.5; } } .p-interview__crossText { margin-top: 12px; margin-top: 1.2rem; white-space: pre-wrap; } .p-interview__info { margin-top: 12px; margin-top: 1.2rem; border-top: 2px solid #4880E0; padding-top: 4px; padding-top: 0.4rem; } @media screen and (min-width: 768px) { .p-interview__info { margin-top: 4rem; border-width: 4px; padding-top: 1.6rem; } } .p-interview__info--cross { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 3.9rem; -moz-column-gap: 3.9rem; column-gap: 3.9rem; } @media screen and (min-width: 768px) { .p-interview__info--cross { -webkit-column-gap: 7rem; -moz-column-gap: 7rem; column-gap: 7rem; } } .p-interview__infoBlock:nth-of-type(2) { position: relative; } .p-interview__infoBlock:nth-of-type(2)::before { content: ""; display: block; width: 24px; width: 2.4rem; height: 24px; height: 2.4rem; background-image: url(../images/icon/cross.svg); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: -32px; left: -3.2rem; } @media screen and (min-width: 768px) { .p-interview__infoBlock:nth-of-type(2)::before { width: 4rem; height: 4rem; left: -5.6rem; } } .p-interview__position { color: #888; font-weight: 500; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; line-height: 1.25; } @media screen and (min-width: 768px) { .p-interview__position { font-size: 2rem; } } @media screen and (min-width: 768px) { .p-interview__wrap--single .p-interview__position { font-size: 2.4rem; } } .p-interview__name { font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; line-height: 1.25; } @media screen and (min-width: 768px) { .p-interview__name { font-size: 3.2rem; } } .p-interview__wrap--single .p-interview__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.5rem; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .p-interview__posts { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-interview__posts { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-interview__items { margin-top: 24.5px; margin-top: 2.45rem; display: grid; gap: 24px; gap: 2.4rem; } @media screen and (min-width: 768px) { .p-interview__items { margin-top: 4.75rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-interview__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-interview__link { margin-top: 4rem; } } .p-interview__contents { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-interview__contents { padding-top: 12rem; padding-bottom: 12rem; } } .p-interview__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-interview__block { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-interview__block:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } .p-interview__block:nth-of-type(n+2) { margin-top: 40px; margin-top: 4rem; } @media screen and (min-width: 768px) { .p-interview__block:nth-of-type(n+2) { margin-top: 8rem; } } @media screen and (min-width: 768px) { .p-interview__blockImg { max-width: 48rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-interview__blockImg::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-interview__blockImg::before { padding-top: 66.6666666667%; } } .p-interview__blockImg img { border-radius: 1.6rem; } .p-interview__blockTheme { font-size: 20px; font-size: 2rem; line-height: 1.25; font-weight: 500; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interview__blockTheme { font-size: 3.2rem; line-height: 1.5; } } .p-interview__blockText { margin-top: 12px; margin-top: 1.2rem; margin-right: -1px; margin-right: -0.1rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-interview__blockText { margin-top: 2.4rem; margin-right: -0.2rem; } } .p-interview__weeks { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-interview__weeks { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-interview__container { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24.5px; row-gap: 2.45rem; } @media screen and (min-width: 768px) { .p-interview__container { margin-top: 4.75rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } @media screen and (min-width: 768px) { .p-interview__schedule { width: 100%; max-width: 64rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-interview__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 4px; row-gap: 0.4rem; } @media screen and (min-width: 768px) { .p-interview__list { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0 0.8rem; } } .p-interview__list:nth-of-type(n+2) { margin-top: 8px; margin-top: 0.8rem; } @media screen and (min-width: 768px) { .p-interview__list:nth-of-type(n+2) { margin-top: 1.6rem; } } .p-interview__day { border-radius: 0.8rem; background-color: #4880E0; color: #FFF; padding: 7px 5px; padding: 0.7rem 0.5rem; border: 1px solid #4880E0; font-size: 16px; font-size: 1.6rem; text-align: center; font-weight: 500; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interview__day { width: 100%; max-width: 16rem; -ms-flex-negative: 0; flex-shrink: 0; font-size: 2rem; padding: 1.6rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .p-interview__action { border-radius: 0.8rem; background-color: #FFF; border: 1px solid #4880E0; padding: 8.5px 15px; padding: 0.85rem 1.5rem; font-weight: 500; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interview__action { width: 100%; font-size: 1.6rem; padding: 1.9rem 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .p-interview__scheduleTheme { font-size: 20px; font-size: 2rem; font-weight: 500; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interview__scheduleTheme { font-size: 3.2rem; } } .p-interviewItem { display: block; border-radius: 1.6rem; } .p-interviewItem__img::before { padding-top: 133.2361516035%; } @media screen and (min-width: 768px) { .p-interviewItem__img::before { padding-top: 133.4415584416%; } } @media screen and (min-width: 768px) { .p-interviewItem__img::after { content: ""; display: block; position: absolute; z-index: 1; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(51, 51, 51, 0)), to(#333)); background: linear-gradient(rgba(51, 51, 51, 0) 0%, #333 100%); width: 100%; height: 16rem; border-radius: 0 0 1.6rem 1.6rem; } } .p-interviewItem__img img { border-radius: 1.6rem; } .p-interviewItem__filter { width: 100%; position: absolute; z-index: 2; left: 0; bottom: 0; background-color: rgba(72, 128, 224, .8); border-radius: 0 0 1.6rem 1.6rem; padding: 24px 16px 24.5px; padding: 2.4rem 1.6rem 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #FFF; } @media screen and (min-width: 768px) { .p-interviewItem__filter { opacity: 0; background-color: rgba(72, 128, 224, .5); border-radius: 1.6rem; height: 100%; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } } @media screen and (min-width: 768px) { .p-interviewItem:hover .p-interviewItem__filter { opacity: 1; } } .p-interviewItem__words { font-weight: 500; font-family: "Noto Sans JP", sans-serif; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; border-bottom: 2px solid #FFF; padding-bottom: 4px; padding-bottom: 0.4rem; } @media screen and (min-width: 768px) { .p-interviewItem__words { font-size: 2rem; padding-bottom: 0.8rem; } } .p-interviewItem__position { margin-top: 16.5px; margin-top: 1.65rem; font-size: 14px; font-size: 1.4rem; font-family: "Noto Sans JP", sans-serif; font-weight: 500; letter-spacing: 0.1em; line-height: 1.25; } @media screen and (min-width: 768px) { .p-interviewItem__position { margin-top: 2.4rem; font-size: 1.6rem; } } .p-interviewItem__name { font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.7rem; -moz-column-gap: 0.7rem; column-gap: 0.7rem; } @media screen and (min-width: 768px) { .p-interviewItem__name { margin-top: 0.35rem; font-size: 2.4rem; } } .p-interviewPost { display: block; } @media screen and (min-width: 768px) { .p-interviewPost { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .p-interviewPost__img { overflow: hidden; border-radius: 1.6rem; -ms-flex-negative: 0; flex-shrink: 0; } .p-interviewPost__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-interviewPost__img::before { padding-top: 66.75%; } } .p-interviewPost__img img { top: 0; left: 0; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-interviewPost:hover .p-interviewPost__img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .p-interviewPost__body { padding-top: 8px; padding-top: 0.8rem; } @media screen and (min-width: 768px) { .p-interviewPost__body { height: 100%; padding-top: 1.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } } .p-interviewPost__title { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interviewPost__title { font-size: 2rem; margin-bottom: auto; } } .p-interviewPost__bottom { margin-top: 8px; margin-top: 0.8rem; border-left: 8px solid #4880E0; border-bottom: 2px solid #4880E0; padding: 1.5px 0 4px 6px; padding: 0.15rem 0 0.4rem 0.6rem; position: relative; } @media screen and (min-width: 768px) { .p-interviewPost__bottom { margin-top: 1.2rem; border-left-width: 12px; padding: 0.05rem 0 0.8rem 0.8rem; } } .p-interviewPost__position { color: #888; font-size: 12px; font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-interviewPost__position { font-size: 1.4rem; } } .p-interviewPost__name { margin-top: 4px; margin-top: 0.4rem; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.7rem; -moz-column-gap: 0.7rem; column-gap: 0.7rem; } @media screen and (min-width: 768px) { .p-interviewPost__name { font-size: 1.6rem; } } .p-interviewPost__arrow { width: 32px; width: 3.2rem; height: 32px; height: 3.2rem; position: absolute; top: 1.5px; top: 0.15rem; right: 8px; right: 0.8rem; border: 1px solid #D3D3D3; border-radius: 50%; -webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } @media screen and (min-width: 768px) { .p-interviewPost__arrow { top: 0.3rem; } } .p-interviewPost:hover .p-interviewPost__arrow { border-color: #4880E0; } .p-interviewPost__arrow::after { content: ""; display: block; width: 10px; width: 1rem; height: 10px; height: 1rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url(../images/icon/button-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } .p-item { border-radius: 1.6rem; -webkit-box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); } .p-item__img { display: block; overflow: hidden; border-radius: 1.6rem 1.6rem 0 0; } .p-item__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-item__img::before { padding-top: 66.75%; } } .p-item__img img { top: 0; left: 0; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-item__img:hover img, .p-item--related:hover .p-item__img img, .p-item--interview:hover .p-item__img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .p-item__body { padding: 14.5px 16px 15.5px; padding: 1.45rem 1.6rem 1.55rem; background-color: #FFF; border-radius: 0 0 1.6rem 1.6rem; } .p-item--related .p-item__body { padding-top: 16px; padding-top: 1.6rem; padding-bottom: 34px; padding-bottom: 3.4rem; } .p-item--interview .p-item__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-top: 16px; padding-top: 1.6rem; padding-bottom: 16px; padding-bottom: 1.6rem; min-height: 160px; min-height: 16rem; } @media screen and (min-width: 768px) { .p-item--interview .p-item__body { padding-top: 2.4rem; padding-bottom: 2.4rem; min-height: 17.2rem; } } .p-item__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; } .p-item__time { display: block; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; color: #888; } @media screen and (min-width: 768px) { .p-blog__single .p-item__time { font-size: 1.6rem; } } .p-item__category { background-color: #4880E0; color: #FFF; font-size: 12px; font-size: 1.2rem; letter-spacing: 0.1em; padding: 0 7.5px; padding: 0 0.75rem; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-blog__single .p-item__category { font-size: 1.4rem; } } .p-item__category:hover { background-color: #4572C0; } .p-item__title { margin-top: 6.5px; margin-top: 0.65rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; letter-spacing: 0.1em; } .p-item--related .p-item__title { margin-top: 0; } .p-item--interview .p-item__title { margin-top: 0; -webkit-line-clamp: 3; } .p-item__text { margin-top: 8.5px; margin-top: 0.85rem; font-size: 14px; font-size: 1.4rem; font-family: "Noto Sans JP", sans-serif; font-weight: 300; letter-spacing: 0.1em; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .p-item__position { margin-top: auto; font-size: 12px; font-size: 1.2rem; line-height: 1.25; letter-spacing: 0.1em; color: #888; } .p-item__name { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.7rem; -moz-column-gap: 0.7rem; column-gap: 0.7rem; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-item--content { display: -webkit-box; display: -ms-flexbox; display: flex; } } @media screen and (min-width: 768px) { .p-item--content .p-item__img { max-width: 32rem; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 1.6rem 0 0 1.6rem; } } @media screen and (min-width: 768px) { .p-item--content .p-item__img::before { padding-top: 75%; } } @media screen and (min-width: 768px) { .p-item--content .p-item__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 0 1.6rem 1.6rem 0; } } @media screen and (min-width: 768px) { .p-item--content .p-item__title { margin-top: 0.2rem; line-height: 1.5; } } @media screen and (min-width: 768px) { .p-item--content .p-item__text { margin-top: 0.4rem; margin-bottom: 0; line-height: 2; } } .p-list__item { padding: 12px 0; padding: 1.2rem 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 6px; row-gap: 0.6rem; } @media screen and (min-width: 768px) { .p-list__item { padding: 1.5rem 2.4rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0; } } .p-list__item:not(:last-of-type) { border-bottom: 2px solid #F2F2F2; } .p-list__theme { font-weight: 500; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-list__theme { width: 17.6rem; -ms-flex-negative: 0; flex-shrink: 0; font-size: 2rem; } } @media screen and (min-width: 768px) { .p-list--history .p-list__theme { width: 27.6rem; } } .p-list--base .p-list__item { border-bottom: 2px solid #F2F2F2; } @media screen and (min-width: 768px) { .p-list--base .p-list__theme { width: auto; } } @media screen and (min-width: 768px) { .p-list--office .p-list__theme { width: 19.6rem; } } .p-list__description { font-weight: 300; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-list__description { margin-top: 0.3rem; font-size: 1.6rem; } } @media screen and (min-width: 768px) { .p-list--base .p-list__description { margin-left: auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; -ms-flex-negative: 0; flex-shrink: 0; } } .p-list__description--num { counter-reset: num 0; } .p-list__description--num p { display: -webkit-box; display: -ms-flexbox; display: flex; } .p-list__description--num p::before { counter-increment: num 1; content: counter(num) "."; } .p-list__flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } .p-list__flex p:first-of-type { -ms-flex-negative: 0; flex-shrink: 0; } .p-list__flex:nth-of-type(n+2) { margin-top: 16px; margin-top: 1.6rem; } .p-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: opacity 0.6s ease-out, visibility 0s 1s, -webkit-transform 0.4s ease-out; transition: opacity 0.6s ease-out, visibility 0s 1s, -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out, opacity 0.6s ease-out, visibility 0s 1s; transition: transform 0.4s ease-out, opacity 0.6s ease-out, visibility 0s 1s, -webkit-transform 0.4s ease-out; overflow-y: scroll; opacity: 0; visibility: hidden; background-color: #FFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .p-nav { display: block; position: static; height: inherit; opacity: 1; visibility: visible; overflow: visible; -webkit-transform: none; transform: none; margin-left: auto; background-color: transparent; z-index: auto; } } .p-nav.open { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); -webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.4s ease-out; transition: opacity 0.6s ease-out, -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out, opacity 0.6s ease-out; transition: transform 0.4s ease-out, opacity 0.6s ease-out, -webkit-transform 0.4s ease-out; } .p-nav__container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: inherit; } @media screen and (min-width: 768px) { .p-nav__container { display: block; } } @media screen and (max-width: 767px) { .p-header--corporate .p-nav__container { background-color: #3E40A4; } } .p-nav__items { margin-top: 16.6666666667vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 3.5416666667vh; } @media screen and (min-width: 768px) { .p-nav__items { margin: 2.25rem 0 0 2.4rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 3.1rem; } } @media screen and (min-width: 768px) { .p-nav__items--sp { display: none; } } @media screen and (max-width: 767px) { .p-nav__items--pc { display: none; } } .p-nav__link { font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; display: block; padding-bottom: 2px; padding-bottom: 0.2rem; border-bottom: 1px solid transparent; -webkit-transition: border 0.3s ease-out; transition: border 0.3s ease-out; } @media screen and (min-width: 768px) { .p-nav__link { font-size: 1.4rem; } } @media screen and (max-width: 767px) { .p-header--corporate .p-nav__link { color: #FFF; } } .p-nav__link:hover { border-color: #4880E0; } .p-header--corporate .p-nav__link:hover { border-color: #FFF; } @media screen and (min-width: 768px) { .p-header--corporate .p-nav__link:hover { border-color: #3E40A4; } } .p-nav__entries { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: auto; } @media screen and (min-width: 768px) { .p-nav__entries { margin-top: 2.8rem; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-column-gap: 1.6rem; -moz-column-gap: 1.6rem; column-gap: 1.6rem; } } @media screen and (min-width: 768px) { .p-header--corporate .p-nav__entries { margin-top: 2.4rem; } } .p-nav .p-nav__entries { display: none; } @media screen and (min-width: 768px) { .p-nav .p-nav__entries { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-nav__entries--following { margin: 0; position: fixed; bottom: 0; left: 0; z-index: 150; } @media screen and (min-width: 768px) { .p-nav__entries--following { display: none; } } .p-nav__entry { width: 50%; height: 64px; height: 6.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #FFF; font-size: 14px; font-size: 1.4rem; font-weight: 500; text-align: center; background-color: #4880E0; letter-spacing: 0.1em; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-nav__entry { height: 4rem; border-radius: 99.9rem; width: 100%; max-width: 24rem; } } .p-nav__entry--career { background-color: #3149A1; } .p-nav__entry:hover { background-color: #4572C0; } .p-nav__entry--career:hover { background-color: #273770; } .p-nav__contact { width: 100%; height: 64px; height: 6.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; color: #FFF; font-size: 16px; font-size: 1.6rem; font-weight: 500; text-align: center; background-color: #333; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-nav__contact { height: 4.8rem; background-color: #3E40A4; width: 100%; max-width: 20rem; font-size: 1.4rem; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } } .p-nav__contact:hover { background-color: #222470; } .p-nav__contact::before { content: ""; display: block; width: 24px; width: 2.4rem; height: 24px; height: 2.4rem; background-image: url(../images/icon/mail.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .p-nav__contact::before { width: 2rem; height: 2rem; } } .p-news { padding: 8px 0; padding: 0.8rem 0; border-bottom: 2px solid #D9D9D9; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 7px; row-gap: 0.7rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-news { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 1.6rem; padding: 1.55rem 0; } } .p-news:hover { opacity: 0.7; } .p-news__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .p-news__info { -ms-flex-negative: 0; flex-shrink: 0; } } .p-news__time { display: block; width: 101px; width: 10.1rem; font-size: 16px; font-size: 1.6rem; font-weight: 300; } @media screen and (min-width: 768px) { .p-news__time { font-size: 2rem; width: 12.3rem; } } .p-news__category { color: #FFF; background-color: #3E40A4; font-size: 12px; font-size: 1.2rem; min-width: 76px; min-width: 7.6rem; padding: 1.5px 7px; padding: 0.15rem 0.7rem; text-align: center; } @media screen and (min-width: 768px) { .p-news__category { font-size: 1.4rem; min-width: 10.2rem; padding: 0.35rem 0.7rem; } } .p-news__title { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-weight: 300; font-size: 16px; font-size: 1.6rem; line-height: 1.44; } @media screen and (min-width: 768px) { .p-news__title { -webkit-line-clamp: 1; font-size: 2rem; } } .p-news__thumbnail img { height: auto; } .p-person__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-person__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-person__items { margin-top: 24.5px; margin-top: 2.45rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; gap: 1.5rem; } @media screen and (min-width: 768px) { .p-person__items { margin-top: 4.75rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 0 2rem; } } .p-person__text { margin-top: 24px; margin-top: 2.4rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-person__text { margin-top: 4.8rem; } } .p-person__contents { background-color: #EFF5FB; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-person__contents { padding-top: 11.95rem; padding-bottom: 12rem; } } .p-person__blocks { margin-top: 24.5px; margin-top: 2.45rem; } @media screen and (min-width: 768px) { .p-person__blocks { margin-top: 4.75rem; } } .p-person__block { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-person__block { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 4rem; } } .p-person__block:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-person__block:nth-of-type(n+2) { margin-top: 8rem; } } @media screen and (min-width: 768px) { .p-person__block:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } } @media screen and (min-width: 768px) { .p-person__img { max-width: 64rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-person__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-person__img::before { padding-top: 66.71875%; } } .p-person__img img { border-radius: 1.6rem; } @media screen and (min-width: 768px) { .p-person__wrap { margin-top: -0.05rem; } } .p-person__theme { color: #4880E0; font-weight: 500; padding: 0 0 4px 8px; padding: 0 0 0.4rem 0.8rem; border-bottom: 2px solid #4880E0; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-person__theme { font-size: 2.4rem; padding-bottom: 0.45rem; width: 93.4%; } } .p-person__subject { margin-top: 12px; margin-top: 1.2rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-person__subject { margin-top: 2.4rem; font-size: 3.2rem; } } .p-person__blockText { margin-top: 12px; margin-top: 1.2rem; } @media screen and (min-width: 768px) { .p-person__blockText { margin-top: 2.4rem; } } .p-personItem { width: 100%; max-width: calc(50% - 0.75rem); position: relative; border: 2px solid #4880E0; background-color: #FFF; border-radius: 50%; } @media screen and (min-width: 768px) { .p-personItem { max-width: none; } } .p-personItem::before { content: ""; display: block; padding-top: 100%; } .p-personItem p { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-weight: 500; color: #4880E0; font-size: min(4.2666666667vw, 20px); font-size: min(4.2666666667vw, 2rem); letter-spacing: 0.1em; width: 100%; text-align: center; } @media screen and (min-width: 768px) { .p-personItem p { font-size: 2rem; } } .p-products__heading { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-products__heading { padding-top: 8.55rem; padding-bottom: 12rem; } } .p-products__categories { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-products__categories { max-width: 100rem; -webkit-column-gap: 4rem; -moz-column-gap: 4rem; column-gap: 4rem; margin-inline: auto; } } .p-products__categories--construction { -ms-flex-wrap: wrap; flex-wrap: wrap; } @media screen and (min-width: 768px) { .p-products__categories--construction { max-width: 108rem; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .p-products__category { position: relative; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; border: 2px solid #3E40A4; background-color: #3E40A4; padding: 17.5px 0; padding: 1.75rem 0; text-align: center; color: #FFF; font-size: 20px; font-size: 2rem; line-height: 1.25; font-weight: 500; letter-spacing: 0.1em; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-products__category { font-size: 2.4rem; padding: 2.3rem 0; } } .p-products__category:hover { background-color: #222470; } .p-products__category::after { content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 12px; width: 1.2rem; height: 12px; height: 1.2rem; background-color: #FFF; -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%); clip-path: polygon(100% 0, 0% 100%, 100% 100%); } @media screen and (min-width: 768px) { .p-products__category::after { width: 1.6rem; height: 1.6rem; } } .p-products__category span { display: block; font-size: 14px; font-size: 1.4rem; } @media screen and (min-width: 768px) { .p-products__category span { font-size: 1.6rem; } } .p-products__categories--construction .p-products__category { padding: 0; min-height: 64px; min-height: 6.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 767px) { .p-products__categories--construction .p-products__category { width: calc(33.33333% - 0.8rem); } } @media screen and (min-width: 768px) { .p-products__categories--construction .p-products__category { min-height: 8rem; width: 100%; } } .p-products__bridge { margin-top: 32px; margin-top: 3.2rem; } @media screen and (min-width: 768px) { .p-products__bridge { margin-top: 6.4rem; } } .p-products__coastal { background-color: #EFEFEF; padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-products__coastal { padding-top: 12rem; padding-bottom: 12rem; } } .p-products__childBlock { margin-top: 32px; margin-top: 3.2rem; } @media screen and (min-width: 768px) { .p-products__childBlock { margin-top: 6.4rem; } } .p-products__childBlock:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-products__childBlock:nth-of-type(n+2) { margin-top: 4.8rem; } } .p-products__items { margin-top: 24px; margin-top: 2.4rem; display: grid; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-products__items { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 3.2rem; } } .p-products__coastal .p-record { background-color: #FFF; } .p-products__theme { font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-products__theme { font-size: 3.2rem; text-align: center; } } .p-products__description { margin-top: 8px; margin-top: 0.8rem; } @media screen and (min-width: 768px) { .p-products__description { margin-top: 1.6rem; text-align: center; } } .p-post__container { padding-top: 34px; padding-top: 3.4rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-post__container { padding-top: 7.75rem; padding-bottom: 12rem; } } .p-post__block:nth-of-type(n+2) { margin-top: 32px; margin-top: 3.2rem; } @media screen and (min-width: 768px) { .p-post__block:nth-of-type(n+2) { margin-top: 6.4rem; } } .p-post__theme { margin-top: 8px; margin-top: 0.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-weight: 500; line-height: 1.25; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-post__theme { font-size: 2.4rem; } } .p-post__theme::before { content: ""; display: block; width: 6px; width: 0.6rem; background-color: #3E40A4; } @media screen and (min-width: 768px) { .p-post__theme::before { width: 0.8rem; } } .p-post__title { margin-top: 4px; margin-top: 0.4rem; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-post__title { margin-top: 0.8rem; font-size: 3.6rem; } } .p-post__imgs, .p-post__img { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-post__imgs, .p-post__img { margin-top: 4.8rem; } } .p-post__imgs { display: grid; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-post__imgs { grid-template-columns: repeat(2, 1fr); } } .p-post__smallImg img { width: auto; max-height: 220px; max-height: 22rem; margin-inline: auto; } @media screen and (min-width: 768px) { .p-post__smallImg img { max-height: 36rem; } } .p-post__text { margin-top: 24px; margin-top: 2.4rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-post__text { margin-top: 4.8rem; } } .p-post__list { margin-top: 23.5px; margin-top: 2.35rem; } @media screen and (min-width: 768px) { .p-post__list { margin-top: 2.4rem; } } .p-post__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media screen and (min-width: 768px) { .p-post__item { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 0 0.2rem; } } .p-post__item:nth-of-type(n+2) { margin-top: -1px; } @media screen and (min-width: 768px) { .p-post__item:nth-of-type(n+2) { margin-top: 0.2rem; } } .p-post__itemTheme { padding: 9px 8px; padding: 0.9rem 0.8rem; line-height: 1.25; background-color: #3E40A4; color: #FFF; font-weight: 500; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-post__itemTheme { width: 20rem; -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1rem 2.4rem; font-size: 1.6rem; } } .p-post__itemText { padding: 8px; padding: 0.8rem; border: 1px solid #3E40A4; margin-top: -1px; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-post__itemText { margin: 0; width: 100%; padding: 0.9rem 2.4rem; font-size: 1.6rem; } } .p-post__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-post__link { margin-top: 4.8rem; } } .p-post__link a { margin-inline: auto; } .p-post__other { padding-top: 60px; padding-top: 6rem; padding-bottom: 60px; padding-bottom: 6rem; } @media screen and (min-width: 768px) { .p-post__other { padding-top: 12rem; padding-bottom: 12rem; } } .p-post__other--bg { background-color: #EFEFEF; } .p-post__achievements { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-post__achievements { margin-top: 4.8rem; } } .p-post__achievement:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-post__achievement:nth-of-type(n+2) { margin-top: 4rem; } } .p-post__achievementList { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-post__achievementList { margin-top: 2.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; display: grid; grid-template-columns: repeat(2, 1fr); } } .p-post__achievementlink { display: block; color: #3E40A4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 1.2rem; -moz-column-gap: 1.2rem; column-gap: 1.2rem; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; width: -webkit-max-content; width: -moz-max-content; width: max-content; font-weight: 300; } @media screen and (min-width: 768px) { .p-post__achievementlink { font-size: 2rem; text-underline-offset: 3.5px; } } .p-post__achievementlink::before { content: ""; display: block; width: 12px; width: 1.2rem; height: 16px; height: 1.6rem; margin: 2.5px 0 0 2px; margin: 0.25rem 0 0 0.2rem; background-image: url(../images/icon/achievement-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .p-post__achievementlink::before { width: 1.6rem; height: 2.1rem; margin-top: 0.35rem; } } .p-post__achievementlink:nth-of-type(n+2) { margin-top: 8px; margin-top: 0.8rem; } @media screen and (min-width: 768px) { .p-post__achievementlink:nth-of-type(n+2) { margin-top: 0; } } @media screen and (min-width: 768px) { .p-post__achievementlink:nth-of-type(n+3) { margin-top: 0.8rem; } } .p-record { padding: 24px 16px; padding: 2.4rem 1.6rem; background-color: #EFEFEF; } @media screen and (min-width: 768px) { .p-record { padding-bottom: 6.7rem; } } .p-record__theme { background-color: #3E40A4; padding: 4px 8px; padding: 0.4rem 0.8rem; color: #FFF; font-weight: 500; font-size: 20px; font-size: 2rem; line-height: 1.25; letter-spacing: 0.1em; } .p-record__body { margin-top: 16px; margin-top: 1.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 16px; row-gap: 1.6rem; } @media screen and (min-width: 768px) { .p-record__body { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 1.6rem; } } @media screen and (min-width: 768px) { .p-record__img { max-width: 24rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-record__img::before { padding-top: 65.7142857143%; } @media screen and (min-width: 768px) { .p-record__img::before { padding-top: 75%; } } @media screen and (min-width: 768px) { .p-record__wrap { margin-right: auto; } } .p-record__title { font-size: 16px; font-size: 1.6rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; white-space: pre-wrap; } .p-record__text { margin-top: 4px; margin-top: 0.4rem; font-size: 14px; font-size: 1.4rem; font-weight: 300; line-height: 2; letter-spacing: 0.1em; white-space: pre-wrap; } .p-record__link { margin-top: 8px; margin-top: 0.8rem; display: block; width: 160px; width: 16rem; background-color: #3E40A4; color: #FFF; font-size: 16px; font-size: 1.6rem; text-align: center; padding: 4px; padding: 0.4rem; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } .p-record__link:hover { background-color: #222470; } .p-record__posts { margin-top: 8px; margin-top: 0.8rem; } .p-record__post { display: block; color: #3E40A4; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.2rem; -moz-column-gap: 0.2rem; column-gap: 0.2rem; font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; font-weight: 300; } .p-record__post::before { content: ""; display: block; width: 11px; width: 1.1rem; height: 14px; height: 1.4rem; margin: 2px 0 0 2px; margin: 0.2rem 0 0 0.2rem; background-image: url(../images/icon/achievement-arrow.svg); background-repeat: no-repeat; background-size: cover; background-position: center; -ms-flex-negative: 0; flex-shrink: 0; } .p-record__post:nth-of-type(n+2) { margin-top: 8px; margin-top: 0.8rem; } .p-related--bg { background-color: #EFF5FB; } .p-related__items { margin-top: 24.5px; margin-top: 2.45rem; display: grid; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-related__items { margin-top: 4.75rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-relatedItem { display: block; } .p-relatedItem__img { overflow: hidden; } .p-relatedItem__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-relatedItem__img::before { padding-top: 66.75%; } } .p-relatedItem__img img { top: 0; left: 0; -webkit-transform: none; transform: none; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-relatedItem:hover .p-relatedItem__img img { -webkit-transform: scale(1.05); transform: scale(1.05); } .p-relatedItem__title { margin-top: 8px; margin-top: 0.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 0.8rem; -moz-column-gap: 0.8rem; column-gap: 0.8rem; font-weight: 500; line-height: 1.25; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-relatedItem__title { font-size: 2.4rem; } } .p-relatedItem__title::before { content: ""; display: block; width: 6px; width: 0.6rem; background-color: #3E40A4; } @media screen and (min-width: 768px) { .p-relatedItem__title::before { width: 0.8rem; } } .p-side { width: 100%; } @media screen and (min-width: 768px) { .p-side { max-width: 36rem; } } .p-side__search { background-color: #FFF; padding: 8px 19px; padding: 0.8rem 1.9rem; font-weight: 500; max-width: 560px; max-width: 56rem; margin-inline: auto; font-size: 14px; font-size: 1.4rem; border-radius: 0.8rem; } .p-side__search--single { background-color: #EFF5FB; } .p-side__search form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .p-side__search input#s { width: 100%; } .p-side__search input[type=submit] { color: transparent; width: 29px; width: 2.9rem; height: 24px; height: 2.4rem; background-image: url(../images/icon/search.svg); background-repeat: no-repeat; background-size: cover; background-position: center; } .p-side__block:nth-of-type(n+2) { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-side__block:nth-of-type(n+2) { margin-top: 4rem; } } .p-side__title { border-radius: 0.8rem; background-color: #4880E0; padding: 9px 16px; padding: 0.9rem 1.6rem; color: #FFF; font-weight: 500; font-size: 20px; font-size: 2rem; letter-spacing: 0.1em; } .p-side__categories { margin: 24px 0 0 16px; margin: 2.4rem 0 0 1.6rem; } .p-side__category { display: block; font-weight: 500; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.1em; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .p-side__category:hover { opacity: 0.8; } .p-side__category:nth-of-type(n+2) { margin-top: 8px; margin-top: 0.8rem; } .p-side__ranking { margin: 24px 16px 0; margin: 2.4rem 1.6rem 0; } .p-side__item { display: block; } .p-side__item:nth-of-type(n+2) { margin-top: 15px; margin-top: 1.5rem; } .p-side__time { color: #aaa; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } .p-side__itemTitle { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 2px; margin-top: 0.2rem; font-weight: 500; font-size: 16px; font-size: 1.6rem; line-height: 1.25; letter-spacing: 0.1em; } .p-slide { -webkit-box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); box-shadow: 0 0.4rem 0.4rem 0 rgba(0, 0, 0, .25); display: block; background-color: #FFF; } @media screen and (min-width: 768px) { .p-slide { display: -webkit-box; display: -ms-flexbox; display: flex; } } .p-slide__img { overflow: hidden; } @media screen and (min-width: 768px) { .p-slide__img { width: 50%; } } .p-slide__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-slide__img::before { padding-top: 74.0740740741%; } } .p-slide__img img { -webkit-transform: none; transform: none; top: 0; left: 0; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; } .p-slide:hover img { -webkit-transform: scale(1.05); transform: scale(1.05); } .p-slide__body { padding: 16px 8px 15.5px; padding: 1.6rem 0.8rem 1.55rem; } @media screen and (min-width: 768px) { .p-slide__body { width: 50%; padding: 4rem 4.3rem 4rem 3.7rem; } } .p-slide__theme { font-weight: 500; line-height: 1.25; font-size: 16px; font-size: 1.6rem; padding-bottom: 8px; padding-bottom: 0.8rem; border-bottom: 2px solid #3E40A4; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-slide__theme { font-size: 2rem; } } .p-slide__title { margin-top: 16px; margin-top: 1.6rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #3E40A4; font-size: 20px; font-size: 2rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-slide__title { margin-top: 4.75rem; font-size: 2.4rem; } } .p-slide__text { margin-top: 8.5px; margin-top: 0.85rem; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; font-weight: 300; font-size: 14px; font-size: 1.4rem; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-slide__text { margin-top: 1.65rem; font-size: 1.6rem; } } .p-topAbout__contents { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-topAbout__contents { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 8.9rem; } } .p-topAbout__heading { -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (min-width: 768px) { .p-topAbout__wrap { margin-top: -0.1rem; } } .p-topAbout__theme { font-size: 20px; font-size: 2rem; font-weight: 500; line-height: 1.25; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-topAbout__theme { font-size: 2.4rem; } } .p-topAbout__text { margin-top: 8px; margin-top: 0.8rem; } @media screen and (min-width: 768px) { .p-topAbout__text { margin-top: 1.65rem; } } .p-topAbout__link { margin-top: 8px; margin-top: 0.8rem; } @media screen and (min-width: 768px) { .p-topAbout__link { margin-top: 0.5rem; } } .p-topAbout__bg { position: relative; margin-top: 24px; margin-top: 2.4rem; background-image: url(../images/common/); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .p-topAbout__bg { margin-top: 4.8rem; } } .p-topAbout__bg::before, .p-topAbout__bg::after { content: ""; display: block; height: 71.7333333333vw; } @media screen and (min-width: 768px) { .p-topAbout__bg::before, .p-topAbout__bg::after { height: 64rem; } } .p-topAbout__bg::before { width: calc(100% - 1.6rem); background-image: url(../images/common/bg-about-sp.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (min-width: 768px) { .p-topAbout__bg::before { width: 88.8888888889vw; background-image: url(../images/common/bg-about.jpg); } } .p-topAbout__bg::after { position: absolute; right: 0; bottom: -16px; bottom: -1.6rem; z-index: -1; background-color: #EFEFEF; width: 100%; } @media screen and (min-width: 768px) { .p-topAbout__bg::after { bottom: -4rem; } } .p-topBlog { background-color: #EFF5FB; } .p-topBlog__items { margin-top: 21.5px; margin-top: 2.15rem; display: grid; gap: 16px; gap: 1.6rem; } @media screen and (min-width: 768px) { .p-topBlog__items { margin-top: 4.15rem; grid-template-columns: repeat(3, 1fr); gap: 4rem; } } .p-topBlog__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-topBlog__link { margin-top: 4.8rem; } } .p-topHowto { background-image: url(../images/common/bg-howto.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .p-topHowto::before { content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, .9); width: 100%; height: 100%; } .p-topHowto__container { position: relative; z-index: 1; } .swiper.p-topHowto__swiper { margin-top: 24px; margin-top: 2.4rem; padding: 0 16px 27.5px; padding: 0 1.6rem 2.75rem; margin-inline: auto; max-width: 592px; } @media screen and (min-width: 768px) { .swiper.p-topHowto__swiper { margin-top: 4.7rem; padding: 0 0 3.9rem; max-width: none; } } .swiper.p-post__swiper { margin-top: 24px; margin-top: 2.4rem; padding: 0 16px 27.5px; padding: 0 1.6rem 2.75rem; margin-inline: auto; max-width: 592px; } @media screen and (min-width: 768px) { .swiper.p-post__swiper { margin-top: 4.7rem; padding: 0 0 3.9rem; max-width: none; } } .p-topHowto__link { margin-top: 20.5px; margin-top: 2.05rem; } @media screen and (min-width: 768px) { .p-topHowto__link { margin-top: 4.45rem; } } .p-topHowto__link a { margin-inline: auto; } .p-topInformation { background-image: url(../images/common/bg-information.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; } .p-topInformation::before { content: ""; display: block; position: absolute; top: 0; left: 0; background: rgba(255, 255, 255, .9); width: 100%; height: 100%; } .p-topInformation__container { position: relative; z-index: 1; } .p-topInformation__items { margin-top: 16px; margin-top: 1.6rem; } @media screen and (min-width: 768px) { .p-topInformation__items { margin-top: 3.2rem; } } .p-topInformation__link { margin-top: 23px; margin-top: 2.3rem; } @media screen and (min-width: 768px) { .p-topInformation__link { margin-top: 4rem; } } .swiper.p-topInterview__swiper { margin-top: 21.5px; margin-top: 2.15rem; overflow: hidden; padding-bottom: 23px; padding-bottom: 2.3rem; } @media screen and (min-width: 768px) { .swiper.p-topInterview__swiper { margin-top: 4.15rem; } } .p-topInterview__theme { margin-top: 21px; margin-top: 2.1rem; padding-right: 2px; padding-right: 0.2rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topInterview__theme { margin-top: 2.5rem; } } .p-topInterview__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-topInterview__link { margin-top: 4.75rem; } } .p-topPerson { background-color: #EFF5FB; } .p-topPerson__items { margin-top: 21.5px; margin-top: 2.15rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; gap: 1.5rem; } @media screen and (min-width: 768px) { .p-topPerson__items { margin-top: 4.15rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 0 2rem; } } .p-topPerson__theme { margin-top: 24px; margin-top: 2.4rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topPerson__theme { margin-top: 4.8rem; } } .p-topPerson__text { margin-top: 12px; margin-top: 1.2rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topPerson__text { margin-top: 2.4rem; } } .p-topPerson__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-topPerson__link { margin-top: 4.8rem; } } .p-topResearch__items { margin-top: 21.5px; margin-top: 2.15rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; gap: 1.5rem; } @media screen and (min-width: 768px) { .p-topResearch__items { margin-top: 4.15rem; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } } .p-topResearch__item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; border: 2px solid #4880E0; background-color: #FFF; border-radius: 1.6rem; cursor: pointer; -webkit-transition: background-color 0.3s ease-out; transition: background-color 0.3s ease-out; } @media screen and (min-width: 768px) { .p-topResearch__item { font-size: 2rem; } } .p-topResearch__item::before { content: ""; display: block; padding-top: 100%; } @media screen and (min-width: 768px) { .p-topResearch__item::before { padding-top: 51.2987012987%; } } .p-topResearch__itemText { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #4880E0; font-weight: 500; font-size: min(4.2666666667vw, 22px); font-size: min(4.2666666667vw, 2.2rem); line-height: 1.25; letter-spacing: 0.1em; width: 100%; text-align: center; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topResearch__itemText { font-size: 2rem; } } .p-topResearch__item:hover { background-color: #4880E0; } .p-topResearch__item:hover .p-topResearch__itemBlock { opacity: 1; z-index: 1; } .p-topResearch__itemBlock { width: calc(100% - 2rem); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #FFF; opacity: 0; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-topResearch__itemBlock { width: calc(100% - 3.2rem); } } .p-topResearch__itemTheme { font-size: 14px; font-size: 1.4rem; line-height: 1.25; letter-spacing: 0.1em; text-align: center; font-weight: 500; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topResearch__itemTheme { font-size: 1.6rem; } } .p-topResearch__itemDescription { font-size: min(3.2vw, 16px); font-size: min(3.2vw, 1.6rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.1em; white-space: pre-wrap; text-align: left; } @media screen and (min-width: 768px) { .p-topResearch__itemDescription { font-size: 1.4rem; } } .p-topResearch__theme { margin-top: 24px; margin-top: 2.4rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topResearch__theme { margin-top: 4.8rem; } } .p-topResearch__text { margin-top: 12px; margin-top: 1.2rem; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topResearch__text { margin-top: 2.4rem; } } .p-topResearch__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-topResearch__link { margin-top: 4.8rem; } } .p-topTalk__container { margin-top: 21.5px; margin-top: 2.15rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 24px; row-gap: 2.4rem; } @media screen and (min-width: 768px) { .p-topTalk__container { margin-top: 4.15rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (min-width: 768px) { .p-topTalk__img { max-width: 64rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-topTalk__img::before { padding-top: 66.7638483965%; } @media screen and (min-width: 768px) { .p-topTalk__img::before { padding-top: 66.71875%; } } .p-topTalk__img img { border-radius: 1.6rem; } .p-topTalk__speechBubbles { display: grid; row-gap: 8px; row-gap: 0.8rem; width: 100%; } @media screen and (min-width: 768px) { .p-topTalk__speechBubbles { margin-top: 0.6rem; } } .p-topTalk__word { position: relative; width: 100%; max-width: 85.3333333333vw; background-repeat: no-repeat; background-size: cover; background-position: center; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topTalk__word { max-width: 48rem; } } .p-topTalk__word::before { content: ""; display: block; padding-top: 20.415625%; } @media screen and (min-width: 768px) { .p-topTalk__word::before { padding-top: 20.4166666667%; } } .p-topTalk__word:nth-child(odd) { background-image: url(../images/common/speech-bubble-left.svg); } .p-topTalk__word:nth-child(even) { background-image: url(../images/common/speech-bubble-right.svg); margin-left: auto; } .p-topTalk__word p { position: absolute; width: 100%; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 25%; text-align: center; color: #4880E0; font-size: min(3.7333333333vw, 23px); font-size: min(3.7333333333vw, 2.3rem); font-weight: 500; letter-spacing: 0.1em; } @media screen and (min-width: 768px) { .p-topTalk__word p { font-size: 2rem; } } .p-topTalk__wrap { margin-top: 15.5px; margin-top: 1.55rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; row-gap: 1.2rem; } @media screen and (min-width: 768px) { .p-topTalk__wrap { margin-top: 4.5rem; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 0 2.05rem; } } .p-topTalk__theme { text-align: center; white-space: pre-wrap; } @media screen and (min-width: 768px) { .p-topTalk__theme { width: -webkit-max-content; width: -moz-max-content; width: max-content; -ms-flex-negative: 0; flex-shrink: 0; text-align: left; } } .p-topTalk__text { white-space: pre-wrap; } .p-topTalk__link { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-topTalk__link { margin-top: 4.8rem; } } .p-wrapper__container { width: 100%; max-width: 100vw; margin-inline: auto; } @media screen and (min-width: 768px) { .p-wrapper__container { max-width: 144rem; } } .p-wrapper__section { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 24px; row-gap: 2.4rem; width: 100%; padding: 0 16px; margin-inline: auto; max-width: 592px; } @media screen and (min-width: 768px) { .p-wrapper__section { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 8rem; padding-left: 0; padding-right: 25px; max-width: none; } } .p-wrapper__section:nth-of-type(2) { margin-top: 60px; margin-top: 6rem; } @media screen and (min-width: 768px) { .p-wrapper__section:nth-of-type(2) { margin-top: 12rem; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; padding-right: 0; padding-left: 25px; } } @media screen and (min-width: 768px) { .p-wrapper__contents { width: 100%; max-width: 48rem; } } .p-wrapper__items { margin-top: 22px; margin-top: 2.2rem; } @media screen and (min-width: 768px) { .p-wrapper__items { margin-top: 4.5rem; } } .p-wrapper__section:nth-of-type(2) .p-wrapper__items { margin-top: 24px; margin-top: 2.4rem; } @media screen and (min-width: 768px) { .p-wrapper__section:nth-of-type(2) .p-wrapper__items { margin-top: 4.8rem; } } .p-wrapper__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 0.85rem; -moz-column-gap: 0.85rem; column-gap: 0.85rem; font-size: 16px; font-size: 1.6rem; padding: 0 0 0.5px 12.5px; padding: 0 0 0.05rem 1.25rem; border-bottom: 1px solid #3E40A4; position: relative; line-height: 1.25; letter-spacing: 0.1em; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } @media screen and (min-width: 768px) { .p-wrapper__item { font-size: 2rem; padding: 0 0 0.55rem 2.4rem; } } .p-wrapper__item:hover { opacity: 0.7; } .p-wrapper__section:nth-of-type(2) .p-wrapper__item { padding-bottom: 3.5px; padding-bottom: 0.35rem; } @media screen and (min-width: 768px) { .p-wrapper__section:nth-of-type(2) .p-wrapper__item { padding-bottom: 0.75rem; } } .p-wrapper__item:nth-of-type(n+2) { margin-top: 5.5px; margin-top: 0.55rem; } @media screen and (min-width: 768px) { .p-wrapper__item:nth-of-type(n+2) { margin-top: 1.25rem; } } .p-wrapper__section:nth-of-type(2) .p-wrapper__item:nth-of-type(n+2) { margin-top: 7.5px; margin-top: 0.75rem; } @media screen and (min-width: 768px) { .p-wrapper__section:nth-of-type(2) .p-wrapper__item:nth-of-type(n+2) { margin-top: 1.55rem; } } .p-wrapper__item span { font-size: 20px; font-size: 2rem; color: #3E40A4; letter-spacing: 0; } @media screen and (min-width: 768px) { .p-wrapper__item span { font-size: 2.4rem; } } .p-wrapper__item::before { content: ""; display: block; width: 1px; height: 16px; height: 1.6rem; position: absolute; left: 0; bottom: 0; background-color: #3E40A4; } @media screen and (min-width: 768px) { .p-wrapper__item::before { height: 2.4rem; } } .p-wrapper__item::after { content: ""; display: block; width: 1px; height: 7px; height: 0.7rem; position: absolute; right: 0; bottom: 0; background-color: #3E40A4; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: bottom right; transform-origin: bottom right; } @media screen and (min-width: 768px) { .p-wrapper__item::after { height: 1rem; } } .p-wrapper__link { margin-top: 23.5px; margin-top: 2.35rem; } @media screen and (min-width: 768px) { .p-wrapper__link { margin-top: 4.75rem; } } .p-wrapper__imgs { margin: 0 calc(50% - 50vw); width: 100vw; } @media screen and (min-width: 768px) { .p-wrapper__imgs { margin: 0; width: 100%; max-width: 72rem; -ms-flex-negative: 0; flex-shrink: 0; } } .p-wrapper__img { max-width: 85.3333333333vw; } @media screen and (min-width: 768px) { .p-wrapper__img { max-width: 64rem; } } .p-wrapper__section:nth-of-type(2) .p-wrapper__img { margin-left: auto; } .p-wrapper__img::before { padding-top: 75%; } @media screen and (min-width: 768px) { .p-wrapper__img::before { padding-top: 75%; } } .p-wrapper__smallImg { z-index: 1; max-width: 42.6666666667vw; margin-left: auto; margin-top: -25.6vw; } @media screen and (min-width: 768px) { .p-wrapper__smallImg { max-width: 32rem; margin-top: -16rem; } } .p-wrapper__section:nth-of-type(2) .p-wrapper__smallImg { margin-left: 0; } .p-wrapper__smallImg::before { padding-top: 75%; } @media screen and (min-width: 768px) { .p-wrapper__smallImg::before { padding-top: 75%; } } .u-desktop { display: none; } @media screen and (min-width: 768px) { .u-desktop { display: block; } } .u-fadein { opacity: 0; visibility: hidden; -webkit-transform: translateY(3rem); transform: translateY(3rem); -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; transition: opacity 1s, transform 1s, -webkit-transform 1s; } .u-fadein.active { opacity: 1; visibility: visible; -webkit-transform: translateX(0); transform: translateX(0); } @media screen and (min-width: 768px) { .u-mobile { display: none; } } .u-nowrap { white-space: nowrap; } /*# sourceMappingURL=styles.css.map */