@charset "UTF-8";

/* -----------------------------------------------------------------------------

共通パーツ

----------------------------------------------------------------------------- */
/* subpage-mv
----------------------------------------------------*/
#subpage-mv {
  background: url("../img/company/company_head.jpg") center center / cover;
}
/* 各コンテンツ見出し
----------------------------------------------------*/
.company-Head {
  display: flex;
  justify-content: center;
  align-items: center;
}
.company-Head .in {
  height: 80%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.company-Head .in h2 {
  width: 100%;
  margin-bottom: 1em;
  display: flex;
}
.company-Head .in h2 span {
  background: #000;
  color: #fff;
  font-family: var(--mincho-font);
  font-weight: normal;
  letter-spacing: .3rem;
}
.company-Head .in p {
  width: 100%;
  color: #fff;
  font-family: var(--mincho-font);
  text-shadow: 0 0 10px #000;
}
.company-Head .in p.sub-title {
  font-family: dnp-shuei-shogomincho-std, sans-serif;
  font-weight: bold;
}
@media screen and (min-width: 1000px) {
  .company-Head {
    height: calc(100vh - 90px);
  }
  .company-Head .in {
    width: 90vw;
    max-width: 1530px;
    border: 3px solid #fff;
    padding: 5% 10%;
  }
  .company-Head .in h2 span {
    font-size: 1.6em;
    padding: .4em 1.5em;
  }
  .company-Head .in p.sub-title {
    font-size: 4.2vw;
  }
  .company-Head .in p.sub-title span {
    border-bottom: 3px solid #fff;
  }
}
@media screen and (min-width: 1300px) {
  .company-Head .in p.sub-title {
    font-size: 2.6em;
  }
}
@media screen and (max-width: 999px) {
  .company-Head {
    height: 60vh;
  }
  .company-Head .in {
    max-width: 100%;
    margin-bottom: 10vh;
    padding: 0 0 0 5vw;
    align-content: flex-end;
  }
  .company-Head .in h2 span {
    font-size: 4vw;
    /* padding: .3em 8vw; */
    padding: .3em 3vw;
  }
  .company-Head .in p.sub-title {
    font-size: 5.5vw;
  }
  .company-Head .in p:last-child {
    padding: 0 3vw;
  }
  .company-Head .in p.alr,
  .company-Head .in p.sub-title span {
    padding: 0 3vw .2em;
  }
  .company-Head .in p.sub-title span {
    border-bottom: 2px solid #fff;
  }
}


/* コンテンツ内テキスト
----------------------------------------------------*/
.text-cont {
  margin: 0 auto 2em !important;
}
@media screen and (min-width: 1000px) {
  .text-cont {
    width: 90%;
  }
}
.img-cont {
  display: flex;
  justify-content: space-between;
}
/* -----------------------------------------------------------------------------

company-about

----------------------------------------------------------------------------- */
@media screen and (min-width: 1000px) {
  .about-ul-nav li {
    width: 25%;
  }
}
@media screen and (max-width: 999px) {
  .about-ul-nav li:nth-of-type(1) {
    width: 30%;
  }
  .about-ul-nav li:nth-of-type(2) {
    width: 39%;
  }
  .about-ul-nav li:nth-of-type(3) {
    width: 27%;
  }
}

/* -----------------------------------------------------------------------------

company-message

----------------------------------------------------------------------------- */
/* company-message-01
----------------------------------------------------*/
.company-message-01 {
  background: url("../img/company/company_message_head.jpg") center center / cover;
}
.company-message-01.company-Head .in {
  justify-content: flex-end;
  padding: 17% 10% 3%;
}
@media screen and (max-width: 999px) {
  .company-message-01.company-Head .in {
    padding: 0;
  }
}
.company-message-01.company-Head .in p.sub-title {
	/* text-align: right; */
}
.company-message-01.company-Head .in p.alr {
  width: auto;
}
@media screen and (min-width: 1000px) {
  .company-message-01.company-Head .in p.name {
    font-size: 1.8em;
  }
}
@media screen and (max-width: 999px) {
  .company-message-01.company-Head .in p.alr {
    font-size: 5.8vw;
  }
}
/* company-message-02
----------------------------------------------------*/
.company-message-02 .movie {
  max-width: 1200px;
}
.company-message-02 .movie video {
  width: 100%;
}
/* company-message-03
----------------------------------------------------*/
.company-message-03 {
  background-color: #ffebce;
  padding: 3em 0;
}
.company-message-03 .in {
  width: 900px;
}
.company-message-03 .in .text-scroll-box {
  overflow-y: scroll;
}
/* スクロールの幅の設定 */
.company-message-03 .in .text-scroll-box::-webkit-scrollbar-track {
  background-color: #d6cbbb;
}
.company-message-03 .in .text-scroll-box::-webkit-scrollbar-thumb {
  background-color: #c9b79d;
}
@media screen and (min-width: 1000px) {
  .company-message-03 {
    margin-bottom: 124px;
  }
  .company-message-03 .in .text-scroll-box {
    max-height: 20em;
    padding: 0 2.7em;
  }
  /* スクロールの幅の設定 */
  .company-message-03 .in .text-scroll-box::-webkit-scrollbar {
    width: 18px;
    height: 18px;
  }
}
@media screen and (max-width: 999px) {
  .company-message-03 {
    margin-bottom: 3em;
  }
  .company-message-03 .in .text-scroll-box {
    max-height: 13em;
  }
  /* スクロールの幅の設定 */
  .company-message-03 .in .text-scroll-box::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
}
/* -----------------------------------------------------------------------------

company-effort

----------------------------------------------------------------------------- */
.company-effort-01 {
  background: url("../img/company/company_effort_head.jpg") center center / cover;
}
.company-effort-01.company-Head .in {
  padding: 10% 10% 5%;
}
@media screen and (max-width: 999px) {
  .company-effort-01.company-Head .in {
    padding: 0;
  }
}
@media screen and (min-width: 1000px) {
  #company-effort {
    padding-bottom: 124px;
  }
}
@media screen and (max-width: 999px) {
  #company-effort {
    padding-bottom: 4rem;
  }
  #company-effort .img-cont .img-box:nth-child(even) {
    margin-left: 2%;
  }
}
/* -----------------------------------------------------------------------------

company-environment

----------------------------------------------------------------------------- */

