@charset "utf-8";
/* CSS Document */
/*コンセプト*/
.concept{
	position: relative;
	overflow-x: hidden;
	}

/********/
/*コンセプトヘッダ*/
.c_hd{
	padding-top: 64px;/*header*/
	background: 
		url("../img/p7tone_s.png"),
		url("../img_concept/c_hdMV.png"),
		linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(245, 245, 247, 1));
	background-repeat: repeat,no-repeat,no-repeat;
	background-position:center, center top,center;
	background-size: 30px 30px, 100% ,cover;
	height: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	}
.c_hd>div{
	width: 50%;
	height: 50vw;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	}
.c_hd h1{
	margin: 0 auto;
	font-weight: 900;
	font-size: 4.6vw;
	letter-spacing: 1px;
	display: table;
	text-align: center;
	text-shadow: 1px 1px 2px #FFF, -1px 1px 2px #FFF, -1px -1px 2px #FFF, 1px -1px 2px #FFF;
	}
.c_hd h1 i{
	display: block;
	font-weight: 300;
	font-size: 0.5em;
	margin-top: 0.62em;
	}
.c_hd h1 span {
	display: block;
	line-height: 1.62;
	}
.c_hd h1 span::after {
	display: block;
	content: "";
	background-color: #e72e2e;
	height: 0.2em;
	}
.c_hd nav{}
	@media screen and (min-width: 640px) {
		.c_hd{
			height:56.25vw;
			background-size: 30px 30px, 56% ,cover;
			background-position:center, bottom -2vw left calc(50% - 28.6vw),center;
			flex-direction: row;
			align-items: center;
			}
		.c_hd>div{
			width: 42.26%;
			height: auto;
			}
		.c_hd h1{
			font-size: 1.5rem;
			}
		.c_hd nav{
			width: 57.73%;
			}
		}
	@media screen and (min-width: 768px) {
		.c_hd{
			height: 436px;/*ここから固定*/
			background-size: 30px 30px, 494px auto ,cover;
			background-position:center, bottom -56px left calc(50% - 28.6vw),center;
			}
		.c_hd>div{
			margin: 0;
			}
		}
	@media screen and (min-width: 1024px) {
		.c_hd{
			background-position:center, bottom -56px left calc(50% - 293px),center;
			}
		.c_hd>div{
			width: 432px;
			}
		.c_hd nav{
			width: 592px;
			}
		}


/*◯◯◯*/
.c_hd ul{
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;
	}
.c_hd a{
	margin: 0 0.25em;
	display: flex;
	align-items: center;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	font-size: 4.8vw;
	width: 4.32em;
	height: 4.32em;
	border: 2px solid #e72e2e;
	border-radius: 50%;
	line-height: 1;
	background-color: rgba(255,255,255,0.5);
	color: #e72e2e;
	}
.c_hd a span{
	font-weight: 600;
	font-size: .575em;
	margin-top: .4em;
	}
.c_hd a b{
	font-weight: 800;
	font-size: 1em;
	}
.c_hd a::after{
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 0.2em solid transparent;
	border-left: 0.2em solid transparent;
	border-top: 0.2em solid #e72e2e;
	border-bottom: 0;
	margin-top: 0.4em;
	}
.c_hd a:hover{
	color: #fff;
	border-color: #e72e2e;
	background-color: #e72e2e;
	}
.c_hd a:hover::after{
	border-top-color: #fff;
	}
	@media screen and (min-width: 640px) {
		.c_hd a{
			font-size: 3.8vw;
			margin: 0 0.25em 0 0;
			}
		}
	@media screen and (min-width: 768px) {
		.c_hd a{
			font-size: 30px;
			}
		}
	@media screen and (min-width: 1024px) {
		.c_hd a{
			margin: 0 0.5em 0 0;
			}
		}

/*ページ内リンク位置調整*/
.target{
	display: block;
	padding-top: 64px;
	margin-top: -64px;
	}
