@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Crimson+Text:600);

/*
============================================================
index.css
------------------------------------------------------------
■ 上書き
■ 共通
■ top
■ Product 大カテゴリ
■ kaku,enn
■ about ornithopter
■ sound and scenery
■ oscilloglass
■ ake,yoi
■ about oscilloglass
■ about us
============================================================
*/

/* ---------------------------------------------------------
■ 上書き
--------------------------------------------------------- */
#sidenavi {
	margin: 0 0 0 93px;
}

/* ---------------------------------------------------------
■ 共通
--------------------------------------------------------- */
div.page {
	padding: 50px 0 0 0;
	margin: 0 0 20px 0;
}


h2 {
	font-family: Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
	font-size: 20px;
	border-left: 9px solid #CCCCCC;
	padding-left: 20px;
	line-height: 1em;
}

@media screen and (max-width:700px){
	div.page {
		padding: 20% 0 0 0 !important;
		margin: -10% 0 10% 0;
	}
}

/* ---------------------------------------------------------
■ top (16.11.22 top movie 変更に合わせ修正)
--------------------------------------------------------- */
div#top {
	padding: 0;
	margin: 0 0 180px 10px;

/*---
16.11.22 0 0 70px 90px -> 0 0 70px 10px
17.5.31 0 0 70px 10px -> 0 0 180px 10px
----*/

	width: 610px;

/*---
16.11.22 450px -> 610px
---*/

}

div#top h2 {
	width: 610px;

/*---
16.11.22 450px -> 610px
---*/

	height: 450px;
	border: none;
	padding: 0;
	background: url(../img/top/flash_img.jpg) center no-repeat;
	overflow: hidden;

/*---
16.11.22 追加 overflow: hidden;
---*/

}

div#top h2 video {
	position: relative;
	top: 50%;
	left: 50%;
	width: auto;
	height: 100%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);

/*---
16.11.22 video内全部変更
	{
	width: 100%;
	height: auto;
	}
---*/

}

div#top h2 ul {
	width: 450px;
	height: 450px;
	position: relative;
	overflow: hidden;
	background: #FFFFFF;
}

div#top h2 ul li {
	position: absolute;
	display: none;
}

div#top div {
	text-align: center;
	color: #444444;
	font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
	font-size: 12px;
}

div#top div p {
	line-height: 1.7;
	letter-spacing: 1px;
}

/* english用ここから */


#english div#top div {
	text-align: center;
	color: #444444;
	font-family: "Crimson Text", Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
	font-size: 13px;
}

/* english用ここまで */

@media screen and (max-width:700px){	
	div#top {
		padding: 0 !important;
		margin: 0 auto 10%;
		width: 100%;
	}
	
	div#top h2 {
		width: 92%;
		height: auto;
		margin: auto;
		background-size: contain;
	}
	
	div#top h2 video {
		display: none;
	}
	
	div#top div {
		margin: 4% auto 0;
		font-size: 14px;
	}
}

/* ---------------------------------------------------------
■ Product 大カテゴリ
--------------------------------------------------------- */

.product .ph {
	position: relative;
	overflow: hidden;
}

.product .ph:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 200px;
	left: 0;
	bottom: -15px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,ffffff+80&0+0,1+80 */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjAuMDEiLz4KICAgIDxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 1%, rgba(255,255,255,1) 80%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.01)), color-stop(80%,rgba(255,255,255,1))); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 80%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 80%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 80%); /* IE10 preview */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.01) 1%,rgba(255,255,255,1) 80%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */

}

.product .tx {
	position: relative;
	left: 0;
	top: -60px;
	padding: 0 20px;
}

.product .tx p {
	font-size: 13px;
	line-height: 1.7;
	margin: 0 20px !important;
}

.product .tx .note {
	font-size: 10px;
	line-height: 2;
	padding: 60px 20px 20px;
}
.product .tx .noteLarge {
	font-size: 13px;
	line-height: 2;
	padding: 60px 20px 20px;
}

@media screen and (max-width:700px){	
	.product .ph {
		width: 100%;
	}
	
	.product .ph:after {
		bottom: -35px;
	}
		
	.product .ph img {
		width: 100%;
		height: auto;
	}
		
	.product .tx {
		padding: 0 2%;
		bottom: 20px;
		top: inherit;
	}
	
	.product .tx p {
		margin: 0 2% 10% 0 !important;
	}

	.product .tx .note {
		padding: 0;
		font-size: 12px;
	}

}

