/* 沖縄県広告協同組合：元テーマ（urasoerc）からの差分調整のみ。配色の一括置換は recolor.css（css_recolor.py 生成） */



/* ヘッダー：エージェント様（agent-r-e.co.jp）と同じ作り。透明の地に白い角丸の帯を浮かせる

   値は同テーマ系のエージェント様 base.css / style.css から流用。ロゴは白抜きだとスクロール後に消えるので白い台に載せる */

.header {

  background: transparent;

  box-shadow: none;

  align-items: center;

  padding: 5px 0;

}

.header__logo {

  margin-left: 0;

  width: auto;

  background: #fff;

  border-radius: 0 50px 50px 0;

  padding: 7px 24px 7px 20px;

}

.header__logo img {

  width: auto;

  height: 60px;

}

.header__main {

  flex-direction: row-reverse;

  align-items: center;

}

.header__nav {

  margin: 0.4rem 2rem 0.4rem 0;

}

.header__list {

  background: #fff;

  border-radius: 50px;

  padding: 11px 30px;

  min-height: 64px;

}

.header__item:not(:first-of-type) {

  margin-left: 2rem;

}

html .header__link,

main.home .header__nav a {

  color: #241d4a;

  text-shadow: none;

  font-weight: 500;

  font-size: 1.4rem;

  position: relative;

}

/* スクロール後（元テーマ main.js が .scrolled を付ける）は白い帯を敷き、帯の隙間から本文が透けないように */

html .header.scrolled,

html .home .header.scrolled {

  background: #fff;

  box-shadow: 0 2px 12px rgba(36, 29, 74, 0.08);

}

/* メニューのホバー：元テーマの「下線が伸びる」動きはそのまま、文字色は変えない（紫だと読みにくい） */

html .header__link:hover {

  color: #241d4a;

}

.header_contact {

  background: #fff;

  display: flex;

  height: 72px;

  padding-left: 4rem;

  border-radius: 50px 0 0 50px;

}

.header__top {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding-right: 1rem;

}

.header__tel {

  font-size: 2.5rem;

  line-height: 1;

  font-weight: 700;

  color: #84206f;

  position: relative;

  padding-left: 2.2rem;

}

.header__tel::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  width: 1.6rem;

  height: 1.6rem;

  background: url(../img/common/tel-color.svg) no-repeat center / contain;

}

.header__time {

  font-size: 1.2rem;

  line-height: 1;

  margin-top: 7px;

  color: #333;

}

.header__btn.email {

  display: flex;

  align-items: center;

  padding: 1rem 2rem 1rem 5rem;

  font-family: "Montserrat", sans-serif;

  font-size: 2.4rem;

  font-weight: 700;

  border-radius: 0;

}

.header__btn.email::before {

  top: 50%;

  left: 1.8rem;

  transform: translateY(-50%);

  background-size: 2.4rem;

  width: 2.4rem;

  height: 2.4rem;

}



/* スマホのヘッダー：透明の地に、白い台のロゴと丸いメニューボタン */

@media screen and (max-width: 767px) {

  .header-sp {

    background: transparent;

  }

  .header-sp__logo {

    background: #fff;

    border-radius: 0 50px 50px 0;

    padding: 1.6vw 3vw 1.6vw 2vw;

    margin-left: -2vw;

    width: 46vw;

  }

  .hamburger {

    border-radius: 50%;

    width: 12vw;

    height: 12vw;

    top: 1.5vw;

    right: 2vw;

  }

  .hamburger__lineTop {

    top: 4.6vw;

  }

  .hamburger__lineCenter {

    top: 5.9vw;

  }

  .hamburger__lineBottom {

    top: 7.2vw;

  }

}



/* 見出し：「大きな英字＋小さな和文」→「小さな英字ラベル＋大きな明朝の和文」 */

.home-section-title-en,

.home-center__container.-price .home-section-title span {

  font-size: 1.5rem;

  letter-spacing: 0.25em;

}

.home-section-title-en::after,

.home-center__container.-price .home-section-title span::after {

  width: 40px;

  height: 2px;

  bottom: -1.2rem;

}

.home-section-title-ja,

.home-section-title.-side p {

  font-family: "Zen Old Mincho", serif;

  font-size: 3.2rem;

  font-weight: 700;

  margin-top: 2.6rem;

  color: #241d4a;

}

@media screen and (max-width: 767px) {

  .home-section-title-ja,

  .home-section-title.-side p {

    font-size: 2.4rem;

  }

}



/* 理事長挨拶：写真を左に（元は右） */

