@charset "utf-8";


/**************************************************50
 * common_contents
 **************************************************/
#common_contents{
	background-color: #FFFFFF;
}
@media screen and (max-width:767px){
	#common_contents{
	}
}
@media screen and (min-width:768px){
}
@media screen and (min-width:768px) and (max-width:1039px){
	#common_contents{
		padding-top: 20px;
		padding-bottom: 20px;
	}
}
@media screen and (min-width:1040px){
	#common_contents{
		padding-top: 30px;
		padding-bottom: 30px;
	}
}


/**************************************************50
 * page_links
 **************************************************/
#page_links{
}
#page_links a{
	display: inline-block;
	vertical-align: top;
}
#page_links a img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.2s ease-out 0s;
	width: 100%;
}
#page_links a:hover img{
	opacity: 0.7;
}
@media screen and (max-width:767px){
	#page_links{
	}
	#page_links a{
		width: 100%;
	}
}
@media screen and (min-width:768px){
	#page_links a:not(:nth-child(3n+1)){
		margin-left: 20px;
	}
	#page_links a{
		width: -weblit-calc((100% - (20px * 2)) / 3);
		width: calc((100% - (20px * 2)) / 3);
	}
}
@media screen and (min-width:768px) and (max-width:1039px){
	#page_links{
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (min-width:1040px){
	#page_links{
		padding-left: 100px;
		padding-right: 100px;
	}
}


/**************************************************50
 * sns_links
 **************************************************/
#sns_links{
}
#sns_links a{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	border-radius: 50%;
	color: #FFFFFF;
	display: inline-block;
	height: 60px;
	line-height: 60px;
	text-decoration: none;
	transition: opacity 0.2s ease-out 0s;
	vertical-align: middle;
	width: 60px;
}
#sns_links a[href="https://twitter.com/"]{
	background-color: #33CCFF;
}
#sns_links a[href="https://twitter.com/"]:before{
	content: "\F544";
	font-size: 250%;
}
#sns_links a[href="https://www.facebook.com//"]{
	background-color: #3C5A99;
}
#sns_links a[href="https://www.facebook.com//"]:before{
	content: "\F20C";
	font-size: 250%;
}
#sns_links a:hover{
	opacity: 0.7;
}
#sns_links a img{
	width: 100%;
}
@media screen and (max-width:767px){
	#sns_links{
		margin-top: 3.125%;
	}
	#sns_links{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#sns_links a{
		margin: 0 1.5625%;
	}
}
@media screen and (min-width:768px){
}
@media screen and (min-width:768px) and (max-width:1039px){
	#sns_links a{
		margin: 0 10px;
	}
	#sns_links{
		margin-top: 20px;
	}
}
@media screen and (min-width:1040px){
	#sns_links{
		margin-top: 30px;
	}
	#sns_links a{
		margin: 0 15px;
	}
}


/**************************************************50
 * slider
 **************************************************/
#slider_wrap{
	position: relative;
}
#slider_wrap > img{
	cursor: pointer;
	position: absolute;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}
#slider_wrap #slider{
	position: relative;
	width: 100%;
}
#slider_wrap #slider li{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
#slider_wrap > .wrap{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
#slider_wrap > .wrap > section{
	background: url("https://hiroshima-reiwa.com/images/user/top/main_030.png") center center no-repeat;
	background-size: contain;
	position: absolute;
	display: block;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}
#slider_wrap #slider_scroll{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	cursor: pointer;
	position: absolute;
	bottom: 0;
	left: 50%;
	-ms-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	transition: opacity 0.2s ease-out 0s;
	z-index: 2;
}
#slider_wrap #slider_scroll:hover{
	opacity: 0.7;
}
@media screen and (max-width:767px){
	#slider_wrap > .wrap > section{
		font-size: 87.5%;
		top: -webkit-calc(50% - 30px);
		top: calc(50% - 30px);
		width: 87.5%;
		max-width: 300px;
	}
	#slider_wrap.horizontal > .wrap > section{
		max-width: 240px;
	}
	#slider_wrap > .wrap > section:before,
	#slider_wrap > .wrap > section:after{
		content: "";
		display: block;
	}
	#slider_wrap > .wrap > section:before{
		padding-top: 55%;
	}
	#slider_wrap.horizontal > .wrap > section:before{
		padding-top: 50%;
	}
	#slider_wrap > .wrap > section:after{
		padding-top: -webkit-calc(45% - 6.25em);
		padding-top: calc(45% - 6.25em);
	}
	#slider_wrap.horizontal > .wrap > section:after{
		padding-top: -webkit-calc(50% - 6.25em);
		padding-top: calc(50% - 6.25em);
	}
	#slider_wrap > .wrap > section img{
		position: absolute;
		top: 55%;
		left: 50%;
		-ms-transform: translate(-50%, -105%);
		-webkit-transform: translate(-50%, -105%);
		transform: translate(-50%, -105%);
		width: 50%;
	}
	#slider_wrap.horizontal > .wrap > section img{
		top: 50%;
	}
	#slider_wrap #slider_scroll{
		height: 60px;
	}
}
@media screen and (min-width:768px){
	#slider_wrap #slider li{
		background-attachment: fixed;
	}
	#slider_wrap #slider{
		min-height: 640px;
	}
	#slider_wrap > .wrap > section{
		height: 500px;
		padding-top: 100px;
		top: -webkit-calc(50% - 60px);
		top: calc(50% - 60px);
		width: 500px;
	}
	#slider_wrap > .wrap > section img{
		max-width: 300px;
	}
	#slider_wrap > .wrap > section p + p{
		margin-top: 20px;
	}
}
@media screen and (max-width:939px){
	#slider_wrap{
	}
	#slider_wrap #slider{
		height: -webkit-calc(100vh - 56px);
		height: calc(100vh - 56px);
		overflow: visible;
	}
	#slider:before{
		content: "";
		display: block;
		padding-top: 66.66666666666667%;
	}
	#slider_wrap #slider li:before{
		content: "";
		display: block;
		padding-top: 66.66666666666667%;
	}
}
@media screen and (min-width:940px){
	#slider_wrap{
	}
	#slider_wrap #slider{
		height: -webkit-calc(100vh - 140px);
		height: calc(100vh - 140px);
		width: 100%;
	}
}


