@charset "utf-8";
/* CSS Document */
* {
	text-decoration: none;
	 margin: 0;
	 padding: 0;
	-ms-overflow-style:none;
/*	scrollbar-width: none;*/

}
/* スクロールバーの設定　*/
/**::-webkit-scrollbar{
	width: 10px;
	background-color: #000000;
}*/
/**::-webkit-scrollbar-thumb {
  background-color: #C1C1C1;
}*/

html {
	overflow-x: hidden;	
}
/*ボディ開始*/
body {
	overflow-x: hidden;
	overflow-y: auto;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative;
	-webkit-box-sizing: border-box;	/*ボーダーの処理*/
   	-moz-box-sizing: border-box;
   	-ms-box-sizing: border-box;
   	-o-box-sizing: border-box;
   	box-sizing: border-box; 	/*ボーダーの処理終わり*/
	font-family: 'Noto Serif JP', serif;
	/*background-image: url(../images/bg.jpg);*/
}
/*ボディの背景画像出し分け記述*/
.no-webp body {
	background-image: url(../images/bg.jpg);
}
.webp body {
	background-image: url(../images/bg.webp);
}

/*ボディの背景画像出しわけ記述*/
.no-webp body {
	background-image: url(../images/bg.jpg);
}
.webp body {
	background-image: url(../images/bg.webp);
}
/*ボディ終了*/

/*リンク範囲の拡張*/
a  {
	display: block;
}

/*リンクの色*/
a  {
	color: #000000;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	-o-transition: color 0.3s;
	transition: color 0.3s;
}

a:visited {
	color: #676767;
}
a:hover img, #site_map_link:hover {
	opacity: 0.75;
	cursor : pointer;
	color: #0005FF;
	-webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}
#banner-section a:hover img {
	opacity: 0.75;
	-webkit-transform: translateY(-0px);
    -moz-transform: translateY(-0px);
    -ms-transform: translateY(-0px);
    -o-transform: translateY(-0px);
    transform: translateY(-0px);
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}

/*ページナビの設定*/
#page_navi ul li a, #page_navi ul li, #about_page_navi ul li a, #pege_naiv_positon_3btn ul li a {
	font-weight: bold;
	font-size: 15px;
}
#page_navi ul li:nth-child(5) {
	font-size: 15px;
}
#page_navi ul li:hover, #about_page_navi ul li:hover, #pege_naiv_positon_3btn ul li:hover, a:hover, #banner-section table:hover,#contact_open_button:hover {
	cursor : pointer;
	color: #0005FF;
	font-weight: bold;
	-webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}
/*ボタンの文字が上がらないようにする*/
#page_navi a:hover, #about_page_navi a:hover, #pege_naiv_positon_3btn a:hover {
	cursor : pointer;
	color: #0005FF;
	font-weight: bold;
	-webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	-webkit-transition: "";
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}

/*サイト説明のカテゴリーボタンの検索を中央にする*/
#page_navi li:nth-child(5){
	clear: both;
	margin-left: 60px;
}

/*サイト説明のカテゴリーボタンのお問い合わせを非表示にする*/
#about_page_navi li:last-child {
	clear: both;
	margin-left: 60px;
	display: none;
}

/*作品紹介のカテゴリーボタンのお問い合わせを非表示にする*/
#page_navi li:last-child {
	display: none;
}

/*リンクの色*/

h1, h2, h3, h4, h5, h6 {margin-top: 0;	/*見出しマージン無*/ }

img {vertical-align: bottom;	/*画像下ぞろえ*/ }

/*ulリストスタイルの全体設定*/
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
/*ヘッダー基本設定*/
#header-posi {
	position: fixed;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 6; 	/*階層6*/
	height: 92px;
	width: 100vw;
	/*background-repeat: repeat-x;*/
	/*background-image: url(../images/header.png);*/
}
#header-image {
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -960px;
	z-index: 5; 	/*階層5*/
	height: 92px;
	width: 1920px;
}

