@charset "UTF-8";
@import url("../oni/style.css");
@import url("common/css/reset.css");

/*
Theme Name: oni child
Template: oni
*/

/* template 子テーマ用のスタイルを書く */

/*ANIMATION*/
.background{
  position:relative;
  margin-bottom: 54px;
}
/*.background:hover{opacity:0.7}
.background a{
	display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 81%;
    z-index: 100;
}*/
.background img {width:100%;
	opacity: 1.0;
    filter: alpha(opacity=100);
}
.wrap_in .background  a:hover img{opacity:1}
.background .content a{opacity:1;    display: inline-block;}
.background .content a:hover,.background .content a:active{
	opacity: 0.9 !important;
    transition: initial;
    -webkit-transition: inherit;
}
/*.background img:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); 
}*/
.background .line{
	position: absolute;
	background: #fff;
	height: 1.5px;
	width: 0px;
	top: 14.5%;
}
.background .rotate{
    
    position: absolute;
    width: 1%;
    height: 100%;
}
.background .rotate.right{
   transform: rotate(-12deg);
   -ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg);
   transform-origin:right top;
   -ms-transform-origin:right top;
   -webkit-transform-origin:right top;
	top: 14.5%;
    left: 45.5%;
}
.background .rotate.left{
	transform: rotate(12deg);
	-ms-transform: rotate(12deg); /* IE 9 */
	-webkit-transform: rotate(12deg);
	transform-origin:left top;
	-ms-transform-origin:left top;
	-webkit-transform-origin:left top;
	top: 14.5%;
	left: 54.5%;
}
.background .line.right{left: 9.6%;}
.background .line.left{right: 8.6%;}
.background .line.top.rights   {height: 0px;width: 2px;top: 0; left: 0px;}
.background .line.top.lefts   {height: 0px;width: 2px;top: 0; right: 0px;}
.background.active .line.top.lefts,
.background.active .line.top.rights{height: 77.5%;transition: height .1s linear .2s;-webkit-transition: height .1s linear .2s;}
.background.active .line.right,
.background.active .line.left{width: 36.9%;transition: width .1s linear;-webkit-transition: width .1s linear;}
.img_ttl_01 .background .img_ttl_text{top:114px;}
.img_ttl_02 .background .img_ttl_text{top: 114px;right: 200px;    left: inherit;}
@media(max-width:768px){
	.background .line.right,.background .rotate.right{top: 19.5%;}
	.background.active .line.top.lefts, .background.active .line.top.rights{height: 63.5%;}
	
	.background .line.left,.background .rotate.left{top: 19.5%;}
}
@media(max-width:468px){
	/*.background .line.right,.background .line.left,
	.background .rotate {top: 12.55%;}
	.background .rotate.right,.background .rotate.left{top:12.55%;}
	.background.active .line.top.lefts, .background.active .line.top.rights{height:53.5%}*/
}
.row-image-fix{width:100%;display:inline-block;position:relative;padding-top: 14px;padding-bottom: 14px;}
.row-image-fix>div{width: 50%;display:inline-block;float:left;}
.row-image-fix .content{position:relative;width: 108%;}
.row-image-fix .content.content-1{bottom: -14px;}
.row-image-fix .content.content-2{right: 31px;top: -14px;}
.row-image-fix .content.content-1.edit{left: -32px;}
.row-image-fix .content.content-2.edit{right: 14px;}
@media(max-width:768px){
	.row-image-fix .content.content-1{bottom: -14px;}
	.row-image-fix .content.content-2{right: 11px;top: -14px;}
	.row-image-fix .content.content-1.edit{left: -12px;}
	.row-image-fix .content.content-2.edit{right: 0px;}
	.img_ttl_01 .background .img_ttl_text {top: 55px;}
	.img_ttl_02 .background .img_ttl_text {top: 55px;right: 55px;}
}