@charset "UTF-8";
/* CSS Document */



@media screen and (max-width:1280px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 1.2rem;
	letter-spacing: 2px;
bottom:0%;
right:3%;
top: 2%;
}


	
	.hednavi{
		display: none;
	}

.sp_navi{
	display: block;
	text-align: center;
}


.hednavi_sp{
 opacity: 0;
  transition: opacity .3s linear;
	background-color:hsla(0,0%,17%,0.95);
	padding:70px 60px 30px 60px;
	margin: 20px 0px 10px 20px;
	width:auto;
	border-radius: 10px;
	position: absolute;
	top:30px;
	right: 0;
	
}
	
	.hednavi_sp h1{
width:70%;
position: absolute;
	top: 12%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	
}
	.hednavi_sp h1 img{
width:100%;
	
}


.hednavi_sp li{
margin-bottom:40px!important;
opacity: 0;
transform: translateY(30%);
font-size: 1.2rem;
	
}

#menu-btn-check:checked ~ .hednavi_sp li {
animation: navi_sp 1.0s ease forwards;
animation-delay:0.4s;
}


#menu-btn-check:checked ~ .hednavi_sp li:nth-of-type(2){
animation-delay:0.6s;
}

#menu-btn-check:checked ~ .hednavi_sp li:nth-of-type(3){
animation-delay:0.8s;
}

#menu-btn-check:checked ~ .hednavi_sp li:nth-of-type(4){
animation-delay:1.0s;
}

.hednavi_sp li:last-of-type{
margin-bottom: 0px;
}


.hednavi_sp li a{
color: #fff;
}

#menu-btn-check {
    display: none;
}



#menu-btn-check:checked ~ .hednavi_sp {
  pointer-events: auto;
  opacity: 1;
}


/* オープニング*/

.company-info{
display: none;

}





.animation01{
	letter-spacing: 2px;
	font-size: 1.2rem;
	
    top: 50%;
    left: 50%;
   
	
}
.animation02{
	width: 40%;
	
    top: 50%;
    left: 50%;


}


.video_wrapper {
   width:100%;height:100vh;
 
}




.video_wrapper::after {
 
 padding-top:80%; /* ココを指定 */
}

	.sp_movie{display:block!important;}
	.pc_movie{display:none!important;}


.container{
	width:85%;
	
}



/*common*/
.about,.works,.works_detail{
width:100%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 1.5rem;

font-weight: 300;

	letter-spacing: 2px;
margin:  50px 0px 0px 50px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.5rem;
letter-spacing: 2px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 1.2rem;

	letter-spacing:2px;
	line-height: 230%;
	width: 90%;


}

.pearsonal, .company{
	width: 90%;
	margin:100px auto 0px auto; 
	
	padding: 100px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:110%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 100px 0px;
}

.pearsonal span{
	width: 50%;

}

.pearsonal span img{
	width: 90%;
margin: 30px 0 0 0;
}

.company span:first-of-type{
	width: 60%;

}

.company span{
	width: 50%;

}


.pearsonal span h2,.company span h2{
	letter-spacing: 2px;
	font-size: 1.2rem;
	font-weight: 500;
}

.pearsonal span ul{

	padding: 0;
	font-size: 	1.0rem;

}

.pearsonal span ul li{

margin-bottom: 40px;
letter-spacing: 1px;
}

.company-list{	
width: 100%;

margin: 50px 0 0 0;
font-size: 1.1rem;
}


table.company-list th{
font-weight:400;


}

table.company-list td{
letter-spacing: 1px;
padding: 0 0px 30px 30px;	
}

table.company-list td ol{
	width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	letter-spacing: 2px;
	font-size: 1.3rem;
	font-weight: 500;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}

.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 48%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
padding:5px 5px 0 0px;
font-size: 1.2rem;
letter-spacing:2px;
	line-height: 150%;
}

.creative_list h4{

top:10px;
	left:10px;
	letter-spacing:5px;
	
font-weight: 300;
}

.creative_list iframe{
width: 100%;
	height: 500px;
}


.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 1.5rem;

}


