@charset "UTF-8";
/*
**
** 全案件共通化するcss
** 案件個別の共有cssはここには記載せずcommon.scssに記載してください
** 
** animation
** layout
** fluffy
** txt
** display
** click
** wordpress
**
**
*/
/*==================================================

** animation
==================================================*/
[class*=fluffy-] {
  opacity: 0;
  position: relative;
}

.fluffy-upper {
  bottom: -50px;
}
.fluffy-upper.move {
  opacity: 1;
  bottom: 0;
  transition: all 0.8s;
}
.fluffy-appear {
  opacity: 0;
}
.fluffy-appear.move {
  opacity: 1;
  transition: all 0.8s ease;
}
.fluffy-slidein-l {
  opacity: 0;
  left: -50px;
}
.fluffy-slidein-l.move {
  opacity: 1;
  left: 0;
  transition: all 0.8s;
}
.fluffy-slidein-r {
  opacity: 0;
  right: -50px;
}
.fluffy-slidein-r.move {
  opacity: 1;
  right: 0;
  transition: all 0.8s;
}
.fluffy-scale-up {
  opacity: 0;
  bottom: -50px;
  transform: scale(1.1);
}
.fluffy-scale-up.move {
  opacity: 1;
  bottom: 0;
  transition: all 1s ease;
  transform: scale(1);
}

.fadelist > li {
  opacity: 0;
  top: 30px;
  position: relative;
}
.fadelist.move > li {
  opacity: 1;
  top: 0px;
  transition: top 1s, opacity 1s;
}
.fadelist.move > li:nth-of-type(1) {
  transition-delay: 0.3s;
}
.fadelist.move > li:nth-of-type(2) {
  transition-delay: 0.6s;
}
.fadelist.move > li:nth-of-type(3) {
  transition-delay: 0.9s;
}
.fadelist.move > li:nth-of-type(4) {
  transition-delay: 1.2s;
}
.fadelist.move > li:nth-of-type(5) {
  transition-delay: 1.5s;
}
.fadelist.move > li:nth-of-type(6) {
  transition-delay: 1.8s;
}
.fadelist.move > li:nth-of-type(7) {
  transition-delay: 2.1s;
}
.fadelist.move > li:nth-of-type(8) {
  transition-delay: 2.4s;
}
.fadelist.move > li:nth-of-type(9) {
  transition-delay: 2.7s;
}
.fadelist.move > li:nth-of-type(10) {
  transition-delay: 3s;
}
.fadelist.move > li:nth-of-type(11) {
  transition-delay: 3.3s;
}
.fadelist.move > li:nth-of-type(12) {
  transition-delay: 3.6s;
}
.fadelist.move > li:nth-of-type(13) {
  transition-delay: 3.9s;
}
.fadelist.move > li:nth-of-type(14) {
  transition-delay: 4.2s;
}
.fadelist.move > li:nth-of-type(15) {
  transition-delay: 4.5s;
}
.fadelist.move > li:nth-of-type(16) {
  transition-delay: 4.8s;
}
.fadelist.move > li:nth-of-type(17) {
  transition-delay: 5.1s;
}
.fadelist.move > li:nth-of-type(18) {
  transition-delay: 5.4s;
}
.fadelist.move > li:nth-of-type(19) {
  transition-delay: 5.7s;
}
.fadelist.move > li:nth-of-type(20) {
  transition-delay: 6s;
}
.fadelist.move > li:nth-of-type(21) {
  transition-delay: 6.3s;
}
.fadelist.move > li:nth-of-type(22) {
  transition-delay: 6.6s;
}
.fadelist.move > li:nth-of-type(23) {
  transition-delay: 6.9s;
}
.fadelist.move > li:nth-of-type(24) {
  transition-delay: 7.2s;
}
.fadelist.move > li:nth-of-type(25) {
  transition-delay: 7.5s;
}
.fadelist.move > li:nth-of-type(26) {
  transition-delay: 7.8s;
}
.fadelist.move > li:nth-of-type(27) {
  transition-delay: 8.1s;
}
.fadelist.move > li:nth-of-type(28) {
  transition-delay: 8.4s;
}
.fadelist.move > li:nth-of-type(29) {
  transition-delay: 8.7s;
}
.fadelist.move > li:nth-of-type(30) {
  transition-delay: 9s;
}

