@charset "UTF-8";

/*PCサイズレスポンシブ*/
@media(min-width:1000px) {
    body {
        min-width: 1000px;
    }

    .container {
        width: 100%;
    }

    /* PCcss */
body{
    min-width: 1000px;
    background-color: #F2EBDB;
    font-size: 16px;
}

img{
    width: 100%;
}

a{
    text-decoration: none;
}

* {
    cursor: url(../img/cute.png), auto;
    margin: 0;
    padding: 0;
}


.container{
    width: 100%;
    margin:0 auto;
}

/* 検証するために調整すること↓ */
/* *,
*::before,
*::after{
    outline: 1px solid red;
} */

/*========= LoadingのためのCSS ===============*/

/* Loading背景画面設定　*/
#splash {
    /*fixedで全面に固定*/
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: #F2EBDB;
    
    color: #fff;
}

/* Loading画像中央配置　*/
#splash_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
    width: 260px;
}

/* fadeUpをするアイコンの動き */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ヘッダー */
.header{
    width: 100%;
    height: 121.4px;
    display: flex;
    align-items: center;
    text-align: center;
}

#g-nav{
    display: none;
}

.main-title{
    /* width: 12.86%; */
    width: 20%;
}

.main-title img{
    width: 100%;
    object-fit: cover;
}

.nav1{
    width: 42.47%;
    margin-left: 44.67%;
    font-size: 16px;
    font-weight: bold;
}

.nav1 a{
    color: black;
    
    display: block;
}

.nav1 a:hover{
    color:#8D1133;
    opacity: 0.8;
    cursor: url(../img/click1.png), auto;
}

.nav1 a:active{
    cursor: url(../img/click1.png), auto;
}

#slider {
    width: 100%;
    height: 100vh;
    /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/* メインビジュアル */
.mainvisual img{
    height: 350px;
    position: relative;
}

.nav1 ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
}

h1{
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  font-size: 5.625rem;
   /*90px  */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  margin: 0;
    color: #8D1133;
    /* text-shadow: #4c5240 0px 3px 6px;
    text-shadow:  0px 10px 6px,0 0 #0000; */
    /* text-shadow: 5px 2px 10px rgba(141, 17, 51, 1), 5px 2px 10px rgba(60, 7, 22, 1); */
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                0px 8px 13px rgba(0, 0, 0, 0.1),
                0px 18px 23px rgba(0, 0, 0, 0.1);
}

/* 8-11 */
/*==================================================
ランダムにテキスト出現する
===================================*/
.TextRandomAnime span {
    opacity: 0;
}

.TextRandomAnime.appearRandomtext span {
    animation: text_randomanime_on .5s ease-out forwards;
}

