@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/


/* =========================================================
   ABC CLEAN
   CHILD THEME CSS

   FONT
   Japanese : Noto Sans JP
   English  : Montserrat

   MAIN COLOR
   Navy     : #17243a
========================================================= */


/* =========================================================
   01. BASE
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
}


body {
  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    "Meiryo",
    sans-serif;

  color: #17243a;

  font-weight: 400;
  line-height: 1.8;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ---------------------------------------------------------
   English
--------------------------------------------------------- */

.abc-en {
  font-family:
    "Montserrat",
    sans-serif;

  font-weight: 600;
  letter-spacing: 0.16em;
}


.abc-en--italic {
  font-family:
    "Montserrat",
    sans-serif;

  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* =========================================================
   COCOON HEADING DESIGN RESET
   見出し装飾を全解除
========================================================= */

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  margin: 0;
  padding: 0;

  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  box-shadow: none !important;
  border-radius: 0 !important;

  color: inherit;
}


/* Cocoonの疑似要素による装飾も解除 */

.entry-content h1::before,
.entry-content h1::after,
.entry-content h2::before,
.entry-content h2::after,
.entry-content h3::before,
.entry-content h3::after,
.entry-content h4::before,
.entry-content h4::after,
.entry-content h5::before,
.entry-content h5::after,
.entry-content h6::before,
.entry-content h6::after {
  content: none !important;
  display: none !important;
}

/* =========================================================
   02. COCOON DEFAULT HEADER OFF
========================================================= */

#header-container {
  display: none !important;
}


/* =========================================================
   03. HEADER
   STICKY / MOBILE MENU COMPLETE VERSION
========================================================= */

.abc-header {
  position:
    sticky;

  top:
    0;

  z-index:
    9999;

  width:
    100%;

  overflow:
    visible;

  background:
    #ffffff;

  border-bottom:
    1px
    solid
    #e9edf1;

  box-shadow:
    none;

  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* =========================================================
   SCROLLED HEADER
   ※ backdrop-filterは使用しない
========================================================= */

.abc-header.is-scrolled {
  background:
    rgba(
      255,
      255,
      255,
      .94
    );

  border-bottom-color:
    rgba(
      13,
      49,
      86,
      .08
    );

  box-shadow:
    0
    8px
    30px
    rgba(
      13,
      49,
      86,
      .08
    );

  /*
   fixedのモバイルナビと干渉するため
   backdrop-filterは使用しない
  */
}

/* =========================================================
   03. HEADER
   STICKY / MOBILE MENU
   NAVY SEMI TRANSPARENT VERSION
========================================================= */

.abc-header {
  position: sticky;
  top: 0;
  z-index: 9999;

  width: 100%;

  overflow: visible;

  background: #ffffff;

  border-bottom:
    1px solid #e9edf1;

  box-shadow: none;

  transition:
    background-color .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* =========================================================
   SCROLLED HEADER
========================================================= */

.abc-header.is-scrolled {
  background:
    rgba(255,255,255,.92);

  border-bottom-color:
    rgba(13,49,86,.07);

  box-shadow:
    0
    8px
    30px
    rgba(13,49,86,.08);
}


/* =========================================================
   HEADER INNER
========================================================= */

.abc-header__inner {
  position: relative;

  z-index: 10002;

  display: flex;

  align-items: stretch;

  width: 100%;

  height: 92px;
}


/* =========================================================
   04. LOGO
========================================================= */

.abc-header__logo {
  position: relative;

  z-index: 10003;

  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

  padding:
    0
    40px;

  text-decoration: none;
}


.abc-header__logo-mark {
  display: block;

  width: 58px;
  height: auto;

  flex-shrink: 0;

  object-fit: contain;
}


.abc-header__logo-text {
  display: block;

  width: 155px;
  height: auto;

  flex-shrink: 0;

  object-fit: contain;
}


/* =========================================================
   05. PC NAVIGATION
========================================================= */

.abc-header__nav {
  display: flex;

  align-items: stretch;

  justify-content: flex-end;

  gap: 38px;

  margin-left: auto;

  padding:
    0
    34px;
}


.abc-header__nav > a {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

  color: #17243a;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;

  font-weight: 600;

  line-height: 1;

  text-decoration: none;

  white-space: nowrap;

  transition:
    color .25s ease,
    opacity .25s ease;
}


/* Hover Line */

.abc-header__nav > a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;

  height: 3px;

  background:
    #17243a;

  transform:
    translateX(-50%);

  transition:
    width .25s ease;
}


.abc-header__nav > a:hover::after {
  width: 100%;
}


/* =========================================================
   06. CONTACT
========================================================= */

.abc-header__contact {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 190px;

  flex-shrink: 0;

  background:
    #00a67a;

  color:
    #ffffff !important;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition:
    background-color .25s ease;
}


.abc-header__contact:hover {
  background:
    #078864;

  color:
    #ffffff !important;
}


.abc-header__contact-icon {
  font-size: 17px;

  line-height: 1;
}


/* =========================================================
   07. HAMBURGER
========================================================= */

.abc-header__menu {
  position: relative;

  z-index: 10005;

  display: none;

  width: 72px;
  height: 72px;

  margin-left: auto;

  padding: 0;

  flex-shrink: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  touch-action: manipulation;
}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.abc-header__menu span {
  position: absolute;

  top: 50%;
  left: 50%;

  display: block;

  width: 27px;
  height: 1px;

  background:
    #17243a;

  transform-origin: center;

  transition:
    transform .3s ease,
    opacity .3s ease,
    background-color .3s ease;
}


.abc-header__menu span:nth-child(1) {
  transform:
    translate(-50%, -8px);
}


.abc-header__menu span:nth-child(2) {
  transform:
    translate(-50%, 0);
}


.abc-header__menu span:nth-child(3) {
  transform:
    translate(-50%, 8px);
}


/* =========================================================
   08. MOBILE NAV BASE
========================================================= */

.abc-mobile-nav {
  display: none;
}


/* =========================================================
   09. TABLET / MOBILE
========================================================= */

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


  /* =====================================================
     HEADER
  ====================================================== */

  .abc-header {
    height: 72px;

    overflow: visible;
  }


  .abc-header__inner {
    position: relative;

    z-index: 10002;

    align-items: center;

    height: 72px;
  }


  /* =====================================================
     LOGO
  ====================================================== */

  .abc-header__logo {
    z-index: 10004;

    gap: 8px;

    padding:
      0
      18px;
  }


  .abc-header__logo-mark {
    width: 44px;
  }


  .abc-header__logo-text {
    width: 120px;
  }


  /* =====================================================
     PC ELEMENTS OFF
  ====================================================== */

  .abc-header__nav,
  .abc-header__contact {
    display: none;
  }


  /* =====================================================
     HAMBURGER ON
  ====================================================== */

  .abc-header__menu {
    display: block;

    z-index: 10005;
  }


  /* =====================================================
     OPEN HEADER
     NAVY SEMI TRANSPARENT
  ====================================================== */

  .abc-header.is-open,
  .abc-header.is-open.is-scrolled {
    background:
      rgba(13,49,86,.92);

    border-bottom-color:
      rgba(255,255,255,.08);

    box-shadow:
      none;
  }


  /* =====================================================
     OPEN LOGO
  ====================================================== */

  .abc-header.is-open
  .abc-header__logo {
    position: relative;

    z-index: 10005;
  }


  /* =====================================================
     HAMBURGER OPEN COLOR
  ====================================================== */

  .abc-header.is-open
  .abc-header__menu span {
    background:
      #ffffff;
  }


  /* =====================================================
     HAMBURGER → X
  ====================================================== */

  .abc-header.is-open
  .abc-header__menu span:nth-child(1) {
    transform:
      translate(-50%, 0)
      rotate(45deg);
  }


  .abc-header.is-open
  .abc-header__menu span:nth-child(2) {
    opacity: 0;
  }


  .abc-header.is-open
  .abc-header__menu span:nth-child(3) {
    transform:
      translate(-50%, 0)
      rotate(-45deg);
  }


  /* =====================================================
     FULLSCREEN MOBILE MENU
     NAVY SEMI TRANSPARENT
  ====================================================== */

  .abc-mobile-nav {
    position: fixed;

    z-index: 10000;

    top: 72px;
    right: 0;
    bottom: 0;
    left: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height:
      calc(100dvh - 72px);

    visibility: hidden;

    opacity: 0;

    overflow-x: hidden;

    overflow-y: auto;

    -webkit-overflow-scrolling:
      touch;

    background:
      rgba(13,49,86,.92);

    pointer-events: none;

    transform:
      translateZ(0);

    transition:
      opacity .35s ease,
      visibility .35s ease;
  }


  /* =====================================================
     MENU OPEN
  ====================================================== */

  .abc-header.is-open
  .abc-mobile-nav {
    visibility: visible;

    opacity: 1;

    pointer-events: auto;
  }


  /* =====================================================
     NAV INNER
  ====================================================== */

  .abc-mobile-nav__inner {
    display: flex;

    flex-direction: column;

    align-items: center;

    width:
      min(
        520px,
        calc(100% - 48px)
      );

    margin: auto;

    padding:
      40px
      0;
  }


  /* =====================================================
     NAV LINKS
  ====================================================== */

  .abc-mobile-nav__inner
  > a:not(.abc-mobile-nav__contact) {
    display: flex;

    align-items: center;

    justify-content: center;

    width: auto;

    margin: 0;

    padding:
      17px
      10px;

    border: 0;

    color:
      #ffffff;

    font-family:
      "Noto Sans JP",
      sans-serif;

    font-size: 18px;

    font-weight: 600;

    line-height: 1.5;

    letter-spacing:
      .12em;

    text-align: center;

    text-decoration: none;

    transition:
      opacity .25s ease;
  }


  .abc-mobile-nav__inner
  > a:not(.abc-mobile-nav__contact):hover {
    color:
      #ffffff;

    opacity:
      .65;
  }


  /* =====================================================
     MOBILE CONTACT
  ====================================================== */

  .abc-mobile-nav__contact {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    width:
      min(
        320px,
        100%
      );

    min-height: 60px;

    margin-top: 28px;

    border:
      1px
      solid
      rgba(255,255,255,.65)
      !important;

    background:
      rgba(255,255,255,.03);

    color:
      #ffffff !important;

    font-size: 15px;

    font-weight: 600;

    letter-spacing:
      .08em;

    text-decoration: none;

    transition:
      background-color .25s ease,
      color .25s ease,
      border-color .25s ease;
  }


  .abc-mobile-nav__contact:hover {
    color:
      #0d3156 !important;

    background:
      #ffffff;

    border-color:
      #ffffff !important;
  }


  .abc-mobile-nav__contact-icon {
    font-size: 17px;

    line-height: 1;
  }


  /* =====================================================
     SCROLL LOCK
  ====================================================== */

  body.abc-menu-open {
    overflow: hidden;

    overscroll-behavior: none;
  }

}


