@charset "UTF-8";
/* CSS Document */
:root {
  --bk: #000;
  --w: #fff;
  --nv:#1c305c;
  --db:#2a83a2;
  --bg:#00a497;
  --gy:#8da0b6;
}
/*html, body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}*/
body{
background-color: var(--bk);
color: var(--w);
font-family: "Noto Sans JP", sans-serif;
height: 100%;
}
img{
max-width: 100%;
}
a:hover img{
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity:0.6;
}
header {
width: 100%;
position:relative;
}
.inner-header {
position: absolute;
  height:100vh;
width: 100%;
  margin: 0;
  padding: 0;
}
.logo {
position: absolute;
width: 460px;
top: 10px;
left: 5%;
z-index: 10;
}

/*トップ動画*/
/*.video-container{
position: fixed;
top: 0;
left: 0;
width: 100vw;
margin: 0;
z-index: -1;
}*/
.video_wrapper {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.video_wrapper > video {
position: absolute;
object-fit: cover;
height: 100%;
width: 100%;
top: 0;
left: 0;
}

	
/*セクション*/
main{
position:relative;
width: 100%;
overflow: hidden;
}
img.top-cloud{
vertical-align: bottom;
}
.w1400{
max-width: 1400px;
margin: 0 auto;
}
.top-contents{
width: 100%;
background-color: var(--w);
}
/*section{
position: relative;
}*/
.bg-w{
background-color: var(--w);
color: var(--bk);
}
.bg-bk{
background-color: var(--bk);
color: var(--w);
}
.bg-db{
background-color: var(--db);
color: var(--w);
}
.bg-bg{
background-color: var(--bg);
color: var(--w);
}
.pad50{padding: 50px 20px 100px;
}
/*文字*/
a {
color:var(--bk);
-webkit-tap-highlight-color: transparent;
-webkit-transition: opacity .3s ease;
transition:opacity .3s ease
}

a:hover {
color: var(--db);
text-decoration:none
}

a:focus {
text-decoration:none
    }
h1 {
font-size: 80px;
text-align: center;
font-weight: 900;
margin-bottom: 0;
letter-spacing: 20px;
color: var(--db);
/*text-shadow: #2a4073 1px 0 10px;*/
}
h1 span{
display: block;
font-size: 40px;
letter-spacing: normal;
color: var(--gy);
}
h2{
font-size: 48px;
text-align: center;
margin: 0 0 40px;
font-weight: 700;
}
h2.en-h2{
font-size: 54px;
color: var(--db);
}
h2 span{
display: block;
font-size: 14px;
letter-spacing: 5px;
}
p.t-right{
text-align: right;
margin-top: 50px;
line-height: 150%;
font-size: 16px;
}
.tc{
color: var(--db);
}
.title-1{
font-size: 32px;
}
strong{
font-size: 21px;
}
.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/*コンセプト*/
.concept-flex{
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
margin: 40px auto;
}
.concept-l{
width: 48%;
font-size: 18px;
line-height: 200%;
font-weight: 600;
text-align: left;
}
.concept-r{
width: 48%;
}
.waves {
top:0;
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}
.nami{
margin-top: 30px;
}
.concept-bg{
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(42,64,115,1) 64%);
}

.bg-image-clip {
  position: absolute;
  top: -200px;
  left: 0;
  width: 100%;
  height: 100%;
  min-height: 230px;
  clip-path: inset(0); /* 切り抜き */
  z-index: -1;
}

.bg-image-fixed {
  position: fixed; /* 背景を固定 */
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  will-change: transform;

}

