:root {
 --main-blue: #0070b8;
 --light-blue: #00C8C8;
 --white: #ffffff;
 --black: #000000;
 --gray: #666666;
 --palegray: #EBEFF1;
 --font-main: "Noto Sans JP", "Helvetica Neue", sans-serif;
 --background: #ffffff;
 --foreground: #4b5563;
 --primary: #0891b2;
 --primary-foreground: #ffffff;
 --secondary: #0ea5e9;
 --secondary-foreground: #ffffff;
 --muted: #f9fafb;
 --muted-foreground: #374151;
 --accent: #0ea5e9;
 --accent-foreground: #ffffff;
 --border: #e5e7eb;
 --radius: 0.5rem;
}
/* Base Styles */
header, main {
 margin: 0;
 font-family: "Noto Sans JP", sans-serif;
 font-optical-sizing: auto;
}
/* Common Utility Classes */
.img-responsive {
 width: 100%;
 height: auto;
 display: block;
}
.img-hover-scale {
 transition: transform 0.3s ease;
}
.img-hover-scale:hover {
 transform: scale(1.03);
}
.card-hover {
 transition: transform 0.3s ease;
}
.card-hover:hover {
 transform: scale(1.03);
}
/* sus-container Class */
.sus-container {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}
/* Arrow Button Base Class */
.arrow-btn {
 background-repeat: no-repeat;
 background-size: 24px 24px;
 background-position: calc(100% - 12px) center;
 padding: 12px 50px 12px 20px;
 transition: all 0.3s ease;
 display: inline-block;
 text-decoration: none;
 font-weight: bold;
 border-radius: 4px;
 font-size: 1em;
 line-height: 1.4;
}
.arrow-btn:hover {
 background-position: calc(100% - 8px) center;
 transform: translateY(-1px);
}
.arrow-white {
 background-image: url("../images/index/i_white_arrow.svg");
 background-color: #0070b8;
 color: #fff;
}
.arrow-white:hover {
 background-color: #005a94;
}
.arrow-white-transparent {
 background-image: url("../images/index/i_white_arrow.svg");
 color: #fff;
}
.arrow-blue {
 background-image: url("../images/index/i_blue_arrow.svg");
 background-color: #fff;
 color: #0070b8;
 border: 2px solid #0070b8;
}
.arrow-blue:hover {
 background-color: #f0f8ff;
}
/* Icon Base Class */
.icon-style {
 display: inline-block;
 width: 32px;
 height: 32px;
 background-repeat: no-repeat;
 background-size: contain;
 margin: 0 6px;
}
.icon-pause {
 background-image: url("../images/index/i_pause.svg");
}
.icon-play {
 background-image: url("../images/index/i_play.svg");
}
.icon-next {
 background-image: url("../images/index/i_next.svg");
}
.icon-prev {
 background-image: url("../images/index/i_prev.svg");
}
/* Header Styles */
.sus-header {
 border-bottom: 2px solid var(--primary);
 position: relative;
 width: 100%;
 transition: all 0.3s ease;
 background-color: var(--background);
}
.sus-header.sticky {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sus-header-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 10px 20px;
 background-color: var(--background);
}
.sus-logo {
 display: flex;
 align-items: center;
 gap: 10px;
}
.sus-logo img {
 height: 24px;
}
.sus-lang-links {
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 14px;
 color: var(--primary);
}
.sus-lang-links span {
 color: var(--foreground);
}
.sus-lang-links a {
 margin-left: 5px;
 color: var(--primary);
 text-decoration: underline;
}
.sus-company-link img {
 height: 15px;
 margin-bottom: 5px;
 display: inline-block;
}
.sus-global-nav {
 background: var(--background);
 border-top: 1px solid var(--border);
}
.sus-nav-list {
 display: flex;
 justify-content: flex-start;
 flex-wrap: wrap;
 margin: 0;
 padding: 0;
 list-style: none;
}
.sus-nav-list li {
 margin: 0 10px;
 position: relative;
 padding-right: 10px;
}
.sus-nav-list a {
 display: block;
 padding: 12px 0;
 color: var(--foreground);
 text-decoration: none;
 font-weight: 500;
 transition: color 0.2s ease;
}
.sus-nav-list a img {
 display: block;
 width: 260px;
 padding: 9px 0;
}
.sus-nav-list a:hover {
 color: var(--primary);
}
.sus-nav-list li:not(:first-child)::before {
 content: "";
 display: block;
 width: 5px;
 height: 9px;
 background-image: url("../images/arrow_blue.svg");
 background-size: cover;
 position: absolute;
 top: 50%;
 right: 0px;
 margin-top: -3px;
}
/* モダンなハンバーガーメニューのスタイル */
.sus-hamburger {
 display: none;
 width: 44px;
 height: 44px;
 justify-content: center;
 align-items: center;
 border-radius: var(--radius);
 transition: all 0.3s ease;
 position: relative;
}
.sus-hamburger:hover {
 background-color: var(--muted);
}
.hamburger-lines {
 width: 24px;
 height: 18px;
 position: relative;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}
