@charset "UTF-8";
@charset "UTF-8";

  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thread, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, main, menu, nav.gnav, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
font-weight: normal;
}
body {
line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav.gnav, section {
display: block;
}
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
input, select {
vertical-align: middle;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}
body.no-scroll {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
} :root {
--font-color: #26282c;
}
body {
font-size: 16px;
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
line-height: 1.5;
-webkit-text-size-adjust: 100%;
color: var(--font-color);
}
.h3 {
font-size: 26px;
font-weight: bolder;
line-height: 2.5em;
}
.h4 {
margin-bottom: 0.5em;
font-size: 20px;
font-weight: bolder;
line-height: 1.5em;
clear: both;
}
.h5 {
margin-bottom: 0.5em;
padding: 5px 0;
font-weight: bolder;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
}
a {
color: var(--font-color);
text-decoration: none;
cursor: pointer;
}
a:visited {
color: var(--font-color);
}
a.url {
text-decoration-line: underline;
color: var(--font-color);
}
a.url:hover {
text-decoration-line: none;
color: #808080;
}
hr {
clear: both;
} :root {
--nav-height: 80px;
}
*, *:before, *:after {
box-sizing: border-box;
}
#wrap {
padding-top: var(--nav-height);
overflow: hidden;
}
.container {
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1024px; } }
main section.section {
padding: 40px 0;
}
@media (max-width: 768px) {
main section.section { padding: 30px 0 40px 0; }
}
main section.section .section-title {
text-align: center;
margin-bottom: 25px;
}
main section.section .section-title > h2 {
font-size: 30px;
font-weight: 600;
color: #172651;
}
main section.section .section-title > h2 > span {
display: block;
font-size: 12px;
font-weight: normal;
color: #26282c;
}
main section.section .section-title > h2 > span::before,
main section.section .section-title > h2 > span::after {
content: "\00A0\02013\00A0";
}
main section.section .section-title > p {
max-width: 100%;
margin-top: 20px;
}
@media (max-width: 768px) {
main section.section .section-title > p { text-align: left; }
}
article ol {
padding-left: 2em;
}
article ol > li.list-title {
font-size: 18px;
line-height: 2.5em;
}
article ol > p {
margin-bottom: 0.5em;
}
.row {
display: flex;
width: 100%;
flex-wrap: wrap;
}
@media (min-width: 768px) {
.col-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.col-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.col-3 { flex-basis: 25%; max-width: 25%; }
.col-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.col-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.col-6 { flex-basis: 50%; max-width: 50%; }
.col-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.col-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.col-9 { flex-basis: 75%; max-width: 75%; }
.col-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.col-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.col-12 { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 768px) {
.col-sm-1 { flex-basis: 8.333333%; max-width: 8.333333%; }
.col-sm-2 { flex-basis: 16.666667%; max-width: 16.666667%; }
.col-sm-3 { flex-basis: 25%; max-width: 25%; }
.col-sm-4 { flex-basis: 33.333333%; max-width: 33.333333%; }
.col-sm-5 { flex-basis: 41.666667%; max-width: 41.666667%; }
.col-sm-6 { flex-basis: 50%; max-width: 50%; }
.col-sm-7 { flex-basis: 58.333333%; max-width: 58.333333%; }
.col-sm-8 { flex-basis: 66.666667%; max-width: 66.666667%; }
.col-sm-9 { flex-basis: 75%; max-width: 75%; }
.col-sm-10 { flex-basis: 83.333333%; max-width: 83.333333%; }
.col-sm-11 { flex-basis: 91.666667%; max-width: 91.666667%; }
.col-sm-12 { flex-basis: 100%; max-width: 100%; }
}
.center { text-align: center; }
.right { text-align: right; }
.left { text-align: left; }
.pull-right { float: right; }
.pull-left { float: left; }
.smaller { font-size: 0.8em; } @media (max-width: 768px) { .lg-only { display: none !important; } }
@media (min-width: 768px) { .sm-only { display: none !important; } } .m-1 { margin: 10px; }
.m-5 { margin: 20px; }
.m-10 { margin: 40px; }
.mx-1 { margin-right: 10px; margin-left: 10px; }
.mx-5 { margin-right: 20px; margin-left: 20px; }
.mx-10 { margin-right: 40px; margin-left: 40px; }
.mx-150 { margin-right: 150px; margin-left: 150px; }
@media (max-width: 992px) {
.m-1 { margin: 10px 0; }
.m-5 { margin: 20px 0; }
.m-10 { margin: 40px 0; }
.mx-1, .mx-5, .mx-10, .mx-150 { margin: 0; }
}
.my-1 { margin-top: 10px; margin-bottom: 10px; }
.my-10 { margin-top: 30px; margin-bottom: 30px; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 10px; }
.mt-5 { margin-top: 20px; }
.mt-10 { margin-top: 30px; }
.mt-15 { margin-top: 40px; }
.mt-20 { margin-top: 50px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 10px; }
.mb-5 { margin-bottom: 20px; }
.mb-10 { margin-bottom: 30px; }
.mb-15 { margin-bottom: 40px; }
.mb-20 { margin-bottom: 50px; } .p-1 { padding: 10px; }
.p-5 { padding: 20px; }
.p-10 { padding: 40px; }
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 10px; }
.pt-5 { padding-top: 20px; }
.pt-10 { padding-top: 30px; }
.pt-15 { padding-top: 40px; }
.pb-10 { padding-bottom: 30px; }
.px-10 { padding-right: 40px; padding-left: 40px; }
.px-20 { padding-right: 80px; padding-left: 80px; }
@media (max-width: 992px) {
.px-10, .px-20 { padding-right: 0px; padding-left: 0px; }
}
.bg-gray { background-color: #f9f9f9 !important; }
.radius { border-radius: 10px; }
.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2); } img { max-width: 100%; } .btn {
padding: 12px 15px;
display: inline-block;
font-size: 14px;
text-decoration: none;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
color: #ffffff !important;
border-radius: 3px;
}
.btn-sm {
min-width: 180px;
padding: 10px 15px 8px 15px;
font-size: 13px;
}
.btn:hover {
opacity: 0.8;
transition: 1.0s;
color: #ffffff !important;
}
.btn-navy { background-color: #172651; }
.btn-orange { background-color: #fe5b10; }
.btn-red { background-color: #ff0000; }
.btn-gray { background-color: #78858f; } .table {
width: 100%;
box-sizing: border-box; border-collapse: separate; border-spacing: 0;
border-radius: 10px;
overflow: hidden; } table.border {
border: 1px solid #b5b1b1;
}
.table th, .table td {
padding: 24px 15px;
vertical-align: middle;
background-color: #fff; border-bottom: 1px solid #b5b1b1;
border-right: 1px solid #b5b1b1;
} .table th:last-child, 
.table td:last-child {
border-right: none;
} .table tbody tr:last-child td {
border-bottom: none;
}
.table > thead > tr > th {
padding: 15px;
background-color: #efefef;
text-align: left;
}
.corporate-profile .table th {
width: 25%;
} .card {
max-width: 100%;
border: 1px solid #e3e3e3;
border-radius: 10px;
background-color: #ffffff;
}
.card .card-title {
padding: 5px 15px;
font-size: 16px;
font-weight: bolder;
color: #888888;
}
.card .card-text {
padding: 5px 15px;
font-size: 14px;
}
.card .card-img {
height: 180px;
width: 100%;
border-radius: 5px 5px 0 0;
object-fit: cover;
}  button, input, select, textarea {
font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
input[type="button"], input[type="submit"] {
border: none;
cursor: pointer;
}
.contact-form {
margin: 0 auto;
padding: 0 40px;
padding-bottom: 40px;
max-width: 900px;
} .contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
display: block;
padding: 12px;
margin-top: 2px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
}
.contact-form input:focus,
.contact-form textarea:focus {
outline: solid 2px #172651;
}
.contact-form p {
margin-top: 1.5em;
} .contact-form label {
font-size: 0.8em;
}
.contact-form span.required {
margin-left: 0.8em;
padding: 2px 8px;
font-size: 0.7em;
color: #fff;
background-color: #a71717;
border-radius: 3px;
vertical-align: middle;
} .radio-style .wpcf7-radio {
margin-top: 2px;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 10px !important;
width: 100% !important;
}
.radio-style .wpcf7-list-item {
display: block !important;
flex: 1 !important;
margin: 0 !important;
} .radio-style .wpcf7-list-item label {
display: block !important;
text-align: center;
padding: 15px 5px !important;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
color: #888;
font-size: 14px; cursor: pointer;
margin: 0 !important; }
.radio-style input[type="radio"] {
display: none !important;
}  .radio-style input[type="radio"]:checked + .wpcf7-list-item-label {
color: #fff !important;
} .radio-style .wpcf7-list-item label:has(input[type="radio"]:checked) {
background-color: #2c3e66 !important;
color: #fff !important;
} .radio-style input[type="radio"]:checked + .wpcf7-list-item-label {
color: #fff !important;
} .wpcf7-list-item { margin-left: 0; }
.contact-form input[type=checkbox] {
position: relative;
-webkit-appearance: none;
appearance: none;
margin-top: 3px;
margin-left: 0;
width: 30px;
height: 30px;
color: #172651;
border: solid 1.5px #ccc;
background-color: #fff;
border-radius: 5px;
vertical-align: middle;
}
.contact-form input[type=checkbox]:checked {
background-color: #172651;
}
.contact-form input[type=checkbox]:checked::before {
content: "";
position: absolute;
top: 2px;
left: 1px;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline fill='none' stroke='white' stroke-width='3' points='2,7.3 7.3,12.7 18,2 '/%3E%3C/svg%3E");
background-size: 80%;
background-position: center;
background-repeat: no-repeat;
} .checkbox-group .wpcf7-list-item-label {
position: relative;
top: 4px;
font-size: 13px;
margin-left: 5px;
}
.wpcf7-not-valid-tip {
position: absolute;
padding-top: 2px;
font-size: 11px;
color: #a71717;
}
.wpcf7-response-output {
position: absolute;
left: 50%;
padding: 0 !important;
margin: 1.5em 0 !important;
transform: translateX(-50%);
font-size: 0.8em;
color: #a71717;
border: none !important;
}
.wpcf7-spinner {
position: absolute;
} @media screen and (max-width: 767px) {
.contact-form { padding: 0; }
.radio-style .wpcf7-radio { flex-direction: column !important; }
}
.campany_logo {
margin-top: 50px;
width: 75%;
}
.logo {
max-width: 100%;
}
.agree {
margin-top: 11px;
margin-left: 2px;
} .modal {
display: none;
position: fixed;
top: 0;
left: 0;
padding: 5vh 0;
height: 100%;
width: 100%;
text-align: center;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: rgba(0, 0, 0, 50%);
z-index: 999;
}
.modal-content {
display: inline-block;
position: relative;
height: 90vh;
max-width: 800px;
width: 90%;
text-align: left;
scrollbar-width: thin;
background: white;
border: 1px solid #78858f;
border-radius: 10px;
}
.modal-header {
display: flex;
justify-content: space-between;
padding: 5px 20px;
height: 55px;
border-bottom: 1px solid #888;
}
.modal-header > h3 {
text-decoration: none;
font-size: 18px;
}
.modal-body {
padding: 15px 30px;
height: calc(90vh - 55px);
font-size: 13px;
overflow-y: scroll;
scrollbar-width: thin;
}
.modal-body::-webkit-scrollbar {
width: 0;
} #header {
position: fixed;
top: 0;
width: 100%;
height: var(--nav-height);
font-size: 14px;
background-color: #172651;
border-bottom: 2px solid #a8a8a8;
z-index: 100;
}
#header .menu-btn {
position: absolute;
right: 15px;
margin-top: 20px;
width: 40px;
height: 40px;
font-size: 18px;
color: #ffffff;
background-color: #223875;
border: none;
}
#header .menu-btn:hover {
background-color: #131F42;
}
#header .logo {
padding-top: 22px;
margin-right: auto;
}
#header .link {
text-align: right;
}
#header .link > .btn {
margin-top: 17px;
}
.nav-menu .has-sub {
position: relative;
}
.nav-menu .has-sub > a .arrow {
display: inline-block;
margin-left: 0.5em;
transition: transform 0.5s ease;
}
.nav-menu .has-sub.toggle-arrow > a > .arrow {
transform: rotate(90deg);
}
@media (min-width: 768px) {
#header .menu-btn { display: none; }
#header .nav-menu > ul { text-align: right; list-style: none; }
#header .nav-menu > ul > li { display: inline-block; padding: 30px 0 0 25px; vertical-align: top; }
#header .nav-menu > ul > li > a,
#header .has-sub > ul > li > a { display: block; color: #d9deec; text-decoration: none; }
#header .nav-menu > ul > li > a:hover,
#header .has-sub > ul > li > a:hover { color: #ffffff; }
#header .has-sub > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding-top: 15px;
text-align: left;
list-style: none;
z-index: 100;
min-width: 200px;
width: max-content;
}
#header .has-sub > ul > li {
padding: 13px 25px;
display: block;
background-color: #172651;
white-space: nowrap;
}
}
@media (max-width: 768px) {
#header .container { margin: 0; padding: 0; max-width: 100%; }
#header .logo { padding-left: 15px; }
#header .nav-menu { position: relative; top: 22px; width: 100%; background-color: #172651; }
#header .nav-menu > ul { display: none; list-style: none; padding: 0; }
#header .nav-menu > ul > li { display: block; padding-left: 15px; line-height: 4em; border-bottom: 1px solid #a8a8a8; }
#header .nav-menu li > a { display: block; color: #d9deec; text-decoration: none; }
#header .nav-menu li > a:hover { color: #ffffff; }
#header .has-sub > ul { display: none; list-style: none; padding: 0; }
#header .has-sub .arrow { float: right; margin-top: 20px; margin-right: 15px; }
#header .link { display: none; }
} :root {
--image-height: 300px;
}
main section.image {
height: var(--image-height);
border-bottom: 2px solid #a8a8a8;
}
main section.image > img {
width: 100vw;
max-width: 100%;
height: var(--image-height);
object-fit: cover;
}
main section.image > .container {
position: relative;
top: -195px;
color: #ffffff;
}
main section.image h1 {
font-size: 34px;
font-weight: bold;
}
main section.image p {
font-size: 13px;
}
main section.image p:before,
main section.image p:after {
content: " － ";
}
@media (max-width: 768px) {
main section.image, main section.image > img { height: 150px; }
main section.image > .container { top: -115px; }
main section.image h1 { font-size: 30px; }
} .evaluation {
height: 250px;
border-bottom: 1px solid #a8a8a8;
background-image: url(https://rtpatch.asia/wp-content/themes/rtpatch/images/eval.png);
background-position: center;
}
.evaluation a {
position: relative;
top: 80px;
display: inline-block;
height: 80px;
width: 80%;
font-size: 24px;
font-weight: bold;
line-height: 80px;
color: #ffffff;
border: 2px solid #ffffff;
}
.evaluation a:hover {
opacity: 0.8;
transition: 1.0s;
}
@media (max-width: 768px) {
.evaluation { height: 145px; }
.evaluation a { top: 35px; height: 70px; width: 100%; font-size: 22px; line-height: 70px; }
} #footer {
font-size: 13px;
color: #d9deec;
background-color: #242424;
}
#footer .footer-menu .evenly {
@media (min-width: 768px){
justify-content: space-evenly;
}
}
#footer .footer-menu {
padding-top: 30px;
}
#footer .footer-menu h4 {
padding-bottom: 10px;
font-size: 15px;
color: #ffffff;
}
#footer .footer-menu ul {
padding-bottom: 30px;
}
#footer .footer-menu ul > li {
padding: 2px 5px;
}
#footer .footer-menu ul > li:before {
content: "- ";
}
#footer .footer-menu ul > li > a {
color: #d9deec;
}
#footer .footer-menu ul > li > a:hover {
color: #ffffff;
}
#footer .copyright {
padding: 15px 0;
font-size: 12px;
text-align: center;
color: #868686;
border-top: 1px solid #a8a8a8;
} .merit, .func {
padding: 15px;
background-color: #ffffff;
border: 1px solid #ebebeb;
}
.merit h3, .func h3 {
font-size: 16px;
font-weight: bold;
line-height: 2em;
}
.merit .explanation, .func .explanation {
font-size: 14px;
color: #666666;
}
.func img {
float: left;
margin-right: 15px;
}
.merit h3 {
text-align: center;
} @media (min-width: 768px) { .privacy-content { padding: 0 50px !important; } }
.privacy_policy .list-title { margin-top: 1em; }
.privacy_policy ul { list-style: disc; padding-left: 1.2em; line-height: 1.8em; }
.date { padding: 15px 0; font-size: 14px; } .case img { float: left; max-height: 300px; max-width: 100%; margin-right: 15px; margin-bottom: 10px; border-radius: 10px; }
@media (max-width: 768px) { .case img { width: 100%; } }
.case-nav { display: flex; flex-wrap: no-wrap; justify-content: space-between; }
.case-nav a { font-size: 0.8em; } .release-note { font-size: 0.9em; }
.release-note table { border: 1px solid #b5b1b1; margin-top: 40px; }
.release-note table th,.release-note table td { border-right: none; border-left: none; }
@media (max-width: 768px) {
.release-note table tr th:first-child,
.release-note table tr td:first-child { display: none; }
} .partner-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 30px;
margin: 40px 0;
}
.partner-card {
background: #fff;
border: 1px solid #eee;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s;
}
.partner-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.partner-card-logo {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
padding: 25px;
background: #fff;
border-bottom: 1px solid #f4f4f4;
text-align: center;
}
.partner-card-logo img {
max-width: 70%;
max-height: 110px;
width: auto;
object-fit: contain;
}
.partner-card-body { padding: 25px; }
.partner-name {
margin-bottom: 5px;
padding-left: 10px;
border-left: 4px solid #172651;
color: #333;
font-size: 20px;
font-weight: bolder;
}
.partner-url { margin-bottom: 15px; }
.partner-link { text-decoration: none; font-size: 0.9rem; color: #172651; }
.partner-details {
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 1.8;
color: #555;
}
.partner-details li {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
}
.partner-details i {
flex-shrink: 0;
width: 18px;
margin-top: 4px;
margin-right: 10px;
color: #78858f;
text-align: center;
}
.address-content { display: flex; flex-direction: column; line-height: 1.4; }
.zip-code { display: block; font-size: 0.75rem; }
.street-address { display: block; font-size: 14px; color: #555; }
@media (max-width: 768px) {
.partner-grid { grid-template-columns: 1fr; }
.partner-card-logo { height: 150px; }
} dl.faq { margin-bottom: 2em; }
dl.faq > dt, dl.faq > dd { width: 100%; border: solid 1px #efefef; }
dl.faq > dt { display: flex; padding: 0.5em 15px; justify-content: space-between; align-items: center; cursor: pointer; background-color: #fff; border-radius: 15px 15px 0 0;}
dl.faq > dt > i { margin-left: 0.5em; }
dl.faq > dd { display: none; padding: 15px; border-top: none; background-color: #fff; border-radius: 0 0 15px 15px;}
dl.faq > dt span { font-size: 2em; margin-right: 0.5em; color: #172651; } article.login { min-height: calc(100vh - 180px); } .company-card {
display: flex;
background: #fff;
border-radius: 15px;
overflow: hidden;
margin: 40px auto;
max-width: 900px;
border: 1px solid #eee;
}
.company-card__logo {
flex: 0 0 30%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
border-right: 1px solid #f0f0f0;
}
.company-card__logo img {
max-width: 100%;
height: auto;
filter: grayscale(20%);
transition: 0.3s;
}
.company-card__logo img:hover {
filter: grayscale(0%);
transform: scale(1.05);
}
.company-card__info {
flex: 1;
padding: 40px;
}
.info-row {
display: flex;
padding: 15px 0;
border-bottom: 1px solid #f5f5f5;
align-items: baseline;
}
.info-row:last-child {
border-bottom: none;
}
.info-row .label {
flex: 0 0 120px;
font-size: 13px;
color: #172651;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.info-row .content {
flex: 1;
font-size: 15px;
color: #444;
line-height: 1.6;
}
.url-link {
color: #2c3e66;
text-decoration: none;
font-weight: 500;
transition: 0.3s;
}
.url-link:hover {
color: #172651;
text-decoration: underline;
}
.email-code {
letter-spacing: 0.02em;
} @media screen and (max-width: 768px) {
.company-card {
flex-direction: column;
}
.company-card__logo {
padding: 30px 60px;
border-right: none;
border-bottom: 1px solid #f0f0f0;
}
.company-card__info {
padding: 25px;
}
.info-row {
flex-direction: column;
gap: 5px;
}
.info-row .label {
flex: none;
}
} .message {
margin: 0 80px;
padding: 40px 0;
background-color: #fff;
border: 1px solid #ccc;
}
@media screen and (max-width: 768px) {
.message { margin: 0; }
}
.message h3 { font-size: 18px; font-weight: bold; }
  :root { --top-height: 500px; }
main section.top-image { height: var(--top-height); border-bottom: 2px solid #a8a8a8; }
main section.top-image > img { width: 100vw; max-width: 100%; height: var(--top-height); object-fit: cover; }
main section.top-image > .container { position: relative; top: -320px; color: #ffffff; }
main section.top-image h1 { margin-bottom: 10px; font-size: 34px; font-weight: bold; }
main section.top-image p { font-size: 18px; }
@media (max-width: 768px) {
main section.top-image, main section.top-image > img { height: 200px; }
main section.top-image > .container { top: -175px; }
main section.top-image p { font-size: 15px; }
} .overview { padding: 15px; background-color: #ffffff; border: 1px solid #ebebeb; }
.overview h3 { font-size: 20px; font-weight: bold; line-height: 2em; text-align: center; text-decoration: underline; }
.overview .explanation { font-size: 14px; color: #666666; }
@media (max-width: 992px) {
.overview h3 { font-size: 16px; }
} .technology img { width:100%; max-width: 100vw; height: auto; } .news-block {
display: block;
width: 100%;
}
.news-block .news {
margin: 0 auto;
max-width: 100%;
}
.news dl {
font-size: 15px;
}
.news dl dt {
margin-bottom: 5px;
font-size: 13px;
}
.news dl dd {
margin-bottom: 25px;
border-bottom: 1px dashed #a8a8a8;
}
.news dl dd:last-child {
margin-bottom: 0;
} .news dl dt .tag {
display: inline-block;
margin-left: 15px;
padding: 2px 0;
width: 65px;
font-size: 0.8em;
vertical-align: middle;
text-align: center;
color: #fff;
}
.news dl dt .tag-news { background-color: #7283b3; }
.news dl dt .tag-release { background-color: #888888; } @media (min-width: 992px) {
.news-block .news {
padding: 0 40px;
}
.news dl dt {
float: left;
padding-right: 30px;
font-size: 15px;
}
.news dl dt, 
.news dl dd {
padding-bottom: 10px;
}
} @media (max-width: 991px) {
.news-block .news {
padding: 0 10px;
} .news-block .center {
text-align: center !important;
}
} .case-study { max-width: 100%; margin: 10px; border-radius: 5px; }
.case-study a { height: 200px; position: relative; overflow: hidden; display: block; border: 1px solid #e3e3e3; }
.case-study h3 { position: absolute; top: 160px; padding-left: 15px; font-weight: bold; color: #ffffff; z-index: 10;}
.case-study img { height: 200px; width: 100%; object-fit: cover; }
.case-study a:hover > img { opacity: 0.8; transition: 1.0s; transform:scale(1.1,1.1); }
@media (max-width: 768px) {
.case-study { margin: 0 0 10px 0; }
}