/*========================

  settings

==========================*/

/* basic */
html,body{font-family: Verdana, "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-size:14px;}
body{background:#fff; color:#333;}
ul, li{padding:0; margin:0; list-style:none;}
p{line-height:1.7em;}
a{color:#30a2f2; font-weight:bold; transition: 0.3s linear 0s;}
a:hover{text-decoration:none;}
section{margin-bottom:40px;}


/*========================

  common

==========================*/
.indexpage{
  overflow:hidden;
}

/* SNSシェアボタン */
.sns-btns {
  margin: 0 auto;
  text-align:center;
  position: relative;
  overflow:hidden;
}
.sns-btns-wrap {
  padding-bottom:40px;
  line-height: 1;
  font-size: 0;
  text-align: center;
  position: relative;
  left: 50%;
  float: left;
}
.sns-btns-item {
  float:left;
  padding-right: 10px;
  position: relative;
  left: -50%;
  float: left;
  list-style: none;
}
.sns-btns-wrap li:not(:last-child) {
  margin-right: 0;
}
.twitter_btn{
  width:75px;
}
.arrow_box {
  position: relative;
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  text-align: center;
  font-size: 11px;
  height: 33px;
  line-height: 33px;
  display: block;
  color: #333;
  border-radius: 3px;
  font-family: "Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}
.arrow_box:after, .arrow_box:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #fff;
  border-width: 3px;
  margin-left: -3px;
}
.arrow_box:before {
  border-color: rgba(221, 221, 221, 0);
  border-top-color: #ccc;
  border-width: 4px;
  margin-left: -4px;
}

#navi{
  display:none;
}
.navbar{
  background:rgba(255,255,255,0.9);
  position: fixed;
  top:0;
  left:0;
  width:100%;
  border-radius:0;
  z-index: 999;
  box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
}

#page-top {
    position: fixed;
    bottom: 1%;
    right: 1%;
    font-size: 77%;
}
#page-top i{
  font-size:30px;
}
#page-top a {
    background:rgba(0,0,0,0.5);
    text-decoration: none;
    color: #fff;
    padding: 12px 20px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

.pc-none{
  display:none;
}
.sp-none{
  display:block;
}
.responsive_center{
  margin-left: auto;
  margin-right: auto;
}

/*========================

  header

==========================*/
.header{
  width:100vw;
  height:93vh;
  position:relative;
  background-image: url(../img/bg_dot.png), url(../img/bg_title.jpg);
  background-repeat:repeat, no-repeat;
  background-size:auto, cover;
  background-position:center;
  text-align:center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 3px 3px 3px rgba(0,0,0,0.2);
}
.header .ribon{
  position:absolute;
  top:0;
  right:30%;
}
.header .-innner .-detail{
  margin:20px auto 30px;
  width:80%;
  color:#fff;
  text-align:left;
  word-break:break-all;
}
.header .-innner .-detail .-list{
  line-height:2.2em;
}
.header .-detail .-list i{
  margin-right:0.7em;
}
.header .-innner .-detail .-list .-definition{
  display:inline-block;
  width:30%;
  font-weight:bold;
}
.header .-innner .-btn{
  display:inline-block;
  padding:1em 2em;
  background:#30a2f2;
  font-size:22px;
  color:#fff;
  vertical-align:middle;
}
.header .-innner .-btn:hover{
  background:rgba(255,255,255,0.8);
  color:#30a2f2;
}
.header .-innner .-btn i{
  margin-right:0.5em;
  font-size:40px;
  vertical-align:middle;
}


/*========================

  information

==========================*/

.info h2{
  padding:2em 0 0.5em;
  font-size:42px;
  font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
  font-weight:bold;
}
.info .-read{
  font-size:18px;
  color:#666;
}
.info .point li{
  border-right:1px solid #cccccc;
}
.info .point li:last-child{
  border-right:none;
}
.info .point h3{
  padding-bottom:1em;
  margin-bottom:1.5em;
  font-size:20px;
  font-weight:bold;
  border-bottom:4px solid #e9c863;
}
.info .point p{
  text-align:left;
  font-size:14px;
  color:#666;
}
.info .messege{
  margin:40px 0;
}
.info .txt_link{
  margin-top:1em;
  text-decoration:underline;
}

/*========================

  Profile, sample

==========================*/

/*---------
  common
-----------*/

.bg_gray{
  padding:50px 0 30px;
  background-color:#f3f3f3;
}

.bg_gray .-innner{
  background:#fff;
}
.bg_gray .-innner h2{
  margin:-15px -15px 0;
  margin-bottom:30px;
  font-family: 'Great Vibes', cursive;
  font-weight:bold;
  display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
}
.bg_gray .-innner h2:before,
.bg_gray .-innner h2:after {
    border-top: 4px solid #e9c863;
    content: "";
    display: inline; /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}
