@charset "utf-8";
/* CSS Document */

/*
Theme Name:catbase.chips 
Theme URI:http://****.com
Description:
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126@charset "utf-8";
/* CSS Document */

/*
Theme Name:catbase.chips 
Theme URI:http://****.com
Description:
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
a {      
  background: transparent;
  font-size: 100%;
  line-height: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}
/*Baes-------------*/
html{
  background: #fff;
   height: 100%;
  font-size: 16px;
 word-wrap: break-word; 
  -ms-text-size-adjust:100%; 
  -moz-text-size-adjust:100%;
  -o-text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
}
a{
  color: #fff;
  text-decoration: none;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
 }
a:visited{
  filter: alpha(opacity=50);
  opacity: .5;
  -moz-opacity: .5;
  -ms-opacity: .5;
  -o-opacity: .5;
  -webkit-opacity: .5;
}
a:hover{
  filter: alpha(opacity=90);
   opacity: .9;
  -moz-opacity: .9;
  -ms-opacity: .9;
  -o-opacity: .9;
  -webkit-opacity: .9;
}
a img{
  text-decoration: none;
  -moz-transition: .5s ease-in-out;
  -ms-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
   -webkit-transition: .5s ease-in-out;
}
a:visited ing{
   filter: alpha(opacity=75);
   opacity: .75;
  -moz-opacity: .75;
  -ms-opacity: .75;
  -o-opacity: .75;
  -webkit-opacity: .75;
}
a:hover img{
  filter: alpha(opacity=90);
   opacity: .9;
  -moz-opacity: .9;
  -ms-opacity: .9;
  -o-opacity: .9;
  -webkit-opacity: .9;
   }
/*@media all and (min-width: 375px)
@media all and (min-width: 360px)
@media all and (min-width: 414px)
@media all and (min-width: 480px) 
@media all and (min-width: 568px)
@media all and (min-width: 600px)
@media all and (min-width: 650px)
@media all and (min-width: 667px) 
@media all and (min-width: 724px)
@media all and (min-width: 736px)
@media all and (min-width: 768px)
@media all and (min-width: 812px)
@media all and (min-width: 960px)
@media all and (min-width: 1024px)
@media all and (min-width: 1280px)
@media all and (min-width: 1365px)
@media all and (min-width: 1469px)
/*Top-------------*/
/*.button{
  display: inline-block;
  width: 5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  text-decoration: none;
  outline: none;
  }
.button::before,
.button::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"１";
  }
.button,
.button::before,
.button::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .5s;
  transition: all .5s;
}
 /*BxSlider-------------*/
.bx-wrapper {
  margin: 0 auto;
  padding: 0;
  position: relative;
}

.bx-wrapper img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.bx-wrapper .bx-viewport {
  background: none;
  border: none;
  box-shadow: none;
  left: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
  -moz-transform: translatez(0);
  -ms-transform: translatez(0);
  -o-transform: translatez(0);
  transform: translatez(0);
  width: auto;
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  bottom: .5em;
  display: none;
  position: absolute;
  width: 100%;
}

.bx-wrapper .bx-loading {
  background: none;
  height: 100%;
  left: 0;
	min-height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 995;
}

.bx-wrapper .bx-pager {
  color: #fff;
  display: none;
  font-size: .75em;
  font-weight: normal;
  padding-top: 0;
  text-align: center;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #fff;
  display: none;
  height: 1em;
  margin: 0 .5em;
  outline: 0;
  text-indent: -9999px;
  width: 1em;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
  background: rgba(0,0,0,.5);
}

.bx-wrapper .bx-prev {
  background: none;
  left: .5em;
}

.bx-wrapper .bx-prev:before {
  color: #fff;
  content: "\f104";
  display: none;
  font-family: FontAwesome;
  font-size: 1.5em;
  letter-spacing: .5em;
}

.bx-wrapper .bx-next {
  background: none;
  right: .5em;
}

.bx-wrapper .bx-next:after {
  color: #fff;
  content: "\f105";
  display: none;
  font-family: FontAwesome;
  font-size: 1.5em;
  letter-spacing: .5em;
}

.bx-wrapper .bx-prev:hover {
  background-position: 0;
}

.bx-wrapper .bx-next:hover {
  background-position: 0;
}

.bx-wrapper .bx-controls-direction a {
  display: inline-block;
  font-size: 1em;
  height: auto;
  margin-top: 0;
  outline: 0;
  padding: .5em;
  position: absolute;
  text-indent: 0;
	top: 50%;
  width: auto;
  z-index: 990;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
.bx-wrapper .bx-controls-auto {
	text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  background: none;
	display: none;
  height: 0;
  margin: 0;
  outline: 0;
  text-indent: 0;
  width: 0;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  background: none;
  display: none;
  height: 0;
  margin: 0;
  outline: 0;
  text-indent: 0;
  width: 0;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: 0;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 100%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 100%;
}
.bx-wrapper .bx-caption {
  background: none;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  display: block;
  font-family: Arial;
  font-size: .85em;
  padding: 10px;
}   
ul {
  list-style: none;
}
/* Basic img-------------------------*/
figure {
  height: 323.34px;/*1.75*/
  overflow: hidden;
  position: relative;
  width: 100%;
}
img {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

/*-----------------*/
/* Header-------------------------*/
#header {
  display: block;
  height: 4em;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
#header .nav {
  background: #fff;
  display: block;
  height: 5em;
  left: -50%;
  right: -50%;
  margin: 0 auto;
  overflow: hidden;
  position: fixed;
  top: 0;
  transition: all 0.5s ease-out, background 1s ease-out;
  transition-delay: 0.2s;
  width: 100%;
  z-index: 999;
}
#header .nav .inside{
  margin: 0 auto;
  position: relative;
}
#header .nav .ham-menu{
     background: #fff; /*メニュー背景色*/
    box-sizing: border-box;
   border-radius: 0 0 0 10px; /*左下角丸*/
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -250px; /*メニュー横幅①と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 250px; /*メニュー横幅①*/
    z-index: 1000;
}
/*メニューアイコン部分は疑似要素で*/
#header .nav .ham-menu::before {
     background: #fff; /*ボタン部分背景色*/
    border-radius: 10px 0 0 10px; /*左下角丸*/
    color: #000; /*アイコン（フォント）色*/
    content: "≡"; /*メニューアイコン*/
    display: block;
    font-size: 40px; /*アイコン（フォント）サイズ*/
    height: 80px;
    line-height: 80px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}
#header .nav .ham-menu ul li a {
  color: #000;
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;  
  font-size: 1em;
   border-bottom: 0.5px solid rgba(0,0,0,.25);
  line-height: 3em;
}
/*hover 時の処理*/
#header .nav .ham-menu:hover {
    transform: translate(-250px); /*メニュー横幅①と合わせる*/
}
#header .nav .tops1{
  display: none;
}
#header .nav .tops2{
  display: none;
}
#header .nav .cf{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  font-size: 1.3em;
  left: 5em;
  position: absolute;
  top: 0.5em; 
}
#header .nav .cf .button{
   display: inline-block;
  width: 5em;
   height: 2.5em;
  line-height: 2.2em;
  text-align: center;
   text-decoration: none;
  outline: none;
 }
#header .nav .cf .button::before,
#header .nav .cf .button::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#header .nav .cf .button,
#header .nav .cf .button::before,
#header .nav .cf .button::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#header .nav .cf .button{
  background: #fff;
  position: relative;
   z-index: 2;
   border-radius: 50%;
   border: double 5px #000;
  color: #000;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#header .nav .cf .button:hover{
   color: #fff;
  }
#header .nav .cf .button::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#header .nav .cf .button:hover::after{
  background-color: #000;
  top: 0;
}
@media all and (min-width: 375px) {
  #header .nav .cf{
    left: 6.6em;
  }
}
@media all and (min-width: 414px) {
#header .nav .cf{
    left: 7.5em;
  }   
} 
@media all and (min-width: 600px) {
#header .nav .inside{
   display: none; 
  }
#header .nav .cf{
    left: 11.5em;
  } 
 #header .nav .tops1{
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;  
  display: block;
  font-weight: bold; 
  letter-spacing: 0.05em; 
  position: absolute;
  top: 1em;
   width: 50%;
}
  #header .nav .tops1 .ul1 li {
  display: inline-block;
  float: left; 
  list-style: none; 
 }
  #header .nav .tops1 .ul1 li .w{
  color: #000; 
  margin: 6.3em;  
  }
  #header .nav .tops1 .ul1 li .x{
     color: #000; 
   margin: 6em; 
   line-height: 2.5em; 
  }
#header .nav .tops2{
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;  
  display: block;
  font-weight: bold; 
  position: absolute;
  left: 20.5em;
  letter-spacing: 0.08em;
  top: 1em;
   width: 30%;
}
  #header .nav .tops2 .ul2 li{
  display: inline-block;
  float: left; 
  list-style: none; 
  }
  #header .nav .tops2 .ul2 li .y{
   color: #000;   
  margin: 6.5em;  
  }
  #header .nav .tops2 .ul2 li .z{
    color: #000;  
   margin: 7.2em; 
   line-height: 2.5em; 
  }
 }
@media all and (min-width: 650px) {
 #header .nav .cf{
    left: 13em;
  } 
#header .nav .tops2{
  left: 24em;
 }
}
@media all and (min-width: 724px) {
#header .nav .cf{
   left: 15em;
  } 
 #header .nav .tops1{
  left: 2em;
 }
#header .nav .tops2{
  left: 27em;
}
}
@media all and (min-width: 960px) {
#header .nav .cf{
    left: 21em;
  } 
 #header .nav .tops1{
    left: 4em;
   top: 0em;
   width: 40%;
}
   #header .nav .tops1 .ul1 li{
   margin: 2em 3.5em;
 }
 #header .nav .tops1 .ul1 li .w{
  margin: 0; 
  }
  #header .nav .tops1 .ul1 li .x{
   margin: 0; 
   line-height: 0em; 
  }
#header .nav .tops2{
  left: 36.5em;
  top: 0em;
   width: 40%;
}
 #header .nav .tops2 .ul2 li{
   margin: 2em 3.5em;
  } 
#header .nav .tops2 .ul2 li .y{
  margin: 0em;  
  }
#header .nav .tops2 .ul2 li .z{
   margin: 0em; 
  line-height: 0em;
  }    
}
@media all and (min-width:1280px) {
#header .nav .cf{
    left: 29em;
  } 
#header .nav .tops1{
    left: 13em;
 }
#header .nav .tops2{
  left: 48em;
}
}
@media all and (min-width: 1356px) {
#header .nav .cf{
    left: 31em;
  } 
#header .nav .tops1{
    left: 15em;
 }
#header .nav .tops2{
  left: 50em;
  }
}
@media all and (min-width:1690px) {
#header .nav .cf{
    left: 45em;
  } 
#header .nav .tops1{
    left: 30em;
 }
#header .nav .tops2{
  left: 69em;
}
}
#rapper{
 margin: 0 auto;
  padding: 0;
　width: 100%;	
 }
/* top-----*/
#top{
background: rgba(78, 173, 0, 0.95);
 width: 100%;
 z-index: 1;
}
#top .color2{
background: rgba(255, 255 ,255, 0.2);
 height: 27em;
  position: absolute;
  top: 25em;
 width: 100%;
 z-index: 1;  
}
#top .fade{
 margin: 0 auto; 
width: 60%;
z-index: 10;   
}
#top .fade .sample li{
  display: inline-block;
  margin: 2em 0;
}
#top .fade .sample figure {
  height: 220px;
  margin: 0 auto;
 overflow: hidden;
 padding: 0;
 position: relative;
 width: 100%;
 }
#top .fade .sample img{
 bottom: 0;
 left: 0;
 margin: auto;
 position: absolute;
  height: 180px;
 right: 0;
 width: 100%;
 }
#top .title{
 top: -.5em;
  position: relative;
  z-index: 10;
}
#top .title .img3{
  overflow: hidden;
   height: 8em;
  margin: 0 auto;
   top: 3em;
  width: 8em; 
 }
#top .title .img3 img{
 height: 8em;
  width: 8em; 
}
#top .title .h1{
  top: 8em;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
   z-index: 10; 
}
#top .title .h1 span{
  animation: h1 infinite alternate;
  color: #fff;
  display: inline-block;
  font-family: 'Fontdiner Swanky', serif;
  font-size: 2.5em;
  font-weight: 500;
  margin: 0em; 
}
#top .title .h1 span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top .title .h1 span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top .title .h1 span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top .title .h1 span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top .title .h1 span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes h1{
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
  }
}
#top .inner{
   color: #fff;
  position: relative;
  top: 3em;
  margin: 1em auto;
  z-index: 10; 
}
#top .inner h2{
  color: #fff;
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 1.1em;
   font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5em;
 text-align: center; 
  }
#top .inner span{
 font-weight: bold;
}
#top .inner .description{
 font-size: 0.9em; 
 margin: 0.5em 2em .5em 2em; 
 line-height: 1.5em; 
 text-align: center;  
}
#top .inner .description2{
  font-size: 0.9em;
  margin: 1em 2em 4em 2em; 
 line-height: 1.7em;
 text-align: center; 
}
#top .nav2{
  display: inline-block;
 margin: 2em 0 3em 3em;
 width: 80%; 
  z-index: 10; 
}
#top .nav2 ul li{ 
 display: inline-flex;
  float: left; 
  overflow: hidden; 
   margin: 0.2em;
}
#top .nav2 .a{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#top .nav2 .a::before,
#top .nav2 .a::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#top .nav2 .a,
#top .nav2 .a::before,
#top .nav2 .a::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#top .nav2 .a{
  background: rgba(78, 173, 0, 0.8);
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#top .nav2 .a:hover{
   color: #fff;
  }
#top .nav2 .a::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#top .nav2 .a:hover::after{
  background-color: rgba(233, 255, 216, 0.4);
  top: 0;
}
#top .nav2 .b{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#top .nav2 .b::before,
#top .nav2 .b::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#top .nav2 .b,
#top .nav2 .b::before,
#top .nav2 .b::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#top .nav2 .b{
  background: #FFB20C;
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#top .nav2 .b:hover{
   color: #fff;
  }