#tokuten_a.target{
	padding-top: 128px;
	margin-top: -128px;
	}	

/********/
.concept section{
	padding: 0;
	position: relative;
	}
.concept .inner{
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	height: auto;
	position: relative;
	}
.concept h3{}
.concept h3 span{display: none;}
.concept .inner .hrNNN{
	position: absolute;
	top:0;
	}
.c_txt{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
.concept p{
	word-break: keep-all;
	overflow-wrap: break-word;
	font-size: 16px;
	letter-spacing: 0.05em;
	line-height: 2;
	font-weight: 500;
	margin: 8vw auto;
	padding: 0 1em;
	}
	@media screen and (min-width: 640px) {
		.concept p{
			font-size: 20px;
			}
		}
	@media screen and (min-width: 768px) {
		.concept .inner{
			/*aspect-ratio: 100 / 70.72;*/
			height: 70.72vw;
			}
		}
	@media screen and (min-width: 1024px) {
		.concept p{
			font-size: 22px;
			}
		}
	@media screen and (min-width: 1440px) {
		.concept .inner{
			/*aspect-ratio: 16 / 9;*/
			height: 810px;
			position: relative;
			}
		.c_txt{
			width: 630px;
			height: 100%;
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column
			}
		.concept p{
			margin: 0;
			font-size: 24px;
			line-height: 2.4;
			}
		}
.imgBox{width: 100%;}
.imgBox img{vertical-align: bottom;}
/**************/
#birei{
	background-color: #eceff1;
	/*transform:translate3d(0,0,0);アニメ対策*/
	}
/*birei_1*/
.concept .inner.birei_1{}
.birei_1 .imgBox{
	height: 100vw;
	position: absolute;
	top: 0;
	left: 2vw;
	}
.birei_1 .imgBox img{
	position: absolute;
	bottom: 0;
	}
.concept #birei h3{
	background-image: url("../img_concept/h3_birei_.png");
	width: 50%;
	height: 100vw;
	background-position: top 0 left 6vw;
	background-repeat: no-repeat;
	background-size: auto 100%;
	}
.birei_1.c_bgNNN{
	background-image: url("../img/cNNN_white.png");
	background-position: top 54vw left calc(50% + 54vw);
	}
.birei_1 .c_txt{
	width: auto;
	height: auto;
	position: relative;
	}
.birei_1 p{
	display: table;
	text-align: center;
	margin-bottom: 4vw;
	}
	@media screen and (min-width: 768px) {
		.concept .inner.birei_1{
			height: 70.72vw;
			}
		.birei_1 .imgBox{
			width: 70.72vw;
			height: 70.72vw;
			position: absolute;
			top:auto;
			bottom: 0;
			}
		.concept #birei h3{
			width: 70.72vw;
			height: 70.72vw;
			max-width: 752px;
			max-height: 752px;
			background-position: top 0 left 0;
			background-size: auto 100%;
			position: absolute;
			bottom: 0;
			left: 5.5vw;
			}
		.birei_1.c_bgNNN{
			background-position: bottom 0 left -96%;
			background-size: auto 30vw;
			}
		.birei_1 .c_txt{
			width: 43.75vw;
			height: 100%;
			position: absolute;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column
			}
		.birei_1 p{
			display: table;
			text-align: center;
			margin: 0;
			text-shadow: 1px 1px 2px #eceff1, -1px 1px 2px #eceff1, -1px -1px 2px #eceff1, 1px -1px 2px #eceff1;
			}
		}
	@media screen and (min-width: 1440px) {
		.concept .inner.birei_1{
			height: calc(810px - 58px);
			}
		.birei_1 .imgBox{
			width: 752px;
			height: 752px;
			position: absolute;
			top:auto;
			bottom: 0;
			left: calc(50% - 572px);
			}
		.concept #birei h3{
			width: 752px;
			height: 752px;
			background-position: top 0 left 0;
			background-size: auto 100%;
			position: absolute;
			bottom: 0;
			left: calc(50% - 572px);
			}
		.birei_1.c_bgNNN{
			background-position: bottom 0 left calc(50% + 346px);
			background-repeat: no-repeat;
			background-size: auto 374px;
			}
		.birei_1 .c_txt{
			width: 630px;
			height: 100%;
			position: absolute;
			right: calc(50% - 720px);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column
			}
		.birei_1 .c_txt p{
			display: table;
			text-align: center;
			margin-bottom: 0;
			}
	}

