@charset "UTF-8";

body {
  background-color: #b1f500;
  background-size: 100%;
  color: #000000;
  font-family: "ヒラギノ丸ゴ ProN W3", "Hiragino Maru Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック",  Verdana, sans-serif;
  font-size: 1em;
  line-height: 1.6;
  margin: 0px;
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 800px) {
    body {
      background-color: #b1f500;
      line-height: 1.4;
    }
}

h1 {
  font-size: 2rem; }
  @media (max-width: 600px) {
    h1 {
      font-size: 1.4rem;
      text-align: center; } }

a,a:link,a:visited{
  color: #000000;
  text-decoration:underline;
}

a:hover {
  color: #000000;
  text-decoration:underline;
}

a img{
  border-style:none;
}

.sp{
  display: none;
}
@media (max-width: 800px) {
    .sp{
      display: block;
    }
}

.pc{
  display: block;
}
@media (max-width: 800px) {
    .pc{
      display: none;
    }
}

/* ==================== ヘッダー：通常ページ用 ==================== */

/* ==================== フッター ==================== */
footer {
  text-align: center;
  width: 100%;
  padding-top:50px;
  padding-bottom:50px;
  box-sizing: border-box;
}
@media (max-width: 800px) {
    footer {
      padding-top: calc(5000vw / 800);
      padding-bottom: calc(5000vw / 800);
    }
}


footer a:hover { text-decoration: none; }

#footer_main{
  position: relative;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../images/zomko_back-texture_purple02.png");
  background-repeat: no-repeat;
  background-position:calc(50vw + 470px) top;
  margin:-420px auto 0px;
  padding-top: 420px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
    #footer_main{
      background-position:calc(50vw + (47000vw / 1200)) top;
      background-size: calc(31500vw / 1200) auto;
      margin-top:calc(- (42000vw / 1200));
      padding-top: calc(42000vw / 1200);
    }
}
@media (max-width: 1000px) {
    #footer_main{
      background-image: none;
      margin-top:0;
      padding-top: 0;
    }
}



#footer_sns{
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
@media (max-width: 800px) {
    #footer_sns{
      margin-bottom: calc(3000vw / 800);
    }
}

#footer_sns img{
  width:60px;
  border-radius: 10px;
  margin-left: 6px;
  margin-right: 6px;
}
@media (max-width: 800px) {
    #footer_sns img{
      width:50px;
      margin-left: 10px;
      margin-right: 10px;
    }
}

#footer_copylight{
  display: flex;
  align-items: center;
  font-weight: bold;
}
@media (max-width: 450px) {
    #footer_copylight{
      font-size:calc(95vw / 30);
    }
}

#footer_copylight .c{
  font-size:1.5rem;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
@media (max-width: 450px) {
    #footer_copylight .c{
      font-size:1.4rem;
      margin-left: 0.2rem;
      margin-right: 0.2rem;
    }
}

/* ==================== ページトップへ ==================== */
#page_top,#page_top a,#page_top a::before{
  width: 60px;
  height: 60px;
}
@media (max-width: 800px) {
    #page_top,#page_top a,#page_top a::before{
      width: 50px;
      height: 50px;
    }
}

#page_top{
  position: fixed;
      right: 45px;
      bottom: 50px;
  opacity: 0.7;
}
@media (max-width: 800px) {
    #page_top{
      right: calc(4000vw / 800);
    }
}

#page_top a{
  position: relative;
  display: block;
  text-decoration: none;
}

#page_top a::before{
  display: flex;
  content: '';
  background-image: url("../images/zomko_arrow_up_w.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
}

/* ==================== SPメニュー ==================== */