.home-center__container.-price .home-center__img.pc-only {

  order: -1;

}



/* バナー帯：下半分の色帯を淡い色に */

html .p-bnr::after {

  background-color: #f3e8ef;

}



/* フッター：ヘッダーと同じ紺紫 */

html .footer {

  background: #241d4a;

}



/* 業務概要：コンベンション×サービスの図 */

.service-diagram {

  text-align: center;

  margin: 3rem auto 4rem;

}

.service-diagram img {

  max-width: 100%;

  height: auto;

}



/* 主な対応会場・組合員実績のリード文 */

.venue-lead,

.works-lead {

  text-align: center;

  line-height: 1.9;

  margin: 2rem 0 3rem;

}



/* 組合員紹介：各社ブロック */

.member-profile__logo {

  text-align: center;

  margin-bottom: 3rem;

}

.member-profile__logo img {

  max-width: 320px;

  width: 100%;

  height: auto;

}

.member-profile .sub-shop__table td a {

  color: inherit;

  word-break: break-all;

}

.home-menbers.-member {

  margin-top: 6rem;

}



/* 組合概要：アクセス */

.access {

  padding-bottom: 10rem;

}

.access-map iframe {

  display: block;

  width: 100%;

}



/* recolor.css は先頭に html を付けるため、元の白文字指定より強くなる箇所を戻す */

html .p-greeting__tit .home-section-title-en.-joinus,

html .p-greeting__tit .home-section-title-ja.-joinus {

  color: #fff;

}



/* トップ「主な実績」：元の週報用PDFアイコンは使わない */

.home-blog h3.item__ttl::before,

.home-blog h3.item__ttl::after {

  display: none;

}



/* 業務概要・対応会場の表：列幅を均等に */

.fee .fee-table {

  table-layout: fixed;

}



/* 組合員紹介：各社の表を組合概要の基本情報と同じ見た目に */

.member-profile .sub-shop__table th {

  width: 16rem;

  padding: 1.8rem;

  background-color: #f1effa;

  color: #333;

  vertical-align: middle;

  font-weight: 500;

}

.member-profile .sub-shop__table td {

  padding: 1.8rem 2rem;

  background: #fff;

}



/* フッター：リンク文字を読める大きさに */

.footer .footer__link {

  font-size: 1.4rem;

}



/* スマホ調整：組合員紹介の表は見出しと内容を縦に積む */

@media screen and (max-width: 767px) {

  .member-profile table.sub-shop__table.table_simple,

  .member-profile table.sub-shop__table.table_simple tbody,

  .member-profile table.sub-shop__table.table_simple tr,

  .member-profile table.sub-shop__table.table_simple th,

  .member-profile table.sub-shop__table.table_simple td {

    display: block;

    width: 100%;

    padding: 1rem 1.2rem;

  }

  .member-profile__logo img {

    max-width: 220px;

  }

}

/* 理事長名を途中で改行させない */

.home-section__desc-name span {

  white-space: nowrap;

}

.member-profile__logo img {

  display: block;

  margin: 0 auto;

}





/* バナーのスライダー：画面端に余白を取り、画像に重なる左右の矢印は出さない（自動送り＋ドット・スワイプで操作） */

.p-bnr-slideArea {

  padding: 0 4rem;

}

.p-bnr-slideArea .swiper .swiper-button-next,

.p-bnr-slideArea .swiper .swiper-button-prev {

  display: none;

}

/* 元テーマは隣のスライドを端に見せる設定（overflow: visible）→ 見せない。ドットは枠内の下に */

.p-bnr-slideArea .swiper {

  overflow: hidden;

  padding-bottom: 3.6rem;

}

.p-bnr-slideArea .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {

  bottom: 0;

}

@media screen and (max-width: 767px) {

  .p-bnr-slideArea {

    padding: 0 2rem;

  }

  .p-bnr-slideArea .swiper {

    padding: 0 0 3.6rem;

  }

}



/* トップ「About」帯（暗い写真の上）の英字ラベルは淡いピンクに */

html .p-greeting__tit .home-section-title-en.-about {

  color: #e8b6dc;

}



/* 下層ページの見出し帯：エージェント様（/news/ ほか）の l-page-cover と同じ作り

   （元テーマの .ttl_cover_20230406 / .sub-section-title にエージェント様 base.css の値を当てる） */

.ttl_cover_20230406 {

  background-position: center bottom 25%;

  border-bottom-right-radius: 100px;

  border-bottom-left-radius: 100px;

  overflow: hidden;

  z-index: 3;

}