#top .nav2 .b::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#top .nav2 .b:hover::after{
  background-color: rgba(78, 173, 0, 0.8);
  top: 0;
}
#top .nav2 .c{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#top .nav2 .c::before,
#top .nav2 .c::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#top .nav2 .c,
#top .nav2 .c::before,
#top .nav2 .c::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#top .nav2 .c{
  background: rgba(0, 165, 234, 0.8);
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px ;
  color: #fff;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#top .nav2 .c:hover{
   color: #fff;
  }
#top .nav2 .c::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#top .nav2 .c:hover::after{
  background-color: rgba(78, 173, 0, 0.8);
  top: 0;
}
#top .nav2 .d{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#top .nav2 .d::before,
#top .nav2 .d::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#top .nav2 .d,
#top .nav2 .d::before,
#top .nav2 .d::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#top .nav2 .d{
  background: rgba(247, 88, 2, 1.0);
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
 }
#top .nav2 .d:hover{
   color: #fff;
  }
#top .nav2 .d::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#top .nav2 .d:hover::after{
  background-color: rgba(78, 173, 0, 0.8);
  top: 0;
}
#top .nav2 .chips{
  margin: 1em 0 0 4em;
   display: inline-block;
   width: 6em;
   height: 3em;
  line-height: 2.8em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#top .nav2 .chips::before,
#top .nav2 .chips::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#top .nav2 .chips,
#top .nav2 .chips::before,
#top .nav2 .chips::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#top .nav2 .chips{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 1.5px #fff;
  color: #fff;
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#top .nav2 .chips:hover{
   color: rgba(78, 173, 0, 0.8);
  }
#top .nav2 .chips::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#top .nav2 .chips:hover::after{
  background-color: #fff;
  top: 0;
}
@media(min-width:375px){
#top .color2{
  height: 28em;
  top: 25.5em;
}
#top .fade{
 width: 50%;
}  
#top .title .img3{
  height: 8.5em;
  width: 8.5em; 
 }
#top .title .img3 img{
 height: 8.5em;
  width: 8.5em; 
}
#top .title .h1 span{
 font-size: 3em;
}
#top .nav2{
 margin: 2em 0 3em 3.5em;
}
#top .nav2 .a{
 font-size: 1.2em;
}
#top .nav2 .b{
  font-size: 1.2em;
}
#top .nav2 .c{
 font-size: 1.2em;
}
#top .nav2 .d{
 font-size: 1.2em;
 }
#top .nav2 .chips{
  margin: 1em 0 0 4.5em;
}
#top .nav2 .chips{
  font-size: 1.1em;
}
}
@media(min-width:414px){
#top .color2{
  height: 28.5em;
  top: 26.5em;
}
#top .fade .sample figure {
  height: 240px;
}
#top .fade .sample img{
 height: 200px;
}
#top .title .h1 span{
 font-size: 3em;
}
#top .inner{
 top: 3em;
}
#top .inner h2{
  font-size: 1.3em;
}
#top .nav2{
 margin: 1.5em 0 3em 4em;
 width: 80%; 
}
#top .nav2 ul li{ 
  margin: 0.3em;
}
#top .nav2 .chips{
  margin: 1em 0 0 4.8em;
}  
} 
@media(min-width:600px){
#top .color2{
  height: 22em;
  top: 30.5em;
}
#top .fade{
 width: 35%;
}
#top .fade .sample figure {
  height: 230px;
}
#top .fade .sample img{
 height: 210px;
}
#top .inner{
 top: 3em;
  margin: 1em auto;
}
#top .inner h2{
  margin: 0 auto;
  width: 60%; 
}
#top .inner .description2{
 margin: 1em auto; 
 width: 60%; 
}
#top .nav2{
 margin: 3em 0 2em 10em;
 width: 70%; 
}
}
@media(min-width:650px){
#top .color2{
  height: 22em;
  top: 32em;
}
#top .fade .sample figure {
  height: 250px;
}
#top .fade .sample img{
 height: 230px;
}
#top .title{
 top: 0em;
}
#top .nav2{
 margin: 3em 0 1em 12em;
 width: 65%; 
}
}
@media(min-width:724px){
 #top .color2{
  height: 20.5em;
  top: 32em;
} 
#top .fade .sample img{
 height: 250px;
}
#top .nav2{
 margin: 3em 0 1em 14em;
 width: 60%; 
}
}
@media(min-width:960px){
#top .color2{
  height: 18.2em;
  top: 35em;
}
#top .fade{
 width: 30%;
}
#top .fade .sample figure {
  height: 300px;
}
#top .fade .sample img{
 height: 280px;
}
#top .title .img3{
  height: 10em;
  top: 2em;
  width: 10em; 
 }
#top .title .img3 img{
 height: 10em;
  width: 10em; 
}
#top .title .h1{
  top: 8em;
}
#top .title .h1 span{
 font-size: 4em;
}
#top .inner{
 top: 1.5em;
 }
#top .inner h2{
  font-size: 1.5em;
}
#top .nav2{
 margin: 2em 0 1em 21em;
 width: 40%; 
}
#top .nav2 ul li{ 
  margin: 0.4em;
}
#top .nav2 .chips{
  margin: 1em 0 0 5.2em;
}
}
@media(min-width:1280px){
#top .color2{
  height: 18em;
  top: 35.5em;
}
#top .fade{
 width: 23%;
}
#top .fade .sample figure {
  height: 300px;
}
#top .fade .sample img{
 height: 280px;
}
#top .title .img3{
  height: 12em;
  top: 1em;
  width: 12em; 
 }
#top .title .img3 img{
 height: 12em;
  width: 12em; 
}
#top .title .h1{
  top: 8em;
}
#top .title .h1 span{
 font-size: 5em;
}
#top .inner{
 top: 1em;
  margin: 0 auto;
}
#top .inner h2{
  font-size: 1.6em;
}
#top .nav2{
 margin: 1em 0 1em 30em;
 width: 35%; 
}
#top .nav2 .chips{
  margin: 1em 0 0 5.2em;
  }
}
@media(min-width:1365px){
 #top .color2{
  height: 17.5em;
} 
#top .nav2{
 margin: .5em 0 1em 33em;
 width: 35%; 
}
}
@media(min-width:1690px){
  #top .color2{
  height: 17.5em;
} 
#top .nav2{
 margin: .5em 0 1em 50em;
 width: 20%; 
} 
}
/*---main-----------*/
#main{
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  
}
#main .main-gist{
display: inline-block;
   margin: 0 auto;
  color: #000;
  width: 100%;   
}
#main .main-gist .item{
 font-weight: bold;
 font-size: 2.2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main .main-gist .illust{
 height: 150px;
  margin: 0 0 1.5em 5.3em;
  overflow: hidden;
  position: relative;
  width: 50%; 
}
#main .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main .main-gist .description{
 font-size: 0.9em; 
 margin: .5em 2em 0 2em; 
 line-height: 1.5em; 
}
#main .main-gist .description2{
 font-size: 0.9em; 
 margin: 0.5em 2em 2em 2em; 
 line-height: 1.5em;  
}
#main.main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main.main-area .orde{
  list-style: none;
  margin: 0;
  width: 100%;
}
#main .main-area figure{
  float: left;
  height: 10em;
  overflow: hidden;
  position: relative;
   margin: .5em 0 0 2em;
  width: 80%;
}
#main .main-area li{
  margin: 0 auto 1em;
  width: 100%;
}
#main .main-area li .aa {
    bottom: 0;
  color: #fff;
  display: none;
  font-size: 1.3em;
	font-weight: bold;
  left: 0;
  position: absolute;
  text-align: center;
  padding: 25% 0 0 0;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 99;
}
#main .main-area li:hover .aa {
  bottom: 0%;
  color: #fff;
  display: block;
  height: 100%;
  left: 0;
  line-height: 2em;
  position: absolute;
  padding: 2.5em 0;
  right: 0;
 text-align: center;
  top: 0%;
  width: 100%;
  z-index: 99;
}
#main .main-area li:nth-child(1):hover .aa{
 background: rgba(255, 76, 68, 0.7);
}
#main .main-area li:nth-child(2):hover .aa{
 background: rgba(255, 51, 153, 0.7);
}
#main .main-area li:nth-child(3):hover .aa{
 background: rgba(0, 183, 180, 0.7);
}
#main .main-area li:nth-child(4):hover .aa{
 background: rgba(0, 153, 66, 0.7); 
}
#main .main-area li:nth-child(5):hover .aa{
 background: rgba(0, 103, 192, 0.7); 
}
#main .main-area li:nth-child(6):hover .aa{
 background: rgba(93, 8, 114, 0.7); 
}
#main .main-area li:nth-child(7):hover .aa{
 background: rgba(255, 153, 0, 0.7); 
}
#main .main-area li:nth-child(8):hover .aa{
 background: rgba(175, 198, 0, 0.7); 
}
#main .s{
   display: inline-block;
   width: 6em;
   height: 3em;
  line-height: 2.8em;
  text-align: center;
   text-decoration: none;
  outline: none;
  margin: 2em 0 2em 6.8em; 
  }
#main .s::before,
#main .s::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#main .s,
#main .s::before,
#main .s::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#main .s{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 1.5px rgba(78, 173, 0, 0.8);
  color: rgba(78, 173, 0, 0.8);
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#main .s:hover{
   color: #fff;
  }
#main .s::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#main .s:hover::after{
  background-color: rgba(78, 173, 0, 0.8);
  top: 0;
}
@media(min-width:375px){
 #main{
  margin: 0;
}
#main .main-gist .item{
 padding: 2em 0 1em; 
}
#main .main-gist .illust{
 height: 150px;
  margin: 0 0 1.5em 6.5em;
  width: 45%; 
}
#main .main-gist .description{
 margin: 1em 2em 0 3em; 
 width: 75%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 3em; 
 width: 75%; 
}
#main .main-area figure{
  height: 10em;
  margin: .5em 0 0 2.8em;
  width: 75%;
}  
#main .s{
  font-size: 1.1em;
  margin: 2em 0 2em 7.5em; 
 }
}
@media(min-width:414px){
 #main{
  margin: 0;
}
#main .main-gist .item{
  font-size: 2.4em; 
 padding: 2em 0 0.5em; 
}  
#main .main-gist .illust{
 height: 155px;
  margin: 0 0 1.5em 7.5em;
  width: 40%; 
}
#main .main-gist .description{
 width: 77%;
}
#main .main-gist .description2{
 width: 77%; 
}
#main .main-area figure{
  height: 10em;
  margin: .5em 0 0 3em;
  width: 77%;
}
#main .s{
  font-size: 1.1em;
  margin: 2em 0 2em 8.5em; 
 }
}
@media(min-width:600px){
 #main{
  margin: 0;
}
#main .main-gist .item{
  font-size: 2.5em;
  letter-spacing: 0.03em;
}  
#main .main-gist .illust{
 height: 170px;
  margin: 0 0 1.5em 12em;
  width: 30%; 
}
#main .main-gist .description{
  margin: 1em 2em 0 4em;
  width: 80%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 3em 4em; 
 width: 80%; 
}
#main .main-area figure{
  height: 12em;
  margin: .5em;
  width: 47%;
}
#main .main-area img{
  height: 12em;
}
#main .main-area li:hover .aa{
 padding: 3.3em 0;
}

#main .s{
   margin: 2em 0 2em 13.5em; 
}
}  
@media(min-width:650px){
 #main{
  margin: 0;
}
 #main .main-gist .illust{
 height: 180px;
  margin: 0 0 1.5em 13.5em;
}
#main .main-gist .description{
  margin: 0em 2em 0 7em; 
  width: 70%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 7em; 
 width: 70%; 
}
#main .main-area figure{
  height: 12em;
  margin: .55em;
  width: 47.2%;
}
#main .s{
 margin: 2em 0 2em 15.3em; 
 }
}
@media(min-width:724px){
 #main{
  margin: -1em 0;
}
#main .main-gist{
  float: left;
   width: 30%;
 }
#main .main-gist .item{
 padding: 2.5em 0 .5em; 
}  
#main .main-gist .illust{
 height: 190px;
  margin: 0 0 2em 1em;
  width: 85%; 
}
#main .main-gist img{
  width: 85%;
}
#main .main-gist .description{
 font-size: 0.9em; 
 margin: 0 2em 2em 1.5em; 
 line-height: 1.5em; 
  width: 80%;
}
#main .main-gist .description2{
 font-size: 0.9em; 
 margin: 0.5em 2em 2em 1.5em; 
 line-height: 1.5em;
  width: 80%; 
}
#main.main-area{
   float: left;
   width: 70%; 
}
#main .main-area figure{
 height: 12em;
  margin: 0em;
 width: 35%;
}
#main .s{
 margin: 0em 0 0 3.3em;
 position: relative;
  top: -3.5em; 
 }
}
@media(min-width:960px){
#main .main-gist .item{
  font-size: 2.5em;
  letter-spacing: 0.03em;
 padding: 2.5em 0 1em; 
}  
#main .main-gist .illust{
 height: 200px;
  margin: 0 0 2em 2.5em;
  width: 65%; 
}
#main .main-gist img{
  width: 85%;
}  
#main .main-gist .description{
 margin: 0 2em 2em 2.2em; 
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 2.2em; 
}
#main .s{
 margin: 0em 0 0 5.5em;
  top: -4em;
 }  
}
@media(min-width:1280px){
#main .main-gist .item{
  font-size: 3.3em;
  padding: 2.5em 0 1em;
 }
 #main .main-gist .illust{
 height: 238px;
  margin: 0 0 3em 4em;
  width: 60%; 
}
#main .main-gist img{
  width: 85%;
}  
#main .main-gist .description{
 margin: 0 2em 2em 3.5em; 
 width: 75%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 3.5em; 
 width: 75%; 
}
#main .main-area figure{
 height: 232px;
}
#main .main-area img{
  height: 242px;
  }
#main .main-area li .aa{
 font-size: 2em; 
}
#main .main-area li:hover .aa{
 line-height: 1em;
 padding: 3em 0;
}
#main .s{
  margin: 0em 0 0 7.7em;
  top: -5em;
 }
}     
@media(min-width:1365px){
#main .main-gist .illust{
  margin: 0 0 3em 5em;
  width: 55%; 
}
#main .main-gist .description{
 margin: 0 2em 2em 5em; 
 width: 65%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 5em; 
 width: 65%; 
}
#main .main-area figure{
 height: 242px;
 }
