@charset "UTF-8";

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

    .container {
        width: 100%;
    }

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

img {
    width: 100%;
}

a {
    text-decoration: none;
}


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

/*==================================================
じわっ 8-9 p340
===================================*/

.blur {
    animation-name: blurAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes blurAnime {
    from {
        filter: blur(10px);
        transform: scale(1.02);
        opacity: 0;
    }

    to {
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}

.blurTrigger {
    opacity: 0;
}

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

/*========= LoadingのためのCSS ===============*/
/* p96ページ */
/* Loading背景画面設定　*/

#splash {
    /*fixedで全面に固定*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    background: #F2EBDB;
    text-align: center;
    color: #333;
}

/* Loadingバー中央配置　*/
#splash_text {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 100%;
    transform: translate(-50%, -50%);
    color: #333;
}

/* ヘッダー */
.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 ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
}

.nav1 a {
    color: black;
    cursor: url(../img/click1.png), auto;
    display: block;
}

.nav1 a:hover {
    color: #8D1133;
    opacity: 0.8;
}

/* about */
.about_title{
    text-align: center;
    font-size: 95px;
    margin: 0;
    padding: 5% 0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}

/* p316 8-2 流れるように出現（左から右） */
/*========= 流れるテキスト ===============*/


/*全共通*/

.slide-in {
    overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
    display: inline-block;
}

/*左右のアニメーション*/
.leftAnime {
    opacity: 0;
    /*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
    animation-name: slideTextX100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes slideTextX100 {
    from {
        transform: translateX(-100%);
        /*要素を左の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}

.slideAnimeRightLeft {
    animation-name: slideTextX-100;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}


@keyframes slideTextX-100 {
    from {
        transform: translateX(100%);
        /*要素を右の枠外に移動*/
        opacity: 0;
    }

    to {
        transform: translateX(0);
        /*要素を元の位置に移動*/
        opacity: 1;
    }
}



.about_content{
    /* background-color:pink; */
    width: 80%;
    display: flex;
    margin: 0 auto;
    text-align: center;
    align-items: center;
    margin-bottom: 70px;
}

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

.about p{
    line-height: 3.0;
}

.about_img{
    width: 65%;
}

.about_img img{
    width: 100%;
    border-radius: 50px;
}

/* Ican */
.Ican_title{
    text-align: center;
    font-size: 95px;
    margin: 0;
    padding: 3% 0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}


.Ican_about ul{
    display: flex;
    justify-content: space-around;
    width: 80%;
    list-style: none;
    margin: 0 auto;
    text-align: center;
}

.Ican_about li{
    width: 55%;
    margin-left: 30Px;
}

.Ican_about img{
    width: 100%;
    border-radius: 0px 50px 0px 50px;
}

/* p134  4-12 順番に現れる（CSS×JS*/
/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box {
    opacity: 0;
}

/*==================================================
ふわっ
===================================*/

.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);
    }
}

.fogo_title{
    text-align: center;
    font-size: 95px;
    margin: 0;
    padding: 3% 0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}

/* ロゴについて */
.content_rogo {
    width: 80%;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    text-align: center;
    align-items: center;
}

.rogo {
    width: 55%;
}

.text {
    width: 40%;
}

.text p{
    line-height: 3.0;
}

.rogo img {
    width: 100%;
    border-radius: 0 50px 0px 50px;
}

/* 私のすきなこと */
.content_myfarn h2{
    text-align: center;
    font-size: 95px;
    margin: 0;
    padding: 3% 0;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    color: #8D1133;
    position: relative;
}

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

.content_text p{
    padding: 113px 157px;
    line-height: 3.0;
    letter-spacing: 10px;
}


/* フッター */
.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: 100px;
}

