/* -------------------------------------------------------------------------*/
/* MIXIN / ARGUMENT / COMMON CLASS
/* -------------------------------------------------------------------------*/
.default_ftz {
  font-size: 18px;
  font-size: 1.125rem; }
  @media only screen and (max-width: 640px) {
    .default_ftz {
      font-size: 16px;
      font-size: 1rem; } }

.text_out {
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap; }

.fixed_area {
  max-width: 1200px;
  margin: 0 auto; }

.tbl_scroll {
  overflow-x: auto; }
  .tbl_scroll table {
    min-width: 600px; }

.algn_L {
  text-align: left; }

.algn_C {
  text-align: center; }

.algn_R {
  text-align: right; }

/* -------------------------------------------------------------------------*/
/* -------------------------------------------------------------------------*/
/* TOP
/* -------------------------------------------------------------------------*/
#TP_cnt_wrp {
  padding-top: 73px; }
  @media only screen and (max-width: 640px) {
    #TP_cnt_wrp {
      padding-top: 0; } }

/* ----- MOVIE ----- */
#TP_movie_area {
  position: relative;
  padding-top: 47.29167%;
  background: url(../gif/loading-3.gif) center center no-repeat #000;
  overflow: hidden;
  /*
    &.backImage{
        background: url(../../img_top/mv_img.jpg) center top no-repeat #000;
        background-size: auto 100%;
    }
    */ }
  #TP_movie_area p {
    position: absolute;
    top: 40%;
    left: 50%;
    margin-top: 3%;
    display: block;
    width: 46.66667%;
    max-width: 560px;
    padding-top: 23.33333%;
    background: url(../png/mv_logo-3.png) 0 0 no-repeat;
    background-size: 100% auto;
    transform: translateY(-50%) translateX(-50%);
    font-size: 0;
    z-index: 1;
    display: none !important; }
  #TP_movie_area::after {
    display: block;
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background-image: url(../png/movie_mask-3.png); }
  #TP_movie_area #TP_mv_wrp {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; }
    #TP_movie_area #TP_mv_wrp video {
      display: block;
      position: relative;
      width: 100%;
      height: auto;
      max-width: 1320px;
      margin: 0 auto; }
  @media only screen and (min-width: 1320px) {
    #TP_movie_area {
      padding-top: 624px; }
      #TP_movie_area p {
        top: 120px;
        margin-top: 0;
        position: absolute;
        left: 50%;
        display: block;
        width: 46.66667%;
        max-width: 560px;
        padding-top: 23.33333%;
        background: url(../png/mv_logo-3.png) 0 0 no-repeat;
        background-size: 100% auto;
        transform: translateY(0) translateX(-50%);
        font-size: 0; } }
  @media only screen and (max-width: 640px) {
    #TP_movie_area p {
      top: 35%; } }

/* -- TP BTN -- */
#TP_kvBtn {
  width: 100%;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0.2% 0;
  text-align: center;
  line-height: 0;
  background-color: #d7def1; }
  #TP_kvBtn ul {
    list-style: none;
    display: table;
    border-collapse: separate;
    border-spacing: 15px;
    padding: 0;
    margin: 0 auto; }
  #TP_kvBtn li {
    padding: 0;
    margin: 0;
    display: table-cell; }
    #TP_kvBtn li a {
      display: block;
      border-radius: 3px;
      overflow: hidden;
      background-color: #fff; }
      #TP_kvBtn li a img {
        max-width: 100%;
        height: auto;
        transition: all 0.2s ease; }
      #TP_kvBtn li a:hover img {
        opacity: 0.7; }
  @media only screen and (max-width: 980px) {
    #TP_kvBtn ul {
      border-spacing: 5px; } }
  @media only screen and (max-width: 640px) {
    #TP_kvBtn {
      position: relative;
      padding: 10px; }
      #TP_kvBtn ul {
        display: block;
        font-size: 0; }
      #TP_kvBtn li {
        display: inline-block;
        width: 49%;
        margin: 0.5%; } }

/* -- TUBE -- */
/* ----- INNER WAPPER ----- */
.inner_wrp, #TP_topics .wrp, #TP_news .wrp, #TP_business .wrp, #TP_company .wrp {
  max-width: 1320px;
  padding: 0 40px;
  margin: 0 auto; }

@media only screen and (max-width: 980px) {
  .inner_wrp, #TP_topics .wrp, #TP_news .wrp, #TP_business .wrp, #TP_company .wrp {
    padding: 0 20px; } }

@media only screen and (max-width: 640px) {
  .inner_wrp, #TP_topics .wrp, #TP_news .wrp, #TP_business .wrp, #TP_company .wrp {
    padding: 0 10px; } }

/* ----- TOPICS ----- */
#TP_topics {
  background-color: #edf0f9;
  padding: 60px 0 30px; }
  @media only screen and (max-width: 640px) {
    #TP_topics {
      padding-top: 30px; } }

#TP_tpcs_slider a {
  outline: none !important; }