/*headerの背景画像出しわけ記述*/
/*.no-webp #header-posi {
	background-image: url(../images/header.png);
}
.webp #header-posi {
	background-image: url(../images/header.webp);
}
*/
header {
	width: 640px;
	margin: 0 auto;	
}
/*テキストの装飾*/
.light-blue {
	color: #000C6C;
	font-weight: 900;
}
.text-red {
	color: red;
	font-weight: 900;
}

/*グローバルナビ*/
#global_navi {
	width: 400px;
}

#global_navi ul{
	margin: 0;
	list-style: none;
	padding: 0; 	/*グローバルナビ基本調整*/ 
}

#global_navi ul li{
	width: 96px;
	float: left;
	margin: 42px 4px 0 0;
	text-align: center; 	/*グローバルナビフロート調整*/
}

#global_navi ul li a{
	display: block;
	padding: 5px 0 5px 0;
	background-color: #fff;
	border-radius: 14px;
	font-size: 15px;
	text-decoration: none;	/*グローバルナビデザイン調整*/
}
.current a {
	color: #113DC3;
	font-weight: 900; 	/*現在のページ色変更*/
}

/*ロゴ*/
#logo {
	width: 180px;
	float: right;
	margin-top: 11px;
}

/*パンくずリスト*/
#breadcrumb {
	width: 640px;
	margin: 0 auto;
	padding-left: 20px;
}
#breadcrumb a{
	display: inline;
}
#breadcrumb ol {
	background: #FFFFFF;
	max-width: 250px;
	font-weight: bold;
	list-style: none;
	margin: 0;
	padding: 0 10px 0 10px;
	border-radius: 15px;
	position: fixed;
	top: 92px;
	z-index: 5; 	/*階層5*/

}

#breadcrumb ol li { display: inline; }

/*パンくずリスト矢印追加*/
#breadcrumb ol li::after{
	content: ">";
	padding-left: 7px;
}
#breadcrumb ol li:last-child::after { content: none;}


/*ラッパー*/
#wrapper {
	width: 640px;
	margin: 0px auto 20px auto;
}

/*ページナビ*/
#page_navi ul li, #about_page_navi, #link_page_navi_3btn ul li {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
/*4ボタンページリンク位置調*/

#pege_naiv_positon {
	-webkit-touch-callout:none;
	-moz-touch-callout:none;
	-ms-touch-callout:none;
	-o-touch-callout:none;
	touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
	width: 320px;
	position: fixed;
	top: 130px;
	z-index: 2; 	/*階層2*/
}
#page_navi, #about_page_navi {
	width: 226px;
	height: 76px;
	margin: 0 auto;
}
#page_navi ul li, #about_page_navi ul li {
	float: left;
}
/*ボタンの基本装飾*/
#page_navi ul li, #about_page_navi ul li, #contact-button, .close_button,.reset-button, .reset-button02, #contact_open_button,#content_close_button {
	width: 100px;
	text-align: center;
	display: block;
	background-color: #fff;
	border: solid 3px #9A0002;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
}

/*liのボタンの追加装飾*/
#page_navi ul li, #about_page_navi ul li {
	font-size: 12px;
	margin: 2px 2px 2px 5px;
	padding: 5px 0;
}

.link-posi-four {
	width: 320px;
	margin: 0 auto;
	padding-top: 175px;
	margin-top: -175px;
}
/*３ボタンページリンク位置調節*/


#pege_naiv_positon_3btn {
	-webkit-touch-callout:none;
	-moz-touch-callout:none;
	-ms-touch-callout:none;
	-o-touch-callout:none;
	touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
	width: 320px;
	position: fixed;
	top: 130px;
	z-index: 2; 	/*階層2*/
}
#link_page_navi_3btn {
	width: 220px;
	height: 38px;
	margin: 0 auto;
}
#link_page_navi_3btn ul {
}
#link_page_navi_3btn ul li {
	width: 100px;
	float: left;
	margin: 2px;
	text-align: center;
	display: block;
	font-size: 12px;
	padding: 5px 0;
	background-color: #fff;
	border: solid 3px #9A0002;
	border-radius: 10px;
	text-decoration: none;
}
#link_page_navi_3btn ul li:nth-child(3) {
	clear: both;
	margin-left: 60px;
}
#link_page_navi_3btn ul li:last-child {
	display: none;
}
.link-posi {
	padding-top: 140px;
	margin-top: -140px;
}