/* ---------------------------------------------------------
■ kaku,enn
--------------------------------------------------------- */
div.kaku div.ph_area {
	width: 630px;
	float: left;
	margin: 0 0 30px 0;
}

div.kaku div.ph_area div.ph_l {
	width: 545px;
	float: left;
}

div.kaku div.ph_area ul {
	width: 71px;
	float: right;
}

div.kaku div.ph_area ul li {
	margin: 0 0 6px 0;
	font-size: 0;
}

div.kaku div.ph_area ul li.li_b_01 {
	margin: 0 0 7px 0;
}

div.kaku div.ph_area ul li.li_b_02 {
	margin: 0;
}

@media screen and (max-width:700px){	
	div.kaku div.ph_area {
		width: 100%;
		float: none;
		margin: 0 auto 30px;
	}
	
	div.kaku div.ph_area div.ph_l {
		width: 100%;
		float: none;
	}
	
	div.kaku div.ph_area div.ph_l img {
		width: 100%;
		height: auto;
	}
	
	div.kaku div.ph_area ul {
		width: 100%;
		float: none;
		overflow: hidden;
	}
	
	div.kaku div.ph_area ul li,
	div.kaku div.ph_area ul li.li_b_01,
	div.kaku div.ph_area ul li.li_b_02 {
		width: 18%;
		margin: 3% 0 2% 2%;
		float: left;
	}
	
	div.kaku div.ph_area ul li:first-child {
		margin-left: 1%;
	}
	
	div.kaku div.ph_area ul li img {
		width: 100%;
		height: auto;
	}
}


div#content div.kaku p.tx {
	margin: 0 0 40px 0;
}

div.kaku > p {
	font-size: 13px;
	line-height: 1.8;
}

div.kaku div.info {
	width: 630px;
	float: left;
	margin: 0 0 25px 0;
}

div.kaku div.info div.info_l {
	float: left;
	width: 335px;
}

div.kaku div.info div.info_l dl {
	width: 335px;
	float: left;
	margin: 0 0 10px 0;
}

div.kaku div.info div.info_l dl.dl_b {
	margin: 0 0 70px 0;
}

div.kaku div.info div.info_l dl dt {
	float: left;
	width: 50px;
	font-weight: bold;
}

div.kaku div.info div.info_l dl dd {
	float: right;
	width: 275px;
}

/* english用ここから */
	#english div.kaku div.info div.info_l dl dt {
		float: left;
		width: 80px;
		font-weight: bold;
	}
	
	#english div.kaku div.info div.info_l dl dd {
		float: right;
		width: 245px;
	}
/* english用ここまで */

div.kaku div.info div.info_l a.bt_detail {
	padding: 5px 20px 5px 30px;
	background: #cc0000 url(../img/common/ic_detail.gif) no-repeat 10px 8px;
	color: #ffffff;
	text-decoration: none;
}

div.kaku div.info div.info_l a.bt_detail_on {
	padding: 5px 20px 5px 30px;
	background: #dad9d9 url(../img/common/ic_detail_on.gif) no-repeat 10px 8px;
	color: #333333;
	text-decoration: none;
}

div.kaku div.info div.info_l a:hover {
	text-decoration: underline;
}

div.kaku div.info div.info_r {
	float: right;
	width: 285px;
}

