@charset "UTF-8";
@charset "UTF-8";

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center}
      :root {
--min1600: 1600px;
--max1599: 1599px;
--min1281: 1281px;
--max1280: 1280px;
--min1024: 1024px;
--max1023: 1023px;
--min960: 960px;
--max959: 959px;
--min780: 780px;
--max779: 779px;
--min561: 561px;
--max560: 560px;
--min481: 481px;
--max480: 480px;
--min375: 375px;
--max374: 374px;
}  .box {
max-width: 1600px;
margin: 0 auto;
}      .head01 {
margin-bottom: 60px;
}
@media only screen and (max-width: 560px) {
.head01 {
margin-bottom: 40px;
}
}
.head01 .ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
color: #0059b3;
}
@media only screen and (max-width: 560px) {
.head01 .ttl {
display: block;
}
}
.head01 .ttl h1,
.head01 .ttl h2,
.head01 .ttl h3 {
font-size: clamp(2rem, 1.587rem + 1.18vw, 3rem);
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}
.head01 .ttl p {
font-family: "Zen Old Mincho", serif;
font-style: italic;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
@media only screen and (max-width: 560px) {
.head01 .ttl p {
font-size: 1.2rem;
font-style: normal;
}
}
.head01.l h1,
.head01.l h2,
.head01.l h3 {
font-size: clamp(2.4rem, 1.946rem + 1.3vw, 3.5rem);
}
.head01.col .ttl {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 0;
}
.head01.col .ttl h1,
.head01.col .ttl h2,
.head01.col .ttl h3 {
margin-bottom: 5px;
}
.head01.ctr .ttl {
display: block;
text-align: center;
}
.head01.w .ttl {
color: #fff;
}
.head01.b .ttl {
color: #090909;
}
.head02 {
margin-bottom: 60px;
}
.head02 .ttl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 15px;
color: #0059b3;
}
@media only screen and (max-width: 560px) {
.head02 .ttl {
display: block;
}
}
.head02 .ttl h1,
.head02 .ttl h2,
.head02 .ttl h3 {
font-size: clamp(2.813rem, 2.475rem + 0.911vw, 4.5rem);
font-family: "Zen Old Mincho", serif;
font-weight: 400;
font-style: normal;
}
.head02 .ttl p {
font-family: "Zen Old Mincho", serif;
font-weight: 500;
margin-bottom: 4px;
text-transform: uppercase;
}
.head02.col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
}
.head02.col h1,
.head02.col h2,
.head02.col h3 {
margin-bottom: 5px;
}
.head02.ctr .ttl {
text-align: center;
}
.head02.w .ttl .en,
.head02.w .ttl h1,
.head02.w .ttl h2,
.head02.w .ttl h3 {
color: #fff;
}
.rchead {
margin-bottom: 60px;
}
.rchead .ttl {
text-align: center;
}
.rchead .ttl h1,
.rchead .ttl h2,
.rchead .ttl h3 {
font-size: clamp(1.438rem, 0.925rem + 2.56vw, 4rem);
color: #0059b3;
font-weight: 700;
margin-bottom: 5px;
}
.rchead .ttl p {
font-family: "Open Sans", serif;
font-size: 1.8rem;
line-height: 1;
letter-spacing: 0.12em;
font-weight: 700;
}
.rchead.l .ttl h1,
.rchead.l .ttl h2,
.rchead.l .ttl h3 {
font-size: clamp(1.438rem, 0.25rem + 5.94vw, 5rem);
}
.rchead.l .ttl p {
font-size: 2rem;
}
.rchead.w .ttl p,
.rchead.w .ttl h1,
.rchead.w .ttl h2,
.rchead.w .ttl h3 {
color: #fff;
}
.flexhead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-bottom: 55px;
padding: 0 0 0 10px;
}
.flexhead .btn00,
.flexhead .btn03,
.flexhead .btn04 {
margin-left: auto;
}
.flexhead.left .btn00,
.flexhead.left .btn03,
.flexhead.left .btn04 {
margin-left: 55px;
}
.linehead01 {
margin-bottom: 35px;
padding-bottom: 20px;
position: relative;
font-family: "Zen Old Mincho", serif;
font-weight: 500;
}
.linehead01::after {
content: "";
position: absolute;
bottom: 0;
left: -30%;
width: 150%;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 960px) {
.linehead01::after {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100vw;
}
}
.linehead01.rvs::after {
left: -20%;
}
@media only screen and (max-width: 960px) {
.linehead01.rvs::after {
left: 50%;
}
}    .grecaptcha-badge {
display: none !important;
}  :root {
--easing: cubic-bezier(0.22, 0.61, 0.36, 1);
--textcolor_b: #090909;
--textcolor_w: #dddddd;
--textcolor_w_sp: #c2c2c2;
}
:root {
--radius: 0.5rem;
}
:root {
--font-family_type1:
'游ゴシック体', 'Yu Gothic', YuGothic, 'Hiragino Kaku Gothic Pro',
'ヒラギノ角ゴ Pro W3', 'ヒラギノ角ゴ Pro', 'メイリオ', 'Meiryo', メイリオ,
Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'Helvetica', 'Verdana', sans-serif;
--font-family_type2: 'Shippori Mincho B1', serif;
--font-family_type3:
Times New Roman, 'Times New Roman', Times, 'Times', serif;
--font-family_type4:
Verdana, 'Helvetica Neue', Helvetica, Arial, Roboto, Avenir, 'Open Sans',
sans-serif;
}
:root {
--line: solid 1px rgba(0, 0, 0, 0.1);
--line2: solid 1px rgba(0, 0, 0, 0.15);
--line3: solid 1px rgba(0, 0, 0, 0.2);
--line-gray: solid 1px #cccccc;
--line-white: solid 1px rgba(255, 255, 255, 0.4);
--line-bold: solid 4px rgba(0, 0, 0, 0.1);
}  *,
*::before,
*::after {
border-style: solid;
border-width: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
-webkit-tap-highlight-color: transparent;
}
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
line-height: 1.15;
}
html {
font-size: 62.5%;
}
body {
width: 100%;
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-size: 1rem;
color: var(--textcolor_b);
letter-spacing: 0.1em;
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";
overscroll-behavior-y: none;
image-rendering: -webkit-optimize-contrast;
}
a,
a:visited,
a:focus,
a:link,
a:active {
color: var(--textcolor_b);
}
body.ua-android {
font-family: "Noto Sans JP", sans-serif;
}
.ua-safari-7 body,
.ua-safari-8 body,
.ua-safari-9 body,
.ua-safari-10 body {
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
}
@media screen and (max-width: 779px) {
body {
width: 100% !important;
height: 100%;
overflow-x: hidden !important;
}
}
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
picture,
footer,
header,
hgroup,
menu,
nav,
section,
main {
display: block;
}
audio,
canvas,
progress,
video {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: baseline;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
template {
display: none;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: normal;
line-height: 100%;
margin: 0px;
padding: 0px;
}
b,
strong {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
object {
pointer-events: none;
}
picture,
img {
max-width: 100%;
height: auto;
border: none;
vertical-align: bottom;
}
audio:not([controls]) {
display: none;
height: 0;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
svg {
fill: currentColor;
vertical-align: bottom;
}
svg:not(:root) {
overflow: hidden;
}
a {
-webkit-transition: all 30ms cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 30ms cubic-bezier(0.165, 0.84, 0.44, 1);
text-decoration: none;
}
a:hover {
text-decoration: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
a:hover img {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
a:focus {
outline: none;
}
a * {
cursor: pointer;
}
a[href^="tel:"] {
pointer-events: none;
text-decoration: none;
}
@media screen and (max-width: 779px) {
a[href^="tel:"] {
pointer-events: inherit;
text-decoration: underline;
}
}
input[type=email],
input[type=number],
input[type=tel],
input[type=text],
textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-appearance: none;
}
input[type=checkbox]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
label:focus,
select:focus,
textarea:focus {
outline: 0;
}
select {
font-family: inherit;
}
::-moz-placeholder {
color: #cccccc;
}
:-moz-placeholder {
color: #cccccc;
}
:-moz-placeholder-shown,
:-ms-input-placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::-ms-input-placeholder,
::placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
::-webkit-input-placeholder,
:placeholder-shown {
color: #cccccc;
}
iframe {
width: 100%;
}
input[type=checkbox]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=text]:focus,
label:focus,
textarea:focus {
outline: 0;
}
ruby {
display: inline-table;
border: none;
white-space: nowrap;
vertical-align: text-bottom;
text-align: center;
line-height: 100%;
}
ruby rt {
display: table-header-group;
font-size: 50%;
text-align: center;
line-height: 100%;
}
ruby ruby rt {
display: table-footer-group;
font-size: 50%;
line-height: 100%;
}
ruby rp {
display: none;
}  h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.78;
letter-spacing: 0.04em;
}
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
font-size: clamp(0.95rem, 0.75rem + 0.625vw, 1.45rem);
letter-spacing: 0.1em;
line-height: 1.89;
}
@media screen and (max-width: 480px) {
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
line-height: 1.98;
}
}
@media screen and (min-width: 1921px) {
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
font-size: 1.7rem;
}
}
@media screen and (max-width: 1920px) {
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
font-size: 1.6rem;
}
}
@media screen and (max-width: 1023px) and (min-width: 561px) {
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
font-size: 1.4rem;
}
}
@media screen and (max-width: 560px) {
p,
a,
li,
dt,
dd,
small,
address,
th,
td {
font-size: 1.4rem;
letter-spacing: 0.07em;
}
}  :root { --h1-l: clamp(3.2rem, 2.2rem + 2.6vw, 6rem);
--h1: clamp(2.6rem, 1.8rem + 2.1vw, 4.8rem);
--h2: clamp(2.2rem, 1.6rem + 1.6vw, 4rem);
--h3: clamp(2rem, 1.6rem + 1.1vw, 3.2rem);
--h4: clamp(1.8rem, 1.5rem + 0.8vw, 2.6rem);
--h5: clamp(1.6rem, 1.45rem + 0.4vw, 2rem);
--h6: clamp(1.4rem, 1.3rem + 0.3vw, 1.8rem);
}
h1 {
font-size: var(--h1);
}
h2 {
font-size: var(--h2);
}
h3 {
font-size: var(--h3);
}
h4 {
font-size: var(--h4);
}
h5 {
font-size: var(--h5);
}
h6 {
font-size: var(--h6);
}  .cap,
caption {
font-size: 0.85em;
}
nav {
font-size: 0.85em;
}  .en {
font-family: "Roboto", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "wdth" 100;
line-height: 1;
letter-spacing: 0.04em;
}
.l-content-intro {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
-webkit-transition: opacity 2.8s 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: opacity 2.8s 0.2s cubic-bezier(0.19, 1, 0.22, 1), -webkit-filter 8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: opacity 2.8s 0.2s cubic-bezier(0.19, 1, 0.22, 1), filter 8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
transition: opacity 2.8s 0.2s cubic-bezier(0.19, 1, 0.22, 1), filter 8s cubic-bezier(0.19, 1, 0.22, 1) 0s, -webkit-filter 8s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.l-content-intro.is-disabled {
display: none;
}
.l-content-intro__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
-webkit-animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards, move-up 2.2s 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards, move-up 2.2s 0.8s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@media only screen and (max-width: 560px) {
.l-content-intro__inner {
width: 60%;
}
}
.l-content-intro__logo {
display: block;
text-align: center;
}
@media only screen and (max-width: 560px) {
.l-content-intro__logo {
width: 80%;
}
}
.l-content-intro__text {
margin-inline: auto;
clip-path: inset(0 100% 0 0);
font-weight: 700;
color: #000;
letter-spacing: 0.12em;
opacity: 0;
-webkit-animation: fade-in 2.1s 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards, clippath 2s 1.8s cubic-bezier(0.16, 1, 0.55, 0.98) forwards;
animation: fade-in 2.1s 1.8s cubic-bezier(0.19, 1, 0.22, 1) forwards, clippath 2s 1.8s cubic-bezier(0.16, 1, 0.55, 0.98) forwards;
font-size: 20px;
margin-top: 17px;
}
@-webkit-keyframes move-up {
to {
opacity: 1;
-webkit-transform: translateY(-0.4166666667vw);
transform: translateY(-0.4166666667vw);
}
}
@keyframes move-up {
to {
opacity: 1;
-webkit-transform: translateY(-0.4166666667vw);
transform: translateY(-0.4166666667vw);
}
}
@-webkit-keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@-webkit-keyframes clippath {
to {
clip-path: inset(0 0 0 0);
}
}
@keyframes clippath {
to {
clip-path: inset(0 0 0 0);
}
}
@-webkit-keyframes filter {
to {
-webkit-filter: blur(0);
filter: blur(0);
}
}
@keyframes filter {
to {
-webkit-filter: blur(0);
filter: blur(0);
}
}  body {
-webkit-animation: loading-in 800ms ease 0s 1 forwards;
animation: loading-in 800ms ease 0s 1 forwards;
}
@-webkit-keyframes loading-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes loading-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
body #js-kv-ttl {
-webkit-filter: blur(4px);
filter: blur(4px);
opacity: 0;
}
body header .allmenu.home {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-transition: cubic-bezier(0.19, 1, 0.22, 1);
transition: cubic-bezier(0.19, 1, 0.22, 1);
-webkit-transition-duration: 1.2s;
transition-duration: 1.2s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
-webkit-transition-delay: 650ms;
transition-delay: 650ms;
will-change: transform, opacity;
}
body.is-load #js-kv-ttl {
-webkit-animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes filter {
to {
-webkit-filter: blur(0);
filter: blur(0);
}
}
body.is-load header .allmenu.home {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
body .subherottl,
body .subchildttl,
body .recruitttl,
body .subrecruitttl {
opacity: 0;
-webkit-filter: blur(4px);
filter: blur(4px);
-webkit-animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
animation: fade-in 2s cubic-bezier(0.19, 1, 0.22, 1) forwards, filter 2.4s cubic-bezier(0.19, 1, 0.22, 1) forwards;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@keyframes fade-in {
to {
opacity: 1;
}
}
@keyframes filter {
to {
-webkit-filter: blur(0);
filter: blur(0);
}
}
body header .allmenu.sub {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
-webkit-animation: headermenu-in 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1 forwards;
animation: headermenu-in 1.2s cubic-bezier(0.19, 1, 0.22, 1) 1 forwards;
-webkit-animation-delay: 650ms;
animation-delay: 650ms;
}
@-webkit-keyframes headermenu-in {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes headermenu-in {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
body .fixedentry {
opacity: 0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-animation: fixedentryIn 800ms cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
animation: fixedentryIn 800ms cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
-webkit-animation-delay: 950ms;
animation-delay: 950ms;
}
@-webkit-keyframes fixedentryIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes fixedentryIn {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.pp_cont {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.pp_cont {
width: 84%;
max-width: 640px;
}
}
.pp_cont {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.pp_cont {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.pp_cont {
margin-bottom: 80px;
}
}
@media only screen and (max-width: 560px) {
.pp_cont {
display: block;
width: 84%;
max-width: 1200px;
margin: 0 auto;
margin-bottom: 180px;
}
}
@media only screen and (max-width: 560px) and (min-width: 1921px) {
.pp_cont {
max-width: 1400px;
}
}
@media only screen and (max-width: 560px) and (max-width: 960px) {
.pp_cont {
max-width: 640px;
}
}
@media only screen and (max-width: 560px) and (max-width: 960px) {
.pp_cont {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) and (max-width: 560px) {
.pp_cont {
margin-bottom: 80px;
}
}
.pp_cont h3 {
font-size: var(--h5);
margin-top: 35px;
margin-bottom: 17px;
padding-bottom: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media only screen and (max-width: 560px) {
.pp_cont h3 {
font-size: 1.4rem;
}
}
.pp_cont p {
font-size: 1.4rem;
}
@media only screen and (max-width: 560px) {
.pp_cont p {
font-size: 1.3rem;
}
}
.pp_cont p a {
color: #0059b3;
}
.pp_cont ul,
.pp_cont ol {
margin-top: 20px;
list-style: auto !important;
padding: 0 0 0 35px;
}
@media only screen and (max-width: 560px) {
.pp_cont ul,
.pp_cont ol {
padding: 0 0 0 15px;
}
}
.pp_cont ul li,
.pp_cont ol li {
list-style: auto !important;
font-size: 1.3rem;
color: #777;
line-height: 1.65;
margin-bottom: 7px;
font-weight: 400;
}
@media only screen and (max-width: 560px) {
.pp_cont ul li,
.pp_cont ol li {
font-size: 1.2rem;
}
}
.pp_cont ul li:last-of-type,
.pp_cont ol li:last-of-type {
margin-bottom: 0;
}  .sp-hide {
display: block;
}
@media only screen and (max-width: 560px) {
.sp-hide {
display: none;
}
}  .sp-br {
display: none;
}
@media only screen and (max-width: 560px) {
.sp-br {
display: block;
}
}
.tb-br {
display: none;
}
@media only screen and (max-width: 779px) {
.tb-br {
display: block;
}
}
.pc-br {
display: block;
}
@media only screen and (max-width: 560px) {
.pc-br {
display: none;
}
}  .line {
width: 100%;
height: 2px;
background: #9cecfb;
background: -webkit-gradient(linear, right top, left top, from(#9cecfb), color-stop(#65c7f7), to(#0052d4));
background: linear-gradient(to left, #9cecfb, #65c7f7, #0052d4);
}      .c-section-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
line-height: 1.4;
margin-bottom: 60px;
position: relative;
z-index: 2;
}
.c-section-title span:nth-child(1) {
font-family: "Roboto", sans-serif;
font-weight: 900;
font-size: clamp(40px, 10vw + 20px, 120px);
text-transform: uppercase;
line-height: 1.2;
}
@media only screen and (max-width: 560px) {
.c-section-title span:nth-child(1) {
font-size: clamp(36px, 12vw, 60px);
}
}
.c-section-title span:nth-child(2) {
font-weight: 700;
font-size: clamp(20px, 2vw + 14px, 28px);
letter-spacing: 0.15em;
}
.c-section-title.-w {
color: #fff;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c-overlap-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
margin-bottom: 60px;
}
.c-overlap-title .en {
font-family: "Roboto", sans-serif;
font-size: clamp(40px, 8vw, 100px);
font-weight: 900;
color: #f2f2f2;
letter-spacing: 0.05em;
line-height: 1.2;
text-transform: uppercase;
}
.c-overlap-title .ja {
z-index: 2;
font-size: clamp(20px, 2vw + 14px, 28px);
font-weight: 700;
margin-top: -50px;
display: block;
}
@media only screen and (max-width: 560px) {
.c-overlap-title .en {
font-size: clamp(36px, 12vw, 60px);
}
.c-overlap-title .ja {
margin-top: -35px;
}
.c-overlap-title .ja::after {
width: 30px;
height: 2px;
margin-top: 12px;
}
}
.c-stack-title {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
margin-bottom: 80px;
}
.c-stack-title .en {
font-family: "Roboto", sans-serif;
font-size: clamp(40px, 8vw, 100px);
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1.2;
text-transform: uppercase;
}
.c-stack-title .ja {
z-index: 2;
font-size: clamp(20px, 2vw + 14px, 28px);
font-weight: 700;
display: block;
}
.c-stack-titlesmall {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
margin-bottom: 80px;
}
.c-stack-titlesmall .en {
font-family: "Roboto", sans-serif;
font-size: clamp(32px, 6.5vw, 80px);
font-weight: 900;
letter-spacing: 0.05em;
line-height: 1.1;
text-transform: uppercase;
}
.c-stack-titlesmall .ja {
z-index: 2;
font-size: clamp(16px, 1.5vw + 12px, 24px);
font-weight: 700;
display: block;
margin-top: -0.2em;
}
.p-section__mv {
position: relative;
width: 100%;
height: clamp(350px, 40vw, 500px);
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 30px;
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-section__mv {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-section__mv {
margin-bottom: 80px;
}
}
.p-section__mv-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.p-section__mv-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
}
.p-section__mv-image img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.p-section__mv-image.-g {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.p-section__mv-content {
position: relative;
z-index: 2;
text-align: center;
-webkit-transform: translateY(15px);
transform: translateY(15px);
}
@media only screen and (max-width: 1023px) {
.p-section__mv {
height: 350px;
padding-bottom: 20px;
}
.p-section__mv .c-section-title span:nth-child(2) {
margin-top: -5px;
}
}
.screen-reader-response {
display: none !important;
}
.view[data-view=in] {
opacity: 0;
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 800ms;
transition-duration: 800ms;
-webkit-transition-property: opacity;
transition-property: opacity;
}
.view[data-view=in].wao {
opacity: 1;
}
.view[data-view=up] {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 1000ms, 800ms;
transition-duration: 1000ms, 800ms;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.view[data-view=up].wao {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.view[data-view=slowup] {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
transition: opacity 1000ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1), -webkit-transform 800ms cubic-bezier(0.25, 0.8, 0.25, 1);
}
.view[data-view=slowup].wao {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.view[data-view=dn] {
opacity: 0;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 1s, 800ms;
transition-duration: 1s, 800ms;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.view[data-view=dn].wao {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
.view[data-view=rt] {
opacity: 0;
-webkit-transform: translateX(30px);
transform: translateX(30px);
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 1s, 800ms;
transition-duration: 1s, 800ms;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.view[data-view=rt].wao {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.view[data-view=lt] {
opacity: 0;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 1s, 800ms;
transition-duration: 1s, 800ms;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.view[data-view=lt].wao {
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
.view[data-view=zm] {
opacity: 0;
}
.view[data-view=zm].wao {
-webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@-webkit-keyframes zoomIn {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoomIn {
0% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
opacity: 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.view[data-view=marker] {
position: relative;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgba(255, 255, 0, 0)), color-stop(0, #0059b3), to(#0059b3));
background-image: linear-gradient(180deg, rgba(255, 255, 0, 0) 10%, #0059b3 0, #0059b3);
background-repeat: no-repeat;
background-position: bottom left;
background-size: 0 38.2%;
-webkit-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.view[data-view=marker].wao {
background-size: 100% 38.2%;
}
.view.d001 {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.view.d0015 {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.view.d002 {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.view.d0025 {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.view.d005 {
-webkit-transition-delay: 800ms;
transition-delay: 800ms;
}
.view.d075 {
-webkit-transition-delay: 0.75s;
transition-delay: 0.75s;
}
.view.d01 {
-webkit-transition-delay: 1s;
transition-delay: 1s;
}
.view.d0125 {
-webkit-transition-delay: 1.25s;
transition-delay: 1.25s;
}
.view.d015 {
-webkit-transition-delay: 1.5s;
transition-delay: 1.5s;
}
.view.d02 {
-webkit-transition-delay: 2s;
transition-delay: 2s;
}
.view.d025 {
-webkit-transition-delay: 2.5s;
transition-delay: 2.5s;
}
.view.d03 {
-webkit-transition-delay: 3s;
transition-delay: 3s;
}
.view.d04 {
-webkit-transition-delay: 4s;
transition-delay: 4s;
}
@media only screen and (min-width: 1281px) {
.view.p {
opacity: 0;
-webkit-transform: translateY(40px);
transform: translateY(40px);
-webkit-transition: cubic-bezier(0.22, 0.61, 0.36, 1);
transition: cubic-bezier(0.22, 0.61, 0.36, 1);
-webkit-transition-duration: 1s, 800ms;
transition-duration: 1s, 800ms;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
.view.p.wao {
opacity: 1;
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.view[data-view=img] {
overflow: hidden;
}
.view[data-view=img] img {
opacity: 0;
scale: 1.1;
-webkit-transition: scale 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: scale 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.view[data-view=img].wao img {
opacity: 1;
scale: 1;
}
.view.pc[data-view=zm] {
opacity: 0;
}
@media only screen and (max-width: 960px) {
.view.pc[data-view=zm] {
opacity: 1;
}
}
.view.pc[data-view=zm].wao {
-webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
@media only screen and (max-width: 960px) {
.view.pc[data-view=zm].wao {
-webkit-animation: none;
animation: none;
}
}
@media only screen and (max-width: 960px) {
.view.sp[data-view=zm] {
opacity: 0;
}
}
@media only screen and (max-width: 960px) {
.view.sp[data-view=zm].wao {
-webkit-animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
}
.kata01 {
-webkit-animation: katakata1 4s step-start 0s infinite normal;
animation: katakata1 4s step-start 0s infinite normal;
}
@-webkit-keyframes katakata1 {
0% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
30% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
50% {
-webkit-transform: translate(2px, 0) rotate(-2deg);
transform: translate(2px, 0) rotate(-2deg);
}
60% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
80% {
-webkit-transform: translate(2px, 0) rotate(-2deg);
transform: translate(2px, 0) rotate(-2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
}
@keyframes katakata1 {
0% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
30% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
50% {
-webkit-transform: translate(2px, 0) rotate(-2deg);
transform: translate(2px, 0) rotate(-2deg);
}
60% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
80% {
-webkit-transform: translate(2px, 0) rotate(-2deg);
transform: translate(2px, 0) rotate(-2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, -2px) rotate(6deg);
transform: translate(0, -2px) rotate(6deg);
}
}
.kata02 {
-webkit-animation: katakata2 4s step-start 0s infinite normal;
animation: katakata2 4s step-start 0s infinite normal;
}
@-webkit-keyframes katakata2 {
0% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
50% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
60% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
80% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
}
@keyframes katakata2 {
0% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
50% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
60% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
80% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
}
.kata03 {
-webkit-animation: katakata3 4s step-start 0s infinite normal;
animation: katakata3 4s step-start 0s infinite normal;
}
@-webkit-keyframes katakata3 {
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
}
@keyframes katakata3 {
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
50% {
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
}
}
.kata04 {
-webkit-animation: katakata4 4s step-start 0s infinite normal;
animation: katakata4 4s step-start 0s infinite normal;
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes katakata4 {
0% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(-3deg);
transform: translate(0, 0) rotate(-3deg);
}
30% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
50% {
-webkit-transform: translate(2px, 0) rotate(-0.5deg);
transform: translate(2px, 0) rotate(-0.5deg);
}
60% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(3deg);
transform: translate(0, 0) rotate(3deg);
}
80% {
-webkit-transform: translate(2px, 0) rotate(-0.5deg);
transform: translate(2px, 0) rotate(-0.5deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
}
@keyframes katakata4 {
0% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(-3deg);
transform: translate(0, 0) rotate(-3deg);
}
30% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
50% {
-webkit-transform: translate(2px, 0) rotate(-0.5deg);
transform: translate(2px, 0) rotate(-0.5deg);
}
60% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(3deg);
transform: translate(0, 0) rotate(3deg);
}
80% {
-webkit-transform: translate(2px, 0) rotate(-0.5deg);
transform: translate(2px, 0) rotate(-0.5deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, -2px) rotate(3deg);
transform: translate(0, -2px) rotate(3deg);
}
}
.kata00 {
-webkit-animation: kata0 1.6s 0.2s infinite normal;
animation: kata0 1.6s 0.2s infinite normal;
}
@-webkit-keyframes kata0 {
0% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
10% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
21% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
30% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
41% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
to {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
11% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
20% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
31% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
40% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
}
@keyframes kata0 {
0% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
10% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
21% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
30% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
41% {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
to {
-webkit-transform: translateY(1px);
transform: translateY(2px);
}
11% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
20% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
31% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
40% {
-webkit-transform: translateY(-1px);
transform: translateY(-2px);
}
}
.tokotoko {
-webkit-animation: tokotoko 4s step-start 0s infinite normal;
animation: tokotoko 4s step-start 0s infinite normal;
}
@-webkit-keyframes tokotoko {
0% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
50% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
60% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
80% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
}
@keyframes tokotoko {
0% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
10% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
20% {
-webkit-transform: translate(0, 0) rotate(6deg);
transform: translate(0, 0) rotate(6deg);
}
30% {
-webkit-transform: translate(0, 2px) rotate(0deg);
transform: translate(0, 2px) rotate(0deg);
}
40% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
50% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
60% {
-webkit-transform: translate(0, -2px) rotate(0deg);
transform: translate(0, -2px) rotate(0deg);
}
70% {
-webkit-transform: translate(0, 0) rotate(-6deg);
transform: translate(0, 0) rotate(-6deg);
}
80% {
-webkit-transform: translate(-2px, 0) rotate(2deg);
transform: translate(-2px, 0) rotate(2deg);
}
90% {
-webkit-transform: translate(0, 0) rotate(0deg);
transform: translate(0, 0) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 2px) rotate(-6deg);
transform: translate(0, 2px) rotate(-6deg);
}
}
.kurukuru01 {
-webkit-animation: 10s linear infinite rotation1;
animation: 10s linear infinite rotation1;
}
.kurukuru02 {
-webkit-animation: 15s linear infinite rotation1;
animation: 15s linear infinite rotation1;
}
@-webkit-keyframes rotation1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes rotation1 {
0% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
100% {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
}
.fuwafuwa01 {
-webkit-animation: fuwafuwa01 3s ease-in-out infinite alternate;
animation: fuwafuwa01 3s ease-in-out infinite alternate;
-webkit-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.fuwafuwa02 {
-webkit-animation: fuwafuwa02 3.5s ease-in-out infinite alternate;
animation: fuwafuwa02 3.5s ease-in-out infinite alternate;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
@-webkit-keyframes fuwafuwa01 {
0% {
-webkit-transform: translate(0, 0) rotate(-3deg);
transform: translate(0, 0) rotate(-3deg);
}
50% {
-webkit-transform: translate(0, -3px) rotate(0deg);
transform: translate(0, -3px) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(3deg);
transform: translate(0, 0) rotate(3deg);
}
}
@keyframes fuwafuwa01 {
0% {
-webkit-transform: translate(0, 0) rotate(-3deg);
transform: translate(0, 0) rotate(-3deg);
}
50% {
-webkit-transform: translate(0, -3px) rotate(0deg);
transform: translate(0, -3px) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(3deg);
transform: translate(0, 0) rotate(3deg);
}
}
@-webkit-keyframes fuwafuwa02 {
0% {
-webkit-transform: translate(0, 0) rotate(-5deg);
transform: translate(0, 0) rotate(-5deg);
}
50% {
-webkit-transform: translate(0, -3px) rotate(0deg);
transform: translate(0, -3px) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(1deg);
transform: translate(0, 0) rotate(1deg);
}
}
@keyframes fuwafuwa02 {
0% {
-webkit-transform: translate(0, 0) rotate(-5deg);
transform: translate(0, 0) rotate(-5deg);
}
50% {
-webkit-transform: translate(0, -3px) rotate(0deg);
transform: translate(0, -3px) rotate(0deg);
}
100% {
-webkit-transform: translate(0, 0) rotate(1deg);
transform: translate(0, 0) rotate(1deg);
}
}
.c-anime-hover-slotText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.c-anime-hover-slotText .mask {
display: block;
height: 1em;
overflow: hidden;
line-height: 1;
}
.c-anime-hover-slotText .mask > .i {
display: block;
}  header {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
}
header .hd-wrap {
position: fixed;
top: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 1000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 92%;
max-width: 1420px;
height: 80px;
padding: 0 30px;
background-color: rgba(255, 255, 255, 0.97);
-webkit-box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
border-radius: 10px;
}
@media only screen and (max-width: 560px) {
header .hd-wrap {
top: 20px;
width: 94%;
height: 64px;
padding: 0 15px;
}
}
header .hd-wrap .logo a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
@media only screen and (max-width: 560px) {
header .hd-wrap .logo a {
gap: 8px;
}
}
header .hd-wrap .logo a img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
-o-object-position: center;
object-position: center;
width: clamp(35px, 4vw + 10px, 50px);
aspect-ratio: 1/1;
}
header .hd-wrap .logo a span {
font-size: clamp(15px, 1.2vw + 12px, 20px);
font-weight: bold;
letter-spacing: 0.05em;
white-space: nowrap;
}
@media only screen and (max-width: 560px) {
header .hd-wrap .logo a span {
font-size: 14px;
}
}
header .hamburger-fade {
width: 60px;
height: 60px;
padding: 0;
border: none;
background: transparent;
cursor: pointer;
}
@media only screen and (max-width: 560px) {
header .hamburger-fade {
width: 44px;
height: 44px;
}
}
header .hamburger-fade__wrapper {
position: relative;
width: 30px;
height: 20px;
margin: 20px auto;
}
@media only screen and (max-width: 560px) {
header .hamburger-fade__wrapper {
width: 24px;
height: 16px;
margin: 14px auto;
}
}
header .hamburger-fade__line {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #333;
-webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
header .hamburger-fade__line:nth-child(1) {
top: 0;
}
header .hamburger-fade__line:nth-child(2) {
top: 9px;
}
header .hamburger-fade__line:nth-child(3) {
top: 18px;
}
@media only screen and (max-width: 560px) {
header .hamburger-fade__line:nth-child(2) {
top: 7px;
}
header .hamburger-fade__line:nth-child(3) {
top: 14px;
}
}
header .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
-webkit-transform: translateY(9px) rotate(45deg);
transform: translateY(9px) rotate(45deg);
}
header .hamburger-fade.active .hamburger-fade__line:nth-child(2) {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
header .hamburger-fade.active .hamburger-fade__line:nth-child(3) {
-webkit-transform: translateY(-9px) rotate(-45deg);
transform: translateY(-9px) rotate(-45deg);
}
@media only screen and (max-width: 560px) {
header .hamburger-fade.active .hamburger-fade__line:nth-child(1) {
-webkit-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
header .hamburger-fade.active .hamburger-fade__line:nth-child(3) {
-webkit-transform: translateY(-7px) rotate(-45deg);
transform: translateY(-7px) rotate(-45deg);
}
}
header .nav-fade {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
visibility: hidden;
z-index: 900;
}
@media only screen and (max-width: 560px) {
header .nav-fade {
padding: 140px 25px 40px;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
header .nav-fade__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(6, 52, 142, 0.98);
opacity: 0;
-webkit-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
header .nav-fade__wrapper {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
max-width: 1420px;
margin: 0 auto;
padding: 190px 8vw 8vh;
}
@media only screen and (max-width: 560px) {
header .nav-fade__wrapper {
padding: 0;
}
}
header .nav-fade__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 50px 1fr;
grid-template-columns: repeat(2, 1fr);
-ms-grid-rows: auto 20px auto 20px auto;
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
gap: 20px 50px;
}
header .nav-fade__list > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
header .nav-fade__list > *:nth-child(2) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
header .nav-fade__list > *:nth-child(3) {
-ms-grid-row: 5;
-ms-grid-column: 1;
}
header .nav-fade__list > *:nth-child(4) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
header .nav-fade__list > *:nth-child(5) {
-ms-grid-row: 3;
-ms-grid-column: 3;
}
header .nav-fade__list > *:nth-child(6) {
-ms-grid-row: 5;
-ms-grid-column: 3;
}
@media only screen and (max-width: 560px) {
header .nav-fade__list {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
grid-auto-flow: row;
gap: 15px;
padding: 0;
}
}
header .nav-fade__item {
position: relative;
margin-bottom: 2vh;
padding-left: 60px;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media only screen and (max-width: 560px) {
header .nav-fade__item {
padding-left: 45px;
margin-bottom: 15px;
}
}
header .nav-fade__number {
position: absolute;
left: 0;
color: #ebf5ff;
font-size: 14px;
font-family: "Roboto", sans-serif;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
@media only screen and (max-width: 560px) {
header .nav-fade__number {
font-size: 12px;
}
}
header .nav-fade__link {
display: inline-block;
color: #fff;
font-size: clamp(20px, 2.5vw + 14px, 32px);
line-height: 1.75;
font-weight: bold;
text-decoration: none;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
text-transform: uppercase;
}
header .nav-fade__link:hover {
color: #4a90e2;
}
@media only screen and (max-width: 560px) {
header .nav-fade__link {
font-size: clamp(20px, 8vw, 26px);
line-height: 1.5;
}
}
header .nav-fade__info {
margin-top: auto;
padding-left: 60px;
color: #ebf5ff;
font-size: 14px;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
text-align: right;
-webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease;
transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}
@media only screen and (max-width: 560px) {
header .nav-fade__info {
margin-top: 40px;
padding-left: 0;
width: 100%;
}
}
@media only screen and (max-width: 560px) {
header .nav-fade__address, header .nav-fade__tel {
font-size: 13px;
margin: 8px 0;
}
}
header .nav-fade.active {
visibility: visible;
}
header .nav-fade.active .nav-fade__bg {
opacity: 1;
}
header .nav-fade.active .nav-fade__item {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
header .nav-fade.active .nav-fade__item:nth-child(1) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
header .nav-fade.active .nav-fade__item:nth-child(2) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
header .nav-fade.active .nav-fade__item:nth-child(3) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
header .nav-fade.active .nav-fade__item:nth-child(4) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
header .nav-fade.active .nav-fade__item:nth-child(5) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
header .nav-fade.active .nav-fade__item:nth-child(6) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
header .nav-fade.active .nav-fade__info {
opacity: 0.8;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
#scrollheader {
-webkit-transition: opacity 0.3s var(--easing), pointer-events 0.3s ease;
transition: opacity 0.3s var(--easing), pointer-events 0.3s ease;
}
#scrollheader.is-hidden {
opacity: 0;
pointer-events: none;
}
#scrollheader.is-change .allmenu {
background: rgba(255, 255, 255, 0.9);
}
#scrollheader.is-change .allmenu .wrap nav ul li a {
color: inherit;
}
#scrollheader.is-change .allmenu .wrap nav ul li a:before {
background-color: #090909;
}
#scrollheader.is-rehidden {
opacity: 0 !important;
pointer-events: none !important;
}
#scrollheader.is-active {
pointer-events: auto;
}
#scrollheader.is-active .menu {
pointer-events: auto;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.l-footer {
background-color: #002b74;
padding: 30px 0;
width: 100%;
}
.l-footer__copyright {
font-family: "Roboto", sans-serif;
font-size: inherit;
text-align: center;
color: #fff;
font-size: 12px;
letter-spacing: 0.05em;
opacity: 0.6;
}
@media (max-width: 768px) {
.l-footer {
padding: 20px 0;
}
.l-footer__copyright {
font-size: 10px;
}
}
@-webkit-keyframes fadeInUp {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.p-mv__inner {
height: 96vh;
min-height: 600px;
max-width: 1640px;
margin: 0 auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 190px 8vw 90px;
}
@media only screen and (max-width: 1023px) {
.p-mv__inner {
min-height: auto;
padding-top: 140px;
padding-bottom: 60px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.p-mv__content {
width: 80%;
}
@media only screen and (max-width: 1023px) {
.p-mv__content {
width: 100%;
}
}
.p-mv__content h1 {
font-size: clamp(40px, 6vw + 10px, 80px);
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.05em;
margin-bottom: 30px;
display: block;
overflow: hidden;
}
.p-mv__content h1 span {
display: block;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-animation: fadeInUp 1s ease forwards;
animation: fadeInUp 1s ease forwards;
-webkit-animation-delay: 375ms;
animation-delay: 375ms;
}
.p-mv__content p {
font-size: clamp(14px, 1vw + 10px, 18px);
font-weight: 500;
letter-spacing: 0.15em;
color: #6a6a6a;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-animation: fadeInUp 1s ease forwards;
animation: fadeInUp 1s ease forwards;
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
.p-mv .contactBtn {
width: 20%;
}
@media only screen and (max-width: 1023px) {
.p-mv .contactBtn {
width: 100%;
}
}
.p-mv .contactBtn a {
display: block;
width: 80%;
max-width: 180px;
background: #093b90;
aspect-ratio: 1/1;
padding: 20px;
margin-inline: auto;
-ms-flex-line-pack: center;
align-content: center;
text-align: center;
border-radius: 10px;
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-animation: fadeInUp 1s ease forwards;
animation: fadeInUp 1s ease forwards;
-webkit-animation-delay: 625ms;
animation-delay: 625ms;
}
@media only screen and (max-width: 1023px) {
.p-mv .contactBtn a {
max-width: 130px;
margin-left: auto;
margin-right: 0;
margin-top: 40px;
}
}
.p-mv .contactBtn a span {
font-size: clamp(14px, 1vw + 10px, 18px);
font-weight: 700;
color: #ffffff;
display: block;
margin-bottom: 10px;
}
@media only screen and (max-width: 1023px) {
.p-mv .contactBtn a span {
font-size: 13px;
margin-bottom: 0;
}
}
.p-mv .contactBtn a img {
width: 40px;
aspect-ratio: 1/1;
-o-object-fit: contain;
object-fit: contain;
}
@media only screen and (max-width: 1023px) {
.p-mv .contactBtn a img {
width: 24px;
}
}
.hero {
position: relative;
width: 100%;
height: 80vh;
overflow: hidden;
}
@media only screen and (max-width: 1023px) {
.hero {
height: 60vh;
}
}
.hero .heroSlider {
position: absolute;
width: 100%;
height: 100%;
}
.hero .heroSlider .swiper {
position: absolute;
width: 100%;
height: 100%;
}
.hero .heroSlider .swiper .swiper-slide {
-webkit-transition-property: opacity, -webkit-transform !important;
transition-property: opacity, -webkit-transform !important;
transition-property: opacity, transform !important;
transition-property: opacity, transform, -webkit-transform !important;
pointer-events: none;
}
.hero .heroSlider .swiper .swiper-slide-active {
pointer-events: auto;
}
.hero .heroSlider .swiper .slide {
width: 100%;
height: 100%;
}
.hero .heroSlider .swiper .slide .slide-media {
width: 100%;
height: 100%;
position: relative;
}
.hero .heroSlider .swiper .slide .slide-media picture {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.hero .heroSlider .swiper .slide .slide-media picture img,
.hero .heroSlider .swiper .slide .slide-media picture source {
-webkit-transition: 7s 1s ease-out;
transition: 7s 1s ease-out;
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
-webkit-transform: scale(1.05) translateZ(0);
transform: scale(1.05) translateZ(0);
}
.hero .heroSlider .swiper .swiper-slide[class*=-active] .slide-media img,
.hero .heroSlider .swiper .swiper-slide[class*=-active] .slide-media source {
-webkit-transition-delay: 0s;
transition-delay: 0s;
-webkit-transform: scale(1);
transform: scale(1);
}
.p-mv {
margin-bottom: 100px;
}
@media only screen and (max-width: 960px) {
.p-mv {
margin-bottom: 55px;
}
}
@media only screen and (max-width: 560px) {
.p-mv {
margin-bottom: 120px;
}
}
@media only screen and (max-width: 560px) and (max-width: 960px) {
.p-mv {
margin-bottom: 80px;
}
}
.p-service {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-service {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-service {
margin-bottom: 80px;
}
}
.p-service .l-inner {
display: block;
width: 90%;
max-width: 1420px;
margin: 0 auto;
}
@media only screen and (min-width: 1921px) {
.p-service .l-inner {
max-width: 1400px;
}
}
@media only screen and (max-width: 960px) {
.p-service .l-inner {
max-width: 640px;
}
}
@media only screen and (max-width: 560px) {
.p-service .l-inner {
width: 90%;
}
}
.p-service__lead {
font-size: clamp(16px, 1.5vw + 12px, 24px);
font-weight: 700;
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-service__lead {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-service__lead {
margin-bottom: 80px;
}
}
.p-service__lead {
position: relative;
}
@media only screen and (max-width: 560px) {
.p-service__lead {
font-size: var(--h5);
margin-bottom: 60px;
}
}
.p-service__lead::before {
content: "";
position: absolute;
top: -180px;
left: calc(50% - 50vw);
width: 84vw;
height: calc(100% + 260px);
background-color: #fafafa;
z-index: -1;
pointer-events: none;
}
.p-service .p-service__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 40px;
}
@media (min-width: 769px) {
.p-service .p-service__list {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 30px;
}
}
.p-service .p-service__item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
position: relative;
padding: 40px 30px;
background-color: #fff;
border: 1px solid transparent;
-webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
}
.p-service .p-service__item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background-color: #0059b3;
}
.p-service .p-service__icon {
margin-bottom: 25px;
}
.p-service .p-service__icon span {
display: inline-block;
font-family: "Roboto", sans-serif;
font-size: 52px;
font-weight: 900;
line-height: 1;
color: #0059b3;
opacity: 0.15;
}
.p-service .p-service__name {
margin-bottom: 20px;
font-weight: 700;
color: #333;
letter-spacing: 0.05em;
}
.p-service .p-service__name span {
display: block;
font-family: "Roboto", sans-serif;
font-size: clamp(12px, 0.8vw + 9px, 15px);
font-weight: 700;
letter-spacing: 0.075em;
text-transform: uppercase;
margin-left: 2px;
}
.p-service .p-service__desc {
font-size: 14px;
line-height: 1.9;
color: #555;
text-align: justify;
}
@media only screen and (max-width: 1023px) {
.p-service .p-service__item {
padding: 30px 25px;
}
.p-service .p-service__item::before {
width: 4px;
height: 100%;
}
.p-service .p-service__icon span {
font-size: 44px;
}
}
.p-message {
position: relative;
}
.p-message::before {
content: "";
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
width: 1px;
height: 120px;
background: #090909;
}
@media only screen and (max-width: 1023px) {
.p-message::before {
top: -20px;
}
}
.p-message.l-inner {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.p-message.l-inner {
width: 84%;
max-width: 640px;
}
}
.p-message.l-inner {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-message.l-inner {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-message.l-inner {
margin-bottom: 80px;
}
}
.p-message p {
font-size: clamp(14px, 1vw + 10px, 18px);
font-weight: 600;
line-height: 2.3;
text-align: justify;
margin-bottom: 80px;
}
@media only screen and (max-width: 560px) {
.p-message p {
margin-bottom: 50px;
}
}
.p-profile {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-profile {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-profile {
margin-bottom: 80px;
}
}
.p-profile {
padding: 100px 0;
background-color: #fafafa;
}
.p-profile .l-inner {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.p-profile .l-inner {
width: 84%;
max-width: 640px;
}
}
.p-profile__list {
border-top: 1px solid #eee;
}
.p-profile__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 25px 0;
border-bottom: 1px solid #eee;
font-size: clamp(14px, 0.8vw + 9px, 15px);
line-height: 1.8;
}
.p-profile__row dt {
width: 180px;
-ms-flex-negative: 0;
flex-shrink: 0;
font-weight: 700;
color: #333;
}
.p-profile__row dd {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: #555;
}
@media only screen and (max-width: 560px) {
.p-profile {
padding: 60px 0;
}
.p-profile__list {
margin-top: 40px;
}
.p-profile__row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 8px;
padding: 20px 0;
}
.p-profile__row dt {
width: 100%;
font-size: 13px;
color: #999;
}
.p-profile__row dd {
width: 100%;
}
}
.p-access {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-access {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-access {
margin-bottom: 80px;
}
}
.p-access .l-inner {
display: block;
width: 90%;
max-width: 1420px;
margin: 0 auto;
}
@media only screen and (min-width: 1921px) {
.p-access .l-inner {
max-width: 1400px;
}
}
@media only screen and (max-width: 960px) {
.p-access .l-inner {
max-width: 640px;
}
}
@media only screen and (max-width: 560px) {
.p-access .l-inner {
width: 90%;
}
}
.p-access__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 40px;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.p-access__map {
-webkit-box-flex: 1.2;
-ms-flex: 1.2;
flex: 1.2;
aspect-ratio: 4/3;
}
.p-access__map iframe {
width: 100%;
height: 100%;
-webkit-filter: grayscale(0.2);
filter: grayscale(0.2);
}
.p-access__info {
-webkit-box-flex: 0.8;
-ms-flex: 0.8;
flex: 0.8;
font-size: 15px;
line-height: 2;
color: #333;
}
.p-access__branch {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
}
.p-access__address {
margin-bottom: 15px;
}
.p-access__contact {
margin-bottom: 25px;
}
.p-access__contact div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.p-access__contact dt {
-ms-flex-negative: 0;
flex-shrink: 0;
}
.p-access__route {
font-size: 14px;
color: #555;
}
.p-access__route p {
text-indent: -1em;
padding-left: 1em;
}
@media only screen and (max-width: 1023px) {
.p-access {
padding: 60px 0;
}
.p-access__container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 30px;
}
.p-access__map {
width: 100%;
aspect-ratio: 16/9;
}
.p-access__info {
width: 100%;
}
}
.p-recruit__inner {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-recruit__inner {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-recruit__inner {
margin-bottom: 80px;
}
}
.p-recruit__inner {
position: relative;
}
.p-recruit__inner::before {
content: "";
position: absolute;
top: -60px;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
width: 1px;
height: 120px;
background: #090909;
}
@media only screen and (max-width: 1023px) {
.p-recruit__inner::before {
top: -20px;
}
}
.p-recruit__inner.l-inner {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.p-recruit__inner.l-inner {
width: 84%;
max-width: 640px;
}
}
.p-recruit__inner.l-inner {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-recruit__inner.l-inner {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-recruit__inner.l-inner {
margin-bottom: 80px;
}
}
.p-recruit__tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: clamp(20px, 4vw, 60px);
margin-bottom: 60px;
border-bottom: 2px solid #f0f0f0;
}
.p-recruit__tab {
position: relative;
padding: 20px 0;
font-weight: 700;
font-size: 16px;
color: #aaa;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.p-recruit__tab::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: #0059b3;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
transition: -webkit-transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
transition: transform 0.3s cubic-bezier(0.45, 0, 0.55, 1), -webkit-transform 0.3s cubic-bezier(0.45, 0, 0.55, 1);
}
.p-recruit__tab.is-active {
color: #0059b3;
}
.p-recruit__tab.is-active::after {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.p-recruit__panels {
background-color: transparent;
}
.p-recruit__panel {
display: none;
}
.p-recruit__panel.is-active {
display: block;
-webkit-animation: slideUp 0.6s ease both;
animation: slideUp 0.6s ease both;
}
.p-recruit__list-dl .p-recruit__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin-bottom: 40px;
}
.p-recruit__list-dl .p-recruit__row:last-child {
margin-bottom: 0;
}
.p-recruit__list-dl .p-recruit__row dt {
width: 240px;
padding: 10px 0;
font-weight: 700;
color: #333;
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
font-size: 16px;
letter-spacing: 0.05em;
}
.p-recruit__list-dl .p-recruit__row dt::before {
content: "";
width: 3px;
height: 18px;
background-color: #0059b3;
display: inline-block;
}
.p-recruit__list-dl .p-recruit__row dd {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 10px 40px;
background-color: #f9fcff;
color: #555;
line-height: 2;
font-size: 15px;
border-radius: 4px;
}
@-webkit-keyframes slideUp {
from {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media (max-width: 768px) {
.p-recruit__tabs {
gap: 25px;
margin-bottom: 50px;
padding: 0 20px;
overflow-x: auto;
white-space: nowrap;
}
.p-recruit__tab {
font-size: 14px;
}
.p-recruit__list-dl .p-recruit__row {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 30px;
}
.p-recruit__list-dl .p-recruit__row dt {
width: 100%;
padding: 0 0 12px;
}
.p-recruit__list-dl .p-recruit__row dd {
width: 100%;
padding: 20px;
font-size: 14px;
}
}
.p-contact .l-inner {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.p-contact .l-inner {
width: 84%;
max-width: 640px;
}
}
.p-contact .l-inner {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.p-contact .l-inner {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.p-contact .l-inner {
margin-bottom: 80px;
}
}
.p-contact__text {
text-align: center;
line-height: 2;
margin-bottom: 60px;
font-size: 15px;
color: #333;
}
.p-contact__form br {
display: none;
}
.p-contact__form { }
.p-contact__form input[type=text],
.p-contact__form input[type=password],
.p-contact__form input[type=datetime],
.p-contact__form input[type=date],
.p-contact__form input[type=month],
.p-contact__form input[type=time],
.p-contact__form input[type=week],
.p-contact__form input[type=number],
.p-contact__form input[type=email],
.p-contact__form input[type=url],
.p-contact__form input[type=search],
.p-contact__form input[type=tel],
.p-contact__form input[type=color],
.p-contact__form select,
.p-contact__form textarea {
display: block;
width: 100%;
height: 60px;
padding: 0 1.5rem;
border-radius: 4px;
border: 1px solid #eee;
background: #fff;
font-size: 15px;
color: #333;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
@media only screen and (max-width: 560px) {
.p-contact__form input[type=text],
.p-contact__form input[type=password],
.p-contact__form input[type=datetime],
.p-contact__form input[type=date],
.p-contact__form input[type=month],
.p-contact__form input[type=time],
.p-contact__form input[type=week],
.p-contact__form input[type=number],
.p-contact__form input[type=email],
.p-contact__form input[type=url],
.p-contact__form input[type=search],
.p-contact__form input[type=tel],
.p-contact__form input[type=color],
.p-contact__form select,
.p-contact__form textarea {
height: 50px;
padding: 0 1rem;
}
}
.p-contact__form input[type=text]::-webkit-input-placeholder, .p-contact__form input[type=password]::-webkit-input-placeholder, .p-contact__form input[type=datetime]::-webkit-input-placeholder, .p-contact__form input[type=date]::-webkit-input-placeholder, .p-contact__form input[type=month]::-webkit-input-placeholder, .p-contact__form input[type=time]::-webkit-input-placeholder, .p-contact__form input[type=week]::-webkit-input-placeholder, .p-contact__form input[type=number]::-webkit-input-placeholder, .p-contact__form input[type=email]::-webkit-input-placeholder, .p-contact__form input[type=url]::-webkit-input-placeholder, .p-contact__form input[type=search]::-webkit-input-placeholder, .p-contact__form input[type=tel]::-webkit-input-placeholder, .p-contact__form input[type=color]::-webkit-input-placeholder, .p-contact__form select::-webkit-input-placeholder, .p-contact__form textarea::-webkit-input-placeholder {
color: #ccc;
letter-spacing: 0.05em;
}
.p-contact__form input[type=text]::-moz-placeholder, .p-contact__form input[type=password]::-moz-placeholder, .p-contact__form input[type=datetime]::-moz-placeholder, .p-contact__form input[type=date]::-moz-placeholder, .p-contact__form input[type=month]::-moz-placeholder, .p-contact__form input[type=time]::-moz-placeholder, .p-contact__form input[type=week]::-moz-placeholder, .p-contact__form input[type=number]::-moz-placeholder, .p-contact__form input[type=email]::-moz-placeholder, .p-contact__form input[type=url]::-moz-placeholder, .p-contact__form input[type=search]::-moz-placeholder, .p-contact__form input[type=tel]::-moz-placeholder, .p-contact__form input[type=color]::-moz-placeholder, .p-contact__form select::-moz-placeholder, .p-contact__form textarea::-moz-placeholder {
color: #ccc;
letter-spacing: 0.05em;
}
.p-contact__form input[type=text]:-ms-input-placeholder, .p-contact__form input[type=password]:-ms-input-placeholder, .p-contact__form input[type=datetime]:-ms-input-placeholder, .p-contact__form input[type=date]:-ms-input-placeholder, .p-contact__form input[type=month]:-ms-input-placeholder, .p-contact__form input[type=time]:-ms-input-placeholder, .p-contact__form input[type=week]:-ms-input-placeholder, .p-contact__form input[type=number]:-ms-input-placeholder, .p-contact__form input[type=email]:-ms-input-placeholder, .p-contact__form input[type=url]:-ms-input-placeholder, .p-contact__form input[type=search]:-ms-input-placeholder, .p-contact__form input[type=tel]:-ms-input-placeholder, .p-contact__form input[type=color]:-ms-input-placeholder, .p-contact__form select:-ms-input-placeholder, .p-contact__form textarea:-ms-input-placeholder {
color: #ccc;
letter-spacing: 0.05em;
}
.p-contact__form input[type=text]::-ms-input-placeholder, .p-contact__form input[type=password]::-ms-input-placeholder, .p-contact__form input[type=datetime]::-ms-input-placeholder, .p-contact__form input[type=date]::-ms-input-placeholder, .p-contact__form input[type=month]::-ms-input-placeholder, .p-contact__form input[type=time]::-ms-input-placeholder, .p-contact__form input[type=week]::-ms-input-placeholder, .p-contact__form input[type=number]::-ms-input-placeholder, .p-contact__form input[type=email]::-ms-input-placeholder, .p-contact__form input[type=url]::-ms-input-placeholder, .p-contact__form input[type=search]::-ms-input-placeholder, .p-contact__form input[type=tel]::-ms-input-placeholder, .p-contact__form input[type=color]::-ms-input-placeholder, .p-contact__form select::-ms-input-placeholder, .p-contact__form textarea::-ms-input-placeholder {
color: #ccc;
letter-spacing: 0.05em;
}
.p-contact__form input[type=text]::placeholder,
.p-contact__form input[type=password]::placeholder,
.p-contact__form input[type=datetime]::placeholder,
.p-contact__form input[type=date]::placeholder,
.p-contact__form input[type=month]::placeholder,
.p-contact__form input[type=time]::placeholder,
.p-contact__form input[type=week]::placeholder,
.p-contact__form input[type=number]::placeholder,
.p-contact__form input[type=email]::placeholder,
.p-contact__form input[type=url]::placeholder,
.p-contact__form input[type=search]::placeholder,
.p-contact__form input[type=tel]::placeholder,
.p-contact__form input[type=color]::placeholder,
.p-contact__form select::placeholder,
.p-contact__form textarea::placeholder {
color: #ccc;
letter-spacing: 0.05em;
}
.p-contact__form input[type=text]:focus,
.p-contact__form input[type=password]:focus,
.p-contact__form input[type=datetime]:focus,
.p-contact__form input[type=date]:focus,
.p-contact__form input[type=month]:focus,
.p-contact__form input[type=time]:focus,
.p-contact__form input[type=week]:focus,
.p-contact__form input[type=number]:focus,
.p-contact__form input[type=email]:focus,
.p-contact__form input[type=url]:focus,
.p-contact__form input[type=search]:focus,
.p-contact__form input[type=tel]:focus,
.p-contact__form input[type=color]:focus,
.p-contact__form select:focus,
.p-contact__form textarea:focus {
outline: none;
border-color: #0059b3;
-webkit-box-shadow: 0 0 0 3px rgba(0, 89, 179, 0.1);
box-shadow: 0 0 0 3px rgba(0, 89, 179, 0.1);
}
.p-contact__form textarea {
height: 200px;
padding: 1.5rem;
resize: vertical;
line-height: 1.8;
}
.p-contact__form { }
.p-contact__form .p-contact__item {
margin-bottom: 35px;
}
.p-contact__form .p-contact__item label {
display: block;
font-weight: 700;
margin-bottom: 12px;
font-size: 15px;
color: #333;
}
.p-contact__form .p-contact__item label span {
font-size: 0.8em;
color: #b5333e;
margin-left: 6px;
}
.p-contact__form { }
.p-contact__form .p-contact__privacy {
text-align: center;
margin: 50px 0 30px;
}
.p-contact__form .p-contact__privacy label {
font-size: 14px;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
cursor: pointer;
}
.p-contact__form .p-contact__privacy input[type=checkbox] {
width: 18px;
height: 18px;
cursor: pointer;
}
.p-contact__form .p-contact__privacy a {
color: #333;
text-decoration: underline;
}
.p-contact__form .p-contact__privacy a:hover {
color: #0059b3;
}
.p-contact__form { }
.p-contact__form .wpcf7-submit {
display: block;
width: 280px;
margin: 0 auto;
height: 70px;
background-color: #222;
color: #fff;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.2em;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
@media only screen and (max-width: 560px) {
.p-contact__form .wpcf7-submit {
width: 100%;
height: 60px;
font-size: 16px;
}
}
.p-contact__form .wpcf7-submit:hover {
background-color: #0059b3;
}
@media only screen and (max-width: 560px) {
.p-contact__form .wpcf7-submit:hover {
background-color: #222;
}
}
.p-contact__form { }
.p-contact__form .wpcf7-not-valid-tip {
color: #b5333e;
font-size: 12px;
margin-top: 8px;
display: block;
}
.p-contact__form .wpcf7-response-output {
margin-top: 30px;
padding: 15px !important;
border: 1px solid #eee !important;
border-radius: 4px;
text-align: center;
font-size: 14px;
}
.p-contact__form .wpcf7-spinner {
display: block;
margin: 15px auto 0;
}
.privacy {
display: block;
width: 60%;
max-width: 960px;
margin: 0 auto;
}
@media only screen and (max-width: 960px) {
.privacy {
width: 84%;
max-width: 640px;
}
}
.privacy {
margin-bottom: 180px;
}
@media only screen and (max-width: 960px) {
.privacy {
margin-bottom: 100px;
}
}
@media only screen and (max-width: 560px) {
.privacy {
margin-bottom: 80px;
}
}
.privacy {
margin-top: 240px;
}
@media only screen and (max-width: 560px) {
.privacy {
margin-top: 200px;
}
}
.privacy > p {
margin-bottom: 80px;
}
@media only screen and (max-width: 560px) {
.privacy > p {
text-align: justify;
margin-bottom: 25px;
}
}
.privacy dl dt {
font-size: var(--h5);
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: #000 solid 1px;
}
.privacy dl dd {
margin-bottom: 40px;
}
.privacy dl dd p {
text-align: justify;
}
.privacy dl dd p strong {
display: block;
margin: 20px 0 7px;
}
.parallax {
position: relative;
overflow: hidden;
}
.parallax .parallax-in {
width: 100%;
height: 100%;
-webkit-transform: scale(1.25);
transform: scale(1.25);
position: relative;
padding: 150px 8vw 5vh;
}
@media only screen and (max-width: 1023px) {
.parallax .parallax-in {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
.parallax .parallax-in [data-parallax=scrollparallax] {
will-change: transform;
-webkit-transition: none;
transition: none;
position: absolute;
top: 10%;
left: 0;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: 100%;
}
.imgslider {
overflow: hidden;
}
.imgslider .swiper {
height: 100%;
}
.imgslider .swiper .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
.imgslider .swiper .swiper-wrapper .swiper-slide {
width: 30vw;
max-width: 720px;
}
@media only screen and (max-width: 560px) {
.imgslider .swiper .swiper-wrapper .swiper-slide {
width: 45vw;
}
}
.imgslider .swiper .swiper-wrapper .swiper-slide .slide {
height: 100%;
aspect-ratio: 5/4;
}
.imgslider .swiper .swiper-wrapper .swiper-slide .slide .slide-media {
width: 100%;
height: 100%;
}
.imgslider .swiper .swiper-wrapper .swiper-slide .slide .slide-media picture {
width: 100%;
height: 100%;
}
.imgslider .swiper .swiper-wrapper .swiper-slide .slide .slide-media picture img,
.imgslider .swiper .swiper-wrapper .swiper-slide .slide .slide-media picture source {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}