/*divで作成したボタンのpタグの設定*/
#contact-button p, .close_button p, #content_close_button p {
	font-size: 15px;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
/*メイン基本設定*/
#main {
	width: 320px;
}

#main-left-02 {
	float: left;
}

/*文章の外枠*/
.contents_balloon, .contents_balloon_top, .contents_balloon_top02, #contact_balloon{
	width: 270px;
	padding: 15px;
	line-height: 1.65;
	background-color: #fff;
	border-radius: 20px;
	margin: 0 auto;
	box-shadow: 4px 4px 2px #474747;
	text-align: center;
}
.contents_balloon h1, .contents_balloon h3, .contents_balloon_top h1, .contents_balloon_top02 h1 {
	text-align: center;
	margin-top: 5px;
	font-size: 18px;
}
.contents_balloon p,dl, .contents_balloon_top p, .contents_balloon_top02 p, #contact_balloon p {
	display: inline-block;
	text-align: left;
	line-height: 2;
	margin-bottom: 4px;
}
.contents_balloon-ex p {
	margin-bottom: 30px;
}

#contact_balloon a{
	margin-bottom: 15px;
}


/*サイト説明のcss開始*/
/*ページ説明文と画像*/
.contents_balloon_top02 {
	margin-top: 234px;
}
#top_coordinate {
	height: 1px;
	margin-top: 40px;
}
.contents_balloon_top {
	margin-top: 234px;
}

/*サイトについて*/
/*巻物*/
#site {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/about.png);*/
}
/*の背景画像出し分け記述*/
.no-webp #site {
	background-image: url(../images/about.png);
}
.webp #site {
	background-image: url(../images/about.webp);
}

/*飛び出すフレームの基本設定*/
#popup-frame {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	background-color: #fff;
	z-index: 9;
	border: #8debff solid 3px;
	text-align: center;
	height: 80%;
	width: 640px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-top: 41px;
}
#form-inner {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}
#contact_open_button {
	margin: 20px auto 10px auto;
	padding: 3px 10px;
}


#site-map-inner {
	height: 100%;
	width: 640px;
	background-color: #fff;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-overflow-scrolling: touch;
}

/*飛び出すフレームのタイトルボタン*/
#popup_frame_title {
	position: fixed;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	z-index: 12;
	right: 0;
	background: rgb(162,239,255);
	background: -moz-linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	background: linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a2efff",endColorstr="#e3fbff",GradientType=1);
	border: #8debff solid 3px;
	width: 640px;
	padding: 5px 0;
}
#popup_frame_title h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/*検索ボックスの設定*/
#search-box-frame {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 9;
	margin-bottom: 30px;
}
#search-box-inner {
	margin:0;
	width: 100%;
	max-width: 320px;
	height: 438px;
	max-height: 64vh;
	background-color: #fff;
	border: #8debff solid 3px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-bottom: 30px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: center;
}

#search-box-inner p {
	font-weight: 700;
}
#search-box-p01 p, #search-box-p02 p {
	display: inline-block;
	text-align: left;
}
#search-box-p01 {
	margin-top: 25px;
}
#search-box-p02 {
	margin: 10px 0;
}
#search-box-inner table {
	width: 280px;
	margin: 0 auto 20px auto;
}

#search-box-inner td {
	font-weight: 700;
	text-align: left;
}
.checkbox-text {
	margin-left: 20px;
}
#search-box-inner label {
	line-height: 1.7em;
	background-color: #fff;
	box-shadow: 4px 4px 2px rgba(0,0,0,0.3);
	border-radius: 10px;
	display: inline-block;
	width: 130px;
	height: 30px;
	padding: 5px;
	margin-bottom: 5px;
}

