@charset "UTF-8";


.design-main{
	margin-top: 15rem;
}


/*------　オフライン広告　------*/

.design-offline {
    margin-bottom: 16rem;
	position: relative;
}

.design-offline__wrap{
	width: 94%;
	margin: 0 auto 0 0;
}

.offline-line{
	width: 8%;
	padding: 3% 0;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.offline-line__wrap{
	max-width: 100px;
	height: 100%;
	display: block;
	background: linear-gradient(180deg, #036eb8, #036eb8, #00a29a, #00a29a, #036eb8, #036eb8) 0 / 100% 200%;
}

.offline-line__wrap.scroll-anime.scroll-show{
	animation: bg-gradient .3s linear forwards alternate 0.5s;
}

@keyframes bg-gradient {
	0% {
		background-position: 0 0%;
	}
	50% {
    	background-position: 0 50%;
  	}
  	100% {
    	background-position: 0 100%;
  	}
}

.offline-container{
    width: 100%;
	margin: 0 auto;
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}


.offline-item01{
	width: 45%;
	text-align: left;
	opacity: 0;
}


.offline-item01__wrap{
    width: fit-content;
	margin: 0 0 0 auto;
}

.offline-item01 img{
    display: block;
	max-width: 11rem;
    margin-bottom: 4rem;
	pointer-events: none;
}

.offline-item01 h1{
	font-size: 1.6rem;
	line-height: 2rem;
	text-align: left;
	margin-bottom: 2rem;
}

.offline-item01 p{
	width: 19rem;
	line-height: 1.6rem;
	text-indent: 1rem;
    margin: 0 auto;
}

.offline-item01.scroll-anime.scroll-show{
  animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.offline-item02{
	width: 55%;
	padding: 3% 0;
	opacity: 0;
}

.offline-item02 img{
	display: block;
	margin: 1rem auto;
	max-width: 42rem;
	pointer-events: none;
}

.offline-item02__block01{
	width: 90%;
	display: block;
	margin: 0 auto 2rem;
}

.offline-item02.scroll-anime.scroll-show{
  animation: fadeup 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}



/*------　印刷物全般　------*/

.design-printed {
    margin-bottom: 16rem;
	position: relative;
}

.design-printed-image{
	width: 90%;
	max-width: 50rem;
	margin: 0 auto 3rem;
	opacity: 0;
}

.design-printed-image img{
	pointer-events: none;
}

.design-printed-image.scroll-anime.scroll-show{
  animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.design-printed__wrap{
	/*max-width: 90%;
	margin: 0 auto;*/
	position: relative;
}

.printed-line{
	width: 8%;
	padding: 3% 0;
	position: absolute;
	top: 3%;
	right: 0;
	height: 100%;
}

.printed-line__wrap{
	max-width: 100px;
	height: 100%;
	max-height: 500px;
	display: block;
	background: linear-gradient(180deg, #036eb8, #036eb8, #00a29a, #00a29a, #036eb8, #036eb8) 0 / 100% 200%;
	margin: 0 0 0 auto;
}

.printed-line__wrap.scroll-anime.scroll-show{
	animation: bg-gradient .3s linear forwards alternate 0.5s;
}

.printed-container {
    width: 92%;
    margin: 0 auto 0 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.printed-image{
	width: 60%;
	opacity: 0;
	padding-left: 100px;
}

.printed-image__wrap{
	width: fit-content;
	margin: 0 0 0 auto;
}

.printed-image img{
	width: 43rem;
	pointer-events: none;
}

.printed-image.scroll-anime.scroll-show{
  animation: fadeup 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}

.printed-info{
	width: 40%;
	opacity: 0;
}

.printed-info.scroll-anime.scroll-show{
  animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

.printed-info__wrap{
	width: fit-content;
	max-width: 40rem;
	margin: 0 auto;
}

.printed-block03{
	margin-top: 2rem;
}

.printed-block03 h3{
	font-size: 1.6rem;
	line-height: 2rem;
	margin-bottom: 1rem;
}

.printed-block03 p{
	width: 19rem;
	line-height: 1.6rem;
	text-indent: 1em;
}



@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeup{
  0% {
    /*background-position: 100% 0;*/
    transform: translateY(30px);
    opacity: 0;
  }
	80% {
    opacity: 1;
  }
  100% {
	opacity: 1;
    transform: translateY(0);
    /*background-position: 0 0;*/
  }
}

/*1280px 以下-----------------------------------------------------------------------------*/
@media(max-width:1280px){
	
	.design-main {
    	margin-top: 9rem;
	}

	 
    .offline-item01{
        box-sizing: border-box;
        padding-left: 100px;
    }

	
}

/*1024px 以下-----------------------------------------------------------------------------*/
@media(max-width:1024px){
	
	/*------　オフライン広告　------*/
	
	.design-offline__wrap {
		width: 100%;
	}
	
	.offline-item01{
		width: 50%;
	}
	
	.offline-item01 h1 {
    	width: calc(100% + 50%);
	}
	
		
	.offline-item02 {
		width: 50%;
        align-self: center;
	}
	
	.offline-item02__block01{
		margin: 0 5% 0 auto;
	}
	
	/*------　印刷物全般　------*/
	
	.printed-image{
		width: 55%;
		padding: 0 1rem 0 2rem;
		align-self: center;
	}
	
	.printed-info{
		width: 45%;
	}
	
	
}

/*769px 以上-----------------------------------------------------------------------------*/
@media (min-width: 769px) {

	.offline-item01 img.sp-on {
    	display: none;
	}
	
}	

/*768px 以下-----------------------------------------------------------------------------*/
@media(max-width:768px){

	.design-main {
    	margin-top: 7rem;
	}
	
	/*------　オフライン広告　------*/
		
	.design-offline {
		margin-bottom: 8rem;
	}
	
	.offline-line{
		width: 3%;
	}
	
	.design-offline__wrap{
		margin: 0 auto;
		max-width: 90%;
	}
	
	.offline-container {
		width: 90%;
	}

	.offline-item01 {
		width: 100%;
		padding-left: 0;
		margin-bottom: 4rem;
	}
	
	.offline-item01__wrap {
    	margin: 0 auto;
	}
	
	.offline-item01 h1 {
        text-align: left;
        font-size: 1.6rem;
        line-height: 2rem;
        width: fit-content;
        margin: 0 auto 2rem 0;
	}
	
	.offline-item01 img {
		width: 80%;	
		max-width: 11rem;
		margin: 0 auto 4rem;
	}
	
	.offline-item01 p {
		width: 100%;
	}
	
	.offline-item02 {
		width: 100%;
		padding: 0;
	}
	
	.offline-item02__block01{
		width: 100%;
		margin: 0 auto;
	}
	
	
	
	
	/*------　印刷物全般　------*/
	
	.design-printed {
		margin-bottom: 10rem;
	}
	
	.printed-container {
		width: 80%;
        margin: 0 auto;
		flex-direction: column-reverse;
	}
	
	.printed-image {
		width: 100%;
		padding: 0;
		
	}
	
	/*.printed-image img {
		width: 100%;
	}*/
	
	
	.printed-info {
    	width: 100%;
		margin-bottom: 4rem;
	}
	
	.printed-info__wrap {
		width: 100%;
	}
	
	
	.printed-line {
		width: 3%;
		padding: 0;
        /*height: 50%;*/
        top: auto;
        bottom: 0;
	}
	
	.printed-line__wrap {
		max-height: none;
	}
	
	.printed-block03 p{
	width: 100%;
}
	
}

/*602px 以上-----------------------------------------------------------------------------*/
@media (min-width: 602px) {

}

/*601px 以下-----------------------------------------------------------------------------*/
@media (max-width: 601px) {
	
}