/* ========== トップページ ========== */
.section-services ul li {
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: var(--radius);
  box-shadow: var(--b_shadow);
}
.section-portfolio .grid-center {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.section-contact a {
  background: var(--color01);
  color: var(--txt_white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-shadow: var(--t_shadow);
}
/* topslide */
*, *::after, *::before {
box-sizing: border-box;
}
.top {
  margin-top: -1px;
}
.top .hide {
  display: none;
}
@media (min-width: 1200px) {
  .top {
  }
}
.ui-wrapper {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.ui-wrapper .mask {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
z-index: 5;
}
.ui-wrapper .header-wrapper {
position: absolute;
width: 100%;
height: 12rem;
padding: 4rem;
opacity: 0;
z-index: 10;
}
.ui-wrapper .header-wrapper:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .header-wrapper .logo-wrapper {
position: relative;
float: left;
}
.ui-wrapper .header-wrapper .logo-wrapper .logo {
color: white;
text-transform: uppercase;
font-size: 1.6rem;
font-weight: 800;
}
.ui-wrapper .header-wrapper .logo-wrapper .logo span {
display: block;
}
.ui-wrapper .header-wrapper .menu-wrapper {
position: relative;
float: right;
}
.ui-wrapper .header-wrapper .menu-wrapper ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
.ui-wrapper .header-wrapper .menu-wrapper ul:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .header-wrapper .menu-wrapper li {
position: relative;
float: left;
}
.ui-wrapper .header-wrapper .menu-wrapper li:last-child a {
padding-right: 0;
}
.ui-wrapper .header-wrapper .menu-wrapper li:last-child a::after {
width: 0;
height: 0;
}
.ui-wrapper .header-wrapper .menu-wrapper a {
position: relative;
display: block;
color: white;
text-decoration: none;
font-size: 1.8rem;
padding: 0 2rem;
line-height: 1;
font-weight: 800;
}
.ui-wrapper .header-wrapper .menu-wrapper a::after {
content: "";
display: block;
position: absolute;
width: 0.1rem;
background: rgba(255, 255, 255, 0.5);
height: 1rem;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
.ui-wrapper .loading-wrapper {
position: absolute;
display: block;
width: 100%;
top: 50%;
z-index: 9;
}
.ui-wrapper .loading-wrapper:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .loading-wrapper .loading-screen {
position: absolute;
display: block;
width: 100%;
height: 0.1rem;
background: var(--sub_bg02);
z-index: 1;
}
.ui-wrapper .loading-wrapper .loading-line {
position: relative;
display: block;
width: 100%;
height: 0.1rem;
background: var(--color01);
z-index: 2;
}
.ui-wrapper .loading-wrapper .loading-line .line {
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 0.1rem;
background: white;
}
.ui-wrapper .slider-wrapper {
  position: relative;
  height: 90vh;
  overflow: hidden;
}
.ui-wrapper .slider-wrapper:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .slider-wrapper .slider-container, .ui-wrapper .slider-wrapper .slide {
width: 100%;
height: 100%;
}
.ui-wrapper .slider-wrapper .slide {
position: absolute;
display: block;
}
.ui-wrapper .slider-wrapper .slide:first-child .slide-image {
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide .ttl {
position: absolute;
color: white;
display: inline-block;
line-height: 1;
margin: 0;
transform: translateY(50%);
white-space: nowrap;
visibility: hidden;
transition: all 0.5s ease;
z-index: 6;
}
.ui-wrapper .slider-wrapper .slide.active .ttl {
visibility: visible;
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide.prev .ttl {
visibility: visible;
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide.next .ttl {
visibility: visible;
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide-top {
position: relative;
width: 100%;
height: 50%;
top: 0;
overflow: hidden;
}
.ui-wrapper .slider-wrapper .slide-top .slide-image {
background-position: top center;
top: 0;
-webkit-clip-path: url(#masking);
      clip-path: url(#masking);
transform: translateX(-8%);
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide-bottom {
position: relative;
width: 100%;
height: 50%;
overflow: hidden;
}
.ui-wrapper .slider-wrapper .slide-bottom .slide-image {
background-position: bottom center;
bottom: 0;
transform: translateX(8%);
opacity: 0;
}
.ui-wrapper .slider-wrapper .slide-image {
position: absolute;
display: block;
width: 100%;
height: 200%;
background-size: cover;
}
.ui-wrapper .bottom-wrapper {
position: absolute;
display: block;
width: 100%;
bottom: 0;
padding: 0 12rem 5rem 6rem;
opacity: 0;
z-index: 10;
}
.ui-wrapper .bottom-wrapper:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .bottom-wrapper .category-wrapper {
  position: relative;
  float: left;
  overflow: hidden;
  height: 8rem;
  width: 25rem;
}
.ui-wrapper .bottom-wrapper .category-wrapper .category {
  position: absolute;
  font-weight: 800;
  font-size: clamp(1.3rem, 0.871rem + 1.43vw, 1.8rem);
  color: white;
  text-transform: uppercase;
  display: inline-block;
}
.ui-wrapper .bottom-wrapper .category-wrapper .category.next {
transform: translateY(-100%);
}
.ui-wrapper .bottom-wrapper .navigation-wrapper {
position: relative;
float: right;
}
.ui-wrapper .bottom-wrapper .navigation-wrapper ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 5;
}
.ui-wrapper .bottom-wrapper .navigation-wrapper ul:after {
content: "";
display: table;
clear: both;
}
.ui-wrapper .bottom-wrapper .navigation-wrapper li {
position: relative;
float: left;
color: white;
text-transform: uppercase;
padding: 0 1rem;
cursor: pointer;
font-weight: 800;
font-size: 1.3rem;
cursor: pointer;
}
.ui-wrapper .bottom-wrapper .navigation-wrapper li::after {
content: "";
display: block;
position: absolute;
width: 0.1rem;
background: rgba(255, 255, 255, 0.5);
height: 1.3rem;
left: 100%;
top: 50%;
transform: translateY(-50%);
}
.ui-wrapper .bottom-wrapper .navigation-wrapper li:last-child {
padding-right: 0;
}
.ui-wrapper .bottom-wrapper .navigation-wrapper li:last-child::after {
width: 0;
height: 0;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper {
    position: absolute;
    right: -4.8rem;
    top: 2.5rem;
    font-size: 4.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.3);
    overflow: hidden;
    z-index: 1;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .number {
position: relative;
display: block;
overflow: hidden;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .change-slide-number {
position: relative;
float: right;
width: 4rem;
height: 8rem;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .change-slide-number span {
display: block;
position: absolute;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .change-slide-number span.current {
top: 0;
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .change-slide-number span.next {
transform: translateY(100%);
}
.ui-wrapper .bottom-wrapper .slide-number-wrapper .change-slide-number span.prev {
transform: translateY(-100%);
}
.ui-wrapper .bottom-wrapper .category-wrapper .category.next {
  display: none;
}
/* スライド画像 */
.slide-image {
  width: 100%;
  height: 800px; /* 必ず指定する */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* デフォルト（PC用） */
.slide-bg01 {
  background-image: url('../img/top-slide01.jpg');
}
.slide-bg02 {
  background-image: url('../img/top-slide02.jpg');
}
.slide-bg03 {
  background-image: url('../img/top-slide03.jpg');
}
.slide-bg04 {
  background-image: url('../img/top-slide04.jpg');
}
/* 992px以下 */
@media (max-width: 992px) {
  .slide-bg01 {
    background-image: url('../img/top-slide01_992.jpg');
  }
  .slide-bg02 {
    background-image: url('../img/top-slide02_992.jpg');
  }
  .slide-bg03 {
    background-image: url('../img/top-slide03_992.jpg');
  }
  .slide-bg04 {
    background-image: url('../img/top-slide04_992.jpg');
  }
}
/* 630px以下 */
@media (max-width: 630px) {
  .slide-bg01 {
    background-image: url('../img/top-slide01_630.jpg');
  }
  .slide-bg02 {
    background-image: url('../img/top-slide02_630.jpg');
  }
  .slide-bg03 {
    background-image: url('../img/top-slide03_630.jpg');
  }
  .slide-bg04 {
    background-image: url('../img/top-slide04_630.jpg');
  }
  .ui-wrapper .slider-wrapper .slide .ttl {
    text-align: center;
    letter-spacing: 0px;
  }
  .slider-wrapper {
    height: 100vh;
  }
  .slider-wrapper .slide,
  .slider-wrapper .slider-container {
    height: 100%;
  }
  .ui-wrapper .bottom-wrapper {
    padding: 0 5rem 4rem 1rem;
  }
}

/* ========== トップページ下 ========== */
/* === セクション全体 === */
.message {
    margin: 150px 0 100px;
}
.message .text_box {
  color: white;
  line-height: 1.8;
}
.message .en {
  font-size: 0.8rem;
  opacity: 0.6;
  display: block;
  margin-top: 2px;
}

.section {
  
}
.section .area {
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  color: var(--color01);
}
.section .sub_ttl {
    text-align: center;
    font-weight: 300;
}
.section .divider {
    border-bottom: 1px solid var(--color02);
    margin: 1rem 0;
}
.section .cards {
    color: var(--color02);
    border-radius: 8px;
    cursor: pointer;
    height: 100%;
    padding: 1.5em;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #046295;
    background: linear-gradient(90deg,rgba(4, 98, 149, 0.9) 0%, rgba(4, 98, 149, 0.8) 50%, rgba(4, 98, 149, 0.2) 100%),
      url('../img/kameleon/kameleon10.webp');
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(2px);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #fff;
    transition: transform .4s ease-in-out;
    transform: scale(1);
}
.section .cards:hover {
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
}
.section .cards > * {
  position: relative;
  z-index: 1;
}
.section .cards .icon {
  width: 25%;
  margin: 0 auto;
  transition: .3s ease-in-out;
}
.section .cards .icon img {
  aspect-ratio: 1;
}

.section .cards .info {
  position: relative;
  visibility: hidden;
  top: -50%;
  opacity: 0;
}
.section .cards .info p {}

.section .cards .title {
  text-align: center;
  font-weight: 300;
}
.section .cards .lead {
  -webkit-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}
/* TOPBlog */
.section-blog .sub_ttl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  min-height: fit-content;
}
.section-blog .cards {
}
.section-blog .cards .icon {
  width: 90%;
}
.section-blog .cards .icon img {
  aspect-ratio: 16/9;
}
.section-blog .cards:hover .icon {
  width: 100%;
  margin: 0 auto;
  transition: .3s ease-in-out;
}
.section-blog .button {
  width: 295px;
}
/* others */
.section-others .cards {
}

/* modal */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background-color: rgba(0,0,0,0.7);
  animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* モーダル内コンテンツ */
.modal-content {
    margin: 5% auto;
    max-width: 90%;
    padding: 2em 5rem;
    border-radius: 10px;
    position: relative;
    animation: contentFade 0.5s ease;
    height: 50%;
    background: RGBA(4, 148, 185, 0.8);
    background: 
      linear-gradient(90deg,rgba(4, 148, 185, .8) 0%, rgba(4, 148, 185, .7) 50%, rgba(2, 90, 126, 0.2) 100%),
      url('../img/kameleon/kameleon08.webp');
    backdrop-filter: blur(3px);
    border: none;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #fff;
}
@keyframes contentFade {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
.modal-content .icon {
    width: 20%;
    margin: 0 auto;
    transition: .3s ease-in-out;
}
.modal-body {
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.modal-content .icon img {}
.modal-content .sub_ttl {
    text-align: center;
    margin: 8px 0 25px;
}
.modal-content .info {}
.modal-content .info .driver {}
.modal-content .info .lead {}
.modal-content .info .button {
    margin-left: auto;
}
/* ▼ ここから閉じる用アニメーション追加 ▼ */
.modal.fade-out {
  animation: fadeOut 0.4s ease forwards;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.modal-content.fade-out-content {
  animation: contentFadeOut 0.4s ease forwards;
}
@keyframes contentFadeOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.95);
    opacity: 0;
  }
}

/* 閉じるボタン */
.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

/* 初期カードのinfoは非表示 */
.cards .info {
  display: none;
}
@media screen and (max-width:630px) {
  .modal-body {
    width: auto;
    height: 100%;
  }
  .modal-content {
    height: 95vh;
}
  .modal-content .icon {
    width: 30%;
}
.modal-content .sub_ttl {
    margin: 8px 0 10px;
}
.modal-content .info .button {
    margin-top: 20px;
    margin-left: 0;
}
}
/* ========== x-section ========== */
/* Twitter埋め込みラッパー */
.twitter-embed-wrapper {
  width: 100%;
  max-width: 600px; /* 最大幅600pxに制限（調整可） */
  margin: 0 auto;
}
/* Twitterタイムライン iframe強制調整 */
.twitter-embed-wrapper iframe {
  width: 100% !important;
  height: 600px !important; /* PC時高さも大きく見せる */
}
/* スマホ時レスポンシブ調整 */
@media screen and (max-width: 768px) {
  .twitter-embed-wrapper iframe {
    height: 500px !important;
  }
}

/* ========== Particle ========== */
:root {
  --textcolor: #141414;
  --mainback: hsl(240, 76%, 10%);
  --subback: hsl(240, 76%, 20%);
}
/* bg */
.bg_pattern {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: -1;
}
.Paper_v2 {
  background-image:
  repeating-linear-gradient(to bottom,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
    transparent 27px, transparent 51px,
    rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
    transparent 53px, transparent 77px,
    rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
    transparent 79px, transparent 103px,
    rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
    transparent 105px, transparent 129px,
    rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px),

  repeating-linear-gradient(to right,
    transparent 25px,
    rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px,
    transparent 27px, transparent 51px,
    rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px,
    transparent 53px, transparent 77px,
    rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px,
    transparent 79px, transparent 103px,
    rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px,
    transparent 105px, transparent 129px,
    rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px);
}

/* particle bg */
canvas {
  position: fixed;
  top: 0;
  left: 0;
  mix-blend-mode: plus-lighter;
  z-index: 10;
  pointer-events: none;
}

/* ========== RESPONSIVE ========== */

@media screen and (max-width:1024x) {
  .section .cards:hover {
    height: 100%;
  }
  /* blog */
  .section-blog .cards {
  }
  /* about */
  .section-about .cards {
  }
  /* others */
  .section-others .cards {
  }
}
@media screen and (max-width:768px) {
  /* blog */
  .section-blog .cards {
  }
  /* about */
  .section-about .cards {
  }
  /* achievements */
  .section-achievements .cards {
  }
}
@media screen and (max-width:630px) {
  /* About */
  .section-about .cards {
  }
  .section-others .cards {
  }
  /* message */
  .message {
    margin: 100px 0 80px;
  }
  /* caard */
  .modal-content {
    padding: 1em 1rem;
    position: relative;
    background: linear-gradient(90deg,rgba(4, 148, 185, .8) 0%, rgba(4, 148, 185, .7) 50%, rgba(2, 90, 126, 0.2) 100%),
      url('../img/kameleon/kameleon12.webp');
    background-size: cover;
  }
}