/* =========================================================
	Font's
============================================================*/

*{
	-webkit-backface-visibility: hidden;
}

body,html{
	width:100%;
	height:100%;
}

body{
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
	color:#192445;
}


a {
	color:#1B2445;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

::selection {
	color:#FFFFFF;
	background:#1B2445; /* Safari */
}

::-moz-selection {
	color:#FFFFFF;
	background:#1B2445; /* Firefox */
}


/* =========================================================
	common's
============================================================*/

#gNavi,
#pNavi,
#cNavi{
	font-family:MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', sans-serif;
}

#wrapper {
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
	background:url(../img/background_loop.gif);
}

#container {
	padding-bottom:200px;
	
}

body .jp{
	display:block;
}

body .en{
	display:block;
}

body.en .jp{
	 display:none;
}

body.en .en{
	display:block;
}

@media only screen and (min-width: 768px) and (max-width: 961px) {
	

}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
body.home #container {
	padding-bottom:0px;
}

body .jp{
	display:block;
}

body .en{
	display:block;
}

body.en .jp{
	display:none;
}

body.en .en{
	display:block;
}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	

body.home #container {
	padding-bottom:0px;
}
	
body .jp{
	display:block;
}

body .en{
	display:none;
}

body.en .jp{
	display:none;
}

body.en .en{
	display:none;
}
	
}

/* =========================================================
	Header's
============================================================*/


/*-- gNavi ---------------
----------------------- */

#gNavi {
	width:100%;
	height:90px;
	background:#FFFFFF;
}

#gNavi .inner {
	width:950px;
	height:90px;
	margin:auto;
	position:relative;
}

#gNavi h1{
	width:125px;
	height:42px;
	position:absolute;
	top:24px;
	left:0;
	z-index:9002;
}

#gNavi h1 a{
	display:block;
	width:125px;
	height:0;
	padding-top:42px;
	overflow:hidden;
	background:url(../img/header_logo_stroke.png) no-repeat;
	background-size:contain;
}

/* nav */

#pNavi {
	display:block;
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:9000;
	overflow:hidden;
}
#pNavi nav {
	position:relative;
	width:950px;
	margin:auto;
	top:0;
	left:300px;
	
}

#pNavi nav div{
	position:relative;
	display:inline-block;
	width:177px;
	height:90px;
	margin-left:-70px;
	opacity:0.5px;
	text-align:center;
	background:none;
	cursor:pointer;
}

#pNavi nav div.current{
	/*background:url(../img/gnavi_button_background.png) no-repeat;*/
}

#pNavi nav div a {
	display:none;
	width:177px;
	line-height:90px;
	text-align:center;
	color:#1B2445;
	font-size:1em;
}

#pNavi nav div canvas {
	display:block;
}

#pNavi nav div.current a {
	color:#FFFFFF;
}

/* social */

#gNavi ul.social {
	z-index:9001;
	position:absolute;
	top:30px;
	right:0px;
	letter-spacing: -.40em;
	width:70px;
	margin:0 -9px 0 0;
}

#gNavi ul.social li{
	display:inline-block;
	letter-spacing: normal;
	width:25px;
	height:25px;
	margin:0 9px 0 0;
	padding:0;
}

#gNavi ul.social li a{
	display:block;
	width:25px;
	height:0;
	padding-top:25px;
	overflow:hidden;
}

#gNavi ul.social li.fb a{
	background:url(../img/gnavi_facebook_btn.png) no-repeat;
}

#gNavi ul.social li.yt a{
	background:url(../img/gnavi_youtube_btn.png) no-repeat;
}

#gNavi ul.social li.vi a{
	background:url(../img/gnavi_vimeo_btn.png) no-repeat;
}

/* toggle */

#lang-toggle {
	display:none;
	position:absolute;
	z-index:9999;
}

#lang-toggle .toggle {
	display:inline-block;
	vertical-align:middle;
	background:#334582;
	border-radius:20px;
	position:relative;
}

