/* @charset "utf-8"; IE8以下でメディアクエリを有効にするjsが@charsetを記述すると無効となるため非表示に */
/* CSS Document */

/* =====================================
	COMMON.CSS
	> RESET CSS
	> YUI FONT
	> MULTIPLE CLASS
	> BASE DESIGN
======================================== */

/* RESET CSS
---------------------------------------- */
body,div,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,pre,form,input,textarea,p,th,td {margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}

ul,ol {list-style:none;}

table {border-collapse:collapse; border-spacing:0;}
th {font-weight:bold; text-align:left;}

img {border:none; vertical-align:bottom; -ms-interpolation-mode:bicubic;/* IEでimgのサイズをCSSで変更した際の画質劣化を抑える */}

input,select {vertical-align:middle;}

em {font-style:normal;}

a {outline:none;}


/* YUI FONT
---------------------------------------- */
body {font: 13px/1.231 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif; *font-size:small; *font:x-small;}
select,input,button,textarea {font:99% "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS P Gothic",sans-serif;}
table {font-size:inherit; font:100%;}
pre,code,kbd,samp,tt {font-family:monospace; *font-size:108%; line-height:1;}

/* 11px以下の文字サイズ対策(IE6) */
* html body {font-family:'ＭＳ Ｐゴシック',"MS P Gothic",sans-serif;}