.bg_gray .-innner h2:before{
    margin-right: 0.5em;
}
.bg_gray .-innner h2:after{
    margin-left: 0.5em;
}


/*---------
  profile
-----------*/

.profile.-innner{
  padding-bottom:70px;
}
.profile .-wrap{
  padding:30px 6% 0;
}
.profile .official{
  margin-top:2em;
}
.profile .official li{
  padding:0.5em;
  font-size:18px;
  border-bottom:2px solid #ddd;
}
.profile .official li:before{
  padding-right:5px;
  content:"\f0da";
  font-family: FontAwesome;
  color:#e9c863;
}
.profile .official li:last-child{
  border-bottom:none;
}
.profile .official a{
  color:#000;
}
.profile .author p{
  padding-top:1em;
  font-size:16px;
}
.profile .author p:first-child{
  padding-top:0;
}
.profile .author .-name{
  font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
  font-size:20px;
  font-weight:bold;
}
.profile .author .-name span{
  font-size:26px;
}


/*---------
  sample
-----------*/

.sample{
  margin-top:60px;
}
.sample .-txt_box{
  margin:0 auto 40px;
  padding:20px;
  text-align:left;
  font-size:16px;
  max-width:35em;
  width:100%;
  word-wrap:break-word;
}
.sample .-txt_box .morebtn{
  text-align:center;
}
.sample .-txt_box .morebtn a{
  margin:20px 0 0;
  padding:10px 40px;
  display:inline-block;
  border:2px solid #000;
  font-weight:bold;
  color:#000;
  text-align:right;
  cursor:pointer;
}
.sample .-txt_box .morebtn a:hover{
  background:#30A2F2;
  border-color:#30A2F2;
  color:#fff;
}
.sample .readbtn{
  margin:-15px;
  background:url(../img/btn_bg.jpg);
  text-align:center;
}
.sample .readbtn a{
  padding:30px;
  display:block;
  font-size:20px;
  color:#fff;
  vertical-align:middle;
}
.sample .readbtn a:hover{
  background:rgba(0,0,0,0.2);
}
.sample .readbtn .-free{
  display:inline-block;
  padding:0.2em 1em;
  margin-right:5px;
  background:#fff;
  font-size:15px;
  color:#2b94ce;
}
.sample .readbtn .-month{
  font-size:15px;
}


/*========================

  backnumber

==========================*/
.backnumber{
  padding:60px 0;
  background:url(../img/bg_bn.jpg) no-repeat;
  background-size:cover;
  background-position:center;
}
.backnumber h2{
  font-family: 'Great Vibes', cursive;
  font-weight:bold;
  text-align: center; /* for no-flexbox browsers */
  position: relative;
}
.backnumber .bnbtn{
  margin-top:15px;
  text-align:right;
}
.backnumber .bnbtn a{
  display:inline-block;
  padding:1em 2em;
  background:#30a2f2;
  font-size:16px;
  color:#fff;
  vertical-align:middle;
  border:2px solid #30a2f2;
}
.backnumber .bnbtn a:hover{
  background:#fff;
  color:#30a2f2;
}
.backnumber .-innner{
  margin:0 auto;
  padding-top:50px;
  padding-bottom:50px;
  background-color:rgba(255,255,255,0.9);
}
.backnumber .-inbox {
  margin:0 auto;
  width:90%;
}
.backnumber .-inbox .-list{
  padding-bottom:1em;
  font-size:18px;
}
.backnumber .-inbox .-list .-date{
  padding-right:1em;
  font-weight:bold;
}

.backnumber .-inbox .-month {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center; /* for no-flexbox browsers */
  margin:40px auto 30px;
  font-size:20px;
  font-weight:bold;

}

.backnumber .-inbox .-month:before,
.backnumber .-inbox .-month:after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
}

.backnumber .-inbox .-month:before {
    margin-right: 0.5em;
}

.backnumber .-inbox .-month:after {
    margin-left: 0.5em;
}


.-btn_area{
  margin:20px auto;
  text-align:center;
}
.-btn_area .btn_month{
  padding:0.7em 3em;
  background:#fff;
  font-size:20px;
  font-weight:bold;
  color:#30a1f2;
  border:2px solid #30a1f2;
  transition: 0.5s; 
}
.-btn_area .btn_month:hover{
  background-color:#30a1f2;
  color:#fff;
  
}
.-btn_area .btn_month span{
  font-size:16px;
}


/*========================

  regist

==========================*/

