/*PC用*/
@media screen and (min-width:761px) {

    .photos {
        width: 60vw;
        height: auto;
    }

    h4 {
        font-size: 2vw;
        margin-top: 6vw;
        margin-bottom: 3vw;
    }

    span {
        font-size: 2vw;
    }

    .fadeInRight {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
    }


    .fadeInRight1 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight1;
        animation-name: fadeInRight1;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight1 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight1 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .fadeInRight2 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight2;
        animation-name: fadeInRight2;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }


    .fadeInRight3 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight3;
        animation-name: fadeInRight3;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight3 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight3 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .fadeInRight4 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight4;
        animation-name: fadeInRight4;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight4 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight4 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }







    <div class="wave"><canvas id="waveCanvas"></canvas></div>.wave {
        height: 200px;
        /*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
        display: block;
        vertical-align: bottom;
        padding-top: 50px;
    }

    canvas {
        bottom: 0;
        left: 0;
        width: 100%;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        max-width: 100%;
        height: auto;
    }

    #waveCanvas {
        vertical-align: bottom;
        animation-name: fadeInAnime;
        animation-duration: 3s;
    }

	/*---------------------------------------------------------------ここから--------------------------------------------------------------------*/
    .button04{
        border: 1px solid yellow;
        background-color: white;
        margin-left:3vw;
        font-size: 1vw;
        width: auto;
        height: auto;
        border-radius: 8px;
    }

    .button04 a{
        text-decoration: none;
        color:black;
    }


    .button05 {
        border: 1px solid yellow;
        background-color: black;
        margin-left:1vw;
        color:yellow;
        font-size: 1vw;
        width: auto;
        height: auto;
        border-radius: 8px;
    }


    

    .button05 a{
        text-decoration: none;
        color:yellow;
    }







    /*header{
display:flex;
align-items:center;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 10px 0;
border-bottom: 1px solid #ccc;
background-image:white;
backdrop-filter:blur(8px);
}*/

    
    
    .fresh {
        color:yellow;
        width: 20vw;
        height: auto;
        font-size: 1.7vw;
        margin-left: 1.5vw;
        display: flex;
        font-family: "Sawarabi Mincho", serif;
        align-items: center;
        text-decoration:none;
    }
    .logo {
        align-items: center;
        width: 6vw;
        height: auto;
    }
    
    header {
        height: 5vw;
        background-color: black;
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
        border-bottom: 0.1vw solid #ccc;
    }

    
    
    #g-nav {
        margin-left: 8vw;
    }

    



    body {
        padding-top: 130px;
        text-align: center;
        margin: 0;
        background-color: black;
        color: yellow;
    }

    #g-navi {
        list-style: none;
        text-align: center;
        display: flex;
        align-items: center;
        margin-left: 2vw;
        padding-left:0;
    }

    h1 {
        text-align: left;
        padding-left: 10vw;
    }

    h1 a {
        padding-left: 0.2vw;
        color: black;
        text-decoration: none;
        font-size: 2.5vw;
    }

    #g-navi ul {
        display: block;
        width: 100%;
        height: auto;
    }

    #g-navi li {
        width: 100%;
        height: auto;
        padding-left: 1vw;
    }

    #g-navi li a {
        font-family: "Sawarabi Mincho", serif;
        width: 16.6666%;
        text-align: center;
        align-items: center;
        color: white;
        text-decoration: none;
        padding: 0.5vw 0.5vw;
        display: block;
        font-size: 1.7vw;
        font-weight: bold;
    }

    #g-navi li a:hover {
        transform: scale(1.1);
        text-decoration: none;
    }
    
    
    footer {
    	color:yellow;
        margin-top:1vw;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    footer p{
        font-size:1vw;
        margin:0;
        font-family: "Sawarabi Mincho", serif;
    }
    
    .rogo {
        margin: auto;
        width: 4vw;
        height: auto;
    }
    
    /*---------------------------------------------------------------ここまで--------------------------------------------------------------------*/

    #area-5 {
        padding: 200px 0;
    }



    #animation,
    #animation1,
    #animation2,
    #animation3,
    #animation4 {
        padding-top: 10px;
        padding-left: 30px;
        border-bottom: 0.5px solid #606060;
        padding-bottom: 10px;
    }


    .NSP {
        width: 10px;
        height: auto;
    }

    .about {
        width: 300px;
        height: auto;
        border-radius: 40px;
        max-width: 100%;
    }



    .wave {
        display: block;
    }


    #first {
        padding: 0;
        margin-bottom: 1vw;
    }

    

    .mozi {
        padding-right: 35vw;
        margin-top: 0;
        margin-bottom: 0;
        font-family: "Sawarabi Mincho", serif;
        font-size: 7vw;
    }

    .nen {
        font-family: "Sawarabi Mincho", serif;
        font-size: 7vw;
        color: yellow;
        margin-top: 0;
        margin-bottom: 0;
    }

    

    .hune {
        z-index: 999;
        width: 10%;
        height: auto;
        margin-left: 80%;
        position: absolute;
        z-index: 999;
        padding-top: 60px;
    }


    .photo {
        width: 100%;
        height: auto;
        animation-name: fadeInAnime;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        opacity: 0;
        margin-left: auto;
        margin-right: auto;
    }

    @keyframes fadeInAnime {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }



    .card-container {
        display: flex;

    }

    .card-text {
        text-align: left;
    }

    .card-text a {
        color: yellow;
        font-family: "Sawarabi Mincho", serif;
    }

    .card-text a h1 {
        padding-left: 0;
    }

    .line {
        border-bottom: 2px solid white;
        font-size: 4.5vw;
    }

    .card-text {
        padding-left: 50px;
        text-align: left;
    }

    #section {
        background-color: black;
    }





    /*== 矢印の線がループして伸縮 */

    .btnlinestretches5 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        /*リンクの形状*/
        color: white;
        padding: 10px 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
    }

    /*線の設定*/
    .btnlinestretches5::before {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: 0;
        /*線の形状*/
        width: 100%;
        height: 1px;
        background: white;
    }

    /*矢印の設定*/
    .btnlinestretches5::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: -4px;
        /*矢印の形状*/
        width: 8px;
        height: 8px;
        border-top: 1px solid white;
        border-right: 1px solid white;
        transform: rotate(45deg);
    }

    .btnlinestretches5 span{
        color:white;
    }

    /*線と矢印を繰り返しアニメーション*/
    .btnlinestretches5::before {
        animation: arrowlong01 2s ease infinite;
    }

    .btnlinestretches5::after {
        animation: arrowlong02 2s ease infinite;
    }

    @keyframes arrowlong01 {
        0% {
            width: 0;
            opacity: 0
        }

        20% {
            width: 0;
            opacity: 1
        }

        80% {
            width: 105%;
            opacity: 1
        }

        100% {
            width: 105%;
            opacity: 0
        }
    }

    @keyframes arrowlong02 {
        0% {
            left: 0;
            opacity: 0
        }

        20% {
            left: 0;
            opacity: 1
        }

        80% {
            left: 103%;
            opacity: 1
        }

        100% {
            left: 103%;
            opacity: 0
        }
    }





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

    #page-top img{
        width:8vw;
        height:auto;
    }

    /*　上に上がる動き　*/
    #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.3s 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/pagetop_1.png") no-repeat center;
        background-size: contain;
    }

    #page-top.floatAnime a {
        width: 100px;
        height: 130px;
        /*背景画像の指定*/
        background: url("../img/pagetop_2.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: -20px;
        right: 20px;
        color: #666;
    }

    /*検証のためのCSS*/
    section {
        padding: 500px 0;
    }
}

