@charset "UTF-8";
/* CSS Document */
/*ブレイクポイント　1000px, 600px, 500px, 320px*/


/*ーーーーーーーーーーーーーーーーーーーーーーーータブレット縦・スマホ横　1024以下ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media(max-width:1024px) {

    body {
        background-color: rgba(123, 120, 133, 1.00);
        margin: 0vw;
    }

    /*ローディング画面　ここから--------------------------------------------------------------------------*/
    #loading {
        background-size: 100%;
        position: fixed;
        top: -0.1vw;
        right: 0vw;
        width: 100%;
        margin: 0vw;
        height: 100%;
        transition: all .5s ease;

        z-index: 99;
    }

    #loading.is-loaded {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0vw);
    }

    .loading-logo {
        width: 100%;
        margin: 0vw;
        justify-content: center;
        align-items: center;
        -webkit-animation: loadinglogo 2s ease-in-out 0s infinite alternate;
        animation: loadinglogo 2s ease-in-out 0s infinite alternate;
    }

    /*↓ロゴの位置を調整するために、imgだけで指定する必要がある*/
    .loading-logo img {
        width: 17%;
        position: fixed;
        top: 30%;
        right: 40%;
    }

    /*ローディング画面　ここまで-----------------------------------------------------------------------------*/




    /*header ロゴアコーディオン用CSS　ここから*/
    header {
        width: 100%;
        margin: 0vw;
        z-index: 999;
        display: block;
        /*background-color: brown; */
    }

    .logo-menu {
        display: none;
    }

    .logo-menu2 {
        display: block;
        widows: 100%;
        margin: 0vw;
        position: relative;
    }

    .acd-check {
        display: none;
        position: absolute;
        right: 20vw;
    }


    .acd-label {
        display: block;

        width: 10%;
        height: auto;
        margin: 0vw;
        color: #fff;
        cursor: pointer;
        background-color: rgba(162, 158, 175, 0.60);
        border-radius: 12vw;
        padding: 0.6vw 0.6vw 0vw 0.6vw;
        position: fixed;
        top: 1.5vw;
        left: 44vw;
        /*これでレコーディオンメニューロゴの左右位置決めてる*/
        z-index: 999;
    }

    .acd-label img {
        width: 100%;
        margin: 0vw;
    }

    .acd-content {

        /*--前の。キープ
  width: 100%;
  background-color: rgba(45,105,116,1.0);
  opacity: 0;
  transition: .5s;
  visibility: hidden;
  position: absolute;
  left: 0vw;
  right: 0vw;
  top: -1vw;
  */

        width: 100%;
        margin: 0vw;

        opacity: 0;
        transition: .9s;
        visibility: hidden;
        position: absolute;
        left: 0vw;
        right: 0vw;
        top: 0vw;
        /*モーションの位置＝どの位置から出てくるか。 例えば10vwは、top:10vw;の位置から出てくるってこと*/

    }

    .acd-content li {

        list-style: none;
        margin: 8vw 0vw;
        position: relative;
        top: 10vw;
        left: 0vw;
        text-align: center;
        float: none;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-size: 4vw;

        /*background-color: rgba(72,0,255,1.00);*/

    }

    .acd-content a {
        /*background-color: rgba(72,0,255,1.00);  */
        text-decoration: none;
        /*リンク下のバーを消す*/
        /*background-color: brown;    メンテ用*/
        color: aliceblue;
        /*リンク文字の色変更用*/
    }

    .acd-check:checked + .acd-label + .acd-content {
        width: 100%;
        margin: 0vw 0vw 0vw 0vw;
        height: 100%;
        opacity: 1;
        padding: 2vw 0vw;
        visibility: visible;
        position: fixed;
        top: -0vw;
        /*モーションの位置＝どの位置から出てくるか。 例えば10vwは、top:10vw;の位置から出てくるってこと*/
        left: 0vw;
        z-index: 99;

        /*background-color: mediumspringgreen;*/
    }

    /*header ロゴアコーディオン用CSS　ここまで*/


    main {
        width: 100%;
        margin: 0vw;
        position: absolute;
        left: 0vw;
        top: 10vw;
        text-align: center;

    }

    main h1 {
        color: aliceblue;
        position: relative;
        right: 0vw;
        margin: 6vw 0vw;
        text-align: center;

        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;
        font-size: 3.5vw;

        /*background-color: crimson;*/
    }


    main h2 {
        color: aliceblue;
        position: relative;
        top: -5vw;
        right: 0vw;
        margin: 1.6vw 4vw 4vw 4vw;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;
        font-size: 2.5vw;

        /*background-color: rgba(255,0,254,1.00);*/
    }

    /*スクロール　フェードイン　ここから---------------------------------------*/
    /* 画面外にいる状態 */
    .fadein {
        opacity: 0;
        transform: translate(0, -2vw);
        transition: all 2000ms;
    }

    /* 画面内に入った状態 */
    .fadein.scrollin {
        opacity: 1;
        transform: translate(0, 0vw);
    }

    /*スクロール　フェードイン　ここまで---------------------------------------*/


    /*gallery背景の平行四辺形作図　ここから*/
    .back-color {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        width: 100%;
        /*親要素をこえて子要素が画面いっぱいに広がる　そのために「vw」に。*/
        height: 60%;
        margin: 0vw;
        position: relative;
        top: 70vw;
        padding: 0vw 0vw;
        z-index: 1;

        /*background-color: rgba(112,15,255,0.20);*/
    }

    .back-color::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        width: 100%;
        height: 180vw;
        margin: 0vw;
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*gallery背景の平行四辺形作図　ここまで*/


    /*ーーーーー　霞　コメント　ここから　ーーーーー*/
    .doll {
        width: 100%;
        position: relative;
        color: rgba(255, 255, 255, 1.00);
        text-align: none;
        z-index: 3;

        /*background-color: rgba(25,255,213,1.00);*/
    }

    .doll img {
        width: 100%;
        z-index: -1;

        /*background-color:yellow;*/
    }

    .doll_moji {
        width: 100%;
        margin: 0vw 0vw 0vw 0vw;
        position: relative;
        top: 0vw;
        right: 0vw;
        z-index: 20;

        /*background-color: rgba(25,25,213,1.00);*/
    }

    .doll h5 {
        /*シリーズ名*/
        width: 20%;
        position: relative;
        z-index: 20;

        font-size: 1.2vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(118,255,0,1.00);*/
    }

    .doll h2 {
        /*ドール名*/
        width: 30%;
        position: relative;
        z-index: 3;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(255,158,0,0.30);*/
    }

    .doll h4 {
        /*制作年*/
        width: 10%;
        position: relative;
        z-index: 3;
        text-align: left;

        font-size: 1.7vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(0,13,141,1.00);*/
    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここから*/
    .responsive-space-1 {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        widows: 100%;
        /* background-color: rgba(255,0,4,1.00); */
        /*実際では不透明度0％にする*/
        position: relative;
        top: 49vw;
        padding: 5vw 2vw;
        z-index: 1;
    }

    .responsive-space-1::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここまで*/


    .doll p {
        /*テキスト*/
        width: 35%;
        position: relative;
        top: -55vw;
        left: 10.0vw;
        z-index: 3;
        text-align: left;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(179,0,41,1.00);*/
    }

    /*ーーーーー　うらら　コメント　ここまで　ーーーーー*/


    /*gallery背景の平行四辺形作図　ここから*/
    .gap {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/

        /*
    widows: 100%;
    height: 15vw;
    margin: 0vw;
    position: relative;
    top: 27vw;
    z-index: 1;
    
    background-color: rgba(255,0,4,1.00);  /*実際では不透明度0％にする*/

    }

    .gap::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/

        /*
    content: "";
    position: absolute; /*absoluteじゃないとダメっぽい*/
        /*
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color: rgba(123,120,133,1.00);
    transform: skewY(9deg); /*平行四辺形　角度*/

    }

    /*gallery背景の平行四辺形作図　ここまで*/


    /*ーーーーー　まどろみ　コメント　ここから　ーーーーー*/
    .doll2 {
        width: 100%;
        position: relative;
        color: rgba(255, 255, 255, 1.00);
        text-align: none;
        z-index: 3;

        /*background-color:rgba(0,100,56,1.00);*/
    }

    .doll2 img {
        width: 100%;
        z-index: -1;

        /*background-color: coral;*/
    }

    .doll2_moji {
        width: 100%;
        position: relative;
        right: 0vw;
        z-index: 20;

        /*background-color: rgba(25,25,213,1.00);*/
    }

    .doll2 h5 {
        /*シリーズ名*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 30%;
        position: relative;
        z-index: 3;

        font-size: 1.2vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(255,0,127,1.00);*/
    }

    .doll2 h2 {
        /*ドール名*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 20%;
        position: relative;
        z-index: 3;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(113,0,153,0.30);*/
    }

    .doll2 h4 {
        /*制作年*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 10%;
        position: relative;
        z-index: 3;
        text-align: left;

        font-size: 1.7vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(58,144,222,1.00);*/
    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここから*/
    .responsive-space-2 {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        widows: 100%;
        /* background-color: rgba(255,0,4,1.00); */
        /*実際では不透明度0％にする*/
        position: relative;
        top: 49vw;
        padding: 5vw 2vw;
        z-index: 1;
    }

    .responsive-space-2::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここまで*/



    .doll2 p {
        /*テキスト*/
        width: 35%;
        position: relative;
        top: -55vw;
        left: 56.0vw;
        z-index: 3;
        text-align: left;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(255,253,0,1.00);*/
    }

    /*ーーーーー　のどか　コメント　ここまで　ーーーーー*/




    /*ーーーーー gallery スライド用　css　ここからーーーーー*/
    .gallery {
        max-width: 100%;
        columns: 0;
        /*段組みの数　だが今は意味なし　とりあえず０にして残しておく*/
        padding: 0vw 0vw;
        /*ギャラリー左右に余白をつける*/
        position: relative;
        left: 0vw;

        display: flex;
        flex-wrap: wrap;
        z-index: 55;

        /*background-color: rgba(220,0,255,1.00);*/
    }



    .gallery ul {
        display: flex;
        flex-wrap: wrap;

        /*background-color: rgba(150,78,0,1.00);*/
    }


    .gallery li {
        /*
    margin-bottom: 1vw;
    */
        margin: 0.6vw 0vw 0.3vw 1vw;
        /*各画像下に余白をつける*/
        list-style: none;
        position: relative;
        width: 10%;
        /*横並びにする画像の数　50%=2枚*/

        /*background-color: rgba(93,134,74,1.00);*/
    }

    /*
.gallery::before{
  content: "";
  display: block;
  padding-top: 100%;
}
*/

    .gallery li:before {
        content: "";
        display: block;
        padding-top: 100%;

        /*background-color: rgba(0,166,9,1.00);*/
    }

    /*ギャラリー内のイメージは横幅100%にする*/
    .gallery img {
        vertical-align: bottom;
        /*画像の下にできる余白を削除*/

        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        /*本当は 50% だけど*/
        right: 0;
        bottom: 0;
        left: 50%;
        margin: auto;

        object-fit: cover;
        object-position: 100% 20%;
        /*0=左右（数値が上がるにつれて右へ）,0=上下（数値が上がるにつれて下へ）　ちなみに0,0は左上*/

        transform: translate(-50%, -50%);

        /*background-color: rgba(134,57,57,1.00);*/
    }

    /*ーーーーー gallery スライド用　css　ここまで ーーーーー*/






    .howtocorner {
        width: 100%;
        height: 45vw;
        background-color: rgba(123, 120, 133, 1.00);
        position: relative;

    }

    .howtocorner h2 {
        position: relative;
        top: 5vw;
        z-index: 55;
        padding-top: 5vw;
        border-top: solid 0.1vw rgba(255, 255, 255, 0.30);

        /*background-color: rgba(155,146,0,1.00);*/
    }

    .howtocorner p {
        position: relative;
        top: 5vw;
        color: rgba(255, 255, 255, 1.00);
        font-size: 1.6vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        z-index: 55;

        /*background-color: rgba(23,62,255,1.00);*/
    }

    .howtocorner li {
        width: 31%;
        position: relative;
        top: 5vw;
        left: 33vw;
        margin: 1vw;
        padding: 0vw 0vw 0vw 0vw;
        list-style: none;
        z-index: 4;

        border-radius: 0.4vw;

        font-size: 1.6vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    }

    .howtocorner a {
        text-decoration: none;
        color: rgba(255, 255, 255, 1.00);
        display: block;
    }

    .another a {
        position: relative;
        top: 5vw;
        color: rgba(255, 255, 255, 1.00);
        text-decoration: underline;
        z-index: 4;

        font-size: 1.6vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(255,128,232,1.00);*/
    }




    footer {
        width: 100%;
        top: 152vw;
        position: relative;
        left: 0vw;
        padding: 0vw 0vw 0vw 0vw;
        height: 55vw;
        z-index: 20;
        background-color: rgba(84, 82, 90, 1.00);
        text-align: center;
    }

    .contact-icon {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 4vw;
        left: 0vw;
        /*background-color: blue;    */
    }

    .contact-icon a {
        /*background-color: aqua;*/
        padding: 1vw 0vw 0vw 0vw;
        margin: 0vw 3vw;
    }

    .contact-icon img {
        width: 4%;
        margin: 0vw 0vw;
    }

    .footer-menu-list {
        width: 90%;
        /*これが100%だったせいで謎余白ができてた*/
        margin: 0vw 0vw;
        position: relative;
        top: 8vw;
        left: 10%;

        /*background-color: lawngreen;*/
    }

    .footer-menu-list li {
        width: 15%;
        /*.footer-menu-listのwidthが100%なので、*/
        margin: 0vw 0vw;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        color: aliceblue;
        font-size: 2vw;
        list-style: none;
        position: relative;
        top: 0vw;
        left: 0vw;
        float: left;

        /*background-color: rgba(255,244,0,1.00);*/
    }

    .footer-menu-list a {
        text-decoration: none;
        /*リンク下のバーを消す*/
        color: aliceblue;
        /*リンク文字の色変更用*/

        /*background-color: brown;*/
    }

    .copyright {
        margin: 0vw 0vw 2vw 0vw;
        position: relative;
        top: 14vw;

        /*background-color: rgba(125,68,28,0.50);*/
    }

    .copyright p {
        width: 100%;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(140,180,60,0.50);*/
    }

    .footer-logo {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 16vw;
        left: 0vw;
        text-align: center;

        /*background-color: black;*/
    }

    .footer-logo img {
        width: 7%;
        margin: 0vw;
        position: relative;

        /*background-color: lightcoral;*/
    }

    .c-mark {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 16vw;
        left: 0vw;
        text-align: center;
        font-size: 0.8vw;

        color: rgba(255, 255, 255, 1.00);
    }

    /*ーーーーーーーーースライドのCSS　ここからーーーーーーーーーーーーーーーーー*/

    .back-img {
        width: 100%;
    }

    #photo {
        display: block;
        width: 100%;
        position: fixed;
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
        z-index: -10;
        opacity: 1.0;
    }

    #photo img {
        width: 190%;
        position: absolute;
        top: -5vw;
        left: -38vw;
    }

    #photo-responsive {

        display: none;
        width: 100%;
        position: fixed;
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
        z-index: -10;
        opacity: 1.0;
    }

    #photo-responsive img {
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }

    /*ーーーーーーーーースライドのCSS　ここまでーーーーーーーーーーーーーーーーー*/

}