#lang-toggle p {
	display:inline-block;
	color:#FFFFFF;
	vertical-align:middle;
}

#lang-toggle .toggle .button {
	position:absolute;
	top:0;
	left:0;
	border-radius:50%;
	border:2.5px solid #334582;
	background:#FFFFFF;
}

#smpMenuButton {
	display:none;
	position:absolute;
	top:35px;
	right:0;
	width:60px;
	height:44px;
}

#smpMenuButton a{
	display:block;
	width:60px;
	height:44px;
	background:url(../img/smp_header_menu_button.png) no-repeat;
}



@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	#gNavi .inner { width:720px; }
	#pNavi { display:block} 
	#pNavi nav {
	position:relative;
	width:500px;
	margin:auto;
	top:0;
	left:100px;
	}

	#lang-toggle { display:none;}
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#gNavi {
		width:100%;
		height:80px;
		background:#1B2445;
	}
	#gNavi .inner {
		width:320px;
		height:80px;
		overflow:hidden;
	}
	
	#gNavi h1{
		width:90px;
		height:56px;
		position:absolute;
		top:25px;
		left:20px;
	}

	#gNavi h1 a{
		width:90px;
		padding-top:56px;
		background:url(../img/smp_header_logo_stroke.png) no-repeat;
		background-size:contain;
	}
	
	
	
	/*nav { display:none; }*/
	#pNavi.on { display:block; }
	#pNavi {
		display:none;
	position:absolute;
	width:100%;
	top:80px;
	left:0;
	z-index:9000;
	}
	
	#pNavi nav {
		position:relative;
		width:100%;
		margin:auto;
		top:0;
		left:0;
	}

	#pNavi nav div{
	position:relative;
	display:block;
	width:100%;
	height:50px;
	margin-left:0px;
	opacity:1;
	text-align:center;
	background:none;
	border-bottom:1px solid #1B2445;
	}

	#pNavi nav div a {
	display:block;
	width:100%;
	line-height:50px;
	text-align:center;
	color:#1B2445;
	font-size:1.2em;
	background:#FFFFFF;
	font-weight:bold;
	}
	
	#pNavi nav div canvas {
		display:none;
	}
	
	#pNavi nav div.current a {
		color:#1B2445;
	}
	
	#gNavi ul.social { display:none;}
	
	#lang-toggle {
		display:none;
		width:130px;
		top:20px;
		left:130px;

	}	

	#lang-toggle p {
		margin:0px;
		font-size:12px;
	}

	#lang-toggle .toggle {
		width:78px;
		height:40px;
		transform-origin:center center;
		-moz-transform-origin:center center;
		-webkit-transform-origin:center center;
		transform: scale(0.8);
		-moz-transform: scale(0.8);
		-webkit-transform: scale(0.8);
	}

	#lang-toggle .toggle .button {
		width:35px;
		height:35px;
	}
	
	#smpMenuButton {
		display:block;
		top:15px;
		transform-origin:center center;
		-moz-transform-origin:center center;
		-webkit-transform-origin:center center;
		transform: scale(0.7);
		-moz-transform: scale(0.7);
		-webkit-transform: scale(0.7);
	}
	
}

