@charset "utf-8";
/* CSS Document */

.block__top-kv-contents {
	/*ackground-size: cover;*/
	position: relative;
	width: 100%;
    height: 90vh;
	/*background: url("../img/top-kv-img.jpg") no-repeat top center/cover;*/
  /*position: absolute;
  top: 0;
  left: 0;*/
  overflow: hidden;
  z-index: -1;
}
.block__top-kv-contents video {
  /*width: 100%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 0;*/
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;  
  object-position: 50% 0%;  
}

/*.block__top-kv-contents:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
}*/
.block__top-kv-contents h2 {
	font-family: 'Noto Serif JP', serif;
	font-size: 4.6875rem;
	font-weight: 500;
	color: #FFF;
	position: absolute;
	top: 45%;
	left: 5%;
	line-height: 1.2;
	z-index: 1;
}


/* ==============================
スクロールダウン
================================= */
.scrolldown {
	background: url("../img/scroll-back-img.png") no-repeat bottom left;
	background-size: 80%;
    position: absolute;
    bottom: 10%;
    left: 5%;
	width: 200px;
	height: 120px;
	z-index: 1;
}

.scrolldown span{
    /*描画位置*/
    position: absolute;
    left: 50%;
    top: 50%;
    /*テキストの形状*/
    color: #FFF;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    /*縦書き設定*/
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
 
.scrolldown:before {/* 丸の描写 */
    content: "";
    position: absolute;
    bottom:10%;
    left: 40%;
    /*丸の形状*/
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#FFF;
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
    animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
     0%{bottom:45px;}
     100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
     0%{opacity:0}
     50%{opacity:1;}
     80%{opacity:0.9;}
     100%{opacity:0;}
 }
 
.scrolldown:after{/* 線の描写 */
    content:"";
    position: absolute;
    bottom: 0;
    left: 42%;
    width: 2px;
    height: 60px;
    background: #FFF;
	z-index: 3;
}
/* ===============//=============== */


.block__top-contents-about {
	padding: 2rem;
}
.block__about--message {
	background: url("../img/top-about-back-img.jpg") no-repeat top center;
	position: relative;
	padding: 2rem;
}
.block__about--message h3 {
	color: #FFF;
	font-family: 'Noto Serif JP', serif;
	font-size: 4rem;
	font-weight: 400;
	position: absolute;
	top: 8rem;
	right: 5rem;
	transform: rotate( 90deg );
}

.block__about--message-comment {
	margin: 2rem;
	padding: 2rem 2.5rem;
	background-color: #FFF;
	width: 30%;
}
p.font-30 {
	font-size: 1.6rem;
	padding-bottom: 1.5rem;
}



.block__top--service {
	background:linear-gradient(0deg,#D0E6EF 0%,#D0E6EF 50%,#FFF 50%,#FFF 100%);
	padding-bottom: 4rem;
}
.block__top--service-contents {
	padding: 3rem 4rem;
	display: flex;
	position: relative;
}
.block__top--service-contents h3 {
	color: #008ED7;
	font-family: 'Noto Serif JP', serif;
	font-size: 4rem;
	font-weight: 400;
	position: absolute;
	bottom: 0;
	right: 5rem;
	/*transform: rotate( 90deg );*/
}
.block__top--service-contents h4 {
	font-size: 2rem;
	font-weight: 450;
    letter-spacing: 0.25rem;
	writing-mode: vertical-rl;
	width: 10%;
}
.block__top--service-photo {
	width: 50%;
}
.block__top--service-comment {
	padding: 4rem 2rem 2rem;
	width: 40%;
}

.block__top--works {
	padding: 4rem 2rem;
	position: relative;
}
.block__top--works h3 {
	color: #008ED7;
	font-family: 'Noto Serif JP', serif;
	font-size: 4rem;
	font-weight: 400;
	position: absolute;
	top: 2rem;
	left: 3rem;
}
.block__top--works-contents {
	padding: 4rem 12rem 2rem;
}
.top--works-01 {
	background: url("../img/top-works-chishitsu-img.jpg") no-repeat left 4rem;
	background-size: 70%;
	padding-bottom: 5rem;
	margin: 5rem 0;
	height: 600px;
}
.top--works-02 {
	background: url("../img/top-works-sekkei-img.jpg") no-repeat right 4rem;
	background-size: 70%;
	padding-bottom: 5rem;
	margin: 5rem 0;
	height: 600px;
}
.top--works-03 {
	background: url("../img/top-works-sokuryo-img.jpg") no-repeat left 4rem;
	background-size: 70%;
	padding-bottom: 5rem;
	margin: 5rem 0;
	height: 600px;
}
.top--works-04 {
	background: url("../img/top-works-koji-img.jpg") no-repeat right 4rem;
	background-size: 70%;
	padding-bottom: 5rem;
	margin: 5rem 0;
	height: 600px;
}
.top--works-comment {
	background-color: rgba(255,255,255,0.70);
	border: 1px solid #777777;
	padding: 2rem;
	width: 40%;
}
.works-comment-left {
	margin-right: auto;
}
.works-comment-right {
	margin-left: auto;
}
.top--works-comment h4 {
	font-size: 2.1875rem;
	padding-bottom: 1rem;
}




.block__top--news {
	background:linear-gradient(0deg,#FFF 0%,#FFF 30%,#D0E6EF 30%,#D0E6EF 100%);
	padding: 4rem 10rem;
}
.block__top--news-contents {
	background-color: #F6FAFE;
	padding: 4rem 8rem 1rem;
	position: relative;
}
.block__top--news-contents h3 {
	font-family: 'Noto Serif JP', serif;
	font-size: 2.1875rem;
	font-weight: 400;
	position: absolute;
	left: 6rem;
	top: 2rem;
}
.block__top--news-contents dl {
	display: flex;
	flex-wrap: wrap;
	margin-top: 3rem;
}
.block__top--news-contents dt {
	padding: 1rem 0;
	width: 30%;
}
.block__top--news-contents dd {
	padding: 1rem 0;
	width: 70%;
}


.block__top-contents-recruit {
	padding: 2rem;
	margin-bottom: 2rem;
}
.block__recruit--message {
	background: url("../img/top-recruit-back-img.jpg") no-repeat top center;
	background-size: cover;
	position: relative;
	padding: 2rem 2rem 10rem 2rem;
}
.block__recruit--message h3 {
	color: #FFF;
	font-family: 'Noto Serif JP', serif;
	font-size: 4rem;
	font-weight: 400;
	position: absolute;
	top: 60%;
	left: 2rem;
}

.block__recruit--message-comment {
	color: rgba(255,255,255,1.00);
	margin: 15% 0 2rem auto;
	padding: 2rem;
	width: 55%;
}







/* ==============================
レスポンシブ
================================= */

@media screen and (max-width: 1230px) {
.block__about--message-comment {
	margin: 2rem;
	padding: 2rem 2.5rem;
	background-color: #FFF;
	width: 40%;
}
.block__top--works-contents {
	padding: 4rem 5rem 2rem;
}
.block__recruit--message {
	background: url("../img/top-recruit-back-img.jpg") no-repeat top center;
	max-height: 500px;
	background-size: 100%;
}
.block__recruit--message-comment {
	color: rgba(255,255,255,1.00);
	margin: 5% 0 2rem auto;
	padding: 2rem;
	width: 55%;
}
.top--works-01, .top--works-02, .top--works-03, .top--works-04 {
	max-height: 500px;
}
}

@media screen and (max-width: 1080px) {
.block__top-kv-contents {
	/*ackground-size: cover;*/
	position: relative;
	width: 100%;
    height: 70vh;
	/*background: url("../img/top-kv-img.jpg") no-repeat top center/cover;*/
  /*position: absolute;
  top: 0;
  left: 0;*/
  overflow: hidden;
  z-index: -1;
}
.block__top-kv-contents video {
  /*min-width: 100%;
  min-height: 100%;*/
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  object-fit: cover;  
  object-position: 50% 0%;  
}
.block__top-kv-contents h2 {
	font-size: 3.75rem;
	font-weight: 400;
	top: 45%;
	left: 5%;
}
.block__about--message-comment {
	margin: 2rem 2rem 4rem;
	padding: 2rem;
	background-color: #FFF;
	width: 70%;
}
.block__about--message h3 {
	font-size: 4rem;
	top: 6rem;
	right: -3rem;
}
.block__top--service {
	background:linear-gradient(0deg,#D0E6EF 0%,#D0E6EF 75%,#FFF 75%,#FFF 100%);
	padding-bottom: 4rem;
}
.block__top--service-contents h3 {
	font-size: 3rem;
	bottom: 2rem;
	right: 5rem;
	/*transform: rotate( 90deg );*/
}
.block__top--service-contents {
	padding: 3rem 2rem;
	display: flex;
	position: relative;
}
.block__top--service-contents h4 {
	font-size: 1.8rem;
	writing-mode: vertical-rl;
	font-weight: 500;
	width: 15%;
}
.block__top--service-photo {
	width: 85%;
}
.block__top--service-comment {
	padding: 0 2rem 2rem;
	width: 100%;
}
p.font-30 {
	font-size: 1.3rem;
	padding-bottom: 1.5rem;
}
.block__top--works-contents {
	padding: 4rem 4rem 2rem;
}
.block__top--works h3 {
	font-size: 3rem;
}
.top--works-comment {
	background-color: rgba(255,255,255,0.70);
	border: 1px solid #777777;
	padding: 2rem;
	width: 60%;
}
.block__top--news {
	background:linear-gradient(0deg,#FFF 0%,#FFF 30%,#D0E6EF 30%,#D0E6EF 100%);
	padding: 4rem;
}
.block__top--news-contents {
	background-color: #F6FAFE;
	padding: 4rem 4rem 1rem;
	position: relative;
}
.block__recruit--message {
	background: url("../img/top-recruit-back-img.jpg") no-repeat top center;
	max-height: 500px;
	background-size: cover;
}
.block__recruit--message-comment {
	color: rgba(255,255,255,1.00);
	margin: 5% 0 2rem 0;
	padding: 2rem;
	width: 100%;
}
.block__recruit--message h3 {
	top: 70%;
	left: 2rem;
}
.top--works-01, .top--works-02, .top--works-03, .top--works-04 {
	background-size: 90%;
}
}


@media screen and (max-width: 600px) {
video {
  width: 100%;
  max-width: 400px; /* 最大でも400px以下に */
}
.block__top-kv-contents h2 {
	font-size: 2.5rem;
	top: 45%;
	left: 5%;
}
.block__top-contents-about {
	padding: 2rem 0;
	width: 100%;
}
.block__about--message-comment {
	margin: 50px 0.5rem 2rem;
	padding: 2rem;
	background-color: rgba(255,255,255,0.80);
	width: 76%;
}
.block__about--message {
	background: url("../img/top-about-back-img.jpg") no-repeat top center;
	background-size: cover;
	position: relative;
	padding: 2rem 0;
	width: 100%;
}
.block__about--message h3 {
	font-size: 3rem;
	top: 6rem;
	right: -5rem;
	line-height: 1.0;
}
.block__top--service-contents {
	padding: 3rem 2rem 0;
	display: flex;
	position: relative;
	flex-direction: column;
}
.block__top--service-contents h3 {
	font-size: 3rem;
	top: 3rem;
	/*bottom: 2rem;*/
	right: 4rem;
}
.block__top--service-photo {
	display: flex;
	padding: 2rem 0;
	width: 100%;
}
.block__top--service-comment {
	padding: 5rem 1rem 0;
	width: 100%;
}
.block__top--service-contents h4 {
	font-size: 1.8rem;
	writing-mode: horizontal-tb;
	font-weight: 500;
	width: 100%;
}
.block__top--works-contents {
	padding: 4rem 0 2rem;
}
.top--works-01 {
	background: url("../img/top-works-chishitsu-img.jpg") no-repeat left 0;
	background-size: 90%;
	padding: 7rem 0 8rem;
	margin: 2em 0 7rem 0;
	height: auto;
}
.top--works-02 {
	background: url("../img/top-works-sekkei-img.jpg") no-repeat right 0;
	background-size: 90%;
	padding: 7rem 0 8rem;
	margin: 7rem 0;
	height: auto;
}
.top--works-03 {
	background: url("../img/top-works-sokuryo-img.jpg") no-repeat left 0;
	background-size: 90%;
	padding: 7rem 0 0;
	margin: 7rem 0;
	height: auto;
}
.top--works-04 {
	background: url("../img/top-works-koji-img.jpg") no-repeat right 0;
	background-size: 90%;
	padding: 7rem 0 8rem;
	margin: 7rem 0 2rem;
	height: auto;
}
.top--works-comment {
	background-color: rgba(255,255,255,0.70);
	border: 1px solid #777777;
	padding: 1rem;
	margin-bottom: 3rem;
	width: 90%;
}
.top--works-comment h4 {
	font-size: 2rem;
	padding-bottom: 1rem;
}
.block__top--news {
	background:linear-gradient(0deg,#FFF 0%,#FFF 30%,#D0E6EF 30%,#D0E6EF 100%);
	padding: 4rem 2rem;
}
.block__top--news-contents {
	background-color: #F6FAFE;
	padding: 4rem 2rem 1rem;
}
.block__top--news-contents h3 {
	font-size: 2.5rem;
	position: absolute;
	left: 2rem;
	top: 2rem;
}
.block__top--news-contents dl {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 3rem;
}
.block__top--news-contents dt {
	padding: 1rem 0;
	width: 100%;
}
.block__top--news-contents dd {
	padding: 1rem 0;
	width: 100%;
}
.block__top-contents-recruit {
	padding: 0;
	margin-bottom: 4rem;
}
.block__recruit--message {
	background: url("../img/top-recruit-back-img.jpg") no-repeat top center;
	height: 500px;
	max-height: 700px;
	background-size: cover;
}
.block__recruit--message h3 {
	font-size: 3rem;
}
.block__recruit--message-comment {
	color: rgba(255,255,255,1.00);
	margin: 1rem auto 3rem;
	padding: 0;
	width: 90%;
}
}



/* ==============================
print
================================= */
/* A4サイズ縦 */
@page {
    size: A4 portrait;
}

@media print {
.block__top-kv-contents video {
    display: none;
}
.block__top-kv-contents {
    background: url("../img/top-kv-img.jpg") no-repeat;
	background-size: cover;
	height: 40vh;
}
.block__top-kv-contents h2 {
	font-size: 2.5rem;
	/*osition: absolute;
	top: 45%;
	left: 5%;
	line-height: 1.2;
	z-index: 1;*/
}
.block__about--message-comment {
	margin: 50px 0.5rem 2rem;
	padding: 2rem;
	background-color: rgba(255,255,255,0.80);
	width: 76%;
}
.block__about--message h3 {
	color: #FFF;
	position: absolute;
	top: 6rem;
	right: -5rem;
	transform: rotate( 90deg );
}
.block__top--service-contents {
	padding: 3rem 2rem 0;
	display: flex;
	position: relative;
	/*flex-direction: column;*/
}
.block__top--service-contents h3 {
	font-size: 3rem;
	/*top: 3rem;*/
	bottom: 0;
	right: 4rem;
}
/*.block__top--service-photo {
	display: flex;
	padding: 2rem 0;
	width: 100%;
}
.block__top--service-comment {
	padding: 5rem 1rem 0;
	width: 100%;
}*/
.block__top--service-photo {
	width: 30%;
}
.block__top--service-comment {
	padding: 0 0 3rem 1rem;
	width: 60%;
}
	
.block__top--works h3 {
	font-size: 3rem;
}
.block__top--works-contents {
	padding: 4rem 0 2rem;
}
.top--works-01 {
	background: url("../img/top-works-chishitsu-img.jpg") no-repeat left 0;
	background-size: 50%;
	padding: 8rem 0 1rem;
	margin: 2rem 0;
	height: auto;
}
.top--works-02 {
	background: url("../img/top-works-sekkei-img.jpg") no-repeat right 0;
	background-size: 50%;
	padding: 8rem 0 1rem;
	margin: 2rem 0;
	height: auto;
}
.top--works-03 {
	background: url("../img/top-works-sokuryo-img.jpg") no-repeat left 0;
	background-size: 50%;
	padding: 8rem 0 1rem;
	margin: 2rem 0;
	height: auto;
}
.top--works-04 {
	background: url("../img/top-works-koji-img.jpg") no-repeat right 0;
	background-size: 50%;
	padding: 8rem 0 1rem;
	margin: 2rem 0 2rem;
	height: auto;
}
.top--works-comment {
	background-color: rgba(255,255,255,0.70);
	border: 1px solid #777777;
	padding: 1rem;
	margin-bottom: 0;
	width: 90%;
}
.top--works-comment h4 {
	font-size: 1.5rem;
	padding-bottom: 1rem;
}
.block__top--news {
	background:linear-gradient(0deg,#FFF 0%,#FFF 30%,#D0E6EF 30%,#D0E6EF 100%);
	padding: 4rem 2rem;
}
.block__top--news-contents {
	background-color: #F6FAFE;
	padding: 4rem 1rem 1rem;
}
.block__top--news-contents h3 {
	font-size: 2.5rem;
	position: absolute;
	left: 2rem;
	top: 2rem;
}
.block__recruit--message {
	background: url("../img/top-recruit-back-img.jpg") no-repeat top center;
	height: 350px;
	background-size: cover;
}
.block__recruit--message h3 {
	font-size: 3rem;
	top: 5%;
	left: 1.5rem;
}
.block__recruit--message-comment {
	margin: 15% auto 3rem;
	padding: 0;
	width: 95%;
}

}