/**************************************************50
 * intro
 **************************************************/
#intro{
}
#intro:after{
	background-repeat: no-repeat, no-repeat;
	background-size: contain, contain;
	content: "";
	display: block;
	position: relative;
	z-index: 2;
}
#intro.lazyloaded:after{
	background-image: url("https://hiroshima-reiwa.com/images/user/top/intro_010.jpg"), url("https://hiroshima-reiwa.com/images/user/top/intro_020.jpg");
}
#intro > div{
	background-image: url("https://hiroshima-reiwa.com/images/user/back_wihte.png");
	background-repeat: no-repeat;
	display: inline-block;
	position: relative;
	z-index: 1;
}
#intro > div h3{
	color: #EA7900;
	letter-spacing: 0.05em;
}
#intro > div h4{
}
@media screen and (max-width:319px){
	#intro > div h3{
		font-size: 125%;
	}
	#intro > div{
		padding: -webkit-calc(((100% - 207px - (3.125% * 2)) / 2) + 18.75%) 0;
		padding: calc(((100% - 207px - (3.125% * 2)) / 2) + 18.75%) 0;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#intro > div h3{
		font-size: 175%;
	}
	#intro > div{
		padding: -webkit-calc(((100% - 232px - (3.125% * 2)) / 2) + 6.25%) 0;
		padding: calc(((100% - 232px - (3.125% * 2)) / 2) + 6.25%) 0;
	}
}
@media screen and (min-width:360px) and (max-width:426px){
	#intro > div{
		padding: -wbkit-calc(((100% - 208px - (3.125% * 2)) / 2) + 3.125%) 0;
		padding: calc(((100% - 208px - (3.125% * 2)) / 2) + 3.125%) 0;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#intro > div h3{
		font-size: 200%;
	}
}
@media screen and (min-width:427px) and (max-width:767px){
	#intro > div{
		padding: -wbkit-calc(((100% - 208px - 3.125%) / 2) + 6.25%) 0;
		padding: calc(((100% - 208px - 3.125%) / 2) + 6.25%) 0;
	}
}
@media screen and (max-width:767px){
	#intro{
		padding-top: 6.25%;
	}
	#intro:after{
		background-position: top center, bottom center;
		padding-top: 80%
	}
	#intro > div{
		background-position: center center;
		background-size: 110% auto;
		margin-bottom: 3.125%;
		width: 100%
	}
	#intro > div h3{
		margin-bottom: 3.125%;
		padding: 0 3.125% 0 -webkit-calc(3.125% + 0.05em);
		padding: 0 3.125% 0 calc(3.125% + 0.05em);
	}
	#intro > div h4{
		padding: 0 3.125%;
	}
	#intro > div .link_to{
		margin: 3.125% 1.5625% 0;
	}
}
@media screen and (min-width:768px){
	#intro{
		padding-top: 50px;
	}
	#intro:after{
		background-position: center left, center right;
		padding-top: 20%
	}
	#intro > div{
		background-position: center top;
		background-size: cover;
	}
	#intro > div h3{
		font-size: 300%;
		margin-bottom: 20px;
		padding-left: 0.05em;
	}
	#intro > div h4{
		font-size: 125%;
	}
	#intro > div .link_to{
		margin: 30px 10px 0;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#intro > div{
		padding: 30px 0;
		width: 700px;
	}
}
@media screen and (min-width:940px){
	#intro > div{
		padding: 40px 0;
		width: 780px;
	}
}


/**************************************************50
 * article_list
 **************************************************/
