/* Setting
=============================================== */
:root{
  --info-category-border-color: var(--main-color);
  --info-category-bg-color: #fff;
  --info-category-font-color: var(--main-color);
}

.lg_font {
  font-size: 22px;
  @media (max-width: 767px){
    font-size: 16px;
  }
}

.c-column-list {
  @media (min-width: 768px){
    column-count: 2;
    column-gap: 20px;
    overflow: auto;
    max-height: 200px;
  }
}

/* ///// MAIN VISUAL ////////////////////////// */
.swiper {
  min-height: 700px;
  max-height: 900px;
  width: 100%;
  height: calc(100vh - 110px);
  position: relative;
  overflow: hidden;
  @media (max-width: 767px){
    min-height: 500px;
    max-height: 500px;
  }
}
.slide-caption {
  z-index: 3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 58px;
  font-size: 90px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  color: #fff;
  @media (max-width: 767px){
    font-size: 32px;
  }
}
.mv-slide__overlay {
  z-index: 2;
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 91, 172, 0.2);
}
.swiper-wrapper {
  z-index: 1;
  display: flex;
}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* //////////////////////////////////////////// */

/* SECTION PADDING
--------------------------- */
/* -- PC -- */
@media (min-width: 768px) {
  section.ContentArea .ContentBody{
    padding: 120px 10px !important;
    max-width: 1200px;
  }
}
/* -- SP -- */
@media (max-width: 767px) {
  section.ContentArea .ContentBody{
    padding: 50px 10px !important;
  }
}

/* INTRO
--------------------------- */
.HeadingBox_.intro h1{
  color: var(--main-color);
}
p.intro {
  line-height: 1.8em;
  font-size: 26px;
  @media (max-width: 980px){
    text-align: justify !important;
  }
  @media (max-width: 767px){
    text-align: justify;
    font-size: 16px;
  }
}

/* WHAT TIES IS
--------------------------- */
.BgWhatTiesIs{
  background-image: url(/img/fm/ties01/home/bg-what-ties-is.webp) ;
  background-repeat: no-repeat;
  background-size: cover;
}
.what_ties_is_text ul {
  margin: 0 auto 50px;
  margin-bottom: 50px;
  max-width: 1100px;
  @media (max-width: 767px){
    margin-bottom: 20px;
    width: 100%;
  }
}
.what_ties_is_text li {
  border-radius: 50px;
  margin-bottom: 20px;
  padding: 18px;
  background-color: var(--main-color);
  text-align: center;
  font-size: 28px;
  color: #fff;
  list-style-type: none;
  @media (max-width: 980px){
    font-size: 20px;
  }
  @media (max-width: 767px){
    font-size: 16px;
  }
}
.what_ties_is_text p {
  @media (max-width: 980px){
    text-align: left !important;
  }
  @media (max-width: 767px){
    text-align: left;
  }
}

/* SERVICE MENU
--------------------------- */
@media (max-width: 767px) {
  .ContentArea .ContentBody{
    padding: 30px 10px;
  }
}

.service_menu .PB_.Col5_{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.service_menu .CB_{
  float: none;
  width: 232px !important;
  border: 1px solid gray;
  margin: 0;
  padding: 0;
  height: 200px;
}
/* 横幅が1200px以下になったら3列×2行に */
@media (max-width: 1200px) {
  .service_menu .PB_.Col5_{
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
    max-width: 650px;
  }
  .service_menu .CB_{
    width: 210px !important;
  }
}
@media (max-width: 767px) {
  .service_menu .PB_.Col5_ {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
  }
  .service_menu .CB_ {
    flex: 0 1 calc(50% - 5px);
    max-width: calc(50% - 5px);
    height: 156px;
  }
  .service_menu .CB_:nth-child(5) {
    margin-right: 0;
  }
}

.service_menu .CB_ a{
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--gray);
  background-repeat: no-repeat;
  background-position: bottom 20px center;
  font-size: 14px;
  color: var(--font-color);
  @media (max-width: 767px) {
    background-size: 40px auto;
    font-size: 11px;
  }
}
.service_menu .CB_ a:hover{
  text-decoration: none;
}
.service_menu .CB_.cpr a:hover{
  background-color: #f0f7ff;
}
.service_menu .CB_.cbooth a:hover{
  background-color: #fef4ed;
}
.service_menu .CB_.cds a:hover{
  background-color: #f8fff2;
}
.service_menu .CB_.ckt a:hover{
  background-color: #fef3f3;
}
.service_menu .CB_.cinfo a:hover{
  background-color: #fff9e9;
}
/* LOGO SIZE */
.service_menu .CB_ .HeadingBox_{
  padding: 15px 20px 0px;
}
.service_menu .CB_ img{
  display: block;
  width: auto;
  height: 60px;
  @media (max-width: 767px) {
    height: 40px;
  }
}
.service_menu .CB_ p{
  text-align: center;
}
/* 矢印 */
.service_menu .CB_.cpr a{
  background-image: url(/img/fm/ties01/home/service-link-arrow-c-pr.png);
}
.service_menu .CB_.cbooth a{
  background-image: url(/img/fm/ties01/home/service-link-arrow-c-booth.png);
}
.service_menu .CB_.cds a{
  background-image: url(/img/fm/ties01/home/service-link-arrow-c-ds.png);
}
.service_menu .CB_.ckt a{
  background-image: url(/img/fm/ties01/home/service-link-arrow-c-kt.png);
}
.service_menu .CB_.cinfo a{
  background-image: url(/img/fm/ties01/home/service-link-arrow-c-info.png);
}
@media (max-width: 767px) {
  .service_menu .CB_ {
    background-size: 40px auto;
  }
}

