/*!
 * CSS設定
 */

@charset "UTF-8";

/* ==========================================================================
   TOPページ
   ========================================================================== */

main {
    margin-bottom: 35px;
}

main #mv {
    position: relative;
    height: 794px;
    width: 1092px;
    border: 4px solid rgb(255 ,255 ,255);
    background-color: rgb(255 ,255 ,255);
    overflow: hidden;
    z-index: -2;
}

/* MVアニメーション */
main #mv .anime ,
main #ex .anime{
    position: absolute;
    opacity: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

main #mv .layer5 ,
main #mv .layer4 ,
main #mv .layer3 ,
main #mv .layer2 ,
main #mv .layer1 ,
main #mv .fin {
    left: 0;
    top: 0;
}

main #mv .layer4 ,
main #mv .layer5 {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
}

main #mv .layer3 {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
}

main #mv .layer2 {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
}

main #mv .layer2 {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

main #mv .logo {
    top: 600px;
    left: calc(50% - 230px);
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

main #mv p {
    top: 5px;
}

main #mv .copy1 {
    right: 5px;
}

main #mv .copy2 {
    left: 5px;
}

main #mv .release {
    top: 25px;
    left: 85px;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

main #mv .end {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}
/* ここまで */

main #ex {
    position: relative;
}

main #ex .master {
    position: absolute;
    top: -400px;
    left: calc(50% + 50px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

main #ex .master a img {
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

main #ex .master a:hover img {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

main #ex .end {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.home .mfp-img {
    cursor: pointer;
}

.home .mfp-title {
    font-size: 1.3rem;
}

main #topic {
    font-size: 0;
    text-align: center;
    position: relative;
    margin-top: -30px;
    /*
    z-index: 100;
    */
}

main #topic li {
    display: inline-block;
    height: 180px;
    width: 260px;
    margin: 0 3px;
}

main #topic li a {
    position: relative;
    display: block;
}

main #topic li a img {
    position: absolute;
    top: 0;
    left: 0;
}

main #topic li a img + img {
    opacity: 0;
}

#shortcut {
    position: relative;
    width: 1100px;
    margin: 0 auto 30px;
    padding-bottom: 50px;
}

#shortcut ul {
    font-size: 0;
    width: 1100px;
    margin: 0 auto;
}

#shortcut ul li {
    position: relative;
    display: inline-block;
    padding: 10px;
}

#shortcut ul .new:before {
    content: url(../../commons/img/new.png);
    position: absolute;
    display: block;
    top: -3px;
    left: -3px;
    height: 57px;
    width: 57px;
    z-index: 10;
}

#shortcut ul li a:not(.except) {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#shortcut ul li a:not(.except):hover {
    opacity: 0.7;
}

#shortcut ul li a img {
    -webkit-box-shadow: rgb(110, 113, 117) 1px 1px 5px;
    box-shadow: rgb(110, 113, 117) 1px 1px 5px;
}

#shortcut p {
    font-size: 0;
    position: absolute;
    bottom: 15px;
    right: 10px;
    border: 1px solid rgb(129 ,102 ,53);
}

#shortcut p a {
    display: block;
    height: 100%;
    width: 100%;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#shortcut p a:hover {
    background-color: rgb(47 ,40 ,38);
}


#clumn1 {
    font-size: 0;
    margin-bottom: 50px;
}

#clumn1 > div {
    display: inline-block;
    vertical-align: top;
    height: 790px;
}

#comic {
    text-align: center;
    width: 290px;
    margin-right: 7px;
    background: url(../../top/img/comic_back.png) center top no-repeat;
}

#comic section > h1 {
    position: relative;
    z-index: 10;
}

#comic section > h1:before ,
#comic section > h1:after {
    content: url("../../top/img/pin.png");
    position: absolute;
    top: 50px;
    height: 33px;
    width: 31px;
}

#comic section > h1:before {
    left: 15px;
}

#comic section > h1:after {
    right: 28px;
}

#comic img {
    margin-top: -5px;
}

#news {
    width: 490px;
    margin: 0 8px;
}

#news section > h1 {
    margin: 20px 0 10px;
}

#news section > .social {
    line-height: 1;
    vertical-align: baseline !important;
    text-align: center;
    margin-bottom: 10px;
}

#news ul {
    height: 690px;
    padding: 0 15px;
}

#news ul li {
    padding: 20px 0 10px;
    border-top: 1px solid rgb(255 ,255 ,255);
    border-bottom: 1px solid rgb(225 ,204 ,204);
}

#news ul li:first-child {
    border-top: none;
}

#news ul li:last-child {
    border-bottom: none;
}

#news ul .new time:after {
    content: "NEW";
    color: rgb(209, 143, 42);
    font-size: 1rem;
    margin-left: 5px;
}

#news ul li img {
    float: left;
    margin-right: 10px;
}

#news ul li h2 {
    margin-bottom: 7px;
}

#news ul li p {
    overflow: hidden;
}

#twitter {
    width: 290px;
    margin-left: 7px;
    background: url("../img/pattern2.png") ,rgb(255 ,255 ,255);
}

#twitter section {
    margin-top: 15px;
}

#twitter section:first-child {
    margin-bottom: 20px;
}

#twitter section > h1 {
    margin-bottom: 5px;
}

#twitter section > div {
    width: 266px;
    margin: 0 auto;
    border: 1px solid rgba(15 ,70 ,100 ,0.117647);
}

#clumn2 {
    font-size: 0;
    padding-bottom: 250px;
}

#clumn2 > div {
    display: inline-block;
    vertical-align: top;
    height: 350px;
}

#ad {
    position: relative;
    width: 795px;
    margin-right: 8px;
}

/*
#ad .randomimg {
    cursor: pointer;
}
*/

#ad > p {
    position: absolute;
    top: 310px;
    left: 438px;
    border: 1px solid rgb(129 ,102 ,53);
}

#ad > p a {
    display: block;
    height: 100%;
    width: 100%;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#ad > p a:hover {
    background-color: rgb(47 ,40 ,38);
}

#magazine {
    width: 290px;
    margin-left: 7px;
}

#magazine aside > h1 {
    margin-bottom: 5px;
}

#magazine ul {
    height: 325px;
    padding: 0 15px;
}

#magazine ul li {
    padding: 15px 0;
    border-top: 1px solid rgb(255 ,255 ,255);
    border-bottom: 1px solid rgb(225 ,204 ,204);
}

#magazine ul li:first-child {
    border-top: none;
}

#magazine ul li:last-child {
    border-bottom: none;
}

#magazine ul li a img {
    float: left;
    margin-right: 10px;
}

#magazine ul li p {
    line-height: 1.5;
    text-align: justify;
    overflow: hidden;
}

