@charset "UTF-8";

#disney {
    font-family: 'Noto Serif JP', serif;
    max-width: 1200px;
    width: 100%;
    position: relative;
    margin: 0 auto;

}


/***************
cinderella_bk
****************/

#disney .disney-cinderella_bk {
    background-image: url(../../cinderella/commons/images/cinderella_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {
    #disney .disney-cinderella_bk {
        background-image: url(../../cinderella/commons/images/cinderella_bk.jpg);
    }
}

/***************
rapunzel_bk
****************/

#disney .disney-rapunzel_bk {
    background-image: url(../../rapunzel/commons/images/rapunzel_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {

    #disney .disney-rapunzel_bk {
        background-image: url(../../rapunzel/commons/images/rapunzel_bk.jpg);
    }
}


/***************
beast_bk
****************/

#disney .disney-beast_bk {
    background-image: url(../../beast/commons/images/beast_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {

    #disney .disney-beast_bk {
        background-image: url(../../beast/commons/images/beast_bk.jpg);
    }
}


/******
fantasia_bk_pc
****************/

#disney .disney-fantasia_bk {
    background-image: url(../../fantasia/commons/images/fantasia_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {

    #disney .disney-fantasia_bk {
        background-image: url(../../fantasia/commons/images/fantasia_bk.jpg);
    }
}


/***************
steamboat_bk
****************/

#disney .disney-steamboat_bk {
    background-image: url(../../steamboat/commons/images/steamboat_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {

    #disney .disney-steamboat_bk {
        background-image: url(../../steamboat/commons/images/steamboat_bk.jpg);
    }
}


/***************
littlemermaid_bk
****************/

#disney .disney-littlemermaid_bk {
    background-image: url(../../littlemermaid/commons/images/littlemermaid_bk_pc.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    z-index: -1;
    width: 100%;
    height: 100vh;
}

@media screen and (max-width: 600px) {

    #disney .disney-littlemermaid_bk {
        background-image: url(../../littlemermaid/commons/images/littlemermaid_bk.jpg);
    }
}





/*メニュー*/


/***************
メニューtabBox
****************/

#tabBox {
    margin: 0 auto 20px;
}

#tabBox .tabArea {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    background: #ffffffe6;
    border-bottom: #6B96C5 2px solid;
}

#tabBox .tabArea.cinderella {
    border-bottom: #6B96C5 2px solid;
}
#tabBox .tabArea.rapunzel {
    border-bottom: #E4BCD7 2px solid;
}
#tabBox .tabArea.beast {
    border-bottom: #9F6D41 2px solid;
}
#tabBox .tabArea.fantasia {
    border-bottom: #2E3E67 2px solid;
}
#tabBox .tabArea.steamboat {
    border-bottom: #8f6c29 2px solid;
}
#tabBox .tabArea.littlemermaid {
    border-bottom: #5cb2cb 2px solid;
}

#tabBox .tabArea .one_tab {
    width: 16.5%;
    margin: 2px auto 0px;
    box-sizing: border-box !important;
    /*border-right: #fff 1px solid;*/
}

#tabBox .tabArea .one_tab a {
    display: block;
    text-decoration: none;
    /*
    transition-duration: 0.3s;
    */
    text-align: center;
    color: #A8D2DE;
    font-size: 12px;
}

#tabBox .tabArea .one_tab a:hover {
    /*opacity: 0.7;*/
    text-decoration: none;
}

#tabBox .tabArea .one_tab .tab_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    /*
    transition-duration: 0.3s;
    */
    line-height: 1.2em;
    font-family: 'Noto Serif JP', serif;
    text-align: center;
    border-radius: 4px 4px 0 0;
}

#tabBox .tabArea .one_tab:nth-child(1) .tab_inner {
    background-color: #fff;
    letter-spacing: -0.05em;
}

#tabBox .tabArea .one_tab:nth-child(1) .cinderella {
    background-image: url(../images/tab_cinderella_b.svg);
    background-size: 90px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}

#tabBox .tabArea .one_tab:nth-child(1) .on {
    background-color: #6B96C5;
    background-image: url(../images/tab_cinderella_w.svg);
}


#tabBox .tabArea .one_tab:nth-child(2) .tab_inner {
    background-color: #fff;
}

#tabBox .tabArea .one_tab:nth-child(2) .rapunzel {
    background-image: url(../images/tab_rapunzel_b.svg);
    background-size: 90px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}


#tabBox .tabArea .one_tab:nth-child(2) .on {
    background-color: #E4BCD7;
    background-image: url(../images/tab_rapunzel_w.svg);
}



#tabBox .tabArea .one_tab:nth-child(3) .tab_inner {
    background-color: #fff;
}