#TP_tpcs_slider > ul {
  list-style: none;
  margin: 0;
  padding: 0; }
  #TP_tpcs_slider > ul li {
    margin: 0 5px;
    padding: 0;
    max-width: 245px; }
    #TP_tpcs_slider > ul li > a {
      display: block;
      background-color: #fff;
      text-decoration: none;
      box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.05);
      margin-bottom: 5px; }
      #TP_tpcs_slider > ul li > a figure {
        margin: 0;
        padding: 0; }
        #TP_tpcs_slider > ul li > a figure img {
          max-width: 100%;
          height: auto; }
      #TP_tpcs_slider > ul li > a p {
        font-size: 14px;
        font-size: 0.875rem;
        margin: 0;
        padding: 10px; }

@media only screen and (max-width: 980px) {
  #TP_tpcs_slider {
    padding: 0 20px; } }

/* ------ NEWS ----- */
#TP_news {
  padding: 40px 0;
  background: url(../png/news_bc-3.png) right center no-repeat; }
  #TP_news .big_title {
    margin-bottom: 20px; }
    #TP_news .big_title h3 {
      border-right: 1px solid #cecece;
      padding: 3px 15px 3px 0; }
  #TP_news .btn_newsList {
    text-align: center;
    margin-top: 40px; }
    #TP_news .btn_newsList a {
      font-size: 18px;
      font-size: 1.125rem;
      display: inline-block;
      width: 100%;
      max-width: 480px;
      color: #000;
      text-align: center;
      padding: 15px 5px;
      border: 2px solid #e8e8e8;
      text-decoration: none;
      background: url(../png/arw_r_b-3.png) right center no-repeat;
      box-shadow: 2px 2px 0 #f6f6f6;
      transition: all 0.2s ease; }
      #TP_news .btn_newsList a:hover {
        background-color: #516dc8;
        border-color: #516dc8;
        color: #fff; }
  @media only screen and (max-width: 640px) {
    #TP_news {
      background: none; } }

/* ------ BUSINESS ----- */
#TP_business {
  position: relative;
  padding: 40px 0;
  color: #fff;
  overflow: hidden; }
  #TP_business.biz_1 {
    background-color: #34459f; }
  #TP_business.biz_2 {
    background-color: #696969; }
  #TP_business.biz_3 {
    background-color: #3f803f; }
  #TP_business.biz_4 {
    background-color: #98404e; }
  #TP_business .wrp {
    position: relative;
    z-index: 2; }
  #TP_business .big_title h3 {
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    padding: 3px 15px 3px 0; }

#biz_cntArea {
  display: table;
  width: 100%;
  margin-top: 20px; }

#TP_biz_ctg {
  display: table-cell;
  vertical-align: top;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 320px; }
  #TP_biz_ctg li {
    font-size: 18px;
    font-size: 1.125rem;
    position: relative;
    display: block;
    margin: 0 0 10px;
    width: 290px;
    line-height: 1;
    cursor: default; }
    #TP_biz_ctg li a {
      display: block;
      cursor: default;
      border: 1px solid transparent;
      transition: border 0.2s ease; }
    #TP_biz_ctg li img {
      max-width: 100%;
      height: auto; }
    .biz_1 #TP_biz_ctg li.biz_1 a,
    .biz_2 #TP_biz_ctg li.biz_2 a,
    .biz_3 #TP_biz_ctg li.biz_3 a,
    .biz_4 #TP_biz_ctg li.biz_4 a {
      border-color: #fff; }
  @media only screen and (max-width: 980px) {
    #TP_biz_ctg {
      width: 250px; }
      #TP_biz_ctg li {
        width: 230px; } }
  @media only screen and (max-width: 640px) {
    #TP_biz_ctg {
      width: 100%; }
      #TP_biz_ctg li {
        display: block;
        width: 100%;
        border: none;
        text-align: center; }
        #TP_biz_ctg li a {
          border: 1px solid #fff;
          display: inline-block;
          cursor: pointer; } }

.biz_block {
  display: table-cell;
  vertical-align: top;
  padding: 25px 30px;
  background-color: rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease; }
  .biz_block > div {
    display: none; }
  .biz_1 .biz_block > div.biz_block_1,
  .biz_2 .biz_block > div.biz_block_2,
  .biz_3 .biz_block > div.biz_block_3,
  .biz_4 .biz_block > div.biz_block_4 {
    display: block; }
  .biz_block .biz_title {
    font-size: 23px;
    font-size: 1.4375rem; }
    .biz_block .biz_title .biz_en {
      border-bottom: 2px solid #fff;
      margin: 0 0 12px;
      padding: 0 0 8px; }
    .biz_block .biz_title .biz_jp {
      margin: 0 0 12px;
      padding: 0; }
  .biz_block .biz_text {
    margin: 0 0 10px;
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.6; }
  .biz_block .biz_link {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0; }
    .biz_block .biz_link a {
      font-size: 18px;
      font-size: 1.125rem;
      letter-spacing: 2px;
      display: inline-block;
      padding: 12px 50px 10px 40px;
      line-height: 1;
      color: #fff;
      text-decoration: none;
      border: 1px solid #fff;
      background-image: url(../png/btn_arw-3.png);
      background-repeat: no-repeat;
      background-position: right 20px center;
      transition: background 0.2s ease; }
      .biz_block .biz_link a::after {
        display: inline-block;
        vertical-align: middle;
        margin-left: 10px; }
      .biz_block .biz_link a:hover {
        background-color: rgba(255, 255, 255, 0.2);
        background-position: right 10px center; }
  .biz_block .info {
    font-size: 14px;
    font-size: 0.875rem;
    text-align: center;
    margin: 5px 0 0; }
  .biz_block .biz_img {
    text-align: center; }
    .biz_block .biz_img img {
      margin: 10px; }
  @media only screen and (max-width: 640px) {
    .biz_block {
      display: none; } }