#magazine ul li p a {
    display: block;
    margin-bottom: 5px;
}

/* ==========================================================================
   STORYページ
   ========================================================================== */

#story-wrapper {
    position: relative;
}

#story-wrapper > h1 {
    margin-bottom: 40px
}

#story-wrapper div ul {
    display: inline-block;
    font-size: 0;
    margin-bottom: 50px;
}

#story-wrapper div ul li {
    display: inline-block;
    position: relative;
    width: 230px;
    background-color: rgb(255 ,255 ,255);
    margin: 10px;
    padding: 5px;
    opacity: 0;
}

#story-wrapper div ul li:before ,
#story-wrapper div ul li:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 13px;
    left: 10px;
    height: 25%;
    width: 50%;
    background: rgb(47, 40, 38);
    -webkit-box-shadow: 0 10px 10px rgb(47, 40, 38);
    box-shadow: 0 10px 10px rgb(47, 40, 38);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#story-wrapper div ul li:after {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#story-wrapper div p {
    margin-bottom: 35px;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#story-wrapper div .slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#story-wrapper #guide {
    position: absolute;
    top: 0;
    right: 120px;
}

#story-wrapper #guide a img {
    -webkit-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

#story-wrapper #guide a:hover img {
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

/* ==========================================================================
   CHARCTERページ
   ========================================================================== */

#character-wrapper > h1 {
    margin-bottom: 20px
}

#character-wrapper ol {
    font-size: 0;
    font-family: 'Neuton', serif;
    font-weight: 400;
    margin-bottom: 10px;
}

#character-wrapper ol li {
    display: inline-block;
    height: 20px;
    width: 140px;
}

#character-wrapper ol li a {
    line-height: 20px;
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#character-wrapper .category li .active {
    background-color: rgb(47 ,40 ,38);
}

#character-wrapper .category li a:not(.active):hover {
    color: rgb(255 ,255 ,255);
    background-color: rgb(47 ,40 ,38);
}

#character-wrapper section > div {
    position: relative;
    height: 1300px;    
}

#character-wrapper section h1 {
    position: absolute;
    top: 50px;
    left: 40px;
}

#character-wrapper section .profile {
    position: absolute;
    top: 235px;
    left: 40px;
}

#character-wrapper section .serif {
    position: absolute;
    top: 100px;
    right: 40px;
}

#character-wrapper section .roughimg {
    position: absolute;
    top: 1150px;
    right: 40px;
}

#character-wrapper section .roughimg p {
    text-align: left;
}

#character-wrapper section .roughimg ul {
    font-size: 0;
}

#character-wrapper section .roughimg ul li {
    display: inline-block;
    margin: 5px;
    -webkit-box-shadow: rgb(110 ,113, 117) 1px 1px 3px;
    box-shadow: rgb(110 ,113, 117) 1px 1px 3px;
}

#character-wrapper section .costume {
    position: absolute;
    top: 210px;
    left: 50px;
}

#character-wrapper section .costume li {
    float: left;
    height: 23px;
    width: 100px;
}

#character-wrapper section .costume li:first-child {
    width: 107px;
    background: url(../../character/img/samplevoice.png) left bottom no-repeat;
}

#character-wrapper section .costume li a {
    display: block;
    height: 100%;
    width: 100%;
    border: 1px solid rgb(47, 40, 38);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#character-wrapper section .costume li a img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#character-wrapper section .costume li a:hover img ,
#character-wrapper section .costume li .current img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#character-wrapper section .voice {
    position: absolute;
    top: 180px;
    left: 50px;
}

#character-wrapper section .voice li {
    float: left;
    height: 23px;
    width: 100px;
}

#character-wrapper section .voice li:first-child {
    width: 107px;
    background: url(../../character/img/samplevoice.png) left top no-repeat;
}

#character-wrapper section .voice li a {
    display: block;
    height: 100%;
    width: 100%;
    background-image: url(../../character/img/samplevoice.png);
}

#character-wrapper section .voice li .voice1 {
    background-position: -110px top;
}

#character-wrapper section .voice li .voice1:hover {
    background-position: -110px -23px;
}

#character-wrapper section .voice li .voice2 {
    background-position: -209px top;
}

#character-wrapper section .voice li .voice2:hover {
    background-position: -209px -23px;
}

#character-wrapper section .voice li .voice3 {
    background-position: -308px top;
}

#character-wrapper section .voice li .voice3:hover {
    background-position: -308px -23px;
}

#character-wrapper section .voice li .playing ,
#character-wrapper section .voice li .playing:hover {
    background-position: left -23px;
}

#character-wrapper section .stand {
    position: absolute;
    top: 0;
    right: 0;
    height: 1225px;
    width: 793px;
}

#character-wrapper section .stand li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

#character-wrapper section .stand .current {
    opacity: 1;
}

#character-wrapper section .coschange {
    position: absolute;
    top: 200px;
    right: 175px;
    height: 540px;
    width: 400px;
}

#character-wrapper section .coschange ol {
    position: absolute;
    top: 250px;
    height: 40px;
    width: 100%;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    opacity: 0.25;
}

#character-wrapper section .coschange:hover ol {
    opacity: 1;
}

#character-wrapper section .coschange ol li {
    position: absolute;
    top: 0;
    height: 40px;
    width: 40px;
    background-color: rgb(47, 48, 38);
    border-radius: 20px;
    -webkit-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
    transition: all 0.2s cubic-bezier(0, 0, 0, 1);
}

#character-wrapper section .coschange ol li:hover {
    background-color: rgb(103, 22, 42);
}

#character-wrapper section .coschange ol li:first-child {
    left: 0;
}

#character-wrapper section .coschange:hover ol li:first-child {
    left: 15px;
}

#character-wrapper section .coschange ol li:last-child {
    right: 0;
}

#character-wrapper section .coschange:hover ol li:last-child {
    right: 15px;
}

#character-wrapper section .coschange ol li a {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

#character-wrapper section .coschange ol li:first-child a:after ,
#character-wrapper section .coschange ol li:last-child a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    height: 15px;
    width: 15px;
    border-top: 1px solid rgb(255, 255, 255);
    border-right: 1px solid rgb(255, 255, 255);
}

#character-wrapper section .coschange ol li:first-child a:after {
    margin: auto auto auto 15px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

#character-wrapper section .coschange ol li:last-child a:after {
    margin: auto 15px auto auto;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#character-wrapper section .ani_target {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#character-wrapper section .slidein {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

/* BxSlider用 */
#character-wrapper #bx-pager {
    padding-top: 20px;
}

#character-wrapper #bx-pager a {
    margin: 0 5px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#character-wrapper #bx-pager a:hover ,
#character-wrapper #bx-pager .active {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#character-wrapper .bx-viewport {
    height: 1300px;
}