.line {
 display: block;
 width: 100%;
 height: 2px;
 background-color: var(--foreground);
 border-radius: 2px;
 transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 transform-origin: center;
}
.sus-hamburger.active .line1 {
 transform: translateY(8px) rotate(45deg);
 background-color: var(--primary);
}
.sus-hamburger.active .line2 {
 opacity: 0;
 transform: scaleX(0);
}
.sus-hamburger.active .line3 {
 transform: translateY(-8px) rotate(-45deg);
 background-color: var(--primary);
}
/* モバイルオーバーレイメニューのスタイル */
.sus-mobile-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 9999;
 opacity: 0;
 visibility: hidden;
 transition: all 0.3s ease;
 backdrop-filter: blur(4px);
}
.sus-mobile-overlay.active {
 opacity: 1;
 visibility: visible;
}
.sus-mobile-menu {
 position: absolute;
 top: 0;
 right: 0;
 width: 320px;
 max-width: 85vw;
 height: 100vh;
 background-color: var(--background);
 box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
 transform: translateX(100%);
 transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 overflow-y: auto;
}
.sus-mobile-overlay.active .sus-mobile-menu {
 transform: translateX(0);
}
.sus-mobile-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 16px 20px;
 border-bottom: 1px solid var(--border);
 background-color: var(--card);
}
.sus-mobile-logo img {
 height: 20px;
}
.sus-close-btn {
 width: 40px;
 height: 40px;
 display: flex;
 justify-content: center;
 align-items: center;
 border-radius: var(--radius);
 transition: all 0.2s ease;
 position: relative;
}
.sus-close-btn:hover {
 background-color: var(--muted);
}
.close-line {
 position: absolute;
 width: 20px;
 height: 2px;
 background-color: var(--foreground);
 border-radius: 2px;
 transition: all 0.2s ease;
}
.close-line1 {
 transform: rotate(45deg);
}
.close-line2 {
 transform: rotate(-45deg);
}
.sus-close-btn:hover .close-line {
 background-color: var(--primary);
}
.sus-mobile-nav {
 padding: 24px 0;
}
.sus-mobile-nav-list {
 list-style: none;
 margin: 0;
 padding: 0;
}
.sus-mobile-nav-list li {
 margin: 0;
}
.sus-mobile-nav-list a {
 display: block;
 padding: 16px 20px;
 color: var(--foreground);
 text-decoration: none;
 font-weight: 500;
 font-size: 16px;
 transition: all 0.2s ease;
 border-left: 3px solid transparent;
}
.sus-mobile-nav-list a:hover {
 background-color: var(--muted);
 color: var(--primary);
 border-left-color: var(--primary);
}
.sus-mobile-nav-list a img {
 width: 200px;
 margin: 8px 0;
}
.sus-mobile-lang {
 margin-top: 32px;
 padding: 20px;
 border-top: 1px solid var(--border);
 display: flex;
 align-items: center;
 gap: 12px;
 font-size: 14px;
}
.current-lang {
 color: var(--primary);
 font-weight: 600;
}
.lang-switch {
 color: var(--muted-foreground);
 text-decoration: underline;
 transition: color 0.2s ease;
}
.lang-switch:hover {
 color: var(--primary);
}
/* Hero Section */
.sus-hero-banner {
 background: #036ed0;
 padding: 20px 0;
 color: #fff;
}
.sus-hero-banner .sus-container {
 display: flex;
 align-items: flex-end;
 justify-content: space-between;
 flex-wrap: wrap;
}
.sus-hero-text {
 flex: 0 0 50%;
 font-size: 2.5em;
 line-height: 1.2;
 transform: scaleX(0.9);
}
.sus-hero-text h1{
 font-size: 1em;
}
.sus-hero-indent {
 display: block;
 text-indent: -0.5em;
}
.sus-hero-text strong {
 font-weight: 600;
}
.sus-hero-link-wrapper {
 flex: 0 0 30%;
 text-align: center;
}
.sus-hero-link {
 display: inline-block;
 font-size: 1.2em;
 font-weight: bold;
 color: #fff;
 text-decoration: none;
}
.sus-hero-link span {
 font-size: 1.3em;
}
.sus-hero-image {
 flex: 0 0 20%;
 text-align: right;
}
.sus-hero-image img {
 width: 100%;
 max-width: 260px;
 height: auto;
 border-radius: 4px;
}
/* Carousel Section */
/*カルーセル*/
.sus-carousel {
 width: 100%;
 padding: 40px 0;
 background: #fff;
 position: relative;
 text-align: center;
 overflow: hidden;
}
.sus-swiper {
 width: 1200px;
 margin: 0 auto;
 padding-bottom: 40px;
 overflow: visible !important;
}
.sus-swiper .swiper-wrapper {
 width: 100%;
}
.sus-swiper .swiper-wrapper .swiper-slide {
 position: relative;
 transform: scale(.8); /* 左右のスライドを小さくする */
 width: 60%;
}
.sus-swiper .swiper-wrapper .swiper-slide img {
 width: 100%;
 height: auto;
 display: block;
}
.sus-swiper .swiper-wrapper .swiper-slide-active {
 opacity: 1; /* 中央のスライドは薄くしない */
 transform: scale(1); /* 中央のスライドは小さくしない */
 transition: .6s; /* ゆっくり小さくさせる */
 z-index: 1; /* 中央のスライドを一番上にする */
}
.sus-swiper .swiper-wrapper .sus-swiper-text {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 100%;
 font-size: 1.7em;
 line-height: 1.5;
 font-weight: 400;
 padding: 20px 0;
 text-align: center;
 background-color: rgba(255, 255, 255, 0.75);
}
.sus-carousel-controls {
 display: flex;
 justify-content: center;
 gap: 0;
 margin-top: 20px;
}
.sus-carousel-controls button {
 background: none;
 border: none;
 font-size: 1.5em;
 cursor: pointer;
 color: #333;
 transition: transform 0.2s ease;
}
.sus-carousel-controls button:hover {
 transform: scale(1.1);
}
.sus-btn-prev, .sus-btn-next, .sus-btn-pause {
 background: none;
 border: none;
 cursor: pointer;
}
/* ===== Swiper loading (HTML改修なし) ===== */
.sus-carousel.is-loading .sus-swiper { opacity: 0; pointer-events: none; }
.sus-carousel.is-ready  .sus-swiper { opacity: 1; transition: opacity .15s ease; }

