@charset "utf-8";
/*=============================================================
 contents Layout
=============================================================*/
body{
	color: #fff;
}
#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/world_top_l.png") no-repeat 0 0;
	background-size: auto 134px;
	left: 0;
}
#intro:after{
	background:url("../img/world_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 #ffe100;
	border-right: 4px solid #ffe100;
	background: url("../img/bousai_btm.png") no-repeat center bottom;
	background-size: 100% auto;
	position: relative;
	z-index: 2;
}
.boxLineInner{
	line-height: 1.7;
	background-color: #262727;
}
#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: #3c3c3c;
	border-top: 4px dotted #ffe100;
	border-bottom: 4px dotted #ffe100;
	text-align: center;
}
#intro .catch{
	color: #ffe100;
	font-size: 30px;
}
#intro .lead{
}
#intro ul.note{
	display: inline-block;
	padding: 15px 15px 0;
}
#intro 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 #ffe100;
	border-bottom: 4px dotted #ffe100;
}
#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/bousai_btn01-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(2) a{
	background: url("../img/bousai_btn02-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(3) a{
	background: url("../img/bousai_btn03-2.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(4) a{
	background: url("../img/bousai_btn04-2.png") no-repeat center center;
	background-size: cover;
}
/*#introBtn ul li:nth-child(5) a{
	background: url("../img/bousai_btn05.png") no-repeat center center;
	background-size: cover;
}
#introBtn ul li:nth-child(6) a{
	background: url("../img/bousai_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: #aaaaaa;
}
/*=============================================================
 .section
=============================================================*/
.section{
	width: 907px;
	margin: 25px 0 0;
	padding: 0 0 23px;
	box-sizing: border-box;
	border-left: 4px solid #ffe100;
	border-right: 4px solid #ffe100;
	background-image: url("../img/bousai_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/bousai_top.png") no-repeat 0 0;
	background-size: 100% auto;
	position: absolute;
	top: -14px;
	left: -4px;
}
.sectionInner{
	line-height: 1.7;
	background-color: #262727;
}
.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: #ffe100;
}
.sectionInner .ttl .boxTxt{
	flex: 1;
	box-sizing: border-box;
}
.sectionInner .ttl .boxTxt h2{
	font-size: 30px;
	color: #ffe100;
	padding: 0 0 10px;
}
.sectionInner .ttl .box{
	width: calc(100% - 244px);
}
.sectionInner .ttl .boxIl{
	width: 234px;
}
.sectionInner .boxAnswer{
	display: flex;
	align-items: center;
	justify-content: center;
 padding: 20px;
	border-top: 4px dotted #ffe100;
}
.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: #464646;
	border-top: 4px dotted #ffe100;
	border-bottom: 4px dotted #ffe100;
}
.sectionInner .ttlH3 h3{
	text-align: center;
	color: #fff;
	font-size: 22px;
}
/*=============================================================
 .boxColmun
=============================================================*/
.sectionInner .boxColmun{
	padding: 25px 40px;
	border-top: 4px dotted #ffe100;
}
.sectionInner .boxColmun h3{
	font-size: 22px;
	text-align: center;
}
.sectionInner .boxColmun h3 span{
	color: #ffe100;
}
.sectionInner .boxColmunInner{
	display: flex;
	justify-content: space-between;
}
.sectionInner .boxColmunInner .boxL{
	flex: 1;
	padding: 0 15px 0 0;
}
#alm01 .sectionInner .boxColmunInner .boxR{
	width: 290px;
}
#alm04 .sectionInner .boxColmunInner .boxR{
	width: 255px;
}
.sectionInner .boxColmunInner .boxL p{
	padding: 20px 0 0;
}
.sectionInner .boxColmunInner .boxR figure{
	padding: 20px 0 0;
}
/*=============================================================
 .boxMeasure
=============================================================*/
.sectionInner .boxMeasure{
	padding: 75px 40px 25px;
	border-top: 4px dotted #ffe100;
}
.sectionInner .boxMeasureInner{
	display: flex;
	justify-content: space-between;
}
.sectionInner .boxMeasureInner .boxL{
	width: 326px;
	position: relative;
}
.sectionInner .boxMeasureInner .boxL span.icn{
	width: 110px;
	position: absolute;
	top: -65px;
	left: -30px;
}
.sectionInner .boxMeasureInner .boxR{
	flex: 1;
	padding: 0 0 0 15px;
}
#alm06 .sectionInner .boxMeasureInner .boxR{
	max-width: 380px;
}
#alm06 .sectionInner .boxMeasureInner .boxR .boxMovie{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #9e9e9f;
	border: 4px solid #ffe100;
	box-sizing: border-box;
}
.sectionInner .boxMeasureInner .boxR ul li{
	position: relative;
	padding: 0 0 0 2.5em;
	color: #ffe100;
}
.sectionInner .boxMeasureInner .boxR ul li span.num{
	display: block;
	width: 2.5em;
	position: absolute;
	top: 0;
	left: 0;
}
.sectionInner .boxMeasureInner .boxR ul li span.txtS{
	font-size: 85%;
}
/*=============================================================
 .boxResult
=============================================================*/
.sectionInner .boxResult{
	padding: 25px 40px 25px;
}
.sectionInner .boxResultInner{
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}
.sectionInner .boxResultInner .pc{
	display: block;
}
.sectionInner .boxResultInner .sp{
	display: none;
}
.sectionInner .boxResult .boxTxt{
	padding: 15px 0 0;
	text-align: center;
}
.sectionInner .boxResult .boxTxt p{
	font-size: 28px;
	padding: 0 0 15px;
	color: #ffe100;
}
.sectionInner .boxResult .boxTxt ul,
.boxTxt ul{
	display: inline-block;
}
.sectionInner .boxResult .boxTxt li,
.boxTxt ul{
	font-size: 12px;
	padding: 0 0 0 1em;
	text-indent: -1em;
	color: #fff;
}
/*=============================================================
 .boxMovieArea
=============================================================*/
.sectionInner .boxMovieArea{
	border-top: 4px dotted #ffe100;
	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 #ffe100;
}
.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 #ffe100;
	border-right: 2px solid #ffe100;
}
#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;
	border-top: 4px dotted #ffe100;
	border-bottom: 4px dotted #ffe100;
}
#intro .catch{
	text-align: left;
	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: #ffe100;
}
#introBtn ul li a span:first-child{
	display: flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	background-color: #666666;
	color: #ffe100;
	text-align: center;
	border: 2px solid #ffe100;
}
#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 #ffe100;
	border-right: 2px solid #ffe100;
}
.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 .boxAnswer{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
 padding: 15px;
	border-top: 2px dotted #ffe100;
}
.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;
	border-top: 2px dotted #ffe100;
	border-bottom: 2px dotted #ffe100;
}
.sectionInner .ttlH3 h3{
	font-size: 18px;
}
/*=============================================================
 .boxColmun
=============================================================*/
.sectionInner .boxColmun{
	padding: 15px;
	border-top: 2px dotted #ffe100;
}
.sectionInner .boxColmun h3{
	font-size: 18px;
}
.sectionInner .boxColmunInner{
	display: block;
}
.sectionInner .boxColmunInner .boxL{
	padding: 0;
}
#alm01 .sectionInner .boxColmunInner .boxR{
	width: 100%;
	max-width: 290px;
	margin: 0 auto;
}
#alm04 .sectionInner .boxColmunInner .boxR{
	width: 100%;
	max-width: 255px;
	margin: 0 auto;
}
.sectionInner .boxColmunInner .boxL p{
	padding: 15px 0 0;
}
.sectionInner .boxColmunInner .boxR figure{
	padding: 15px 0 0;
}
/*=============================================================
 .boxMeasure
=============================================================*/
.sectionInner .boxMeasure{
	padding: 50px 15px 15px;
	border-top: 2px dotted #ffe100;
}
.sectionInner .boxMeasureInner{
	display: block;
}
.sectionInner .boxMeasureInner .boxL{
	width: 100%;
	max-width: 326px;
	margin: 0 auto;
}
.sectionInner .boxMeasureInner .boxL span.icn{
	width: 70px;
	top: -40px;
	left: -20px;
}
.sectionInner .boxMeasureInner .boxR{
	width: 100%;
	padding: 15px 0 0 0;
}
#alm06 .sectionInner .boxMeasureInner .boxR{
	width: 100%;
	max-width: 326px;
	margin: 0 auto;
}
#alm06 .sectionInner .boxMeasureInner .boxR .boxMovie{
	padding: 50px 0;
	border: 2px solid #ffe100;
}
/*=============================================================
 .boxResult
=============================================================*/
.sectionInner .boxResult{
	padding: 15px;
}
	.sectionInner .boxResultInner{
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
}
.sectionInner .boxResultInner .pc{
	display: none;
}
.sectionInner .boxResultInner .sp{
	display: block;
}
.sectionInner .boxResult .boxTxt{
	padding: 10px 0 0;
	text-align: left;
}
.sectionInner .boxResult .boxTxt p{
	font-size: 18px;
	padding: 0 0 10px;
}
/*=============================================================
 .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{
	width: 100%;
	max-width: 300px;
	position: static;
}
.sectionInner .boxMovieArea p.icnL{
	margin: 0 auto 10px;
	transform: translate(0,0);
}
.sectionInner .boxMovieArea p.icnR{
	margin: 0 auto 10px;
	transform: translate(0,0);
}
}
