@charset "utf-8";
/*=============================================================
 #intro
=============================================================*/
#intro{
	padding: 134px 0 0;
	position: relative;
}
#intro:before,
#intro:after{
	content: "";
	width: 50%;
	height: 134px;
	position: absolute;
	top: 0;
}
#intro:before{
	background:url("../img/index_top_l.png") no-repeat 0 0;
	background-size: auto 134px;
	left: 0;
}
#intro:after{
	background:url("../img/index_top_R.png") no-repeat right 0;
	background-size: auto 134px;
	right: 0;
}
.boxLine{
	width: 907px;
	padding: 0 0 23px;
	box-sizing: border-box;
	border-left: 4px solid #047835;
	border-right: 4px solid #047835;
	background: url("../img/index_btm.png") no-repeat center bottom;
	background-size: 100% auto;
	position: relative;
	z-index: 2;
}
.boxLineInner{
	line-height: 1.7;
	background-color: #dbdcdc;
}
#intro .ttl{
	width: 907px;
	position: absolute;
	top: 35px;
	left: 0;
	z-index: 3;
}
#intro .ttl h1{
	width: 822px;
	margin: 0 auto 0;
	display: flex;
	justify-content: space-between;
}
#intro .ttl h1 .ttlSite{
	order: 1;
	width: 431px;
}
#intro .ttl h1 .ttlPage{
	order: 0;
	width: 351px;
}
#intro .ttl h1 img{
	width: 100%;
	height: auto;
}
#intro .boxLineInner{
	padding-top: 50px;
}
#intro .boxCopy{
	padding: 30px 0;
	background-color: #EEEEEF;
	border-top: 4px dotted #047835;
	border-bottom: 4px dotted #047835;
	text-align: center;
}
#intro .catch{
	color: #047835;
	font-size: 30px;
}
#intro .lead{
}
ul.note{
	display: inline-block;
	padding: 15px 15px 0;
}
ul.note li{
	font-size: 85%;
	padding: 0 0 0 1em;
	text-indent: -1em;
}
/*=============================================================
 #BTN
=============================================================*/
#introBtn{
}
#introBtn ul{
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
#introBtn ul li{
	width: 450px;
	height: 184px;
	box-sizing: border-box;
	border-left: 4px dotted #047835;
	border-bottom: 4px dotted #047835;
}
#introBtn ul li.side{
	width: 446px;
	border-left: none;
}
#introBtn ul li a{
	display: block;
	width: 100%;
	height: 100%;
}
#introBtn ul li:nth-child(1) a{
	background: url("../img/index_btn01-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(2) a{
	background: url("../img/index_btn02-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(3) a{
	background: url("../img/index_btn03-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(4) a{
	background: url("../img/index_btn04-2.png") no-repeat center center;
	background-size: cover;
}
/*#introBtn ul li:nth-child(5) a{
	background: url("../img/index_btn05.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(6) a{
	background: url("../img/index_btn06.png") no-repeat center center;
	background-size: cover;
}*/
#introBtn ul li a span{
	display: none;
}
#introBtn ul li a:hover{
	opacity: 1;
	background-color: #ffe100;
}
/*=============================================================
 .section
=============================================================*/
.section{
	width: 907px;
	margin: 25px 0 0;
	padding: 0 0 23px;
	box-sizing: border-box;
	border-left: 4px solid #047835;
	border-right: 4px solid #047835;
	background-image: url("../img/index_btm.png");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% auto;
	position: relative;
	z-index: 2;
}
.section:before{
	content: "";
	width: 907px;
	height: 14px;
	background: url("../img/index_top.png") no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -14px;
	left: -4px;
}
.sectionInner{
	line-height: 1.7;
	background-color: #dbdcdc;
}
.sectionInner .ttl{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}
.sectionInner .ttl .box{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sectionInner .ttl .boxNum{
	width: 140px;
	text-align: center;
	font-size: 180px;
	line-height: 180px;
	color: #047835;
}
.sectionInner .ttl .boxTxt{
	flex: 1;
	box-sizing: border-box;
}
.sectionInner .ttl .boxTxt h2{
	font-size: 30px;
	color: #047835;
	padding: 0 0 10px;
}
#alm01 .sectionInner .ttl .box{
	width: calc(100% - 204px);
}
#alm01 .sectionInner .ttl .boxIl{
	width: 194px;
}
#alm02 .sectionInner .ttl .box{
	width: calc(100% - 260px);
}
#alm02 .sectionInner .ttl .boxIl{
	width: 250px;
}
#alm03 .sectionInner .ttl .box{
	width: calc(100% - 250px);
}
#alm03 .sectionInner .ttl .boxIl{
	width: 240px;
}
#alm04 .sectionInner .ttl .box{
	width: calc(100% - 244px);
}
#alm04 .sectionInner .ttl .boxIl{
	width: 234px;
}
#alm05 .sectionInner .ttl .box{
	width: calc(100% - 210px);
}
#alm05 .sectionInner .ttl .boxIl{
	width: 200px;
}
#alm06 .sectionInner .ttl .box{
	width: calc(100% - 270px);
}
#alm06 .sectionInner .ttl .boxIl{
	width: 260px;
}
.sectionInner .boxPhoto{
	margin: 20px 40px 20px;
}
.sectionInner .boxPhoto .boxFlex{
	width: 100%;
	display: flex;
	justify-content: space-between;
	position: relative;
	flex-wrap: wrap;
}
.sectionInner .boxPhoto .boxFlex .box{
	position: relative;
	box-sizing: border-box;
	padding: 0 20px;
}
.sectionInner .boxPhoto .boxFlex .boxNum{
	width: 40px;
	height: 40px;
	display: flex;
	justify-content:center;
	align-items: center;
	border: 3px solid #047835;
	background-color: #fff;
	color: #047835;
	font-size: 25px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.sectionInner .boxPhoto .boxClm2 .box{
	width: calc((100% - 40px) / 2);
}
.sectionInner .boxPhoto .boxFlex .box span.photo{
	display: block;
	position: relative;
}
.sectionInner .boxPhoto .boxFlex figcaption{
	padding: 10px 0 0;
	color: #047835;
	font-size: 16px;
}
.sectionInner .boxPhoto .boxClm2 .box figure{
	width: calc(100%);
	display: flex;
	justify-content: space-between;
	position: relative;
}
.sectionInner .boxPhoto .boxClm2 .box figure span.photo{
	width: 215px;
}
.sectionInner .boxPhoto .boxClm2 .box figcaption{
	width: calc(100% - 225px);
	padding: 20px 0 0;
}
.sectionInner .boxPhoto .boxClm2 .boxHalf{
	width: calc((100% - 40px) / 2);
	position: relative;
}
.sectionInner .boxPhoto .boxClm2 .boxHalf span.photo{
	display: block;
	position: relative;
	text-align: center;
}
.sectionInner .boxPhoto .boxClm2 .boxHalf span.photo img{
	max-width: 245px;
	margin: 0 auto;
}
.sectionInner .boxPhoto .boxClm3 .box{
	width: calc((100% - 80px) / 3);
}
.sectionInner .boxPhoto .boxClm4 .box{
	width: calc((100% - 36px) / 4);
}
.sectionInner .boxPhoto .boxClm2 .box span.photo:after,
.sectionInner .boxPhoto .boxClm2 .boxHalf.arw span.photo:after,
.sectionInner .boxPhoto .boxClm3 .box span.photo:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 20px;
	border-color: transparent transparent transparent #047835;
	position: absolute;
	top: 50%;
	left: -50px;
	transform: translateY(-50%);
	z-index: 2;
}
.sectionInner .boxPhoto .boxClm2 .box:first-child span.photo:after,
.sectionInner .boxPhoto .boxClm3 .box:first-child span.photo:after{
	display: none;
}
.sectionInner .boxPhoto .boxClm4 .box span.photo:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 0 13px 20px;
	border-color: transparent transparent transparent #047835;
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	z-index: 2;
}
.sectionInner .boxPhoto .boxClm4 .box:first-child span.photo:after{
	display: none;
}
.sectionInner .boxNote{
	padding: 0 40px 20px;
}
.sectionInner .boxNote li{
	font-size: 16px;
	padding: 0 0 0 1em;
	text-indent: -1em;
	color: #047835;
}
.sectionInner .boxAnswer{
	display: flex;
	align-items: center;
	justify-content: center;
 padding: 20px;
	border-top: 4px dotted #047835;
}
.sectionInner .boxAnswer .boxIcn{
	width: 53px;
	height: 53px;
}
.sectionInner .boxAnswer .boxtxt{
	padding: 0 15px;
}
.sectionInner .boxAnswer .boxBtn{
	width: 218px;
	height: 45px;
}
.sectionInner .ttlH3{
	padding: 15px 0;
	background-color: #EEEEEF;
	border-top: 4px dotted #047835;
	border-bottom: 4px dotted #047835;
}
.sectionInner .ttlH3 h3{
	text-align: center;
	color: #047835;
	font-size: 22px;
}
.sectionInner .boxTimes{
	margin: 30px 40px 20px;
}

