@charset "UTF-8";
/* CSS Document */
header{
	margin-top: 8.5rem;
}


/*---------- タイトル ----------*/
p.blue-text {
    font-weight: bold;
    color: #08287E;
}

.title div{
	background: url("../img/work2-titleimg2023.jpg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	position: relative;
	padding: 4rem;
	height: 450px;
}
.title div::before{
	content: "";
	position: absolute;
	display: inline-block;
	height: 150px;
	width: 150px;
	background: url("../img/work2-parts-01.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	bottom: 0;
	left: 0;
}
.title div h3{
	position: relative;
	display: inline-block;
	font-size:  80px;
	font-weight: 300;
	text-align: left;
	color: #08287e;
	letter-spacing: 0.5rem;
	line-height: 8.5rem;
}
.title div h3::after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 200px;
	height: 50px;
	background: url("../../since2021/img/top-subtitle2.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	bottom: -35px;
	right: -120px;
}


/*---------- about ----------*/
#work1-about{
	display: flex;
	flex-wrap: wrap;
	margin-top: 8rem;
}
#work1-about div.about1{
	background: url("../img/work2-aboutimg02.png");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	position: relative;
	padding: 4rem;
	height: 350px;
}
#work1-about div.about1 img{
	width: 60%;
}
#work1-about div.about2{
	background: url("../img/work2-aboutimg01.jpg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position: relative;
	padding: 4rem;
	margin-top: -5rem;
	height: 500px;
	z-index: -1;
}
#work1-about div.about2 img{
	width: 310px;
	position: absolute;
	top: 8rem;
	right: 0;
}
#work1-about div.tategaki p{
	display: block;
	-ms-writing-mode: tb-rl;
 	writing-mode: vertical-rl;
	line-height: 5.5rem;
	letter-spacing: 3px;
	font-size: 33px;
	color: #08287E;
	margin: auto;
    padding-right: 10rem;
	text-align: left;
}
#work1-about div.tategaki + ul + div{
	background: url("../img/work2-aboutimg04.jpg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: contain;
	position: relative;
	padding: 4rem;
}
#work1-about div.tategaki + ul + div p{
/*	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;*/
	color: #08287E;
	font-size: 14px;
}
#work1-about div.tategaki + ul + div span,
#work1-about div.tategaki + ul + div + div span{
	font-weight: 500;
	color: #08287E;
	font-size: 23px;
	line-height: 3rem;
}
#work1-about div.tategaki + ul + div + div{
/*	background: url("../img/work2-aboutimg05.jpg");*/
	background-repeat: no-repeat;
	background-position: left 4rem;
	position: relative;
	padding: 4rem;
	padding-left: 0;
}
#work1-about div.tategaki + ul + div + div p{
/*	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;*/
	color: #08287E;
	font-size: 14px;
	text-align: justify;
}
#work1-about p,
#work1-about div ul li{
	text-shadow: 0 0 5px white,-1px -1px 2px white,1px 1px 2px white;
}
#work1-about div ul{
	padding-top: 1rem;
}
#work1-about div ul li{
	line-height: 3.5rem;
}
#work1-about div ul li::before{
	color: #08287E;
	content: "❖";
	padding-right: 0.5rem;
}
#work1-about ul.gallery{
	display: none;
}

/*---------- Information ----------*/
#information{
	background: url("../img/work2-information.jpg");
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	padding: 4rem 4rem 6rem 4rem;
}
#information h4{
	display: block;
	color: #08287E;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	line-height: 2rem;
	margin-top: 0rem;
	margin-bottom: 3rem;
}
#information h4 img{
	display: inline;
	width: 45px;
	padding-right: 0.5rem;
}
#information h4 span{
	color: #878787;
	font-size: 14px;
}
#information ul li {
	text-indent: -1.6em;
	text-align: justify;
	margin: auto;
}
#information ul li::before {
	color: #08287E;
	content: "❖";
	font-family: 'Noto Sans JP';
	padding-right: 0.5rem;
}
#information .info-bottom {
	padding-bottom: 3rem;
}





