@charset "utf-8";
html {font-size: 62.5%}
body {
background-color: #FFFFFF;
min-width: 1300px;
color: #242424;
font-size: 1.6rem;
font-family: 'Noto Sans Japanese', sans-serif;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
 0% {opacity: 0}
 100% {opacity: 1}
}
select,input,button,textarea,button {font:99%;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
a:link {
color: #000000;
transition: .3s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
a:active {
color: #000;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: inherit!important;
}
.sp {
display: none!important;
}
#wrapper {
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 100px;
padding-top: 30px;
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
header .inner {
width: 94%;
margin-right: auto;
margin-left: auto
}
header .inner h1{
float: left;
margin-right: 60px;
}
header .inner .miyagi_logo{
float: right;
}
/*--NAVIGATION-------------*/
nav#gnav {
float: left
}
#gnav ul {}
#gnav ul li {
margin-right: 2em;
float: left;
font-size: 1.4rem;
font-weight: 600;
}
#gnav ul li a {
text-decoration: none!important;
border-bottom: 2px solid rgba(255,255,255,0.00);
padding-bottom: 3px;
}
#gnav ul li a:hover {
text-decoration: none!important;
border-bottom: 2px solid rgba(0,0,0,1.00);
}
#gnav ul li.under {
opacity: .3
}


/*--MAINVIS-------------*/
#mainVis {
width: 100%;
position: relative;
margin-bottom: 30px;
margin-top: 90px;
padding-top: 100px;
padding-bottom: 100px;
background-color: #EA719F
}
#mainVis .picture{
width: calc(100% - 300px);
margin-left: auto;
margin-right: auto;
}
#mainVis .picture img{
width: 100%;
height: auto;
}


/*--CONTENTS-------------*/
#contents {
width: calc(100% - 300px);
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}

.ttl_read {
margin-bottom: 20px;
}
.ttl {
margin-bottom: 40px;
}
.date {
margin-bottom: 15px;
}
.notice{
font-size: 1.4rem;
margin-top: 2em;
color: #6A6A6A
}
/*--MAIN-------------*/
#main{
padding-top: 100px;
}

h2.head-border {
    display: flex;
    align-items: center;
	font-size: 2.0rem;
	font-weight: 600;
	margin-bottom: 1em
}
h2.head-border:before,
h2.head-border:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    background-color: #666;
}
h2.head-border:before {
    margin-right: 1rem;
}
h2.head-border:after {
    margin-left: 1rem;
}
h3.sub_ttl {
font-size: 1.6rem;
background-color: #212121;
color: #FFF;
padding: 10px;
border-radius: 4px;
line-height: 1;
margin-top: 3em
}



p.read{
text-align: center
}

ul#artwork_list{
width: 100%;
margin-top: 60px;
margin-bottom: 100px;
}
ul#artwork_list li{
width: 32%;
margin-right: 2%;
float: left;
margin-bottom: 40px;
}
ul#artwork_list li:nth-child(3n){
margin-right: 0%;
}
ul#artwork_list li .thum{
margin-bottom: 10px;
}
ul#artwork_list li .thum img{
width: 100%;
height: auto
}
ul#artwork_list li .meta{
font-size: 1.4rem;
}
ul#artwork_list li .meta span{
font-size: 1.2rem;
}
ul#artwork_list li .meta i.awa{
font-size: 1.2rem;
background-color: #000000;
color: #FFF;
float: left;
font-style: normal;
padding: 2px 8px;
margin-right: 1em;
border-radius: 4px;
margin-bottom: 1em
}

.more-btn{
text-align: center;
margin-bottom: 150px;
}
.more-btn a{
	line-height: 40px;
	font-size: 1.4rem;
	border: 1px solid rgba(0,0,0,1.00);
	width: 80%;
	border-radius: 100px;
	display: inline-block;
} 
.more-btn a:hover{
	background-color: #000;
	color: #FFF
}


.more-btn_arc{
text-align: center;
margin-bottom: 150px;
}
.more-btn_arc a{
	line-height: 40px;
	font-size: 1.4rem;
	border: 1px solid rgba(0,0,0,1.00);
	width: 80%;
	border-radius: 100px;
	display: inline-block;
} 
.more-btn_arc a:hover{
	background-color: #000;
	color: #FFF
}

/*--FOOTER-------------*/
footer {}
footer .inner {
width: calc(100% - 300px);
margin-right: auto;
margin-left: auto;
padding-bottom: 100px;
}
footer .sponsored {
	border-bottom: 1px solid #C6C6C6;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 1.8rem
}
footer .info_ttl {
margin-bottom: 0.7em
}
footer p{
font-size: 1.4rem
}
footer .cont{
float: left
}
footer .bnr_link{
float: right
}


#artwork,
#event{
padding-top: 100px;
margin-top: -100px;
}

/*--EVENT-------------*/
.eve_mv{
width: 100%;
margin-bottom: 25px;
}
.eve_mv img{
width: 100%;
height: auto
}

