/**
Theme Name: ayu-brand
Theme URI: https://www.wpzoom.com/themes/inspiro/
Author: WPZOOM
Author URI: https://www.wpzoom.com/
Description: Inspiro is a professional & lightweight photo and video-focused WordPress theme with a modern design. Packed with features including a fullscreen area that supports Vimeo, YouTube & self-hosted video background, Page Builder integration, Inspiro is perfect for showing off your photography and video portfolio. Moreover, the theme is compatible with WooCommerce and popular Page Builders such as Elementor, Beaver Builder. The theme is fully GDPR-compliant and doesn't use any external Google Fonts. All fonts are locally hosted. Learn more and check out our powerful PREMIUM version at https://www.wpzoom.com/themes/inspiro/
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, e-commerce, wide-blocks, portfolio, blog, custom-background, featured-image-header, full-width-template, theme-options, block-styles, block-patterns
Version: 1.9.9
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: inspiro
Domain Path: /languages/

Inspiro is based on Twenty Seventeen https://wordpress.org/themes/twentyseventeen/, (C) 2012-2020 Automattic, Inc.
Twenty Seventeen is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/

/* Note: The CSS files are loaded from assets/css/ folder. */

 html{
    scroll-behavior: smooth; /* スムーズスクロールを有効化 */

 }

.hero{
    width: 100%;
    min-height:1080px ;
    object-fit: contain;
}

body {
    background: url("/images/wave-deco01.webp") no-repeat center center/cover;
    background-size: 1980px auto;
    margin: 0 auto;
    padding: 0;
    font-family: "Yu Mincho";
}

img{
    width: 100%;
}
li{
    list-style-type: none;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
    z-index: 1000;
}
.scrolled .logo, .scrolled nav ul li a {
    color: #333;
    font-size: 20px;
}
.logo, nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 20px;
    transition: color 0.3s ease-in-out;
}
nav ul li a:hover{
    opacity: .7;
}

/* ハンバーガーメニューのデフォルトを非表示 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 1100;
}
.menu-toggle div {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.menu-toggle.active div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.menu-toggle.active div:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active div:nth-child(3) {
    transform: rotate(-45deg) translate(13px, -13px);
}
.scrolled .menu-toggle div {
    background: black;
}
nav {
    position: fixed;
    top: 10%;
    right: 2%;   
    transition: transform 0.3s ease-in-out;
}
nav ul {
    padding: 0;
    margin: 0;
    text-align: right;
    line-height: 3.5;
}

/* newsエリア */
.event-section {
  display: flex;
  position: relative;
  background: #fff;
  overflow-x: hidden;
  min-height: 400px;
  padding: 0 10% 0 5%; 
}

/* 左：固定表示のタイトル・ボタン */
.event-left {
  width: 300px; /* ★固定幅に */
  background: #fff;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: center;
}

.event-label {
  font-size: 0.75rem;
  letter-spacing: 1px;
  margin: 0;
  color: #0ABAB5;
}

.event-left h2 {
  font-size: 2rem;
  margin: 10px 0 20px;
  border-left: 4px solid #0ABAB5;
    padding-left: 10px;
}

.event-nav button {
  background: #0ABAB5;
  color: #fff;
  border: none;
  padding: 8px 14px;
  margin-right: 10px;
  border-radius: 4px;
  cursor: pointer;
}

/* 右：横スクロールカード */
.event-right {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 40px 20px;
   max-width: calc(100vw - 100px);
}

/* カード1つ */
.event-card {
  flex: 0 0 750px;
border-left: #333 1px solid;
  padding: 20px;
}
@media (max-width:768px){
    .event-card {
  padding: 10px 20px;
}
}
.event-card-inner{
    display: flex;
    justify-content: space-between

}
.event-card img {
  width: 55%;
height: 245spx;
object-fit: cover;
  margin: 0 10px 0 10px;
}

