@charset "UTF-8";


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


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

.adon-koukoku {
    margin-bottom: 16rem;
	position: relative;
}

.adon-koukoku__wrap{
	width: 94%;
	margin: 0 auto 0 0;
}

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

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

.koukoku-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%;
  	}
}

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


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


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

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

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

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

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

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

.koukoku-item02 img{
	display: block;
	margin: 1rem auto;
	/*max-width: 34rem;*/
	pointer-events: none;
}

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

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


/*------　広告（図）　------*/

.adon-koukoku02 {
	margin: -18rem auto 16rem;
	position: relative;
}

.koukoku02-container{
	width: 90%;
	max-width: 50rem;
	margin: 0 auto;
	text-align: center;
	opacity: 0;
}

.koukoku02-container h3{
	font-size: 1rem;
	line-height: 1.6rem;
	margin-bottom: 3rem;
}

.koukoku02-container img{
	pointer-events: none;
}

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



/*------　ホームページ　------*/

.adon-hp {
    margin-bottom: 16rem;
	position: relative;
}

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

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

.hp-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;
}

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

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

.hp-image{
	width: 60%;
	opacity: 0;
}

.hp-image img{
	pointer-events: none;
}

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

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

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

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

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

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

.hp-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){
	
	.adon-main {
    	margin-top: 9rem;
	}

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

	
}

/*1024px 以下-----------------------------------------------------------------------------*/
@media(max-width:1024px){
	
	/*------　オンライン広告　------*/
	
	.adon-koukoku__wrap {
		width: 100%;
	}
	
	.koukoku-item01{
		width: 50%;
	}
	
	.koukoku-item01 h1 {
    	width: calc(100% + 50%);
	}
	
		
	.koukoku-item02 {
        align-self: center;
		width: 50%;
	}
	
	.koukoku-item02__block01{
		margin: 0 5% 0 auto;
	}
	
	/*------　ホームページ　------*/
	
	.hp-image{
	width: 50%;
		align-self: center;
	}
	
	.hp-info{
	width: 50%;
	}

	
}

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

	
	
}	

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

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

	.koukoku-item01 {
		width: 100%;
		padding-left: 0;
		margin-bottom: 4rem;
	}
	
	.koukoku-item01__wrap {
    	margin: 0 auto;
	}
	
	.koukoku-item01 h1 {
        text-align: left;
        font-size: 1.6rem;
        line-height: 2rem;
        width: fit-content;
        margin: 0 auto 2rem 0;
	}
	
	.koukoku-item01 img{
		width: 80%;	
		max-width: 9rem;
		margin: 0 auto 4rem;
	}
	
	.koukoku-item01 p {
		width: 100%;
	}
	
	.koukoku-item02 {
		width: 100%;
		padding: 0;
	}
	
	.koukoku-item02__block01{
		width: 100%;
		margin: 0 auto;
	}
	
	
	
	/*------　広告（図）　------*/
	
	.adon-koukoku02 {
		margin: -9rem auto 10rem;
	}
	
	.koukoku02-container h3{
	margin-bottom: 2rem;
}
	
	
	/*------　ホームページ　------*/
	
	.adon-hp {
		margin-bottom: 10rem;
	}
	
	.hp-sptitle{
		width: 80%;
		text-align: center;
		margin: 0 auto 2rem;
	}
	
	.hp-container {
		width: 80%;
        margin: 0 auto;
	}
	
	.hp-image {
		width: 100%;
		/*width: 100vw;*/
		/*margin: 0 calc(50% - 50vw);*/
		background-color: #fff;
		
	}
	
	.hp-image img {
		width: 100%;
	}
	
	
	.hp-info {
    	width: 100%;
	}
	
	.hp-info__wrap {
		width: 100%;
	}
	
	
	.hp-line {
		width: 3%;
		padding: 0;
        /*height: 50%;*/
        top: auto;
        bottom: 0;
	}
	
	.hp-line__wrap {
		max-height: none;
	}
	
	.hp-block03 p{
	width: 100%;
}
	
}

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

}

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