/*=============================================================
 .boxMovieArea
=============================================================*/
.sectionInner .boxMovieArea{
	padding: 25px 40px 25px;
	position: relative;
	display: block;
}
.sectionInner .boxMovieArea .imgPc{
	display: block;
}
.sectionInner .boxMovieArea .imgSp{
	display: none;
}
.sectionInner .boxMovieArea .imgSpNone{
}
.sectionInner .boxMovieArea .boxMovie{
	margin: 0 auto;
	width: 100%;
	max-width: 388px;
	box-sizing: border-box;
	border: 4px solid #047835;
}
.sectionInner .boxMovieArea .boxMovie .boxMovieInner{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.sectionInner .boxMovieArea .boxMovie .boxMovieInner video{
	margin: 0;
	padding: 0;
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: auto !important;
}
.sectionInner .boxMovieArea p.icnL,
.sectionInner .boxMovieArea p.icnR{
	position: absolute;
	top: 50%;
	left: 50%;
}
.sectionInner .boxMovieArea p.icnL{
	margin: 8px 0 0;
	transform: translate(-379px,-50%);
}
.sectionInner .boxMovieArea p.icnR{
	transform: translate(214px,-50%);
}






/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 Smartphones
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@media only screen and (max-width:979px){
#intro{
	padding: 67px 0 0;
}
#intro:before,
#intro:after{
	height: 67px;
}
#intro:before{
	background-size: auto 67px;
	left: 0;
}
#intro:after{
	width: 80%;
	background-size: auto 67px;
	right: -37px;
}
.boxLine{
	width: 100%;
	padding: 0 0 13px;
	border-left: 2px solid #047835;
	border-right: 2px solid #047835;
}
#intro .ttl{
	width: 100%;
	position: absolute;
	top: 35px;
	left: 0;
	z-index: 3;
}
#intro .ttl h1{
	width: 100%;
	max-width: 280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