#tabBox .tabArea .one_tab:nth-child(3) .beast {
    background-image: url(../images/tab_beast_b.svg);
    background-size: 90px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}

#tabBox .tabArea .one_tab:nth-child(3) .on {
    background-color: #9F6D41;
    background-image: url(../images/tab_beast_w.svg);
}


#tabBox .tabArea .one_tab:nth-child(4) .tab_inner {
    background-color: #fff;
    letter-spacing: -0.2em;
}

#tabBox .tabArea .one_tab:nth-child(4) .fantasia {
    background-image: url(../images/tab_fantasia_b.svg);
    background-size: 60px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}

#tabBox .tabArea .one_tab:nth-child(4) .on {
    background-color: #2E3E67;
    background-image: url(../images/tab_fantasia_w.svg);
}


#tabBox .tabArea .one_tab:nth-child(5) .tab_inner {
    background-color: #fff;
    letter-spacing: -0.2em;
}

#tabBox .tabArea .one_tab:nth-child(5) .steamboat {
    background-image: url(../images/tab_steamboat_b.svg);
    background-size: 60px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}

#tabBox .tabArea .one_tab:nth-child(5) .on {
    background-color: #8f6c29;
    background-image: url(../images/tab_steamboat_w.svg);
}


#tabBox .tabArea .one_tab:nth-child(6) .tab_inner {
    background-color: #fff;
    letter-spacing: -0.2em;
}

#tabBox .tabArea .one_tab:nth-child(6) .littlemermaid {
    background-image: url(../images/tab_littlemermaid_b.png);
    background-size: 68px auto;
    background-repeat: no-repeat;
    background-position: top 5px center;
}

#tabBox .tabArea .one_tab:nth-child(6) .on {
    background-color: #5cb2cb;
    background-image: url(../images/tab_littlemermaid_w.png);
}






@media screen and (max-width: 600px) {

    #tabBox .tabArea .one_tab {
        width: 33.2%;
        margin: 2px auto 0px;
        box-sizing: border-box !important;
        /*border-right: #fff 1px solid;*/
    }


}



/***************
disney_title
****************/

#disney .disney_title {
    background: #ffffffe6;
    text-align: center;
    display: table;
    width: 100%;
    min-height: 50px;
    margin: 0 auto 0;
    padding: 0 0 0 0;
}

#disney .disney_title h1 {
    color: #000;
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    padding: 0;
}

#disney .disney_title h1 img {
    width: 84px;
}






.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}



/***************
title
****************/

#disney h2 {
    font-size: 20px;
    text-align: center;
    margin: 0 auto 20px;
}

#disney h2 span {
    display: block;
    font-size: 16px;
}

#disney h3 {
    font-size: 20px;
    text-align: center;
    margin: 0 auto 20px;
}

#disney h3 span {
    font-size: 16px;
    display: block;
}



#disney .disney_mainphoto {
    max-width: 660px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    line-height: 0;
}

#disney .disney_lead {
    max-width: 660px;
    width: 100%;
    margin: 0 auto 40px;
    padding: 20px 0;
    font-size: 16px;
    line-height: 1.8em;
    background-color: rgba(255, 255, 255, 0.8);
    text-align: center;
}




/********
item
*********/

#disney .item {
    max-width: 1200px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 0;
    margin: 0 auto 40px;
}

#disney .item_wrap {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#disney .item_wrap>* {
    width: 24%;
    margin: 0 auto 10px 0;
}

@media screen and (max-width: 600px) {

    #disney .item_wrap>* {
        width: 49%;
        margin-bottom: 5px;
    }

}


/********
共通
*********/

#disney .wrap1 {
    max-width: 1200px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px 0;
    margin: 0 auto 40px;
}

#disney .wrapmargin {
    margin: 0 auto 80px;
}

#disney .photo01 {
    max-width: 660px;
    width: 95%;
    padding: 0 0;
    margin: 0 auto 10px;
}

#disney .txt01_center {
    max-width: 800px;
    width: 100%;
    font-size: 14px;
    margin: auto;
    /*18px*/
    text-align: center;
    line-height: 1.8em;
}

#disney .txt01_left {
    max-width: 800px;
    width: 100%;
    font-size: 14px;
    /*18px*/
    text-align: left;
    line-height: 1.8em;
}

#disney .txt02_center {
    max-width: 660px;
    width: 100%;
    margin: auto;
    font-size: 16px;
    /*16px*/
    text-align: center;
    line-height: 1.8em;
}

#disney .txt02_left {
    max-width: 660px;
    width: 95%;
    margin: auto;
    font-size: 16px;
    /*16px*/
    text-align: left;
    line-height: 1.8em;
}