.badge {
  display: inline-block;
  color: #0ABAB5;
  font-size: 16px;
  margin-bottom: 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.tags a {
  background: #333;
  color: #fff;
  padding: 6px 20px;
  border-radius: 20px;
  font-size: 16px;
  text-decoration: none;
}
.news-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.news-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
/* news記事エリア */


.newsdetail-section img{
    height: auto;
    object-fit: cover;
}
.news-detail {
  padding: 0 40px;
  max-width: 800px;
  margin: 0 auto;
  color: #333;
      background: rgba(255, 255, 255, 0.8);
}

.news-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.news-label {
  border: 1px solid #1cb5bc;
  color: #1cb5bc;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.news-title {
  font-size: 28px;
  font-weight: bold;
  margin: 30px 0 20px;
}

.news-body p {
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 1em;
}
.news-detail-wrapper {
  display: block;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.news-sidebar {
  min-width: 200px;
  padding: 40px 0;
  display: flex;
  justify-content: space-between;}

.back-top-button {
  position: relative;
  text-decoration: none;
  font-size: 20px;
  font-weight: normal;
  padding-bottom: 2px;
}
.back-top-button::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: #1cb5bc; /* 下線の色 */
  transition: width 0.3s ease;
}
.back-top-button:hover::after {
  width: 100%;
}
/* about-area */

.about-area ul{
    display: flex;
    padding: 0 4%;
}
.about-area li{
    padding: 0 1%;
}

.about-video{
    position: absolute;
    top: 400px;
    right: 180px;
}

#about-text-img{
    max-width: 900px;
    width: 950px;
}
#about-tip{
    max-width: 640px;
    width: 800px;
}
#about-video{
    max-width: 740px;
    width: 800px;
   
}

/* profileエリア */

.col-3{
    display: flex;
    justify-content: center;
    padding: 10% 0 5% 5%;
}
.profile-text{
    max-width: 780px;
    line-height: 2rem;
overflow-wrap: break-word;
background: rgba(255, 255, 255, 0.4); /* 半透明の白 */
backdrop-filter: blur(10px);         /* 背景ぼかし */
-webkit-backdrop-filter: blur(10px); /* Safari対応 */
padding: 0 2% 2%;
}
/* // ラッパー */
.bl_imgSwitcher {
    max-width: 400px;
  }
  
  /* // メイン画像のエリア */
  .bl_imgSwitcher_main {
    aspect-ratio: auto;    
    overflow: hidden;
  }
  /* // サムネイル画像のエリア */
  .bl_imgSwitcher_thumb {
    display: flex;
    max-width: 400px;
  }
  
  /*  サムネイル画像の各ボタン */
  .bl_imgSwitcher_btn {
    background: transparent;
    width: 33.3%;
    overflow: hidden;
    border: 0;
    position: relative;
  
    &::before {
      content: "";
      border-radius: inherit;
      position: absolute;
      inset: 0;
      z-index: 10;
      transition: background-color .4s;
    }
  
    @media (any-hover: hover) {
      &:hover::before {
        background-color: rgb(255 255 255/.5);
      }
    }
  
    &:focus-visible::before {
      background-color: rgba(255, 255, 255, 0.5);
    }
  
    img {
      width: 100%;
      aspect-ratio: 2/3;
      object-fit: cover;
    }
  }
  
  /* // .is_activeクラスが付与されたら、サムネイル画像に半透明の白背景を適用 */
  .bl_imgSwitcher_btn.is_active::before {
    background-color: rgba(255, 255, 255, 0.5);
  }

/* messageエリア */

.message{
    text-align: center;
}
.message-img{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}
.message img{
    width: 450px;
    position: absolute;
    opacity: .4;
}
.message p{
font-size: 20px;
}
  /* worksエリア */
  .swiper-container {
    width: 100%;
    max-width: 1500px;
    padding: 0 3% 3% 3%;
    overflow: hidden;
    margin: auto;
    position: relative;
}

/* スライドデザイン */
.swiper-slide {
    text-align: center;
    overflow: hidden;
    background: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.swiper-slide:hover {
    transform: scale(1.05);
}

.swiper-slide img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}

/* キャプションデザイン */
.caption {
    padding: 15px;
    font-size: 16px;
    text-align: center;
   color: #333; 
}
.caption span {
    display: block;
    font-weight: bold;
    color: #333;
    font-size: 18px;
   
}

/* ナビゲーションボタン */
.swiper-button-next,
.swiper-button-prev {
    color: #0ABAB5!important;
}

/* ページネーション */
.swiper-pagination-bullet {
    background: #0ABAB5!important;
}

/* snsエリア */

  /* カード全体のデザイン */
  .instagram-card {
    max-width: 600px;
    margin: 0 auto;
    background: #f5f5f5;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-family: Arial, sans-serif;
}

/* プロフィール部分 */
.insta-header {
    display: flex;
    align-items: center;
    padding: 10px;
}

.insta-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.insta-header span {
    font-size: 16px;
    font-weight: bold;
}

/* 投稿のグリッドレイアウト */
.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.insta-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}

