@charset "utf-8";

.sp_only {
	display: none;
}
h2 {
	color: var(--color_an);
	font-size: 2.4rem;
	letter-spacing: 0.1rem;
	text-indent: 0;
}
.box .text{
	margin-top: 50px;
	line-height: 2.5;
	font-feature-settings: "pkna";
    letter-spacing: 0.05rem;
}
.image_flex{
	display: flex;
	justify-content: space-between;
	align-items: start;
}
.caption{
	margin-top: 10px;
	line-height: 1.5;
}
.bg{
	background-color: var(--color_bg);
	padding: 80px 0;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	.sp_only {
		display: initial;
	}
	.pc_only {
		display: none;
	}
	h2 {
		font-size: 7vw;
		letter-spacing: 0.2vw;
	}
	.box .text{
		margin-top: 10vw;
		line-height: 2.25;
		letter-spacing: 0;
	}
	.image_flex{
		display: block;
	}
	.caption{
		margin-top: 1vw;
		font-size: 3.25vw;
	}
	.bg{
		padding: 15vw 0;
	}
}


/*----------------------------------
	Title
----------------------------------*/
#title{
	margin-top:130px;
}
#title .box{
	display: flex;
	align-items: end;
}
#title h1 {
	font-size: 3rem;
	font-weight: 500;
	line-height: 1.75;
	letter-spacing: 0.2rem;
	color: var(--color_an);
}
#title .date{
	font-size: 1.8rem;
	color: var(--color_an);
	margin-left: 40px;
	margin-bottom: 6px;
}
@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#title .box{
		display: block;
	}
	#title .date{
		margin-left: 0;
		margin-bottom: 0;
		margin-top: 20px;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#title{
		margin-top:calc(50px + 10vw);
	}
	#title h1 {
		font-size: 6.25vw;
		line-height: 1.75;
		letter-spacing: 0;
	}
	#title .date{
		font-size: 5vw;
		margin-top: 10px;
	}
}


/*----------------------------------
	Intro
----------------------------------*/
#intro{
	margin-top:70px;
	position: relative;
	min-height: 420px;
}
#intro .box div{
	width: 39%;
}
#intro .box div .text{
	margin-top: 0;
}
#intro .box div .sign{
	margin-top: 30px;
	text-align: right;
	line-height: 2;
}
#intro .mainvisual{
	width: 53vw;
	height: 420px;
	position: absolute;
	right: 0;
	top: 0;
	background-image: url(../img/img_main_pc.jpg);
	background-size: cover;
	background-position: center;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#intro{
		margin-top:10vw;
		position: static;
		height: auto;
	}
	#intro .box div{
		width: 100%;
	}
	#intro .box div .text{
		margin-top: 0;
	}
	#intro .box div .sign{
		margin-top: 5vw;
		margin-bottom: 7vw;
	}
	#intro .mainvisual{
		width: 90%;
		height: auto;
		position: static;
		right: auto;
		top: auto;
		background-image: none;
		margin: 0 auto;
	}
}


/*----------------------------------
	Develop/Material
----------------------------------*/
#develop, #material{
	margin-top:150px;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#develop, #material{
		margin-top:25vw;
	}
}


/*----------------------------------
	Tag
----------------------------------*/
#tag{
	margin-top:150px;
	background: linear-gradient(to left, #fff 0%, #fff 50%, var(--color_bg) 50%, var(--color_bg) 100%);
	position: relative;
}
#tag .box div{
	width: 55%;
}
#tag .image{
	position: absolute;
	right: 0;
	bottom: 80px;
	width: 42vw;
}
#tag .image img{
	width: 48%;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#tag{
		background: var(--color_bg);
		position: static;
		padding-bottom: 80px;
	}
	#tag .box div{
		width: 100%;
	}
	#tag .image{
		position: static;
		right: auto;
		bottom: auto;
		width: 90%;
		margin: 0 auto;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#tag{
		margin-top: 25vw;
		padding-bottom: 15vw;
	}
	#tag .image img{
		width: 100%;
	}
}


