@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* CSS Document */


body, h1, h2, h3, h4, div, ul, li, dl, dt, dd, img, a, p, span, section, nav, header, article, section, figure {
	margin:0;
	padding:0;
	box-sizing: border-box;
}

ul, li { list-style-type:none;}


body {
	font-family: 'Noto Sans Japanese', sans-serif, Meiryo, メイリオ, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size:14px;
    font-weight: 300;
	color:#000;
    line-height:2em;
    letter-spacing: .03em;
    min-width: 1000px;
}
@media screen and (max-width:750px){
	body {
	font-size:13px;
        font-weight: 400;
        line-height: 1.8em;
        letter-spacing: .01em;
        min-width: initial;
	}
}



/* ========================
   common - 404
==========================*/
@media screen and (min-width:751px){
    .error404 {
    padding-top: 130px;
    }
}
@media screen and (max-width:750px){
    .error404 {
    padding-top: 26%;
    }
}

/* ========================
   common - 画像切替
==========================*/
@media screen and (min-width:751px){
.pcOnly{
    display:block;
    margin: 0 auto;
}
.spOnly {
    display: none;
}
}
@media screen and (max-width:750px){
.pcOnly{
    display:none;
}
.spOnly {
    display: block;
}
}


/* ========================
   common - aまわり
==========================*/
a {
    text-decoration:none;
    color:#000;
}
a:visited {
    text-decoration:none;
    color:#000;
}
a:hover {
	opacity: 0.6 ;
    transition: .25s;
}
.navLeft a,
.navLeft a span,
.newpost a span,
footer a,
footer a span,
.archive .category dd a,
.archive .category dd a span{
  display: inline-block;
}
.navLeft a span,
.newpost a span,
footer a span,
.archive .category dd a span{
  transition: .5s;
}
.navLeft a:hover span,
.newpost a:hover span,
footer a:hover span,
.archive .category dd a:hover span{
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}


.imgLink:hover img {
	transform:translateY(-15px);
	transition: all .3s ease-out;
}

a img:hover {
	opacity: 0.6 ;
    transition: .25s;
}


.stdBtn {
    line-height: 1em;
    position: relative;
    display: block;
    margin:0 auto;
    padding: 25px 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    border-bottom:3px solid #c2da69;
}
.stdBtn img {
    position: absolute;
    top:28px;
    right:15px;
}
@media screen and (min-width:751px){
    .stdBtn {
    width: 320px;
    }
}
@media screen and (max-width:750px){
    .stdBtn {
    width: 300px;
    }
}


/* ========================
   common - header
==========================*/

header {
	position:relative;
}

@media screen and (min-width:751px){
    .subpage header {
        padding:19px 0;
        border-bottom:5px solid #000;
    }
}
@media screen and (max-width:750px){
    .subpage header {
        padding:5% 0 7% 0;
        border-bottom:4px solid #000;
    }
}


/* ========================
   common - 下層MV
==========================*/
.sub-mv {
    line-height: 0;
}
.sub-mv img {
    width:100%;
    height: auto;
}

@media screen and (min-width:751px){
    .sub-mv {
    border-bottom:5px solid #000;
    margin-bottom: 130px;
    }
}
@media screen and (max-width:750px){
    .sub-mv {
    border-bottom:4px solid #000;
    margin-bottom: 26%;
    }
    
}

/* ========================
   common - content
==========================*/
.content,
.content-660,
.content-archive {
    margin:0 auto;
    text-align: center;
}
@media screen and (min-width:751px){
    .content {
        width:830px;
    }
    .content-660 {
        width:660px;
    }
    .content-archive {
        width:1000px;
    }
}
@media screen and (max-width:750px){
    .content,
    .content-660{
        width:80%;
    }
    .content-archive {
        width:80%;
    }
}


