@charset "utf-8";

/*---------------------------------------*/
/*----- smart phone CSS lower 1300px -----*/
/*---------------------------------------*/

@media (max-width : 1300px){
	/* works */
	/* Arrows */
	.works_slide .slick-prev,
	.works_slide .slick-next { width: 17.5%; }
	/* /works */
}

/*---------------------------------------*/
/*----- smart phone CSS lower 1100px -----*/
/*---------------------------------------*/

@media (max-width : 1100px){
	/* common */
	.cw1100 {width:700px;}
	/* /common */

	/* header */
	ul#navi {margin-right:15px; }
	ul#navi li a {padding:0px 12px 0px 12px; }
	/* /header */

	/* concept */
	div#concept h3 strong {font-size:45px; }
	div#concept ul li {width:340px; height:565px; margin-bottom:48px; }
	div#concept ul li h4 {padding:32px 0px 32px 0px; }
	div#concept ul li strong {padding:0px 40px 0px 40px; }
	/* /concept */

	/* works */
	div#works ul li {float:left; width:220px; margin-right:20px; }
	div#works ul li:nth-child(4n) {margin-right:20px; }
	div#works ul li:nth-child(4n+1) {clear:inherit; }
	div#works ul li:nth-child(3n) {margin-right:0px; }
	div#works ul li:nth-child(3n+1) {clear:left; }
	/* /works */

	/* about */
	div#about dl dd {width:52%; }
	div#about dl dt {padding:0px 0px 0px 40px; }
	/* /about */
}

/*---------------------------------------*/
/*----- smart phone CSS lower 1024px -----*/
/*---------------------------------------*/

@media (max-width : 1024px){
	/* header */
	ul#navi {margin-right:5px; }
	ul#navi li a {padding:0px 7px 0px 7px; }
	/* /header */

	/* works */
	/* Arrows */
	.works_slide .slick-prev,
	.works_slide .slick-next { width: 15%; }
	/* /works */
}

/*---------------------------------------*/
/*----- smart phone CSS lower 940px -----*/
/*---------------------------------------*/

@media (max-width : 940px){
	/* header */
	ul#navi {display:none; }
	div#navicontact {display:none; }
	.spbtn {display:inline-block; }
	/* /header */

	/* fix-contact */
	.fix-contact {
		position: fixed;
		top: auto;
		bottom: 0;
		background-color: #FFE100;
		width: 100%;
		z-index: 1;
		text-align: center;
	}
	.fix-contact a {
		padding: 15px 0;
		display: block;
		text-decoration: none;
		list-style-type: none;
		color: #000;
	}
	/* end fix-contact */
}

/*---------------------------------------*/
/*----- smart phone CSS lower 768px -----*/
/*---------------------------------------*/

@media (max-width : 768px){
	/* works */
	.works_slide .slick-slider { margin-bottom: 40px; }
	.works_slide .slick-dots { bottom: -40px; height: auto; }
	
	.works_slide .slick-dots li button {width: 12px; height: 12px; padding: 6px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: #CCC;
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;}
	/* Arrows */
	.works_slide .slick-prev,
	.works_slide .slick-next { width: 7.5%; }
	/* /works */
}

/*---------------------------------------*/
/*----- smart phone CSS lower 738px -----*/
/*---------------------------------------*/