/* 11px以下の文字サイズ対策(IE7) */
*:first-child+html body {font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',"MS P Gothic",sans-serif;}


/* MULTIPLE CLASS
---------------------------------------- */
.clearfix:after {content: "."; display:block; clear:both; height:0; visibility:hidden;}
.clearfix {min-height:1%;}
* html .clearfix {height:1%; /*\*//*/ height: auto; overflow: hidden; /**/}

.fs10 {font-size:77%;}
.fs11 {font-size:85%;}
.fs12 {font-size:93%;}
.fs13 {font-size:100%;}
.fs14 {font-size:108%;}
.fs15 {font-size:116%;}
.fs16 {font-size:123.1%;}
.fs17 {font-size:131%;}
.fs18 {font-size:138.5%;}
.fs19 {font-size:146.5%;}
.fs20 {font-size:153.9%;}
.fs21 {font-size:161.6%;}
.fs22 {font-size:167%;}
.fs23 {font-size:174%;}
.fs24 {font-size:182%;}
.fs25 {font-size:189%;}
.fs26 {font-size:197%;}

.fwB {font-weight:bold;}

.taL {text-align:left;}
.taC {text-align:center;}
.taR {text-align:right;}

.fL {float:left;}
.fR {float:right;}

.mT10 {margin-top:10px;}
.mT20 {margin-top:20px;}
.mT30 {margin-top:30px;}
.mB10 {margin-bottom:10px;}
.mB20 {margin-bottom:20px;}
.mB30 {margin-bottom:30px;}
.mL10 {margin-left:10px;}
.mL20 {margin-left:20px;}
.mR10 {margin-right:10px;}
.mR20 {margin-right:20px;}

.fcR {color:#F00;!important}


/* BASE DESIGN
---------------------------------------- */
html {height:100%; width:100%;}
body {background:url(/common/img/bg_body2.jpg?ver=20170117) center center no-repeat #D7D8DC; background-size:cover; -webkit-background-size:cover; -moz--webkit-background-size:cover; color:#333; line-height:1.5; height:100%; overflow:hidden; width:100%;}
#base {height:100%; width:100%;}

/* link */
a {color:#333; text-decoration:none;}
a:hover {color:#d6a3a7;}

/* header */
#header {margin:0 auto; width:100%; max-width:1200px; _width:1024px;/* forIE6 */}
#header .logo {float:left; padding-left:15px; width:320px;}

/* gnav */
#gnav {float:right; margin-top:15px; padding-right:15px; max-width:589px; _width:589px;/* forIE6 */}
#gnav ul li {float:left;}
#gnav ul li a {background-image:url(/common/img/gnav.png); display:block; height:29px; text-indent:-9999px; width:100%;}

#gnav01 {width:68px;}
#gnav02 {width:100px;}
#gnav03 {width:80px;}
#gnav04 {width:137px;}
#gnav05 {width:74px;}
#gnav06 {width:130px;}
#gnav01 a {background-position:0 0;}
#gnav02 a {background-position:-68px 0;}
#gnav03 a {background-position:-168px 0;}
#gnav04 a {background-position:-248px 0;}
#gnav05 a {background-position:-385px 0;}
#gnav06 a {background-position:-460px 0;}
#gnav01 a:hover, #news #gnav01 a {background-position:0 27px;}
#gnav02 a:hover, #profile #gnav02 a {background-position:-68px 27px;}
#gnav03 a:hover, #media #gnav03 a {background-position:-168px 27px;}
#gnav04 a:hover, #biography #gnav04 a {background-position:-248px 27px;}
#gnav05 a:hover {background-position:-385px 27px;}
#gnav06 a:hover {background-position:-460px 27px;}



/* =====================================
  MEDIA QUELY for height:800～900px DISPLAY
======================================== */
@media screen and (max-height:900px){

#profile #container #subColumn {background-image:url(/img/photo_side_profile2_550.jpg?ver=20170117);}
#media #container #subColumn {background-image:url(/img/photo_side_media2_550.jpg?ver=20170117);}
#biography #container #subColumn {background-image:url(/img/photo_side_biography2_550.jpg?ver=20170117);}

}



/* =====================================
  MEDIA QUELY for height:700～800px DISPLAY
======================================== */
@media screen and (max-height:800px){

#base #page,
#top #header,
#top #footerBox {margin:0 auto; max-width:1000px;}

#base #header {height:120px;}
#base #header .logo {width:250px;}
#base #header .logo a img {height:auto; width:250px;}

/* NEWS */
#news #container #mainColumn .article {padding-left:280px;} /* left column(width) + 30px */
#news #container #subColumn {width:250px;}

/* PROFILE,MEDIA,BIOGRAPHY */
#profile #container #mainColumn .article,
#media #container #mainColumn .article,
#biography #container #mainColumn .article {padding-left:480px;} /* left column(width) + 30px */

#profile #container #subColumn {background-image:url(/img/photo_side_profile2_450.jpg?ver=20170117); width:450px;}
#media #container #subColumn {background-image:url(/img/photo_side_media2_450.jpg?ver=20170117); width:450px;}
#biography #container #subColumn {background-image:url(/img/photo_side_biography2_450.jpg?ver=20170117); width:450px;}

}



/* =====================================
  MEDIA QUELY for height:600～700px DISPLAY
======================================== */
@media screen and (max-height:700px){

body {line-height:1.4;}

#base #page,
#top #header,
#top #footerBox {margin:0 auto; max-width:900px;}

#base #header {height:100px;}
#base #header .logo {width:210px;}
#base #header .logo a img {height:auto; width:210px;}

/* NEWS */
#news #container #mainColumn .article {padding-left:240px;} /* left column(width) + 30px */
#news #container #subColumn {width:210px;}

/* PROFILE,MEDIA,BIOGRAPHY */
#profile #container #mainColumn .article,
#media #container #mainColumn .article,
#biography #container #mainColumn .article {padding-left:430px;} /* left column(width) + 30px */

#profile #container #subColumn {background-image:url(/img/photo_side_profile2_400.jpg?ver=20170117); width:400px;}
#media #container #subColumn {background-image:url(/img/photo_side_media2_400.jpg?ver=20170117); width:400px;}
#biography #container #subColumn {background-image:url(/img/photo_side_biography2_400.jpg?ver=20170117); width:400px;}

}



/* =====================================
  MEDIA QUELY for height:500px～600px DISPLAY
======================================== */
@media screen and (max-height:600px){

body {line-height:1.3;}

#base #page,
#top #header,
#top #footerBox {margin:0 auto; max-width:800px;}

#base #header {height:90px;}
#base #header .logo {width:180px;}
#base #header .logo a img {height:auto; width:180px;}

#base #footer .copyright {font-size:85%;}

/* NEWS */
#news #container #mainColumn .article {padding-left:210px;} /* left column(width) + 30px */
#news #container #subColumn {width:180px;}

/* PROFILE,MEDIA,BIOGRAPHY */
#profile #container #mainColumn .article,
#media #container #mainColumn .article,
#biography #container #mainColumn .article {padding-left:380px;} /* left column(width) + 30px */

#profile #container #subColumn {background-image:url(/img/photo_side_profile2_350.jpg?ver=20170117); width:350px;}
#media #container #subColumn {background-image:url(/img/photo_side_media2_350.jpg?ver=20170117); width:350px;}
#biography #container #subColumn {background-image:url(/img/photo_side_biography2_350.jpg?ver=20170117); width:350px;}

}



/* =====================================
  MEDIA QUELY for height:～500px DISPLAY
======================================== */
@media screen and (max-height:500px){

#profile #container #subColumn,
#media #container #subColumn,
#biography #container #subColumn {background-position:left top;}

}