@charset "utf-8";

#wrapper{
    min-width: 1124px;
    background: #888;
}
#wrapper.sub > header .upper{
    background: url(../img/h_logo_bg.png) no-repeat center center;
}

input,select{
    -webkit-appearance: none;
}

#wrapper.sub > header .back_label{
    height: 70px;
    line-height: 70px;
    padding-left: 20px;
    position: absolute;
    top: -70px;
    transition: all 0.4s;
}

#wrapper.sub > header.show_label_anc .back_label{
    top: 0;
}

#wrapper.sub > header.show_label_anc .back_label:hover{
    opacity: 0.7;
}

#wrapper.sub > header hgroup{
    height: 70px;
    position: relative;
    top: 0;
    transition: all 0.4s;
}

#wrapper.sub > header.show_label_anc hgroup{
    top: 70px;
}

#wrapper.sub > header h1{
    padding-top: 13px;
    padding-left: 20px;
    float: left;
}

#wrapper.sub > header h2{
    font-size: 10px;
    line-height: 18px;
    padding-top: 28px;
    padding-left: 12px;
    font-family: 'Lato', sans-serif;
    color: #FFF;
    float: left;
    letter-spacing: 0.2em;
}

#wrapper.sub > header hgroup+a{
    display: block;
    width: 22px;
    height: 18px;
    position: absolute;
    top: 27px;
    right: 0;
    text-indent: -9999px;
}

#wrapper.sub > header hgroup+a:before,
#wrapper.sub > header hgroup+a:after,
#wrapper.sub > header hgroup+a span{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: #ea7cab;
}

#wrapper.sub > header hgroup+a:before{
    top: 0;
}

#wrapper.sub > header hgroup+a:after{
    top: 7px;
}

#wrapper.sub > header hgroup+a span{
    top: 14px;
}

#wrapper.sub > section.subpage > header{
    height: 120px;
    background: url(../img/s_header_bg.jpg) repeat 0 0;
}

#wrapper.sub > section.subpage > header .title > p{
    float: left;
    margin-left: 20px;
    margin-top: 33px;
}

#wrapper.sub > section.subpage > header .title a{
    display: block;
    transition: all 0.2s;
}

#wrapper.sub > section.subpage > header .title a:hover{
    opacity: 0.5;
}

#wrapper.sub > section.subpage > header .title h2{
    float: left;
    margin-left: 48px;
    margin-top: 40px;
}

#wrapper.sub > section.subpage > header .search_box{
    position: absolute;
    top: 40px;
    right: 20px;
}
#wrapper.sub > section.subpage > header .title aside.social{
    position: absolute;
    top: 40px;
    right: 0;
    z-index: 2;
}

#wrapper.sub > section.subpage > header .title aside.social li{
    float: left;
    margin-right: 20px;
}
#wrapper.sub > section.subpage > header .title aside.social li img{
    opacity: 0;
    transition: opacity 200ms ease;
}
#wrapper.sub > section.subpage > header .title aside.social li a{
    display: block;
    width: 40px;
    height: 40px;
}
#wrapper.sub > section.subpage > header .title aside.social li a:hover{
    opacity: 1;
}
#wrapper.sub > section.subpage > header .title aside.social li a:hover img{
    opacity: 1;
}
#wrapper.sub > section.subpage > header .title aside.social li.tw a{
    background: url(../img/f_tw_bg.png) no-repeat 0 0;
    background-size: 40px 40px;
}
#wrapper.sub > section.subpage > header .title aside.social li.fb a{
    background: url(../img/f_fb_bg.png) no-repeat 0 0;
    background-size: 40px 40px;
}

/* TOP
======================================== */

#top_loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: #a9e9ea;

/*     display: none !important; */
}

#top_loading p{
    width: 385px;
    height: 53px;
    position: absolute;
    left: 50%;
    margin-left: -194.5px;
    top: 50%;
    margin-top: -53px;
}

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 2000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: transparent;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transition: width 1s ease-in-out 1s linear;
  -moz-transition: width 1s ease-in-out 1s linear;
  -ms-transition: width 1s ease-in-out 1s linear;
  -o-transition: width 1s ease-in-out 1s linear;
  transition: width 1s ease-in-out 1s linear;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 100%;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  background: #FFF;
}

#top_nav .upper{
    height: 60px;
    min-width: 1124px;
    background: url(../img/1607/top_header_bg.png) no-repeat center center #1d2961;
    background-size: contain;
    box-shadow: 0 0 2px rgba(112, 112, 133, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
}

#top_nav .upper h1{
    padding-top: 12px;
    float: left;
    margin-right: 80px;
}

#top_nav .upper nav,
#top_nav .upper nav li{
    float: left;
}

#top_nav .upper nav li{
    padding-top: 25px;
    color: #FFF;
}

#top_nav .upper nav li a{
    display: block;
    padding: 0px 22px 20px;
    font-size: 15px;
    height: 15px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}

#top_nav .upper nav li a:after{
    content: "";
    display: block;
    height: 0;
    width: 0;
    border: 4px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px solid #aceaeb;
    position: absolute;
    left: 50%;
    margin-left: -4px;
    bottom: -16px;
    transition: bottom 200ms ease;
}

#top_nav .upper nav li a.current:after,
#top_nav .upper nav li a:hover:after{
    bottom: 0;
}

#top_nav .upper .open_nav{
    top: 22px;
}

#wrapper.top #glob_nav > a.button{
    top: 11px;
}

#top_main{
    position: relative;
    z-index: 2;
}

#top_main .upper{
    position: absolute;
    top: 60px;
    bottom: 320px;
    min-height: 250px;
    left: 0; right: 0;
    background: #a9e9ea;
}

#top_main .upper .bg{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

#top_main .upper .bg._1{
    background: url(../img/1607/top_main_1.png) no-repeat center top;
    background-size: 100% auto;
}

#top_main .upper .bg._2{
    background: url(../img/1607/top_main_2.png) repeat-x center bottom;
    background-size: auto 80%;
}

#top_main .upper .bg._3{
    background: url(../img/1607/top_main_3.png) no-repeat center bottom;
    background-size: auto 80%;
}

#top_main .upper h2{
    position: absolute;
    left: 50%;
    margin-left: 82px;
    top: 28px;
    z-index: 2;
    padding: 0 12px 10px;
    border-bottom: 1px solid #1d2961;
}

#top_main aside.qa{
    position: absolute;
    width: 355px;
    top: 20px;
    right: 50%;
    margin-right: 230px;
    z-index: 2;
    padding-left: 35px;
}

#top_main aside.qa header{
    overflow: hidden;
    position: relative;
    margin-bottom: 13px;
}
#top_main aside.qa header h3 {
    height: 27px;
    color: #1d2961;
    font-size: 32px;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: italic;
    line-height: 27px;
}
#top_main aside.qa header h3 .month {
    padding-right: 32px;
    background: url(../img/1705/top_qa_title_month.png) no-repeat right bottom;
    background-size: auto 27px;
    display: inline-block;
    vertical-align: bottom;
}
#top_main aside.qa header h3 .day {
    padding-left: 10px;
    padding-right: 245px;
    background: url(../img/1705/top_qa_title.png) no-repeat right bottom;
    background-size: auto 27px;
    display: inline-block;
    vertical-align: bottom;
}
#top_main aside.qa header a{
    display: block;
    position: absolute;
    right: 0;
    top: 3px;
    height: 25px;
    line-height: 25px;
    padding-right: 12px;
    color: #1f2c67;
    font-size: 13px;
    font-weight: bold;
    background: url(../img/1607/top_qa_arr.png) no-repeat right center;
    background-size: contain;
}

#top_main aside.qa header a:hover{
    opacity: 0.6;
}

#top_main aside .body > div{
    padding: 20px;
    border-radius: 5px;
    background: rgba(247,247,246,0.95);
    margin-right: 7px;
    position: relative;
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;
}

#top_main aside .body > div.a{
    margin-top: 4px;
}

#top_main aside .body > div:before{
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    background: url(../img/1607/top_qa_q.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 0;
    left: -35px;
}

#top_main aside .body > div.a:before{
    background-image: url(../img/1607/top_qa_a.png);
}

#top_main aside.qa .q h4{
    margin-bottom: 12px;
}

#top_main aside.qa .q p{
    font-size: 11px;
    line-height: 11px;
    font-weight: normal;
}

#top_main aside.qa .a{
    padding: 0;
    height: 30px;
}

#top_main aside.qa .a .a_open{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background: #ffbe3d;
    color: #FFF;
    text-align: center;
    cursor: pointer;
}

#top_main aside.qa .a .a_open:hover{
    opacity: 0.6;
}
#top_main aside.qa .more{
    margin-top: 20px;
}
#top_main aside.qa .more > a{
    padding-left: 12px;
    color: #1d2961;
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    background: url(../img/btn_el.png) no-repeat left center;
    background-size: auto 9px;
}

