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

body{
 font: normal normal 16px/1.72 'Noto Sans JP', 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック', 'sans-serif';
 position: relative;
}

a{
 color: #000;
 text-decoration: none;
 -webkit-transition : all 0.5s;	
 -moz-transition : all 0.5s;	
 transition : all 0.5s;	
}

@media screen and (min-width: 769px) {
  a:hover{
   color: #0068e8; 
  }
}

a img{
 -webkit-transition : all 0.5s;	
 -moz-transition : all 0.5s;	
 transition : all 0.5s;	
}

@media screen and (min-width: 769px) {
  a img:hover{
    opacity: 0.7;
  }
}
 
p,ul,li,dl,dt,dd{
 margin: 0px;
 padding: 0px;
}
 
ul,li{
 list-style: none;
}

@media screen and (min-width: 769px) {
  .pc_none{display: none;}
}

/*マージン*/
.mr2{ margin-right: 2.0em} 
 
.mb2{ margin-bottom: 2.0em!important} 

/*見出し*/
h4{
  font-size: 130%;
}

.mi01 {
  margin: 0 0 10px;
  padding: 10px 0 10px 2.0em;
  font-size: 130%;
  line-height: 1.4;
  font-weight: bold;
  position: relative;
  display: inline-block;
}

.mi01:before{
  content: "■";
  position: absolute;
  width:4px;
  height: 4px;
  font-size: 140%; 
  left:0;
  top:-3px;
}

.mi01.vol40_1:before{
  color: #e60026;
}

.mi01.vol40_2:before{
  color: #0185cf;
}

.mi01.other:before{
  color: #f9f600;
}

.mi01:after{
  content: "□";
  position: absolute;
  width:4px;
  height: 4px;
  font-size: 140%; 
  left: 6px;
  top: 4px;
}

/*テキスト*/
.tac {
  text-align: center;
}

/*ボタン*/
.bt01 a{
  margin-bottom: 10px;
  padding: 10px 20px;
  font-weight: bold;
  color: #FFF;
  background-color: #e60026;
}

@media screen and (min-width: 769px) {
  .bt01 a:hover{
    background-color: #f34b67;
  }
}

.bt02{
  margin: 0 auto;
  width: 90%;
  font-size: 110%;
  text-align: center;
}

.bt02 a{
  margin-bottom: 10px;
  padding: 16px 20px;
  font-weight: bold;
  color: #FFF;
  background-color: #e60026;
  display: block;
}

.bt02 .small{
  font-size: 50%;
  vertical-align: middle;
}

@media screen and (min-width: 769px) {
  .bt02 a:hover{
    background-color: #f34b67;
  }
}

/*ボックス*/
.inner{
 margin: 0px auto;
 width: 92%;
 max-width: 1000px;
 position: relative;
}

/*ボーダー*/
.border{
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 2px solid #FFF;
}  
  
/*フェードイン*/ 
.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
}


/*フレックス*/ 
.flex_sb{
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between;
 -webkit-align-items: stretch;
 align-items: stretch;
}
 
.flex_left{
 display: -webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: left;
 justify-content: left;
 -webkit-align-items: stretch;
 align-items: stretch;
}

/*メインコンテンツ*/
main{
  padding: 80px 0 100px;
  color: #FFF;
  background-image: url("../images/bg_01.png");
  background-color: #000;
  background-position: center center;
  background-repeat: repeat;
  background-size: auto auto;
  background-attachment: fixed;
  display: block;
}

main p{
text-shadow:1px 1px 5px rgba(0,0,0,0.3);
}

/*ヘッダー*/ 
header{
  padding: 20px 0;
  width: 100%;
  height: 80px;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  box-sizing: border-box;
} 
 
header .inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
 
header .logo{
  margin: 0;
  width: 32%;
  max-width: 380px;
  line-height: 1.0;
}

header .logo img{
  width: 100%;
}

@media screen and (min-width: 769px) {
  header #nav_bt{
    display: none;
  }
}

header .navBlock{
  width: 66%;
  display: flex;
  justify-content: flex-end;
}

header .gNav{
 padding: 0;
 width: 100%;
 color: #fff;
 display: flex;
 align-items: center;
}

header .gNav ul{
 display: flex;
 justify-content: space-between;
 align-items: center;
}

header .gNav a{
 color: #fff;
}

@media screen and (min-width: 769px) {
  header .gNav a:hover{
    color: #0068e8;
  }
}

header .gNav .menu{
  width: 100%;
  font-size: 87.5%;
  font-weight: 900;
  justify-content: flex-end;
}

header .gNav .menu li{
  margin-left: 4%;
}

header .gNav .sns_nav ul{
  justify-content: flex-end;
  align-items: center;
}

header .gNav .sns_nav li{
  margin-bottom: 2px;
  margin-left: 2%;
}

header .gNav .sns_nav li:first-child{
  margin-bottom: 0;
  margin-left: 4%;
}

header .gNav .sns_nav .twi_bt{
  width: 30px;
}

header .gNav .sns_nav .twi_bt img{
  vertical-align: middle;
}

header .gNav .sns_nav .tweet_bt{
  width: 85px;
}

header .gNav .sns_nav .tweet_bt img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