#character-wrapper .bx-controls-direction {
    position: relative;
}

#character-wrapper .bx-prev ,
#character-wrapper .bx-next {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: -800px;
    display: block;
    height: 72px;
    width: 36px;
    z-index: 999;
}

#character-wrapper .bx-prev {
    left: -50px;
    background: url("../../character/img/prev.png") center center no-repeat;
}

#character-wrapper .bx-next {
    right: -50px;
    background: url("../../character/img/next.png") center center no-repeat;
}
/* BxSlider用 ここまで */

/* ==========================================================================
   GRAPHICページ
   ========================================================================== */

#graphic-wrapper > h1 {
    margin-bottom: 40px
}

#graphic-wrapper div ul {
    display: inline-block;
    font-size: 0;
    margin-bottom: 30px;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#graphic-wrapper div .slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#graphic-wrapper div ul li {
    display: inline-block;
    position: relative;
    width: 230px;
    background-color: rgb(255 ,255 ,255);
    margin: 10px 10px 50px;
    padding: 5px;
}

#graphic-wrapper div ul li:before ,
#graphic-wrapper div ul li:after {
    z-index: -1;
    content: "";
    position: absolute;
    bottom: 13px;
    left: 10px;
    height: 25%;
    width: 50%;
    background: rgb(47, 40, 38);
    -webkit-box-shadow: 0 10px 10px rgb(47, 40, 38);
    box-shadow: 0 10px 10px rgb(47, 40, 38);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#graphic-wrapper div ul li:after {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#graphic-wrapper div ul li span {
    position: absolute;
    top: -22px;
    left: 0;
    border-left: 5px solid rgb(103, 22, 42);
}

#graphic-wrapper div ul .new span:after {
    content: "NEW";
    color: rgb(209, 143, 42);
    font-size: 1rem;
    margin-left: 5px;
}

#graphic-wrapper div ul + p {
    margin-bottom: 30px;
}

/* ==========================================================================
   DOWNLOADページ
   ========================================================================== */

#download-wrapper > h1 {
    margin-bottom: 40px
}

#download-wrapper #clumn3 {
    font-size: 0;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#download-wrapper #clumn3.slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#download-wrapper #clumn3 > div {
    display: inline-block;
    vertical-align: top;
}

#download-wrapper #clumn3 #leftclumn {
    width: 290px;
    padding: 0 5px;
}

#download-wrapper #leftclumn .downloadlist section > h1 {
    position: relative;
    height: 35px;
    padding-top: 10px;
    background: url("../img/pattern1.png") ,rgb(47 ,40 ,38);
}

#download-wrapper #leftclumn .downloadlist section > h1:before {
    content: url(../img/sakura.png);
    position: absolute;
    top: -30px;
    left: calc(50% - 23px);
    height: 45px;
    width: 46px;
}

#download-wrapper #leftclumn .downloadlist section ul {
    background-color: rgb(255 ,255 ,255);
}

#download-wrapper #leftclumn .downloadlist section ul li {
    text-align: left;
    padding: 15px 0 15px 15px;
    margin: 0 15px 0 15px;
    border-bottom: 1px dotted rgb(47 ,40 ,38);
}

#download-wrapper #leftclumn .downloadlist section ul li:last-child {
    border: none;
}

#download-wrapper #leftclumn .downloadlist section ul li a {
    position: relative;
    display: block;
    height: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#download-wrapper #leftclumn .downloadlist section ul li a:hover {
    color: rgb(103 ,22 ,42);
    text-decoration: none;
}

#download-wrapper #leftclumn .downloadlist section ul li a:before {
    content: "";
    position: absolute;
    top: 5px;
    left: -18px;
    height: 7px;
    width: 7px;
    border-top: 1px solid rgb(47 ,40 ,38);
    border-right: 1px solid rgb(47 ,40 ,38);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#download-wrapper #leftclumn .downloadlist section ul li a:hover:before {
    border-top: 1px solid rgb(103 ,22 ,42);
    border-right: 1px solid rgb(103 ,22 ,42);
    -webkit-transform: translateX(3px) rotate(45deg);
    transform: translateX(3px) rotate(45deg);
}

#download-wrapper #leftclumn .downloadlist section ul li .new:after {
    content: "NEW";
    color: rgb(209, 143, 42);
    font-size: 1rem;
    margin-left: 5px;
}

#download-wrapper #clumn3 #rightclumn {
    width: 780px;
    padding: 0 5px 0 15px;
}

#download-wrapper #clumn3 #rightclumn section {
    margin-bottom: 100px;
}

#download-wrapper #clumn3 #rightclumn section:last-child {
    margin-bottom: 0;
}

#download-wrapper #clumn3 #rightclumn section .contentsinfo {
    position: relative;
    padding-bottom: 50px;
}

#download-wrapper #clumn3 #rightclumn section .contentsinfo:before,
#download-wrapper #clumn3 #rightclumn section .contentsinfo:after {
    content: "";
    position: absolute;
    height: 49px;
    width: 49px;
    border-top: 1px solid rgb(47 ,40 ,38);
    border-left: 1px solid rgb(47 ,40 ,38);
}

#download-wrapper #clumn3 #rightclumn section .contentsinfo:before {
    top: -95px;
    left: 0;
}

#download-wrapper #clumn3 #rightclumn section .contentsinfo:after {
    right: 0;
    bottom: 0;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#download-wrapper #clumn3 #rightclumn section .contentsinfo iframe ,
#download-wrapper #clumn3 #rightclumn #download05 .contentsinfo img ,
#download-wrapper #clumn3 #rightclumn #download08 .contentsinfo figure img {
    -webkit-box-shadow: rgb(110, 113, 117) 1px 1px 5px;
    box-shadow: rgb(110, 113, 117) 1px 1px 5px;
}

#download02 ul ,
#download07 ul {
    font-size: 0;
    width: 732px;
    margin: 0 auto;
}

#download02 ul li ,
#download07 ul li {
    position: relative;
    display: inline-block;
    padding: 5px 5px 20px;
    margin: 17px 17px 37px;
    background-color: rgb(255, 255, 255);
}

#download07 ul li {
    padding: 5px;
    margin: 17px 17px 47px;
}

#download07 ul li:nth-child(odd) {
    margin-right: 0;
}

#download02 ul li:before ,
#download02 ul li:after ,
#download07 ul li:before ,
#download07 ul li:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 13px;
    left: 10px;
    height: 25%;
    width: 50%;
    background: rgb(47, 40, 38);
    -webkit-box-shadow: 0 10px 10px rgb(47, 40, 38);
    box-shadow: 0 10px 10px rgb(47, 40, 38);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#download02 ul li:after ,