/* ==================== メイン ==================== */
.main_area{
  background-image: url("../images/zomko_back-texture_purple01.png");
  background-repeat: no-repeat;
  background-position: calc(50vw + 239px) top;
  margin:0 auto 0px auto;
/*  width:1200px;   */
  width:100%;
}
@media (max-width: 1200px) {
    .main_area{
      background-size: calc(58900vw / 1200) auto;
      background-position: calc(50vw + (23900vw / 1200)) top;
    }
}
@media (max-width: 800px) {
    .main_area{
      background-image: url("../images/zomko_back-texture_purple01_sp.png");
      background-position: calc(50vw + (9500vw / 800)) top;
      background-size: calc(42000vw / 800) auto;
    }
}

/* ==================== キービジュアル ==================== */
.keyvisual_back{
  background-image: url("../images/zomko_back-texture_white01.png");
  background-repeat: no-repeat;
  background-position: calc(50vw - 780px) 375px;
  width:100%;
  margin:0px auto 70px;
  padding-top: 40px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
    .keyvisual_back{
      padding-top: calc(4000vw / 1200);
      background-position: calc(50vw - (78000vw / 1200)) calc(37500vw / 1200);
      background-size: calc(95100vw / 1200) auto;
    }
}
@media (max-width: 800px) {
    .keyvisual_back{
      background-image: none;
      padding-top:calc(3500vw / 800);
    }
}

