@charset "UTF-8";
/* メインビジュアル　キャッチ共通
--------------------------------------- */
/* なし */


/* 色反転パターン
--------------------------------------- */
/* なし */


/* 特定のhoverアニメーション処理
--------------------------------------- */
/* なし */


/* メインビジュアル
--------------------------------------- */
.of--brand .mod--mv-block .mv--inner.pic-main {
  background-image: url(../Website/images/keyvisual-pc-210212.jpg);
/*  background-image: url(../images/static/mv_brand_site_a.jpg);*/
}

.mv--inner.pic-main .mv--sub-description {
  font-size: 1.2rem;
}

.mv--button .anker, .catch--button .anker {
  font-size: 1.2rem;
}

@media screen and (min-width: 768px),
print {
  .mod--mv-block .mv--inner[class*=pic-] {
    background-position: bottom;
  }

    .mv--inner.pic-main .mv--sub-description {
    font-size: 1.8rem;
  }

    .mv--button .anker, .catch--button .anker {
    font-size: 1.6rem;
  }
  
}

/* キャッチ
--------------------------------------- */
.of--brand .mod--catch-block .catch--inner.pic-main {
  background-image: url(../images/static/catch_brand_site_main_sp.jpg);
}

.of--brand .mod--catch-block .catch--img-block.pic-01 {
  background-image: url(../images/static/catch_brand_site_01_sp.jpg);
}

.of--brand .mod--catch-block .catch--img-block.pic-02 {
  background-image: url(../images/static/catch_brand_site_02-1_sp.jpg);
}

.of--brand .mod--catch-block .catch--img-block.pic-03 {
  background-image: url(../images/static/catch_brand_site_03_sp_210210.jpg);
}

.catch--label{
  background-color: #fff;
}

@media screen and (min-width: 768px),
print {
  .of--brand .mod--catch-block .catch--inner.pic-main {
    background-image: url(../images/static/catch_brand_site_main.jpg);
    background-position: -170px 50%;
  }

  .of--brand .mod--catch-block .catch--img-block.pic-01 {
    background-image: url(../images/static/catch_brand_site_01.jpg);
  }

  .of--brand .catch--inner .mod-link.mv--link .anker-none,
  .of--brand .catch--inner .mod-link.catch--link .anker-none {
    padding-left: 1.4em;
  }

  .of--brand .mod--catch-block .catch--img-block.pic-02 {
    background-image: url(../images/static/catch_brand_site_02-1.jpg);
    background-position: 100% 0;
  }

  .of--brand .mod--catch-block .catch--img-block.pic-03 {
    background-image: url(../images/static/catch_brand_site_03_210210.jpg);
    background-position: 50%;
  }
}

  
.of--cmj-corporate-ict a span{ 
  position: absolute;
  z-index: 0;
  background: #cc0001;
  color: #fff;
  padding: 7px 10px;
  font-size: 1.4rem;
  letter-spacing: 0;
  border-radius: 5px;
  left: 8%;
  bottom: 13%;
  line-height: 1;
}

@media screen and (min-width: 767px),
print {
  .of--cmj-corporate-ict a span{ 
    right: 6.5%;
    top: 16%;
    left: auto;
    bottom: auto;
  }
}

@media screen and (min-width: 1024px),
print {
  .catch--sub-description {
    font-size: 2.1rem;
  }

  .catch--conts-block {
    padding: 40px;
  }

  .mod--catch-block .catch--inner:not(.of--flow-reverse) .catch--conts-block,
  .mod--catch-block .catch--inner.of--flow-reverse .catch--conts-block {
    padding: 40px;
    background-color: #eee;
  }

  .mod--catch-block {
    border-top: none;
    overflow: hidden;
    max-height: 480px;
  }

  .mod--catch-block.of--main .catch--heading {
    font-size: 3.6rem;
  }

  .mod--catch-block .catch--inner.pic-main {
    padding-bottom: 480px;
  }

  .mod--catch-block .catch--img-block[class*=pic-] {
    min-height: auto;
    /* min-width: 465px; */
    padding-bottom: 400px;
  }

  .mod--catch-block .catch--img-block .img {
    max-width: none;
  }

  .mod--catch-block .catch--conts-block.of--nor-lock {
    background-color: #fff;
    flex: 1 0 calc(100% / 2);
    position: relative;
  }

  .mod--catch-block .catch--conts-block.of--wid-lock {
    background-color: #fff;
    flex: 1 0 50%;
    max-width: 480px;
    min-width: 375px;
    position: relative;
  }

  .mod--catch-block .catch--inner.pic-main::after {
    background: -moz-linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 70%);
    background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0)70%);
    background: linear-gradient(270deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 70%);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
  }
}
  

@media screen and (max-width: 1023px),
print {

.catch--label {
    font-size: 1.4rem;
    line-height: 1.5;
}

  .catch--sub-description {
    font-size: 1.4rem;
  }

  .catch--conts-block {
    padding: 15px !important;
  }

/*.of--pc,
[class].of--pc {
  display: none;
}*/

  .of--sp-alpha-block .catch--conts-block {
    background-color: rgba(0, 0, 0, .5) !important;
    bottom: 0 !important;
    color: #fff !important;
    display: block !important;
    flex: auto !important;
    max-width: none !important;
    min-width: auto !important;
    position: absolute !important;
    top: auto !important;
    width: 100% !important;
  }
}



/* グローバルナビゲーション（SPのみ）
--------------------------------------- */
/* なし */


/* パネルデザイン
--------------------------------------- */
.pnl--anime-hover .pnl[class*=pic-] {
  padding-top: 82.5%;
}

.bg-cover .pnl--inr-wraper {
  margin: 0 10px 10px;
  display: inline-block;
  width: calc(100% - 20px);
}

@media screen and (min-width: 768px),
print {
  .bg-cover .pnl--inr-wraper {
    margin: 0;
    width: auto;
  }
}

/* お知らせ
--------------------------------------- */
/* なし */

/* アンカーリンク（トップページ専用）
--------------------------------------- */
.item-align-center .list{
  justify-content: center;
  display: flex;
}

.of-border-none{
  border: none;
}
.of-border-none .list{
  padding: 15px 11px 16px;
}

/* メディアコンポーネントリンクあり
　　hover処理追加
--------------------------------------- */
/*.mod-media .media:focus img, .mod-media .media:hover img{
  opacity: .7;
}

.mod-media img{
    transition: .2s opacity ease-out;
}*/

/* メインビジュアルコンポーネント */

/* KeyVisual Sp disiplay:relative */
.mod-carousel .keyvisual-box-content {
  position: relative;
  background-color: #1a1a1a;
  margin-top: -100px;
}
.mod-carousel .keyvisual-box-content .keyvisual-icon {
  font-size: 1.2rem;
  padding: 6px;
}
.mod-carousel .keyvisual-box-content .keyvisual-hdg {
  display: block;
}  
.mod-carousel .keyvisual-box-content .keyvisual-hdg .of--complement {
  font-size: 1.6rem;
}  

@media screen and (min-width:767px){
  .mod-carousel .keyvisual-box-content {
    position: absolute;
    background-color: inherit;
    margin-top: auto;
    left: 50%;
    top: 25%;
    padding: 20px 40px;
    transform: translate(-50%, -25%);
  }
}

@media screen and (min-width:1239px) {
  .keyvisual-hdg {
    font-size: 4rem;
  }
  
}