/* SERVICE
--------------------------- */
/* SECTION */
section.ContentArea .ContentBody.service_content {
  border-top: 2px solid gray;
  padding: 60px 10px !important;
  @media (max-width: 980px){
    padding: 60px 10px !important;
  }
  @media (max-width: 767px){
    padding: 30px 10px !important;
  }
}

.service_head {
  position: relative;
  margin: 0 auto 70px;
  padding-left: 520px;
  width: 1100px;
  @media (max-width: 1100px){
    padding-left: 400px;
    width: 960px;
  }
  @media (max-width: 980px){
    padding: 0;
    width: 100%;
  }
  @media (max-width: 767px){
    margin: 0;
    padding: 0;
  }

  .service_visual {
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0;
    width: 470px;
    @media (max-width: 1100px){
      width: 360px;
    }
    @media (max-width: 980px){
      position: relative;
      bottom: 0;
      left: 0;
      margin: 0 0 30px;
      width: 100%;
    }
    @media (max-width: 767px){
      position: relative;
      bottom: 0;
      left: 0;
      margin: 0 0 10px;
      width: 100%;
    }
  }
  > .HeadingBox_{
    margin-bottom: 45px;
    @media (max-width: 980px){
      margin-left: 30px;
      margin-bottom: 45px;
    }
    @media (max-width: 767px){
      margin-left: 10px;
      margin-bottom: 25px;
    }
  }
  > .HeadingBox_ img{
    height: 80px;
  }
  .service_target {
    position: relative;
    border: 1px solid gray;
    width: 580px;
    padding: 30px 30px 30px !important;
    @media (max-width: 1100px){
      width: 560px;
    }
    @media (max-width: 980px){
      margin-left: 30px;
    }
    @media (max-width: 767px){
      margin-left: 0;
      margin-bottom: 40px;
      padding: 20px 10px !important;
      width: 100%;
    }
  }
  .service_target .HeadingBox_ {
    position: absolute;
    top: -30px;
    left: 30px;
    display: inline-block;
    margin: 0;
    padding: 0 10px;
    background-color: #fff;
    @media (max-width: 767px){
      top: -15px;
      left: 15px;
    }
  }
  .service_target .HeadingBox_ h2{
    margin: 0;
  }
}
.service_head.u-left {
  padding-left: 0;

  .service_visual {
    left: 610px;
    @media (max-width: 1100px){
      left: 600px;
    }
    @media (max-width: 980px){
      left: 0;
    }
    @media (max-width: 767px){
      left: 0;
    }
  }
}

.service_detail {
  position: relative;
  margin: 0;
  padding: 50px;
  @media (max-width: 767px){
    padding: 40px 20px 20px;
  }
  .TextBox_.last-box {
    margin-bottom: 35px;
    @media (max-width: 767px){
      margin-bottom: 15px;
    }
  }
}
.service_detail::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 30px;
  width: 400px;
  height: 60px;
  background-image: url(/img/fm/ties01/home/service-bg-hdg.png);
  background-repeat: no-repeat;
  @media (max-width: 767px){
    top: -18px;
    left: 20px;
    background-size: 200px auto;
  }
}

