@charset "UTF-8";

/****************** 
-------フォント------ 
******************/

/* font05 */
@font-face{
font-family: font05;
src:url("font05/font05.eot"), url("font05/font05.eot?#iefix") format("embedded-opentype"), url("font05/font05.woff") format("woff"), url("font05/font05.ttf") format("truetype"), url("font05/font05.otf") format("opentype");
}

/****************** 
-----基本設定------ 
******************/

html {
/* レスポンシブタイプ
セッティング */
  font-size: 75%;
/* 日本語font-family
serif: 明朝
sans-serif: ゴシック */
  font-family: serif, sans-serif, "Meiryo","Hiragino Kaku Gothic Pro","Yu Gothic","メイリオ";

 /* スマホでPCより文字サイズを
 大きくする設定を無効 */
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%;
}

/* margin削除 */
body, h1, h2, h3, h4, h5, h6, p, blockquote, ul, ol, dl, dd, figure, table, pre {
  margin: 0;
}

/* 文頭記号・padding削除 */
ol, ul {
  padding: 0;
  list-style: none;
}

/* 要素をブロック化
menu要素は勧告から
削除されたので削除 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

/* リンク時の下線を削除・
IE10の背景色削除：透明 */
a {
  background-color: transparent;
  text-decoration: none;
}

/* リンク時の点線を削除 */
a:hover,
a:focus, 
a:active {
  outline: none;
}

.br {
  display:none;
}

/* 禁則処理の追加 */
p,li,dt,dd,th,td,pre {
  -ms-line-break: strict;
  line-break: strict;
  -ms-word-break: break-strict;
  word-break: break-strict;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

img {
  border: 0;
}

/* マーカー強調
背景色が黄色
文字色が黒色 */
mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 0.8em;
}

/* IE 9/10/11の指定 */
svg:not(:root) {
  overflow: hidden;
}

/* firefoxは hrが border-boxなのでcontent-boxに　*/
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/* 文字にルビをふる　*/
ruby {
ruby-align: distribute-space;/* ルビを均等にする　*/
ruby-overhang: auto;/* はみだすかどうか自動　*/
ruby-position: above;/* テキストの上部に表示　*/
}

.brpc {
  display:none;
}

.brsp {
display:block;
}

/****************** 
-----レイアウト------ 
******************/

body {
background-color: #000;
color: #fff;
}
/*
.imgbg {
background-image:url("../img/bg.jpg");
background-repeat:repeat;
padding-bottom: 4rem;
}
*/
a {
  color: #fff;
}

h2 {
  font-size: 2.25em;
}

h3 {
  font-size: 1.95em;
}

h4 {
  font-size: 1.35em;
}

h5 {
  font-size: 1.15em;
}

header {
  background-color: #ffffcc;
  text-align: center;
}

nav {
  padding-bottom: 2em;
  width: 100%;
}

main { 
  padding-bottom: 2em;
}
/* float解除の設定 */
main:after { 
  clear: both;
  content: " ";
  display: block; 
}

.headerLogo {
  padding-top: 1.5em;
  padding-bottom: 1em;
}

.headerLogo img:hover	{
  background-color: #ffffcc;
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/* h1非表示 */
.headerLogo h1 {
  font-size: 0.25em;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

/* PC画像非表示
スマホ用画像表示*/
.logoimgpc {
  display: none;
}  

/* ライン */
.headerLine {
  background-color: #660066;
  height: 0.5em;
}

/* 作品画像 */
.sakuhinImg {
  padding: 0.75em;
}

.sakuhinImg img {
  height: auto;
  margin-bottom: 0.5em;
  width: 100%;
}

/* 作品画像マウスオン時 */
.sakuhinImg a:hover {
  background-color:#330033;
  filter:alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.centerBox {
  margin: 0 auto;
  max-width: 1000px;
}

/* 文字点滅 */
.tenmetsu{
-webkit-animation:blink 1.5s ease-in-out infinite alternate; 
-moz-animation:blink 1.5s ease-in-out infinite alternate; 
animation:blink 1.5s ease-in-out infinite alternate;  
}
@-webkit-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
100% {opacity:1;
}
}

/****************** 
-- メッセージ -- 
******************/
.message {
  color: #fff;
  font-size: 1.25em;
  letter-spacing: 0.25em;
  line-height: 2em;
  text-align: center;
}

.messageName {
  font-size: 1.5em;
  font-family: font05;
  text-align: right;
}

/****************** 
-- グローバルメニュー -- 
******************/
.menu {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.menu li {
  border-bottom: solid 1px #fff;
}

.menu li a {
  display: block;
  font-family: "font05";
  font-size:1.5em;
  padding: 1em;
  text-align: center;
}

.menu li a:hover	{
  background-color:#330033;
  filter:alpha(opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.menuOsirase {
  color:#ff0000;
  font-weight: bold;
}


/****************** 
---略歴・お知らせ---- 
******************/
.exampleWrap {
  font-family: "font05";
  padding-top: 3em;
}

.exampleImg {
  margin-bottom: 3em;
  width: 50%;
}

.exampleText {
  line-height: 2em;
  margin-bottom: 1em;
}

#ryakurekiText {
  padding:0 0 0 0.5em;
}

#ryakurekiWrap .sakuhinImg {
  width: 70%;
}

/* お知らせ画像　あいさつ画像 */

#osiraseImg{
  text-align: center;
  margin:0 auto;
}

#osiraseImg p {
  font-size: 1.2em;
  font-weight: bold;
}

#osiraseImg figcaption{
  margin: 0.5em 0 0 0;
}

