@charset "shift_jis";
/* CSS Document */

/* ==================================================

   SimpleStyle NEW コンセプト

================================================== */

/* コンテンツ幅リセット */
main#wrapper {
	position: relative;
	width: 100%!important;
	max-width: initial!important;
	max-width: auto!important;
	margin: 0 auto!important;
	padding: 0!important;
	overflow: visible!important;
}
article#contents { padding-bottom: 0!important; }
article#contents .inner_content { padding-top: 0!important; }

/* ヘッダー帯削除 */
.header_banner { display: none!important; }

:root {
	--main-clr-lightgray: #c9c9c8;
	--main-clr-lightbeige: #cbc1ae;

	--main-clr-white: #f4f5f0;
	--main-clr-gray: #7f7c7a;
	--main-clr-red: #d07157;

	--clr-ss-black: #48413b;
	
	--clr-cpn-red: #d09786;
	--clr-cpn-blue: #aab1b3;
}

body *, body {
	/* fonts */
	font-family:	"Avenir Next", /* macOS, iOS*/
					"Arial",  /* windows, macOS */
					"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  /* macOS, iOS*/
					"游ゴシック", "Yu Gothic", /* windows8.1以降 */
					"メイリオ", Meiryo,  /* windows8.1以前 */
					sans-serif !important;
	font-weight: 500;
}

#concept a,
#concept a:hover {
	color: var(--clr-ss-black);
	text-decoration: none;
	transition: all 0.2s;
}
#concept * { box-sizing: border-box; }
#concept h1,
#concept h2,
#concept h3,
#concept h4,
#concept h5 { color: var(--clr-ss-black);}
#concept img { width: 100%; height: auto; }
#concept .pc_none { display: none; }

#concept {
	position: relative;
	width: 100%;

	/* fonts */
	font-family:	"Avenir Next", /* macOS, iOS*/
					"Arial",  /* windows, macOS */
					"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  /* macOS, iOS*/
					"游ゴシック", "Yu Gothic", /* windows8.1以降 */
					"メイリオ", Meiryo,  /* windows8.1以前 */
					sans-serif;
	color: var(--clr-ss-black);
	font-weight: 500;
}


/* ==================================================
   メインコンテンツエリア
================================================== */

#concept .section,
#concept .section_visual {
	position: relative;
	width: 100%;
}

#concept .section_visual > .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}


/* オープニング
================================================== */
#concept .section#opening {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255,255,255,1.0);
	text-align:center;
}
#concept .section#opening > h1 {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 32px;
	letter-spacing: 0.1em;
}
#concept .section#opening > h1 img {
	width: 25%;
}
/* #concept .section#opening > h1 > video {
	width: 30%;
	filter: drop-shadow(0px 0px rgba(0,0,0,0));
	outline: none;
	border: none;
} */


/* もわわんと表示 */
.fadeIn {
	animation-name: fadeInAnime;
	animation-duration: 1.5s;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes fadeInAnime{
	from { opacity: 0; }
	to { opacity: 1; }
}

#scroll-down {
	display: block;
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 49px;
	text-align: center;
}
.arrow-down {
	display: block;
	margin: 0 auto;
	width: 10px;
	height: 20px;
}
.arrow-down:after {
	content: '';
	display: block;
	margin: 0;
	padding: 0;
	width: 8px;
	height: 8px;
	border-top: 2px solid var(--main-clr-gray);
	border-right: 2px solid var(--main-clr-gray);
	transform: rotate(135deg);
}
#scroll-title {
	display: block;
	text-transform: uppercase;
	color: var(--main-clr-gray);
	font-size: 10px;
	letter-spacing: 0.1em;
}
#scroll-down::before {
	animation: elasticus 2s cubic-bezier(1, 0, 0, 1) infinite;
	position: absolute;
	top: 0px;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 60px;
	background: var(--main-clr-gray);
	content: '';
}
@keyframes elasticus {
	0% {
		transform-origin: 0% 0%;
		transform: scale(1, 0);
	}
	50% {
		transform-origin: 0% 0%;
		transform: scale(1, 1);
	}
	50.1% {
		transform-origin: 0% 100%;
		transform: scale(1, 1);
	}
	100% {
		transform-origin: 0% 100%;
		transform: scale(1, 0);
	}
}


/* 概要
================================================== */

