@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');




/* ===================================================================
/* Basestyle
=====================================================================*/
:root {
  --color-white01: #FFFFFF;
  --color-black01: #1E2021;
  --color-black02: #373738;
  --color-gray01: #EDEDED;
  --color-gray02: #A2A2A2;
  --color-blue01: #005EB0;
  --color-lightblue: #7FBBDB;
  --header-h: 80px;
}

/* ===================================================================
/* TOP共通
=====================================================================*/
body.home {
  overflow-x: visible;
}

ul li {
  list-style-type: none;
}

.contents-inner {
  padding-left: calc(20 * 100 / 375 * 1vw);
  padding-right: calc(20 * 100 / 375 * 1vw);
}

.top-section-title {
  width: fit-content;
  padding: 24px 0;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: .06em;
  position: relative;
}

.top-section-title::before {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%, #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%, #E83A40 79.78%, #E92F54 90.49%, #E84073 100%);
  position: absolute;
  top: 0;
  left: 0;
}

.global-footer .top-section-title,
.top-category .top-section-title,
.top-business .top-section-title {
  margin: 0 auto;
}

.top-btn-more {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: start;
  width: fit-content;
  min-height: 74px;
  position: relative;
}

.top-btn-more-txt {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
}

.top-btn-more-txt::before,
.top-btn-more-txt::after {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 30px;
  height: 30px;
}

.top-btn-more-txt::before {
  background: url(../images/common-add/ico-linkarrow-01.webp);
  background-size: contain;
}

.top-btn-more-txt::after {
  background: linear-gradient(135deg, #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%, #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%, #E83A40 79.78%, #E92F54 90.49%, #E84073 100%) border-box border-box;
  border: 1px solid transparent;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-clip: padding-box, border-box;
  -webkit-mask-composite: destination-out;
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-clip: padding-box, border-box;
  mask-composite: exclude;
  border-radius: 100%;
  position: absolute;
  top: calc(50% - 15px);
  left: 0;
  transition: transform 0.5s ease;
}

.top-btn-more.--right {
  margin-left: auto;
}

.top-btn-more.--center {
  margin: 0 auto;
}


/* ===================================================================
/* Header
=====================================================================*/

.global-header-border {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 2000;
  background: linear-gradient(90deg,
      #B95B9F 0%, #8F67A9 10%, #587ABD 20%, #0498D8 30%,
      #00A853 40%, #B1D025 50%, #FEF007 60%, #F39B1D 70%,
      #E83A40 79.78%, #E92F54 90.49%, #E84073 100%);
}

.global-header {
  position: relative;
  top: 0;
  width: 100%;
  background: var(--color-white01);
  z-index: 1000;
}

.global-header.is-fixed {
  position: fixed;
  top: 2px;
  left: 0;
  width: 100%;
}

.global-header-inner {
  padding: calc(12 * 100 / 375 * 1vw) calc(12 * 100 / 375 * 1vw) calc(12 * 100 / 375 * 1vw) calc(16 * 100 / 375 * 1vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
}

.global-header-inner .logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-header-inner .logo img {
  width: calc(178 * 100 / 375 * 1vw);
}

.global-header-inner .logo .logo-50th {
  width: calc(48 * 100 / 375 * 1vw);
  /* 50周年ロゴの幅 */
}

.global-header-news {
  color: var(--color-white01);
  background-color: var(--color-black01);
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: .06em;
}

.global-header-news-inner {
  display: grid;
  grid-template-columns: auto calc(65 * 100 / 375 * 1vw);
  align-items: center;
}

.global-header-news a {
  color: var(--color-white01);
}

.global-header-news .global-header-news-detail {
  height: 100%;
}

.global-header-news .global-header-news-detail a {
  height: 100%;
}

.global-header-news-list {
  border-left: 1px solid var(--color-gray02);
  padding: calc(12 * 100 / 375 * 1vw) 0 calc(12 * 100 / 375 * 1vw) calc(12 * 100 / 375 * 1vw);
}

.global-header-news-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: calc(16 * 100 / 375 * 1vw);
}

.global-header-news-list a::after {
  position: absolute;
  width: 9px;
  height: 9px;
  content: "";
  background-image: url(../images/common/ico-arrow.svg);
  background-size: contain;
  right: 0;
}

.mobile-menu {
  position: relative;
  z-index: 2000;
  /* ボタン最前面 */
  display: flex;
  align-items: center;
  gap: calc(22 * 100 / 375 * 1vw);
}

.mobile-nav-trigger {
  width: 20px;
  height: 11px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-black01);
  transition: .3s;
}

.mobile-nav-trigger span:nth-child(1) {
  top: 0;
}

.mobile-nav-trigger span:nth-child(2) {
  top: 5px;
}

.mobile-nav-trigger span:nth-child(3) {
  bottom: 0;
}

.mobile-nav-trigger.active span:nth-child(1) {
  transform: rotate(30deg);
  top: 5px;
}

.mobile-nav-trigger.active span:nth-child(2) {
  opacity: 0;
}

.mobile-nav-trigger.active span:nth-child(3) {
  transform: rotate(-30deg);
  bottom: 5px;
}

.mobile-nav2-trigger {
  width: 14px;
  height: 14px;
  position: relative;
  border: none;
  background: none;
}

.mobile-nav2-trigger img {
  width: 100%;
  position: absolute;
  inset: 0;
  transition: .3s;
}

.mobile-nav2-trigger::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile-nav2-trigger span {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 1px;
  background: var(--color-black01);
  transform: translateX(-50%);
  opacity: 0;
  transition: .3s;
}

.mobile-nav2-trigger span:nth-child(2) {
  top: calc(50% - 0.5px);
}

.mobile-nav2-trigger span:nth-child(3) {
  top: calc(50% - 0.5px);
}

.mobile-nav2-trigger.active img {
  opacity: 0;
}

.mobile-nav2-trigger.active span {
  opacity: 1;
}

.mobile-nav2-trigger.active span:nth-child(2) {
  transform: translateX(-50%) rotate(30deg);
}

.mobile-nav2-trigger.active span:nth-child(3) {
  transform: translateX(-50%) rotate(-30deg);
}

.global-header-right {
  position: fixed;
  left: 0;
  width: 100%;
  height: calc(288 * 100 / 375 * 1vw);
  z-index: 90;
  background: var(--color-white01);
  overflow-y: auto;
  top: -100%;
  transition: transform .4s ease;
}

.global-header-right.active {
  position: fixed;
  top: var(--header-h);
  background: var(--color-white01);
  display: flex;
  flex-direction: column-reverse;
  padding: calc(20 * 100 / 375 * 1vw);
}

.global-laptop-nav-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(15 * 100 / 375 * 1vw);
}


