@charset "UTF-8";
/* CSS Document */
.cf{
	overflow:hidden;
	zoom:1;
}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #333;
	background-color: #F8F7F7;
	width:100%;
	overflow-x:hidden;
}


#logo {
	margin-left: 2vw;
	margin-top: 2vw;
}
#logo img {
	height: auto;
	width:30%;
}

.menu_ham {/*ハンバーガーボタン全体のボックス*/
	top:1.5vw;/*上から横幅の5%離す*/
	left:85%;/*左から85%離す↓*/
	width:12%;/*幅10%を足すと95%なので右の余り5%（=右から5%離れる）*/
	height:10vw;/*高さ横幅の10%*/
	position:fixed;/*ウィンドウに固定*/
	overflow:hidden;/*はみ出した中身は表示しない（クリッピング）*/
	z-index:9999;/*一番手前に*/
	border: 0.8vw solid #333;
	border-radius: 12px;
}
.menu1 {/*ハンバーガーボタン上の線*/
	width:60%;/*線の長さボタンボックスの幅いっぱい*/
	height:2.5px;/*線の太さ*/
	background-color: #333;/*線の色*/
	top:2vw;/*ボタンボックス上からの離し具合*/
	position:absolute;/*ボタンボックスに大して絶対配置*/
	margin-left: 2.3vw;
	
}
.menu2 {/*ハンバーガーボタン真ん中の線*/
	width:60%;/*線の長さボタンボックスの幅いっぱい*/
	height:2.5px;/*線の太さ*/
	background-color: #333;/*線の色*/
	top:4.5vw;/*ボタンボックス上からの離し具合*/
	position:absolute;/*ボタンボックスに大して絶対配置*/
	margin-left: 2.3vw;
}
.menu3 {/*ハンバーガーボタン下の線*/
	width:60%;/*線の長さボタンボックスの幅いっぱい*/
	height:2.5px;/*線の太さ*/
	background-color: #333;/*線の色*/
	top:7vw;/*ボタンボックス上からの離し具合*/
	position:absolute;/*ボタンボックスに大して絶対配置*/
	margin-left: 2.3vw;
}
.menu1, .menu2, .menu3 {/*ハンバーガーボタン線３本とも*/
	transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out; /* Opera */
	-moz-transition: all 0.5s ease-out; /* Firefox */
	-webkit-transition: all 0.5s ease-out; /* GoogleChrome, Safari */
	-ms-transition: all 0.5s ease-out; /* IE */
	/*CSSに変化があったときのアニメーション設定、すべてのプロパティ　０．５秒で　最後ブレーキをかけながら*/
	z-index:9999;
}
.menuclick1 {/*ハンバーガーボタンが押されたとき上の線*/
	top:4.5vw;/*ボタンボックス上からの離し具合*/
	-o-transform: rotate(405deg);
	-moz-transform: rotate(405deg);
	-webkit-transform: rotate(405deg);
	-ms-transform: rotate(405deg);
	transform: rotate(405deg);
	/*回転量*/
}
.menuclick2 {/*ハンバーガーボタンが押されたとき真ん中の線*/
	background-color:rgba(255,255,255,0);/*RGBA(最後がアルファ不透明度0%つまり消える)*/
}
.menuclick3 {/*ハンバーガーボタンが押されたとき下の線*/
	top:4.5vw;/*ボタンボックス上からの離し具合*/
	-o-transform: rotate(-405deg);
	-moz-transform: rotate(-405deg);
	-webkit-transform: rotate(-405deg);
	-ms-transform: rotate(-405deg);
	transform: rotate(-405deg);
	/*回転量*/
}
.navi{/*ナビボックス*/
	position: fixed;/*ウィンドウに固定*/
	font-weight: bold;/*太字*/
	display: none;/*初期設定表示しない*/
	margin-top: -17vw;/*top: 15vw;/*ウィンドウ上からどれだけ離すか、ボタンの高さ10%とボタン上の余白5%を足して横幅の15%*/
	background:rgba(157,246,251,0.8);/*ナビボックスのバック黒*/
	
	z-index: 9990;/*一番手前に*/
	text-align: center;/*中身の行揃え中央*/
	width: 100%;/*ウィンドウの横幅いっぱい*/
	height: 100%;/*ウィンドウの縦幅いっぱい*/
	
	padding-top:100px;
}

