/********************
*********************
768px～
*********************
*********************/



*{
    line-height:1.3;
}

.wrapper{
    margin:0;

}

.fa {
    margin-right:0.5em;
}


.-base {
    width:100%;
    height:250px;
    background:#000000;
    overflow:hidden;
    position:absolute;
    z-index:-9999;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.-base:after {
    content:"";
    position:absolute;
    top:0; right:0; bottom:0; left:0;
    box-shadow:inset 0 400px rgba(0,0,0,0.4);
}

.-base img {
    width:100%;
    hegiht:auto;
    min-height:400px;
    object-fit: cover;
}


/****************　nav *******************/
/*
#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);
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.navbar-brand {
    float: left;
    padding: 10px 15px;
    font-size: 18px;
    line-height: 20px;
}

.navbar-collapse {
    max-height: 340px;
    overflow-x: visible;
    padding-right: 15px;
    padding-left: 15px;
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    -webkit-overflow-scrolling: touch;
    margin-right: -15px;
    margin-left: -15px;
}

.collapse {
    display: none;
}

.collapse.in {
    display: block;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

p.mag-caution {
    margin: 0 10px;
    padding: 3px;
    border-bottom: 3px solid #fff;
    color: #333;
    background-image: url("/img/caution.gif");
    font-weight: bold;
    text-align: center;
}
p.mag-caution span {
    margin: 0 8px;
}

@media (min-width: 768px){
.navbar-toggle {
    display: none;
}

.navbar-right {
    float: right!important;
}

.navbar-nav>li {
    float: left;
}

.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}

}

@media (max-width: 768px){
.navbar-brand {
    float: none;
    display:inline-block;

}
}*/

/****************** main **************************/

.mainwrap {
     position:relative;
}

.mainbox{
     position:relative;
     top:0;
     left: 0;
     right: 0;
     bottom: 0;
     width:95%;
     max-width:1200px;
     padding:0 2.5%;
     margin:0 auto;
}



/* title */
.title {
    width:60%;
    float:left;
}


/* header */


.header .-innner{
    color:#ffffff;

}

.header {
    margin:0;
    min-height:250px;
    position:relative;

}

.header h1 {
    margin:0;
    color: #ffffff;
    position:absolute;
    top:25%;
    line-height:1.6;
    font-size:28px;
    font-weight:bold;
}

.header ul {
    text-align:right;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content:flex-end;
    position:absolute;
    bottom:10px;
    right:0;
}


.header ul .-list1,
.header ul .-list2 {
    background: #ffffff;
    height: 96px;
    width: 96px;
    border: 1px solid #888;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align:center;
    font-weight:bold;

}

.header ul .-list1 {
    color: #e80008;
    margin:0 15px 0 0;
}

.header ul .-list2 {
    color: #333;
}

.header ul .-list1 p,
.header ul .-list2 p {
    padding-top:25px;
    font-size:24px
}


.header ul .-list2 p {
    border-bottom:1px solid #000000;
    width:80%;
    margin:0 auto 5px;
    padding-bottom:5px;

}

.header ul .-list1 span {
    font-size:12px
}

.header ul .-list2 span {
    font-size:16px
}


/* authorwrap */

.-authorwrap {
    line-height:1.5;
    margin:-65px 0 10px;
}

.-authorphoto {
    width:140px;
    height:200px;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;
    padding:0;
    border:#ffffff solid 4px;
    box-sizing:border-box;
    float:left;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.2);
    margin:0 25px 10px 0
}

.-authorwrap p {
    padding-top:75px;
    font-size:16px;
}

.-authorwrap span {
    clear:both;
    padding:5px 0 40px;
    display: block;
}

.-authorwrap ul li{
    display: inline-block;
    text-align: center;
    margin:20px 0 30px;
}

.-authorwrap ul li a{
    text-decoration: none;
    outline: none;
    color:#333333;
    font-weight:bold;
    padding:20px;
    background-color:none;
    transition:all 0.3s;
    border:#d2d2d2 solid 2px;
    box-sizing:border-box;
}

.-authorwrap ul li a:hover{
    color:#ffffff;
    background-color:#e80008;
    border:none;
    border:#e80008 solid 2px;
}


/* form */