/* C-PR ----- */
.service_content.cpr {
  border-top: 2px solid #02225e !important;
}
.service_detail.cpr::before {
  background-image: url(/img/fm/ties01/home/service-bg-hdg.png);
}
.service_detail.cpr {
  background-color: #f2f6ff;
}
.HeadingBox_.cpr {
  color: #02225e;
}
.service_detail.cpr a.BtnStyleA_ {
  background-color: #02225e;
}
/* C-BOOTH ----- */
.service_content.cbooth{
  border-top: 2px solid #813d16 !important;
}
.service_detail.cbooth::before {
  background-image: url(/img/fm/ties01/home/service-bg-hdg-c-booth.png);
}
.service_detail.cbooth {
  background-color: #fef4ed;
}
.HeadingBox_.cbooth {
  color: #813d16;
}
.service_detail.cbooth a.BtnStyleA_ {
  background-color: #813d16;
}
/* C-DS ----- */
.service_content.cds{
  border-top: 2px solid #3b5626 !important;
}
.service_detail.cds::before {
  background-image: url(/img/fm/ties01/home/service-bg-hdg-c-ds.png);
}
.service_detail.cds {
  background-color: #f8fff2;
}
.HeadingBox_.cds {
  color: #3b5626;
}
.service_detail.cds a.BtnStyleA_ {
  background-color: #3b5626;
}
/* C-KT ----- */
.service_content.ckt{
  border-top: 2px solid #f71f1f !important;
}
.service_detail.ckt::before {
  background-image: url(/img/fm/ties01/home/service-bg-hdg-c-kt.png);
}
.service_detail.ckt {
  background-color: #fef3f3;
}
.HeadingBox_.ckt {
  color: #f71f1f;
}
.service_detail.ckt a.BtnStyleA_ {
  background-color: #f71f1f;
}
/* C-INFOO ----- */
.service_content.cinfo{
  border-top: 2px solid #d2a028 !important;
}
.service_detail.cinfo::before {
  background-image: url(/img/fm/ties01/home/service-bg-hdg-c-info.png);
}
.service_detail.cinfo {
  background-color: #fff9e9;
}
.HeadingBox_.cinfo {
  color: #d2a028;
}
.service_detail.cinfo a.BtnStyleA_ {
  background-color: #fcc031;
}

/* リスト装飾 */
ul.service_detail_list {
  padding-left: 10px;
  line-height: 1.7;
  font-size: 22px;
  list-style-type: none;
  @media (max-width: 767px){
    line-height: 1.5;
    font-size: 18px;
  }
}
ul.service_detail_list li:not(:last-child){
  margin-bottom: 10px;
  @media (max-width: 767px){
    margin-bottom: 10px;
  }
}

/* Cinfoのイメージ図 */
/* PC */
@media (min-width: 768px){
  /* 高さ揃え*/
  .HeightSS.cinfo {
    display: flex;
    flex-wrap: wrap;
  }
  .HeightSS .CB_ { margin-bottom: 15px; }
  .HeightSS .CB_.ImageBox_ { text-align: left; }
  .HeightSS .CB_.ImageBox_ img { height: 230px; }
  /*
  .HeightSS .CB_.last-box { width: 100%; }
  */
}

/* MESSAGE
--------------------------- */
#message{
  position: relative;
  &::before{
    z-index: 1;
    content: "";
    width: 90%;
    height: 211px;
    position: absolute;
    left: 0;
    bottom: 130px;
    background-image: url(/img/fm/isw01/home/bg-message.png) ;
  }
  @media (max-width: 1440px){
    &::before{
      width: calc(50% + 520px);
    }
  }
  @media (max-width: 767px){
    &::before{
      bottom: 50px;
    }
  }
}
#message .ContentBody{
  padding-bottom: 440px !important;
  @media (max-width: 767px){
    padding-bottom: 220px !important;
  }
}
#message .HdgStyleE_ {
  margin-bottom: 100px;
  @media (max-width: 767px){
    margin-bottom: 30px;
  }
}

/* INFORMATION
--------------------------- */
.info_area {
  margin: 0 auto 30px;
  max-width: 1100px;
  @media (max-width: 767px) {
    width: 100%;
  }
}
ul#information_list {
  display: block;
  margin: 0 auto 30px;
  padding: 0;
  max-width: 1000px;
  width: 100%;
  list-style-type: none;
}
#information_list li {
  clear: both;
  border-bottom: 1px dotted gray;
  padding: 15px;
  overflow: hidden;
}
#information_list span {
  display: inline-block;
  padding: 3px 0;
  @media (max-width: 767px) {
    padding: 2px 0;
  }
}
#information_list .Date {
  width: 120px;
  font-weight: bold;
}
#information_list .Category{
  border-radius: 5px;
  border: 1px solid var(--info-category-border-color);
  width: 110px;
  background-color: var(--info-category-bg-color);
  text-align: center;
  font-size: 12px;
  color: var(--info-category-font-color);
  @media (max-width: 767px) {
    font-size: 11px;
  }
}
#information_list .Title {
  float: right;
  display: block;
  /* width: calc(100% - 270px); */
  width: calc(100% - 150px);
  @media (max-width: 767px) {
    float: none;
    margin-top: 5px;
    width: 100%;
  }
}
/* INSTA QR */
.insta_qr img {
  width: 300px;
}