@charset "utf-8";

/* ========================== MAIN ========================== */
/* ========== basics ========== */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
#nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

* {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html {
  font-size: 100%;
  line-height: 1.3;
}

body {
  color: rgb(68, 68, 68);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: rgb(255, 255, 255);
}

::selection {
  color: rgb(0, 0, 0);
  background-color: rgb(220, 220, 220);
}

h1 {
  font-size: 2.5rem;
  font-weight: 600;
}

h1 span {
  font-size: 1.5rem;
}

h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 3.12rem;
  text-align: center;
}

h2 span {
  color: rgb(155, 155, 155);
  font-size: 2.18rem;
  font-weight: 500;
}

p,
time,
.badge {
  font-size: 1rem;
  line-height: 1.7;
}

p.text-right {
  text-align: right;
}

@media screen and (max-width: 68em) {

  h1,
  h2 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 48em) {

  h1,
  h2 {
    font-size: 1.5rem;
  }
}

/* ========== figure ========== */
figure img {
  width: 100%;
}

/* ============= links ============= */
a {
  text-decoration: none;
}

a[target="_blank"],
a.blink,
a.page,
a[target="_blank"]:active,
a.blink:active,
a.page:active {
  color: rgb(0, 0, 0);
  font-weight: 600;
  text-decoration: underline;
}

a.button[target="_blank"] {
  font-weight: 400;
  text-decoration: none;
}

a[target="_blank"]:hover,
a.blink:hover,
a.page:hover {
  text-decoration: none;
}

a[target="_blank"]::after {
  margin-left: 0.31rem;
  content: "\f08e";
  font-family: FontAwesome;
  display: inline-block;
}

/* ========== ul ========== */
.text li {
  margin: 0.62rem 0 6.87em 1.25rem;
  word-wrap: break-word;
}

@media screen and (max-width: 68em) {
  .text li {
    margin: 0.4rem 0 4.4em 1.2rem;
  }
}

/* ============= header ============= */
header {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
  transition: 0.8s;
}

#header {
  position: fixed;
}

#header.show {
  transition: width 0.4s;
  transition-timing-function: cubic-bezier(0.1, 0.2, 0.3, 1);
}

#header.hide {
  transform: translateY(-8rem);
}

.header-spacer {
  padding: 0.62rem 6.25rem;
}

@media screen and (max-width: 88em) {
  .header-spacer {
    padding: 0.62rem 3.12rem;
  }
}

@media screen and (max-width: 68em) {
  .header-spacer {
    padding: 0.62rem 1.56rem;
  }
}

/* ============= logo ============= */
header .logo {
  z-index: 2;
}

header .logo svg {
  width: 8.12rem;
}

@media screen and (max-width: 68em) {
  header .logo svg {
    width: 6.25rem;
  }

  header .logo-active svg,
  header .logo-active svg .a,
  header .logo.logo-active svg .b {
    fill: rgb(255, 255, 255);
    transition: 0.8s;
  }
}

/* ============= nav ============= */
nav {
  margin: auto 0;
  display: flex;
  align-items: center;
}

nav ul {
  display: flex;
}

nav li {
  list-style-type: none;
  padding: 0 0 0 1.25rem;
}

@media screen and (max-width: 68em) {
  nav li {
    padding: 0.93rem 0;
  }
}

/* ============= burger ============= */
.burger {
  display: none;
}