/***** Phone (landscape 480px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	
	#gNavi {
	width:100%;
	height:80px;
	background:#1B2445;
	}
	
	#gNavi .inner {
		width:480px;
		height:80px;
		overflow:hidden;
	}
	
	#gNavi h1{
	width:90px;
	height:56px;
	position:absolute;
	top:25px;
	left:0;
	}

	#gNavi h1 a{
		display:block;
		width:90px;
		padding-top:56px;
		background:url(../img/smp_header_logo_stroke.png) no-repeat;
		background-size:contain;
	}
	
	
	/*nav { display:none; }*/
	#pNavi.on { display:block; }
	#pNavi {
		display:none;
		position:absolute;
		width:100%;
		top:80px;
		left:0;
		z-index:9000;
	}
	
	#pNavi nav {
		position:relative;
		width:100%;
		margin:auto;
		top:0;
		left:0;
	}

	#pNavi nav div{
	position:relative;
	display:block;
	width:100%;
	height:50px;
	margin-left:0px;
	opacity:1;
	text-align:center;
	background:none;
	border-bottom:1px solid #1B2445;
	}

	#pNavi nav div a {
	display:block;
	width:100%;
	line-height:50px;
	text-align:center;
	color:#1B2445;
	font-size:1.2em;
	background:#FFFFFF;
	font-weight:bold;
	}
	
	#pNavi nav div canvas {
		display:none;
	}
	
	#pNavi nav div.current a {
		color:#1B2445;
	}
	
	
	#gNavi ul.social { display:none;}
	
	#lang-toggle {
		display:none;
		width:200px;
		top:30px;
		left:200px;
	}

	#lang-toggle p {
		margin:5px;
		font-size:25px;
	}

	#lang-toggle .toggle {
		width:78px;
		height:40px;
		transform-origin:center center;
		-moz-transform-origin:center center;
		-webkit-transform-origin:center center;
		transform: scale(1);
		-moz-transform: scale(1);
		-webkit-transform: scale(1);
	}

	#lang-toggle .toggle .button {
		width:35px;
		height:35px;
	}
	
	#smpMenuButton {
		display:block;
		top:15px;
		transform-origin:center center;
		-moz-transform-origin:center center;
		-webkit-transform-origin:center center;
		transform: scale(0.7);
		-moz-transform: scale(0.7);
		-webkit-transform: scale(0.7);
	}
	
}

/*-- cNavi ---------------
----------------------- */

#cNavi {
	position:absolute;
	width:100%;
	height:60px;
	background:#1B2445;
	top:90px;
	z-index:9998;
}

#cNavi.fix {
	position:fixed;
	top:0;
}

#cNavi .inner {
	width:950px;
	margin:auto;
	position:relative;
}

#cNavi ul {
	margin:0;
	list-style:none;
	text-align:center;
	z-index:7999;
}

#cNavi ul li{
	display:inline-block;
	margin:0 15px;
	padding:0;	
}

#cNavi ul li img{
	vertical-align:middle;
}

#cNavi ul li a {
	display:block;
	color:#FFFFFF;
	height:55px;
	line-height:60px;
	text-decoration:none;

}

#cNavi .work-btn a{
	display:block;
	width:40px;
	height:55px;
	line-height:60px;
	background:url(../img/cnavi_work_btn.gif) no-repeat center center;
}


#cNavi ul li a:hover {
	border-bottom:5px solid #FFFFFF;
}

#cNavi ul li.current a{
		border-bottom:5px solid #FFFFFF;
	}



#cNavi .nav-prev,
#cNavi .nav-next {
	position:absolute;
	top:13px;
	width:20px;
	height:33px;
	z-index:8000;
}

#cNavi .nav-next { right:0;}
#cNavi .nav-prev { left:0; }

#cNavi .nav-next a,
#cNavi .nav-prev a {
	display:block;
	width:20px;
	height:0px;
	padding-top:33px;
	overflow:hidden;
}

#cNavi .nav-next a {
	background:url(../img/cnavi_next_btn.gif) no-repeat;
}

#cNavi .nav-prev a {
	background:url(../img/cnavi_prev_btn.gif) no-repeat;
}