#intro .ttl h1 .ttlSite{
	order: 0;
	width: 100%;
}
#intro .ttl h1 .ttlPage{
	order: 1;
	width: 100%;
	padding: 10px 0 0;
}
#intro .boxLineInner{
	padding-top: 160px;
}
#intro .boxCopy{
	padding: 20px 0;
	background-color: #EEEEEF;
	border-top: 4px dotted #047835;
	border-bottom: 4px dotted #047835;
	text-align: left;
}
#intro .catch{
	color: #047835;
	font-size: 21px;
	padding: 0 15px;
}
#intro .catch span{
	display: inline-block;
}
#intro .lead{
	padding: 0 15px;
	text-align: left;
}
#intro .lead br{
	display: none;
}
/*=============================================================
 #BTN
=============================================================*/
#introBtn{
}
#introBtn ul{
	display: block;
}
#introBtn ul li{
	width: calc(100%);
	height: auto;
	box-sizing: border-box;
	border-left: none;
}
#introBtn ul li.side{
	width: calc(100%);
}
#introBtn ul li a{
	display: flex;
	width: 100%;
	height: auto;
	background: none !important;
	box-sizing: border-box;
	padding: 10px;
}
#introBtn ul li a span{
	display: block;
	color: #047835;
}
#introBtn ul li a span:first-child{
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	background-color: #ffe100;
	color: #047835;
	text-align: center;
	border: 2px solid #047835;
}
#introBtn ul li a span:last-child{
	padding: 3px 0 0 10px;
}
/*=============================================================
 .section
=============================================================*/
.section{
	width: 100%;
	margin: 20px 0 0;
	padding: 0 0 13px;
	border-left: 2px solid #047835;
	border-right: 2px solid #047835;
}
.section:before{
	content: "";
	width: calc(100% + 4px);
	left: -2px;
}
.sectionInner .ttl{
	display: block;
	padding: 10px;
}
.sectionInner .ttl .box{
	width: 100% !important;
	display: flex;
	justify-content: space-between;
	align-items:flex-start;
}
.sectionInner .ttl .boxNum{
	width: 50px;
	font-size: 50px;
	line-height: 50px;
}
.sectionInner .ttl .boxTxt{
	width: calc(100% - 55px);
}
.sectionInner .ttl .boxTxt h2{
	font-size: 21px;
}
.sectionInner .ttl .boxIl{
	width: 100% !important;
	max-width: 270px !important;
	margin: 0 auto 0 !important;
	padding: 20px 0 0 !important;
}
	