.keyvisual{
  width:1200px;
  margin:0px auto 70px;
  background-image: url("../images/zomko_keyvisual_pc.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1200px) {
    .keyvisual{
      width:100%;
      margin-bottom: calc(7000vw / 1200);
      padding-left:calc(3500vw / 1200);
      padding-right:calc(3500vw / 1200);
      background-size: auto calc(85000vw / 1200);
      box-sizing: border-box;
    }
}
@media (max-width: 800px) {
    .keyvisual{
      padding-left:calc(3500vw / 800);
      padding-right:calc(3500vw / 800);
      background-position: left calc(10000vw / 800);
      background-size: auto calc(85000vw / 800);
    }
}

.keyvisual_logo img,.keyvisual_copy img,.keyvisual_discript-title img{
  width: 100%;
}

.keyvisual_logo{
  width:870px;
}
@media (max-width: 1200px) {
    .keyvisual_logo{
      margin-left: -3vw;
      width: calc(87000vw / 1200);
    }
}
@media (max-width: 800px) {
    .keyvisual_logo{
      width: calc(57000vw / 800);
    }
}

.keyvisual_copy{
  width:730px;
}
@media (max-width: 1200px) {
    .keyvisual_copy{
      width: calc(73000vw / 1200);
    }
}
@media (max-width: 800px) {
    .keyvisual_copy{
      margin-top: -4vw;
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
}

.keyvisual_copy img{}
@media (max-width: 800px) {
    .keyvisual_copy img{
      width: calc(27000vw / 800);
    }
}


.keyvisual_discription{
  width: 830px;
  background-image: url("../images/zomko_back_purple02_pc.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto ;
  padding-bottom:50px;
  box-sizing: border-box;
  margin-top: 60px;
}
@media (max-width: 1200px) {
    .keyvisual_discription{
      width: calc(83000vw / 1200);
      background-size: 100% 100% ;
      padding-bottom:calc(5000vw / 1200);
      margin-top: 5vw;
    }
}
@media (max-width: 800px) {
    .keyvisual_discription{
      width: 100%;
      background-image: url("../images/zomko_back_purple02_sp.png");
      padding-bottom:calc(5000vw / 800);
      margin-top: 7.5vw;
    }
}


.keyvisual_discript-title{
  width: 300px;
  margin-top: -30px;
}
@media (max-width: 1200px) {
    .keyvisual_discript-title{
      margin-top: -5vw;
      width: calc(30000vw / 1200);
    }
}
@media (max-width: 800px) {
    .keyvisual_discript-title{
      margin-top: -7.5vw;
      width: calc(35000vw / 800);
    }
}

.keyvisual_discript-text{
  margin: 0 45px 0 45px;
  font-size:1.2rem;
}
@media (max-width: 1200px) {
    .keyvisual_discript-text{
      margin-left: calc(4500vw / 1200);
      margin-right: calc(4500vw / 1200);
    }
}
@media (max-width: 800px) {
    .keyvisual_discript-text{
      margin-left: calc(4500vw / 800);
      margin-right: calc(4500vw / 800);
    }
}

.keyvisual_discript-text br{}
@media (max-width: 1200px) {
    .keyvisual_discript-text br{
        display:none;
    }

}


/* ==================== 共通 ==================== */
.chapter{
  width:100%;
  padding-top: 80px;
  padding-bottom: 120px;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 1200px) {
    .chapter{
      padding-top: calc(8000vw / 1200);
      padding-bottom: calc(12000vw / 1200);
    }
}
@media (max-width: 800px) {
    .chapter{
      padding-left: calc(3500vw / 800) ;
      padding-right: calc(3500vw / 800) ;
    }
}

.chapter_title img{
  width: 100%;
}

.chapter_title{
  width:350px;
  margin: 0px auto 50px;
}
@media (max-width: 800px) {
    .chapter_title{
      width:calc(49000vw / 800);
      margin-bottom: calc(6000vw / 800);
    }
}

.chapter_text{
  font-size:1.2rem;
  width:1060px;
  margin: 0 auto 0;
}
@media (max-width: 1200px) {
    .chapter_text{
      width:calc(106000vw / 1200);
    }
}
@media (max-width: 800px) {
    .chapter_text{
      width:100%;
    }
}


.chapter_text .pc{
  display: inline-block;
}
@media (max-width: 800px) {
    .chapter_text .pc{
      display: none;
    }
}

.chapter_text .sp{
  display: none;
}
@media (max-width: 800px) {
    .chapter_text .sp{
      display: inline-block;
    }
}


/* ==================== ストーリー ==================== */
.story{
  background-image: url("../images/zomko_back01.png");
}
@media (max-width: 1200px) {
    .story{
    }
}


.story .chapter_text{
}
@media (max-width: 1200px) {
    .story .chapter_text{
    }
}


/* ==================== コミック ==================== */
.comic_back{
  background-image: url("../images/zomko_back-texture_white02.png");
  background-repeat: no-repeat;
  background-position: calc(50vw + 370px) top;
  width:100%;
  margin:-190px auto 0px;
  padding-top: 190px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
    .comic_back{
      background-position: calc(50vw + (37000vw / 1200)) top;
      margin-top: calc((19000vw / 1200) * -1);
      padding-top: calc(19000vw / 1200);
      background-size: calc(31500vw / 1200) auto;
    }
}
@media (max-width: 800px) {
    .comic_back{
      background-image: none;
      margin-top: 0;
      padding-top: 0;
    }
}

.comic{
  background-image: url("../images/zomko_back-texture_white03.png");
  background-repeat: no-repeat;
  background-position: calc(50vw - 633px) 610px;
}
@media (max-width: 1200px) {
    .comic{
      background-position: calc(50vw - (63300vw / 1200)) calc(61000vw / 1200);
      background-size: calc(27300vw / 1200) auto;
    }
}
@media (max-width: 800px) {
    .comic{
      background-image: none;
    }
}

.comic .chapter_text{
    display: flex;
    justify-content: center;
}

.comic_th{
    display: flex;
    justify-content: center;
    margin: 0 auto 35px;
}

.comic_page{
    width:1em;
    background: #ffffff;
    height:80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px 10px 24px 10px ;
    border-radius: 10px 0 0 10px;
    margin-top: 15px;
}

.comic_img{
    width:420px;
    padding: 25px 20px 25px 20px ;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
}

.comic_th::after{
    content: "";
    width:1em;
    padding: 25px 10px 24px 10px ;
}

.comic_img img{
    width: 100%;
}
/* ==================== キャラクター ==================== */
.chara{
  padding-bottom: 20px;
}
@media (max-width: 1200px) {
    .chara{
      padding-bottom: calc(2000vw / 1200);
    }
}
@media (max-width: 800px) {
    .chara{
      padding-left: 0 ;
      padding-right: 0 ;
    }
}

.chara .chapter_title{
  width:435px;
  margin: 0px auto 50px;
}
@media (max-width: 800px) {
    .chara .chapter_title{
      width:calc(43570vw / 800);
    }
}

.chara_info{
  width:100%;
  margin-bottom: 55px;
}

.chara_image{
  width:100%;
}

.chara_visual{
  width:100%;
  display: flex;
  justify-content: center;
  background: #ffffff;
}
@media (max-width: 800px) {
    .chara_visual{
      flex-direction: column;
      align-items: center;
    }
}

.chara_visual_top {
  background-image: url("../images/zomko_back03_top.png");
  background-repeat: repeat-x;
  background-size: auto auto;
  background-position: center bottom;
  height: 57px;
}
@media (max-width: 1200px) {
    .chara_visual_top {
    }
}
@media (max-width: 800px) {
    .chara_visual_top {
    }
}

.chara_visual_bottom {
  background-image: url("../images/zomko_back03_bottom.png");
  background-repeat: repeat-x;
  background-size: auto auto;
  background-position: center top;
  height: 49px;
}

.chara_visual img{
  width:570px;
}
@media (max-width: 1140px) {
    .chara_visual img{
      width:50%;
    }
}
@media (max-width: 800px) {
    .chara_visual img{
      width:90%;
    }
}

.charactor_description{
  width:1100px;
  margin: -40px auto 0;
}
@media (max-width: 1200px) {
    .charactor_description{
      width:calc(110000vw / 1200);
      margin-top: calc((4000vw / 1200) * -1);
    }
}
@media (max-width: 800px) {
    .charactor_description{
      padding-left: calc(3500vw / 800) ;
      padding-right: calc(3500vw / 800) ;
      box-sizing: border-box;
    }
}

.charactor_name{
  width: 300px;
}
@media (max-width: 1200px) {
    .charactor_name{
      width: calc(30000vw / 1200);
    }
}
@media (max-width: 800px) {
    .charactor_name{
      width: calc(35000vw / 800);
    }
}

.charactor_name img{
  width:100%;
}

/* ==================== キャラクター設定 ==================== */
.chara-data{
  background-image: url("../images/zomko_back02.png");
  overflow: hidden;
}
@media (max-width: 1200px) {
    .chara-data{
    }
}

.slider{
  width:1875px;
  padding-left:35px;
  margin-left: calc(((1875px - 100vw ) / 2) * -1);
  box-sizing: border-box;
}
@media (max-width: 800px) {
    .slider{
      margin-left: calc(((1900px - 100vw ) / 2) * -1);
    }
}

.slider_img img{
    width:320px;
    border-radius: 10px;
}

/* ==================== クリエイター紹介 ==================== */
.creator {
  background-image: url("../images/zomko_back01.png");
  padding-left: 35px ;
  padding-right: 35px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
    .creator{
      padding-left: calc(3500vw / 1200);
      padding-right: calc(3500vw / 1200);
    }
}
@media (max-width: 800px) {
    .creator{
      padding-left: calc(3500vw / 800) ;
      padding-right: calc(3500vw / 800) ;
    }
}


.creator_info{
  width: 830px;
  margin: 0 auto 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100% ;
  padding: 45px 40px 20px 40px ;
  box-sizing: border-box;
  display: flex;
}
@media (max-width: 900px) {
    .creator_info{
      width: 100%;
      padding-top:calc(4500vw / 900);
      padding-bottom:calc(4000vw / 900);
    }
}
@media (max-width: 600px) {
    .creator_info{
      padding-bottom:calc(2000vw / 600);
    }
}

.creator .creator_info{
  box-sizing: border-box;
  background-image: url("../images/zomko_back_purple02_pc.png");
}
@media (max-width: 800px) {
    .creator .creator_info{
      background-image: url("../images/zomko_back_purple02_sp.png");
    }
}
@media (max-width: 600px) {
    .creator .creator_info{
      flex-direction: column;
      align-items: center;
    }
}

.creator_info_data{
  margin-bottom: 20px;
}

.creator_info_icon img,.creator_info_data_sns-icon img{
  width:100%;
  border-radius: 10px;
}


.link_data{
  display: flex;
  flex-direction: column;
}

.creator_info_icon{
  width:150px;
  margin-right: 35px;
}
@media (max-width: 800px) {
    .creator_info_icon{
      width: calc(15000vw / 800);
      margin-right: calc(3500vw / 800);
    }
    .creator .creator_info_icon{
      margin-top: calc(1500vw / 800);
    }
}
@media (max-width: 600px) {
    .creator .creator_info_icon{
      margin-bottom: calc(1500vw / 600);
    }
}

.creator_info_data_name{
  display: flex;
  align-items: center;
}

.creator_info_data_sns-icon{
  width:60px;
  margin-right: 10px;
}
@media (max-width: 600px) {
    .creator_info_data_sns-icon{
      width:calc(6000vw / 600);
      margin-right: calc(1000vw /600);
    }
}

.creator_info_name{
  font-size:2.5rem;
  font-weight: bold;  
}
@media (max-width: 600px) {
    .creator_info_name{
      width:calc(100% - 80px);
      font-size:1.6rem;
    }
}

.creator_info_data_url{
  font-size:1.3rem;
}
@media (max-width: 600px) {
    .creator_info_data_url{
      font-size:calc(90vw / 20);
    }
}

/* ==================== SNS ==================== */
.sns {
  background-image: url("../images/zomko_back04.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto auto;
}
@media (max-width: 1200px) {
    .sns{
    }
}

.sns_timeline{
  width:470px;
  margin: 0 auto 0;
}
@media (max-width: 800px) {
    .sns_timeline{
      width:100%;
    }
}

.sns_timeline img{
  width:100%;
}

/* ==================== 関連リンク ==================== */
.link_back{
  background-image: url("../images/zomko_back-texture_white04.png");
  background-repeat: no-repeat;
  background-position:calc(50vw - 760px) top;
  width:100%;
  margin:-250px auto 0px;
  padding-top: 250px;
  padding-left: 35px ;
  padding-right: 35px;
  box-sizing: border-box;
}
@media (max-width: 1200px) {
    .link_back{
      background-position:calc(50vw - (76000vw / 1200)) top;
      background-size: calc(60800vw / 1200) auto;
      margin-top: calc((25000vw / 1200) * -1);
      padding-top: calc(25000vw / 1200);
      padding-left: calc(3500vw / 1200);
      padding-right: calc(3500vw / 1200);
    }
}
@media (max-width: 800px) {
    .link_back{
      background-image: url("../images/zomko_back-texture_white04_sp.png");
      background-position:calc(50vw - (65000vw / 800)) top;
      background-size: calc(48800vw / 800) auto;
      margin-top: calc( (14000vw / 800) * -1);
      padding-top: calc(14000vw / 800);
      padding-left: calc(3500vw / 800) ;
      padding-right: calc(3500vw / 800) ;
    }
}

.link {
  background-image: url("../images/zomko_back02.png");
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1200px) {
    .link{
    }
}


.link .creator_info{
  position: relative;
  background-image: url("../images/zomko_back_purple03_pc.png");
  z-index: 100;
}
@media (max-width: 800px) {
    .link .creator_info{
      background-image: url("../images/zomko_back_purple03_sp.png");
      flex-direction: column;
      align-items: center;
    }
}

.link .creator_info_icon{}
@media (max-width: 800px) {
    .link .creator_info_icon{
      margin-right: 0;
    }
}
@media (max-width: 600px) {
    .link .creator_info_icon{
      margin-bottom: calc(1500vw / 600);
    }
}