/*---------- 09のシーン ----------*/
#scene8 div.scene8-title{
	width: 560px;
	margin-top: 10rem;
	margin-bottom: 8rem;
}
#scene8 div.scene8-title p{
	text-align: center;
	color: #878787;
	font-size: 14px;
}
#scene8 .order-3{order: 4!important;}
#scene8 .order-4{order: 3!important;}
#scene8 ul li{
	margin-bottom: 15rem;
}
#scene8 ul li h5{
background: #fff;
    color: #08287E;
    font-size: 20px;
    display: inline-block;
    margin-top: -3.5rem;
    padding: 0 2rem;
    position: absolute;
    top: 0;
    left: 50px;
}
#scene8 ul li h5 span{
	font-size: 50px;
	padding-left: 2rem;
	vertical-align:-15%;
}
#scene8 ul li h6 {
    color: #08287E;
    border-top: 2px solid #08287E;
    position: relative;
    z-index: -1;
	font-size: 30px;
	padding: 4rem 0 2rem 0;
	font-weight: bold;
}
#scene8 ul li h6 span {
	font-size: 20px;
}
#scene8 ul li .time {
/*	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;*/
	font-size: 16.8px;
	padding: 0;
	margin: 0;
	display: inline;
}
#scene8 ul li .time div:first-child {
	display: inline;
	color: #fff;
	background-color: #08287e;
	padding: 5px 1rem;
	border: solid 1.2px #08287e;
}
#scene8 ul li .time div:first-child::before {
	font-family: "Font Awesome 5 Free";
	content: "\f017";
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	margin-right: 1rem;
}
#scene8 ul li .time div:last-child {
	display: inline;
	color: #08287e;
	background-color: #fff;
	padding: 5px 1rem;
	border: solid 1.2px #cdd3e3;
}
#scene8 .remark {
	color: #08287F;
	font-weight: 600;
	font-size: 20px;
	font-size: 2rem;
	display: inline-block;
    margin-bottom: 0px;
    margin-top: 1.5rem;
}
#scene8 .scene03-img {
	padding-top: 2rem;
}

#scene8 ul li dl {
    color: #08287E;
    position: relative;
    z-index: -1;
	font-size: 14px;
	line-height: 1.8;
}
#scene8 ul li dl dt{
	padding: 2rem 0 0;
	font-weight: bold;
}
#scene8 ul li dl dd{
	text-align: justify;
}
#scene8 ul li .price{
/*	font-family: "Noto Sans", "Noto Sans CJK JP", sans-serif;*/
	font-size: 20px;
	color: #08287e;
	font-weight: bold;
	line-height: 1.3;
	margin-top: 2rem;
	font-feature-settings: "palt";
}
#scene8 ul li .price span{
	font-family: 'Roboto', sans-serif;
	font-size: 50px;
	color: #08287e;
	font-weight: bold;
	margin-right: 5px;
	letter-spacing: -1.5px;
}
#scene8 ul li .price .price-text-s{
	font-size: 16px;
	color: #08287e;
	font-weight: bold;
	letter-spacing: 0;
}
#scene8 ul li:nth-child(9) dl dl{
	border: none;
	background: #E6E9F2;
	padding: 2rem;
	margin-top: 2rem;
}
#scene8 ul li:nth-child(9) dl dl dt{
	font-size: 16px;
	padding: 0 0 1rem 0;
}

#scene8 div.order-2,
#scene8 div.order-4{
	position: relative;
}
#scene8 div.tri-2,
#scene8 div.tri-3,
#scene8 div.tri-4{
	position: relative;
}
#scene8 div.tri-2::after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	background: url("../img/work2-parts-05.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	top: 0;
	right: 0;
	z-index: 1;
}
#scene8 div.tri-3::after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	background: url("../img/work2-parts-06.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	bottom: 0;
	right: 0;
	z-index: 1;
}
#scene8 div.tri-4::after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 250px;
	height: 250px;
	background: url("../img/work2-parts-04.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	bottom: 0;
	left: 0;
	z-index: 1;
}

/*----------vacancy----------*/
.vacancy-bg {
	background: url("../img/work2-vacancy-main.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	height: 450px;
}
.vacancy-bg::after {
	content: "";
	position: absolute;
	width: 150px;
	height: 150px;
	background: url("../img/work2-vacancy01.svg");
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);	z-index: 1;
}
.vacancy-bg > div {
	position: absolute;
	color: #fff;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	display: inline-block;
	top: 3rem;
}
.vacancy-bg > div:first-child {
	left: 0;
}
.vacancy-bg > div:last-child {
	right: 0;
	text-align: right;
}
.vacancy-bg img {
	width: 160px;
}
.vacancy-bg dl {
	line-height: 1.7;
	padding: 1rem 3rem;
	text-shadow: 0 0 5px #0a277e,-1px -1px 2px #0a277e,1px 1px 2px #0a277e;
}
.vacancy-bg dt {
	font-size: 26px;
	font-weight: 600;
	text-align: left;
}
.vacancy-bg dd {
	font-size: 23px;
	padding-left: 0.5em;
	font-weight: 300;
	text-align: left;
}