.sub-section-title {

  font-family: "Montserrat", sans-serif;

  font-size: 6rem;

  font-weight: bold;

  line-height: 1.45;

  letter-spacing: 0;

  color: #fff;

  text-align: left;

  max-width: 116.8rem;

  margin: 0 auto;

  padding: 140px 2.4rem 80px;

}

.sub-section-title > span:not(.sub-section-title__en) {

  display: block;

  font-size: 1.6rem;

  font-weight: 500;

  opacity: 1;

  margin-top: 0;

}

@media screen and (max-width: 767px) {

  /* 元テーマのスマホ用グラデーション文字（文字の塗りを透明にする指定）を打ち消す */

  .sub-section-title {

    -webkit-text-fill-color: #fff;

    background: none;

  }

  .ttl_cover_20230406 {

    border-bottom-right-radius: 50px;

    border-bottom-left-radius: 50px;

  }

  .sub-section-title {

    font-size: 12vw;

    padding: 85px 2.4rem 40px;

  }

  .sub-section-title > span:not(.sub-section-title__en) {

    font-size: 4vw;

  }

}



/* お知らせ一覧：エージェント様 /news/ と同じカード（c-card） */

.sub-archive-news .sub-archive__container {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 3rem;

}

.sub-archive-news .c-card {

  width: 100%;

  box-shadow: none;

}

.sub-archive-news .c-card__img-wrap {

  aspect-ratio: auto;

}

.sub-archive-news .c-card__img-wrap img {

  width: 100%;

  max-height: 250px;

  object-fit: cover;

  aspect-ratio: 3 / 2;

  border-radius: 10px;

}

.sub-archive-news .c-card__body {

  padding: 1.5rem 1rem 2rem;

}

.sub-archive-news .c-card__body-top {

  padding: 0;

}

.sub-archive-news .c-card__time {

  font-size: 1.2rem;

  margin-right: 2rem;

}

html .sub-archive-news .c-tag {

  margin-left: 0;

  background: #241d4a;

  color: #fff;

  font-size: 1.2rem;

  height: 2.6rem;

  padding: 0 1rem;

  display: flex;

  align-items: center;

  border-radius: 30px;

}

.sub-archive-news .c-card__body-bottom {

  padding: 1rem 0 0;

  font-size: 1.8rem;

}

.sub-archive-news .c-card_link .c-card__ttl {

  transition: 0.3s ease-in-out;

  background: linear-gradient(#000, #000) 0 100%/0 1px no-repeat;

}

.sub-archive-news .c-card_link:hover .c-card__ttl {

  background-size: 100% 1px;

}

@media screen and (max-width: 767px) {

  .sub-archive-news .sub-archive__container {

    grid-template-columns: 1fr;

    gap: 30px;

  }

}



/* トップのメインビジュアル：本体は parts.css（HeartLink様と同じ作り）。元テーマの 16:9 切り抜きだけ打ち消す */

.home-mv__slide img {

  aspect-ratio: auto;

}

.home-mv__slides .slick-slide::before,

.home-mv .slick-slide::before {

  display: none;

}

/* メインビジュアルの直後に余白を空けない */

.home .about {

  margin-top: 0;

}



/* サブメニュー（組合概要）：ヘッダー全幅の帯 → 「組合概要」の真下に白い角丸の小窓で出す */

.header-item.-megamenu {

  position: relative;

}

html .megaMenu {

  background: #fff;

  left: 50%;

  right: auto;

  width: auto;

  min-width: 16rem;

  transform: translateX(-50%);

  top: calc(100% + 1.1rem);

  border-radius: 10px;

  box-shadow: 0 6px 18px rgba(36, 29, 74, 0.15);

}

.header-item:hover .megaMenu {

  height: auto;

}

.megaMenu-list {

  padding: 0.8rem 0;

}

.megaMenu-item {

  display: block;

  padding-left: 0;

}

.megaMenu .megaMenu-list .megaMenu-item a {

  display: block;

  color: #241d4a;

  padding: 0.8rem 2rem;

  white-space: nowrap;

  font-size: 1.4rem;

}

/* 「組合概要」とサブメニューの間（隙間）でホバーが切れないように */

.header-item.-megamenu::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  top: 100%;

  height: 1.2rem;

}



/* 理事長挨拶：写真なし（文字だけ）・中央の読みやすい幅に */

.home-center__container.-price {

  display: block;

  max-width: 80rem;

  margin: 0 auto;

}



