@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : foundation/base.scss
For   : nabcosystem/index

Created       : 2024-06-18
Last Modified : 2024-06-18

================

Content

////////////////////////////////////////////////// */
/**
 *  ***** variables *****
 */
:root {
  --color-base: #35596a;
  --color-theme: #00A0E6;
  --color-safe: #00A496;
  --color-attention: #e20000;
  --color-catalog: #45B2A2;
  --color-contact: #365969;
  --color-theme-gradient: linear-gradient(to bottom right, rgba(0, 160, 230, 1) 0%, rgba(0, 160, 230, .31) 100%);
  --container-fluid: 100%;
  --container-default: 1400px;
  --container-middle: 1080px;
  --box-shadow-default: 3px 3px 6px 0px rgba(0, 0, 0, .1);
  --font-en-primary: "Arimo", sans-serif;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  :root {
    --spacer-mobile-phone: 20px;
  }
}
/**
 *  ***** base *****
 */
@font-face {
  font-family: "nbsc";
  src: url("../fonts/nbsc.ttf") format("truetype"), url("../fonts/nbsc.woff") format("woff"), url("../fonts/nbsc.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}
body {
  font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  min-width: 1140px;
  -webkit-padding-before: var(--header-height);
          padding-block-start: var(--header-height);
  color: #35596a;
}
body .en {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

section .section-wrapper {
  max-width: 1100px;
  margin: auto;
}

/**
 *  ***** link *****
 */
/* ========== anchor */
a {
  transition: all 0.4s ease;
  text-decoration: none;
  color: var(--color-base);
}
a:visited,
a img {
  transition: all 0.4s ease;
  text-decoration: none;
  color: var(--color-base);
}
a[href]:hover, a[href].hoverBtn:hover {
  opacity: 0.6;
}

/* ========== button */
button {
  transition: all 0.4s ease;
  text-decoration: none;
  color: var(--color-base);
  cursor: pointer;
  border: none;
}
button:hover {
  opacity: 0.6;
}

/**
 *  ***** img *****
 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/**
 *  ***** helper *****
 */
.clearfix:after,
.wrapper:after {
  display: block;
  clear: both;
  content: "";
}

/**
 *  ***** adjust *****
 */
/* ========== postion */
.clB {
  clear: both;
}

.posA {
  position: absolute;
}

.posR {
  position: relative;
}

/* ========== float */
.flL {
  float: left;
}

.flR {
  float: right;
}

/* ========== adjust: display */
.show {
  display: block;
}

.hide {
  display: none;
}

.ilB {
  display: inline-block;
}

/* ========== adjust: margin */
.mt0 {
  margin-top: 0 !important;
}

.mt1 {
  margin-top: 1em !important;
}

.mt2 {
  margin-top: 2em !important;
}

.mt3 {
  margin-top: 3em !important;
}

.ml0 {
  margin-left: 0;
}

/* ========== adjust: width */
.w100 {
  width: 100% !important;
}

/* ========== adjust: text */
.alC {
  text-align: center;
}

.alR {
  text-align: right;
}

.vaB {
  vertical-align: bottom !important;
}

.nowrap {
  white-space: nowrap !important;
}

.fontS {
  font-size: 0.9em;
}

.fontSS {
  font-size: 0.8em;
}

.line {
  text-decoration: underline;
}
.line a {
  text-decoration: underline;
}
.line:hover, .line a:hover {
  text-decoration: none;
}

.link {
  text-decoration: underline;
}
.link:hover {
  text-decoration: none;
}

.attention {
  color: var(--color-attention);
  font-weight: bold;
}

a.noOpc:hover, .noOpc a:hover {
  opacity: 1;
}

strong {
  font-weight: bold;
}

b {
  font-weight: bold;
}

em {
  color: var(--color-attention);
}

.sup-text {
  font-size: 60%;
  vertical-align: top;
  position: relative;
  top: -0.1em;
}

.sub-text {
  font-size: 60%;
  vertical-align: bottom;
  position: relative;
  top: 0.1em;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  body {
    min-width: 0;
  }
  body.open {
    height: 100svh;
    overflow: hidden;
  }
  .hidden-sml {
    display: none !important;
  }
}
/* --- for large viewport --- */
@media screen and (max-width: 767px) {
  .hidden-lrg {
    display: none !important;
  }
}
/* //////////////////////////////////////////////////

Title : project/header.scss
For   : nabcosystem/common

Created       : 2024-06-18
Last Modified : 2024-06-30

==========================================

Content

////////////////////////////////////////////////// */
/**
 *	***** header *****
 */
/* ========== container layout */
.header {
  width: 100%;
  min-width: 1140px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}
.header__body {
  display: grid;
  max-width: var(--container-default);
  margin-inline: auto;
}
.header.is-emg {
  flex-wrap: wrap;
}
.header__logo {
  display: grid;
  text-indent: -9999px;
}
.header__logo a {
  display: block;
  background-image: url(../../assets/images/common/logo.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: none;
}
.header__logo.-symbol {
  padding-top: 32px;
  padding-bottom: 32px;
}
.header__logo.-symbol a {
  width: 117px;
  height: 36px;
  background-image: url(../../assets/images/common/logo-symbol.svg);
  background-size: contain;
}

/* --- for over large viewport --- */
@media screen and (min-width: 768px) {
  .header {
    transition: all 0.4s ease;
    background-color: #fff;
  }
  .header__body {
    grid-template-columns: 280px 1fr auto;
    -moz-column-gap: 16px;
         column-gap: 16px;
    align-items: center;
    padding-block: 15px;
    padding-inline: 10px;
  }
  .header .header-menuNavi > li > a {
    color: var(--color-base);
    font-size: 14px;
  }
}
@media screen and (max-width: 1320px) {
  .header__body {
    grid-template-columns: 220px 1fr auto;
    -moz-column-gap: 5px;
         column-gap: 5px;
  }
  .header .header-menuNavi > li > a{
    font-size: 12px;
  }
}
/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  .header {
    min-width: 0;
  }
  .header__body {
    grid-template-columns: 1fr 116px 50px;
  }
  .header__logo {
    width: 100%;
    padding: 16px 0 18px 10px;
  }
  .header__logo a {
    width: 100%;
    height: 16px;
  }
  .header__logo.-symbol {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .header__logo.-symbol a {
    width: 68px;
    height: 20px;
  }
}
/* ========== color inversion */
.header.is-inversion .header__logo a {
  background-image: url(../../assets/images/common/logo.svg);
}

/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .header.is-inversion .header-menuNavi > li > a {
    color: var(--color-base);
  }
}
/* ========== menu */
.header-menu {
  height: 100%;
}

/* ========== menu navigation */
.header-menuNavi {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
  height: 100%;
}
.header-menuNavi > li {
  position: relative;
  height: 100%;
}
.header-menuNavi > li::after {
  content: "";
  display: block;
  width: 100%;
  height: 4px;
  opacity: 0;
  transition: all 0.4s ease;
  position: absolute;
  bottom: 0;
  left: 0;
}
.header-menuNavi > li:hover::after {
  opacity: 1;
}

@media screen and (max-width: 1320px) {
  .header-menuNavi {
    -moz-column-gap: 15px;
         column-gap: 15px;
  }
}
/* --- for large viewport --- */
@media screen and (min-width: 768px) {
  .header-menuNavi > li a {
    color: #fff;
  }
}
.intro .header-menuNavi > li.intro::after,
.support .header-menuNavi > li.support::after,
.renewal .header-menuNavi > li.renewal::after,
.corporation .header-menuNavi > li.corporation::after,
.brunch .header-menuNavi > li.brunch::after {
  opacity: 1;
}

.header-menuNavi > li.navi-blue::after {
  background-color: var(--color-theme);
}
.header-menuNavi > li.navi-bluegray::after {
  background-color: var(--color-base);
}
.header-menuNavi > li.navi-green::after {
  background-color: var(--color-safe);
}
.header-menuNavi > li > a {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 3.8vw;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.header-menuNavi > li > a.sp {
  display: none;
}

/* ========== mega navigation */
.header-megaNavi {
  width: 100%;
  min-width: 1140px;
  opacity: 0;
  visibility: hidden;
  pointer-events: false;
  transition: opacity 0.4s ease;
  position: fixed;
  left: 0;
  z-index: 10;
}

.header-menuNavi li.navi-blue .header-megaNavi {
  background-color: var(--color-theme);
}
.header-menuNavi li.navi-bluegray .header-megaNavi {
  background-color: var(--color-base);
}
.header-menuNavi li.navi-green .header-megaNavi {
  background-color: var(--color-safe);
}

.navi-megaNavi.is-open .header-megaNavi {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@supports (-ms-ime-align: auto) {
  .header-menuNavi li:hover .header-megaNavi {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
.header-megaNavi .header-megaNavi_wrapper {
  display: flex;
  max-width: 1100px;
  margin: auto;
  padding: 40px 0;
  transition: none;
}
.header-megaNavi .header-megaNavi_titleArea {
  box-sizing: border-box;
  width: 26%;
  padding-right: 3.5%;
}
.header-megaNavi .header-megaNavi_titleArea .header-megaNavi_title {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}
.header-megaNavi .header-megaNavi_titleArea .header-megaNave_top {
  display: block;
  margin-top: 32px;
  padding: 1em;
  border: 2px solid #fff;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}
.header-megaNavi .header-megaNavi_titleArea ul {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.header-megaNavi .header-megaNavi_titleArea ul li {
  margin: 0;
}
.header-megaNavi .header-megaNavi_titleArea ul.col1 li {
  width: 100%;
}
.header-megaNavi .header-megaNavi_titleArea ul.col2 li {
  width: calc(50% - 1px);
}
.header-megaNavi .header-megaNavi_titleArea ul li a {
  display: block;
  padding: 1em;
  background-color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.navi-blue .header-megaNavi .header-megaNavi_titleArea ul li a {
  color: var(--color-theme);
}

.navi-bluegray .header-megaNavi .header-megaNavi_titleArea ul li a {
  color: var(--color-base);
}

.navi-green .header-megaNavi .header-megaNavi_titleArea ul li a {
  color: var(--color-safe);
}

.megaListWrap {
  box-sizing: border-box;
  padding: 0 3%;
  border-left: 1px solid #fff;
  flex: 1;
}

.megaList-1st > li + li {
  margin-top: 22px;
}
.megaList-1st > li > a {
  display: inline-block;
  padding-left: 1em;
  font-size: 4vw;
  font-weight: bold;
  position: relative;
  color: #fff;
}
.megaList-1st > li > .is-nolink {
  display: inline-block;
  padding-left: 1em;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  color: #fff;
  font-weight: normal;
}
.megaList-1st > li > a::before, .megaList-1st > li > .is-nolink::before {
  position: absolute;
  top: 5px;
  left: 0;
  display: inline-block;
  font-family: "nbsc";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.megaList-1st > li > a::before {
  content: "\e909";
}
.megaList-1st > li > .is-nolink::before {
  content: "-";
}
.megaList-1st + .megaList-1st {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}

a + .megaList-2nd,
span + .megaList-2nd {
  padding: 16px 0 8px 16px;
}

.megaList-2nd > li + li {
  margin-top: 8px;
}
.megaList-2nd > li > a, .megaList-2nd > li > .is-nolink {
  font-size: 15px;
  color: #fff;
}

.megaList-1st.is-col2,
.megaList-2nd.is-col2 {
  display: flex;
  flex-wrap: wrap;
}

.megaList-1st.is-col2 > li,
.megaList-2nd.is-col2 > li {
  width: 50%;
}

.megaList-1st.is-col2 > li:nth-child(2),
.megaList-2nd.is-col2 > li:nth-child(2) {
  margin-top: 0;
}

.megaList-1st.is-col2 > li:nth-child(n+3) {
  margin-top: 16px;
}

.megaListWrap.is-intro2 {
  flex: 3;
  padding: 0 2.5%;
}
.megaListWrap.is-intro3 {
  flex: 2;
  padding: 0 0 0 2.5%;
}

.is-intro2 .megaList-2nd {
  padding-left: 0;
}
.is-intro2 .megaList-2nd.is-col2 li:nth-child(odd) {
  width: 35%;
}
.is-intro2 .megaList-1st.is-col2 li:nth-child(odd) {
  width: 35%;
}
.is-intro2 .megaList-2nd.is-col2 li:nth-child(even),
.is-intro2 .megaList-1st.is-col2 li:nth-child(even) {
  margin-left: 2%;
  width: 63%;
}

.megaListWrap.is-renewal2 {
  flex: 1;
}

/* --- for small viewport --- */
@media screen and (max-width: 767px) {
  /* header button */
  .header-hamburgerBtn {
    width: 50px;
    height: 50px;
    background-color: var(--color-theme);
    position: relative;
  }
  .header-hamburgerBtn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease;
    position: absolute;
    left: 50%;
  }
  .header-hamburgerBtn span:nth-child(1) {
    top: 36%;
  }
  .header-hamburgerBtn span:nth-child(2) {
    top: 50%;
  }
  .header-hamburgerBtn span:nth-child(3) {
    top: 63%;
  }
  .header-hamburgerBtn.open span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(-45deg);
    top: 50%;
  }
  .header-hamburgerBtn.open span:nth-child(2) {
    opacity: 0;
  }
  .header-hamburgerBtn.open span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(45deg);
    top: 50%;
  }
  .header-menu {
    grid-column: span 3;
    display: none;
    padding-bottom: 120px;
    width: 100%;
    height: calc(100vh - 50px);
    margin: 0;
    border-top: 1px solid #e7e7e7;
    background-color: #fff;
    overflow: auto;
  }
  .header-menuNavi {
    display: block;
    height: auto;
  }
  .header-menuNavi > li {
    width: 100% !important;
    height: auto;
    border-top: 1px solid #e7e7e7;
  }
  .header-menuNavi > li:nth-child(n+3) {
    margin-left: 0;
  }
  .header-menuNavi > li:last-child {
    border-bottom: 1px solid #e7e7e7;
  }
  .header-menuNavi > li::after {
    display: none;
  }
  .header-menuNavi > li > a {
    padding: 20px;
  }
  .header-menuNavi > li > a.sp {
    display: block;
  }
  .navi-linkNavi a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    transform: rotate(45deg) translate(0, -50%);
    position: absolute;
    top: 50%;
    right: 20px;
  }
  .navi-megaNavi a.pc {
    display: none;
  }
  .navi-megaNavi > a.button {
    width: 50px;
    height: 100%;
    background-color: #7fcff2;
    position: absolute;
    top: 0;
    right: 0;
  }
  .navi-megaNavi > a.button::before, .navi-megaNavi > a.button::after {
    content: "";
    display: block;
    width: 13px;
    height: 2px;
    background-color: #fff;
    transform: translate(50%, -50%);
    position: absolute;
    top: 50%;
    right: 50%;
  }
  .navi-megaNavi > a.button::before {
    width: 2px;
    height: 13px;
    transition: all 0.4s ease;
  }
  .navi-megaNavi.open a.button::before {
    transform: translate(50%, -50%) rotate(90deg);
  }
  .header-search {
    margin: 20px;
  }
  .header-searchForm {
    position: relative;
  }
  .header-searchForm input[type=text] {
    width: calc(100% - 49px);
    height: 50px;
    border-radius: 0;
  }
  .header-searchForm input[type=button] {
    -webkit-appearance: none;
    width: 50px;
    height: 50px;
    background-color: var(--color-base);
    border: 0;
    border-radius: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  .header-searchForm::after {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../../assets/images/common/search-icon.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
  }
  .header-megaNavi {
    display: none;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: none;
    position: static;
  }
  .header-megaNavi .header-megaNavi_wrapper {
    display: block;
    padding: 0;
    background-color: #e5f5fc;
  }
  .header-megaNavi .header-megaNavi_titleArea {
    display: none;
  }
  .header-megaNavi .header-megaNavi_list {
    display: block;
    width: 100%;
    margin-left: 0;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #e7e7e7;
    border-left: none;
  }
  .header-megaNavi .header-megaNavi_list.newIntro {
    width: 100%;
    padding: 0 0 0 20px;
  }
  .header-megaNavi .header-megaNavi_list li {
    width: auto;
    margin-left: 0;
    padding: 10px 0;
    border-bottom: 1px solid #fff;
    position: relative;
  }
  .header-megaNavi .header-megaNavi_list li::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #9ddbf2;
    border-right: 2px solid #9ddbf2;
    transform: translate(0, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 20px;
  }
  .header-megaNavi .header-megaNavi_list li:last-child {
    border-bottom: none;
  }
  .header-megaNavi .header-megaNavi_list.newIntro li {
    width: 100%;
    margin-left: 0;
  }
  .header-megaNavi .header-megaNavi_list.newIntro > li::after {
    display: none;
  }
  .header-megaNavi .header-megaNavi_list li:nth-child(n+3) {
    margin-top: 0;
  }
  .header-megaNavi_list.support_col2 li:nth-child(n+2), .header-megaNavi_list.support_col3 li:nth-child(n+2), .header-megaNavi_list.corp_col2 li:nth-child(n+2), .header-megaNavi_list.corp_col3 li:nth-child(n+2) {
    margin-top: 0;
  }
  .header-megaNavi .header-megaNavi_list li a {
    color: #333;
    font-weight: normal;
  }
  .header-megaNavi .header-megaNavi_list .header-megaNavi_secondaryList {
    display: block;
    margin-top: 0;
  }
  .header-megaNavi .header-megaNavi_list .header-megaNavi_secondaryList li:nth-child(2n) {
    margin-left: 0;
  }
  .header-megaNavi .header-megaNavi_list .header-megaNavi_secondaryList li:nth-child(n+3) {
    margin-top: 0;
  }
  .header-megaNavi .header-megaNavi_list .header-megaNavi_secondaryList li.other a {
    font-weight: normal;
  }
  .header-megaNavi_list.corp_col3 .header-megaNavi_secondaryList {
    margin-top: 14px;
  }
  .header-megaNavi_list.corp_col3 .header-megaNavi_secondaryList li:first-child {
    border-top: 1px solid #fff;
  }
  .header-megaNavi .header-megaNavi_sideList.pc {
    display: none;
  }
  .header-contact {
    margin: 20px;
  }
  .header-contact a {
    display: block;
    padding: 10px 0 10px 28px;
    background-color: #ec9c02;
    color: #fff;
    text-align: center;
    position: relative;
  }
  .header-contact a::after {
    content: "";
    display: block;
    width: 20px;
    height: 100%;
    background-image: url(../../assets/images/common/contact-icon.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px auto;
    position: absolute;
    top: 0;
    left: calc(50.11% - 56.31px);
  }
  .header-secondaryNavi li {
    position: relative;
  }
  .header-secondaryNavi li:not(:first-of-type) {
    border-top: 1px solid #e7e7e7;
  }
  .header-secondaryNavi li:last-child {
    border-bottom: 1px solid #e7e7e7;
  }
  .header-secondaryNavi li a {
    display: block;
    padding: 10px 20px;
    font-size: 3.8vw;
  }
  .megaListWrap {
    padding: 0 0 0 20px !important;
    border-left: 0;
  }
  .header-megaNavi_titleArea + .megaListWrap {
    padding-top: 8px !important;
  }
  .megaList-1st > li {
    margin-top: 0;
    padding: 10px 0;
    border-bottom: 1px solid #fff;
  }
  .megaList-1st > li.has-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .megaList-1st > li + li {
    margin-top: 0;
  }
  .megaList-1st > li > a, .megaList-1st > li > .is-nolink {
    padding-left: 0;
    color: #333;
    font-weight: normal;
  }
  .megaList-1st > li > a {
    display: block;
    padding-right: 30px;
  }
  .megaList-1st > li > a::before {
    top: 50%;
    left: auto;
    right: 16px;
    transform: translate(0, -50%);
    content: "\e905";
    color: #9ddbf2;
  }
  a + .megaList-2nd,
span + .megaList-2nd {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 10px;
    border-top: 1px solid #fff;
  }
  .megaList-2nd > li {
    padding: 10px 0;
    border-bottom: 1px solid #fff;
  }
  .megaList-2nd > li > a, .megaList-2nd > li > .is-nolink {
    display: block;
    position: relative;
    font-size: 16px;
    color: #333;
  }
  .megaList-2nd > li > a::before {
    display: inline-block;
    font-family: "nbsc";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translate(0, -50%);
    content: "\e905";
    color: #9ddbf2;
  }
  .megaList-1st.is-col2,
.megaList-2nd.is-col2 {
    display: block;
  }
  .megaList-1st.is-col2 > li,
.megaList-2nd.is-col2 > li {
    margin: 0 !important;
    width: 100% !important;
  }
  .is-intro2 .megaList-1st:first-child > li:first-child {
    padding-top: 0;
  }
  .is-intro2 .megaList-1st .megaList-2nd {
    margin-top: 0;
    border-top: 0;
  }
  .megaList-1st + .megaList-1st {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }
}
.megaPostWrap.is-renewal3 {
  flex: 3;
  padding-left: 3%;
}

.megaPost {
  background: rgba(255, 255, 255, 0.9);
}
.megaPost a {
  display: flex;
  padding: 20px;
  width: 100%;
  color: #333;
}
.megaPost .img {
  max-width: 200px;
}
.megaPost .case-inner {
  margin-left: 20px;
}
.megaPost .case_pickup {
  color: var(--color-safe);
  font-size: 14px;
  font-weight: bold;
}
.megaPost .title {
  margin-top: 5px;
  font-weight: bold;
  color: var(--color-safe);
}
.megaPost ul {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
}
.megaPost.is-renewal_case ul li {
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 2px 8px;
  background-color: var(--color-safe);
  color: #fff;
  font-size: 13px;
}
.megaPost ul li.category {
  background-color: #eee;
  color: #666;
}

/* ========== emergency */
.headerEmg a p:last-child::after,
.headerEmg__txt::before {
  display: inline-block;
  font-family: "nbsc";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.headerEmg {
  width: 100%;
  padding: 7px 1em 7px calc(17.86% - 225.71px);
  word-break: break-all;
  background: #fce5e5;
  color: var(--color-attention);
}
.headerEmg a {
  color: var(--color-attention);
}
.headerEmg a:hover {
  color: rgba(226, 0, 0, 0.5);
}
.headerEmg a p:last-child::after {
  padding-left: 0.5em;
  content: "\e905";
}

.headerEmg__txt {
  position: relative;
  padding-left: 1.5em;
  text-align: justify;
}
.headerEmg__txt::before {
  position: absolute;
  left: 0;
  top: 4px;
  content: "\e91e";
}

@media screen and (min-width: 1601px) {
  .headerEmg {
    padding-left: 60px;
  }
}
@media screen and (max-width: 1320px) {
  .headerEmg {
    padding-left: 10px;
  }
}
/* ========== sub navigation */
.header__subNav {
  font-size: 3.8vw;
  padding: 0;
  margin-top: 0;
}
.header__subNav-list {
  display: flex;
  flex-wrap: wrap;
}
.header__subNav-card {
  height: 50%;
  box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1);
  background-position-x: center;
  background-repeat: no-repeat;
}
.header__subNav-card:not(:has(a)),
.header__subNav-card a {
  color: #fff;
  font-weight: 600;
  line-height: 1;
}
.header__subNav-card--narrow {
  width: 50%;
  background-size: 30px;
  background-position-y: 15px;
}
.header__subNav-card--narrow:not(:has(a)),
.header__subNav-card--narrow a {
  padding-block: 16px;
}
.header__subNav-card--wide {
  width: 50%;
  background-position-y: center;
}
.header__subNav-card--wide:not(:has(a)),
.header__subNav-card--wide a {
  padding-block: 16px;
  padding-inline: 12.5px;
}
.header__subNav-card--catalog {
  background-color: var(--color-catalog);
  background-image: url(../../assets/images/common/header-nav-catalog.svg);
  background-size: 6.4vw;
  background-position: top 3.4vw left 31.6vw;
  letter-spacing: -0.02em;
  width: 100%;
  height: 11vw;
}
.header__subNav-card--catalog a{
  padding-left: 13.3vw;
  text-align: center;
  letter-spacing: 0.8em;
}
.header__subNav-card--contact {
  background-color: var(--color-contact);
  background-image: url(../../assets/images/common/header-nav-contact.svg);
  background-size: 6.4vw;
  background-position: top 3.4vw left 31.6vw;
  letter-spacing: -0.04em;
  width: 100%;
  height: 11vw;
}
.header__subNav-card--contact a{
  padding-left: 10vw;
  text-align: center;
  letter-spacing: 0.01em;
}
.header__subNav-card--tel {
  background-color: #fff;
  background-image: url(../../assets/images/common/header-nav-tel.svg);
  background-size: 5vw;
  background-position: center left 5.2vw;
  letter-spacing: -0.04em;
  height: 13.7vw;
  border: 1px solid #e3e3e3;
  border-left: none;
}
.header__subNav-card--tel a{
  font-size: 3.8vw;
  text-align: center;
  padding-left: 7.6vw;
  padding-block: 10px;
  color: var(--color-theme);
}
.header__subNav-card--tel a .small{
  display: block;
  font-size: 2.6vw;
  margin-bottom: 0.8vw;
}
.header__subNav-card--support {
  background-image: url(../../assets/images/common/header-nav-support-sp.svg);
  background-size: cover;
  background-color: #fff;
  height: 13.7vw;
  border: 1px solid #e3e3e3;
}
.header__subNav-card--support a{
  padding-block: 0;
}
.header__subNav-card a {
  display: grid;
  align-content: center;
  width: 100%;
  height: 100%;
}
.header-blockItem_contact a,
.header-blockItem_search a {
  display: block;
  width: 100px;
  height: 100px;
  position: relative;
}
.header-blockItem_contact a {
  background-color: #ec9c02;
}
.header-blockItem_search a {
  background-color: var(--color-base);
}
.header-blockItem_contact a::before,
.header-blockItem_search a::before {
  content: "";
  display: block;
  width: 100%;
  height: 70%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px auto;
  position: relative;
  top: 0;
  left: 0;
}
.header-blockItem_contact a::before {
  background-image: url(../../assets/images/common/contact-icon.svg);
}
.header-blockItem_search a::before {
  background-image: url(../../assets/images/common/search-icon.svg);
}
.header-blockItem_contact a span,
.header-blockItem_search a span {
  color: #fff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 23px;
}

@media screen and (min-width: 768px) {
  .header__subNav {
    font-size: 10px;
    text-align: center;
    margin-top: 0;
    padding: 0;
  }
  .header__subNav-card {
    height: 70px;
    background-position-x: center;
  }
  .header__subNav-card a{
    align-content: flex-end;
  }
  .header__subNav-card--narrow {
    width: 70px;
    background-size: 30px;
    background-position-y: 15px;
  }
  .header__subNav-card--narrow:not(:has(a)),
.header__subNav-card--narrow a {
    padding-block: 15px;
  }
  .header__subNav-card--wide {
    width: 180px;
  }
  .header__subNav-card--wide:not(:has(a)),
.header__subNav-card--wide a {
    padding-block: 15px;
  }
  .header__subNav-card--catalog {
    background-size: auto;
  }
  .header__subNav-card--catalog a{
    padding-left: 0;
    letter-spacing: 0.3em;
  }
  .header__subNav-card--contact {
    background-size: auto;
  }
  .header__subNav-card--tel {
    background-size: 22px;
    width: 88px;
    background-position-y: 8px;
    border: 2px solid var(--color-theme);
    border-left: none;
  }
  .header__subNav-card--tel a{
    font-size: 10px;
    padding-left: 0;
    padding-block: 8px;
  }
  .header__subNav-card--tel a .small{
    font-size: 8px;
    margin-bottom: 2px;
  }
  .header__subNav-card--contact a{
    padding-left: 0;
  }
  .header__subNav-card--support {
    background-image: url(../../assets/images/common/header-nav-support.svg);
    background-size: 100%;
    border: 2px solid var(--color-theme);
  }
  .megaList-1st > li > a{
    font-size: 16px;
  }
}
/* --- for small viewport --- */
/* --- for large viewport --- */
/* //////////////////////////////////////////////////

Title : project/header.scss
For   : nabcosystem/common

Created       : 2024-06-18
Last Modified : 2024-06-18

==========================================

Content

////////////////////////////////////////////////// */
/* --- for small viewport --- */
/* --- for large viewport --- */
/* ===================== mainWrapper */
/*=========================================
footer
=========================================*/
.footer-primary {
  background-color: #e5f5fc;
}

.footer-primary_wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 0;
}

.footer-logo {
  text-align: center;
}

.footer-sitemap {
  margin-top: 55px;
  font-size: 14px;
}
.footer-sitemap li {
  margin-bottom: 0.5em;
}
.footer-sitemap a.nbsc_external {
  color: #333;
}
.footer-sitemap a.nbsc_external:after {
  width: 10px;
  height: 10px;
}

.footer-sitemap__parent {
  display: flex;
  justify-content: space-between;
}
.footer-sitemap__parent > li > a {
  font-weight: bold;
  display: inline-block;
  margin-bottom: 0.5em;
}

.footer-sitemap__other > li {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.footer-sitemap__external {
  margin-top: 1em;
}

.footer-banner {
  margin-top: 30px;
}
.footer-banner a {
  display: block;
}
.footer-banner figure img {
  width: 100%;
}

.footer-banner_secondary {
  display: flex;
  justify-content: space-between;
  margin-top: 1.8181%;
}
.footer-banner_secondary a {
  width: 49.0909%;
}

/* footer-secondary */
.footer-secondary {
  padding: 35px 0;
  background-color: var(--color-theme);
}
.footer-secondary .footer-copyright {
  color: #fff;
  font-size: 13px;
  text-align: center;
}

.sp {
  display: none;
}

@media screen and (max-width: 767px) {
  /*=========================================
  footer
  =========================================*/
  /* footer-primary */
  .footer-primary_wrapper {
    padding: 25px 0;
  }
  .footer-logo {
    width: 50%;
    margin: auto;
  }
  /*
  .footer-sitemap {
  	margin-top: 30px;
  }

  .footer-sitemap>ul {
  	-webkit-flex-wrap: wrap;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
  }


  .footer-sitemap>ul>li {
  	width: 50%;
  }
  */
  .footer-sitemap {
    margin: 25px 20px 0;
    font-size: 13px;
  }
  .footer-sitemap li {
    margin-bottom: 1em;
  }
  .footer-sitemap__parent {
    flex-wrap: wrap;
  }
  .footer-sitemap__parent > li {
    width: 50%;
  }
  .footer-sitemap__parent > li > a {
    margin-bottom: 0;
  }
  .footer-sitemap__child {
    display: none;
  }
  .footer-sitemap__parent > li.full-width {
    width: 100%;
  }
  .footer-sitemap__other {
    display: flex;
    flex-wrap: wrap;
  }
  .footer-sitemap__other > li {
    width: 50%;
  }
  .footer-sitemap__external {
    font-size: 12px;
  }
  .footer-banner {
    margin: 10px 20px 0;
  }
  .footer-banner_secondary {
    margin-top: 10px;
    display: block;
  }
  .footer-banner_secondary a {
    width: 100%;
  }
  .footer-banner_secondary a + a {
    margin-top: -1px;
  }
  /* footer-secondary */
  .footer-secondary {
    padding: 16px 0;
  }
  .footer-secondary .footer-copyright {
    font-size: 10px;
  }
  .pc {
    display: none;
  }
  .sp {
    display: inherit;
  }
}
/*=========================================
contact-bar
=========================================*/
#contact-bar {
	padding: 15px 40px;
	background-color: var(--color-theme);
	border: 2px solid var(--color-theme);
	border-radius: 6px;
	position: fixed;
	bottom: 20px;
	right: 20px;
  z-index: 2;
}
.support #contact-bar {
  bottom: 10px;
  right: 10px;
  padding: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
}
#contact-bar.active {
  padding: 30px;
  background-color: #fff;
}
#contact-bar .contact-bar_btn {
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 20px;
}
#contact-bar.active .contact-bar_btn {
  width: 44px;
  height: 44px;
  background-color: var(--color-theme);
  top: -33px;
  right: 0;
}
#contact-bar .contact-bar_btn::after {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-color: var(--color-theme);
  border-style: solid;
  border-width: 2px 0 0 2px;
  transform: translate(-50%) rotate(45deg);
  position: absolute;
  top: 10px;
  left: 50%;
}
#contact-bar.active .contact-bar_btn::after {
  width: 12px;
  height: 12px;
  border-color: #fff;
  border-width: 0 2px 2px 0;
  top: 13px;
}
#contact-bar.active .off {
  display: none;
}
#contact-bar .on {
  display: none;
}
#contact-bar.active .on {
  display: block;
}
#contact-bar .off p {
  padding-right: 20px;
  padding-left: 30px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
}
#contact-bar .off p::before, #contact-bar .off p::after {
  content: "";
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
}
#contact-bar .off p::before {
  width: 14px;
  height: 18px;
  background-image: url(../../assets/images/common/tell-icon_white.svg);
  left: 20px;
}
#contact-bar.is-support .off p::before {
  width: 22px;
  height: 26px;
  background-image: url(../../assets/images/common/chatbot-icon_white.svg);
  left: 13px;
}
#contact-bar .off p::after {
  width: 19px;
  height: 14px;
  background-image: url(../../assets/images/common/mail-icon_white.svg);
  left: 40px;
}
#contact-bar .on .mail {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--color-theme);
}
#contact-bar .on h2 {
  padding-left: 45px;
  font-size: 18px;
  font-weight: bold;
  position: relative;
}
#contact-bar .on h2 span {
  display: block;
  font-size: 13px;
  font-weight: normal;
}
#contact-bar .on h2::before {
  display: block;
  transform: translate(0, -50%);
  position: absolute;
  top: 50%;
  left: 0;
}
#contact-bar .on .tell h2::before {
  content: url(../../assets/images/common/tell-icon_blue.svg);
  width: 26px;
  height: 35px;
}
#contact-bar .on .chatbot h2::before {
  content: "";
  background-image: url(../../assets/images/common/chatbot-icon_blue.svg);
  width: 35px;
  height: 38px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
}
#contact-bar .on .mail h2::before {
  content: url(../../assets/images/common/mail-icon_blue.svg);
  width: 32px;
  height: 24px;
}
#contact-bar .on a {
  display: block;
  /*width: 290px;*/
  min-width: 290px;
  margin-top: 15px;
  padding: 15px 0;
  background-color: var(--color-theme);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  position: relative;
}
#contact-bar .on a::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(0, -50%) rotate(45deg);
  position: absolute;
  top: 50%;
  right: 30px;
}
#contact-bar .link {
  display: block;
  width: 100%;
  max-width: 360px;
}

