@charset "utf-8";
/* ===================================================================

 file name  :class.css
 style info :クラス指定

=================================================================== */
/* ---------------------------------------------------------------------------
	clearfix
--------------------------------------------------------------------------- */
#main .clearfix:after {
	content:"";
	display:block;
	clear:both;
}

#main .pcHide{ display:none !important;}
@media screen and (max-width: 760px){
	#main .pcHide{ display:block !important;}
	#main .spHide{ display:none !important;}
}

/* ---------------------------------------------------------------------------
	typography
--------------------------------------------------------------------------- */
#main .wf-roboto{font-family: 'Roboto Condensed', sans-serif !important;}
#main .wf-notosans{font-family: YakuHanJP,'Noto Sans JP', sans-serif !important;}
#main .wf-notoserif{font-family: YakuHanMP,'Noto Serif JP', serif !important;}


/* ---------------------------------------------------------------------------
	囲み要素
--------------------------------------------------------------------------- */
#main .sec-inner-1000{
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
}
#main .page-caption{
	padding-bottom: 2em;
	padding-left: 10px;
	padding-right: 10px;
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
	font-size: 14px;
	line-height: 1.8;
}
@media screen and (max-width: 760px){
	#main .sec-inner-1000{
		padding-left: 30px;
		padding-right: 30px;
	}
	#main .page-caption{
		padding-left: 30px;
		padding-right: 30px;
		font-size: 20px;
		line-height: 1.5;
	}
}

#main .ls-m002{	letter-spacing: -0.02em;}
#main .ls-m005{	letter-spacing: -0.05em;}
#main .ls-m008{	letter-spacing: -0.08em;}
#main .ls-m01{	letter-spacing: -0.1em;}
#main .ls-01{	letter-spacing: 0.1em;}
@media screen and (max-width: 760px){
#main .sp-ls0{	letter-spacing: 0;}

}
/* ---------------------------------------------------------------------------
	animation
--------------------------------------------------------------------------- */
/* js連動 */
#main .sc-fade{
	opacity:0;
	transition:all ease .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-fade.sc-show{
	opacity:1;
}
#main .sc-zoom{
	opacity:0;
	transform:scale(0.8);
	transition:all ease .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-zoom.sc-show{
	opacity:1;
	transform:scale(1);
}
#main .sc-slideup{
	opacity:0;
	transform:translateY(50px);
	transition:all ease .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-slideup.sc-show{
	opacity:1;
	transform:translateY(0);
}
#main .sc-slideleft{
	opacity:0;
	transform:translateX(100px);
	transition:transform ease 1.5s,opacity ease 1.5s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-slideleft.sc-show{
	opacity:1;
	transform:translateX(0);
}
#main .sc-slideright{
	opacity:0;
	transform:translateX(-100px);
	transition:all ease .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-slideright.sc-show{
	opacity:1;
	transform:translateX(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
#main .sc-fade-box .sc-target{
	opacity:0;
	transition-timing-function:ease-out;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-fade-box.show .sc-target{
	opacity:1;
}
#main .sc-slideup-box .sc-target{
	opacity:0;
	transform:translateY(50px);
	transition-timing-function:linear;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-slideup-box.show .sc-target{
	opacity:1;
	transform:translateY(0);
}
#main .sc-zoom-box .sc-target{
	opacity:0;
	transform:scale(0.8);
	transition-timing-function:ease-out;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	transition-duration: 1s !important;
}
.pre-anim-start #main .sc-zoom-box.show .sc-target{
	opacity:1;
	transform:scale(1);
}
#main .sc-diagonalEffect-box .sc-target{
	opacity:0;
	transition-timing-function:linear;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .sc-diagonalEffect-box.show .sc-target{
	opacity:1;
}