#disney .txt03_center {
    max-width: 660px;
    width: 100%;
    font-size: 16px;
    margin: auto;
    /*14px*/
    text-align: center;
    line-height: 1.8em;
}

#disney .txt03_left {
    max-width: 660px;
    width: 95%;
    margin: auto;
    font-size: 14px;
    /*14px*/
    text-align: left;
    line-height: 1.8em;
}

#disney .space {
    height: 50px;
}

#disney .attention {
    font-size: 10px;
    display: block;
}



/************
#disney　slide01
*************/

#disney .slide01 {
    max-width: 800px;
    width: 100%;
    margin: 0 auto 50px;
}

#disney .slide01 div {
    padding: 0px 5px 0px 5px;
    margin: 0px 0px 0px 0px;
}

#disney .slide01 div img {
    filter: drop-shadow(3px 3px 4px #00000030);
    border-radius: 8px;
    width: 95%;
    margin: 0 0px 10px 0;
    padding: 0 0 0 0;
}

#disney .slide01 p {
    font-size: 14px;
    /*16px*/
    text-align: left;
    margin: auto;
    width: 95%;
}



/************
#disney　slide02
*************/

#disney .slide02 {
    max-width: 1000px;
    width: 95%;
    margin: 0 auto 50px;
}

#disney .slide02 div {
    padding: 0px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

#disney .slide02 div img {
    filter: drop-shadow(3px 3px 4px #00000030);
    border-radius: 8px;
    width: 95%;
    margin: 0 0px 0 0px;
    padding: 0 0 0 0;
}

#disney .slide02 div p {
    margin: 10px 0 0 0;
    font-size: 14px;
}

/************
#disney　slide03
*************/

#disney .slide03 {
    max-width: 800px;
    width: 95%;
    margin: 0 auto 50px;
}

#disney .slide03 div {
    padding: 0px 0px 0px 5px;
    margin: 0px 0px 0px 0px;
}

#disney .slide03 div img {
    border-radius: 8px;
}

#disney .slide03 .img_bk {
    filter: drop-shadow(3px 3px 4px #00000030);
    width: 95%;
    margin: 0 0px 5px 0px;
    padding: 0 0 0 0;
    background-color: #000;
    border-radius: 8px;
}


#disney .slide03 div p {
    margin: 10px 0 0 0;
    font-size: 14px;
    text-align: left;
}


/**********
viewmore
**********/

a.viewmore {
    font-size: 11px !important;
    text-align: right !important;
    color: #AF9538 !important;
    text-decoration: underline !important;
    margin: 0 0 0 auto !important;
    display: block !important;
}

a.viewmore::after {
    content: '';
    display: inline-block;
    width: 15px;
    /*画像の幅*/
    height: 10px;
    /*画像の高さ*/
    background-image: url(./images/arrow.svg);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin: 0 0 0 5px;
}



/*
readmore
*/

.readmore {
    position: relative;
    box-sizing: border-box;
    /*以下お好み*/
    /* ボーダーを付ける場合 */
    padding: 0;
    max-width: 800px;
    width: 95%;
    margin: 0 auto 50px;
}

.readmore-content {
    position: relative;
    overflow: hidden;
    /*以下お好み*/
    /*高さの初期値*/
    height: 130px;
}

.readmore-content::before {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    /*以下お好み グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/
    height: 50px;
    background: -webkit-linear-gradient(top, rgba(204, 233, 237, 0) 0%, rgba(204, 233, 237, 0.8) 50%, rgba(204, 233, 237, 0.8) 50%, rgba(204, 233, 237) 100%);
    background: linear-gradient(top, rgba(204, 233, 237, 0) 0%, rgba(204, 233, 237, 0.8) 50%, rgba(204, 233, 237, 0.8) 50%, #fff 100%);
    color: #cce9ed;
}

/* 続きを読むボタン */
.readmore-label {
    color: #AF9538;
    display: table;
    bottom: 5px;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    margin: 0 auto;
    z-index: 2;
    padding: 10px 10px 0;
    cursor: pointer;
}


.readmore-label:before {
    content: 'View More ┼';
}

.readmore-check {
    display: none;
}

/*チェック時にボタンを非表示*/
.readmore-check:checked~.readmore-label {
    position: static;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    /* 「続きを読む」を押した後、元に戻す必要がない場合は、上のオプションを消してこの1行だけにする */
    /* display: none; */
}

.readmore-check:checked~.readmore-label:before {
    content: 'View More ─';
}

/*チェック時に高さを自動に戻す*/
.readmore-check:checked~.readmore-content {
    height: auto;
}

/*チェック時グラデーション等を削除*/
.readmore-check:checked~.readmore-content::before {
    display: none;
}




/***************************
slick設定
slide01-dot
***************************/

/*左右の矢印の位置を変える*/

#disney .slide01 .slick-prev {
    left: 3% !important;
    z-index: 10 !important;
    top: 35%;
}