/*#contact-bar.is-support{
  bottom: calc(50% - 180px);
}*/
@media screen and (max-width: 767px) {
  #contact-bar {
		width: 320px;
		margin: auto;
		/*padding: 6.5px 15px;*/
    padding: 9px 15px;
		border-radius: 18px;
		bottom: 10px;
		left: 0;
		right: 0;
    z-index: 3;
	}
  .support #contact-bar {
    width: 240px;
    /*padding: 6.5px 15px;*/
    padding: 0;
    border-radius: 0;
  }
  #contact-bar.active {
    width: calc(100% - 20px);
    padding: 20px;
  }
  #contact-bar .contact-bar_btn {
    width: 16px;
    height: 16px;
    right: 8px;
  }
  #contact-bar.active .contact-bar_btn {
    width: 30px;
    height: 30px;
    top: -20px;
  }
  #contact-bar .contact-bar_btn::after {
    width: 5px;
    height: 5px;
    border-width: 1px 0 0 1px;
    top: 7px;
  }
  #contact-bar.active .contact-bar_btn::after {
    width: 8px;
    height: 8px;
    border-width: 0 1px 1px 0;
    top: 10px;
  }
  #contact-bar .off p {
    padding-right: 0;
    padding-left: 35px;
    font-size: 13px;
  }
  #contact-bar .off p::before {
    width: 10px;
    height: 13px;
    left: 15px;
  }
  #contact-bar.is-support .off p::before {
    width: 16px;
    height: 19px;
    left: 10px;
  }
  #contact-bar .off p::after {
    width: 13px;
    height: 10px;
    left: 30px;
  }
  #contact-bar .on .mail {
    margin-top: 17px;
    padding-top: 10px;
  }
  #contact-bar .on h2 {
    padding-left: 40px;
    font-size: 16px;
  }
  #contact-bar .on h2 span {
    font-size: 12px;
  }
  #contact-bar .on .tell h2::before {
    width: 22.5px;
    height: 30px;
  }
  #contact-bar .on .chatbot h2::before {
    width: 31px;
    height: 35px;
  }
  #contact-bar .on .mail h2::before {
    width: 30px;
    height: 22px;
  }
  #contact-bar .on a {
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    font-size: 15px;
  }
  #contact-bar .on a::after {
    width: 8px;
    height: 8px;
    right: 20px;
  }
  #contact-bar a:hover {
    opacity: 1;
  }
  /*#contact-bar.is-support{
    bottom: 110px;
  }*/
}
/*=========================================
Btn go top
=========================================*/
.btnTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1;
}