#concept .section#about {
	/* background-color: var(--main-clr-white); */
	background-color: #efefef;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 75vh;
}
#concept .section#about > .inner {
	position: relative;
	max-width: 1000px;
	text-align: center;
	padding: 0;
}
#concept .section#about > .inner h2 {
	position: relative;
	color: var(--main-clr-red);
	font-size: 28px;
	font-weight: 500;
	letter-spacing: 0.1em;
	margin-bottom: 4em;
	display: flex;
    align-items: center;
}
#concept .section#about > .inner h2::before,
#concept .section#about > .inner h2::after {
    content: "";
	width: 40px;
    height: 1px;
    flex-grow: 1;
    background-color: var(--main-clr-gray);
}
#concept .section#about > .inner h2::before { margin-right: 1em; }
#concept .section#about > .inner h2::after { margin-left: 1em; }

/* もわわんと表示 */
.fadeIn02 { opacity: 0; }
.fadeIn02.is-animated {
	animation-name: fadeInAnime2;
	animation-duration: 1.5s;
	animation-delay: 0.5s;
	animation-fill-mode:forwards;
}
@keyframes fadeInAnime2 {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* #concept .section#about > .inner > h2.newlogo {
	position: relative;
	width: 50%;
	margin: 0 auto 24px;
	padding: 5% 7.5%;
}
#concept .section#about > .inner > h2.newlogo img {
	width: 100%;
	height: auto;
}
#concept .section#about > .inner > h2.newlogo_movie {
	position: relative;
	width: 40%;
	margin: 0 auto;
} */


#concept .section#about > .inner p {
	font-size: 20px;
	line-height: 2;
}

#concept .section#about > .inner dl {
	position: relative;
	width: 32%;
	margin: 24px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
#concept .section#about > .inner dl > dt,
#concept .section#about > .inner dl > dd {
	width: 50%;
	font-size: 20px;
	line-height: 2;
}
#concept .section#about > .inner dl > dt {
	color: var(--main-clr-red);
	text-align: left;
}
#concept .section#about > .inner dl > dd {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
#concept .section#about > .inner dl > dd::before,
#concept .section#about > .inner dl > dd::after {
	display: inline-block;
	content: "";
	width: 6px;
	height: 1px;
	background-color: var(--clr-ss-black);
}
#concept .section#about > .inner dl > dd::before { margin-right: 3px; }
#concept .section#about > .inner dl > dd::after { margin-left: 3px; }


/* # xxxx Performance
================================================== */

#concept .section_visual {
	position: relative;
	width: 100%;
}
#concept .section_visual .inner {
	display: flex;
	/* flex-direction: column; */
	justify-content: space-between;
	align-items: center;
	max-width: 1000px;
	margin: 0 auto;
	height: 70vh;
}
#concept .section_visual .visual,
#concept .section_visual .text {
	position: relative;
	width: 100%;
}

#concept .section_visual .visual > h2 {
	position: absolute;
	top: 10%;
	z-index: 2;
}
#concept .section_visual .visual > h2 > span {
	position: relative;
	left: 2%;
	font-size: 28px;
	letter-spacing: 0.05em;
	/* line-height: 1; */
}
#concept .section_visual .visual > h2::after {
	position: absolute;
	z-index: -1;
	display: inline-block;
	content: "";
	width: 106%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.5);
}

#concept .section_visual .text {
	position: relative;
	width: 100%;
	padding: 0 0 0 40px;
	text-align: right;
	box-sizing: border-box;
}
#concept .section_visual .text > h3 {
	position: relative;
	display: flex;
	align-items: center;
	white-space: nowrap;
	margin-bottom: 1.5em;
	text-align: right;
}
#concept .section_visual .text > h3 > span {
	position: relative;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.1em;
	white-space: nowrap;
	padding: 0 0.5em;
}
#concept .section_visual .text > h3 > span::before,
#concept .section_visual .text > h3 > span::after {
	position: absolute;
	display: inline-block;
	content: "";
	width: 6px;
	height: 80%;
}
#concept .section_visual .text > h3 > span::before {
	top: 0;
	left: 0;
	border-top: solid 1px var(--clr-ss-black);
	border-left: solid 1px var(--clr-ss-black);
}
#concept .section_visual .text > h3 > span::after {
	right: 0;
	bottom: 0;
	border-right: solid 1px var(--clr-ss-black);
	border-bottom: solid 1px var(--clr-ss-black);
}

#concept .section_visual .text > h3::before {
	display: inline-block;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--clr-ss-black);
	margin-right: 1.5em;
}

#concept .section_visual .text > p {
	font-size: 18px;
	line-height: 2.5;
}

