@charset "UTF-8";
/* CSS Document */


/*top*/
.opening {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
}
.opening.is-active {
  opacity: 0;
  visibility: hidden;
}
.opening-logo {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background: #FFF;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
}
.opening-logo.is-active {
  opacity: 1;
  visibility: visible;
}
.opening-logo img {
  width: 250px;
  height: auto;
}

.top .mv {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  position: relative; /* ← これだけ追加 */
}

/* 既存（そのまま） */
.top .mv p {
  width: 100%;
  height: 100%;
}
.top .mv p img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.top .mv video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================
   追記：テキスト用
   ========================= */
.top .mv-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  width: 100%;
  padding: 0 20px;
  text-align: center;
  color: #fff;
}


.top .mv-text p {
	font-size: clamp(28px, 5vw, 56px);
	line-height: 1.6;
	font-family: "Marcellus", serif;
	text-align: center;
}

/* 視認性アップ用（任意・おすすめ） */
.top .mv::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1;
}

.top main .news {
  display: flex;
  align-items: flex-start;
  padding-top: 90px;
  padding-bottom: 60px;
}
.top main .news .box_l {
  width: 320px;
}
.top main .news .box_l h3 {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.top main .news .box_l h3 em ,
.top main .news .box_l h3 span {
  display: block;
  line-height: 1em;
  color: #1b5a82;
}
.top main .news .box_l h3 span {
  font-size: 1.5rem;
  margin-bottom: .8em;
}
.top main .news .box_l h3 em {
  font-family: "Marcellus", serif;
  font-size: 4.6rem;
}
.top main .news .box_l .btn {
  display: flex;
}
.top main .news .box_l .btn a {
  position: relative;
  display: block;
  border: solid 1px #ecf2f5;
  background: #ecf2f5;
  border-radius: 2px;
  color: #1b5a82;
  font-family: "Jost", sans-serif;
  font-size: 1.6rem;
  line-height: 1em;
  padding: .8em 1em;
  padding-right: 5.6em;
}
.top main .news .box_l .btn a::after {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  right: 1em;
  width: 1.5625em;
  height: 0.75em;
  background: url(../img/top/view_arrow.svg) no-repeat center center;
  background-size: cover;
  content: '';
}
.top main .news .box_l .btn a:hover {
  background: #FFF;
}
.top main .news .box_r {
  width: calc(100% - 320px);
}
.top main .news .box_r section {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: solid 1px #d6e1ea;
}
.top main .news .box_r section:nth-of-type(1) {
  border-top: solid 1px #d6e1ea;
}
.top main .news .box_r section time {
  display: block;
  width: 145px;
  text-align: center;
  color: #1b5a82;
  font-family: "Jost", sans-serif;
}
.top main .news .box_r section .cat {
  width: 120px;
}
.top main .news .box_r section .cat a {
  display: block;
  border: solid 1px #1b5a82;
  text-align: center;
  color: #1b5a82;
  font-size: 1.2rem;
  padding: .6em 1em;
  border-radius: 2px;
}
.top main .news .box_r section .cat a:hover {
  background: #1b5a82;
  color: #FFF;
}
.top main .news .box_r section .post_title {
  width: calc(100% - (145px + 120px));
  padding-left: 30px;
  padding-right: 30px;
}
.top main .blog {
  padding-bottom: 140px;
}
.top main .blog input {
  display: none;
}
.top main .blog .title_btn {
  display: flex;
  align-items: end;
  margin-bottom: 40px;
}
.top main .blog .title_btn h3 {
  display: flex;
  flex-direction: column;
  margin-right: 90px;
}
.top main .blog .title_btn h3 em ,
.top main .blog .title_btn h3 span {
  display: block;
  line-height: 1em;
  color: #1b5a82;
}
.top main .blog .title_btn h3 span {
  font-size: 1.5rem;
  margin-bottom: .8em;
}
.top main .blog .title_btn h3 em {
  font-family: "Marcellus", serif;
  font-size: 4.6rem;
}
.top main .blog .title_btn ul {
  display: flex;
  margin-right: 20px;
}
.top main .blog .title_btn ul li {
  width: 160px;
}
.top main .blog .title_btn ul li:not(:last-of-type) {
  margin-right: 10px;
}
.top main .blog .title_btn ul li label {
  display: block;
	width: 100%;
  padding: .8em 0;
  text-align: center;
	font-size: 1.5rem;
	background:#FFF;
	border: solid 1px #1b5a82;
  color: #1b5a82;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
	border-radius: 2px;
	outline: 0;
  cursor: pointer;
}
.top main .blog #all:checked ~ .title_btn ul li #blog_tab01 ,
.top main .blog #marina:checked ~ .title_btn ul li #blog_tab02 ,
.top main .blog #catch:checked ~ .title_btn ul li #blog_tab03 {
	background:#1b5a82;
  color: #FFF;
}
.top main .blog .title_btn .btn {
  display: flex;
  margin-left: auto;
}
.top main .blog .title_btn .btn a {
  position: relative;
  display: block;
  border: solid 1px #ecf2f5;
  background: #ecf2f5;
  border-radius: 2px;
  color: #1b5a82;
  font-family: "Jost", sans-serif;
  font-size: 1.6rem;
  line-height: 1em;
  padding: .8em 1em;
  padding-right: 5.6em;
}
.top main .blog .title_btn .btn a::after {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  right: 1em;
  width: 1.5625em;
  height: 0.75em;
  background: url(../img/top/view_arrow.svg) no-repeat center center;
  background-size: cover;
  content: '';
}
.top main .blog .title_btn .btn a:hover {
  background: #FFF;
}
.top main .blog .box .box_in {
  display: none;
}
.top main .blog #all:checked ~  .box #blog_content01.box_in ,
.top main .blog #marina:checked ~  .box #blog_content02.box_in ,
.top main .blog #catch:checked ~  .box #blog_content03.box_in {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
  animation: tab-show .9s ease-in-out forwards;
}
@keyframes tab-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.top main .blog .box .box_in section {
  width: calc((100% - (20px * 3)) / 4);
  margin-bottom: 20px;
}
.top main .blog .box .box_in section:not(:nth-of-type(4n)) {
  margin-right: 20px;
}
.top main .blog .box .box_in section .img {
  margin-bottom: 15px;
  border-radius: 2px;
  overflow: hidden;
}
.top main .blog .box .box_in section .cat_time {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
}
.top main .blog .box .box_in section .cat_time .cat a {
  display: block;
  background: #1b5a82;
  border: solid 1px #1b5a82;
  color: #FFF;
  border-radius: 2px;
  font-size: 1.2rem;
  padding: .3em 1.6em;
}
.top main .blog .box .box_in section .cat_time .cat a:hover {
  background: #FFF;
  color: #1b5a82;
}
.top main .blog .box .box_in section .cat_time time {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 1.5rem;
  line-height: 1em;
  color: #1b5a82;
  margin-left: auto;
}
.top main .blog .box .box_in section h4 {
  font-size: 1.8rem;
  margin-bottom: .6em;
}
.top main .blog .box .box_in section h4 a {
  font-weight: 500;
  color: #1b5a82;
}
.top main .blog .box .box_in section .excerpt {
  font-size: 1.5rem;
}
.top main .about {
  position: relative;
  padding-top: 100px;
  padding-bottom: 160px;
}
.top main .about::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 850px;
  background: url(../img/top/about_bg.jpg) no-repeat center bottom;
  background-size: cover;
  content: '';
}
.top main .about .logo {
  width: 270px;
  margin: 0 auto;
  margin-bottom: 60px;
}
.top main .about h3 {
  text-align: center;
  font-size: 1.8rem;
  line-height: 2.0;
  margin-bottom: 50px;
}
.top main .about .link_btn {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}
.top main .about .link_btn section {
  width: calc((100% - (20px * 2)) / 3);
}
.top main .about .link_btn section:not(:last-of-type) {
  margin-right: 20px;
}
.top main .about .link_btn section a {
  display: block;
  border-radius: 5px 5px 0 0;
  background: #1b5a82;
  overflow: hidden;
}
.top main .about .link_btn section a .box {
  padding-top: 50px;
  padding-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.top main .about .link_btn section a .box h4 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #FFF;
  margin-bottom: 40px;
}
.top main .about .link_btn section a .box h4 em ,
.top main .about .link_btn section a .box h4 span {
  display: block;
  line-height: 1em;
}
.top main .about .link_btn section a .box h4 em {
  font-family: "Marcellus", serif;
  font-size: 3.4rem;
  letter-spacing: .06em;
  margin-bottom: .3em;
}
.top main .about .link_btn section a .box h4 span {
  font-size: 1.8rem;
  letter-spacing: .12em;
}
.top main .about .link_btn section a .box .btn {
  width: 320px;
  margin: 0 auto;
}
.top main .about .link_btn section a .box .btn span {
  position: relative;
  display: block;
  background: #FFF;
  border-radius: 2px;
  font-family: "Jost", sans-serif;
  font-size: 1.8rem;
  line-height: 1em;
  padding: .8em 1em;
  text-align: center;
  color: #1b5a82;
}
.top main .about .link_btn section a .box .btn span::after {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  right: 1.3em;
  width: 1.388em;
  height: 0.611em;
  background: url(../img/top/view_arrow.svg) no-repeat center center;
  background-size: cover;
  content: '';
}
.top main .about .banner ul li:nth-of-type(1) {
  margin-bottom: 40px;
  box-shadow: 0px 0px 15px 0 rgba(171,186,196,.8);
}
.top main .about .banner ul li:nth-of-type(2) {
  box-shadow: 0px 0px 15px 0 rgba(171,186,196,.6);
}
.top main .featuare {
  position: relative;
  padding-bottom: 140px;
}
.top main .featuare::before {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  background: url(../img/top/featuare_bg.jpg) no-repeat center bottom;
  background-size: cover;
  content: '';
}
.top main .featuare::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 20px;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%);
  content: '';
}
.top main .featuare .box {
  display: flex;
}
.top main .featuare .box .box_l {
  padding-top: 20px;
  padding-left: 100px;
  margin-right: 20px;
}
.top main .featuare .box .box_l h3 {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}
.top main .featuare .box .box_l h3 span ,
.top main .featuare .box .box_l h3 em {
  display: block;
  line-height: 1em;
  color: #1b5a82;
}
.top main .featuare .box .box_l h3 em {
  font-size: 2.6rem;
  margin-bottom: .5em;
}
.top main .featuare .box .box_l h3 span {
  font-family: "Marcellus", serif;
  font-size: 5.8rem;
}
.top main .featuare .box .box_l h4 {
  font-family: "Noto Serif JP", serif;
  font-size: 3.6rem;
  font-weight: 500;
  margin-bottom: .8em;
  color: #1b5a82;
}
.top main .featuare .box .box_l .comment {
  max-width: 550px;
  line-height: 2.0;
  margin-bottom: 1.5em;
}
.top main .featuare .box .box_l .comment p:not(:last-of-type) {
  margin-bottom: 1.2em;
}
.top main .featuare .box .box_l .btn {
  width: 280px;
}
.top main .featuare .box .box_l .btn a {
  position: relative;
  display: block;
  border-radius: 2px;
  font-size: 1.6rem;
  line-height: 1em;
  padding: 1.1em 1em;
  text-align: center;
  color: #1b5a82;
  border: solid 1px #1b5a82;
}
.top main .featuare .box .box_l .btn a:hover {
  background: #1b5a82;
  color: #FFF;
}
.top main .featuare .box .box_l .btn a::after {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  right: 1em;
  width: 1.5625em;
  height: 0.75em;
  background: url(../img/top/view_arrow.svg) no-repeat center center;
  background-size: cover;
  content: '';
}
.top main .featuare .box .box_l .btn a:hover::after {
  background: url(../img/top/view_arrow-white.svg) no-repeat center center;
  background-size: cover;
  content: '';
}
.top main .featuare .box .img {
  width: 720px;
  margin-left: auto;
}