h2.head-border.eve {
	font-size: 3.2rem;
}
h2.head-border.eve span{
	font-size: 1.6rem;
    padding-left: 1em
}
.event_bx{
width: 100%;
margin-bottom: 60px;
}
.event_bx .ttl{
margin-bottom: 10px;
}
.event_bx .ttl span{
	font-size: 2.2rem;
	display: inline-block;
	line-height: 1;
	padding: 5px 65px;
	border: 1px solid #000000;
	border-radius: 100px;
}
.event_bx .date{
	font-weight: 600;
    font-size: 1.8rem
}
.event_bx .date span{
	background: linear-gradient(transparent 60%, #FFFF00 40%);
}
.event_bx h3.eve_strong{
margin-top: 2em;
font-weight: 600;
margin-bottom: 0.5em
}
.event_bx table{
    border-top: 1px solid #D1D1D1;
    border-left: 1px solid #D1D1D1;
    width: 100%;
    
}
.event_bx table th,.event_bx table td{
    border-bottom: 1px solid #D1D1D1;
    border-right: 1px solid #D1D1D1;
    padding: 10px;
    vertical-align: top
}
.event_bx table th{
    font-weight: 600;
}
.event_bx .member p{

margin-bottom: 1em
}
.event_bx .notice{
font-size: 1.4rem;
margin-bottom: 1em
}


.event_bx .cont .btn_entry{
	text-align: center;
	margin-top: 2em
}
.event_bx .cont .btn_entry a{
	background-color: #1A1A1A;
	color: #FFF;
	padding: 10px;
	display: block;
	border-radius: 100px;
	text-decoration: none;
	border: 1px solid #000000;
}
.event_bx .cont .btn_entry a:hover{
	background-color: #FFF;
	color: #1A1A1A;
}































@media screen and (max-width: 520px) {
html {font-size: 62.5%}
body {
background-color: #FFFFFF;
color: #242424;
min-width: 380px;
font-size: 1.4rem;
font-family: 'Noto Sans Japanese', sans-serif;
-webkit-text-size-adjust: 100%;
animation: fadeIn 2s ease 0s 1 normal;
-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

select,input,button,textarea,button {font:99%;}
table {font-size:inherit;font:100%;}
pre,code,kbd,samp,tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
a:link {
color: #000000;
transition: .3s;
}
a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #000000;
text-decoration: underline;
}
a:active {
color: #000000;
text-decoration: none;
}
a.btn img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
-ms-filter: 'alpha(opacity=100)';
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
a:hover.btn img {
-ms-filter: 'alpha(opacity=60)';
filter: alpha(opacity=30);
-moz-opacity: 0.40;
opacity: 0.40;
}
a {
outline: none;
}
::selection {
background: #000000;
color: #FFFFFF;
}
::-moz-selection {
background:#000000;
color:#FFFFFF;
}
::-webkit-selection {
background:#000000;
color:#FFFFFF;
}
strong {
font-weight: bold;
}
.pc {
display: none!important;
}
.sp {
display: inherit!important;
}
#wrapper {
overflow: hidden
}
/*--HEADER-------------*/
header {
height: 50px;
padding-top: 20px;
}
header .inner {
width: 94%;
margin-right: auto;
margin-left: auto
}
header .inner h1{
float: left;
margin-right: 0px;
width: 70%
}
header .inner h1 img{
width: 100%;
height: auto
}
header .inner .miyagi_logo{
float: right;
display: none
}
header .inner .miyagi_logo img{
width: 90px;
height: auto
}
/*--NAVIGATION-------------*/
nav#gnav {
float: none;
display: none;
width: 100%;
height: 100vh;
position: fixed;
background-color: rgba(255,255,255,0.90);
z-index: 999;
left: 0;
top: 0;
}
#gnav ul {
text-align: center;
padding-top: 30vh
}
#gnav ul li {
margin-right: 0em;
float: none;
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 2em
}
#gnav ul li a {
text-decoration: none!important;
border-bottom: 2px solid rgba(255,255,255,0.00);
padding-bottom: 3px;
}
#gnav ul li a:hover {
text-decoration: none!important;
border-bottom: 2px solid rgba(0,0,0,0.00);
}
#gnav ul li.under {
opacity: .3
}

/*--MAINVIS-------------*/
#mainVis {
width: 100%;
position: relative;
margin-bottom: 30px;
margin-top: 60px;
padding-top: 30px;
padding-bottom: 10px;
background-color: #EA719F
}
#mainVis .picture{
width: 94%;
height: auto;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
#mainVis .picture img{
width: 100%;
height: auto;
}


/*--CONTENTS-------------*/
#contents {
width: 90%;
margin-right: auto;
margin-left: auto;
padding-bottom: 50px;
}
#contents:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden
}

.ttl_read {
margin-bottom: 10px;
}
.ttl_read img{
width: 100%;
height: auto
}
.ttl {
margin-bottom: 20px;
}
.ttl img{
width: 100%;
height: auto
}
.date {
margin-bottom: 8px;
text-align: center
}
.place {
text-align: center
}
.date img,
.place img{
width: 70%;
height: auto
}
.notice{
font-size: 1.2rem;
margin-top: 2em;
color: #6A6A6A
}

/*--MAIN-------------*/
#main{
padding-top: 50px;
}

