@charset "utf-8";

.top-link{
  position: fixed;
  bottom: 12em;
  right: 0;
  z-index: 1;
  width: 120px;
  height: auto;
  animation-delay: 1s;
  z-index: 10;
  transition: transform 0.5s ease;
}

.top-link:hover{
  opacity: .6;
  transform: translateY(-8px);
}

.top-title{
  position: relative;
  z-index: 1;
  width: fit-content;
}

.top-title p{
  font-size: 5rem;
  color: #00A16C;
  font-weight: 600;
  line-height: 1;
}

.top-title h2{
  font-size: 20px;
  color: #00A16C;
  font-weight: 600;
  line-height: 1;
}

.top-title-deco{
  position: absolute;
  top: -2rem;
  left: -2rem;
  width: 100px;
  height: auto;
  z-index: -1;
}

@media screen and (max-width: 960px) {
  .top-link{
    display: none;
  }
}

/*====================
FV
====================*/
.fv {
  position: relative;
  display: flex;
  gap: 2.5rem;
  padding: 8rem 10% 5rem;
}

.fv-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background-color: #DDE6ED;
  z-index: -1;
}

.fv-left {
  position: relative;
  width: 60%;
}

.fv-right {
  position: relative;
  width: 35%;
  background-color: #536D82;
  border-radius: 10px;
  padding: 2rem;
}

.fv-right h2{
  font-size: 1.5rem;
  color: #FFF;
  margin-bottom: 1.5rem;
}

.fv-right-img img{
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1rem;
}

.fv-right-text{
  color: #FFF;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: #26374D 1px solid;
}


.fv-img{
  position: relative;
  width: 100%;
  height: auto;
  object-fit: cover;
  z-index: 0;
}

.fv-img-sp{
    display: none;
}

.fv-text{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 3rem;
}

.fv-text h1{
  font-size: clamp(
  2rem,
  calc(0.714rem + 1.984vw),
  3.5rem
);
  font-weight: 600;
}

.fv-text p{
  font-size: 1.25rem;
}

@media (max-width: 1200px) {
  .fv {
    position: relative;
    display: flex;
    gap: 2rem;
    padding: 8rem 5%;
  }
}

@media (max-width: 1024px) {
  .fv {
    flex-direction: column;
    gap: 2rem;
    padding: 8rem 5% 3rem;
  }
  .fv-left {
    width: 100%;
  }
  .fv-right {
    width: 100%;
  }
  .fv-right .webgene-blog{
    display: flex;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .fv-right .webgene-blog{
    flex-direction: column;
  }
  .fv-text h1{
    font-size: 1.25rem;
    font-weight: 600;
  }
  .fv-text p{
    font-size: 1rem;
  }
}



.swiper {
  width: 100%;
  height: clamp(420px, 60vh, 700px);
  overflow: hidden;
  border-radius: 10px;
}

/* ← Swiperに任せる */
.swiper-wrapper {
  height: 100%;
}

.swiper-slide {
  width: 80%;
  height: 100%;
}

.swiper-slide-active,
.swiper-slide-duplicate-active {
  opacity: 1;
}

/* 画像 */
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* ← 超重要（余白防止） */
}

@media (max-width: 600px) {
  .swiper-slide img {
    height: auto;        /* ← 固定を外す */
    min-height: 100%;    /* ← でも枠は埋める */
    object-position: 60% 0%;
  }
}

/*====================
NEWS
====================*/
.blog{
  position: relative;
  width: 100%;
  padding: 5rem 0;
}

.blog-inner{
  margin: 2rem auto;
  width: 80%;
  min-width: 960px;
  animation-delay: .375s;
}

@media screen and (max-width: 1200px) {
  .blog-inner{
    margin: 1rem auto;
    width: 90%;
    min-width: auto;
    animation-delay: .375s;
  }
}

@media screen and (max-width: 960px) {
  .blog{
    padding: 3rem 0;
  }
  .blog-link{
    position: relative;
    top: auto;
    right:auto;
    margin: 0 auto 2rem;
  }
}


/*====================
ABOUT
====================*/

.about{
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: fit-content;
}

.about-wrap{
  position: relative;
  margin: 5rem auto;
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  animation-delay: .375s;
}

.about-tit{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: .25rem;
  margin: 0 auto 3rem;
}

.about-tit-num{
  font-size: 10rem;
  color: #00152F;
  font-weight: 600;
  line-height: 1;
}

.about-tit img{
  width: 170px;
  height: auto;
}

.about-tit-text{
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  margin: auto 0 1rem 0;
}

.about-tit-text span{
  font-size: 3.5rem;
  font-weight: 600;
  line-height: 1;
}

