/* ------------------------------------------------------------------------
    Common
------------------------------------------------------------------------  */
/* Anchor Height */
.AH {
}
@media screen and (max-width:768px){
	.AH {
		margin-top: -50px;
		padding-top: 50px;
	}
}
@media screen and (min-width:769px){
	.AH {
		margin-top: -50px;
		padding-top: 50px;
	}
}
/* Googlemap */
.google-map {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}
.google-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	box-sizing:border-box;
}
/*
 Googlemap area
*/
.Map-Btn {
	width:100%;
	padding:0 12px;
	margin:0 auto;
	box-sizing:border-box;
	text-align:right;
}
/*
 Googlemap btn
*/
.google-btn a {
	display:inline-block;
	max-width:190px;
	border:1px solid #898989;
	text-align:center;
	width:100%;
	font-size:1.2rem;
	color:#898989;
}
.google-btn a span {
	display:inline-block;
}
.google-btn a span:before {
	content:url(../images/icon_maplink.png);
	vertical-align:middle;
	padding-right:.7em;
}
.Map-Btn {
	padding-top:15px;
}
.google-btn a {

}
@media screen and (min-width:769px){
	.Map-Btn {
		padding-top:15px;
	}
	.google-btn a {
		display:inline-block;
		max-width:190px;
		border:1px solid #898989;
		text-align:center;
	}
}
@media screen and (max-width:768px){
	.Map-Btn {
		padding-top:15px;
	}
	.google-btn a {
		display:inline-block;
		max-width:190px;
		border:1px solid #898989;
		text-align:center;
	}
}

/* youtube */
.youtube_container{
	width: 100%;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
}
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
/* sample */
.youtube_sample{
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background: #ccc;
}
.youtube_sample:before{
	content: 'Youtube';
	font-size: 1.875em;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
	-webkit-transform: translate(-50% , -50%);
}

/* ------------------------------------------------------------------------
    Parts
------------------------------------------------------------------------  */
/********************* Arrow *********************/
/* arrow base */
.arr{
	position: relative;
	display: block;
	vertical-align: middle;
}
.arr::before,
.arr::after{
	position: absolute;
	margin: auto;
	content: "";
	vertical-align: middle;
}
/* arrow type */
.arr_dwn::before{
	right: 15px;
	top:-3px;
	bottom:0;

	width: 6px;
	height: 6px;
	border-top: 1px solid #555;
	border-right: 1px solid #555;
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
.arr_left::before{
	left:5px;
	top:0;
	bottom:0;

	width: 8px;
	height: 8px;
	border-top: 1px solid #717171;
	border-right: 1px solid #717171;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.arr_right::before{
	right: 12px;
	top:0;
	bottom:0;

	width: 8px;
	height: 8px;
	border-top: 1px solid #717171;
	border-right: 1px solid #717171;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* arrows */
.arrow_s {
  position: relative;
  display: inline-block;
  padding-left: 12px;
  color: #666;
  text-decoration: none;
}
.arrow_s:before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 4px;
  border-color: transparent transparent transparent #333;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -3px;
}

/* ------------------------------------------------------------------------
    Button
------------------------------------------------------------------------  */
.Btn_container {
	display: flex;
	justify-content: center;
}
.Btn_container > * {
	width: 100%;
	max-width: 220px;
	margin-top: .5em;
	margin-bottom: .5em;
	margin-left: 1em;
	margin-right: 1em;
}
.Btn {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	
	border-radius: 25px;
	height: 50px;
	background: #00b0ff;
	color: #fff;
}
.Btn.bg_cc {
	background: #ccc;
	color: #666;
}

/* ------------------------------------------------------------------------
    MV
------------------------------------------------------------------------  */
section#MV {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 600px;
}
#MV:before {
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background-image: url("../images/mv_image.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50%;
	width: 100%;
	height: 100%;
	z-index: -5;
}
#MV .MvContainer{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
}
#MV .MvContainer .MvMsg {
	box-sizing: border-box;

}
#MV .MvContainer .MvMsg .Mvtext{
	display: block;
	width: 100%;
	font-weight: 500;
	font-size:1.285em;
	line-height: 1.8em;
	background: rgba(255,255,255,.5);
	border-radius: 5px;
	padding: .5em 1em;
	box-sizing: border-box;
}
#MV .MvContainer .MvMsg .Mvbg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	z-index: -1;
	
	font-size: 12em;
	color : #ffffff;
	font-weight: bold;
}
#MV .MvContainer .MvMsg .Mvbg span{
	vertical-align: baseline;
	font-size: 0.45em;
	font-weight: bold;
}