.company-environment-01 {
  background: url("../img/company/company_environment_head.jpg") center center / cover;
}
.company-environment-01.company-Head .in h2 {
  justify-content: flex-end;
}
.office-box {
	position: relative;
}
.office-box .txt-box {
	background: #ffae00;
	color: #fff;
	align-self: center;
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	z-index: 10;
}
.office-box .txt-box h4 {
	width: 100%;
  font-size: 1.25em;
	font-weight: bold;
  margin-bottom: 1rem;
	border-bottom: 2px solid;
}
@media screen and (min-width: 1000px) {
  .office-box {
		width: 100%;
    margin-bottom: 5rem;
  }
	.office-box .img-box {
		width: 100%;
	}
  .office-box .txt-box {
		width: 45%;
		min-height: 78%;
    padding: 2rem;
		top: 10%;
  }
	.office-box:nth-child(odd) .img-box {
		text-align: left;
	}
	.office-box:nth-child(even) .img-box {
		text-align: right;
	}
	.office-box:nth-child(odd) .txt-box {
		right: 10%;
	}
	.office-box:nth-child(even) .txt-box {
		left: 10%;
	}
}
@media screen and (max-width: 999px) {
  .office-box {
    margin-bottom: 2.5rem;
  }
  .office-box:nth-child(odd) .txt-box,
  .office-box:nth-child(even) .txt-box {
  }
  .office-box .txt-box {
		width: 45%;
		min-height: 90%;
    padding: 1rem;
		top: 5%;
		z-index: 1;
  }
  .office-box .txt-box h4 {
    margin-bottom: .5rem;
  }
  .office-box .img-box {
		width: 100%;
    height: 0;
    padding: 18%;
    position: relative;
    overflow: hidden;
  }
  .office-box .img-box img {
    width: 60%;
    height: 100%;
    object-fit: cover;
		object-position: right;
    position: absolute;
    top: 0;
  }
	.office-box:nth-child(odd) .img-box img {
    left: 0;
	}
	.office-box:nth-child(even) .img-box img {
		right: 0;
    object-position: center;
	}
	.office-box:nth-child(odd) .txt-box {
		right: 0;
	}
	.office-box:nth-child(even) .txt-box {
		left: 0;
	}
}
@media screen and (max-width: 700px) {
  .office-box .img-box {
    padding: 25%;
  }
  .office-box .txt-box {
		line-height: 1.4;
  }
  .office-box .txt-box h4 {
		font-size: 3.8vw;
		margin-bottom: 0.5rem;
  }
  .office-box .txt-box p {
		font-size: 3vw
  }
}

