@charset "utf-8";
  .newnav{
display: flex;
justify-content: center;
margin-bottom: 50px;
}
.newnav li{
width: 190px;
}
@media screen and (max-width: 768px) {
.newnav{
flex-wrap: wrap;
}
.newnav li{
width: 30%;
}
}
.brandSiteHeader{
box-sizing: content-box;
}
.brandSiteHeader .ph-logo{
margin: 0!important;
font-size: inherit!important;
font-weight: normal!important;
position: absolute;
top: 50%;
right: 20px;
transform: translate(0,-50%);
}
.brandSiteHeader .ph-logo a{
display: block;
}
@media screen and (max-width: 640px){
.brandSiteHeader .ph-logo{
right: 0;
}
} #manga_main_ttl{
background:  url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/manga/imgs/common/manga_main.png);
background-repeat: no-repeat;
background-position: center top;
}
@media screen and (max-width: 768px) {
#manga_main_ttl{
background-size: 100% auto;
}
}
.manga_inner{
width: 1024px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
.manga_inner{
width: 95%;
margin: 0 auto;
}
}
#manga_main_ttl h1{
width: 952px;
margin: 0 auto;
padding-top: 415px;
}
@media screen and (max-width: 768px) {
#manga_main_ttl h1{
width: 95%;
margin: 0 auto;
padding-top:35%;
}
}
#manga_main_ttl .special_thanks{
width: 260px;
margin: 20px 40px 30px auto;
}
@media screen and (max-width: 768px) {
#manga_main_ttl .special_thanks{
width: 180px;
margin: 10px 0px 30px auto;
}
}
#manga_main_ttl nav{
display: flex;
justify-content: center;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
#manga_main_ttl nav{
flex-wrap: wrap;
}
#manga_main_ttl nav p{
width: 30%;
}
}
.manga_lead{
background: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/manga/imgs/common/manga_back.png) no-repeat top center;
height: 380px;
text-align: center;
}
@media screen and (max-width: 768px) {
.manga_lead{
height:auto;
padding-bottom: 10%;
}
}
.manga_lead .episode{
font-family:"メイリオ", Meiryo, "sans-serif";
font-weight: bold;
font-size: 19px;
color: #ed1e79;
position: relative;
padding-bottom: 20px;
padding-top: 55px;
margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
.manga_lead .episode{
font-size: 19px;
padding-bottom: 5%;
padding-top: 10%;
margin-bottom: 10%;
}
}
.manga_lead .episode:after{
position: absolute;
content: "";
width: 82px;
left: 50%;
margin-left: -41px;
height: 3px;
bottom: 0;
background: #000;
}
[data-ruby] {
position: relative;
}
[data-ruby]::before {
content: attr(data-ruby);
position: absolute;
top: -0.7em;
left: 0;
right: 0;
margin: auto;
font-size: 0.32em;
}
.manga_lead h3{
font-family: "Noto Serif Japanese Bold";
font-size: 54px;
letter-spacing: 1px;
}
@media screen and (max-width: 768px) {
.manga_lead h3{
font-size: 9vw;
}
#story_05 .manga_lead h3{
font-size: 9vw;
line-height: 1.2;
}
}
.manga_cont{
margin-bottom: 70px;
}
.effect{
position: absolute;
}
.brubru{
display: inline-block;
animation: hurueru .1s  infinite; 
}
@keyframes hurueru {
0% {transform: translate(0px, 0px) rotateZ(0deg)}
25% {transform: translate(2px, 2px) rotateZ(1deg)}
50% {transform: translate(0px, 2px) rotateZ(0deg)}
75% {transform: translate(2px, 0px) rotateZ(-1deg)}
100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.btn_next{
text-align: center;
margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
.btn_next{
width: 88%;
margin: 0 auto;
margin-bottom: 80px;
}
}
.btn_next p{
width: 435px;
background: #000;
margin: 0 auto;
font-family:"メイリオ", Meiryo, "sans-serif";
font-weight: bold;
font-size: 19px;
}
@media screen and (max-width: 768px) {
.btn_next p{
width: 100%;
margin: 0 auto;
}
}
.btn_next p a{
display: block;
padding: 25px;
text-decoration: none;
color: #fff;
position:relative;
}
.btn_next p a:after{
content: "";
position: absolute;
right: 25px;
top: 50%;
margin-top: -7.5px;
width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 0 7.5px 13.0px;
border-color: transparent transparent transparent #fff;
} .base_koma{
text-align: center;
position: relative;
}
#story_01 .koma_01{
width: 660px;
margin: 0 auto;
margin-top: -110px;
margin-bottom: 65px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_01{
width: 100%;
margin-top: -3%;
margin-bottom: 5%;
}
}
#story_01 .koma_02{
width: 810px;
margin: 0 auto;
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_02{
width: 90%;
margin-top: -3%;
margin-bottom: 2%;
}
}
#story_01 .koma_04{
display: flex;
justify-content: center;
padding-top: 10px;
margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_04{
margin-bottom: 2%;
}
}
#story_01 .koma_04 div:last-child{
margin-left: -60px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_04 div:last-child{
margin-left: -30px;
}
}
#story_01 .koma_05{
width: 760px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_01 .koma_05{
width: 90%;
margin-bottom: 2%;
}
}
#story_01 .koma_06{
margin-top: -30px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_06{
margin-top: -5%;
}
}
#story_01 .koma_07{
width: 902px;
margin: 0 auto;
margin-top: -25px;
margin-bottom: 95px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_07{
width: 100%;
margin-top: -2%;
margin-bottom: 2%;
}
}
#story_01 .koma_08{
width: 810px;
margin: 0 auto;
margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
#story_01 .koma_08{
width: 90%;
margin-bottom: 2%;
}
}
#story_01 .koma_09{
width: 810px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_01 .koma_09{
width: 90%;
margin-bottom: 2%;
}
}
.kouka01_01{
right: 20px;
top: 172px;
}
@media screen and (max-width: 768px) {
.kouka01_01{
width: 8%;
right: 2.5%;
top:0;
padding-top: 26%;
}
}
.kouka01_02{
left: -100px;
top: -60px;
}
.kouka01_03{
left: -00px;
top: -00px;
}
@media screen and (max-width: 768px) {
.kouka01_02{
width: 30%;
left:22%;
top:0;
padding-top: 0%;
}
.kouka01_03{
width: 5%;
left:35%;
top:0;
padding-top: 7%;
}
}
.kouka01_04{
right: -70px;
bottom: -40px;
}
.kouka01_05{
right: -35px;
bottom: -10px;
}
@media screen and (max-width: 768px) {
.kouka01_04{
width: 45%;
right:2%;
bottom: 0px;
padding-top: 0%;
}
.kouka01_05{
width:25%;
right:8%;
bottom: 8%;
padding-top: 0;
}
}
.kouka01_06{
right: -60px;
bottom:35px;
}
@media screen and (max-width: 768px) {
.kouka01_06{
width: 20%;
right:2%;
bottom: 8%;
padding-top: 0%;
}
}
.kouka01_07{
left: -80px;
bottom: 40px;
}
.kouka01_08{
left: -10px;
bottom:90px;
}
@media screen and (max-width: 768px) {
.kouka01_07{
width: 30%;
left:0%;
bottom: 3%;
padding-top: 0%;
}
.kouka01_08{
width: 18%;
left:8%;
bottom: 10%;
padding-top: 0%;
}
}
.kouka01_09{
right: -100px;
bottom: -15px;
}
.kouka01_10{
right: -30px;
bottom:50px;
}
@media screen and (max-width: 768px) {
.kouka01_09{
width: 50%;
right:-5%;
bottom: -10%;
padding-top: 0%;
}
.kouka01_10{
width: 30%;
right:2%;
bottom: 8%;
padding-top: 0%;
}
}
.kouka01_11{
right: 25px;
top:30px;
}
.kouka01_12{
left: 25px;
bottom:30px;
}
@media screen and (max-width: 768px) {
.kouka01_11{
width: 7%;
right:4%;
top: 5%;
padding-top: 0%;
}
.kouka01_12{
width: 16%;
right:2%;
bottom:5%;
padding-top: 0%;
}
} #story_02 .koma_01{
width: 660px;
margin: 0 auto;
margin-top: -110px;
margin-bottom: 65px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_01{
width: 95%;
margin-top: -3%;
margin-bottom: 5%;
}
}
#story_02 .koma_02{
width: 810px;
margin: 0 auto;
margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_02{
width: 95%;
margin-top: -3%;
margin-bottom: 2%;
}
#story_02 .koma_03{
width: 95%;
}
}
#story_02 .koma_04{
width: 810px;
margin: 0 auto;
margin-top: -40px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_04{
width:95%;
margin-top:-3%;
margin-bottom: 2%;
}
}
#story_02 .koma_05{
width: 760px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_02 .koma_05{
width: 95%;
margin-bottom: 2%;
}
}
#story_02 .koma_06{
margin-top: -50px;
margin-bottom: -100px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_06{
width: 95%;
margin-top: -2%;
margin-bottom: 0px;
}
}
#story_02 .koma_07{
width: 902px;
margin: 0 auto;
margin-top: -25px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_07{
width: 95%;
margin-top: -12%;
margin-bottom: 3%;
}
}
#story_02 .koma_08{
width: 810px;
margin: 0 auto;
margin-top: 10px;
margin-bottom: 35px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_08{
width: 86%;
margin-bottom: 0%;
}
}
#story_02 .koma_09{
width: 891px;
margin: 0 auto;
margin-top: 70px;
}
@media screen and (max-width: 768px) {
#story_02 .koma_09{
width: 90%;
margin-top: 4%;
margin-bottom:0%;
}
#story_02 .koma_10{
width: 95%;
}
}
.kouka02_01{
right: -120px;
top:-30px;
}
@media screen and (max-width: 768px) {
.kouka02_01{
width: 22%;
right: 0%;
top:-3%;
}
}
.kouka02_02{
left: -100px;
top:-20px;
}
@media screen and (max-width: 768px) {
.kouka02_02{
width: 28%;
left: -8%;
top:-4%;
padding-top: 0%;
}
}
.kouka02_03{
left: -50px;
top:20px;
}
@media screen and (max-width: 768px) {
.kouka02_03{
width: 20%;
left: -2.5%;
top:0;
}
}
.kouka02_04{
right: -80px;
top:-15px;
}
@media screen and (max-width: 768px) {
.kouka02_04{
width: 69%;
right: -8%;
bottom:0;
padding-top: 3%;
}
}
.kouka02_05{
right: 30px;
top:150px;
}
@media screen and (max-width: 768px) {
.kouka02_05{
width: 15%;
right: 4.5%;
top:0px;
padding-top: 19%;
}
}
.kouka02_06{
right: 160px;
top:170px;
}
@media screen and (max-width: 768px) {
.kouka02_06{
width: 22%;
right: 19%;
top:0px;
padding-top: 19%;
}
} #story_03 .koma_01{
width: 660px;
margin: 0 auto;
margin-top: -110px;
margin-bottom: 65px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_01{
width:95%;
margin-top: -3%;
margin-bottom: 5%;
}
}
#story_03 .koma_02{
display: flex;
width: 880px;
align-items: center;
margin: 0 auto;
}
#story_03 .koma_02 div:first-child{
margin-top: 105px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_02{
display: block;
width: 95%;
margin-top: -3%;
margin-bottom: 2%;
}
#story_03 .koma_02 div:first-child{
margin-top: 3%;
margin-bottom: 2%;
}
}
#story_03 .koma_03{
width: 790px;
align-items: center;
margin: 0 auto;
margin-top: -30px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_03{
width: 95%;
margin-top: -3%;
margin-bottom: 2%;
}
}
#story_03 .koma_04{
width: 880px;
display: flex;
flex-wrap: wrap;
justify-content:center;
margin: 0 auto;
margin-top: 45px;
}
#story_03 .koma_04 div:first-child{
margin-right: 20%;
}
#story_03 .koma_04 div:last-child{
margin-left: 20%;
margin-top: -25px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_04{
width: 95%;
margin-top: -2%;
margin-bottom: 2%;
}
#story_03 .koma_04 div:first-child{
margin-right: 10%;
}
#story_03 .koma_04 div:last-child{
margin-left: 10%;
margin-top: -2%;
}
}
#story_03 .koma_05{
width: 851px;
margin: 0 auto;
margin-top: -55px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_05{
width: 95%;
margin-top: -8%;
}
}
#story_03 .koma_06{
width: 853px;
margin: 0 auto;
margin-top: -20px;
}
@media screen and (max-width: 768px) {
#story_03 .koma_06{
width: 95%;
margin-top: -2%;
}
}
#story_03 .koma_07{
width: 950px;
margin: 0 auto;
margin-top: 85px;
}
.imgs_auto_01{
width: 823px;
text-align: left;
}
@media screen and (max-width: 768px) {
#story_03 .koma_07{
width: 95%;
margin-top: 2%;
margin-bottom: 2%;
}
.imgs_auto_01{
width: 94%;
}
}
#story_03 .koma_08{
width: 950px;
margin: 0 auto;
margin-top: -50px;
display: flex;
justify-content: flex-end;
}
@media screen and (max-width: 768px) {
#story_03 .koma_08{
width: 95%;
margin-top: -7%;
margin-bottom: 0%;
}
}
#story_03 .koma_09{
width: 810px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_03 .koma_09{
width: 95%;
margin-top: -2%;
margin-bottom: 2%;
}
}
.kouka03_01{
right: 10px;
top:-30px;
}
@media screen and (max-width: 768px) {
.kouka03_01{
width: 30%;
right: 2.5%;
top:-3%;
}
}
.kouka03_02{
right: 70px;
top:20px;
}
@media screen and (max-width: 768px) {
.kouka03_02{
width:10%;
right: 12%;
top:7%;
}
}
.kouka03_03{
right: -50px;
top:-50px;
}
@media screen and (max-width: 768px) {
.kouka03_03{
width: 30%;
right: 0%;
top:-15%;
}
}
.kouka03_04{
right: 20px;
top:30px;
}
@media screen and (max-width: 768px) {
.kouka03_04{
width:8%;
right: 10%;
top:10%;
}
}
.kouka03_05{
right: 70px;
top:-65px;
}
@media screen and (max-width: 768px) {
.kouka03_05{
width: 52%;
right: -2%;
top:-10%;
}
}
.kouka03_06{
right: 150px;
top:90px;
}
@media screen and (max-width: 768px) {
.kouka03_06{
width: 25%;
right: 8%;
top:13%;
}
}
.kouka03_07{
left: -20px;
top:60px;
}
@media screen and (max-width: 768px) {
.kouka03_07{
width:30%;
left: 2.5%;
top:25%;
}
} #story_04 .koma_01{
width: 585px;
margin: 0 auto;
margin-top: -110px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_01{
width: 95%;
margin-top: -3%;
}
}
#story_04 .koma_02{
width: 740px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_04 .koma_02{
width: 95%;
margin-top: -3%;
}
}
#story_04 .koma_03{
width: 660px;
align-items: center;
margin: 0 auto;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_03{
width: 95%;
margin-top: 2%;
}
}
#story_04 .koma_04{
width: 620px;
margin: 0 auto;
margin-top: -55px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_04{
width: 95%;
margin-top: -8%;
}
}
#story_04 .koma_05{
width: 670px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_04 .koma_05{
width: 95%;
margin-top: -3%;
margin-bottom: 2%;
}
}
#story_04 .koma_06{
width: 635px;
margin: 0 auto;
margin-top: 5px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_06{
width: 95%;
margin-top: -1%;
}
}
#story_04 .koma_07{
width: 640px;
margin: 0 auto;
margin-top:-35px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_07{
width: 95%;
margin-top: -3%;
}
}
#story_04 .koma_08{
width: 920px;
margin: 0 auto;
margin-top: 30px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_08{
width: 100%;
margin-top: -2%;
}
}
#story_04 .koma_09{
width: 890px;
margin: 0 auto;
display: flex;
justify-content: flex-end;
margin-top:-50px;
}
@media screen and (max-width: 768px) {
#story_04 .koma_09{
width: 95%;
margin-top: -3%;
}
#story_04 .koma_10{
width: 95%;
margin: 0 auto;
}
}
.kouka04_01{
right: 100px;
top:10px;
}
@media screen and (max-width: 768px) {
.kouka04_01{
width:22%;
right: 15%;
top:0;
padding-top: 0%;
}
}
.kouka04_02{
right: 120px;
top:25px;
}
@media screen and (max-width: 768px) {
.kouka04_02{
width:15%;
right: 18%;
top:0;
padding-top: 2%;
}
}
.kouka04_03{
right: -25px;
top:25px;
}
@media screen and (max-width: 768px) {
.kouka04_03{
width:40%;
right: -1%;
top:10%;
}
}
.kouka04_04{
left:-20px;
top:-70px;
}
@media screen and (max-width: 768px) {
.kouka04_04{
width:24%;
left: 2.5%;
top:-0%;
}
}
.kouka04_05{
left:30px;
top:0px;
}
@media screen and (max-width: 768px) {
.kouka04_05{
width:12%;
left: 8%;
top:18%;
}
} #story_05 .koma_01{
width: 585px;
margin: 0 auto;
margin-top: -110px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_01{
width: 95%;
margin-top: -3%;
}
}
#story_05 .koma_02{
width: 585px;
margin: 0 auto;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_02{
width: 90%;
margin-top: 2%;
}
}
#story_05 .koma_03{
width: 700px;
align-items: center;
margin: 0 auto;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_03{
width: 95%;
margin-top: 2%;
}
}
#story_05 .koma_04{
width: 860px;
display: flex;
justify-content: flex-end;
margin: 0 auto;
margin-top: 15px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_04{
width: 85%;
display: block;
margin-top: 2%;
}
}
#story_05 .koma_05{
width: 860px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
margin-top: -15px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_05{
width: 90%;
display: block;
margin-top: -4%;
}
}
#story_05 .koma_06{
width: 865px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
margin-top: -40px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_06{
width: 90%;
display: block;
margin-top: -4%;
}
}
#story_05 .koma_07{
width: 810px;
margin: 0 auto;
margin-top:-35px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_07{
width: 95%;
margin-top: -2%;
}
}
#story_05 .koma_08{
width: 810px;
display: flex;
justify-content: flex-end;
margin: 0 auto;
margin-top: -105px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_08{
width: 95%;
margin-top: -10%;
}
}
#story_05 .koma_09{
width: 740px;
margin: 0 auto;
}
@media screen and (max-width: 768px) {
#story_05 .koma_09{
width: 95%;
margin-top: -9%;
}
}
#story_05 .koma_10{
width: 890px;
display: flex;
justify-content: flex-start;
margin: 0 auto;
margin-top: 20px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_10{
width: 95%;
margin-top: 2%;
}
}
#story_05 .koma_11{
width: 925px;
margin: 0 auto;
margin-top: -40px;
}
@media screen and (max-width: 768px) {
#story_05 .koma_11{
width: 95%;
margin-top: -2%;
}
}
.kouka05_01{
left:-100px;
top:-125px;
}
@media screen and (max-width: 768px) {
.kouka05_01{
width:40%;
left: -2%;
top:-4%;
}
}
.kouka05_02{
left:-0px;
top:-30px;
}
@media screen and (max-width: 768px) {
.kouka05_02{
width:24%;
left: 8%;
top:9%;
}
}
.kouka05_03{
right:35px;
top:40px;
}
@media screen and (max-width: 768px) {
.kouka05_03{
width: 30%;
right: 5%;
top:6%;
}
}
.kouka05_04{
right:-30px;
top:-0px;
}
@media screen and (max-width: 768px) {
.kouka05_04{
width: 35%;
right: -4%;
top:6%;
}
}
.kouka05_05{
right:50px;
top:60px;
}
@media screen and (max-width: 768px) {
.kouka05_05{
width: 12%;
right: 8%;
top:22%;
}
}
.kouka05_06{
left:15px;
top:20px;
}
@media screen and (max-width: 768px) {
.kouka05_06{
width: 34%;
left: 2.5%;
top:5%;
}
}
.kouka05_07{
left:100px;
top:140px;
}
@media screen and (max-width: 768px) {
.kouka05_07{
width: 15%;
left: 13%;
top:24%;
}
}
.kouka05_08{
right:75px;
bottom:190px;
}
@media screen and (max-width: 768px) {
.kouka05_08{
width: 8%;
right: 8%;
bottom: 10%;
}
}
.kouka05_09{
left:120px;
bottom:40px;
}
@media screen and (max-width: 768px) {
.kouka05_09{
width: 12%;
left: 13%;
bottom: 10%;
}
}