@charset "utf-8";

/**************************************************
Top Page Only
**************************************************/


/*【header-space】 --------------- */

#header-space {
display:none;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
z-index:1;
}

#header-space-in {
animation:spacedown 4s ease;
-ms-animation:spacedown 4s ease;
-webkit-animation:spacedown 4s ease;
-moz-animation:spacedown 4s ease;
-o-animation:spacedown 4s ease;
visibility:visible!important;
}

@keyframes spacedown {
 0% {
      opacity:0;
      transform:translateY(-300px);
      -webkit-transform:translateY(-300px);
      -ms-transform:translateY(-300px);
      -moz-transform:translateY(-300px);
      -o-transform:translateY(-300px);
 }
 100% {
        opacity:1;
        transform:translateY(0);
        -webkit-transform:translateY(0);
        -ms-transform:translateY(0);
        -moz-transform:translateY(0);
        -o-transform:translateY(0);
 }
}

@-webkit-keyframes spacedown {
 0% {
      opacity:0;
      -webkit-transform:translateY(-300px);
    }
 100% {
        opacity:1;
        -webkit-transform:translateY(0);
      }
}

@-ms-keyframes spacedown {
 0% {
      opacity:0;
      -ms-transform:translateY(-300px);
    }
 100% {
        opacity:1;
        -ms-transform:translateY(0);
      }
}

@-moz-keyframes spacedown {
 0% {
      opacity:0;
      -moz-transform:translateY(-300px);
    }
 100% {
        opacity:1;
        -moz-transform:translateY(0);
      }
}

@-o-keyframes spacedown {
 0% {
      opacity:0;
      -o-transform:translateY(-300px);
    }
 100% {
        opacity:1;
        -o-transform:translateY(0);
      }
}

/* -------------------------------------------------------------- */

/* 【main image】 --------------- */

/*************** slider ***************/

#main-img {
width:100%;
height:500px;
position:relative;
overflow:hidden;
float:left;
z-index:1;
}
 
#main-img ul,
#main-img ul li {
float:left;
display:inline;
overflow:hidden;
}
 
#main-img ul li img {
width:100%;
min-width:100%;
height:auto;
display:none;
}
 
.main-img-in {
overflow:hidden;
position:absolute;
top:0;
left:0;
}

.main-img-box {
overflow:hidden;
position:fixed;
top:0;
left:0;
}

#main-img .prevslide,
#main-img .nextslide {
width:50px;
height:50px;
font-weight:bold;
cursor:pointer;
position:absolute;
z-index:10;
display:none;
}

#main-img .prevslide {
left:10px;
}

#main-img .nextslide {
right:10px;
}

#main-img .prevslide:before,
#main-img .nextslide:before {
color:#fff;
}

#main-img .prevslide:before {
font-size:50px;
font-family:"dashicons";
content:"\f341";
vertical-align:-0.15em!important;
}

#main-img .nextslide:before {
font-size:50px;
font-family:"dashicons";
content:"\f345";
vertical-align:-0.15em!important;
}

/*********************************
ページングが必要ない場合
※.wideimg-butを記述
**********************************/

/*
.wideimg-but {
display:none!important;
}
*/

.wideimg-but {
width:100%;
height:auto;
text-align:center;
position:absolute;
left:0;
bottom:15px;
z-index:10;
visibility:visible;
overflow:hidden;
}

.wideimg-but p {
width:15px;
height:15px;
margin:0 8px;
background-color:#fff;
border-radius:100px;
-webkit-border-radius:100px;
-moz-border-radius:100px;
cursor:pointer;
overflow:hidden;
display:inline-block;
z-index:10;
}

.wideimg-but p.slidebut {
opacity:1!important;
}

/**********************************
*********************************/


/*************** still ***************/

#main-still-in {
width:100%;
overflow:hidden;
float:left;
position:fixed;
top:0;
left:0;
}

#main-still-in img {
width:100%;
height:auto;
}

/*************** video ***************/
#main-video {
width:100%;
height:600px;
float:left;
position:relative;
}

#main-video-in {
width:100%;
float:left;
position:fixed;
top:0;
left:0;
}

#main-video video,
#main-video img {
width:100%;
height:auto;
float:left;
}

/* -------------------------------------------------------------- */


/* 【top page content】 --------------- */

#loading {
width:100%;
height:100%;
background:#fff;
position:absolute;
top:0;
left:0;
z-index:1000;
}

#loading p {
width:40px;
height:40px;
margin:-30px 0 0 -30px;
border:6px solid #7f0015;
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-right-color:transparent;
animation:load 1s infinite linear;
-webkit-animation:load 1s infinite linear;
-moz-animation:load 1s infinite linear;
-0-animation:load 1s infinite linear;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
}

@keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{transform:rotate(180deg);
opacity:1;
}
100%{transform:rotate(360deg);
opacity:0.4;
}
}