#a_content {
    font-size: 13px;
    line-height: 19px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 187, 52, 0.93);
    z-index: 100;
    display: none;
}
#a_content.modal{
    padding: 70px 20px;
}
#a_content .a_content_inner{
    max-width: 680px;
    margin: 0 auto;
    position: relative;
}
#a_content.modal h4 {
    margin-bottom: 20px;
}
#a_content.modal .close {
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    background: url(../img/1705/top_qa_close.png) no-repeat left center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 0;
}
#a_content.modal .a_upper {
    padding: 35px 25px;
    border-radius: 5px;
    background-color: #f7f7f6;
}
#a_content.modal .a_content_body p {
    margin-bottom: 1em;
    font-size: 14px;
    line-height: 23px;
    font-weight: bold;
}
#a_content.modal .footer p.name {
    height: 93px;
    background-image: url(../img/1705/top_qa_author.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    text-indent: -9999px;
    overflow: hidden;
}
#a_content.modal .share {
    margin: 30px 0;
    text-align: center;
}
#a_content.modal .share li {
    padding: 0 10px;
    display: inline-block;
}
#a_content.modal .all{
    position: relative;
}
#a_content.modal .all a{
    height: 85px;
    color: #ff7e00;
    font-size: 19px;
    font-weight: bold;
    text-align: center;
    line-height: 85px;
    background-color: #fff;
    border-radius: 5px;
    display: block;
}
#a_content.modal .all:after {
    content: "";
    width: 9px;
    height: 85px;
    background: url(../img/1705/top_qa_arr_2.png) no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 0;
    right: 25px;
}

#top_main aside.qa .a .a_content_body p{
    margin-bottom: 1em;
}

#top_main aside.qa .a .a_content_body p img,
#top_main aside.qa .a .a_content_body p iframe{
    max-width: 100%;
    height: auto !important;
    padding: 0.5em 0;
}

#top_main aside.qa .a .footer{
    padding-top: 20px;
    padding-bottom: 30px;
    position: relative;
}

#top_main aside.qa .a .footer:after{
    content: "";
    display: block;
    clear: both;
}

#top_main aside.qa .a .footer p.name{
    float: left;
    width: 137px;
    height: 62px;
    background: url(../img/1607/top_qa_author.png) no-repeat center center;
    background-size: contain;
    text-indent: -9999px;
    overflow: hidden;
}

#top_main aside.qa .a .footer .all{
    float: right;
    padding-top: 23px;
}

#top_main aside.qa .a .footer .close{
    position: absolute;
    bottom: -20px;
    left: -20px;
    right: -20px;
    height: 40px;
    background: url(../img/1607/top_qa_close.png) no-repeat center center #fec451;
    background-size: 38px 23px;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

#top_main aside.qa .a .footer .close:hover{
    opacity: 0.6;
}

#top_main aside.qa .a .footer a:hover{
    opacity: 0.6;
}

#top_main .credit{
    font-family: 'Lato', sans-serif;
    position: absolute;
    bottom: 20px;
    font-size: 10px;
    color: #2a357d;
    left: 50%;
    margin-left: 358px;
    z-index: 2;
}

#top_main aside.social{
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: 468px;
    z-index: 2;
}

#top_main aside.social li{
    float: left;
    margin-right: 8px;
}

#top_main aside.social li img{
    opacity: 0;
    transition: opacity 200ms ease;
}

#top_main aside.social li a{
    display: block;
    width: 30px;
    height: 30px;
}

#top_main aside.social li a:hover img{
    opacity: 1;
}

#top_main aside.social li.tw a{
    background: url(../img/t_tw_bg.png) no-repeat 0 0;
    background-size: 30px 30px;
}

#top_main aside.social li.fb a{
    background: url(../img/t_fb_bg.png) no-repeat 0 0;
    background-size: 30px 30px;
}

#top_main .lower{
    position: absolute;
    height: 320px;
    left: 0;
    bottom: 0;
    right: 0;
    background: #1f2c67;
    color: #FFF;
}

#top_main .lower:before{
    content: "";
    display: block;
    position: absolute;
    height: 7px;
    top: -7px;
    left: 0;
    right: 0;
    background: url(../img/1607/top_base_line.png) repeat-x center center;
    background-size: auto 7px;
}

#top_main .lower .content{
    width: 1120px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding-top: 30px;
}

#top_main .lower aside{
    width: 340px;
    margin-left: 80px;
    float: left;
}

#top_main .lower aside:first-child{
    margin-left: 0;
}

#top_main .lower aside.note,
#top_main .lower aside.recent{
    height: 250px;
    position: relative;
}
#top_main .lower aside.recent{
    width: 260px;
}

#top_main .lower aside.note h3{
    margin-bottom: 25px;
}

#top_main .lower aside.note li{
    margin-bottom: 17px;
}
#top_main .lower aside.note li:first-child{
    margin-bottom: 25px;
}
#top_main .lower aside.note li a{
    display: block;
    position: relative;
    padding-left: 26px;
    overflow: hidden;
    font-size: 12px;
}

#top_main .lower aside.note li a:hover p+p{
    text-decoration: underline !important;
}

#top_main .lower aside.note li a:before{
    content: "";
    display: block;
    width: 14px;
    height: 1px;
    position: absolute;
    left: 4px;
    top: 4px;
    background: #30ce9f;
}

#top_main .lower aside.note li p:first-child{
    font-size: 12px;
    color: #32e4a7;
}
#top_main .lower aside.note li:first-child p:first-child{
    font-size: 13px;
}

#top_main .lower aside.note li p+p{
    width: 317px;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#top_main .lower aside.note li:first-child p+p{
    font-size: 15px;
}

#top_main .lower aside.note > a,
#top_main .lower aside.recent > a{
    display: block;
    padding-left: 18px;
    height: 14px;
    line-height: 14px;
    position: absolute;
    border-left: 6px solid #30ce9f;
    left: 0;
    bottom: 0;
    font-size: 11px;
    font-weight: bold;
}

#top_main .lower aside.note > a:hover,
#top_main .lower aside.recent > a:hover{
    text-decoration: underline;
}

#top_main .lower aside.note:after,
#top_main .lower aside.recent:after{
    content: "";
    display: block;
    position: absolute;
    height: 3px;
    width: 50px;
    right: 0;
    bottom: 0;
    background: #17214f;
}


#top_main .lower aside.recent h3{
    margin-bottom: 30px;
}

#top_main .lower aside.recent .cs{
    width: 100%;
    text-align: center;
    height: 170px;
    background: #151e47;
    border-radius: 6px;
    line-height: 170px;
}

#top_main .lower aside.recent ul{
    overflow: hidden;
    background: url(../img/1705/top_recent_bg.png) no-repeat right 3px;
    background-size: auto 37px;
}

#top_main .lower aside.recent ul li{
    float: left;
    background: #FFF;
    border-radius: 6px;
    margin-left: 20px;
    margin-top: 60px;
    width: 90px;
    height: 90px;
    overflow: hidden;
}

#top_main .lower aside.recent ul li a{
    display: block;
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

#top_main .lower aside.recent ul li a:hover{
    opacity: 0.8;
}

#top_main .lower aside.recent ul li:first-child,
#top_main .lower aside.recent ul li:first-child a{
    width: 150px;
    height: 150px;
    margin-left: 0;
    margin-top: 0;
}

#top_main .lower aside.uranai h3{
    margin-bottom: 6px;
}

#top_main .lower aside.uranai .bg{
    font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro";
    font-weight: bold;
    width: 340px;
    position: relative;
/*     background: url(../img/1607/top_uranai_bg.png) no-repeat center center; */
    background-size: contain;
}

#top_main .lower aside.uranai .image{
    height: 131px;
    margin-bottom: -16px;
    background: url(../img/1607/top_uranai_bg_upper.png) no-repeat center top;
    background-size: contain;
    position: relative;
    overflow: hidden;
}

#top_main .lower aside.uranai .image:before,
#top_main .lower aside.uranai .image:after,
#top_main .lower aside.uranai .image .p1,
#top_main .lower aside.uranai .image .p1:before,
#top_main .lower aside.uranai .image .p1:after,
#top_main .lower aside.uranai .image .p2{
    content: "";
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 131px;
}

#top_main .lower aside.uranai .image:before{
    background-image: url(../img/1607/top_uranai_bg_p1.png);
}
#top_main .lower aside.uranai .image:after{
    background-image: url(../img/1607/top_uranai_bg_p5.png);
}
#top_main .lower aside.uranai .image .p1{
    transform: translateY(131px);
    transition: all 1000ms ease-out;
    background-image: url(../img/1607/top_uranai_bg_p2.png);
}
#top_main .lower aside.uranai .image .p1:before,
#top_main .lower aside.uranai .image .p1:after{
    transition-delay: 900ms;
}
#top_main .lower aside.uranai .image .p1:before{
    opacity: 0;
    background-image: url(../img/1607/top_uranai_bg_p3.png);
}
#top_main .lower aside.uranai .image .p1:after{
    background-image: url(../img/1607/top_uranai_bg_p4.png);
}
#top_main .lower aside.uranai .image .p2{
    transform: translateY(-10px);
    opacity: 0;
    transition: all 400ms ease;
    transition-delay: 800ms;
    background-image: url(../img/1607/top_uranai_bg_p6.png);
}

#top_main .lower aside.uranai .image.show .p1:before,
#top_main .lower aside.uranai .image.show .p1,
#top_main .lower aside.uranai .image.show .p2{
    transform: translateY(0);
    opacity: 1;
}

#top_main .lower aside.uranai .image.show .p1:after{
    opacity: 0;
}

#top_main .lower aside.uranai .q{
    position: relative;
    z-index: 2;
    height: 89px;
    background: url(../img/1607/top_uranai_bg_lower.png) no-repeat center bottom;
    background-size: contain;
}

#top_main .lower aside.uranai.disable .bg{
    background-image: url(../img/1607/top_uranai_bg2.png);
    background-repeat: no-repeat;
    height: 204px;
}

#top_main .lower aside.uranai.disable .bg *{
    display: none;
}

#top_main .lower aside.uranai p{
    height: 30px;
    line-height: 31px;
    text-align: center;
    font-size: 13px;
    margin: 0 15px;
    border-radius: 4px;
    background: #53ca83;
}

#top_main .lower aside.uranai ul{
    text-align: center;
    padding-top: 20px;
}