.about-cont{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.about-item{
  position: relative;
  display: flex;
  gap: 2rem;
  width: 100%;
  align-items: center;
  border-radius: 10px;
  border-left: 16px solid #26374D;
  box-shadow: 0 8px 24px #01142F1E;
}

.about-text{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem;
  width: 50%;
}

.about-text-num{
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.about-text-num p:nth-child(1){
  position: relative;
  color: #9DB2BF;
  font-size: 1rem;
}

.about-text-num p:nth-child(2){
  position: relative;
  font-size: 2rem;
  font-weight: 600;
}

.about-text-tit{
  position: relative;
  display: flex;
  gap: 1.5rem;
}

.about-text h2{
  font-weight: 600;
  font-size: 1.5rem;
}

.about-text-img{
  width: 50%;
  height: auto;
  object-fit: cover;
}

.about-text p span{
  font-weight: 600;
}


.about-btn{
  position: relative;
  margin: 2rem 0 2rem auto;
}

@media screen and (max-width: 1024px) {
  .about-wrap{
    position: relative;
    padding: 3rem 0;
    width: 90%;
    gap: 2rem;
  }
  .about-text-num{
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media screen and (max-width: 768px) {
  .about-wrap{
    margin: 2rem auto;
  }
  .about-item{
    flex-direction: column;
    gap: 1rem;
  }
  .about-text{
    width: 90%;
    padding: 1rem;
    gap: 1rem;
  }
  .about-text h2 {
      font-size: 1.25rem;
  }
  .about-text-img{
    width: 90%;
    padding: 0 1rem 1rem;
  }
  
  .about-tit-num{
    font-size: 5rem;
  }
  .about-tit img{
    width: 100px;
  }
  .about-tit-text{
    font-size: 1rem;
  }
  .about-tit-text span{
    font-size: 1.5rem!important;
  }
}

/*====================
LINE UP
====================*/

.lineup{
  width: 100%;
  background-color: #F1F1F1;
}

.lineup-wrap{
  width: 80%;
  margin: 5rem auto;
  padding: 5rem 0;
}

.lineup-title{
  margin: 5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.lineup-title h2{
  color: #7691C1;
  font-size: 1.25rem;
  font-weight: 600;
}

.lineup-title p{
  font-size: 2.5rem;
  font-weight: 600;
}

.lineup-cont{
  width: 80%;
  margin: 4rem auto;
  display: flex;
  gap: 4%;
  row-gap: 2.5rem;
  flex-wrap: wrap;
}

.lineup-item{
  width: 48%;
  padding: 3rem;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-top: 12px solid #7691C1;
  border-radius: 10px;
  box-shadow: 0 8px 16px #01142F1e;
}

.lineup-item img{
  width: fit-content;
  height: 56px;
}

.lineup-item h3{
  font-size: 2rem;
  font-weight: 600;
}

.lineup-item p{
  font-size: 14px;
  color: #26374D;
}

.lineup-btn{
  margin: 2rem auto;
}

.lineup-maker{
  width: 80%;
  margin: 4rem auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.lineup-maker-item{
  width: 100%;
  padding: 2.5rem 5%;
  background-color: #fff;
  display: flex;
  gap: 15%;
  border-left: 12px solid #7691C1;
  border-radius: 10px;
  box-shadow: 0 8px 16px #01142F1e;
}

@media screen and (max-width: 1024px) {
  .lineup-wrap{
    width: 90%;
    margin: 2rem auto;
    padding: 2rem 0;
  }
  .lineup-cont{
    width: 100%;
  }
  .lineup-item h3{
    font-size: 1.5rem;
  }
  .lineup-item{
    width: 48%;
    padding: 1.5rem;
  }
  .lineup-title h2{
    color: #7691C1;
    font-size: 1rem;
    font-weight: 600;
  }

  .lineup-title p{
    font-size: 2rem;
    font-weight: 600;
  }
}

@media screen and (max-width: 768px) {
  .lineup-cont{
    flex-direction: column;
  }
  .lineup-item{
    width: 100%;
  }
  .lineup-maker{
    width: 100%;
    gap: 2rem;
  }
  .lineup-maker-item{
    padding: 2rem;
    flex-direction: column;
    gap: 2rem;
  }
  .lineup-title{
    margin: 2rem auto 0;
  }
  .lineup-title h2{
    font-size: 1rem;
  }
  .lineup-title p{
    font-size: 1.5rem;
  }
}

/*====================
　TRANS
====================*/

.trans{
  width: 100%;
  margin: 5rem auto;
  display: flex;
  gap: 4%;
  row-gap: 3rem;
  justify-content: center;
  flex-wrap: wrap;
}

.trans-btn{
  width: 48%;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  box-shadow: 0 8px 24px #01142F2e;
  min-width: 540px;
  transition: all .5s;
}

.trans-btn:hover{
  box-shadow: none;
}

.trans-btn-01{
  position: relative;
  background-color: #7691C1;
  display: flex;
  flex-direction: column;
}

.trans-btn-01::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  background: url("https://naniwa-thykoichiba.co.jp/system_panel/uploads/images/20260416192014128400.png");
  background-size: cover;
  transition: all .5s;
}

.trans-btn-01:hover::before{
  right: .75rem;
}

.trans-btn-01-title{
  font-size: 2.5rem;
  font-weight: 600;
  color: #FFF;
}

.trans-btn-01-sub{
  font-size: 1.5rem;
  font-weight: 600;
}

.trans-btn-01-sub span{
  font-size: 1.5rem;
  font-weight: 600;
  color: #D02D7E;
}

.trans-btn-01-cont{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 .5rem;
}

.trans-btn-01-item{
  position: relative;
  font-size: 12px;
  background-color: #26374D;
  border-radius: 14px;
  color: #FFF;
  padding: 8px;
  line-height: 1;
}

.trans-btn-02{
  position: relative;
  background-color: #F2CCE2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.trans-btn-02::before{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  right: 1.5rem;
  width: 40px;
  height: 40px;
  background: url("https://naniwa-thykoichiba.co.jp/system_panel/uploads/images/20260416192014614723.png");
  background-size: cover;
  transition: all .5s;
}

.trans-btn-02:hover::before{
  right: .75rem;
}

.trans-btn-02-deco01{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.trans-btn-02-deco02{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.trans-btn-02-img{
  width: 30%;
  height: auto;
}

.trans-btn-02-wrap{
  display: flex;
  flex-direction: column;
}

.trans-btn-02-title{
  font-size: 2.5rem;
  font-weight: 600;
  color: #D02D7E;
}

.trans-btn-02-sub{
  font-size: 1.5rem;
  font-weight: 600;
}

.trans-btn-02-cont{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 .5rem;
}

.trans-btn-02-item{
  position: relative;
  font-size: 12px;
  background-color: #FFF;
  border-radius: 14px;
  color: #D02D7E;
  padding: 8px;
  line-height: 1;
}

.f-trans-top{
  width: 100%!important;
}
@media screen and (max-width: 768px) {
  .trans{
      padding: 1rem 0;
  }
  .trans-btn{
    width: 100%;
    padding: 1rem 1.5rem;
    min-width: 300px;
  }
  .trans-btn-02{
    flex-direction: column;
    gap: 1rem;
  }
  .f-trans{
    margin: 1.5rem auto;
    width: 90%!important;
  }
  .f-trans-top{
    width: 100%!important;
  }
}

/*====================
　SHOP
====================*/

.shop{
  width: 80%;
  margin: 5rem auto;
}

.shop-cont{
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.shop-item{
  display: flex;
  gap: 4rem;
  align-items: center;
}

.shop-item:nth-child(2){
  display: flex;
  flex-direction: row-reverse;
  gap: 4rem;
  align-items: center;
}

.shop-item img{
  width: 50%;
  height: auto;
  border-radius: 10px;
  object-fit: cover; 
}

.shop-item iframe{
  border-radius: 10px;
}

.shop-map{
  width: 50%;
  min-height: 400px;
  height: auto;
  border-radius: 10px;
  object-fit: cover; 
}

.shop-item-text{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 40%;
}

.shop-item-text h3{
  font-size: 1.5rem;
}

.shop-item-text-desc{
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #9DB2BF
}

.shop-item-text-desc p:nth-child(1){
  font-weight: 500;
}

@media screen and (max-width: 1024px) {
  .shop{
    width: 90%;
    margin: 5rem auto;
  }
}

@media screen and (max-width: 768px) {
  .shop-item{
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-item:nth-child(2){
    flex-direction: column;
    align-items: flex-start;
  }
  .shop-item img{
    width: 100%;
  }
  .shop-item-text{
      width: 100%;
  }
  .shop-map{
    width: 100%;
  }
}

/*====================
List Layout
====================*/

.blog-wrap{
  width: 80%;
  margin: 5rem auto 0!important;
  padding: 5rem 0;
}

.blogItemTit { 
  font-size:16px; 
  font-weight:600; 
  color: #00152F;
  line-height: 1;
}
.blogItemTime { font-size:14px; }
.blogItemCatewrap { display:flex; gap:.75rem; align-items: center;}
.blogItemCate { 
  line-height:1; 
  font-size: 14px;
  padding: .5rem 1rem;
  border: 1px solid #00152F;
  border-radius: 30px;
  background-color: transparent;
  color:#00152F!important; 
  width:fit-content; 
  height:fit-content; 
}
.blogTextWrap { 
  position: relative; 
  height: fit-content; 
  display:flex; 
  align-items: center;
  gap: 1.5rem; 
  width:100%;
  padding: 1rem 5%;
  border-left: 12px solid #00152F;
  border-radius: 10px;
  background-color: #FFF;
  box-shadow: 0 8px 24px #00152F1e;
}

.blog-btn{
  margin: 2rem 0 0 auto;
}

@media screen and (max-width: 960px) {
  .blog-wrap{
    width: 90%;
    margin: 2rem auto 0!important;
    padding: 2rem 0;
  }
 .blogTextWrap { 
    align-items: flex-start;
    gap: 1rem; 
    padding: 1rem;
    flex-direction: column;
  }
}

@media screen and (max-width: 600px) {
  .blog-main{
    margin: 0 auto;
  }
  .blog-main .webgene-blog article { 
    width:100%; 
  }
   .blog-main .webgene-blog{
     flex-direction: column;
     align-items: center;
  }
}