/*fade*/
#main .letter-fade span{
	opacity:0;
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
.pre-anim-start #main .letter-fade.sc-show span{
	opacity:1;
}
/*glow*/
#main .letter-glow{
	opacity:0;
}
#main .letter-glow span{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	-webkit-transform: translate3d(0,0,0);
}
.pre-anim-start #main .letter-glow.sc-show{
	opacity:1;
}
.pre-anim-start #main .letter-glow.sc-show span {
	animation: letter-glow 1.2s 0s ease both;
}
@keyframes letter-glow{
  0%   { opacity: 0; text-shadow: 0px 0px 30px rgba(255,255,255,0.1)}
  66%  { opacity: 1; text-shadow: 0px 0px 30px rgba(255,255,255,0.9) }
  77%   { opacity: 1;  text-shadow: 0px 0px 30px rgba(255,255,255,0.0)}
  100% { opacity:0.9; text-shadow: 0px 0px 30px rgba(255,255,255,0.0)}
}
@keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 1;}
}



/*
.margin
---------------------------*/
#main .mb0{margin-bottom: 0 !important;}
#main .mb1{margin-bottom: 1em !important;}
#main .mb15{margin-bottom: 1.5em !important;}
#main .mb18{margin-bottom: 1.8em !important;}
#main .mb2{margin-bottom: 2em !important;}
/*
.padding
---------------------------*/
#main .pb0{padding-bottom: 0 !important;}

/*
.align
---------------------------*/
#main .align-center{text-align:center !important;}

/*
.cl-色番号　カラー
---------------------------*/

/*
.bg-色番号　背景色
---------------------------*/

/*
.ttl-任意名称　タイトル
---------------------------*/

