@charset "UTF-8";

/* Reset
=====================================================================*/
/* common.cssのresetに追加 */
body:has(.p-contents){
  overflow-x: clip!important;
}
.p-contents a{
  color: inherit;
}
.p-contents a:hover{
  opacity: 1;
}
.p-contents ul,
.p-contents ol,
.p-contents li,
.p-contents dl,
.p-contents dt,
.p-contents dd{
  list-style: none;
}
body{
  -webkit-text-size-adjust: 100%;
}
.tel-number a{
 color: inherit;
 text-decoration:none;
}
a[x-apple-data-detectors],
a[x-apple-data-detectors]:hover,
a[x-apple-data-detectors]:active,
a[x-apple-data-detectors]:visited {
    color: inherit !important;
    text-decoration: none !important;
    cursor: text !important;
    pointer-events: none;
}

/* Font preset
=====================================================================*/
:root{
  --font-jp: "Noto Sans JP", sans-serif;
}
.p-contents *{
  font-family: var(--font-jp);
  font-feature-settings: "palt";
}

/* Color preset
=====================================================================*/
:root{
  --color-white:     #FFFFFF;
  --color-white02:   #F7F7F7;
  --color-black:     #1E2021;
  --color-black02:   #373738;
  --color-lightblue: #F7FBFC;
  --color-gray01:    #EDEDED;
  --color-gray02:    #BDBDBD;
  --color-blue01:    #005EB0;
  --color-blue:      #12538C;
}
.p-contents{
  color: var(--color-black);
  background-color: var(--color-white);
}