#download07 ul li:after {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#download02 ul li h2 {
    margin-top: 5px;
}

#download07 ul li h2 {
    display: none;
}

#download02 ul li h2 + div ,
#download07 ul li h2 + div {
    position: absolute;
    bottom: -25px;
    left: calc(50% - 20px);
    height: 40px;
    width: 40px;
}

#download02 ul li h2 + div a ,
#download07 ul li h2 + div a {
    display: block;
    height: 100%;
    width: 100%;
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(110 ,113 ,117);
    border-radius: 20px;
}

#download02 ul li h2 + div a:hover ,
#download07 ul li h2 + div a:hover {
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(47, 40, 38);
}

#download02 ul li h2 + div a.playing ,
#download07 ul li h2 + div a.playing {
    background: url(../../download/img/sound_btn.png) right center no-repeat, rgb(47, 40, 38);
}

#download04 figure ,
#download06 figure {
    margin: 0 70px;
    background-color: rgb(255, 255, 255);
}

#download04 figure #bx-pager a img ,
#download06 figure #bx-pager2 a img {
    height: auto;
    width: 160px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

#download04 figure #bx-pager a:hover img ,
#download04 figure #bx-pager a.active img ,
#download06 figure #bx-pager2 a:hover img ,
#download06 figure #bx-pager2 a.active img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

#download04 figure + p ,
#download06 figure + p ,
#download08 figure + p {
    margin: 20px 0 50px;
}

#download04 ol ,
#download06 ol ,
#download08 ol {
    text-align: left;
    margin: 0 30px;
}

#download04 ol li ,
#download06 ol li ,
#download08 ol li{
    -webkit-font-feature-settings: "palt";
    font-feature-settings: "palt";
    text-align: center;
    vertical-align: top;
    display: inline-block;
    width: 180px;
    margin-bottom: 50px;
}

#download04 ol li a ,
#download06 ol li a ,
#download08 ol li a {
    display: block;
    height: 24px;
    width: 24px;
    margin: 0 auto 10px;
    padding: 13px;
    border-radius: 25px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#download04 ol li a:hover ,
#download06 ol li a:hover ,
#download08 ol li a:hover {
    background-color: rgba(103, 22, 42, 0.2);
}

#download05 .contentsinfo img {
    height: auto;
    width: 640px;
}

#download05 ul {
    font-size: 0;
    margin-top: 20px;
}

#download05 ul li {
    display: inline-block;
    vertical-align: middle;
}

#download05 ul li a {
    display: block;
    height: 40px;
    width: 40px;
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(110 ,113 ,117);
    border-radius: 20px;
}

#download05 ul li a:hover {
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(47, 40, 38);
}

#download05 ul li a.playing {
    background: url(../../download/img/sound_btn.png) right center no-repeat, rgb(47, 40, 38);
}

#download05 ul li:last-child {
    line-height: 40px;
    margin-left: 20px;
}

/* ==========================================================================
   SPECIAL / CAMPAIGN / EVENT ページ
   ========================================================================== */

#campaign-wrapper > h1 ,
#special-wrapper > h1 ,
#event-wrapper > h1 {
    margin-bottom: 40px;
}

#campaign-wrapper .slide ,
#special-wrapper .slide ,
#event-wrapper .slide {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

/* キャンペーンまとめページ、スペシャルページまとめ ここから */
#campaign-wrapper.campaign00 ul ,
#special-wrapper.special00 ul {
    font-size: 0;
}

#campaign-wrapper.campaign00 ul li ,
#special-wrapper.special00 ul li {
    position: relative;
    display: inline-block;
    padding: 10px;
}

#campaign-wrapper.campaign00 ul .new:before ,
#special-wrapper.special00 ul .new:before {
    content: url(../../commons/img/new.png);
    position: absolute;
    display: block;
    top: -3px;
    left: -3px;
    height: 57px;
    width: 57px;
    z-index: 10;
}

#campaign-wrapper.campaign00 ul li a ,
#special-wrapper.special00 ul li a{
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#campaign-wrapper.campaign00 ul li a:hover ,
#special-wrapper.special00 ul li a:hover {
    opacity: 0.7;
}

#campaign-wrapper.campaign00 ul li a img ,
#special-wrapper.special00 ul li a img {
    -webkit-box-shadow: rgb(110, 113, 117) 1px 1px 5px;
    box-shadow: rgb(110, 113, 117) 1px 1px 5px;
}

/* キャンペーンまとめページ、スペシャルページまとめ ここまで */

/* 早期予約、通常予約、アリアグラムキャンペーン、シールde ここから */

#campaign-wrapper .caminfo ,
#event-wrapper .evinfo {
    position: relative;
}

#campaign-wrapper .caminfo figure ,
#event-wrapper .evinfo figure {
    margin-bottom: 40px;
}

#campaign-wrapper .caminfo .date ,
#event-wrapper .evinfo .date {
    position: absolute;
    top: -100px;
    right: 130px;
}

#campaign-wrapper.campaign03 .caminfo .date {
    top: -225px;
}

#campaign-wrapper.campaign04 .caminfo .date {
    top: -128px;
}

#campaign-wrapper.campaign05 .caminfo .date {
    top: -214px;
}

#campaign-wrapper.campaign06 .caminfo .date {
    top: -214px;
}

#event-wrapper.event02 .evinfo .date {
    top: -225px;
}

#event-wrapper.event05 .evinfo .date {
    top: -510px;
}

#campaign-wrapper .caminfo .caution ,
#event-wrapper .evinfo .caution {
    width: 650px;
    margin: 0 auto 50px;
}

#campaign-wrapper.campaign03 .caminfo .caution {
    width: 770px;
}

#campaign-wrapper.campaign05 .caminfo .caution {
    width: 570px;
}

#event-wrapper.event06 .evinfo .caution {
    width: 770px;
}

#event-wrapper.event07 .evinfo .caution {
    width: 700px;
}

#campaign-wrapper .caminfo ul ,
#event-wrapper .evinfo ul {
    position: relative;
    width: 540px;
    margin-left: 79px;
    padding-left: 30px;
    border-left: 1px solid rgb(47, 40, 38);
    list-style: disc;
}

#campaign-wrapper.campaign03 .caminfo ul {
    width: 660px;
}

#campaign-wrapper.campaign05 .caminfo ul {
    width: 460px;
}

#event-wrapper.event06 .evinfo ul {
    width: 660px;
}

#event-wrapper.event07 .evinfo ul {
    width: 600px;
}

#campaign-wrapper .caminfo ul li ,
#event-wrapper .evinfo ul li {
    text-align: left;
}

#campaign-wrapper .caminfo ul:before ,
#event-wrapper .evinfo ul:before {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: -70px;
    height: 20px;
    width: 53px;
    background: url(../../special/img/caution.png) center center no-repeat;
}