@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	#cNavi .inner { width:720px; }
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#cNavi { height:50px; background:#FFFFFF; border-bottom:1px solid #1B2445; line-height:160%; top:80px;}
	#cNavi .inner {	width:300px; }
	#cNavi ul li a {
		display:block;
		color:#1B2445;
		height:45px;
		line-height:50px;
		text-decoration:none;
		font-size:12px;
	}
	
	#cNavi ul li{
	display:inline-block;
	margin:0 5px;
	padding:0;
	}

	#cNavi ul li a:hover {
		border-bottom:5px solid #1B2445;
	}
	
	#cNavi ul li.current a{
		border-bottom:5px solid #1B2445;
	}
	
	#cNavi .nav-next,
	#cNavi .nav-prev {
		top:8px;
	}
	
	
	#cNavi .nav-next a,
	#cNavi .nav-prev a {
	display:block;
	width:19px;
	height:0px;
	padding-top:35px;
	overflow:hidden;
	}

	#cNavi .nav-next a {
		background:url(../img/cnavi_next_btn_smp.gif) no-repeat;
		background-size:cover;
	}

	#cNavi .nav-prev a {
		background:url(../img/cnavi_prev_btn_smp.gif) no-repeat;
		background-size:cover;
	}
	
	#cNavi .work-btn a{
	display:block;
	width:50px;
	height:45px;
	line-height:50px;
	background:url(../img/cnavi_work_btn_smp.gif) no-repeat center center;
	}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#cNavi { height:50px; background:#FFFFFF; border-bottom:1px solid #1B2445; line-height:160%;top:80px;}
	#cNavi .inner {
		width:480px;
	}
	#cNavi ul li a {
		display:block;
		color:#1B2445;
		height:45px;
		line-height:50px;
		text-decoration:none;
	}

	#cNavi ul li a:hover {
		border-bottom:5px solid #1B2445;
	}
	
	#cNavi ul li.current a{
		border-bottom:5px solid #1B2445;
	}

	#cNavi .nav-next,
	#cNavi .nav-prev {
		top:8px;
	}
	
	#cNavi .work-btn a{
	display:block;
	width:50px;
	height:45px;
	line-height:50px;
	background:url(../img/cnavi_work_btn_smp.gif) no-repeat center center;

	}
	
}

/* =========================================================
	index
============================================================*/

#IndexGF {
	background:#181F3C;
	text-align:center;
	color:#FFFFFF;
	width:100%;
	height:470px;
	line-height:470px;
	overflow:hidden;
	background:url(../img/background_index.jpg) top center;
}

#IndexGF h1{
	display:none;
	margin:0;
	padding:0;
	overflow:hidden;
}

#section.index .work-list {
	margin:50px auto 25px auto;
}

#section.index .work-list li{
	display:inline-block !important;
}

#section.index .more-work {
	text-align:center;
	font-size:15px;
	font-family:"Myriad Pro";
}

#section.index .more-work a{
	background:url(../img/arrow01.png) no-repeat left center;
	padding-left:20px;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#IndexGF {
		position:relative;
		width:100%;
		height:500px;
		background:url(../img/stripe_loop.png) top center;
		border-top:1px solid #FFFFFF;
		background-size:50%;
	}
	
	#IndexGF h1{
		display:block;
		position:absolute;
		width:337px;
		height:0px !important;
		padding-top:337px;
		overflow:hidden !important;
		background:url(../img/smp_index_gf.png) no-repeat;
		left:50%;
		top:0px;
		margin-left:-168.5px;
		
		-moz-transform-origin:center center;
    -webkit-transform-origin:center center;
        -ms-transform-origin:center center;
         -o-transform-origin:center center;
            transform-origin:center center;
	-moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
        -ms-transform:scale(0.5);
         -o-transform:scale(0.5);
            transform:scale(0.5);
	}
	
	#IndexGF h1{
		position:absolute;
		width:337px;
		height:337px;
	}
	
	#section.index .work-list {
		display:none;
	}
	
	#section.index .more-work{
		display:none;
	}
	
	#section.index {
		margin-bottom:-120px;
	}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	

	#IndexGF {
		position:relative;
		width:100%;
		height:800px;
		background:url(../img/stripe_loop.png) top center;
		border-top:1px solid #FFFFFF;
		background-size:100%;
	}
	
	#IndexGF h1{
		display:block;
		position:absolute;
		width:337px;
		height:0px !important;
		padding-top:337px;
		overflow:hidden !important;
		background:url(../img/smp_index_gf.png) no-repeat;
		left:50%;
		top:168.5px;
		margin-left:-168.5px;
		
		-moz-transform-origin:center center;
    -webkit-transform-origin:center center;
        -ms-transform-origin:center center;
         -o-transform-origin:center center;
            transform-origin:center center;
	-moz-transform:scale(1);
    -webkit-transform:scale(1);
        -ms-transform:scale(1);
         -o-transform:scale(1);
            transform:scale(1);
	}

	#section.index .work-list {
		display:none;
	}
	
	#section.index .more-work{
		display:none;
	}
	
	#section.index {
		margin-bottom:-100px;
	}

}