#MV .MvContainer .MvMsg .Mvbg {
}

/* scroll */
.MV-Scrl{
	position: absolute;
	left: 50%;
	bottom: 25px;
	margin-left: -1.5em;
}
.MV-Scrl p{
	position: relative;
	font-size: 1.2rem;
	color: #fff;
}
.MV-Scrl p:before{
	position: absolute;
	left: 50%;
	top: -40px;
	width: 1px;
	content: '';
	background: #fff;
	animation: ani-MV-Scrl 2s infinite;
}
@keyframes ani-MV-Scrl {
  0% {
	opacity: 1;
	height: 0px;
  }
  50% {
    height: 40px;
    opacity: 1;
  }
  100% {
    height: 40px;
    opacity: 0;
  }
}

@media screen and (min-width:1024px){
	#MV .MvContainer .MvMsg {
		text-align: center;
	}
	#MV .MvContainer .MvMsg .Mvtext{
		font-size:1.57em;
		line-height:2em;
	}
	#MV .MvContainer .MvMsg .Mvbg {
		font-size: 21.875em;
	}
}

/* ------------------------------------------------------------------------
    MESSAGE
------------------------------------------------------------------------  */
#MESSAGE {
	position: relative;
	border-bottom: 1px solid #ccc;
}
#MESSAGE .Haty {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50% , -50%);
	font-size:12em;
	font-weight: bold;
	z-index: -1;
	color: #ececec;
	vertical-align: baseline;
}
#MESSAGE .Haty span{
	vertical-align: baseline;
	font-size: .5em;
}
.MessageTitle {
	font-size: 1.875em;
	margin-bottom: 1.125em;
	text-align: center;
	vertical-align: baseline;
}
.MessageTitle span{
	vertical-align: baseline;
	font-size: .6em;
	margin-left: .1em;
	margin-right: .1em;
}
#MESSAGE p{
	vertical-align: baseline;
}
#MESSAGE p span{
	vertical-align: baseline;
}
.MSG {
	font-size:1.125em;
	line-height: 2.5em;
}
@media screen and (min-width:769px){
	.MSG {text-align: center;}
}
/* ------------------------------------------------------------------------
    Display
------------------------------------------------------------------------  */
#Display-Area {}
.Display {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.Display.Center {
	justify-content: center;
}
.Display > .Item{
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	border:1px solid #ccc;
	margin-top: 1%;
	margin-bottom: 1%;
}
.Display > .Item > *{
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1.5em;
	box-sizing: border-box;
	padding: .5em 1em;
}
.Display > .Item > .Ttl{
	width: 10em;
	border-bottom: 1px solid #ccc;
	background: #ccc;
}
.Display > .Item > .Txt{
	width: calc(100% - 10em);
}
@media screen and (min-width:769px){
	.Display > .Item{
		max-width: 49%;
	}
	.Display > .Item > .Ttl{
		width: 12em;
		border-bottom: none;
		border-right: 1px solid #ccc;
	}
	.Display > .Item > .Txt{
		width: calc(100% - 12em);
	}
}

/* ------------------------------------------------------------------------
    SONA
------------------------------------------------------------------------  */
section#SONA{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
section#SONA > *{
	width: 100%;
}
section#SONA .SonaText{
	text-align: center;
	margin-bottom: 20px;
}
section#SONA .SonaText .SonaSubttl{
	font-size: 1.875em;
	font-weight: 500;
	line-height: 1.8em;
	margin-bottom: .5em;
}
section#SONA .SonaText > p{
	line-height: 2.5em;
}
section#SONA .SonaText .Message{
	margin-top: 1em;
	margin-bottom: 1em;
	padding-bottom: 1em;
	padding-top: 1em;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
