/* ==================== .css ==================== */ body { margin: 0; } body.is-form-sending { position: relative; } body.is-form-sending::before { content: ""; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); } /* ==================== grecaptcha-badge.css ==================== */ .grecaptcha-badge { visibility: hidden; } /* ==================== eyex/@keyframes.css ==================== */ @keyframes eyex-fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes eyex-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ==================== eyex/@loading.css ==================== */ .loading.eyex { overflow-x: hidden; } .eyex::before, .eyex::after { content: ''; display: block; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background: radial-gradient(circle, var(--blue) 70%, transparent 70%) no-repeat center center; background-size: 0.4em 0.4em; opacity: 0; visibility: hidden; transition: opacity 400ms; animation-play-state: paused; animation-direction: alternate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .eyex::before { animation-name: eyex-loading1; } .eyex::after { animation-name: eyex-loading2; } .loading.eyex::before, .loading.eyex::after { opacity: 1; visibility: visible; animation-play-state: running; } @keyframes eyex-loading1 { 0% { filter: blur(2px); transform: translateX(-1.5em); } 40% { filter: blur(2px); } 50% { filter: blur(0px); } 60% { filter: blur(2px); } 100% { filter: blur(2px); transform: translateX(1.5em); } } @keyframes eyex-loading2 { 0% { filter: blur(2px); transform: translateX(1.5em); } 40% { filter: blur(2px); } 50% { filter: blur(0px); } 60% { filter: blur(2px); } 100% { filter: blur(2px); transform: translateX(-1.5em); } } /* ==================== eyex/@reset.css ==================== */ .eyex h1, .eyex h2, .eyex h3, .eyex h4, .eyex h5, .eyex h6 { margin: 0; font-size: inherit; } .eyex p, .eyex figure, .eyex ul, .eyex ol, .eyex dl, .eyex dd { margin: 0; } .eyex ul, .eyex ol { padding: 0; list-style-type: none; } .eyex hr { border: none; margin: 0; } .eyex select, .eyex input, .eyex button, .eyex textarea { font-family: inherit; font-size: inherit; cursor: pointer; } .eyex table { margin: 0; } /* ==================== eyex/@responsive.css ==================== */ .eyex { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } .eyex, .eyex img { font-size: 20px; } @media (max-width: 567px) { .eyex, .eyex img { font-size: 4vw; } } @media (min-width: 568px) and (max-width: 1250px) { .eyex, .eyex img { font-size: 1.6vw; } } /* ==================== eyex/@root.css ==================== */ .eyex { display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; color: #232323; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-family: sans-serif; line-height: 1.5; } @media (max-width: 567px) { .eyex { grid-gap: 3em; } } @media (min-width: 568px) { .eyex { grid-gap: 4em; } } /* ==================== eyex/@vars.css ==================== */ .eyex { --black: #232323; --gray: #808080; --blue: #303c6d; --lightblue: rgba(48,60,106,0.5); --shadow: 0 0.5em 0.75em rgba(0,0,0,0.15); --image-shadow: 0.25em 0.25em 1em rgba(0,0,0,0.05); --bg-gray: rgba(35,35,35,0.03); --bg-bluegray: #edf1fa; --bg-lightblue: #294fa8; --content-side: calc((100% - var(--content-width))/2); } @media (max-width: 567px) { .eyex { --content-width: 90%; --size-m: 87.5%; } } @media (min-width: 568px) { .eyex { --content-width: 60em; --size-m: 75%; --size-l: 90%; } } /* ==================== eyex/.css ==================== */ .eyex img { max-width: 100%; vertical-align: bottom; } /* ==================== eyex/arrow.css ==================== */ .eyex .arrow { display: flex; position: relative; height: 0.35em; background: linear-gradient(var(--blue), var(--blue)) no-repeat center center / 100% 1px; } .eyex .arrow::before { content: ''; display: block; position: absolute; top: 0; aspect-ratio: 1/1; height: 100%; background: radial-gradient(var(--blue) 65%, transparent 70%); } .eyex .arrow_left::before { left: 0; } .eyex .arrow_right::before { right: 0; } .eyex .arrow_white { background-image: linear-gradient(white, white); } .eyex .arrow_white::before { background-image: radial-gradient(white 65%, transparent 70%); } /* ==================== eyex/footer.css ==================== */ @charset "UTF-8"; .eyex footer { display: grid; } @media (max-width: 567px) { .eyex footer { margin-top: 3em; padding-bottom: 5.1em; } } @media (min-width: 568px) { .eyex footer { margin-top: 4em; } } .eyex footer .reserve { display: grid; justify-items: center; background: url(../images/footer_image.jpg) no-repeat center center; } @media (max-width: 567px) { .eyex footer .reserve { grid-gap: 2em; padding: 3em 0; background-size: 140%; } } @media (min-width: 568px) { .eyex footer .reserve { grid-gap: 4em; padding: 4em 0; background-size: 100%; } } .eyex footer .reserve h2 { display: grid; justify-items: center; color: white; } @media (max-width: 567px) { .eyex footer .reserve h2 { font-size: 125%; } } @media (min-width: 568px) { .eyex footer .reserve h2 { font-size: 180%; } } .eyex footer .reserve h2::before { content: "CONTACT"; font-family: "Poppins", sans-serif; font-size: 58%; font-weight: 500; letter-spacing: 0.05em; opacity: 0.5; } .eyex footer .reserve ul { display: grid; grid-template-columns: repeat(2, 1fr); } @media (max-width: 567px) { .eyex footer .reserve ul { grid-gap: 1.75em; } } @media (min-width: 568px) { .eyex footer .reserve ul { grid-gap: 1.75em; } } .eyex footer .reserve ul li { position: relative; } @media (max-width: 567px) { .eyex footer .reserve ul li { width: 10em; } } @media (min-width: 568px) { .eyex footer .reserve ul li { width: 17em; } } .eyex footer .reserve ul li::before, .eyex footer .reserve ul li::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .eyex footer .reserve ul li::before { background: rgba(0, 0, 0, 0.15); filter: blur(0.5em); mix-blend-mode: multiply; transform: translateY(0.75em); } .eyex footer .reserve ul li::after { background: white; } .eyex footer .reserve ul li > * { position: relative; z-index: 1; } .eyex footer .reserve ul li a { display: grid; grid-gap: 1.5em; color: inherit; text-decoration: none; } @media (max-width: 567px) { .eyex footer .reserve ul li a { padding: 1em 0; } } @media (min-width: 568px) { .eyex footer .reserve ul li a { padding: 1.5em 0; transition: 200ms; } } @media (min-width: 568px) { .eyex footer .reserve ul li a:hover { padding: 1.5em 0; transition: 200ms; } } .eyex footer .reserve ul li a h3 { display: grid; grid-gap: 1em; justify-items: center; color: var(--blue); } @media (max-width: 567px) { .eyex footer .reserve ul li a h3 { font-size: var(--size-m); } } @media (min-width: 568px) { .eyex footer .reserve ul li a h3 { font-size: 125%; } } .eyex footer .reserve ul li a h3::before { content: ""; aspect-ratio: 1/1; width: 2.72em; background: no-repeat center center/contain; } .eyex footer .reserve ul li:nth-of-type(1) a h3::before { background-image: url(../images/reserve_icon_app.svg); } .eyex footer .reserve ul li:nth-of-type(1) a h3::before { background-image: url(../images/reserve_icon_web.svg); } .eyex footer .reserve ul li a p { display: grid; justify-items: center; color: inherit; } @media (max-width: 567px) { .eyex footer .reserve ul li a p { font-size: 60%; } } @media (min-width: 568px) { .eyex footer .reserve ul li a p { font-size: 80%; } } .eyex footer .contact { display: grid; justify-items: center; grid-gap: 2em; border-bottom: 1px solid var(--blue); background: var(--bg-gray); } @media (max-width: 567px) { .eyex footer .contact { padding: 3em 0; } } @media (min-width: 568px) { .eyex footer .contact { padding: 6em 0; } } .eyex footer .contact h2 { color: var(--blue); } @media (max-width: 567px) { .eyex footer .contact h2 { font-size: 125%; } } @media (min-width: 568px) { .eyex footer .contact h2 { font-size: 180%; } } @media (max-width: 567px) { .eyex footer .contact p { font-size: var(--size-m); } } @media (min-width: 568px) { .eyex footer .contact p { font-size: var(--size-m); } } .eyex footer .contact a { display: flex; align-items: center; justify-content: center; height: 3.4em; background: var(--blue); color: white; font-weight: bold; text-decoration: none; } @media (max-width: 567px) { .eyex footer .contact a { width: 17.6em; font-size: 125%; } } @media (min-width: 568px) { .eyex footer .contact a { width: 29em; font-size: 125%; transition: 400ms; } } @media (min-width: 568px) { .eyex footer .contact a:hover { background: var(--bg-lightblue); } } .eyex footer .sitemap { display: grid; } @media (max-width: 567px) { .eyex footer .sitemap { justify-items: center; grid-gap: 1.5em; padding: 3em 0; } } @media (min-width: 568px) { .eyex footer .sitemap { justify-self: center; padding: 4em 0; } } @media (max-width: 567px) { .eyex footer .sitemap .logo img { width: 5.7em; } } @media (min-width: 568px) { .eyex footer .sitemap .logo img { width: 7.6em; } } @media (min-width: 568px) { .eyex footer .sitemap nav { position: relative; margin-top: 2.5em; margin-left: 2em; } } .eyex footer .sitemap nav ul { line-height: 1.4; } .eyex footer .sitemap nav ul li a { color: inherit; text-decoration: none; } .eyex footer .sitemap nav > ul { display: grid; align-items: start; } .eyex footer .sitemap nav > ul .company { grid-area: company; } .eyex footer .sitemap nav > ul .service { grid-area: service; } .eyex footer .sitemap nav > ul .brand { grid-area: brand; } .eyex footer .sitemap nav > ul .column { grid-area: column; } .eyex footer .sitemap nav > ul .guide { grid-area: guide; } .eyex footer .sitemap nav > ul .shop { grid-area: shop; } .eyex footer .sitemap nav > ul .information { grid-area: information; } .eyex footer .sitemap nav > ul .voice { grid-area: voice; } .eyex footer .sitemap nav > ul .visitors { grid-area: visitors; } @media (max-width: 567px) { .eyex footer .sitemap nav > ul { grid-template-columns: auto auto; grid-template-areas: "company service" "shop information" "shop brand" "shop column" "shop guide" "shop voice" "visitors visitors"; font-size: 50%; grid-gap: 1em 4em; } } @media (min-width: 568px) { .eyex footer .sitemap nav > ul { grid-template-columns: 1fr 1fr auto; grid-template-areas: "company service brand" "company service column" "company service guide" "company service blank1" "shop information voice" "shop visitors visitors"; grid-gap: 1em 6.5em; font-size: 85%; } } .eyex footer .sitemap nav > ul > li { display: grid; grid-gap: 1em; } .eyex footer .sitemap nav > ul > li > ul { display: grid; grid-gap: 1em; margin-left: 1.5em; } @media (min-width: 568px) { .eyex footer .sitemap nav > ul > li > ul { font-size: 82%; } } .eyex footer .sitemap nav > ul > li > ul > li { display: grid; grid-gap: 0.5em; } .eyex footer .sitemap nav > ul > li > ul > li > a { display: flex; } .eyex footer .sitemap nav > ul > li > ul > li > a::before { content: "－"; } .eyex footer .sitemap nav > ul > li > ul .sns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; justify-self: start; justify-content: start; grid-gap: 1em; } @media (min-width: 568px) { .eyex footer .sitemap nav > ul > li > ul .sns { margin-left: 6em; } } @media (max-width: 567px) { .eyex footer .sitemap nav > ul > li > ul .sns img { width: 1em; } } @media (min-width: 568px) { .eyex footer .sitemap nav > ul > li > ul .sns img { width: 2em; } } .eyex footer .sitemap nav .visit ul { grid-template-columns: repeat(2, 1fr); } @media (max-width: 567px) { .eyex footer .sitemap nav .visit ul { grid-gap: 2em; justify-self: center; margin-left: 0; } } .eyex footer .sitemap nav .visit ul li a { display: grid; grid-gap: 0.75em; justify-items: center; border: 1px solid var(--blue); font-weight: bold; color: var(--blue); } @media (max-width: 567px) { .eyex footer .sitemap nav .visit ul li a { padding: 0.75em 1.25em; font-size: 175%; } } @media (min-width: 568px) { .eyex footer .sitemap nav .visit ul li a { padding: 0.75em 0; font-size: 178%; } } .eyex footer .sitemap nav .visit ul li a::before { content: ""; aspect-ratio: 1/1; width: 2.5em; background: no-repeat center center/contain; } .eyex footer .sitemap nav .visit ul li:nth-of-type(1) a::before { background-image: url(../images/reserve_icon_app.svg); } .eyex footer .sitemap nav .visit ul li:nth-of-type(2) a::before { background-image: url(../images/reserve_icon_web.svg); } .eyex footer .sitemap nav .recruit { width: 12em; } @media (max-width: 567px) { .eyex footer .sitemap nav .recruit { display: grid; margin: 2em auto 0; } } @media (min-width: 568px) { .eyex footer .sitemap nav .recruit { position: absolute; right: 0; bottom: 0; transition: 200ms; } .eyex footer .sitemap nav .recruit:hover { opacity: 0.6; } } .eyex footer address { display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--blue); padding: 2em; color: var(--blue); font-style: normal; text-align: center; } @media (max-width: 567px) { .eyex footer address { display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--blue); padding: 2em; color: var(--blue); font-style: normal; text-align: center; } } @media (min-width: 568px) { .eyex footer address { font-size: 80%; } } @media (max-width: 567px) { .eyex footer .foot-menu { position: fixed; z-index: 9; left: 0; bottom: 0; width: 100%; } .eyex footer .foot-menu ul { display: grid; grid-gap: 1px; grid-template-columns: repeat(4, 1fr); padding: 0; list-style-type: none; background: white; } .eyex footer .foot-menu ul li { font-size: 62.5%; color: white; background: var(--blue); line-height: 1.25; } .eyex footer .foot-menu ul li a { display: grid; justify-items: center; padding: 1em 0; color: inherit; font-weight: bold; text-decoration: none; } .eyex footer .foot-menu ul li a::before { content: ""; width: 100%; height: 2.6em; margin-bottom: 1em; background: no-repeat center center/contain; } .eyex footer .foot-menu ul li:nth-of-type(1) a::before { background-image: url(../images/footmenu_icon_1.png); } .eyex footer .foot-menu ul li:nth-of-type(2) a::before { background-image: url(../images/footmenu_icon_2.png); } .eyex footer .foot-menu ul li:nth-of-type(3) a::before { background-image: url(../images/footmenu_icon_3.png); } .eyex footer .foot-menu ul li:nth-of-type(4) a::before { background-image: url(../images/footmenu_icon_3.png); } } @media (min-width: 568px) { .eyex footer .foot-menu { display: none; } } /* ==================== eyex/&#brand/contents/@.css ==================== */ .eyex#brand .contents { display: grid; background: var(--bg-gray); justify-items: center; } @media (max-width: 567px) { .eyex#brand .contents { grid-gap: 2em; padding: 2.5em 0; } } @media (min-width: 568px) { .eyex#brand .contents { grid-gap: 3em; padding: 4em 0; } } /* ==================== eyex/&#brand/contents/

.css ==================== */ .eyex#brand .contents h2 { padding-bottom: 1em; color: var(--blue); background: linear-gradient(var(--blue), var(--blue)) no-repeat center bottom; line-height: 1.3; } @media (max-width: 567px) { .eyex#brand .contents h2 { width: 12em; background-size: 2.28em 1px; font-size: 125%; text-align: center; } } @media (min-width: 568px) { .eyex#brand .contents h2 { background-size: 3.8333333333333em 1px; font-size: 150%; } } /* ==================== eyex/&#brand/contents/brand-list/@.css ==================== */ .eyex#brand .contents .brand-list { display: grid; width: var(--content-width); } @media (max-width: 567px) { .eyex#brand .contents .brand-list { grid-template-columns: repeat(3, 1fr); grid-gap: 1em; } } @media (min-width: 568px) { .eyex#brand .contents .brand-list { grid-template-columns: repeat(5, 1fr); grid-gap: 2.5em; } } /* ==================== eyex/&#brand/contents/brand-list/> div/&.other.css ==================== */ .eyex#brand .contents .brand-list > div.other { display: grid; align-items: center; justify-content: center; aspect-ratio: 1/1; background: white; } @media (max-width: 567px) { .eyex#brand .contents .brand-list > div.other { font-size: var(--size-m); } } /* ==================== eyex/&#brand/contents/brand-list/> div/
.css ==================== */ .eyex#brand .contents .brand-list > div figcaption { display: grid; justify-items: center; line-height: 1.4; } .eyex#brand .contents .brand-list > div figcaption small { font-size: 100%; } @media (max-width: 567px) { .eyex#brand .contents .brand-list > div figcaption { font-size: 67.5%; } } @media (min-width: 568px) { .eyex#brand .contents .brand-list > div figcaption { font-size: 100%; } } /* ==================== eyex/&#brand/contents/brand-list/> div/
.css ==================== */ .eyex#brand .contents .brand-list > div figure { display: grid; grid-gap: 0.5em; } /* ==================== eyex/&#brand/contents/brand-list/> div/.css ==================== */ .eyex#brand .contents .brand-list > div img { aspect-ratio: 1/1; box-sizing: border-box; width: 100%; padding: 0.5em; object-fit: contain; background: white; } /* ==================== eyex/&#career/contents/@.css ==================== */ /* ==================== eyex/&#career/contents/
/@.css ==================== */ .eyex#career .contents section { display: grid; } .eyex#career .contents section:nth-of-type(1) { background: var(--blue); } .eyex#career .contents section:nth-of-type(3), .eyex#career .contents section:nth-of-type(5) { background: var(--bg-gray); } @media (max-width: 567px) { .eyex#career .contents section { padding: 2em 0; grid-gap: 2em; } } @media (min-width: 568px) { .eyex#career .contents section { padding: 5em 0; grid-gap: 2.5em; } } /* ==================== eyex/&#career/contents/
/

.css ==================== */ .eyex#career .contents section h2 { justify-self: center; display: grid; justify-items: center; color: var(--blue); padding-bottom: 1em; background: linear-gradient(var(--blue), var(--blue)) no-repeat center bottom; line-height: 1.3; } .eyex#career .contents section:nth-of-type(1) h2 { color: white; background-image: linear-gradient(white, white); } .eyex#career .contents section h2::before { font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: 0.05em; opacity: 0.5; } .eyex#career .contents section:nth-of-type(1) h2::before { content: 'WELCOME'; } .eyex#career .contents section:nth-of-type(2) h2::before { content: 'WE ARE'; } .eyex#career .contents section:nth-of-type(3) h2::before { content: 'JOB DESCRIPTION'; } .eyex#career .contents section:nth-of-type(4) h2::before { content: 'WANT'; } .eyex#career .contents section:nth-of-type(5) h2::before { content: 'RECRUIT'; } @media (max-width: 567px) { .eyex#career .contents section h2 { font-size: var(--size-m); background-size: 3.25em 1px; } } @media (min-width: 568px) { .eyex#career .contents section h2 { font-size: 150%; background-size: 3.83em 1px; } .eyex#career .contents section h2::before { font-size: 1.2em; } } /* ==================== eyex/&#career/contents/
/job/@.css ==================== */ .eyex#career .contents section .job { display: grid; justify-self: center; } @media (max-width: 567px) { .eyex#career .contents section .job { width: var(--content-width); } } /* ==================== eyex/&#career/contents/
/job/

.css ==================== */ .eyex#career .contents section .job h3 { display: grid; grid-auto-flow: column; grid-gap: 1em; align-items: center; justify-content: start; font-size: var(--size-m); font-weight: normal; } .eyex#career .contents section .job h3::before { content: ''; aspect-ratio: 1/1; width: 0.8em; background: var(--black); } .eyex#career .contents section .job h3:nth-of-type(n+2) { margin-top: 1.5em; } /* ==================== eyex/&#career/contents/
/job/
    .css ==================== */ .eyex#career .contents section .job ul { margin-left: 2em; } .eyex#career .contents section .job ul li { display: grid; grid-auto-flow: column; grid-gap: 0.25em; justify-content: start; font-size: var(--size-m); } .eyex#career .contents section .job ul li::before { content: '-'; } /* ==================== eyex/&#career/contents/
    /recruit/@.css ==================== */ .eyex#career .contents section .recruit { display: grid; grid-gap: 3em; justify-self: center; } @media (max-width: 567px) { .eyex#career .contents section .recruit { width: var(--content-width); } } /* ==================== eyex/&#career/contents/
    /recruit/
    .css ==================== */ .eyex#career .contents section .recruit dl { display: grid; grid-template-columns: max-content 1fr; font-size: var(--size-m); } .eyex#career .contents section .recruit dl dt { display: grid; grid-auto-flow: column; grid-gap: 1em; align-items: center; justify-content: start; } .eyex#career .contents section .recruit dl dt:nth-of-type(4) { letter-spacing: 2em; } .eyex#career .contents section .recruit dl dt:nth-of-type(5) { letter-spacing: 2em; } .eyex#career .contents section .recruit dl dt:nth-of-type(6) { letter-spacing: 0.5em; } .eyex#career .contents section .recruit dl dt::before { content: ''; aspect-ratio: 1/1; background: var(--black); width: 0.8em; } .eyex#career .contents section .recruit dl dt:nth-of-type(1), .eyex#career .contents section .recruit dl dd:nth-of-type(1) { font-weight: bold; } @media (max-width: 567px) { .eyex#career .contents section .recruit dl { grid-gap: 2em 0; } } @media (min-width: 568px) { .eyex#career .contents section .recruit dl { grid-gap: 1.5em; } } /* ==================== eyex/&#career/contents/
    /want/@.css ==================== */ .eyex#career .contents section .want { justify-self: center; width: var(--content-width); } /* ==================== eyex/&#career/contents/
    /want/
      .css ==================== */ .eyex#career .contents section .want ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .eyex#career .contents section .want ul li { position: relative; display: grid; border: 1px solid var(--blue); color: var(--blue); font-weight: bold; align-content: center; justify-items: center; } .eyex#career .contents section .want ul li::after { content: ''; display: block; position: absolute; left: 50%; aspect-ratio: 3/7; transform: translateX(-50%); background: no-repeat center center / contain; } .eyex#career .contents section .want ul li:nth-of-type(1)::after { background-image: url(../images/career_want_icon_1.png); } .eyex#career .contents section .want ul li:nth-of-type(2)::after { background-image: url(../images/career_want_icon_2.png); } .eyex#career .contents section .want ul li:nth-of-type(3)::after { background-image: url(../images/career_want_icon_3.png); } @media (max-width: 567px) { .eyex#career .contents section .want ul { grid-gap: 0.5em; } .eyex#career .contents section .want ul li { padding-top: 1.25em; padding-bottom: 7em; font-size: 65%; } .eyex#career .contents section .want ul li::after { bottom: 1em; height: 6em; } } @media (min-width: 568px) { .eyex#career .contents section .want ul { grid-gap: 1.5em; } .eyex#career .contents section .want ul li { padding-top: 1.5em; padding-bottom: 8em; font-size: 105%; } .eyex#career .contents section .want ul li::after { bottom: 1em; height: 6.6em; } } /* ==================== eyex/&#career/contents/
      /weare/@.css ==================== */ .eyex#career .contents section .weare { justify-self: center; } /* ==================== eyex/&#career/contents/
      /weare/
        .css ==================== */ .eyex#career .contents section .weare ol { display: grid; color: var(--blue); font-weight: bold; } .eyex#career .contents section .weare ol li { position: relative; display: grid; align-content: center; justify-items: center; aspect-ratio: 1/1; border: 1px solid var(--blue); line-height: 1.3; } .eyex#career .contents section .weare ol li::before { position: absolute; left: 50%; top: 0; transform: translate(-50%, 1em); font-family: 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0.05em; } .eyex#career .contents section .weare ol li > span { transform: translateY(0.5em); } .eyex#career .contents section .weare ol li small { display: grid; align-content: center; justify-items: center; position: absolute; left: 0; bottom: 0; width: 100%; height: 3.5em; background: var(--blue); color: white; } .eyex#career .contents section .weare ol li:nth-of-type(1)::before { content: '01'; } .eyex#career .contents section .weare ol li:nth-of-type(2)::before { content: '02'; } .eyex#career .contents section .weare ol li:nth-of-type(3)::before { content: '03'; } .eyex#career .contents section .weare ol li:nth-of-type(4)::before { content: '04'; } .eyex#career .contents section .weare ol li:nth-of-type(5)::before { content: '05'; } .eyex#career .contents section .weare ol li:nth-of-type(6)::before { content: '06'; } @media (max-width: 567px) { .eyex#career .contents section .weare ol { grid-template-columns: repeat(2, 1fr); grid-gap: 1.5em 1.25em; } .eyex#career .contents section .weare ol li { width: 13.5em; font-size: 75%; } .eyex#career .contents section .weare ol li::before { font-size: 1.8em; } .eyex#career .contents section .weare ol li small { font-size: 0.7em; } } @media (min-width: 568px) { .eyex#career .contents section .weare ol { grid-template-columns: repeat(3, 1fr); grid-gap: 2.5em 7.4em; } .eyex#career .contents section .weare ol li { width: 12.8em; padding: 0 1em; font-size: 105%; } .eyex#career .contents section .weare ol li::before { font-size: 1.7142857142857em; } .eyex#career .contents section .weare ol li small { font-size: 0.66666666666667em; } } /* ==================== eyex/&#career/contents/
        /welcome/@.css ==================== */ .eyex#career .contents section .welcome { justify-self: center; } /* ==================== eyex/&#career/contents/
        /welcome/

        .css ==================== */ .eyex#career .contents section .welcome p { font-weight: bold; color: white; } @media (max-width: 567px) { .eyex#career .contents section .welcome p { font-size: var(--size-m); } } @media (min-width: 568px) { .eyex#career .contents section .welcome p { font-size: 150%; } } /* ==================== eyex/&#column/frame/@.css ==================== */ .eyex#column .frame { display: grid; } @media (max-width: 567px) { .eyex#column .frame { grid-gap: 3em; } } @media (min-width: 568px) { .eyex#column .frame { justify-self: center; grid-template-columns: 70% 1fr; grid-gap: 0 5em; align-items: start; width: var(--content-width); } } /* ==================== eyex/&#column/frame/archive/@.css ==================== */ .eyex#column .frame .archive { display: grid; } @media (max-width: 567px) { .eyex#column .frame .archive { justify-self: center; grid-gap: 3em; padding: 0 2.5em; } } @media (min-width: 568px) { .eyex#column .frame .archive { grid-gap: 4em; } } /* ==================== eyex/&#column/frame/archive/

        .css ==================== */ .eyex#column .frame .archive h2 { color: var(--blue); } @media (max-width: 567px) { .eyex#column .frame .archive h2 { justify-self: center; font-size: 125%; } } @media (min-width: 568px) { .eyex#column .frame .archive h2 { font-size: 150%; } } /* ==================== eyex/&#column/frame/archive/pagination.css ==================== */ .eyex#column .frame .archive .pagination { justify-self: center; } .eyex#column .frame .archive .pagination ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; color: rgba(0,0,0,0.5); } .eyex#column .frame .archive .pagination li { text-align: center; } .eyex#column .frame .archive .pagination li.current { color: inherit; } .eyex#column .frame .archive .pagination li.prev, .eyex#column .frame .archive .pagination li.next { display: none; } .eyex#column .frame .archive .pagination li a { display: block; padding: 0 0.5em; color: inherit; text-decoration: none; } @media (max-width: 567px) { .eyex#column .frame .archive .pagination li { font-size: var(--size-m); } } /* ==================== eyex/&#column/frame/archive/posts/@.css ==================== */ .eyex#column .frame .archive .posts { display: grid; } @media (max-width: 567px) { .eyex#column .frame .archive .posts { grid-gap: 3em; } } @media (min-width: 568px) { .eyex#column .frame .archive .posts { grid-gap: 4em; } } /* ==================== eyex/&#column/frame/archive/posts/
        /@.css ==================== */ .eyex#column .frame .archive .posts article { display: grid; align-items: start; } .eyex#column .frame .archive .posts article .image { grid-area: image; } .eyex#column .frame .archive .posts article time { grid-area: time; } .eyex#column .frame .archive .posts article .category { grid-area: category; } .eyex#column .frame .archive .posts article .writer { grid-area: writer; } .eyex#column .frame .archive .posts article h1 { grid-area: h1; } .eyex#column .frame .archive .posts article .summary { grid-area: summary; } .eyex#column .frame .archive .posts article .more { grid-area: more; } @media (max-width: 567px) { .eyex#column .frame .archive .posts article { grid-template-columns: max-content 1fr max-content; grid-template-areas: 'image image image' 'time category writer' 'h1 h1 h1' 'summary summary summary' 'more more more'; grid-gap: 0.5em 1.25em; } } @media (min-width: 568px) { .eyex#column .frame .archive .posts article { grid-template-columns: 18em max-content 1fr max-content; grid-template-rows: repeat(3, max-content) 1fr; grid-template-areas: 'image time category writer' 'image h1 h1 h1' 'image summary summary summary' 'image blank1 more more' 'image blank2 blank2 blank2'; grid-gap: 0.5em 1.5em; align-content: start; justify-content: start; } } /* ==================== eyex/&#column/frame/archive/posts/
        /

        .css ==================== */ .eyex#column .frame .archive .posts article h1 a { color: inherit; text-decoration: none; } @media (max-width: 567px) { .eyex#column .frame .archive .posts article h1 { font-size: var(--size-m); } } @media (min-width: 568px) { .eyex#column .frame .archive .posts article h1 { font-size: var(--size-l); } } /* ==================== eyex/&#column/frame/archive/posts/
        /