.article_list{
}
.article_list > li{
	background-color: #FFFFFF;
	border-radius: 10px;
	box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.2);
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	word-break: break-all;
}
.article_list > li > a:first-child{
	display: block;
}
.article_list > li > a:first-child img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: opacity 0.2s ease-out 0s;
	width: 100%;
}
.article_list > li > a:first-child:hover img{
	opacity: 0.7;
}
@media screen and (max-width:359px){
	.article_list > li{
		text-align: left;
		width: 75%;
	}
	.article_list > li h3{
		padding: 0 2.083333333333333%;
	}
	.article_list > li p{
		padding: 0 2.083333333333333%;
	}
	.article_list > li p:last-child{
		padding: 0 2.083333333333333% 2.083333333333333%;
	}
}
@media screen and (min-width:360px){
	.article_list{
		text-align: left;
	}
}
@media screen and (min-width:360px) and (max-width:639px){
	.article_list > li{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
	.article_list > li h3{
		padding: 0 4%;
	}
	.article_list > li p{
		padding: 0 4%;
	}
	.article_list > li > p:last-child{
		padding: 0 4% 4%;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	.article_list > li{
		margin-left: 3.125%;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	.article_list > li{
		width: -webkit-calc((100% - (3.125% * 4)) / 3);
		width: calc((100% - (3.125% * 4)) / 3);
	}
	.article_list > li h3{
		padding: 0 3%;
	}
	.article_list > li p{
		padding: 0 3%;
	}
	.article_list > li > p:last-child{
		padding: 0 3% 3%;
	}
}
@media screen and (max-width:767px){
	.article_list > li{
		margin-bottom: 3.125%;
	}
	.article_list > li > p:last-child{
		font-size: 87.5%;
	}
	.article_list + .right{
		padding: 0 3.125%;
	}
}
@media screen and (min-width:768px){
	.article_list > li{
		margin-bottom: 20px;
		padding-bottom: 10px;
	}
	.article_list > li h3{
		padding: 0 10px;
		font-size: 112.5%;
	}
	.article_list > li p{
		padding: 0 10px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	.article_list > li{
		margin-left: 20px;
		width: -webkit-calc((100% - (20px * 4)) / 3);
		width: calc((100% - (20px * 4)) / 3);
	}
	.article_list + .right{
		padding: 0 20px;
	}
}
@media screen and (min-width:940px){
	.article_list > li:not(:nth-child(3n+1)){
		margin-left: 30px;
	}
}
@media screen and (min-width:940px) and (max-width:979px){
	.article_list > li{
		width: -webkit-calc((100% - (30px * 2) - (10px * 2)) / 3);
		width: calc((100% - (30px * 2) - (10px * 2)) / 3);
	}
	.article_list > li:nth-child(3n+1){
		margin-left: 10px;
	}
}
@media screen and (min-width:980px){
	.article_list > li{
		width: 290px;
	}
	.article_list,
	.article_list + .right{
		margin-left: auto;
		margin-right: auto;
		width: 930px;
	}
}


/**************************************************50
 * news
 **************************************************/
#news{
	background-color: #FFFFFF;
}
#news .title_section{
	color: #EA7900;
}
#news .title_section b:after{
	background-color: #EA7900;
}
#news .title_section span{
	color: #212121;
}
@media screen and (max-width:767px){
	#news{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#news .title_section{
		padding-bottom: 6.25%;
	}
}
@media screen and (min-width:768px){
	#news{
		padding-top: 50px;
	}
	#news.is_top{
		padding-bottom: 50px;
	}
	#news .title_section{
		padding-bottom: 50px;
	}
}


/**************************************************50
 * report
 **************************************************/
#report{
	background-image: -webkit-linear-gradient(left, #FBE4D3, #FFF8D8);
	background-image: linear-gradient(to right, #FBE4D3, #FFF8D8);
}
#report .title_section{
	color: #EA7900;
}
#report .title_section b:after{
	background-color: #EA7900;
}
#report .title_section span{
	color: #212121;
}
@media screen and (max-width:767px){
	#report{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#report .title_section{
		padding-bottom: 6.25%;
	}
}
@media screen and (min-width:768px){
	#report{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#report .title_section{
		padding-bottom: 50px;
	}
}


/**************************************************50
 * article_detail
 **************************************************/
#article_detail{
	word-break: break-all;
}
#article_detail > p{
	text-align: left;
}
#article_detail > h3{
	line-height: 1.2;
	text-align: left;
}
#article_detail_img{
	display: inline-block;
	overflow: hidden;
}
#article_detail_img img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.2s ease-out 0s;
	width: 100%;
}
#article_detail_img:hover img{
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}
#article_detail > section{
	line-height: 2;
	text-align: left;
}
#article_detail > section img{
	max-width: 100%;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}
@media screen and (max-width:767px){
	#article_detail{
	}
	#article_detail > p{
		padding: 0 3.125%;
	}
	#article_detail > h3{
		font-size: 162.5%;
		margin-bottom: 3.125%;
		padding: 0 3.125%;
	}
	#article_detail_img{
		margin-bottom: 3.125%;
		width: 56.25%;
	}
	#article_detail > section{
		padding: 0 3.125%;
	}
}
@media screen and (min-width:768px){
	#article_detail{
		margin-left: auto;
		margin-right: auto;
		width: -webkit-calc(100% - (20px * 2));
		width: calc(100% - (20px * 2));
		max-width: 840px;
	}
	#article_detail > h3{
		margin-top: 20px;
		font-size: 225%;
		margin-bottom: 40px;
	}
	#article_detail_img{
		margin-bottom: 30px;
		width: 300px;
	}
	#article_detail > section{
		margin-bottom: 50px;
	}
}


/**************************************************50
 * about
 **************************************************/