#campaign-wrapper .caminfo .shoplist ,
#event-wrapper .evinfo .shoplist {
    width: 600px;
    margin: 0 auto 50px;
}

#campaign-wrapper .caminfo .shoplist caption ,
#event-wrapper .evinfo .shoplist caption {
    color: rgb(103, 22, 42);
    font-size: 1.5rem;
    font-weight: bold;
}

#campaign-wrapper .caminfo .shoplist tbody tr:nth-child(even) ,
#event-wrapper .evinfo .shoplist tbody tr:nth-child(even) {
    background-color: rgba(110, 113, 117, 0.1);
}

#campaign-wrapper .caminfo .shoplist th ,
#campaign-wrapper .caminfo .shoplist td ,
#event-wrapper .caminfo .shoplist th ,
#event-wrapper .caminfo .shoplist td ,
#event-wrapper .evinfo .shoplist th ,
#event-wrapper .evinfo .shoplist td {
    padding: 5px;
    border-bottom: 1px solid rgb(110, 113, 117);
}

#campaign-wrapper .caminfo .shoplist th ,
#event-wrapper .evinfo .shoplist th {
    font-size: 1.2rem;
}

#campaign-wrapper .caminfo .shoplist td ,
#event-wrapper .evinfo .shoplist td {
    font-size: 1.3rem;
}

#campaign-wrapper .caminfo .link ,
#event-wrapper .evinfo .link {
    margin-bottom: 40px;
}

#campaign-wrapper .caminfo .link ol ,
#event-wrapper .evinfo .link ol {
    font-size: 0;
}

#campaign-wrapper .caminfo .link ol li ,
#event-wrapper .evinfo .link ol li {
    display: inline-block;
}

#campaign-wrapper .caminfo .link ol li a ,
#event-wrapper .evinfo .link ol li a {
    display: block;
    line-height: 35px;
    text-decoration: none;
    height: 35px;
    margin: 0 10px;
    padding: 0 10px;
    border: 1px solid rgb(103, 22, 42);
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#campaign-wrapper .caminfo .link ol li a:hover ,
#event-wrapper .evinfo .link ol li a:hover {
    background-color: rgba(103, 22, 42, 0.5);
}

#campaign-wrapper .sorry {
    text-align: center;
    margin-bottom: 50px;
}

#campaign-wrapper.campaign05 .caminfo .btn a {
    display: block;
    line-height: 50px;
    text-decoration: none;
    height: 50px;
    width: 400px;
    margin: 0 auto;
    background-color: rgb(103, 22, 42);
    border: 1px solid rgb(103, 22, 42);
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#campaign-wrapper.campaign05 .caminfo .btn {
    margin-bottom: 40px;
}

#campaign-wrapper.campaign05 .caminfo .btn a:hover {
    color: rgb(103, 22, 42);
    background: none;
}

#campaign-wrapper.campaign05 section {
    margin-bottom: 100px;
}

#campaign-wrapper.campaign05 section:last-child {
    margin: 0;
}

#campaign-wrapper.campaign05 section:not(:first-child) ul {
    font-size: 0;
    margin: 0 auto;
}

#twheader ul {
    width: 1146px;
}

#twicon ul {
    width: 728px;
}

#bnw200 ul {
    width: 464px;
}

#bnw380 ul {
    width: 824px;
}

#bnw600 ul {
    width: 602px;
}

#bnw150 ul {
    width: 728px;
}

#bnwex ul {
    width: 864px;
}

#campaign-wrapper.campaign05 section:not(:first-child) ul li {
    display: inline-block;
    margin: 15px;
    
}

#campaign-wrapper.campaign05 section:not(:first-child) ul li img {
    border: 1px solid rgb(47, 40, 38);
}

#twheader ul li img {
    height: auto;
    width: 350px;
}

#twicon ul li img {
    height: auto;
    width: 150px;
}

#twheader div p ,
#twicon div p {
    text-align: center;
}

#bnw200 ul li {
    width: 202px;
}

#bnw380 ul li {
    width: 382px;
}

#bnw600 ul li {
    width: 602px;
}

#bnw150 ul li {
    width: 152px;
}

#bnwex ul li:first-child {
    width: 802px;
}

#bnwex ul li:nth-child(2) {
    width: 602px;
}

#bnwex ul li:last-child {
    width: 202px;
}

#bnw200 ul li input ,
#bnw380 ul li input ,
#bnw600 ul li input ,
#bnw150 ul li input ,
#bnwex ul li input {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    line-height: 2;
    width: 100%;
    border: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: rgb(47, 40, 38);
}

/* 早期予約、通常予約、アリアグラムキャンペーン、シールde ここまで */

/* 店舗特典情報 ここから */

#special-wrapper.special01 > div {
    width: 860px;
    margin: 0 auto;
}

#special-wrapper.special01 ul {
    font-size: 0;
}

#special-wrapper.special01 #status1 li ,
#special-wrapper.special01 #status2 li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0 20px;
}

#special-wrapper.special01 #status2 li {
    padding: 0;
}

#special-wrapper.special01 #status2 li:nth-child(3n+2) {
    padding: 0 10px;
}

#special-wrapper.special01 #status1 li:first-child {
    padding: 0;
}

#special-wrapper.special01 #status1 li:nth-child(even):not(:last-child):after {
    content: "";
    position: absolute;
    top: calc(50% - 200px);
    right: 0;
    height: 400px;
    width: 1px;
    background-color: rgb(47 ,40 ,38);
}

#special-wrapper.special01 #status2 li:not(:nth-child(3n)):after {
    content: "";
    position: absolute;
    top: calc(50% - 150px);
    right: 0;
    height: 300px;
    width: 1px;
    background-color: rgb(47 ,40 ,38);
}

#special-wrapper.special01 #status2 li:last-child:after {
    content: none;
}

#special-wrapper.special01 section > h1 {
    display: none;
}

#special-wrapper.special01 section > p {
    margin-bottom: 20px;
}

#special-wrapper.special01 section > p:last-child {
    height: 22px;
    width: 182px;
    margin: 0 auto 60px;
    border: 1px solid rgb(103, 22, 42);
}

#special-wrapper.special01 section > p:last-child a {
    display: block;
    height: 100%;
    width: 100%;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#special-wrapper.special01 section > p:last-child a:hover {
    background-color: rgba(103, 22, 42, 0.5);
}

/* 店舗特典情報 ここまで */

/* 4コマ漫画 ここから */

#special-wrapper.special02 > div {
    width: 860px;
    margin: 0 auto;
}

#special-wrapper.special02 section > figure {
    margin-bottom: 15px;
}

