@charset "UTF-8";
html {
color: #333;
font-family: "Noto Sans JP", YuGothic, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size: 1.1vw;
position: relative;
background: #fff;
font-weight: 400;
visibility: hidden;
}
html.wf-active {
visibility: visible;
}
@media (max-width: 959px) {
html {
font-size: 1.5vw;
}
}
@media (max-width: 559px) {
html {
font-size: 3.4vw;
}
}
body {
text-rendering: optimizeLegibility;
font-kerning: normal;
font-variant-ligatures: common-ligatures contextual;
font-feature-settings: "kern", "liga", "clig", "calt";
padding: 8vw 0 0;
}
body a {
color: #333;
text-decoration: none;
vertical-align: top;
cursor: pointer;
font-family: "Noto Sans JP", YuGothic, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", sans-serif;
display: inline-block;
}
body input {
font-family: "Noto Sans JP", YuGothic, "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Verdana, "ＭＳ Ｐゴシック", sans-serif;
}
body input[type=submit], body input[type=button] {
-webkit-appearance: none;
}
body a:hover {
text-decoration: none;
}
body a:hover img {
opacity: 0.8;
transition: 0.3s;
}
body a:focus {
overflow: hidden;
outline: none;
}
body .indent {
padding-left: 1em;
text-indent: -1em;
}
body dt, body dd, body p, body li, body th, body td, body address {
line-height: 1.8;
letter-spacing: 0.1vw;
}
body img {
max-width: 100%;
}
body strong {
font-weight: 700;
}
body .red {
color: #cb2d28;
}
body .blue {
color: #316bba;
}
body .right {
text-align: right;
}
body .left {
text-align: left;
}
body .center {
text-align: center;
}
body .b {
font-weight: bold;
}
body .s {
font-size: 0.8vw;
}
body .mb0 {
margin-bottom: 0 !important;
}
body .mb1 {
margin-bottom: 1vw !important;
}
body .mb2 {
margin-bottom: 2vw !important;
}
body .mb5 {
margin-bottom: 5vw !important;
}
body .mb7 {
margin-bottom: 7vw !important;
}
body .mt1 {
margin-top: 1vw !important;
}
body .must {
background: #cb2d28;
padding: 0 0.5vw;
color: #fff;
font-weight: bold;
font-size: 0.8vw;
text-align: center;
display: inline-block;
margin-left: 1vw;
}
@media (max-width: 559px) {
body {
padding-top: 11vw;
}
}
body .mask-bg {
display: inline-block;
overflow: hidden;
position: relative;
font-weight: bold;
}
body .mask-bg__content {
position: relative;
z-index: 2;
opacity: 0;
transition: opacity 0.2s ease 550ms;
}
body .mask-bg::after {
content: "";
position: absolute;
inset: 0;
z-index: 222;
background: #316bba;
transform: translateX(-101%);
}
body .mask-bg.is-animated .mask-bg__content {
opacity: 1;
}
body .mask-bg.is-animated::after {
animation: mask-bg-x 0.8s cubic-bezier(0.8, 0, 0.17, 1);
}
@media (max-width: 559px) {
body .mask-bg::after {
transform: translateX(-104%);
}
}
@keyframes mask-bg-x {
0% {
transform: translateX(-101%);
}
40%, 60% {
transform: translateX(0%);
}
100% {
transform: translateX(101%);
}
}
body a.link-common01 {
padding-bottom: 0.2vw;
background-image: linear-gradient(#000, #000);
background-repeat: no-repeat;
background-position: bottom right;
background-size: 0 1px;
transition: background-size 0.3s;
}
body a.link-common01:hover {
background-position: bottom left;
background-size: 100% 1px;
}
body a.link-common02 {
position: relative;
}
body a.link-common02:before {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
content: "";
background-color: #000;
mix-blend-mode: soft-light;
transition: 0.2s;
}
body a.link-common02:hover:before {
width: 100%;
}
body a.icon-email {
position: relative;
}
body a.icon-email:before {
position: absolute;
left: 3vw;
top: 1vw;
content: "email";
font-family: "Material Icons";
font-size: 2vw;
color: #316bba;
}
@media (max-width: 559px) {
body a.icon-email:before {
left: 4vw;
font-size: 6vw;
}
}
body a.url {
border: 1px solid #666;
font-size: 1vw;
padding: 0.4vw 1vw 0.6vw 2.5vw;
margin: 0 0 0 1vw;
position: relative;
top: -0.2vw;
transition: 0.2s;
}
body a.url:before {
position: absolute;
left: 0.6vw;
top: 0.3vw;
content: "link";
font-size: 1.4vw;
font-family: "Material Icons";
color: #316bba;
}
body a.url:hover {
border-color: #316bba;
color: #fff;
background-color: #316bba;
}
body a.url:hover:before {
color: #fff;
}
@media (max-width: 559px) {
body a.url {
font-size: 2.4vw;
padding: 1vw 2vw 1vw 4.4vw;
}
body a.url:before {
font-size: 3vw;
top: 0.7vw;
left: 1vw;
}
}
body a.pdf {
background-color: #316bba;
color: #fff;
font-weight: 700;
display: inline-block;
transition: 0.2s;
line-height: 1;
padding: 0.4vw 1vw 0.4vw 2vw;
position: relative;
}
body a.pdf:hover {
filter: brightness(1.2);
}
body a.pdf:before {
content: "download";
font-family: "Material Icons";
position: absolute;
left: 0.6vw;
top: 0.55vw;
font-size: 1vw;
color: #fff;
}
@media (max-width: 559px) {
body a.pdf {
font-size: 3vw;
padding: 0.8vw 1vw 0.8vw 3vw;
}
body a.pdf:before {
font-size: 2vw;
top: 1.3vw;
}
}
body .icon-office {
position: relative;
padding-left: 3.7vw !important;
}
body .icon-office:before {
position: absolute;
content: "corporate_fare";
font-family: "Material Icons";
color: #316bba;
left: 0;
top: -0.3vw;
font-size: 3vw;
}
@media (max-width: 559px) {
body .icon-office {
padding-left: 7vw !important;
}
body .icon-office:before {
font-size: 5vw;
}
}
body .icon-factory {
position: relative;
padding-left: 3.7vw !important;
}
body .icon-factory:before {
position: absolute;
content: "warehouse";
font-family: "Material Icons";
color: #316bba;
left: 0;
top: -0.3vw;
font-size: 3vw;
}
@media (max-width: 559px) {
body .icon-factory {
padding-left: 5vw !important;
}
body .icon-factory:before {
font-size: 5vw;
left: -0.4vw;
}
}
body .icon-machine {
position: relative;
padding-left: 3.7vw !important;
}
body .icon-machine:before {
position: absolute;
content: "settings";
font-family: "Material Icons";
color: #316bba;
left: 0;
top: -0.3vw;
font-size: 3vw;
}
@media (max-width: 559px) {
body .icon-machine {
padding-left: 5vw !important;
}
body .icon-machine:before {
font-size: 5vw;
left: -0.4vw;
}
}
body .icon-assignment {
position: relative;
padding-left: 3.7vw !important;
}
body .icon-assignment:before {
position: absolute;
content: "assignment";
font-family: "Material Icons";
color: #316bba;
left: 0;
top: -0.3vw;
font-size: 3vw;
}
@media (max-width: 559px) {
body .icon-assignment {
padding-left: 5vw !important;
}
body .icon-assignment:before {
font-size: 5vw;
left: -0.4vw;
}
}
body .icon-catalog {
position: relative;
padding-left: 3.7vw !important;
}
body .icon-catalog:before {
position: absolute;
content: "library_books";
font-family: "Material Icons";
color: #316bba;
left: 0;
top: -0.3vw;
font-size: 3vw;
}
@media (max-width: 559px) {
body .icon-catalog {
padding-left: 5vw !important;
}
body .icon-catalog:before {
font-size: 5vw;
left: -0.4vw;
}
}
body .solo {
margin: 0 10vw;
}
@media (max-width: 959px) {
body .solo {
margin: 0;
}
}
body .btn-common01 a, body .btn-common01 input {
background: #316bba;
color: #fff !important;
position: relative;
padding: 1vw 5vw 1vw 2vw;
text-align: left;
}
body .btn-common01 a:after, body .btn-common01 input:after {
content: "keyboard_arrow_right";
font-family: "Material Icons";
font-size: 2vw;
color: #fff;
position: absolute;
right: 0.5vw;
top: 0.2vw;
}
body .btn-common01 input {
border: none;
font-size: 1.2vw;
padding: 1.6vw 2vw;
min-width: 30vw;
display: inline-block;
text-align: center;
cursor: pointer;
font-weight: 700;
transition: 0.2s;
}
body .btn-common01 input:disabled {
background-color: #ccc;
}
body .btn-common01 input:hover {
filter: brightness(1.2);
}
body .btn-common01 span {
display: block;
}
body .btn-common01 span.right {
text-align: center;
}
body .btn-common01.white a, body .btn-common01.white input {
background: #fff;
color: #333 !important;
}
body .btn-common01.white a:after, body .btn-common01.white input:after {
color: #316bba;
}
@media (max-width: 559px) {
body .btn-common01 a, body .btn-common01 input {
width: 100%;
box-sizing: border-box;
min-height: 13vw;
display: flex;
justify-content: center;
align-items: center;
}
body .btn-common01 a:after, body .btn-common01 input:after {
font-size: 6vw;
right: 2vw;
top: 1.1vw;
}
body .btn-common01 input {
font-size: 4.2vw;
padding: 2.6vw 3vw;
min-height: 16vw;
}
}
body .btn-common02 a {
background: #fff;
position: relative;
padding: 1.4vw 5vw 1.5vw 6vw;
text-align: center;
font-size: 1.4vw;
font-weight: 500;
letter-spacing: 0.1vw;
transition: 0.2s;
}
body .btn-common02 a:after {
content: "keyboard_arrow_right";
font-family: "Material Icons";
font-size: 2vw;
color: #316bba;
position: absolute;
right: 1vw;
top: 50%;
margin-top: -1.7vw;
}
body .btn-common02 a:hover {
background: #316bba;
color: #fff;
}
body .btn-common02 a:hover:before, body .btn-common02 a:hover:after {
color: #fff;
}
@media (max-width: 559px) {
body .btn-common02 a {
width: 100%;
box-sizing: border-box;
min-height: 13vw;
display: flex;
justify-content: center;
align-items: center;
font-size: 3vw;
}
}
body .list-common01 li {
display: flex;
justify-content: flex-start;
border-bottom: 1px solid #c9c9c9;
gap: 2vw;
padding: 2vw 0;
}
body .list-common01 li:nth-of-type(1) {
padding-top: 0;
}
body .list-common01 li:last-of-type {
border-bottom: none;
padding-bottom: 0;
}
body .list-common02 {
display: flex;
justify-content: start;
gap: 1vw;
flex-wrap: wrap;
}
body .list-common02 li {
width: 32%;
border: 1px solid #aaa;
padding: 0.6vw 1.2vw;
box-sizing: border-box;
}
@media (max-width: 559px) {
body .list-common02 li {
width: 100%;
padding: 1.6vw 2.2vw 1.6vw 3vw;
border-left-width: 1vw;
}
}
body .list-common03 {
display: flex;
justify-content: start;
gap: 1%;
}
body .list-common03 li {
width: 33%;
}
@media (max-width: 559px) {
body .list-common03 {
flex-wrap: wrap;
}
body .list-common03 li {
width: 49.5%;
}
}
body .list-common04 li {
position: relative;
padding: 0 0 0 1.5vw;
}
body .list-common04 li:before {
background-color: #316bba;
font-size: 1vw;
width: 0.6vw;
height: 0.6vw;
border-radius: 50%;
position: absolute;
left: 0;
top: 0.8vw;
content: "";
}
@media (max-width: 559px) {
body .list-common04 li {
padding: 0 0 0 4.5vw;
}
body .list-common04 li:before {
width: 2vw;
height: 2vw;
top: 2.3vw;
}
}
body .title-common01 {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 2.3vw;
line-height: 1.6;
margin: 0 0 2vw;
}
body .title-common01 span {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 0.8vw;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 0.1vw;
margin: 0 0 1vw;
display: block;
}
@media (max-width: 959px) {
body .title-common01 {
font-size: 3.2vw;
}
body .title-common01 span {
font-size: 1.3vw;
}
}
@media (max-width: 559px) {
body .title-common01 {
font-size: 5vw;
}
body .title-common01 span {
font-size: 2vw;
margin: 0 0 3vw;
}
}
body .title-common02 {
text-align: center;
font-size: 2.6vw;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
display: flex;
flex-direction: column;
align-items: center;
gap: 1vw;
margin: 0 0 4vw;
}
body .title-common02 span {
font-size: 6vw;
color: #316bba;
}
@media (max-width: 559px) {
body .title-common02 {
font-size: 5vw;
margin: 0 0 8vw;
gap: 3vw;
}
body .title-common02 span {
font-size: 9vw;
}
}
body .title-common03 {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 2.8vw;
line-height: 1.6;
margin: 0 0 2.8vw;
font-weight: normal;
}
body .title-common03 span {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 1.4vw;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 0.1vw;
margin: 0 0 0.6vw;
display: block;
color: #316bba;
}
body .title-common03.white {
color: #fff;
}
body .title-common03.white span {
color: #fff;
}
body .title-common03 + h3 {
text-align: center;
border: 1px solid #333;
padding: 1vw;
margin: 0 0 3vw;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 1.6vw;
}
@media (max-width: 959px) {
body .title-common03 {
font-size: 3.5vw;
}
}
@media (max-width: 559px) {
body .title-common03 {
font-size: 5vw;
margin: 0 0 4.8vw;
}
body .title-common03 span {
font-size: 3vw;
margin: 0 0 1vw;
}
}
body .title-common04 {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 2vw;
margin: 0 0 2vw;
padding: 0.3vw 0 2vw;
font-weight: normal;
border-bottom: 1px solid #666;
line-height: 1.4;
}
body .title-common04.type02 {
margin: 0 0 3vw;
}
body .title-common04 + p {
margin: 0 0 1.4vw;
}
@media (max-width: 559px) {
body .title-common04 {
font-size: 5vw;
margin: 0 0 5vw;
padding: 0 0 4vw;
}
}
body .title-common05 {
position: relative;
margin: 0 0 3vw;
}
body .title-common05 strong {
z-index: 1;
display: inline-block;
background: #fff;
border: 1px solid #333;
padding: 1.3vw 2vw 1vw;
font-size: 1.6vw;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
position: relative;
}
body .title-common05:before {
position: absolute;
left: 0;
top: 2vw;
width: 100%;
height: 1px;
background-color: #333;
content: "";
z-index: 0;
}
@media (max-width: 559px) {
body .title-common05 strong {
font-size: 2.6vw;
}
}
body .box-common01 {
display: flex;
justify-content: flex-end;
position: relative;
margin: 0 0 4vw;
min-height: 32vw;
}
body .box-common01 .img {
background: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 2vw;
box-sizing: border-box;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 36vw;
}
body .box-common01 .text {
background: #316bba url("../img/bg03.webp") no-repeat right bottom;
width: 60vw;
position: relative;
top: 4vw;
color: #fff;
box-sizing: border-box;
padding: 5vw 5vw 5vw 11vw;
}
body .box-common01 .text h3 {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-weight: normal;
font-size: 2.2vw;
margin: 0 0 2vw;
}
body .box-common01 .text p {
margin: 0 0 1vw;
}
body .box-common01 .text p:last-of-type {
margin: 0;
}
body .box-common01 .text p.btn-common01 {
margin-top: 2.4vw;
}
body .box-common01 .text .title-area h3 {
margin: 0 0 1vw;
}
body .box-common01 .text .title-area h3 + p {
margin: 0 0 2vw;
}
body .box-common01:nth-of-type(2n) {
justify-content: flex-start;
}
body .box-common01:nth-of-type(2n) .img {
left: auto;
right: 0;
}
body .box-common01:nth-of-type(2n) .text {
padding: 5vw 11vw 5vw 5vw;
}
@media (max-width: 959px) {
body .box-common01 .text h3 {
font-size: 3vw;
}
}
@media (max-width: 559px) {
body .box-common01 {
flex-wrap: wrap;
margin: 0 0 14vw;
}
body .box-common01 .img {
position: static;
width: 100%;
padding: 8vw 2vw;
}
body .box-common01 .img img {
width: 70vw;
}
body .box-common01 .text {
width: 100%;
padding: 7vw 5vw;
}
body .box-common01 .text h3 {
font-size: 5vw;
}
body .box-common01:nth-of-type(2n) .text {
padding: 7vw 5vw;
}
}
body .box-common02 {
display: flex;
justify-content: space-between;
gap: 6vw;
}
body .box-common02 .text {
flex: 1;
width: 100%;
}
@media (max-width: 559px) {
body .box-common02 {
flex-wrap: wrap;
}
body .box-common02 .title {
width: 100%;
}
body .box-common02 .text {
width: 100%;
}
}
body .box-common03 {
padding: 0 10vw;
}
body .box-common03 p {
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-size: 1.6vw;
margin: 0 0 2vw;
}
body .box-common03 p.name {
text-align: right;
margin: 2vw 0 0;
}
body .box-common03 p.name span {
font-size: 2.4vw;
padding-left: 1vw;
display: block;
}
@media (max-width: 559px) {
body .box-common03 {
padding: 0;
}
body .box-common03 p {
font-size: 3vw;
margin: 0 0 3vw;
}
body .box-common03 p.name {
margin: 4vw 0 0;
}
body .box-common03 p.name span {
font-size: 4vw;
padding-left: 2vw;
}
}
body .box-common04 {
margin: 0 10vw;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-sizing: border-box;
padding: 4vw;
}
body .box-common04.wide {
margin: 0;
}
body .box-common04.type02 {
border: 0.5vw solid #f4f4f4;
box-shadow: none;
margin-bottom: 3vw;
}
body .box-common04.type02:last-of-type {
margin-bottom: 0;
}
@media (max-width: 959px) {
body .box-common04 {
margin: 0;
}
}
@media (max-width: 559px) {
body .box-common04 {
padding: 7vw 5vw;
}
}
body .box-common05 {
display: flex;
justify-content: space-between;
gap: 3vw;
margin: 0 0 2vw;
}
body .box-common05 .img {
width: 25vw;
}
body .box-common05 .text {
flex: 1;
width: 100%;
}
body .box-common05 .text address {
font-style: normal;
}
body .box-common05 .text dl {
display: flex;
justify-content: start;
gap: 2vw;
}
body .box-common05 .text iframe {
width: 100%;
height: 15vw;
margin: 2vw 0 0;
}
body .box-common05:last-of-type {
margin: 0;
}
@media (max-width: 959px) {
body .box-common05 .text iframe {
height: 30vw;
}
}
@media (max-width: 559px) {
body .box-common05 {
flex-wrap: wrap;
gap: 3vw;
margin: 0 0 8vw;
}
body .box-common05 .img {
width: 100%;
display: flex;
justify-content: center;
}
body .box-common05 .img img {
width: 48vw;
}
body .box-common05 .text address {
text-align: center;
}
body .box-common05 .text dl {
justify-content: center;
}
body .box-common05 .text iframe {
height: 42vw;
margin: 3vw 0 0;
}
}
body .box-common06 {
display: flex;
justify-content: space-between;
gap: 10vw;
align-items: center;
margin: 0 0 4vw;
}
body .box-common06 .img {
width: 40vw;
order: 2;
}
body .box-common06 .img img {
width: 100%;
}
body .box-common06 .text {
order: 1;
width: 100%;
flex: 1;
padding: 0 0 0 10vw;
}
body .box-common06 .text .title-common01 {
font-size: 2.1vw;
}
body .box-common06:nth-of-type(2n) .img {
order: 1;
}
body .box-common06:nth-of-type(2n) .text {
order: 2;
padding: 0 10vw 0 0;
}
body .box-common06:last-of-type {
margin-bottom: 0;
}
@media (max-width: 959px) {
body .box-common06 {
gap: 5vw;
}
body .box-common06 .text {
padding: 0 0 0 5vw;
}
body .box-common06 .text .title-common01 {
font-size: 2.1vw;
}
}
@media (max-width: 559px) {
body .box-common06 {
flex-wrap: wrap;
margin: 0 0 12vw;
}
body .box-common06 .img {
order: 1;
width: 100%;
text-align: center;
}
body .box-common06 .img img {
width: 60vw;
}
body .box-common06 .text {
margin: 0;
padding: 0 5vw;
}
body .box-common06 .text .title-common01 {
font-size: 5vw;
}
body .box-common06:nth-of-type(2n) .text {
padding: 0 5vw;
}
}
body .box-common07 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 2%;
row-gap: 2vw;
}
body .box-common07 ul li {
width: 32%;
position: relative;
}
body .box-common07 ul li a {
text-align: center;
display: block;
}
body .box-common07 ul li span {
display: block;
text-align: center;
}
body .box-common07 ul li .menu {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 100%;
background: #316bba;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
pointer-events: none;
transition: 0.18s ease;
padding: 1vw 2vw;
box-sizing: border-box;
}
body .box-common07 ul li .menu a {
display: block;
text-decoration: none;
color: #fff;
border-bottom: 1px solid #fff;
padding: 1vw 0;
}
body .box-common07 ul li .menu a:hover {
background-color: none;
}
body .box-common07 ul li .menu a:last-of-type {
border: none;
}
body .box-common07 ul li:hover .menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
body .box-common07 ul li:focus-within .menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
body .box-common07 ul li.soon {
pointer-events: none;
}
body .box-common07 ul li.soon:before {
width: 100%;
height: 100%;
content: "coming soon";
color: #fff;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.4);
position: absolute;
left: 0;
top: 0;
font-size: 1.6vw;
}
@media (max-width: 559px) {
body .box-common07 ul li {
margin: 0 0 5vw;
width: 100%;
}
}
body .box-common08 {
margin: 0 0 4vw;
}
body .box-common08 .series {
display: flex;
justify-content: start;
gap: 1vw;
}
body .box-common08 .series li {
width: 21vw;
background-color: #f4f4f4;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
border: 1px solid #333;
border-top: none;
}
body .box-common08 .series li span {
width: 100%;
box-sizing: border-box;
background-color: #316bba;
color: #fff;
text-align: center;
padding: 0.3vw 1vw 0.4vw;
}
body .box-common08 .series li p {
min-height: 21vw;
display: flex;
justify-content: center;
align-items: center;
}
body .box-common08 .series li p img {
max-width: -moz-fit-content;
max-width: fit-content;
}
@media (max-width: 959px) {
body .box-common08 .series li {
justify-content: start;
}
body .box-common08 .series li p {
height: 100%;
min-height: auto;
padding: 2vw 3vw;
}
body .box-common08 .series li p img {
max-width: none;
width: 16vw;
}
}
@media (max-width: 559px) {
body .box-common08 .series {
flex-wrap: wrap;
}
body .box-common08 .series li {
width: 28vw;
}
}
body .box-common09 ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 2%;
row-gap: 1.4vw;
}
body .box-common09 ul li {
width: 49%;
}
body .box-common09 ul li .title {
font-size: 1.8vw;
border: 1px solid #333;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
text-align: center;
font-weight: 500;
padding: 1.3vw 1vw 1vw;
margin: 0 0 2vw;
}
body .table-common01 {
margin: 0 0 10vw;
}
body .table-common01 dl {
display: flex;
justify-content: flex-start;
gap: 3vw;
padding: 0.6vw 0;
}
body .table-common01 dl dt, body .table-common01 dl dd {
padding-bottom: 0.2vw;
}
body .table-common01 dl dt {
width: 17vw;
border-bottom: 0.15vw solid #316bba;
}
body .table-common01 dl dd {
flex: 1;
width: 100%;
border-bottom: 0.15vw solid #f4f4f4;
}
body .table-common01.solo {
width: 70%;
margin: 0 auto 5vw;
}
body .table-common01.type02 dl {
gap: 2vw;
}
body .table-common01.type02 dl dt {
background: #316bba;
color: #fff;
display: flex;
justify-content: start;
align-items: center;
box-sizing: border-box;
padding: 0 1.6vw;
border: none;
}
body .table-common01.type02 dl dd {
border: none;
}
body .table-common01.type02 dl dd address {
font-style: normal;
}
@media (max-width: 959px) {
body .table-common01.solo {
width: 100%;
}
}
@media (max-width: 559px) {
body .table-common01 dl {
flex-wrap: wrap;
gap: 0;
border-bottom: 1px solid #316bba;
padding: 2vw 0;
}
body .table-common01 dl dt, body .table-common01 dl dd {
width: 100%;
border: none;
padding: 0;
}
body .table-common01 dl dt {
font-weight: 700;
}
body .table-common01.type02 dl {
border: none;
}
body .table-common01.type02 dl dt {
padding: 1vw 1.6vw 1.5vw 3vw;
}
}
body .table-common02 {
border-bottom: 1px solid #666;
border-right: 1px solid #666;
width: 100%;
}
body .table-common02 th, body .table-common02 td {
text-align: left;
}
body .table-common02 thead tr th {
background-color: #316bba;
color: #fff;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
padding: 0.6vw 1vw 0.4vw 1.4vw;
border-left: 1px solid #316bba;
border-right: 1px solid #316bba;
}
body .table-common02 tbody tr th, body .table-common02 tbody tr td {
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 0.6vw 1vw 0.4vw 1.4vw;
}
body .table-common02 tbody tr th {
background-color: #f4f4f4;
}
body .table-common02 tbody tr td {
background-color: #fff;
}
body .table-common02 tbody tr td input[type=text], body .table-common02 tbody tr td input[type=email], body .table-common02 tbody tr td input[type=tel],
body .table-common02 tbody tr td textarea {
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
min-height: 3vw;
border-radius: 5px;
padding-block: 0;
padding-inline: 0;
font-size: 1.2vw;
padding: 0.1vw 1vw 0.2vw;
}
body .table-common02.solo {
margin: 0 10vw;
width: auto;
min-width: 69vw;
}
body .table-common02.tform tbody tr th, body .table-common02.tform tbody tr td {
padding: 1vw;
}
body .table-common02.tform tbody tr th {
width: 18vw;
vertical-align: top;
}
@media (max-width: 959px) {
body .table-common02.solo {
margin: 0;
min-width: 100%;
}
body .table-common02.tform tbody tr th {
width: 24vw;
}
}
@media (max-width: 559px) {
body .table-common02 col {
width: 100%;
}
body .table-common02 th, body .table-common02 td {
display: block;
width: 100%;
box-sizing: border-box;
}
body .table-common02 tbody tr th, body .table-common02 tbody tr td {
width: 100%;
display: block;
}
body .table-common02 tbody tr th.td-w01, body .table-common02 tbody tr td.td-w01 {
display: inline-block;
width: 80%;
}
body .table-common02 tbody tr th.td-w02, body .table-common02 tbody tr td.td-w02 {
display: inline-block;
width: 20%;
text-align: center;
border-block-end-width: unset;
display: inline-flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
box-sizing: border-box;
padding: 1.3vw;
}
body .table-common02 tbody tr td input[type=text], body .table-common02 tbody tr td input[type=email], body .table-common02 tbody tr td input[type=tel],
body .table-common02 tbody tr td textarea {
min-height: 12vw;
font-size: 4vw;
padding: 0.8vw 3vw 1vw;
}
body .table-common02.tform tbody tr th, body .table-common02.tform tbody tr td {
padding: 3vw;
}
body .table-common02.tform tbody tr th {
width: 100%;
}
}
body .contentBox01 {
padding: 7vw 0;
}
body .contentBox01.gray {
background: #f9f9f9;
}
@media (max-width: 559px) {
body .contentBox01 {
padding: 12vw 0;
}
}
body .page-nav {
padding: 0 5vw;
}
body .page-nav ul {
display: flex;
justify-content: start;
gap: 2vw;
flex-wrap: wrap;
}
body .page-nav ul li a {
width: 13.5vw;
}
@media (max-width: 559px) {
body .page-nav {
padding: 0 3vw;
margin: 15vw 0 0;
}
body .page-nav ul {
gap: 2vw;
}
body .page-nav ul li {
width: 100%;
}
body .page-nav ul li a {
width: 100%;
}
}
body .privacy-box {
background: #fff;
box-sizing: border-box;
margin: 4vw 10vw;
padding: 3vw 3vw 2.4vw;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
body .privacy-box h3 {
margin: 0 0 2vw;
}
body .privacy-box + .check {
margin: 0 10vw 3vw;
}
@media (max-width: 959px) {
body .privacy-box {
margin: 5vw 0;
}
body .privacy-box + .check {
margin: 0 0 3vw;
}
}
@media (max-width: 559px) {
body .privacy-box {
padding: 6vw 6vw 4.4vw;
}
}
body .anchor {
border: 5px solid #f4f4f4;
margin: 0 5vw;
box-sizing: border-box;
padding: 3vw;
text-align: center;
}
body .anchor h2 {
margin: 0 0 2vw;
}
body .anchor ul {
display: flex;
justify-content: center;
gap: 1.5vw;
}
body .anchor ul li a {
background-color: #316bba;
color: #fff;
text-align: center;
display: inline-block;
padding: 1vw 2vw;
box-sizing: border-box;
position: relative;
}
body .anchor ul li a:after {
width: 100%;
height: 1vw;
background-color: #0c3a79;
bottom: -0.4vw;
left: 0;
height: 0.4vw;
content: "";
position: absolute;
}
@media (max-width: 559px) {
body .anchor {
padding: 5vw;
}
body .anchor h2 {
margin: 0 0 4vw;
font-size: 4vw;
}
body .anchor ul {
flex-wrap: wrap;
}
body .anchor ul li {
width: 100%;
}
body .anchor ul li a {
width: 100%;
padding: 2vw;
}
}
body .table-scroll-hint {
position: absolute;
left: 5vw;
top: 5vw;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 3vw;
padding: 1vw 2vw;
border-radius: 20px;
pointer-events: none;
animation: scrollHint 1.2s infinite;
}
@keyframes scrollHint {
0% {
transform: translateX(0);
opacity: 1;
}
50% {
transform: translateX(-8px);
opacity: 0.6;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
body.recruit #key .wrap, body.company #key .wrap {
background-image: url("../img/key-bg_company.webp");
}
body.faq #key .wrap {
background-image: url("../img/key-bg_faq.webp");
}
body.sitemap #key .wrap {
background-image: url("../img/key-bg_sitemap.webp");
}
body.privacy #key .wrap {
background-image: url("../img/key-bg_privacy.webp");
}
body.product #key .wrap {
background-image: url("../img/key-bg_product.webp");
}
body.feature #key .wrap {
background-image: url("../img/key-bg_feature.webp");
}
body.inquiry #key .wrap {
background-image: url("../img/key-bg_inquiry.webp");
}
body.news #key .wrap, body.single-news_post #key .wrap {
background-image: url("../img/key-bg_news.webp");
}
body.download #key .wrap, body.catalog #key .wrap {
background-image: url("../img/key-bg_download.webp");
}
body.product.mixing #key .wrap {
background-image: url("../img/key-bg_product_mixing.webp");
}
body.product.mixing_incar #key .wrap {
background-image: url("../img/key-bg_product_mixing_incar.webp");
}
body.product.flexible_container #key .wrap {
background-image: url("../img/key-bg_product_flexible_container.webp");
}
body.product.silo #key .wrap {
background-image: url("../img/key-bg_product_silo.webp");
}
body.product.shield #key .wrap {
background-image: url("../img/key-bg_product_shield.webp");
}
body.product.pneumatic_conveyance #key .wrap {
background-image: url("../img/key-bg_product_pneumatic_conveyance.webp");
}
body.product.place #key .wrap {
background-image: url("../img/key-bg_product_place.webp");
}
body.product.dosing_equipment #key .wrap {
background-image: url("../img/key-bg_product_dosing_equipment.webp");
}
body.product.product_other #key .wrap {
background-image: url("../img/key-bg_product_product_other.webp");
}
body .wpcf7-checkbox {
display: flex;
justify-content: start;
flex-wrap: wrap;
gap: 1vw;
row-gap: 0.4vw;
}
body .wpcf7-checkbox .wpcf7-list-item {
margin: 0;
width: 14vw;
box-sizing: border-box;
}
@media (max-width: 959px) {
body .wpcf7-checkbox .wpcf7-list-item {
width: 27vw;
}
}
@media (max-width: 559px) {
body .wpcf7-checkbox .wpcf7-list-item {
width: 39vw;
}
}
body .wpcf7-radio .wpcf7-list-item {
margin: 0 2vw 0 0;
}
body .wpcf7-radio .wpcf7-list-item label input {
margin: 0;
position: relative;
top: -0.1vw;
}
body .wp-pagenavi {
text-align: center;
margin: 4vw 0 0;
}
body .wp-pagenavi span, body .wp-pagenavi a {
width: 2.4vw;
height: 2.4vw;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 1vw;
background: #f4f4f4;
border: none;
padding: 0;
margin: 0 0.3vw;
}
body .wp-pagenavi span.current, body .wp-pagenavi a.current {
background: #316bba;
color: #fff;
}
body .wp-pagenavi span.pages, body .wp-pagenavi a.pages {
width: 5vw;
background: #fff;
border: 1px solid #000;
display: none;
}
@media (max-width: 559px) {
body .wp-pagenavi {
margin: 4vw 0 10vw;
}
body .wp-pagenavi span, body .wp-pagenavi a {
font-size: 2vw;
}
}
/* -----------------------------------------
common
----------------------------------------- */
.dPc {
display: block;
}
.dSp {
display: none;
}
.dPcinline {
display: inline-block;
}
.dSpinline {
display: none;
}
@media (max-width: 559px) {
.dPc {
display: none;
}
.dSp {
display: block;
}
.dPcinline {
display: none;
}
.dSpinline {
display: inline-block;
}
}
.container {
max-width: 100%;
margin: 0 auto;
padding: 0 5vw;
}
@media (max-width: 959px) {
.container {
width: auto;
}
}
@media (max-width: 559px) {
.container {
padding: 0 3vw;
}
}
.breadcrumbs {
border-bottom: 1px solid #e8e8e8;
}
.breadcrumbs .container {
padding-top: 2rem;
padding-bottom: 2rem;
}
/* -----------------------------------------
haeder footer
----------------------------------------- */
header {
position: fixed;
width: 100%;
background: #fff;
z-index: 100;
top: 0;
display: flex;
justify-content: space-between;
height: 8vw;
padding: 0 0 0 4vw;
box-sizing: border-box;
align-items: center;
transition: 0.2s;
}
header .logo {
line-height: 0;
width: 18vw;
}
header nav {
display: flex;
justify-content: flex-end;
flex: 1;
width: 100%;
gap: 3vw;
height: 100%;
align-items: center;
}
header nav ul.gnavi {
display: flex;
justify-content: flex-end;
gap: 2vw;
}
header nav ul.gnavi2 {
height: 100%;
}
header nav ul.gnavi2 li {
height: 100%;
}
header nav ul.gnavi2 li a {
height: 100%;
background: #316bba;
color: #fff;
width: 15vw;
text-align: center;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 2.2vw 0 0;
}
header nav ul.gnavi2 li a:before {
content: "email";
color: #fff;
font-size: 2vw;
position: absolute;
left: 6.4vw;
top: 1.2vw;
font-family: "Material Icons";
transition: 0.3s;
}
header.scroll {
height: 5vw;
background: rgba(255, 255, 255, 0.9);
}
header.scroll nav ul.gnavi2 li a {
padding: 0 0 0 3vw;
}
header.scroll nav ul.gnavi2 li a:before {
font-size: 1.5vw;
left: 3.2vw;
top: 1.2vw;
}
@media (max-width: 959px) {
header .logo {
width: 26vw;
}
header nav {
display: none;
}
header.scroll {
height: 8vw;
}
}
@media (max-width: 559px) {
header {
height: 11vw;
}
header .logo {
width: 39vw;
}
header.scroll {
height: 11vw;
}
}
.outer-menu {
display: none;
}
@media (max-width: 959px) {
.outer-menu {
display: block;
position: fixed;
top: 10vh;
left: 0;
z-index: 1500;
}
.outer-menu .checkbox-toggle {
position: fixed;
top: 0.2vw;
right: 2vw;
z-index: 2;
cursor: pointer;
width: 8vw;
height: 7.5vw;
opacity: 0;
margin: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
pointer-events: auto;
visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.outer-menu .hamburger {
position: fixed;
top: 0.2vw;
right: 2vw;
z-index: 1;
width: 4vw;
height: 3.5vw;
padding: 2vw;
background: none;
cursor: pointer;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #333;
transition: all 0.4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
transition: all 0.4s ease;
}
.outer-menu .hamburger > div:after {
top: 10px;
}
.outer-menu .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div {
width: 200vw;
height: 200vw;
color: #FEFEFE;
background: #316bba;
border-radius: 50%;
transition: all 0.4s ease;
flex: none;
transform: scale(0);
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div > ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
padding: 0;
margin: 1em;
font-size: 24px;
display: block;
}
.outer-menu .menu > div > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color 0.4s ease;
font-family: "futura-pt", sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 2rem;
color: #fff;
}
.outer-menu .menu > div > div > ul > li > a:hover {
text-decoration: none;
color: #333;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
content: "";
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
background: none;
transition: width 0.4s ease;
}
}
@media (max-width: 559px) {
.outer-menu .checkbox-toggle {
width: 11vw;
height: 10vw;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
transition-duration: 0.3s;
}
.outer-menu .hamburger {
width: 7vw;
top: 1.5vw;
}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
top: -2vw;
}
.outer-menu .hamburger > div:after {
top: 2vw;
}
.outer-menu .menu > div {
height: 117vh;
width: 117vh;
transition: all 0.3s ease;
}
}
#mv {
background: url("../img/bg01@2x.webp") no-repeat center bottom/100% auto;
padding: 0 0 5vw;
}
#mv li img {
width: 100%;
height: auto;
}
@media (max-width: 559px) {
#mv {
background: url(../img/bg01@3x.webp) no-repeat left bottom/198vw auto;
padding: 0 0 12vw;
}
}
#key {
background: url("../img/key-bg.webp") no-repeat left top -11vw/42vw auto;
margin: 0 0 6vw;
}
#key .wrap {
background-repeat: no-repeat;
background-position: right top;
background-size: 56vw auto;
}
#key .wrap h1 {
height: 20vw;
display: flex;
align-items: center;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
font-weight: normal;
font-size: 2.8vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0 5vw;
box-sizing: border-box;
}
#key .wrap h1 span {
text-transform: uppercase;
font-size: 1.4vw;
letter-spacing: 0.1vw;
margin: 0 0 1.6vw;
display: block;
color: #316bba;
}
#key + #content .contentBox01.gray {
margin-top: -6vw;
}
@media (max-width: 559px) {
#key {
margin: 0 0 12vw;
}
#key .wrap {
background-size: 135vw auto;
position: relative;
z-index: 0;
}
#key .wrap h1 {
height: 49vw;
position: relative;
z-index: 1;
color: #fff;
text-align: center;
font-size: 5vw;
align-items: center;
}
#key .wrap h1 span {
color: #fff;
font-size: 3vw;
margin: 0 0 4vw;
}
#key .wrap:before {
position: absolute;
left: 0;
top: 0;
content: "";
background: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
}
#content {
padding: 0 0 8vw;
}
#content p a {
color: #316bba;
}
#pagetop {
position: fixed;
right: 3vw;
bottom: 3vw;
font-family: "Material Icons";
}
footer {
display: flex;
justify-content: space-between;
padding: 7vw 5vw;
gap: 5vw;
}
footer .info address {
font-style: normal;
font-weight: 500;
display: block;
margin: 1vw 0;
}
footer .info small {
font-size: 0.9vw;
}
footer .link {
flex: 1;
width: 100%;
}
footer .link ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
row-gap: 1vw;
}
footer .link ul li {
width: 33%;
position: relative;
padding: 0 0 0 2vw;
box-sizing: border-box;
}
footer .link ul li:before {
position: absolute;
font-family: "Material Icons";
content: "chevron_right";
font-size: 1.6vw;
color: #316bba;
left: 0;
top: -0.4vw;
}
@media (max-width: 959px) {
footer {
flex-wrap: wrap;
}
footer .info {
text-align: center;
width: 100%;
}
}
@media (max-width: 559px) {
footer {
padding: 18vw 5vw;
}
footer .info {
margin: 0 0 8vw;
}
footer .info address {
margin: 4vw 0;
}
footer .info small {
font-size: 2vw;
}
footer .link ul li {
padding: 0 0 0 6vw;
border-bottom: 1px solid #f4f4f4;
width: 100%;
}
footer .link ul li a {
display: block;
padding: 2vw 0 3.2vw 0;
}
footer .link ul li:before {
font-size: 4.6vw;
top: 1.2vw;
}
}
/* -----------------------------------------
content
----------------------------------------- */
#cta {
background: url("../img/bg04@3x.webp") no-repeat center top/cover;
position: relative;
padding: 6vw 0;
margin: 10vw 0 0;
}
#cta .container ul {
display: flex;
justify-content: center;
gap: 1vw;
margin: 0 0 3vw;
}
#cta .container ul li a {
border: 1px solid #fff;
display: flex;
flex-direction: column;
color: #fff;
line-height: 1.2;
font-size: 1.4vw;
font-weight: 700;
padding: 0.7vw 2vw 0.6vw 4vw;
min-width: 13vw;
position: relative;
box-sizing: border-box;
transition: 0.2s;
}
#cta .container ul li a span {
font-weight: 400;
font-size: 1vw;
}
#cta .container ul li a:hover {
background: #fff;
color: #316bba;
}
#cta .container ul li a:hover:before {
color: #316bba;
}
#cta .container ul li a:before {
content: "phone";
font-family: "Material Icons";
color: #fff;
position: absolute;
left: 1vw;
top: 1vw;
font-size: 2vw;
font-weight: normal;
}
#cta:before, #cta:after {
position: absolute;
content: "";
width: 24vw;
height: 24vw;
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
}
#cta:before {
background-image: url("../img/contact-img01@3x.webp");
top: -3vw;
left: 0;
}
#cta:after {
background-image: url("../img/contact-img02@3x.webp");
bottom: -3vw;
right: 0;
}
@media (max-width: 559px) {
#cta {
padding: 12vw 0 30vw;
}
#cta .container .title-common03 {
margin: 0 0 6.8vw;
}
#cta .container ul {
flex-wrap: wrap;
gap: 3vw;
margin: 0 0 7vw;
}
#cta .container ul li {
width: 65%;
}
#cta .container ul li a {
font-size: 4vw;
padding: 3vw 2vw 3vw 14vw;
}
#cta .container ul li a span {
font-size: 3vw;
margin: 0 0 1vw;
}
#cta .container ul li a:before {
font-size: 7vw;
top: 3.5vw;
left: 4vw;
}
#cta:before, #cta:after {
width: 30vw;
height: 30vw;
}
}
#intro {
background: url("../img/bg02@2x.webp") no-repeat right top/60vw auto;
padding: 7vw 0 5vw;
}
#intro .container {
display: flex;
justify-content: space-between;
gap: 4vw;
align-items: center;
}
#intro .container .img {
width: 32vw;
}
#intro .container .text {
flex: 1;
width: 100%;
}
#intro .container .text p {
margin: 0 0 2vw;
}
@media (max-width: 559px) {
#intro {
padding: 2vw 0 5vw;
background-size: 143vw auto;
}
#intro .container {
flex-wrap: wrap;
}
#intro .container .img {
width: 100%;
display: flex;
justify-content: center;
}
#intro .container .img img {
width: 70vw;
margin: 0 0 0 3vw;
}
#intro .container .text {
width: 100%;
}
#intro .container .text .title-common01 {
text-align: center;
}
}
#product {
background: url("../img/bg05@2x.webp") no-repeat center top/100% auto;
padding: 17vw 0 0;
position: relative;
top: -7vw;
}
#product .btn-common01.center {
margin-top: 10vw;
}
@media (max-width: 959px) {
#product .btn-common01.center {
margin-top: 20vw;
}
}
@media (max-width: 559px) {
#product {
top: 2vw;
padding: 22vw 0;
}
}
.inquiry-telbox {
margin: 0 0 6vw;
text-align: center;
}
.inquiry-telbox h2 {
margin: 0 0 2vw;
}
.inquiry-telbox ul {
display: flex;
justify-content: center;
gap: 1vw;
margin: 0 0 3vw;
}
.inquiry-telbox ul li a {
border: 1px solid #fff;
display: flex;
flex-direction: column;
background: #fff;
color: #316bba;
line-height: 1.2;
font-size: 1.4vw;
font-weight: 700;
padding: 0.7vw 2vw 0.6vw 4vw;
min-width: 13vw;
position: relative;
box-sizing: border-box;
transition: 0.2s;
border: 1px solid #316bba;
text-align: left;
}
.inquiry-telbox ul li a span {
font-weight: 400;
font-size: 1vw;
color: #333;
}
.inquiry-telbox ul li a:hover {
background: #316bba;
color: #fff;
}
.inquiry-telbox ul li a:hover span {
color: #fff;
}
.inquiry-telbox ul li a:hover:before {
color: #fff;
}
.inquiry-telbox ul li a:before {
content: "phone";
font-family: "Material Icons";
color: #316bba;
position: absolute;
left: 1vw;
top: 1vw;
font-size: 2vw;
font-weight: normal;
}
@media (max-width: 559px) {
.inquiry-telbox h2 {
margin: 0 0 6vw;
}
.inquiry-telbox ul {
flex-wrap: wrap;
gap: 2vw;
}
.inquiry-telbox ul li {
width: 100%;
}
.inquiry-telbox ul li a {
font-size: 5vw;
padding: 3.7vw 3vw 3.6vw 16vw;
border-radius: 14vw;
}
.inquiry-telbox ul li a span {
font-size: 3.4vw;
}
.inquiry-telbox ul li a:before {
font-size: 8vw;
left: 4.8vw;
top: 4.2vw;
}
}
#product-detail .box-common01 {
margin: 0 0 8vw;
}
#product-detail .box-common01 .img {
order: 1 !important;
}
#product-detail .box-common01 .text {
order: 2 !important;
}
#product-detail .box-common01 .text ul li:before {
background-color: #fff;
}
#product-detail .series-box-big {
margin: 0 0 8vw;
}
@media (max-width: 559px) {
#product-detail .table-common02 {
width: 100%;
}
#product-detail .table-common02 thead th, #product-detail .table-common02 thead td, #product-detail .table-common02 tbody th, #product-detail .table-common02 tbody td {
display: table-cell;
width: auto !important;
font-size: 2vw;
}
}
.product-feature {
display: flex;
justify-content: space-between;
margin: 0 0 3vw;
}
.product-feature .title {
width: 26vw;
background: #316bba;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 2vw;
font-weight: 700;
letter-spacing: 0.4vw;
}
.product-feature .text {
flex: 1;
width: 100%;
background-color: #f4f4f4;
box-sizing: border-box;
padding: 2vw 3vw;
}
@media (max-width: 559px) {
.product-feature {
flex-wrap: wrap;
}
.product-feature .title {
width: 100%;
font-size: 3vw;
padding: 1vw 2vw;
}
.product-feature .text {
padding: 3vw 4vw 5vw;
}
}
#faq .faq-group {
margin: 0 0 5vw;
}
#faq .faq-group .faq-group__title {
background: #316bba;
color: #fff;
font-size: 1.8vw;
padding: 1.5vw 2vw 1.4vw;
margin: 0 0 2vw;
}
#faq .faq-group .faq-item__movie {
margin-top: 2vw;
}
#faq .faq-group dl {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
border-radius: 0.5rem;
box-sizing: border-box;
padding: 2vw;
margin: 0 0 2vw;
}
#faq .faq-group dl dt, #faq .faq-group dl dd {
position: relative;
}
#faq .faq-group dl dt:before, #faq .faq-group dl dd:before {
content: "";
position: absolute;
left: 0;
top: 0;
}
#faq .faq-group dl dt {
background: #f4f4f4;
font-size: 1.4vw;
padding: 0.6vw 0 0.6vw 4vw;
font-weight: 700;
margin: 0 0 1vw;
}
#faq .faq-group dl dt:before {
width: 3vw;
height: 100%;
box-sizing: border-box;
content: "Q";
font-weight: 900;
background-color: #316bba;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
}
#faq .faq-group dl .faq-item__a p {
margin: 0 0 1.4vw;
}
#faq .faq-group dl .faq-item__a p mark {
font-style: normal;
}
@media (max-width: 559px) {
#faq .faq-group .faq-group__title {
font-size: 4vw;
text-align: center;
padding: 3vw 3vw 3.2vw;
margin: 0 0 6vw;
}
#faq .faq-group dl {
margin: 0 0 4vw;
padding: 4vw;
}
#faq .faq-group dl dt {
margin: 0 0 2vw;
font-size: 3.4vw;
padding: 1vw 2vw 1vw 8vw;
}
#faq .faq-group dl dt:before {
font-size: 3vw;
width: 6vw;
}
#faq .faq-group dl .faq-item__a {
font-size: 3vw;
}
}
#privacy .container section {
margin: 0 0 5vw;
}
#sitemap .container .wrap {
padding: 0 10vw;
display: flex;
justify-content: space-between;
gap: 4%;
}
#sitemap .container .wrap ul {
width: 48%;
}
#sitemap .container .wrap ul li {
border-bottom: 1px solid #333;
}
#sitemap .container .wrap ul li a {
padding: 1vw 0 1vw 1.8vw;
position: relative;
}
#sitemap .container .wrap ul li a:before {
content: "keyboard_arrow_right";
font-family: "Material Icons";
font-size: 1.5vw;
color: #316bba;
position: absolute;
left: 0;
top: 0.7vw;
}
#sitemap .container .wrap ul li ul {
width: 100%;
}
#sitemap .container .wrap ul li ul li {
border: none;
padding: 0 0 0 1.2vw;
}
#sitemap .container .wrap ul li ul li a {
padding: 0 0 0 2vw;
}
#sitemap .container .wrap ul li ul li a:before {
content: "└";
font-size: 1.2vw;
color: #333;
top: 0;
}
#sitemap .container .wrap ul li:last-of-type {
border: none;
}
@media (max-width: 959px) {
#sitemap .container .wrap {
padding: 0;
}
#sitemap .container .wrap ul {
width: 100%;
}
#sitemap .container .wrap ul li a:before {
top: 1vw;
}
}
@media (max-width: 559px) {
#sitemap .container .wrap {
padding: 0;
flex-wrap: wrap;
}
#sitemap .container .wrap .mb2 {
margin-bottom: 4vw !important;
}
#sitemap .container .wrap ul {
width: 100%;
}
#sitemap .container .wrap ul li a {
padding: 3vw 0 3vw 4vw;
}
#sitemap .container .wrap ul li a:before {
top: 2.6vw;
font-size: 4vw;
}
#sitemap .container .wrap ul li ul li a {
padding: 0 0 0 6vw;
}
#sitemap .container .wrap ul li ul li a:before {
font-size: 4vw;
}
}
#news-single .container article {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 0 0 7rem;
padding: 5rem;
}
#news-single .container article h1 {
margin: 0 0 1.4vw;
}
#news-single .container article .data {
margin: 0 0 2vw;
}
#news-single .container article h2 {
background: #316bba;
color: #fff;
text-align: center;
font-weight: normal;
font-size: 3rem;
font-family: "Yu Mincho", "游明朝", "Yu Mincho Light", "游明朝 Light", serif;
padding: 1.4rem 2rem 1.6rem;
margin: 0 0 3rem;
}
#news-single .container article h3 {
font-size: 2rem;
color: #316bba;
margin: 0 0 1rem;
line-height: 1.6;
}
#news-single .container article h3 + p {
margin: 0 0 2rem;
}
#news-single .container article ul.img {
display: flex;
justify-content: center;
gap: 2rem;
}
#news-single .container article ul.img a {
transition: 0.3s;
}
#news-single .container article ul.img a:hover {
filter: brightness(1.2);
}
@media (max-width: 559px) {
#news-single .container article {
padding: 2rem;
}
#news-single .container article h1 {
font-size: 4vw;
text-align: center;
margin: 0 0 2vw;
}
#news-single .container article .data {
margin: 0 0 4vw;
}
#news-single .container article .data p {
text-align: center;
font-size: 3vw;
}
#news-single .container article h2 {
font-size: 2rem;
margin: 0 0 2rem;
line-height: 1.4;
}
#news-single .container article h3 {
font-size: 1.8rem;
line-height: 1.6;
}
#news-single .container article ul.img {
width: 100%;
flex-direction: column;
align-items: center;
}
#news-single .container article ul.img img {
width: 50vw;
}
}/*# sourceMappingURL=style.css.map */