#top_main .lower aside.uranai li{
    display: inline-block;
    color: #1f2c67;
    font-size: 14px;
    margin: 0 5px;
}

#top_main .lower aside.uranai li a{
    display: inline-block;
}

#top_main .lower aside.uranai li a:hover{
    text-decoration: underline;
}

#wrapper.top > section.about{
    position: relative;
    z-index: 1;
    height: 629px;
    background: url(../img/t_about_bg.jpg) no-repeat center bottom;
    background-size: cover;
}

#top_main .lower aside.uranai li:before{
    content: "[ ";
    color: #53ca83;
}

#top_main .lower aside.uranai li:after{
    content: " ]";
    color: #53ca83;
}

#wrapper.top > section.about h2{
    width: 560px;
    height: 280px;
    padding-top: 110px;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -500px;
    -webkit-perspective: 2200;
    perspective: 2200;
    -webkit-perspective-origin: center top;
    perspective-origin: center top;
}

#wrapper.top > section.about h2:before,
#wrapper.top > section.about h2:after{
    content: "";
    display: block;
    width: 9px;
    background: url(../img/t_about_chain.png) repeat-y 0 0;
    position: absolute;
    top: 0;
    bottom: 80px;
}

#wrapper.top > section.about h2:before{
    left: 30px;
}

#wrapper.top > section.about h2:after{
    right: 30px;
}

#wrapper.top > section.about h2 span{
    display: block;
    padding: 20px;
    background: #cecdcd;
    box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

#wrapper.top > section.about h2 span.show{
    -webkit-animation: anime1 1s 1;
    animation: anime1 1s 1;
}

#wrapper.top > section.about h2 span.hover{
    -webkit-animation: anime2 1s 1;
    animation: anime2 1s 1;
}

@keyframes anime1 {
    0% {
        transform: rotateX(0deg);
    } 10% {
        transform: rotateX(-20deg);
    } 30% {
        transform: rotateX(20deg);
    } 45% {
        transform: rotateX(-10deg);
    } 60% {
        transform: rotateX(10deg);
    } 70% {
        transform: rotateX(-5deg);
    } 80% {
        transform: rotateX(5deg);
    } 90% {
        transform: rotateX(-2deg);
    } 100% {
        transform: rotateX(0);
    }

}

@keyframes anime2 {
    0% {
        transform: rotateX(0deg);
    } 10% {
        transform: rotateX(-8deg);
    } 30% {
        transform: rotateX(8deg);
    } 45% {
        transform: rotateX(-4deg);
    } 60% {
        transform: rotateX(4deg);
    } 70% {
        transform: rotateX(-2deg);
    } 80% {
        transform: rotateX(2deg);
    } 100% {
        transform: rotateX(0);
    }
}

@-webkit-keyframes anime1 {
    0% {
        -webkit-transform: rotateX(0deg);
    } 10% {
        -webkit-transform: rotateX(-20deg);
    } 30% {
        -webkit-transform: rotateX(20deg);
    } 45% {
        -webkit-transform: rotateX(-10deg);
    } 60% {
        -webkit-transform: rotateX(10deg);
    } 70% {
        -webkit-transform: rotateX(-5deg);
    } 80% {
        -webkit-transform: rotateX(5deg);
    } 90% {
        -webkit-transform: rotateX(-2deg);
    } 100% {
        -webkit-transform: rotateX(0);
    }

}

@-webkit-keyframes anime2 {
    0% {
        -webkit-transform: rotateX(0deg);
    } 10% {
        -webkit-transform: rotateX(-8deg);
    } 30% {
        -webkit-transform: rotateX(8deg);
    } 45% {
        -webkit-transform: rotateX(-4deg);
    } 60% {
        -webkit-transform: rotateX(4deg);
    } 70% {
        -webkit-transform: rotateX(-2deg);
    } 80% {
        -webkit-transform: rotateX(2deg);
    } 100% {
        -webkit-transform: rotateX(0);
    }
}

#wrapper.top > section.about > a{
    display: block;
    position: absolute;
    right: 50%;
    margin-right: -55px;
    top: 50%;
    margin-top: 94px;
    height: 20px;
    line-height: 20px;
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    padding-left: 30px;
    background: url(../img/t_about_anc.png) no-repeat left center;
    opacity: 0;
    letter-spacing: 0.1em;
}

#wrapper.top > section.about > a:hover{
    text-decoration: underline;
}

#wrapper.top > section.about .content{
    position: absolute;
    left: 54%;
    margin-left: 40px;
    top: 50%;
    margin-top: -223px;
    width: 500px;
    height: 420px;
    color: #FFF;
    font-size: 15px;
    line-height: 180%;
    letter-spacing: 0.15em;
    text-align: justify;
    -webkit-transform: rotateZ(0);
}

#wrapper.top > section.about .content > *{
    opacity: 0;
    width: 100%;
}

#wrapper.top > section.about .content h3{
    margin-bottom: 70px;
}

#wrapper.top > section.about .content p{
    margin-bottom: 1.3em;
}

#top_label{
    background: url(../img/1607/top_about_bg.jpg) repeat center center;
    z-index: 2;
    position: relative;
}

#top_label nav{
    width: 1106px;
    margin: 0 auto;
    overflow: hidden;
}

#top_label nav li{
    float: left;
    color: #FFF;
}

#top_label nav li a,
#top_label nav li span{
    display: block;
}

#top_label nav li a:before,
#top_label nav li span:before{
    content: "";
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#top_label nav li a:hover:before,
#top_label nav li span:hover:before{
    opacity: 0.8;
}

#top_label nav li h2{
    text-indent: -9999px;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#top_label nav .description{
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto;
}
#top_label nav.rensai{
    padding-top: 55px;
}
#top_label nav.rensai h2{
    margin-bottom: 55px;
}
#top_label nav.rensai ul{
    width: 1080px;
    margin-left: auto;
    margin-right: auto;
}
#top_label nav.rensai ul li{
    margin-bottom: 40px;
    overflow: hidden;
    border-radius: 10px;
}
#top_label nav.rensai ul li:hover img{
    opacity: 0.8;
}
#top_label nav.rensai ul li img{
    vertical-align: bottom;
}
#top_label nav.rensai ul.low{
    overflow: hidden;
}
#top_label nav.rensai ul.low li{
    width: 320px;
    margin-left: 60px;
}
#top_label nav.rensai ul.low li:first-child{
    margin-left: 0;
}

#top_label nav.upper{
    padding-top: 40px;
}
#top_label nav.upper h2{
    margin-bottom: 55px;
}

#top_label nav.upper li{
    width: 320px;
    margin-left: 60px;
    height: 360px;
    border-bottom: 1px solid #8a8faa;
}

#top_label nav.upper li a:before{
    width: 320px;
    height: 180px;
}

#top_label nav.upper li h2{
    width: 320px;
    height: 65px;
}

#top_label nav.upper li._1 a:before{
    background-image: url(../img/1607/top_about1_image.png);
}
#top_label nav.upper li._2 a:before{
    background-image: url(../img/1607/top_about2_image.png);
}
#top_label nav.upper li._3 a:before{
    background-image: url(../img/1607/top_about3_image.png);
}

#top_label nav.upper li._1 h2{
    background-image: url(../img/1607/top_about1_title.png);
}
#top_label nav.upper li._2 h2{
    background-image: url(../img/1607/top_about2_title.png);
}
#top_label nav.upper li._3 h2{
    background-image: url(../img/1607/top_about3_title.png);
}

#top_label nav.upper ul li:first-child{
    margin-left: 13px;
}

#top_label nav.upper h2{
    margin: 15px 0;
}

#top_label nav.upper > h2{
    margin: 0 0 55px;
}

#top_label nav.upper .description{
    width: 300px;
}

#top_label nav.lower{
    padding-bottom: 110px;
}

#top_label nav.lower li{
    width: 250px;
    height: 260px;
    margin: 48px 13px 0;
}

#top_label nav.lower li a:before,
#top_label nav.lower li span:before{
    width: 250px;
    height: 138px;
    border-radius: 4px;
    overflow: hidden;
}

#top_label nav.lower h2{
    margin: 8px 0;
    width: 250px;
    height: 45px;
}

#top_label nav.lower li._4 a:before,
#top_label nav.lower li._4 span:before{
    background-image: url(../img/1705/top_about4_image.png);
}
#top_label nav.lower li._5 a:before{
    background-image: url(../img/1607/top_about5_image.png);
}
#top_label nav.lower li._6 a:before{
    background-image: url(../img/1607/top_about6_image.png);
}
#top_label nav.lower li._7 a:before{
    background-image: url(../img/1607/top_about7_image.png);
}
#top_label nav.lower li._8 a:before{
    background-image: url(../img/1607/top_about8_image.png);
}

#top_label nav.lower li._4 h2{
    background-image: url(../img/1705/gakuen_pc.png);
}
#top_label nav.lower li._5 h2{
    background-image: url(../img/1607/top_about5_title.png);
}
#top_label nav.lower li._6 h2{
    background-image: url(../img/1607/top_about6_title.png);
}
#top_label nav.lower li._7 h2{
    background-image: url(../img/1607/top_about7_title.png);
}
#top_label nav.lower li._8 h2{
    background-image: url(../img/1607/top_about8_title.png);
}

#wrapper.top > section.updates{
    overflow: hidden;
    position: relative;
    background: #fdf5a4;
}

#wrapper.top > section.updates:before{
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    margin-right: 32px;
    background: #f6f4e0;
}

#wrapper.top > section.updates .page_width{
    max-width: 1024px;
}

#wrapper.top > section.updates section{
    padding: 50px 0 120px;
}