/* selected arw */
#TP_biz_ctg li {
  transition: background 0.2s ease; }
  #TP_biz_ctg li::after {
    display: none;
    content: '';
    position: absolute;
    top: 25px;
    right: -13px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7.5px 0 7.5px 13.0px;
    border-color: transparent transparent transparent #ffffff; }

.biz_1 #TP_biz_ctg li.biz_1,
.biz_2 #TP_biz_ctg li.biz_2,
.biz_3 #TP_biz_ctg li.biz_3,
.biz_4 #TP_biz_ctg li.biz_4 {
  background-color: rgba(255, 255, 255, 0.17); }
  .biz_1 #TP_biz_ctg li.biz_1::after,
  .biz_2 #TP_biz_ctg li.biz_2::after,
  .biz_3 #TP_biz_ctg li.biz_3::after,
  .biz_4 #TP_biz_ctg li.biz_4::after {
    display: block; }

@media only screen and (max-width: 640px) {
  #TP_biz_ctg li {
    background: none !important; }
    #TP_biz_ctg li::after {
      display: none !important; } }

.tp_biz_ly {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: right top;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1; }

.tp_biz_ly_1 {
  background-image: url(../jpg/biz_bc_1-3.jpg);
  background-color: #34459f; }
  .biz_1 .tp_biz_ly_1 {
    opacity: 1; }

.tp_biz_ly_2 {
  background-image: url(../jpg/biz_bc_2-3.jpg);
  background-color: #696969; }
  .biz_2 .tp_biz_ly_2 {
    opacity: 1; }

.tp_biz_ly_3 {
  background-image: url(../jpg/biz_bc_3-3.jpg);
  background-color: #3f803f; }
  .biz_3 .tp_biz_ly_3 {
    opacity: 1; }

.tp_biz_ly_4 {
  background-image: url(../jpg/biz_bc_4-3.jpg);
  background-color: #98404e; }
  .biz_4 .tp_biz_ly_4 {
    opacity: 1; }

/* ------ COMPANY ----- */
#TP_company {
  padding: 40px 0; }
  #TP_company .big_title h3 {
    border-right: 1px solid #cecece;
    padding: 3px 15px 3px 0; }
  #TP_company ul {
    list-style: none;
    margin: 40px 0 20px;
    padding: 0;
    text-align: center;
    font-size: 0; }
  #TP_company li {
    display: inline-block;
    vertical-align: top;
    width: 23%;
    margin: 0 1%; }
    #TP_company li a {
      font-size: 18px;
      font-size: 1.125rem;
      display: block;
      padding: 0;
      text-decoration: none;
      color: #000;
      border: 2px solid #e8e8e8;
      transition: all 0.2s ease; }
      #TP_company li a:hover {
        border-color: #2856d4;
        box-shadow: 0 3px 8px rgba(0, 28, 123, 0.2); }
      #TP_company li a img {
        max-width: 100%;
        height: auto; }
      #TP_company li a p {
        display: block;
        padding: 15px 10px;
        line-height: 1;
        margin: 0;
        border-top: 1px solid #eee; }
        #TP_company li a p::after {
          content: url(../png/btn_arw_black-3.png);
          display: inline-block;
          vertical-align: middle;
          margin-left: 15px; }
  @media only screen and (max-width: 980px) {
    #TP_company li {
      width: 24%;
      margin: 0 0.5%; }
      #TP_company li a {
        font-size: 14px;
        font-size: 0.875rem; }
        #TP_company li a p {
          padding: 10px 5px; }
          #TP_company li a p::after {
            margin-left: 8px; } }
  @media only screen and (max-width: 640px) {
    #TP_company li {
      width: 48%;
      margin: 0.5%; }
      #TP_company li a {
        font-size: 18px;
        font-size: 1.125rem; }
        #TP_company li a span::after {
          display: none; } }

/* -------------------------------------------------------------------------*/
/* ----- slick -----*/
#TP_tpcs_slider ul {
  margin: 0;
  padding: 0; }

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 72px;
  width: 40px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }

.slick-prev {
  left: 0;
  margin-left: -40px;
  background: url(../png/slick_arw_l-3.png); }

.slick-next {
  right: 0;
  margin-right: -40px;
  background: url(../png/slick_arw_r-3.png); }

@media only screen and (max-width: 640px) {
  .slick-prev,
  .slick-next {
    width: 30px;
    height: 54px;
    background-size: 30px 54px; }
  .slick-prev {
    margin-left: -30px; }
  .slick-next {
    margin-right: -30px; } }