@media screen and (max-width:700px){	
	div.kaku div.info {
		width: 100%;
		float: none;
		margin: 0 0 4% 0;
	}
	
	div#content div.kaku div.fr_detail p.font_big.bold {
		margin-top: -webkit-calc(-5% + -50px);
		margin-top: calc(-5% + -50px);
		padding-top: -webkit-calc(5% + 50px);
		padding-top: calc(5% + 50px);
	}
	
	div.kaku div.info div.info_l {
		float: none;
		width: 100%;
	}
	
	div.kaku div.info div.info_l dl {
		width: 100%;
		float: none;
		margin: 0 0 2% 0;
	}
	
	div.kaku div.info div.info_l dl.dl_b {
		margin: 0 0 4% 0;
	}
	
	div.kaku div.info div.info_l dl dt {
		float: none;
		width: 100%;
		font-weight: bold;
	}
	
	div.kaku div.info div.info_l dl dd {
		float: none;
		width: 100%;
	}
	
	/* english用ここから */
		#english div.kaku div.info div.info_l dl dt {
			float: none;
			width: 100%;
			font-weight: bold;
		}
		
		#english div.kaku div.info div.info_l dl dd {
			float: none;
			width: 100%;
		}
	/* english用ここまで */
	
	div.kaku div.info div.info_l a.bt_detail {
		padding: 5px 20px 5px 30px;
		background: #cc0000 url(../img/common/ic_detail.gif) no-repeat 10px 8px;
		color: #ffffff;
		text-decoration: none;
	}
	
	div.kaku div.info div.info_l a.bt_detail_on {
		padding: 5px 20px 5px 30px;
		background: #dad9d9 url(../img/common/ic_detail_on.gif) no-repeat 10px 8px;
		color: #333333;
		text-decoration: none;
	}
	
	div.kaku div.info div.info_l a:hover {
		text-decoration: underline;
	}
	
	div.kaku div.info div.info_r {
		float: none;
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		margin: 0 0 4%;
	}
	
	div.kaku div.info div.info_r iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}

}

div.kaku div.fr_detail {
	border: 1px solid #dad9d9;
	padding: 20px;
	margin: 0 0 25px 0;
}

div#content div.kaku div.fr_detail p {
	margin: 0 0 15px 0;
}

div#content div.kaku div.fr_detail p.list {
	margin: 0 0 25px 0;
}

div#content div.kaku div.fr_detail p.spec {
	margin: 0 0 10px 0;
}

div.kaku div.fr_detail dl {
	float: left;
	width: 285px;
	margin: 0 0 40px 0;
}

div.kaku div.fr_detail dl.dl_r {
	float: right;
}

div.kaku div.fr_detail dl dt {
	margin: 0 0 15px 0;
	padding: 5px 10px;
	background: #dfdfdf;
}

div.kaku div.fr_detail p.ph {
	margin: 0;
}

div.kaku div.fr_detail p.ph img {
	float: left;
	margin: 0 10px 0 0;
}

@media screen and (max-width:700px){	
	div.kaku div.fr_detail {
		border: 1px solid #dad9d9;
		padding: 4%;
		margin: 0 0 4% 0;
	}
	
	div#content div.kaku div.fr_detail p {
		margin: 0 0 2% 0;
	}
	
	div#content div.kaku div.fr_detail p.list {
		margin: 0 0 4% 0;
		position: relative;
		z-index: 1;
	}
	
	div#content div.kaku div.fr_detail p.spec {
		margin: 0 0 2% 0;
	}
	
	div.kaku div.fr_detail dl {
		float: none;
		width: 100%;
		margin: 0 0 4% 0;
	}
	
	div.kaku div.fr_detail dl.dl_r {
		float: none;
	}
	
	div.kaku div.fr_detail dl dt {
		margin: 0 0 2% 0;
		padding: 2% 4%;
		background: #dfdfdf;
	}
	
	div.kaku div.fr_detail dl dd {
		position: relative;
		width: 100%;
		padding-top: 56.25%;
	}
	
	div.kaku div.fr_detail dl dd iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
	}
	
	div.kaku div.fr_detail p.ph {
		margin: 0;
	}
	
	div.kaku div.fr_detail p.ph img {
		float: none;
		margin: 0;
	}
}


/* ---------------------------------------------------------
■ about ornithopter (2016/11/22 .bg に margin: 0 0 180px 0; 追加)
--------------------------------------------------------- */

#about_ornithopter .bg {
	background: url(../img/about_ornithopter/about_ornithopter_bg.jpg) center no-repeat;
	background-size: cover;
	margin: 0 0 180px 0;
	padding: 20px;
	-webkit-box-shadow: inset 0px 0px 10px 5px #ffffff;
	box-shadow: inset 0px 0px 10px 5px #ffffff;

	
}

#about_ornithopter .tx {
	background: #FFFFFF\9;
	background: rgba(255,255,255,0.8);
	overflow: hidden;
	margin: 10px;
	padding: 20px;
}

#about_ornithopter .tx p {
	margin: 0 5px 25px;
	line-height: 1.7;
}


