@charset "UTF-8";
/*----------------------------------------------------------------------------
reset
----------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
}
ul, ol {
list-style-type: none;
}
em, strong, th, address {
font-style: normal;
font-weight: normal;
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
img,
object,
embed {
border: 0;
vertical-align: top;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
hr {
display: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
font-size: 100%;
}
li {
list-style-type: none;
}
strong {
font-weight: bold;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
/*----------------------------------------------------------------------------
CSS Custom Properties
----------------------------------------------------------------------------*/
:root {
--primary-color: #193C72;
--secondary-color: #0089BB;
--primary-txt-color: #000000;
--primary-bg-color: #F1ECE8;
--base-width: 1192;
--content-width: min(100%, 1192px);
}
@media screen and (max-width: 767px) {
:root {
--base-width: 375;
--content-width: calc(325 / var(--base-width) * 100vw);
}
}
/*----------------------------------------------------------------------------
base
----------------------------------------------------------------------------*/
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
}
body {
position: relative;
padding-top: 90px;
color: var(--primary-txt-color);
font-family: 'Noto sans JP', sans-serif;
line-height: 1;
font-size: 1.6rem;
background: var(--primary-bg-color);
-webkit-font-smoothing: antialiased;
}
body.opening_hidden {
overflow: auto;
}
.sp,
.sp_inline {
display: none;
}
.pc {
display: block;
}
@media screen and (max-width: 767px) {
.sp {
display: block;
}
.sp_inline {
display: inline;
}
.pc {
display: none;
}
}
.common_txt {
font-size: min((20 / var(--base-width) * 100vw), 20px);
font-weight: 400;
line-height: calc(40 / 20);
letter-spacing: normal;
text-align: justify;
}
.common_txt_ttl {
display: flex;
justify-content: center;
align-items: center;
color: var(--feiler-color);
}
.common_txt_ttl .mark {
position: relative;
width: .7em;
transform: translateY(5%);
}
@media screen and (max-width: 767px) {
body {
padding-top: 45px;
}
.common_txt {
font-size: calc(13 / var(--base-width) * 100vw);
line-height: calc(24 / 13);
}
.common_txt_ttl .mark {
transform: translateY(0);
}
}
/*----------------------------------------------------------------------------
fadein
----------------------------------------------------------------------------*/
.fadein {
opacity : 0;
filter: blur(5px);
transition : opacity 1.0s cubic-bezier(0.33, 1, 0.68, 1), filter 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadein.scrollin {
opacity : 1;
filter: blur(0);
}
@keyframes fadein { /* animation: fadein 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; */
0% {
opacity : 0;
filter: blur(5px);
}
100% {
opacity : 1;
filter: blur(0);
}
}
.fadein_x,
.fadein_x02 {
opacity : 0;
transform : translate3d(20px, 0, 0);
filter: blur(5px);
transition : transform 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s cubic-bezier(0.33, 1, 0.68, 1), filter 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadein_x02 {
transform : translate3d(-20px, 0, 0);
}
.fadein_x.scrollin,
.fadein_x02.scrollin {
opacity : 1;
transform : translate3d(0, 0, 0);
filter: blur(0);
}
@-moz-document url-prefix() {
.fadein_x {
transform : translate3d(20px, 0, 0) rotate(0.0001deg);
}
.fadein_x02 {
transform : translate3d(-20px, 0, 0) rotate(0.0001deg);
}
.fadein_x.scrollin,
.fadein_x02.scrollin {
transform : translate3d(0, 0, 0) rotate(0.0001deg);
}
}
@keyframes fadein_x { /* animation: fadein_x 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; */
0% {
opacity : 0;
transform : translate3d(20px, 0, 0);
filter: blur(5px);
}
100% {
opacity : 1;
transform : translate3d(0, 0, 0);
filter: blur(0);
}
}
@-moz-document url-prefix() {
@keyframes fadein_x {
0% {
opacity : 0;
transform : translate3d(20px, 0, 0) rotate(0.0001deg);
filter: blur(5px);
}
100% {
opacity : 1;
transform : translate3d(0, 0, 0) rotate(0.0001deg);
filter: blur(0);
}
}
}
.fadein_y,
.fadein_y02 {
opacity : 0;
transform : translate3d(0, 20px, 0);
filter: blur(5px);
transition : transform 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s cubic-bezier(0.33, 1, 0.68, 1), filter 1.0s cubic-bezier(0.33, 1, 0.68, 1);
}
.fadein_y02 {
transform : translate3d(0, -20px, 0);
}
.fadein_y.scrollin,
.fadein_y02.scrollin {
opacity : 1;
transform : translate3d(0, 0, 0);
filter: blur(0);
}
@-moz-document url-prefix() {
.fadein_y {
transform : translate3d(0, 20px, 0) rotate(0.0001deg);
}
.fadein_y02 {
transform : translate3d(0, -20px, 0) rotate(0.0001deg);
}
.fadein_y.scrollin,
.fadein_y02.scrollin {
transform : translate3d(0, 0, 0) rotate(0.0001deg);
}
}
@keyframes fadein_y { /* animation: fadein_y 1.4s cubic-bezier(0.33, 1, 0.68, 1) both; */
0% {
opacity : 0;
transform : translate3d(0, 20px, 0);
filter: blur(5px);
}
100% {
opacity : 1;
transform : translate3d(0, 0, 0);
filter: blur(0);
}
}
@-moz-document url-prefix() {
@keyframes fadein_y {
0% {
opacity : 0;
transform : translate3d(0, 20px, 0) rotate(0.0001deg);
filter: blur(5px);
}
100% {
opacity : 1;
transform : translate3d(0, 0, 0) rotate(0.0001deg);
filter: blur(0);
}
}
}
.no_blur {
filter: blur(0) !important;
}
/*-------------------------------------------------
gide line
--------------------------------------------------*/
body {
position: relative;
}
body.debug::before {
display: block;
content: '';
width: 1px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
background: magenta;
pointer-events: none;
z-index: 9999;
}
body.debug #onetrust-consent-sdk #onetrust-banner-sdk {
display: none !important;
}
/*-------------------------------------------------
header
--------------------------------------------------*/
.lp-seikoid-header {
position: fixed;
top: 0;
left: 0;
display: flex;
height: 90px;
padding: 0 40px;
justify-content: space-between;
align-items: center;
background-color: #000;
width: 100%;
z-index: 100;
}
.lp-seikoid-header .lp-seikoid-header__logo {
width: 120px;
}
.lp-seikoid-header .lp-seikoid-header__logo img {
width: 100%;
height: auto;
}
/*
.lp-seikoid-header .header-button a {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
color: #000;
font-weight: 700;
line-height: 1;
width: 256px;
height: 50px;
transition: 0.2s;
}
.lp-seikoid-header .header-button a:hover {
background-color: #F9D35E;
}
*/
.lp-seikoid-header .header-button a.common_btn {
width: 270px;
aspect-ratio: 270 / 60;
color: var(--primary-color);
font-size: 18px;
background-color: #fff;
letter-spacing: calc(1em * 0.05);
transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
}
.lp-seikoid-header .header-button a.common_btn .en {
font-size: 20px;
}
.lp-seikoid-header .header-button a.common_btn .min {
margin-top: 0.6em;
font-size: 13px;
letter-spacing: calc(1em * 0.1);
}
.lp-seikoid-header .header-button a.common_btn::before {
right: calc(11 / 270 * 100cqi);
width: calc(8 / 270 * 100cqi);
background: url(../img/icon_common_btn_bl.svg) center center no-repeat;
background-size: contain;
transition: background 0.1s ease-in-out;
}
@media (hover: hover) {
.lp-seikoid-header .header-button a.common_btn:hover {
color: #fff;
transition: color 0.1s ease-in-out 0.1s;
/*
background: var(--secondary-color);
transition: background 0.1s ease-in-out 0.1s, color 0.1s ease-in-out 0.1s;
*/
}
.lp-seikoid-header .header-button a.common_btn:hover::before {
background: url(../img/icon_common_btn.svg) center center no-repeat;
background-size: contain;
transition: background 0.1s ease-in-out 0.1s;
}
}
@media screen and (max-width: 767px) {
.lp-seikoid-header {
height: 45px;
padding: 0 15px;
}
.lp-seikoid-header .lp-seikoid-header__logo {
width: 75px;
}
.lp-seikoid-header .header-button {
font-size: 12px;
}
/*
.lp-seikoid-header .header-button a {
height: auto;
width: auto;
padding: 10px;
}
*/
.lp-seikoid-header .header-button a.common_btn {
width: min(186 / var(--base-width)* 100vw, 186px);
aspect-ratio: 186 / 35;
font-size: min(13 / var(--base-width)* 100vw, 13px);
border-radius: 5px;
}
.lp-seikoid-header .header-button a.common_btn .en {
font-size: calc(14 / 13 * 1em);
}
.lp-seikoid-header .header-button a.common_btn .min {
margin-top: 0.4em;
font-size: calc(10 / 13 * 1em);
}
.lp-seikoid-header .header-button a.common_btn::before {
right: calc(6 / 186 * 100cqi);
width: calc(6 / 186 * 100cqi);
background: url(../img/icon_common_btn_bl.svg) center center no-repeat;
background-size: contain;
}
}
/*-------------------------------------------------
kv
--------------------------------------------------*/
#kv {
position: relative;
overflow: hidden;
}
#kv .outer {
position: relative;
width: 100%;
height: 100%;
padding-top: min(60 / 1440 * 100vw, 60px);
}
#kv .inner {
position: relative;
display: grid;
grid-template-columns: 1.905fr 1fr;
gap: min(69 / 1440 * 100vw, 69px);
width: min(1202 / 1440 * 100vw, 1202px);
height: 100%;
margin-inline: auto;
}
#kv .inner .txt_block {
container-type: inline-size;
}
#kv .txt_block .tags {
display: flex;
justify-content: center;
gap: calc(16 / 743 * 100cqi);
}
#kv .txt_block .tag {
padding-inline: 0.3em 0.025em;
color: #fff;
font-size: calc(25 / 743 * 100cqi);
font-weight: 800;
background: var(--secondary-color);
border-radius: 5px;
line-height: calc(38 / 25 * 1em);
opacity: 0;
}
#kv.scrollin .txt_block .tag {
animation: fadein 1.0s cubic-bezier(0.33, 1, 0.68, 1) both;
animation-delay: 1.8s;
}
#kv.scrollin .txt_block .tag:nth-child(2) {
}
#kv .txt_block .tag .max {
position: relative;
display: inline-block;
margin-left: -0.1em;
font-size: calc(29 / 25 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 700;
transform: translateY(4%);
}
#kv .txt_block .tag .min {
position: relative;
display: inline-block;
padding-inline: 0.1em;
font-size: calc(21 / 25 * 100%);
}
#kv .txt_block .tag .num {
position: relative;
display: inline-block;
font-size: calc(31 / 25 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 600;
transform: translateY(4%);
}
#kv .txt_block .name {
margin-top: min(35 / 1440 * 100vw, 35px);
text-align: center;
opacity: 0;
}
#kv.scrollin .txt_block .name {
animation: fadein_y 1.0s cubic-bezier(0.33, 1, 0.68, 1) both;
animation-delay: 0.4s;
}
#kv .txt_block .name p {
position: relative;
display: inline-block;
padding-inline: 0.6em 0.5em;
color: var(--secondary-color);
font-size: calc(28 / 743 * 100cqi);
font-weight: 700;
letter-spacing: calc(1em * 0.03);
}
#kv .txt_block .name p .en {
position: relative;
display: inline-block;
font-size: calc(33 / 28 * 100%);
font-weight: 500;
font-family: 'Akshar', sans-serif;
transform: translateY(4%);
}
#kv .txt_block .name p::before,
#kv .txt_block .name p::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 95%;
background: var(--secondary-color);
transform: rotate(-30deg);
border-radius: 9999px;
overflow: hidden;
}
#kv .txt_block .name p::after {
left: auto;
right: 0;
transform: rotate(30deg);
}
#kv .txt_block .title {
margin-top: min(20 / 1440 * 100vw, 20px);
container-type: inline-size;
text-align: center;
}
#kv .txt_block .title .img {
position: relative;
width: calc(733 / 743 * 100cqi);
margin-inline: auto;
z-index: 1;
}
#kv .txt_block .title .img img {
opacity: 0;
filter: blur(5px);
transform: scale(1.6, 1.8);
transition: opacity 1.6s cubic-bezier(0.33, 1, 0.68, 1), filter 1.6s cubic-bezier(0.33, 1, 0.68, 1), transform .8s cubic-bezier(0.33, 1, 0.68, 1);
transition-delay: .2s;
}
#kv.scrollin .txt_block .title .img img {
opacity: 1;
filter: blur(0);
transform: scale(1, 1);
}
#kv .txt_block .title .img::before,
#kv .txt_block .title .img::after {
content: '';
position: absolute;
bottom: 5%;
left: 0;
width: 0%;
height: 22%;
background: #fff;
z-index: -1;
transition: width 1.0s cubic-bezier(0.33, 1, 0.68, 1);
transition-delay: .5s;
}
#kv .txt_block .title .img::after {
display: none;
}
#kv.scrollin .txt_block .title .img::before,
#kv.scrollin .txt_block .title .img::after {
width: 100%;
}
#kv .txt_block .title .btm_txt {
display: inline-block;
margin-top: min(30 / 1440 * 100vw, 30px);
color: var(--primary-color);
font-size: calc(45 / 743 * 100cqi);
font-weight: 800;
}
#kv .txt_block .title .btm_txt span {
display: inline-block;
opacity: 0;
filter: blur(2px);
transform: scale(1.6);
transition: opacity 0.6s cubic-bezier(0.33, 1, 0.68, 1), filter 0.6s cubic-bezier(0.33, 1, 0.68, 1), transform .3s cubic-bezier(0.33, 1, 0.68, 1);
}
:root {
--btm_txt_span-delay: 0.8s;
--btm_txt_span-duration: .1s;
}
#kv .txt_block .title .btm_txt span:nth-child(1) {
transition-delay: calc(var(--btm_txt_span-delay));
}
#kv .txt_block .title .btm_txt span:nth-child(2) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 1));
}
#kv .txt_block .title .btm_txt span:nth-child(3) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 2));
}
#kv .txt_block .title .btm_txt span:nth-child(4) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 3));
}
#kv .txt_block .title .btm_txt span:nth-child(5) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 4));
}
#kv .txt_block .title .btm_txt span:nth-child(6) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 5));
}
#kv .txt_block .title .btm_txt span:nth-child(7) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 6));
}
#kv .txt_block .title .btm_txt span:nth-child(8) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 7));
}
#kv .txt_block .title .btm_txt span:nth-child(9) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 8));
}
#kv .txt_block .title .btm_txt span:nth-child(10) {
transition-delay: calc(var(--btm_txt_span-delay) + (var(--btm_txt_span-duration) * 9));
}
#kv.scrollin .txt_block .btm_txt span {
opacity: 1;
filter: blur(0);
transform: scale(1);
}
#kv .txt_block .title .btm_txt .em {
position: relative;
}
#kv .txt_block .title .btm_txt .em::before{
position: absolute;
top: -0.8em;
left: 50%;
transform: translate(-50%, 0);
color: var(--secondary-color);
font-size: 0.65em;
content: "・";
}
#kv .txt_block .title .btm_txt .max {
position: relative;
display: inline-block;
margin-left: 0.1em;
font-size: calc(55 / 45 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 700;
transform: translateY(4%) scale(1.6);
letter-spacing: 0.1em;
}
#kv.scrollin .txt_block .btm_txt span.max {
transform: translateY(4%) scale(1);
}
#kv .txt_block .date {
display: flex;
justify-content: center;
align-items: center;
margin-top: min(20 / 1440 * 100vw, 20px);
color: var(--secondary-color);
font-size: calc(16 / 743 * 100cqi);
opacity: 0;
}
#kv.scrollin .txt_block .date {
animation: fadein 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;
animation-delay: 1.8s;
}
#kv .txt_block .date .ttl {
display: grid;
place-content: center;
width: calc(50 / 743 * 100cqi);
aspect-ratio: 1 / 1;
padding-left: 0.1em;
color: #fff;
font-weight: 900;
letter-spacing: calc(1em * 0.1);
line-height: calc(19 / 16);
background: var(--secondary-color);
border-radius: 10px;
}
#kv .txt_block .date .year {
font-size: calc(20 / 16 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 700;
transform: rotate(90deg);
}
#kv .txt_block .date .num {
font-size: calc(60 / 16 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 600;
transform: translateY(6%);
}
#kv .txt_block .date .arrow {
display: inline-block;
width: 1em;
aspect-ratio: 1 / 1;
margin-left: 1.2em;
background: var(--secondary-color);
clip-path: polygon(0 0, 0% 100%, 80% 50%);
}
#kv .txt_block .day {
display: grid;
place-content: center;
width: calc(30 / 743 * 100cqi);
aspect-ratio: 1 / 1;
margin-top: 0.8em;
margin-left: 0.2em;
color: #fff;
font-size: calc(18 / 16 * 100%);
font-weight: 900;
background: var(--secondary-color);
border-radius: 9999px;
}
#kv .txt_block .txt {
opacity: 0;
}
#kv.scrollin .txt_block .txt {
animation: fadein 1.0s cubic-bezier(0.33, 1, 0.68, 1) both;
animation-delay: 1.8s;
}
#kv .txt_block .txt p {
margin-top: min(20 / 1440 * 100vw, 20px);
color: var(--secondary-color);
font-size: calc(16 / 743 * 100cqi);
font-weight: 600;
line-height: calc(30 / 16);
letter-spacing: calc(1em * 0.03);
text-align: center;
}
#kv .txt_block .txt p .color {
color: var(--primary-color);
}
#kv .txt_block .btn {
position: relative;
margin-top: min(35 / 1440 * 100vw, 35px);
text-align: center;
opacity: 0;
}
#kv.scrollin .txt_block .btn {
animation: fadein 1.2s cubic-bezier(0.33, 1, 0.68, 1) both;
animation-delay: 1.8s;
}
#kv .txt_block a.common_btn {
width: calc(370 / 743 * 100cqi);
aspect-ratio: 370 / 82;
font-size: calc(25 / 743 * 100cqi);
}
#kv .txt_block .fin_btn {
display: none;
}
#kv .txt_block .fin_btn::before {
display: none;
}
body.states_closed #kv .txt_block .main_btn {
display: none;
}
body.states_closed #kv .txt_block .fin_btn {
display: inline-flex;
width: calc(568 / 743 * 100cqi);
aspect-ratio: 568 / 95;
padding-top: 0.5%;
font-size: calc(23 / 743 * 100cqi);
line-height: calc(35 / 23);
letter-spacing: 0;
pointer-events: none;
}
#kv .txt_block a.common_btn .en {
font-size: calc(27 / 25 * 1em);
}
#kv .txt_block a.common_btn .min {
margin-top: 0.75em;
font-size: calc(15 / 25 * 1em);
}
#kv .txt_block a.common_btn::before {
right: calc(12 / 370 * 100cqi);
width: calc(8 / 370 * 100cqi);
}
#kv .txt_block .btn #fukidashi {
position: absolute;
top: -145%;
left: -3%;
width: calc(205 / 743 * 100cqi);
aspect-ratio: 205 / 203;
background: url(../img/kv_fukidashi.webp) center center no-repeat;
background-size: contain;
container-type: inline-size;
animation: 2.2s infinite katakata 3s;
}
body.states_closed #kv .txt_block .btn #fukidashi {
display: none;
}
@keyframes katakata {
0%,
5%,
10.5%,
15%,
20.5%,
to {
transform: translate3d(-2px, -2px, 0);
}
5.5%,
10%,
15.5%,
20% {
transform: translate3d(2px, 2px, 0);
}
}
#kv .txt_block .btn #fukidashi .fukidashi {
display: grid;
place-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-top: 2%;
padding-right: 4%;
color: var(--primary-color);
font-size: calc(15 / 205 * 100cqi);
font-family: 'Akshar', 'Noto sans JP', sans-serif;
font-weight: 700;
text-align: center;
pointer-events: none;
visibility: hidden;
}
/* ステータス:受付中 -> [デフォルト]を表示 */
body.states_open.remainingNull #kv .txt_block #fukidashi .fukidashi.default {
visibility: visible;
}
/* ステータス:受付中 かつ、 「あと○人」表示 */
body.states_open.remainingApplicants #kv .txt_block #fukidashi .fukidashi.limit_people {
visibility: visible;
}
/* ステータス:受付中 かつ、 「あと○日」表示 */
body.states_open.remainingDays #kv .txt_block #fukidashi .fukidashi.limit_day {
visibility: visible;
}
#kv .txt_block #fukidashi .fukidashi.default {
padding-top: 0;
padding-bottom: 2%;
}
#kv .txt_block #fukidashi .fukidashi .upper {
margin-bottom: 0.6em;
}
#kv .txt_block #fukidashi .fukidashi.limit_day .upper,
#kv .txt_block #fukidashi .fukidashi.limit_people .upper {
margin-bottom: 0.3em;
}
#kv .txt_block #fukidashi .fukidashi.default .main {
font-weight: 800;
font-size: calc(30 / 15 * 100%);
letter-spacing: calc(1em * 0.05);
}
#kv .txt_block #fukidashi .fukidashi .main span {
display: inline-block;
}
#kv .txt_block #fukidashi .fukidashi.default .main .max {
margin-left: 0.1em;
font-size: calc(32 / 30 * 100%);
transform: translateY(4%);
}
#kv .txt_block #fukidashi .fukidashi.limit_day .main .min1 {
margin-right: -0.15em;
font-size: calc(13 / 15 * 100%);
transform: translateY(-.2em);
}
#kv .txt_block #fukidashi .fukidashi.limit_day .main .min2 {
font-size: calc(20 / 15 * 100%);
}
#kv .txt_block #fukidashi .fukidashi.limit_day .main .max {
margin-left: 0.1em;
font-size: calc(23 / 15 * 100%);
transform: translateY(4%);
}
#kv .txt_block #fukidashi .fukidashi.limit_day .main .num {
font-size: calc(61 / 15 * 100%);
letter-spacing: calc(1em * -0.03);
transform: translateY(4%);
}
#kv .txt_block #fukidashi .fukidashi.limit_people .main .num {
font-size: calc(42 / 15 * 100%);
letter-spacing: calc(1em * -0.03);
transform: translateY(4%);
}
#kv .txt_block #fukidashi .fukidashi .main + .lower {
margin-top: 0.4em;
}
#kv .txt_block #fukidashi .fukidashi .lower .min {
font-size: calc(20 / 15 * 100%);
font-weight: 800;
}
#kv .txt_block #fukidashi .fukidashi.limit_people .lower .max {
margin-left: 0.1em;
font-size: calc(23 / 15 * 100%);
font-weight: 700;
transform: translateY(4%);
}
#kv .inner .img_block .img {
opacity: 0;
}
#kv.scrollin .inner .img_block .img {
animation: fadein_x 1.4s cubic-bezier(0.33, 1, 0.68, 1) both;
}
@media screen and (max-width: 767px) {
#kv .outer {
padding-block: min(15 / var(--base-width) * 100vw) min(40 / var(--base-width) * 100vw);
}
#kv .inner {
grid-template-columns: auto;
gap: 0;
width: auto;
}
#kv .txt_block .tags {
gap: calc(10 / var(--base-width) * 100cqi);
}
#kv .txt_block .tag {
padding-inline: 0.4em 0.035em;
font-size: calc(16 / var(--base-width) * 100cqi);
line-height: calc(28 / 16 * 1em);
}
#kv .txt_block .name {
margin-top: calc(20 / var(--base-width) * 100cqi);
}
#kv .txt_block .name p {
padding-inline: 0.6em 0.5em;
font-size: calc(18 / var(--base-width) * 100cqi);
}
#kv .txt_block .name p .en {
font-size: calc(22 / 18 * 100%);
}
#kv .txt_block .title {
margin-top: calc(16 / var(--base-width) * 100cqi);
}
#kv .txt_block .title .img {
width: calc(304 / var(--base-width) * 100cqi);
}
#kv .txt_block .title .img::before,
#kv .txt_block .title .img::after {
display: block !important;
left: 8%;
bottom: -3%;
height: 14%;
width: 0;
}
#kv .txt_block .title .img::after {
bottom: auto;
left: 0;
top: 20%;
height: 14%;
width: 0;
transform: none;
}
#kv.scrollin .txt_block .title .img::before {
width: 85%;
}
#kv.scrollin .txt_block .title .img::after {
width: 100%;
}
#kv .txt_block .title .btm_txt {
margin-top: calc(25 / var(--base-width) * 100cqi);
font-size: calc(29 / var(--base-width) * 100cqi);
}
#kv .img_block {
margin-top: calc(15 / var(--base-width) * 100cqi);
}
#kv .img_block .img {
width: calc(216 / var(--base-width) * 100cqi);
margin-inline: auto;
}
#kv.scrollin .inner .img_block .img {
animation: fadein_y 1.4s cubic-bezier(0.33, 1, 0.68, 1) both;
}
#kv .inner_block {
display: flex;
flex-direction: column;
}
#kv .txt_block .date {
order: 1;
margin-top: calc(25 / var(--base-width) * 100cqi);
font-size: calc(13 / var(--base-width) * 100cqi);
line-height: calc(16 / 13);
}
#kv .txt_block .date .ttl {
width: calc(40 / var(--base-width) * 100cqi);
padding-left: 0.10em;
letter-spacing: calc(1em * 0.1);
line-height: calc(16 / 13);
border-radius: 5px;
}
#kv .txt_block .date .year {
margin-inline: -0.3em;
}
#kv .txt_block .date .arrow {
margin-left: 1.0em;
margin-right: 0.2em;
}
#kv .txt_block .day {
width: calc(22 / var(--base-width) * 100cqi);
margin-top: 1.0em;
margin-left: 0.2em;
}
#kv .txt_block .btn {
order: 0;
margin-top: calc(20 / var(--base-width) * 100cqi);
margin-right: calc(25 / var(--base-width) * 100cqi);
text-align: right;
}
body.states_closed #kv .txt_block .btn {
margin-right: 0;
text-align: center;
}
#kv .txt_block .btn #fukidashi {
top: 50%;
left: 2%;
width: calc(123 / var(--base-width) * 100cqi);
aspect-ratio: 246 / 232;
background: url(../img/kv_fukidashi_sp.webp) center center no-repeat;
background-size: contain;
transform: translate3d(0, -50%, 0);
}
@keyframes katakata {
0%,
5%,
10.5%,
15%,
20.5%,
to {
transform: translate3d(-2px, -50%, 0);
}
5.5%,
10%,
15.5%,
20% {
transform: translate3d(2px, -50%, 0);
}
}
#kv .txt_block .btn #fukidashi .fukidashi {
padding-top: 0;
padding-right: 7%;
font-size: calc(10 / 123 * 100cqi);
}
#kv .txt_block #fukidashi .fukidashi.limit_day .upper {
line-height: calc(13 / 10);
}
#kv .txt_block .txt {
order: 2;
margin-top: calc(10 / var(--base-width) * 100cqi);
}
#kv .txt_block .txt p {
width: calc(310 / var(--base-width) * 100cqi);
margin-inline: auto;
margin-top: 0;
font-size: calc(13 / var(--base-width) * 100cqi);
line-height: calc(24 / 13);
text-align: justify;
}
#kv .txt_block a.common_btn {
max-width: inherit;
width: calc(220 / var(--base-width) * 100cqi);
aspect-ratio: 220 / 64;
font-size: calc(14 / var(--base-width) * 100cqi);
}
#kv .txt_block a.common_btn .min {
margin-top: 0.75em;
font-size: calc(13 / 14 *1em);
}
body.states_closed #kv .txt_block .fin_btn {
width: calc(320 / var(--base-width) * 100cqi);
aspect-ratio: 320 / 70;
font-size: calc(13 / var(--base-width) * 100cqi);
}
}
/* -------------------------------------------------
gallary
-------------------------------------------------- */
.gallary_block {
position: relative;
overflow: clip;
}
.gallary_block .slider {
width: 100vw;
}
.gallary_block .slider_wrap {
display: flex;
overflow: hidden;
}
.gallary_block .slider_wrap .slider_list {
display: flex;
}
.gallary_block .slider_wrap.slider_paused .slider_list {
animation-play-state: paused !important;
}
.gallary_block .slider_list > div {
width: calc(100vw / 4);
aspect-ratio: 390 / 260;
}
@keyframes infinity-scroll-left1 {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes infinity-scroll-left2 {
from {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
@media screen and (max-width: 991px) {
.gallary_block .slider_wrap .slider_list {
/* 1列目のみに、 animation-durationの -1/2s をanimation-delayに設定 */
animation: infinity-scroll-left1 160s -80s infinite linear;
}
.gallary_block .slider_wrap .slider_list:last-child {
animation: infinity-scroll-left2 160s 0s infinite linear;
}
}
@media screen and (max-width: 991px) {
.gallary_block .slider_list > div {
width: calc(100vw / 3);
}
}
@media screen and (max-width: 767px) {
.gallary_block .slider_list > div {
width: calc(100vw / 2);
}
}
/*-------------------------------------------------
main, common
--------------------------------------------------*/
#main {
position: relative;
overflow: clip;
}
.common_head_title {
margin-bottom: 1.5em;
color: var(--primary-color);
font-size: min(40 / var(--base-width) * 100vw, 40px);
font-weight: 800;
text-align: center;
letter-spacing: calc(1em * 0.05);
}
.common_head_title .en {
font-size: calc(44 / 40 * 100%);
font-family: 'Akshar', sans-serif;
font-weight: 600;
}
@media screen and (max-width: 767px) {
#main {
}
.common_head_title {
margin-bottom: 1.25em;
font-size: min(25 / var(--base-width) * 100vw, 25px);
line-height: 1.2;
}
}
/*-------------------------------------------------
a.common_btn,
apply_main_btn
--------------------------------------------------*/
:root {
--common-btn-width: 542;
}
@media screen and (max-width: 767px) {
:root {
--common-btn-width: 300;
}
}
a.common_btn {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: min(var(--common-btn-width) / var(--base-width) * 100vw, 542px);
aspect-ratio: var(--common-btn-width) / 120;
color: #fff;
font-size: min(32 / var(--base-width) * 100vw, 32px);
font-family: 'Akshar', 'Noto sans JP', sans-serif;
font-weight: 800;
text-decoration: none;
letter-spacing: calc(1em * 0.1);
background-color: var(--primary-color);
border-radius: 12px;
container-type: inline-size;
transition: background 0.1s ease-in-out;
overflow: hidden;
z-index: 1;
}
a.common_btn::before {
content: '';
position: absolute;
top: 50%;
right: calc(20 / var(--common-btn-width) * 100cqi);
width: calc(12 / var(--common-btn-width) * 100cqi);
aspect-ratio: 12 / 20;
background: url(../img/icon_common_btn.svg) center center no-repeat;
background-size: contain;
transform: translateY(-50%);
}
a.common_btn .en {
display: inline-block;
font-size: calc(35 / 32 * 1em);
transform: translateY(4%);
}
a.common_btn .min {
display: block;
margin-top: 1.0em;
font-size: calc(20 / 32 * 1em);
letter-spacing: calc(1em * 0.05);
}
.apply_main_btn {
position: relative;
}
body.states_closed .apply_main_btn,
body.states_closed .lp-seikoid-header .header-button a.common_btn {
display: none;
}
.apply_main_btn .outer {
position: relative;
}
.apply_main_btn .inner {
position: relative;
text-align: center;
}
.apply_main_btn a.common_btn {
}
@media (hover: hover) {
a.common_btn:not(.hover):hover {
background: var(--secondary-color);
transition: background 0.1s ease-in-out 0.1s;
}
}
a.common_btn.hover::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: var(--secondary-color);
clip-path: circle(0% at 50% 50%);
transition: clip-path 0.2s ease-in-out, opacity 0.2s ease-in-out;
transform: translate3d(-50%, -50%, 0);
opacity: 0;
z-index: -2;
}
@media (hover: hover) {
a.common_btn.hover:hover::after {
opacity: 1;
clip-path: circle(100.0% at 50% 50%);
transition: clip-path 0.2s ease-in-out 0.1s, opacity 0.2s ease-in-out 0.1s;
}
}
@media screen and (max-width: 767px) {
.apply_main_btn .outer {
}
a.common_btn {
width: calc(var(--common-btn-width) / var(--base-width) * 100vw);
max-width: 360px;
aspect-ratio: var(--common-btn-width) / 75;
font-size: min(20 / var(--base-width) * 100vw, 20px);
}
a.common_btn .en {
font-size: calc(22 / 20 * 1em);
}
a.common_btn .min {
margin-top: 0.6em;
font-size: calc(15 / 20 * 1em);
}
a.common_btn::before {
right: calc(10 / var(--common-btn-width) * 100cqi);
width: calc(8 / var(--common-btn-width) * 100cqi);
}
}
/*-------------------------------------------------
about_quoCardPay
--------------------------------------------------*/
#about_quoCardPay {
position: relative;
padding-inline: 50px;
padding-block: min(100 / var(--base-width) * 100vw, 100px);
}
#about_quoCardPay + .apply_main_btn {
padding-bottom: min(120 / var(--base-width) * 100vw, 120px);
}
#about_quoCardPay .common_head_title {
margin-bottom: 2em;
font-size: min(46 / var(--base-width) * 100vw, 46px);
}
#about_quoCardPay .common_head_title .en {
font-size: calc(50 / 46 * 100%);
}
#about_quoCardPay .common_head_title .min {
display: inline-block;
margin-left: 0.2em;
font-size: calc(40 / 46 * 100%);
}
#about_quoCardPay .outer {
position: relative;
width: 100%;
height: 100%;
}
#about_quoCardPay .inner {
position: relative;
display: grid;
grid-template-columns: 1fr 0.466fr 1fr;
grid-gap: min(70 / var(--base-width)* 100vw, 70px);
width: var(--content-width);
height: 100%;
margin-inline: auto;
}
#about_quoCardPay .sub_title {
position: relative;
display: inline-block;
margin-bottom: 1.25em;
color: var(--primary-color);
font-size: min(18 / var(--base-width)* 100vw, 18px);
font-weight: bold;
line-height: 1.6;
letter-spacing: calc(1em * 0.05);
background: linear-gradient(transparent 90%, var(--primary-color) 100%);
}
#about_quoCardPay .sub_title .en {
font-size: calc(20 / 18 * 100%);
font-weight: 600;
font-family: 'Akshar', sans-serif;
}
#about_quoCardPay .inner .txt_block p {
font-size: min(16 / var(--base-width)* 100vw, 16px);
text-align: justify;
line-height: calc(28 / 16);
letter-spacing: calc(1em * 0.03);
}
#about_quoCardPay .inner .txt_block p .color {
color: var(--primary-color);
font-weight: 600;
}
#about_quoCardPay .inner .txt_block p.indent {
display: flex;
font-size: min(13 / var(--base-width)* 100vw, 13px);
line-height: calc(23 / 13);
}
#about_quoCardPay .inner .txt_block p.indent::before {
content: '※';
display: flex;
font-size: min(13 / var(--base-width)* 100vw, 13px);
line-height: calc(23 / 13);
}
#about_quoCardPay .inner .txt_block .btn {
margin-top: min(40 / var(--base-width)* 100vw, 40px);
}
#about_quoCardPay .inner .txt_block .btn a.common_btn {
width: min(240 / var(--base-width)* 100vw, 240px);
aspect-ratio: 230 / 42;
font-size: min(15 / var(--base-width) * 100vw, 15px);
border-radius: 10px;
letter-spacing: 0;
}
#about_quoCardPay .inner .txt_block .btn a.common_btn::before {
right: calc(10 / 230 * 100cqi);
width: calc(8 / 230 * 100cqi);
}
#about_quoCardPay .inner .img_block {
}
@media screen and (max-width: 767px) {
#about_quoCardPay {
padding-inline: 0;
padding-block: min(70 / var(--base-width) * 100vw, 70px) min(50 / var(--base-width) * 100vw, 50px);
}
#about_quoCardPay + .apply_main_btn {
padding-bottom: min(70 / var(--base-width) * 100vw, 70px);
}
#about_quoCardPay .inner {
grid-template-columns: auto;
grid-gap: min(50 / var(--base-width)* 100vw, 50px);
}
#about_quoCardPay .txt_block {
transform : translate3d(0, 20px, 0) !important;
}
#about_quoCardPay .txt_block.scrollin {
transform : translate3d(0, 0, 0) !important;
}
#about_quoCardPay .inner .img_block {
grid-row: 1 / 2;
}
#about_quoCardPay .inner .img_block .img {
width: min(133 / var(--base-width)* 100vw, 133px);
margin-inline: auto;
}
#about_quoCardPay .common_head_title {
margin-bottom: 1.6em;
font-size: min(30 / var(--base-width) * 100vw, 30px);
}
#about_quoCardPay .common_head_title .en {
font-size: calc(33 / 30 * 100%);
}
#about_quoCardPay .common_head_title .min {
font-size: calc(25 / 30 * 100%);
}
#about_quoCardPay .sub_title {
display: block;
margin-bottom: 0.8em;
font-size: min(16 / var(--base-width)* 100vw, 16px);
line-height: 1.8;
}
#about_quoCardPay .sub_title .en {
font-size: calc(20 / 18 * 100%);
font-weight: 600;
font-family: 'Akshar', sans-serif;
}
#about_quoCardPay .inner .txt_block p {
font-size: min(13 / var(--base-width)* 100vw, 13px);
line-height: calc(23 / 13);
}
#about_quoCardPay .inner .txt_block p.indent {
font-size: min(11 / var(--base-width)* 100vw, 11px);
line-height: calc(21 / 11);
}
#about_quoCardPay .inner .txt_block .btn {
margin-top: min(30 / var(--base-width)* 100vw, 30px);
text-align: center;
}
}
/*-------------------------------------------------
application
--------------------------------------------------*/
#application {
position: relative;
padding-block: min(100 / var(--base-width) * 100vw, 100px);
padding-inline: 50px;
}
#application .outer {
position: relative;
width: 100%;
height: 100%;
}
#application .inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1.085fr;
grid-gap: min(48 / var(--base-width) * 100vw, 48px);
width: var(--content-width);
height: 100%;
margin-inline: auto;
padding: min(50 / var(--base-width) * 100vw, 50px);
background: #fff;
border-radius: 10px;
box-shadow: 0px 2px 7px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
}
#application .sub_title {
position: relative;
margin-bottom: 1.5em;
color: var(--primary-color);
font-size: min(18 / var(--base-width) * 100vw, 18px);
font-weight: bold;
text-align: center;
}
#application .sub_title .txt {
position: relative;
padding-inline: 1.0em 0.75em;
}
#application .sub_title .txt::before,
#application .sub_title .txt::after {
content: '';
position: absolute;
top: 10%;
left: 0;
width: 2px;
height: 90%;
background: var(--primary-color);
transform: rotate(-30deg);
}
#application .sub_title .txt::after {
left: auto;
right: 0;
transform: rotate(30deg);
}
#application .txt_inner {
position: relative;
margin-bottom: 1.5em;
font-size: min(16 / var(--base-width) * 100vw, 16px);
font-weight: 600;
line-height: calc(28 / 16);
letter-spacing: calc(1em * 0.03)
}
#application .txt_inner .line {
position: relative;
display: inline-block;
color: var(--primary-color);
background: linear-gradient(transparent 90%, var(--primary-color) 100%);
}
/*
#application .txt_inner .line::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: var(--primary-color);
}
*/
#application .note {
font-size: min(13 / var(--base-width) * 100vw, 13px);
line-height: calc(23 / 13);
letter-spacing: calc(1em * 0.03)
}
#application .note p.indent {
display: flex;
}
#application .note p.indent::before {
content: '*';
}
#application .img {
position: relative;
container-type: inline-size;
}
#application .img .popup {
position: absolute;
top: 25%;
left: 0;
width: calc(75 / 543 * 100cqi);
transform: translate3d(-50%,0,0);
}
#application .img .popup img {
/*
animation: fuwafuwa 2s infinite;
*/
animation: scaleChange 2s infinite ease-out;
}
/*
@keyframes fuwafuwa {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10%);
}
100% {
transform: translateY(0px);
}
}
*/
@keyframes scaleChange {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.1, 1.1); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}
#application .border_block {
position: absolute;
top: 43%;
left: 5.2%;
width: calc(310 / 543 * 100cqi);
aspect-ratio: 310 / 28;
}
#application .border_block span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#application .border_block::before,
#application .border_block::after,
#application .border_block span::before,
#application .border_block span::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(to right, #008CD7, #008CD7 8px, transparent 8px);
background-size: 11px 2px;
background-position: left top;
background-repeat: repeat-x;
opacity: 0;
}
#application .border_block::before {
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
#application .img.scrollin .border_block::before {
animation: borderDrawX1 3s infinite 0s;
}
#application .border_block::after {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
background-position: left bottom;
}
#application .img.scrollin .border_block::after {
animation: borderDrawX2 3s infinite 0s;
}
#application .border_block span::before,
#application .border_block span::after {
background-image: linear-gradient(to bottom, #008CD7, #008CD7 6px, transparent 6px);
background-size: 2px 9px;
background-position: right center;
background-repeat: repeat-y;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
#application .img.scrollin .border_block span::before {
animation: borderDrawY1 3s infinite 0s;
}
#application .border_block span::after {
background-position: left center;
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
#application .img.scrollin .border_block span::after {
animation: borderDrawY2 3s infinite 0s;
}
@keyframes borderDrawX1 {
0% {
opacity: 0;
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
5% {
opacity: 1;
}
10% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes borderDrawX2 {
0% {
opacity: 0;
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
5% {
opacity: 1;
}
20% {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
30% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes borderDrawY1 {
0% {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
5% {
opacity: 1;
}
10% {
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
20% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@keyframes borderDrawY2 {
0% {
opacity: 0;
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
5% {
opacity: 1;
}
30% {
clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}
40% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
70% {
opacity: 1;
}
100% {
opacity: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
}
@media screen and (max-width: 767px) {
#application {
padding-inline: 0;
padding-block: calc(50 / var(--base-width) * 100vw);
}
#application .inner {
grid-template-columns: auto;
grid-gap: min(25 / var(--base-width)* 100vw, 25px);
padding: min(30 / var(--base-width)* 100vw, 30px) min(27 / var(--base-width)* 100vw, 27px);
}
#application .sub_title {
font-size: min(16 / var(--base-width) * 100vw, 16px);
}
#application .txt_inner {
font-size: min(13 / var(--base-width) * 100vw, 13px);
line-height: calc(23 / 13);
letter-spacing: calc(1em * 0.03)
}
#application .note {
font-size: min(11 / var(--base-width) * 100vw, 11px);
line-height: calc(21 / 11);
}
#application .img .popup {
position: absolute;
top: 20%;
left: 60%;
width: calc(50 / 271 * 100cqi);
transform: none;
}
#application .border_block::before,
#application .border_block::after {
background-image: linear-gradient(to right, #008CD7, #008CD7 4px, transparent 4px);
background-size: 6px 1px;
}
#application .border_block span::before,
#application .border_block span::after {
background-image: linear-gradient(to bottom, #008CD7, #008CD7 3px, transparent 3px);
background-size: 1px 5px;
}
}
/*-------------------------------------------------
outline
--------------------------------------------------*/
#outline {
position: relative;
padding-block: min(120 / var(--base-width) * 100vw, 120px) min(100 / var(--base-width) * 100vw, 100px);
padding-inline: 50px;
}
#outline .outer {
position: relative;
width: 100%;
height: 100%;
}
#outline .inner {
position: relative;
width: var(--content-width);
height: 100%;
margin-inline: auto;
padding: min(50 / var(--base-width) * 100vw, 50px);
padding-bottom: min(30 / var(--base-width) * 100vw, 30px);
background: #fff;
border-radius: 10px;
box-shadow: 0px 2px 7px 0 rgba(0, 0, 0, 0.25);
overflow: hidden;
}
#outline .inner::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 0;
opacity: 0;
background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
pointer-events: none;
transition: height .2s ease-out, opacity .2s ease-out;
}
#outline .inner.shadow::after {
opacity: 1;
height: 45%;
}
#outline .inner .wrapper {
height: 400px;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
#outline .inner .wrapper.auto {
height: auto;
padding-bottom: min(50 / var(--base-width) * 100vw, 50px);
}
#outline .inner .wrapper::-webkit-scrollbar {
display:none;
}
#outline .wrapper .btn,
#outline .wrapper .close_btn {
position: absolute;
bottom: min(30 / var(--base-width) * 100vw, 30px);
left: 50%;
z-index: 2;
width: min(154 / var(--base-width) * 100vw, 154px);
background: var(--primary-color);
color: #fff;
font-size: min(17 / var(--base-width) * 100vw, 17px);
font-weight: bold;
text-align: center;
border-radius: 10px;
line-height: calc(42 / 17 * 1em);
letter-spacing: calc(1em * 0.05);
z-index: 2;
transform: translateX(-50%);
cursor: pointer;
}
#outline .wrapper .close_btn {
width: min(105 / var(--base-width) * 100vw, 105px);
display: none;
}
@media (hover: hover) {
#outline .wrapper .btn:hover,
#outline .wrapper .close_btn:hover {
background: var(--secondary-color);
transition: background 0.1s ease-in-out 0.1s;
}
}
#outline .inner .txt_block {
margin-bottom: 2em;
font-size: min(15 / var(--base-width) * 100vw, 15px);
line-height: calc(25 / 15);
}
#outline .inner .outline_title {
margin-bottom: 0.4em;
font-weight: bold;
line-height: 1;
}
#outline .inner .txt_block ul {
}
#outline .inner .txt_block li {
display: flex;
}
#outline .inner .txt_block li::before {
content: '・';
}
#outline .inner .txt_block p {
}
#outline .inner .txt_block p.indent {
display: flex;
}
#outline .inner .txt_block p.indent::before {
content: '※';
}
@media screen and (max-width: 767px) {
#outline {
padding-inline: 0;
padding-block: calc(70 / var(--base-width) * 100vw) calc(50 / var(--base-width) * 100vw);
}
#outline .inner {
padding: min(30 / var(--base-width)* 100vw, 30px) min(27 / var(--base-width)* 100vw, 27px);
padding-bottom: min(40 / var(--base-width)* 100vw, 40px);
}
#outline .inner .wrapper.auto {
padding-bottom: min(40 / var(--base-width)* 100vw, 40px);
}
#outline .inner .txt_block {
margin-bottom: 2em;
font-size: min(13 / var(--base-width) * 100vw, 13px);
line-height: calc(23 / 13);
}
#outline .wrapper .btn,
#outline .wrapper .close_btn {
width: min(140 / var(--base-width) * 100vw, 140px);
font-size: min(15 / var(--base-width) * 100vw, 15px);
line-height: calc(40 / 15);
}
#outline .wrapper .close_btn {
width: min(94 / var(--base-width) * 100vw, 94px);
}
}
/*-------------------------------------------------
about_seikoId
--------------------------------------------------*/
#about_seikoId {
position: relative;
padding-block: min(100 / var(--base-width) * 100vw, 100px) min(120 / var(--base-width) * 100vw, 120px);
padding-inline: 50px;
background: #fff;
}
#about_seikoId .apply_main_btn {
padding-top: min(100 / var(--base-width) * 100vw, 100px);
}
#about_seikoId .common_head_title {
color: var(--primary-txt-color);
letter-spacing: calc(1em * 0.1);
}
#about_seikoId > .outer {
position: relative;
width: 100%;
height: 100%;
}
#about_seikoId > .outer > .inner {
position: relative;
width: var(--content-width);
height: 100%;
margin-inline: auto;
}
#about_seikoId .intro {
margin-bottom: min(100 / var(--base-width) * 100vw, 100px);
}
#about_seikoId .intro .common_head_title {
margin-bottom: 2em;
font-size: min(48 / var(--base-width)* 100vw, 48px);
letter-spacing: 0;
}
#about_seikoId .intro .common_head_title .en {
font-family: 'Akshar', sans-serif;
font-size: calc(55 / 48 * 1em);
font-weight: 600;
}
#about_seikoId .img_block {
width: min(981 / var(--base-width) * 100vw, 981px);
margin-inline: auto;
margin-bottom: min(80 / var(--base-width) * 100vw, 80px);
}
#about_seikoId .txt_block p {
font-size: min(16 / var(--base-width) * 100vw, 16px);
line-height: calc(28 / 16);
letter-spacing: calc(1em * 0.03);
text-align: center;
}
#about_seikoId .functions_block {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: min(26 / var(--base-width) * 100vw, 26px);
}
#about_seikoId .functions_block .inner {
width: var(--content-width);
height: 100%;
margin-inline: auto;
}
#about_seikoId .lp-seikoid-functions .inner {
width: var(--content-width);
margin-inline: auto;
}
:root {
--functions-box-width: 320;
}
@media screen and (max-width: 767px) {
:root {
--functions-box-width: 275;
}
}
#about_seikoId .functions_box {
position: relative;
padding: min(30 / var(--base-width) * 100vw, 30px);
background: var(--primary-bg-color);
border-radius: 15px;
container-type: inline-size;
}
#about_seikoId .functions_box.f2 {
transition-delay: .2s;
}
#about_seikoId .functions_box.f3 {
transition-delay: .4s;
}
#about_seikoId .functions_box .icon {
display: grid;
place-content: center;
margin-bottom: calc(30 / var(--functions-box-width) * 100cqi);
height: calc(46 / var(--functions-box-width) * 100cqi);
}
#about_seikoId .functions_box .icon img {
width: calc(50 / var(--functions-box-width) * 100cqi);
}
#about_seikoId .functions_box.f3 .icon img {
width: calc(46 / var(--functions-box-width) * 100cqi);
}
#about_seikoId .title_block {
margin-bottom: calc(30 / var(--functions-box-width) * 100cqi);
color: var(--primary-color);
font-size: calc(25 / var(--functions-box-width) * 100cqi);
text-align: center;
letter-spacing: calc(1em * 0.05);
}
#about_seikoId .title_block .title {
font-weight: bold;
}
#about_seikoId .title_block .lead {
margin-bottom: 1.0em;
color: var(--secondary-color);
font-weight: 600;
font-size: calc(18 / 25 * 100%);
}
#about_seikoId .txt {
font-size: calc(16 / var(--functions-box-width) * 100cqi);
line-height: calc(28 / 16);
letter-spacing: calc(1em * 0.03);
text-align: justify;
}
@media screen and (max-width: 767px) {
#about_seikoId {
padding-inline: 0;
padding-block: calc(50 / var(--base-width) * 100vw) calc(70 / var(--base-width) * 100vw);
}
#about_seikoId .apply_main_btn {
padding-top: calc(50 / var(--base-width) * 100vw);
}
#about_seikoId .inner {
width: 100%;
}
#about_seikoId .intro {
margin-bottom: calc(70 / var(--base-width) * 100vw);
}
#about_seikoId .intro .common_head_title {
font-size: min(25 / var(--base-width) * 100vw, 25px);
}
#about_seikoId .intro .common_head_title .en {
font-size: calc(30 / 25 * 1em);
}
#about_seikoId .img_block {
width: 100%;
margin-bottom: calc(50 / var(--base-width) * 100vw);
}
#about_seikoId .txt_block p {
font-size: min((13 / var(--base-width) * 100vw), 18px);
line-height: calc(23 / 13);
}
#about_seikoId .lp-seikoid-functions .inner {
width: var(--content-width);
max-width: 400px;
}
#about_seikoId .functions_block {
grid-template-columns: auto;
gap: min(30 / var(--base-width) * 100vw, 30px);
}
#about_seikoId .functions_box {
padding: min(25 / var(--base-width) * 100vw, 25px);
transition-delay: 0s !important;
}
#about_seikoId .title_block {
font-size: calc(20 / var(--functions-box-width) * 100cqi);
}
#about_seikoId .title_block .lead {
font-size: calc(16 / 20 * 100%);
}
#about_seikoId .txt {
font-size: calc(13 / var(--functions-box-width) * 100cqi);
line-height: calc(23 / 13);
}
}
/*-------------------------------------------------
footer
--------------------------------------------------*/
.lp-seikoid-footer {
display: flex;
height: 150px;
padding: 0 40px;
justify-content: space-between;
align-items: center;
background-color: #000;
line-height: 1;
}
.lp-seikoid-footer .footer-main {
display: flex;
align-items: center;
gap: 20px;
}
.lp-seikoid-footer .footer-copy {
font-size: 12px;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
letter-spacing: 0.05em;
}
.lp-seikoid-footer .footer-logo {
width: 120px;
}
.lp-seikoid-footer .footer-logo img {
width: 100%;
}
.lp-seikoid-footer .footer-sns a {
display: block;
position: relative;
width: 50px;
height: 50px;
background-color: #363333;
border-radius: 50%;
text-align: center;
transition: 0.2s;
}
.lp-seikoid-footer .footer-sns a:hover {
opacity: 0.7;
}
.lp-seikoid-footer .footer-sns img {
width: 50px;
height: auto;
display: block;
}
@media screen and (max-width: 767px) {
.lp-seikoid-footer {
height: auto;
padding: 20px 15px;
font-size: 8px;
}
.lp-seikoid-footer .footer-main {
gap: 15px;
}
.lp-seikoid-footer .footer-logo {
width: 75px;
}
.lp-seikoid-footer .footer-sns a {
width: 40px;
height: 40px;
}
.lp-seikoid-footer .footer-sns img {
width: 40px;
}
.lp-seikoid-footer .footer-copy {
font-size: 10px;
}
}