/*
.btn-任意名称　ボタン
---------------------------*/
/* .btn-frame -*/
#main .btn-frame a{
	display: block;
	position: relative;
	color: #FFF;
}
#main .btn-frame a .inner-line01-tb::before,
#main .btn-frame a .inner-line01-tb::after,
#main .btn-frame a .inner-line02-tb::before,
#main .btn-frame a .inner-line02-tb::after,
#main .btn-frame a .inner-line03-tb::before,
#main .btn-frame a .inner-line03-tb::after,
#main .btn-frame a .inner-line04-tb::before,
#main .btn-frame a .inner-line04-tb::after{
	content:'';
	width: calc(100% - 8px);
	height: 1px;
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleX(0);
}
#main .btn-frame a .inner-line01-lr::before,
#main .btn-frame a .inner-line01-lr::after,
#main .btn-frame a .inner-line02-lr::before,
#main .btn-frame a .inner-line02-lr::after,
#main .btn-frame a .inner-line03-lr::before,
#main .btn-frame a .inner-line03-lr::after,
#main .btn-frame a .inner-line04-lr::before,
#main .btn-frame a .inner-line04-lr::after{
	content:'';
	width: 1px;
	height: calc(100% - 8px);
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleY(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
#main .btn-frame a .inner-line03-tb::before,
#main .btn-frame a .inner-line03-tb::after,
#main .btn-frame a .inner-line04-tb::before,
#main .btn-frame a .inner-line04-tb::after,
#main .btn-frame a .inner-line03-lr::before,
#main .btn-frame a .inner-line03-lr::after,
#main .btn-frame a .inner-line04-lr::before,
#main .btn-frame a .inner-line04-lr::after{
	z-index: 2;
	background: #666666;
}
#main .btn-frame a .inner-line01-tb::before,
#main .btn-frame a .inner-line01-tb::after,
#main .btn-frame a .inner-line01-lr::before,
#main .btn-frame a .inner-line01-lr::after,
#main .btn-frame a .inner-line03-tb::before,
#main .btn-frame a .inner-line03-tb::after,
#main .btn-frame a .inner-line03-lr::before,
#main .btn-frame a .inner-line03-lr::after,
#main .btn-frame a .inner-line04-tb::before,
#main .btn-frame a .inner-line04-tb::after,
#main .btn-frame a .inner-line04-lr::before,
#main .btn-frame a .inner-line04-lr::after{
	transition: transform ease 1.5s;
}
#main .btn-frame a .inner-line02-tb::before,
#main .btn-frame a .inner-line02-tb::after,
#main .btn-frame a .inner-line02-lr::before,
#main .btn-frame a .inner-line02-lr::after{
	transition: transform ease 1.5s .5s;
}
#main .btn-frame.sc-show a .inner-line01-tb::before,
#main .btn-frame.sc-show a .inner-line01-tb::after,
#main .btn-frame.sc-show a .inner-line02-tb::before,
#main .btn-frame.sc-show a .inner-line02-tb::after{
	transform: scaleX(1);
}
#main .btn-frame.sc-show a .inner-line01-lr::before,
#main .btn-frame.sc-show a .inner-line01-lr::after,
#main .btn-frame.sc-show a .inner-line02-lr::before,
#main .btn-frame.sc-show a .inner-line02-lr::after{
	transform: scaleY(1);
}
#main .btn-frame a .inner-line01-tb::before,
#main .btn-frame a .inner-line03-tb::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .btn-frame a .inner-line01-tb::after,
#main .btn-frame a .inner-line03-tb::after{
	bottom: 8px;
	left: 0;
	transform-origin: right bottom;
}
#main .btn-frame a .inner-line01-lr::before,
#main .btn-frame a .inner-line03-lr::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .btn-frame a .inner-line01-lr::after,
#main .btn-frame a .inner-line03-lr::after{
	top: 0;
	right: 8px;
	transform-origin: right bottom;
}
#main .btn-frame a .inner-line02-tb::before,
#main .btn-frame a .inner-line04-tb::before{
	top: 8px;
	left: 8px;
	transform-origin: right top;
}
#main .btn-frame a .inner-line02-tb::after,
#main .btn-frame a .inner-line04-tb::after{
	bottom: 0;
	left: 8px;
	transform-origin: left bottom;
}
#main .btn-frame a .inner-line02-lr::before,
#main .btn-frame a .inner-line04-lr::before{
	top: 8px;
	left: 8px;
	transform-origin: right bottom;
}
#main .btn-frame a .inner-line02-lr::after,
#main .btn-frame a .inner-line04-lr::after{
	top: 8px;
	right: 0;
	transform-origin: left top;
}
#main .btn-frame a .inner-line-v::before,
#main .btn-frame a .inner-line-v::after{
	content:'';
	position: absolute;
	bottom: -29px;
	left: calc(50% + 3px);
	height: 50px;
	width: 1px;
	background: #FFF;;
	transform-origin: left top;
	transform: scaleY(0) ;
	transition: transform ease .5s 1s,bottom ease .5s,background ease .5s !important;

}
#main .btn-frame a .inner-line-v::after{
	bottom: -19px;
	left: calc(50% - 2px);
}
#main .btn-frame.sc-show a .inner-line-v::before,
#main .btn-frame.sc-show a .inner-line-v::after{
	transform: scaleY(1) ;
}
#main .btn-frame a .inner-line-a::before{
	content:'';
	position: absolute;
	bottom: -16px;
	left: calc(50% - 2px);
	height:25px;
	width: 1px;
	background: #FFF;;
	transform-origin: left bottom;
	transform: rotate(0) ;
	opacity: 0;
	transition: transform ease .5s,opacity ease .5s;
}
#main .btn-frame.sc-show.animation-end a .inner-line-v::before,
#main .btn-frame.sc-show.animation-end a .inner-line-v::after{
	transition: all ease .5s;
}
#main .btn-frame a h4,
#main .btn-frame a p{
	transition: transform ease 1s,opacity ease 1s;
	transform: translateY(30px);
	opacity: 0;
}
#main .btn-frame.sc-show a h4,
#main .btn-frame.sc-show a p{
	transform: translateY(0);
	opacity: 1;
}
/*hover*/
#main .btn-frame a:hover .inner-line03-tb::before,
#main .btn-frame a:hover .inner-line03-tb::after,
#main .btn-frame a:hover .inner-line04-tb::before,
#main .btn-frame a:hover .inner-line04-tb::after{
	transform: scaleX(1);
}
#main .btn-frame a:hover .inner-line03-lr::before,
#main .btn-frame a:hover .inner-line03-lr::after,
#main .btn-frame a:hover .inner-line04-lr::before,
#main .btn-frame a:hover .inner-line04-lr::after{
	transform: scaleY(1);
}
#main .btn-frame a:hover .inner-line-v::before,
#main .btn-frame a:hover .inner-line-v::after{
	transition: transform ease .5s,bottom ease .5s,background ease .5s !important;
	transform: translateY(8px);
	background: #666666;
}
#main .btn-frame a:hover .inner-line-v::before{
	bottom: -11px;
}
#main .btn-frame a:hover .inner-line-a::before{
	transform: translateY(10px) rotate(30deg) ;
	opacity: 1;
	background: #666666;
}
#main .btn-frame a:hover h4{
	transform: scale(1.2) translateY(0);
}
@media screen and (max-width: 760px){
	#main .btn-frame a .inner-line01-tb::before,
	#main .btn-frame a .inner-line01-tb::after,
	#main .btn-frame a .inner-line02-tb::before,
	#main .btn-frame a .inner-line02-tb::after,
	#main .btn-frame a .inner-line03-tb::before,
	#main .btn-frame a .inner-line03-tb::after,
	#main .btn-frame a .inner-line04-tb::before,
	#main .btn-frame a .inner-line04-tb::after{
		width: calc(100% - 4px);
	}
	#main .btn-frame a .inner-line01-lr::before,
	#main .btn-frame a .inner-line01-lr::after,
	#main .btn-frame a .inner-line02-lr::before,
	#main .btn-frame a .inner-line02-lr::after,
	#main .btn-frame a .inner-line03-lr::before,
	#main .btn-frame a .inner-line03-lr::after,
	#main .btn-frame a .inner-line04-lr::before,
	#main .btn-frame a .inner-line04-lr::after{
		height: calc(100% - 4px);
	}
	#main .btn-frame a .inner-line01-tb::after,
	#main .btn-frame a .inner-line03-tb::after{
		bottom: 4px;
	}
	#main .btn-frame a .inner-line01-lr::after,
	#main .btn-frame a .inner-line03-lr::after{
		right: 4px;
	}
	#main .btn-frame a .inner-line02-tb::before,
	#main .btn-frame a .inner-line04-tb::before{
		top: 4px;
		left: 4px;
	}
	#main .btn-frame a .inner-line02-tb::after,
	#main .btn-frame a .inner-line04-tb::after{
		left: 4px;
	}
	#main .btn-frame a .inner-line02-lr::before,
	#main .btn-frame a .inner-line04-lr::before{
		top: 4px;
		left: 4px;
	}
	#main .btn-frame a .inner-line02-lr::after,
	#main .btn-frame a .inner-line04-lr::after{
		top: 4px;
	}
	#main .btn-frame a .inner-line-v::before,
	#main .btn-frame a .inner-line-v::after{
		left: calc(50% + 1px);
		bottom: -14px;
		height: 25px;
	}
	#main .btn-frame a .inner-line-v::after{
		bottom: -9px;
		left: calc(50% - 1px);
	}
	#main .btn-frame a .inner-line-a::before{
		bottom: -8px;
		left: calc(50% - 1px);
		height:12px;
	}
	#main .btn-frame a h4,
	#main .btn-frame a p{
		transform: translateY(15px);
	}
	/*hover*/
	#main .btn-frame a:hover .inner-line-v::before,
	#main .btn-frame a:hover .inner-line-v::after{
		transform: translateY(4px);
	}
	#main .btn-frame a:hover .inner-line-v::before{
		bottom: -6px;
	}
	#main .btn-frame a:hover .inner-line-a::before{
		transform: translateY(5px) rotate(30deg) ;
	}
}