#main .main-area img{
  height: 252px;
}
#main .s{
  margin: 0em 0 0 8.7em;
  top: -5em;
 }
} 
@media(min-width:1690px){
#main .main-gist .illust{
  height: 338px;
  margin: 5em 0 6em 6em;
  width: 55%; 
}
#main .main-gist .description{
 margin: 0 2em 2em 6em; 
 width: 65%;
}
#main .main-gist .description2{
 margin: 0.5em 2em 2em 6em; 
 width: 65%; 
}
#main .main-area figure{
 height: 302px;
  width: 35%; 
 }
#main .main-area img{
  height: 322px;
	 width: 100%;
}
#main .s{
  margin: 0em 0 0 11em;
  top: -5em;
 }
}
/*---Concept--------------*/
.concept{
  background: #FFB20C;
 width: 100%;
 }
.concept .horizontal{
   display: inline-block;
  margin: 5em 0 0 1em; 
  width: 90%;
}
.concept .horizontal #sample li{
 display: inline-block; 
 overflow: hidden; 
  text-decoration: none;
  list-style: none;
   float: left;
  position: relative;
 
}
.concept .horizontal #sample figure{
  height: 15em;
 width: 100%; 
}
.concept .horizontal #sample img{
 height: 14em;
 width: 100%; 
}
.concept .Title{
 color: #fff;
 display: inline-block;
  margin: 1em 0; 
  width: 100%; 
} 
.concept .Title h1{
 font-size: 2.5em;
 font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
 text-align: center; 
}
.concept .subtitle{
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;   text-align: center;
width: 100%;  
}
.concept .subtitle .issue{
  font-size: 1.8em;
  letter-spacing: -0.02em;
   padding: 0;
 }
.concept .subtitle .episode{
   font-size: 1.3em;
  letter-spacing: -0.03em;
  line-height: 1.5em;
 }
.concept .subtitle .translation{
  font-size: 0.9em;
  line-height: 1.5em;
}
.concept .s{
   display: inline-block;
   width: 6em;
   height: 3em;
  line-height: 2.8em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
.concept .s::before,
.concept .s::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
.concept .s,
.concept .s::before,
.concept .s::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
.concept .s{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 1.5px rgba(78, 173, 0, 0.8);
  color: rgba(78, 173, 0, 0.8);
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
 margin: 2em 0 1em 6.8em; 
  }
.concept .s:hover{
   color: #fff;
  }
.concept .s::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
.concept .s:hover::after{
  background-color: rgba(78, 173, 0, 0.8);
  top: 0;
}
@media(min-width:375px){
 .concept .horizontal{
  margin: 5em 0 0 .7em; 
  width: 94%;
}
.concept .horizontal #sample img{
 height: 15em;
}
.concept .s{
  font-size: 1.1em;
  margin: 2em 0 1em 7.5em; 
  }
}
@media(min-width:414px){
.concept .horizontal{
 margin: 5em 0 0 .75em; 
  width: 94%
}
.concept .horizontal #sample figure{
  height: 16em;
 }
.concept .horizontal #sample img{
 height: 16em;
}
.concept .s{
  margin: 2em 0 1em 8.5em; 
  }
}
@media(min-width:600px){
.concept .horizontal{
 margin: 5em 0 0 7.5em; 
  width: 60%
}
.concept .horizontal #sample figure{
  height: 16em;
 }
.concept .horizontal #sample img{
 height: 16em;
}
.concept .Title h1{
 font-size: 3em;
}
.concept .subtitle .issue{
  font-size: 2em;
}
.concept .s{
   margin: 2em 0 1em 14em; 
  }
}
@media(min-width:650px){
.concept .horizontal{
 margin: 5em 0 0 9em; 
  width: 55%
}
.concept .s{
  margin: 2em 0 1em 15.5em; 
}
}
@media(min-width:724px){
  .concept{
  margin: -3.5em 0 3.5em 0;
 }
.concept .horizontal{
 margin: 0 0 0 .5em; 
  width: 53%
}
.concept .horizontal #sample figure{
  height: 24em;
 }
.concept .horizontal #sample img{
 height: 19em;
}
.concept .Title{
 margin: 0; 
  width: 45%; 
} 
.concept .Title h1{
 font-size: 2.5em;
}
.concept .subtitle .issue{
  font-size: 1.8em;
 }
.concept .s{
  margin: 2em 0 1em 6.5em; 
  }
}
@media(min-width:960px){
 .concept .horizontal{
 margin: 0 0 0 1.5em; 
  width: 53%
}
.concept .horizontal #sample figure{
  height: 25em;
 }
.concept .horizontal #sample img{
 height: 19em;
}
.concept .Title{
  width: 43%; 
} 
.concept .Title h1{
 font-size: 3em;
}
.concept .s{
  margin: 2em 0 1em 9em; 
  }
}
@media(min-width:1280px){
.concept .horizontal{
 margin: 0 0 0 10em; 
  width: 40%
}
.concept .horizontal #sample figure{
  height: 25em;
 }
.concept .horizontal #sample img{
 height: 20em;
}
.concept .Title{
 width: 43%; 
} 
.concept .s{
  margin: 2em 0 1em 13em; 
 }
}
@media(min-width:1365px){
.concept .horizontal{
 margin: 0 0 0 11em; 
 }
.concept .s{
  margin: 2em 0 1em 14em; 
  }
}
/*---contents--------------*/
#contents{
  color: #fff;
  background: #000;
  font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0;
  width: 100%;
}
#contents .inner{
  display: inline-block;
  margin: 0 auto;
  color: #fff;
  width: 100%;  
}
#contents .inner .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0em; 
 margin: 0 auto; 
  padding: 2em 0 1em; 
 text-align: center;
 width: 100%; 
}
#contents .inner  figure{
  height: 120px;
  margin: 0 0 0 4em;
  overflow: hidden;
  position: relative;
  width: 60%; 
}
#contents .inner img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#contents .inner a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#contents .inner img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#contents .inner .description{
 font-size: 1em; 
 text-align: center;
 line-height: 1.5em;
 margin: 2em 2em 0 2em;
 }
#contents .inner .description2{
 font-size: 0.9em;
 padding: 0 0 3em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em;
 text-align: center;
}
#contents .music-side{
  display: inline-block;
  margin: 0 auto;
   width: 100%; 
}
#contents .music-side ul{
 margin: 0;
  width: 100%;
}
#contents .music-side li{
 background: rgba(0, 165, 234, 0.8);
  margin: 0 auto 1em;
  width: 80%;  
}
#contents .music-side figure{
 background: rgba(0, 165, 234, 0.8);
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#contents .music-side img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 80%;
}
#contents .music-side a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#contents .music-side img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#contents .music-side dl{
  font-weight: bold;
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#contents .music-side .genre {
  border: 1px solid #000;
  display: inline-block;
  font-size: .75em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#contents .music-side .artist{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 1em;
  -webkit-line-clamp: 1;
  line-height: 1.25;
  margin: 0 auto .5em;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}
#contents .music-side .song{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 1em;
  -webkit-line-clamp: 1;
  line-height: 1.25;
  margin: 0 auto .5em;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}
#contents .music-side time{
  font-size: .75em;
  line-height: 1;
}
#contents .s{
   display: inline-block;
   width: 6em;
   height: 3em;
  line-height: 2.8em;
  text-align: center;
   text-decoration: none;
  outline: none;
   margin: 2em 0 2em 6.8em;
  }
#contents .s::before,
#contents .s::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#contents .s,
#contents .s::before,
#contents .s::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#contents .s{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 1.5px rgba(78, 173, 0, 1.0);
  color: rgba(78, 173, 0, 1.0);
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#contents .s:hover{
   color: #fff;
  }
#contents .s::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#contents .s:hover::after{
  background-color: rgba(78, 173, 0, 1.0);
  top: 0;
}
@media(min-width:375px){
#contents{
  margin: 0;
}
#contents .inner  figure{
  margin: 0 0 0 5em;
}
#contents .music-side li{
 width: 75%;  
}
#contents .s{
  font-size: 1.1em;
  margin: 1.5em 0 2em 7.8em;
 }  
}
@media(min-width:414px){
#contents{
 margin: 0;
}  
#contents .music-side li{
  width: 77%;  
}
#contents .s{
  margin: 2em 0 2em 9em;
 }  
}
@media(min-width:600px){
#contents{
  margin: 0;
}
#contents .inner .item{
 letter-spacing: 0.01em; 
}
#contents .inner  figure{
  height: 160px;
 margin: 0.5em 0 0 9em;
 width: 50%; 
}
#contents .inner img{
 width: 75%;
}
#contents .inner .description{
  margin: 2em 2em 0 4.5em;
 }
#contents .inner .description2{
 margin: 1em 2em 0 4.5em; 
}  
#contents .music-side{
  display: inline-block;
  margin: 0 auto;
 width: 100%; 
}
#contents .music-side li{
  float: left;
 margin: .5em;
  width: 47%;  
}
#contents .music-side img{
 width: 80%;
}
#contents .music-side dl{
 height: 118px;
}
#contents .s{
  margin: 1.8em 0 2em 13.5em;
 }   
}
@media(min-width:650px){
#contents{
 margin: 0;
}
#contents .inner  figure{
 margin: 0 0 0 11em;
 width: 45%; 
}
#contents .music-side li{
 margin: .55em;
  width: 47%;  
}
#contents .s{
  margin: 1.8em 0 2em 15.1em;
 }  
}
@media(min-width:724px){
#contents{
 margin: -3.5em 0;
}
#contents .inner{
   float: left;
   width: 30%;  
}
#contents .inner .item{
 letter-spacing: -0.01em; 
 padding: 5em 0 1em; 
}
#contents .inner  figure{
 margin: 0.5em 0 0 1.5em; 
 width: 85%; 
}
#contents .inner img{
 width: 85%;
}  
#contents .music-side{
 margin: 1em auto 0;
 width: 70%; 
}
#contents .music-side li{
  float: left;
  width: 45%;  
}
#contents .music-side .genre{
 font-size: .69em;
}
#contents .s{
  margin: 0em 0 0 3.3em;
  position: relative;
  top: -8.5em;
 }  
}
@media(min-width:960px){
#contents .inner  figure{
  height: 130px;
 margin: 0.5em 0 0 2em;
 width: 80%; 
}
#contents .inner img{
 width: 80%;
}
#contents .inner .description{
  margin: 3em 2em 0 1em;
 }
#contents .music-side{
 margin: 1em auto 0;
 width: 70%; 
}
#contents .music-side li{
width: 46%;  
}
#contents .music-side img{
 width: 80%;
}
#contents .music-side .genre{
 font-size: .7em;
}
#contents .s{
  margin: 0em 0 0 5.5em;
  top: -9em;
 }  
}
@media(min-width:1280px){
#contents .inner .item{
 font-size: 3em;
 padding: 3em 0 1em; 
}
#contents .inner  figure{
  height: 180px;
 margin: 0.5em 0 0 2.5em;
 width: 80%; 
}
#contents .inner img{
 width: 80%;
}
#contents .inner .description{
 font-size: 1.2em; 
 margin: 3em 2em 0 2em;
 }
#contents .inner .description2{
 font-size: 0.9em;
 padding: 0 0 3em; 
 margin: 2em 2em 0 2em; 
}
#contents .music-side li{
 margin: .2em;
  width: 48.5%;  
}
#contents .music-side figure{
 float: left;
  height: 150px;
  margin: 0;
  width: 37.5%;  
}
#contents .music-side img{
 width: 80%;
}
#contents .music-side dl{
   height: 150px;
  padding: 1em;
}
#contents .music-side .genre{
 font-size: .8em;
 padding: .5em .5em;
}
#contents .music-side .artist{
 font-size: 1.2em;
}
#contents .music-side .song{
  font-size: 1.2em;
 }
#contents .music-side time{
  font-size: .8em;
} 
#contents .s{
  margin: 0em 0 0 7.7em;
  top: -10em;
 }   
}
@media(min-width:1365px){
#contents .s{
  margin: 0em 0 0 8.5em;
  top: -10.5em;
 } 
#contents .inner  figure{
  height: 190px;
 }
#contents .inner img{
 width: 80%;
}
}
@media(min-width:1690px){
 #contents .inner  figure{
  height: 250px;
 margin: 0.5em 0 0 3em;
 width: 80%; 
}
#contents .inner img{
 width: 75%;
}
#contents .music-side img{
 width: 55%;
} 
 #contents .s{
  margin: 0em 0 0 12.7em;
 } 	
}
/*---subjectt-art--------------*/
#subjectt-art{
 color: #000; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  margin: 0;
 width: 100%;  
}
#subjectt-art .inner{
  display: inline-block;
  margin: 0 auto;
 width: 100%;  
}
#subjectt-art .inner .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0em; 
 margin: 0 auto; 
  padding: 2em 0 1em; 
 text-align: center;
 width: 100%; 
}
#subjectt-art .inner figure{
  height: 160px;
  margin: -1em 0 0 6em;
  overflow: hidden;
  position: relative;
  width: 40%; 
}
#subjectt-art .inner img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#subjectt-art .inner a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#subjectt-art .inner img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#subjectt-art .inner .description{
 font-size: .9em; 
 text-align: center;
 line-height: 1.5em;
 margin: 2em 2em 0 2em;
 }
#subjectt-art .art-side{
 display: inline-block;
  margin: 0 auto;
   width: 100%;  
}
#subjectt-art .art-side ul{
 margin: 0;
  width: 100%;
}
#subjectt-art .art-side li{
 border: 2px solid rgba(247, 88, 2, 1.0); 
  margin: 1em auto 0;
  width: 95%;  
}
#subjectt-art .art-side figure{
  float: left;
  height: 200px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 47.5%;  
}
#subjectt-art .art-side img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#subjectt-art .art-side a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#subjectt-art .art-side img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#subjectt-art dl{
  font-weight: bold;
  box-sizing: border-box;
  margin: 0 0 0 47.5%;
  padding: .5em;
  width: auto;
}
#subjectt-art .birthplace a{
	color: #000;
}
#subjectt-art .birthplace {
  border: 1px solid #000;
  display: inline-block;
  font-size: .75em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#subjectt-art .time{