.global-laptop-nav-list a {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .06em;
}

.laptop-menu {
  padding-top: calc(41 * 100 / 375 * 1vw);
}

.laptop-menu-nav-list {
  display: grid;
  gap: calc(16 * 100 / 375 * 1vw);
}

.laptop-menu a {
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: .04em;
}

.laptop-menu-nav-list li ul {
  display: flex;
  gap: calc(21 * 100 / 375 * 1vw);
}

.laptop-menu-nav-list li.menu-search a,
.laptop-menu-nav-list li.menu-language a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 24px;
}

.laptop-menu-nav-list li.menu-search a::before {
  position: absolute;
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/common/ico-search.svg);
  background-size: contain;
  left: 4px;
}

.laptop-menu-nav-list li.menu-language a::before {
  position: absolute;
  content: "";
  width: 13px;
  height: 13px;
  background-image: url(../images/common/ico-language.svg);
  background-size: contain;
  left: 4px;
}

.sp-laptop-nav {
  position: fixed;
  top: 115px;
  left: 0;
  width: 100%;
  height: calc(64 * 100 / 375 * 1vw);
  z-index: 90;
  background: var(--color-white01);
  overflow-y: auto;
  top: -100%;
  transition: transform .4s ease;
}

.sp-laptop-nav.active {
  top: var(--header-h);
  background: var(--color-white01);
}

.sp-laptop-nav-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: calc(20 * 100 / 375 * 1vw);
}

.sp-laptop-nav-list li {
  text-align: center;
}

.sp-laptop-nav-list a {
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
}

body.menu-open{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}


/* ===================================================================
/* MainVisual
=====================================================================*/

.top-mainvisual {
  position: relative;
  width: 100%;
}

.top-mainvisual .text-container {
  
  padding: calc(400 * 100 / 375 * 1vw) 0 calc(20 * 100 / 375 * 1vw) calc(20 * 100 / 375 * 1vw);
}

.top-mainvisual .scroll-tit {
  width: calc(127 * 100 / 375 * 1vw);
  margin-bottom: calc(30 * 100 / 375 * 1vw);
}

.top-mainvisual .scroll-tit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-mainvisual .scroll-text p{
  color: var(--color-white01);
  font-size: 1.4rem;
  letter-spacing: .06em;
  line-height: 2.2;
  font-feature-settings: "palt";
  margin-bottom: 3rem;
}
.top-mainvisual .scroll-text p:last-child{
  margin-top: 6rem;
  margin-bottom: 0;
}



/* ===================================================================
/* 事業領域
=====================================================================*/

.top-business-inner {
  background-color: var(--color-black01);
  color: var(--color-white01);
  padding-bottom: calc(40 * 100 / 375 * 1vw);
}

.top-business-inner p {
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: .06em;
}

