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

@import url('https://fonts.googleapis.com/css?family=Oswald:400,500,700');
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');

.top-logo {
margin-top: 30px;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
position: relative;
left: auto;
right: auto;
}

#contents {
width:100%;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
text-align:center;
}

#contents-under {
margin: 50px auto;
}
#contents-under-page {
margin: 200px 0 40px 0;
}

/* =======================================
スマホ電話発信
======================================= */
a[href^="tel:"] { cursor: default; }

.nav-mfl {
  margin: 0 20px 5px 0;
}



/* =======================================
バナーエリア
======================================= */
.bnr-img {
margin: 0 0 20px 0;
}
.bnr {
vertical-align:top;
}
.bnr-title {
font-family: Oswald;
}
.bnr-img-footer {
margin: 30px 0 20px 0;
}
.footer-bnr {
  margin: 100px 0 0 0;
}
.bnr-top {
  margin: 20px 0 0px 0;
}

/* =======================================
RECOMMEND Text background
======================================= */
.text-block-bk {
position: absolute;
bottom: 30px;
left: 10px;
right: 10px;
background-color: black;
color: white;
padding: 10px 0 5px 0;
opacity: 0.7;
}

.text-block-recblue {
font-size:16px;
font-family: Oswald;
position: absolute;
top: 15px;
left: 10px;
background-color: #0000ff;
color: white;
padding: 5px 10px;
opacity: 0.8;
}
.text-block-recblack {
font-size:16px;
font-family: Oswald;
position: absolute;
top: 15px;
left: 10px;
background-color: black;
color: white;
padding: 5px 10px;
opacity: 0.8;
}
.text-block-recred {
font-size:16px;
font-family: Oswald;
position: absolute;
top: 15px;
left: 10px;
background-color: #ff0000;
color: white;
padding: 5px 10px;
opacity: 0.8;
}
.text-block-recorange {
font-size:16px;
font-family: Oswald;
position: absolute;
top: 15px;
left: 10px;
background-color: #FF6600;
color: white;
padding: 5px 10px;
opacity: 0.8;
}

.hover a:hover img {
opacity: 0.5;
filter: rechover(opacity=50);
-ms-filter: "rechover(opacity=50)";
}

/* =======================================
title
======================================= */
.title {
margin-top: 10px;
font-family: Oswald;
}
.pagetitle {
margin-top: 30px;
font-family: Oswald;
}
.bnr-pagetitle {
font-family: Oswald;
}


/* =======================================
dmx FEAUTURE
======================================= */
.text-block-right {
position: absolute;
bottom: 25px;
right: 5px;
background-color: black;
color: white;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
opacity: 0.6;
}

.text-block-left {
position: absolute;
bottom: 20px;
left: 30px;
background-color: black;
color: white;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
opacity: 0.6;
}

.text-block-interview {
font-family: Oswald;
position: absolute;
top: 10px;
left: 10px;
background-color: #ff4500;
color: white;
padding: 5px 10px;
opacity: 0.8;
}
.text-block-interview-r {
font-family: Oswald;
position: absolute;
top: 10px;
right: 10px;
background-color: #ff4500;
color: white;
padding: 5px 10px;
opacity: 0.8;
}

.text-block-liverepo {
font-family: Oswald;
position: absolute;
top: 10px;
left: 10px;
background-color: #008080;
color: white;
padding: 5px 10px;
opacity: 0.8;
}

/* =======================================
News Headline
======================================= */
.h6-news {
margin-bottom: .5rem;
font-weight: 500;
line-height: 1.2;
color: inherit;
font-size: 14px;
}