#wrapper.top > section.updates section h2{
/*
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    padding-left: 80px;
*/
    margin-bottom: 20px;
    letter-spacing: 0.15em;
}

#wrapper.top > section.updates section h2 span{
    font-size: 10px;
    display: inline-block;
    font-weight: normal;
    margin-left: 6px;
}

#wrapper.top > section.updates section h2 span:before,
#wrapper.top > section.updates section h2 span:after{
    content: "/";
    display: inline-block;
    padding: 0 4px;
}

#wrapper.top > section.updates article{
    padding-top: 20px;
    padding-bottom: 20px;
    height: 160px;
    border-bottom: 1px solid #000;
    position: relative;
}

#wrapper.top > section.updates .news{
    width: 480px;
    padding-left: 30px;
    box-sizing: border-box;
    float: left;
}


#wrapper.top > section.updates .books{
    width: 500px;
    float: left;
    padding-left: 40px;
}

#wrapper.top > section.updates .news .articles{
    padding-left: 50px;
    margin-bottom: 40px;
}

#wrapper.top > section.updates .news article .date{
    padding-top: 10px;
    font-size: 12px;
    font-family: 'Lato', sans-serif;
    vertical-align: bottom;
    letter-spacing: 0.08em;
}

#wrapper.top > section.updates .news article.new .date:after{
    content: "NEW";
    display: inline-block;
    height: 14px;
    line-height: 14px;
    padding: 0 3px;
    background: #d1111b;
    color: #FFF;
    font-size: 11px;
    margin-left: 15px;
}

#wrapper.top > section.updates .news article h3{
    padding: 20px 30px 20px 0;
    font-size: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#wrapper.top > section.updates .news article a:hover h3{
    text-decoration: underline;
}

#wrapper.top > section.updates .news article .content{
    line-height: 20px;
    margin-right: 20px;
    font-size: 12px;
}

#wrapper.top > section.updates section > p{
    padding-left: 15px;
    background: url(../img/t_update_arr.png) no-repeat left 5px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
}

#wrapper.top > section.updates section.news > p{
    margin-left: 50px;
}

#wrapper.top > section.updates section > p a{
    display: inline-block;
    line-height: 18px;
    border-bottom: 2px solid #000;
    transition: all 0.2s;
    opacity: 1;
}

#wrapper.top > section.updates section > p a:hover{
    opacity: 0.5;
}

#wrapper.top > section.updates .books .img{
    position: absolute;
    left: 0;
    top: 20px;
    width: 107px;
    height: 158px;
}

#wrapper.top > section.updates .books .img span{
    display: table-cell;
    width: 107px;
    height: 158px;
    vertical-align: middle;
    text-align: center;
}

#wrapper.top > section.updates .books .img img{
    max-width: 107px;
    max-height: 158px;
    vertical-align: middle;
}

#wrapper.top > section.updates .books .articles{
    margin-bottom: 40px;
}


#wrapper.top > section.updates .books article{
    padding-left: 135px;
}

#wrapper.top > section.updates .books article .meta{
    padding-top: 40px;
    margin-bottom: 20px;
}

#wrapper.top > section.updates .books article .meta *{
    display: inline-block;
    line-height: 17px;
}

#wrapper.top > section.updates .books article h3{
    font-size: 17px;
}

#wrapper.top > section.updates .books article a:hover h3{
    text-decoration: underline;
}

#wrapper.top > section.updates .books article .credit{
    font-size: 12px;
    color: #808080;
    padding-left: 10px;
    letter-spacing: 0.1em;
}

#wrapper.top > section.updates .books article .credit span{
    padding-left: 10px;
}

#wrapper.top > section.updates .books article .content{
    width: 370px;
    font-size: 12px;
    line-height: 23px;
}

#wrapper.top > section.updates > .toTop{
    position: absolute;
    bottom: -44px;
    right: 20px;
    z-index: 2;
    transition: all 0.4s;
}

#wrapper.top > section.updates > .toTop.show{
    bottom: 0;
}

#uranai{
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    color: #1f2c67;
    font-weight: bold;
    font-family: "ヒラギノ丸ゴ Pro W4","Hiragino Maru Gothic Pro";
    display: none;
}

#uranai > a{
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(31,44,103,0.9);
    z-index: 1;
    cursor: default;
}

#uranai > a:after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -142px;
    left: 50%;
    margin-left: 340px;
    width: 41px;
    height: 41px;
    background: url(../img/1607/uranai_close.png) no-repeat center center;
    background-size: contain;
    z-index: 3;
    cursor: pointer;
}

#uranai .content{
    width: 640px;
    padding: 15px 10px 20px;
    position: absolute;
    top: 50%;
    margin-top: -142px;
    left: 50%;
    margin-left: -330px;
    background: #FFF;
    border-radius: 10px;
    z-index: 2;
}


#uranai .content h1{
    margin: 0 10px;
    background: #31dba3;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 26px;
}

#uranai .content .read{
    margin-bottom: 25px;
    text-align: center;
    font-size: 14px;
}

#uranai .content .read span{
    font-size: 24px;
    padding-right: 33px;
}

#uranai .content .lower{
    height: 140px;
    padding-left: 170px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 140px 140px;
    position: relative;
}

#uranai._0 .content .lower{
    background-image: url(../img/1607/uranai_icon1.png);
}
#uranai._1 .content .lower{
    background-image: url(../img/1607/uranai_icon2.png);
}
#uranai._2 .content .lower{
    background-image: url(../img/1607/uranai_icon3.png);
}

#uranai .content .lower:after{
    content: "";
    display: block;
    height: 0;
    width: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid #f7f7f6;
    position: absolute;
    top: 62px;
    left: 146px;
}

#uranai .content .lower div{
    background: #f7f7f6;
    border-radius: 8px;
    padding: 24px 44px;
    height: 92px;
    font-size: 17px;
    line-height: 26px;
}

#uranai .content .lower p{
    width: 382px;
    height: 92px;
    display: table-cell;
    vertical-align: middle;
}


/* NEWS
======================================== */

#news{
    background: #FFF;
    padding-top: 100px;
}

#news > .main{
    max-width: 1040px;
    padding:40px 20px 80px 60px;
    margin: 0 auto;
    overflow: hidden;
}

#news .articles{
    width: 660px;
    float: left;
}

#news .pager{
    clear: both;
}

#news article{
    margin-bottom: 70px;
    position: relative;
    overflow: hidden;
}

#news article a:hover{
    text-decoration: underline;
}

#news article header{
    padding-bottom: 10px;
    border-bottom: 1px solid #1d2961;
    margin-bottom: 3px;
    position: relative;
}

#news article header:after{
    content: "";
    display: block;
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    top: 20px;
    right: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#news article.secretary header:after{
    background-image: url(../img/n_secretary.png);
}

#news article.scholar header:after{
    background-image: url(../img/n_scholar.png);
}

#news article.head header:after{
    background-image: url(../img/n_head.png);
}

#news article.dokuhon header:after{
    background-color: #1e3ca3;
}

#news article.kodomo header:after{
    background-color: #32e4a7;
}

#news article.web header:after{
    background-color: #ffbb33;
}

#news article.library header:after{
    background-color: #ea7cab;
}

#news article.other header:after{
    background-color: #8c8c8c;
}


#news article .date{
    font-size: 11px;
    height: 13px;
    line-height: 13px;
    padding-left: 20px;
    background: url(../img/n_date_bg.png) no-repeat left center;
    margin-bottom: 7px;
    letter-spacing: 0.1em;
}

#news article.new .date:after{
    content: "NEW!";
    padding-left: 8px;
    color: #fa0000;
}

#news article h3{
    width: 558px;
    margin-left: -8px;
    line-height: 20px;
    padding: 20px;
    font-size: 19px;
    background: #f7f7f6;
    border-radius: 5px;
}

#news article .content{
    padding: 35px 0;
    border-top: 1px solid #1d2961;
    border-bottom: 1px solid #b9b9b9;
    font-size: 14px;
    line-height: 25px;
    margin-bottom: 15px;
}

#news article .content a{
    color: #e4629a;
    text-decoration: underline;
}

#news article .cat{
    min-height: 40px;
    text-align: left;
    float: right;
    padding-left: 240px;
    overflow: hidden;
}

#news article .cat ul{
    letter-spacing: 0.1em;
    display: inline-block;
}

#news article .cat *{
    display: inline-block;
    font-size: 10px;
    line-height: 20px;
}

#news article .cat h4{
    font-family: 'Lato', sans-serif;
}

#news article .cat li{
    margin-left: 15px;
}

#news article .cat li:before{
    content: "・";
}

#news .sidebar{
    width: 260px;
    float: right;
    padding-bottom: 280px;
    letter-spacing: 0.06em;
}

#news .sidebar a{
    opacity: 1;
    transition: all 0.3s;
}

#news .sidebar a:hover{
    opacity: 0.5;
}

#news .sidebar .archives{
    border-radius: 5px;
    width: 220px;
    padding: 40px 20px 0;
    background: url(../img/s_header_bg.jpg) repeat 0 0;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.05) inset;
}

#news .sidebar aside{
    padding-bottom: 32px;
    font-size: 13px;
    line-height: 14px;
    font-weight: bold;
}

#news .sidebar aside h3{
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    background: #FFF;
    text-align: center;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

#news .sidebar aside li{
    margin-bottom: 18px;
    padding-left: 25px;
    margin-left: 10px;
    position: relative;
}

#news .sidebar aside.label li{
    background-repeat: no-repeat;
    background-position: 0 0;
}