#about > div{
	background-image: url("https://hiroshima-reiwa.com/images/user/back_wihte.png");
	background-repeat: no-repeat;
	display: inline-block;
	position: relative;
	z-index: 1;
}
#about > div h3{
	color: #EA7900;
	letter-spacing: 0.05em;
}
#about > div p{
	line-height: 2;
}
@media screen and (max-width:319px){
	#about > div h3{
		font-size: 125%;
	}
	#about > div{
		padding: -webkit-calc(((100% - 207px - (3.125% * 2)) / 2) + 18.75%) 0;
		padding: calc(((100% - 207px - (3.125% * 2)) / 2) + 18.75%) 0;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#about > div h3{
		font-size: 175%;
	}
	#about > div{
		padding: -webkit-calc(((100% - 232px - (3.125% * 2)) / 2) + 6.25%) 0;
		padding: calc(((100% - 232px - (3.125% * 2)) / 2) + 6.25%) 0;
	}
}
@media screen and (min-width:360px) and (max-width:426px){
	#about > div{
		padding: -wbkit-calc(((100% - 208px - (3.125% * 2)) / 2) + 3.125%) 0;
		padding: calc(((100% - 208px - (3.125% * 2)) / 2) + 3.125%) 0;
	}
}
@media screen and (min-width:360px) and (max-width:767px){
	#about > div h3{
		font-size: 200%;
	}
}
@media screen and (min-width:427px) and (max-width:767px){
	#about > div{
		padding: -wbkit-calc(((100% - 208px - 3.125%) / 2) + 6.25%) 0;
		padding: calc(((100% - 208px - 3.125%) / 2) + 6.25%) 0;
	}
}
@media screen and (max-width:767px){
	#about{
		padding-top: 3.125%;
	}
	#about > div{
		background-position: center center;
		background-size: 110% auto;
		margin-bottom: 3.125%;
		width: 100%
	}
	#about > div h3{
		margin-bottom: 3.125%;
		padding: 0 3.125% 0 -webkit-calc(3.125% + 0.05em);
		padding: 0 3.125% 0 calc(3.125% + 0.05em);
	}
	#about > div p{
		padding: 0 6.25%;
	}
}
@media screen and (min-width:768px){
	#about{
		padding-top: 10px;
	}
	#about .title_section{
		padding-bottom: 50px;
	}
	#about > div{
		background-position: center top;
		background-size: cover;
	}
	#about > div h3{
		font-size: 300%;
		margin-bottom: 20px;
		padding-left: 0.05em;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#about > div{
		padding: 30px 0;
		width: 700px;
	}
}
@media screen and (min-width:940px){
	#about > div{
		padding: 40px 0;
		width: 780px;
	}
}

/* -- connection -- */
#about_connection{
	background-color: rgba(235, 185, 25, 0.8);
	width: 100%;
}
#about_connection:before{
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
}
#about_connection > div{
}
#about_connection > div h3{
	color: #FFFFFF;
	line-height: 1.2;
}
#about_connection > div p{
	line-height: 2;
}
@media screen and (max-width:767px){
	#about_connection{
	}
	#about_connection:before{
		background-position: center top;
		padding-top: 71.46666666666667%;
	}
	#about_connection > div{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#about_connection > div h3{
		font-size: 200%;
		margin-bottom: 1.5625%
	}
	#about_connection > div p{
		padding: 0 3.125%;
		text-align: left;
	}
}
@media screen and (min-width:768px){
	#about_connection{
		display: table;
		position: relative;
	}
	#about_connection:before{
		background-position: right center;
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}
	#about_connection > div{
		display: table-cell;
		vertical-align: middle;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#about_connection > div h3{
		font-size: 250%;
		margin-bottom: 10px;
	}
	#about_connection > div p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:768px) and (max-width:1239px){
	#about_connection{
	}
	#about_connection > div{
	}
	#about_connection:before{
		padding-top: 35.73333333333334%;
	}
}
@media screen and (min-width:940px){
	#about_connection > div h3{
		font-size: 300%;
		margin-bottom: 20px;
	}
}
@media screen and (max-width:1239px){
	#about_connection:before{
		background-image: url("https://hiroshima-reiwa.com/images/user/about/img_011.jpg");
	}
}
@media screen and (min-width:1240px){
	#about_connection{
		min-width: 1200px;
	}
	#about_connection:before{
		background-image: url("https://hiroshima-reiwa.com/images/user/about/img_010.jpg");
		padding-left: -webkit-calc((100% - 1200px) / 2);
		padding-left: calc((100% - 1200px) / 2);
		padding-top: 25%;
	}
	#about_connection > div{
		padding-right: -webkit-calc((100% - 1200px) / 2);
		padding-right: calc((100% - 1200px) / 2);
	}
}