#contact-bar + .btnTop {
  bottom: 100px;
}

.btnTop__inner {
  margin: 0;
}

.btnTop__link {
  display: block;
}

.btnTop__img {
  width: 50px;
  height: 50px;
}

@media screen and (max-width: 767px) {
  .btnTop {
    bottom: 13px;
    right: 13px;
  }
  #contact-bar + .btnTop {
    bottom: 65px;
  }
  .btnTop__img {
    width: 40px;
    height: 40px;
  }
}
/*=========================================
Tel Link
PCサイズは動作させない
=========================================*/
@media screen and (min-width: 768px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
/*=========================================
Table02
@extend product_detail.css #specification table
=========================================*/
.tbl02 {
  margin-top: 25px;
}
.tbl02 th {
  width: 325px;
  padding: 15px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
}

#overview .tbl02 tbody th {
  width: 325px;
  padding: 15px 20px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
}

.tbl02 td {
  padding: 15px 20px;
  border: 1px solid #ccc;
  font-size: 15px;
  vertical-align: middle;
}
.tbl02 td.col1 {
  width: 775px;
}
.tbl02 td.col2 {
  width: 387.5px;
}
.tbl02 td.col3 {
  width: 258.3333333333px;
}
.tbl02 td.col4 {
  width: 193.75px;
}
.tbl02 td.col5 {
  width: 155px;
}
.tbl02 td.col6 {
  width: 129.1666666667px;
}