.top-business-list {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: calc(40 * 100 / 375 * 1vw) 0 0;
}

.top-business-item {
  position: relative;
}

.top-business-item-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--color-white01);
  position: absolute;
  bottom: calc(8 * 100 / 375 * 1vw);
  left: calc(8 * 100 / 375 * 1vw);
  display: block;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  text-combine-upright: unset;
}

.top-btn-more.top-business-btn {
  margin: calc(19 * 100 / 375 * 1vw) auto;
}

.top-business-btn .top-btn-more-txt {
  color: var(--color-white01);
}



/* ===================================================================
/* 製品情報
=====================================================================*/
.top-category{
  background-color: #F7FBFC;
}
.top-category-inner {
  padding-bottom: calc(40 * 100 / 375 * 1vw);
}

.tab-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: calc(8 * 100 / 375 * 1vw) 0 calc(24 * 100 / 375 * 1vw);
}

.tab-button {
  font-family: Jost;
  background-color: var(--color-white01);
  border: 1px solid #C0DDF0;
  border-radius: 2px;
  color: #7FBBDB;
  padding: calc(6 * 100 / 375 * 1vw) calc(20 * 100 / 375 * 1vw);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  transition: background-color 0.5s;
}

.tab-button.active {
  border: 0;
  background-color: var(--color-blue01);
  color: var(--color-white01);
  position: relative;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 9px;
  background-color: var(--color-blue01);
  clip-path: polygon(0 0%, 100% 0%, 50% 100%);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.top-category-detail-list {
  display: grid;
  gap: 24px;
}

.top-category-detail-list a {
  cursor: pointer;
}

.top-category-detail-heading {
  display: flex;
  gap: 15px;
  align-items: center;
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.5;
  letter-spacing: .06em;
  padding: 12px 0 4px;
}

.top-category-detail-heading::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 5px;
  height: 3px;
  background: linear-gradient(90deg, #B95B9F 0%, #8C6AAD 25%, #5F7ABC 65%, #0498D8 100%);
}

.top-category-detail-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;  
}

.top-category-detail-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.top-category-detail-txt p {
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: .06em;
}

.top-category-filter-list {
  display: grid;
  gap: 8px;
  padding: 0 calc(16 * 100 / 375 * 1vw);
}

.top-category-filter-list li a {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--color-blue01);
  text-align: center;
  border: 1px solid #E9F0F2;
  padding: calc(35 * 100 / 375 * 1vw) 0;
  cursor: pointer;
}

.top-category-filter-heading {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: calc(20 * 100 / 375 * 1vw);
  font-size: 1.5rem;
  letter-spacing: .06em;
  line-height: 1.7;
  font-weight: 700;
}

.top-category-filter-heading::after {
  position: absolute;
  width: 9px;
  height: 9px;
  content: "";
  background-image: url(../images/common/ico-arrow.svg);
  background-size: contain;
  right: 0;
}

.top-btn-more.top-category-btn {
  margin: calc(19 * 100 / 375 * 1vw) auto;
}


/* ===================================================================
/* お知らせ
=====================================================================*/

.top-topics-list {
  margin-bottom: calc(40 * 100 / 375 * 1vw);
}

.top-topics-item a {
  display: block;
  border-bottom: 1px solid var(--color-gray01);
  padding: calc(20 * 100 / 375 * 1vw) 0;
}

.top-topics-detail {
  display: flex;
  align-items: center;
  gap: calc(12 * 100 / 375 * 1vw);
}

.top-topics-category {
  border: 1px solid var(--color-gray02);
  border-radius: 2px;
  color: var(--color-black02);
  font-size: 1.2rem;
  line-height: 1.7;
  letter-spacing: .06em;
  display: inline-block;
  padding: 0 calc(8 * 100 / 375 * 1vw);
}

.top-topics-item-title p {
  letter-spacing: .06em;
  padding-top: calc(8 * 100 / 375 * 1vw);
  color: var(--color-black02);
}


.top-news-media,
.top-column {
  padding-bottom: calc(45 * 100 / 375 * 1vw);
}

.top-news-date {
  font-size: 1.4rem;
  font-family: Jost;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
}

/* ===================================================================
/* コラム
=====================================================================*/

.top-column {
  background-color: #F7FBFC;
}

.top-column-item a {
  display: grid;
  grid-template-columns: 1fr calc(179 * 100 / 375 * 1vw);
  gap: calc(12 * 100 / 375 * 1vw);
  border: none;
}

.top-column-detail {
  flex-direction: column;
  align-items: flex-start;
  gap: calc(8 * 100 / 375 * 1vw);
}

.top-column-item-title p {
  color: var(--color-black01);
  padding-top: 0;
}



/* ===================================================================
/* バナー
=====================================================================*/

