/* 『「エチカ」を叫ぶ』のメイン用外部スタイルシート */

/* 全体設定 */

body {
  background-color: #000;
}

/* リンク色 */

.colk1 a:link{color: #fff;}
.colk1 a:visited{color: #bbbbbb;}
.colk1 a:hover{color: #f00;}
.colk1 a:active{color: #f00;}

.colk2 a:link{color: #000;}
.colk2 a:visited{color: #3366cc;}
.colk2 a:hover{color: #ffff00;}
.colk2 a:active{color: #fff;}

.colk3 a:link{color: #fff;}
.colk3 a:visited{color: #fff;}
.colk3 a:hover{color: #ff0;}
.colk3 a:active{color: #ff0;}

/* フッター部 */

footer{
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  color: #fff;
  line-height:2
}

/* メインコンテンツ */

.come01 {
  border-top-width : 3px;
  border-top-style : solid;
  border-top-color : #000;
  border-bottom-width : 3px;
  border-bottom-style : solid;
  border-bottom-color : #000;
  padding:3px;
}

.come02 {
}
.come02 a {text-decoration: none;}
.come02 a:link{color: #000;}
.come02 a:visited{color: #000;}
.come02 a:hover{color: #9933cc;}
.come02 a:active{color: #f00;}

.maincont {
  padding-bottom: 2em;
}

.catename {
  padding-top: 2em;
  text-align: center;
  font-size: 1.5em;
}

.solocontent {
  padding-top: 2em;
  text-align: center;
  font-size: 1em;
}

/* メインページ・ディスプレイ */

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container div {

  width: 100%; 
  height: 450px;
}

.box-left {
    background: url("img/hon-la.jpg") no-repeat;  background-position: top right; /* ロールオーバー時のチラつき防止 */
}

.box-left a {
    background: url("img/hon-la.jpg") no-repeat;
    background-position: top right; 
    display: block;
    text-indent: -9999px;
}
 
.box-left a:hover {
    background-image: url("img/hon-lb.jpg");
}

.box-right {
    background: url("img/honr-ra.jpg") no-repeat;  background-position: top left; /* ロールオーバー時のチラつき防止 */
}

.box-right a {
    background: url("img/hon-ra.jpg") no-repeat;
    background-position: top left; 
    display: block;
    text-indent: -9999px;
}
 
.box-right a:hover {
    background-image: url("img/hon-rb.jpg");
}


/* 閲覧ページ：コンテナ */

div.frcon{
  width: 80%; 
  margin-left: auto; 
  margin-right: auto; 
  display: flex; 
  flex-direction:row; 
  justify-content:space-between;
}

.fr02{
}

/* タブレット用スタイルシート */

@media screen and (max-width: 768px) 
{

.fr02{width: 300px; margin: 0px; padding: 0px 0px 0px 0px; margin-left: auto; margin-right: auto;}
div.frcon{width: 100%; flex-direction: column;}

.keshi{display: none;}
.come3{padding: 5px 20px 0px 20px}
}


/* スマホ用スタイルシート */


@media screen and (max-width: 340px) 
{

.fr02{width: 200px;}

}

/* メインページ・ヘッダー部 */

.img-frame{
  width: 100%;
  height: 25vw;
  overflow: hidden;
  position: relative;
}

.img-01, .img-02{
   position: absolute;
   top:0;
   left:0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
}
.img-01{
   background-image: url('img/title2.jpg');
   animation: slide-animation-01 10s infinite;
}
.img-02{
   background-image: url('img/title1.jpg');
   animation: slide-animation-02 10s infinite;
}

@keyframes slide-animation-02 {
    0% {opacity: 1;}
   20% {opacity: 1;}
   60% {opacity: 0;}
   70% {opacity: 0;}
  100% {opacity: 1;}