/* =========================================================
   10. SMALL MOBILE
========================================================= */

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

  .abc-header__logo {
    gap: 7px;

    padding-left: 14px;
    padding-right: 10px;
  }


  .abc-header__logo-mark {
    width: 40px;
  }


  .abc-header__logo-text {
    width: 108px;
  }


  .abc-header__menu {
    width: 64px;
  }


  .abc-mobile-nav__inner {
    width:
      calc(100% - 40px);

    padding:
      30px
      0;
  }


  .abc-mobile-nav__inner
  > a:not(.abc-mobile-nav__contact) {
    padding:
      14px
      8px;

    font-size:
      17px;
  }


  .abc-mobile-nav__contact {
    margin-top: 24px;
  }

}

/* =========================================================
   ABC CLEAN HEADER
   PC SERVICE DROPDOWN
========================================================= */

.abc-header__nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.abc-header__nav-link {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  height: 100%;

  color: #17243a;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  transition:
    color .25s ease,
    opacity .25s ease;
}

.abc-header__nav-link::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 3px;

  background: #17243a;

  transform: translateX(-50%);

  transition: width .25s ease;
}

.abc-header__nav-item:hover
.abc-header__nav-link::after,

.abc-header__nav-item:focus-within
.abc-header__nav-link::after {
  width: 100%;
}


/* ARROW */

.abc-header__nav-arrow {
  display: block;

  width: 7px;
  height: 7px;

  margin-top: -4px;

  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;

  transform: rotate(45deg);

  transition:
    transform .3s ease,
    margin .3s ease;
}

.abc-header__nav-item:hover
.abc-header__nav-arrow,

.abc-header__nav-item:focus-within
.abc-header__nav-arrow {
  margin-top: 4px;

  transform: rotate(225deg);
}


/* DROPDOWN POSITION */

.abc-header__dropdown {
  position: absolute;

  top: 100%;
  left: 50%;

  width: 390px;

  padding-top: 12px;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -10px);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease;
}

.abc-header__nav-item:hover
.abc-header__dropdown,

.abc-header__nav-item:focus-within
.abc-header__dropdown {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;

  transform:
    translate(-50%, 0);
}


/* DROPDOWN PANEL */

.abc-header__dropdown-panel {
  overflow: hidden;

  padding: 26px;

  border:
    1px solid
    rgba(13, 49, 86, .08);

  border-radius: 3px;

  background:
    rgba(255, 255, 255, .98);

  box-shadow:
    0 24px 60px
    rgba(13, 49, 86, .16);
}

.abc-header__dropdown-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;

  margin-bottom: 17px;
  padding-bottom: 15px;

  border-bottom:
    1px solid
    rgba(13, 49, 86, .1);
}

.abc-header__dropdown-en {
  color: #00a67a;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.abc-header__dropdown-jp {
  color: #17243a;

  font-size: 12px;
  font-weight: 600;
}


