@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;box-sizing:border-box;}
body{
font-family:'Noto Sans JP', sans-serif;
background:#0f0f14;
line-height:1.8;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1200px;
margin:auto;
}

h1,h2,h3{
font-family:'Poppins', sans-serif;
letter-spacing:2px;
}
@media(max-width:540px){
	.pc{
		display:none;
	}
}

@media(min-width:541px){
	.sp{
		display:none;
	}
}
.topimg{
	max-width: 650px;
}
@media(max-width:540px){
	.topimg{
		width: 90%;
	}
}
/* ===== HERO ===== */

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
overflow:hidden;
background:
radial-gradient(circle at 20% 30%, #ffd6e0 0%, transparent 40%),
radial-gradient(circle at 80% 40%, #ffe6c7 0%, transparent 40%),
radial-gradient(circle at 50% 80%, #d9f2ff 0%, transparent 40%),
#f9fbff;
  overflow:hidden;
}

.hero::after{
content:"";
position:absolute;
width:500px;
height:500px;
background:linear-gradient(135deg,#ffc1cc,#ffd8a8,#bde0fe);
border-radius:50%;
filter:blur(120px);
opacity:0.4;
top:-100px;
right:-150px;
}

.hero-inner{
position:relative;
z-index:2;
max-width:900px;
padding:20px;
}

.hero h1{
font-family:'Poppins', sans-serif;
font-size:58px;
font-weight:800;
letter-spacing:3px;
color:#2b2b2b;
margin-bottom:20px;
}

.hero p{
font-size:20px;
color:#555;
margin-bottom:40px;
}

.btn{
display:inline-block;
padding:16px 38px;
border-radius:100px;
background:#ff8fab;
color:#fff;
text-decoration:none;
font-weight:600;
transition:.3s;
box-shadow:0 10px 25px rgba(255,143,171,0.3);
}
.btn:hover{
transform:translateY(-3px);
box-shadow:0 15px 35px rgba(255,143,171,0.4);
}

/* ===== Responsive ===== */

@media(max-width:768px){
.hero h1{
font-size:34px;
}
.hero p{
font-size:16px;
}
}
/* ========= SECTION ========= */

section{
padding:120px 0;
position:relative;
background:#f9fbff;
}

section:nth-of-type(odd){
background:linear-gradient(180deg,#ffffff 0%,#f3f8ff 100%);
}

section:nth-of-type(even){
background:linear-gradient(180deg,#fff9f9 0%,#fff3e6 100%);
}

.section-title{
font-size:40px;
margin-bottom:60px;
text-align:center;
background:linear-gradient(90deg,#ff6b81,#ffb703,#6ecbff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:800;
}

/* ========= GLASS CARD ========= */

.glass{
background:linear-gradient(145deg,#ffffff,#f8fbff);
border-radius:30px;
padding:40px;
box-shadow:
0 15px 40px rgba(0,0,0,0.06),
inset 0 1px 0 rgba(255,255,255,0.8);
transition:.4s ease;
}

.glass:hover{
transform:translateY(-8px);
box-shadow:
0 25px 60px rgba(0,0,0,0.08);
}

/* ===== CREATIVE CONCEPT ===== */

.creative-concept{
position:relative;
padding:160px 0;
overflow:hidden;
}

/* 背景グラデーションバブル */

.creative-concept::before{
content:"";
position:absolute;
width:700px;
height:700px;
background:linear-gradient(135deg,#ffd6e0,#d9f2ff,#ffe6c7);
border-radius:50%;
filter:blur(180px);
opacity:0.35;
top:-250px;
right:-200px;
z-index:0;
}

.concept-header{
position:relative;
z-index:2;
text-align:center;
margin-bottom:100px;
}

.concept-header h2{
font-size:48px;
font-weight:800;
background:linear-gradient(90deg,#ff6b81,#ffb703,#6ecbff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:20px;
}

.concept-lead{
font-size:20px;
color:#444;
letter-spacing:1px;
}

.concept-grid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:60px;
}

/* カード */

.concept-card{
padding:60px 40px;
border-radius:40px;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(20px);
box-shadow:0 25px 80px rgba(0,0,0,0.06);
transition:.6s cubic-bezier(.16,1,.3,1);
}

.concept-card:hover{
transform:translateY(-15px);
box-shadow:0 40px 120px rgba(0,0,0,0.1);
}

/* 番号 */

.concept-number{
display:inline-block;
font-family:'Poppins', sans-serif;
font-size:14px;
letter-spacing:3px;
color:#ff6b81;
margin-bottom:20px;
}

/* 見出し */

.concept-card h3{
font-size:22px;
margin-bottom:15px;
font-weight:700;
}

.concept-card p{
font-size:15px;
color:#555;
}

/* ========= FLOW ========= */

.flow-vertical{
position:relative;
max-width:800px;
margin:0 auto;
padding-left:40px;
}

/* 縦ライン */
.flow-vertical::before{
content:"";
position:absolute;
left:15px;
top:0;
width:2px;
height:100%;
background:#d9dde3;
}

/* 各ステップ */
.flow-item{
position:relative;
margin-bottom:80px;
}

/* 丸ポイント */
.flow-dot{
position:absolute;
left:-2px;
top:10px;
width:30px;
height:30px;
background:#00bcd4;
border-radius:50%;
border:4px solid #fff;
box-shadow:0 0 0 2px #d9dde3;
}

/* コンテンツ */
.flow-content{
margin-left:50px;
position:relative;
}

/* 番号 */
.flow-number{
display:block;
font-size:14px;
letter-spacing:2px;
color:#00bcd4;
margin-bottom:10px;
font-weight:600;
}

/* ========= CTA ========= */

.cta{
text-align:center;
background:linear-gradient(135deg,#ff4d6d,#ff9e00);
padding:120px 20px;
}

.cta h2{
font-size:36px;
margin-bottom:30px;
}

/* ========= FOOTER ========= */

footer{
text-align:center;
padding:40px;
background:#000;
font-size:14px;
color: #fff;
}

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

@media(max-width:768px){
.hero h1{font-size:36px;}
.section-title{font-size:28px;}
}
/* ===== GUMMY ===== */

.gummy{
position:absolute;
top:-60px;
border-radius:50%;
opacity:0.85;
animation:fall linear forwards;
filter:blur(0.3px);
}

/* 落下アニメーション */
@keyframes fall{
to{
transform:translateY(110vh) rotate(360deg);
}
}
	
/* ===== HEADER ===== */

.site-header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(12px);
z-index:9999;
transition:.3s;
}

.header-inner{
width:90%;
max-width:1200px;
height:100%;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}


.logo{
line-height: normal;
}

.logo a{
font-family:'Poppins', sans-serif;
font-weight:800;
letter-spacing:2px;
font-size:18px;
color:#2b2b2b;
text-decoration:none;
}

.logo img{
  height:42px;     /* ← ロゴの高さ基準 */
  width:auto;
  display:block;
}

@media(max-width:768px){
  .logo img{
    height:32px;   /* スマホでは少し小さく */
  }
}

/* ===== NAV ===== */

.nav ul{
display:flex;
gap:40px;
list-style:none;
}

.nav a{
text-decoration:none;
color:#2b2b2b;
font-weight:500;
transition:.3s;
}

.nav a:hover{
color:#ff6b81;
}

/* ===== HAMBURGER ===== */

.hamburger{
display:none;
flex-direction:column;
gap:6px;
cursor:pointer;
}

.hamburger span{
width:28px;
height:2px;
background:#2b2b2b;
transition:.3s;
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.nav{
position:fixed;
top:80px;
right:-100%;
width:260px;
height:100vh;
background:#ffffff;
box-shadow:-10px 0 30px rgba(0,0,0,0.08);
padding-top:40px;
transition:.4s;
}

.nav ul{
flex-direction:column;
gap:30px;
padding-left:30px;
}

.nav.active{
right:0;
}

.hamburger{
display:flex;
}

}

/* ハンバーガーアニメーション */

.hamburger.active span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

/* ヘッダー分の余白調整 */
body{
padding-top:80px;
}
html{
scroll-behavior:smooth;
scroll-padding-top:80px; 
}
	
	
/* ===== CREATIVE RECOMMENDED ===== */

.recommended-section{
position:relative;
overflow:hidden;
}

.creative-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:60px;
}

.creative-card{
position:relative;
padding:60px 40px;
border-radius:40px;
background:rgba(255,255,255,0.6);
backdrop-filter:blur(20px);
box-shadow:0 20px 60px rgba(0,0,0,0.05);
transition:.5s ease;
overflow:hidden;
}

.creative-card:hover{
transform:translateY(-12px);
box-shadow:0 35px 80px rgba(0,0,0,0.08);
}

/* 英語 */
.creative-card .en{
display:block;
font-family:'Poppins', sans-serif;
font-weight:800;
font-size:14px;
letter-spacing:3px;
margin-bottom:8px;
}

/* 日本語 */
.creative-card .jp{
display:block;
font-size:20px;
font-weight:600;
margin-bottom:20px;
}

.creative-card p{
font-size:15px;
color:#555;
}

/* ===== カラーバブル ===== */

.color-orb{
position:absolute;
width:160px;
height:160px;
border-radius:50%;
filter:blur(40px);
opacity:0.6;
top:-40px;
right:-40px;
z-index:-1;
}

.orb1{ background:#ffd6e0; }
.orb2{ background:#d9f2ff; }
.orb3{ background:#ffe6c7; }
.orb4{ background:#e4c1f9; }
.orb5{ background:#8cff80; }
/* ===== CREATIVE GALLERY ===== */

.creative-gallery{
position:relative;
padding:140px 0;
overflow:hidden;
}

/* 背景カラーバブル */

.creative-gallery::before{
content:"";
position:absolute;
width:600px;
height:600px;
background:linear-gradient(135deg,#ffd6e0,#d9f2ff,#ffe6c7);
border-radius:50%;
filter:blur(150px);
opacity:0.35;
top:-200px;
left:-200px;
z-index:0;
}

.floating-gallery{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:80px;
}

/* 浮遊カード */

.floating-item{
position:relative;
border-radius:40px;
overflow:hidden;
background:#fff;
box-shadow:0 30px 80px rgba(0,0,0,0.08);
transition:all .6s cubic-bezier(.16,1,.3,1);
transform:translateY(0);
}

.floating-item img{
width:100%;
height:320px;
object-fit:cover;
display:block;
transition:1.2s ease;
}

/* ふわっと浮く */

.floating-item:hover{
transform:translateY(-20px) scale(1.02);
box-shadow:0 50px 120px rgba(0,0,0,0.12);
}

.floating-item:hover img{
transform:scale(1.1);
}

/* キャプション */

.floating-caption{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:40px;
background:linear-gradient(
to top,
rgba(0,0,0,0.65),
rgba(0,0,0,0)
);
color:#fff;
}

.floating-caption h3{
font-family:'Poppins', sans-serif;
font-size:18px;
letter-spacing:2px;
margin-bottom:8px;
}

.floating-caption p{
font-size:14px;
opacity:0.85;
}

/* ===== Section ===== */

.creative-gallery {
  padding: 140px 0;
  background: radial-gradient(circle at 30% 20%, #1a1a1a, #0d0d0d 70%);
  color: #fff;
  overflow: hidden;
}

.section-title {
  text-align: center;
  font-size: 40px;
  margin-bottom: 80px;
  letter-spacing: 3px;
}

/* ===== Grid ===== */

.floating-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 50px;
  perspective: 1200px;
}

.floating-item {
  position: relative;
  background: rgba(255,255,255,0.05);
  border-radius: 30px;
  padding: 30px;
  backdrop-filter: blur(15px);
  transition: 0.6s;
  animation: float 6s ease-in-out infinite;
  cursor: pointer;
  transform-style: preserve-3d;
}

.floating-item img {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}

.floating-caption h3 {
  font-size: 20px;
  margin-bottom: 8px;
}

.floating-caption p {
  font-size: 14px;
  opacity: 0.7;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

.floating-item:nth-child(2){ animation-delay: 1s;}
.floating-item:nth-child(3){ animation-delay: 2s;}
.floating-item:nth-child(4){ animation-delay: 3s;}

.floating-item:hover {
  box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}

/* ===== Modal ===== */

.creative-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(15px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-inner {
  position: relative;
  max-width: 900px;
  width: 90%;
  text-align: center;
}

.modal-inner img {
  width: 80%;
  border-radius: 25px;
  animation: zoomIn 0.4s ease;
}

.modal-text {
  margin-top: 25px;
}

.modal-text h3 {
  font-size: 26px;
}

.modal-text p {
  opacity: 0.7;
}

.modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  font-size: 40px;
  cursor: pointer;
color:#fff;
}

.nav-btn {
  position: absolute;
  top: 45%;
  background: none;
  border: none;
  font-size: 40px;
  color: white;
  cursor: pointer;
}

.prev { left: -60px; }
.next { right: -60px; }

@keyframes zoomIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ===== Responsive ===== */

@media (max-width:768px){
  .nav-btn { display:none; }
  .section-title { font-size:28px; }
}

/* ===== FOOTER UPGRADE ===== */

.site-footer{
  background:#0f0f14;
  color:#ccc;
  padding:60px 0 40px;
  font-size:14px;
}

.footer-inner{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  text-align:left;
}

.footer-company h3{
  font-family:'Poppins', sans-serif;
  font-weight:600;
  letter-spacing:1px;
  font-size:18px;
  margin-bottom:20px;
  color:#fff;
}

.footer-company p{
  margin-bottom:15px;
  line-height:1.8;
}

.footer-copy{
  margin-top:40px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:13px;
  color:#888;
	text-align: center;
}

/* 外部リンクバナー */
#external-banner {
  margin:0;
  text-align: center;   /* 中央寄せ */
}

#external-banner a {
  display: inline-block;
}

#external-banner img {
  width: 100%;           /* 親幅に応じて縮小 */
  max-width: 300px;      /* 元サイズを維持 */
  height: auto;
  border: 0;
  transition: transform 0.3s ease;
}

#external-banner img:hover {
  transform: scale(1.05); /* ホバーで少し拡大 */
}