@media screen and (max-width: 68em) {
  .burger {
    display: block;
    z-index: 10;
    cursor: pointer;
    transform: rotateY(0);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .burger-line {
    width: 1.75rem;
    height: 0.12rem;
    margin: 0 0 0.25rem 0;
    background-color: rgb(236, 100, 24);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .burger-line:last-child {
    margin-bottom: 0;
  }

  .burger-close {
    transform: rotate(180deg);
  }

  .burger-close .burger-line:nth-child(1) {
    background-color: rgb(255, 255, 255);
    transform: rotate(45deg) translate(0.25rem, 0.25rem);
  }

  .burger-close .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger-close .burger-line:nth-child(3) {
    background-color: rgb(255, 255, 255);
    transform: rotate(-45deg) translate(0.31rem, -0.25rem);
  }
}

/* ============= menu ============= */
.menu a {
  color: rgb(68, 68, 68);
  font-size: 0.93rem;
  position: relative;
  display: inline-block;
  transition: 0.3s;
  margin-top: 0.62rem;
}

.menu a:hover {
  color: rgb(236, 100, 24);
}

.menu a::after {
  position: absolute;
  bottom: -0.31rem;
  left: 50%;
  content: '';
  width: 0;
  border-bottom: solid 2px rgb(236, 100, 24);
  transition: 0.3s;
  transform: translateX(-50%);
}

.menu a.button {
  margin-top: 0.18rem;
}

.menu a.button::after {
  border-bottom: none;
}

.menu a:hover::after {
  width: 100%;
}

.menu-copyright {
  display: none;
}

@media screen and (max-width: 68em) {
  .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    z-index: 1;
  }

  .menu-active {
    visibility: visible;
  }

  .menu a {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    margin: 0.31rem 0;
  }

  .menu a:hover {
    color: rgb(255, 255, 255);
  }

  .menu a::after {
    border-bottom: solid 0.12rem rgb(255, 255, 255);
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgb(236, 100, 24);
    list-style-type: none;
    transform: translate3d(0, -100%, 0);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu-list-active {
    transform: translate3d(0, 0, 0);
  }

  .menu-list ul {
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
  }

  .menu-item {
    transform: translate3d(31.25rem, 0, 0);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu-item-active {
    transform: translate3d(0, 0, 0);
  }

  .menu-link:hover:before {
    width: 100%;
  }

  .menu .menu-item:nth-child(1) {
    display: block;
    transition-delay: 0.05s;
  }

  .menu .menu-item:nth-child(2) {
    transition-delay: 0.12s;
  }

  .menu .menu-item:nth-child(3) {
    transition-delay: 0.19s;
  }

  .menu .menu-item:nth-child(4) {
    transition-delay: 0.26s;
  }

  .menu .menu-item:nth-child(5) {
    transition-delay: 0.33s;
  }

  .menu .menu-item:nth-child(6) {
    transition-delay: 0.4s;
  }

  .menu .menu-item:nth-child(7) {
    transition-delay: 0.47s;
  }

  .menu-copyright {
    display: block;
    width: 100%;
    margin-bottom: 3.12rem;
  }

  .menu-copyright p {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    transition: opacity .4s ease-out;
    transition-delay: .4s;
  }

  .menu-copyright p a {
    font-size: 1rem;
  }
}

/* ============= button ============= */
a.button {
  color: rgb(255, 255, 255);
  transition: all .25s cubic-bezier(0.390, 0.500, 0.150, 1.360);
  border-radius: 6.25rem;
  padding: 0.43rem 1.25rem;
  background-color: rgb(236, 100, 24);
  box-shadow: rgb(236, 100, 24) 0 0 0 0.4rem inset;
}

a.button:hover {
  color: rgb(236, 100, 24);
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(236, 100, 24) 0 0 0 2px inset;
}

.menu-list-active a.button {
  color: rgb(236, 100, 24);
  background-color: rgb(255, 255, 255);
  box-shadow: rgb(255, 255, 255) 0 0 0 2px inset;
}

.menu-list-active a.button:hover {
  color: rgb(255, 255, 255);
  background-color: rgb(236, 100, 24);
  box-shadow: rgb(255, 255, 255) 0 0 0 2px inset;
}

.button-box a.button {
  padding: 1.25rem 3.12rem;
}

.button-box a.button.disabled,
.button-box a.button[disabled] {
  background-color: rgb(210, 210, 210);
  box-shadow: none;
  pointer-events: none;
}

@media screen and (max-width: 68em) {
  .button-box a.button {
    font-size: 0.93rem;
    padding: 0.93rem 1.87rem;
  }
}

@media screen and (max-width: 48em) {
  .button-box {
    text-align: center;
  }
}

.link-grid,
.link-block {
  margin-top: 3.12rem;
  text-align: center;
}

@media screen and (max-width: 68em) {

  .link-grid,
  .link-block {
    margin-top: 2.81rem;
  }
}

/* ========== banner ========== */
.banner-spacer {
  padding: 4.37rem 6.25rem 0;
}

.banner-contents {
  height: 50rem;
  background-image: url(../img/banner.svg);
  background-repeat: no-repeat;
  background-position: right top;
  background-size: auto 100%;
}

.banner-contents h1 {
  padding-top: 15.62rem;
  padding-bottom: 3.12rem;
}

@media screen and (min-width: 125em) {
  .banner-spacer {
    padding: 4.37rem 18.75rem 0;
  }
}

@media screen and (max-width: 97em) {
  .banner-contents {
    background-size: auto 80%;
  }

  .banner-contents h1 {
    font-size: 2rem;
  }

  .banner-contents h1 span {
    font-size: 1.43rem;
  }
}

@media screen and (max-width: 68em) {
  .banner-spacer {
    padding: 4.68rem 1.56rem 0 2.81rem;
  }

  .banner-contents {
    height: 40rem;
  }

  .banner-contents h1 {
    font-size: 2rem;
  }
}

@media screen and (max-width: 48em) {
  .banner-spacer {
    padding: 3.6rem 0 0 0;
  }

  .banner-contents {
    height: auto;
    min-height: 110vh;
    background-position: 65% 90%;
    background-size: 170% auto;
  }

  .banner-contents h1 {
    font-size: 1.5rem;
    text-align: center;
    padding-top: 5rem;
    margin-bottom: 0.6rem;
  }

  .banner-contents h1 span {
    font-size: 1.1rem;
  }
}

/* ========== wave-bar ========== */
.wave-bar-top {
  background-color: rgb(244, 244, 244);
  background-image: url(../img/background-wave-top.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
}

.wave-spacer {
  padding: 12.5rem 0 6.25rem 0;
}

.wave-bar-bottom {
  background-color: rgb(244, 244, 244);
  background-image: url(../img/background-wave-bottom.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
}

.clean-bg {
  background-color: rgb(255, 255, 255);
}

/* ========== news ========== */
.news-grid {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
}

.news-grid::-webkit-scrollbar {
  display: none;
}

.news-block-inner {
  display: inline-flex;
}

@media screen and (max-width: 48em) {
  .news-block-inner {}
}

.news-contents {
  width: 31.25rem;
  background-color: rgb(255, 255, 255);
  border-radius: 0.62rem;
}

.news-spacer {
  padding: 1.87rem;
  margin-left: 1.87rem;
}

h3.news-title {
  margin: 0.93rem 0 0.31rem;
  font-size: 1rem;
  line-height: 1.5;
}

.news-grid .more {
  text-align: center;
}

.news-grid .more a.blink {
  line-height: 8;
}

@media screen and (max-width: 68em) {
  .news-contents {
    width: 18rem;
  }

  h3.news-title {
    margin: 0.75rem 0 0.3rem;
    font-size: 1rem;
    line-height: 1.5;
  }

  .news-grid .more a.blink {
    font-size: 1rem;
    line-height: 10;
  }
}

/* ========== badge ========== */
.badge {
  display: inline-block;
  font-weight: 500;
  color: rgb(255, 255, 255);
  border-radius: 0.31rem;
  padding: 0.12rem 0.93rem;
}

.badge.publicity {
  background-color: rgb(130, 107, 229);
}

.badge.pressrelease {
  background-color: rgb(24, 192, 170);
}

.badge.consumer {
  background-color: rgb(241, 78, 94);
}

.badge.company {
  background-color: rgb(66, 122, 214);
}

.badge.food {
  background-color: rgb(0, 172, 175);
}

.badge.daily-necessities {
  background-color: rgb(157, 84, 184);
}

.badge.beauty-fashion {
  background-color: rgb(118, 182, 15);
}

.badge.home-appliances,
.badge.etc {
  background-color: rgb(219, 130, 13);
}

.badge.restaurant {
  background-color: rgb(138, 233, 158);
}

.badge.distribution {
  background-color: rgb(129, 160, 224);
}

.badge.leisure {
  background-color: rgb(169, 130, 221);
}

.badge.event {
  background-color: rgb(221, 105, 134);
}

.badge.inbound {
  background-color: rgb(219, 216, 21);
}

/* ========== time ========== */
.datetime {
  color: rgb(155, 155, 155);
}

/* ========== spacer ========== */
.center-spacer,
.left-spacer,
.right-spacer {
  padding: 0 3.125rem;
}

@media screen and (max-width: 48em) {
  .center-spacer {
    padding: 0 1.87rem;
  }

  .left-spacer,
  .right-spacer {
    padding: 1.87rem 1.87rem 0;
  }
}

/* ========== mission ========== */
.mission-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.mission-block li {
  font-size: 1.87rem;
  color: rgb(68, 68, 68);
  margin: 0 0 3.75rem 0;
  padding: 1.87rem 0 1.87rem 9.37rem;
}

.mission-block li.mission-dc {
  background-image: url(../img/mission-dc.svg);
  background-repeat: no-repeat;
  background-position-x: 1.25rem;
}

.mission-block li.mission-pm {
  background-image: url(../img/mission-pm.svg);
  background-repeat: no-repeat;
  background-position-x: 1.25rem;
}

.mission-block li.mission-op {
  background-image: url(../img/mission-op.svg);
  background-repeat: no-repeat;
  background-position-x: 1.25rem;
}

.mission-block li.mission-efs {
  background-image: url(../img/mission-efs.svg);
  background-repeat: no-repeat;
  background-position-x: 1.25rem;
}

@media screen and (max-width: 68em) {
  .mission-block li {
    font-size: 1.4rem;
    margin: 0 0 4rem 0;
    padding-left: 8rem;
  }
}

@media screen and (max-width: 48em) {
  .mission-block li {
    font-size: 1.05rem;
    margin: 3rem 0 0 1rem;
  }

  .mission-block li.mission-dc,
  .mission-block li.mission-pm,
  .mission-block li.mission-op,
  .mission-block li.mission-efs {
    background-size: 5.2rem auto;
  }

  .mission-block li h3 {
    font-size: 1.14rem;
  }

  .mission-block li p {
    font-size: 0.9rem;
  }
}

/* ========== winwin block ========== */
.winwin-block h3 {
  font-size: 1.87rem;
  font-weight: 600;
  padding: 6.25rem 0.62rem 3.12rem;
  text-align: center;
}

.winwin-img-block figure {
  text-align: center;
}

.winwin-img-block figure.m {
  display: none;
}

.winwin-img-block figure img {
  max-width: 80rem;
}

@media screen and (max-width: 68em) {
  .winwin-block h3 {
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 48em) {
  .winwin-block h3 {
    font-size: 1.2rem;
    padding: 5rem 0.3rem 3rem;
  }

  .winwin-img-block figure.p {
    display: none;
  }

  .winwin-img-block figure.m {
    display: block;
  }
}

/* ========== service ========== */
.service-grid {
  margin-bottom: 18.75rem;
}

.service-grid:last-child {
  margin-bottom: 0;
}

.service-block {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inverse {
  flex-direction: row-reverse;
}

.service-img-contents {
  flex-basis: 50%;
}

.service-img-contents figure {
  margin: 0;
}

.service-img-contents figure.left-side {
  margin-left: 3.125rem;
}

.service-img-contents figure.right-side {
  margin-right: 3.125rem;
}

.service-text-contents {
  flex-basis: 50%;
}

.service-text-contents ul {
  margin: 0 0 4.12rem;
  padding: 0;
}

.service-text-contents li {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.62rem 1.5rem;
}

.service-logo {
  margin: 1.25rem 0 0.31rem;
}

.service-logo img {
  height: 3.5rem;
  margin-bottom: 0.5rem;
}

.service-block h3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
}

.service-block p {
  margin: 0.62rem 0 3.12rem;
}

.service-block .items-block h3 {
  font-size: 1.87rem;
  font-weight: 600;
  padding: 0 3.125rem;
  text-align: center;
}

.service-block .items-block p {
  margin: 0.62rem 3.125rem;
}

.items-navi-block {
  background-color: rgb(196, 212, 238);
  background-image: url(../img/kailog-bg.jpg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 100% auto;
  border-radius: 1.24rem;
  margin: 3.125rem 3.125rem 0;
  padding-bottom: 3.125rem;
  text-align: center;
}

.items-navi-block figure img {
  width: 12.5rem;
  margin: 3.125rem 0 1.24rem;
}

.items-navi-links {
  display: inline-flex;
  justify-content: space-between;
  max-width: 80rem;
}

.items-navi-contents {
  flex-basis: 23%;
  border-radius: 0.62rem;
  position: relative;
  background-color: rgb(244, 244, 244, 0.8);
  padding: 0.31rem 0.31rem 3rem 0.31rem;
}

.items-navi-contents:hover {
  background-color: rgb(244, 244, 244, 0.6);
}

.items-navi-contents a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url(../img/kailog-more-icon.svg);
  background-repeat: no-repeat;
  background-position: center bottom;
}

.items-navi-contents a:hover {
  border-radius: 0.62rem;
  box-shadow: 1em 1em 2em rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

.items-navi-contents {
  margin: 0 0.62rem 1.25rem;
}

.items-navi-contents h4 {
  margin: 0.93rem 0 0.62rem;
  font-size: 1.65rem;
  font-weight: 600;
  line-height: 1.7;
}

.items-navi-contents figure img {
  width: 5rem;
  margin: 0.5rem 0;
}

.service-block .items-block .items-navi-contents p {
  margin: 0.62rem;
}

.service-data-contents {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  margin-top: 3.8rem;
  padding: 2em 1.87rem;
  background-color: rgb(255, 255, 255);
  border-radius: 1.24rem;
  box-shadow: 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.service-data-details {
  text-align: center;
  align-items: stretch;
  flex-basis: 25%;
}

.line {
  width: 1px;
  min-height: 100%;
  margin: 0 0.31rem;
  background-color: rgba(0, 0, 0, 0.2);
}

.service-data-details h4 {
  color: rgb(236, 100, 24);
  font-size: 2.5rem;
  font-weight: 600;
}

.service-data-details span {
  font-size: 1.56rem;
  font-weight: 600;
}

.service-data-details p {
  text-align: center;
}

.service-data-update {
  color: rgb(155, 155, 155);
  text-align: right;
  margin: 0.93rem 0 3.12rem;
}

.service-block .button-box p {
  margin-bottom: 3.12rem;
}

.service-kailog-sp figure img {
  border-radius: 1.24rem;
}

@media screen and (max-width: 68em) {
  .service-block h3 {
    font-size: 1.5rem;
  }

  .service-block p {
    margin: 1.8rem 0 3.6rem;
  }

  .service-block .items-block h3 {
    font-size: 1.5rem;
  }

  .service-data-contents {
    padding: 3em 0.9rem;
  }

  .service-data-details h4 {
    font-size: 1.65rem;
  }

  .items-navi-contents h4 {
    font-size: 1.4rem;
  }
}

@media screen and (max-width: 48em) {
  .service-grid {
    margin-bottom: 10rem;
  }

  .service-block {
    flex-direction: column;
    align-items: center;
  }

  .service-block h3 {
    font-size: 1.2rem;
  }

  .service-block p {
    margin: 0.9rem 0 2.1rem;
  }

  .service-block .items-block h3 {
    font-size: 1.2rem;
  }

  .service-block .items-block p {
    margin: 0.9rem 1.87rem 0;
  }

  .service-img-contents figure {
    margin: 0;
  }

  .service-img-contents {
    flex-basis: 100%;
    padding: 0 1.5rem;
  }

  .service-text-contents {
    flex-basis: 100%;
  }

  .service-text-contents li {
    font-size: 1.1rem;
    font-weight: 600;
  }

  .service-data-contents {
    flex-direction: column;
    padding: 1.5rem;
    margin-top: 4.5rem;
  }

  .line {
    min-width: 100%;
    height: 1px;
    margin: 1.5rem 0;
    background-color: rgba(0, 0, 0, 0.2);
  }

  .service-block .button-box p {
    margin-bottom: 2.1rem;
  }

  .service-img-contents figure.left-side,
  .service-img-contents figure.right-side {
    margin-left: 0;
    margin-right: 0;
  }

  .service-logo img {
    max-width: 100%;
  }

  .items-navi-block figure img {
    width: 7.5rem;
  }

  .items-navi-links {
    display: block;
    justify-content: space-between;
    max-width: none;
  }

  .items-navi-contents h4 {
    font-size: 1.2rem;
  }

  .items-navi-contents figure img {
    width: 4rem;
  }
}

/* ========== case ========== */
.case-grid {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.case-grid .center-spacer {
  padding: 0;
}

.case-grid::-webkit-scrollbar {
  display: none;
}

.case-block {
  position: relative;
}

.case-block-inner {
  display: inline-flex;
  margin-bottom: 12.5rem;
}

.case-contents {
  width: 37.5rem;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 92% auto;
  padding-top: 30rem;
}

.case-contents.first {
  background-image: url(../img/case01-top.jpg);
}

.case-contents.second {
  background-image: url(../img/case02-top.jpg);
}

.case-contents.third {
  background-image: url(../img/case03-top.jpg);
}

.case-contents.fourth {
  background-image: url(../img/case04-top.jpg);
}

.case-contents.fifth {
  background-image: url(../img/case05-top.jpg);
}

.case-contents.sixth {
  background-image: url(../img/case06-top.jpg);
}

.case-contents.seventh {
  background-image: url(../img/case07-top.jpg);
}

.case-spacer {
  padding-right: 3.12rem;
}

.case-img-contents img {
  border-radius: 0.62rem;
  margin-bottom: 1.87rem;
}

.case-block h3 {
  font-size: 1.37rem;
  font-weight: 500;
  line-height: 1.3;
  margin: 1.25rem 0.93rem;
}

.case-text-contents {
  background-color: rgb(255, 255, 255);
  padding-top: 0.5rem;
}

.case-grid .case-content>li {
  color: rgb(155, 155, 155);
  font-size: 1rem;
  margin: 0 0 1.25rem;
  list-style-type: none;
}

.case-grid .case-content>li h4 {
  color: rgb(68, 68, 68);
  background-color: rgb(242, 242, 242);
  padding: 0.31rem 0.93rem;
  margin-bottom: 0.62rem;
  border-radius: 0.31rem;
}

.case-grid .case-content>li p {
  margin: 0 0.93rem;
  line-height: 1.5;
}

/* ====== case addition st ====== */

/*----------------------------
  article
----------------------------*/

article {
  margin: 1rem 2rem;
}

article .post_thumbnail {
  float: left;
  width: 32%;
}

article .info {
  float: right;
  width: 65%;
}


/*----------------------------
  カード型
----------------------------*/

.card_06 {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}

.card-img_06 {
  border-radius: 5px 5px 0 0;
  max-width: 100%;
  height: auto;
}

.card-content_06 {
  padding: 1.2rem 1.6rem;
}

.card-title_06 {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}

.card-title_05 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.6rem;
}

.card-text_06 {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.2em;
}

.card-content_06 p {
  margin-bottom: 0;
}

#news\ use-cases {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 800px;
}

/*----------------------------
  会社情報
----------------------------*/

.casestudy_detail {
  background-color: rgb(244, 244, 244);
  border-radius: 10px;
  display: flex;
  margin: auto;
  padding: 40px 40px 32px;
  width: auto;
}

.case-details-company {
  width: auto;
  display: block;
}

/* ====== case addition end ====== */


@media screen and (max-width: 148em) {
  .case-contents {
    padding-top: 28rem;
  }
}

@media screen and (max-width: 128em) {
  .case-contents {
    padding-top: 25rem;
  }
}

@media screen and (max-width: 108em) {
  .case-contents {
    padding-top: 22rem;
  }
}

@media screen and (max-width: 88em) {
  .case-contents {
    padding-top: 17rem;
  }
}

@media screen and (max-width: 68em) {
  .case-spacer {
    padding-right: 1.4rem;
  }

  .case-contents {
    width: 20rem;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 92% auto;
    padding-top: 14rem;
  }

  .case-block h3 {
    font-size: 1rem;
    margin: 1.2rem 0;
  }

  .case-grid .case-content>li {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0 0 0.6rem 0;
  }
}

/* ========== insight ========== */
.insight-grid {
  margin-bottom: 12.5rem;
}

.insight-grid h3 {
  font-size: 1.87rem;
  font-weight: 600;
  margin-bottom: 3.12rem;
  text-align: center;
}

.insight-block {
  display: flex;
  justify-content: space-between;
}

.insight-contents {
  flex-basis: 32%;
  border-radius: 0.62rem;
  position: relative;
  background-color: rgb(244, 244, 244);
  padding: 0.31rem;
}

.insight-contents a {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.insight-contents a[target="_blank"]::after {
  position: absolute;
  bottom: 1.25rem;
  right: 1.25rem;
}

.insight-contents a:hover {
  border-radius: 0.62rem;
  box-shadow: 1em 1em 2em rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
}

.insight-img-contents img {
  border-radius: 0.62rem;
  margin-bottom: 1.25rem;
}

.insight-text-contents {
  margin: 0 1.25rem 1.25rem;
}

.insight-text-contents h4 {
  margin: 0.93rem 0 0.62rem;
  font-weight: 600;
  line-height: 1.7;
}

.insight-text-contents .badge {
  padding: 0.25rem 0.62rem;
}

@media screen and (max-width: 68em) {
  .insight-grid h3 {
    font-size: 1.4rem;
  }

  .insight-text-contents h4 {
    font-size: 1.2rem;
    line-height: 1.5;
  }
}

@media screen and (max-width: 48em) {
  .insight-block {
    flex-direction: column;
  }

  .insight-contents {
    margin-bottom: 3rem;
  }

  .insight-contents:last-child {
    margin-bottom: 0;
  }

  .insight-grid h3 {
    font-size: 1.2rem;
  }

  .insight-text-contents h4 {
    font-size: 1.05rem;
    line-height: 1.5;
  }
}

.client-banner-list {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  justify-content: center;
}

.client-block {
  margin-bottom: 3.12rem;
}

.client-banner-list {
  margin-bottom: 3.12rem;
}

.client-banner {
  text-align: center;
  width: 12.5rem;
  margin: 0.62rem 0 1.87rem;
}

.client-banner img {
  width: 9.37rem;
}

.client-banner p {
  font-size: 0.81rem;
}

.client-block .info {
  text-align: center;
}

@media screen and (max-width: 48em) {
  .client-banner {
    width: 9rem;
    margin: 0.3rem 0.2rem 1.5rem;
  }

  .client-banner img {
    width: 7.5rem;
  }

  .client-banner p {
    font-size: 0.7rem;
  }
}

/* ========== other service ========== */
.other-service-inner {
  display: flex;
  justify-content: space-between;
}

.other-service-inner .service-grid {
  flex-basis: 45%;
  margin-bottom: 0;
}

.other-service-inner .service-block {
  display: flex;
  flex-direction: column;
}

.other-service-inner .service-img-contents {
  margin-bottom: 1.87rem;
}

@media screen and (max-width: 48em) {
  .other-service-inner {
    flex-direction: column;
  }

  .other-service-inner .service-grid {
    margin-bottom: 6rem;
  }
}

/* ========== footer ========== */
footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgb(255, 255, 255);
  background-color: rgb(51, 51, 51);
}

footer .footer-inner {
  margin: 3.12rem 0;
  text-align: center;
}

footer .logo svg {
  width: 10.62rem;
}

footer .logo svg,
footer .logo svg .a,
footer .logo svg .b {
  fill: rgb(255, 255, 255);
  transition: 0.8s;
}

footer .lines {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 3.12rem 0;
}

footer .links a {
  color: rgb(255, 255, 255);
  margin: auto 0.93rem;
  position: relative;
  display: inline-block;
  transition: 0.3s;
}

footer .links a:hover {
  color: rgb(236, 100, 24);
}

footer .links a::after {
  position: absolute;
  bottom: -0.31rem;
  left: 50%;
  content: '';
  width: 0;
  border-bottom: solid 2px rgb(236, 100, 24);
  transition: 0.3s;
  transform: translateX(-50%);
}

footer .links a:hover::after {
  width: 100%;
}

footer .copyright p {
  color: rgba(255, 255, 255, 0.3);
  font-size: 90%;
  text-align: center;
  margin-top: 3.12rem;
}

footer .center {
  text-align: center;
}

footer .pmark {
  display: inline-block;
  padding: 0.62rem;
  border-radius: 0.62rem;
  background-color: rgb(255, 255, 255);
}

footer .pmark a img {
  width: 60px;
  height: 70px;
}

footer .top-margin {
  margin-top: 1.4rem;
}

@media screen and (max-width: 68em) {
  footer .logo svg {
    width: 10rem;
  }

  footer .links {
    display: flex;
    flex-direction: column;
  }

  footer .links a {
    font-size: 1rem;
    margin: 1rem 0;
  }
}

/* ========== scroll button ========== */
.scroll-button-grid-inner {
  position: relative;
}

.scroll-button {
  position: absolute;
  top: 3.75rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: rgb(255, 255, 255);
  background-color: rgba(236, 100, 24, 0.7);
  border-radius: 61.87rem;
  /* pointer-events: none; */
  z-index: 1000;
  cursor: pointer;
}

#case .scroll-button {
  top: 35rem;
}

.scroll-button.left {
  left: 1.87rem;
  transition: transform 0.2s ease 0s;
}

.scroll-button.right {
  right: 1.87rem;
}

.scroll-button:hover {
  background-color: rgba(236, 100, 24, 1);
}

.case-block .scroll-button {
  top: 34.37rem;
}

@media screen and (max-width: 48em) {
  .scroll-button-grid-inner {
    display: none;
  }
}

/* ========== scroll buttonanimation ========== */
.ani-updown {
  animation: updown ease-in-out 2s infinite alternate;
  -webkit-animation: updown ease-in-out 2s infinite alternate;
  -moz-animation: updown ease-in-out 2s infinite alternate;
}

@keyframes updown {
  0% {
    transform: translate(0%, 0%);
  }

  100% {
    transform: translate(0%, -1.87rem);
  }
}

@-webkit-keyframes updown {
  0% {
    -webkit-transform: translate(0%, 0%);
  }

  100% {
    -webkit-transform: translate(0%, -1.87rem);
  }
}

@-moz-keyframes updown {
  0% {
    -moz-transform: translate(0%, 0%);
  }

  100% {
    -moz-transform: translate(0%, -1.87rem);
  }
}

/* ========== js animation ========== */
#banner .banner-contents h1.button-title.animated {
  animation: fadeInDown 0.5s both;
}

#mission .mission-block .first.play,
#case .client-block.play {
  animation: fadeInUp 0.5s both;
}

#news .news-block-inner.play {
  animation: fadeInRight 0.5s both;
}

h2.play,
.insight-grid h3.play,
#news .link-grid .button-box.play,
#mission .mission-block .second.play,
#case .insight-contents.first.play {
  animation: fadeInUp 1s both;
}

#banner .banner-contents p.button-box.animated,
#mission .mission-block .third.play,
#ourbusiness h3.play,
#service .items-block h3.play,
#service .items-block p.play,
#service .items-navi-block figure.play,
#case .insight-contents.second.play,
#case .client-banner-list.play {
  animation: fadeInUp 1.5s both;
}

.other-service .other-service-inner .service-monolog.play {
  animation: fadeInLeft 1.5s both;
}

.other-service .other-service-inner .service-insight.play {
  animation: fadeInRight 1.5s both;
}

#service .service-code .service-img-contents.play,
#service .service-kailog-qa .service-text-contents.play,
#service .service-kailog-talk .service-img-contents.play,
#service .service-kailog-sp .service-text-contents.play,
#service .service-kailog-ad .service-img-contents.play,
#service .service-kailog-view .service-text-contents.play,
#service .service-mycomment .service-img-contents.play {
  animation: fadeInLeft 1.5s both;
}