font-size: .75em;
  line-height: 1.25;
  margin: 0 auto .5em;
}
#subjectt-art .artist{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 1em;
  -webkit-line-clamp: 1;
  line-height: 1.25;
  margin: 0 auto .5em;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}
#subjectt-art .Painting{
   display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 1em;
  -webkit-line-clamp: 1;
  line-height: 1.25;
  margin: 0 auto .5em;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;
}
#subjectt-art span{
  font-size: .75em;
  font-weight: 500;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-height: 1.5;
  margin: 0 auto 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-white-space: nowrap;  
}
#subjectt-art .s{
   display: inline-block;
   width: 6em;
   height: 3em;
  line-height: 2.8em;
  text-align: center;
   text-decoration: none;
  outline: none;
   margin: 2em 0 2em 6.8em;
  }
#subjectt-art .s::before,
#subjectt-art .s::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#subjectt-art .s,
#subjectt-art .s::before,
#subjectt-art .s::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#subjectt-art .s{
  font-family: 'Fontdiner Swanky', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; 
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 1.5px rgba(78, 173, 0, 1.0);
  color: rgba(78, 173, 0, 1.0);
   font-size: 1em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#subjectt-art .s:hover{
   color: #fff;
  }
#subjectt-art .s::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#subjectt-art .s:hover::after{
  background-color: rgba(78, 173, 0, 1.0);
  top: 0;
}
@media all and (min-width: 360px) {
 #subjectt-art .inner figure{
  height: 222px;
  margin: -1.5em 0 0 7em;
} 
}
@media all and (min-width: 375px) {
 #subjectt-art{
 margin: 0;
}
#subjectt-art .inner .item{
 font-size: 2.2em;
}
#subjectt-art .inner figure{
  height: 200px;
  margin: -1.5em 0 0 7em;
}
#subjectt-art .inner .description{
 font-size: 1em; 
  margin: 1.5em 2em 2em 2em;
 }
#subjectt-art .s{
  font-size: 1.1em;
  margin: 1.5em 0 2em 7.8em;
 }  
}
@media all and (min-width: 414px) {
 #subjectt-art{
  margin: 0;
}
#subjectt-art .inner figure{
  height: 210px;
  margin: -1.5em 0 0 8em;
  width: 37%; 
}
#subjectt-art .inner img{
  width: 75%;
}
#subjectt-art .inner .description{
 font-size: 0.9em; 
}
#subjectt-art .art-side img{
  width: 68%;
}
#subjectt-art .s{
  margin: 2em 0 2em 9em;
 }  
}
@media all and (min-width: 480px) {
 #subjectt-art .inner figure{
  height: 240px;
  margin: -1.5em 0 0 9em;
  width: 37%; 
} 
}
@media all and (min-width: 568px) {
  #subjectt-art .inner figure{
  height: 255px;
  margin: -1.5em 0 0 11em;
  width: 33%; 
}  
}
@media all and (min-width: 600px) {
 #subjectt-art{
 margin: 0;
}
#subjectt-art .inner figure{
  height: 220px;
  margin: -1.5em 0 0 11.5em;
  width: 37%; 
}
#subjectt-art .inner img{
  width: 55%;
}
#subjectt-art .art-side li{
  float: left; 
 margin: .4em;
 width: 47.1%;  
}
#subjectt-art dl{
  height: 118px;
}
#subjectt-art .s{
  margin: 1.8em 0 2em 13.5em;
 }  
}
@media all and (min-width: 650px) {
 #subjectt-art{
 margin: 0;
}
#subjectt-art .inner figure{
  height: 240px;
  margin: -1.5em 0 0 13em;
}
#subjectt-art .art-side li{
 width: 47.3%;  
}
#subjectt-art .s{
  margin: 1.8em 0 2em 15.1em;
 }  
}
@media all and (min-width: 667px) {
 #subjectt-art .inner figure{
  height: 250px;
  margin: -1.5em 0 0 13em;
  width: 37%; 
}
}
@media all and (min-width: 724px) {
 #subjectt-art{
 margin: 3.5em 0;
}
#subjectt-art .inner{
 float: left;
   width: 30%;  
}
#subjectt-art .inner .item{
 font-size: 2em;
 padding: 3em 0 1em; 
}
#subjectt-art .inner figure{
  height: 290px;
  margin: -1.5em 0 0 2em;
  width: 85%; 
}
#subjectt-art .inner img{
  width: 85%;
}
#subjectt-art .inner .description{
 font-size: 0.95em; 
}
#subjectt-art .art-side{
 margin: 1em auto 0;
 width: 70%; 
}
#subjectt-art .art-side li{
 margin: .5em;
 width: 45%;  
}
#subjectt-art .s{
  margin: 0em 0 0 3.3em;
  position: relative;
  top: -7.5em;
 }   
}
@media all and (min-width: 768px) {
 #subjectt-art .inner figure{
  height: 290px;
  margin: -1.5em 0 0 2em;
  width: 80%; 
} 
}
@media all and (min-width: 812px) {
 #subjectt-art .inner figure{
  height: 290px;
  margin: -1.5em 0 0 2em;
  width: 75%; 
}  
}
@media all and (min-width: 960px) {
 #subjectt-art{
 margin: 3.5em 0;
}
#subjectt-art .inner figure{
  height: 300px;
  margin: -1.5em 0 0 3em;
  width: 75%; 
}
#subjectt-art .inner img{
  width: 75%;
}
#subjectt-art .inner .description{
 font-size: 0.9em; 
  margin: 1.5em 2em 2em 2em;
 }
#subjectt-art .art-side{
  width: 69.2%; 
}
#subjectt-art .art-side li{
 width: 46.3%;  
}
#subjectt-art .art-side figure{
  height: 200px;
  width: 47.5%;  
}
#subjectt-art .art-side img{
  width: 75%;
}
#subjectt-art .s{
  margin: 0em 0 0 5.5em;
  top: -8em;
 }  
}
@media all and (min-width: 1024px) {
 #subjectt-art .inner figure{
  height: 300px;
  margin: -1.5em 0 0 3em;
  width: 70%; 
} 
}
@media all and (min-width: 1280px) {
 #subjectt-art{
 margin: 3.5em 0;
}
#subjectt-art .inner{
 float: left;
   width: 30.3%;  
}
#subjectt-art .inner .item{
 font-size: 3em;
 padding: 2em 0 1em; 
}
#subjectt-art .inner figure{
  height: 353px;
  margin: -2em 0 0 4em;
  width: 70%; 
}
#subjectt-art .inner img{
  width: 70%;
}
#subjectt-art .art-side li{
 margin: .2em;
 width: 48.5%;  
}
#subjectt-art .art-side figure{
  height: 222px;
  width: 37.5%;  
}
#subjectt-art .art-side img{
  width: 75%;
}
#subjectt-art dl{
  height: 222px;
  margin: 0 0 0 37.5%;
  padding: 1em;
}
#subjectt-art .birthplace{
  font-size: .8em;
}
#subjectt-art .time{
font-size: .8em;
}
#subjectt-art .artist{
  font-size: 1.2em;
}
#subjectt-art .Painting{
   font-size: 1.2em;
}
#subjectt-art span{
  font-size: .8em;
}
#subjectt-art .s{
  margin: 0em 0 0 7.7em;
  top: -7em;
 }  
}
@media all and (min-width: 1365px) {
#subjectt-art{
 margin: 3.5em 0;
}
#subjectt-art .inner figure{
  height: 353px;
  margin: -2em 0 0 4em;
  width: 65%; 
}	
#subjectt-art .s{
  margin: 0em 0 0 8.5em;
  top: -6.5em;
 }   
}
@media all and (min-width: 1690px) {
 #subjectt-art .inner figure{
  height: 393px;
  margin: -2em 0 0 6em;
  width: 50%; 
}  
#subjectt-art .s{
  margin: 0em 0 0 12.5em;
  top: -6.5em;
 }  
#subjectt-art .art-side img{
  width: 60%;
} 
  }  
/*---footer----*/
footer{
  background: #333;
  color: #fff;
}
footer nav{
  font-size: 1em;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  text-align: center; 
  margin: 2em 0 0;
  }
footer nav #outline li{
  display: inline-block;
  margin: 0 0.8em 1.5em 0;
}
/*---Red Tabby--------------*/
#content1 {
  background: rgba(255, 76, 68, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top1 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top1 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top1 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top1 .title span {
  animation: title infinite alternate;
  color: rgba(255, 76, 68, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 4em;
  font-weight: 500;
  margin: -.01em;
}
#top1 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top1 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top1 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top1 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top1 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top1 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top1 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top1 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main1{
  background: rgba(255, 76, 68, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main1 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main1 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main1 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main1 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main1 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main1 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main1 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main1 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main1 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main1 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main1 .main-area ul{
   margin: 0;
  width: 100%;
}
#main1 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main1 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main1 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main1 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main1 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main1 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main1 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main1 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main1 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main1 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main1 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main1 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main1 .main-area figure{
 height: 118px;
}
#main1 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main1 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main1 .main-gist{
 float: left; 
 width: 30%;   
}
#main1 .main-gist .item{
  font-size: 2.5em;
 }
#main1 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main1 .main-gist .illust{
 width: 70%; 
}
#main1 .main-gist img{
  width: 75%;
}
#main1 .main-area{
 width: 70%; 
}
#main1 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main1 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main1 .main-gist .illust{
 width: 70%; 
}
#main1 .main-gist img{
  width: 75%;
}
#main1 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main1 .main-area img{
  width: 75%;
}
#main1 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main1 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main .main-area img{
  width: 55%;
}  
}
@media(min-width:1690px){
#main .main-area img{
  width: 50%;
}	
}
/*---nav----*/
#page-nav{
  background-color: #fff;
  z-index: 10; 
}
#page-nav ul{
  display:inline-block; 
   overflow: hidden;
  margin: 1.15em; 
 }
#page-nav li{
   font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  float: left;
   margin: 0.2em; 
}
#page-nav .a{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .a::before,
#page-nav .a::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .a,
#page-nav .a::before,
#page-nav .a::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .a{
 background-color: rgba(255, 51, 153, 1);
   position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .a:hover{
   color: rgba(255, 51, 153, 1);
  }
#page-nav .a::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .a:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .b{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .b::before,
#page-nav .b::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .b,
#page-nav .b::before,
#page-nav .b::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .b{
  background: rgba(255, 76, 68, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .b:hover{
   color: rgba(255, 76, 68, 1);
  }
#page-nav .b::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .b:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .c{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .c::before,
#page-nav .c::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .c,
#page-nav .c::before,
#page-nav .c::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .c{
  background: rgba(255, 153, 0, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .c:hover{
   color: rgba(255, 153, 0, 1);
  }
#page-nav .c::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .c:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .d{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .d::before,
#page-nav .d::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .d,
#page-nav .d::before,
#page-nav .d::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .d{
  background: rgba(198, 224, 0, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
 }
#page-nav .d:hover{
   color: rgba(181, 219, 0, 1);
  }
#page-nav .d::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .d:hover::after{
   background: #fff;
  top: 0;
}
#page-nav .e{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .e::before,
#page-nav .e::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .e,
#page-nav .e::before,
#page-nav .e::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .e{
  background: rgba(0, 153, 51, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .e:hover{
   color: rgba(0, 153, 51, 1);
  }
#page-nav .e::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .e:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .f{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .f::before,
#page-nav .f::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .f,
#page-nav .f::before,
#page-nav .f::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .f{
  background: rgba(0, 183, 180, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .f:hover{
   color: rgba(0, 183, 180, 1);
  }
#page-nav .f::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .f:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .g{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .g::before,
#page-nav .g::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .g,
#page-nav .g::before,
#page-nav .g::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .g{
  background: rgba(0, 103, 192, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
  }
#page-nav .g:hover{
   color: rgba(0, 103, 192, 1);
  }
#page-nav .g::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .g:hover::after{
  background-color: #fff;
  top: 0;
}
#page-nav .h{
   display: inline-block;
   width: 3em;
   height: 3em;
  line-height: 2.5em;
  text-align: center;
   text-decoration: none;
  outline: none;
  }
#page-nav .h::before,
#page-nav .h::after{
  position: absolute;
  z-index:-1;
  display: block;
  content:"";
  }
#page-nav .h,
#page-nav .h::before,
#page-nav .h::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .0s;
  transition: all .0s;
}
/*-----------------effect*/
#page-nav .h{
  background: rgba(93, 8, 114, 1);
  position: relative;
   z-index: 99;
   border-radius: 50%;
   border: double 5px #fff;
  color: #fff;
   font-size: 1.25em;
  font-weight: bold;
 letter-spacing: 0.08em;
  overflow: hidden;
 }
#page-nav .h:hover{
   color: rgba(51,0,102, 1);
  }
#page-nav .h::after{
  top: -100%;
  width: 100%;
  height: 100%;
  }
#page-nav .h:hover::after{
  background-color: #fff;
  top: 0;
}
@media(min-width:375px){
#page-nav ul{
   margin: 1.5em 2.8em; 
 }  
}
@media(min-width:414px){
#page-nav ul{
   margin: 1.5em 4em; 
 }  
}
@media(min-width:600px){
#page-nav ul{
   margin: 1.5em; 
 }  
}
@media(min-width:650px){
#page-nav ul{
   margin: 1.5em 3em; 
 }  
}
@media(min-width:724px){
#page-nav ul{
   margin: 1.5em 5.5em; 
 }  
}
@media(min-width:960px){
#page-nav ul{
   margin: 1.5em 12.5em; 
 }  
}
@media(min-width:1280px){
#page-nav ul{
   margin: 1.5em 22em; 
 }  
 }
@media(min-width:1365px){
#page-nav ul{
   margin: 1.5em 25em; 
 }  
}
@media(min-width:1690px){
#page-nav ul{
   margin: 1.5em 41.8em; 
 } 
}

