@charset 'UTF-8';
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    list-style: none;

}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align: middle;
}
img{
    max-width: 100%;
}
/* VARS */
:root {
    --main-color: #006a9a;
    --link-color: #004eff;
    --max-width: 960px;
}
/* PARTS
/////////////////////////////////////////////*/
.cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}
.grid {
    *zoom:1;
}
.grid > *{
    float: left;
    box-sizing: border-box;
    behavior: url('/js/boxsizing.htc');

}
.grid > * img{
    vertical-align: bottom;

}
.grid:after, .grid:before {
    content: "";
    display: table;
    clear: both;

}
.grid .grid__col-01 {
    width: 4.16666666667%;

}
.grid .grid__col-02 {
    width: 8.33333333333%;

}
.grid .grid__col-03 {
    width:12.5%;

}
.grid .grid__col-04 {
    width: 16.6666666667%;

}
.grid .grid__col-05 {
    width: 20.8333333333%;

}
.grid .grid__col-06 {
    width: 25%;

}
.grid .grid__col-07 {
    width: 29.1666666667%;

}
.grid .grid__col-08 {
    width: 33.3333333333%;

}
.grid .grid__col-09 {
    width: 37.5%;

}
.grid .grid__col-10 {
    width: 41.6666666667%;

}
.grid .grid__col-11 {
    width: 45.8333333333%;

}
.grid .grid__col-12 {
    width: 50%;

}
.grid .grid__col-13 {
    width: 54.1666666667%;

}
.grid .grid__col-14 {
    width: 58.3333333333%;

}
.grid .grid__col-15 {
    width: 62.5%;

}
.grid .grid__col-16 {
    width: 66.6666666667%;

}
.grid .grid__col-17 {
    width: 70.8333333333%;

}
.grid .grid__col-18 {
    width: 75%;

}
.grid .grid__col-19 {
    width: 79.1666666667%;

}
.grid .grid__col-20 {
    width: 83.3333333333%;

}
.grid .grid__col-21 {
    width: 87.5%;

}
.grid .grid__col-22 {
    width: 91.6666666667%;

}
.grid .grid__col-23 {
    width: 95.8333333333%;

}
.grid .grid__col-24 {
    width: 100%;

}
.grid--gutter{
    margin-left: -25px;
    margin-right: -25px;
}
.grid--gutter > *{
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 40px;

}
a.hv{
    -webkit-transition:opacity .3s ease;
    transition: opacity .3s ease;
}
a.hv:hover{
    opacity: 0.7;

}
.pc-none{
    display: none;
}
.align-c{
    text-align: center;
}
.align-r{
    text-align: right;
}
.align-l{
    text-align: left;
}
.fs18{ font-size:18px; font-size: 1.8rem;}
.fs14{ font-size:14px; font-size: 1.4rem;}
.mb08{ margin-bottom: 8px;}
.mb16{ margin-bottom: 16px;}
.mb24{ margin-bottom: 24px;}
.mb32{ margin-bottom: 32px;}
.mb40{ margin-bottom: 40px;}
.mb48{ margin-bottom: 48px;}
.mb56{ margin-bottom: 56px;}
.mb64{ margin-bottom: 64px;}
.mb72{ margin-bottom: 72px;}
.mb80{ margin-bottom: 80px;}
.mb88{ margin-bottom: 88px;}
.mb106{ margin-bottom: 106px;}
.mb114{ margin-bottom: 114px;}
.mb120{ margin-bottom: 120px;}
.btn-tp01 a{
    display: inline-block;
    position: relative;
    font-size:16px;
    font-size: 1.6rem;
    padding-left: 16px;

}
.btn-tp01 a:before{
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 12px;
    margin-top: -6px;
    background: url(/img/common/arrow4.png) center center no-repeat;
    background-size: 5px;
    content: "";

}
.yt-wrap{
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}
.yt-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}
/* LAYOUT
///////////////////////////////////////////////////*/
/* base
---------------------------------------------------*/
html{
    font-size: 62.5%;
}
body{
    font-family: "ヒラギノ角ゴ Pro W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W6", "HiraKakuProN-W6", "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
    font-size:14px;
    font-size: 1.4rem;
    line-height: 1.8;
    color: #333;
}
a{
    color: #000;
}
a:hover{
    text-decoration: underline;

}
img{
    max-width: 100%;
}
input[type="text"], input[type="email"], textarea{
    box-sizing: border-box;
    border: 1px solid #B0B0B0;
    font-size:14px;
    font-size: 1.4rem;
    border-radius: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus{
    outline: 0;
    border-color: #000 ;

}
input[type="radio"]:focus{
    outline: 0;
    background: #F5F5F5;

}
button:focus{
    outline: 1px solid #000;

}
#wrapper{
    overflow: hidden;
    position: relative;
    background: url(../images/common/bg_body.jpg) center 0 #FFF no-repeat;
    background-attachment: fixed;
    background-size: 100%;
    min-width: 1000px;
}
#header{
    width: var(--max-width);
    margin: 0 auto;
    padding: 10px 20px 0;
}
#navigation{

}
#main{
    position: relative;
    margin-top: -36px;
    padding-bottom: 180px;
}
#mainContents{
    position: relative;
    z-index: 10;
    width: var(--max-width);
    margin: 0 auto 48px;
    padding: 0 20px;
}
#footer{
    display: block;
    position: fixed;
    width: 100%;
    bottom: 0;
    left:0;
    background: #4b251f;
    color: #FFF;
    z-index: 10;
    text-align: center;
}
#footer .ft__inr{
    padding: 15px 20px;

}
#footer small{
    display: block;
    font-size: 11px;
    margin-bottom: 10px;

}
#footer p{
    font-size: 12px;

}
/* header
---------------------------------------------------*/
.hd .hd__inr{
    position: relative;

}
.hd .hd__inr .hd__logo{
    position: relative;
    z-index: 100;
    width: 320px;
    height: 109px;
    margin: 0 auto;

}
.hd .hd__inr .hd__logo a{
    display: block;
    overflow: hidden;
    width: 320px;
    height: 109px;
    background: url(../images/common/logo.png) 0 0 no-repeat;
    background-size: 100%;
    text-indent: 100%;
    white-space: nowrap;

}
/* gnav
---------------------------------------------------*/
.gnav{
    overflow: hidden;
    position: relative;
    z-index: 10;
    width: 100%;
    background: url(../images/common/bg_nav.png) 0 0 repeat;
}
.gnav:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgb(146,113,49);
    background: -webkit-linear-gradient(left, rgba(146,113,49,1) 0%,rgba(215,179,70,1) 50%,rgba(146,113,49,1) 100%);
    background: linear-gradient(to right, rgba(146,113,49,1) 0%,rgba(215,179,70,1) 50%,rgba(146,113,49,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#927131', endColorstr='#927131',GradientType=1 );
    content: "";

}
.gnav ul{
    overflow: hidden;
    position: relative;
    padding: 0 80px;
    max-width: 800px;
    margin: 0 auto;

}
.gnav li{
    position: relative;
    float: left;
    width: 33.3%;

}
.gnav li:after{
    position: absolute;
    top: 17px;
    right: 0;
    content: url(../images/common/nav_line.png);

}
.gnav li a, .gnav li span{
    overflow: hidden;
    display: block;
    width: 100%;
    height: 70px;
    background-position: center 0;
    background-repeat: no-repeat;
    text-indent: 100%;
    white-space: nowrap;

}
.gnav li.current a, .gnav li a:hover{
    background-position: center -70px;

}
.gnav__news:before{
    position: absolute;
    top: 17px;
    left: 0;
    content: url(../images/common/nav_line.png);

}
.gnav__news a{
    background-image: url(../images/common/nav_news_pc.png);

}
.gnav__story a{
    background-image: url(../images/common/nav_story_pc.png);

}
.gnav__correlation a{
    background-image: url(../images/common/nav_correlation_pc.png);

}
/* main
---------------------------------------------------*/
.main-cnts .main-cnts__inr{
    position: relative;
    width: 934px;
    margin: 0 auto;
    background: url(../images/common/bg_main.png) 0 0 repeat;
    border-left: 5px solid #937232;
    border-right: 5px solid #937232;
    box-shadow: 0 0 4px rgba(0,0,0,.4);

}
.main-cnts .main-cnts__top{
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    background: url(../images/common/line_main_top.png) center 0 no-repeat;

}
.main-cnts .main-cnts__top:before, .main-cnts .main-cnts__top:after{
    content: "";
    position: absolute;
    top: 12px;
    left: -22px;
    width: 50px;
    height: 50px;
    background: url(../images/common/line_main_left.png) 0 0 no-repeat;

}
.main-cnts .main-cnts__top:after{
    left: auto;
    right: -22px;
    background: url(../images/common/line_main_right.png) 0 0 no-repeat;

}
.main-cnts .main-cnts__bottom{
    display: block;
    position: absolute;
    z-index: 11;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 50px;
    background: url(../images/common/line_main_bottom.png) center 0 no-repeat;

}
.main-cnts .main-cnts__bottom:before, .main-cnts .main-cnts__bottom:after{
    content: "";
    position: absolute;
    bottom: 12px;
    left: -22px;
    width: 50px;
    height: 50px;
    background: url(../images/common/line_main_left.png) 0 0 no-repeat;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);

}
.main-cnts .main-cnts__bottom:after{
    left: auto;
    right: -22px;
    background: url(../images/common/line_main_right.png) 0 0 no-repeat;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);

}
/* Contents
///////////////////////////////////////////////////*/
/* top page
---------------------------------------------------*/
#index #wrapper{
    background-attachment: scroll;

}
#index #header{
    padding: 30px 20px 0;

}
#index .hd .hd__inr .hd__logo{
    width: 400px;
    height: 136px;

}
#index .hd .hd__inr .hd__logo a{
    width: 400px;
    height: 136px;

}
#index #main{
    margin-top: -70px;
    padding-bottom: 48px;
    background: url(../images/common/bg_body_02.png) 0 bottom repeat-x;

}
#index #footer{
    position: relative;

}
.main-visual{
    overflow: hidden;
    position: relative;
    padding: 60px 0 0;
}
.main-visual__inr{
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
    position: relative;
    height: 468px;
    width: 908px;
    margin: 0 auto;
    background: url(../images/top/main_bg_pc.png) center 0 no-repeat;

}
.main-visual__ph{
    height: 468px;

}
.main-visual__ph li{
    position: absolute;
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2);

}
.main-visual__ph .ph01{
    top: 30px;
    left: 30px;

}
.main-visual__ph .ph02{
    top: 220px;
    left: 206px;

}
.main-visual__ph .ph03{
    top: 40px;
    left: 250px;

}
.main-visual__ph .ph04{
    top: 40px;
    left: 487px;

}
.main-visual__ph .ph05{
    top: 27px;
    left: 684px;

}
.main-visual__ph .ph06{
    top: 238px;
    left: 475px;

}
.main-visual__ph .ph07{
    top: 187px;
    left: 702px;

}
.main-visual__ph .illust, .main-visual__ph .chr{
    top: 0;
    left: 0;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);

}
.main-visual__news{
    visibility: hidden;
    opacity: 0;
    position: absolute;
    z-index: 3;
    top: 280px;
    left: 25px;
    width: 170px;
    padding: 40px 10px 5px;
    background: url(../images/top/main_ttl_news.png) 5px 0 #FFF no-repeat;

}
.main-visual__news li{
    font-size:13px;
    font-size: 1.3rem;

}
.main-visual__news li span{
    display: none;

}
.main-visual__news li time{
    display: none;

}
.sub{
    overflow: hidden;
    position: relative;
    width: 944px;
    margin: 40px auto 0;
    padding-bottom: 2px;
}
.bnr ul{
    overflow: hidden;
    margin-bottom: 8px;

}
.bnr li{
    width: 230px;
    float: left;
    margin-left: 8px;

}
.bnr li:first-child{
    margin-left: 0;

}
.bnr li img{
    display: block;

}
.bnr li a{
    display: block;

}
.yt-area{
    width: 560px;
    height: 315px;
    padding: 20px 12px;
    margin: 0 auto 40px;
    margin-top: 50px;
    background: url(../images/top/bg_video.png) 0 0 no-repeat;
}
.social-area__box{
    float: left;
    width: 300px;
    height: 334px;
    margin-left: 22px;
    background: url(../images/top/bg_tw_pc.png) 0 0 no-repeat;
    box-shadow: 1px 1px 2px rgba(0,0,0, .4);

}
.social-area__box--insta{
    margin-left: 0;
    background-image: url(../images/top/bg_insta_pc.png);

}
.tw-timeline{
    padding: 60px 30px 0;
    box-sizing: border-box;
}
.tw-timeline .twitter-timeline{
    width: 100%;

}
.instafeed{
    padding: 60px 30px;
    margin: 0 -5px;
}
.instafeed li{
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding: 5px;

}
.instafeed li img{
    display: block;

}
.instafeed li a{
    display: block;

}
/* lower page
---------------------------------------------------*/
.section{
    overflow: hidden;
    position: relative;
    padding: 50px 27px;
    color: #FFF;
}
.section .section__ttl{
    padding: 24px 0;
    text-align: center;

}
.section .section__sentence p{
    margin-bottom: 40px;

}
.btn-top{
    float: right;
}
.btn-top a{
    display: block;
    width: 200px;
    height: 40px;
    background: url(../images/common/btn_top.png) 0 0 no-repeat;

}
.btn-top a:hover{
    background-position: 0 -40px;

}
/* story */
.section--story{
    background: url(../images/story/bg_sec_pc.png) center 40px no-repeat;
}
/* correlation */
.section--correlation{

}
.correlation{
    position: relative;
    height: 950px;
    padding-bottom: 50px;
    background: url(../images/correlation/bg_sec_pc.png) center 0 no-repeat;
}
.correlation li{
    position: absolute;

}
.correlation .chr-01{
    top: 515px;
    left: 575px;

}
.correlation .chr-02{
    top: 16px;
    left: 550px;

}
.correlation .chr-03{
    top: 269px;
    left: 360px;

}
.correlation .chr-04{
    top: 525px;
    left: 158px;

}
.correlation .chr-05{
    top: 14px;
    left: 160px;

}
.correlation .chr-06{
    top: 269px;
    left: 0px;

}
.correlation .chr-07{
    top: 267px;
    left: 712px;

}
.correlation .chr-08{
    top: 770px;
    right: 353px;

}
.correlation .btn-insta{
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    position: absolute;
    bottom: 20px;
    left: 180px;
    width: 160px;
    height: 30px;
    background: url(../images/correlation/btn_insta.png) 0 0 no-repeat;

}
.correlation .btn-insta:hover{
    background-position: 0 -30px;

}
/* profile */
.section--profile{
    background: url(../images/profile/bg_sec_pc.png) center bottom 80px no-repeat;
}
.profile{
    overflow: hidden;
    position: relative;
    width: 530px;
    margin-left: 350px;
}
.profile dl{
    position: absolute;
    top: 0;
    right: 0;
    width: 230px;

}
.profile dl dt{
    font-size:20px;
    font-size: 2rem;
    white-space: nowrap;

}
.profile dl dt span{
    font-size:12px;
    font-size: 1.2rem;

}
.profile dl dd p{
    margin-bottom: 24px;

}
.profile .btn-back a{
    display: block;
    width: 152px;
    height: 37px;
    background: url(../images/profile/btn_back.png) 0 0 no-repeat;

}
.prfile-fig{
    position: absolute;
    top: 180px;
    left: 27px;
}
/* comic */
.section--comic .bnr{
    width: 790px;
    margin: 0 auto;

}
/* goods */
.goods h3{
    margin-bottom: 8px;
    font-size:24px;
    font-size: 2.4rem;

}
.goods h3 span{
    font-size:18px;
    font-size: 1.8rem;

}
.goods .goods__list{
    margin: 0 -10px 16px;

}
.goods .goods__list li{
    box-sizing: border-box;
    float: left;
    width: 20%;
    padding: 0 10px;

}
.btn-goods{
    margin-bottom: 56px;
}
.btn-goods a{
    display: block;
    width: 220px;
    height: 40px;
    background: url(../images/goods/btn_goods.png) 0 0 no-repeat;

}
.btn-goods a:hover{
    background-position: 0 -40px;

}
.goods02{
    text-align: center;
}
.goods02 h3{
    margin-bottom: 8px;
    font-size:24px;
    font-size: 2.4rem;

}
.goods02 h3 span{
    position: relative;

}
.goods02 h3 span:before{
    content: "★ ";

}
.goods02 h3 span:after{
    content: " ★";

}
.goods02 figure{
    margin-bottom: 20px;
    text-align: center;

}
.goods03{
    text-align: center;
    margin: 0 60px;
}
.goods03 h4{
    margin-bottom: 8px;
    font-size:18px;
    font-size: 1.8rem;

}
.goods03 figure{
    text-align: center;

}
.btn-goods02{
    display: block;
}
.btn-goods02 a{
    display: block;
    margin: 0 auto;
    width: 140px;
    height: 40px;
    background: url(../images/goods/btn_goods02.png) 0 0 no-repeat;

}
.btn-goods02 a:hover{
    background-position: 0 -40px;

}
.btn-goods03{
    display: block;
}
.btn-goods03 a{
    display: block;
    margin: 0 auto;
    width: 420px;
    height: 40px;
    background: url(../images/goods/btn_goods03.png) 0 0 no-repeat;

}
.btn-goods03 a:hover{
    background-position: 0 -40px;

}
.cam01{
    position: relative;
}
.cam01 .cam01__fig{
    position: absolute;
    top: 30px;
    right: 0;

}
.cam02{
    position: relative;
    margin-bottom: 40px;
}
.cam02 .cam02__fig01{
    position: absolute;
    top: 50px;
    left: 0;

}
.cam02 .cam02__fig02{
    position: absolute;
    top: 10px;
    right: -20px;

}
.shop-list{
    margin-bottom: 72px;

}
.shop-list dl{
    position: relative;
    margin-bottom: 8px;

}
.shop-list dt{
    position: relative;
    padding: 2px 10px;
    color: #4b251f;
    background: url(../images/goods/bg_list_01.png);
    border-radius: 3px;
    font-size:22px;
    font-size: 2.2rem;
    font-weight: bold;
    cursor: pointer;

}
.shop-list dt:before{
    content: "Open";
    position: absolute;
    top: 0;
    right: 30px;
    font-size:18px;
    font-size: 1.8rem;
    line-height: 2.4em;
    font-weight: normal;

}
.shop-list dt:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    top: 50%;
    margin-top: -5px;
    border: 6px solid transparent;
    border-top: 9px solid #4b251f;

}
.shop-list dt:hover{
    opacity: .7;

}
.shop-list dl:nth-child(even) dt{
    background: url(../images/goods/bg_list_02.png);

}
.shop-list dt.active:before{
    content:"Close";

}
.shop-list dt.active:after{
    margin-top: -10px;
    border: 6px solid transparent;
    border-bottom: 9px solid #4b251f;

}
.shop-list dd{
    display: none;
    padding: 10px 0;

}
.shop-list li{
    overflow: hidden;
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #FFF;

}
.shop-list li h4{
    float: left;
    width: 280px;

}
.shop-list li p{
    margin-left: 300px;
    margin-right: 200px;

}
.shop-list li a{
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 80px;
    padding-left:20px;
    line-height: 32px;
    margin-top: -16px;
    color: #FFF;
    border: 1px solid;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;

}
.shop-list li a:before{
    content:"";
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -4px;
    border: 4px solid transparent;
    border-left: 6px solid #FFF;

}
.shop-list li a:hover{
    opacity: .5;

}
.bnr-cam{
    margin: 0 -30px 16px;
    background: url(../images/goods/ico_x.png) center center no-repeat;
}
.bnr-cam li{
    position: relative;
    box-sizing: border-box;
    float: left;
    width: 50%;
    padding: 0 30px;
    background: 0 0 no-repeat;

}
.bnr-cam li a{
    display: block;
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 80px;
    padding-left: 20px;
    margin-left: -50px;
    line-height: 32px;
    margin-top: -16px;
    color: #4b251f;
    border: 1px solid;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;

}
.bnr-cam li a:before{
    content:"";
    position: absolute;
    left: 10px;
    top: 50%;
    margin-top: -4px;
    border: 4px solid transparent;
    border-left: 6px solid #4b251f;

}
.bnr-cam li a:hover{
    opacity: .5;

}
/* NEWS */
.news{
    margin: 0 -25px;
}
.news:after, .news:before {
    content: "";
    display: table;
    clear: both;

}
.news li{
    position: relative;
    float: left;
    box-sizing: border-box;
    padding: 0 25px;
    behavior: url('/js/boxsizing.htc');
    width: 33.33333%;
    margin-bottom: 30px;

}
.news li.new:after{
    content: url(../images/common/ico_new.png);
    position: absolute;
    top: -25px;
    left: 20px;

}
.news li a{
    display: block;
    text-align: left;
    color: #FFF;

}
.news li p{
    height: 75px;

}
.news li time{
    font-size:12px;
    font-size: 1.2rem;
    color: #fdff35;

}
.news li span{
    display: block;
    border-style: solid;
    border-width: 17px;
    -webkit-border-image: url(../images/news/line.png) 17 repeat;
            border-image: url(../images/news/line.png) 17 fill repeat;
    margin-bottom: 10px;

}
.news li span img{
    display: block;
    width: 100%;

}
/* ///////////////////////////////////////////////////////////////////////
    max 768px
///////////////////////////////////////////////////////////////////////*/
@media screen and (max-width: 768px){
    /* PARTS
/////////////////////////////////////////////*/
    .grid > *{
        float:none;
        width:auto !important;
        margin-bottom:30px;

    }
    .pc-none{
        display:block;

    }
    .sp-none{
        display:none;

    }
    .hv:hover{
        opacity:1;

    }
    .sp-fs14{
        font-size:1.4rem;

    }
    .sp-fs12{
        font-size:1.2rem;

    }
    /* LAYOUT
///////////////////////////////////////////////////*/
    /* base
---------------------------------------------------*/
    #wrapper{
        min-width:0;
        width:100%;

    }
    #header{
        width:auto;
        padding:10px 0 0;

    }
    #navigation{

}
    #main{
        position:relative;
        margin-top:-6%;
        padding-bottom:0px;

    }
    #mainContents{
        position:relative;
        width:auto;
        padding:0;

    }
    #footer{
        position:relative;
        line-height:1.6;

    }
    #footer .ft__inr{
        padding:15px 0;

    }
    #footer small{
        font-size:1rem;

    }
    #footer p{
        font-size:1.2rem;

    }
    /* header
---------------------------------------------------*/
    .hd .hd__inr{
        padding:0 12.5%;

    }
    .hd .hd__inr .hd__logo{
        width:100%;
        height:auto;

    }
    .hd .hd__inr .hd__logo a{
        width:100%;
        height:0;
        padding-top:34%;
        background-size:100%;

    }
    /* gnav
---------------------------------------------------*/
    .gnav{
        background-size:10px;

    }
    .gnav:after{
        top:auto;
        bottom:0;
        height:2px;

    }
    .gnav ul{
        position:relative;
        overflow:hidden;
        left:0;
        float:none;
        height:auto;
        padding:24px 0 12px;

    }
    .gnav li{
        position:relative;
        left:0;
        float:left;
        width:33.33333%;
        height:0;
        padding-top:13.33332%;

    }
    .gnav li:after{
        position:absolute;
        top:50%;
        right:0;
        margin-top:-12px;
        width:2px;
        height:24px;
        background:url(../images/common/nav_line.png) 0 0 no-repeat;
        content:"";

    }
    .gnav li:nth-child(3n):after{
        content:none;

    }
    .gnav li a, .gnav li span{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-position:center center;
        background-repeat:no-repeat;
        background-size:90%;

    }
    .gnav li a:hover{
        background-position:center center;

    }
    .gnav__news:before{
        content:"";

    }
    .gnav__news a{
        background-image:url(../images/common/nav_news_sp.png);

    }
    .gnav__story a{
        background-image:url(../images/common/nav_story_sp.png);

    }
    .gnav__correlation a{
        background-image:url(../images/common/nav_correlation_sp.png);

    }
    /* main
---------------------------------------------------*/
    .main-cnts .main-cnts__inr{
        position:relative;
        width:auto;
        border-left:none;
        border-right:none;
        box-shadow:0 0 4px rgba(0,0,0,.4);

    }
    .main-cnts .main-cnts__top{
        top:0;
        height:2px;
        width:100%;
        background:rgb(146,113,49);
        background:-webkit-linear-gradient(left, rgba(146,113,49,1) 0%,rgba(215,179,70,1) 50%,rgba(146,113,49,1) 100%);
        background:linear-gradient(to right, rgba(146,113,49,1) 0%,rgba(215,179,70,1) 50%,rgba(146,113,49,1) 100%);
        filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#927131', endColorstr='#927131',GradientType=1 );

    }
    .main-cnts .main-cnts__top:before, .main-cnts .main-cnts__top:after{
        content:none;

    }
    .main-cnts .main-cnts__bottom{
        bottom:0;
        width:100%;
        height:0;
        padding-top:7.34375%;
        margin-bottom:-5%;
        background:url(../images/common/line_main_bottom_sp.png) center 0 no-repeat;
        background-size:100%;

    }
    .main-cnts .main-cnts__bottom:before, .main-cnts .main-cnts__bottom:after{
        content:none;

    }
    /* Contents
///////////////////////////////////////////////////*/
    /* top page
---------------------------------------------------*/
    #index #header{
        padding:10px 0 0;

    }
    #index .hd .hd__inr .hd__logo{
        width:100%;
        height:auto;

    }
    #index .hd .hd__inr .hd__logo a{
        width:100%;
        height:auto;

    }
    #index #main{
        margin-top:-12%;
        padding-bottom:30px;

    }
    #index #navigation:after{
        top:0;
        bottom:auto;

    }
    #index .gnav ul{
        padding:12px 0 12px;

    }
    .main-visual{
        overflow:hidden;
        position:relative;
        width:auto;
        padding-top:5.33333%;

    }
    .main-visual__inr{
        overflow:hidden;
        position:relative;
        width:auto;
        height:0;
        padding-top:82.66667%;
        background:url(../images/top/main_bg_sp.png) center 0 no-repeat;
        background-size:100%;

    }
    .main-visual__ph{
        height:0;

    }
    .main-visual__ph .ph01{
        top:2.25806%;
        left:1.86667%;
        width:31.73333%;

    }
    .main-visual__ph .ph02{
        top:33.87097%;
        left:3.73333%;
        width:28.13333%;

    }
    .main-visual__ph .ph03{
        top:11.6129%;
        left:25.73333%;
        width:24.93333%;

    }
    .main-visual__ph .ph04{
        z-index:2;
        top:20.16129%;
        left:52.26667%;
        width:24%;

    }
    .main-visual__ph .ph05{
        top:4.03226%;
        left:71.6%;
        width:22.26667%;

    }
    .main-visual__ph .ph06{
        z-index:2;
        top:63.54839%;
        left:54%;
        width:28.53333%;

    }
    .main-visual__ph .ph07{
        top:42.25806%;
        left:73.6%;
        width:22.93333%;

    }
    .main-visual__ph .illust, .main-visual__ph .chr{
        z-index:3;
        top:0;
        left:0;
        width:100%;
        -webkit-transform:scale(1);
            -ms-transform:scale(1);
                transform:scale(1);

    }
    .main-visual__news{
        top:66.12903%;
        left:5.33333%;
        width:40%;
        padding:23px 5px 3px;
        background-image:url(../images/top/main_ttl_news_sp.png);
        background-size:85px;

    }
    .main-visual img{
        display:block;

    }
    .sub{
        width:auto;
        margin:40px auto 0;
        padding:0 20px 2px;

    }
    .yt-area{
        width:auto;
        height:auto;
        padding:0px;
        margin:0 auto 20px;
        background:none;
        border-style:solid;
        border-width:25px;
        -webkit-border-image:url(../images/top/line_video.png) 50 repeat;
                border-image:url(../images/top/line_video.png) 50 fill repeat;

    }
    .bnr ul{
        margin:0 -5px 10px;

    }
    .bnr li{
        box-sizing:border-box;
        width:50%;
        float:left;
        margin:0 0 10px;
        padding:0 5px;

    }
    .social-area__box{
        overflow:hidden;
        position:relative;
        float:none;
        width:auto;
        height:auto;
        margin:0 0 10px;
        background:url(../images/top/bg_tw_sp.png) 0 0 repeat;
        border-style:solid;
        border-color:#f1fbfb;
        border-width:25px;
        -webkit-border-image:url(../images/top/line_tw.png) 50 repeat;
                border-image:url(../images/top/line_tw.png) 50 fill repeat;
        box-shadow:1px 1px 2px rgba(0,0,0, .4);

    }
    .social-area__box:after{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:0;
        padding-top:10.71429%;
        background:url(../images/top/ttl_tw.png) center center no-repeat;
        background-size:100%;
        content:"";

    }
    .social-area__box--insta{
        background:url(../images/top/bg_insta_sp.png) 0 0 repeat;
        -webkit-border-image:url(../images/top/line_insta.png) 50 repeat;
                border-image:url(../images/top/line_insta.png) 50 fill repeat;

    }
    .social-area__box--insta:after{
        background-image:url(../images/top/ttl_insta.png);

    }
    .tw-timeline{
        padding:12.5% 10px 0 0!important;
        width:auto;

    }
    .tw-timeline .twitter-timeline{
        width:100%;
        box-sizing:border-box;

    }
    .instafeed{
        padding:12.5% 10px 0 0!important;
        margin:0 -5px;

    }
    .no-borderimage .tw-area__box{
        behavior:url(/js/PIE.htc);

    }
    /* lower page
---------------------------------------------------*/
    .section{
        overflow:hidden;
        position:relative;
        padding:24px 20px;
        color:#FFF;

    }
    .section .section__ttl{
        padding:0 0 24px 0;

    }
    .section .section__sentence p{
        margin-bottom:24px;

    }
    .btn-top{
        float:none;
        width:200px;
        margin:24px auto ;

    }
    .btn-top a{
        width:200px;
        height:42px;
        background:url(../images/common/btn_top_sp.png) 0 0 no-repeat;
        background-size:200px;

    }
    .btn-top a:hover{
        background-position:0 0;

    }
    /* story */
    .section--story{
        background:url(../images/story/bg_sec_sp.png) center bottom 20px no-repeat;
        background-size:100%;
        padding-bottom:50%;

    }
    /* correlation */
    .section--correlation{
        position:relative;
        background:none;
        height:auto;
        margin:0 -20px;

    }
    .correlation{
        position:relative;
        height:0;
        padding-top:213.33333%;
        padding-bottom:6.66667%;
        background:url(../images/correlation/bg_sec_sp.png) center 0 no-repeat;
        background-size:100%;

    }
    .correlation li{
        position:absolute;
        width:21.33333%;

    }
    .correlation li img{
        width:100%;

    }
    .correlation .chr-01{
        top:38.18182%;
        left:65.33333%;

    }
    .correlation .chr-02{
        top:1.51515%;
        left:66.66667%;

    }
    .correlation .chr-03{
        top:18.66667%;
        left:38.66667%;

    }
    .correlation .chr-04{
        top:38.9697%;
        left:9.73333%;

    }
    .correlation .chr-05{
        top:1.51515%;
        left:8%;

    }
    .correlation .chr-06{
        top:78.48485%;
        left:10%;

    }
    .correlation .chr-07{
        top:78.18182%;
        left:65.33333%;

    }
    .correlation .chr-08{
        top:58.48485%;
        left:38.66667%;

    }
    .correlation .btn-insta{
        bottom:-53.125%;
        left:0;
        right:0;
        width:150%;
        height:0;
        margin:0 -16.66667%;
        padding-top:25%;
        background:url(../images/correlation/btn_insta_sp.png) 0 0 no-repeat;
        background-size:100%;

    }
    .correlation .btn-insta:hover{
        background-position:0 0;

    }
    /* profile */
    .section--profile{
        background:url(../images/profile/bg_sec_sp.png) center top 10% no-repeat;
        background-size:100%;

    }
    .profile{
        width:auto;
        margin:0 0 24px;

    }
    .profile figure{
        text-align:center;
        margin-bottom:24px;

    }
    .profile dl{
        position:relative;
        width:auto;

    }
    .profile dl dt{
        display:block;
        text-align:center;

    }
    .profile dl dd p{
        margin-bottom:24px;

    }
    .profile .btn-back a{
        margin:0 auto;
        width:152px;
        height:27px;
        background:url(../images/profile/btn_back_sp.png) 0 0 no-repeat;
        background-size:100%;

    }
    .prfile-fig{
        position:relative;
        top:0;
        left:0;

    }
    /* comic */
    .section--comic .bnr{
        width:auto;

    }
    /* goods */
    .goods h3{
        margin-bottom:8px;
        font-size:1.6rem;
        text-align:center;

    }
    .goods h3 span{
        font-size:1.2rem;

    }
    .goods .goods__list{
        margin:0 -5px 16px;

    }
    .goods .goods__list li{
        box-sizing:border-box;
        float:left;
        width:33.333%;
        padding:0 5px;
        margin-bottom:5px;

    }
    .goods .goods__list li:nth-child(4){
        margin-left:16.666%;

    }
    .goods02 h3{
        margin-bottom:8px;
        font-size:1.8rem;

    }
    .goods02 h3 span{
        position:relative;

    }
    .goods02 h3 span:before{
        content:"★ ";

    }
    .goods02 h3 span:after{
        content:" ★";

    }
    .goods02 figure{
        margin-bottom:20px;
        text-align:center;

    }
    .goods03{
        margin:0 -25px;

    }
    .btn-goods a{
        width:210px;
        height:35px;
        margin:0 auto;
        background-image:url(../images/goods/btn_goods_sp.png);
        background-size:100%;

    }
    .btn-goods a:hover{
        background-position:0 0;

    }
    .btn-goods02 a{
        width:140px;
        height:30px;
        background:url(../images/goods/btn_goods02_sp.png) 0 0 no-repeat;
        background-size:100%;

    }
    .btn-goods02 a:hover{
        background-position:0 -0;

    }
    .btn-goods03 a{
        display:block;
        margin:0 auto;
        width:190px;
        height:60px;
        background:url(../images/goods/btn_goods03_sp.png) 0 0 no-repeat;
        background-size:100%;

    }
    .btn-goods03 a:hover{
        background-position:0 0;

    }
    .cam02 .cam02__fig02{
        position:relative;
        top:10px;
        right:0;

    }
    .shop-list{
        margin-bottom:40px;

    }
    .shop-list dt{
        font-size:1.8rem;

    }
    .shop-list dt:before{
        content:"Open";
        position:absolute;
        top:0;
        right:30px;
        font-size:1.4rem;
        line-height:2.6em;
        font-weight:normal;

    }
    .shop-list dt:after{
        margin-top:-3px;
        border:4px solid transparent;
        border-top:6px solid #4b251f;

    }
    .shop-list dt:hover{
        opacity:1;

    }
    .shop-list dt.active:after{
        margin-top:-7px;
        border:4px solid transparent;
        border-bottom:6px solid #4b251f;

    }
    .shop-list li h4{
        float:none;
        width:auto;
        margin-bottom:8px;

    }
    .shop-list li p{
        margin-left:0;
        margin-right:0;
        margin-bottom:8px;
        font-size:1.2rem;

    }
    .shop-list li a{
        display:block;
        position:relative;
        top:auto;
        margin:0 auto;
        padding-left:10px;
        font-size:1.2rem;

    }
    .shop-list li a:hover{
        opacity:1;

    }
    .bnr-cam{
        margin:0 0 16px;
        background:none;

    }
    .bnr-cam li{
        float:none;
        width:100%;
        padding:0;

    }
    .bnr-cam li img{
        width:100%;
        display:block;

    }
    .bnr-cam li a{
        display:block;
        position:absolute;
        bottom:5%;
        padding-left:10px;
        font-size:1.2rem;

    }
    .bnr-cam li a:hover{
        opacity:1;

    }
    /* NEWS */
    .news{
        margin:0 -5px 0;

    }
    .news li{
        width:50%;
        padding:0 5px;
        margin-bottom:30px;

    }
    .news li.new:after{
        content:"";
        top:-15px;
        left:5px;
        width:36px;
        height:20px;
        background:url(../images/common/ico_new.png) 0 0 no-repeat;
        background-size:100%;

    }
    .news li p{
        height:63px;
        font-size:1.2rem;

    }
    .news li time{
        font-size:1rem;

    }
    .news li span{
        margin-bottom:5px;

    }

}
@media screen and (max-width: 375px){
    .main-visual__news p{
        font-size:1rem;
        line-height:1.4;

    }

}