/* .btn-here -*/
#main .btn-here{
	max-width: 310px;
	margin: 0 auto;
	opacity: 0;
	transition: opacity ease 1.5s;
}
#main .btn-here.sc-show{
	opacity: 1;
}
#main .btn-here a{
	display: block;
	position: relative;
	color: #FFF;
	text-align: center;
	z-index: 1;
	padding: 34px 0 40px;
	border: 2px solid #FFF;
	border-radius: 30px;
}
#main .btn-here a .inner-shine{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: 30px;
	z-index: 1;
}
#main .btn-here.sc-show a .inner-shine::before{
	content: '';
	position: absolute;
	z-index: -1;
	top: -100%;
	left: -10%;
	width: 30px;
	height: 50%;
	background: rgba(255, 255, 255,0.5);
	animation: btn-shine 3s ease-in-out infinite;
	-webkit-backface-visibility:hidden;
 backface-visibility:hidden;
}
@keyframes btn-shine{
	0% { transform: scale(0) rotate(45deg); opacity: 0; }
	60% { transform: scale(0) rotate(45deg); opacity: 0.3; }
	61% { transform: scale(4) rotate(45deg); opacity: 0.8; }
	100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
#main .btn-here a::after{
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(146, 180, 211,0.2);
	box-shadow: 0 0 24px 8px rgba(146, 180, 211, 0.6);
	transition: all ease-in-out .4s !important;
	transform-origin: center;
	border-radius: 30px;
	animation: shadow-shine 2s ease-in-out infinite;
}
@keyframes shadow-shine{
	0% { box-shadow: 0 0 24px 8px rgba(146, 180, 211, 0.6); background: rgba(102, 160, 211,0.2)}
	50% { box-shadow: 0 0 70px 12px rgba(146, 180, 211, 1); background: rgba(20, 60, 100,0.6)}
	100% { box-shadow: 0 0 24px 8px rgba(146, 180, 211, 0.6); background: rgba(102, 160, 211,0.2)}
}