/*---Solid White--------------*/
#content8 {
  background: rgba(255, 51, 153, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top8 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top8 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top8 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top8 .title span {
  animation: title infinite alternate;
  color: rgba(255, 51, 153, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 3.8em;
  font-weight: 500;
  margin: -.01em;
}
#top8 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top8 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top8 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top8 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top8 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
#top8 .title span {
font-size: 4em;    
}   
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top8 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top8 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top8 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top8 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main8{
  background: rgba(255, 51, 153, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main8 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main8 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main8 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main8 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main8 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main8 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main8 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main8 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main8 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main8 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main8 .main-area ul{
   margin: 0;
  width: 100%;
}
#main8 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main8 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main8 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main8 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main8 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main8 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main8 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main8 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main8 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main8 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main8 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main8 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main8 .main-area figure{
 height: 118px;
}
#main8 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main8 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main8 .main-gist{
 float: left; 
 width: 30%;   
}
#main8 .main-gist .item{
  font-size: 2.5em;
 }
#main8 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main8 .main-gist .illust{
 width: 70%; 
}
#main8 .main-gist img{
  width: 75%;
}
#main8 .main-area{
 width: 70%; 
}
#main8 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main8 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main8 .main-gist .illust{
 width: 70%; 
}
#main8 .main-gist img{
  width: 75%;
}
#main8 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main8 .main-area img{
  width: 75%;
}
#main8 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main8 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main8 .main-area img{
  width: 55%;
}  
}
/*---nav----*/


/*---Silver Tabby--------------*/
#content5 {
  background: rgba(0, 183, 180, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top5 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top5 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top5 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top5 .title span {
  animation: title infinite alternate;
  color: rgba(0, 183, 180, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 3.5em;
  font-weight: 500;
  margin: -.01em;
}
#top5 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top5 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top5 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top5 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top5 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
  #top5 .title span {
    font-size: 4em;
  }  
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top5 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top5 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top5 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top5 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main5{
  background: rgba(0, 183, 180, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main5 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main5 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main5 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main5 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main5 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main5 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main5 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main5 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main5 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main5 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main5 .main-area ul{
   margin: 0;
  width: 100%;
}
#main5 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main5 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main5 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main5 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main5 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main5 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main5 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main5 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main5 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main5 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main5 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main5 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main5 .main-area figure{
 height: 118px;
}
#main5 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main5 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main5 .main-gist{
 float: left; 
 width: 30%;   
}
#main5 .main-gist .item{
  font-size: 2.5em;
 }
#main5 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main5 .main-gist .illust{
 width: 70%; 
}
#main5 .main-gist img{
  width: 75%;
}
#main5 .main-area{
 width: 70%; 
}
#main5 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main5 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main5 .main-gist .illust{
 width: 70%; 
}
#main5 .main-gist img{
  width: 75%;
}
#main5 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main5 .main-area img{
  width: 75%;
}
#main5 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main5 .main-area img{
  width: 60%;
}  
}
/*---nav----*/

/*---Tortoiseshell--------------*/
#content4 {
  background: rgba(0, 153, 66, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top4 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top4 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top4 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top4 .title span {
  animation: title infinite alternate;
  color: rgba(0, 153, 66, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 3.3em;
  font-weight: 500;
  margin: -.01em;
}
#top4 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top4 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top4 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top4 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top4 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
  #top4 .title span {
   font-size: 4em;
  }  
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top4 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top4 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top4 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top4 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main4{
  background: rgba(0, 153, 66, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main4 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main4 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main4 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main4 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main4 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main4 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main4 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main4 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main4 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main4 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main4 .main-area ul{
   margin: 0;
  width: 100%;
}
#main4 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main4 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main4 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main4 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main4 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main4 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main4 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main4 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main4 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main4 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main4 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main4 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main4 .main-area figure{
 height: 118px;
}
#main4 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main4 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main4 .main-gist{
 float: left; 
 width: 30%;   
}
#main4 .main-gist .item{
  font-size: 2.5em;
 }
#main4 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main4 .main-gist .illust{
 width: 70%; 
}
#main4 .main-gist img{
  width: 75%;
}
#main4 .main-area{
 width: 70%; 
}
#main4 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main4 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main4 .main-gist .illust{
 width: 70%; 
}
#main4 .main-gist img{
  width: 75%;
}
#main4 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main4 .main-area img{
  width: 65%;
}
#main4 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main4 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main4 .main-area img{
  width: 55%;
}  
}
/*---nav----*/

/*---Blue Solid--------------*/
#content6 {
  background: rgba(0, 103, 192, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top6 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top6 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top6 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top6 .title span {
  animation: title infinite alternate;
  color: rgba(0, 103, 192, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 4em;
  font-weight: 500;
  margin: -.01em;
}
#top6 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top6 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top6 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top6 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top6 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top6 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top6 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top6 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top6 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main6{
  background: rgba(0, 103, 192, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main6 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main6 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main6 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main6 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main6 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main6 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main6 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main6 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main6 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main6 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main6 .main-area ul{
   margin: 0;
  width: 100%;
}
#main6 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main6 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main6 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main6 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main6 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main6 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main6 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main6 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main6 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main6 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main6 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main6 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main6 .main-area figure{
 height: 118px;
}
#main6 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main6 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main6 .main-gist{
 float: left; 
 width: 30%;   
}
#main6 .main-gist .item{
  font-size: 2.5em;
 }
#main6 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main6 .main-gist .illust{
 width: 70%; 
}
#main6 .main-gist img{
  width: 75%;
}
#main6 .main-area{
 width: 70%; 
}
#main6 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main6 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main6 .main-gist .illust{
 width: 70%; 
}
#main6 .main-gist img{
  width: 75%;
}
#main6 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main6 .main-area img{
  width: 75%;
}
#main6 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main6 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main6 .main-area img{
  width: 55%;
}  
}
/*---nav----*/

/*---Solid Black--------------*/
#content7 {
  background: rgba(93, 8, 114, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top7 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top7 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top7 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top7 .title span {
  animation: title infinite alternate;
  color: rgba(93, 8, 114, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 3.9em;
  font-weight: 500;
  margin: -.01em;
}
#top7 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top7 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top7 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top7 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top7 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
#top7 .title span {
font-size: 4em;    
}  
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top7 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top7 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top7 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top7 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main7{
  background: rgba(93, 8, 114, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main7 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main7 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main7 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main7 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main7 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main7 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main7 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main7 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main7 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main7 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main7 .main-area ul{
   margin: 0;
  width: 100%;
}
#main7 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main7 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main7 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main7 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main7 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main7 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main7 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main7 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main7 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main7 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main7 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main7 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main7 .main-area figure{
 height: 118px;
}
#main7 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main7 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main7 .main-gist{
 float: left; 
 width: 30%;   
}
#main7 .main-gist .item{
  font-size: 2.5em;
 }
#main7 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main7 .main-gist .illust{
 width: 70%; 
}
#main7 .main-gist img{
  width: 75%;
}
#main7 .main-area{
 width: 70%; 
}
#main7 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main7 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main7 .main-gist .illust{
 width: 70%; 
}
#main7 .main-gist img{
  width: 75%;
}
#main7 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main7 .main-area img{
  width: 75%;
}
#main7 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main7 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main7 .main-area img{
  width: 55%;
}  
}
/*---nav----*/

/*---Brown Tabby--------------*/
#content02 {
  background: rgba(255, 153, 0, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top02 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top02 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top02 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top02 .title span {
  animation: title infinite alternate;
  color: rgba(255, 153, 0, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 3.3em;
  font-weight: 500;
  margin: -.01em;
}
#top02 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top02 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top02 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top02 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top02 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
 #top02 .title span{
   font-size: 3.6em; 
  }  
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
  #top02 .title span{
   font-size: 4em; 
  } 
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top02 .title span{
   font-size: 5em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top02 .title span{
   font-size: 6em; 
  } 
}
@media(min-width:960px){
 #top02 .title span{
   font-size: 7em; 
  } 
}
@media(min-width:1280px){
 #top02 .title span{
   font-size: 8em; 
  } 
}
/*---main--------------*/
#main02{
  background: rgba(255, 153, 0, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main02 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main02 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 2em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main02 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main02 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main02 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 85%;
}
#main02 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main02 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main02 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main02 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main02 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main02 .main-area ul{
   margin: 0;
  width: 100%;
}
#main02 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main02 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main02 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main02 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main02 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main02 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main02 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main02 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main02 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main02 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:375px){
 #main02 .main-gist .illust{
 width: 60%; 
 } 
}
@media(min-width:414px){
 #main02 .main-gist .illust{
 width: 53%; 
 } 
}
@media(min-width:600px){
#main02 .main-gist .illust{
 height: 180px;
 width: 40%; 
 }
#main02 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main02 .main-area figure{
 height: 118px;
}
#main02 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main02 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main02 .main-gist{
 float: left; 
 width: 30%;   
}
#main02 .main-gist .item{
  font-size: 2.5em;
 }
#main02 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main02 .main-gist .illust{
 width: 70%; 
}
#main02 .main-gist img{
  width: 75%;
}
#main02 .main-area{
 width: 70%; 
}
#main02 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main02 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main02 .main-gist .illust{
 width: 70%; 
}
#main02 .main-gist img{
  width: 75%;
}
#main02 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main02 .main-area img{
  width: 75%;
}
#main02 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main02 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main02 .main-area img{
  width: 55%;
}  
}
/*---nav----*/

/*---Calico--------------*/
#content03 {
  background: rgba(175, 198, 0, 1);
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
#top03 {
  display: inline-block;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
  width: 100%;
  z-index: 500;
}
#top03 .filter {
  background: rgba(0,0,0,.15);
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
   width: 100%;
  z-index: 500;
}
#top03 .title {
  top: 50%;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
}
#top03 .title span {
  animation: title infinite alternate;
  color: rgba(198, 224, 0, 1);
  display: inline-block;
 font-family: 'Abril Fatface', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-size: 5em;
  font-weight: 500;
  margin: -.01em;
}
#top03 .title span:nth-child(1) {
  animation-delay: 0s;
  animation-duration: 10s;
}

#top03 .title span:nth-child(2n) {
  animation-delay: 0s;
  animation-duration: 17.5s;
}

#top03 .title span:nth-child(3n) {
  animation-delay: 0s;
  animation-duration: 20s;
}

#top03 .title span:nth-child(4n) {
  animation-delay: 0s;
  animation-duration: 12.5s;
}

#top03 .title span:nth-child(5n) {
  animation-delay: 0s;
  animation-duration: 15s;
}

@keyframes title {
0% {
  transform: translateY(0) scale(1);
}
50% {
  transform: translateY(.25em) scale(1);
}
75% {
  transform: translateY(0) scale(1);
}
100% {
  transform: translateY(-.25em) scale(1);
}
}
#top-slider {
  display: block;
}
#top-slider2{
display: none;  
}
#top-slider li {
  display: inline-block;
  overflow: hidden;
  width: 100%;
}
#top-slider figure {
  height: 250px;
}
#top-slider img {
  height: 250px;
}
@media(min-width:375px){
#top-slider figure {
  height: 285px;
}
#top-slider img {
  height: 285px;
} 
  }
@media(min-width:414px){
#top-slider figure {
  height: 300px;
}
#top-slider img {
  height: 300px;
}   
}
@media(min-width:420px){
 #top-slider {
  display: none;
}
#top-slider2 {
  display: block;
}
#top-slider2 figure {
  height: 250px;
}
 #top-slider2 img{
   height: 250px;  
  }  
}
@media(min-width:600px){
  #top03 .title span{
   font-size: 6em; 
  } 
 #top-slider2 figure {
  height: 260px;
}
 #top-slider2 img{
   height: 260px;  
  }  
}
@media(min-width:724px){
 #top03 .title span{
   font-size: 7em; 
  } 
 #top-slider2 figure {
  height: 280px;
}
 #top-slider2 img{
   height: 280px;  
  }
}
@media(min-width:960px){
 #top03 .title span{
   font-size: 8em; 
  }
  #top-slider2 figure {
  height: 300px;
}
 #top-slider2 img{
   height: 320px;  
}
}
@media(min-width:1280px){
 #top03 .title span{
   font-size: 9em; 
  }
  #top-slider2 figure {
  height: 310px;
}
 #top-slider2 img{
   height: 330px;  
} 
}
/*---main--------------*/
#main03{
  background: rgba(175, 198, 0, 1);
 color: #fff; 
 font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  margin: 0 auto;
  width: 100%;
}
#main03 .main-gist{
display: inline-block;
   margin: 0 auto;
  width: 100%;   
}
#main03 .main-gist .item{
 font-weight: bold;
 font-size: 2em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 1.5em 0 .5em 0; 
 text-align: center;
 width: 100%;
}
#main03 .main-gist .item-jap{
 font-weight: bold;
 font-size: 1.5em;
 letter-spacing: 0.02em; 
 margin: 0 auto; 
  padding: 0 0 1em 0; 
 text-align: center;
 width: 100%;
}
#main03 .main-gist .illust{
 height: 150px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  width: 70%; 
}
#main03 .main-gist img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main03 .main-gist a:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main03 .main-gist img:hover {
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main03 .main-gist .description{
 font-size: 0.9em; 
 margin: 1em 2em 0 2em; 
 line-height: 1.5em; 
  text-align: center;
}
#main03 .main-gist .description2{
 font-size: 0.9em; 
 margin: .5em 2em 2em 2em; 
 line-height: 1.5em; 
 text-align: center; 
}
#main03 .main-area{
  display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
#main03 .main-area ul{
   margin: 0;
  width: 100%;
}
#main03 .main-area li{
 margin: 0 auto 1em;
  width: 100% 
}
#main03 .main-area figure{
  float: left;
  height: 118px;
  margin: 0;
  overflow: hidden;
  position: relative;
  width: 37.5%;  
}
#main03 .main-area img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 75%;
}
#main03 .main-area a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
#main03 .main-area img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
#main03 .main-area dl{
  box-sizing: border-box;
  margin: 0 0 0 37.5%;
  padding: .5em;
  width: auto;
}
#main03 .main-area .genre{
  border: 1px solid #000;
  display: inline-block;
  font-size: 1.2em;
  line-height: 1;
  margin: 0 .5em .5em 0;
  padding: .5em .5em;
  width: auto;
}
#main03 .main-area .commentary1{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main03 .main-area .commentary2{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
#main03 .main-area .commentary3{
  font-size: .9em;
 line-height: 1.5em;
  margin: 0 auto .5em;
  padding: 0;
 }