header .gNav .sns_nav .line_bt{
  width: 90px;
}

header .gNav .sns_nav .line_bt img{
  width: 100%;
  height: auto;
  vertical-align: bottom;
}


/*フッター*/ 
footer {
  color: #FFF;
}
 
footer a{
  color: #FFF;
}
 
footer .upperCont{
  padding: 50px 0 30px;
  background-color: #1e1e1e;
}

footer .logoList{
  margin-bottom: 40px;
  display: flex;
  justify-content: center;
}

footer .logoList .logo{
  margin: 0 20px;
}

footer .logoList .logo img{
  height: 40px;
}

footer .footerContact{
  margin-bottom: 40px;
  text-align: center;
}

footer .footerContact .link{
  padding: 3px 5.5% 5px;
  font-size: 87.5%;
  line-height: 1.0;
  vertical-align: middle;
  border: 1px solid #FFF;
  border-radius: 15px;
}

@media screen and (min-width: 769px) {
  footer .footerContact .link:hover{
    color: #1e1e1e;
    background-color: #fff;
  }
}

footer .footerNote{
  padding-bottom: 40px;
  font-size: 68.75%;
  text-align: center;
}

footer .privacyPolicy{
  font-size: 87.5%;
  text-align: center;
}

footer .lowerCont{
  padding: 10px 0;
  background-color: #323232;
}
 
footer .copy{
  font-size: 75%;
  text-align: center;
}
 

@media screen and (max-width: 1001px) {
  main img{
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
}

@media screen and (max-width: 870px) {
  header{
    padding: 10px 0;
    height: 60px;
  }
  
  header .logo{
    width: 80%;
    font-size: 100%;
  }

  header #nav_bt {
    display: block;
  }

  header .menu-trigger,
  header .menu-trigger span{
    display: inline-block;
    transition: all .3s;
    box-sizing: border-box;
  }
  
  header .menu-trigger{
   position: fixed;
   width: 28px;
   height: 18px;
   top: 20px;
   right: 2%;
   z-index: 10002;
  }
  
  header .menu-trigger span{
    position: absolute;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #FFF;
  }
  
  header .menu-trigger span:nth-of-type(1){
    top: 0;
  }
  
  header .menu-trigger span:nth-of-type(2){
    top: 8px;
  }
  
  header .menu-trigger span:nth-of-type(3){
    bottom: 0;
  }

  header .menu-trigger.active span{
    background-color: #0068e8;
  }
  
  header .menu-trigger.active span:nth-of-type(1){
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  
  header .menu-trigger.active span:nth-of-type(2){
    opacity: 0;
  }
  
  header .menu-trigger.active span:nth-of-type(3){
    -webkit-transform: translateY(-7px) rotate(45deg);
    transform: translateY(-7px) rotate(45deg);
  }	
  
  header .gNav{
    width: 100%;
    height: 100%;
    background-color: rgba( 0, 0, 0, 0.8 );
    display: block;
    transition: all 0.8s ease;
    position: fixed;
    top: 60px;
    left: -100%;
    right: 0;
  }
  
  header .gNav.active{
    left: 0;
  }
  
  header .gNav .menu{
    width: 100%;
    font-size: 115%;
    text-align: center;
    display: block;
  }
  
  header .gNav .menu li{
    margin-left: 0;
    padding: 10px 4%;
  }
  
  header .gNav .sns_nav{
    margin: 0 auto;
    padding: 20px 0;
    width: 100%;
  }
  
  header .gNav .sns_nav ul{
    text-align: center;
    display: block;
  }
  
  header .gNav .sns_nav ul li{
    margin: 0 auto 10px;
  }
  
  header .gNav .sns_nav li:first-child {
    margin: 0 auto 10px;
  }
  
  header .gNav .sns_nav li:first-child {
    margin: 0 auto 10px;
  }
  
  header .gNav .sns_nav .tweet_bt{
    width: 75px;
  }
  
  header .gNav .sns_nav .line_bt {
    width: 80px;
  }
  
}

@media screen and (max-width: 768px) {
  body{
   font-size: 14px;
  }
  
  .sp_none{display: none;}
  
  /*見出し*/
  h4{
    font-size: 120%;
  }
  
  .mi01 {
    padding: 10px 0 10px 2.0em;
    font-size: 120%;
  }
  
  .border{
    margin-bottom: 15px;
    padding-bottom: 15px;
  }  
  

  /*メインコンテンツ*/
  main{
    padding: 60px 0 30px;
  }  
  
  footer .logoList{
    margin-bottom: 40px;
    display: block;
  }
  
  footer .logoList .logo{
    margin: 0 auto 20px;
    width: 30%;
    text-align: center;
  }

  footer .logoList .logo img{
    width: 100%;
    height: auto;
  }
  
  footer .footerContact {
    margin-bottom: 30px;
  }
  
  footer .footerNote {
    padding-bottom: 20px;
  }
  
  footer .privacyPolicy {
    text-decoration: underline;
  }
  
}

@media screen and (max-width: 480px) {
  footer .logoList{
    margin-bottom: 20px;
  }
  
  footer .logoList .logo{
    margin: 0 auto 10px;
    width: 40%;
  }
}