.sectionInner .boxPhoto{
	margin: 15px;
}
.sectionInner .boxPhoto .boxFlex{
	width: 100%;
	display: block;
}
.sectionInner .boxPhoto .boxFlex .box{
	position: relative;
	box-sizing: border-box;
	padding: 0 10px;
}
.sectionInner .boxPhoto .boxFlex .boxNum{
	width: 30px;
	height: 30px;
	font-size: 19px;
}
.sectionInner .boxPhoto .boxFlex img{
	display: block;
	max-width: 245px;
	margin: 0 auto;
}
.sectionInner .boxPhoto .boxClm2 .box{
	width: calc(100%);
}
	.sectionInner .boxPhoto .box+.box{
		margin-top: 50px !important;
}
.sectionInner .boxPhoto .boxFlex figcaption{
	font-size: 14px;
	text-align: center !important;
}
.sectionInner .boxPhoto .boxClm2 .box figure{
	display: block;
}
.sectionInner .boxPhoto .boxClm2 .box figure span.photo{
	width: 100%;
}
.sectionInner .boxPhoto .boxClm2 .box figcaption{
	width: calc(100%);
	padding: 10px 0 0;
}
.sectionInner .boxPhoto .boxClm2 .boxHalf{
	width: calc(100%);
}
.sectionInner .boxPhoto .boxHalf+.boxHalf{
		margin-top: 50px !important;
}	
.sectionInner .boxPhoto .boxClm2 .boxHalf span.photo img{
	max-width: 245px;
	margin: 0 auto;
}
.sectionInner .boxPhoto .boxClm3 .box{
	width: 100%;
}
.sectionInner .boxPhoto .boxClm4 .box{
	width: 100%;
}
.sectionInner .boxPhoto .boxClm2 .box span.photo:after,
.sectionInner .boxPhoto .boxClm2 .boxHalf.arw span.photo:after,
.sectionInner .boxPhoto .boxClm3 .box span.photo:after{
	top: -30px;
	left: 50%;
	transform: translate(-50%,0) rotate(90deg);
}
.sectionInner .boxPhoto .boxClm4 .box span.photo:after{
	top: -30px;
	left: 50%;
	transform: translate(-50%,0) rotate(90deg);
}
.sectionInner .boxNote{
	padding: 0 15px 10px;
}
.sectionInner .boxNote li{
	font-size: 14px;
}
	
	
	
	
	
	

.sectionInner .boxAnswer{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
 padding: 15px;
	border-top: 2px dotted #047835;
}
.sectionInner .boxAnswer .boxtxt{
	width: calc(100% - 53px);
	padding: 0 0 0 10px;
	box-sizing: border-box;
}
.sectionInner .boxAnswer .boxBtn{
	width: 100%;
	height: auto;
	text-align: right;
}
.sectionInner .boxAnswer .boxBtn img{
	width: auto;
	height: 36px;
}	

.sectionInner .ttlH3{
	padding: 10px 0;
	background-color: #EEEEEF;
	border-top: 2px dotted #047835;
	border-bottom: 2px dotted #047835;
}
.sectionInner .ttlH3 h3{
	font-size: 18px;
}
.sectionInner .boxTimes{
	margin: 15px;
}
	
	
/*=============================================================
 .boxMovieArea
=============================================================*/
.sectionInner .boxMovieArea{
	padding: 15px;
}
.sectionInner .boxMovieArea .imgPc{
	display: none;
}
.sectionInner .boxMovieArea .imgSp{
	display: block;
}
.sectionInner .boxMovieArea .imgSpNone{
	display: none;
}
.sectionInner .boxMovieArea p.icnL,
.sectionInner .boxMovieArea p.icnR{
	position: static;
}
.sectionInner .boxMovieArea p.icnL{
	margin: 0 0 10px;
	transform: translate(0,0);
}
.sectionInner .boxMovieArea p.icnR{
	margin: 0 0 10px;
	transform: translate(0,0);
}
}
