@charset "utf-8";

/*

トップページ用のスタイルです。

*/

/* ------ */
/* header */
/* ------ */
@media screen and (max-width:767px) {
	header h1 > a {
		color: #000;
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		padding: 0 5px;
		height: 60px;
		z-index: 100;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: rgba(255,255,255,0.8)
	}
	header h1 img {
		display: block;
		width: 50px;
		height: 50px;
		z-index: 100;
	}
	header h1 .txt_area span {
		font-size: 5.25vw;
		line-height: 60px;
		font-weight: normal;
	}
	header h1 .txt_area span.en {
		display: none;
	}
	header .contact_area {
		position: fixed;
		display: flex;
		justify-content: space-between;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 3.5rem;
		z-index: 100;
		background-color: rgba(141,124,82,0.8);
	}
	header .contact_area a.tel {
		width: calc(100% - 4.5rem);
		color: #fff;
		font-size: 2rem;
		font-weight: bold;
		text-align: center;
		padding: 0.125rem 1rem;
	}
	header .contact_area a.tel::before {
		content: "";
		display: inline-block;
		background-image: url("images/tell_icon.png");
		width: 1.75rem;
		height: 1.75rem;
		background-size: contain;
		margin-right: 0.5rem;
	}
	header .contact_area a.tel::after {
		content: "";
		width: 0.875rem;
		display: inline-block;
	}
	header .contact_area a.contact_btn {
		width: 4.5rem;
		height: 3.5rem;
		background: rgba(255,255,255,0.5) url('images/contact_icon.png') 1.125rem 50% no-repeat;
		background-size:2.5rem;
	}
	header .contact_area a.contact_btn span {
		display: none;
	}
}
@media screen and (min-width:1025px) {
	header h1 {
		padding:1.25rem 0 0 1.25rem;
	}
}
@media screen and (min-width:1200px) {
}

/* ----------- */
/* sp_menu */
/* ----------- */
@media screen and (max-width:767px) {
	#sp_menu {
		position:fixed;
		top:0;
		right:0;
		z-index:101;
		width:60px;
		height:60px;
		margin:0;
		background-color: #ccc;
		cursor:pointer;
	}
	#sp_menu > div {
		position: relative;
		top: 0;
		right: 0;
		left: 0;
		margin: auto;
		width: 60%;
		height: 68%;
		padding:17px 12px;
	}	
	#sp_menu > div::before,
	#sp_menu > div::after,
	#sp_menu > div span.bar {
		display:block;
		content:"";
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		width: 100%;
		height:3px;
		margin:auto;
		background:#fff;
		-webkit-transition:0.15s ease-out;
		-moz-transition:0.15s ease-out;
		-ms-transition:0.15s ease-out;
		transition:0.15s ease-out;
	}
	#sp_menu span.title{
		font-size: 12px;
		line-height: 1em;
		display: block;
		position: relative;
		width: 100%;
		margin:auto;
		padding-bottom: 5px;
		color: #fff;
		text-align: center;
		list-style-type: -1px;
		-webkit-transition: 0.15s ease-out;
		-moz-transition: 0.15s ease-out;
		-ms-transition: 0.15s ease-out;
		transition: 0.15s ease-out;
	}

	#sp_menu > div::before { top:calc(50% - 3px); }
	#sp_menu > div::after { bottom:calc(50% - 3px); }
	#sp_menu.open > div::before {
		top:0;
		transform:rotate(45deg);
	}
	#sp_menu.open > div::after {
		bottom:0;
		transform:rotate(-45deg);
	}
	#sp_menu.open > div > span.bar { display:none; }
}