@media screen and (max-width: 767px) {
  .tbl02 {
    margin-top: 15px;
  }
  .tbl02 th {
    width: 17%;
    padding: 5px;
    font-size: 11px;
    word-break: break-all;
  }
  #overview .tbl02 tbody th {
    width: 17%;
    padding: 5px;
    font-size: 11px;
    word-break: break-all;
  }
  .tbl02 td, #overview .tbl02 tbody td {
    padding: 5px;
    font-size: 12px;
    word-break: break-all;
  }
  .tbl02 td.col1 {
    width: 83%;
  }
  .tbl02 td.col2 {
    width: 41.5%;
  }
  .tbl02 td.col3 {
    width: 27.6666666667%;
  }
  .tbl02 td.col4 {
    width: 20.75%;
  }
  .tbl02 td.col5 {
    width: 16.6%;
  }
  .tbl02 td.col6 {
    width: 13.8333333333%;
  }
  .tbl02 td.col7 {
    width: 11.8571428571%;
  }
  .tbl02 td.col8 {
    width: 10.375%;
  }
  .tbl02 td.col9 {
    width: 9.2222222222%;
  }
}
/*=========================================
Table03
@extend product_detail.css #specification table
=========================================*/
.tbl03 {
  margin-top: 25px;
}
.tbl03 .writever {
  writing-mode: vertical-rl !important;
}
.tbl03 th {
  padding: 15px 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
}