.website{
	width: 90%;
	
	
	height: 450px;
	;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 1.3rem;

}


table.website_detail th{
font-weight:400;

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}



/*========= ナビゲーションのためのCSS ===============*/


.close_inner{

	width:0%;
   

}
.sub_inner{
	
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);
position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}


.works_all{
	
	width: 100%;
	height: 100vh;
	
	
}


/*price*/


.price-list{	
margin: 50px 0 0 0;
font-size: 1.2rem;
}


.price-list h2{
	
	font-size: 1.3rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	margin-bottom: 50px;

	line-height: 150%;
	border-bottom: 1px solid hsla(0,0%,73%,1.00);
}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:5px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 90%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 1.2rem;
margin-bottom: 50px;

	
}

.example-list table th,.example table td {
  padding: 5px 10px;


}

.example-list table th{

	width:35%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 1.0rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
display: flex;
	position: absolute;
align-items: flex-end;
	margin: 50px auto 0px auto;
border-top: 1px solid #6E6E6E;
	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 48%;
}

footer div:last-of-type{
text-align: right;
}
	
footer h1{

font-size: 1.4rem;
	letter-spacing: 2px;
font-weight: 400!important;
font-style: normal;

}

footer h2{

font-weight: 400;
font-size: 0.9rem;
letter-spacing: 1px;
line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 1.1rem;
	padding: 0px 8px;
	 transition: all .5s;
}

footer span a:hover{
	opacity: 0.5;
}
footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}

.copy_footer{
width: 100%;
display: block;


}
	
}




@media screen and (max-width:768px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 1.1rem;
	letter-spacing: 2px;
bottom:0%;
right:3%;
top: 2%;
}





.hednavi_sp{
 opacity: 0;



	top:30px;
	right: 0;
	
}


		.hednavi_sp h1{
width:70%;
	top: 12%;
    left: 50%;
   
}

.hednavi_sp li{
margin-bottom:40px;
opacity: 0;

}




/* オープニング*/


.animation01{

	font-size: 1.2rem;
	width: 100%;
 
   
	
}
.animation02{
	
width: 45%;

}


.container{
	width:85%;
}



/*common*/
.about,.works,.works_detail{
width:100%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 1.5rem;

font-weight: 300;

	letter-spacing: 2px;
margin:  50px 0px 0px 50px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.5rem;
letter-spacing: 2px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 1.1rem;

	letter-spacing:1px;
	line-height: 200%;
	


}

.pearsonal, .company{
	width: 90%;
	margin:100px auto 0px auto; 
	
	padding: 100px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:120%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 100px 0px;
}

.pearsonal span{
width: 100%!important;

}

.pearsonal span img{
	display: block;
	width: 70%;
margin: 30px auto 0 auto;
}



.company span{
	width: 100%!important;

}
	
	.company span:last-of-type {
display: none;
}


.pearsonal span h2,.company span h2{
	letter-spacing: 2px;
	font-size: 1.2rem;
	font-weight: 500;
}

.pearsonal span ul{
margin-top:50px;
	padding: 0;
	font-size: 	1.2rem;

}

.pearsonal span ul li{

margin-bottom: 20px;
letter-spacing: 0px;
}

.company-list{	
width: 100%;

margin: 50px 0 0 0;
font-size: 1.3rem;
}


table.company-list th{
font-weight:400;


}

table.company-list td{
letter-spacing: 1px;
padding: 0 0px 30px 30px;	
}

table.company-list td ol{
	width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	
	font-size: 1.3rem;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}

.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 48%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
font-size: 1.0rem;
letter-spacing:1px;
	line-height: 150%;
}

.creative_list h4{

top:10px;
	left:10px;
font-weight: 300;
}

.creative_list iframe{

	height: 500px;
}


.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 1.2rem;
line-height: 150%;
}


.website{
	width: 90%;
	height: 350px;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 1.3rem;

}


table.website_detail th{
font-weight:400;

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}



/*========= ナビゲーションのためのCSS ===============*/


.close_inner{

	width:0%;
   

}
.sub_inner{
	
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);

    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}