.top-bnr-inner {
  overflow-x: hidden;
  padding: calc(32 * 100 / 375 * 1vw) 0 calc(24 * 100 / 375 * 1vw);
  background-color: var(--color-black01);
}

.top-bnr .slider-bnr {
  width: 100%;
}

.slider-bnr .slick-slide {
  margin: 0 calc(8 * 100 / 375 * 1vw);
  height: auto;
}

.slider-bnr li a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slider-bnr li img {
  width: 100%;
  display: block;
}

.slider-bnr li a p {
  font-size: 1.2rem;
  letter-spacing: .06em;
  color: var(--color-white01);
  padding-top: calc(8 * 100 / 375 * 1vw);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ===================================================================
/* パララックスコンテンツ
=====================================================================*/

/* 親要素：スクロール領域を確保 */
.parallax {
  position: relative;
  min-height: 100vh;
  z-index: 1;
  overflow: visible !important;
}

/* 固定される画像 */
.parallax-img {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));/* ヘッダーの高さ分下げる */
  width: 100%;
  background-image: url(../images/top/img-photo01_sp.webp);
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
  z-index: 1;
}

.parallax-content-wrapper {
  position: relative;
  z-index: 2;
}

.top-news-media {
  background: var(--color-white01);
  position: relative;
}

.parallax-img.img-2 {
  background-image: url(../images/top/img-photo02_sp.webp);
}
body:not(.home) .parallax-img.img-2 {
  display: none;
}


/* ===================================================================
/* Footer
=====================================================================*/

.global-footer {
  background-image: url(../images/common/bg_footer_sp.webp);
  background-size: cover;
  background-position: top center;
  color: var(--color-white01);
}

p.global-footer-read {
  font-size: 1.5rem;
  line-height: 1.7;
  letter-spacing: 0;
}

.global-footer .global-footer-inner {
  padding-bottom: 40px;
}

.global-footer-ctaarea {
  display: grid;
  gap: calc(64 * 100 / 375 * 1vw);
  grid-template-columns: 1fr;
  margin-top: calc(64 * 100 / 375 * 1vw);
}

.global-footer-cta-heading {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: calc(20 * 100 / 375 * 1vw);
}

.global-footer-cta-heading::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background-image: url(../images/common/ico-mail.svg);
  background-size: 36px auto;
  background-position: 0 center;
  flex-shrink: 0;
}

.global-footer-download-heading::before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  background-image: url(../images/common/ico-download.svg);
  background-size: 36px auto;
  background-position: 0 center;
  flex-shrink: 0;
}

.global-footer-cta-list-item a {
  color: var(--color-white01);
  padding: calc(40 * 100 / 375 * 1vw) calc(15 * 100 / 375 * 1vw) calc(20 * 100 / 375 * 1vw) 0;
  border-bottom: 1px solid var(--color-gray02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  position: relative;
}

.global-footer-cta-list-item a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--color-white01);
  border-right: 1px solid var(--color-white01);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.global-footer-cta-list-item:first-child a {
  padding: calc(12 * 100 / 375 * 1vw) calc(15 * 100 / 375 * 1vw) calc(20 * 100 / 375 * 1vw) 0;
}

.cta-text {
  display: grid;
  gap: 2px;
}

.global-footer-cta-list-heading {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0;
}

.global-footer-cta-list-txt {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
}

.global-footer-cta-other {
  border: 1px solid rgba(250, 250, 250, 0.3);
  padding: 24px 22px;
}

.global-footer-cta-other p {
  letter-spacing: .06em;
  line-height: 1.7;
}

.global-footer-cta-other p.notice {
  font-size: 1.5rem;
  padding-bottom: 15px;
}

.global-footer-cta-tel {
  padding-top: calc(24 * 100 / 375 * 1vw);
  display: grid;
  gap: 20px;
}