/* =========================================================
	about
============================================================*/

#section.about .content-wrapper{
	width:100%;
	margin:auto;
	padding-top:60px;
}

#section.about .about-texts{
	width:950px;
	margin:68px auto 0 auto;
	
}
#section.about .about-concept{
	width:950px;
	margin:auto;
}
#section.about .about-concept .pc {
	border:1px solid #A9ADB9;
}


#section.about .about-company {
	width:950px;
	margin:auto;
	
}

#section.about .single{
	float:none;
	width:100%;
	padding:0;
}

#section.about .left{
	float:left;
	width:45%;
	padding-right:5%;
}

#section.about .right{
	float:right;
	width:45%;
	padding-left:5%;
}

#section.about .about-texts h2 {
	margin:0 0 20px 0;
	font-weight:normal;
	line-height:120%;
	font-size:23px;
}

#section.about .about-texts p {
	font-size:14px;
	margin-bottom:0;
	line-height:160%;
}

#section.about .about-concept{
	margin-top:60px;
	margin-bottom:60px;
}

#section.about .about-concept img{
	width:100%;
	height:auto;
}

#section.about .about-company h2 {
	font-weight:normal;
	font-size:30px;
	margin:0 0 45px 0;
}

#section.about .about-company h3 {
	font-weight:normal;
	font-size:16px;
	margin-bottom:20px;
}

#section.about .about-company table {
	width:100%;
	text-align:left;
	font-size:14px;
	line-height:140%;
}

#section.about .about-company th {
	font-weight:bold;
	width:5em;
	padding:15px 20px 15px 0;
}

#section.about .about-company td {
	padding:15px 0 15px 0;
}

#section.about .about-company th,
#section.about .about-company td{
	vertical-align:top;
}

#section.about .about-company td ul{
	margin:0;
	padding:0 0 0 1em;
}


#section.about .about-company td ul{
	list-style:none;
	padding:0;
}

#section.about .about-company td ul li {
	list-style:none;
	background:url(../img/icon_rhombus.png) no-repeat;
	background-position:0 0.4em;
	padding:0 0 0 20px;
	margin-bottom:2px;
}


/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	

	
#section.about .content-wrapper{
	width:100%;
	margin:auto;
}

#section.about .about-texts{
	width:720px;
	margin:68px auto 0 auto;
	
}
#section.about .about-concept{
	width:720px;
	margin:60px auto 60px auto;
}
#section.about .about-company {
	width:720px;
	margin:auto;
	
}
	
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#section.about .content-wrapper{
		width:100%;
		margin:auto;
		padding-top:30px;
	}
	
	#section.about .about-texts{
		width:300px;
		background:none;
	}
	
	#section.about .about-concept{
		width:100%;
		margin:60px auto 60px auto;
	}
	
	#section.about .about-concept img{
		width:100%;
		height:auto;
	}
	
	#section.about .about-company {
		width:300px;
		background:none;
	}
	
	#section.about .left{
		float:none;
		width:300px;
		padding-right:0;
	}

	#section.about .right{
		float:none;
		width:300px;
		padding-left:0;
	}
		
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#section.about .content-wrapper{
		width:100%;
		margin:auto;
		padding-top:30px;
	}
	
	#section.about .about-texts{
		width:480px;
		background:none;
	}
	
	#section.about .about-concept{
		width:100%;
		margin:60px auto 60px auto;
	}
	
	#section.about .about-concept img{
		width:100%;
		height:auto;
	}
	
	#section.about .about-company {
		width:480px;
		background:none;
	}
	
	#section.about .left{
		float:none;
		width:480px;
		padding-right:0;
	}

	#section.about .right{
		float:none;
		width:480px;
		padding-left:0;
	}


}