.fadein-item {
  opacity: 0;
  top: 50px;
  position: relative;
}
.fadein-down {
  top: -50px;
}
.fadein.move .fadein-item {
  opacity: 1;
  top: 0px;
  transition: top 1s, opacity 1s;
}
.fadein.move .fadein-num1 {
  transition-delay: 0.3s;
}
.fadein.move .fadein-num2 {
  transition-delay: 0.6s;
}
.fadein.move .fadein-num3 {
  transition-delay: 0.9s;
}
.fadein.move .fadein-num4 {
  transition-delay: 1.2s;
}
.fadein.move .fadein-num5 {
  transition-delay: 1.5s;
}
.fadein.move .fadein-num6 {
  transition-delay: 1.8s;
}
.fadein.move .fadein-num7 {
  transition-delay: 2.1s;
}
.fadein.move .fadein-num8 {
  transition-delay: 2.4s;
}
.fadein.move .fadein-num9 {
  transition-delay: 2.7s;
}
.fadein.move .fadein-num10 {
  transition-delay: 3s;
}
.fadein.move .fadein-num11 {
  transition-delay: 3.3s;
}
.fadein.move .fadein-num12 {
  transition-delay: 3.6s;
}
.fadein.move .fadein-num13 {
  transition-delay: 3.9s;
}
.fadein.move .fadein-num14 {
  transition-delay: 4.2s;
}
.fadein.move .fadein-num15 {
  transition-delay: 4.5s;
}
.fadein.move .fadein-num16 {
  transition-delay: 4.8s;
}
.fadein.move .fadein-num17 {
  transition-delay: 5.1s;
}
.fadein.move .fadein-num18 {
  transition-delay: 5.4s;
}
.fadein.move .fadein-num19 {
  transition-delay: 5.7s;
}
.fadein.move .fadein-num20 {
  transition-delay: 6s;
}
.fadein.move .fadein-num21 {
  transition-delay: 6.3s;
}
.fadein.move .fadein-num22 {
  transition-delay: 6.6s;
}
.fadein.move .fadein-num23 {
  transition-delay: 6.9s;
}
.fadein.move .fadein-num24 {
  transition-delay: 7.2s;
}
.fadein.move .fadein-num25 {
  transition-delay: 7.5s;
}
.fadein.move .fadein-num26 {
  transition-delay: 7.8s;
}
.fadein.move .fadein-num27 {
  transition-delay: 8.1s;
}
.fadein.move .fadein-num28 {
  transition-delay: 8.4s;
}
.fadein.move .fadein-num29 {
  transition-delay: 8.7s;
}
.fadein.move .fadein-num30 {
  transition-delay: 9s;
}

/*==================================================

** layout
==================================================*/
.grid {
  display: grid;
}
.grid > * {
  min-width: 0;
}

:where([class*=flex-]) {
  display: flex;
}

.flex {
  display: flex;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-row-r {
  flex-direction: row-reverse;
}
.flex-col-r {
  flex-direction: column-reverse;
}
.flex-jcc {
  justify-content: center;
}
.flex-jcsb {
  justify-content: space-between;
}
.flex-jcfe {
  justify-content: flex-start;
}
.flex-jcfe {
  justify-content: flex-end;
}
.flex-aic {
  align-items: center;
}
.flex-aifs {
  align-items: flex-start;
}
.flex-aife {
  align-items: flex-end;
}

.float:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}
.float-r {
  float: right;
}
.float-l {
  float: left;
}