/* ローディングオーバーレイ（疑似要素） */
.sus-carousel.is-loading::before{
  content:"";
  position:absolute; inset:0;
  display:block;
  background: rgba(255,255,255,.85);
  z-index: 2;
}
.sus-carousel.is-loading::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.65);
  animation: susSpin .8s linear infinite;
  z-index: 3;
}
@keyframes susSpin { to { transform: rotate(360deg); } }

/* レイアウトジャンプ抑制（高さ確保：必要に応じて調整） */
.sus-carousel { min-height: 240px; }
@media (min-width: 768px){ .sus-carousel { min-height: 320px; } }

/* Webinar Section */
.sus-webinar-archive {
 background: #ebeff1;
 padding: 0 60px 60px;
}
.sus-webinar-label {
 font-size: 0.8em;
 font-weight: bold;
 color: #fff;
 background: #0070b8;
 display: inline-block;
 padding: 4px 10px;
 margin-bottom: 8px;
}
.sus-webinar-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
 position: relative;
}
.sus-webinar-header {
 text-align: center;
 margin-bottom: 40px;
}
.sus-webinar-header h2 > a{
 font-size: 1.35em;
 color: #0070b8;
 margin-bottom: 10px;
}
.sus-title-header {
 font-size: 2em;
 color: #0070b8;
}
.sus-webinar-header p {
 font-size: 0.95em;
 color: #333;
}
.sus-webinar-cards {
 display: flex;
 justify-content: space-between;
 gap: 30px;
 flex-wrap: wrap;
}
.sus-webinar-card {
 display: block;
 width: calc(48% - 12px);
 overflow: hidden;
 text-decoration: none;
 color: #000;
 transition: transform 0.3s ease;
 text-align: left;
}
.sus-webinar-card:hover .sus-webinar-thumb img {
 transform: scale(1.03);
}
.sus-webinar-card2 {
 display: block;
 width: calc(45% - 12px);
 overflow: hidden;
 text-decoration: none;
 color: #000;
 transition: transform 0.3s ease;
 text-align: left;
}
.sus-webinar-card2:hover .sus-webinar-thumb img {
 transform: scale(1.03);
}
.sus-webinar-thumb {
 position: relative;
 overflow: hidden;
}
.sus-webinar-thumb img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}
.sus-webinar-tab{
    display: flex;
    align-content: flex-start;
    align-items: flex-start;
    height: auto;
    gap: 0 10px;
    margin:10px 0;
    padding: 0;
}
.sus-tip-black{
    background: #fff;
    border:solid 1px #222;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px 5px 10px;
    margin: 0;
    max-width: 100%;
}
.sus-tip-blue{
    background: #0070b8;
    border:solid 1px #0070b8;
    color:#fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px 5px 10px;
    margin: 0;
    max-width: 100%;
}
.sus-tip-green{
    background: #00801A;
    border:solid 1px #00801A;
    color:#fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px 5px 10px;
    margin: 0;
    max-width: 100%;
}
.sus-tip-purple{
    background: #7D00D1;
    border:solid 1px #7D00D1;
    color:#fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px 5px 10px;
    margin: 0;
    max-width: 100%;
}
.sus-webinar-caption {
 padding:5px 12px;
    font-weight: 500;
 font-size: 0.9em;
 line-height: 1.5;
 background:#fff;
 min-height: 100%;
}
.sus-webinar-caption strong {
 display: block;
 font-size: 1em;
 color: #0070b8;
 margin-top: 4px;
}
.sus-webinar-button-wrapper {
 margin-top: 20px;
 text-align: right;
}
/* Problem Section */
.sus-fiver-heading {
 font-size: 2.6em;
 color: #000;
 font-weight: bold;
 margin: 0;
 line-height: 1.6;
}
.sus-problem-heading-area {
 background-color: #fff;
 padding: 0 0 40px;
 text-align: center;
}
.sus-problem-heading {
 font-size: 2.4em;
 color: #000;
 font-weight: normal;
 margin: 0;
}
.sus-problem-area {
 background: linear-gradient(to right, #21d1c6, #036fd1);
 padding: 0;
 text-align: center;
}
.sus-line::after {
 content: "";
 display: block;
 width: 210px;
 height: 4px;
 background-image: url("../images/sus_line.png");
 margin: 15px auto 30px;
}
.sus-problem-list {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 20px;
 padding: 40px 0;
}
.sus-problem-item {
 width: calc(20% - 16px);
 display: flex;
 justify-content: center;
}
.sus-icon-circle {
 width: 220px;
 height: 220px;
 background: #fff;
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 16px;
 box-sizing: border-box;
 text-align: center;
}
.sus-icon-circle p {
 font-size: 0.85em;
 color: #000;
 margin: 0 0 10px 0;
 line-height: 1.5;
}
.sus-icon-circle img {
 width: 60px;
 height: auto;
}
.sus-problem-arrow {
 background: #fff;
 text-align: center;
 padding: 30px 0;
 width: 100%;
}
.sus-problem-arrow img {
 width: 64px;
 height: auto;
}
/* Related Sites Section */
.sus-related-sites {
 background: #fff;
 padding: 60px 0;
 text-align: center;
}
.sus-related-inner {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}
.sus-related-title {
 font-size: 2em;
 color: #0070b8;
 margin-bottom: 40px;
}
.sus-related-cards {
 display: flex;
 gap: 40px;
 justify-content: space-between;
 flex-wrap: wrap;
}
.sus-related-card {
 width: 100%;
 max-width: calc((100% - 80px) / 3); /* 3カラム時の計算式 */
 text-decoration: none;
 color: #000;
 box-sizing: border-box;
}
.sus-card-image {
 overflow: hidden;
}
.sus-card-image img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}
.sus-related-card:hover .sus-card-image img {
 transform: scale(1.03);
}
.sus-card-caption {
 font-size: 0.95em;
 margin-top: 12px;
}
/* Recycle Section */
.sus-recycle-section {
 background: linear-gradient(to right, #21d1c6, #036fd1);
 padding: 0 0 60px;
 color: #fff;
 text-align: center;
}
.sus-recycle-inner {
 max-width: 1100px;
 margin: 0 auto;
 padding: 0 10px;
}
.sus-recycle-title {
 font-size: 2em;
 margin-bottom: 10px;
}
.sus-recycle-subtitle {
 font-size: 0.95em;
 line-height: 1.6;
 margin-bottom: 20px;
}
.sus-recycle-cards {
 display: flex;
 flex-direction: row;
 gap: 30px;
 justify-content: space-around;
 flex-wrap: wrap;
}
.sus-recycle-card {
 max-width: 46%;
 text-decoration: none;
}
.sus-recycle-image {
 overflow: hidden;
 position: relative;
}
.sus-recycle-image img {
 width: 100%;
 height: auto;
 display: block;
 transition: transform 0.3s ease;
}
.sus-recycle-card:hover .sus-recycle-image img {
 transform: scale(1.03);
}
.sus-recycle-caption {
 color: #333;
 position: absolute;
 text-shadow: 1px 1px 2px #fff;
 bottom: 5%;
 width: 95%;
 font-size: 1.3em;
 font-weight: 700;
 right: 2%;
 text-align: right;
}
.sus-recycle-button-wrapper {
 margin-top: 40px;
 text-align: right;
}
.sus_num_blue {
 color: #10a4c6;
 font-size: 5em;
 line-height: 1.2;
 text-align: center;
 font-family: "Arial", Gadget, "sans-serif";
 margin-bottom: 30px;
}
.sus_num_blue::after {
 content: '';
 display: block;
 width: 250px;
 height: 1px;
 margin: 0 auto;
 background: #000;
}
/*deresus*/
.sus-sp-header {
 background-color: var(--white);
 display: flex;
 flex-direction: column;
}
.sus-sp-pagelink {
 display: flex;
 justify-content: flex-end;
 margin: 10px 70px;
}
.sus-sp-title-area {
 padding: 2em 1em 0;
 margin: -15px 0;
}
.sus-sp-title-area h1 {
 font-size: 1.8em;
}
.sus-sp-title-area h1 span {
 font-size: 0.8em;
}
.blue_shikaku {
 font-weight: normal;
 position: relative;
 padding-left: 30px;
 text-align: left;
}
.blue_shikaku::before {
 background: #004ea2;
 content: "";
 height: 12px;
 width: 12px;
 left: 15px;
 position: absolute;
 top: 10px;
}
.sus-sp-banner {
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 color: var(--white);
 display: inline-block;
 padding: 0 0.8em 0.2em;
 font-weight: bold;
 margin-top: 0.5em;
 margin-bottom: -30px;
 z-index: 10;
 position: relative;
 font-size: 1.8em;
}
.sus-sp-banner-md {
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 color: var(--white);
 display: inline-block;
 padding: 0.2em 0.8em;
 font-weight: bold;
 margin: auto 0 -30px;
 z-index: 10;
 position: relative;
 font-size: 1.4em;
 text-align: center;
}
.sus-sp-banner-md-center {
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 color: var(--white);
 display: inline-block;
 padding: 0 0 0.1em 0.4em;
 font-weight: bold;
 margin: auto 0;
 z-index: 10;
 position: relative;
 font-size: 1.4em;
 text-align: center;
 width: 100%;
}
.deresus-hero-image {
 background-image: url("../images/special/deresus_hero.webp");
 background-size: cover;
 background-position: center;
 height: 450px;
 display: flex;
 position: relative;
 flex-direction: column;
 margin-top: -10px;
 justify-content: flex-end;
}
.repos-hero-image {
 background-image: url("../images/special/repos_hero.webp");
 background-size: cover;
 background-position: center;
 height: 450px;
 display: flex;
 position: relative;
 flex-direction: column;
 margin-top: -10px;
 justify-content: flex-end;
}
.monomate-hero-image {
 background-image: url("../images/special/monomate_hero.webp");
 background-size: cover;
 background-position: center;
 height: 450px;
 display: flex;
 position: relative;
 flex-direction: column;
 margin-top: -10px;
 justify-content: flex-end;
}
.cpp-hero-image {
 background-image: url("../images/special/cpp_hero.webp");
 background-size: cover;
 background-position: center;
 height: 450px;
 display: flex;
 position: relative;
 flex-direction: column;
 margin-top: -10px;
 justify-content: flex-end;
}
.sus-sp-hero-text {
 display: flex;
 width: 100%;
 justify-content: flex-end;
}
.sus-sp-hero-text p {
 color: var(--white);
 font-size: 2.4em;
 line-height: 1.8;
 font-weight: bold;
 text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
 margin: 40px 30px;
}
.sus-sp-hero-text-b {
 display: flex;
 width: 100%;
 justify-content: flex-end;
}
.sus-sp-hero-text-b p {
 color: #090909;
 font-size: 2.4em;
 line-height: 1.8;
 font-weight: bold;
 margin: 10px 55px;
 text-shadow: 0px 0px 10px rgba(255, 255, 255, 1);
}
.sus-sp-about h2 {
 font-size: 1.5em;
 margin-bottom: 1em;
}
.sus-sp-about p {
 font-size: 1.2em;
 color: var(--gray);
}
.sus-sp-problems {
 margin: 3em auto;
 max-width: 980px;
}
.sus-sp-problems_min {
 margin: 3em auto;
 max-width: 1150px;
}
.sus-sp-problems h3, .sus-sp-problems_min h3 {
 text-align: center;
 color: var(--main-blue);
 font-size: 1.2em;
 letter-spacing: .2em;
 font-weight: normal;
}
.sus-sp-problem-list {
 list-style: none;
 padding: 0;
 display: grid;
 gap: 4.5em;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 margin-top: 2em;
}
.sus-sp-problem-list_min {
 list-style: none;
 padding: 0;
 display: grid;
 gap: 2em;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 margin-top: 2em;
}
.sus-sp-problem-list li, .sus-sp-problem-list_min li {
 text-align: center;
 border: 2px dotted var(--main-blue);
 padding: 1.5em 1em;
 border-radius: 50%;
 aspect-ratio: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--gray);
 font-size: 1.1em;
 line-height: 1.5;
}
.sus-sp-bg-gray {
 background: var(--palegray);
 width: 100%;
}
.sus-sp-recycle .sus-sp-border {
 border: solid 1px #444;
 text-align: center;
}
.sus-sp-recycle .sus-sp-gradation {
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 text-align: center;
}
.sus-sp-cta a {
 border: 3px solid #23DAC9;
 text-align: center;
 display: block;
 width: 40%;
 color: #23DAC9;
 margin: 0 auto;
 padding: 15px 0;
}
.sus-sp-cta a::after {
 content: ">";
 padding-left: 5px;
}
.sus-sp-cta a:hover {
 color: #fff;
 background: #23DAC9;
}
.sus-sp-blue {
 color: var(--main-blue);
}
.sus-sp-btn {
 border: 1px solid var(--main-blue);
 border-radius: 100vh;
 padding: .8em 6em;
 margin-bottom: 10px;
 color: #fff;
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 text-align: center;
}
.sus-sp-btn:hover {
 color: var(--main-blue);
 background: #fff;
}
.sus_bg_white {
 position: relative;
}
.sus_bg_white:before {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%);
 border-top: 25px solid #fff;
 border-right: 30px solid transparent;
 border-left: 30px solid transparent;
}