/*birei_2*/
.concept .inner.birei_2{
	height: auto;
	}
.birei_2imgs{
	position: relative;
	height: 100vw;
	}
.imgBox.c_busouL{
	position: absolute;
	bottom: 0;
	left: -22vw;
	}
.imgBox.c_busouR{
	position: absolute;
	top:0;
	left: 26vw;
	}
.birei_2 .c_txt{
	position: relative;
	right: auto;
	width: 100%;
	margin: 0 auto;
	}
.birei_2 p{
	text-align: center;
	}
.birei_2.c_bgNNN{
	background-image: url("../img/cNNN_white.png");
	background-position: center;
	background-position: top calc(100vw - 46vw) center;
	}
	@media screen and (min-width: 768px) {
		.concept .inner.birei_2{
			height:calc(70.72vw - 5.5vw);
			}
		.imgBox.c_busouL{
			width: calc(70.72vw - 5.5vw);
			height: calc(70.72vw - 5.5vw);
			position: absolute;
			bottom: auto;
			top:0;
			left: -20vw;
			}
		.imgBox.c_busouR{
			width: calc(70.72vw - 5.5vw);
			height: calc(70.72vw - 5.5vw);
			height: auto;
			position: absolute;
			bottom: auto;
			top:0;
			left: 57vw;
			}
		.birei_2 .c_txt{
			position: absolute;
			top:0;
			right: auto;
			left: 32%;;
			width: 36%;
			height: 100%;
			}
		.birei_2 p{
			text-shadow: 1px 1px 2px #eceff1, -1px 1px 2px #eceff1, -1px -1px 2px #eceff1, 1px -1px 2px #eceff1;
			}
		.birei_2.c_bgNNN{
			background-position: center;
			}
		}
	@media screen and (min-width: 1024px) {
		.imgBox.c_busouR{
			left: 53vw;
			}
		}
	@media screen and (min-width: 1440px) {
		.concept .inner.birei_2{
			height: calc(810px - 80px + 58px);
			}
		.imgBox.c_busouL{
			width: 788px;
			height: 788px;
			position: absolute;
			bottom: auto;
			top:0;
			left: calc(50% - 880px);
			}
		.imgBox.c_busouR{
			width: 788px;
			height: 788px;
			height: auto;
			position: absolute;
			bottom: auto;
			top:0;
			left: calc(50% + 90px);
			}
		.birei_2 .c_txt{
			position: absolute;
			top:0;
			right: auto;
			left: calc(50% - 300px);
			width: 600px;
			margin: 0 auto;
			}
		.birei_2.c_bgNNN{
			background-position: center;
			}
		}


#oshi{
	background-color: #e72e2e;
	/*transform:translate3d(0,0,0);*//*アニメ対策*/
	}
/*oshi_1*/
.concept .inner.oshi_1{
	position: relative;
	}
.concept .inner.oshi_1.c_bgNNN{
	background-image: url("../img/cNNN_red.png");
	background-position: top 54vw right calc(50% + 54vw);
	}
.oshi_1 .imgBox{
	width: 100vw;
	height: 100vw;
	position: absolute;
	top: 0;
	left: 19%;
	overflow: hidden;
	}
.oshi_1 .c_txt{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 100vw;
	}
