@charset "utf-8";

/*--------------------
firstview
--------------------*/
#firstview {
	padding: 310px 0 356px;
	background: url(../images/project-story_detail/project_03/fv_03.jpg) no-repeat center center / cover;
}

	#firstview h1 {
		text-align: center;
		font-size: 50px;
		line-height: 76px;
		color: #000;
	}

	#firstview h1 span {
		display: block;
		font-family: 'Cormorant Garamond', serif;
		font-size: 24px;
		margin: 0 0 40px;
		color: #d32c2c;
	}

	#firstview h1 span span {
		display: inline-block;
		margin: 0 0 0 2px;
		font-family: 'Didot';
		font-size: 40px;
		font-style: italic;
	}

/*--------------------
intro
--------------------*/
#intro {
	width: 1200px;
	margin: -120px auto 0;
	padding: 65px 0;
	box-sizing: border-box;
	background: #fff;
	text-align: center;
}
	
	#intro h1 {
		font-size: 32px;
		line-height: 56px;
		padding: 0 0 30px;
	}
	
	#intro p {
		font-size: 24px;
		line-height: 44px;
	}

	#intro p:last-of-type{
		margin-top: 1rem;
	}

/*--------------------
project-members
--------------------*/
#project-members {
}

	#project-members h2 {
		font-family: 'Cormorant Garamond', serif;
		color: #d32c2c;
		font-size: 22px;
		text-align: center;
		margin: 0 0 5px;
	}
	
	#project-members h2 span {
		font-size: 40px;
		display: inline-block;
		margin: 0 0 0 5px;
		font-family: 'Didot';
		font-style: italic;
	}
	
	#project-members h3 {
		font-size: 38px;
		line-height: 60px;
		margin: 0 0 30px;
		text-align: center;
	}

	#project-members .bg {
		padding: 60px 0 80px;
		background: url(../common/images/pattern_01.gif) repeat left top;
	}

	#project-members ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	#project-members li {
		width: 241px;
	}

	#project-members li:not(:last-of-type) {
		margin: 0 40px 0 0;
	}

	#project-members .imgbox {
		margin: 0 0 20px;
		position: relative;
	}

	#project-members .imgbox span {
		display: inline-block;
		position: absolute;
		left: 10px;
		bottom: 10px;
		padding: 5px 15px;
		border-radius: 30px;
		color: #fff;
		font-size: 14px;
	}

	#project-members .imgbox .green { background: #09b425;}
	#project-members .imgbox .red { background: #d32c2c;}
	#project-members .imgbox .purple { background: #7f308b;}
	#project-members .imgbox .orange { background: #f58500;}
	#project-members .imgbox .gray { background: #a0a0a0;}

	#project-members .textbox h4 {
		font-size: 12px;
		margin: 0 0 10px;
		text-align: center;
		line-height: 18px;
	}

	#project-members .textbox h5 {
		font-size: 24px;
		margin: 0 0 20px;
		text-align: center;
	}

	#project-members .textbox p {
		font-size: 13px;
		line-height: 23px;
	}

/*--------------------
project-story
--------------------*/
#project-story {
	padding: 140px 0 0;
	background: url(../images/project-story_detail/balloon_01.png) no-repeat center 60px;
}

	#project-story h2 {
		text-align: center;
		font-size: 24px;
		margin: 0 0 100px;
	}

	#project-story h2 span {
		display: block;
		font-size: 110px;
		font-family: 'Cormorant Garamond', serif;
		line-height: 20px;
		margin: 0 0 60px;
	}

	#project-story dl {
		width: 1100px;
		margin: 0 auto;
	}

	#project-story dd {
		color: #d32c2c;
		font-size: 22px;
		font-family: 'Cormorant Garamond', serif;
		position: relative;
		z-index: 1;
		margin: -130px 30px 50px;
	}

	#project-story dd span {
		display: table;
		padding: 10px 20px;
		background: #d32c2c;
		color: #fff;
		font-size: 32px;
	}

	#project-story dd span.SP {
		display: none;
	}

	#project-story dd strong {
		display: inline-block;
		font-family: 'Didot';
		font-size: 40px;
		font-style: italic;
		margin: 0 0 0 10px;
	}

	#project-story dd span:not(:last-of-type) {
	    margin-bottom: 10px;
	}

	#project-story dd span:first-of-type {
		margin-top: 10px;
	}

	#project-story .table-wrap {
		padding: 0 50px;
	}

	#project-story .flex-wrap {
		display: flex;
		justify-content: space-between;
	}

	#project-story .flex-wrap .left {
		order: 1;
	}

	#project-story .flex-wrap .right {
		order: 2;
	}

	#project-story .flex-wrap .imgbox,
	#project-story .flex-wrap .textbox {
		width: 50%;
		max-width: 460px;
	}

	#project-story table {
		width: 100%;
	}

	#project-story table th {
		width: 60px;
		padding: 0 0 40px;
		vertical-align: top;
		line-height: 28px;
		text-align: left;
		font-size: 15.5px;
	}

	#project-story table td {
		padding: 0 0 40px;
		vertical-align: top;
		line-height: 28px;
		font-size: 15.5px;
	}

	#project-story .imgbox.right {
		padding: 0 0 0 60px;
	}

	#project-story #project-story01 {
		margin: 0 0 200px;
	}

	#project-story #story01 {
		margin: 0 0 60px;
	}

	#project-story .caption {
		background: #fbe9e9;
		text-align: center;
		margin: 0 0 40px;
		border-radius: 10px;
	}

	#project-story .caption h3 {
		font-size: 22px;
		font-weight: 500;
		padding: 35px 0 35px 75px;
		display: inline-block;
		background: url(../images/project-story_detail/icn_02.png) no-repeat left center;
	}

	#project-story .imgbox img {
		display: block;
		padding-bottom: 40px;
	}
	#project-story .imgbox img.double { padding-bottom: 5px; } 

	#project-story .imgbox.big img {
		padding-bottom: 100px;
	}

	.btn.back {
	    margin: 0 auto 80px;
	}