#main .btn-here a span{
	display: block;
	line-height: 0;
	font-size: 0;
}
#main .btn-here a .name{
	height: 17px;
	margin-bottom: 24px;
}
#main .btn-here a .name img{
	width: auto;
	height: 100%;
	transition: all ease-in-out .4s;
}
#main .btn-here a .clickhere{
	height: 15px;
	position: relative;
}
#main .btn-here a .clickhere img{
	width: auto;
	height: 100%;
	transform-origin: center;
}
@keyframes scalable{
  0%   { transform: scale(0.9);}
  100% { transform: scale(1);}
}
#main .btn-here a .clickhere::before,
#main .btn-here a .clickhere::after{
	content:'';
	position: absolute;
	top: -6px;
	left: 0;
	height: 1px;
	width: calc(50% + 35px);
	background: #FFF;
	transition: all ease 1s 1s;
	transform-origin: left top;
	transform: scaleX(0) ;
}
#main .btn-here a .clickhere::after{
	left: auto;
	top: auto;
	right: 0;
	bottom: -6px;
	transform-origin: right top;
	transform: scaleX(0);
}
#main .btn-here a .name,
#main .btn-here a .clickhere{
	transition: transform ease 1s,opacity ease 1s;
	transform: translateY(30px);
	opacity: 0;
}
#main .btn-here.sc-show a .name,
#main .btn-here.sc-show a .clickhere{
	transform: translateY(0);
	opacity: 1;
}
#main .btn-here.sc-show a .clickhere::before,
#main .btn-here.sc-show a .clickhere::after{
	transform: scaleX(1) ;
}
#main .btn-here.sc-show.animation-end a .clickhere::before,
#main .btn-here.sc-show.animation-end a .clickhere::after{
	transition: all ease .4s;
}


/*hover*/
#main .btn-here a:hover{
	background: rgba(10,60,130,0.3);
}
#main .btn-here a:hover .name img{
	transform: scale(1.1);
}
#main .btn-here a:hover .clickhere::before{
	transition: all ease-in-out .4s !important;
	width: 80% !important;
}
#main .btn-here a:hover .clickhere::after{
	transition: all ease-in-out .4s !important;
	width: 80% !important;
}
@media screen and (max-width: 760px){
	#main .btn-here{
		max-width: 500px;
	}
	#main .btn-here a{
		padding: 52px 0 66px;
	}
	#main .btn-here a .name{
		height: 26px;
		margin-bottom: 40px;
	}
	#main .btn-here a .clickhere{
		height: 20px;
	}
	#main .btn-here a::after{
		animation: shadow-shine-sp 2s ease-in-out infinite;
	}
	#main .btn-here a .clickhere::before,
	#main .btn-here a .clickhere::after{
		top: -12px;
	}
	#main .btn-here a .clickhere::after{
		top: auto;
		bottom: -12px;
	}

	@keyframes shadow-shine-sp{
		0% { box-shadow: 0 0 10px 5px rgba(146, 180, 211, 0.6); background: rgba(102, 160, 211,0.2)}
		50% { box-shadow: 0 0 30px 9px rgba(146, 180, 211, 1); background: rgba(20, 60, 100,0.6)}
		100% { box-shadow: 0 0 10px 5px rgba(146, 180, 211, 0.6); background: rgba(102, 160, 211,0.2)}
	}

}


