@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");


/* ============================================
   Base / Reset
============================================ */
.mac body,
.mac input,
.mac select,
.mac textarea,
.mac button,
.iphone body,
.iphone input,
.iphone select,
.iphone textarea,
.iphone button {
  font-family: "Noto Sans JP", "Meiryo", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

body,
input,
select,
textarea,
button {
  font-family: "Meiryo", "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  min-inline-size: 0;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
dl,
li,
dt,
dd,
p,
div,
span,
img,
a,
table,
tr,
th,
td,
address {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
}

article,
header,
footer,
main,
aside,
figure,
figcaption,
nav,
section {
  display: block;
}

html {
  font-size: 62.5%;
}

body {
  color: #000;
  background-color: #fff;
  margin: 0;
  padding: 0;
  line-height: 1;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  word-break: break-all;
  overflow-wrap: break-word;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-align: justify;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

body {
  font-size: 1.4rem;
  line-height: 2;
}

body.is-hidden {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin: 0;
}

strong {
  font-weight: bold;
}

hr {
  border: solid 1px #f3f3f3;
  margin: 0 0 20px;
}

img {
  width: 100%;
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
  border: 0;
  outline: 0;
}

figure {
  padding: 0;
  margin: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

input,
textarea,
button {
  margin: 0;
  padding: 0;
  border-radius: 0;
  outline: 0;
  background: none;
}

button {
  border: 0;
  color: #000;
}

table {
  border-collapse: collapse;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

a img {
  backface-visibility: hidden;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a:hover {
    opacity: 0.6;
  }
}

@-webkit-keyframes fade_up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fade_up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ============================================
   Layout
============================================ */
.l-container__header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.l-container__main {
  padding-top: 9.5rem;
}

@media screen and (max-width: 1024px) {
  .l-container__main {
    padding-top: 5rem;
  }
}

.l-container__pagetop {
  display: none;
  position: fixed;
  right: 0;
  bottom: 1rem;
  z-index: 999;
  width: 6rem;
}

.l-inner {
  position: relative;
  width: 83.2%;
  max-width: 1082px;
  padding: 0 0;
  margin: 0 auto;
}

/* ============================================
   Components（共通）
============================================ */
.sp_only {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .pc_only {
    display: none !important;
    ;
  }

  .sp_only {
    display: block !important;
    ;
  }
}

.gra-bg {
  background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
  background: linear-gradient(90deg, #223c4d, #008da7);
}

.c-head {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.c-head-blue {
  background: #00B0D5;
  border-radius: 6rem 6rem 0 0;
  padding: 6rem 0 6rem;
  margin-top: 0;
}

.c-head__ttl {
  text-align: center;
}

.c-head__ttl .en {
  position: relative;
  display: inline-block;
  font-size: 4.2rem;
  line-height: 1.2857;
  color: #275778;
  font-weight: bold;
  padding: 0 6.4rem;
  margin-bottom: 0.8rem;
}

.c-head-blue .c-head__ttl .en {
  color: #ffffff;
}

.c-head__ttl .ja {
  display: block;
  font-size: 1.6rem;
  line-height: 1.875;
  font-weight: bold;
}

.c-head-blue .c-head__ttl .ja {
  color: #ffffff;
}

.c-head-child {
  position: relative;
  display: inline-block;
  font-size: 4.2rem;
  line-height: 1.2857;
  color: #275778;
  font-weight: bold;
  padding: 0 6.4rem;
  text-align: center;
  margin: 0 auto 4rem;
}

.c-head-child::before,
.c-head-child::after {
  content: "";
  width: 4.1rem;
  height: 1px;
  border-bottom: 1px dashed #275778;
  position: absolute;
  top: calc(50% + 0.1rem);
}

.c-head-child::before {
  left: 0;
}

.c-head-child::after {
  right: 0;
}

.c-head__txt {
  max-width: 71.8rem;
  margin: 0 auto 0;
  padding: 4rem 0 2.8rem;
  font-size: 1.4rem;
  line-height: 2;
}

.c-head--nosub .c-head__txt {
  padding-top: 0;
}

.c-btn a {
  display: block;
  margin: 0 auto;
  width: 54rem;
  max-width: 100%;
  height: 6.5rem;
  background-color: #00b0d5;
  border-radius: 999px;
  outline: 1px solid #fff;
  outline-offset: 0.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.4rem;
  line-height: 1.25;
  font-weight: bold;
  color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.c-btn a .icn {
  width: 3.86rem;
  margin-top: -0.3rem;
}

.c-btn a:hover {
  opacity: 1;
}

@media (hover: hover) {
  .c-btn a:hover {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
}

.mac .c-btn a,
.iphone .c-btn a {
  padding-bottom: 0.5rem;
}

.mac .c-btn a .icn,
.iphone .c-btn a .icn {
  margin-bottom: -0.5rem;
}

.c-btn--arrow a {
  margin: 0 auto;
  width: 54rem;
  max-width: 100%;
  height: 6.5rem;
  background-color: #275778;
  border-radius: 999px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.4rem;
  line-height: 1.25;
  font-weight: bold;
  color: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.c-btn--arrow a::after {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  border-top: 0.1rem solid #fff;
  border-right: 0.1rem solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -ms-flex-negative: 0;
  flex-shrink: 0;
  /* margin-left: auto; */
  position: absolute;
  right: 6%;
}

.c-btn--arrow a:hover {
  opacity: 1;
}

@media (hover: hover) {
  .c-btn--arrow a:hover {
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
  }
}

.mac .c-btn--arrow a,
.iphone .c-btn--arrow a {
  padding-bottom: 0.5rem;
}

.p-cv__btn {
  margin-top: 2rem;
}

.p-cv__btn.c-btn--arrow {
  margin-top: 0;
}

/* ============================================
   Header
============================================ */
.l-header__inner {
  background-color: #fff;
  -webkit-box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100%;
  height: 9.5rem;
  padding: 0 0 0 5.2rem;
  gap: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 1280px) {
  .l-header__inner {
    padding: 0 0 0 2%;
  }
}

@media screen and (max-width: 1080px) {
  .l-header__inner {
    height: 5rem;
    padding-right: 0;
    padding-left: 7.4%;
  }
}

.l-header__logo {
  width: 38.7rem;
}

@media screen and (max-width: 1280px) {
  .l-header__logo {
    width: max(20rem, 29.4vw);
  }
}

@media screen and (max-width: 1080px) {
  .l-header__logo {
    width: 16rem;
  }
}

.l-header__logo img {
  display: block;
}

.l-header__menu {
  margin-left: auto;
  margin-right: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 3rem;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

@media screen and (max-width: 1280px) {
  .l-header__menu {
    gap: 2rem;

  }
}

@media screen and (max-width: 1080px) {
  .l-header__menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: calc(100% - 5rem);
    margin-top: 5rem;
    z-index: 10;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 0;
    margin-right: 0;
  }
}

@media screen and (max-width: 1080px) {
  .l-header__menu.is-open {
    right: 0;
  }
}

.l-header__menu-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 1.2rem;
}

@media screen and (max-width: 1080px) {
  .l-header__menu-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }
}

.l-header__menu-item {
  white-space: nowrap;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.l-header__menu-item:not(:last-child)::after {
  content: "";
  display: block;
  width: 1px;
  height: 14px;
  background-color: #acacac;
  margin-left: 1.2rem;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (max-width: 1080px) {
  .l-header__menu-item:not(:last-child)::after {
    display: none;
  }
}

@media screen and (max-width: 1080px) {
  .l-header__menu-item {
    width: 100%;
    border-bottom: 1px solid #586c78;
  }
}

@media screen and (max-width: 1080px) {
  .l-header__menu-item:last-child {
    border: none;
  }

  .l-header__menu-item:last-child a {
    background: #00B0D5;
  }
}

.l-header__menu-item a {
  font-size: 1.4rem;
  font-weight: 400;
  color: #000000;
}

.l-header__menu-item a:hover {
  opacity: 1;
}

@media screen and (max-width: 1080px) {
  .l-header__menu-item a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    font-size: 1.4rem;
    color: #fff;
    padding: 1.55rem 4rem;
    background-color: #223c4d;
  }
}

/* .l-header__menu-item a::after {
  content: "";
  display: inline-block;
  width: clamp(1.1rem, 1.2vw, 1.5rem);
  height: auto;
  aspect-ratio: 1;
  background: url(../img/icn_arrow_circle_bottom_black.svg) no-repeat center/100%;
  margin: 0 0 -0.2rem clamp(0.4rem, 0.7vw, 0.9rem);
} */
/* @media screen and (max-width: 768px) {
  .l-header__menu-item a::after {
    width: 1.3rem;
    background-image: url(../img/icn_arrow_circle_bottom_white.svg);
    position: absolute;
    top: calc(50% - 0.65rem);
    right: 4.2rem;
  }
} */

.l-header__menu-btn {
  -ms-flex-item-align: stretch;
  align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.l-header__menu-btn a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 150px;
  height: 100%;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: bold;
  text-align: center;
  background-color: #00b0d5;
  color: #fff;
  border-radius: 0;
  white-space: nowrap;
}

.l-header__menu-btn a:hover {
  opacity: 1;
}

@media (hover: hover) {
  .l-header__menu-btn a:hover {
    color: #fff;
    background-color: #0099bb;
  }
}

.l-header__menu-overlay {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.l-header__block {
  display: none;
}

@media screen and (max-width: 1080px) {
  .l-header__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 100%;
    margin-left: auto;
  }
}

.l-header__btn {
  height: 100%;
  width: auto;
}

.l-header__btn a {
  font-weight: bold;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  width: auto;
  color: #fff;
  background-color: #00b0d5;
  font-size: 1.2rem;
  line-height: 1.25;
  padding: 0 0.8rem;
  white-space: nowrap;
}

.l-header__hamb {
  height: 100%;
  width: auto;
  aspect-ratio: 1;
  background-color: #223c4d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
}

.l-header__hamb-line {
  background-color: #fff;
  width: 50%;
  height: 0.3rem;
  border-radius: 0.1rem;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.is-open .l-header__hamb-line:nth-of-type(1) {
  -webkit-transform: rotate(45deg) translate(0.5rem, 0.5rem);
  transform: rotate(45deg) translate(0.5rem, 0.5rem);
}

.is-open .l-header__hamb-line:nth-of-type(2) {
  opacity: 0;
}

.is-open .l-header__hamb-line:nth-of-type(3) {
  -webkit-transform: rotate(-45deg) translate(0.6rem, -0.6rem);
  transform: rotate(-45deg) translate(0.6rem, -0.6rem);
}

/* ============================================
   FV（ファーストビュー）
============================================ */
.p-fv__list.slick-slider {
  margin-bottom: 0;
}

.p-fv__list .slick-dots {
  bottom: 2.5rem;
}

.p-fv__list .slick-dots li {
  width: 6rem;
  height: 0.7rem;
  margin: 0 0.75rem;
  background-color: #fff;
  -webkit-transition: background-color 0.8s ease;
  transition: background-color 0.8s ease;
}

.p-fv__list .slick-dots li.slick-active {
  background-color: #00e1d5;
}

.p-fv__list .slick-dots li button {
  width: 100%;
  height: 100%;
  padding: 0;
}

.p-fv__list .slick-dots li button::before {
  display: none;
}

.p-fv__list .slick-arrow {
  height: 26.2rem;
  width: 4rem;
  margin-top: 2rem;
  transition: height 0.5s ease;
}

.p-fv__list .slick-arrow::before {
  display: none;
}

.p-fv__list .slick-prev {
  left: 0;
  z-index: 1;
  background: url(../img/icn_prev.svg) no-repeat center/cover;
}

.p-fv__list .slick-next {
  right: 0;
  z-index: 1;
  background: url(../img/icn_next.svg) no-repeat center/cover;
}

.p-fv__item {
  position: relative;
}

.p-fv__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.p-fv__item a:hover {
  opacity: 1;
}

.p-fv__item a>img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-fv__item-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.p-fv__item-box .bg {
  position: relative;
  background-color: rgba(0, 30, 50, 0.4);
  max-width: 79rem;
  width: 100%;
  padding: 5.5rem 4.5rem 3.5rem 11.5rem;
  margin-top: 4rem;
}

.p-fv__item-box .bg02 {
  padding: 3.06rem 4.5rem 1.94rem 11.5rem;
}

.p-fv__item-box .bg03 {
  padding: 4.64rem 4.5rem 2.96rem 11.5rem;
}

.p-fv__item-box .ttl {
  font-size: 4.2rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.2857142857;
  border-bottom: 0.4rem solid #00e1d5;
  border-image: linear-gradient(to right, #00E1D5, #00B0D9) 1;
  padding-bottom: 1.5rem;
  text-shadow: 0 0 0.9rem rgba(0, 0, 0, 0.75);
}

.p-fv__item-box .ttl h2 {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.2857142857;
}

.p-fv__item-box .ttl h2.big {
  font-size: 4.2rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.2857142857;
}

.slide-content {
  width: 103%;
  margin-left: -3%;
}

.slide-content02 {
  width: 60%;
  margin-left: -3%;
}

/* スライダー内の日付の文字サイズを調整 */
.p-fv__item-box .ttl .date-small {
  font-size: 0.8em;
  /* 親要素(h2)の80%のサイズにする。この数値は調整可能です */
  font-weight: normal;
  /* 見出しの太字を解除したい場合はこの行を追加 */
}

.p-fv__item-box .txt {
  font-size: 2rem;
  color: #00e1d5;
  font-weight: bold;
  line-height: 1.9;
  margin-top: 0.7rem;
  letter-spacing: -0.02em;
  text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.75);
}

.p-fv__item-box .en {
  width: 31.7rem;
  position: absolute;
  top: -1.2rem;
  right: -1.7rem;
}

/* ============================================
   イントロ
============================================ */
.p-intro {
  padding: 5.5rem 0 5.5rem;
  background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
  background: linear-gradient(90deg, #223c4d, #008da7);
}

.p-intro__txt {
  color: #fff;
  max-width: 72.5rem;
  margin: 0 auto;
}

/* ============================================
   Why SCSK
============================================ */
.p-why {
  padding: 0;
  position: relative;
  z-index: 1;
}

.p-why .bg {
  background: #F6F6F6;
  padding: 0 0 9rem 0;
  border-radius: 0 0 6rem 6rem;
}

.p-why__img {
  width: 84.5%;
  margin: 2.7rem auto 0;
  padding: 8.8% 0;
  mix-blend-mode: multiply;
  position: relative;
}

.p-why__img::before {
  content: "";
  background: url(../img/img_why_frame.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 118.3%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ============================================
   CV（お問い合わせ誘導）
============================================ */
.p-cv {
  padding: 11rem 0 11.5rem;
  background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
  background: linear-gradient(90deg, #223c4d, #008da7);
}

.p-cv__txt {
  text-align: center;
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5454545455;
  color: #fff;
}

/* ============================================
   SCSKのサービス
============================================ */
.p-service {
  background-color: #f6f6f6;
  border-radius: 6rem;
  padding: 0 0 11rem;
  /* margin-bottom: 12.5rem; */
}

.p-service__inner {
  padding: 0;
  background-color: #fff;
}

.p-service__inner02 {
  padding: 6.5rem 0 9rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 5.5rem;
  position: relative;
}

.p-service__inner03 {
  padding: 6.5rem 0 9rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 5.5rem;
  position: relative;
}

.p-service__inner04 {
  padding: 6.5rem 0 9rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  position: relative;
}

.p-number {
  width: 6rem;
  position: absolute;
  left: 4rem;
  top: 3.5rem;
}

.p-service__arrow {
  width: 3%;
  margin: 0 auto 1.5rem;
}

.p-service__head {
  padding: 5rem 4.1rem 0;
}

.p-service__head-child {
  padding: 0 4.1rem 0;
}

.p-service__ttl {
  position: relative;
  display: block;
  font-size: 4.2rem;
  line-height: 1.2857;
  color: #275778;
  font-weight: bold;
  text-align: center;
  width: 92%;
  margin: 0 auto 2.3rem;
}

.p-service__bland {
    width: 34.1%;
  margin: 0 auto 3rem;
}

.p-service__subttl {
  font-size: 2.4rem;
  color: #00B0D5;
  text-align: center;
  line-height: 1.5;
}

.p-service__txt {
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
}

.p-service__inner03 .p-service__txt {
  width: 66.8%;
  margin: 0 auto;
  text-align: left;
}

.p-service__inner04 .p-service__txt {
  width: 66.8%;
  margin: 0 auto;
  text-align: left;
}

.p-service__img {
  position: relative;
  width: 92.4%;
  margin: 1.2rem auto 8.5rem;
  padding: 4rem 0 4.5rem;
}

.p-service__img01 {
  position: relative;
  width: 68.8%;
  margin: 0 auto;
  padding: 4rem 0 4.5rem;
}

.p-service__img02 {
  position: relative;
  width: 91.7%;
  margin: 0 auto;
  padding: 4rem 0 4.5rem;
}

.p-service__img03 {
  position: relative;
  width: 91.7%;
  margin: 0 auto;
  padding: 4rem 0 4.5rem;
}

/* ============================================
   導入事例
============================================ */
.p-case {
  padding: 0 0 0;
  margin-top: 12.5rem;
  /* margin-bottom: 12.4rem; */
}

.p-case .bg {
  padding-top: 4.5rem;
  background: #f6f6f6;
  border-radius: 0 0 6rem 6rem;
}

.p-case__head .c-head__txt {
  padding: 0;
  text-align: center;
}

.p-case__head-child {
  padding: 6rem 4.1rem 0;
}

.p-case__container {
  background: #ffffff;
  border: 1px solid #223C4D;
  width: 76.7%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 3rem 0;
  margin-bottom: 4.5rem;
}

.p-case__container .p-case__list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: fit-content;
}

.p-case__container .p-case__item {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2.25;
}

.p-case__container .p-case__item .case-arrow {
  color: #00E1D5;
}

.p-case__container .p-case__item .p-case__txt {
  text-decoration: underline;
}

.p-case__block {
  margin-top: 0;
  width: 92.4%;
  margin: 0 auto;
}

.p-case__block+.p-case__block {
  margin-top: 5.3rem;
}

.p-case__block-ttl {
  text-align: center;
}

.p-case__block-ttl .num {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.3333333333;
  display: block;
  width: 9.2rem;
  height: 4.6rem;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #00b0d5;
  color: #fff;
  border-radius: 999rem 999rem 0 0;
  padding-top: 1rem;
}

.p-case__block-ttl .txt {
  display: block;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3333333333;
  background: -webkit-gradient(linear, left top, left bottom, from(#e5ebef), to(#f6f6f6));
  background: linear-gradient(#e5ebef, #f6f6f6);
  border-radius: 3rem;
  color: #275778;
  padding: 2.4rem 4rem;
}

.p-case__block-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 46.8rem 4.5rem 1fr;
  grid-template-columns: 46.8rem 1fr;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  gap: 4.5rem;
  margin-top: 3.6rem;
}

.p-case__block-box--img {
  outline: 2rem solid rgba(21, 87, 113, 0.12);
  outline-offset: -2rem;
  padding: 4.4rem;
  min-height: 41.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.8rem;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-case__block-box--effect {
  background-color: #eef6f8;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 10rem 4.2rem 1fr;
  grid-template-columns: 10rem 1fr;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 2.6rem;
  padding: 1.3rem 4.7rem;
  gap: 4.2rem;
  min-height: 11rem;
}

.p-case__block-box .btn {
  width: 17.9rem;
  height: 3.2rem;
}

.p-case__block-box .btn button {
  background-color: #275778;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.875;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid #275778;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
}

.p-case__block-box .btn button svg {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  width: 1.32rem;
  fill: #fff;
}

.p-case__block-box .btn button:hover {
  opacity: 1;
}

@media (hover: hover) {
  .p-case__block-box .btn button:hover {
    background-color: #fff;
    color: #275778;
  }
}

@media (hover: hover) {
  .p-case__block-box .btn button:hover svg {
    fill: #275778;
  }
}

.p-case__block-box .main {
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5555555556;
  margin-top: -0.6rem;
}

.p-case__block-box .line {
  margin-top: 1.5rem;
}

.p-case__block-box .ttl {
  font-size: 1.4rem;
  font-weight: bold;
}

.p-case__block-box .txt {
  text-indent: -1.3em;
  padding-left: 1.3em;
}

.p-case__block-box .txt::before {
  content: "●";
  color: #b4c4d0;
  padding-right: 0.3em;
}

.p-case__block-box .txt .br {
  display: none;
}

.mac.safari .p-case__block-box .txt .br {
  display: block;
}

.p-case__block-box .head {
  font-size: 1.8rem;
  font-weight: bold;
  color: #275778;
  line-height: 1.5555555556;
}

.p-case__block-box .item {
  text-indent: -1.4em;
  padding-left: 1.4em;
}

.p-case__block-box .item::before {
  content: "▶︎";
  color: #275778;
  padding-right: 0.4em;
}

.p-modal__block .img {
  padding: 3rem;
}

/* ============================================
   Salesforce（p-sf）
============================================ */
.p-sf {
  padding-top: 2.5rem;
}

.p-sf__block {
  padding: 5.2rem 5rem 7.7rem;
}

.p-sf__ttl {
  font-size: 2.4rem;
  color: #00B0D5;
  font-weight: bold;
  text-align: center;
}

.p-sf__txt {
  color: #275778;
  max-width: 71.8rem;
  margin: 0.8rem auto 0;
}

.p-sf__video {
  text-align: center;
  margin-top: 3rem;
}

.p-sf__video .box {
  position: relative;
  width: 100%;
  padding-top: 56.4%;
  height: 0;
  margin: 0 auto;
  border: 2px solid #eee;
}

.p-sf__video .box iframe {
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================
   コラム
============================================ */

.gra-bg .p-column { /* トップページのコラムエリアに限定した指定 */
  margin-top: 12.4rem;
}

.p-column .page-head {
  background: linear-gradient(90deg, #223C4D, 80%, #008DA7);
  height: 438px;
  position: relative;
}

.p-column .page-head-ttl {
  font-size: 4.2rem;
  color: #ffffff;
  line-height: 1;
}

.p-column .p-column-top.bg {
  margin-top: -10rem;
  padding-top: 7.5rem;
  padding-bottom: 0;
  border-radius: 6rem 6rem 0 0;
  position: relative;
  z-index: 1;
  background: #F6F6F6;
}
.single .use-cases-top.bg{
  border-radius: 6rem 6rem 6rem 6rem;
}
  .p-column.archive-bg{
    background: linear-gradient(90deg, #223C4D, 80%, #008DA7);
}
.p-column-top .c-head {
  width: 92%;
  max-width: 1082px;
  margin: 0 auto;
}

.p-column .bg {
  padding-top: 7rem;
  padding-bottom: 9rem;
  background: #f6f6f6;
  border-radius: 0 0 6rem 6rem;
}

.archive-column.bg {
  padding-top: 0;
  padding-bottom: 9rem;
  background: #f6f6f6;
  border-radius: 0 0 6rem 6rem;
}

.column-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 99%;
  margin: 0 auto 4.5rem;
}

.column-item {
  width: 31.2%;
  border: 10px solid rgba(21, 87, 113, 0.12);
  box-sizing: border-box;
  margin-bottom: 3rem;
}

.column-img {
  margin-bottom: 2.5rem;
}

.column-inner {
  width: 87.7%;
  margin: 0 auto;
  padding: 6.65% 0 8rem;
  position: relative;
  display: block;
}

.column-inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2.8rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background-color: #00B0D5;
}

.column-inner::before {
  content: "";
  position: absolute;
  right: 1rem;
  bottom: 3.7rem;
  width: 0.6rem;
  height: 0.6rem;
  border-top: 0.1rem solid #fff;
  border-right: 0.1rem solid #fff;
  transform: rotate(45deg);
  z-index: 1;
}

.column-ttl {
  font-size: 1.8rem;
  line-height: 1.55;
  font-weight: bold;
  margin-bottom: 1.5rem;
  word-break: break-all;
}

.column-category {
  color: #00B0D5;
  display: block;
}

/* ============================================
   お問い合わせ
============================================ */
.p-contact {
  background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
  background: linear-gradient(90deg, #223c4d, #008da7);
  padding: 8.2rem 0 8.5rem;
}

.p-contact__ttl {
  font-size: 3.5rem;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.p-contact__txt {
  font-size: 2.2rem;
  line-height: 1.5454545455;
  color: #fff;
  text-align: center;
}

.p-contact__btn {
  margin-top: 2.2rem;
}

.p-contact__note {
  color: #fff;
  text-align: center;
  margin-top: 2.2rem;
}

/* ============================================
   その他（非表示セクション）
============================================ */
.p-others {
  padding: 5.5rem 0 6.8rem;
}

.p-others__ttl {
  font-size: 2.4rem;
  font-weight: bold;
  color: #275778;
  background-color: #f3f3f3;
  border-radius: 3rem;
  text-align: center;
  padding: 2.1rem 2rem 1.2rem;
}

.p-others__list {
  margin-top: 1.6rem;
}

.p-others__item {
  text-indent: -1.3em;
  padding-left: 1.3em;
}

.p-others__item::before {
  content: "●";
  color: #b4c4d0;
  padding-right: 0.3em;
}

/* ============================================
   Utilities
============================================ */
.u-bold {
  font-weight: bold;
}

.u-nowrap {
  display: inline-block;
}

.u-sp {
  display: none !important;
}

@media screen and (max-width: 1080px) {
  .u-pc {
    display: none !important;
  }

  .u-sp {
    display: block !important;
  }
}

.u-clearfix::after {
  content: "";
  display: block;
  block-size: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}

.u-color01 {
  color: #b4c4d0;
}

.u-color02 {
  color: #275778;
}

/* Solution */
.solution .page-head {
  background: url(../img/solution_head_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 438px;
  position: relative
}

.page-head-content {
  width: 92%;
  max-width: 1016px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 31%;
  left: 50%;
}
.data .page-head-content {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 34.5%;
  left: 50%;
}
.data .page-head-content .page-head-left{
      width: 39.9%;
}
.page-head-txt {
  font-size: 2.2rem;
  font-weight: bold;
  color: #ffffff;
  padding-left: 0.5%;
  margin-bottom: 0%;
    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.75));
}
.solution .page-head-txt{
    font-size: 2.2rem;
    font-weight: bold;
    color: #ffffff;
    padding-left: 1%;
    margin-bottom: 0%;
    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.75));
    display: block;
    text-align: left;
    margin-bottom: -1rem;
}
.page-head-flex {
  display: flex;
  justify-content: flex-start;
}

.page-head-left {
    width: 50%;
}

.page-head-right {
    width: 31.5%;
    margin-top: auto;
    margin-bottom: 3px;
    position: relative;
}

.breadcrumb-container {
  width: 100%;
  position: absolute;
  transform: translate(0, -50%);
  top: 64%;
  left: 0;
  background: linear-gradient(to right, rgba(0, 176, 213, 0.7) 0%, rgba(0, 225, 213, 0.7) 40%, transparent 84.6%);
  padding: 0.5rem 0;
}

.breadcrumb {
  width: 92%;
  max-width: 1016px;
  margin: 0 auto;
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
}

.solution-top {
  margin-top: -10rem;
  padding-top: 7.5rem;
  border-radius: 6rem 6rem 0 0;
  position: relative;
  z-index: 1;
  background: #F6F6F6;
}

.solution-top.bg {
  padding-bottom: 9rem;
}

.page-solution-ttl {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 3.6rem;
  line-height: 1.5;
  color: #275778;
  font-weight: bold;
  padding: 0 6.4rem;
  margin-bottom: 0.8rem;
}

.page-solution-subttl {
  font-size: 2.4rem;
  color: #00B0D5;
  text-align: center;
}

.page-solution-container {
  background: #ffffff;
  padding: 4.7rem 0;
  margin: 6.5rem auto 9rem;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
}

.page-solution-img {
  width: 58.4%;
  margin: 0 auto;
  background: #ffffff;
}

.page-solution__head-child .c-head-child {
  margin-bottom: 2.5rem;

}

.page-solution__head-child .page-solution-subttl {
  line-height: 1.41;
  margin-bottom: 6rem;
}

.bubble {
  font-size: 2.8rem;
  font-weight: bold;
  color: #275778;
  background: #DFF2F5;
  width: 100%;
  padding: 1.5rem;
  text-align: center;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  position: relative;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #DFF2F5;
}

.bubble+.page-solution-container {
  margin-top: 1.5rem;
}

.bubble+.page-solution-container .page-solution-img {
  width: 68.8%;
}


.page-solution-menu {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

.page-solution-item {
  width: 100%;
  background: #ffffff;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  margin-bottom: 1.5rem;
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}

.page-solution-item:last-child {
  margin-bottom: 0;
}

.page-solution-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  background: linear-gradient(90deg, #00E1D5, #275778);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.page-solution-menu-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 92.4%;
  margin: 0 auto;
}

.page-solution-menu-flex>.box-L {
  width: 52.4%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 1.5rem;
}

.solution-menu-ttl {
  font-size: 2.4rem;
  line-height: 1;
  color: #275778;
  margin-bottom: 0.7rem;
}

.solution-menu-subttl {
  font-size: 1.8rem;
  line-height: 1.44;
  font-weight: bold;
  color: #00B0D5;
}

.page-solution-menu-flex>.box-L>.box-L {
  width: 26.7%;
  margin-right: 2.2rem;
}

.page-solution-menu-flex>.box-R {
  width: 45.1%;
  font-size: 1.4rem;
  line-height: 2;
  font-weight: 400;
}

.solution-menu-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #275778;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 0.4rem 4rem 0.4rem 4rem;
  text-decoration: none;
  width: 25%;
  text-align: center;
  display: block;
}

.solution-menu-btn::after {
  content: "";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.15rem solid #ffffff;
  border-right: 0.15rem solid #ffffff;
}

/* data */
.data .page-head {
  background: url(../img/data-usage_head_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 438px;
  position: relative
}

.data .page-head-ttl {
  font-size: 4.2rem;
  color: #ffffff;
  line-height: 1;
}

.data-top {
  margin-top: -10rem;
  padding-top: 7.5rem;
  border-radius: 6rem 6rem 0 0;
  position: relative;
  z-index: 1;
  background: #F6F6F6;
}

.data-top.bg {
  padding-bottom: 9rem;
}

.data-top .c-head {
  width: 92%;
  max-width: 1082px;
  margin: 0 auto;
}

.page-data-ttl {
  position: relative;
  display: inline-block;
  text-align: center;
  font-size: 3.6rem;
  line-height: 1.5;
  color: #275778;
  font-weight: bold;
  padding: 0 6.4rem;
  margin-bottom: 0.8rem;
}

.page-data-subttl {
  font-size: 2.4rem;
  color: #00B0D5;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 4rem;
}

.page-data-txt {
  font-size: 1.4rem;
  line-height: 2;
  color: #000000;
  text-align: left;
  width: 66.1%;
  margin: 0 auto 8rem;
}

.page-data-container {
  background: #ffffff;
  padding: 4.7rem 0;
  margin: 0 auto 0;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  margin-bottom: 85px;
}

.page-data-img {
  width: 92.4%;
  margin: 0 auto;
  background: #ffffff;
}

.page-data__head-child .c-head-child {
  margin-bottom: 4rem;

}

.page-data__head-child .page-solution-subttl {
  line-height: 1.41;
  margin-bottom: 6rem;
}

.page-data__head-child .page-data-subttl {
  line-height: 1.41;
  margin-bottom: 6rem;
}

.page-data__head-child02 .c-head-child {
  margin-bottom: 2rem;

}

.page-data__head-child02 .page-solution-subttl {
  line-height: 1.41;
  margin-bottom: 6rem;
}

.page-data__head-child02 .page-data-subttl {
  line-height: 1.41;
  margin-bottom: 6rem;
}

.page-data-container02 {
  background: #ffffff;
  padding: 1.6rem 0 6rem;
  margin: 0 auto 8rem;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
}
.page-data-container03 {
  background: #ffffff;
  padding: 4.7rem 0;
  margin: 0 auto 0;
  filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
}
.bubble.data-bubble {
  margin-bottom: 1.5rem;
}

/* use-cases */

.use-cases .page-head {
  background: linear-gradient(90deg, #223C4D, 80%, #008DA7);
  height: 438px;
  position: relative
}

.use-cases .page-head-ttl {
  font-size: 4.2rem;
  color: #ffffff;
  line-height: 1;
}

.use-cases-top {
  margin-top: -10rem;
  padding-top: 7.5rem;
  border-radius: 6rem 6rem 0 0;
  position: relative;
  z-index: 1;
  background: #F6F6F6;
}

.use-cases-top .c-head {
  width: 92%;
  max-width: 1082px;
  margin: 0 auto;
}

.use-cases .bg {
  background: #F6F6F6;
}

.use-cases .p-sf {
  margin-top: 2.5rem;
  padding-top: 0;
}

.use-cases .p-sf__ttl {
  color: #275778;
}

.use-cases .p-sf {
  border: 1px solid #275778;
}

.use-cases .p-sf__block {
  width: 71.6%;
  margin: 0 auto;
}

.use-cases .p-sf__video {
  width: 91.6%;
  margin: 3.5rem auto 0;
}

/* ============================================
Column
============================================ */

.page-column-txt {
  font-size: 2.4rem;
  line-height: 1.41;
  color: #275778;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin: 0 auto 6rem;
}

@media screen and (max-width: 768px) {
  /* ============================================
   Layout
============================================ */


  .l-container__pagetop {
    display: none;
    position: fixed;
    right: 0;
    bottom: 1rem;
    z-index: 999;
    width: 6rem;
  }

  .l-inner {
    position: relative;
    width: 86.6%;
    max-width: unset;
    padding: 0 0;
    margin: 0 auto;
  }

  /* ============================================
   FV（ファーストビュー）
============================================ */
  .p-fv__list.slick-slider {
    margin-bottom: 0;
  }

  .p-fv__list .slick-dots {
    bottom: 4.6vw;
  }

  .p-fv__list .slick-dots li {
    width: 12vw;
    height: 1.46vw;
    margin: 0 1.3vw;
    background-color: #fff;
    -webkit-transition: background-color 0.8s ease;
    transition: background-color 0.8s ease;
  }

  .p-fv__list .slick-dots li.slick-active {
    background-color: #00e1d5;
  }

  .p-fv__list .slick-dots li button {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .p-fv__list .slick-dots li button::before {
    display: none;
  }

  .p-fv__list .slick-arrow {
    height: 40.2vw;
    width: 6.6vw;
    margin-top: 2vw;
  }

  .p-fv__list .slick-arrow::before {
    display: none;
  }

  .p-fv__list .slick-prev {
    left: 0;
    z-index: 1;
    background: url(../img/icn_prev.svg) no-repeat center/cover;
  }

  .p-fv__list .slick-next {
    right: 0;
    z-index: 1;
    background: url(../img/icn_next.svg) no-repeat center/cover;
  }

  .p-fv__item {
    position: relative;
  }

  .p-fv__item a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .p-fv__item a:hover {
    opacity: 1;
  }

  .p-fv__item a>img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }

  .p-fv__item-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .p-fv__item-box .bg .letter {
    letter-spacing: -0.05em;
  }

  .p-fv__item-box .bg {
    position: relative;
    background-color: rgba(0, 30, 50, 0.4);
    max-width: 79rem;
    width: 100%;
    padding: 10vw 13.3vw 8.6vw 13.3vw;
    margin-top: 4vw;
  }

  .p-fv__item-box .bg02 {
    padding: 5.28vw 13.3vw 4.5vw 13.3vw
  }

  .p-fv__item-box .bg03 {
    padding: 7vw 13.3vw 6vw 13.3vw;
  }

  .p-fv__item-box .ttl {
    font-size: 5.6vw;
    color: #fff;
    font-weight: bold;
    line-height: 1.2857142857;
    border-bottom: 0.2rem solid #00e1d5;
    padding-bottom: 0.6rem;
    text-shadow: 0 0 0.9rem rgba(0, 0, 0, 0.75);
  }

  /* スライダー内の日付の文字サイズを調整 */
  .p-fv__item-box .ttl .date-small {
    font-size: 0.8em;
    /* 親要素(h2)の80%のサイズにする。この数値は調整可能です */
    font-weight: normal;
    /* 見出しの太字を解除したい場合はこの行を追加 */
  }

  .p-fv__item-box .txt {
    font-size: 3.2vw;
    color: #00e1d5;
    font-weight: bold;
    line-height: 1.41;
    margin-top: 0.7rem;
    letter-spacing: -0.02em;
    text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.75);
  }

  .p-fv__item-box .ttl h2 {
    font-size: 3.2vw;
    color: #fff;
    font-weight: bold;
    line-height: 1.2857142857;
    text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.75);
  }

  .p-fv__item-box .ttl h2.big {
    font-size: 5.6vw;
    color: #fff;
    font-weight: bold;
    line-height: 1.2857142857;
    text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.75);
  }

  .p-fv__item-box .en {
    width: 42.2%;
    position: absolute;
    transform: translate(-50%, 0);
    top: -1.2rem;
    left: 50%;
  }


  .btn {
    width: 36vw;
    height: 6.4vw;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  .btn button {
    background-color: #275778;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.875;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #275778;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;

  }

  .btn button svg {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 1.32rem;
    fill: #fff;
  }

  .btn button:hover {
    opacity: 1;
  }

  @media (hover: hover) {
    .btn button:hover {
      background-color: #fff;
      color: #275778;
    }
  }

  @media (hover: hover) {
    .btn button:hover svg {
      fill: #275778;
    }
  }


  /* ============================================
   イントロ
============================================ */
  .p-intro {
    padding: 8vw 0 13.3vw;
    background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
    background: linear-gradient(90deg, #223c4d, #008da7);
  }

  .p-intro__txt {
    color: #fff;
    max-width: unset;
    width: 100%;
    margin: 0 auto;
  }

  .c-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .c-head-blue {
    background: #00B0D5;
    border-radius: 8vw 8vw 0 0;
    padding: 6.6vw 0 6.6vw;
    margin-top: 0;
  }

  .p-case .c-head-blue {
    padding: 10.6vw 0 10vw;
  }

  .c-head__ttl .en {
    position: relative;
    display: inline-block;
    font-size: 2.7rem;
    line-height: 1.2857;
    color: #275778;
    font-weight: bold;
    padding: 0;
    width: 92%;
    margin-bottom: 0;
  }

  .p-column .c-head-blue {
    padding: 10.6vw 0 9.3vw;
  }

  .c-head-blue .c-head__ttl .en .c-head__ttl .ja {
    display: block;
    font-size: 1.3rem;
    line-height: 1.875;
    font-weight: bold;
  }

  .c-head__txt {
    max-width: unset;
    width: 86.6%;
    margin: 0 auto 0;
    padding: 4rem 0 8.6vw;
    font-size: 1.3rem;
    line-height: 2;
  }

  .c-head--nosub .c-head__txt {
    padding-top: 0;
    width: 100%;
  }

  .c-btn a {
    display: block;
    margin: 0 auto;
    width: 72vw;
    max-width: 100%;
    height: 8.6vw;
    background-color: #00b0d5;
    border-radius: 999px;
    outline: 1px solid #fff;
    outline-offset: 0.2rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2vw;
    font-size: 1.5rem;
    line-height: 2;
    font-weight: bold;
    color: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .c-btn a .icn {
    width: 6.13vw;
    margin-top: -0.3rem;
  }

  .c-btn a:hover {
    opacity: 1;
  }

  @media (hover: hover) {
    .c-btn a:hover {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }
  }

  .mac .c-btn a,
  .iphone .c-btn a {
    padding-bottom: 0.5rem;
  }

  .mac .c-btn a .icn,
  .iphone .c-btn a .icn {
    margin-bottom: -0.5rem;
  }

  .c-btn--arrow a {
    margin: 0 auto;
    width: 83%;
    max-width: 100%;
    height: 8.6vw;
    background-color: #275778;
    border-radius: 999px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.2rem;
    font-size: 1.4rem;
    line-height: 2;
    font-weight: bold;
    color: #fff;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .c-btn--arrow a::after {
    content: "";
    display: block;
    width: 0.8rem;
    height: 0.8rem;
    border-top: 0.1rem solid #fff;
    border-right: 0.1rem solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -ms-flex-negative: 0;
    flex-shrink: 0;
    /* margin-left: auto; */
    position: absolute;
    right: 6%;
  }

  .c-btn--arrow a:hover {
    opacity: 1;
  }

  @media (hover: hover) {
    .c-btn--arrow a:hover {
      -webkit-transform: scale(1.08);
      transform: scale(1.08);
    }
  }

  .mac .c-btn--arrow a,
  .iphone .c-btn--arrow a {
    padding-bottom: 0.5rem;
  }

  .p-cv__btn {
    margin-top: 2rem;
  }

  .p-cv__btn.c-btn--arrow {
    margin-top: 0;
  }

  /* ============================================
   Why SCSK
============================================ */
  .p-why {
    padding: 0;
    position: relative;
    z-index: 1;
  }

  .p-why .bg {
    background: #F6F6F6;
    padding: 0 0 9rem 0;
    border-radius: 0 0 8vw 8vw;
  }

  .p-why__img {
    margin-top: 0;
    mix-blend-mode: multiply;
    width: 84.5%;
    margin: 0 auto;
    padding: 8.8% 0;

  }

  .p-why__img::before {
    content: "";
    background: url(../img/img_why_frame_sp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 118.3%;
    height: 130%;
    position: absolute;
    top: 63%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  .p-modal__block .img {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3rem 0;
  }

  .p-modal__block .img img {
    max-width: none;
    width: 150vw;
  }

  /* ============================================
   CV（お問い合わせ誘導）
============================================ */
  .p-cv {
    padding: 11vw 0 13.3vw;
    background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
    background: linear-gradient(90deg, #223c4d, #008da7);
  }

  .p-cv__txt {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.5454545455;
    color: #fff;
  }

  .c-head-child {
    position: relative;
    display: inline-block;
    font-size: 2.1rem;
    line-height: 1.2857;
    color: #275778;
    font-weight: bold;
    padding: 0 9vw;
    text-align: center;
    margin: 0 auto 5.3vw;
  }

  .c-head-child::before,
  .c-head-child::after {
    content: "";
    width: 2rem;
    height: 1px;
    border-bottom: 1px dashed rgba(39, 87, 120, 0.5);
    position: absolute;
    top: calc(50% + 0.05rem);
  }

  .c-head-child::before {
    left: 0;
  }

  .c-head-child::after {
    right: 0;
  }


  /* ============================================
   SCSKのサービス
============================================ */
  .p-service {
    background-color: #f6f6f6;
    border-radius: 8vw;
    padding: 0 0 16vw;
    /* margin-bottom: 8vw; */
  }

  .p-service__inner {
    padding: 0;
    background-color: #fff;
  }

  .p-service__inner02 {
    padding: 13.3vw 0 10vw;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    margin-bottom: 8vw;
    position: relative;
  }

  .p-service__inner03 {
    padding: 13.3vw 0 10vw;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    margin-bottom: 8vw;
    position: relative;
  }

  .p-service__inner04 {
    padding: 13.3vw 0 10vw;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    position: relative;
  }

  .p-number {
    width: 8vw;
    position: absolute;
    left: 3.73vw;
    top: 3.73vw;
  }

  .p-service__arrow {
    width: 4.4vw;
    margin: 0 auto 2vw;
  }

  .p-service__head {
    padding: 8vw 0 0;
  }

  .p-service__head-child {
    padding: 0 0 0;
  }

  .p-service__ttl {
    position: relative;
    display: block;
    font-size: 2.1rem;
    line-height: 1.2857;
    color: #275778;
    font-weight: bold;
    text-align: center;
    width: 92%;
    margin: 0 auto 3.3vw;
  }

  .p-service__bland {
    width: 40.6vw;
    margin: 0 auto 4vw;
  }

  .p-service__subttl {
    font-size: 1.4rem;
    color: #00B0D5;
    text-align: center;
    width: 92%;
    margin: 0 auto 2.4vw;
  }

  .p-service__txt {
    font-size: 1.3rem;
    font-weight: 400;
    text-align: left;
    width: 90.7%;
    margin: 0 auto;
  }

  .p-service__inner03 .p-service__txt {
    width: 90.7%;
    margin: 0 auto;
    text-align: left;
  }

  .p-service__inner04 .p-service__txt {
    width: 90.7%;
    margin: 0 auto;
    text-align: left;
  }

  .p-service__img {
    position: relative;
    width: 92.4%;
    margin: 0 auto 13.3vw;
    padding: 5.3vw 0 4.6vw;
  }

  .p-service__img img {
    margin-bottom: 3.6vw;
  }

  .p-service__img01 {
    position: relative;
    width: 94.6%;
    margin: 0 auto;
    padding: 4vw 0 4vw;
  }

  .p-service__img02 {
    position: relative;
    width: 90.7%;
    margin: 0 auto;
    padding: 4vw 0 4vw;
  }

  .p-service__img03 {
    position: relative;
    width: 90.7%;
    margin: 0 auto;
    padding: 4vw 0 4vw;
  }

  /* ============================================
   導入事例
============================================ */
  .p-case {
    padding: 0 0 0;
    margin-top: 8vw;
    /* margin-bottom: 8vw; */
  }

  .p-case .bg {
    padding-top: 9vw;
    background: #f6f6f6;
    border-radius: 0 0 8vw 8vw;
  }

  .p-case__head .c-head__txt {
    padding: 0;
    text-align: left;
    width: 100%;
  }

  .p-case__head-child {
    padding: 10vw 0 0;
  }

  .p-case__container {
    background: transparent;
    border: none;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 1.7vw 0 1.7vw;
    margin-bottom: 5.3vw;
  }

  .p-case__container .p-case__list {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: fit-content;
  }

  .p-case__container .p-case__item {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.61;
    padding: 3.3vw 0;
    border-top: 1px solid rgba(34, 60, 77, 0.5);
  }

  .p-case__container .p-case__item:last-child {
    border-bottom: 1px solid rgba(34, 60, 77, 0.5);
  }

  .p-case__container .p-case__item .case-arrow {
    color: #00E1D5;
  }

  .p-case__container .p-case__item .p-case__txt {
    text-decoration: underline;
  }

  .p-case__block {
    margin-top: 0;
    width: 100%;
    margin: 0 auto;
  }

  .p-case__block+.p-case__block {
    margin-top: 8vw;
  }

  .p-case__block-ttl {
    text-align: center;
  }

  .p-case__block-ttl .num {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1.3333333333;
    display: block;
    width: 5.5rem;
    height: 2.75rem;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #00b0d5;
    color: #fff;
    border-radius: 999rem 999rem 0 0;
    padding-top: 1rem;
  }

  .p-case__block-ttl .txt {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1;
    background: -webkit-gradient(linear, left top, left bottom, from(#e5ebef), to(#f6f6f6));
    background: linear-gradient(#e5ebef, #f6f6f6);
    border-radius: 3rem;
    color: #275778;
    padding: 4.3vw 4rem;
  }

  .p-case__block-wrap {
    display: -ms-grid;
    display: flex;
    flex-direction: column;
    gap: 4vw;
    margin-top: 4vw;
  }

  .p-case__block-box--img {
    outline: 1rem solid rgba(21, 87, 113, 0.12);
    outline-offset: -1rem;
    padding: 8vw 8vw;
    min-height: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.3vw;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .p-case__block-box--img .img {
    width: 100%;
    margin: 0 auto;
  }

  .p-case__block-box--effect {
    background-color: #eef6f8;
    display: -ms-grid;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2.6rem;
    padding: 4vw 0;
    gap: 0;
    min-height: unset;
    width: 100%;
    margin: 4vw auto 0;
  }

  .p-case__block-box .btn {
    width: 36vw;
    height: 7vw;
  }

  .p-case__block-box .btn button {
    background-color: #275778;
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.875;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid #275778;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .p-case__block-box .btn button svg {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    width: 1.32rem;
    fill: #fff;
  }

  .p-case__block-box .btn button:hover {
    opacity: 1;
  }

  @media (hover: hover) {
    .p-case__block-box .btn button:hover {
      background-color: #fff;
      color: #275778;
    }
  }

  @media (hover: hover) {
    .p-case__block-box .btn button:hover svg {
      fill: #275778;
    }
  }

  .p-case__block-box .main {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.5555555556;
    margin-top: -0.6rem;
  }

  .p-case__block-box .line {
    margin-top: 1.5rem;
  }

  .p-case__block-box .txt.none_before {
    padding: 0;
  }

  .p-case__block-box .txt.none_before::before {
    content: "　";
  }

  .p-case__block-box .ttl {
    font-size: 1.4rem;
    font-weight: bold;
  }

  .p-case__block-box .txt {
    text-indent: -1.3em;
    padding-left: 1.3em;
    line-height: 1.5;
  }

  .p-case__block-box .txt::before {
    content: "●";
    color: #b4c4d0;
    padding-right: 0.3em;
  }

  .p-case__block-box .txt .br {
    display: none;
  }

  .mac.safari .p-case__block-box .txt .br {
    display: block;
  }

  .p-case__block-box .head {
    font-size: 1.4rem;
    font-weight: bold;
    color: #275778;
    line-height: 1.5555555556;
    margin-bottom: 1vw;
  }

  .p-case__block-box .list {
    width: 90.7%;
    margin: 0 auto;
  }

  .p-case__block-box .item {
    text-indent: -1.4em;
    padding-left: 1.4em;
    font-size: 1.3rem;
  }

  .p-case__block-box .item::before {
    content: "▶︎";
    color: #275778;
    padding-right: 0.4em;
  }

  .p-modal__block .img {
    padding: 3rem;
  }

  /* ============================================
   Salesforce（p-sf）
============================================ */
  .p-sf {
    padding-top: 12.1vw;
  }

  .p-sf__block {
    padding: 0 0 8vw;
  }

  .p-sf__ttl {
    font-size: 1.6rem;
    line-height: 1.31;
    color: #00B0D5;
    font-weight: bold;
    text-align: center;
  }

  .p-sf__txt {
    width: 90.7%;
    color: #275778;
    max-width: 71.8rem;
    margin: 0.8rem auto 0;
    font-size: 1.3rem;
    line-height: 2;
  }

  .p-sf__video {
    text-align: center;
    margin-top: 4.6vw;
  }

  .p-sf__video .box {
    position: relative;
    width: 100%;
    padding-top: 56.4%;
    height: 0;
    margin: 0 auto;
    border: 2px solid #eee;
  }

  .p-sf__video .box iframe {
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ============================================
   コラム
============================================ */

  .gra-bg .p-column { /* トップページのコラムエリアに限定した指定 */
    margin-top: 8vw;
  }

  .p-column .page-head {
    background: linear-gradient(90deg, #223C4D, 80%, #008DA7);
    height: 58.8vw;
    position: relative;
  }

  .p-column .page-head-ttl {
    font-size: 6.1vw;
    color: #ffffff;
    line-height: 1;
  }

  .p-column-top {
    margin-top: -8vw;
    padding-top: 10vw;
    border-radius: 8vw 8vw 8vw 8vw;
    position: relative;
    z-index: 1;
    background: #F6F6F6;
  }

  .p-column-top .c-head {
    width: 86.6%;
    max-width: 1082px;
    margin: 0 auto;
  }

  .p-column .bg {
    background: #F6F6F6;
    border-radius: 0 0 8vw 8vw;
    padding-bottom: 10vw;
  }

  .p-column .p-column-top.bg {
    border-radius: 8vw 8vw 0 0;
    padding-top: 8.6vw;
    padding-bottom: 0;
    margin-top: -8vw;
  }
.single .use-cases-top.bg{
    border-radius: 8vw 8vw 8vw 8vw;
}
  .archive-column.bg {
    padding-top: 0;
    padding-bottom: 16vw;
    background: #f6f6f6;
    border-radius: 0 0 8vw 8vw;
  }

  .p-column .bg .l-inner {
    width: 100%;
    overflow: visible;
  }

  .column-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4vw;
    width: 100%;
    margin: 0 auto 4.5vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 5vw 1.5vw;
    box-sizing: border-box;
    scroll-padding-left: 5vw;
    scrollbar-width: none;
  }

  .column-list::-webkit-scrollbar {
    display: none;
  }

  .column-list--vertical {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
    gap: 4vw;
    width: 90.7%;
    margin: 0 auto;
  }

  .column-list--vertical .column-item {
    width: 100%;
    flex-shrink: 1;
    scroll-snap-align: none;
    margin-bottom: 0;
  }

  .column-item {
    width: 63.7vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    border: 5px solid rgba(21, 87, 113, 0.12);
    box-sizing: border-box;
  }

  .column-img {
    margin-bottom: 2.6vw;
  }

  .column-list--vertical .column-img {
    width: 78.7%;
    margin: 0 auto 2.6vw;
  }

  .column-inner {
    width: 90%;
    margin: 0 auto;
    padding: 3vw 0 11.3vw;
    position: relative;
    display: block;
  }

  .column-list--vertical .column-inner {
    padding: 3vw 0 0.1vw;
  }

  .column-inner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0.8rem;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background-color: #00B0D5;
  }

  .column-list--vertical .column-inner::after {
    bottom: 2rem;
  }

  .column-inner::before {
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 1.7rem;
    width: 0.6rem;
    height: 0.6rem;
    border-top: 0.1rem solid #fff;
    border-right: 0.1rem solid #fff;
    transform: rotate(45deg);
    z-index: 1;
  }

  .column-list--vertical .column-inner::before {
    bottom: 2.9rem;
  }

  .column-ttl {
    font-size: 1.4rem;
    line-height: 1.55;
    font-weight: bold;
    margin-bottom: 4vw;
  }

  .column-list--vertical .column-ttl {
    width: 83%;
  }

  .column-txt {
    font-size: 1.3rem;
  }

  .column-category {
    color: #00B0D5;
    display: block;
  }

  .more_btn.p-cv__btn.c-btn--arrow {
    margin-top: 10.6vw;
  }

  /* ============================================
   お問い合わせ
============================================ */
  .p-contact {
    background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
    background: linear-gradient(90deg, #223c4d, #008da7);
    padding: 18.6vw 0 26.6vw;
  }

  .p-contact__ttl {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
  }

  .p-contact__txt {
    font-size: 1.3rem;
    line-height: 1.5454545455;
    color: #fff;
    text-align: center;
  }

  .p-contact__btn {
    margin-top: 2.2rem;
  }

  .p-contact__note {
    color: #fff;
    text-align: center;
    margin-top: 2vw;
    font-size: 1.1rem;
  }

  /* Solution */
  .solution {
    background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
    background: linear-gradient(90deg, #223c4d, #008da7);
  }

  .solution .page-head {
    background: url(../img/solution_head_bg_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 58.2vw;
    position: relative
  }

  .page-head-content {
    width: 86.6%;
    max-width: 1016px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 35%;
    left: 50%;
  }

  .page-head-txt {
    font-size: 3.2vw;
    color: #ffffff;
    padding-left: 0.5%;
    margin-bottom: -1%;
  }
.solution .page-head-txt{
    font-size: 3.2vw;
    font-weight: bold;
    color: #ffffff;
    padding-left: 0.5%;
    margin-bottom: 0%;
    filter: drop-shadow(0 0 0.9rem rgba(0, 0, 0, 0.75));
    display: block;
    text-align: left;
    margin-bottom: -1.8%;
}
  .page-head-flex {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    margin-top: 0;
  }

  .page-head-left {
            width: 69.4vw;
        margin-bottom: -3vw;
        margin-top: -0.8vw;
  }
  .solution .page-head-left{
    margin-top: 0;
  }
.data .page-head-content .page-head-left{
        width: 44.4vw;
    margin-bottom: -3vw;
margin-top: 0;
}
  .page-head-right {
    width: 42.6vw;
  }

  .breadcrumb-container {
    width: 100%;
    position: absolute;
    transform: translate(0, -50%);
    top: 72%;
    left: 0;
    background: linear-gradient(to right, rgba(0, 176, 213, 0.7) 0%, rgba(0, 225, 213, 0.7) 40%, transparent 84.6%);
    padding: 0 0;
  }

  .breadcrumb {
    width: 86.6%;
    max-width: 1016px;
    margin: 0 auto;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
  }

  .solution-top {
    margin-top: -8vw;
    padding-top: 10vw;
    border-radius: 8vw 8vw 8vw 8vw;
    position: relative;
    z-index: 1;
    background: #F6F6F6;
  }

  .solution-top.bg {
    padding-bottom: 0;
  }

  .page-solution-ttl {
    position: relative;
    display: inline-block;
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #275778;
    font-weight: bold;
    padding: 0 0;
    width: 86.6%;
    margin: 0 auto 4vw;
  }

  .page-solution-subttl {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 700;
    color: #00B0D5;
    text-align: left;
    padding: 0 0;
    width: 86.6%;
    margin: 0 auto;
  }

  .page-solution__head-child .page-solution-subttl {
    text-align: center;
  }

  .page-solution-container {
    background: #ffffff;
    padding: 5.7vw 0;
    margin: 8vw auto 12vw;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  }

  .page-solution-img {
    width: 90.6%;
    margin: 0 auto 4vw;
    background: #ffffff;
  }

  .page-solution__head-child .c-head-child {
    margin-bottom: 3.3vw;

  }

  .page-solution__head-child .page-solution-subttl {
    line-height: 1.41;
    margin-bottom: 4.6vw;
  }

  .bubble {
    font-size: 1.6rem;
    line-height: 1.5;
    font-weight: bold;
    color: #275778;
    background: #DFF2F5;
    width: 100%;
    padding: 1vw;
    text-align: center;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
    position: relative;
  }

  .bubble::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #DFF2F5;
  }

  .bubble+.page-solution-container {
    margin-top: 1.5rem;
    margin-bottom: 8vw;
  }

  .bubble+.page-solution-container .page-solution-img {
    width: 94.9%;
  }


  .page-solution-menu {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    padding-bottom: 7vw;
  }

  .page-solution-item {
    width: 100%;
    background: #ffffff;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
    margin-bottom: 4vw;
    padding: 4.6vw 0;
    position: relative;
    overflow: hidden;
  }

  .page-solution-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: linear-gradient(90deg, #00E1D5, #275778);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .page-solution-menu-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    width: 90.7%;
    margin: 0 auto;
  }

  .page-solution-menu-flex>.box-L {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    margin-bottom: 4vw;
  }

  .solution-menu-ttl {
    font-size: 1.6rem;
    line-height: 1;
    color: #275778;
    margin-bottom: 0.7rem;
  }

  .solution-menu-subttl {
    font-size: 1.3rem;
    line-height: 1.44;
    font-weight: bold;
    color: #00B0D5;
  }

  .page-solution-menu-flex>.box-L>.box-L {
    width: 29.6%;
    margin-right: 2.2rem;
  }

  .page-solution-menu-flex>.box-R {
    width: 100%;
    font-size: 1.3rem;
    line-height: 2;
    font-weight: 400;
  }

  .solution-menu-btn {
    position: relative;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background: #275778;
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 0.2rem 4rem 0.2rem 4rem;
    text-decoration: none;
    width: 51%;
    margin: 6vw auto 0;
    text-align: center;
    display: block;
  }

  .solution-menu-btn::after {
    content: "";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 0.6rem;
    height: 0.6rem;
    border-top: 0.1rem solid #ffffff;
    border-right: 0.1rem solid #ffffff;
  }

  /* data */
  .data {
    background: -webkit-gradient(linear, left top, right top, from(#223c4d), to(#008da7));
    background: linear-gradient(90deg, #223c4d, #008da7);
  }

  .data .page-head {
    background: url(../img/data-usage_head_bg_sp.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 58.2vw;
    position: relative
  }

  .data .page-head-ttl {
    font-size: 6.1vw;
    color: #ffffff;
    line-height: 1;
  }

  .data-top {
    margin-top: -8vw;
    padding-top: 10vw;
    border-radius: 8vw 8vw 8vw 8vw;
    position: relative;
    z-index: 1;
    background: #F6F6F6;
  }

  .data-top.bg {
    padding-bottom: 6.6vw;
  }

  .data-top .c-head {
    width: 86.6%;
    max-width: 1082px;
    margin: 0 auto;
    padding-top: 0;
  }

  .data-top .c-head.p-service__head {
    width: 100%;
  }

  .c-head.p-service__head .c-head__txt {
    margin-bottom: 2.6vw;
    padding-bottom: 0;
  }
.l-container__service .c-head.p-service__head .c-head__txt{
  width: 86.6%;
}
  .page-data-ttl {
    position: relative;
    display: inline-block;
    text-align: left;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #275778;
    font-weight: bold;
    padding: 0;
    margin-bottom: 0.8rem;
  }

  .page-data-subttl {
    font-size: 1.4rem;
    color: #00B0D5;
    text-align: left;
    line-height: 1.3;
    margin-bottom: 6.6vw;
  }

  .page-data-txt {
    font-size: 1.3rem;
    line-height: 2;
    color: #000000;
    text-align: left;
    width: 100%;
    margin: 0 auto 18.6vw;
  }

  .data-top.bg .page-data-txt {
    margin: 0 auto 7.3vw;
  }

  .page-data-container {
    background: #ffffff;
    padding: 4vw 0 4vw;
    margin: 0 auto 8.6vw;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  }

  .page-data-img {
    width: 92.4%;
    margin: 0 auto 3.3vw;
    background: #ffffff;
  }

  .page-data__head-child .c-head-child {
    margin-bottom: 4vw;

  }

  .page-data__head-child .page-solution-subttl {
    line-height: 1.41;
    margin-bottom: 6rem;
  }

  .page-data__head-child .page-data-subttl {
    line-height: 1.41;
    margin-bottom: 6rem;
  }

  .page-data__head-child02 .c-head-child {
    margin-bottom: 2.6vw;

  }

  .page-data__head-child02 .page-solution-subttl {
    line-height: 1.41;
    margin-bottom: 4.6vw;
    text-align: center;
  }

  .page-data__head-child02 .page-data-subttl {
    line-height: 1.41;
    margin-bottom: 4.6vw;
    text-align: center;
  }

  .page-data-container02 {
    background: #ffffff;
    padding: 2.6vw 0 4vw;
    margin: 0 auto 12vw;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  }
  .page-data-container03 {
    background: #ffffff;
    padding: 4vw 0 4vw;
    margin: 0 auto 0;
    filter: drop-shadow(0 0 0.6rem rgba(0, 0, 0, 0.1));
  }
  .bubble.data-bubble {
    margin-bottom: 1.5rem;
  }

  /* use-cases */

  .use-cases .page-head {
    background: linear-gradient(90deg, #223C4D, 80%, #008DA7);
    height: 58.8vw;
    position: relative
  }

  .use-cases .page-head-ttl {
    font-size: 6.1vw;
    color: #ffffff;
    line-height: 1;
  }

  .use-cases-top {
    margin-top: -8vw;
    padding-top: 10vw;
    border-radius: 8vw 8vw 8vw 8vw;
    position: relative;
    z-index: 1;
    background: #F6F6F6;
  }

  .use-cases-top .c-head {
    width: 86.6%;
    max-width: 1082px;
    margin: 0 auto;
  }

  .use-cases .bg {
    background: #F6F6F6;
    border-radius: 0 0 8vw 8vw;
  }

  .use-cases-top.bg {
    border-radius: 8vw 8vw 0 0;
  }

  .use-cases .p-sf {
    margin-top: 2.5rem;
    padding-top: 0;
  }

  .use-cases .p-sf__ttl {
    color: #275778;
  }

  .use-cases .p-sf {
    border: 1px solid #275778;
  }

  .use-cases .p-sf__block {
    width: 90.7%;
    margin: 0 auto;
    padding-top: 5.6vw;
  }

  .use-cases .p-sf__video {
    width: 91.6%;
    margin: 4.6vw auto 0;
  }

  /* アコーディオン（use-cases 背景・サービスポイント） */
  .p-case__block-box .line {
    background: #ffffff;
  }

  .p-case__block-box .line .ttl {
    background: #00B0D5;
    color: #fff;
    position: relative;
    padding: 1vw 5vw 1vw 3vw;
    cursor: pointer;
  }

  .p-case__block-box .line .ttl::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 9vw;
    height: 100%;
    background: #275778;
  }

  .p-case__block-box .line .ttl::before {
    content: "";
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 0.6rem solid transparent;
    border-right: 0.6rem solid transparent;
    border-top: 0.8rem solid #fff;
    z-index: 1;
  }

  .p-case__block-box .line .ttl.is-open::before {
    transform: translateY(-50%) rotate(180deg);
  }

  .p-case__block-box .line .txt {
    display: none;
    width: 90.6%;
    margin: 0 auto;
    padding-top: 2vw;
  }

  .p-case__block-box .line .txt:last-child {
    padding-top: 2vw;
    padding-bottom: 4vw;
  }

  /* column */
  .page-column-txt {
    font-size: 1.8rem;
    line-height: 1.5;
    color: #275778;
    text-align: left;
    width: 100%;
    margin: 0 auto 6.93vw;
  }
}



/* ============================================
   コラム記事（シングルカラム）
============================================ */

/* --- p-article__body --- */
.p-article__body {
  position: relative;
  padding-top: 70px;
  padding-bottom: 29.5rem;
}

@media screen and (max-width: 768px) {
  .p-article__body {
    padding-top: 0;
    padding-bottom: 29.3vw;
  }
}

.p-article__wrap {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

/* --- p-article__wrap --- */




.l-article-container-02 {
  max-width: 1000px;
  border: 10px solid rgba(21, 87, 113, 0.12);

}

/* --- c-box-01 --- */
.c-box-01__container {
  width: 71.6%;
  margin: 0 auto;
  padding: 6rem 0 8rem;
}

@media screen and (max-width: 768px) {
  .l-article-container-02 {
    border: 5px solid rgba(21, 87, 113, 0.12);
  }
}

.l-article-container-03 {
  margin-inline: auto;
  max-width: 1300px;
}

@media screen and (max-width: 768px) {
  .l-article-container-03 {
    padding-inline: 6.6666666667vw;
  }
}

@media print,
screen and (min-width: 1025px) {
  .l-article-container-pc {
    max-width: 800px;
    margin-inline: auto;
  }
}

@media screen and (max-width: 768px) {
  .l-article-container-sp {}
}

/* --- c-page-top --- */
.c-page-top {
  bottom: 0;
}

/* --- c-ttl-01 --- */
.c-ttl-01 {
  border-bottom: 1px solid #275778;
  padding-bottom: 38px;
}

@media screen and (max-width: 768px) {
  .c-ttl-01 {
    padding-bottom: calc(64 / 750 * 100vw);
  }
}

.c-ttl-01__txt {
  display: block;
  position: relative;
  padding-left: 28px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.41;
  color: #275778;
}

.c-ttl-01__txt::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(calc(-50% + 2px));
  content: "";
  display: block;
  width: 0.4rem;
  height: 77.7777777778%;
  min-height: 8rem;
  background: linear-gradient(180deg, rgba(0, 225, 213, 1) 0%, rgba(0, 176, 217, 1) 100%);
}

@media screen and (max-width: 768px) {

  .c-ttl-01__txt {
    display: block;
    position: relative;
    padding-left: 4vw;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.41;
    color: #275778;
  }

  .c-ttl-01__txt::before {
    width: calc(9 / 750 * 100vw);
    height: 90.9722222222%;
    min-height: calc(84 / 750 * 100vw);
  }
}

/* --- c-ttl-02 --- */
.c-ttl-02 {
  font-size: 2rem;
  font-weight: bold;
  color: #275778;
}

@media screen and (max-width: 768px) {
  .c-ttl-02 {
    font-size: 1.4rem;
    font-weight: bold;
    color: #275778;
  }
}

.c-ttl-02--border {
  padding-bottom: 4px;
  border-bottom: 1px solid #000;
}

/* --- c-ttl-03 --- */
.c-ttl-03 {
  font-size: 1.6rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .c-ttl-03 {
    font-size: calc(26 / 750 * 100vw);
  }
}

.c-ttl-03:not(:first-child) {
  margin-top: 3rem;
}

@media screen and (max-width: 768px) {
  .c-ttl-03:not(:first-child) {
    margin-top: calc(36 / 750 * 100vw);
  }
}

/* --- c-txt-01 --- */
.c-txt-01 {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.42;
}

@media screen and (max-width: 768px) {
  .c-txt-01 {
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
}

.c-txt-01:not(:first-child) {
  margin-top: 8px;
}

/* --- p-article__section --- */
.p-article__section {

  width: 76.1%;
  margin: 11rem auto 0;
}

.p-article__section+.p-article__section {
  margin: 6.5rem auto 0;
}

@media screen and (max-width: 768px) {
  .p-article__section+.p-article__section {
    margin: 13.3vw auto 0;
  }

  .p-article__section {
    margin-top: 23.3vw;
    width: 100%;
  }
}

.p-article__section[id] {
  margin-top: calc(85px - 1em);
  padding-top: 1em;
}

@media screen and (max-width: 768px) {
  .p-article__section[id] {
    margin-top: calc(160 / 750 * 100vw - 1em);
  }
}

.p-article__section-body {
  margin-top: 1.2rem;
}

@media screen and (max-width: 768px) {
  .p-article__section-body {
    margin-top: 2vw;
  }
}

.p-article__section-head:has(.c-ttl-01)+.p-article__section-body {
  margin-top: 26px;
}

@media screen and (max-width: 768px) {
  .p-article__section-head:has(.c-ttl-01)+.p-article__section-body {
    margin-top: calc(32 / 750 * 100vw);
  }
}

/* p-article__section--block modifier */
.p-article__section--block {
  margin-top: 85px;
}

@media screen and (max-width: 768px) {
  .p-article__section--block {
    margin-top: calc(160 / 750 * 100vw);
  }
}

/* --- c-cassette-01 --- */
.c-cassette-01:not(:first-child) {
  margin-top: 1.5rem;
}

@media screen and (max-width: 768px) {
  .c-cassette-01:not(:first-child) {
    margin-top: calc(110 / 750 * 100vw);
  }

  .c-cassette-01:first-child {
    margin-top: 30vw;
  }
}

.c-cassette-01__container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}



@media screen and (max-width: 768px) {
  .c-cassette-01__container {
    flex-direction: column;
    justify-content: center;
  }
}

.c-cassette-01__ttl-sub:first-child {
  margin-top: 12px;
}

.c-cassette-01__txt-wrap {
  width: 49.7%;
}

@media print,
screen and (min-width: 1025px) {
  .c-cassette-01__txt-wrap:has(> .c-cassette-01__ttl) {
    margin-top: 0;
  }
}

.c-cassette-01__txt:not(:first-child) {
  margin-top: 0.3rem;
}

@media screen and (max-width: 768px) {
  .c-cassette-01__txt:not(:first-child) {
    margin-top: calc(16 / 750 * 100vw);
  }
}

.c-cassette-01__img {
  width: 46.3%;
}

@media screen and (max-width: 768px) {
  .c-cassette-01__txt-wrap {
    width: 100%;
  }

  .c-cassette-01__img {
    width: 100%;
    margin-top: 8vw;
  }
}

@media screen and (max-width: 768px) {
  .c-cassette-01__img img {
    width: 100%;
  }
}

.c-cassette-02 {
  margin-top: 6.5rem;
}

@media screen and (max-width: 768px) {
  .c-cassette-02 {
    margin-top: 14.6vw;
  }
}

/* --- p-article__img-wrap / c-img-01 --- */
.p-article__img-wrap {
  margin-top: 5rem;
}

@media screen and (max-width: 768px) {
  .p-article__img-wrap {
    margin-top: calc(160 / 750 * 100vw);
  }
}

.c-img-01 {
  text-align: center;
  margin-top: 9.5rem;
}

@media screen and (max-width: 768px) {
  .c-img-01 img {
    width: 100%;
  }
}

.c-img-01:not(:first-child) {
  margin-top: 77px;
}

@media screen and (max-width: 768px) {
  .c-img-01:not(:first-child) {
    margin-top: calc(106 / 750 * 100vw);
  }
}

@media screen and (max-width: 768px) {
  .c-img-01--sp-scroll {
    overflow-x: auto;
  }
}

@media screen and (max-width: 768px) {
  .c-img-01--sp-scroll img {
    max-width: inherit;
    width: 200%;
  }
}

/* --- c-img-02 / c-img-03 (full viewport width, PC only) --- */
@media print,
screen and (min-width: 1025px) {

  .c-img-02 {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 9.5rem;
  }

  .c-img-02 img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* --- c-img-02 / c-img-03 (full viewport width, PC only) --- */
@media print,
screen and (max-width: 1025px) {

  .c-img-01,
  .c-img-02 {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 13.3vw;
  }

  .c-img-01 img {
    width: 100%;
    height: auto;
    display: block;
  }

  .c-img-02 img {
    width: 150vw;
    height: auto;
    display: block;
  }
}

/* --- anchor offset for fixed header --- */
#case01 {
  scroll-margin-top: 9.5rem;
}

@media screen and (max-width: 1080px) {
  #case01 {
    scroll-margin-top: 5rem;
  }
}

/* --- c-list-01 --- */
.c-list-01 {
  border-bottom: 1px solid #000;
}

.c-list-01__item {
  display: flex;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2;
  border-top: 1px solid #275778;
  padding: 2.5rem 0;
}

@media screen and (max-width: 768px) {
  .c-list-01__item {
    padding-block: calc(24 / 750 * 100vw);
    gap: calc(16 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
}

.c-list-01__item::before {
  content: "●";
  color: #00B0D5;
  margin-right: 0.5rem;
}

/* --- c-list-02 --- */
.c-list-02 {
  padding: 2.1rem 0;
  border-top: 1px solid #275778;
}

@media screen and (max-width: 768px) {
  .c-list-02 {
    padding: 4.6vw 0;
  }
}

.c-list-02__link {
  display: flex;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.42;
}

@media (hover: hover) and (pointer: fine) {
  .c-list-02__link {
    will-change: opacity;
    transition: opacity .3s !important;
  }

  .c-list-02__link:hover {
    opacity: 0.8 !important;
  }
}

@media screen and (max-width: 768px) {
  .c-list-02__link {
    gap: calc(16 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
    line-height: 2;
  }
}

.c-list-02__link::before {
  content: "▼";
  color: #00B0D5;
  margin-right: 0.5rem;
}


@media screen and (max-width: 768px) {
  .c-box-01__container {
    width: 87.6%;
    margin: 0 auto;
    padding: 12vw 0 10vw;
  }
}

.c-box-01__body {
  margin-top: 50px;
}

@media screen and (max-width: 768px) {
  .c-box-01__body {
    margin-top: calc(40 / 750 * 100vw);
  }
}

/* --- c-tbl-01 --- */
@media screen and (max-width: 768px) {
  .c-tbl-01 {
    width: 93.4vw;
    margin-bottom: -3px;
    padding-bottom: 3px;
    display: flex;

    overflow-x: auto;
  }
}

.c-tbl-01__table {
  width: 100%;
  border-top: 1px solid #ACACAC;
  border-right: 1px solid #ACACAC;
}

@media screen and (max-width: 768px) {
  .c-tbl-01__table {
    width: calc(1300 / 750 * 100vw);
    flex-shrink: 0;
  }
}

.c-tbl-01__th,
.c-tbl-01__td {
  height: 60px;
  padding: 1em 1.2em;
  font-size: 1.4rem;
  font-weight: 400;
  border-bottom: 1px solid #ACACAC;
  border-left: 1px solid #ACACAC;
}


.c-tbl-01__th {
  text-align: center;
  background-color: #EFFAFD;
}

.c-tbl-01--blue .c-tbl-01__th {
  color: #fff;
  background-color: #275778;
}

.c-tbl-01--blue02 .c-tbl-01__th {
  color: #fff;
  background-color: #00B0D5;
}

.txt-al-center {
  text-align: center;
}

.c-tbl-01__td {
  background-color: #fff;
}

.c-tbl-01--blue .c-tbl-01__tr:not(.c-tbl-01__tr--bg-wh):nth-of-type(odd) .c-tbl-01__td {
  background-color: #D4DDE4;
}

.c-tbl-01--blue .c-tbl-01__tr:not(.c-tbl-01__tr--bg-wh):nth-of-type(even) .c-tbl-01__td {
  background-color: #E9EEF1;
}

.c-tbl-01--blue02 .c-tbl-01__tr:not(.c-tbl-01__tr--bg-wh):nth-of-type(odd) .c-tbl-01__td {
  background-color: #EFFAFD;
}

.c-tbl-01--blue02 .c-tbl-01__tr:not(.c-tbl-01__tr--bg-wh):nth-of-type(even) .c-tbl-01__td {
  background-color: #DEF5FB;
}


/* ============================================
   Footer
============================================ */
.l-footer__inner {
  width: 100%;
  min-width: 100%;
  padding: 6rem 5.2rem 6.2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media screen and (max-width: 768px) {
  .l-footer__inner {
    min-width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 1.8rem;
    padding: 10vw 0 6.2rem;
  }
}

.l-footer__block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .l-footer__block {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
}

.l-footer__logo {
  width: 19rem;
  margin-left: 0.5rem;
}

@media screen and (max-width: 768px) {
  .l-footer__logo {
    width: 10.7rem;
  }
}

.l-footer__logo img {
  display: block;
}

.l-footer__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 4rem;
  gap: 3.3rem;
}

@media screen and (max-width: 768px) {
  .l-footer__list {
    margin: 1.5rem 0 0;
    gap: 1rem;
    width: 84%;
    max-width: 400px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__item {
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  .l-footer__item a {
    font-size: 1.2rem;
  }
}

.l-footer__item::after {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: auto;
  aspect-ratio: 1;
  background: url(../img/icn_link.svg) no-repeat center/100%;
  margin: 0 0 -0.2rem 0.8rem;
}

@media screen and (max-width: 768px) {
  .l-footer__item::after {
    width: 1.15rem;
    margin: 0 0 -0.1rem 0.5rem;
  }
}

.l-footer__copy {
  font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
  .l-footer__copy {
    font-size: 1rem;
  }

  .remodal {
    width: 92% !important;
  }
}