/*==================================================

** txt
==================================================*/
.ctr {
  text-align: center;
}
@media screen and (min-width: 1024px) {
  .ctr-pc {
    text-align: center;
  }
}
@media screen and (min-width: 768px) {
  .ctr-pc-tab {
    text-align: center;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .ctr-tab {
    text-align: center;
  }
}
@media screen and (max-width: 1023px) {
  .ctr-tab-sp {
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .ctr-sp {
    text-align: center;
  }
}

/*==================================================

** display
==================================================*/
.pc,
.pc-tab,
.tab,
.tab-sp,
.sp {
  display: none;
}

@media screen and (min-width: 1024px) {
  .pc {
    display: revert;
  }
}
@media screen and (min-width: 768px) {
  .pc-tab {
    display: revert;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .tab {
    display: revert;
  }
}
@media screen and (max-width: 1023px) {
  .tab-sp {
    display: revert;
  }
}
@media screen and (max-width: 767px) {
  .sp {
    display: revert;
  }
}
/*==================================================

** click
==================================================*/
.clickoff {
  pointer-events: none;
}
@media screen and (min-width: 1024px) {
  .clickoff-pc {
    pointer-events: none;
  }
}
@media screen and (min-width: 768px) {
  .clickoff-pc-tab {
    pointer-events: none;
  }
}
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .clickoff-tab {
    pointer-events: none;
  }
}
@media screen and (max-width: 1023px) {
  .clickoff-tab-sp {
    pointer-events: none;
  }
}
@media screen and (max-width: 767px) {
  .clickoff-sp {
    pointer-events: none;
  }
}

/*==================================================

** wordpress
==================================================*/
/* figure float */
.alignleft {
  float: left;
  display: inline;
  margin-right: 20px;
}

.alignright {
  float: right;
  display: inline;
  margin-left: 20px;
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 767px) {
  .alignleft,
  .alignright,
  .aligncenter {
    float: none;
    display: block;
    margin: 20px 0 0;
  }
}
/* clearfix */
.clear:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
}

/*
**
** 案件共有css
** page common
** custom posttype common
**
*/
/*==================================================

** page common
==================================================*/
.sitewrap .en {
  font: normal normal 400 1em/1.8 "Outfit", "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
.sitewrap .mincho {
  font: normal normal 400 1em/1.8 YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "MS PMincho", "MS 明朝", serif;
}
.sitewrap .gothic {
  font: normal normal 400 1em/1.8 "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
}
.sitewrap .tel-box + .tel-box {
  margin-top: 32px;
}
.sitewrap .tel-a {
  place-items: center;
  border: 1px solid currentColor;
  padding: 47px 24px;
}
.sitewrap .tel-a:hover {
  background: #fff;
  color: #4180b1;
}
.sitewrap .tel-ttl {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 8px;
}
.sitewrap .tel-num {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 4.8rem;
  font-weight: 600;
  line-height: 1.2;
}
.sitewrap .tel-num::before {
  content: "";
  display: block;
  width: 36px;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: url(../img/common/ico_phone_bk.svg) no-repeat center center/contain;
          mask: url(../img/common/ico_phone_bk.svg) no-repeat center center/contain;
}
.sitewrap .tel-time {
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  .sitewrap .tel-box + .tel-box {
    margin-top: 24px;
  }
  .sitewrap .tel-a {
    padding-inline: 16px;
  }
  .sitewrap .tel-ttl {
    font-size: min(18 / 375 * 100vw, 1.8rem);
  }
  .sitewrap .tel-num {
    gap: 12px;
    font-size: min(32 / 375 * 100vw, 3.2rem);
  }
  .sitewrap .tel-num::before {
    width: min(24 / 375 * 100vw, 24px);
  }
  .sitewrap .tel-time {
    font-size: min(14 / 375 * 100vw, 1.4rem);
  }
}

.main .mt-0 {
  margin-top: 0;
}
.main .mt-1st {
  margin-top: var(--h1-mt);
}
.main .pagespace-btm {
  padding-bottom: 150px;
}
.main .fw-m {
  font-weight: 500;
}
.main .clr-bl {
  color: #4180b1;
}
.main .nav-grid {
  margin-top: 152px;
  gap: 2px;
}
.main .nav-grid .navsec {
  color: #fff;
  text-align: center;
  padding: 80px 20px;
  position: relative;
  overflow: hidden;
}
.main .nav-grid .navsec:before {
  content: "";
  display: block;
  position: absolute;
  background: no-repeat center center/cover;
  inset: 0;
  z-index: -1;
  transition: all 0.3s;
}
.main .nav-grid .navsec:has(.link-btn a:hover):before {
  scale: 1.1;
  transition: all 0.8s;
}
.main .nav-grid .ttl {
  font-size: 2.4rem;
  margin-top: 0;
}
.main .nav-grid .ttl .en {
  display: block;
  color: #7bb8d5;
  font-size: 1.4rem;
  line-height: 1;
}
.main .nav-grid .link-btn {
  margin: 24px auto 0;
}
.main .nav-service {
  grid-template-columns: repeat(3, 1fr);
}
.main .nav-service .products:before {
  background-image: url("../img/common/service_nav_products_bg.webp");
}
.main .nav-service .facilities:before {
  background-image: url("../img/common/service_nav_facilities_bg.webp");
}
.main .nav-service .works:before {
  background-image: url("../img/common/service_nav_works_bg.webp");
}
.main .nav-service .txt {
  font-size: 1.4rem;
  margin-top: 28px;
}
.main .nav-company {
  grid-template-columns: repeat(2, 1fr);
}
.main .nav-company .outline:before {
  background-image: url("../img/common/company_nav_outline_bg_pc.webp");
}
.main .nav-company .history:before {
  background-image: url("../img/common/company_nav_history_bg_pc.webp");
}
.main .nav-company .offices:before {
  background-image: url("../img/common/company_nav_offices_bg_pc.webp");
}
.main .nav-company .quality:before {
  background-image: url("../img/common/company_nav_quality_bg_pc.webp");
}
.main .nav-recruit {
  grid-template-columns: 1fr;
  margin-top: 120px;
}
.main .nav-recruit .outline {
  padding: 120px 20px;
}
.main .nav-recruit .outline .ttl {
  font-size: 3.2rem;
  line-height: 1.5;
}
.main .nav-recruit .outline .ttl .en {
  font-size: 1.6rem;
}
.main .nav-recruit .outline .txt {
  margin-top: 38px;
}
.main .nav-recruit .outline .link-btn {
  margin-top: 50px;
}
.main .nav-recruit .outline:before {
  background-image: url("../img/recruit/recruit_nav_outline_bg_pc.webp");
}
.main .nav-recruit .newgraduate {
  padding: 120px 20px;
}
.main .nav-recruit .newgraduate .ttl {
  font-size: 3.2rem;
  line-height: 1.5;
}
.main .nav-recruit .newgraduate .ttl .en {
  font-size: 1.6rem;
}
.main .nav-recruit .newgraduate .txt {
  margin-top: 38px;
}
.main .nav-recruit .newgraduate .link-btn {
  margin-top: 50px;
}
.main .nav-recruit .newgraduate:before {
  background-image: url("../img/recruit/recruit_nav_newgraduate_bg_pc.webp");
}
.main .nav-recruit .career {
  padding: 120px 20px;
}
.main .nav-recruit .career .ttl {
  font-size: 3.2rem;
  line-height: 1.5;
}
.main .nav-recruit .career .ttl .en {
  font-size: 1.6rem;
}
.main .nav-recruit .career .txt {
  margin-top: 38px;
}
.main .nav-recruit .career .link-btn {
  margin-top: 50px;
}
.main .nav-recruit .career:before {
  background-image: url("../img/recruit/recruit_nav_career_bg_pc.webp");
}
.main .txtbox > :first-child {
  margin-top: 0;
}
.main .scrollbox {
  overflow-x: auto;
}
.main .scrollbox > :first-child {
  margin-top: 0;
}
.main .scrollbox table th, .main .scrollbox table td {
  display: table-cell !important;
}
.main .faqlist {
  background: #fff;
}
.main .faqlist + .faqlist {
  margin-top: 16px;
}
.main .faqlist .question, .main .faqlist .answer {
  padding: 27px 20px 22px 74px;
  position: relative;
}
.main .faqlist .question:before, .main .faqlist .answer:before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  color: #fff;
  font: normal normal 400 1em/1.8 "Outfit", "IBM Plex Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, Verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  position: absolute;
  top: 20px;
  left: 20px;
  line-height: 38px;
  text-align: center;
  padding: 0 0 0 1px;
}
.main .faqlist .question {
  padding-right: 80px;
  font-weight: 500;
  cursor: pointer;
}
.main .faqlist .question.is-open:after {
  transform: rotate(180deg);
  transition: all 0.4s;
}
.main .faqlist .question:before {
  content: "Q";
  background: #4180b1;
}
.main .faqlist .question:after {
  content: "";
  display: block;
  width: 18px;
  height: 11px;
  background: url(../img/common/angle_btm_gy_thin.svg) no-repeat center center/contain;
  position: absolute;
  top: 35px;
  right: 32px;
  transition: all 0.4s;
}
.main .faqlist .answer {
  display: none;
  border-top: 1px dashed #ccc;
}
.main .faqlist .answer:before {
  content: "A";
  background: #cc295c;
}
.main .link-btn {
  margin-top: 48px;
}
.main .link-btn a {
  display: block;
  line-height: 1.8;
  border: 1px solid #1f2b33;
  background: #1f2b33;
  color: #fff;
  width: 100%;
  max-width: 240px;
  padding: 15px 16px 12px;
  text-align: center;
  font-weight: 500;
  font-size: 1.4rem;
  text-decoration: none;
  position: relative;
  margin: 0 auto;
}
.main .link-btn a:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../img/common/angle_rt_wt.svg) no-repeat center center/contain;
          mask: url(../img/common/angle_rt_wt.svg) no-repeat center center/contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10px;
  margin: auto;
}
.main .link-btn a:hover {
  opacity: 1;
  background: #fff;
  color: #1f2b33;
}
.main .link-btn.ptn1 {
  margin-top: 24px;
}
.main .link-btn.ptn1 a {
  width: 160px;
  border-color: #fff;
  background: 0;
  padding: 8px 12px 7px;
}
.main .link-btn.ptn1 a:before {
  top: 2px;
}
.main .link-btn.ptn1 a:hover {
  color: #1f2b33;
  background: #fff;
}
.main .link-btn.ptn2 a {
  color: #1f2b33;
  background: #fff;
}
.main .link-btn.ptn2 a:hover {
  background: #1f2b33;
  color: #fff;
}
.main .link-btn.ptn3 {
  margin-top: 80px;
}
.main .link-btn.ptn3 a {
  max-width: 360px;
}
.main .link-btn.ptn4 a:before {
  -webkit-mask: url(../img/common/ico_plus_wt.svg);
          mask: url(../img/common/ico_plus_wt.svg);
  right: 19px;
}
.main .link-txt1 {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #4180b1;
}
.main .link-txt1:hover {
  text-decoration: none;
  color: #8f9fb8;
}
@media screen and (max-width: 767px) {
  .main .pagespace-btm {
    padding-bottom: 104px;
  }
  .main .nav-grid {
    margin-top: 104px;
    grid-template-columns: 1fr;
  }
  .main .nav-grid .navsec {
    padding: 64px 36px;
  }
  .main .nav-grid .ttl {
    font-size: 2.2rem;
  }
  .main .nav-company .outline:before {
    background-image: url("../img/common/company_nav_outline_bg_sp.webp");
  }
  .main .nav-company .history:before {
    background-image: url("../img/common/company_nav_history_bg_sp.webp");
  }
  .main .nav-company .offices:before {
    background-image: url("../img/common/company_nav_offices_bg_sp.webp");
  }
  .main .nav-company .quality:before {
    background-image: url("../img/common/company_nav_quality_bg_sp.webp");
  }
  .main .nav-recruit {
    margin-top: 80px;
  }
  .main .nav-recruit .outline {
    padding: 80px 32px;
  }
  .main .nav-recruit .outline .ttl {
    font-size: 2.8rem;
  }
  .main .nav-recruit .outline:before {
    background-image: url("../img/recruit/recruit_nav_outline_bg_sp.webp");
  }
  .main .nav-recruit .newgraduate {
    padding: 80px 32px;
  }
  .main .nav-recruit .newgraduate .ttl {
    font-size: 2.8rem;
  }
  .main .nav-recruit .newgraduate:before {
    background-image: url("../img/recruit/recruit_nav_newgraduate_bg_sp.webp");
  }
  .main .nav-recruit .career {
    padding: 80px 32px;
  }
  .main .nav-recruit .career .ttl {
    font-size: 2.8rem;
  }
  .main .nav-recruit .career:before {
    background-image: url("../img/recruit/recruit_nav_career_bg_sp.webp");
  }
  .main .scrollbox {
    margin-right: -4.26%;
    display: flex;
  }
  .main .scrollbox:after {
    content: "";
    display: block;
    padding-right: 4.26%;
  }
  .main .link-btn {
    margin-top: 64px;
  }
  .main .link-btn a {
    max-width: 100%;
  }
  .main .link-btn.ptn3 {
    margin-top: 48px;
  }
  .main .link-btn.ptn3 a {
    max-width: 100%;
  }
}