/*
.frame　囲い装飾
---------------------------*/
#main .frame{
	position: relative;
}
#main .frame .inner-line01-tb::before,
#main .frame .inner-line01-tb::after,
#main .frame .inner-line02-tb::before,
#main .frame .inner-line02-tb::after{
	content:'';
	width: calc(100% - 8px);
	height: 1px;
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleX(0);
}
#main .frame .inner-line01-lr::before,
#main .frame .inner-line01-lr::after,
#main .frame .inner-line02-lr::before,
#main .frame .inner-line02-lr::after{
	content:'';
	width: 1px;
	height: calc(100% - 8px);
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleY(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
#main .frame .inner-line01-tb::before,
#main .frame .inner-line01-tb::after,
#main .frame .inner-line01-lr::before,
#main .frame .inner-line01-lr::after{
	transition: transform ease 2s;
}
#main .frame .inner-line02-tb::before,
#main .frame .inner-line02-tb::after,
#main .frame .inner-line02-lr::before,
#main .frame .inner-line02-lr::after{
	transition: transform ease 2s .5s;
}
#main .frame.sc-show .inner-line01-tb::before,
#main .frame.sc-show .inner-line01-tb::after,
#main .frame.sc-show .inner-line02-tb::before,
#main .frame.sc-show .inner-line02-tb::after{
	transform: scaleX(1);
}
#main .frame.sc-show .inner-line01-lr::before,
#main .frame.sc-show .inner-line01-lr::after,
#main .frame.sc-show .inner-line02-lr::before,
#main .frame.sc-show .inner-line02-lr::after{
	transform: scaleY(1);
}
#main .frame .inner-line01-tb::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .frame .inner-line01-tb::after{
	bottom: 8px;
	left: 0;
	transform-origin: right bottom;
}
#main .frame .inner-line01-lr::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .frame .inner-line01-lr::after{
	top: 0;
	right: 8px;
	transform-origin: right bottom;
}
#main .frame .inner-line02-tb::before{
	top: 8px;
	left: 8px;
	transform-origin: right top;
}
#main .frame .inner-line02-tb::after{
	bottom: 0;
	left: 8px;
	transform-origin: left bottom;
}
#main .frame .inner-line02-lr::before{
	top: 8px;
	left: 8px;
	transform-origin: right bottom;
}
#main .frame .inner-line02-lr::after{
	top: 8px;
	right: 0;
	transform-origin: left top;
}

