@charset "UTF-8";
/* 文字サイズ
--------------------------------------------- */
/* 123_140 */
.size_123_140 {
  font-size: 7.6875rem;
  font-size: clamp(7.6875rem, 0.25rem + 8.5vw, 8.75rem);
}

/* 100_115 */
.size_100_115 {
  font-size: 6.25rem;
  font-size: clamp(6.25rem, -0.3125rem + 7.5vw, 7.1875rem);
}

/* 58_66 */
.size_58_66 {
  font-size: 3.625rem;
  font-size: clamp(3.625rem, 0.125rem + 4vw, 4.125rem);
}

/* 42_48 */
.size_42_48 {
  font-size: 2.65625rem;
  font-size: clamp(2.65625rem, -0.0125rem + 3.05vw, 3.0375rem);
}

/* 36_41 */
.size_36_41 {
  font-size: 2.28125rem;
  font-size: clamp(2.28125rem, 0.3125rem + 2.25vw, 2.5625rem);
}

/* 26_29 */
.size_26_29 {
  font-size: 1.625rem;
  font-size: clamp(1.625rem, 0.3125rem + 1.5vw, 1.8125rem);
}

/* 22_25 */
.size_22_25 {
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 0.0625rem + 1.5vw, 1.5625rem);
}

/* 19_21 */
.size_19_21 {
  font-size: 1.1875rem;
  font-size: clamp(1.1875rem, 0.3125rem + 1vw, 1.3125rem);
}

/* 19_16 */
.size_btn {
  font-size: 1rem;
  font-size: clamp(1rem, 0.931402439rem + 0.2926829268vw, 1.1875rem);
}

/* 17_19 */
.size_17_19 {
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 0.1875rem + 1vw, 1.1875rem);
}

/* 17_18 */
.size_17_18 {
  font-size: 1.0625rem;
  font-size: clamp(1.0625rem, 0.625rem + 0.5vw, 1.125rem);
}

/* 16_17 */
.size_16_17 {
  font-size: 1rem;
  font-size: clamp(1rem, 0.5625rem + 0.5vw, 1.0625rem);
}

@media screen and (max-width: 1400px) {
  /* 123_140_57 */
  .size_123_140 {
    font-size: 3.5625rem;
    font-size: clamp(3.5625rem, 2.0533536585rem + 6.4390243902vw, 7.6875rem);
  }
  /* 100_115_50 */
  .size_100_115 {
    font-size: 3.125rem;
    font-size: clamp(3.125rem, 1.9817073171rem + 4.8780487805vw, 6.25rem);
  }
  /* 58_66_36 */
  .size_58_66 {
    font-size: 2.28125rem;
    font-size: clamp(2.28125rem, 1.7896341463rem + 2.0975609756vw, 3.625rem);
  }
  /* 42_48_30 */
  .size_42_48 {
    font-size: 1.9rem;
    font-size: clamp(1.9rem, 1.6347560976rem + 1.1317073171vw, 2.625rem);
  }
  /* 26_29_18 */
  .size_26_29 {
    font-size: 1.125rem;
    font-size: clamp(1.125rem, 0.9420731707rem + 0.7804878049vw, 1.625rem);
  }
  /* 22_25 */
  .size_22_25 {
    font-size: 1rem;
    font-size: clamp(1rem, 1.512195122rem - 0.5853658537vw, 1.375rem);
  }
  /* 17_18_14 */
  .size_17_18 {
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.806402439rem + 0.2926829268vw, 1.0625rem);
  }
  /* 16_17_14 */
  .size_16_17 {
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.8292682927rem + 0.1951219512vw, 1rem);
  }
}
.ly_1300 {
  max-width: 71.875rem;
  max-width: clamp(71.875rem, 6.25rem + 75vw, 81.25rem);
  margin-left: auto;
  margin-right: auto;
}

/* FV
--------------------------------------------- */
.sec_fv {
  width: 100%;
  height: 100%;
  aspect-ratio: 1400/830;
  min-height: 830px;
  position: relative;
  color: #fff;
  background-color: #fafbfd;
}