.navi li{
	padding-top: 4vw;/*ナビボタン文字上に横幅の4%余白*/
	padding-bottom: 4vw;/*ナビボタン文字下に横幅の4%余白*/
	color: #666;/*文字白*/
	font-size: 7vw;
	font-weight: bold;
	letter-spacing:0.25em;
	margin-bottom: 5vw;
	
}


.navi li a{
	padding-top: 4vw;/*ナビボタン文字上に横幅の4%余白*/
	padding-bottom: 4vw;/*ナビボタン文字下に横幅の4%余白*/
	color: #333;/*文字白*/
}

.navi li a:hover{
	color: #fff;/*文字白*/
}



/* 画像レイアウト
===================================*/

.bxslider{
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	
}

.bx-wrapper {
	position: relative;
}

.bx-wrapper img {
    width:100%;
	
}

.bx-viewport {
    max-height: auto;
}


/* ページャー
===================================*/

.bx-pager {
    text-align: center;
    bottom: 5px;
    position: absolute;
    width: 100%;
	/*display:none;*/
}

.bx-pager-item,
.bx-controls-auto-item {
    display: inline-block;

}

.bx-default-pager a {
    background: #c8ecff;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    border-radius: 5px;
}

.bx-default-pager a:hover,
.bx-default-pager a.active {
    background: #00aeff;
}





#concept {
	background-color: #F8F7F7;
	height: 143vw;
	padding-top: 10vw;
}
#cp_box {
	height: 130vw;
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	background-color: #fff;
	border: 1px solid #000;	
	
}
#cp_main {
	text-align: center;
	
}
#cp_main img {
	width: 70%;
	height: auto;
	margin-left: 7%;
	margin-top: 15vw;
}
#cp_p {
	font-size: 3vw;
	text-align: center;
	margin-top: 25vw;
	line-height: 200%;	
}



#wk_main {
	text-align: center;
}
#wk_main img {
	width: 90%;
	height: auto;
	margin-bottom: 20%;
}
#box1 {
}
.works_txt {
	text-align: center;
	font-size: 4vw;
	margin-top:10vw;
	
}

.line1 {
	width: 38%;
	background-color: #B8F2FC;
	height: 2vw;
	margin-right: auto;
	margin-left: auto;	
	margin-top: -2vw;
}
#box2 {
}
.line2 {
	
	width: 48%;
	background-color: #B8F2FC;
	height: 2vw;
	margin-right: auto;
	margin-left: auto;	
	margin-top: -2vw;
}

#box3 {
}

.line3 {
	
	width: 44%;
	background-color: #B8F2FC;
	height: 2vw;
	margin-right: auto;
	margin-left: auto;	
	margin-top: -2vw;
}


#box4 {
}
.line4 {
	
	width: 16%;
	background-color: #B8F2FC;
	height: 2vw;
	margin-right: auto;
	margin-left: auto;	
	margin-top: -2vw;
}
#com_back {
	margin-top: 10vw;
}

#box4 {
}
.line5 {
	
	width: 16%;
	background-color: #B8F2FC;
	height: 2vw;
	margin-right: auto;
	margin-left: auto;	
	margin-top: -2vw;
}




#company {
	background-color: #00a0e9;
	margin-top: -55vw;
}
#circle {
	margin-top: 17vw;
	text-align: center;
	
}
#paper_airplene {
	
	position: absolute;	
	margin-left: 42%;
	margin-top: -10vw;
}
#paper_airplene img {
	width: 35%;
	
}
#company_main {
	text-align: center;
	margin-top: 20vw;
	position: relative;	
	top: 10vw;
	
	
}
#company_main img {
	width: 45%;
}