#search-box-inner label:hover {
	background-color: #95FFE9;
}
/*検索ボックスのタイトルの設定*/
#search-box-title {
	display: none;
	width: 100%;
	height: 38px;
	background: rgb(162,239,255);
	background: -moz-linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	background: linear-gradient(0deg, rgba(162,239,255,1) 0%, rgba(227,251,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a2efff",endColorstr="#e3fbff",GradientType=1);
	padding: 5px 0;
}
#search-box-title h2 {
	display: inline-block;
	text-align: center;
	margin-left: 60px;
}
/*検索ボックスのボタンの設定*/
.reset-button {
	padding: 4px 0;
	float: left;
}
.reset-button02 {
	float: right;
	line-height: 2;
	width: 50px;
	height: 31px;
	padding: 0;
	margin-right: 19px;
}

#search-button-frame {
	width: 240px;
	height: 40px;
	margin: 0 auto;
}
.close_button, #content_close_button {
	padding: 0;
	width: 50px;
	height: 31px;
	line-height: 2;
}
/*飛び出すフレームのバックグラウンド*/
#popup-frame-bg, #popup-frame-bg2, #popup-frame-bg3 {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 8;
	background: #000000;
	opacity: 0.8;

}

#search-box-title .close_button, #popup_frame_title .close_button, #content_close_button {
	float: right;
}
#contact-button {
	margin: 0 auto 15px auto;
}
.close_button:hover, .reset-button:hover, .reset-button02:hover, #content_close_button:hover {
	cursor : pointer;
	color: #0005FF;
	font-weight: bold;
	-webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
	-webkit-transition: "";
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}


/*自己紹介*/
/*巻物*/
#profile {
	width: 250px;
	height: 80px;
	margin: 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/profile.png);*/
}
/*の背景画像出し分け記述*/
.no-webp #profile {
	background-image: url(../images/profile.png);
}
.webp #profile {
	background-image: url(../images/profile.webp);
}

/*説明*/
/*プロフィール用のdl*/
#profile_contents dl {
	margin-left: 15px;
	line-height: 1.75;
}
#profile_contents dt {
	font-weight: bold;
}
#profile_sec p {
	text-align: center;
}

/*作品について*/
/*巻物*/
#work {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/work.png);*/
}
/*作品についての背景画像出し分け記述*/
.no-webp #work {
	background-image: url(../images/work.png);
}
.webp #work {
	background-image: url(../images/work.webp);
}

/*リンクについて*/
#link_sec {
	margin-bottom: 40px;
}
/*巻物*/
#link {
	width: 250px;
	height: 80px;
	margin: 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/link.png);*/
}
/*リンクについての背景画像出し分け記述*/
.no-webp #link {
	background-image: url(../images/link.png);
}
.webp #link {
	background-image: url(../images/link.webp);
}

.link_center {
	text-align: center;
	width: 270px;
}
.shell_beach_banner img {
	margin:  0 20px 30px 20px;
}

/*サイト説明のcss終了*/

/*リンクのcss開始*/

/*リンク用上部余白*/
#mermaid_link{
	margin-top: 195px;
}

/*h1の説明文と画像*/
#mermaid_link {
	height: 230px;
	background-image: url(../images/mermaid_about.gif);
	background-repeat:no-repeat; 
	position: relative;
}
#mermaid_link h1 {
	position: absolute;
	top: 14px;
	left: 60px;
	font-size: 17px;
	line-height: 1.75;
	font-weight: bold;
}
#mermaid_link p {
	position: absolute;
	top: 30px;
	left: 34px;
	font-size: 16px;
	line-height: 1.45;
	font-weight: bold;
	color: #FF0000;
}