.works_all{
	
	width: 100%;
	height: 100vh;
	
	
}

 .modal-video {
        max-width: 550px;
        width: 550px !important;

  top: 53%!important;
    left: 50%!important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
   
    }

/*price*/


.price-list{	
margin: 50px 0 0 0;
font-size: 1.1rem;
}


.price-list h2{
	
	font-size: 1.1rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	margin-bottom: 50px;

}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:5px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 90%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 1.2rem;
margin-bottom: 50px;

	
}

.example-list table th,.example table td {
  padding: 5px 10px;


}

.example-list table th{

	width:35%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 1.0rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
	margin: 50px auto 0px auto;

	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 48%;
}


	
footer h1{

font-size: 1.4rem;
	letter-spacing: 2px;

}

footer h2{

font-weight: 400;
font-size: 0.8rem;
letter-spacing: 1px;
line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 1.1rem;
	padding: 0px 8px;

}

footer span a:hover{
	opacity: 0.5;
}
footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}

	
}


@media screen and (max-width:479px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 1.0rem;
	letter-spacing: 1px;
bottom:0%;
right:2%;
top: 2%;
}





.hednavi_sp{
 opacity: 0;

	padding:50px 60px 30px 60px!important;
	margin: 20px 0px 10px 20px;
	border-radius: 10px;

	top:30px;
	right: 0;
	
}
	
		.hednavi_sp h1{
width:60%;
	top: 12%;
    left: 50%;
   
}

.hednavi_sp li{
margin-bottom:10px!important;
opacity: 0;
font-size: 1.0rem!important;

}




/* オープニング*/


.animation01{

	font-size: 1.2rem;
	
 
   
	
}
.animation02{
	
width: 45%;

}

.container{
	width:85%;
}



/*common*/
.about,.works,.works_detail{
width:100%;


}
	
.works{
width:90%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 1.1rem;

font-weight: 300;

	letter-spacing: 2px;
margin:  50px 0px 0px 50px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.1rem;
letter-spacing: 1px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 0.9rem;

	letter-spacing:1px;
	line-height: 200%;
	


}

.pearsonal, .company{
	width: 90%;
	margin:50px auto 0px auto; 
	
	padding: 50px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:120%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 50px 0px 0px 0px;
	
}

.pearsonal span{
width: 100%!important;

}

.pearsonal span img{
	display: block;
	width: 80%;
margin: 30px auto 0 auto;
}



.company span{
	width: 100%!important;

}
	
	.company span:last-of-type {
display: none;
}


.pearsonal span h2,.company span h2{
	letter-spacing: 2px;
	font-size: 1.0rem;
	font-weight: 500;
}

.pearsonal span ul{
margin-top:50px;
	padding: 0;
	font-size:0.9rem;

}

.pearsonal span ul li{

margin-bottom: 20px;
letter-spacing: 0px;
}

.company-list{	
width: 100%;

margin: 50px 0 0 0;
font-size: 0.9rem;
}


table.company-list th{
font-weight:400;


}

table.company-list td{
letter-spacing: 1px;
padding: 0 0px 30px 30px;	
}

table.company-list td ol{
	width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	
	font-size: 1.0rem;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}
	
	

.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 100%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
font-size: 0.9rem;
letter-spacing:1px;
	line-height: 150%;
}

.creative_list h4{

top:10px;
	left:10px;
font-weight: 300;
}

.creative_list iframe{

	height: 500px;
}


.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 0.8rem;
line-height: 150%;
}


.website{
	width: 90%;
	height: 350px;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 0.8rem;

}


table.website_detail th{

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}



/*========= ナビゲーションのためのCSS ===============*/



.sub_inner{
	

    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);

    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}


.works_all{
	
	width: 100%;
	height: 100vh;
	
	
}

 .modal-video {
        max-width: 350px;
        width: 350px !important;

  top: 52%!important;
    left: 50%!important;

    }
	
	
	.website_page{
	width:90%;
font-size: 0.8rem;
	}

    