/* -- meeting -- */
#about_meeting{
	background-color: rgba(135, 182, 24, 0.8);
	width: 100%;
}
#about_meeting > div{
}
#about_meeting > div h3{
	color: #FFFFFF;
	line-height: 1.2;
}
#about_meeting > div p{
	line-height: 2;
}
@media screen and (max-width:767px){
	#about_meeting{
	}
	#about_meeting:before{
		background: url("https://hiroshima-reiwa.com/images/user/about/img_021.jpg") center top no-repeat;
		background-size: contain;
		content: "";
		display: block;
		padding-top: 71.46666666666667%;
	}
	#about_meeting > div{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#about_meeting > div h3{
		font-size: 200%;
		margin-bottom: 1.5625%
	}
	#about_meeting > div p{
		padding: 0 3.125%;
		text-align: left;
	}
}
@media screen and (min-width:768px){
	#about_meeting{
		display: table;
		position: relative;
	}
	#about_meeting:after{
		background-position: right center;
		background-size: contain;
		content: "";
		display: table-cell;
		vertical-align: middle;
		width: 50%;
	}
	#about_meeting > div{
		display: table-cell;
		vertical-align: middle;
	}
	#about_meeting > div h3{
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#about_meeting > div h3{
		font-size: 250%;
		margin-bottom: 10px;
	}
	#about_meeting > div p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:768px) and (max-width:1239px){
	#about_meeting{
	}
	#about_meeting:after{
		background-image: url("https://hiroshima-reiwa.com/images/user/about/img_021.jpg");
		background-repeat: no-repeat;
		padding-top: 35.73333333333334%;
	}
	#about_meeting > div{
	}
}
@media screen and (min-width:940px){
	#about_meeting > div h3{
		font-size: 300%;
		margin-bottom: 20px;
	}
}
@media screen and (min-width:1240px){
	#about_meeting{
		min-width: 1200px;
	}
	#about_meeting:after{
		background-image: url("https://hiroshima-reiwa.com/images/user/about/img_020.jpg");
		padding-right: -webkit-calc((100% - 1200px) / 2);
		padding-right: calc((100% - 1200px) / 2);
		padding-top: 25%;
	}
	#about_meeting > div{
		padding-left: -webkit-calc((100% - 1200px) / 2);
		padding-left: calc((100% - 1200px) / 2);
	}
}

/* -- friendship -- */
#about_friendship{
	background-color: #FFFFFF;
}
#about_friendship > strong{
	color: #EA7900;
	display: block;
}
@media screen and (max-width:767px){
	#about_friendship{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#about_friendship > strong{
		font-size: 150%;
		padding: 0 3.125%;
	}
	#about_friendship > strong br{
		display: none;
	}
}
@media screen and (min-width:768px){
	#about_friendship{
		padding-top: 30px;
	}
	#about_friendship > strong{
		font-size: 225%;
	}
}


/**************************************************50
 * greeting
 **************************************************/
#greeting{
	background-image: -webkit-linear-gradient(left, #FFF6E4, #FFEDD1);
	background-image: linear-gradient(to right, #FFF6E4, #FFEDD1);
}
#greeting figure{
}
#greeting figure > div{
}
#greeting figure figcaption{
	text-align: left;
}
#greeting figure figcaption h3{
	color: #EA7900;
	letter-spacing: 0.3em;
	line-height: 1.2;
}
#greeting figure figcaption h4{
	color: #EA7900;
}
#greeting figure figcaption p{
	line-height: 2;
}
@media screen and (max-width:767px){
	#greeting{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#greeting figure + figure{
		margin-top: 3.125%;
	}
	#greeting figure > div{
		margin-bottom: 1.5625%;
	}
	#greeting figure > div img{
		width: 93.75%
	}
	#greeting figure figcaption h3{
		font-size: 162.5%;
		margin-bottom: 1.5625%;
		padding: 0 3.125%;
		text-align: center;
	}
	#greeting figure figcaption h4{
		font-size: 125%;
		margin-top: 1.5625%;
		padding: 0 3.125%;
	}
	#greeting figure figcaption p{
		padding: 0 3.125%;
	}
	#greeting figure figcaption p + p{
		margin-top: 1.5625%;
	}
}
@media screen and (min-width:768px){
	#greeting{
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#greeting figure{
		display: table;
		width: 100%;
	}
	#greeting figure + figure{
		margin-top: 30px;
	}
	#greeting figure > div{
		display: table-cell;
		vertical-align: middle;
	}
	#greeting figure figcaption{
		display: table-cell;
		vertical-align: middle;
	}
	#greeting figure figcaption h3{
		font-size: 225%;
		margin-bottom: 20px;
	}
	#greeting figure figcaption h4{
		font-size: 150%;
		margin-bottom: 20px;
	}
	#greeting figure figcaption p + p{
		margin-top: 20px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#greeting{
		padding-left: 20px;
		padding-right: 20px;
	}
	#greeting figure:nth-child(1) > div{
		width: 300px;
	}
	#greeting figure:nth-child(2) > div{
		width: 360px;
	}
	#greeting figure:nth-child(1) figcaption{
		padding-left: 20px;
	}
	#greeting figure:nth-child(2) figcaption{
		padding-right: 20px;
	}
	#greeting figure figcaption p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:940px){
	#greeting{
	}
	#greeting figure:nth-child(1) figcaption{
		padding-left: 30px;
	}
	#greeting figure:nth-child(2) figcaption{
		padding-right: 30px;
	}
}
@media screen and (min-width:940px) and (max-width:1199px){
	#greeting figure:nth-child(1) > div{
		width: 330px;
	}
	#greeting figure:nth-child(2) > div{
		width: 460px;
	}
}
@media screen and (min-width:1200px){
	#greeting figure:nth-child(1) > div{
		width: 430px;
	}
	#greeting figure:nth-child(2) > div{
		width: 580px;
	}
}