#special-wrapper.special02 section > h1 {
    margin-bottom: 15px;
}

#special-wrapper.special02 section > ul {
    font-size: 0;
}

#special-wrapper.special02 section > ul li {
    counter-increment: number;
    display: inline-block;
    margin-bottom: 10px;
}

#special-wrapper.special02 section > ul li a {
    display: block;
    padding: 2px 10px;
    -webkit-transition: 0.5s all ease;
    transition: 0.5s all ease;
}

#special-wrapper.special02 section > ul li a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
    background-color: rgb(103, 22, 42);
}

#special-wrapper.special02 section > ul li a:before {
    content: "vol."counter(number);
}

#special-wrapper.special02 section > ul .new a:after {
    content: "NEW";
    color: rgb(209, 143, 42);
    font-size: 1rem;
    margin-left: 5px;
}

#special-wrapper.special02 hr {
    height: 25px;
    margin: 40px 0 50px;
    border: none;
    background: url(../../special/img/4koma_line.png) center center no-repeat;
}

/* 4コマ漫画 ここまで */

/* ゲストイラスト ここから */

#special-wrapper.special03 #clumn3 {
    font-size: 0;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#special-wrapper.special03 #clumn3.slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#special-wrapper.special03 #clumn3 > div {
    display: inline-block;
    vertical-align: top;
}

#special-wrapper.special03 #clumn3 #leftclumn {
    width: 290px;
    padding: 0 5px;
}

#special-wrapper.special03 #leftclumn .illustratorlist section > h1 {
    position: relative;
    height: 35px;
    padding-top: 10px;
    background: url("../img/pattern1.png") ,rgb(47 ,40 ,38);
}

#special-wrapper.special03 #leftclumn .illustratorlist section > h1:before {
    content: url(../img/sakura.png);
    position: absolute;
    top: -30px;
    left: calc(50% - 23px);
    height: 45px;
    width: 46px;
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul {
    background-color: rgb(255 ,255 ,255);
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li {
    text-align: left;
    padding: 15px 0 15px 15px;
    margin: 0 15px 0 15px;
    border-bottom: 1px dotted rgb(47 ,40 ,38);
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li:last-child {
    border: none;
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li a {
    position: relative;
    display: block;
    height: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li a:hover {
    color: rgb(103 ,22 ,42);
    text-decoration: none;
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li a:before {
    content: "";
    position: absolute;
    top: 5px;
    left: -18px;
    height: 7px;
    width: 7px;
    border-top: 1px solid rgb(47 ,40 ,38);
    border-right: 1px solid rgb(47 ,40 ,38);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li a:hover:before {
    border-top: 1px solid rgb(103 ,22 ,42);
    border-right: 1px solid rgb(103 ,22 ,42);
    -webkit-transform: translateX(3px) rotate(45deg);
    transform: translateX(3px) rotate(45deg);
}

#special-wrapper.special03 #leftclumn .illustratorlist section ul li .new:after {
    content: "NEW";
    color: rgb(209, 143, 42);
    font-size: 1rem;
    margin-left: 5px;
}

#special-wrapper.special03 #clumn3 #rightclumn {
    width: 780px;
    padding: 0 5px 0 15px;
}

#special-wrapper.special03 #clumn3 #rightclumn > section > h1 {
    display: none;
}

#special-wrapper.special03 #clumn3 #rightclumn ul {
    font-size: 0;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li {
    counter-increment: number 1;
    vertical-align: top;
    position: relative;
    display: inline-block;
    width: 300px;
    margin: 0 30px 70px;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li figure a img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li figure a:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

#special-wrapper.special03 #clumn3 #rightclumn ul li figure + div {
    position: absolute;
    top: 278px;
    left: 20px;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li figure + div:before ,
#special-wrapper.special03 #clumn3 #rightclumn ul li figure + div:after {
    z-index: -1;
    content: "";
    position: absolute;
    bottom: 13px;
    left: 10px;
    height: 25%;
    width: 50%;
    background: rgb(47, 40, 38);
    -webkit-box-shadow: 0 10px 10px rgb(47, 40, 38);
    box-shadow: 0 10px 10px rgb(47, 40, 38);
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
#special-wrapper.special03 #clumn3 #rightclumn ul li figure + div:after {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li h1 {
    display: inline-block;
    vertical-align: bottom;
    line-height: 45px;
    height: 45px;
    padding: 0 20px;
    background: url("../img/pattern1.png") ,rgb(47 ,40 ,38);
}

#special-wrapper.special03 #clumn3 #rightclumn ul li h1:before {
    content: counter(number, decimal-leading-zero)" |";
    margin-right: 10px;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li h1 + div {
    display: inline-block;
    vertical-align: bottom;
    height: 45px;
    width: 45px;
    background-color: rgb(255, 255, 255);
}

#special-wrapper.special03 #clumn3 #rightclumn ul li h1 + div a .a {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#special-wrapper.special03 #clumn3 #rightclumn ul li h1 + div a:hover .a {
    fill: rgb(103, 22, 42);
}

#special-wrapper.special03 #clumn3 #rightclumn ul li p {
    z-index: -5;
    position: relative;
    text-align: left;
    padding: 40px 20px 20px;
    background-color: rgb(255, 255, 255);
}

/* ゲストイラスト ここまで */

/* 初回限定版特典情報 ここから */

#special-wrapper.special04 .evinfo {
    padding-top: 70px;
}

#special-wrapper.special04 .evinfo ul {
    font-size: 0;
}

#special-wrapper.special04 .evinfo ul > li {
    vertical-align: top;
    display: inline-block;
    width: 550px;
    margin-bottom: 100px;
}

#special-wrapper.special04 .evinfo ul > li:first-child {
    width: 1100px;
}

#special-wrapper.special04 .evinfo ul li figure {
    margin-bottom: 30px;
}

#special-wrapper.special04 .evinfo ul li:last-child figure + p {
    margin-bottom: 50px;
}

#special-wrapper.special04 .evinfo ol {
    font-size: 0;
    margin: 0 auto;
}

#special-wrapper.special04 .evinfo ol li {
    text-align: center;
    display: inline-block;
    width: 200px;
}

#special-wrapper.special04 .evinfo ol li a {
    display: block;
    height: 40px;
    width: 40px;
    margin: 0 auto 10px;
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(110 ,113 ,117);
    border-radius: 20px;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

#special-wrapper.special04 .evinfo ol li a:hover {
    background: url(../../download/img/sound_btn.png) left center no-repeat, rgb(47, 40, 38);
}

#special-wrapper.special04 .evinfo ol li a.playing {
    background: url(../../download/img/sound_btn.png) right center no-repeat, rgb(47, 40, 38);
}

#special-wrapper.special04 .evinfo ol li p:first-of-type {
    margin-bottom: 10px;
}