/*price*/
	.price{
		width: 90%;
		margin: auto;
	}

.price-list{	
margin: 50px 0 0 0;
font-size: 0.9rem;
}


.price-list h2{
	
	font-size: 0.9rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	padding-bottom: 30px;
	margin-bottom: 50px;

}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:0px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 85%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 0.9rem;
margin-bottom: 40px;

	
}

.example-list table th,.example table td {
  padding: 5px 10px;


}

.example-list table th{

	width:40%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 0.9rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
	margin: 30px auto 0px auto;
flex-wrap: wrap;
	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 90%!important;
	margin: auto;
}

footer div:last-of-type{
text-align: left;
	margin-top:20px;
}
	
	
footer h1{

font-size: 1.2rem;
	letter-spacing: 2px;

}

footer h2{
font-size: 0.7rem;

line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 0.9rem;
	padding: 0px 8px;

}

footer span a:hover{
	opacity: 0.5;
}
footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}
.copy_footer{
margin-top: 10px;
font-size: 0.7rem
}
	
}



@media screen and (max-width:479px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 1.0rem;
	letter-spacing: 1px;
bottom:0%;
right:2%;
top: 2%;
}





.hednavi_sp{
 opacity: 0;

	padding:30px 60px;
	margin: 20px 0px 10px 20px;
	border-radius: 10px;

	top:30px;
	right: 0;
	
}


.sp_navi span{

	
font-size: 0.8rem!important;
}

.hednavi_sp li{
margin-bottom:20px!important;
opacity: 0;
font-size: 1.2rem;
}




/* オープニング*/


.animation01{

	font-size: 0.9rem;
	
	
}
.animation02{
	width: 45%;
	

}


.container{
	width:85%;
}



/*common*/
.about,.works,.works_detail{
width:100%;


}
	
.works{
width:90%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 1.1rem;

font-weight: 300;

	letter-spacing: 2px;
margin:  50px 0px 0px 50px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.1rem;
letter-spacing: 1px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 0.9rem;

	letter-spacing:1px;
	line-height: 200%;
	


}

.pearsonal, .company{
	width: 90%;
	margin:50px auto 0px auto; 
	
	padding: 50px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:120%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 50px 0px 0px 0px;
	
}

.pearsonal span{
width: 100%!important;

}

.pearsonal span img{
	display: block;
	width: 80%;
margin: 30px auto 0 auto;
}



.company span{
	width: 100%!important;

}
	
	.company span:last-of-type {
display: none;
}


.pearsonal span h2,.company span h2{
	letter-spacing: 2px;
	font-size: 1.0rem;
	font-weight: 500;
}

.pearsonal span ul{
margin-top:50px;
	padding: 0;
	font-size:0.9rem;

}

.pearsonal span ul li{

margin-bottom: 20px;
letter-spacing: 0px;
}

.company-list{	
width: 100%;

margin: 50px 0 0 0;
font-size: 0.9rem;
}


table.company-list th{
font-weight:400;


}

table.company-list td{
letter-spacing: 1px;
padding: 0 0px 30px 30px;	
}

table.company-list td ol{
	width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	
	font-size: 1.0rem;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}

.works_detail div.creative_list{
		display: none;
	}
	
.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 100%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
font-size: 0.9rem;
letter-spacing:1px;
	line-height: 150%;
}

.creative_list h4{

top:10px;
	left:10px;
font-weight: 300;
}

.creative_list iframe{

	height: 500px;
}


.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 0.8rem;
line-height: 150%;
}


.website{
	width: 90%;
	height: 350px;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 0.7rem;

}


table.website_detail th{

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}



/*========= ナビゲーションのためのCSS ===============*/



.sub_inner{
	

    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);

    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}


.works_all{
	
	width: 100%;
	height: 100vh;
	
	
}

 .modal-video {
        max-width: 350px;
        width: 350px !important;

  top: 52%!important;
    left: 50%!important;

    }
    

/*price*/
	.price{
		width: 90%;
		margin: auto;
	}

.price-list{	
margin: 50px 0 0 0;
font-size: 0.9rem;
}


