@charset "UTF-8";

/* 海事産業特別プログラム：工学部海事産業ページの緑色を引用 */
/* primary: #91b122 / light: #e1e8c1 */

/* プログラム概要セクションのスタイル */
.maritime-overview-section {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 25px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  z-index: 10;
}

.maritime-overview-section:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
  border-color: #91b122;
}

.maritime-overview-title {
  color: #91b122;
  font-size: 200%;
  font-weight: 700;
  border-bottom: 2px solid #91b122;
  margin-bottom: 20px;
  padding-bottom: 10px;
}

.maritime-overview-content {
  padding: 0;
}

.maritime-overview-content p {
  margin: 0;
  line-height: 1.7;
  color: #333;
  font-size: 1.05em;
}

.site-content .wrap .content-area .site-main .container h2.ttl02 {
  color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container .tab-content#left-content > img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 20px;
}
.site-content .wrap .content-area .site-main .container h5.ttl02 a {
  color: #91b122;
}
.site-content .wrap .content-area .site-main .container h3.ttl03.h3-01, .site-content .wrap .content-area .site-main .container h3.ttl03.h3-02, .site-content .wrap .content-area .site-main .container h3.ttl03.h3-03 {
  color: #91b122;
  border-bottom: 1px solid #91b122;
}
.site-content .wrap .content-area .site-main .container .cont01 .inner-cont01.row {
  border: 4px solid #91b122;
}
.site-content .wrap .content-area .site-main .container .cont02 .inner-cont02.row .fright h3 {
  color: #91b122;
  margin-bottom: 12px;
  font-size: 180%;
  font-weight: 700;
}
.site-content .wrap .content-area .site-main .eachcontent.two {
  /*タブ切り替え全体のスタイル*/
}
.site-content .wrap .content-area .site-main .eachcontent.two .container {
  overflow: visible;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container label.tab-item {
  width: calc(100%/3);
  border: 1px solid #91b122;
  background: url(../images/pages/maritime/icon-arrow-right.png) no-repeat;
  background-position: calc(50% + 7em) 50%;
  background-size: 18px 18px;
  background-color: #e1e8c1;
  color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container .cont02 .inner-cont02.row .fright h3 {
  color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container .tab-content .normal-content h4 span {
  background-color: #e1e8c1;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container .tab-content .normal-content .row.career .fleft a {
  border: 1px solid #91b122;
  color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container .tab-content .normal-content a.career {
  border: 1px solid #91b122;
  color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container #tab-left:checked ~ #left-content,
.site-content .wrap .content-area .site-main .eachcontent.two .container #tab-mid:checked ~ #mid-content,
.site-content .wrap .content-area .site-main .eachcontent.two .container #tab-right:checked ~ #right-content {
  display: block;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container input:checked + label.tab-item {
  background: url(../images/pages/asia/icon-arrow-down.png) no-repeat;
  background-position: calc(50% + 7em) 50%;
  background-size: 18px 18px;
  background-color: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.two .container input:checked + label.tab-item:after {
  border-top: 30px solid #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.three {
  background: #91b122;
}
.site-content .wrap .content-area .site-main .eachcontent.three .container.row {
  width: 1080px;
  display: flex;
  justify-content: center;
}
.site-content .wrap .content-area .site-main .eachcontent.three .container.row .fleft {
  float: none;
  margin-right: 0;
}
.site-content .wrap .content-area .site-main .eachcontent.three .container.row .fleft a, .site-content .wrap .content-area .site-main .eachcontent.three .container.row .fright a {
  background: url(../images/pages/maritime/icon-target.png) no-repeat #fff;
  background-position: right 3em top 50%;
  background-size: 24px auto;
}

@media screen and (min-width: 0px) and (max-width: 750px) {
  body img {
    width: 100%;
    height: auto;
  }
  body .sp {
    display: block;
  }
  body .pc {
    display: none;
  }
  body .site .site-content {
    margin: 0;
    float: none;
    padding: 0;
  }
  body .site .site-content .wrap .content-area .site-main .container {
    width: 100%;
    margin: 0;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.one {
    padding: 5% 0;
    background: #fff;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.one .container {
    padding: 0;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container label.tab-item {
    width: calc(100%/3);
    border: 1px solid #91b122;
    background: url(../images/pages/maritime/icon-arrow-right.png) no-repeat;
    background-position: calc(50% + 3.6em) 50%;
    background-size: 10% auto;
    background-color: #e1e8c1;
    color: #91b122;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container #tab-left:checked ~ #left-content,
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container #tab-mid:checked ~ #mid-content,
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container #tab-right:checked ~ #right-content {
    display: block;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container input:checked + label.tab-item {
    background: url(../images/pages/asia/icon-arrow-down.png) no-repeat;
    background-position: calc(50% + 3.6em) 50%;
    background-size: 10% auto;
    background-color: #91b122;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.two .container input:checked + label.tab-item:after {
    border-top: 30px solid #91b122;
  }
  body .site .site-content .wrap .content-area .site-main .eachcontent.three .container.row .fleft a, body .site .site-content .wrap .content-area .site-main .eachcontent.three .container.row .fright a {
    background: url(../images/pages/maritime/icon-target.png) no-repeat #fff;
    background-position: right 3em top 50%;
    background-size: 7% auto;
  }

  /* プログラム概要セクションのレスポンシブ対応 */
  .maritime-overview-section {
    padding: 15px;
    margin: 15px 0;
  }

  .maritime-overview-title {
    font-size: 5vw;
    margin-bottom: 15px;
    padding-bottom: 8px;
  }

  .maritime-overview-content p {
    font-size: 4vw;
    line-height: 1.6;
  }
}