.form-wrap {
    position:fixed;
    top:38px;
    left:63%;
    background:#FFFFFF;
    max-width:410px;
    min-width:300px;
    width:37%;
    clear:both;
    z-index: 100;
    padding: 20px 20px 0;
    box-sizing: border-box;
    border: 1px solid #aaaaaa;
}

.form-wrap .reg-mail {
  margin-bottom: 15px;
}

.form-wrap input[type="email"],
.footer-form input[type="email"]{
    height:50px;
    width:100%;
    margin:0 0 10px 0;
    line-height: 50px;
    padding-left: 10px;
}

.form-wrap .reg-mail input[type="email"] {
    border: 1px solid #000000;
}

.footer-form input[type="email"]{
  margin:10px 0 10px 0;
}


.form-wrap .reg-mail button,
.footer-form button {
    width:100%;
    background-color:#f88600;
    border:none;
    color: #fff;
    line-height: 50px;
    border-radius:5px;
    padding: 0;
    font-size:20px;
    margin:0 ;
    transition:all 0.3s;
    cursor:pointer;
}
.footer-form button {
  margin:10px 0 ;
}

.form-wrap .reg-mail button:hover,
.footer-form button:hover {
    background-color: #7cc300;
}

.form-wrap .-about {
    font-size:12px;
    line-height:1.6;
    text-align:left;
    color:#999;
}

.form-wrap .-terms {
    text-align: right;
    margin:10px 0 ;
    font-size: 14px;
}

.form-wrap .-terms a:hover {
    text-decoration:underline;
}

.form-wrap .-terms a:hover {
    text-decoration:none;
}

.form-wrap label a,
.footer-formwrap label a {
    text-decoration:underline;
    color:#333;
}

.reg-sns {
    text-align:center;
    padding:20px 0;
}

.-registsns {
    font-size:14px;
    text-align: left;
}

.reg-sns ul {
    margin:5px 0;

}

.form-wrap .reg-sns li {
    width:180px;
    color:#333;
    display:inline-block;
    font-size:16px;
    box-sizing:border-box;
    text-align:center;
    margin:5px 0 ;
    transition:all 0.3s;
}

