@charset "UTF-8";

section.ba * {
    box-sizing: border-box;
}
.ba h2.title,
.ba h3.title,
.ba h4.title {
	height: 90px;
	margin: 0 auto 50px;
	text-align: center;
}
h2.title,
h3.title,
h4.title {
	text-align: left;
	font-size:42px;
	font-size:4.2rem;
	font-weight: normal;
	position: relative;
	display: inline-block;
	left: 0;
	margin: 0px 0 0 70px;
	right: 0;
	width: auto;
	color: #000;
	letter-spacing: 0.2em;
	line-height: 1;
}
.ba h2.title span,
.ba h4.title span{
	display: block;
	font-size: 16px;
	color: #000;
	text-align: center;
	margin: 40px auto 0;
	left: 0;
	right: 0;
}

.ba h3.title {
	display: block;
}

.ba h3.title span.main_ttl {
	display:inline-block;
	padding: 0;
}
.ba h3.title span.sub_ttl {
    display: block;
    font-size: 16px;
    color: #000;
    text-align: center;
    margin: 40px auto 0;
    left: 0;
    right: 0;
}
.ba{
	width: auto;
	max-width: 845px;
	margin: 20px auto 150px;
	position: relative;
}
.ba .batxt{
	padding: 0 20px;
}
.ba .figure_img{
	margin-bottom: 50px;
}
.ba .figure_img:before{
	content: "";
	position: absolute;
	width: 410px;
	height: 262px;
	background-image: url('/common/upload_data/photographer-soracom/image/20200604191858.png');
	background-repeat: repeat;
	margin: 60px auto;
	text-align: center;
	transform: skew(-56.5deg,11deg) scale(1);
	left: 0;
	right: 0;
}


.ba .img_box:first-child,
.ba figure:first-child {
	position: relative;
	z-index: 1;
	padding-bottom: 18px;
	padding: 20px 0px 20px 20px;
}
.ba .img_box:last-child,
.ba figure:last-child {
	position: relative;
	z-index: 1;
	padding-bottom: 18px;
	padding: 20px 20px 20px 0px;
}
.ba .img_box:first-child p,
.ba figure:first-child p{
	background: #81DAF5;
	display: inline-block;
	padding: 8px 10px;
	margin: 0 auto;
	position: absolute;
	top: 0px;
	z-index: 1000;
	color: #fff;
	left: 0px;
	width: 160px;
	font-size: 12px;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}

.ba .img_box:last-child,
.ba figure:last-child{
	padding-top: 100px;
}
.ba .img_box:last-child p,
.ba figure:last-child p {
	background: #81DAF5;
	display: inline-block;
	padding: 8px 10px;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	z-index: 1000;
	color: #fff;
	right: 0px;
	width: 160px;
	font-size: 12px;
	font-size: 1.2em;
	letter-spacing: 0.1em;
}
.batxt{
	width: 800px;
	margin: 20px auto;
	position: relative;
}
.batxt h3,
.batxt h4 {
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	padding-bottom: 15px;
	color: #000;
	text-align: left;
	font-weight: bold;
	letter-spacing: 0.15em;
}
.deg {
	position:relative;
	perspective:1000px;
}
.deg.back {
	z-index:-1;
}
.deg > [data-type="left"] {
	transition:all 1s ease;
	transform: rotateY(90deg) translateX(-100px);
	opacity:0;
}
.deg > [data-type="right"] {
	transition:all 1s ease;
	transform: rotateY(-90deg) translateX(100px);
	opacity:0;
}
.deg.active > *{
	transform: rotateY(0deg);
	opacity:1;
}
/*  Scrolling Appear */
.scroll {
	transition:transform 1.0s ease,opacity 1.0s ease;
}
.scroll[data-type="up"] {
	transform: translate3d(0, 100px, 0);
	opacity:0.01;
}
.scroll[data-type="down"] {
	transform: translate3d(0, -100px, 0);
	opacity:0.01;
}
.scroll[data-type="left"] {
	transform: translate3d(-100px, 0, 0);
	opacity:0.01;
}
.scroll[data-type="right"] {
	transform: translate3d(100px, 0, 0);
	opacity:0.01;
}
.scroll[data-type="fade"] {
	opacity:0;
}
.scroll[data-type="up"].active, .scroll[data-type="down"].active, .scroll[data-type="left"].active, .scroll[data-type="right"].active, .scroll[data-type="fade"].active  {
	transform: translate3d(0, 0, 0);
	opacity:1;
}
.scroll[data-type="width"] {
	transition:all 1.0s ease;
	max-width: 100%;
	width: 100%;
	min-height: 62px;
	padding: 20px 0 0;
	opacity:1;
}
.scroll[data-type="width"].active  {
	width:350px;
	padding: 20px 70px 0;
	opacity:1;
}