@-webkit-keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{
transform:rotate(180deg);
opacity:1;
}
100%{
transform:rotate(360deg);
opacity:0.4;
}
}

@-moz-keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{
transform:rotate(180deg);
opacity:1;
}
100%{
transform:rotate(360deg);
opacity:0.4;
}
}

@-o-keyframes load {
0%{
transform:rotate(0deg);
opacity:0.4;
}
50%{
transform:rotate(180deg);
opacity:1;
}
100%{
transform:rotate(360deg);
opacity:0.4;
}
}

/* -------------------------------------------------------------- */

#sp-top {display: none;}


/* 【top new post1】 --------------- */

#top-post1 {
width:100%;
text-align:center;
float:left;
}

#top-post1 .txpost-box {
font-size:13px;
display:none;
float:left;
}

#top-post1 .txpost-each {
background:#7f0015;
}

#top-post1 .txpost-box1,
#top-post1 .txpost-box4 {
width:297px;
margin-bottom:25px;
float:left;
}

#top-post1 .txpost-box2,
#top-post1 .txpost-box3 {
width:303px;
margin-bottom:25px;
float:left;
}

#top-post1 .txpost-box1 .txpost-each {
width:290px;
float:left;
position:relative;
}

#top-post1 .txpost-box4 .txpost-each {
width:290px;
float:right;
position:relative;
}

#top-post1 .txpost-box2 .txpost-each,
#top-post1 .txpost-box3 .txpost-each {
width:290px;
display:inline-block;
position:relative;
}

#top-post1 .txpost-box.active {
display:block;
}

#top-post1 .txpost-box-in {
width:290px;
text-align:center;
display:inline-block;
}

#top-post1 .thumbnail {
width:100%;
height:200px;
float:left;
overflow:hidden;
}

#top-post1 .thumbnail img {
width:100%;
}

#top-post1 .txpost-text {
width:100%;
height:53px;
padding:10px 10px 0;
text-align:left;
color:#fff;
float:left;
box-sizing:border-box;
}

.txpost-hover a {
width:100%;
height:100%;
background-color:rgba(0,0,0,0.9);
color:#fff;
position:absolute;
top:0;
left:0;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
-ms-transition:0.4s;
opacity:0;
}

.txpost-hover a:hover {
opacity:1;
}

.txpost-hover span.txpost-content {
width:100%;
padding:20px;
text-align:left;
float:left;
box-sizing:border-box;
}

.txpost-hover span.txpost-but {
padding:3px 8px;
border:1px solid #fff;
font-size:15px;
display:inline-block;
letter-spacing:0.2em;
transition:0.7s;
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
-ms-transition:0.7s;
}

.txpost-hover span.txpost-but:hover {
background:#fff;
color:#000;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}

.txpost-hover span.txpost-but:before {
font-family:"dashicons";
content:"\f522";
vertical-align:-0.19em!important;
}

#post-load {
width:100%;
margin:10px 0 25px;
text-align:center;
float:left;
position:relative;
}

#post-load p {
width:100%;
font-weight:bold;
font-size:16px;
position:absolute;
top:0;
left:0;
cursor:pointer;
transition:0.7s;
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
-ms-transition:0.7s;
}

#post-load p:hover {
color:#b4b4b4;
}

#post-load p:before {
width:100%;
border-top:1px dotted #7f0015;
position:absolute;
top:50%;
left:0;
content:"";
}

#post-load p span {
background:#fff;
display:inline-block;
padding:0 20px;
position:relative;
}

#top-post1 .txpost-cat {
width:100%;
margin-bottom:20px;
float:left;
}

#top-post1 .txpost-cat p a {
float:right;
}

#top-post1 .txpost-cat p a:before {
margin-right:4px;
color:#7f0015;
font-family:"dashicons";
content:"\f522";
vertical-align:-0.15em!important;
}

/* -------------------------------------------------------------- */


/* 【free area1】 --------------- */

#free-area1 {
width:100%;
margin-top:35px;
float:left;
}

/* -------------------------------------------------------------- */


/* 【top new post2 and free area2】 --------------- */

#post2-free {
width:100%;
margin-top:35px;
float:left;
}

#top-post2,
#free-area2 {
width:100%;
float:left;
}

#top-post2-free,
#free-area2-post {
width:50%;
float:left;
}

#top-post2-free .txpost-in {
width:560px!important;
text-align:left;
float:left;
}

#post2-free .txpost-in {
width:100%;
text-align:left;
float:left;
}

#post2-free .txpost-advanced {
width:100%;
text-align:left;
float:left;
}

#post2-free .txpost-advanced h2 {
font-size:30px;
float:left;
}

#post2-free .txpost-box {
width:100%;
float:left;
}