@media(min-width:600px){
#main03 .main-gist .illust{
 height: 180px;
 width: 50%; 
 }
#main03 .main-area li{
  float: left;
 margin: .5em;
  width: 47% 
}
#main03 .main-area figure{
 height: 118px;
}
#main03 .main-area dl{
  height: 300px; 
}
}
@media(min-width:650px){
 #main03 .main-gist .illust{
 height: 200px;
}
}
@media(min-width:960px){
 #main03 .main-gist{
 float: left; 
 width: 30%;   
}
#main03 .main-gist .item{
  font-size: 2.5em;
 }
#main03 .main-gist .item-jap{
 font-size: 2em;
  padding: 0;
 }
#main03 .main-gist .illust{
 width: 70%; 
}
#main03 .main-gist img{
  width: 75%;
}
#main03 .main-area{
 width: 70%; 
}
#main03 .main-area dl{
  height: 270px; 
}  
}
@media(min-width:1280px){
#main03 .main-gist .item{
 padding: 1.5em 0 .5em 0; 
}
#main03 .main-gist .illust{
 width: 70%; 
}
#main03 .main-gist img{
  width: 75%;
}
#main03 .main-gist .description{
 margin: 1em 2em 0 2em; 
}
#main03 .main-area img{
  width: 75%;
}
#main03 .main-area dl{
  height: 250px; 
}
}
@media(min-width:1365px){
#main03 .main-area img{
  width: 60%;
}  
}
@media(min-width:1469px){
#main03 .main-area img{
  width: 55%;
}  
}

/*---nav----*/