#news .sidebar aside.label ._1{
    background-image: url(../img/n_archives_arr_1.png);
}
#news .sidebar aside.label ._2{
    background-image: url(../img/n_archives_arr_2.png);
}
#news .sidebar aside.label ._3{
    background-image: url(../img/n_archives_arr_3.png);
}
#news .sidebar aside.label ._4{
    background-image: url(../img/n_archives_arr_4.png);
}
#news .sidebar aside.label ._5{
    background-image: url(../img/n_archives_arr_5.png);
}

#news .sidebar aside.author li{
    background-repeat: no-repeat;
    background-position: left top;
    background: url(../img/n_archives_arr_5.png) no-repeat 0 0;
}

#news .sidebar aside.monthly li:before{
    content: "";
    display: block;
    height: 2px;
    width: 4px;
    background: #656565;
    position: absolute;
    top: 5px;
    left: 5px;
}

#news .sidebar > ul li{
    margin-top: 20px;
}

#news.single article .content .img{
    padding: 0 20px 20px 20px;
}

#news.single article .content .right{
    float: right;
}

#news article .content p{
    margin-bottom: 1em;
}

#news article .share{
    position: absolute;
    left: 0;
    bottom: 14px;
    padding-top: 10px;
}

#news article .share li{
    height: 26px;
    margin-right: 4px;
    display: inline-block;
}

#news.single .wp-pagenavi{
    width: 100%;
    font-size: 100;
    font-size: 13px;
}

#news.single .wp-pagenavi p{
    width: auto;
    text-indent: 0;
    position: absolute;
}

#news.single .wp-pagenavi a{
    display: block;
}

#news.single .wp-pagenavi .previouspostslink{
    left: 0;
}

#news.single .wp-pagenavi .nextpostslink{
    right: 0;
}

#news.single .wp-pagenavi .previouspostslink a{
    padding-left: 30px;
    background: url(../img/n_pager_prev.png) no-repeat left center;
}

#news.single .wp-pagenavi .nextpostslink a{
    padding-right: 30px;
    background: url(../img/n_pager_next.png) no-repeat right center;
}

/* RECENT
======================================== */
#recent{
    background: #FFF;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
}
#recent > .main {
    max-width: 880px;
    padding: 40px 20px 80px 120px;
    margin: 0 auto;
    overflow: hidden;
}
#recent .articles{
    width: 540px;
    float: left;
}
#recent article{
    padding: 18px 10px 10px;
    margin-bottom: 30px;
    border-radius: 4px;
    background-color: #f7f7f6;
}
#recent article .date {
    font-size: 11px;
    height: 13px;
    line-height: 13px;
    padding-left: 20px;
    background: url(../img/n_date_bg.png) no-repeat left center;
    margin-bottom: 18px;
    letter-spacing: 0.1em;
}
#recent article.new .date:after {
    content: "NEW!";
    padding-left: 8px;
    color: #fa0000;
}

#recent article .share{
    margin-top: 10px;
    overflow: hidden;
}

#recent article .share li{
    float: left;
    height: 26px;
    margin-right: 10px;
}


#recent article a p{
    width: 520px;
    background-color: #fff;
}

#recent article a p img{
    width: 100%;
    height: auto;
}


#recent .sidebar{
    width: 260px;
    float: right;
    padding-bottom: 280px;
    letter-spacing: 0.06em;
}

#recent .sidebar a{
    opacity: 1;
    transition: all 0.3s;
}

#recent .sidebar a:hover{
    opacity: 0.5;
}

#recent .sidebar .archives{
    border-radius: 5px;
    width: 220px;
    padding: 13px 10px 0;
}
#recent .sidebar aside {
    padding-bottom: 32px;
    font-size: 13px;
    line-height: 14px;
    font-weight: bold;
}
#recent .sidebar aside h3 {
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    background: #f7f7f6;
    text-align: center;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}
#recent .sidebar aside li {
    margin-bottom: 18px;
    padding-left: 25px;
    margin-left: 10px;
    position: relative;
}
#recent .sidebar aside.monthly li:before{
    content: "";
    display: block;
    height: 2px;
    width: 4px;
    background: #656565;
    position: absolute;
    top: 5px;
    left: 5px;
}

#recent .toTop {
    position: absolute;
    bottom: -44px;
    right: 20px;
    z-index: 2;
    transition: all 0.4s;
}
#recent .toTop.show{
    bottom: 0;
}

#recent #recentSingle{
    background: rgba(29, 41, 97, 0.94);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: none;
}
#recent #recentSingle > div{
    position: absolute;
    top: 68px;
    left: 0px;
    right: 0px;
    bottom: 68px;
    overflow-y: scroll;
}

#recent #recentSingle .content > div{
    position: absolute;
    left: 0;
    top: 54px;
    right: 0;
    bottom: 0;
}

#recent #recentSingle > div h2{
    width: 314px;
    height: 36px;
    margin: 0 auto 18px;
    color: #fff;
    font-size: 15px;
    line-height: 32px;
    letter-spacing: 0.12em;
    font-weight: normal;
    text-align: center;
    border: 2px solid #fff;
    border-radius: 18px;
    box-sizing: border-box;
}
#recent #recentSingle > div h2 .date{
    padding-right: 15px;
    font-size: 18px;
    font-family: 'Helvetica', 'Arial', sans-serif;
}
#recent #recentSingle > div .loading{
    padding: 5px;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#recent #recentSingle > div .loading .progress{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -41px;
}
#recent #recentSingle > div .slider{
    padding: 5px;
    max-height: 100%;
    max-width: 100%;
    border-radius: 5px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#recent #recentSingle > div .slider .image,
#recent #recentSingle > div .slider img{
    max-width: 100%;
    max-height: 100%;
}

#recent #recentSingle > div .slider .nextBtn{
    position: absolute;
    left: -68px;
    top: 50%;
    margin-top: -27px;
}
#recent #recentSingle > div .slider .prevBtn{
    position: absolute;
    right: -68px;
    top: 50%;
    margin-top: -27px;
}

#recent #recentSingle > div .sliderBtn a{
    display: block;
    width: 30px;
    height: 55px;
}

#recent #recentSingle > div .nextBtn a{
    background: url(../img/arr_l_l_w.png) no-repeat center center;
}

#recent #recentSingle > div .prevBtn a{
    background: url(../img/arr_l_r_w.png) no-repeat center center;
}


/* QandA
======================================== */
#qanda{
    background: #FFF;
    padding-top: 100px;
}
#wrapper.sub > #qanda.subpage > header .title h2{
    margin-top: 19px;
}
#qanda > .main {
    max-width: 1000px;
    padding: 40px 0 80px;
    margin: 0 auto;
    overflow: hidden;
}
#qanda .articles{
    float: left;
}
#qanda .articles article{
    width: 660px;
}
#qanda .questions article > div:before,
#qanda .question:before,
#qanda .answer:before{
    content: '';
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 5px;
}
#qanda .questions article > div:before,
#qanda .question:before{
    background: #32e4a7 url(../img/q_p_q.png) no-repeat center center;
}
#qanda .answer:before{
    background: #ffbb33 url(../img/q_p_a.png) no-repeat center center;
}
#qanda .questions article,
#qanda .question{
    padding-bottom: 24px;
    border-bottom: 1px solid #b9b9b9;
}

#qanda .articles article > div{
    padding-left: 60px;
    position: relative;
}
#qanda .articles article > div > div{
    padding: 18px 24px 20px;
    background-color: #f7f7f6;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
#qanda .articles article > div > div a{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(50, 228, 167, 0.97);
    opacity: 0;
}
#qanda .articles.questions article:first-child{
    padding-top: 0;
}
#qanda .articles.questions article{
    padding-top: 25px;
}
#qanda .articles.questions article > div > div a p{
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 19px;
    line-height: 22px;
    position: absolute;
    top: 50%;
    margin-top: -11px;
}
#qanda .articles.questions article > div > div:hover a{
    opacity: 1;
}
#qanda .articles article > div > div a p img{
    margin-right: 18px;
}
#qanda .articles article > div > div h2{
    font-size: 19px;
    font-weight: bold;
    line-height: 26px;
}
#qanda .articles article > div > div .date{
    margin-top: 15px;
    font-size: 11px;
}
#qanda article.new .date:after {
    content: "NEW!";
    padding-left: 8px;
    color: #fa0000;
    padding: 0 2px;
    display: inline-block;
    margin-left: 8px;
}
#qanda .articles article > div > div .date .new{
    display: none;
}
#qanda .articles article > div.answer > div{
    margin-top: 25px;
    padding-bottom: 80px;
    position: relative;
}
#qanda .answer > div:after{
    content: '柳田理科雄';
    width: 150px;
    height: 70px;
    padding-top: 33px;
    font-size: 13px;
    font-weight: bold;
    background: url(../img/q_avatar.png) no-repeat right center;
    box-sizing: border-box;
    position: absolute;
    bottom: 10px;
    right: 11px;
}
#qanda .answer p{
    margin-top: 27px;
    font-size: 15px;
    font-weight: bold;
    line-height: 29px;
    letter-spacing: 0.08em;
}
#qanda .answer p:first-child{
    margin-top: 0;
}
#qanda .answer img{
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

#qanda .articles .share{
    margin-top: 15px;
    padding-left: 60px;
    overflow: hidden;
    position: relative;
}
#qanda .articles .share li{
    margin-right: 10px;
    display: inline-block;
}

#qanda .articles .wp-pagenavi{
    margin-top: 62px;
}
#qanda .pager{
    width: 710px;
    margin-top: 75px;
    margin-left: 10px;
}
#qanda .pager p{
    position: relative;
}
#qanda .pager p a{
    padding-bottom: 15px;
    padding-left: 20px;
    font-size: 13px;
    line-height: 19px;
    font-weight: bold;
    letter-spacing: 0.08em;
    position: relative;
    border-bottom: 1px solid #b9b9b9;
    transition: all 0.3s;
    display: block;
}
#qanda .pager p:hover a{
    opacity: 0.5;
}