/*スマホ用*/
@media screen and (max-width:760px) {

    .photos {
        width: 100%;
        height: auto;
    }

    .fadeInRight {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0px);
            -ms-transform: translateY(0px);
            transform: translateY(0px);
        }
    }


    .fadeInRight1 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight1;
        animation-name: fadeInRight1;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight1 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight1 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .fadeInRight2 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight2;
        animation-name: fadeInRight2;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight2 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }


    .fadeInRight3 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight3;
        animation-name: fadeInRight3;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight3 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight3 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }

    .fadeInRight4 {
        -webkit-animation-fill-mode: both;
        -ms-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-duration: 2.5s;
        -ms-animation-duration: 2.5s;
        animation-duration: 2.5s;
        -webkit-animation-name: fadeInRight4;
        animation-name: fadeInRight4;
        visibility: visible !important;
    }

    @-webkit-keyframes fadeInRight4 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
        }
    }

    @keyframes fadeInRight4 {
        0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(1000px);
        }

        100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
        }
    }





    <div class="wave"><canvas id="waveCanvas"></canvas></div>.wave {
        height: 200px;
        /*何も表示されない場合は各波の親要素に高さを持たせましょう。*/
        display: block;
        vertical-align: bottom;
        padding-top: 50px;
    }

    canvas {
        bottom: 0;
        left: 0;
        width: 100%;
        padding-right: 0;
        padding-bottom: 0;
        padding-left: 0;
        max-width: 100%;
        height: auto;
    }

    #waveCanvas {
        vertical-align: bottom;
        animation-name: fadeInAnime;
        animation-duration: 3s;
    }














    /*header{
    display:flex;
    align-items:center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    background-image:white;
    backdrop-filter:blur(8px);
    }*/
	
	/*---------------------------------------------------------------ここから--------------------------------------------------------------------*/
	
    
	.fresh {
        display:none;
    }

    .button04 {
        border: 2px solid #ffffff;
        background-color: white;
        font-size: 4vw;
        width: auto;
        height: auto;
        border-radius: 8px;
    }


    .button05 {
        border: 2px solid #ffffff;
        background-color: black;
        color:yellow;
        font-size: 4vw;
        width: auto;
        height: auto;
        border-radius: 8px;
    }

    .button04 a{
        text-decoration: none;
        color:black;
    }
    .button05 a{
        text-decoration: none;
        color:yellow;
    }

    #g-nav {
        /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
        position: fixed;
        z-index: 999;
        /*ナビのスタート位置と形状*/
        top: 0;
        right: -120%;
        width: 100%;
        height: 100%;
        /*ナビの高さ*/
        background: black;
        /*動き*/
        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;
        text-align: center;
    }

    /*ナビゲーション*/
    #g-nav ul {
        /*ナビゲーション天地中央揃え*/
        position: absolute;
        z-index: 999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding-left: 0;
    }

    /*リストのレイアウト設定*/

    #g-nav li {
        list-style: none;
        text-align: center;
        font-size: 7vw;
    }

    #g-nav li a {
    	font-family: "Sawarabi Mincho", serif;
        color: yellow;
        text-decoration: none;
        padding: 10px;
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: bold;
    }

    /*========= ボタンのためのCSS ===============*/
    .openbtn {
        position: fixed;
        z-index: 9999;
        /*ボタンを最前面に*/
        top: 10px;
        right: 10px;
        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: yellow;
        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%;
    }
    
    .logo {
        padding-left: 5%;
        padding-top: 5%;
        display:none;
        height: auto;
    }
    
    .rogo {
        width: 10%;
        height: auto;
    }
    
    footer {
    	color:yellow;
        margin-top:2vw;
        text-align: center;
        display: flex;
        flex-direction: column;
    }

    footer p{
        font-size:2vw;
        font-family: "Sawarabi Mincho", serif;
        margin:0;
    }
    
    #g-nav li {
        list-style: none;
        text-align: center;
        font-size: 7vw;
    }
    
    
    /*---------------------------------------------------------------ここまで--------------------------------------------------------------------*/

    #area-5 {
        padding: 200px 0;
    }



    #animation,
    #animation1,
    #animation2,
    #animation3,
    #animation4 {
        padding-top: 10px;
        padding-left: 3px;
        padding-right: 3px;
        border-bottom: 1px solid #606060;
        padding-bottom: 10px;
    }

    .NSP {
        width: 10px;
        height: auto;
    }

    .about {
        width: 300px;
        height: auto;
        border-radius: 40px;
        max-width: 100%;
    }

    

    body {
        margin: 0;
        background-color: black;
        color: yellow;
    }


    .wave {
        display: block;

    }

    h4 {
        margin-top: 0;
        margin-bottom: 1%;
    }

    #first {
        padding: 0;
        margin: 0;
    }



    .mozi {
        margin-top: 20%;
        margin-bottom: 0;
        font-family: "Sawarabi Mincho", serif;
        font-size: 10vw;
        padding-left: 5%;

    }

    .nen {
        font-family: "Sawarabi Mincho", serif;
        font-size: 15vw;
        color: yellow;
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 5%;
    }

    


    .hune {
        width: 20%;
        height: auto;
        padding-left: 70%;
        position: absolute;
        z-index: 900;
    }


    .photo {
        width: 100%;
        height: auto;
        animation-name: fadeInAnime;
        animation-duration: 3s;
        animation-fill-mode: forwards;
        opacity: 0;
        margin-left: auto;
        margin-right: auto;
    }

    @keyframes fadeInAnime {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }









    .card-text a {
        color: yellow;
        font-family: "Sawarabi Mincho", serif;
    }

    .card-text a h1 {
        padding-left: 0;
    }

    

    .line {
        border-bottom: 1px solid #606060;
        font-size: 100%;
    }

    .card-text {
        padding-left: 10px;
    }

    #section {
        background-color: black;
    }






    /*== 矢印の線がループして伸縮 */

    .btnlinestretches5 {
        /*線の基点とするためrelativeを指定*/
        position: relative;
        /*リンクの形状*/
        color: white;
        padding: 10px 0;
        display: inline-block;
        text-decoration: none;
        outline: none;
        font-size: 20%;
    }

    /*線の設定*/
    .btnlinestretches5::before {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: 0;
        /*線の形状*/
        width: 100%;
        height: 1px;
        background: white;
    }

    /*矢印の設定*/
    .btnlinestretches5::after {
        content: "";
        /*絶対配置で線の位置を決める*/
        position: absolute;
        bottom: -4px;
        /*矢印の形状*/
        width: 8px;
        height: 8px;
        border-top: 1px solid white;
        border-right: 1px solid white;
        transform: rotate(45deg);
    }

    /*線と矢印を繰り返しアニメーション*/
    .btnlinestretches5::before {
        animation: arrowlong01 2s ease infinite;
    }

    .btnlinestretches5::after {
        animation: arrowlong02 2s ease infinite;
    }

    @keyframes arrowlong01 {
        0% {
            width: 0;
            opacity: 0
        }

        20% {
            width: 0;
            opacity: 1
        }

        80% {
            width: 105%;
            opacity: 1
        }

        100% {
            width: 105%;
            opacity: 0
        }
    }

    @keyframes arrowlong02 {
        0% {
            left: 0;
            opacity: 0
        }

        20% {
            left: 0;
            opacity: 1
        }

        80% {
            left: 103%;
            opacity: 1
        }

        100% {
            left: 103%;
            opacity: 0
        }
    }





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

    #page-top img{
        width:15vw;
        height:auto;
    }


    /*　上に上がる動き　*/
    #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.3s 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/pagetop_1.png") no-repeat center;
        background-size: contain;
    }

    #page-top.floatAnime a {
        width: 100px;
        height: 130px;
        /*背景画像の指定*/
        background: url("../img/pagetop_2.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: -20px;
        right: 20px;
        color: #666;
    }

    /*検証のためのCSS*/
    section {
        padding: 500px 0;
    }
}