/* =======================================
Google Map
======================================= */
.ggmap {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: 10px;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.p-access {
  margin: 20px 0 0 0;
}

.p-access-page {
margin-top: 30px;
margin-bottom: 20px;
}
.ggmap-page {
position: relative;
padding-bottom: 40%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.ggmap-page iframe,
.ggmap-page object,
.ggmap-page embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* =======================================
footer
======================================= */
#footer{
font-family: Oswald;
background-color: #000;
height: 80px;
text-align: center;
line-height: 50px;
color : #fff;
margin-top:30px;
letter-spacing:1px;
}

/* =======================================
SNS
======================================= */
.follow-me {
list-style: none;
margin: 5px 0 -8px;
overflow: hidden;
padding: 0;
}
.follow-me li {
float: left;
margin: 0 8px 8px 0;
padding: 0;
}
.follow-me li a::before {
-webkit-border-radius: 2px;
border-radius: 2px;
color: #fff;
display: inline-block;
font-family: FontAwesome;
font-size: 14px;
height: 22px; /* Button height */
line-height: 22px; /* Button height */
-webkit-transition: all .3s ease;
transition: all .3s ease;
text-align: center;
width: 22px; /* Button width */
}
.follow-me li a:hover::before {
opacity: 0.7;
}
.follow-me li a[href*="amazon.co.jp"]::before,
.follow-me li a[href*="amazon.com"]::before         { background-color: #ff9900; content: "\f270"; }
.follow-me li a[href*="codepen.io"]::before         { background-color: #000000; content: "\f1cb"; }
.follow-me li a[href*="delicious.com"]::before      { background-color: #3399ff; content: "\f1a5"; }
.follow-me li a[href*="deviantart.com"]::before     { background-color: #05cc47; content: "\f1bd"; }
.follow-me li a[href*="digg.com"]::before           { background-color: #000000; content: "\f1a6"; }
.follow-me li a[href*="dribble.com"]::before        { background-color: #ea4c89; content: "\f17d"; }
.follow-me li a[href*="dropbox.com"]::before        { background-color: #007ee5; content: "\f16b"; }
.follow-me li a[href*="facebook.com"]::before       { background-color: #3b5998; content: "\f09a"; }
.follow-me li a[href*="feedly.com"]::before         { background-color: #6cc655; content: "\f09e"; }
.follow-me li a[href*="flickr.com"]::before         { background-color: #0063dc; content: "\f16e"; }
.follow-me li a[href*="foursquare.com"]::before     { background-color: #f94877; content: "\f180"; }
.follow-me li a[href*="github.com"]::before         { background-color: #181717; content: "\f09b"; }
.follow-me li a[href*="plus.google.com"]::before    { background-color: #dc4e41; content: "\f0d5"; }
.follow-me li a[href*="b.hatena.ne.jp"]::before     { background-color: #008fde; content: "\f027"; font-family: blogicon; }
.follow-me li a[href*="instagram.com"]::before      { background-color: #E4405F; content: "\f16d"; }
.follow-me li a[href*="last.fm"]::before            { background-color: #d51007; content: "\f202"; }
.follow-me li a[href*="linkedin.com"]::before       { background-color: #0077b5; content: "\f0e1"; }
.follow-me li a[href*="nicovideo.jp"]::before       { background-color: #eaeaea; content: "\f047"; font-family: blogicon; }
.follow-me li a[href*="pinterest.com"]::before      { background-color: #bd081c; content: "\f0d2"; }
.follow-me li a[href*="getpocket.com"]::before      { background-color: #ef3f56; content: "\f265"; }
.follow-me li a[href*="reddit.com"]::before         { background-color: #ff4500; content: "\f1a1"; }
.follow-me li a[href*="skype.com"]::before,
.follow-me li a[href*="skype:"]::before             { background-color: #00aff0; content: "\f17e"; }
.follow-me li a[href*="slideshare.net"]::before     { background-color: #2d2d2d; content: "\f1e7"; }
.follow-me li a[href*="spotify.com"]::before        { background-color: #84bd00; content: "\f1bc"; }
.follow-me li a[href*="steamcommunity.com"]::before { background-color: #171a21; content: "\f1b6"; }
.follow-me li a[href*="stumbleupon.com"]::before    { background-color: #eb4929; content: "\f1a4"; }
.follow-me li a[href*="tumblr.com"]::before         { background-color: #36465d; content: "\f173"; }
.follow-me li a[href*="twitch.tv"]::before          { background-color: #6441a5; content: "\f1e8"; }
.follow-me li a[href*="twitter.com"]::before        { background-color: #55acee; content: "\f099"; }
.follow-me li a[href*="vimeo.com"]::before          { background-color: #1ab7ea; content: "\f27d"; }
.follow-me li a[href*="vine.co"]::before            { background-color: #11b58a; content: "\f1ca"; }
.follow-me li a[href*="weibo.com"]::before          { background-color: #e6162d; content: "\f18a"; }
.follow-me li a[href*="whatsapp.com"]::before       { background-color: #64d548; content: "\f232"; }
.follow-me li a[href*="wordpress.com"]::before,
.follow-me li a[href*="wordpress.org"]::before      { background-color: #21759b; content: "\f19a"; }
.follow-me li a[href*="youtube.com"]::before        { background-color: #cd201f; content: "\f16a"; }
.follow-me li a[href$="/feed"]::before              { background-color: #ffa500; content: "\f09e"; }
.follow-me li a[href$="/subscribe"]::before         { background-color: #363636; content: "\f000";  font-family: blogicon; }

/* =======================================
Information
======================================= */
.info-img {
margin: 20px 0 10px 0;
}

.info-pdf-icon {
margin: 010px 0 0;
}

.info-text {
margin: 0 0 0 20px;
}

/* =======================================
CONTACT
======================================= */
.contact-headtext {
margin: 20px 0 20px 0;
}
.contact-form {
margin: 0 0 50px 0;
}

/* =======================================
FEAUTURE
======================================= */
.text-block-interview-feauture {
font-family: Oswald;
position: absolute;
top: 20px;
left: 30px;
background-color: #ff4500;
color: white;
padding: 10px 10px;
opacity: 0.8;
font-size: 24px;
}

.text-block-liverepo-feauture {
font-family: Oswald;
position: absolute;
top: 20px;
left: 30px;
background-color: #008080;
color: white;
padding: 10px 10px;
opacity: 0.8;
font-size: 24px;
}

.text-block-feauture-blue {
font-size:16px;
font-family: Oswald;
position: absolute;
top: 15px;
left: 10px;
background-color: #008080;
color: white;
padding: 5px 10px;
opacity: 0.8;
}

.feauture-title {
color: #FF6600;
margin: 40px 0;
font-size: 32px;
font-weight:500;
}
.feauture-detail {
color: #FF6600;
margin: 0 0 20px 0;
font-size: 14px;
}
.feauture-detail2 {
color: #c0c0c0;
}
.feauture-detail3 {
color: #c0c0c0;
margin: 0px 0 30px 0;
}
.feauture-text {
font-size:16px;
margin: 10px 0 40px 0;
line-height: 1.7;
}
.feauture-interview-q {
color: #ff6600;
margin: 50px 0 20px 0;
line-height: 1.8;
}
.feauture-interview {
margin: 20px 0;
color: #dcdcdc;
font-size:14px;
line-height: 1.8;
}
#feauture-youtube {
margin: 40px 0 0 0;
}
.feauture-youtube {
margin: 30px 0;
}

.feauture-liverepo-q {
color: #ff6600;
margin: 50px 0 20px 0;
font-size:14px;
line-height: 1.8;
}
.feauture-liverepotext {
font-size:20px;
margin: 10px 0 40px 0;
line-height: 1.7;
}
.feauture-cdtitle {
color: #ff6600;
margin: 50px 0 20px 0;
font-size:18px;
line-height: 1.8;
}
.feauture-img {
margin: 20px 0;
}

blockquote {
text-align:left;
position: relative;
padding: 50px 5px 10px 20px;
box-sizing: border-box;
font-style: italic;
border-left: 4px solid #FF6600;
margin: 10px 0 20px 30px;
}
blockquote:before{
display: inline-block;
position: absolute;
top: 10px;
left: 15px;
vertical-align: middle;
content: "\f10d";
font-family: FontAwesome;
color: #FF6600;
font-size: 28px;
line-height: 1;
}
blockquote p {
padding: 0;
margin: 7px 0;
line-height: 1.7;
}
blockquote cite {
display: block;
text-align: right;
color: #888888;
font-size: 0.9em;
}
/* =======================================
記事SNS シェアボタン
======================================= */
.share .row div {
text-align: center;
padding: 5px;
}
.share .row {
margin: 20px 0 20px 0;
padding: 5px;
}
.sharebtns div {
border-radius: 5px;
margin-bottom: 10px;
}
.sharebtns a {
display: block;
color: #fff;
padding: 5px;
}
.twitterbtn {
background-color: #009EF5;
}
.facebookbtn {
background-color: #3B539A;
}
.linebtn {
background-color: #00C300;
}


/* =======================================
ticket reserve
======================================= */
.ticket-title {
font-size:16px;
margin: 40px 0 0 0;
}
.bg-ticket {
padding: 10px 20px;
color:black;
background-color: #ff6600;
}
.ticket-remark {
text-align:left;
margin: 40px 0 20px 0;
}
#formbox {
background: black;
margin: 10px 0px 0px 0px;
padding: 5px 20px 20px 20px;
}
.form-btn {
margin: 30px 0px 0px 0px;
}
/* =======================================
fixedTop
======================================= */
#fixedTop {
right: 10px;
bottom: 10px;
width: 50px;
height: 50px;
line-height: 50px;
color: #FF6600;
font-size: 20px;
text-align: center;
display: none;
background: #fff;
position: fixed;
z-index: 9999;
border-radius: 5px;
-webkit-transform: translateZ(0);
}
#fixedTop:hover {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
opacity: 0.7;
}