@charset "UTF-8";
@charset "utf-8";
   @font-face {
font-family: "Ubuntu";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Ubuntu/Ubuntu-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ubuntu";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Ubuntu/Ubuntu-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ubuntu";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Ubuntu/Ubuntu-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Ubuntu";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Ubuntu/Ubuntu-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "Nothing You Could Do";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Nothing_You_Could_Do/NothingYouCouldDo.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Thin.woff2) format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-ExtraLight.woff2) format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-ExtraBold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Noto Sans JP";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Noto_Sans_JP/NotoSansJP-Black.woff2) format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
} @font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Thin.woff2) format("woff2");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-ExtraLight.woff2) format("woff2");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Light.woff2) format("woff2");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-SemiBold.woff2) format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-ExtraBold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/fonts/Montserrat/Montserrat-Black.woff2) format("woff2");
font-weight: 900;
font-style: normal;
font-display: swap;
} html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
font-family: system-ui, sans-serif;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}
input,
button,
textarea,
select {
font: inherit;
}
a {
text-decoration: none;
color: inherit;
}
ol,
ul {
list-style: none;
}
button {
padding: 0;
cursor: pointer;
}
html {
font-size: 10px;
}
html body {
margin: 0;
background-color: #fdfdfd;
font-family: "Noto Sans JP";
font-weight: 400;
}
html body .wrapper {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
html body .wrapper.top {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/top.png);
background-attachment: local;
background-size: cover;
background-repeat: no-repeat;
}
html body .wrapper.about_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/about.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.about_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/about.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.works_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/works.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.works_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/works.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.member-page_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/member.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.member-page_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/member.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.recruit_basic,
html body .wrapper.recruitments-page_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/recruit.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.recruit_ios::before,
html body .wrapper.recruitments-page_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/recruit.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.news_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/news.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.news_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/news.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.contact-page_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/contact.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.contact-page_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/contact.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper.links-page_basic {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/links.png);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
html body .wrapper.links-page_ios::before {
content: "";
position: fixed;
inset: 0;
height: 100vh;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/bg/links.png);
background-repeat: no-repeat;
background-size: cover;
z-index: -1000;
}
html body .wrapper main {
flex: 1;
}
html body .wrapper main .contents,
html body .wrapper main .top-contents {
width: 100%;
}
html body .wrapper main .contents .sub-nav > ul,
html body .wrapper main .top-contents .sub-nav > ul {
position: fixed;
z-index: 1000;
right: 5%;
top: 20%;
display: flex;
flex-direction: column;
gap: 20px;
justify-content: flex-end;
align-items: flex-end;
}
html body .wrapper main .contents .sub-nav > ul li,
html body .wrapper main .top-contents .sub-nav > ul li {
font-family: "Montserrat";
list-style: none;
color: #bbbbbb;
font-size: clamp(14px, 1vw + 6px, 18px);
transition: all 0.3s ease;
font-weight: 300;
}
html body .wrapper main .contents .sub-nav > ul li.is-active,
html body .wrapper main .top-contents .sub-nav > ul li.is-active {
font-size: clamp(16px, 1vw + 8px, 20px);
font-weight: 400;
color: #d59c67;
padding: 2px 5px 2px 0;
border-right: 3px solid #d59c67;
}
@media (max-width: 799px) {
html body .wrapper main .contents .sub-nav,
html body .wrapper main .top-contents .sub-nav {
display: none;
}
}
html body section.bg-transparent,
html body .recruit-contetns section.transparent--inner,
.recruit-contetns html body section.transparent--inner,
html body .top-contents section.transparent--inner,
.top-contents html body section.transparent--inner {
background-color: transparent;
}
html body section.bg-greige,
html body .recruit-contetns section.greige--inner,
.recruit-contetns html body section.greige--inner,
html body .top-contents section.greige--inner,
.top-contents html body section.greige--inner {
background-color: #f5f4f3;
}
html body .layout {
margin: 0 auto;
width: 95%;
}
html body .layout.w800 {
width: 100%;
max-width: 800px;
}
html body .layout.w1000 {
max-width: 1000px;
}
html body .layout.w1000.title-inner {
margin: 70px auto 80px;
line-height: 1;
}
html body .layout.w1000.title-inner h1 {
color: #17406f;
word-break: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
html body .layout.w1000.title-inner h1.title {
font-size: clamp(2.4rem, 5vw, 4.8rem);
font-weight: 400;
}
html body .layout.w1000.title-inner h1.sub {
font-size: clamp(1.4rem, 3vw, 2.4rem);
font-weight: 400;
}
html body .layout.w1000.title-inner h1.sub.js-fade-sub {
opacity: 0;
}
html body .layout.w1000.title-inner p {
color: #17406f;
word-break: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
html body .layout.w1000.title-inner p.title-l {
font-size: clamp(64px, 8vw, 96px);
font-weight: 500;
display: flex;
overflow: hidden;
margin-bottom: 10px;
}
html body .layout.w1000.title-inner p.title-l .t-up {
display: inline-block;
white-space: pre;
transform: translateY(100%);
opacity: 0;
}
html body .layout.w1000.title-inner p.title-s {
font-size: clamp(30px, 5vw, 48px);
font-weight: 400;
}
@keyframes slideInUp {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
html body .layout .is-slide-in {
animation: slideInUp 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
html body .layout .is-fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
html body .layout.w1200 {
max-width: 1200px;
}
html body h2.navy {
color: #17406f;
font-size: 64px;
font-weight: 200;
}
html body h2.gray {
color: #666666;
font-size: 40px;
font-weight: 200;
}
html body p {
font-size: 1.6rem;
color: #666666;
}
html body p.base.center {
text-align: center;
}
html body p.base.left {
text-align: left;
}
html body p.base.right {
text-align: right;
}
html body p.intro-bp799 {
font-size: 18px;
line-height: 2;
}
@media (max-width: 799px) {
html body p.intro-bp799 {
font-size: 15px;
line-height: 1.5;
}
}
html body p.bp799 {
font-size: 16px;
}
@media (max-width: 799px) {
html body p.bp799 {
font-size: 14px;
}
}
html body p.navy {
font-size: 19.2px;
color: #17406f;
}
html body p.navy.center {
text-align: center;
}
html body p.navy.left {
text-align: left;
}
html body p.navy.right {
text-align: right;
}
html body { }
html body span.new {
display: inline-block;
height: -moz-fit-content;
height: fit-content;
margin-right: 8px;
padding: 0 8px 3px 8px;
color: #fdfdfd;
font-size: 1.44rem;
background-color: #c3b9ac;
border-radius: 6px;
}
@media (max-width: 799px) {
html body .layout,
html body .layout.w1000.title-inner {
padding: 0px 20px;
box-sizing: border-box;
margin: 50px auto 60px;
}
} body {
padding-top: 100px;
}
@media (max-width: 799px) {
body {
padding-top: 80px;
}
}
header {
position: fixed;
z-index: 1000;
top: 0;
right: 0;
width: 100%;
height: 100px;
background: #fdfdfd;
transition: all 0.3s ease-in-out;
transform: translateZ(0);
}
@media (max-width: 799px) {
header {
height: 80px;
}
}
header #header-bg {
position: absolute;
z-index: 999;
top: 0;
right: 0;
width: 100%;
height: 100px;
background-color: transparent;
box-shadow: none;
border-bottom-left-radius: 0;
}
@media (max-width: 799px) {
header #header-bg {
height: 80px;
}
}
header #header-inner {
position: relative;
z-index: 1000;
height: 100%;
width: 90vw;
margin: 0 auto;
}
@media (max-width: 799px) {
header #header-inner {
width: 100vw;
}
}
header .navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
@media (max-width: 799px) {
header .navbar {
padding: 0 15px;
}
}
header .logo {
display: block;
overflow: hidden;
font-family: "Ubuntu", sans-serif;
letter-spacing: 0.05em;
}
@media (max-width: 799px) {
header .logo {
position: fixed;
z-index: 3000;
top: 28%;
}
}
header .logo > a {
display: block;
font-size: 3.5rem;
font-weight: 900;
color: #666666;
text-decoration: none;
}
header .logo > a::first-letter {
color: #ffaf65;
text-shadow: -1px -1px 0 #f5f4f3, 1px -1px 0 #f5f4f3, -1px 1px 0 #f5f4f3,
1px 1px 0 #f5f4f3;
}
@media (max-width: 799px) {
header .logo > a {
font-size: 2.6rem;
}
header .logo > a::first-letter {
color: #ffaf65;
text-shadow: -1px -1px 0 #f5f4f3, 1px -1px 0 #f5f4f3, -1px 1px 0 #f5f4f3,
1px 1px 0 #f5f4f3;
}
}
header nav > ul.nav-links {
display: flex;
justify-content: space-between;
align-items: center;
width: 500px;
gap: 15px;
}
header nav > ul.nav-links .header-form {
display: none;
}
header nav > ul.nav-links > li {
list-style: none;
margin: 0;
flex-shrink: 0;
}
header nav > ul.nav-links > li > a {
text-decoration: none;
}
header nav > ul.nav-links > li > a > .sp-open {
display: none;
}
header nav > ul.nav-links > li > :not(a.contact) {
font-size: 1.2rem;
font-weight: 500;
color: #666666;
transition: 0.3s ease-in-out;
}
header nav > ul.nav-links > li > :not(a.contact):hover {
color: #ff7700;
}
@media (min-width: 1000px) {
header nav > ul.nav-links {
width: 650px;
}
header nav > ul.nav-links > li > :not(a.contact) {
font-size: 1.6rem;
}
}
@media (max-width: 799px) {
header nav > ul.nav-links {
display: flex;
visibility: hidden;
position: fixed;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100vh;
opacity: 0;
transform: translateX(100%);
pointer-events: none;
transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 0;
padding-top: 3vh;
overflow-y: auto;
transition: all 0.3s ease-in-out;
background-color: #f6f6f6;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
header nav > ul.nav-links > li {
position: relative;
width: 90%;
opacity: 0;
transform: translateX(0);
}
header nav > ul.nav-links > li:nth-child(1) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
header nav > ul.nav-links > li:nth-child(2) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
header nav > ul.nav-links > li:nth-child(3) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
header nav > ul.nav-links > li:nth-child(4) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.4s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}
header nav > ul.nav-links > li:nth-child(5) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}
header nav > ul.nav-links > li:nth-child(6) {
transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.6s,
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}
header nav > ul.nav-links > li {
position: relative;
width: 90%;
border-bottom: 1px solid #d59c67;
}
header nav > ul.nav-links > li:first-of-type {
margin-top: 80px;
}
header nav > ul.nav-links > li:last-child {
border: none;
margin-top: auto;
padding-bottom: 20px;
}
header nav > ul.nav-links > li > :not(a.contact) {
display: block;
font-size: 1.6rem;
font-weight: 400;
color: #cc7524;
padding: 2.3vh 0;
margin-left: 20px;
}
header nav > ul.nav-links > li > :not(a.contact)::after {
content: ">";
position: absolute;
right: 25px;
bottom: 18px;
font-size: 1.4rem;
color: #d59c67;
}
header nav > ul.nav-links > li > a.contact {
text-align: center;
display: block;
width: 100%;
font-size: 1.6rem;
color: #fdfdfd;
background: #ff7700;
border-radius: 15px;
}
}
header .hamburger {
display: none;
position: relative;
z-index: 1001;
cursor: pointer;
background: none;
border: none;
padding: 10px;
}
header .hamburger .line {
display: block;
width: 25px;
height: 3px;
margin: 5px 0;
background-color: #666666;
transition: all 0.3s ease-in-out;
}
@media (max-width: 799px) {
header .hamburger {
display: block;
position: fixed;
z-index: 3000;
top: 15%;
right: 20px;
}
}
header.nav-open nav > ul.nav-links {
visibility: visible;
opacity: 1;
transform: translateX(0);
pointer-events: auto;
height: 100vh;
}
header.nav-open nav > ul.nav-links li a.contact {
display: none;
}
header.nav-open nav > ul.nav-links .header-form {
width: 90%;
margin: 6vh auto 0;
display: flex;
flex-direction: column;
margin-bottom: auto;
gap: 10px;
}
header.nav-open nav > ul.nav-links .header-form p {
color: #d59c67;
}
header.nav-open nav > ul.nav-links .header-form .box {
display: flex;
gap: 10px;
}
header.nav-open nav > ul.nav-links .header-form .box > li {
flex: 1;
border: 1px solid #d59c67;
}
header.nav-open nav > ul.nav-links .header-form .box > li > a {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: row;
padding: 20px 0;
gap: 30px;
}
header.nav-open nav > ul.nav-links .header-form .box > li > a > img {
width: 40px;
}
header.nav-open nav > ul.nav-links .header-form .box > li > a .sp-open {
display: block;
margin-left: 5px;
font-size: 1.2rem;
color: #c3b9ac;
}
@media (max-width: 499px) {
header.nav-open nav > ul.nav-links .header-form .box > li > a {
flex-direction: column;
padding: 5px;
gap: 3px;
}
header.nav-open nav > ul.nav-links .header-form .box > li > a > img {
width: 40px;
margin: 0 auto;
}
}
header.nav-open nav > ul.nav-links .header-form > li {
flex: 1;
border: 1px solid #d59c67;
border-radius: 50px;
}
header.nav-open nav > ul.nav-links .header-form > li > a {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
text-align: center;
padding: 5px;
gap: 15px;
}
header.nav-open nav > ul.nav-links .header-form > li > a > img {
width: 40px;
}
header.nav-open nav > ul.nav-links > li {
opacity: 1;
}
header.nav-open nav > ul.nav-links .sp-open {
display: inline-block;
margin-left: 5px;
font-size: 1.2rem;
color: #c3b9ac;
}
header.nav-open .hamburger .line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
header.nav-open .hamburger .line:nth-child(2) {
opacity: 0;
}
header.nav-open .hamburger .line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
header.scrolled {
background-color: transparent;
}
header.scrolled #header-bg {
height: 80px;
background-color: rgba(253, 253, 253, 0.4588235294);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-bottom-left-radius: 50px;
width: calc(500px + 10vw - 8px);
}
@media (min-width: 1000px) {
header.scrolled #header-bg {
width: calc(650px + 10vw - 8px);
}
}
@media (max-width: 799px) {
header.scrolled #header-bg {
background-color: transparent;
box-shadow: none;
height: 60px;
}
}
header.scrolled #header-inner {
transform: translateY(10px);
}
@media (max-width: 799px) {
header.scrolled #header-inner {
transform: none;
height: 60px;
width: 100%;
}
}
header.scrolled .navbar {
justify-content: flex-end;
position: fixed;
padding-left: 5vw;
}
@media (max-width: 799px) {
header.scrolled .navbar {
justify-content: flex-start;
position: fixed;
z-index: 2000;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fdfdfd;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding-left: 15px;
padding-right: 15px;
}
}
header.scrolled .logo {
display: block;
position: fixed;
z-index: 3000;
width: 90vw;
pointer-events: none;
}
header.scrolled .logo > a {
pointer-events: auto;
display: inline-block;
}
header.scrolled .logo > a::first-letter {
color: #ffaf65;
text-shadow: -1px -1px 0 #666666, 1px -1px 0 #666666, -1px 1px 0 #666666,
1px 1px 0 #666666;
}
@media (max-width: 799px) {
header.scrolled .logo {
top: 28%;
}
header.scrolled .logo > a::first-letter {
text-shadow: -1px -1px 0 #f5f4f3, 1px -1px 0 #f5f4f3, -1px 1px 0 #f5f4f3,
1px 1px 0 #f5f4f3;
}
}
@media (max-width: 799px) {
header.scrolled nav > ul.nav-links {
top: 0;
height: 100vh;
}
header.scrolled .hamburger {
display: block;
position: fixed;
z-index: 3000;
top: 15%;
right: 20px;
}
}
.page-top {
position: fixed;
z-index: 999;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out,
transform 0.3s ease-in-out;
}
.page-top::after {
position: absolute;
content: "TOP";
font-family: "Nothing You Could Do";
color: #666666;
font-size: 1.8rem;
bottom: 14px;
right: 16px;
letter-spacing: 0.04em;
}
.page-top:hover {
transform: rotate(10deg) translateY(-20px);
}
@media (max-width: 799px) {
.page-top {
width: 50px;
height: 50px;
bottom: 15px;
right: 15px;
}
.page-top::after {
font-size: 1.7rem;
letter-spacing: 0.02em;
bottom: 10px;
right: 13px;
}
}
header.scrolled + .page-top,
.page-top.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
footer #footer-bg {
width: 100%;
height: 350px;
background-color: #666666;
}
footer #footer-inner {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
width: 95vw;
max-width: 1200px;
margin: 0 auto 30px;
padding: 60px 5px 50px;
}
@media (max-width: 799px) {
footer #footer-inner {
padding: 25px 0;
}
}
footer .navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
@media (max-width: 799px) {
footer .navbar {
flex-direction: column;
gap: 45px;
}
}
footer .company {
display: flex;
flex-direction: column;
gap: 15px;
}
footer .company p {
display: block;
font-size: 1.4rem;
color: #fdfdfd;
}
footer .company p.logo > a {
font-family: "Ubuntu", sans-serif;
font-size: 4rem;
font-weight: 700;
color: #fdfdfd;
letter-spacing: 0.05em;
}
footer .company p.logo::first-letter {
color: #ffaf65;
}
@media (max-width: 799px) {
footer .company p {
display: none;
font-size: 1.2rem;
}
footer .company p.logo {
display: block;
text-align: center;
margin-top: 40px;
}
footer .company p.logo > a {
font-size: 4.2rem;
}
}
footer nav {
display: flex;
flex-direction: column;
gap: 35px;
margin-top: 5px;
}
@media (max-width: 799px) {
footer nav {
margin: 0 auto;
gap: 25px;
}
}
footer nav .sns-links > li,
footer nav .nav-links > li {
list-style: none;
}
footer nav .sns-links > li > a,
footer nav .nav-links > li > a {
text-decoration: none;
}
footer nav .sns-links > li > :not(a.contact),
footer nav .nav-links > li > :not(a.contact) {
display: inline-block;
font-size: 1.4rem;
color: #fdfdfd;
transition: 0.3s ease-in-out;
}
@media (max-width: 799px) {
footer nav .sns-links > li > :not(a.contact),
footer nav .nav-links > li > :not(a.contact) {
font-size: 1.15rem;
}
}
footer nav .sns-links > li > :not(a.contact):hover,
footer nav .nav-links > li > :not(a.contact):hover {
color: #ff7700;
}
footer nav .sns-links {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
footer nav .sns-links :nth-child(2) {
margin-left: 15px;
}
footer nav .sns-links a:not(a.contact) {
width: 65%;
}
@media (max-width: 799px) {
footer nav .sns-links a:not(a.contact) {
width: 60%;
}
}
footer nav .sns-links a:not(a.contact) img {
width: 100%;
vertical-align: bottom;
}
footer nav .nav-links {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(3, auto);
-moz-column-gap: 40px;
column-gap: 40px;
row-gap: 10px;
grid-column: 1/-1;
grid-row: 2;
}
footer nav .nav-links > li:nth-child(1) {
grid-area: 1/1;
}
footer nav .nav-links > li:nth-child(2) {
grid-area: 2/1;
}
footer nav .nav-links > li:nth-child(3) {
grid-area: 3/1;
}
footer nav .nav-links > li:nth-child(4) {
grid-area: 1/2;
}
footer nav .nav-links > li:nth-child(5) {
grid-area: 2/2;
}
@media (max-width: 799px) {
footer nav .nav-links {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, auto);
-moz-column-gap: 0;
column-gap: 0;
row-gap: 20px;
text-align: center;
}
footer nav .nav-links > li:nth-child(1) {
grid-area: 1/1;
}
footer nav .nav-links > li:nth-child(2) {
grid-area: 1/2;
}
footer nav .nav-links > li:nth-child(3) {
grid-area: 1/3;
}
footer nav .nav-links > li:nth-child(4) {
grid-area: 2/1;
}
footer nav .nav-links > li:nth-child(5) {
grid-area: 2/2;
}
}
footer .copy {
text-align: center;
font-size: 1.4rem;
color: #fdfdfd;
}
@media (max-width: 799px) {
footer .copy {
font-size: 1.2rem;
}
}  .box-fit,
.top-contents .box-fit--inner {
width: 100%;
height: auto;
max-width: -moz-fit-content;
max-width: fit-content;
max-height: -moz-fit-content;
max-height: fit-content; }
.box-fit.white,
.top-contents .white.box-fit--inner {
background-color: #fdfdfd;
}
.box-fit.white-tra,
.top-contents .white-tra.box-fit--inner {
background-color: #fdfdfd80;
}
.box-fit.greige,
.top-contents .greige.box-fit--inner {
background-color: #f5f4f3;
}
.box-fit.ash,
.top-contents .ash.box-fit--inner {
background-color: #f6f6f6;
}
.box-fit,
.top-contents .box-fit--inner { }
.box-fit.r4,
.top-contents .r4.box-fit--inner {
border-radius: 4px;
}
.box-fit.r25,
.top-contents .r25.box-fit--inner {
border-radius: 25px;
}
.box-fit.r50,
.top-contents .r50.box-fit--inner {
border-radius: 50px;
}
.box-fit,
.top-contents .box-fit--inner { }
.box-fit.bw1,
.top-contents .bw1.box-fit--inner {
border: 1px solid #eeeeee;
}
.box-fit.bw2,
.top-contents .bw2.box-fit--inner {
border: 2px solid #eeeeee;
}
.box-w800,
.recruit-contetns .box-w800--inner,
.top-contents .box-w800--inner {
width: 100%;
height: auto;
max-width: 800px;
max-height: -moz-fit-content;
max-height: fit-content; }
.box-w800.white,
.recruit-contetns .white.box-w800--inner,
.top-contents .white.box-w800--inner {
background-color: #fdfdfd;
}
.box-w800.white-tra,
.recruit-contetns .white-tra.box-w800--inner,
.top-contents .white-tra.box-w800--inner {
background-color: #fdfdfd80;
}
.box-w800.greige,
.recruit-contetns .greige.box-w800--inner,
.top-contents .greige.box-w800--inner {
background-color: #f5f4f3;
}
.box-w800.ash,
.recruit-contetns .ash.box-w800--inner,
.top-contents .ash.box-w800--inner {
background-color: #f6f6f6;
}
.box-w800,
.recruit-contetns .box-w800--inner,
.top-contents .box-w800--inner { }
.box-w800.r4,
.recruit-contetns .r4.box-w800--inner,
.top-contents .r4.box-w800--inner {
border-radius: 4px;
}
.box-w800.r25,
.recruit-contetns .r25.box-w800--inner,
.top-contents .r25.box-w800--inner {
border-radius: 25px;
}
.box-w800.r50,
.recruit-contetns .r50.box-w800--inner,
.top-contents .r50.box-w800--inner {
border-radius: 50px;
}
.box-w800,
.recruit-contetns .box-w800--inner,
.top-contents .box-w800--inner { }
.box-w800.bw1,
.recruit-contetns .bw1.box-w800--inner,
.top-contents .bw1.box-w800--inner {
border: 1px solid #eeeeee;
}
.box-w800.bw2,
.recruit-contetns .bw2.box-w800--inner,
.top-contents .bw2.box-w800--inner {
border: 2px solid #eeeeee;
}
.box-w1200 {
width: 100%;
height: auto;
max-width: 1200px;
max-height: -moz-fit-content;
max-height: fit-content; }
.box-w1200.white {
background-color: #fdfdfd;
}
.box-w1200.white-tra {
background-color: #fdfdfd80;
}
.box-w1200.greige {
background-color: #f5f4f3;
}
.box-w1200.ash {
background-color: #f6f6f6;
}
.box-w1200 { }
.box-w1200.r4 {
border-radius: 4px;
}
.box-w1200.r25 {
border-radius: 25px;
}
.box-w1200.r50 {
border-radius: 50px;
}
.box-w1200 { }
.box-w1200.bw1 {
border: 1px solid #eeeeee;
}
.box-w1200.bw2 {
border: 2px solid #eeeeee;
} .box-member,
.swiper-container .swiper .swiper-slide a.member-card {
width: 100%;
max-width: 168px;
height: 290px;
background-color: #fdfdfd;
border: 1px solid #eeeeee;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.box-article,
.top-contents .owned-media.article-wrap article {
width: 100%;
max-width: 200px;
height: 290px;
background-color: #fdfdfd;
border: 1px solid #eeeeee;
border-radius: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.box-offshot {
width: 100%;
max-width: 750px;
height: -moz-fit-content;
height: fit-content;
background-color: #fdfdfd;
border: 1px solid #eeeeee;
border-radius: 25px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
input.btn1,
a.contact,
a.navy-bg-short,
a.btn1 {
border-radius: 50px;
}
a.recruit-banner > span.btn3.orange-bg,
a.works-banner > span.btn3.orange-bg,
a.btn3,
a.btn2,
input.btn1,
a.contact,
a.navy-bg-short,
a.btn1 {
transition: 0.3s ease-in-out;
}
input.btn1.gold-line,
a.recruit-banner > span.btn3.orange-bg,
a.works-banner > span.btn3.orange-bg,
a.btn3.orange-bg,
a.btn2.orange-bg,
a.btn1.navy-bg,
a.btn1.navy-line,
a.btn1.gold-line {
padding: 9px 40px;
}
a {
font-size: 1.6rem;
}
a.btn1.gold-line {
color: #d59c67;
border: 1px solid #d59c67;
}
a.btn1.gold-line:hover {
background-color: #d59c67;
color: #fdfdfd;
}
a.btn1.navy-line {
color: #17406f;
border: 1px solid #17406f;
}
a.btn1.navy-line:hover {
background-color: #17406f;
color: #fdfdfd;
}
a.btn1.navy-bg {
background-color: #17406f;
color: #fdfdfd;
}
a.btn1.navy-bg:hover {
background-color: rgb(15.9970149254, 44.5134328358, 77.2029850746);
}
a.navy-bg-short {
padding: 9px 20px;
background-color: #17406f;
color: #fdfdfd;
}
a.navy-bg-short:hover {
background-color: rgb(15.9970149254, 44.5134328358, 77.2029850746);
}
a.btn2 {
border-radius: 4px;
}
a.btn2.orange-bg {
background-color: #ff7700;
color: #fdfdfd;
}
a.btn2.orange-bg:hover {
background-color: rgb(214.2, 99.96, 0);
}
a.btn3 {
border-radius: 15px;
display: inline-flex;
}
a.btn3.orange-bg {
background-color: #ffb876;
color: #fdfdfd;
}
a.btn3.orange-bg:hover {
background-color: rgb(255, 162.8554744526, 77.2);
}
a.btn3.orange-bg {
display: inline-flex;
align-items: center;
padding-right: 50px;
position: relative;
font-weight: 400;
}
a.btn3.orange-bg::after {
content: "";
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/parts/001.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
top: 55%;
right: 25px;
transform: translateY(-50%);
transition: transform 0.3s ease-out;
}
a.btn3.orange-bg:hover::after {
transform: translate(5px, -50%);
}
a.works-banner {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
min-height: 250px;
padding: 25px 20px;
gap: 30px;
margin-bottom: 80px;
overflow: hidden;
color: #fdfdfd;
text-decoration: none;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/banner/001.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
@media (min-width: 799px) {
a.works-banner {
flex-direction: row;
align-items: center;
width: 90%;
max-width: 1200px;
min-width: 790px;
margin: 0 auto 80px;
padding: 25px 30px;
gap: 10px;
border-radius: 50px;
}
}
a.works-banner:hover {
filter: contrast(1.15);
}
a.works-banner:hover > span.btn3.orange-bg {
background-color: rgb(255, 162.8554744526, 77.2);
}
a.works-banner:hover > span.btn3.orange-bg::after {
transform: translate(5px, -50%);
}
a.works-banner .banner__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
gap: 20px;
color: #fdfdfd;
line-height: 1;
}
a.works-banner .banner__content h1.banner-logo {
font-family: "Ubuntu";
font-size: 3.2rem;
font-weight: 500;
letter-spacing: 0.05rem;
}
a.works-banner .banner__content h1.banner-logo::first-letter {
color: #ffaf65;
}
a.works-banner .banner__content h2.banner-title {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
}
a.works-banner .banner__content .sp-only {
display: block;
}
@media (min-width: 940px) {
a.works-banner .banner__content .sp-only {
display: none;
}
}
a.works-banner .banner__content p.banner-text {
line-height: 1.7;
font-size: 1.3rem;
color: #fdfdfd;
}
@media (min-width: 799px) {
a.works-banner .banner__content p.banner-text {
font-size: 1.5rem;
margin-top: -10px;
}
}
a.works-banner .banner__content ul.banner-list {
line-height: 1.7;
font-size: 1.3rem;
color: #fdfdfd;
margin-left: 2em;
}
@media (min-width: 799px) {
a.works-banner .banner__content ul.banner-list {
font-size: 1.5rem;
margin-top: -10px;
}
}
a.works-banner .banner__content ul.banner-list li {
position: relative;
}
a.works-banner .banner__content ul.banner-list li::before {
position: absolute;
left: -1.5em;
content: "✓";
color: #ff7700;
font-weight: 900;
}
a.works-banner > span.btn3.orange-bg {
border-radius: 15px;
display: inline-flex;
flex-shrink: 0;
font-weight: 400;
font-size: 1.8rem;
background-color: #ffb876;
color: #fdfdfd;
}
a.works-banner > span.btn3.orange-bg:hover {
background-color: rgb(255, 162.8554744526, 77.2);
}
a.works-banner > span.btn3.orange-bg {
position: relative;
padding-right: 50px;
align-items: center;
}
a.works-banner > span.btn3.orange-bg:hover {
background-color: #ffb876;
}
a.works-banner > span.btn3.orange-bg::after {
content: "";
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/parts/001.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
top: 55%;
right: 25px;
transform: translateY(-50%);
transition: transform 0.3s ease-out;
}
a.recruit-banner {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 100%;
min-height: 250px;
padding: 25px 20px;
gap: 30px;
margin-bottom: 80px;
overflow: hidden;
color: #fdfdfd;
text-decoration: none;
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/banner/002.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 0.3s ease-in-out;
}
@media (min-width: 799px) {
a.recruit-banner {
flex-direction: row;
align-items: center;
width: 95%;
max-width: 1200px;
min-width: 790px;
margin: 0 auto 80px;
padding: 25px 30px;
gap: 10px;
border-radius: 50px;
}
}
a.recruit-banner:hover {
filter: contrast(1.15);
}
a.recruit-banner:hover > span.btn3.orange-bg {
background-color: rgb(255, 162.8554744526, 77.2);
}
a.recruit-banner:hover > span.btn3.orange-bg::after {
transform: translate(5px, -50%);
}
a.recruit-banner .banner__content {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
gap: 20px;
color: #fdfdfd;
line-height: 1;
}
a.recruit-banner .banner__content h1.banner-logo {
font-family: "Ubuntu";
font-size: 3.2rem;
font-weight: 500;
letter-spacing: 0.05rem;
}
a.recruit-banner .banner__content h1.banner-logo::first-letter {
color: #ffaf65;
}
a.recruit-banner .banner__content h2.banner-title {
font-size: 2.2rem;
font-weight: normal;
line-height: 1.3;
}
a.recruit-banner .banner__content .sp-only {
display: block;
}
@media (min-width: 799px) {
a.recruit-banner .banner__content .sp-only {
display: none;
}
}
a.recruit-banner .banner__content p.banner-text {
line-height: 1.7;
font-size: 1.3rem;
color: #fdfdfd;
}
@media (min-width: 799px) {
a.recruit-banner .banner__content p.banner-text {
font-size: 1.5rem;
margin-top: -10px;
}
}
a.recruit-banner > span.btn3.orange-bg {
border-radius: 15px;
display: inline-flex;
flex-shrink: 0;
font-weight: 400;
font-size: 1.8rem;
background-color: #ffb876;
color: #fdfdfd;
}
a.recruit-banner > span.btn3.orange-bg:hover {
background-color: rgb(255, 162.8554744526, 77.2);
}
a.recruit-banner > span.btn3.orange-bg {
position: relative;
padding-right: 50px;
align-items: center;
}
a.recruit-banner > span.btn3.orange-bg:hover {
background-color: #ffb876;
}
a.recruit-banner > span.btn3.orange-bg::after {
content: "";
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/parts/001.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
position: absolute;
top: 55%;
right: 25px;
transform: translateY(-50%);
transition: transform 0.3s ease-out;
}
a.contact {
padding: 3px 20px;
font-size: 1.4rem;
font-weight: bold;
color: #ff7700;
border: 1px solid #ff7700;
}
a.contact:hover {
background-color: #ff7700;
color: #fdfdfd;
}
@media (max-width: 1000px) {
a.contact {
padding: 2px 17px;
font-size: 1.1rem;
}
}
input {
display: inline-block;
text-decoration: none;
font-size: 1.6rem;
}
input.btn1.gold-line {
color: #d59c67;
border: 1px solid #d59c67;
}
input.btn1.gold-line:hover {
background-color: #d59c67;
color: #fdfdfd;
}
input.btn1.gold-line {
background: none;
padding: 7px 60px;
}
@media (max-width: 799px) {
a {
font-size: 1.4rem;
}
a.btn3.orange-bg {
padding: 8px 36px 8px 24px;
}
a.btn3.orange-bg::after {
right: 15px;
}
a.btn3.orange-bg:hover::after {
transform: translate(3px, -50%);
}
a.navy-bg-short {
padding: 8px 15px;
}
input.btn1.gold-line {
font-size: 1.4rem;
}
}
.line {
width: 100%;
max-width: 1000px;
height: 1px;
background-color: #bbbbbb;
margin: 40px auto;
}
.line-w800 {
width: 100%;
max-width: 800px;
height: 1px;
background-color: #bbbbbb;
margin: 0 auto;
}
.decorated-line {
width: 100%;
max-width: 1000px;
margin: 40px auto;
}
.decorated-line .line {
position: relative;
height: 1px;
background-color: #bbbbbb;
}
.decorated-line .line .squares {
position: absolute;
display: flex;
align-items: flex-start;
gap: 20px;
}
.decorated-line .line .squares.left {
bottom: 15px;
left: 15px;
}
.decorated-line .line .squares.right {
top: 15px;
right: 15px;
}
.decorated-line .line .squares span {
display: block;
}
.decorated-line .line .squares span.small {
width: 20px;
height: 20px;
border: 1px solid #bbbbbb;
}
.decorated-line .line .squares span.medium {
width: 25px;
height: 25px;
background-color: #bbbbbb;
}
.decorated-line .line .squares span.large {
width: 30px;
height: 30px;
border: 1px solid #bbbbbb;
}
.decorated-line2 {
width: 800px;
margin: 0 auto;
position: relative;
}
.decorated-line2.single-line {
width: 750px;
margin: 0 auto;
border-bottom: 0.5px solid #cc7524;
}
.decorated-line2.double-line {
border-bottom: 1px solid #cc7524;
margin-bottom: 10px;
position: relative;
height: 1px;
}
.decorated-line2.double-line::before {
content: "";
display: block;
width: 100%;
height: 100%;
border-bottom: solid 1px #cc7524;
position: absolute;
top: 10px;
} .cp-container {
display: flex;
justify-content: center;
align-items: center;
}
.cp-container p {
display: inline-block;
margin-bottom: 12px;
padding-bottom: 10px;
color: #ffaf65;
font-size: clamp(2rem, 5vw, 2.24rem);
font-weight: 600;
border-bottom: 2px solid #ffaf65;
}        .pie-chart-top {
--r: clamp(80px, 15vw, 100px);
position: relative;
width: calc(var(--r) * 1.78);
height: calc(var(--r) * 1.78);
border-radius: 50%; }
.pie-chart-top.seasonal-leave {
background-image: conic-gradient(#ff7f7f 0% 100%);
}
.pie-chart-top.seasonal-leave .label {
position: absolute;
top: 49%;
left: 51%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: clamp(2.8rem, 5vw, 3.5rem);
font-weight: 500;
text-align: center;
}
.pie-chart-top { }
.pie-chart-top.age-ratio {
position: relative;
background-image: conic-gradient(
#f24822 0% 28%,
#ff7f7f 28% 56%,
#ffaf65 56% 67%,
#ffcd29 67% 100%
);
}
.pie-chart-top.age-ratio .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: clamp(1.15rem, 2vw, 1.3rem);
font-weight: 500;
text-align: center;
}
.pie-chart-top.age-ratio .label.age20 {
--start: 0;
--end: 0.28;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.age-ratio .label.age30 {
--start: 0.28;
--end: 0.56;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.age-ratio .label.age40 {
--start: 0.56;
--end: 0.67;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.age-ratio .label.age50 {
--start: 0.67;
--end: 1;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.age-ratio ol {
position: absolute;
bottom: 0;
left: calc(var(--r) * 1.78);
}
.pie-chart-top.age-ratio ol li {
display: flex;
align-items: center;
color: #666666;
font-size: clamp(1.2rem, 3.5vw, 1.6rem);
font-weight: 400;
min-width: 115px;
}
.pie-chart-top.age-ratio ol li::before {
display: inline-block;
width: clamp(12px, 3.5vw, 16px);
height: clamp(12px, 3.5vw, 16px);
margin-left: 10px;
margin-right: 5px;
content: "";
}
.pie-chart-top.age-ratio li:nth-child(1)::before {
background-color: #f24822;
}
.pie-chart-top.age-ratio { }
.pie-chart-top.age-ratio li:nth-child(2)::before {
background-color: #ff7f7f;
}
.pie-chart-top.age-ratio { }
.pie-chart-top.age-ratio li:nth-child(3)::before {
background-color: #ffaf65;
}
.pie-chart-top.age-ratio { }
.pie-chart-top.age-ratio li:nth-child(4)::before {
background-color: #ffcd29;
}
.pie-chart-top.age-ratio { }
.pie-chart-top { }
.pie-chart-top.gender-ratio {
position: relative;
background-image: conic-gradient(#ffaf65 0% 61%, #ff7f7f 61% 100%);
}
.pie-chart-top.gender-ratio .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: 1.3rem;
font-weight: 500;
text-align: center;
}
.pie-chart-top.gender-ratio .label.male {
--start: 0;
--end: 0.61;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.gender-ratio .label { }
.pie-chart-top.gender-ratio .label.female {
--start: 0.61;
--end: 1;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-top.gender-ratio .label { }
.pie-chart-top.gender-ratio ol {
position: absolute;
bottom: 0;
right: calc(var(--r) * 1.78);
}
.pie-chart-top.gender-ratio ol li {
display: flex;
align-items: center;
color: #666666;
font-size: clamp(1.2rem, 3.5vw, 1.6rem);
font-weight: 400;
min-width: 105px;
}
.pie-chart-top.gender-ratio ol li::before {
display: inline-block;
width: clamp(12px, 3.5vw, 16px);
height: clamp(12px, 3.5vw, 16px);
margin-left: 0;
margin-right: 5px;
content: "";
}
.pie-chart-top.gender-ratio li:nth-child(1)::before {
background-color: #ffaf65;
}
.pie-chart-top.gender-ratio { }
.pie-chart-top.gender-ratio li:nth-child(2)::before {
background-color: #ff7f7f;
}
.pie-chart-top.gender-ratio { } .pie-chart-recruit {
--r: clamp(80px, 15vw, 100px);
position: relative;
width: calc(var(--r) * 2);
height: calc(var(--r) * 2);
border-radius: 50%; }
.pie-chart-recruit.seasonal-leave {
background-image: conic-gradient(#ff7f7f 0% 100%);
}
.pie-chart-recruit.seasonal-leave .label {
position: absolute;
top: 49%;
left: 51%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: clamp(2.8rem, 5vw, 3.5rem);
font-weight: 500;
text-align: center;
}
.pie-chart-recruit { }
.pie-chart-recruit.age-ratio {
position: relative;
background-image: conic-gradient(
#f24822 0% 28%,
#ff7f7f 28% 56%,
#ffaf65 56% 67%,
#ffcd29 67% 100%
);
}
.pie-chart-recruit.age-ratio .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: clamp(1.15rem, 2vw, 1.3rem);
font-weight: 500;
text-align: center;
}
.pie-chart-recruit.age-ratio .label.age20 {
--start: 0;
--end: 0.28;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.age-ratio .label.age30 {
--start: 0.28;
--end: 0.56;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.age-ratio .label.age40 {
--start: 0.56;
--end: 0.67;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.age-ratio .label.age50 {
--start: 0.67;
--end: 1;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.age-ratio ol {
position: absolute;
bottom: 0;
left: calc(var(--r) * 2);
}
.pie-chart-recruit.age-ratio ol li {
display: flex;
align-items: center;
color: #666666;
font-size: clamp(1.2rem, 3.5vw, 1.6rem);
font-weight: 400;
min-width: 115px;
}
.pie-chart-recruit.age-ratio ol li::before {
display: inline-block;
width: clamp(12px, 3.5vw, 16px);
height: clamp(12px, 3.5vw, 16px);
margin-left: 10px;
margin-right: 5px;
content: "";
}
.pie-chart-recruit.age-ratio li:nth-child(1)::before {
background-color: #f24822;
}
.pie-chart-recruit.age-ratio { }
.pie-chart-recruit.age-ratio li:nth-child(2)::before {
background-color: #ff7f7f;
}
.pie-chart-recruit.age-ratio { }
.pie-chart-recruit.age-ratio li:nth-child(3)::before {
background-color: #ffaf65;
}
.pie-chart-recruit.age-ratio { }
.pie-chart-recruit.age-ratio li:nth-child(4)::before {
background-color: #ffcd29;
}
.pie-chart-recruit.age-ratio { }
.pie-chart-recruit { }
.pie-chart-recruit.gender-ratio {
position: relative;
background-image: conic-gradient(#ffaf65 0% 61%, #ff7f7f 61% 100%);
}
.pie-chart-recruit.gender-ratio .label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fdfdfd;
font-size: 1.3rem;
font-weight: 500;
text-align: center;
}
.pie-chart-recruit.gender-ratio .label.male {
--start: 0;
--end: 0.61;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.gender-ratio .label { }
.pie-chart-recruit.gender-ratio .label.female {
--start: 0.61;
--end: 1;
--dist: calc(var(--r) * 0.5);
--mid: calc((var(--start) + var(--end)) / 2);
--deg: calc(var(--mid) * 360deg - 90deg);
transform: translate(-50%, -50%)
translate(
calc(cos(var(--deg)) * var(--dist)),
calc(sin(var(--deg)) * var(--dist))
);
}
.pie-chart-recruit.gender-ratio .label { }
.pie-chart-recruit.gender-ratio ol {
position: absolute;
bottom: 0;
right: calc(var(--r) * 2);
}
.pie-chart-recruit.gender-ratio ol li {
display: flex;
align-items: center;
color: #666666;
font-size: clamp(1.2rem, 3.5vw, 1.6rem);
font-weight: 400;
min-width: 105px;
}
.pie-chart-recruit.gender-ratio ol li::before {
display: inline-block;
width: clamp(12px, 3.5vw, 16px);
height: clamp(12px, 3.5vw, 16px);
margin-left: 0;
margin-right: 5px;
content: "";
}
.pie-chart-recruit.gender-ratio li:nth-child(1)::before {
background-color: #ffaf65;
}
.pie-chart-recruit.gender-ratio { }
.pie-chart-recruit.gender-ratio li:nth-child(2)::before {
background-color: #ff7f7f;
}
.pie-chart-recruit.gender-ratio { }
:root {
--swiper-navigation-size: none;
}
.swiper-container {
position: relative;
padding: 0 30px;
}
@media (max-width: 799px) {
.swiper-container {
margin: 0 80px;
}
}
@media (max-width: 559px) {
.swiper-container {
margin: 0;
}
}
.swiper-container .swiper {
padding: 20px 0 50px 0;
}
.swiper-container .swiper .swiper-slide a.member-card {
display: block;
margin: 0 auto;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.swiper-container .swiper .swiper-slide a.member-card .inner {
padding: 14px 20px;
text-align: center;
}
.swiper-container .swiper .swiper-slide a.member-card .inner p.name {
color: #17406f;
font-size: 1.6rem;
font-weight: 500;
}
.swiper-container .swiper .swiper-slide a.member-card .inner .p-icon {
overflow: hidden;
width: 80px;
height: 80px;
max-width: 100%;
margin: 12px auto 15px;
border: 3px solid #ffaf65;
border-radius: 50%;
}
.swiper-container .swiper .swiper-slide a.member-card .inner p.position {
padding-bottom: 4px;
color: #666666;
font-size: 1.1rem;
font-weight: 400;
}
.swiper-container .swiper .swiper-slide a.member-card .inner p.date {
color: #666666;
font-size: 1rem;
font-weight: 300;
}
.swiper-container .swiper .swiper-slide a.member-card .inner .motto-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
margin-top: 5px;
margin-bottom: 10px;
}
.swiper-container
.swiper
.swiper-slide
a.member-card
.inner
.motto-wrap
p.motto {
color: #666666;
font-size: 1.15rem;
font-weight: 400;
line-height: 1.5;
}
.swiper-container .swiper .swiper-slide a.member-card .inner p.more {
color: #ffaf65;
font-size: 1rem;
font-weight: 400;
transition: transform 0.3s ease;
}
.swiper-container .swiper .swiper-slide a.member-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 21px rgba(0, 0, 0, 0.08);
}
.swiper-container .swiper .swiper-slide a.member-card:hover p.more {
transform: scale(1.2);
}
@keyframes shine {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.swiper-container .swiper-button-prev svg,
.swiper-container .swiper-button-next svg {
display: none;
}
.swiper-container .swiper-button-prev {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
--r: 4px;
width: 24px;
aspect-ratio: 0.5;
--_g: calc(var(--r) / tan(22.5deg)) right var(--r), #000 98%, #0000 101%;
-webkit-mask: conic-gradient(
from 247.5deg at calc(341.4213562373% - var(--r) / 0.2426406871) 50%,
#000 45deg,
rgba(0, 0, 0, 0) 0
)
100% 0 / calc(100% - var(--r) / 1.4142135624) no-repeat,
radial-gradient(
var(--r) at calc(var(--r) * 1.4142135624) 50%,
#000 99%,
rgba(0, 0, 0, 0) 101%
),
radial-gradient(var(--r) at top var(--_g)),
radial-gradient(var(--r) at bottom var(--_g));
clip-path: polygon(0 50%, 100% 100%, 100% 0);
background: #ffaf65;
}
.swiper-container .swiper-button-next {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
--r: 4px;
width: 24px;
aspect-ratio: 0.5;
--_g: calc(var(--r) / tan(22.5deg)) left var(--r), #000 98%, #0000 101%;
-webkit-mask: conic-gradient(
from 67.5deg at calc(-241.4213562373% + var(--r) / 0.2426406871) 50%,
#000 45deg,
rgba(0, 0, 0, 0) 0
)
0 0 / calc(100% - var(--r) / 1.4142135624) no-repeat,
radial-gradient(
var(--r) at calc(100% - var(--r) * 1.4142135624) 50%,
#000 99%,
rgba(0, 0, 0, 0) 101%
),
radial-gradient(var(--r) at top var(--_g)),
radial-gradient(var(--r) at bottom var(--_g));
clip-path: polygon(100% 50%, 0 0, 0 100%);
background: #ffaf65;
}
.swiper-container .swiper-pagination-bullet {
background: #666666;
}
.swiper-container .swiper-pagination-bullet-active {
background: #ffaf65;
}
.policy-modal {
position: fixed;
top: 0;
left: 0;
z-index: 1050;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.policy-modal.is-hidden {
display: none;
}
.policy-modal__dialog {
display: flex;
max-height: 90vh;
width: 95%;
margin: 0.5rem;
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.policy-modal__dialog {
margin: 30px auto;
}
}
.policy-modal__content {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
margin: 30px auto;
width: 100%;
pointer-events: auto;
background-color: #fdfdfd;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
outline: 0;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
}
.policy-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
padding: 15px 20px;
border-bottom: 1px solid #d9d9d9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #666666;
}
.policy-modal__title {
margin-bottom: 0;
line-height: 1.5;
font-size: 1.8rem;
font-weight: normal;
}
.policy-modal__body {
position: relative;
flex: 1 1 auto;
padding: 10px 30px;
font-size: 0.9rem;
overflow-y: auto;
}
@media (max-width: 575.98px) {
.policy-modal__body {
padding: 10px 15px;
}
}
.policy-modal__body ol {
counter-reset: number;
padding-left: 0;
}
.policy-modal__body ol li {
position: relative;
padding: 7px;
padding-left: 30px;
line-height: 1.7;
}
.policy-modal__body ol li p {
font-size: 1.4rem;
}
.policy-modal__body ol li p a {
color: #007bff;
font-size: 1.3rem;
}
.policy-modal__body ol li:before {
position: absolute;
counter-increment: number;
content: counter(number) ". ";
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 0.3em;
font-size: 1.4rem;
color: #666666;
}
.policy-modal__body p {
padding-bottom: 0.5em;
}
.policy-modal__body .ind {
padding-left: 1em;
}
.policy-modal__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 25px 0 20px;
border-top: 1px solid #d9d9d9;
}
.policy-modal__msg-notice {
color: crimson;
font-size: 1.4rem;
font-weight: 500;
text-align: center;
position: absolute;
bottom: 45px;
width: 100%;
margin-bottom: 10px;
}
.policy-modal__msg-notice.is-hidden {
display: none;
}
.policy-modal__btn {
display: inline-block;
text-align: center;
border: 1px solid transparent;
padding: 8px 10px;
font-size: 1.4rem;
line-height: 1;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
cursor: pointer;
margin: 0 5px;
}
@media (min-width: 576px) {
.policy-modal__btn {
width: 20%;
}
}
.policy-modal__btn--primary {
color: #fdfdfd;
background-color: #007bff;
border-color: #007bff;
}
.policy-modal__btn--primary:hover {
background-color: rgb(0, 104.55, 216.75);
border-color: rgb(0, 98.4, 204);
}
.policy-modal__btn--primary[disabled],
.policy-modal__btn--primary.is-disabled {
color: #fdfdfd;
background-color: #95b8e3;
border-color: #95b8e3;
cursor: not-allowed;
}
.policy-modal__btn--secondary {
color: #fdfdfd;
background-color: #666666;
border-color: #666666;
width: 20%;
}
.policy-modal__btn--secondary:hover {
background-color: rgb(82.875, 82.875, 82.875);
border-color: rgb(76.5, 76.5, 76.5);
}     #kv {
position: relative;
overflow: hidden;
}
#kv .bg {
width: 100vw;
max-height: calc(100vh - 100px);
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 499px) {
#kv .bg {
aspect-ratio: 3/4;
}
}
#kv .parts-tl {
position: absolute;
top: 0;
left: 0;
width: 35vw;
}
@media (max-width: 499px) {
#kv .parts-tl {
width: 60vw;
}
}
#kv .parts-br {
position: absolute;
bottom: 0;
right: 0;
width: 35vw;
}
@media (max-width: 499px) {
#kv .parts-br {
width: 60vw;
}
}
#kv .anim-fadein-bg { animation: fadeIn 1.8s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
#kv .anim-fadein-parts { animation: fadeIn 1.8s cubic-bezier(0.5, 0, 0.75, 0) forwards;
animation-delay: 0.6s;
opacity: 0;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#kv .company-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}
#kv .company-name h1 {
color: #17406f;
font-size: clamp(0.1rem, 15vw, 22rem);
font-family: "Nothing You Could Do";
font-weight: 400;
transform: rotate(-7deg);
}
#kv .company-name h1.charfade {
--dur: 0.5s;
--ease: cubic-bezier(0.12, 0, 0.39, 0);
}
#kv .company-name h1.charfade .char {
display: inline-block;
opacity: 0;
transform: translateY(4px);
animation: char-fade var(--dur) var(--ease) forwards;
}
#kv .company-name h1.charfade .char:nth-child(1) {
color: #ffb876;
}
@keyframes char-fade {
to {
opacity: 1;
transform: translateY(0);
}
}
#kv .company-name h1.charfade .char:nth-child(1) {
animation-delay: 2.8s;
}
#kv .company-name h1.charfade .char:nth-child(2) {
animation-delay: 2.87s;
}
#kv .company-name h1.charfade .char:nth-child(3) {
animation-delay: 2.94s;
}
#kv .company-name h1.charfade .char:nth-child(4) {
animation-delay: 3.01s;
}
#kv .company-name h1.charfade .char:nth-child(5) {
animation-delay: 3.08s;
}
#kv .company-name h1.charfade .char:nth-child(6) {
animation-delay: 3.15s;
}
#kv .company-name h1.charfade .char:nth-child(7) {
animation-delay: 3.22s;
}
#kv .company-name h1.charfade .char:nth-child(8) {
animation-delay: 3.29s;
}
#kv .company-name h1.charfade .char:nth-child(9) {
animation-delay: 3.36s;
}
#kv .company-name h1.charfade .char:nth-child(10) {
animation-delay: 3.43s;
}
#kv .company-name h1.charfade .char:nth-child(11) {
animation-delay: 3.5s;
}
#kv .company-name h1.charfade .char:nth-child(12) {
animation-delay: 3.57s;
}
#kv .company-name h1.charfade .char:nth-child(13) {
animation-delay: 3.64s;
}
#kv .company-name h1.charfade .char:nth-child(14) {
animation-delay: 3.71s;
}
#kv .company-name h1.charfade .char:nth-child(15) {
animation-delay: 3.78s;
}
#kv .company-name h1.charfade .char:nth-child(16) {
animation-delay: 3.85s;
}
#kv .company-name h1.charfade .char:nth-child(17) {
animation-delay: 3.92s;
}
#kv .company-name h1.charfade .char:nth-child(18) {
animation-delay: 3.99s;
}
#kv .company-name h1.charfade .char:nth-child(19) {
animation-delay: 4.06s;
}
#kv .company-name h1.charfade .char:nth-child(20) {
animation-delay: 4.13s;
}
#kv .company-name h1.charfade .char:nth-child(21) {
animation-delay: 4.2s;
}
#kv .company-name h1.charfade .char:nth-child(22) {
animation-delay: 4.27s;
}
#kv .company-name h1.charfade .char:nth-child(23) {
animation-delay: 4.34s;
}
#kv .company-name h1.charfade .char:nth-child(24) {
animation-delay: 4.41s;
}
#kv .company-name h1.charfade .char:nth-child(25) {
animation-delay: 4.48s;
}
#kv .company-name h1.charfade .char:nth-child(26) {
animation-delay: 4.55s;
}
#kv .company-name h1.charfade .char:nth-child(27) {
animation-delay: 4.62s;
}
#kv .company-name h1.charfade .char:nth-child(28) {
animation-delay: 4.69s;
}
#kv .company-name h1.charfade .char:nth-child(29) {
animation-delay: 4.76s;
}
#kv .company-name h1.charfade .char:nth-child(30) {
animation-delay: 4.83s;
}
#kv .company-name h1.charfade .char:nth-child(31) {
animation-delay: 4.9s;
}
#kv .company-name h1.charfade .char:nth-child(32) {
animation-delay: 4.97s;
}
#kv .company-name h1.charfade .char:nth-child(33) {
animation-delay: 5.04s;
}
#kv .company-name h1.charfade .char:nth-child(34) {
animation-delay: 5.11s;
}
#kv .company-name h1.charfade .char:nth-child(35) {
animation-delay: 5.18s;
}
#kv .company-name h1.charfade .char:nth-child(36) {
animation-delay: 5.25s;
}
#kv .company-name h1.charfade .char:nth-child(37) {
animation-delay: 5.32s;
}
#kv .company-name h1.charfade .char:nth-child(38) {
animation-delay: 5.39s;
}
#kv .company-name h1.charfade .char:nth-child(39) {
animation-delay: 5.46s;
}
#kv .company-name h1.charfade .char:nth-child(40) {
animation-delay: 5.53s;
}
#kv .company-name h1.charfade .char:nth-child(41) {
animation-delay: 5.6s;
}
#kv .company-name h1.charfade .char:nth-child(42) {
animation-delay: 5.67s;
}
#kv .company-name h1.charfade .char:nth-child(43) {
animation-delay: 5.74s;
}
#kv .company-name h1.charfade .char:nth-child(44) {
animation-delay: 5.81s;
}
#kv .company-name h1.charfade .char:nth-child(45) {
animation-delay: 5.88s;
}
#kv .company-name h1.charfade .char:nth-child(46) {
animation-delay: 5.95s;
}
#kv .company-name h1.charfade .char:nth-child(47) {
animation-delay: 6.02s;
}
#kv .company-name h1.charfade .char:nth-child(48) {
animation-delay: 6.09s;
}
#kv .company-name h1.charfade .char:nth-child(49) {
animation-delay: 6.16s;
}
#kv .company-name h1.charfade .char:nth-child(50) {
animation-delay: 6.23s;
}
#kv .company-name h1.charfade .char:nth-child(51) {
animation-delay: 6.3s;
}
#kv .company-name h1.charfade .char:nth-child(52) {
animation-delay: 6.37s;
}
#kv .company-name h1.charfade .char:nth-child(53) {
animation-delay: 6.44s;
}
#kv .company-name h1.charfade .char:nth-child(54) {
animation-delay: 6.51s;
}
#kv .company-name h1.charfade .char:nth-child(55) {
animation-delay: 6.58s;
}
#kv .company-name h1.charfade .char:nth-child(56) {
animation-delay: 6.65s;
}
#kv .company-name h1.charfade .char:nth-child(57) {
animation-delay: 6.72s;
}
#kv .company-name h1.charfade .char:nth-child(58) {
animation-delay: 6.79s;
}
#kv .company-name h1.charfade .char:nth-child(59) {
animation-delay: 6.86s;
}
#kv .company-name h1.charfade .char:nth-child(60) {
animation-delay: 6.93s;
}
#kv .company-name h1.charfade .char:nth-child(61) {
animation-delay: 7s;
}
#kv .company-name h1.charfade .char:nth-child(62) {
animation-delay: 7.07s;
}
#kv .company-name h1.charfade .char:nth-child(63) {
animation-delay: 7.14s;
}
#kv .company-name h1.charfade .char:nth-child(64) {
animation-delay: 7.21s;
}
#kv .company-name h1.charfade .char:nth-child(65) {
animation-delay: 7.28s;
}
#kv .company-name h1.charfade .char:nth-child(66) {
animation-delay: 7.35s;
}
#kv .company-name h1.charfade .char:nth-child(67) {
animation-delay: 7.42s;
}
#kv .company-name h1.charfade .char:nth-child(68) {
animation-delay: 7.49s;
}
#kv .company-name h1.charfade .char:nth-child(69) {
animation-delay: 7.56s;
}
#kv .company-name h1.charfade .char:nth-child(70) {
animation-delay: 7.63s;
}
#kv .company-name h1.charfade .char:nth-child(71) {
animation-delay: 7.7s;
}
#kv .company-name h1.charfade .char:nth-child(72) {
animation-delay: 7.77s;
}
#kv .company-name h1.charfade .char:nth-child(73) {
animation-delay: 7.84s;
}
#kv .company-name h1.charfade .char:nth-child(74) {
animation-delay: 7.91s;
}
#kv .company-name h1.charfade .char:nth-child(75) {
animation-delay: 7.98s;
}
#kv .company-name h1.charfade .char:nth-child(76) {
animation-delay: 8.05s;
}
#kv .company-name h1.charfade .char:nth-child(77) {
animation-delay: 8.12s;
}
#kv .company-name h1.charfade .char:nth-child(78) {
animation-delay: 8.19s;
}
#kv .company-name h1.charfade .char:nth-child(79) {
animation-delay: 8.26s;
}
#kv .company-name h1.charfade .char:nth-child(80) {
animation-delay: 8.33s;
}
#kv .company-name .line-outer {
position: relative;
bottom: clamp(15px, 5vw, 80px);
width: clamp(250px, 75vw, 1100px);
height: clamp(3px, 1vw, 6px);
margin: 0 auto;
overflow: hidden;
transform: rotate(-7deg);
}
#kv .company-name .line-outer .underline {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50px;
background: linear-gradient(to left, transparent, #17406f);
animation: underline 0.8s cubic-bezier(0.33, 1, 0.68, 1) forwards;
animation-delay: 4.2s;
transform: translateX(-100%);
}
@keyframes underline {
to {
transform: translateX(0);
}
} .top-contents {
position: relative;
overflow: hidden;
background-color: #fdfdfd80;
}
.top-contents .top-contents-fadein {
opacity: 0;
transform: translateY(50px);
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.top-contents .top-contents-fadein.is-in {
opacity: 1;
transform: translateY(0);
}
.top-contents .top-shape-fadein {
opacity: 0;
transform: translateY(30px);
transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.top-contents .top-shape-fadein.is-in {
opacity: 1;
transform: translateY(0);
}
.top-contents .text-align {
text-align: center;
}
@media (max-width: 499px) {
.top-contents .text-align {
text-align: left;
}
}
.top-contents { }
.top-contents .br-br-none {
display: block;
}
@media (max-width: 499px) {
.top-contents .br-br-none {
display: none;
}
}
.top-contents { }
.top-contents .none-br-none {
display: none;
}
@media (max-width: 799px) {
.top-contents .none-br-none {
display: block;
}
}
@media (max-width: 499px) {
.top-contents .none-br-none {
display: none;
}
}
.top-contents { }
.top-contents .title-container h2 {
color: #17406f;
font-size: clamp(3.2rem, 10vw, 7rem);
font-weight: 700;
}
.top-contents .title-container h2 span {
display: inline;
color: #666666;
font-size: clamp(1.2rem, 10vw, 1.44rem);
font-weight: 400;
}
@media (max-width: 399px) {
.top-contents .title-container h2 span {
display: block;
}
}
.top-contents { }
.top-contents .contents-container {
padding: 60px 0;
}
.top-contents .contents-container.pb-0 {
padding-bottom: 0;
}
@media (max-width: 399px) {
.top-contents .contents-container {
padding: 40px 0;
}
}
.top-contents { }
.top-contents .button-container {
text-align: center;
}
.top-contents .button-container.pt-40 {
padding-top: 40px;
}
.top-contents .lh-200 {
line-height: 2;
}
.top-contents .box-w800--inner.top-about {
padding: 60px 40px 80px 40px;
}
@media (max-width: 799px) {
.top-contents .box-w800--inner.top-about {
padding-top: 50px;
padding-bottom: 50px;
}
}
.top-contents .box-w800--inner.member {
padding: 40px 46px 50px 46px;
}
@media (max-width: 799px) {
.top-contents .box-w800--inner.member {
padding-right: 36px;
padding-bottom: 40px;
padding-left: 36px;
}
}
.top-contents .box-w800--inner.news {
padding: 0 25px 20px 25px;
}
.top-contents .box-w800--inner.owned-media {
padding: 60px 80px 80px 80px;
}
@media (max-width: 829px) {
.top-contents .box-w800--inner.owned-media {
padding-right: 60px;
padding-left: 60px;
}
}
@media (max-width: 499px) {
.top-contents .box-w800--inner.owned-media {
padding: 50px 40px;
}
}
.top-contents .box-w800--inner.recruit {
padding: 55px 30px 60px 30px;
}
@media (max-width: 499px) {
.top-contents .box-w800--inner.recruit {
padding-top: 45px;
padding-bottom: 50px;
}
}
.top-contents .box-fit--inner.works {
text-align: center;
padding: 20px;
}
@media (max-width: 699px) {
.top-contents .box-fit--inner.works {
max-width: 360px;
}
}
.top-contents .box-fit--inner.recruit {
padding: 10px;
}
.top-contents section .layout {
margin: 0 auto;
}
.top-contents section {
padding: 100px 20px 75px 20px;
}
@media (max-width: 799px) {
.top-contents section {
padding: 60px 0 75px 0;
}
}
.top-contents p.cp-ja {
padding-left: 30px;
color: #17406f;
font-size: clamp(2.8rem, 5vw, 4.32rem);
font-weight: 500;
text-align: center;
}
.top-contents p.cp-en {
color: #666666;
font-size: clamp(1.2rem, 2vw, 1.44rem);
font-weight: 300;
text-align: center;
}
.top-contents p.cp-msg {
font-size: clamp(1.6rem, 4vw, 1.92rem);
padding-top: 56px;
padding-bottom: 25px;
}
@media (max-width: 499px) {
.top-contents p.dec {
font-size: 1.4rem;
}
}
.top-contents .cp-img {
margin: 0 auto;
padding-top: 60px;
max-width: 544px;
height: 100%;
}
.top-contents { }
@media (max-width: 499px) {
.top-contents .top-about p.navy {
font-size: 1.6rem;
line-height: 1.7;
}
}
.top-contents .top-about.wrap {
display: flex;
padding-top: 28px;
align-items: center;
}
.top-contents .top-about.wrap .img {
margin: 0 auto;
max-width: 242px;
height: 100%;
}
@media (max-width: 859px) {
.top-contents .top-about.wrap .img {
padding-top: 8px;
padding-bottom: 36px;
max-width: 264px;
}
}
.top-contents .top-about.wrap .text {
width: 100%;
}
.top-contents .top-about.wrap .tablet-pt {
display: none;
}
@media (max-width: 859px) {
.top-contents .top-about.wrap .tablet-pt {
display: block;
padding-top: 23px;
}
}
@media (max-width: 859px) {
.top-contents .top-about.wrap {
display: block;
}
}
.top-contents { }
.top-contents .works.content-wrap {
padding-top: 30px;
position: relative;
}
.top-contents .works.content-wrap .biz-item {
z-index: 1;
position: relative;
display: flex;
flex-flow: row wrap-reverse;
justify-content: space-around;
align-items: center;
margin: 0 auto;
height: 385px;
background: transparent;
width: 100%;
}
.top-contents .works.content-wrap .biz-item .biz-title {
padding-bottom: 15px;
color: #17406f;
font-size: 1.6rem;
}
.top-contents .works.content-wrap .biz-item .biz-desc {
font-size: 1.4rem;
font-weight: 400;
}
@media (max-width: 699px) {
.top-contents .works.content-wrap .biz-item {
flex-flow: column;
gap: 20px;
height: 100%;
padding-bottom: 30px;
}
}
.top-contents .works.content-wrap .triangle { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); --b: 1px;
max-width: 70vw;
height: 200px;
aspect-ratio: 3;
background: #333333;
clip-path: polygon(
50% 0,
100% 100%,
0 100%,
50% 0,
50% var(--b),
calc(var(--b) / 0.5857864376) calc(100% - var(--b) / 1.4142135624),
calc(100% - var(--b) / 0.5857864376) calc(100% - var(--b) / 1.4142135624),
50% var(--b)
);
}
@media (max-width: 699px) {
.top-contents .works.content-wrap .triangle {
display: none;
}
}
@media (max-width: 699px) {
.top-contents .works.content-wrap {
padding-top: 40px;
}
}
.top-contents .works.img-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 45px;
}
.top-contents .works.img-wrap .left {
max-width: 200px;
height: 100%;
}
@media (max-width: 529px) {
.top-contents .works.img-wrap .left {
display: none;
}
}
.top-contents .works.img-wrap .right {
max-width: 180px;
height: 100%;
}
@media (max-width: 529px) {
.top-contents .works.img-wrap {
justify-content: center;
padding: 0 0 45px 0;
}
}
.top-contents { }
.top-contents .member.text-wrap {
padding-bottom: 20px;
}
.top-contents { }
.top-contents .news a {
cursor: pointer;
}
.top-contents .news a.content {
display: flex;
justify-content: left;
padding-top: 14px;
padding-bottom: 10px;
border-bottom: 1px solid #f5f4f3;
}
.top-contents .news a.content time {
display: flex;
color: #17406f;
font-size: 1.6rem;
padding-right: 15px;
letter-spacing: 0.2px;
}
@media (max-width: 799px) {
.top-contents .news a.content time {
padding-right: 0;
}
}
@media (max-width: 499px) {
.top-contents .news a.content time {
font-size: 1.5rem;
}
}
@media (max-width: 499px) {
.top-contents .news a.content p {
font-size: 1.44rem;
line-height: 1.7;
}
}
@media (max-width: 799px) {
.top-contents .news a.content {
flex-direction: column;
}
}
.top-contents { }
@media (max-width: 499px) {
.top-contents .owned-media p.navy {
font-size: 1.6rem;
}
}
.top-contents .owned-media.text-wrap .inner {
padding-top: 30px;
padding-bottom: 45px;
}
.top-contents .owned-media.article-wrap {
display: flex;
justify-content: space-between;
}
.top-contents .owned-media.article-wrap article {
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article {
max-width: 300px;
max-height: 180px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.18);
}
}
.top-contents .owned-media.article-wrap article a {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.top-contents .owned-media.article-wrap article a .img {
flex-basis: 50%;
height: 50%;
}
.top-contents .owned-media.article-wrap article a .img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article a .img {
height: 100%;
flex-basis: 100%;
}
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article a .text-contents {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #f6f6f6, transparent);
}
}
.top-contents .owned-media.article-wrap article a .text-contents .wrap {
flex-basis: 50%;
padding: 15px;
}
@media (max-width: 769px) {
.top-contents
.owned-media.article-wrap
article
a
.text-contents
.wrap
.title-wrap {
padding-left: 8px;
border-left: 4px solid #ffb876;
}
}
.top-contents
.owned-media.article-wrap
article
a
.text-contents
.wrap
.title-wrap
.title {
padding-top: 4px;
padding-bottom: 10px;
color: #666666;
font-size: 1.4rem;
font-weight: 500;
}
@media (max-width: 769px) {
.top-contents
.owned-media.article-wrap
article
a
.text-contents
.wrap
.title-wrap
.title {
padding: 0;
color: #666666;
font-size: 1.44rem;
font-weight: 600;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.top-contents
.owned-media.article-wrap
article
a
.text-contents
.wrap
.title-wrap
time {
color: #666666;
font-size: 1rem;
font-weight: 300;
letter-spacing: 0.2px;
}
@media (max-width: 769px) {
.top-contents
.owned-media.article-wrap
article
a
.text-contents
.wrap
.title-wrap
time {
font-weight: 400;
}
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article a .text-contents .wrap {
position: absolute;
left: 0;
bottom: 0;
flex-basis: none;
width: 100%;
padding: 0 12px 10px 12px;
}
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article a {
position: relative;
}
}
.top-contents .owned-media.article-wrap article:hover {
transform: translateY(-4px);
box-shadow: 0 4px 21px rgba(0, 0, 0, 0.08);
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap article:hover {
transform: scale(1.02);
box-shadow: 0 2px 21px rgba(0, 0, 0, 0.18);
}
}
@media (max-width: 769px) {
.top-contents .owned-media.article-wrap {
flex-direction: column;
align-items: center;
gap: 18px;
}
}
.top-contents { }
@media (max-width: 499px) {
.top-contents .recruit p.navy {
font-size: 1.6rem;
}
}
.top-contents .recruit.text-wrap {
padding-bottom: 60px;
}
.top-contents .recruit.text-wrap .inner {
padding-top: 30px;
padding-bottom: 30px;
}
@media (max-width: 799px) {
.top-contents .recruit.text-wrap {
padding-bottom: 40px;
}
}
@media (max-width: 499px) {
.top-contents .recruit.text-wrap {
padding-bottom: 30px;
}
}
.top-contents .recruit.content-wrap {
display: flex;
align-items: center;
}
.top-contents .recruit.content-wrap .chart {
display: flex;
justify-content: space-between;
width: 100%;
}
@media (max-width: 799px) {
.top-contents .recruit.content-wrap .chart {
justify-content: space-evenly;
padding-bottom: 40px;
}
}
@media (max-width: 499px) {
.top-contents .recruit.content-wrap .chart {
flex-direction: column;
align-items: center;
padding-bottom: 0;
}
.top-contents .recruit.content-wrap .chart p.base {
font-size: 1.44rem;
}
}
.top-contents .recruit.content-wrap .chart .s-leave .pt {
padding-top: 10px;
}
@media (max-width: 499px) {
.top-contents .recruit.content-wrap .chart .s-leave .pt {
padding-top: 10px;
padding-bottom: 30px;
}
}
.top-contents .recruit.content-wrap .chart .s-leave {
display: flex;
flex-direction: column;
align-items: center;
}
.top-contents .recruit.content-wrap .chart .age .pt {
padding-top: 30px;
}
@media (max-width: 499px) {
.top-contents .recruit.content-wrap .chart .age .pt {
padding-top: 10px;
padding-bottom: 30px;
}
}
.top-contents .recruit.content-wrap .chart .age {
display: flex;
flex-direction: column;
align-items: center;
}
.top-contents .recruit.content-wrap .text {
width: 100%;
text-align: center;
}
@media (max-width: 499px) {
.top-contents .recruit.content-wrap .text {
text-align: left;
}
}
@media (max-width: 799px) {
.top-contents .recruit.content-wrap {
flex-direction: column;
}
}
.top-contents .recruit.entry-wrap {
display: flex;
justify-content: center;
text-align: center;
}
.top-contents .recruit.entry-wrap .wrap {
position: relative;
padding-top: 50px;
}
.top-contents .recruit.entry-wrap .wrap .img {
position: absolute;
top: 0;
left: -55px;
max-width: 100px;
height: 100%;
}
.top-contents { }
.top-contents .shape {
position: absolute;
}
.top-contents .shape.dot1 {
top: 21%;
right: -5vw;
width: 20vw;
}
.top-contents .shape.dot2 {
top: 50%;
left: -5vw;
width: 18vw;
}
.top-contents .shape.fill {
top: 50.5%;
left: -1vw;
width: 20vw;
}
.top-contents .shape.dot3 {
top: 80%;
right: -8vw;
width: 26vw;
}
@media (max-width: 1023px) {
.top-contents .shape {
display: none;
}
}
.top-contents .shape-move {
animation: shape-move 3s ease-in-out infinite alternate;
transition: 0.5s ease-in-out;
}
@keyframes shape-move {
0% {
transform: translate(0, 0) rotate(-3deg);
}
50% {
transform: translate(0, -1px) rotate(0deg);
}
100% {
transform: translate(0, 0) rotate(5deg);
}
}
@media (max-width: 799px) {
.links-page_basic .layout.w800,
.links-page_ios .layout.w800 {
padding-left: 20px;
padding-right: 20px;
}
}
.links-page_basic .links-contents,
.links-page_ios .links-contents {
margin-bottom: 80px;
}
.links-page_basic .links-contents h3.title_navy,
.links-page_ios .links-contents h3.title_navy {
color: #17406f;
font-size: 2rem;
line-height: 2;
font-weight: normal;
}
@media (max-width: 799px) {
.links-page_basic .links-contents h3.title_navy,
.links-page_ios .links-contents h3.title_navy {
font-size: 1.6rem;
line-height: 1.4;
margin-bottom: 5px;
}
}
.links-page_basic .links-contents p.bp799,
.links-page_ios .links-contents p.bp799 {
line-height: 1.6;
}
@media (max-width: 799px) {
.links-page_basic .links-contents p.bp799,
.links-page_ios .links-contents p.bp799 {
line-height: 1.7;
}
}
.links-page_basic .links-contents p.bp799.right,
.links-page_ios .links-contents p.bp799.right {
text-align: right;
}
.links-page_basic .links-contents p.bp799.loose,
.links-page_ios .links-contents p.bp799.loose {
line-height: 2;
}
.links-page_basic .links-contents p.bp799.ind,
.links-page_ios .links-contents p.bp799.ind {
margin: 10px 0 10px 1.5em;
}
.links-page_basic .links-contents p.bp799.ind2,
.links-page_ios .links-contents p.bp799.ind2 {
margin-left: 3em;
margin-bottom: 10px;
}
.links-page_basic .links-contents .cnt,
.links-page_ios .links-contents .cnt {
margin-bottom: 30px;
}
.links-page_basic .links-contents .cnt_flex,
.links-page_ios .links-contents .cnt_flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.links-page_basic .links-contents .cnt_flex a.linkline,
.links-page_ios .links-contents .cnt_flex a.linkline {
color: #0d6efd;
text-decoration: underline;
}
@media (max-width: 799px) {
.links-page_basic .links-contents .cnt_flex a.linkline,
.links-page_ios .links-contents .cnt_flex a.linkline {
font-size: 14px;
}
}
@media (max-width: 799px) {
.links-page_basic .links-contents .cnt_flex,
.links-page_ios .links-contents .cnt_flex {
flex-direction: column;
text-align: center;
}
.links-page_basic .links-contents .cnt_flex > .end,
.links-page_ios .links-contents .cnt_flex > .end {
align-self: flex-end;
}
}
.links-page_basic .links-contents .cnt_flex.center,
.links-page_ios .links-contents .cnt_flex.center {
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 70vh;
gap: 40px;
}
.links-page_basic .links-contents .cnt_flex img,
.links-page_ios .links-contents .cnt_flex img {
max-width: 80px;
width: 100%;
margin: 20px;
aspect-ratio: 1/1;
}
.links-page_basic .links-contents .cnt a.linkline,
.links-page_ios .links-contents .cnt a.linkline {
color: #0d6efd;
text-decoration: underline;
}
@media (max-width: 799px) {
.links-page_basic .links-contents .cnt a.linkline,
.links-page_ios .links-contents .cnt a.linkline {
font-size: 14px;
}
}
.links-page_basic .links-contents .cnt .table-responsive,
.links-page_ios .links-contents .cnt .table-responsive {
overflow-x: auto;
margin-bottom: 20px;
-webkit-overflow-scrolling: touch;
}
.links-page_basic .links-contents .cnt .table-responsive .table,
.links-page_ios .links-contents .cnt .table-responsive .table {
width: 100%;
min-width: 760px;
border-collapse: collapse;
font-size: 16px;
}
@media (max-width: 799px) {
.links-page_basic .links-contents .cnt .table-responsive .table,
.links-page_ios .links-contents .cnt .table-responsive .table {
font-size: 14px;
}
}
.links-page_basic .links-contents .cnt .table-responsive .table th,
.links-page_basic .links-contents .cnt .table-responsive .table td,
.links-page_ios .links-contents .cnt .table-responsive .table th,
.links-page_ios .links-contents .cnt .table-responsive .table td {
padding: 10px;
border: 1px solid #cccccc;
vertical-align: top;
color: #666666;
text-align: left;
line-height: 1.6;
white-space: nowrap;
}
.links-page_basic .links-contents .cnt .table-responsive .table th .origin,
.links-page_basic .links-contents .cnt .table-responsive .table td .origin,
.links-page_ios .links-contents .cnt .table-responsive .table th .origin,
.links-page_ios .links-contents .cnt .table-responsive .table td .origin {
list-style: inside;
}
.links-page_basic .links-contents .cnt .table-responsive .table th,
.links-page_ios .links-contents .cnt .table-responsive .table th {
background-color: #f6f6f6;
font-weight: bold;
text-align: center;
}
.links-page_basic .links-contents .cnt .table-responsive .table tbody tr,
.links-page_ios .links-contents .cnt .table-responsive .table tbody tr {
background-color: rgba(255, 255, 255, 0.537254902);
}
.links-page_basic .links-contents .cnt ol.num_list,
.links-page_ios .links-contents .cnt ol.num_list {
margin-left: 1.5em;
list-style-type: decimal;
}
.links-page_basic .links-contents .cnt ol.num_list > li,
.links-page_ios .links-contents .cnt ol.num_list > li {
color: #666666;
font-size: 1.6rem;
line-height: 1.6;
}
@media (max-width: 799px) {
.links-page_basic .links-contents .cnt ol.num_list > li,
.links-page_ios .links-contents .cnt ol.num_list > li {
font-size: 1.4rem;
line-height: 1.4;
margin-bottom: 10px;
}
}
@media (max-width: 799px) {
.about_basic .cp-container p,
.about_ios .cp-container p {
color: #17406f;
border-bottom: 2px solid #17406f;
}
}
.about_basic .about-header,
.about_ios .about-header {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 180px 0 80px;
}
.about_basic .about-header .page-title,
.about_ios .about-header .page-title {
font-size: 96px;
font-weight: 700;
color: #17406f;
letter-spacing: 0.05em;
margin-left: 20%;
margin-bottom: 10px;
}
.about_basic .about-header .page-subtitle,
.about_ios .about-header .page-subtitle {
font-size: 24px;
font-weight: 500;
color: #17406f;
margin-left: 20%;
margin-bottom: 50px;
}
.about_basic .about-body,
.about_ios .about-body {
margin: 0 auto 95px;
}
.about_basic .about-body > .layout.w800,
.about_ios .about-body > .layout.w800 {
display: flex;
justify-content: center;
align-items: center;
-moz-column-gap: 40px;
column-gap: 40px;
}
@media (max-width: 799px) {
.about_basic .about-body > .layout.w800,
.about_ios .about-body > .layout.w800 {
flex-direction: column;
}
}
.about_basic .about-body .about-text,
.about_ios .about-body .about-text {
font-size: 18px;
line-height: 2;
color: #666666;
width: 50%;
}
@media (max-width: 799px) {
.about_basic .about-body .about-text,
.about_ios .about-body .about-text {
width: 100%;
}
}
.about_basic .about-body .about-text p,
.about_ios .about-body .about-text p {
margin-bottom: 24px;
white-space: normal;
}
@media (max-width: 799px) {
.about_basic .about-body .about-text p,
.about_ios .about-body .about-text p {
font-size: 1.6rem;
}
}
.about_basic .about-body .about-image,
.about_ios .about-body .about-image {
max-width: 350px;
height: 178px;
}
@media (max-width: 799px) {
.about_basic .about-body .about-image,
.about_ios .about-body .about-image {
width: 100%;
margin: 0 auto;
}
}
.about_basic .about-body .about-image img,
.about_ios .about-body .about-image img {
width: 100%;
height: auto;
border-radius: 25px;
}
.about_basic .about-bottom,
.about_ios .about-bottom {
z-index: 1;
text-align: center;
padding: 0 120px;
margin-bottom: 114px;
}
@media (max-width: 799px) {
.about_basic .about-bottom,
.about_ios .about-bottom {
padding: 0;
}
}
.about_basic .about-bottom .about-visuals,
.about_ios .about-bottom .about-visuals {
display: flex;
justify-content: space-between;
align-items: center;
}
@media (max-width: 799px) {
.about_basic .about-bottom .about-visuals,
.about_ios .about-bottom .about-visuals {
display: none;
}
}
.about_basic .about-bottom .about-visuals img,
.about_ios .about-bottom .about-visuals img {
display: block;
border-radius: 25px;
}
.about_basic .about-bottom .about-visuals img.about-tapestry,
.about_ios .about-bottom .about-visuals img.about-tapestry {
border: 1px solid #d9d9d9;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.about_basic .about-bottom .about-visuals img:nth-child(1),
.about_ios .about-bottom .about-visuals img:nth-child(1) {
width: 242px;
}
.about_basic .about-bottom .about-visuals img:nth-child(2),
.about_ios .about-bottom .about-visuals img:nth-child(2) {
width: 380px;
height: 238px;
}
.about_basic #about-philosophy,
.about_ios #about-philosophy {
margin: 70px auto;
}
@media (max-width: 799px) {
.about_basic #about-philosophy,
.about_ios #about-philosophy {
margin: 30px auto;
}
}
.about_basic #about-philosophy .philosophy-inner,
.about_ios #about-philosophy .philosophy-inner {
margin: 140px auto;
display: flex;
align-items: center;
justify-content: space-between;
}
@media (max-width: 799px) {
.about_basic #about-philosophy .philosophy-inner,
.about_ios #about-philosophy .philosophy-inner {
flex-direction: column;
margin: 70px auto;
gap: 2rem;
}
}
.about_basic #about-philosophy .philosophy-image img,
.about_ios #about-philosophy .philosophy-image img {
display: block;
border-radius: 25px;
width: 380px;
height: 252px;
border: 1px solid #d9d9d9;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.about_basic #about-philosophy .philosophy-text,
.about_ios #about-philosophy .philosophy-text {
flex: 0 1 auto;
text-align: center;
color: #666666;
}
.about_basic #about-philosophy .philosophy-text .philosophy-block,
.about_ios #about-philosophy .philosophy-text .philosophy-block {
display: inline-block;
margin-bottom: 24px;
}
.about_basic #about-philosophy .philosophy-text .philosophy-block p,
.about_ios #about-philosophy .philosophy-text .philosophy-block p {
font-size: 24px;
font-weight: 700;
color: #ffaf65;
border-bottom: 2px solid #ffaf65;
padding-bottom: 0px;
margin: 0;
display: inline-block;
}
@media (max-width: 799px) {
.about_basic #about-philosophy .philosophy-text .philosophy-block p,
.about_ios #about-philosophy .philosophy-text .philosophy-block p {
font-size: 1.6rem;
}
}
.about_basic #about-philosophy .philosophy-text p,
.about_ios #about-philosophy .philosophy-text p {
font-size: 16px;
line-height: 2;
margin: 0 0 30px;
}
@media (max-width: 799px) {
.about_basic #about-philosophy .philosophy-text p,
.about_ios #about-philosophy .philosophy-text p {
font-size: 1.4rem;
}
}
.about_basic #about-message,
.about_ios #about-message {
margin: 130px auto 120px;
}
@media (max-width: 820px) {
.about_basic #about-message,
.about_ios #about-message {
margin: 35px auto 30px;
}
}
.about_basic #about-message .message-box,
.about_ios #about-message .message-box {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0 15px;
}
@media (max-width: 820px) {
.about_basic #about-message .message-box,
.about_ios #about-message .message-box {
flex-direction: column;
gap: 40px;
padding: 0;
}
}
@media (max-width: 520px) {
.about_basic #about-message .message-box,
.about_ios #about-message .message-box {
padding: 0;
}
}
.about_basic #about-message .message-image,
.about_ios #about-message .message-image {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (max-width: 820px) {
.about_basic #about-message .message-image,
.about_ios #about-message .message-image {
flex-direction: row;
justify-content: center;
align-items: center;
}
}
@media (max-width: 520px) {
.about_basic #about-message .message-image,
.about_ios #about-message .message-image {
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
}
}
.about_basic #about-message .message-image img,
.about_ios #about-message .message-image img {
margin: 0 auto;
display: block;
max-width: 300px;
min-width: 250px;
width: 100%;
aspect-ratio: 1/1;
}
@media (max-width: 520px) {
.about_basic #about-message .message-image img,
.about_ios #about-message .message-image img {
max-width: 250px;
min-width: 200px;
text-align: center;
}
}
.about_basic #about-message .message-image .message-person,
.about_ios #about-message .message-image .message-person {
width: 100%;
display: flex;
flex-direction: column;
line-height: 1.5;
}
.about_basic #about-message .message-image .message-person .person-position,
.about_ios #about-message .message-image .message-person .person-position {
font-size: 16px;
font-weight: 600;
line-height: 2;
color: #666666;
text-align: left;
margin-left: 20%;
}
@media (max-width: 820px) {
.about_basic #about-message .message-image .message-person .person-position,
.about_ios #about-message .message-image .message-person .person-position {
margin-left: 10%;
}
}
.about_basic #about-message .message-image .message-person .person-name,
.about_ios #about-message .message-image .message-person .person-name {
text-align: right;
margin: 0 20% 0 0;
font-size: clamp(1.6rem, 3vw, 40px);
font-weight: 400;
color: #666666;
}
@media (max-width: 820px) {
.about_basic #about-message .message-image .message-person .person-name,
.about_ios #about-message .message-image .message-person .person-name {
font-size: 35px;
font-weight: 300;
margin: 0 0 0 25%;
}
}
@media (max-width: 520px) {
.about_basic #about-message .message-image .message-person .person-name,
.about_ios #about-message .message-image .message-person .person-name {
margin: 0 20% 0 0;
}
}
.about_basic #about-message .message-text,
.about_ios #about-message .message-text {
text-align: left;
background-color: #f5f4f3;
padding: 100px 28px 100px;
border-radius: 50px;
position: relative;
}
.about_basic #about-message .message-text .message-title,
.about_ios #about-message .message-text .message-title {
position: absolute;
top: -54px;
left: 54px;
}
.about_basic #about-message .text,
.about_ios #about-message .text {
flex: 2;
width: 100%;
max-width: 750px;
}
.about_basic #about-message .text p,
.about_ios #about-message .text p {
font-size: 1.6rem;
line-height: 2;
color: #666666;
white-space: normal;
}
.about_basic #about-message .text p.bt_space,
.about_ios #about-message .text p.bt_space {
margin-bottom: 4rem;
}
@media (max-width: 820px) {
.about_basic #about-message,
.about_ios #about-message {
flex-direction: column;
text-align: center;
gap: 40px;
}
.about_basic #about-message .layout,
.about_ios #about-message .layout {
padding: 0;
}
.about_basic #about-message .message-image,
.about_basic #about-message .message-text,
.about_ios #about-message .message-image,
.about_ios #about-message .message-text {
max-width: 100%;
flex: 1 1 100%;
}
.about_basic #about-message .message-text,
.about_ios #about-message .message-text {
text-align: left;
border-radius: 25px;
padding-bottom: 6rem;
font-size: 1.4rem;
margin-top: 15rem;
}
.about_basic #about-message .message-text p,
.about_ios #about-message .message-text p {
font-size: 1.4rem;
line-height: 1.8;
}
.about_basic #about-message .message-text .message-title,
.about_ios #about-message .message-text .message-title {
margin: 0 auto 24px;
font-size: 4.8rem;
font-weight: 300;
top: -42px;
left: 25px;
}
}
.about_basic #about-history,
.about_ios #about-history {
position: relative;
width: min(90%, 900px);
margin: 0 auto 120px;
color: #666666;
}
@media screen and (max-width: 499px) {
.about_basic #about-history,
.about_ios #about-history {
width: 100%;
}
}
@media (max-width: 499px) {
.about_basic #about-history > .layout,
.about_ios #about-history > .layout {
padding: 0;
}
}
.about_basic #about-history h2,
.about_ios #about-history h2 {
margin-bottom: 54px;
}
.about_basic #about-history .center,
.about_ios #about-history .center {
text-align: center;
}
.about_basic #about-history .history-title,
.about_ios #about-history .history-title {
font-size: 48px;
font-weight: 300;
color: #666666;
text-align: center;
margin-bottom: 80px;
}
.about_basic #about-history .history-list,
.about_ios #about-history .history-list {
position: relative;
margin: 60px auto;
padding-left: 70px;
max-width: 800px;
list-style: none;
}
@media (max-width: 799px) {
.about_basic #about-history .history-list,
.about_ios #about-history .history-list {
padding-left: 40px;
}
}
.about_basic #about-history .history-list::before,
.about_ios #about-history .history-list::before {
content: "";
position: absolute;
top: 10px;
left: 30px;
width: 1px;
height: 95%;
}
@media screen and (min-width: 499px) and (max-width: 799px) {
.about_basic #about-history .history-list::before,
.about_ios #about-history .history-list::before {
height: 92%;
}
}
@media screen and (max-width: 499px) {
.about_basic #about-history .history-list::before,
.about_ios #about-history .history-list::before {
height: 91%;
}
}
.about_basic #about-history .history-list::before,
.about_ios #about-history .history-list::before {
background-color: #cc7524;
}
.about_basic #about-history .history-list li,
.about_ios #about-history .history-list li {
position: relative;
display: flex;
align-items: flex-start;
gap: 42px;
}
.about_basic #about-history .history-list li::before,
.about_ios #about-history .history-list li::before {
content: "";
position: absolute;
top: 8px;
left: -47px;
width: 15px;
height: 15px;
background-color: #c3b9ac;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.about_basic #about-history .history-list li .year,
.about_ios #about-history .history-list li .year {
flex: 0 0 60px;
color: #17406f;
font-weight: 400;
font-size: 1.6rem;
text-align: right;
line-height: 2;
margin-left: -20px;
}
.about_basic #about-history .history-list li .event,
.about_ios #about-history .history-list li .event {
flex: 1;
color: #666666;
line-height: 2;
font-weight: 400;
font-size: 1.6rem;
}
.about_basic #about-history .history-list li:last-child,
.about_ios #about-history .history-list li:last-child {
margin-bottom: 0;
}
@media (max-width: 799px) {
.about_basic #about-history .history-list,
.about_ios #about-history .history-list {
padding-left: 40px;
}
.about_basic #about-history .history-list::before,
.about_ios #about-history .history-list::before {
left: 16px;
top: 20px;
}
.about_basic #about-history .history-list li,
.about_ios #about-history .history-list li {
flex-direction: column;
gap: 6px;
margin-bottom: 24px;
}
.about_basic #about-history .history-list li::before,
.about_ios #about-history .history-list li::before {
left: -29.5px;
top: 11px;
width: 14px;
height: 14px;
}
}
@media (max-width: 799px) and (max-width: 499px) {
.about_basic #about-history .history-list li::before,
.about_ios #about-history .history-list li::before {
left: -29.9px;
}
}
@media (max-width: 799px) {
.about_basic #about-history .history-list li .year,
.about_ios #about-history .history-list li .year {
text-align: left;
font-size: 16px;
margin: 0;
flex: 0 0 auto;
}
.about_basic #about-history .history-list li .event,
.about_ios #about-history .history-list li .event {
font-size: 15px;
line-height: 1.5;
}
}
.about_basic #about-history .history-list .listmargin-L,
.about_ios #about-history .history-list .listmargin-L {
margin-bottom: 120px;
}
.about_basic #about-history .history-list .listmargin-M,
.about_ios #about-history .history-list .listmargin-M {
margin-bottom: 90px;
}
.about_basic #about-history .history-list .listmargin-S,
.about_ios #about-history .history-list .listmargin-S {
margin-bottom: 60px;
}
@media screen and (min-width: 499px) and (max-width: 799px) {
.about_basic #about-history .history-list .listmargin-L,
.about_ios #about-history .history-list .listmargin-L {
margin-bottom: 80px;
}
.about_basic #about-history .history-list .listmargin-M,
.about_ios #about-history .history-list .listmargin-M {
margin-bottom: 60px;
}
.about_basic #about-history .history-list .listmargin-S,
.about_ios #about-history .history-list .listmargin-S {
margin-bottom: 40px;
}
}
@media (max-width: 499px) {
.about_basic #about-history .history-list span.event,
.about_ios #about-history .history-list span.event {
font-size: 1.3rem;
}
.about_basic #about-history .history-list .listmargin-L,
.about_ios #about-history .history-list .listmargin-L {
margin-bottom: 40px;
}
.about_basic #about-history .history-list .listmargin-M,
.about_ios #about-history .history-list .listmargin-M {
margin-bottom: 30px;
}
.about_basic #about-history .history-list .listmargin-S,
.about_ios #about-history .history-list .listmargin-S {
margin-bottom: 20px;
}
}
.about_basic #aboutinfo-wrap,
.about_ios #aboutinfo-wrap {
background-color: #f5f4f3;
padding: 100px 0 100px;
}
@media (max-width: 799px) {
.about_basic #aboutinfo-wrap,
.about_ios #aboutinfo-wrap {
padding: 50px 12px;
}
}
.about_basic #aboutinfo-wrap .infobox,
.about_ios #aboutinfo-wrap .infobox {
padding: 58px 68px;
margin: 0 auto 60px;
}
@media (max-width: 799px) {
.about_basic #aboutinfo-wrap .infobox,
.about_ios #aboutinfo-wrap .infobox {
padding: 20px 12px 10%;
margin: 0 auto 60px;
border-radius: 15px;
}
}
.about_basic #aboutinfo-wrap .infobox .info-title,
.about_ios #aboutinfo-wrap .infobox .info-title {
text-align: center;
font-size: 1.92rem;
font-weight: 600;
color: #17406f;
letter-spacing: 0.04em;
margin: 0 0 38px;
}
@media (max-width: 799px) {
.about_basic #aboutinfo-wrap .infobox .info-title,
.about_ios #aboutinfo-wrap .infobox .info-title {
font-size: 1.7rem;
}
}
.about_basic #aboutinfo-wrap .infobox .info-text,
.about_ios #aboutinfo-wrap .infobox .info-text {
margin-bottom: 36px;
}
.about_basic #aboutinfo-wrap .infobox .info-text p,
.about_ios #aboutinfo-wrap .infobox .info-text p {
margin-bottom: 24px;
font-size: 1.6rem;
line-height: 2;
color: #666666;
font-weight: 400;
text-align: left;
}
@media (max-width: 799px) {
.about_basic #aboutinfo-wrap .infobox .info-text p,
.about_ios #aboutinfo-wrap .infobox .info-text p {
font-size: 1.4rem;
line-height: 1.8;
}
}
.about_basic #aboutinfo-wrap .infobox .info-row,
.about_ios #aboutinfo-wrap .infobox .info-row {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
}
@media (max-width: 799px) {
.about_basic #aboutinfo-wrap .infobox .info-row,
.about_ios #aboutinfo-wrap .infobox .info-row {
flex-direction: column;
}
}
.about_basic #aboutinfo-wrap .infobox .info-row .leftbox p.link,
.about_ios #aboutinfo-wrap .infobox .info-row .leftbox p.link {
font-size: 1.2rem;
color: #666666;
text-align: center;
}
.about_basic #aboutinfo-wrap .infobox .info-row .leftbox p.link a,
.about_ios #aboutinfo-wrap .infobox .info-row .leftbox p.link a {
font-size: 1.2rem;
color: #666666;
}
.about_basic #aboutinfo-wrap .infobox .info-row .leftbox img.size-1,
.about_ios #aboutinfo-wrap .infobox .info-row .leftbox img.size-1 {
width: 250px;
}
.about_basic #aboutinfo-wrap .infobox .info-row .leftbox img.size-2,
.about_ios #aboutinfo-wrap .infobox .info-row .leftbox img.size-2 {
width: 153px;
}
.about_basic #aboutinfo-wrap .infobox .info-row .leftbox img.size-3,
.about_ios #aboutinfo-wrap .infobox .info-row .leftbox img.size-3 {
width: 137px;
}
.about_basic #about-company,
.about_ios #about-company {
width: min(90%, 900px);
margin: 0 auto 120px;
color: #666666;
text-align: center;
padding-top: 80px;
}
@media (max-width: 854px) {
.about_basic #about-company,
.about_ios #about-company {
padding-top: 0px;
width: 100%;
}
.about_basic #about-company .decorated-line2,
.about_ios #about-company .decorated-line2 {
max-width: 90vw;
}
}
.about_basic #about-company h2,
.about_ios #about-company h2 {
margin-bottom: 37px;
}
.about_basic #about-company .company-title,
.about_ios #about-company .company-title {
font-size: 32px;
font-weight: 300;
color: #666666;
margin-bottom: 10px;
}
.about_basic #about-company .company-title::after,
.about_ios #about-company .company-title::after {
content: "";
display: block;
width: 100%;
height: 14px;
border-top: 1px solid #cc7524;
border-bottom: 1px solid #cc7524;
margin-top: 5px;
}
.about_basic #about-company .company-table,
.about_ios #about-company .company-table {
border-top: none;
border-bottom: none;
}
.about_basic #about-company .company-table .company-line,
.about_ios #about-company .company-table .company-line {
display: flex;
justify-content: center;
align-items: center;
text-align: left;
padding: 30px 40px;
}
@media (max-width: 799px) {
.about_basic #about-company .company-table .company-line,
.about_ios #about-company .company-table .company-line {
align-items: flex-start;
flex-direction: column;
padding: 24px 10px;
}
}
.about_basic #about-company .company-table .company-line:last-child,
.about_ios #about-company .company-table .company-line:last-child {
border-bottom: none;
}
.about_basic #about-company .company-table .company-line .label,
.about_ios #about-company .company-table .company-line .label {
flex: 0 0 200px;
font-weight: 700;
color: #666666;
text-align: left;
font-size: 1.6rem;
}
@media (max-width: 799px) {
.about_basic #about-company .company-table .company-line .label,
.about_ios #about-company .company-table .company-line .label {
flex: 0 0 20px;
}
}
.about_basic #about-company .company-table .company-line .value,
.about_ios #about-company .company-table .company-line .value {
flex: 1;
font-weight: 400;
color: #666666;
font-size: 1.44rem;
line-height: 1.8;
}
.about_basic #about-access,
.about_ios #about-access {
background: #f5f4f3;
position: relative;
}
.about_basic #about-access h2,
.about_ios #about-access h2 {
position: absolute;
top: -55px;
}
@media (max-width: 799px) {
.about_basic #about-access h2,
.about_ios #about-access h2 {
font-size: 4.8rem;
top: -42px;
left: 1.6rem;
}
}
.about_basic #about-access .access-inner,
.about_ios #about-access .access-inner {
width: min(90%, 900px);
margin: 0 auto;
text-align: left;
color: #333333;
padding: 78px 0 67px;
}
.about_basic #about-access .access-title,
.about_ios #about-access .access-title {
font-size: 64px;
font-weight: 300;
color: #17406f;
margin-bottom: 40px;
position: absolute;
top: -56px;
}
.about_basic #about-access .access-info,
.about_ios #about-access .access-info {
margin-bottom: 30px;
}
.about_basic #about-access .access-info p,
.about_ios #about-access .access-info p {
font-size: 1.6rem;
line-height: 2;
font-weight: 400;
}
.about_basic #about-access .access-map,
.about_ios #about-access .access-map {
width: 100%;
border-radius: 15px;
overflow: hidden;
margin-bottom: 40px;
}
.about_basic #about-access .access-map iframe,
.about_ios #about-access .access-map iframe {
width: 100%;
height: 400px;
border: none;
display: block;
}
.about_basic #about-access .access-transport p,
.about_ios #about-access .access-transport p {
font-size: 1.6rem;
line-height: 2;
font-weight: 400;
color: #666666;
}
@media (max-width: 799px) {
.about_basic #about-access .access-title,
.about_ios #about-access .access-title {
font-size: 48px;
text-align: center;
top: -42px;
}
.about_basic #about-access .access-inner,
.about_ios #about-access .access-inner {
width: 100%;
}
.about_basic #about-access .access-inner p,
.about_ios #about-access .access-inner p {
margin-left: 2rem;
}
.about_basic #about-access .access-map,
.about_ios #about-access .access-map {
border-radius: 0;
margin-bottom: 1rem;
}
.about_basic #about-access .layout,
.about_ios #about-access .layout {
padding: 0;
width: 100%;
}
.about_basic #about-access .access-map iframe,
.about_ios #about-access .access-map iframe {
height: 300px;
}
}
.news_basic .page-contents,
.news_ios .page-contents {
color: #666666;
padding-bottom: 100px;
}
.news_basic .page-contents .page-header,
.news_ios .page-contents .page-header {
text-align: center;
margin-bottom: 80px;
}
.news_basic .page-contents .page-header p.title-l,
.news_ios .page-contents .page-header p.title-l {
font-weight: 500;
color: #17406f;
margin-bottom: 8px;
line-height: 1;
}
.news_basic .page-contents .page-header .sub,
.news_ios .page-contents .page-header .sub {
font-size: 24px;
color: #17406f;
font-weight: 400;
}
.news_basic .page-contents .news-list,
.news_ios .page-contents .news-list {
margin: 0 auto;
}
.news_basic .page-contents .news-list ul,
.news_ios .page-contents .news-list ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 60px;
}
.news_basic .page-contents .news-list .news-item,
.news_ios .page-contents .news-list .news-item {
border-bottom: 2px solid #bbbbbb;
padding-bottom: 60px;
}
@media (max-width: 799px) {
.news_basic .page-contents .news-list .news-item,
.news_ios .page-contents .news-list .news-item {
padding-bottom: 40px;
}
}
@media (max-width: 499px) {
.news_basic .page-contents .news-list .news-item,
.news_ios .page-contents .news-list .news-item {
padding-bottom: 30px;
}
}
.news_basic .page-contents .news-list .news-item .news-link,
.news_ios .page-contents .news-list .news-item .news-link {
display: flex;
align-items: center;
gap: 40px;
text-decoration: none;
color: inherit;
transition: opacity 0.3s ease;
width: 800px;
margin: 0 auto;
}
@media (max-width: 799px) {
.news_basic .page-contents .news-list .news-item .news-link,
.news_ios .page-contents .news-list .news-item .news-link {
width: 100%;
}
}
.news_basic .page-contents .news-list .news-item .news-link:hover,
.news_ios .page-contents .news-list .news-item .news-link:hover {
opacity: 0.85;
}
.news_basic .page-contents .news-list .news-item .news-link .news-thumb,
.news_ios .page-contents .news-list .news-item .news-link .news-thumb {
flex-shrink: 0;
}
.news_basic .page-contents .news-list .news-item .news-link .news-thumb img,
.news_ios .page-contents .news-list .news-item .news-link .news-thumb img {
width: 350px;
height: 199px;
border-radius: 25px;
-o-object-fit: cover;
object-fit: cover;
display: block;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.news_basic .page-contents .news-list .news-item .news-link .news-info,
.news_ios .page-contents .news-list .news-item .news-link .news-info {
flex: 1;
}
.news_basic
.page-contents
.news-list
.news-item
.news-link
.news-info
.news-date,
.news_ios
.page-contents
.news-list
.news-item
.news-link
.news-info
.news-date {
font-weight: 400;
color: #17406f;
margin-bottom: 10px;
font-size: 1.6rem;
}
.news_basic
.page-contents
.news-list
.news-item
.news-link
.news-info
.news-text,
.news_ios
.page-contents
.news-list
.news-item
.news-link
.news-info
.news-text {
font-size: 1.6rem;
line-height: 1.8;
color: #666666;
}
@media (max-width: 799px) {
.news_basic .page-contents .news-list ul,
.news_ios .page-contents .news-list ul {
gap: 40px;
}
.news_basic .page-contents .news-list .news-link,
.news_ios .page-contents .news-list .news-link {
flex-direction: column;
gap: 20px;
}
.news_basic .page-contents .news-list .news-link .news-thumb img,
.news_ios .page-contents .news-list .news-link .news-thumb img {
width: 100%;
}
}
.newsdetail h1.sub {
font-size: 4.8rem;
font-weight: 400;
color: #17406f;
margin-bottom: 8px;
line-height: 1;
}
.newsdetail .newsdetail-body {
margin: 0 auto 120px;
}
.newsdetail .newsdetail-body .newsdetail-inner {
text-align: left;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-title {
font-size: 2.4rem;
font-weight: 400;
color: #666666;
margin: 40px auto;
line-height: 1.6;
border-bottom: 1px solid #bbbbbb;
padding: 0 47px 2rem;
}
@media (max-width: 799px) {
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-title {
font-size: 2rem;
padding: 0 20px 1.5rem;
}
}
@media (max-width: 499px) {
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-title {
font-size: 1.6em;
padding: 0 0 1.5rem;
}
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-date {
font-size: 1.5rem;
color: #666666;
margin-bottom: 32px;
padding-top: 2rem;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-contents {
margin-bottom: 40px;
color: #666666;
font-size: 1.44rem;
line-height: 2;
word-break: normal;
overflow-wrap: break-word;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-contents p {
margin-bottom: 20px;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-contents a {
color: #17406f;
font-size: 1.6rem;
font-weight: 400;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-contents a:hover {
opacity: 0.8;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-border {
border-bottom: 2px solid #bbbbbb;
}
.newsdetail .newsdetail-body .newsdetail-inner .newsdetail-back {
text-align: center;
margin-top: 60px;
}
.newsdetail
.newsdetail-body
.newsdetail-inner
.newsdetail-back
.newsdetail-back {
display: inline-block;
background: #17406f;
color: #fdfdfd;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 14px 36px;
border-radius: 28px;
transition: 0.3s ease;
}
.newsdetail
.newsdetail-body
.newsdetail-inner
.newsdetail-back
.newsdetail-back:hover {
opacity: 0.85;
}
.member-page_basic .layout,
.member-page_ios .layout {
margin: 0 auto;
}
.member-page_basic .layout.w1200,
.member-page_basic .layout.w800,
.member-page_ios .layout.w1200,
.member-page_ios .layout.w800 {
padding: 0 5px;
width: 95%;
}
.member-page_basic .navy,
.member-page_ios .navy {
color: #17406f;
}
.member-page_basic .center,
.member-page_ios .center {
text-align: center;
margin: 0 auto;
}
.member-page_basic .color,
.member-page_ios .color {
color: #ff7700;
}
.member-page_basic span.gray,
.member-page_ios span.gray {
color: #666666;
line-height: 1.6;
font-size: 1.5rem;
}
@media (max-width: 799px) {
.member-page_basic span.gray,
.member-page_ios span.gray {
line-height: 1.7;
font-size: 1.3rem;
}
}
.member-page_basic .flex,
.member-page_ios .flex {
display: flex;
}
.member-page_basic .flex.reverse,
.member-page_ios .flex.reverse {
flex-direction: row-reverse;
}
.member-page_basic .flex.center,
.member-page_ios .flex.center {
justify-content: center;
align-items: center;
}
@media (max-width: 799px) {
.member-page_basic .flex,
.member-page_ios .flex {
flex-direction: column;
}
.member-page_basic .flex.reverse,
.member-page_ios .flex.reverse {
flex-direction: column;
}
}
.member-page_basic .cnt,
.member-page_ios .cnt {
margin: 0 auto 30px;
}
.member-page_basic section,
.member-page_ios section {
padding: 0;
}
.member-page_basic ul,
.member-page_ios ul {
width: -moz-fit-content;
width: fit-content;
text-align: left;
margin: 0 auto;
}
.member-page_basic ul.origin,
.member-page_ios ul.origin {
list-style: inside;
word-break: normal;
overflow-wrap: break-word;
}
.member-page_basic ul li,
.member-page_ios ul li {
color: #cc7524;
font-size: 1.3rem;
}
@media (min-width: 799px) {
.member-page_basic ul li,
.member-page_ios ul li {
font-size: 1.2rem;
}
}
.member-page_basic .member-img,
.member-page_ios .member-img {
width: 50%;
}
.member-page_basic .only,
.member-page_ios .only {
display: block;
}
@media (max-width: 820px) {
.member-page_basic .only,
.member-page_ios .only {
display: none;
}
}
@media (max-width: 799px) {
.member-page_basic .only,
.member-page_ios .only {
display: block;
}
}
.member-page_basic .member-title h2,
.member-page_ios .member-title h2 {
margin-bottom: 40px;
}
.member-page_basic .member-contents,
.member-page_ios .member-contents {
color: #666666;
}
@media (min-width: 799px) {
.member-page_basic .member-contents,
.member-page_ios .member-contents {
margin-bottom: 0px;
}
}
.member-page_basic .member-contents h3.title_navy,
.member-page_ios .member-contents h3.title_navy {
color: #17406f;
font-size: 2rem;
line-height: 2;
font-weight: normal;
}
@media (max-width: 799px) {
.member-page_basic .member-contents h3.title_navy,
.member-page_ios .member-contents h3.title_navy {
font-size: 1.6rem;
line-height: 1.4;
margin-bottom: 5px;
}
}
.member-page_basic .member-contents h4.title_orange,
.member-page_ios .member-contents h4.title_orange {
color: #ff7700;
margin-bottom: 5px;
font-size: 1.6rem;
font-weight: 700;
flex-shrink: 0;
}
.member-page_basic .member-contents p.bp799,
.member-page_ios .member-contents p.bp799 {
line-height: 1.6;
font-size: 1.5rem;
}
@media (max-width: 799px) {
.member-page_basic .member-contents p.bp799,
.member-page_ios .member-contents p.bp799 {
line-height: 1.7;
font-size: 1.3rem;
}
}
.member-page_basic .member-contents p.bp799.right,
.member-page_ios .member-contents p.bp799.right {
text-align: right;
}
.member-page_basic .member-contents .intro,
.member-page_ios .member-contents .intro {
text-align: left;
margin: 0 auto 60px;
word-break: normal;
overflow-wrap: break-word;
}
@media (min-width: 799px) {
.member-page_basic .member-contents .intro,
.member-page_ios .member-contents .intro {
text-align: center;
padding: 50px 25px;
}
}
.member-page_basic .member-contents #member,
.member-page_ios .member-contents #member {
max-width: 800px;
margin: 0 auto 130px;
}
.member-page_basic .member-contents .member-grid,
.member-page_ios .member-contents .member-grid {
display: grid;
gap: 24px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 799px) {
.member-page_basic .member-contents .member-grid,
.member-page_ios .member-contents .member-grid {
grid-template-columns: repeat(3, 1fr);
width: 95%;
margin: 0 auto;
}
}
.member-page_basic .member-contents a.item,
.member-page_ios .member-contents a.item {
background: #fdfdfd;
border: 2px solid #eeeeee;
border-radius: 25px;
padding: 20px 15px;
transition: transform 0.2s, box-shadow 0.2s;
}
.member-page_basic .member-contents a.item:hover,
.member-page_ios .member-contents a.item:hover {
background: #f6f6f6;
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.member-page_basic .member-contents a.item .profile-content .flex.center,
.member-page_ios .member-contents a.item .profile-content .flex.center {
gap: 10px;
margin-bottom: 5px;
}
.member-page_basic .member-contents a.item .circle-image,
.member-page_ios .member-contents a.item .circle-image {
flex: 1;
max-width: 85px;
width: 100%;
border-radius: 50%;
border: 2px solid #ffaf65;
overflow: hidden;
display: block;
aspect-ratio: 1/1;
}
.member-page_basic .member-contents a.item .circle-image .p-icon,
.member-page_ios .member-contents a.item .circle-image .p-icon {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.member-page_basic .member-contents a.item .pf,
.member-page_ios .member-contents a.item .pf {
flex-shrink: 0;
}
.member-page_basic .member-contents a.item .pf .position,
.member-page_ios .member-contents a.item .pf .position {
font-size: 12px;
line-height: 1.7;
}
.member-page_basic .member-contents a.item .phrase,
.member-page_ios .member-contents a.item .phrase {
color: #d59c67;
text-align: left;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
font-size: 1.35rem;
font-weight: 400;
}
.member-page_basic .member-contents #culture,
.member-page_basic .member-contents #offshot,
.member-page_ios .member-contents #culture,
.member-page_ios .member-contents #offshot {
padding: 80px 0 40px;
margin-bottom: 80px;
background: #f5f4f3;
border-radius: 50px;
position: relative;
}
@media (min-width: 799px) {
.member-page_basic .member-contents #culture,
.member-page_basic .member-contents #offshot,
.member-page_ios .member-contents #culture,
.member-page_ios .member-contents #offshot {
padding: 80px 0;
}
}
.member-page_basic .member-contents #culture h2.navy,
.member-page_ios .member-contents #culture h2.navy {
position: absolute;
transform: translate(30%, -150%);
}
@media (max-width: 799px) {
.member-page_basic .member-contents #culture h2.navy,
.member-page_ios .member-contents #culture h2.navy {
position: absolute;
transform: translate(20%, -175%);
font-size: 4.8rem;
}
}
@media (max-width: 499px) {
.member-page_basic .member-contents #culture h2.navy,
.member-page_ios .member-contents #culture h2.navy {
transform: translate(0%, -175%);
width: 100%;
}
}
@media (max-width: 499px) {
.member-page_basic .member-contents #culture,
.member-page_ios .member-contents #culture {
text-align: center;
}
}
.member-page_basic .member-contents #offshot h2.navy,
.member-page_ios .member-contents #offshot h2.navy {
position: absolute;
transform: translate(0%, -130%);
}
@media (max-width: 799px) {
.member-page_basic .member-contents #offshot h2.navy,
.member-page_ios .member-contents #offshot h2.navy {
transform: translate(0, -150%);
font-size: 4.8rem;
}
}
@media (max-width: 499px) {
.member-page_basic .member-contents #offshot h2.navy,
.member-page_ios .member-contents #offshot h2.navy {
transform: translate(0, -170%);
font-size: 4rem;
}
}
@media (max-width: 499px) {
.member-page_basic .member-contents #offshot,
.member-page_ios .member-contents #offshot {
margin: 0 auto;
width: 100%;
}
}
.member-page_basic .member-contents .culture-wrapper,
.member-page_ios .member-contents .culture-wrapper {
width: 95%;
margin: 0 auto;
}
.member-page_basic .member-contents .culture-container,
.member-page_ios .member-contents .culture-container {
display: flex;
justify-content: space-around;
gap: 20px;
margin-bottom: 80px;
text-align: center;
flex-direction: column;
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-container,
.member-page_ios .member-contents .culture-container {
flex-direction: row;
}
}
.member-page_basic .member-contents .culture-content,
.member-page_ios .member-contents .culture-content {
position: relative;
}
.member-page_basic .member-contents .culture-content.flex,
.member-page_ios .member-contents .culture-content.flex {
flex-direction: row;
justify-content: center;
align-items: center;
background: #fdfdfd;
border: 1px solid #f5f4f3;
border-radius: 25px;
padding: 20px 3px 20px 20%;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content.flex,
.member-page_ios .member-contents .culture-content.flex {
flex-direction: column;
padding: 20px 3px;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content.flex,
.member-page_ios .member-contents .culture-content.flex {
flex-direction: column;
padding: 20px 3px;
}
}
.member-page_basic .member-contents .culture-content.flex p.bp799,
.member-page_ios .member-contents .culture-content.flex p.bp799 {
font-size: 1.4rem;
}
.member-page_basic .member-contents .culture-content::before,
.member-page_ios .member-contents .culture-content::before {
position: absolute;
bottom: 10%;
font-size: 20vw;
font-weight: 900;
opacity: 0.7;
z-index: 0;
pointer-events: none;
line-height: 1;
overflow: hidden;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
.member-page_basic .member-contents .culture-content:first-child::before,
.member-page_ios .member-contents .culture-content:first-child::before {
content: "1.";
left: 5%;
top: 0;
color: #e1d1c1;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content:first-child::before,
.member-page_ios .member-contents .culture-content:first-child::before {
left: 5%;
top: 0px;
bottom: auto;
font-size: 8.8rem;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content:first-child::before,
.member-page_ios .member-contents .culture-content:first-child::before {
left: 3%;
top: 0;
bottom: auto;
font-size: 10.4rem;
}
}
.member-page_basic .member-contents .culture-content:nth-child(2)::before,
.member-page_ios .member-contents .culture-content:nth-child(2)::before {
content: "2.";
left: 5%;
top: 0;
color: #e1d1c1;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content:nth-child(2)::before,
.member-page_ios .member-contents .culture-content:nth-child(2)::before {
left: 5%;
top: 0px;
bottom: auto;
font-size: 8.8rem;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content:nth-child(2)::before,
.member-page_ios .member-contents .culture-content:nth-child(2)::before {
left: 3%;
top: 0;
bottom: auto;
font-size: 10.4rem;
}
}
.member-page_basic .member-contents .culture-content:last-child::before,
.member-page_ios .member-contents .culture-content:last-child::before {
content: "3.";
left: 5%;
top: 0;
color: #e1d1c1;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content:last-child::before,
.member-page_ios .member-contents .culture-content:last-child::before {
left: 5%;
top: 0px;
bottom: auto;
font-size: 8.8rem;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content:last-child::before,
.member-page_ios .member-contents .culture-content:last-child::before {
left: 3%;
top: 0;
bottom: auto;
font-size: 10.4rem;
}
}
.member-page_basic .member-contents .culture-content h3,
.member-page_basic .member-contents .culture-content p,
.member-page_basic .member-contents .culture-content ul,
.member-page_basic .member-contents .culture-content img,
.member-page_ios .member-contents .culture-content h3,
.member-page_ios .member-contents .culture-content p,
.member-page_ios .member-contents .culture-content ul,
.member-page_ios .member-contents .culture-content img {
position: relative;
z-index: 1;
}
.member-page_basic .member-contents .culture-content > img,
.member-page_ios .member-contents .culture-content > img {
flex: 1;
width: 15%;
margin: 0 auto;
aspect-ratio: 1/1;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content > img,
.member-page_ios .member-contents .culture-content > img {
width: 30%;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content > img,
.member-page_ios .member-contents .culture-content > img {
width: 50%;
flex: 0;
}
}
.member-page_basic .member-contents .culture-content > div,
.member-page_ios .member-contents .culture-content > div {
flex: 1.9;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .culture-content > div,
.member-page_ios .member-contents .culture-content > div {
flex: 1;
}
}
@media (min-width: 799px) {
.member-page_basic .member-contents .culture-content > div,
.member-page_ios .member-contents .culture-content > div {
flex: 1;
}
}
.member-page_basic .member-contents .culture-content h3.title_navy_b,
.member-page_ios .member-contents .culture-content h3.title_navy_b {
text-align: center;
font-size: 1.76rem;
color: #17406f;
font-weight: 700;
margin: 0 auto 15px;
}
.member-page_basic .member-contents .detail-container,
.member-page_ios .member-contents .detail-container {
margin-top: 80px;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .detail-container,
.member-page_ios .member-contents .detail-container {
margin: 40px auto 0;
}
}
.member-page_basic .member-contents .detail-container .culture-item,
.member-page_ios .member-contents .detail-container .culture-item {
margin: 0 auto;
background: #fdfdfd;
border: 1px solid #f5f4f3;
border-radius: 25px;
padding: 40px 5%;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .detail-container .culture-item,
.member-page_ios .member-contents .detail-container .culture-item {
width: 100%;
}
}
.member-page_basic .member-contents .detail-container .culture-item > .flex,
.member-page_ios .member-contents .detail-container .culture-item > .flex {
align-items: center;
justify-content: space-between;
gap: 40px;
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-title,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-title {
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
margin-bottom: 40px;
}
@media (min-width: 799px) {
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-title,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-title {
flex-direction: row;
justify-content: flex-start;
align-items: flex-end;
gap: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #e1d1c1;
}
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
color: #17406f;
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text
> h3.title_navy_bb,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text
> h3.title_navy_bb {
font-size: 25px;
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text
> h3.title_navy_bb
.sub,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text
> h3.title_navy_bb
.sub {
font-size: 14px;
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text
> p,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text
> p {
color: #666666;
text-align: center;
font-size: 13px;
}
@media (min-width: 799px) {
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text {
align-items: flex-start;
gap: 5px;
}
.member-page_basic
.member-contents
.detail-container
.culture-item
.culture-text
> p,
.member-page_ios
.member-contents
.detail-container
.culture-item
.culture-text
> p {
display: block;
font-size: 14px;
}
}
.member-page_basic .member-contents .detail-container .detail-content,
.member-page_ios .member-contents .detail-container .detail-content {
flex: 1;
}
.member-page_basic .member-contents .detail-container .detail-img,
.member-page_ios .member-contents .detail-container .detail-img {
background: #eeeeee;
flex: 1;
text-align: center;
max-width: 400px;
width: 100%;
aspect-ratio: 4/3;
border-radius: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
@media (max-width: 499px) {
.member-page_basic .member-contents .detail-container .detail-img,
.member-page_ios .member-contents .detail-container .detail-img {
max-width: 400px;
margin: 0 auto;
}
}
.member-page_basic .member-contents .font-design,
.member-page_ios .member-contents .font-design {
display: inline-block;
text-align: center;
line-height: 1;
border-bottom: 2px solid #ffaf65;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto;
padding: 0 5px 5px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
@media (min-width: 799px) {
.member-page_basic .member-contents .font-design,
.member-page_ios .member-contents .font-design {
border: none;
padding: 0;
margin: 0;
}
}
.member-page_basic .member-contents .font-design__label,
.member-page_ios .member-contents .font-design__label {
font-size: 1.4rem;
font-weight: bold;
color: #ffaf65;
letter-spacing: 0.1em;
}
.member-page_basic .member-contents .font-design__number,
.member-page_ios .member-contents .font-design__number {
font-size: 6rem;
font-weight: 900;
color: #ffaf65;
margin-top: -10px;
}
.member-page_basic .member-contents .point,
.member-page_ios .member-contents .point {
margin-bottom: 25px;
padding-left: 8px;
border-left: 5px solid #ffaf65;
}
.member-page_basic .member-contents .point:last-child,
.member-page_ios .member-contents .point:last-child {
margin-bottom: 0;
}
.member-page_basic .member-contents .member-end,
.member-page_ios .member-contents .member-end {
width: 90%;
font-size: 1.6rem;
line-height: 1.7;
text-align: center;
border-bottom: 2px solid #ffaf65;
padding: 0 5px 2px;
margin: 0 auto 60px;
word-break: normal;
overflow-wrap: break-word;
}
@media (min-width: 799px) {
.member-page_basic .member-contents .member-end,
.member-page_ios .member-contents .member-end {
line-height: 2;
font-size: 1.8rem;
}
}
.member-page_basic .member-contents .member-end :last-child,
.member-page_ios .member-contents .member-end :last-child {
margin-top: 20px;
}
.member-page_basic .member-contents .member-end .color,
.member-page_ios .member-contents .member-end .color {
font-size: 1.8rem;
font-weight: bold;
}
@media (min-width: 799px) {
.member-page_basic .member-contents .member-end .color,
.member-page_ios .member-contents .member-end .color {
font-size: 2rem;
}
}
.member-page_basic .bg-greige,
.member-page_basic .recruit-contetns section.greige--inner,
.recruit-contetns .member-page_basic section.greige--inner,
.member-page_basic .top-contents section.greige--inner,
.top-contents .member-page_basic section.greige--inner,
.member-page_ios .bg-greige,
.member-page_ios .recruit-contetns section.greige--inner,
.recruit-contetns .member-page_ios section.greige--inner,
.member-page_ios .top-contents section.greige--inner,
.top-contents .member-page_ios section.greige--inner {
background-color: #f5f4f3;
}
.member-page_basic .qa-container,
.member-page_ios .qa-container {
border-radius: 20px;
padding: 0px 40px 60px;
margin: 100px auto;
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
font-weight: 300;
line-height: 1.8;
color: #666666;
}
@media (max-width: 799px) {
.member-page_basic .qa-container,
.member-page_ios .qa-container {
padding: 60px 0;
margin: 0 auto;
}
.member-page_basic .qa-container:first-of-type,
.member-page_ios .qa-container:first-of-type {
padding: 0 0 60px;
}
}
.member-page_basic .qa-container .item,
.member-page_ios .qa-container .item {
padding: 20px;
transition: transform 0.2s, box-shadow 0.2s;
}
.member-page_basic .qa-container .item .flex.center,
.member-page_ios .qa-container .item .flex.center {
gap: 20px;
}
.member-page_basic .qa-container .item .flex.center.profile-content,
.member-page_ios .qa-container .item .flex.center.profile-content {
gap: 50px;
justify-content: center;
align-items: center;
margin-top: 40px;
}
@media (max-width: 799px) {
.member-page_basic .qa-container .item .flex.center.profile-content,
.member-page_ios .qa-container .item .flex.center.profile-content {
margin-top: 10px;
}
}
.member-page_basic .qa-container .item .profile-img .circle-image,
.member-page_ios .qa-container .item .profile-img .circle-image {
flex: 1;
max-width: 150px;
width: 100%;
border-radius: 50%;
border: 3px solid #ffaf65;
overflow: hidden;
display: block;
aspect-ratio: 1/1;
}
.member-page_basic .qa-container .item .profile-img .circle-image .p-icon,
.member-page_ios .qa-container .item .profile-img .circle-image .p-icon {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.member-page_basic .qa-container .item .profile-img .pf,
.member-page_ios .qa-container .item .profile-img .pf {
flex-shrink: 0;
}
.member-page_basic .qa-container .item .profile-img .pf .name,
.member-page_ios .qa-container .item .profile-img .pf .name {
color: #17406f;
font-size: 2.5rem;
margin-bottom: 10px;
}
.member-page_basic .qa-container .item .profile-img .pf .position,
.member-page_ios .qa-container .item .profile-img .pf .position {
display: block;
font-size: 1.8rem;
line-height: 1.7;
}
.member-page_basic .qa-container .item .deco,
.member-page_ios .qa-container .item .deco {
flex: 1;
}
.member-page_basic .qa-container .item .deco > .phrase,
.member-page_ios .qa-container .item .deco > .phrase {
font-size: 3rem;
font-weight: 300;
background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, #ffd1a5 70%);
display: inline;
letter-spacing: 0.02em;
line-height: 1.3;
}
@media (max-width: 799px) {
.member-page_basic .qa-container .item .deco > .phrase,
.member-page_ios .qa-container .item .deco > .phrase {
font-size: 2.7rem;
}
}
.member-page_basic .qa-container hr.single-line,
.member-page_ios .qa-container hr.single-line {
background: #eeeeee;
}
.member-page_basic,
.member-page_ios { }
.member-page_basic #interview h2.gray,
.member-page_ios #interview h2.gray {
margin-bottom: 60px;
}
.member-page_basic .qa-item,
.member-page_ios .qa-item {
text-align: left;
margin-bottom: 70px;
position: relative;
}
.member-page_basic .question,
.member-page_ios .question {
background-color: #fdfdfd;
color: #666666;
padding: 16px 25px;
border-radius: 15px 25px 15px 25px;
position: relative;
font-size: 1.6rem;
font-weight: 400;
border: 2px solid #f1e4e8;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
margin-bottom: 20px;
line-height: 1.4;
transform: rotate(-1deg);
display: inline-block;
max-width: 90%;
transition: none;
}
.member-page_basic .question::before,
.member-page_ios .question::before {
content: "Q";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -15px;
left: -15px;
font-size: 1.8rem;
font-weight: 700;
color: #d68798;
background-color: #fdfdfd;
width: 38px;
height: 38px;
border: 2px dashed #d68798;
border-radius: 50%;
line-height: 1;
z-index: 3;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}
.member-page_basic .question p,
.member-page_ios .question p {
margin: 0;
display: inline;
font-weight: 500;
color: #666666;
}
.member-page_basic .answer,
.member-page_ios .answer {
padding: 35px 40px;
background-color: #fdfdfd;
border-radius: 12px;
border-top: 3px solid #e0e6ed;
border-right: 1px solid #e0e6ed;
border-bottom: 2px solid #e0e6ed;
border-left: 1px solid #e0e6ed;
color: #666666;
position: relative;
font-size: 1.6rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transform: rotate(0deg);
margin-left: 5%;
max-width: 90%;
transition: none;
overflow: visible;
z-index: 10;
}
.member-page_basic .answer::after,
.member-page_ios .answer::after {
content: "A";
display: flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: -15px;
right: -15px;
background-color: #95b8e3;
color: #fdfdfd;
font-size: 1.8rem;
font-weight: 500;
padding: 5px 16px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 3;
}
.member-page_basic .answer p,
.member-page_ios .answer p {
margin-bottom: 1.5em;
position: relative;
z-index: 2;
font-size: 1.4rem;
}
.member-page_basic .answer p:last-child,
.member-page_ios .answer p:last-child {
margin-bottom: 0;
}
.member-page_basic .answer table,
.member-page_ios .answer table {
width: 100%;
border-collapse: collapse;
font-size: 1.4rem;
border: none;
margin: 0;
table-layout: fixed;
}
.member-page_basic,
.member-page_ios { }
.member-page_basic .answer table tbody p,
.member-page_ios .answer table tbody p {
display: block;
padding: 12px 15px;
border-bottom: 1px solid #e0e6ed;
background-color: #f7f9fb;
border-radius: 5px;
word-wrap: break-word;
white-space: normal;
}
.member-page_basic,
.member-page_ios { }
.member-page_basic .answer table th,
.member-page_basic .answer table td,
.member-page_ios .answer table th,
.member-page_ios .answer table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e0e6ed;
display: table-cell;
width: auto;
word-wrap: break-word;
}
.member-page_basic .answer table tbody tr,
.member-page_ios .answer table tbody tr {
background-color: #fdfdfd;
}
.member-page_basic .answer table th,
.member-page_ios .answer table th {
width: 25%;
background-color: #f7f9fb;
color: #666666;
font-weight: 500;
vertical-align: top;
border-right: 1px solid #e0e6ed;
}
.member-page_basic .answer table td,
.member-page_ios .answer table td {
width: 75%;
}
.member-page_basic .answer table tr:last-child th,
.member-page_basic .answer table tr:last-child td,
.member-page_ios .answer table tr:last-child th,
.member-page_ios .answer table tr:last-child td {
border-bottom: none;
}
@media (max-width: 799px) {
.member-page_basic .question,
.member-page_ios .question {
padding: 0;
margin-bottom: 20px;
border: none;
background-color: transparent;
box-shadow: none;
transform: rotate(0deg);
display: block;
max-width: 100%;
}
.member-page_basic .question::before,
.member-page_ios .question::before {
content: none;
}
.member-page_basic .question::after,
.member-page_ios .question::after {
content: none;
}
.member-page_basic .question p,
.member-page_ios .question p {
display: block;
font-weight: 500;
font-size: 1.6rem;
line-height: 1.5;
color: #d68798;
}
.member-page_basic .question p::before,
.member-page_ios .question p::before {
content: "Q.";
margin-right: 8px;
color: #d68798;
}
.member-page_basic .answer,
.member-page_ios .answer {
padding: 25px 25px 25px 21px;
margin-left: 0;
border-width: 1px;
transform: rotate(0deg);
max-width: 100%;
overflow: hidden;
z-index: auto;
border-left: 5px solid #e0e6ed;
}
.member-page_basic .answer::before,
.member-page_ios .answer::before {
content: "A";
position: absolute;
font-size: 9.6rem;
font-weight: 700;
color: rgba(146, 176, 201, 0.1);
line-height: 1;
bottom: -15px;
right: -5px;
z-index: -1;
display: block;
transform: none;
}
.member-page_basic .answer::after,
.member-page_ios .answer::after {
content: none;
}
.member-page_basic .answer p,
.member-page_ios .answer p {
z-index: 2;
}
.member-page_basic .answer table th,
.member-page_basic .answer table td,
.member-page_ios .answer table th,
.member-page_ios .answer table td {
display: block;
width: 100%;
padding: 10px 15px;
border-right: none;
box-sizing: border-box;
}
.member-page_basic .answer table th,
.member-page_ios .answer table th {
background-color: #f6f6f6;
}
.member-page_basic .answer table tr,
.member-page_ios .answer table tr {
display: block;
margin-bottom: 0px;
border: 1px solid #e0e6ed;
border-radius: 5px;
overflow: hidden;
}
}
.member-page_basic .offshot,
.member-page_ios .offshot {
max-width: 700px;
width: 100%;
background: #fdfdfd;
border-radius: 25px;
margin: 20px auto 60px;
padding: 40px 40px 60px;
}
@media (max-width: 499px) {
.member-page_basic .offshot,
.member-page_ios .offshot {
margin: 0 auto 60px;
padding: 40px 15px 60px;
}
}
.member-page_basic .offshot .photo-placeholder,
.member-page_ios .offshot .photo-placeholder {
max-width: 600px;
width: -moz-fit-content;
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
border-radius: 25px;
margin: 0 auto 60px;
overflow: hidden;
}
@media (max-width: 499px) {
.member-page_basic .offshot .photo-placeholder,
.member-page_ios .offshot .photo-placeholder {
margin: 0 auto 40px;
}
}
.member-page_basic .offshot .photo-placeholder img,
.member-page_ios .offshot .photo-placeholder img {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.member-page_basic .offshot > p.photo-caption,
.member-page_ios .offshot > p.photo-caption {
color: #d59c67;
text-align: center;
font-size: 1.8rem;
word-break: normal;
overflow-wrap: break-word;
}
@media (max-width: 499px) {
.member-page_basic .offshot > p.photo-caption,
.member-page_ios .offshot > p.photo-caption {
font-size: 1.4rem;
}
}
.member-page_basic p.answer-date,
.member-page_ios p.answer-date {
max-width: 1000px;
width: 90%;
margin: 0 auto;
text-align: right;
}
.member-page_basic a.btn1.navy-line,
.member-page_ios a.btn1.navy-line {
display: block;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 130px;
}
.recruit-contetns h3 {
font-size: 2rem;
text-align: left;
}
.recruit-contetns h3.navy {
color: #17406f;
font-weight: 400;
}
@media (min-width: 799px) {
.recruit-contetns h3.navy {
text-align: center;
}
}
.recruit-contetns h3.orange {
color: #ff7700;
font-weight: 500;
}
@media (max-width: 799px) {
.recruit-contetns h3 {
font-size: 1.6rem;
}
}
.recruit-contetns .lh-200 {
line-height: 2;
}
.recruit-contetns .intro-container h3 {
padding-bottom: 35px;
}
.recruit-contetns .box-w800--inner.intro {
padding: 40px 28px 40px 28px;
margin-top: 73px;
margin-bottom: 60px;
text-align: left;
border-left: 4px solid #ff7700;
}
.recruit-contetns .box-w800--inner.intro h3 {
padding-bottom: 15px;
}
@media (max-width: 799px) {
.recruit-contetns .box-w800--inner.intro {
padding-top: 30px;
padding-bottom: 30px;
}
.recruit-contetns .box-w800--inner.intro p {
font-size: 1.44rem;
}
}
.recruit-contetns .box-w800--inner.member {
margin-top: 20px;
margin-bottom: 60px;
padding: 30px 45px 38px 45px;
}
@media (max-width: 799px) {
.recruit-contetns .box-w800--inner.member {
padding-right: 35px;
padding-left: 35px;
}
.recruit-contetns .box-w800--inner.member p.navy {
font-size: 1.6rem;
}
}
.recruit-contetns section .layout {
margin: 0 auto;
}
.recruit-contetns section {
padding: 0 20px;
}
@media (max-width: 799px) {
.recruit-contetns section {
padding: 0;
}
}
.recruit-contetns section.transparent--inner.intro {
text-align: center;
}
.recruit-contetns section.transparent--inner.intro .bp-align {
text-align: left;
}
@media (min-width: 799px) {
.recruit-contetns section.transparent--inner.intro .bp-align {
text-align: center;
}
}
.recruit-contetns section.transparent--inner.intro .br-br-none {
display: none;
}
@media (min-width: 799px) {
.recruit-contetns section.transparent--inner.intro .br-br-none {
display: block;
}
}
.recruit-contetns section.transparent--inner.member {
padding-top: 130px;
padding-bottom: 175px;
text-align: center;
}
.recruit-contetns section.transparent--inner.member h3 {
text-align: center;
}
.recruit-contetns section.transparent--inner.member .text-wrap {
margin-bottom: 15px;
}
.recruit-contetns section.transparent--inner.member .text-wrap p {
text-align: center;
}
@media (max-width: 799px) {
.recruit-contetns section.transparent--inner.member .text-wrap p {
font-size: 1.44rem;
}
}
@media (max-width: 499px) {
.recruit-contetns section.transparent--inner.member .text-wrap p {
font-size: 1.2rem;
}
}
.recruit-contetns section.transparent--inner.member .text-wrap p.navy {
padding-bottom: 20px;
}
@media (max-width: 799px) {
.recruit-contetns section.transparent--inner.member .text-wrap p.navy {
font-size: 1.6rem;
}
}
@media (max-width: 499px) {
.recruit-contetns section.transparent--inner.member .text-wrap p.navy {
font-size: 1.44rem;
}
}
@media (max-width: 499px) {
.recruit-contetns section.transparent--inner.member {
padding-top: 100px;
padding-bottom: 150px;
}
}
.recruit-contetns section.greige--inner.workstyle {
position: relative;
padding-top: 92px;
padding-bottom: 80px;
margin-bottom: 130px;
}
.recruit-contetns section.greige--inner.workstyle h2.navy {
position: absolute;
transform: translate(18%, -160%);
}
@media (max-width: 799px) {
.recruit-contetns section.greige--inner.workstyle h2.navy {
transform: translate(0%, -190%);
font-size: 4.8rem;
}
}
.recruit-contetns section.greige--inner.workstyle .text-wrap {
text-align: left;
}
.recruit-contetns section.greige--inner.workstyle .text-wrap h3 {
padding-bottom: 38px;
}
@media (max-width: 799px) {
.recruit-contetns section.greige--inner.workstyle .text-wrap p {
font-size: 1.44rem;
}
}
@media (min-width: 799px) {
.recruit-contetns section.greige--inner.workstyle .text-wrap {
text-align: center;
}
}
.recruit-contetns section.greige--inner.workstyle .stat-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(clamp(140px, 40vw, 350px), 100%), auto)
);
justify-content: center;
gap: clamp(10px, 2vw, 30px);
margin-top: 60px;
margin-bottom: 100px;
}
.recruit-contetns section.greige--inner.workstyle .stat-grid .item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: clamp(200px, 40vw, 350px);
height: clamp(150px, 25vw, 200px);
max-width: 100%;
padding: 0 20px;
}
.recruit-contetns section.greige--inner.workstyle .stat-grid .item p.navy {
font-size: clamp(1.4rem, 2.5vw, 1.92rem);
}
.recruit-contetns section.greige--inner.workstyle .stat-grid .item .none-br {
display: none;
}
@media (max-width: 599px) {
.recruit-contetns section.greige--inner.workstyle .stat-grid .item .none-br {
display: block;
}
}
.recruit-contetns section.greige--inner.workstyle .stat-grid .item p.stat {
padding-top: 18px;
color: #ffaf65;
font-size: clamp(1.2rem, 2.5vw, 2rem);
}
.recruit-contetns section.greige--inner.workstyle .stat-grid .item p.stat span {
font-size: clamp(2.4rem, 4vw, 3.6rem);
font-weight: 800;
}
@media (max-width: 599px) {
.recruit-contetns section.greige--inner.workstyle .stat-grid .bp-r {
border-radius: 15px;
}
}
@media (max-width: 499px) {
.recruit-contetns section.greige--inner.workstyle .stat-grid {
margin-bottom: 80px;
}
}
.recruit-contetns section.greige--inner.workstyle .chart-container {
display: flex;
flex-direction: column;
gap: 60px;
margin: 0 auto 110px;
width: 624px;
max-width: 100%;
}
.recruit-contetns
section.greige--inner.workstyle
.chart-container
.chart-title {
font-size: clamp(1.44rem, 2.5vw, 1.92rem);
padding-bottom: 15px;
}
.recruit-contetns section.greige--inner.workstyle .chart-container .wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.recruit-contetns section.greige--inner.workstyle .chart-container .wrap .img {
max-width: 200px;
height: 100%;
}
@media (max-width: 529px) {
.recruit-contetns
section.greige--inner.workstyle
.chart-container
.wrap
.img.bp-pd {
padding-bottom: 70px;
}
}
@media (max-width: 499px) {
.recruit-contetns
section.greige--inner.workstyle
.chart-container
.wrap
.img {
max-width: 140px;
}
}
@media (max-width: 499px) {
.recruit-contetns section.greige--inner.workstyle .chart-container {
margin: 0 auto 80px;
gap: 40px;
}
}
.recruit-contetns section.greige--inner.workstyle .other {
padding-top: 77px;
padding-bottom: 58px;
}
@media (max-width: 799px) {
.recruit-contetns section.greige--inner.workstyle .other {
font-size: 1.6rem;
}
}
@media (max-width: 499px) {
.recruit-contetns section.greige--inner.workstyle .other {
padding-top: 67px;
padding-bottom: 48px;
font-size: 1.44rem;
}
}
.recruit-contetns section.greige--inner.workstyle .benefit-grid {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(min(clamp(400px, 40vw, 500px), 100%), auto)
);
gap: clamp(10px, 2vw, 30px);
justify-content: center;
}
.recruit-contetns section.greige--inner.workstyle .benefit-grid .item {
display: flex;
flex-direction: column;
width: 500px;
height: clamp(150px, 30vw, 200px);
max-width: 100%;
max-height: 100%;
padding: 34px 50px 0 50px;
}
.recruit-contetns
section.greige--inner.workstyle
.benefit-grid
.item
p.benefit {
color: #17406f;
font-size: clamp(1.4rem, 2.5vw, 1.92rem);
font-weight: 400;
padding-bottom: 20px;
}
.recruit-contetns section.greige--inner.workstyle .benefit-grid .item p.dec {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
line-height: 1.6;
}
@media (max-width: 499px) {
.recruit-contetns section.greige--inner.workstyle .benefit-grid .item {
padding: 24px 30px 0 30px;
}
}
@media (max-width: 599px) {
.recruit-contetns section.greige--inner.workstyle .benefit-grid .bp-r {
border-radius: 15px;
}
}
@media (max-width: 799px) {
.recruit-contetns section.greige--inner.workstyle {
padding-bottom: 50px;
margin-bottom: 80px;
}
}
@media (max-width: 840px) {
.recruitments-page_basic .layout.w800,
.recruitments-page_ios .layout.w800 {
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.recruitments-page_basic .decorated-line2,
.recruitments-page_ios .decorated-line2 {
width: 95%;
}
.recruitments-page_basic .decorated-line2.single-line,
.recruitments-page_ios .decorated-line2.single-line {
width: 95%;
}
}
.recruitments-page_basic p.bp799,
.recruitments-page_ios p.bp799 {
line-height: 1.6;
width: 95%;
margin: 0 auto;
}
@media (max-width: 799px) {
.recruitments-page_basic p.bp799,
.recruitments-page_ios p.bp799 {
line-height: 1.7;
}
}
.recruitments-page_basic .recruit-contents,
.recruitments-page_ios .recruit-contents {
margin-bottom: 130px;
color: #666666;
}
.recruitments-page_basic .recruit-contents .cnt,
.recruitments-page_ios .recruit-contents .cnt {
max-width: 750px;
margin: 0 auto 30px;
}
.recruitments-page_basic .recruit-contents .cnt_flex,
.recruitments-page_ios .recruit-contents .cnt_flex {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 30px 25px;
box-sizing: border-box;
}
@media (max-width: 799px) {
.recruitments-page_basic .recruit-contents .cnt_flex,
.recruitments-page_ios .recruit-contents .cnt_flex {
flex-direction: column;
align-items: stretch;
padding: 20px 0;
max-width: 600px;
width: 95%;
margin: 0 auto;
}
}
.recruitments-page_basic .recruit-contents dl,
.recruitments-page_ios .recruit-contents dl {
max-width: 750px;
margin: 0 auto;
width: 100%;
font-size: 1.6rem;
}
.recruitments-page_basic .recruit-contents dl dt,
.recruitments-page_ios .recruit-contents dl dt {
min-width: 225px;
flex-shrink: 0;
padding-right: 20px;
padding-top: 5px;
font-weight: bold;
line-height: 1.8;
}
.recruitments-page_basic .recruit-contents dl dd,
.recruitments-page_ios .recruit-contents dl dd {
flex: 1;
min-width: 0;
line-height: 1.8;
word-break: break-word;
}
.recruitments-page_basic .recruit-contents .origin,
.recruitments-page_ios .recruit-contents .origin {
list-style: inside;
}
.recruitments-page_basic .recruit-contents .sp_only,
.recruitments-page_ios .recruit-contents .sp_only {
display: none;
}
.recruitments-page_basic .recruit-contents .btn_wrapper,
.recruitments-page_ios .recruit-contents .btn_wrapper {
text-align: center;
margin-top: 60px;
}
@media (max-width: 499px) {
.recruitments-page_basic .recruit-contents .sp_only,
.recruitments-page_ios .recruit-contents .sp_only {
display: block;
}
}
@media (max-width: 799px) {
.recruitments-page_basic .recruit-contents .decorated-line2,
.recruitments-page_ios .recruit-contents .decorated-line2 {
max-width: 90vw;
width: 100%;
}
.recruitments-page_basic .recruit-contents .cnt,
.recruitments-page_basic .recruit-contents dl,
.recruitments-page_ios .recruit-contents .cnt,
.recruitments-page_ios .recruit-contents dl {
font-size: 1.4rem;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.recruitments-page_basic .recruit-contents .cnt dt,
.recruitments-page_basic .recruit-contents dl dt,
.recruitments-page_ios .recruit-contents .cnt dt,
.recruitments-page_ios .recruit-contents dl dt {
min-width: auto;
width: 100%;
padding-right: 0;
padding-top: 0;
margin-bottom: 5px;
}
.recruitments-page_basic .recruit-contents .cnt dd,
.recruitments-page_basic .recruit-contents dl dd,
.recruitments-page_ios .recruit-contents .cnt dd,
.recruitments-page_ios .recruit-contents dl dd {
width: 100%;
min-width: auto;
font-size: 1.4rem;
word-break: break-word;
}
}
@media (max-width: 840px) {
.contact-page_basic .layout.w800,
.contact-page_ios .layout.w800 {
padding-left: 20px;
padding-right: 20px;
}
.contact-page_basic .decorated-line2,
.contact-page_ios .decorated-line2 {
width: 95%;
}
.contact-page_basic .decorated-line2.single-line,
.contact-page_ios .decorated-line2.single-line {
width: 95%;
}
}
.contact-page_basic .contact-contents,
.contact-page_ios .contact-contents {
margin-bottom: 130px;
}
.contact-page_basic .contact-contents p.bp799,
.contact-page_ios .contact-contents p.bp799 {
line-height: 1.6;
width: 95%;
margin: 0 auto;
}
@media (max-width: 799px) {
.contact-page_basic .contact-contents p.bp799,
.contact-page_ios .contact-contents p.bp799 {
line-height: 1.7;
}
}
.contact-page_basic .contact-contents p.bp799.right,
.contact-page_ios .contact-contents p.bp799.right {
text-align: right;
}
.contact-page_basic .contact-contents p.bp799.loose,
.contact-page_ios .contact-contents p.bp799.loose {
line-height: 2;
}
.contact-page_basic .contact-contents p.bp799.ind,
.contact-page_ios .contact-contents p.bp799.ind {
margin: 10px 0 10px 1.5em;
}
.contact-page_basic .contact-contents p.bp799.ind2,
.contact-page_ios .contact-contents p.bp799.ind2 {
margin-left: 3em;
margin-bottom: 10px;
}
.contact-page_basic .contact-contents .cnt,
.contact-page_ios .contact-contents .cnt {
max-width: 750px;
margin: 0 auto 30px;
}
.contact-page_basic .contact-contents .origin_small,
.contact-page_ios .contact-contents .origin_small {
list-style: inside;
margin-top: 10px;
font-size: 1.5rem;
line-height: 1.5;
color: #666666;
}
@media (max-width: 799px) {
.contact-page_basic .contact-contents .origin_small,
.contact-page_ios .contact-contents .origin_small {
font-size: 1.3rem;
line-height: 1.3;
}
}
.contact-page_basic .mr-10,
.contact-page_ios .mr-10 {
margin-right: 10px;
margin-top: 10px;
}
.contact-page_basic input[type="text"],
.contact-page_basic input[type="email"],
.contact-page_basic select,
.contact-page_basic textarea,
.contact-page_ios input[type="text"],
.contact-page_ios input[type="email"],
.contact-page_ios select,
.contact-page_ios textarea {
border: 2px solid #d9d9d9;
border-radius: 4px;
color: #666666;
padding: 3px 8px;
font-size: 1.6rem;
}
@media (max-width: 799px) {
.contact-page_basic input[type="text"],
.contact-page_basic input[type="email"],
.contact-page_basic select,
.contact-page_basic textarea,
.contact-page_ios input[type="text"],
.contact-page_ios input[type="email"],
.contact-page_ios select,
.contact-page_ios textarea {
font-size: 1.4rem;
}
}
.contact-page_basic input[type="text"]:focus,
.contact-page_basic input[type="email"]:focus,
.contact-page_basic select:focus,
.contact-page_basic textarea:focus,
.contact-page_ios input[type="text"]:focus,
.contact-page_ios input[type="email"]:focus,
.contact-page_ios select:focus,
.contact-page_ios textarea:focus {
outline: none;
border-color: #c3b9ac;
}
.contact-page_basic dl,
.contact-page_ios dl {
max-width: 750px;
margin: 0 auto;
width: 100%;
font-size: 1.6rem;
}
.contact-page_basic dl dt,
.contact-page_ios dl dt {
color: #666666;
min-width: 240px;
flex-shrink: 0;
padding-right: 20px;
padding-top: 5px;
font-weight: 500;
}
.contact-page_basic dl dd,
.contact-page_ios dl dd {
flex: 1;
min-width: 0;
color: #666666;
}
@media (max-width: 799px) {
.contact-page_basic dl,
.contact-page_ios dl {
font-size: 1.4rem;
max-width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.contact-page_basic dl dt,
.contact-page_ios dl dt {
min-width: auto;
width: 100%;
padding-right: 0;
padding-top: 0;
margin-bottom: 8px;
}
.contact-page_basic dl dd,
.contact-page_ios dl dd {
width: 100%;
min-width: auto;
}
}
.contact-page_basic .form_flex,
.contact-page_ios .form_flex {
display: flex;
align-items: flex-start;
padding: 30px 25px;
}
.contact-page_basic .form_flex input[type="radio"],
.contact-page_ios .form_flex input[type="radio"] {
opacity: 0;
visibility: hidden;
position: absolute;
}
.contact-page_basic .form_flex .wpcf7-list-item.first,
.contact-page_ios .form_flex .wpcf7-list-item.first {
margin-left: 0;
}
.contact-page_basic .form_flex span.wpcf7-list-item-label,
.contact-page_ios .form_flex span.wpcf7-list-item-label {
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.contact-page_basic .form_flex span.wpcf7-list-item-label::before,
.contact-page_ios .form_flex span.wpcf7-list-item-label::before {
display: block;
content: "";
border-radius: 50%;
border: 2px solid #d9d9d9;
width: 16px;
height: 16px;
margin-right: 10px;
}
.contact-page_basic .form_flex span.wpcf7-list-item-label::after,
.contact-page_ios .form_flex span.wpcf7-list-item-label::after {
display: block;
position: absolute;
content: "";
border-radius: 50%;
width: 10px;
height: 10px;
background-color: #c3b9ac;
left: 3px;
top: 50%;
transform: translateY(-50%);
display: none;
}
.contact-page_basic
.form_flex
input[type="radio"]:checked
+ span.wpcf7-list-item-label::after,
.contact-page_ios
.form_flex
input[type="radio"]:checked
+ span.wpcf7-list-item-label::after {
display: block;
}
.contact-page_basic .form_flex dd .wpcf7-not-valid-tip,
.contact-page_ios .form_flex dd .wpcf7-not-valid-tip {
color: crimson;
font-size: 1.25rem;
}
.contact-page_basic
.form_flex
dd
.form_error_box:has(.wpcf7-not-valid-tip)
.error_message,
.contact-page_ios
.form_flex
dd
.form_error_box:has(.wpcf7-not-valid-tip)
.error_message {
display: block;
font-size: 1.25rem;
font-weight: normal;
}
.contact-page_basic .form_flex dd .form_error_box .wpcf7-not-valid-tip,
.contact-page_ios .form_flex dd .form_error_box .wpcf7-not-valid-tip {
display: none;
}
.contact-page_basic .form_flex dd .form_error_box .error_message,
.contact-page_ios .form_flex dd .form_error_box .error_message {
color: crimson;
display: none;
}
.contact-page_basic .form_flex dd .form_error_box .form_birth,
.contact-page_ios .form_flex dd .form_error_box .form_birth {
display: flex;
}
@media only screen and (min-width: 799px) {
.contact-page_basic .form_flex dd .form_error_box .form_birth,
.contact-page_ios .form_flex dd .form_error_box .form_birth {
width: 85%;
}
}
.contact-page_basic .form_text_input,
.contact-page_basic .form_textarea_input,
.contact-page_ios .form_text_input,
.contact-page_ios .form_textarea_input {
width: 100%;
box-sizing: border-box;
}
.contact-page_basic .form_textarea_input,
.contact-page_ios .form_textarea_input {
min-height: 150px;
resize: none;
}
.contact-page_basic .form_required,
.contact-page_ios .form_required {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5px 5px;
margin-left: 10px;
color: #fdfdfd;
background: #c3b9ac;
border-radius: 8px;
font-size: 10px;
vertical-align: middle;
font-weight: 400;
}
.contact-page_basic .form_required::before,
.contact-page_ios .form_required::before {
content: "必須";
}
.contact-page_basic .form_submit,
.contact-page_ios .form_submit {
text-align: center;
margin-top: 60px;
}
@media (max-width: 799px) {
.contact-page_basic .form_flex,
.contact-page_ios .form_flex {
flex-direction: column;
align-items: stretch;
padding: 30px 0;
width: 95%;
margin: 0 auto;
}
.contact-page_basic .form_birth,
.contact-page_ios .form_birth {
max-width: 315px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.contact-page_basic .form_birth select,
.contact-page_ios .form_birth select {
flex-grow: 1;
width: 100%;
margin-right: 5px;
}
}
.contact-page_basic .wpcf7 form .wpcf7-response-output,
.contact-page_ios .wpcf7 form .wpcf7-response-output {
margin: 30px auto;
font-size: 1.6rem;
color: #666666;
text-align: center;
width: -moz-fit-content;
width: fit-content;
padding: 10px 20px;
border: 1px solid #007bff;
}
.contact-page_basic .wpcf7 form.init .wpcf7-response-output,
.contact-page_basic .wpcf7 form.resetting .wpcf7-response-output,
.contact-page_basic .wpcf7 form.submitting .wpcf7-response-output,
.contact-page_ios .wpcf7 form.init .wpcf7-response-output,
.contact-page_ios .wpcf7 form.resetting .wpcf7-response-output,
.contact-page_ios .wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.contact-page_basic .wpcf7 form.sent .wpcf7-response-output,
.contact-page_ios .wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450;
}
.contact-page_basic .wpcf7 form.failed .wpcf7-response-output,
.contact-page_basic .wpcf7 form.aborted .wpcf7-response-output,
.contact-page_ios .wpcf7 form.failed .wpcf7-response-output,
.contact-page_ios .wpcf7 form.aborted .wpcf7-response-output {
border-color: crimson;
}
.contact-page_basic .wpcf7 form.spam .wpcf7-response-output,
.contact-page_ios .wpcf7 form.spam .wpcf7-response-output {
border-color: #ff7f7f;
}
.contact-page_basic .wpcf7 form.invalid .wpcf7-response-output,
.contact-page_basic .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-page_basic .wpcf7 form.payment-required .wpcf7-response-output,
.contact-page_ios .wpcf7 form.invalid .wpcf7-response-output,
.contact-page_ios .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-page_ios .wpcf7 form.payment-required .wpcf7-response-output {
border-color: #666666;
}
.contact-page_basic .wpcf7-form-control-wrap,
.contact-page_ios .wpcf7-form-control-wrap {
position: relative;
}
.contact-page_basic .contents .contact-contents form .wpcf7-spinner,
.contact-page_basic .top-contents .contact-contents form .wpcf7-spinner,
.contact-page_ios .contents .contact-contents form .wpcf7-spinner,
.contact-page_ios .top-contents .contact-contents form .wpcf7-spinner {
display: none;
}
.works_basic .navy,
.works_ios .navy {
color: #17406f;
}
.works_basic .center,
.works_ios .center {
text-align: center;
margin: 0 auto;
}
.works_basic .flex,
.works_ios .flex {
display: flex;
}
.works_basic .flex.reverse,
.works_ios .flex.reverse {
flex-direction: row-reverse;
}
.works_basic .flex.center,
.works_ios .flex.center {
justify-content: center;
align-items: center;
}
@media (max-width: 799px) {
.works_basic .flex,
.works_ios .flex {
flex-direction: column;
}
.works_basic .flex.reverse,
.works_ios .flex.reverse {
flex-direction: column;
}
}
.works_basic .cnt,
.works_ios .cnt {
margin: 0 auto 30px;
}
.works_basic section,
.works_ios section {
padding: 0;
}
.works_basic .works-img,
.works_ios .works-img {
width: 50%;
max-width: 380px;
}
.works_basic h2.gray,
.works_ios h2.gray {
margin-bottom: 50px;
}
.works_basic .works-contents,
.works_ios .works-contents {
color: #666666;
}
@media (min-width: 799px) {
.works_basic .works-contents,
.works_ios .works-contents {
margin-bottom: 0px;
}
}
.works_basic .works-contents h3.title_navy,
.works_ios .works-contents h3.title_navy {
color: #17406f;
font-size: 2rem;
line-height: 2;
font-weight: normal;
}
@media (max-width: 799px) {
.works_basic .works-contents h3.title_navy,
.works_ios .works-contents h3.title_navy {
font-size: 1.6rem;
line-height: 1.4;
margin-bottom: 5px;
}
}
.works_basic .works-contents p.bp799,
.works_ios .works-contents p.bp799 {
line-height: 1.6;
font-size: 1.5rem;
}
@media (max-width: 799px) {
.works_basic .works-contents p.bp799,
.works_ios .works-contents p.bp799 {
line-height: 1.7;
font-size: 1.3rem;
}
}
.works_basic .works-contents p.bp799.right,
.works_ios .works-contents p.bp799.right {
text-align: right;
}
.works_basic .works-contents .intro,
.works_ios .works-contents .intro {
text-align: left;
margin: 0 auto 60px;
word-break: normal;
overflow-wrap: break-word;
}
@media (min-width: 799px) {
.works_basic .works-contents .intro,
.works_ios .works-contents .intro {
text-align: center;
padding: 50px 25px;
word-break: keep-all;
overflow-wrap: break-word;
}
}
.works_basic .works-contents .decoration-line.line,
.works_ios .works-contents .decoration-line.line {
margin: 40px auto 130px;
}
@media (max-width: 799px) {
.works_basic .works-contents .decoration-line.line,
.works_ios .works-contents .decoration-line.line {
margin: 30px auto 80px;
}
}
.works_basic .works-contents .case-grid,
.works_ios .works-contents .case-grid {
display: grid;
gap: 20px;
padding: 40px 0;
grid-auto-rows: 220px;
}
.works_basic .works-contents .grid-item,
.works_ios .works-contents .grid-item {
background-size: cover;
background-position: center;
border-radius: 12px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.works_basic .works-contents .grid-item:hover .front-cnt,
.works_ios .works-contents .grid-item:hover .front-cnt {
background-color: rgba(0, 0, 0, 0.55);
}
.works_basic .works-contents .grid-item:hover .back-cnt,
.works_ios .works-contents .grid-item:hover .back-cnt {
bottom: 0;
opacity: 1;
visibility: visible;
}
.works_basic .works-contents .item-1,
.works_ios .works-contents .item-1 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/003.jpg);
}
.works_basic .works-contents .item-2,
.works_ios .works-contents .item-2 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/004.jpg);
}
.works_basic .works-contents .item-3,
.works_ios .works-contents .item-3 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/005.jpg);
}
.works_basic .works-contents .item-4,
.works_ios .works-contents .item-4 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/006.jpg);
}
.works_basic .works-contents .item-5,
.works_ios .works-contents .item-5 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/007.jpg);
}
.works_basic .works-contents .item-6,
.works_ios .works-contents .item-6 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/008.jpg);
}
.works_basic .works-contents .item-7,
.works_ios .works-contents .item-7 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/009.jpg);
}
.works_basic .works-contents .item-8,
.works_ios .works-contents .item-8 {
background-image: url(//www.nextfront.co.jp/wp-content/themes/NextFront6/img/image/010.jpg);
}
@media (min-width: 1200px) {
.works_basic .works-contents .case-grid,
.works_ios .works-contents .case-grid {
grid-template-columns: repeat(6, 1fr);
}
.works_basic .works-contents .grid-item:nth-child(1),
.works_basic .works-contents .grid-item:nth-child(2),
.works_ios .works-contents .grid-item:nth-child(1),
.works_ios .works-contents .grid-item:nth-child(2) {
grid-column: span 3;
}
.works_basic .works-contents .grid-item:nth-child(3),
.works_basic .works-contents .grid-item:nth-child(4),
.works_basic .works-contents .grid-item:nth-child(5),
.works_ios .works-contents .grid-item:nth-child(3),
.works_ios .works-contents .grid-item:nth-child(4),
.works_ios .works-contents .grid-item:nth-child(5) {
grid-column: span 2;
}
.works_basic .works-contents .grid-item:nth-child(6),
.works_basic .works-contents .grid-item:nth-child(7),
.works_basic .works-contents .grid-item:nth-child(8),
.works_ios .works-contents .grid-item:nth-child(6),
.works_ios .works-contents .grid-item:nth-child(7),
.works_ios .works-contents .grid-item:nth-child(8) {
grid-column: span 2;
}
}
@media (max-width: 1199px) {
.works_basic .works-contents .case-grid,
.works_ios .works-contents .case-grid {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 220px;
}
.works_basic .works-contents .grid-item,
.works_ios .works-contents .grid-item {
grid-column: span 1;
}
}
@media (max-width: 699px) {
.works_basic .works-contents .case-grid,
.works_ios .works-contents .case-grid {
grid-template-columns: 1fr;
grid-auto-rows: 210px;
}
.works_basic .works-contents .grid-item,
.works_ios .works-contents .grid-item {
grid-column: span 1;
}
}
.works_basic .works-contents .front-cnt,
.works_ios .works-contents .front-cnt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
box-sizing: border-box;
color: #fdfdfd;
transition: background-color 0.3s ease;
}
.works_basic .works-contents .front-cnt > h3,
.works_ios .works-contents .front-cnt > h3 {
padding: 0 0 7px 7px;
margin-bottom: 5px;
font-size: 2rem;
line-height: 1;
font-weight: 500;
border-left: 4px solid #ff7700;
border-bottom: 1px solid #ffb876;
}
@media (max-width: 799px) {
.works_basic .works-contents .front-cnt > h3,
.works_ios .works-contents .front-cnt > h3 {
font-size: 1.8rem;
}
}
.works_basic .works-contents .front-cnt > p,
.works_ios .works-contents .front-cnt > p {
margin: 0;
font-size: 1.4rem;
color: #fdfdfd;
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.25);
}
.works_basic .works-contents .back-cnt,
.works_ios .works-contents .back-cnt {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
180deg,
rgba(51, 51, 51, 0.9490196078) 0%,
rgba(85, 85, 85, 0.9490196078) 100%
);
color: #fdfdfd;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
opacity: 0;
visibility: hidden;
transition: bottom 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
opacity 0.4s ease, visibility 0.4s;
overflow: hidden;
}
.works_basic .works-contents .back-cnt h4,
.works_ios .works-contents .back-cnt h4 {
font-size: 1.8rem;
margin: 0 0 15px;
padding-bottom: 5px;
border-bottom: 1px solid #bbbbbb;
width: 100%;
}
@media (max-width: 799px) {
.works_basic .works-contents .back-cnt h4,
.works_ios .works-contents .back-cnt h4 {
font-size: 1.6rem;
margin: 0 0 10px;
}
}
.works_basic .works-contents .back-cnt .tech-area,
.works_ios .works-contents .back-cnt .tech-area {
width: 100%;
}
.works_basic .works-contents .back-cnt .tech-area h5.tag-title,
.works_ios .works-contents .back-cnt .tech-area h5.tag-title {
display: block;
margin-bottom: 5px;
font-size: 1.4rem;
color: #ff7700;
font-weight: 500;
}
@media (max-width: 799px) {
.works_basic .works-contents .back-cnt .tech-area h5.tag-title,
.works_ios .works-contents .back-cnt .tech-area h5.tag-title {
font-size: 1.35rem;
}
}
.works_basic .works-contents .back-cnt .tech-area .tech-tags,
.works_ios .works-contents .back-cnt .tech-area .tech-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.works_basic .works-contents .back-cnt .tech-area .tech-tag,
.works_ios .works-contents .back-cnt .tech-area .tech-tag {
background-color: rgba(255, 255, 255, 0.15);
padding: 3px 8px;
border-radius: 4px;
font-size: 1.2rem;
font-weight: 500;
white-space: nowrap;
}
@media (max-width: 799px) {
.works_basic .works-contents .back-cnt .tech-area .tech-tag,
.works_ios .works-contents .back-cnt .tech-area .tech-tag {
padding: 3px 7px;
font-size: 1.1rem;
}
}
.works_basic .works-contents .layout:has(#case),
.works_basic .works-contents .layout:has(#products),
.works_basic .works-contents .layout:has(#our),
.works_ios .works-contents .layout:has(#case),
.works_ios .works-contents .layout:has(#products),
.works_ios .works-contents .layout:has(#our) {
margin: 0 auto;
}
@media (max-width: 799px) {
.works_basic .works-contents .layout:has(#case),
.works_basic .works-contents .layout:has(#products),
.works_basic .works-contents .layout:has(#our),
.works_ios .works-contents .layout:has(#case),
.works_ios .works-contents .layout:has(#products),
.works_ios .works-contents .layout:has(#our) {
margin: 0;
width: 100%;
}
}
.works_basic .works-contents .bg-greige,
.works_basic .works-contents .top-contents section.greige--inner,
.top-contents .works_basic .works-contents section.greige--inner,
.works_basic .works-contents .recruit-contetns section.greige--inner,
.recruit-contetns .works_basic .works-contents section.greige--inner,
.works_ios .works-contents .bg-greige,
.works_ios .works-contents .top-contents section.greige--inner,
.top-contents .works_ios .works-contents section.greige--inner,
.works_ios .works-contents .recruit-contetns section.greige--inner,
.recruit-contetns .works_ios .works-contents section.greige--inner {
background-color: #f5f4f3;
}
.works_basic .works-contents #products,
.works_ios .works-contents #products {
margin-top: 200px;
padding: 135px 0 150px;
position: relative;
}
@media (max-width: 799px) {
.works_basic .works-contents #products,
.works_ios .works-contents #products {
margin-top: 150px;
padding: 100px 0px;
}
}
.works_basic .works-contents #products .title-container,
.works_ios .works-contents #products .title-container {
max-width: 1200px;
width: 95%;
margin: 0 auto;
}
.works_basic .works-contents #products h2.navy,
.works_ios .works-contents #products h2.navy {
position: absolute;
transform: translate(0%, -210%);
}
@media (max-width: 799px) {
.works_basic .works-contents #products h2.navy,
.works_ios .works-contents #products h2.navy {
transform: translate(0, -205%);
font-size: 4.8rem;
}
}
@media (max-width: 499px) {
.works_basic .works-contents #products h2.navy,
.works_ios .works-contents #products h2.navy {
transform: translate(0, -235%);
font-size: 4rem;
}
}
.works_basic .works-contents #products .product-container,
.works_ios .works-contents #products .product-container {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.works_basic .works-contents #products .pc-mockup-container,
.works_ios .works-contents #products .pc-mockup-container {
position: relative;
width: 100%;
max-width: 1000px;
height: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.works_basic .works-contents #products .pc-mockup-container .arrow,
.works_ios .works-contents #products .pc-mockup-container .arrow {
position: absolute;
bottom: 35%;
transform: translateY(-50%);
z-index: 20;
font-size: 2rem;
background: rgba(253, 253, 253, 0.6);
border: none;
cursor: pointer;
transition: 0.3s;
padding: 0.4rem 0.8rem;
border: 1px solid #e1d1c1;
border-radius: 50%;
color: #d59c67;
}
.works_basic .works-contents #products .pc-mockup-container .arrow:hover,
.works_ios .works-contents #products .pc-mockup-container .arrow:hover {
background: rgba(253, 253, 253, 0.9019607843);
}
.works_basic .works-contents #products .pc-mockup-container .arrow.left,
.works_ios .works-contents #products .pc-mockup-container .arrow.left {
left: 3rem;
}
.works_basic .works-contents #products .pc-mockup-container .arrow.right,
.works_ios .works-contents #products .pc-mockup-container .arrow.right {
right: 3rem;
}
.works_basic .works-contents #products .pc-mockup-container .mockup,
.works_ios .works-contents #products .pc-mockup-container .mockup {
position: absolute;
top: 131px;
left: 50%;
transform: translateX(-50%);
width: 65%;
aspect-ratio: 16/9;
}
.works_basic .works-contents #products .pc-mockup-container .pc-frame,
.works_ios .works-contents #products .pc-mockup-container .pc-frame {
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 85%;
aspect-ratio: 16/9;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.works_basic .works-contents #products .pc-mockup-container .pc-frame img,
.works_ios .works-contents #products .pc-mockup-container .pc-frame img {
width: 100%;
}
.works_basic .works-contents #products .slide,
.works_ios .works-contents #products .slide {
position: absolute;
top: 22%;
left: 50%;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 0.8s ease;
cursor: pointer;
background-size: cover;
background-position: center;
display: flex;
flex-direction: column;
align-items: center;
}
.works_basic .works-contents #products .slide.active,
.works_ios .works-contents #products .slide.active {
transform: translate(-50%, -50%) scale(1) rotateY(0deg);
z-index: 3;
opacity: 1;
}
.works_basic .works-contents #products .slide.active img,
.works_ios .works-contents #products .slide.active img {
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
}
.works_basic .works-contents #products .slide.active .text,
.works_ios .works-contents #products .slide.active .text {
position: relative;
margin-top: 100px;
display: block;
}
.works_basic .works-contents #products .slide.active .link,
.works_ios .works-contents #products .slide.active .link {
display: flex;
justify-content: center;
align-items: center;
width: 30%;
margin: 30px auto 0;
border-top: 1px solid #d59c67;
border-bottom: 1px solid #d59c67;
}
.works_basic .works-contents #products .slide.active .link > a,
.works_ios .works-contents #products .slide.active .link > a {
position: relative;
z-index: 2;
width: 100%;
padding: 3% 10%;
background: #e1d1c1;
color: #fdfdfd;
text-align: center;
font-weight: 300;
}
.works_basic .works-contents #products .slide.active .link > a::after,
.works_ios .works-contents #products .slide.active .link > a::after {
content: "view more";
width: 100%;
height: 100%;
font-weight: 300;
padding: 3% 10%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 1;
transition: transform 0.4s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}
.works_basic .works-contents #products .slide.active .link > a::before,
.works_ios .works-contents #products .slide.active .link > a::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: #d59c67;
width: 100%;
height: 100%;
transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}
.works_basic .works-contents #products .slide.active .link > a:hover::before,
.works_ios .works-contents #products .slide.active .link > a:hover::before {
transform-origin: left top;
transform: scale(1, 1);
}
.works_basic .works-contents #products .slide.left,
.works_ios .works-contents #products .slide.left {
transform: translate(-145%, -50%) scale(0.6) rotateY(25deg);
z-index: 2;
opacity: 0.8;
}
.works_basic .works-contents #products .slide.left .text,
.works_basic .works-contents #products .slide.left .link,
.works_ios .works-contents #products .slide.left .text,
.works_ios .works-contents #products .slide.left .link {
display: none;
}
.works_basic .works-contents #products .slide.right,
.works_ios .works-contents #products .slide.right {
transform: translate(45%, -50%) scale(0.6) rotateY(-25deg);
z-index: 2;
opacity: 0.8;
}
.works_basic .works-contents #products .slide.right .text,
.works_basic .works-contents #products .slide.right .link,
.works_ios .works-contents #products .slide.right .text,
.works_ios .works-contents #products .slide.right .link {
display: none;
}
.works_basic .works-contents #products h3.title_navy,
.works_ios .works-contents #products h3.title_navy {
position: relative;
display: inline-block;
color: transparent;
border-bottom: transparent 2px solid;
transition: color 0.3s ease 0.8s;
transition: border-bottom 0.3s ease 0.8s;
padding-bottom: 2px;
margin-bottom: 10px;
}
.works_basic .works-contents #products h3.title_navy::before,
.works_ios .works-contents #products h3.title_navy::before {
content: "";
position: absolute;
top: 0%;
left: 0%;
height: 100%;
background: #17406f;
}
.works_basic .works-contents #products h3.title_navy::after,
.works_ios .works-contents #products h3.title_navy::after {
content: "products";
font-size: 10rem;
position: absolute;
transform: translate(-50%, -50%) rotate(-5deg);
top: 10%;
left: 10%;
color: rgba(213, 156, 103, 0.2509803922);
font-family: "Nothing You Could Do";
letter-spacing: -0.9rem;
}
.works_basic .works-contents #products .slide.active h3.title_navy,
.works_ios .works-contents #products .slide.active h3.title_navy {
animation: titleLabelText 1.2s ease forwards;
}
.works_basic .works-contents #products .slide.active h3.title_navy::before,
.works_ios .works-contents #products .slide.active h3.title_navy::before {
animation: titleLabel 0.8s ease forwards;
}
@keyframes titleLabel {
0% {
left: 0%;
width: 100%;
}
50% {
left: 0%;
width: 100%;
}
90% {
left: 0%;
width: 0%;
}
100% {
left: 0%;
width: 0%;
}
}
@keyframes titleLabelText {
0%,
60% {
color: transparent;
border-bottom: transparent 1.5px solid;
}
100% {
color: #17406f;
border-bottom: #17406f 1.5px solid;
}
}
@media (max-width: 1280px) {
.works_basic .works-contents #products .pc-mockup-container,
.works_ios .works-contents #products .pc-mockup-container {
height: 600px;
max-width: 800px;
}
.works_basic .works-contents #products .pc-mockup-container .pc-frame,
.works_ios .works-contents #products .pc-mockup-container .pc-frame {
top: 0px;
width: 69%;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .pc-mockup-container .mockup,
.works_ios .works-contents #products .pc-mockup-container .mockup {
top: 107px;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .slide,
.works_ios .works-contents #products .slide {
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.active img,
.works_ios .works-contents #products .slide.active img {
width: 81%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.left,
.works_ios .works-contents #products .slide.left {
transform: translate(-140%, -50%) scale(0.6) rotateY(20deg);
}
.works_basic .works-contents #products .slide.right,
.works_ios .works-contents #products .slide.right {
transform: translate(40%, -50%) scale(0.6) rotateY(-20deg);
}
.works_basic .works-contents #products .slide.active,
.works_ios .works-contents #products .slide.active {
transform: translate(-50%, -50%) scale(1);
}
.works_basic .works-contents #products .slide.active .text,
.works_ios .works-contents #products .slide.active .text {
margin-top: 70px;
}
.works_basic .works-contents #products h3.title_navy::after,
.works_ios .works-contents #products h3.title_navy::after {
font-size: 8rem;
transform: translate(-50%, -50%) rotate(-5deg);
top: 20%;
}
}
@media (max-width: 799px) {
.works_basic .works-contents #products .pc-mockup-container,
.works_ios .works-contents #products .pc-mockup-container {
height: 450px;
max-width: 500px;
}
.works_basic .works-contents #products .pc-mockup-container .pc-frame,
.works_ios .works-contents #products .pc-mockup-container .pc-frame {
top: 0px;
width: 69%;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .pc-mockup-container .mockup,
.works_ios .works-contents #products .pc-mockup-container .mockup {
top: 15%;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .slide,
.works_ios .works-contents #products .slide {
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.active img,
.works_ios .works-contents #products .slide.active img {
width: 81%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.left,
.works_ios .works-contents #products .slide.left {
transform: translate(-130%, -50%) scale(0.6) rotateY(20deg);
}
.works_basic .works-contents #products .slide.right,
.works_ios .works-contents #products .slide.right {
transform: translate(30%, -50%) scale(0.6) rotateY(-20deg);
}
.works_basic .works-contents #products .slide.active,
.works_ios .works-contents #products .slide.active {
transform: translate(-50%, -50%) scale(1);
}
.works_basic .works-contents #products .slide.active .text,
.works_ios .works-contents #products .slide.active .text {
margin-top: 50px;
}
.works_basic .works-contents #products h3.title_navy,
.works_ios .works-contents #products h3.title_navy {
font-size: 1.55rem;
}
.works_basic .works-contents #products h3.title_navy::after,
.works_ios .works-contents #products h3.title_navy::after {
font-size: 7rem;
transform: translate(-50%, -50%) rotate(-5deg);
top: 20%;
}
}
@media (max-width: 499px) {
.works_basic .works-contents #products .pc-mockup-container,
.works_ios .works-contents #products .pc-mockup-container {
height: 430px;
max-width: 375px;
}
.works_basic .works-contents #products .pc-mockup-container .pc-frame,
.works_ios .works-contents #products .pc-mockup-container .pc-frame {
top: 0px;
width: 69%;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .pc-mockup-container .arrow.left,
.works_ios .works-contents #products .pc-mockup-container .arrow.left {
left: 0rem;
}
.works_basic .works-contents #products .pc-mockup-container .arrow.right,
.works_ios .works-contents #products .pc-mockup-container .arrow.right {
right: 0rem;
}
.works_basic .works-contents #products .pc-mockup-container .mockup,
.works_ios .works-contents #products .pc-mockup-container .mockup {
top: 11.8%;
aspect-ratio: 16/10;
}
.works_basic .works-contents #products .slide,
.works_ios .works-contents #products .slide {
width: 100%;
height: 100%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.active img,
.works_ios .works-contents #products .slide.active img {
width: 81%;
transition: all 0.6s ease;
}
.works_basic .works-contents #products .slide.left,
.works_ios .works-contents #products .slide.left {
transform: translate(-130%, -50%) scale(0.6) rotateY(20deg);
}
.works_basic .works-contents #products .slide.right,
.works_ios .works-contents #products .slide.right {
transform: translate(30%, -50%) scale(0.6) rotateY(-20deg);
}
.works_basic .works-contents #products .slide.active,
.works_ios .works-contents #products .slide.active {
transform: translate(-50%, -50%) scale(1);
}
.works_basic .works-contents #products .slide.active .text,
.works_ios .works-contents #products .slide.active .text {
margin-top: 30px;
}
.works_basic .works-contents #products .slide.active .text h3.title_navy,
.works_ios .works-contents #products .slide.active .text h3.title_navy {
font-size: 1.4rem;
}
.works_basic
.works-contents
#products
.slide.active
.text
h3.title_navy::after,
.works_ios
.works-contents
#products
.slide.active
.text
h3.title_navy::after {
font-size: 7rem;
transform: translate(-50%, -50%) rotate(-5deg);
top: 20%;
}
.works_basic .works-contents #products .slide.active .text .pc-break,
.works_ios .works-contents #products .slide.active .text .pc-break {
display: none;
}
.works_basic .works-contents #products .slide.active .link,
.works_ios .works-contents #products .slide.active .link {
width: 100%;
}
}
.works_basic .works-contents #our,
.works_ios .works-contents #our {
margin: 0 auto;
padding: 130px 2.5%;
display: flex;
flex-direction: column;
}
@media (max-width: 799px) {
.works_basic .works-contents #our,
.works_ios .works-contents #our {
padding: 100px 2.5%;
}
}
.works_basic .works-contents #our .flex,
.works_ios .works-contents #our .flex {
justify-content: center;
align-items: center;
gap: 40px;
margin-bottom: 80px;
}
.works_basic .works-contents #our .flex:last-child,
.works_ios .works-contents #our .flex:last-child {
margin-bottom: 0;
}
.works_basic .works-contents #our .flex > img,
.works_ios .works-contents #our .flex > img {
max-width: 400px;
width: 30%;
border-radius: 25px;
}
@media (max-width: 799px) {
.works_basic .works-contents #our .flex,
.works_ios .works-contents #our .flex {
align-items: center;
gap: 10px;
}
.works_basic .works-contents #our .flex > img,
.works_ios .works-contents #our .flex > img {
width: 100%;
}
}
.works_basic .works-contents #our .flex h3.title_line,
.works_ios .works-contents #our .flex h3.title_line {
font-size: 1.6rem;
font-weight: normal;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #666666;
}
@media (max-width: 799px) {
.works_basic .works-contents #our .flex h3.title_line,
.works_ios .works-contents #our .flex h3.title_line {
font-size: 1.4rem;
}
}
.works_basic .works-contents #our .flex a.view,
.works_ios .works-contents #our .flex a.view {
margin: 10px 12% 0 auto;
display: block;
width: -moz-fit-content;
width: fit-content;
padding: 5px 10px;
position: relative;
transition: transform 0.3s ease;
font-size: 1.2rem;
}
.works_basic .works-contents #our .flex a.view:hover,
.works_ios .works-contents #our .flex a.view:hover {
color: #cc7524;
}
.works_basic .works-contents #our .flex a.view:hover::before,
.works_ios .works-contents #our .flex a.view:hover::before {
transform: translateX(8px) scaleY(0.7);
}
.works_basic .works-contents #our .flex a.view:hover::after,
.works_ios .works-contents #our .flex a.view:hover::after {
transform: translateX(8px) scaleY(0.7) rotate(45deg);
}
.works_basic .works-contents #our .flex a.view::before,
.works_ios .works-contents #our .flex a.view::before {
position: absolute;
content: "";
width: 200%;
height: 1px;
bottom: 0;
left: -25%;
background: #666666;
transform: translateX(0) scaleY(0.7);
transition: transform 0.3s ease;
}
.works_basic .works-contents #our .flex a.view::after,
.works_ios .works-contents #our .flex a.view::after {
position: absolute;
content: "";
width: 35%;
height: 1px;
bottom: 27%;
right: -80%;
transform: translateX(0) scaleY(0.7) rotate(45deg);
background: #666666;
transition: transform 0.3s ease;
}
.works_basic .bg-brown,
.works_ios .bg-brown {
background-color: #e1d1c1;
}