/* =========================================================
	work
============================================================*/

#section.work .content-wrapper{
	width:100%;
	margin:auto;
	padding-top:60px;
}

#section.work .work-list {
	margin:68px auto 68px auto;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	
	#section.work .work-list {
	margin:50px auto 50px auto;
	}
	
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {

	
	#section.work .work-list {
	margin:30px auto 30px auto;
	}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	


	
	#section.work .work-list {
	margin:30px auto 30px auto;
	}

	
}

/* =========================================================
	single
============================================================*/

#section.single .content-wrapper{
	width:100%;
	margin:auto;
	padding-top:60px;
}

#section.single article{
	width:950px;
	margin:68px auto 0 auto;
}

#section.single article .right{
	float:left;
	width:60%;
	font-size:14px;
	line-height:160%;
}

#section.single article .right .vvqbox a {
	display:none;
}

#section.single article .right .vvqbox,
#section.single article .right .vvqbox iframe {
	display:block;
	width:570px !important;
	height:321px !important;
	margin-bottom:20px;
}

#section.single article .right img {
	margin-bottom:20px;
}

#section.single article .right .credit p{
	margin:2em 0 1em 0;
}

#section.single article .left{
	float:left;
	width:35%;
	margin-right:5%;
}

#section.single article dl,
#section.single article dl dt,
#section.single article dl dd{
	margin:0;
	padding:0;
}

#section.single article dl dt{
	border-bottom:1px solid #C7CAD1;
}

#section.single article dl dt h1{
	font-size:18px;
	font-weight:normal;
	line-height:120%;
	margin-bottom:1em;
}

#section.single article dl dt p{
	color:#5F657C;
	font-size:14px;
	margin-bottom:1em;
}

#section.single article dl dd {
	font-size:14px;
	line-height:160%;
	border-bottom:1px solid #C7CAD1;
}
#section.single article dl dd.description {
	padding-top:1.5em;
}
#section.single article dl dd.description p.jp{
	margin-bottom:1.5em;
}

#section.single article dl dd.description p.en{
	font-size:14px;
	margin-bottom:1.5em;
}

#section.single article dl dd.date{
	font-size:1em;
	padding:20px 0;
}

#section.single article dl dd.link{
	font-size:1em;
	padding:15px 0;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	#section.single .content-wrapper{
		padding-top:60px;
	}
	
	#section.single article{
		width:720px;
	}
	
	#section.single article .right .vvqbox,
	#section.single article .right .vvqbox iframe {
	width:432px !important;
	height:243px !important;
	}
	
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#section.single .content-wrapper{
		padding-top:30px;
	}

	
	#section.single article{
		width:300px;
	}
	
	#section.single article .right{
		float:none;
		width:100%;
	}
	
	#section.single article .right .vvqbox,
	#section.single article .right .vvqbox iframe {
		width:300px !important;
		height:169px !important;
	}
	
	#section.single article .left{
		float:none;
		width:100%;
		margin-right:0;
	}
	
	#section.single article dl dt h1{
	font-size:24px;
	font-weight:bold;
	line-height:120%;
	margin-bottom:0.5em;
	}

	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	
	
	#section.single .content-wrapper{
		padding-top:30px;
	}
	
	#section.single article{
		width:480px;
	}
	
	#section.single article .right{
		float:none;
		width:100%;
	}
	
	#section.single article .right .vvqbox,
	#section.single article .right .vvqbox iframe {
		width:480px !important;
		height:270px !important;
	}
	
	#section.single article .left{
		float:none;
		width:100%;
		margin-right:0;
	}
	
	#section.single article dl dt h1{
	font-size:24px;
	font-weight:bold;
	line-height:120%;
	margin-bottom:0.5em;
	}
	
}

/* =========================================================
	contact
============================================================*/