/* 初回限定版特典情報 ここまで */

#campaign-wrapper .slidein ,
#special-wrapper .slidein ,
#event-wrapper .slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

/* ==========================================================================
   PRODUCTページ
   ========================================================================== */

#product-wrapper > h1 {
    margin-bottom: 40px
}

#product-wrapper section {
    text-align: left;
    padding-left: 257px;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#product-wrapper .slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}
#product-wrapper section > h1 {
    margin-bottom: 20px;
}

#product-wrapper section > p {
    margin-bottom: 70px;
}

/* ==========================================================================
   GOODSページ
   ========================================================================== */

#goods-wrapper > h1 {
    margin-bottom: 40px
}

#goods-wrapper #clumn3 {
    font-size: 0;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#goods-wrapper #clumn3.slidein {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}

#goods-wrapper #clumn3 > div {
    display: inline-block;
    vertical-align: top;
}

#goods-wrapper #clumn3 #leftclumn {
    width: 290px;
    padding: 0 5px;
}

#goods-wrapper #leftclumn .control {
    margin-bottom: 50px;
}

#goods-wrapper #leftclumn .control div:first-child {
    margin-bottom: 10px;
}

#goods-wrapper #leftclumn .control div:first-child a {
    line-height: 70px;
    display: block;
    height: 70px;
    width: 100%;
    border: 1px solid rgb(103 ,22 ,42);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#goods-wrapper #leftclumn .control div:first-child a:hover {
    background-color: rgb(255 ,255 ,255);
}

#goods-wrapper #leftclumn .control div:first-child a img {
    vertical-align: middle;
}

#goods-wrapper #leftclumn .control div:last-child a {
    margin: 0 5px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#goods-wrapper #leftclumn .goodslist section > h1 {
    position: relative;
    height: 35px;
    padding-top: 10px;
    background: url("../img/pattern1.png") ,rgb(47 ,40 ,38);
}

#goods-wrapper #leftclumn .goodslist section > h1:before {
    content: url(../img/sakura.png);
    position: absolute;
    top: -30px;
    left: calc(50% - 23px);
    height: 45px;
    width: 46px;
}

#goods-wrapper #leftclumn .goodslist section ul {
    background-color: rgb(255 ,255 ,255);
}

#goods-wrapper #leftclumn .goodslist section ul li {
    text-align: left;
    padding: 15px 0 15px 15px;
    margin: 0 15px 0 15px;
    border-bottom: 1px dotted rgb(47 ,40 ,38);
}

#goods-wrapper #leftclumn .goodslist section ul li:last-child {
    border: none;
}

#goods-wrapper #leftclumn .goodslist section ul li a {
    position: relative;
    display: block;
    height: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#goods-wrapper #leftclumn .goodslist section ul li a:hover {
    color: rgb(103 ,22 ,42);
    text-decoration: none;
}

#goods-wrapper #leftclumn .goodslist section ul li a:before {
    content: "";
    position: absolute;
    top: 5px;
    left: -18px;
    height: 7px;
    width: 7px;
    border-top: 1px solid rgb(47 ,40 ,38);
    border-right: 1px solid rgb(47 ,40 ,38);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#goods-wrapper #leftclumn .goodslist section ul li a:hover:before {
    border-top: 1px solid rgb(103 ,22 ,42);
    border-right: 1px solid rgb(103 ,22 ,42);
    -webkit-transform: translateX(3px) rotate(45deg);
    transform: translateX(3px) rotate(45deg);
}

#goods-wrapper #clumn3 #rightclumn {
    width: 780px;
    padding: 0 5px 0 15px;
}

#goods-wrapper #clumn3 #rightclumn section {
    margin-bottom: 50px;
}

#goods-wrapper #clumn3 #rightclumn section:last-child {
    margin-bottom: 0;
}

#goods-wrapper #clumn3 #rightclumn section:not(#notice) > div {
    border: 1px solid rgb(47 ,40 ,38);
}

#goods-wrapper #clumn3 #rightclumn section:not(#notice) > div > h1 {
    margin-bottom: 30px;
    background: url("../img/pattern1.png") ,rgb(47 ,40 ,38);
}

#goods-wrapper #clumn3 #rightclumn section .itemimg {
    float: left;
    width: 300px;
    padding: 0 20px 0 19px;
}

#goods-wrapper #clumn3 #rightclumn section .iteminfo {
    float: left;
    text-align: left;
    width: 399px;
    padding: 0 20px;
    overflow: hidden;
}

#goods-wrapper #clumn3 #rightclumn section .iteminfo {
    text-align: left;
    position: relative;
    width: 399px;
    padding: 0 20px;
    overflow: hidden;
}

#goods-wrapper #clumn3 #rightclumn section .shopping {
    clear: left;
    position:relative;
    height: 70px;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .price {
    position: absolute;
    right: 220px;
    bottom: 17px;
    height: 35px;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .price span {
    vertical-align: middle;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .price span:first-child {
    padding: 1px 5px;
    background-color: rgb(103 ,22 ,42);
}

#goods-wrapper #clumn3 #rightclumn section .shopping .price span:nth-child(2) {
    margin: 0 5px 0 10px;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .addcart {
    position: absolute;
    right: 17px;
    bottom: 17px;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .addcart a {
    line-height: 35px;
    position: relative;
    display: block;
    height: 35px;
    width: 170px;
    padding-left: 35px;
    border: 1px solid rgb(103 ,22 ,42);
    background: url("../img/pattern2.png") ,rgb(255 ,255 ,255);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .addcart a:hover {
    color: rgb(47 ,40 ,38);
    border: 1px solid rgb(47 ,40 ,38);
}

#goods-wrapper #clumn3 #rightclumn section .shopping .addcart a:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    height: 35px;
    width: 35px;
    background: url(../../goods/img/cart2.png) center center no-repeat ,rgb(103 ,22 ,42);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#goods-wrapper #clumn3 #rightclumn section .shopping .addcart a:hover:before {
    background: url(../../goods/img/cart2.png) center center no-repeat ,rgb(47 ,40 ,38);
}

#goods-wrapper #notice > div {
    text-align: left;
    padding: 0 20px 20px;
    border: 1px solid rgb(103 ,22 ,42);
}

#goods-wrapper #notice > div p a:hover {
    text-decoration: none;
}

#goods-wrapper #notice > div > p {
    margin-bottom: 15px;
}

#goods-wrapper #notice > div h2 ,
#goods-wrapper #notice > div > section > p {
    margin-bottom: 5px;
}

#goods-wrapper #notice > div h2 + p {
    margin-bottom: 10px;
}

#goods-wrapper #notice ol {
    list-style: decimal;
    margin: 0 0 10px 30px;
}

