@charset "UTF-8";

.top-img{
    width: 100%;
}

.boshu{
    text-align: center;
    padding-bottom: 50px;
}

h1{
    font-size: 36px;
    margin-top: 48px;
}

.fuyou{
    font-size: 24px;
    font-weight: bold;
}

.boshup{
    font-weight: bold;
    font-size: 24px;
    text-decoration: underline;
    text-decoration-color: #5C7CB0;
    margin: 0 auto;
    line-height: 48px;
}

@media screen and (max-width: 768px){    
    h1{
       font-size: 16px;
    }
   }


/*着色イメージセクション*/

.coloring-image{
    text-align: center;
    background-color: #efffe8;
    padding: 10px 0 10px 0;
}

.yajirushi{
    margin: auto 0;
    color: orange;
    font-size: 60px;
}

@media screen and (max-width: 768px){
    .yajirushi{
        transform: rotate(90deg);
    }
}

.caption{
    font-size: 50px;
    font-weight: bold;
}

.comics{
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 40px;
}

@media screen and (max-width: 768px){
    .comics{
        flex-direction: column;
    }
}

.comic{
    margin: 10px;
    width: 240px;
    height: 360px;
}

@media screen and (max-width: 768px){
    .comic{
        width: 70vw;
        height: 45vh;
        margin: 10px auto;
    }
}


/*制作実績セクション*/
.works-introduction{
    text-align: center;
}

@media screen and (max-width: 768px){
    .works-introduction{
        margin-top: 50px;
    }
}


.works-introduction-p{
    font-weight: bold;
    font-size: 18px;
    margin-top: 70px;
}


.works-introduction-p{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 26px;
	text-align: center;
}

@media screen and (max-width: 479px) {
    .works-introduction-p{
        font-size: 16px;
    }
}

.works-introduction-p::before,
.works-introduction-p::after {
	content: '';
	width: 70px;
	height: 3px;
	background-color: #000;
}

.works-introduction-p::before {
	margin-right: 20px;
}
.works-introduction-p::after {
	margin-left: 20px;
}




@media screen and (max-width: 768px){
    .works-introduction > p{
        letter-spacing: 3px;
    }
}


.subtitle{
    font-size: 30px;
    font-weight: bold;
}

/*その他の実績セクション*/
.another-link{
    font-size: 24px;
}

@media screen and (max-width: 768px){
    .another-link{
        letter-spacing: 3px;
    }
}

.another-link-all{
    display: flex;
    margin: 0 auto;
    margin-top: 50px;
    max-width: 1000px;
}

@media screen and (max-width: 768px){ 
    .another-link-all{
        flex-direction: column;
    }
}

.another-link-1{
    width: 300px;
    height: 300px;
    background-color: #eedae3;
    border-radius: 50%;
    margin: 10px auto;
    font-weight: bold;
}

.another-link-2{
    width: 300px;
    height: 300px;
    background-color: #dcdaee;
    border-radius: 50%;
    margin: 10px auto;
    font-weight: bold;
}

.another-link-3{
    width: 300px;
    height: 300px;
    background-color: #daeedf;
    border-radius: 50%;
    margin: 10px auto;
    font-weight: bold;
}

.another-link-4{
    width: 300px;
    height: 300px;
    background-color: #eedfda;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    font-weight: bold;
}

.another-link-5{
    width: 300px;
    height: 300px;
    background-color: #daeeee;
    border-radius: 50%;
    margin: 10px auto;
    font-weight: bold;
}

.another-link-6{
    width: 300px;
    height: 300px;
    background-color: #eeeeda;
    border-radius: 50%;
    margin: 10px auto;
    font-weight: bold;
}


/*メリットセクション*/
.meritcontainer1{
    border-left: #000 15px solid;
    text-align: left;
    padding-left: 10px;
    margin-left: 430px;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .meritcontainer1{
        margin-left:200px;
    }
}

@media screen and (max-width: 479px) {
    .meritcontainer1{
        margin-left:0px;
    }
}

.merit1title{
    font-size: 36px;
    font-weight: bold;
}

.merit1p{
    font-size: 24px;
    font-weight: bold;
}

.writer1{
    width: 500px;
    position: relative;
    bottom: 150px;
    right: 300px;
    margin-bottom: -150px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .writer1{
        right:0px;
    }
}

@media screen and (max-width: 479px) {
    .writer1{
        right:0px;
        width: 300px;
    }
}