/* 下層タイトルの動き：英字だけ1文字ずつ（main.js で span 分割）、和文は少し遅れて現れる */

.sub-section-title > .sub-section-title__en {

  display: block;

  font-size: inherit;

  margin: 0;

}

.sub-section-title__en span {

  display: inline-block;

  font-size: inherit;

  font-weight: inherit;

  color: inherit;

}

.sub-section-title > span:not(.sub-section-title__en) {

  animation: fadeSlideUp 0.8s ease 0.6s both;

}



/* お問い合わせフォーム：見出し列の改行・「必須」の折り返しをなくす */

.sub-contact__item dt {

  width: 26rem;

  flex-shrink: 0;

  gap: 1rem;

}

.sub-contact__item dt .required {

  white-space: nowrap;

  flex-shrink: 0;

}

@media screen and (max-width: 767px) {

  .sub-contact__form {

    padding: 2rem 0 0;

  }

  .sub-contact__item {

    display: block;

    padding: 2rem 0;

  }

  .sub-contact__item dt {

    width: 100%;

    justify-content: flex-start;

  }

  .sub-contact__item dd {

    margin: 1rem 0 0;

  }

}



/* 業務概要：主な対応会場のカード（お知らせ一覧と同じ c-card）の補足文 */

.venue-cards .c-card__ttl {

  font-weight: 700;

}

.venue-spec {

  margin-top: 0.8rem;

  font-size: 1.4rem;

  line-height: 1.7;

  color: #555;

}



/* 業務概要：ご依頼の流れ（元テーマの .flow.p-flow-sec02 を使用。番号と見出しを横並びにし、淡い地色に） */

.flow.p-flow-sec02 .flow_content {

  padding: 0;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}

.flow.p-flow-sec02 .flow_content .row {

  background-color: #f8f2f6;

  padding: 2.6rem 2.4rem 3rem;

}

.flow.p-flow-sec02 .flow_content .row + .row {

  margin-top: 0;

}

.flow.p-flow-sec02 .flow_content .detail {

  width: 100%;

  padding: 0;

  margin: 0;

}

.flow-head {

  display: flex;

  align-items: center;

}

.flow.p-flow-sec02 .flow_content .detail .num {

  flex-shrink: 0;

  width: 4.8rem;

  height: 4.8rem;

  line-height: 4.8rem;

  font-size: 2rem;

  border-radius: 50%;

}

.flow.p-flow-sec02 .flow_content .detail .head {

  font-size: 1.9rem;

  padding: 0 0 0 1.4rem;

  color: #241d4a;

}

.flow.p-flow-sec02 .flow_content .detail .text {

  margin-top: 1.4rem;

  padding: 0;

  font-size: 1.5rem;

  line-height: 1.8;

}

@media screen and (max-width: 767px) {

  .flow.p-flow-sec02 .flow_content {

    grid-template-columns: 1fr;

    gap: 1.2rem;

  }

}



/* MVのキャッチ：「まで、」が次の行に落ちないよう少し小さく（HeartLink様は 3.6vw） */

.hl-mv-catch span {

  font-size: clamp(2.6rem, 3.1vw, 5rem);

}

@media screen and (max-width: 767px) {

  .hl-mv-catch span {

    font-size: 5.6vw;

  }

}



/* スマホ：表とお知らせの読みやすさ（全ページ確認で見つかった点） */

@media screen and (max-width: 767px) {

  /* トップのお知らせ：画像と文字を横並び（エージェント様と同じ） */

  .hl-topics .c-news__link {

    flex-direction: row;

    align-items: center;

  }

  .hl-topics .c-news__info {

    flex-wrap: wrap;

    gap: 0.6rem;

  }

  .hl-topics .home-news__category {

    height: 2.2rem;

    font-size: 1.1rem;

  }

  /* 業務概要の2列の表：縦に積む */

  .fee .fee-table,

  .fee .fee-table thead,

  .fee .fee-table tbody,

  .fee .fee-table tr,

  .fee .fee-table th,

  .fee .fee-table td {

    display: block;

    width: 100%;

  }

  .fee .fee-table thead tr {

    display: none;

  }

  .fee .fee-table td::before {

    content: attr(data-label);

    display: block;

    font-weight: 700;

    margin-bottom: 0.4rem;

    color: #241d4a;

  }

  /* 組合員実績・役員一覧の3列の表：1行ずつ縦に積む */

  .overview .p4,

  .overview .p4 tbody,

  .overview .p4 tr,

  .overview .p4 th,

  .overview .p4 td {

    display: block;

    width: 100%;

  }

  .overview .p4 tr {

    padding: 1.2rem 1.4rem;

  }

  .overview .p4 th,

  .overview .p4 td {

    padding: 0;

    border: none;

    text-align: left;

  }

  .overview .p4 th:empty {

    display: none;

  }

  .overview .p4 th {

    font-weight: 700;

    color: #84206f;

  }

  .overview .p4 td + td {

    margin-top: 0.3rem;

    font-size: 1.3rem;

    color: #666;

  }

}



