html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-style: normal;
font-weight: bold;
font-size: 100%;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
html {
overflow-y: scroll
}
.sp {
display: none;
}
@media screen and (max-width:768px) {
.sp {
display: inline;
}
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: "";
content: none
}
ol,
ul {
list-style: none
}
input,
textarea {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0
}
caption,
th {
text-align: left
}
a:focus {
outline: none
}
.clearfix::after {
content: "";
display: block;
clear: both
}
.both {
clear: both
}
.inline_block {
display: inline-block;
zoom: 1
}
button:focus,
select:focus {
outline: 0
}
:focus {
outline: -webkit-focus-ring-color none
}
.lh25 {
line-height: 1.9;
}
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important
}
a,
a:visited {
text-decoration: underline
}
a[href]:after {
content: " ("attr(href) ")"
}
abbr[title]:after {
content: " ("attr(title) ")"
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: ""
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid
}
thead {
display: table-header-group
}
tr,
img {
page-break-inside: avoid
}
img {
max-width: 100% !important
}
p,
h2,
h3 {
orphans: 3;
widows: 3
}
h2,
h3 {
page-break-after: avoid
}
}
* {
letter-spacing: .1em;
line-height: 1.6;
box-sizing: border-box;
color: #363636;
-webkit-appearance: none
}
@media screen and (max-width: 768px) {
* {
line-height: 1.65
}
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important
}
html {
width: 100%;
font-size: 62.5%
}
@media screen and (max-width: 1024px) {
html {
font-size: 61.5%
}
}
@media screen and (max-width: 768px) {
html {
font-size: 54.6%
}
}
body {
margin: 0px;
overflow: hidden;
font-size: 1.6em;
font-family: メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 游ゴシック, "Yu Gothic", sans-serif;
}
select,
option,
span {
font-family: メイリオ, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 游ゴシック, "Yu Gothic", sans-serif
}
a {
text-decoration: none;
transition: .4s
}
p {
line-height: 1.9;
font-weight: bold;
letter-spacing: 0.05em;
}
@media screen and (max-width: 400px) {
p {
line-height: 1.9;
font-weight: bold;
font-size: 3.8vw;
}
}
section {
position: relative
}
b {
font-weight: bold
}
i {
font-style: italic
}
select::-ms-expand {
display: none
}
img {
display: block
}
.c-sp-only {
display: none
}
@media screen and (max-width: 500px) {
.c-sp-only {
display: block
}
}
.c-sp-no {
display: block
}
@media screen and (max-width: 500px) {
.c-sp-no {
display: none
}
}
.d-f {
display: flex
}
.d-f-spnone {
display: flex
}
.jsb {
justify-content: space-between
}
.jcc {}
@media screen and (max-width: 768px) {
.jcc {
justify-content: center;
}
.d-f-spnone {
display: inline;
}
}
.aic {
align-items: center;
background: #fff;
}
.aic2 {
align-items: center;
}
.aifs {
align-items: flex-start;
}
.tac {
text-align: center
}
.pc-none {
display: none;
}
.sp-none {
display: block;
}
@media screen and (max-width: 768px) {
.sp-none {
display: none !important;
}
.pc-none {
display: block !important;
}
}
.sp-block {
display: none
}
@media screen and (max-width: 500px) {
.sp-block {
display: block
}
}
.mb100 {
margin-bottom: 100px !important;
}
.mt50 {
margin-top: 50px !important;
}
.mt60 {
margin-top: 60px !important;
}
.mt100 {
margin-top: 100px !important;
}
.mtb10 {
margin-top: 10px;
margin-bottom: 10px;
}
.text-blue {
color: #2487ef;
}
.l-header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background-color: #fff;
transition: background-color .2s
}
.l-header.is-transparent {
background-color: transparent
}
.l-header-accordionMenu {
list-style: none;
margin: 0;
padding: 0;
opacity: 0;
max-height: 0;
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 100;
background-color: #fff;
border: 1px solid #eee;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
min-width: 180px;
transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
pointer-events: none;
text-align: left;
}
.l-header-accordionMenu li a {
display: block;
padding: 10px 15px;
color: #333;
text-decoration: none;
white-space: nowrap;
}
.l-header-accordionMenu li a:hover {
background-color: #f5f5f5;
color: #00b2d8;
text-decoration: underline;
text-underline-offset: 5px;
}
.l-header-globalNav-item--has-accordion {
position: relative;
}
.l-header-globalNav-item--has-accordion:hover .l-header-accordionMenu {
opacity: 1;
max-height: 300px;
pointer-events: auto;
}
@media screen and (max-width: 1024px) {
.l-header.is-transparent.js-open {
background-color: #fff
}
}
@media screen and (max-width: 1024px) {
.l-header-wrap {
padding-right: 10px
}
.l-header-item {
white-space: nowrap;
}
.l-header-link {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}
.l-header-link-lang {
margin-top: 20px;
display: block;
padding: 10px 0 0 6px;
text-decoration: none;
color: #fff;
font-size: 1em;
}
.l-header-subMenu {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
}
.l-header-subMenu li a {
padding: 8px 30px;
color: #fff;
text-decoration: none;
}
.l-header-item.is-open .l-header-subMenu {
max-height: 250px;
opacity: 1;
}
}
@media screen and (max-width: 500px) {
.l-header-wrap {
padding-right: 8px
}
}
.l-header-logo {
width: 700px;
padding: 20px 20px;
background-color: #fff;
transform: translate3d(0, 0, 0);
transition: transform .3s
}
@media screen and (max-width: 1340px) {
.l-header-logo img {
width: 100%;
max-width: 360px;
}
.l-header-contents {
padding-right: 0% !important;
}
}
@media screen and (max-width: 1041px) {
.l-header-logo {
width: 280px;
height: 106px;
padding: 28px 10px
}
}
@media screen and (max-width: 768px) {
.l-header-logo {
height: 65px;
padding: 16px 30px
}
}
@media screen and (max-width: 500px) {
.l-header-logo {
width: 100%;
max-width: 250px;
height: 60px;
padding: 10px 10px 0;
margin-top: 5px;
}
}
@media screen and (max-width: 350px) {
.l-header-logo {
width: 100%;
max-width: 180px;
height: 60px;
padding: 20px 10px 0;
margin-top: 5px;
}
}
.lang-switch {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 15px;
font-family: sans-serif;
font-weight: bold;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
.lang-switch .en {
font-size: 16px;
color: #333;
}
.lang-switch .separator {
color: #333;
font-size: 16px;
}
.lang-switch .jp {
font-size: 16px;
color: #333;
}
/* スマホでも絶対に横並びを死守する場合 */
@media screen and (max-width: 768px) {
.lang-switch {
white-space: nowrap;
/* 改行を禁止 */
}
}
.is-transparent .l-header-logo {}
.is-transparent.js-open .l-header-logo {
transform: translate3d(0, 0, 0)
}
.l-header-logo img {
width: 100%
}
.l-header-contents {
width: 100%;
padding-right: 2%;
color: #000;
}
@media screen and (max-width: 1024px) {
.l-header-contents {
display: none
}
}
.l-header-contents-link {
display: table;
margin-left: auto;
margin-right: 10px;
margin-bottom: 8px;
color: #363636;
border-bottom: 1px solid transparent;
transition: color .3s, border-color .3s
}
.l-header-contents-navi {
display: flex;
justify-content: center;
}
.is-transparent .l-header-contents-link {
color: #fff
}
.l-header-contents-link:hover {
color: #00b2d8;
border-color: #00b2d8
}
.l-header-globalNav {
display: flex
}
.l-header-globalNav-item {
position: relative;
padding: 0 30px
}
.l-header-globalNav-item:nth-child(n+2) {
border-left: 1px solid #363636
}
.is-transparent .l-header-globalNav-item:nth-child(n+2) {
border-color: #000
}
.l-header-globalNav-item:nth-child(2) .l-header-childNav {
width: 330px
}
.l-header-globalNav-link {
position: relative;
display: block;
font-size: 18px;
color: #363636;
border-bottom: 1px solid transparent;
transition: color .3s, border-color .3s;
}
@media screen and (max-width: 1420px) {
.l-header-globalNav-link {
font-size: 15px;
}
}
@media screen and (max-width: 1140px) {
.l-header-globalNav-link {
font-size: 13px;
}
.l-header-globalNav-item {
padding: 0 7px;
}
}
.l-header-globalNav-link:hover:not(.is-disabled) {
color: #00b2d8;
border-color: #00b2d8
}
.l-header-childNav {
display: flex;
flex-wrap: wrap;
position: absolute;
top: 100%;
left: 0;
width: 300px;
padding-top: 26px;
opacity: 0;
pointer-events: none;
transition: opacity .3s
}
.l-header-globalNav-item:hover .l-header-childNav {
opacity: 1;
pointer-events: all
}
.l-header-childNav-link {
flex: 0 0 50%;
padding: 20px;
font-size: 1.6rem;
color: #363636;
background-color: #fff;
line-height: 1;
white-space: nowrap;
transition: color .3s
}
.l-header-childNav-link:hover {
color: #00b2d8
}
.l-header-buttons {
margin-left: 10px;
text-align: left;
}
@media screen and (max-width: 1024px) {
.l-header-buttons {
margin-left: auto
}
}
@media screen and (max-width: 768px) {
.l-header-buttons {
display: flex
}
}
.l-header-tel {
position: relative;
width: 230px;
height: 50px;
padding-left: 1vw;
background-color: #2387ef;
margin-left: auto;
transition: .3s
}
@media screen and (max-width: 768px) {
.l-header-tel {
width: 60px;
height: 60px
}
}
@media screen and (max-width: 500px) {
.l-header-tel {
width: 48px;
height: 48px
}
}
@media screen and (max-width: 350px) {
.l-header-tel {
width: 42px;
height: 42px
}
}
.l-header-tel:hover {
opacity: .8
}
.l-header-tel-inner {
position: relative;
padding-left: 36px
}
.l-header-tel-icon {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background-image: url("../en-img/tell.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #2387ef;
}
.l-header-tel-icon2 {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 50%;
background-image: url("../en-img/mail.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: #004a8f;
}
@media screen and (max-width: 768px) {
.l-header-tel-icon {
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.l-header-tel-icon2 {
top: 50%;
left: 47%;
transform: translate(-50%, -50%)
}
}
.l-header-tel-icon img {
width: 20px
}
.l-header-tel-icon2 img {
width: 20px
}
.l-header-tel-number {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
line-height: 1;
letter-spacing: .04em
}
@media screen and (max-width: 768px) {
.l-header-tel-number {
display: none
}
}
.l-header-tel-text {
display: block;
font-size: 1.4rem;
color: #fff;
line-height: 1
}
@media screen and (max-width: 768px) {
.l-header-tel-text {
display: none
}
}
.l-header-contact {
position: relative;
display: flex;
height: 120px;
width: 230px;
background-color: #004a8f;
transition: .3s;
justify-content: center;
}
@media screen and (max-width: 1024px) {
.l-header-contact {
height: 70px
}
}
@media screen and (max-width: 768px) {
.l-header-contact {
width: 60px;
height: 60px
}
.l-header-contact::before {
position: absolute;
content: "";
left: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 42px;
height: 42px;
border-radius: 50%;
background-image: url("../images/common/mail.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center
}
}
@media screen and (max-width: 500px) {
.l-header-contact {
width: 48px;
height: 48px
}
.l-header-contact::before {
width: 36px;
height: 36px
}
}
@media screen and (max-width: 350px) {
.l-header-contact {
width: 42px;
height: 42px
}
.l-header-contact::before {
width: 28px;
height: 28px
}
.l-header-tel {
width: 42px;
height: 42px;
}
}
.l-header-contact:hover {
opacity: .8
}
.l-header-contact-text {
position: relative;
display: block;
color: #fff;
line-height: 1.4
}
@media screen and (max-width: 768px) {
.l-header-contact-text {
display: none
}
}
.l-header-map {
display: none;
background-color: #898989
}
@media screen and (max-width: 768px) {
.l-header-map {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px
}
}
@media screen and (max-width: 500px) {
.l-header-map {
width: 48px;
height: 48px
}
}
@media screen and (max-width: 350px) {
.l-header-map {
width: 42px;
height: 42px
}
}
.l-header-map-inner {
width: 34px;
height: 34px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center
}
.l-header-map-icon {
background-image: url("../images/common/map.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 25px;
height: 25px;
margin-top: -4px
}
.l-hamburger {
display: none;
position: relative;
height: 70px;
width: 80px;
margin-left: 16px;
cursor: pointer;
z-index: 31
}
@media screen and (max-width: 1024px) {
.l-hamburger {
display: block
}
}
@media screen and (max-width: 500px) {
.l-hamburger {
height: 50px;
width: 54px;
margin-left: 6px
}
}
@media screen and (max-width: 350px) {
.l-hamburger {
width: 48px;
margin-left: 4px
}
}
.l-hamburger:hover .l-hamburger-line-2,
.l-hamburger:hover .l-hamburger-line-3 {
width: 100%
}
.js-open .l-hamburger:hover .l-hamburger-line-2 {
width: 0
}
.l-hamburger-icon {
position: relative;
display: block;
width: 50px;
height: 34px
}
@media screen and (max-width: 500px) {
.l-hamburger-icon {
width: 40px;
height: 28px
}
}
.l-hamburger-line {
display: block;
position: absolute;
left: 0;
height: 1px;
background-color: #000;
transition: width .1s, transform .2s, background-color .2s
}
.is-transparent .l-hamburger-line {
background-color: #000
}
.is-transparent.js-open .l-hamburger-line {
background-color: #000
}
.l-hamburger-line-1 {
width: 100%;
top: 0
}
.js-open .l-hamburger-line-1 {
transform: translate3d(0, 16px, 0) rotate(45deg)
}
@media screen and (max-width: 500px) {
.js-open .l-hamburger-line-1 {
transform: translate3d(0, 13px, 0) rotate(45deg)
}
}
.l-hamburger-line-2 {
width: 70%;
top: 50%
}
.js-open .l-hamburger-line-2 {
width: 0
}
.l-hamburger-line-3 {
width: 40%;
bottom: 0
}
.js-open .l-hamburger-line-3 {
width: 100%;
transform: translate3d(0, -16px, 0) rotate(-45deg)
}
@media screen and (max-width: 500px) {
.js-open .l-hamburger-line-3 {
transform: translate3d(0, -13px, 0) rotate(-45deg)
}
}
.l-header-navWrap {
display: none;
position: fixed;
left: auto;
right: 0;
bottom: 0;
height: 100%;
width: 0;
z-index: 30;
transition: width .4s cubic-bezier(0.645, 0.045, 0.355, 1);
overflow: hidden
}
@media screen and (max-width: 1024px) {
.l-header-navWrap {
display: block
}
}
.js-open .l-header-navWrap {
left: 0;
right: auto
}
.l-header-nav {
position: absolute;
top: 0;
left: auto;
right: 0;
width: 100vw;
height: 100%
}
.l-header-nav::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
;
z-index: 1
}
.js-open .l-header-nav {
left: 0;
right: auto
}
.l-header-list {
flex: 0 0 450px;
position: relative;
display: inline-block;
height: 100%;
padding: 60px 50px;
background-color: rgba(0, 0, 0, .8);
z-index: 2;
}
@media screen and (max-height: 768px)and (min-width: 1025px) {
.l-header-list {
padding: 40px 50px
}
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.l-header-list {
padding: 24px 40px
}
}
@media screen and (max-height: 600px)and (min-width: 1025px) {
.l-header-list {
padding: 12px 40px
}
}
@media screen and (max-width: 1024px) {
.l-header-list {
padding: 30px 40px
}
}
@media screen and (max-width: 768px) {
.l-header-list {
flex: 0 0 380px;
padding: 40px 30px
}
}
@media screen and (max-width: 500px) {
.l-header-list {
padding: 20px 20px;
flex: 0 0 100%;
width: 100%
}
}
.l-header-item:nth-child(n+2) {
margin-top: 20px
}
.l-header-item {
color: #fff;
}
@media screen and (max-height: 760px)and (min-width: 1025px) {
.l-header-item:nth-child(n+2) {
margin-top: 12px
}
}
@media screen and (max-height: 768px)and (min-width: 1025px) {
.l-header-item:nth-child(n+2) {
margin-top: 10px
}
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.l-header-item:nth-child(n+2) {
margin-top: 8px
}
}
@media screen and (max-height: 600px)and (min-width: 1025px) {
.l-header-item:nth-child(n+2) {
margin-top: 5px
}
}
@media screen and (max-width: 1024px) {
.l-header-item:nth-child(n+2) {
margin-top: 10px
}
}
@media screen and (max-width: 768px) {
.l-header-item:nth-child(n+2) {
margin-top: 8px
}
}
.l-header-link {
position: relative;
display: inline-block;
padding: 6px 30px 6px 6px;
color: #fff;
font-size: 2rem;
font-weight: bold
}
@media screen and (max-height: 768px)and (min-width: 1025px) {
.l-header-link {
font-size: 1.8rem
}
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.l-header-link {
padding: 4px 30px 4px 4px
}
}
@media screen and (max-height: 600px)and (min-width: 1025px) {
.l-header-link {
font-size: 1.6rem
}
}
@media screen and (max-width: 1024px) {
.l-header-link {
font-size: 1.7rem;
padding: 2px 30px 2px 6px
}
}
@media screen and (max-width: 500px) {
.l-header-link {
font-size: 1.4rem;
padding: 2px 30px 2px 6px;
}
}
@media screen and (min-width: 1025px) {
.l-header-link:hover::before {
right: 8px
}
.l-header-link:hover::after {
transform: scaleX(1)
}
}
.l-header-link[target=_blank] {
background-image: url(../images/common/blank_w.svg);
background-size: 18px;
background-position: 100% 9px;
background-repeat: no-repeat
}
@media screen and (max-width: 768px) {
.l-header-link[target=_blank] {
background-size: 16px;
background-position: 100% 6px
}
}
@media screen and (max-width: 500px) {
.l-header-link[target=_blank] {
background-position: 100% 5px
}
}
.l-header-link[target=_blank]::before {
content: none
}
.l-header-link::before {
position: absolute;
content: "";
top: 50%;
right: 12px;
width: 6px;
height: 6px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: translateY(-50%) rotate(45deg);
transition: .3s;
z-index: 1
}
.l-header-link::after {
position: absolute;
content: "";
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background-color: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s
}
.l-header-linkChild {
position: relative;
display: table;
margin-top: 4px;
margin-left: 2rem;
padding-bottom: 2px;
color: #fff;
font-size: 1.6rem;
font-weight: bold
}
@media screen and (max-width: 768px) {
.l-header-linkChild {
margin-top: 8px
}
}
@media screen and (min-width: 1025px) {
.l-header-linkChild:hover::before {
transform: scaleX(1)
}
}
.l-header-linkChild:nth-child(2) {
margin-top: 12px
}
@media screen and (max-width: 1024px) {
.l-header-linkChild:nth-child(2) {
margin-top: 10px
}
}
.l-header-linkChild::before {
position: absolute;
content: "";
bottom: 0;
left: 0;
height: 1px;
width: 100%;
background-color: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform .3s
}
.l-header-background {
flex: 0 1 100%;
height: 100%;
background-image: url("../en-img/nav_bg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center
}
@media screen and (max-width: 500px) {
.l-header-background {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 1
}
}
@media screen and (max-width: 900px) {
.l-footer-inner {
display: block
}
}
.l-footer-left {
position: relative;
flex: 0 0 40%;
padding: 75px 40px 75px 120px;
margin-top: -80px;
background-color: #00182f
}
@media screen and (max-width: 1300px) {
.l-footer-left {
padding: 60px 40px 60px 60px;
margin-top: -50px
}
}
@media screen and (max-width: 1024px) {
.l-footer-left {
padding: 40px 1%;
margin-top: -50px
}
}
@media screen and (max-width: 900px) {
.l-footer-left {
padding: 40px 5%;
margin-top: 0
}
}
@media screen and (max-width: 500px) {
.l-footer-left {
padding: 30px 5%
}
}
.l-footer-logo {
display: block;
width: 400px;
margin-bottom: 30px
}
@media screen and (max-width: 1300px) {
.l-footer-logo {
width: 180px;
margin-bottom: 40px
}
.l-footer-logo2 {
width: 180px;
margin-bottom: 40px
}
}
@media screen and (max-width: 900px) {
.l-footer-logo {
width: 350px;
margin-bottom: 30px
}
.l-footer-logo2 {
width: 160px;
margin-bottom: 30px
}
}
@media screen and (max-width: 500px) {
.l-footer-logo {
width: 280px;
margin-bottom: 24px
}
.l-footer-logo2 {
width: 280px;
margin-bottom: 0
}
.l-footer-logo img {
width: 100%;
}
.l-footer-logo2 img {
width: 90%;
}
}
.l-footer-logo-text {
margin-top: 10px;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-align: center
}
.l-footer-info p {
color: #fff
}
.l-footer-info .l-footer-tel {
display: table;
margin: 10px 0 40px;
color: #fff;
position: relative
}
.l-footer-info .l-footer-tel::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
height: 1px;
width: 0;
transition: .3s;
background-color: #fff
}
.l-footer-info .l-footer-tel:hover::before {
width: 100%
}
.l-footer-right {
position: relative;
width: 100%;
padding: 0 10%;
background-color: #002e59
}
@media screen and (max-width: 1300px) {
.l-footer-right {
padding: 0 5% 0 4%
}
}
@media screen and (max-width: 900px) {
.l-footer-right {
padding: 0 5%;
margin-top: -1px;
}
}
.l-footer-right-content {
padding: 70px 0 40px;
max-width: 700px
}
@media screen and (max-width: 1300px) {
.l-footer-right-content {
padding: 50px 0 30px
}
}
@media screen and (max-width: 900px) {
.l-footer-right-content {
padding: 40px 0 30px
}
}
@media screen and (max-width: 500px) {
.l-footer-right-content {
display: block;
padding: 30px 0
}
}
.l-footer-site-item {
display: block;
width: 230px;
text-align: left;
color: #fff;
transition: color .2s, background-color .2s
}
.l-footer-site-item-jp {
margin-top: 40px;
}
@media screen and (max-width: 1300px) {
.l-footer-site-item {
width: 210px
}
}
@media screen and (max-width: 500px) {
.l-footer-site-item {
width: 200px
}
}
@media screen and (min-width: 1025px) {
.l-footer-site-item:hover {
background-color: #fff;
color: #363636
}
}
.l-footer-site-item:nth-child(n+2) {
margin-top: 10px
}
.l-footer_apl {
display: flex;
justify-content: space-between;
}
.l-footer_apl img {
width: 90%;
}
.l-footer_sns {
width: 50%;
margin: 60px auto -10px auto;
display: flex;
justify-content: space-between;
}
.l-footer_sns img {
width: 90%;
}
.l-footer-social-list {
width: 40%;
max-width: 270px;
margin-left: 10%;
}
@media screen and (max-width: 1300px) {
.l-footer-social-list {
margin-left: 10%
}
}
@media screen and (max-width: 768px) {
.l-footer-social-list {
margin-left: 5%
}
}
@media screen and (max-width: 500px) {
.l-footer-social-list {
width: 95%;
margin-top: 20px;
margin-left: auto;
max-width: 95%;
}
.l-footer_sns {
width: 50%;
margin: 20px auto -10px auto;
display: flex;
justify-content: space-between;
}
}
.l-footer-social-item {
display: table;
color: #fff;
white-space: nowrap;
position: relative
}
.l-footer-social-item:nth-child(n+2) {
margin-top: 14px
}
.l-footer-social-item::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
height: 1px;
width: 0;
transition: .3s;
background-color: #fff
}
.l-footer-social-item:hover::before {
width: 100%
}
.l-footer-subLink {
justify-content: flex-end;
padding-bottom: 20px
}
@media screen and (max-width: 500px) {
.l-footer-subLink {
justify-content: flex-start;
padding-bottom: 10px
}
}
.l-footer-subLink-item {
position: relative;
color: #fff;
position: relative
}
.l-footer-subLink-item:nth-child(n+2) {
margin-left: 36px
}
@media screen and (max-width: 500px) {
.l-footer-subLink-item:nth-child(n+2) {
margin-left: 24px
}
}
.l-footer-subLink-item::before {
position: absolute;
bottom: 0;
left: 0;
content: "";
height: 1px;
width: 0;
transition: .3s;
background-color: #fff
}
.l-footer-subLink-item:hover::before {
width: 100%
}
.l-footer-copy {
padding: 14px 5px 14px;
max-width: 700px;
text-align: right;
}
@media screen and (max-width: 1250px) {
.l-footer-copy {
text-align: center;
padding: 14px 0 14px 0;
}
}
@media screen and (max-width: 768px) {
.l-footer-copy {
text-align: center;
padding: 14px 0 14px 0;
}
}
@media screen and (max-width: 500px) {
.l-footer-copy {
padding: 12px 0
}
}
.l-footer-copy small {
color: #fff;
font-size: 1.4rem
}
.c-button-text {
position: relative;
font-size: 2.4rem;
font-family: "Noto Serif JP", serif;
font-weight: 700;
color: #363636;
line-height: 1;
transition: color .2s
}
.c-button-text::before {
position: absolute;
content: "";
height: 1px;
width: 100%;
bottom: -4px;
left: 0;
background-color: #363636;
z-index: 2;
transform: scaleX(0);
transform-origin: left;
transition: transform .2s
}
.c-button-text--dummy {
position: absolute;
bottom: 1.7px;
left: -6.4px;
font-size: 2.4rem;
font-family: "Noto Serif JP", serif;
font-weight: 700;
color: #fff;
transition: color .2s
}
.win .c-button-text--dummy {
bottom: 1.1px
}
@media screen and (max-width: 1024px) {
.win .c-button-text--dummy {
bottom: 1.7px
}
}
.c-buttonB {
position: relative;
display: block;
width: 380px;
margin: auto;
padding: 16px 0;
background-color: #898989;
border: 1px solid #898989;
overflow: hidden
}
@media screen and (max-width: 1024px) {
.c-buttonB {
width: 320px
}
}
@media screen and (max-width: 768px) {
.c-buttonB {
padding: 12px 0;
width: 280px
}
}
@media screen and (max-width: 500px) {
.c-buttonB {
padding: 10px 0;
width: 220px
}
.l-footer-copy small {
color: #fff;
font-size: 1rem
}
}
.c-buttonB::before {
position: absolute;
content: "";
width: 1px;
height: 11px;
right: 14px;
top: 50%;
transform: translateY(-50%);
background-color: #fff;
transition: height .2s, background-color .2s
}
.c-buttonB::after {
position: absolute;
content: "";
width: 11px;
height: 1px;
top: 50%;
transform: translateY(-50%);
left: calc(100% - 20px);
background-color: #fff;
transition: width .3s, background-color .2s
}
.c-buttonB-text {
display: block;
text-align: center;
font-size: 2rem;
color: #fff;
line-height: 1;
transition: color .2s
}
@media screen and (max-width: 500px) {
.c-buttonB-text {
font-size: 1.8rem
}
}
.c-ofiCover {
object-fit: cover;
font-family: "object-fit: cover;, object-position: center;";
width: 100%;
height: 100%;
object-position: center
}
.c-ofiContain {
object-fit: contain;
font-family: "object-fit: contain;, object-position: center;";
width: 100%;
height: 100%;
object-position: center
}
.c-titleA-mask {
position: relative;
display: inline-block;
font-size: 10rem;
font-weight: 600;
background-image: url(../images/common/title_mask_img.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
font-family: "Noto Serif JP", serif;
margin-bottom: .4rem;
color: #fff;
line-height: 1.2;
letter-spacing: .05em
}
@media screen and (max-width: 1024px) {
.c-titleA-mask {
font-size: 8rem
}
}
@media screen and (max-width: 768px) {
.c-titleA-mask {
font-size: 7rem
}
}
@media screen and (max-width: 500px) {
.c-titleA-mask {
font-size: 5.4rem
}
}
@media screen and (max-width: 350px) {
.c-titleA-mask {
font-size: 5rem
}
}
.c-titleA-mask--min {
font-size: 10rem
}
@media screen and (max-width: 1024px) {
.c-titleA-mask--min {
font-size: 9rem
}
}
@media screen and (max-width: 768px) {
.c-titleA-mask--min {
font-size: 7rem
}
}
@media screen and (max-width: 500px) {
.c-titleA-mask--min {
font-size: 5rem
}
}
@media screen and (max-width: 350px) {
.c-titleA-mask--min {
font-size: 4.4rem
}
}
.c-titleA-ja {}
.c-titleA-ja img {
width: 28%;
max-width: 400px;
}
@media screen and (max-width: 1024px) {
.c-titleA-ja {}
.c-titleA-ja img {
width: 40%;
max-width: 400px;
}
.p-titleA--right img {
width: 70%;
display: inline;
}
}
@media screen and (max-width: 768px) {
.c-titleA-ja {
font-size: 2.2rem;
}
.c-titleA-ja img {
width: 40%;
max-width: 400px;
}
.p-titleA--right img {
width: 50%
}
}
@media screen and (max-width: 500px) {
.c-titleA-ja {
font-size: 2rem
}
}
.c-titleB {
font-size: 20px;
font-weight: bold;
letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
.c-titleB {
font-size: 5vw;
}
}
.c-inner {
max-width: 1024px;
width: 95%;
margin: -55px auto 0 auto;
position: relative;
}
@media screen and (min-width: 1400px) {
.c-inner {
max-width: 1280px
}
}
@media screen and (max-width: 1024px) {
.c-inner {
width: 90%;
margin: -60px auto 0 auto;
}
}
@media screen and (max-width: 768px) {
.c-inner {
margin: 0 auto 0 auto;
}
}
.c-inner1280 {
max-width: 1280px;
width: 100%;
margin: auto;
position: relative
}
@media screen and (max-width: 1200px) {
.c-inner1280 {
width: 90%
}
}
.p-pageTop {
position: absolute;
bottom: 0;
right: -6px;
width: 86px;
height: 80px;
cursor: pointer;
transition: opacity .2s;
z-index: 10
}
@media screen and (max-width: 1250px) {
.p-pageTop {
width: 80px;
height: 80px;
bottom: 50px;
}
.p-pageTop img {
width: 100%;
}
.p-pageTop {
right: 0;
}
}
@media screen and (max-width: 768px) {
.p-pageTop {
width: 60px;
height: 60px
}
.p-pageTop img {
width: 100%;
}
.p-pageTop {
right: 0;
}
}
@media screen and (max-width: 500px) {
.p-pageTop {
width: 54px;
height: 54px
}
.p-pageTop img {
width: 100%;
}
.p-pageTop {
right: 0;
}
}
@media screen and (min-width: 1025px) {
.p-pageTop:hover {
opacity: .8
}
}
.p-titleA--right {
text-align: right;
}
@media screen and (max-width: 500px) {
.p-titleA--right img {
width: 70%;
display: inline;
}
}
.p-titleA--center {
text-align: center;
width: 90%;
margin: 50px auto 50px;
}
.p-titleA--center img {
display: inline;
width: 95%;
max-width: 570px;
}
.p-titlein--center {
text-align: center;
width: 100%;
margin: 50px auto 50px;
}
.p-titlein--center img {
display: inline;
width: 95%;
max-width: 380px;
}
.p-buttonMore {
width: 100%;
height: 40px;
display: block;
align-items: center;
text-align: right;
}
.p-buttonMore2 {
width: 100%;
height: 40px;
text-align: center;
display: flex;
justify-content: center;
margin: 50px auto 50px auto;
}
@media screen and (max-width: 768px) {
.p-buttonMore {
width: 91px
}
.p-titlein--center img {
display: inline;
width: 65%;
max-width: 380px;
}
}
@media screen and (min-width: 1025px) {
.p-buttonMore:hover .c-button-text::before {
transform: scaleX(1)
}
.p-buttonMore:hover .c-button-icon {
background-color: #fff
}
.p-buttonMore:hover .c-button-icon::before {
height: 0
}
.p-buttonMore:hover .c-button-icon::after {
width: 60px;
background-color: #363636
}
.p-buttonMore:hover .c-button-text--dummy {
color: #363636
}
}
@media screen and (min-width: 1025px) {
.p-buttonSquare:hover {
background-color: #fff
}
.p-buttonSquare:hover::before {
height: 0;
background-color: #898989
}
.p-buttonSquare:hover::after {
width: 40px;
background-color: #898989
}
.p-buttonSquare:hover .c-buttonB-text {
color: #898989
}
}
.p-buttonSquare--darken {
background-color: #363636;
border: 1px solid #363636
}
@media screen and (min-width: 1025px) {
.p-buttonSquare--darken:hover {
background-color: #fff
}
.p-buttonSquare--darken:hover::before {
height: 0;
background-color: #363636
}
.p-buttonSquare--darken:hover::after {
width: 40px;
background-color: #363636
}
.p-buttonSquare--darken:hover .c-buttonB-text {
color: #363636
}
}
.p-textArea .c-titleB {
margin-bottom: 24px
}
@media screen and (max-width: 768px) {
.p-textArea .c-titleB {
margin-bottom: 16px
}
}
@media screen and (max-width: 500px) {
.p-textArea .c-titleB {
margin-bottom: 12px
}
}
.top_catch {
width: 100%;
max-width: 1350px;
margin: auto;
}
.top_catch2 {
width: 100%;
justify-content: flex-end;
display: flex;
max-width: 1500px;
margin: auto;
}
button {
appearance: auto;
writing-mode: horizontal-tb !important;
font-style: ;
font-variant-ligatures: ;
font-variant-caps: ;
font-variant-numeric: ;
font-variant-east-asian: ;
font-weight: ;
font-stretch: ;
font-size: ;
font-family: ;
text-rendering: auto;
color: buttontext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: center;
align-items: flex-start;
cursor: default;
box-sizing: border-box;
background-color: buttonface;
margin: 0em;
padding: 0;
border-width: 0;
border-style: outset;
border-color: buttonborder;
border-image: initial;
}
/*---------------------------------service-------------------------------------*/
.s-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/service_main.jpg);
height: 55vw !important;
max-height: 500px;
background-size: cover;
background-position: center;
}
.s-mv-catch {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.s-mv-catch {
padding-left: 110px
}
}
@media screen and (max-width: 1200px) {
.s-mv-catch {
padding-left: 110px
}
.s-mv-catch {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
}
@media screen and (max-width: 1024px) {
.s-mv-catch {
padding-left: 40px;
width: 80%;
}
}
@media screen and (max-width: 768px) {
.s-mv {
position: relative;
margin-top: 66px;
}
}
@media screen and (max-width: 600px) {
.s-mv-catch {
padding-left: 60px
}
}
@media screen and (max-width: 500px) {
.s-mv-catch {
padding-left: 45px
}
}
@media screen and (max-width: 350px) {
.s-mv-catch {
padding-left: 36px
}
}
.s-about .s-textArea {
position: relative;
flex: 0 0 47%;
max-width: 47%;
padding: 115px 0 0 70px
}
@media screen and (max-width: 1024px) {
.s-about .s-textArea {
padding: 115px 0 30px 40px
}
}
@media screen and (max-width: 768px) {
.s-about .s-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.s-about .s-textArea {
width: 100%;
padding: 24px 0
}
}
.s-about .s-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 60vw;
top: 40px;
right: calc(100% - 50vw);
background-color: #f5f5f5;
z-index: -1
}
@media screen and (max-width: 768px) {
.s-about .s-textArea::before {
height: 150%;
top: -40%;
width: 90vw;
right: calc(50% - 50vw)
}
}
@media screen and (max-width: 500px) {
.s-about .s-textArea::before {
width: 100vw;
height: 140%
}
}
.s-about .s-textArea .s-buttonMore {
margin-top: 50px;
margin-left: auto
}
@media screen and (max-width: 768px) {
.s-about .s-textArea .s-buttonMore {
margin-top: 40px
}
}
@media screen and (max-width: 500px) {
.s-about .s-textArea .s-buttonMore {
margin-top: 20px
}
}
.s-about-image {
width: calc(50vw + 3%);
height: 420px;
margin-left: calc(50% - 50vw);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
vertical-align: top;
margin-top: 0;
}
@media screen and (max-width: 1024px) {
.s-about-image {
height: 360px
}
}
@media screen and (max-width: 768px) {
.s-about-image {
height: 260px;
width: 75%;
margin: auto
}
}
@media screen and (max-width: 500px) {
.s-about-image {
width: 100%;
height: 200px
}
}
@media screen and (max-width: 768px) {
.s-about-content {
display: block
}
}
.s-inner {
max-width: 1024px;
width: 95%;
margin: 170px auto 0 auto;
position: relative;
min-height: 530px;
}
@media screen and (min-width: 1400px) {
.s-inner {
max-width: 1280px;
}
}
.s-textArea .c-titleB {
margin-bottom: 24px;
}
.s-staff {
margin: 110px 0 0
}
.s-staff2 {
margin: 170px 0 50px
}
@media screen and (max-width: 1024px) {
.s-staff {
padding: 170px 0 0
}
}
@media screen and (max-width: 768px) {
.s-staff {
padding: 50px 0 0
}
}
@media screen and (max-width: 500px) {
.s-inner {
max-width: 1024px;
width: 95%;
margin: 50px auto 0 auto;
position: relative;
min-height: 530px;
}
.s-staff {
padding: 50px 0 0
}
.s-staff {
margin: 0 0 0
}
}
.s-staff .s-titleA--right {
margin-bottom: 40px
}
@media screen and (max-width: 768px) {
.s-staff .s-titleA--right {
margin-bottom: 30px
}
}
@media screen and (max-width: 500px) {
.s-staff .s-titleA--right {
margin-bottom: 24px
}
}
.s-staff .s-textArea {
position: relative;
flex: 0 0 47%;
max-width: 47%;
padding: 115px 70px 0 0;
order: 1
}
@media screen and (max-width: 1024px) {
.s-staff .s-textArea {
padding: 115px 40px 30px 0
}
}
@media screen and (max-width: 768px) {
.s-staff .s-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.s-staff .s-textArea {
width: 100%;
padding: 24px 0
}
}
.s-staff .s-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 64vw;
left: calc(90% - 50vw);
background-color: #f5f5f5;
z-index: -1;
top: 40px;
}
@media screen and (max-width: 768px) {
.s-staff .s-textArea::before {
height: 150%;
width: 90vw;
left: calc(50% - 50vw);
top: -50%;
}
}
@media screen and (max-width: 500px) {
.s-staff .s-textArea::before {
width: 100vw;
height: 140%;
top: -40%;
}
}
.s-staff .s-textArea .s-buttonMore {
margin-top: 50px;
text-align: right;
}
@media screen and (max-width: 768px) {
.s-staff .s-textArea .s-buttonMore {
margin-top: 40px
}
}
@media screen and (max-width: 500px) {
.s-staff .s-textArea .s-buttonMore {
margin-top: 20px;
margin-left: auto;
}
}
@media screen and (max-width: 768px) {
.s-staff-content {
display: block
}
}
.s-staff-image {
position: relative;
width: calc(50vw + 3%);
height: 420px;
margin-right: calc(50% - 50vw);
order: 2
}
@media screen and (max-width: 1024px) {
.s-staff-image {
height: 360px
}
}
@media screen and (max-width: 768px) {
.s-staff-image {
height: 260px;
width: 75%;
margin: auto
}
}
@media screen and (max-width: 500px) {
.s-staff-image {
width: 100%;
height: 200px
}
}
.s-staff-image::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.s-staff .s-textArea .s-buttonMore {
margin-top: 50px;
text-align: right;
}
.s-buttonMore {
width: 100%;
height: 40px;
display: block;
align-items: center;
text-align: right;
}
.l-headerBottom2 {
position: relative;
width: 100%;
}
.wider2 {
position: relative;
width: 100%;
border-top: 1px solid rgba(0, 0, 0, .05);
}
.breadcrumb2 {
padding: 10px 0;
background: #F2F2F2;
overflow-x: auto;
border-bottom: 1px solid rgba(0, 0, 0, .05);
border-top: 1px solid rgba(0, 0, 0, .05);
}
@media only screen and (min-width: 1139px) .container2,
.keyBig,
.l-wrapper {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container2 {
position: relative;
max-width: 1300px;
margin: auto;
}
/*---------------------------------first-------------------------------------*/
.fi-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/first_main.jpg);
height: 55vw !important;
max-height: 500px;
background-size: cover;
background-position: center;
}
.fi-mv-catch {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.fi-mv-catch {
padding-left: 110px
}
}
@media screen and (max-width: 1200px) {
.fi-mv-catch {
padding-left: 110px
}
.fi-mv-catch {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
}
@media screen and (max-width: 1024px) {
.fi-mv-catch {
padding-left: 40px;
width: 80%;
}
}
@media screen and (max-width: 768px) {
.fi-mv {
position: relative;
margin-top: 66px;
}
.fi-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.fi-mv-catch {
padding-left: 60px
}
.fi-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.fi-mv-catch {
padding-left: 45px
}
.fi-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 350px) {
.fi-mv-catch {
padding-left: 36px
}
}
.first-copy {
max-width: 1350px;
width: 95%;
margin: 100px auto;
text-align: center;
}
.abtxt {
margin-bottom: 80px;
font-size: 30px
}
.abtxt2 {
margin-bottom: 80px;
font-size: 18px;
line-height: 1.9;
}
.fi-me-image {
position: relative;
width: calc(50vw + 3%);
height: 420px;
margin-right: calc(50% - 50vw);
order: 2
}
@media screen and (max-width: 1024px) {
.fi-me-image {
height: 360px
}
}
@media screen and (max-width: 768px) {
.fi-me-image {
height: 330px;
width: 75%;
margin: auto
}
}
@media screen and (max-width: 500px) {
.fi-me-image {
width: 100%;
height: 250px
}
}
.fi-me-image::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fi-me .s-textArea .s-buttonMore {
margin-top: 50px;
text-align: right;
}
.first-content-bg {
width: 100%;
background-color: #f5f5f5;
}
.first-bt-txt {
display: flex;
max-width: 1024px;
margin: auto;
width: 95%;
}
.first-pdca {
max-width: 1024px;
margin: auto;
width: 95%;
font-size: 24px;
padding-top: 50px;
}
.pdcap {
font-size: 1em;
line-height: 2.1;
padding-top: 0;
padding-bottom: 70px;
}
.first-bt-l {
width: 38%;
padding: 40px 0;
line-height: 1.9;
text-align: center;
}
.first-bt-l img {
display: inline;
}
.first-bt-r {
width: 62%;
padding: 0 0 0 2%;
line-height: 2.1;
align-items: center;
display: flex;
}
@media screen and (max-width: 1024px) {
.first-bt-r {
width: 58%;
padding: 40px 0 0 10%;
line-height: 1.9;
}
.first-pdca {
max-width: 1024px;
margin: auto;
width: 95%;
}
}
@media screen and (max-width: 768px) {
.first-bt-txt {
display: block;
max-width: 1024px;
margin: auto;
width: 75%;
}
.first-pdca {
display: block;
max-width: 1024px;
margin: auto;
font-size: 2.2rem;
width: 70%;
}
.pdcap {
font-size: 1em !important;
line-height: 2.1;
padding-top: 0;
padding-bottom: 70px;
}
.first-bt-l {
width: 95%;
margin: auto;
font-size: 1em;
padding: 0 0 20px 0;
line-height: 1.9;
}
.first-bt-r {
width: 95%;
margin: auto;
font-size: 1em;
padding: 0 0 50px 0;
line-height: 1.9;
}
}
@media screen and (max-width: 500px) {
.first-bt-txt {
display: block;
margin: auto;
width: 95%;
}
.first-pdca {
display: block;
margin: auto;
width: 95%;
}
.first-bt-r {
width: 100%;
}
.first-bt-l {
width: 100%;
}
}
.fi-inner {
max-width: 1200px;
width: 90%;
margin: -90px auto 0 auto;
position: relative;
min-height: 530px;
}
@media screen and (min-width: 1400px) {
.fi-inner {
max-width: 1280px;
}
.first-bt-txt {
display: flex;
max-width: 1280px;
margin: auto;
}
.first-pdca {
max-width: 1280px;
margin: auto;
}
}
.fi-textArea .c-titleB {
margin-bottom: 24px;
}
.fi-textArea .c-titlename {
margin: 10px 0 30px;
font-size: 30px;
line-height: 1.2;
}
.fi-staff {
padding: 70px 0 0
}
@media screen and (max-width: 1024px) {
.fi-staff {
padding: 30px 0 0
}
}
@media screen and (max-width: 768px) {
.fi-staff {
padding: 50px 0
}
.fi-inner {
margin: 10px auto 0 auto;
}
}
@media screen and (max-width: 500px) {
.fi-inner {
max-width: 1024px;
width: 95%;
margin: 10px auto 0 auto;
position: relative;
min-height: 530px;
}
.fi-staff {
padding: 50px 0 0
}
}
.fi-staff .fi-titleA--right {
margin-bottom: 40px
}
@media screen and (max-width: 768px) {
.fi-staff .fi-titleA--right {
margin-bottom: 30px
}
}
@media screen and (max-width: 500px) {
.fi-staff .fi-titleA--right {
margin-bottom: 24px
}
}
.fi-staff .fi-textArea {
position: relative;
flex: 0 0 47%;
max-width: 47%;
padding: 190px 70px 0 0;
order: 1
}
@media screen and (max-width: 1024px) {
.fi-staff .fi-textArea {
padding: 155px 40px 30px 0
}
}
@media screen and (max-width: 768px) {
.fi-staff .fi-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.fi-staff .fi-textArea {
width: 100%;
padding: 24px 0
}
}
.fi-staff .fi-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 150vw;
left: calc(90% - 50vw);
background-color: #f5f5f5;
z-index: -1;
top: 115px;
}
@media screen and (max-width: 768px) {
.fi-staff .fi-textArea::before {
position: absolute;
content: "";
height: 150%;
width: 150vw;
left: -120px;
background-color: #f5f5f5;
z-index: -1;
top: -140px;
}
}
.abm-image {
height: 600px !important;
}
.fi-catch-he {
padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
.fi-catch-he {
padding-bottom: 0;
}
.abm-image {
height: 350px !important;
}
}
@media screen and (max-width: 500px) {
.abm-image {
height: 275px !important;
}
}
.fi-about {
padding: 90px 0 130px
}
@media screen and (max-width: 1024px) {
.fi-about {
padding: 15vw 0 100px
}
}
@media screen and (max-width: 768px) {
.fi-about {
padding: 50px 0
}
}
@media screen and (max-width: 500px) {
.fi-about {
padding: 90px 0
}
}
.fi-about .fi-titleA {
margin-bottom: 50px
}
@media screen and (max-width: 768px) {
.fi-about .fi-titleA {
margin-bottom: 40px
}
}
@media screen and (max-width: 500px) {
.fi-about .fi-titleA {
margin-bottom: 30px;
text-align: center;
margin: 0 auto 30px auto;
justify-content: center;
display: flex;
padding-left: 5%;
}
}
.fi-about .fi-textArea {
position: relative;
flex: 0 0 47%;
max-width: 47%;
padding: 155px 0 40px 70px
}
@media screen and (max-width: 1024px) {
.fi-about .fi-textArea {
padding: 155px 0 40px 70px
}
}
@media screen and (max-width: 768px) {
.fi-about .fi-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.fi-about .fi-textArea {
width: 100%;
padding: 24px 0
}
}
.fi-about .fi-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 130vw;
top: 115px;
right: calc(100% - 55vw);
background-color: #f5f5f5;
z-index: -1
}
@media screen and (max-width: 768px) {
.fi-about .fi-textArea::before {
height: 195%;
top: -90%;
width: 120vw;
right: calc(50% - 55vw)
}
}
@media screen and (max-width: 500px) {}
.fi-about .fi-textArea .fi-buttonMore {
margin-top: 50px;
margin-left: auto
}
@media screen and (max-width: 768px) {
.fi-about .fi-textArea .fi-buttonMore {
margin-top: 40px
}
}
@media screen and (max-width: 500px) {
.fi-about .fi-textArea .fi-buttonMore {
margin-top: 20px
}
}
@media screen and (max-width: 768px) {
.fi-about-content {
display: block
}
}
.fi-rm {
font-size: 20px;
}
.cloud-catch {
width: 80%;
margin-top: 50px;
margin-left: -10px;
font-size: 24px;
text-align: left;
}
.cloud-catch p {
font-size: 16px;
padding-top: 40px;
}
@media screen and (max-width: 1024px) {
.cloud-catch {
margin-top: 50px;
width: 80%;
}
}
@media screen and (max-width: 768px) {
.cloud-catch {
padding-top: 30px;
width: 75%;
margin: auto;
clear: both;
font-size: 1.8rem;
}
.cloud-catch p {
font-size: 14px;
padding-top: 40px;
}
}
@media screen and (max-width: 500px) {
.cloud-catch {
padding-top: 30px;
width: 100%;
}
}
@media screen and (min-width: 768px) {
.cloudch {
width: calc(50vw + 50%) !important;
}
}
@media screen and (max-width: 768px) {
.cloudch {
height: 250px !important;
}
}
.fi-logo {
width: 100%;
background-color: #f5f5f5;
text-align: center;
padding: 50px 0;
}
.fi-logo-in {
width: 90%;
max-width: 1300px;
background-color: #fff;
text-align: center;
margin: auto;
}
.fi-logo-in img {
width: 90%;
max-width: 835px;
display: inline;
}
.fi-value-bg {
width: 100%;
background-color: #f5f5f5;
}
.fi-value-inner {
width: 100%;
max-width: 1300px;
display: flex;
margin: auto;
padding: 40px 0;
background-color: #f5f5f5;
}
.value-title {
margin-top: -60px;
font-size: 24px;
padding: 0 0 0 70px;
}
.fi-value-inb {
width: 54%;
}
.fi-value-ina {
width: 46%;
}
.fi-value-inb p {
margin-top: 45px;
width: 80%;
margin-bottom: 45px;
}
.fi-value-ina p {
margin-top: 45px;
padding: 0 0 0 70px;
}
.fi-value-image {
position: relative;
width: calc(50vw + 3%);
height: 420px;
margin-right: calc(50% - 50vw);
order: 2;
top: -120px;
}
@media screen and (max-width: 1400px) {
.fi-value-inner {
width: 90%;
max-width: 1200px;
display: flex;
margin: auto;
padding: 40px 0;
}
.fi-value-ina p {
margin-top: 45px;
padding: 0 0 0 70px;
}
.fi-value-inb img {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.fi-value-inner {
width: 75%;
display: block;
margin: auto;
padding: 40px 30px;
background-color: #f5f5f5;
}
.fi-value-inb {
width: 100%;
}
.fi-value-ina {
width: 100%;
}
.fi-value-inb p {
margin-top: 45px;
width: 100%;
margin-bottom: 45px;
}
.fi-value-image {
position: static;
width: 100%;
;
height: auto;
margin-right: 0;
order: 2;
top: 0;
margin-top: 50px;
}
.value-title {
margin-top: 30px;
font-size: 2.2rem;
padding: 0 0 0 0;
}
.fi-value-ina p {
margin-top: 45px;
padding: 0 0 0 0;
}
}
@media screen and (max-width: 500px) {
.fi-value-inner {
width: 95%;
display: block;
margin: auto;
padding: 40px 10px;
background-color: #f5f5f5;
}
.fi-value-inb {
width: 100%;
}
.fi-value-ina {
width: 100%;
}
.fi-value-inb p {
margin-top: 45px;
width: 100%;
margin-bottom: 45px;
}
.fi-value-image {
position: static;
width: 100%;
;
height: auto;
margin-right: 0;
order: 2;
top: 0;
margin-top: 50px;
}
.value-title {
margin-top: 30px;
font-size: 2.2rem;
padding: 0 0 0 0;
}
.fi-value-ina p {
margin-top: 45px;
padding: 0 0 0 0;
}
}
.fima {
margin-top: 180px !important;
}
.fima2 {
margin-top: 0 !important;
}
.fibe ::before {
position: absolute;
content: "";
height: 145% !important;
width: 64vw;
top: -22.5% !important;
left: calc(90% - 50vw);
background-color: #f5f5f5;
z-index: -1;
}
@media screen and (max-width: 1024px) {
.fibe ::before {
position: absolute;
content: "";
height: 100% !important;
width: 64vw;
top: -12.5% !important;
left: calc(90% - 50vw);
background-color: #f5f5f5;
z-index: -1;
}
.fima {
margin-top: 100px !important;
}
}
@media screen and (max-width: 768px) {
.fibe ::before {
position: absolute;
content: "";
height: 110% !important;
width: 64vw;
top: -22.5% !important;
left: calc(90% - 50vw);
background-color: #f5f5f5;
z-index: -1;
}
}
/*---------------------------------about-------------------------------------*/
.ab-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/about_main.jpg);
height: 55vw !important;
max-height: 500px;
background-size: cover;
background-position: center;
}
.ab-mv-catch {
position: absolute;
top: 50%;
left: 30%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
@media screen and (max-height: 660px)and (min-width: 1025px) {
.ab-mv-catch {
padding-left: 110px
}
}
@media screen and (max-width: 1200px) {
.ab-mv-catch {
padding-left: 110px
}
.ab-mv-catch {
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%, -50%);
padding-left: 150px;
z-index: 5;
width: 1000px
}
}
@media screen and (max-width: 1024px) {
.ab-mv-catch {
padding-left: 40px;
width: 80%;
}
}
@media screen and (max-width: 768px) {
.ab-mv {
position: relative;
margin-top: 66px;
}
.ab-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 600px) {
.ab-mv-catch {
padding-left: 60px
}
.ab-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 500px) {
.ab-mv-catch {
padding-left: 45px
}
.ab-mv-catch img {
width: 100%;
}
}
@media screen and (max-width: 350px) {
.ab-mv-catch {
padding-left: 36px
}
}
.about-copy {
max-width: 1350px;
width: 95%;
margin: 100px auto;
text-align: center;
}
.abtxt {
margin-bottom: 80px;
font-size: 30px;
letter-spacing: 0.05em;
}
.abtxt2 {
margin-bottom: 80px;
font-size: 17px;
line-height: 1.9;
text-align: left;
letter-spacing: 0.01em;
}
.ab-me-image {
position: relative;
width: calc(50vw + 3%);
height: 30vw;
min-height: 500px;
margin-right: calc(50% - 50vw);
order: 2
}
@media screen and (max-width: 1024px) {
.ab-me-image {
height: 360px
}
}
@media screen and (max-width: 768px) {
.ab-me-image {
height: 330px;
width: 75%;
margin: auto;
min-height: 250px;
}
.abtxt {
font-size: 5vw;
}
.abtxt2 {
margin-bottom: 80px;
font-size: 3.8vw;
line-height: 1.9;
}
}
@media screen and (max-width: 500px) {
.ab-me-image {
width: 100%;
height: 250px;
min-height: 250px;
}
}
.ab-me-image::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ab-me .s-textArea .s-buttonMore {
margin-top: 50px;
text-align: right;
}
.about-content-bg {
width: 100%;
background-color: #f2f4f7;
}
.about-bt-txt {
display: flex;
max-width: 1024px;
margin: auto;
width: 95%;
}
.about-bt-l {
width: 42%;
padding: 40px 0;
line-height: 1.9;
}
.about-bt-r {
width: 58%;
padding: 40px 0 0 10%;
line-height: 1.9;
}
@media screen and (max-width: 1024px) {
.about-bt-r {
width: 58%;
padding: 40px 0 0 10%;
line-height: 1.9;
}
}
@media screen and (max-width: 768px) {
.about-bt-txt {
display: block;
max-width: 1024px;
margin: auto;
width: 75%;
}
.about-bt-l {
width: 95%;
margin: auto;
font-size: 1em;
padding: 0 0 20px 0;
line-height: 1.9;
}
.about-bt-r {
width: 95%;
margin: auto;
font-size: 1em;
padding: 0 0 50px 0;
line-height: 1.9;
}
}
@media screen and (max-width: 500px) {
.about-bt-txt {
display: block;
margin: auto;
width: 95%;
}
.about-bt-r {
width: 100%;
}
.about-bt-l {
width: 100%;
}
}
.ab-inner {
max-width: 1024px;
width: 95%;
margin: 0 auto 0 auto;
position: relative;
min-height: 530px;
}
@media screen and (min-width: 1400px) {
.ab-inner {
max-width: 1350px;
}
.about-bt-txt {
display: flex;
max-width: 1350px;
margin: auto;
}
}
.ab-textArea .c-titleB {
margin-bottom: 24px;
}
.ab-textArea .c-titlename {
margin: 10px 0 30px;
font-size: 30px;
line-height: 1.2;
}
.ab-staff {
padding: 70px 0 0
}
@media screen and (max-width: 1024px) {
.ab-staff {
padding: 30px 0 0
}
}
@media screen and (max-width: 768px) {
.ab-staff {
padding: 50px 0
}
.ab-textArea .c-titlename {
font-size: 7vw;
}
}
@media screen and (max-width: 500px) {
.ab-inner {
max-width: 1024px;
width: 95%;
margin: 10px auto 0 auto;
position: relative;
min-height: 530px;
}
.ab-staff {
padding: 50px 0 0
}
}
.ab-staff .ab-titleA--right {
margin-bottom: 40px
}
@media screen and (max-width: 768px) {
.ab-staff .ab-titleA--right {
margin-bottom: 30px
}
}
@media screen and (max-width: 500px) {
.ab-staff .ab-titleA--right {
margin-bottom: 24px
}
}
.ab-staff .ab-textArea {
position: relative;
flex: 0 0 47%;
max-width: 47%;
padding: 115px 70px 0 0;
order: 1
}
@media screen and (max-width: 1024px) {
.ab-staff .ab-textArea {
padding: 115px 40px 30px 0
}
}
@media screen and (max-width: 768px) {
.ab-staff .ab-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.ab-staff .ab-textArea {
width: 100%;
padding: 24px 0
}
}
.ab-staff .ab-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 150vw;
left: calc(90% - 50vw);
background-color: #f2f4f7;
z-index: -1;
top: 40px;
}
@media screen and (max-width: 768px) {
.ab-staff .ab-textArea::before {
position: absolute;
content: "";
height: 150%;
width: 150vw;
left: -100px;
background-color: #f5f5f5;
z-index: -1;
top: -140px;
}
}
.abm-image {
margin-top: 40px;
height: 40vw !important;
min-height: 600px !important;
}
.ab-catch-he {
padding-bottom: 70px;
}
@media screen and (max-width: 768px) {
.ab-catch-he {
padding-bottom: 30px;
}
.abm-image {
min-height: 350px !important;
}
}
@media screen and (max-width: 500px) {
.abm-image {
min-height: 300px !important;
}
}
.ab-about {
padding: 90px 0 130px
}
@media screen and (max-width: 1024px) {
.ab-about {
padding: 15vw 0 100px
}
}
@media screen and (max-width: 768px) {
.ab-about {
padding: 100px 0
}
}
@media screen and (max-width: 600px) {
.ab-about {
padding: 80px 0
}
}
@media screen and (max-width: 500px) {
.ab-about {
padding: 50px 0
}
}
.ab-about .ab-titleA {
margin-bottom: 50px
}
@media screen and (max-width: 768px) {
.ab-about .ab-titleA {
margin-bottom: 40px
}
}
@media screen and (max-width: 500px) {
.ab-about .ab-titleA {
margin-bottom: 30px;
text-align: center;
margin: 0 auto 30px auto;
justify-content: center;
display: flex;
padding-left: 5%;
}
}
.ab-about .ab-textArea {
position: relative;
flex: 0 0 50%;
max-width: 50%;
padding: 40px 0 40px 70px
}
@media screen and (max-width: 1024px) {
.ab-about .ab-textArea {
padding: 30px 0 30px 40px
}
}
@media screen and (max-width: 768px) {
.ab-about .ab-textArea {
max-width: none;
width: 75%;
padding: 30px 0;
margin: auto
}
}
@media screen and (max-width: 500px) {
.ab-about .ab-textArea {
width: 100%;
padding: 24px 0
}
}
.ab-about .ab-textArea::before {
position: absolute;
content: "";
height: 110%;
width: 60vw;
top: -1%;
right: calc(100% - 50vw);
background-color: #f2f4f7;
z-index: -1
}
@media screen and (max-width: 768px) {
.ab-about .ab-textArea::before {
height: 130%;
top: -20%;
width: 90vw;
right: calc(50% - 50vw)
}
}
@media screen and (max-width: 500px) {
.ab-about .ab-textArea::before {
width: 100vw;
height: 125%
}
}
.ab-about .ab-textArea .ab-buttonMore {
margin-top: 50px;
margin-left: auto
}
@media screen and (max-width: 768px) {
.ab-about .ab-textArea .ab-buttonMore {
margin-top: 40px
}
}
@media screen and (max-width: 500px) {
.ab-about .ab-textArea .ab-buttonMore {
margin-top: 20px
}
}
@media screen and (max-width: 768px) {
.ab-about-content {
display: block
}
}
.ab-rm {
font-size: 20px;
}
/*---------------------------------prfile-------------------------------------*/
.cmp_01 {
width: 95%;
margin: auto;
max-width: 1265px;
}
.cmp_02 {
width: 100%;
margin: 100px auto;
padding-bottom: 70px;
background: #f7f8fa;
}
.comw_02 {
background: #f7f8fa;
width: 1130px;
margin: auto;
}
.company-info {
margin-top: 0;
}
.company-info2 {
margin-top: 0;
}
.flg01 {
position: relative;
top: 70px;
}
.flg02 {
position: relative;
top: 70px;
}
dl.company-info dt {
clear: both;
float: left;
font-weight: 700;
padding: 7px 0 7px 65px;
width: 25%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info dd {
padding: 10px 0 10px 50px;
line-height: 1.6;
}
dl.company-info2 dt {
clear: both;
font-weight: 700;
padding: 7px 0 7px 120px;
width: 25%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info2 dd {
padding: 10px 0 10px 27%;
border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
line-height: 1.6;
}
.company-info-flex {
display: flex;
border-bottom: 1px dashed rgba(0, 0, 0, 0.15);
}
@media screen and (max-width:1024px) {
.cmp_01 {
width: 100%;
margin: 40px auto 0 auto;
}
.cmp_02 {
width: 100%;
margin: 100px auto;
padding-bottom: 30px;
}
.comw_02 {
width: 100%;
background: #f7f8fa;
margin: auto;
}
dl.company-info dt {
font-weight: 700;
padding: 7px 0 7px 10px;
width: 50%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info2 dt {
font-weight: 700;
padding: 7px 0 7px 10px;
width: 50%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info dd {
padding: 10px 10px 10px 10px;
line-height: 1.6;
width: 50%;
}
dl.company-info2 dd {
padding: 10px 10px 10px 10px;
line-height: 1.6;
width: 50%;
}
.flg01 {
position: relative;
top: 15px;
}
.flg02 {
position: relative;
top: -30px;
}
.company-info2 {
margin-top: -50px;
}
.access iframe {
top: 0;
left: 0;
width: 100%;
height: 300px;
}
}
@media screen and (max-width:500px) {
.cmp_01 {
width: 100%;
margin: 40px auto 0 auto;
}
.cmp_02 {
width: 100%;
margin: 100px auto;
padding-bottom: 30px;
}
.comw_02 {
width: 100%;
background: #f7f8fa;
margin: auto;
}
dl.company-info dt {
font-weight: 700;
font-size: 3vw;
padding: 7px 0 7px 10px;
width: 50%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info2 dt {
font-size: 3vw;
font-weight: 700;
padding: 7px 0 7px 10px;
width: 50%;
white-space: nowrap;
word-break: break-all;
}
dl.company-info dd {
padding: 10px 10px 10px 10px;
font-weight: 700;
line-height: 1.6;
font-size: 3vw;
width: 50%;
}
dl.company-info2 dd {
padding: 10px 10px 10px 10px;
font-weight: 700;
line-height: 1.6;
font-size: 3vw;
width: 50%;
}
.flg01 {
position: relative;
top: 15px;
}
.flg02 {
position: relative;
top: -30px;
}
.company-info2 {
margin-top: -50px;
}
}
.ab-access {
margin: 110px auto 0;
}
.access {
width: 100%;
margin: 80px auto 0;
}
.access-catch {
width: 70% !important;
max-width: 325px !important;
}
@media screen and (max-width:500px) {
.access-catch {
width: 70% !important;
max-width: 385px !important;
}
}
/*---------------------------------privacy-------------------------------------*/
.pr-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/privacy_main.jpg);
height: 55vw !important;
max-height: 300px;
background-size: cover;
background-position: center;
}
.pr-mv-catch-ja {
margin-top: 12px;
font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
.pr-mv {
margin-top: 70px;
}
.pr-mv-catch-ja {
width: 100%;
}
.pr-mv-catch-ja img {
width: 100%;
}
}
.ml50 {
margin-left: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.privacycatch {
text-align: center;
margin: 80px 0 60px;
font-size: 30px;
}
.privacy {
max-width: 1250px;
width: 95%;
text-align: left;
padding: 0 0 0 0;
margin: auto;
color: #000;
line-height: 1.9;
font-size: 18px;
margin-bottom: 210px;
}
.privacy_tor {
padding: 20px 0 20px;
font-weight: bold;
}
.privacy_title {
padding: 40px 0 20px;
font-weight: bold;
}
.privacy_txt {
padding-left: 20px;
line-height: 1.9;
font-size: 16px;
letter-spacing: 0.01em;
}
.privacy_txt div {
line-height: 1.9;
margin-right: 5px;
letter-spacing: 0.01em;
}
.privacy_txt a {
text-decoration: underline;
color: #0055f1 !important;
}
@media screen and (max-width:1024px) {
.privacy {
font-size: 0.8em;
box-sizing: border-box;
width: 100%;
text-align: left;
padding: 50px 20px 0 20px;
margin: auto;
color: #000;
line-height: 1.9;
margin-bottom: 110px;
}
.privacycatch {
font-size: 5vw;
}
.privacy_tor {
font-size: 5vw;
}
.privacy_title {
font-size: 4.2vw;
padding: 60px 0 20px;
}
.privacy_txt {
padding-left: 10px;
line-height: 1.9;
font-size: 3.8vw;
}
.privacy_txt div {
line-height: 1.9;
}
}
.privacy-link {
display: inline-block;
}
/*---------------------------------contact-------------------------------------*/
.co-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/contact_main.jpg);
height: 55vw !important;
max-height: 300px;
background-size: cover;
background-position: center;
}
.co-mv-catch-ja {
margin-top: 12px;
font-size: 1.8rem;
}
@media screen and (max-width: 768px) {
.co-mv {
margin-top: 70px;
background-image: url(../en-img/contact02_main.jpg);
}
.co-mv-catch-ja {
width: 100%;
}
.co-mv-catch-ja img {
width: 100%;
}
}
.tell_box {
width: 725px;
margin: 70px auto 100px;
}
.tell_content {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
margin: 30px auto 0 auto;
justify-content: center;
}
.tell_txt {
width: 220px;
text-align: center;
padding-top: 10px;
}
.tell_txt2 {
width: 220px;
text-align: center;
}
.tell_flag {
width: 100px;
}
@media screen and (max-width:768px) {
.tell_box {
width: 100%;
margin: 0 auto 100px;
}
.tell_contact {
margin-top: 0;
display: block;
}
.tell_content {
display: inline;
margin: 0 auto 0 auto;
justify-content: center;
}
}
.hcatch_top {
font-size: 30px;
color: #000;
margin-top: 80px;
margin-bottom: 50px;
line-height: 1.9;
padding-left: 10px;
letter-spacing: 0.05em;
}
@media screen and (max-width: 1024px) {
.hcatch_top {
font-size: 5vw;
margin-bottom: 50px;
line-height: 1.8;
padding: 0 10px;
}
}
.content2 {
max-width: 1350px;
width: 100%;
text-align: center;
padding: 0 0 60px 0;
margin: auto;
color: #000;
}
.headlinec {
margin: auto;
text-align: center;
height: 40px;
padding-bottom: 46px;
width: 100%;
max-width: 300px;
font-size: 1.5em;
font-weight: 600;
margin-top: 60px;
font-size: 24px;
}
@media screen and (max-width: 1024px) {
.headlinec {
margin: auto;
text-align: center;
height: 40px;
padding-bottom: 46px;
width: 100%;
max-width: 300px;
font-size: 1.3em;
font-weight: 600;
margin-top: 60px;
}
.tell_contact img {
width: 70%;
margin: auto;
}
}
.headlinecw {
margin: auto;
text-align: center;
height: 40px;
padding-bottom: 46px;
width: 100%;
max-width: 400px;
font-size: 1.5em;
font-weight: 600;
margin-top: 145px;
font-size: 24px;
}
@media screen and (max-width: 1024px) {
.headlinecw {
margin: auto;
text-align: center;
height: 40px;
padding-bottom: 46px;
width: 100%;
max-width: 300px;
font-size: 1.3em;
font-weight: 600;
margin-top: 60px;
}
}
.contact_submit a {
color: #2387ef;
text-decoration: underline;
}
.content3 {
max-width: 1350px;
width: 100%;
text-align: center;
padding: 0 0 0 0;
margin: auto;
color: #000;
}
/*---------------------------------form-------------------------------------*/
form input[type="button"],
form input[type="submit"] {
-webkit-appearance: none;
}
input {
font-size: 100%;
}
.contact-bor {
width: 100%;
margin-top: 40px;
}
.form-50 {
margin-left: -50px;
}
@media screen and (max-width: 1024px) {
.form-50 {
margin-left: 0;
}
}
.contact_table {
width: 90%;
max-width: 1140px;
margin: auto;
padding: 70px 0 20px;
}
.contact_submit {
width: 100%;
padding-top: 50px;
text-align: center;
}
.submit3 {
border: none;
}
.submit3:hover {
opacity: 0.75;
cursor: pointer;
}
.submit2 {
border: none;
}
.submit2:hover {
opacity: 0.75;
cursor: pointer;
}
textarea {
writing-mode: horizontal-tb !important;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
text-rendering: auto;
color: -internal-light-dark(black, white);
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
resize: auto;
cursor: text;
white-space: pre-wrap;
overflow-wrap: break-word;
background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));
column-count: initial !important;
margin: 0em;
border-width: 1px;
border-style: solid;
border-color: #cccccc;
border-image: initial;
padding: 2px;
font-size: 100%;
}
.maright {
margin-right: 40px;
}
.inipa {
padding: 0 10px 0 10px;
}
.co-sec {
margin-bottom: 220px;
}
#formWrap {
width: 100%;
margin: 0 auto;
color: #555;
line-height: 120%;
font-size: 90%;
background: #f2f4f7;
}
#formWrap p {
text-align: center;
color: #555;
margin: 10px 0 50px;
}
table.formTable {
width: 100%;
margin: 0 auto;
border-collapse: collapse;
font-size: 1.1em;
}
table.formTable td,
table.formTable th {
padding: 16px 0 11px 10px;
line-height: 1.5;
}
table.formTable td {
line-height: 1.9;
vertical-align: middle;
}
table.formTable th tr {
display: flex;
align-items: center;
}
table.formTable th {
min-width: 315px;
vertical-align: top;
text-align: right;
letter-spacing: 0.05em;
display: flex;
justify-content: flex-end;
align-items: center;
}
table.formTable tr {
margin-bottom: 10px;
}
.pt25 {
padding-top: 30px !important;
}
.comtitle {
padding-right: 100px !important;
}
.contact-tell-check {
-webkit-appearance: none;
appearance: none;
width: 25px !important;
height: 25px !important;
border: 1px solid #cccccc;
background-color: #fff;
cursor: pointer;
position: relative;
vertical-align: middle;
margin-right: 10px;
}
.contact-tell-check:checked {
background-color: #007bff;
border-color: #007bff;
}
.contact-tell-check:checked::after {
content: '';
position: absolute;
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.prefer-box {
margin: 20px 0 0;
display: flex;
align-items: center;
}
.prefer-phone {
font-size: 14px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
}
.prefer-phone-txt {
letter-spacing: 0.05em;
}
.req {
background: #ff465c;
line-height: 1;
color: #fff;
font-size: 11px;
padding: 4px 10px 3px;
margin-left: 10px;
margin-top: 2px;
vertical-align: 1px;
text-align: center;
float: right;
height: 18px;
}
.form-flex {
display: flex;
justify-content: flex-end;
align-items: center;
}
@media screen and (max-width:1024px) {
.prefer-box {
margin: 20px 0 10px;
display: flex;
align-items: center;
}
.form-flex {
display: flex;
justify-content: flex-start;
}
}
.submit3 {
width: 415px;
display: block;
margin: 50px auto;
font-size: 1.2em;
background-color: #fff;
color: #383838;
text-align: center;
font-weight: 900;
border: solid 1px #999;
border-radius: 0;
position: relative;
cursor: pointer;
transition: all 0.3s;
height: 80px;
}
.submit3::after {
content: '';
position: absolute;
right: 25px;
/* 右端からの距離 */
top: 50%;
/* 上から中央 */
transform: translateY(-50%);
/* 垂直方向のセンター合わせ */
width: 12px;
/* 画像の横幅 */
height: 18px;
/* 画像の縦幅 */
background-image: url("../en-img/arrow-form.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
.submit4 {
width: 415px;
display: flex;
margin: 50px auto;
font-size: 1.2em;
background-color: #fff;
color: #383838;
text-align: center;
font-weight: 900;
border: solid 1px #999;
border-radius: 0;
position: relative;
cursor: pointer;
transition: all 0.3s;
height: 80px;
vertical-align: middle;
justify-content: center;
align-items: center;
}
.submit4::after {
content: '';
position: absolute;
right: 25px;
/* 右端からの距離 */
top: 50%;
/* 上から中央 */
transform: translateY(-50%);
/* 垂直方向のセンター合わせ */
width: 12px;
/* 画像の横幅 */
height: 18px;
/* 画像の縦幅 */
background-image: url("../en-img/arrow-form.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: block;
}
.submit2 {
width: 200px;
margin: 50px 5px;
font-size: 1.2em;
padding: 15px 0;
background-color: #fff;
color: #383838;
text-align: center;
font-weight: 900;
border: solid 1px #999;
border-radius: 0;
}
@media screen and (max-width:1024px) {
table.formTable th {
width: 35%;
vertical-align: top;
text-align: left;
padding: 20px 37px;
}
table.formTable td,
table.formTable th {
padding: 0 10px 10px 10px;
line-height: 1.5;
}
.contact_table {
width: 100%;
margin: auto;
background: #f7f8fa;
padding: 50px 0 20px;
}
.contact_submit {
width: 100%;
padding-top: 50px;
text-align: center;
font-size: 1.1em;
}
.maright {
margin-right: 15px;
}
.co-sec {
margin-bottom: 120px;
}
#formWrap {
width: 100%;
margin: 0 auto;
}
table.formTable th,
table.formTable td {
width: auto;
display: block;
}
table.formTable th {
border-bottom: 0;
padding: 10px 20px;
}
form input[type="text"],
form textarea {
width: 100%;
padding: 5px;
font-size: 110%;
}
.contact-bor {
max-width: 100%;
margin: 0 auto 0 auto;
padding-top: 30px;
}
.contact-bor2 {
max-width: 100%;
margin: 0 auto 0 auto;
}
.submit3 {
width: 80%;
display: block;
margin: 50px auto 0;
font-size: 1.2em;
padding: 15px 0;
text-align: center;
font-weight: 900;
}
.submit4 {
width: 80%;
display: block;
margin: 50px auto 0;
font-size: 1.2em;
padding: 15px 0;
text-align: center;
font-weight: 900;
display: flex;
}
.submit2 {
width: 35%;
margin: 10px auto 0 auto;
font-size: 1.2em;
padding: 15px 0;
text-align: center;
font-weight: 900;
}
.yubi {
width: 35% !important;
}
table.formTable td {
line-height: 3;
}
.inipa {
padding: 0 5px 0 5px;
}
.req {
background: #ff465c;
border-radius: 2px;
line-height: 1;
color: #fff;
font-size: 12px;
padding: 4px 5px;
margin-left: 10px;
vertical-align: 1px;
text-align: center;
float: none;
}
.vertical-align {
line-height: 1.8 !important;
}
.vertical-align input,
.vertical-align select {
vertical-align: middle;
}
}
@media screen and (max-width:350px) {
form input[type="text"],
form textarea {
width: 98%;
padding: 5px;
font-size: 110%;
}
}
input[type="text"i] {
writing-mode: horizontal-tb !important;
text-rendering: auto;
color: fieldtext;
letter-spacing: normal;
word-spacing: normal;
line-height: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
appearance: auto;
-webkit-rtl-ordering: logical;
cursor: text;
background-color: field;
margin: 0;
padding: 0 2px;
border-width: 1px;
border-color: #cccccc;
border-style: solid;
border-radius: 0;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
}
.form_he {
height: 47px;
width: 800px;
}
.w100 {
width: 800px;
font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 游ゴシック, "Yu Gothic", メイリオ, sans-serif;
}
@media screen and (max-width:1220px) {
.form_he {
height: 47px;
width: 630px;
}
.w100 {
width: 630px;
}
}
@media screen and (max-width:1024px) {
.w100 {
width: 100%;
}
}
.breadcrumb__item2 {
position: relative;
display: table-cell;
white-space: nowrap;
padding-right: 15px;
padding-left: 15px;
font-size: 1.2rem;
line-height: 1.75;
color: #7f7f7f;
}
.icon-home2:before {
font-family: 'FontAwesome';
content: "\f015";
}
.breadcrumb__item2::after {
content: "";
position: absolute;
right: 0;
top: 50%;
margin-top: -4px;
width: 5px;
height: 5px;
border-top: 1px solid #BFBFBF;
border-right: 1px solid #BFBFBF;
transform: rotate(45deg);
}
.breadcrumb__item3 {
position: relative;
display: table-cell;
white-space: nowrap;
padding-right: 15px;
padding-left: 15px;
font-size: 1.2rem;
line-height: 1.75;
color: #7f7f7f;
}
.pdfbtnse {
width: 100%;
max-width: 489px;
text-align: center;
margin: 150px auto 0;
}
@media screen and (max-width: 767px) {
.breadcrumb__item2::after {
margin-top: -3px;
}
.pdfbtnse {
margin: 100px auto 0;
}
}
.pdfbtnse img {
width: 90%;
margin: auto;
max-width: 489px;
}
/*---------------------------------recruit-------------------------------------*/
.recruit-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/recruit_main.jpg);
height: 55vw !important;
max-height: 500px;
background-size: cover;
background-position: center;
}
.recform-mv {
position: relative;
margin-top: 115px;
width: 100%;
margin-left: auto;
background-image: url(../en-img/form_main.jpg);
height: 55vw !important;
max-height: 300px;
background-size: cover;
background-position: center;
}
.recruit-txt-img {
width: 95%;
max-width: 800px;
margin: 0 auto 80px;
}
.recruit-txt-img img {
width: 100%;
}
.recruit-content-future {
width: 100%;
background: #f2f4f7;
padding: 70px 0;
text-align: center;
font-size: 30px;
}
.recruit-content-future-img {
width: 95%;
max-width: 1120px;
margin: 60px auto 0;
}
.recruit-content-future-img img {
width: 100%;
}
.recruit-content-future-organization {
text-align: center;
width: 100%;
background: url(../en-img/recruit_future_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto;
font-size: 30px;
min-height: 150px;
padding-top: 50px
}
.recruit-content-important {
display: flex;
width: 95%;
max-width: 1000px;
margin: 70px auto;
}
.recruit-content-important-txt {
padding-left: 70px;
}
.recruit-content-important-txt p {
padding-left: 30px;
font-size: 24px;
margin-top: 40px;
line-height: 1.9;
}
.recruit-content-important-title {
position: relative;
font-size: 30px;
padding: 0 15px;
z-index: 1;
}
.recruit-content-important-title::after {
content: '';
position: absolute;
left: 0;
width: 90%;
height: 13px;
background-color: #ffdd78;
bottom: 10px;
z-index: -1;
}
.recruit-content-important-title-career {
position: relative;
font-size: 30px;
padding: 0 15px;
z-index: 1;
display: inline;
}
.recruit-content-important-title-career::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 13px;
background-color: #ffdd78;
bottom: 10px;
z-index: -1;
}
.recruit-content-important img {
width: 206px;
}
.form-dob {
height: 47px;
width: 70px;
text-align: end !important;
margin-right: 10px !important;
}
.td-dob {
display: flex;
align-items: flex-end;
}
.td-jen {
display: flex;
align-items: center;
padding: 20px 0 11px 15px !important;
}
input[type="radio"] {
-webkit-appearance: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
border-radius: 50%;
background: #fff;
margin-right: 10px;
}
input[type="radio"]:before {
content: "";
display: block;
width: 60%;
height: 60%;
margin: 20% auto;
border-radius: 50%;
background: #fff;
}
input[type="radio"]:checked:before {
background: #000000;
}
.recruit-content-career {
text-align: center;
padding-top: 100px;
background: url(../en-img/recruit_bg_01.jpg);
background-size: cover;
}
.recruit-content-career-img {
width: 95%;
max-width: 1070px;
margin: auto;
}
.recruit-content-career-img img {
width: 100%;
}
.recruit-content-process {
width: 100%;
padding: 0 0 70px 0;
text-align: center;
margin-top: 80px;
}
.recruit-process {
width: 95%;
max-width: 1007px;
margin: 40px auto 0;
}
.recruit-process p {
font-size: 30px;
margin-bottom: 30px;
}
.recruit-process-img img {
width: 100%;
}
.recruit-process-ul {
max-width: 1007px;
display: flex;
justify-content: space-between;
margin-bottom: 70px;
}
.recruit-process-ul li {
text-align: center;
width: 16.3%;
}
.recruit-message-bg {
margin-bottom: 100px;
}
.recruit-message-bg .s-textArea::before {
position: absolute;
content: "";
height: 100%;
width: 60vw;
top: 90px;
right: calc(100% - 50vw);
background-color: #f2f4f7;
z-index: -1;
}
@media screen and (min-width: 768px) {
.recruit-message-bg .s-textArea {
padding: 180px 0 0 70px;
}
.recruit-message-img {
height: 30vw;
max-height: 550px;
min-height: 420px;
}
}
@media screen and (max-width: 768px) {
.recruit-process p {
font-size: 1.2em;
margin-bottom: 30px;
}
.recruit-message-bg .s-textArea::before {
height: 150%;
top: -40%;
width: 90vw;
right: calc(50% - 50vw);
}
.recruit-message-img {
height: 300px;
background-position: 80% center;
}
.recruit-content-career {
padding-top: 50px;
}
.recruit-content-important-title-career {
font-size: 1.2em;
}
.recruit-content-important-title-career::after {
bottom: 0;
z-index: -1;
}
}
@media screen and (max-width: 500px) {
.recruit-message-bg .s-textArea::before {
width: 100vw;
height: 140%;
}
.recruit-content-future-img img {
width: 100%;
}
}
.recruit-message-txt {
font-size: 18px;
line-height: 1.9;
}
.recruit-message-name {
width: 100%;
text-align: right;
font-size: 24px;
margin-top: 50px;
}
.recruit-entry {
padding: 130px 0;
text-align: center;
}
.recruit-entry-title {
width: 100%;
margin-bottom: 70px;
font-size: 30px;
text-align: center;
}
.recruit-table {
max-width: 1280px;
width: 95%;
color: #383838;
margin: auto;
}
.recruit-table-inner {
padding: 20px 40px;
border-bottom: dotted 1px #b2b2b2;
display: flex;
}
.recruit-table-title {
font-size: 16px;
font-weight: bold;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
text-align: left;
padding-left: 30px;
}
.recruit-table-content {
font-size: 16px;
-ms-flex: 0 0 70%;
flex: 0 0 70%;
text-align: left;
}
.recruit-table-content span {
padding-left: 20px;
}
.recruit-table-content a {
color: #005199;
}
.recruit-table-content p {
padding-left: 1.1em;
line-height: 1.5;
}
.recruit-btn {
width: 95%;
text-align: center;
margin: 100px auto;
}
.recruit-btn img {
max-width: 370px;
width: 100%;
margin: auto;
}
.recruit-btn p {
font-size: 26px;
margin-bottom: 70px;
}
.recruit-form-img {
width: 95%;
max-width: 1030px;
margin: 100px auto 0;
display: flex;
justify-content: space-between;
}
.recruit-form-img div {
width: 161px;
}
.recruit-form-img img {
width: 100%;
}
@media screen and (max-width: 1024px) {
.recruit-content-future {
width: 100%;
background: #f2f4f7;
padding: 70px 0;
text-align: center;
font-size: 1.2em;
}
.recruit-content-important img {
width: 100%;
}
.recruit-content-future-organization {
font-size: 1.2em;
}
.recruit-content-important-txt {
padding-left: 10px;
width: 80%;
flex-grow: 1;
}
.recruit-content-important-txt p {
padding-left: 10px;
font-size: 2.6vw;
margin-top: 10px;
line-height: 1.9;
flex-grow: 1;
}
.recruit-content-important-img {
width: 20vw;
}
.recruit-content-important-title {
position: relative;
font-size: 3.7vw;
padding: 0;
text-align: center;
z-index: 1;
}
.recruit-content-important-title::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #ffdd78;
bottom: 5px;
z-index: -1;
}
.recruit-process-ul {
width: 98%;
margin: auto;
}
.recruit-process-sp-container {
width: 95%;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.recruit-process-sp-container-img {
width: 23%;
}
.recruit-process-sp-container-img img {
width: 100%;
}
.recruit-process-sp-container-detail {
width: 77%;
padding-left: 14px;
text-align: left;
font-size: 2.8vw;
}
.recruit-process-ul li {
text-align: center;
width: 20%;
font-size: 2.1vw;
}
.recruit-process-sp-bar {
background: #000;
width: 0.5vw;
height: 5vw;
margin-left: 13.2%;
}
}
@media screen and (max-width: 768px) {
.recruit-mv {
position: relative;
margin-top: 66px;
}
.recform-mv {
position: relative;
margin-top: 66px;
}
.recruit-content-future-organization {
min-height: 75px;
padding-top: 5px;
}
.recruit-message-txt {
font-size: 1em;
line-height: 1.9;
}
.recruit-message-name {
font-size: 1.2em;
margin-top: 20px;
}
.recruit-entry {
padding: 0 0 100px;
text-align: center;
}
.recruit-entry-title {
font-size: 1.4em;
margin-bottom: 20px;
}
.recruit-table-inner {
padding: 20px 5px;
}
.recruit-table-inner {
display: block;
;
}
.recruit-table-title {
font-size: 1.2em;
font-weight: bold;
-ms-flex: 0 0 30%;
flex: 0 0 30%;
text-align: left;
padding-left: 0;
margin-bottom: 10px;
}
.recruit-table-content {
font-size: 1em;
-ms-flex: 0 0 70%;
flex: 0 0 70%;
text-align: left;
}
.recruit-btn img {
width: 250px;
margin: 0 auto;
}
.recruit-btn p {
margin-bottom: 30px;
font-size: 1em;
}
.recruit-form-img {
width: 95%;
max-width: 1030px;
margin: 40px auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.recruit-form-img div {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
padding: 10px;
margin-top: 5vw;
margin-bottom: 5vw;
}
.recruit-form-img img {
text-align: center;
width: 70%;
}
}
.td-dob input[type="text"]:nth-of-type(n + 2) {
margin-left: 25px;
}
.td-jen input[type="radio"]:nth-of-type(n + 2) {
margin-left: 55px !important;
}
.td-jen {
line-height: 0 !important;
}
@media screen and (max-width: 1024px) {
.td-dob {
display: flex !important;
align-items: flex-end;
line-height: 1.5 !important;
}
.td-jen {
display: flex !important;
align-items: normal;
line-height: 1.5 !important;
padding: 11px 0 11px 15px !important;
}
.td-dob input[type="text"]:nth-of-type(n + 2) {
margin-left: 2%;
}
.td-jen input[type="radio"]:nth-of-type(n + 2) {
margin-left: 2% !important;
}
.form-dob {
width: 70px !important;
margin-right: 3px !important;
}
}
/*---------------------------------dx-------------------------------------*/
.dx-catch {
margin-top: 80px;
margin-bottom: 70px;
}
.dx-mv {
background-image: url(../en-img/dx_main.jpg);
background-size: cover;
background-position: center;
}
.dx-content-trouble {
width: 100%;
background: #f2f4f7;
padding: 100px 0 60px;
text-align: center;
}
.dx-content-trouble-title {
margin-bottom: 30px;
font-size: 30px;
letter-spacing: 0.05em;
}
.dx-content-trouble-title-blue {
color: #004b8f;
}
.dx-content-trouble-title span {
color: #2487ef;
}
.dx-content-trouble-title-large {
font-size: 36px;
}
.dx-content-trouble-wrap {
width: 95%;
max-width: 1300px;
margin: auto;
display: flex;
justify-content: space-between;
}
.dx-content-trouble-wrap ul {
width: 47%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dx-content-trouble-wrap li {
padding: 25px;
background: #2487ef;
color: #fff;
border-radius: 15px;
font-size: 17px;
text-align: left;
}
.dx-content-trouble-wrap-img {
width: 100%;
background: #f2f4f7 !important;
color: #fff;
display: flex;
align-items: flex-start;
align-items: flex-start;
justify-content: center;
}
.dx-content-trouble-wrap-img img {
width: 100%;
height: auto;
}
.dx-content-trouble-wrap-arrow {
text-align: center;
width: 100%;
background: url(../en-img/dx_arrow_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto;
font-size: 30px;
min-height: 100px;
padding-top: 50px;
}
.dx-content-solution {
width: 100%;
text-align: center;
padding: 70px 0 100px;
}
.dx-content-solution-wrap {
width: 95%;
max-width: 1280px;
display: flex;
justify-content: space-between;
margin: auto;
}
.dx-content-solution-img {
width: 23%;
padding-left: 60px;
}
.dx-content-solution-img img {
width: 100%;
max-width: 220px;
}
.dx-content-solution-txt {
width: 70%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
letter-spacing: 0.05em;
}
.dx-content-solution-img02 {
width: 40%;
}
.dx-content-solution-img img,
.dx-content-solution-img02 img,
.dx-content-solution-img03 img {
width: 100%;
}
.dx-content-solution-txt02 {
width: 50%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.dx-content-solution-img03 {
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.dx-content-solution-txt03 {
width: 50%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.mtb70 {
margin: 70px auto;
}
.dx-content-cloud-wrap ul {
width: 95%;
max-width: 1320px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.dx-content-cloud-wrap ul li {
width: 46%;
text-align: left;
margin-bottom: 40px;
}
.dx-content-cloud-wrap ul li span {
font-size: 24px;
color: #2487ef;
}
.dx-content-cloud-wrap ul li p {
font-size: 18px;
padding: 0 2rem;
}
.pt50 {
padding: 50px 2rem 0 2rem !important;
}
.speech-bubble {
position: relative;
width: 100%;
padding: 15px 20px;
background-color: #2487ef;
border: 1px solid #2487ef;
border-radius: 15px;
margin: 5px auto 3rem;
font-family: sans-serif;
color: #ffffff;
line-height: 1.5;
font-size: 20px;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 15px solid #2487ef;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
z-index: 1;
}
.speech-bubble::before {
content: '';
position: absolute;
bottom: -17px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 17px solid #2487ef;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 0;
}
@media screen and (min-width: 769px) {
.dx-content-trouble-wrap ul li:not(:first-child) {
margin-top: 20px;
}
}
@media screen and (max-width: 1024px) {
.dx-content-trouble-wrap li {
font-size: 15px;
padding: 15px;
}
}
@media screen and (max-width: 768px) {
.dx-catch {
margin-top: 70px;
margin-bottom: 50px;
}
.dx-content-trouble-title {
font-size: 5vw;
}
.dx-content-trouble-title-large {
font-size: 4vw;
}
.dx-content-trouble-title {
margin-bottom: 30px;
}
.dx-content-trouble-wrap {
width: 100%;
display: block;
}
.dx-content-trouble-wrap ul {
width: 95%;
margin: auto;
}
.dx-content-trouble-wrap ul li {
margin-bottom: 20px;
font-size: 1em;
}
.dx-content-trouble-wrap-arrow {
min-height: 50px;
}
.dx-content-solution-title {
font-size: 4.2vw;
letter-spacing: 0.01em;
}
.dx-content-solution-title span {
font-size: 6vw;
}
.dx-content-solution-img {
width: 100%;
margin: 0 auto 20px auto;
padding-left: 0;
display: flex;
justify-content: center;
}
.dx-content-solution-img img {
width: 30%;
max-width: 640px;
}
.dx-content-solution-wrap {
width: 95%;
max-width: 1280px;
display: flex;
justify-content: center;
flex-direction: column;
margin: auto;
}
.dx-content-solution-txt {
width: 95%;
font-size: 3.8vw;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
}
.dx-content-solution-wrap-sp {
display: flex;
flex-direction: column;
}
.dx-content-solution-img02 {
text-align: center;
width: 78%;
padding-left: 0;
order: 1;
margin: 0 auto 50px;
}
.dx-content-solution-txt02 {
width: 100%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
order: 2;
}
.dx-content-solution-img03 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}
.dx-content-solution-txt03 {
width: 100%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
}
.dx-content-cloud-title {
font-size: 4.3vw;
}
.dx-content-cloud-title span {
font-size: 6vw;
}
.dx-content-cloud-wrap ul li {
width: 100%;
text-align: left;
margin-bottom: 40px;
}
.speech-bubble {
font-size: 1.2em;
}
.dx-content-cloud-wrap ul li p {
font-size: 1em;
padding: 0 1rem;
}
.dx-content-trouble-wrap-img img {
width: 82%;
height: auto;
}
}
.dx-content-flow {
padding: 100px 0;
background: #f2f4f7;
}
.dx-content-flow-inner {
width: 100%;
}
.dx-flow-container {
display: flex;
align-items: stretch;
width: 90%;
margin: 5px auto 0 auto;
min-height: 150px;
justify-content: center;
}
.dx-left-section {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 150px;
}
.dx-image-wrapper {
padding-bottom: 5px;
flex-shrink: 0;
}
.dx-top-image {
width: 100%;
height: auto;
display: block;
}
.dx-left-bar {
width: 3px;
margin: auto;
background-color: black;
flex-grow: 1;
min-height: 25px;
}
.dx-right-content {
flex-grow: 1;
padding: 7px 0 10px 70px;
font-family: sans-serif;
line-height: 1.6;
color: #333;
overflow: auto;
max-width: 1130px;
}
.dx-flow-title {
font-size: 20px;
margin-bottom: 15px;
letter-spacing: 0.01em;
}
.dx-flow-detail {
font-size: 17px;
border-radius: 15px;
padding: 20px 30px;
background: #ffeebd;
letter-spacing: 0.01em;
line-height: 1.9;
}
.right-content p {
margin-bottom: 1em;
}
.dx-flow-content-important-title {
position: relative;
font-size: 30px;
padding: 0 15px;
z-index: 1;
text-align: center;
margin-bottom: 90px;
letter-spacing: 0.05em;
}
.dx-flow-content-important-title::after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 740px;
height: 13px;
background-color: #ffdd78;
bottom: 10px;
z-index: -1;
}
.dx-content-flow-inner-proxy {
margin-top: 70px;
max-width: 1350px;
}
.dx-content-develop {
text-align: center;
margin: 0 auto;
padding: 100px 0;
background: #f2f4f7;
}
@media screen and (max-width: 768px) {
.dx-left-section {
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 80px;
}
.dx-right-content {
padding: 7px 0 30px 10px;
}
.dx-flow-title {
font-size: 3.8vw;
line-height: 1.9;
}
.dx-flow-detail {
font-size: 3.2vw;
padding: 10px 15px;
}
.dx-flow-content-important-title {
font-size: 5vw;
margin-bottom: 30px;
}
.dx-flow-content-important-title::after {
width: 65vw;
height: 8px;
background-color: #ffdd78;
bottom: 5px;
}
}
@media screen and (min-width: 768px) {
.dx-content-develop-txt01 {
width: 62%;
}
.dx-content-develop-img01 {
width: 30%;
}
}
.dx-content-develop-flow {
width: 95%;
max-width: 930px;
margin: auto;
position: relative;
}
.dx-content-develop-flow-accounting {
width: 100%;
}
.dx-content-develop-flow-accounting img {
width: 100%;
}
.dx-content-develop-flow-accounting-title {
position: absolute;
top: 10px;
left: 0;
text-align: left;
}
.dx-content-develop-flow-accounting-title span {
font-size: 30px;
color: #2487ef;
}
.dx-content-develop-flow-accounting-02 {
width: 100%;
}
.dx-content-develop-flow-accounting-02 ul {
width: 100%;
display: flex;
justify-content: space-between;
}
.dx-content-develop-flow-accounting-02 li {
width: 31%;
text-align: left;
}
.dx-content-develop-flow-accounting-02 li img {
width: 100%;
}
.dx-content-develop-system {
width: 95%;
max-width: 1280px;
display: flex;
justify-content: space-between;
}
.dx-content-develop-system-txt {
width: 70%;
font-size: 17px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: flex-start;
letter-spacing: 0.05em;
}
.dx-content-develop-system-img {
width: 25%;
}
.dx-content-develop-system-img img {
width: 100%;
max-width: 220px;
}
.dx-content-develop-img01 {
text-align: center;
}
@media screen and (max-width: 768px) {
.dx-flow-container {
width: 95%;
}
.dx-content-develop-flow-accounting-title {
position: static;
margin-bottom: 20px;
}
.dx-content-develop-flow-accounting-title span {
font-size: 1.4em;
color: #2487ef;
}
.dx-content-develop-flow-accounting-02 li {
font-size: 0.8em;
}
.dx-content-develop-system-txt {
font-size: 3.8vw;
line-height: 1.9;
}
.dx-content-develop-img01 {
width: 67%;
margin: 0 auto 80px auto;
}
.dx-content-develop-system {
width: 100%;
max-width: 1280px;
margin: auto;
display: flex;
justify-content: center;
flex-direction: column-reverse;
}
.dx-content-develop-system-img {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 20px;
}
.dx-content-develop-system-img img {
width: 30%;
max-width: 640px;
}
.dx-content-develop-system-txt {
width: 100%;
}
}
/*---------------------------------management-plan-------------------------------------*/
.management-mv {
background-image: url(../en-img/management_main.jpg);
background-size: cover;
background-position: center;
}
.management-content-aim-wrap {
max-width: 1200px;
margin-bottom: 50px;
}
.management-content-bg {
width: 100%;
background: #f2f4f7;
padding: 100px 0;
text-align: center;
}
.management-content-explanation-txt {
width: 70%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.management-content-explanation-img img {
width: 100%;
}
.management-content-growth {
width: 95%;
max-width: 1280px;
display: flex;
justify-content: space-between;
}
.management-content-growth-img {
width: 25%;
}
.management-content-growth-img img {
width: 100%;
max-width: 220px;
}
.management-content-growth-txt {
width: 70%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
@media screen and (max-width: 768px) {
.management-content-explanation-img {
width: 25%;
padding-left: 0;
}
.management-content-explanation-txt {
width: 70%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
}
.management-content-growth-txt {
font-size: 1em;
line-height: 1.8;
}
}
.management-content-need-title {
margin-bottom: 70px;
font-size: 30px;
}
.management-content-need-title span {
color: #2487ef;
}
.management-content-need-title-large {
font-size: 36px;
}
.management-content-need-wrap {
width: 95%;
max-width: 1340px;
margin: auto;
display: flex;
justify-content: space-between;
}
.management-content-need-wrap ul {
width: 47%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.management-content-need-wrap li {
padding: 25px;
background: #2487ef;
color: #fff;
border-radius: 15px;
font-size: 17px;
text-align: left;
}
.management-content-need-wrap-img {
width: 100%;
background: #f2f4f7 !important;
color: #fff;
display: flex;
align-items: flex-start;
align-items: flex-start;
justify-content: center;
}
.management-content-need-wrap-img img {
width: 80%;
height: auto;
}
.management-content-need-wrap-arrow {
text-align: center;
width: 100%;
background: url(../en-img/dx_arrow_bg01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: auto;
font-size: 30px;
min-height: 100px;
padding-top: 50px;
}
.management-content-need-point {
width: 100%;
max-width: 1300px;
margin: auto;
}
.management-content-need-point ul {
display: flex;
justify-content: space-between;
width: 95%;
margin: auto;
}
.management-content-need-point ul li {
width: 31%;
background: #fff;
border-radius: 10px;
}
.management-content-need-point-title {
width: 100%;
font-size: clamp(12px, 1.8vw, 24px);
text-align: center;
background: #2487ef;
color: #fff;
padding-top: 15px;
padding-bottom: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.management-content-need-point-img {
width: 100%;
margin: 20px auto 0;
display: flex;
justify-content: center;
}
.management-content-need-point-img img {
width: 136px;
}
.management-content-need-point-txt {
padding: 25px;
text-align: left;
font-size: 16px;
line-height: 1.9;
}
.management-content-zero {
width: 100%;
max-width: 1300px;
text-align: center;
font-size: 24px;
margin: 90px auto;
}
.management-content-zero img {
margin-top: 70px;
width: 100%;
max-width: 1248px;
}
.management-content-features-title-large {
color: #004b8f !important;
}
.management-content-features-point {
width: 95%;
max-width: 1340px;
margin: auto;
}
.management-content-features-point ul {
display: flex;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;
}
.management-content-features-point ul li {
width: 46%;
background: #fff;
border-radius: 15px;
margin-bottom: 55px;
}
.management-content-features-point-inner {
display: flex;
}
.management-content-features-point-title {
width: 100%;
font-size: clamp(12px, 2vw, 24px);
text-align: center;
background: #004b8f;
color: #fff;
padding-top: 15px;
padding-bottom: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.management-content-features-point-img {
width: 30%;
margin: 20px auto 0;
text-align: center;
padding-left: 10px;
}
.management-content-features-point-img img {
width: 100%;
max-width: 144px;
margin: auto;
margin-bottom: 20px;
}
.management-content-features-point-txt {
width: 70%;
padding: 25px;
text-align: left;
font-size: 16px;
line-height: 1.9;
}
.management-content-features-plan {
display: flex;
justify-content: space-between;
width: 95%;
max-width: 1340px;
margin: 45px auto 0 auto;
}
.management-content-schedule-list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.management-content-schedule-list li {
position: relative;
padding: 10px 0 0 0;
}
.management-content-schedule,
.management-content-output {
width: 47%;
}
.management-content-schedule-step {
position: absolute;
top: -10px;
width: 68px;
height: 68px;
border-radius: 50%;
background: #ffeebd;
text-align: center;
line-height: 0.5;
font-size: 18px;
padding-top: 19px;
}
.management-content-schedule-step span {
font-size: 24px;
}
.management-content-schedule-inner {
display: flex;
justify-content: space-between;
background: #ffffff;
padding: 18px;
border-radius: 20px;
font-size: clamp(12px, 1.5vw, 20px);
}
.management-content-schedule-txt {
padding-left: clamp(10px, 7vw, 100px);
text-align: left;
}
.management-content-schedule-item:not(:last-child)::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 30px solid #ffdd78;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
margin: 15px auto 0;
}
.management-content-output ul {
padding-top: 10px;
}
.management-content-output ul li {
width: 100%;
color: #ffffff;
font-size: clamp(12px, 1.5vw, 20px);
text-align: center;
background: #004b8f;
padding: 18px 0;
border-radius: 20px;
margin-bottom: 30px;
}
.management-content-output {
width: 47%;
}
.management-content-base {
width: 100%;
text-align: center;
padding: 70px 0 0;
}
.management-content-base-wrap {
width: 95%;
max-width: 1280px;
display: flex;
justify-content: space-between;
margin: auto;
}
.management-content-base-img {
width: 23%;
padding-left: 60px;
}
.management-content-base-img img {
width: 100%;
max-width: 220px;
}
.management-content-base-txt {
width: 70%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.management-content-base-img02 {
width: 40%;
}
.management-content-base-img img,
.management-content-base-img02 img,
.management-content-base-img03 img {
width: 100%;
}
.management-content-base-txt02 {
width: 50%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.management-content-base-img03 {
width: 40%;
display: flex;
justify-content: center;
align-items: center;
}
.management-content-base-txt03 {
width: 50%;
font-size: 18px;
line-height: 1.9;
text-align: left;
display: flex;
align-items: center;
}
.management-content-important-title {
position: relative;
font-size: 30px;
padding: 0 15px;
z-index: 1;
text-align: center;
margin-bottom: 60px;
}
.management-content-important-title::after {
content: '';
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 340px;
height: 13px;
background-color: #ffdd78;
bottom: 10px;
z-index: -1;
}
.management-recruit-btn {
width: 95%;
text-align: center;
margin: 150px auto 250px;
}
@media screen and (min-width: 769px) {
.management-content-need-wrap ul li:not(:first-child) {
margin-top: 0;
}
}
@media screen and (max-width: 1024px) {
.management-content-need-wrap li {
font-size: 15px;
padding: 15px;
}
}
@media screen and (max-width: 768px) {
.management-catch {
margin-top: 70px;
margin-bottom: 50px;
}
.management-content-need-title {
font-size: 3.3vw;
}
.management-content-need-title-large {
font-size: 4vw;
}
.management-content-need-title {
margin-bottom: 30px;
}
.management-content-need-wrap {
width: 100%;
display: block;
}
.management-content-need-wrap ul {
width: 95%;
margin: auto;
}
.management-content-need-wrap ul li {
margin-bottom: 20px;
font-size: 1em;
}
.management-content-need-wrap-arrow {
min-height: 50px;
}
.management-content-base-title {
font-size: 4.2vw;
}
.management-content-base-title span {
font-size: 6vw;
}
.management-content-base-img {
width: 25%;
padding-left: 0;
}
.management-content-base-txt {
width: 70%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
}
.management-content-base-wrap-sp {
display: flex;
flex-direction: column;
}
.management-content-base-img02 {
text-align: center;
width: 78%;
padding-left: 0;
order: 1;
margin: 0 auto 50px;
}
.management-content-base-txt02 {
width: 100%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
order: 2;
}
.management-content-base-img03 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}
.management-content-base-txt03 {
width: 100%;
font-size: 1em;
line-height: 1.8;
text-align: left;
display: flex;
align-items: center;
}
.management-content-zero img {
width: 80%;
max-width: 1248px;
}
.management-content-need-wrap-img img {
width: 82%;
height: auto;
}
.management-content-need-point ul {
display: flex;
flex-direction: column;
justify-content: center;
width: 95%;
margin: auto;
}
.management-content-need-point ul li {
width: 100%;
margin-bottom: 30px;
}
.management-content-need-sp-flex {
display: flex;
}
.management-content-need-point-title {
width: 100%;
font-size: 1.2em;
}
.management-content-need-point-img {
width: 30%;
margin: 0;
}
.management-content-need-point-img img {
width: 80%;
max-width: 100px;
margin: auto;
}
.management-content-need-point-txt {
width: 70%;
padding: 25px 25px 25px 0;
text-align: left;
font-size: 1em;
line-height: 1.9;
}
.management-content-zero {
width: 95%;
max-width: 1300px;
text-align: center;
font-size: 1.2em;
margin: 90px auto;
}
.management-content-features-point ul {
display: flex;
flex-direction: column;
justify-content: center;
width: 95%;
margin: auto;
}
.management-content-features-point ul li {
width: 100%;
margin-bottom: 30px;
}
.management-content-features-point-title {
font-size: 1.2em;
}
.management-content-features-point-txt {
font-size: 1em;
line-height: 1.9;
padding: 25px 25px 25px 0;
width: 70%;
}
.management-content-features-point-img {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
width: 30%;
}
.management-content-features-point-img img {
width: 80%;
max-width: 100px;
margin: auto;
}
.management-content-features-plan {
display: flex;
flex-direction: column;
justify-content: center;
width: 95%;
margin: auto;
}
.management-content-schedule,
.management-content-output {
width: 100%;
}
.management-content-schedule-step {
position: absolute;
top: -10px;
width: 55px;
height: 55px;
border-radius: 50%;
background: #ffeebd;
text-align: center;
line-height: 0.5em;
font-size: 1em;
padding-top: 13px;
}
.management-content-schedule-list li {
padding: 0;
}
.management-content-schedule-inner {
display: flex;
padding: 15px 10px;
border-radius: 10px;
font-size: clamp(0.5em, 3.5vw, 1em);
}
.management-content-schedule-txt {
padding-left: 60px;
}
.management-content-schedule-item:not(:last-child)::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 30px solid #ffdd78;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
margin: 15px auto 10px;
}
.management-content-output ul li {
font-size: 1em;
margin-bottom: 20px;
padding: 18px 10px;
}
.management-content-important-title {
font-size: 4vw;
margin-top: 100px;
}
.management-content-important-title::after {
width: 40vw;
height: 8px;
background-color: #ffdd78;
bottom: 5px;
}
}
.management-left-section {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex-shrink: 0;
width: 150px;
}
.management-image-wrapper {
padding-bottom: 5px;
flex-shrink: 0;
}
.management-top-image {
width: 100%;
height: auto;
display: block;
}
.management-left-bar {
width: 3px;
margin: auto;
background-color: black;
flex-grow: 1;
min-height: 25px;
}
.management-right-content {
flex-grow: 1;
padding: 7px 0 0 70px;
background-color: #ffffff;
font-family: sans-serif;
line-height: 1.6;
color: #333;
overflow: auto;
max-width: 1130px;
}
.management-content-develop {
text-align: center;
margin: 0 auto;
padding: 100px 0;
background: #f2f4f7;
}
@media screen and (max-width: 768px) {
.management-left-section {
display: flex;
flex-direction: column;
background-color: #ffffff;
flex-shrink: 0;
width: 80px;
}
.management-right-content {
padding: 7px 0 0 10px;
}
}
.management-system-mv {
background-image: url(../en-img/management_system_main.jpg);
background-size: cover;
background-position: center;
}
.management-system-need-wrap {
width: 95%;
max-width: 1280px;
text-align: center;
margin: 10px auto 80px;
}
.management-system-need-wrap ul {
width: 100%;
margin: 80px auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.management-system-need-wrap ul li {
width: 48%;
margin-bottom: 40px;
background: #ffffff;
border-radius: 15px;
padding: 15px;
}
.management-system-need-wrap ul li:nth-child(5),
.management-system-need-wrap ul li:nth-child(6) {
margin-bottom: 0;
}
.management-system-need-inner {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
.management-system-need-inner div {
margin: 15px;
font-size: 24px;
}
.management-system-need-wrap p {
margin: 15px 0 25px 15px;
font-size: 16px;
text-align: left;
}
.management-system-need-subtitle {
padding: 6px 0 4px;
line-height: 1;
background: #d8dadb;
border-radius: 20px;
max-width: 280px;
font-size: 16px;
}
.management-system-need-subtitle-blue {
padding: 6px 0 4px;
line-height: 1;
background: #2487ef;
border-radius: 20px;
max-width: 280px;
font-size: 16px;
color: #ffffff;
}
.management-system-need-img {
background: none !important;
display: flex;
justify-content: center;
align-items: center;
}
.management-system-need-img img {
width: 100%;
max-width: 292px;
}
.management-system-content-assignment-ul li {
margin-top: 20px !important;
}
.management-system-content-assignment-ul-2 {
justify-content: flex-end !important;
}
.management-system-content-assignment-ul-2 li {
margin-top: 20px !important;
}
@media screen and (max-width: 768px) {
.management-system-need-wrap ul li {
width: 100%;
margin-bottom: 20px;
}
.management-system-need-inner div {
width: 50%;
font-size: 1.1em;
margin: 15px 0;
}
.management-system-need-inner img {
width: 100%;
}
.management-system-need-wrap ul {
margin: 20px auto 0;
}
.management-system-need-wrap p {
font-size: 1em;
}
.management-system-need-subtitle {
font-size: 1em;
max-width: 240px;
}
.management-system-need-subtitle-blue {
font-size: 1em;
max-width: 240px;
}
.management-system-need-img-right {
width: 30% !important;
display: flex;
justify-content: flex-end;
}
.management-system-need-img img {
width: 100%;
max-width: 242px;
margin-top: 30px;
}
.management-system-content-assignment-ul li {
margin-top: 0 !important;
}
.management-system-content-assignment-ul-2 li {
margin-top: 0 !important;
}
}
/*---------------------------------management-plan-------------------------------------*/
.funding-mv {
background-image: url(../en-img/funding_main.jpg);
background-size: cover;
background-position: center;
}
.funding-content-need-inner {
width: 95%;
max-width: 1340px;
padding: 0 20px;
margin: auto;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.funding-content-need-inner li {
position: relative;
width: 48%;
min-height: 300px;
background: #ffffff;
margin-bottom: 40px;
border-radius: 15px;
padding: 20px;
line-height: 2.2;
text-align: left;
}
.funding-content-need-number {
position: absolute;
top: 0;
left: 25px;
width: 50px;
height: 68px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background: #2487ef;
color: #ffffff;
font-size: 24px;
padding-left: 2px;
}
.funding-content-need-img {
width: 256px;
margin: 20px auto;
text-align: center;
}
.funding-content-need-img img {
width: 100%;
text-align: center;
}
.funding-content-anxiety {
width: 100%;
max-width: 1300px;
text-align: center;
font-size: 24px;
margin: 50px auto;
}
.funding-content-need-title {
width: 90%;
max-width: 600px;
margin: 0 auto 70px;
}
.funding-content-support-disc {
width: 95%;
max-width: 980px;
display: flex;
justify-content: space-between;
}
.funding-content-support-inner {
width: 95%;
max-width: 1240px;
padding: 0 20px;
margin: 0 auto 50px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.funding-content-support-inner li {
position: relative;
width: 29%;
min-height: 300px;
line-height: 2.2;
text-align: left;
}
.funding-content-support-title {
width: 100%;
text-align: center;
margin: 20px auto;
font-size: 24px;
font-weight: bold;
color: #2487ef;
}
.funding-content-support-img {
width: 105px;
margin: 20px auto;
text-align: center;
}
.funding-content-pickup-inner {
width: 95%;
max-width: 1340px;
margin: auto;
padding: 0 20px;
}
.funding-content-pickup-inner li {
width: 100%;
background: #fff;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 30px;
border-radius: 15px;
margin-bottom: 40px;
}
.funding-content-pickup-title {
width: 250px;
height: 110px;
font-size: 24px;
font-weight: bold;
text-align: center;
background: #004b8f;
color: #ffffff;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
.funding-content-pickup-img {
width: 190px;
text-align: center;
flex-shrink: 0;
padding: 8px 0 0;
}
.funding-content-pickup-img img {
width: 120px;
display: inline;
}
.funding-content-pickup-txt {
width: auto;
text-align: left;
line-height: 2.2;
display: flex;
align-items: flex-start;
}
.funding-content-schedule-title {
width: 100%;
display: flex;
justify-content: space-between;
}
.funding-content-support-flex {
display: flex;
flex-wrap: nowrap;
font-size: 24px;
justify-content: center;
/* PC: 全体を水平方向の中央に */
align-items: center;
/* PC: 垂直方向の中央に（行が揃うように） */
}
.funding-content-support-flex-span {
color: #2487ef;
font-size: 36px;
}
/* PC時の全体装飾 */
.funding-content-support-flex::before {
content: "＼ ";
color: #2487ef;
font-size: 36px;
}
.funding-content-support-flex::after {
content: " ／";
color: #2487ef;
font-size: 36px;
}
/* --- スマートフォン表示時 (ブレイクポイント 768px以下の場合) --- */
@media (max-width: 1010px) {
.funding-content-support-flex {
/* 1. 縦並びにして2行にする */
flex-direction: column;
/* 2. 縦並びにした結果、行全体を中央揃えにする */
align-items: center;
font-size: 3.3vw;
}
/* PC時の全体装飾を非表示 */
.funding-content-support-flex::before,
.funding-content-support-flex::after {
content: none;
}
/* SP時の1行目の装飾 */
.funding-content-support-flex .line-1::before {
content: "＼ ";
color: #2487ef;
transform: scaleY(1.8) translateY(6px);
display: inline-block;
margin-right: 10px;
}
.funding-content-support-flex .line-1::after {
content: " ／";
color: #2487ef;
transform: scaleY(1.8) translateY(6px);
display: inline-block;
margin-left: 10px;
}
.funding-content-support-flex-span {
color: #2487ef;
font-size: 4vw;
}
}
@media screen and (max-width: 768px) {
.funding-content-need-inner li {
position: relative;
width: 100%;
min-height: 300px;
background: #ffffff;
margin-bottom: 40px;
border-radius: 15px;
padding: 20px;
line-height: 2.2;
text-align: left;
}
.funding-content-need-number {
position: absolute;
top: 0;
left: 15px;
width: 40px;
height: 58px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background: #2487ef;
color: #ffffff;
font-size: 20px;
padding-left: 2px;
}
.funding-content-need-inner {
width: 100%;
}
.funding-content-need-img {
width: 256px;
margin: 20px auto;
text-align: center;
display: flex;
justify-content: center;
}
.funding-content-need-img img {
width: 70%;
text-align: center;
}
.funding-content-anxiety img {
width: 90%;
text-align: center;
}
.funding-content-need-title img {
width: 90%;
margin: auto;
}
.funding-content-anxiety {
margin: 50px auto 0;
}
.funding-content-support-inner {
padding: 0;
}
.funding-content-support-inner li {
position: relative;
width: 100%;
min-height: 300px;
line-height: 2.2;
text-align: left;
margin-bottom: 30px;
}
.funding-content-support-title {
font-size: 4vw;
display: flex;
justify-content: center;
align-items: center;
}
.funding-content-support-title img {
width: 70%;
max-width: 70px;
margin-right: 10px;
}
.mt-10px {
margin-top: -10px;
}
.funding-content-pickup-inner li {
width: 100%;
background: #fff;
display: block;
justify-content: center;
align-items: center;
padding: 20px;
border-radius: 15px;
margin-bottom: 40px;
}
.funding-content-pickup-title {
width: 40vw;
max-width: 300px;
font-size: 3.5vw;
height: auto;
}
.funding-content-pickup-inner {
padding: 0;
}
.funding-content-pickup-img {
width: auto;
text-align: center;
flex-shrink: 0;
padding: 8px 0 0 20px;
}
.funding-content-pickup-img img {
width: 20vw;
display: inline;
}
.funding-content-pickup-inner .d-f {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.funding-content-schedule-wrap {
padding-bottom: 0;
}
.sp6vw {
font-size: 6vw;
}
}
/*---------------------------------en-service-------------------------------------*/
.en-content-service-trouble-detail {
width: 95%;
max-width: 720px;
margin: 0 auto 40px auto;
font-size: 22px;
letter-spacing: 0.01em;
text-align: center;
}
.en-content-service-trouble-detail02 {
width: 95%;
margin: 60px auto 0 auto;
font-size: 22px;
letter-spacing: 0.05em;
text-align: center;
line-height: 1.9;
}
.en-content-service-trouble-img {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
margin-top: 70px;
}
.en-content-service-trouble-list {
display: flex;
flex-direction: column;
min-height: 300px;
width: 1213px;
margin: auto;
}
.en-content-service-trouble-list01,
.en-content-service-trouble-list02,
.en-content-service-trouble-list03 {
width: 100%;
}
.en-content-service-trouble-list01 {
height: 81px;
background: url(../en-img/en-service-bg01.png);
background-repeat: no-repeat;
background-size: auto;
}
.en-content-service-trouble-list02 {
flex: 1;
background: url(../en-img/en-service-bg02.png);
background-repeat: no-repeat;
background-size: auto;
background-repeat: repeat-y;
background-position: center top;
padding: 0 50px;
box-sizing: border-box;
}
.en-content-service-trouble-list03 {
height: 57px;
background: url(../en-img/en-service-bg03.png);
background-repeat: no-repeat;
background-size: auto;
}
.en-content-service-trouble-list02 ul li {
position: relative;
text-align: left;
padding-left: 40px;
line-height: 1.9;
display: flex;
align-items: flex-start;
letter-spacing: 0.05em;
padding-bottom: 20px;
}
.en-content-service-trouble-list02 ul li::before {
content: "";
display: inline-block;
position: absolute;
top: 8px;
left: 0;
width: 27px;
height: 27px;
background-image: url('../en-img/en-service-symbol.png');
background-size: contain;
margin-right: 8px;
vertical-align: middle;
}
.en-content-service-trouble-list02 ul li:last-child {
padding-bottom: 0;
}
.en-content-service-cloud {
width: 95%;
max-width: 1250px;
margin: 50px auto;
display: flex;
justify-content: space-between;
}
.en-content-service-cloud img {
width: 100%;
}
.en-content-service-inner {
width: 95%;
max-width: 1350px;
padding: 0 40px;
text-align: left;
line-height: 1.9;
margin: auto;
font-size: 17px;
letter-spacing: 0.05em;
}
.en-content-service-inner ul li {
display: flex;
padding-bottom: 20px;
}
.en-content-service-inner ul li div {
color: #2487ef !important;
letter-spacing: 0.05em !important;
}
.en-content-service-flow-txt {
width: 95%;
max-width: 1250px;
text-align: left;
line-height: 1.9;
margin: auto;
font-size: 17px;
letter-spacing: 0.01em;
}
.en-content-features-wrap {
width: 100%;
max-width: 1350px;
text-align: center;
padding: 100px 0 0;
margin: auto;
}
.en-content-features-title {
width: 95%;
max-width: 1280px;
height: 75px;
display: flex;
background: #004b8f;
color: #fff;
text-align: left;
padding: 20px 30px;
font-size: 22px;
letter-spacing: 0.01em;
margin: auto;
}
.en-content-features-title div {
color: #fff;
letter-spacing: 0.01em;
}
.en-content-features-list02 {
width: 95%;
max-width: 1280px;
margin: 30px auto 0;
display: flex;
align-items: center;
}
.en-content-features-list02-img {
width: 165px;
display: flex;
justify-content: center;
flex-shrink: 0;
}
.en-content-features-list02-img img {
height: 110px;
width: 130px;
}
.en-content-features-wrap > ul > li {
margin: 0 auto 40px;
}
.en-content-features-list02 ul li {
position: relative;
text-align: left;
padding-left: 1.5em;
line-height: 1.9;
display: block;
font-size: 17px;
letter-spacing: 0.01em;
}
.en-content-features-list02 ul li:last-child {
padding-bottom: 0;
}
.en-content-features-list02 ul li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
font-weight: bold;
}
.mr20 {
margin-right: 20px;
}
@media screen and (max-width: 1210px) {
.en-content-service-trouble-list {
width: 100%;
margin: auto;
}
.en-content-service-trouble-list01 {
width: 100%;
height: auto;
aspect-ratio: 1000 / 69;
background-size: contain;
margin-bottom: -5px;
}
.en-content-service-trouble-list02 {
width: 100%;
padding: 0 20px;
background-size: 100% auto;
}
.en-content-service-trouble-list03 {
width: 100%;
height: auto;
aspect-ratio: 1000 / 69;
background-size: contain;
}
.en-content-service-trouble-list02 ul li::before {
content: "";
display: inline-block;
position: absolute;
top: 6px;
left: 0;
width: 20px;
height: 20px;
background-image: url(../en-img/en-service-symbol.png);
background-size: contain;
margin-right: 8px;
vertical-align: middle;
}
.en-content-features-title {
height: auto;
}
}
@media screen and (max-width: 768px) {
.en-content-service-trouble-detail {
font-size: 3.8vw;
}
.en-content-service-trouble-img img {
width: 90%;
}
.en-content-service-trouble-list {
width: 100%;
margin: auto;
}
.en-content-service-trouble-list01 {
width: 100%;
height: auto;
aspect-ratio: 1000 / 69;
background-size: contain;
margin-bottom: -2px;
}
.en-content-service-trouble-list02 {
width: 100%;
padding: 0 20px;
background-size: 100% auto;
}
.en-content-service-trouble-list03 {
width: 100%;
height: auto;
aspect-ratio: 1000 / 69;
background-size: contain;
}
.en-content-service-trouble-list02 ul li::before {
content: "";
display: inline-block;
position: absolute;
top: 6px;
left: 0;
width: 20px;
height: 20px;
background-image: url(../en-img/en-service-symbol.png);
background-size: contain;
margin-right: 8px;
vertical-align: middle;
}
.en-content-service-trouble-detail02 {
font-size: 3.8vw;
}
.en-content-service-cloud {
width: 95%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.en-content-service-cloud div {
margin: 10px 0;
}
.en-content-service-cloud img {
width: 90%;
margin: auto;
}
.en-content-service-inner {
padding: 0;
text-align: left;
line-height: 1.9;
margin: auto;
font-size: 3.8vw;
letter-spacing: 0.05em;
}
.en-content-service-inner ul li div {
line-height: 1.9;
}
.en-content-service-flow-txt {
width: 100%;
}
.dx-flow-content-important-title {
display: inline;
background: linear-gradient(transparent 60%, #ffdd78 60%);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
position: relative;
font-size: 5vw;
padding: 0 10px;
z-index: 1;
text-align: center;
letter-spacing: 0.05em;
}
.dx-flow-content-important-title::after {
display: none;
}
.parent-container {
text-align: center;
margin-bottom: 30px;
}
.en-content-service-flow-txt {
font-size: 3.8vw;
}
.en-content-features-title {
height: auto;
display: flex;
background: #004b8f;
color: #fff;
text-align: left;
padding: 10px;
font-size: 4vw;
letter-spacing: 0.01em;
margin: auto;
}
.en-content-features-list02 {
display: flex;
align-items: center;
flex-direction: column;
}
.en-content-features-list02-img {
width: 165px;
display: flex;
justify-content: center;
flex-shrink: 0;
margin-bottom: 20px;
}
.en-content-features-list02 ul li {
position: relative;
text-align: left;
padding-left: 3.8vw;
line-height: 1.9;
display: block;
font-size: 3.2vw;
letter-spacing: 0.01em;
}
.en-content-features-list02-img img {
height: auto;
width: 23vw;
}
.mr20 {
margin-right: 3vw;
}
}