@charset "UTF-8";
/* CSS Document */

.body{
	grid-template: 
		"b-header"
		"b-title"
		"b-nav"
		"b-img"
		"contents"
		"project1"
		"pj-box"
		"pj-box2"
		"pj-box3"
		"pj-box4"
		"pj-box5"
		"pj-box6"
		"project2"
		"project3"
		"toppage"
		"b-footer"
		;
}


b-header {
	grid-area: b-header;
}

b-title {
	grid-area: b-title;
}

b-nav {
	grid-area: b-nav;
}

b-img {
	grid-area: b-img;
}

contents {
	grid-area: contents;
}

project1 {
	grid-area: project1;
}

.pj-box {
	grid-area: pj-box;
}

.pj-box2 {
	grid-area: pj-box2;
}

.pj-box3 {
	grid-area: pj-box3;
}
.pj-box4 {
	grid-area: pj-box4;
}

.pj-box5 {
	grid-area: pj-box5;
}

.pj-box6 {
	grid-area: pj-box6;
}
project2 {
	grid-area: project2;
}

project3 {
	grid-area: project3;
}

.topPage {
	grid-area: toppage;
}

b-footer {
	grid-area: b-footer;
	background-color: whitesmoke;
}


/*contents
--------------------------------------*/
contents h2 {
	margin-top: 60px;
}

.contents-box {
	display: flex;
	justify-content: space-around;
	border: 1px solid #dedede;
	padding: 50px;
	margin: 30px auto;
	width: 80%;
}


.no1 a {
	display: block;
	text-decoration: underline;
	text-decoration-color: #333;
}

contents a:hover {
	color: #dedede;
	text-decoration-color: #dedede;
	
}

.tentative {
	color: #696969;
}

.tentative a {
	display: block;
	text-decoration: underline;
	text-decoration-color: #696969;
}

ruby {
	font-family: 'Noto Serif JP', serif;
}

ruby[data-ruby] {
	position: relative;
}

ruby[data-ruby]::before {
	content:  attr(data-ruby);
	position: absolute;
	left: -7em;
	top: -1.5em;
	right: -5em;
	text-align: center;
	font-size: .4em;
	color: #696969;
	letter-spacing: .1em;
}

.rt1 {
	font-size: clamp(0.375rem, 0.307rem + 0.34vw, 0.563rem);
	letter-spacing: normal;
}
.rt2 {
	display: none;
	/*font-size: 6px;
	font-family: YuGothic,'Yu Gothic',
		'メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
	letter-spacing:normal;
	color: #696969;*/
}

/*project1
--------------------------------------*/

.heading {
	position: relative;
	font-size: 25px;
	text-align:  center;
	line-height: 1.8;
	margin: 80px auto 40px auto;
}

.heading::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 50px;
	color: #e5c046;
	font-size: 30px;
}

.heading::after {
	content: '';
	position:  absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%); /*左右中央配置*/
	width: 1px;
	height: 20px;
	background-color: #e5c046;
}

.pj-top {
	width: 80%;
}

.sh-br {
	display: none;
}
.pj-text1 {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);/*min13px max16px*/
	margin: 40px auto;
	line-height: 1.9;
/*	background: #fff;
	width: 80%;*/
}

.pj-text2 {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);/*min13px max16px*/
	line-height: 1.9;
	text-align: justify;
}
.pj-box, .pj-box2,.pj-box3 ,.pj-box4 ,.pj-box5 ,.pj-box6{
	display: flex;
	align-items: center;
	margin: 80px auto;
	width: 80%;
/*	background: #fff;*/
}

.pj-box2, .pj-box4 ,.pj-box6 {
	flex-direction: row-reverse;
}

.pj-img {
	width: 50%;
	
}
.pj-textBox {
	margin: 0;
	padding: 5% 5%;
	text-align: justify;
	width: 50%;
}


/*project2
--------------------------------------*/
.pj2-wrap {
	margin-top: 20px;
	margin-bottom: 100px;
}

