@charset "UTF-8";
/* CSS Document */
img{
max-width: 100%;
}
header{
display: flex;
justify-content: space-between;
padding: 10px 20px;
position: fixed;
top: 0;
z-index: 999;
width: 100%;
background-color:rgba(0,0,0,0.70);
}
.h-logo img{
width: 300px;
}
.h-logo span{
color: #fff;
margin-left: 5px;
font-size: 18px;
vertical-align: bottom;
}
.contact{
margin: 8px 40px 0;
}

.contact a{
color: #fff;
line-height: 100%;
font-size: 14px;
letter-spacing: 2px;
font-weight: 400;
vertical-align: middle;
border: 1px solid #fff;
padding: 10px 20px;
}
.contact a::before{
font-family: "Material Symbols Outlined";
content: '\e158';
font-size: 24px;
font-weight: 200;
}
.menu{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.menu ul{
display: flex;
justify-content:center;
list-style: none;
margin: 10px 0;
padding: 0;
}
.menu li{
text-align: center;
margin: 0;
padding: 0;
border-left: 1px solid #fff;
font-size: 14px;
}
.menu li:last-child{
border-right: 1px solid #fff;
}
.menu li a{
color: #fff;
margin: 0 20px;
padding: 0 10px;
text-align: center;
}
.menu li a:hover{
color: rgba(38,117,186,1.00);
}
main{
width: 100%;
position: relative;
top: 0;
min-height: 1080px;
}
section{
position: relative;
}
footer{
position: relative;
top: 100%;
width: 100%;
background-color:rgba(57,64,93,1.00);
padding: 40px 20px;
}
.footer-box{
display: flex;
justify-content: center;
color: #fff;
align-items: center;
}
.f-logo{
width: 300px;
margin: 20px;
}
address{
font-style: normal;
font-size: 14px;
}
p.copy{
color: #fff;
text-align: center;
font-size: 14px;
}
.slide {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
}
.slide:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: radial-gradient(black 30%, transparent 30%),
    radial-gradient(black 30%, transparent 30%);
  background-size: 3px 3px;
  background-position: 0 0, 3px 3px;
  z-index: 1;
}
.top-t{
position: absolute;
top: 23%;
left: 5%;
color: #fff;
z-index: 3;
max-width: 820px;
}
.top-t h1{
font-size: 60px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.top-t p{
font-size: 18px;
line-height: 200%;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}

h2{
font-size: 38px;
text-align: center;
margin: 50px 0 0;
}
.t-title-1{
font-size: 32px;
text-align: center;
font-weight: 700;
letter-spacing: 10px;
}
.t-title-2{
font-size: 26px;
text-align: center;
font-weight: 700;
letter-spacing: 10px;
position: relative;
vertical-align:baseline;
border-bottom: 1px solid #999;
display: inline-block;
padding-bottom: 10px;
}
ul.r-icon{
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none;
margin: 0 auto 40px ;
max-width: 1400px;
justify-content: space-around;
gap:1%;
}
.r-icon li{
width: 24.25%;
text-align: center;
}
.r-icon li img{
border-radius: 50%;
}
.fukurikousei{
background-color:rgba(107,123,155,1.00);
text-align: center;
padding: 40px;
}
.entry{
text-align: center;
padding: 40px 0;
}
.entry-btn{
display: flex;
justify-content: center;
margin: 50px 0 100px 0;
}
.entry-btn a{
display: inline-block;
padding: 10px 40px;
background-color: #000;
color: #fff;
text-decoration: none;
letter-spacing: 5px;
font-size: 24px;
font-weight: 600;
border-radius: 5px;
}
.entry-btn :hover{
background-color: rgba(218,170,15,1.00);
}
.works{
padding: 50px 0;
}
.top-job{
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #000;
}
.top-job:after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  background-image: radial-gradient(black 30%, transparent 30%),
    radial-gradient(black 30%, transparent 30%);
  background-size: 3px 3px;
  background-position: 0 0, 3px 3px;
  z-index: 1;
}
.top-job h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 60px;
color: #fff;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
z-index: 5;
letter-spacing: 20px;
text-align: center;
}
.top-job h1 span{
display: block;
text-align: center;
font-size: 14px;
letter-spacing: 5px;
}
.marine-box{
position: relative;
margin-bottom: 60px;
}
.marine{
    width: 100%;
    clip-path: polygon(35% 0%,100% 0%,100% 100%, 10% 100%) 
    /* clip-path: polygon(頂点Aの座標,頂点Bの座標,頂点Cの座標,頂点Dの座標) */
}
.marine::before{
    position: absolute; 
    z-index: 10; /* トリミングしたい画像よりも高い値 */
    top: 0;
    left: 0;
    display: block;
    width: 50%; /* 擬似要素の横幅 */
    height: 100%; /* 擬似要素の高さ */
    content: '';
    transform: translateX(-50%) skewX(-24deg);
    background-color: #fff; /* 背景色と揃える必要がある */

}
.marine-t{
width: 50%;
background-color:rgba(0,0,0,0.80);
color: #fff;
padding: 60px;
position: absolute;
left: 5%;
top: 10%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.land-box{
position: relative;
}
.land{
    width: 100%;
    clip-path: polygon(0% 0%,65% 0%,90% 100%, 0% 100%) 
    /* clip-path: polygon(頂点Aの座標,頂点Bの座標,頂点Cの座標,頂点Dの座標) */
}
.land::before{
    position: absolute; 
    z-index: 10; /* トリミングしたい画像よりも高い値 */
    top: 0;
    left: 0;
    display: block;
    width: 50%; /* 擬似要素の横幅 */
    height: 100%; /* 擬似要素の高さ */
    content: '';
    transform: translateX(-50%) skewX(-24deg);
    background-color: #fff; /* 背景色と揃える必要がある */

}
.land-t{
width: 50%;
background-color:rgba(238,238,238,0.80);
color: #222;
padding: 60px;
position: absolute;
right: 5%;
top: 10%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}
.works h3{
text-align: center;
font-size: 38px;
margin: 0;
letter-spacing: 20px;
}
.btn{
margin: 40px 0;
text-align: center;
}
.btn-w{
margin: 40px 0;
text-align: center;
}
.btn a{
border: 1px solid #000;
padding: 10px 40px;
font-size: 16px;
border-radius: 10px;
text-decoration: none;
color: #000;
vertical-align: middle;
display: inline-block;
}
.btn a::after{
font-family: "Material Symbols Outlined";
content: '\e315';
font-size: 21px;
font-weight: 200;
margin-left: 10px;
}
.btn :hover{
background-color: #000;
border: 1px solid #000;
color: #fff;
}
.btn-w a{
border: 1px solid #fff;
color: #fff;
padding: 10px 40px;
font-size: 16px;
border-radius: 10px;
text-decoration: none;
vertical-align: middle;
display: inline-block;
}
.btn-w a::after{
font-family: "Material Symbols Outlined";
content: '\e315';
font-size: 21px;
font-weight: 200;
margin-left: 10px;
}
.btn-w :hover{
background-color: #fff;
border: 1px solid #fff;
color: #000;
}
.pc{
display: block;
}
.sp{
display: none;
}
.box100{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box100-2{
display: flex;
justify-content: center;
flex-wrap: wrap;
gap:10%;
}
.box50{
width: 40%;
}
.box50 h2{
font-size: 28px;
letter-spacing: 10px;
}
.box50 h3{
margin: 60px 0;
text-align: center;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding: 10px;
}
.box70{
width: 68%;
}
.box30{
width: 31%;
background-color: #fff;
padding: 20px;
}
.bg-gy h2{
font-size: 38px;
letter-spacing: 10px;
margin: 80px 0 40px;
}
.box30 h3{
margin: 20px 0;
text-align: center;
border-top: dotted 1px #000;
border-bottom: dotted 1px #000;
padding: 10px;
letter-spacing: 5px;
font-size: 21px;
}
ul.career {
  margin: 40px 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* 横線を中央に1本引く */
ul.career::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  z-index: 0;
  transform: translateY(-50%);
}

/* 丸の中の文字設定 */
ul.career li {
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  z-index: 1; /* 横線より前に出す */
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.bg-bk{
background-color: #000;
color: #fff;
padding: 20px 0; 
margin: 40px 0;
}
.bg-gy{
background-color: #efefef;
color: #000;
padding: 20px 0 80px; 
margin: 40px 0;
}
.job{
max-width: 1200px;
margin: 0 auto;
padding: 60px 20px;
}
.job h1{
text-align: center;
margin: 50px 0;
font-size: 50px;
letter-spacing: 20px;
}
.job h2{
letter-spacing: 10px;
margin-bottom: 40px;
color: rgba(38,117,186,1.00);
}
.job-t{
padding: 20px;
}
.job-t p{
margin: 20px;
}
.w1200{
max-width: 1200px;
margin:0 auto 50px;
padding: 20px;
}
.w1200 h3{
 position:relative;
 border-bottom:solid 3px #ccc;
 font-size: 28px;
 letter-spacing: 5px;
 padding-bottom: 10px;
}

.w1200 h3::after{
 position:absolute;
 content:"";
 display:block;
 border-bottom:solid 3px rgba(38,117,186,1.00);
 bottom:-3px;
 width:20%;
}
.w1200 h4{
display: inline-block;
padding: 5px 20px;
color: #fff;
background-color: rgba(38,117,186,1.00);
margin-bottom: 0;
}
ul.li-3{
margin: 20px 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
ul.li-3 li{
width: 33%;
}
@media screen and (max-width:1080px){
header{
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 20px 10px 20px;
position: fixed;
text-align:center; 
top: 0;
z-index: 999;
width: 100%;
background-color:rgba(0,0,0,0.70);
}
.h-logo img{
width: 240px;
}
/* ボタンのスタイル */
.hamburger {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  cursor: pointer;
  z-index: 20;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background-color: #fff;
  margin: 5px 0;
  transition: 0.4s;
}

/* バツ印に変化するスタイル */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}
.menu{
position: fixed;
top: 0;
right: -100%;
opacity: 0; /* 初期状態は透明 */
height: 100%;
width: 100%;
background-color: #000;
padding: 40px;
}
.menu ul{
display: flex;
flex-direction: column;
justify-content:center;
list-style: none;
margin: 0;
transition: right 0.5s ease;
z-index: 999;
width: 100%;
}
/* メニューが開いているとき */
.menu.open {
right: 0;
 opacity: 1; /* 不透明にする */
}
.menu li{
text-align: center;
margin: 0;
padding: 20px;
border-bottom: 1px dotted #fff;
border-left: none;
}
.menu li:last-child{
border-right: none;
}
.menu li a{
color: #fff;
margin: 0 20px;
padding: 0 10px;
text-align: center;
}

footer{
position: relative;
top: 100%;
width: 100%;
background-color:rgba(57,64,93,1.00);
padding: 20px 20px;
}
.footer-box{
display: flex;
justify-content: center;
color: #fff;
flex-direction: column;
}
img.h-logo{
width: 300px;
margin: auto;
}
.menu li a{
color: #fff;
margin: 0 10px;
}
.top-t{
position: relative;
top: 0;
left: 0;
color: #fff;
z-index: 3;
padding: 20px;
}
.top-t h1{
font-size: 30px;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.top-t p{
font-size: 16px;
line-height: 200%;
  text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.top-t-sp{
position: absolute;
top: 20%;
left: 10%;
z-index: 4;
}
.top-t-sp h1{
color: #fff;
font-size: 36px;
writing-mode: vertical-rl;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.works{
padding: 30px 0;
}
.marine-box{
position: relative;
margin-bottom: 30px;
margin-top: 40px;
}
.marine{
    width: 100%;
    clip-path: polygon(0% 0%,100% 0%,100% 100%, 0% 100%) 
    /* clip-path: polygon(頂点Aの座標,頂点Bの座標,頂点Cの座標,頂点Dの座標) */
}
.marine-t{
width: 100%;
background-color:rgba(0,0,0,0.80);
color: #fff;
padding: 40px;
position: relative;
left: 0%;
top: 0%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.land{
    width: 100%;
    clip-path: polygon(0% 0%,100% 0%,100% 100%, 0% 100%) 
    /* clip-path: polygon(頂点Aの座標,頂点Bの座標,頂点Cの座標,頂点Dの座標) */
}
.land-t{
width: 100%;
background-color:rgba(238,238,238,0.80);
color: #222;
padding: 40px;
position: relative;
right: 0%;
top: 0%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
h2{
font-size: 32px;
text-align: center;
margin: 20px 0 0;
}
.t-title-1{
font-size: 28px;
text-align: center;
font-weight: 700;
letter-spacing: 10px;
}
.t-title-2{
font-size: 21px;
text-align: center;
font-weight: 700;
letter-spacing: 2px;
position: relative;
vertical-align:baseline;
border-bottom: 1px solid #999;
display: inline-block;
padding-bottom: 10px;
}
.btn{
margin: 20px 0;
text-align: center;
}
.btn-w{
margin: 20px 0;
text-align: center;
}
ul.r-icon{
gap:6%;
}
.r-icon li{
width: 47%;
text-align: center;
}
.job{
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.job h2{
font-size: 32px;
letter-spacing: 5px;
margin-bottom: 40px;
color: rgba(38,117,186,1.00);
}
.bg-gy{
padding: 20px;
}
.bg-gy h2{
font-size: 28px;
letter-spacing: 5px;
margin: 40px 0 20px;
}
.box50{
width: 100%;
}
.box30{
width: 100%;
margin-bottom: 20px;
}
.box70{
width: 100%;
}
.box50 h3{
margin: 30px 0;
text-align: center;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding: 10px;
}
 ul.career {
 margin: 0px;
    flex-direction: column-reverse;
    align-items: center;
  }

  ul.career::before {
    display: none;
  }

  /* 線を上に表示 */
  ul.career li::after {
    content: "";
    position: absolute;
    top: -60px; /* ← 上に線を出す */
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60px;
    background: #fff;
    z-index: 0;
  }

  /* 一番下に表示される項目（＝HTMLの最後のli）の線を消す */
  ul.career li:last-child::after {
    display: none;
  }

  ul.career li {
    margin-top: 60px;
  }
  ul.li-3 li{
width: 100%;
margin-bottom: 10px;
}
.top-job h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: #fff;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
z-index: 5;
letter-spacing: 10px;
}
.pc{
display: none;
}
.sp{
display: block;
}
.contact{
display: none;
}
}