.price-list h2{
	
	font-size: 0.9rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	padding-bottom: 30px;
	margin-bottom: 50px;

}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:0px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 85%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 0.9rem;
margin-bottom: 40px;

	
}

.example-list table th,.example table td {
  padding: 5px 10px;


}

.example-list table th{

	width:40%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 0.9rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
	margin: 30px auto 0px auto;
flex-wrap: wrap;
	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 90%!important;
	margin: auto;
}

footer div:last-of-type{
text-align: left;
	margin-top:20px;
}
	
	
footer h1{

font-size: 1.2rem;
	letter-spacing: 2px;

}

footer h2{
font-size: 0.7rem;

line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 0.9rem;
	padding: 0px 8px;

}

footer span a:hover{
	opacity: 0.5;
}
footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}
.copy_footer{
margin-top: 10px;
font-size: 0.7rem
}
	
}


@media screen and (max-width:414px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 1.0rem;
	letter-spacing: 1px;
bottom:0%;
right:2%;
top: 2%;
}






.hednavi_sp{
 opacity: 0;

	padding:50px 60px 30px 60px!important;
	margin: 20px 0px 10px 20px;
	border-radius: 10px;

	top:30px;
	right: 0;
	
}
	
		.hednavi_sp h1{
width:60%;
	top: 12%;
    left: 50%;
   
}

.hednavi_sp li{
margin-bottom:10px!important;
opacity: 0;
font-size: 1.0rem!important;

}




/* オープニング*/

.company-info{
display: none;

}

.animation01{

	font-size: 0.7rem;
	
	
}
.animation02{
	width: 45%;
	

}


.container{
	width:85%;
}



/*common*/
.about,.works,.works_detail{
width:90%;


}
	
.works{
width:85%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 1.0rem;

	letter-spacing: 2px;
margin:  50px 0px 0px 10px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.0rem;
letter-spacing: 1px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 0.9rem;

	letter-spacing:1px;
	line-height: 170%;
	


}

.pearsonal, .company{
	width: 90%;
	margin:50px auto 0px auto; 
	
	padding: 50px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 1.1rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:120%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 50px 0px 0px 0px;
	
}

.pearsonal span{
width: 100%!important;

}

.pearsonal span img{
	display: block;
	width: 80%;
margin: 30px auto 0 auto;
}



.company span{
	width: 100%!important;

}
	
	.company span:last-of-type {
display: none;
}


.pearsonal span h2,.company span h2{
	
	font-size: 0.9rem;
	
}

.pearsonal span ul{
margin-top:50px;
	padding: 0;
	font-size:0.8rem;

}

.pearsonal span ul li{

margin-bottom: 10px;
letter-spacing: 0px;
}

.company-list{	
width: 100%;

margin: 30px 0 0 0;
font-size: 0.8rem;
}


table.company-list th{

display: block;
	text-align:left;
text-align-last:left;

}

table.company-list td{
display: block;
letter-spacing: 1px;
padding: 0 0px 20px 0px;	
}

table.company-list td ol{
width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	
	font-size: 0.9rem;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}

.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 100%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
font-size: 0.9rem;
letter-spacing:1px;
	line-height: 150%;
}

.creative_list h4{
font-size: 0.9rem;
top:10px;
	left:10px;

}




.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 0.8rem;
line-height: 150%;
}


.website{
	width: 90%;
	height: 350px;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 0.7rem;

}


table.website_detail th{

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}
	
.website_detail tr:last-of-type th{	

}

.website_detail tr:last-of-type td{	
font-size: 0.6rem;
}

/*========= ナビゲーションのためのCSS ===============*/



.sub_inner{
	

    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);

    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}



 .modal-video {
        max-width: 300px;
        width: 300px !important;

  top: 52%!important;
    left: 50%!important;

    }
    
	
		.website_page{

font-size: 0.7rem;
	}

/*price*/
	.price{
		width: 85%;

	}

.price-list{	
margin: 50px 0 0 0;
font-size: 0.8rem;
}