.scroll[data-type="text"]{
	transition:all 1.0s ease;
	opacity:0;
	filter:alpha(opacity=0);
	-webkit-transform:scale3d(1.3,1.3,1) rotate3d(1,-3,-1,-.1turn) translate3d(-50px,100px,0);
	transform:scale3d(1.3,1.3,1) rotate3d(1,-3,-1,-.1turn) translate3d(-50px,100px,0);
/* 	transition-delay: 2s; */
}
.scroll[data-type="text"].active{
	opacity:1;
	filter:alpha(opacity=100);
	-webkit-transform:scale3d(1,1,1) rotate3d(0,0,0,0) translate3d(0,0,0);
	transform:scale3d(1,1,1) rotate3d(0,0,0,0) translate3d(0,0,0);
	transition:all 0.8s linear;
/* 	transition-delay: 2s; */
}



.dur   {transition-delay: 0.1s;}
.dur2  {transition-delay: 0.2s;}
.dur3  {transition-delay: 0.3s;}
.dur4  {transition-delay: 0.4s;}
.dur5  {transition-delay: 0.5s;}
.dur6  {transition-delay: 0.6s;}
.dur7  {transition-delay: 0.7s;}
.dur8  {transition-delay: 0.8s;}
.dur9  {transition-delay: 0.9s;}
.dur10 {transition-delay:   1s;}
.dur11 {transition-delay: 1.1s;}
.dur12 {transition-delay: 1.2s;}
.dur13 {transition-delay: 1.3s;}
.dur14 {transition-delay: 1.4s;}
.dur15 {transition-delay: 1.5s;}
.dur16 {transition-delay: 1.6s;}
.dur17 {transition-delay: 1.7s;}
.dur18 {transition-delay: 1.8s;}
.dur19 {transition-delay: 1.9s;}
.dur20 {transition-delay:   2s;}
.dur25 {transition-delay: 2.5s;}
.dur30 {transition-delay:   3s;}
.dur35 {transition-delay: 3.5s;}


.scroll[data-type="text"].dur   {transition-delay: 0.1s;}
.scroll[data-type="text"].dur2  {transition-delay: 0.2s;}
.scroll[data-type="text"].dur3  {transition-delay: 0.3s;}
.scroll[data-type="text"].dur4  {transition-delay: 0.4s;}
.scroll[data-type="text"].dur5  {transition-delay: 0.5s;}
.scroll[data-type="text"].dur6  {transition-delay: 0.6s;}
.scroll[data-type="text"].dur7  {transition-delay: 0.7s;}
.scroll[data-type="text"].dur8  {transition-delay: 0.8s;}
.scroll[data-type="text"].dur9  {transition-delay: 0.9s;}
.scroll[data-type="text"].dur10 {transition-delay:   1s;}
.scroll[data-type="text"].dur11 {transition-delay: 1.1s;}
.scroll[data-type="text"].dur12 {transition-delay: 1.2s;}
.scroll[data-type="text"].dur13 {transition-delay: 1.3s;}
.scroll[data-type="text"].dur14 {transition-delay: 1.4s;}
.scroll[data-type="text"].dur15 {transition-delay: 1.5s;}
.scroll[data-type="text"].dur16 {transition-delay: 1.6s;}
.scroll[data-type="text"].dur17 {transition-delay: 1.7s;}
.scroll[data-type="text"].dur18 {transition-delay: 1.8s;}
.scroll[data-type="text"].dur19 {transition-delay: 1.9s;}
.scroll[data-type="text"].dur20 {transition-delay:   2s;}
.scroll[data-type="text"].dur25 {transition-delay: 2.5s;}
.scroll[data-type="text"].dur30 {transition-delay:   3s;}
.scroll[data-type="text"].dur35 {transition-delay: 3.5s;}