#qanda .pager p:before{
    content: "Q.";
    font-size: 13px;
    color: #20cf93;
    font-weight: bold;
    line-height: 19px;
    position: absolute;
    left: 0;
    top: 0;
}
#qanda .pager .prev{
    width: 270px;
    padding-top: 8px;
    padding-left: 30px;
    background: url(../img/n_pager_prev.png) no-repeat left center;
    float: left;
}
#qanda .pager .prev p{
    display: block;
}
#qanda .pager .next{
    width: 270px;
    padding-top: 8px;
    padding-right: 30px;
    background: url(../img/n_pager_next.png) no-repeat right center;
    float: right;
}
#qanda .pager .next p{
    display: block;
}

#qanda .sidebar{
    width: 270px;
    float: right;
    padding-bottom: 280px;
    letter-spacing: 0.06em;
}

#qanda .sidebar a{
    opacity: 1;
    transition: all 0.3s;
}

#qanda .sidebar a:hover{
    opacity: 0.5;
}

#qanda .sidebar .archives{
    border-radius: 5px;
    width: 270px;
    padding: 13px 0;
}
#qanda .sidebar aside{
    margin-bottom: 56px;
    padding-bottom: 32px;
    font-size: 13px;
    line-height: 14px;
    font-weight: bold;
}
#qanda .sidebar aside h3 {
    width: 260px;
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    background: #f7f7f6;
    text-align: center;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0 auto 30px;
}
#qanda .sidebar aside li {
    margin-bottom: 18px;
    padding-left: 25px;
    margin-left: 10px;
    position: relative;
}
#qanda .sidebar aside.questionRanking li{
    margin-left: 0;
    padding-left: 20px;
    padding-bottom: 15px;
    font-size: 13px;
    line-height: 19px;
    border-bottom: 1px solid #b9b9b9;
}
#qanda .sidebar aside.questionRanking li:before{
    content: "Q.";
    font-size: 13px;
    color: #20cf93;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
}
#qanda .sidebar aside.monthly li:before{
    content: "";
    display: block;
    height: 2px;
    width: 4px;
    background: #656565;
    position: absolute;
    top: 5px;
    left: 5px;
}

/* NEWS
======================================== */

#books{
    background: #FFF;
    padding-top: 100px;
}

#books .main > header{
    width: 880px;
    height: 40px;
    line-height: 40px;
    background: #f0f0f0;
    border-radius: 5px;
    margin: -20px auto;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05) inset;
    position: relative;
}

#books .main > header h3{
    padding: 0 70px 0 20px;
    float: left;
}

#books .main > header li{
    margin-right: 15px;
    float: left;
    font-size: 14px;
    font-weight: bold;
}

#books .main > header li a{
    display: block;
    margin: 10px 0;
    height: 20px;
    line-height: 20px;
    padding: 0 30px;
    border-radius: 10px;
    transition: all 0.3s;
}

#books .main > header li.current a{
    background: #FFF;
}

#books .main > header li a:hover{
    background: #FAFAFA;
}

#books .articles{
    width: 990px;
    margin: 0 auto;
    padding: 10px 0 50px;
    overflow: hidden;
}

#books article{
    border: 1px solid #dcdcdc;
    margin: 30px 15px 0;
    float: left;
    letter-spacing: 0.1em;
    position: relative;
}

#books article > a{
    display: block;
    position: absolute;
    width: 258px;
    height: 488px;
    padding: 0 20px;
    position: relative;
    transition: all 0.4s;
}

#books article > a:hover{
    background: #F8F8F8;
}

#books article.new:before{
    content: "NEW";
    display: block;
    width: 38px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    font-size: 12px;
    color: #FFF;
    background: #d1111b;
    font-family: 'Lato', sans-serif;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

#books article .img{
    padding: 30px 0;
    text-align: center;
}

#books article .img span{
    width: 258px;
    height: 220px;
    display: table-cell;
    vertical-align: middle;

}

#books article .img img{
    max-width: 258px;
    max-height: 220px;
    vertical-align: middle;
}

#books article h3{
    font-size: 18px;
    margin-bottom: 10px;
}

#books article .author{
    font-size: 12px;
    color: #808080;
    height: 44px;
}

#books article .author span{
    display: inline-block;
    line-height: 18px;
}

#books article .author span:first-child{
    padding-right: 10px;
}

#books article .content{
    font-size: 12px;
    line-height: 19px;
}

#books article .date{
    position: absolute;
    bottom: 10px;
    right: 20px;
    font-size: 10px;
    letter-spacing: 0;
    font-style: italic;
    font-family: 'Lato', sans-serif;
    padding-top: 6px;
    border-top: 1px solid #000;
    width: 113px;
    text-align: right;
}

#books .pager{
    padding-bottom: 100px;
}

#books.single .articles{
    width: 960px;
    padding: 60px 0 120px;
}

#books.single article{
    width: auto;
    height: auto;
    border: none;
    padding: 0;
    padding-left: 20px;
    margin: 0;
}

#books.single article.new:before{
    display: none;
}

#books.single article .left{
    width: 560px;
    float: left;
}

#books.single article .right{
    width: 298px;
    height: 498px;
    float: left;
    margin-left: 80px;
    border: 1px solid #dcdcdc;
    text-align: center;
}

#books.single article h3{
    font-size: 28px;
    margin-bottom: 30px;
}

#books.single article .author{
    font-size: 16px;
    margin-bottom: 30px;
    height: auto;
}

#books.single article .author span{
    padding-left: 35px;
}

#books.single article .author span:first-child{
    padding: 0;
}

#books.single article .date{
    height: 20px;
    line-height: 20px;
    position: relative;
    right: auto;
    bottom: auto;
    text-align: left;
    margin-left: 0;
    letter-spacing: 0.1em;
    border-top: 0;
    padding-top: 0;
    margin-bottom: 40px;
}

#books.single article .date span{
    display: inline-block;
    border-top: 1px solid #000;
}

#books.single article .content{
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 0.08em;
    text-align: justify;
}

#books.single article .content p{
    margin-bottom: 1em;
}

#books.single article .img{
    padding: 40px 0;
}

#books.single article .img span{
    width: 298px;
    height: 332px;
}

#books.single article .img img{
    max-width: 298px;
    max-height: 332px;
}

#books.single article .right a{
    width: 193px;
    height: 50px;
    display: block;
    margin: 0 auto;
    background: url(../img/bs_amazon_bg.png) no-repeat 0 0;
}

#books.single article .right a img{
    opacity: 0;
    transition: all 0.4s;
}
#books.single article .right a:hover img{
    opacity: 1;
}

/* NEWS
======================================== */

#about{
    background: url(../img/a_bg.jpg) repeat 0 0;
    position: relative;
    padding-top: 100px;
}

#about:before{
    content: "";
    display: block;
    height: 425px;
    position: absolute;
    top: 220px;
    left: 0;
    right: 0;
    background: url(../img/a_bg_2.jpg) repeat-x center center;
}

#about .main{
    padding: 40px 0 45px;
}

#about .main .mv img{
    max-width: 100%;
    height: !important;
}

#about .main section{
    width: 1000px;
    margin: 0 auto;
}

#about .main section.about{
    color: #FFF;
    padding-bottom: 100px;
    overflow: hidden;
    position: relative;
}

#about .main section.about hgroup{
    padding: 35px 0 65px;
    text-align: center;
    position: relative;
}

#about .main section.about hgroup:before,
#about .main section.about hgroup:after{
    content: "";
    display: block;
    width: 281px;
    height: 5px;
    position: absolute;
    top: 75px;
    background: url(../img/a_dot.png) repeat-x 0 0;
}

#about .main section.about hgroup:before{
    left: 0;
}

#about .main section.about hgroup:after{
    right: 0;
}

#about .main section.about hgroup p{
    font-size: 10px;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
}

#about .main section.about .left,
#about .main section.about .right{
    width: 460px;
    float: left;
    font-size: 14px;
    line-height: 180%;
    text-align: justify;
}

#about .main section.about .left{
    margin-right: 80px;
}

#about .main section.about .press{
    padding-top: 44px;
    text-align: right;
    font-size: 14px;
    clear: both;
}

#about .main section.about .press a{
    height: 16px;
    line-height: 16px;
    padding-left: 30px;
    background: url(../img/t_about_anc.png) no-repeat left center;
}

#about .main section.about .press a:hover{
    text-decoration: underline;
}

#about .main section.scholar{
    background: #f7f7f6;
    border-radius: 5px;
    position: relative;
}
#about .main section.scholar + .scholar{
    margin-top: 72px;
}

#about .main section.scholar:before{
    content: "";
    display: block;
    width: 91px;
    height: 45px;
    background: url(../img/a_circle.png) no-repeat 0 0;
    position: absolute;
    left: 50%;
    margin-left: -45px;
    top: -30px;
}

#about .main section.scholar .img{
    position: absolute;
    top: 40px;
    left: 80px;
    width: 160px;
    height: 230px;
    padding: 10px 0;
    background: #1d2961;
    border-radius: 5px;
}

#about .main section.scholar .right{
    margin-left: 280px;
    margin-right: 80px;
    color: #1d2961;
}

#about .main section.scholar .right > p{
    padding: 20px 0 14px;
    text-align: right;
    border-bottom: 2px solid #1d2961;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Lato', sans-serif;
    margin-bottom: 2px;
}