h2.head-border {
    display: block;
    align-items: center;
	font-size: 2.0rem;
	font-weight: 600;
	margin-bottom: 1em;
    text-align: center
}
h2.head-border:before,
h2.head-border:after {
    content: "";
    height: 3px;
    flex-grow: 1;
    background-color: #666;
}
h2.head-border:before {
    margin-right: 1rem;
}
h2.head-border:after {
    margin-left: 1rem;
}
p.read{
text-align: left;
font-size: 1.4rem
}
p.read br{
display: none
}

ul#artwork_list{
width: 100%;
margin-top: 60px;
margin-bottom: 50px;
}
ul#artwork_list li{
width: 48%;
margin-right: 4%;
float: left;
margin-bottom: 20px;
}
ul#artwork_list li:nth-child(3n){
margin-right: 4%;
}
ul#artwork_list li:nth-child(2n){
margin-right: 0%;
}
ul#artwork_list li .thum{
margin-bottom: 10px;
}
ul#artwork_list li .thum img{
width: 100%;
height: auto
}
ul#artwork_list li .meta{
font-size: 1.2rem;
}
ul#artwork_list li .meta span{
font-size: 1.0rem;
}
.more-btn{
text-align: center;
margin-bottom: 150px;
}
.more-btn a{
	line-height: 40px;
	font-size: 1.4rem;
	border: 1px solid rgba(0,0,0,1.00);
	width: 80%;
	border-radius: 100px;
	display: inline-block;
} 
.more-btn a:hover{
	background-color: #000;
	color: #FFF
} 



/*--FOOTER-------------*/
footer {
text-align: center
}
footer .inner {
width: 90%;
margin-right: auto;
margin-left: auto;
padding-bottom: 50px;
}
footer .sponsored {
	border-bottom: 1px solid #C6C6C6;
	padding-bottom: 10px;
	margin-bottom: 10px;
	font-size: 1.4rem
}
footer .info_ttl {
font-size: 1.4rem;
margin-bottom: 0.7em
}
footer p{
font-size: 1.2rem
}

footer .cont{
float: none
}
footer .bnr_link{
float: none;
text-align: center;
margin-top: 2em
}


#artwork,
#event{
padding-top: 100px;
margin-top: -100px;
}

/*--EVENT-------------*/
.eve_mv{
width: 100%;
margin-bottom: 15px;
}
.eve_mv img{
width: 100%;
height: auto
}

h2.head-border.eve {
	font-size: 1.8rem;
}
h2.head-border.eve span{
	font-size: 1.2rem;
    padding-left: 0em;
    display: block
}

.event_bx{
width: 100%;
margin-bottom: 60px;
}
.event_bx .ttl{
margin-bottom: 10px;
text-align: center
}
.event_bx .ttl span{
	font-size: 20px;
	display: block;
	line-height: 1;
	padding: 5px 65px;
	border: 1px solid #000000;
	border-radius: 100px;
}
.event_bx .date{
	font-weight: 600;
    font-size: 1.4rem;
    text-align: left!important
}
.event_bx .date span{
	background: linear-gradient(transparent 60%, #FFFF00 40%);
}
.event_bx h3.eve_strong{
margin-top: 2em;
font-weight: 600;
margin-bottom: 0.5em
}
.event_bx table{
    border-top: 1px solid #D1D1D1;
    border-left: 1px solid #D1D1D1;
    width: 100%;
    font-size: 1.4rem
}
.event_bx table th,.event_bx table td{
    border-bottom: 1px solid #D1D1D1;
    border-right: 1px solid #D1D1D1;
    padding: 10px;
    vertical-align: top;
    display: block
}
.event_bx table th{
    font-weight: 600;
}
.event_bx .member p{
font-size: 1.4rem;
margin-bottom: 1em
}

.event_bx .cont .btn_entry{
	text-align: center;
	margin-top: 2em
}
.event_bx .cont .btn_entry a{
	background-color: #1A1A1A;
	color: #FFF;
	padding: 10px;
	display: block;
	border-radius: 100px;
	text-decoration: none;
	border: 1px solid #000000;
}
.event_bx .cont .btn_entry a:hover{
	background-color: #FFF;
	color: #1A1A1A;
}


/*SP NAV*/
#panel-btn{
  display: inline-block;
  position: fixed;
  width: 50px;
  height: 50px;
  margin: 5px 0 10px;
  border-radius: 50%;
  right: 20px;
  top: 0px;
  z-index: 9999999;
animation-duration: 2s;
}
#panel-btn-icon{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 3px;
  margin: -1px 0 0 -7px;
  background: #000;
  transition: .2s;
}
#panel-btn-icon:before, #panel-btn-icon:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 3px;
  background: #000;
  transition: .3s;
}
#panel-btn-icon:before{
  margin-top: -8px;
}
#panel-btn-icon:after{
  margin-top: 4px;
}
#panel-btn .close{
  background: transparent;
}
#panel-btn .close:before, #panel-btn .close:after{
  margin-top: 0;
}
#panel-btn .close:before{
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
#panel-btn .close:after{
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}


}