.meritcontainer2{
    border-left: #000 15px solid;
    text-align: left;
    padding-left: 10px;
    margin-left: 1200px;
    margin-top: -400px;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 1024px) and (max-width: 1720px) {
    .meritcontainer2{
        margin-left:70vw;
        margin-top: 0px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .meritcontainer2{
        margin-left:600px;
        margin-top: 0px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .meritcontainer2{
        margin-left:200px;
        margin-top: 0px;
    }
}

@media screen and (max-width: 479px) {
    .meritcontainer2{
        margin-left:0px;
        margin-top: 0px;
    }
}

.merit2title{
    font-size: 36px;
    font-weight: bold;
}

.merit2p{
    font-size: 24px;
    font-weight: bold;
}

.writer2{
    width: 500px;
    position: relative;
    bottom: 300px;
    right: -450px;
    margin-bottom: -300px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .writer2{
        right:0px;
    }
}

@media screen and (max-width: 479px) {
    .writer2{
        right:0px;
        width: 300px;
    }
}

.meritcontainer3{
    border-left: #000 15px solid;
    text-align: left;
    padding-left: 10px;
    margin-left: 400px;
    margin-top: -200px;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .meritcontainer3{
        margin-left:200px;
        margin-top: 0px;
    }
}

@media screen and (max-width: 479px)  {
    .meritcontainer3{
        margin-left:0px;
        margin-top: 0px;
    }
}

.merit3title{
    font-size: 36px;
    font-weight: bold;
}

.merit3p{
    font-size: 24px;
    font-weight: bold;
}

.writer3{
    width: 500px;
    position: relative;
    bottom: 100px;
    right: 320px;
    margin-bottom: -100px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .writer3{
        right:0px;
    }
}

@media screen and (max-width: 479px) {
    .writer3{
        right:0px;
        width: 300px;
    }
}

.meritcontainer4{
    border-left: #000 15px solid;
    text-align: left;
    padding-left: 10px;
    margin-left: 1100px;
    position: relative;
    z-index: 1;
}

@media screen and (min-width: 1024px) and (max-width: 1720px) {
    .meritcontainer4{
        margin-left:70vw;
        margin-top: 0px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
    .meritcontainer4{
        margin-left:600px;
        margin-top: 0px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .meritcontainer4{
        margin-left:200px;
        margin-top: 0px;
    }
}

@media screen and (max-width: 479px) {
    .meritcontainer4{
        margin-left:0px;
        margin-top: 0px;
    }
}

.merit4title{
    font-size: 36px;
    font-weight: bold;
}

.merit4p{
    font-size: 24px;
    font-weight: bold;
}

.writer4{
    width: 500px;
    position: relative;
    bottom: 25px;
    right: -350px;
    margin-bottom: 100px;
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .writer4{
        right:0px;
    }
}

@media screen and (max-width: 479px) {
    .writer4{
        right:0px;
        width: 300px;
        margin-bottom: 30px;
    }
}


/*お仕事の内容セクション*/
li{
    letter-spacing: 2px;
    margin-top: 14px;
    font-weight: bold;
    line-height: 30px;
}

.boshuyoukou{
    background-image: url(img/1532682.jpg);
    text-align: center;
    background-size: contain;
}

@media screen and (max-width: 768px){
    .boshuyoukou{
        background-image: none;
    }    
}

.boshuyoukou-all{
    background-color: white;
    max-width: 700px;
    width: 80vw;
    height: 760px;
    padding: 30px 50px 0px 50px;
    margin: 0 auto;
}

@media screen and (max-width: 768px){
    .boshuyoukou-all{
        padding: 0;
    }    
}

@media screen and (max-width: 768px){
    .boshuyoukou-naiyo{
        padding-inline-start: 0px;
    }    
}

.boshuyoukou-flame{
    border: solid 1px #0057E1;
    margin: 50px  auto;
}

.boshuyoukou-flame1{
    display: flex;
}

.irainaiyounado{
    display: flex;
}

@media screen and (max-width: 768px){
    .irainaiyounado{
        flex-direction: column;
        text-align: left;
    }    
}


@media screen and (max-width: 768px){
    .li-title{
        font-size: 24px;
        font-weight: bold;
        text-align: center;
        margin-top: 30px;
    }
}

.naiyou1{
    margin-left: 60px;
}

@media screen and (max-width: 768px){
    .naiyou1 br{
        display: none;
    }
}

.naiyou2{
    margin-left: 60px;
}

.naiyou3{
    margin-left: 60px;
}

.naiyou4{
    margin-left: 20px;
}

.chuuiten{
    text-align: left;
    font-weight: bold;
    margin-left: 130px;
}

@media screen and (max-width: 768px){
    .chuuiten{
        margin-left: 10px;
        letter-spacing: 2px;
        line-height: 24px;
    }
}

@media screen and (max-width: 768px){
    .naiyou1{
        margin: 20px;
    }
}

@media screen and (max-width: 768px){
    .naiyou2{
        margin: 20px;
    }
}

@media screen and (max-width: 768px){
    .naiyou2 br{
        display: none;
    }
}

@media screen and (max-width: 768px){
    .naiyou3{
        margin: 20px;
    }
}


@media screen and (max-width: 768px){
    .naiyou3 br{
        display: none;
    }
}

ul{
    text-align: left;
    list-style: none;
}

/*配信先セクション*/
.haishinsaki{
    text-align: center;
    font-weight: bold;
    letter-spacing: 3px;
}

@media screen and (max-width: 768px){ 
    .haishinsaki{
        margin-top: 420px;
    }    
}

@media screen and (max-width: 768px){ 
    .comic-haishinsaki{
        width: 100%;
    }    
}

.haishinsaki-title{
    margin-top: 80px;
}


/*よくあるご質問セクション*/
.question{
    font-size: 24px;
    font-weight: bold;
}

.anser{
    font-weight: bold;
}

@media screen and (max-width: 768px){ 
    .bar{
        width: 80vw;
    }    
}



.mangakaboshuimg{
    width: 500px;
    height: 400px;
}

@media screen and (max-width: 768px){ 
    .mangakaboshuimg{
        width: 150px;
        height: 150px;
    }    
}

.boshu-p{
    font-size: 18px;
    font-weight: bold;
    margin-top: 48px;
}

@media screen and (max-width: 768px){ 
    .boshu-p{
        font-size: 16px;
    }    
}


.debut{
    text-align: center;
}

.debut-p{
    font-weight: bold;
}

h2{
    font-size: 60px;
    font-weight: bold;
    margin: 5px 0 0 0;
    font-family: 'Times New Roman', Times, serif;
}


@media screen and (max-width: 768px){ 
    h2{
        font-size: 32px;
    }    
}



h3{
    font-weight: bold;
}

strong{
    font-size: 60px;
}

.another-merit{
    margin-top: 100px;
    background-color: #FFFEEC;
    text-align: center;
    padding: 5px;
}

.another-merit-container{
    max-width: 600px;
    width: 80vw;
    background-color: white;
    border-radius: 10%;
    margin: 10px auto 20px auto;
    text-align: left;
    padding: 25px 20px 25px 40px;
}



.komoji{
    font-size: 11px;
}


.another-works{
    text-align: center;
    font-weight: bold;
    margin: 100px auto;
}


.soushoku{
    font-size: 30px;
    margin-top: 35px;
}

.soushoku:hover{
    color:#ecb1ee;
}

.kakusoushoku{
    text-decoration: none;
    color: black;
}

@media screen and (max-width: 768px){
    .matome{
        width: 100%;
    }
}

.oubohouhou{
    background-image: url(img/23686249.jpg);
    background-size: cover;
}

@media screen and (max-width: 768px){
    .oubohouhou{
        background-image: none;
    }
}

.oubohouhou-flame{
    background-color: white;
    max-width: 700px;
    width: 90vw;
    height: 500px;
    margin: 0 auto;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 80px;
}

@media screen and (max-width: 768px){
    .oubohouhou-flame{
        padding-bottom: 0px;
    }
}

.oubohouhou-naiyou{
    text-align: left;
    margin-left: 120px;
    max-width: 480px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 30px;
}

@media screen and (max-width: 768px){
    .oubohouhou-naiyou{
        margin-left: 30px;
        letter-spacing: 2px;
        line-height: 24px;
        text-align: center;
    }
}

.button{
    width: 150px;
    height: 32px;
    background-color: black;
    color: white;
    margin: 20px auto;
    padding-top: 8px;
}

.button-button{
    color: white;
    text-decoration: none;
}


.aboutus{
    text-align: center;
    padding-bottom: 50px;
}

.aboutus-title{
    margin-top: 40px;
    line-height: 30px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 40px;
}

@media screen and (max-width: 768px){
    .aboutus-title{
        font-size: 15px;
        font-weight: bold;
    }
}


.kaishagaiyou{
    display: flex;
    justify-content: center;
    margin: 20px auto 0 auto;
    font-weight: bold;
}

.button-kaisha{
    color: black;
    text-decoration: none;
}

.kaishagaiyou-title{
    margin: 50px 30px;
}

footer{
    text-align: center;
    font-weight: bold;
    margin-top: 20px;
}