@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}

.clearfix:after {content: "."; display: block;clear: both;height: 0;visibility: hidden;}

.clearfix {min-height: 1px;}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}
/* -------------------------------------------------------------- */

body{
color:#00559a;
font:12px verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
background:#fff;
-webkit-text-size-adjust: none;
}

html{background:#3e74c4;}

/* リンク設定
------------------------------------------------------------*/
a{color:#3e74c4;text-decoration:none;}
a:hover{color:#325a96;}
a:active, a:focus{outline:0;}

/* 全体
------------------------------------------------------------*/
#slide {margin:0 auto;padding:0 ;width:100%;position:relative;}
#slide img{width:100%;height:inherit;}
#intro {margin:0 auto;padding:0 ;width:100%;position:relative;background:url(../images/bg_intro.png) center -380px; }
#profile {margin:0 auto;padding:0;width:100%;position:relative;background:url(../images/bg_profile.jpg) center top repeat-x #e6f2fc; }
#information {margin:0 auto;padding:0 ;width:100%;position:relative;background:#2375cd; }
#outline {margin:0 auto;padding:0 ;width:100%;position:relative;background:url(../images/bg_outline.png); }
#movie {margin:0 auto;padding:0 ;width:100%;position:relative;background:#02366f; }
#special {margin:0 auto;padding:0 ;width:100%;position:relative;background:url(../images/bg_special.png); }
#faq {margin:0 auto;padding:0 ;width:100%;position:relative;background:#ffffff;  }
#buy {margin:0 auto;padding:0;width:100%;position:relative;background:#2374cc; }

/*************
/* ヘッダー
*************/
#header{overflow:hidden;}
* html #header{height:1%;}

/* サブメニュー*/

.submenu ul {padding-top:10px;margin-bottom:20px;text-align:right;clear:right;}
.submenu ul li{border-right:1px solid #666666;display:inline-block; padding:1px 5px;font-size:12px;zoom:1;}
.submenu ul li a{color:#666666;text-decoration:none;}
.submenu ul li a:hover{color:#666666;text-decoration:underline;}
.submenu ul li:first-child{border-left:1px solid #666666;}

#buy .submenu ul,#information .submenu ul,#special .submenu ul {margin-bottom:50px;text-align:left;}
#buy .submenu ul li,#information .submenu ul li {border-right:1px solid #ffffff;}
#buy .submenu ul li a,#information .submenu ul li a {color:#ffffff;}
#buy .submenu ul li  a:hover,#information .submenu ul li  a:hover {color:#ffffff;}
#buy .submenu ul li:first-child,#information .submenu ul li:first-child {border-left:1px solid #ffffff;}

#special .submenu ul li a {color:#00b0ec;}
#special .submenu ul li  a:hover {color:#00b0ec;}
#special .submenu ul li {border-right:1px solid #00b0ec;}
#special .submenu ul li:first-child {border-left:1px solid #00b0ec;}

#footer-menu .submenu ul{padding-top:0;}


/*************
/* ロゴ
*************/
#header .logo{float:left;}

/* メンバーボタン*/
.member ul{height:52px;text-align:right;}
.member ul li{display:inline-block; padding:0 ;zoom:1;position:relative;}

/*************
メイン コンテンツ
*************/
section.content{padding:0 0 30px;border-radius:6px;overflow:hidden;font-size:14px;max-width:1000px;margin:0 auto;}

* html section.content{height:1%;}

section.content p{margin-bottom:10px;}

.inner{margin:0 auto;width:100%;padding:0 5%;}

section.content img{max-width:100%;height:auto;}

.alignleft{float:left;clear:left;margin:3px 10px 10px 0;}

.alignright{float:right;clear:right;margin:3px 0 10px 10px;}



/* 共通*/
h3.heading{padding:3px 0;margin-bottom:10px;font-size:16px;border-bottom:2px solid #3e74c4;}
h3 {margin-bottom:2em;}
h3 img{width:100%;}
h4 {margin-bottom:15px;}
p{font-size:100%;line-height:1.8;margin-bottom:30px;}
.notice {font-size:12px;line-height:1.4;}
.center{text-align:center;}
.red{color: red;}
.large{font-size:110%;line-height:1.4;}

ul.basic {margin: 0 0 10px 30px;}
ul.basic li {list-style-type:disc;padding: 0 0 5px 0;line-height:1.5;}

/* 各セクションタイトル*/

h2 { text-indent: 100%;white-space: nowrap;overflow: hidden;height:100px;margin-bottom:20px;}

#intro h2 {background:url(../images/bg_h2_intro.png) center top no-repeat;background-size:contain; }
#profile h2 {background:url(../images/bg_h2_profile.png) center top no-repeat;background-size:contain; }
#information h2 {background:url(../images/bg_h2_information.png) center top no-repeat;background-size:contain; }
#outline h2 {background:url(../images/bg_h2_outline.png) center top no-repeat; height:70px;background-size:contain;}
#movie h2 {background:url(../images/bg_h2_movie.png) center top no-repeat;background-size:contain; }
#special h2 {background:url(../images/bg_h2_special.png) center top no-repeat;background-size:contain; }
#faq h2 {background:url(../images/bg_h2_faq.png) center top no-repeat;background-size:contain; }
#buy h2 {background:url(../images/bg_h2_buy.png) center top no-repeat;background-size:contain; }


/* サマリー*/

#summary {padding:30px 0;border-bottom:2px solid #00b0ec;}
#summary  .inner{margin:0 auto;width:98%;padding:0 1%;}
#summary  ul{margin-right:-2%;margin-bottom:30px;}
#summary  ul li{float:left;width:31%;margin-right:2%;}
#summary  ul li img{width:100%;}

/* プロフィール*/
#profile h3{margin:70px 0 50px;padding:0;}

/* メッセージ*/
.message {
	padding:30px 10%;
	background:#ffffff;
	border: 2px dotted #4b93cd;
	border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	}
#profile .message h3{margin:0 0 30px;font-size:140%;text-align:center;}


/* 商品情報*/
#information,#buy {color:#ffffff;}
#information .article,#buy .article {position:relative;}
#information .tag,#buy .tag {position:absolute;;top:-120px; right:0;}
#information .article ,#buy .article  {color:#ffffff;}
#information .submenu {color:#ffffff;}
#information .submenu a{color:#ffffff;}

/* 概要*/
#outline {}
#outline h3{margin:-15px 0 20px;font-weight:bold;font-size:120%;letter-spacing:2px;border-bottom:1px dotted #7D90CF;padding-bottom:5px;margin-bottom:5px;}
#outline ul.text {margin-right:-3px;margin-bottom:30px;}
#outline ul.text  li {width:32%;float:left;margin-right:1%;margin-bottom:5px;}

/* サンプルムービー*/
#movie .movie-area{width:90%; margin:60px auto 80px;}
#movie .movie-area a:link{color:#fff;}
#movie .movie-area a:hover{color:#ffffcc;}
#movie .movie-area a:visited{color:#fff;}
.movie-wrap {position: relative;padding-bottom: 56.25%;padding-top: 30px;height: 0;overflow: hidden;}
 .movie-wrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

/* 購入者特典*/
#special  .article  {color:#00b0ec;}
#special  .left{width:563px;}
#special  .right{width:425px;}

/* 訂正コラム*/
.corrections {border: 4px double #FFFFFF;padding:20px 3% 10px;margin:0 auto 30px;background:#fcfcd4;}
.corrections h4{letter-spacing:2px;color:#444444;}
.corrections p{margin-bottom:10px;color:#444444;}

/* よくあるご質問*/

#faq dl  {margin-bottom:50px;margin-top:30px;}
#faq dl dt {background:#00b0ec; color:#ffffff;padding:8px 8px 5px 8px;margin-bottom:8px;line-height:1.5;}
#faq dl dd {margin-bottom:30px;line-height:1.8;font-size:14px;}

/* フッタメニュー*/
#footer-menu {width:100%;margin:10px auto;}
#footer-menu h1{ margin-bottom:8px;}
#footer-menu .submenu{ padding-top:10px;color:#444444;}


/*************
テーブル
*************/
table.table{
border-collapse:collapse;
width:100%;
margin:10px auto;
}

table.table th,table.table td{
padding:5px;
border:1px solid #3e74c4;
}

table.table th{
text-align:right;
font-weight:bold;
letter-spacing:1px;
white-space:nowrap;
color:#fff;
background:#325a96;
border-left:#3e74c4 5px solid
}

table.table td{border-left:#3e74c4 3px double}


/*************
/* ページトップボタン
*************/
#pagetop {position: fixed;bottom: 50px;right: 20px;}

/*************
/* フッター
*************/
#footer{clear:both;padding:20px 0;overflow:hidden;background:#3e74c4;}

* html #footer{height:1%;}

#footer a{color:#fff;}
#footer a:hover{color:#ccc;}
#footer .copyright{text-align:right;font-size:11px;color:#ffffff;}

.pc{display:block;}
.sm{display:none;}

/*フォーム*/
#page {border-bottom:1px solid #dddddd;}
#page #head-img {height:97px;background:url(../images/head_page.jpg) top center no-repeat #3472b7;}
#page .inner table{}
#page  table tr th{height:30px;vertical-align:top;}
#page h2#page_title {font-size:20px; color:#2476cf;text-indent: 0px;white-space: nowrap;overflow:visible;height:40px;margin-top:30px;margin-bottom:40px;border-bottom:1px dotted #2476cf;}


/* PC用 */
@media only screen and (min-width:1000px){	

#wrapper,.inner{width:960px;padding:0;}
#wrapper{padding-bottom:20px;}
nav div.panel{display:block !important;}

a#menu{display:none;}
	
	nav#mainNav{
	width:100%;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #3e74c4), color-stop(0.00, #325a96));
	background: -webkit-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -moz-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -o-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -ms-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: linear-gradient(top, #325a96 0%, #3e74c4 100%);
	position: relative;
	overflow: hidden;
	z-index: 1000;
	}
	nav#mainNav ul{
	 position: relative;
	left: 50%;
	float: left;
	}

	* html nav#mainNav ul{height:1%;}

	nav#mainNav ul li{
	position: relative;
	left: -50%;
	float: left;
	}

	nav#mainNav ul a{
	font-size:15px;
	display:block;
	padding:15px 15px 12px;
	line-height:1.2;
	color:#ffffff;
	}
	
	nav#mainNav ul span{
	font-size:10px;
	color:#ffffff;
	}

	nav#mainNav ul li.active a,nav#mainNav ul a:hover{
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #3e74c4), color-stop(0.00, #0d4886));
	background: -webkit-linear-gradient(top, #0d4886 0%, #3e74c4 100%);
	background: -moz-linear-gradient(top, #0d4886 0%, #3e74c4 100%);
	background: -o-linear-gradient(top, #0d4886 0%, #3e74c4 100%);
	background: -ms-linear-gradient(top, #0d4886 0%, #3e74c4 100%);
	background: linear-gradient(top, #0d4886 0%, #3e74c4 100%);
	color:#fffdc7;
	}
	
		.logo h1 img{margin-top:-8px;}
	
	/* プロフィール*/

#profile .book {text-align:center;;position: relative;overflow: hidden;}
#profile .book ul {margin-right:-10px;position: relative;left: 50%;float: left;}
#profile .book ul li {float: left;margin-right:10px;position: relative;left: -50%;margin-bottom:10px;}

	/* 2カラム*/
	.col2l{width:48%;float:left;}
	.col2r{width:48%;float:right;}
	
	#outline .col2l{width:48%;float:left;padding-right:2%;border-right:1px dotted #7D90CF;}
	#outline .col2r{width:48%;float:right;}
	

}


/* モニター幅1000px以下 */
@media only screen and (max-width:1000px){
	*{
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	}
	
	#header{padding:0 0;}
	
	#header .logo,#footer .logo{
	float:none;
	text-align:center;
	padding:5px 5px;
	}
	
	nav#mainNav{
	clear:both;
	width:100%;
	margin:0 auto;
	padding:0;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1, #3e74c4), color-stop(0.00, #325a96));
	background: -webkit-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -moz-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -o-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: -ms-linear-gradient(top, #325a96 0%, #3e74c4 100%);
	background: linear-gradient(top, #325a96 0%, #3e74c4 100%);
	}

	nav#mainNav a.menu{
	width:100%;
	display:block;
	height:40px;
	line-height:40px;
	font-weight: bold;
	text-align:left;
	color:#fff;
	}

	nav#mainNav a#menu span{padding-left:10px;}
	nav#mainNav a.menu span:before{content: "→ ";}
	nav#mainNav a.menuOpen span:before{content: "↓ ";}

	nav#mainNav a#menu:hover{cursor:pointer;}

	nav .panel{
	display: none;
	width:100%;
	position: relative;
	right: 0;
	top:0;
	z-index: 1;
	}

	nav#mainNav ul li{
	float: none;
	clear:both;
	width:100%;
	height:auto;
	line-height:1.2;
	}

	nav#mainNav ul li a,nav#mainNav ul li.current-menu-item li a{
	display: block;
	padding:15px 10px;
	text-align:left;
	border-bottom:1px dashed #fff;
	color:#fff;
	background:#3e74c4;
	}
	
	nav#mainNav ul li a span{padding-left:10px;}
	
	nav#mainNav ul li:first-child a{border-top:1px dashed #fff;}
	
	nav#mainNav ul li:last-child a{border:0;}
	
	nav#mainNav ul li.active a,nav#mainNav ul li a:hover{background:#325a96;}

	nav div.panel{float:none;}
	

/* 各セクションタイトル*/

h2 { height:80px;margin-bottom:20px;}

/*************
/* ページトップボタン
*************/
#pagetop {position: fixed;bottom: 5px;right: 5px;}
	
/*************
/* フッター
*************/


#footer .copyright{text-align:center;font-size:10px;color:#ffffff;}
	
	
	
/* サブメニュー*/
.submenu {
  position: relative;
  overflow: hidden;
  margin-bottom:-20px;
}
.submenu ul {
  position: relative;
  left: 50%;
  float: left;
}
.submenu ul li{
  position: relative;
  left: -50%;
  float: left;
}

/* メンバーボタン*/
 .member{
  position: relative;
  overflow: hidden;
  height:40px;
 }
 .member ul{
  position: relative;
  left: 50%;
  float: left;
}
 .member ul li{
  position: relative;
  left: -50%;
  float: left;
}
 .member ul li img{
 height:40px;
 width:120px;

}
/* 共通*/
p{font-size:90%;line-height:2;margin-bottom:21px;padding:0 0;}


/* プロフィール*/

#profile .book {
	text-align:center;
	margin:30px auto;
	position: relative;
	overflow: hidden;
	}
#profile .book ul {
	margin-right:-30px;
	position: relative;
	left: 50%;
	float: left;
	}
#profile .book ul li {
	float: left;
	margin-right:30px;
	position: relative;
	left: -50%;
	back
	}

/* プロフィール*/

#profile .book {text-align:center;;position: relative;overflow: hidden;}
#profile .book ul {margin-right:-10px;position: relative;left: 50%;float: left;width:70%;}
#profile .book ul li {margin-right:10px;position: relative;left: -50%;margin-bottom:10px;}
#profile .book ul li img{height:200px;width:inherit;}
#profile .message h3{margin:0 0 30px;font-size:120%;text-align:center;}

.bt{text-align:center;}

#footer-menu .submenu{margin-bottom:20px;}
#header h1,#footer-menu h1,#footer-menu .notice{text-align:center;}
/* フォーム*/
#page #head-img {height:97px;background:url(../images/head_page.jpg) top left no-repeat #3472b7;}

}

/* iPad 縦 */
@media only screen and (max-width:768px){
  #header{padding-bottom:0;}	
	
	#header .logo{
	float:none;
	text-align:center;
	padding:10px 5px 5px;
	}
	
	/* プロフィール*/
	#profile .book ul {margin-right:-10px;position: relative;left: 50%;float: left;width:90%;}

	/* 2カラム*/
	.col2l{width:100%;float:none;}
	.col2r{width:100%;float:none;}

	#outline .caption{font-size:60%;}
	
}

/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){

  .alignleft,.alignright{
	float:none;
	display:block;
	margin:0 auto 10px;
	}
	
	#sub ul.list li img{margin:0 5px 0 0;}

<!--以下のサマリーを削ると上部のスライドショーと重なる-->
/* サマリー*/

#summary  ul{
	margin-right:0;
}

#summary  ul li{
	float:none;
	width:100%;
	margin-right:0;
}
#summary  ul li img{
	vertical-align:bottom;
	width:100%;
}
<!--上のサマリーを削ると上部のスライドショーと重なる-->

/* プロフィール*/
#profile .book ul {margin-right:-10px;position: relative;left: 50%;float: left;width:90%;}
#profile .book ul li img{height:120px;width:inherit;}

	
	.pc{display:none;}
	.sm{display:block;}

}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
/* フォーム*/
#page #head-img {height:77px;background:url(../images/head_page_sm.jpg) top left no-repeat #3472b7;background-size:contain;}

#page  table.form { width: 100%; border:none; padding: 10px;}
#page  table.form tr {
    border-top: 1px dotted #cccccc;
    display: block;
    margin-bottom: 20px;
}
#page  table.form td {
    border-bottom: none;
    display: block;
    padding: 0;
}


}