@media screen and (max-width:700px){
		
	#about_ornithopter .bg {
		padding: 4%;
	}

	#about_ornithopter .tx {
		padding: 4%;
		margin: 2%;
	}
	
	#about_ornithopter .tx p {
		margin: 0 5px 25px;
		line-height: 1.5;
	}

	
	#about_ornithopter img {
		width: 100%;
		height: auto;
	}
}


/* ---------------------------------------------------------
■ sound and scenery (2016/11/22 .bg に margin: 0 0 180px 0; 追加)
--------------------------------------------------------- */

#sound_and_scenery .bg {
	background: url(../img/sound_and_scenery/sound_and_scenery_bg.jpg) center no-repeat;
	background-size: cover;
	margin: 0 0 180px 0;
	padding: 20px;
	-webkit-box-shadow: inset 0px 0px 10px 5px #ffffff;
	box-shadow: inset 0px 0px 10px 5px #ffffff;

	
}

#sound_and_scenery .tx {
	background: #FFFFFF\9;
	background: rgba(255,255,255,0.8);
	overflow: hidden;
	margin: 10px;
	padding: 20px;
}

#sound_and_scenery .tx p {
	margin: 0 5px 25px;
	line-height: 1.7;
}


@media screen and (max-width:700px){
		
	#sound_and_scenery .bg {
		padding: 4%;
	}

	#sound_and_scenery .tx {
		padding: 4%;
		margin: 2%;
	}
	
	#sound_and_scenery .tx p {
		margin: 0 5px 25px;
		line-height: 1.5;
	}

	
	#sound_and_scenery img {
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------
■ oscilloglass
--------------------------------------------------------- */
#oscilloglass .noteLarge{
	padding-left: 0;
	padding-right: 0;
}
#oscilloglass .oscilloglass_note_il{
	float: right;
	padding-left: 14px;
}
#oscilloglass .note{
	padding-top: 0px;
}
@media screen and (max-width:700px){
	#oscilloglass .noteLarge{
		padding-top:0;
		margin-right: 0px;
	}
	#oscilloglass .oscilloglass_note_il{
		float: none;
		padding-left: 0px;
		width: 100%;
		height: auto;
	}
}

/* ---------------------------------------------------------
■ ake,yoi
--------------------------------------------------------- */
#yoi .package_3col img{
	width: 185px;
}
@media screen and (max-width:700px){
	#ake .ake_blank{
		padding-top: 0;
	}
	#yoi .yoi_blank{
		padding-top: 0;
	}
	#yoi .package_3col img{
		width: auto;
	}
}

/* ---------------------------------------------------------
■ about oscilloglass
--------------------------------------------------------- */
#about_oscilloglass .bg {
	background: url(../img/about_oscilloglass/about_oscilloglass_bg.jpg) center no-repeat;
	background-size: cover;
	margin: 0 0 180px 0;
	padding: 20px;
	-webkit-box-shadow: inset 0px 0px 10px 5px #ffffff;
	box-shadow: inset 0px 0px 10px 5px #ffffff;
}

#about_oscilloglass .tx {
	background: #FFFFFF\9;
	background: rgba(255,255,255,0.8);
	overflow: hidden;
	margin: 10px;
	padding: 20px;
}

#about_oscilloglass .tx p {
	margin: 0 5px 25px;
	line-height: 1.7;
}

#about_oscilloglass .about_oscilloglass_2col{
	display:flex;
}
#about_oscilloglass .about_oscilloglass_r {
	flex: 1.8;
}
#about_oscilloglass .about_oscilloglass_l {
	flex: 1;
}
#about_oscilloglass .about_oscilloglass_l img{
	width: 90px;
	height: auto;
}


@media screen and (max-width:700px){
		
	#about_oscilloglass .bg {
		padding: 4%;
	}

	#about_oscilloglass .tx {
		padding: 4%;
		margin: 2%;
	}
	
	#about_oscilloglass .tx p {
		margin: 0 5px 25px;
		line-height: 1.5;
	}

	
	#about_oscilloglass img {
		width: 50%;
		height: auto;
		float: left;
	}
}

/* ---------------------------------------------------------
■ about us
--------------------------------------------------------- */

#about_us p {
	position: relative;
}

#about_us .note {
	position: absolute;
	bottom: 50px;
	right: 20px;
}

@media screen and (max-width:700px){
	#about_us img {
		width: 100%;
		height: auto;
	}
	
	#about_us .note {
		position: absolute;
		bottom: 7%;
		right: 4%;
	}
}