/* タイパのみテキスト部分左右逆 */
#concept .section_visual#time .inner {
	flex-direction: row-reverse;
}
#concept .section_visual#time .text {
	padding: 0 40px 0 0;
}
#concept .section_visual#time .text > h3::before { display: none; }
#concept .section_visual#time .text > h3::after {
	display: inline-block;
	content: "";
	width: 100%;
	height: 1px;
	background-color: var(--clr-ss-black);
	margin-left: 1em;
}
#concept .section_visual#time .text > p {
	text-align: left;
}



/* アニメーション */
#concept .section_visual .visual > img {
	opacity: 0;
}
#concept .section_visual .visual > img.is-animated {
	animation-name: fadeIn-v;
	animation-duration: 1s;
	animation-delay: 0;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes fadeIn-v {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#concept .section_visual .visual > h2 span {
	opacity: 0;
}
#concept .section_visual .visual > h2 span.is-animated {
	animation-name: slide-h2;
	animation-duration: 1s;
	animation-delay: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slide-h2 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#concept .section_visual .visual > h2::after {
	opacity: 0;
	transform: scale(0,1);
	transform-origin: left center;
}
#concept .section_visual#time .visual > h2::after {
	transform-origin: right center;
}
#concept .section_visual .visual > h2.is-animated::after {
	animation-name: slide-h2-after;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slide-h2-after {
	50% { opacity: 0; }
	100% { opacity: 1; }

	0% { transform: scale(0,1); }
	100% { transform: scale(1,1); }
}


#concept .section_visual .text > h3 {
	opacity: 0;
}
#concept .section_visual .text > h3.is-animated {
	animation-name: slide-h3;
	animation-duration: 1s;
	/* animation-delay: 1s; */
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slide-h3 {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

#concept .section_visual .text > h3::before {
	opacity: 0;
	transform: scale(0,1);
	transform-origin: right center;
}
#concept .section_visual#time .text > h3::after {
	opacity: 0;
	transform: scale(0,1);
	transform-origin: left center;
}
#concept .section_visual .text > h3.is-animated::before {
	animation-name: slide-h3-line;
	animation-duration: 1s;
	/* animation-delay: 1s; */
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
#concept .section_visual#time .text > h3.is-animated::before { display: none; }
#concept .section_visual#time .text > h3.is-animated::after {
	animation-name: slide-h3-line;
	animation-duration: 1s;
	/* animation-delay: 1s; */
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slide-h3-line {
	50% { opacity: 0; }
	100% { opacity: 1; }

	0% { transform: scale(0,1); }
	100% { transform: scale(1,1); }
}


#concept .section_visual .text > p {
	opacity: 0;
}
#concept .section_visual .text > p.is-animated {
	animation-name: slide-p;
	animation-duration: 1s;
	/* animation-delay: 2s; */
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
@keyframes slide-p {
	0% { opacity: 0; }
	100% { opacity: 1; }
}




/* top
================================================== */

#concept .section#top {
	/* background-color: var(--main-clr-white); */
	background-color: #efefef;
}
#concept .section#top > .inner {
	position: relative;
	max-width: 1000px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	/* padding: 48px 16px; */
	height: 50vh;
	margin: 0 auto;
}
#concept .section#top > .inner > h2 {
	font-size: 20px;
	line-height: 2;
}

#concept .section#top > .inner > .btn {
	position: relative;
	width: 100%;
	margin: 24px auto 0;
}
#concept .section#top > .inner > .btn > a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 300px;
	color: #fff;
	font-size: 18px;
	line-height: 1;
	background-color: var(--main-clr-lightbeige);
	border: solid 1px var(--main-clr-lightbeige);
	margin: 0 auto;
	padding: 1em 0.5em;
	border-radius: 80px;
}
#concept .section#top > .inner > .btn > a::after {
	position: absolute;
	top: calc(50% - 3px);
	right: 8%;
	display: inline-block;
	content: "";
	width: 6px;
	height: 6px;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	transition: all 0.2s;
}

#concept .section#top > .inner > .btn > a:hover {
	color: var(--main-clr-lightbeige);
	background-color: #fff;
}
#concept .section#top > .inner > .btn > a:hover::after {
	right: 6%;
	border-color: var(--main-clr-lightbeige);
	transition: all 0.2s;
}




/* 汎用アニメーション
================================================== */

/* フェードイン */
.fadein { opacity: 0; }
.fadein.is-animated {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}