@keyframes text_randomanime_on {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
    animation-delay: .5s;
    /* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
    animation-delay: .15s;
    /* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
}

main{
    width: 100%;
}

.flex1 {
    width: 80%;
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    align-items: center;
    padding: 5% 0;
}


/* about_content */
.flex2{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    align-items: center;
    padding: 5% 0;
}

.about{
    position: relative;
    width: 30%;
}

.about img{
    width: 100%;
    position: absolute;
    left: -390px;
    top: -380px;
    z-index: -3;
    
}

/* ↓　https: //haniwaman.com/parts/post-3405 */

.my-parts1 {
    border-radius: 8px;
    background-color: #D2B498;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: .6em 2em;
    margin: 0 0 1em;
    cursor: pointer;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
    text-align: right;
    margin-left: 385px;
    margin-top: 10px;
}


.my-parts1 a{
    color:#fff;
}

.my-parts1 a:hover{
    color: #8D1133;
    opacity: 0.8;
    cursor: url(../img/click1.png), auto;
}

.my-parts1 a:active {
    cursor: url(../img/click1.png), auto;
}



/* あしらい */
.treat_about{
    isolation: isolate;
    text-align: center;
    font-size: clamp(32px,9vw,117px);
    margin: 0;
    padding:clamp(24px,6vh,80px)0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}

.treat_about::before{
    content: "Profile";
    display: inline-block;
    font-family: "Sawarabi Mincho",serif;
    font-weight: 400;
    font-style: normal;
    color: #707070;
    transform: rotate(-13deg);
    letter-spacing: 5px;
    position: absolute;
    top: 28%;
    left: 531px;
    z-index: -1;
    white-space: nowrap;
    opacity: 0.6;
    font-size: clamp(18px,6vw,70px);
}

h2{
    text-align: center; 
    font-size: 117px;  
    margin: 0;
    padding: 2% 0;
    font-family: "Kaisei Decol",serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
}

.treat_design{
    isolation: isolate;
    text-align: center;
    font-size: clamp(32px,9vw,117px);
    margin: 0;
    padding: clamp(24px,6vh,80px)0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}

.treat_design::before{
    content: "Art";
    display: inline-block;
    font-family: "Sawarabi Mincho", serif;
    font-weight: 400;
    font-style: normal;
    color: #707070;
    transform: rotate(-13deg);
    letter-spacing: 5px;
    position: absolute;
    left: 33%;
    top: 23%;
    z-index: -1;
    white-space: nowrap;
    opacity: 0.6;
    font-size: 70px;
}


.about{
    width: 70%;
    flex-direction: column;
}

.about p{
    line-height: 2.0;
}

.about-img{
    width: 60%;
}

.about-img img{
    width: 100%;
    border-radius: 20px;
}



/*bodyにappearクラスがついたら出現*/
body.appear .splashbg {
    display: block;
    content: "";
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #333;
    /*伸びる背景色の設定*/
    animation-name: PageAnime;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes PageAnime {
    0% {
        transform-origin: left;
        transform: scaleX(0);
    }

    50% {
        transform-origin: left;
        transform: scaleX(1);
    }

    50.001% {
        transform-origin: right;
    }

    100% {
        transform-origin: right;
        transform: scaleX(0);
    }
}

/*画面遷移の後現れるコンテンツ設定*/
#container {
    opacity: 0;
    /*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container {
    animation-name: PageAnimeAppear;
    animation-duration: 1s;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes PageAnimeAppear {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* .design_content{
    width: 100%;
    padding: 2% 0;
} */

.design ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content:space-around;
    padding: 0;
}

.design li{
    width: 30%;
}

.design ul p{
    text-align: center;
    line-height: 2.5;
}

.design img{
    border-radius: 0px 50px 0px 50px;
}


/* 下から */

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ↓　https: //haniwaman.com/parts/post-3405 */

.my-parts2 {
    border-radius: 8px;
    background-color: #D2B498;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    padding: .6em 2em;
    margin: 0 0 1em;
    cursor: pointer;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
    text-align: right;
    margin-left: 275px;
}

.my-parts2 a{
    color: #fff;
}

.my-parts2 a:hover {
    color: #8D1133;
    opacity: 0.8;
    cursor: url(../img/click1.png), auto;
}

.my-parts2 a:active {
    cursor: url(../img/click1.png), auto;
}

.btn_content{
    background-color: beige;
    width: 60%;
    padding: 50px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.btn_content img{
    position: absolute;
    top: px;
    left: 850px;
    z-index: -4;
    width: 40%;
    
}

.contact-text{
    letter-spacing: 5px;
}

/* .btn{
    background-color: bisque;
    border-radius: 144px;
    width: 250px;
    padding: 30px 126;
    margin: 0 auto;
} */

/* 丸がボタンに変形する */

.btntransform {
    /*丸の基点とするためrelativeを指定*/
    position: relative;
    /*ボタンの形状*/
    display: inline-block;
    padding: 0 0 0 15px;
    line-height: 50px;
    color:#333;
    font-weight: bold;
    text-decoration: none;
    outline: none;
    z-index: 2;
}

/* 丸が動く */
.btntransform::before {
    content: '';
    /*絶対配置で丸の位置を決める*/
    position: absolute;
    left: 0;
    z-index: 0;
    opacity: .8;
    /*丸の形状*/
    width: 50px;
    height: 50px;
    background: #D2B498;
    border-color: #707070;
    border-radius: 25px;
    /*アニメーションの指定*/
    transition: .3s ease-out;
}

/*hoverした際の形状*/
.btntransform:hover::before {
    width: 212px;
}

/* 矢印の形状 */
.btntransform::after {
    position: absolute;
    content: '';
    top: 1.3em;
    right: -15px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    transform: rotate(45deg);
}


.footer {
    width: 100%;
    height: 76px;
    margin-top: 30px;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-top: 15px; */
    background-color: #F2EBDB;
    opacity: .8;
    border-radius: 50px 50px 50px 50px;
}

.nav-title {
    /* width: 12.86%; */
    width: 20%;
}

.nav-title img {
    width: 100%;
    align-items: flex-end;
    
}

.nav2 {
    width: 55%;
    margin-left: 30%;
}

.nav2 a{
    cursor: url(../img/cute.png), auto;
}

.nav2 a:active {
    cursor: url(../img/cute.png), auto;
}

.nav2 ul{
    display: flex;
    justify-content:center;
    list-style: none;
}

.nav2 li{
    margin-left: 120px;
}

.nav2 li a{
    color: black;
    display: block;
}

.nav2 li a:hover {
    color: #8D1133;
    opacity: 0.8;
    cursor: url(../img/click1.png), auto;
}

.nav2 li a:active {
    cursor: url(../img/click1.png), auto;
}

/*========= ページトップのためのCSS ===============*/
/* p434 8-1-9 ページトップリンク */
/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 10px;
    bottom: 30px;
    z-index: 2;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateY(150px);
}

/*　上に上がる動き　*/
#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(150px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/
#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(150px);
    }
}

/*画像の切り替えと動き*/
#page-top a {
    /*aタグの形状*/
    display: block;
    width: 100px;
    height: 100px;
    color: #333;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    /*背景画像の指定*/
    background: url("../img/hibiscus1.png") no-repeat center;
    background-size: contain;
}

