@charset "utf-8";

:root{
	--quote_l: 52px;
	--quote_s: 23px;
	--quote_height_l: 1.5;
	--quote_height_s: 3.5em;
	@media (width <=1300px) {
		/* :root{ */
			--quote_l: 42px;
			--quote_s: 21px;
			--quote_height_s: 2.5em;
		/* } */
	}
	@media (min-width: 320px)
	and (max-width: 767px) {
		/* :root{ */
			--quote_l: 22px;
			--quote_s: 16px;
		/* } */
	}

}

.wrapper{
	padding-bottom: 0;
}
.philosophy-wrap{
	position: relative;
	width: 100%;
	/* background-color: #d3d3d3; */
	background: linear-gradient(#d3d3d3,#d3d3d3 40%,  #000);
	color: #000;
}

.top-full{
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: grid;
	align-items: center;
	justify-content: center;
}

.category{
	max-width: 750px;
	width: 60%;
	margin: 0 auto;
}

.category img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* .sp-on{
	display:none;
}
.sp-off{
	display: inline;
} */

.philo-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* --------------------------------
section 01 重要なのはデザインではない */
	
.section01{
	position: relative;
	width: 100vw;
	height: 1400px;
	background: url("../img/philo_cloud01.jpg") no-repeat;
	background-position: top right;
	background-size: cover;
}
.quote-item{
	max-width: 960px;
	margin-right: auto;
	margin-left: auto;
	font-weight: 400;
	text-align: center;
	z-index: 99;
}
.quote-text{
	position: absolute;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--quote_l);
	line-height: var(--quote_height_l);
	text-align: center;
}
.quote-description{
	position: absolute;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--quote_s);
	line-height: var(--quote_height_s);
	font-weight: 500;
	text-align: center;
}
.section01 .quote-text{
	position: absolute;
	top: 400px;
	right: 0;
	left: 0;
}
.section01 .quote-description{
	top: 542px;
}
.handlight{
	position: absolute;
	top: 240px;
	right: -160px;
	width: 500px;
}
.handlight-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.light-color{
	position: absolute;
	top: -2%;
	left: 10%;
	width: 230px;
	mix-blend-mode: multiply;
}


/* ------------------------------
section 02 重デザイナーは多重人格？ */

.section02{
	position: relative;
	width: 100vw;
	height: 1200px;
	margin-top: 200px;
}
.philo-cloud02{
	position: absolute;
	top: 50px;
	right: -20px;
}
.philo-twoface{
	position: absolute;
	top:146px;
	left:0;
	right:0;
	max-width: 460px;
	margin-left: auto;
	margin-right: auto;
}
.philo-twoface img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section02 .quote-item{
	position: absolute;
	top:0;
	left:0;
	right:0
}

.section02 .quote-description{
	top: 780px;
}

/* ---------------------------------
section 03 バーチャルではなく体感せよ! */
	
.section03{
	position: relative;
	width: 100vw;
	height: 1200px;
}
.philo-cloud03{
	position: absolute;
	top: -300px;
	left: 0;
}
.philo-divingwoman1{
	position: absolute;
	top: 0px;
	right: 77%;
	max-width: 351px;
	width: 100%;
}
.philo-divingwoman2{
	position: absolute;
	top: 200px;
	right: 79%;
	max-width: 265px;
	width: 100%;
}
.philo-divingwoman1 img,.philo-divingwoman2 img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.capture-prince{
	position: absolute;
	bottom: 250px;
	right: 50px;
	width: 400px;
	z-index: 99;
}

.philo-ufo, .philo-beam,.philo-prince{
	position: absolute;
	width:100%;
}
.capture-prince img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.section03 .quote-item{
	position: absolute;
	top: 350px;
	left:0;
	right:0

}
.section03 .quote-description{
	top: 324px;
}

/* ---------------------------------
section 04 感覚にうったえる、ロジック。 */

.section04{
	position: relative;
	width: 100%;
	aspect-ratio: 3/4;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#d3d3d3, #888);
	background-position: top center;
	background-size: cover;
}
.section04 .quote-item {
	position: relative;
	top: 350px;
	left:0;
	right:0
}
.hokusai{
	position: absolute;
	top: 500px;
	width: 100%;
	aspect-ratio: 720/623;
}