/*==================================================

** custom posttype common
==================================================*/
.main .post-sec {
  grid-template-columns: 1fr 264px;
  gap: 64px;
}
.main .post-side .sideparts {
  gap: 32px;
}
.main .post-side .sideparts + .sideparts {
  margin-top: 48px;
}
.main .post-side h3 {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
.main .post-side h3 + * {
  margin-top: 0;
}
.main .post-side .catlist a:hover {
  color: #4180b1;
}
.main .post-side .newsrecent {
  gap: 24px;
}
.main .post-side .newsrecent a:hover .date, .main .post-side .newsrecent a:hover .ttl {
  color: #4180b1;
}
.main .post-side .newsrecent a:hover .ttl {
  text-decoration: none;
}
.main .post-side .newsrecent .date {
  display: block;
  color: #8f9fb8;
  font-weight: 500;
  transition: inherit;
}
.main .post-side .newsrecent .ttl {
  margin-top: 4px;
  line-height: 1.8;
  max-height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: inherit;
}
.main .post-side .archives {
  width: 100%;
  background: url(../img/common/angle_btm_gy.svg) no-repeat right 20px top 20px/14px, #fff;
  border-radius: 8px;
  border: 1px solid #ccc;
  color: #8f9fb8;
  position: relative;
  padding: 17px 46px 13px 16px;
}
.main .newslist {
  gap: 30px;
}
.main .newslist a {
  grid-template-columns: 96px 96px 1fr;
  gap: 16px;
}
.main .newslist a:hover .date {
  color: #4180b1;
}
.main .newslist a:hover .cat {
  color: #fff;
  background: #4180b1;
}
.main .newslist a:hover .ttl {
  text-decoration: none;
  color: #4180b1;
}
.main .newslist .date {
  color: #8f9fb8;
  font-weight: 500;
  transition: inherit;
}
.main .newslist .cat {
  color: #4180b1;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 24px;
  padding: 4px 16px 0;
  transition: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
  width: 100%;
  transform: translateY(-2px);
}
.main .newslist .ttl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: inherit;
}
.main .sharebox {
  margin-top: 64px;
  grid-template-columns: 106px 172px;
  gap: 16px;
  align-items: center;
}
.main .sharebox .ttl {
  position: relative;
  font-size: 1.6rem;
  font-weight: 500;
}
.main .sharebox .ttl:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: url(../img/common/angle_double_rt_bk.svg) no-repeat center center/contain;
  position: absolute;
  top: 8px;
  right: 0;
}
.main .sharebox .snslist {
  grid-template-columns: repeat(4, 40px);
  gap: 4px;
}
.main .sharebox .snslist a {
  display: block;
  background: #fff;
  padding: 13px;
  height: 40px;
  border-radius: 1000px;
}
.main .sharebox .snslist a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.main .postbtns {
  margin-top: 64px;
  grid-template-columns: 1fr 160px;
}
.main .postbtns a {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  border: 1px solid #1f2b33;
  position: relative;
  line-height: 38px;
  padding-top: 2px;
  text-align: center;
  max-width: 160px;
  width: 100%;
}
.main .postbtns a:hover {
  color: #fff;
  background: #1f2b33;
}
.main .postbtns a:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../img/common/angle_rt_bk.svg) no-repeat center center/contain;
          mask: url(../img/common/angle_rt_bk.svg) no-repeat center center/contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 16px;
  margin: auto;
}
.main .postbtns .prev a:before {
  -webkit-mask: url(../img/common/angle_lt_bk.svg) no-repeat center center/contain;
          mask: url(../img/common/angle_lt_bk.svg) no-repeat center center/contain;
  top: 0;
  bottom: 0;
  right: auto;
  left: 16px;
}
.main .art-ttl .catbox {
  gap: 16px;
}
.main .art-ttl .catbox .date {
  color: #8f9fb8;
  font-weight: 500;
  transition: inherit;
}
.main .art-ttl .catbox .cat a {
  display: block;
  color: #4180b1;
  background: #fff;
  border-radius: 4px;
  text-align: center;
  font-size: 1.2rem;
  line-height: 23px;
  padding: 4px 16px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 96px;
  width: 100%;
  transform: translateY(-1px);
}
.main .art-ttl .catbox .cat a:hover {
  color: #fff;
  background: #4180b1;
}
.main .art-ttl h1 {
  margin-top: 24px;
}
.main .art-body > :first-child {
  margin-top: 0;
}
.main .art-body {
  margin-top: 64px;
}
.main .art-body ul {
  list-style: none;
  margin-top: 40px;
}
.main .art-body ul > li {
  padding-left: 26px;
}
.main .art-body ul > li:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 1000px;
  background: #4180b1;
}
.main .art-body ul > li + li {
  margin-top: 12px;
}
.main .art-body ol {
  margin: 32px 0 0;
  counter-reset: number;
}
.main .art-body ol li > :first-child {
  margin-top: 0;
}
.main .art-body ol > li {
  counter-increment: number;
}
.main .art-body ol li {
  padding-left: 30px;
  position: relative;
}
.main .art-body ol li:before {
  content: counter(number, decimal-leading-zero) ".";
  color: #4180b1;
  font-weight: 500;
  position: absolute;
  left: 0;
  top: 0;
}
.main .art-body ol li + li {
  margin-top: 10px;
}
.main .art-body a {
  text-decoration: underline;
  color: #4180b1;
}
.main .art-body a:hover {
  text-decoration: none;
}
.main .art-body strong, .main .art-body em, .main .art-body b {
  color: #4180b1;
}
.main .art-body .scrollbox {
  margin-top: 48px;
}
.main .art-body .scrollbox table {
  border: 1px solid #ccc;
}
.main .art-body .scrollbox table tr {
  border-color: #ccc;
}
.main .art-body .scrollbox table th, .main .art-body .scrollbox table td {
  padding: 17px 20px;
}
.main .art-body .scrollbox table th {
  background: #ebedf0;
  width: 240px;
  border-right: 1px solid #ccc;
}
.main .pager {
  margin: 64px 0 0;
}
.main .pager ul, .main .pager ol {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.main .pager ul li, .main .pager ol li {
  width: 40px;
}
.main .pager a, .main .pager span {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  color: #1f2b33;
  font-weight: 500;
  font-size: 1.4rem;
  text-align: center;
  position: relative;
  line-height: 35px;
  padding-top: 3px;
  background: #f0f2f5;
}
.main .pager a:hover,
.main .pager span {
  background: #1f2b33;
  color: #fff;
}
.main .pager .current span {
  background: #1f2b33;
}
.main .pager :where(.first, .prev,
.next, .last) {
  position: relative;
}
.main .pager :where(.first, .prev,
.next, .last) a {
  display: block;
  height: 40px;
}
.main .pager :where(.first, .prev,
.next, .last) a:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(../img/common/pager_prev_ico_bk.svg) no-repeat center center/contain;
          mask: url(../img/common/pager_prev_ico_bk.svg) no-repeat center center/contain;
  position: absolute;
  inset: 0;
  margin: auto;
}
.main .pager :where(.first, .prev,
.next, .last) a:hover:before {
  color: currentColor;
}
.main .pager .next a:before {
  -webkit-mask: url(../img/common/pager_next_ico_bk.svg) no-repeat center center/contain;
          mask: url(../img/common/pager_next_ico_bk.svg) no-repeat center center/contain;
}
@media screen and (max-width: 1023px) {
  .main .post-sec {
    grid-template-columns: 1fr;
    gap: 104px;
  }
  .main .post-side .sideparts {
    gap: 32px;
  }
  .main .post-side .sideparts + .sideparts {
    margin-top: 48px;
  }
  .main .newslist a {
    display: flex;
    flex-wrap: wrap;
  }
  .main .newslist a .ttl {
    width: 100%;
  }
  .main .postbtns {
    grid-template-columns: 1fr 120px;
  }
  .main .postbtns a {
    max-width: 120px;
  }
  .main .art-ttl h1 {
    margin-top: 16px;
  }
  .main .art-body .scrollbox table {
    min-width: 800px;
  }
  .main .pager {
    margin: 56px 0 0;
  }
}
@media screen and (max-width: 767px) {
  .main .sharebox {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .main .sharebox .ttl {
    width: 106px;
  }
  .main .sharebox .snslist {
    margin-top: 0;
  }
}