/**************************************************50
 * information
 **************************************************/
#information{
}
#information h3{
	color: #FFFFFF;
}
#information:after{
	content: "";
	display: block;
}
#information.lazyloaded:after{
	background: url("https://hiroshima-reiwa.com/images/user/information/img_020.png") center center no-repeat;
	background-size: contain;
}
#information h3:after{
	content: "";
	display: block;
}
#information h3.lazyloaded:after{
	background: url("https://hiroshima-reiwa.com/images/user/information/img_010.png") center center no-repeat;
	background-size: contain;
}
#information h4{
	color: #FFFFFF;
}
#information p{
	line-height: 2;
}
#information p strong{
	color: #FFFFFF;
	font-size: 112.5%;
}
@media screen and (max-width:767px){
	#information{
		padding-top: 3.125%;
		padding-bottom: 3.125%;
	}
	#information:after{
		margin-top: 1.5625%;
		padding-top: 93.75%;
	}
	#information h3{
		font-size: 162.5%;
		margin-bottom: 3.125%;
	}
	#information h3:after{
		margin-top: 1.5625%;
		padding-top: 93.75%;
	}
	#information h4{
		font-size: 175%;
		margin-bottom: 3.125%;
	}
	#information p + p{
		margin-top: 1.5625%;
	}
}
@media screen and (min-width:768px){
	#information{
		padding-bottom: 50px;
	}
	#information h3{
		font-size: 225%;
		margin-bottom: 30px;
	}
	#information h4{
		font-size: 250%;
		margin-bottom: 30px;
	}
	#information p + p{
		margin-top: 20px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#information:after,
	#information h3:after{
		margin-top: 20px;
		padding-top: 300px;
	}
}
@media screen and (max-width:939px){
}
@media screen and (min-width:940px){
	#information{
		padding-top: 50px;
		position: relative;
	}
	#information:after{
		position: absolute;
		top: 400px;
		left: -webkit-calc(50% + 13em);
		left: calc(50% + 13em);
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	#information h3{
		position: relative;
	}
	#information h3:after{
		position: absolute;
		top: 200px;
		right: -webkit-calc(50% + 5em);
		right: calc(50% + 5em);
		-ms-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
}
@media screen and (min-width:940px) and (max-width:1039px){
	#information:after,
	#information h3:after{
		height: 300px;
		width: 240px;
	}
}
@media screen and (min-width:1040px) and (max-width:1239px){
	#information:after,
	#information h3:after{
		height: 450px;
		width: 360px;
	}
}
@media screen and (min-width:1240px){
	#information:after,
	#information h3:after{
		height: 600px;
		width: 480px;
	}
}

/* -- friendship -- */
#information_requirements{
	background: url("https://hiroshima-reiwa.com/images/user/information/back_010.jpg") center center no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
#information_requirements h3{
	background-color: #EA7900;
	color: #FFFFFF;
	display: inline-block;
	font-weight: bold;
	letter-spacing: 0.4em;
}
#information_requirements > ul{
}
#information_requirements > ul > li{
	background-color: #FFFFFF;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}
#information_requirements > ul > li h4{
	letter-spacing: 0.1em;
	line-height: 1.2;
	padding-left: 1.2em;
	position: relative;
}
#information_requirements > ul > li h4:before{
	background: url("https://hiroshima-reiwa.com/images/user/icon/mark.png") center center no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 1em;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1em;
}
#information_requirements > ul > li > dl{
}
#information_requirements > ul > li > dl > dt{
	color: #EA7900;
	font-weight: bold;
}
#information_requirements > ul > li > dl > dd{
}
#information_requirements > ul > li .remarks{
	font-size: 87.5%;
}
@media screen and (max-width:767px){
	#information_requirements{
		margin-bottom: 3.125%;
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#information_requirements h3{
		font-size: 150%;
		padding: 1.5625% 3.125% 1.5625% -webkit-calc(3.125% + 0.4em);
		padding: 1.5625% 3.125% 1.5625% calc(3.125% + 0.4em);
		width: 75%;
	}
	#information_requirements > ul{
	}
	#information_requirements > ul > li{
		margin-top: 3.125%;
		padding: 3.125%;
		width: 87.5%;
	}
	#information_requirements > ul > li h4{
		font-size: 125%;
	}
	#information_requirements > ul > li > dl > dt{
		margin-top: 3.846153846153846%;
		margin-bottom: 1.923076923076923%;
	}
	#information_requirements > ul > li .remarks{
		margin-top: 1.923076923076923%;
	}
}
@media screen and (min-width:768px){
	#information_requirements{
		margin-bottom: 50px;
		padding-top: 50px;
		padding-bottom: 50px;
	}
	#information_requirements h3{
		font-size: 200%;
		height: 80px;
		line-height: 80px;
		padding-left: 0.4em;
		width: 550px;
	}
	#information_requirements > ul{
		margin-top: 10px;
	}
	#information_requirements > ul > li{
		margin-top: 20px;
	}
	#information_requirements > ul > li h4{
		font-size: 150%;
	}
	#information_requirements > ul > li > dl > dt{
		margin-top: 20px;
		margin-bottom: 5px;
	}
	#information_requirements > ul > li .remarks{
		margin-top: 5px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#information_requirements > ul > li{
		padding: 40px 40px;
		width: 680px;
	}
}
@media screen and (min-width:940px){
	#information_requirements > ul > li{
		padding: 40px 20px;
		width: 420px;
	}
	#information_requirements > ul > li:nth-child(even){
		margin-left: 30px;
	}
}