#disney .slide01 .slick-next {
    right: 0% !important;
    z-index: 10 !important;
    top: 35%;
}

#disney .slide01.arrow01 .slick-prev {
    top: 100px;
}

#disney .slide01.arrow01 .slick-next {
    top: 100px;
}

#disney .slide01.arrow02 .slick-prev {
    top: 160px;
}

#disney .slide01.arrow02 .slick-next {
    top: 160px;
}


#disney .slide01 .slick-arrow:before {
    content: "" !important;
    width: 9px !important;
    height: 24px !important;
    position: absolute;
    top: 0;
    left: 0;
}

#disney .slide01 .slick-next:before {
    background: url(images/arrow_s.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;

}

#disney .slide01 .slick-prev:before {
    background: url(images/arrow_s.svg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    transform:rotateY(180deg);
}

#disney .slide01 .slider .slick-list {
    padding: 0 4% 0 0 !important;
}


@media screen and (min-width: 500px) {
    #disney .slide01 .slider .slick-list {
        padding: 0 0 0 0 !important;
    }
}



#disney .slide01 .slick-dots {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

#disney .slide01 .slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 10px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

#disney .slide01 .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

#disney .slide01 .slick-dots li button:before {
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #fff !important;
    border: 1px solid #E0BA8A;
    background-image: initial !important;
    content: '';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#disney .slide01 .slick-dots li.slick-active button:before {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: #E0BA8A !important;
    border: 1px solid #E0BA8A;
    opacity: .75;
    color: black;
}


/*slick*/
#disney .slick-slide img {
    width: 100%;
    height: auto;
}


/***************************
slick設定
slide02-罫線
***************************/

#disney .slide02 .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;

    content: '';
    text-align: center;

    opacity: .5;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#disney .slide02 .slick-dots li.slick-active button:before {
    opacity: .9;
    color: black;
    content: "";
    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 4s ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
}


/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove {
    0% {
        width: 0;
        top: 10px;
        opacity: 1;
    }

    100% {
        width: 100%;
        top: 10px;
        opacity: 1;
    }
}






/*
slide03設定
*/

#disney .slide03 .slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;

    content: '';
    text-align: center;

    opacity: .5;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#disney .slide03 .slick-dots li.slick-active button:before {
    opacity: .9;
    color: black;
    content: "";
    /*描画位置*/
    position: absolute;
    top: 10px;
    /*線の形状*/
    width: 35px;
    height: 3px;
    background: #e2c290;
    /*線の動き1.4秒かけて動く。永遠にループ*/
    animation: pathmove 4s ease-in-out;
    opacity: 0;
    animation-fill-mode: forwards;
}


#disney .slide03 .slick-slide {
	transform: scale(0.8);/*左右の画像のサイズを80%に*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
}
#disney .slide03 .slick-slide img {
	opacity: 0.5;/*透過50%*/
	transition: all .5s;/*拡大や透過のアニメーションを0.5秒で行う*/
}

#disney .slide03 .slick-slide.slick-center{
	transform: scale(1);/*中央の画像のサイズだけ等倍に*/
}

#disney .slide03 .slick-slide.slick-center .img_bk{
	background-color: #fff !important;
}

#disney .slide03 .slick-slide.slick-center img{
	opacity: 1;/*透過なし*/
}


/*brand_ichiran*/

#brand_ichiran {
    background-color: rgba(255, 255, 255, 0.9);
    font-family: 'Noto Serif JP', serif;
    padding: 40px 0 50px;
    margin: 0 auto 50px;
}

#brand_ichiran .brand_ichiran_title {
    font-size: 22px;
    text-align: center;
    margin: 0 auto 20px;
}

#brand_ichiran .brand_ichiran_title span {
    font-size: 14px;
    display: block;
}

#brand_ichiran .brand_ichiran_wrap {
    max-width: 1000px;
    width: 95%;
    padding: 20px 0 0 0;
    margin: auto;
}





/*fixed*/
.special_fixed {
    position: fixed;
    top: 100px;
    max-width: 1200px;
    width: 100%;
    z-index: 10;
    transition: all 1s ease-out;
}

@media screen and (max-width: 1079px) {
    .special_fixed {
        top: 80px;
    }
}

@media screen and (max-width: 767px) {
    .special_fixed {
        top: 60px;
    }
}