@media (max-width : 738px){

	/* common */
	.pc_only {display:none;}
	.sp_only {display:block;}
	.pcin_only {display:none;}
	.spin_only {display:inline;}
	
	.cont {width:100%; min-width:inherit;}
	.contin {margin:0px 20px;}

	.cw1100 {width:auto;}
	.cw700 {width:auto;}

	#page-top {width:12.5%; bottom: 20px; right: 20px;}
	#page-top a {width:100%; }
	
	div#page_title {padding:40px 0px 40px 0px; }
	div#page_title h2 {font-size:28px; line-height:100%; letter-spacing:0.1em; }
	div#page_title h2:after {width:50px; margin:20px auto 0px auto; padding:0px 0px 0px 0px; }
	/* /common */



	/* header */
	div#header {width:100%; height:68px; }
	
	a#title_logo {width:210px; height:100%; margin:0px auto; float:inherit; }
	/* /header */



	/* footer */
	div#pan {padding:20px 0px 20px 0px; font-size:12px; line-height:120%; letter-spacing:1px; }
	
	div#footer {padding:70px 0px 90px 0px; }
	div#footer img {width:60%; margin:0px auto; }
	div#footer h5 {padding:30px 0px 70px 0px; font-size:14px; line-height:200%; letter-spacing:1px; }
	div#footer strong {font-size:10px; line-height:120%; letter-spacing:1px; }
	/* /footer */



	/* top */
	div#top_image {padding:0px; background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:inherit; }
	div#top_image ul {width:100%; height:100%; }
	div#top_image ul li {width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:inherit; position:absolute; top:0px; left:0px; }
	
	div#top_logo {padding:60px 0px 60px 0px; }
	div#top_logo img {margin:0px auto; }
	
	a.top_links {display:block; width:75%; margin:0px auto; padding:18px 0px 18px 0px; }
	a.top_links strong {width:0; height:100%; position:absolute; top:0; left:0; }
	a.top_links:hover strong {width: 100%;}
	a.top_links span {font-size:14px; line-height:120%; letter-spacing:1px; }
	
	dl#top_concept {display:block; }
	dl#top_concept dd {display:block; vertical-align:inherit; width:100%; padding:0px 0px 0px 0px; }
	dl#top_concept dt {display:block; vertical-align:inherit; width:100%; padding:0px 0px 60px 0px; }
	dl#top_concept dt h1 {font-size:5.5vw; line-height:180%; letter-spacing:1px; }
	dl#top_concept dt h2 {padding:30px 0px 24px 0px; font-size:14px; line-height:200%; letter-spacing:1px; }
	dl#top_concept a#to_concept {margin:0px auto 0px auto; }
	
	.slide-wrap {width:100%; height:auto; padding:0px 0px 30px 0px; }
	.slide-wrap .bx-wrapper img {width:100%; margin:0px auto; }
	.bx-wrapper .bx-pager {bottom:-40px;}
	.bx-wrapper .bx-pager.bx-default-pager a {padding: 5px; width:10px; height:10px; 
		border-radius:5px;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;}
		
		.works_slide .slick-dots li {position: relative; display: inline-block; width: 10px; height: 10px; margin: 0 5px; padding: 0; cursor: pointer;}
.works_slide .slick-dots li button {font-size: 0; line-height: 0; display: block; width: 10px; height: 10px; padding: 5px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: #CCC;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;}
	
	div#top_works {padding:60px 0px 60px 0px; }
	div#top_works h3 {font-size:28px; line-height:120%; letter-spacing:0.1em; }
	div#top_works h3:after {width:50px; margin:20px auto 0px auto; padding:40px 0px 0px 0px; }
	div#top_works ul {width:100%; padding:0px 0px 20px 0px; }
	div#top_works ul li {width:calc(50% - 10px); margin-right:0px; padding:0px 0px 10px 0px; float:inherit; }
	div#top_works ul li:last-child {margin-right:0px; }
	div#top_works ul li:nth-child(odd) {float:left; clear:both; }
	div#top_works ul li:nth-child(even) {float:right; }
	div#top_works ul li a {width:100%; }
	div#top_works ul li a p {width:100%; padding:100% 0px 0px 0px; }
	div#top_works ul li strong {padding:15px 0px 15px 0px; font-size:14px; line-height:140%; letter-spacing:1px; }
	div#top_works a#to_works {}
	
	div#top_news {padding:60px 0px 60px 0px; }
	div#top_news h3 {font-size:28px; line-height:120%; letter-spacing:0.1em; }
	div#top_news h3:after {width:50px; margin:20px auto 0px auto; padding:40px 0px 0px 0px; }
	div#top_news ul {width:100%; padding:0px 0px 40px 0px; }
	div#top_news ul li {}
	div#top_news ul li a {display:table; padding:10px 0px 10px 0px; }
	div#top_news ul li span {display:table-cell; vertical-align:top; padding:0px 20px 0px 0px; font-size:14px; line-height:140%; letter-spacing:1px; }
	div#top_news ul li strong {display:table-cell; vertical-align:top; font-size:14px; line-height:140%; letter-spacing:1px; }
	div#top_news a#to_news {}
	
	div#top_insta {padding:20px 0px 60px 0px; }
	div#top_insta h3 {font-size:28px; line-height:120%; letter-spacing:0.1em; }
	div#top_insta h3:after {width:50px; margin:20px auto 0px auto; padding:40px 0px 0px 0px; }
	div.instaw {display:none; }
	div.instawsp {display:block; width:100%; margin:0px auto; padding:134% 0px 0px 0px; overflow:hidden; }
	div.instawsp iframe {height:100% !important; position:absolute; left:0px; top:0px; }
	/* /top */
	
	
	
	/* news */
	div#news {padding:0px 0px 50px 0px; }
	div#news section {padding:50px 0px 50px 0px; }
	div#news section h5 {font-size:14px; line-height:120%; letter-spacing:1px; }
	div#news section h3 {padding:15px 0px 40px 0px; font-size:5.5vw; line-height:180%; letter-spacing:1px; }
	div#news section h3:after {width:50px; margin:20px auto 0px 0px; padding:0px 0px 0px 0px; }
	div#news section p {font-size:14px; line-height:200%; letter-spacing:1px; }
	/* /news */
	
	
	
	/* concept */
	div#concept {padding:60px 0px 60px 0px; }
	div#concept h3 {}
	div#concept h3 strong {font-size:8.5vw; line-height:140%; letter-spacing:0px; }
	div#concept h3 span {padding:24px 0px 0px 0px; font-size:14px; line-height:120%; letter-spacing:1px; }
	div#concept img#concept_icon {margin:48px auto 66px auto; }
	div#concept ul {width:100%; }
	div#concept ul li {width:100%; height:auto; margin-bottom:40px; }
	div#concept ul li:nth-child(odd) {clear:inherit; float:inherit; }
	div#concept ul li:nth-child(even) {float:inherit; }
	div#concept ul li p {width:100%; padding:50% 0px 0px 0px; }
	div#concept ul li h4 {padding:28px 0px 28px 0px; font-size:21px; line-height:120%; letter-spacing:1px; }
	div#concept ul li strong {padding:0px 30px 30px 30px; font-size:14px; line-height:200%; letter-spacing:1px; }
	/* /concept */



	/* works */
	div#works {padding:60px 0px 60px 0px; }
	div#works ul {width:100%; padding:0px 0px 20px 0px; }
	div#works ul li {width:calc(50% - 10px); margin-right:0px; padding:0px 0px 10px 0px; float:inherit; }
	div#works ul li:nth-child(4n) {margin-right:0px; }
	div#works ul li:nth-child(4n+1) {clear:inherit; }
	div#works ul li:nth-child(3n) {margin-right:0px; }
	div#works ul li:nth-child(3n+1) {clear:inherit; }
	div#works ul li:nth-child(odd) {float:left; clear:both; }
	div#works ul li:nth-child(even) {float:right; }
	div#works ul li a {width:100%; }
	div#works ul li a p {width:100%; padding:100% 0px 0px 0px; }
	div#works ul li strong {padding:15px 0px 25px 0px; font-size:14px; line-height:140%; letter-spacing:1px; }

	div#works_in {padding:0px 0px 80px 0px; }
	#mainImg {padding:0px 0px 80px 0px; }
	div#works_in h5 {font-size:14px; line-height:120%; letter-spacing:1px; }
	div#works_in h3 {padding:15px 0px 40px 0px; font-size:5.5vw; line-height:180%; letter-spacing:1px; }
	div#works_in h3:after {width:50px; margin:20px auto 0px 0px; padding:0px 0px 0px 0px; }
	div#works_in h4 {font-size:14px; line-height:200%; letter-spacing:1px; }
	div#works_in p {margin:40px auto 50px auto; padding:30px; font-size:14px; line-height:200%; letter-spacing:1px; }
	/* /works */



	/* faq */
	div#faq {padding:0px 0px 120px 0px; }
	div#faq ul {width:100%; }
	div#faq ul li {padding:50px 10px 50px 10px; }
	div#faq ul li h3 {padding:0px 0px 20px 30px; font-size:14px; line-height:200%; letter-spacing:1px; }
	div#faq ul li h4 {padding:0px 0px 0px 30px; font-size:14px; line-height:200%; letter-spacing:1px; }
	/* /faq */



	/* about */
	div#about {padding:60px 0px 0px 0px; }
	div#about dl {display:block; width:100%; margin:0px auto 60px auto; }
	div#about dl dd {display:block; vertical-align:inherit; width:100%; }
	div#about dl dd p {width:100%; padding:100% 0px 0px 0px; }
	div#about dl dt {display:block; vertical-align:inherit; padding:40px 0px 0px 0px; }
	div#about dl dt h3 {padding:0px 0px 20px 0px; font-size:21px; line-height:160%; letter-spacing:1px; }
	div#about dl dt h4 {font-size:14px; line-height:200%; letter-spacing:1px; }
	div#about dl dt h4 span {padding:0px 0px 15px 0px; }
	div#about iframe {width:100%; height:360px; }
	/* /about */
	
	
	
	/* contact */
	div#contact {padding:50px 0px 50px 0px; }
	div#contact h3 {padding:0px 0px 0px 0px; font-size:14px; line-height:180%; letter-spacing:1px; }
	div#contact h4 {padding:0px 0px 30px 0px; font-size:14px; line-height:180%; letter-spacing:1px; }
	div#contact table {width:100%; margin:0px auto; }
	div#contact table tr {width:100%; }
	div#contact table th {display:block; width:100%; padding:20px 0px 4px 0px; font-size:14px; font-weight:bold; line-height:200%; }
	div#contact table td {display:block; width:100%; padding:4px 0px 20px 0px; font-size:14px; line-height:200%; }
	.red {padding:0px 0px 0px 5px; }
	div#contact table td#contact_radio {padding:4px 0px 20px 0px; }
	div#contact table#checktable th {padding:20px 0px 4px 0px; }
	div#contact table#checktable td {padding:4px 0px 20px 0px; }
	div#contact input[type="text"] {width:100%; padding:8px; font-size:16px; }
	div#contact label {padding:0px 10px 0px 2px; }
	div#contact textarea {width:100%; height:200px; font-size:16px; }
	div#contact a.form_btn {display:block; width:75%; margin:30px auto; padding:18px 0px 18px 0px; }
	div#contact a.form_btn strong {width:0; height:100%; position:absolute; top:0; left:0; }
	div#contact a.form_btn:hover strong {width: 100%;}
	div#contact a.form_btn span {font-size:14px; line-height:120%; letter-spacing:1px; }
	/* /contact */


	/* fix-contact */
	.fix-contact {
		position: fixed;
		top: auto;
		bottom: 0;
		background-color: #FFE100;
		width: 100%;
		z-index: 1;
		text-align: center;
	}
	.fix-contact .dgrid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	.fix-contact .dgrid li:first-child {
		/* border-right: 1px solid #000; */
		background-color: #ccc;
	}
	.fix-contact .dgrid li a {
		padding: 15px 0;
		text-decoration: none;
		list-style-type: none;
		color: #000;
		font-size: 16px;
		width: 100%;
	}
	.fix-contact .dgrid li a img {
		width: 30px;
		display: block;
		margin: 0 auto;
	}
	.fix-contact .dgrid li:nth-of-type(2) a img {
		transform: translateY(25%);
	}
	/* end fix-contact */
}


@media (max-width : 600px){
	.contactpic img {
		width: 100%;
	}
}