body {
  margin: 0;
  /* background-image: url(../img/img_backimg.png); */
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
  /* background-size: contain; */
  position: relative;
}
body::after {
  content: "";
  position: absolute; /* スクロールしても固定したい場合 */
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 2200px; */
  height: 50%;
  background: url(../img/img_backimg.png) no-repeat;
  background-size: cover;
  pointer-events: none; /* クリック邪魔しない */
  z-index: -1; /* 背面に */
}
@media (max-width: 1024px) {
  body{
        height: 50%;
    /* background-image: url(../img/img_backimg_sp.png); */
    /* background-size: cover; */
  }
}

:root :where(.is-layout-flow)>*,:root :where(.is-layout-constrained) > *{
  margin-block-start: 0px !important;
  margin-block-end: 0;
}
a{
  color: #fff;
  text-decoration: none;
  transition: all .3s cubic-bezier(.4, .4, 0, 1);
}
a:hover{
  opacity: 0.6;
}

/* ボタン */

.slide .wp-element-button {
  /* background: #000; */
  color: #fff;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
.slide .wp-element-button::after {
  background: #fff;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}
.slide .wp-element-button:hover {
  color: #000;
  opacity: 1;
}
.slide .wp-element-button:hover::after {
  transform: scale(1, 1);
}


/* 全体 */

.site-shell {
  position: relative;
  min-height: 100vh;
}

.main-contentes{
  width: 100%;
  max-width: 1079px;
  display: flex;
  justify-self: center;
}

/* メイン */

.site-main {
  /* margin-left: 280px; */
  padding: 0px;
  margin: 0 !important;
    max-width: 988px;
    width: 100%;
  /* min-height: 100vh; */
  box-sizing: border-box;
  border-left: 1px solid #4F4F4F;
  border-right: 1px solid #4F4F4F;
          /* z-index: 0; */
}
.contents-area{
  padding: 80px 5vw;
}
.right-space{
  width: 52px;
}
@media (max-width: 767px) {
  .right-space{
    display: none;
  }
  
}

.top-right .wp-block-button{
  margin-right: 0 !important;
  margin-left: auto !important;
  
}
@media (max-width: 767px) {
  .top-right .wp-block-button{
    margin-right: auto !important;
    margin-left: auto !important;
    
  }
  .site-sidebar{
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* 右ヘッダー */
.site-shell {
  padding: 0;
  margin: 0 auto;
  position: relative;

}

.left-contents {
  width: 52px;
  z-index: 10;
  /* position: fixed;
  float: left;
  top: 0;
  margin-left: -60px !important; */
}
/* .site-main .left-contents.bottom {
  position: sticky;
  float: left;
  top: 0;
  margin-bottom: -100%;
  margin-left: -60px !important;
} */

.site-sidebar {

  /* width: 280px; */
  height: auto;
  box-sizing: border-box;

  /* background: #f5f5f5; */
  /* border-left: 1px solid #ddd; */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: sticky;
  top: 5px;
  padding-bottom: 24px;
  padding-top: 24px;
}
div#n2-ss-2 .nextend-arrow img{
  border: 2px solid #fff;
  border-radius: 100%;
  padding: 3px;
      width: 24px !important;
    height: 24px !important;
}

.anker-about {
  position: relative;
}

.anker-about::after {
  content: url(../img/About.svg);
  display: block;
  position: absolute;
  right: -45px;
  top: 0;
}

.anker-media {
  position: relative;
}
.anker-media::after {
  content: url(../img/bySYNC.Media.svg);
  display: block;
  position: absolute;
  right: -45px;
  top: 0;
}

.wp-block-latest-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.wp-block-latest-posts__list li {
  width: calc(100%/3);
  margin-bottom: 40px;
}

.nextend-bullet-bar {
  display: flex;
  margin-right: -20px;
  flex-flow: column;
}

.nextend-bullet-bar div .n2-bullet {
  background: none !important;
  height: 1px !important;
  width: 13px !important;
  padding: 0 !important;
  position: relative;
  display: flex !important;
  margin-bottom: 20px !important;
}
.nextend-bullet-bar div .n2-bullet.n2-active{
background: #fff !important;
}
.nextend-bullet-bar div .n2-active::after{
  color: #fff !important;
}

.nextend-bullet-bar div .n2-bullet::after {
  position: absolute !important;
  right: -20px;
  top: -10px;
  content: "1" !important;
  display: block !important;
  color: #828282;
}

.nextend-bullet-bar div:nth-child(2) .n2-bullet::after {
  content: "2" !important;
}

.nextend-bullet-bar div:nth-child(3) .n2-bullet::after {
  content: "3" !important;
}

.has-dates li a{
  
}
.has-dates li a time{
  font-size: 16px;
}

/* footer{
  border-top: 1px solid #4F4F4F;
} */



/* フッター */

.site-footer {
  /* margin-top: 80px; */
  margin-top: 0;
  padding: 40px 0;
  border-top: 1px solid #4F4F4F;
}


/* SP */

@media (max-width: 1024px) {

  .site-footer{
    /* margin-left: -60px; */
  }
  .top-cat-list{
    flex-flow: column;
    align-items: center;
  }
  .wp-block-latest-posts__list li{
    width: calc(100%/1);
    /* display: flex; */
  }
  .wp-block-latest-posts__featured-image{
    margin-right: 14px;
    width: 45%;
    float: left;
  }
  .wp-block-latest-posts__featured-image img{
    max-width: 100% !important;
  }
  .wp-block-latest-posts__post-title{
    display: flex;
    flex-flow: column;
  }
  

}

.c-image-heading {
  margin: 0;
  padding: 0;
}

.c-image-heading img {
  display: block;
  max-width: 100%;
  height: auto;
}

.c-image-heading.alignleft img {
  margin-left: 0;
  margin-right: auto;
}

.c-image-heading.aligncenter img {
  margin-left: auto;
  margin-right: auto;
}

.c-image-heading.alignright img {
  margin-left: auto;
  margin-right: 0;
}

/* 横並びコンテンツ用仕切り */

.flex-contents-line{
  border-right: 1px solid #fff;
  padding-right: 23px;
}

/* ボタン調整用 */
.wp-block-button__link{
  line-height: 1;
}

/* フォント設定用 */
.fs-roboto{
  font-family: Roboto;
}
.fs-times{
  font-family: 'Times New Roman', serif;
}
.bg-style01{
  color: #828282;
  mix-blend-mode: color-dodge;
  position: relative;
}
.bg-style01 {
  
}

/* 発光レイヤー */
/* .bg-style01::before {
  content: attr(data-text)"";
  position: absolute;
  inset: 0;
  color: #fff;
  mix-blend-mode: color-dodge;
  pointer-events: none;
  opacity: 0.8;
} */

.bg-style02{
  background: #828282;
  mix-blend-mode: color-dodge;
}

/* スマホ、PC表示設定 */
.showSP {
  display: none;
}

.showPC {
  display: block;
}
.showSP_important {
  display: none !important;
}

.showPC_important {
  display: block !important;
}

@media (max-width: 1120px) {
  .showSP {
    display: block;
  }

  .showPC {
    display: none;
  }
    .showSP_important {
    display: block !important;
  }

  .showPC_important {
    display: none !important;
  }
}




@media (max-width: 1120px) {
  .site-shell {
    padding-left: 0;
    padding-right: 0;
    
  }
  #media{
    padding: 0 15px;
  }
  


  .c-hamburger__content {
    z-index: 100;
    padding-left: 17%;
    padding-right: 0;
  }
  .c-hamburger__content p{
    font-size: 18px !important;
        margin-block-start: 10px !important;
  }

  .site-main {
    /* padding: 0; */
    width: 83%;
    border-right: none;
  }
  .left-contents{
    width: 17%;
  }
  .footer-contact{
    /* padding-left: 16px; */
    /* padding-right: 16px; */
  }

  div#n2-ss-2 .n2-ss-control-bullet {
    display: none !important;
  }
  .anker-about,.anker-media{
    padding-left: 16px;
    padding-right: 16px;
  }

  .anker-about::after,.anker-media::after {
    display: none;
  }
}

/* ContactForm7 */
.c-contact-form {
  color: #111;
  font-size: 16px;
  line-height: 1.75;
}

.c-contact-form__notes {
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.c-contact-form__notes li {
  position: relative;
  padding-left: 20px;
  font-weight: 700;
}

.c-contact-form__notes li::before {
  content: "■";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 12px;
}

.c-contact-form__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px 32px;
  padding: 24px 0;
  border-top: 1px solid #cfd5dc;
}

.c-contact-form__row:first-of-type {
  border-top: 0;
}

.c-contact-form__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.c-contact-form__label {
  color: var(--1A1A1A, #1A1A1A);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.c-contact-form__required {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 35px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #ff1f2d;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.c-contact-form__body {
  min-width: 0;
}

.c-contact-form__input,
.c-contact-form__textarea {
  width: 100%;
  border: 1px solid #bfc5cb;
  background: #fff;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 16px;
  line-height: 1.5;
  box-sizing: border-box;
}
.c-contact-form__name-col p{
  display: flex;
  align-items: center;
  width: 100%;

}
.c-contact-form__name-col p .c-contact-form__sub-label{
  padding: 0 10px;
  display: block;
      width: 60px;
      font-weight: 500;
}
.c-contact-form__name-col p .wpcf7-form-control-wrap{
  width: 100%;
}
.c-contact-form__head p{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.c-contact-form__acceptance{
  display: flex;
}
.wpcf7-form-control.wpcf7-acceptance{
  display: flex;
  padding: 0 10px;
}
.c-contact-form input[type="checkbox"]{
  padding: 0 10px;
}

.c-contact-form__textarea {
  min-height: 200px;
  resize: vertical;
}

.c-contact-form__name-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.c-contact-form__name-col {
  /* display: grid; */
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
}

/* .c-contact-form__sub-label {
  font-weight: 700;
} */

.c-contact-form__note {
  margin: 0 0 0;
  font-size: 14px;
}

.c-contact-form__radio .wpcf7-list-item {
  display: block;
  margin: 0 0 12px;
}

.c-contact-form__radio .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

.c-contact-form__radio .wpcf7-list-item-label {
  margin-left: 8px;
}

.c-contact-form__acceptance .wpcf7-list-item {
  margin: 0;
}

.c-contact-form__acceptance a {
  color: #005bbb;
  text-decoration: underline;
}

.c-contact-form__submit {
  margin-top: 40px;
  text-align: center;
}

.c-contact-form__submit-btn {
  min-width: 220px;
  padding: 16px 32px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.c-contact-form__submit-btn:hover {
  opacity: 0.8;
}

.c-contact-form input[type="radio"],
.c-contact-form input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  vertical-align: middle;
  accent-color: #F31559;
}

.c-contact-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 14px;
}

.c-contact-form .wpcf7-spinner {
  display: block;
  margin: 16px auto 0;
}

/* ラジオ全体 */
.c-contact-form__radio .wpcf7-list-item {
  display: block;
  margin: 0 0 0px;
}

.c-contact-form__radio .wpcf7-list-item:last-child {
  margin-bottom: 0;
}

/* label をクリック領域にする */
.c-contact-form__radio .wpcf7-list-item label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-left: 30px;
  cursor: pointer;
  line-height: 1.5;
}

/* 元のradioを消す */
.c-contact-form__radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 外側の円 */
.c-contact-form__radio .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #b9b9b9;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-sizing: border-box;
}

