/***********************************************************************************************************************

design.css

***********************************************************************************************************************/
.design{
}



/*** designのみ **********************************/
.design .pankuzu a:hover {
  color: #ddd;
}

.design #bg_gara{
	background-image: url("../../common/images/bg_gara_repeat_dark@2x.jpg");
}
.foot_caption p{
	color: #ddd;
}

.mx800{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}


@media screen and (max-width: 640px) {
.design #bg_gara{
	background-repeat: no-repeat;
	background: none;
}
.design .bg-layer{
	background-image: url("../../common/images/bg_gara_repeat_dark.jpg");
}
}




/*** sec **********************************/
.sec_design{
	position: relative;
	margin: 5% 0 0;
}
.sec_facade{
	margin-top: 8%;
}
.sec_approach{
	margin-top: 8%;
}
.sec_hall{
	margin-top: 8%;
}
.sec_landscape{
	margin-top: 8%;
}
.sec_plant{
	margin-top: 8%;
}


@media screen and (max-width: 767px) {
.sec_design{
	margin: 8% 0 0;
}
.sec_facade{
	margin-top: 15%;
}
.sec_approach{
	margin-top: 15%;
}
.sec_hall{
	margin-top: 15%;
}
.sec_landscape{
	margin-top: 15%;
}
.sec_plant{
	margin-top: 15%;
}
}




/*** hd **********************************/
.hd{
	position: relative;
}
.hd figure{
	position: relative;
}
.hd figure figcaption{
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	color: #fff;
	text-align: right;
}
.hd img{
	width: 100%;
	height: auto;
}
.hd .pc{}
.hd .sp{ display: none;}


@media screen and (max-width: 767px) {
.hd .pc{ display: none;}
.hd .sp{ display: block;}
}



/*** h1〜  **********************************/
h1.h1_ttl{
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 96%;
	font-size: 26px;
	font-size: clamp(15px, 2.6vw, 26px);
	color: #fff;
	text-align: center;
}
h1.h1_ttl .en{
	display: block;
	font-size: 180%;
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.15em;
}
h1.h1_ttl .jp{
	display: inline-block;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #fff;
}

h2.h2_ttl{
	font-size: 32px; /*36px*/
	font-size: clamp(22px, 3.2vw, 32px); /* clamp(22px, 3.6vw, 36px) */
	font-weight: 500;
	text-align: center;
	color: #ddd;
	line-height: 1.6em;
	letter-spacing: 0.1em;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 1px solid rgba(220,221,221,0.5);
}
h2.h2_ttl .en{
	font-size: 120%;
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	letter-spacing: 0.3em;
}

h4.h4_security{
	position: relative;
	font-size: 24px;
	font-size: clamp(16px, 2.42vw, 24px);
	color: #fff;
	height: 44px;
	line-height: 44px;
	padding: 0 0 0 0.5em;
	background-color: #003e97;
	overflow: hidden;
}
h4.h4_security .sub{
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 0.5em 0 0;
	background-color: #42b1ba;
}
h4.h4_security .sub_txt{
	position: relative;
	z-index: 1;
}
h4.h4_security .sub::before{
	content: "";
	position: absolute;
	z-index: 0;
	top: -20px;
	left: -10px;
	width: 50px;
	height: 200%;
	background-color: #42b1ba;
	transform: rotate(-30deg);
}
.list_security li.secu_3 h4.h4_security{
	position: relative;
	z-index: 2;
}

p.p_lead{
	font-size: 18px;
	font-size: clamp(16px, 1.8vw, 18px);
	line-height: 2em;
	text-align: center;
	color: #ddd;
}

.clr_fff{
	color: #fff;
}
.clr_ddd{
	color: #ddd;
}

.shadow{
	text-shadow: 0 0 5px #000,0 0 5px #000,0 0 5px #000;
}



@media screen and (max-width: 767px) {
p.p_lead{
	text-align: justify;
}
p.p_lead .resp_autowrap{
	display: inline;
}
}


@media screen and (max-width: 639px) {
h4.h4_security{
	height: auto;
	line-height: 1.6em;
	padding: 0.5em 0.5em;
	overflow-x: auto;
}
h4.h4_security .sub{
	position: relative;
	display: inline-block;
	top: auto;
	right: auto;
	padding: 0 0.3em;
	margin-left: 0.5em;
}
h4.h4_security .sub::before{
	display: none;
}
}




/*** 
fig_gaikan
fig_approac
**********************************/
.fig_gaikan,
.fig_approach{
	position: relative;
	margin-top: 4%;
}
.fig_gaikan img,
.fig_approach img{
	width: 100%;
	height: auto;
}

.fig_gaikan figcaption,
.fig_approach figcaption{
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
}



/*** 
fig_facade
fig_hall
**********************************/
.fig_facade,
.fig_hall{
	position: relative;
	margin-top: 5%;
}
.fig_facade img,
.fig_hall img{
	width: 100%;
	height: auto;
}

.fig_facade figcaption,
.fig_hall figcaption{
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
}



/*** fig_landscape **********************************/
.fig_landscape{
	width: 100%;
	max-width: 1330px;
	margin: 4% auto 0;
}
.fig_landscape{
	width: 100%;
	height: auto;
}

.fig_landscape figcaption{
	text-align: right;
	padding: 0.5em 5% 0 0;
}



/*** list_point **********************************/
.list_point{
	margin-top: 8%;
}
.list_point li{
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 30px;
	font-size: clamp(16px, 3.0vw, 30px);
	color: #fff;
	margin-bottom: 0.5em;
	background: #3D62AD;
background: linear-gradient(90deg, rgba(61, 98, 173, 1) 10%, rgba(0, 47, 123, 1) 100%);
}