#shopinfo .intro li:nth-child(1) p:first-child {transition-delay: 0.1s;}
#shopinfo .intro li:nth-child(1) p:last-child  {transition-delay: 0.2s;}
#shopinfo .intro li:nth-child(2) p:first-child {transition-delay: 0.3s;}
#shopinfo .intro li:nth-child(2) p:last-child  {transition-delay: 0.4s;}
#shopinfo .intro li:nth-child(3) p:first-child {transition-delay: 0.5s;}
#shopinfo .intro li:nth-child(3) p:last-child  {transition-delay: 0.6s;}
#shopinfo .intro li:nth-child(4) p:first-child {transition-delay: 0.7s;}
#shopinfo .intro li:nth-child(4) p:last-child  {transition-delay: 0.8s;}
#shopinfo .intro li:nth-child(5) p:first-child {transition-delay: 0.9s;}
#shopinfo .intro li:nth-child(5) p:last-child  {transition-delay: 1.0s;}
#shopinfo .intro li:nth-child(6) p:first-child {transition-delay: 1.1s;}
#shopinfo .intro li:nth-child(6) p:last-child  {transition-delay: 1.2s;}
#shopinfo .intro li:nth-child(7) p:first-child {transition-delay: 1.3s;}
#shopinfo .intro li:nth-child(7) p:last-child  {transition-delay: 1.4s;}
#shopinfo .intro li:nth-child(8) p:first-child {transition-delay: 1.5s;}
#shopinfo .intro li:nth-child(8) p:last-child  {transition-delay: 1.6s;}
#shopinfo .intro li:nth-child(9) p:first-child {transition-delay: 1.7s;}
#shopinfo .intro li:nth-child(9) p:last-child  {transition-delay: 1.8s;}
#shopinfo .intro li:nth-child(10) p:first-child {transition-delay: 1.9s;}
#shopinfo .intro li:nth-child(10) p:last-child  {transition-delay: 2.0s;}
#shopinfo .intro li:nth-child(11) p:first-child {transition-delay: 2.1s;}
#shopinfo .intro li:nth-child(11) p:last-child  {transition-delay: 2.2s;}
#shopinfo .intro li:nth-child(12) p:first-child {transition-delay: 2.3s;}
#shopinfo .intro li:nth-child(12) p:last-child  {transition-delay: 2.4s;}
#shopinfo .intro li:nth-child(13) p:first-child {transition-delay: 2.5s;}
#shopinfo .intro li:nth-child(13) p:last-child  {transition-delay: 2.6s;}
#shopinfo .intro li:nth-child(14) p:first-child {transition-delay: 2.7s;}
#shopinfo .intro li:nth-child(14) p:last-child  {transition-delay: 2.8s;}
#shopinfo .intro li:nth-child(15) p:first-child {transition-delay: 2.9s;}
#shopinfo .intro li:nth-child(15) p:last-child  {transition-delay: 3.0s;}
#shopinfo .intro li:nth-child(16) p:first-child {transition-delay: 3.1s;}
#shopinfo .intro li:nth-child(16) p:last-child  {transition-delay: 3.2s;}
#shopinfo .intro li:nth-child(17) p:first-child {transition-delay: 3.3s;}
#shopinfo .intro li:nth-child(17) p:last-child  {transition-delay: 3.4s;}
#shopinfo .intro li:nth-child(18) p:first-child {transition-delay: 3.5s;}
#shopinfo .intro li:nth-child(18) p:last-child  {transition-delay: 3.6s;}
#shopinfo .intro li:nth-child(19) p:first-child {transition-delay: 3.7s;}
#shopinfo .intro li:nth-child(19) p:last-child  {transition-delay: 3.8s;}
#shopinfo .intro li:nth-child(20) p:first-child {transition-delay: 3.9s;}
#shopinfo .intro li:nth-child(20) p:last-child  {transition-delay: 4.0s;}

.scroll .img_box:after,
.scroll figure:after{
	-webkit-transition:	all 1.0s ease 0s;
	-moz-transition:		all 1.0s ease 0s;
	-ms-transition:			all 1.0s ease 0s;
			transition:			all 1.0s ease 0s;
	opacity: 0.01;
}
.scroll.active .img_box:after,
.scroll.active figure:after{
	-webkit-transition:	all 1.0s ease;
	-moz-transition:		all 1.0s ease;
	-ms-transition:			all 1.0s ease;
			transition:			all 1.0s ease;
	opacity: 1;
}
.f_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.f_h_sb {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@media screen and (max-width: 900px) {
section.ba {
    width: 100%;
    margin: 20px auto;
    position: relative;
}
.f_box.f_h_sb.deg {
    flex-flow: column nowrap;
}
.ba .img_box:first-child, .ba figure:first-child {
    margin-bottom: 0px;
    padding-bottom: 0;
    width: 100%;
    padding-left: 1.2em;
    padding-right: 1.2em;
}
.ba .img_box:last-child, .ba figure:last-child {
    width: 100%;
    position: relative;
    margin: 0;
    padding-top: 60px;
    padding-left: 1.2em;
    padding-right: 1.2em;
}
section .inner, section .article {
    width: 100% !important;
    padding-left: 1.2em;
    padding-right: 1.2em;
    position: relative;
    padding: 0 20px;
}
}