#page-top.floatAnime a {
    width: 100px;
    height: 130px;
    /*背景画像の指定*/
    background: url("../img/hibiscus2.png") no-repeat center;
    background-size: contain;
    /*アニメーションの指定*/
    animation: floatAnime 2s linear infinite;
    opacity: 0;
}

@keyframes floatAnime {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    25% {
        transform: translateX(-6px);
        opacity: 1;
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(6px);
        opacity: 1;
    }
}

/*Page Topと書かれたテキストの位置*/
#page-top span {
    position: absolute;
    bottom: -5px;
    right: 20px;
    color: #333;
    font-weight: bold;
    font-size: 15px;
}

}
/*ipadサイズレスポンシブ*/
@media(min-width:600px) and (max-width:999px) {
    body {
        min-width: 600px;
        max-width: 999px;
        background-color: #F2EBDB;
    }

    .container {
        width: 100%;
    }

    /* PCcss */
        img {
            width: 100%;
        }
    
        a {
            text-decoration: none;
        }
    
        * {
            cursor: url(../img/cute.png), auto;
            margin: 0;
            padding: 0;
        }
    
    
        .container {
            width: 100%;
            margin: 0 auto;
        }
    
        /*========= LoadingのためのCSS ===============*/
    
        /* Loading背景画面設定　*/
        #splash {
            /*fixedで全面に固定*/
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 999;
            background: #F2EBDB;
    
            color: #fff;
        }
    
        /* Loading画像中央配置　*/
        #splash_logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    
        /* Loading アイコンの大きさ設定　*/
        #splash_logo img {
            width: 260px;
        }
    
        /* fadeUpをするアイコンの動き */
    
        .fadeUp {
            animation-name: fadeUpAnime;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes fadeUpAnime {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
    
        /* ヘッダー */
        .header {
            width: 100%;
            height: 121.4px;
            display: flex;
            align-items: center;
            text-align: center;
        }
    
        .main-title {
            /* width: 12.86%; */
            width: 20%;
        }
    
        .main-title img {
            width: 100%;
            object-fit: cover;
        }
    
        #g-nav{
            display: none;
        }

        .nav1 {
            width: 42.47%;
            margin-left: 44.67%;
            font-size: 16px;
            font-weight: bold;
        }
    
        .nav1 a {
            color: black;
    
            display: block;
        }
    
        .nav1 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .nav1 a:active {
            cursor: url(../img/click1.png), auto;
        }
    
        #slider {
            width: 100%;
            height: 100vh;
            /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        }
    
        /* メインビジュアル */
        .mainvisual img {
            height: 350px;
            position: relative;
        }
    
        .nav1 ul {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
    
        h1 {
            position: absolute;
            left: 50%;
            top: 40%;
            transform: translateX(-50%);
            color: #fff;
            text-align: center;
            font-size: 4.375px;
            /* 70px */
            text-shadow: 0 2px 6px rgba(0,0,0,0.6);
            margin: 0;
            color: #8D1133;
            /* text-shadow: #4c5240 0px 3px 6px;
        text-shadow:  0px 10px 6px,0 0 #0000; */
            /* text-shadow: 5px 2px 10px rgba(141, 17, 51, 1), 5px 2px 10px rgba(60, 7, 22, 1); */
            text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                0px 8px 13px rgba(0, 0, 0, 0.1),
                0px 18px 23px rgba(0, 0, 0, 0.1);
        }
    
        /* 8-11 */
        /*==================================================
    ランダムにテキスト出現する
    ===================================*/
        .TextRandomAnime span {
            opacity: 0;
        }
    
        .TextRandomAnime.appearRandomtext span {
            animation: text_randomanime_on .5s ease-out forwards;
        }
    
        @keyframes text_randomanime_on {
            0% {
                opacity: 0;
            }
    
            100% {
                opacity: 1;
            }
        }
    
        .TextRandomAnime.appearRandomtext span:nth-child(2n) {
            animation-delay: .5s;
            /* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
        }
    
        .TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
            animation-delay: .15s;
            /* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
        }
    
        main {
            width: 100%;
        }
    
        .flex1 {
            width: 90%;
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
            align-items: center;
            padding: 5% 0;
        }
    
    
        /* about_content */
        .flex2 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
            align-items: center;
            padding: 5% 0;
        }
    
        .about {
            position: relative;
            width: 30%;
        }
    
        .about img {
            width: 100%;
            position: absolute;
            left: -169px;
            top: -289px;
            z-index: -3;
    
        }
    
        /* ↓　https: //haniwaman.com/parts/post-3405 */
    
        .my-parts1 {
            border-radius: 8px;
            background-color: #D2B498;
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            padding: .6em 2em;
            margin: 0 0 1em;
            cursor: pointer;
            box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
            text-align: right;
            margin-left: 175px;
            margin-top: 3px;
        }
    
    
        .my-parts1 a {
            color: #fff;
        }
    
        .my-parts1 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .my-parts1 a:active {
            cursor: url(../img/click1.png), auto;
        }
    
    
    
        /* あしらい */
        .treat_about{
            isolation: isolate;
            text-align: center;
            font-size: clamp(32px,9vw,117px);
            margin: 0;
            padding:clamp(24px,6vh,80px)0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
        
        .treat_about::before{
            content: "Profile";
            display: inline-block;
            font-family: "Sawarabi Mincho",serif;
            font-weight: 400;
            font-style: normal;
            color: #707070;
            transform: rotate(-13deg);
            letter-spacing: 5px;
            position: absolute;
            top: 26%;
            left: 248px;
            z-index: -1;
            white-space: nowrap;
            opacity: 0.6;
            font-size: clamp(18px,6vw,70px);
        }

        h2 {
            text-align: center;
            font-size: 117px;
            margin: 0;
            padding: 2% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
        }
    
        .treat_design{
            isolation: isolate;
            text-align: center;
            font-size: clamp(32px,9vw,117px);
            margin: 0;
            padding: clamp(24px,6vh,80px)0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
        
        .treat_design::before{
            content: "Art";
            display: inline-block;
            font-family: "Sawarabi Mincho", serif;
            font-weight: 400;
            font-style: normal;
            color: #707070;
            transform: rotate(-13deg);
            letter-spacing: 5px;
            position: absolute;
            left: 26%;
            top: 19%;
            z-index: -1;
            white-space: nowrap;
            opacity: 0.6;
            font-size: 70px;
        }
    
    
        .about {
            width: 70%;
            flex-direction: column;
        }
    
        .about p {
            line-height: 2.0;
        }
    
        .about-img {
            width: 50%;
        }
    
        .about-img img {
            width: 100%;
            border-radius: 20px;
            padding-top: 30px;
        }
    
    
    
        /*bodyにappearクラスがついたら出現*/
        body.appear .splashbg {
            display: block;
            content: "";
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            transform: scaleX(0);
            background-color: #333;
            /*伸びる背景色の設定*/
            animation-name: PageAnime;
            animation-duration: 1.2s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }
    
        @keyframes PageAnime {
            0% {
                transform-origin: left;
                transform: scaleX(0);
            }
    
            50% {
                transform-origin: left;
                transform: scaleX(1);
            }
    
            50.001% {
                transform-origin: right;
            }
    
            100% {
                transform-origin: right;
                transform: scaleX(0);
            }
        }
    
        /*画面遷移の後現れるコンテンツ設定*/
        #container {
            opacity: 0;
            /*はじめは透過0に*/
        }
    
        /*bodyにappearクラスがついたら出現*/
        body.appear #container {
            animation-name: PageAnimeAppear;
            animation-duration: 1s;
            animation-delay: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes PageAnimeAppear {
            0% {
                opacity: 0;
            }
    
            100% {
                opacity: 1;
            }
        }
    
    
        /* .design_content{
        width: 100%;
        padding: 2% 0;
    } */
    
        .design ul {
            width: 100%;
            list-style: none;
            display: flex;
            justify-content: space-around;
            padding: 0;
            font-size: 14px;
        }
    
        .design li {
            width: 30%;
        }
    
        .design ul p {
            text-align: center;
            line-height: 2.5;
        }
    
        .design img {
            border-radius: 0px 50px 0px 50px;
        }
    
    
        /* 下から */
    
        .fadeUp {
            animation-name: fadeUpAnime;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes fadeUpAnime {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
        /* ↓　https: //haniwaman.com/parts/post-3405 */
    
        .my-parts2 {
            border-radius: 8px;
            background-color: #D2B498;
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            padding: .6em 2em;
            margin: 0 0 1em;
            cursor: pointer;
            box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
            text-align: right;
            margin-left: 105px;
        }
    
        .my-parts2 a {
            color: #fff;
        }
    
        .my-parts2 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .my-parts2 a:active {
            cursor: url(../img/click1.png), auto;
        }
    
        .btn_content {
            background-color: beige;
            width: 60%;
            padding: 50px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
    
        .btn_content img {
            position: absolute;
            top: 160px;
            left: 540px;
            z-index: -4;
            width: 40%;
    
        }
    
        .contact-text {
            letter-spacing: 5px;
        }
    
        /* .btn{
        background-color: bisque;
        border-radius: 144px;
        width: 250px;
        padding: 30px 126;
        margin: 0 auto;
    } */
    
        /* 丸がボタンに変形する */
    
        .btntransform {
            /*丸の基点とするためrelativeを指定*/
            position: relative;
            /*ボタンの形状*/
            display: inline-block;
            padding: 0 0 0 15px;
            line-height: 50px;
            color: #333;
            font-weight: bold;
            text-decoration: none;
            outline: none;
            z-index: 2;
        }
    
        /* 丸が動く */
        .btntransform::before {
            content: '';
            /*絶対配置で丸の位置を決める*/
            position: absolute;
            left: 0;
            z-index: 0;
            opacity: .8;
            /*丸の形状*/
            width: 50px;
            height: 50px;
            background: #D2B498;
            border-color: #707070;
            border-radius: 25px;
            /*アニメーションの指定*/
            transition: .3s ease-out;
        }
    
        /*hoverした際の形状*/
        .btntransform:hover::before {
            width: 212px;
        }
    
        /* 矢印の形状 */
        .btntransform::after {
            position: absolute;
            content: '';
            top: 1.3em;
            right: -15px;
            width: 5px;
            height: 5px;
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            transform: rotate(45deg);
        }
    
    
        .footer {
            width: 100%;
            height: 76px;
            margin-top: 30px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* margin-top: 15px; */
            background-color: #F2EBDB;
            opacity: .8;
            border-radius: 50px 50px 50px 50px;
        }
    
        .nav-title {
            /* width: 12.86%; */
            width: 20%;
        }
    
        .nav-title img {
            width: 100%;
            align-items: flex-end;
    
        }
    
        .nav2 {
            width: 70%;
            margin-left: 5%;
        }
    
        .nav2 a {
            cursor: url(../img/cute.png), auto;
        }
    
        .nav2 a:active {
            cursor: url(../img/cute.png), auto;
        }
    
        .nav2 ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }
    
        .nav2 li {
            margin-left: 40px;
        }
    
        .nav2 li a {
            color: black;
            display: block;
        }
    
        .nav2 li a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .nav2 li a:active {
            cursor: url(../img/click1.png), auto;
        }
    
        /*========= ページトップのためのCSS ===============*/
        /* p434 8-1-9 ページトップリンク */
        /*リンクを右下に固定*/
        #page-top {
            position: fixed;
            right: 10px;
            bottom: 30px;
            z-index: 2;
            /*はじめは非表示*/
            opacity: 0;
            transform: translateY(150px);
        }
    
        /*　上に上がる動き　*/
        #page-top.UpMove {
            animation: UpAnime 0.5s forwards;
        }
    
        @keyframes UpAnime {
            from {
                opacity: 0;
                transform: translateY(150px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
        /*　下に下がる動き　*/
        #page-top.DownMove {
            animation: DownAnime 0.5s forwards;
        }
    
        @keyframes DownAnime {
            from {
                opacity: 1;
                transform: translateY(0);
            }
    
            to {
                opacity: 1;
                transform: translateY(150px);
            }
        }
    
        /*画像の切り替えと動き*/
        #page-top a {
            /*aタグの形状*/
            display: block;
            width: 100px;
            height: 100px;
            color: #333;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 0.6rem;
            /*背景画像の指定*/
            background: url("../img/hibiscus1.png") no-repeat center;
            background-size: contain;
        }
    
        #page-top.floatAnime a {
            width: 100px;
            height: 130px;
            /*背景画像の指定*/
            background: url("../img/hibiscus2.png") no-repeat center;
            background-size: contain;
            /*アニメーションの指定*/
            animation: floatAnime 2s linear infinite;
            opacity: 0;
        }
    
        @keyframes floatAnime {
            0% {
                transform: translateX(0);
                opacity: 0;
            }
    
            25% {
                transform: translateX(-6px);
                opacity: 1;
            }
    
            50% {
                transform: translateX(0)
            }
    
            100% {
                transform: translateX(6px);
                opacity: 1;
            }
        }
    
        /*Page Topと書かれたテキストの位置*/
        #page-top span {
            position: absolute;
            bottom: -5px;
            right: 20px;
            color: #333;
            font-weight: bold;
            font-size: 15px;
        }
}