.president{
/*border-radius: 49% 51% 53% 47% / 45% 52% 48% 55% ;*/
object-fit: cover; 
width: 500px;
height: 500px;
}
.message{
display: block;
flex-direction: column;
padding: 40px;
width: 100%;

}
.message h2{
color: var(--w);
font-size: 6vw;
letter-spacing: 10px;
line-height: 120%;
}
.message p{
margin: 40px;
line-height: 150%;
font-size: 24px;
text-align: left;
letter-spacing: 10px;
}
.right-img{
text-align: right;
margin-right: 20px;
width: 100%;
}
.right-img p {
text-align: right;
margin: 0;
font-size: 18px;
margin-right: 10px;
}
.btn-w{
display: flex;
justify-content: center;
}
.btn-w p a{
border: 1px solid #fff;
color: #fff;
text-decoration: none;
padding: 2px 20px 2px 22px;
font-size: 18px;
border-radius: 10px;
letter-spacing: 2px;
}
/*メッセージ*/
.message-top{
position: relative;
}
.message-t{
position: absolute;
top: 20%;
right: 40px;
text-align: right;
}
.message-t h1{
font-size: 1.2vw;
letter-spacing: 5px;
background-color: var(--db);
padding: 10px 20px;
color:var(--w) ;
display: inline-block;
text-align: right;
margin: 0 0 40px 0;
}
.message-t h2{
font-size: 4vw;
text-align:right; 
line-height:150%;
}
.message-content{
max-width: 1200px;
margin: 0 auto;
padding: 60px 40px;
}
.message-content p{
line-height: 200%;
}
.message-content h2{
letter-spacing: 2px;
margin: 40px 0;
font-size: 38px;
}
p.sin{
font-size: 21px;
letter-spacing: 5px;
}
/*press*/
.press{
width: 100%;
background-color: #fff;
color: #222;
padding: 100px 20px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.press a{
text-decoration: none;
}
.press h2{
display: inline-block;
width: 30%;
margin: 0;
text-align: center;
font-size: 4vh;
padding: 0 20px;
}
.press dl{
width: 70%;
margin: 0 auto;
padding: 40px 0;
display: flex;
flex-wrap: wrap;
gap:2%;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-left: 1px solid #eee;
padding-left: 4%;
}
.press dt{
width: 20%;
text-align: center;
padding: 5px 20px;
background-color:#F2F2F2;
margin: 0;
}
.press dd{
width: 78%;
margin: 0;
padding: 5px 20px;
font-size: 14px;
}
.press dd h3{
margin: 2px 0 0;
font-size: 16px;
/*border-bottom: 1px solid #eee;*/
padding-bottom: 10px;
font-weight: 400;
}
.press-box{
background-color: #fff;
color: #222;
padding: 40px 20px 80px;
margin-top: 100px;
}
.press-box h1{
font-size: 28px;
letter-spacing: 2px;
}
.article{
max-width: 1000px;
margin: 40px auto;
padding: 20px 40px 40px;
/*border: 1px solid #eee;*/
background-color:#F4F4F4;
line-height: 200%;
}
.article h2{
text-align: left;
font-size: 18px;
border-bottom: 1px dotted #ccc; 
padding-bottom: 20px;
}
.date{
padding:2px 10px;
font-size: 13px;
line-height: 100%;
display: inline-block;
letter-spacing: 2px;
margin-bottom: 20px;
background-color: #222;
color: #fff;
}
/*社内event*/
.event-box{
background-color: #F4F4F4;
color: #222;
padding: 40px 20px 80px;
margin-top: 100px;
}
.event-box h1{
font-size: 28px;
margin-bottom: 40px;
}
.event-box p{
max-width: 1000px;
margin: 40px auto;
}
.article-e{
max-width: 1000px;
margin: 40px auto;
padding: 40px 40px 40px;
border: 1px solid #eee;
background-color:#fff;
line-height: 200%;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: column;
}
.article-e h2{
text-align: left;
font-size: 18px;
border-bottom: 1px dotted #ccc; 
padding-bottom: 20px;
}
.article-e p{
line-height: 150%;
margin: 20px auto;
}
/*船舶紹介*/
.ship{
padding: 100px 0 0;
background-image: url("../parts/earth.png");
background-repeat: no-repeat;
background-position: top right;
}
.ship-box{
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.ship h2{
text-shadow: #2a4073 1px 0 10px;
}
.ship-img{
width: 50%;
text-align: center;
}
.ship-img p{
font-size: 28px;
line-height: 200%;
padding: 0 20px 50px;
}
.ship-data{
padding: 40px;
width: 40%;
text-align: center;
}
.ship-data h3{
margin: 0;
font-size: 26px;
text-align: center;
text-shadow: #2a4073 1px 0 10px;
}
.banner{
max-width: 1000px;
margin: 80px auto 40px;
}
ul.li-2{
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-around;
}
ul.li-2 li{
width: calc(100% / 2 - 100px)

}
.ship-li{
position: relative;
overflow: hidden;
}
.side-scroll {
width: 100vw;
height: 90vh;
display: flex;
align-items: center;
overflow: hidden;
white-space: nowrap; /* 横スクロールを有効に */

}
.slides-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
   gap: 30px;
   width: calc(100% - 50px);
   margin: 0 auto;
}
.slide-img {
  flex: 0 0 auto;
  width: 30vw; /* 2枚の画像を1セットで中央配置 */
  padding: 0 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.slide-img img {
  width: 100%;
  height: auto;
  max-height: 25vh; /* 画像の高さを制限 */
  object-fit: cover;
}
.slide-img p {
  text-align: center;
  font-size: 0.875em;
}
/*recruit*/
.recruit-box{
display: flex;
justify-content: space-between;
flex-direction:row;
}
.recruit {
flex-direction: column;
padding: 40px;
background: #01579B;
position: relative;
color: #fff;
z-index: 1;
width: 50%;
justify-content: center;
text-align: center;
}
.recruit p{
font-size: 18px;
display: inline-block;
text-align: left;
}
.recruit::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #01579B;
transform: scaleY(1.3) perspective(.6em) rotateX(5deg);
transform-origin: bottom left;
border-radius: 8px 8px 0 0;
}
.recruit-img {
  background: #01579B;
  width: 50%;
}
.recruit__img {
  width: 100%;
  height: 100%;
  position: relative;
}
.recruit__img img{
 height: 100%;
 object-fit: cover;
}
/*ボタン*/
.button-box{
display: flex;
justify-content: space-around;
align-items: center;
max-width: 1000px;
margin:50px auto 50px;
padding: 0 0 200px 0 ;
}
.button a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto 40px;
    border-radius: 9999px;
    width: 300px;
    padding: 10px 25px;
    font-family: "Noto Sans Japanese";
    color: #fff;
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    /*background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);*/
	background-image: linear-gradient(90deg, rgba(0, 184, 185, 1), rgba(38, 68, 170, 1));
    background-position: 1% 50%;
    background-size: 200% auto;
    transition: all 0.3s ease-out;
	letter-spacing: 10px;
}
.button a:hover {
    color: #fff;
    background-position: 99% 50%;
}
.button a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.banner-box{
padding-bottom: 50px;
}
.history-b{
max-width: 800px;
margin:60px auto 60px;
}
.history-b a{
padding:20px 40px;
background-color:#fff;
border-radius: 10px;
background-image: url("../parts/history-bg.jpg");
background-position: center;
background-size:contain;
display: block;
color: #fff;
text-decoration: none;
transition: 0.5s;
}
.history-b :hover{
background-image: none;
background-color:rgba(56,77,182,1.00);
transition: 0.5s;
}
.history-b h2{
font-size: 32px;
text-align: left;
margin: 0;
font-weight: bold;
letter-spacing: 5px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.ayumi{
text-align: center;
padding: 40px 10px;
color: #fff;
font-size: 60px;
font-weight: 700;
text-shadow: 0px 0px 20px rgba(189, 242, 255, 1);
}
.typewriter::after{
content:"|";
margin-left:4px;
animation:blink 2s infinite;
}

@keyframes blink{
0%,50%,100%{opacity:1;}
25%,75%{opacity:0;}
}
.profile-b{
max-width: 800px;
margin:0 auto 60px;
display: block;
}
.profile-b a{
color: #fff;
text-decoration: none;
padding:20px 40px;
background-color:#fff;
border-radius: 10px;
background-color:aliceblue;background-image: url("../parts/profile-bg.jpg");
display: block;
background-position: center;
background-size:contain;
transition: 0.5s;
}
.profile-b :hover{
background-image: none;
background-color:rgba(56,188,184,1.00);
transition: 0.5s;
}
.profile-b h2{
font-size: 32px;
text-align: left;
margin: 0;
font-weight: bold;
letter-spacing: 5px;
border-radius: 10px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.event-b{
max-width: 800px;
margin:0 auto 60px;
display: block;
}
.event-b a{
color: #fff;
text-decoration: none;
padding:20px 40px;
background-color:#fff;
border-radius: 10px;
background-color:aliceblue;background-image: url("../parts/event-bg.jpg");
display: block;
background-position: center;
background-size:contain;
transition: 0.5s;
}
.event-b :hover{
background-image: none;
background-color:#95cd9f;
transition: 0.5s;
}
.event-b h2{
font-size: 32px;
text-align: left;
margin: 0;
font-weight: bold;
letter-spacing: 5px;
border-radius: 10px;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
}
/*footer*/
footer{
background-color: var(--bk);
color: var(--w);
position: relative;
padding: 20px;
}
.footer-box{
text-align: center;
display: flex;
justify-content: center;
}
footer a{
color: #fff;
}
address{
text-align: left;
padding: 0 20px;
font-style: normal;
font-size: 14px;
}
address h2{
margin: 0;
font-size: 21px;
text-align: left;
font-family: "Yuji Syuku", serif;
color: var(--w);
}
p.copy{
text-align: center;
font-size: 13px;
}
/* 波のAnimation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

/*会社概要*/
.company{
max-width: 1200px;
margin: auto;
}
.company-top{
opacity: 0;
animation: fadeInBackground 2s ease-in-out forwards;
}
/* フェードインアニメーション */
@keyframes fadeInBackground {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.company tr{
border-bottom: 1px solid #ccc;
}
.company th{
padding: 20px;
width: 20%;
}
.company td{
padding: 20px;
text-align: left;
}
.pc{
display: block;
}
.sp{
display: none;
}
/*会社概要ページ*/
.top-about{
position: absolute;
top:10%;
left: 0%;
right: 0%;
}
.top-about-en{
position: absolute;
top:10%;
left: 0%;
right: 0%;
}
h1.js-text span {
  display: inline-block;
  font-size: 80px;
color: var(--w);
letter-spacing: 10px;
}
.en-h1{
font-size: 74px;
text-align: center;
font-weight: 900;
margin: 0;
letter-spacing: 2px;
}
.word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
  }
.message-box{
position: relative;
height: 100%;
display: flex;
padding: 60px;
flex-direction: row;
align-items: center;
}
.message-box:nth-child(even){
flex-direction: row-reverse;
}
.message-img{
z-index: 1;
position: relative;
}
.message-1{
width: 55%;
}
.message-2{
width: 40%;
}
.message-3{
width: 60%;
}
.message-img img{
margin-bottom: 20px;
}
.message-text-box{
background-color:rgba(42,131,162,0.70);
text-align: left;
font-size: 14px;
line-height: 200%;
z-index: 2;
padding: 60px;
}
.message-text{
padding: 40px;
text-align: left;
line-height: 200%;
}
.message-t-1{
width: 45%;
}
.message-t-2{
width: 60%;
}
.message-t-3{
width: 40%;
}
.message-text h3{
text-align: center;
font-size: 32px;
}
.map-grayscale {
filter: grayscale(100%);
max-width: 1200px;
margin: 60px auto;
padding: 50px 0 100px 0;
}

/*history*/
.dounsan{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 800px;
}
.dounsan h1{
color: var(--w);
font-size: 80px;
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
}

.dounsan h2{
color: var(--w);
font-size: 50px;
letter-spacing: 20px;
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
}
.dounsan p{
text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4), 3px 3px 4px rgba(0, 0, 0, 0.4), 3px 3px 4px rgba(0, 0, 0, 0.4);
font-size: 16px;
}
.kumo-1{
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.kumo-2{
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.kumo-3{
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}
 #uminotami {
            position: relative;
            overflow: hidden;
        }
.uminotami-scroll {
width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            overflow: hidden;
			white-space: nowrap; /* 横スクロールを有効に */
}
.uminotami-wrapper {
display: flex;
            flex-wrap: nowrap; /* 横並びを維持 */
            width: max-content;
}
.uminotami-box{
width: 50vw; /* 画面の半分 */
            height: 100vh; /* 画面の半分 */
            padding: 40px 20px 0;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
			font-size: 18px;
			box-sizing: border-box; /* paddingを含めたサイズ計算 */
  overflow: hidden; /* コンテンツがはみ出さないように */
  text-overflow: ellipsis; /* はみ出すテキストに省略記号を追加 */
  white-space: normal; /* テキストが折り返されるように */
}
.uminotami-box img{
width: 350px;
height: 350px;
margin-bottom: 20px;
}
.uminotami-box h2{
margin:10px auto 0;
line-height: 100%;
height: 120px;
font-size: 3vw;
}
.uminotami-box h3{
margin: 20px 0 20px;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
background-color:var(--bk);
color: var(--w);
padding: 5px 40px;
font-size: 50px;
letter-spacing: 20px;
width: 80%;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.uminotami-box h3.h3_en{
margin: 20px 0 20px;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
background-color:var(--bk);
color: var(--w);
padding: 5px 20px;
font-size: 40px;
letter-spacing: 10px;
width: 80%;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.uminotami-box p{
text-align: left;
max-width: 80%;
margin: 20px auto;
}
.color-1{
background: rgb(128,210,123);
background: linear-gradient(90deg, rgba(128,210,123,1) 0%, rgba(87,171,187,1) 100%);
}
.color-2{
background: rgb(210,208,163);
background: linear-gradient(90deg, rgba(210,208,163,1) 0%, rgba(179,152,132,1) 100%);
}
.color-3{
background: rgb(204,163,210);
background: linear-gradient(90deg, rgba(204,163,210,1) 0%, rgba(242,122,192,1) 100%);
}
.color-4{
background: rgb(184,121,22);
background: linear-gradient(90deg, rgba(184,121,22,1) 0%, rgba(219,184,31,1) 100%);
}
.color-5{
background: rgb(125,211,219);
background: linear-gradient(90deg, rgba(125,211,219,1) 0%, rgba(64,201,164,1) 100%);
}
.color-6{
background: rgb(250,166,243);
background: linear-gradient(90deg, rgba(250,166,243,1) 0%, rgba(125,196,244,1) 100%);
}
.uminotami-box h3 span{
font-size: 14px;
margin-left: 10px;
letter-spacing: 2px;
}
.uminotami-1{
background-color: #21988f;
}
.uminotami-2{
background-color: #ebe03b;
}
.uminotami-3{
background-color: #b85ea0;
}
.uminotami-4{
background-color: #f39800;
}
.uminotami-5{
background-color: #bbd534;
}
.uminotami-6{
background-color: #348acb;
}
div .label{
min-width: 300px;
padding: 10px 10px 5px;
background: rgb(180,180,180);
background: linear-gradient(90deg, rgba(180,180,180,1) 0%, rgba(236,236,236,1) 44%, rgba(166,166,166,1) 100%);
font-size: 18px;
letter-spacing: 2px;
box-shadow: 0px 0px 15px -5px #777777;
line-height: 120%;
margin-bottom: 20px;
}
div .label span{
display: block;
font-size: 12px;
}
.history{
position: relative;
background-color: #1d1d1d;
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 50px 0;
}
.history h2{
font-size: 80px;
text-align: center;
font-weight: 700;
}

.history-box {
    background-color: #1d1d1d;
    flex-grow: 1;
    margin: 0;
	position: relative;
	padding: 50px 0;
}
.history-box:before {
    content: "";
     position: absolute; 
    top: 0px;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    width: 4px;
    background-color: #fff;
}
.history-box .entries {
    width: calc(100% - 80px);
    max-width: 100%;
    margin: auto;
    position: relative;
    left: -5px;
}
.history-box .entries .entry {
    width: calc(50% - 80px);
    float: left;
    padding: 20px;
    clear: both;
    text-align: right;
}
.history-box .entries .entry:not(:first-child) {
    margin-top: -70px;
}
.history-box .entries .entry .title {
    font-size: 32px;
    margin-bottom: 12px;
    position: relative;
    color: #fff;
}
.history-box .entries .entry .title span{
    font-size: 21px;
}
.history-box .entries .entry .title:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 4px solid #ffffff;
    background-color: #1d1d1d;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    right: -113px;
    z-index: 1000;
}
.history-box .entries .entry .title.big:before {
    width: 24px;
    height: 24px;
    transform: translate(4px, -50%);
}
.history-box .entries .entry .record {
    color: #aaa;
}
.history-box .entries .entry .record p {
    line-height: 1.4em;
}
.history-box .entries .entry:nth-child(2n) {
    text-align: left;
    float: right;
}
.history-box .entries .entry:nth-child(2n) .title:before {
    left: -103px;
}
.history-box .entries .entry:nth-child(2n) .title.big:before {
    transform: translate(-4px, -50%);
}
figure img{
max-width: 350px;
}
figcaption{
font-size: 14px;
margin-top: 10px;
}
.tate{
display: flex;
width:500px;
flex-wrap: nowrap;
gap:10px;
}
.tate-1{
width: 70%;
}
.tate-2{
width: 30%;
}
.tate-1 img{
width: 100%;
}
.tate-2 img{
width: 100%;

}
figure{
width: auto;
margin: 0;
padding: 0;
}
g.image-box {
    display: none; /* 初期状態では非表示 */
}
.pad-top50{
padding-top: 50px;
}
.j-map{
margin: 0 auto;
text-align: center;
}
.center{
text-align: center;
display: flex;
justify-content: center;
padding: 0 20px;
}
.center p{
text-align: left;
}
.arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
}

.arrow::before {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 20px;
  height: 2px;
  border-radius: 9999px;
  background-color: #fff;
  transform: rotate(45deg);
  transform-origin: calc(100% - 2px) 50%;
}

@media screen and (max-width:1200px) {
.logo {
position: absolute;
width: 300px;
top: 10px;
left: 5%;
}
h2{
font-size: 28px;
text-align: center;
margin: 0 20px 40px;
font-weight: 700;
}
h2.en-h2{
font-size: 34px;
color: var(--db);
}
/*コンセプト*/
.concept-flex{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
margin: 40px auto;
}
.concept-l{
width: 100%;
font-size: 18px;
line-height: 200%;
font-weight: 600;
text-align: left;
padding: 0 20px;
}
.concept-r{
width:100%;
padding: 0 20px;
}
/*メッセージ*/
.waves {
top:0;
position:relative;
width: 100%;
height:8vh;
margin-bottom:-7px; /*Fix for safari gap*/
min-height:80px;
max-height:100px;
}
.message{
display: block;
flex-direction: column;
padding: 20px;
}
.message p{
margin: 20px;
line-height: 150%;
font-size: 18px;
}
.message-t h1{
font-size: 1.2vw;
letter-spacing: 5px;
background-color: var(--db);
padding: 5px 20px;
color:var(--w) ;
display: inline-block;
text-align: center;
margin: 20px;
}
.message-t h2{
font-size: 4vw;
text-align:right; 
line-height:150%;
}
.ship-box{
display: flex;
flex-direction: column;
margin-bottom: 20px;
}
.ship-img{
width: 100%;
text-align: center;
}
.ship-img p{
font-size: 18px;
line-height: 200%;
padding-bottom: 50px;
}
.ship-data{
padding: 40px 40px 0;
width: 100%;
text-align: center;
}
.ship-data h3{
margin: 0;
font-size: 26px;
text-align: center;
text-shadow: #2a4073 1px 0 10px;
}
.company th{
padding: 20px 10px;
font-size: 14px;
width: 100%;
display: block;
text-align: left;
background-color: #efefef;
}
.company td{
padding: 20px 10px;
text-align: left;
width: 100%;
display: block;
}
.uminotami-box h2{
margin:10px auto 20px;
line-height: 100%;
height: 70px;
font-size: 4vw;
}
.uminotami-box h3.h3_en{
margin: 20px 0 20px;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
background-color:var(--bk);
color: var(--w);
padding: 5px 20px;
font-size: 30px;
letter-spacing: 10px;
width: 80%;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
}

@media screen and (max-width:768px) {
.video_wrapper > video {
position: absolute;
object-fit:cover;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.slide-img {
  flex: 0 0 auto;
  width: 100vw; /* 2枚の画像を1セットで中央配置 */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide-img img {
  width: 100%;
  height: auto;
  max-height: 30vh; /* 画像の高さを制限 */
  object-fit: cover;
}
/*recruit*/
.recruit-box{
display: flex;
flex-direction: column-reverse; /* Stack elements vertically */
align-items: flex-start; /* Center align the content */
}
.recruit {
flex-direction: column;
padding: 40px;
background: #01579B;
position: relative;
color: #fff;
z-index: 1;
width: 100%;
justify-content: center;
text-align: center;
}
.recruit p{
font-size: 18px;
display: inline-block;
text-align: left;
}
.recruit::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #01579B;
transform: scaleY(1.3) perspective(.6em) rotateX(5deg);
transform-origin: bottom left;
border-radius: 8px 8px 0 0;
}
.recruit-img {
  background: #01579B;
  width: 100%;
  height: auto;
}
.recruit__img {
  width: 100%;
  height: auto;
  position: relative;
}
.recruit__img img{
  width: 100%;
 object-fit:scale-down;
}
.button-box{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: 100px auto 50px;
}
.pc{
display: none;
}
.sp{
display: block;
}
.top-about{
position: absolute;
top:30%;
left: 0%;
right: 0%;
}
.top-about-en{
position: absolute;
top:35%;
left: 0%;
right: 0%;
}
.message-box{
height: 100%;
display: flex;
padding: 20px;
flex-direction: column;
align-items: center;
}
.message-box:nth-child(even){
flex-direction: column;
}
.message-1{
width: 100%;
}
.message-2{
width: 100%;
}
.message-3{
width: 100%;
}
.message-img{
width: 100%;
z-index: 1;
}
.message-img img{
margin-bottom: 0px;
}
.message-text-box{
background-color:rgba(42,131,162,0.70);
width: 100%;
text-align: left;
font-size: 14px;
line-height: 200%;
z-index: 2;
padding: 20px;
}
.message-t-1{
width: 100%;
}
.message-t-2{
width: 100%;
}
.message-t-3{
width: 100%;
}
.message-text{
padding: 40px 0;
text-align: left;
line-height: 200%;
}
.message-text h3{
text-align: center;
font-size: 21px;
}
.message-t{
position: relative;
text-align: right;
right: 0;
}
.message-t h1{
font-size: 3vw;
letter-spacing: 5px;
background-color: var(--db);
padding: 5px 20px;
color:var(--w) ;
display: block;
text-align: center;
margin: 20px;
}
.message-t h2{
font-size: 7vw;
text-align:left; 
line-height:150%;
}
.message-content{
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.message-content h2{
letter-spacing: 2px;
margin: 40px 0;
font-size: 24px;
}
.sin{
margin: 0 20px 0 auto;
opacity: 0;
transition: opacity 4s ease-in-out;
}
.message h2{
color: var(--w);
font-size: 40px;
letter-spacing: 10px;
line-height: 120%;
}
.message p{
margin: 40px 20px;
line-height: 150%;
font-size: 24px;
text-align: center;
letter-spacing: 1px;
}
.right-img p {
text-align: right;
margin: 0;
font-size: 18px;
padding-right: 30px;
}
h1.js-text{
  font-size: 36px;
}
h1.js-text span{
  display: inline-block;
  font-size: 36px;
color: var(--w);
letter-spacing: 2px;
}
.en-h1{
font-size: 28px;
letter-spacing: 0;
text-align: center;
font-weight: 900;
margin-bottom: 0;
}
.uminotami-box{
width: 100vw; /* 画面の半分 */
height: 100vh; /* 画面の半分 */
padding: 20px;
text-align: center;
font-size: 16px;
padding: 10px;
overflow: auto;
}
.uminotami-box img{
width: 250px;
height: 250px;
}
.uminotami-box h2{
margin:50px auto 0;
line-height: 100%;
height: 70px;
font-size: 6vw;
}
.uminotami-box h3{
margin: 20px 0 20px;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
background-color:var(--bk);
color: var(--w);
padding: 5px 40px;
font-size: 30px;
letter-spacing: 10px;
width: 90%;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.uminotami-box h3.h3_en{
margin: 20px 0 20px;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
background-color:var(--bk);
color: var(--w);
padding: 5px 20px;
font-size: 20px;
letter-spacing: 10px;
width: 90%;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 2px 3px 3px rgba(0, 0, 0, 0.4);
}
.uminotami-box p{
margin: 20px;
}
.history h2{
font-size: 40px;
text-align: center;
font-weight: 700;
}
.history-box .entries {
width: 100%;
padding: 0 20px;
}
.history-box .entries .entry {
width: 100%;
float: none;
text-align: left;
padding-left: 40px;
position: relative;
margin-top: 20px; /* エントリー間の余白 */
}
.history-box .entries .entry:not(:first-child) {
    margin-top: -0px;
}
.history-box:before {
left: 20px; /* 左側に線を移動 */
transform: none;
}

.history-box .entries .entry .title:before {
left: -41px; /* タイトルの丸を線に合わせる */
right: auto;
}
.history-box .entries .entry .title.big:before {
    transform: translate(-4px, -50%);
}
.history-box .entries .entry:nth-child(2n) .title:before {
left: -41px;
}

.history-box .entries .entry:nth-child(2n) .title.big:before {
transform: translateY(-3px -50%);
}

figure img{
max-width: 100%;
}
.tate{
display: flex;
width: auto;
flex-wrap: wrap;
}
.tate-1{
width: 100%;
}
.tate-2{
width: 50%;
}
.tate figure img{
height: auto;
}
.dounsan{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 100%;
width: 100%;
padding: 20px;
}
.dounsan h1{
color: var(--w);
font-size: 40px;
}
.dounsan h2{
color: var(--w);
font-size: 20px;
letter-spacing: 10px;
}
.history-b{
max-width: 800px;
margin:30px 20px 30px;
}
.history-b a{
padding:20px 20px;
background-image: url("../parts/history-bg.jpg");
background-position: center;
background-size:cover;
}
.history-b :hover{
background-image: none;
background-color:rgba(56,77,182,1.00);
transition: 0.5s;
}
.history-b h2{
font-size: 24px;
text-align: left;
margin: 0;
font-weight: 400;
letter-spacing: 10px;
}
.profile-b{
max-width: 800px;
margin:0 20px 30px;
}
.profile-b a{
padding:20px 20px;
background-color:aliceblue;background-image: url("../parts/profile-bg.jpg");
background-position: center;
background-size:cover;
}
.profile-b :hover{
background-image: none;
background-color:rgba(56,188,184,1.00);
transition: 0.5s;
}
.profile-b h2{
font-size: 24px;
text-align: left;
margin: 0;
font-weight: 400;
letter-spacing: 10px;
}
.event-b{
max-width: 800px;
margin:0 20px 30px;
}
.event-b a{
padding:20px 20px;
background-color:aliceblue;background-image: url("../parts/event-bg.jpg");
background-position: center;
background-size:cover;
}
.event-b :hover{
background-image: none;
background-color:#95cd9f;
transition: 0.5s;
}
.event-b h2{
font-size: 24px;
text-align: left;
margin: 0;
font-weight: 400;
letter-spacing: 10px;
}
/*press*/
.press{
width: 100%;
background-color: #fff;
color: #222;
padding: 40px 20px;
display: block;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.press h2{
display: block;
width: 100%;
margin: 0;
text-align: center;
}
.press dl{
width: 100%;
margin: 0 auto;
padding: 40px 0;
display: flex;
flex-wrap: wrap;
gap:0;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-left: none;
padding-left: 0;
}
.press dt{
width: 100%;
text-align: left;
padding: 5px 20px;
background-color:#F2F2F2;
margin: 0;
}
.press dd{
width: 100%;
margin: 0;
padding: 5px 20px;
font-size: 14px;
}
/*社内event*/
.event-box{
background-color: #F4F4F4;
color: #222;
padding: 40px 20px 40px;
margin-top: 80px;
}
.article-e{
max-width: 1000px;
margin: 40px auto;
padding: 20px 20px 20px;
border: 1px solid #eee;
background-color:#fff;
line-height: 150%;
}
.ayumi{
font-size: 30px;
}
}