@charset "utf-8";

@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
@import url(//use.fontawesome.com/releases/v5.0.6/css/all.css);

/*
	font-family:"FontAwesome";
	font-family:"Font Awesome 5 Free";
*/


/*========================================
 Base
========================================*/
html {font-size:62.5%;}
body {font-size:1.2rem;}

body {background:url("../images/bg_pattern.png") center top no-repeat fixed #041d32;}
#container{
    font-family:"Sawarabi Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
    color:#fff;
    line-height:1.6;
}
.ColorRed {color:#bf3874;}


/* PC */
@media screen and (min-width: 641px) {
body {font-size:1.4rem;}
.spOnly {display:none;}

main{
	width:1080px;
	margin:0 auto;
	padding-bottom:50px;
}


/* header */
header{
    position:relative;
    background:url(../images/header.png) left top no-repeat;
    min-height:600px;
}
header h1{
    position:absolute;
    top:40px;
    right:113px;
    width:280px;
    height:213px;
}
header #hTxt{
    position:absolute;
    top:254px;
    right:20px;
    width:465px;
    height:208px;
}


/* nav */
nav ul{
    position:absolute;
    top:520px;
    left:0;
    display:flex;
    background:url("../images/nav_bg.png") center top no-repeat;
    width:1080px;
    height:112px;
    padding-top:20px;
}
nav li{
    width:calc(100% / 3 - 10px);
    font-size:3rem;
    text-align:center;
    list-style:none;
}
nav li a{
    color:#fff;
    text-decoration:none;
    transition:0.5s;
}

nav li a:hover {color:#7b734c;}


/* インフォメーション */
#Infomation{
    width:900px;
    margin:30px auto;
    font-size:2.2rem;
    line-height:1.6;
    text-align:center;
}
.Box{
    position:relative;
    margin:2em 0;
    padding:0.5em 1.5em;
    border-top:2px solid #7b734c;
    border-bottom:2px solid #7b734c;
}
.Box::before, .Box::after{
    content:"";
    position:absolute;
    top:-10px;
    background:#7b734c;
    width:2px;
    height:calc(100% + 20px);
}
.Box::before {left:10px;}
.Box::after {right:10px;}
.Box p{
    margin:0 ;
    padding:0;
}
.Box p img {width:100%;}


/* アコーディオン */
.projectNo, .ComingSoon{
    width:1000px;
	margin:0 auto 40px;
	padding-top:20px;
}
.projectNo dt, .ComingSoon dt{
	position:relative;
    background:#1a3d6a;
	margin-bottom:16px;
	padding:8px 0;
    font-size:3rem;
	font-weight:bold;
	color:#fff;
	line-height:1.2;
	text-indent:0.8em;
}
.projectNo dt span, .ComingSoon dt span{
    font-size:3.6rem;
    color:#f2d284;
}
.ComingSoon dt span {margin-right:10px;}
.projectNo dt::after{
	font-family:"Font Awesome 5 Free";
    content:"\f103";
    position:absolute;
    top:12px;
    right:10px;
}
.projectNo dd{
    width:960px;
	margin:0 auto;
	font-size:1.6rem;
	color:#fff;
    border-bottom:1px dashed #7b734c;
}
.projectNo dd p {margin-bottom:0.6em;}
.projectNo dd a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    display:inline-block;
    padding:1px 0.6em 1px 0;
    color:#fff;
    line-height:1;
    text-decoration:none;
}
.projectNo dd a:hover{
    background:linear-gradient(transparent 80%, #7b734c 80%);
}
.projectNo dd a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.4rem;
}
.Attention{
    width:1000px;
    margin:0 auto 60px;
    color:#fff;
}


/* 通販ボタン */
#OnlineShop{
    padding:20px 0;
    font-size:2.6rem;
    text-align:center;
}
#OnlineShop a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    padding:6px 1em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
#OnlineShop a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.7rem;
}

#OnlineShop a:hover {background:linear-gradient(transparent 80%, #7b734c 80%);}


/* 最新巻 */
#New .Box{
    position:relative;
    width:500px;
    /*min-height:200px;*/
    margin:50px auto 0;
    padding:1em 3em 1.4em;
    font-size:1.7rem;
}
#New .BookTit{
    margin-bottom:6px;
    font-size:2rem;
}
#New .BookInfo {margin:0 0 1em 1em;}
#New a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    padding:6px 1em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
#New a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.7rem;
}

#New a:hover {background:linear-gradient(transparent 80%, #7b734c 80%);}
#New .BookImg{
    /*background:#1a3d6a;*/
    position:absolute;
    top:1em;
    right:26px;
    width:150px;
    /*height:200px;*/
    text-align:center;
}
#New .BookImg img{
    max-width:100%;
    max-height:100%;
}
#New .absBnr{
    width:300px;
    margin:30px auto;
}
#New .absBnr img {width:100%;}
#New .absBnr a{
    background:none;
    padding:0;
}
#New .absBnr a::before {display:none;}
#New .absBnr a:hover img {opacity:0.7;}


/* 黒新聞 */
#p12 dd .newspaperBox{
    display:flex;
    flex-wrap:wrap;
    margin-bottom:20px;
}
#p12 dd .newspaperBox li{
    width:calc(100% / 4 - 10px);
    margin:0 5px;
    text-align:center;
    list-style:none;
}
#p12 dd .newspaperBox li img {width:100%;}
#p12 dd .newspaperBox a {background:none;}
#p12 dd .newspaperBox li a:hover img {opacity:0.7;}
#p12 dd .newspaperBox a::before{
    content:"";
    padding-right:0;
}


/* footer */
.copyright{
    margin-bottom:30px;
    color:#fff;
    text-align:center;
}

}