/*SPサイズレスポンシブ*/
@media(max-width:599px) {
    body {
        max-width: 599px;
    }

    .container {
        width: 100%;
    }

    /* タブレットcss */
        body {
            max-width: 599px;
            background-color: #F2EBDB;
        }
    
        .container {
            width: 100%;
        }
    
        /* PCcss */
        img {
            width: 100%;
            /* テスト */
            height: auto;
            display: block;
        }
    
        a {
            text-decoration: none;
        }
    
        * {
            cursor: url(../img/cute.png), auto;
            margin: 0;
            padding: 0;
        }

    
    
        .container {
            width: 100%;
            margin: 0 auto;
        }

        html, body{
            max-width: 100%;
            overflow-x: hidden;
        }

        /* 検証するために調整すること↓ */
*,
*::before,
*::after{
    outline: 1px solid red;
}
    
        /*========= LoadingのためのCSS ===============*/
    
        /* Loading背景画面設定　*/
        #splash {
            /*fixedで全面に固定*/
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #F2EBDB;
    
            color: #fff;
        }
    
        /* Loading画像中央配置　*/
        #splash_logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    
        /* Loading アイコンの大きさ設定　*/
        #splash_logo img {
            width: 260px;
        }
    
        /* fadeUpをするアイコンの動き */
    
        .fadeUp {
            animation-name: fadeUpAnime;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes fadeUpAnime {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
    
        /* ヘッダー */
        .header {
            width: 100%;
            height: 121.4px;
            display: flex;
            align-items: center;
            text-align: center;
        }
    
        .main-title {
            /* width: 12.86%; */
            width: 20%;
        }
    
        .main-title img {
            width: 100%;
            object-fit: cover;
        }
    
        .nav1 {
           display: none;
        }
    
        .nav1 a {
            color: black;
    
            display: block;
        }
    
        .nav1 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .nav1 a:active {
            cursor: url(../img/click1.png), auto;
        }

        /* p196 5-1-14 */
                /*========= ナビゲーションのためのCSS ===============*/
        
                #g-nav {
                    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
                    position: fixed;
                    z-index: 999;
                    /*ナビのスタート位置と形状*/
                    top: 0;
                    right: -120%;
                    width: 100%;
                    height: 100vh;
                    /*ナビの高さ*/
                    background: #999;
                    /*動き*/
                    transition: all 0.6s;
                }
        
                /*アクティブクラスがついたら位置を0に*/
                #g-nav.panelactive {
                    right: 0;
                }
        
                /*ナビゲーションの縦スクロール*/
                #g-nav.panelactive #g-nav-list {
                    /*ナビの数が増えた場合縦スクロール*/
                    position: fixed;
                    z-index: 999;
                    width: 100%;
                    height: 100vh;
                    /*表示する高さ*/
                    overflow: auto;
                    -webkit-overflow-scrolling: touch;
                }
        
                /*ナビゲーション*/
                #g-nav ul {
                    /*ナビゲーション天地中央揃え*/
                    position: absolute;
                    z-index: -3;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
        
                /*リストのレイアウト設定*/
        
                #g-nav li {
                    list-style: none;
                    text-align: center;
                }
        
                #g-nav li a {
                    color: #333;
                    text-decoration: none;
                    padding: 10px;
                    display: block;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    font-weight: bold;
                }
        
                /*========= ボタンのためのCSS ===============*/
                .openbtn {
                    position: fixed;
                    z-index: 5;
                    /*ボタンを最前面に*/
                    top: 45px;
                    right: 22px;
                    cursor: pointer;
                    width: 50px;
                    height: 50px;
                }
        
                /*×に変化*/
                .openbtn span {
                    display: inline-block;
                    transition: all .4s;
                    position: absolute;
                    left: 14px;
                    height: 3px;
                    border-radius: 2px;
                    background-color: #666;
                    width: 45%;
                }
        
                .openbtn span:nth-of-type(1) {
                    top: 15px;
                }
        
                .openbtn span:nth-of-type(2) {
                    top: 23px;
                }
        
                .openbtn span:nth-of-type(3) {
                    top: 31px;
                }
        
                .openbtn.active span:nth-of-type(1) {
                    top: 18px;
                    left: 18px;
                    transform: translateY(6px) rotate(-45deg);
                    width: 30%;
                }
        
                .openbtn.active span:nth-of-type(2) {
                    opacity: 0;
                }
        
                .openbtn.active span:nth-of-type(3) {
                    top: 30px;
                    left: 18px;
                    transform: translateY(-6px) rotate(45deg);
                    width: 30%;
                }
    
        #slider {
            width: 100%;
            height: 100vh;
            /*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
        }
    
        /* メインビジュアル */
        .mainvisual img {
            height: 350px;
            position: relative;
        }
    
        .nav1 ul {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
    
        h1 {
            font-size: 3.125rem;
            /* 50px */
            position: absolute;
            left: 103px;
            top: 378px;
            color: #8D1133;
            /* text-shadow: #4c5240 0px 3px 6px;
        text-shadow:  0px 10px 6px,0 0 #0000; */
            /* text-shadow: 5px 2px 10px rgba(141, 17, 51, 1), 5px 2px 10px rgba(60, 7, 22, 1); */
            text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4),
                0px 8px 13px rgba(0, 0, 0, 0.1),
                0px 18px 23px rgba(0, 0, 0, 0.1);
        }
    
        /* 8-11 */
        /*==================================================
    ランダムにテキスト出現する
    ===================================*/
        .TextRandomAnime span {
            opacity: 0;
        }
    
        .TextRandomAnime.appearRandomtext span {
            animation: text_randomanime_on .5s ease-out forwards;
        }
    
        @keyframes text_randomanime_on {
            0% {
                opacity: 0;
            }
    
            100% {
                opacity: 1;
            }
        }
    
        .TextRandomAnime.appearRandomtext span:nth-child(2n) {
            animation-delay: .5s;
            /* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
        }
    
        .TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
            animation-delay: .15s;
            /* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
        }
    
        main {
            width: 100%;
        }
    
        .flex1 {
            width: 80%;
            display: flex;
            justify-content: center;
            margin: 20px auto;
            align-items: center;
            padding: 5% 0;
            flex-direction: column-reverse;
        }
    
    
        /* about_content */
        .flex2 {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin: 20px auto;
            align-items: center;
            padding: 5% 0;
        }
    
        .about {
            position: relative;
            width: 30%;
        }
    
        .about img {
            width: 70%;
            position: absolute;
            left: -150px;
            top: -440px;
            z-index: -3;
    
        }
    
        /* ↓　https: //haniwaman.com/parts/post-3405 */
    
        .my-parts1 {
            border-radius: 8px;
            background-color: #D2B498;
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            padding: .6em 2em;
            margin: 0 0 1em;
            cursor: pointer;
            box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
            text-align: right;
            margin-left: 75px;
            margin-top: 10px;
        }
    
    
        .my-parts1 a {
            color: #fff;
        }
    
        .my-parts1 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .my-parts1 a:active {
            cursor: url(../img/click1.png), auto;
        }
    
    
    
        /* あしらい */
        .treat_about {
            text-align: center;
            font-size: 60px;
            margin: 0;
            padding: 10% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        .treat_about::before {
            content: "Profile";
            display: inline-block;
            font-family: "Sawarabi Mincho", serif;
            font-weight: 400;
            font-style: normal;
            color: #707070;
            transform: rotate(-13deg);
            letter-spacing: 5px;
            position: absolute;
            left: 120px;
            top: 50px;
            z-index: -1;
            white-space: nowrap;
            opacity: 0.6;
            font-size: 25px;
        }
    
        h2 {
            text-align: center;
            font-size: 50px;
            margin: 0;
            padding: 2% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
        }
    
        .treat_design{
            isolation: isolate;
            text-align: center;
            font-size: clamp(32px,9vw,117px);
            margin: 0;
            padding: clamp(24px,6vh,80px)0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
        
        .treat_design::before{
            content: "Art";
            display: inline-block;
            font-family: "Sawarabi Mincho", serif;
            font-weight: 400;
            font-style: normal;
            color: #707070;
            transform: rotate(-13deg);
            letter-spacing: 5px;
            position: absolute;
            left: 27%;
            top: 23%;
            z-index: -1;
            white-space: nowrap;
            opacity: 0.6;
            font-size: 40px;
        }
    
    
        .about {
            width: 70%;
            flex-direction: column;
        }
    
        .about p {
            line-height: 2.0;
        }
    
        .about-img {
            width: 60%;
        }
    
        .about-img img {
            width: 100%;
            border-radius: 20px;
        }
    
    
    
        /*bodyにappearクラスがついたら出現*/
        body.appear .splashbg {
            display: block;
            content: "";
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100vh;
            top: 0;
            left: 0;
            transform: scaleX(0);
            background-color: #333;
            /*伸びる背景色の設定*/
            animation-name: PageAnime;
            animation-duration: 1.2s;
            animation-timing-function: ease-in-out;
            animation-fill-mode: forwards;
        }
    
        @keyframes PageAnime {
            0% {
                transform-origin: left;
                transform: scaleX(0);
            }
    
            50% {
                transform-origin: left;
                transform: scaleX(1);
            }
    
            50.001% {
                transform-origin: right;
            }
    
            100% {
                transform-origin: right;
                transform: scaleX(0);
            }
        }
    
        /*画面遷移の後現れるコンテンツ設定*/
        #container {
            opacity: 0;
            /*はじめは透過0に*/
        }
    
        /*bodyにappearクラスがついたら出現*/
        body.appear #container {
            animation-name: PageAnimeAppear;
            animation-duration: 1s;
            animation-delay: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes PageAnimeAppear {
            0% {
                opacity: 0;
            }
    
            100% {
                opacity: 1;
            }
        }
    
    
        /* .design_content{
        width: 100%;
        padding: 2% 0;
    } */
    
        .design ul {
            width: 100%;
            list-style: none;
            display: flex;
            justify-content: center;
            padding: 0;
            margin-left: -25;
            flex-direction: column;
        }
    
        .design li {
            width: 67%;
            margin: 0 auto;
        }
    
        .design ul p {
            text-align: center;
            line-height: 2.5;
        }
    
        .design img {
            border-radius: 0px 50px 0px 50px;
        }
    
    
        /* 下から */
    
        .fadeUp {
            animation-name: fadeUpAnime;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes fadeUpAnime {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
        /* ↓　https: //haniwaman.com/parts/post-3405 */
    
        .my-parts2 {
            border-radius: 8px;
            background-color: #D2B498;
            font-size: 16px;
            font-weight: bold;
            display: inline-block;
            padding: .6em 2em;
            margin: 0 0 1em;
            cursor: pointer;
            box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .2);
            text-align: right;
            margin-left: 47px;
        }
    
        .my-parts2 a {
            color: #fff;
        }
    
        .my-parts2 a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .my-parts2 a:active {
            cursor: url(../img/click1.png), auto;
        }
    
        .btn_content {
            background-color: beige;
            width: 71%;
            padding: 33px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
    
        .btn_content img {
            position: absolute;
            top: 200px;
            left: 289px;
            z-index: -4;
            width: 40%;
    
        }
    
        .contact-text {
            letter-spacing: 4px;
            font-size: 16px;
        }

        .contact-text p{
            margin: 26px auto;
        }
    
        /* .btn{
        background-color: bisque;
        border-radius: 144px;
        width: 250px;
        padding: 30px 126;
        margin: 0 auto;
    } */
    
        /* 丸がボタンに変形する */
    
        .btntransform {
            /*丸の基点とするためrelativeを指定*/
            position: relative;
            /*ボタンの形状*/
            display: inline-block;
            padding: 0 0 0 15px;
            line-height: 50px;
            color: #333;
            font-weight: bold;
            text-decoration: none;
            outline: none;
            z-index: 2;
        }
    
        /* 丸が動く */
        .btntransform::before {
            content: '';
            /*絶対配置で丸の位置を決める*/
            position: absolute;
            left: 0;
            z-index: 0;
            opacity: .8;
            /*丸の形状*/
            width: 50px;
            height: 50px;
            background: #D2B498;
            border-color: #707070;
            border-radius: 25px;
            /*アニメーションの指定*/
            transition: .3s ease-out;
        }
    
        /*hoverした際の形状*/
        .btntransform:hover::before {
            width: 212px;
        }
    
        /* 矢印の形状 */
        .btntransform::after {
            position: absolute;
            content: '';
            top: 1.3em;
            right: -15px;
            width: 5px;
            height: 5px;
            border-top: 1px solid #000;
            border-right: 1px solid #000;
            transform: rotate(45deg);
        }
    
    
        .footer {
            width: 100%;
            height: 76px;
            margin-top: 30px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* margin-top: 15px; */
            background-color: #F2EBDB;
            opacity: .8;
            border-radius: 50px 50px 50px 50px;
        }
    
        .nav-title {
            /* width: 12.86%; */
            width: 20%;
        }
    
        .nav-title img {
            width: 100%;
            align-items: flex-end;
    
        }
    
        .nav2 {
            width: 78%;
            margin-left: 5%;
        }
    
        .nav2 a {
            cursor: url(../img/cute.png), auto;
        }
    
        .nav2 a:active {
            cursor: url(../img/cute.png), auto;
        }
    
        .nav2 ul {
            display: flex;
            justify-content: center;
            list-style: none;
        }
    
        .nav2 li {
            margin-left: 15px;
        }
    
        .nav2 li a {
            color: black;
            display: block;
        }
    
        .nav2 li a:hover {
            color: #8D1133;
            opacity: 0.8;
            cursor: url(../img/click1.png), auto;
        }
    
        .nav2 li a:active {
            cursor: url(../img/click1.png), auto;
        }
    
        /*========= ページトップのためのCSS ===============*/
        /* p434 8-1-9 ページトップリンク */
        /*リンクを右下に固定*/
        #page-top {
            position: fixed;
            right: 10px;
            bottom: 30px;
            z-index: 2;
            /*はじめは非表示*/
            opacity: 0;
            transform: translateY(150px);
        }
    
        /*　上に上がる動き　*/
        #page-top.UpMove {
            animation: UpAnime 0.5s forwards;
        }
    
        @keyframes UpAnime {
            from {
                opacity: 0;
                transform: translateY(150px);
            }
    
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    
        /*　下に下がる動き　*/
        #page-top.DownMove {
            animation: DownAnime 0.5s forwards;
        }
    
        @keyframes DownAnime {
            from {
                opacity: 1;
                transform: translateY(0);
            }
    
            to {
                opacity: 1;
                transform: translateY(150px);
            }
        }
    
        /*画像の切り替えと動き*/
        #page-top a {
            /*aタグの形状*/
            display: block;
            width: 100px;
            height: 100px;
            color: #333;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            font-size: 0.6rem;
            /*背景画像の指定*/
            background: url("../img/hibiscus1.png") no-repeat center;
            background-size: contain;
        }
    
        #page-top.floatAnime a {
            width: 100px;
            height: 130px;
            /*背景画像の指定*/
            background: url("../img/hibiscus2.png") no-repeat center;
            background-size: contain;
            /*アニメーションの指定*/
            animation: floatAnime 2s linear infinite;
            opacity: 0;
        }
    
        @keyframes floatAnime {
            0% {
                transform: translateX(0);
                opacity: 0;
            }
    
            25% {
                transform: translateX(-6px);
                opacity: 1;
            }
    
            50% {
                transform: translateX(0)
            }
    
            100% {
                transform: translateX(6px);
                opacity: 1;
            }
        }
    
        /*Page Topと書かれたテキストの位置*/
        #page-top span {
            position: absolute;
            bottom: -5px;
            right: 20px;
            color: #333;
            font-weight: bold;
            font-size: 15px;
        }
}