/* DROPDOWN LINKS */

.abc-header__dropdown-links {
  display: grid;
  gap: 2px;
}

.abc-header__dropdown-link {
  position: relative;

  display: grid;

  grid-template-columns:
  minmax(0, 1fr)
  22px;

  align-items: center;

  min-height: 57px;

  padding:
    8px
    10px;

  color: #17243a;

  text-decoration: none;

  transition:
    color .25s ease,
    background-color .25s ease,
    padding-left .25s ease;
}

.abc-header__dropdown-link:hover {
  padding-left: 15px;

  color: #0d3156;

  background:
    rgba(0, 166, 122, .065);
}



.abc-header__dropdown-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.abc-header__dropdown-link-en {
  color: #00a67a;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
}

.abc-header__dropdown-link-jp {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.abc-header__dropdown-link-arrow {
  position: relative;

  display: block;

  width: 18px;
  height: 1px;

  background:
    rgba(13, 49, 86, .4);

  transition:
    width .25s ease,
    background-color .25s ease;
}

.abc-header__dropdown-link-arrow::after {
  content: "";

  position: absolute;

  top: -3px;
  right: 0;

  width: 7px;
  height: 7px;

  border-top:
    1px solid
    rgba(13, 49, 86, .4);

  border-right:
    1px solid
    rgba(13, 49, 86, .4);

  transform: rotate(45deg);
}

.abc-header__dropdown-link:hover
.abc-header__dropdown-link-arrow {
  width: 21px;
  background: #00a67a;
}

.abc-header__dropdown-link:hover
.abc-header__dropdown-link-arrow::after {
  border-color: #00a67a;
}


/* =========================================================
   MOBILE SERVICE ACCORDION
========================================================= */

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

  .abc-mobile-nav__group {
    width:
      min(
        360px,
        100%
      );
  }

  .abc-mobile-nav__group-heading {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 61px;
  }

  .abc-mobile-nav__parent-link {
    padding:
      17px
      4px
      17px
      42px;

    color: #ffffff;

    font-family:
      "Noto Sans JP",
      sans-serif;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .12em;

    text-align: center;
    text-decoration: none;
  }

  .abc-mobile-nav__sub-toggle {
    position: relative;

    width: 42px;
    height: 42px;

    padding: 0;

    border: 0;
    background: transparent;

    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;
  }

  .abc-mobile-nav__sub-toggle span {
    position: absolute;

    top: 50%;
    left: 50%;

    display: block;

    width: 14px;
    height: 1px;

    background: #ffffff;

    transform: translate(-50%, -50%);

    transition:
      opacity .25s ease,
      transform .25s ease;
  }

  .abc-mobile-nav__sub-toggle
  span:nth-child(2) {
    transform:
      translate(-50%, -50%)
      rotate(90deg);
  }

  .abc-mobile-nav__group.is-sub-open
  .abc-mobile-nav__sub-toggle
  span:nth-child(2) {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      rotate(0);
  }


  /* SUBMENU ANIMATION */

  .abc-mobile-nav__submenu {
    display: grid;

    grid-template-rows: 0fr;

    opacity: 0;

    transition:
      grid-template-rows .35s ease,
      opacity .3s ease;
  }

  .abc-mobile-nav__group.is-sub-open
  .abc-mobile-nav__submenu {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .abc-mobile-nav__submenu-inner {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    width: 100%;

    border-top:
      1px solid
      rgba(255, 255, 255, .13);

    border-bottom:
      1px solid
      rgba(255, 255, 255, .13);
  }

  .abc-mobile-nav__submenu a {
    position: relative;

    display: block;

    padding:
      11px
      34px
      11px
      48px;

    color:
      rgba(255, 255, 255, .78);

    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .06em;

    text-align: left;
    text-decoration: none;

    transition:
      color .25s ease,
      background-color .25s ease;
  }

  .abc-mobile-nav__submenu a::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 30px;

    width: 7px;
    height: 1px;

    background: #00a67a;

    transform:
      translateY(-50%);
  }

  .abc-mobile-nav__submenu a:hover {
    color: #ffffff;

    background:
      rgba(255, 255, 255, .06);
  }

}


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

  .abc-mobile-nav__parent-link {
    padding-top: 14px;
    padding-bottom: 14px;

    font-size: 17px;
  }

  .abc-mobile-nav__group-heading {
    min-height: 54px;
  }

  .abc-mobile-nav__submenu a {
    padding-top: 9px;
    padding-bottom: 9px;

    font-size: 12px;
  }

}

/* =========================================================
   NEWS / INFORMATION
   MUTED BLUE GREEN + NAVY MORE VERSION
========================================================= */

.abc-news {
  position: relative;

  width: 100%;

  padding:
    45px
    4%
    90px;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.94) 0%,
      rgba(255,255,255,0.88) 36%,
      rgba(255,255,255,0.42) 67%,
      rgba(255,255,255,0.10) 100%
    ),
    url("https://abcclean.jp/wp-content/uploads/2026/08/img_5003.png");

  background-repeat:
    no-repeat;

  background-position:
    center;

  background-size:
    cover;
}


/* =========================================================
   INNER
========================================================= */

.abc-news__inner {
  width: 100%;

  max-width: 1500px;

  margin:
    0 auto;

  padding-top:
    35px;
}


/* =========================================================
   HEADING
========================================================= */

.abc-news__heading {
  display: block;

  margin:
    0
    0
    45px;

  padding:
    0;
}


/* =========================================================
   INFORMATION WRAP
========================================================= */

.abc-news__en-wrap {
  position: relative;

  display: inline-block;

  margin:
    0;

  padding:
    0
    0
    7px;

  vertical-align:
    top;
}


/* =========================================================
   INFORMATION
========================================================= */

.abc-news__en,
.entry-content .abc-news__en {
  display: block;

  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #123b68;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      48px
    );

  font-weight:
    700;

  line-height:
    1 !important;

  letter-spacing:
    0.08em;
}


/* =========================================================
   TRICOLOR UNDERLINE
========================================================= */

.abc-news__tricolor {
  position: absolute;

  left: 0;
  bottom: 0;

  display: flex;

  width: 100%;

  height: 4px;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden;
}


.abc-news__tricolor span {
  display: block;

  flex:
    1;

  height:
    100%;

  margin:
    0;

  padding:
    0;
}


.abc-news__tricolor-green {
  background:
    #00a67a;
}


.abc-news__tricolor-yellow {
  background:
    #f5c400;
}


.abc-news__tricolor-red {
  background:
    #e31b23;
}


/* =========================================================
   JAPANESE TITLE
========================================================= */

.abc-news__title,
.entry-content .abc-news__title {
  display: block;

  margin:
    14px
    0
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    none !important;

  box-shadow:
    none !important;

  color:
    #123b68;

  font-size:
    21px;

  font-weight:
    700;

  line-height:
    1.4;

  letter-spacing:
    0.08em;
}


