@charset "UTF-8";
 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,
em,
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 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-size: 100%;
font: inherit;
vertical-align: baseline;
} article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:aftera {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} .clearfix:after {
content: "";
display: block;
clear: both;
} a {
color: #3399cc;
text-decoration: none;
}
a:focus {
outline: none;
}
a:hover {
color: #4795ee;
}
@media screen and (min-width: 576px) {
.alignleft {
float: left;
margin: 0 20px 20px 0;
}
}
@media screen and (min-width: 576px) {
.alignright {
float: right;
margin: 0 0 20px 20px;
}
}
@media screen and (min-width: 576px) {
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
}
}
@media screen and (min-width: 960px) {
.br-sp {
display: none;
}
}
.br-pc {
display: none;
}
@media screen and (min-width: 960px) {
.br-pc {
display: block;
}
}
.sp-l {
text-align: left;
}
@media screen and (min-width: 960px) {
.sp-l {
text-align: center;
}
}
body:not(.home) {
overflow-x: hidden;
}
@media print {
body {
overflow: visible !important;
}
}
body {
font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
color: #222;
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
img {
height: auto;
}
#header-box {
z-index: 10;
width: 100%;
position: fixed;
transition: 0.3s;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
@media print {
#header-box {
position: relative;
}
}
#header-box #header-news {
text-align: center;
padding: 5px;
}
#header-box #header-news a {
transition: color 0.3s;
}
#header-box #header-news a:hover {
border-bottom: solid 2px black;
}
#header-box header {
margin: 0 auto;
transition: 0.3s;
display: flex;
position: relative;
width: 1200px;
max-width: 94%;
}
#site-title {
margin: 10px auto 10px 0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
#site-title a {
display: block;
padding: 10px 0;
}
@media screen and (min-width: 960px) {
#site-title a {
padding: 0;
}
}
#site-title img {
height: auto;
transition: 0.3s;
vertical-align: bottom;
width: 170px;
}
@media screen and (min-width: 576px) {
#site-title img {
width: 200px;
}
}
@media screen and (min-width: 960px) {
#site-title img {
padding-top: 4px;
}
}
@media screen and (min-width: 1500px) {
#site-title img {
padding-top: 0;
width: 264px;
}
}
#wrapper {
margin: 0 auto;
background: #fff;
}
@media screen and (min-width: 768px) {
section {
min-height: 500px;
}
}
section hr {
height: 0;
margin: 0;
padding: 0;
border: 0;
border-top: 1px solid #bbb;
}
section p,
section li,
section th,
section td {
line-height: 1.6;
margin: 15px auto;
font-size: 14px;
}
@media screen and (min-width: 576px) {
section p,
section li,
section th,
section td {
line-height: 1.5;
font-size: 15px;
}
}
@media screen and (min-width: 768px) {
section p,
section li,
section th,
section td {
line-height: 1.5;
font-size: 18px;
}
}
section img {
max-width: 100%;
height: auto;
}
section iframe {
max-width: 100%;
}
#footer-container {
background: #ccc;
}
#footer-container footer {
margin: 0 auto;
padding: 40px 0;
width: 1200px;
max-width: 94%;
display: flex;
flex-wrap: wrap;
}
@media screen and (min-width: 576px) {
#footer-container footer {
justify-content: space-between;
}
}
#footer-container footer .footer-inner {
padding: 0 12px;
box-sizing: border-box;
margin-bottom: 40px;
width: calc(50% - 1px);
}
#footer-container footer .footer-inner:nth-child(odd) {
border-right: solid 1px #fff;
}
@media screen and (min-width: 960px) {
#footer-container footer .footer-inner {
padding: 0 24px;
margin-bottom: 0;
border-right: solid 1px #fff;
width: calc(25% - 1px);
}
}
#footer-container footer a {
color: #fff;
transition: 0.3s;
}
#footer-container footer a:hover {
color: #333;
}
#footer-container footer p {
color: #fff;
margin: 0 auto;
font-weight: bold;
}
#footer-container footer p + p {
margin-top: 24px;
}
#footer-container footer,
#footer-container footer p,
#footer-container footer a {
font-size: 13px;
}
@media screen and (min-width: 576px) {
#footer-container footer,
#footer-container footer p,
#footer-container footer a {
font-size: 14px;
}
}
@media screen and (min-width: 1200px) {
#footer-container footer,
#footer-container footer p,
#footer-container footer a {
font-size: 16px;
}
}
#footer-container footer .footer-menu + .footer-menu {
margin-top: 16px;
}
#footer-container footer .footer-menu li a::before {
content: "+";
margin-right: 5px;
}
#copyright {
background: #00489d;
color: #fff;
text-align: center;
font-size: 11px;
padding: 25px 5%;
box-sizing: border-box;
}
@media screen and (min-width: 960px) {
#copyright {
font-size: 16px;
}
}
.page-title {
text-align: center;
font-size: 22px;
padding: 0;
margin: 0 auto 20px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.page-title {
font-size: 34px;
}
}
@media screen and (min-width: 1200px) {
.page-title {
font-size: 50px;
}
}
.page-title .subtitle {
font-size: 15px;
display: block;
margin-top: -10px;
}
@media screen and (min-width: 576px) {
.page-title .subtitle {
font-size: 20px;
}
}
article:not(:last-child) {
margin-bottom: 80px;
}
article h3,
article h4,
article h5,
article h6 {
margin: 40px 0;
}
article h3 {
font-size: 4.5vw;
margin: 32px 0;
}
@media screen and (min-width: 576px) {
article h3 {
font-size: 3.333vw;
}
}
@media screen and (min-width: 960px) {
article h3 {
font-size: 32px;
}
}
article h4 {
font-size: 14px;
}
@media screen and (min-width: 576px) {
article h4 {
font-size: 20px;
}
}
article h5 {
font-size: 16px;
}
@media screen and (min-width: 576px) {
article h5 {
font-size: 16px;
}
}
article h3.mt-l,
article h4.mt-l,
article h5.mt-l,
article h6.mt-l {
margin-top: 80px;
}
article table {
width: 100%;
max-width: 100%;
margin: 32px auto;
}
article table th,
article table td {
vertical-align: middle;
border: solid 1px #ddd;
padding: 10px;
font-size: 14px;
box-sizing: border-box;
}
article table th p,
article table td p {
font-size: 12px;
}
@media screen and (min-width: 576px) {
article table th,
article table td {
font-size: 12px;
}
article table th p,
article table td p {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
article table th,
article table td {
min-width: 100px;
font-size: 16px;
}
article table th p,
article table td p {
font-size: 16px;
}
}
article table th {
font-weight: bold;
vertical-align: middle;
}
article table td {
text-align: left;
}
article table thead {
background: rgb(0, 120, 197);
background: linear-gradient(to right, rgb(58, 134, 125) 0%, rgb(0, 120, 197) 100%) no-repeat fixed;
color: #fff;
}
article table.table-single th,
article table.table-single td, article table.table-normal th,
article table.table-normal td {
display: block;
}
@media screen and (min-width: 576px) {
article table.table-single th,
article table.table-single td, article table.table-normal th,
article table.table-normal td {
display: table-cell;
}
}
article table.table-single th,
article table.table-single tr:not(:last-child) td, article table.table-normal th,
article table.table-normal tr:not(:last-child) td {
border-bottom: none;
}
@media screen and (min-width: 576px) {
article table.table-single th,
article table.table-single tr:not(:last-child) td, article table.table-normal th,
article table.table-normal tr:not(:last-child) td {
border: solid 1px #ddd;
}
}
article table.table-normal th {
text-align: center;
}
article table.table-normal td {
background: #fff;
}
article table.table-company {
max-width: 960px;
border: none;
}
article table.table-company th,
article table.table-company td {
border-right: none;
border-left: none;
}
article table.table-company td:first-of-type {
text-align: center;
width: 120px;
}
article ul li,
article ol li {
list-style: outside disc;
text-indent: -1em;
padding-left: 1em;
margin: 10px 0;
margin-left: 1em;
}
article ol li {
list-style: inside decimal;
}
#news-category-list {
display: flex;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
}
#news-category-list li {
margin: 0;
}
#news-category-list li a {
border: solid 1px #999999;
margin: 10px 5px;
padding: 2px 10px;
box-sizing: border-box;
color: #999999;
display: block;
text-align: center;
transition: 0.3s;
}
@media screen and (min-width: 768px) {
#news-category-list li a {
margin: 16px 10px;
width: 160px;
margin: 16px;
padding: 2px;
}
}
#news-category-list li a.current {
background: #00489d;
border-color: #00489d;
color: #fff;
}
#news-category-list li a:hover {
color: #fff;
background: #4795ee;
border-color: #4795ee;
}
#archive-news #ul-news,
#single-news #ul-news,
#single-page #ul-news,
#single-page-middle #ul-news,
#single-page-wide #ul-news,
#single-page-narrow #ul-news {
background: #fff;
width: 960px;
max-width: 94%;
margin: 32px auto 56px;
box-sizing: border-box;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(1),
#single-news #ul-news.active li:nth-child(1),
#single-page #ul-news.active li:nth-child(1),
#single-page-middle #ul-news.active li:nth-child(1),
#single-page-wide #ul-news.active li:nth-child(1),
#single-page-narrow #ul-news.active li:nth-child(1) {
transition-delay: 0.1s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(2),
#single-news #ul-news.active li:nth-child(2),
#single-page #ul-news.active li:nth-child(2),
#single-page-middle #ul-news.active li:nth-child(2),
#single-page-wide #ul-news.active li:nth-child(2),
#single-page-narrow #ul-news.active li:nth-child(2) {
transition-delay: 0.2s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(3),
#single-news #ul-news.active li:nth-child(3),
#single-page #ul-news.active li:nth-child(3),
#single-page-middle #ul-news.active li:nth-child(3),
#single-page-wide #ul-news.active li:nth-child(3),
#single-page-narrow #ul-news.active li:nth-child(3) {
transition-delay: 0.3s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(4),
#single-news #ul-news.active li:nth-child(4),
#single-page #ul-news.active li:nth-child(4),
#single-page-middle #ul-news.active li:nth-child(4),
#single-page-wide #ul-news.active li:nth-child(4),
#single-page-narrow #ul-news.active li:nth-child(4) {
transition-delay: 0.4s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(5),
#single-news #ul-news.active li:nth-child(5),
#single-page #ul-news.active li:nth-child(5),
#single-page-middle #ul-news.active li:nth-child(5),
#single-page-wide #ul-news.active li:nth-child(5),
#single-page-narrow #ul-news.active li:nth-child(5) {
transition-delay: 0.5s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(6),
#single-news #ul-news.active li:nth-child(6),
#single-page #ul-news.active li:nth-child(6),
#single-page-middle #ul-news.active li:nth-child(6),
#single-page-wide #ul-news.active li:nth-child(6),
#single-page-narrow #ul-news.active li:nth-child(6) {
transition-delay: 0.6s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(7),
#single-news #ul-news.active li:nth-child(7),
#single-page #ul-news.active li:nth-child(7),
#single-page-middle #ul-news.active li:nth-child(7),
#single-page-wide #ul-news.active li:nth-child(7),
#single-page-narrow #ul-news.active li:nth-child(7) {
transition-delay: 0.7s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(8),
#single-news #ul-news.active li:nth-child(8),
#single-page #ul-news.active li:nth-child(8),
#single-page-middle #ul-news.active li:nth-child(8),
#single-page-wide #ul-news.active li:nth-child(8),
#single-page-narrow #ul-news.active li:nth-child(8) {
transition-delay: 0.8s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(9),
#single-news #ul-news.active li:nth-child(9),
#single-page #ul-news.active li:nth-child(9),
#single-page-middle #ul-news.active li:nth-child(9),
#single-page-wide #ul-news.active li:nth-child(9),
#single-page-narrow #ul-news.active li:nth-child(9) {
transition-delay: 0.9s;
}
#archive-news #ul-news.active li,
#single-news #ul-news.active li,
#single-page #ul-news.active li,
#single-page-middle #ul-news.active li,
#single-page-wide #ul-news.active li,
#single-page-narrow #ul-news.active li {
opacity: 1;
}
#archive-news #ul-news.active li:nth-child(10),
#single-news #ul-news.active li:nth-child(10),
#single-page #ul-news.active li:nth-child(10),
#single-page-middle #ul-news.active li:nth-child(10),
#single-page-wide #ul-news.active li:nth-child(10),
#single-page-narrow #ul-news.active li:nth-child(10) {
transition-delay: 1s;
}
#archive-news #ul-news li,
#single-news #ul-news li,
#single-page #ul-news li,
#single-page-middle #ul-news li,
#single-page-wide #ul-news li,
#single-page-narrow #ul-news li {
padding: 0;
margin: 0;
opacity: 0;
transition: opacity 0.3s;
}
#archive-news #ul-news li a,
#single-news #ul-news li a,
#single-page #ul-news li a,
#single-page-middle #ul-news li a,
#single-page-wide #ul-news li a,
#single-page-narrow #ul-news li a {
color: #333;
transition: 0.4s;
display: block;
margin-bottom: 24px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 12px;
border-top-right-radius: 0;
padding: 16px;
}
@media screen and (min-width: 768px) {
#archive-news #ul-news li a,
#single-news #ul-news li a,
#single-page #ul-news li a,
#single-page-middle #ul-news li a,
#single-page-wide #ul-news li a,
#single-page-narrow #ul-news li a {
margin-bottom: 32px;
display: flex;
}
}
#archive-news #ul-news li a:hover,
#single-news #ul-news li a:hover,
#single-page #ul-news li a:hover,
#single-page-middle #ul-news li a:hover,
#single-page-wide #ul-news li a:hover,
#single-page-narrow #ul-news li a:hover {
color: #3399cc;
}
#archive-news #ul-news li a span,
#single-news #ul-news li a span,
#single-page #ul-news li a span,
#single-page-middle #ul-news li a span,
#single-page-wide #ul-news li a span,
#single-page-narrow #ul-news li a span {
margin-right: 24px;
display: block;
}
#archive-news #ul-news li a span:first-child,
#single-news #ul-news li a span:first-child,
#single-page #ul-news li a span:first-child,
#single-page-middle #ul-news li a span:first-child,
#single-page-wide #ul-news li a span:first-child,
#single-page-narrow #ul-news li a span:first-child {
font-weight: bold;
}
#archive-news #ul-news li a span:nth-child(2),
#single-news #ul-news li a span:nth-child(2),
#single-page #ul-news li a span:nth-child(2),
#single-page-middle #ul-news li a span:nth-child(2),
#single-page-wide #ul-news li a span:nth-child(2),
#single-page-narrow #ul-news li a span:nth-child(2) {
color: #777;
min-width: 52px;
display: inline-block;
}
@media screen and (min-width: 576px) {
#archive-news #ul-news li a span:nth-child(2),
#single-news #ul-news li a span:nth-child(2),
#single-page #ul-news li a span:nth-child(2),
#single-page-middle #ul-news li a span:nth-child(2),
#single-page-wide #ul-news li a span:nth-child(2),
#single-page-narrow #ul-news li a span:nth-child(2) {
min-width: 68px;
}
}
#archive-news #ul-news li a span:nth-child(2):hover,
#single-news #ul-news li a span:nth-child(2):hover,
#single-page #ul-news li a span:nth-child(2):hover,
#single-page-middle #ul-news li a span:nth-child(2):hover,
#single-page-wide #ul-news li a span:nth-child(2):hover,
#single-page-narrow #ul-news li a span:nth-child(2):hover {
color: #3399cc;
}
#archive-news #ul-news li a ul,
#single-news #ul-news li a ul,
#single-page #ul-news li a ul,
#single-page-middle #ul-news li a ul,
#single-page-wide #ul-news li a ul,
#single-page-narrow #ul-news li a ul {
margin-right: 24px;
flex-shrink: 0;
display: flex;
}
@media screen and (min-width: 768px) {
#archive-news #ul-news li a ul,
#single-news #ul-news li a ul,
#single-page #ul-news li a ul,
#single-page-middle #ul-news li a ul,
#single-page-wide #ul-news li a ul,
#single-page-narrow #ul-news li a ul {
flex-direction: column;
}
}
#archive-news #ul-news li a ul li,
#single-news #ul-news li a ul li,
#single-page #ul-news li a ul li,
#single-page-middle #ul-news li a ul li,
#single-page-wide #ul-news li a ul li,
#single-page-narrow #ul-news li a ul li {
margin: 5px 5px 5px 0;
padding: 1px 12px 2px;
font-weight: bold;
background: #00489d;
color: #fff;
line-height: 1.2;
font-size: 12px;
}
@media screen and (min-width: 768px) {
#archive-news #ul-news li a ul li,
#single-news #ul-news li a ul li,
#single-page #ul-news li a ul li,
#single-page-middle #ul-news li a ul li,
#single-page-wide #ul-news li a ul li,
#single-page-narrow #ul-news li a ul li {
margin: 5px 0;
}
}
#archive-news #ul-news li a ul li.news,
#single-news #ul-news li a ul li.news,
#single-page #ul-news li a ul li.news,
#single-page-middle #ul-news li a ul li.news,
#single-page-wide #ul-news li a ul li.news,
#single-page-narrow #ul-news li a ul li.news {
background: #3399cc;
}
#archive-news #ul-news li a ul li.event,
#single-news #ul-news li a ul li.event,
#single-page #ul-news li a ul li.event,
#single-page-middle #ul-news li a ul li.event,
#single-page-wide #ul-news li a ul li.event,
#single-page-narrow #ul-news li a ul li.event {
color: #222;
background: #99ddee;
}
#archive-news #ul-news li a p,
#single-news #ul-news li a p,
#single-page #ul-news li a p,
#single-page-middle #ul-news li a p,
#single-page-wide #ul-news li a p,
#single-page-narrow #ul-news li a p {
margin: 0;
}
#single-page-middle {
max-width: 960px;
margin: 0 auto;
}
#single-page,
#single-section,
#single-page-narrow,
#single-page-wide {
width: 768px;
max-width: 94%;
margin: 0 auto 80px;
}
#single-page-wide {
width: 1200px;
}
.single-news article {
max-width: 94%;
margin-left: auto;
margin-right: auto;
}
.article-title {
font-size: 16px;
margin: 0 0 24px;
padding-bottom: 5px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.article-title {
font-size: 32px;
margin: 0 0 32px;
}
} .header-on #main-menu {
left: 0;
}
#main-menu {
max-width: 960px;
transition: 0.2s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
position: absolute;
background: #fff;
border-top: solid 3px #00489d;
left: 0;
text-align: center;
justify-content: flex-start;
flex-wrap: wrap;
padding: 0 16px;
box-sizing: border-box;
top: 66px;
width: 100vw;
margin-left: calc(50% - 50vw);
height: 100dvh;
left: -110%;
padding-bottom: 100px;
overflow: scroll;
}
@media screen and (min-width: 576px) {
#main-menu {
top: 68px;
}
}
@media screen and (min-width: 960px) {
#main-menu {
overflow: visible;
left: 0;
height: auto;
margin-left: auto;
padding: 0;
border: none;
width: auto;
background: none;
box-shadow: none;
display: flex;
justify-content: flex-end;
margin-top: 5px;
margin-right: 0;
margin-bottom: 5px;
position: relative;
top: 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-end;
}
}
@media print {
#main-menu {
display: none !important;
}
}
#main-menu li {
transition: 0.2s;
text-align: left;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
font-size: 20px;
}
@media screen and (min-width: 960px) {
#main-menu li {
margin-left: 0;
padding-left: 0;
width: auto;
text-decoration: none;
display: block;
transition: 0.3s;
padding: 10px 0;
box-sizing: border-box;
font-size: 16px;
line-height: 1.2;
display: flex;
text-align: center;
}
#main-menu li:before {
content: none;
}
#main-menu li:not(:last-child) {
border-bottom: none;
}
#main-menu li:hover {
color: #3399cc;
}
}
@media screen and (min-width: 1200px) {
#main-menu li {
font-size: 16px;
}
}
#main-menu li a {
padding: 15px 5px;
color: #333;
transition: 0.2s;
width: 100%;
display: block;
box-sizing: border-box;
border-bottom: solid 1px #ddd;
}
@media screen and (min-width: 960px) {
#main-menu li a {
padding: 10px;
border: none;
}
}
#main-menu li a:hover {
color: #4795ee;
}
#main-menu li.menu-contact {
text-align: center;
max-width: 300px;
margin: 20px auto;
}
@media screen and (min-width: 960px) {
#main-menu li.menu-contact {
margin: 0;
margin-left: 15px;
max-width: none;
}
}
#main-menu li.menu-contact a {
background: #00489d;
border: 2px solid #fff;
border-radius: 100px;
color: #fff;
padding: 10px 16px;
transition: 0.3s;
}
#main-menu li.menu-contact a:hover {
background: #3399cc;
}
#main-menu li.menu-has-child {
padding: 0;
}
#main-menu li.menu-has-child > a.clicked::before {
transform: rotate(90deg);
}
#main-menu li.menu-has-child > a.clicked::after {
transform: rotate(0);
}
#main-menu li.menu-has-child > a.clicked + ul {
max-height: 0;
overflow: hidden;
}
@media screen and (min-width: 960px) {
#main-menu li.menu-has-child > a.clicked::after {
content: none;
}
#main-menu li.menu-has-child > a.clicked + ul {
max-height: none;
overflow: visible;
}
}
#main-menu li.menu-has-child > a {
position: relative;
}
#main-menu li.menu-has-child > a::before, #main-menu li.menu-has-child > a::after {
content: "";
display: inline-block;
width: 3px;
height: 20px;
background-color: #00489d;
position: absolute;
font-weight: bold;
right: 20px;
top: 35%;
transform: rotate(90deg);
transition: 0.3s;
}
@media screen and (min-width: 960px) {
#main-menu li.menu-has-child > a::before, #main-menu li.menu-has-child > a::after {
content: none;
}
}
#main-menu li.menu-has-child > ul {
transition: max-height 0.5s;
max-height: 1000px;
margin-left: 20px;
}
@media screen and (min-width: 960px) {
#main-menu li.menu-has-child > ul {
transition: none;
margin-left: 0;
position: absolute;
top: 0;
left: -5px;
background: #fff;
white-space: nowrap;
margin-top: 50px;
display: none;
padding: 10px 0;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.1);
}
}
@media screen and (min-width: 960px) {
#main-menu li.menu-has-child > ul.show {
display: block;
}
}
#main-menu li.menu-has-child > ul a {
padding: 10px 15px;
text-align: left;
}
@media screen and (min-width: 960px) {
#main-menu li.menu-has-child > ul a {
padding: 5px 15px;
}
}
#main-menu li.menu-has-child > ul ul li a {
padding-left: 35px;
position: relative;
}
#main-menu li.menu-has-child > ul ul li a:before {
content: "";
display: block;
width: 10px;
height: 1px;
background: #999;
position: absolute;
left: 17px;
top: 50%;
transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
#main-menu li.menu-has-child > ul ul li:last-child a {
margin-bottom: -10px;
}
}
#btn {
width: 25px;
height: 25px;
z-index: 100001;
transition: 0.4s;
display: block;
position: relative;
margin: 20px 10px 0;
}
@media screen and (min-width: 768px) {
#btn {
width: 30px;
height: 30px;
}
}
@media screen and (min-width: 960px) {
#btn {
margin-left: 0;
display: none;
}
}
@media screen and (min-width: 768px) {
#btn {
width: 30px;
height: 30px;
}
}
@media screen and (min-width: 768px) {
#btn:hover {
opacity: 0.3;
}
}
#btn:before, #btn:after,
#btn span {
display: block;
position: absolute;
left: 0;
right: 0;
margin: auto;
transition: 0.3s ease-in-out;
}
#btn span {
height: 4px;
top: calc(50% - 1.5px);
background-color: #00489d;
}
#btn:before {
content: "";
top: calc(25% - 5px);
border-top: 4px solid #00489d;
}
#btn:after {
content: "";
bottom: calc(25% - 7px);
border-bottom: 4px solid #00489d;
}
.header-on #btn span {
display: none;
}
.header-on #btn:before {
top: calc(50% - 2px);
transform: rotate(315deg);
}
.header-on #btn:after {
bottom: calc(50% - 2px);
transform: rotate(-315deg);
} #pagination {
color: #333;
margin-top: 32px;
padding: 16px 0;
text-align: center;
line-height: 32px;
}
#pagination .current {
color: #3399cc;
border: 1px solid #3399cc;
}
#pagination a {
color: #3399cc;
}
#pagination a:hover {
background-color: #3399cc;
color: #fff;
}
#pagination .prev,
#pagination .next {
font-size: 16px;
}
#pagination a,
.page-numbers {
background: #fff none repeat scroll 0 0;
color: #aaa;
text-decoration: none;
transition: 0.3s;
border-radius: 100px;
display: inline-flex;
padding: 0 0 1px;
height: 32px;
width: 32px;
justify-content: center;
align-items: center;
line-height: 1;
}
.navi-pre-next {
margin: 60px 0 0;
font-size: 10px;
line-height: 1.2;
}
@media screen and (min-width: 640px) {
.navi-pre-next {
font-size: 16px;
line-height: 1.6;
}
}
.navi-pre-next {
display: flex;
justify-content: center;
}
.navi-pre-next .prev,
.navi-pre-next .next {
text-align: left;
padding: 10px;
box-sizing: border-box;
}
.navi-pre-next .prev {
text-align: right;
margin-left: 4%;
}
.navi-pre-next a {
text-decoration: none;
color: #3399cc;
}
.navi-pre-next a:hover {
text-decoration: underline;
color: #00489d;
} .wpcf7 p {
margin: 16px 0;
line-height: 18px;
}
.wpcf7 textarea {
width: 100%;
font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
.wpcf7 textarea _::-webkit-full-page-media,
.wpcf7 textarea _:future,
.wpcf7 textarea :root .css_selector,
.wpcf7 input[type=text] _::-webkit-full-page-media,
.wpcf7 input[type=text] _:future,
.wpcf7 input[type=text] :root .css_selector,
.wpcf7 input[type=email] _::-webkit-full-page-media,
.wpcf7 input[type=email] _:future,
.wpcf7 input[type=email] :root .css_selector,
.wpcf7 input[type=tel] _::-webkit-full-page-media,
.wpcf7 input[type=tel] _:future,
.wpcf7 input[type=tel] :root .css_selector,
.wpcf7 select _::-webkit-full-page-media,
.wpcf7 select _:future,
.wpcf7 select :root .css_selector {
-webkit-appearance: none;
appearance: none;
}
.wpcf7 textarea,
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
width: 100%;
max-width: 100%;
padding: 10px 5px;
box-sizing: border-box;
}
.wpcf7 input[type=submit] {
background: #00489d none repeat scroll 0 0;
border: solid 1px #00489d;
color: #fff;
font-size: 16px;
font-weight: normal;
padding: 10px 0;
text-align: center;
letter-spacing: 1em;
text-indent: 1em;
width: 192px;
border-radius: 100px;
}
.wpcf7 input[type=submit]:hover {
background: #fff none repeat scroll 0 0;
color: #00489d;
cursor: pointer;
}
.wpcf7 .wpcf7c-btn-back {
margin-right: 20px;
}
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
background: #ffffff none repeat scroll 0 0;
border: 1px solid #d8d8d8;
box-shadow: 0 1px 1px 0 rgba(180, 180, 180, 0.1);
font-size: 12px;
margin: 5px 0;
padding: 10px;
}
@media screen and (min-width: 576px) {
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
font-size: 16px;
}
}
.wpcf7 input:disabled,
.wpcf7 input:hover:disabled {
background: #ccc;
color: #999;
}
.wpcf7c-conf {
background: none !important;
border: none !important;
box-shadow: none !important;
font-weight: bold;
}
.wpcf7-submit {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
padding: 8px 32px;
background: #3399cc;
color: #fff;
font-weight: bold;
border: none;
}
.button-submit {
text-align: center;
}
.wpcf7-form .button-submit input[type=submit],
.wpcf7-form .button-submit input[type=submit]:hover {
border-radius: 5px;
border: solid 2px #3399cc;
font-size: 12px;
letter-spacing: 1em;
padding-left: 2em;
}
@media screen and (max-width: 575px) {
.img-pc,
.pc-br {
display: none;
}
}
@media screen and (min-width: 576px) {
.img-sp,
.sp-br {
display: none;
}
} .wp-caption {
max-width: 100%;
clear: both;
}
.wp-caption-text {
font-size: 14px;
}
.gallery {
margin: 40px 0;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.gallery-item {
text-align: center;
box-sizing: border-box;
font-size: 14px;
margin: 5px 1% 5px 0;
}
.gallery-columns-1 .gallery-item {
width: 100%;
margin-right: 0;
}
.gallery-columns-2 .gallery-item {
width: 49%;
}
.gallery-columns-3 .gallery-item {
width: 32%;
}
.gallery-columns-4 .gallery-item {
width: 24%;
}
.gallery-columns-5 .gallery-item {
width: 19%;
}
.gallery-columns-6 .gallery-item {
width: 15.66%;
}
.gallery-columns-7 .gallery-item {
width: 13.28%;
}
.gallery-columns-8 .gallery-item {
width: 11.5%;
}
.gallery-columns-9 .gallery-item {
width: 10.11%;
}
@media screen and (max-width: 768px) and (min-width: 481px) {
.gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
width: 49%;
max-width: 49%;
}
}
@media screen and (max-width: 480px) {
.gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item,
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
width: 100%;
max-width: 100%;
}
}
@media screen and (max-width: 767px) {
.x-scroll {
overflow: auto;
}
.x-scroll table {
width: 100%;
}
.x-scroll::-webkit-scrollbar {
height: 5px;
}
.x-scroll::-webkit-scrollbar-track {
background: #f1f1f1;
}
.x-scroll::-webkit-scrollbar-thumb {
background: #d6d6d6;
}
.x-scroll td,
.x-scroll th {
white-space: nowrap;
}
}
.p-tel {
font-size: 20px;
font-weight: bold;
margin: 16px 0;
}
.single-thumb-box {
text-align: center;
}
#top-structure-box,
#top-message-box,
#top-access-box,
#top-system-box {
position: relative;
width: 768px;
max-width: 100%;
margin: 0 auto;
text-align: center;
padding-top: 16px;
}
@media screen and (min-width: 960px) {
#top-structure-box,
#top-message-box,
#top-access-box,
#top-system-box {
padding-top: 0;
}
}
#top-structure-box h2,
#top-message-box h2,
#top-access-box h2,
#top-system-box h2 {
font-size: 5vw;
font-weight: bold;
}
@media screen and (min-width: 960px) {
#top-structure-box h2,
#top-message-box h2,
#top-access-box h2,
#top-system-box h2 {
font-size: 32px;
}
}
#top-structure-box h3,
#top-message-box h3,
#top-access-box h3,
#top-system-box h3 {
font-size: 16px;
font-weight: bold;
margin-top: -10px;
}
@media screen and (min-width: 960px) {
#top-structure-box h3,
#top-message-box h3,
#top-access-box h3,
#top-system-box h3 {
font-size: 21px;
}
}
#top-structure-box h4,
#top-message-box h4,
#top-access-box h4,
#top-system-box h4 {
font-weight: bold;
font-size: 14px;
}
@media screen and (min-width: 576px) {
#top-structure-box h4,
#top-message-box h4,
#top-access-box h4,
#top-system-box h4 {
font-size: 18px;
}
}
@media screen and (min-width: 960px) {
#top-structure-box h4,
#top-message-box h4,
#top-access-box h4,
#top-system-box h4 {
font-size: 21px;
}
}
#top-access-box {
width: 960px;
}
#top-message,
#top-structure {
padding: 5%;
}
@media screen and (min-width: 576px) {
#top-message,
#top-structure {
padding: 80px 32px;
}
}
#top-message img,
#top-structure img {
vertical-align: bottom;
}
#top-structure {
background-color: #020321;
position: relative;
color: #000;
text-shadow: 2px 2px 8px rgb(255, 255, 255), -2px -2px 8px rgb(255, 255, 255), 2px -2px 8px rgb(255, 255, 255), -2px 2px 8px rgb(255, 255, 255);
}
#top-structure.active::before {
opacity: 1;
}
#top-structure::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 3s;
}
#top-structure #top-structure-text #top-structure-box {
position: relative;
z-index: 2;
}
#top-structure #top-structure-text {
width: 768px;
margin: 40px auto;
max-width: 100%;
}
@media screen and (min-width: 768px) {
#top-structure #top-structure-text {
margin: 80px auto;
}
}
#top-structure #top-structure-text p {
text-align: left;
}
@media screen and (min-width: 960px) {
#top-structure #top-structure-desc {
display: flex;
justify-content: space-between;
align-items: center;
}
}
#top-structure #top-structure-desc #top-structure-desc-img {
width: 400px;
max-width: 100%;
margin: 0 auto;
}
#top-structure #top-structure-desc #top-structure-desc-text p {
font-size: 15px;
line-height: 1.8;
font-weight: bold;
text-align: center;
}
@media screen and (min-width: 768px) {
#top-structure #top-structure-desc #top-structure-desc-text p {
font-size: 19px;
}
}
@media screen and (min-width: 960px) {
#top-structure #top-structure-desc #top-structure-desc-text p {
text-align: left;
}
}
#top-structure #top-structure-desc svg {
filter: drop-shadow(3px 3px 5px rgba(255, 255, 255, 0.6));
}
#top-structure #top-structure-desc svg a {
transition: 0.3s;
}
#top-structure #top-structure-desc svg a:hover {
filter: drop-shadow(0 0 15px cyan);
}
.text-svg path {
fill: #bee3fd;
opacity: 0;
transform: translateX(50px);
}
.text-svg.active path {
animation: svgText 0.5s forwards;
}
.text-svg.active path:nth-child(2) {
animation-delay: 0.05s;
}
.text-svg.active path:nth-child(3) {
animation-delay: 0.1s;
}
.text-svg.active path:nth-child(4) {
animation-delay: 0.15s;
}
.text-svg.active path:nth-child(5) {
animation-delay: 0.2s;
}
.text-svg.active path:nth-child(6) {
animation-delay: 0.25s;
}
.text-svg.active path:nth-child(7) {
animation-delay: 0.3s;
}
.text-svg.active path:nth-child(8) {
animation-delay: 0.35s;
}
.text-svg.active path:nth-child(9) {
animation-delay: 0.4s;
}
.text-svg.active path:nth-child(10) {
animation-delay: 0.45s;
}
.text-svg.active path:nth-child(11) {
animation-delay: 0.5s;
}
@keyframes svgText {
0% {
opacity: 0;
transform: translateX(50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#top-message {
position: relative;
padding: 48px 0;
}
#top-message #svg-top-message {
position: absolute;
left: 0;
top: 0;
width: 320px;
height: 50px;
}
@media screen and (min-width: 768px) {
#top-message #svg-top-message {
width: 50vw;
height: 7.867vw;
}
}
@media screen and (min-width: 1500px) {
#top-message #svg-top-message {
width: 750px;
height: 118px;
}
}
#top-message #svg-top-message path {
fill: #bee3fd;
}
#top-message h2 {
font-size: 5vw;
margin-bottom: 32px;
}
@media screen and (min-width: 960px) {
#top-message h2 {
font-size: 44px;
}
}
#message-inner #message-img-box {
position: relative;
margin-bottom: 44px;
}
#message-inner #message-img-box img {
vertical-align: bottom;
opacity: 0;
transform: translateX(-80px);
transition: 1s;
}
#message-inner #message-img-box.active img {
opacity: 1;
transform: translateX(0);
}
#message-inner #message-img-box.active #message-inner-title {
opacity: 1;
transform: translateY(0);
}
#message-inner #message-img-box #message-inner-title {
position: absolute;
bottom: -24px;
right: 20px;
background: #00489d;
color: #fff;
text-align: center;
padding: 10px 20px 12px;
border-radius: 24px;
border-top-right-radius: 0;
opacity: 0;
transform: translateY(24px);
transition: 1s 0.5s;
}
@media screen and (min-width: 1200px) {
#message-inner #message-img-box #message-inner-title {
padding: 20px 48px 32px;
border-radius: 24px;
border-top-right-radius: 0;
right: -82px;
}
}
#message-inner #message-img-box #message-inner-title p {
margin: 3px auto;
line-height: 1;
font-size: 12px;
}
@media screen and (min-width: 1200px) {
#message-inner #message-img-box #message-inner-title p {
margin: 15px auto;
font-size: 20px;
}
}
#message-inner #message-img-box #message-inner-title h4 {
font-size: 18px;
line-height: 1;
}
@media screen and (min-width: 1200px) {
#message-inner #message-img-box #message-inner-title h4 {
font-size: 28px;
}
}
.home #message-inner > p {
max-width: 94%;
text-align: left;
}
.home #message-inner > p:last-of-type {
text-align: right;
}
.page-message.loaded #message-catch img,
.page-writing.loaded #message-catch img {
transform: translateX(-17%) scale(1);
transform-origin: center;
opacity: 1;
width: 150%;
max-width: 150%;
}
@media screen and (min-width: 768px) {
.page-message.loaded #message-catch img,
.page-writing.loaded #message-catch img {
width: 100%;
max-width: 100%;
transform: translateX(0) scale(1);
}
}
.page-message.loaded #message-catch h2,
.page-writing.loaded #message-catch h2 {
opacity: 1;
}
.page-message #message-catch,
.page-writing #message-catch {
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
margin-bottom: 48px;
overflow: hidden;
}
.page-message #message-catch img,
.page-writing #message-catch img {
width: 100%;
transform: translateX(-17%) scale(1.5);
transition: opacity 0.4s, transform 1s;
opacity: 0;
vertical-align: bottom;
}
@media screen and (min-width: 768px) {
.page-message #message-catch img,
.page-writing #message-catch img {
transform: translateX(0) scale(1.5);
}
}
.page-message #message-catch h2,
.page-writing #message-catch h2 {
width: 100%;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, 0);
text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.6), -2px -2px 8px rgba(255, 255, 255, 0.6), 2px -2px 8px rgba(255, 255, 255, 0.6), -2px 2px 8px rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 1s 0.7s;
font-size: 20px;
}
@media screen and (min-width: 768px) {
.page-message #message-catch h2,
.page-writing #message-catch h2 {
font-size: 32px;
}
}
@media screen and (min-width: 1200px) {
.page-message #message-catch h2,
.page-writing #message-catch h2 {
font-size: 50px;
}
}
.page-message section #message-inner,
.page-writing section #message-inner {
margin-top: 80px;
padding: 20px 5%;
border-radius: 12px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
.page-message section #message-inner,
.page-writing section #message-inner {
padding: 40px;
}
}
.page-message section #message-inner #message-img-box,
.page-writing section #message-inner #message-img-box {
margin-bottom: 0;
}
.page-message section #message-inner #message-img-box img,
.page-writing section #message-inner #message-img-box img {
margin-bottom: 24px;
}
.page-message section #message-inner #message-img-box #message-inner-title,
.page-writing section #message-inner #message-img-box #message-inner-title {
bottom: -4px;
right: -3%;
border-radius: 10px;
border-top-right-radius: 0;
}
@media screen and (min-width: 768px) {
.page-message section #message-inner #message-img-box #message-inner-title,
.page-writing section #message-inner #message-img-box #message-inner-title {
bottom: -24px;
right: -20px;
border-radius: 24px;
border-top-right-radius: 0;
}
}
.page-message section #message-inner #message-img-box #message-inner-title h4,
.page-writing section #message-inner #message-img-box #message-inner-title h4 {
margin: 0;
}
#top-access,
#top-system {
padding: 5% 3%;
position: relative;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
}
@media screen and (min-width: 576px) {
#top-access,
#top-system {
padding: 80px 32px;
}
}
#top-access #svg-top-access,
#top-system #svg-top-access {
position: absolute;
left: 0;
top: 0;
width: 204px;
height: 50px;
}
@media screen and (min-width: 768px) {
#top-access #svg-top-access,
#top-system #svg-top-access {
width: 23.8vw;
height: 5.8vw;
}
}
@media screen and (min-width: 1500px) {
#top-access #svg-top-access,
#top-system #svg-top-access {
width: 357px;
height: 87px;
}
}
#top-access #svg-top-access path,
#top-system #svg-top-access path {
fill: #fff;
}
#top-access #top-access-inner,
#top-system #top-access-inner {
margin: 32px auto 0;
}
#top-access #top-access-inner > div,
#top-system #top-access-inner > div {
flex: 1;
}
@media screen and (min-width: 576px) {
#top-access #top-access-inner,
#top-system #top-access-inner {
margin: 40px auto 0;
display: flex;
}
}
#top-access #top-access-inner #top-access-map,
#top-system #top-access-inner #top-access-map {
display: flex;
flex-direction: column;
}
@media screen and (min-width: 576px) {
#top-access #top-access-inner #top-access-map,
#top-system #top-access-inner #top-access-map {
margin-right: 32px;
}
}
#top-access #top-access-inner #top-access-map #top-access-map-img,
#top-system #top-access-inner #top-access-map #top-access-map-img {
overflow: hidden;
}
#top-access #top-access-inner #top-access-map #top-access-map-img img,
#top-system #top-access-inner #top-access-map #top-access-map-img img {
transform: scale(2);
transition: 1s;
}
#top-access #top-access-inner #top-access-map #top-access-map-img.active img,
#top-system #top-access-inner #top-access-map #top-access-map-img.active img {
transform: scale(1);
}
#top-access #top-access-inner #top-access-text,
#top-system #top-access-inner #top-access-text {
text-align: left;
margin-top: 12px;
}
@media screen and (min-width: 576px) {
#top-access #top-access-inner #top-access-text,
#top-system #top-access-inner #top-access-text {
margin-top: 0;
width: 400px;
}
}
#top-access #top-access-inner #top-access-text img,
#top-system #top-access-inner #top-access-text img {
width: 240px;
}
#top-access #top-access-inner #top-access-text a,
#top-system #top-access-inner #top-access-text a {
color: #222;
}
#top-access #top-access-inner #top-access-text a:hover,
#top-system #top-access-inner #top-access-text a:hover {
text-decoration: underline;
color: #4795ee;
}
.page-terms h3,
.page-terms article h3:not(:first-of-type),
.page-privacy h3,
.page-privacy article h3:not(:first-of-type) {
font-size: 18px;
margin: 20px 0 0 23px;
position: relative;
background: none;
color: #222;
padding: 0;
}
.page-terms h3:before,
.page-terms article h3:not(:first-of-type):before,
.page-privacy h3:before,
.page-privacy article h3:not(:first-of-type):before {
background: #222;
content: "";
height: 15px;
width: 15px;
left: -22px;
position: absolute;
top: 8px;
}
@media screen and (min-width: 576px) {
.page-terms h3:before,
.page-terms article h3:not(:first-of-type):before,
.page-privacy h3:before,
.page-privacy article h3:not(:first-of-type):before {
top: 9px;
}
}
#page-thumbnail {
position: relative;
padding-top: 36px;
width: 1024px;
max-width: 100%;
margin: 0 auto;
}
@media screen and (min-width: 576px) {
#page-thumbnail {
padding-top: 51px;
}
}
@media screen and (min-width: 1200px) {
#page-thumbnail {
padding-top: 56px;
}
}
#page-thumbnail img {
width: 100%;
vertical-align: bottom;
}
#page-thumbnail #message-inner-text {
pointer-events: none;
bottom: 8%;
right: 5%;
left: auto;
}
#page-thumbnail #message-inner-text p:last-child {
display: none;
}
body.single article .article-date {
font-size: 13px;
margin: 10px 0 40px;
}
@media screen and (min-width: 768px) {
body.single article .article-date {
margin: 48px 0 40px;
}
}
body.single article .article-date a {
margin: 5px;
padding: 1px 12px 2px;
font-weight: bold;
background: #00489d;
color: #fff;
line-height: 1.2;
font-size: 12px;
display: inline-block;
}
body.single article .article-date a.news {
background: #3399cc;
}
body.single article .article-date a.event {
color: #222;
background: #99ddee;
}
.text-em {
color: red;
}
#breadcrumb {
padding: 90px 0 24px;
max-width: 94%;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
#breadcrumb {
padding: 100px 0 24px;
}
}
#breadcrumb ul {
width: 1200px;
max-width: 100%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
font-size: 12px;
}
@media screen and (min-width: 768px) {
#breadcrumb ul {
font-size: 16px;
}
}
#breadcrumb ul li {
color: #222;
}
#breadcrumb ul li:not(:last-child):after {
content: ">";
color: #222;
margin: 0 8px;
}
#breadcrumb ul li a {
color: #222;
transition: 0.3s;
}
#breadcrumb ul li a:hover {
color: #3399cc;
}
.table-noborder {
width: auto;
margin: 0;
border: none;
}
.table-noborder th,
.table-noborder td {
padding: 0;
border: none;
vertical-align: text-top;
min-width: 0;
}
body.page-contact {
border: none;
}
body.page-contact table th,
body.page-contact table td {
padding: 0;
border: none;
min-width: 0;
text-align: left;
display: block;
}
@media screen and (min-width: 768px) {
body.page-contact table th,
body.page-contact table td {
display: table-cell;
}
}
body.page-contact table th {
min-width: 144px;
font-weight: normal;
}
body.page-contact .wpcf7 p {
margin: 10px 0;
}
body.page-contact .wpcf7 textarea,
body.page-contact .wpcf7 input[type=text],
body.page-contact .wpcf7 input[type=email],
body.page-contact .wpcf7 input[type=tel],
body.page-contact .wpcf7 select {
border-radius: 5px;
padding: 15px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.text-require {
font-size: 70%;
background-color: #ee6600;
color: #fff;
padding: 2px 5px;
line-height: 1;
margin-left: 5px;
transform: translateY(-2px);
display: inline-block;
}
body.page-contact .wpcf7 p.acceptance {
margin: 24px auto;
text-align: center;
}
body.page-contact #contact-example {
padding-left: 2em;
text-indent: -2em;
}
body.page-contact #contact-example::before {
content: "例）";
}
body.page-contact .p-postal-code {
width: 240px;
}
body.page-contact .postal-search {
background-color: #ee6600;
color: #fff;
padding: 3px 8px;
border: solid 1px #ee6600;
}
body.page-contact .postal-search:hover {
cursor: pointer;
}
body.page-contact article a {
text-decoration: underline;
}
body.page-contact .wpcf7-not-valid-tip {
position: absolute;
bottom: -28px;
left: 0;
pointer-events: none;
}
body.page-contact .wpcf7-spinner {
display: block;
margin: 0 auto;
}
body.page-contact p.p-your-subject {
border-radius: 5px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
body.page-contact p.p-your-subject .wpcf7-not-valid-tip {
bottom: -36px;
}
body.page-contact p.p-your-subject .wpcf7-checkbox {
padding: 12px;
margin: 5px 0;
display: inline-block;
}
#platform,
#expert,
#twobuz {
padding-top: 100px;
}
.expert-img {
margin: 40px 0 80px;
}
.expert-2col {
box-sizing: border-box;
}
@media screen and (min-width: 960px) {
.expert-2col {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
}
.expert-2col > p {
display: none;
}
.expert-2col .expert-2col-inner {
border-radius: 24px;
margin-bottom: 40px;
padding: 20px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
width: 100%;
max-width: 600px;
margin: 0 auto 20px;
}
@media screen and (min-width: 960px) {
.expert-2col .expert-2col-inner {
padding: 20px;
max-width: none;
width: 47.5%;
margin: 0 0 20px;
}
}
@media screen and (min-width: 1200px) {
.expert-2col .expert-2col-inner {
padding: 40px;
width: 46.6%;
}
}
.expert-2col .expert-2col-inner.active {
opacity: 1;
transform: translateY(0);
}
.expert-2col .expert-2col-inner .expert-position-box {
display: flex;
}
.expert-2col .expert-2col-inner .expert-photo {
margin-right: 20px;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.expert-2col .expert-2col-inner .expert-photo {
margin-right: 32px;
}
}
.expert-2col .expert-2col-inner .expert-photo img {
width: 150px;
}
@media screen and (min-width: 768px) {
.expert-2col .expert-2col-inner .expert-photo img {
width: 15vw;
}
}
@media screen and (min-width: 1200px) {
.expert-2col .expert-2col-inner .expert-photo img {
width: 200px;
}
}
.expert-2col .expert-2col-inner .expert-position {
width: 100%;
}
.expert-2col .expert-2col-inner .expert-desc {
clear: both;
}
.expert-2col .expert-2col-inner .expert-name {
font-size: 24px;
margin: 8px 0 2px;
line-height: 1.5;
}
.expert-2col .expert-2col-inner .expert-name-en {
margin: 0;
}
.expert-2col .expert-2col-inner h4 {
margin: 0;
font-size: 14px;
box-sizing: border-box;
line-height: 1.5;
padding: 5px 10px;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
width: 100%;
}
.hr-lightblue {
height: 4px;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
border: none;
margin: 15px 0;
}
@media screen and (min-width: 768px) {
.hr-lightblue {
height: 8px;
margin: 32px 0;
}
}
#partners {
visibility: hidden;
}
#expert-banner ul#expert-banner-ul {
margin-top: 32px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#expert-banner ul#expert-banner-ul.active li {
opacity: 1;
transform: translateY(0);
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(1) {
transition-delay: 0.2s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(2) {
transition-delay: 0.4s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(3) {
transition-delay: 0.6s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(4) {
transition-delay: 0.8s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(5) {
transition-delay: 1s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(6) {
transition-delay: 1.2s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(7) {
transition-delay: 1.4s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(8) {
transition-delay: 1.6s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(9) {
transition-delay: 1.8s;
}
#expert-banner ul#expert-banner-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
#expert-banner ul#expert-banner-ul li:nth-child(10) {
transition-delay: 2s;
}
#expert-banner ul#expert-banner-ul li {
list-style: none;
width: 48%;
border-radius: 24px;
background: #fff;
padding: 16px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
justify-content: center;
text-align: center;
margin: 0 0 24px;
font-size: 12px;
}
#expert-banner ul#expert-banner-ul li:nth-child(odd) {
margin-right: 4%;
}
@media screen and (min-width: 768px) {
#expert-banner ul#expert-banner-ul li {
font-size: 14px;
width: 31.3%;
}
#expert-banner ul#expert-banner-ul li:nth-child(odd) {
margin-right: 0;
}
#expert-banner ul#expert-banner-ul li:not(:nth-child(3n)) {
margin-right: 3%;
}
#expert-banner ul#expert-banner-ul li:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 1200px) {
#expert-banner ul#expert-banner-ul li {
font-size: 18px;
}
}
#expert-banner ul#expert-banner-ul li img {
display: block;
width: 246px;
max-width: 100%;
margin: 0 auto;
}
#expert-banner ul#expert-banner-ul li a {
color: #000;
}
.page-company .box-max-lightblue {
margin-top: 0;
margin-bottom: -80px;
padding-top: 56px;
padding-bottom: 56px;
}
.box-max-lightblue {
width: 100vw;
margin-left: calc(50% - 50vw);
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
margin-bottom: 80px;
margin-top: 80px;
padding-top: 80px;
padding-bottom: 80px;
padding-right: 3%;
padding-left: 3%;
box-sizing: border-box;
}
.box-max-lightblue > div {
width: 96%;
}
.page-access #google-map-box {
width: 1040px;
max-width: 100%;
margin: 40px auto;
}
.page-access #google-map-box iframe {
width: 100%;
height: 584px;
}
@media screen and (min-width: 960px) {
.page-access #box-how-to-go {
display: flex;
justify-content: space-between;
}
}
.page-access #box-how-to-go h3 {
font-size: 24px;
margin: 0 0 24px;
}
.page-access #box-how-to-go h3::after {
content: "";
width: 100%;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(193, 225, 233) 0%, rgb(102, 188, 205) 100%);
height: 8px;
display: block;
margin-top: 5px;
}
.page-access #box-how-to-go .box-inner-how-to-go {
max-width: 560px;
margin: 0 auto;
}
@media screen and (min-width: 960px) {
.page-access #box-how-to-go .box-inner-how-to-go {
width: 30%;
}
}
.page-access #box-how-to-go .box-inner-how-to-go .icons-how-to-go {
display: flex;
justify-content: space-around;
text-align: center;
}
.page-access #box-how-to-go .box-inner-how-to-go .icons-how-to-go .icons-how-to-go-img {
text-align: center;
}
.page-access #box-how-to-go .box-inner-how-to-go .icons-how-to-go .icons-how-to-go-img img {
margin: 0 auto;
width: 64px;
height: 64px;
}
.page-business.loaded #business-catch img,
.page-system.loaded #business-catch img,
.page-3services.loaded #business-catch img {
transform: translateX(-17%) scale(1);
transform-origin: center;
opacity: 1;
width: 150%;
max-width: 150%;
}
@media screen and (min-width: 768px) {
.page-business.loaded #business-catch img,
.page-system.loaded #business-catch img,
.page-3services.loaded #business-catch img {
width: 100%;
max-width: 100%;
transform: translateX(0) scale(1);
}
}
.page-business.loaded #business-catch h2,
.page-system.loaded #business-catch h2,
.page-3services.loaded #business-catch h2 {
opacity: 1;
}
.page-business #business-catch,
.page-system #business-catch,
.page-3services #business-catch {
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
margin-bottom: 48px;
overflow: hidden;
}
.page-business #business-catch img,
.page-system #business-catch img,
.page-3services #business-catch img {
width: 100%;
transform: translateX(-17%) scale(1.5);
transition: opacity 0.4s, transform 1s;
opacity: 0;
vertical-align: bottom;
}
@media screen and (min-width: 768px) {
.page-business #business-catch img,
.page-system #business-catch img,
.page-3services #business-catch img {
transform: translateX(0) scale(1.5);
}
}
.page-business #business-catch h2,
.page-system #business-catch h2,
.page-3services #business-catch h2 {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 2px 2px 8px rgba(255, 255, 255, 0.6), -2px -2px 8px rgba(255, 255, 255, 0.6), 2px -2px 8px rgba(255, 255, 255, 0.6), -2px 2px 8px rgba(255, 255, 255, 0.6);
opacity: 0;
transition: opacity 1s 0.7s;
font-size: 20px;
}
@media screen and (min-width: 768px) {
.page-business #business-catch h2,
.page-system #business-catch h2,
.page-3services #business-catch h2 {
font-size: 32px;
}
}
@media screen and (min-width: 1200px) {
.page-business #business-catch h2,
.page-system #business-catch h2,
.page-3services #business-catch h2 {
font-size: 50px;
}
}
.page-business #business-introduction,
.page-system #business-introduction,
.page-3services #business-introduction {
margin-top: -8px;
}
@media screen and (min-width: 768px) {
.page-business #business-introduction,
.page-system #business-introduction,
.page-3services #business-introduction {
display: flex;
}
}
.page-business #business-introduction #business-introduction-svg-box,
.page-system #business-introduction #business-introduction-svg-box,
.page-3services #business-introduction #business-introduction-svg-box {
margin-top: 16px;
flex-shrink: 0;
width: 300px;
margin: 0 auto;
text-align: center;
align-self: flex-start;
}
@media screen and (min-width: 768px) {
.page-business #business-introduction #business-introduction-svg-box,
.page-system #business-introduction #business-introduction-svg-box,
.page-3services #business-introduction #business-introduction-svg-box {
margin-left: 32px;
}
}
@media screen and (min-width: 960px) {
.page-business #business-introduction #business-introduction-svg-box,
.page-system #business-introduction #business-introduction-svg-box,
.page-3services #business-introduction #business-introduction-svg-box {
width: 378px;
}
}
.page-business #business-introduction #business-introduction-svg-box p,
.page-system #business-introduction #business-introduction-svg-box p,
.page-3services #business-introduction #business-introduction-svg-box p {
font-size: 22px;
font-weight: bold;
}
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg {
width: 216px;
}
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg.active .st0,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg.active .st0,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg.active .st0 {
fill: #cccccc;
}
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0 {
transition: fill 0.5s 1s;
}
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0,
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st1,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st1,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st0,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st1 {
fill: #99ddee;
}
.page-business #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st2,
.page-system #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st2,
.page-3services #business-introduction #business-introduction-svg-box svg#business-introduction-svg .st2 {
fill: #333333;
}
.page-business #chroma-cycle,
.page-system #chroma-cycle,
.page-3services #chroma-cycle {
text-align: center;
padding: 8px 32px 48px;
}
@media screen and (min-width: 768px) {
.page-business #chroma-cycle #chroma-cycle-inner,
.page-system #chroma-cycle #chroma-cycle-inner,
.page-3services #chroma-cycle #chroma-cycle-inner {
display: flex;
align-items: center;
}
}
.page-business #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box,
.page-system #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box,
.page-3services #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box {
width: 80%;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.page-business #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box,
.page-system #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box,
.page-3services #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-box {
width: 55%;
}
}
.page-business #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-system #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-3services #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text {
font-size: 16px;
font-weight: bold;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.page-business #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-system #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-3services #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text {
text-align: left;
margin-top: 0;
margin-left: 2%;
width: 43%;
font-size: 1.8vw;
}
}
@media screen and (min-width: 1200px) {
.page-business #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-system #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text,
.page-3services #chroma-cycle #chroma-cycle-inner #chroma-cycle-svg-text {
font-size: 20px;
}
}
.page-business #chroma-cycle #chroma-cycle-svg,
.page-system #chroma-cycle #chroma-cycle-svg,
.page-3services #chroma-cycle #chroma-cycle-svg {
width: 100%;
}
.page-business #chroma-cycle #chroma-cycle-svg .st0,
.page-system #chroma-cycle #chroma-cycle-svg .st0,
.page-3services #chroma-cycle #chroma-cycle-svg .st0 {
fill: #cccccc;
}
.page-business #chroma-cycle #chroma-cycle-svg .st1,
.page-system #chroma-cycle #chroma-cycle-svg .st1,
.page-3services #chroma-cycle #chroma-cycle-svg .st1 {
fill: #99ddee;
}
.page-business #chroma-cycle #chroma-cycle-svg .st2,
.page-system #chroma-cycle #chroma-cycle-svg .st2,
.page-3services #chroma-cycle #chroma-cycle-svg .st2 {
fill: #333333;
}
.page-business #chroma-cycle #chroma-cycle-svg .st3,
.page-system #chroma-cycle #chroma-cycle-svg .st3,
.page-3services #chroma-cycle #chroma-cycle-svg .st3 {
fill: #00489c;
}
.page-business #chroma-cycle #chroma-cycle-svg .st4,
.page-system #chroma-cycle #chroma-cycle-svg .st4,
.page-3services #chroma-cycle #chroma-cycle-svg .st4 {
fill: #ffffff;
}
.page-business #chroma-cycle #chroma-cycle-svg #popup,
.page-system #chroma-cycle #chroma-cycle-svg #popup,
.page-3services #chroma-cycle #chroma-cycle-svg #popup {
opacity: 0;
transition: 1s 2s;
}
.page-business #chroma-cycle #chroma-cycle-svg #popup > path,
.page-system #chroma-cycle #chroma-cycle-svg #popup > path,
.page-3services #chroma-cycle #chroma-cycle-svg #popup > path {
fill: #99ddee;
}
.page-business #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path,
.page-system #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path,
.page-3services #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path {
fill: #fff;
}
.page-business #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path:first-child,
.page-system #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path:first-child,
.page-3services #chroma-cycle #chroma-cycle-svg #popup > g:nth-of-type(2) path:first-child {
fill: #00489c;
}
.page-business #chroma-cycle #chroma-cycle-svg #desc,
.page-system #chroma-cycle #chroma-cycle-svg #desc,
.page-3services #chroma-cycle #chroma-cycle-svg #desc {
opacity: 0;
transition: 1s 2s;
transform: translateY(30px);
}
.page-business #chroma-cycle #chroma-cycle-svg #arrows path,
.page-system #chroma-cycle #chroma-cycle-svg #arrows path,
.page-3services #chroma-cycle #chroma-cycle-svg #arrows path {
fill: #cccccc;
}
.page-business #chroma-cycle #chroma-cycle-svg #arrows path:not(:first-child),
.page-system #chroma-cycle #chroma-cycle-svg #arrows path:not(:first-child),
.page-3services #chroma-cycle #chroma-cycle-svg #arrows path:not(:first-child) {
fill: #99ddee;
}
@keyframes arrows2 {
0% {
fill: #84bae5;
}
9% {
fill: #84bae5;
}
10% {
fill: #84bae5;
}
80% {
fill: #84bae5;
}
100% {
fill: #84bae5;
}
}
@keyframes arrows3 {
0% {
fill: #99ddee;
}
19% {
fill: #99ddee;
}
30% {
fill: #84bae5;
}
80% {
fill: #84bae5;
}
100% {
fill: #84bae5;
}
}
@keyframes arrows4 {
0% {
fill: #99ddee;
}
29% {
fill: #99ddee;
}
30% {
fill: #84bae5;
}
80% {
fill: #84bae5;
}
100% {
fill: #84bae5;
}
}
@keyframes arrows5 {
0% {
fill: #99ddee;
}
39% {
fill: #99ddee;
}
40% {
fill: #52b2e3;
}
80% {
fill: #84bae5;
}
100% {
fill: #84bae5;
}
}
.page-business #chroma-cycle h4,
.page-system #chroma-cycle h4,
.page-3services #chroma-cycle h4 {
margin: 24px auto;
font-weight: bold;
}
.page-business #chroma-cycle #chroma-cycle-inner.active #popup,
.page-system #chroma-cycle #chroma-cycle-inner.active #popup,
.page-3services #chroma-cycle #chroma-cycle-inner.active #popup {
opacity: 1;
}
.page-business #chroma-cycle #chroma-cycle-inner.active #desc,
.page-system #chroma-cycle #chroma-cycle-inner.active #desc,
.page-3services #chroma-cycle #chroma-cycle-inner.active #desc {
opacity: 1;
transform: translateY(0);
}
.page-business #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:first-child,
.page-system #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:first-child,
.page-3services #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:first-child {
animation: arrows2 2s forwards;
}
.page-business #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(2),
.page-system #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(2),
.page-3services #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(2) {
animation: arrows3 3s 2s forwards;
}
.page-business #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(3),
.page-system #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(3),
.page-3services #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:nth-child(3) {
animation: arrows4 3s 2s forwards;
}
.page-business #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:last-child,
.page-system #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:last-child,
.page-3services #chroma-cycle #chroma-cycle-inner.arrowed #arrows path:last-child {
animation: arrows5 3s 2s forwards;
}
.page-business #business-platform-formula,
.page-system #business-platform-formula,
.page-3services #business-platform-formula {
margin: 24px 0 48px;
display: flex;
justify-content: space-between;
}
.page-business #business-platform-formula li,
.page-system #business-platform-formula li,
.page-3services #business-platform-formula li {
list-style: none;
background: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #00489d;
padding: 0;
text-align: center;
line-height: 1.2;
text-indent: 0;
margin: 0;
position: relative;
border-radius: 19vw;
width: 19vw;
font-size: 2.4vw;
height: 19vw;
}
@media screen and (min-width: 830px) {
.page-business #business-platform-formula li,
.page-system #business-platform-formula li,
.page-3services #business-platform-formula li {
font-size: 22px;
border-radius: 160px;
width: 160px;
height: 160px;
}
}
.page-business #business-platform-formula li:not(:last-child)::after,
.page-system #business-platform-formula li:not(:last-child)::after,
.page-3services #business-platform-formula li:not(:last-child)::after {
position: absolute;
content: "";
width: 3.133vw;
height: 3.373vw;
right: -4.5vw;
top: 50%;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2032%2033.1%22%20style%3D%22enable-background%3Anew%200%200%2032%2033.1%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M12.6%2C19.8H0v-6.5h12.6V0h6.8v13.3H32v6.5H19.4v13.2h-6.8V19.8z%22%2F%3E%3C%2Fsvg%3E");
}
@media screen and (min-width: 830px) {
.page-business #business-platform-formula li:not(:last-child)::after,
.page-system #business-platform-formula li:not(:last-child)::after,
.page-3services #business-platform-formula li:not(:last-child)::after {
width: 26px;
height: 28px;
right: -35px;
}
}
.page-business #business-platform-formula li:first-child::after,
.page-system #business-platform-formula li:first-child::after,
.page-3services #business-platform-formula li:first-child::after {
width: 3.253vw;
height: 2.048vw;
right: -4.5vw;
top: 50%;
transform: translateY(-50%);
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2020.8%22%20style%3D%22enable-background%3Anew%200%200%2034%2020.8%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M34%2C6.3H0V0h34V6.3z%20M34%2C14.6v6.3H0v-6.3H34z%22%2F%3E%3C%2Fsvg%3E");
}
@media screen and (min-width: 830px) {
.page-business #business-platform-formula li:first-child::after,
.page-system #business-platform-formula li:first-child::after,
.page-3services #business-platform-formula li:first-child::after {
width: 27px;
height: 17px;
right: -35px;
}
}
.page-business .business-platform-formula-inner,
.page-system .business-platform-formula-inner,
.page-3services .business-platform-formula-inner {
margin-bottom: 48px;
}
@media screen and (min-width: 576px) {
.page-business .business-platform-formula-inner,
.page-system .business-platform-formula-inner,
.page-3services .business-platform-formula-inner {
display: flex;
justify-content: space-between;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box,
.page-business .business-platform-formula-inner .business-platform-formula-text,
.page-system .business-platform-formula-inner .business-platform-formula-img-box,
.page-system .business-platform-formula-inner .business-platform-formula-text,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box,
.page-3services .business-platform-formula-inner .business-platform-formula-text {
width: 100%;
}
@media screen and (min-width: 576px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box,
.page-business .business-platform-formula-inner .business-platform-formula-text,
.page-system .business-platform-formula-inner .business-platform-formula-img-box,
.page-system .business-platform-formula-inner .business-platform-formula-text,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box,
.page-3services .business-platform-formula-inner .business-platform-formula-text {
width: 384px;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box,
.page-system .business-platform-formula-inner .business-platform-formula-img-box,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box {
text-align: center;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box,
.page-system .business-platform-formula-inner .business-platform-formula-img-box,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box {
margin-bottom: 0;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box.active,
.page-system .business-platform-formula-inner .business-platform-formula-img-box.active,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box.active {
opacity: 1;
transform: translateY(0);
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box h4,
.page-system .business-platform-formula-inner .business-platform-formula-img-box h4,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box h4 {
font-size: 19px;
margin: 0 auto 16px;
}
@media screen and (min-width: 960px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box h4,
.page-system .business-platform-formula-inner .business-platform-formula-img-box h4,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box h4 {
font-size: 23px;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box img,
.page-system .business-platform-formula-inner .business-platform-formula-img-box img,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box img {
width: 124px;
display: block;
margin: 0 auto 12px;
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box p,
.page-system .business-platform-formula-inner .business-platform-formula-img-box p,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box p {
line-height: 1.4;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box p,
.page-system .business-platform-formula-inner .business-platform-formula-img-box p,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box p {
font-size: 16px;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col {
width: 85%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 576px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col {
width: 100%;
}
}
@media screen and (min-width: 768px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col {
width: 85%;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p {
width: 30%;
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p img,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p img,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p img {
width: 60px;
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow {
position: relative;
display: block;
}
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after {
width: 2.5vw;
height: 5vw;
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -14%;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2040%22%20style%3D%22enable-background%3Anew%200%200%2020%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23999999%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C39.42V0l20%2C19.71L0%2C39.42z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@media screen and (min-width: 576px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after {
width: 1.25vw;
height: 2.5vw;
}
}
@media screen and (min-width: 960px) {
.page-business .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-system .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after,
.page-3services .business-platform-formula-inner .business-platform-formula-img-box .business-platform-formula-img-col p .img-arrow::after {
width: 12px;
height: 24px;
}
}
@media screen and (min-width: 576px) {
.page-business .business-platform-formula-inner .business-platform-formula-text,
.page-system .business-platform-formula-inner .business-platform-formula-text,
.page-3services .business-platform-formula-inner .business-platform-formula-text {
margin-left: 32px;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-text h5,
.page-system .business-platform-formula-inner .business-platform-formula-text h5,
.page-3services .business-platform-formula-inner .business-platform-formula-text h5 {
font-size: 18px;
margin: -8px auto 16px;
line-height: 1.4;
}
@media screen and (min-width: 960px) {
.page-business .business-platform-formula-inner .business-platform-formula-text h5,
.page-system .business-platform-formula-inner .business-platform-formula-text h5,
.page-3services .business-platform-formula-inner .business-platform-formula-text h5 {
font-size: 24px;
}
}
.page-business .business-platform-formula-inner .business-platform-formula-text p,
.page-system .business-platform-formula-inner .business-platform-formula-text p,
.page-3services .business-platform-formula-inner .business-platform-formula-text p {
font-size: 13px;
}
@media screen and (min-width: 768px) {
.page-business .business-platform-formula-inner .business-platform-formula-text p,
.page-system .business-platform-formula-inner .business-platform-formula-text p,
.page-3services .business-platform-formula-inner .business-platform-formula-text p {
font-size: 16px;
}
}
.page-business #business-effect-col2,
.page-system #business-effect-col2,
.page-3services #business-effect-col2 {
margin: 48px auto 0;
}
@media screen and (min-width: 768px) {
.page-business #business-effect-col2,
.page-system #business-effect-col2,
.page-3services #business-effect-col2 {
display: flex;
justify-content: space-between;
}
}
.page-business #business-effect-col2 .business-effect-inner,
.page-system #business-effect-col2 .business-effect-inner,
.page-3services #business-effect-col2 .business-effect-inner {
width: 100%;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
padding: 0.001em 5%;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.page-business #business-effect-col2 .business-effect-inner,
.page-system #business-effect-col2 .business-effect-inner,
.page-3services #business-effect-col2 .business-effect-inner {
padding: 0.001em 40px;
width: 46.67%;
margin-bottom: 0;
}
}
.page-business #business-effect-col2 .business-effect-inner.active,
.page-system #business-effect-col2 .business-effect-inner.active,
.page-3services #business-effect-col2 .business-effect-inner.active {
opacity: 1;
transform: translateY(0);
}
.page-business #business-effect-col2 .business-effect-inner h4,
.page-system #business-effect-col2 .business-effect-inner h4,
.page-3services #business-effect-col2 .business-effect-inner h4 {
font-weight: bold;
font-size: 20px;
text-align: center;
margin-top: 0;
padding-top: 40px;
}
@media screen and (min-width: 768px) {
.page-business #business-effect-col2 .business-effect-inner h4,
.page-system #business-effect-col2 .business-effect-inner h4,
.page-3services #business-effect-col2 .business-effect-inner h4 {
padding-top: 40px;
}
}
.page-business #business-effect-col2 .business-effect-inner h5,
.page-system #business-effect-col2 .business-effect-inner h5,
.page-3services #business-effect-col2 .business-effect-inner h5 {
font-size: 14px;
color: #00489d;
font-weight: bold;
text-align: center;
margin: 8px auto;
}
@media screen and (min-width: 576px) {
.page-business #business-effect-col2 .business-effect-inner h5,
.page-system #business-effect-col2 .business-effect-inner h5,
.page-3services #business-effect-col2 .business-effect-inner h5 {
font-size: 18px;
}
}
.page-business #business-effect-col2 .business-effect-inner .business-effect-inner-img,
.page-system #business-effect-col2 .business-effect-inner .business-effect-inner-img,
.page-3services #business-effect-col2 .business-effect-inner .business-effect-inner-img {
text-align: center;
}
.page-business #business-effect-col2 .business-effect-inner .business-effect-inner-img img,
.page-system #business-effect-col2 .business-effect-inner .business-effect-inner-img img,
.page-3services #business-effect-col2 .business-effect-inner .business-effect-inner-img img {
width: 424px;
margin: 16px auto;
}
.page-business #twobuz,
.page-system #twobuz,
.page-3services #twobuz {
margin-bottom: -80px;
}
.page-business #twobuz #twobuz-col2,
.page-system #twobuz #twobuz-col2,
.page-3services #twobuz #twobuz-col2 {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.page-business #twobuz #twobuz-col2,
.page-system #twobuz #twobuz-col2,
.page-3services #twobuz #twobuz-col2 {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
}
.page-business #twobuz #twobuz-col2 .twobuz-inner,
.page-system #twobuz #twobuz-col2 .twobuz-inner,
.page-3services #twobuz #twobuz-col2 .twobuz-inner {
background: #00489d;
color: #fff;
padding: 0.001em 5% 40px;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.page-business #twobuz #twobuz-col2 .twobuz-inner,
.page-system #twobuz #twobuz-col2 .twobuz-inner,
.page-3services #twobuz #twobuz-col2 .twobuz-inner {
padding: 0.001em 32px 24px;
width: 46%;
margin-bottom: 0;
}
}
.page-business #twobuz #twobuz-col2 .twobuz-inner.active,
.page-system #twobuz #twobuz-col2 .twobuz-inner.active,
.page-3services #twobuz #twobuz-col2 .twobuz-inner.active {
opacity: 1;
transform: translateY(0);
}
.page-business #twobuz #twobuz-col2 .twobuz-inner h4,
.page-system #twobuz #twobuz-col2 .twobuz-inner h4,
.page-3services #twobuz #twobuz-col2 .twobuz-inner h4 {
text-align: center;
font-size: 24px;
margin-bottom: 24px;
padding-top: 30px;
margin-top: 0;
}
@media screen and (min-width: 768px) {
.page-business #twobuz #twobuz-col2 .twobuz-inner h4,
.page-system #twobuz #twobuz-col2 .twobuz-inner h4,
.page-3services #twobuz #twobuz-col2 .twobuz-inner h4 {
font-size: 32px;
padding-top: 40px;
}
}
.page-business #twobuz #twobuz-col2 .twobuz-inner h5,
.page-system #twobuz #twobuz-col2 .twobuz-inner h5,
.page-3services #twobuz #twobuz-col2 .twobuz-inner h5 {
text-align: center;
font-weight: bold;
margin: 16px auto;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner .hr-lightblue,
.page-system #twobuz #twobuz-col2 .twobuz-inner .hr-lightblue,
.page-3services #twobuz #twobuz-col2 .twobuz-inner .hr-lightblue {
margin: 16px 0 24px;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner p,
.page-system #twobuz #twobuz-col2 .twobuz-inner p,
.page-3services #twobuz #twobuz-col2 .twobuz-inner p {
margin: 5px 0;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner p.text-blue,
.page-system #twobuz #twobuz-col2 .twobuz-inner p.text-blue,
.page-3services #twobuz #twobuz-col2 .twobuz-inner p.text-blue {
color: #99ddee;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner p.text-plus::before,
.page-system #twobuz #twobuz-col2 .twobuz-inner p.text-plus::before,
.page-3services #twobuz #twobuz-col2 .twobuz-inner p.text-plus::before {
content: "+";
margin-right: 5px;
color: #fff;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner ul,
.page-system #twobuz #twobuz-col2 .twobuz-inner ul,
.page-3services #twobuz #twobuz-col2 .twobuz-inner ul {
margin-left: 1em;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner ul li,
.page-system #twobuz #twobuz-col2 .twobuz-inner ul li,
.page-3services #twobuz #twobuz-col2 .twobuz-inner ul li {
list-style: none;
margin: 5px 0;
line-height: 1.4;
text-indent: -1.3em;
}
.page-business #twobuz #twobuz-col2 .twobuz-inner ul li::before,
.page-system #twobuz #twobuz-col2 .twobuz-inner ul li::before,
.page-3services #twobuz #twobuz-col2 .twobuz-inner ul li::before {
content: "●";
margin-right: 5px;
}
.page-services-child.loaded #services-catch img,
.page-technology-child.loaded #services-catch img {
transform: scale(1);
opacity: 1;
width: 170%;
max-width: 170%;
}
@media screen and (min-width: 768px) {
.page-services-child.loaded #services-catch img,
.page-technology-child.loaded #services-catch img {
width: 130%;
max-width: 130%;
}
}
@media screen and (min-width: 960px) {
.page-services-child.loaded #services-catch img,
.page-technology-child.loaded #services-catch img {
width: 100%;
max-width: 100%;
}
}
.page-services-child.loaded #services-catch #services-catch-text h2,
.page-services-child.loaded #services-catch #services-catch-text h3,
.page-services-child.loaded #services-catch #services-catch-text p,
.page-technology-child.loaded #services-catch #services-catch-text h2,
.page-technology-child.loaded #services-catch #services-catch-text h3,
.page-technology-child.loaded #services-catch #services-catch-text p {
opacity: 1;
transform: translateY(30px);
}
.page-services-child #services-catch,
.page-technology-child #services-catch {
width: 100vw;
margin-left: calc(50% - 50vw);
position: relative;
margin-bottom: 48px;
overflow: hidden;
}
.page-services-child #services-catch img,
.page-technology-child #services-catch img {
width: 100%;
transform: scale(1.5);
transition: opacity 0.4s, transform 1s;
opacity: 0;
vertical-align: bottom;
}
.page-services-child #services-catch #services-catch-text,
.page-technology-child #services-catch #services-catch-text {
position: absolute;
top: 10px;
left: 1.5vw;
color: #fff;
font-weight: bold;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
}
.page-services-child #services-catch #services-catch-text h2,
.page-technology-child #services-catch #services-catch-text h2 {
line-height: 1;
font-weight: normal;
opacity: 0;
transform: translateY(30px);
transition: transform 1s 0.7s, opacity 1s 0.7s;
font-size: 8vw;
}
@media screen and (min-width: 1500px) {
.page-services-child #services-catch #services-catch-text h2,
.page-technology-child #services-catch #services-catch-text h2 {
font-size: 110px;
}
}
.page-services-child #services-catch #services-catch-text h3,
.page-technology-child #services-catch #services-catch-text h3 {
margin: 16px 0 -8px;
opacity: 0;
transform: translateY(30px);
transition: transform 1s 0.9s, opacity 1s 0.9s;
font-size: 3.6vw;
}
@media screen and (min-width: 768px) {
.page-services-child #services-catch #services-catch-text h3,
.page-technology-child #services-catch #services-catch-text h3 {
font-size: 3vw;
}
}
@media screen and (min-width: 960px) {
.page-services-child #services-catch #services-catch-text h3,
.page-technology-child #services-catch #services-catch-text h3 {
font-size: 32px;
}
}
.page-services-child #services-catch #services-catch-text p,
.page-technology-child #services-catch #services-catch-text p {
opacity: 0;
transform: translateY(30px);
transition: transform 1s 1.2s, opacity 1s 1.2s;
font-size: 3vw;
}
@media screen and (min-width: 768px) {
.page-services-child #services-catch #services-catch-text p,
.page-technology-child #services-catch #services-catch-text p {
font-size: 1.6vw;
}
}
@media screen and (min-width: 960px) {
.page-services-child #services-catch #services-catch-text p,
.page-technology-child #services-catch #services-catch-text p {
font-size: 16px;
}
}
.page-jeaniousonelc #jol-setup-box-sp {
position: relative;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #jol-setup-box-sp {
display: none;
}
}
.page-jeaniousonelc #jol-setup-box {
display: none;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #jol-setup-box {
display: block;
}
}
.page-jeaniousonelc #jol-setup {
margin-top: 8px;
position: relative;
}
.page-jeaniousonelc #jol-setup #jol-setup-img-1,
.page-jeaniousonelc #jol-setup #jol-setup-img-2,
.page-jeaniousonelc #jol-setup #jol-setup-img-3 {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s;
}
.page-jeaniousonelc #jol-setup #jol-setup-img-1.is-hover,
.page-jeaniousonelc #jol-setup #jol-setup-img-2.is-hover,
.page-jeaniousonelc #jol-setup #jol-setup-img-3.is-hover {
opacity: 1;
}
.page-jeaniousonelc #jol-setup-button {
display: flex;
justify-content: space-between;
margin-top: 8px;
}
.page-jeaniousonelc #jol-setup-button li {
background: #ccc;
border-radius: 100px;
width: 30%;
font-size: 23px;
font-weight: bold;
list-style: none;
margin: 0;
padding: 5px;
text-align: center;
text-indent: 0;
transition: 0.2s;
border: solid 2px #ccc;
}
.page-jeaniousonelc #jol-setup-button li:hover {
border-color: #00489d;
background: #fff;
color: #00489d;
cursor: pointer;
}
.page-jeaniousonelc #jol-setup-button li.clicked {
border-color: #00489d;
background: #00489d;
color: #ddd;
}
.page-jeaniousonelc #service-explain {
margin-top: 8px;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #service-explain {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
}
.page-jeaniousonelc #service-explain #service-explain-1 h5 span.service-explain-h5-s {
display: none;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #service-explain #service-explain-1 h5 span.service-explain-h5-s {
display: block;
}
}
.page-jeaniousonelc #service-explain .service-explain-inner {
padding: 0;
padding-bottom: 1px;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #service-explain .service-explain-inner {
width: 23%;
padding: 0;
}
}
.page-jeaniousonelc #service-explain .service-explain-inner a {
color: #fff;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #service-explain .service-explain-inner a {
color: #000;
}
}
.page-jeaniousonelc #service-explain .service-explain-inner.is-hover h5 {
background: #00489d;
color: #fff;
}
.page-jeaniousonelc #service-explain .service-explain-inner.is-hover a {
color: #fff;
}
.page-jeaniousonelc #service-explain .service-explain-inner h5 {
background: #00489d;
color: #fff;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #service-explain .service-explain-inner h5 {
background: #ccc;
color: #000;
}
}
.page-jeaniousonelc #service-explain .service-explain-inner h5 {
font-weight: bold;
font-size: 23px;
transition: 0.3s;
text-align: center;
margin: 0;
padding: 16px 0;
border-top-left-radius: 23px;
}
.page-jeaniousonelc #service-explain .service-explain-inner h5 .service-explain-h5-s {
font-size: 60%;
display: block;
}
.page-jeaniousonelc #service-explain .service-explain-inner p {
padding: 12px 24px;
line-height: 1.5;
}
.page-jeaniousonelc #jol-benefit h4 {
font-size: 18px;
color: #00489d;
background: #fff;
font-weight: bold;
margin-bottom: 8px;
padding: 0 8px 2px;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #jol-benefit h4 {
font-size: 24px;
}
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #jol-benefit #jol-benefit-sp {
display: none;
}
}
.page-jeaniousonelc #jol-benefit #jol-benefit-pc {
display: none;
}
@media screen and (min-width: 768px) {
.page-jeaniousonelc #jol-benefit #jol-benefit-pc {
display: block;
}
}
.page-jeaniousonelc #jol-voice {
margin-top: -16px;
}
#jol-voice-col2,
#jof-voice-col2 {
display: flex;
justify-content: center;
margin-top: 32px;
align-items: flex-start;
flex-wrap: wrap;
}
#jol-voice-col2.active .jol-voice-col2-inner,
#jol-voice-col2.active .jof-voice-col2-inner,
#jof-voice-col2.active .jol-voice-col2-inner,
#jof-voice-col2.active .jof-voice-col2-inner {
opacity: 1;
transform: translateY(0);
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(1),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(1),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(1),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(1) {
transition-delay: 0.2s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(2),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(2),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(2),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(2) {
transition-delay: 0.4s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(3),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(3),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(3),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(3) {
transition-delay: 0.6s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(4),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(4),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(4),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(4) {
transition-delay: 0.8s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(5),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(5),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(5),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(5) {
transition-delay: 1s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(6),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(6),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(6),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(6) {
transition-delay: 1.2s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(7),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(7),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(7),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(7) {
transition-delay: 1.4s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(8),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(8),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(8),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(8) {
transition-delay: 1.6s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(9),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(9),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(9),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(9) {
transition-delay: 1.8s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
opacity: 1;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(10),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(10),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(10),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(10) {
transition-delay: 2s;
}
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
padding: 20px 5%;
box-sizing: border-box;
width: 100%;
margin-bottom: 30px;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
}
@media screen and (min-width: 768px) {
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
padding: 20px 3%;
width: 46.67%;
margin-bottom: 64px;
}
#jol-voice-col2 .jol-voice-col2-inner:nth-child(odd),
#jol-voice-col2 .jof-voice-col2-inner:nth-child(odd),
#jof-voice-col2 .jol-voice-col2-inner:nth-child(odd),
#jof-voice-col2 .jof-voice-col2-inner:nth-child(odd) {
margin-right: 6%;
}
#jol-voice-col2 .jol-voice-col2-inner:last-child,
#jol-voice-col2 .jof-voice-col2-inner:last-child,
#jof-voice-col2 .jol-voice-col2-inner:last-child,
#jof-voice-col2 .jof-voice-col2-inner:last-child {
margin-right: 0;
}
}
@media screen and (min-width: 1200px) {
#jol-voice-col2 .jol-voice-col2-inner,
#jol-voice-col2 .jof-voice-col2-inner,
#jof-voice-col2 .jol-voice-col2-inner,
#jof-voice-col2 .jof-voice-col2-inner {
padding: 40px;
}
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client {
display: flex;
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo {
margin-right: 20px;
}
@media screen and (min-width: 1200px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo {
margin-right: 28px;
}
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img {
width: 120px;
}
@media screen and (min-width: 768px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img {
width: 13vw;
}
}
@media screen and (min-width: 1200px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client .jof-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jol-voice-col2-photo img,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client .jof-voice-col2-photo img {
width: 176px;
}
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3 {
font-size: 22px;
margin: 0;
}
@media screen and (min-width: 768px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3 {
font-size: 18px;
}
}
@media screen and (min-width: 768px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client h3,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client h3 {
font-size: 24px;
}
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p {
font-size: 12px;
line-height: 1.4;
margin: 8px 0;
}
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p:first-of-type,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p:first-of-type,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p:first-of-type,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p:first-of-type,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p:first-of-type,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p:first-of-type,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p:first-of-type,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p:first-of-type {
margin-top: 0;
margin-bottom: 16px;
}
@media screen and (min-width: 960px) {
#jol-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p,
#jol-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p,
#jol-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p,
#jol-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p,
#jof-voice-col2 .jol-voice-col2-inner .jol-voice-col2-client p,
#jof-voice-col2 .jol-voice-col2-inner .jof-voice-col2-client p,
#jof-voice-col2 .jof-voice-col2-inner .jol-voice-col2-client p,
#jof-voice-col2 .jof-voice-col2-inner .jof-voice-col2-client p {
font-size: 16px;
}
}
#service-footer {
margin-bottom: -96px;
}
@media screen and (min-width: 768px) {
#service-footer #service-footer-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
#service-footer #service-footer-ul.active li {
opacity: 1;
transform: translateY(0);
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(1) {
transition-delay: 0.2s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(2) {
transition-delay: 0.4s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(3) {
transition-delay: 0.6s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(4) {
transition-delay: 0.8s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(5) {
transition-delay: 1s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(6) {
transition-delay: 1.2s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(7) {
transition-delay: 1.4s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(8) {
transition-delay: 1.6s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(9) {
transition-delay: 1.8s;
}
#service-footer #service-footer-ul li {
opacity: 1;
}
#service-footer #service-footer-ul li:nth-child(10) {
transition-delay: 2s;
}
#service-footer #service-footer-ul li {
text-indent: 0;
padding: 0;
list-style: none;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
width: 280px;
text-align: center;
margin: 0 auto 32px;
}
@media screen and (min-width: 768px) {
#service-footer #service-footer-ul li {
margin: 0 0 32px;
width: 100%;
width: 32%;
}
#service-footer #service-footer-ul li:not(:nth-child(3n)) {
margin-right: 2%;
}
#service-footer #service-footer-ul li:last-child {
margin-right: 0;
}
}
#service-footer #service-footer-ul li a {
padding: 15px 5%;
display: block;
border-radius: 24px;
border-top-right-radius: 0;
background: #00489d;
color: #fff;
transition: 0.3s;
box-sizing: border-box;
border: solid 1px #00489d;
}
@media screen and (min-width: 1200px) {
#service-footer #service-footer-ul li a {
padding: 24px;
}
}
#service-footer #service-footer-ul li a:hover {
background: #fff;
color: #00489d;
}
#service-footer #service-footer-ul li a p {
font-size: 13px;
}
@media screen and (min-width: 1200px) {
#service-footer #service-footer-ul li a p {
font-size: 16px;
}
}
#service-footer #service-footer-ul li a p.service-footer-title {
font-size: 18px;
margin: 0;
line-height: 1.4;
}
@media screen and (min-width: 576px) {
#service-footer #service-footer-ul li a p.service-footer-title {
font-size: 2.667vw;
}
}
@media screen and (min-width: 1200px) {
#service-footer #service-footer-ul li a p.service-footer-title {
font-size: 32px;
}
}
.youtube {
width: 100%;
aspect-ratio: 16/9;
}
.youtube iframe {
width: 100%;
height: 100%;
}
body.page-betheanchor #bta-trouble #bta-trouble-ul {
margin-top: 40px;
}
@media screen and (min-width: 768px) {
body.page-betheanchor #bta-trouble #bta-trouble-ul {
display: flex;
flex-wrap: wrap;
margin-bottom: -100px;
}
}
body.page-betheanchor #bta-trouble #bta-trouble-ul li {
padding: 0;
margin: 0;
text-indent: 0;
list-style: none;
margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
body.page-betheanchor #bta-trouble #bta-trouble-ul li {
width: 48%;
}
body.page-betheanchor #bta-trouble #bta-trouble-ul li:nth-child(odd) {
margin-right: 4%;
}
}
body.page-betheanchor #bta-trouble #bta-trouble-ul li h4 {
font-size: 16px;
font-weight: bold;
margin: 8px 0 -8px;
}
body.page-betheanchor #bta-trouble #bta-trouble-ul li h4 .bta-trouble-ul-num {
font-size: 24px;
color: #00489d;
margin-right: 5px;
line-height: 1;
transform: translateY(2px);
display: inline-block;
}
body.page-betheanchor #bta-flow #bta-flow-attention {
text-align: center;
}
body.page-betheanchor #bta-flow #bta-flow-attention p {
display: inline-block;
text-align: left;
}
#bta-flow-ul,
#separation-flow-ul,
#jof-flow-ul {
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto;
max-width: 768px;
flex-wrap: wrap;
}
#bta-flow-ul li,
#separation-flow-ul li,
#jof-flow-ul li {
list-style: none;
text-indent: 0;
padding: 0;
margin: 0;
text-align: center;
line-height: 1.4;
position: relative;
width: 30.8%;
}
#bta-flow-ul li:not(:nth-child(3n)),
#separation-flow-ul li:not(:nth-child(3n)),
#jof-flow-ul li:not(:nth-child(3n)) {
margin-right: 2.5%;
}
@media screen and (min-width: 576px) {
#bta-flow-ul li,
#separation-flow-ul li,
#jof-flow-ul li {
width: 14.5%;
}
#bta-flow-ul li:not(:nth-child(3n)),
#separation-flow-ul li:not(:nth-child(3n)),
#jof-flow-ul li:not(:nth-child(3n)) {
margin-right: 0;
}
#bta-flow-ul li:not(:last-child),
#separation-flow-ul li:not(:last-child),
#jof-flow-ul li:not(:last-child) {
margin-right: 2.5%;
}
}
#bta-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .jof-flow-ul-img::after {
width: 2.5vw;
height: 5vw;
content: "";
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -14%;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2020%2040%22%20style%3D%22enable-background%3Anew%200%200%2020%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23999999%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M0%2C39.42V0l20%2C19.71L0%2C39.42z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@media screen and (min-width: 576px) {
#bta-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .jof-flow-ul-img::after {
width: 1.25vw;
height: 2.5vw;
}
}
@media screen and (min-width: 960px) {
#bta-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#bta-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#separation-flow-ul li:not(:last-child) .jof-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .bta-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .separation-flow-ul-img::after,
#jof-flow-ul li:not(:last-child) .jof-flow-ul-img::after {
width: 12px;
height: 24px;
}
}
#bta-flow-ul li .bta-flow-ul-img,
#bta-flow-ul li .jof-flow-ul-img,
#bta-flow-ul li .separation-flow-ul-img,
#separation-flow-ul li .bta-flow-ul-img,
#separation-flow-ul li .jof-flow-ul-img,
#separation-flow-ul li .separation-flow-ul-img,
#jof-flow-ul li .bta-flow-ul-img,
#jof-flow-ul li .jof-flow-ul-img,
#jof-flow-ul li .separation-flow-ul-img {
background: #fff;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 25.667vw;
height: 25.667vw;
width: 25.667vw;
}
@media screen and (min-width: 576px) {
#bta-flow-ul li .bta-flow-ul-img,
#bta-flow-ul li .jof-flow-ul-img,
#bta-flow-ul li .separation-flow-ul-img,
#separation-flow-ul li .bta-flow-ul-img,
#separation-flow-ul li .jof-flow-ul-img,
#separation-flow-ul li .separation-flow-ul-img,
#jof-flow-ul li .bta-flow-ul-img,
#jof-flow-ul li .jof-flow-ul-img,
#jof-flow-ul li .separation-flow-ul-img {
border-radius: 13.667vw;
height: 13.667vw;
width: 13.667vw;
}
}
@media screen and (min-width: 768px) {
#bta-flow-ul li .bta-flow-ul-img,
#bta-flow-ul li .jof-flow-ul-img,
#bta-flow-ul li .separation-flow-ul-img,
#separation-flow-ul li .bta-flow-ul-img,
#separation-flow-ul li .jof-flow-ul-img,
#separation-flow-ul li .separation-flow-ul-img,
#jof-flow-ul li .bta-flow-ul-img,
#jof-flow-ul li .jof-flow-ul-img,
#jof-flow-ul li .separation-flow-ul-img {
border-radius: 1000px;
height: 70%;
width: 100%;
}
}
@media screen and (min-width: 960px) {
#bta-flow-ul li .bta-flow-ul-img,
#bta-flow-ul li .jof-flow-ul-img,
#bta-flow-ul li .separation-flow-ul-img,
#separation-flow-ul li .bta-flow-ul-img,
#separation-flow-ul li .jof-flow-ul-img,
#separation-flow-ul li .separation-flow-ul-img,
#jof-flow-ul li .bta-flow-ul-img,
#jof-flow-ul li .jof-flow-ul-img,
#jof-flow-ul li .separation-flow-ul-img {
border-radius: 112px;
height: 112px;
width: 112px;
}
}
#bta-flow-ul li .bta-flow-ul-img img,
#bta-flow-ul li .jof-flow-ul-img img,
#bta-flow-ul li .separation-flow-ul-img img,
#separation-flow-ul li .bta-flow-ul-img img,
#separation-flow-ul li .jof-flow-ul-img img,
#separation-flow-ul li .separation-flow-ul-img img,
#jof-flow-ul li .bta-flow-ul-img img,
#jof-flow-ul li .jof-flow-ul-img img,
#jof-flow-ul li .separation-flow-ul-img img {
width: 55%;
}
#bta-flow-ul li .bta-flow-ul-img a,
#bta-flow-ul li .jof-flow-ul-img a,
#bta-flow-ul li .separation-flow-ul-img a,
#separation-flow-ul li .bta-flow-ul-img a,
#separation-flow-ul li .jof-flow-ul-img a,
#separation-flow-ul li .separation-flow-ul-img a,
#jof-flow-ul li .bta-flow-ul-img a,
#jof-flow-ul li .jof-flow-ul-img a,
#jof-flow-ul li .separation-flow-ul-img a {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#bta-flow-ul li p,
#separation-flow-ul li p,
#jof-flow-ul li p {
font-size: 15px;
}
@media screen and (min-width: 480px) {
#bta-flow-ul li p,
#separation-flow-ul li p,
#jof-flow-ul li p {
font-size: 2vw;
}
}
@media screen and (min-width: 960px) {
#bta-flow-ul li p,
#separation-flow-ul li p,
#jof-flow-ul li p {
font-size: 15px;
}
}
#separation-flow-ul li .separation-flow-ul-img {
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
}
#bta-work-details,
#jof-work-details {
margin: 0 auto;
text-align: center;
}
#bta-work-details h4,
#jof-work-details h4 {
font-size: 23px;
font-weight: bold;
margin-top: 40px;
margin-bottom: 16px;
}
#bta-work-details ul,
#jof-work-details ul {
text-align: left;
display: inline-block;
}
#bta-work-details ul li,
#jof-work-details ul li {
font-size: 16px;
text-indent: 0;
padding: 0;
list-style: none;
margin: 5px 0;
display: flex;
align-items: center;
line-height: 1.4;
}
@media screen and (min-width: 960px) {
#bta-work-details ul li,
#jof-work-details ul li {
font-size: 23px;
}
}
#bta-work-details ul li img,
#jof-work-details ul li img {
margin-right: 5px;
}
@media screen and (min-width: 768px) {
#bta-plan-box,
#jof-plan-box {
display: flex;
justify-content: space-between;
}
}
#bta-plan-box.active .bta-plan-box-inner,
#bta-plan-box.active .jof-plan-box-inner,
#jof-plan-box.active .bta-plan-box-inner,
#jof-plan-box.active .jof-plan-box-inner {
opacity: 1;
transform: translateY(0);
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(1),
#bta-plan-box .jof-plan-box-inner:nth-child(1),
#jof-plan-box .bta-plan-box-inner:nth-child(1),
#jof-plan-box .jof-plan-box-inner:nth-child(1) {
transition-delay: 0.2s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(2),
#bta-plan-box .jof-plan-box-inner:nth-child(2),
#jof-plan-box .bta-plan-box-inner:nth-child(2),
#jof-plan-box .jof-plan-box-inner:nth-child(2) {
transition-delay: 0.4s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(3),
#bta-plan-box .jof-plan-box-inner:nth-child(3),
#jof-plan-box .bta-plan-box-inner:nth-child(3),
#jof-plan-box .jof-plan-box-inner:nth-child(3) {
transition-delay: 0.6s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(4),
#bta-plan-box .jof-plan-box-inner:nth-child(4),
#jof-plan-box .bta-plan-box-inner:nth-child(4),
#jof-plan-box .jof-plan-box-inner:nth-child(4) {
transition-delay: 0.8s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(5),
#bta-plan-box .jof-plan-box-inner:nth-child(5),
#jof-plan-box .bta-plan-box-inner:nth-child(5),
#jof-plan-box .jof-plan-box-inner:nth-child(5) {
transition-delay: 1s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(6),
#bta-plan-box .jof-plan-box-inner:nth-child(6),
#jof-plan-box .bta-plan-box-inner:nth-child(6),
#jof-plan-box .jof-plan-box-inner:nth-child(6) {
transition-delay: 1.2s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(7),
#bta-plan-box .jof-plan-box-inner:nth-child(7),
#jof-plan-box .bta-plan-box-inner:nth-child(7),
#jof-plan-box .jof-plan-box-inner:nth-child(7) {
transition-delay: 1.4s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(8),
#bta-plan-box .jof-plan-box-inner:nth-child(8),
#jof-plan-box .bta-plan-box-inner:nth-child(8),
#jof-plan-box .jof-plan-box-inner:nth-child(8) {
transition-delay: 1.6s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(9),
#bta-plan-box .jof-plan-box-inner:nth-child(9),
#jof-plan-box .bta-plan-box-inner:nth-child(9),
#jof-plan-box .jof-plan-box-inner:nth-child(9) {
transition-delay: 1.8s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
opacity: 1;
}
#bta-plan-box .bta-plan-box-inner:nth-child(10),
#bta-plan-box .jof-plan-box-inner:nth-child(10),
#jof-plan-box .bta-plan-box-inner:nth-child(10),
#jof-plan-box .jof-plan-box-inner:nth-child(10) {
transition-delay: 2s;
}
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
margin-top: 40px;
border: solid 6px #00489d;
border-radius: 24px;
border-top-right-radius: 0;
box-sizing: border-box;
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
padding: 20px 4%;
width: 100%;
}
@media screen and (min-width: 768px) {
#bta-plan-box .bta-plan-box-inner,
#bta-plan-box .jof-plan-box-inner,
#jof-plan-box .bta-plan-box-inner,
#jof-plan-box .jof-plan-box-inner {
padding: 32px;
width: 48%;
}
}
#bta-plan-box .bta-plan-box-inner h3,
#bta-plan-box .jof-plan-box-inner h3,
#jof-plan-box .bta-plan-box-inner h3,
#jof-plan-box .jof-plan-box-inner h3 {
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
font-weight: bold;
font-size: 18px;
text-align: center;
margin-top: 0;
padding: 3px 0 4px;
}
@media screen and (min-width: 768px) {
#bta-plan-box .bta-plan-box-inner h3,
#bta-plan-box .jof-plan-box-inner h3,
#jof-plan-box .bta-plan-box-inner h3,
#jof-plan-box .jof-plan-box-inner h3 {
font-size: 23px;
}
}
#bta-plan-box .bta-plan-box-inner table,
#bta-plan-box .jof-plan-box-inner table,
#jof-plan-box .bta-plan-box-inner table,
#jof-plan-box .jof-plan-box-inner table {
border: none;
height: 80px;
}
#bta-plan-box .bta-plan-box-inner table th,
#bta-plan-box .bta-plan-box-inner table td,
#bta-plan-box .jof-plan-box-inner table th,
#bta-plan-box .jof-plan-box-inner table td,
#jof-plan-box .bta-plan-box-inner table th,
#jof-plan-box .bta-plan-box-inner table td,
#jof-plan-box .jof-plan-box-inner table th,
#jof-plan-box .jof-plan-box-inner table td {
padding: 0;
border: none;
font-size: 23px;
}
#bta-plan-box .bta-plan-box-inner table th .bta-tax,
#bta-plan-box .bta-plan-box-inner table td .bta-tax,
#bta-plan-box .jof-plan-box-inner table th .bta-tax,
#bta-plan-box .jof-plan-box-inner table td .bta-tax,
#jof-plan-box .bta-plan-box-inner table th .bta-tax,
#jof-plan-box .bta-plan-box-inner table td .bta-tax,
#jof-plan-box .jof-plan-box-inner table th .bta-tax,
#jof-plan-box .jof-plan-box-inner table td .bta-tax {
font-size: 70%;
}
#bta-plan-box .bta-plan-box-inner ul li,
#bta-plan-box .jof-plan-box-inner ul li,
#jof-plan-box .bta-plan-box-inner ul li,
#jof-plan-box .jof-plan-box-inner ul li {
list-style-position: outside;
margin: 5px 0 5px 1em;
padding-left: 0;
text-indent: 0;
line-height: 1.4;
}
#bta-solution-ul,
#jof-solution-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#bta-solution-ul.active li,
#jof-solution-ul.active li {
opacity: 1;
transform: translateY(0);
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(1),
#jof-solution-ul li:nth-child(1) {
transition-delay: 0.2s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(2),
#jof-solution-ul li:nth-child(2) {
transition-delay: 0.4s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(3),
#jof-solution-ul li:nth-child(3) {
transition-delay: 0.6s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(4),
#jof-solution-ul li:nth-child(4) {
transition-delay: 0.8s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(5),
#jof-solution-ul li:nth-child(5) {
transition-delay: 1s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(6),
#jof-solution-ul li:nth-child(6) {
transition-delay: 1.2s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(7),
#jof-solution-ul li:nth-child(7) {
transition-delay: 1.4s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(8),
#jof-solution-ul li:nth-child(8) {
transition-delay: 1.6s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(9),
#jof-solution-ul li:nth-child(9) {
transition-delay: 1.8s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 1;
}
#bta-solution-ul li:nth-child(10),
#jof-solution-ul li:nth-child(10) {
transition-delay: 2s;
}
#bta-solution-ul li,
#jof-solution-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
background: #fff;
position: relative;
padding: 0;
margin: 0 1%;
list-style: none;
margin-bottom: 32px;
text-indent: 0;
background: linear-gradient(45deg, transparent 26px, #fff 26px, #fff 100%);
width: 48%;
}
@media screen and (min-width: 768px) {
#bta-solution-ul li,
#jof-solution-ul li {
width: 23%;
}
}
#bta-solution-ul li::after,
#jof-solution-ul li::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 36px;
border: 18px solid #999;
border-left-color: transparent;
border-bottom-color: transparent;
box-sizing: border-box;
}
#bta-solution-ul li .jof-solution-div,
#jof-solution-ul li .jof-solution-div {
height: 100%;
padding: 16px 8% 32px;
padding-bottom: 70px;
box-sizing: border-box;
position: relative;
border-top: 2px solid #999;
border-right: 2px solid #999;
}
@media screen and (min-width: 768px) {
#bta-solution-ul li .jof-solution-div,
#jof-solution-ul li .jof-solution-div {
padding: 16px 20px 128px;
}
}
@media screen and (min-width: 1200px) {
#bta-solution-ul li .jof-solution-div,
#jof-solution-ul li .jof-solution-div {
padding: 16px 32px 128px;
}
}
#bta-solution-ul li .jof-solution-div:before,
#jof-solution-ul li .jof-solution-div:before {
content: "";
display: block;
width: 2px;
background: #999;
height: calc(100% - 36px);
position: absolute;
top: 0;
left: 0;
}
#bta-solution-ul li .jof-solution-div:after,
#jof-solution-ul li .jof-solution-div:after {
content: "";
display: block;
height: 2px;
background: #999;
width: calc(100% - 36px);
position: absolute;
bottom: 0;
right: 0;
}
#bta-solution-ul li img,
#jof-solution-ul li img {
position: absolute;
width: 50px;
bottom: 12px;
right: 12px;
}
@media screen and (min-width: 768px) {
#bta-solution-ul li img,
#jof-solution-ul li img {
width: 80px;
bottom: 32px;
right: 32px;
}
}
.page-separation #separation-example #separation-example-ul {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
margin-top: 8px;
flex-wrap: wrap;
}
.page-separation #separation-example #separation-example-ul > li {
margin: 0 0 20px;
width: 100%;
}
@media screen and (min-width: 576px) {
.page-separation #separation-example #separation-example-ul > li {
width: 49%;
}
.page-separation #separation-example #separation-example-ul > li:nth-child(odd) {
margin-right: 2%;
}
}
@media screen and (min-width: 960px) {
.page-separation #separation-example #separation-example-ul > li {
margin: 0;
width: 23%;
}
.page-separation #separation-example #separation-example-ul > li:nth-child(odd) {
margin-right: 0;
}
.page-separation #separation-example #separation-example-ul > li:not(:nth-child(4n)) {
margin-right: 2%;
}
}
.page-separation #separation-example #separation-example-ul > li {
border-radius: 24px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
padding: 0;
box-sizing: border-box;
list-style: none;
text-indent: 0;
}
.page-separation #separation-example #separation-example-ul > li h4 {
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
font-size: 18px;
padding: 8px 0;
text-align: center;
margin: 0;
border-top-right-radius: 0;
border-top-left-radius: 24px;
}
@media screen and (min-width: 1200px) {
.page-separation #separation-example #separation-example-ul > li h4 {
font-size: 23px;
}
}
.page-separation #separation-example #separation-example-ul > li p {
padding: 16px;
}
.page-separation #separation-example #separation-example-ul > li .separation-example-inner-ul li {
position: relative;
list-style: none;
padding-left: 18px;
text-indent: 0;
padding-right: 10px;
}
.page-separation #separation-example #separation-example-ul > li .separation-example-inner-ul li:after {
content: "";
display: block;
position: absolute;
background-image: url(//chromajean.com/wp-content/themes/chromajean/img/list-dot.png);
background-size: 14px;
left: -3px;
top: 5px;
width: 14px;
height: 14px;
}
@media screen and (min-width: 768px) {
.page-separation #separation-example #separation-example-ul > li .separation-example-inner-ul li:after {
left: -5px;
width: 18px;
background-size: 18px;
height: 18px;
}
}
.page-separation #separation-feature #separation-feature-box {
text-align: center;
margin-bottom: -8px;
}
@media screen and (min-width: 768px) {
.page-separation #separation-feature #separation-feature-box {
justify-content: space-between;
display: flex;
}
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner {
width: 100%;
}
@media screen and (min-width: 768px) {
.page-separation #separation-feature #separation-feature-box .separation-feature-inner {
width: 48%;
}
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner h4 {
font-size: 16px;
color: #fff;
border-radius: 12px;
border-top-right-radius: 0;
position: relative;
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner h4::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -48px;
border: 16px solid transparent;
border-top: 21px solid #00489d;
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner h4 a {
display: block;
color: #fff;
padding: 16px;
border-radius: 12px;
border-top-right-radius: 0;
background: #00489d;
border: solid 1px #00489d;
transition: 0.3s;
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner h4 a:hover {
background: #fff;
color: #00489d;
}
.page-separation #separation-feature #separation-feature-box .separation-feature-inner p {
margin-top: 40px;
font-size: 23px;
color: #ee6600;
font-weight: bold;
margin-bottom: 0;
}
.page-separation #separation-achievement .separation-achievement-box {
padding: 8px 0;
width: 100%;
max-width: 648px;
margin: 0 auto;
margin-top: 40px;
border-radius: 12px;
border-top-right-radius: 0;
box-sizing: border-box;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
}
@media screen and (min-width: 768px) {
.page-separation #separation-achievement .separation-achievement-box {
display: flex;
padding: 8px 16px;
}
}
@media screen and (min-width: 768px) {
.page-separation #separation-achievement .separation-achievement-box .separation-achievement-heading {
width: 112px;
flex-shrink: 0;
}
}
.page-separation #separation-achievement .separation-achievement-box .separation-achievement-heading p {
font-size: 16px;
line-height: 1.4;
text-align: center;
}
@media screen and (min-width: 768px) {
.page-separation #separation-achievement .separation-achievement-box .separation-achievement-heading p {
text-align: left;
}
}
.page-separation #separation-achievement .separation-achievement-box ul {
display: flex;
justify-content: center;
width: 100%;
}
.page-separation #separation-achievement .separation-achievement-box ul li {
list-style: none;
padding: 0 0 8px;
margin: 0;
text-indent: 0;
text-align: center;
width: 23.5%;
line-height: 1.4;
font-size: 13px;
}
@media screen and (min-width: 768px) {
.page-separation #separation-achievement .separation-achievement-box ul li {
font-size: 16px;
}
}
.page-separation #separation-achievement .separation-achievement-box ul li img {
width: 80px;
height: 80px;
margin: 0 auto;
display: block;
}
.page-separation #separation-faq #separation-faq-button {
display: flex;
justify-content: center;
}
.page-separation #separation-faq #separation-faq-button li {
width: 160px;
background: #fff;
color: #999;
text-align: center;
padding: 4px;
list-style: none;
text-indent: 0;
margin: 0 10px;
}
@media screen and (min-width: 768px) {
.page-separation #separation-faq #separation-faq-button li {
margin: 0 32px;
}
}
.page-separation #separation-faq #separation-faq-button li:hover {
cursor: pointer;
}
.page-separation #separation-faq #separation-faq-button li.selected {
background: #00489d;
color: #fff;
}
.page-separation #separation-faq #faq-analyze,
.page-separation #separation-faq #faq-separation {
display: none;
}
.page-separation #separation-faq #faq-analyze.selected,
.page-separation #separation-faq #faq-separation.selected {
display: block;
}
.page-separation #separation-faq-contact {
text-align: center;
margin: 48px 0;
}
.page-separation #separation-flow #separation-flow-attention {
text-align: center;
}
.page-separation #separation-flow #separation-flow-attention p {
display: inline-block;
text-align: left;
}
.faq-box {
margin-top: 8px;
}
.faq-box .faq-box-inner {
border-radius: 12px;
background: #fff;
border-top-right-radius: 0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
margin-bottom: 24px;
}
.faq-box .faq-q,
.faq-box .faq-a {
position: relative;
padding: 2px 40px 1px 50px;
}
.faq-box .faq-q:before,
.faq-box .faq-a:before {
width: 27px;
height: 27px;
content: "";
display: block;
position: absolute;
left: 12px;
top: 16px;
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%2300489D%3B%7D%20.st1%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M26%2C0h-2H8C3.58%2C0%2C0%2C3.58%2C0%2C8v18c0%2C4.42%2C3.58%2C8%2C8%2C8h18c4.42%2C0%2C8-3.58%2C8-8V10V8V0H26z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M27.9%2C26.52c-3.51%2C0.51-7.08%2C0.84-11.34%2C0.84c-6.06%2C0-11.1-3.21-11.1-9.72c0-7.17%2C4.98-11.01%2C11.85-11.01%20c6.15%2C0%2C10.89%2C3.45%2C10.89%2C9.96c-0.03%2C2.91-1.41%2C5.61-3.75%2C7.35V24c1.32-0.15%2C2.7-0.45%2C4.08-0.87L27.9%2C26.52z%20M9.99%2C17.41%20c0%2C4.11%2C2.67%2C6.78%2C6.78%2C6.78c4.44%2C0%2C6.9-3.24%2C6.9-7.5c0-3.99-2.4-6.87-6.51-6.87C12.66%2C9.82%2C9.99%2C13.06%2C9.99%2C17.41z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
.faq-box .faq-q:hover {
color: #999;
transition: color 0.3s;
cursor: pointer;
}
.faq-box .faq-q:hover:after {
color: #999;
}
.faq-box .faq-q:after {
transition: color 0.3s;
content: "";
display: inline-block;
vertical-align: middle;
color: #4795ee;
line-height: 1;
width: 1em;
height: 1em;
border: 0.1em solid currentColor;
border-left: 0;
border-bottom: 0;
box-sizing: border-box;
transform: translateY(-25%) rotate(135deg);
right: 16px;
position: absolute;
top: 20px;
}
.faq-box .faq-q.close:after {
transform: translateY(25%) rotate(-45deg);
}
.faq-box .faq-a {
border-top: solid 2px #3399cc;
display: none;
}
.faq-box .faq-a:before {
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%233399CC%3B%7D%20.st1%7Bfill%3A%23FFFFFF%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M26%2C0h-2H8C3.58%2C0%2C0%2C3.58%2C0%2C8v18c0%2C4.42%2C3.58%2C8%2C8%2C8h18c4.42%2C0%2C8-3.58%2C8-8V10V8V0H26z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M13.7%2C20.01c-1.14%2C2.22-2.25%2C4.62-3.33%2C6.99H5.42C9.02%2C20.43%2C12.53%2C13.72%2C15.86%2C7h5.43%20c2.25%2C6.66%2C4.8%2C13.38%2C7.29%2C20.01h-4.8c-0.69-2.4-1.53-4.77-2.37-6.99H13.7z%20M20.6%2C16.84l-2.31-6.69l-3.27%2C6.69H20.6z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
body.page-jeaniousonefc #jof-solution-ul {
margin-top: 8px;
}
body.page-jeaniousonefc #jof-flow-attention {
text-align: center;
}
body.page-jeaniousonefc #jof-flow-attention p {
display: inline-block;
text-align: left;
}
body.page-jeaniousonefc #jof-feature-box {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner {
position: relative;
width: 48%;
background: #00489d;
color: #fff;
border-radius: 24px;
border-top-right-radius: 0;
padding: 20px 5%;
box-sizing: border-box;
margin-bottom: 32px;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner {
padding: 32px;
}
}
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -48px;
border: 16px solid rgba(0, 0, 0, 0);
border-top-width: 16px;
border-top-style: solid;
border-top-color: rgba(0, 0, 0, 0);
border-top: 26px solid #00489d;
}
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner h4 {
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 0;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner h4 {
font-size: 23px;
}
}
body.page-jeaniousonefc #jof-feature-box .jof-feature-inner img {
width: 275px;
display: block;
margin: 0 auto;
}
body.page-jeaniousonefc p#jof-feature-attention {
text-align: center;
font-weight: bold;
font-size: 22px;
color: #ee6600;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc p#jof-feature-attention {
font-size: 32px;
}
}
body.page-jeaniousonefc #jof-benefit-box {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner {
width: 30%;
position: relative;
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner p {
font-size: 12px;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner p {
font-size: 16px;
}
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner:not(:last-child) .jof-benefit-img::after {
content: "";
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2040%2040%22%20style%3D%22enable-background%3Anew%200%200%2040%2040%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%233399CC%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Crect%20y%3D%2216%22%20class%3D%22st0%22%20width%3D%2240%22%20height%3D%228%22%2F%3E%20%3Crect%20x%3D%2216%22%20class%3D%22st0%22%20width%3D%228%22%20height%3D%2240%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -4vw;
width: 3vw;
height: 3vw;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner:not(:last-child) .jof-benefit-img::after {
right: -36px;
width: 32px;
height: 32px;
}
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner:nth-child(2) .jof-benefit-img::after {
right: -4vw;
width: 3vw;
height: 3vw;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner:nth-child(2) .jof-benefit-img::after {
right: -36px;
width: 37px;
height: 40px;
}
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner:nth-child(2) .jof-benefit-img::after {
background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2047%2050%22%20style%3D%22enable-background%3Anew%200%200%2047%2050%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%233399CC%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Crect%20y%3D%2220.6%22%20class%3D%22st0%22%20width%3D%2240%22%20height%3D%228%22%2F%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2221.5%2C49.2%2015.8%2C43.5%2034.8%2C24.6%2015.8%2C5.7%2021.5%2C0%2046.1%2C24.6%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner .jof-benefit-img {
text-align: center;
position: relative;
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner .jof-benefit-img img {
width: 192px;
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner h4 {
font-weight: bold;
margin: 8px 0 -4px;
font-size: 14px;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner h4 {
display: flex;
font-size: 16px;
align-items: center;
}
}
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner h4 .jof-benefit-num {
margin: 0 auto;
display: block;
color: #00489d;
font-size: 24px;
text-align: center;
}
@media screen and (min-width: 768px) {
body.page-jeaniousonefc #jof-benefit-box .jof-benefit-inner h4 .jof-benefit-num {
display: inline;
margin: 0;
text-align: left;
margin-right: 6px;
}
}
body.page-jeaniousonefc #service-footer {
margin-bottom: -32px;
}
.button-round {
margin: 48px auto;
text-align: center;
}
.button-round a {
background: #00489d;
color: #fff;
border-radius: 100px;
border: solid 1px #00489d;
text-align: center;
padding: 8px;
min-width: 240px;
display: inline-block;
box-sizing: border-box;
transition: 0.3s;
}
.button-round a:hover {
background: #fff;
color: #00489d;
}
.chroma-circle {
background: #fff;
border-radius: 24px;
padding: 16px;
box-sizing: border-box;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.box-desktop {
max-width: 768px;
margin: 0 auto;
}
.box-hd {
max-width: 960px;
margin: 0 auto;
}
.box-fhd {
max-width: 1200px;
margin: 0 auto;
}
.box-top-m {
margin: 48px auto;
}
.box-inner-ml {
padding-top: 48px;
padding-bottom: 80px;
}
.address-center {
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.address-center {
text-align: center;
}
}
#jol-setup-img-link {
position: absolute;
bottom: 10%;
left: 4%;
display: block;
width: 53%;
height: 70px;
text-indent: -9999px;
z-index: 100;
}
#jol-setup-img-link-sp {
position: absolute;
bottom: 8%;
left: 4%;
display: block;
width: 54%;
height: 10%;
text-indent: -9999px;
z-index: 100;
}
.page-title-s {
font-size: 65%;
display: block;
}
.bottom-contact-box {
margin: 100px auto;
}
.bottom-contact-box .bottom-contact-link-p {
text-align: center;
}
.bottom-contact-box .bottom-contact-link-p a {
display: inline-flex;
font-size: 18px;
padding: 8px 30px;
border-radius: 100px;
background: #00489d;
color: #fff;
margin-bottom: 50px;
transition: background 0.3s;
}
.bottom-contact-box .bottom-contact-link-p a:hover {
background: #3399cc;
}
.bottom-contact-box .bottom-contact-ul {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
@media screen and (min-width: 960px) {
.bottom-contact-box .bottom-contact-ul {
justify-content: space-between;
flex-direction: row;
}
}
.bottom-contact-box .bottom-contact-ul {
margin: 0;
padding: 0;
}
.bottom-contact-box .bottom-contact-ul li {
margin: 0;
padding: 0;
width: 340px;
max-width: 90%;
text-indent: 0;
list-style: none;
margin-bottom: 20px;
}
@media screen and (min-width: 960px) {
.bottom-contact-box .bottom-contact-ul li {
width: 32%;
margin-bottom: 0;
}
}
.bottom-contact-box .bottom-contact-ul li a {
display: flex;
align-items: center;
justify-content: center;
background: #00489d;
color: #fff;
border-radius: 20px;
border-top-right-radius: 0;
padding: 20px 0;
transition: background 0.3s;
}
.bottom-contact-box .bottom-contact-ul li a:hover {
background: #3399cc;
}
.bottom-contact-box .bottom-contact-ul li a .bottom-contact-img {
width: 40px;
height: 40px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 100px;
}
@media screen and (min-width: 1200px) {
.bottom-contact-box .bottom-contact-ul li a .bottom-contact-img {
width: 60px;
height: 60px;
}
}
.bottom-contact-box .bottom-contact-ul li a .bottom-contact-img img {
display: block;
}
.bottom-contact-box .bottom-contact-ul li a p.button-contact-text-title {
font-size: 16px;
font-weight: bold;
margin: 0;
}
@media screen and (min-width: 1200px) {
.bottom-contact-box .bottom-contact-ul li a p.button-contact-text-title {
font-size: 20px;
}
}
.bottom-contact-box .bottom-contact-ul li a p.button-contact-text-p {
font-size: 14px;
margin: 0;
}
@media screen and (min-width: 1200px) {
.bottom-contact-box .bottom-contact-ul li a p.button-contact-text-p {
font-size: 16px;
}
}
.bottom-contact-box .bottom-contact-ul-2content {
justify-content: center;
}
.bottom-contact-box .bottom-contact-ul-2content li {
margin-right: 2%;
margin-left: 2%;
}
#three-services-ul {
margin: 60px auto;
padding: 0;
list-style: none;
}
@media screen and (min-width: 768px) {
#three-services-ul {
margin: 60px auto 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
}
#three-services-ul > li {
box-sizing: border-box;
list-style: none;
letter-spacing: normal;
text-indent: 0;
margin: 0 auto 40px;
padding: 0;
border-radius: 20px;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
padding: 20px;
width: 100%;
}
@media screen and (min-width: 768px) {
#three-services-ul > li {
margin: 0;
width: 32%;
}
}
#three-services-ul > li h3 {
text-align: center;
font-size: 22px;
}
#three-services-ul > li p {
font-size: 16px;
line-height: 1.65;
text-align: justify;
}
#three-services-ul > li p.three-services-subtitle {
text-align: center;
max-width: 300px;
margin: 20px auto;
padding: 5px;
background: #fff;
}
#three-services-ul > li .three-services-icon {
margin: 0 auto;
width: 120px;
height: 120px;
background: #fff;
border-radius: 200px;
}
#three-services-ul > li .three-services-icon img {
display: block;
}
#three-services-ul > li .three-services-inner p {
text-align: center;
}
#three-services-ul > li .three-services-inner li {
font-size: 16px;
text-indent: 0em;
margin-top: 20px;
margin-bottom: 20px;
padding-left: 0em;
}
#three-services-ul > li .three-services-inner a {
color: #00489d;
}
#three-services-ul > li .three-services-inner a:hover {
color: #3399cc;
}
#three-services-ul > li .three-services-inner a.link-box {
display: block;
background: #00489d;
color: #fff;
width: 100%;
text-align: center;
max-width: 260px;
padding: 5px 10px;
margin: 20px auto;
box-sizing: border-box;
transition: background 0.3s;
}
#three-services-ul > li .three-services-inner a.link-box:hover {
background: #3399cc;
}
.bottom-contact-box-solo .bottom-contact-link-p a {
margin-bottom: 0;
}
#services-catch-text-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 32px;
color: #fff;
font-weight: bold;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
width: 94%;
}
#services-catch-text-center #services-catch-text-center-img {
width: clamp(3.125rem, 1.098rem + 8.54vw, 7.5rem);
height: clamp(3.125rem, 1.098rem + 8.54vw, 7.5rem);
}
@media screen and (min-width: 1500px) {
#services-catch-text-center #services-catch-text-center-img {
width: 120px;
height: 120px;
}
}
#services-catch-text-center #services-catch-text-center-img {
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 200px;
}
#services-catch-text-center h2 {
margin-bottom: 10px;
font-size: clamp(1.438rem, 0.441rem + 4.2vw, 4.375rem);
}
@media screen and (min-width: 1500px) {
#services-catch-text-center h2 {
margin-bottom: 20px;
font-size: 70px;
}
}
#services-catch-text-center h3 {
font-size: clamp(1rem, 0.661rem + 1.43vw, 2rem);
margin: 10px auto;
}
@media screen and (min-width: 1500px) {
#services-catch-text-center h3 {
font-size: 32px;
margin: 20px auto;
}
}
#services-catch-text-center p {
font-size: clamp(0.75rem, 0.708rem + 0.18vw, 0.875rem);
margin: 0 auto;
}
@media screen and (min-width: 1500px) {
#services-catch-text-center p {
margin: 15px auto;
font-size: 14px;
}
}
.text-center {
text-align: center;
}
p.technology-service-box-title {
background: #c9daeb;
padding: 5px;
text-align: center;
}
.technology-service-box {
width: 960px;
max-width: 94%;
margin: 40px auto 0;
}
.technology-service-box-ul {
box-sizing: border-box;
width: 100%;
padding: 20px;
}
@media screen and (min-width: 768px) {
.technology-service-box-ul {
justify-content: space-between;
display: flex;
flex-wrap: wrap;
}
}
.technology-service-box-ul li {
width: 100%;
margin: 0 auto 20px;
padding: 0;
list-style: none;
position: relative;
text-indent: 0;
}
@media screen and (min-width: 768px) {
.technology-service-box-ul li {
width: 48%;
}
}
.technology-service-box-ul li a {
box-sizing: border-box;
text-indent: 0;
background: #00489d;
color: #fff;
border-radius: 15px;
border-top-right-radius: 0;
display: flex;
padding: 16px;
font-size: 20px;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.technology-service-box-ul li a:hover {
background: #3399cc;
}
.technology-service-box-ul li:not(:only-child):nth-child(odd) {
margin-right: 4%;
}
.technology-service-box-ul li .new {
position: absolute;
left: -10px;
top: -10px;
background: #db272d;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 100px;
font-size: 14px;
}
@media screen and (min-width: 768px) {
#technology-check-q {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
}
#technology-check-q > li {
list-style: none;
text-indent: 0;
padding: 5px 10px 20px;
box-sizing: border-box;
margin: 0 auto 40px;
background: #fff;
border-radius: 15px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
position: relative;
max-width: 320px;
text-align: center;
}
@media screen and (min-width: 768px) {
#technology-check-q > li {
max-width: none;
margin: 0;
padding: 0 10px 20px;
width: 32%;
padding: 0 20px 20px;
}
}
#technology-check-q > li p {
font-size: 16px;
}
#technology-check-q > li::after {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -46px;
border: 24px solid transparent;
border-top-color: #fff;
}
#technology-check-q > li ul li {
text-align: left;
margin: 0;
padding: 0;
text-indent: 0;
list-style: none;
font-size: 16px;
}
#technology-check-q .technology-check-num {
font-size: 20px;
font-weight: bold;
color: #00489d;
margin-bottom: 8px;
border: solid 2px #00489d;
border-radius: 100px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
}
#technology-check-q .technology-check-q-title {
color: #00489d;
font-weight: bold;
}
#technology-recommended {
background: #fff;
padding: 20px;
width: 100%;
margin: 40px auto;
border-radius: 15px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
#technology-recommended p#technology-recommended-title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin-bottom: 40px;
}
#technology-recommended #technology-recommended-ul {
display: flex;
flex-wrap: wrap;
padding: 0;
}
@media screen and (min-width: 1200px) {
#technology-recommended #technology-recommended-ul {
padding: 0 40px;
}
}
#technology-recommended #technology-recommended-ul li {
list-style: none;
text-indent: 0;
padding: 0;
margin: 0;
width: 48%;
text-align: center;
box-sizing: border-box;
margin-bottom: 20px;
}
#technology-recommended #technology-recommended-ul li:not(:nth-child(even)) {
margin-right: 2%;
}
#technology-recommended #technology-recommended-ul li a {
display: block;
border-radius: 15px;
border-top-right-radius: 0;
background: #00489d;
color: #fff;
padding: 16px;
transition: background 0.3s;
}
#technology-recommended #technology-recommended-ul li a:hover {
background: #3399cc;
}
#technology-recommended #technology-recommended-ul li a.disabled {
background: #ccc;
pointer-events: none;
}
.fusion-map {
margin: 40px auto;
}
.fusion-map img {
border-radius: 15px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 576px) {
.fusion-desc {
display: flex;
}
.fusion-desc .fusion-desc-text {
width: 64%;
margin-right: 4%;
}
}
.fusion-desc .fusion-desc-img {
margin-top: 20px;
text-align: center;
}
@media screen and (min-width: 576px) {
.fusion-desc .fusion-desc-img {
margin-top: 0;
width: 34%;
}
}
.fusion-desc .fusion-desc-img img {
max-width: 100%;
height: auto;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
.contents-box-white {
margin: 40px auto 10px;
background: #fff;
border-radius: 15px;
border-top-right-radius: 0;
padding: 10px 5px;
box-sizing: border-box;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
.contents-box-white {
padding: 24px;
}
}
.contents-box-white h3 {
font-size: 22px;
text-align: center;
margin: 10px auto;
}
.contents-box-white .contents-box-inner {
text-align: center;
}
.contents-box-white ol {
display: inline-block;
}
.contents-box-white ol li {
text-align: left;
}
.robot-approach-ul {
margin-top: 40px;
}
@media screen and (min-width: 576px) {
.robot-approach-ul {
display: flex;
justify-content: space-between;
}
}
.robot-approach-ul li {
list-style: none;
text-indent: 0;
margin: 0 auto 30px;
padding: 0;
box-sizing: border-box;
text-align: center;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
border-radius: 15px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
padding: 20px;
}
@media screen and (min-width: 576px) {
.robot-approach-ul li {
margin: 0;
width: 31%;
}
}
.robot-approach-ul li h4 {
font-size: 18px;
margin-bottom: 12px;
margin-top: 10px;
font-weight: bold;
}
.robot-approach-ul li p {
font-size: 16px;
text-align: left;
line-height: 1.6;
}
.robot-approach-ul li img {
width: 150px;
height: auto;
margin-top: 20px;
}
@media screen and (min-width: 768px) {
.robot-approach-ul li img {
width: 250px;
}
}
p#range-diagram-p {
margin-top: 20px;
overflow-x: scroll;
}
@media screen and (min-width: 768px) {
p#range-diagram-p {
overflow: auto;
}
}
p#range-diagram-p img {
width: 1000px;
max-width: none;
}
@media screen and (min-width: 768px) {
p#range-diagram-p img {
width: 100%;
max-width: 100%;
}
}
.robot-modality-ul {
margin: 0 auto;
width: 540px;
display: flex;
justify-content: space-between;
margin-top: 40px;
max-width: 100%;
box-sizing: border-box;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
border-radius: 15px;
border-top-right-radius: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
padding: 20px 3%;
}
@media screen and (min-width: 768px) {
.robot-modality-ul {
padding: 20px;
}
}
.robot-modality-ul li {
list-style: none;
text-indent: 0;
padding: 0;
width: 32%;
box-sizing: border-box;
text-align: center;
margin: 0 auto;
}
.robot-modality-ul li h4 {
font-size: 18px;
margin-bottom: 12px;
}
.robot-modality-ul li p {
font-size: 14px;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.robot-modality-ul li p {
font-size: 18px;
}
}
.robot-modality-ul li img {
width: 90px;
height: auto;
display: block;
margin: 0 auto 20px;
}
.robot-platform-box {
text-align: center;
}
.robot-platform-ul {
display: inline-block;
}
.robot-platform-ul li {
text-align: left;
display: flex;
margin: 0 0 20px;
padding: 0;
text-indent: 0;
align-items: center;
}
.robot-platform-ul li p {
font-size: 14px;
margin: 0;
}
.robot-platform-ul li p.platform-text {
font-size: 18px;
font-weight: bold;
}
.robot-platform-ul .robot-platform-text {
margin-left: 10px;
}
.svg-cross {
width: 60px;
height: 60px;
margin: 20px auto;
}
.svg-cross .cls-1 {
fill: none;
stroke: #39c;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 10px;
}
.svg-check {
width: 40px;
height: 35px;
}
.svg-check .cls-1 {
stroke: #00489d;
stroke-width: 7px;
}
.svg-check .cls-1,
.svg-check .cls-2,
.svg-check .cls-3 {
fill: none;
stroke-linejoin: round;
}
.svg-check .cls-1,
.svg-check .cls-3 {
stroke-linecap: round;
}
.svg-check .cls-2 {
stroke: #39c;
stroke-width: 5px;
}
.svg-check .cls-3 {
stroke: #fff;
stroke-width: 14px;
}
.robot-flow-ul {
max-width: 90%;
margin: 0 auto;
}
@media screen and (min-width: 1200px) {
.robot-flow-ul {
min-width: 100%;
}
}
.robot-flow-ul li {
margin: 0;
list-style: none;
text-indent: 0;
margin-bottom: 53px;
background: #fff;
position: relative;
min-height: 50px;
display: flex;
align-items: center;
flex-direction: column;
padding: 40px 5% 20px;
}
@media screen and (min-width: 768px) {
.robot-flow-ul li {
margin-bottom: 30px;
flex-direction: row;
padding: 10px 5px;
padding-left: 40px;
}
}
.robot-flow-ul li::after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #999;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
.robot-flow-ul li::after {
left: -25px;
transform: none;
}
}
.robot-flow-ul li:first-child .robot-step {
background: #5ab1e4;
}
.robot-flow-ul li:nth-child(2) .robot-step {
background: #4da2da;
}
.robot-flow-ul li:nth-child(3) .robot-step {
background: #4093d0;
}
.robot-flow-ul li:nth-child(4) .robot-step {
background: #3384c6;
}
.robot-flow-ul li:nth-child(5) .robot-step {
background: #1a66b1;
}
.robot-flow-ul li:nth-child(6) .robot-step {
background: #00489d;
}
.robot-flow-ul li:nth-child(7) .robot-step {
background: #00489d;
}
.robot-flow-ul li:last-child::after {
content: none;
}
.robot-flow-ul li p {
margin: 0;
font-size: 16px;
line-height: 1.4;
}
.robot-flow-ul li .robot-step {
position: absolute;
flex-shrink: 0;
font-size: 20px;
font-weight: bold;
color: #fff;
background: #00489d;
border-radius: 100px;
width: 50px;
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
justify-content: center;
left: 50%;
transform: translateX(-50%);
margin: 40px auto 70px;
margin-top: -65px;
}
@media screen and (min-width: 768px) {
.robot-flow-ul li .robot-step {
margin: 0 16px 0 0;
left: -15px;
top: auto;
width: 80px;
height: 80px;
}
}
.robot-flow-ul li .robot-step .robot-step-en {
font-size: 12px;
}
.robot-flow-ul li .robot-step-title {
width: 200px;
flex-shrink: 0;
font-weight: bold;
color: #00489d;
text-align: center;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.robot-flow-ul li .robot-step-title {
margin-bottom: 0;
text-align: left;
width: auto;
}
}
@media screen and (min-width: 960px) {
.robot-step-text-row {
display: flex;
}
}
.robot-step-text-row a {
background: #00489d;
color: #fff;
border-radius: 100px;
padding: 2px 16px;
transition: background 0.3s;
margin: 15px 0 0 0;
text-align: center;
display: block;
}
@media screen and (min-width: 960px) {
.robot-step-text-row a {
margin: 0 0 0 10px;
}
}
.robot-step-text-row a:hover {
background: #3399cc;
}
p.service-notice {
text-align: right;
font-size: 14px;
}
.implementation-results {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
border-radius: 15px;
border-top-right-radius: 0;
padding: 40px 3%;
}
@media screen and (min-width: 768px) {
.implementation-results {
padding: 40px 20px;
}
}
.implementation-results ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.implementation-results ul li {
margin: 0 auto;
padding: 0;
list-style: none;
text-indent: 0;
width: 32%;
text-align: center;
}
.implementation-results ul li img {
width: 70%;
margin: 0 auto 10px;
display: block;
}
.implementation-results ul li {
margin: 10px auto;
font-size: 14px;
font-weight: bold;
}
@media screen and (min-width: 768px) {
.implementation-results ul li {
font-size: 16px;
}
}
section p.text-notice {
font-size: 12px;
}
@media screen and (min-width: 768px) {
section p.text-notice {
font-size: 14px;
}
}
#click-map-box {
overflow: auto;
padding-bottom: 15px;
}
#click-map {
width: 1200px;
position: relative;
}
#click-map #click-1,
#click-map #click-2,
#click-map #click-3,
#click-map #click-4,
#click-map #click-5 {
position: absolute;
top: 0;
text-indent: -9999px;
left: 8%;
display: block;
width: 16%;
height: 8%;
}
#click-map #click-1 {
top: 20%;
}
#click-map #click-2 {
top: 37%;
}
#click-map #click-3 {
top: 54%;
}
#click-map #click-4 {
top: 71%;
}
#click-map #click-5 {
top: 88%;
}
#click-map #click-1-pop,
#click-map #click-2-pop,
#click-map #click-3-pop,
#click-map #click-4-pop,
#click-map #click-5-pop {
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
position: absolute;
background: #99ddee;
border-radius: 10px;
font-size: 13px;
padding: 5px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px;
left: 24.5%;
top: 20%;
}
#click-map #click-1-pop.on,
#click-map #click-2-pop.on,
#click-map #click-3-pop.on,
#click-map #click-4-pop.on,
#click-map #click-5-pop.on {
opacity: 1;
}
#click-map #click-1-pop::before,
#click-map #click-2-pop::before,
#click-map #click-3-pop::before,
#click-map #click-4-pop::before,
#click-map #click-5-pop::before {
content: "";
position: absolute;
left: -39px;
top: 50%;
transform: translateY(-50%) scaleY(0.5);
width: 0;
height: 0;
border: 20px solid transparent;
border-right-color: #99ddee;
}
#click-map #click-1-pop {
top: 20%;
}
#click-map #click-2-pop {
top: 37%;
}
#click-map #click-3-pop {
top: 54%;
}
#click-map #click-4-pop {
top: 71%;
}
#click-map #click-5-pop {
top: 88%;
}
#chromatography-ul {
display: flex;
justify-content: space-between;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#chromatography-ul.active li {
opacity: 1;
transform: translateY(0);
}
#chromatography-ul li {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 0.5s;
background: #fff;
position: relative;
padding: 0;
margin: 0 1%;
list-style: none;
margin-bottom: 32px;
text-indent: 0;
width: 48%;
background: linear-gradient(45deg, transparent 26px, #fff 26px, #fff 100%);
display: flex;
flex-direction: column;
}
@media screen and (min-width: 768px) {
#chromatography-ul li {
width: 31%;
}
}
.chromatography-div-box {
width: 90%;
margin: 0 auto 40px;
position: relative;
}
.chromatography-div-box::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 36px;
height: 36px;
border: 18px solid #999;
border-left-color: transparent;
border-bottom-color: transparent;
box-sizing: border-box;
}
.chromatography-div-text {
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
padding: 20px;
border-radius: 15px;
position: relative;
}
.chromatography-div-text::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -79px;
border: 40px solid transparent;
border-right-width: 25px;
border-left-width: 25px;
border-bottom-color: #cee3f5;
}
.chromatography-div-text .chromatography-div-text-img {
width: 160px;
height: auto;
margin-bottom: 10px;
}
.chromatography-div {
height: 100%;
padding: 16px 8% 32px;
padding-bottom: 70px;
box-sizing: border-box;
position: relative;
border-top: 2px solid #999;
border-right: 2px solid #999;
}
@media screen and (min-width: 768px) {
.chromatography-div {
padding: 16px 20px 128px;
}
}
@media screen and (min-width: 1200px) {
.chromatography-div {
padding: 16px 32px 128px;
}
}
.chromatography-div:before {
content: "";
display: block;
width: 2px;
background: #999;
height: calc(100% - 36px);
position: absolute;
top: 0;
left: 0;
}
.chromatography-div:after {
content: "";
display: block;
height: 2px;
background: #999;
width: calc(100% - 36px);
position: absolute;
bottom: 0;
right: 0;
}
.chromatography-div img {
position: absolute;
width: 50px;
bottom: 12px;
right: 12px;
}
@media screen and (min-width: 768px) {
.chromatography-div img {
width: 80px;
bottom: 32px;
right: 32px;
}
}
.chromatography-flow-ul li {
background: #e2e2e2;
}
#expert-ul {
display: flex;
justify-content: space-between;
margin-top: 50px;
flex-wrap: wrap;
}
#expert-ul li {
margin: 0 auto 20px;
list-style: none;
text-indent: 0;
padding: 0;
background: #fff;
border-radius: 1000px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
aspect-ratio: 1/1;
position: relative;
width: 48%;
}
@media screen and (min-width: 768px) {
#expert-ul li {
width: 23%;
margin: 0 auto;
}
}
#expert-ul li img,
#expert-ul li span {
position: relative;
z-index: 2;
}
#expert-ul li:before {
content: "";
width: calc(100% - 4px);
height: calc(100% - 4px);
background: #bcdaf1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 1000px;
}
#expert-ul li:after {
content: "";
width: calc(100% - 12px);
height: calc(100% - 12px);
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 1000px;
}
#expert-ul li img {
width: 35%;
height: auto;
}
#expert-ul li .expert-ul-title {
font-size: 20px;
font-weight: bold;
}
.svg-pen {
width: 38px;
height: 38px;
}
.svg-pen .cls-1 {
fill: #fff;
}
.page-title .svg-pen {
width: 32px;
height: 32px;
transform: translateY(5px);
margin-left: 10px;
filter: drop-shadow(0 0 2px rgb(255, 255, 255)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}
@media screen and (min-width: 768px) {
.page-title .svg-pen {
width: 52px;
height: 52px;
}
}
.page-title .svg-pen .cls-1 {
fill: #000;
}
p.writing-button {
display: flex;
margin: 0 auto 80px;
justify-content: center;
}
p.writing-button a {
position: relative;
text-align: center;
padding: 10px 30px 10px 60px;
border-radius: 100px;
background: #99ddee;
color: #00489d;
font-weight: bold;
transition: background 0.3s, color 0.3s;
border: solid 2px #00489d;
}
p.writing-button a:hover {
background: #00489d;
color: #fff;
}
p.writing-button a .writing-button-svg {
position: absolute;
left: -10px;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background: #00489d;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1000px;
}
p.writing-button a .writing-button-svg svg {
width: 24px;
height: 24px;
}
p.writing-button a .writing-button-svg svg .cls-1 {
fill: #fff;
}
.text-subtitle {
font-size: 70%;
display: block;
}
.writing-ul {
display: flex;
margin-top: 40px;
flex-wrap: wrap;
}
.writing-ul li {
list-style: none;
text-indent: 0;
margin: 0;
padding: 0;
padding: 20px;
box-sizing: border-box;
width: 100%;
}
@media screen and (min-width: 576px) {
.writing-ul li {
width: 48%;
}
.writing-ul li:not(:nth-child(2n)) {
margin-right: 2%;
}
}
@media screen and (min-width: 960px) {
.writing-ul li {
width: 32%;
}
.writing-ul li:not(:nth-child(2n)) {
margin-right: 0;
}
.writing-ul li:not(:nth-child(3n)) {
margin-right: 2%;
}
}
.writing-ul li a {
color: #222;
font-size: 14px;
}
.writing-ul li a img {
transition: opacity 0.3s;
}
.writing-ul li a:hover {
color: #00489d;
}
.writing-ul li a:hover img {
opacity: 0.7;
}
.writing-ul li a span.writing-img {
display: block;
padding: 20px;
background: rgb(230, 240, 250);
background: linear-gradient(140deg, rgb(230, 240, 250) 0%, rgb(134, 189, 230) 100%);
border-radius: 15px;
position: relative;
margin-bottom: 20px;
}
.writing-ul li a span.writing-num {
position: absolute;
bottom: -10px;
left: -10px;
background: #00489d;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
width: 60px;
height: 60px;
color: #fff;
font-weight: bold;
font-size: 32px;
line-height: 1;
flex-direction: column;
}
.writing-ul li a span.writing-num br {
display: none;
}
.writing-ul li a span.writing-num .extra {
display: block;
font-size: 50%;
}
.writing-ul-2 li a span.writing-num {
background: #3399cc;
}
.writing-ul-2 li a span.writing-img {
background: #fff;
}
.wpcf7-list-item {
display: block;
}