.wrap_fv {
  display: flex;
  align-items: center;
  width: 73.5%;
  max-width: 1700px;
  margin: 0 auto;
  height: 100%;
  max-height: 100vh;
}

.ttlbox_fv {
  position: relative;
  text-align: left;
  z-index: 1;
  font-size: 2.65625rem;
  font-size: clamp(2.65625rem, -0.0125rem + 3.05vw, 3.0375rem);
}

.ttl_fv {
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
  padding-top: 100px;
}

.ttl_fv_deco {
  font-size: 1.03125rem;
  font-size: clamp(1.03125rem, 0.025rem + 1.15vw, 1.175rem);
  letter-spacing: 0.1em;
  line-height: 1.7;
  display: block;
}

.btn_marinstamp {
  font-size: 1.0625rem;
  position: absolute;
  right: 8%;
  bottom: 70px;
  border-radius: 50%;
  background-color: #fff;
  width: 11.875rem;
  width: clamp(11.875rem, 0.0625rem + 13.5vw, 13.5625rem);
  aspect-ratio: 1/1;
  z-index: 2;
  color: #025593;
  box-shadow: 0 0 10px 10px rgba(60, 60, 145, 0.05);
  cursor: pointer;
}

.btn_marinstamp::after {
  content: "";
  border: 1px dashed #025593;
  position: absolute;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  top: 5px;
  left: 0;
  right: 0;
  margin: 0 auto;
  animation: rotate360 20s linear infinite;
}

.btn_marinstamp::before {
  content: "";
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #fff;
  position: absolute;
  top: 15px;
  left: 10px;
  width: 25px;
  height: 23px;
  transform: rotate(-50deg);
}

.btn_marinstamp a {
  color: #025593;
}

.btn_marinstamp .ico_arrow {
  position: absolute;
  right: 20px;
  bottom: 0;
  background: linear-gradient(to right, #006aff, #00c9ff);
  z-index: 1;
}

.btn_marinstamp .ico_arrow::before,
.btn_marinstamp .ico_arrow::after {
  background-color: #fff;
}

.btnimg_marinstamp {
  position: relative;
  width: 23%;
  z-index: 1;
  margin: 0 auto 5px auto;
}

.btntxt_marinstamp {
  line-height: 1.4;
  font-weight: 500;
}

.bg_fv {
  width: 162vw;
  position: absolute;
  top: -94vw;
  left: 50%;
  margin-left: -81vw;
}

@media screen and (max-width: 1400px) {
  .ttl_fv {
    font-size: 1.325rem;
    font-size: clamp(1.325rem, 0.8379573171rem + 2.0780487805vw, 2.65625rem);
  }
  .ttl_fv_deco {
    font-size: 0.5625rem;
    font-size: clamp(0.5625rem, 0.3910060976rem + 0.7317073171vw, 1.03125rem);
  }
  .bg_fv {
    width: 2250px;
    top: -1285px;
    margin-left: -1125px;
  }
}
@media screen and (max-width: 900px) {
  .sec_fv {
    color: #025593;
  }
  .wrap_fv {
    width: 83%;
    display: block;
    max-height: 800px;
  }
  .ttl_fv {
    padding-top: 120px;
  }
}
/* スライダー
--------------------------------------------- */
.slide_fv li, .slide_fv picture {
  position: relative;
  width: 100%;
  height: 100%;
}

.slide_fv li img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.slide_fv .slick-track, .slide_fv .slick-list {
  height: 100%;
}

.slide_fv picture {
  display: block;
}

.mainimg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.slide_fv .slick-active img {
  transition: 4s;
  transform: scale(1.04);
}

.slide_fv .slick-slide img {
  transition: 4s;
}

.mask {
  -webkit-mask-image: url(../img/top/mask_top_fv.png);
          mask-image: url(../img/top/mask_top_fv.png);
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center bottom;
          mask-position: center bottom;
}

.ttlbox_fv span, .ttlbox_fv small {
  transform: translateY(20px);
  opacity: 0;
  display: inline-block;
}

.loaded .ttlbox_fv span, .loaded .ttlbox_fv small {
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.loaded .ttlbox_fv span.show, .loaded .ttlbox_fv small.show {
  opacity: 1;
  transform: translateY(0);
}

@media screen and (max-width: 900px) {
  .mainimg img {
    position: static;
  }
}
/* Loading
--------------------------------------------- */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: top;
  letter-spacing: 0.1em;
}

#loading p {
  margin-bottom: 10px;
}