#overview .tbl03 tbody th {
  padding: 15px 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  padding: 15px 5px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
}

.tbl03 td, #overview .tbl03 tbody td {
  padding: 15px 10px;
  border: 1px solid #ccc;
  font-size: 15px;
  vertical-align: middle;
}

.tbl03 td.col1 {
  width: 985px;
}
.tbl03 td.col2 {
  width: 492.5px;
}
.tbl03 td.col3 {
  width: 328.3333333333px;
}
.tbl03 td.col4 {
  width: 246.25px;
}
.tbl03 td.col5 {
  width: 197px;
}
.tbl03 td.col6 {
  width: 164.1666666667px;
}

@media screen and (max-width: 767px) {
  .tbl03 {
    margin-top: 15px;
  }
  .tbl03 th {
    width: 5%;
    padding: 5px;
    font-size: 11px;
    word-break: break-all;
  }
  #overview .tbl03 tbody th {
    width: 5%;
    padding: 5px;
    font-size: 11px;
    word-break: break-all;
  }
  .tbl03 td, #overview .tbl03 tbody td {
    padding: 5px;
    font-size: 12px;
    word-break: break-all;
  }
  .tbl03 td.col1 {
    width: 95%;
  }
  .tbl03 td.col2 {
    width: 47.5%;
  }
  .tbl03 td.col3 {
    width: 31.6666666667%;
  }
  .tbl03 td.col4 {
    width: 23.75%;
  }
  .tbl03 td.col5 {
    width: 19%;
  }
  .tbl03 td.col6 {
    width: 15.8333333333%;
  }
  .tbl03 td.col7 {
    width: 13.5714285714%;
  }
  .tbl03 td.col8 {
    width: 11.875%;
  }
  .tbl03 td.col9 {
    width: 10.5555555556%;
  }
}
/*=========================================
tbl sp design
=========================================*/
@media screen and (max-width: 767px) {
  .sp-tbl-block {
    width: 100%;
  }
  .sp-tbl-block th, .sp-tbl-block td {
    width: 100%;
    display: block;
  }
}
/*=========================================
graybox
=========================================*/
.graybox {
  padding: 2em;
  background-color: #f1f4f6;
}
.graybox > *:first-child {
  margin-top: 0;
}

