@charset "UTF-8";

main {
  font-size: 3.73vw;
  line-height: 1.6;
}

main h1.bg-head {
  position: relative;
}
main h1.bg-head > span.line2 {
  height: 5rem;
  line-height: 1.5;
}
main h1.bg-head > span {
  display: block;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  text-shadow: 0 0 16px #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50px;
  margin: auto 0;
}

main h2 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  background: url(../images/topImage.jpg) no-repeat center/cover;
  vertical-align: middle;
  position: relative;
  text-align: center;
  border: none;
  padding: 27%;
}
main h2 span {
  position: absolute;
  color: #fefefe;
  font-weight: bold;
  text-shadow: 0px 0px 18px rgb(0 0 0 / 80%);
  top: 50%;
  left: 50%;
  white-space: nowrap;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

main h3.lower-sub-head{
	margin: 8% 0 4% 0;
	padding-left: 18px;
	color: #0077c0;
	position: relative;
	font-size: 4.3vw;
}
main h3.lower-sub-head:before {
  position: absolute;
  content: '';
  width: 14px;
  height: 14px;
  background: url(/volunteer/s/seminar/web/images/icon_circle.png) no-repeat;
  background-size: contain;
  bottom: 4px;
  left: 0;
}

main .btn{
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 45px;
	background-color: #0077c0;
	color: #fff;
}
main .btn:before{
	position: absolute;
	top: 50%;
	right: 7.3px;
	transform: translateY(-50%);
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid #fff;
}
main .btn:after{
	position: absolute;
	top: 43%;
	right: 14px;
	transform: rotate(-45deg);
	content: "";
	width: 5px;
	height: 5px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}
main .btn:nth-of-type(n+2){
	margin-top: 4%;
}
main .btn div{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	text-align: center;
	letter-spacing: 0.15em;
	font-weight: bold;
	font-size: 3.7vw;
}

main #inner {
  padding-left: 5.3%;
  padding-right: 5.3%;
}
main #inner .txt + .txt {
  margin-top: 4%;
}
main #inner p {
  margin: 0;
}
main  #inner .outlineImg {
  display: block;
  width: 100%;
}

main .contents{
	margin: 9% 0 0;
  padding-left: 5.3%;
  padding-right: 5.3%;
}
main .contents li{
	padding: 9.6% 7% 7% 7%;
	background-color: #f4f4f4;
}
main .contents li + li{
	margin-top: 9%;
}
main .contents h4{
	margin-bottom: 11%;
	text-align: center;
	letter-spacing: 0.1em;
	font-size: 4.5vw;
	color: #0077c0;
}
main .contents img{
	display: block;
	width: 100%;
	margin: 0 auto;
}
main .contents p{
	margin: 7.5% auto 16%;
	width: 100%;
	line-height: 1.5;
	letter-spacing: 0.1em;
	font-size: 3.7vw;
}

main .btn_contents {
  padding: 9% 5.3%;
}
main .btn_contents .btn {
  border: 1px solid #ce2f35;
  border-radius: 0;
  height: 57px;
  font-weight: bold;
  color: #ce2f35;
  background-color: #fff;
}
main .btn_contents .btn:before {
  border: 1px solid #ce2f35;
  position: absolute;
  top: 50%;
  right: 7.3px;
  transform: translateY(-50%);
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
}
main .btn_contents .btn:after {
  right: 12px;
  border-bottom: 1px solid #ce2f35;
  border-right: 1px solid #ce2f35;
  position: absolute;
  top: 46%;
  transform: rotate(-45deg);
  content: "";
  width: 3px;
  height: 3px;
}
main .btn_contents .btn span.notes {
  display: block;
  color: #000;
  line-height: 1.2;
  font-weight: bold;
  font-size: 2.2vw;
  text-align: left;
  margin-left: 36%;
}
main .btn_contents .btn .btn_qa {
  position: relative;
}
main .btn_contents .btn .btn_qa:before {
  position: absolute;
  top: 10%;
  left: 19%;
  content: "";
  width: 40px;
  height: 30px;
  background-image: url(/volunteer/assets/images/icon_faq.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

#container .inner #sideNav {
  margin: 8% 0 10%;
  padding: 0 2%;
}
#container .inner #sideNav dd:first-of-type {
  border-top: 1px solid #0077c0;
}
#container .inner #sideNav dd {
  border-bottom: 1px solid #0077c0;
  padding: 4%;
  font-size: 3.73vw;
}
#container .inner #sideNav dd.on {
  background-color: #e0eef9;
}
#container .inner #sideNav dd dt {
  background: url(/volunteer/s/common/images/icon_bm01.png) no-repeat top left;
  background-size: 2.6%;
  background-position: 0 50%;
  color: #0077c0;
  padding: 0 0 0 5%;
}
#container .inner #sideNav dd dt a {
  color: #0077c0;
}