.spinner_txt img {
  width: 250px;
}

.spinner_txt {
  animation: 0.7s 0.5s sk-scaleout ease forwards;
  transform: translateY(20px);
  opacity: 0;
  letter-spacing: 0.2em;
}

/* Loading Animation */
@keyframes sk-scaleout {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
/* about
--------------------------------------------- */
.sec_about {
  padding-top: 200px;
  padding-bottom: 100px;
  background-color: #fafbfd;
}

.wrap_about {
  max-width: 1400px;
  width: 90%;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.txtbox_about {
  width: 40%;
  padding-left: 10%;
  text-align: left;
}

.mmmap-box {
  width: 58%;
  position: relative;
  color: #025593;
  padding-top: 40px;
  font-size: 1.375rem;
  font-size: clamp(1.375rem, 0.0625rem + 1.5vw, 1.5625rem);
}

.ttl_about {
  color: #025593;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

.txt_about {
  line-height: 2;
  padding-right: 10%;
  margin-bottom: 50px;
  text-align: justify;
}

.txt_about p {
  margin-bottom: 1em;
}

.list_mind {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
}

.list_mind::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/top/bg_top_mind.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 85% auto;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate360 30s linear infinite;
}

.list_mind li {
  width: 35%;
  position: absolute;
}

.list_mind li div {
  background-color: #fff;
  border-radius: 50%;
  aspect-ratio: 1/1;
  box-shadow: 0 0 17px rgba(60, 60, 145, 0.07);
  display: grid;
  place-content: center;
  place-items: center;
  width: 100%;
}

.mind_staff {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  top: 0;
}

.mind_eco {
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.mind_marinstamp {
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.mind_jukisen {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
}

.list_mind img {
  width: 60%;
  margin: -10px auto 5px auto;
}

.mind_eco img {
  margin: 5px auto 10px auto;
}

.list_mind span {
  display: block;
}

.ttl_mind {
  font-weight: 500;
  position: absolute;
  z-index: 1;
  display: grid;
  place-content: center;
  place-items: center;
  width: 100%;
  aspect-ratio: 1/1;
}

@media screen and (max-width: 1400px) {
  .mmmap-box {
    font-size: 0.875rem;
    font-size: clamp(0.875rem, 0.675rem + 0.8vw, 1.375rem);
  }
}
@media screen and (max-width: 1300px) {
  .txtbox_about {
    width: 42%;
    padding-left: 5%;
  }
}
@media screen and (max-width: 950px) {
  .txtbox_about {
    width: 90%;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .wrap_about {
    flex-wrap: wrap;
  }
  .mmmap-box {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .txt_about {
    padding-right: 0;
  }
}
@media screen and (max-width: 640px) {
  .mmmap-box {
    width: 100%;
    line-height: 1.3;
  }
  .list_mind li {
    width: 38%;
  }
}
/* 流れる画像とテキスト
--------------------------------------------- */
.sec_nagare {
  padding-top: 30px;
  padding-bottom: 100px;
  position: relative;
  background-color: #fafbfd;
}

/* 流れ文字*/
.txt_nagare .txt:last-child {
  animation: 100s loop 0s linear infinite;
}

.txt_nagare .txt:first-child {
  animation: 100s loop 0s linear infinite;
}

.txt_nagare .txt {
  flex: 0 0 auto;
  padding: 0 30px;
  color: #fafbfd;
  white-space: nowrap;
  line-height: 1.2;
}

.txt_nagare {
  display: flex;
  padding: 20px 0;
}

.txt_ol {
  text-shadow: -1px -1px 0 #025593, 1px -1px 0 #025593, -1px 1px 0 #025593, 1px 1px 0 #025593;
}

.txt_nagare_cts::before {
  content: "SUSTAINABLE TECHNOLOGY FOR THE FUTURE OF OUR OCEANS";
}

@keyframes loop {
  100% {
    transform: translate(-100%);
  }
}
/* スライダー*/
.slide_nagare img {
  border-radius: 150px;
}

.slide_nagare li {
  margin: 0 10px;
}

/* 事業内容
--------------------------------------------- */
.sec_business {
  padding-top: 100px;
  padding-bottom: 180px;
  background-color: #fafbfd;
}

.ttl_business {
  color: #025593;
}

.ttlbox_business {
  margin-bottom: 50px;
}

.pic_busi {
  display: none;
}

.wrap_list_business {
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 81.25rem;
  max-width: clamp(81.25rem, 37.5rem + 50vw, 87.5rem);
  min-height: clamp(35.8125rem, -0.0625rem + 41vw, 40.9375rem);
  display: flex;
  align-items: center;
}

.list_business {
  margin-left: auto;
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.list_business li {
  width: 100%;
  position: relative;
  text-align: left;
  overflow: hidden;
  border-bottom: 1px solid #E6E6E6;
}

.list_business a {
  padding-right: 60px;
  display: block;
  position: relative;
}

.list_business .ico_arrow {
  position: absolute;
  right: 0;
  top: calc(50% - 20px);
  background: linear-gradient(to right, #006aff, #00c9ff);
}

.list_business .ico_arrow::before,
.list_business .ico_arrow::after {
  background-color: #fff;
}

.pic_busi_pc {
  position: absolute;
  width: 35.8125rem;
  width: clamp(35.8125rem, -0.0625rem + 41vw, 40.9375rem);
  height: 35.8125rem;
  height: clamp(35.8125rem, -0.0625rem + 41vw, 40.9375rem);
  aspect-ratio: 1/1;
  display: block;
  left: 0;
  top: 0px;
  position: absolute;
  border-radius: 50%;
  border: 1px solid #025593;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pic_busi_pc::before {
  content: "";
  display: block;
  aspect-ratio: 1/1;
  width: 92%;
  height: 92%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  border-radius: 50%;
  transition: 0.5s;
}

.bg_busi {
  transition: 0.5s;
}

.list_business:has(.bg_busi) + .pic_busi_pc::before {
  opacity: 1;
}

.list_business:has(#div1.bg_busi) + .pic_busi_pc::before {
  background-image: url(../img/top/img_top_business_kowan.webp);
}

.list_business:has(#div2.bg_busi) + .pic_busi_pc::before {
  background-image: url(../img/top/img_top_business_fleet.webp);
}

.list_business:has(#div3.bg_busi) + .pic_busi_pc::before {
  background-image: url(../img/top/img_top_business_ict.webp);
}

.name_busi {
  color: #025593;
}

.btn_busi {
  margin: 0 auto;
}

@media screen and (max-width: 1400px) {
  .txt_business .pc {
    display: none;
  }
  .pic_busi_pc {
    width: 45%;
    height: auto;
    aspect-ratio: 1/1;
  }
  .wrap_list_business {
    min-height: 45vw;
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 800px) {
  .list_business::after {
    display: none;
  }
  .txt_business {
    width: 85%;
    padding-right: 0;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
  }
  .list_business {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .pic_busi {
    display: block;
    margin-bottom: 10px;
  }
  .list_business li {
    margin-bottom: 40px;
    width: 48%;
  }
  .btn_busi {
    width: 85%;
  }
  .ttlbox_business {
    display: block;
    padding-bottom: 30px;
  }
  .pic_busi_pc {
    display: none;
  }
}
@media screen and (max-width: 640px) {
  .list_business {
    width: 95%;
  }
  .list_business li {
    margin-bottom: 40px;
    width: 100%;
  }
  .list_business .ico_arrow {
    display: none;
  }
  .pic_busi {
    border-radius: 50%;
    overflow: hidden;
    grid-area: pic_busi;
    aspect-ratio: 1/1;
  }
  .pic_busi img {
    display: block;
  }
  .list_business a {
    padding-right: 0;
    display: grid;
    grid-template-areas: "pic_busi ttl_bisi" "pic_busi accordion";
    -moz-column-gap: 10px;
         column-gap: 10px;
    grid-template-columns: 1fr 2fr;
  }
  .ttl_bisi {
    grid-area: ttl_bisi;
  }
}
/* アコーディオン
--------------------------------------------- */
.ttl_bisi {
  display: flex;
  align-items: center;
  transition: 0.5s;
}

.accordion-box {
  display: flex;
  position: relative;
  opacity: 0;
  transition: 0.5s;
}

.accordion-txt {
  padding-bottom: 1.5rem;
}

.accordion-check {
  display: none;
}

.accordion-label {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  padding: 1.5rem 0;
  transition: 0.5s;
}

.accordion-box {
  max-height: 0;
  overflow: hidden;
  transition: 0.5s ease;
  opacity: 0;
  padding: 0;
  transition: all 0.5s ease;
}

.accordion-check:hover ~ .accordion-box,
.accordion-box:hover {
  height: auto;
  opacity: 1;
  max-height: 500px;
}

@media screen and (max-width: 640px) {
  .accordion-box {
    max-height: 100%;
    opacity: 1;
    grid-area: accordion;
  }
  .accordion-label {
    padding: 0 0 0.5rem 0;
  }
}
/* 実績一覧
--------------------------------------------- */
.sec_works {
  background-color: #025593;
  color: #ffffff;
  padding-bottom: 120px;
  position: relative;
}

.bg_works {
  width: 162vw;
  position: absolute;
  top: 50px;
  left: 50%;
  margin-left: -81vw;
}

.bg_works::before {
  content: "";
  background-color: #025593;
  position: absolute;
  left: -50px;
  top: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  border-radius: 50%;
}

.ttltxt_works {
  position: relative;
  padding-top: 18vw;
}

.ttlbox_works {
  margin-bottom: 80px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fafbfd;
}

.btn_works {
  padding-top: 20px;
}

.slide_works li {
  text-align: left;
  margin-bottom: 20px;
}

.img_works_thum {
  overflow: hidden;
  display: block;
  aspect-ratio: 1/1;
}

.img_works_thum img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
  transition: 0.5s;
}

.slide_works a:hover .img_works_thum img {
  transform: scale(1.1);
  transition: 0.5s;
}

.slide_works a,
.slide_works a:hover, .slide_works a:active, .slide_works a:visited {
  color: #fff;
}

.box_area {
  display: flex;
  flex-wrap: wrap;
}

.ttlbox_area {
  width: calc(18% + 100px);
  display: grid;
  place-content: center;
  place-items: center;
}

.postttl_works {
  padding-top: 5px;
}

/*スライドボタン*/
.slide_arrows_works {
  display: flex;
  justify-content: center;
  position: relative;
  padding-top: 50px;
}

.slide_arrows_works .ico_arrow {
  background-color: inherit;
  border: 1px solid #fff;
  width: 52px;
  height: 52px;
  margin: 5px;
  position: static;
  transition: 0.5s;
}

.slide_arrows_works .ico_arrow::before,
.slide_arrows_works .ico_arrow::after {
  background-color: #fff;
}

.slide_arrows_works .ico_arrow:hover::before,
.slide_arrows_works .ico_arrow:hover::after {
  background-color: #004678;
}

.slide_arrows_works .ico_arrow:hover {
  background-color: #fff;
  transition: 0.5s;
}

/* 逆向き矢印（←） */
.ico_arrow.slick-prev::before,
.ico_arrow.slick-prev::after {
  transform-origin: 1.5px 50%; /* ←基準点を左端に寄せる */
}

.ico_arrow.slick-prev::before {
  transform: rotate(-50deg); /* ←反時計回りに傾ける */
}

.ico_arrow.slick-prev::after {
  transform: rotate(50deg); /* ←時計回りに傾ける */
}

/*スライド*/
.slide_works {
  margin-right: -100px;
  width: 82%;
  margin-left: auto;
  margin-bottom: 20px;
}

.slide_works li {
  margin-left: 13px;
}

.slide_works .slick-track {
  margin: 0;
}

.slide_works .slick-arrow {
  position: absolute;
  top: 50%;
  width: 55px;
  height: 55px;
  border: 1px solid #004678;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 12px 10px;
  transform: translateY(-10%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_works .slick-arrow::before {
  content: "";
  width: 13px;
  height: 11px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
}

.slide_works .slick-arrow:hover::before {
  opacity: 0.5;
}

@media screen and (max-width: 1400px) {
  .bg_works {
    width: 2250px;
    margin-left: -1125px;
  }
  .ttltxt_works {
    padding-top: 200px;
  }
}
@media screen and (max-width: 640px) {
  .ttlbox_area {
    width: 85%;
    margin-left: auto;
    margin-right: auto;
  }
  .slide_works {
    margin-right: 0px;
    width: calc(85% - 13px);
    margin-right: auto;
    margin-left: 7.5%;
  }
}
/* トピックス
--------------------------------------------- */
.sec_topics {
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
}

.sec_topics::before,
.sec_topics::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sec_topics::before {
  background-color: #025593;
}

.sec_topics::after {
  background-color: #fafbfd;
  border-top-left-radius: 94px;
  border-top-right-radius: 94px;
  z-index: 1;
}

.wrap_topics {
  padding-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  text-align: left;
  position: relative;
  z-index: 2;
}

.ttlbox_topics {
  min-width: 25%;
  margin-bottom: 30px;
  padding-left: 5%;
  color: #025593;
}

.list_topics {
  width: 67%;
}

.btn_posttopics {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  box-shadow: 0 0 10px rgba(60, 60, 145, 0.1) !important;
}
.btn_posttopics:hover .postttl_topi{
  color: #29abe2;
  transition: 0.25s;
}
.postttl_topi{
  transition: 0.25s;
}

.txt_topi {
  width: calc(100% - 60px);
}

.btn_topics {
  width: 100%;
  text-align: right;
}

.btn_topics a {
  align-items: center;
  display: inline-flex;
  color: #025593;
}

.btn_topics a:hover {
  text-decoration: underline;
}

.btn_topics .ico_arrow {
  margin-left: 10px;
}

/* 58_66 */
.ttl_topics {
  font-size: 3.625rem;
  font-size: clamp(3.625rem, 0.125rem + 4vw, 4.125rem);
  color: #025593;
  background-color: #fafbfd;
}

.list_topics li {
  margin-bottom: 20px;
}

@media screen and (max-width: 1400px) {
  .ttl_topics {
    font-size: 3.125rem;
    font-size: clamp(3.125rem, 2.9420731707rem + 0.7804878049vw, 3.625rem);
  }
}
@media screen and (max-width: 900px) {
  .ttlbox_topics {
    min-width: 100%;
    text-align: center;
    padding-left: 0;
  }
  .list_topics {
    min-width: 100%;
  }
  .sec_topics::after {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}
/* マリンスタンプ
--------------------------------------------- */
.sec_marinestamp {
  padding-top: 30px;
  padding-bottom: 30px;
}

.sec_marinestamp .txt_ol {
  text-shadow: none;
}

.sec_marinestamp .txt_nagare .txt {
  color: #F1F2F4;
  font-weight: normal;
}

.wrap_marinestamp {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-right: 8%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas: "pic_marinestamp ttl_marinestamp" "pic_marinestamp txtbox_marinestamp" "pic_marinestamp btn_marinestamp";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content max-content 1fr;
  -moz-column-gap: 7%;
       column-gap: 7%;
  row-gap: 5px;
  text-align: left;
}

.pic_marinestamp {
  grid-area: pic_marinestamp;
  display: block;
  overflow: hidden;
  height: 100%;
  margin-bottom: 20px;
}

.pic_marinestamp img {
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 100%;
  min-height: 100%;
}

.ttl_marinestamp {
  grid-area: ttl_marinestamp;
  color: #025593;
  margin-bottom: 20px;
}

.txtbox_marinestamp {
  grid-area: txtbox_marinestamp;
  max-width: 26.25rem;
  max-width: clamp(26.25rem, 0rem + 30vw, 30rem);
  line-height: 2;
  margin-bottom: 20px;
}

.btn_marinestamp {
  grid-area: btn_marinestamp;
}

@media screen and (max-width: 800px) {
  .wrap_marinestamp {
    display: block;
    padding-right: 0;
    width: 85%;
  }
  .txtbox_marinestamp {
    max-width: 100%;
    margin-bottom: 40px;
  }
  .ttl_marinestamp {
    text-align: center;
    margin-bottom: 40px;
  }
}
/* 保有船舶
--------------------------------------------- */
.sec_senpaku {
  position: relative;
}

.sec_senpaku::before {
  content: "";
  background-image: url(../img/top/bg_top_senpaku.webp);
  background-attachment: fixed;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  width: 95%;
  height: 100%;
  left: 2.5%;
  top: 0;
  border-radius: 50px;
  z-index: 1;
  position: absolute;
}

.wrap_senpaku {
  padding-top: 150px;
  padding-bottom: 180px;
  position: relative;
  z-index: 2;
}

.ttl_senpaku {
  color: #fff;
  margin-bottom: 80px;
}

.slide_a_senpaku {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(60, 60, 145, 0.15);
  border-radius: 10px;
  text-align: left;
  display: block;
  margin: 10px;
}

.slide_a_senpaku a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 20px 5%;
}

.slide_a_senpaku a img {
  transition: 0.5s;
}

.slide_a_senpaku a:hover img {
  transform: scale(1.1);
  transition: 0.5s;
}

.btn_senpaku {
  padding-top: 80px;
}

.pic_senpaku {
  aspect-ratio: 1/1;
  overflow: hidden;
  min-width: 100%;
  min-height: 100%;
  margin-bottom: 16px;
  display: block;
}

.pic_senpaku img {
  -o-object-fit: cover;
     object-fit: cover;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  width: 100%;
}

/* ドット */
.slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #025593;
  opacity: 0.5;
}

.slick-dots li.slick-active button {
  background: #025593;
  opacity: 1;
}

.slick-dots li button:before {
  content: "" !important; /* デフォルトの点を消す */
}

@media screen and (max-width: 900px) {
  .sec_senpaku::before {
    border-radius: 20px;
  }
}
/* 採用情報
--------------------------------------------- */
.sec_recruit {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ttl_recruit {
  color: #025593;
}

.wrap_recruit {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 10%;
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas: "ttlbox_recruit r_video_c" "txtbox_recruit r_video_c" "btn_recruit r_video_c";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content max-content max-content;
  -moz-column-gap: 7%;
       column-gap: 7%;
  row-gap: 5px;
  text-align: left;
}

.ttlbox_recruit {
  grid-area: ttlbox_recruit;
  margin-bottom: 30px;
}

.r_video_c {
  grid-area: r_video_c;
  height: 100%;
}

.txtbox_recruit {
  grid-area: txtbox_recruit;
  margin-bottom: 40px;
  line-height: 2;
}

.btn_recruit {
  grid-area: btn_recruit;
}

.wrap_recruit_gallery {
  max-width: 1700px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.gal_01 {
  max-width: clamp(28.93106875rem, 0.88675rem + 32.05065vw, 32.9374rem);
  position: relative;
  z-index: 1;
}

.gal_02 {
  max-width: clamp(35.540325rem, 0.99764375rem + 39.47735vw, 40.47499375rem);
  margin-left: 7vw;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}

.sec_recruit .txt_nagare .txt {
  color: #F1F2F4;
  font-weight: normal;
}

.sec_recruit .txt_nagare {
  position: absolute;
  left: 0;
  bottom: 0;
}

@media screen and (max-width: 640px) {
  .wrap_recruit {
    display: block;
    width: 85%;
    padding-left: 0;
  }
  .r_video {
    margin-bottom: 20px;
  }
  .gal_02 {
    margin-left: 4vw;
  }
}
.site-footer {
  background-color: #fff;
}