#overview .graybox > *:first-child {
  margin-top: 0;
}

@media screen and (max-width: 767px) {
  .graybox {
    padding: 1em;
  }
}
/*=========================================
border gray
=========================================*/
.border-gray {
  padding: 2em;
  border: 2px solid #ccd5d9;
}

@media screen and (max-width: 767px) {
  .border-gray {
    padding: 1em;
  }
}
/*=========================================
Btn
=========================================*/
.btn-chatbot, a.btn-chatbot {
  position: relative;
  display: inline-block;
  padding: 25px 30px 25px 75px;
  background-color: var(--color-theme);
  border-radius: 6px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.btn-chatbot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 25px;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% auto;
  transform: translate(0, -48%);
  width: 40px;
  height: 50px;
  background-image: url(../../assets/images/common/chatbot-icon_white.svg);
}

@media screen and (max-width: 767px) {
  .btn-chatbot, a.btn-chatbot {
    font-size: 14px;
    padding-left: 65px;
  }
  .btn-chatbot::before {
    width: 30px;
    height: 40px;
  }
}
/*=========================================
Column
=========================================*/
.flex {
  display: flex;
  flex-wrap: wrap;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  /*ul,ol*/
  list-style-type: none;
  padding-left: 0;
}

#column_inner section ul.flex {
  margin-top: -15px;
}

