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

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

/*-------------------------------------------------------------------------------------------------------------------------*/
.anchor_style {padding-top: 60px; margin-top: -60px; }


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

@media print, screen and (max-width:414px){
#markNew {font-size: 2.4vw;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#mainContents {padding:0px 0 0;}
#mainContents.inner {padding-bottom: 0%;}

/*-------------------------------------------------------------------------------------------------------------------------*/
section:last-of-type {padding-bottom: 12%;}

body#Top section:last-of-type {padding-bottom: 0%;}
body#News section:last-of-type {padding-bottom: 0%;}

/*-------------------------------------------------------------------------------------------------------------------------*/
.section_basic {margin-top:60px;}
.section_inner {padding: 30px;}

@media print, screen and (max-width:414px){
.section_basic {margin-top:6%;}
.section_inner {padding: 5%;}
}


/*-------------------------------------------------------------------------------------------------------------------------*/
#with_subNavi.section_basic {margin-top: 30px;}

@media print, screen and (max-width:414px){
#with_subNavi.section_basic {margin-top: 4%;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#btnMore {font-size: 13px;}
#btnMore a {padding: 5px 20px;}

@media print, screen and (max-width:414px){
#btnMore { font-size: 2.8vw;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#Coming {padding: 24% 0; font-size: 22px; }

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

/*-------------------------------------------------------------------------------------------------------------------------*/
.section_title {font-size: 38px; margin-bottom: 15px;}
.section_title.in_page {font-size: 38px; margin-bottom: 0;top: 42%;}

@media print, screen and (max-width:414px){
.section_title {font-size: 5.8vw; margin-bottom: 3%;}
.section_title.in_page {font-size: 5.8vw; }
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#contensTitle {font-size: 32px; margin-bottom: 30px;}

@media print, screen and (max-width:414px){
#contensTitle {font-size: 4.8vw; margin-bottom: 6%}
}


/*-------------------------------------------------------------------------------------------------------------------------*/
.section_basic {margin-bottom: 60px;margin-top: 45px;}
section:last-of-type .section_basic {margin-bottom: 0;}

body#Top .section_basic {margin-top: 60px;}


@media print, screen and (max-width:414px){
.section_basic {margin-bottom: 6%;margin-top: 4%;}
body#Top .section_basic {margin-top: 6%;}
}



/*-------------------------------------------------------------------------------------------------------------------------*/
.box_inner,.bloc_body {padding: 30px;}
.box_inner, .box_inner p {font-size: 14px;}
.box_inner p {margin-bottom: 15px;}

@media print, screen and (max-width:414px){
.box_inner,.bloc_body {padding: 4%;}
.box_inner, .box_inner p {font-size: 3vw;}
.box_inner p {margin-bottom: 1.5%;}
}


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

@media print, screen and (max-width:414px){
#onePeriod {margin-bottom: 6%; font-size: 3vw;}
#onePeriod p {margin-bottom: .5%;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
#article_snsbtnBody {display: -webkit-flex; display: flex; align-items: center; }
#article_snsTitle {font-size: 13px; margin-right: 2%;}

ul#article_snsBtn{width: 90%; max-width: 200px;}
ul#article_snsBtn li {width: 10%; margin:0 6% 0 0 !important; }

@media print, screen and (max-width:414px){
#article_snsTitle {font-size:3.6vw; }
ul#article_snsBtn{width: 84%;}
}


/*==========================================================================================================================
HEADER
==========================================================================================================================*/
#Header {height: auto;}


/*-------------------------------------------------------------------------------------------------------------------------*/
body.in_page #Header {padding-top: 16%;}


/*-------------------------------------------------------------------------------------------------------------------------*/
#Logo {
position: static;
z-index: 1;
margin: 0 auto;
width: 60%;
max-width: 260px;
-ms-filter: drop-shadow(0 0 0 #fff);
-o-filter:drop-shadow(0 0 0 #fff);
-moz-filter: drop-shadow(0 0 0 #fff);
-webkit-filter: drop-shadow(0 0 0 #fff);
filter: drop-shadow(0 0 0 #fff);
}

#globalNavi.open #Logo {display: block;}

/*==========================================================================================================================
HEADER：GLOBAL NAVI
==========================================================================================================================*/
#globalNavi {
min-height: 100vh;
padding: 85px 0;
overflow-x: hidden;
background-image: url('../img/bg_header.jpg');
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
/*animation: grad 8s ease infinite;*/
color: #000;
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: 90%;
background-position: center;
z-index:-1;
margin: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-opacity: .2;
opacity: .2;
}

body.bg_black #globalNavi {background: #222; color: #fff;}




/*------------------------------------------------------------------------------------------------------------------ */
#menu-trigger {
position:fixed;
width:30px ;
height: 30px;
cursor: pointer;
z-index: 99;
margin: auto;
right: 10px;
top:5px;
transition: all .5s;
}
#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;
-ms-box-shadow: 0 3px 3px rgba(0,0,0,.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.2);
box-shadow: 0 3px 3px rgba(0,0,0,.2);
}



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

#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%;}

#menu-trigger:hover span {background: #f3ca92;}



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

ul#naviList {list-style-type: none;text-align: center;}
ul#naviList li {font-size: 20px; margin-bottom: 30px;}
ul#naviList li {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;}

@media print, screen and (max-width:414px){
ul#naviList li {font-size: 5vw; margin-bottom: 9;}
}



/*-------------------------------------------------------------------------------------------------------------------------*/
ul#naviList li a {
-moz-text-shadow: 0px 0px 3px rgba(0,0,0,.8);
-webkit-text-shadow:  0px 0px 3px rgba(0,0,0,.8);
text-shadow: 0px 0px 5px rgba(0,0,0,.8);
position: relative;
z-index: 1;
color: #000;
}
ul#naviList li a:hover {color: #f3ca92;}


/*==========================================================================================================================
SNS ICON LIST
==========================================================================================================================*/
#sns_iconBox {
left: 50%;
bottom: 4%;
max-width: 160px;
width: 90%;
z-index: 1000;
-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: 3px;
border-radius: 3px;

-o-transition: .3s;
-ms-transition: .3s;
-moz-transition: .3s;
-webkit-transition: .3s;
transition: .3s;

-webkit-filter: drop-shadow(0px 0px 8px rgba(0,0,0,.7));
filter: drop-shadow(0px 0px 8px rgba(0,0,0,.7));
}
/*-------------------------------------------------------------------------------------------------------------------------*/
ul#sns_iconList {display: -webkit-flex; display: flex; padding:5px 10px;width: 100%; justify-content: space-between; align-content: center;}
ul#sns_iconList li { width: 15%; 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 a:hover {filter: alpha(opacity=75); -moz-opacity:.75; opacity:.75;}




/*==========================================================================================================================
FOOTER
==========================================================================================================================*/
#Footer {background-repeat: no-repeat;background-position: center top; background-size: cover; overflow: hidden;}


#Footer:before,
#Footer:after {content: ''; position: absolute;}
#Footer:after {
background: inherit;
-ms-filter:blur(12px);
-moz-filter:blur(12px);
-webkit-filter:blur(12px);
filter: blur(12px);
top: -12px;
left: -12px;
right:-12px;
bottom:-12px;
z-index: -2;
}
#Footer:before {
top: -12px;
left: -12px;
right:-12px;
bottom:-12px;
background: rgba(0,0,0,.5);
z-index: -1;
}

/*-------------------------------------------------------------------------------------------------------------------------*/
.foot_inner {padding: 9% 0 22%;}

/*-------------------------------------------------------------------------------------------------------------------------*/
#Copy {font-size: 13px; width: 100%;}

@media print, screen and (max-width:414px){
#Copy {font-size: 2.4vw;}
}


/*-------------------------------------------------------------------------------------------------------------------------*/
#footLogo {margin-bottom: 15px; width: 30%;}


/*==========================================================================================================================
SUB NAVI
==========================================================================================================================*/
#sub_naviBloc {margin-top: 30px; margin-bottom: 30px;}

@media print, screen and (max-width:414px){
#sub_naviBloc {margin-top: 6%; margin-bottom: 6%;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
ul#subNavi li {margin-right: 3%; font-size: 13px; }
ul#subNavi li a {padding: 5px 10px;}

@media print, screen and (max-width:414px){
ul#subNavi li {font-size: 2.7vw;}
}



/*==========================================================================================================================
PAGE TOP
==========================================================================================================================*/
#page-top {padding-top: 0px; right: 2%; bottom: 5%;}
#page-top, #page-top a {width: 30px; height: 30px; }

/*=========================================================================================
PAGER
==========================================================================================*/
a.page-numbers, .pager .current, .pager a:hover{font-size: 14px;}

@media print, screen and (max-width:414px){
a.page-numbers, .pager .current, .pager a:hover{font-size: 3vw;}
}

/*-------------------------------------------------------------------------------------------------------------------------*/
ul#bottom_btnBloc {padding: 6% 0 12%;}

/*-------------------------------------------------------------------------------------------------------------------------*/
.pagination li {font-size: 13px; margin-right: 3%;}
.pagination li a {padding: 4px 30px; }
.pagination li#btnPrev a:after{left: 0;}
.pagination li#btnNext a:after{right: 0;}

@media print, screen and (max-width:414px){
.pagination li {font-size: 3vw;}
}




/*=========================================================================
NO PAGE
=========================================================================*/
#no_pagebox {	margin:0 auto 30px;	padding:9% 0%; width: 88%;}

#notfoud {font-size: 28px; }
#notfont_kana {font-size: 16px;}
#no_pagebox p {margin: 15px 0 ; font-size: 12px; }


@media print, screen and (max-width:414px){
#notfoud {font-size: 7vw; }
#notfont_kana {font-size: 4vw;}
#no_pagebox p {margin: 3% 0 ; font-size: 2.8vw; }
}



}