/*ーーーーーーーーーーーーーーーーーーーーーーーータブレット縦・スマホ横　1024以上ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*ーーーーーーーーーーーーーーーーーーーーーーーー小型スマホ横　599以下ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media(max-width:599px) {
    body {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 0vw;
        overflow-x: hidden;
        background-color: rgba(123, 120, 133, 1.00);
    }

    /*header ロゴアコーディオン用CSS　ここから*/
    header {
        width: 100%;
        margin: 0vw;
        z-index: 99;
        display: block;
        /*background-color: brown; */
    }

    .logo-menu {
        display: none;
    }

    .logo-menu2 {
        display: block;
        widows: 100%;
        margin: 0vw;
        position: relative;
    }

    .acd-check {
        display: none;
        position: absolute;
        right: 20vw;
    }


    .acd-label {
        display: block;

        width: 20%;
        height: auto;
        margin: 0vw;
        color: #fff;
        cursor: pointer;
        background-color: rgba(162, 158, 175, 0.60);
        border-radius: 12vw;
        padding: 1.5vw 1.5vw 0vw 1.5vw;
        position: fixed;
        top: 1.5vw;
        left: 39vw;
        /*これでレコーディオンメニューロゴの左右位置決めてる*/
        z-index: 999;
    }

    .acd-label img {
        width: 100%;
        margin: 0vw;
    }

    .acd-content {

        /*--前の。キープ
  width: 100%;
  background-color: rgba(45,105,116,1.0);
  opacity: 0;
  transition: .5s;
  visibility: hidden;
  position: absolute;
  left: 0vw;
  right: 0vw;
  top: -1vw;
  */

        width: 100%;
        margin: 0vw;

        opacity: 0;
        transition: .9s;
        visibility: hidden;
        position: absolute;
        left: 0vw;
        right: 0vw;
        top: 0vw;
        /*モーションの位置＝どの位置から出てくるか。 例えば10vwは、top:10vw;の位置から出てくるってこと*/

    }

    .acd-content li {

        list-style: none;
        margin: 12vw 0vw;
        position: relative;
        top: 20vw;
        left: 0vw;
        text-align: center;
        float: none;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-size: 5vw;

        /*background-color: rgba(72,0,255,1.00);*/

    }

    .acd-content a {
        /*background-color: rgba(72,0,255,1.00);  */
        text-decoration: none;
        /*リンク下のバーを消す*/
        /*background-color: brown;    メンテ用*/
        color: aliceblue;
        /*リンク文字の色変更用*/
    }

    .acd-check:checked + .acd-label + .acd-content {
        width: 100%;
        margin: 0vw 0vw 0vw 0vw;
        height: 100%;
        opacity: 1;
        padding: 2vw 0vw;
        visibility: visible;
        position: fixed;
        top: -0vw;
        /*モーションの位置＝どの位置から出てくるか。 例えば10vwは、top:10vw;の位置から出てくるってこと*/
        left: 0vw;
        z-index: 99;

        /*background-color: mediumspringgreen;*/
    }

    /*header ロゴアコーディオン用CSS　ここまで*/

    main {
        width: 100%;
        margin: 0vw;
        position: absolute;
        top: 31vw;
        left: 0vw;
        text-align: center;

    }

    main h1 {
        color: aliceblue;
        text-align: center;
        position: relative;
        right: 0vw;
        margin: 2vw 4vw 10vw 4vw;

        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;
        font-size: 9vw;

        /*background-color: fuchsia;*/
    }


    main h2 {
        color: aliceblue;
        position: relative;
        top: -8vw;
        right: 0vw;
        margin: 1.6vw 4vw 4vw 4vw;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;
        font-size: 5vw;

        /*background-color: rgba(255,0,254,1.00);*/
    }

    /*スクロール　フェードイン　ここから---------------------------------------*/
    /* 画面外にいる状態 */
    .fadein {
        opacity: 0;
        transform: translate(0, -2vw);
        transition: all 2000ms;
    }

    /* 画面内に入った状態 */
    .fadein.scrollin {
        opacity: 1;
        transform: translate(0, 0vw);
    }

    /*スクロール　フェードイン　ここまで---------------------------------------*/


    /*gallery背景の平行四辺形作図　ここから*/
    .back-color {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        width: 100%;
        /*親要素をこえて子要素が画面いっぱいに広がる　そのために「vw」に。*/
        height: 60%;
        margin: 0vw;
        position: relative;
        top: 150vw;
        padding: 0vw 0vw;
        z-index: 1;

        /*background-color: rgba(112,15,255,0.20);*/
    }

    .back-color::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        width: 100%;
        height: 240vw;
        margin: 0vw;
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*gallery背景の平行四辺形作図　ここまで*/


    /*ーーーーー　霞　コメント　ここから　ーーーーー*/
    .doll {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: -3vw;
        color: rgba(255, 255, 255, 1.00);
        text-align: none;
        z-index: 3;

        /*background-color: rgba(25,255,213,0.20);*/
    }

    .doll img {
        width: 100%;
        z-index: -1;

        /*background-color:rgba(238,255,0,0.00);*/
    }

    .doll_moji {
        width: 100%;
        margin-top: 0vw;
        position: relative;
        top: 0%;
        z-index: 20;

        /*background-color: rgba(25,25,213,1.00);*/
    }

    .doll h5 {
        /*シリーズ名*/
        width: 30%;
        position: relative;
        top: -50vw;
        left: 10.6vw;
        z-index: 20;

        font-size: 3vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(118,255,0,0.40);*/
    }

    .doll h2 {
        /*ドール名*/
        width: 50%;
        position: relative;
        top: -53.0vw;
        left: -6.5vw;
        z-index: 3;

        font-size: 5.5vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(255,158,0,0.30);*/
    }

    .doll h4 {
        /*制作年*/
        width: 20%;
        position: relative;
        top: -56vw;
        left: 17.2vw;
        z-index: 3;
        text-align: left;

        font-size: 3vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(0,13,141,1.00);*/
    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここから*/
    .responsive-space-1 {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        widows: 100%;
        /* background-color: rgba(255,0,4,1.00); */
        /*実際では不透明度0％にする*/
        position: relative;
        top: 49vw;
        padding: 5vw 2vw;
        z-index: 1;
    }

    .responsive-space-1::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここまで*/


    .doll p {
        /*テキスト*/
        width: 35%;
        position: relative;
        top: -55vw;
        left: 10.0vw;
        z-index: 3;
        text-align: left;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(179,0,41,1.00);*/
    }

    /*ーーーーー　おやすみ　コメント　ここまで　ーーーーー*/


    /*gallery背景の平行四辺形作図　ここから*/
    .gap {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/

        /*
    widows: 100%;
    height: 15vw;
    margin: 0vw;
    position: relative;
    top: 27vw;
    z-index: 1;
    
    background-color: rgba(255,0,4,1.00);  /*実際では不透明度0％にする*/

    }

    .gap::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/

        /*
    content: "";
    position: absolute; /*absoluteじゃないとダメっぽい*/
        /*
    top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1;
    background-color: rgba(123,120,133,1.00);
    transform: skewY(9deg); /*平行四辺形　角度*/

    }

    /*gallery背景の平行四辺形作図　ここまで*/


    /*ーーーーー　朧　コメント　ここから　ーーーーー*/
    .doll2 {
        width: 100%;
        margin-top: -15.5vw;
        position: relative;
        top: 0vw;
        color: rgba(255, 255, 255, 1.00);
        text-align: none;
        z-index: 3;

        /*background-color:rgba(0,100,56,1.00);*/
    }

    .doll2 img {
        width: 100%;
        z-index: -1;

        /*background-color: coral;*/
    }

    .doll2_moji {
        width: 100%;
        margin-top: 0vw;
        position: relative;
        left: -8vw;
        top: 3%;
        right: 5vw;
        z-index: 20;

        /*background-color: rgba(25,25,213,1.00);*/
    }

    .doll2 h5 {
        /*シリーズ名*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 25%;
        position: relative;
        top: -49vw;
        left: 70vw;
        z-index: 3;

        font-size: 3vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(255,0,127,0.40);*/
    }

    .doll2 h2 {
        /*ドール名*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 33%;
        position: relative;
        top: -52vw;
        left: 58.7vw;
        z-index: 3;

        font-size: 5.5vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(113,0,153,0.30);*/
    }

    .doll2 h4 {
        /*制作年*/
        /*テキストを表示にするのであれば、それに合わせて位置を変えてね*/
        width: 20%;
        position: relative;
        top: -55vw;
        left: 74vw;
        z-index: 3;
        text-align: left;

        font-size: 3vw;
        font-family: "Plantagenet Cherokee", "Book Antiqua", Palatino, "serif";
        font-weight: 100;

        /*background-color: rgba(58,144,222,1.00);*/
    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここから*/
    .responsive-space-2 {
        /*gallery背景の平行四辺形作図用１*/
        /*親要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        widows: 100%;
        /* background-color: rgba(255,0,4,1.00); */
        /*実際では不透明度0％にする*/
        position: relative;
        top: 49vw;
        padding: 5vw 2vw;
        z-index: 1;
    }

    .responsive-space-2::before {
        /*gallery背景の平行四辺形作図用2*/
        /*子要素として存在*/
        display: none;
        /*レスポンシブ決めるときにblockに*/
        content: "";
        position: absolute;
        /*absoluteじゃないとダメっぽい*/
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: -1;
        background-color: rgba(123, 120, 133, 1.00);
        transform: skewY(-7deg);
        /*平行四辺形　角度*/

    }

    /*テキストのレスポンシブ背景の平行四辺形作図　ここまで*/



    .doll2 p {
        /*テキスト*/
        width: 35%;
        position: relative;
        top: -55vw;
        left: 56.0vw;
        z-index: 3;
        text-align: left;

        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(255,253,0,1.00);*/
    }

    /*ーーーーー　のどか　コメント　ここまで　ーーーーー*/



    /*ーーーーー gallery スライド用　css　ここからーーーーー*/
    .gallery {
        max-width: 100%;
        columns: 0;
        /*段組みの数　だが今は意味なし　とりあえず０にして残しておく*/
        padding: 0vw 0vw;
        /*ギャラリー左右に余白をつける*/
        margin-top: 10vw;
        position: relative;
        top: 0vw;
        left: 0vw;

        display: flex;
        flex-wrap: wrap;
        z-index: 55;

        /*background-color: rgba(220,0,255,1.00);*/
    }

    
    .gallery-back-color {
    height: 50vw;
    
    }


    .gallery ul {
        display: flex;
        flex-wrap: wrap;

        /*background-color: rgba(150,78,0,1.00);*/
    }


    .gallery li {
        /*
    margin-bottom: 1vw;
    */
        margin: 0.6vw 0vw 0.3vw 1vw;
        /*各画像下に余白をつける*/
        list-style: none;
        position: relative;
        left: 1.5vw;
        width: 23%;
        /*横並びにする画像の数　50%=2枚*/

        /*background-color: rgba(93,134,74,1.00);*/
    }

    /*
.gallery::before{
  content: "";
  display: block;
  padding-top: 100%;
}
*/

    .gallery li:before {
        content: "";
        display: block;
        padding-top: 100%;

        /*background-color: rgba(0,166,9,1.00);*/
    }

    /*ギャラリー内のイメージは横幅100%にする*/
    .gallery img {
        vertical-align: bottom;
        /*画像の下にできる余白を削除*/

        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        /*本当は 50% だけど*/
        right: 0;
        bottom: 0;
        left: 50%;
        margin: auto;

        object-fit: cover;
        object-position: 100% 20%;
        /*0=左右（数値が上がるにつれて右へ）,0=上下（数値が上がるにつれて下へ）　ちなみに0,0は左上*/

        transform: translate(-50%, -50%);

        /*background-color: rgba(134,57,57,1.00);*/
    }

    /*ーーーーー gallery スライド用　css　ここまで ーーーーー*/






    .howtocorner {
        width: 100%;
        margin-top: 13vw;
        height: 100vw;
        background-color: rgba(123, 120, 133, 1.00);
        position: relative;
        top: 0vw;
        z-index: 40;

    }

    .howtocorner h2 {
        position: relative;
        top: 20vw;
        z-index: 55;
        padding-top: 5vw;
        border-top: solid 0.1vw rgba(255, 255, 255, 0.30);

        font-size: 6vw;
        /*background-color: rgba(155,146,0,1.00);*/
    }

    .howtocorner p {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 20vw;
        color: rgba(255, 255, 255, 1.00);

        font-size: 3.5vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        z-index: 55;

        /*background-color: rgba(23,62,255,1.00);*/
    }

    .howtocorner li {
        width: 65%;
        position: relative;
        top: 23vw;
        left: 16vw;
        padding: 0vw 0vw 0vw 0vw;
        list-style: none;
        z-index: 4;

        border-radius: 0.4vw;
        font-size: 3.5vw;

    }

    .howtocorner a {
        width: 100%;
        margin: 4vw 0vw;

        text-decoration: none;
        color: rgba(255, 255, 255, 1.00);
        display: block;
        font-size: 3.5vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";


        /*background-color: rgba(255,0,4,0.60);*/
    }

    .another a {
        position: relative;
        top: 25vw;
        color: rgba(255, 255, 255, 1.00);
        text-decoration: underline;
        z-index: 4;

        font-size: 3vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
        font-weight: 100;

        /*background-color: rgba(255,128,232,1.00);*/
    }




    footer {
        padding: 0vw 0vw;
        /*これによってフッターの幅や位置をを最終決定している */
        margin-top: 489vw;
        position: relative;
        top: 0%;
        width: 100%;
        height: 147vw;
        background-color: rgba(84, 82, 90, 1.00);
        z-index: 30;

    }

    .contact-icon {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 10vw;
        left: 0vw;
        text-align: center;

        /*background-color: violet;*/
    }

    .contact-icon a {
        /*background-color: aqua;    メンテ用*/
        padding: 1vw 0vw 0vw 0vw;
        margin: 0vw 1vw;

        /*background-color: darkviolet;*/

    }

    .contact-icon img {
        width: 8%;
        margin: 0vw 5vw;
    }

    .footer-menu-list {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 18vw;
        left: 0vw;
        text-align: center;

        /*background-color: lime;*/
    }

    .footer-menu-list li {
        width: 100%;
        font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
        color: aliceblue;
        font-size: 3.5vw;
        list-style: none;
        float: none;
        margin: 3vw 0vw;
        text-align: center;

        /*background-color: rgba(255,244,0,1.00);    メンテ用*/
    }

    .footer-menu-list a {
        text-decoration: none;
        /*リンク下のバーを消す*/
        color: aliceblue;
        /*リンク文字の色変更用*/

        /*background-color: brown;    メンテ用*/

    }

    .copyright {
        margin: 0vw 0vw 7vw 0vw;
        position: relative;
        top: 25vw;

        /*background-color: rgba(125,68,28,0.50);*/
    }

    .copyright p {
        width: 100%;
        font-size: 3vw;
        font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";

        /*background-color: rgba(140,180,60,0.50);*/
    }

    .footer-logo {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 25vw;
        left: 0vw;
        text-align: center;

        /*background-color: black;*/
    }

    .footer-logo img {
        width: 17%;
        position: relative;
        left: 0vw;
    }

    .c-mark {
        width: 100%;
        margin: 0vw;
        position: relative;
        top: 26vw;
        left: 0vw;
        font-size: 2vw;
        color: rgba(255, 255, 255, 1.00);

        /*background-color: lightsalmon;*/
    }


    /*ーーーーーーーーースライドのCSS　ここからーーーーーーーーーーーーーーーーー*/

    .back-img {
        width: 100%;
    }

    #photo {
        display: none;
        width: 100%;
        position: fixed;
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
        z-index: -10;
        opacity: 1.0;
    }

    #photo img {
        width: 190%;
        position: absolute;
        top: -5vw;
        left: -38vw;
    }

    #photo-responsive {

        display: block;
        width: 100%;
        position: fixed;
        top: 0vw;
        right: 0vw;
        bottom: 0vw;
        left: 0vw;
        z-index: -10;
        opacity: 1.0;
    }

    #photo-responsive img {
        width: 100%;
        top: 0;
        left: 0;
        position: absolute;
    }

    /*ーーーーーーーーースライドのCSS　ここまでーーーーーーーーーーーーーーーーー*/

}

/*ーーーーーーーーーーーーーーーーーーーーーーーー小型スマホ横　599以下ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*ーーーーーーーーーーーーーーーーーーーーーーーー小型スマホ縦　320以下ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media(max-width:320px) {}

/*ーーーーーーーーーーーーーーーーーーーーーーーー小型スマホ縦　320以下ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/