.flex > div, .flex > li, .flex > .flex__col {
  margin-top: 15px !important;
  padding-left: 15px;
  padding-right: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /*ul,ol*/
  list-style: none !important;
  margin-left: 0 !important;
}
.flex.is-col1 > div, .flex.is-col1 > li, .flex.is-col1 > .flex__col {
  width: 100%;
}
.flex.is-col2 > div, .flex.is-col2 > li, .flex.is-col2 > .flex__col {
  width: 50%;
}
.flex.is-col3 > div, .flex.is-col3 > li, .flex.is-col3 > .flex__col {
  width: 33.3333333333%;
}
.flex.is-col4 > div, .flex.is-col4 > li, .flex.is-col4 > .flex__col {
  width: 25%;
}
.flex.is-pad0 {
  margin-left: 0;
  margin-right: 0;
}
.flex.is-pad0 > div, .flex.is-pad0 > li, .flex.is-pad0 > .flex__col {
  padding-left: 0;
  padding-right: 0;
}
.flex.is-pad10 {
  margin-left: -10px;
  margin-right: -10px;
}
.flex.is-pad10 > div, .flex.is-pad10 > li, .flex.is-pad10 > .flex__col {
  padding-left: 10px;
  padding-right: 10px;
}
.flex.is-pad15 {
  margin-left: -15px;
  margin-right: -15px;
}
.flex.is-pad15 > div, .flex.is-pad15 > li, .flex.is-pad15 > .flex__col {
  padding-left: 15px;
  padding-right: 15px;
}
.flex.is-pad20 {
  margin-left: -20px;
  margin-right: -20px;
}
.flex.is-pad20 > div, .flex.is-pad20 > li, .flex.is-pad20 > .flex__col {
  padding-left: 20px;
  padding-right: 20px;
}
.flex.is-pad25 {
  margin-left: -25px;
  margin-right: -25px;
}
.flex.is-pad25 > div, .flex.is-pad25 > li, .flex.is-pad25 > .flex__col {
  padding-left: 25px;
  padding-right: 25px;
}
.flex.is-pad30 {
  margin-left: -30px;
  margin-right: -30px;
}
.flex.is-pad30 > div, .flex.is-pad30 > li, .flex.is-pad30 > .flex__col {
  padding-left: 30px;
  padding-right: 30px;
}
.flex.is-mt0 {
  margin-top: 0px;
}
.flex.is-mt0 > div, .flex.is-mt0 > li, .flex.is-mt0 > .flex__col {
  margin-top: 0 !important;
}
.flex.is-mt10 {
  margin-top: -10px;
}
.flex.is-mt10 > div, .flex.is-mt10 > li, .flex.is-mt10 > .flex__col {
  margin-top: 10px !important;
}
.flex.is-mt15 {
  margin-top: -15px;
}
.flex.is-mt15 > div, .flex.is-mt15 > li, .flex.is-mt15 > .flex__col {
  margin-top: 15px !important;
}
.flex.is-mt20 {
  margin-top: -20px;
}
.flex.is-mt20 > div, .flex.is-mt20 > li, .flex.is-mt20 > .flex__col {
  margin-top: 20px !important;
}
.flex.is-mt25 {
  margin-top: -25px;
}
.flex.is-mt25 > div, .flex.is-mt25 > li, .flex.is-mt25 > .flex__col {
  margin-top: 25px !important;
}
.flex.is-mt30 {
  margin-top: -30px;
}
.flex.is-mt30 > div, .flex.is-mt30 > li, .flex.is-mt30 > .flex__col {
  margin-top: 30px !important;
}

