@charset "utf-8";
@media print, screen and (max-width:768px){
/*=========================================================================
STYLE BASIC
=========================================================================*/
.for_pc {display: none !important;} 

/*-------------------------------------------------------------------------------------------------------------------------*/
body.open {z-index: -1; overflow: hidden;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#contentHeadline {font-size: 36px; margin-bottom:45px;}
#contentHeadline.sub_headline {font-size: 24px; margin-bottom: 30px;}

@media print, screen and (max-width:320px){
#contentHeadline {font-size: 32px; }
#contentHeadline.sub_headline {font-size: 20px; }
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#lineDown {top: 80px;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#onePeriod {font-size: 13px; margin-bottom: 60px;}
#onePeriod p {margin-bottom: 15px;}

@media print, screen and (max-width:320px){
#onePeriod {font-size: 12px;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#btnMore a {font-size: 16px; padding: 5px 30px;}

#btnMore.return {margin-top: 60px;}


@media print, screen and (max-width:320px){
#btnMore a {font-size: 14px;}
}
/*-------------------------------------------------------------------------------------------------------------------------*/
#oneDetail {font-size: 13px; padding: 30px 0;}
#oneDetail p {margin-bottom: 15px;}

@media print, screen and (max-width:320px){
#oneDetail {font-size: 12px;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#pageHeadeline {font-size: 18px; margin-bottom: 30px; text-align: center;}
#pageHeadeline span {font-size: 26px;}

@media print, screen and (max-width:320px){
#pageHeadeline {font-size: 14px;}
#pageHeadeline span {font-size: 20px;}
}


/*-------------------------------------------------------------------------------------------------------------------------*/
#Coming {padding: 90px 0; font-size: 18px;}

@media print, screen and (max-width:320px){
#Coming { font-size: 16px;}
}



/*=========================================================================
HEADER
=========================================================================*/
#Header, #headBody {height: 80px; }

#Logo {
width: 14%;
top:60%;
left: 50%;
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}



/*=========================================================================
HEADER：GLOBAL NAVI
=========================================================================*/
#globalNavi {
position: relative;
min-height: 100vh;
padding: 80px 0;
overflow-x: hidden;
background: rgba(0,0,0,1);
color: #fff;
width: 100%;
height: 100%;
position: fixed;
top:0;
right: -200%;
z-index: -1;
transition: all .5s;
opacity: 0;

/*
-webkit-transform: translateY(-100%);
 transform: translateY(-100%);
	*/
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}

#globalNavi.open {opacity: 1; z-index:98 !important; right: 0;	/*-webkit-transform:translateY(0); transform:translateY(0); */}

#globalNavi:after {
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}


#globalNavi:after {
content: "";
position: absolute;
top:50%;
left: 50%;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: 80%;
background-position: center;
background-image: url("../img/logo.svg");

z-index:-1;
margin: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-opacity: .8;
opacity: .8;
-webkit-filter: invert(90%);
filter: invert(90%);
}

/*------------------------------------------------------------------------------------------------------------------ */
#menu-trigger {
position:absolute;
width:30px ;
height: 30px;
cursor: pointer;
z-index: 99;
margin: auto;
right: 4%;
top:50%;
transition: all .5s;
	-moz-transform: translate(-0%, -50%);
-webkit-transform: translate(-0%, -50%);
-o-transform: translate(-0%, -50%);
-ms-transform: translate(-0%, -50%);
	transform: translate(-0%, -50%);
}
#menu-trigger span {
background: #fff;
display: block;
position: absolute;
height: 3px;
width:100%;
left: 0%;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}

#menu-trigger span:nth-child(1) {  top: 5px;}
#menu-trigger span:nth-child(2) {  top: 13px; width: 80%;}
#menu-trigger span:nth-child(3) {  top: 21px; width: 60%;}

#menu-trigger.active span:nth-child(1) , #menu-trigger.active span:nth-child(3) {top: 13px;}
#menu-trigger.active span:nth-child(1) {-webkit-transform: rotate(315deg);transform: rotate(315deg);}
#menu-trigger.active span:nth-child(2) {width: 0;left: 50%;}
#menu-trigger.active span:nth-child(3) {-webkit-transform: rotate(-315deg);transform: rotate(-315deg); width: 100%;}

/*---------------------------------------------------------------------------------------------------- */
ul#naviList {padding: 45px 0; }