/* =========================================================
   NEWS LIST
========================================================= */

.abc-news__list {
  display: flex;

  flex-direction:
    column;

  gap:
    12px;

  width:
    min(900px, 100%);
}


/* =========================================================
   NEWS ITEM
========================================================= */

.abc-news__item {
  display: flex;

  align-items:
    stretch;

  width:
    100%;

  color:
    #123b68;

  text-decoration:
    none;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}


.abc-news__item:hover {
  transform:
    translateX(7px);

  opacity:
    0.9;
}


/* =========================================================
   DATE CARD
   MUTED BLUE GREEN
========================================================= */

.abc-news__date {
  position: relative;

  z-index: 2;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  width:
    150px;

  min-width:
    150px;

  padding:
    16px
    18px;

  background:
    linear-gradient(
      145deg,
      #4b9b8c 0%,
      #2f7f73 55%,
      #246b62 100%
    );

  color:
    #ffffff;

  box-shadow:
    0
    7px
    20px
    rgba(47,127,115,0.17);

  transform:
    skewX(-10deg);
}


/* 日付文字だけ傾きを戻す */

.abc-news__date > * {
  transform:
    skewX(10deg);
}


.abc-news__year {
  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    15px;

  font-weight:
    500;

  line-height:
    1.1;

  letter-spacing:
    0.08em;
}


.abc-news__monthday {
  margin-top:
    6px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    30px;

  font-weight:
    600;

  line-height:
    1;
}


.abc-news__day {
  margin-top:
    5px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.08em;
}


/* =========================================================
   DATE COLOR LINE
========================================================= */

.abc-news__date-line {
  display: block;

  width:
    68px;

  height:
    3px;

  margin-top:
    11px;
}


.abc-news__date-line--green {
  background:
    #00a67a;
}


.abc-news__date-line--yellow {
  background:
    #f5c400;
}


.abc-news__date-line--red {
  background:
    #e31b23;
}


/* =========================================================
   WHITE NEWS CARD
========================================================= */

.abc-news__card {
  display: flex;

  align-items:
    center;

  gap:
    35px;

  flex:
    1;

  min-height:
    105px;

  margin-left:
    -8px;

  padding:
    20px
    42px
    20px
    55px;

  background:
    rgba(255,255,255,0.94);

  box-shadow:
    0
    7px
    24px
    rgba(40,73,105,0.09);

  clip-path:
    polygon(
      0 0,
      100% 0,
      97% 100%,
      0 100%
    );
}


/* =========================================================
   ICON
========================================================= */

.abc-news__icon {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    62px;

  height:
    62px;

  min-width:
    62px;

  border-radius:
    50%;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    26px;

  font-weight:
    600;
}


.abc-news__icon--green {
  background:
    rgba(0,166,122,0.10);

  color:
    #00a67a;
}


.abc-news__icon--yellow {
  background:
    rgba(245,196,0,0.12);

  color:
    #e4b500;
}


.abc-news__icon--red {
  background:
    rgba(227,27,35,0.07);

  color:
    #e31b23;
}


/* =========================================================
   TEXT
========================================================= */

.abc-news__text,
.entry-content .abc-news__text {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #123b68;

  font-size:
    clamp(
      15px,
      1.4vw,
      20px
    );

  font-weight:
    600;

  line-height:
    1.7;

  letter-spacing:
    0.05em;
}


/* =========================================================
   MORE
   NAVY
========================================================= */

.abc-news__more {
  width:
    min(900px, 100%);

  margin-top:
    30px;

  text-align:
    right;
}


.abc-news__more-link {
  display: inline-flex;

  align-items:
    center;

  gap:
    16px;

  padding:
    5px
    0
    9px;

  border-bottom:
    2px
    solid
    #123b68;

  color:
    #123b68;

  font-size:
    15px;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-decoration:
    none;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}


.abc-news__more-link:hover {
  color:
    #0d3156;

  border-color:
    #0d3156;
}


/* =========================================================
   MORE ARROW
========================================================= */

.abc-news__more-arrow {
  display: flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    50%;

  background:
    #123b68;

  color:
    #ffffff;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    18px;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}


.abc-news__more-link:hover
.abc-news__more-arrow {
  transform:
    translateX(5px);

  background:
    #0d3156;
}


/* =========================================================
   EMPTY
========================================================= */

.abc-news__empty,
.entry-content .abc-news__empty {
  margin:
    0 !important;

  padding:
    20px
    0 !important;

  color:
    #123b68;

  font-size:
    15px;

  font-weight:
    500;
}


/* =========================================================
   TABLET
========================================================= */

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

  .abc-news {
    padding:
      40px
      5%
      80px;

    background-position:
      58% center;
  }


  .abc-news__list {
    width:
      82%;
  }


  .abc-news__date {
    width:
      125px;

    min-width:
      125px;
  }


  .abc-news__card {
    gap:
      25px;

    padding:
      18px
      30px
      18px
      42px;
  }


  .abc-news__icon {
    width:
      54px;

    height:
      54px;

    min-width:
      54px;
  }


  .abc-news__more {
    width:
      82%;
  }

}


/* =========================================================
   MOBILE
========================================================= */

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

  .abc-news {
    padding:
      35px
      20px
      65px;

    background:
      linear-gradient(
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.92)
      ),
      url("https://abcclean.jp/wp-content/uploads/2026/08/img_5003.png");

    background-repeat:
      no-repeat;

    background-position:
      center;

    background-size:
      cover;
  }


  .abc-news__heading {
    margin-bottom:
      32px;
  }


  .abc-news__en-wrap {
    padding-bottom:
      6px;
  }


  .abc-news__en,
  .entry-content .abc-news__en {
    font-size:
      31px;

    line-height:
      1 !important;
  }


  .abc-news__tricolor {
    height:
      4px;
  }


  .abc-news__title,
  .entry-content .abc-news__title {
    margin-top:
      13px !important;

    font-size:
      17px;
  }


  .abc-news__list {
    width:
      100%;

    gap:
      14px;
  }


  .abc-news__item {
    align-items:
      stretch;
  }


  .abc-news__date {
    width:
      91px;

    min-width:
      91px;

    padding:
      12px
      10px;

    transform:
      skewX(-7deg);
  }


  .abc-news__date > * {
    transform:
      skewX(7deg);
  }


  .abc-news__year {
    font-size:
      11px;
  }


  .abc-news__monthday {
    font-size:
      22px;
  }


  .abc-news__day {
    font-size:
      9px;
  }


  .abc-news__date-line {
    width:
      45px;

    margin-top:
      8px;
  }


  .abc-news__card {
    gap:
      14px;

    min-height:
      88px;

    margin-left:
      -5px;

    padding:
      14px
      15px
      14px
      23px;

    clip-path:
      polygon(
        0 0,
        100% 0,
        97% 100%,
        0 100%
      );
  }


  .abc-news__icon {
    width:
      42px;

    height:
      42px;

    min-width:
      42px;

    font-size:
      18px;
  }


  .abc-news__text,
  .entry-content .abc-news__text {
    font-size:
      13px;

    line-height:
      1.55;
  }


  .abc-news__more {
    width:
      100%;

    margin-top:
      26px;
  }


  .abc-news__more-link {
    font-size:
      13px;
  }


  .abc-news__more-arrow {
    width:
      32px;

    height:
      32px;

    font-size:
      15px;
  }

}