/*col*/
/*gutter*/
/*mt*/
@media screen and (max-width: 767px) {
  .flex.is-col1--sp > div, .flex.is-col1--sp > li, .flex.is-col1--sp > .flex__col {
    width: 100%;
  }
  .flex.is-col2--sp > div, .flex.is-col2--sp > li, .flex.is-col2--sp > .flex__col {
    width: 50%;
  }
  .flex.is-col3--sp > div, .flex.is-col3--sp > li, .flex.is-col3--sp > .flex__col {
    width: 33.3333333333%;
  }
  .flex.is-col4--sp > div, .flex.is-col4--sp > li, .flex.is-col4--sp > .flex__col {
    width: 25%;
  }
  .flex.is-pad0--sp {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .flex.is-pad0--sp > div, .flex.is-pad0--sp > li, .flex.is-pad0--sp > .flex__col {
    padding-left: 0px;
    padding-right: 0px;
  }
  .flex.is-pad10--sp {
    margin-left: -10px;
    margin-right: -10px;
  }
  .flex.is-pad10--sp > div, .flex.is-pad10--sp > li, .flex.is-pad10--sp > .flex__col {
    padding-left: 10px;
    padding-right: 10px;
  }
  .flex.is-pad15--sp {
    margin-left: -15px;
    margin-right: -15px;
  }
  .flex.is-pad15--sp > div, .flex.is-pad15--sp > li, .flex.is-pad15--sp > .flex__col {
    padding-left: 15px;
    padding-right: 15px;
  }
  .flex.is-pad20--sp {
    margin-left: -20px;
    margin-right: -20px;
  }
  .flex.is-pad20--sp > div, .flex.is-pad20--sp > li, .flex.is-pad20--sp > .flex__col {
    padding-left: 20px;
    padding-right: 20px;
  }
  .flex.is-pad25--sp {
    margin-left: -25px;
    margin-right: -25px;
  }
  .flex.is-pad25--sp > div, .flex.is-pad25--sp > li, .flex.is-pad25--sp > .flex__col {
    padding-left: 25px;
    padding-right: 25px;
  }
  .flex.is-pad30--sp {
    margin-left: -30px;
    margin-right: -30px;
  }
  .flex.is-pad30--sp > div, .flex.is-pad30--sp > li, .flex.is-pad30--sp > .flex__col {
    padding-left: 30px;
    padding-right: 30px;
  }
  .flex.is-mt0--sp {
    margin-top: 0px;
  }
  .flex.is-mt0--sp > div, .flex.is-mt0--sp > li, .flex.is-mt0--sp > .flex__col {
    margin-top: 0 !important;
  }
  .flex.is-mt10--sp {
    margin-top: -10px;
  }
  .flex.is-mt10--sp > div, .flex.is-mt10--sp > li, .flex.is-mt10--sp > .flex__col {
    margin-top: 10px !important;
  }
  .flex.is-mt15--sp {
    margin-top: -15px;
  }
  .flex.is-mt15--sp > div, .flex.is-mt15--sp > li, .flex.is-mt15--sp > .flex__col {
    margin-top: 15px !important;
  }
  .flex.is-mt20--sp {
    margin-top: -20px;
  }
  .flex.is-mt20--sp > div, .flex.is-mt20--sp > li, .flex.is-mt20--sp > .flex__col {
    margin-top: 20px !important;
  }
  .flex.is-mt25--sp {
    margin-top: -25px;
  }
  .flex.is-mt25--sp > div, .flex.is-mt25--sp > li, .flex.is-mt25--sp > .flex__col {
    margin-top: 25px !important;
  }
  .flex.is-mt30--sp {
    margin-top: -30px;
  }
  .flex.is-mt30--sp > div, .flex.is-mt30--sp > li, .flex.is-mt30--sp > .flex__col {
    margin-top: 30px !important;
  }
  /*mt*/
}
/*# sourceMappingURL=common.css.map */