/* CSS Document */
@import url("reset.css");
@import url("common.css");
@import url("styles.css");

/* H2
---------------------------------------------------------- */
#h2Hanger::after{ background-image: url("../img/greeting/bg_h2_facility.jpg");}
.message #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_message.jpg");}
.idea #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_idea.jpg");}
.feature #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_feature.jpg");}
.facility #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_facility.jpg");}
.access #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_access.jpg");}
.faq #h2Hanger::after{ background-image: url("../img/greeting/bg_h2_faq.jpg");}



/* Message
---------------------------------------------------------- */
.message_copy{
	color: var(--mainColor);
	font-family: 'Noto Serif JP','游明朝',serif;
	font-size: 1.5rem;
}

.message_table th{ white-space: nowrap;}

@media screen and (max-width: 690px){
	.message_copy{ font-size: 1.1rem;}
	.message_table th,
	.message_table td{
		display: block;
		white-space: wrap;
	}
}


/* Carrer Support
---------------------------------------------------------- */
.ritsu_hanger .wp-block-group__inner-container{	
	display: -webkit-box;
	display: flex;
  -webkit-box-align: center;
				align-items: center;
  -webkit-box-pack: justify;
				justify-content: center;
	flex-wrap: wrap;
}

.ritsu_item{
	position: relative;
	width: 250px;
	max-width: calc(50% - 20px);
	margin: 10px;
	padding-top: 230px;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 50% 100%, hsla(144,59%,89%,1) 0px, transparent 50%),
	radial-gradient(at 92% 13%, hsla(31,84%,90%,1) 0px, transparent 50%),
	radial-gradient(at 51% 53%, hsla(29,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 12% 87%, hsla(180,35%,84%,1) 0px, transparent 50%),
	radial-gradient(at 86% 85%, hsla(344,83%,92%,1) 0px, transparent 50%),
	radial-gradient(at 11% 14%, hsla(180,35%,84%,1) 0px, transparent 50%);
  background-attachment: fixed;
	color: var(--mainColor);
	font-family: 'Noto Serif JP','游明朝',serif;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.ritsu_item > span {
	position: absolute;
	bottom: 50%;
	right: 50%;
	width: 100%;
	text-align: center;
	-webkit-transform: translate(50%,50%);
	-ms-transform: translate(50%,50%);
	transform: translate(50%,50%);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.5em;
}

.ritsu_item > span strong{ font-size: 2.2rem;}

@media screen and (max-width: 690px){
	.ritsu_item{ padding-top: 140px;}
	.ritsu_item > span{ font-size: 1.1rem;}
	.ritsu_item > span strong{ font-size: 1.8rem;}
}



/* Feature
---------------------------------------------------------- */
.feature_hanger{
	position: relative;
	margin: 30px 0;
	padding: 30px;
}

.feature_hanger .wp-block-media-text__media{
	width: 240px;
	height: 240px;
	background: rgba(240,130,180,0.40);
	border-radius: 50%;
	text-align: center;
}
.feature_hanger .wp-block-media-text__media img{
	width: 80%;
	height: auto;
	margin: 5%;
}

.feature_hanger .wp-block-media-text__content{
	position: relative;
	margin: 30px 0;
	padding: 30px !important;
	background-color: rgba(255,255,255,1.00);
	border-radius: 10px;
}
.feature_hanger .wp-block-media-text__content::after{
	content: '';
	position: absolute;
	bottom: -30px;
	right: -30px;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color:hsla(0,0%,100%,1);
	background-image:
	radial-gradient(at 50% 100%, hsla(144,59%,89%,1) 0px, transparent 50%),
	radial-gradient(at 92% 13%, hsla(31,84%,90%,1) 0px, transparent 50%),
	radial-gradient(at 51% 53%, hsla(29,0%,100%,1) 0px, transparent 50%),
	radial-gradient(at 12% 87%, hsla(180,35%,84%,1) 0px, transparent 50%),
	radial-gradient(at 86% 85%, hsla(344,83%,92%,1) 0px, transparent 50%),
	radial-gradient(at 11% 14%, hsla(180,35%,84%,1) 0px, transparent 50%);
  background-attachment: fixed;
	border-radius: 10px;
}

.feature_hanger .wp-block-media-text__content h3{
	margin: 0 0 15px 0;
	padding: 0;
	color: var(--mainColor);
	text-align: left;
	line-height: 1.5;
}
.feature_hanger .wp-block-media-text__content h3::after{ display: none;}

.feature_hanger .wp-block-media-text__content h3 strong{
	font-size: 2.4rem;
	color: var(--subColor);
}


@media screen and (max-width: 690px){
	.ritsu_item{
		max-width: inherit;
		padding-top: 240px;
	}
	.feature_hanger{
		margin: 40px 0 20px 0;
		padding: 0;
		justify-items: center;
  	align-items: center;
	}
	.feature_hanger .wp-block-media-text__content::after{
		bottom: -15px;
		right: -15px;
	}
	.feature_hanger .wp-block-media-text__content{ margin: 0; padding: 15px !important;}
	.feature_hanger .wp-block-media-text__content h3{ text-align: center;}
	.feature_hanger .wp-block-media-text__content h3 strong{ font-size: 2.0rem;}
}


/* Facility
---------------------------------------------------------- */
.text_facility{
	justify-content: flex-start;
	flex-wrap: nowrap;
	margin: 15px 0;
}

.text_facility dt{
	margin: 0;
	padding: 20px 30px;
	border-left: 1px solid #707070;
	border-right: 1px solid #707070;
	white-space: nowrap;
}

.text_facility dd{
	margin: 0;
	padding: 20px 0 20px 30px;
}

.text_facility dd ul{
	width: 100%;
	padding: 0;
	justify-content: flex-start;
}
.text_facility dd ul li{
	position: relative;
	margin: 0;
	padding: 5px 10px 5px calc(1rem + 5px);
	list-style: none;
}
.text_facility dd ul li::before{
	position: absolute;
	left: 0;
	content: '●';
	margin-right: 5px;
	color: #565698;
}

.item_facility{
	width: 48%;
	margin: 15px 0;
}

.item_facility dl{ padding: 15px 0;}

.item_facility dd{ margin: 5px 0 0 0;}


@media screen and (max-width: 690px){
	.wp-block-media-text.gaikan .wp-block-media-text__media{ margin-bottom: 20px !important;}
	.wp-block-media-text.gaikan .wp-block-media-text__content{ padding: 0;}
	.text_facility{
		margin: 15px 0;
		padding: 15px;
		background-color: rgba(86,86,152,0.10);
  	flex-direction: column;
  	align-items: center;
	}
	.text_facility dt{
		margin: 0 0 10px 0;
		padding: 10px;
		border: 0;
		border-top: 1px solid #707070;
		border-bottom: 1px solid #707070;
	}
	.text_facility dd{
		width: 100%;
		padding: 0;
	}
	.text_facility dd ul{
  -webkit-box-align: flex-start;
				align-items: flex-start;		
	}
	.text_facility dd ul li{ width: 49%;}
	.item_facility{ width: 100%;}	
}


/* access
---------------------------------------------------------- */
.map_hanger{
	margin: 0 0 30px 0;
}

.map_hanger iframe{ width: 100%;}

#map{ height: 100%;}


/* FAQ
---------------------------------------------------------- */
dl.qa{
	position: relative;
	margin: 0;
}

dl.qa dt{
	position: relative;
	margin: 0;
	padding: 20px 30px 20px 50px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: bold;
}
dl.qa dt::before,
dl.qa dt::after{
	position: absolute;
}
dl.qa dt::before{
	content: 'Q';
	color: var(--mainColor);
	font-size: 2.2rem;
	left: 10px;
	top: 0;
}
dl.qa dt::after{
	content: '';
  right: 20px;
  top: 30px;
	transform: rotate(135deg);
  width: 10px;
  height: 10px;
  border-top: solid 2px var(--mainColor);
  border-right: solid 2px var(--mainColor);
  position: absolute;
}
dl.qa dt.active::after{ transform: rotate(-45deg);}

dl.qa dt span{
	position: absolute;
	top: 17px;
	left: 0;
	width: 60px;
	margin: 0 0 0 10px;
	padding: 10px 14px;
	background-color: #00A0E9;
	border-radius: 2rem;
	color: #fff;
	font-size: 1.0rem;
	text-align: center;
	line-height: 1;
}

dl.qa dt:hover,
dl.qa dt.active{ background-color: rgba(228,228,228,0.3);}

dl.qa dd{
	position: relative;
	margin: 0;
	padding: 20px 20px 20px 50px;
	background-color: rgba(228,228,228,0.3);
	line-height: 1.5;
}
dl.qa dd::before{
	content: 'A';
	position: absolute;
	left: 20px;
	top: 15px;
	color: var(--subColor);
	font-size: 1.5rem;
}

dl.qa dd strong{ color: #E60012;}

@media screen and (max-width: 690px){
	dl.qa dt{
		padding: 15px 40px 15px 50px;
		font-size: 1rem;
	}
	dl.qa dt::before{ font-size: 1.8rem;}
	dl.qa dt::after{ font-size: 1.2rem;}
	dl.qa dd::after{ font-size: 1.1rem;}
}