/* =========================================================
   INFORMATION HEADING ANIMATION
========================================================= */

/* JavaScriptが動作した場合だけ非表示にする */

.abc-news--motion
.abc-news__heading {
  opacity: 0;
  transform: scale(0.985);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* 表示 */

.abc-news--motion.is-heading-visible
.abc-news__heading {
  opacity: 1;
  transform: scale(1);
}


/* 動きを減らす設定 */

@media (prefers-reduced-motion: reduce) {

  .abc-news--motion
  .abc-news__heading {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* =========================================================
   HERO → INFORMATION
   セクション間の余白を消す
========================================================= */

.abc-hero {
  margin-bottom: 0 !important;
}

.abc-news {
  margin-top: 0 !important;
}


/* Cocoon / Gutenberg のブロック余白対策 */

.entry-content > .abc-hero,
.entry-content > .abc-news {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ヒーロー直後のブロック余白を消す */

.entry-content .abc-hero + .abc-news {
  margin-top: 0 !important;
}


/* ショートコードブロック由来の余白対策 */

.entry-content > p:empty,
.entry-content > .wp-block-shortcode {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   TOP PAGE SECTION CONNECTION
========================================================= */

.entry-content .abc-hero + .wp-block-shortcode {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.entry-content .wp-block-shortcode:has(.abc-news) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   ABC CLEAN
   SINGLE POST
========================================================= */


/* =========================================================
   BASE
========================================================= */

.abc-single {
  position: relative;

  width: 100%;

  margin: 0;
  padding: 0;

  color: #123b68;

  background: #ffffff;
}


/* =========================================================
   VISUAL AREA
========================================================= */

.abc-single__visual {
  position: relative;

  width: 100%;

  overflow: hidden;

  background: #ffffff;
}


/* =========================================================
   BACKGROUND IMAGE
   上部1100pxだけ背景画像を表示
   下へ向かって完全な白へ
========================================================= */

/* =========================================================
   BACKGROUND IMAGE
   TOPページに近い見え方 → 下へ白くフェード
========================================================= */

.abc-single__visual::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  z-index: 0;

  width: 100%;
  height: 1100px;

  pointer-events: none;

  background:
    linear-gradient(
      to bottom,

      /* 上部：TOPページくらい背景を見せる */
      rgba(255, 255, 255, 0.30) 0%,

      rgba(255, 255, 255, 0.34) 15%,

      rgba(255, 255, 255, 0.42) 30%,

      rgba(255, 255, 255, 0.55) 45%,

      rgba(255, 255, 255, 0.70) 60%,

      rgba(255, 255, 255, 0.84) 74%,

      rgba(255, 255, 255, 0.94) 86%,

      #ffffff 100%
    ),

    url("https://abcclean.jp/wp-content/uploads/2026/08/img_5003.png");

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;
}

/* =========================================================
   CONTENT ABOVE BACKGROUND
========================================================= */

.abc-single__hero,
.abc-single__article {
  position: relative;

  z-index: 1;
}


/* =========================================================
   INFORMATION HERO
========================================================= */

.abc-single__hero {
  width: 100%;

  padding:
    68px
    4%
    42px;

  background: transparent;
}


.abc-single__hero-inner {
  width: 100%;
  max-width: 1500px;

  margin: 0 auto;
}


/* =========================================================
   INFORMATION WRAP
========================================================= */

.abc-single__en-wrap {
  position: relative;

  display: inline-block;

  margin: 0;
  padding: 0 0 7px;

  vertical-align: top;
}


/* =========================================================
   INFORMATION
========================================================= */

.abc-single__en {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  color: #123b68;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      30px,
      3.2vw,
      52px
    );

  font-weight: 700;

  line-height: 1 !important;

  letter-spacing: 0.08em;
}


/* =========================================================
   TRICOLOR
========================================================= */

.abc-single__tricolor {
  position: absolute;

  left: 0;
  bottom: 0;

  display: flex;

  width: 100%;
  height: 4px;

  margin: 0;
  padding: 0;

  overflow: hidden;
}


.abc-single__tricolor span {
  display: block;

  flex: 1;

  height: 100%;
}


.abc-single__tricolor-green {
  background: #00a67a;
}


.abc-single__tricolor-yellow {
  background: #f5c400;
}


.abc-single__tricolor-red {
  background: #e31b23;
}


/* =========================================================
   JAPANESE LABEL
========================================================= */

.abc-single__jp {
  margin: 14px 0 0 !important;
  padding: 0 !important;

  color: #123b68;

  font-size: 20px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.08em;
}


/* =========================================================
   ARTICLE
========================================================= */

.abc-single__article {
  width: 100%;

  padding:
    30px
    5%
    110px;

  background: transparent;
}


.abc-single__article-inner {
  width: 100%;
  max-width: 980px;

  margin: 0 auto;
}


/* =========================================================
   META
========================================================= */

.abc-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 18px;

  margin-bottom: 28px;
}


/* =========================================================
   DATE
========================================================= */

.abc-single__date {
  display: inline-flex;
  align-items: baseline;

  color: #123b68;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 16px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.08em;
}


.abc-single__date-dot {
  margin: 0 2px;
}


/* =========================================================
   CATEGORY
========================================================= */

.abc-single__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 30px;

  padding:
    5px
    14px;

  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: 0.05em;
}


/* GREEN */

.abc-single__category--green {
  color: #008a66;

  background:
    rgba(
      0,
      166,
      122,
      0.12
    );
}


/* YELLOW */

.abc-single__category--yellow {
  color: #927000;

  background:
    rgba(
      245,
      196,
      0,
      0.17
    );
}


/* RED */

.abc-single__category--red {
  color: #cf1a21;

  background:
    rgba(
      227,
      27,
      35,
      0.10
    );
}


/* =========================================================
   TITLE
========================================================= */

.abc-single__header {
  margin-bottom: 55px;
}


.abc-single__title,
.entry-content .abc-single__title {
  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  box-shadow: none !important;

  color: #123b68;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      44px
    );

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.045em;
}


/* =========================================================
   TITLE ACCENT
========================================================= */

.abc-single__accent {
  display: block;

  width: 76px;
  height: 4px;

  margin-top: 25px;
}


.abc-single__accent--green {
  background: #00a67a;
}


.abc-single__accent--yellow {
  background: #f5c400;
}


.abc-single__accent--red {
  background: #e31b23;
}


/* =========================================================
   CONTENT
========================================================= */

.abc-single__content {
  color: #263b50;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 16px;
  font-weight: 400;

  line-height: 2;

  letter-spacing: 0.035em;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.abc-single__content p {
  margin:
    0
    0
    2em !important;

  padding: 0 !important;
}


/* =========================================================
   H2
========================================================= */

.abc-single__content h2 {
  position: relative;

  margin:
    70px
    0
    30px !important;

  padding:
    0
    0
    14px !important;

  border: 0 !important;

  border-bottom:
    1px
    solid
    #d9e2ea !important;

  background: none !important;

  box-shadow: none !important;

  color: #123b68;

  font-size: 27px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.05em;
}


.abc-single__content h2::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: -1px;

  width: 65px;
  height: 3px;

  background: #123b68;
}


/* =========================================================
   H3
========================================================= */

.abc-single__content h3 {
  margin:
    50px
    0
    22px !important;

  padding:
    0
    0
    0
    16px !important;

  border: 0 !important;

  border-left:
    4px
    solid
    #123b68 !important;

  background: none !important;

  box-shadow: none !important;

  color: #123b68;

  font-size: 22px;
  font-weight: 700;

  line-height: 1.5;
}


/* =========================================================
   H4
========================================================= */

.abc-single__content h4 {
  margin:
    38px
    0
    18px !important;

  padding: 0 !important;

  border: 0 !important;

  background: none !important;

  color: #123b68;

  font-size: 18px;
  font-weight: 700;

  line-height: 1.6;
}


/* =========================================================
   IMAGE
========================================================= */

.abc-single__content img {
  display: block;

  max-width: 100%;
  height: auto;

  margin:
    38px
    auto;

  border-radius: 2px;
}


/* =========================================================
   FIGURE
========================================================= */

.abc-single__content figure {
  margin:
    38px
    0;
}


.abc-single__content figure img {
  margin:
    0
    auto;
}


.abc-single__content figcaption {
  margin-top: 10px;

  color: #6d7e8f;

  font-size: 12px;

  line-height: 1.6;

  text-align: center;
}


/* =========================================================
   LINKS
========================================================= */

.abc-single__content a {
  color: #0c5f9e;

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 4px;
}


/* =========================================================
   LIST
========================================================= */

.abc-single__content ul,
.abc-single__content ol {
  margin:
    25px
    0
    35px;

  padding-left: 1.7em;
}


.abc-single__content li {
  margin-bottom: 10px;
}


/* =========================================================
   BLOCKQUOTE
========================================================= */

.abc-single__content blockquote {
  margin:
    35px
    0;

  padding:
    25px
    30px;

  border: 0;

  border-left:
    4px
    solid
    #123b68;

  background:
    rgba(
      255,
      255,
      255,
      0.72
    );

  color: #3e5265;
}


/* =========================================================
   TABLE
========================================================= */

.abc-single__content table {
  width: 100%;

  margin:
    35px
    0;

  border-collapse: collapse;

  background:
    rgba(
      255,
      255,
      255,
      0.78
    );
}


.abc-single__content th,
.abc-single__content td {
  padding:
    14px
    16px;

  border:
    1px
    solid
    #d9e2ea;

  text-align: left;
}


.abc-single__content th {
  color: #123b68;

  font-weight: 700;

  background:
    rgba(
      18,
      59,
      104,
      0.05
    );
}


/* =========================================================
   BACK
========================================================= */

.abc-single__back {
  display: flex;
  justify-content: center;

  margin-top: 85px;

  padding-top: 42px;

  border-top:
    1px
    solid
    #dce4eb;
}


/* =========================================================
   BACK LINK
========================================================= */

.abc-single__back-link {
  display: inline-flex;
  align-items: center;

  gap: 14px;

  color: #123b68;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0.07em;

  text-decoration: none;
}


/* =========================================================
   BACK ARROW
========================================================= */

.abc-single__back-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background: #123b68;

  color: #ffffff;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 17px;

  transition:
    transform
    0.25s
    ease;
}