#osiraseImg50 figcaption {
  margin: 0.5em 0 0 0;
}

#osiraseImg img{
  margin: 1.5em 0 0 0;
}

#osiraseImg img{
  margin: 1.5em 0 0 0;
}

#osiraseText{
  font-family: "font05";
  line-height:1.5; 
  margin:1rem 0;
  text-align: center;
}

#osiraseText h2{
  font-size: 2.5em;
  letter-spacing:0.15em; 
}

#osiraseText h3{
  color:#e6e6ba;
  font-size: 1.85em;
  padding:1em 0 1.5em;
}

#osiraseText h4{
  font-size: 2.5em;
  padding:0 0 0.5em;
}

#osiraseText h5{
  font-size: 1.25em;
}

#osiraseText h6{
  font-size: 1em;
}

#osiraseText p{
  font-size: 1em;
}

#osiraseText a{
  text-decoration: underline;
}
 
/****************** 
--年代別作品一覧-- 
******************/
.sakuhinWrap {
  margin: 1em 0 2em 0;
  text-align: center;
}

.sakuhinTitle {
  margin-bottom: 3em;
}

.sakuhinTitle h2 {
  letter-spacing: 0.25em;
  font-family: "font05";
}

#sakuhin9311Wrap .sakuhinImg {
  float: left;
  width: 27%;
}

/********************** 
--年代別作品・作品解説---
**********************/
.nendaiHeader {
  background: #000;
  height: 120px;
}

.nendaiHeader img{
  background: #000;
  float: left;
  margin: 8px 30px 0 1em;
  width: 100px;
}

.nendaiHeader h1{
  font-family: "font05";
  font-size: 1.35em; 
  text-align: left;
  margin-top: 30px;
}

.nendaiLineUe {
  background-color: #660066;
  height: 0.4em;
}

.nendaiLine {
  background-color: #660066;
  height: 0.25em;
  margin-top: 2px;
}

.nendaiWrap .sakuhinImg {
  vertical-align: top;
}

.nendaiWrap .sakuhinImg a {
  display: block;
  padding: 1em;
}

.nendaiWrap .sakuhinImg h4{
  font-size: 1em;
}

/********************** 
--　語録　　解説　---
**********************/
.gorokuWrap {
  margin: 0 auto;
  letter-spacing: 0.25em;
  line-height: 2em;
  padding: 1.5em;
}

.gorokuWrap p {
  font-size: 1.25em;
}

#gorokuImg.sakuhinImg a {
  display: block;
  font-family: "font05";
}

#gorokuImg.sakuhinImg p {
  color: #ffffcd;
  font-size: 1em;
  letter-spacing: 0.1em;
}

/********************** 
--　Youtube　---
**********************/

#youtubeWrap {
  margin: 0 auto;
}


/****************** 
------ フッター ----- 
******************/
footer {
  font-size: 0.8em;
  padding: 1.5em;
  margin-bottom: 1em;
  text-align: center;
}

footer a {
  text-decoration: underline;
}