/*outfitting_maintenance*/
.outfitting_maintenance main .about {
  height: 550px;
  background: #155680;
}
.outfitting_maintenance main .about .box {
  display: flex;
  align-items: center;
}
.outfitting_maintenance main .about .box .box_l {
  width: 50%;
  padding-left: 120px;
}
.outfitting_maintenance main .about .box .box_l h3 {
  margin-bottom: 40px;
}
.outfitting_maintenance main .about .box .box_l h3 em ,
.outfitting_maintenance main .about .box .box_l h3 span {
  display: block;
}
.outfitting_maintenance main .about .box .box_l h3 em {
  font-family: "Marcellus", serif;
  font-size: 3.4rem;
  line-height: 1em;
  color: #3d7faa;
  margin-bottom: .2em;
}
.outfitting_maintenance main .about .box .box_l h3 span {
  font-family: "Noto Serif JP", serif;
  font-size: 3.8rem;
  line-height: 1.5;
  letter-spacing: .18em;
  color: #FFF;
}
.outfitting_maintenance main .about .box .box_l .comment {
  color: #FFF;
  line-height: 2.0;
  max-width: 460px;
  padding-right: 20px;
}
.outfitting_maintenance main .about .box .img {
  flex: 1;
  height: 550px;
  overflow: hidden;
  order: 2;
  margin-left: auto;
  margin-right: calc(50% - 50vw);
}
.outfitting_maintenance main .about .box .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.outfitting_maintenance main .outfitting {
  padding-top: 90px;
  padding-bottom: 150px;
}
.outfitting_maintenance main .outfitting .box section {
  border-top: solid 1px #d6e1ea;
  padding-top: 40px;
  display: flex;
  align-items: flex-start;
}
.outfitting_maintenance main .outfitting .box section:not(:last-of-type) {
  padding-bottom: 50px;
}
.outfitting_maintenance main .outfitting .box section h4 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  padding-left: 50px;
  width: 640px;
}
.outfitting_maintenance main .outfitting .box section h4::before {
  position: absolute;
  top: 0;
  left: 20px;
  width: 4px;
  height: 100%;
  background: #307eb1;
  content: '';
}
.outfitting_maintenance main .outfitting .box section h4 span ,
.outfitting_maintenance main .outfitting .box section h4 em {
  display: block;
  line-height: 1em;
}
.outfitting_maintenance main .outfitting .box section h4 span {
  font-size: 2.4rem;
  color: #1b5a82;
  margin-bottom: .6em;
}
.outfitting_maintenance main .outfitting .box section h4 em {
  font-family: "Marcellus", serif;
  font-size: 2.0rem;
  color: #88a2b3;
}
.outfitting_maintenance main .outfitting .box section .comment {
  width: calc(100% - 640px);
  line-height: 2.0;
}
.outfitting_maintenance main .frp {
  background: #155680;
  padding-top: 120px;
  padding-bottom: 150px;
  color: #FFF;
}
.outfitting_maintenance main .frp h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 80px;
}
.outfitting_maintenance main .frp h3 span ,
.outfitting_maintenance main .frp h3 h4 em {
  display: block;
  line-height: 1em;
}
.outfitting_maintenance main .frp h3 span {
  font-size: 2.0rem;
  margin-bottom: .4em;
}
.outfitting_maintenance main .frp h3 em {
  font-family: "Marcellus", serif;
  font-size: 4.6rem;
}
.outfitting_maintenance main .frp .img {
  position: relative;
  margin-bottom: 80px;
}
.outfitting_maintenance main .frp .img img {
  opacity: .9;
}
.outfitting_maintenance main .frp .img h4 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: rgba(6, 54, 85, .8);
  font-size: 2.4rem;
  padding: 1em;
}
.outfitting_maintenance main .frp .box section {
  display: flex;
  align-items: flex-start;
}
.outfitting_maintenance main .frp .box section:not(:last-of-type) {
  margin-bottom: 60px;
}
.outfitting_maintenance main .frp .box section h5 {
  position: relative;
  padding: .3em 0;
  padding-left: 45px;
  width: 510px;
  font-size: 2.0rem;
}
.outfitting_maintenance main .frp .box section h5::before {
  position: absolute;
  top: 0;
  left: 20px;
  width: 4px;
  height: 100%;
  background: #307eb1;
  content: '';
}
.outfitting_maintenance main .frp .box section .comment {
  width: calc(100% - 640px);
  line-height: 2.0;
}
.outfitting_maintenance main .shipbuilding-about {
  height: 660px;
}
.outfitting_maintenance main .shipbuilding-about .box {
  display: flex;
  align-items: center;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l {
  width: 50%;
  padding-left: 60px;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l h3 {
  margin-bottom: 40px;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l h3 em ,
.outfitting_maintenance main .shipbuilding-about .box .box_l h3 span {
  display: block;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l h3 span {
  font-size: 2.4rem;
  margin-bottom: .4em;
  color: #1b5a82;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l h3 em {
  font-family: "Marcellus", serif;
  font-size: 2.0rem;
  line-height: 1em;
  color: #8ba0ae;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l .comment {
  max-width: 580px;
  line-height: 2.0;
  padding-right: 20px;
  margin-bottom: 40px;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l .info {
  position: relative;
  padding: 10px 0;
  padding-left: 25px;
  line-height: 2.0;
}
.outfitting_maintenance main .shipbuilding-about .box .box_l .info::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #3982b1;
  content: '';
}
.outfitting_maintenance main .shipbuilding-about .box .img {
  flex: 1;
  height: 660px;
  overflow: hidden;
  order: 2;
  margin-left: auto;
  margin-right: calc(50% - 50vw);
}
.outfitting_maintenance main .shipbuilding-about .box .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.outfitting_maintenance main .shipbuilding-img {
  position: relative;
  padding-top: 120px;
  padding-bottom: 130px;
}
.outfitting_maintenance main .shipbuilding-img::before ,
.outfitting_maintenance main .shipbuilding-img::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  content: '';
}
.outfitting_maintenance main .shipbuilding-img::before {
  z-index: -2;
  background: #0a525b repeat center center;
}
.outfitting_maintenance main .shipbuilding-img::after {
  z-index: -1;
  background: url(../img/outfitting_maintenance/shipbuilding-img_bg.jpg) no-repeat center center;
  background-size: cover;
  opacity: .2;
}
.outfitting_maintenance main .shipbuilding-img .box h3 {
  position: relative;
  font-size: 2.4rem;
  color: #FFF;
  margin-bottom: 80px;
}
.outfitting_maintenance main .shipbuilding-img .box h3::after {
  position: absolute;
	top: 50%;
	transform: translateY(-50%);
  right: 0;
  white-space: nowrap;
  font-family: "Marcellus", serif;
  font-size: 6.0rem;
  line-height: 1em;
  color: #2d6970;
  content: 'Shipbuilding';
}
.outfitting_maintenance main .shipbuilding-img .box .img ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
}
.outfitting_maintenance main .shipbuilding-img .box .img ul li {
  width: calc((100% - (14px * 3)) / 4);
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 4px;
}
.outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(4n)) {
  margin-right: 14px;
}
.outfitting_maintenance main .frp-pier {
  padding-top: 120px;
  padding-bottom: 120px;
}
.outfitting_maintenance main .frp-pier .box h3 {
  display: flex;
  flex-direction: column;
  margin-bottom: 50px;
}
.outfitting_maintenance main .frp-pier .box h3 span ,
.outfitting_maintenance main .frp-pier .box h3 em {
  display: block;
  line-height: 1em;
}
.outfitting_maintenance main .frp-pier .box h3 span {
  font-size: 2.4rem;
  color: #1b5a82;
  margin-bottom: .6em;
}
.outfitting_maintenance main .frp-pier .box h3 em {
  font-family: "Marcellus", serif;
  font-size: 2.0rem;
  color: #88a2b3;
}
.outfitting_maintenance main .frp-pier .box .img_box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -20px;
}
.outfitting_maintenance main .frp-pier .box .img_box section {
  width: calc((100% - (14px * 3)) / 4);
  margin-bottom: 20px;
}
.outfitting_maintenance main .frp-pier .box .img_box section:not(:nth-of-type(4n)) {
  margin-right: 14px;
}
.outfitting_maintenance main .frp-pier .box .img_box section > p {
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 25px;
}
.outfitting_maintenance main .frp-pier .box .img_box section .comment {
  line-height: 2.0;
}