/*---------- ReFINE STONE ----------*/
section#stone > div:first-child{
	background: url("../img/work2-stone.jpg");
	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	padding: 4rem;
}
#stone h4{
	font-size: 50px;
	color: #595757;
	letter-spacing: 0.5rem;
	display: inline-block;
	position: relative;
	margin-bottom: 5rem;
}
#stone h4::after{
	content: "";
	position: absolute;
	display: inline-block;
	width: 100px;
	height: 35px;
	background: url("../../since2021/img/top-subtitle3.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
	bottom: -15px;
	right: -65px;
}
#stone div img{
	width: 100%;
}
#stone div p{
	text-shadow: 0 0 5px white,-1px -1px 2px white,1px 1px 2px white;
	color: #000000;
	margin-bottom: 2rem;
}
#stone div a{
	margin: 2rem 0;
}
#stone div + p{
	font-size: 18px;
	text-align: center;
	margin: 5rem 0;
}
#stone div.d-flex > div{
	margin: auto;
}
#stone ul {
	margin: 5rem auto;
	font-size: 14px;
	color: #231815;
	display: inline-block;
	text-align: justify;
	text-indent: -1em;
}

/*---------- QandA ----------*/
#QandA{
	background: url("../img/work2-Q&A.jpg");
	background-position: top center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: relative;
	padding: 4rem 4rem 7rem 4rem;
}
#QandA h4{
	display: block;
	color: #08287E;
	font-size: 25px;
	font-weight: bold;
	text-align: center;
	line-height: 2rem;
	margin-top: 3rem;
	margin-bottom: 3rem;
}
#QandA h4 img{
	display: inline;
	width: 45px;
	padding-right: 0.5rem;
}
#QandA h4 span{
	color: #878787;
	font-size: 14px;
}
/*---------アコーディオン部分---------*/
.accordion-container {
	margin-top: 7rem;
  	position: relative;
  	width: 100%;
	cursor: pointer
}
.accordion-container .accordion-title {
	display: block;
	position: relative;
	margin: 1rem 0;
	padding: 2.5rem 7rem 2.5rem 7rem;
	background: #08287E;
	cursor: pointer;
	font-size: 18px;
	color: #ffffff;
	text-align: left;
	text-indent: -4.5rem;
}
.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #8393BE;
  color: #ffffff;
}
.accordion-title,.accordion-content{
  position: relative;
}
.accordion-title::after {
	content: "＋";
	font-size: 30px;
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%) translateX(0);
	-webkit- transform: translateY(-50%) translateX(0);
	display: block;
}
.accordion-title.open::after {
    content: "−";
    font-size: 40px;
	top: 50%;
	transform: translateY(-50%) translateX(0);
	-webkit- transform: translateY(-50%) translateX(0);
    right: 29px;
    font-weight: 300;
}
.accordion-content {
	display: none;
    margin-bottom: 1rem;
    padding: 2.5rem;
    border: 1px solid #B3B3B4;
    background: #ffffff;
}
.accordion-content dt{
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 1.5rem;
}
.accordion-content dd{
	font-size: 14px;
	text-align: justify;
	color: #727171;
	line-height: 2.5rem;
	text-indent: -1em;
    padding-left: 1em;
}



@media (max-width: 1199px) {
/*---------- about ----------*/
#work1-about div.about2{
	background-position: left -10rem center;
}
}
@media (max-width: 991px) {
/*---------- about ----------*/
	#work1-about div.about1 img {
		width: 70%;
	}
	#work1-about div.about1 {
		height: 200px;
	}
	#work1-about div.about2 {
		height: 400px;
		margin-top: -2.5rem;
	}
	#work1-about div.about2 img{
		width: 230px;
		top: 7rem;
	}
	#work1-about div.tategaki p{
		line-height: 4.5rem;
		letter-spacing: 0px;
		font-size: 27px;
		padding-right: 3rem;
	}
/*---------- ８つのシーン ----------*/	
	#scene8 ul li{
		margin-bottom: 8rem;
	}
	#work1-about div.about1 {
		height: 200px;
	}
/*----------vacancy----------*/
	.vacancy-bg dt {
		font-size: 23px;
	}
	.vacancy-bg dd {
		font-size: 20px;
	}
	.vacancy-bg dl {
		padding: 1rem 2rem;
}
	
