@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  top.css
 style info :  TOPページ cssの定義
=================================================================== */
/*@mixin title02{
	padding: 80px 0;
    width: 100%;
    margin: 0;
	display: table;
    background-color: $accent-color2;
    @media only screen and (max-width: 690px) {
    	padding: 40px 0;
    }
}*/
/*-----------------------------------------------------------------

main

-----------------------------------------------------------------*/
#top_main {
  height: 304px;
  margin-bottom: 30px;
  border-style: solid;
  border-width: 2px;
}

@media only screen and (max-width: 979px) {
  #top_main {
    height: auto;
    margin-bottom: 40px;
    position: relative;
  }
}
@media only screen and (max-width: 979px) {
  #top_main{
    margin-top: 100px;
  }
}

#top_main li article {
  position: relative;
  height: 100%;
}

#top_main ul {
  height: 300px;
}

@media only screen and (max-width: 979px) {
  #top_main ul {
    height: auto;
  }
}

#top_main li:first-child {
  width: 60%;
  border-width: 0 2px 0 0;
  border-style: solid;
  float: left;
  height: 100%;
  overflow: hidden;
}

@media only screen and (max-width: 979px) {
  #top_main li:first-child {
    width: auto;
    border: none;
  }
}

#top_main li:nth-child(2) {
  width: 40%;
  border-width: 0 0 2px;
  border-style: solid;
  float: right;
  height: calc(100% / 2);
  overflow: hidden;
}

@media only screen and (max-width: 979px) {
  #top_main li:nth-child(2) {
    width: auto;
    border: none;
    height: auto;
  }
}

#top_main li:nth-child(3) {
  width: 40%;
  float: right;
  height: calc(100% / 2);
  overflow: hidden;
}

@media only screen and (max-width: 979px) {
  #top_main li:nth-child(3) {
    width: auto;
    border: none;
    height: auto;
  }
}

#top_main li:first-child figure {
  height: 300px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

#top_main li:nth-child(2) figure,
#top_main li:nth-child(3) figure {
  height: 150px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.a_main figure {
  height: 70px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

#top_main li:first-child a:hover figure,
#top_main li:nth-child(2) a:hover figure,
#top_main li:nth-child(3) a:hover figure {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

#top_main li::after {
  content: "";
  display: table;
  clear: both;
}

#top_main li .img img {
  width: 100%;
  height: auto;
  -webkit-transition: all .35s ease 0s;
  -o-transition: all .35s ease 0s;
  transition: all .35s ease 0s;
}

@media only screen and (max-width: 690px) {
  #top_main li .img img {
    -webkit-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
  }
  #top_main li:nth-child(2) figure,
  #top_main li:nth-child(3) figure {
    height: 300px;
  }
}

@media only screen and (min-width: 980px) {
  #top_main a:hover img {
    -webkit-transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
  }
}

#top_main li .sns_share {
  display: none;
}

#top_main li .title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px;
  z-index: 2;
  font-size: 18px;
  line-height: 1.4;
  font-weight: bold;
}

@media only screen and (max-width: 979px) {
  #top_main li .title {
    font-size: 14px;
    line-height: 1.8;
    padding: 10px;
  }
}

#top_main li:nth-child(2) .title,
#top_main li:nth-child(3) .title {
  font-size: 14px;
}

/*-----------------------------------------------------------------

rss latest article

-----------------------------------------------------------------*/
.top_title {
  position: relative;
  border-width: 3px 0 1px;
  border-style: solid;
  padding: 3px 10px;
}

.top_title h2 {
  font-weight: bold;
  font-size: 2.4rem;
}

.top_title .btn_fix {
  position: absolute;
  right: 0;
  top: 0;
}

.top_title .btn_fix a {
  display: block;
  font-size: 1.2rem;
  padding: 1px 10px 4px 10px;
}

.top_title .btn_fix a::before {
  font-family: FontAwesome;
  content: "\f0da";
  margin-right: 6px;
  font-size: 1.6rem;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-weight: normal;
  padding: 0 3px 0 4px;
  line-height: 1;
  border-radius: 1.5px;
}

article a {
  display: block;
}

.rssfeed {
  margin-bottom: 30px;
  padding: 8px 0 10px;
  border-width: 0 0 1px;
  border-style: solid;
  position: relative;
}

@media only screen and (max-width: 690px) {
  .rssfeed {
    padding: 5px;
    margin-bottom: 25px;
  }
}

.rssfeed::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  bottom: -4px;
  left: 0;
}

.rssfeed article {
  padding: 3px 0;
}

@media only screen and (max-width: 690px) {
  .rssfeed article {
    padding: 5px 0;
  }
}

.rssfeed article .img {
  display: none;
}

@media only screen and (max-width: 690px) {
  .rssfeed article .title {
    font-size: 0.9em;
  }
}

.rssfeed article .title::before {
  font-family: FontAwesome;
  content: "\f0da";
  margin-right: 7px;
  font-size: 11px;
  vertical-align: middle;
  display: inline-block;
  font-weight: normal;
  padding: 0 3px 0 4px;
  line-height: 1;
  border-radius: 1.5px;
}

.rssfeed article .share_btn {
  display: none;
}

/*-----------------------------------------------------------------

category article

-----------------------------------------------------------------*/
.a_main {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 690px) {
  .a_main {
    margin-bottom: 0;
  }
}