/* 選択時の内側の円 */
.c-contact-form__radio .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left:4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #F31559;
  transform: translateY(-50%) scale(0);
  transition: transform 0.2s ease;
}

/* checked時 */
.c-contact-form__radio input[type="radio"]:checked + .wpcf7-list-item-label::before {
  border-color: #b9b9b9;
}

.c-contact-form__radio input[type="radio"]:checked + .wpcf7-list-item-label::after {
  transform: translateY(-50%) scale(1);
}

/* テキスト */
.c-contact-form__radio .wpcf7-list-item-label {
  display: inline-block;
  font-size: 16px;
  color: #111;
}

/* hover */
.c-contact-form__radio .wpcf7-list-item label:hover .wpcf7-list-item-label::before {
  border-color: #F31559;
}

/* focus-visible */
.c-contact-form__radio input[type="radio"]:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid rgba(11, 134, 255, 0.35);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .c-contact-form__row {
    grid-template-columns: 1fr;
    gap: 0px;
    padding: 20px 0;
  }
  .c-contact-form__name-col p .c-contact-form__sub-label{
    font-size: 14px;
  }
  .c-contact-form__radio .wpcf7-list-item-label{
    font-size: 14px;
  }
  .c-contact-form{
    font-size: 14px;
  }
  .c-contact-form__body p{
        margin: 0
  }
  .c-contact-form__submit-btn{
    min-width: auto;
  }
  .c-contact-form__acceptance,.c-contact-form__note{
    font-size: 10px;
  }
  .c-contact-form__label{
    font-size: 12px;
  }
  .c-contact-form__required{
    font-size: 10px;
    min-height: auto;
  }

  .c-contact-form__head {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .c-contact-form__name-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .c-contact-form__name-col {
    grid-template-columns: 36px 1fr;
  }

  .c-contact-form__submit-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ABOUT */

.about-status01{
  max-width: 170px;
  width: 100%;
}
.about-status-map{
  width: 100%;
}
.about-maptext01{
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.about-maptext01 a{
  text-decoration: underline;
}

/* DIVISION */

.division-list{
    border-bottom: 1px solid #4f4f4f;
    padding-bottom: 20px;
    margin-bottom: 80px;
}
.division-list p{
  padding: 0 20px;
  display: flex;
  flex-flow: column;
  align-items: center;
  position: relative;
}
@media (max-width: 767px) {
  .division-list p{
    padding: 0 4px;
    font-size: 10px;
  }
  .division-list p.carrent::after{
    height: 40px !important;
  }
  .division-title01::before{
    display: none;
  }
}
.division-list p.carrent::after{
  position: absolute;
  left: 50%;
  bottom: -282%;
  content: "";
  display: block;
  width: 1px;
  height: 72px;
  background-color: #fff;
}
.division-title01{
  position: relative;
}
.division-title01::before{
  position: absolute;
  content: "";
  width: 62px;
  height: 1px;
  background-color: #fff;
    left: -74px;
    top: 24px;
}

.edit-contents-divisions *{
  margin-bottom: 32px;
}
.edit-contents-divisions .dividions-cat{
  padding: 0 6px;
}
.edit-contents-divisions .divisions-title01{
color: #FFF;
leading-trim: both;
text-edge: cap;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-size: 80px;
font-style: normal;
font-weight: 300;
line-height: 80px; /* 100% */
}

.edit-contents-divisions .divisions-title02{
color: #FFF;
leading-trim: both;
text-edge: cap;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
font-family: "Noto Sans JP";
font-size: 80px;
font-style: normal;
font-weight: 500;
line-height: 80px; /* 100% */
border-bottom: none;
}
@media (max-width: 768px) {
  .edit-contents-divisions .divisions-title01{
    font-size: 22px;
    line-height: normal;
  }
  .edit-contents-divisions .divisions-title02{
    font-size: 28px;
    line-height: normal;
  }
}
.edit-contents-divisions h2{
  border-bottom: 1px solid #fff;
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 32px;
}

.divisions-img01{
  margin: 0 -5vw;
}
.divisions-img01 img{
  width: 100%;
}


.division-experience{

}

/* RECRUIT */

.recruit-captions01{
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
}

.recruit-list01 p:first-child{
  border: 1px solid #fff;
  width: 60px;
  margin-bottom: 12px;
}

.recruit-list02 p:first-child{
  border: 1px solid #828282;
  width: 60px;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .recruit-list02 p:first-child,.recruit-list01 p:first-child{
  flex: 1;
  }
  .recruit-list02 p,.recruit-list01 p{
    flex: 2;
  }
}

/* FROM */

.contact-form-status p{
  position: relative;
  display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    align-items: center;
}
.contact-form-status p::before{
  content: "";
  background-color: #4f4f4f;
  width: 15px;
  height: 15px;
  margin-bottom: 10px;

}

.contact-form-status p.carrent::before{
background-color: #fff;
}

/* 投稿・固定 */
.post-contents *{
  margin-bottom: 20px;
}
.wp-text{
  flex: 1;
}

/* 幅調整 */

.top-tit-plpr-01{
  padding: 0 8px;
}
.p0{
  padding: 0 5px !important;
}
.gap0{
  gap: 0 !important;
}


.wp-block-separator{
  border-top: 1px solid;
}
hr.dotted {
    border: none;
    border-top: 2px dotted #bdbdbd;
}
hr.short{
    width: 60px;
    border: none;
    border-top: 1px solid #bdbdbd;
}

.display-none{
  display: none !important;
}

/* Slide */
.slick-next{
  right: 15px !important;
  z-index: 10;
  background-image: url(../img/slick-next.svg) !important;
  width: 32px !important;
  height: 32px !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.slick-next::before{
  display: none;
}
.slick-prev{
  left: 15px !important;
  z-index: 10;
  background-image: url(../img/slick-prev.svg) !important;
  width: 32px !important;
  height: 32px !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}
.slick-prev::before{
  display: none;
}
.slick-dots{
  /* background: #fff; */
  left: auto;
  right: -12px;
  top: 15%;
  bottom: auto !important;
  z-index: 1000;
  width: auto !important;
  display: flex !important;
  flex-flow: column;
}
.slick-dots li button::before{
  display: none;
}
.slick-dots li{
  width: 13px !important;
  height: 1px !important;
  margin-bottom: 20px !important;
  /* background-color: #fff; */
}
.slick-dots li::after {
  position: absolute !important;
  right: -20px;
  top: -10px;
  content: "1" !important;
  display: block !important;
  color: #828282;
}
.slick-dots li::after{
  position: absolute !important;
  right: -20px;
  top: -6px;
  margin-top: -4px;
  content: "1" !important;
  display: block !important;
  color: #828282;
  text-edge: cap;
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}
.slick-dots li:nth-child(2)::after {
  content: "2" !important;
}

.slick-dots li:nth-child(3)::after {
  content: "3" !important;
}
.slick-dots li.slick-active{
  background-color: #fff;
}
.slick-dots li.slick-active::after{
  color: #fff;
}
.c-media-slider{
  z-index: 0;
}

.c-media-slider-thumb {
  display: flex;
  /* justify-content: center; */
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.c-media-slider-thumb__item {
  flex: 0 0 auto;
  width: 80px;
  margin: 0 0 0 !important;
  cursor: pointer;
  /* flex: 1; */
}
.c-media-slider__item{
  margin-bottom: 0 !important;
}

.c-media-slider-thumb__image,
.c-media-slider-thumb__video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  opacity: 0.45;
  transition: opacity 0.2s ease;
  margin-bottom: 0 !important;
}

.c-media-slider-thumb__item.is-current .c-media-slider-thumb__image,
.c-media-slider-thumb__item.is-current .c-media-slider-thumb__video {
  opacity: 1;
}
.slick-slider{
  margin: 0 -5vw;
}

.js-media-slider{
  margin-bottom: 0 !important;
}
.c-media-slider__image{
  margin-bottom: 0 !important;
}

@media (max-width: 768px) {
  .c-media-slider-thumb{
    display: none;
  }
  .c-media-slider-thumb__item{
    width: 16vw;
  }
}


@media (max-width: 1120px) {
  .slick-dots{
    display: none !important;
  }
}



/* =========================
   Base utilities
========================= */

.lh-100{line-height: 100%;}

.gap0{
  gap: 0 !important;
}

.fw700{ font-weight: 700 !important;}
.fw600{ font-weight: 600 !important;}
.fw500{ font-weight: 500 !important;}
.fw400{ font-weight: 400 !important;}
.fw300{ font-weight: 300 !important;}

.h-0 { height: 0 !important; }
.h-10 { height: 10px !important; }
.h-15 { height: 15px !important; }
.h-20 { height: 20px !important; }
.h-24 { height: 24px !important; }
.h-30 { height: 30px !important; }
.h-40 { height: 40px !important; }
.h-48 { height: 48px !important; }
.h-60 { height: 60px !important; }
.h-80 { height: 80px !important; }

.mt-0 { margin-top: 0 !important; }
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-15 { margin-top: 15px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-24 { margin-top: 24px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }


/* =========================
   md: 768px+
========================= */
@media (max-width: 768px) {
  .md-h-0 { height: 0 !important; }
  .md-h-10 { height: 10px !important; }
  .md-h-15 { height: 15px !important; }
  .md-h-20 { height: 20px !important; }
  .md-h-24 { height: 24px !important; }
  .md-h-30 { height: 30px !important; }
  .md-h-40 { height: 40px !important; }
  .md-h-48 { height: 48px !important; }
  .md-h-60 { height: 60px !important; }
  .md-h-80 { height: 80px !important; }

  .md-mt-0 { margin-top: 0 !important; }
  .md-mt-8 { margin-top: 8px !important; }
  .md-mt-10 { margin-top: 10px !important; }
  .md-mt-15 { margin-top: 15px !important; }
  .md-mt-20 { margin-top: 20px !important; }
  .md-mt-24 { margin-top: 24px !important; }
  .md-mt-30 { margin-top: 30px !important; }
  .md-mt-40 { margin-top: 40px !important; }

  .md-mb-0 { margin-bottom: 0 !important; }
  .md-mb-8 { margin-bottom: 8px !important; }
  .md-mb-10 { margin-bottom: 10px !important; }
  .md-mb-15 { margin-bottom: 15px !important; }
  .md-mb-20 { margin-bottom: 20px !important; }
  .md-mb-24 { margin-bottom: 24px !important; }
  .md-mb-30 { margin-bottom: 30px !important; }
  .md-mb-40 { margin-bottom: 40px !important; }

  .md-text-left { text-align: left !important; }
  .md-text-center { text-align: center !important; }
  .md-text-right { text-align: right !important; }
}


/* =========================
   lg: 1024px+
========================= */
@media (min-width: 1024px) {
  .lg-h-20 { height: 20px !important; }
  .lg-h-40 { height: 40px !important; }
  .lg-h-60 { height: 60px !important; }
  .lg-h-80 { height: 80px !important; }

  .lg-mt-15 { margin-top: 15px !important; }
  .lg-mt-20 { margin-top: 20px !important; }
  .lg-mt-30 { margin-top: 30px !important; }
  .lg-mt-40 { margin-top: 40px !important; }

  .lg-text-left { text-align: left !important; }
  .lg-text-center { text-align: center !important; }
  .lg-text-right { text-align: right !important; }
}



/* =========================
   sp only: 767px以下
========================= */
@media (max-width: 767px) {
  .sp-h-0 { height: 0px !important; }
  .sp-h-5 { height: 5px !important; }
  .sp-h-10 { height: 10px !important; }
  .sp-h-11 { height: 15px !important; }
  .sp-h-12 { height: 15px !important; }
  .sp-h-13 { height: 15px !important; }
  .sp-h-14 { height: 15px !important; }
  .sp-h-15 { height: 15px !important; }
  .sp-h-16 { height: 15px !important; }
  .sp-h-17 { height: 15px !important; }
  .sp-h-18 { height: 15px !important; }
  .sp-h-19 { height: 15px !important; }
  .sp-h-20 { height: 20px !important; }
  .sp-h-21 { height: 15px !important; }
  .sp-h-22 { height: 15px !important; }
  .sp-h-23 { height: 15px !important; }
  .sp-h-24 { height: 15px !important; }
  .sp-h-25 { height: 15px !important; }
  .sp-h-26 { height: 15px !important; }
  .sp-h-27 { height: 15px !important; }
  .sp-h-28 { height: 15px !important; }
  .sp-h-29 { height: 15px !important; }
  .sp-h-30 { height: 30px !important; }
  .sp-h-40 { height: 40px !important; }

  .sp-mt-10 { margin-top: 10px !important; }
  .sp-mt-15 { margin-top: 15px !important; }
  .sp-mt-20 { margin-top: 20px !important; }
  .sp-mt-30 { margin-top: 30px !important; }

  .sp-text-left { text-align: left !important; }
  .sp-text-center { text-align: center !important; }
  .sp-text-right { text-align: right !important; }

  .sp-fs-10{font-size: 10px !important;}
  .sp-fs-11{font-size: 11px !important;}
  .sp-fs-12{font-size: 12px !important;}
  .sp-fs-13{font-size: 13px !important;}
  .sp-fs-14{font-size: 14px !important;}
  .sp-fs-15{font-size: 15px !important;}
  .sp-fs-16{font-size: 16px !important;}
  .sp-fs-17{font-size: 17px !important;}
  .sp-fs-18{font-size: 18px !important;}
  .sp-fs-19{font-size: 19px !important;}
  .sp-fs-20{font-size: 20px !important;}
  .sp-fs-21{font-size: 21px !important;}
  .sp-fs-22{font-size: 22px !important;}
  .sp-fs-23{font-size: 23px !important;}
  .sp-fs-24{font-size: 24px !important;}
  .sp-fs-25{font-size: 25px !important;}
  .sp-fs-26{font-size: 26px !important;}
  .sp-fs-27{font-size: 27px !important;}
  .sp-fs-28{font-size: 28px !important;}

  .sp-fs-50{font-size: 50px !important;}
}

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }

@media (max-width: 767px) {
  .sp-justify-center { justify-content: center !important; }
}


/* ===== margin utility (5px刻み 0〜100) ===== */

.m0 { margin: 0 !important; }
.m2 { margin: 2px !important; }
.m5 { margin: 5px !important; }
.m10 { margin: 10px !important; }
.m15 { margin: 15px !important; }
.m20 { margin: 20px !important; }
.m25 { margin: 25px !important; }
.m30 { margin: 30px !important; }
.m35 { margin: 35px !important; }
.m40 { margin: 40px !important; }
.m45 { margin: 45px !important; }
.m50 { margin: 50px !important; }
.m55 { margin: 55px !important; }
.m60 { margin: 60px !important; }
.m65 { margin: 65px !important; }
.m70 { margin: 70px !important; }
.m75 { margin: 75px !important; }
.m80 { margin: 80px !important; }
.m85 { margin: 85px !important; }
.m90 { margin: 90px !important; }
.m95 { margin: 95px !important; }
.m100 { margin: 100px !important; }

/* top */
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt35 { margin-top: 35px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }
.mt55 { margin-top: 55px !important; }
.mt60 { margin-top: 60px !important; }
.mt65 { margin-top: 65px !important; }
.mt70 { margin-top: 70px !important; }
.mt75 { margin-top: 75px !important; }
.mt80 { margin-top: 80px !important; }
.mt85 { margin-top: 85px !important; }
.mt90 { margin-top: 90px !important; }
.mt95 { margin-top: 95px !important; }
.mt100 { margin-top: 100px !important; }

/* bottom */
.mb0 { margin-bottom: 0 !important; }
.mb5 { margin-bottom: 5px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb15 { margin-bottom: 15px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb25 { margin-bottom: 25px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb35 { margin-bottom: 35px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb45 { margin-bottom: 45px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb55 { margin-bottom: 55px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb65 { margin-bottom: 65px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb75 { margin-bottom: 75px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb85 { margin-bottom: 85px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb95 { margin-bottom: 95px !important; }
.mb100 { margin-bottom: 100px !important; }

/* left */
.ml0 { margin-left: 0 !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.ml20 { margin-left: 20px !important; }
.ml25 { margin-left: 25px !important; }
.ml30 { margin-left: 30px !important; }
.ml35 { margin-left: 35px !important; }
.ml40 { margin-left: 40px !important; }
.ml45 { margin-left: 45px !important; }
.ml50 { margin-left: 50px !important; }
.ml55 { margin-left: 55px !important; }
.ml60 { margin-left: 60px !important; }
.ml65 { margin-left: 65px !important; }
.ml70 { margin-left: 70px !important; }
.ml75 { margin-left: 75px !important; }
.ml80 { margin-left: 80px !important; }
.ml85 { margin-left: 85px !important; }
.ml90 { margin-left: 90px !important; }
.ml95 { margin-left: 95px !important; }
.ml100 { margin-left: 100px !important; }

/* right */
.mr0 { margin-right: 0 !important; }
.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr25 { margin-right: 25px !important; }
.mr30 { margin-right: 30px !important; }
.mr35 { margin-right: 35px !important; }
.mr40 { margin-right: 40px !important; }
.mr45 { margin-right: 45px !important; }
.mr50 { margin-right: 50px !important; }
.mr55 { margin-right: 55px !important; }
.mr60 { margin-right: 60px !important; }
.mr65 { margin-right: 65px !important; }
.mr70 { margin-right: 70px !important; }
.mr75 { margin-right: 75px !important; }
.mr80 { margin-right: 80px !important; }
.mr85 { margin-right: 85px !important; }
.mr90 { margin-right: 90px !important; }
.mr95 { margin-right: 95px !important; }
.mr100 { margin-right: 100px !important; }

/* x軸 */
.mx0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx5 { margin-left: 5px !important; margin-right: 5px !important; }
.mx10 { margin-left: 10px !important; margin-right: 10px !important; }
.mx15 { margin-left: 15px !important; margin-right: 15px !important; }
.mx20 { margin-left: 20px !important; margin-right: 20px !important; }
.mx25 { margin-left: 25px !important; margin-right: 25px !important; }
.mx30 { margin-left: 30px !important; margin-right: 30px !important; }
.mx35 { margin-left: 35px !important; margin-right: 35px !important; }
.mx40 { margin-left: 40px !important; margin-right: 40px !important; }
.mx45 { margin-left: 45px !important; margin-right: 45px !important; }
.mx50 { margin-left: 50px !important; margin-right: 50px !important; }

/* y軸 */
.my0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.my10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.my30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.my35 { margin-top: 35px !important; margin-bottom: 35px !important; }
.my40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.my45 { margin-top: 45px !important; margin-bottom: 45px !important; }
.my50 { margin-top: 50px !important; margin-bottom: 50px !important; }