@charset "UTF-8";
 * {
-webkit-text-size-adjust: 100%;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
::before,
::after {
box-sizing: border-box;
border-style: solid;
border-width: 0;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
header,
nav,
main,
footer,
article,
section,
aside,
dl,
dt,
dd,
ul,
li,
ol,
blockquote,
address,
pre,
iframe,
form,
figure,
table,
tr,
th,
td,
tbody {
margin: 0;
padding: 0;
line-height: 1.6;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
ul {
list-style: none;
}
ol {
padding-left: 1rem;
}
dd {
margin-left: 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
border-top-width: 1px;
margin: 0;
clear: both;
color: inherit;
}
pre {
font-size: inherit;
}
a {
text-decoration: none;
color: inherit;
background-color: transparent;
transition: all 0.5s ease-out;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
border: 0;
line-height: 1em;
-ms-interpolation-mode: bicubic;
}
svg,
embed,
object,
iframe {
vertical-align: bottom;
}
button,
input,
optgroup,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
color: inherit;
font: inherit;
border: 0;
background: transparent;
padding: 0;
margin: 0;
outline: 0;
border-radius: 0;
text-align: inherit;
text-transform: inherit;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type=button],
[type=reset],
[type=submit] {
cursor: pointer;
}
button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
cursor: default;
}
[type=checkbox] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
[type=radio] {
-webkit-appearance: radio;
-moz-appearance: radio;
appearance: radio;
}
input[type=text],
input[type=submit] {
border-radius: 0;
}
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
select::-ms-expand {
display: none;
}
option {
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
min-width: 0;
}
textarea {
overflow: auto;
}
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
outline-offset: -2px;
}
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
label[for] {
cursor: pointer;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption {
text-align: left;
}
td,
th {
vertical-align: top;
}
th {
text-align: left;
}
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display: block;
}
address {
font-style: inherit;
}
b,
strong {
font-weight: bolder;
}
embed,
object,
iframe {
border: 0;
vertical-align: bottom;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
code,
kbd,
samp {
font-size: inherit;
}
fieldset {
margin: 0;
padding: 0;
min-width: 0;
}
legend {
padding: 0;
}
progress {
vertical-align: baseline;
}
details {
display: block;
}
summary {
display: list-item;
}
[contenteditable]:focus {
outline: auto;
}
html,
body {
position: relative;
width: 100%;
overflow-x: clip;
color: #222;
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
line-height: 1.6;
}
.section-end {
padding-bottom: 50px;
border-bottom: 1px solid #222;
}
.standard-sec {
width: 100%;
height: auto;
background: #fff;
padding-top: 80px;
padding-bottom: 80px;
}
.standard-sec__contact {
padding-top: 0;
}
.standard-sec.case {
position: relative;
padding-top: 30px;
}
.standard-sec.case .back-to-works {
position: absolute;
bottom: 80px;
left: 50%;
display: block;
width: 200px;
height: 35px;
transform: translateX(-50%);
line-height: 33px;
text-align: center;
font-size: 14px;
font-weight: 500;
padding-left: 30px;
padding-right: 30px;
background-color: #000;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
transition: background 0.3s ease-out, color 0.3s ease-out;
cursor: pointer;
}
.standard-sec.case .back-to-works:hover {
background-color: #fff;
color: #000;
}
.link-text {
padding-bottom: 5px;
color: #4782d3;
background-image: linear-gradient(90deg, #777, #777);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 3px;
transition: background-size 0.3s;
-webkit-transition: background-size 0.3s;
-moz-transition: background-size 0.3s;
-ms-transition: background-size 0.3s;
-o-transition: background-size 0.3s;
}
.link-text:hover {
background-size: 100% 1px;
color: #777;
}
.link-block {
position: relative;
padding: 5px 10px;
color: #000;
transition: all 0.3s ease-in 0.3s;
}
.link-block::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: left bottom;
z-index: -1;
content: "";
}
.link-block::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #000;
transform: scaleY(0);
transform-origin: left bottom;
z-index: -1;
content: "";
}
.link-block:hover {
color: #fff;
}
.link-block:hover::before {
-webkit-animation: linkBlockLine 0.6s linear forwards;
animation: linkBlockLine 0.6s linear forwards;
}
.link-block:hover::after {
-webkit-animation: linkBlockSpace 0.6s linear forwards;
animation: linkBlockSpace 0.6s linear forwards;
}
.sub-menu.open .menu-item a {
position: relative;
padding: 5px 10px 5px 0;
color: #000;
transition: all 0.3s ease-in 0.3s;
}
.sub-menu.open .menu-item a::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
opacity: 0;
background-color: #000;
transform: scaleX(0);
transform-origin: left bottom;
z-index: -1;
content: "";
}
.sub-menu.open .menu-item a::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
border-top: none;
background-color: #000;
transform: scaleY(0);
transform-origin: left bottom;
z-index: -1;
content: "";
}
.sub-menu.open .menu-item a:hover {
color: #fff;
}
.sub-menu.open .menu-item a:hover::before {
opacity: 1;
-webkit-animation: linkBlockLine 0.6s linear forwards;
animation: linkBlockLine 0.6s linear forwards;
}
.sub-menu.open .menu-item a:hover::after {
opacity: 1;
-webkit-animation: linkBlockSpace 0.6s linear forwards;
animation: linkBlockSpace 0.6s linear forwards;
}
#back-to-top {
position: fixed;
bottom: 0;
right: 40px;
z-index: 9999;
display: none;
}
#back-to-top span {
position: absolute;
bottom: 40px;
right: -10px;
display: block;
width: 20px;
height: 80px;
background-image: url(//www.hassei-inc.com/wp-content/uploads/arrow-top.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#back-to-top span::before {
position: absolute;
bottom: 120px;
right: -10px;
display: block;
width: 4px;
height: 20px;
background-color: #2997ff;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
#back-to-top span::after {
position: absolute;
bottom: 5px;
right: 5px;
content: "TOP";
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
color: #2997ff;
font-size: 16px;
font-weight: 500;
}
.link-next {
position: absolute;
bottom: 0;
right: 0;
display: block;
width: 47px;
height: 47px;
border-radius: 50%;
border: 1px solid #000;
background-color: #000;
transform-origin: center;
transition: background-color 0.3s ease-out;
overflow: hidden;
}
.link-next::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 1px solid transparent;
border-radius: 50%;
animation: borderAnim 3s ease-out forwards;
-webkit-animation: borderAnim 3s ease-out forwards;
transform: scale(0.5);
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
opacity: 0;
}
.link-next span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.link-next span::before {
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 0;
height: 0;
transform: translate(-5px, -7px);
transform-origin: center;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 1px solid transparent;
border-left: 14px solid #fff;
content: "";
transition: border-left 0.3s ease-out;
}
.link-next:hover {
background-color: #fff;
}
.link-next:hover span::before {
border-left: 14px solid #000;
}
.link-prev {
display: block;
width: 47px;
height: 47px;
border-radius: 50%;
border: 1px solid #000;
background-color: #000;
transform-origin: center;
transition: background-color 0.3s ease-out;
}
.link-prev span {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.link-prev span::before {
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 0;
height: 0;
transform: translate(-10px, -7px);
transform-origin: center;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 1px solid transparent;
border-right: 14px solid #fff;
content: "";
transition: border-left 0.3s ease-out;
}
.link-prev:hover {
background-color: #fff;
}
.link-prev:hover span::before {
border-right: 14px solid #000;
}
.rainbow-btn {
background: linear-gradient(-45deg, #3f00b5, #9f69fe, #27c8b7, #3f00b5);
background-size: 800% 400%;
padding: 11px 28px;
display: block;
border: none;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: white;
transition: all 0.5s ease-in-out;
-webkit-animation: gradient 10s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99) both;
animation: gradient 10s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99) both;
}
.rainbow-btn:hover {
-webkit-animation: gradient 3s infinite;
animation: gradient 3s infinite;
transform: scale(1.05);
}
.text-gradation {
background: linear-gradient(180deg, #00ffff, #29abe2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
color: #acb6e5;
}
#breadcrumbs {
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
@media screen and (max-width: 767px) {
#breadcrumbs {
display: none;
}
}
#breadcrumbs.bg-dark {
color: #fff;
}
.hero #breadcrumbs {
padding-top: 126px;
}
.slick-arrow {
position: absolute;
display: block;
width: 40px;
height: 40px;
z-index: 50;
}
.slick-arrow.slick-prev {
left: 0;
top: calc(50% - 10px);
width: 40px;
height: 40px;
}
.slick-arrow.slick-next {
right: -10px;
top: calc(50% - 10px);
width: 40px;
height: 40px;
}
.pagination .nav-links {
padding-top: 20px;
padding-bottom: 20px;
}
.pagination .nav-links .page-numbers {
padding: 10px 20px;
margin-right: 10px;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
font-size: 14px;
font-weight: 700;
text-align: center;
}
.pagination .nav-links .page-numbers.current {
background-color: #000;
color: #fff;
}
.pagination-single {
display: flex;
justify-content: space-between;
width: 100%;
}
.pagination-single .btn {
display: inline-block;
padding: 5px 30px;
border: 1px solid #000;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease-out;
}
.pagination-single .btn:hover {
color: #fff;
background-color: #000;
}
.pagination-single .btn.inactive {
border: none;
cursor: default;
color: #000;
background-color: transparent;
}
@-webkit-keyframes hero2SlideUp {
0% {
transform: translateY(400px);
-webkit-transform: translateY(400px);
-moz-transform: translateY(400px);
-ms-transform: translateY(400px);
-o-transform: translateY(400px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@keyframes hero2SlideUp {
0% {
transform: translateY(400px);
-webkit-transform: translateY(400px);
-moz-transform: translateY(400px);
-ms-transform: translateY(400px);
-o-transform: translateY(400px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-webkit-keyframes bgGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes bgGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@-webkit-keyframes borderAnim {
from {
transform: scale(0.5); opacity: 0;
}
to {
transform: scale(1); opacity: 1;
}
}
@keyframes borderAnim {
from {
transform: scale(0.5); opacity: 0;
}
to {
transform: scale(1); opacity: 1;
}
}
@-webkit-keyframes navModalOpen {
0% {
transform: scaleY(0);
opacity: 0;
visibility: hidden;
z-index: -1;
}
100% {
transform: scaleY(1);
opacity: 1;
visibility: visible;
z-index: 30;
}
}
@keyframes navModalOpen {
0% {
transform: scaleY(0);
opacity: 0;
visibility: hidden;
z-index: -1;
}
100% {
transform: scaleY(1);
opacity: 1;
visibility: visible;
z-index: 30;
}
}
@-webkit-keyframes dropDownMenu {
0% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
@keyframes dropDownMenu {
0% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
@-webkit-keyframes closeMenu {
0% {
transform: scaleY(1);
opacity: 1;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
@keyframes closeMenu {
0% {
transform: scaleY(1);
opacity: 1;
}
100% {
transform: scaleY(0);
opacity: 0;
}
}
@-webkit-keyframes homeHeadingSlide01 {
0% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
-moz-transform: translateY(190px);
-ms-transform: translateY(190px);
-o-transform: translateY(190px);
}
25% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
75% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@keyframes homeHeadingSlide01 {
0% {
transform: translateY(190px);
-webkit-transform: translateY(190px);
-moz-transform: translateY(190px);
-ms-transform: translateY(190px);
-o-transform: translateY(190px);
}
25% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
75% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@-webkit-keyframes homeHeadingSlide02 {
0% {
transform: translateY(270px);
-webkit-transform: translateY(270px);
-moz-transform: translateY(270px);
-ms-transform: translateY(270px);
-o-transform: translateY(270px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@keyframes homeHeadingSlide02 {
0% {
transform: translateY(270px);
-webkit-transform: translateY(270px);
-moz-transform: translateY(270px);
-ms-transform: translateY(270px);
-o-transform: translateY(270px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@-webkit-keyframes homeHeadingSlide03 {
0% {
transform: translateY(420px);
-webkit-transform: translateY(420px);
-moz-transform: translateY(420px);
-ms-transform: translateY(420px);
-o-transform: translateY(420px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@keyframes homeHeadingSlide03 {
0% {
transform: translateY(420px);
-webkit-transform: translateY(420px);
-moz-transform: translateY(420px);
-ms-transform: translateY(420px);
-o-transform: translateY(420px);
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
}
@-webkit-keyframes homeHeroWrapHeight {
0% {
top: calc(50% - 116px);
}
100% {
top: 25vh;
}
}
@keyframes homeHeroWrapHeight {
0% {
top: calc(50% - 116px);
}
100% {
top: 25vh;
}
}
@-webkit-keyframes homeHeroView {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes homeHeroView {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes movieSlideUp {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0;
}
66% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1;
}
}
@keyframes movieSlideUp {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0;
}
66% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 0;
}
100% {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes movieBgSlideUp {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0.35;
}
50% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.35;
}
90% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.35;
}
100% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0;
}
}
@keyframes movieBgSlideUp {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0.35;
}
50% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.35;
}
90% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.35;
}
100% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0;
}
}
@-webkit-keyframes movieBgSlideUp02 {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0.65;
}
50% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.65;
}
90% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.65;
}
100% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0;
}
}
@keyframes movieBgSlideUp02 {
0% {
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
opacity: 0.65;
}
50% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.65;
}
90% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0.65;
}
100% {
transform: translateY(2px);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
opacity: 0;
}
}
@-webkit-keyframes bgMovieView {
0% {
background-color: #000;
z-index: 999;
}
100% {
background-color: transparent;
z-index: -1;
}
}
@keyframes bgMovieView {
0% {
background-color: #000;
z-index: 999;
}
100% {
background-color: transparent;
z-index: -1;
}
}
@-webkit-keyframes scrollDown {
0% {
transform: translate(-50%, 0);
opacity: 0;
}
50% {
transform: translate(-50%, 150%);
opacity: 1;
}
100% {
transform: translate(-50%, 300%);
opacity: 0;
}
}
@keyframes scrollDown {
0% {
transform: translate(-50%, 0);
opacity: 0;
}
50% {
transform: translate(-50%, 150%);
opacity: 1;
}
100% {
transform: translate(-50%, 300%);
opacity: 0;
}
}
@-webkit-keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
@keyframes drawCircle {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes linkBlockLine {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
100% {
transform: scaleX(1);
}
}
@keyframes linkBlockLine {
0% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
100% {
transform: scaleX(1);
}
}
@-webkit-keyframes linkBlockSpace {
0% {
transform: scaleY(0);
}
50% {
transform: scaleY(0);
}
100% {
transform: scaleX(1);
}
}
@keyframes linkBlockSpace {
0% {
transform: scaleY(0);
}
50% {
transform: scaleY(0);
}
100% {
transform: scaleX(1);
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes topNavBackground {
0% {
opacity: 0;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
}
25% {
opacity: 1;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
}
50% {
opacity: 1;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
-o-border-radius: 9999px;
}
100% {
opacity: 1;
transform: scaleX(1);
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
}
}
@keyframes topNavBackground {
0% {
opacity: 0;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
}
25% {
opacity: 1;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
}
50% {
opacity: 1;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
-o-border-radius: 9999px;
}
100% {
opacity: 1;
transform: scaleX(1);
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
}
}
@-webkit-keyframes loadingSlideUp {
0% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
}
100% {
transform: scaleY(0);
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
}
}
@keyframes loadingSlideUp {
0% {
transform: scaleY(1);
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
}
100% {
transform: scaleY(0);
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
}
}
@-webkit-keyframes loadingLogoAction {
0% {
fill: #fff;
}
100% {
fill: #00007a;
}
}
@keyframes loadingLogoAction {
0% {
fill: #fff;
}
100% {
fill: #00007a;
}
}
@-webkit-keyframes sizeChange {
0% {
max-width: 100%;
border-radius: 0;
}
100% {
max-width: 1230px;
border-radius: 40px;
}
}
@keyframes sizeChange {
0% {
max-width: 100%;
border-radius: 0;
}
100% {
max-width: 1230px;
border-radius: 40px;
}
}
.f-heading--underline {
padding-bottom: 10px;
border-bottom: 1px solid #4d4d4d;
}
.f-heading__label {
color: #00007a;
font-size: 16px;
font-weight: 500;
}
.f-heading__label-img {
display: block;
margin-left: auto;
margin-right: auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: 46px;
margin-bottom: 10px;
}
.f-heading__label-img img {
display: block;
height: 100%;
width: auto;
}
.f-heading__secondary {
font-size: clamp(1.25rem, 0.815rem + 2.17vw, 2.5rem);
font-weight: 500;
text-align: center;
}
.f-heading__secondary-recent-post {
font-size: 60px;
font-weight: 500;
margin-bottom: 10px;
}
.f-heading__secondary-recruit-data {
margin-bottom: 50px;
font-size: clamp(1.25rem, 0.902rem + 1.74vw, 2.25rem);
font-weight: 500;
color: #fff;
text-align: left;
}
.f-heading__secondary-recruit-data .f-heading__label {
text-align: left;
}
.f-heading__secondary-job-details {
margin-bottom: 50px;
font-size: 36px;
font-weight: 500;
text-align: left;
}
.l-section {
padding-top: 80px;
padding-bottom: 80px;
}
.l-section--bg-white {
background-color: #fff;
}
.l-section--top-information {
position: relative;
z-index: 999;
margin-bottom: 0;
padding-bottom: 0;
}
.l-section--top-news {
position: relative;
z-index: 999;
}
.l-section--top-project {
position: relative;
z-index: 999;
}
.l-sectionbreadcrumb {
margin-top: -160px;
}
.l-section-single__fv {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
width: 100%;
height: 200px;
background: linear-gradient(-45deg, #29abe2, #0071bc, #b8bdd3, #29abe2);
background-size: 800% 400%;
transition: all 1s ease-in-out;
-webkit-animation: gradient 20s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99) both;
animation: gradient 20s infinite cubic-bezier(0.62, 0.28, 0.23, 0.99) both;
border-bottom: 20px solid #0071bc;
}
.l-section-single__fv--inner {
transform: translateY(20px);
}
.l-section-single--background-fv {
display: block;
width: 100%;
height: 50px;
}
.l-section__sidebar-recent-post {
background-color: #f2f2f2;
}
.l-section-female-thriving {
padding-top: 5%;
padding-bottom: 10%;
}
@media screen and (max-width: 1800px) {
.l-section-female-thriving {
margin-top: 0;
}
}
.l-section-recruit__fv2 {
width: 100%;
height: 100vh;
}
.l-section-recruit__leader {
position: relative;
padding-top: 10%;
padding-bottom: 10%;
margin-top: 50px;
z-index: 10;
background-color: #fff;
}
.l-section-recruit-data {
margin-top: -80px;
background-color: #29abe2;
}
.l-section-leader {
margin-top: 160px;
}
.l-section-job-details {
background-color: #fff;
}
.l-section-tv {
padding-top: 100px;
padding-bottom: 100px;
background-color: #0071bc;
}
@media screen and (max-width: 1280px) {
.l-section-tv {
padding-top: 80px;
padding-bottom: 80px;
}
}
@media screen and (max-width: 911px) {
.l-section-tv {
padding-top: 60px;
padding-bottom: 60px;
}
}
@media screen and (max-width: 767px) {
.l-section-tv {
padding-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (max-width: 540px) {
.l-section-tv {
padding-top: 30px;
padding-bottom: 30px;
}
}
.container,
.l-container {
display: block;
width: 100%;
max-width: 1230px;
margin-left: auto;
margin-right: auto;
padding-left: 60px;
padding-right: 60px;
}
@media screen and (max-width: 991px) {
.container,
.l-container {
max-width: 960px;
}
}
@media screen and (max-width: 767px) {
.container,
.l-container {
max-width: 720px;
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 540px) {
.container,
.l-container {
padding-left: 15px;
padding-right: 15px;
}
}
.container--outer,
.l-container--outer {
max-width: 1920px;
padding-left: 60px;
padding-right: 60px;
}
@media screen and (max-width: 767px) {
.container--outer,
.l-container--outer {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 540px) {
.container--outer,
.l-container--outer {
padding-left: 15px;
padding-right: 15px;
}
}
.outer-container,
.l-outer-container {
display: block;
width: 100%;
max-width: 1260px;
padding-left: 60px;
padding-right: 60px;
margin-left: auto;
margin-right: auto;
}
.outermost-container {
display: block;
width: 100%;
max-width: 1920px;
padding-left: 60px;
padding-right: 60px;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.outermost-container {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 540px) {
.outermost-container {
padding-left: 15px;
padding-right: 15px;
}
}
.breadcrumbs-container {
display: block;
width: 100%;
max-width: 1920px;
padding-left: 60px;
padding-right: 60px;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.breadcrumbs-container {
padding-left: 60px;
padding-right: 60px;
}
}
@media screen and (max-width: 540px) {
.breadcrumbs-container {
padding-left: 45px;
padding-right: 45px;
}
}
.inner-container {
display: block;
width: 100%;
max-width: 800px;
padding-left: 25px;
padding-right: 25px;
margin-left: auto;
margin-right: auto;
}
.c-breadcrumb {
position: absolute;
top: 90px;
left: 0;
display: block;
width: 100%;
height: auto;
color: #fff;
font-size: 14px;
z-index: 3;
}
.c-breadcrumb-single {
top: 110px;
}
.c-breadcrumb-single #breadcrumbs {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
max-width: 100%;
font-size: 14px;
font-weight: 500;
}
.c-breadcrumb-single p span {
padding-left: 10px;
padding-right: 10px;
}
.c-breadcrumb--recruit {
top: 186px;
}
.c-link--with-arrow {
position: relative;
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-top: 50px;
margin-bottom: 50px;
}
.c-link--with-arrow .line {
color: #222;
font-size: 18px;
font-weight: 500;
}
.c-link--with-arrow svg {
position: absolute;
right: -40px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 1.5rem;
height: 1.5rem;
}
.c-link--with-arrow svg circle {
fill: #000;
}
.c-link--with-arrow svg .cls-1 {
fill: #fff;
transform: translateX(-5px);
transition: transform 0.3s ease-out;
}
.c-link--with-arrow:hover svg .cls-1 {
transform: translateX(5px);
}
.c-button {
display: inline-block;
padding: 10px 30px;
color: #fff;
background-color: #000;
border: 1px solid #000;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease-out;
}
.c-button:hover {
color: #000;
background-color: #fff;
}
.c-banner-recruit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1920/750;
background-image: url(//www.hassei-inc.com/wp-content/uploads/cta_recruit_img-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: 0;
}
@media screen and (max-width: 767px) {
.c-banner-recruit {
aspect-ratio: unset;
height: 550px;
background-attachment: inherit;
}
}
.c-banner-recruit::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
z-index: 1;
content: "";
}
.c-banner-recruit__inner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1920px;
padding-left: 60px;
padding-right: 60px;
margin-right: auto;
margin-left: auto;
z-index: 2;
}
@media screen and (max-width: 767px) {
.c-banner-recruit__inner {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 540px) {
.c-banner-recruit__inner {
padding-left: 15px;
padding-right: 15px;
}
}
.c-banner-recruit__title {
font-size: clamp(1.25rem, 0.772rem + 2.39vw, 2.625rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 20px;
color: #fff;
text-align: center;
}
@media screen and (max-width: 1024px) {
.c-banner-recruit__title {
padding-top: 7vw;
}
}
.c-banner-recruit__lead {
font-size: clamp(0.875rem, 0.701rem + 0.87vw, 1.375rem);
font-weight: 500;
line-height: 1.4;
margin-bottom: 7vw;
color: #fff;
}
.c-banner-recruit__link {
display: flex;
padding-bottom: 20px;
align-items: center;
margin-bottom: 0;
text-align: center;
text-decoration: none;
}
.c-banner-recruit__link .line {
color: #fff;
padding-right: 20px;
font-size: clamp(1rem, 0.957rem + 0.22vw, 1.125rem);
font-weight: 500;
}
.c-banner-recruit__link-arrow {
display: block;
width: 35px;
height: 35px;
}
.c-banner-recruit__link-arrow circle {
fill: #fff;
}
.c-banner-recruit__link-arrow .cls-1 {
fill: #000;
}
.c-banner-recruit__link:hover .c-banner-recruit__link-arrow .cls-1 {
transform: translateX(5px);
transition: transform 0.3s ease;
}
.form-wrap {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.form-wrap .wpcf7 .wpcf7-form p {
position: relative;
margin-bottom: 28px;
}
.form-wrap .wpcf7 .wpcf7-form p label {
position: absolute;
padding-left: 10px;
padding-right: 15px;
font-size: 0.75rem;
background-color: #fff;
transition: all 0.3s ease-out;
top: 5px;
left: 15px;
color: #4782d3;
z-index: 5;
}
.form-wrap .wpcf7 .wpcf7-form p label .required {
position: absolute;
color: #f00;
font-size: 1.25rem;
}
.form-wrap .wpcf7 .wpcf7-form p label.active {
top: 5px;
left: 15px;
color: #4782d3;
z-index: 5;
}
.form-wrap .wpcf7 .wpcf7-form p .form-box {
position: relative;
display: block;
width: 100%;
height: 60px;
margin-top: -10px;
padding: 12px;
color: #808080;
font-size: 0.75rem;
border: 1px solid #c6c6c6;
z-index: 1;
}
.form-wrap .wpcf7 .wpcf7-form p .form-box.wpcf7-textarea {
height: 200px;
}
.form-wrap .wpcf7 .wpcf7-form p .form-box-half {
display: inline-block;
width: 40%;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox {
margin-bottom: 20px;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-checkbox-button .wpcf7-list-item {
display: block;
margin: 5px 0 5px 1rem;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-checkbox-button .wpcf7-list-item::after {
content: "\a";
white-space: pre-wrap;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-checkbox-button .wpcf7-list-item input[type=checkbox] {
position: relative;
width: 1.5rem;
height: 1.5rem;
border: 1px solid #868686;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
box-shadow: inset 0 0 0 4px #fff;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-checkbox-button .wpcf7-list-item input[type=checkbox]:checked {
border: none;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-checkbox-button .wpcf7-list-item input[type=checkbox]:checked:before {
position: absolute;
top: 0;
left: 0;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
content: "";
border-left: 2px solid #4782d3;
border-bottom: 4px solid #4782d3;
border-top: 1px solid rgba(0, 0, 0, 0);
border-right: 1px solid rgba(0, 0, 0, 0);
transform: rotate(-45deg) scaleY(0.5);
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox label {
position: relative;
top: 0;
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
color: #808080;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-checkbox label.active {
top: 0;
left: 5px;
color: #808080;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio {
margin-bottom: 20px;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-radio-button .wpcf7-list-item {
margin: 5px 0 5px 1rem;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-radio-button .wpcf7-list-item input[type=radio] {
position: relative;
width: 1.5rem;
height: 1.5rem;
border: 1px solid #868686;
border-radius: 50%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
vertical-align: middle;
box-shadow: inset 0 0 0 4px #fff;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio .wpcf7-form-control-wrap .wpcf7-form-control.c-form__item-radio-button .wpcf7-list-item input[type=radio]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1rem;
height: 1rem;
border-radius: 50%;
background: #4782d3;
content: "";
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio label {
position: relative;
top: 0;
display: block;
margin-bottom: 10px;
font-size: 16px;
font-weight: 500;
color: #808080;
}
.form-wrap .wpcf7 .wpcf7-form p.c-form__item-radio label.active {
top: 0;
left: 5px;
color: #808080;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap {
display: flex;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control {
margin-right: 10px;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-submit {
position: relative;
display: inline-block;
margin-bottom: 5px;
padding: 14px 50px;
text-align: center;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: white;
background: #4782d3;
cursor: pointer;
transition: ease-in 0.35s;
border: 2px solid white;
border-radius: 50px;
box-shadow: inset 0 0 0 0 white;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-submit:hover {
color: #4782d3;
box-shadow: inset 0 -100px 0 0 white;
border: 2px solid #4782d3;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap p .reset-btn {
position: relative;
display: inline-block;
margin-bottom: 5px;
padding: 14px 50px;
text-align: center;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: #fff;
background: #333;
cursor: pointer;
transition: ease-in 0.35s;
border: 2px solid #333;
border-radius: 50px;
box-shadow: inset 0 0 0 0 #fff;
}
.form-wrap .wpcf7 .wpcf7-form .submit-wrap p .reset-btn:hover {
color: #333;
box-shadow: inset 0 -100px 0 0 #fff;
border: 2px solid #333;
}
.confirm-wrap {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.confirm-wrap .wpcf7 .wpcf7-form p {
padding: 12px;
margin-bottom: 0;
color: #808080;
border: none;
font-size: 0.75rem;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap {
padding-top: 30px;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p {
display: flex;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control {
margin-left: 10px;
margin-right: 10px;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-previous {
position: relative;
display: inline-block;
margin-bottom: 5px;
padding: 14px 50px;
text-align: center;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: white;
background: #777;
cursor: pointer;
transition: ease-in 0.35s;
border: 2px solid white;
border-radius: 50px;
box-shadow: inset 0 0 0 0 white;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-previous:hover {
color: #777;
box-shadow: inset 0 -100px 0 0 white;
border: 2px solid #777;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-submit {
position: relative;
display: inline-block;
margin-bottom: 5px;
padding: 14px 50px;
text-align: center;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: white;
background: #4782d3;
cursor: pointer;
transition: ease-in 0.35s;
border: 2px solid white;
border-radius: 50px;
box-shadow: inset 0 0 0 0 white;
}
.confirm-wrap .wpcf7 .wpcf7-form .submit-wrap p .wpcf7-form-control.wpcf7-submit:hover {
color: #4782d3;
box-shadow: inset 0 -100px 0 0 white;
border: 2px solid #4782d3;
}
.c-form__title {
font-size: 24px;
font-weight: 500;
margin-top: 20px;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 5px solid #0071bc;
}
.c-card {
gap: 40px;
}
.c-card__category a {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c-card__item {
display: flex;
flex-direction: column;
}
.c-card__img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 16/9;
border-radius: 10px;
margin-bottom: 40px;
overflow: hidden;
}
.c-card__img-home {
margin-bottom: 10px;
}
.c-card__img img {
display: block;
min-width: 100%;
min-height: 100%;
}
.c-card__title {
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: #4d4d4d;
font-size: clamp(1.25rem, 0.413rem + 1.06vw, 1.688rem);
font-weight: 700;
margin-bottom: 20px;
}
@media screen and (max-width: 1260px) {
.c-card__title {
font-size: clamp(1.125rem, 0.929rem + 0.98vw, 1.688rem);
}
}
.c-card__meta {
display: flex;
font-size: 16px;
} .js-slider-recent-post {
width: 100%;
max-width: 100%;
overflow: hidden;
} .js-slider-recent-post .slick-slide {
padding: 0 10px; box-sizing: border-box;
} .js-slider-recent-post .slick-track {
display: flex !important;
will-change: transform;
} .js-slider-recent-post .slick-slide > div {
height: 100%;
}
.c-media {
display: grid;
grid-template-columns: 48% 48%;
gap: 4%;
}
.c-media-tv {
gap: 0;
}
@media screen and (max-width: 991px) {
.c-media-tv {
grid-template-columns: 100%;
gap: 30px;
}
}
.c-media-tv .c-media__content {
display: flex;
align-items: center;
padding-left: 40px;
color: #fff;
}
@media screen and (max-width: 991px) {
.c-media-tv .c-media__content {
padding-left: 0;
}
}
.c-media-tv .c-media__title {
font-size: clamp(1.75rem, 1.319rem + 0.69vw, 1.875rem);
font-weight: 500;
line-height: 1.4;
margin-bottom: 20px;
}
@media screen and (max-width: 991px) {
.c-media-tv .c-media__title {
font-size: clamp(1.25rem, 1.012rem + 1.19vw, 1.75rem);
}
}
.c-media-tv .c-media__text-item {
margin-bottom: 5px;
font-size: 15px;
font-weight: 500;
}
.c-media-tv .c-media__link-text {
padding-bottom: 2px;
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 3px;
transition: background-size 0.3s ease-out, color 0.3s ease-out;
-webkit-transition: background-size 0.3s;
-moz-transition: background-size 0.3s;
-ms-transition: background-size 0.3s;
-o-transition: background-size 0.3s;
color: #fff;
background-image: linear-gradient(90deg, #f2f2f2, #f2f2f2);
}
.c-media-tv .c-media__link-text:hover {
background-size: 100% 1px;
color: #f2f2f2;
}
.c-media-tv .c-media__note {
font-size: 14px;
}
.c-media-tv .c-media__img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
}
.c-media-tv .c-media__img .c-media__link {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
aspect-ratio: 16/9;
border-radius: 20px;
overflow: hidden;
z-index: 2;
}
.c-media-tv .c-media__img .c-media__link-thumb {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: auto;
filter: blur(0);
transition: filter 0.3s ease-out;
z-index: 1;
}
.c-media-tv .c-media__img .c-media__link-button {
position: relative;
display: block;
width: 80px;
height: 80px;
transform-origin: center center;
transform: scale(1);
transition: transform 0.3s ease-out;
z-index: 3;
}
@media screen and (max-width: 767px) {
.c-media-tv .c-media__img .c-media__link-button {
width: 60px;
height: 60px;
}
}
@media screen and (max-width: 540px) {
.c-media-tv .c-media__img .c-media__link-button {
width: 40px;
height: 40px;
}
}
.c-media-tv .c-media__img .c-media__link:hover .c-media__link-button {
transform: scale(1.2);
}
.c-media-tv .c-media__img .c-media__link:hover .c-media__link-thumb {
filter: blur(4px);
}
.c-media__content {
display: block;
}
.c-media__img {
display: block;
}
.c-grid {
display: grid;
}
.c-grid--2col {
grid-template-columns: repeat(2, 48%);
gap: 4%;
}
@media screen and (max-width: 767px) {
.c-grid--2col {
grid-template-columns: 100%;
}
}
.c-grid--3col {
grid-template-columns: repeat(3, 32%);
gap: 2%;
}
@media screen and (max-width: 991px) {
.c-grid--3col {
grid-template-columns: 100%;
}
}
@media screen and (max-width: 991px) {
.c-grid--3col-post {
grid-template-columns: repeat(2, 48%);
gap: 1% 4%;
}
}
@media screen and (max-width: 767px) {
.c-grid--3col-post {
grid-template-columns: 100%;
gap: 20px;
}
}
@media screen and (max-width: 1280px) {
.c-grid--3col-post .c-card__item {
height: calc((100vw - 120px) * 0.32 / 16 * 9 + 165px);
}
}
@media screen and (max-width: 991px) {
.c-grid--3col-post .c-card__item {
height: calc((100vw - 120px) * 0.48 / 16 * 9 + 165px);
}
}
@media screen and (max-width: 767px) {
.c-grid--3col-post .c-card__item {
height: calc((100vw - 60px) / 16 * 9 + 140px);
}
}
@media screen and (max-width: 540px) {
.c-grid--3col-post .c-card__item {
height: calc((100vw - 30px) / 16 * 9 + 135px);
}
}
.c-grid--7-3 {
grid-template-columns: 68% 30%;
gap: 2%;
}
.c-grid--single {
grid-template-columns: 380px 1fr;
grid-template-areas: "sidebar main";
gap: 30px;
}
@media screen and (max-width: 1260px) {
.c-grid--single {
grid-template-columns: 100%;
grid-template-areas: "main" "sidebar";
}
}
.c-grid--recent-post {
grid-template-columns: 380px 1fr;
grid-template-areas: "head slider";
gap: 30px;
}
@media screen and (max-width: 1260px) {
.c-grid--recent-post {
grid-template-columns: 100%;
grid-template-areas: "head" "slider";
}
}
@media screen and (max-width: 991px) {
.c-grid--7-3 {
grid-template-columns: 100%;
gap: 2%;
}
}
.c-accordion__trigger {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 30px 20px 30px 20px;
font-size: clamp(1.125rem, 1.036rem + 0.45vw, 1.25rem);
font-weight: 700;
cursor: pointer;
text-align: left;
border-bottom: 1px solid #222;
transition: background 0.4s ease-out;
}
@media screen and (max-width: 540px) {
.c-accordion__trigger {
padding: 30px 20px 30px 0;
}
}
.c-accordion__trigger-label {
font-size: 12px;
font-weight: 400;
}
.c-accordion__trigger-icon {
display: block;
width: 30px;
height: 30px;
}
.c-accordion__trigger-icon img {
transform-origin: center;
transition: transform 0.4s ease-out;
}
.c-accordion__trigger--with-child {
padding-left: 60px;
}
.c-accordion__trigger--with-child::before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 48px;
height: 60px;
padding-left: 40px;
transform: translateY(-50%);
background: url(//www.hassei-inc.com/wp-content/uploads/icon_docs-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
content: "";
}
.c-accordion__trigger--with-child .c-accordion__trigger-icon {
width: 50px;
height: 50px;
}
@media screen and (max-width: 911px) {
.c-accordion__trigger--with-child .c-accordion__trigger-icon {
width: 40px;
height: 40px;
}
}
@media screen and (max-width: 767px) {
.c-accordion__trigger--with-child .c-accordion__trigger-icon {
width: 30px;
height: 30px;
}
}
.c-accordion__trigger--with-child .c-accordion__trigger-icon img {
transform-origin: center;
transition: transform 0.4s ease-out;
}
.c-accordion__trigger:hover .c-accordion__trigger-icon img {
transform: rotate(45deg);
}
.c-accordion__trigger.is-open .c-accordion__trigger-icon img {
transform: rotate(45deg);
}
.c-accordion__trigger-recruitment {
color: #0071bc;
font-weight: 700;
}
.c-accordion__panel {
max-height: 0;
overflow: hidden;
transform-origin: top;
transform: scaleY(0);
opacity: 0;
transition: transform 0.4s ease-out, max-height 0.4s ease-out, opacity 0.3s ease-out 0.1s;
margin-left: 40px;
}
.c-accordion__panel.is-open {
transform: scaleY(1);
opacity: 1;
max-height: 3000px;
transition: transform 0.4s ease-out, max-height 0.4s ease-out, opacity 0.4s ease-out;
}
.c-modal-trigger {
position: relative;
border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
.c-modal-trigger__link {
display: block;
position: relative;
width: 100%;
height: 100%;
color: #fff;
z-index: 6;
}
.c-modal-trigger__link-icon {
display: inline-block;
width: 30px;
height: 30px;
padding: 7px;
margin-left: 20px;
vertical-align: middle;
background-color: #fff;
border-radius: 50%;
}
.c-modal-trigger__link-icon img {
display: block;
width: 100%;
height: auto;
transition: transform 0.3s ease-out;
}
.c-modal-trigger__link:hover .c-modal-trigger__background {
transform: scale(1.08);
}
.c-modal-trigger__link:hover .c-modal-trigger__img-background {
transform: scale(1.1);
}
.c-modal-trigger__link:hover .c-modal-trigger__link-icon img {
transform: translateX(5px);
}
.c-modal-trigger__title {
font-size: clamp(1.5rem, 0.958rem + 2.71vw, 3.125rem);
font-weight: 700;
line-height: 1;
margin-bottom: 10px;
}
.c-modal-trigger__title span {
display: block;
margin-bottom: clamp(0.313rem, 0.208rem + 0.52vw, 0.625rem);
font-size: clamp(0.875rem, 0.688rem + 0.94vw, 1.438rem);
line-height: 1;
color: #000;
}
.c-modal-trigger__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
z-index: 3;
}
.c-modal-trigger__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: transform 0.5s ease-out;
transform-origin: bottom center;
z-index: 3;
}
.c-modal-trigger__text-wrap {
position: relative;
padding: clamp(0.938rem, 4.69vw, 3.75rem);
z-index: 5;
}
.c-modal__target {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
opacity: 0;
transform: scale(0);
transform-origin: bottom center;
transition: opacity 0.4s ease-out, transform 0.4s ease-out;
z-index: 1000;
}
.c-modal__target.is-open {
transform: scale(1);
opacity: 1;
}
.c-modal__overlay {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 90;
}
.c-modal__content {
position: relative;
display: block;
padding-left: 0;
padding-right: 0;
overflow: auto;
z-index: 95;
aspect-ratio: 16/9;
max-width: 95vw;
max-height: 95vh;
}
.c-modal__content.is-width-constrained {
width: 95vw;
height: 53.4375vw;
}
.c-modal__content.is-height-constrained {
height: 95vh;
width: 168.8888888889vh;
}
.c-modal__content-wrap {
width: 100%;
height: 100%;
}
.c-modal__content-wrap .c-modal__video {
display: block;
width: 100%;
height: 100%;
}
.c-modal__content-wrap .c-modal__video iframe {
display: block;
width: 100%;
height: 100%;
}
.c-modal__button-close {
position: absolute;
z-index: 99;
top: 20px;
right: 20px;
display: block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url(https://www.hassei-inc.com/wp-content/uploads/btn_close-white.svg);
}
.c-scale-img {
position: relative;
width: 100%;
overflow: hidden;
}
.c-scale-img__wrapper {
width: 100%;
border-radius: 40px;
transition: transform 0.3s ease-out;
transform-origin: top center;
will-change: transform;
overflow: hidden;
}
.c-scale-img__wrapper img {
display: block;
width: 100%;
height: auto;
}
.c-reveal-gate {
position: relative;
height: auto;
min-height: 300vh;
overflow-x: hidden;
overflow-y: visible;
scroll-behavior: smooth;
}
.c-reveal-gate__layer {
position: fixed;
top: 0;
left: 0;
display: block;
height: 100%;
width: 100%;
aspect-ratio: 16/9;
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_full.svg);
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
transition: opacity 0.1s linear;
will-change: opacity;
z-index: 10;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
will-change: opacity, transform;
}
@media screen and (max-width: 1800px) {
.c-reveal-gate__layer {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_lg.svg);
}
}
@media screen and (max-width: 1240px) {
.c-reveal-gate__layer {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_md.svg);
}
}
@media screen and (max-width: 991px) {
.c-reveal-gate__layer {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_sm.svg);
}
}
@media screen and (max-width: 767px) {
.c-reveal-gate__layer {
top: 109px !important;
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_xs.svg);
}
}
@media screen and (max-width: 480px) {
.c-reveal-gate__layer {
top: 109px !important;
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_layer_xxs.svg);
}
}
.c-reveal-gate__background {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
aspect-ratio: 16/9;
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv_bg_full.svg);
background-size: auto 100%;
background-position: center center;
background-repeat: no-repeat;
z-index: -1;
transition: opacity 0.2s ease-out, transform 0.2s ease-out;
transform: none !important;
}
@media screen and (max-width: 767px) {
.c-reveal-gate__background {
top: 116px !important;
}
}
.c-reveal-gate__content {
position: relative;
display: flex;
align-items: flex-start;
width: 100%;
min-height: 100vh;
margin-top: 0;
padding-top: 0;
z-index: 5;
}
.c-reveal-gate__content-inner {
width: 100%;
height: auto;
}
.c-reveal-gate__img {
display: block;
}
.box {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16/9;
scroll-behavior: smooth;
margin: 0 auto;
}
@media screen and (max-width: 767px) {
.box {
height: auto;
aspect-ratio: unset;
}
}
.box1-pin-wrapper,
.box2-pin-wrapper,
.box3-pin-wrapper {
position: relative;
width: 100%;
padding-top: 0;
}
.box1,
.box2,
.box3 {
position: relative;
display: block;
width: 100%;
max-width: 100%;
height: 100vh;
margin: 0 auto;
aspect-ratio: 16/9;
transition: max-width 0.3s ease;
overflow: hidden;
}
.box2,
.box3 {
display: block;
width: 100%;
max-width: 100%;
height: 100vh;
margin: 0 auto;
aspect-ratio: 16/9;
transition: max-width 0.3s ease;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.box2,
.box3 {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
height: auto;
aspect-ratio: unset;
}
}
@media screen and (max-width: 767px) {
.box2 .box-img--wrap,
.box3 .box-img--wrap {
position: relative;
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}
}
.box2 .content.box-content,
.box3 .content.box-content {
display: block;
height: auto;
padding-top: 100px;
padding-bottom: 100px;
}
@media screen and (max-width: 767px) {
.box2 .content.box-content,
.box3 .content.box-content {
padding-top: 0;
background-color: #f2f2f2;
}
}
@media screen and (max-width: 767px) {
.box2 .content.box-content .c-scroll-pin__text,
.box3 .content.box-content .c-scroll-pin__text {
color: #222;
}
}
.bg-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 0;
}
.box1 .bg-img {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_003-1.jpg);
}
.box2 .bg-img {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_002.jpg);
}
.box3 .bg-img {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_001.jpg);
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 3;
}
.box-content {
position: relative;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
padding-top: 100vh;
z-index: 4;
color: #fff;
padding: 40px;
}
.c-scroll-pin__text {
font-size: clamp(0.875rem, 0.614rem + 1.3vw, 1.625rem);
font-weight: 500;
line-height: 2.2;
}
@media screen and (max-width: 1240px) {
.c-scroll-pin__text {
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.c-scroll-pin__text {
line-height: 1.6;
}
}
.c-scroll-pin__text .u-font--sm {
font-size: clamp(0.875rem, 0.815rem + 0.3vw, 1rem);
line-height: 1.6;
}
.c-scroll-pin {
position: relative;
height: 100vh;
width: 100%;
}
.c-scroll-pin__background {
position: -webkit-sticky;
position: sticky;
top: 0;
height: 100vh;
width: 100%;
background-size: cover;
background-position: center;
z-index: 1;
overflow: hidden;
transition: border-radius 0.2s ease;
transition: transform 0.2s ease;
border-radius: 0.2s ease-in-out;
border-radius: 0px;
transform-origin: center;
transform: scale(1);
transition: none;
will-change: transform, border-radius;
}
.c-scroll-pin__background--first {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_001-1.jpg);
}
.c-scroll-pin__background--second {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_002-1.jpg);
}
.c-scroll-pin__background--third {
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_img_003-1.jpg);
}
.c-scroll-pin__content {
position: relative;
z-index: 3;
height: 100vh;
display: flex;
align-items: top;
}
.c-scroll-pin__text {
color: #fff;
font-size: clamp(0.875rem, 0.614rem + 1.3vw, 1.625rem);
font-weight: 500;
line-height: 2.2;
transform: translateY(50px);
transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
@media screen and (max-width: 1240px) {
.c-scroll-pin__text {
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.c-scroll-pin__text {
line-height: 1.6;
}
}
.c-scroll-pin__text.is-visible {
transform: translateY(0);
opacity: 1;
}
.c-scroll-pin__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
pointer-events: none;
z-index: 2;
transition: background-color 0.5s ease;
}
.c-split-content__inner {
display: block;
}
.c-split-content__title {
font-size: clamp(1.25rem, 0.902rem + 1.74vw, 2.25rem);
font-weight: 700;
line-height: 1.25;
margin-bottom: 50px;
}
.c-split-content__title-sub {
font-size: 16px;
font-weight: 500;
color: #0071bc;
}
.c-split-content__body {
gap: 5.5vw;
}
.l-footer {
position: relative;
padding-top: 40px;
padding-bottom: 40px;
background: #fff;
z-index: 30;
}
.l-footer-content-wrap {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2%;
justify-content: space-between;
}
@media screen and (max-width: 991px) {
.l-footer-content-wrap {
gap: 50px;
}
}
@media screen and (max-width: 767px) {
.l-footer-content-wrap {
gap: 40px;
}
}
@media screen and (max-width: 540px) {
.l-footer-content-wrap {
gap: 20px;
}
}
.l-footer-content-wrap .l-footer-content-item .l-footer-content-ttl {
position: relative;
display: flex;
align-items: center;
width: 100%;
height: 44px;
font-size: 16px;
font-weight: 700;
color: #4d4d4d;
padding-left: 2rem !important;
margin-bottom: 28px;
border-bottom: 1px solid #999;
}
.l-footer-content-wrap .l-footer-content-item .l-footer-content-ttl::before {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 12px;
height: 12px;
transform: translateY(-50%) rotate(45deg);
border-top: 2px solid #4d4d4d;
border-right: 2px solid #4d4d4d;
content: "";
}
.l-footer-content-wrap .l-footer-content-item .l-footer-content-ttl::after {
position: absolute;
top: 50%;
left: 8px;
display: block;
width: 12px;
height: 12px;
transform: translateY(-50%) rotate(45deg);
border-top: 2px solid #4d4d4d;
border-right: 2px solid #4d4d4d;
content: "";
}
.l-footer-content-wrap .l-footer-content-item .lead {
font-size: 11px;
line-height: 17px;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu#menu-footer-sitemap {
display: flex;
flex-direction: column;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu#menu-footer-sitemap .link-text {
position: relative;
display: inline;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-bottom: clamp(0.313rem, 0.089rem + 1.12vw, 0.625rem);
font-size: clamp(0.75rem, 0.705rem + 0.22vw, 0.813rem);
font-weight: 700;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu#menu-footer-sitemap .link-text span {
padding-left: 20px;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu#menu-footer-sitemap .link-text::before {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 8px;
height: 8px;
transform: translateY(-50%) rotate(45deg);
content: "";
border-top: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu .menu-item {
position: relative;
margin-bottom: 14px;
padding-left: 16px;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu .menu-item a {
font-size: 12px;
line-height: 1;
}
.l-footer-content-wrap .l-footer-content-item .menu-footer-sitemap-container .menu .menu-item::before {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 8px;
height: 8px;
transform: translateY(-50%) rotate(45deg);
content: "";
border-top: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
}
.l-footer-content-wrap .l-footer-content-item dl {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.l-footer-content-wrap .l-footer-content-item dl dt {
width: 24px;
margin-bottom: 11px;
}
.l-footer-content-wrap .l-footer-content-item dl dd {
width: calc(100% - 30px);
font-size: 12px;
margin-bottom: 12px;
}
.l-footer-content-wrap .l-footer-content-item:first-of-type .l-footer-content-ttl {
padding-left: 0 !important;
}
.l-footer-content-wrap .l-footer-content-item:first-of-type .l-footer-content-ttl a {
display: block;
width: 120px;
height: 22px;
}
.l-footer-content-wrap .l-footer-content-item:first-of-type .l-footer-content-ttl a img {
display: block;
width: 100%;
height: auto;
}
.l-footer-content-wrap .l-footer-content-item:first-of-type .l-footer-content-ttl::before {
display: none;
}
.l-footer-content-wrap .l-footer-content-item:first-of-type .l-footer-content-ttl::after {
display: none;
}
.bottom-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 27px;
}
.bottom-wrap .copyright {
font-size: 12px;
}
.bottom-wrap .copyright span {
font-size: 14px;
margin-right: 5px;
}
.bottom-wrap .menu-extra-nav-container .menu {
display: flex;
align-items: center;
}
.bottom-wrap .menu-extra-nav-container .menu .menu-item:first-of-type {
margin-right: 27px;
}
.bottom-wrap .menu-extra-nav-container .menu .menu-item a {
display: inline-block;
font-size: 12px;
}
@media screen and (max-width: 1920px) {
.l-footer-content-wrap .l-footer-content-item .l-footer-case-wrap .works-list li {
height: calc(((100vw - 120px) / 4 - 10px) / 2 / 4 * 3);
}
}
@media screen and (max-width: 991px) {
.l-footer-content-wrap {
flex-wrap: wrap;
}
.l-footer-content-wrap .l-footer-content-item {
width: 100%;
}
.l-footer-content-wrap .l-footer-content-item .l-footer-case-wrap .works-list {
flex-wrap: wrap;
}
.l-footer-content-wrap .l-footer-content-item .l-footer-case-wrap .works-list li {
width: calc(25% - 15px);
height: calc((25vw - 60px) / 4 * 3);
}
}
@media screen and (max-width: 767px) {
.l-footer-content-wrap .l-footer-content-item.item-001 {
margin-bottom: 20px;
}
.l-footer-content-wrap .l-footer-content-item .l-footer-case-wrap .works-list li {
width: calc(50% - 5px);
height: calc((50vw - 60px) / 4 * 3);
}
}
@media screen and (max-width: 540px) {
.bottom-wrap {
flex-wrap: wrap;
flex-direction: column-reverse;
}
}
.l-footer-case-wrap {
width: 100%;
height: auto;
}
.l-footer-case-wrap .works-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 4%;
}
.l-footer-case-wrap .works-list li {
display: block;
width: 100%;
aspect-ratio: 4/3;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.l-footer-case-wrap .works-list li {
border-radius: 5px;
}
}
.l-footer-case-wrap .works-list li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
.l-footer-case-wrap .works-list li a::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(71, 130, 211, 0.8);
transition: all 0.3s ease-out;
opacity: 0;
visibility: hidden;
z-index: -1;
content: "";
}
.l-footer-case-wrap .works-list li a:hover::after {
opacity: 1;
visibility: visible;
z-index: 2;
}
.l-footer-case-wrap .works-list li a img {
display: block;
min-width: 100%;
min-height: 100%;
}
.l-footer__icon-svg {
display: block;
width: 20px;
height: 20px;
margin-right: 10px;
color: #4d4d4d;
}
.loading {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100vh;
background-color: #00007a;
transform-origin: top;
transform: scaleY(1);
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
animation: loadingSlideUp 1s linear 2s forwards;
-webkit-animation: loadingSlideUp 1s linear 2s forwards;
z-index: 998;
}
.l-header {
position: -webkit-sticky;
position: sticky;
top: 0px;
left: 0;
display: block;
width: 100%;
height: 116px;
z-index: 1000;
}
.l-header .l-header-background {
position: fixed;
top: 28px;
width: 1830px;
right: calc((100vw - 1920px) / 2 + 80px);
height: 60px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: rgba(239, 241, 244, 0.5019607843);
border-radius: 9999px;
-webkit-border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
transition: width 1.5s ease-in-out, right 2.5s ease-in-out;
-webkit-transition: width 1.5s ease-in-out, right 2.5s ease-in-out;
-moz-transition: width 1.5s ease-in-out, right 2.5s ease-in-out;
-ms-transition: width 1.5s ease-in-out, right 2.5s ease-in-out;
-o-transition: width 1.5s ease-in-out, right 2.5s ease-in-out;
z-index: -1;
width: 570px;
}
@media screen and (max-width: 1920px) {
.l-header .l-header-background {
right: 80px;
width: 570px;
}
}
@media screen and (max-width: 1024px) {
.l-header .l-header-background {
right: 60px;
}
}
.l-header .sub-menu-background {
position: fixed;
top: 116px;
left: 0;
display: block;
width: 100%;
height: 500px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: rgba(239, 241, 244, 0.5019607843);
z-index: -1;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
-o-transition: opacity 0.5s ease;
}
.l-header .sub-menu-background.active {
visibility: visible;
opacity: 1;
}
.l-header.scrolled .header-background {
width: 1830px;
right: calc((100vw - 1920px) / 2 + 80px);
}
@media screen and (max-width: 1920px) {
.l-header.scrolled .header-background {
width: calc(100% - 90px);
right: 80px;
}
}
@media screen and (max-width: 1024px) {
.l-header.scrolled .header-background {
width: calc(100% - 90px);
right: 60px;
}
}
.l-top-line {
position: fixed;
top: 0;
display: block;
width: 100%;
height: 116px;
transition: top 1s ease-in-out;
}
.l-top-line.hidden {
top: -100%;
}
.l-top-line .l-top-line-wrap {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 100%;
}
.l-top-line .l-top-line-wrap .logo {
display: block;
width: 160px;
height: auto;
padding-top: 44px;
}
@media screen and (max-width: 767px) {
.l-top-line .l-top-line-wrap .logo {
padding-left: 20px;
}
}
.l-top-line .l-top-line-wrap .logo a .c-logo__svg {
display: block;
width: 100%;
height: auto;
}
.l-top-line .l-top-line-wrap .logo a .c-logo__svg .cls-1 {
fill: #ff0000;
}
.l-top-line .l-top-line-wrap .logo a .c-logo__svg .cls-2 {
fill: #00007a;
}
.l-top-line .l-top-line-wrap .logo a .c-logo__svg .cls-1,
.l-top-line .l-top-line-wrap .logo a .c-logo__svg .cls-2 {
stroke-width: 0px;
}
.l-top-line .l-top-line-wrap .logo a img {
display: block;
width: 100%;
height: auto;
}
.l-top-line .l-top-line-wrap .logo {
display: block;
width: 160px;
height: auto;
padding-top: 44px;
}
@media screen and (max-width: 767px) {
.l-top-line .l-top-line-wrap .logo {
padding-left: 20px;
}
}
.l-top-line .l-top-line-wrap .logo.fixed {
position: fixed;
top: 24px;
left: 0;
display: flex;
justify-content: center;
}
.l-top-line .l-top-line-wrap .logo.fixed .l-top-line-wrap {
justify-content: flex-end;
height: 100%;
width: 100%;
max-width: 1024px;
}
.l-top-line .l-top-line-wrap .sp-nav {
position: relative;
display: none;
width: 60px;
height: 60px;
cursor: pointer;
}
.l-top-line .l-top-line-wrap .sp-nav span {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 3px;
background: #4d4d4d;
}
.l-top-line .l-top-line-wrap .sp-nav::before {
position: absolute;
right: 15px;
top: 15px;
display: block;
width: 30px;
height: 3px;
background: #4d4d4d;
content: "";
}
.l-top-line .l-top-line-wrap .sp-nav::after {
position: absolute;
right: 15px;
bottom: 15px;
display: block;
width: 30px;
height: 3px;
background: #4d4d4d;
content: "";
}
.l-top-line .l-top-line-wrap .sp-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: -1;
display: none;
}
.l-top-line .l-top-line-wrap .g-nav {
display: block;
height: 45px;
padding-top: 35px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container {
display: block;
width: 100%;
height: 100%;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: 100%;
padding-left: 30px;
padding-right: 30px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item {
position: relative;
display: block;
margin-right: 11px;
margin-left: 11px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-315 {
display: none;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 {
position: relative;
margin-right: 37px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after {
position: absolute;
top: 50%;
right: -15px;
display: block;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
font-size: 16px;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
content: "+";
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a:hover::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74.current a::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children {
position: relative;
margin-right: 37px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children a::after {
position: absolute;
top: 50%;
right: -15px;
display: block;
font-size: 16px;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
content: "+";
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children a:hover::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children.current-menu-item > a::after, .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children.current-menu-parent > a::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children.current > a::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item a {
display: block;
line-height: 45px;
font-size: 0.8125rem;
color: #222;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item .sub-menu {
display: block;
position: absolute;
top: 55px;
left: -45px;
width: 220px;
padding: 30px;
background: #fff;
box-shadow: 1px 1px 4px #eee, -1px -1px 4px #efefef;
border-radius: 5px;
transform-origin: top;
transform: scaleY(0);
transition: transform 0.3s ease-out;
z-index: 30;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item .sub-menu .menu-item {
line-height: 44px;
margin-right: 0;
margin-left: 0;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item .sub-menu .menu-item a {
position: relative;
display: block;
padding: 0;
font-size: 0.8125rem;
text-align: center;
font-weight: 500;
line-height: 2.4;
color: #222;
background-color: transparent;
cursor: pointer;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item .sub-menu .menu-item a::after {
position: absolute;
right: 2px;
color: #ccc;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item .sub-menu .menu-item a:hover::after {
border-top: 10px solid #999;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children {
position: relative;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children a {
position: relative;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a {
line-height: 50px;
transition: all 0.3s ease-in 0.3s;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0;
border-top: none;
background-color: #000;
transform: scaleY(0);
transform-origin: left bottom;
z-index: -1;
content: "";
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a:hover {
color: #fff;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a:hover::after {
opacity: 1;
-webkit-animation: linkBlockSpace 0.6s linear forwards;
animation: linkBlockSpace 0.6s linear forwards;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu.open {
-webkit-animation: dropDownMenu 0.3s ease-out forwards;
animation: dropDownMenu 0.3s ease-out forwards;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu.close {
-webkit-animation: closeMenu 0.3s ease-out forwards;
animation: closeMenu 0.3s ease-out forwards;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu {
position: relative;
transform: scaleY(0);
transform-origin: top;
opacity: 0;
display: none;
box-shadow: 0 1px 4px #eee;
z-index: -1;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open {
position: fixed;
top: 116px;
left: 0;
display: block;
width: 100vw;
padding: 30px;
-webkit-animation: navModalOpen 0.3s ease-out forwards;
animation: navModalOpen 0.3s ease-out forwards;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu {
display: flex;
justify-content: space-between;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap {
width: 160px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .select-ttl {
font-size: 19px;
font-weight: 500;
border-bottom: 1px solid #000;
line-height: 1;
padding-bottom: 16px;
margin-bottom: 10px;
padding-left: 3px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-links li {
margin-bottom: 30px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-filter li {
margin-bottom: 7px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-filter li .link-block {
font-size: 14px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap {
width: calc(100% - 180px);
overflow-x: hidden;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .select-ttl {
font-size: 19px;
font-weight: 500;
border-bottom: 1px solid #000;
line-height: 1;
padding-bottom: 16px;
margin-bottom: 10px;
padding-left: 3px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider {
display: flex;
width: calc(100% - 40px);
padding-left: 20px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .slick-list.draggable {
width: 100%;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item {
width: calc((100% - 40px) / 5);
margin-right: 10px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item.empty {
background: transparent;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item .works-link {
position: relative;
display: block;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item .works-link .works-head02 {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
opacity: 0;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease-out;
z-index: -1;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item .works-link::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transform: scaleY(0);
transform-origin: top;
background-color: rgba(71, 130, 211, 0.8);
transition: all 0.2s ease-out;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item .works-link:hover .works-head02 {
opacity: 1;
z-index: 40;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item .works-link:hover::after {
transform: scaleY(1);
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item.slick-slide {
position: relative;
}
@media screen and (max-width: 594px) {
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .item.slick-slide img {
width: 100% !important;
height: auto;
}
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .close-btn {
height: 28px;
width: 28px;
position: absolute;
top: 20px;
right: 80px;
border: 1px solid #000;
border-radius: 50%;
cursor: pointer;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .close-btn span {
display: block;
background-color: #000;
width: 20px;
height: 2px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .close-btn span:nth-of-type(1) {
transform: translate(3px, 12px) rotate(45deg);
-webkit-transform: translate(3px, 12px) rotate(45deg);
-moz-transform: translate(3px, 12px) rotate(45deg);
-ms-transform: translate(3px, 12px) rotate(45deg);
-o-transform: translate(3px, 12px) rotate(45deg);
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .close-btn span:nth-of-type(2) {
transform: translate(3px, 10px) rotate(-45deg);
-webkit-transform: translate(3px, 10px) rotate(-45deg);
-moz-transform: translate(3px, 10px) rotate(-45deg);
-ms-transform: translate(3px, 10px) rotate(-45deg);
-o-transform: translate(3px, 10px) rotate(-45deg);
}
.home .l-header .l-top-line .l-top-line-wrap .logo {
width: 600px;
}
.home .l-header .l-top-line .l-top-line-wrap .g-nav {
opacity: 0;
animation: fadeIn 1s ease-in-out 2s forwards;
-webkit-animation: fadeIn 1s ease-in-out 2s forwards;
}
.home .l-header .l-header-background {
opacity: 0;
width: 600px;
border-radius: 9999px;
-webkit-border-radius: 9999px;
-moz-border-radius: 9999px;
-ms-border-radius: 9999px;
-o-border-radius: 9999px;
transform-origin: right;
transform: scaleX(0.1);
-webkit-transform: scaleX(0.1);
-moz-transform: scaleX(0.1);
-ms-transform: scaleX(0.1);
-o-transform: scaleX(0.1);
animation: topNavBackground 0.6s linear 1s forwards;
-webkit-animation: topNavBackground 0.6s linear 1s forwards;
}
@media screen and (max-width: 1024px) {
.home .l-header .l-header-background {
width: 60px;
}
}
.home .l-header.scrolled .header-background {
width: 1830px;
right: calc((100vw - 1920px) / 2 + 60px);
}
@media screen and (max-width: 1920px) {
.home .l-header.scrolled .header-background {
width: calc(100% - 90px);
right: 60px;
}
}
@media screen and (max-width: 1024px) {
.home .l-header.scrolled .header-background {
width: calc(100% - 80px);
right: 50px;
}
}
@media screen and (max-width: 767px) {
.home .l-header.scrolled .header-background {
width: calc(100% - 45px);
right: 20px;
}
}
@media screen and (max-width: 540px) {
.home .l-header.scrolled .header-background {
position: fixed;
top: 28px;
right: 10px;
width: calc(100vw - 25px);
}
}
.page-id-12 .l-header .l-top-line {
z-index: 999;
}
.page-id-12 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1 {
fill: #ff0000;
}
.page-id-12 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2 {
fill: #fff;
animation: loadingLogoAction 1s linear 2.5s forwards;
-webkit-animation: loadingLogoAction 1s linear 2.5s forwards;
}
.page-id-12 .l-header .l-top-line .l-top-line-wrap .logo a img {
display: block;
width: 100%;
height: auto;
}
.page-id-14 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1,
.page-id-16 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1,
.page-id-18 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1 {
transition: fill 1.5s ease-in-out;
-webkit-transition: fill 1.5s ease-in-out;
-moz-transition: fill 1.5s ease-in-out;
-ms-transition: fill 1.5s ease-in-out;
-o-transition: fill 1.5s ease-in-out;
fill: fff;
}
.page-id-14 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2,
.page-id-16 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2,
.page-id-18 .l-header .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2 {
transition: fill 1.5s ease-in-out;
-webkit-transition: fill 1.5s ease-in-out;
-moz-transition: fill 1.5s ease-in-out;
-ms-transition: fill 1.5s ease-in-out;
-o-transition: fill 1.5s ease-in-out;
fill: #fff;
}
.page-id-14 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1,
.page-id-16 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1,
.page-id-18 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-1 {
fill: #ff0000;
}
.page-id-14 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2,
.page-id-16 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2,
.page-id-18 .l-header.scrolled .l-top-line .l-top-line-wrap .logo a #logo-svg .cls-2 {
fill: #00007a;
}
.single-works .l-header .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after,
.post-type-archive-works .l-header .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
@media screen and (max-width: 1024px) {
.l-top-line .l-top-line-wrap {
justify-content: space-between;
align-items: center;
}
.l-top-line .l-top-line-wrap .logo {
position: static;
transform: translateY(0);
padding-top: 0;
}
.l-top-line .l-top-line-wrap .sp-nav {
display: block;
z-index: 99;
}
.l-top-line .l-top-line-wrap .sp-nav::before, .l-top-line .l-top-line-wrap .sp-nav::after {
transition: all 0.3s ease-out;
}
.l-top-line .l-top-line-wrap .sp-nav.active span {
background-color: transparent;
}
.l-top-line .l-top-line-wrap .sp-nav.active::before {
top: 28px;
transform: rotate(45deg);
background-color: #fff;
}
.l-top-line .l-top-line-wrap .sp-nav.active::after {
bottom: 28px;
transform: rotate(-45deg);
background-color: #fff;
}
.l-top-line .l-top-line-wrap .g-nav {
position: fixed;
top: 117px;
right: -100%;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container {
display: block;
width: 100%;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu {
flex-wrap: wrap;
flex-direction: column;
background-color: #fafafa;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item {
display: block;
width: 100%;
height: auto;
margin-right: 11px;
margin-left: 11px;
text-align: left;
text-indent: 60px;
border: 1px solid #ddd;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item a:hover {
color: #808080;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 {
margin-right: 11px;
margin-left: 11px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a {
position: relative;
text-align: left;
text-indent: 60px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after {
top: 0;
left: 90px;
width: 22px;
height: 22px;
font-size: 22px;
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a:hover::after {
transform: translateY(0) rotate(0deg);
-webkit-transform: translateY(0) rotate(0deg);
-moz-transform: translateY(0) rotate(0deg);
-ms-transform: translateY(0) rotate(0deg);
-o-transform: translateY(0) rotate(0deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74.current a::after {
transform: translateY(0) rotate(0deg);
-webkit-transform: translateY(0) rotate(0deg);
-moz-transform: translateY(0) rotate(0deg);
-ms-transform: translateY(0) rotate(0deg);
-o-transform: translateY(0) rotate(0deg);
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children > a::after {
left: 90px;
font-size: 22px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu {
height: auto;
width: 100%;
padding: 0;
box-shadow: none;
border-radius: 0;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item {
width: 100%;
height: auto;
margin-right: 0;
margin-left: 0;
text-indent: 60px;
text-align: left;
line-height: unset;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a {
padding: 0 !important;
line-height: 60px;
text-align: left;
text-indent: 60px;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a::before, .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a::after {
display: none;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item a:hover {
color: #808080;
}
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item.menu-item-has-children .sub-menu.open {
position: static;
}
.l-top-line .l-top-line-wrap .g-nav.open {
right: 0;
width: 100%;
height: auto;
max-height: calc(100vh - 117px);
overflow-x: hidden;
overflow-y: auto;
z-index: 99;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.menu-item-has-children {
margin-right: 11px;
margin-left: 11px;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.menu-item-has-children a::after {
display: block;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item a {
line-height: 60px;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.open .menu-item-has-children a {
height: auto;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.open .menu-item-has-children .sub-menu {
position: static;
width: 100%;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.open .menu-item-has-children .sub-menu .menu-item {
height: 60px;
margin-right: 11px;
margin-left: 11px;
border-top: none;
border-left: none;
border-right: none;
}
.l-top-line .l-top-line-wrap .g-nav.open .menu-global-nav-container .menu .menu-item.open .menu-item-has-children .sub-menu .menu-item a {
display: block;
height: 100%;
width: 100%;
line-height: 60px;
padding: 0;
}
.l-top-line .l-top-line-wrap .g-nav.open .modal-sub-menu.open {
height: auto;
max-height: calc(100vh - 160px);
overflow-y: auto;
background-color: #fff;
}
.l-top-line .l-top-line-wrap .g-nav.open .modal-sub-menu.open .inner-sub-menu .select-wrap {
height: calc(100vh - 160px);
overflow-y: auto;
}
.l-header .l-header-background {
width: 60px;
}
.l-header .sub-menu-background {
display: none;
}
.single-works .l-header .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after,
.post-type-archive-works .l-header .l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 a::after {
transform: translateY(0%) rotate(0deg);
-webkit-transform: translateY(0%) rotate(0deg);
-moz-transform: translateY(0%) rotate(0deg);
-ms-transform: translateY(0%) rotate(0deg);
-o-transform: translateY(0%) rotate(0deg);
}
}
@media screen and (max-width: 767px) {
.l-top-line .l-top-line-wrap .g-nav .menu-global-nav-container .menu .menu-item#menu-item-74 {
display: block;
}
.l-header .l-header-background {
right: 30px;
}
.l-header.scrolled .header-background {
right: 30px;
width: calc(100% - 60px);
}
}
@media screen and (max-width: 540px) {
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu {
display: block;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap {
display: block;
width: 100%;
height: auto !important;
margin-bottom: 40px;
overflow-y: unset;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .select-ttl {
margin-bottom: 20px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-links li .link-block {
display: block;
width: 100%;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-filter {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-filter li {
margin-bottom: 15px;
margin-right: 10px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .select-wrap .works-filter li .link-block {
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap {
width: 100%;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .select-ttl {
margin-bottom: 15px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider {
width: 100%;
padding-left: 10px;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .slick-arrow.slick-prev {
left: 0;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .works-slider .slick-arrow.slick-next {
right: 0;
}
.l-top-line .l-top-line-wrap .g-nav .modal-sub-menu.open .inner-sub-menu .case-wrap .close-btn {
top: 20px;
right: 35px;
}
.l-header .l-header-background {
right: 15px;
}
.l-header.scrolled .l-header-background {
width: calc(100% - 30px);
right: 15px;
}
}
.home #menu-item-74-wrap {
display: none;
position: relative;
padding: 30px;
}
.home #menu-item-74-wrap.current a::after {
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
}
.home #menu-item-74-wrap.open {
position: fixed;
top: 160px;
left: 0;
display: block;
width: 100vw !important;
max-width: none !important;
overflow-y: auto;
z-index: 9999;
}
@media screen and (max-width: 1024px) {
.home #menu-item-74-wrap.open {
top: 116px;
height: calc(100vh - 120px);
background-color: #fff;
z-index: 1001;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu {
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu {
display: block;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap {
width: 160px;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap {
display: block;
width: 100%;
height: auto !important;
margin-bottom: 40px;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .select-ttl {
font-size: 19px;
font-weight: 500;
border-bottom: 1px solid #000;
line-height: 1;
padding-bottom: 16px;
margin-bottom: 10px;
padding-left: 3px;
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li {
margin-bottom: 30px;
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block {
position: relative;
padding: 5px 10px;
font-size: 1.125rem;
font-weight: 500;
background-color: #000;
color: #fff;
transition: all 0.3s ease-out 0.3s;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block {
display: block;
width: 100%;
border: 1px solid #000;
border-radius: 5px;
text-align: center;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: left bottom;
transition: all 0.1s ease-out;
z-index: -1;
content: "";
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #000;
transform: scaleY(0);
transform-origin: left bottom;
transition: all 0.2s ease-out 0.1s;
z-index: -1;
content: "";
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block:hover {
color: #000;
background-color: #fff;
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block:hover::before {
transform: scaleX(1);
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-links li .link-block:hover::after {
transform: scaleY(1);
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter {
display: flex;
flex-wrap: wrap;
width: 100%;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li {
margin-bottom: 7px;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li {
margin-bottom: 15px;
margin-right: 10px;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block {
position: relative;
padding: 5px 10px;
color: #000;
transition: all 0.3s ease-out 0.3s;
font-size: 14px;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block {
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block::before {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 1px;
background-color: #000;
transform: scaleX(0);
transform-origin: left bottom;
z-index: -1;
content: "";
transition: all 0.1s ease-out;
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #000;
transform: scaleY(0);
transform-origin: left bottom;
transition: all 0.2s ease-out 0.1s;
z-index: -1;
content: "";
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block:hover {
color: #fff;
background-color: #000;
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block:hover::before {
transform: scaleX(1);
}
.home #menu-item-74-wrap.open .inner-sub-menu .select-wrap .works-filter li .link-block:hover::after {
transform: scaleY(1);
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap {
width: calc(100% - 180px);
overflow-x: hidden;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap {
width: 100%;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .select-ttl {
font-size: 19px;
font-weight: 500;
border-bottom: 1px solid #000;
line-height: 1;
padding-bottom: 16px;
margin-bottom: 10px;
padding-left: 3px;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .select-ttl {
margin-bottom: 15px;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider {
display: flex;
width: calc(100% - 40px);
padding-left: 20px;
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider {
width: 100%;
padding-left: 10px;
}
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .slick-arrow.slick-prev {
left: 0;
}
}
@media screen and (max-width: 540px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .slick-arrow.slick-next {
right: 0;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item {
width: calc((100% - 40px) / 5);
margin-right: 10px;
}
@media screen and (max-width: 594px) {
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item.slick-slide img {
width: 100% !important;
height: auto;
}
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item .works-link {
position: relative;
display: block;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item .works-link::after {
position: absolute;
top: 0;
right: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(71, 130, 211, 0.8);
transform: scaleY(0);
transform-origin: top;
transition: all 0.2s ease-out;
content: "";
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item .works-link .works-head02 {
position: absolute;
top: 10px;
left: 10px;
color: #fff;
font-size: 14px;
font-weight: 500;
opacity: 0;
z-index: -1;
transition: all 0.2s ease-out;
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item .works-link:hover::after {
transform: scaleY(1);
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .item .works-link:hover .works-head02 {
opacity: 1;
z-index: 2;
}
.home #menu-item-74-wrap.open .inner-sub-menu .case-wrap .works-slider .slick-list.draggable {
width: 100%;
}
.home .l-header .sub-menu-background.active {
top: 160px;
}
.works-links li .link-block {
padding: 5px 10px;
border: 1px solid #000;
font-size: 1.125rem;
font-weight: 500;
border-radius: 5px;
background-color: #000;
color: #fff;
transition: color 0.3s ease-out, background 0.3s ease-out;
}
.works-links li .link-block:hover {
background-color: #fff;
color: #000;
}
.cta {
position: relative;
display: block;
width: 100%;
background: #4782d3;
padding-top: 15px;
padding-bottom: 15px;
z-index: 30;
}
.cta .cta-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.cta .cta-wrap .lead {
color: #fff;
font-size: 18px;
font-weight: 500;
}
@media screen and (max-width: 767px) {
.cta {
padding-top: 25px;
}
.cta .cta-wrap {
flex-wrap: wrap;
}
.cta .cta-wrap .lead {
width: 100%;
font-size: 16px;
text-align: center;
}
.cta .cta-wrap .rainbow-btn {
margin: 20px auto !important;
}
}
@media screen and (max-width: 540px) {
.cta .cta-wrap .lead {
font-size: 14px;
}
.cta .cta-wrap .rainbow-btn {
font-size: 12px;
}
}
.c-cta__icon-svg {
display: inline-block;
width: 35px;
height: 30px;
margin-right: 15px;
vertical-align: middle;
color: #fff;
}
.single-wrap {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
padding-top: 60px;
}
.single-wrap .content {
width: calc(100% - 320px);
padding-top: 20px;
border-top: 1px solid #000;
margin-bottom: 80px;
}
.single-wrap .content .content-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 30px;
}
.single-wrap .content .content-header .post-categories li a {
position: relative;
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 5px 30px 5px 45px;
font-size: 12px;
font-weight: 500;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.single-wrap .content .content-header .post-categories li a::after {
position: absolute;
top: 50%;
left: 30px;
display: block;
transform: translateY(-4.5px);
border-right: 1px solid transparent;
border-top: 4.5px solid transparent;
border-bottom: 4.5px solid transparent;
border-left: 8px solid #000;
content: "";
}
.single-wrap .content .content-header .date {
color: #808080;
font-size: 11px;
}
.single-wrap .content .content-main {
margin-bottom: 30px;
border-bottom: 1px solid #000;
}
.single-wrap .content .content-main .single-ttl01 {
font-size: 22px;
font-weight: 700;
margin-bottom: 30px;
}
.single-wrap .content .content-main .catch-img {
width: 100%;
margin-bottom: 30px;
border-radius: 16px;
overflow: hidden;
}
.single-wrap .content .content-main .catch-img img {
display: block;
width: 100%;
height: auto;
}
.single-wrap .content .content-main .content-text {
width: 100%;
margin-bottom: 30px;
font-size: 12px;
line-height: 1.6;
}
.single-wrap .content .content-main .content-text p > a {
position: relative;
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding-left: 15px;
color: #4d4d4d;
font-size: 14px;
font-weight: 500;
padding-bottom: 5px;
background-image: linear-gradient(90deg, #4d4d4d, #4d4d4d);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 0 2px;
transition: background-size 0.2s;
-webkit-transition: background-size 0.2s;
-moz-transition: background-size 0.2s;
-ms-transition: background-size 0.2s;
-o-transition: background-size 0.2s;
}
.single-wrap .content .content-main .content-text p > a::before {
position: absolute;
left: 0;
top: 50%;
display: block;
width: 8px;
height: 8px;
transform: translateY(-50%) rotate(45deg);
content: "";
border-top: 1px solid #4d4d4d;
border-right: 1px solid #4d4d4d;
}
.single-wrap .content .content-main .content-text p > a:hover {
background-size: 100% 2px;
}
.single-wrap .content .content-main .link-btn {
padding: 5px 10px;
background-color: #fff;
border: 1px solid #000;
border-radius: 5px;
}
.single-wrap .content .content-main .link-btn:hover {
color: #fff;
background-color: #000;
}
.single-wrap .single-side {
width: 290px;
border-top: 1px solid #000;
}
.single-wrap .single-side .menu-cat-list-container .menu .menu-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
border-bottom: 1px solid #000;
}
.single-wrap .single-side .menu-cat-list-container .menu .menu-item a {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 40px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.single-wrap .single-side .menu-cat-list-container .menu .menu-item a:hover {
opacity: 0.4;
}
.single-wrap .single-side .menu-cat-list-container .menu .menu-item .single-num {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 22px;
color: #fff;
background-color: #0071bc;
font-size: 10px;
font-weight: 500;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.case-header {
margin-top: 100px;
}
.case-header .case-heading-wrap {
display: flex;
justify-content: center;
flex-direction: column-reverse;
width: 100%;
height: auto;
}
.case-header .case-heading-wrap .case-ttl {
font-size: 36px;
font-weight: 500;
margin-bottom: 30px;
line-height: 1;
text-align: center;
}
.case-header .case-heading-wrap .case-cat {
font-size: 19px;
margin-bottom: 30px;
line-height: 1;
text-align: center;
}
.case-data .data-sec .data-wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.case-data .data-sec .data-wrap dl {
display: flex;
flex-wrap: nowrap;
margin-left: 10px;
margin-right: 10px;
}
.case-data .data-sec .data-wrap dl dt {
position: relative;
padding-right: 0.5rem;
font-size: 0.75rem;
}
.case-data .data-sec .data-wrap dl dd {
font-size: 0.75rem;
}
.case-img {
margin-bottom: 25px;
}
@media screen and (max-width: 767px) {
.single-wrap {
flex-wrap: wrap;
flex-direction: column-reverse;
}
.single-wrap .content {
width: 100%;
padding-top: 50px;
}
.single-wrap .single-side {
width: 100%;
}
}
@media screen and (max-width: 540px) {
.single-wrap .content .content-main .single-ttl01 {
font-size: 16px;
}
}
.p-single__main {
width: 100%;
max-width: 100%;
grid-area: main;
overflow: hidden;
}
.p-single__slider {
width: 100%;
overflow: hidden;
grid-area: slider;
}
@media screen and (max-width: 1260px) {
.p-single__slider {
width: 100%;
}
}
.p-single__slider .slick-arrow.slick-prev {
top: 126.5625px;
left: 10px;
display: block;
width: 35px;
height: 35px;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_arrow-left-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.p-single__slider .slick-arrow.slick-prev::before {
content: "";
}
.p-single__slider .slick-arrow.slick-next {
top: 126.5625px;
right: 10px;
display: block;
width: 35px;
height: 35px;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_arrow-right-1.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.p-single__slider .slick-arrow.slick-next::before {
content: "";
}
.p-single__header {
margin-bottom: 50px;
}
.p-single__header .post-categories {
color: inherit;
}
.p-single__title {
font-size: clamp(1.75rem, 1.303rem + 2.24vw, 2.375rem);
font-weight: 700;
line-height: 1.35;
margin-bottom: 10px;
}
.p-single__date {
font-size: 16px;
}
.p-single__catch-img {
width: 100%;
aspect-ratio: 16/9;
margin-bottom: 50px;
border-radius: 10px;
overflow: hidden;
}
.p-single__catch-img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center center;
object-position: center center;
}
.p-single__sidebar {
grid-area: sidebar;
}
.p-single__sidebar-menu-item {
display: flex;
align-items: center;
width: 100%;
height: 90px;
}
.p-single__sidebar-menu-item:nth-of-type(1) a {
background-color: #0073c1;
z-index: 5;
}
.p-single__sidebar-menu-item:nth-of-type(2) {
margin-top: -13px;
}
.p-single__sidebar-menu-item:nth-of-type(2) a {
background-color: #2e3192;
z-index: 4;
}
.p-single__sidebar-menu-item:nth-of-type(3) {
margin-top: -13px;
}
.p-single__sidebar-menu-item:nth-of-type(3) a {
background-color: #662d91;
z-index: 3;
}
.p-single__sidebar-menu-item:nth-of-type(4) {
margin-top: -13px;
}
.p-single__sidebar-menu-item:nth-of-type(4) a {
background-color: #93278f;
z-index: 2;
}
.p-single__sidebar-menu-item a {
position: relative;
display: block;
width: 100%;
padding-left: 20px;
color: #fff;
line-height: 90px;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 10px;
}
.p-single__sidebar-menu-item a:hover {
z-index: 6;
}
.p-single__sidebar-menu-item a:hover .p-single__sidebar-page-num {
background-color: #000;
color: #fff;
}
.p-single__sidebar-page-num {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
width: 46px;
height: 46px;
color: #4d4d4d;
background-color: #fff;
font-size: 14px;
font-weight: 500;
border-radius: 50%;
transition: all 0.3s ease;
}
.p-single__head {
grid-area: head;
}
@media screen and (max-width: 1260px) {
.p-single__head {
width: 100%;
}
}
.p-single__content {
margin-bottom: 100px;
}
.p-single__content h2 {
margin-top: 80px;
padding-bottom: 10px;
margin-bottom: 50px;
color: #4d4d4d;
font-size: clamp(1.5rem, 1.142rem + 1.79vw, 2rem);
font-weight: 700;
line-height: 1.25;
border-bottom: 1px solid #4d4d4d;
}
.p-single__content h3 {
margin-bottom: 20px;
color: #777;
font-size: clamp(1.375rem, 1.286rem + 0.45vw, 1.5rem);
font-weight: 500;
line-height: 1.25;
}
.p-single__content h4 {
margin-bottom: 20px;
color: clamp(1.063rem, 0.928rem + 0.67vw, 1.25rem);
font-size: 20px;
font-weight: 500;
line-height: 1.25;
}
.p-single__content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.p-single__content figure {
margin-bottom: 50px;
}
.p-single__content figure figcaption {
margin-top: 10px;
font-size: 14px;
color: #777;
text-align: center;
}
.p-single__content img {
display: block;
height: auto;
margin: 0 0 50px;
border-radius: 10px;
}
.p-single__content img.alignleft {
float: left;
margin-right: 20px;
}
.p-single__content img.alignright {
float: right;
margin-left: 20px;
}
.p-single__content img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.p-single__content p {
margin-bottom: 40px;
color: #777;
font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
}
.p-single__content p.c-text-lead {
font-size: clamp(1.063rem, 0.839rem + 1.12vw, 1.375rem);
font-weight: 500;
color: #333;
}
.p-single__content dl {
display: flex;
justify-content: flex-start;
gap: 20px;
margin-bottom: 10px;
}
.p-single__content dl dt {
color: #222;
font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
font-weight: 500;
line-height: 1.5;
}
.p-single__content dl dd {
color: #222;
font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
font-weight: 500;
line-height: 1.5;
}
.p-single__content ul,
.p-single__content ol {
margin-bottom: 40px;
padding-left: 2rem;
}
.p-single__content ul li,
.p-single__content ol li {
color: #222;
font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
font-weight: 500;
margin-bottom: 10px;
line-height: 1.5;
}
.p-single__content ul {
list-style: disc;
}
.p-single__content .text-box {
display: block;
margin-bottom: 20px;
padding: 15px 20px;
font-size: 0.875rem;
border: 1px solid #222;
border-left: 5px solid #222;
}
.p-single__content a {
position: relative;
color: #0071bc;
font-size: clamp(1rem, 0.911rem + 0.45vw, 1.125rem);
font-weight: 500;
}
.p-single__content a::after {
position: absolute;
bottom: 0;
left: 0;
display: block;
height: 1px;
width: 100%;
background-color: #0071bc;
transform-origin: left;
transform: scaleX(0);
transition: all 0.3s ease-out;
content: "";
}
.p-single__content a:hover::after {
transform: scaleX(1);
}
.p-single__content a.link--with-arrow {
position: relative;
display: inline-flex;
align-items: center;
padding-right: 2rem;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.p-single__content a.link--with-arrow::before {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
content: "";
width: 1.5rem;
height: 1.5rem;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_arrow.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 1rem 1rem;
pointer-events: none;
z-index: 2;
transition: transform 0.3s ease-out;
}
.p-single__content a.link--with-arrow::after {
position: absolute;
right: 0;
left: auto;
top: 50%;
transform: translateY(-50%);
content: "";
width: 1.5rem;
height: 1.5rem;
background-color: #000;
border-radius: 50%;
pointer-events: none;
z-index: 1;
}
.p-single__content a.link--with-arrow:hover::before {
transform: translateY(-50%) translateX(3px);
}
.p-single__content a.download {
position: relative;
padding-left: 2rem;
padding-right: 2rem;
display: inline-flex;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
gap: 0.5rem;
align-items: center;
}
.p-single__content a.download::before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
content: "";
height: 1.5rem;
aspect-ratio: 48/6;
display: block;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_docs-1.svg);
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
pointer-events: none;
}
.p-single__content a.download::after {
position: absolute;
right: 0;
left: auto;
top: 50%;
transform: translateY(-50%);
content: "";
width: 1.5rem;
height: 1.5rem;
display: block;
border-radius: 50%;
background-color: #000;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_arrow.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 1rem 1rem;
pointer-events: none;
transition: background 0.3s ease-out;
}
.p-single__content a.download:hover::after {
background-position: right center;
}
.p-single__content .wp-block-button {
margin-bottom: 40px;
}
.p-single__content .wp-block-button__link {
display: inline-block;
padding: 12px 24px;
font-size: 16px;
color: #fff;
background-color: #4782d3;
border-radius: 5px;
text-align: center;
transition: all 0.3s ease-out;
}
.p-single__content .wp-block-button__link:hover {
opacity: 0.8;
}
.p-single__content blockquote,
.p-single__content q {
position: relative;
display: block;
padding: 60px 40px 20px;
margin-bottom: 40px;
background: linear-gradient(to right, #29abe2, #0071bc);
border-radius: 10px;
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
.p-single__content blockquote p,
.p-single__content q p {
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 1.6;
}
.p-single__content blockquote::before,
.p-single__content q::before {
position: absolute;
top: 20px;
left: 20px;
display: block;
width: 30px;
height: 20px;
background-image: url(//www.hassei-inc.com/wp-content/uploads/quotation_mark_white.svg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
content: "";
}
.p-single__content em,
.p-single__content strong {
font-weight: 700;
}
.p-single__content b {
color: #00007a;
text-decoration: underline;
-webkit-text-decoration-color: #00007a;
text-decoration-color: #00007a;
font-weight: 700;
}
.p-single__content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
overflow-x: auto;
}
.p-single__content table th,
.p-single__content table td {
border: 1px solid #c6c6c6;
padding: 12px;
font-size: 15px;
}
.p-single__content table th {
background-color: #f2f2f2;
font-weight: 500;
}
.p-single__content code {
display: block;
width: 100%;
padding: 20px;
margin-bottom: 40px;
color: #4d4d4d;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
background-color: #f2f2f2;
border: 1px solid #4d4d4d;
}
.p-single__content pre {
padding: 20px;
margin-bottom: 40px;
overflow-x: auto;
background-color: #f2f2f2;
border: 1px solid #4d4d4d;
font-size: 14px;
line-height: 1.6;
}
.p-single__content hr {
margin: 50px 0;
border: none;
border-top: 1px solid #c6c6c6;
}
.p-single__content video,
.p-single__content iframe {
max-width: 100%;
height: auto;
margin-bottom: 40px;
}
.post-categories {
font-size: clamp(1.125rem, 0.722rem + 2.01vw, 1.688rem);
color: #fff;
font-weight: 400;
}
.toppage-section {
margin-top: -2px;
}
.home-hero .home-hero-wrap {
width: 100%;
margin-top: 128px;
z-index: 50;
}
.home-hero .home-hero-wrap .home-heading02 {
display: block;
width: 100%;
height: auto;
line-height: 1;
text-align: right;
overflow-y: hidden;
margin-bottom: 10px;
}
.home-hero .home-hero-wrap .home-heading02 span {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 32px;
line-height: 1;
font-weight: 700;
color: #111111;
transform-origin: top;
transform: translateY(190px);
-webkit-transform: translateY(190px);
-moz-transform: translateY(190px);
-ms-transform: translateY(190px);
-o-transform: translateY(190px);
animation: homeHeadingSlide01 4s ease-out 3s forwards;
-webkit-animation: homeHeadingSlide01 4s ease-out 3s forwards;
}
.home-hero .home-hero-wrap .home-heading02 span::before {
position: absolute;
top: -130px;
left: 0;
display: block;
width: 100%;
height: 100px;
opacity: 0.35;
background-color: #29abe2;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
z-index: 1;
animation: homeHeadingSlide01 4.2s ease-out 2.8s forwards;
-webkit-animation: homeHeadingSlide01 4.2s ease-out 2.8s forwards;
}
.home-hero .home-hero-wrap .home-heading02 span::after {
position: absolute;
top: -130px;
left: 0;
display: block;
width: 100%;
height: 100px;
background-color: #29abe2;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
z-index: 2;
animation: homeHeadingSlide01 4s ease-out 3s forwards;
-webkit-animation: homeHeadingSlide01 4s ease-out 3s forwards;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
text-align: right;
line-height: 1;
transform-origin: top;
overflow-y: hidden;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 span {
display: inline-block;
width: 60vw;
height: 5.625vw;
transform: translateY(270px);
-webkit-transform: translateY(270px);
-moz-transform: translateY(270px);
-ms-transform: translateY(270px);
-o-transform: translateY(270px);
animation: homeHeadingSlide02 1s ease-out 3s forwards;
-webkit-animation: homeHeadingSlide02 1s ease-out 3s forwards;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 span::before {
position: absolute;
top: -150px;
left: 0;
display: block;
width: 100%;
height: 5.625vw;
opacity: 0.35;
background-color: #000;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
}
.home-hero .home-hero-wrap .home-catch.home-catch01 span::after {
position: absolute;
top: -150px;
left: 0;
display: block;
width: 100%;
height: 110px;
background-color: #000;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
animation: homeHeadingSlide02 1.4s ease-out 2.6s forwards;
-webkit-animation: homeHeadingSlide02 1.4s ease-out 2.6s forwards;
}
.home-hero .home-hero-wrap .home-catch.home-catch03 {
display: block;
width: 100%;
height: auto;
margin-bottom: 20px;
text-align: right;
line-height: 1;
transform-origin: top;
overflow-y: hidden;
}
.home-hero .home-hero-wrap .home-catch.home-catch03 span {
display: inline-block;
width: 55vw;
height: 9.4285714286vw;
transform: translateY(430px);
-webkit-transform: translateY(430px);
-moz-transform: translateY(430px);
-ms-transform: translateY(430px);
-o-transform: translateY(430px);
animation: homeHeadingSlide03 1s ease-out 3s forwards;
-webkit-animation: homeHeadingSlide03 1s ease-out 3s forwards;
}
.home-hero .home-hero-wrap .home-catch.home-catch03 span::before {
position: absolute;
top: -230px;
left: 0;
display: block;
width: 100%;
height: 9.4285714286vw;
opacity: 0.35;
background-color: #000;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
}
.home-hero .home-hero-wrap .home-catch.home-catch03 span::after {
position: absolute;
top: -230px;
left: 0;
display: block;
width: 100%;
height: 9.4285714286vw;
background-color: #000;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
animation: homeHeadingSlide03 1.4s ease-out 2.6s forwards;
-webkit-animation: homeHeadingSlide03 1.4s ease-out 2.6s forwards;
}
.home-hero .home-hero01 {
display: block;
width: 100%;
height: 100px;
opacity: 0;
}
.home-hero .home-hero01 .home-heading02 {
display: block;
width: 100%;
height: 52px;
margin-bottom: 10px;
text-align: center;
overflow-y: hidden;
}
.home-hero .home-hero01 .home-heading02 span {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 27px;
line-height: 1;
font-weight: 700;
color: #29abe2;
transform-origin: top;
transform: translateY(190px);
-webkit-transform: translateY(190px);
-moz-transform: translateY(190px);
-ms-transform: translateY(190px);
-o-transform: translateY(190px);
}
.home-hero .home-hero01 .home-heading02 span::after {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 100%;
height: 92px;
background-color: #29abe2;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
}
.home-hero .home-hero02 {
position: relative;
width: 100%;
height: auto;
}
.home-hero .home-hero02 .top-slider {
position: -webkit-sticky;
position: sticky;
top: 0;
display: flex;
width: 100%;
height: 100vh;
border-top-left-radius: 54px;
border-top-right-radius: 54px;
transition: filter 3.6s ease;
-webkit-transition: filter 3.6s ease;
-moz-transition: filter 3.6s ease;
-ms-transition: filter 3.6s ease;
-o-transition: filter 3.6s ease;
overflow: clip;
}
@media screen and (max-width: 1240px) {
.home-hero .home-hero02 .top-slider {
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
}
@media screen and (max-width: 911px) {
.home-hero .home-hero02 .top-slider {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
}
@media screen and (max-width: 767px) {
.home-hero .home-hero02 .top-slider {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
}
.home-hero .home-hero02 .top-slider .slick-list {
width: 100%;
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track {
width: 100%;
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide01 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_000.jpg);
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide02 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_001.jpg);
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide03 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_002.jpg);
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide04 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_003.jpg);
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide05 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_004.jpg);
}
.home-hero .home-hero02 .top-slider .slick-list .slick-track .slide.slide06 {
background-image: url(//www.hassei-inc.com/wp-content/uploads/top_pic_005.jpg);
}
.home-hero .home-hero02 .bg-movie {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
width: 100%;
border-top-left-radius: 52px;
-webkit-border-top-left-radius: 52px;
-moz-border-top-left-radius: 52px;
-ms-border-top-left-radius: 52px;
-o-border-top-left-radius: 52px;
border-top-right-radius: 52px;
-webkit-border-top-right-radius: 52px;
-moz-border-top-right-radius: 52px;
-ms-border-top-right-radius: 52px;
-o-border-top-right-radius: 52px;
transition: filter 3.6s ease;
-webkit-transition: filter 3.6s ease;
-moz-transition: filter 3.6s ease;
-ms-transition: filter 3.6s ease;
-o-transition: filter 3.6s ease;
overflow: clip;
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
z-index: 20;
opacity: 0;
animation: movieSlideUp 3s ease-out 4s forwards;
-webkit-animation: movieSlideUp 3s ease-out 4s forwards;
}
.home-hero .home-hero02 .bg-movie iframe {
width: 177.7777777778vh;
height: 100vh;
}
.home-hero .home-hero02 .bg-movie.adjustHeight iframe {
width: 100%;
height: 55.6875vw;
}
.home-hero .home-hero02::before {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0.35;
background-color: #000;
border-top-left-radius: 52px;
-webkit-border-top-left-radius: 52px;
-moz-border-top-left-radius: 52px;
-ms-border-top-left-radius: 52px;
-o-border-top-left-radius: 52px;
border-top-right-radius: 52px;
-webkit-border-top-right-radius: 52px;
-moz-border-top-right-radius: 52px;
-ms-border-top-right-radius: 52px;
-o-border-top-right-radius: 52px;
content: "";
z-index: 15;
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
animation: movieBgSlideUp 3s ease-out 1.75s forwards;
-webkit-animation: movieBgSlideUp 3s ease-out 1.75s forwards;
}
.home-hero .home-hero02::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
opacity: 0.65;
background-color: #000;
border-top-left-radius: 52px;
-webkit-border-top-left-radius: 52px;
-moz-border-top-left-radius: 52px;
-ms-border-top-left-radius: 52px;
-o-border-top-left-radius: 52px;
border-top-right-radius: 52px;
-webkit-border-top-right-radius: 52px;
-moz-border-top-right-radius: 52px;
-ms-border-top-right-radius: 52px;
-o-border-top-right-radius: 52px;
transform: translateY(40vh);
-webkit-transform: translateY(40vh);
-moz-transform: translateY(40vh);
-ms-transform: translateY(40vh);
-o-transform: translateY(40vh);
content: "";
z-index: 16;
animation: movieBgSlideUp02 3s ease-out 2s forwards;
-webkit-animation: movieBgSlideUp02 3s ease-out 2s forwards;
}
.home-hero .home-hero02 .home-hero03 .home-catch02 {
display: block;
width: 100%;
height: 52px;
margin-bottom: 20px;
text-align: center;
overflow-y: hidden;
}
.home-hero .home-hero02 .home-hero03 .home-catch02 span {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 27px;
line-height: 1;
font-weight: 700;
color: #29abe2;
transform-origin: top;
transform: translateY(190px);
-webkit-transform: translateY(190px);
-moz-transform: translateY(190px);
-ms-transform: translateY(190px);
-o-transform: translateY(190px);
animation: homeHeadingSlide01 0.4s linear 1.5s forwards;
-webkit-animation: homeHeadingSlide01 0.4s linear 1.5s forwards;
}
.home-hero .home-hero02 .home-hero03 .home-catch02 span::after {
position: absolute;
bottom: 30px;
left: 0;
display: block;
width: 100%;
height: 92px;
background-color: #29abe2;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
content: "";
}
.home-hero .home-hero02.active .top-slider {
filter: blur(80px) brightness(180%) opacity(0.5);
-webkit-filter: blur(80px) brightness(180%) opacity(0);
}
.home-hero .home-hero02.active .bg-movie {
filter: blur(80px) brightness(180%) opacity(0.5);
-webkit-filter: blur(80px) brightness(180%) opacity(0);
}
.information-section {
padding-top: 0;
}
.information-section .outermost-container .information-wrap {
padding: 50px;
background-color: #fff;
}
@media screen and (max-width: 767px) {
.information-section .outermost-container .information-wrap {
padding: 0 40px 50px;
}
}
@media screen and (max-width: 540px) {
.information-section .outermost-container .information-wrap {
padding: 0 20px 50px;
}
}
.information-section .outermost-container .information-wrap .information-inner-wrap {
padding: 40px 50px;
color: #fff;
background-color: #4782d3;
border-radius: 20px;
}
@media screen and (max-width: 1024px) {
.information-section .outermost-container .information-wrap .information-inner-wrap {
padding: 40px;
}
}
@media screen and (max-width: 540px) {
.information-section .outermost-container .information-wrap .information-inner-wrap {
padding: 20px;
}
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-category {
display: inline-block;
margin-bottom: 15px;
padding: 5px 10px;
font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
font-weight: 500;
background-color: #000;
border-radius: 6px;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-title {
font-size: clamp(1.125rem, 0.917rem + 1.04vw, 1.75rem);
font-weight: 500;
margin-bottom: 15px;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-text {
font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
margin-bottom: 15px;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-link {
position: relative;
display: flex;
justify-content: flex-end;
align-items: center;
font-size: clamp(0.875rem, 0.786rem + 0.45vw, 1rem);
font-weight: 500;
padding-right: 2rem;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-link::before {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
background-image: url(//www.hassei-inc.com/wp-content/uploads/icon_arrow.svg);
background-repeat: no-repeat;
background-size: 1rem 1rem;
background-position: center center;
content: "";
transition: transform 0.3s ease-out;
z-index: 2;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-link::after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1.5rem;
height: 1.5rem;
background-color: #000;
border-radius: 50%;
content: "";
z-index: 1;
}
.information-section .outermost-container .information-wrap .information-inner-wrap .information-link:hover::before {
transform: translateY(-50%) translateX(3px);
}
.news-section {
padding-top: 0;
}
.news-section .outermost-container .news-wrap {
position: relative;
display: flex;
justify-content: space-between;
padding: 105px 70px 140px;
background: #fff;
z-index: 30;
}
.news-section .outermost-container .news-wrap .heading-wrap {
width: 275px;
}
.news-section .outermost-container .news-wrap .heading-wrap .top-head02 {
margin-bottom: 10px;
font-size: 60px;
font-weight: 700;
}
.news-section .outermost-container .news-wrap .heading-wrap .more-link a {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 10px 15px;
color: #fff;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
background-color: #000;
font-size: 16px;
font-weight: 500;
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.news-section .outermost-container .news-wrap .heading-wrap .more-link a:hover {
color: #000;
background-color: #fff;
}
.news-section .outermost-container .news-wrap .news-content {
width: 100%;
border-top: 1px solid #000;
}
.news-section .outermost-container .news-wrap .news-content .post {
display: block;
width: 100%;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list {
position: relative;
z-index: 10;
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid #000;
width: 100%;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dt {
display: block;
width: 150px;
padding-top: 40px;
padding-bottom: 40px;
font-size: 16px;
opacity: 0;
transition: all 0.6s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 150px);
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd .cat {
width: 100px;
font-size: 16px;
text-transform: uppercase;
opacity: 0;
transition: all 0.6s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 100px);
max-width: 900px;
padding-top: 40px;
padding-bottom: 40px;
font-size: 16px;
transform: translateX(50px);
opacity: 0;
transition: all 0.6s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a .link-text-block {
color: #000;
transition: all 0.3s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a svg {
display: block;
width: 2rem;
height: 2rem;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a svg .cls-1 {
fill: #000;
stroke: #000;
stroke-linejoin: round;
stroke-width: 0.6px;
transition: all 0.3s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a svg .cls-2 {
fill: #fff;
stroke-width: 0px;
transition: all 0.3s ease-out;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a:hover .link-text-block {
color: rgba(0, 0, 0, 0.5);
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a:hover svg .cls-1 {
fill: #fff;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a:hover svg .cls-2 {
fill: #000;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list.view dt {
opacity: 1;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list.view dd .cat {
opacity: 1;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list.view dd a {
transform: translateX(0);
opacity: 1;
}
.topics-section {
position: relative;
z-index: 30;
background-color: #fff;
}
.topics-section .outermost-container {
position: relative;
}
.topics-section .outermost-container .topics-slider {
position: relative;
padding-bottom: 20px;
padding-left: 50px;
padding-right: 50px;
background-color: #fff;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header {
padding-bottom: 15px;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data {
display: inline;
font-size: 12px;
margin-right: 20px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(1) {
padding-left: 150px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-img {
position: relative;
height: 600px;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-footer {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-footer .topics-head03 {
font-size: 32px;
font-weight: 500;
padding-top: 20px;
line-height: 1;
}
.topics-section .outermost-container .topics-slider .slick-arrow.slick-prev {
left: unset;
right: 100px;
top: unset;
bottom: 0;
}
.topics-section .outermost-container .topics-slider .slick-arrow.slick-next {
left: unset;
right: 40px;
top: unset;
bottom: 0;
}
.topics-section .outermost-container .topics-head04 {
position: absolute;
top: 0;
left: 116px;
display: block;
font-size: 19px;
font-weight: 500;
}
.topics-section .outermost-container .view-all-works {
position: absolute;
bottom: 100px;
right: 150px;
display: block;
width: 170px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #000;
border: 1px solid #000;
border-radius: 16px;
font-size: 32px;
font-weight: 500;
letter-spacing: -40;
line-height: 1.1;
transition: background-color 0.3s ease-out;
}
.topics-section .outermost-container .view-all-works:hover {
color: #000;
background-color: #fff;
}
.topics-section .outermost-container .slide-count {
position: absolute;
bottom: 20px;
right: 230px;
}
.purpose-section .outermost-container {
position: relative;
z-index: 30;
}
.purpose-section .outermost-container .purpose-wrap {
padding: 100px 70px 20px;
border-top-left-radius: 54px;
-webkit-border-top-left-radius: 54px;
-moz-border-top-left-radius: 54px;
-ms-border-top-left-radius: 54px;
-o-border-top-left-radius: 54px;
border-top-right-radius: 54px;
-webkit-border-top-right-radius: 54px;
-moz-border-top-right-radius: 54px;
-ms-border-top-right-radius: 54px;
-o-border-top-right-radius: 54px;
background: #fff;
text-align: center;
}
@media screen and (max-width: 1240px) {
.purpose-section .outermost-container .purpose-wrap {
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}
}
@media screen and (max-width: 911px) {
.purpose-section .outermost-container .purpose-wrap {
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
}
@media screen and (max-width: 767px) {
.purpose-section .outermost-container .purpose-wrap {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
}
.purpose-section .outermost-container .purpose-wrap .lead-block {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .ttl-en {
font-size: 16px;
margin-bottom: 10px;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .top-head02 {
margin-bottom: 45px;
font-size: 40px;
font-weight: 700;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead {
font-size: 22px;
font-weight: 500;
margin-bottom: 50px;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.heading-ttl {
font-size: clamp(1.5rem, 0.591rem + 4.55vw, 3.5rem);
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link .line {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 1.25rem;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link .arrow {
display: inline-block;
width: 1.45rem;
height: 1.45rem;
margin-left: 10px;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link .arrow svg {
transform: translateY(-0.3rem);
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link .arrow svg .cls-1 {
transform: translateX(0);
transition: all 0.4s ease-in-out;
fill: #fff;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.text-link:hover .arrow svg .cls-1 {
transform: translateX(5px);
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead .line {
position: relative;
display: block;
margin-bottom: clamp(0rem, -0.426rem + 2.13vw, 0.938rem);
transform: translateY(100px);
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transition: transform 0.8s ease-out;
-webkit-transition: transform 0.8s ease-out;
-moz-transition: transform 0.8s ease-out;
-ms-transition: transform 0.8s ease-out;
-o-transition: transform 0.8s ease-out;
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead .line::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: #fff;
transform: scaleX(1);
-webkit-transform: scaleX(1);
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-o-transform: scaleX(1);
transform-origin: right;
transition: transform 3s ease-out;
-webkit-transition: transform 3s ease-out;
-moz-transition: transform 3s ease-out;
-ms-transition: transform 3s ease-out;
-o-transition: transform 3s ease-out;
z-index: 50;
content: "";
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead .line.active {
transform: translateY(0);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead .line.active::after {
transform: scaleX(0);
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
}
.purpose-section .outermost-container .purpose-wrap .lead-block .lead.active {
opacity: 1;
}
.project-section {
background-color: #fff;
}
.project-section .outermost-container {
position: relative;
z-index: 30;
}
.project-section .outermost-container .project-wrap {
padding: 70px 50px;
background-color: #fff;
}
.project-section .outermost-container .project-wrap .inner-wrap {
padding: 80px;
background-color: #b8bdd3;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
}
.project-section .outermost-container .project-wrap .top-head02 {
margin-bottom: 45px;
font-size: 40px;
font-weight: 700;
border-bottom: 1px solid #000;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding-top: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #000;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item01 {
width: 18%;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item01 .item-head03 {
font-size: 19px;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item01 .data {
font-size: 16px;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item02 {
width: 36%;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item02 a {
position: relative;
display: block;
padding-top: 52%;
border-radius: 16px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
-ms-border-radius: 16px;
-o-border-radius: 16px;
overflow: hidden;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item02 a img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item02 a::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: rgba(71, 130, 211, 0.8);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
opacity: 0;
visibility: hidden;
content: "";
z-index: -1;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item02 a:hover::after {
display: block;
opacity: 1;
visibility: visible;
z-index: 1;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 32%;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .top-head03 {
margin-bottom: 20px;
font-size: 36px;
font-weight: 500;
color: #222;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .top-head03 .link-text {
color: #222;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .data {
font-size: 12px;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .data-wrap .data {
font-size: 12px;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .svg-arrow {
position: absolute;
bottom: 0;
right: 0;
width: 32px;
height: 32px;
position: absolute;
bottom: 0;
right: 0;
display: block;
border: none;
transform-origin: unset;
transition: unset;
overflow: none;
cursor: pointer;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .svg-arrow svg .cls-1 {
fill: #000;
stroke: #000;
stroke-width: 1px;
stroke-dasharray: 200.96;
stroke-linejoin: round;
stroke-dashoffset: 200.96;
transition: fill 0.5s ease;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .svg-arrow svg .cls-2 {
fill: #fff;
stroke-width: 0px;
transition: fill 0.5s ease;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .svg-arrow:hover svg .cls-1 {
fill: #fff;
-webkit-animation: drawCircle 1s ease-out 0.2s forwards;
animation: drawCircle 1s ease-out 0.2s forwards;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .svg-arrow:hover svg .cls-2 {
fill: #000;
}
@media screen and (max-width: 1024px) {
.home-hero .home-hero-wrap {
margin-top: 50px;
}
.home-hero .home-hero-wrap .home-heading02 {
height: auto;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 {
height: auto;
}
.news-section .outermost-container .news-wrap {
flex-wrap: wrap;
}
.news-section .outermost-container .news-wrap .heading-wrap {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.topics-section .outermost-container .topics-head04 {
top: -40px;
left: 85px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(1) {
padding-left: 0;
}
.topics-section .outermost-container .view-all-works {
right: 110px;
}
.project-section .outermost-container .project-wrap .inner-wrap {
padding: 40px;
}
.project-section .outermost-container .project-wrap .inner-wrap .top-head02 {
margin-bottom: 0;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item01 {
width: 100%;
margin-bottom: 10px;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item02 {
width: 100%;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item03 {
width: 100%;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item03 .top-head03 {
margin-bottom: 0;
}
}
@media screen and (max-width: 767px) {
.home-hero .home-hero-wrap .home-heading02 {
height: auto;
}
.home-hero .home-hero-wrap .home-heading02 span {
font-size: 22px;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 {
height: auto;
}
.home-hero .home-hero01 {
height: 220px;
}
.news-section .outermost-container .news-wrap {
padding: 40px;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dt {
padding-top: 20px;
padding-bottom: 20px;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a {
padding-top: 20px;
padding-bottom: 20px;
}
.topics-section .outermost-container .topics-head04 {
top: 0;
}
.topics-section .outermost-container .topics-slider {
padding-top: 30px;
padding-left: 40px;
padding-right: 40px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header {
height: 90px;
padding-bottom: 0;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-img {
height: 300px;
border-radius: 16px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-footer .topics-head03 {
font-size: 22px;
}
.topics-section .outermost-container .view-all-works {
bottom: 90px;
right: 90px;
width: 120px;
height: 110px;
font-size: 18px;
}
.purpose-section .outermost-container .purpose-wrap {
padding: 60px 40px;
}
.purpose-section .outermost-container .purpose-wrap .container {
padding-left: 0;
padding-right: 0;
}
.purpose-section .outermost-container .purpose-wrap .container .ttl-en {
margin-bottom: 0;
}
.purpose-section .outermost-container .purpose-wrap .container .lead {
font-size: 15px;
margin-bottom: 20px;
}
.project-section .outermost-container .project-wrap {
padding: 0 40px 60px;
}
.project-section .outermost-container .project-wrap .project-content .project-item .part-item .item03 .top-head03 {
font-size: 22px;
}
}
@media screen and (max-width: 540px) {
.home-hero .home-hero-wrap {
margin-top: 0;
}
.home-hero .home-hero-wrap .home-heading02 {
height: auto;
}
.home-hero .home-hero-wrap .home-heading02 span {
font-size: 16px;
}
.home-hero .home-hero-wrap .home-catch.home-catch01 {
height: auto;
}
.home-hero .home-hero01 {
height: 140px;
}
.news-section .outermost-container .news-wrap {
padding: 20px;
}
.news-section .outermost-container .news-wrap .heading-wrap {
flex-wrap: wrap;
}
.news-section .outermost-container .news-wrap .heading-wrap .top-head02 {
width: 100%;
margin-bottom: 10px;
font-size: 32px;
text-align: center;
}
.news-section .outermost-container .news-wrap .heading-wrap .more-link {
margin: 0 auto 15px;
}
.news-section .outermost-container .news-wrap .heading-wrap .more-link a {
font-size: 13px;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dt {
width: 100%;
padding-top: 10px;
padding-bottom: 0;
font-size: 14px;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd {
flex-wrap: wrap;
width: 100%;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd .cat {
width: 100%;
font-size: 14px;
}
.news-section .outermost-container .news-wrap .news-content .post .news-list dd a {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 14px;
}
.topics-section .outermost-container .topics-head04 {
left: 35px;
}
.topics-section .outermost-container .topics-slider {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 50px;
}
.topics-section .outermost-container .topics-slider .slick-arrow.slick-prev {
bottom: 5px;
}
.topics-section .outermost-container .topics-slider .slick-arrow.slick-next {
bottom: 5px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header {
height: auto;
padding-bottom: 10px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(1) {
display: block;
font-size: 12px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(2) {
display: block;
font-size: 12px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(3) {
display: block;
font-size: 12px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-header .data:nth-of-type(4) {
display: block;
font-size: 12px;
}
.topics-section .outermost-container .topics-slider .slick-slide .topics-img {
height: 140px;
}
.topics-section .outermost-container .slide-count {
bottom: 10px;
right: 175px;
}
}
@media screen and (max-width: 540px) and (max-width: 540px) {
.topics-section .outermost-container .slide-count {
bottom: 30px;
}
}
@media screen and (max-width: 540px) {
.topics-section .outermost-container .view-all-works {
bottom: 100px;
right: 45px;
width: 70px;
height: 70px;
font-size: 12px;
}
}
@media screen and (max-width: 540px) {
.purpose-section .outermost-container .purpose-wrap {
padding: 60px 20px;
}
.purpose-section .outermost-container .purpose-wrap .container .top-head02 {
font-size: 26px;
line-height: 1.4;
}
.purpose-section .outermost-container .purpose-wrap .container .lead {
font-size: 14px;
}
}
@media screen and (max-width: 540px) and (max-width: 480px) {
.purpose-section .outermost-container .purpose-wrap .container .lead.lead--top {
text-align: left;
}
}
@media screen and (max-width: 540px) {
.purpose-section .outermost-container .purpose-wrap .container .lead.lead--top .line {
display: inline;
text-align: left;
}
}
@media screen and (max-width: 540px) {
.purpose-section .outermost-container .purpose-wrap .container .lead br {
display: none;
}
}
@media screen and (max-width: 540px) {
.project-section .outermost-container .project-wrap {
padding: 0 20px 60px;
}
.project-section .outermost-container .project-wrap .inner-wrap {
padding: 20px;
border-radius: 16px;
}
.project-section .outermost-container .project-wrap .inner-wrap .top-head02 {
font-size: 32px;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item01 .item-head03 {
font-size: 16px;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item03 {
padding-top: 10px;
}
.project-section .outermost-container .project-wrap .inner-wrap .project-content .project-item .part-item .item03 .top-head03 {
font-size: 18px;
}
}
.category-page {
margin-bottom: 80px;
}
.category-page .container .cat-icon {
display: block;
width: 200px;
height: 200px;
padding: 25px;
margin-left: auto;
margin-right: auto;
}
.category-page .container .cat-icon svg {
display: block;
width: 100%;
height: auto;
}
.category-page .container .cat-icon img {
display: block;
width: 100%;
height: auto;
}
.category-page .container .cat-ttl01 {
font-size: 36px;
font-weight: 700;
text-align: center;
}
.category-page .container .cat-ttl02 {
color: #808080;
font-size: 24px;
font-weight: 700;
text-align: center;
}
.cat-wrap {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
padding-top: 60px;
}
.cat-wrap .outer-content {
width: calc(100% - 320px);
border-top: 1px solid #000;
padding-top: 20px;
}
.cat-wrap .outer-content .content {
display: flex;
justify-content: space-between;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #000;
}
.cat-wrap .outer-content .content .content-inner {
width: calc((100% - 30px) * 0.7);
}
.cat-wrap .outer-content .content .content-inner .content-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-bottom: 30px;
}
.cat-wrap .outer-content .content .content-inner .content-header .post-categories li a {
position: relative;
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 5px 30px 5px 45px;
font-size: 12px;
font-weight: 500;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: all 0.3s ease-out;
background-position: center;
}
.cat-wrap .outer-content .content .content-inner .content-header .post-categories li a::after {
position: absolute;
top: 50%;
left: 30px;
display: block;
transform: translateY(-4.5px);
border-right: 1px solid transparent;
border-top: 4.5px solid transparent;
border-bottom: 4.5px solid transparent;
border-left: 8px solid #000;
content: "";
}
.cat-wrap .outer-content .content .content-inner .content-header .post-categories li a:hover {
color: #fff;
background-color: #000;
}
.cat-wrap .outer-content .content .content-inner .content-header .post-categories li a:hover::after {
border-left: 8px solid #fff;
}
.cat-wrap .outer-content .content .content-inner .content-header .date {
color: #808080;
font-size: 11px;
}
.cat-wrap .outer-content .content .content-inner .content-main .cat-ttl02 {
color: #000;
font-size: 24px;
font-weight: 500;
text-align: left;
}
.cat-wrap .outer-content .content .catch-img {
position: relative;
width: calc((100% - 30px) * 0.3);
height: 130px;
border-radius: 16px;
overflow: hidden;
}
.cat-wrap .outer-content .content .catch-img img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
margin-top: auto;
margin-bottom: auto;
}
.cat-wrap .cat-side {
width: 290px;
border-top: 1px solid #000;
}
.cat-wrap .cat-side .menu-cat-list-container .menu .menu-item {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 40px;
border-bottom: 1px solid #000;
}
.cat-wrap .cat-side .menu-cat-list-container .menu .menu-item a {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
line-height: 40px;
font-size: 12px;
font-weight: 500;
transition: all 0.3s ease;
}
.cat-wrap .cat-side .menu-cat-list-container .menu .menu-item a:hover {
opacity: 0.4;
}
.cat-wrap .cat-side .menu-cat-list-container .menu .menu-item .single-num {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 22px;
color: #fff;
background-color: #0071bc;
border-radius: 5px;
font-size: 10px;
font-weight: 700;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
@media screen and (max-width: 767px) {
.cat-wrap {
flex-wrap: wrap;
flex-direction: column-reverse;
}
.cat-wrap .outer-content {
width: 100%;
margin-top: 50px;
}
.cat-wrap .cat-side {
width: 100%;
}
}
@media screen and (max-width: 540px) {
.category-page {
margin-bottom: 40px;
}
.category-page .container .cat-ttl01 {
font-size: 24px;
}
.cat-wrap .outer-content .content {
flex-wrap: wrap;
flex-direction: column;
width: 100%;
}
.cat-wrap .outer-content .content .content-inner {
width: 100%;
}
.cat-wrap .outer-content .content .content-inner .content-main .cat-ttl02 {
margin-bottom: 10px;
}
.cat-wrap .outer-content .content .content-inner .content-header {
width: 100%;
}
.cat-wrap .outer-content .content .catch-img {
width: 100%;
}
}
.archive-ttl01 {
margin-bottom: 15px;
font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem);
font-weight: 700;
color: #29abe2;
text-align: center;
}
.archive-ttl02 {
font-size: clamp(2rem, 1.254rem + 1.56vw, 2.25rem);
font-weight: 700;
line-height: 52px;
margin-bottom: 50px;
text-align: center;
}
@media screen and (max-width: 767px) {
.archive-ttl02 {
text-align: left;
}
}
.archive-ttl02 span {
display: inline-block;
}
@media screen and (max-width: 767px) {
.archive-ttl02 span {
display: inline;
}
}
.archive-ttl03 {
font-size: 36px;
text-align: center;
}
.select-section .outer-container form {
padding-top: 20px;
padding-bottom: 20px;
margin-bottom: 50px;
}
.select-section .outer-container form .select-terms {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
}
.select-section .outer-container form .select-terms li {
display: block;
margin-right: 20px;
}
.select-section .outer-container form .select-terms li input {
margin-right: 10px;
}
.select-section .outer-container form .select-terms li label {
font-size: 14px;
}
.select-section .outer-container form .free-word-search {
width: calc(100% - 85px);
padding: 5px 10px;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
@media screen and (max-width: 991px) {
.select-section .outer-container form .free-word-search {
width: 100%;
max-width: 300px;
}
}
@media screen and (max-width: 767px) {
.select-section .outer-container form .free-word-search {
max-width: 100%;
margin-bottom: 20px;
}
}
.select-section .outer-container form button {
width: 80px;
font-weight: 700;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
color: #fff;
background-color: #000;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
.select-section .outer-container form button:hover {
background-color: #fff;
color: #000;
}
.sort-option {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
border: 1px solid #000;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
.sort-option select {
padding: 5px 10px;
}
.sort-option select option {
font-size: 14px;
}
.sort-option button {
border: 1px solid transparent !important;
}
.works-sec {
width: 100%;
}
.works-sec .search-ttl02 {
margin-bottom: 50px;
font-size: 24px;
font-weight: 500;
text-align: center;
}
.works-sec .block {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.works-sec .block .item {
display: block;
width: 25%;
height: 14.0625vw;
overflow: hidden;
}
.works-sec .block .item .works-link {
position: relative;
display: block;
width: 100%;
height: 14.0625vw;
}
.works-sec .block .item .works-link figure {
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 6;
}
.works-sec .block .item .works-link figure img {
display: block;
width: 100%;
transform: translateY(-25%);
}
.works-sec .block .item .works-link::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
}
.works-sec .block .item .works-link .works-head02 {
position: absolute;
left: 10px;
top: 10px;
font-size: 16px;
font-weight: 500;
line-height: 1;
color: #fff;
opacity: 0;
z-index: -1;
transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
}
.works-sec .block .item .works-link .works-head02 .note-text {
font-size: 13px;
font-weight: 400;
}
.works-sec .block .item .works-link:hover figure {
z-index: 1;
}
.works-sec .block .item .works-link:hover::after {
background: rgba(71, 130, 211, 0.8);
z-index: 2;
}
.works-sec .block .item .works-link:hover .works-head02 {
opacity: 1;
z-index: 10;
}
@media screen and (max-width: 991px) {
.select-section .outer-container form .select-terms {
width: 100%;
}
}
@media screen and (max-width: 767px) {
.standard-sec.works-list-sec {
padding-top: 60px;
padding-bottom: 60px;
}
.works-sec .block .item {
width: 50%;
height: 28.125vw;
}
.works-sec .block .item .works-link {
height: 100%;
}
}
@media screen and (max-width: 540px) {
.standard-sec.works-list-sec {
padding-top: 40px;
padding-bottom: 40px;
}
.standard-sec.works-list-sec .outer-container {
width: 80%;
padding-left: 0;
padding-right: 0;
}
.standard-sec.works-list-sec .outer-container .archive-ttl02 {
font-size: 24px;
line-height: 1.6;
}
.standard-sec.works-list-sec .outer-container .archive-ttl03 {
font-size: 24px;
}
.works-sec .block .item {
width: 100%;
height: 56.25vw;
}
}
.c-text-lead {
font-size: clamp(0.938rem, 0.644rem + 0.98vw, 1.25rem);
font-weight: 500;
color: #333;
}
.c-text-lead--top {
font-size: clamp(1rem, 0.593rem + 0.85vw, 1.25rem);
margin-bottom: clamp(0.625rem, -2.426rem + 6.36vw, 2.5rem);
}
.c-text-lead--top:last-of-type() {
margin-bottom: 0;
}
.c-text-underline {
text-decoration: underline;
}
.c-text-underline--blue {
-webkit-text-decoration-color: #0071bc;
text-decoration-color: #0071bc;
}
.c-text__link {
position: relative;
font-weight: 600;
color: #4782d3;
transition: color 0.3s ease-out;
}
.c-text__link::after {
position: absolute;
bottom: -5px;
left: 0;
display: block;
width: 100%;
height: 2px;
background-color: #777;
transform-origin: left;
transform: scaleX(0);
transition: transform 0.3s ease-out;
content: "";
}
.c-text__link:hover {
color: #777;
}
.c-text__link:hover::after {
transform: scaleX(1);
}
.c-text__link--bg-blue {
color: #7cd9f6;
}
.c-text__link--bg-blue::after {
background-color: #7cd9f6;
}
.c-text__link--bg-blue:hover {
color: #7cd9f6;
}
.hero {
position: relative;
display: block;
width: 100%;
aspect-ratio: 1920/864;
margin-top: -116px;
}
@media screen and (max-width: 767px) {
.hero {
aspect-ratio: unset;
height: 345.15px;
}
}
.hero .hero-heading {
display: flex;
justify-content: center;
width: 100%;
aspect-ratio: 1920/864;
margin-top: -160px;
padding-top: 22.5vw;
}
@media screen and (max-width: 767px) {
.hero .hero-heading {
display: flex;
justify-content: center;
align-items: center;
aspect-ratio: unset;
padding-top: 0;
transform: translateY(40px);
height: calc(100% - 40px);
}
}
.hero .hero-heading .hero-ttl {
font-size: 3rem;
font-weight: 700;
line-height: 3.5rem;
color: #fff;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 767px) {
.hero .hero-heading .hero-ttl {
margin-top: 0;
font-size: 42px;
}
}
@media screen and (max-width: 540px) {
.hero .hero-heading .hero-ttl {
font-size: 36px;
}
}
.hero .hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1920/864;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -99;
}
@media screen and (max-width: 767px) {
.hero .hero-bg {
aspect-ratio: unset;
height: 345.15px;
}
}
.hero .hero-overlay {
z-index: -90;
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1920/864;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}
@media screen and (max-width: 767px) {
.hero .hero-overlay {
aspect-ratio: unset;
height: 345.15px;
}
}
.hero.hero-philosophy .hero-bg {
background-image: url(//www.hassei-inc.com/wp-content/uploads/conduct_top_img.jpg);
}
.hero.hero-outline .hero-bg {
background-image: url(//www.hassei-inc.com/wp-content/uploads/company_top_img-1.jpg);
}
.hero.hero-company .hero-bg {
background-image: url(//www.hassei-inc.com/wp-content/uploads/company_info_img.jpg);
}
.primary-sec {
width: 100%;
height: auto;
background: linear-gradient(45deg, #3bade3, #9844b7, #44ea76);
background-size: 200% 200%;
-webkit-animation: bgGradient 20s ease infinite;
animation: bgGradient 20s ease infinite;
}
.primary-sec .primary-wrap {
padding-top: 100px;
padding-bottom: 100px;
}
.primary-sec .primary-wrap .heading-2 {
width: 100%;
max-width: 65%;
padding-top: 80px;
padding-bottom: 80px;
margin-right: auto;
margin-left: auto;
font-size: 36px;
font-weight: 700;
color: #fff;
letter-spacing: -0.2px;
line-height: 1.5;
}
.standard-sec .standard-wrap .cat-icon {
display: block;
width: 200px;
height: 200px;
padding: 25px;
margin-left: auto;
margin-right: auto;
}
.standard-sec .standard-wrap .catch-img {
width: 100%;
max-width: 200px;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
}
.standard-sec .standard-wrap .catch-img img {
display: block;
width: 100%;
height: auto;
}
.standard-sec .standard-wrap .heading-2 {
width: 100%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
font-size: 36px;
font-weight: 700;
color: #252525;
letter-spacing: -0.2px;
line-height: 1.5;
margin-bottom: 40px;
text-align: center;
}
.standard-sec .standard-wrap .heading-2 .sub-ttl {
font-size: 19px;
font-weight: 400;
line-height: 1;
color: #808080;
text-align: center;
}
.standard-sec .standard-wrap .lead {
width: 100%;
max-width: 750px;
font-size: 19px;
font-weight: 400;
color: #888888;
margin-left: auto;
margin-right: auto;
margin-bottom: 16px;
}
.standard-sec .standard-wrap .annotation {
font-size: 0.875rem;
color: #777;
}
.standard-sec .standard-wrap .dl-table {
width: 100%;
height: auto;
border: 1px solid #dee2e6;
}
.standard-sec .standard-wrap .dl-table dl {
display: flex;
flex-wrap: nowrap;
width: 100%;
height: auto;
font-size: 0.875rem;
color: #777;
}
.standard-sec .standard-wrap .dl-table dl dt {
width: 25%;
min-width: 200px;
padding: 12px;
border: 1px solid #dee2e6;
font-weight: 500;
}
.standard-sec .standard-wrap .dl-table dl dt p {
margin-bottom: 0 !important;
}
.standard-sec .standard-wrap .dl-table dl dd {
width: 75%;
max-width: calc(100% - 200px);
padding: 12px;
border: 1px solid #dee2e6;
}
.standard-sec .standard-wrap .dl-table dl:nth-last-of-type(odd) {
background: rgba(0, 0, 0, 0.05);
}
.standard-sec .standard-wrap .caption {
font-size: 0.875rem;
color: #777;
}
.standard-sec .standard-wrap .back-home {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: auto;
padding-top: 50px;
padding-bottom: 50px;
}
.standard-sec .standard-wrap .content-list-wrap {
list-style: disc;
padding-left: 1rem;
}
.standard-sec .standard-wrap .content-list-wrap li {
font-size: 0.875rem;
color: #777;
}
.standard-sec .standard-wrap .content-ol-wrap {
list-style: none;
padding-left: 0.5rem;
}
.standard-sec .standard-wrap .content-ol-wrap li {
font-size: 0.875rem;
color: #777;
counter-increment: cnt;
}
.standard-sec .standard-wrap .content-ol-wrap li::before {
content: "(" counter(cnt) ") ";
}
.dx-sec .standard-wrap .heading-2 {
width: 100%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.dx-sec .standard-wrap .heading-2 img {
display: block;
width: 100%;
height: auto;
}
.dx-sec .standard-wrap .content-wrap {
padding-top: 30px;
padding-bottom: 30px;
}
.dx-sec .standard-wrap .content-wrap .content-item {
width: 100%;
max-width: 750px;
margin-left: auto;
margin-right: auto;
}
.dx-sec .standard-wrap .content-wrap .content-item .heading-3 {
font-size: 18px;
text-align: center;
color: #252525;
font-weight: 700;
font-variant-ligatures: common-ligatures;
margin-top: 0;
letter-spacing: -0.2px;
line-height: unset;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead {
margin-bottom: 10px;
font-size: 19px;
font-weight: 400;
color: #888888;
text-align: center;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead .emphasis {
font-size: 2.625rem;
font-weight: 700;
color: #3bade3;
background: -webkit-linear-gradient(45deg, #3bade3, #9844b7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.dx-sec .standard-wrap .content-wrap .content-item .catch {
font-size: 1rem;
font-weight: 400;
text-align: center;
color: #29abe2;
}
.custom-sec {
width: 100%;
height: auto;
padding-top: 100px;
padding-bottom: 100px;
background: #4782d3;
}
.custom-sec .custom-wrap .heading-2 {
font-size: 36px;
font-weight: 700;
color: #fff;
margin-bottom: 50px;
text-align: center;
}
.custom-sec .custom-wrap .content-wrap {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 50px;
padding-bottom: 50px;
border-bottom: 1px solid #fff;
}
.custom-sec .custom-wrap .content-wrap .heading-3 {
width: 50%;
color: #fff;
font-size: 36px;
font-weight: 700;
font-variant-ligatures: common-ligatures;
margin-top: 0;
letter-spacing: -0.2px;
line-height: 1.5;
margin-bottom: 8px;
}
.custom-sec .custom-wrap .content-wrap .heading-3 .text-header {
color: #29abe2;
font-size: 100px;
}
.custom-sec .custom-wrap .content-wrap .heading-3 .text-jp {
color: #fff;
margin-top: 0;
margin-bottom: 1rem;
font-weight: 400;
letter-spacing: 0em;
font-size: 14px;
line-height: 1.65714286em;
-webkit-font-smoothing: antialiased;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap {
width: 50%;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap .heading-4 {
font-size: 26px;
margin-bottom: 8px;
color: #fff;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap .text-desc {
margin-top: 0;
margin-bottom: 1rem;
color: #fff;
font-weight: 400;
letter-spacing: 0em;
font-size: 14px;
line-height: 1.65714286em;
-webkit-font-smoothing: antialiased;
}
.custom-sec .custom-wrap .content-wrap:last-of-type {
border-bottom: none;
}
.additional-sec {
position: relative;
width: 100%;
height: auto;
}
.additional-sec .additional-wrap .text-wrap {
height: 100%;
display: flex;
flex-wrap: wrap;
padding: 260px 0;
}
.additional-sec .additional-wrap .text-wrap .heading-2 {
flex: 0 0 66.666667%;
font-size: 36px;
font-weight: 700;
line-height: 3rem;
color: #fff;
margin-bottom: 8px;
}
.additional-sec .additional-wrap .text-wrap .lead {
flex: 0 0 66.666667%;
font-size: 19px;
font-weight: 700;
line-height: 1.68421053em;
padding-top: 30px;
margin-bottom: 16px;
color: white;
}
.additional-sec .additional-wrap .bg-wrap {
z-index: -200;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
background: url(//www.hassei-inc.com/wp-content/uploads/img_1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: background-position 1s ease;
}
.additional-sec .additional-wrap .bg-overlay {
z-index: -190;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.work-hero {
padding-bottom: 25px;
}
.work-hero .hero-wrap {
padding-top: 40px;
}
.work-hero .hero-wrap .heading-ttl {
font-size: 19px;
font-weight: 700;
color: #29abe2;
text-align: center;
padding-bottom: 20px;
}
.work-hero .hero-wrap .catch {
font-size: 36px;
font-weight: 700;
line-height: 52px;
text-align: center;
}
.work-hero .hero-wrap .catch .emphasis {
background: linear-gradient(180deg, #00ffff, #29abe2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
color: #acb6e5;
}
.work-count {
width: 100%;
margin-bottom: 60px;
}
.work-count .count-wrap {
font-size: 36px;
text-align: center;
}
.case-list {
position: relative;
width: 100%;
height: auto;
z-index: 5;
}
.case-list .case-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: auto;
}
.case-list .case-wrap .case-item {
position: relative;
display: block;
width: 25%;
height: auto;
overflow: hidden;
}
.case-list .case-wrap .case-item .case-link {
position: relative;
display: block;
width: 100%;
height: auto;
transition: all 0.5s ease;
}
.case-list .case-wrap .case-item .case-link img {
position: relative;
display: block;
width: 100%;
height: auto;
transform-origin: center;
transition: all 0.5s ease;
z-index: 10;
}
.case-list .case-wrap .case-item .case-link:hover img {
transform: scale(1.1);
z-index: 1;
}
.case-list .case-wrap .case-item .case-link::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(71, 130, 211, 0.8);
z-index: 4;
content: "";
}
.case-list .case-wrap .case-item .case-item-header {
position: absolute;
top: 20px;
left: 20px;
z-index: 5;
}
.case-list .case-wrap .case-item .case-item-header .works-ttl {
font-size: 1rem;
color: #fff;
margin-bottom: 5px;
}
.case-list .case-wrap .case-item .case-item-header .works-location {
font-size: 0.8125rem;
color: #fff;
}
.list-link-sec {
display: block;
}
.list-link-sec .container .permalink-wrap {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding-top: 80px;
padding-bottom: 80px;
}
.list-link-sec .container .permalink-wrap .link-item {
width: calc(50% - 20px);
}
@media screen and (max-width: 767px) {
.list-link-sec .container .permalink-wrap .link-item {
margin-bottom: 20px;
}
}
.list-link-sec .container .permalink-wrap .link-item a {
position: relative;
display: block;
width: 100%;
height: 330px;
transition: all 0.3s ease-out;
}
.list-link-sec .container .permalink-wrap .link-item a .link-ttl {
position: absolute;
left: 0;
bottom: 40px;
width: 100%;
font-size: 28px;
font-weight: 500;
color: #fff;
text-align: center;
transition: all 0.3s ease-out;
z-index: 3;
}
.list-link-sec .container .permalink-wrap .link-item a .thumb-img {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
}
.list-link-sec .container .permalink-wrap .link-item a .thumb-img img {
display: block;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.list-link-sec .container .permalink-wrap .link-item a::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: rgba(71, 130, 211, 0.4);
border-radius: 16px;
transition: all 0.3s ease-out;
z-index: 2;
content: "";
}
.list-link-sec .container .permalink-wrap .link-item a:hover .link-ttl {
filter: drop-shadow(0 0 0.8px rgba(0, 0, 0, 0.7));
}
.list-link-sec .container .permalink-wrap .link-item a:hover::after {
background: transparent;
}
.legal-article {
margin-bottom: 100px;
}
.legal-article .legal-section .heading {
padding-top: 30px;
padding-bottom: 15px;
margin-bottom: 20px;
font-size: 36px;
border-bottom: 4px solid #4782d3;
}
.legal-article .legal-section p {
color: #777;
font-size: 14px;
margin-bottom: 20px;
}
.legal-article .legal-section p .emphasis {
font-weight: 700;
}
.legal-article .legal-section ul {
padding-left: 40px;
list-style-type: disc;
}
.legal-article .legal-section ul li {
color: #777;
font-size: 14px;
margin-bottom: 10px;
}
.legal-article .legal-section ul li ol {
padding-top: 20px;
padding-left: 40px;
}
.legal-article .legal-section ol {
padding-left: 40px;
}
.legal-article .legal-section ol li {
color: #777;
font-size: 14px;
margin-bottom: 10px;
}
@media screen and (max-width: 991px) {
.legal-article .legal-section .heading {
font-size: 28px;
}
}
@media screen and (max-width: 767px) {
.primary-sec .primary-wrap .heading-2 {
max-width: 80%;
padding-top: 0;
padding-bottom: 0;
font-size: 28px;
}
.standard-sec .standard-wrap {
max-width: 80%;
}
.standard-sec .standard-wrap .heading-2 {
margin-bottom: 40px;
font-size: 28px;
}
.standard-sec .standard-wrap .lead {
font-size: 16px;
}
.dx-sec .standard-wrap {
max-width: 80%;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead {
font-size: 16px;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead .emphasis {
font-size: 2.25rem;
}
.custom-sec {
padding-top: 60px;
padding-bottom: 60px;
}
.custom-sec .custom-wrap {
max-width: 80%;
padding-left: 0;
padding-right: 0;
}
.custom-sec .custom-wrap .heading-2 {
margin-bottom: 0;
}
.custom-sec .custom-wrap .content-wrap {
flex-wrap: wrap;
}
.custom-sec .custom-wrap .content-wrap .heading-3 {
width: 100%;
margin-bottom: 20px;
line-height: 1;
}
.custom-sec .custom-wrap .content-wrap .heading-3 .text-header {
font-size: 68px;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap {
width: 100%;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap .heading-4 {
font-size: 20px;
}
.additional-sec .additional-wrap {
max-width: 80%;
padding-left: 0;
padding-right: 0;
}
.additional-sec .additional-wrap .text-wrap {
padding: 100px 0;
}
.additional-sec .additional-wrap .text-wrap .heading-2 {
flex: 0 0 100%;
font-size: 28px;
line-height: 1.4;
}
.additional-sec .additional-wrap .text-wrap .lead {
font-size: 16px;
}
.primary-sec .primary-wrap {
padding-left: 0;
padding-right: 0;
}
.primary-sec .primary-wrap .heading-2 {
max-width: 80%;
padding-top: 0;
padding-bottom: 0;
font-size: 28px;
}
.standard-sec .standard-wrap {
width: 80%;
padding-left: 0;
padding-right: 0;
}
.standard-sec .standard-wrap .dl-table dl dt {
width: 120px;
min-width: unset;
}
.standard-sec .standard-wrap .dl-table dl dd {
width: calc(100% - 120px);
max-width: unset;
}
.list-link-sec .container .permalink-wrap .link-item {
width: 100%;
}
.legal-article .legal-section .heading {
font-size: 20px;
}
}
@media screen and (max-width: 540px) {
.primary-sec .primary-wrap .heading-2 {
font-size: 20px;
}
.standard-sec .standard-wrap .heading-2 {
font-size: 20px;
}
.standard-sec .standard-wrap .lead {
font-size: 14px;
}
.dx-sec .standard-wrap .content-wrap .content-item .heading-3 {
font-size: 18px;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead {
font-size: 14px;
}
.dx-sec .standard-wrap .content-wrap .content-item .lead .emphasis {
font-size: 1.5rem;
}
.custom-sec .custom-wrap .heading-2 {
font-size: 24px;
}
.custom-sec .custom-wrap .content-wrap .heading-3 {
font-size: 28px;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap .heading-4 {
font-size: 16px;
}
.custom-sec .custom-wrap .content-wrap .desc-wrap .text-desc {
font-size: 12px;
}
.additional-sec .additional-wrap .text-wrap {
padding: 40px 0;
}
.additional-sec .additional-wrap .text-wrap .heading-2 {
font-size: 22px;
}
.additional-sec .additional-wrap .text-wrap .lead {
flex: 0 0 100%;
font-size: 14px;
}
.standard-sec .standard-wrap .dl-table dl {
flex-wrap: wrap;
}
.standard-sec .standard-wrap .dl-table dl dt {
width: 100%;
background: rgba(0, 0, 0, 0.05);
}
.standard-sec .standard-wrap .dl-table dl dd {
width: 100%;
}
.standard-sec .standard-wrap .dl-table dl:nth-last-of-type(odd) {
background: unset;
}
.legal-article .legal-section .heading {
font-size: 16px;
}
}
.error404 {
position: relative;
display: block;
width: 100%;
height: 100vh;
background-image: url(https://www.hassei-inc.com/wp-content/uploads/bg_error.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #000;
}
.error404 .error-content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.error404 .error-content-wrap {
text-align: center;
}
.error404 .error-content-wrap .heading-1 {
font-size: 80px;
font-weight: 800;
margin-bottom: 30px;
font-size: 4.5vw;
line-height: 1.1;
}
@media screen and (max-width: 767px) {
.error404 .error-content-wrap .heading-1 {
font-size: 36px;
}
}
.error404 .error-content-wrap .heading-1-en {
font-size: 5.5vw;
}
@media screen and (max-width: 767px) {
.error404 .error-content-wrap .heading-1-en {
font-size: 42px;
}
}
.error404 .error-content-wrap .sub-ttl {
font-size: 3vw;
font-weight: 600;
margin-bottom: 8px;
}
@media screen and (max-width: 767px) {
.error404 .error-content-wrap .sub-ttl {
font-size: 28px;
}
}
.error404 .error-content-wrap p {
font-size: 18px;
margin-bottom: 24px;
}
.error404 .error-content-wrap p a {
color: #00ade6;
font-weight: 500;
}
.error404 .footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: transparent;
color: #fff;
font-weight: 500;
}
.fadeInTrigger {
opacity: 0;
transform: translate(0, 200px);
-webkit-transform: translate(0, 200px);
-moz-transform: translate(0, 200px);
-ms-transform: translate(0, 200px);
-o-transform: translate(0, 200px);
}
.fadeInTrigger--footer .l-container {
padding-left: 0;
padding-right: 0;
transition: all 0.8s ease-in-out;
}
.fadeInTrigger--footer .l-container .l-footer {
border-radius: 0;
transition: all 0.8s ease-in-out;
}
.fadeInTrigger.scrollIn {
animation: fadeIn 1s ease-in-out forwards;
-webkit-animation: fadeIn 1s ease-in-out forwards;
}
.fadeInTrigger.scrollIn.fadeInTrigger--footer .l-container {
padding-left: 120px;
padding-right: 120px;
}
@media screen and (max-width: 1440px) {
.fadeInTrigger.scrollIn.fadeInTrigger--footer .l-container {
padding-left: 60px;
padding-right: 60px;
}
}
@media screen and (max-width: 1240px) {
.fadeInTrigger.scrollIn.fadeInTrigger--footer .l-container {
padding-left: 30px;
padding-right: 30px;
}
}
@media screen and (max-width: 767px) {
.fadeInTrigger.scrollIn.fadeInTrigger--footer .l-container {
padding-left: 0;
padding-right: 0;
}
}
.fadeInTrigger.scrollIn.fadeInTrigger--footer .l-container .l-footer {
border-radius: 10px;
}
.fadeInTrigger--second.scrollIn {
animation: fadeIn 1s ease-in-out 0.3s forwards;
-webkit-animation: fadeIn 1s ease-in-out 0.3s forwards;
}
.fadeInTrigger--third.scrollIn {
animation: fadeIn 1s ease-in-out 0.6s forwards;
-webkit-animation: fadeIn 1s ease-in-out 0.6s forwards;
}
@keyframes fadeIn {
0% {
transform: translate(0, 200px);
-webkit-transform: translate(0, 200px);
-moz-transform: translate(0, 200px);
-ms-transform: translate(0, 200px);
-o-transform: translate(0, 200px);
opacity: 0;
}
100% {
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
opacity: 1;
}
}
.js-text-fadein-line .char {
display: inline-block;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.js-text-fadein-line.is-active .char {
opacity: 1;
transform: translateY(0);
}
.c-parallax__wrapper {
position: relative;
width: 100%;
aspect-ratio: 1920/750;
overflow: hidden;
}
.c-parallax__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
will-change: transform;
}
.c-parallax__content {
position: relative;
z-index: 1;
padding: 3rem;
color: #fff;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.p-recruit {
position: relative;
display: block;
width: 100%;
}
.p-recruit__fv {
margin-top: -160px;
}
.p-recruit__description {
display: flex;
width: 100%;
height: auto;
min-height: 100vh;
padding-top: 100px;
padding-bottom: 100px;
align-items: center;
background-image: url(//www.hassei-inc.com/wp-content/uploads/recruit_kv-1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.p-recruit-data__inner--first {
padding-right: 10px;
padding-top: 50px;
padding-bottom: 50px;
border-right: 1px solid #fff;
}
@media screen and (max-width: 767px) {
.p-recruit-data__inner--first {
padding-right: 0;
border-right: none;
padding-top: 0;
padding-bottom: 0;
}
}
.p-recruit-data__inner--second {
padding-left: 10px;
padding-top: 50px;
padding-bottom: 50px;
}
@media screen and (max-width: 767px) {
.p-recruit-data__inner--second {
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}
}
.p-recruit-data__item {
width: 100%;
}
.p-recruit-data__item--first {
aspect-ratio: 600/645;
border-bottom: 1px solid #fff;
}
.p-recruit-data__item--second {
aspect-ratio: 600/400;
}
@media screen and (max-width: 767px) {
.p-recruit-data__item--second {
border-bottom: 1px solid #fff;
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-recruit-data__item--third {
aspect-ratio: 600/645;
border-bottom: 1px solid #fff;
}
.p-recruit-data__item--fourth {
aspect-ratio: 600/400;
border-bottom: 1px solid #fff;
}
.p-recruit-data__item--fifth {
aspect-ratio: 600/400;
}
@media screen and (max-width: 767px) {
.p-recruit-data__item--fifth {
padding-top: 20px;
padding-bottom: 20px;
}
}
.p-vision-map__block--first {
gap: 30px;
padding-top: 50px;
}
@media screen and (max-width: 991px) {
.p-vision-map__block--first {
gap: 50px;
}
}
.p-vision-map__block--second {
position: relative;
display: block;
height: auto;
padding-top: 130px;
}
@media screen and (max-width: 991px) {
.p-vision-map__block--second {
padding-top: 50px;
}
}
@media screen and (max-width: 480px) {
.p-vision-map__block--second {
padding-top: 25px;
}
}
.p-vision-map__block--second .p-vision-map__catch {
margin-bottom: 0;
}
.p-vision-map__block--background-line {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 75%;
transform: translateX(-50%);
z-index: 1;
}
@media screen and (max-width: 991px) {
.p-vision-map__block--background-line {
transform: translateX(-50%) translateY(-10%) scaleY(2.2);
}
}
@media screen and (max-width: 480px) {
.p-vision-map__block--background-line {
transform: translateX(-50%) translateY(-10%) scaleY(4.5);
}
}
.p-vision-map__item {
position: relative;
border: 1px solid #2ca6e0;
border-radius: 10px;
padding: 60px 20px;
text-align: center;
background-color: #fff;
z-index: 2;
}
.p-vision-map__item-second {
position: relative;
padding: 20px;
margin: 0 auto 70px;
background-color: #fff;
z-index: 10;
}
@media screen and (max-width: 1240px) {
.p-vision-map__item-second {
margin-bottom: 50px;
}
}
@media screen and (max-width: 480px) {
.p-vision-map__item-second {
margin-bottom: 25px;
}
}
.p-vision-map__item-second-top {
max-width: 580px;
}
.p-vision-map__item-second-middle {
padding-top: 50px;
padding-bottom: 50px;
color: #fff;
background-color: #2ca6e0;
}
.p-vision-map__item-second-bottom {
margin-top: 100px;
padding-top: 80px;
padding-bottom: 50px;
}
@media screen and (max-width: 480px) {
.p-vision-map__item-second-bottom {
margin-top: 70px;
}
}
.p-vision-map__item-second-bottom .p-vision-map__title {
top: -40px;
padding-top: 20px;
background-color: #fff;
}
.p-vision-map__title {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding-left: 20px;
padding-right: 20px;
font-family: "Oswald", sans-serif;
color: #2ca6e0;
font-size: clamp(1.75rem, -0.487rem + 4.66vw, 3.125rem);
background-color: #fff;
line-height: 1.5rem;
}
@media screen and (max-width: 1240px) {
.p-vision-map__title--last-box {
width: 60%;
}
}
@media screen and (max-width: 767px) {
.p-vision-map__title--last-box {
width: 75%;
}
}
.p-vision-map__label {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 12px;
}
@media screen and (max-width: 1240px) {
.p-vision-map__label {
display: block;
margin: 10px auto 0;
}
}
.p-vision-map__catch {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
}
.p-vision-map__catch--sub {
margin-top: 20px;
font-size: 22px;
font-weight: 700;
margin-bottom: 0;
}
.p-vision-map__description {
font-size: 12px;
margin-bottom: 20px;
}
.p-recruit__heading {
font-size: 1.8rem;
margin-bottom: 1em;
}
.p-recruit__block {
margin-bottom: 2em;
}
.p-recruit__title {
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 0.5em;
}
.p-recruit__list {
display: grid;
grid-template-columns: 140px 1fr;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 80px;
border-bottom: 1px solid #222;
}
@media screen and (max-width: 767px) {
.p-recruit__list {
grid-template-columns: 100%;
width: calc(100% - 20px);
margin-left: 0;
}
}
.p-recruit__list dt {
font-size: clamp(1rem, 0.821rem + 0.89vw, 1.25rem);
font-weight: 500;
}
@media screen and (max-width: 767px) {
.p-recruit__list dt {
margin-bottom: 5px;
}
}
.p-recruit__list dd {
font-size: 15px;
font-weight: 400;
margin-left: 1em;
padding-top: 5px;
}
@media screen and (max-width: 767px) {
.p-recruit__list dd {
margin-left: 0;
padding-top: 0;
}
}
.p-recruit__list dd a {
color: #0071bc;
font-weight: 500;
}
.text-links-white {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
}
.text-links-white .line {
display: inline-block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 1.25rem;
}
.text-links-white .arrow {
display: inline-block;
width: 1.45rem;
height: 1.45rem;
margin-left: 10px;
}
.text-links-white .arrow svg {
transform: translateY(-0.7rem);
}
.text-links-white .arrow svg .cls-2 {
fill: #fff;
}
.text-links-white .arrow svg .cls-1 {
transform: translateX(0);
transition: all 0.4s ease-in-out;
fill: #000;
}
.text-links-white:hover .arrow svg .cls-1 {
transform: translateX(5px);
}
.bg-light-gray {
background-color: #f2f2f2;
}
.mb10,
.u-mb10 {
margin-bottom: 10px !important;
}
.mb20,
.u-mb20 {
margin-bottom: 20px !important;
}
.mb30,
.u-mb30 {
margin-bottom: 30px !important;
}
.mb40,
.u-mb40 {
margin-bottom: 40px !important;
}
@media screen and (max-width: 767px) {
.mb40,
.u-mb40 {
margin-bottom: 30px !important;
}
}
@media screen and (max-width: 540px) {
.mb40,
.u-mb40 {
margin-bottom: 20px !important;
}
}
.mb50,
.u-mb50 {
margin-bottom: 50px !important;
}
@media screen and (max-width: 767px) {
.mb50,
.u-mb50 {
margin-bottom: 30px !important;
}
}
@media screen and (max-width: 540px) {
.mb50,
.u-mb50 {
margin-bottom: 20px !important;
}
}
.mb80,
.u-mb80 {
margin-bottom: 80px !important;
}
.mb100,
.u-mb100 {
margin-bottom: 100px !important;
}
.u-mt10 {
margin-top: 10px !important;
}
.u-mt20 {
margin-top: 20px !important;
}
.u-mt30 {
margin-top: 30px !important;
}
.u-mt40 {
margin-top: 40px !important;
}
.u-mt50 {
margin-top: 50px !important;
}
.u-mt60 {
margin-top: 60px !important;
}
.u-mt70 {
margin-top: 70px !important;
}
.u-mt80 {
margin-top: 80px !important;
}
.u-mt90 {
margin-top: 90px !important;
}
.u-mt100 {
margin-top: 100px !important;
}
.pt0,
.u-pt0 {
padding-top: 0 !important;
}
.pt10,
.u-pt10 {
padding-top: 10px !important;
}
.pt20,
.u-pt20 {
padding-top: 20px !important;
}
.pt30,
.u-pt30 {
padding-top: 30px !important;
}
.pt40,
.u-pt40 {
padding-top: 40px !important;
}
.pt50,
.u-pt50 {
padding-top: 50px !important;
}
.pl10,
.u-pl10 {
padding-left: 10px !important;
}
.pl20,
.u-pl20 {
padding-left: 20px !important;
}
.pl30,
.u-pl30 {
padding-left: 30px !important;
}
.pl1r,
.u-plr {
padding-left: 1rem !important;
}
.u-color--blue {
color: #0071bc;
}
.u-line-height--xxxs {
line-height: 1;
}
.u-line-height--xxs {
line-height: 1.2;
}
.u-line-height--xs {
line-height: 1.4;
}
.u-line-height--sm {
line-height: 1.6;
}
.u-line-height--md {
line-height: 1.8;
}
.u-line-height--lg {
line-height: 2;
}
@media screen and (max-width: 991px) {
.u-line-height--lg {
line-height: 1.8;
}
}
@media screen and (max-width: 767px) {
.u-line-height--lg {
line-height: 1.6;
}
}
.u-line-height--xl {
line-height: 2.2;
}
.u-line-height--xxl {
line-height: 2.4;
}
.u-line-height--xxxl {
line-height: 2.6;
}
.u-font--xxs {
font-size: 9px;
}
.u-font--xs {
font-size: 12px;
}
.u-font--sm {
font-size: 14px;
}
.u-font--md {
font-size: 16px;
}
.u-font--lg {
font-size: 18px;
}
.u-font--xl {
font-size: 20px;
}
.u-font--xxl {
font-size: 22px;
}
.u-font-size--lg {
font-size: 1.125rem;
}
.u-font-size--xl {
font-size: 1.25rem;
}
.u-font-size--xxl {
font-size: 1.5rem;
}
.u-fw--500 {
font-weight: 500;
}
.u-fw--600 {
font-weight: 500;
}
.u-fw--800 {
font-weight: 700;
}
.u-border {
border: 1px solid #000;
}
.u-sp-off, .u-sp--off {
display: block;
}
@media screen and (max-width: 540px) {
.u-sp-off, .u-sp--off {
display: none;
}
}
.u-sp-on, .u-sp--on {
display: none;
}
@media screen and (max-width: 540px) {
.u-sp-on, .u-sp--on {
display: block;
}
}
.u-tab-off, .u-tab--off {
display: block;
}
@media screen and (max-width: 767px) {
.u-tab-off, .u-tab--off {
display: none;
}
}
.u-pc--off {
display: block;
}
@media screen and (max-width: 1280px) {
.u-pc--off {
display: none;
}
}
.slick-prev:before,
.slick-next:before {
display: none;
}
.recruit-arrow-link {
display: inline-block;
margin-right: 5px;
width: 20px;
height: 20px;
}
.grecaptcha-badge {
visibility: hidden;
}