/*素材サイト*/
/*巻物*/
#material {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/link_material.png);*/
}
/*素材サイトの背景画像出し分け記述*/
.no-webp #material {
	background-image: url(../images/link_material.png);
}
.webp #material {
	background-image: url(../images/link_material.webp);
}

#material_sec h3 {
	margin-top: 20px;
	font-size: 16px;
}
#material_link a {
	width: 200px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
	background-color: #fff;
	border: solid 3px #10721B;
	border-radius: 10px;
	text-decoration: none;
}

/*ゲームサイト*/
/*巻物*/
#game_sec h2 {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
/*ゲームサイトの背景画像出し分け記述*/
.no-webp #game_sec h2 {
	background-image: url(../images/link_game.png);
}
.webp #game_sec h2 {
	background-image: url(../images/link_game.webp);
}

#game_sec h3 {
	margin-top: 20px;
	font-size: 16px;
}

/*その他のリンク*/
/*巻物*/
#sonota_sec h2 {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/link_sonota.png);*/
}
/*その他のリンクの背景画像出し分け記述*/
.no-webp #sonota_sec h2  {
	background-image: url(../images/link_sonota.png);}
.webp #sonota_sec h2  {
	background-image: url(../images/link_sonota.webp);}

#sonota_sec h3 {
	margin-top: 20px;
	font-size: 16px;
}

#sonota_sec {
	margin-bottom: 40px;
}
#sonota_sec img:nth-child(1){
	border: #707070 solid 2px;
}
/*リンクのcss終了*/

/*作品紹介のcss開始*/
.gallery_caption {
	background-color: #fff;
	border-radius: 20px;
	padding: 10px 0;
	text-align: center;
	margin-bottom: 40px;	
}
/*作品紹介のcss終了*/

#side_content {
	float: right;
	width: 320px;
}
/*お問い合わせのcss開始*/
#contact_sec {
	width: 320px;
	margin-top: 132px;
	margin-left: 12px;
	padding: 0;
	height: 550px;
}
.display-nene {
	display: none;
}
/*吹き出しの基本設定*/
.fukikuti {
	position: relative;
	top: 135px;
	left: 10px;
    content: "";
    border: 10px solid transparent;
    border-right: 50px solid #FFFFFF;
    -webkit-transform: rotate(290deg);
    -moz-transform: rotate(290deg);
    -ms-transform: rotate(290deg);
    -o-transform: rotate(290deg);
    transform: rotate(290deg);
}

#contact-img img {
	width: 320px;
	height: 410px;
	margin: -5px auto auto 0;
}

#contact_balloon a {
	cursor : pointer;
	text-align: center;
	margin: 2px auto;
	display: block;
	font-size: 15px;
	padding: 5px 0;
	background-color: #fff;
	border: solid 3px #9A0002;
	border-radius: 10px;
	text-decoration: none;
	
}
#contact_balloon p {
	margin-top: 12px;
	text-align: center;
}
#contact_balloon a {
	width: 100px;
	margin-bottom: 20px;
}
#contact-img img {
	width: 320px;
	height: 410px;
	margin: -5px auto auto 0;
}

/*お問い合わせのcss終了*/


/*バナーのcss開始*/
#banner-index {
	width: 640px;
	margin: 0 auto;
}
#banner-index ul {
	width: 640px;
	margin: 0 auto;
}
#banner-index ul li{
	width: 250px;
	height: 250px;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 42%, rgba(212,212,212,1) 86%, rgba(177,177,177,1) 100%);
	float: left;
	margin: 50px 30px;
	position: relative;
}
#banner-index ul li p{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 200px;
  text-align: center;/*一応BOX内の文字も中央寄せ*/
}
/*indexのcss開始*/

/*galleyなどのcss開始*/
#banner-section {
	width: 320px;
	padding: 0;
	float: right;
}
#banner-section ul{
	width: 320px;
	margin: 70px auto 70px 12px;
}

