@charset "UTF-8";

@media screen and (max-width: 768px) {
  /* ==========================================================================
  ベース設定
  =========================================================================== */
  :root {
    /* カラー */
    --Text: #222;
    --Main: #35729B;
    --Sub: #0099D9;
    --Back: #EAEFF9;
    --BackGrey: #F5F5F5;
    --Line: #bbb;

    /* フォント */
    --font_serif: "ZenOldMincho", serif;
    --font_sans: "NotoSansJP", sans-serif;
  }

  .html {
    font-size: calc(100vw / 393 * 16);
  }

  .body {
  }

  .body a:hover {
    opacity: 1;
  }

  .forPC {
    display: none;
  }
  
  .forPC-inline {
    display: none;
  }  

  .forSP {
    display: block;
  }
  
  .forSP-inline {
    display: inline;
  }
  

  /* ==========================================================================
  ヘッダー
  =========================================================================== */
  .header__inner.inner {
    width: 100%;
    height: 5rem;
    padding: 0 1.5rem 0 1.25rem;
    margin: 0;
  }

  .header__logo {
    width: 16.6875rem;
  }

  /* ハンバーガーメニュー */
  .html:has(.js-hamburger-cont.is-active) {
    overflow: hidden;
  }

  .html:has(.hamburgerCont.is-active) {
    overflow: hidden;
  }

  .hamburgerBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    z-index: 101;
  }

  .hamburgerBtn__wrap {
    width: 1.875rem;
    height: 1.25rem;
    position: relative;
  }

  .hamburgerBtn span {
    width: 100%;
    height: 0.25rem;
    background-color: var(--Main);
    position: absolute;
    transition: .5s;
  }

  .hamburgerBtn span:first-of-type {
    top: 0;
  }

  .hamburgerBtn span:nth-of-type(2) {
    top: 50%;
  }

  .hamburgerBtn span:last-of-type {
    top: 100%;
  }

  .hamburgerBtn.is-active span:nth-of-type(1) {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
  }

  .hamburgerBtn.is-active span:nth-of-type(2) {
    transform: translateX(0.625rem);
    opacity: 0;
  }

  .hamburgerBtn.is-active span:nth-of-type(3) {
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
  }

  .hamburgerCont {
    background: #fff;
    width: 100%;
    height: 100%;
    padding-top: 5rem;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: .5s;
    z-index: 100;
  }

  .hamburgerCont.is-active {
    overflow-y: auto;
    transform: translateY(0);
  }

  .hamburgerCont__inner {
    padding: 0 1.25rem;
  }

  .hamburgerCont__nav .menu li {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.0625rem solid var(--Sub);
    padding: 1.5625rem 0;
  }

  .hamburgerCont__nav .menu a {
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: var(--Main);
  }

  .hamburgerCont__img {
    width: auto;
    height: 1.5rem;
    margin: 2rem auto 0;
  }

  .hamburgerCont__copyright {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
  }

  .hamburgerCont__copyright img {
    width: 14.1875rem;
  }


  /* ==========================================================================
  トップページ
  =========================================================================== */
  .inner {
    width: 100%;
    padding: 0 1.25rem;
    margin: 0 auto;
  }

  a.btn {
    font-size: 1rem;
    width: 100%;
    height: 4rem;
    padding: 0 1.25rem;
  }

  a.btn::after {
    width: 2rem;
  }

  /* FV */
  .home__fv-wrap {
    min-height: 37.5rem;
  }

  .home__fv-catch {
    font-size: 2rem;
    top: auto;
    bottom: 6.25vh;
    left: 1.875rem;
  }

  .home__fv-news {
    color: var(--Text);
    /* flex-direction: column; */
    justify-content: center;
    gap: 1rem;
    background: var(--BackGrey);
    width: 100%;
    padding: 1rem 1.25rem;
    position: static;
  }

  .home__fv-news-ttl {
    font-size: 0.875rem;
  }

  .home__fv-news-list-item-date {
    font-size: 0.875rem;
    width: 4.75rem;
  }

  .home__fv-news-list-item-cat {
    padding: 0.25rem 0.5rem;
  }

  .home__fv-news-list-item-ttl {
    width: 12.25rem;
  }

  a.home__fv-news-btn {
    color: var(--Text);
    background: #fff;
    outline: max(1px, 0.0625rem) solid var(--Text);
  }

  .home__fv-news-btn::after {
    background-image: url(../img/arrow_right_s_black.svg);
  }

  /* 私たちについて */
  .home__about {
    padding: 5rem 0 0;
  }

  .home__about-inner {
    width: 100%;
  }

  .home__about-txt {
    font-size: 1.25rem;
    line-height: 1.7;
    margin-top: 1rem;
  }

  .home__about-img {
    width: calc(100% + 2.5rem);
    margin: 0.75rem -1.25rem 0;
    position: static;
  }

  .home__about a.btn {
    margin-top: 1.5rem;
  }

  /* 事業内容 */
  .home__business {
    padding: 5rem 0 0;
  }

  .home__business-txt {
    margin-top: 1rem;
  }

  .home__business-list {
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .home__business-list-item {
    width: calc((100% - 1rem) / 2);
    padding-top: 2.25rem;
  }

  .home__business-list-item img {
    width: 3rem;
  }

  .home__business-list-item-ttl {
    font-size: 1rem;
    line-height: 1.4375rem;
    margin-top: 1rem;
  }

  small.home__business-list-item-small {
    font-size: 0.8125rem;
    line-height: 1.1875rem;
    margin-top: 0;
  }

  .home__business a.btn {
    margin: 2rem auto 0;
  }

  /* アクセス */
  .home__access-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
  }

  .home__access-list {
    grid-row: 3;
  }

  .home__access-img {
    grid-row: 2;
    grid-column: 1;
  }

  .home__access-list {
    grid-template-columns: 1fr;
  }

  .home__access-list dt {
    padding: 0.5rem 0 0;
  }

  .home__access-list dd {
    padding: 0 0 0.5rem;
  }

  .home__access-list dd:nth-of-type(n+2)::before {
    display: none;
  }

  .home__access .btn {
    margin: 2rem 0 0;
  }

  /* お問い合わせ */
  .home__contact {
    padding: 2.5rem 0 4rem;
    margin-top: 5rem;
  }

  .home__contact-list {
    flex-direction: column;
    margin-top: 1.5rem;
  }

  .home__contact-list-item {
    gap: 2.5rem;
    width: 100%;
    height: 3.25rem;
  }

  .home__contact-list-item-ttl {
    font-size: 1rem;
  }

  .home__contact-list-item-txt {
    font-size: 1.125rem;
  }

  .home__contact a.btn {
    margin: 1.5rem 0 0;
  }


  /* ==========================================================================
  固定ページ
  =========================================================================== */
  .page__top {
    padding: 7.5rem 0 2.5rem;
  }

  .page__top-ttl {
    font-size: 1.5rem;
  }


  /* ==========================================================================
  私たちについて
  =========================================================================== */
  .about__policy {
    background-image: image-set(
      url(../img/about_policy_bg_sp.webp) type("image/webp"),
      url(../img/about_policy_bg_sp.png) type("image/png")
    );
    padding: 2rem 0 2.25rem;
  }

  .about__policy-ttl {
    font-size: 1.5rem;
  }

  .about__policy-list {
    margin-top: 2rem;
  }

  .about__policy-list-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
  }

  .about__policy-list-item::before,
  .about__policy-list-item::after {
    display: none;
  }

  .about__policy-list-item:nth-of-type(n+2) {
    margin-top: 1.5rem;
  }

  .about__history-catch {
    font-size: 1.5rem;
  }

  .about__history-txt {
    width: 100%;
    margin-top: 2rem;
  }

  .about__history-img {
    width: calc(100% + 1.25rem * 2);
    position: static;
    margin: 2rem -1.25rem 0;
  }

  .about__message {
    background-image: image-set(
      url(../img/about_message_bg_sp.webp) type("image/webp"),
      url(../img/about_message_bg_sp.jpg) type("image/png")
    );
    padding: 2.25rem 0;
  }

  .about__message-inner {
    padding: 0 2rem;
  }

  .about__message-txt {
    font-size: 1.5rem;
    color: #fff;
  }

  .furigana::before {
    font-size: 0.625rem;
    top: -0.8em;
  }

  .about__role {
    padding-top: 2rem;
  }

  .about__role-list {
    justify-content: flex-start;
    padding-left: 1.25rem;
    margin: 2rem -1.25rem 0;
    overflow-x: auto;
  }

  .about__role-list-item {
    width: 20rem;
    flex-shrink: 0;
    position: relative;
  }

  .about__role-list-item:last-of-type::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 1.25rem;
    height: 0.0625rem;
  }

  .about__role-txt {
    text-align: left;
  }

  .about__role .btn {
    margin-top: 2rem;
  }

  /* ==========================================================================
  事業紹介
  =========================================================================== */
  .business__content {
    margin-top: 0;
  }

  .business__list {
    margin-top: 1.5rem;
  }

  .business__list-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 2rem;
  }

  .business__list-item--others {
    gap: 1.5rem;
  }

  .business__list-item-txt-flex {
    flex-direction: column;
    gap: 1rem;
  }

  .business__list-item-othersList dt:nth-of-type(n+2) {
    margin-top: 1.5rem;
  }


  /* ==========================================================================
  当地区の漁業
  =========================================================================== */
  .fishing .page__top {
    padding-bottom: 2rem;
  }

  .fishing__message {
    padding: 4.0625rem 0 2.8125rem;
  }

  .fishing__message-txt {
    font-size: 1.25rem;
    margin-left: 0;
  }

  /* ホタテ貝養殖漁業 */
  .fishing__scallops {
    margin-top: 2.5rem;
  }

  .fishing__scallops-content {
    min-height: auto;
  }

  .fishing__scallops-txt {
    width: 100%;
  }

  .fishing__scallops-content img {
    width: 100%;
    margin-top: 2rem;
    position: static;
  }

  .fishing__h2 {
    font-size: 1.5rem;
  }

  /* SDGs */
  .fishing__sdgs {
    margin-top: 5rem;
  }

  .fishing__sdgs-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .fishing__sdgs-head-imgs {
    justify-content: space-between;
    width: 100%;
  }

  .fishing__sdgs-head-imgs img:nth-of-type(1) {
    width: 12.375rem;
  }

  .fishing__sdgs-head-imgs img:nth-of-type(2) {
    width: 6.5rem;
  }

  .fishing__sdgs-content {
    min-height: auto;
    margin-top: 2rem;
  }

  .fishing__sdgs-content img {
    width: 100%;
    position: static;
    margin-top: 1.5rem;
  }

  .fishing__sdgs-txt {
    width: 100%;
    margin-left: 0;
  }

  /* その他の取り組み */
  .fishing__others {
    margin-top: 5rem;
  }

  .fishing__others-content {
    min-height: auto;
  }

  .fishing__others-txt {
    width: 100%;
  }

  .fishing__others-content img {
    width: 100%;
    margin-top: 0.5rem;
    position: static;
  }

  .fishing__others-txt .fishing__h3:first-of-type {
    margin-top: 1rem;
  }


  /* ==========================================================================
  アクセス・施設案内
  =========================================================================== */
  .access .page__top {
    padding-bottom: 1.375rem;
  }

  .access__content {
    padding-top: 1.5rem;
    margin-top: 0;
  }

  .access .home__access-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .access .home__access-name {
    text-align: center;
  }

  .access .home__access-list {
    grid-template-columns: 4rem 1fr;
  }

  .access .home__access-list dt,
  .access .home__access-list dd {
    padding: 1rem 0;
  }

  .access .home__access-list dd:nth-of-type(n+2)::before {
    display: inline-block;
  }

  .access__map {
    margin-top: 2.625rem;
  }

  .access__map {
    width: calc(100% + 1.25rem * 2);
    height: 9.8125rem;
    margin: 2.625rem -1.25rem 0;
  }

  .access__map iframe {
    height: 9.8125rem;
  }

  .access__list {
    grid-template-columns: 1fr;
    margin-top: 1.5rem;
  }


  /* ==========================================================================
  お問い合わせ
  =========================================================================== */
  .contact__txt {
    text-align: left;
    margin-top: 0;
  }

  .contact__list {
    width: 100%;
    margin-top: 1.5rem;
  }
  
  .contact__list-item {
    flex-direction: column;
    gap: 0
  }

  .contact__list-item-wrap {
    gap: 1rem;
  }

  .contact__list-item-txt {
    font-size: 1.5rem;
  }


  /* ==========================================================================
  サイトポリシー
  =========================================================================== */
  .policy__content h2 {
    line-height: 1.5;
    min-height: 2.25rem;
    margin-top: 2rem;
  }

  .policy__content .policy__date {
    margin-top: 2rem;
  }


  /* ==========================================================================
  お知らせ アーカイブページ
  =========================================================================== */
  .news__content {
    margin-top: 0;
  }

  .news__filter {
    gap: 0.5rem 1rem
  }

  a.news__filter-btn {
    font-size: 0.875rem;
    padding: 0.25rem 1rem;
  }

  .news__item:nth-of-type(n+2) {
    margin-top: 1.5rem;
  }

  .news__item a {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
  }

  .news__items a::after {
    display: none;
  }

  .news__item-wrap {
    gap: 1rem
  }

  .news__item-date {
    font-size: 1.125rem;
    width: auto;
  }

  .news__item-cat {
    font-size: 0.75rem;
    width: auto;
    padding: 0.25rem 1rem;
  }

  .news__item-ttl {
    font-size: 1.125rem;
  }

  .pagination {
    margin-top: 2.5rem;
  }


  /* ==========================================================================
  お知らせ 個別ページ
  =========================================================================== */
  .single-news__box {
    padding: 1.5rem 1.25rem;
  }

  .single-news__box-top-date {
    font-size: 1.5rem;
  }

  .single-news__box-cat {
    font-size: 0.75rem;
    padding: 0.25rem 1rem;
  }

  .single-news__box-top-ttl {
    font-size: 1.5rem;
    line-height: 1.3;
    letter-spacing: 0.1em;
  }

  .single-news__box-txt {
    margin-top: 1rem;
  }


  /* ==========================================================================
  フッター
  =========================================================================== */
  .footer {
    margin-top: 5rem;
  }

  .footer__inner.inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding: 2.5rem 1.25rem 1.5rem;
  }

  .page:not(.home) .footer {
    margin-top: 5rem;
  }

  .archive .footer {
    margin-top: 2.5rem;
  }

  .single .footer {
    margin-top: 2.5rem;
  }

  .footer__info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer__info-logo {
    width: 15rem;
  }

  .footer__info-address {
    margin-top: 1.25rem;
  }

  .footer__nav {
    width: 100%;
    padding-left: 1.875rem;
    margin-top: 2.5rem;
  }

  .footer__nav .menu {
    gap: 1.5rem;
  }

  .footer__nav .menu a {
    font-weight: 700;
  }

  .footer__copyright {
    justify-content: center;
    margin-top: 2.5rem;
  }
}