#section.contact .content-wrapper{
		width:950px;
		margin:auto;
		padding-top:60px;
}


#section.contact .contact-access {
	width:100%;
	margin:68px auto 40px auto;
	line-height:140%;
	background:url(../img/one_px_line.gif) repeat-y center center;
}

#section.contact .contact-access h2{
	margin:0 0 30px 0;
	font-weight:normal;
	font-size:18px;
}



#section.contact .contact-access h3{
	font-weight:bold;
	background:url(../img/icon_rhombus.png) no-repeat left center;
	padding-left:17px;
	margin-bottom:3px;
}

#section.contact .contact-access p{
	margin:0 0 15px 0;
	font-size:14px;
	line-height:140%;
}

#section.contact .contact-access .single{
		float:none;
		width:100%;
		padding-right:0;
	}

#section.contact .contact-access .left{
	float:left;
	width:45%;
	padding-right:5%;
}

#section.contact .contact-access .right{
	float:right;
	width:45%;
	padding-left:5%;
}

#section.contact .contact-access .accsess-address-second {
	padding-bottom:40px;
}

#section.contact .contact-map {
	width:100%;
	margin:auto;
}

#section.contact .contact-map p.link{
	text-align:right;
	font-size:1em;
	margin:0 0 10px 0;
}

#section.contact .contact-map #map_canvas{
	width:950px;
	height:500px;
}

#section.contact .contact-map #map_canvas iframe{
	width:950px;
	height:500px;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	#section.contact .content-wrapper{
		width:720px;
		margin:auto;
	}

	#section.contact .contact-access .single{
		float:none;
		width:100%;
		padding-right:0;
	}
	
	
	#section.contact .contact-map #map_canvas{
	width:720px;
	height:480px;
	}

	#section.contact .contact-map #map_canvas iframe{
		width:720px;
	height:480px;
	}
	
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#section.contact .content-wrapper{
		width:300px;
		margin:auto;
		padding-top:30px;
	}

	
	#section.contact .contact-access {
		width:300px;
		background:none;
	}
	
	#section.contact .contact-access .single{
		float:none;
		width:100%;
		padding-right:0;
	}
	
	#section.contact .contact-access .left{
		float:none;
		width:100%;
		padding-right:0;
		margin-bottom:60px;
		padding-bottom:60px;
		border-bottom:1px solid #000000;
	}

	#section.contact .contact-access .right{
		float:none;
		width:100%;
		padding-left:0;
	}
	
	#section.contact .contact-map {
		width:100%;
		margin:auto;
	}
	
	#section.contact .contact-map #map_canvas{
	width:300px;
	height:300px;
	}

	#section.contact .contact-map #map_canvas iframe{
		width:300px;
		height:300px;
		}
		
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	

	#section.contact .content-wrapper{
		width:480px;
		margin:auto;
		padding-top:30px;
	}
	
		
	#section.contact .contact-access {
	width:480px;
	background:none;
	}
	
	#section.contact .contact-access .single{
		float:none;
		width:100%;
		padding-right:0;
	}
	
	#section.contact .contact-access .left{
		float:none;
		width:100%;
		padding-right:0;
		margin-bottom:60px;
		padding-bottom:60px;
		border-bottom:1px solid #000000;
	}

	#section.contact .contact-access .right{
		float:none;
		width:100%;
		padding-left:0;
	}
	
	#section.contact .contact-map {
	width:100%;
	margin:auto;
	}
	
	#section.contact .contact-map #map_canvas{
	width:480px;
	height:400px;
}

#section.contact .contact-map #map_canvas iframe{
	width:480px;
	height:400px;
}

}


/* =========================================================
	.work-list
============================================================*/
#section .work-list{
	width:950px;
	overflow:hidden;
}

#section .work-list ul {
	display:block;
	width:952px;
	padding:0;
	margin:0 -1px 0 -1px;
	list-style:none;
	line-height: 0;
	letter-spacing: -.40em;
}