/* ========================
   common - hまわり
==========================*/
.sub-logo {
    position: static;
    text-align: center;
}
h2 {
    margin-bottom:80px;
}
h2 img {
    width: 100%;
    height: auto;
    margin:0 auto;
}
@media screen and (min-width:751px){
    .sub-logo img {
        width:320px;
        height: auto;
        margin:0 auto;
    }
    footer h2 img {
        width:160px;
        height: auto;
        margin-bottom:-20px;
    }
    
}
@media screen and (max-width:750px){
    
    .sub-logo img {
        width:58%;
        height: auto;
        margin:0 auto;
        padding-top:1%;
    }
    h2 {
        margin-bottom:10%;
    }
    h2 img {
        width:100%;
        height: auto;
        margin: 0 auto;
    }
    /*h2 img {width:52%; height: auto}*/
    footer h2 img {width:52%; height: auto;
    padding:0;
    margin:0;}
}


/* ========================
   common - アニメーション
==========================*/
.anime-position {
    position: relative;
    margin:0 auto;
}
.animation {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
     margin:0 auto;
    z-index:-2;
}
.animation p {
    position:absolute;
    display: inline;
    
}
.animation p img {
}

@media screen and (min-width:1200px){
    .anime-position {
    width:1200px;
    }
    .animation p img {
    width:75px;
    height: auto;
    
    }
    .anime01{
    top:15%;
    left:3%;
    }
    .anime02{
    top:15%;
    right:3%;
    }
    .anime03{
    top:45%;
    left:0;
    }
    .anime04{
    top:45%;
    right:0;
    }
    .anime05{
    top:70%;
    left:3%;
    }
    .anime06{
    top:70%;
    right:3%;
    }
    .anime07{
    top:95%;
    left:0;
    }
    .anime08{
    top:95%;
    right:0;
    }
    
    .point-anime {
    margin:140px 0;
    text-align: center;
    }
    .point-anime .book_pc {
        width:93px;
        height:74px;
    }
    .point-anime .pen_pc {
        width:93px;
        height:83px;
    }
}

@media screen and (max-width:1199px){
    .anime-position {
    width:1000px;
    }
    .animation p img {
    width:68px;
    height: auto;
    
    }
    .anime01{
    top:15%;
    left:4%;
    }
    .anime02{
    top:15%;
    right:4%;
    }
    .anime03{
    top:45%;
    left:4%;
    }
    .anime04{
    top:45%;
    right:4%;
    }
    .anime05{
    top:70%;
    left:4%;
    }
    .anime06{
    top:70%;
    right:4%;
    }
    .anime07{
    top:95%;
    left:4%;
    }
    .anime08{
    top:95%;
    right:4%;
    }
    
    .point-anime {
    margin:140px 0;
    text-align: center;
    }
    .point-anime .book_pc {
        width:93px;
        height:74px;
    }
    .point-anime .pen_pc {
        width:93px;
        height:83px;
    }
}
@media screen and (max-width:750px){
    .anime-position {
    width:100%;
    }
    .animation p {
        text-align: center;
    }
    .animation p img {
    width:100%;
        height: auto;
    
    }
    .anime01{
    top: 21%;
    left: 4%;
    width: 11%;
    height: auto;
    }
    .anime02{
    top:21%;
    right:4%;
    width: 11%;
    height: auto;
    }
    .anime03{
    top:41%;
    left: 4%;
    width: 11%;
    height: auto;
    }
    .anime04{
    top:41%;
    right:4%;
    width: 11%;
    height: auto;
    }
    .anime05{
    top:61%;
    left: 4%;
    width: 11%;
    height: auto;
    }
    .anime06{
    top:61%;
    right:4%;
    width: 11%;
    height: auto;
    }
    .anime07{
    top:80%;
    left: 4%;
    width: 11%;
    height: auto;
    }
    .anime08{
    top:80%;
    right:4%;
    width: 11%;
    height: auto;
    }
    .point-anime {
    margin:22% 0;
    text-align: center;
       
}
    .point-anime img {
        width:18%!important;
        height:auto!important;
        margin:0 auto;
    }
}


/* ========================
   common - footer
==========================*/
footer {
    clear:both;
    margin:0 auto;
}
.footer-border {
    clear:both;
    background: url(/img/common/footer-gray-bar.png) repeat;
    height:10px;
    background-size:contain;
}
footer .footerBox-copy {
    text-align:center;
}
footer .footerBox-main a {
    display: block;
    color:#000;
    position:relative;
}
footer .footerBox-main a img,
    footer .footerBox-main a span {
        vertical-align: middle;
    }