#about .main section.scholar .right hgroup{
    border-top: 2px solid #1d2961;
    padding-top: 35px;
    padding-bottom: 20px;
    border-bottom: 4px solid #1d2961;
}

#about .main section.scholar .right hgroup p{
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 18px;
}

#about .main section.scholar .right hgroup h3{
    font-size: 34px;
}

#about .main section.scholar .right hgroup h3 span{
    font-size: 13px;
    font-weight: 100px;
    padding-left: 14px;
}

#about .main section.scholar .right hgroup h3 span:before,
#about .main section.scholar .right hgroup h3 span:after{
    content: "/";
}

#about .main section.scholar .right .content{
    padding: 50px 0;
    font-size: 14px;
    line-height: 25px;
}

#about .main section.scholar .right .content p{
    margin-bottom: 25px;
}
#about .company{
    padding: 65px 0 120px;
    background-color: #ebebe8;
}
#about .company > div{
    width: 1000px;
    padding: 0 22px;
    margin: 0 auto;
    box-sizing: border-box;
}
#about .company > div h3{
    margin-bottom: 55px;
    color: #1d2961;
    font-size: 26px;
    letter-spacing: 0.12em;
}
#about .company > div h3 span{
    padding-bottom: 11px;
    border-bottom: 4px solid #1d2961;
}
#about .company .body{
    padding: 0 80px;
}
#about .company .body p{
    padding-left: 180px;
    margin-bottom: 4px;
    color: #1d2961;
    font-size: 13px;
    line-height: 23px;
    background-color: #fff;
    position: relative;
}
#about .company .body p .tl{
    width: 178px;
    border-right: 2px solid #d5d7e1;
    position: absolute;
    top: 6px;
    left: 0;
    bottom: 6px;
}
#about .company .body p .tl > span{
    width: 100%;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
#about .company .body p .txt{
    padding: 13px 30px;
    display: block;
}

#privacy{
    padding-top: 100px;
    background: #FFF;
}

#privacy .content{
    width: 1000px;
    margin: 0 auto;
}

#privacy h3{
    font-size: 24px;
    padding-top: 76px;
    padding-bottom: 30px;
    border-bottom: 1px solid #1d2961;
    text-align: center;
    letter-spacing: 0.1em;
    margin-bottom: 3px;
}

#privacy .content > section{
    border-top: 1px solid  #1d2961;
    font-size: 15px;
}

#privacy section._1{
    line-height: 25px;
}

#privacy section._1 .top{
    padding: 40px 0 25px;
}

#privacy section._1 h4{
    margin-bottom: 5px;
}

#privacy section._1 p{
    margin-bottom: 15px;
    padding-left: 20px;
}

#privacy section._1 .credit{
    padding: 25px 0 45px;
    text-align: center;
}

#privacy section._1 .credit a{
    color: #ff009c;
    text-decoration: underline;
}

#privacy section._1 .credit dl{
    display: inline-block;
    text-align: left;
    line-height: 20px;
    position: relative;
}

#privacy section._1 .credit dl.left{
    font-weight: bold;
    width: 340px;
}

#privacy section._1 .credit dl dt{
    position: absolute;
    left: 0;
}

#privacy section._1 .credit dl.left dt:after{
    content: ":" ;
    display: inline-block;
    width: 21px;
    text-align: center;
}

#privacy section._1 .credit dl.left dd{
    padding-left: 70px;
}

#privacy section._1 .credit dl.right dd{
    padding-left: 60px;
}

#privacy section._2{
    padding: 0 0 50px;
}

#privacy section._2 h4,
#privacy section._3 h4{
    line-height: 40px;
    font-size: 19px;
    padding: 20px 0;
}

#privacy section._2 h5{
    line-height: 40px;
    font-size: 15px;
    position: relative;
    padding-left: 20px;
}

#privacy section._2 h5:before{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    top: 16px;
    left: 0;
}

#privacy section._2 p{
    padding-left: 20px;
    margin-bottom: 12px;
}

#privacy section._2 table,
#privacy section._3 table{
    margin-left: 20px;
    font-size: 14px;
    line-height: 19px;
}

#privacy section._2 th,
#privacy section._3 th{
    background: #ebebeb;
    font-weight: 100;
    text-align: center;
}

#privacy section._2 table{
    width: 528px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    border-top: 1px solid #CCC;
}

#privacy section._2 th,
#privacy section._2 td{
    height: 39px;
    vertical-align: middle;
    padding: 0;
    border-bottom: 1px solid #CCC;
}

#privacy section._2 th{
    width: 159px;
}

#privacy section._2 td{
    padding-left: 40px;
}

#privacy section._3 table{
    width: 960px;
    border-left: 1px solid #CCC;
    border-top: 1px solid #CCC;

}

#privacy section._3 th,
#privacy section._3 td{
    height: 59px;
    border-right: 1px solid #CCC;
    border-bottom: 1px solid #CCC;
    vertical-align: middle;
}

#privacy section._3 td{
    text-align: center;
}

#privacy section._3 ._l3_2{
    padding: 20px 0;
}

#privacy section._3 > p{
    font-size: 14px;
    padding: 20px 0px 100px 20px;
}

#contact{
    padding-top: 100px;
    background: #f0f0f0;
}

#contact .text{
    background: #FFF;
    margin-bottom: 25px;
}

#contact .text p{
    width: 780px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 180%;
    padding: 54px 0;
}

#contact .plugin_form form > ul{
    padding-top: 25px;
}

#contact .plugin_form form > ul li.postal_code ul{
    padding-left: 40px;
}

#contact .plugin_form form > ul li.postal_code ul:before{
    content: "〒";
    position: absolute;
    font-size: 14px;
    left: 14px;
    top: 0;
    bottom: 0;
    line-height: 60px;
    font-weight: bold;
}

#contact .plugin_form form > ul li.name ul{
    padding-left: 0;
}

#contact .plugin_form form > ul li.name ul li{
    width: 210px;
    padding-left: 40px;
}

#contact .plugin_form form > ul li.name ul li input{
    width: 180px;
}

#contact .plugin_form form > ul li.name ul li:after{
    display: none;
}

#contact .plugin_form form > ul li.name ul li:before{
    content: "名";
    display: block;
    font-size: 14px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 14px;
    line-height: 60px;
    font-weight: bold;
}

#contact .plugin_form form > ul li.name ul li:first-child:before{
    content: "姓";
}

#contact .plugin_form form > ul li.textarea label{
    background: #1d2961;
}

#contact .plugin_form input[type=submit]{
    background: #1d2961;
    border-right: 2px solid #020927;
    border-bottom: 2px solid #020927;
}

#contact .plugin_form input[type=submit]:hover{
    border-color: #020927;
}

#contact .plugin_form{
    padding-bottom: 136px;
}

#contact .plugin_form form > p{
    margin-bottom: 20px;
    width: 800px;
    margin: 0 auto;
    text-align: center;
}

#search{
    background: #FFF;
    padding-top: 100px;
}

#search .main{
    width: 980px;
    margin: 0 auto;
}

#search .main h3{
    font-size: 20px;
    text-align: center;
    padding: 40px 0;
}

#search .main .articles{
    overflow: hidden;
}

#search article{
    width: 468px;
    height: 256px;
    border: 1px solid #dcdcdc;
    float: left;
    margin: 0 10px 20px;
    position: relative;
}

#search article a{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 8px 20px 20px;
    transition: all 0.4s;
}

#search article a:hover{
    background: #F8F8F8;
}

#search .pager{
    padding: 45px 0 120px;
}

#search article .date{
    padding-left: 106px;
    font-size: 12px;
    padding-top: 2px;
    height: 24px;
    line-height: 24px;
    color: #808080;
    position: relative;
}

#search article .date:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 2px;
    bottom: 0;
    line-height: 22px;
    font-size: 12px;
    padding-left: 36px;
    color: #333;
}

#search article.kodomo .date:before{
    content: "元ネタ辞典";
    background: url(../img/se_icon_3.png) no-repeat 4px 0;
}

#search article.news .date:before{
    content: "お知らせ";
    background: url(../img/se_icon_1.png) no-repeat 0 1px;
}

#search article.books .date:before{
    content: "既刊情報";
    background: url(../img/se_icon_2.png) no-repeat 6px 1px;
}

#search article h4{
    height: 96px;
    display: table-cell;
    width: 428px;
    vertical-align: middle;
    font-size: 18px;
    line-height: 30px;
    border-bottom: 1px solid #010101;
}

#search article .content{
    font-size: 13px;
    line-height: 21px;
    color: #808080;
    padding: 16px 0;
}

#search article .content *{
    display: inline;
}

#search article.books .detail{
    width: 260px;
}

#search article.books .img{
    position: absolute;
    width: 151px;
    height: 221px;
    top: 20px;
    right: 20px;
}

#search article.books .img span{
    display: table-cell;
    width: 151px;
    height: 221px;
    vertical-align: middle;
}

#search article.books .img span img{
    max-height: 221px;
    max-width: 151px;
    vertical-align: middle;
}

#recnetPaging{
    height: 50px;
}