.concept #oshi h3{
	background-image: url("../img_concept/h3_oshi_sp_.png");
	width: 50%;
	height: 100vw;/**/
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	position: absolute;
	top:0;
	left: 0;
	}
.oshi_1 p{
	color: #fff;
	text-align:center;
	width: 100%;
	padding: 0 4vw;
	}
	@media screen and (min-width: 768px) {
		.concept .inner.oshi_1{
			height:calc(70.72vw + 5.5vw);
			}
		.concept .inner.oshi_1.c_bgNNN{
			background-position: bottom 0 left 124%;
			}
		.oshi_1 .imgBox{
			width: calc(70.72vw + 5.5vw);
			height: auto;
			position: absolute;
			bottom: 0;
			left: 40%;
			}
		.oshi_1 .c_txt{
			width: 45%;
			height: calc(70.72vw + 5.5vw);
			position: absolute;
			right: inherit;
			left: 5.5vw;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			padding: 0;
			}
		.concept #oshi h3{
			position: relative;
			top:auto;
			left: auto;
			background-image: url("../img_concept/h3_oshi_pc_.png");
			width: 100%;
			height: 14.19vw;
			max-height: 155px;
			background-position: top left;
			background-repeat: no-repeat;
			background-size: auto 100%;
			margin-bottom: 5.5vw;
			}
		.oshi_1 p{
			margin: 0;
			padding: 0;
			text-align:left;
			width: 100%;
			}
		}
	@media screen and (min-width: 1440px) {
		.concept .inner.oshi_1{
			height: calc(810px + 80px);
			}
		.concept .inner.oshi_1.c_bgNNN{
			background-position: bottom 0 left calc(50% - 346px);
			}
		.oshi_1 .imgBox{
			width: 888px;
			left: calc(50% - 114px);
			}
		.oshi_1 .c_txt{
			width: 480px;
			height: 810px;
			left: calc(50% - 570px);
			}
		.concept #oshi h3{
			height: 155px;
			margin-bottom: 80px;
			}
		.oshi_1 p{}
		}

/*oshi_2*/
.concept .inner.oshi_2{
	position: relative;
	}
.concept .inner.oshi_2.c_bgNNN{
	background-image: url("../img/cNNN_red.png");
	background-position: top 36vw left calc(50% + 54vw);
	}
.concept .inner.oshi_2 .hrNNN{
	bottom: 0;
	top:auto;
	}
.oshi_2 .c_txt{}
.oshi_2 .c_txt p{
	color: #fff;
	text-align: center;
	margin-top: 8vw;
	margin-bottom: 18vw;
	}
.oshi_2 .imgBox{
	width: 100%;
	position: relative;
	}
	@media screen and (min-width: 768px) {
		.concept .inner.oshi_2{
			height:calc(70.72vw);
			}
		.concept .inner.oshi_2.c_bgNNN{
			background-position: center left -96%;
			}
		.concept .inner.oshi_2 .hrNNN{
			bottom: 0;
			top:auto;
			}
		.oshi_2 .c_txt{
			width: 46vw;
			height: calc(70.72vw - 5.5vw);
			position: absolute;
			bottom: auto;
			top:0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: flex-end;
			flex-direction: column;
			}
		.oshi_2 .c_txt p{
			text-align:left;
			width: 100%;
			margin-top: 0;
			margin-bottom: 0;
			padding: 0 5.5vw 0 0;
			}
		.oshi_2 .imgBox{
			width: 70.72vw;
			height: 70.72vw;
			position: absolute;
			bottom: 0;
			left: -8vw;
			}
		}
	@media screen and (min-width: 1440px) {
		.concept .inner.oshi_2{
			height: calc(810px + 80px);
			}
		.concept .inner.oshi_2.c_bgNNN{
			background-position: bottom 300px left calc(50% + 346px);
			}
		.concept .inner.oshi_2 .hrNNN{
			bottom: 0;
			top:auto;
			}
		.oshi_2 .c_txt{
			width: 630px;
			height: calc(810px);
			position: absolute;
			bottom: auto;
			top:0;
			right: calc(50% - 570px);
			display: flex;
			justify-content: center;
			align-items: flex-end;
			flex-direction: column;
			}
		.oshi_2 .c_txt p{
			text-align:left;
			width: 480px;
			margin-bottom: 0;
			padding: 0;
			}
		.oshi_2 .imgBox{
			width: calc(810px + 80px);
			height: calc(810px + 80px);
			position: absolute;
			bottom: 0;
			left: calc(50% - 720px);
			}
		}


