@charset "UTF-8";

#top
{
	overflow: hidden;
}

#links
{
	padding-top: 0;
}

#links > div
{
	transform: translateY(-5px);
}

.entry-title_p
{
	margin-bottom: 0;
}

.entry-title_p .entry-title
{
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto;
	padding: 0rem 2rem 0rem 4rem;
}

/**********************************************************************/
/**************************** Architecture *****************************/
/**********************************************************************/

#top + .archi_cont
{
	padding-top: max(5vw, 2rem);
}

.archi_cont
{
	padding: 0rem 0 max(10vw, 4rem);
	background-image: url(https://ko.dougukan.jp/_img/bg.jpg);
	background-size:75%;
	background-position: 50%;
}

.secTitle
{
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto;
	padding: 0rem 2rem 0rem 4rem;
}

.archi_cont .text_photo
{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto;
	padding: 0rem 2rem 0rem 4rem;
}

.archi_cont:nth-child(2n) .text_photo
{
	flex-direction: row-reverse;
}

.archi_cont .text
{
	width: 30%;
	min-width: 20rem;
}

.archi_cont .text_photo figure
{
	position:sticky;
	top: 4rem;
	width: min(calc(70% - 5rem), calc(100% - 24rem));
}

.archi_cont figure img
{
	width: 100%;
}

.archi_cont .secTitle
{
	align-items: flex-start;
	margin-bottom: 3rem;
	flex-direction: column;
}

.archi_cont .secTitle h2
{
	font-size: clamp(1.1rem, 3vw, 1.3rem);
	margin-bottom: 1em;
}

.archi_cont .secTitle h3
{
	font-size: clamp(1.5rem, 5vw, 2rem);
	line-height: 1.3;
	padding-bottom: .5em;
	padding-left: 1.7em;
}
.archi_cont .secTitle h3:before
{
	content:"";
	display:block;
	width: 1.2em;
	position:absolute;
	border-bottom: 1px solid rgb(50, 50, 50);
	top: .6em;
	left: 0;
}

.archi_cont .desc
{
/*	font-family: 'Zen-B', serif;
	font-weight: 700;*/
}

.archi_cont .desc .caution
{
	margin-top: 2rem;
	font-size: .8em;
}

body:not(.touch) .bannerLinear .photoWrapper
{
	cursor:pointer;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s ease;
	-ms-transition: all .3s ease;
	-o-transition: all .3s ease;
	transition: all .3s ease;
}
body:not(.touch) .bannerLinear .photoWrapper:hover
{
	transform: scale(1.05);
}

.slide_linear
{
	overflow:hidden;
	margin-top: 3rem;
}

/**********************************************************************/
/******************************* DATA ********************************/
/**********************************************************************/

#data
{
	width: 100%;
	max-width: calc(1280px + 4rem);
	margin: 0rem auto;
	padding: 5rem 2rem 0rem 4rem;
}

#data h2
{
	margin-bottom: 1em;
}

#data table
{
	line-height: 1.5;
}

#data th,
#data td
{
	padding-top: .5em;
}

#data th
{
	text-align:left;
	vertical-align: top;
	padding-right: 1em;
}

#data th > p
{
	padding-left: 1em;
}

#data th > p:before
{
	content:'';
	display:block;
	position:absolute;
	top: .5em;
	left:0;
	width:.5em;
	height:.5em;
	border-radius:50%;
	background-color: rgb(50, 50, 50);
}


/*//////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA SCREEN ////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width: 1020px)
{
	.archi_cont .text_photo,
	.archi_cont:nth-child(2n) .text_photo
	{
		flex-direction: column-reverse;
	}
	.archi_cont .text_photo figure
	{
		width: 100%;
		position:static;
	}
	
	.archi_cont .text
	{
		width: 100%;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 900px)
{	
	body .archi_cont
	{
		padding-top:2rem;
	}
	
	.archi_cont .text
	{
		width: 100%;
		padding: 2rem 2rem 0rem 0rem;
	}
}

@media screen and (max-width: 650px)
{
	#data table th,
	#data table td
	{
		display:block;
	}
	#data td
	{
		padding-top:0;
		padding-left: 1em;
	}
}

@media screen and (max-width: 600px), (max-height: 600px)
{
	.entry-title_p .entry-title,
	.secTitle
	{
		padding: 0rem 2rem 0rem 2rem;
	}
	
	.archi_cont
	{
		margin-top: 0;
	}
	
	.archi_cont .secTitle
	{
		margin-bottom: 0rem;
	}
	
	.archi_cont .text
	{
		padding: 2rem 0rem 0rem 0rem;
	}
	
	.archi_cont .text_photo
	{
		width: 100%;
		padding: 2rem 2rem;
	}
}