/* Utility
=====================================================================*/
@media (min-width: 769px){
  .u-only--sp{display:none !important;}
}
@media (max-width: 768px){
  .u-only--pc{display:none !important;}
}
.is-display--none{
  display: none !important;
}
.u-strong{
  font-weight: 700;
}
.u-center{
  text-align: center;
}
.u-left{
  text-align: left !important;
}
.u-bg-lightblue{
  background-color: var(--color-lightblue);
}
.u-small-mark{
  font-size: 1rem;
  vertical-align: top;
}
.u-small-supplement{
  color: var(--color-black02);
  font-size: 1.4rem;
}
@media (min-width: 769px) {
  .u-pc-center{
    text-align: center;
  }
  .u-bg-lightblue{
    border-image-source: linear-gradient(0deg,#F7FBFC 0 100%);
    border-image-slice: fill 0;
    border-image-outset: 0 100vw;
  }
}

/* Common Parts
=====================================================================*/
/* img */
.c-img{
  width: 100%;
}
.c-img img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.c-img img.small {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.c-img-caption{
  display: block;
  padding: 12px 0 0;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
/* txt */
.c-txt{
  display: grid;
  gap: 16px;
  align-items: start;
}
.c-txt p{
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .c-txt{
    gap: 16px;
  }
  .c-txt p{
    font-size: 1.6rem;
  }
}
/* list */
.c-ul{
  display: grid;
  gap: 8px;
  align-content: start;
}
.c-ul li{
  /*display: flex;
  align-items: start;*/
  /*gap: 16px;*/
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;

  padding-left: 15px;
  position: relative;
}
.c-ul li sup {
  /*top: 0.8em;*/
  margin-left: -0.1em;
}
.c-ul li::before{
  content: '';
  flex-shrink: 0;
  display: block;
  width: 4px;
  height: 4px;
  /*margin: 13px 0 0;*/
  background: linear-gradient(90deg, #B95B9F 0%, #8C6AAD 25%, #5F7ABC 65%, #0498D8 100%);
  border-radius: 100%;

  position: absolute;
  top: 13px;
  left: 0px;
}
.l-dlarea{
  display: grid;
  gap: 16px;
  align-content: start;
}
.c-dl{
  display: grid;
  gap: 8px;
  align-content: start;
}
.c-dl dt{
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.c-dl dd{
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.c-ol{
  display: grid;
  gap: 10px;
  align-content: start;
  counter-reset: ol-number;
}
.c-ol p{
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .c-ul{
    gap: 10px;
  }
  .c-ul li{
    /*gap: 13px;*/
    font-size: 1.6rem;
  }
  .c-dl{
    display: flex;
    gap: 12px;
  }
  .c-dl dt{
    flex-shrink: 0;
  }
}
/* link button */
.c-link-button{
  margin: 40px 0 0;
}
.c-link-button a{
  display: grid;
  place-content: center;
  width: 100%;
  height: 68px;
  background-color: var(--color-white02);
}
.c-link-button--txt{
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  position: relative;
}
.c-link-button-white a{
  background-color: var(--color-white);
}
.c-link{
  margin: 24px 0 0;
}
.c-link a{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: start;
  width: fit-content;
  min-height: 36px;
  position: relative;
}
.c-link--txt{
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-link-button--txt::before,
.c-link-button--txt::after,
.c-link--txt::before,
.c-link--txt::after{
  content: '';
  flex-shrink: 0;
  display: block;
  width: 36px;
  height: 36px;
}
.c-link-button--txt::before,
.c-link--txt::before{
  background: url(../images/common-add/ico-linkarrow-01.webp);
  background-size: contain;
}
.c-link--txt::after,
.c-link-button--txt::after{
  background: linear-gradient(135deg, #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%, #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%, #E83A40 79.78%, #E92F54 90.49%, #E84073 100%) border-box border-box;
  border: 1px solid transparent;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 18px);
  left: 0;
}
.c-link-download .c-link--txt::before,
.c-link-download .c-link-button--txt::before{
  width: 36px;
  height: 36px;
  background: url(../images/common-add/ico-link-dl-01.webp);
  background-size: contain;
}
.c-link-pagelink .c-link--txt::before{
  transform: rotate(90deg);
}
@media (min-width: 769px) {
  .c-link-button{
    margin-top: 24px;
  }
  .c-link-button{;
    padding: 32px 0 20px;
  }
  .c-link-button a{
    gap: 16px;
    height: 75px;
    font-weight: 700;
    transition: background-color 0.5s ease;
  }
  .c-link-button a:hover{
    background-color: var(--color-gray01);
  }
  .c-link a{
    gap: 16px;
    min-height: 66px;
  }
  .c-link-button--txt{
    font-size: 1.6rem;
    line-height: 1.7;
  }
  .c-link--txt{
    font-size: 1.6rem;
    line-height: 1.7;
    transition: transform 0.5s ease, color 0.5s ease;
  }
  .c-link a:hover .c-link--txt{
    transform: translateX(6px);
    color: #616263;
  }
  .c-link-button--txt::after,
  .c-link--txt::after{
    transition: transform 0.5s ease;
  }
  .c-link-button a:hover .c-link-button--txt::after,
  .c-link a:hover .c-link--txt::after{
    transform: scale(1.2) rotate(-180deg);
  }
}
.l-button-2col-area{
  display: grid;
  gap: 10px;
  padding: 32px 0 20px
}
.l-link-center{
  display: grid;
  justify-content: center;
}
.l-button-2col-area .c-link-button{
  padding: 0;
  margin: 0;
}
@media (min-width: 769px) {
  .l-button-2col-area{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 32px 0 20px
  }
  .l-link-pc-center{
    display: grid;
    justify-content: center;
  }
}
/* scroll */
.l-scroll-x-area{
  scrollbar-width: thin;
  scrollbar-color: #EDEDED #FFFFFF;}
.l-scroll-x-area::-webkit-scrollbar{
  width: 5px;
}
.l-scroll-x-area::-webkit-scrollbar-track{
  width: 5px;
}
.l-scroll-x-area::-webkit-scrollbar-thumb{
  width: 5px;
  background-color: #EDEDED;
}
/* movie */
.c-iframe{
  height: 0;
  overflow: hidden;
  padding-bottom: 56%;
  position: relative;
}
.c-iframe iframe{
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* Layouts
=====================================================================*/
/*ヘッダー上部余白修正したら不要になる
.p-contents{
  padding-top: 40px;
}*/

.l-contentsarea{
  padding: 32px 0 0;
}
.l-contents-inner{
  padding: 0 20px;
}
.l-section-contentsarea{
  padding: 24px 0 56px;
}
.l-column-inner{
  display: grid;
  gap: 24px;
  align-content: start;
}
@media (min-width: 769px) {
  .l-contentsarea{
    width: 100%;
    /*max-width: 1396px;*/
    min-width: 1120px;
    max-width: 1440px;
    margin: 0 auto;
    /*padding: 56px 80px 0 0;*/
    padding: 0 80px;
  }
  .l-withpagenavarea{
    display: grid;
    grid-template-columns: 296px 1fr;
    /*width: 100%;*/
    padding: 56px 80px 0 0;
  }
  .l-pagenavarea{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    padding: 0 0 100px 40px;
    osition: relative;
  }
  .l-withpagenavarea .l-contents-mainarea{
    width: 100%;
  }
  .l-contents-mainarea{
    width: 100%;
  }
  .l-contents-inner{
    width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  .l-section-contentsarea{
    padding: 24px 0 80px;
  }
  .l-column-inner{
    gap: 24px;
  }
}
.l-col2area,
.l-col3area{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 16px;
}
.l-pc-col2area{
  display: grid;
  gap: 24px;
}
@media (min-width: 769px) {
  .l-col3area{
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 16px;
  }
  .l-pc-col2area{
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 16px;
  }
}

/* Contents
=====================================================================*/
/* contents header */
.c-contents-header{
  display: block;
  width: 100%;
  height: 314px;
  color: var(--color-white);
  position: relative;
}
.c-contents-header--img{
  width: 100%;
  height: 100%;
}
.c-contents-header--img img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-breadsclumb{
  width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1;
}
.c-breadsclumb-list{
  display: flex;
  flex-wrap: wrap;
  color: var(--color-white);
}
.c-breadsclumb-list li,
.c-breadsclumb-list li a{
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.c-breadsclumb-list li a::after{
  content: '＞';
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  padding: 0 10px;
}
.l-contents-header-inner{
  display: grid;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 280px;
  padding: 0 20px;
  position: absolute;
  top: 34px;
  left: 0;
}
.c-contents-headding{
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.c-contents-header-target{
  display: inline-block;
}
.c-contents-header-target--txt{
  display: inline;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.c-contents-header-target-list{
  display: inline;
  letter-spacing: 0;
}
.c-contents-header-target-list li{
  display: inline-grid;
  align-items: center;
  align-content: center;
  height: 19px;
  padding: 0 4px;
  margin: 0 4px 0 0;
  border: 1px solid #FAFAFA4D;
  border-radius: 2px;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  vertical-align: center;
}
.c-inner-heading{
  margin: 32px 0 24px;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 150%;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .c-contents-header{
    height: 336px;
  }
  .c-breadsclumb{
    max-width: 1440px;
    padding: 0 80px;
    left: 50%;
    transform: translate(-50%);
  }
  .l-contents-header-inner{
    align-content: start;
    max-width: 1440px;
    height: 336px;
    padding: 131px 80px 0;
    top: 0;
    left: 50%;
    transform: translate(-50%);
  }
  .c-contents-headding{
    font-size: 4.4rem;
  }
  .c-contents-header-target--txt{
    font-size: 1.3rem;
  }
  .c-contents-header-target-list li{
    height: 20px;
    padding: 0 6px;
    margin-right: 6px;
    font-size: 1.3rem;
  }
}
.c-business-header{
  height: 134px;
  color: var(--color-black);
}
.c-business-header .c-breadsclumb-list{
  color: var(--color-black);
}
.c-business-header .c-breadsclumb-list li,
.c-business-header .c-breadsclumb-list li a{
  color: var(--color-black);
}
.c-business-header .l-contents-header-inner{
  display: grid;
  align-content: end;
  height: 76px;
}
.c-business-header .c-contents-headding{
  margin: 0;
  font-size: 2.8rem;
}
@media (min-width: 769px) {
  .c-business-header.c-business-header{
    height: 183px;
  }
  .c-business-header .l-contents-header-inner{
    height: 121px;
  }
  .c-business-header .c-contents-headding{
    font-size: 4.4rem;
  }
}

/* pagenav */
.c-pagenav-list{
  display: none;
}
@media (min-width: 769px) {
  .c-pagenav{
    width: 100%;
    height: 100%;
    height: fit-content;
    position: sticky;
    top: auto;
    left: 0;
    bottom: 60px;
  }
  .c-pagenav-list{
    display: grid;
    gap: 16px;
    align-content: start;
    width: 100%;
  }
  .c-pagenav-list li a{
    display: block;
    color: var(--color-gray02);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    transition: color 0.5s easem, transform 0.5s easem;
    position: relative;
  }
  .c-pagenav-list li a.is-active{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-black);
    transform: translateX(13px);
  }
  .c-pagenav-list li a::before{
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: linear-gradient(180deg, #005EB0 0%, #00284A 100%);
    border-radius: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: calc(50% - 3px);
    left: -13px;
  }
  .c-pagenav-list li a.is-active::before{
    opacity: 1;
  }
}
/* section */
.c-contents-first{
  padding: 0 0 38px;
}
.c-section-group-heading{
  width: fit-content;
  padding: 32px 0;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
  position: relative;
}
.c-section-group-heading::before{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%, #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%, #E83A40 79.78%, #E92F54 90.49%, #E84073 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.c-section-heading{
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 40px 0 8px;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.c-section-group-heading + .l-section-group .c-section-heading{
  padding-top: 8px;
}
.c-section-heading::before{
  content: '';
  flex-shrink: 0;
  display: block;
  width: 8px;
  height: 3px;
  background: linear-gradient(90deg, #B95B9F 0%, #8C6AAD 25%, #5F7ABC 65%, #0498D8 100%);
}
.c-section-group-heading + .l-section-contentsarea{
  padding: 8px 0 64px;
}
@media (min-width: 769px) {
  .c-contents-first{
    padding-bottom: 56px;
  }
  .c-section-group-heading{
    padding: 40px 0 32px;
  }
  .c-section-heading{
    font-size: 3.2rem;
  }
  .c-section-group-heading + .l-section-group .c-section-heading{
    padding-top: 32px;
  }
  .c-section-heading::before{
    width: 12px;
    height: 4px;
  }
  .c-section-group-heading + .l-section-contentsarea{
    padding: 32px 0 80px;
  }
}
/* sideindex column group */
.l-lineup-group{
  display: grid;
  align-content: start;
  gap: 64px;
}
.l-side-index--columnarea{
  border: 1px solid;
  border-width: 1px 0 0 0;
  border-image: linear-gradient(90deg, #D5ECF5 0%, #DAE3FA 46.63%, #DED5E6 100%) 1;
}
.l-side-indexarea{
  padding: 20px 32px 0 4px;
  margin: 0 0 32px;
}
.c-side-index--txt{
  display: block;
  color: var(--color-blue);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.l-side-index--mainarea{
  display: grid;
  gap: 48px;
  padding: 0 0 0 24px;
}
@media (min-width: 769px) {
  .l-lineup-group{
    gap: 56px;
  }
  .l-side-index--columnarea{
    display: grid;
    grid-template-columns: 208px 1fr;
    border-width: 1px 0 0 1px;
  }
  .l-side-indexarea{
    position: relative;
    height: 100%;
    margin: 0;
    padding-left: 40px;
  }
  .c-side-index--txt{
    display: block;
    padding: 32px 0 0;
    position: sticky;
    top: 20px;
    left: 0;
  }
  .l-side-index--mainarea{
    display: grid;
    gap: 56px;
    padding: 48px 0 0 0;
  }
}
/* line */
.l-sidelinearea{
  display: grid;
  gap: 40px;
  align-content: start;
  padding: 0 0 0 24px;
}
@media (min-width: 769px) {
  .l-sidelinearea{
    gap: 56px;
    border: 1px solid;
    border-width: 1px 0 0 1px;
    border-image: linear-gradient(90deg, #D5ECF5 0%, #DAE3FA 46.63%, #DED5E6 100%) 1;
    padding: 48px 0 0 48px;
  }
}
/* column */
.c-column a{
  display: grid;
  gap: 16px;
  align-content: start;
}
.c-column-heading{
  display: flex;
  gap: 14px;
  align-items: center;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
.c-column-heading::before{
  content: '';
  flex-shrink: 0;
  display: block;
  width: 5px;
  height: 3px;
  background: linear-gradient(90deg, #B95B9F 0%, #8C6AAD 25%, #5F7ABC 65%, #0498D8 100%);
}
.c-lineup-category-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.c-lineup-category-list li{
  display: grid;
  height: 21px;
  padding: 0 6px;
  border: 1px solid var(--color-black02);
  border-radius: 2px;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .c-column-heading{
    font-size: 2.6rem;
  }
  .c-column .c-img{
    overflow: hidden;
    position: relative;
  }
  .c-column .c-img::after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.5s ease;
    position: absolute;
    top: 0;
    left: 0;
  }
  .c-column a:hover .c-img::after{
    opacity: 1;
  }
  .c-column .c-img img{
    transition: transform 0.5s ease;
  }
  .c-column a:hover .c-img img{
    transform: scale(1.1);
  }
  .c-lineup-category-list li{
    height: 24px;
    padding: 0 6px;
    font-size: 1.3rem;
  }
  .l-col2area .c-column-heading,
  .l-col3area .c-column-heading{
    font-size: 2.1rem;
  }
}
/* column(line)*/
.l-column-linegroup{
  display: grid;
  gap: 40px;
  align-content: start;
}
.c-column-line{
  padding: 0 0 0 28px;
  position: relative;
}
.c-column-line::before{
  content: '';
  display: block;
  width: 1px;
  height: 100%;
  background-color: var(--color-gray01);
  position: absolute;
  top: 0;
  left: 0;
}
.c-column-line-heading{
  margin: 0 0 24px;
  height: fit-content;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  position: relative;
}
.c-column-line-heading::before{
  content: '';
  display: block;
  width: 3px;
  height: 100%;
  background-color: var(--color-blue01);
  position: absolute;
  top: 0;
  left: -28px;
}
@media (min-width: 769px) {
  .l-column-linegroup{
    gap: 56px;
  }
  .c-column-line{
    padding: 0 0 0 56px;
  }
  .c-column-line-heading{
    font-size: 2.6rem;
  }
  .c-column-line-heading::before{
    left: -56px;
  }
}
/* column(box)*/
.l-column-boxarea{
  display: grid;
  gap: 32px;
}
.c-column-box{
  padding: 20px 20px 24px;
  background-color: var(--color-white);
  border: 1px solid;
  border-image: linear-gradient(to right, #DCE7EB, #DBDFC8) 1;
  box-shadow: 0px 0px 12px 0px #444A4C0A;
}
.c-column-box-heading{
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .l-column-boxarea{
    display: grid;
    gap: 32px;
  }
  .c-column-box{
    padding: 24px 32px 32px;
  }
  .c-column-box-heading{
    margin-bottom: 24px;
  }
}

/*other*/
.c-others{
  padding: 0 0 40px;
  background-color: var(--color-black02);
}
.l-others-inner{
  padding: 0 20px;
}
.c-others-heading{
  color: var(--color-white);
}
.c-aside-list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.c-aside-list li a{
  display: grid;
  width: 100%;
  height: 90px;
  position: relative;
  overflow: hidden;
}
/*.c-aside-list li.is-now a::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
}*/
.c-aside-list li.current a::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
}
.c-aside-list--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-aside-list--txt{
  display: grid;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 16px;
  color: var(--color-white);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  position: absolute;
  top: 0;
  left: 0;
}
.c-aside-link{
  display: grid;
  place-content: center;
  margin-top: 32px;
}
.c-aside-link a{
  justify-content: center;
  color: var(--color-white);
}
.c-aside-link .c-link--txt{
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
@media (min-width: 769px) {
  .c-others{
    padding: 0 0 80px;
  }
  .l-others-inner{
    width: 100%;
    max-width: 1396px;
    margin: 0 auto;
    padding: 0 80px 0 296px;
    position: relative;
  }
  .c-others-heading{
    padding: 40px 0;
  }
  .c-aside-list{
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
  }
  .c-aside-list li a{
    height: 117px;
  }
  .c-aside-list--img{
    transition: transform 0.5s ease;
  }
  .c-aside-list li a:hover .c-aside-list--img{
    transform: scale(1.05);
  }
  .c-aside-list--txt{
    font-size: 1.4rem;
  }
  .c-aside-link{
    margin: 0;
    position: absolute;
    top: 36px;
    right: 89px;
  }
  .c-aside-link a{
    min-height: 30px;
  }
  .c-aside-link .c-link--txt{
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.1em;
    padding-bottom: 6px;
  }
  .c-aside-link .c-link--txt::before,
  .c-aside-link .c-link--txt::after{
    width: 30px;
    height: 30px;
  }
  .c-aside-link .c-link--txt::before{
    width:  30px;
    height: 30px;
    background: url(../images/common-add/ico-linkarrow-02.webp);
    background-size: contain;
    position: relative;
    top: -1px;
    left: -1px;
  }
}

/* Pages
=====================================================================*/
/* pfas */
.c-section-pfas-feature .l-section-contentsarea{
  padding-top: 20px;
}
.c-section-pfas-water .l-section-contentsarea{
  padding: 24px 0 20px;
}
.c-section-pfas-air .l-section-contentsarea{
  padding: 40px 0 60px;
}
.c-section-pfas-record .l-section-contentsarea{
  padding: 0 0 60px;
}
.c-section-pfas-process .l-section-contentsarea{
  padding: 20px 0 56px;
}
.c-section-pfas-water--img{
  margin: 0 0 40px;
}
.l-pfas-feature-imgarea{
  margin: 24px 0 0;
}
@media (max-width: 769px) {
  .c-pfas-process--img{
    width: 520px;
    height: 160px;
  }
  .c-pfas-system--img{
    width: 482px;
    height: 160px;
  }
}
@media (min-width: 769px) {
  .c-section-pfas-feature .l-section-contentsarea{
    padding: 24px 0 78px;
  }
  .c-section-pfas-water .l-section-contentsarea{
    padding: 24px 0 80px;
  }
  .c-section-pfas-air .l-section-contentsarea{
    padding: 56px 0 80px;
  }
  .c-section-pfas-record .l-section-contentsarea{
    padding: 40px 0 60px;
  }
  .c-section-pfas-process{
    padding-top: 16px;
  }
  .c-section-pfas-process .l-section-contentsarea{
    padding: 20px 0 80px;
  }
  .c-section-pfas-water--img{
    margin-bottom: 56px;
  }
  .l-pfas-feature-imgarea{
    margin-top: 32px;
  }
  .c-pfas-process--img{
    width: 100%;
    height: auto;
  }
  .c-pfas-system--img{
    width: 100%;
    height: auto;
  }
  .l-pfas-feature-imgarea{
    grid-template-columns: 440px 1fr;
    align-items: center;
    margin: 32px 0 18px;
  }
  .l-pfas-clean-imgarea .c-txt{
    order: -1;
  }
  .l-pfas-eco-imgarea{
    display: grid;
    grid-template-columns: 1fr 412px;
    gap: 24px;
  }
  .l-pfas-eco-imgarea .c-img{
    order: 2;
  }
  .l-pfas-fp-imgarea{
    display: grid;
    grid-template-columns: 1fr 412px;
    gap: 24px;
    align-items: start;
  }
  .l-pfas-fp-imgarea .c-img{
    order: 2;
    height: auto;
  }
  .l-pfas-record-imgarea{
    display: grid;
    grid-template-columns: 408px 1fr;
    gap: 24px;
  }
}
/* tunnel-dust-collect */
.c-section-tunnel-lineup .l-section-contentsarea{
  padding: 8px 0 64px;
}
.c-spec{
  display: grid;
  gap: 2px;
  align-content: start;
}
.c-spec--title{
  color: var(--color-black02);
  font-weight: 700;
  font-style: Bold;
  font-size: 1.3rem;
  line-height: 1.7rem;
  letter-spacing: 0.1em;
}
.c-spec--txt p{
  color: var(--color-black02);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-tunnel-ventilation--txt{
  margin: 0 0 56px;
}
.c-section-tunnel-support .c-ul{
  gap: 6px;
}
.c-section-tunnel-support .l-imgarea,
.c-section-support .l-imgarea{
  display: grid;
  gap: 16px;
  align-content: start;
}
.c-section-tunnel-solution .l-section-contentsarea{
  padding-bottom: 16px;
}
.c-section-tunnel-feature .c-section-group-heading{
  padding-bottom: 0;
}
.c-section-tunnel-feature .l-section-contentsarea{
  padding-bottom: 16px;
}
.c-section-tunnel-support .l-section-contentsarea{
  padding-bottom: 56px;
}
@media (min-width: 769px) {
  .c-section-tunnel-lineup .l-section-contentsarea{
    padding: 32px 0 80px;
  }
  .l-tunnel-imgarea{
    grid-template-columns: 1fr 412px;
  }
  .l-tunnel-imgarea .c-img{
    order: 2;
  }
  .l-tunnel-cooler-imgarea{
    grid-template-columns: 1fr 470px;
  }
  .l-tunnel-cooler-imgarea .c-img{
    order: 2;
  }
  .l-tunnel-support-imgarea{
    grid-template-columns: 440px 1fr;
  }
  .c-spec--txt p{
    font-size: 1.4rem;
  }
  .c-section-tunnel-solution .l-section-contentsarea{
    padding-bottom: 80px;
  }
  .c-section-tunnel-feature .c-section-group-heading{
    padding-bottom: 32px;
  }
}
/* wind resistance */
.c-section-wind-record .l-section-contentsarea{
  padding: 4px 0 80px;
}
.c-wind-lineup .c-column-box{
  padding: 28px 24px 24px 24px;
}
.c-cliant-heading{
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 0 0 20px;
  margin: 0 0 24px;
  position: relative;
}
.c-cliant-heading::after{
  content: '';
  display: block;
  width: calc(100% + 48px);
  height: 1px;
  background-color: var(--color-gray01);
  position: absolute;
  bottom: 0;
  left: -24px;
}
.c-cliant-logo{
  display: block;
  height: auto;
  max-height: 52px;
}
.c-cliant-logo img {
  max-height: 40px;
  width: auto;
}
.l-wind-lineup-imgarea{
  display: grid;
  gap: 24px;
  align-content: start;
}
.c-simple-dl{
  display: grid;
  gap: 8px;
  align-content: start;
}
.c-simple-dt{
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
  letter-spacing: 0.1rem;
}
.c-simple-dd p{
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-wind-lineup--txt{
  margin: 40px 0 0;
}
.c-wind-lineup--txt p{
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-section-wind-machine .l-section-contentsarea{
  padding: 0 0 64px;
}
.c-spec-table th{
  width: 98px;
  min-height: 24px;
  padding: 0 20px 0 0;
  border-bottom: 8px solid transparent;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.1rem;
  text-align: left;
  position: relative;
  vertical-align: center;
}
.c-spec-table th::after{
  content: '：';
  display: block;
  height: 24px;
  position: absolute;
  top: calc(50% - 12px);
  right: 12px;
}
.c-spec-table td{
  min-height: 24px;
  border-bottom: 8px solid transparent;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  vertical-align: center;
}
.c-section-wind-flow .l-section-contentsarea{
  padding: 0 0 80px;
}
.c-flow{
  display: grid;
  gap: 20px;
  align-content: start;
}
.c-flow-box{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 23px 16px;
  border: 1px solid;
  border-image: linear-gradient(90deg, #DCE7EB 0%, #DBDFC8 75%) 1;
  position: relative;
}
.c-flow-box:not(:last-child)::after{
  content: '';
  display: grid;
  width:0;
  height:0;
  border-style:solid;
  border-width: 10.4px 6px 0 6px;
  border-color: #CFDDE0 transparent transparent transparent;
  position: absolute;
  top: calc(100% + 6px);
  left: calc(50% - 6px);
}
.c-flow--num{
  color: var(--color-blue01);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-flow--txt{
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-flow-after--txt{
  margin: 24px 0 0;
}
.c-flow-after--txt{
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}
.c-section-wind-test .c-link{
  margin-top: 0;
  padding: 16px 0 24px;
}
@media (min-width: 769px) {
  .c-section-wind-record .l-section-contentsarea{
    padding: 4px 0 80px;
  }
  .c-wind-lineup .l-section-contentsarea{
    padding-top: 19px;
  }
  .c-cliant-heading{
    display: flex;
    gap: 48px;
    align-items: center;
    align-content: center;
  }
  .c-cliant-heading::after{
    content: '';
    display: block;
    width: calc(100% + 48px);
    height: 1px;
    background-color: var(--color-gray01);
    position: absolute;
    bottom: 0;
    left: -24px;
  }
  .c-cliant-logo{
    position: relative;
  }
  .c-cliant-logo::after{
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
    position: absolute;
    top: 0;
    left: calc(100% + 20px);
  }
  .l-wind-lineup-imgarea{
    grid-template-columns: 416px 1fr;
  }
  .c-simple-dl{
    gap: 12px;
    padding-top: 8px;
  }
  .c-wind-lineup--txt p{
    text-align: center;
  }
  .c-section-wind-machine .l-section-contentsarea{
    padding-bottom: 84px;
  }
  .l-wind-machine-imgarea{
    grid-template-columns: 1fr 412px;
  }
  .l-wind-machine-imgarea .c-img{
    order: 2;
  }
  .c-section-wind-flow .l-section-contentsarea{
    padding: 32px 0 60px;
  }
  .c-flow{
    grid-template-columns: repeat(4, 1fr);
    align-content: center;
  }
  .c-flow-box{
    padding: 14px 16px;
  }
  .c-flow-box:not(:last-child)::after{
    border-width: 6px 0 6px 10.4px;
    border-color: transparent transparent transparent #CFDDE0;
    top: calc(50% - 6px);
    left: calc(100% + 6px);
  }
  .c-flow--txt{
    font-size: 1.6rem;
  }
  .c-section-wind-flow .c-link-button{
    margin-top: 0;
    padding: 15px 0 39px;
  }
  .c-section-wind-test .c-link{
    padding: 16px 0 24px;
  }
}
/* water-treatment */
.c-section-pfas-feature .l-section-contentsarea{
  display: grid;
  padding: 24px 0 60px;
}
.l-subjectarea{
  display: grid;
  gap: 16px;
}
.c-subject{
  background-color: var(--color-white);
  padding: 20px 24px 24px;
  border: 1px solid var(--color-white02)
}
.c-subject--title{
  margin: 0 0 10px;
  color: var(--color-blue01);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-align: center;
}
.c-subject ul{
  gap: 4px;
}
.c-section-water-lineup .l-section-contentsarea{
  padding: 0 0 56px;
}
.c-section-water-labo .l-section-contentsarea{
  padding: 0 0 80px;
}
.c-section-water-labo .c-section-heading{
  padding-top: 0;
}
.c-section-water-lineup .c-column {
  display: grid;
  gap: 12px;}
/*.c-section-water-lineup .c-column a{
  gap: 12px;
}*/
.c-water-subject--txt{
  margin: 24px 0 0;
}
.c-flow-after--txt + .c-link-button{
  margin-top: 24px;
}
.c-water-test .l-section-contentsarea{
  padding: 24px 0 60px;
}
.l-water-sample-col2{
  margin: 0 0 32px;
}
.c-water-flow .c-flow-box{
  padding: 14px 16px;
}
@media (max-width: 768px) {
  .c-section-water-lineup .c-column-heading{
    font-size: 1.6rem;
  }
  .l-water-sample-col2 .c-img{
    order: -1;
  }
}
@media (min-width: 769px) {
  .c-section-pfas-feature .l-section-contentsarea{
    display: grid;
    padding: 24px 0 78px;
  }
  .l-subjectarea{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .c-subject--title{
    font-size: 1.8rem;
  }
  .c-section-water-lineup .l-section-contentsarea{
    padding: 8px 0 78px;
  }
  .c-section-water-labo .c-section-heading{
    padding-top: 32px;
  }
  .c-section-water-labo .l-section-contentsarea{
    padding: 24px 0 80px;
  }
  .c-water-flow{
    display: flex;
    flex-wrap: wrap;
  }
  .c-water-flow .c-flow-box{
    width: calc((100% - 80px) / 4);
    padding: 14px;
  }
  .c-water-flow .c-flow-box:nth-of-type(5){
    margin-left: 20px;
  }
  .c-flow-after--txt + .c-link-button{
    margin-top: 0;
  }
  .l-water-sample-col2{
    grid-template-columns: 1fr 440px;
  }
  .c-water-test .l-section-contentsarea{
    padding: 32px 0 80px;
  }
  .c-section-water-lineup .c-column-heading{
    margin-bottom: -4px;
  }
}
.c-white-column{
  background-color: var(--color-white);
  padding: 20px 24px;
  border: 1px solid var(--color-white02);
}
.c-white-column-heading{
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0 0 10px;
}
.c-white-column-head--main{
  display: flex;
  align-items: center;
  color: var(--color-blue01);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.7rem;
  letter-spacing: 0.1em;
}
.c-white-column-head--main::after{
  content: '';
  display: block;
  width: 1px;
  height: 26px;
  margin: 0 0 0 15px;
  background-color: var(--color-gray02);
}
.c-white-column-head--sub{
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.7e;
  letter-spacing: 0.1em;
}
/* business list */
.l-business-listarea{
  display: grid;
  gap: 36px;
}
.c-business-list-item a{
  display: block;
  padding: 30px 24px 30px;
  box-shadow: 0px 0px 12px 0px #444A4C0A;
  border: 1px solid var(--color-white02);
  border-width: 0 1px 1px 1px;
  overflow: hidden;
  position: relative;
}
.c-business-list-item a::after{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%, #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%, #E83A40 79.78%, #E92F54 90.49%, #E84073 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.c-business-list--img{
  position: absolute;
  top: 0;
  right: 0;
}
.c-business-list--img::after{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 50%,rgba(255, 255, 255, 0.3) 100%);
  position: absolute;
  top: 0;
  left: 0;
}
.c-business-list--img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(30%);
}
.l-business-list-item-main{
  position: relative;
}
.c-business-list-item--title{
  margin: 0 0 12px;
  color: var(--color-blue01);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
}
.c-business-list-item--txt{
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
}
.c-business-list--link{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: start;
  width: fit-content;
  min-height: 36px;
  position: relative;
}
@media (max-width: 768px) {
  .c-white-column-heading{
    flex-direction: column;
    align-items: start;
    gap: 16px;
    margin-top: 12px;
  }
  .c-white-column-head--main{
    flex-direction: column;
    align-items: start;
    gap: 16px;
  }
  .c-white-column-head--main::after{
    width: 48px;
    height: 1px;
    margin: 0;
  }
}
@media (min-width: 769px) {
  .c-section-business-list .l-section-contentsarea{
    padding-bottom: 86px;
  }
  .l-business-listarea{
    gap: 54px;
  }
  .c-business-list-item a{
    padding: 40px 48px 24px 294px;
  }
  .c-business-list--img{
    width: 100%;
    height: 100%;
    top: 0;
    right: auto;
    left: 0;
    overflow: hidden;
  }
  .c-business-list--img::after{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 10%, #FFFFFF 330px, #FFFFFF 100%);
  }
  .c-business-list--img img{
    width: 330px;
    height: 100%;
    object-fit: contain;
    transform: scale(1.1);
    transition: transform 0.3s ease;
    border: 1px solid red;
  }
  a:hover .c-business-list--img img{
    transform: scale(1.2);
  }
  .c-business-list-item--title{
    margin-bottom: 16px;
    font-size: 2.6rem;
  }
  .c-business-list-item--txt{
    font-size: 1.6rem;
  }
  .l-business-list-item-main{
    display: grid;
  }
  .c-business-list--link{
    gap: 16px;
    min-height: 66px;
    justify-self: end;
  }
  a:hover .c-business-list--link .c-link--txt{
    transform: translateX(6px);
    color: #616263;
  }
  a:hover .c-business-list--link .c-link--txt::after{
    transform: scale(1.2) rotate(-180deg);
  }
}