#com_box1 {
	margin-top: 30vw;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	padding-bottom: 15%;
	
}
.com_title {
	font-size: 4.5vw;
	margin-bottom : 7vw;
	color: #FFF;
	text-align:center;
	
}

.com_txt2 {
	font-size: 3vw;
	color: #FFF;
	
}
.com_txt3 {
	font-size: 3vw;
	color: #FFF;
	
}

#com_box2 {
	margin-top: 20vw;
	margin-right: auto;
	margin-left: auto;
	width: 80%;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
	padding-bottom: 15%;
	
}
#com_box3 {
	margin-top: 20vw;
	margin-right: auto;
	margin-left: auto;
	width: 9tvxq０４０４0%;
	padding-bottom: 15%;
	
}
#googlemap iframe{
	height: 50vw;
	width: 100%;
}
#contact {
	text-align:center;
}
#contact_main {
	text-align: center;
	margin-top: 20vw;
	
}
#contact_main img {
	width: 60%;
}
#object {
	text-align: center;
	margin-top: 10vw;
}
#object img {
	width: 35%;
}
#con_p {
	margin-top: 5vw;
	font-size: 4vw;
	text-align: center;
}


#com_box1 dl {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

#com_box1 dt {
	text-align: left;
	font-size: 3vw;
	color: #FFF;
	margin-right: 5%;
	
}
#com_box1 dd {
	text-align: right;
	font-size: 3vw;
	color: #FFF;
	margin-top: -4vw;
	margin-bottom: 2vw;
}
#com2_txt {
	font-size: 3vw;
	color: #FFF;
	width: 88%;
	margin-right: auto;
	margin-left:auto;
	
}
#com3_txt {
	font-size: 3vw;
	color: #FFF;
	width: 83%;
	margin-right: auto;
	margin-left:auto;
	padding-left: 5%;
	
}
.gallery {
	float: left;
	margin-right: 3%;
	margin-bottom: 3vw;
	
}


.gallery :hover{
	opacity:0.6;
}

#manga {
	margin-right:-25%;
	
}
#poster {
	margin-right:-25%;
	
	
}
#character {
	margin-right:-25%;
	
}
#portrait {
	margin-right:-25%;
	
}
#etc {
	margin-right:-25%;
}
#manga ul {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15vw;
	padding-right: -3%;
	
}


#poster ul {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15vw;
	padding-right: -3%;
	
}

#character ul {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15vw;
	padding-right: -3%;
}

#portrait ul {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15vw;
	padding-right: -3%;
	
}


#etc ul {
	width: 84%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 15vw;
	padding-right: -3%;
	
}
#con_txt {
	font-size: 3vw;
	margin-top: 5vw;
}
#form {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10vw;
	margin-bottom: 20vw;
	text-align:left;
}
.required {
	background-color: #F30;
	color: #fff;
	text-align:center;
	border-radius: 7px;
	float:left;
	height: 5vw;
	font-size: 3vw;
	width: 10vw;
	margin-right: 2vw;
	
}

.formtxt {
	font-size:3vw;
	font-weight: bold;
	float:left;
}

input {
	border-radius: 3px;
	height: 6vw;
	width: 100%;
	border: 1px solid #999;
}


.formtxt2 {
	font-size: 3vw;
	font-weight: bold;
	
	margin-top: 4vw;
	margin-bottom: 2vw;
	
}

.con_box {
	margin-top: 5vw;
	margin-bottom:3vw;
}

textarea {
	border-radius: 3px;
	height: 30vw;
	width: 100%;
	border: 1px solid #999;
	margin-bottom: 5vw;
}

footer {
	color: #FFF;
	background-color: #333;
	text-align: center;
	height: 10vw;
	font-family: "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;
	font-size: 3vw;
	padding-top: 5vw;
}
#slide {
	margin-top: 3vw;
}


.pagetop {
	position: fixed;
	text-align: right;
	right: 2vw;
	bottom:2vw;
	}
	.pagetop a img {
	height: auto;
	width: 70%;
}