.heading2 {
	position: relative;
	font-size: 20px;
	text-align:  center;
	line-height: 1.8;
	margin: 60px auto 10px auto;
}

.heading2::before {
	content: attr(data-number);
	display: block;
	margin-bottom: 30px;
	color: #696969;
	font-size: 30px;
}

.heading2::after {
	content: '';
	position:  absolute;
	top: 50px;
	left: 50%;
	transform: translateX(-50%); /*左右中央配置*/
	width: 1px;
	height: 20px;
	background-color: #696969;
}


.color {
	background-color: whitesmoke;
}

.caption {
	font-size: 0.7em;
	text-align: right;
	margin-right: 10%;	
}

.detail-box {
	border: 1px solid #dedede;
	margin: 40px auto;
	width: 60%;
}

.detail-items {
	margin: 20px auto;
}
.detail-items td {
	font-family: 'Noto Serif JP', serif;
	text-align: left;
	line-height: 2;
}

.left-blank {
	padding-left: 2rem;
}

.img-pj2 {
	width: 80%;
}

.pj2-text1 {
	font-size: clamp(0.813rem, 0.744rem + 0.34vw, 1rem);/*min13px max16px*/
	margin: 20px auto;
	line-height: 1.9;
}

.work-name {
	margin: 60px auto 10px;
	font-weight: bold;
}

.pj2top-textBox {
	margin: 60px auto 0;
	width: 80%;
}

.pj2-textBox {
	margin: 60px auto 20px;
	width: 80%;
}
.pj2-textBox2 {
	margin: 0 auto;
	width: 80%;
}

.pj2-wrap h2 {
	margin-top: 100px;
}

.pj2-box{
	display: flex;
	align-items: center;
	margin: 60px auto;
	width: 80%;
	flex-direction: row;
}

.pj2-box:nth-child(odd) {
	flex-direction: row-reverse;
}

.pad-br {
	display: none;
}


/*project3
--------------------------------------*/
#pj3-titleTop {
	margin-bottom: 80px;
}
/*レスポンシブ
-----------------------------------------*/
@media screen and (max-width:1200px){
.cb {
	width: 85%;
}	

}
@media screen and (max-width:1000px){

	
}

@media screen and (max-width:600px){

.heading {
	font-size: 22px;
	margin: 40px auto;
}

#pj1-titleTop,#pj2-titleTop {
	margin-top: -20px;
	padding-top: 20px;
}
	
.cb {
	width: 90%;
}
	
#over {
	width: 100%;
}	

.contents-box {
	flex-direction: column;	
	text-align: left;
	padding: 50px 25%;
	width: 100%;
}

.contents-box li {
	line-height: 3;
	}
	
.pj-top {
	width: 100%;
}

.pj-box, .pj-box2,.pj-box3 ,.pj-box4 ,.pj-box5 ,.pj-box6 {
	width: 80%;
	flex-direction: column;	
}

.pj-img {
	width: 100%;
	
}
.pj-textBox {
	margin: 0;
	padding: 10% 5%;
	text-align: justify;
	width: 100%;
}

/*pj2エリア*/

.caption {
	margin-right: 2%;	
}

.pj2top-textBox {
	width: 100%;
}

.pj2-textBox ,.pj2-textBox2 {
	width: 90%;
	text-align: justify;
}

.detail-box {
	width: 80%;
}	

.img-pj2 {
	width: 100%;
}
	
.pj2-box ,.pj2-box:nth-child(odd){
	width: 80%;
	flex-direction: column;		
}

.pad-br {
	display: block;
}
	
.pc-br {
	display: none;
}
}

@media screen and (max-width:420px){

.cb {
		width: 98%;
	}


.contents-box {
		padding: 50px 60px;
		width: 95%;
	}
	
.sh-br {
	display: block;
}
.pj-box, .pj-box2,.pj-box3 ,.pj-box4 ,.pj-box5 ,.pj-box6{
	width: 100%;
}
	
.detail-box {
	width: 90%;
}

.pj2-box ,.pj2-box:nth-child(odd) {
	width: 100%;	
}
}