.abc-single__back-link:hover
.abc-single__back-arrow {
  transform: translateX(-5px);
}


/* =========================================================
   COCOON SINGLE RESET
========================================================= */

.single-post #main,
.single-post .main {
  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.single-post .content-in {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


.single-post #sidebar,
.single-post .sidebar {
  display: none !important;
}


/* =========================================================
   TABLET
========================================================= */

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

  .abc-single__visual::before {
    height: 950px;

    background-position: center top;

    background-size: cover;
  }


  .abc-single__hero {
    padding:
      58px
      5%
      38px;
  }


  .abc-single__article {
    padding:
      25px
      6%
      90px;
  }


  .abc-single__article-inner {
    max-width: 820px;
  }


  .abc-single__header {
    margin-bottom: 45px;
  }


  .abc-single__back {
    margin-top: 70px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

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

  .abc-single__visual::before {
    height: 820px;

    background:
      linear-gradient(
        to bottom,

        rgba(255, 255, 255, 0.34) 0%,

        rgba(255, 255, 255, 0.38) 15%,

        rgba(255, 255, 255, 0.47) 30%,

        rgba(255, 255, 255, 0.60) 45%,

        rgba(255, 255, 255, 0.74) 60%,

        rgba(255, 255, 255, 0.87) 75%,

        rgba(255, 255, 255, 0.96) 88%,

        #ffffff 100%
      ),

      url("https://abcclean.jp/wp-content/uploads/2026/08/img_5003.png");

    background-repeat: no-repeat;

    background-position: center top;

    background-size: cover;
  }

}


  .abc-single__hero {
    padding:
      42px
      20px
      32px;
  }


  .abc-single__en {
    font-size: 31px;
  }


  .abc-single__en-wrap {
    padding-bottom: 6px;
  }


  .abc-single__jp {
    margin-top: 12px !important;

    font-size: 17px;
  }


  .abc-single__article {
    padding:
      22px
      20px
      70px;
  }


  .abc-single__meta {
    gap: 12px;

    margin-bottom: 23px;
  }


  .abc-single__date {
    font-size: 13px;
  }


  .abc-single__category {
    min-height: 27px;

    padding:
      4px
      11px;

    font-size: 10px;
  }


  .abc-single__header {
    margin-bottom: 38px;
  }


  .abc-single__title,
  .entry-content .abc-single__title {
    font-size: 25px;

    line-height: 1.55;
  }


  .abc-single__accent {
    width: 58px;
    height: 3px;

    margin-top: 19px;
  }


  .abc-single__content {
    font-size: 15px;

    line-height: 1.9;
  }


  .abc-single__content h2 {
    margin:
      55px
      0
      25px !important;

    font-size: 22px;
  }


  .abc-single__content h3 {
    margin:
      42px
      0
      20px !important;

    font-size: 19px;
  }


  .abc-single__content h4 {
    margin:
      34px
      0
      16px !important;

    font-size: 17px;
  }


  .abc-single__content img {
    margin:
      28px
      auto;
  }


  .abc-single__content figure {
    margin:
      28px
      0;
  }


  .abc-single__content blockquote {
    padding:
      20px
      22px;
  }


  .abc-single__content th,
  .abc-single__content td {
    padding:
      11px
      12px;
  }


  .abc-single__back {
    margin-top: 60px;

    padding-top: 35px;
  }


  .abc-single__back-link {
    font-size: 13px;
  }


  .abc-single__back-arrow {
    width: 34px;
    height: 34px;

    font-size: 15px;
  }

}

/* =========================================================
   ABC CLEAN
   ORIGINAL FOOTER
   LIGHT MINT VERSION
========================================================= */


/* =========================================================
   COCOON DEFAULT FOOTER HIDE
========================================================= */

#footer {
  display:
    none !important;
}


