@charset "utf-8";

.btn-mh8{
	position: absolute;
	top: 15px;
	right:20px;
	width:14%;
	max-width: 280px;
	min-height:20px;
	background-color: rgba(247,41,45,0.00);
  background-image:url('../img/mh8newpanel_button_02_a.png');
	background-size:cover;
	background-position:top center;
	background-repeat: no-repeat;
  transition: .2s;
  -moz-transition: .2s;
  -webkit-transition: .2s;
	z-index: 100;
}
.btn-mh8:hover{
  background-image:url('../img/mh8newpanel_button_02_b.png');
}

@media screen and (max-width:800px){.btn-mh8{width:30%; top: 10px; right:10px;}}

/*
================================================================================================================
COMMON
================================================================================================================
*/
#top-main{
    width: calc(100% - 0px);
min-width:320px;
position:relative;
top:40px;
/*background:url(../img/pc.jpg);
background-position:center;
background-size:cover;*/
}


#top-main_bg {
    width: calc(100% - 0px);
    width: -moz-calc(100% - 0px);
    width: -webkit-calc(100% - 0px);
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 0;
    right: 0;
    z-index: -1;
    background-color:#ffdced;
    color: #FFF;
  background-image:url('../img/bg/mh8newpanel_bg_01.png'), url('../img/bg/mh8newpanel_bg.jpg');
	background-size:100%, cover;
	background-position:top center, top center;
	background-repeat: repeat-x, no-repeat;
	background-attachment:fixed,  fixed;
}

.cont{
position:relative;
width:calc(100% - 30px);
max-width:1800px;
top: 0px;
height:auto;
margin:0px auto 35px auto;
padding: 0px 15px 40px 15px;
border-radius: 8px;
background-color:rgba(188,245,255,0.00);
/*  background-image:url('../img/21_alice.png');
	background-size:80%;
	background-position:top 16vw left;
	background-repeat:no-repeat;*/
}
/*@media screen and (min-width:1400px){.cont{background-size:1100px; background-position:top 200px left;}}*/
@media screen and (max-width:800px){
#top-main_bg {background-size:100%, 160%;}
.cont{
position:relative;
width:calc(100% - 0px);
top: 0px;
height:auto;
margin:0px auto 0px auto;
padding: 0px 0px 60px 0px ;
border-radius: 8px;
background-color:rgba(188,245,255,0.00);
/*  background-image:url('../img/21_alice.png');
	background-size:160%;
	background-position:top 42vw left -20vw;
	background-repeat:no-repeat;*/
}
}

.cont img {width:100%;}

.cont .title{
display:block;
position:relative;
width:100%;
max-width:1400px;
text-align:center;
margin:0px auto 0px auto;
/*border-radius: 8px;*/
/*box-shadow:0px 0px 6px 3px rgba(135,100,120,0.6);*/
z-index:10;}

.cont .title01{
display:block;
position:relative;
width:60%;
max-width: 800px;
text-align:center;
margin:0px auto 0px 0px;
z-index:10;}
@media screen and (max-width:800px){
.cont .title01{
display:block;
position:relative;
width:100%;
text-align:center;
margin:0px auto 0px auto;
z-index:10;}
}
.cont .title img, .cont .title01 img {width:100%; border-radius: 8px;}