.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 ===============*/
/* 8-1-8 リンクボタンをクリックしたら形状が変化 */
/*リンクを右下に固定*/
#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;
        }
    
        /*==================================================
    じわっ 8-9 p340
    ===================================*/
    
        .blur {
            animation-name: blurAnime;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
    
        @keyframes blurAnime {
            from {
                filter: blur(10px);
                transform: scale(1.02);
                opacity: 0;
            }
    
            to {
                filter: blur(0);
                transform: scale(1);
                opacity: 1;
            }
        }
    
        .blurTrigger {
            opacity: 0;
        }
    
        .container {
            width: 100%;
            margin: 0 auto;
        }
    
        /*========= LoadingのためのCSS ===============*/
        /* p96ページ */
        /* Loading背景画面設定　*/
    
        #splash {
            /*fixedで全面に固定*/
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100%;
            background: #F2EBDB;
            text-align: center;
            color: #333;
        }
    
        /* Loadingバー中央配置　*/
        #splash_text {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            width: 100%;
            transform: translate(-50%, -50%);
            color: #333;
        }
    
        /* ヘッダー */
        .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 {
            width: 42.47%;
            margin-left: 38%;
            font-size: 16px;
            font-weight: bold;
        }

        #g-nav{
            display: none;
        }
    
        .nav1 ul {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
    
        .nav1 a {
            color: black;
            cursor: url(../img/click1.png), auto;
            display: block;
        }
    
        .nav1 a:hover {
            color: #8D1133;
            opacity: 0.8;
        }
    
        /* about */
        .about_title {
            text-align: center;
            font-size: 95px;
            margin: 0;
            padding: 5% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        /* p316 8-2 流れるように出現（左から右） */
        /*========= 流れるテキスト ===============*/
    
    
        /*全共通*/
    
        .slide-in {
            overflow: hidden;
            display: inline-block;
        }
    
        .slide-in_inner {
            display: inline-block;
        }
    
        /*左右のアニメーション*/
        .leftAnime {
            opacity: 0;
            /*事前に透過0にして消しておく*/
        }
    
        .slideAnimeLeftRight {
            animation-name: slideTextX100;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes slideTextX100 {
            from {
                transform: translateX(-100%);
                /*要素を左の枠外に移動*/
                opacity: 0;
            }
    
            to {
                transform: translateX(0);
                /*要素を元の位置に移動*/
                opacity: 1;
            }
        }
    
        .slideAnimeRightLeft {
            animation-name: slideTextX-100;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
    
        @keyframes slideTextX-100 {
            from {
                transform: translateX(100%);
                /*要素を右の枠外に移動*/
                opacity: 0;
            }
    
            to {
                transform: translateX(0);
                /*要素を元の位置に移動*/
                opacity: 1;
            }
        }
    
    
    
        .about_content {
            /* background-color:pink; */
            width: 100%;
            display: flex;
            margin: 0 auto;
            text-align: center;
            align-items: center;
            margin-bottom: 70px;
            flex-direction: column-reverse;
        }
    
        .about {
            width: 70%;
            flex-direction: column;
        }
    
        .about p {
            line-height: 3.0;
            font-size:15px;
            letter-spacing: 3px;
        }
    
        .about_img {
            width: 65%;
        }
    
        .about_img img {
            width: 100%;
            border-radius: 50px;
        }
    
        /* Ican */
        .Ican_title {
            text-align: center;
            font-size: 60px;
            margin: 0;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
    
        .Ican_about ul {
            display: flex;
            justify-content: center;
            width: 100%;
            list-style: none;
            margin-left: -53px;
            text-align: center;
            flex-direction: column;
            letter-spacing: 5px;
        }
    
        .Ican_about li {
            width: 80%;
            margin:0 auto;
        }
    
        .Ican_about img {
            width: 100%;
            border-radius: 0px 50px 0px 50px;
        }
    
        /* p134  4-12 順番に現れる（CSS×JS*/
        /*==================================================
    スタート時は要素自体を透過0にするためのopacity:0;を指定する
    ===================================*/
    
        .box {
            opacity: 0;
        }
    
        /*==================================================
    ふわっ
    ===================================*/
    
        .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);
            }
        }
    
        .fogo_title {
            text-align: center;
            font-size: 60px;
            margin: 0;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        /* ロゴについて */
        .content_rogo {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 0 auto;
            text-align: center;
            align-items: center;
            flex-direction: column;
        }
    
        .rogo {
            width: 85%;
        }
    
        .text {
            width: 40%;
        }
    
        .text p {
            line-height: 2.5;
            letter-spacing: 5px;
        }
    
        .rogo img {
            width: 100%;
            border-radius: 0 50px 0px 50px;
        }
    
        /* 私のすきなこと */
        .content_myfarn h2 {
            text-align: center;
            font-size: 60px;
            margin: 0;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        .content_text {
            background-color: beige;
            width: 60%;
            padding: 50px;
            margin: 0 auto;
            text-align: center;
        }
    
        .content_text p {
            padding: 32px;
            line-height: 3.0;
            letter-spacing: 10px;
        }
    
    
        /* フッター */
        .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: 60%;
            margin-left: 20%;
        }
    
        .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: 62px;
        }
    
        .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 ===============*/
        /* 8-1-8 リンクボタンをクリックしたら形状が変化 */
        /*リンクを右下に固定*/
        #page-top {
            position: fixed;
            right: 10px;
            bottom: 46px;
            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 {
                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;
        }
    
        /*==================================================
    じわっ 8-9 p340
    ===================================*/
    
        .blur {
            animation-name: blurAnime;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }
    
        @keyframes blurAnime {
            from {
                filter: blur(10px);
                transform: scale(1.02);
                opacity: 0;
            }
    
            to {
                filter: blur(0);
                transform: scale(1);
                opacity: 1;
            }
        }
    
        .blurTrigger {
            opacity: 0;
        }
    
        .container {
            width: 100%;
            margin: 0 auto;
        }
    
        /*========= LoadingのためのCSS ===============*/
        /* p96ページ */
        /* Loading背景画面設定　*/
    
        #splash {
            /*fixedで全面に固定*/
            position: fixed;
            z-index: 999;
            width: 100%;
            height: 100%;
            background: #F2EBDB;
            text-align: center;
            color: #333;
        }
    
        /* Loadingバー中央配置　*/
        #splash_text {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 999;
            width: 100%;
            transform: translate(-50%, -50%);
            color: #333;
        }
    
        /* ヘッダー */
        .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 ul {
            display: flex;
            justify-content: space-around;
            list-style: none;
        }
    
        .nav1 a {
            color: black;
            cursor: url(../img/click1.png), auto;
            display: block;
        }
    
        .nav1 a:hover {
            color: #8D1133;
            opacity: 0.8;
        }

                /* 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: 89px;
                    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%;
                }
    
        /* about */
        .about_title {
            text-align: center;
            font-size: 80px;
            margin: 0;
            padding: 5% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        /* p316 8-2 流れるように出現（左から右） */
        /*========= 流れるテキスト ===============*/
    
    
        /*全共通*/
    
        .slide-in {
            overflow: hidden;
            display: inline-block;
        }
    
        .slide-in_inner {
            display: inline-block;
        }
    
        /*左右のアニメーション*/
        .leftAnime {
            opacity: 0;
            /*事前に透過0にして消しておく*/
        }
    
        .slideAnimeLeftRight {
            animation-name: slideTextX100;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
        @keyframes slideTextX100 {
            from {
                transform: translateX(-100%);
                /*要素を左の枠外に移動*/
                opacity: 0;
            }
    
            to {
                transform: translateX(0);
                /*要素を元の位置に移動*/
                opacity: 1;
            }
        }
    
        .slideAnimeRightLeft {
            animation-name: slideTextX-100;
            animation-duration: 0.8s;
            animation-fill-mode: forwards;
            opacity: 0;
        }
    
    
        @keyframes slideTextX-100 {
            from {
                transform: translateX(100%);
                /*要素を右の枠外に移動*/
                opacity: 0;
            }
    
            to {
                transform: translateX(0);
                /*要素を元の位置に移動*/
                opacity: 1;
            }
        }
    
    
    
        .about_content {
            /* background-color:pink; */
            width: 100%;
            display: flex;
            margin: 0 auto;
            text-align: center;
            align-items: center;
            margin-bottom: 70px;
            flex-direction: column-reverse;
        }
    
        .about {
            width: 70%;
            flex-direction: column;
        }
    
        .about p {
            line-height: 3.0;
        }
    
        .about_img {
            width: 65%;
        }
    
        .about_img img {
            width: 100%;
            border-radius: 50px;
        }
    
        /* Ican */
        .Ican_about{
            margin: 0 auto;;
        }

        .Ican_title {
            text-align: center;
            font-size: 39px;
            margin: 0;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
    
        .Ican_about ul {
            display: flex;
            justify-content: center;
            width: 136%;
            list-style: none;
            margin: 0 auto;
            text-align: center;
            flex-direction: column;
        }
    
        .Ican_about li {
            width: 44%;
            margin-left: 30Px;
        }
    
        .Ican_about img {
            width: 100%;
            border-radius: 0px 50px 0px 50px;
        }
    
        /* p134  4-12 順番に現れる（CSS×JS*/
        /*==================================================
    スタート時は要素自体を透過0にするためのopacity:0;を指定する
    ===================================*/
    
        .box {
            opacity: 0;
        }
    
        /*==================================================
    ふわっ
    ===================================*/
    
        .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);
            }
        }
    
        .fogo_title {
            text-align: center;
            font-size: 39px;
            margin-left: -87;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        /* ロゴについて */
        .content_rogo {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-left: -30;
            text-align: center;
            align-items: center;
            flex-direction: column;
        }
    
        .rogo {
            width: 55%;
        }
    
        .text {
            width: 40%;
        }
    
        .text p {
            line-height: 3.0;
            letter-spacing: 4px;
        }
    
        .rogo img {
            width: 100%;
            border-radius: 0 50px 0px 50px;
        }
    
        .content_myfarn{
            margin: 0 auto;
        }

        /* 私のすきなこと */
        .content_myfarn h2 {
            text-align: center;
            font-size: 39px;
            margin: 0;
            padding: 3% 0;
            font-family: "Kaisei Decol", serif;
            font-weight: 400;
            font-style: normal;
            color: #8D1133;
            position: relative;
        }
    
        .content_text {
            background-color: beige;
            width: 60%;
            padding: 30px;
            margin: 0 auto;
            text-align: center;
        }
    
        .content_text p {
            padding: 16px;
            line-height: 3.0;
            letter-spacing: 10px;
        }
    
    
        /* フッター */
        .footer {
            width: 100%;
            height: 76px;
            margin-top: 30px;
            font-size: 16px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            /* margin-top: 15px; */
            background-color: #F2EBDB;
            opacity: .8;
            border-radius: 50px 50px 50px 50px;
            margin-left: -68px;
        }
    
        .nav-title {
            width: 27%;
        }
    
        .nav-title img {
            width: 100%;
            align-items: flex-end;
    
        }
    
        .nav2 {
            width: 39%;
            margin-left: 12%;
        }
    
        .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: 33px;
        }
    
        .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 ===============*/
        /* 8-1-8 リンクボタンをクリックしたら形状が変化 */
        /*リンクを右下に固定*/
        #page-top {
            position: fixed;
            right: 57px;
            bottom: 48px;
            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;
        }
    }