/* =========================================================
   FOOTER BASE
========================================================= */

.abc-footer {
  position:
    relative;

  width:
    100%;

  margin:
    0;

  padding:
    0;

  overflow:
    hidden;

  color:
    #0d3156;

  background:
    linear-gradient(
      135deg,
      #f3f9f7 0%,
      #e4f2ee 45%,
      #d7ebe6 72%,
      #cfe4df 100%
    );

  font-family:
    "Noto Sans JP",
    sans-serif;
}


.abc-footer::before,
.abc-footer::after {
  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   MAIN INNER
========================================================= */

.abc-footer__inner {
  display:
    grid;

  grid-template-columns:
    1.15fr
    1.35fr
    0.9fr;

  align-items:
    start;

  gap:
    75px;

  width:
    100%;

  max-width:
    1500px;

  margin:
    0 auto;

  padding:
    78px
    5%
    70px;
}


/* =========================================================
   BRAND
========================================================= */

.abc-footer__brand {
  min-width:
    0;
}


/* =========================================================
   LOGO
========================================================= */

.abc-footer__logo {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    13px;

  text-decoration:
    none;
}


.abc-footer__logo-mark {
  display:
    block;

  width:
    58px;

  height:
    58px;

  object-fit:
    contain;
}


.abc-footer__logo-text {
  display:
    block;

  width:
    auto;

  max-width:
    210px;

  height:
    42px;

  object-fit:
    contain;

  filter:
    none;
}


/* =========================================================
   TRICOLOR
========================================================= */

.abc-footer__tricolor {
  display:
    flex;

  width:
    190px;

  height:
    4px;

  margin-top:
    24px;

  overflow:
    hidden;
}


.abc-footer__tricolor span {
  display:
    block;

  flex:
    1;

  height:
    100%;
}


.abc-footer__tricolor-green {
  background:
    #00a67a;
}


.abc-footer__tricolor-yellow {
  background:
    #f5c400;
}


.abc-footer__tricolor-red {
  background:
    #e31b23;
}


/* =========================================================
   BRAND MESSAGE
========================================================= */

.abc-footer__message {
  margin:
    25px
    0
    0 !important;

  padding:
    0 !important;

  color:
    #526b70;

  font-size:
    14px;

  font-weight:
    400;

  line-height:
    1.9;

  letter-spacing:
    0.07em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.abc-footer__nav {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  column-gap:
    38px;

  row-gap:
    26px;

  width:
    100%;

  align-content:
    start;
}


/* =========================================================
   NAV LINK
========================================================= */

.abc-footer__nav a {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  gap:
    4px;

  min-width:
    0;

  padding:
    0
    0
    12px;

  border-bottom:
    1px
    solid
    rgba(13,49,86,0.16);

  color:
    #0d3156;

  text-decoration:
    none;

  transition:
    opacity 0.25s ease;
}


.abc-footer__nav a::after {
  content:
    "";

  position:
    absolute;

  left:
    0;

  bottom:
    -1px;

  width:
    0;

  height:
    1px;

  background:
    #0d3156;

  transition:
    width 0.3s ease;
}


.abc-footer__nav a:hover {
  opacity:
    0.72;
}


.abc-footer__nav a:hover::after {
  width:
    100%;
}


/* =========================================================
   NAV JAPANESE
========================================================= */

.abc-footer__nav-ja {
  color:
    #0d3156;

  font-size:
    14px;

  font-weight:
    600;

  line-height:
    1.4;

  letter-spacing:
    0.07em;

  white-space:
    nowrap;
}


/* =========================================================
   NAV ENGLISH
========================================================= */

.abc-footer__nav-en {
  color:
    #72898c;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.2;

  letter-spacing:
    0.13em;

  white-space:
    nowrap;
}


/* =========================================================
   COMPANY
========================================================= */

.abc-footer__company {
  min-width:
    0;
}


/* =========================================================
   COMPANY LABEL
========================================================= */

.abc-footer__company-label {
  margin:
    0
    0
    22px !important;

  padding:
    0 !important;

  color:
    #72898c;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.16em;
}


/* =========================================================
   COMPANY NAME
========================================================= */

.abc-footer__company-name {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #0d3156;

  font-size:
    17px;

  font-weight:
    700;

  line-height:
    1.6;

  letter-spacing:
    0.07em;
}


/* =========================================================
   ADDRESS
========================================================= */

.abc-footer__company-address {
  margin:
    12px
    0
    0 !important;

  padding:
    0 !important;

  color:
    #5f7579;

  font-size:
    13px;

  font-weight:
    400;

  line-height:
    1.7;

  letter-spacing:
    0.06em;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.abc-footer__contact {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  width:
    100%;

  max-width:
    280px;

  margin-top:
    32px;

  padding:
    17px
    20px;

  border:
    1px
    solid
    rgba(13,49,86,0.32);

  color:
    #0d3156;

  background:
    rgba(255,255,255,0.22);

  font-size:
    13px;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  text-decoration:
    none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}


.abc-footer__contact:hover {
  color:
    #ffffff;

  background:
    #0d3156;

  border-color:
    #0d3156;
}


/* =========================================================
   CONTACT ARROW
========================================================= */

.abc-footer__contact-arrow {
  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    17px;

  transition:
    transform 0.25s ease;
}


.abc-footer__contact:hover
.abc-footer__contact-arrow {
  transform:
    translateX(5px);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.abc-footer__bottom {
  width:
    100%;

  border-top:
    1px
    solid
    rgba(13,49,86,0.12);
}


/* =========================================================
   BOTTOM INNER
========================================================= */

.abc-footer__bottom-inner {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  width:
    100%;

  max-width:
    1500px;

  margin:
    0 auto;

  padding:
    22px
    5%;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.abc-footer__copyright {
  margin:
    0 !important;

  padding:
    0 !important;

  color:
    #72898c;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.5;

  letter-spacing:
    0.08em;
}


/* =========================================================
   TABLET
========================================================= */

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

  .abc-footer__inner {
    grid-template-columns:
      1fr
      1fr;

    gap:
      55px
      65px;

    padding:
      65px
      6%
      60px;
  }


  .abc-footer__brand {
    grid-column:
      1 / -1;
  }


  .abc-footer__message br {
    display:
      none;
  }


  .abc-footer__nav {
    column-gap:
      30px;

    row-gap:
      24px;
  }


  .abc-footer__contact {
    max-width:
      none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

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


  /* =====================================================
     FOOTER BASE
  ====================================================== */

  .abc-footer {
    margin:
      0;

    padding:
      0;

    border-top:
      none;

    background:
      linear-gradient(
        to bottom,
        #edf7f4 0%,
        #e4f2ee 28%,
        #dceee9 55%,
        #d5e9e4 78%,
        #cfe4df 100%
      );
  }


  /* =====================================================
     INNER
  ====================================================== */

  .abc-footer__inner {
    display:
      block;

    padding:
      52px
      20px
      45px;
  }


  /* =====================================================
     LOGO
  ====================================================== */

  .abc-footer__logo {
    gap:
      10px;
  }


  .abc-footer__logo-mark {
    width:
      47px;

    height:
      47px;
  }


  .abc-footer__logo-text {
    max-width:
      180px;

    height:
      36px;
  }


  /* =====================================================
     TRICOLOR
  ====================================================== */

  .abc-footer__tricolor {
    width:
      160px;

    height:
      3px;

    margin-top:
      20px;
  }


  /* =====================================================
     MESSAGE
  ====================================================== */

  .abc-footer__message {
    margin-top:
      21px !important;

    font-size:
      13px;

    line-height:
      1.8;
  }


  /* =====================================================
     NAVIGATION
  ====================================================== */

  .abc-footer__nav {
    margin-top:
      48px;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    column-gap:
      24px;

    row-gap:
      23px;
  }


  .abc-footer__nav a {
    padding-bottom:
      11px;
  }


  .abc-footer__nav-ja {
    font-size:
      12px;

    letter-spacing:
      0.04em;
  }


  .abc-footer__nav-en {
    font-size:
      7px;

    letter-spacing:
      0.08em;
  }


  /* =====================================================
     COMPANY
  ====================================================== */

  .abc-footer__company {
    margin-top:
      50px;
  }


  .abc-footer__company-label {
    margin-bottom:
      18px !important;
  }


  .abc-footer__company-name {
    font-size:
      16px;
  }


  .abc-footer__company-address {
    font-size:
      12px;
  }


  /* =====================================================
     CONTACT
  ====================================================== */

  .abc-footer__contact {
    max-width:
      none;

    margin-top:
      26px;

    padding:
      16px
      18px;
  }


  /* =====================================================
     BOTTOM
  ====================================================== */

  .abc-footer__bottom {
    border-top:
      1px
      solid
      rgba(13,49,86,0.11);
  }


  .abc-footer__bottom-inner {
    justify-content:
      flex-start;

    padding:
      20px;
  }

}

/* Cocoon標準フッターだけ非表示 */

footer#footer.footer {
  display: none !important;
}

/* PCでは非表示 */

.abc-sp-only {
  display: none;
}


/* スマホだけ改行を有効化 */

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

  .abc-sp-only {
    display: inline;
  }

}

/* =========================================================
   ABC CLEAN
   MOBILE FLOATING CONTACT
========================================================= */


/* PCでは非表示 */

.abc-mobile-contact {
  display: none;
}


/* =========================================================
   SMARTPHONE / TABLET
========================================================= */

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

  .abc-mobile-contact {
    position: fixed;

    z-index: 9998;

    top: auto;

    right:
      calc(
        12px
        + env(safe-area-inset-right, 0px)
      );

    bottom:
      calc(
        12px
        + env(safe-area-inset-bottom, 0px)
      );

    left: auto;

    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 224px;
    height: 58px;

    margin: 0;

    padding:
      8px
      13px
      8px
      20px;

    box-sizing: border-box;

    overflow: hidden;

    border: 0;
    border-radius: 7px;

    background: #0d3156;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
      0
      8px
      25px
      rgba(5, 27, 48, .2);

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
      translate3d(
        0,
        14px,
        0
      );

    transition:
      opacity .3s ease,
      visibility .3s ease,
      transform .3s ease,
      background-color .2s ease;

    -webkit-tap-highlight-color:
      transparent;

    will-change:
      opacity,
      transform;
  }


  /* 左側のグリーンライン */

  .abc-mobile-contact::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background: #00a67a;
  }


  /* 表示状態 */

  .abc-mobile-contact.is-visible {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;

    transform:
      translate3d(
        0,
        0,
        0
      );
  }


  /* スクロール中は非表示 */

  .abc-mobile-contact.is-scrolling {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
      translate3d(
        0,
        14px,
        0
      );
  }


  /* フッターが見えたら非表示 */

  .abc-mobile-contact.is-footer-visible {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
      translate3d(
        0,
        14px,
        0
      );
  }


  /* ハンバーガーメニュー展開中 */

  body.abc-menu-open
  .abc-mobile-contact {
    visibility: hidden;
    opacity: 0;

    pointer-events: none;

    transform:
      translate3d(
        0,
        14px,
        0
      );
  }


  /* タップ時 */

  .abc-mobile-contact:active {
    background: #092944;

    transform: scale(.98);
  }


  /* =====================================================
     TEXT
  ====================================================== */

  .abc-mobile-contact__text {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    min-width: 0;

    gap: 4px;
  }


  .abc-mobile-contact__en {
  display: block;

  color:
    rgba(255, 255, 255, .6);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .16em;
}


  .abc-mobile-contact__jp {
    display: block;

    color: #ffffff;

    font-family:
      "Noto Sans JP",
      sans-serif!important;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;

    letter-spacing: .035em;

    white-space: nowrap;
  }


  /* =====================================================
     LOGO
  ====================================================== */

  .abc-mobile-contact__logo {
    display: block!important;

    width: 34px;
    height: 34px;

    margin-left: 12px;

    flex-shrink: 0;

    object-fit: contain;
  }

}


/* =========================================================
   iPHONE SAFARI ONLY
========================================================= */

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

  html.abc-ios-safari
  .abc-mobile-contact {
    top:
      calc(
        100svh
        - 64px
      );

    bottom: auto;
  }

}


/* =========================================================
   SMALL SMARTPHONE
========================================================= */

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

  .abc-mobile-contact {
    right:
      calc(
        10px
        + env(safe-area-inset-right, 0px)
      );

    bottom:
      calc(
        10px
        + env(safe-area-inset-bottom, 0px)
      );

    width: 210px;
    height: 55px;

    padding-right: 12px;
    padding-left: 18px;
  }


  html.abc-ios-safari
  .abc-mobile-contact {
    top:
      calc(
        100svh
        - 68px
      );

    bottom: auto;
  }


  .abc-mobile-contact__jp {
    font-size: 12px;
  }


  .abc-mobile-contact__logo {
    width: 31px;
    height: 31px;

    margin-left: 9px;
  }

}