/*
.frame-type02　囲い装飾type2（縦線あり）
---------------------------*/
#main .frame-type02 > div{
	display: block;
	position: relative;
	color: #FFF;
	padding: 35px 10px 45px;
	text-align: center;
	line-height: 1.8;
}
#main .frame-type02 .inner-line01-tb::before,
#main .frame-type02 .inner-line01-tb::after,
#main .frame-type02 .inner-line02-tb::before,
#main .frame-type02 .inner-line02-tb::after{
	content:'';
	width: calc(100% - 8px);
	height: 1px;
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleX(0);
}
#main .frame-type02 .inner-line01-lr::before,
#main .frame-type02 .inner-line01-lr::after,
#main .frame-type02 .inner-line02-lr::before,
#main .frame-type02 .inner-line02-lr::after{
	content:'';
	width: 1px;
	height: calc(100% - 8px);
	background: #FFF;
	position: absolute;
	pointer-events: none;
	transform: scaleY(0);
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}
#main .frame-type02 .inner-line01-tb::before,
#main .frame-type02 .inner-line01-tb::after,
#main .frame-type02 .inner-line01-lr::before,
#main .frame-type02 .inner-line01-lr::after{
	transition: transform ease 1.5s;
}
#main .frame-type02 .inner-line02-tb::before,
#main .frame-type02 .inner-line02-tb::after,
#main .frame-type02 .inner-line02-lr::before,
#main .frame-type02 .inner-line02-lr::after{
	transition: transform ease 1.5s .5s;
}
#main .frame-type02.sc-show .inner-line01-tb::before,
#main .frame-type02.sc-show .inner-line01-tb::after,
#main .frame-type02.sc-show .inner-line02-tb::before,
#main .frame-type02.sc-show .inner-line02-tb::after{
	transform: scaleX(1);
}
#main .frame-type02.sc-show .inner-line01-lr::before,
#main .frame-type02.sc-show .inner-line01-lr::after,
#main .frame-type02.sc-show .inner-line02-lr::before,
#main .frame-type02.sc-show .inner-line02-lr::after{
	transform: scaleY(1);
}
#main .frame-type02 .inner-line01-tb::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .frame-type02 .inner-line01-tb::after{
	bottom: 8px;
	left: 0;
	transform-origin: right bottom;
}
#main .frame-type02 .inner-line01-lr::before{
	top: 0;
	left: 0;
	transform-origin: left top;
}
#main .frame-type02 .inner-line01-lr::after{
	top: 0;
	right: 8px;
	transform-origin: right bottom;
}
#main .frame-type02 .inner-line02-tb::before{
	top: 8px;
	left: 8px;
	transform-origin: right top;
}
#main .frame-type02 .inner-line02-tb::after{
	bottom: 0;
	left: 8px;
	transform-origin: left bottom;
}
#main .frame-type02 .inner-line02-lr::before{
	top: 8px;
	left: 8px;
	transform-origin: right bottom;
}
#main .frame-type02 .inner-line02-lr::after{
	top: 8px;
	right: 0;
	transform-origin: left top;
}
#main .frame-type02 .inner-line-v::before,
#main .frame-type02 .inner-line-v::after{
	content:'';
	position: absolute;
	bottom: -29px;
	left: calc(50% + 3px);
	height: 50px;
	width: 1px;
	background: #FFF;;
	transform-origin: left top;
	transform: scaleY(0) ;
	transition: transform ease .5s 1s,bottom ease .5s,background ease .5s !important;
}
#main .frame-type02 .inner-line-v::after{
	bottom: -19px;
	left: calc(50% - 2px);
}
#main .frame-type02.frame-type02-linetop .inner-line-v::before,
#main .frame-type02.frame-type02-linetop .inner-line-v::after{
	top: -19px;
	bottom: auto;
}
#main .frame-type02.frame-type02-linetop .inner-line-v::after{
	top: -29px;
	bottom: auto;
}

#main .frame-type02.sc-show .inner-line-v::before,
#main .frame-type02.sc-show .inner-line-v::after{
	transform: scaleY(1) ;
}
#main .frame-type02 h4,
#main .frame-type02 p{
	transition: transform ease 1s,opacity ease 1s;
	transform: translateY(30px);
	opacity: 0;
}
#main .frame-type02.sc-show h4,
#main .frame-type02.sc-show p{
	transform: translateY(0);
	opacity: 1;
}

@media screen and (max-width: 760px){
	#main .frame-type02 > div{
		padding: 50px 20px 70px;
	}

}


/*
 * .txt-shadow
 * テキスト　シャドウをつける
 *----------------------------------------------------------- */
#main .txt-shadow{
	color: #000;
	text-shadow: 0 0 3px rgba(255,255,255,0.5),
					1px 0 3px rgba(255,255,255,0.5),
					0 1px 3px rgba(255,255,255,0.5),
					-1px 0 3px rgba(255,255,255,0.5),
					0 -1px 3px rgba(255,255,255,0.5),
					0 0 5px rgba(255,255,255,0.5);
}
#main .txt-shadow2{
	color: #000;
	text-shadow: 0 0 2px rgba(255,255,255,1),
					1px 0 2px rgba(255,255,255,1),
					0 1px 2px rgba(255,255,255,1),
					-1px 0 2px rgba(255,255,255,1),
					0 -1px 2px rgba(255,255,255,1),
					0 0 3px rgba(255,255,255,1),
					0 0 3px rgba(255,255,255,1);
}
#main .txt-shadow-wh{
	color: #FFF;
	text-shadow: 0 0 3px rgba(0,0,0,0.5),
					1px 0 3px rgba(0,0,0,0.5),
					0 1px 3px rgba(0,0,0,0.5),
					-1px 0 3px rgba(0,0,0,0.5),
					0 -1px 3px rgba(0,0,0,0.5),
					0 0 5px rgba(0,0,0,0.5);
}