@charset "UTF-8";
/* CSS Document */
.fade-in {
  opacity: 0;
}
.fade-in.up {
  transform: translateY(50px);
}
.fade-in.down {
  transform: translateY(-50px);
}
.fade-in.left {
  transform: translateX(50px);
}
.fade-in.right {
  transform: translateX(-50px);
}
#top-nami{
}
.top-slide{
position: relative;
}
.top-slide:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.0);
  background-image: radial-gradient(#426579 20%, transparent 20%),
    radial-gradient(#426579 20%, transparent 20%);
  background-size: 3px 3px;
  background-position: 0 0, 3px 3px;
}
.naminami{
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
margin: auto;
z-index: 20;
width: 100%;
height: auto;
box-sizing: border-box;
vertical-align: bottom;
}
.naminami svg{
vertical-align:bottom;
box-sizing: border-box;
margin-bottom:-5px;
}
.logo-i{
position: absolute;
z-index: 30;
right: 10%;
bottom: -50px;
width: 20vw;
}
.video-wrapper {
  position: relative;
  height: 90vh;
  width: 100%;
}
.video-wrapper video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
.cover{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(8,68,36,0.6166841736694677) 35%, rgba(2,96,115,1) 100%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ship1{
position: absolute;
top:0%;
left: 30%;
width: 45%;
z-index: 5;
opacity: 0;
transform: translateX(50px);
}
.ship2{
position: absolute;
top:15%;
left: 35%;
width: 55%;
z-index: 6;
opacity: 0;
transform: translateX(50px);
}
.ship3{
position: absolute;
top:32%;
left: 38%;
width: 63%;
z-index: 8;
opacity: 0;
transform: translateX(50px);
}
.top-concept {
position: absolute;
top: 10%;
left: 2%;
text-align: left;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 2px 2px 3px rgba(0, 0, 0, 0.4);
color: #fff;
margin: auto;
z-index: 20;
padding: 0 40px;
opacity: 0;
animation: fadeInBackground 2s ease-in-out forwards;
font-size: 6vw;
font-weight: 700;
line-height: 150%;
}
/* フェードインアニメーション */
@keyframes fadeInBackground {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*.top-concept span {
opacity: 0;
display: inline-block;
transform: translateY(20px);
font-size: 8vw;
font-weight: 700;
line-height: 100%;
}*/
.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);
}
#global{
padding: 40px 20px 100px;
display: flex;
justify-content: center;
font-size:18px;
line-height: 200%;
max-width: 1000px;
margin: 40px auto 100px;
}
#greeting{
position: relative;
/*background-color:rgba(173,203,205,1.00);*/
/*background-image:url("../parts/umi.jpg");*/
background: #2A7B9B;
background: linear-gradient(160deg,rgba(42, 123, 155, 1) 0%, rgba(68, 85, 128, 1) 50%, rgba(90, 109, 140, 1) 100%);
margin-bottom: 0;
height: auto;
padding: 0;
line-height: 200%;
}
#greeting h2{
line-height: 150%;
color: #fff;
}
.greeting-box img{
margin: 0 40px 40px 40px;
}
.greeting-img-wrapper {
position: relative;
overflow: hidden;
width: 100%;
line-height: 0; 
padding: 50px 0 0 40px;
}
p.ss{
font-size: 14px;
background-color: #333;
color: #fff;
display: inline-block;
padding: 2px 30px;
letter-spacing: 5px;
margin: 0 0 20px;
}