.global-footer-cta-tel .tel-num {
  font-family: 'Jost', sans-serif;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.global-footer-cta-tel .tel-num a {
  color: var(--color-white01);
}

.tel-num-heading {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .06em;
  display: block;
  font-weight: 700;
  padding-bottom: 8px;
}

.tel-num-heading:last-child {
  font-weight: 700;
}

.global-footer-bottomarea {
  background: linear-gradient(91.16deg, #0073B5 0%, #005EB0 50.63%, #30519C 101.26%);
  padding: calc(20 * 100 / 375 * 1vw) 0;
}

.global-footer-bottomarea-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.global-footer-bottomarea-list {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 16px;
}

.global-footer-bottomarea-sns-list {
  padding: 12px 0 20px;
  position: relative;
}

.global-footer-bottomarea-sns-list::before {
  position: absolute;
  content: "";
  width: 12px;
  height: 1px;
  background-color: rgba(250, 250, 250, 0.2);
  left: 0;
  top: 0;
}

.global-footer-bottomarea-list li a {
  font-family: "Inter", sans-serif;
  color: var(--color-white01);
  line-height: 1;
  letter-spacing: 0;
}

.global-footer-bottomarea .copyright {
  font-size: 1.2rem;
  color: #6CA0D9;
  font-family: "Inter", sans-serif;
  line-height: 1;
  letter-spacing: 0;
}

@media screen and (min-width: 769px),
print {

/* ===================================================================
/* TOP共通
=====================================================================*/

  .contents-inner {
    padding-left: clamp(24px, 1.875vw, 36px);
    padding-right: clamp(24px, 1.875vw, 36px);
  }

  .top-section-title {
    padding: 32px 0;
    font-size: clamp(18px, calc(10px + 0.625vw), 22px);
  }

  .sp_only {
    display: none;
  }

  .top-btn-more {
    gap: 12px;
  }

  .top-btn-more-txt {
    font-size: clamp(14px, 11.714px + 0.223vw, 16px);
    transition: transform 0.5s ease, color 0.5s ease;
  }

  .top-btn-more-txt::after {
    transition: transform 0.5s ease;
  }

  .top-btn-more a:hover {
    opacity: 1;
  }

  .top-btn-more a:hover .top-btn-more-txt {
    transform: translateX(6px);
  }

  .top-btn-more a:hover .top-btn-more-txt::after {
    transform: scale(1.2) rotate(-180deg);
  }

/* ===================================================================
/* Header
=====================================================================*/

  .global-header-news {
    color: var(--color-white01);
    background-color: var(--color-black01);
    font-size: clamp(13px, calc(11px + 0.15625vw), 14px);
  }

  .global-header-news-inner {
    display: grid;
    grid-template-columns: 1fr clamp(138px, calc(78px + 4.6875vw), 168px);
  }

  .global-header-news-detail a {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 20px;
    padding-left: clamp(24px, 1.875vw, 36px);
  }

  .global-header-news-list {
    padding: clamp(8px, calc(4px + 0.3125vw), 10px) 0px 8px clamp(24px, 1.875vw, 36px);
  }

  .global-header-news-list a {
    padding-right: 20px;
  }

  .global-header-inner {
    margin: 0 auto;
    padding: calc(12 * 100 / 768 * 1vw) calc(17 * 100 / 768 * 1vw);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-items: end;
  }

  .global-header-inner .logo img {
    width: calc(200 * 100 / 768 * 1vw);
  }

  .global-header-inner .logo img.logo-50th {
    width: calc(40 * 100 / 768 * 1vw);
  }

  .global-header-right {
    position: inherit;
    display: grid;
    justify-content: end;
    gap: 12px;
    height: auto;
    overflow-y: inherit;
  }

  .laptop-menu {
    padding: 0;
  }

  .laptop-menu-nav-list {
    display: flex;
    justify-content: flex-end;
    gap: 24px;
  }

  .laptop-menu-nav-list li>ul {
    gap: 13px;
  }

  .global-laptop-nav-list {
    display: flex;
    gap: calc(16 * 100 / 1280 * 1vw);
  }

  .global-laptop-nav-list li:last-child {
    padding-left: calc(16 * 100 / 1280 * 1vw);
    position: relative;
  }
  .global-laptop-nav-list li:last-child::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 16px;
    background-color: var(--color-gray02);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .global-laptop-nav-list a {
    font-size: 1.3rem;
    position: relative;
    padding-bottom: 5px;
  }

  .global-laptop-nav-list a::after {
    background-color: var(--color-black02);
    bottom: 0;
    content: '';
    display: block;
    height: 1px;
    left: 0;
    position: absolute;
    transition: all 0.5s ease;
    width: 0;
  }

  .global-laptop-nav-list a:hover,
  .global-laptop-nav-list a.current {
    opacity: 1;
  }

  .global-laptop-nav-list a:hover::after,
  .global-laptop-nav-list a.current::after {
    width: 100%;
  }

  .mobile-menu {
    display: none;
  }

/* ===================================================================
/* メインビジュアル
=====================================================================*/

  .top-mainvisual .sticky-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: url(../images/top/mv.webp);
    background-size: cover;
    background-position: center center;
  }

  .top-mainvisual .text-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: clamp(351px, calc(180.375px + 13.28125vw), 436px) 0 0 clamp(64px, 5vw, 96px);
  }

  .top-mainvisual .top-mv-image{
    display: none;
  }

  .top-mainvisual .scroll-tit {
    width: clamp(278px, 21.71875vw, 417px);
    margin-bottom: 100vh;
  }

  .top-mainvisual .scroll-text p{
    font-size: clamp(16px, calc(12px + 0.3125vw), 18px);
  }

/* ===================================================================
/* 事業領域
=====================================================================*/

  .top-business-inner {
    padding-bottom: clamp(64px, 5vw, 96px);
  }

  .top-business-list {
    grid-template-columns: repeat(2, 1fr);
    padding: clamp(48px, 3.75vw, 72px) 0 0;
    max-width: 1920px;
    margin: 0 auto;
  }

  .top-business-item a .top-business-item-img {
    overflow: hidden;
  }

  .top-business-item .top-business-item-img img {
    transition: transform 0.5s ease;
  }

  .top-business-item a:hover {
    opacity: 1;
  }

  .top-business-item a:hover .top-business-item-img img {
    transform: scale(1.1);
  }

/* ===================================================================
/* 製品情報
=====================================================================*/

  .top-category-inner{
    padding-bottom: clamp(64px, 5vw, 96px);
  }

  .top-category .tab-container{
    max-width: 1920px;
    margin: 0 auto;
  }

  .top-category-detail-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 0;
    max-width: 1920px;
    margin: 0 auto;
  }

  .top-category-detail-heading {
    font-size: clamp(18px, calc(10px + 0.625vw), 22px);
  }

  .top-category-detail-txt p {
    font-size: 1.4rem;
    padding: 0 12px;
  }

  .tab-nav {
    max-width: 492px;
    margin: 0 auto;
    padding: 8px 0 clamp(32px, calc(0px + 2.5vw), 48px);
  }

  .tab-button {
    padding: 14px 0;
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
  }

  .tab-button:hover {
    background-color: var(--color-blue01);
    color: var(--color-white01);
  }

  .tab-button.active::after {
    bottom: -8px;
    width: 12px;
    height: 9px;
  }

  .top-category-detail-list-item a .top-category-detail-img {
    overflow: hidden;
  }

  .top-category-detail-list-item a .top-category-detail-img img {
    transition: transform 0.5s ease;
  }

  .top-category-detail-list-item a:hover {
    opacity: 1;
  }

  .top-category-detail-list-item a:hover .top-category-detail-img img {
    transform: scale(1.1);
  }

  .top-category-filter-list {
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 calc(16 * 100 / 1280 * 1vw);
  }

  .top-category-filter-list li a {
    padding: calc(44 * 100 / 1280 * 1vw) 0;
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    opacity: 1;
  }

  .top-category-filter-list li a > * {
    position: relative;
    z-index: 1;
  }

  .top-category-filter-list li a::before {
    content: "";
    position: absolute;
    background: linear-gradient(90deg, #028CCC 0%, #006AB6 100%);
    transition: opacity 0.5s ease;
    opacity: 0;
    inset: 0;
    z-index: 0;
  }

  .top-category-filter-list li a h4.top-category-filter-heading {
    font-size: clamp(18px, calc(10px + 0.625vw), 22px);
    padding-right: 25px;
  }

  .top-category-filter-list li a:hover {
    color: var(--color-white01);
    opacity: 1;
  }
  .top-category-filter-list li a:hover::before { 
    opacity: 1;
  }

  .top-category-filter-list li a:hover h4.top-category-filter-heading::after {
    background: url(../images/common/ico-linkarrow_white.svg);
    background-repeat: no-repeat;
  }

  .top-btn-more.top-category-btn {
    margin: clamp(16px, calc(0px + 1.25vw), 24px) auto 0;
  }

/* ===================================================================
/* お知らせ
=====================================================================*/

  .topics-inner {
    padding: 0 clamp(64px, 5vw, 96px);
    max-width: 1728px;
    margin: 0 auto;
  }

  .top-news-media-list {
    padding-left: clamp(171px, calc(41px + 10.15625vw), 236px);
  }

  .top-topics-item a {
    padding: clamp(24px, 1.875vw, 36px) 0;
  }

  .top-news-media-item:first-child a {
    padding-top: 0;
  }

  .top-topics-item a:hover .top-news-media-item-title p,
  .top-topics-item a:hover .top-news-media-detail {
    padding-left: 24px;
    padding-right: 24px;
  }

  .top-topics-detail {
    gap: 12px;
    transition: padding 0.5s ease;
  }

  .top-news-date {
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
  }

  .top-topics-category {
    padding: 0 8px;
    font-size: clamp(13px, calc(11px + 0.15625vw), 14px);
  }

  .top-topics-item-title p {
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
    padding-top: 8px;
    transition: padding 0.5s ease;
  }

  .top-news-media,
  .top-column {
    padding-bottom: clamp(32px, calc(0px + 2.5vw), 48px);
  }

  .top-news-media h2.top-section-title,
  .top-column h2.top-section-title {
    padding-bottom: 0;
  }

  .top-topics-list {
    margin-bottom: clamp(16px, calc(0px + 1.25vw), 24px);
  }

/* ===================================================================
/* コラム
=====================================================================*/

  .top-column-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 1.875vw, 36px);
    padding-left: clamp(152px, calc(32px + 9.375vw), 212px);
    margin-bottom: clamp(16px, calc(-32px + 3.75vw), 40px);
  }

  .top-column-item a {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(12 * 100 / 1280 * 1vw);
    padding: 0;
  }

  .top-column-item a .top-column-img {
    overflow: hidden;
  }

  .top-column-item .top-column-img img {
    transition: transform 0.5s ease;
  }

  .top-column-item a:hover {
    opacity: 1;
  }

  .top-column-item a:hover .top-column-img img {
    transform: scale(1.1);
  }