/* ----------- */
/* global_navi */
/* ----------- */
@media screen and (max-width:767px) {
	header nav{
		position:fixed;
		top:0;
		right:-100%;
		bottom:0;
		/* z-index:10; */
		z-index: 100;
		width:100%;
		background:rgba(0,0,0,0.9);
	}
	header nav ul{
		display:-ms-flex-box;
		display:-moz-flex;
		display:-webkit-flex;
		display:flex;
		-ms-flex-direction:column;
		-webkit-flex-direction:column;
		flex-direction:column;
		-ms-flex-pack:center;
		-webkit-justify-content:center;
		/* justify-content:center; */
		justify-content: flex-start;
		overflow-y: scroll;
		/* height:100%; */
		height:100%;
		margin:0;
		padding:75px 15%;
	}
	header nav ul li {
		margin-bottom:0.5rem;
		/* letter-spacing:-.40em; */
	}
	header nav ul a{
		color:#fff;
	}
	header nav ul a.nest {
		color: #c3b29a;
		font-weight:600;
		pointer-events: none;
	}
	header nav ul span{
		display:inline-block;
		width:50%;
		letter-spacing:normal;
		vertical-align:bottom;
	}
	header nav ul a span{
		width: auto;
	}
	header nav ul span.EnTit{
		font-size:2.2rem;
		font-family: 'Saira Extra Condensed', sans-serif;
	}
	header nav ul li ul {
		height: auto;
		padding: 0.75rem 0 0 1rem;
	}
}
@media print,screen and (min-width:768px) {
	#sp_menu { display:none; }
	.global_navi {
		position:absolute;
		top:2rem;
		right:2rem;
		z-index:30;
		font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	}
	.global_navi > ul { display:flex; }
	.global_navi > ul > li { 
		display:flex;
		margin:0;
		padding:0 0.5rem;
		width: 2rem;
		line-height: 1rem;
		transition: 0.3s ease;
	}
	.global_navi > ul > li.union_parent.open_child {
		/* width:10rem; */
		width:7.5rem;
	}
	.global_navi > ul > li.service_parent.open_child {
		/* width:12rem; */
		width: 10.5rem;
	}
	.global_navi > ul > li a {
		color:#000;
		line-height:1;
/*		font-size:1.3125rem;*/
		font-size: 1.25rem;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
	}
	.global_navi > ul > li a img {
		display:none;
		width:100%;
		height:auto;
	}
	.global_navi > ul > li > .nest { cursor:pointer; }
	.global_navi > ul > li > .nest + div { display:none; }
	.global_navi > ul > li > .nest + ul {
		display:flex;
		justify-content:center;
		width:0;
		list-style:none;
		overflow:hidden;
		-webkit-transition: 0.2s ease-out;
		-moz-transition: 0.2s ease-out;
		-ms-transition: 0.2s ease-out;
		transition: 0.2s ease-out;
	}
	.global_navi > ul > li > .nest.union.open + ul {
		/* width:8rem; */
		width:6rem;
	}
	.global_navi > ul > li > .nest.service.open + ul {
		/* width:10rem; */
		width:9rem;
	}
	.global_navi > ul > li > .nest + ul li { 
		width: auto;
		line-height: 1;
		padding:0;
		opacity: 0;
		transition: 0.2s;
	}
	.global_navi > ul > li > .nest.open + ul li { 
		width: auto;
		line-height: 1;
		padding:1rem 0.4rem 0;
		opacity: 1;
	}
	.global_navi > ul > li > .nest + ul a { font-size:1.1rem; }
	.global_navi > ul > li > .nest + ul a::before { content:"＋"; }
}


@media print,screen and (min-width:768px) {
	.global_navi > ul > li { 
		padding:0 0.375rem;
	}
	.global_navi > ul > li > .nest.open + ul li {
		padding:1rem 0.25rem 0;
	}
}

/* -------------- */
/* 共通 */
/* -------------- */
ul li { list-style: none; }

.content_wrap {
	width: calc(100% - 12rem);
	max-width: 992px;
	margin: 0 auto;
}

@media screen and (max-width:767px) {
	.content_wrap {
		width: 85%;
		margin: 0 auto;
	}
}