#banner-section ul li{
	width: 300px;
	height: 250px;
	background: rgb(255,255,255);
	background: linear-gradient(180deg, rgba(255,255,255,1) 42%, rgba(212,212,212,1) 86%, rgba(177,177,177,1) 100%);
	margin: 30px 10px;
	position: relative;
}
#banner-section table {
	background: rgb(255,255,255);
	border-radius: 20px;
}
#banner-section ul li p {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform : translate(-50%,-50%);
  transform : translate(-50%,-50%);
  width: 150px;
  text-align: center;/*一応BOX内の文字も中央寄せ*/
}
/*バナーのcss終了*/

/*フッター*/
#footerbg {
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100vw;
	z-index: 2;
	clear: both;
	/*background-repeat: repeat-x;*/
	/*background-color: #333333;*/
	height: 100px;
	/*background-position: bottom;*/
	/*background-image: url("../images/footer.png");*/
}

/*の背景画像出しわけ記述*/
/*.no-webp #footerbgo {
	background-image: url("../images/footer.png");
}
.webp #footerbg {
	background-image: url("../images/footer.webp");
}*/
footer {
	width: 640px;
	margin: 0 auto;
	padding-top: 25px;
}
#footer-image {
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -960px;
	height: 100px;
	width: 1920px;
}
#contact {
	width: 100px;
	float: left;
	padding: 5px 0 5px 0;
	background-color: #fff;
	border-radius: 14px;
	text-align: center;
}
#contact a {
	font-size: 13px;
	text-decoration: none;
	text-align: center;
}
#contact:hover {
	-webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}
#copyright {
	color: #ceaa00;
	font-weight: bold;
	text-align: center;
	margin-top: 12px;
}
.fuwafuwa {
-webkit-animation:fuwafuwa 3200ms infinite linear alternate;
-ms-animation:fuwafuwa 3200ms infinite linear alternate;
-moz-animation:fuwafuwa 3200ms infinite linear alternate;
-o-animation:fuwafuwa 3200ms infinite linear alternate;
animation:fuwafuwa 3200ms infinite linear alternate;
}
@-webkit-keyframes fuwafuwa {
0% {transform:translate(0, 10px);}
50% {transform:translate(0, 0);}
100% {transform:translate(0, -10px);}
}

@keyframes fuwafuwa {
0% {transform:translate(0, 10px);}
50% {transform:translate(0, 0);}
100% {transform:translate(0, -10px);}
}

/* マーキング */
.ring-blue, .ring-magenta, .ring-yellow, .ring-yellow , .ring-navy-blue, .ring-orange, .ring-green, .ring-pink, .ring-pink, .ring-red, .ring-purple, .ring-cyan2 {
	border-radius: 100px;
	height: 50px;
	width: 50px;
	margin: 0 auto;
	position: absolute;
   	-webkit-animation: pulsate 1.3s ease infinite;
   	-ms-animation: pulsate 1.3s ease infinite;
   	-moz-animation: pulsate 1.3s ease infinite;
   	-o-animation: pulsate 1.3s ease infinite;
   	animation: pulsate 1.3s ease infinite;
	}


/* イラスト */
.ring-blue {
	background: rgba(0, 0, 255, 0.5);
}
/* マンガ */
.ring-magenta {
	background: rgba(228, 0, 127, 0.5);
}
/* gif */
.ring-yellow {
	background: rgba(255, 241, 0, 0.5);
}
/* 3D回転 */
.ring-navy-blue {
	background: rgba(0, 2, 128,0.5);
}
/* 動画 */
.ring-orange {
	background: rgba(230, 84, 0, 0.5);
}
/* 風景 */
.ring-green {
	background: rgba(0, 120, 0, 0.5);
}
/* 女性 */
.ring-pink {
	background: rgba(255, 107, 187 , 0.5);
}
/* 動物 */
.ring-red {
	background: rgba(255, 0, 0, 0.5);
}
/* ロボット */
.ring-purple {
	background: rgba(186, 0, 255, 0.8);
}
/* その他 */
.ring-cyan2 {
	background: rgba(181, 244, 253, 0.5);
}