.form-wrap .reg-sns li button {
    display: block;
    padding: 5px 10px;
    color: #333333;
    background: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.reg-sns .-facebook .fa,
.reg-sns .-yahoo .fa{
    font-size:24px;
    margin-right:5px;
}

.reg-sns .-facebook button:hover,
.reg-sns .-yahoo button:hover {
  opacity: 0.6
}

.fa-facebook-square{
    color:#2f4e98;
    font-size:18px;
}

.fa-hacker-news{
    color:#ff0033;
    font-size:18px;
}

.-regist {
    font-size:24px;
    padding-left:20px;
    margin-bottom:20px;
    font-weight:bold;
}

.-regist span {
    font-size:20px;
}


.html-back-number {
    text-align: center;
}

.html-back-number a {
    display: block;
    margin-bottom: 25px;
}

/*-------------------disabledボタン---------------------------*/

.reg-mail button[type="submit"][disabled] {
    cursor: default;
}
.reg-mail button[type="submit"][disabled]:hover {
    background-color:#f88600;
}

.reg-sns button[type="submit"][disabled] {
    cursor: default;
}
.reg-sns button[type="submit"][disabled]:hover {
    background: #fff;
}


/*---------------解除-------------------------*/


.-release {
  font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
      text-align: center;
      margin-bottom: 10px;
}

.-release:before, .-release:after {
    border-top: 1px solid #666;
    content: "";
    display: inline;
    flex-grow: 1;
    margin: 0 0.5em;
}


.-deregist-box input[type="email"]{
    height:30px;
    width:70%;
    margin: 0;
    font-size: 12px;
    float: left;
    box-sizing: border-box;
    line-height: 30px;

}

.-deregist-box label[for="email"] {
    font-size: 12px

}


.-deregist-box .-deregistMbitton {
    width:30%;
    background-color:#66bfe4;
    border:none;
    color: #fff;
    line-height: 30px;
    font-size:14px;
    margin:5px auto 10px;
    transition:all 0.3s;
    cursor:pointer;
    height:30px;
    box-sizing: border-box;
    display: block;
}

.-deregist-box .-deregistMbitton:hover {
    background-color: #0586bb;
}


.-deregist-box .reg-sns {
    padding: 10px 0;
}





/*footer form*/

.footer-formwrap {
     background-size: cover;
     background-position:center;
     background-repeat:no-repeat;
     position:relative;
     overflow:hidden;
    box-shadow:inset 0 800px rgba(0,0,0,0.4);
    background:#000000;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.footer-form{
    max-width:1200px;
    margin:0 auto;
    padding:20px 20px 40px;
    z-index:9999;
}

.footer-form p {
    font-size:26px;
    border-bottom:1px solid #fff;
    margin:0 0 20px;
    padding:20px;
    text-align:center;
    color:#ffffff;
    text-shadow: 1px 1px 3px #000;
    line-height:1.6;
}

.footer-form ul{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap:wrap;
    margin:0 auto;
    justify-content:center;


}

.footer-form ul li{
    width:300px;
    margin:10px 2.5% ;
    color:#ffffff;
}

.footer-form form div {
    text-align:center;
}

.triangle-top {
    background:#FFFFFF;
    height:20px;

}


/***************** sample ******************/

.sample-wrap {
    clear:both;
    width:90%;
    margin:0 auto;
    background:#f2f2f2;
    padding: 5% ;
}

.sample-wrap h2 {
    margin:0 auto 20px;
    text-align:center;
    font-size: 28px;
    font-weight: bold;
}

.sample {
    max-width:1200px;
    margin:0 auto;
    padding:0 ;
    text-align:left;
    position:relative;
}

.sample-txt{
    background:#ffffff;
    padding:10% ;
    text-align:left;
    word-wrap:break-word;
}

.inner-sample-txt {
    max-height: 500px;
    overflow-y: hidden;
}

.height100 {
    max-height: 100%;
}

.sample-txt p{
    max-width:35em;
    margin:0 auto;
}

.more {
    margin:-100px auto 0;
    text-align:center;
    border-radius:50%;
    height:180px;
    width:180px;
    background:#ffffff;

}


.more span{
    font-weight: bold;
    color: #333;
    cursor: pointer;
    line-height:1.5;
    display: inline-block;
    padding: 110px 0 0;
}

.more :hover {
    color: #e80008;
}


.bn-link {
    text-align:right;
    max-width:1200px;
    margin:20px auto;
    color:#1d3994;
    right:0;
    bottom:30px;
    line-height:1.3;
}

.bn-link a {
    text-decoration:underline;
    font-size:14px;
}

.bn-link a:hover {
    text-decoration:none;
}

.more .fa {
    font-size:22px;
    color:#cccccc ;
    margin:0;
}


/***************** detail *****************/

.detail-wrap{
    background:#FFFFFF;
    max-width:1200px;
    margin:0 auto;
    padding:10px 2.5% 20px;
    width: 95%;
}

.detail-wrap section {
  width: 60%;
}

.-Medalbox {
}

.-detailbox section{
    margin:0 auto;
    width:100%;
    max-width:1200px;
}


.-Medalbox .-Medal{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap:wrap;
    border-bottom:10px #f2f2f2 solid;
    padding:0 0 10px;

}

.-Medalbox .-Medal li{
    margin-left:30px;
    font-weight:bold;
}

.-detailbox {
    width:48%;
    float:left;
    padding:1%;
    text-align:left;
    word-wrap:break-word;
}

.-detailbox .-detail dt,
.-glossarybox .-glossary dt{
    float: left;
    clear:both;
    font-size:16px;
    font-weight:bold;
    padding:15px 0;
    line-height:1.6em;
}

.-detailbox .-detail dd,
.-glossarybox .-glossary dd {
    padding:16px 0.5em 16px 7em;
    font-size:14px;
    line-height:1.6em;
}

.-detailbox .-detail dd {
    border-bottom:1px dotted #cccccc;
}

.-detailbox .-detailhelp {
    text-align:end;

}

.-detail .fa-folder-open{
    color:#999;
}

.-detailbox .-detailhelp li {
    display:inline-block;
    font-size:14px;
    margin:20px 0 10px 20px;
    cursor:pointer;
    text-decoration:underline;
    color:#1d3994;
}

.-detailbox .-detailhelp li:hover {

}

/**** detail glossary ****/

.-glossaryinner {
    border-top:1px #bbbbbb solid;
    margin:20px 0;
}

.-glossarybox {
    display:none;
    clear:both;
    margin:20px auto;
    background:#f2f2f2;
    padding:40px;
    text-align:center;
    position:relative;
    line-height:1.3;
}

.box-close{
    background: #ffffff;
    border-radius: 50%;
    width:30px;
    height:30px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    text-align:center;
    font-weight:bold;
    position:absolute;
    top:10px;
    right:10px;
    cursor:pointer;
}

.box-close .fa{
    margin-right:0;
    color:#bbbbbb;
    font-size:20px;
    padding:5px;
}

.-glossarybox p {
    font-size:16px;
    font-weight:bold;
}

.sp-add {
    display:none;
}

.sp-close {
    margin-top:20px ;
    display:none;
    text-align:center;
    cursor:pointer;
}

/** formatbox **/

.-formatbox {
    clear:both;
    border:1px solid #bbbbbb;
    text-align:left;
}

.sp-format {
    display:none;
    padding-top:20px;
    text-align: center;
}

.-formatlist {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap:wrap;
    justify-content:start;

}

.-formatlist li {
    width:14.6%;
    min-width:130px;
    padding:1%;
    flex-grow:1;
    font-size:14px;

}

.-formatlist .fa-file-text-o2,
.-formatlist .fa-desktop2 {
    margin-right:0.2em;
}


.-formatlist dt {
    font-weight:bold;
    margin:1em 0;
}

.-formatlist dd {
}



/***************** breadcrumb list *****************/

.pan-wrap{
    padding:20px 0 0;
    text-align:center;
    border-top:2px solid #ccc;
    font-size:14px;
}

.pan-wrap .fa-home{
    color:#999;
}

.-pan {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
}

.-pan li{
    list-style-type: none;
    line-height:1.3
}

.-pan li:before {
    content: ">" ;
    margin-right:0.5em;
}

.-pan li:first-child:before {
    content: none ;
}


/* page top */

.sp-top{
    display:none;
    padding:20px;
    font-weight:bold;
    text-align:center;
    background:#f2f2f2;
    font-size:13px;
    margin:20px 0 0;
    cursor:pointer;
}

.pc-topbox {
    margin:0 auto;
    padding:0;
    text-align:right;
    max-width:1200px;
}

.pc-top{
    background:#f2f2f2;
    font-weight:bold;
    text-align:center;
    display:inline-block;
    font-size:13px;
    padding:10px 20px;
}

.pc-top a, .sp-top a{
    color:#333;

}

.inc_footer {
    margin-top:0!important;
}


/* sns button */

.sns-btns-wrap {
    line-height: 1;
    font-size: 0;
    text-align: center;
}

.sns-btns.side-sns {
    position: absolute;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    left: 0;
    bottom: -135px;
}
.sns-btns-wrap li:not(:last-child) {
    margin-right: 10px;
}

.sns-btns-wrap .sns-btns-item {
    display: inline-block;
}

.footer-sns {
    padding:0 ;
}

.footer-sns .sns-btns-wrap li {
    margin: 15px 10px;
}



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

media 768px

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


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

/****************** main **************************/

.mainbox {
     width:100%;
     padding:0;
     margin:0 auto;
}

.title {
    width: 95%;
    padding:0 2.5%;
}


.header h1 {
    top:20%;
}

/*****  form ******/

.form-wrap {
    position:inherit;
    width:100%;
    max-width: 100%;
    float: none;
    margin:0 auto;
    padding:20px 2.5%;
    background:#f2f2f2;
    right: inherit;
    top: inherit;
    z-index: 9999;
    left:0;
    box-sizing: border-box;
    display: none!important
}

.form-wrap.form-wrap-sp {
  display: block!important;
  padding: 0;
  position:inherit;
}

.form-wrap input[type="email"],
.footer-form input[type="email"]{
    height:50px;
}


.form-wrap .-terms{
    margin:10px 0 5px;
}

.footer-form .-terms {
    margin:20px 0;
}

.form-wrap .reg-mail {
    padding: 40px 20px 0;
    margin: 0 auto;
    background: #FFFFFF;
    box-sizing:border-box;

}

.form-wrap .reg-sns {
    background: #FFFFFF;
    text-align: center;
    border:5px solid #FFFFFF;
    box-sizing:border-box;
    width:100%;
    margin: 0 auto;
    padding:20px 10px;
}

.form-wrap .-deregist-box .reg-sns {
  padding:10px 0;
}


.-regist {
    padding-left: 10px;
    font-size: 20px;
}

.-regist span {
    font-size:14px;
}

.-deregist-box {
  background: #FFFFFF;
  padding:0 10px;
}

.-deregist-box .-deregistMbitton {
  height: 50px;
  line-height: 50px;
}

.form-wrap.form-wrap-sp .reg-mail {
  padding: 15px 10px 0;
}



/*----------------- sample ------------------------*/
.sample-wrap {
    padding: 5%;
    width:90%;

}

.sample {
    width:100%;
}

.sample-txt {
    padding:5%;
}

.sample-wrap h2 {
    font-size:22px;
    margin-top:10px;
}

.bn-link {
    text-align:center;
    position:static;
}

/***************** detail *****************/

.-Medalbox .-Medal {

}


.-Medalbox .-Medal li {
    line-height:2;
    margin-left: 1em;
}

.detail-wrap section {
  width: 100%
}


.-detailbox {
    width:90%;
    float:none;
    padding:0 5%;
    text-align:left;
}



.-detailbox .-detailhelp {
    text-align: center;
}

.-glossarybox {
    padding:40px 5% 20px;
    text-align:left;
}

.-glossarybox .-detailbox {
    padding:0 ;
    width:100%;
}

.-formatlist {
    display: inherit;
    padding:10px;
}

.-formatlist li {
    width: 100%;
    display: block;
}

.sp-close,
.sp-format{
    display:block;
}

.sp-add {
    display:inline;
}


/*****  form footer ******/

.footer-form ul li {
    width:100%;
}

/* page top */

.sp-top{
    display:block;
}

.pc-top{
    display:none;
}

/*** breadcrumb list ***/

.pan-wrap{
    border:none;
    padding:0 0 20px;
    text-align:center;
    border-top:none;
    font-size:13px;
    overflow-x: scroll;
}

.-pan {
    list-style: none;
    display: table;
}

.-pan li{
    list-style-type: none;
    line-height:1.3;
    padding: 0;
    display: table-cell;
    white-space: nowrap;
}

.-pan li:before {
    content: ">" ;
}

.-pan li:first-child:before {
    content: none ;
}


/*--------------------------------------------------------------------
sp用フォーム
--------------------------------------*/

.sp-bottomForm {
  display: block;
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 10px 10px 5px;
  box-sizing: border-box;
}

.-sp-Formbtn label{
  padding: 15px 10px;
  display: block;
  box-sizing: border-box;
  background: rgba(248, 134, 0, 0.95);
  color: #ffffff;
  cursor: pointer;
}



}




