.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}html {
color: #000;
background: #fff;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
fieldset,
img {
border: 0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
q:before,
q:after {
content: '';
}
abbr,
acronym {
border: 0;
font-variant: normal;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input,
textarea,
select,
button {
color: inherit;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
font-size: 100%;
border-radius: 0;
border: none;
appearance: none;
-webkit-appearance: none;
background-color: inherit;
}
input,
textarea,
select {
font-size: 16px;
}
textarea {
resize: vertical;
display: block;
}
button {
padding: 0;
cursor: pointer;
}
legend {
color: #000;
}
main {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
img {
width: 100%;
height: auto;
vertical-align: bottom;
}
svg {
display: block;
}
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
*::before,
*::after {
box-sizing: border-box;
}* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
img {
width: 100%;
}
li {
list-style: none;
}
a {
text-decoration: none;
display: inline-block;
}
a:hover {
opacity: 0.8;
}
a:visited {
color: var(--main-text);
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 1.625rem;
font-family: var(--accent-font);
z-index: 20;
}
header .header-inner {
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 5px;
background-color: var(--main-color);
padding: 0px 30px; }
@media (max-width: 890px) {
header .header-inner .toggle-button {
width: 30px;
height: 30px;
position: relative;
transition: all 0.5s;
cursor: pointer;
z-index: 20;
}
header .header-inner .toggle-button span {
display: block;
width: 100%;
height: 2px;
background-color: var(--sub-color);
transition: 0.5s;
border-radius: 5px;
position: absolute;
left: 0;
}
header .header-inner .toggle-button span:nth-child(1) {
top: 4px;
}
header .header-inner .toggle-button span:nth-child(2) {
top: 14px;
}
header .header-inner .toggle-button span:nth-child(3) {
bottom: 4px;
}
}
@media (max-width: 890px) {
header .header-inner #mask {
display: none;
transition: 0.5s;
}
}
@media (max-width: 890px) {
header .header-inner.open .toggle-button span {
background-color: var(--accent-color-w);
}
header .header-inner.open .toggle-button span:nth-child(1) {
transform: rotate(-45deg);
top: 50%;
}
header .header-inner.open .toggle-button span:nth-child(2) {
transform: rotate(45deg);
top: 50%;
}
header .header-inner.open .toggle-button span:nth-child(3) {
transform: rotate(45deg);
top: 50%;
}
}
@media (max-width: 890px) {
header .header-inner.open #mask {
display: block;
position: fixed;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
background-color: var(--accent-color-w);
cursor: pointer;
opacity: 0.8;
z-index: 10;
}
}
@media (max-width: 890px) {
header .header-inner.open #navi {
left: 0;
top: 0;
bottom: 0;
opacity: 1;
}
header .header-inner.open #navi ul li {
margin-bottom: 30px;
}
header .header-inner.open #navi ul li a {
color: #ffffff;
}
header .header-inner.open #navi ul li:last-child a {
color: var(--accent-color-b);
}
}
header .header-inner h1 {
width: 150px;
height: 60px;
padding-top: 8px;
}
@media (max-width: 450px) {
header .header-inner h1 {
width: 120px;
padding-top: 13px;
}
}
header .header-inner h1 img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
header .header-inner #navi {
position: absolute;
right: 30px;
}
header .header-inner #navi ul {
display: flex;
justify-content: space-between;
align-items: center;
}
header .header-inner #navi ul li {
padding-right: 30px;
font-size: 0.87rem;
}
header .header-inner #navi ul li a {
padding: 0;
transition: all 0.3s ease 0s;
}
header .header-inner #navi ul li:last-child a {
background-color: var(--sub-color);
padding: 10px 20px;
border-radius: 50px;
font-weight: 500;
color: var(--sub-text-w);
}
header .header-inner #navi ul li:last-child a:hover {
background-color: #2978d3;
color: var(--sub-text-w);
}
@media (max-width: 890px) {
header .header-inner #navi {
position: fixed;
top: 0;
left: -300px;
bottom: 0;
padding: 110px 0 0 30px;
background-color: var(--sub-color);
width: 300px;
transition: all 0.5s;
opacity: 0;
z-index: 20;
}
header .header-inner #navi ul {
flex-direction: column;
}
}
.breadcrumbs {
max-width: 1000px;
}
.main-visual {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
z-index: 0;
}
.main-visual video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
display: block;
z-index: -1;
}
.main-visual h2 {
position: absolute;
bottom: 10%;
right: 0%;
transform: translate(-20%, -50%);
color: var(--sub-text-w);
font-size: 2.5rem;
font-weight: 700;
letter-spacing: 0.15rem;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.main-visual .scroll_down {
position: relative;
width: 100%;
height: 100vh;
}
.main-visual .scroll_down span {
display: inline-block;
position: absolute;
bottom: 0;
left: 40px;
z-index: 2;
width: 20px;
padding: 10px 10px 110px;
color: #ffffff;
font-size: 0.85rem;
font-family: "Roboto", sans-serif;
font-weight: 700;
line-height: 1;
letter-spacing: 0.2rem;
text-transform: uppercase;
writing-mode: vertical-lr;
transition: 0.2s;
overflow: visible;
}
.main-visual .scroll_down span::before {
content: "";
position: absolute;
bottom: 0;
right: 10%;
transform: translateX(calc(-50% + 1px));
width: 2px;
height: 100px;
background: var(--sub-color);
z-index: 1;
}
.main-visual .scroll_down span::after {
content: "";
position: absolute;
bottom: 0;
right: 10%;
transform: translateX(calc(-50% - 1px));
width: 2px;
height: 100px;
background: #ffffff;
z-index: 2;
}
.main-visual #scroll span::after {
-webkit-animation: ScrollDown 1.5s cubic-bezier(1, 0, 0, 1) infinite;
animation: ScrollDown 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}
@media (max-width: 890px) {
.main-visual h2 {
transform: translate(-10%, -50%);
font-size: 1.6rem;
}
}
@media (max-width: 450px) {
.main-visual h2 {
font-size: 1.2rem;
}
}
.top {
display: grid;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: var(--sub-blue);
}
.top .top-bg {
grid-area: 1/1;
background-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/icon/construction-gradi.png);
background-size: cover;
background-position: center;
width: 100%;
height: 120%;
will-change: transform;
opacity: 0.3;
}
.top .top-text-photo {
grid-area: 1/1;
max-width: 800px;
display: flex;
justify-content: center;
align-items: center;
}
.top .top-text-photo .top-text h3 {
font-weight: 500;
font-size: 2.5rem;
margin-bottom: 30px;
color: var(--sub-text-w);
}
.top .top-text-photo .top-text p {
font-size: 1.3rem;
font-weight: 600;
line-height: 2.2rem;
color: var(--sub-text-w);
}
@media (max-width: 890px) {
.top .top-text h3 {
font-size: 1.2rem;
}
.top .top-text p {
font-size: 0.85rem;
}
}
@media (max-width: 450px) {
.top {
height: 70vh;
}
.top .top-text h3 {
font-size: 1rem;
}
.top .top-text p {
font-size: 0.8rem;
}
}
.scroll {
position: relative;
z-index: 2;
height: 100%;
overflow: hidden;
padding: 130px 0;
}
.scroll .scroll-list {
display: flex;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
list-style: none;
padding: 0;
}
.scroll .scroll-list-left {
-webkit-animation: scroll-list-left 70s linear infinite;
animation: scroll-list-left 70s linear infinite;
}
.scroll .scroll-item01 {
border-radius: 5px;
width: 260px;
height: 100%;
margin-right: 50px;
}
.scroll .scroll-item01 img {
border-radius: 5px;
width: 100%;
height: 100%;
}
.scroll .scroll-item02 {
border-radius: 5px;
width: 260px;
height: 100%;
margin: 40px 50px 0 0;
}
.scroll .scroll-item02 img {
border-radius: 5px;
width: 100%;
height: 100%;
}
.scroll .scroll-item03 {
width: 260px;
height: 100%;
margin-right: 50px;
}
.scroll .scroll-item03 img {
width: 100%;
height: 100%;
border-radius: 5px;
}
.scroll .scroll-item04 {
width: 260px;
height: 100%;
margin: 40px 50px 0 0;
}
.scroll .scroll-item04 img {
width: 100%;
height: 100%;
border-radius: 5px;
}
@media (max-width: 890px) {
.scroll {
padding: 100px 0 90px 0;
}
.scroll .scroll-item01,
.scroll .scroll-item02,
.scroll .scroll-item03,
.scroll .scroll-item04 {
width: 160px;
margin-right: 25px;
}
}
@media (max-width: 450px) {
.scroll {
padding: 60px 0;
}
}
@-webkit-keyframes scroll-list-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes scroll-list-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.about {
width: 100%;
overflow: hidden;
height: 100%;
margin: 0 auto;
padding-bottom: 100px;
position: relative;
z-index: 2;
}
.about h4 {
font-size: 13rem;
font-weight: 100;
letter-spacing: 30px;
text-align: center;
overflow: hidden;
white-space: nowrap;
padding-bottom: 30px;
}
.about .about-wrapper {
display: flex;
width: 100%;
gap: 40px;
padding: 0;
}
.about .about-wrapper .about-text {
writing-mode: vertical-rl;
text-orientation: upright;
padding-top: 20px;
width: 50%;
height: 50vh;
}
.about .about-wrapper .about-text h5 {
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.4rem;
padding-left: 15px;
}
.about .about-wrapper .about-text p {
font-size: 1rem;
line-height: 2rem;
word-break: keep-all;
padding: 0 5px 0 0;
}
.about .about-wrapper .about-text p .about_br {
display: inline-block;
}
.about .about-wrapper .about-text .more-bt {
margin: 10px 30px 0 0;
text-align: left;
writing-mode: vertical-rl;
}
.about .about-wrapper .about-text .more-bt a {
font-size: 0.7rem;
font-weight: 600;
position: relative;
transition: all 0.4s ease;
}
.about .about-wrapper .about-text .more-bt a:hover {
font-size: 0.75rem;
}
.about .about-wrapper .about-text .more-bt a::after {
content: "";
position: absolute;
top: 30%;
left: 20%;
height: 175px;
width: 1px;
background-color: var(--accent-color-b);
border-radius: 10px;
transform: translate(-15px, -45px);
transition: all 200ms ease;
opacity: 1;
}
.about .about-wrapper .about-text .more-bt a:hover::after {
opacity: 0;
left: 20%;
}
.about .about-wrapper .about-text .more-bt a .btn-circle {
position: absolute;
top: 65%;
left: -12%;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #4C3536;
transform: translate(0px, 60px);
transition: all 200ms ease;
}
.about .about-wrapper .about-text .more-bt a .btn-circle::before, .about .about-wrapper .about-text .more-bt a .btn-circle::after {
content: "";
position: absolute;
width: 5px;
height: 1px;
background-color: var(--accent-color-b);
width: 5px;
left: 28%;
}
.about .about-wrapper .about-text .more-bt a .btn-circle::before {
bottom: 38%;
transform: translate(0px, -1px) rotate(45deg);
}
.about .about-wrapper .about-text .more-bt a .btn-circle::after {
bottom: 38%;
transform: translate(3px, -1px) rotate(-45deg);
}
.about .about-wrapper .about-text .more-bt a:hover .btn-circle {
width: 21px;
height: 21px;
border-radius: 21px;
background-color: var(--accent-color-b);
}
.about .about-wrapper .about-text .more-bt a:hover .btn-circle::before, .about .about-wrapper .about-text .more-bt a:hover .btn-circle::after {
background-color: var(--main-color);
}
.about .about-wrapper .about-img {
width: 50%;
height: 50vh;
}
.about .about-wrapper .about-img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 5px 0 0 5px;
-o-object-position: 50% 50%;
object-position: 50% 50%;
}
@media (max-width: 890px) {
.about {
height: 100%;
padding: 40px 0;
}
.about h4 {
text-align: center;
font-size: 4rem;
padding-bottom: 0;
}
.about .about-wrapper {
flex-direction: column-reverse;
padding: 20px;
}
.about .about-wrapper .about-text {
writing-mode: horizontal-tb;
padding-bottom: 30px;
margin: 0 auto;
width: 100%;
height: 100%;
max-width: 600px;
}
.about .about-wrapper .about-text h5 {
display: block;
margin: 0 auto;
font-size: 1.6rem;
text-align: left;
padding-left: auto;
}
.about .about-wrapper .about-text p {
display: block;
writing-mode: horizontal-tb;
font-size: 0.75rem;
text-align: left;
padding: 0;
line-break: strict;
word-break: break-word;
}
.about .about-wrapper .about-text .more-bt {
margin: 20px 80px 0 20px;
text-align: right;
writing-mode: horizontal-tb;
}
.about .about-wrapper .about-text .more-bt a {
font-size: 0.8rem;
letter-spacing: 0.2rem;
font-weight: 600;
position: relative;
transition: all 0.4s ease;
}
.about .about-wrapper .about-text .more-bt a:hover {
font-size: 0.87rem;
}
.about .about-wrapper .about-text .more-bt a::after {
content: "";
position: absolute;
top: 50%;
left: 0%;
height: 1px;
width: 175px;
background-color: var(--accent-color-b);
border-radius: 10px;
transform: translate(-26px, 17px);
transition: all 200ms ease;
opacity: 1;
}
.about .about-wrapper .about-text .more-bt a:hover::after {
opacity: 0;
top: 60%;
}
.about .about-wrapper .about-text .more-bt a .btn-circle {
position: absolute;
top: 1px;
left: 80%;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid var(--accent-color-b);
transform: translate(40px, 0);
transition: all 200ms ease;
}
.about .about-wrapper .about-text .more-bt a .btn-circle::before, .about .about-wrapper .about-text .more-bt a .btn-circle::after {
content: "";
position: absolute;
width: 5px;
height: 1px;
background-color: var(--accent-color-b);
width: 5px;
left: 10%;
border-radius: 1px;
}
.about .about-wrapper .about-text .more-bt a .btn-circle::before {
bottom: 38%;
transform: translate(5px, -3px) rotate(45deg);
}
.about .about-wrapper .about-text .more-bt a .btn-circle::after {
bottom: 38%;
transform: translate(5px, 0px) rotate(-45deg);
}
.about .about-wrapper .about-text .more-bt a:hover .btn-circle {
width: 21px;
height: 21px;
border-radius: 20px;
}
.about .about-wrapper .about-text .more-bt a:hover .btn-circle::before, .about .about-wrapper .about-text .more-bt a:hover .btn-circle::after {
background-color: var(--accent-color-w);
}
.about .about-wrapper .about-img {
width: 100%;
height: 250px;
}
.about .about-wrapper .about-img img {
width: 100%;
border-radius: 10px 10px;
}
}
@media (max-width: 450px) {
.about h4 {
font-size: 3.3rem;
letter-spacing: 1rem;
}
.about .about-text {
padding-top: 0;
height: 100%;
}
.about .about-text h5 {
padding: 0 0 10px;
}
.about .about-text p .about_br {
display: block;
}
.about .about-text .more-bt {
margin-top: 10px;
}
.about .about-img {
width: 100%;
height: 200px;
}
.about .about-img img {
height: 100%;
}
}
.our-city {
position: relative;
height: 100vh;
width: 100%;
overflow: hidden;
z-index: 2;
}
.our-city .our-city__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 0;
}
.our-city .our-city__bg img {
display: block !important;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.our-city .our-city_mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(7, 25, 49, 0.7);
-webkit-backdrop-filter: blur(12px) brightness(0.8);
backdrop-filter: blur(12px) brightness(0.8);
display: flex;
z-index: 3;
transform: translateY(100%);
transition: transform 1s ease-out;
}
.our-city .our-city_mask.slide-in {
transform: translateY(0);
}
.our-city .our-city_mask .our-city_sidebar {
position: relative;
width: 45%;
height: 100%;
padding: 120px 0 0 30px;
color: var(--accent-color-w);
}
.our-city .our-city_mask .our-city_sidebar h4 {
color: var(--accent-color-w);
font-size: 3rem;
letter-spacing: 0.95rem;
padding: 0 0 20px 15px;
}
.our-city .our-city_mask .our-city_sidebar h5 {
font-size: 4rem;
writing-mode: vertical-rl;
letter-spacing: 0.95rem;
color: #ffffff;
}
.our-city .our-city_mask .our-city_sidebar img {
position: absolute;
bottom: 50px;
left: 20%;
opacity: 0.5;
width: 90%;
transform: rotate(-20deg);
}
.our-city .our-city_mask .our-city_main-text {
width: 55%;
height: 100%;
overflow-y: auto;
text-align: center;
padding: 300px 0;
}
.our-city .our-city_mask .our-city_main-text p {
color: var(--accent-color-w);
font-size: 1rem;
font-weight: 500;
line-height: 4.2rem;
padding-bottom: 70px;
}
@media (max-width: 890px) {
.our-city .our-city_mask .our-city_sidebar {
padding-top: 50px;
width: 35%;
}
.our-city .our-city_mask .our-city_sidebar h4 {
letter-spacing: 0.9rem;
line-height: 6rem;
}
.our-city .our-city_mask .our-city_sidebar h5 {
font-size: 3rem;
}
.our-city .our-city_mask .our-city_sidebar img {
width: 100%;
overflow: hidden;
}
.our-city .our-city_mask .our-city_main-text {
padding: 250px 0;
width: 65%;
}
.our-city .our-city_mask .our-city_main-text p {
line-height: 3rem;
padding-bottom: 40px;
font-size: 0.87rem;
}
}
@media (max-width: 450px) {
.our-city .our-city_mask {
flex-direction: column;
}
.our-city .our-city_mask .our-city_sidebar {
width: 100%;
height: auto;
padding: 200px 0 0 80px;
}
.our-city .our-city_mask .our-city_sidebar h4 {
font-size: 1.4rem;
padding-left: 0;
}
.our-city .our-city_mask .our-city_sidebar h5 {
writing-mode: horizontal-tb;
font-size: 1.4rem;
}
.our-city .our-city_mask .our-city_sidebar img {
top: 0;
width: 100%;
overflow: hidden;
}
.our-city .our-city_mask .our-city_main-text {
width: 100%;
}
.our-city .our-city_mask .our-city_main-text p {
line-height: 2.5rem;
padding: 0 24px 10px;
font-size: 0.87rem;
}
}
.works {
padding: 250px 0 180px 0;
width: 100%;
height: 100%;
z-index: 2;
overflow: hidden;
}
.works .works-heading {
max-width: 1140px;
margin: 0 auto 50px auto;
text-align: left;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.works .works-heading .works-title h4 {
font-size: 7rem;
letter-spacing: 1.1rem;
color: var(--main-text);
}
.works .works-heading .works-title h5 {
font-size: 2rem;
font-weight: 500;
z-index: 10;
padding: 10px 0 20px 0;
}
.works .works-heading p {
position: relative;
padding-left: 20px;
font-size: 0.87rem;
line-height: 1.8rem;
}
.works .works-heading p::before {
position: absolute;
content: "";
left: 0;
top: 0;
background-color: var(--accent-color-b);
height: 100%;
width: 2px;
border-radius: 1px;
}
.works .works-slick {
width: 100%;
padding-top: 30px;
}
.works .works-slick li a {
display: block;
text-align: center;
}
.works .works-slick li a .works-img__box {
position: relative;
height: 380px;
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.works .works-slick li a .works-img__box img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
transition: transform 0.5s ease;
z-index: 1;
}
.works .works-slick li a .works-img__box .arrow-bg {
position: absolute;
bottom: 0;
right: 0;
border-radius: 20px 0 0 0;
width: 4em;
height: 4em;
background-color: var(--main-color);
z-index: 2;
}
.works .works-slick li a .works-img__box .arrow-bg .cn-arrow_circle {
position: absolute;
bottom: 0;
right: 0;
width: 3em;
height: 3em;
background-color: var(--accent-color-y);
border-radius: 3em;
transition: all 0.3s;
}
.works .works-slick li a .works-img__box .arrow-bg .cn-arrow_circle .circle_arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.works .works-slick li a .works-img__box .arrow-bg::before {
position: absolute;
content: "";
-webkit-mask-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/icon/corner.svg);
mask-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/icon/corner.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
width: 1em;
height: 1em;
top: 1px;
right: 0;
translate: 0 -100%;
aspect-ratio: 1;
background-color: var(--main-color);
}
.works .works-slick li a .works-img__box .arrow-bg:after {
position: absolute;
content: "";
display: block;
-webkit-mask-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/icon/corner.svg);
mask-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/icon/corner.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
width: 1em;
height: 1em;
bottom: 0;
left: 1px;
translate: -100% 0;
aspect-ratio: 1;
background-color: var(--main-color);
}
.works .works-slick li a:hover {
opacity: 1;
}
.works .works-slick li a:hover img {
transform: scale(1.1);
}
.works .works-slick li a:hover h6 {
font-weight: 600;
transform: scale(1.1);
}
.works .works-slick li a:hover .arrow-bg .cn-arrow_circle {
background-color: var(--sub-blue);
}
.works .works-slick li a h6 {
display: inline-block;
text-align: center;
padding-top: 20px;
transition: font-weight 0.3s ease, transform 0.3s ease;
}
@media (max-width: 890px) {
.works {
padding: 80px 0;
}
.works .works-heading {
padding: 0 25px;
}
.works .works-heading .works-title h4 {
font-size: 3.3rem;
letter-spacing: 0.5rem;
}
.works .works-heading .works-title h5 {
font-size: 1.4rem;
}
.works .works-heading p {
line-height: 1.3rem;
font-size: 0.7rem;
}
.works .works-slick {
width: 100%;
padding-top: 30px;
}
.works .works-slick a {
display: block;
text-align: center;
}
.works .works-slick a .works-img__box {
height: 300px;
}
.works .works-slick a .works-img__box img {
border-radius: 5px;
-o-object-fit: cover;
object-fit: cover;
}
.works .works-slick h6 {
display: inline-block;
text-align: center;
padding-top: 20px;
font-size: 1.2rem;
font-weight: 500;
}
}
@media (max-width: 450px) {
.works {
padding: 90px 0;
margin-bottom: 15px;
}
.works .works-heading {
flex-direction: column;
margin-bottom: 25px;
align-items: flex-start;
}
.works .works-heading .works-title h4 {
position: inherit;
top: auto;
right: auto;
font-size: 3.8rem;
margin-bottom: 20px;
}
.works .works-heading .works-title h5 {
padding-bottom: 6px;
}
.works .works-slick li a .works-img__box {
height: 270px;
}
}
.recruit {
display: block;
position: relative;
width: 100%;
height: calc(100vh - 80px);
padding: 0 10px;
}
.recruit .recruit_grid-items {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(9, 1fr);
gap: 10px;
width: 100%;
height: 100%;
max-width: 95%;
border-radius: 10px;
margin: 0 auto;
box-sizing: border-box;
}
.recruit .recruit_grid-items .grid-item {
overflow: hidden;
border-radius: 5px;
}
.recruit .recruit_grid-items .grid-item img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
display: block;
}
.recruit .recruit_grid-items .grid-item:nth-child(1) {
grid-column: 1;
grid-row: 1/4;
}
.recruit .recruit_grid-items .grid-item:nth-child(6) {
grid-column: 1;
grid-row: 4/7;
}
.recruit .recruit_grid-items .grid-item:nth-child(11) {
grid-column: 1;
grid-row: 7/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(2) {
grid-column: 2;
grid-row: 1/5;
}
.recruit .recruit_grid-items .grid-item:nth-child(7) {
grid-column: 2;
grid-row: 5/7;
}
.recruit .recruit_grid-items .grid-item:nth-child(12) {
grid-column: 2;
grid-row: 7/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(3) {
grid-column: 3;
grid-row: 1/3;
}
.recruit .recruit_grid-items .grid-item:nth-child(8) {
grid-column: 3;
grid-row: 3/8;
}
.recruit .recruit_grid-items .grid-item:nth-child(13) {
grid-column: 3;
grid-row: 8/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(4) {
grid-column: 4;
grid-row: 1/4;
}
.recruit .recruit_grid-items .grid-item:nth-child(9) {
grid-column: 4;
grid-row: 4/8;
}
.recruit .recruit_grid-items .grid-item:nth-child(14) {
grid-column: 4;
grid-row: 8/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(5) {
grid-column: 5;
grid-row: 1/3;
}
.recruit .recruit_grid-items .grid-item:nth-child(10) {
grid-column: 5;
grid-row: 3/6;
}
.recruit .recruit_grid-items .grid-item:nth-child(15) {
grid-column: 5;
grid-row: 6/10;
}
@media (max-width: 890px) {
.recruit .recruit_grid-items {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(9, 1fr);
}
.recruit .recruit_grid-items .grid-item:nth-child(n+10) {
display: none;
}
.recruit .recruit_grid-items .grid-item:nth-child(1) {
grid-column: 1;
grid-row: 1/4;
}
.recruit .recruit_grid-items .grid-item:nth-child(4) {
grid-column: 1;
grid-row: 4/7;
}
.recruit .recruit_grid-items .grid-item:nth-child(7) {
grid-column: 1;
grid-row: 7/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(2) {
grid-column: 2;
grid-row: 1/5;
}
.recruit .recruit_grid-items .grid-item:nth-child(5) {
grid-column: 2;
grid-row: 5/7;
}
.recruit .recruit_grid-items .grid-item:nth-child(8) {
grid-column: 2;
grid-row: 7/10;
}
.recruit .recruit_grid-items .grid-item:nth-child(3) {
grid-column: 3;
grid-row: 1/3;
}
.recruit .recruit_grid-items .grid-item:nth-child(6) {
grid-column: 3;
grid-row: 3/8;
}
.recruit .recruit_grid-items .grid-item:nth-child(9) {
grid-column: 3;
grid-row: 8/10;
}
}
@media (max-width: 450px) {
.recruit .recruit_grid-items {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(7, 1fr);
}
.recruit .recruit_grid-items .grid-item:nth-child(n+5) {
display: none;
}
.recruit .recruit_grid-items .grid-item:nth-child(1) {
grid-column: 1;
grid-row: 1/4;
}
.recruit .recruit_grid-items .grid-item:nth-child(3) {
grid-column: 1;
grid-row: 4/8;
}
.recruit .recruit_grid-items .grid-item:nth-child(2) {
grid-column: 2;
grid-row: 1/5;
}
.recruit .recruit_grid-items .grid-item:nth-child(4) {
grid-column: 2;
grid-row: 5/8;
}
}
.recruit .rec-textbox {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-block;
background-color: rgba(255, 255, 255, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-right-color: rgba(255, 255, 255, 0.2);
border-bottom-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
box-shadow: 2px 2px 10px #9d9d9d;
text-align: center;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
padding: 65px 45px 80px 65px;
}
.recruit .rec-textbox h5 {
font-weight: 600;
font-size: 2.7rem;
line-height: 4rem;
}
.recruit .rec-textbox p {
display: block;
font-weight: 600;
font-size: 1.1rem;
line-height: 2.1rem;
padding: 30px 0 35px 0;
}
.recruit .rec-textbox .more-bt {
display: block;
margin: 0 auto;
}
.recruit .rec-textbox.js-active.is-shown {
transform: translate(-50%, -50%);
}
@media (max-width: 890px) {
.recruit .rec-textbox {
padding: 35px 25px 45px 25px;
width: calc(100% - 20px);
}
}
@media (max-width: 450px) {
.recruit .rec-textbox {
padding: 35px 25px 45px 25px;
width: calc(100% - 20px);
}
.recruit .rec-textbox h5 {
font-size: 1.7rem;
line-height: 2.2rem;
}
.recruit .rec-textbox p {
font-size: 0.9rem;
padding-top: 15px;
}
}
.textscrolle {
position: relative;
display: block;
font-family: var(--accent-font);
z-index: 2;
overflow: hidden;
height: 335px;
margin-top: 80px;
}
.textscrolle .textscrolle_wrapper__top,
.textscrolle .textscrolle_wrapper__bottom {
display: flex;
position: absolute;
align-items: center;
overflow: hidden;
z-index: 1;
}
.textscrolle .textscrolle_wrapper__top span,
.textscrolle .textscrolle_wrapper__bottom span {
display: inline-block;
font-weight: 100;
font-size: 9rem;
letter-spacing: 3rem;
vertical-align: middle;
margin-left: 40px;
}
.textscrolle .textscrolle_wrapper__top img,
.textscrolle .textscrolle_wrapper__bottom img {
width: 200px;
height: 110px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 5px;
margin-top: 10px;
}
.textscrolle .textscrolle_wrapper__top {
top: 0;
overflow: hidden;
-webkit-animation: text-scroll_left 70s linear infinite;
animation: text-scroll_left 70s linear infinite;
}
.textscrolle .textscrolle_wrapper__bottom {
-webkit-animation: text-scroll_right 70s linear infinite;
animation: text-scroll_right 70s linear infinite;
overflow: hidden;
top: 40%;
transform: translateY(21px);
padding-bottom: 50px;
}
@-webkit-keyframes text-scroll_right {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes text-scroll_right {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@-webkit-keyframes text-scroll_left {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@keyframes text-scroll_left {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
@media (max-width: 890px) {
.textscrolle .textscrolle_wrapper__top span,
.textscrolle .textscrolle_wrapper__bottom span {
font-size: 6rem;
letter-spacing: 1.9rem;
}
.textscrolle .textscrolle_wrapper__top img,
.textscrolle .textscrolle_wrapper__bottom img {
width: 100px;
height: 60px;
}
}
@media (max-width: 450px) {
.textscrolle {
height: 160px;
}
.textscrolle .textscrolle_wrapper__top span,
.textscrolle .textscrolle_wrapper__bottom span {
font-size: 4rem;
letter-spacing: 1.4rem;
}
.textscrolle .textscrolle_wrapper__top img,
.textscrolle .textscrolle_wrapper__bottom img {
width: 100px;
height: 60px;
}
}
.news {
padding: 150px 40px 100px 40px;
max-width: 1240px;
margin: 0 auto;
}
.news .news-heading {
text-align: center;
}
.news .news-heading h4 {
font-size: 7rem;
font-weight: 100;
letter-spacing: 1.1rem;
color: var(--main-text);
opacity: 1;
}
.news .news-heading h5 {
font-size: 1.5rem;
font-weight: 600;
color: var(--main-text);
padding-bottom: 10px;
}
.news .news-wrapper {
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
.news .news-wrapper .news_title {
width: 30%;
text-align: center;
}
.news .news-wrapper .news_title p {
font-size: 1rem;
font-weight: 600;
padding-bottom: 30px;
}
.news .news-wrapper .news_title ul {
display: flex;
flex-direction: column;
align-items: center;
}
.news .news-wrapper .news_title ul li {
margin-bottom: 10px;
}
.news .news-wrapper .news_title ul li a {
font-size: 0.87rem;
font-weight: 600;
background-color: var(--sub-blue);
padding: 10px 25px;
color: var(--sub-text-w);
border-radius: 2rem;
transition: all 0.3s;
}
.news .news-wrapper .news_title ul li a:hover {
background-color: var(--accent-color-y);
}
.news .news-wrapper .news_contents {
width: 70%;
text-align: left;
}
.news .news-wrapper .news_contents ul li {
background-color: var(--sub-gray);
border-radius: 5px;
padding: 15px 30px;
margin-bottom: 20px;
}
.news .news-wrapper .news_contents ul li a {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 15px;
cursor: pointer;
}
.news .news-wrapper .news_contents ul li a .news-thumbnail {
width: 90px;
height: 90px;
border-radius: 5px;
margin-right: 40px;
}
.news .news-wrapper .news_contents ul li a .news-thumbnail img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.news .news-wrapper .news_contents ul li a .news-items {
display: flex;
align-items: center;
justify-content: flex-start;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 400;
margin-right: 40px;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate time {
font-size: 0.7rem;
font-weight: 500;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_info,
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_works {
font-size: 0.7rem;
color: var(sub-text-w);
padding: 5px 13px;
border-radius: 20px;
font-weight: 600;
margin-bottom: 10px;
display: inline-block;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_info {
background-color: #ffdd00;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_works {
background-color: #009DFF;
}
.news .news-wrapper .news_contents ul li a .news-items p {
font-size: 0.8rem;
font-weight: 500;
line-height: 1rem;
}
@media (max-width: 890px) {
.news {
padding: 70px 24px 50px 24px;
max-width: 700px;
}
.news .news-heading {
margin-bottom: 20px;
}
.news .news-heading h4 {
font-size: 5rem;
}
.news .news-wrapper {
width: 100%;
flex-direction: column;
padding-top: 10px;
}
.news .news-wrapper .news_title {
width: 100%;
}
.news .news-wrapper .news_title p {
padding-bottom: 20px;
}
.news .news-wrapper .news_title ul {
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.news .news-wrapper .news_title ul li a {
font-size: 0.7rem;
font-weight: 600;
background-color: var(--sub-blue);
padding: 8px 25px;
margin-right: 10px;
color: var(--sub-text-w);
border-radius: 2rem;
transition: all 0.3s;
}
.news .news-wrapper .news_title ul li a:nth-of-type(3) {
margin-right: 0;
}
.news .news-wrapper .news_contents {
width: 100%;
padding-top: 50px;
}
.news .news-wrapper .news_contents ul li {
margin-bottom: 15px;
}
.news .news-wrapper .news_contents ul li a .news-thumbnail {
width: 45px;
height: 45px;
margin-right: 25px;
}
.news .news-wrapper .news_contents ul li a .news-items {
align-items: center;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_info {
margin-right: 10px;
}
}
@media (max-width: 450px) {
.news .news-heading h4 {
font-size: 3rem;
letter-spacing: 0.9rem;
}
.news .news-wrapper {
padding: 50px 0;
max-width: 375px;
}
.news .news-wrapper .news_title {
flex-wrap: wrap;
width: 100%;
}
.news .news-wrapper .news_contents ul li {
padding: 20px 24px;
margin-bottom: 10px;
}
.news .news-wrapper .news_contents ul li a {
justify-content: space-around;
}
.news .news-wrapper .news_contents ul li a .news-thumbnail {
width: 50px;
height: 50px;
border-radius: 5px;
}
.news .news-wrapper .news_contents ul li a .news-thumbnail img {
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.news .news-wrapper .news_contents ul li a .news-items {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate {
align-items: center;
flex-direction: row;
margin-right: 0;
margin-bottom: 5px;
padding-bottom: 0;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate time {
font-size: 0.7rem;
font-weight: 500;
}
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_info,
.news .news-wrapper .news_contents ul li a .news-items .item-date-cate .category_works {
margin-right: 5px;
margin-bottom: 0;
}
.news .news-wrapper .news_contents ul li a .news-items p {
font-size: 0.8rem;
font-weight: 500;
line-height: 1rem;
}
}
.contact {
position: relative;
background-color: var(--main-color);
z-index: 2;
overflow: hidden;
}
.contact .contact_bg {
display: block;
position: relative;
width: 100%;
padding: 70px 20px 110px;
margin: 0 auto;
text-align: center;
background-color: var(--sub-color);
color: var(--sub-color);
z-index: 1;
}
.contact .contact_bg h4 {
font-size: 7rem;
letter-spacing: 1.1rem;
color: #F8F2E8;
opacity: 0.4;
margin-bottom: 50px;
}
.contact .contact_bg h5 {
font-size: 1.3rem;
margin-bottom: 50px;
}
.contact .contact_bg .contact_wrapper {
display: flex;
justify-content: center;
align-items: center;
max-width: 900px;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_form {
position: relative;
display: block;
border: 1px solid var(--accent-color-w);
border-radius: 5px;
padding: 40px 30px;
margin-right: 20px;
width: 50%;
height: 100%;
color: var(--accent-color-w);
transition: all 0.3s ease 0s;
}
.contact .contact_bg .contact_wrapper .contact_form:hover {
background-color: var(--accent-color-w);
color: var(--sub-color);
border: 1px solid var(--sub-color);
}
.contact .contact_bg .contact_wrapper .contact_form:hover .form_icon .form_white {
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_form:hover .form_icon .form_green {
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: opacity 0.3s ease;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon .form_white {
z-index: 1;
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon .form_green {
z-index: 2;
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_form h6 {
font-weight: 600;
padding: 20px 0 10px 0;
}
.contact .contact_bg .contact_wrapper .contact_form p {
font-size: 0.8rem;
}
.contact .contact_bg .contact_wrapper .contact_tel {
position: relative;
display: block;
border: 1px solid var(--accent-color-w);
border-radius: 5px;
padding: 40px 30px 20px;
margin-left: 20px;
width: 50%;
color: var(--accent-color-w);
transition: all 0.3s ease 0s;
}
.contact .contact_bg .contact_wrapper .contact_tel:hover {
background-color: var(--accent-color-w);
color: var(--sub-color);
border: 1px solid var(--sub-color);
}
.contact .contact_bg .contact_wrapper .contact_tel:hover .tel_icon .tel_white {
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_tel:hover .tel_icon .tel_green {
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon {
position: relative;
text-align: center;
margin: 0 auto;
width: 60px;
height: 60px;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: opacity 0.3s ease;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon .tel_white {
z-index: 1;
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon .tel_green {
z-index: 2;
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_tel h6 {
font-weight: 600;
padding: 20px 0 10px 0;
}
.contact .contact_bg .contact_wrapper .contact_tel dl {
display: flex;
font-size: 0.8rem;
text-align: center;
max-width: 70%;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_tel dl dt {
width: 40%;
text-align: left;
}
.contact .contact_bg .contact_wrapper .contact_tel dl dd {
width: 60%;
text-align: left;
padding-left: 10px;
}
@media (max-width: 890px) {
.contact .contact_bg h4 {
font-size: 5rem;
margin: 0 auto 30px auto;
}
.contact .contact_bg .contact_wrapper {
flex-direction: column;
border-radius: 30px 30px 0 0;
}
.contact .contact_bg .contact_wrapper .contact_form {
width: 70%;
margin: 0px 0px 30px 0;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon {
width: 50px;
height: 50px;
}
.contact .contact_bg .contact_wrapper .contact_tel {
width: 70%;
margin: 0px 0px 30px 0px;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon {
width: 50px;
height: 50px;
}
}
@media (max-width: 450px) {
.contact .contact_bg h4 {
font-size: 3.7rem;
letter-spacing: 10px;
}
.contact .contact_bg .contact_wrapper .contact_form,
.contact .contact_bg .contact_wrapper .contact_tel {
width: 90%;
padding: 30px 10px;
}
.contact .contact_bg .contact_wrapper .contact_form .contact_icon,
.contact .contact_bg .contact_wrapper .contact_tel .contact_icon {
width: 40px;
height: 40px;
}
.contact .contact_bg .contact_wrapper .contact_form h6,
.contact .contact_bg .contact_wrapper .contact_tel h6 {
padding-top: 10px;
font-size: 0.8rem;
}
}
@-webkit-keyframes TopfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes TopfadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes ScrollDown {
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%;
}
}
@keyframes ScrollDown {
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%;
}
}
footer {
position: relative;
background-color: var(--main-color);
z-index: 2;
}
footer .footer-wrapper {
display: flex;
justify-content: space-between;
background-color: var(--main-color);
max-width: 1040px;
margin: 0 auto 40px auto;
}
footer .footer-wrapper .footer_company-info {
width: 55%;
}
footer .footer-wrapper .footer_company-info h1 {
width: 200px;
margin-bottom: 30px;
}
footer .footer-wrapper .footer_company-info img {
width: 300px;
margin-bottom: 40px;
}
footer .footer-wrapper .footer_company-info dl {
display: flex;
max-width: 700px;
width: 100%;
border-bottom: 1px solid var(--main-text);
font-weight: 600;
}
footer .footer-wrapper .footer_company-info dl dd {
padding: 0 0 15px 10px;
line-height: 1.5rem;
}
footer .footer-wrapper nav {
display: flex;
justify-content: space-between;
}
footer .footer-wrapper nav ul {
padding-left: 50px;
}
footer .footer-wrapper nav ul li {
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 10px;
}
footer .sns_icon {
display: flex;
gap: 30px;
max-width: 1040px;
margin: 0 auto;
}
footer .sns_icon a {
display: block;
width: 25px;
height: 25px;
margin-bottom: 10px;
}
footer .sns_icon a img {
width: 100%;
height: 100%;
}
footer small {
display: block;
text-align: center;
font-size: 0.7rem;
padding-top: 80px;
}
@media (max-width: 890px) {
footer {
font-size: 0.85rem;
}
footer .footer-wrapper {
flex-direction: column;
}
footer .footer-wrapper .footer_company-info {
width: 100%;
}
footer .footer-wrapper .footer_company-info img {
width: 250px;
margin-bottom: 20px;
}
footer .footer-wrapper nav {
padding-top: 60px;
justify-content: space-evenly;
}
footer .footer-wrapper nav ul {
padding-left: 0;
}
footer .sns_icon {
display: flex;
gap: 30px;
justify-content: center;
align-items: center;
}
footer small {
padding-top: 50px;
}
}
@media (max-width: 450px) {
footer .footer-wrapper {
flex-direction: column;
}
footer .footer-wrapper .footer_company-info img {
width: 250px;
margin-bottom: 20px;
}
}
.footer-container {
padding: 80px 20px 20px;
}
#splash {
position: fixed;
width: 100%;
height: 100vh;
z-index: 999;
background: var(--main-color);
text-align: center;
color: var(--sub-color);
}
#splash #splash_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#splash #splash_text h2 {
font-size: clamp(1.3rem, 2vw, 3.5rem);
font-family: var(--accent-font);
font-weight: 500;
letter-spacing: 0.14rem;
opacity: 0;
-webkit-animation: fadeIn 2s ease forwards;
animation: fadeIn 2s ease forwards;
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.inquiry-top {
position: relative;
width: 100vw;
height: 90vh;
}
.inquiry-top img {
position: absolute;
top: 100px;
right: 0;
height: 60%;
width: 65vw;
border-radius: 5px;
}
.inquiry-top .inquiry-top_title {
position: absolute;
top: 25%;
left: 15%;
}
.inquiry-top .inquiry-top_title h2 {
display: inline-block;
font-size: 2.1rem;
letter-spacing: 0.6em;
writing-mode: vertical-rl;
font-weight: 300;
opacity: 0.5;
}
.inquiry-top .inquiry-top_title h3 {
display: inline-block;
font-size: 2.3rem;
writing-mode: vertical-rl;
letter-spacing: 0.3em;
font-weight: 400;
}
@media (max-width: 890px) {
.inquiry-top .inquiry-top_title {
top: 25%;
left: 10%;
}
.inquiry-top .inquiry-top_title h2 {
font-size: 2rem;
}
.inquiry-top .inquiry-top_title h3 {
font-size: 2rem;
}
}
@media (max-width: 450px) {
.inquiry-top {
height: 50vh;
}
.inquiry-top img {
height: 70%;
}
.inquiry-top .inquiry-top_title {
top: 25%;
left: 7%;
}
.inquiry-top .inquiry-top_title h2 {
font-size: 1.6rem;
}
.inquiry-top .inquiry-top_title h3 {
font-size: 1.6rem;
}
}
form {
display: block;
max-width: 800px;
margin: 0 auto 200px auto;
}
form dl .inq-contents {
display: flex;
padding-bottom: 60px;
}
form dl .inq-contents dt {
width: 30%;
font-weight: 500;
}
form dl .inq-contents dd {
width: 70%;
line-height: 1.8rem;
}
form dl .inq-contents dd label {
margin-right: 25px;
}
@media (max-width: 890px) {
form {
padding: 0 25px;
}
form dl {
max-width: 550px;
margin: 0 auto;
}
form dl .inq-contents {
flex-direction: column;
}
form dl .inq-contents dt {
width: 100%;
padding-bottom: 20px;
}
form dl .inq-contents dd {
width: 100%;
}
form dl .inq-contents dd label {
display: block;
margin-bottom: 5px;
}
}
input[type=radio],
textarea,
input[type=text],
input[type=email],
input[type=tel] { -webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto; border: 1px solid var(--accent-color-b);
background-color: var(--main-color);
width: 1em;
height: 1em; }
textarea {
width: 100%;
height: 100px;
font-size: 0.8rem;
line-height: 1.5em;
border-radius: 3px;
resize: none;
padding: 5px 10px;
}
textarea::-moz-placeholder {
color: var(--main-text);
opacity: 0.3;
}
textarea::placeholder {
color: var(--main-text);
opacity: 0.3;
}
input[text=radio] {
margin-right: 0.5em;
}
input[type=text],
input[type=email],
input[type=tel] {
width: 100%;
height: 100%;
font-size: 0.8rem;
border-radius: 3px;
padding: 8px 10px;
margin-right: 0.5em;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder {
color: var(--main-text);
opacity: 0.3;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder {
color: var(--main-text);
opacity: 0.3;
}
.privacy {
vertical-align: middle;
margin-bottom: 80px;
}
.privacy label input[type=checkbox] {
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
border: 1px solid var(--accent-color-b);
background-color: var(--main-color);
border-radius: 3px;
font-size: 0.7rem;
width: 1.3em;
height: 1.3em;
margin-right: 10px;
}
.privacy label a {
text-decoration: underline;
}
.privacy label a:visited {
color: #4C3536;
}
@media (max-width: 890px) {
.privacy {
max-width: 550px;
margin: 0 auto 90px auto;
}
}
.submit-btn {
text-align: center;
}
.submit-btn input[type=submit] {
display: inline-block;
text-align: center;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
background-color: var(--sub-color);
padding: 10px 25px;
border-radius: 50px;
font-weight: 500;
letter-spacing: 1rem;
text-indent: 1rem;
transition: all 0.5s;
color: var(--main-color);
}
.submit-btn input[type=submit]:hover {
background-color: var(--accent-color-y);
color: #FBFAF9;
}
.news .news-top {
position: relative;
width: 100vw;
height: 90vh;
}
.news .news-top img {
position: absolute;
top: 100px;
right: 0;
height: 60%;
width: 65vw;
border-radius: 5px;
}
.news .news-top .news-top_title {
position: absolute;
top: 25%;
left: 15%;
}
.news .news-top .news-top_title h2 {
display: inline-block;
font-size: 2.1rem;
letter-spacing: 0.6em;
writing-mode: vertical-rl;
font-weight: 300;
opacity: 0.5;
}
.news .news-top .news-top_title h3 {
display: inline-block;
font-size: 2.3rem;
writing-mode: vertical-rl;
letter-spacing: 0.3em;
font-weight: 400;
}
@media (max-width: 890px) {
.news .news-top .news-top_title {
top: 25%;
left: 10%;
}
.news .news-top .news-top_title h2 {
font-size: 2rem;
}
.news .news-top .news-top_title h3 {
font-size: 2rem;
}
}
@media (max-width: 450px) {
.news .news-top {
height: 50vh;
}
.news .news-top img {
height: 70%;
}
.news .news-top .news-top_title {
top: 25%;
left: 7%;
}
.news .news-top .news-top_title h2 {
font-size: 1.6rem;
}
.news .news-top .news-top_title h3 {
font-size: 1.6rem;
}
}
.news .news-container {
display: block;
max-width: 900px;
width: 100%;
margin: 0 auto;
padding: 0 40px;
}
.news .news-container ol {
width: 100%;
}
.news .news-container ol li {
border-bottom: 1px solid #999999;
padding-bottom: 15px;
margin: 30px;
}
.news .news-container ol li a {
font-weight: 400;
}
.news .news-container ol li a time {
display: block;
margin-bottom: 20px;
margin-left: 30px;
}
.news .news-container ol li a .news-contents {
display: block;
width: 100%;
color: #4C3536;
font-size: 0.8rem;
}
.news .news-container ol li a .news-contents h4 {
font-size: 0.8rem;
letter-spacing: normal;
}
main .about-mainvisual {
position: relative;
width: 100vw;
height: 90vh;
}
main .about-mainvisual img {
position: absolute;
top: 100px;
right: 0;
height: 60%;
width: 65vw;
border-radius: 5px;
}
main .about-mainvisual .about-mainvisual_title {
position: absolute;
top: 25%;
left: 15%;
}
main .about-mainvisual .about-mainvisual_title h2 {
display: inline-block;
font-size: 1.9rem;
letter-spacing: 0.6em;
writing-mode: vertical-rl;
font-weight: 300;
opacity: 0.5;
}
main .about-mainvisual .about-mainvisual_title h3 {
display: inline-block;
font-size: 2.3rem;
writing-mode: vertical-rl;
letter-spacing: 0.3em;
font-weight: 400;
}
@media (max-width: 890px) {
main .about-mainvisual .about-mainvisual_title {
top: 25%;
left: 10%;
}
main .about-mainvisual .about-mainvisual_title h2 {
font-size: 2rem;
}
main .about-mainvisual .about-mainvisual_title h3 {
font-size: 2rem;
}
}
@media (max-width: 450px) {
main .about-mainvisual {
height: 50vh;
}
main .about-mainvisual img {
height: 70%;
}
main .about-mainvisual .about-mainvisual_title {
top: 25%;
left: 7%;
}
main .about-mainvisual .about-mainvisual_title h2 {
font-size: 1.5rem;
}
main .about-mainvisual .about-mainvisual_title h3 {
font-size: 1.5rem;
}
}
main .about-top {
display: block;
width: 100%;
min-height: 100vh;
}
main .about-top .top__photos {
width: 100%;
height: calc(100vh - 65px);
position: relative;
z-index: 1;
}
main .about-top .top__photos .photo__top-left {
position: absolute;
top: 10px;
left: 10%;
width: 190px;
height: 270px;
}
main .about-top .top__photos .photo__top-left img {
border-radius: 10px;
}
main .about-top .top__photos .photo__bottom-left {
position: absolute;
bottom: 10px;
left: 10%;
width: 270px;
height: 190px;
border-radius: 20px;
}
main .about-top .top__photos .photo__bottom-left img {
border-radius: 10px;
}
main .about-top .top__photos .photo__top-right {
position: absolute;
top: 10px;
right: 10%;
width: 270px;
height: 190px;
border-radius: 20px;
}
main .about-top .top__photos .photo__top-right img {
border-radius: 10px;
}
main .about-top .top__photos .photo__bottom-right {
position: absolute;
bottom: 10px;
right: 10%;
width: 190px;
height: 270px;
border-radius: 20px;
}
main .about-top .top__photos .photo__bottom-right img {
border-radius: 10px;
}
main .about-top .top__photos .top__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
main .about-top .top__photos .top__text-box h4 {
font-size: 1.5rem;
font-weight: 500;
padding-bottom: 20px;
}
main .about-top .top__photos .top__text-box p {
line-height: 2rem;
}
@media (max-width: 890px) {
main .about-top .top__photos {
margin-top: 80px;
}
main .about-top .top__photos .photo__top-left {
top: 10px;
left: 10%;
max-width: 140px;
max-height: 220px;
}
main .about-top .top__photos .photo__top-left img {
border-radius: 10px;
}
main .about-top .top__photos .photo__bottom-left {
bottom: 25%;
left: 10%;
max-width: 220px;
max-height: 140px;
border-radius: 20px;
}
main .about-top .top__photos .photo__top-right {
top: 25%;
right: 10%;
max-width: 220px;
max-height: 140px;
border-radius: 20px;
}
main .about-top .top__photos .photo__bottom-right {
position: absolute;
bottom: 10px;
right: 10%;
max-width: 140px;
max-height: 220px;
border-radius: 20px;
}
main .about-top .top__photos .top__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
}
main .about-top .top__photos .top__text-box h4 {
font-size: 1.2rem;
font-weight: 500;
padding-bottom: 20px;
}
main .about-top .top__photos .top__text-box p {
font-size: 0.9rem;
line-height: 2rem;
}
}
@media (max-width: 450px) {
main .about-top .top__photos .photo__top-left {
top: 10px;
left: 10%;
max-width: 100px;
max-height: 220px;
}
main .about-top .top__photos .photo__top-left img {
border-radius: 10px;
}
main .about-top .top__photos .photo__bottom-left {
bottom: 10%;
left: 10%;
max-width: 170px;
max-height: 140px;
border-radius: 20px;
}
main .about-top .top__photos .photo__top-right {
top: 14%;
right: 10%;
max-width: 145px;
max-height: 140px;
border-radius: 20px;
}
main .about-top .top__photos .photo__bottom-right {
position: absolute;
bottom: 30px;
right: 10%;
max-width: 109px;
max-height: 143px;
border-radius: 20px;
}
main .about-top .top__photos .top__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 2;
max-width: 75%;
min-width: 300px;
}
main .about-top .top__photos .top__text-box h4 {
font-size: 0.9rem;
font-weight: 500;
padding-bottom: 20px;
}
main .about-top .top__photos .top__text-box p {
font-size: 0.83rem;
line-height: 2rem;
}
}
main .representative {
margin: 100px 0;
padding-bottom: 150px;
}
main .representative h3 {
font-family: var(--accent-font);
font-size: 7rem;
font-weight: 100;
letter-spacing: 1.1rem;
text-align: center;
overflow: hidden;
white-space: nowrap;
opacity: 0.2;
padding-bottom: 100px;
}
main .representative .rep-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row-reverse;
}
main .representative .rep-wrapper .rep__photo-box {
width: 50%;
margin-right: 10px;
}
main .representative .rep-wrapper .rep__photo-box .photo {
position: relative;
}
main .representative .rep-wrapper .rep__photo-box .photo img {
width: 100%;
max-width: 400px;
height: 400px;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: -20px;
left: 0;
transform: translate(15%, -35%);
border-radius: 10px;
z-index: 10;
}
main .representative .rep-wrapper .rep__photo-box .photo span {
display: inline-block;
position: absolute;
background-color: var(--sub-color);
width: 300px;
height: 400px;
border-radius: 10px;
bottom: 0;
right: -20px;
z-index: 1;
transform: translateY(40%);
overflow: hidden;
}
main .representative .rep-wrapper .rep__text-box {
width: 50%;
margin-right: 10px;
padding: 0 clamp(20px, 4.6vw, 80px);
}
main .representative .rep-wrapper .rep__text-box h4 {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 1.2rem;
text-align: center;
padding-bottom: 20px;
}
main .representative .rep-wrapper .rep__text-box p {
font-size: 0.87rem;
line-height: 1.8rem;
padding: 60px 0 50px;
}
main .representative .rep-wrapper .rep__text-box .sign-box {
width: 250px;
margin-left: auto;
}
main .representative .rep-wrapper .rep__text-box .sign-box .rep-sign {
width: 100%;
height: 100%;
border-bottom: 1px solid #4C3536;
}
main .representative .rep-wrapper .rep__text-box .sign-box .rep-sign img {
width: 100%;
height: 100%;
}
@media (max-width: 890px) {
main .representative .rep-wrapper {
flex-direction: column;
}
main .representative .rep-wrapper .rep__photo-box {
width: 100%;
padding: 0 24px;
margin-right: 0;
}
main .representative .rep-wrapper .rep__photo-box .photo {
max-width: 700px;
}
main .representative .rep-wrapper .rep__photo-box .photo img {
position: static;
transform: none;
text-align: center;
min-width: auto;
max-width: 100%;
}
main .representative .rep-wrapper .rep__photo-box .photo span {
display: none;
transform: none;
}
main .representative .rep-wrapper .rep__text-box {
width: 100%;
padding-top: 30px;
margin-right: 0;
}
main .representative .rep-wrapper .rep__text-box p {
font-size: 0.8rem;
padding-top: 0;
}
main .representative .rep-wrapper .rep__text-box .sign-box {
width: 190px;
}
}
@media (max-width: 450px) {
main .representative {
padding-bottom: 0;
}
main .representative h3 {
font-size: 2rem;
letter-spacing: 1rem;
padding-bottom: 50px;
}
main .representative .rep-wrapper .rep__photo-box {
margin-right: 0;
}
main .representative .rep-wrapper .rep__photo-box .photo {
max-height: 200px;
}
main .representative .rep-wrapper .rep__photo-box .photo img {
height: 100%;
}
main .representative .rep-wrapper .rep__text-box h4 {
padding-top: 50px;
padding-bottom: 40px;
}
main .representative .rep-wrapper .rep__text-box .sign-box {
width: 180px;
}
}
main .vision {
position: relative;
width: 100%;
height: 100vh;
background-color: var(--sub-gray);
padding: 180px 0 100px 0;
overflow: hidden;
}
main .vision .vision-wrapper {
display: flex;
max-width: 1140px;
margin: 0 auto;
}
main .vision .vision-wrapper .vision-circle {
position: relative;
width: 60%;
max-height: 26vh;
}
main .vision .vision-wrapper .vision-circle .vision_localization {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 2px solid var(--main-color);
border-radius: 50%;
background-color: var(--object-deep-bl);
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding-bottom: 20px;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text {
width: 75%;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text h5 {
text-align: center;
font-size: 1.1rem;
font-weight: 800;
color: var(--sub-text-w);
margin-bottom: 20px;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text p {
font-size: 0.85rem;
font-weight: 600;
color: var(--sub-text-w);
}
main .vision .vision-wrapper .vision-circle .vision_harmony {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 2px solid var(--main-color);
border-radius: 50%;
background-color: var(--object-light-bl);
position: absolute;
bottom: -60px;
left: 9%;
transform: translateY(85%);
padding: 0px 2.5em 0px 0.4em;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text {
width: 75%;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text h5 {
text-align: center;
font-size: 1.1rem;
font-weight: 800;
color: var(--main-color);
margin-bottom: 20px;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text p {
font-size: 0.85rem;
font-weight: 600;
color: var(--main-color);
}
main .vision .vision-wrapper .vision-circle .vision_sincerity {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border: 2px solid var(--main-color);
border-radius: 50%;
background-color: var(--object-middle-bl);
position: absolute;
bottom: -60px;
right: 9%;
transform: translateY(85%);
padding: 0px 0.4em 0px 2.5em;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text {
width: 75%;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text h5 {
text-align: center;
font-size: 1.1rem;
font-weight: 800;
color: var(--sub-text-w);
margin-bottom: 20px;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text p {
font-size: 0.85rem;
font-weight: 600;
color: var(--sub-text-w);
}
main .vision .vision-wrapper .vision-description {
width: 40%;
height: auto;
padding: 0 30px;
}
main .vision .vision-wrapper .vision-description h3 {
font-size: 7rem;
letter-spacing: 1.1rem;
text-align: left;
padding-top: 50px;
color: var(--main-text);
opacity: 0.2;
}
main .vision .vision-wrapper .vision-description h4 {
font-size: 2rem;
font-weight: 600;
text-align: center;
letter-spacing: 0.3rem;
padding: 40px 0 20px 0;
}
main .vision .vision-wrapper .vision-description h5 {
font-size: 1.2rem;
font-weight: 500;
text-align: right;
padding-bottom: 50px;
}
main .vision .vision-wrapper .vision-description p {
padding-bottom: 20px;
line-height: 1.8rem;
}
main .vision .vision-wrapper .vision-description p span {
display: block;
line-height: 1.8rem;
font-weight: 500;
}
@media (max-width: 890px) {
main .vision {
height: 100%;
}
main .vision .vision-wrapper {
flex-direction: column-reverse;
align-items: center;
max-width: 850px;
padding-bottom: 300px;
}
main .vision .vision-wrapper .vision-circle {
display: block;
width: 100%;
max-height: 70vh;
padding-bottom: 200px;
}
main .vision .vision-wrapper .vision-circle .vision_localization {
width: 250px;
height: 250px;
top: 15%;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-circle .vision_harmony {
width: 250px;
height: 250px;
left: 23%;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity {
width: 250px;
height: 250px;
right: 23%;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-description {
padding: 70px 24px 60px 24px;
width: 100%;
height: 100%;
}
main .vision .vision-wrapper .vision-description h3 {
font-size: 4rem;
}
main .vision .vision-wrapper .vision-description h4 {
font-size: 1.6rem;
}
}
@media (max-width: 450px) {
main .vision {
height: 100%;
padding: 80px 0 100px;
}
main .vision .vision-wrapper {
align-items: center;
}
main .vision .vision-wrapper .vision-circle {
display: block;
width: 100%;
max-height: 70vh;
}
main .vision .vision-wrapper .vision-circle .vision_localization {
width: 200px;
height: 200px;
padding: 10px;
top: 0;
left: 50%;
transform: translateX(-50%);
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_localization .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-circle .vision_harmony {
width: 200px;
height: 200px;
padding: 10px;
top: 90%;
left: 50%;
transform: translate(-50%, 80%);
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_harmony .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity {
width: 200px;
height: 200px;
padding: 10px;
top: -80%;
left: 50%;
transform: translate(-50%, 163%);
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text h5 {
font-size: 0.9rem;
}
main .vision .vision-wrapper .vision-circle .vision_sincerity .vision-text p {
font-size: 0.7rem;
}
main .vision .vision-wrapper .vision-description {
padding: 15px 24px 40px 24px;
width: 100%;
height: 100%;
}
main .vision .vision-wrapper .vision-description h3 {
font-size: 3rem;
letter-spacing: 1rem;
display: block;
padding: 0px;
text-align: center;
}
main .vision .vision-wrapper .vision-description h4 {
font-size: 1.3rem;
}
main .vision .vision-wrapper .vision-description h5 {
font-size: 1rem;
}
}
main .structure {
padding: 0 40px;
margin: 100px auto;
max-width: 1200px;
}
@media (max-width: 890px) {
main .structure {
max-width: 850px;
margin: 80px auto;
}
}
@media (max-width: 450px) {
main .structure {
max-width: 400px;
margin: 50px auto;
padding: 0 24px;
}
}
main .structure .structure_title {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 50px;
}
@media (max-width: 450px) {
main .structure .structure_title {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 30px;
}
}
main .structure .structure_title .structure_title-text {
width: 70%;
}
main .structure .structure_title .structure_title-text h3 {
font-size: 3rem;
}
main .structure .structure_title .structure_title-text h4 {
font-size: 8rem;
margin-bottom: 10px;
}
@media (max-width: 890px) {
main .structure .structure_title .structure_title-text h3 {
font-size: 2rem;
}
main .structure .structure_title .structure_title-text h4 {
font-size: 6rem;
margin-bottom: 10px;
}
}
@media (max-width: 450px) {
main .structure .structure_title .structure_title-text {
width: 100%;
}
main .structure .structure_title .structure_title-text h3 {
font-size: 2.2rem;
}
main .structure .structure_title .structure_title-text h4 {
font-size: 1.4rem;
margin-bottom: 10px;
}
}
main .structure .structure_title .structure_description {
position: relative;
width: 25%;
}
main .structure .structure_title .structure_description p {
font-size: 0.87rem;
font-weight: 600;
}
main .structure .structure_title .structure_description:before {
position: absolute;
content: "";
top: 0;
left: -20px;
width: 2px;
height: 100%;
background-color: var(--main-text);
}
@media (max-width: 890px) {
main .structure .structure_title .structure_description {
width: 30%;
}
}
@media (max-width: 450px) {
main .structure .structure_title .structure_description {
width: 100%;
padding-left: 20px;
}
main .structure .structure_title .structure_description p {
font-size: 0.75rem;
}
main .structure .structure_title .structure_description:before {
top: 0;
left: 0;
}
}
main .structure .graph-container {
display: flex;
justify-content: space-around;
align-items: center;
}
@media (max-width: 450px) {
main .structure .graph-container {
flex-direction: column;
gap: 50px;
}
}
main .structure .graph-container .graph-wrap_gender {
width: 45%;
border: 3px solid var(--sub-gray);
border-radius: 20px;
padding: 50px 30px;
}
@media (max-width: 450px) {
main .structure .graph-container .graph-wrap_gender {
width: 100%;
border: 2px solid var(--sub-gray);
border-radius: 15px;
padding: 25px 15px;
}
}
main .structure .graph-container .graph-wrap_gender h5 {
font-size: 1.8rem;
}
main .structure .graph-container .graph-wrap_gender svg {
width: min(660px, 100%) !important;
height: auto;
aspect-ratio: 1/1;
margin: 0 auto;
display: block;
}
main .structure .graph-container .graph-wrap_gender svg circle {
fill: none;
stroke-width: 22;
}
main .structure .graph-container .graph-wrap_gender svg circle:nth-child(1) {
stroke: var(--sub-blue);
stroke-dasharray: 151.94 67.97;
stroke-dashoffset: 0;
-webkit-animation: graphAnime01 1.5s ease-in-out forwards;
animation: graphAnime01 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_gender svg circle:nth-child(2) {
stroke: var(--accent-color-y);
stroke-dasharray: 63.97 155.94;
stroke-dashoffset: -153.94;
-webkit-animation: graphAnime02 1.5s ease-in-out forwards;
animation: graphAnime02 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_gender svg circle.is-animated {
-webkit-animation-play-state: running;
animation-play-state: running;
}
main .structure .graph-container .graph-wrap_gender svg .graph-center-title {
font-family: "TsunagiGothic", sans-serif;
font-size: 5.5px;
font-weight: 600;
fill: var(--main-text);
text-anchor: middle;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_gender svg .graph-center-sub {
font-size: 4px;
font-weight: 600;
fill: var(--main-text);
text-anchor: middle;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_gender svg [class^=graph-label-] {
font-size: 3.8px;
font-weight: 600;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_gender svg .graph-label-male {
fill: var(--sub-blue);
text-anchor: start;
}
main .structure .graph-container .graph-wrap_gender svg .graph-label-female {
fill: var(--accent-color-y);
text-anchor: end;
}
main .structure .graph-container .graph-wrap_ages {
width: 45%;
border: 3px solid var(--sub-gray);
border-radius: 20px;
padding: 50px 30px;
}
@media (max-width: 450px) {
main .structure .graph-container .graph-wrap_ages {
width: 100%;
border: 2px solid var(--sub-gray);
border-radius: 15px;
padding: 25px 15px;
}
}
main .structure .graph-container .graph-wrap_ages h5 {
font-size: 1.8rem;
}
main .structure .graph-container .graph-wrap_ages svg {
width: min(660px, 100%) !important;
height: auto;
aspect-ratio: 1/1;
margin: 0 auto;
display: block;
}
main .structure .graph-container .graph-wrap_ages svg circle {
fill: none;
stroke-width: 22;
}
main .structure .graph-container .graph-wrap_ages svg circle:nth-child(1) {
stroke: var(--object-deep-bl);
stroke-dasharray: 19.99 199.92;
stroke-dashoffset: 0;
-webkit-animation: graphAnime03 1.5s ease-in-out forwards;
animation: graphAnime03 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_ages svg circle:nth-child(2) {
stroke: var(--object-middle-bl);
stroke-dasharray: 30.99 188.92;
stroke-dashoffset: -21.99;
-webkit-animation: graphAnime04 1.5s ease-in-out forwards;
animation: graphAnime04 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_ages svg circle:nth-child(3) {
stroke: var(--object-light-bl);
stroke-dasharray: 19.99 199.92;
stroke-dashoffset: -54.98;
-webkit-animation: graphAnime05 1.5s ease-in-out forwards;
animation: graphAnime05 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_ages svg circle:nth-child(4) {
stroke: var(--object-deep-green);
stroke-dasharray: 85.96 133.95;
stroke-dashoffset: -76.97;
-webkit-animation: graphAnime06 1.5s ease-in-out forwards;
animation: graphAnime06 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_ages svg circle:nth-child(5) {
stroke: var(--object-middle-green);
stroke-dasharray: 52.98 166.93;
stroke-dashoffset: -164.93;
-webkit-animation: graphAnime07 1.5s ease-in-out forwards;
animation: graphAnime07 1.5s ease-in-out forwards;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
main .structure .graph-container .graph-wrap_ages svg circle.is-animated {
-webkit-animation-play-state: running;
animation-play-state: running;
}
main .structure .graph-container .graph-wrap_ages svg .graph-center-title {
font-size: 5.5px;
font-weight: 600;
fill: var(--main-text);
text-anchor: middle;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_ages svg .graph-center-sub {
font-size: 4px;
fill: var(--main-text);
text-anchor: middle;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_ages svg [class^=graph-label-] {
font-size: 3.8px;
font-weight: 600;
dominant-baseline: central;
}
main .structure .graph-container .graph-wrap_ages svg .graph-label-20s {
fill: var(--object-deep-bl);
text-anchor: middle;
}
main .structure .graph-container .graph-wrap_ages svg .graph-label-30s {
fill: var(--object-middle-bl);
text-anchor: start;
}
main .structure .graph-container .graph-wrap_ages svg .graph-label-40s {
fill: var(--object-light-bl);
text-anchor: start;
}
main .structure .graph-container .graph-wrap_ages svg .graph-label-50s {
fill: var(--object-deep-green);
text-anchor: middle;
}
main .structure .graph-container .graph-wrap_ages svg .graph-label-60s {
fill: var(--object-middle-green);
text-anchor: end;
}
main .page-break {
width: 100%;
height: 45vh;
background-image: url(//www.mimasaka-kaihatsu.co.jp/assets/img/about/about_page_break.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
@media (max-width: 450px) {
main .page-break {
height: 30vh;
background-position: 60% 50%;
}
}
main .company-info {
padding: 100px 40px;
width: 100%;
overflow: hidden;
}
main .company-info .company-info_wrapper {
max-width: 980px;
margin: 0 auto;
}
main .company-info .company-info_wrapper h3 {
font-size: 8rem;
letter-spacing: 2rem;
text-align: center;
padding-bottom: 50px;
opacity: 0.2;
}
main .company-info .company-info_wrapper h4 {
text-align: center;
font-size: 2rem;
letter-spacing: 1.2rem;
padding-bottom: 30px;
}
main .company-info .company-info_wrapper dl .info-table {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 2px dotted rgb(129, 111, 112);
padding: 40px 0;
font-size: 1.1rem;
}
main .company-info .company-info_wrapper dl .info-table dt {
font-weight: 600;
width: 30%;
}
main .company-info .company-info_wrapper dl .info-table dd {
width: 70%;
}
@media (max-width: 450px) {
main .company-info {
padding-top: 50px;
}
main .company-info .company-info_wrapper h3 {
font-size: 3rem;
letter-spacing: 0.5rem;
padding-bottom: 20px;
}
main .company-info .company-info_wrapper h4 {
font-size: 1.5rem;
letter-spacing: 1.1rem;
}
main .company-info .company-info_wrapper dl .info-table {
text-align: center;
flex-direction: column;
font-size: 0.8rem;
}
main .company-info .company-info_wrapper dl .info-table dt {
display: block;
width: 100%;
padding-bottom: 10px;
}
main .company-info .company-info_wrapper dl .info-table dd {
width: 100%;
}
}
main .fadeIn {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
main .fadeIn.fadeUp {
opacity: 1;
transform: translateY(0);
}
@-webkit-keyframes graphAnime01 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 151.94 67.97;
}
}
@keyframes graphAnime01 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 151.94 67.97;
}
}
@-webkit-keyframes graphAnime02 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 63.97 155.94;
}
}
@keyframes graphAnime02 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 63.97 155.94;
}
}
@-webkit-keyframes graphAnime03 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 19.99 199.92;
}
}
@keyframes graphAnime03 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 19.99 199.92;
}
}
@-webkit-keyframes graphAnime04 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 30.99 188.92;
}
}
@keyframes graphAnime04 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 30.99 188.92;
}
}
@-webkit-keyframes graphAnime05 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 19.99 199.92;
}
}
@keyframes graphAnime05 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 19.99 199.92;
}
}
@-webkit-keyframes graphAnime06 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 85.96 133.95;
}
}
@keyframes graphAnime06 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 85.96 133.95;
}
}
@-webkit-keyframes graphAnime07 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 52.98 166.93;
}
}
@keyframes graphAnime07 {
from {
stroke-dasharray: 0 219.91;
}
to {
stroke-dasharray: 52.98 166.93;
}
}
main .works-mainvisual {
position: relative;
width: 100vw;
height: 80vh;
}
main .works-mainvisual img {
position: absolute;
top: 100px;
right: 0;
height: 60%;
width: 65vw;
border-radius: 5px;
}
main .works-mainvisual .works-mainvisual_title {
position: absolute;
top: 25%;
left: 15%;
}
main .works-mainvisual .works-mainvisual_title h2 {
display: inline-block;
font-size: 1.9rem;
letter-spacing: 0.6em;
writing-mode: vertical-rl;
font-weight: 300;
opacity: 0.5;
}
main .works-mainvisual .works-mainvisual_title h3 {
display: inline-block;
font-size: 2.3rem;
writing-mode: vertical-rl;
letter-spacing: 0.3em;
font-weight: 400;
}
@media (max-width: 890px) {
main .works-mainvisual .works-mainvisual_title {
top: 25%;
left: 10%;
}
main .works-mainvisual .works-mainvisual_title h2 {
font-size: 2rem;
}
main .works-mainvisual .works-mainvisual_title h3 {
font-size: 2rem;
}
}
@media (max-width: 450px) {
main .works-mainvisual {
height: 50vh;
}
main .works-mainvisual img {
height: 70%;
}
main .works-mainvisual .works-mainvisual_title {
top: 25%;
left: 7%;
}
main .works-mainvisual .works-mainvisual_title h2 {
font-size: 1.6rem;
}
main .works-mainvisual .works-mainvisual_title h3 {
font-size: 1.6rem;
}
}
main .works-top {
width: 100%;
padding-bottom: 100px;
}
main .works-top .top_first {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 50px;
height: 50vh;
}
main .works-top .top_first .first-photo {
width: 60%;
height: 100%;
}
main .works-top .top_first .first-photo img {
border-radius: 0 10px 10px 0;
width: 100%;
height: 100%;
}
main .works-top .top_first .first-text {
width: 40%;
padding: 0 40px;
}
main .works-top .top_first .first-text p {
font-size: 1.4rem;
font-weight: 600;
text-align: center;
}
main .works-top .top_second {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
height: 50vh;
}
main .works-top .top_second .second-photo {
width: 35%;
height: 100%;
}
main .works-top .top_second .second-photo img {
border-radius: 10px 0 0 10px;
width: 100%;
height: 100%;
}
main .works-top .top_second .second-text {
width: 70%;
}
main .works-top .top_second .second-text p {
max-width: 70%;
width: 100%;
line-height: 1.8;
padding: 0 24px 0 24px;
margin: 0 auto;
}
@media (max-width: 890px) {
main .works-top {
padding-bottom: 80px;
}
main .works-top .top_first {
flex-direction: column;
align-items: flex-start;
height: auto;
}
main .works-top .top_first .first-photo {
width: 90%;
height: 250px;
}
main .works-top .top_first .first-text {
width: 100%;
height: auto;
text-align: left;
padding-top: 40px;
}
main .works-top .top_first .first-text p {
font-size: 1.8rem;
display: inline-block;
}
main .works-top .top_second {
flex-direction: column-reverse;
align-items: flex-end;
height: auto;
padding: 0;
}
main .works-top .top_second .second-photo {
width: 60%;
height: 250px;
text-align: right;
}
main .works-top .top_second .second-text {
width: 100%;
height: auto;
margin-bottom: 60px;
}
main .works-top .top_second .second-text p {
padding: auto auto;
}
}
@media (max-width: 450px) {
main .works-top {
padding-top: 80px;
}
main .works-top .top_first {
padding-bottom: 0;
}
main .works-top .top_first .first-text {
padding: 40px 24px 20px 24px;
}
main .works-top .top_first .first-text p {
font-size: 1rem;
}
main .works-top .top_second .second-text p {
font-size: 0.87rem;
max-width: 90%;
padding: 15px 0 0 0;
}
main .works-top .top_second .second-photo {
height: 200px;
}
}
main .page-break {
width: 100%;
height: 45vh;
background-image: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/img/works/pagebreak.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
@media (max-width: 890px) {
main .page-break {
height: 30vh;
}
}
@media (max-width: 450px) {
main .page-break {
height: 20vh;
background-position: 60% 50%;
}
}
main .services {
padding: 100px 0;
}
main .services h4 {
text-align: center;
font-size: 8rem;
font-weight: 400;
letter-spacing: 1.6rem;
opacity: 0.3;
}
main .services h5 {
text-align: center;
font-size: 2rem;
font-weight: 600;
padding-bottom: 90px;
}
main .services .services-contents01,
main .services .services-contents02,
main .services .services-contents03,
main .services .services-contents04 {
display: flex;
justify-content: center;
align-items: center;
height: 30%;
margin-bottom: 50px;
}
main .services .services-contents01 .services-text,
main .services .services-contents02 .services-text,
main .services .services-contents03 .services-text,
main .services .services-contents04 .services-text {
width: 50%;
}
main .services .services-contents01 .services-text .text-inner,
main .services .services-contents02 .services-text .text-inner,
main .services .services-contents03 .services-text .text-inner,
main .services .services-contents04 .services-text .text-inner {
max-width: 70%;
margin: 0 auto;
}
main .services .services-contents01 .services-text .text-inner span,
main .services .services-contents02 .services-text .text-inner span,
main .services .services-contents03 .services-text .text-inner span,
main .services .services-contents04 .services-text .text-inner span {
font-size: 2rem;
font-weight: 600;
position: relative;
display: inline-block;
padding-top: 5px;
}
main .services .services-contents01 .services-text .text-inner span::before,
main .services .services-contents02 .services-text .text-inner span::before,
main .services .services-contents03 .services-text .text-inner span::before,
main .services .services-contents04 .services-text .text-inner span::before {
position: absolute;
content: "";
width: 100%;
border-top: 2px solid #4C3536;
}
main .services .services-contents01 .services-text .text-inner h6,
main .services .services-contents02 .services-text .text-inner h6,
main .services .services-contents03 .services-text .text-inner h6,
main .services .services-contents04 .services-text .text-inner h6 {
display: inline-block;
font-size: 1.6rem;
padding-left: 30px;
font-weight: 500;
}
main .services .services-contents01 .services-text .text-inner p,
main .services .services-contents02 .services-text .text-inner p,
main .services .services-contents03 .services-text .text-inner p,
main .services .services-contents04 .services-text .text-inner p {
padding: 20px;
}
main .services .services-contents01 .services-photo,
main .services .services-contents02 .services-photo,
main .services .services-contents03 .services-photo,
main .services .services-contents04 .services-photo {
width: 50%;
border-radius: 10px;
}
main .services .services-contents01 .services-photo img,
main .services .services-contents02 .services-photo img,
main .services .services-contents03 .services-photo img,
main .services .services-contents04 .services-photo img {
border-radius: 10px;
width: 100%;
height: auto;
}
main .services .services-contents02,
main .services .services-contents04 {
flex-direction: row-reverse;
}
@media (max-width: 890px) {
main .services {
padding: 100px 24px;
}
main .services h4 {
font-size: 3rem;
letter-spacing: 1.1rem;
}
main .services h5 {
font-size: 1.5rem;
letter-spacing: 0.12rem;
}
main .services .services-contents01,
main .services .services-contents02,
main .services .services-contents03,
main .services .services-contents04 {
flex-direction: column-reverse;
width: 100%;
}
main .services .services-contents01 .services-text,
main .services .services-contents02 .services-text,
main .services .services-contents03 .services-text,
main .services .services-contents04 .services-text {
width: 100%;
}
main .services .services-contents01 .services-text .text-inner,
main .services .services-contents02 .services-text .text-inner,
main .services .services-contents03 .services-text .text-inner,
main .services .services-contents04 .services-text .text-inner {
width: 100%;
max-width: 100%;
padding-top: 30px;
}
main .services .services-contents01 .services-text .text-inner span,
main .services .services-contents02 .services-text .text-inner span,
main .services .services-contents03 .services-text .text-inner span,
main .services .services-contents04 .services-text .text-inner span {
font-size: 1rem;
}
main .services .services-contents01 .services-text .text-inner h6,
main .services .services-contents02 .services-text .text-inner h6,
main .services .services-contents03 .services-text .text-inner h6,
main .services .services-contents04 .services-text .text-inner h6 {
font-size: 1rem;
}
main .services .services-contents01 .services-text .text-inner p,
main .services .services-contents02 .services-text .text-inner p,
main .services .services-contents03 .services-text .text-inner p,
main .services .services-contents04 .services-text .text-inner p {
padding-bottom: 30px;
}
main .services .services-contents01 .services-photo,
main .services .services-contents02 .services-photo,
main .services .services-contents03 .services-photo,
main .services .services-contents04 .services-photo {
width: 100%;
}
main .services .services-contents02,
main .services .services-contents04 {
flex-direction: column-reverse;
}
}
@media (max-width: 450px) {
main .services h4 {
font-size: 2.5rem;
font-weight: 400;
letter-spacing: 0.4rem;
}
main .services .services-contents01 .services-text .text-inner h6,
main .services .services-contents02 .services-text .text-inner h6,
main .services .services-contents03 .services-text .text-inner h6,
main .services .services-contents04 .services-text .text-inner h6 {
padding-left: 20px;
}
main .services .services-contents01 .services-text .text-inner p,
main .services .services-contents02 .services-text .text-inner p,
main .services .services-contents03 .services-text .text-inner p,
main .services .services-contents04 .services-text .text-inner p {
font-size: 0.87rem;
}
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Thin.ttf) format("woff2");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-ExtraLight.ttf) format("woff2");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Light.ttf) format("woff2");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Regular.ttf) format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Medium.ttf) format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Bold.ttf) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-ExtraBold.ttf) format("woff2");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "Roboto";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Roboto,Zen_Kaku_Gothic_Antique/Roboto/static/Roboto-Black.ttf) format("woff2");
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: "ZenKakuGothicAntique";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Light.ttf) format("woff2");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "ZenKakuGothicAntique";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.ttf) format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "ZenKakuGothicAntique";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Medium.ttf) format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "ZenKakuGothicAntique";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Bold.ttf) format("woff2");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "ZenKakuGothicAntique";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Black.ttf) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "TsunagiGothic";
src: url(//www.mimasaka-kaihatsu.co.jp/wp-content/themes/original_site_wp/assets/font/TsunagiGothic.ttf) format("woff2");
font-weight: normal;
font-style: normal;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
}
body {
font-family: "ZenKakuGothicAntique", "TsunagiGothic", sans-serif;
color: var(--main-text);
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "TsunagiGothic";
}
a {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
p {
line-break: strict;
text-wrap: balance;
font-weight: 500;
font-family: "ZenKakuGothicAntique";
}
@media (max-width: 450px) {
.inner {
padding: 0 20px;
}
}
:root {
--size: 20px;
--main-color: #ffffff;
--sub-color: #004899;
--sub-blue: #134589;
--sub-gray: #f7f7f7;
--accent-color-g: #e3e3e3;
--accent-color-b: #383635;
--accent-color-w: #ffffff;
--accent-color-y: #ffdd00;
--main-text: #404040;
--sub-text-w: #ffffff;
--sub-text-bl: #134589;
--accent-font: "TsunagiGothic";
--object-light-green: #d9ed92;
--object-middle-green: #76c893;
--object-deep-green: #34a0a4;
--object-light-bl: #3c78cb;
--object-middle-bl: #1a59b1;
--object-deep-bl: #103569;
}
.slick-slide {
margin: 0 30px;
}
.js-active {
transition: opacity 1s ease, transform 1s ease;
opacity: 0;
transform: translateY(10%);
}
.js-active.is-shown {
opacity: 1;
transform: translateY(0);
}
.more-bt {
margin: 40px 20px 0 20px;
text-align: center;
writing-mode: horizontal-tb;
}
.more-bt a {
display: inline-block;
font-size: 0.8rem;
letter-spacing: 0.2rem;
font-weight: 600;
position: relative;
transition: all 0.4s ease;
}
.more-bt a:hover {
font-size: 0.87rem;
}
.more-bt a::after {
content: "";
position: absolute;
top: 50%;
left: 0%;
height: 1px;
width: 170px;
background-color: #4C3536;
border-radius: 10px;
transform: translate(-26px, 17px);
transition: all 200ms ease;
opacity: 1;
}
.more-bt a:hover::after {
opacity: 0;
top: 60%;
}
.more-bt a .btn-circle {
position: absolute;
top: 1px;
left: 80%;
width: 20px;
height: 20px;
border-radius: 10px;
border: 1px solid #4C3536;
background-color: transparent;
transform: translate(40px, 0);
transition: all 200ms ease;
}
.more-bt a .btn-circle::before, .more-bt a .btn-circle::after {
content: "";
position: absolute;
width: 5px;
height: 1px;
background-color: #4C3536;
width: 5px;
left: 1%;
border-radius: 1px;
}
.more-bt a .btn-circle:before {
bottom: 38%;
transform: translate(7px, -3px) rotate(45deg);
}
.more-bt a .btn-circle::after {
bottom: 38%;
transform: translate(7px, 0px) rotate(-45deg);
}
.more-bt a:hover .btn-circle {
width: 21px;
height: 21px;
border-radius: 21px;
background-color: #4C3536;
border-color: 1px solid transparent;
}
.more-bt a:hover .btn-circle::before, .more-bt a:hover .btn-circle::after {
background-color: var(--main-color);
}
.contact {
position: relative;
background-color: var(--main-color);
z-index: 2;
overflow: hidden;
}
.contact .contact_bg {
display: block;
position: relative;
width: 100%;
padding: 70px 20px 110px;
margin: 0 auto;
text-align: center;
background-color: var(--sub-color);
color: #ffffff;
z-index: 1;
}
.contact .contact_bg h4 {
font-size: 10rem;
font-weight: 100;
letter-spacing: 2rem;
color: var(--sub-text-w);
opacity: 0.4;
margin-bottom: 50px;
}
.contact .contact_bg h5 {
font-size: 1.7rem;
font-weight: 600;
margin-bottom: 50px;
}
.contact .contact_bg .contact_wrapper {
display: flex;
justify-content: center;
align-items: center;
max-width: 900px;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_form {
position: relative;
display: block;
border: 1px solid #ffffff;
border-radius: 5px;
padding: 40px 30px;
margin-right: 20px;
width: 50%;
height: 100%;
color: var(--sub-text-w);
transition: all 0.3s ease 0s;
}
.contact .contact_bg .contact_wrapper .contact_form:hover {
background-color: #ffffff;
color: var(--sub-blue);
border: 1px solid var(--sub-blue);
}
.contact .contact_bg .contact_wrapper .contact_form:hover .form_icon .form_white {
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_form:hover .form_icon .form_green {
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon {
position: relative;
width: 60px;
height: 60px;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: opacity 0.3s ease;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon .form_white {
z-index: 1;
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon .form_green {
z-index: 2;
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_form h6 {
font-weight: 600;
padding: 20px 0 10px 0;
}
.contact .contact_bg .contact_wrapper .contact_form p {
font-size: 0.8rem;
}
.contact .contact_bg .contact_wrapper .contact_tel {
position: relative;
display: block;
border: 1px solid var(--accent-color-w);
border-radius: 5px;
padding: 40px 30px 20px;
margin-left: 20px;
width: 50%;
color: #ffffff;
transition: all 0.3s ease 0s;
}
.contact .contact_bg .contact_wrapper .contact_tel:hover {
background-color: var(--accent-color-w);
color: var(--sub-blue);
border: 1px solid var(--sub-blue);
}
.contact .contact_bg .contact_wrapper .contact_tel:hover .tel_icon .tel_white {
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_tel:hover .tel_icon .tel_green {
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon {
position: relative;
text-align: center;
margin: 0 auto;
width: 60px;
height: 60px;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
transition: opacity 0.3s ease;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon .tel_white {
z-index: 1;
opacity: 1;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon .tel_green {
z-index: 2;
opacity: 0;
}
.contact .contact_bg .contact_wrapper .contact_tel h6 {
font-weight: 600;
padding: 20px 0 10px 0;
}
.contact .contact_bg .contact_wrapper .contact_tel dl {
display: flex;
font-size: 0.8rem;
text-align: center;
max-width: 70%;
margin: 0 auto;
}
.contact .contact_bg .contact_wrapper .contact_tel dl dt {
width: 40%;
text-align: left;
}
.contact .contact_bg .contact_wrapper .contact_tel dl dd {
width: 60%;
text-align: left;
}
@media (max-width: 890px) {
.contact .contact_bg h4 {
font-size: 5rem;
margin: 0 auto 30px auto;
}
.contact .contact_bg .contact_wrapper {
flex-direction: column;
border-radius: 30px 30px 0 0;
}
.contact .contact_bg .contact_wrapper .contact_form {
width: 70%;
margin: 0px 0px 30px 0;
}
.contact .contact_bg .contact_wrapper .contact_form .form_icon {
width: 50px;
height: 50px;
}
.contact .contact_bg .contact_wrapper .contact_tel {
width: 70%;
margin: 0px 0px 30px 0px;
}
.contact .contact_bg .contact_wrapper .contact_tel .tel_icon {
width: 50px;
height: 50px;
}
}
@media (max-width: 450px) {
.contact .contact_bg h4 {
font-size: 3.7rem;
letter-spacing: 10px;
}
.contact .contact_bg .contact_wrapper .contact_form,
.contact .contact_bg .contact_wrapper .contact_tel {
width: 90%;
padding: 30px 10px;
}
.contact .contact_bg .contact_wrapper .contact_form .contact_icon,
.contact .contact_bg .contact_wrapper .contact_tel .contact_icon {
width: 40px;
height: 40px;
}
.contact .contact_bg .contact_wrapper .contact_form h6,
.contact .contact_bg .contact_wrapper .contact_tel h6 {
padding-top: 10px;
font-size: 0.8rem;
}
.contact .contact_bg .contact_wrapper .contact_tel .contact_detail dl {
width: 90%;
}
.contact .contact_bg .contact_wrapper .contact_tel .contact_detail dl dt,
.contact .contact_bg .contact_wrapper .contact_tel .contact_detail dl dd {
font-size: 0.7rem;
}
}