/*----------------------------------
	Butter
----------------------------------*/
#butter{
	margin-top:150px;
	margin-bottom: 400px;
	background: linear-gradient(to right, #fff 0%, #fff 50%, var(--color_bg) 50%, var(--color_bg) 100%);
}
#butter .box{
	position: relative;
}
#butter .image{
	position: absolute;
	right: 820px;
}
#butter .image .visual {
	width: 24vw;
	background: url(../img/img_pascal_butter_pc.jpg);
}
#butter .image .caption {
	text-align: right;
}
#butter .box .inner{
	width: 75%;
	margin-left: auto;
	margin-bottom: 150px;
	position: relative;
}
#butter .box .inner .image_flex{
	width: 82%;
	margin-top: 50px;
	position: absolute;
	left: 9%;
}
#butter .box .inner .image_flex img{
	width: 47%;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#butter{
		background: var(--color_bg);
		margin-bottom: 150px;
	}
	#butter .box{
		position: static;
	}
	#butter .box .pc_only{
		display: none;
	}
	#butter .image{
		position: static;
		right: 0;
	}
	#butter .box .inner{
		width: 100%;
		margin-bottom: 0;
		position: static;
	}
	#butter .box .inner .tb_flex{
		display: flex;
		justify-content: space-between;
		margin-top: 50px;
	}
	#butter .box .inner .sp_only{
		display: block;
	}
	#butter .box .inner .sp_only img{
		width: auto;
		height: 40vw;
	}
	#butter .box .inner .image_flex{
		display: flex;
		margin-top: 0;
		width: auto;
		position: static;
		left: 0;
	}
	#butter .box .inner .image_flex img{
		width: auto;
		height: 40vw;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#butter{
		margin-top: 25vw;
		margin-bottom: 0;
	}
	#butter .box .inner .tb_flex{
		display: block;
	}
	#butter .box .inner .sp_only{
		margin-top: 10vw;
	}
	#butter .box .inner .sp_only img{
		width: 100%;
		height: auto;
	}
	#butter .box .inner .image_flex{
		margin-top: 10vw;
		width: 100%;
	}
	#butter .box .inner .image_flex img{
		width: 50%;
		height: auto;
	}
}


/*----------------------------------
	Complete
----------------------------------*/
#complete .image_flex{
	width: calc(49.5vw + 500px);
	margin-left: auto;
	margin-top: 50px;
	padding-right: 6vw;
}
#complete .image_flex .visual_1{
	width: 48.25%;
}
#complete .image_flex .visual_2{
	width: 49%;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#complete .image_flex{
		display: flex;
		justify-content: space-between;
		width: 90vw;
		margin-left: auto;
		margin-right: auto;
		padding-right: 0;
	}
	#complete .image_flex .visual_1{
		width: 48%;
	}
	#complete .image_flex .visual_2{
		width: 48%;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#complete {
		margin-top: 25vw;
	}
	#complete .image_flex{
		display: block;
		margin-top: 10vw;
	}
	#complete .image_flex .visual_1{
		width: 100%;
		margin-bottom: 8vw;
	}
	#complete .image_flex .visual_2{
		width: 100%;
	}
}


/*----------------------------------
	Million
----------------------------------*/
#million{
	margin-top:150px;
	background: linear-gradient(to left, #fff 0%, #fff 50%, var(--color_bg) 50%, var(--color_bg) 100%);
}
#million .bg{
	padding: 80px 120px 100px 0;
}
@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
	#million{
		background: var(--color_bg);
	}
	#million .bg{
		padding-right: 0;
	}
}
@media screen and (max-width:479px) {
    /*SP*/
	#million{
		margin-top:25vw;
	}
	#million .bg{
		padding: 15vw 0;
	}
}


/*----------------------------------
	Conclusion
----------------------------------*/
#conclusion{
	margin-top:150px;
}
#conclusion .visual{
	margin-top:50px;
}
#conclusion .visual .caption{
	text-align: right;
}

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#conclusion{
		margin-top:25vw;
	}
	#conclusion .box.visual{
		margin-top:10vw;
		width: 100%;
		max-width: 100%;
	}
	#conclusion .visual .caption{
		width: 90%;
		margin: 0 auto;
		text-align: left;
	}
}

/*----------------------------------
	Bnr
----------------------------------*/
#bnr{
	margin-top:10rem;
	text-align: center;
}
#bnr a{
	width:40%;
	display: inline-block;
}
@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
	#bnr a{
		width:100%;
		display: inline-block;
	}
}


/*----------------------------------
	Sample
----------------------------------*/

@media screen and (min-width:1024px) {
    /*PC*/
}
@media screen and (max-width:1023px) {
    /*SP-Tablet*/
}
@media screen and (max-width:479px) {
    /*SP*/
}