.regist{
  margin:50px auto 0px;
}
.regist .container{
  background:url(../img/bg_pen.jpg) right bottom;
  background-repeat:no-repeat;
  background-size:contain;
}
.regist .-innner{
  max-width:730px;
  width:100%;
  margin-left:90px;
}
.regist .-innner .col-md-6{
  float:none;
  width:40%;
}
.regist .-title{
  display:table-cell;
  border-right:4px solid #ccc;
  vertical-align:middle;
}
.regist .-detail{
  padding-left:20px;
  display:table-cell;
  vertical-align:middle;
}
.regist .-detail .-list{
  line-height:1.8em;
}
.regist .-detail .-list i{
  margin-right:0.7em;
}
.regist .-detail .-list .-definition{
  display:inline-block;
  width:25%;
  font-weight:bold;
}
.regist .-detail .-caution{
  margin-top:0.5em;
  font-size:12px;
}
.regist .-detail .-caution span{
  text-decoration:underline;
  font-weight:bold;
}
.regist .-detail .-caution .fa-exclamation-circle{
  color:#b50000;
}
.regist .-btn{
  display:block;
  padding:0.7em 0;
  margin:30px 0 20px;
  border:2px solid #30a1f2;
  text-align:center;
  font-size:22px;
  color:#30a1f2;
}
.regist .-btn:hover{
  background:#30a1f2;
  color:#fff;
}
.regist .-btn span{
  font-size:16px;
}
.regist .-innner .col-md-12{
  float:none;
}


/*========================

  backnumber page

==========================*/
#backnumber{
  padding-bottom:20px;
  background:#f2f2f2;
}
#backnumber .header{
  margin:0 auto;
  background-image:url(../img/bg_dot.png), url(../img/bg_bn.jpg);
  background-repeat:repeat, no-repeat;
  background-size:auto, cover;
  background-position:100% 80%;
  z-index:100;
  width:auto;
  height:60vh;
  text-align:left;
  color:#000;
  box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 9px 3px -3px rgba(0,0,0,0.2);
}
#backnumber .header h1{
  margin-bottom:40px;
  transition: 0.3s linear 0s;
}
#backnumber .header h1:hover{
  opacity:0.7;
}
#backnumber .header h1 img{
  width:100%;
  max-width:778px;
}

/* year */
#backnumber .tab .year{
  margin:30px 0;
}
#backnumber .tab .year li{
  display:inline-block;
  background:#000;
  font-size:16px;
  color:#fff;
}
#backnumber .tab .year li a{
  padding:10px 30px;
  display:block;
  color:#fff;
}
#backnumber .tab .year .-active,
#backnumber .tab .year li:hover{
  background:#30a1f2;
  transition: 0.3s linear 0s;
}

/* date */
#backnumber .tab .date li{
  padding:0 1em;
  display:inline-block;
  border-right:1px solid #999;
  font-weight:bold;
}
#backnumber .tab .date li a{
  color:#fff;
}
#backnumber .tab .date li a:hover{
  color:#30a1f2;
}

/* tab */
#backnumber .yearbox{
  background:#fff;
  overflow:hidden;
  z-index:0;
/*  border-bottom:20px solid #f2f2f2;
*/}
#backnumber .-inbox{
  border:none;
}
#backnumber .-inbox:nth-child(odd){
  background-color:#e4e4e4;
  margin:-20px -500% 0;
  padding:30px 500%;
}
#backnumber .-inbox .-month{
  display:table-cell;
  vertical-align:middle;
  width:20%;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}
#backnumber .-inbox ul{
  padding:1em 0 0 3em;
  display:table-cell;
  vertical-align:middle;
  width:80%;
  border-left:2px solid #000;
}
#backnumber .-inbox{
  padding:30px 0;
  font-size:14px;
}
#backnumber .-inbox .-list{
  padding-bottom:1.3em;
}
#backnumber .-inbox .-list .-date{
  padding-right:0.5em;
  font-weight:bold;
}
#backnumber .-inbox .-list .-date:before{
  padding-right:0.5em;
  font-family: "FontAwesome";
  content:"\f02d";
}
#backnumber .-btn_area{
  margin-top:40px;
}

/* information */
#backnumber .information{
  background:#868686;
  background-repeat: no-repeat;
  background-size: cover;
  z-index:5;
  overflow:hidden;
}
#backnumber .information .info{
  margin-bottom:0px;
}

/*regist*/
#backnumber .regist{
  background:#fff;
  padding-top:30px;
}
#backnumber .regist .-btn{
  margin-bottom:40px;
}