/* お知らせの記事ページ：前後の記事の矢印（元テーマの作り）を組合の色に */

.sub-single .nav-previous a,

.sub-single .nav-next a {

  color: #84206f;

  font-size: 1.8rem;

}



/* メインビジュアルの配置（2026-10-19）：参考サイト（Toyopla様・HeartLink様）と左右を入れ替え、写真を3枚に。

   部品（スライダー・文字の動き・縦書き・透かし）はそのまま */

@media screen and (min-width: 768px) {

  .home-mv .slider01 {

    margin-left: auto;

    box-shadow: -24px 24px 0 rgba(255, 255, 255, .18);

  }

  .home-mv .slider01 .slick-slide img {

    margin-left: auto;

  }

  .home-mv__slides02.slick-slider {

    right: auto;

    left: 0;

  }

  .home-mv .slider02 .slick-slide img {

    margin-left: 0;

    margin-right: auto;

  }

  .home-mv .slider03 {

    position: absolute;

    top: 13vh;

    left: 4vw;

    width: 20vw;

    z-index: 2;

    border: 6px solid #fff;

  }

  .home-mv .slider03 .slick-slide img {

    width: 100%;

    height: 22vh;

    object-fit: cover;

    margin: 0;

  }

  .home-mv .slider03 .slick-list,

  .home-mv .slider03 .slick-track {

    bottom: 0;

  }

  .home-mv__catch {

    left: auto;

    right: 3vw;

    bottom: 10vh;

    width: 46vw;

  }

  .home-mv__catch .hl-mv-catch span {

    font-size: clamp(2.4rem, 2.8vw, 4.6rem);

  }

  .home-mv__catch03 {

    left: auto;

    right: 53vw;

  }

  .home-mv__catch02 {

    top: auto;

    right: 3vw;

    bottom: 2vh;

    left: auto;

    width: 26vw;

  }

  .home-mv__scrolldown {

    left: 44%;

  }

}



/* MVキャッチ：1文字ずつの遅れが21文字目までしか無く、22文字目以降が先に出ていた → 30文字目まで追加 */

.service-ttl.is-inview span:nth-child(22) { animation-delay: 2.1s; }

.service-ttl.is-inview span:nth-child(23) { animation-delay: 2.2s; }

.service-ttl.is-inview span:nth-child(24) { animation-delay: 2.3s; }

.service-ttl.is-inview span:nth-child(25) { animation-delay: 2.4s; }

.service-ttl.is-inview span:nth-child(26) { animation-delay: 2.5s; }

.service-ttl.is-inview span:nth-child(27) { animation-delay: 2.6s; }

.service-ttl.is-inview span:nth-child(28) { animation-delay: 2.7s; }

.service-ttl.is-inview span:nth-child(29) { animation-delay: 2.8s; }

.service-ttl.is-inview span:nth-child(30) { animation-delay: 2.9s; }



/* スマホメニュー：一番上の中央にロゴ */

.nav-drawer__logo {

  text-align: center;

  padding: 2rem 0 1rem;

}

.nav-drawer__logo img {

  width: 56vw;

  max-width: 240px;

  height: auto;

  margin: 0 auto;

}



@media screen and (max-width: 767px) {

  /* スマホのヘッダー：透明だとスクロール時に本文がロゴとメニューの間から透けるので白い帯に */

  .header-sp {

    background: #fff;

    box-shadow: 0 2px 10px rgba(36, 29, 74, 0.08);

  }

  .header-sp__logo {

    margin-left: 0;

    padding: 0 2vw;

    border-radius: 0;

    background: transparent;

  }

  /* トップのお知らせ：カテゴリーラベルを文字幅に */

  .hl-topics .home-news__category {

    width: auto;

    align-self: flex-start;

  }

  /* 組合員紹介：表を枠いっぱいに */

  .member-profile .sub-shop__table {

    width: 100%;

  }

  /* フッター：ロゴも中央に */

  .footer__logo {

    margin: 0 auto;

  }

  .footer__address {

    text-align: center;

  }

}