footer .footerBox-main a:visited {
    color:#000;
}
footer .footerBox-main dt a {
    font-weight: 500;
}
footer dt .footer-arrow {
    text-align:right;
    position: absolute;
    right:1%;
    top:35%;
}
footer .footerBox-main dd {
    margin-left: 30px;
    /*font-weight: 400;*/
}
footer .footer-border-g {
    background: url(/img/common/footer-green-bar.png) repeat;
    height:10px;
    background-size:contain;
}
footer .footerBox-copy .copy {
    text-align: center;
    font-weight: normal;
}


@media screen and (min-width:751px){
    footer {
        width:1000px;
    }
    .footer-border {
        margin-top:160px;
        margin-bottom: 100px;
    }
    footer .footerBox-main {
        float: left;
        overflow:hidden;
        margin-bottom: 70px;
    }
    footer .footerBox-copy {
        width:150px;
        margin-left:190px;
        float: left;
    }

    footer .footerBox-left,
    footer .footerBox-right {
        width:295px;
        float:left;
    }
    footer .footerBox-left {
        margin-right:70px;
    }
    footer .footerBox-main dt {
        width:295px;
    }
    footer .footerBox-main dt a {
        font-size: 16px;
        line-height: 2.5em;   
    }
    footer .footerBox-main dd {
        font-size: 13px;
        line-height: 2.3em;
    }
    footer .footer-border-g {
    width:295px;
    margin: 30px 0;
}
    footer .footerBox-copy .copy {
        font-size:12px;
    }
    footer .footerBox-copy .copy img {
        width:150px;
        height:auto;
        margin-bottom: 10px;
    }
}

@media screen and (max-width:750px){
    footer {
        width:60%;
        margin: 0 auto;
    }
    .footer-border {
        margin-top:25%;
        margin-bottom: 15%;
    }
    footer .footerBox-main {
        margin-bottom: 25%;
    }
    footer .footerBox-copy {
        width:100%;
        margin:0 auto;
    }
    footer .footerBox-left,
    footer .footerBox-right {
        width:100%;
    }
    footer .footerBox-main dt a {
        font-size: 13px;
        line-height: 2.3em;
    }
    
    footer .footerBox-main dd {
        font-size: 12px;
        line-height: 2em;
    }
    footer .footer-border-g {
        width:100%;
        margin: 6% 0;
    }
    footer .footerBox-copy {
        margin-bottom: 25%;
    }
    footer .footerBox-copy .copy {
        font-size:11px;
    }
    footer .footerBox-copy .copy img {
        width:132px;
        height: auto;
        margin:0 auto;
        margin-bottom: 3%;
    }
    
}



/* ========================
   common - 記事のグレーボックス
==========================*/
.gBox {
    background:#f5f5f5;
}

@media screen and (min-width:751px){
    .gBox {
    padding:4% 5% 5% 5%
        ;
    margin-top:7%;
    }   
    .midashi {
    margin:6% 0 3% 0;
    font-weight: 600;
    font-size:17px;
    border-bottom:3px solid #eee;
    padding-bottom:2%;
    }
    .gBox > .midashi {
    margin:0 0 3% 0;
    border-bottom:3px solid #fff;
    padding-bottom:2%;
    }
}

@media screen and (max-width:750px){
    .gBox {
    padding:5% 6%;
    margin-top:15%;
    }   
    .midashi {
    margin:15% 0 6.5% 0;
    font-weight: 600;
    font-size:16px;
        border-bottom:3px solid #eee;
    padding-bottom:3%;
    line-height:1.8em!important;
    }
    .gBox > .midashi {
    margin:0 0 6.5% 0;
        border-bottom:3px solid #fff;
    padding-bottom:3%;
    }
    #entertainment .midashi {
        line-height:1.8em;
    }
}



/* ========================
   common - 記事の画像サイズ
==========================*/
@media screen and (min-width:751px){
.wp-block-image img {
    width:660px;
    height:auto;
    margin-bottom:25px;
    }
}
@media screen and (max-width:750px){
.wp-block-image img {
    width:100%;
    height:auto;
    margin-bottom:5%;
    }
}