/* ----------- */
/* global_navi */
/* ----------- */
@media print,screen and (min-width:768px) {
	.global_navi > ul > li a { color:#fff; }
}

/* ----------- */
/* main_visual */
/* ----------- */
header.main_visual{
	display: flex;
	justify-content: center;
	align-items: center;
	position:relative;
	width:100%;
	height:100vh;
	background:url(images/home/mv_back.jpg) 50% 100% no-repeat;
	background-size:cover;
}
header.main_visual > .mv_photo_area {
	width:100%;
	height:150px;
}
@media screen and (max-width:767px) {
	header.main_visual {
		/* height: 60vw; */
		height: 80vw;
		align-items: flex-end;
	}
	header.main_visual > .mv_photo_area {
		width:100%;
		height:50px;
	}
}
@media print,screen and (min-width:768px) {
	header.main_visual::after {
		display:block;
		content:"";
		position:absolute;
		right:0;
		bottom:0;
		left:0;
		z-index:4;
		width:0;
		height:0;
		border-right:transparent 80vw solid;
		border-bottom:#fff 100px solid;
		border-left:transparent 20vw solid;
	}
	header.main_visual > .logo_area {
		position:absolute;
		top:0;
		bottom:0;
		left:2rem;
		z-index:5;
		width:180px;
		height:100vh;
		padding:1.5rem 1.25rem;
		background:rgba(255,255,255,0.8);
	}
	header.main_visual > .logo_area h1 {
		margin:0;
		padding:0;
		font-weight:normal;
	}
	header.main_visual > .logo_area h1 img { width:100%; }
	header.main_visual > .logo_area h1 .txt_area {
		margin:1.25rem auto 2rem;
		line-height:1;
		text-align:center;
		font-size:1.75rem;
		overflow: hidden;
		padding: 0 2.75rem;
	}
	header.main_visual > .logo_area h1 span {
		color: #000;
		display:block;
		width:1em;
		-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
		writing-mode: vertical-rl;
		float: right;
	}
	header.main_visual > .logo_area h1 span.en { 
		color:#8d7c52;
		font-size:0.875rem;
		float: left;
	}
	header.main_visual > .logo_area .contact_area {
		padding:2rem 0;
		border-top:#c3b29a 1px solid;
		border-bottom:#c3b29a 1px solid;
	}
	header.main_visual > .logo_area .contact_area a {
		display:block;
		margin:0 auto;
	}
	header.main_visual > .logo_area .contact_area a.tel {
		color:#000;
		text-align:center;
		font-size:1.25rem;
	}
	header.main_visual > .logo_area .contact_area a.contact_btn {
		padding:0.5em 1em;
		color:#fff;
		line-height:1;
		text-align:right;
		font-size:0.875rem;
		border:#ae9980 1px solid;
		border-radius:1rem;
		background:#ae9980 url('images/contact_icon.png') 0.75rem 50% no-repeat;
		background-size:20px;
	}
	header.main_visual > .mv_photo_area {
		display:flex;
		position:absolute;
		right:0;
		/* bottom:calc(100px + 2rem); */
		bottom:calc(207px + 2rem);
		left:0;
		z-index:3;
		width:100%;
		height:150px;
	}
	header.main_visual > .mv_photo_area li {
		width:20%;
	}
}
@media print,screen and (min-width:768px) and (max-width:1024px) {
	header.main_visual > .logo_area .contact_area a.tel {
		font-size: 1rem
	}
}

/* ---------------- */
/* introduction sec */
/* ---------------- */
.introduction_sec .introduction_area {
	display:flex;
	justify-content:center;
	flex-direction:row-reverse;
	flex-wrap: wrap;
	width:100%;
	margin:0 auto;
	padding:60px 0 130px;
	position:relative;
}
.introduction_sec .service_area {
	position:relative;
	background:#1a1a1a;
}
/* .introduction_sec .introduction_area::after {
	display:block;
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	width:100%;
	height:0;
	border-bottom:#1a1a1a 100px solid;
	border-left:transparent 100vw solid;
} */
.introduction_sec .introduction_area > h1,
.introduction_sec .introduction_area > .body_area {
	margin-left:3.3rem;	
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.introduction_sec .introduction_area > h1 {
	color:#a28039;
	font-size:3.3rem;
	font-weight:normal;
}
.introduction_sec .introduction_area > .body_area p {
	margin-left:1em;
	padding-top:2rem;
	font-size:1.3rem;
	letter-spacing: 3px;
}
.introduction_sec .service_area::after {
	position:absolute;
	display:block;
	content:"";
	margin:0 auto;
	/*background: url('images/home/top_intro_service.png') 100% 0 no-repeat;*/
	background-repeat: no-repeat;
}
.introduction_sec .service_area ul {
	display:flex;
	justify-content:space-around;
	margin:auto;
	padding:2rem;
	text-align:left;
}
.introduction_sec .service_area ul li {
	/*width:60px;*/
	margin:60px 1rem 0;
	padding-top:60px;
	
}
.introduction_sec .service_area ul .hyogu { background:url('images/home/service_link_icon_hyogu.png') 50% 0 no-repeat; }
.introduction_sec .service_area ul .floor { background:url('images/home/service_link_icon_floor.png') 50% 0 no-repeat; }
.introduction_sec .service_area ul .cloth { background:url('images/home/service_link_icon_cloth.png') 50% 0 no-repeat; }
.introduction_sec .service_area ul a{
	display:flex;
	justify-content:center;
	color:#fff;
	transition: 0.3s ease;
}

.introduction_sec .service_area ul a:hover{
	text-shadow: 0px 0px 6px #fff;
}



@media all and (-ms-high-contrast: none){
	.introduction_sec .service_area ul a{
		display: block;
	}
}
.introduction_sec .service_area ul li a span {
	display:block;
	margin:0 0.25rem;
	line-height:1;
	height: 23rem;
	letter-spacing:normal;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
@media all and (-ms-high-contrast: none){
	.introduction_sec .service_area ul li a span {
		display:inline-block;
	}
}
.introduction_sec .service_area ul li a span.main {
	font-size:2.8rem;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.introduction_sec .service_area ul li a span.sub { color:#c5b69c; }

@media screen and (max-width:767px) {
	.introduction_sec .introduction_area {
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 20vw;
	}
	.introduction_sec .introduction_area::after {
		border-bottom:#1a1a1a 10vw solid;
	}
	.introduction_sec .introduction_area > h1 {
		color:#a28039;
		font-size:2rem;
		font-weight:normal;
		margin-left:2rem;
	}
	.introduction_sec .introduction_area > .body_area {
		min-height: 24em;
		margin-left: 0;
	}
	.introduction_sec .introduction_area > .body_area p {
		min-height: 24em;
		font-size: 1rem;
	}

	.introduction_sec .service_area {
		padding-bottom: 40vh;
	}
	.introduction_sec .service_area ul {
		width: 100%;
	}

	.introduction_sec .service_area ul li {
		margin: 0;
		z-index: 10;
	}
	.introduction_sec .service_area ul li span.main,
	.introduction_sec .service_area ul li span.sub {
		width: 1em;
		height: 23rem;
	}
	.introduction_sec .service_area::after {
		width: 100%;
		height: 100vw;
		bottom: 0;
		left:0;
		background-size: contain;
		background-position: bottom;
		z-index: 1;
	}
}
@media print,screen and (min-width:768px) and (max-width:1024px) {
	.introduction_sec .introduction_area {
		flex-wrap: wrap;
		justify-content: center;
		padding-bottom: 20vw;
	}
	/* .introduction_sec .introduction_area {
		height: calc(500px + 60px + 130px);
	} */
	.introduction_sec .service_area {
		min-height:602px;
	}
	.introduction_sec .service_area::after {
		top:0;
		right:0;
		left:50vw;
		width:840px;
		height:602px;
	}
	.introduction_sec .service_area ul {
		position:absolute;
		top: 0;
		right:50vw;
		width:50vw;
	}
}

@media print,screen and (min-width:1025px) {
	.introduction_sec .introduction_area {
		height: calc(500px + 60px + 130px);
	}
	.introduction_sec .service_area {
		min-height:602px;
	}
	.introduction_sec .service_area::after {
		top:0;
		right:0;
		left:50vw;
		width:840px;
		height:602px;
	}
	.introduction_sec .service_area ul {
		position:absolute;
		top: 0;
		right:50vw;
		width:50vw;
	}
}

/* -------------------- */
/* total coordinate sec */
/* -------------------- */
.total_coordinate {
	display:flex;
	flex-wrap:wrap;
	flex-direction:row-reverse;
	position:relative;
	justify-content:space-between;
}

.total_coordinate::before {
	display:block;
	content:"";
	position:absolute;
	top:0;
	right:0;
	left:0;
	z-index:5;
	width:0;
	height:0;
	border-top:#1a1a1a 100px solid;
	border-left:transparent 100vw solid;
}
.total_coordinate::after {
	display:block;
	content:"";
	position:absolute;
	right:0;
	bottom:0;
	left:0;
	z-index:5;
	width:0;
	height:0;
	border-bottom:#fff 100px solid;
	border-left:transparent 100vw solid;
}

.total_coordinate section {
	padding-top:calc(100px + 4rem);
	padding-right:1rem;
	padding-bottom:calc(100px + 4rem);
	padding-left:4rem;
	color:#fff;
	text-align:left;
	background:url('images/home/top_total_coordinate_back.jpg') 50% 50% no-repeat;
	background-size:cover;
}
.total_coordinate section h1 {
	margin-bottom:2rem;
}
.total_coordinate section h1 span {
	display:block;
	line-height:1;
	font-weight:normal;
}
.total_coordinate section h1 span.main {
	text-indent:-0.3em;
	font-size:2rem;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.total_coordinate section h1 span.sub {
	color:#c5b69c;
	font-size:1.2rem;
}
.total_coordinate section .body_area {
	margin-bottom:2rem;
}
.total_coordinate section .body_area + ul {
	display:flex;
	justify-content:space-around;
}
.total_coordinate section .body_area + ul li a {
	display:block;
	padding:0.5rem 1rem;
	color:#fff;
	line-height:1;
	text-align:center;
	font-size:1rem;
	border-radius:2rem;
	background:#000;
}

.total_coordinate section .body_area + ul li a:hover {
	color: #000;
	background-color: #fff;
	opacity: 1;
}


.total_coordinate .photo {
	background:url('images/home/top_total_coordinate_photo.jpg') 50% 50% no-repeat;
	background-size:cover;
}
@media screen and (max-width:767px) {
	.total_coordinate section {
		padding-left: 1rem;
		padding-right: 1rem;
		padding-bottom: 6rem;
		margin: 0 auto;
	}
	.total_coordinate .photo {
		width: 100%;
		height: 50vh;
	}
	.total_coordinate section .body_area + ul {
		flex-wrap: wrap;
	}
	.total_coordinate section .body_area + ul li {
		width: 100%;
		margin-top: 0.5rem;
	}


}
@media print,screen and (min-width:768px) {
	.total_coordinate section,
	.total_coordinate .photo {
		width:50%;
	}
}

/* --------------------- */
/* union information sec */
/* --------------------- */
.union_information {
	width: 100%;
	max-width: 1200px;
	margin:0 auto;
	padding:4rem 0;
}
.union_information h1 {
	display:flex;
	justify-content:center;
	position:relative;
	margin:0 auto;
	font-weight:normal;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.union_information h1.union {
	width:12.5rem;
	height:12.5rem;
	margin-bottom:4rem;
}
.union_information h1.union::before {
	display:block;
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:12.5rem;
	height:12.5rem;
	margin:auto;
	border:#000 1px solid;
	transform:rotate(45deg);
	transfo-rm-origin:50% 50%;
}
.union_information h1 span {
	display:block;
	margin-right:0.5rem;
	line-height:1;
	text-align:center;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.union_information h1 span.main { font-size:2rem; }
.union_information h1 span.sub { font-size:1.2rem; color:#c5b69c; }

.union_information .union_area {
	position:relative;
}
.union_information .union_area::after {
	display:block;
	content:"";
	background:url('images/home/top_union_info_img.jpg') 0% 50% no-repeat;
	background-size:cover;
	height:300px;
}

.union_information .union_area .body_area {
	margin:0;
	padding:2rem 1rem;
	text-align: center;
}

.union_information .union_area .body_area {
}

.union_information .union_area .body_area ul {
	display:flex;
	justify-content:space-around;
}
.union_information .union_area .body_area ul li { min-width:30%; }
.union_information .union_area .body_area ul li a {
	display:block;
	padding:0.5rem 1rem;
	color:#000;
	line-height:1;
	text-align:center;
	font-size:1rem;
	border:#000 1px solid;
	border-radius:2rem;
	/*background:#000;*/
}
.union_information .union_area .body_area ul li a:hover {
	background-color: #000;
	color: #fff;
}


.union_information .entry_area {
	display:flex;
	justify-content:space-between;
	flex-wrap: wrap;
	width: 95%;
	margin-right: auto;
	margin-left: auto;
}
.union_information .entry_area > ul {
	display:flex;
	justify-content:space-between;
	width: 100%;
}
.union_information .entry_area > ul li {
	width:33%;
}
.union_information .entry_area > ul li a {
	display:block;
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
}
.union_information .entry_area > ul li a.technic {
	background:url('images/home/union_entry_img_technictest.jpg') 50% 50% no-repeat;
	background-size:cover;
}
.union_information .entry_area > ul li a.guide {
	background:url('images/home/union_entry_img_guide.jpg') 50% 50% no-repeat;
	background-size:cover;
}
.union_information .entry_area > ul li a.member {
	background:url('images/home/union_entry_img_member.jpg') 50% 50% no-repeat;
	background-size:cover;
}
.union_information .entry_area > ul li a span{
	display:block;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:1em;
	margin:auto;
	color:#fff;
	letter-spacing:0.2rem;
	text-align:center;
	font-size:1.5rem;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
@media screen and (max-width:767px) {
	.union_information .union_area .body_area {
		padding-bottom: 4rem;
		text-align: left;
	}
	.union_information .union_area::after {
		width:100%;
		height:300px;
	}
	.union_information .union_area .body_area p:last-of-type{
		margin-bottom: 3rem;
	}
	.union_information .union_area .body_area ul{
		flex-wrap: wrap;
	}
	.union_information .union_area .body_area ul li {
		width: 100%;
		margin-top: 0.5rem;
	}
	.union_information .entry_area > ul {
		width:100%;
		margin-bottom: 1rem;
	}
	.union_information .entry_area > ul li { height: 50vh; }

}
@media print,screen and (min-width:768px) {
	.union_information .entry_area > ul { width:60%; }
	.union_information .entry_area .body_area {width: 36%;}
}
@media print,screen and (min-width:1024px) {
	.union_information h1.union {
		margin-bottom: 8rem;
	}
	.union_information .union_area::after {
		position:absolute;
		top:0;
		right:0;
		z-index:5;
		width:calc(50% - 30px);
	}
	.union_information .union_area .body_area {
		width:50%;
		text-align: right;
	}
}
@media print,screen and (min-width:1200px) {
	.union_information .entry_area {
		width: 100%;
	}
}

/* ---------- */
/* topics sec */
/* ---------- */
.topics_sec {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap: wrap;
	width: 100%;
	max-width:1200px;
	margin:0 auto;
	min-height:15rem;
}
.topics_sec h1 {
	display:flex;
	justify-content:center;
	position:relative;
	margin:0 auto;
	font-weight:normal;
	font-family: "游明朝", Yu Mincho, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.topics_sec h1 {
	width:10rem;
	height:10rem;
	margin:0 2.5rem 2.5rem;
}
.topics_sec h1::before {
	display:block;
	content:"";
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	width:10rem;
	height:10rem;
	margin:auto;
	border:#000 1px solid;
	transform:rotate(45deg);
	transfo-rm-origin:50% 50%;
}
.topics_sec h1 span {
	display:block;
	margin-right:0.25rem;
	line-height:1;
	text-align:center;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.topics_sec h1 span.main { font-size:2rem; }
.topics_sec h1 span.sub { font-size:1.2rem; color:#c5b69c; }
.topics_sec dl {
	display:flex;
	flex-wrap:wrap;
	width: 100%;
}
.topics_sec a:hover {
	text-decoration: underline;
}

@media screen and (max-width:767px) {
	.topics_sec dl {
		width: 95%;
		flex-wrap: wrap;
	}
	.topics_sec dl dt { width:100%; }
	.topics_sec dl dd {
		width:100%;
		margin-bottom: 1rem;
	}
	
}
@media print,screen and (min-width:768px) {
	.topics_sec dl {
		width: 80%;
		margin-right: auto;
		margin-left: auto;
	}
	.topics_sec dl dt { width:15%; }
	.topics_sec dl dd { width:85%; }

}
@media print,screen and (min-width:1024px) {
	.topics_sec h1 {
		margin:0 2.5rem;
	}
	.topics_sec {
		justify-content: space-between;
	}
	.topics_sec dl {
		width:calc(100% - 20rem);
	}
}

#topics_wrap{
	background-color: rgba(255, 255, 255, 0.9);
	padding: 20px;
	width: 100%;
	max-width: 700px;
	position: absolute;
	bottom: 2%;
	right: 2%;
	box-shadow: 6px 6px 6px 0px rgba(40, 40, 40, 0.45);
	z-index: 5;
}
#topics_wrap dl{
	display: flex;
	flex-wrap: wrap;
	height: 158px;
	overflow-y: scroll;
}
#topics_wrap dl dt{
	width: 20%;
	color: #ae9980;
}
#topics_wrap dl dd{width: 80%;}
#topics_wrap dl dd a{color: #1a1a1a;}

@media screen and (max-width:767px) {
	#topics_wrap{
		background-color: rgba(255, 255, 255, 0.9);
		padding: 15px;
		width: 90%;
		max-width: 700px;
		position: absolute;
		bottom: 22%;
		right: auto;

		left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
		box-shadow: 6px 6px 6px 0px rgba(40, 40, 40, 0.45);
		z-index: 5;
	}
	#topics_wrap dl{
		display: flex;
		flex-wrap: wrap;
		height: 80px;
		overflow-y: scroll;
	}
	#topics_wrap dl dt{
		width: 30%;
		color: #ae9980;
	}
	#topics_wrap dl dd{width: 70%;}
	#topics_wrap dl dd a{color: #1a1a1a;}
}

.youtube_wrap{
	width: 100%;
	/* max-width: 1200px; */
	text-align: center;
	margin: 0px auto 0;
	padding-bottom: 120px;
	position: relative;
}

.youtube_wrap::after {
	display:block;
	content:"";
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	width:100%;
	height:0;
	border-bottom:#1a1a1a 100px solid;
	border-left:transparent 100vw solid;
}

.youtube_wrap .contents_inner{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.youtube_wrap .contents_inner iframe {
  width: 100%;
  height: 100%;
}

@media screen and (max-width:1024px) {
	.youtube_wrap .contents_inner{
		width: 90%;
	}
}


/* ---- */
/* LAST */
/* ---- */