/*1440*/
@media screen and (max-width: 1440px) {
  .top main .featuare .box .box_l {
    padding-left: 0;
  }
  
  .outfitting_maintenance main .about .box .box_l {
    padding-left: 0;
  }
  .outfitting_maintenance main .outfitting .box section h4 {
    width: 400px;
  }
  .outfitting_maintenance main .outfitting .box section .comment {
    width: calc(100% - 400px);
  }
  .outfitting_maintenance main .frp .box section h5 {
    width: 400px;
  }
  .outfitting_maintenance main .frp .box section .comment {
    width: calc(100% - 400px);
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l {
    padding-left: 0;
    padding-right: 20px;
  }
}


/*1240*/
@media screen and (max-width: 1240px) {
  .top main .about .link_btn section a .box .btn {
    width: 100%;
    padding: 0 20px;
  }
  .top main .featuare .box .box_l h3 span {
    font-size: 4.0rem;
  }
  .top main .featuare .box .img {
    width: 50%;
  }
}


/*1040*/
@media screen and (max-width: 1040px) {
  .top main .blog .box .box_in section .cat_time {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .top main .blog .box .box_in section .cat_time .cat {
    margin-bottom: 1em;
  }
  .top main .about .link_btn section a .box h4 em {
    font-size: 2.6rem;
  }
}


/*940*/
@media screen and (max-width: 940px) {
  .top main .news {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .top main .news .box_l {
    width: 100%;
    display: contents;
  }
  .top main .news .box_l h3 {
    order: -99;
  }
  .top main .news .box_l .btn {
    order: 99;
    margin: 0 auto;
    padding-top: 30px;
  }
  .top main .news .box_r {
    width: 100%;
  }
  .top main .blog {
    display: flex;
    flex-direction: column;
  }
  .top main .blog .title_btn {
    display: contents;
  }
  .top main .blog .title_btn h3 {
    order: -99;
    margin-right: 0;
    margin-bottom: 40px;
  }
  .top main .blog .title_btn ul {
    order: -99;
    margin: 0 auto;
    margin-bottom: 40px;
  }
  .top main .blog .title_btn .btn {
    order: 99;
    margin: 0 auto;
    padding-top: 30px;
  }
  
  .outfitting_maintenance main .shipbuilding-img .box .img ul li {
    width: calc((100% - (14px * 2)) / 3);
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(3n)) {
    margin-right: 14px;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section {
    width: calc((100% - (14px * 1)) / 2);
  }
  .outfitting_maintenance main .frp-pier .box .img_box section:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section:not(:nth-of-type(2n)) {
    margin-right: 14px;
  }
}


/*840*/
@media screen and (max-width: 840px) {
  .top main .about .link_btn section a .box h4 em {
    font-size: 2.2rem;
  }
}


/*767*/
@media screen and (max-width: 767px) {
  .opening-logo img {
    width: 40vw;
    height: auto;
  }

  .top .mv {
    width: 100%;
    height: 60vh;
  }
  .top main .news {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .top main .news .box_l h3 {
    margin-bottom: 5vw;
  }
  .top main .news .box_l h3 em {
    font-size: 2.4rem;
  }
  .top main .news .box_l .btn {
    width: 80%;
    padding-top: 5vw;
  }
  .top main .news .box_l .btn a {
    width: 100%;
    padding: .8em 1em;
    text-align: center;
  }
  .top main .news .box_r section {
    flex-wrap: wrap;
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
  .top main .news .box_r section time {
    width: 30%;
    text-align: left;
  }
  .top main .news .box_r section .cat {
    width: 70%;
    display: flex;
    justify-content: flex-end;
  }
  .top main .news .box_r section .post_title {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    padding-top: 3vw;
  }
  .top main .blog {
    padding-bottom: 15vw;
  }
  .top main .blog .title_btn {
    margin-bottom: 5vw;
  }
  .top main .blog .title_btn h3 {
    margin-bottom: 5vw;
  }
  .top main .blog .title_btn h3 em {
    font-size: 2.4rem;
  }
  .top main .blog .title_btn ul {
    width: 100%;
    margin-bottom: 5vw;
  }
  .top main .blog .title_btn ul li {
    width: 30%;
  }
  .top main .blog .title_btn ul li:not(:last-of-type) {
    margin-right: 5%;
  }
  .top main .blog .title_btn ul li label {
    padding: .6em 0;
    font-size: 1.4rem;
  }
  .top main .blog .title_btn .btn {
    width: 80%;
    padding-top: 5vw;
  }
  .top main .blog .title_btn .btn a {
    width: 100%;
    padding: .8em 1em;
    text-align: center;
  }
  .top main .blog #all:checked ~  .box #blog_content01.box_in ,
  .top main .blog #marina:checked ~  .box #blog_content02.box_in ,
  .top main .blog #catch:checked ~  .box #blog_content03.box_in {
    margin-bottom: -8vw;
  }
  .top main .blog .box .box_in section {
    width: calc((100% - (5vw * 1)) / 2);
    margin-bottom: 8vw;
  }
  .top main .blog .box .box_in section:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .top main .blog .box .box_in section:not(:nth-of-type(2n)) {
    margin-right: 5vw;
  }
  .top main .blog .box .box_in section .img {
    margin-bottom: 2vw;
  }
  .top main .about {
    padding-top: 20vw;
    padding-bottom: 20vw;
  }
  .top main .about::before {
    width: 100%;
  }
  .top main .about .logo {
    width: 45vw;
    margin-bottom: 10vw;
  }
  .top main .about h3 {
    text-align: left;
    margin-bottom: 5vw;
    padding: 0 4%;
  }
  .top main .about .link_btn {
    margin-bottom: 10vw;
  }
  .top main .about .link_btn section {
    width: calc((100% - (20px * 0)) / 1);
  }
  .top main .about .link_btn section:not(:last-of-type) {
    margin-right: 0;
    margin-bottom: 6vw;
  }
  .top main .about .link_btn section a .box {
    padding-top: 10vw;
    padding-bottom: 10vw;
  }
  .top main .about .link_btn section a .box h4 {
    margin-bottom: 10vw;
  }
  .top main .about .link_btn section a .box h4 em {
    font-size: 2.4rem;
  }
  .top main .about .link_btn section a .box h4 span {
    font-size: 1.8rem;
  }
  .top main .about .link_btn section a .box .btn {
    padding: 0 5vw;
  }
  .top main .about .banner ul li:nth-of-type(1) {
    margin-bottom: 6vw;
  }
  .top main .featuare {
    padding-bottom: 20vw;
  }
  .top main .featuare::before {
    height: 60vh;
  }
  .top main .featuare .box {
    display: flex;
    flex-direction: column;
  }
  .top main .featuare .box .box_l {
    padding-top: 0;
    padding-left: 0;
    margin-right: 0;
    display: contents;
  }
  .top main .featuare .box .box_l h3 {
    order: -99;
    margin-bottom: 5vw;
  }
  .top main .featuare .box .box_l h3 em {
    order: -99;
    font-size: 2.0rem;
  }
  .top main .featuare .box .box_l h3 span {
    order: -99;
    font-size: 2.4rem;
  }
  .top main .featuare .box .box_l h4 {
    order: -99;
    font-size: 2.4rem;
  }
  .top main .featuare .box .box_l .comment {
    order: 99;
    max-width: inherit;
    width: 100%;
  }
  .top main .featuare .box .box_l .btn {
    order: 99;
    width: 80%;
    margin: 0 auto;
  }
  .top main .featuare .box .box_l .btn a {
    width: 100%;
    padding: 1.1em 1em;
  }
  .top main .featuare .box .img {
    width: 100%;
    margin-left: 0;
    margin-bottom: 5vw;
  }
  
  .outfitting_maintenance main .about {
    height: auto;
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .about .box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .outfitting_maintenance main .about .box .box_l {
    display: contents;
  }
  .outfitting_maintenance main .about .box .box_l h3 {
    order: -99;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .about .box .box_l h3 em {
    font-size: 1.8rem;
  }
  .outfitting_maintenance main .about .box .box_l h3 span {
    font-size: 2.4rem;
  }
  .outfitting_maintenance main .about .box .box_l .comment {
    order: 99;
    max-width: inherit;
    width: 100%;
    padding-right: 0;
  }
  .outfitting_maintenance main .about .box .img {
    flex: inherit;
    height: inherit;
    overflow: inherit;
    order: inherit;
    margin-left: inherit;
    margin-right: inherit;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .about .box .img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .outfitting_maintenance main .outfitting {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .outfitting .box section {
    padding-top: 6vw;
    flex-direction: column;
  }
  .outfitting_maintenance main .outfitting .box section:not(:last-of-type) {
    padding-bottom: 6vw;
  }
  .outfitting_maintenance main .outfitting .box section h4 {
    padding: 2vw 0;
    padding-left: 6vw;
    margin-bottom: 4vw;
    width: 100%;
  }
  .outfitting_maintenance main .outfitting .box section h4::before {
    left: 2vw;
  }
  .outfitting_maintenance main .outfitting .box section h4 span {
    font-size: 1.6rem;
  }
  .outfitting_maintenance main .outfitting .box section h4 em {
    font-size: 2.0rem;
  }
  .outfitting_maintenance main .outfitting .box section .comment {
    width: 100%;
  }
  .outfitting_maintenance main .frp {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .frp h3 {
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .frp h3 span {
    font-size: 1.8rem;
  }
  .outfitting_maintenance main .frp h3 em {
    font-size: 2.4rem;
  }
  .outfitting_maintenance main .frp .img {
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .frp .img h4 {
    position: relative;
    bottom: inherit;
    left: inherit;
    width: 100%;
    text-align: left;
    background: none;
    font-size: 1.6rem;
    padding: 0;
    padding-top: .3em;
  }
  .outfitting_maintenance main .frp .box section {
    flex-direction: column;
  }
  .outfitting_maintenance main .frp .box section:not(:last-of-type) {
    margin-bottom: 6vw;
  }
  .outfitting_maintenance main .frp .box section h5 {
    padding: 1vw 0;
    padding-left: 6vw;
    margin-bottom: 4vw;
    width: 100%;
  }
  .outfitting_maintenance main .frp .box section h5::before {
    left: 2vw;
  }
  .outfitting_maintenance main .frp .box section .comment {
    width: 100%;
  }
  .outfitting_maintenance main .shipbuilding-about {
    height: auto;
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .shipbuilding-about .box {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l {
    display: contents;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l h3 {
    order: -99;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l h3 span {
    font-size: 1.8rem;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l h3 em {
    font-size: 2.0rem;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l .comment {
    order: 99;
    max-width: inherit;
    width: 100%;
    padding-right: 0;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .shipbuilding-about .box .box_l .info {
    order: 99;
    padding: 2vw 0;
    padding-left: 6vw;
  }
  .outfitting_maintenance main .shipbuilding-about .box .img {
    flex: inherit;
    height: inherit;
    overflow: inherit;
    order: inherit;
    margin-left: inherit;
    margin-right: inherit;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .shipbuilding-about .box .img img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .outfitting_maintenance main .shipbuilding-img {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .shipbuilding-img .box h3 {
    font-size: 2.0rem;
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .shipbuilding-img .box h3::after {
    position: absolute;
    top: -10vw;
    transform: inherit;
    font-size: 3.0rem;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -5vw;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li {
    width: calc((100% - (5vw * 1)) / 2);
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(3n)) {
    margin-right: 0;
  }
  .outfitting_maintenance main .shipbuilding-img .box .img ul li:not(:nth-of-type(2n)) {
    margin-right: 5vw;
  }
  .outfitting_maintenance main .frp-pier {
    padding-top: 15vw;
    padding-bottom: 15vw;
  }
  .outfitting_maintenance main .frp-pier .box h3 {
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .frp-pier .box h3 span {
    font-size: 1.8rem;
  }
  .outfitting_maintenance main .frp-pier .box h3 em {
    font-size: 2.0rem;
  }
  .outfitting_maintenance main .frp-pier .box .img_box {
    margin-bottom: -5vw;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section {
    width: calc((100% - (5vw * 1)) / 2);
    margin-bottom: 5vw;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section:not(:nth-of-type(4n)) {
    margin-right: 0;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section:not(:nth-of-type(2n)) {
    margin-right: 5vw;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section > p {
    margin-bottom: 3vw;
  }
  .outfitting_maintenance main .frp-pier .box .img_box section .comment {
    line-height: 2.0;
  }
}

/* 矢印全体（丸） */
.slick-prev,
.slick-next {
  width: 48px;
  height: 48px;
  background: #007bff; /* 青（ここをコーポレートカラーに変更可） */
  border-radius: 50%;
  z-index: 10;
}

/* ホバー時 */
.slick-prev:hover,
.slick-next:hover {
  background: #0056b3; /* 少し濃い青 */
}

/* 矢印アイコン */
.slick-prev:before,
.slick-next:before {
  color: #fff;        /* 矢印を白に */
  font-size: 22px;    /* 矢印を大きく */
  opacity: 1;
}

/* 位置微調整（必要なら） */
.slick-prev {
  left: 10px;
}
.slick-next {
  right: 10px;
}

.slick-prev,
.slick-next {
  width: 56px;
  height: 56px;
}

.slick-prev:before,
.slick-next:before {
  font-size: 26px;
}