.list_point li dl{
	width: calc(100% - 0.8em);
	/*max-width: 700px;*/
	display: flex;
	justify-content: flex-start;
	padding: 0.2em 0.4em;
	margin: 0 auto;
}
.list_point li dl dt{
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	font-family: "Cinzel", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	font-size: 90%;
	line-height: 1.2em;
	color: #000;
	text-align: center;
	margin: 0.25em 0.2em 0 0;
	background-color: #fff;
	border-radius: 50%;
}
.list_point li dl dd{
}

.list_point li span.supText{
	font-size: 50%;
}



/*** freed_wrap **********************************/
.freed_wrap{
	position: relative;
	margin-top: 8%;
	background: #B9AB53;
background: linear-gradient(90deg, rgba(185, 171, 83, 1) 0%, rgba(120, 106, 62, 1) 100%);
}
.freed_wrap::before{
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	border: 1px solid #fff;
}


/*** freed_inner **********************************/
.freed_inner{
	position: relative;
	z-index: 1;
	width: 90%;
	max-width: 920px;
	margin: 0 auto;
	padding: 5% 0;
}



/*** freed_ttlBox **********************************/
.freed_ttlBox{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.freed_ttlBox_txt{
	width: 53.26087%;
}
.freed_ttlBox_illust{
	width: 41.304348%;
}

.freed_ttlBox_txt dl{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid #fff;
}
.freed_ttlBox_txt dl dt{
	width: 18%;
	max-width: 80px;
	margin-right: 1em;
}
.freed_ttlBox_txt dl dd{
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 28px;
	font-size: clamp(18px, 2.8vw, 28px);
	color: #fff;
}



@media screen and (max-width: 767px) {
.freed_ttlBox_txt{
	width: 100%;
	order: 2;
}
.freed_ttlBox_illust{
	width: 80%;
	order: 1;
	margin: 0 auto 3%;
}
}




/*** list_freed **********************************/
.list_freed{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
	align-items: stretch; /* ← center ではなく stretch に変更 */
	margin-top: 2%;
}
.list_freed li{
	width: calc(49.5% - 2em);
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 20px;
	font-size: clamp(16px, 1.8vw, 20px);
	text-align: center;
	margin-top: 1%;
	padding: 1em;
	background-color: #fff;
}

.list_freed li.white{
}
.list_freed li.blue{
	color: #fff;
	background-color: #063a79;
	display: flex;
	align-items: center;     /* 縦中央 */
	justify-content: center; /* 横中央 */
}
.list_freed li.blue .txt{
	display: block;
	font-size: 120%;
}

.list_freed li dl{
	display: flex;
	justify-content: flex-start;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}
.list_freed li dl dt{
	width: 50px;
}
.list_freed li dl dd{
	width: calc(100% - 60px);
	margin-left: 10px;
	text-align: left;
}


@media screen and (max-width: 767px) {
.list_freed li{
	width: calc(100% - 2em);
}
.list_freed li dl{
	align-items: center;
	max-width: 100%;
}
.list_freed li dl dt{
	width: 40px;
}
}



/*** list_security **********************************/
.list_security{
	margin-top: 8%;
}
.list_security li{
	position: relative;
	margin-top: 5%;
	width: 100%;
}
.list_security li.secu_1{	
	margin-top: 0;
}
.list_security li.secu_2{	
}
.list_security li.secu_3{	
}


@media screen and (max-width: 639px) {
.list_security{
	margin-top: 12%;
}
}



/*** security_box{ **********************************/
.security_box{
	display: flex;
	justify-content: space-between;
	flex-flow: wrap;
}
.security_box_txt{
	margin: 1.5em 0 2.5em;
}
.list_security li.secu_2 .security_box_txt,
.list_security li.secu_3 .security_box_txt{
	order: 2;
	width: 35%;
	position: absolute;
}

.security_box_illust{
}

.list_security li.secu_2 .security_box_illust,
.list_security li.secu_3 .security_box_illust{
	order: 1;
	width: 66.847826%;
	position: relative;
	z-index: 1;
	margin: -44px 0 0 auto;
}
.list_security li.secu_3 .security_box_illust{
	z-index: 0;
	margin-top: -30px;
}



@media screen and (max-width: 639px) {
.list_security li.secu_2 .security_box_txt,
.list_security li.secu_3 .security_box_txt{
	order: 1;
	width: 100%;
	position: relative;
	margin-bottom: 0;
}
.list_security li.secu_2 .security_box_illust,
.list_security li.secu_3 .security_box_illust{
	order: 2;
	width: 100%;
	margin-top: 0;
}
}



/*** list_plant **********************************/
.list_plant{
	display: flex;
	justify-content: space-around;
	flex-flow: wrap;
	margin-top: 3%;
}
.list_plant li{
	width: 23.4375%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	font-size: 14px;
	font-size: clamp(12px, 1.4vw, 14px);
	color: #ddd;
}
.list_plant li figure{
	position: relative;
	margin-bottom: 0.5em;
}
.list_plant li figure figcaption{
	position: absolute;
	right: 0.5em;
	bottom: 0.5em;
	font-size: 10px;
}


@media screen and (max-width: 639px) {
.list_plant{
	margin-top: 0;
}
.list_plant li{
	width: 48%;
	margin-top: 5%;
}
}



/*************************************************************************************
*************************************************************************************

print

*************************************************************************************
**************************************************************************************/

@media print {

}