:root {
--color-main: rgb(43, 129, 63);
--color-sub: rgb(166, 207, 125);
--color-text: #333;
} * {
box-sizing: border-box;
}
html {
width: 100%;
margin: 0;
padding: 0;
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
font-family: 'Noto Sans JP', sans-serif;
color: rgb(200, 200, 200);
overflow-x: hidden;
width: 100%;
padding-top: 100px;
background-color: rgb(15, 15, 15);
} header {
display: flex;
align-items: center;
position: fixed;
top: 0;
left: 0;
overflow: visible !important;
width: 100%;
box-sizing: border-box;
background-color: #fff;
padding: 10px 50px;
color: rgb(255, 255, 255);
border-top: 5px solid var(--color-main);
z-index: 1000;
background-color: rgb(15, 15, 15);
box-shadow: 0 10px 10px rgba(255, 255, 255, 0.1);
} .header-logo {
flex: 1;
}
.header-logo img {
width: 100px;
} .header-menu {
flex: 0 0 auto;
}
.header-menu ul {
display: flex;
list-style: none;
margin: 0 auto;
padding: 0;
}
.header-menu ul li {
position: relative;
width: auto;
}
.header-menu ul li a {
display: block;
padding: 0 25px;
white-space: nowrap;
text-align: center;
font-family: 'Noto Sans JP', sans-serif;
color: white;
font-size: 18px;
font-weight: 550;
letter-spacing: 0.1em;
text-decoration: none;
transition: 0.3s;
}
.header-menu-sub {
display: block;
font-size: 12px;
}
.header-menu ul li a:hover {
color: var(--color-sub);
}
.sub-menu {
position: absolute;
top: 120%;
left: 0;
z-index: 999;
background-color: rgb(35, 35, 35);
padding: 0;
width: max-content;
min-width: 100%;
box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.1);
border-radius: 6px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.header-menu li:hover>.sub-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.sub-menu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.sub-menu ul li {
display: block;
width: 100%;
}
.sub-menu ul li a {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px 20px;
white-space: nowrap;
color: rgb(200, 200, 200);
font-size: 15px;
text-decoration: none;
transition: color 0.5s, background-color 0.5s;
text-align: left;
line-height: 1.5;
}
.sub-menu ul li a:hover {
background-color: rgb(65, 65, 65);
color: var(--color-sub);
}
.sub-menu ul ul {
position: absolute;
top: -1px;
left: 100%;
background-color: rgb(65, 65, 65);
padding: 0;
width: max-content !important;
min-width: 100%;
box-shadow: 1px 1px 5px 1px rgba(255, 255, 255, 0.1);
border-radius: 6px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.sub-menu li:hover>ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sub-menu ul ul li a {
display: block;
width: 100%;
box-sizing: border-box;
padding: 12px 20px;
width: auto !important;
white-space: nowrap;
color: rgb(200, 200, 200);
font-size: 15px;
text-decoration: none;
transition: color 0.5s, background-color 0.5s;
text-align: left;
line-height: 1.5;
}
.sub-menu ul ul li a:hover {
background-color: rgb(95, 95, 95);
color: var(--color-sub);
}
.sub-menu li.menu-item-has-children>a::after {
content: " >";
font-size: 12px;
float: right;
color: #ccc;
} .header-contact {
flex: 1;
display: flex;
justify-content: flex-end;
}
.contact-link {
text-decoration: none;
}
.contact-label {
font-size: 16px;
color: white;
margin: 0;
font-weight: 500;
letter-spacing: 0.02em;
}
.contact-tel {
font-size: 28px;
font-weight: 700;
color: var(--color-sub);
margin: 2px 0;
line-height: 1;
letter-spacing: 0.05em;
}
.contact-time {
font-size: 14px;
color: white;
margin: 0;
letter-spacing: 0.02em;
}
.contact-box {
display: flex;
flex-direction: column;
align-items: center;
width: 88px;
margin-left: 13px;
}
.contact-box a img {
width: 70px;
}
.contact-text-box {
text-align: center;
font-size: 14px;
} .hamburger-btn {
position: fixed;
top: 35px;
right: 25px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 1100; display: flex;
flex-direction: column;
justify-content: space-between;
}
.hamburger-btn span {
display: block;
width: 100%;
height: 4px;
background-color: var(--color-main); border-radius: 2px;
transition: 0.3s;
} .side-menu {
position: fixed;
top: 0;
right: -350px;
width: 300px;
height: 100vh;
background-color: rgb(35, 35, 35);
z-index: 1200;
padding: 30px;
box-shadow: -5px 0 15px rgba(255, 255, 255, 0.1);
transition: all 0.4s ease;
overflow-y: auto;
}
.side-menu.active {
right: 0;
}
.side-menu-close {
position: absolute;
top: 20px;
right: 20px;
font-size: 40px;
cursor: pointer;
color: #999;
}
.side-menu-list {
list-style: none;
padding: 0;
margin: 40px 0;
}
.side-menu-list li {
display: flex !important;
flex-wrap: wrap;
align-items: center;
border-bottom: 1px solid #eee;
position: relative;
background-color: rgb(35, 35, 35);
}
.side-menu-list li a {
flex: 1;
display: block;
padding: 15px 10px;
color: rgb(200, 200, 200);
text-decoration: none;
font-weight: bold;
font-size: 18px;
line-height: 1.4;
}
.side-menu-contact {
margin-top: 40px;
color: rgb(200, 200, 200);
}
.side-menu-contact a {
font-size: 25px;
font-weight: bold;
color: var(--color-main);
text-decoration: none;
} .side-menu-toggle {
width: 50px;
height: 50px;
background: transparent !important;
border: none !important;
cursor: pointer;
font-size: 10px;
color: #999;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
outline: none;
padding: 0;
}
.side-menu-toggle.active {
color: var(--color-sub);
transform: rotate(180deg);
} .side-sub-menu {
display: none; width: 100%;
background-color: #f9f9f9;
}
.side-sub-menu>ul {
display: block !important;
list-style: none;
padding: 0;
margin: 0;
}
.side-sub-menu ul li a {
padding-left: 25px !important;
font-size: 16px !important;
font-weight: normal !important;
} .side-sub-menu ul li ul {
display: none;
width: 100%;
background-color: #ebebeb;
list-style: none;
padding: 0;
margin: 0;
position: static !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
}
.side-sub-menu ul ul li a {
padding-left: 45px !important;
font-size: 14px !important;
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1150;
display: none;
}
.hamburger-btn,
.side-menu,
.menu-overlay {
display: none;
} .page-main-visual {
position: relative;
width: 100%;
}
.page-main-visual img {
width: 100%;
height: 400px;
object-fit: cover;
}
.page-main-visual.is-child::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
z-index: 1;
}
.visual-container {
position: absolute;
top: 40%;
right: 5%;
z-index: 10;
padding: 10px;
}
.visual-container h1 {
font-size: 80px;
color: rgba(255, 255, 255, 0.8);
font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
font-weight: bold;
letter-spacing: 0.5em;
margin: 0;
}
.visual-container h2 {
display: none;
}
.visual-container.is-child {
position: absolute;
top: 30%;
left: 5%;
z-index: 10;
padding: 10px;
}
.visual-container.is-child h1 {
font-size: 50px;
color: white;
font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", "MS PMincho", serif;
letter-spacing: 0.1em;
margin: 0;
}
.visual-container.is-child h2 {
display: block;
font-size: 20px;
color: rgb(200, 200, 200);
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
font-weight: bold;
margin: 0 0 0 10px;
} .header-menu {
display: block;
} .breadcrumb-list ul {
list-style: none;
padding: 0;
border-bottom: 1px dashed var(--color-sub);
}
.breadcrumb-list li {
display: inline;
}
.breadcrumb-list li+li:before {
content: ">";
margin: .5em;
}
.breadcrumb-list li a {
color: rgb(200, 200, 200);
text-decoration: none;
transition: 0.3s;
}
.breadcrumb-list li a:hover {
color: var(--color-sub);
} .Top_image img {
width: 100%;
max-height: 477px;
object-fit: cover;
}
.Top_image_layer {
position: absolute;
top: 0;
width: 50%;
height: 100%;
pointer-events: none;
}
.layer_01,
.layer_02 {
left: 0;
}
.layer_01 {
left: 0;
background: rgba(15, 15, 15, 1);
z-index: 2;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}
.layer_02 {
left: 2%;
background: rgba(41, 41, 41, 0.8);
z-index: 1;
clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}
.layer_03 {
left: 75%;
background: rgba(15, 15, 15, 1);
z-index: 2;
clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.layer_04 {
left: 73%;
background: rgba(41, 41, 41, 0.8);
z-index: 1;
clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
}
.Top_image_text {
position: absolute;
color: #ccc;
top: 30%;
left: 10px;
z-index: 3;
} #update-date {
display: block;
text-align: right;
padding-right: 20px;
}
.toppage-appeal-container {
max-width: 80%;
margin: 0 auto;
padding: 0 20px;
}
.toppage-appeal-container h1 {
color: white;
border-bottom: 1px solid #ccc;
font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}
.toppage-appeal-container p {
font-weight: 700;
} .slider {
max-width: 80%;
margin: 50px auto;
text-align: right;
}
.slider .all-service {
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 18px;
color: rgb(200, 200, 200);
}
.Top_slider {
height: 400px;
margin: 50px auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}
.Top_slider.slick-initialized {
opacity: 1;
visibility: visible;
}
.Top_slider:not(.slick-initialized)>div:nth-child(n+2) {
display: none;
}
.Top_slider .slick-slide {
position: relative;
height: 400px;
padding: 0 10px;
box-sizing: border-box;
}
.Top_slider .slick-slide::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(15, 15, 15, 1), rgba(255, 255, 255, 0));
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
z-index: 1;
pointer-events: none;
}
.Top_slider .slick-dots li button::before {
color: #fff !important;
opacity: 0.3;
}
.Top_slider .slick-dots li.slick-active button::before {
color: #fff !important;
opacity: 1;
}
.Top_slider img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.slider-content {
position: absolute;
top: 10%;
bottom: 15%;
left: 15%;
max-width: 60%;
z-index: 2;
text-align: left;
width: auto;
color: #ffffff;
display: flex;
flex-direction: column;
}
.slider-title {
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
letter-spacing: 0.1em;
text-shadow: 5px 5px 2px rgba(255, 255, 255, 0.4);
}
.slider-text {
font-size: 16px;
padding-right: 20px;
margin-bottom: 30px;
text-shadow:
1px 1px 3px rgba(0, 0, 0, 0.8),
0 0 15px rgba(0, 0, 0, 0.5);
}
.slider-btn {
display: inline-block;
padding: 15px 50px;
background-color: rgba(15, 15, 15, 0.2);
color: #fff;
text-decoration: none;
font-weight: 700;
border-radius: 4px;
box-shadow: 0px 2px 6px 5px rgba(255, 255, 255, 0.2);
transition: background-color 0.3s;
pointer-events: auto;
margin-top: auto;
align-self: flex-start;
}
.slider-btn:hover {
color: rgb(15, 15, 15);
background-color: rgba(255, 255, 255, 0.8);
} .toppage-main-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 50px;
margin: 50px auto;
padding: 0 20px;
align-items: stretch;
width: fit-content; max-width: 80%;
} .news-container {
flex: 1 1 100%;
max-width: 100%;
padding: 10px 20px;
border-radius: 10px;
background-color: rgba(56, 56, 56, 0.2);
box-shadow: 1px 1px 10px 1px rgba(255, 255, 255, 0.2);
}
.news-header {
display: flex;
align-items: center;
border-bottom: 2px dotted var(--color-sub);
}
.news-title {
font-size: 20px;
}
.news-header h2 {
margin: 0;
margin-bottom: 10px;
font-size: 24px;
color: var(--color-sub);
}
.news-header a {
margin-left: auto;
font-size: 18px;
text-decoration: none;
}
.news-post {
align-items: center;
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
.news-post th:first-child {
width: 100px;
}
.news-post tr th {
padding: 15px 0 5px 0;
text-align: left;
font-weight: normal;
border-bottom: 1px solid #757575;
}
.news-post tr th a {
text-decoration: none;
display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgb(200, 200, 200);
transition: 0.3s;
}
.news-post tr th a:hover {
color: var(--color-sub);
} .contents-container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 30px;
align-items: stretch;
width: fit-content;
flex: 1 1 500px;
max-width: 100%;
}
.contents-sub-container {
flex: 1 300px;
max-width: 100%;
padding: 10px 20px;
border-radius: 10px;
background-color: rgba(56, 56, 56, 0.2);
box-shadow: 1px 1px 10px 1px rgba(255, 255, 255, 0.2);
}
.contents-header {
display: flex;
align-items: flex-start;
}
.contents-header img {
width: 35px;
margin: 0 7px;
}
.contents-header h2 {
margin: 0;
color: var(--color-sub);
font-size: 24px;
}
.contents-detail {
display: flex;
flex-direction: column; }
.contents-detail p {
margin-bottom: 5px;
}
.contents-detail a {
margin-left: auto;
display: inline-block;
text-decoration: none;
pointer-events: auto;
} .toppage-target-container {
overflow: hidden; }
.toppage-target-container h1 {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 40px 0; font-size: 27px; }
.toppage-target-container h1::before,
.toppage-target-container h1::after {
content: "";
flex: 1; min-width: 30px; max-width: 600px; border-bottom: 4px dotted var(--color-main);
height: 1px;
transform: translateY(-2px);
} .target-container {
display: flex;
flex-wrap: wrap;
padding: 10px 20px;
justify-content: center;
gap: 50px;
width: 100%;
}
.target-service-box {
width: 100%;
max-width: 700px;
padding: 10px 0 40px 0;
overflow: hidden;
background:
linear-gradient(to right, rgb(0, 0, 0) 50%, rgb(0, 61, 2) 70%, rgba(255, 255, 255, 0) 100%),
url(//justice.gr.jp/wordpress/wp-content/themes/justice_hp/images/top-page/top-service-background.jpg) no-repeat right center / cover; border: 0.5px solid #39ff14;
border-radius: 10px; box-shadow:
0 0 4px #fff, 0 0 10px #39ff14, 0 0 20px #39ff14, inset 0 0 4px #fff, inset 0 0 10px #39ff14; }
.target-company-box {
width: 100%;
max-width: 700px;
padding: 10px 0 40px 0;
overflow: hidden;
background:
linear-gradient(to right, rgb(0, 0, 0) 50%, rgb(0, 21, 31) 70%, rgba(255, 255, 255, 0) 100%),
url(//justice.gr.jp/wordpress/wp-content/themes/justice_hp/images/top-page/top-company-background.jpg) no-repeat right center / cover; border: 2px solid rgb(38, 175, 255);
border-radius: 10px; box-shadow:
0 0 4px #fff,
0 0 10px rgb(38, 175, 255),
0 0 20px rgb(38, 175, 255),
inset 0 0 4px #fff,
inset 0 0 10px rgb(38, 175, 255);
}
.target-content {
display: flex;
align-items: flex-start;
}
.target-content img {
width: 120px;
margin: 10px 20px;
height: auto;
display: block;
}
.target-content h3 {
margin: 0;
margin-top: 10px;
font-size: 22px;
}
.target-service-button {
display: inline-block;
background-color: #006432; color: #fff;
padding: 10px 40px;
border: none;
border-radius: 50px; text-decoration: none;
font-weight: bold;
font-size: 16px;
position: relative;
}
.target-company-button {
display: inline-block;
background-color: #002b64; color: #fff;
padding: 10px 40px;
border: none;
border-radius: 50px; text-decoration: none;
font-weight: bold;
font-size: 16px;
position: relative;
} footer {
padding: 20px 100px;
margin-top: 50px;
color: #fff;
background-color: var(--color-main);
}
.footer-top {
display: flex;
flex-wrap: wrap;
align-items: stretch;
position: relative;
gap: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.inquiry-text {
min-width: 400px;
padding-right: 20px;
}
.inquiry-text h2 {
flex: 1;
padding: 0;
margin: 0;
font-size: 30px;
}
.inquiry-text h3 {
flex: 1;
padding: 0;
margin: 0;
}
.inquiry-box {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: stretch;
position: relative;
padding: 10px 20px;
color: var(--color-text);
background-color: #fff;
border-radius: 10px;
}
.inquiry-box h3 {
margin: 0;
}
.inquiry-box p {
margin: 0;
}
.inquiry-phone,
.inquiry-FAX,
.inquiry-mail {
flex: 1;
min-width: 370px;
align-items: center;
text-align: center;
}
.inquiry-phone {
padding: 10px 20px 10px 0;
border-right: 1px dotted var(--color-sub);
}
.inquiry-FAX {
padding: 10px 0;
border-right: 1px dotted var(--color-sub);
}
.inquiry-mail {
padding: 10px 0;
}
.inquiry-link {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10px;
gap: 10px;
}
.inquiry-link img {
width: 70px;
height: auto;
}
.inquiry-link .phone-link {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
color: var(--color-sub);
border: none;
}
.inquiry-link .phone-link {
color: var(--color-sub) !important;
background-color: transparent !important;
}
.inquiry-link a {
text-decoration: none;
color: var(--color-text);
padding: 10px 20px;
border: 1px solid var(--color-text);
transition: 0.3s;
}
.inquiry-link a:hover {
color: #fff;
background-color: var(--color-text);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
padding-top: 10px;
}
.footer-menu {
flex: 1;
}
.footer-menu ul {
display: flex;
list-style: none;
margin: 0 auto;
padding: 0;
}
.footer-menu ul li a {
display: block;
padding: 0 10px;
white-space: nowrap;
font-size: 14px;
color: #fff;
text-decoration: none;
transition: 0.3s;
}
.footer-menu ul li a:hover {
color: #cfcfcf;
}
.footer-copylight {
flex: 1;
font-size: 12px;
text-align: right;
} .scroll-rotate-logo {
position: fixed;
bottom: -300px;
left: -300px;
width: 800px;
height: 800px;
background-image: url(//justice.gr.jp/wp-content/themes/justice_hp/images/background/background-logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: 0.08;
z-index: -1;
pointer-events: none;
will-change: transform; transform: translate3d(0, 0, 0) rotate(0deg);
backface-visibility: hidden;  transition: transform 0s;
} .single,
.post-list {
padding: 20px 80px;
}
.single_title {
font-size: 20px;
border-bottom: 2px solid white;
padding-bottom: 5px;
}
.single_content {
padding: 10px;
}
.home-title-box {
text-align: center;
margin: 20px 0;
}
.home-title-box h1 {
display: inline-block;
margin: 0;
padding: 0 20px;
text-align: center;
border-bottom: 2px solid var(--color-sub);
}
.home-title-box p {
margin: 0;
}
.post-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 30px;
align-items: stretch;
color: white;
margin-bottom: 20px;
padding: 20px;
background-color: var(--color-sub);
border-radius: 10px;
}
.post-eyecatch {
width: 500px;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.post-eyecatch img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.3s;
}
.post-eyecatch:hover img {
transform: scale(1.15);
}
.post-meta {
flex: 1;
min-width: 300px;
}
.post-title {
color: white;
margin-top: 5px;
border-bottom: 1px solid white;
}
.post-title a,
.post-category a {
text-decoration: none;
color: white;
transition: 0.3s;
}
.post-title a:hover,
.post-category a:hover {
opacity: 0.7;
} .pagination {
padding: 10px 0;
text-align: center;
}
.pagination .nav-links {
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
font-size: 15px;
font-weight: 500;
color: white;
text-decoration: none;
background-color: #1a1a1a;
border: 1px solid #333333;
border-radius: 4px;
transition: all 0.3s ease;
}
.pagination a.page-numbers:hover {
background-color: #333333;
border-color: #666666;
}
.pagination .page-numbers.current {
background-color: var(--color-sub);
cursor: default;
}
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
padding: 0 16px;
} .back-home {
color: rgb(200, 200, 200);
transition: 0.3s;
}
.back-home:hover {
opacity: 0.7;
} .wpcf7 br {
display: none !important;
} .custom-cf7-form .form-group {
margin-bottom: 30px;
}
.custom-cf7-form .form-group label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}
.custom-cf7-form .required {
color: #ff5252;
font-size: 12px;
margin-left: 5px;
}
.custom-cf7-form input[type="text"],
.custom-cf7-form input[type="email"],
.custom-cf7-form input[type="tel"],
.custom-cf7-form input[type="date"],
.custom-cf7-form select,
.custom-cf7-form textarea {
width: 100%;
margin-top: 0 !important;
padding: 10px 12px;
font-size: 15px;
border: 3px solid #cccccc;
border-radius: 4px;
background-color: #ffffff;
color: #333333;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.custom-cf7-form input[type="date"] {
width: 145px;
}
.custom-cf7-form input:focus,
.custom-cf7-form select:focus,
.custom-cf7-form textarea:focus {
border-color: var(--color-sub);
outline: none;
}
.custom-cf7-form input[name="company-name"]:disabled {
background-color: #333333 !important;
color: #888888 !important;
border-color: #555555 !important;
cursor: not-allowed;
}
.custom-cf7-form .radio-group {
display: flex;
gap: 20px;
align-items: center;
}
.custom-cf7-form .radio-group label {
display: inline-flex;
align-items: center;
font-weight: normal;
font-size: 16px;
cursor: pointer;
}
.custom-cf7-form .inline-input {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.custom-cf7-form .inline-input input[type="text"] {
width: 100px;
}
.custom-cf7-form .inline-input .unit {
font-size: 16px;
padding: 0 5px;
}
.custom-cf7-form .input-short-2 {
width: 60px !important;
text-align: right !important;
}
.custom-cf7-form .input-short-3 {
width: 75px !important;
text-align: right !important;
}
.custom-cf7-form .input-short-4 {
width: 90px !important;
text-align: right !important;
}
.custom-cf7-form .form-actions {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
width: 100%;
text-align: center;
}
.custom-cf7-form .form-actions p {
margin: 0;
display: flex;
}
.custom-cf7-form input[type="submit"] {
display: inline-block;
min-width: 150px;
background-color: var(--color-main);
color: white;
font-size: 16px;
font-weight: bold;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
box-sizing: border-box;
}
.custom-cf7-form input[type="submit"]:hover {
background-color: var(--color-sub);
}
.custom-cf7-form input[type="reset"],
.custom-cf7-form .wpcf7-previous {
display: inline-block;
min-width: 150px;
background-color: #333333;
color: white;
font-size: 14px;
padding: 12px 24px;
border: 1px solid #555555;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
box-sizing: border-box;
}
.custom-cf7-form input[type="reset"]:hover,
.custom-cf7-form .wpcf7-previous:hover {
background-color: #444444;
} .wsp-container a {
color: rgb(200, 200, 200);
transition: color 0.3s;
}
.wsp-container a:hover {
opacity: 0.7;
} .seo-container {
flex: 1 1 100%;
max-width: 100%;
}
.seo-accordion {
margin: 0 auto;
padding: 15px;
font-size: 13px;
border-radius: 10px;
background-color: rgba(56, 56, 56, 0.2);
box-shadow: 1px 1px 10px 1px rgba(255, 255, 255, 0.2);
}
:root {
interpolate-size: allow-keywords;
}
.seo-accordion::details-content {
height: 0;
transition: 0.3s;
}
.seo-accordion[open]::details-content {
height: auto;
}
.seo-accordion summary {
cursor: pointer;
font-weight: bold;
outline: none;
padding: 5px;
}
.seo-accordion-content {
margin-top: 15px;
line-height: 1.8;
text-align: left;
}
.seo-accordion-content h5 {
font-weight: bold;
margin-bottom: 5px;
font-size: 14px;
}
.seo-accordion-content p {
margin-bottom: 15px;
}
.home-fixed-content-area {
width: 100%;
max-width: 1000px;
margin: 0 auto;
} @media screen and (max-width: 1200px) { .header-menu,
.contact-box-FAX,
.contact-text-box {
display: none;
}
.contact-box {
width: 60px;
}
.contact-box a img {
width: 60px;
}
.header-contact {
margin-right: 60px;
} .hamburger-btn {
display: flex; } .side-menu {
display: block;
} .header-logo img {
width: 80px;
}
header {
padding: 10px 20px !important;
}
.slider,
.toppage-main-container,
.toppage-appeal-container {
max-width: 90%;
}
footer {
padding: 20px !important;
flex-direction: column;
gap: 10px;
}
.footer-menu ul {
flex-wrap: wrap;
justify-content: center;
}
.footer-copylight {
text-align: center;
}
.scroll-rotate-logo {
bottom: -250px;
left: -250px;
width: 600px;
height: 600px;
opacity: 0.08;
} .Top_slider,
.Top_slider .slick-slide {
height: 400px !important;
}
.slider-title {
font-size: 30px;
}
.page-main-visual img {
width: 100%;
height: 300px;
object-fit: cover;
}
.visual-container {
right: 0;
}
.visual-container h1 {
font-size: 50px;
}
.visual-container.is-child h1 {
font-size: 40px;
}
.visual-container.is-child h2 {
font-size: 18px;
} .toppage-target-container h1 {
font-size: 18px !important; gap: 10px !important;
}
.toppage-target-container h1::before,
.toppage-target-container h1::after {
min-width: 10px !important; } .news-post th:first-child {
width: 100px !important; font-size: 13px;
}
.news-post th a {
font-size: 14px;
}
.inquiry-box {
flex-direction: column;
padding: 20px;
}
.inquiry-phone,
.inquiry-FAX {
min-width: auto !important;
border-right: none;
border-bottom: 1px dotted var(--color-sub);
padding: 0 0 20px 0;
margin-bottom: 20px;
}
.single,
.post-list {
padding: 20px 50px;
}
.post-eyecatch img {
width: 300px;
}
} @media screen and (max-width: 480px) {
.toppage-appeal-container h1 {
font-size: 24px;
} .slider-title {
font-size: 24px !important;
}
.slider-text {
font-size: 14px !important;
}
.slider-btn {
padding: 12px 30px !important; }
.slider,
.toppage-main-container,
.toppage-appeal-container {
max-width: 100%;
padding: 0 20px;
}
.page-main-visual img {
width: 100%;
height: 200px;
object-fit: cover;
}
.visual-container h1 {
font-size: 30px;
}
.visual-container.is-child {
left: 0%;
}
.visual-container.is-child h1 {
font-size: 30px;
letter-spacing: 0em;
}
.visual-container.is-child h2 {
font-size: 16px;
}
.target-content img {
width: 60px;
margin: 10px;
}
.target-content h3 {
width: 70%;
}
.target-content p {
font-size: 14px;
width: 70%;
}
.target-service-button,
.target-company-button {
font-size: 14px !important;
padding: 10px 30px !important;
}
.footer-top {
flex-direction: column;
gap: 30px;
}
.scroll-rotate-logo {
bottom: -150px;
left: -200px;
width: 400px;
height: 400px;
opacity: 0.08;
}
.inquiry-text {
min-width: auto !important;
padding-right: 0;
text-align: center;
}
.inquiry-text h2 {
font-size: 24px;
}
.inquiry-box {
flex-direction: column;
padding: 20px;
}
.inquiry-phone,
.inquiry-FAX {
min-width: auto !important;
border-right: none;
border-bottom: 1px dotted var(--color-sub);
padding: 0 0 20px 0;
margin-bottom: 20px;
}
.inquiry-mail {
min-width: auto !important;
padding: 0;
}
.inquiry-link .phone-link {
font-size: 28px !important;
}
.inquiry-link a {
box-sizing: border-box;
}
.page-main-container h1 {
font-size: 24px;
}
.home-title-box h1 {
font-size: 24px;
}
.post-title {
font-size: 20px;
}
.single,
.post-list {
padding: 20px 0;
}
.post-eyecatch img {
width: 100%;
}
.post-meta {
flex: 1;
min-width: 0;
}
.custom-cf7-form .form-actions,
.custom-cf7-form .form-actions p {
flex-direction: column;
}
}