/* -- constitution -- */
#information_constitution{
}
#information_constitution h3{
	color: #FFFFFF;
	font-weight: bold;
	letter-spacing: 0.4em;
}
#information_constitution > div{
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#information_constitution > div h4{
	color: #EA7900;
}
#information_constitution > div dl{
	counter-reset: article;
}
#information_constitution > div dl dt{
}
#information_constitution > div dl dd{
}
#information_constitution > div dl dd:before{
	content: "第" counter(article) "条";
	counter-increment: article;
}
#information_constitution > div dl dd *{
}
#information_constitution > div dl dd ul{
}
@media screen and (max-width:767px){
	#information_constitution{
		padding-bottom: 3.125%;
	}
	#information_constitution h3{
		font-size: 150%;
		margin-bottom: 3.125%;
	}
	#information_constitution > div{
		padding: 3.125%;
		width: 93.75%;
	}
	#information_constitution > div dl{
	}
	#information_constitution > div dl dt{
	}
	#information_constitution > div dl dd{
		margin-bottom: 3.571428571428571%;
	}
	#information_constitution > div dl dd:before{
		display: block;
	}
}
@media screen and (min-width:768px){
	#information_constitution{
		padding-bottom: 50px;
	}
	#information_constitution h3{
		font-size: 200%;
		margin-bottom: 30px;
		padding-left: 0.4em;
	}
	#information_constitution > div dl{
	}
	#information_constitution > div dl dt{
	}
	#information_constitution > div dl dd{
		margin-bottom: 20px;
		padding-left: 5em;
		padding-right: 1em;
		text-indent: -5em;
	}
	#information_constitution > div dl dd:before{
		display: inline-block;
		padding-left: 1em;
		text-indent: 0;
		vertical-align: top;
		width: 4em;
	}
	#information_constitution > div dl dd *{
		text-indent: 0;
	}
	#information_constitution > div dl dd ul{
		display: inline-block;
		vertical-align: top;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#information_constitution > div{
		padding: 20px;
		width: 700px;
	}
}
@media screen and (min-width:940px){
	#information_constitution > div{
		padding: 30px;
		width: 760px;
	}
}


/**************************************************50
 * member
 **************************************************/
#member{
	background-color: #FFFFFF;
}
#member ul{
}
#member ul > li{
	box-shadow:1px 1px 2px 2px rgba(0,0,0,0.2);
	display: inline-block;
	vertical-align: top;
	word-break: break-all;
}
#member ul > li > a:first-child,
#member ul > li > div:first-child{
	display :block;
	overflow: hidden;
	position: relative;
}
#member ul > li > a:first-child:before,
#member ul > li > div:first-child:before{
	content: "";
	display :block;
	padding-top: 62.5%;
}
#member ul > li > a:first-child img,
#member ul > li > div:first-child img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%) ;
	z-index: 1;
}
#member ul > li > a:first-child img{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transition: transform 0.2s ease-out 0s;
	width: 100%;
}
#member ul > li > a:first-child:hover img{
	-ms-transform: translate(-50%, -50%) scale(1.1);
	-webkit-transform: translate(-50%, -50%) scale(1.1);
	transform: translate(-50%, -50%) scale(1.1);
}
#member ul > li > div:first-child img{
	height: 100%;
}
#member ul > li h3{
	font-size: 112.5%;
}
#member ul > li h4{
	font-size: 87.5%;
	line-height: 1.8;
}
#member ul > li p{
	font-size: 87.5%;
	line-height: 1.8;
}
@media screen and (max-width:639px){
	#member{
		padding-top: 3.125%;
	}
	#member ul > li{
		padding-bottom: 3.125%;
		text-align: left;
		width: 93.75%;
	}
	#member ul > li + li{
		margin-top: 3.125%;
	}
	#member ul > li > a:first-child,
	#member ul > li > div:first-child{
		margin-bottom: 1.666666666666667%;
	}
	#member ul > li > h3:first-child{
		padding-top: 3.333333333333333%;
	}
	#member ul > li h3{
		padding: 0 3.333333333333333%;
	}
	#member ul > li h4{
		padding: 0 3.333333333333333%;
	}
	#member ul > li p{
		padding: 0 3.333333333333333%;
	}
}
@media screen and (min-width:640px){
	#member ul{
		text-align: left;
	}
	#member ul > li{
		padding-bottom: 10px;
	}
	#member ul > li > a:first-child,
	#member ul > li > div:first-child{
		margin-bottom: 5px;
	}
	#member ul > li > h3:first-child{
		padding-top: 10px;
	}
	#member ul > li h3{
		padding: 0 10px;
	}
	#member ul > li h4{
		padding: 0 10px;
	}
	#member ul > li p{
		padding: 0 10px;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#member ul{
	}
	#member ul > li{
		margin-bottom: 3.125%;
		margin-left: 3.125%;
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#member{
		padding-top: 3.125%;
	}
}
@media screen and (min-width:768px){
	#member{
		padding-top: 50px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#member ul{
		padding: 0 20px;
	}
}
@media screen and (min-width:768px) and (max-width:1039px){
	#member ul > li{
		margin-bottom: 20px;
		width: -webkit-calc((100% - (20px * 2)) / 3);
		width: calc((100% - (20px * 2)) / 3);
	}
	#member ul > li:not(:nth-child(3n+1)){
		margin-left: 20px;
	}
}
@media screen and (min-width:1040px){
	#member ul{
		padding: 0 -webkit-calc((100% - 900px) / 2);
		padding: 0 calc((100% - 900px) / 2);
	}
	#member ul > li{
		margin-bottom: 30px;
		width: 280px;
	}
	#member ul > li:not(:nth-child(3n+1)){
		margin-left: 30px;
	}
}