.philo-hokusai,
.philo-goldenratio,
.philo-hokusai-cloud01,
.philo-hokusai-cloud02,
.philo-ghokusai-goldenratio{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.hokusai .quote-description{
	top: 60%;
	max-width: 960px;
}


/* ---------------------------------
section 05  型は美しく、型破りは楽しい。 */

.section05{
	position: relative;
	top: 0;
	width: 100%;
	height: 1000px;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#888, #666);
	background-position: center center;
	background-size: 150%;
}
.section05 .quote-item {
	position: relative;
	top: 100px;
	left:0;
	right:0
}
.white{
	color:white;
}
.cats-wrap{
	position: relative;
	width: 100%;
}
.cats{
	position: absolute;
	top: 50px;
	max-width: 1640px;
	width: 100%;
	aspect-ratio: 2/1;
}


.philo-cats_goldcloud, 
.philo-cat-boarder,
.philo-cat-referee{
	position: absolute;
}
.philo-cats_goldcloud{
	top: 10%;
	left: -11%;
	width: 50%;

}
.philo-cat-boarder{
	top: 0;
	left: 12%;
	width: 12%;
}
.philo-cat-referee{
	top: 30%;
	left: 3%;
	width: 12%;
}
.section05 .quote-description{
	top: 120px;
}


/* ---------------------------------
section 06 柔軟な発想は「なぜ？」から生まれる。 */

.section06{
	position: relative;
	top: 0;
	width: 100%;
	height: 1200px;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#666, #333);
	background-position: center center;
	background-size: 150%;
}
.questions-wrap{
	position: relative;
	width: 100%;
}
.questions{
	position: absolute;
	top: 0px;
	right: 0;
	max-width: 1820px;
	width: 100%;
	aspect-ratio: 3/2;
}
.philo-cloud04,
.philo-rainbow,
.philo-question{
	position: absolute;
	right:0;
}


.philo-cloud04{
	top: -40%;
	width: 95%;
}

.philo-rainbow{
	top:0;
	right:0;
	width: 30%;
}
.philo-question{
	top:0;
	right:0;
	width: 30%;
}
.section06 .quote-text{
	display: block;
	position: absolute;
	top: 18%;
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
	z-index: 99;
}

.section06 .quote-description{
	position: absolute;
	top: 55%;
	z-index: 99;
}

/* ---------------------------------
section 07 解決の糸口は&nbsp;“あたりまえ”の中にある。 */

.section07{
	position: relative;
	top: 0;
	width: 100%;
	aspect-ratio: 5/8;
	max-height: 2200px;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#333, #2b2b2b);
	background-position: center center;
	background-size: 150%;
}

.section07 .quote-item{
	position: absolute;
	max-width: 1300px;
	top:0;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	aspect-ratio: 5/8;
}
.section07 .quote-text{
	top: 31%
}
.section07 .quote-description{
	top: 43%
}

.in2moon{
	position: absolute;
	top: 0;
	left: 0;
	max-width: 1300px;
	width: 100%;
	aspect-ratio: 5/8;
}
.philo-moon{
	position: absolute;
	top: 0;
	width: 80%;
}
.glass{
	position: absolute;
	top: 34%;
	left: -5%;
	right: 0;
	width: 40%;
	aspect-ratio: 50/51;
}
.philo-moon-glass{
	position: absolute;
	top:0;
	width: 100%;
}
.philo-moon-glass-rabbit{
	position: absolute;
	width: 100%;
	mask-image: url("../img/philo_moon_glass_mask.webp");
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: auto 100%;
}

/* ---------------------------------
section 08 答えはひとつだけ、ではない。 */

.section08{
	position: relative;
	top: -1px;
	width: 100%;
	max-height: 900px;
	min-height: 750px;
	aspect-ratio: 6/4;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#2b2b2b, #d3d3d3);
	background-position: center center;
}

.section08 .quote-item{
	position: absolute;
	max-width: 1300px;
	min-height: 750px;
	width: 100%;
	top:0;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 6/4;
}
.section08 .quote-text{
	top: 0;
}
.section08 .quote-description{
	top: 30%
}

.section08 .philo-mmountain-01 {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.section08 .philo-comet{
	position: absolute;
	top: -20%;
	right: 5%;
	width: 20%;
}
/* ---------------------------------
section 09 反転世界 */

.section09{
	position: relative;
	top: -1px;
	width: 100%;
	max-height: 900px;
	min-height: 750px;
	aspect-ratio: 6/4;
	background: url("../img/philo_stardust01.webp"),linear-gradient( #2b2b2b,#d3d3d3);
	background-position: center center;
	transform: scaleY(-1);
}
.section09 .quote-item{
	position: absolute;
	max-width: 1300px;
	min-height: 750px;
	width: 100%;
	top:0;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 6/4;
	opacity: 0.2;
}
.philo-mmountain-02 {
	position: absolute;
	bottom: -1px;
	width: 100%;
}
.section09 .quote-text{
	top: 0;
}
.section09 .quote-description{
	top: 30%
}


/* ---------------------------------
section 10 地球 */

.section10{
	position: relative;
	top: -2px;
	width: 100%;
	aspect-ratio: 1/2;
	max-height: 2400px;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#2b2b2b, #333);
	background-position: center center;
	background-size: 150%;
}
.in2earth-wrap{
	position: relative;
	width: 100%;
	border: 1px solid red;
}
.in2earth{
	position: absolute;
	top: 10%;
	left: 0;
	max-width: 1300px;
	width: 100%;
	aspect-ratio: 5/8;
}
.philo-earth{
	position: absolute;
	top: 0;
	width: 80%;
}

.section10 .philo-comet{
	position: absolute;
	top: 5%;
	right: 5%;
	width: 20%;
	transform: scaleY(-1);
}

/* ---------------------------------
section 11  散らかせば散らかすほど、整理される。 */

.section11{
	position: relative;
	top: -2px;
	width: 100%;
	aspect-ratio: 7/9;
	max-height: 2050px;
	background: url("../img/philo_stardust01.webp"),linear-gradient(#333, #2a2a2a);
	background-position: center center;
	background-size: 50%;
}
.philo-shootingstar {
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 1600px;
	aspect-ratio: 4/5;
	opacity: 0.5;
}

.section11 .quote-item{
	position: absolute;
	max-width: 1300px;
	min-height: 750px;
	width: 100%;
	top:36%;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 6/4;
}

.section11 .quote-text{
	top: 0;
}
.section11 .quote-description{
	top: 30%
}

/* ---------------------------------
section 12  鯨ダイブ */

.section12{
	position: relative;
	top: -4px;
	width: 100%;
	aspect-ratio: 3/5;
	background: linear-gradient(#2a2a2a, #0d0d0d);
	background-size: 100%;
}
.philo-whale-stardust{
	position: absolute;
	top:-100%;
	width: 150%;
	aspect-ratio: 3/5;
}
.philo-whale{
	position: absolute;
	top: -400px;
	left: -40%;
	width: 130%;
}

/* ---------------------------------
section 13 Spacer */

.section13{
	position: relative;
	top: -4px;
	left:0;
	right:0;
	width: 100%;
	height: 500px;
	background: linear-gradient(#0d0d0d, #000);
}

/* ---------------------------------
section 14 目で見てダメなときは閉じてみて。 */

.section14{
	position: relative;
	top: -4px;
	width: 100%;
	max-height: 1100px;
	min-height: 1000px;
	height: 100%;
	background: #000;
	background-repeat: repeat-x;
}

.section14 .quote-item{
	position: absolute;
	max-width: 1300px;
	min-height: 750px;
	width: 100%;
	top:10%;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	aspect-ratio: 6/4;
}

.section14 .quote-text{
	top: 0;
}
.section14 .quote-description{
	top: 50%
}

.philo-eyeball{
	position: absolute;
	top: 20%;
	left:0;
	right:0;
	margin-left: auto;
	margin-right: auto;
	max-width: 400px;
	width: 100%;
	
}

/* ---------------------------------
section 15 戻るボタン */
.section15{
	display: block;
	position: relative;
	top: -4px;
	left:0;
	right:0;
	width: 100%;
	height: 100vh;
	background: #000;
}
.section15 .next-page{
	position: absolute;
	bottom: 50%;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	width: 300px;
}

/* ----------------------
  PC版 1300px 以下
---------------------- */

@media (width <=1300px) {
	.sp-on{
		display: inline;
	}
	.sp-off{
		display: none;
	}
	
	/* -------------------------------------------
	section 01 重要なのはデザインではない (PC <1300) */
	
	.quote-text{
		font-size: var(--quote_l);
	}
	.quote-description{
		font-size: var(--quote_s);
	}
	.section01 .quote-text{
		top: 200px;
	}
	.section01 .quote-description{
		top: 360px;
		line-height: var(--quote_height_s);
	}
	.handlight{
		top: 140px;
		right: -40px;
		width: 380px;
	}
	.light-color{
		top: -1%;
		left: 12%;
		width: 160px;

	}
	
	/* -----------------------------------------
	section 02 重デザイナーは多重人格？ (PC <1300) */
	
	.section02{
		height: 1350px
	}
	.philo-cloud02{
		right: -60px;
	}
	
	/* -------------------------------------------
	section 03 バーチャルではなく体感せよ! (pc <1300) */

	.capture-prince{
		width: 320px;
		bottom: 220px;
	}
	
	/* ---------------------------------
	section 04 感覚にうったえる、ロジック。 (pc <1300)  */
	.section04{
		aspect-ratio: 2/3;
	}
	.hokusai .quote-description{
		top: 55%;
	}
	
	/* ---------------------------------
	section 05  型は美しく、型破りは楽しい。 (pc <1300) */
	.section05{
		height: auto;
		aspect-ratio: 3/2;
	}

	.cats{
		left: -25px
	}
	.section06 .quote-text{
		top: 10%;
	}
	.section06 .quote-description{
		top: 47%;
	}
	
	/* ---------------------------------
	section 07 解決の糸口は&nbsp;“あたりまえ”の中にある。 (pc <1300) */
	.glass{
		top: 37%;
	}
}

/* ----------------------
  PC版 960px 以下
---------------------- */

@media (width <=960px) {
	/* -------------------------------------------
	  section 01 重要なのはデザインではない (pc <960) */
	  
	.handlight{
		top: 180px;
		right: -50px;
		width: 250px;
	}
	.light-color{
		top: -1%;
		left: 12%;
		width: 105px;
	
	}
	
	/* -------------------------------------------
	section 03 バーチャルではなく体感せよ! (pc <960) */
	.philo-divingwoman1{
		top: 0px;
		right: 60%;
		max-width: 300px;
		width: 100%;
	}
	.philo-divingwoman2{
		top: 150px;
		right: 62%;
		max-width: 227px;
		width: 100%;
	}
	.capture-prince{
		width: 260px;
		bottom: 200px;
	}
	/* ---------------------------------
	section 04 感覚にうったえる、ロジック。 (pc <960)  */
	.section04{
		aspect-ratio: 4/7;
	}
	/* ---------------------------------
	section 05  型は美しく、型破りは楽しい。 (pc <960) */
	.section05{
		aspect-ratio: 4/3;
	}
	.cats{
		top:-40px;
		left: -25px
	}
	
	/* ---------------------------------
	section 06 柔軟な発想は「なぜ？」から生まれる。(pc <960) */
	.section06{
		height: 900px;
	}
	.section06 .quote-text{
		top: 12%;
	}
	.section06 .quote-description{
		top: 38%;
	}
	
	/* ---------------------------------
	section 08 答えはひとつだけ、ではない。(pc <960) */
	.section08{
		/* min-height: 700px; */
		aspect-ratio: 6/5;
	}

	
	/* ---------------------------------
	section 09 反転世界 (pc <960) */
	.section09{
		/* min-height: 700px; */
		aspect-ratio: 6/5;
	}
	.section09 .quote-item{
	}

}


/* -------------------
  iPhone Setting
------------------- */
@media (min-width: 320px)
and (max-width: 767px) {
	
	/* ----------------------------------------
	section 01 重要なのはデザインではない (iPhone) */
	.section01{
		height: 600px;
	}
	.section01 .quote-text{
		top: 150px;
	}
	.section01 .quote-description{
		top: 240px;
		line-height: var(--quote_height_s);
	}

	.handlight{
		top: 30px;
		right: -30px;
		width: 150px;
	}
	.light-color{
		top: -1%;
		left: 12%;
		width: 63px;
	}
	/* --------------------------------------
	section 02 重デザイナーは多重人格？ (iPhone) */
	
	.section02{
		margin-top: 300px;
		height: 950px;
	}
	.philo-twoface{
		top: 76px;
		max-width: 250px;
	}
	.philo-cloud02{
		top: -100px;
		right: 50px;
		width: 200px;
	}
	.section02 .quote-description{
		top: 500px;
	}
	
	/* -------------------------------------------
	section 03 バーチャルではなく体感せよ! (iPhone) */
	
	.capture-prince{
		width: 170px;
		right: -50px;
		bottom: 280px;
	}
	
	/* ---------------------------------
	section 04 感覚にうったえる、ロジック。 (iPhone)  */
	.section04{
		height: 1200px;
	}
	
	/* ---------------------------------
	section 05  型は美しく、型破りは楽しい。 (iPhone) */
	.section05{
		aspect-ratio: auto;
		height: 600px;
	}
	.cats{
		top: -40px;
		left: 10px;
		width: 110%;
	}
	.section05 .quote-item{
		position: absolute;
		top:25%;
	}
	.section05 .quote-description{
		top: 60px;
	}
	
	/* ---------------------------------
	section 06 柔軟な発想は「なぜ？」から生まれる。 (iPhone) */
	.section06{
		height: 700px
	}
	.philo-cloud04{
		width: 100%;
	}
	.section06 .quote-text{
		top:10%;
	}
	.section06 .quote-description{
		top: 40%;
	}
	
	
	/* ---------------------------------
	section 07 解決の糸口は&nbsp;“あたりまえ”の中にある。 (iPhone)  */
	.section07{
		aspect-ratio: 5/10;
	}
	.section07 .quote-text{
		top: 25%
	}
	.section07 .quote-description{
		top: 70%
	}
	.glass{
		top: 40%;
		width: 60%;
	}
	/* ---------------------------------
	section 08 答えはひとつだけ、ではない。(iPhone)  */
	.section08{
		max-height: 700px;
		min-height: auto;
		aspect-ratio: 2/3;
	}
	.section08 .quote-item{
		max-height: 700px;
		width: 100%;
		aspect-ratio: auto;
		top: 100px;
	}
	.section08 .quote-description{
		top: 20%
	}
	.section08 .philo-comet{
		position: absolute;
		top: 0;
		right: 5%;
		width: 20%;
	}
	
	/* ---------------------------------
	section 09 反転世界 (iPhone)  */
	.section09{
		max-height: 700px;
		aspect-ratio: 2/3;
	}
	.section09 .quote-item{
		max-height: 700px;
		aspect-ratio: auto;
		top: 100px;
	}
	.section09 .quote-description{
		top: 20%
	}

	
	/* ---------------------------------
	section 11  散らかせば散らかすほど、整理される。 (iPhone) */
	.section11{
		aspect-ratio: 1/2;
	}
	.philo-shootingstar {
		width: 140%;
		opacity: 0.4;
	}
	.section11 .quote-item{
		top: 20%;
		aspect-ratio: auto;
	}
	.section11 .quote-description{
		top: 27%;
	}
	
	/* ---------------------------------
	section 12  鯨ダイブ (iPhone)*/
	.section12{
		aspect-ratio: 2/3;
	}
	.philo-whale-stardust{
		position: absolute;
		top:-100%;
		width: 150%;
		aspect-ratio: 2/3;
	}
	.philo-whale{
		position: absolute;
		top: -100px;
		left: -60%;
		width: 150%;
	}
	
	/* ---------------------------------
	section 13 Spacer (iPhone) */
	.section13{
		top: -5px;
		height: 400px;
	}
	
	/* ---------------------------------
	section 14 目で見てダメなときは閉じてみて。 (iPhone)*/
	.section14{
		top: -6px;
		max-width: 1000px;
		min-height: 700px;
	}
	.section14 .quote-item{
		aspect-ratio: auto;
	}
	.section14 .quote-description{
		top: 30%;
	}
	.philo-eyeball{
		top: 12%;
		max-width: 200px;
	}
	
	/* ---------------------------------
	section 15 戻るボタン */
	.section15{
		top:-5px;
	}
}