#post2-free .txpost-box-in {
margin:5px 0;
font-size:13px;
float:left;
}

#post2-free .txpost-box .thumbnail {
width:120px;
height:75px;
margin-bottom:5px;
padding:5px;
background:#fff;
border:1px solid #7f0015;
text-align:center;
float:left;
overflow:hidden;
position:relative;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
-ms-transition:0.4s;
}

#top-post2-free .txpost-box .txpost-box-right {
width:418px;
height:86px;
margin-left:10px;
border-bottom:1px dotted #7f0015;
float:left;
}

#top-post2 .txpost-box .txpost-box-right {
width:1058px;
height:86px;
margin-left:10px;
border-bottom:1px dotted #7f0015;
float:left;
}

#post2-free .txpost-date {
width:100%;
float:left;
}

#post2-free h2.txpost-title,
#post2-free h3.txpost-title {
width:100%;
margin-top:5px;
float:left;
}

#post2-free .top-posttags {
width:100%;
margin-top:5px;
text-align:right;
font-size:12px;
float:right;
}

#post2-free .top-posttags p {
margin-left:5px;
padding:0 5px;
display:inline-block;
}

#post2-free .top-posttags p a:before {
margin-right:3px;
color:#7f0015;
font-family:"dashicons";
content:"\f323";
vertical-align:-0.13em!important;
}

#post2-free .top-posttags a {
padding:0 0 0 2px;
float:left;
}

#top-post2-free .txpost-cat {
margin-top:11px;
margin-right:40px;
float:right;
}

#top-post2 .txpost-cat {
margin-top:11px;
float:right;
}

#post2-free .txpost-cat p a:before {
margin-right:4px;
color:#7f0015;
font-family:"dashicons";
content:"\f522";
vertical-align:-0.15em!important;
}

/* -------------------------------------------------------------- */

h2.title-top {
width:100%;
margin-bottom:30px;
padding:15px 0;
background:#7f0015;
text-align:center;
font-size:20px;
color:#fff;
float:left;
letter-spacing:2px;
box-sizing:border-box;
}

h3.title-top {
width:100%;
padding:15px 0;
text-align:center;
font-size:18px;
color:#7f0015;
float:left;
letter-spacing:2px;
box-sizing:border-box;
}

.video-top{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video-top iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}


/**************************************************
***************************************************
width:[1200px] or less.
***************************************************
**************************************************/

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

#main-img,
#main-still,
#main-video {
height:auto;
}

#main-still-in,
#main-video-in {
position:relative;
}

.main-img-box {
position:absolute;
}

#main-img .prevslide,
#main-img .nextslide {
display:none!important;
}

.wideimg-but {
bottom:6px;
}

.wideimg-but p {
width:12px;
height:12px;
margin:0 5px;
}

#top-post1 {
margin-top:20px;
}

#top-post1 .txpost-box {
width:50%;
}

#top-post1 .txpost-box1,
#top-post1 .txpost-box4,
#top-post1 .txpost-box2,
#top-post1 .txpost-box3 {
width:100%;
margin-bottom:10px;
padding:0 5px;
box-sizing:border-box;
}

#top-post1 .txpost-box1 .txpost-each,
#top-post1 .txpost-box4 .txpost-each,
#top-post1 .txpost-box2 .txpost-each,
#top-post1 .txpost-box3 .txpost-each {
width:100%;
}

#top-post1 .txpost-box-in {
width:100%;
}
	
#top-post1 .thumbnail{
height: 100%;
}

#top-post1 .thumbnail img {
width:100%;
}

#top-post1 .txpost-text {
height:48px;
padding:5px;
}

.txpost-hover {
display:none;
}

#post-load {
margin:15px 0 25px;
}

#top-post1 .txpost-cat {
margin-bottom:10px;
}

#free-area1,
#post2-free {
width:100%;
margin-top:20px;
}

#top-post2-free,
#free-area2-post {
width:100%;
margin-bottom:20px;
}

#top-post2-free .txpost-in {
width:100%!important;
}

#post2-free .txpost-advanced {
margin-bottom:10px;
}

#post2-free .txpost-advanced h2 {
font-size:20px;
}

#post2-free .txpost-box-in {
width:100%;
}

#post2-free .txpost-box .thumbnail {
display:none;
}

#top-post2-free .txpost-box .txpost-box-right,
#top-post2 .txpost-box .txpost-box-right {
width:100%;
height:auto;
margin-left:0;
padding-bottom:10px;
}

#top-post2-free .txpost-cat,
#top-post2 .txpost-cat {
margin-top:0;
margin-right:0;
}

}

/**************************************************
***************************************************
width:[480px] or less.
***************************************************
**************************************************/

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


#main-video {
	display: none;
}
	
#sp-top {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}
	


#top-post1 .thumbnail {
height:auto;
}

#loading p {
width:30px;
height:30px;
}

}