/* ===================================================================
/* バナー
=====================================================================*/

  .top-bnr-inner {
    padding: clamp(48px, calc(0px + 3.75vw), 72px) 0 clamp(68px, calc(36px + 2.5vw), 84px);
  }

  .top-bnr-wrap {
    position: relative;
  }

  .slider-bnr .slick-slide {
    margin: 0 clamp(10px, calc(0px + 0.78125vw), 15px);
  }

  .slider-bnr li a p {
    font-size: clamp(13px, calc(11px + 0.15625vw), 14px);
    padding-top: 8px;
  }

  .slider-arrows {
    position: absolute;
    right: clamp(24px, calc(0px + 1.875vw), 36px);
    bottom: -12px;
    display: flex;
    gap: 20px;
  }

  .slider-arrows .slick-prev,
  .slider-arrows .slick-next {
    width: 11px;
    height: 11px;
    cursor: pointer;
  }

  .slider-arrows .slick-next {
    right: 0;
    background-image: url(../images/common/ico-arrow.svg);
    background-size: contain;
    transform: rotate(0);
  }

  .slider-arrows .slick-prev {
    background-image: url(../images/common/ico-arrow.svg);
    background-size: contain;
    transform: scaleX(-1);
  }

  .parallax-img {
    background-image: url(../images/top/img-photo01.webp);
  }

  .parallax-img.img-2 {
    background-image: url(../images/top/img-photo02.webp);
  }