/* ボタン */
.load-more {
    display: block;
    background: #000;
    color: #fff;
    padding:12px 85px;
    text-decoration: none;
    font-size: 14px;
    border-radius: 20px;
    margin-top: 10px;
}
/* seminarエリア */
.seminar_area{
    max-width: 600px;
    margin: 0 auto;
    padding: 3%;
}
.seminars{
    text-align: center;
}

/* salonエリア */
.brands_area{
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.brands_area ul{
    display: flex;
    justify-content: center;
}
.brands_area li{
min-width: 130px;
padding: 3%;
}
/* bookエリア */
.books_area{
    max-width: 600px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.books_img{
    width: 200px;
}
.books_text_area{
    width: 320px;
}
.books_button{
    margin: 30px 0;
    
}
.books_button a{
    background: black;
    padding: 12px 85px;
    border-radius:20px;
    color: #fff;
    text-decoration: none;
}
a:hover{
    opacity: .8;
}
/* footerエリア */
.footer{
    text-align: center;
    margin: 0 auto;
}
.footer ul{
    display: flex;
        width: 100px;
        padding: 0;
        margin: 0 auto;
        justify-content: space-between;
}
.footer li{
    width: 30px;
}
.footer p{
    color: #fff;
    padding: 2% 0;
    margin: 0;
}

/* bgエリア */
.backgb-gradi{
background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(10,186,181,1) 100%);
}

/* セクション */
section{
    padding:5% 10% 0 2%;
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  /* 表示状態のスタイル */
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .sp{
    display: none;
  }
  .pc{
    display: block;
}



/* モバイル用スタイル */
@media (max-width: 768px) {
    .sp{
        display: block;
    }
    .pc{
        display: none;
    }
    section{
        padding:0 3% 0;
        margin: 60px auto;
        overflow: hidden;
        word-break: auto-phrase;
    }
header {
    padding: 0;
}
.logo{
    padding: 15px;
}
    .hero{
        min-height:1vh;
    }
    .menu-toggle {
        display: flex;
        padding: 10px;
    }
    nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 30vw;
        height: 100vh;
        background: rgba(209,209, 209, 0.95);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-left: 20px;
        text-align: left;
        transition: transform 0.3s ease-in-out;
    }
    nav ul {
        text-align:left;
    }
    nav.nav-active {
        display: flex;
    }
/* newsエリア */
.event-section {
    display: block;
    padding: 0;
}
.event-card {
  flex: 0 0 300px;
  border-left: none;
}
.event-card-inner h3{
    font-size: 16px;
}
.event-nav{
    display: none;
}
.event-left{
    padding: 0 20px;
}
.event-right{
    max-width: 100%;
}
.event-card img {
    width: 150px;
    height: auto;
}
/* news記事 */
.news-detail{
    padding: 0 15px;
}
.news-detail-wrapper{
    padding: 0;
}
.back-top-button{
    color: #333;
}
/* aboutエリア */
#about{
    margin:0;
    padding: 0;
}
.about-area ul{
    padding: 0;
    margin: 0 auto;
flex-direction: column;
}

.about-area li{
    padding: 0;
}
#about-tip{
    display: none;
}
.about-video{
    position: unset;
}
    #about-video{
        max-width: 100%;
    }
/* profileエリア */
.col-3{
flex-direction: column;
padding: 0;
}
.bl_imgSwitcher{
    margin: 0 auto;
    padding: 2%;
}
.bl_imgSwitcher_thumb{
    width: 100%;
}
.profile-text{
    margin: 0 auto;
    min-width: 300px;
    padding: 3%;
}
/* messageエリア */
.message p{
font-size: 16px;
}
/* worksエリア */
.swiper-container{
    padding: 3%;
    margin: 0 auto;
    width: auto;
    max-width: 600px;
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
    position: relative;
    bottom: var(--swiper-pagination-bottom, -10px)!important;

}





/* brandsエリア */
.books_area{
    flex-direction: column-reverse;
    align-items: center;
}
.brands_area ul{
    padding: 0;
}

.brands_area li{
    padding: 3%;
}
/* bookエリア */
.books_button{
    display: flex;
    justify-content: flex-end;
}
.books_button a{
    width: 100%;
    padding: 10px;
    text-align: center;
}
.books_text_area{
    width: 280px;
}

/* footerエリア */



}


/* news-article */
/* 
.news-article {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
  color: #333;
}

.news-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
}

.news-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.news-content {
  padding: 20px;
}

.news-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #444;
}

.news-text {
  font-size: 1rem;
  line-height: 1.6;
}

.news-date {
  text-align: right;
  font-size: 0.9rem;
  color: #999;
  margin-top: 20px;
} */