/*tokuten*/
#tokuten{
	/*transform:translate3d(0,0,0);*//*アニメ対策*/
	}
.concept .inner.tokuten_1{
	height: auto;
	padding-top: 8vw;
	}
.concept #tokuten h3{
	background-image: url("../img_concept/h3_tokuten_.png");
	width: 100%;
	height: 18vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	margin: 0 auto 8vw;
	}
.tokuten_1 p{
	text-align: center;
	}
.tokuten_2 p{
	text-align: center;
	margin: 5.5vw auto;
	text-shadow: 1px 1px 2px #FFF, -1px 1px 2px #FFF, -1px -1px 2px #FFF, 1px -1px 2px #FFF;
	}
.tokuten_2 .imgBox{
	width: 100%;
	margin: 0 auto -11vw;
	}
.tokuten_2.c_bgNNN{
	background-image: url("../img/cNNN_gray.png");
	background-position: center;
	}
	@media screen and (min-width: 768px) {
		.concept .inner.tokuten_1{
			height: auto;
			padding-top: 5.5vw;
			}
		.concept #tokuten h3{
			width: 100%;
			height: 14.19vw;
			max-height: 156px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			margin: 0 auto 5.5vw;
			}
		.tokuten_1 p{
			margin: 5.5vw auto;
			}
		.concept .inner.tokuten_2{
			height: auto;
			padding: 5.5vw 0;
			}
		.tokuten_2 p{
			margin: 0 auto;
			}
		.tokuten_2 .imgBox{
			width: 70.72vw;
			margin: 0 auto -5.5vw;
			}
		.tokuten_2.c_bgNNN{
			background-position: center;
			}
		}
	@media screen and (min-width: 1440px) {
		#tokuten{
			/*transform:translate3d(0,0,0);*//*アニメ対策消すな*/
			}
		.concept .inner.tokuten_1{
			height: calc(810px - 80px);
			padding-top: 80px;
			}
		.concept #tokuten h3{
			width: 100%;
			height: 156px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: auto 100%;
			margin: 0 auto 80px;
			}
		.concept .inner.tokuten_2{
			height: auto;
			padding: 80px 0 0;
			}
		.tokuten_1 p{
			margin: 40px auto;
			}
		.tokuten_2 p{
			margin:0 auto 40px;
			}
		.tokuten_2 .imgBox{
			width: 640px;
			margin: 0 auto -16px;
			}
		.tokuten_2.c_bgNNN{
			background-position: center;
			}
		}


/*横スクロールアニメ*/
@keyframes infinity-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}
.scroll-infinity{
	margin: 0;
	}
.scroll-infinity__wrap {
	display: flex;
	overflow: hidden;
	margin: 0 auto;
	}
.scroll-infinity__list {
	display: flex;
	list-style: none;
	padding: 0
	}
.scroll-infinity__list--left {
	animation: infinity-scroll-left 60s infinite linear 0.5s both;
	}
.scroll-infinity__item {
	width: calc(100vw / 1);
	}
.scroll-infinity__item > img {
	width: 100%;
	}
	@media screen and (min-width: 1440px) {
		.scroll-infinity{
			margin: 0;
			}
		.scroll-infinity__item {
			/*width: calc(100vw / 2);*/
			width:920px;
			}
		}