/*超音波シール用CPP［ccp.html］25/12/23*/
.sus_inner {
 border: #6b9cca 2px solid;
 border-radius: 20px;
 text-align: center;
 width: 80%;
 margin: 30px auto;
}
.sus_inner>h2 {
 font-size: 6rem;
 color: #6b9cca;
}
.sus_inner .sus_lead {
 background: #6b9cca;
 color: #fff;
 padding: 14px 0;
}
.sus_lead >h3 { font-size: 3rem; font-weight: normal; line-height: 1.6;}
.sus_lead >p { font-size: 1.8rem;}
.sus_border {
 background: linear-gradient(to right, var(--light-blue), var(--main-blue));
 border-radius: 20px;
 padding: 10px;
}
.sus_radius {
 background: #fff;
 padding: 20px;
 border-radius: 20px;
 text-align: center;
 font-size: 2.4rem;
}
.sus_radius >.c_bl, .sus_future .c_bl {
 color: #004ea2;
 font-weight: bold;
}
.sus_test {
 width: 80%;
 background: #f1f4f5;
 border-radius: 20px;
 padding: 30px;
 margin: 40px auto;
 text-align: center;
}
.sus_future {
 text-align: center;
 background: #e5eff8;
}
.sus_future .sus-sp-banner-md {
 position: relative;
 top: -20px;
}
@media screen and (max-width: 768px){
 .sus_inner { width: 95%;}
 .sus_lead >h3 { font-size: 2.6rem;}
 .sus_radius { font-size: 2rem;}
 .sus_test { width: 90%;}
}
@media screen and (min-width: 769px){
 .sp_br { display: none;}

}