#section .work-list ul li {
	letter-spacing: normal;
	display:none;
	width:316px;
	height:175px;
	margin:0 1px 1px 0;
	position:relative;
	overflow:hidden;
}

#section .work-list ul li img{
	width:316px;
	height:175px;
	position:absolute;
}

#section .work-list ul li .description{
	position:absolute;
	width:100%;
	height:80px;
	bottom:-80px;
	background:url(../img/blue_alpha_background.png);
	color:#FFFFFF;
}

#section .work-list ul li .description h3{
	line-height:120%;
	font-size:16px;
	height:2em;
	padding:10px 10px 15px 10px;
}

#section .work-list ul li .description p{
	line-height:120%;
	padding:0 10px;
	font-size:14px;
	color:#BBBEC8;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	
	#section .work-list{
		width:720px;	
	}
	
	#section .work-list ul {
		width:718px;
		margin:0 -1px 0 -1px;
	}
	
	#section .work-list ul li {
		width:238px;
		height:132px;
	}
	
	#section .work-list ul li img{
		width:238px;
		height:132px;
	}
	
	
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	
	#section .work-list{
		width:300px;
	}
	
	#section .work-list ul {
		width:300px;
		margin:0 0 0 0;
	}
	
	#section .work-list ul li {
		width:300px;
		height:166px;
		margin:0 0 25px 0;
	}
	
	#section .work-list ul li img{
		width:300px;
		height:166px;
	}
	
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#section .work-list{
		width:480px;	
	}
	
	#section .work-list ul {
		width:480px;
		margin:0 0 0 0;
	}
	
	#section .work-list ul li {
		width:480px;
		height:266px;
		margin:0 0 30px 0;
	}
	
	#section .work-list ul li img{
		width:480px;
		height:266px;
	}
	
	
	
}


/* =========================================================
	transiton
============================================================*/

#transition {
	position:fixed;
	top:0px;
	left:0;
	z-index:9999;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	#transition {
	top:0px;
}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	

	
	#transition {
	top:0px;
	}

	
}


/* =========================================================
	Footer's
============================================================*/

footer {
	position:absolute;
	bottom:0;
	width:100%;
	background:#FFFFFF;
	border-top:2px solid #1B2445;
	text-align:center;
	margin-top:80px;
}

footer .inner {
	height:120px;
	margin:auto;
	position:relative;
}


footer .inner .copyright{
	text-align:right;
	padding:20px;
	font-size:0.8em;
}

footer .inner .pagetop {
	display:block;
	position:absolute;
	width:48px;
	height:48px;
	top:-24px;
	left:50%;
	margin-left:-24px;
	z-index:9999;
}

footer .inner .pagetop a{
	display:block;
	width:48px;
	height:0px;
	padding-top:48px;
	overflow:hidden;
	background:url(../img/footer_pagetop.png) no-repeat;
	transform-origin:center center;
		-moz-transform-origin:center center;
		-webkit-transform-origin:center center;
		-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

footer .inner .pagetop a:hover{
	
		transform: scale(1.2);
		-moz-transform: scale(1.2);
		-webkit-transform: scale(1.2);
}




/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	
	footer .inner .copyright{
		text-align:center;
		padding:40px;
		font-size:0.8em;
	}
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	

	
	footer .inner .copyright{
		text-align:center;
		padding:40px;
		font-size:0.8em;
	}

	
}

img.pc {
	display:block;
}

img.smp {
	display:none;
}

/***** tablet (portrait 968px) *****/
@media only screen and (min-width: 768px) and (max-width: 961px) {
	img.pc {
	display:block;
}

img.smp {
	display:none;
}
}

/***** Phone (portrait 300px) *****/
@media only screen and (max-width: 767px) {
	img.pc {
	display:none;
}

img.smp {
	display:block;
}
	
	
}

/***** Phone (landscape 420px) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {	

	
	img.pc {
	display:none;
}

img.smp {
	display:block;
}

	
}


.hide {
	display:none !important;
}

.show {
	display:block !important;
}