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

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

* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; outline:none;}
a {cursor:pointer;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,menu,p {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/



body {background:#000 url(../img/nammbg.jpg) top center fixed no-repeat ;background-size: cover; color:#fff;font-size:16px;width:100%;
font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

/*ヘッダー*/
header {width:100%;background:rgba(0,0,0,0.3) ;/*border-bottom:1px solid #009;*/}
header > div.bread {background: rgba(0,0,0,0.6);padding: 0.25em 0;}
header > div.bread div {max-width:1080px;width:100%;margin:0 auto;}
header > div.bread a {text-decoration: none;display: inline-block;color:aqua;}
header > div.bread a:hover {text-decoration: underline;color:#f90;}
header > div.title {max-width:1080px;padding:0;margin:0 auto;width:100%;text-align:center;}
header h1 {display:none;text-align:left;padding:0.25em 0;position: absolute;z-index: +10;left:0;top:0;}
header h1.main {display:inline-block;text-align:center;padding:1em 0;position: relative;}
header h1 img {display:inline-block;max-width:200px;width:100%;}
header h1.main img {display:inline-block;max-width:800px;width:80%;}
header p {font-size:2.5em;text-shadow:0px 5px 10px rgba(0,0,0,0.7);text-align:center;}

/**/
#contentWrapper {color:#fff;background:rgba(255,255,255,0.1); width:100%;}

/*contents*/
#content {max-width:1080px;width:90%;margin:0 auto;padding:1em 0 5em;height:50vw;}
#content > h2 {font-size:3em;text-shadow:1px 1px 0.1em rgba(0,0,0,0.5),-1px 1px 0.1em rgba(0,0,0,0.5),-1px -1px 0.1em rgba(0,0,0,0.5),1px -1px 0.1em rgba(0,0,0,0.5);font-weight: 800;text-align: center;padding: 0.25em;border-radius:5px;background: rgba(0,0,70,0.5);margin-bottom: 0.5em;}
#content > a {margin:0.5em 0 1em; background:#f00;border-radius: 5px;padding: 0.5em; text-decoration: none;color:#fff;font-weight: 600;text-align: center;float:left;width:100%;font-size: 1.75em;}
#content > a:hover {background: #690;box-shadow: 0 1px 5px 1px #030;}

/*menu*/
#menu {float:left;width:100%;margin:0 auto 2em;background: rgba(50,0,70,0.3);padding:0.5em;border-radius: 5px;}
#menu h4 {text-shadow:1px 1px 0.1em rgba(0,0,0,0.5),-1px 1px 0.1em rgba(0,0,0,0.5),-1px -1px 0.1em rgba(0,0,0,0.5),1px -1px 0.1em rgba(0,0,0,0.5);font-weight: 800;}
#menu ul {width:100%;margin:0 auto;}
#menu ul li {float:left;width:12.5%;margin-bottom: 0.5em;}
#menu ul li a {width: 100%;overflow: hidden;text-align: center;color:#fff;text-decoration: none;font-size:0.875em;}
#menu ul li a img {width: 100%;}
#menu ul li a:hover {transform: scale(1.1);transition: all ease 0.3s;}

p.lead {font-weight: 600;width:100%;float:left;margin:0 auto 1em;font-size:1.75em;padding: 0 1.75em; text-shadow:1px 1px 0.1em rgba(0,0,0,0.75),-1px 1px 0.1em rgba(0,0,0,0.75),-1px -1px 0.1em rgba(0,0,0,0.75),1px -1px 0.1em rgba(0,0,0,0.75);}

div.video {float:left;width:100%;padding:0 10%;margin-bottom: 3em;}
div.video h4 {text-align: left;font-size: 1.5em;line-height: 1.3em;text-shadow:1px 1px 0.1em rgba(0,0,0,0.75),-1px 1px 0.1em rgba(0,0,0,0.75),-1px -1px 0.1em rgba(0,0,0,0.75),1px -1px 0.1em rgba(0,0,0,0.75);}

#main {width: 74%;float:left;}
#twitter {width: 24%;float: right;}
#twitter h3 {margin-bottom: 0.5em;font-weight: 600;text-align: center;color: #fff;}

#main > div {margin:0 0 2em;}
#main > div:after {content: "●";color:#fff;text-align: center;display: block;margin-top: 2.67em;font-size: 0.75em;}
#main > div:last-child:after {content:"";}
#main > div h4 {font-weight: 800;font-size:1.25em;background: rgba(0,0,70,0.5);padding:0.5em;border-radius: 5px;margin-bottom: 0.5em;}
#main > div > span {background-color:#fff;display: block;}
#main > div > span > p {float:right;width:50%;color: #111;padding:0.5em;line-height: 1.4em;}
#main > div > span > img {width:50%;float:left;}
#main > div > span > a {background:#f00;border-radius: 5px;padding: 0.5em; text-decoration: none;color:#fff;float: right;width:45%;margin-right: 2.5%;font-weight: 600;}
#main > div > span > a:before {content: "\003e\003e";font-weight: 600;}
#main > div > span > a.thumb:before {content: "";}
#main > div > span > a.thumb {background: none;border-radius: 0;padding: 0;float: left;width: 50%;margin-right: 0;overflow: hidden;}
#main > div > span > a.thumb img {width:100%;float: none;}
#main > div > span > a.thumb:hover img {transform: scale(1.05);transition: all ease 0.4s;}
#main > div > ul.photo {margin:0;background: rgba(255,255,255,0.7);}
#main > div > ul.photo li {float:left;padding:0.25em;}
#main > div > ul.photo.three li {width:33.33%;height:18vw;overflow: hidden;}
#main > div > ul.photo.four li {width:25%;height:16vw;overflow: hidden;}
#main > div > ul.photo li a {width:100%;height: 100%; overflow: hidden;border-radius: 5px;}
#main > div > ul.photo a img {width:100%;bottom: 0;}
#main > div > ul.photo li.yoko a img {height: 100%;bottom: 0;width:auto;}
#main > div > ul.photo a:hover {transform: scale(1.05);transition: all ease 0.3s;}
#main > div > a {margin-top: 0.75em; background:#f00;border-radius: 5px;padding: 0.5em; text-decoration: none;color:#fff;font-weight: 400;text-align: center;}
#main > div a:hover {background: #690;box-shadow: 0 1px 5px 1px #030;}
#main > div > span > a.thumb:hover {box-shadow: none;}
#main > div > span > div.video {padding: 0;width:50%;margin-bottom: 0;}
#main > div > span > div.video video {display: block;}
#main > div ul.items {}
#main > div ul.items li {float:left;border: 1px solid #ccc;}
#main > div ul.items li a {}
#main > div ul.items li a img {width:100%;}
#main > div ul.items li a span {color:red;}

.twitter-timeline {height:15000px !important;}/*+420づつ*/

ul.gallery {width:100%;float: left;}
ul.gallery li {float:left;width:25%;padding:0.5em;height:20vw;overflow: hidden;}
ul.gallery li.yoko {}
ul.gallery li a {width: 100%;height: 100%;overflow: hidden;}
ul.gallery li a:hover {transform: scale(1.05);transition: all ease 0.3s;}
ul.gallery li a img {width:100%;}
ul.gallery li.yoko a img {height:100%;bottom:0;width: auto;}
ul.gallery li.bottom a img {position: relative;top:-30%;}

/*フッター*/
footer {background-color:rgb(0,0,0);color:#fff;width:100%;border-top:1px solid #ccc;}
p.copyright {font-family: 'Open Sans', sans-serif;font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}

/*ページトップへ*/
.pagetop {display: none;position: fixed;bottom: 30px;right: 35px;z-index:+20;}
.pagetop a {display: block;width: 50px;height: 50px;background-color: rgba(30,30,0,0.7);text-align: center;color: #fff;font-size: 24px;text-decoration: none;line-height: 50px;/*border-radius:25px;*/outline:none;}

/*汎用*/
.mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.txthshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;}
.clearfix:after, ul:after {content:"";display:block;position:relative;clear:both;}

.spshow {display:none;visibility:hidden;}

#twilink {display: none;margin: 1em auto;float: left;text-align: center;}
#twilink a {display:inline-block;text-decoration: none;margin-left: 0.5em;color:#fff;}
#twilink a:hover {color:#fc0;text-decoration: underline;}
#twilink img {vertical-align: middle;width: 1.5em;display: inline-block;}

/*
@media screen and (max-width: 65em) {
}

/*960px*//*
@media screen and (max-width: 60em) {
}

/*894px*/
@media screen and (max-width: 56em) {
#main {width: 100%;}
#twitter {display: none;}
	#twilink {display: block;width:100%;}
	#main > div > span {padding-bottom: 1em;}
#main > div > span > p {float:none;width:100%;}
#main > div > span > img {width:100%;float:none;}
	#main > div > span > a {width:90%;float:none;margin:0.5em auto;}
#main > div > span > a.thumb {float: none;width: 100%;margin: 0;}
#main > div > span > a.thumb img {width:100%;float: none;}
	
	#content > h2 {font-size:2em;}
}

/*830px*/
@media screen and (max-width: 52em) {
	#menu ul li {float:left;width:25%;}
	a.digi img {width:100%;}
}

/*700px*/
@media screen and (max-width: 43.75em) {
	p.lead {font-size: 1em;padding:0 0.25em;}
	div.video h4 {font-size: 1em;}
	ul.gallery li {padding:0.25em;}
}

/*660*//*
@media screen and (max-width: 41.25em) {
}*/

/*600px*//*
@media screen and (max-width: 37.5em) {
	header h1 {padding-top:10%;}
	#items {font-size:0.675em;}
	#items ul li.tokyo:before, #items ul li.nagoya:before {height:3em;}
}

/*500px*//*
@media screen and (max-width: 31.25em) {
}


/*430px*//*
@media screen and (max-width: 26.9em) {
}


/*360*//*
@media screen and (max-width: 22.6em) {
}

/*320*//*
@media screen and (max-width: 20.1em) {
}