@media screen and (max-width: 992px) {

.sp-none{
  display:none;
}
.pc-none{
  display:block;
}

.bg_gray{
  padding:50px 0 10px;
}

/*---------
  profile
-----------*/

.profile.-innner{
  padding-bottom:40px;
}
.profile .-wrap{
  padding:0 2%;
}
.profile .official{
  margin:0;
}
.profile .official li{
  padding:0.5em;
  font-size:15px;
  border-bottom:2px solid #ddd;
}
.profile .author{
  margin-top:2em;
}
.profile .author p{
  font-size:14px;
}
/*========================

  information

==========================*/

.info .point li{
  border-right:none;
}

/*========================

  regist

==========================*/

.regist{
  margin:10px auto 0;
}
.regist .container{
  background:none;
}
.regist .-innner{
  margin-left:0;
}
.regist .-innner .col-md-6{
  width:100%;
}
.regist .-title{
  display:block;
  margin-bottom:30px;
  border-right:none;
}
.regist .-btn{
  margin:40px 0;
  font-size:18px;
}
.regist .-btn:hover{
  background:#30a1f2;
  color:#fff;
}
.regist .-btn span{
  font-size:13px;
}
.regist .-detail{
  display:block;
  margin:0 auto;
  max-width:360px;
}

}
@media (max-width: 768px){
.sns-btns {
  margin: 0 -10px;
}
.sns-btns-item {
  padding-right: 4px;
}

.header .-innner{
  width:90%;
}
.header .-innner .-btn{
  width:100%;
  font-size:15px;
}
.header .-innner .-detail{
  width:100%;
  max-width:340px;
}
.header .-innner .-detail .-list{
  line-height:1.7em;
}
.header .-innner .-btn i{
  font-size:28px;
}


/*========================

  information

==========================*/

.info h2{
  font-size:24px;
}
.info .-read{
  font-size:14px;
}
.info .-read br{
  display:none;
}
.info .point li:last-child{
  border-right:none;
}
.info .point h3{
  padding-bottom:1em;
  margin-bottom:1.5em;
  font-size:20px;
  font-weight:bold;
  border-bottom:4px solid #e9c863;
}
.info .point p{
  text-align:left;
  font-size:14px;
  color:#666;
}


/*---------
  sample
-----------*/

.sample .-txt_box{
  margin:0 auto 40px;
  padding:20px;
  text-align:left;
  max-width:500px;
  width:100%;
  font-size:14px;
  word-break:break-all;
}
.sample .readbtn{
  margin:-10px 0 20px;
}
.sample .readbtn a{
  font-size:16px;
}
.sample .readbtn .-free{
  font-size:12px;
}
.sample .readbtn .-month{
  font-size:12px;
}

/*========================

  backnumber page

==========================*/

#backnumber .header{
  padding:60px 0 40px;
  background-attachment:scroll;
  height:auto;
  color:#000;
}
#backnumber .header h1{
  margin-bottom:20px;
  font-size:20px;
  font-weight:bold;
  line-height:30px;
}
#backnumber .header h1 span{
  display:block;
  font-size:15px;
}
#backnumber .header h2{
  font-size:40px;
}

/* year */
.tab .year{
  margin:30px 0;
}
.tab .year li{
  display:inline-block;
  background:#000;
  font-size:14px;
  color:#fff;
}
.tab .year li a{
  padding:10px 20px;
  display:block;
  color:#fff;
}
.tab .year .-active,
.tab .year li:hover{
  background:#57c2ae;
}


/* date */
.tab .date li{
  padding:0 1em;
  display:inline-block;
  border-right:1px solid #000;
  font-weight:bold;
}

/* tab */
#backnumber .-inbox:nth-child(odd){
  background-color:#e4e4e4;
  margin:-20px -100% 0;
  padding:10px 100%;
}
#backnumber .-inbox .-month{
  padding-top:1em;
  display:block;
  width:100%;
  font-size:18px;
}
#backnumber .-inbox ul{
  padding:2em 1em 0;
  display:block;
  width:100%;
  border-left:none;
  border-top:2px solid #000;
}
#backnumber .-inbox .-list{
  padding-bottom:0.8em;
}
#backnumber .-inbox .-list .-date{
  padding-right:0.5em;
  font-weight:bold;
}
#backnumber .-inbox .-list .-date:before{
  padding-right:0.5em;
  font-family: "FontAwesome";
  content:"\f02d";
}

#backnumber .-btn_area{
  margin:20px auto;
  text-align:center;
}
#backnumber .-btn_area .btn_month{
  padding:20px 40px;
  background:none;
  font-size:20px;
  font-weight:bold;
  color:#000;
  border:2px solid #000;
}
#backnumber .-btn_area .btn_month span{
  font-size:16px;
}
#backnumber .btn_bn{
  display:inline-block;
  margin:20px 0;
  padding:10px 30px;
  background:#000;
  color:#fff;
  text-decoration:none;
}
#backnumber .btn_bn:hover{
  background:#57c2ae;
  color:fff;
}

}
@media screen and (min-width: 992px) {
}
@media screen and (min-width: 1200px){
}
@media screen and (max-width: 480px) {
}