/* ===================================================================
/* Footer
=====================================================================*/

  .global-footer {
    background-image: url(../images/common/bg_footer.webp);
  }

  p.global-footer-read {
    font-size: clamp(16px, calc(12px + 0.3125vw), 18px);
    text-align: center;
  }

  .global-footer .global-footer-inner {
    padding-bottom: clamp(64px, 5vw, 96px);
  }

  .global-footer-ctaarea {
    grid-template-columns: 50% 1fr;
    gap: clamp(64px, 5vw, 96px);
    width: 100%;
    margin: clamp(64px, calc(0px + 5vw), 96px) auto 0;
  }

  .global-footer-cta-other {
    grid-column: 1 / -1;
  }

  .global-footer-cta-other-inner {
    display: grid;
    grid-template-columns: 50% auto;
    gap: clamp(32px, calc(0px + 2.5vw), 48px);
    align-items: start;
  }  

  .global-footer-cta-heading {
    font-size: clamp(18px, calc(10px + 0.625vw), 22px);
    padding-bottom: clamp(24px, calc(0px + 1.875vw), 36px);
  }

  .global-footer-cta-list{
    display: grid;
    gap: 36px;
  }

  .global-footer-cta-list-item a {
    color: var(--color-white01);
    padding: clamp(23px, calc(23px + 0.9375vw), 29px) 15px clamp(23px, calc(23px + 0.9375vw), 29px) 0;
    border-bottom: 1px solid var(--color-gray02);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease;
  }

  .global-footer-cta-list-item:first-child a {
    padding: clamp(29px, calc(23px + 0.9375vw), 35px) 15px clamp(23px, calc(23px + 0.9375vw), 29px) 0;
  }

  .global-footer-cta-list-item a::after {
    content: "";
    width: 7px;
    height: 7px;
    border: 0;
    transform: inherit;
    background: url(../images/common/ico-linkarrow_white.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .global-footer-cta-list-item a:hover {
    background-color: var(--color-white01);
    color: var(--color-black01);
    padding-left: 15px;
    opacity: 1;
  }

  .global-footer-cta-list-item a:hover::after {
     width: 7px;
    height: 7px;
    background: url(../images/common/ico-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
  }

  .cta-text {
    gap: 4px;
  }

  .global-footer-cta-list-heading {
    font-size: clamp(25px, calc(11px + 1.09375vw), 32px);
    line-height: 1.3;
  }

  .global-footer-cta-list-txt {
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
  }

  .global-footer-cta-other {
    padding: clamp(25.6px, calc(12.8px + 1vw), 32px);
  }

  .global-footer-cta-other p {
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
  }

  .global-footer-cta-other p.notice {
    font-size: clamp(16px, calc(12px + 0.3125vw), 18px);
  }

  .global-footer-cta-tel {
    padding-top: 0;
    gap: clamp(24px, calc(0px + 1.875vw), 36px);
  }

  .global-footer-cta-tel .tel-num {
    font-size: clamp(32px, calc(20.72px + 1.47vw), 48px);
  }

  .tel-num-heading {
    font-size: clamp(16px, calc(12px + 0.3125vw), 18px);
  }

  .global-footer-bottomarea {
    background: linear-gradient(91.16deg, #0073B5 0%, #005EB0 50.63%, #30519C 101.26%);
    padding: clamp(16px, calc(0px + 1.25vw), 24px) 0;
  }

  .global-footer-bottomarea-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }

  .global-footer-bottomarea-list {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 16px;
  }

  .global-footer-bottomarea-sns-list {
    padding: 12px 0 20px;
    position: relative;
  }

  .global-footer-bottomarea-menu-list {
    order: 2;
    margin-left: auto;
  }

  .global-footer-bottomarea-sns-list {
    order: 3;
    padding: 0;
    margin-left: clamp(16px, calc(0px + 1.25vw), 24px);
    padding-left: clamp(16px, calc(0px + 1.25vw), 24px);
  }

  .global-footer-bottomarea-sns-list::before {
    position: absolute;
    content: "";
    width: 1px;
    height: clamp(17px, calc(13px + 0.3125vw), 19px);
    background-color: rgba(250, 250, 250, 0.2);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .global-footer-bottomarea-list li a {
    font-size: clamp(14px, calc(10px + 0.3125vw), 16px);
  }

  .global-footer-bottomarea .copyright {
    order: 1;
    font-size: clamp(13px, calc(11px + 0.15625vw), 14px);
    text-align: left;
  }

}

@media (max-width: 768px) {
  .global-header-news .global-header-news-detail {
    display: flex;
    overflow: hidden;
    width: 100%;
    white-space: nowrap;
  }

  .global-header-news .global-header-news-detail a {
    animation: scroll-left 20s linear infinite;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 50px;
  }

  @keyframes scroll-left {
    0% {
      transform: translateX(0);
      /* 初めは右側に配置 */
    }

    100% {
      transform: translateX(-100%);
      /* 最後は左側に配置 */
    }
  }

  .top-mainvisual {
    position: relative !important;
    width: 100%;
    height: auto !important; /* JSの計算値をCSSで強制上書き */
    background: none !important; /* ここで背景を指定しない */
  }
  .top-mainvisual::before {
    content: "";
    position: fixed; /* 画面に固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 常に画面いっぱいに広げる */
    background: url(../images/top/mv_sp.webp) center center / cover no-repeat;
    z-index: -1; /* コンテンツの裏側に回す */
    display: block;
  }

  .top-mainvisual .sticky-wrapper,
  .top-mainvisual .text-container {
    position: relative !important;
    height: auto !important;
    overflow: visible !important; 
    padding: 0 !important;
    transform: none !important;
    background: none !important;
  }

  .top-mainvisual .scroll-content {
    display: block;
    width: 100%;
  }

  .top-mainvisual .top-mv-image{
    width: 100%;
    margin: 0 0 0 auto;
  }

  .top-mainvisual .top-mv-tit-area {
    position: relative;
    width: 100%;
    height: 80vh; /* ★重要：150vhにすることでテキストを画面外（1.5画面分下）へ押し出す */
    padding-top: 10vh; /* 最初は画面下に表示 */
    padding-left: calc(20 * 100 / 375 * 1vw);
  }

  .top-mainvisual .scroll-tit {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--header-h) ;/* ★ここでヘッダー下に止まる */
    padding-top: calc(15 * 100 / 375 * 1vw);
  }
  
  .top-mainvisual .scroll-text {
    padding-left: calc(20 * 100 / 375 * 1vw);
    padding-bottom: 10vh;
    position: relative;
  }
}



@media (min-width: 1024px) {
  .global-header-inner {
    padding: clamp(15px, 1.40625vw + 15px, 24px) clamp(23px, 2.03125vw + 23px, 36px);
  }

  .global-header-inner .logo img {
    width: 281px;
  }

  .global-header-inner .logo img.logo-50th {
    width: 80px;
  }

  .global-laptop-nav-list a {
    font-size: clamp(14px, 11.714px + 0.223vw, 16px);
  }

  .global-footer-ctaarea {
    grid-template-columns: 640px 1fr;
    gap: clamp(64px, 5vw, 96px);
    max-width: clamp(1152px, calc(736px + 32.5vw), 1360px);
  }

  .global-footer-cta-other {
    grid-template-columns: clamp(528px, calc(368px + 12.5vw), 608px) auto;
  }
  .global-footer-cta-other-inner {
    gap: clamp(32px, calc(0px + 2.5vw), 48px);
  }  
}