/* 最初から閉じてる */
#p01 dd, #p02 dd, #p03 dd, #p04 dd, #p05 dd, #p06 dd, #p07 dd, #p08 dd {display:none;}
.pdr10 {padding-right:10px !important;}



/* スマホ */
@media screen and (max-width: 640px) {
#container {fonr-aiw:1.3rem;}
.pcOnly {display:none;}


/* header */
header h1 img{
    width:100%;
    vertical-align:bottom;
}
header #hTxt {display:none;}


/* nav */
nav{
    position:relative;
    margin-bottom:20px;
}
nav::before{
    content:url("../images/sp_ramp2.png");
    position:absolute;
    top:4px;
    left:4px;
}
nav::after{
    content:url("../images/sp_ramp.png");
    position:absolute;
    top:4px;
    right:4px;
}
nav ul{
    overflow:hidden;
    width:98%;
    margin:0 auto;
    padding-top:20px;
    border-top:1px solid #7b734c;
    border-bottom:1px solid #7b734c;
}
nav li{
    width:80%;
    margin:0 auto;
    padding-bottom:6px;
    font-size:1.4rem;
    text-align:center;
    list-style:none;
}
nav li a{
    display:inline-block;
    width:70%;
    color:#fff;
    text-decoration:none;
}
nav li::before{
    position:relative;
    content:"◆";
    margin-right:1em;
    font-size:0.8rem;
    z-index:10;
}
nav li::after{
    position:relative;
    content:"◆";
    margin-left:1em;
    font-size:0.8rem;
    z-index:10;
}


/* インフォメーション */
#Infomation{
    width:92%;
    margin:14px auto;
    font-size:1.3rem;
    line-height:1.6;
}
.Box{
    position:relative;
    margin:2em 0;
    padding:0.5em 1.5em;
    border-top:2px solid #7b734c;
    border-bottom:2px solid #7b734c;
}
.Box::before, .Box::after{
    content:"";
    position:absolute;
    top:-10px;
    background:#7b734c;
    width:2px;
    height:calc(100% + 20px);
}
.Box::before {left:10px;}
.Box::after {right:10px;}
.Box p{
    margin:0 ;
    padding:0;
}
.Box p img {width:100%;}


/* アコーディオン */
.projectNo, .ComingSoon{
    width:94%;
	margin:0 auto 40px;
	padding-top:20px;
}
.projectNo dt, .ComingSoon dt{
	position:relative;
    background:#1a3d6a;
	margin-bottom:16px;
	padding:8px 2em 8px 0;
    font-size:1.4rem;
	font-weight:bold;
	color:#fff;
    text-align:center;
	line-height:1.4;
	text-indent:0.8em;
}
.projectNo dt span, .ComingSoon dt span{
    font-size:1.4rem;
    color:#f2d284;
}
.ComingSoon dt span {margin-right:10px;}
.projectNo dt::after{
	font-family:"Font Awesome 5 Free";
    content:"\f103";
    position:absolute;
    top:12px;
    right:10px;
}
.projectNo dd{
    width:100%;
	margin:0;
	color:#fff;
    border-bottom:1px dashed #7b734c;
}
.projectNo dd p {margin-bottom:0.6em;}
.projectNo dd a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    display:inline-block;
    padding:1px 0.6em 1px 0;
    color:#fff;
    line-height:1;
    text-decoration:none;
}
.projectNo dd a:hover{
    background:linear-gradient(transparent 80%, #7b734c 80%);
}
.projectNo dd a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.4rem;
}
.Attention{
    width:94%;
    margin:0 auto 20px;
    color:#fff;
}


/* 通販ボタン */
#OnlineShop{
    padding:20px 0;
    font-size:1.5rem;
    text-align:center;
}
#OnlineShop a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    padding:6px 1em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
#OnlineShop a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.7rem;
}


/* 最新巻 */
#New .Box{
    position:relative;
    width:70%;
    margin:30px auto;
    padding:1em 3em 1.4em;
    font-size:1.3rem;
    text-align:center;
}
#New .BookTit{
    margin-bottom:6px;
    font-size:1.6rem;
}
#New .BookInfo{
    margin:0 0 1em 1em;
    font-size:1.4rem;
}
#New a{
    background:linear-gradient(transparent 80%, #145f40 80%);
    padding:6px 1em;
    font-weight:bold;
    color:#fff;
    text-decoration:none;
}
#New a::before{
	font-family:"Font Awesome 5 Free";
    content:"\f152";
    font-weight:bold !important;
    padding-right:0.7rem;
}
#New .BookImg{
    /*background:#1a3d6a;*/
    width:150px;
    /*height:200px;*/
    margin:0 auto 1em;
    text-align:center;
}
#New .BookImg img{
    width:100%;
    /*height:100%;*/
}
#New .absBnr{
    width:80%;
    margin:20px auto;
}
#New .absBnr img {width:100%;}
#New .absBnr a{
    background:none;
    padding:0;
}
#New .absBnr a::before {display:none;}


/* 黒新聞 */
#p12 dd .newspaperBox{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:20px;
}
#p12 dd .newspaperBox li{
   /* width:calc(100% / 3 - 10px);
    margin:0 5px;
    width:60%;*/
    width:calc(100% / 4);
    margin:0 auto;
    text-align:center;
    list-style:none;
}
#p12 dd .newspaperBox li img {width:100%;}
#p12 dd .newspaperBox a {background:none;}
#p12 dd .newspaperBox li a:hover img {opacity:0.7;}
#p12 dd .newspaperBox a::before{
    content:"";
    padding-right:0;
}


/* footer */
.copyright{
    margin-bottom:30px;
    color:#fff;
    text-align:center;
}


}