/* ---------------------------- mobile ---------------------------- */
@media only screen and (max-width:868px){

/*--------------------
firstview
--------------------*/
#firstview {
	margin: 60px auto 0;
	padding: 0;
	height: 200px;
	background: url(../images/project-story_detail/project_03/fv_03.jpg) no-repeat center center / cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

	#firstview h1 {
		font-size: 20px;
		line-height: 1.5;
	}

	#firstview h1 span {
		font-size: 14px;
		margin: 0 0 10px;
	}

	#firstview h1 span span {
		margin: 0 0 0 2px;
		font-size: 24px;
	}

/*--------------------
intro
--------------------*/
#intro {
	width: 90%;
	margin: -30px auto 20px;
	padding: 20px 15px;
}

	#intro h1 {
		font-size: 16px;
		line-height: 1.8;
		width: 100%;
		text-align: center;
		margin: 0 0 15px;
	}
	
	#intro p {
		font-size: 14px;
		line-height: 2.2;
	}
	
/*--------------------
project-members
--------------------*/
	#project-members h2 {
		font-size: 18px;
		margin: 0 0 2px;
	}
	
	#project-members h2 span {
		font-size: 24px;
		margin: 0 0 0 2px;
	}
	
	#project-members h3 {
		font-size: 22px;
		line-height: 1.5;
		margin: 0 0 30px;
	}

	#project-members ul {
		display: block;
	}

	#project-members .bg {
	    padding: 60px 0;
	}

	#project-members li {
		width: 70%;
		margin: 0 auto;
	}

	#project-members li:not(:last-of-type) {
		margin: 0 auto 40px;
	}

	#project-members .imgbox span {
		padding: 3px 12px;
	}

	#project-members .imgbox img {
		width: 100%;
		height: auto;
	}

	#project-members .textbox h4 {
		font-size: 14px;
	}

	#project-members .textbox h5 {
		font-size: 21px;
	}

	#project-members .textbox p {
		font-size: 14px;
		line-height: 2.2;
	}

/*--------------------
project-story
--------------------*/
#project-story {
	padding: 50px 0 40px;
	background: url(../images/project-story_detail/balloon_01.png) no-repeat center 30px / 100% auto;
}

	#project-story h2 {
		font-size: 14px;
		margin: 0 0 30px;
	}

	#project-story h2 span {
		font-size: 32px;
		margin: 0 0 20px;
	}

	#project-story dl {
		padding: 0;
		width: 100%;
	}

	#project-story dt {
		padding: 0;
	}

	#project-story dd {
		padding: 0 15px;
		font-size: 15px;
		margin: -75px 0 30px;
	}

	#project-story dd span {
		font-size: 17px;
		padding: 7px 5px;
	}

	#project-story dd span:not(:last-of-type) {
	    margin-bottom: 5px;
	}

	#project-story dd span:first-of-type {
		margin-top: 5px;
	}

	#project-story dd span.PC {
		display: none;
	}

	#project-story dd span.SP {
		display: table;
		line-height: 1;
	}

	#project-story dd strong {
		font-size: 26px;
		margin: 0 0 0 5px;
	}

	#project-story .table-wrap {
	    padding: 0;
	}

	#project-story .imgbox.right {
	    padding: 0 0 30px;
	}

	#project-story .flex-wrap .imgbox {
		width: 100%;
		margin: 0 auto;
	}

	#project-story .imgbox.right {
	    padding: 0;
	}

	#project-story #story01 {
	    margin: 0 0 30px;
	}

	#project-story .single {
		margin: 0 0 10px;
	}

	#project-story .flex-wrap {
		display: block;
	}

	#project-story .flex-wrap .textbox {
		width: 100%;
	}

	#project-story #project-story01 dl:first-of-type .imgbox.right,
	#project-story #project-story02 .flex-wrap:nth-of-type(2) .imgbox.right {
		margin: 0 0 30px;
	}

	#project-story #project-story01 dl:nth-of-type(2) .imgbox.right {
		margin: 0 0 30px;
	}

	#project-story table th {
		width: 50px;
		padding: 0 0 20px;
		line-height: 1.9;
		font-size: 14px;
	}

	#project-story table td {
		padding: 0 0 20px;
		line-height: 1.9;
		font-size: 14px;
	}

	#project-story #project-story01 {
		margin: 0 0 80px;
	}

	#project-story .caption {
		margin: 0 0 40px;
		padding: 0 15px;
	}

	#project-story .caption h3 {
		font-size: 16px;
		padding: 20px 0 20px 40px;
		background: url(../images/project-story_detail/icn_02.png) no-repeat left center / 35px auto;
		line-height: 1.5;
	}

	#project-story .imgbox img {
	    padding-bottom: 30px;
	}

	#project-story .imgbox.big img {
	    padding-bottom: 40px;
	}

	#project-story .SP {
		line-height: 0;
	}

}

/*20220617*/
.coution{
	text-align: center;
	padding-top: 50px;
}