/* ######## 480px以上 ######## */
@media screen and (min-width: 480px){
nav {
  margin: 0 auto;
  width: 99%;
}

.brsp
 {
display:none;
}

/* ナビゲーション横並び */
.menu li {
  border-bottom: none;
  border-left: solid 1px #fff;
  display: table-cell;
}

/* IE8にnth-childを認識させるため
以下に書き換える */
.menu li:last-child {
  border-right: solid 1px #fff;
}

.menu li a {
  font-size: 1em;
  padding: 0.5em
}

.exampleImg {
  float: right;
  width: 18%;
}

#osiraseImg p {
  font-size: 1.25em;
}


/* 年代別作品一覧 */
#sakuhin9311Wrap.sakuhinImg {
  width: 20%;
}

/*年代別作品 */
.nendaiWrap .sakuhinImg { 
  display: table-cell;
  width: 25%;
}

/* 年代別作品　カラム幅　 */
.column,.column90,.column60,.column70,.column80,.column50,.column40 {
  margin: 0 auto;
}

.column90 {
  width: 90%;
}

.column80 {
  width: 80%;
}

.column70 {
  width: 70%;
}

.column60 {
  width: 60%;
}

.column50 {
  width: 50%;
}

.column40 {
  width: 40%;
}


/* 作品解説 */
#kaisetuWrap .sakuhinImg {
  width: 46%;
}

/* 略歴画像　padding-top 削除 */
#ryakurekiWrap .sakuhinImg {
  padding: 0 0.75em 0.75em;
  width: 30%;
}

/* あいさつ画像 */
#aisatuImg{
  display: block;
  float:right;
  margin: 4em 0 0 0;
  width: 33%;
}

}

/* ######## 600px以上 ######## */
@media screen and (min-width: 600px){

.brpc {
  display:block;
}

.brsp
 {
display:none;
}

.menu {
  font-size: 1.25em;
}

.menu li {
  vertical-align: middle;
}

.menu li:nth-child(6) {
  padding: 0 0.35em;
  letter-spacing:-0.15em;
}

/* 略歴・お知らせ */
.exampleWrap {
  margin: 0 auto;
  width: 90%;
}

.exampleText {
  float: left;
}

/* あいさつ画像 */
#aisatuImg{
  margin: 3em 0 0 0;
}

/* 年代別作品一覧 */
#sakuhin9311Wrap .sakuhinImg {
  width: 13.5%;
}

/* 年代別作品 sakuhin02 */
.nendaiWrap .sakuhinImg {
  padding: 0.15em;
}

#sakuhin9301 {
  width: 25%;
}

#sakuhin9302 {
  width: 30%;
}

#sakuhin9303 {
  width: 45%;
}

/* 年代別作品 sakuhin03-1 */
#sakuhin9406 {
  width: 25%;
}

#sakuhin9405 {
  width: 25%;
}

#sakuhin9407 {
  width: 25%;
}

#sakuhin9404 {
  width: 25%;
}
/* 年代別作品 sakuhin03-2 */
#sakuhin9401 {
  width: 22%;
}

#sakuhin9402 {
  width: 40%;
}

#sakuhin9403 {
  width: 38%;
}

/* 年代別作品 sakuhin04-1 */
#sakuhin9501 {
  width: 25%;
}

#sakuhin9701 {
  width: 20%;
}

#sakuhin9702 {
  width: 22%;
}

#sakuhin9703 {
  width: 23%;
}

/* 年代別作品 sakuhin04-2 */
#sakuhin9502 {
  width: 30%;
}

#sakuhin9704 {
  width: 20%;
}

/* 年代別作品 sakuhin07-1 */
#sakuhin9901 {
  width: 30%;
}

#sakuhin9902 {
  width: 40%;
}

#sakuhin9903 {
  width: 25%;
}

#sakuhin9904 {
  width: 20%;
}

/* 年代別作品 sakuhin08-1 */
#sakuhin0201 {
  width: 15%;
}

#sakuhin0202 {
  width: 20%;
}

#sakuhin0002 {
  width: 25%;
}

#sakuhin0001 {
  width: 20%;
}

#sakuhin0204 {
  width: 20%;
}

#sakuhin0203 {
  width: 25%;
}

/* 年代別作品 sakuhin09-1 */
#sakuhin0401 {
  width: 29%;
}

#sakuhin0402 {
  width: 27%;
}

#sakuhin0403 {
  width: 22%;
}