.greeting-img-wrapper img {
display: block;
max-width: 30%;
height: auto;
z-index: 5;
}
.gtc{
position: absolute;
top: -60px;
right: 40px;
width: 60%;
height: 90%;
background: #ebfbff;
background: linear-gradient(183deg,rgba(235, 251, 255, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(211, 209, 222, 1) 100%);
z-index: 3;
border-radius: 10px;
 box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.2);
}
.gtc-en{
position: absolute;
top: -60px;
right: 40px;
width: 60%;
height: 100%;
background: #ebfbff;
background: linear-gradient(183deg,rgba(235, 251, 255, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(211, 209, 222, 1) 100%);
z-index: 3;
border-radius: 10px;
 box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.2);
}
.img-cover{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-color: rgba(76,71,71,1.00);*/
/*  background-color:rgba(173,203,205,1.00);*/
transform: translateY(0%);
z-index: 2;
pointer-events: none;
line-height: 0;
font-size: 0;
}
img.message-s {
position: absolute;
top: -150px;
left: 28%;
z-index: 4;
width: 34%;
transform: rotate(-10deg);
}
img.message-s-en {
position: absolute;
top: -180px;
left: 28%;
z-index: 4;
width: 34%;
transform: rotate(-10deg);
}
.greeting-t{
position: absolute;
top: 0;
right: 5%;
/*background-color:rgba(173,203,205,1.00);*/
/*background-color: rgba(76,71,71,1.00);*/
padding: 20px 0 0 0;
width: 55%;
min-height: 60%;
color:#000;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
flex-wrap:wrap;
flex-direction: column;
}
.greeting-t h2{
font-size: 3vw;
color:#000!important;
margin: 0;
line-height: 120%;
}
p.text-r{
text-align: right;
}
.ls5{
letter-spacing: 5px;
}
.btn-w{
display: flex;
justify-content: center;
}
.btn-w p a{
border: 1px solid #000;
color: #000;
text-decoration: none;
padding: 2px 20px 2px 22px;
font-size: 18px;
border-radius: 10px;
letter-spacing: 2px;
}
.btn-w p :hover{
border: 1px solid #fff;
color: #fff;
text-decoration: none;
padding: 2px 20px 2px 22px;
font-size: 18px;
border-radius: 10px;
letter-spacing: 2px;
background-color: #000;
}
.bg-box{
position: relative;
}
.bg-1{
position: absolute;
top: 5%;
background-color:rgba(251,249,242,1.00);
/*clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);*/
width: 60%;
height: 80%;
z-index: -1;
}
.bg-2{
position: absolute;
top: 0;
right:0;
background-color:rgba(232,241,239,1.00);
/*clip-path: polygon(26% 0, 100% 0, 100% 43%, 100% 100%, 68% 100%, 24% 100%, 34% 76%, 25% 49%, 35% 23%);*/
width: 40%;
height: 80%;
z-index: -1;
}
.bg-3{
position: absolute;
bottom: 5%;
background-color:rgba(221,229,237,1.00);
/*clip-path: polygon(0 0, 100% 0, 100% 30%, 100% 71%, 68% 100%, 0 100%, 0% 70%, 0% 30%);*/
width: 60%;
height: 60%;
z-index: -1;
}
.message-content{
max-width: 1200px;
margin: 0 auto;
padding: 60px 40px;
}
.message-content p{
line-height: 170%;
margin-bottom: 30px;
}
.message-content h2{
letter-spacing: 2px;
margin: 40px 0;
font-size: 36px;
text-align: left;
color:rgba(52,87,124,1.00);
}
.m-top{
position: relative;
display: flex;
justify-content: flex-start;
}
.m-top-t{
position: absolute;
right: 5%;
top: 30%;
width: 30%;
}
.m-top-t p{
margin: 0;
letter-spacing: 2px;
font-size: 18px;
}
.m-top-t h1{
font-size: 4vw;
margin: 0;
letter-spacing: 10px;
}
.message-r{
border-bottom: 1px solid #000;
padding-bottom: 5px;
letter-spacing: 2px;
}
#ehimeowner{
margin-top: 0;
position: relative;
background-color:rgba(0,0,0,1.00);
color: #fff;
z-index: 1;
padding: 60px;
display: flex;
align-items: center;
justify-content:space-between;
padding: 60px;
flex-wrap: wrap;
}
.dounkisen-1{
width: 20%;
position: relative;
}
.firstship{
position: absolute;
right: -50px;
bottom: -60px;
width: 100%;
}
.dounkisen-2{
padding: 40px;
width: 50%;
}
.dounkisen-2 h2{
margin-bottom: 40px;
font-size: 36px;
}
.dounkisen-2 h3{
text-align: center;
}
.dounkisen-2 p{
margin: 40px 0;
}
.dounkisen-3{
width: 20%;
}
.dounkisen-3 img{
margin-bottom: 30px;
}
.ownership{
position: absolute;
z-index: 2;
width: 100%;
color:rgba(255,255,255,0.30);
font-size: clamp(1rem, 80vw, 20rem);
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#work-experience{
position: relative;
text-align: center;
padding: 40px;
background: #4a4a57;
background: linear-gradient(141deg,rgba(74, 74, 87, 1) 0%, rgba(86, 115, 140, 1) 35%, rgba(9, 112, 103, 1) 100%);
color: #fff;
}
#work-experience h2{
text-align: center;
}
#work-experience p{
display: inline-block;
text-align: left;
}
ul.experience{
margin: 60px 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.experience li{
width: calc((100% - 60px) /4 );
margin: 0;
}
.experience h3{
text-align: center;
margin: 20px 0;
border-top: 1px dotted #ccc;
border-bottom: 1px dotted #ccc;
padding: 5px;
letter-spacing: 5px;
padding-top: 10px;
}
.experience p{
margin: 0 10px 10px;
}
#entry{
text-align: center;
padding: 40px 20px;
}
#entry h2{
text-align: center;
}
ul.entry-li{
margin: 50px 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
}
.entry-li li{
width: 250px;
height: 250px;
margin: 0 5%;
font-size:28px;
font-weight: 700;
padding: 20px;
border: 1px solid #ccc;
vertical-align: middle;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
}
.entry-li li img{
width: 200px;
}
.entry-li li a{
text-decoration: none;
color: rgba(10,31,113,1.00);
}
#voice{
background-color: #d4dcd6;
padding: 40px 20px;
}
ul.voice-li{
margin: 50px 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: center;
}
.voice-li li{
width: 31%;
margin: 1%;
position: relative;
display: block;
}
.v-t{
position: absolute;
bottom: 20px;
left: 10%;
width: 80%;
background-color: rgba(000,000,000,0.65);
padding: 20px;
display: flex;
align-items: center;
color: #fff;
}
.v-t::after{
position: absolute;
top: 50%;
right: -15px;
content: '';
width: 50px;
height: 10px;
transform: translateY(-50%);
color:rgba(19,168,176,1.00);
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.v-t-3::after {
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
}

.v-t h2{
margin: 0;
margin-right: 10px;
font-size: 28px;
white-space: nowrap;
}
.v-t h2 span{
margin: 0;
font-size: 16px;
display: inline-block;
}
.v-t p{
margin: 0;
font-size: 14px;
}
.nmb{
position: absolute;
top: -10px;
right: 10px;
width: 60px;
height: 60px;
background-color: #000;
color: #fff;
padding: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.voice-box{
display: flex;
align-items: stretch;
padding: 100px 0 40px;
background-color: #000;
}
.voice-img{
width: 40%;
}
.voice-img img {
width: auto;
height: 100%;
object-fit: cover;
}
.voice-t{
background-color: #fff;
width: 60%;
padding: 60px;
}
.voice-t h1{
font-size: 21px;
display: inline-block;
background-color: #000;
color: #fff;
padding: 5px 20px 5px 25px;
letter-spacing: 5px;
margin: 0;
}
.voice-t h2{
text-align: left;
font-size: 32px;
border-bottom: 1px solid #000;
padding-bottom: 5px;
}
.voice-t h4{
font-size: 18px;
color: #2a83a2;
border-bottom: 1px dotted #2a83a2;
padding-bottom: 5px;
}
.voice-nav{
background-color: #000;
padding: 20px 0;
}
.voice-nav ul{
display: flex;
list-style: none;
max-width: 1200px;
margin-left: 0;
margin: 40px auto;
padding: 0;
align-items: flex-start;
justify-content: center;
gap:2%;
}
.voice-nav ul li{
font-size: 16px;
text-align: center;
}
.voice-nav ul li a {
  display: block;
  padding: 10px;
  width: 200px;
  color: #000;
  text-decoration: none;
  background-color: #fff;
}
.voice-nav li:hover a {
  background-color: #d4dcd6;
}
.voice-nav li.current a {
  background-color: #2a83a2; /* 好きな色に変更可 */
}
.greeting-waku{
display: flex;
justify-content: space-between;
align-items: flex-start;
gap:40px;
}
.greeting-okochi{
display: flex;
justify-content: center;
align-items: center;
gap:40px;
}
.greeting-waku:nth-child(even){
flex-direction: row-reverse;
}

.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;
}
@media screen and (max-width:768px) {
.ship1{
position: absolute;
top:33%;
left: 25%;
width: 75%;
z-index: 5;
}
.ship2{
position: absolute;
top:53%;
left: 15%;
width: 85%;
z-index: 6;
}
.ship3{
position: absolute;
top:70%;
left: 3%;
width: 97%;
z-index: 8;
}
.top-concept {
position: absolute;
top: 15%;
left: 1%;
text-align: left;
 text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4), 2px 2px 3px rgba(0, 0, 0, 0.4);
color: #fff;
margin: auto;
z-index: 20;
padding: 0 20px;
opacity: 0;
animation: fadeInBackground 2s ease-in-out forwards;
font-size: 8vw;
font-weight: 700;
line-height: 150%;
}
/*.video-wrapper .top-concept {
position: absolute;
top: 17%;
bottom: auto;
left: 0;
right: 0;
max-width: 95%;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
text-align: left;
text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4), 8px 5px 6px rgba(0, 0, 0, 0.4), -2px -3px 6px rgba(0, 0, 0, 0.4), -3px 2px 6px rgba(0, 0, 0, 0.4);
color: #fff;
margin: auto;
z-index: 20;
padding: 0 20px;
}*/
/*.top-concept span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
  font-size: 32px;
  font-weight: 700;
}*/
#global{
padding: 20px;
display: flex;
justify-content: center;
font-size:16px;
line-height: 200%;
}
#greeting{
padding: 20px;
line-height: 200%;
}
#greeting img{
max-width: 100%;
}
.greeting-waku{
display: block;
justify-content: space-between;
align-items: flex-start;
gap:20px;
}
.greeting-waku:nth-child(even){
flex-direction: reverse;
}
.greeting-t{
position: relative;
top: 0;
right: 0;
transform: translateY(-0%) !important;
padding: 20px;
width: 100%;
min-height: 100%;
color: rgba(29,42,51,1.00);
}
#ehimeowner{
position: relative;
background-color:rgba(0,0,0,1.00);
color: #fff;
z-index: 1;
padding: 60px 20px;
display: flex;
align-items: center;
justify-content:space-between;
flex-wrap: wrap;
}
.dounkisen-1{
width: 90%;
position: relative;
}
.dounkisen-2{
padding: 40px 0;
width: 100%;
}
.dounkisen-3{
width: 100%;
}
.entry-li li{
width: 250px;
height: 250px;
margin: 0 5%;
margin-bottom: 20px;
}
#work-experience{
padding: 40px 20px;
}
.experience li{
width: 98%;
margin:1%;
margin-bottom: 30px;
}
.voice-li li{
width: 96%;
margin: 2%;
margin-bottom: 20px;
position: relative;
}
.v-t{
position: absolute;
bottom: 20px;
left: -2%;
width: 104%;
background-color: rgba(000,000,000,0.65);
padding: 10px;
display: flex;
align-items: center;
color: #fff;
}
.v-t::after{
position: absolute;
top: 50%;
right: 20px;
content: '';
width: 30px;
height: 10px;
transform: translateY(-50%);
color:rgba(19,168,176,1.00);
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.v-t h2{
margin: 0;
margin-right: 10px;
font-size: 21px;
}
.v-t h2 span{
margin: 0;
font-size: 14px;
display: inline-block;
}
.voice-box{
display: block;
align-items: center;
padding: 100px 0 40px;
background-color: #000;
}
.voice-img{
width: 100%;
}
.voice-t{
background-color: #fff;
width: 100%;
padding: 20px;
}
.voice-t h2 span{
letter-spacing: 0;
}
.voice-nav ul{
display: block;
list-style: none;
margin-left: 0;
margin: 40px auto;
align-items: flex-start;
justify-content: center;
gap:0;
}
.voice-nav ul li a {
  display: block;
  padding: 10px;
  width: 80%;
  color: #000;
  text-decoration: none;
  background-color: #fff;
  margin: 0 auto 20px;
}
.m-top-t p{
margin: 0;
letter-spacing: 2px;
font-size: 12px;
}
.m-top-t h1{
font-size: 5vw;
margin: 0;
letter-spacing: 1px;
}
.message-content{
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.message-content p{
line-height: 170%;
margin-bottom: 30px;
}
.message-content h2{
letter-spacing: 2px;
margin: 40px 0;
font-size: 28px;
text-align: left;
}
.gtc{
position:absolute;
top: 52%;
right: 5%;
width: 90%;
height: 45%;
background: #ebfbff;
background: linear-gradient(183deg,rgba(235, 251, 255, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(211, 209, 222, 1) 100%);
z-index: 3;
border-radius: 10px;
 box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.2);
}
.gtc-en{
position:absolute;
top: 52%;
right: 5%;
width: 90%;
height: 45%;
background: #ebfbff;
background: linear-gradient(183deg,rgba(235, 251, 255, 1) 0%, rgba(230, 230, 230, 1) 50%, rgba(211, 209, 222, 1) 100%);
z-index: 3;
border-radius: 10px;
 box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.2);
}
img.message-s {
position: absolute;
top: -50px;
left: 5%;
z-index: 4;
width: 60%;
transform: rotate(-10deg);
}
img.message-s-en {
position: absolute;
top: -50px;
left: 5%;
z-index: 4;
width: 60%;
transform: rotate(-10deg);
}
.greeting-box img{
margin: 0 40px 40px 40px;
}
.greeting-img-wrapper {
position: relative;
overflow: hidden;
width: 100%;
line-height: 0; 
padding: 40px 20px 0;
}
.greeting-img-wrapper img {
display: block;
width: 85%;
height: auto;
z-index: 5;
margin: auto;
}
.ls5{
letter-spacing: 1px;
}
.logo-i{
position: absolute;
z-index: 30;
right: 5%;
bottom: -50px;
width: 40vw;
}
address h2{
letter-spacing: normal;
padding-left: 0;
}
}