@media (max-width: 1320px) {
 .sus-nav-list a {
  font-size: 1.2rem;
  line-height: 3;
 }
}
@media (max-width: 1024px) {
 .sus-hamburger {
  display: flex;
 }
 .sus-global-nav {
  display: none;
 }
 .sus-lang-links {
  display: none;
 }
 .sus-header-top {
  padding: 12px 16px;
 }
 .sus-webinar-cards {
  flex-direction: column;
  align-items: center;
  padding-bottom: 30px;
 }
 .sus-webinar-card, .sus-webinar-card2 {
  width: 90%;
 }
 .sus-webinar-button-wrapper, .sus-recycle-button-wrapper {
  text-align: center;
 }
 .sus-problem-item {
  width: calc(30% - 10px);
  margin-bottom: 20px;
 }
 .sus-recycle-card, .sus-related-card {
  max-width: calc(48% - 10px);
 }
 .sus-sp-banner {
  font-size: 1em;
 }
 .sus-sp-banner-md {
  font-size: 1em;
 }
 .sus-sp-banner-md-center {
  font-size: 1em;
 }
 .sus-sp-hero-text p {
  font-size: 1.4em;
  margin: 30px;
 }
 .deresus-hero-image {
  background-position: left;
 }
 .sus-webinar-archive {
  padding: 0;
 }
}
/* 縦の中央 */
.di_flex {
 display: flex
}
.ai_center {
 align-items: center;
 display: flex;
 height: 100%;
}
@media (min-width: 1025px) {
 .sus-mobile-overlay {
  display: none !important;
 }
}
@media (max-width: 768px) {
 .sus-hero-banner .sus-container {
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
 }
 .sus-hero-text, .i, .sus-hero-image {
  flex: 1 1 100%;
  max-width: 100%;
  font-size: 2em;
 }
 .sus-lang-links {
  gap: 4px;
 }
 .sus-company-link img {
  height: 10px;
 }
 .sus-hero-image {
  margin-top: 20px;
  text-align: center;
 }
 .sus-hero-image img {
  max-width: 80%;
  margin: 0 auto;
 }
 .sus-swiper {
  width: 100%;
 }
 .swiper-slide {
  opacity: 0.3;
  transform: scale(0.8);
 }
 .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
 }
 .sus-swiper .swiper-wrapper .sus-swiper-text {
  font-size: 0.8em;
 }
 .sus-related-card {
  max-width: 100%;
 }
 .sus-container {
  padding: 0 15px;
 }
 .sus-sp-hero-text {
  justify-content: center;
  background: rgba(0, 0, 0, 0.5)
 }
 .sus-sp-hero-text p {
  font-size: 1.5em;
  margin: 0;
 }
 .sus-sp-hero-text-b {
  justify-content: center;
  background: rgba(255, 255, 255, 0.50)
 }
 .sus-sp-hero-text-b p {
  font-size: 1.5em;
  margin: 0;
 }
 .sus-sp-cta a {
  width: 80%;
 }
 .sus-sp-title-area {
  margin: 0;
 }
 .sus-problem-heading, .sus-fiver-heading {
  font-size: 1.5em;
 }
}
@media (max-width: 600px) {
 .sus-problem-item {
  width: calc(50% - 10px);
  margin-bottom: 20px;
 }
 .sus-icon-circle {
  border-radius: 5%;
 }
 .sus-recycle-card {
  max-width: 100%;
 }
}
@media (max-width: 480px) {
 .sus-container {
  padding: 0 10px;
 }
 .arrow-btn {
  padding: 10px 40px 10px 15px;
  font-size: 1.2em;
 }
 .sus-sp-problem-list {
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 1rem;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
 }
 .sus-sp-problem-list li {
  padding: 1.25rem 0.75rem;
  font-size: 1.2em;
  line-height: 1.3;
  min-height: 200px;
  border-width: 1.5px;
 }
}
@media (prefers-reduced-motion: reduce) {
 .sus-hamburger, .line, .sus-mobile-overlay, .sus-mobile-menu, .sus-mobile-nav-list a {
  transition: none;
 }
}