h1,
h2,
h3,
.mincho {
font-family: "Lato", "Noto Serif JP", "Yu Mincho", serif;
}
body {
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
background-color: #f5f5f4;
}
html {
scroll-behavior: smooth;
}
body.nav-open-active {
overflow: hidden;
}
:root {
--section-space: 100px;
}
section {
padding-top: var(--section-space);
padding-bottom: var(--section-space);
color: #342e22;
}
@media (max-width: 768px) {
:root {
--section-space: 60px;
}
}
h2 {
font-size: clamp(1.8rem, 2vw + 0.5rem, 2.25rem);
font-weight: 100;
letter-spacing: 0.4em;
margin-bottom: 1.5em;
text-align: center;
}
h3 {
font-size: 1.25rem;
font-weight: 100;
letter-spacing: 0.4em;
margin: 2em 0 0;
text-align: left;
}
p {
font-size: 1rem;
letter-spacing: 0.1em;
line-height: 200%;
text-align: center;
margin-top: 1em;
font-feature-settings: "palt";
}
dt,
dd {
font-size: 1rem;
letter-spacing: 0.15em;
line-height: 200%;
}
.textLandscape {
display: inline-block;
transform: scaleX(2.5);
transform-origin: left;
padding-right: 1em;
}
.textCenter {
text-align: center;
}
a,
a:visited {
color: #2271b1;
text-decoration: underline;
}
a:hover {
opacity: 0.6;
text-decoration: none;
}
@media (max-width: 768px) {
h2 {
letter-spacing: 0.1em;
}
p {
text-align: left;
letter-spacing: 0;
}
.textCenter {
text-align: center;
}
} header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 999;
background: transparent;
transition: all 0.4s ease;
}
header a,
header a:visited {
text-decoration: none;
}
header.is-scrolled { height: 70px; }
.nav-list {
display: flex;
justify-content: flex-end;
list-style: none;
height: 40px;
gap: 1rem;
margin: 20px 24px;
}
.nav-list li {
display: flex;
align-items: center;
}
.nav-list li a {
color: #342e22;
display: inline-block;
position: relative;
z-index: 1000;
padding: 0 1rem;
line-height: 1;
}
.nav-list li:last-child a {
background-color: #342e22;
color: #fff;
border-radius: 40px;
display: inline-block;
position: relative;
z-index: 1000;
padding: 0.5em 1rem;
line-height: 1;
}
.nav-list li:last-child a::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-image: url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/mail.svg);
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
margin-right: 4px;
}
.nav-content img {
display: none;
}
.nav-open {
position: relative;
z-index: 110;
}
.nav-unshown,
.nav-open {
display: none;
}
@media (max-width: 768px) {
.nav-content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #342e22;
z-index: 90;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(100%);
transition: transform 0.4s ease;
}
.nav-content img {
display: block;
}
.nav-open {
display: block;
position: fixed;
right: 20px;
top: 25px;
width: 30px;
height: 24px;
z-index: 110;
cursor: pointer;
} .nav-open span,
.nav-open span::before,
.nav-open span::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background: #333;
display: block;
transition: 0.3s;
} .nav-open span {
top: 11px;
}
.nav-open span::before {
top: -10px;
content: "";
}
.nav-open span::after {
top: 10px;
content: "";
}
#nav-input:checked ~ .nav-open span {
background: transparent;
}
#nav-input:checked ~ .nav-open span::before {
top: 0;
transform: rotate(45deg);
}
#nav-input:checked ~ .nav-open span::after {
top: 0;
transform: rotate(-45deg);
}
#nav-input:checked ~ .nav-open span::before,
#nav-input:checked ~ .nav-open span::after {
background: #fff;
}
#nav-input:checked ~ .nav-content {
transform: translateX(0);
}
.nav-list {
list-style: none;
padding: 0;
margin: 0 auto 90px;
width: 90%;
height: auto;
text-align: center;
flex-direction: column;
gap: 2rem;
}
.nav-list ul {
width: 100%;
padding: 1em;
margin-top: 0;
flex-direction: column;
}
.nav-list li a,
.nav-list li:last-child a {
width: 100%;
padding: 1em;
font-size: 1.2em;
display: block;
letter-spacing: 0.2em;
text-align: left;
border: none;
mix-blend-mode: normal !important;
color: #fff !important;
}
.nav-content {
display: flex;
flex-direction: column;
vertical-align: top;
justify-content: flex-start;
padding-top: 40px;
background: #342e22 !important;
}
.global-nav img {
width: 70%;
height: auto;
margin: 0;
filter: brightness(0) invert(1);
text-align: right;
}
} .mv-container {
position: relative;
width: 100%;
height: calc(100vh - 80px);
margin-bottom: 80px;
}
.site-logo {
position: absolute;
bottom: -30px;
left: 2%;
z-index: 10;
mix-blend-mode: difference;
margin: 0;
display: block;
width: 50%;
}
.site-logo img {
display: block;
height: auto;
width: 100%;
filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
.mv-container {
height: calc(100vh - 160px);
}
}
.scroll_down {
position: absolute;
right: 20px;
bottom: 0;
width: 10px;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
mix-blend-mode: difference;
z-index: 9;
}
.scroll_down::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80%;
}
.scroll_down a {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 10px;
padding: 10px 10px 110px;
color: #fff;
font-size: 11px;
font-weight: 100;
line-height: 0;
letter-spacing: 0.4em;
text-transform: uppercase;
text-decoration: none;
writing-mode: vertical-lr;
transition: 0.2s;
overflow: hidden;
margin: auto;
}
.scroll_down a:before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 100px;
background: #fff;
}
.scroll_down a:after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 1px;
height: 100px;
background: #342e22;
animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@keyframes sdl01 {
0% {
transform: scale(1, 0);
transform-origin: 0 0;
}
50% {
transform: scale(1, 1);
transform-origin: 0 0;
}
50.1% {
transform: scale(1, 1);
transform-origin: 0 100%;
}
100% {
transform: scale(1, 0);
transform-origin: 0 100%;
}
}
@media (max-width: 768px) {
.site-logo {
width: 70%;
}
} .background-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden; z-index: 1; }
.slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
animation: fadeSlider 20s infinite;
border-radius: 0 0 0 120px;
}
@media (max-width: 768px) {
.slide {
border-radius: 0 0 0 120px;
}
}
.bg1 {
background-image: url(https://www.craneschild.com/wp-content/themes/craneschild/assets/css/assets/images/mv01.jpg);
}
.bg2 {
background-image: url(https://www.craneschild.com/wp-content/themes/craneschild/assets/css/assets/images/mv02.jpg);
animation-delay: 5s;
}
.bg3 {
background-image: url(https://www.craneschild.com/wp-content/themes/craneschild/assets/css/assets/images/mv03.jpg);
animation-delay: 10s;
}
.bg4 {
background-image: url(https://www.craneschild.com/wp-content/themes/craneschild/assets/css/assets/images/mv04.jpg);
animation-delay: 15s;
} @keyframes fadeSlider {
0% {
opacity: 0;
}
20% {
opacity: 1;
} 33% {
opacity: 1;
} 43% {
opacity: 0;
} 100% {
opacity: 0;
}
} #concept {
min-height: 750px;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 80px;
}
.concept_inner {
max-width: 370px;
width: 70%;
margin: auto;
}
#concept img {
width: 100%;
height: auto;
}
.concept_img01 {
position: absolute;
left: 12px;
top: 0;
width: 20vw;
max-width: 275px;
animation: concept_img 10s infinite;
}
.concept_img02 {
position: absolute;
right: 15px;
top: 0;
width: 30vw;
max-width: 359px;
animation: concept_img 6s ease-in-out infinite;
}
.concept_img03 {
position: absolute;
left: -20px;
bottom: 15px;
width: 30vw;
max-width: 438px;
animation: concept_img 12s infinite;
}
.concept_img04 {
position: absolute;
right: 154px;
bottom: 53px;
width: 20vw;
max-width: 279px;
animation: concept_img 8s ease-in-out infinite;
}
@media (max-width: 768px) {
.concept_inner {
margin: 200px auto 240px;
width: 90%;
}
#concept img {
width: 100%;
height: auto;
}
.concept_img01 {
width: 30vw;
left: 0;
top: 62px;
}
.concept_img02 {
width: 40vw;
right: -15px;
top: 0;
text-align: right;
}
.concept_img03 {
width: 40vw;
left: -24px;
bottom: 6px;
}
.concept_img04 {
width: 30vw;
right: 10px;
bottom: 80px;
text-align: right;
}
}
@keyframes concept_img {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(3px) scale(0.97) rotate(1deg);
}
100% {
transform: translateY(0) scale(1);
}
} .p-parallax-section {
position: relative;
width: 100%;
min-height: 120vh;
clip-path: inset(0);
padding-bottom: 0;
margin-bottom: 0;
padding: 0;
}
.p-parallax-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: -webkit-image-set(
url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/concept_bg.avif) type("image/avif"),
url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/concept_bg.webp) type("image/webp")
);
background-image: image-set(
url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/concept_bg@2x.avif) type("image/avif"),
url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/concept_bg@2x.webp) type("image/webp")
);
background-size: cover;
background-position: center;
will-change: transform;
}
.p-parallax-spacer {
height: 80vh;
}
.p-parallax-content {
position: relative;
min-height: calc(100% - 2px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
background-color: #fff;
text-align: center;
z-index: 1;
}
.about-inner {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
padding-top: 80px;
}
.about-inner h2{
margin-bottom:0;
}
.about-inner p{
margin-top:60px;
}
#about ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px 24px;
margin: 60px auto;
}
.about_img {
display: block;
width: 100%;
height: 100%;
margin-top: 80px;
margin-bottom: -2px;
}
.about_img img {
width: 100%;
height: 100%;
}
.gassyou-img img{
width: 70%;
height: auto;
}
@media (max-width: 768px) {
#about ul li img {
width: 100%;
height: 100%;
}
.gassyou-img img{
width: 100%;
height: auto;
}
} #company .company_inner {
max-width: 914px;
width: 90%;
margin: auto;
}
#company dl {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-top: 40px;
}
#company dt {
font-weight: normal;
padding: 1em 0.5em;
width: 6rem;
border-bottom: solid 1px #342e22;
}
#company dd {
padding: 1em 0.5em;
width: calc(100% - 6rem);
border-bottom: solid 1px #342e22;
} .main-footer {
position: relative;
overflow: hidden;
width: 100%;
height: 100vh;
background-image:
linear-gradient(rgba(52, 46, 34, 0.35), rgba(52, 46, 34, 0.35)),
url(//www.craneschild.com/wp-content/themes/craneschild/assets/images/footer_img@2x.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.main-footer .footer_logo img {
width: 30vw;
height: auto;
display: block;
}
.main-footer p {
position: absolute;
bottom: 1rem;
width: 100%;
text-align: center;
}
@media (max-width: 768px) {
.main-footer .footer_logo img {
width: 60vw;
}
} #otherPages p {
text-align: left;
}
.other-pages {
width: 90%;
max-width: 640px;
height: 100%;
margin: auto;
}
.other-pages form {
padding: 40px 0;
}
.sub-footer p {
display: block;
text-align: center;
margin: 1rem auto;
}
@media (max-width: 768px) {
} .reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity 1.2s ease,
transform 1.2s ease;
} .reveal.active {
opacity: 1;
transform: translateY(0);
}
.delay-1 {
transition-delay: 0.3s;
transform: translateY(30px) rotate(2deg);
}
.reveal-blur {
opacity: 0;
filter: blur(10px); transform: scale(
1.05
); transition:
opacity 1.5s ease,
filter 1.5s ease,
transform 1.5s ease;
} .reveal-blur.active {
opacity: 1;
filter: blur(0); transform: scale(1); }