.a_left, .a_right {
    width: 48.5%;
    border-width: 3px 0 0 0;
    border-style: solid;
    box-sizing: border-box;
    box-shadow: 0 0 15px 0 #dedede;
    padding-top: 10px;
}

@media only screen and (max-width: 690px) {
  .a_main{flex-wrap: wrap; }
  .a_left, .a_right {
    position: relative;
    border-width: 1px;
    border-style: solid;
    width: 100%;
  }
  .a_right {margin: 20px 0; }
  .a_left::after, .a_right::after {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    bottom: -4px;
  }
}

.a_title {
    display: flex;
    position: relative;
    height: 48px;
    width: 96%;
    margin: auto;
    align-items: center;
}
@media only screen and (max-width: 690px) {
.a_title {
    justify-content: flex-start;
}
}
.a_title h2 {
    display: block;
    font-weight: bold;
    font-size: 18px;
    line-height: 48px;
    position: relative;
    margin: 0;
}
.a_title::before {
    display: inline-block;
    content: "";
    width: 36px;
    height: 36px;
    margin-right: 10px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.a_title.feature::before {background-image: url("../image/icon_feature.png"); }
.a_title.fulmn::before {background-image: url("../image/icon_fullmoon.png"); }
.a_title.nmn::before {background-image: url("../image/icon_newmoon.png"); }
.a_title.telstar::before {background-image: url("../image/icon_telstar.png"); }
.a_title.space::before {background-image: url("../image/icon_space.png"); }
.a_title.spin::before {background-image: url("../image/icon_spin.png"); }
.a_title.event::before {background-image: url("../image/icon_event.png"); }
.a_title.other::before {background-image: url("../image/icon_other.png"); }
.a_title.sp_space::before {background-image: url("../image/sp_space.png"); }
.a_title.others::before {background-image: url("../image/etc.png"); }



/*-----------------------------------------------------------------
下記上記に追加してます。
.a_title.sp_space::before {background-image: url("../image/sp_space.png"); }
.a_title.others::before {background-image: url("../image/etc.png"); }
-----------------------------------------------------------------*/

.a_title.maf::before {
  background-image: url("../image/common/icon_maf.png");
}

.a_title.cma::before {
  background-image: url("../image/common/icon_cma.png");
}

.a_title.des::before {
  background-image: url("../image/common/icon_des.png");
}

.a_title.mar::before {
  background-image: url("../image/common/icon_mar.png");
}

.a_title.adv::before {
  background-image: url("../image/common/icon_adv.png");
}

.a_title.soc::before {
  background-image: url("../image/common/icon_soc.png");
}

.a_title.clm::before {
  background-image: url("../image/common/icon_clm.png");
}

.a_title.smn::before {
  background-image: url("../image/common/icon_smn.png");
}

.a_title.fre::before {
  background-image: url("../image/common/icon_fre.png");
}

.btn_more {margin-left: auto; }

@media only screen and (max-width: 690px) {
  .btn_more {
    line-height: 1.2;
    width: 50%;
    text-align: center;
    margin: 10px auto 15px;
    display: block;
  }
}

.btn_more a {
  font-size: 13px;
}

.btn_more a::before {
  font-family: FontAwesome;
  content: "\f0da";
  margin-right: 6px;
  font-size: 1.6rem;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
  font-weight: normal;
}

@media only screen and (max-width: 690px) {
  .btn_more a::before {
    display: none;
  }
}

@media only screen and (max-width: 690px) {
  .btn_more a {
    display: block;
    border-width: 1px;
    border-style: solid;
    padding: 10px;
    border-radius: 3px;
  }
}

.btn_more.sp_on {
  display: none;
}

@media only screen and (max-width: 690px) {
  .btn_more.sp_non {
    display: none;
  }
  .btn_more.sp_on {
    display: block;
  }
}

.a_area article {
  margin-top: -1px;
  padding: 10px;
  border-width: 1px 0 0;
  border-style: solid;
  position: relative;
}

.a_area article .title {
  float: left;
  padding-bottom: 30px;
  width: calc(100% - 130px);
  font-size: 1.3rem;
  line-height: 1.6;
}

@media only screen and (max-width: 690px) {
  .a_area article .title {
    padding-bottom: 0;
  }
}

.a_area article .img {
  float: right;
  width: 120px;
  font-size: 0;
  overflow: hidden;
  position: relative;
}

.a_area article .img img {
  width: 100%;
  height: auto;
  -webkit-transition: all .2s ease 0s;
  -o-transition: all .2s ease 0s;
  transition: all .2s ease 0s;
}

.a_area article a::after {
  content: "";
  display: table;
  clear: both;
}

.a_area article a:hover .title {
  text-decoration: underline;
}

.a_area article a:hover img {
  -webkit-transform: scale(1.5, 1.5);
  -ms-transform: scale(1.5, 1.5);
  transform: scale(1.5, 1.5);
}

.a_area article a:hover .img::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

.sns_share {
  position: absolute;
  left: 10px;
  bottom: 10px;
  margin-top: 10px;
  font-size: 0;
}

@media only screen and (max-width: 690px) {
  .sns_share {
    display: none;
  }
}

.sns_share .share_btn {
  display: inline-block;
  margin-right: 5px;
}

#top #contents_right .sidearea.tag{
  display: none;
}