/***************************
****************************

media 480px

***************************
***************************/


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

.-base {
    height:300px;
}

.-base:after {
    box-shadow:inset 0 300px rgba(0,0,0,0.4);
}

.-base img {
   min-height: 300px;
   width: auto;
   max-height: 500px;
}



/****************** main **************************/

.header {
    min-height:300px;

}

.header h1 {
    font-size:25px;
    top:15%;
}

.header ul .-list1,
.header ul .-list2 {
    height: 80px;
    width: 80px;
}

.header ul .-list1 p,
.header ul .-list2 p {
    padding-top:20px;
    font-size:16px
}

.-authorphoto {
    width:70px;
    height:100px;
}


/* form */

.reg-sns li {
    width:100%;
}

.reg-sns li a {
    padding:10px 5px;
}

.form-wrap.form-wrap-sp .reg-sns li  {
width: 48%;
}

.form-wrap.form-wrap-sp .reg-sns li button {
padding: 10px 5px;
font-size: 12px;
}

/* authorwrap */

.-authorwrap {
    margin-bottom:10px;
}

.-authorwrap img {
    width:25%;
    height:auto;
}

.-authorwrap ul li a {
    padding: 20px ;
}


/* sample */

.sample-txt{
    min-height:50vh;
    overflow:hidden;
}


.footer-form p {
    padding:0;
}


/* detail */

.-detailbox .-detailhelp li {
    margin: 20px 5px 10px 0 ;
    font-size: 12px;
    text-align:center;
}

.-formatbox {
    text-align:center;
}

.detail-wrap{
    padding:0 0 20px;
}




}


/* =============================
SHARE-2637
===============================*/

.report-form {
    margin: 15px 0;
    text-align: center;
    border: 1px solid #f00;
    padding: 10px;
    line-height: 1.4;
    font-size: 13px;
}