#service .service-code .service-text-contents.play,
#service .service-kailog-qa .service-img-contents.play,
#service .service-kailog-talk .service-text-contents.play,
#service .service-kailog-sp .service-img-contents.play,
#service .service-kailog-ad .service-text-contents.play,
#service .service-kailog-view .service-img-contents.play,
#service .service-mycomment .service-text-contents.play,
#case .case-block-inner.play {
  animation: fadeInRight 1.5s both;
}

#case .case-block-inner.play {
  animation: fadeInRight 1.5s both;
}

#mission .mission-block .forth.play,
#case .insight-contents.third.play,
#service .items-navi-links .items-navi-contents.play {
  animation: fadeInUp 2s both;
}

#ourbusiness .winwin-img-block.play,
#case .button-box.play,
#case .client-block .info.play {
  animation: fadeInUp 2.5s both;
}

#service .service-code .service-full-block.play {
  animation: fadeInUp 3s both;
}

#service .service-code .button-box.play {
  animation: fadeInUp 3s both;
}

@media screen and (max-width: 68em) {

  #service .service-code .service-img-contents.play,
  #service .service-kailog-qa .service-img-contents.play,
  #service .service-kailog-talk .service-img-contents.play,
  #service .service-kailog-sp .service-img-contents.play,
  #service .service-kailog-ad .service-img-contents.play,
  #service .service-kailog-view .service-img-contents.play,
  #service .service-mycomment .service-img-contents.play {
    animation: fadeInUp 1.5s both;
  }

  #service .service-code .service-text-contents.play,
  #service .service-kailog-qa .service-text-contents.play,
  #service .service-kailog-talk .service-text-contents.play,
  #service .service-kailog-sp .service-text-contents.play,
  #service .service-kailog-ad .service-text-contents.play,
  #service .service-kailog-view .service-text-contents.play,
  #service .service-mycomment .service-text-contents.play,
  #case .case-block-inner.play {
    animation: fadeInUp 2s both;
  }

  #service .service-code .service-img-contents.play,
  #service .service-kailog-qa .service-img-contents.play,
  #service .service-kailog-talk .service-img-contents.play,
  #service .service-kailog-sp .service-img-contents.play,
  #service .service-kailog-ad .service-img-contents.play,
  #service .service-kailog-view .service-img-contents.play,
  #service .service-mycomment .service-img-contents.play {
    animation: fadeInUp 1.5s both;
  }

  #service .service-code .service-text-contents.play,
  #service .service-kailog-qa .service-text-contents.play,
  #service .service-kailog-talk .service-text-contents.play,
  #service .service-kailog-sp .service-text-contents.play,
  #service .service-kailog-ad .service-text-contents.play,
  #service .service-kailog-view .service-text-contents.play,
  #case .case-block-inner.play {
    animation: fadeInUp 2s both;
  }

  #service .service-code .service-img-contents.play,
  #service .service-kailog-qa .service-img-contents.play,
  #service .service-kailog-talk .service-img-contents.play,
  #service .service-kailog-sp .service-img-contents.play,
  #service .service-kailog-ad .service-img-contents.play,
  #service .service-kailog-view .service-img-contents.play,
  #service .service-mycomment .service-img-contents.play {
    animation: fadeInUp 1.5s both;
  }

  #service .service-code .service-text-contents.play,
  #service .service-kailog-qa .service-text-contents.play,
  #service .service-kailog-talk .service-text-contents.play,
  #service .service-kailog-sp .service-text-contents.play,
  #service .service-kailog-ad .service-text-contents.play,
  #service .service-kailog-view .service-text-contents.play,
  #service .service-mycomment .service-text-contents.play,
  #case .case-block-inner.play {
    animation: fadeInUp 2s both;
  }

  .other-service .other-service-inner .service-monolog.play {
    animation: fadeInUp 1.5s both;
  }

  .other-service .other-service-inner .service-insight.play {
    animation: fadeInUp 2s both;
  }
}

/* fadeInDown */
@keyframes fadeInDown {
  from {
    transform: translate(0, -3.12rem);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* fadeInUp */
@keyframes fadeInUp {
  from {
    transform: translate(0, 3.12rem);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* fadeInLeft */
@keyframes fadeInRight {
  from {
    transform: translate(18.75rem, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* fadeInRight */
@keyframes fadeInLeft {
  from {
    transform: translate(-18.75rem, 0);
    opacity: 0;
  }

  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}