/* --catbeas music-----------------------*/
/* --01 TOMMY FLANAGAN-----------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist1 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket1 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket1 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket1 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket1 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket1 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side1{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side1 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side1 ol {
  margin: 0;
  width: 100%;
}
.list-side1 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side1 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title1 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket1 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket1 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket1 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket1 {
  float: right;
  width: 60%;
}
.album-jacket1 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side1{
 width: 40%; 
}
.list-side1 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side1 li{
  border: none;
 padding: 1em;
 }
.list-side1 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
}
@media(min-width:650px){
.album-jacket1 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist1 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket1 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side1 time {
 padding: 1em 0 1em 2em;
}  
 .list-side1 ol{
     margin: 0 0 0 3em;
  }
  .list-side1 li{
 padding: 1em 3em 1em 1em;
 }
 .list-side1 .comment {
  line-height: 2em;
  padding: 1.5em 2em 0 3em;
 }   
.title1 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist1 {
 font-size: 3em;
}
.album-jacket1 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket1 img{
  width: 92%;
 }
.list-side1 time {
 padding: 1em 0 1em 2em;
}  
 .list-side1 ol{
     margin: 0 0 0 3em;
  }
 .list-side1 .comment {
  padding: 1.5em 1em 0 3em;
 } 
.title1 {
font-size: 3em;
 padding: 4em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 font-size: 1.2em;
  line-height: 1;
  margin: 1.5em 0 0 1em;
  padding: .5em .5em;
}
.artist1 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.album-jacket1 {
  float: right;
  width: 60%;
}
.album-jacket1 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket1 img{
  width: 94%;
 }
.list-side1{
 width: 40%; 
}
.list-side1 time {
  font-size: 1em;
  line-height: 2em;
  padding: 1em 0 1em 3em;
}
  .list-side1 ol{
     margin: 0 0 0 4em;
  }  
.list-side1 .comment {
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 2em 0 3.5em;
}
.title1 {
font-size: 3em;
  margin: 0;
  padding: 5em 0 1em;
}  
}
/*JIMMY SMITH-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist2 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket2 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket2 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket2 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket2 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket2 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side2{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side2 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side2 ol {
  margin: 0;
  width: 100%;
}
.list-side2 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side2 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title2 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket2 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket2 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket2 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket2 {
  float: right;
  width: 60%;
}
.album-jacket2 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side2{
 width: 40%; 
}
.list-side2 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side2 li{
  border: none;
 padding: .5em;
 }
.list-side2 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket2 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist2 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket2 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side2 time {
 padding: 1em 0 1em 2em;
}  
 .list-side2 ol{
     margin: 0 0 0 3em;
  }
  .list-side2 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side2 .comment {
 padding: 1.5em 2em 0 3em;
 }   
.title2 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist2 {
 font-size: 3em;
}
.album-jacket2 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket2 img{
  width: 92%;
 }
.list-side2 time {
 padding: 1em 0 1em 2em;
}  
 .list-side2 ol{
     margin: 0 0 0 3em;
  }
 .list-side2 .comment {
  padding: 1.5em 1em 0 3em;
 } 
.title2 {
font-size: 3em;
 padding: 4em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist2 {
 padding: 1em 0 1em;
}
.album-jacket2 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket2 img{
  width: 94%;
 }
.list-side2 time {
  padding: 1em 0 1em 3em;
}
 .list-side2 ol{
     margin: 0 0 0 4em;
  }   
.list-side2 .comment {
padding: 1.5em 2em 0 3.5em;
}
.title2 {
 padding: 5em 0 1em;
}  
}
/* G.F. FITZ-GERALD-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist3 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket3 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket3 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket3 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket3 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket3 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side3{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side3 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side3 ol {
  margin: 0;
  width: 100%;
}
.list-side3 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side3 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title3 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket3 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket3 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket3 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket3 {
  float: right;
  width: 60%;
}
.album-jacket3 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side3{
 width: 40%; 
}
.list-side3 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side3 li{
  border: none;
 padding: .5em 2.5em 0 .5em;
 }
.list-side3 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket3 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist3 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket3 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side3 time {
 padding: 1em 0 1em 2em;
}  
 .list-side3 ol{
     margin: 0 0 0 3em;
  }
  .list-side3 li{
 padding: .5em 3em 0 1em;
 }
 .list-side3 .comment {
 padding: 1.5em 2em 0 3em;
 }   
.title3 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist3 {
 font-size: 3em;
}
.album-jacket3 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket3 img{
  width: 92%;
 }
.list-side3 time {
 padding: 1em 0 1em 2em;
}  
 .list-side3 ol{
     margin: 0 0 0 3em;
  }
   .list-side3 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side3 .comment {
  padding: 1.5em 1em 0 3em;
   line-height: 2em;
 } 
.title3 {
font-size: 3em;
 padding: 2em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist3 {
 padding: 1em 0 1em;
}
.album-jacket3 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket3 img{
  width: 94%;
 }
.list-side3 time {
  padding: 1em 0 1em 3em;
}
 .list-side3 ol{
     margin: 0 0 0 4em;
  }   
.list-side3 .comment {
padding: 1.5em 2em 0 3.5em;
}
.title3 {
 padding: 2em 0 1em;
}  
}
/* GilScott-Heron&Brian Jackson-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist4 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket4 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket4 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket4 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket4 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket4 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side4{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side4 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side4 ol {
  margin: 0;
  width: 100%;
}
.list-side4 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side4 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title4 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket4 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket4 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket4 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket4 {
  float: right;
  width: 60%;
}
.album-jacket4 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side4 {
 width: 40%; 
}
.list-side4 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side4 li{
  border: none;
 padding: .5em 2.5em 0 .5em;
 }
.list-side4 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket4 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist4 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket4 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side4 time {
 padding: 1em 0 1em 2em;
}  
 .list-side4 ol{
     margin: 0 0 0 3em;
  }
  .list-side4 li{
 padding: .5em 3em 0 1em;
 }
 .list-side4 .comment {
 padding: 1.5em 2em 0 3em;
 }   
.title1 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist4 {
 font-size: 3em;
}
.album-jacket4 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket4 img{
  width: 92%;
 }
.list-side4 time {
 padding: 1em 0 1em 2em;
}  
 .list-side4 ol{
     margin: 0 0 0 3em;
  }
   .list-side4 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side4 .comment {
  padding: 1.5em 1em 0 3em;
   line-height: 2em;
 } 
.title4 {
font-size: 3em;
 padding: 2.5em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist4 {
 padding: 1em 0 1em;
}
.album-jacket4 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket4 img{
  width: 94%;
 }
.list-side4 time {
  padding: 1em 0 1em 3em;
}
 .list-side4 ol{
     margin: 0 0 0 4em;
  }   
.list-side4 .comment {
padding: 1.5em 2em 0 3.5em;
}
.title4 {
 padding: 2.5em 0 1em;
}  
}
/* Tina Brooks-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist5 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket5 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket5 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket5 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket5 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket5 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side5{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side5 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side5 ol {
  margin: 0;
  width: 100%;
}
.list-side5 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side5 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title5 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket5 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket5 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket5 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket5 {
  float: right;
  width: 60%;
}
.album-jacket5 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side5{
 width: 40%; 
}
.list-side5 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side5 li{
  border: none;
 padding: 1em;
 }
.list-side5 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
}
@media(min-width:650px){
.album-jacket5 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist5 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket5 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side5 time {
 padding: 1em 0 1em 2em;
}  
 .list-side5 ol{
     margin: 0 0 0 3em;
  }
  .list-side5 li{
 padding: 1em 3em 1em 1em;
 }
 .list-side5 .comment {
  line-height: 2em;
  padding: 1.5em 2em 0 3em;
 }   
.title5 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist5 {
 font-size: 3em;
}
.album-jacket5 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket5 img{
  width: 92%;
 }
.list-side5 time {
 padding: 1em 0 1em 2em;
}  
 .list-side5 ol{
     margin: 0 0 0 3em;
  }
 .list-side5 .comment {
  padding: 1.5em 1em 0 3em;
 } 
.title5 {
font-size: 3em;
 padding: 3em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 font-size: 1.2em;
  line-height: 1;
  margin: 1.5em 0 0 1em;
  padding: .5em .5em;
}
.artist5 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.album-jacket5 {
  float: right;
  width: 60%;
}
.album-jacket5 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket5 img{
  width: 94%;
 }
.list-side5{
 width: 40%; 
}
.list-side5 time {
  font-size: 1em;
  line-height: 2em;
  padding: 1em 0 1em 3em;
}
  .list-side5 ol{
     margin: 0 0 0 4em;
  }  
.list-side5 .comment {
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 3.5em;
}
.title5 {
font-size: 3em;
  margin: 0;
  padding: 3em 0 1em;
}  
}
/* Jawbreaker-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist6 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket6 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket6 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket6 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket6 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket6 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side6{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side6 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side6 ol {
  margin: 0;
  width: 100%;
}
.list-side6 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side6 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title6 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket6 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket6 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket6 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket6 {
  float: right;
  width: 60%;
}
.album-jacket6 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side6{
 width: 40%; 
}
.list-side6 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side6 li{
  border: none;
 padding: .5em 2.5em 0 .5em;
 }
.list-side6 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket6 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist6 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket6 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side6 time {
 padding: 1em 0 1em 2em;
}  
 .list-side6 ol{
     margin: 0 0 0 3em;
  }
  .list-side6 li{
 padding: .5em 3em 0 1em;
 }
 .list-side6 .comment {
 padding: 1.5em 2em 0 3em;
 }   
.title6 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist6 {
 font-size: 3em;
}
.album-jacket6 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket6 img{
  width: 92%;
 }
.list-side6 time {
 padding: 1em 0 1em 2em;
}  
 .list-side6 ol{
     margin: 0 0 0 3em;
  }
   .list-side6 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side6 .comment {
  padding: 1.5em 1em 0 3em;
   line-height: 2em;
 } 
.title6 {
font-size: 3em;
 padding: 2em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist6 {
 padding: 1em 0 1em;
}
.album-jacket6 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket6 img{
  width: 94%;
 }
.list-side6 time {
  padding: 1em 0 1em 3em;
}
 .list-side6 ol{
     margin: 0 0 0 4em;
  }   
.list-side6 .comment {
padding: 1.5em 2em 0 3.5em;
}
.title6 {
 padding: 1em 0 1em;
}  
}
/* Radiohead-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist7 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket7 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket7 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket7 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket7 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket7 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side7{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side7 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side7 .Type{
  font-size: 1em;
  padding: 3em 0 1em 1em;
  margin: 0;
 }
.list-side7 ol {
  margin: 0;
  width: 100%;
}
.list-side7 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side7 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title7 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket7 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket7 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket7 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket7 {
  float: right;
  width: 60%;
}
.album-jacket7 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side7{
 width: 40%; 
}
.list-side7 .Type{
  padding: 1em 0 .5em 1em;
 }  
.list-side7 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side7 li{
  border: none;
 padding: .5em 2.5em 0.5em;
 }
.list-side7 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket7 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist7 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket7 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side7 time {
 padding: 1em 0 1em 2em;
}  
 .list-side7 ol{
     margin: 0 0 0 3em;
  }
  .list-side7 li{
 padding: .5em 3em 0 1em;
 }
 .list-side7 .comment {
  padding: 1.5em 2em 0 3em;
 }   
.title7 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist7 {
 font-size: 3em;
}
.album-jacket7 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket7 img{
  width: 92%;
 }
.list-side7 time {
 padding: 1em 0 1em 2em;
}  
 .list-side7 ol{
     margin: 0 0 0 3em;
  }
   .list-side7 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side7 .comment {
  padding: 1.5em 1em 0 3em;
   line-height: 2em;
 } 
.title7 {
font-size: 3em;
 padding: 2.5em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist7 {
 padding: 1em 0 1em;
}
.album-jacket7 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket7 img{
  width: 94%;
 }
.list-side7{
 width: 40%; 
}
.list-side7 time {
 padding: 1em 0 1em 3em;
}
  .list-side7 ol{
     margin: 0 0 0 4em;
  }  
.list-side7 .comment {
  padding: 1.5em 2em 0 3.5em;
}
.title7 {
 padding: 3em 0 1em;
}  
}
/* Venetian Snares-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist8 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket8 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket8 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket8 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket8 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket8 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side8 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side8 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side8 ol {
  margin: 0;
  width: 100%;
}
.list-side8 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side8 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title8 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket8 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket8 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket8 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket8 {
  float: right;
  width: 60%;
}
.album-jacket8 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side8{
 width: 40%; 
}
.list-side8 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side8 li{
  border: none;
 padding: .5em 2.5em 0 .5em;
 }
.list-side8 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket8 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist8 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket8 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side8 time {
 padding: 1em 0 1em 2em;
}  
 .list-side8 ol{
     margin: 0 0 0 3em;
  }
  .list-side8 li{
 padding: .3em 3em 0 1em;
 }
 .list-side8 .comment {
 padding: 1em 2em 0 3em;
 line-height: 1.3em;  
 }   
.title8 {
font-size: 2.5em;
 padding: 1em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist8 {
 font-size: 3em;
}
.album-jacket8 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket8 img{
  width: 92%;
 }
.list-side8 time {
 padding: 1em 0 1em 2em;
}  
 .list-side8 ol{
     margin: 0 0 0 3em;
  }
   .list-side8 li{
 padding: .3em 3em .5em 1em;
 }
 .list-side8 .comment {
  padding: 1em 1em 0 3em;
   line-height: 2em;
 } 
.title8 {
font-size: 3em;
 padding: 1em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist8 {
 padding: 1em 0 1em;
}
.album-jacket8 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket8 img{
  width: 94%;
 }
.list-side8 time {
  padding: 1em 0 1em 3em;
}
 .list-side8 ol{
     margin: 0 0 0 4em;
  }   
.list-side8 .comment {
padding: 1em 2em 0 3.5em;
}
.title8 {
 padding: 1em 0 1em;
}  
}
/* Too Short-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist9 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket9 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket9 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket9 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket9 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket9 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side9 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side9 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side9 ol {
  margin: 0;
  width: 100%;
}
.list-side9 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side9 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title9 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket9 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket9 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket9 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket9 {
  float: right;
  width: 60%;
}
.album-jacket9 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side9{
 width: 40%; 
}
.list-side9 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side9 li{
  border: none;
 padding: .3em 2.5em 0 .5em;
 }
.list-side9 .comment {
  font-size: .8em;
  padding: 1em 1em 0 1.5em;
  line-height: 1.3em;
}
.title9 {
 padding: .5em 0 1em;
}   
}
@media(min-width:650px){
.album-jacket9 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist9 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket9 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side9 time {
 padding: 1em 0 1em 2em;
}  
 .list-side9 ol{
     margin: 0 0 0 3em;
  }
  .list-side9 li{
 padding: .2em 3em 0 1em;
 }
 .list-side9 .comment {
 padding: 1em 2em 0 3em;
 line-height: 1.3em;  
 }   
.title9 {
font-size: 2.5em;
 padding: .5em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist9 {
 font-size: 3em;
}
.album-jacket9 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket9 img{
  width: 92%;
 }
.list-side9 time {
 padding: 1em 0 1em 2em;
}  
 .list-side9 ol{
     margin: 0 0 0 3em;
  }
   .list-side9 li{
 padding: .2em 3em .5em 1em;
 }
 .list-side9 .comment {
  padding: 1em 1em 0 3em;
   line-height: 1.5em;
 } 
.title9 {
font-size: 3em;
 padding: .5em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist9 {
 padding: 1em 0 1em;
}
.album-jacket9 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket9 img{
  width: 94%;
 }
.list-side9 time {
  padding: 1em 0 1em 3em;
}
 .list-side9 ol{
     margin: 0 0 0 4em;
  }   
.list-side9 .comment {
padding: 1em 2em 0 3.5em;
}
.title9 {
 padding: .5em 0 1em;
}  
}
/* Various Artists-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist10 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket10 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket10 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket10 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket10 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket10 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side10 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side10 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side10 ol {
  margin: 0;
  width: 100%;
}
.list-side10 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side10 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title10 {
font-size: 1.7em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket10 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket10 img{
  width: 93%;
  }
.title10 {
font-size: 2.1em;
}  
}
@media(min-width:414px){
.album-jacket10 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
.title10 {
font-size: 2.3em;
}  
}
@media(min-width:600px){
.album-jacket10 {
  float: right;
  width: 60%;
}
.album-jacket10 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side10{
 width: 40%; 
}
.list-side10 ol{
     margin: 0 0 0 2em;
  }  
.list-side10 li{
  border: none;
 padding: .2em 2.5em 0 .5em;
 }
.list-side10 .comment {
  font-size: .8em;
  padding: 1em 0em 0 1.5em;
  line-height: 1.3em;
}
.title10 {
 padding: .5em 0 1em;
}   
}
@media(min-width:650px){
.album-jacket10 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist10 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket10 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side10 time {
 padding: 1em 0 1em 2em;
}  
 .list-side10 ol{
     margin: 0 0 0 3em;
  }
  .list-side10 li{
 padding: .15em 3em 0 1em;
 }
 .list-side10 .comment {
 padding: 1em 0em 0 3em;
 line-height: 1.3em;  
 }   
.title10 {
font-size: 2.5em;
 padding: .5em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist10 {
 font-size: 3em;
}
.album-jacket10 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket10 img{
  width: 92%;
 }
.list-side10 time {
 padding: 1em 0 1em 2em;
}  
 .list-side10 ol{
     margin: 0 0 0 3em;
  }
   .list-side10 li{
 padding: .1em 3em .5em 1em;
 }
 .list-side10 .comment {
  padding: 1em 1em 0 3em;
   line-height: 1.5em;
 } 
.title10 {
font-size: 3em;
 padding: .5em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist10 {
 padding: 1em 0 1em;
}
.album-jacket10 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket10 img{
  width: 94%;
 }
.list-side10 time {
  padding: 1em 0 1em 3em;
}
 .list-side10 ol{
     margin: 0 0 0 4em;
  }   
.list-side10 .comment {
padding: 1em 2em 0 3.5em;
}
.title10 {
 padding: .5em 0 1em;
}  
}
/* MGMT-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist11 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket11 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket11 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket11 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket11 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket11 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side11{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side11 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side11 ol {
  margin: 0;
  width: 100%;
}
.list-side11 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side11 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title11 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media(min-width:375px){
.album-jacket11 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket11 img{
  width: 93%;
  }
}
@media(min-width:414px){
.album-jacket11 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media(min-width:600px){
.album-jacket11 {
  float: right;
  width: 60%;
}
.album-jacket11 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side11 {
 width: 40%; 
}
.list-side11 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side11 li{
  border: none;
 padding: .5em 2.5em 0 .5em;
 }
.list-side11 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.5em;
}
}
@media(min-width:650px){
.album-jacket11 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
}
@media(min-width:724px){
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist11 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket11 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side11 time {
 padding: 1em 0 1em 2em;
}  
 .list-side11 ol{
     margin: 0 0 0 3em;
  }
  .list-side11 li{
 padding: .5em 3em 0 1em;
 }
 .list-side11 .comment {
 padding: 1.5em 2em 0 3em;
 }   
.title11 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media(min-width:960px){
.genres {
 font-size: 1.2em;
 }
.artist11 {
 font-size: 3em;
}
.album-jacket11 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket11 img{
  width: 92%;
 }
.list-side11 time {
 padding: 1em 0 1em 2em;
}  
 .list-side11 ol{
     margin: 0 0 0 3em;
  }
   .list-side11 li{
 padding: .5em 3em .5em 1em;
 }
 .list-side11 .comment {
  padding: 1.5em 1em 0 3em;
   line-height: 2em;
 } 
.title11 {
font-size: 3em;
 padding: 2.5em 0 1em;
}  
}
@media(min-width:1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist11 {
 padding: 1em 0 1em;
}
.album-jacket11 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket11 img{
  width: 94%;
 }
.list-side11 time {
  padding: 1em 0 1em 3em;
}
 .list-side11 ol{
     margin: 0 0 0 4em;
  }   
.list-side11 .comment {
padding: 1.5em 2em 0 3.5em;
}
.title11 {
 padding: 2.5em 0 1em;
}  
}
/* James-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.genres {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.artist12 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.album-jacket12 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.album-jacket12 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 290px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.album-jacket12 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.album-jacket12 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.album-jacket12 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-side12{
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-side12 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-side12 .Type{
   color: rgba(252, 245, 189, 0.7);
  font-weight: bold;
  font-size: 1em;
  padding: 3em 0 1em 1em;
  margin: 0;
 }
.list-side12 ol {
  margin: 0;
  width: 100%;
}
.list-side12 li {
 border: .5px solid rgba(252, 245, 189, 0.3);
 font-size: 1em;
  padding: 1em 0 1em 1em;
 }
.list-side12 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.title12 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
.album-jacket12 figure{
 height: 310px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket12 img{
  width: 93%;
  }  
}
@media all and (min-width: 375px) {
.album-jacket12 figure{
 height: 320px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.album-jacket12 img{
  width: 93%;
  }
}
@media all and (min-width: 414px) {
.album-jacket12 figure{
 height: 335px;
  margin: 0 0 0 2em;
  width: 84%;  
}
}
@media all and (min-width: 600px) {
.album-jacket12 {
  float: right;
  width: 60%;
}
.album-jacket12 figure{
 height: 335px;
  margin: 0;
  width: 95%;  
}
.list-side12{
 width: 40%; 
}
.list-side12 .Type{
  padding: 1em 0 .5em 1em;
 }  
.list-side12 ol{
     margin: 0 0 0 1.5em;
  }  
.list-side12 li{
  border: none;
 padding: .2em 2.5em 0 0.5em;
 }
.list-side12 .comment {
  font-size: .8em;
  padding: 1em 0 0 1.5em;
  line-height: 1.5em;
}
  .title12{
   font-size: 1.7em;  
  }  
}
@media all and (min-width: 650px) {
.album-jacket12 figure{
 height: 340px;
 margin: 0 0 0 1em;
  width: 90%;  
}
 .title12{
   font-size: 1.9em;  
  }  
}
@media all and (min-width: 724px) {
.genres {
 font-size: 1em;
  margin: 2em 0 0 .7em;
  padding: .5em .5em;
}
.artist12 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.album-jacket12 figure{
 height: 390px;
  margin: 0 0 0 .5em;
  width: 93%;  
}
.list-side12 time {
 padding: 1em 0 1em 2em;
}  
 .list-side12 ol{
     margin: 0 0 0 3em;
  }
  .list-side12 li{
 padding: .2em 3em 0 1em;
 }
 .list-side12 .comment {
  padding: 1.5em 0 0 3em;
 }   
.title12 {
font-size: 2.3em;
 padding: .5em 0 1em;
}  
}
@media all and (min-width: 900px) {
.genres {
 font-size: 1.2em;
 }
.artist12 {
 font-size: 3em;
}
.album-jacket12 figure{
 height: 480px;
  margin: 0 0 0 2em;
  width: 85%;  
}
.album-jacket12 img{
  width: 92%;
 }
.list-side12 time {
 padding: 1em 0 1em 2em;
}  
 .list-side12 ol{
     margin: 0 0 0 3em;
  }
   .list-side12 li{
 padding: .2em 3em 0 1em;
 }
 .list-side12 .comment {
  padding: 1.5em 1.5em 0 3em;
 } 
.title12 {
font-size: 3em;
 padding: .5em 0 1em;
}  
}
@media all and (min-width: 1280px){
.genres {
 margin: 1.5em 0 0 1em;
}
.artist12 {
 padding: 1em 0 1em;
}
.album-jacket12 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 68%;  
}
.album-jacket12 img{
  width: 94%;
 }
.list-side12{
 width: 40%; 
}
.list-side12 time {
 padding: 1em 0 1em 3em;
}
  .list-side12 ol{
     margin: 0 0 0 4em;
  }  
.list-side12 .comment {
  padding: 1.5em 0 0 3.5em;
}
.title12 {
 padding: 1.5em 0 1em;
}  
}
/* Theophile Alexandre Steinlen-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist1 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.Painting-jacket1 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket1 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 402px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket1 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket1 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket1 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area1 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area1 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area1 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area1 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title1 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket1 figure{
 height: 432px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket1 img{
  width: 93%;
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket1 figure{
 height: 450px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket1 figure{
 height: 500px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 480px) {
 .Painting-jacket1 figure{
 height: 580px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 568px) {
 .Painting-jacket1 figure{
 height: 695px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket1 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket1 {
  float: left;
  width: 60%;
}
.Painting-jacket1 figure{
 height: 465px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket1 img{
  width: 93%;
  }   
.list-area1 {
 width: 40%; 
}
.list-area1 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title1 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 2em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket1 figure{
 height: 465px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title1 {
padding: 3em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket1 figure{
 height: 480px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area1 {
 width: 40%; 
}   
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist1 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket1 figure{
 height: 450px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket1 img{
  width: 90%;
  }  
.list-area1 time {
 padding: 1em 0 1em 1em;
}  
 .list-area1 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title1 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket1 figure{
 height: 455px;
  width: 74%;  
}
}
@media all and (min-width: 812px) {
.Painting-jacket1 figure{
 height: 460px;
 width: 70%;  
}
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 3em;
  padding: .3em .3em;
}
.art-artist1 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket1 figure{
 height: 470px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket1 img{
  width: 90%;
  }  
.list-area1 time {
 padding: 1em 0 1em 1em;
}  
 .list-area1 .comment {
   font-size: .9em; 
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title1 {
font-size: 3em;
 padding: 2.5em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket1 figure{
 height: 500px;
}
.paint-title1 {
padding: 4em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1.5em 0 0 5em;
}
.Painting-jacket1 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area1 time {
 padding: 1em 0 1em 0;
}  
 .list-area1 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title1 {
  padding: 4em 0 1em;
}        
}
/* Pierre Bonnard-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist2 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.Painting-jacket2 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket2 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 402px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket2 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket2 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket2 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area2 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area2 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area2 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area2 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title2 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket2 figure{
 height: 432px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket1 img{
  width: 93%;
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket2 figure{
 height: 450px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket2 figure{
 height: 500px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 480px) {
 .Painting-jacket2 figure{
 height: 580px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 568px) {
 .Painting-jacket2 figure{
 height: 695px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket2 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket2 {
  float: left;
  width: 60%;
}
.Painting-jacket2 figure{
 height: 465px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket2 img{
  width: 93%;
  }   
.list-area2 {
 width: 40%; 
}
.list-area2 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title2 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 2em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket2 figure{
 height: 465px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title2 {
padding: 3em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket2 figure{
 height: 480px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area2 {
 width: 40%; 
}   
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist2 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket2 figure{
 height: 450px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket2 img{
  width: 90%;
  }  
.list-area2 time {
 padding: 1em 0 1em 1em;
}  
 .list-area2 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title2 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket2 figure{
 height: 455px;
  width: 74%;  
}
}
@media all and (min-width: 812px) {
.Painting-jacket2 figure{
 height: 460px;
 width: 70%;  
}
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 3em;
  padding: .3em .3em;
}
.art-artist2 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket2 figure{
 height: 470px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket2 img{
  width: 90%;
  }  
.list-area2 time {
 padding: 1em 0 1em 1em;
}  
 .list-area2 .comment {
  font-size: .9em; 
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title2 {
font-size: 3em;
 padding: 2em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket2 figure{
 height: 500px;
}
.paint-title2 {
padding: 3em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1.5em 0 0 5em;
}
.Painting-jacket2 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area2 time {
 padding: 1em 0 1em 0;
}  
 .list-area2 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title2 {
  padding: 4.5em 0 1em;
}        
}
/* 歌川 芳藤-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: .5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist3 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.Painting-jacket3 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket3 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 402px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket3 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket3 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket3 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area3 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area3 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area3 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area3 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title3 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket3 figure{
 height: 432px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket3 img{
  width: 93%;
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket3 figure{
 height: 450px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket3 figure{
 height: 500px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 480px) {
 .Painting-jacket3 figure{
 height: 580px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 568px) {
 .Painting-jacket3 figure{
 height: 695px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket3 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket3 {
  float: left;
  width: 60%;
}
.Painting-jacket3 figure{
 height: 465px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket3 img{
  width: 93%;
  }   
.list-area3 {
 width: 40%; 
}
.list-area3 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title3 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 2em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket3 figure{
 height: 465px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title3 {
padding: 3em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket3 figure{
 height: 480px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area3 {
 width: 40%; 
}   
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: .5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist3 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket3 figure{
 height: 450px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket3 img{
  width: 90%;
  }  
.list-area3 time {
 padding: 1em 0 1em 1em;
}  
 .list-area3 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title3 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket3 figure{
 height: 455px;
  width: 74%;  
}
}
@media all and (min-width: 812px) {
.Painting-jacket3 figure{
 height: 460px;
 width: 70%;  
}
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1em 0 0 3em;
  padding: .3em .3em;
}
.art-artist3 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket3 figure{
 height: 470px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket3 img{
  width: 90%;
  }  
.list-area3 time {
 padding: 1em 0 1em 1em;
}  
 .list-area3 .comment {
   font-size: .9em;
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title3 {
font-size: 3em;
 padding: 2em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket3 figure{
 height: 500px;
}
.paint-title3 {
padding: 2em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1em 0 0 5em;
}
.Painting-jacket3 figure{
 height: 520px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area3 time {
 padding: 1em 0 1em 0;
}  
 .list-area3 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title3 {
  padding: 3em 0 1em;
}        
}
/* Louis Wain-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist4 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}
.Painting-jacket4 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket4 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 422px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket4 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket4 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket4 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area4 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area4 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area4 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area4 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title4 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket4 figure{
 height: 452px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket4 img{
  width: 93%;
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket4 figure{
 height: 470px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket4 figure{
 height: 520px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 480px) {
 .Painting-jacket4 figure{
 height: 610px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 568px) {
 .Painting-jacket4 figure{
 height: 725px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket4 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket4 {
  float: left;
  width: 60%;
}
.Painting-jacket4 figure{
 height: 485px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket4 img{
  width: 93%;
  }   
.list-area4 {
 width: 40%; 
}
.list-area4 .comment {
 padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title4 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1.5em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket4 figure{
 height: 485px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title4 {
padding: 4em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket4 figure{
 height: 500px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area4 {
 width: 40%; 
}   
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist4 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket4 figure{
 height: 470px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket4 img{
  width: 90%;
  }  
.list-area4 time {
 padding: 1em 0 1em 1em;
}  
 .list-area4 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title4 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket4 figure{
 height: 475px;
  width: 74%;  
}
}
@media all and (min-width: 812px) {
.Painting-jacket4 figure{
 height: 480px;
 width: 70%;  
}
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 3em;
  padding: .3em .3em;
}
.art-artist4 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket4 figure{
 height: 485px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket4 img{
  width: 90%;
  }  
.list-area4 time {
 padding: 1em 0 1em 1em;
}  
 .list-area4 .comment {
   font-size: .9em; 
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title4 {
font-size: 3em;
 padding: 2em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket4 figure{
 height: 515px;
}
.paint-title4 {
padding: 3em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1.5em 0 0 5em;
}
.Painting-jacket4 figure{
 height: 540px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area4 time {
 padding: 1em 0 1em 0;
}  
 .list-area4 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title4 {
  padding: 4em 0 1em;
}        
}
/* Janusz Grabianski-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist5 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.Painting-jacket5 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket5 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 412px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket5 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket5 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket5 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area5 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area5 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area5 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area5 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title5 {
font-size: 1.85em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket5 figure{
 height: 442px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket5 img{
  width: 93%;
  }
 .paint-title5{
  font-size: 2em;  
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket5 figure{
 height: 450px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket5 figure{
 height: 510px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 480px) {
 .Painting-jacket5 figure{
 height: 590px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}

}
@media all and (min-width: 568px) {
 .Painting-jacket5 figure{
 height: 705px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket5 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket5 {
  float: left;
  width: 60%;
}
.Painting-jacket5 figure{
 height: 475px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket5 img{
  width: 93%;
  }   
.list-area5 {
 width: 40%; 
}
.list-area5 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title5 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 3.5em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket5 figure{
 height: 475px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title5 {
padding: 4.5em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket5 figure{
 height: 485px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area5 {
 width: 40%; 
} 
.paint-title5 {
padding: 5.5em 0;
}  
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist5 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket5 figure{
 height: 460px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket5 img{
  width: 90%;
  }  
.list-area5 time {
 padding: 1em 0 1em 1em;
}  
 .list-area5 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title5 {
font-size: 2.5em;
 padding: 3.5em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket5 figure{
 height: 465px;
  width: 74%;  
}
 .paint-title5 {
   padding: 3.5em 0 1em;  
  } 
}
@media all and (min-width: 812px) {
.Painting-jacket5 figure{
 height: 470px;
 width: 70%;  
}
.paint-title5 {
   padding: 4.5em 0 1em;  
  }  
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 3em;
  padding: .3em .3em;
}
.art-artist5 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket5 figure{
 height: 470px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket5 img{
  width: 90%;
  }  
.list-area5 time {
 padding: 1em 0 1em 1em;
}  
 .list-area5 .comment {
   font-size: .9em;
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title5 {
font-size: 3em;
 padding: 3em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket5 figure{
 height: 510px;
}
.paint-title5 {
padding: 4em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1.5em 0 0 5em;
}
.Painting-jacket5 figure{
 height: 530px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area5 time {
 padding: 1em 0 1em 0;
}  
 .list-area5 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title5 {
  padding: 5em 0 1em;
}        
}
/* Andy Warhol-------------------------*/
.basic {
  background: #000;
  color: #fff;
   font-family: 'Questrial', "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
/* Main Contents-------------------------*/
#main-contents {
  margin: 0 auto;
  max-width: 1280px;
}
/* --artist-----------------------*/
.birthplace {
 border: 1px solid rgba(252, 245, 189, 0.7);
  color: rgba(252, 245, 189, 0.7);
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  margin: 1.5em 0 0 .5em;
  padding: .5em .5em;
 width: auto;
 }