/* share_button */
.facebook-like-button_custom,
.twitter-share-button_custom,
.line-share-button_custom{
    width: 80px;
    height: 26px;
    padding-left: 16px;
    text-align: center;
    line-height: 22px;
    font-size: 10px;
    font-weight: bold;
    border: 2px solid;
    border-radius: 7px;
    background-color: #fff;
    display: inline-block;
    box-sizing: border-box;
    transition: all 0.1s ease;
    white-space: nowrap;
    position: relative;
}
.facebook-like-button_custom{
    color: #3A5699;
    border-color: #3A5699;
}
.facebook-like-button_custom:before{
    content:'';
    width: 14px;
    height: 14px;
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20156%20300%22%3E%0A%20%20%3Cpath%20fill%3D%22%233A5699%22%20d%3D%22M101.000%2C300.000%20C101.000%2C300.000%20101.000%2C163.000%20101.000%2C163.000%20C101.000%2C163.000%20147.000%2C163.000%20147.000%2C163.000%20C147.000%2C163.000%20154.000%2C110.000%20154.000%2C110.000%20C154.000%2C110.000%20101.000%2C110.000%20101.000%2C110.000%20C101.000%2C110.000%20101.000%2C76.000%20101.000%2C76.000%20C101.000%2C60.552%20105.857%2C50.000%20128.000%2C50.000%20C128.000%2C50.000%20156.000%2C50.000%20156.000%2C50.000%20C156.000%2C50.000%20156.000%2C2.000%20156.000%2C2.000%20C151.113%2C1.351%20134.503%2C-0.000%20115.000%2C-0.000%20C74.282%2C-0.000%2046.000%2C25.336%2046.000%2C71.000%20C46.000%2C71.000%2046.000%2C110.000%2046.000%2C110.000%20C46.000%2C110.000%200.000%2C110.000%200.000%2C110.000%20C0.000%2C110.000%200.000%2C163.000%200.000%2C163.000%20C0.000%2C163.000%2046.000%2C163.000%2046.000%2C163.000%20C46.000%2C163.000%2046.000%2C300.000%2046.000%2C300.000%20C46.000%2C300.000%20101.000%2C300.000%20101.000%2C300.000%20Z%22%2F%3E%0A%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    display: block;
    position: absolute;
    left: 6px;
    top: 4px;
}
.facebook-like-button_custom:hover{
    color: #fff;
    text-decoration: none !important;
    background-color: #3A5699;
}
.facebook-like-button_custom:hover:before{
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%20156%20300%22%3E%0A%20%20%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M101.000%2C300.000%20C101.000%2C300.000%20101.000%2C163.000%20101.000%2C163.000%20C101.000%2C163.000%20147.000%2C163.000%20147.000%2C163.000%20C147.000%2C163.000%20154.000%2C110.000%20154.000%2C110.000%20C154.000%2C110.000%20101.000%2C110.000%20101.000%2C110.000%20C101.000%2C110.000%20101.000%2C76.000%20101.000%2C76.000%20C101.000%2C60.552%20105.857%2C50.000%20128.000%2C50.000%20C128.000%2C50.000%20156.000%2C50.000%20156.000%2C50.000%20C156.000%2C50.000%20156.000%2C2.000%20156.000%2C2.000%20C151.113%2C1.351%20134.503%2C-0.000%20115.000%2C-0.000%20C74.282%2C-0.000%2046.000%2C25.336%2046.000%2C71.000%20C46.000%2C71.000%2046.000%2C110.000%2046.000%2C110.000%20C46.000%2C110.000%200.000%2C110.000%200.000%2C110.000%20C0.000%2C110.000%200.000%2C163.000%200.000%2C163.000%20C0.000%2C163.000%2046.000%2C163.000%2046.000%2C163.000%20C46.000%2C163.000%2046.000%2C300.000%2046.000%2C300.000%20C46.000%2C300.000%20101.000%2C300.000%20101.000%2C300.000%20Z%22%2F%3E%0A%3C%2Fsvg%3E);
}

.twitter-share-button_custom{
    color: #1DA1F2;
    border-color: #1DA1F2;
}
.twitter-share-button_custom:before{
    content:'';
    width: 12px;
    height: 12px;
    background: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%231DA1F2%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: 5px;
    top: 6px;
}
.twitter-share-button_custom:hover{
    color: #fff;
    text-decoration: none !important;
    background-color: #1DA1F2;
}
.twitter-share-button_custom:hover:before{
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
}

.line-share-button_custom{
    color: #00B900;
    border-color: #00B900;
}
.line-share-button_custom:hover{
    color: #fff;
    text-decoration: none !important;
    background-color: #00B900;
}
.line-share-button_custom:before{
    content:'';
    width: 14px;
    height: 14px;
    background: url(data:image/svg+xml,%3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%20104%2099%22%3e%3cpath%20d%3d%22M104%2c42C104%2c18%2e7%2c80%2e6%2d%2e3%2c51%2e8%2d%2e3S%2d%2e3%2c18%2e7%2d%2e3%2c42C%2d%2e3%2c63%2c18%2e2%2c80%2e5%2c43%2e3%2c83%2e8c1%2e7%2e4%2c4%2c1%2e1%2c4%2e6%2c2%2e6a10%2e7%2c10%2e7%2c0%2c0%2c1%2c%2e2%2c4%2e7l%2d%2e7%2c4%2e5c%2d%2e2%2c1%2e3%2d1%2c5%2e2%2c4%2e5%2c2%2e8s30%2d17%2e7%2c41%2d30%2e3h0C100%2e4%2c59%2e8%2c104%2c51%2e4%2c104%2c42ZM33%2e4%2c54%2e5a1%2c1%2c0%2c0%2c1%2d1%2c1H17%2e8a1%2c1%2c0%2c0%2c1%2d%2e7%2d%2e3h0a1%2c1%2c0%2c0%2c1%2d%2e3%2d%2e7h0V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1V49%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1Zm8%2e8%2c0a1%2c1%2c0%2c0%2c1%2d1%2c1H37%2e6a1%2c1%2c0%2c0%2c1%2d1%2d1V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1Zm25%2e2%2c0a1%2c1%2c0%2c0%2c1%2d1%2c1H62%2e2l%2d%2e3%2d%2e3L51%2e5%2c41V54%2e5a1%2c1%2c0%2c0%2c1%2d1%2c1H46%2e8a1%2c1%2c0%2c0%2c1%2d1%2d1V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h4%2e5L61%2e7%2c45%2e3V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1ZM87%2e6%2c35%2e4a1%2c1%2c0%2c0%2c1%2d1%2c1H76%2e7v3%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1V45a1%2c1%2c0%2c0%2c1%2d1%2c1H76%2e7v3%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1v3%2e7a1%2c1%2c0%2c0%2c1%2d1%2c1H72a1%2c1%2c0%2c0%2c1%2d%2e7%2d%2e3h0a1%2c1%2c0%2c0%2c1%2d%2e3%2d%2e7h0V31%2e8h0a1%2c1%2c0%2c0%2c1%2c%2e3%2d%2e7h0a1%2c1%2c0%2c0%2c1%2c%2e7%2d%2e3H86%2e6a1%2c1%2c0%2c0%2c1%2c1%2c1Z%22%20style%3d%22fill%3a%2300B900%22%2f%3e%3c%2fsvg%3e);
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    position: absolute;
    left: 5px;
    top: 5px;
}
.line-share-button_custom:hover:before{
    background-image: url(data:image/svg+xml,%3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%20104%2099%22%3e%3cpath%20d%3d%22M104%2c42C104%2c18%2e7%2c80%2e6%2d%2e3%2c51%2e8%2d%2e3S%2d%2e3%2c18%2e7%2d%2e3%2c42C%2d%2e3%2c63%2c18%2e2%2c80%2e5%2c43%2e3%2c83%2e8c1%2e7%2e4%2c4%2c1%2e1%2c4%2e6%2c2%2e6a10%2e7%2c10%2e7%2c0%2c0%2c1%2c%2e2%2c4%2e7l%2d%2e7%2c4%2e5c%2d%2e2%2c1%2e3%2d1%2c5%2e2%2c4%2e5%2c2%2e8s30%2d17%2e7%2c41%2d30%2e3h0C100%2e4%2c59%2e8%2c104%2c51%2e4%2c104%2c42ZM33%2e4%2c54%2e5a1%2c1%2c0%2c0%2c1%2d1%2c1H17%2e8a1%2c1%2c0%2c0%2c1%2d%2e7%2d%2e3h0a1%2c1%2c0%2c0%2c1%2d%2e3%2d%2e7h0V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1V49%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1Zm8%2e8%2c0a1%2c1%2c0%2c0%2c1%2d1%2c1H37%2e6a1%2c1%2c0%2c0%2c1%2d1%2d1V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1Zm25%2e2%2c0a1%2c1%2c0%2c0%2c1%2d1%2c1H62%2e2l%2d%2e3%2d%2e3L51%2e5%2c41V54%2e5a1%2c1%2c0%2c0%2c1%2d1%2c1H46%2e8a1%2c1%2c0%2c0%2c1%2d1%2d1V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h4%2e5L61%2e7%2c45%2e3V31%2e8a1%2c1%2c0%2c0%2c1%2c1%2d1h3%2e7a1%2c1%2c0%2c0%2c1%2c1%2c1ZM87%2e6%2c35%2e4a1%2c1%2c0%2c0%2c1%2d1%2c1H76%2e7v3%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1V45a1%2c1%2c0%2c0%2c1%2d1%2c1H76%2e7v3%2e8h9%2e9a1%2c1%2c0%2c0%2c1%2c1%2c1v3%2e7a1%2c1%2c0%2c0%2c1%2d1%2c1H72a1%2c1%2c0%2c0%2c1%2d%2e7%2d%2e3h0a1%2c1%2c0%2c0%2c1%2d%2e3%2d%2e7h0V31%2e8h0a1%2c1%2c0%2c0%2c1%2c%2e3%2d%2e7h0a1%2c1%2c0%2c0%2c1%2c%2e7%2d%2e3H86%2e6a1%2c1%2c0%2c0%2c1%2c1%2c1Z%22%20style%3d%22fill%3a%23fff%22%2f%3e%3c%2fsvg%3e);
}