/* 年代別作品 sakuhin09-2 */
#sakuhin0205 {
  width: 22%;
}

#sakuhin0206 {
  width: 40%;
}

#sakuhin0501 {
  width: 25%;
}

/* 年代別作品 sakuhin10-1 */
#sakuhin0701 {
  width: 32%;
}

#sakuhin0601 {
  width: 18%;
}

#sakuhin0703 {
  width: 18%;
}

#sakuhin0704 {
  width: 32%;
}

/* 年代別作品 sakuhin10-2 */
#sakuhin0602 {
  width: 30%;
}

#sakuhin0702 {
  width: 25%;
}

/* 年代別作品 sakuhin11-1 */
#sakuhin1101 {
  width: 35%;
}

#sakuhin0902 {
  width: 25%;
}

#sakuhin1001 {
  width: 20%;
}

/* 年代別作品 sakuhin12-1 */
#sakuhin1401 {
  width: 22%;
}

#sakuhin1501 {
  width: 25%;
}

#sakuhin1502 {
  vertical-align: top;
  width: 25%;
}

#sakuhin1503 {
  width: 28%;
}

#sakuhin1504 {
  width: 34%;
}

#sakuhin1505 {
  width: 32%;
}

#sakuhin1506 {
  width: 28%;
}

/* 作品解説 */
#kaisetuWrap .sakuhinImg {
  width: 30%;
}

}

/* ######## 768px以上 ######## */
@media screen and (min-width: 768px){

.brpc {
  display:block;
}

.brsp {
display:none;
}

/* ロゴの切り替え */
.logoimgsp {  /*スマホ画像非表示 */
  display: none;
} 

.logoimgpc {  /* PC画像表示 */
  display: inline-block;  /* ロゴ部分のみリンクさせる */
  margin: 0 auto;
}  

/* 略歴・お知らせ */
.exampleWrap {
  width: 80%;
}

.exampleImg {
  width: 18%;
}

/* あいさつ画像 */
#aisatuImg{
  margin: 2em 0 0 0;
}

#osiraseImg p {
  font-size: 1.1em;
}

/* 年代別作品一覧 */
#sakuhin9311Wrap .sakuhinImg {
  width: 6.5%;
}

/* 語録 */
.gorokuWrap {
  margin-bottom: 3em;
  width: 75%;
}

}

/* ######## 900px以上 ######## */
@media screen and (min-width: 900px){

.brpc {
  display:block;
}

.brsp {
display:none;
}

nav {
  width: 75%;
}

/* スライダー */
.ss-slides {
  width: 900px;
  height: 450px;
}

/* 年代別作品一覧 */
#sakuhin9311Wrap .sakuhinImg {
  width: 7%;
}

/* 略歴・お知らせ */
.exampleWrap {
  width: 70%;
}

.exampleImg {
  margin-right: 2em;
  width: 15%;
}

.exampleText {
  font-size: 1.1em;
}

#osiraseWrap {
  width: 90%;
}

/* お知らせ画像 */
#osiraseImg {
  width: 50%;
}

/* youtube */
#youtubeWrap {
  width: 50%;
  padding-right:50px;
}

}

/* ######## 1000px以上 ######## */
@media screen and (min-width: 1000px){

.brpc {
  display:block;
}

.brsp {
display:none;
}

/* 画面最大サイズ */
main {
  margin: 0 auto;
  width: 1000px;
}

.menu {
  font-size: 1.35em;
}

/* 年代別作品一覧 */
#sakuhin9311Wrap .sakuhinImg {
  width: 7.25%;
}

/* 略歴・お知らせ */
.ryakurekiWrap {
  margin: 0 auto;
  width: 68%;
}

/* 語録 */
.gorokuWrap {
  margin-bottom: 7em;
}

}

/* ######## 1200px以上 ######## */
@media screen and (min-width: 1200px){

.brpc {
  display:block;
}

.brsp {
display:none;
}

/* スライダー */
.ss-slides {
  width: 1000px;
  height: 500px;
}

/* 略歴・お知らせ */
.ryakurekiWrap {
  margin: 0 auto;
  width: 73%;
}

#osiraseImg p {
  font-size: 1.25em;
  padding-top: 0.25em;
}

/* あいさつ画像 */
#aisatuImg{
  margin: 3em 0 0 0;
  width: 30%;
}

#osiraseText{
  width: 55%;
}

}