.art-artist6 {
 font-size: 2em;
  font-weight: bold;
  padding: 1em 0 1em;
  margin: 0;
  text-align: center;
}

.Painting-jacket6 {
  display: inline-block;
  margin: 0 auto;
  width: 100%;
}
.Painting-jacket6 figure{
 background: rgba(252, 245, 189, 0.7);
  float: left;
  height: 428px;
  margin: 0 0 0 .5em;
  overflow: hidden;
  position: relative;
  width: 95%;  
}
.Painting-jacket6 img{
  -moz-transition: -moz-transform 0.5s linear;
  -webkit-transition: -webkit-transform 0.5s linear;
  -o-transition: -o-transform 0.5s linear;
  -ms-transition: -ms-transform 0.5s linear;
  transition: transform 0.5s linear;
  width: 93%;
 }
.Painting-jacket6 a:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
}
.Painting-jacket6 img:hover{
  filter: alpha(opacity=1);
  opacity: 1;
  -moz-opacity: 1;
  -ms-opacity: 1;
  -o-opacity: 1;
  -webkit-opacity: 1;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.list-area6 {
 display: inline-block;
  margin: 0 auto;
  width: 100%; 
}
.list-area6 time {
  color: rgba(252, 245, 189, 0.7);
  font-size: 1em;
  line-height: 2em;
   padding: 1em 0 1em 1em;
}
.list-area6 .comment {
 box-sizing: border-box;
  font-size: .8em;
  line-height: 1.5em;
  padding: 1.5em 1.5em 0 1.5em;
  width: auto; 
}
.list-area6 span{
  color: rgba(252, 245, 189, 0.7);
    font-size: 1.2em;
  } 
.paint-title6 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 1em;
  text-align: center;  
}
@media all and (min-width: 360px) {
 .Painting-jacket6 figure{
 height: 458px;
  margin: 0 0 0 1em;
  width: 90%;  
}
.Painting-jacket6 img{
  width: 93%;
  } 
}
@media all and (min-width: 375px) {
.Painting-jacket6 figure{
 height: 480px;
  margin: 0 0 0 1em;
  width: 90%;  
}
 
}
@media all and (min-width: 414px) {
.Painting-jacket6 figure{
 height: 530px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}
}
@media all and (min-width: 480px) {
 .Painting-jacket6 figure{
 height: 615px;
  margin: 0 0 0 1.3em;
  width: 90%;  
}
}
@media all and (min-width: 568px) {
 .Painting-jacket6 figure{
 height: 735px;
  margin: 0 0 0 1.5em;
  width: 90%;  
}
.Painting-jacket6 img{
  width: 93%;
  }  
}
@media all and (min-width: 600px) {
.Painting-jacket6 {
  float: left;
  width: 60%;
}
.Painting-jacket6 figure{
 height: 495px;
  margin: 0 0 0 .5em;
  width: 95%;  
}
.Painting-jacket6 img{
  width: 93%;
  }   
.list-area6 {
 width: 40%; 
}
.list-area6 .comment {
  font-size: .8em;
  padding: 1.5em 1em 0 1.5em;
  line-height: 1.8em;
}
.paint-title6 {
font-size: 2em;
  font-weight: bold; 
  margin:0;
  padding: 2em 0;
  text-align: center;  
}  
}
@media all and (min-width: 650px) {
.Painting-jacket6 figure{
 height: 500px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.paint-title6 {
padding: 3em 0;
}  
}
@media all and (min-width: 667px) {
.Painting-jacket6 figure{
 height: 510px;
  margin: 0 0 0 1.2em;
  width: 88%;  
}
.list-area6 {
 width: 40%; 
}   
}
@media all and (min-width: 724px) {
 .birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 1em;
  padding: .3em .3em;
}
.art-artist6 {
 font-size: 2.5em;
  padding: 1em 0 1em;
}
.Painting-jacket6 figure{
 height: 475px;
  margin: 0 0 0 2em;
  width: 77%;  
}
.Painting-jacket6 img{
  width: 90%;
  }  
.list-area6 time {
 padding: 1em 0 1em 1em;
}  
 .list-area6 .comment {
  line-height: 2em;
  padding: 1.5em 3em 0 1em;
 }   
.paint-title6 {
font-size: 2.5em;
 padding: 2em 0 1em;
}  
}
@media all and (min-width: 768px) {
 .Painting-jacket6 figure{
 height: 485px;
  width: 74%;  
}
}
@media all and (min-width: 812px) {
.Painting-jacket6 figure{
 height: 485px;
 width: 70%;  
}
.paint-title6 {
font-size: 2.5em;
 padding: 3em 0 1em;
}   
}
@media all and (min-width: 960px) {
.birthplace {
 font-size: 1.5em;
  margin: 1.5em 0 0 3em;
  padding: .3em .3em;
}
.art-artist6 {
 font-size: 3em;
  padding: 1em 0 1em;
}
.Painting-jacket6 figure{
 height: 495px;
  margin: 0 0 0 4em;
  width: 60%;  
}
.Painting-jacket6 img{
  width: 90%;
  }  
.list-area6 time {
 padding: 1em 0 1em 1em;
}  
 .list-area6 .comment {
  font-size: .9em; 
  line-height: 2em;
  padding: 1.5em 4em 0 1em;
 }   
.paint-title6 {
font-size: 3em;
 padding: 2.5em 0 1em;
}       
}
@media all and (min-width: 1024px) {
.Painting-jacket6 figure{
 height: 525px;
}
.paint-title6 {
padding: 2.5em 0 1em;
}        
}
@media all and (min-width: 1280px) {
 .birthplace {
  margin: 1.5em 0 0 5em;
}
.Painting-jacket6 figure{
 height: 550px;
  margin: 0 0 0 8em;
  width: 50%;  
}
 .list-area6 time {
 padding: 1em 0 1em 0;
}  
 .list-area6 .comment {
  line-height: 2em;
  padding: 1.5em 10em 0 0;
 }   
.paint-title6 {
  padding: 4em 0 1em;
}        
}




.kako a {
	color: #000;
}