@charset "utf-8";


/* home =============================================================
======================================================================== */

/* mainvisual
=========================================================================================== */

	.p-mainvisual {
    width: 100%;
    background-color: #1e4590;
		}
  .p-mainvisual-text {
    background: url("../img/home/txt_mainlogo.png") no-repeat right 10px center;
    }
	@media print, screen and (min-width: 768px) {
    .p-mainvisual-text {
      height: 360px;
      font-size: 1.8rem;
      }
 	}
	@media screen and (min-width:768px) and (max-width:1400px){
    .p-mainvisual-text {
      height: 20vw;
      background-size: auto 90%;
      }
	}
	@media screen and (min-width:768px) and (max-width:1000px){
    .p-mainvisual-text {
      font-size: 1.6rem;
      }
	}
	@media (max-width: 767px) {
    .p-mainvisual-text {
      padding: 30px 10px;
      background-size: 80% auto;
      background-position: center center;
      }
	}



/* page link (company / business / works)
=========================================================================================== */

  .p-pagelinkTitle {
    width: 100%;
    position: relative;
    }
  .p-pagelinkTitle-bg {
    }
  .p-pagelinkMore a {
    text-decoration: none;
    text-align: right;
    }
  .p-pagelinkMore-a {
    display: inline-block;
    height: 10px;
    flex: 1;
    -webkit-transform: skew(55deg);
    transform: skew(55deg);
    }
  .p-pagelinkMore-t {
    display: inline-block;
    width: 160px;
    margin-top: -5px;
    text-decoration: none;
    letter-spacing: 0;
    font-size: 1.5rem;
    font-weight: bold;
		-webkit-transition: all 0.5s ease-in-out;
		-moz-transition: all 0.5s ease-in-out;
		-o-transition: all 0.5s ease-in-out;
		-ms-transition: all 0.5s ease-in-out;
		transition: all 0.5s ease-in-out;
    }
    .p-pagelinkMore a:hover .p-pagelinkMore-t {
      width: 150px;
      }
    .p-businessMore-a,
    .p-companyMore-a {
      border-bottom: 2px solid #1e4590;
      border-right: 2px solid #1e4590;
      }
    .p-worksMore-a {
      border-bottom: 2px solid #faec21;
      border-right: 2px solid #faec21;
      }


	@media print, screen and (min-width: 768px) {
    .p-works {
      padding: 10px 0 140px 0;
      margin-top: 100px;
      }
    .p-pagelinkTitle {
      height: 200px;
      margin-top: 250px;
      }
      .p-companyTitle {
        background: -moz-linear-gradient(left, #CACACA 0%, #CACACA 50%, #fff 50%, #fff 100%);
        background: -webkit-linear-gradient(left, #CACACA 0%, #CACACA 50%, #fff 50%, #fff 100%);
        background: linear-gradient(to right, #CACACA 0%, #CACACA 50%, #fff 50%, #fff 100%);
        }
      .p-businessTitle {
        background: -moz-linear-gradient(left, #fff 0%, #fff 50%, #CACACA 50%, #CACACA 100%);
        background: -webkit-linear-gradient(left, #fff 0%, #fff 50%, #CACACA 50%, #CACACA 100%);
        background: linear-gradient(to right, #fff 0%, #fff 50%, #CACACA 50%, #CACACA 100%);
        }
      .p-worksTitle {
        background: -moz-linear-gradient(left, #000 0%, #000 50%, transparent 50%, transparent 100%);
        background: -webkit-linear-gradient(left, #000 0%, #000 50%, transparent 50%, transparent 100%);
        background: linear-gradient(to right, #000 0%, #000 50%, transparent 50%, transparent 100%);
        }
    .p-pagelinkTitle-bg {
      position: absolute;
      top: 0;
      left: 50%;
      height: 200px;
      width: 1710px;
      font-size: 10.0rem;
      }
      .p-companyTitle-bg {
        text-align: right;
        background: url("../img/home/bg_compnay.png") no-repeat right center;
        background-size: auto 100%;
        margin-left: -900px;
        }
      .p-businessTitle-bg {
        background: url("../img/home/bg_business.png") no-repeat left center;
        background-size: auto 100%;
        margin-left: -800px;
        }
      .p-worksTitle-bg {
        text-align: right;
        background: url("../img/home/bg_works.png") no-repeat right center;
        background-size: auto 100%;
        margin-left: -900px;
        }
    .p-pagelinkTitle-bg > div {
      height: 200px;
      }
      .p-worksTitle-bg > div,
      .p-companyTitle-bg > div {
        padding-right: 200px;
        }
      .p-businessTitle-bg > div {
        padding-left: 200px;
        }
    .p-pagelinkPh {
      position: absolute;
      width: 700px;
      top: -350px;
      }
      .p-worksPh,
      .p-companyPh {
        left: -8%;
        }
      .p-businessPh {
        right: -8%;
        }
 	}
	@media screen and (min-width:768px) and (max-width:1400px){
    .p-pagelinkTitle {
      height: 180px;
      margin-top: 230px;
      }
      .p-worksTitle {
        margin-top: 180px;
        }
    .p-pagelinkTitle-bg {
      height: 180px;
      width: 1500px;
      font-size: 8.0rem;
      }
      .p-worksTitle-bg ,
      .p-companyTitle-bg {
        margin-left: -900px;
        }
      .p-businessTitle-bg {
        margin-left: -600px;
        }
    .p-pagelinkTitle-bg > div {
      height: 180px;
      }
      .p-worksTitle-bg > div ,
      .p-companyTitle-bg > div {
        padding-right: 150px;
        }
      .p-businessTitle-bg > div {
        padding-left: 150px;
        }
    .p-pagelinkPh {
      width: 50%;
      top: -300px;
      }
      .p-worksPh,
      .p-companyPh {
        left: -6%;
        }
      .p-businessPh {
        right: -6%;
        }
	}
	@media screen and (min-width:768px) and (max-width:1100px){
    .p-pagelinkTitle {
      height: 120px;
      margin-top: 200px;
      }
      .p-worksTitle {
        margin-top: 160px;
        }
    .p-pagelinkTitle-bg {
      height: 120px;
      width: 1300px;
      font-size: 6.0rem;
      }
      .p-worksTitle-bg ,
      .p-companyTitle-bg {
        margin-left: -850px;
        }
      .p-businessTitle-bg {
        margin-left: -450px;
        }
    .p-pagelinkTitle-bg > div {
      height: 120px;
      }
      .p-worksTitle-bg > div ,
      .p-companyTitle-bg > div {
        padding-right: 130px;
        }
      .p-businessTitle-bg > div {
        padding-left: 130px;
        }
    .p-pagelinkPh {
      width: 50%;
      top: -150px;
      }
      .p-worksPh,
      .p-companyPh {
        left: -6%;
        }
      .p-businessPh {
        right: -6%;
        }
	}
	@media (max-width: 767px) {
    .p-works {
      padding: 10px 0 50px 0;
      margin-top: 50px;
      }
    .p-pagelinkTitle {
      margin-top: 50px;
      }
    .p-pagelinkTitle-bg {
      height: 70px;
      width: 95%;
      font-size: 3.0rem;
      text-align: center;
      }
      .p-companyTitle-bg {
        background: url("../img/home/bg_compnay-sp.png") no-repeat right center;
        background-size: 100% auto;
        margin-right: auto;
        }
      .p-businessTitle-bg {
        background: url("../img/home/bg_business-sp.png") no-repeat left center;
        background-size: 100% auto;
        margin-left: auto;
        }
      .p-worksTitle-bg {
        background: url("../img/home/bg_works-sp.png") no-repeat right center;
        background-size: 100% auto;
        margin-right: auto;
        }
    .p-pagelinkTitle-bg > div {
      height: 70px;
      }
    .p-pagelinkPh {
      width: 80%;
      margin: 20px auto;
      }
	}


/* news
=========================================================================================== */

  .p-news h2 {
    text-align: center;
    }
  .p-newsList {
    overflow: auto;
    }
    .p-newsList dl {
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      flex-wrap: wrap;
      align-items: stretch;	
      width: 100%;
      border-bottom: none;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;
      }
    .p-newsList dt {
      padding: 10px 5px;
      width: 180px;
      box-sizing: border-box;
      color: #1e4590;
      }
    .p-newsList dd {
      margin: 0;
      padding: 10px 5px;
      width: 70%;
      width: -webkit-calc( 100% - 180px);
      width: -moz-calc( 100% - 180px ); 
      width: calc( 100% - 180px ); 
      box-sizing: border-box;
      }
	@media print, screen and (min-width: 768px) {
    .p-news h2 {
      width: 350px;
      padding-right: 50px;
      font-size: 8.0rem;
      }
    .p-newsList {
      flex: 1;
      height: 200px;
      }
 	}
	@media screen and (min-width:768px) and (max-width:1400px){
	}
	@media screen and (min-width:768px) and (max-width:1000px){
	}
  @media screen and (max-width: 767px) {
    .p-news h2 {
      width: 100%;
      font-size: 3.0rem;
      }
    .p-newsList {
      width: 100%;
      }
    .p-newsList {
      height: 250px;
      }
    .p-newsList dt { 
      width: 100%;
      padding: 5px 5px 0px 5px;
      }
    .p-newsList dd {
      width: 100%; 
      padding: 0 5px 5px 5px;
      }
  }  

