@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500&display=swap');
/*  style　[ top ]
=================================================================== */
/*----------------------------------------------
   header
---------------------------------------------*/

header {
  background: none;
  position: relative;
}
/* 768px(sm)～ ____________________________________________________ */
@media print,screen and (min-width: 768px) {

#areaHeader {
  position: absolute;
  top: 0;
}
}


.catch {
  position: absolute;
  top: 45%;
  left: 20px;
   text-shadow:  2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size: 2.5em;
}

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  .catch {
  font-size: 1.5em;
}
}

.inner {
  position: absolute;
  bottom: 0;
  width: 100%;
}
/*.pr {
  background-color: rgba(89,126,181,0.8);
  padding: 5px 10px;
  color: #fff;
}
.pr a {
  color: #fff;
}*/

/*	slider
=================================================================== */

.slider{
  opacity: 0;
  transition: 3s;
}
.slick-initialized{
    opacity: 1
}


/* ------------------------------
   ごあいさつ
------------------------------ */
#greetings {
  background: url(../images/bg01.png) center top no-repeat;
  background-size: contain;
  margin: 0;
  padding: 4em 0 5em 0;
  min-height: 400px;
}

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  #greetings {
  padding: 2em 0 3em 0;
    background-size: cover;
}
}


/* h2 */
#greetings h2.line_h2 {
  padding:0 0 2em 0;
}
/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  #greetings h2.line_h2 {
  padding:0 0 2em 0;
    margin-bottom: 0;
}
}
.greetings-box {
  border: #b53581 1px solid;
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.8);
}


/* ------------------------------
   YouTube
------------------------------ */

#movie {
  background: url(../images/bg04.png) center top no-repeat;
  background-size: contain;
  margin: 0;
  padding: 4em 0 5em 0;
 /* min-height: 400px;*/
}

.movie-wrap {
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
  width: 98%;
  margin: 0 auto;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.movie-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 1em 0 0 0;
}

.movie-item {
  width: 49%;
}


/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {
  .movie-item {
  width: 100%;
    margin: 0 auto 1em auto;
}
}



/* ------------------------------
   会社案内
------------------------------ */
#about {
  background: url(../images/bg04.png) center top no-repeat;
  background-size: contain;
  margin: 0;
  padding: 4em 0 5em 0;
 /* min-height: 400px;*/
}

/* 768px(sm)～ ____________________________________________________ */
@media print,screen and (min-width: 768px) {
  .lg-img {
    width: 300px;
  }
}
/* ------------------------------
   保有船舶
------------------------------ */
.ship {
  /*justify-content: space-between;*/
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2em auto;
}
.ship .item30 {
  width: 32%;
  margin: 0 5px;
}
.ship .item30 h4 {
  margin: 1em 0;
  color: #000;
}
.ship .item30 h4:before {
  display: none;
}
.text-box{
  padding: 1em;
}

/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {

.item30 {
  width: 100%!important;
  margin-bottom: 1em;
}
}

.img-box {
  position: relative;
}
.img-box img {
  position: relative;
}
.img_h4 {
  position: absolute;
  bottom: 0;
  font-weight: 600;
  margin: 0 0 0 0!important;
  padding: 0.5em;/*文字周りの余白*/
  background:rgba(255,255,255,0.5);/*背景色*/
  border-left: none;/*左線（実線 太さ 色）*/
  border-bottom: none;/*下線（実線 太さ 色）*/
  width: 100%;
  text-align: center;
}


/* ------------------------------
   施工状況
------------------------------ */
.works {
  /*justify-content: space-between;*/
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2em auto;
}
.works .item30 {
  width: 32%;
  margin: 0 5px 1em 5px;
}
.works .item30 h4 {
  margin: 1em 0;
  color: #000;
}
.works .item30 h4:before {
  display: none;
}

/* ------------------------------
   その昔
------------------------------ */
#old {
  background: url(../images/bg02.jpg) center top no-repeat;
  background-size: cover;
  margin: 0;
  padding: 1em 0;
}
.old {
  justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2em auto;
}
.old .item50 {
  width: 48%;
  margin: 0 auto;
}
.old .item50 h4 {
  margin: 1em 0;
  color: #000;
}
.old .item50 h4:before {
  display: none;
}

/*----------------------------------------------
	.c_fadeIn_type02
---------------------------------------------*/
.fadein {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 0.8s;
}

.fadein.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.fadein2 {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 1.5s;
}

.fadein2.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

.fadein3 {
  opacity : 0;
  transform : translate(0, 50px);
  transition:all 2s;
}

.fadein3.scrollin {
  opacity : 1;
  transform : translate(0, 0);
}

/* ------------------------------
   loopSlider
------------------------------ */

.loopSlider {
	margin: 0 auto;
	width: 100%;
	height: 150px;
	text-align: left;
}

.loopSlider ul {
	height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loopSlider ul li {
  margin: 0;
  padding: 0;
}
.loopSlider ul li img {
	width: auto;
	height: 150px;
}


/*----------------------------------------------
   map
---------------------------------------------*/
#access iframe {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 250px;
}


/* ～767px(xs) ____________________________________________________ */
@media screen and (max-width: 767px) {

}
/*----------------------------------------------
   480px以下
  ---------------------------------------------*/
@media screen and (max-width: 480px) {

}