/*---------- ReFINE STONE ----------*/
	#stone ul {
		width: 90%;
	}

/*---------- QandA ----------*/
	.accordion-container .accordion-title {
		padding: 2.5rem 4.5rem 2.5rem 6rem;
		text-indent: -2.6em;
	}
	.accordion-title::after {
		content: "＋";
		font-size: 30px;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%) translateX(0);
		-webkit- transform: translateY(-50%) translateX(0);
		display: block;
	}
	.accordion-title.open::after {
		content: "−";
		font-size: 40px;
		top: 50%;
		transform: translateY(-50%) translateX(0);
		-webkit- transform: translateY(-50%) translateX(0);
		right: 0;
		font-weight: 300;
	}
	
}
@media (max-width: 767px) {
/*---------- タイトル ----------*/
	.title div{
		background: url("../img/work2-titleimg2023.jpg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		position: relative;
		padding: 2rem 3rem;
		height: 350px;
	}
/*---------- about ----------*/
	#work1-about div.about1 img {
		width: 80%;
	}
	#work1-about div.about2 img{
		width: 200px;
		top: 5rem;
	}
	#work1-about div.about1{
		background: url("../img/work2-aboutimg02.png");
		background-repeat: no-repeat;
		background-position: right top;
		background-size: contain;
		position: relative;
		padding: 2rem;
		height: 200px;
	}
	#work1-about div.about2{
		background: url("../img/work2-aboutimg01.jpg");
		background-repeat: no-repeat;
		background-position: right 4rem bottom;
		background-size: cover;
		position: relative;
		margin-top: -3rem;
		height: 400px;
		z-index: -1;
	}
	#work1-about div.tategaki + ul + div{
		background: url("../img/work2-aboutimg04-mini.jpg");
		background-repeat: no-repeat;
		background-position: right center;
		background-size: cover;
		position: relative;
		padding: 4rem 2rem;
	}
	#work1-about div.tategaki + ul + div + div{
		background: none;
		padding: 4rem 2rem;
	}
	#work1-about div.tategaki + ul + div span,
	#work1-about div.tategaki + ul + div + div span{
		font-feature-settings: "palt";
    	letter-spacing: .1em;
	}
/*---------- ８つのシーン ----------*/
	#scene8 div.scene8-title{
		width: 80%;
		margin-top: 6rem;
		margin-bottom: 7rem;
	}
	#scene8 .order-3{order: 3!important;}
	#scene8 .order-4{order: 4!important;}
	#scene8 .order-1,
	#scene8 .order-2,
	#scene8 .order-3,
	#scene8 .order-4{
		margin-bottom: 2rem;
	}
/*
	#scene8 div.tri-2::after{
		width: 200px;
		height: 200px;
}
	#scene8 div.tri-3::after{
		width: 200px;
		height: 200px;
	}
	#scene8 div.tri-4::after{
		width: 200px;
		height: 200px;
	}
*/

/*---------- QandA ----------*/
	.accordion-container .accordion-title {
		padding: 1.5rem 3.5rem 1.5rem 5.5rem;
		font-size: 16px;
		text-indent: -2.6em;
		line-height: 1.3
	}
	.accordion-title::after {
		font-size: 25px;
		right: -5px;
	}
	.accordion-title.open::after {
		font-size: 35px;
		right: -10px;
	}
	