#goods-wrapper #notice table th ,
#goods-wrapper #notice table td {
    font-size: 1.3rem;
    text-align: center;
    width: 150px;
    padding: 2px;
    border: 1px solid rgb(47 ,40 ,38);
}

/* ==========================================================================
   STAGEページ
   ========================================================================== */

#stage-wrapper > h1 {
    margin-bottom: 40px
}

#stage-wrapper #areamap {
    position: relative;
    height: 830px;
    margin: -50px auto 20px;
    background: url(../../story/img/guide_map.png) center center no-repeat;
}

#stage-wrapper #areamap + p {
    position: relative;
}

#stage-wrapper #areamap + p:before {
    content: url(../../story/img/warning.png);
    position: absolute;
    top: -30px;
    left: 50%;
    height: 23px;
    width: 24px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#stage-wrapper #areamap ul {
    position: absolute;
    top: 190px;
    left: 60px;
    height: 560px;
    width: 1000px;
}

#stage-wrapper #areamap ul li {
    position: absolute;
}

#stage-wrapper #areamap ul li a {
    position: relative;
    display: block;
    line-height: 1;
    padding: 6px 10px;
    background-color: rgb(47, 40, 38);
    -webkit-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
    transition: all 0.2s cubic-bezier(0, 0, 0, 1);
}

#stage-wrapper #areamap ul li a:hover {
    background-color: rgb(103 ,22 ,42);
}

#stage-wrapper #areamap ul li a:before ,
#stage-wrapper #areamap ul li a:after {
    content: "";
    position: absolute;
    -webkit-transition: all 0.2s cubic-bezier(0, 0, 0, 1);
    transition: all 0.2s cubic-bezier(0, 0, 0, 1);
}

#stage-wrapper #areamap ul li a:before {
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background-color: rgb(47 ,40 ,38);
}

/* 右中央吹き出し */
#stage-wrapper #areamap ul .chip_rc a:before {
    top: calc(50% - 4px);
    left: -30px;
}

#stage-wrapper #areamap ul .chip_rc a:after {
    top: calc(50% - 8px);
    left: -9px;
    border-style: solid;
    border-width: 8px 13.9px 8px 0;
    border-color: transparent rgb(47, 40, 38) transparent transparent;
}

#stage-wrapper #areamap ul .chip_rc a:hover {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
}

#stage-wrapper #areamap ul .chip_rc a:hover:before {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}

#stage-wrapper #areamap ul .chip_rc a:hover:after {
    border-color: transparent rgb(103 ,22 ,42) transparent transparent;
}

/* 左中央吹き出し */
#stage-wrapper #areamap ul .chip_lc a:before {
    top: calc(50% - 4px);
    right: -30px;
}

#stage-wrapper #areamap ul .chip_lc a:after {
    top: calc(50% - 8px);
    right: -9px;
    border-style: solid;
    border-width: 8px 0 8px 13.9px;
    border-color: transparent transparent transparent rgb(47 ,40 ,38);
}

#stage-wrapper #areamap ul .chip_lc a:hover {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}

#stage-wrapper #areamap ul .chip_lc a:hover:before {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
}

#stage-wrapper #areamap ul .chip_lc a:hover:after {
    border-color: transparent transparent transparent rgb(103 ,22 ,42);
}

/* 中央上吹き出し */
#stage-wrapper #areamap ul .chip_ct a:before {
    left: calc(50% - 4px);
    bottom: -30px;
}

#stage-wrapper #areamap ul .chip_ct.chip_ct_ex a:before {
    left: calc(20% - 4px);
}

#stage-wrapper #areamap ul .chip_ct a:after {
    right: calc(50% - 8px);
    bottom: -9px;
    border-style: solid;
    border-width: 13.9px 8px 0 8px;
    border-color: rgb(47 ,40 ,38) transparent transparent transparent;
}

#stage-wrapper #areamap ul .chip_ct a:hover {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

#stage-wrapper #areamap ul .chip_ct a:hover:before {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

#stage-wrapper #areamap ul .chip_ct a:hover:after {
    border-color: rgb(103 ,22 ,42) transparent transparent transparent;
}

#stage-wrapper #areamap ul .chip_ct.chip_ct_ex a:after {
    right: calc(80% - 8px);
}

/* 中央下吹き出し */
#stage-wrapper #areamap ul .chip_cb a:before {
    top: -30px;
    left: calc(50% - 4px);
}

#stage-wrapper #areamap ul .chip_cb a:after {
    top: -9px;
    right: calc(50% - 8px);
    border-style: solid;
    border-width: 0 8px 13.9px 8px;
    border-color: transparent transparent rgb(47 ,40 ,38) transparent;
}

#stage-wrapper #areamap ul .chip_cb a:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

#stage-wrapper #areamap ul .chip_cb a:hover:before {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

#stage-wrapper #areamap ul .chip_cb a:hover:after {
    border-color: transparent transparent rgb(103 ,22 ,42) transparent;
}

#stage-wrapper #areamap ul .land_a {
    top: 100px;
    left: 50px;
}

#stage-wrapper #areamap ul .land_b {
    top: 295px;
    left: 330px;
}

#stage-wrapper #areamap ul .land_c {
    top: 270px;
    left: 100px;
}

#stage-wrapper #areamap ul .land_d {
    top: 360px;
    left: 395px;
}

#stage-wrapper #areamap ul .land_e {
    top: 220px;
    left: 445px;
}

#stage-wrapper #areamap ul .land_f {
    top: 340px;
    left: 850px;
}

#stage-wrapper #areamap ul .land_g {
    top: 205px;
    left: 620px;
}

#stage-wrapper #areamap ul .land_h {
    top: 185px;
    left: 395px;
}

#stage-wrapper #areamap ul .land_i {
    top: 135px;
    left: 275px;
}

#stage-wrapper #areamap ul .land_j {
    top: 30px;
    left: 900px;
}

#stage-wrapper .slide {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
    opacity: 0;
}

#stage-wrapper .slidein {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

/* ==========================================================================
   SOCIALボタン調整
   ========================================================================== */

.fb_iframe_widget {
    margin-right: 5px;
}

#___plusone_0 {
    width: 65px !important;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (min-width: 1601px) {
    /* TOPページ */
    body {
        background-position:
        left top ,
        right top ,
        center top ,
        center -60px ,
        center top;
    }
}

@media screen and (max-width: 1600px) {
    /* TOPページ */
    body {
        background-position:
        left top ,
        right top ,
        center top ,
        center -30px ,
        center top;
    }
}

@media screen and (max-width: 1280px) {
    /* TOPページ */
    body {
        background-position:
        left top ,
        right top ,
        center top ,
        center 30px ,
        center top;
    }

}