@-webkit-keyframes pulsate {
    0%   { 
		transform: scale(0.1, 0.1);
	}
    50%  {
		opacity: 1; 
	}
    100% {
		transform: scale(1.2, 1.2);
		opacity: 0.0;
		border-radius: 0px;
	}
}
@-moz-keyframes pulsate {
    0%   { 
		transform: scale(0.1, 0.1);
	}
    50%  {
		opacity: 1; 
	}
    100% {
		transform: scale(1.2, 1.2);
		opacity: 0.0;
		border-radius: 0px;
	}
}
@-o-keyframes pulsate {
    0%   { 
		transform: scale(0.1, 0.1);
	}
    50%  {
		opacity: 1; 
	}
    100% {
		transform: scale(1.2, 1.2);
		opacity: 0.0;
		border-radius: 0px;
	}
}
@keyframes pulsate {
    0%   { 
		transform: scale(0.1, 0.1);
	}
    50%  {
		opacity: 1; 
	}
    100% {
		transform: scale(1.2, 1.2);
		opacity: 0.0;
		border-radius: 0px;
	}
}


/*アンカー用*/

/*トップ用*/
#side_navi_anchor, #illustbox_anchor, #sns_anchor {
	position: absolute;
    padding-top: 200px;
    margin-top: -200px;
}
#info_anchor {
	position: absolute;
    padding-top: 240px;
    margin-top: -240px;
}
#contact_anchor {
	position: absolute;
    padding-top: 250px;
    margin-top: -250px;
}
#contact_anchor-ex {
	position: absolute;
    padding-top: 210px;
    margin-top: -210px;
}
/*作品紹介用用画像*/
#nizi_anchor, #sanzi_anchor, #drawing_anchor, #photo_anchor {
	position: absolute;
    padding-top: 310px;
    margin-top: -310px;
}

/*作品説明用とリンク案内用画像*/
#site_anchor, #profile_anchor, #work_anchor, #link_anchor,#material_anchor, #game_anchor, #sonota_anchor{
	position: absolute;
	padding-top: 210px;
    margin-top: -210px;
}

/*作品紹介のcss開始*/
/*サムネイルの基本設定*/
.gallery_caption {
	margin-bottom: 10px;
}
.thum {
	width: 280px;
	height: auto;
	margin: 30px auto;
	padding: 0;
}
.thum ul {
	width: 280px;
	list-style: none;
	padding: 0;
}

.thum ul li {
	float: left;
	margin: 0 10px 10px 10px;
}
/*サムネイルの角を丸く*/
.thum img {
	border-radius: 10px;
}
/*NEW!の装飾*/
.thum h4 {
	margin: 0;
	padding: 0 0 0 0.8em;
	width: 50px;
	color: #FF0000;
	font-size: 22px;
	letter-spacing: 0.1em;
	 /* 5秒かけてアニメーションする */
	-webkit-animation-duration: 6s;
	-moz-animation-duration: 6s;
	-ms-animation-duration: 6s;
	-o-animation-duration: 6s;
	animation-duration: 6s;
}

/*float解除用*/
.thum:after {
	display: block;
	clear: both;
	content: "";
}

/*作品紹介のcss開始*/

/*二次元*/
/*巻物*/
#nizigen {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/2dcg.png);*/
}
/*二次元の背景画像出し分け記述*/
.no-webp #nizigen {
	background-image: url(../images/2dcg.png);
}
.webp #nizigen {
	background-image: url(../images/2dcg.webp);
}

/*三次元*/
/*巻物*/
#sanzigen {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/3dcg.png);*/
}

/*三次元の背景画像出し分け記述*/
.no-webp #sanzigen {
	background-image: url(../images/3dcg.png);
}
.webp #sanzigen {
	background-image: url(../images/3dcg.webp);
}

/*素描*/
/*巻物*/
#drawing {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/drawing.png);*/
}
/*素描の背景画像出し分け記述*/
.no-webp #drawing {
	background-image: url(../images/drawing.png);
}
.webp #drawing {
	background-image: url(../images/drawing.webp);

}