ul#naviList li a {position: relative; z-index: 1;}
ul#naviList {list-style-type: none;text-align: center;}
ul#naviList li.naviconts {font-size: 22px;margin-bottom: 30px;opacity: 0;}
ul#naviList li.naviconts {position: relative;}

ul#naviList li:first-of-type { animation-delay: .15s; }
ul#naviList li:nth-of-type(2) { animation-delay: 0.2s; }
ul#naviList li:nth-of-type(3) { animation-delay: 0.45s; }
ul#naviList li:nth-of-type(4) { animation-delay: 0.6s; }
ul#naviList li:nth-of-type(5) { animation-delay: 0.75s; }
ul#naviList li:nth-of-type(6) { animation-delay: 0.9s; }
ul#naviList li:nth-of-type(7) { animation-delay: 1.05s; }
ul#naviList li:nth-of-type(8) { animation-delay: 1.2s; }

ul#naviList li:last-of-type {margin-bottom: 0;}

ul#naviList li a {color:#fff;}

ul#naviList li a:hover:after {opacity: 1;left: 0;}

/*=========================================================================
SNS ICON
=========================================================================*/
#sns_iconBox {
left: 50%;
bottom: 6%;
width: 100%;
max-width: 160px;
-moz-transform:  translate(-50%, 0%);
-webkit-transform:  translate(-50%, 0%);
-o-transform:  translate(-50%, 0%);
-ms-transform:  translate(-50%, 0%);
transform: translate(-50%, 0%);

-webkit-border-radius: 6px;
border-radius: 6px;

-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;
}
/*-------------------------------------------------------------------------------------------------------------------------*/
ul#sns_iconList {letter-spacing: -.4em; padding: 10px;width: 100%;}
ul#sns_iconList li {letter-spacing: 0; vertical-align: middle; display: inline-block; width: 14%; margin-right: 8%;}
ul#sns_iconList li:last-of-type {margin-right: 0;}

ul#sns_iconList li a {display: block; width: 100%; height: auto;}
ul#sns_iconList li img {
-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 8px rgba(0,0,0,.7));
}



/*=========================================================================
FOOTER
=========================================================================*/
#footerBody {padding:45px 0 20%;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#bottomLogo {width: 45%;max-width:120px; margin-bottom: 5px;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#Copy  {font-size: 11px;}



/*=========================================================================
CATEGORY NAVI
=========================================================================*/
ul#category_naviList {padding: 5px 0px; }
ul#category_naviList li a {padding: 10px 0px;  font-size:13px; }


@media print, screen and (max-width:320px){
ul#category_naviList li a {font-size:12px; }
}

/*=========================================================================
PAGE TOP
=========================================================================*/
#page-top {width: 10%; }




/*=========================================================================
PAGER
=========================================================================*/
.pager {margin-top: 45px; font-size: 11px;	}


/*=========================================================================
NO PAGE
=========================================================================*/
#no_pagebox {	margin-bottom:30px;	padding:9% 0%;}

#notfoud {font-size: 26px; }
#notfont_kana {font-size: 12px;}

#no_pagebox p {margin: 15px 0 ; font-size: 11px; }



/*=========================================================================
ARCHIVE LINK
=========================================================================*/
section#Archive {padding:45px 0;}

ul#archiveList li {font-size: 13px; margin: 0 2% 5px 0; width: 23.5%;}
ul#archiveList li:nth-of-type(4n) {margin-right: 0;}

ul#archiveList li a {padding: 5px 0px;}


/*=========================================================================
NEWS
=========================================================================*/

ul#newsList {
letter-spacing: -.4em;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
ul#newsList li {width: 49%; margin: 0 2% 45px 0; letter-spacing: 0; vertical-align: top; display: inline-block;}
ul#newsList li:nth-of-type(even) {margin-right: 0;}


@media print, screen and (max-width:414px){
ul#newsList {width: 100%; margin: 0 auto; display: block;}
ul#newsList li {width: 100%; margin: 0 auto 45px;}
ul#newsList li:last-of-type {margin-bottom: 0;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#topics_headelineBox  {padding: 15px 10px;}

#topicsCategory {padding: 1px 15px; font-size: 11px; margin-bottom: 10px;}

#topics_upDate {font-size: 11px;}
#topics_headelineBox	#markNew {font-size: 10px; padding-left: 5px;}

#topicsTitle {font-size: 13px; margin-bottom: 10px;}




}