/* panel
----------------------------------------------------*/
.panel-cont-wrap {
  position: relative;
}
/* panel-cont
----------------------------------------------------*/
.panel-cont {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.panel-cont .panel-box {
  background: url("../img/common/box_corner.svg") no-repeat right bottom / 10%;
  height: 0;
  color: #fff;
  overflow: hidden;
  position: relative;
  transition: all .2s ease;
}
.panel-cont .panel-box:nth-child(odd) {
  background-color: #ffae00;
}
.panel-cont .panel-box:nth-child(even) {
  background-color: #ffcd61;
}
.panel-cont .panel-box:hover {
  background-color: #ff8a00;
  cursor: pointer;
}
.panel-cont .panel-box .panel-in-box {
  width: 75%;
  height: 80%;
  border: 2px solid #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

.panel-cont .panel-box .panel-in-box p {
  width: 100%;
  text-align: center;
}
.panel-cont .panel-box .panel-in-box p.panel-text-jp {
  font-weight: bold;
}
.panel-cont .panel-box .panel-in-box p.panel-text-en {
  margin-bottom: 0;
}
@media screen and (min-width: 1120px) {
  .panel-cont .panel-box {
    width: 363px !important;
  }
}
@media screen and (min-width: 1000px) {
  .panel-cont .panel-box {
    width: 33%;
    padding-top: 29%;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  .panel-cont .panel-box:nth-child(3n) {
    border-right: none;
  }
  .panel-cont .panel-box .panel-in-box p.panel-text-jp {
    margin: 1rem 0;
  }
}
@media screen and (max-width: 999px) {
  .panel-cont .panel-box {
    width: 50%;
    padding-top: 42%;
  }
  .panel-cont .panel-box:nth-child(3) {
    background-color: #ffcd61;
  }
  .panel-cont .panel-box:nth-child(4) {
    background-color: #ffae00;
  }
  .panel-cont .panel-box .panel-in-box {
    padding: 2vw;
  }
  .panel-cont .panel-box .img-box img {
    max-height: 10vw;
  }
  .panel-cont .panel-box .panel-in-box p.panel-text-jp {
    font-size: 3.5vw;
    margin: 0;
  }
}
/* panel-detail-cont
----------------------------------------------------*/
.panel-detail-cont {
  background: rgba(45,45,45,.85) url("../img/common/btn-close.png") no-repeat top 2em right 2em / 50px;
  position: absolute;
  display: none;
	cursor: pointer;
}
@media screen and (max-width: 999px) {
	.panel-detail-cont {
		background-size: 30px;
	}
}
.panel-detail-cont .in {
  position: relative;
}
.panel-close {
  position: absolute;
  top: 0;
  right: 0;
}

.panel-detail-cont .in {
  height: 100%;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.panel-detail-cont .in h4 {
  text-align: center;
}
.panel-detail-cont .in h4,
.panel-detail-cont .in h5 {
  font-weight: bold;
}
.panel-detail-cont .in p {
  font-weight: normal;
}
.panel-detail-box .panel-detail-head {
  padding: 0 5%;
  margin-bottom: 2.5em;
}
.panel-detail-box .panel-detail-in {
  background: rgba(0,0,0,.6);
  max-width: 1100px;
  font-size: .9em;
  padding: 2% 5%;
}
.panel-detail-box .panel-detail-in p {
  padding: 0 2%;
}
@media screen and (min-width: 1000px) and (max-width: 1300px) {
	.panel-detail-cont {
		background-position: top 2em right 7em;
	}
}
@media screen and (min-width: 1000px) {
  .panel-detail-cont {
    width: 120%;
    height: 110%;
    top: -5%;
    left: -10%;
  }
  .panel-detail-cont .in h4,
  .panel-detail-cont .in h5 {
    font-size: 1.1em;
    margin-bottom: 2em;
  }
  .panel-detail-box .panel-detail-in {
    max-width: 1100px;
    font-size: .9em;
    padding: 2% 5%;
  }
}
@media screen and (max-width: 999px) {
  .panel-detail-cont {
    width: 104%;
    height: 110%;
    top: -5%;
    left: -2%;
  }
  .panel-detail-box .panel-detail-in {
    padding: 1em 5%;
  }
  .panel-detail-cont .in h4 {
    font-size: 1.5em;
    margin-bottom: 2em;
  }
  .panel-detail-cont .in h5 {
    font-size: 1.25em;
    margin-bottom: 1em;
  }
}