.notice{
display:block;
width:100%;
font-weight:bold;
letter-spacing:1px;
text-align:left;
margin:10px auto 0px auto;
padding: 5px;
border-radius: 8px;
background-color: rgba(252,255,175,0.80);
	box-shadow:#614466 2px 2px 10px;
z-index:4;}
.notice .text{font-size:14px; line-height:18px; padding:10px 20px; color:#E93C76;}
.notice .text strong{font-size:18px; line-height:24px; font-weight:bold; color:#E93C76;}

@media screen and (max-width:800px){
.notice{
width:calc(100% - 30px);
margin:0vw auto 0px auto;
}
.notice .text{font-size:1.8vw; line-height:2.8vw; padding:1vw 2vw; color:#E93C76;}
.notice .text strong{font-size:2.6vw; line-height:3.8vw; font-weight:bold; color:#E93C76;}
}

.pickup_title.bg_blue, .contents_title.bg_blue {
	width: 98%;
	margin:1% 1% 2% 1%;
	background:linear-gradient(#FFBE01, #FF4F00, #FFCC79);
	box-shadow:#AB3A00 0 0 6px;
	padding: 5px;
	color:#FFF;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;
	text-shadow:#CD3E07 0 0 4px;
	border-radius: 12px;
}
.pickup_text {
	width: 98%;
	margin:1% 1% 2% 1%;
	padding: 5px;
	color:#FFFFFF;
	font-weight:bold;
	vertical-align:middle;
	text-align:center;      /* 文字の影 */
}
.pickup_text.waku_wh {
	text-shadow: 
       2px  2px 1px #ffffff,
      -2px  2px 1px #ffffff,
       2px -2px 1px #ffffff,
      -2px -2px 1px #ffffff,
       2px  0px 1px #ffffff,
       0px  2px 1px #ffffff,
      -2px  0px 1px #ffffff,
       0px -2px 1px #ffffff;        /* 文字の影 */
}
.pickup_text.waku_bk {
	text-shadow: 
       2px  2px 1px #000000,
      -2px  2px 1px #000000,
       2px -2px 1px #000000,
      -2px -2px 1px #000000,
       2px  0px 1px #000000,
       0px  2px 1px #000000,
      -2px  0px 1px #000000,
       0px -2px 1px #000000;        /* 文字の影 */
}
.pickup_text.waku_re{
	text-shadow: 
       2px  2px 1px #990000,
      -2px  2px 1px #990000,
       2px -2px 1px #990000,
      -2px -2px 1px #990000,
       2px  0px 1px #990000,
       0px  2px 1px #990000,
      -2px  0px 1px #990000,
       0px -2px 1px #990000;         /* 文字の影 */
}
.pickup_text.waku_bl{
	text-shadow: 
       2px  2px 1px #0044cb,
      -2px  2px 1px #0044cb,
       2px -2px 1px #0044cb,
      -2px -2px 1px #0044cb,
       2px  0px 1px #0044cb,
       0px  2px 1px #0044cb,
      -2px  0px 1px #0044cb,
       0px -2px 1px #0044cb;        /* 文字の影 */
}
.pickup_text.waku_gr{
	text-shadow: 
       2px  2px 1px #007700,
      -2px  2px 1px #007700,
       2px -2px 1px #007700,
      -2px -2px 1px #007700,
       2px  0px 1px #007700,
       0px  2px 1px #007700,
      -2px  0px 1px #007700,
       0px -2px 1px #007700;        /* 文字の影 */
}
.pickup_text.waku_or{
	text-shadow: 
       2px  2px 1px #ff4d4d,
      -2px  2px 1px #ff4d4d,
       2px -2px 1px #ff4d4d,
      -2px -2px 1px #ff4d4d,
       2px  0px 1px #ff4d4d,
       0px  2px 1px #ff4d4d,
      -2px  0px 1px #ff4d4d,
       0px -2px 1px #ff4d4d;        /* 文字の影 */
}
@media screen and (max-width:800px){.pickup_text {font-size:2.2vw; line-height:3.4vw;}}


/*
================================================================================================================
PC/TABLET
================================================================================================================
*/
@media screen and (min-width:801px){
#top-main{height:auto;}

#top-notice{
display:block;
position:fixed;
bottom:33px;
height:25px;
font-size:14px;
line-height:25px;}
#top-notice br{display:none;}}

/*
================================================================================================================
MOBILE
================================================================================================================
*/
@media screen and (max-width:800px){
#top-main{height:auto;}

#top-notice{
height:auto;
position:relative;
font-size:11px;
line-height:auto;
padding:3px 0;}
#top-notice br{display:block;}}

/*
================================================================================================================
 PC
================================================================================================================
*/
@media screen and (min-width:801px){
.new{position:absolute; top:0; left:0;}
.new_sp{position:absolute; top:0; left:0;}
.new{width:20%;}
.new img {width:100%; position:absolute; top:-0px; left:-0px;}
.pickup{display: inline-block; position:relative; width:48.9%; padding:2% 2% 1% 2%;}
.pickup .thumb{width:100%;}
.vwp-box{
	width: 99%;
	margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}
.vwp{position:relative; width:20%; padding:2% 0.5% 1% 0.5%;}
.vwp .thumb{width:100%;}
}
@media screen and (min-width:1281px){
.dl li {font-size:16px; line-height: 18px; padding:8px 0 4px 0; margin:10px 0;}
.dl li span {font-size:12px; line-height: 10px;}
}
@media screen and (min-width:981px) and (max-width:1280px){
.dl li {font-size:1.2vw; line-height: 1.6vw; padding:8px 0 4px 0; margin:10px 0; letter-spacing:0.1em;}
.dl li span {font-size:1.0vw; line-height: 1.0vw;}
}
@media screen and (min-width:801px) and (max-width:980px){
.dl li {font-size:1.0vw; line-height: 1.4vw; padding:8px 0 4px 0; margin:10px 0; letter-spacing:0.1em;}
.dl li span {font-size:0.6vw; line-height: 0.6vw;}
}

/*
================================================================================================================
 TABLET/MOBILE
================================================================================================================
*/
@media screen and (max-width:800px){
.new{position:absolute; top:0; left:0;}
.new_sp{position:absolute; top:0; left:0;}
.new{width:20%;}
.new img {width:100%; position:absolute; top:-0px; left:-0px;}

.pickup{display: inline-block; position:relative; width:50%; padding:2% 1% 1% 1%;}
.pickup .thumb {width:100%;}

.vwp-box{
	width: 99%;
	margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}	
.vwp{position:relative; width:33.3%; padding:2% 1% 1% 1%;}
.vwp .thumb {width:100%;}

.dl li {font-size:2.8vw; line-height: 3.2vw; padding:8px 0 4px 0; margin:10px 0; letter-spacing:0.0em;}
.dl li span {font-size:2.2vw; line-height: 2.2vw;}

}

/*
================================================================================================================
COMMON
================================================================================================================
*/

.dl{list-style:none; width:100%; margin-top:2px;}

.dl{float:left}

.dl li {
color:#fff;
text-align:center;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:#242 1px 1px 2px;
-moz-box-shadow:#242 1px 1px 2px;
-webkit-box-shadow:#242 1px 1px 2px;
}
.dl li{
background:linear-gradient(#7ff456, #2ea305);
background:-moz-linear-gradient(top, #7ff456, #2ea305);
background:-webkit-gradient(linear, left top, left bottom, from(#7ff456), to(#2ea305));
}
.dl li:hover{
background:linear-gradient(#fb99fb, #f917ea);
background:-moz-linear-gradient(top, #fb99fb, #f917ea);
background:-webkit-gradient(linear, left top, left bottom, from(#fb99fb), to(#f917ea));
transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
}
.dl li a {color:#fff; text-decoration:none; display:block;}
.dl li a:hover {text-decoration: none;}

/*
================================================================================================================
花輪リスト
================================================================================================================
*/
#wrapper {
	width: 100%;
	margin: 0 auto;
	color: #7d7d7d;
	padding-bottom: 0px;
}

.alpha {
    display:inline-block;
    zoom: 1;
    line-height: 1;
}

.alpha:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.active {
	background-color: #C6F9F4;
}

#btn {
	overflow: hidden;
	/*margin-bottom: 40px;*/
}

#btn li {
  width: calc(100% - 20px);
	margin: 10px;
	/*cursor: pointer;*/
	border-radius: 24px;
}
#btn li a{
    display: block;
    height: 100%;
    width: 100%;
	margin: 0px;
	padding: 15px;
	border-radius: 24px;
}

#animationList {
	overflow: hidden;
    display: -webkit-flex!important;
    display: flex!important;
	-webkit-flex-wrap: wrap!important;
	flex-wrap: wrap!important;
/*    -webkit-justify-content: space-between!important;
    justify-content: space-between!important;*/
    -webkit-align-items: stretch!important;
    align-items: stretch!important;
}

#animationList li {
	width:calc((99% - 2px) / 8);
	height: auto;
	padding: 5px;
	/*float: left;*/
	color: #333;
}
@media screen and (max-width:1600px){#animationList li {width:calc((99% - 2px) / 6);}}
@media screen and (max-width:1400px){#animationList li {width:calc((99% - 2px) / 5);}}
@media screen and (max-width:1200px){#animationList li {width:calc((99% - 2px) / 4);}}
@media screen and (max-width:980px){#animationList li {width:calc((99% - 2px) / 3);}}
@media screen and (max-width:720px){#animationList li {width:calc((99% - 2px) / 2);}}
@media screen and (max-width:540px){#animationList li {width:calc((99% - 2px) / 1);}}

#animationList li span {
	display: block;
	width: 100%;
	height: 100%;
	border:3px solid #C88200;
	outline: 1px solid #C88200; /* 線幅、線のスタイル、カラー */
outline-offset: -6px; /* 対象の要素からの距離、マイナス(内側)にも対応 */
padding:2%;
	box-shadow:#446 1px 1px 1px;
	background-color: #FFFFFF;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
	background-image: url("../img/sama.jpg");
	background-size: 12%;
	background-position: right bottom;
	background-repeat: no-repeat;
}

/*.hanawa {
	width: 24%;
  background-image:url('../img/icon_hanawa.png');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}*/

.mh8np {
	width: 24%;
  background-image:url('../img/icon_hanawa_01.png?v01');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}

.mh8 {
	width: 24%;
  background-image:url('../img/icon_hanawa_02.png?v01');
	background-size:contain;
	background-position:center center;
	background-repeat:no-repeat;
}

.hanawa img, .mh8np img, .mh8 img, .mhtot img {
	width: 100%;
}
.location{
	width:calc(76% - 5px);
  font-size: 90%;
	padding-left: 5px;
}
.name{
	width: 100%;
  font-size: 90%;
 line-height: 110%;
}
@media screen and (max-width:1200px){.hanawa, .mh8np, .mh8, .mhtot {width: 22%;}.location{width:calc(78% - 5px);} .name{font-size:90%; line-height: 110%;}}
@media screen and (max-width:980px){.hanawa, .mh8np, .mh8, .mhtot {width: 20%;}.location{width:calc(80% - 5px);} .name{font-size:90%; line-height: 110%;}}
@media screen and (max-width:720px){.hanawa, .mh8np, .mh8, .mhtot {width: 18%;}.location{width:calc(82% - 5px);} .name{font-size:90%; line-height: 110%;}}
@media screen and (max-width:540px){.hanawa, .mh8np, .mh8, .mhtot {width: 15%;}.location{width:calc(85% - 5px);} .name{font-size:110%; line-height: 110%;}}



/*
================================================================================================================
地域選択
================================================================================================================
*/
/*Styling Selectbox*/
.location_menu{
	max-width: 100%;
	text-align: right;
  position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
}
@media all and (-ms-high-contrast: none) {
.location_menu{
	max-width: 1100px;
	text-align: right;
  position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
	}
}
.dropdown {
  width: calc(40% - 20px);
  max-width: 400px;
  display: inline-block;
  background-color: #fff;
  border-radius: 6px;
	border: solid 1px #AA8;
	margin: 10px;
  box-shadow: 0 0 2px rgb(204, 204, 204);
  transition: all .5s ease;
  position: relative;
  font-size: 14px;
  color: #474747;
  height: 100%;
  text-align: left;
z-index:999;
}
@media screen and (max-width:800px){.dropdown {width:100%; max-width: 100%;}}
.dropdown .select {
    cursor: pointer;
    display: block;
    padding: 10px;
  width:calc(100% - 0px);
}
.dropdown .select:after {
  display: block;
  clear: both;
  float:right;
  content: "▼";
}
.dropdown .select > i {
    font-size: 13px;
    color: #888;
    cursor: pointer;
    transition: all .3s ease-in-out;
    float: right;
    line-height: 20px;
}
.dropdown:hover {
    box-shadow: 0 0 4px rgb(204, 204, 204);
}
.dropdown:active {
    background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
    box-shadow: 0 0 4px rgb(204, 204, 204);
    border-radius: 2px 2px 0 0;
    background-color: #f8f8f8;
}
.dropdown.active .select > i {
    transform: rotate(-90deg);
}
.dropdown .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    left: 0;
    margin-top: 1px;
    box-shadow: 0 1px 2px rgb(204, 204, 204);
    border-radius: 0 1px 2px 2px;
    display: none;
	height: auto;
	max-height: 200px;
	 overflow: scroll;
    overflow-x: hidden;
	border-left:solid 1px #AA8;
	border-right:solid 1px #AA8;
	border-bottom:solid 1px #AA8;
    z-index: 9;
}
.dropdown .dropdown-menu li {
    /*padding: 10px;*/
    transition: all .2s ease-in-out;
    cursor: pointer;
} 
.dropdown .dropdown-menu {
    padding: 0;
    list-style: none;
}
.dropdown .dropdown-menu li:hover {
    background-color: #f2f2f2;
}
.dropdown .dropdown-menu li:active {
    background-color: #e2e2e2;
}

/*
================================================================================================================
Twitter
================================================================================================================
*/
.twitter_area{
	position:relative;
	width:100%;
	padding:0px;
	margin:10px auto 0 auto;
	background-color: rgba(255,255,255,0.0);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
	z-index: 900;
}
.box_twitter {
	position:relative;
	width:30%;
	max-width: 420px;
	padding:6px 6px 6px 6px;
	border-radius:6px;
	top:0;
	bottom: 0;
	background-color: rgba(255,255,255,1.0);
	box-shadow:#446 2px 2px 10px;
}
@media screen and (max-width:800px){.box_twitter {margin-top:90vw; width:100%; max-width: 100%;}}
.box_twitter.space {
	margin-bottom:5%;
}
.scroll_tw {
	position:relative;
	width:100%;
	height:38vw;
	padding:0;
	border-radius:0;
	overflow-y: scroll;
	top:0;
	margin:0;
	background-color: rgba(255,255,255,1.0);
}
@media screen and (min-width:1400px){.scroll_tw {height:480px;}}
@media screen and (max-width:800px){.scroll_tw {height:300px;}}