/*写真*/
/*巻物*/
#photo_sec {
	margin-bottom: 40px;
}
#photo {
	width: 250px;
	height: 80px;
	margin: 20px auto 20px auto;
	background-repeat: no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	/*background-image: url(../images/photo.png);*/
}
/*写真の背景画像出し分け記述*/
.no-webp #photo {
	background-image: url(../images/photo.png);
}
.webp #photo {
	background-image: url(../images/photo.png);
}
/*作品紹介のcss終了*/

/*レスポンシブの設定*/
@media screen and (max-width : 640px){

	header {
		max-width: 640px;
		width: 96vw;
	}
	#global_navi {
		width: 180px;
		margin-top: 9px;
		margin-left: 12px;
		
	}

	#global_navi ul li{
		width: 86px;
		float: left;
		margin: 10px 4px 0 0;
		text-align: center; 	/*グローバルナビフロート調整*/
	}
	#global_navi ul li a{
		padding: 2px 0 2px 0;
		border-radius: 14px; 	/*グローバルナビデザイン調整*/
 	}
	/*640px以下のロゴの設定*/
	#logo {
		width: 180px;
		margin-top: -30px;
		margin-right: 10px;
	}
/*	#logo img {
		max-width: 100%;
	}
*/	/*パンくずリスト*/
	#breadcrumb {
		width: 640px;
		float: left;
		margin-left: -3px;
	}
		/*フッター*/
	footer {
		width: 320px;
		padding-top: 18px;
		margin-bottom: 30px
	}
	#contact {
	margin: 0 auto 0px auto;
	float: none;
	width: 100px;
	padding: 5px 0 5px 0;
	background-color: #fff;
	border-radius: 14px;
	text-align: center;
	}
	footer p {
		margin-bottom: 20px;
	}

	#wrapper {
		width: 320px;
	}
	/*ページ説明文と画像*/
	.contents_balloon_top02 {
		margin-top: 234px;
	}
	#top_coordinate {
		height: 0;
		margin: 0;
	}
	.contents_balloon_top {
		margin-top: 275px;
	}
	
	/*ページナビ4ボタンの設定変更*/
	#page_navi li:nth-child(5){
		float: left;
		margin-left: 5px;
	}
	#page_navi ul li:last-child, #about_page_navi ul li:last-child {
	display: inherit;
	}
	/*ページナビ3ボタンの設定変更*/
	#link_page_navi_3btn ul li:last-child {
		display: inherit;
	}
	#link_page_navi_3btn ul li:nth-child(3) {
	float: left;
	margin-left: 0px;
	}
	#main-left-02, #side_content, #banner-index ul li {
		clear: both;
	}
	#contact_sec {
		margin-top: 0;
		margin-left: 0;
		padding-top: 0;
	}
	#banner-index  {
		width: 320px;
		margin: 0 auto;
	}
	#banner-section ul{
		margin: 70px auto;
	}
	#banner-index ul li {
		margin-top: 0px;
	}
	#popup-frame {
		width: 95vw;
	}
	#site-map-inner {
		width: 95vw;
	}
	#popup_frame_title {
		width: 95vw;
	}
	#form-inner {
		width: 95vw;
	}
	#search-box-inner {
		max-height: 80vh;
	}
	/*作品説明用アンカー*/
	#site_anchor, #profile_anchor, #work_anchor, #link_anchor{
	position: absolute;
	padding-top: 250px;
	margin-top: -250px;
	}
}

@media screen and (max-height : 435px){
	#popup_frame_title {
	position: fixed;
		top: 0%;
	}
}


/*400px以下のロゴの設定*/
@media screen and (max-width : 400px){
	/*ロゴ*/
	#logo {
		width: 105px;
		margin-top: -14px;
		margin-right: 10px;
	}
	#logo img {
		max-width: 100%;
	}
	#breadcrumb {
		width: 640px;
		float: left;
	}
}