/*----------vacancy----------*/
	.vacancy-bg {
		background: url("../img/work2-vacancy-main2.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		position: relative;
		height: auto;
	}
	.vacancy-bg img {
		display: block;
		margin: 0 auto;
	}
	.vacancy-bg > div {
		position: inherit; 
		display: block; 
		margin: 0 auto;
		text-align: center;
		padding: 2rem;
		top: 0;
	}
	.vacancy-bg > div:first-child {
		margin-bottom: 12rem;
	}
	.vacancy-bg > div:last-child {
		text-align: center;
	}
	.vacancy-bg dl {
		display: inline-block;
		margin: 0 auto;
		}
	.vacancy-bg dd {
		text-align: left;
		width: 100%;
		}
/*---------- ReFINE STONE ----------*/
	section#stone > div:first-child{
		background: url(../img/work2-stone.jpg);
		background-position: right center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		padding: 2rem;
	}
	#stone div a{
		display: block;
		margin: 2rem 0;
		width: auto;
	}
	#stone ul {
		margin: 3rem auto;
	}
	#stone h4::after{
	bottom: -15px;
	right: -55px;
}

	
}
@media (max-width: 575px) {
/*---------- タイトル ----------*/
	.title div{
		height: 250px;
	}
	.title div::before{
		height: 100px;
		width: 100px;
	}
	.title div h3{
		font-size:  60px;
		letter-spacing: 0.5rem;
		line-height: 6.5rem;
	}
	.title div h3::after{
		width: 150px;
		height: 40px;
		bottom: -30px;
		right: -90px;
	}
	
/*---------- about ----------*/
	#work1-about{
		margin-top: 5rem;
	}
	#work1-about div.about1 p{
		font-size: 20px;
		line-height: 4rem;
		color: #08287E;
	}
	#work1-about div.about1 img {
		width: 320px;
		filter: drop-shadow(0px 0px 3px #ffffff);
	}
	#work1-about div.about2 img{
		width: 150px;
		top: 4rem;
	}
	#work1-about div.about1{
		background: url(../img/work2-aboutimg01-mini.jpg);
		background-repeat: no-repeat;
		background-position: left top;
		background-size: cover;
		position: relative;
		padding: 2rem;
		height: 500px;
	}
	#work1-about div.about2{
		display: none;
	}
	#work1-about div.tategaki p{
		line-height: 4rem;
		letter-spacing: 0px;
		font-size: 23px;
		padding: 0;
	}
	#work1-about div.tategaki + ul + div{
		background: url("../img/work2-aboutimg04.jpg");
		background-repeat: no-repeat;
		position: relative;
        padding: 3rem 2rem 25rem;
        background-size: contain;
        background-position: bottom;
	}
	#work1-about div.tategaki + ul + div span,
	#work1-about div.tategaki + ul + div + div span{
		font-size: 20px;
		letter-spacing: -0.5px;
	}
	#work1-about div.tategaki + div span,
	#work1-about div.tategaki + div + div span{
		font-size: 18px;
		line-height: 0rem;
	}
	#work1-about div.tategaki + div + div p{
		text-align: center;
	}
	#work1-about div ul{
		padding: 0;
		padding-top: 1rem;
	}
	#work1-about div ul li{
		text-indent: -1.4em;
		padding-left: 1.4em;
		font-size: 14px;
		line-height: 2rem;
		margin-bottom: 1rem;
	}
	#work1-about ul.gallery{
		display: flex;
		margin: 0;
		padding: 0;
	}
	#work1-about ul.gallery li{
		padding: 0;
	}

/*---------- ８つのシーン ----------*/
	#scene8 div.scene8-title{
		width: 95%;
	}
	#scene8 ul li h5 span {
		font-size: 40px;
	}
	#scene8 ul li h5 {
		font-size: 20px;
		margin-top: -2.5rem;
		position: absolute;
		top: 0;
		left: 0;
	}
	#scene8 div.order-2::after,
	#scene8 div.order-4::after{
		width: 150px;
		height: 150px;
	}
	#scene8 div.tri-2::after{
		width: 150px;
		height: 150px;
}
	#scene8 div.tri-3::after{
		width: 150px;
		height: 150px;
	}
	#scene8 div.tri-4::after{
		width: 150px;
		height: 150px;
	}

/*---------- QandA ----------*/
	#QandA{
		padding: 2rem;
	}
	.accordion-container {
		margin-top: 3rem;
	}
	.accordion-container .accordion-title {
		padding: 1.5rem 2.5rem 1.5rem 4.5rem;
		font-size: 14px;
		text-indent: -2.6em;
		line-height: 1.3
	}
	.accordion-title::after {
		font-size: 20px;
		right: -10px;
	}
	.accordion-title.open::after {
		font-size: 30px;
		right: -12px;
	}
	.accordion-content dt {
		font-size: 14px;
		margin-bottom: 1rem;
	}
	.accordion-content {
		padding: 1.5rem;
	}
/*---------- ReFINE STONE ----------*/
	section#stone > div:first-child{
		background: url("../img/work2-stone-mini.jpg");
		background-position: top -50px center;
		background-size: auto;
		background-repeat: no-repeat;
		position: relative;
	}
	#stone div{
		display: block!important;
	}
	#stone div a{
		margin: auto;
		width: 200px;
	}
	#stone div.col-md-4.col-sm-6{
		text-align: center;
	}
	#stone div img{
		width: 90%;
		margin-bottom: 2rem;
	}
	#stone div + p{
		font-size: 16px;
		text-align: center;
		margin: 5rem 3rem;
	}
}