section#SONA .SonaText .Message p{
	text-align: left;
	font-size: .875em;
}
section#SONA .SonaImage{
	position: relative;
	display: flex;
	justify-content: center;
}
section#SONA .SonaImage .SonaLogo{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
}
section#SONA .SonaImage .SonaLogo img{
	max-width: 500px;
}
section#SONA .SonaImage .SonaPhone img{
	max-width: 430px;
}
section#SONA .SonaImage .SonaPhone {
}
@media screen and (min-width:1024px){
	section#SONA > *{
		width: 50%;
	}
	section#SONA .SonaText{
		margin-bottom: 0;
	}
}

/* ------------------------------------------------------------------------
    SONA BTN
------------------------------------------------------------------------  */
section#SONABTN{
	position: relative;
	
	display: flex;
	align-items: center;
	flex-direction: column;
	border-top: 1px solid #ccc;
}
section#SONABTN:before{
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	width: 100%;
	height: 100%;
	background-image: url("../images/sona_bg.jpg");
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: cover;
	z-index: -1;
	opacity: 0;
	transition: 3s;
}
section#SONABTN.active:before{
	opacity: 1;
}
section#SONABTN p{
	display: inline-block;
	font-weight: 500;
}
section#SONABTN .SonaAbout{
	font-size: 1.875em;
	margin-bottom: 1.3em;
}
section#SONABTN .SonaAboutMsg{
	line-height: 2em;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}
section#SONABTN h3{
	margin-top: 1em;
}
section#SONABTN .SonaBtn{
	width: 100%;
	max-width: 220px;
	margin-top: 3em;
}
@media screen and (min-width:769px){
	section#SONABTN .SonaAboutMsg{
		text-align: center;
	}
}

/* ------------------------------------------------------------------------
    PRICE
------------------------------------------------------------------------  */
#PRICE {
	display: flex;
	flex-wrap: wrap;
	border-radius: 7px;
	overflow: hidden;
}
#PRICE > * {
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
}
.Initial{ background: #d6dce5;}
.Monthly{ background: #8497b0; color: #fff;}
.Maintenance{ background: #2f5597; color: #fff;}
#PRICE > * .Pri_ttl{margin-bottom:.75em;}
#PRICE > * .Pri_price{}
#PRICE > * .Pri_cau{margin-bottom: .75em;}
#PRICE > * .Pri_add {}
.Price_Caution {
	margin-bottom: .75em;
	margin-top: .75em;
}
.Price_Caution li{
	font-size: .875em;
	padding-left: 1em;
	text-indent: -1em;
	line-height: 1.5em;
}
@media screen and (min-width:1024px){
	#PRICE > * {
		flex: 1;
	}
}

/* ------------------------------------------------------------------------
    EXAMPLE
------------------------------------------------------------------------  */
#EXAMPLE {}
.Example_List {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.Example_List > *{
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-left: 1em;
	box-sizing: border-box;
}
.Exam_ttl {
	font-size: 1.125em;
	background: #d2d2d2;
	padding: .3em 1em;
	box-sizing: border-box;
	border-radius: 3px;
	margin-bottom: 15px;
}
.Exam_Contents {
	display: flex;
	margin-top: .75em;
	margin-bottom: .75em;
}
.Exam_Contents > *{
	line-height: 1.5em;
}
.Exam_Contents > *:nth-child(1){
	width: 150px;
}
.Exam_Contents > *:nth-child(2){
	width: calc(100% - 150px);
}
@media screen and (min-width:1024px){
	.Example_List > *{
		max-width: 31%;
	}
}

/* ------------------------------------------------------------------------
    Payment
------------------------------------------------------------------------  */
#PAYMENT {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
#PAYMENT > *{
	display: flex;
	justify-content: center;
	padding-left: 1em;
	padding-right:1em;
	margin-top: .75em;
	margin-bottom: .75em;
}
#PAYMENT > *.Image{width: 100px;}
@media screen and (max-width:768px){
	#PAYMENT > *{
		width: 100%;
	}
}