/**************************************************50
 * contact
 **************************************************/
#contact{
}
#contact h3{
	color: #FFFFFF;
}
#contact .mdi{
	line-height: 1;
}
#contact .mdi > *{
	color: #FFFFFF;
	font-weight: bold;
}
@media screen and (max-width:767px){
	#contact{
		margin-bottom: 3.125%;
	}
	#contact h3{
		font-size: 112.5%;
		margin-bottom: 1.5625%;
	}
	#contact > p{
		padding: 0 3.125%;
	}
	#contact p.mdi{
		margin-bottom: 6.25%;
	}
	#contact .mdi:before{
		font-size: 137.5%;
	}
	#contact .mdi > *{
		font-size: 200%;
	}
}
@media screen and (min-width:768px){
	#contact{
		margin-bottom: 30px;
	}
	#contact .title_section{
	}
	#contact h3{
		font-size: 125%;
	}
	#contact p.mdi{
		margin-bottom: 30px;
	}
	#contact .mdi:before{
		font-size: 175%;
	}
	#contact .mdi > *{
		font-size: 300%;
	}
}


/**************************************************50
 * form
 **************************************************/
#form{
}
@media screen and (max-width:767px){
	#form{
	}
	#form .error,
	#form .success,
	#form .failed{
		margin: 0 auto 3.125%;
		width: 93.75%;
	}
	#form > p{
		padding: 0 3.125%;
	}
	#form_btn [class^="btn_"]{
		margin: 3.125% 1.5625% 0;
	}
}
@media screen and (min-width:768px){
	#form{
	}
	#form .error,
	#form .success,
	#form .failed{
		width: 680px;
	}
	#form .error{
		margin: 20px auto 0;
	}
	#form .success,
	#form .failed{
		margin: 0 auto 30px;
	}
	#form_btn{
		margin-top: 30px;
	}
}


/**************************************************50
 * policy
 **************************************************/
#policy{
}
#policy > div{
	background-color: #FFFFFF;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
#policy > div h3{
	letter-spacing: 0.1em;
	line-height: 1.2;
	padding-left: 1.2em;
	position: relative;
}
#policy > div h3:before{
	background: url("https://hiroshima-reiwa.com/images/user/icon/mark.png") center center no-repeat;
	background-size: contain;
	content: "";
	display: block;
	height: 1em;
	line-height: 1;
	position: absolute;
	top: 50%;
	left: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 1em;
}
#policy > div h4{
	color: #EA7900;
}
#policy > div dl{
	counter-reset: number;
}
#policy > div dl dt{
	padding-left: 2em;
	text-indent: -2em !important;
}
#policy > div dl dt:before{
	counter-increment: number;
	content: counter(number) "．";
	display: inline-block;
	text-align: right;
	text-indent: 0 !important;
	width: 2em
}
@media screen and (max-width:767px){
	#policy{
		margin-bottom: 3.125%;
	}
	#policy > div{
		padding: 3.125%;
		width: 93.75%;
	}
	#policy > div h3{
		font-size: 125%;
	}
	#policy > div h4{
		margin-top: 3.571428571428571%;
	}
	#policy > div dl dt{
		margin-top: 3.571428571428571%;
	}
}
@media screen and (min-width:768px){
	#policy{
		margin-bottom: 50px;
	}
	#policy > div h3{
		font-size: 150%;
	}
	#policy > div dl dt{
		margin-top: 20px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#policy > div{
		padding: 20px;
		width: 700px;
	}
	#policy > div h4{
		margin-top: 20px;
	}
}
@media screen and (min-width:940px){
	#policy > div{
		padding: 30px;
		width: 760px;
	}
	#policy > div h4{
		margin-top: 30px;
	}
}


/**************************************************50
 * sitemap
 **************************************************/
#sitemap{
}
#sitemap a{
	color: #FFFFFF;
}
#sitemap ul{
}
@media screen and (max-width:767px){
	#sitemap{
		margin-bottom: 6.25%;
	}
	#sitemap ul > li + li{
		margin-top: 3.125%;
	}
	#sitemap ul > li a{
		font-size: 112.5%;
	}
}
@media screen and (min-width:768px){
	#sitemap{
		margin-bottom: 50px;
	}
	#sitemap ul > li + li{
		margin-top: 20px;
	}
	#sitemap ul > li a{
		font-size: 125%;
	}
}