.price-list h2{
	
	font-size: 0.8rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	padding-bottom: 30px;
	margin-bottom: 50px;

}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:0px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 85%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 0.9rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 0.7rem;
margin-bottom: 30px;

	
}

.example-list table th,.example table td {
  padding: 5px 10px;
letter-spacing: -1px;
}

.example-list table th{

	width:40%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 0.9rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
	margin: 30px auto 0px auto;
flex-wrap: wrap;
	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 90%!important;
	margin: auto;
}

footer div:last-of-type{
text-align: left;
	margin-top:20px;
}
	
	
footer h1{

font-size: 1.0rem;
	letter-spacing: 2px;

}

footer h2{
font-size: 0.7rem;

line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 0.7rem;
	padding: 0px 8px;

}

footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}
.copy_footer{
margin-top: 10px;
font-size: 0.7rem
}
	
}




@media screen and (max-width:320px) {
	
	
	
/* ナビゲーション*/
nav{


font-size: 0.8rem;
	letter-spacing: 1px;
bottom:0%;
right:1%;
top: 2%;
}





.hednavi_sp{
 opacity: 0;

	padding:30px 30px;
	margin: 20px 0px 10px 20px;

	top:20px;
	right: 0;
	
}


.hednavi_sp li{
margin-bottom:20px!important;
font-size: 1.0rem;
}




/* オープニング*/

.company-info{
display: none;

}

.animation01{
	font-size: 0.6rem;
	
    top: 50%;
    left: 50%;
   
	
}
.animation02{
	width: 17%;
	
    top: 50%;
    left: 50%;


}


.container{
	width:85%;
}



/*common*/
.about,.works,.works_detail{
width:95%;


}
	
.works{
width:85%;


}

.about h1,.works h1,.price h1, .example h1{

	font-size: 0.9rem;

	letter-spacing: 2px;
margin:  50px 0px 0px 10px;

padding: 0 30px 1px 30px;
}

.works_detail h1{

font-size: 1.0rem;
letter-spacing: 1px;
margin:  50px 0px 0px 20px;

padding: 0 30px 0px 30px;
}

/* about*/
.about p{
	
	font-size: 0.7rem;
	
	
	letter-spacing:1px;
	line-height: 150%;
	
margin:20px auto 0px auto;

}

.pearsonal, .company{
	width: 90%;
	margin:50px auto 0px auto; 
	
	padding: 50px 0px 0px 0px;
}


.sns{
  
    width:90%;
	margin:40px auto 0px auto;
  
}


.sns  h2{
	letter-spacing: 2px;
	font-size: 0.7rem;
	font-weight: 500;
	margin: 0 0 10px 5%;
}

.instagram{
   
    width:100%;

    padding-top:120%;

}
.instagram iframe{
 
  top: 50%;
    left: 50%;
 
    width:100%;
    height:100%;
}

 .company{
margin:0px auto;
	padding: 30px 0px 0px 0px;
	
}

.pearsonal span{
width: 100%!important;

}

.pearsonal span img{
	display: block;
	width: 80%;
margin: 30px auto 0 auto;
}



.company span{
	width: 100%!important;

}
	
	.company span:last-of-type {
display: none;
}


.pearsonal span h2,.company span h2{
	
	font-size: 0.7rem;
	
}

.pearsonal span ul{
margin-top:50px;
	padding: 0;
	font-size:0.7rem;

}

.pearsonal span ul li{

margin-bottom: 5px;
letter-spacing: 0px;
}

.company-list{	
width: 100%;

margin: 20px 0 0 0;
font-size: 0.8rem;
}


table.company-list th{

display: block;
	text-align:left;
text-align-last:left;

}

table.company-list td{
display: block;
letter-spacing: 1px;
padding: 0 0px 20px 0px;	
}

table.company-list td ol{
width: 100%;

}

table.company-list td li{

	padding: 0 0 20px 0 ;
	
}


/* works*/


.works h2{
	
	font-size: 0.7rem;
	margin: 50px 0px 0px 0px;
}

.photo_list{
	width: 90%;

	margin:20px auto 0 auto;
	
}

.creative_list{
	width: 90%;
	margin:20px auto 0 auto;
	
}



.creative_list span{
	width: 100%;
	line-height: 100%;
	margin: 0 0 50px 0;
}

.creative_list h3{
font-size: 0.7rem;
letter-spacing:1px;
	line-height: 150%;
}

.creative_list h4{
font-size: 0.7rem;
top:10px;
	left:10px;

}




.works_detail p{
width:90%!important;

	padding: 0;
	
	font-size: 0.7rem;
line-height: 150%;
}


.website{
	width: 90%;
	height: 350px;
	margin: 50px auto 20px auto;
}

.website img{

  top: 50%;
    left: 50%;
 
}



.website_detail{	
width: 90%;
font-size: 0.7rem;

}


table.website_detail th{

letter-spacing: 2px;
padding: 10px 0px 20px 0px;

}

table.website_detail td{
letter-spacing: 1px;
padding: 10px 0px 20px 0px;

line-height: 220%;
}



/*========= ナビゲーションのためのCSS ===============*/



.sub_inner{
	

    height: 100vh;/*ナビの高さ*/
	background:hsla(0,0%,0%,0.80);

    -webkit-overflow-scrolling: touch;
}

.close {
	
	top:30px;
	right: 30px;
  width: 30px;
  height: 30px;

}


.close::before, .close::after { /* 共通設定 */

  top: 50%;
  left: 50%;
  width: 3px; /* 棒の幅（太さ） */
  height: 30px; /* 棒の高さ */
  

	
}



 .modal-video {
        max-width: 220px;
        width: 220px !important;

  top: 52%!important;
    left: 50%!important;

    }
    

/*price*/
	.price{
		width: 85%;

	}

.price-list{	
margin: 50px 0 0 0;
font-size: 0.7rem;
	letter-spacing: -1px;
}


.price-list h2{
	
	font-size: 0.7rem;
	margin: 50px 0px 0px 0px;
}


.price-list ul{
	width: 90%;

	margin:20px auto 0px auto;
}

.price-list ul li{
	width: 100%;
	padding-bottom: 30px;
	margin-bottom: 30px;

}

.price-list ul li:last-of-type{
	
	margin-bottom:20px;

}

.price-list ul li span{
	bottom:0px;
	right: 0;
	letter-spacing:1px;
	font-weight:500;
}


.example{	
width: 80%;
margin: 50px auto 50px auto ;

}
.example h2{
	letter-spacing: 2px;
	font-size: 0.7rem;
	font-weight: 500;
	margin: 0px 0px 5px 0px;
}

.example-list{

	margin: 0px 0px 30px 0px;
}


.example-list table{
	width:100%;

	font-size: 0.6rem;
margin-bottom: 30px;

	
}
	

.example-list table th,.example table td {
  padding: 5px 10px;
letter-spacing: -1px;
	
}

.example-list table th{

	width:40%;

}



.example-list table tr:first-child td {
  border-radius:8px 10px 0 0;
		font-size: 0.7rem;

	font-weight:300;
}
.example-list table tr:last-child th {
  border-radius: 0 0 0 10px;
}
.example-list table tr:last-child td {
  border-radius: 0 0 10px 0;

}




footer{
	
	width: 100%;
	margin: 30px auto 0px auto;
flex-wrap: wrap;
	padding: 10px 0px 50px 0px;
	
}
footer div{
	width: 90%!important;
	margin: auto;
}

footer div:last-of-type{
text-align: left;
	margin-top:20px;
}
	
	
footer h1{

font-size: 0.9rem;
	letter-spacing: 2px;

}

footer h2{
font-size: 0.6rem;

line-height: 150%;	
padding:0;
	
}

footer span a{
	letter-spacing:2px;
	
	font-size: 0.7rem;
	padding: 0px 8px;

}

footer span a:first-of-type{

	padding: 0px 8px 0px 0px;
}

footer span a:last-of-type{

	padding: 0px 0px 0px 8px;
}
.copy_footer{
margin-top: 10px;
font-size: 0.7rem
}
	
}