/* CSS Document */


@media screen and (max-width:767px){
	
}
@media screen and (min-width:768px) and (max-width:1099px){
  /*TB*/
  section.beginners{
    padding: 80px 0;
  }
  section.beginners::before, section.business > div.inner::before, section.example div.decorationtitle > div::before, section.news > div.inner::before {
    font-size: 50px;
    line-height: 80px;
  }
  section.beginners h2.titlelogo {
    height: 40px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    opacity: 1;
  }
  section.beginners dl{
    padding: 60px 0 0 0;
  }
  section.beginners dl dt,
	section.beginners dl dt p,
	section.business > div.inner > h2.title{
		font-size:18px;
	}
	section.beginners dl dd p{
		font-size:16px;
		line-height:2.5em;
		padding:10px 0 0 0;
	}
  section.beginners div.btnarea{
		margin:30px 0 0 0;
	}
	section.beginners div.btnarea a{
		font-size:18px;
		line-height:50px;
		height:50px;
		padding:0 40px 0 20px;
		border-radius:5px;
		transition:all 0.3s ease;
	}
	section.beginners div.btnarea a:hover{
		background-color:#0bf;
	}
	/*事業内容*/
	section.business{
		padding:120px 0 0 0;
	}
	section.business > div.inner{
		padding:70px 0 0 0;
	}
	section.business > div.inner::before{
		top:80px;
	}
	section.business > div.inner > p.explanation{
		padding:20px 5vw 0 5vw;
		line-height:2.5em;
		font-size:16px;
	}
	section.business div.inner div.businesslist{
		display: flex;
		flex-wrap: wrap;
		padding:0 50px;
		gap:1.5rem;
	}
	section.business div.inner div.businesslist .listitem{
		width:calc(50% - 0.75rem);
		height:240px;
	}
	section.business div.inner div.businesslist .listitem a{
		padding:80px 0 120px 0;
	}
	section.business div.inner div.businesslist .listitem img{
		width:calc( 100vw - 30px );
		height:calc( 100vw - 30px );
	}
	section.business div.inner div.businesslist .listitem div.textwrap p.subtitle{
		font-size: 30px;
		line-height: 40px;
		height: 40px;
	}
	section.business div.inner div.businesslist .listitem p.text{
		line-height:1.8em;
		padding:0 7vw;
	}
	section.business div.inner div.businesslist .listitem.visible::before{
		animation:businessItemLine 300ms ease-out 300ms forwards;
		opacity:0.3;
	}
	section.business div.inner div.businesslist .listitem::after{
		position:absolute;
		z-index:1;
		content:'';
		display:block;
		top:50%;
		left:50%;
		background-color:rgba(68,68,85,0.75);
		transform:translate(-50%,-50%);
		width:calc( 100% - 20px );
		height:calc( 100% - 20px );
		transition:all 1.2s ease;
		opacity:0;
	}
	section.business div.inner div.businesslist .listitem.visible::after{
		opacity:1;
	}
	section.business div.inner div.businesslist .listitem figure{
		filter:grayscale(100%);
		transition:all 0.6s ease;
	}
	section.business div.inner div.businesslist .listitem.visible figure{
		filter:grayscale(0);
	}
	section.business div.inner div.businesslist .listitem.visible div.textwrap{
		border-color:rgba(255,255,255,0.5);
	}
	section.business div.inner div.businesslist .listitem.visible div.textwrap p.subtitle{
		transform:translate3d(-50%,-190%,0);
	}
	section.business div.inner div.businesslist .listitem.visible p.text{
		transform:translate3d(-50%,0,0);
		opacity:1;
	}
	section.business div.inner div.businesslist .listitem.visible a h2{
		animation:businessItemTitle 300ms ease-out 600ms forwards;
	}
	/*事業内容下お問い合わせ*/
	section.business div.inner div.contactbtnarea {
    padding: 30px 0 150px 0;
	}
	section.business div.inner div.contactbtnarea div.btnwrap{
		display:flex;
		justify-content:center;
	}
	section.business div.inner div.contactbtnarea div.btnwrap > *{
		padding:0 30px 0 60px;
		line-height:80px;
		margin:20px 20px 0 20px;
		font-size:21px;
	}
	section.business div.inner div.contactbtnarea div.btnwrap > * span{
		left:20px;
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.dark > div span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.dark > div span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.dark > div span{
		background-image:url(../img/bg/contact_btn_dark.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.light > div span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.light > div span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.light > div span{
		background-image:url(../img/bg/contact_btn_light.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.dark > a span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.dark > a span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.dark > a span{
		background-image:url(../img/bg/flow_btn_dark.webp);
	}
	section.business div.inner div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.png);
	}
	body.edge section.business div.inner div.contactbtnarea div.btnwrap.light > a span,
	body.chrome section.business div.inner div.contactbtnarea div.btnwrap.light > a span,
	body.firefox section.business div.inner div.contactbtnarea div.btnwrap.light > a span{
		background-image:url(../img/bg/flow_btn_light.webp);
	}
	section.business div.inner div.contactbtnarea > picture{
	  position:absolute;
	  bottom:0;
	  transform:translateY(100%);
	  transition:all 0.9s ease;
	  width: 100%;
  }
  section.business div.inner div.contactbtnarea.visible > picture{
	  transform:translateY(0);
  }
  section.business div.inner div.contactbtnarea img{
	  width: 100%;
  }
	/*制作事例*/
	section.example{
		padding: 80px 0
	}
	section.beginners::before, section.business > div.inner::before, section.example div.decorationtitle > div::before, section.news > div.inner::before{
		font-size: 50px;
	}
	section.example > div.inner > h2.title, section.news > h2.title {
    margin: 20px 0 0 0;
    font-size: 18px;
  }
	section.example > div.inner > p.explanation {
    padding: 30px 0 20px 0;
    line-height: 20px;
  }
	.examplewrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.examplewrap article{
		margin: 0 10px 20px 10px !important;
	}
	 section.example span.supplement {
    font-size: 12px;
    opacity: 0.7;
    width: 660px;
    margin: 0 auto;
    padding: 20px 0 0 0;
    text-align: right;
    display: block;
  }
  section.example div.btnarea{
		margin:20px 0 0 0;
		height:50px;
	}
	section.example div.btnarea a{
		font-size:18px;
		line-height:50px;
		height:50px;
		padding:0 40px 0 20px;
		border-radius:5px;
		transition:all 0.3s ease;
	}
  /*お知らせ*/
	section.news {
    background-image: url(../img/pattern_04.png);
    padding: 0 0 100px 0;
  }
	section.news::before {
    content: '';
    display: block;
    width: 100%;
    height: 120px;
    background: -webkit-linear-gradient(top, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 30%,rgba(242,242,246,0) 100%);
    background: linear-gradient(to bottom, rgba(242,242,246,1) 0%,rgba(242,242,246,1) 30%,rgba(242,242,246,0) 100%);
	}
  section.news > h2.title{
	  position:relative;
	  z-index:1;
	  height:2em;
	  line-height:2em;
	  display:inline-block;
	  padding:0 1.5em;
	  background-color:rgba(255,255,255,0);
	  color:rgba(68,68,85,0);
    margin: 60px 0 0 0;
    font-size: 18px;  
  }
  section.news > h2.title::before,
  section.news > h2.title::after{
	  content:'';
	  position:absolute;
	  width:0;
	  height:0;
	  left:50%;
	  top:50%;
	  transform:translate(-50%,-50%);
	  display:block;
  }
  section.news > h2.title::before{
	  box-sizing:border-box;
	  border:solid 1px #f90;
	  border-radius:1em;
	  z-index:-1;
	  background-color:#FFF;
	  opacity:0;
  }
  section.news > h2.title::after{
	  border-top:solid 1px #f90;
	  z-index:-2;
	  opacity:0;
  }
  section.news > h2.title.visible::before{
	  animation:titlewrap 300ms linear 200ms forwards;
  }
  section.news > h2.title.visible::after{
	  animation:titleline 300ms ease-in forwards;
  }
  section.news > h2.title.visible{
	  animation:titletext-dark 600ms ease-out 500ms forwards;
  }
  section.news > div.inner::before {
    top: 80px;
  }
  section.news div.newswrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 20px;
	}
	section.news div.newswrap article{
		width:300px;
		box-sizing:border-box;
		padding:15px;
		margin:0 10px 20px 10px !important;
		background-color:#FFF;
		box-shadow:0px 0px 5px rgba(68,68,85,0.2);
	}
	section.news div.newswrap article picture{
		width:270px;
		position:relative;
		z-index:2;
	}
	section.news div.newswrap article::before{
		position:absolute;
		z-index:1;
		top:15px;
		left:15px;
		content:'NO IMAGE';
		color:#BBB;
		width:270px;
		height:180px;
		background-color:#f2f2f6;
		display:flex;
		align-items:center;
		justify-content:center;
	}
	section.news div.newswrap article picture img{
		position:relative;
		z-index:2;
		width:270px;
		height:180px;
	}
	section.news div.newswrap article a{
		padding:205px 15px 35px 15px;
	}
	section.news div.newswrap article a h2{
		line-height:20px;
	}
	section.news div.newswrap article div.newsinner{
		padding:255px 0 0 0;
	}
	section.news div.newswrap article picture + div.newsinner{
		padding:75px 0 0 0;
	}
	section.news div.newswrap article div.newsinner > div{
		width:100%;
		opacity:0.7;
		display:flex;
		justify-content:space-between;
		height:20px;
	}
	section.news div.newswrap article div.newsinner > div > *{
		font-size:12px;
		line-height:20px;
	}
	section.news div.btnarea{
		margin:20px 0 0 0;
		height:50px;
	}
	section.news div.btnarea a{
		font-size:18px;
		line-height:50px;
		height:50px;
		padding:0 40px 0 20px;
		border-radius:5px;
		transition:all 0.3s ease;
	}
  	
}
@media (orientation: landscape) and (max-width:568px){
}
@media (orientation: landscape) and (min-width:569px) and (max-width:724px){
}
@media (orientation: landscape) and (min-width:725px) and (max-width:1099px){
}
@media screen and (min-width:1100px){
  /*共通*/
}