@charset "UTF-8";

* {
    margin: 0;
    padding: 0;

    cursor: url(../images/cursor.png) auto;
}

@font-face {
    font-family: Lobster_Two;
    src: url(../font/Lobster_Two/LobsterTwo-Regular.ttf);
}

@font-face {
    font-family: Dela_Gothic_One;
    src: url(../font/Dela_Gothic_One/DelaGothicOne-Regular.ttf);
}

@font-face {
    font-family: Fjalla_One;
    src: url(../font/Fjalla_One/FjallaOne-Regular.ttf);
}

@font-face {
    font-family: Indie_Flower;
    src: url(../font/Indie_Flower/IndieFlower-Regular.ttf);
}

@font-face {
    font-family: Shadows_Into_Light;
    src: url(../font/Shadows_Into_Light/ShadowsIntoLight-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_New;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_New_Light;
    src: url(../font/Zen_Kaku_Gothic_New/ZenKakuGothicNew-Light.ttf);
}

@font-face {
    font-family: Zen_Maru_Gothic;
    src: url(../font/Zen_Maru_Gothic/ZenMaruGothic-Regular.ttf);
}

@font-face {
    font-family: Zen_Kaku_Gothic_Antique;
    src: url(../font/Zen_Kaku_Gothic_Antique/ZenKakuGothicAntique-Regular.ttf);
}

body {
    background-color: #A6CCFF;
    /* background-image: url(../images/background.png);
    background-repeat: repeat-y; */
}


/* 

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.2;
    width: 100%;
    height: 100%;
    background: url(../images/noise.png);
    pointer-events: none;
}
*/


/* 【 headerここから 】 */

.stars {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.star {
    position: absolute;
    display: block;
    background-color: rgb(255, 230, 0);
    border-radius: 50%;
    box-shadow: 0 0 4px 2px rgba(#c9c9c9, 0.2);
    opacity: 0;
    animation: twinkle 2s infinite;
}

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

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1);
    }
}




header {
    position: relative;
    background-color: rgb(5, 0, 71);
    overflow: hidden;
    padding-top: 2%;
    padding-bottom: 1%;
}

/* rgb(2, 2, 2) */
/* rgb(255, 253, 249) */



/* header内 */

/* h1 ↓ */

header h1 {
    margin-left: 4%;
    width: 4%;
}

header h1 img {
    width: 100%;
}


/* h1 ↑ */

/* ファーストビュービジュアルここから */

.view {
    position: relative;
    margin-left: auto;
    margin-right: 37.5%;
    padding-top: 1%;
    width: 25%;
}

.view-flexbox {
    display: flex;
}

.view-img1 {
    animation: poyon 0.8s ease-in-out forwards;
}

@keyframes poyon {
    0%{
        transform: scale(0.8,0.8) translate(0,0);
    }

    15%{
        transform: scale(0.98,0.9) translate(0,5px);
    }

    30%{
        transform: scale(1.02,1.0) translate(0,8px);
    }
    50%{
        transform: scale(0.98,1.05) translate(0,-8px);
    }
    70% {
        transform: scale(1.0,0.9) translate(0.5px);
    }
    100% {
        transform: scale(1.1,1.1) translate(0,0);
    }

    0%,100% {
        opacity: 1;
    }
}


.view img {
    width: 100%;
}

.view-img2 {
    animation: suberikomi 0.7s cubic-bezier(0.25,1,0.5,1) forwards;
    position: absolute;
    width: 7vw;
    height: 8vw;
    margin-top: -13%;
    margin-left: 96%;
    padding-top: 2.5%;
    padding-left: 2.5%;
    padding-right: 2%;
    overflow: hidden;
    
}

/* 

.view-img2::after {
    animation: 2s 0s shine linear infinite;
    background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 75%);
    content: '';
    height: 83%;
    width: 70%;
    left: -100%;
    position: absolute;
    top: 0;
    transform: skewX(-15deg);
}

 */

@keyframes suberikomi {
    0% {
        transform: translateY(35%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
    }

    40%,100% {
        opacity: 1;
    }
}

@keyframes shine {
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.view-img2:hover img {
    animation: 2s 0s shine linear infinite;
    transform: scale(1.2);
    transition: 0.3s;
}

.view-img2 img {
    width: 100%;
    vertical-align: bottom;
    transition: 0.2s;
}

/* ファーストビュービジュアルここまで */



/* ナビ↓ */
nav {
    margin-top: 5%;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    /* font-family: "wordy-diva", sans-serif; */
    font-family: Lobster_Two;
    font-weight: 500;
    font-style: normal;
}

nav ul {
    display: flex;
    list-style-type: none;
}

nav ul li {
    margin-left: 13%;
    margin-right: auto;
    width: 15%;
}

nav ul li a {
    position: relative;
    font-size: 3vw;
    font-weight: 600;
    letter-spacing: 0em;
    color: #8FC0FF;
    text-decoration: none;
}

nav ul li a::before {
    width: 100%;
    transition: 0.5s;
}

nav ul li a::after {
    width: 100%;
    transition: 0.5s;
}

nav ul li a:hover {
    position: absolute;
    display: block;
    transition: 0.8s;
    content: "";
}

.nav-img {
    margin-right: 5%;
}

/* ナビ↑ */

/* header内 */




/* 【 headerここまで 】 */










/* 【 mainここから 】 */


.sunrise {
    height: 38vw;
    background: #ff0000;
    background: linear-gradient(180deg, rgba(255, 0, 0, 1) 0%, rgba(5, 0, 71, 1) 0%, rgba(25, 25, 181, 1) 17%, rgba(79, 93, 209, 1) 39%, rgba(166, 204, 255, 1) 73%);
}

/*  */

.sunrise-tori1 {
    padding-top: 20%;
    margin-left: 40%;
    width: 8%;
    height: 4vw;
}

.sunrise-tori1 img {
    width: 100%;
}

.sunrise-tori2 {
    width: 5%;
    height: 2vw;
}

.sunrise-tori2 img {
    width: 100%;
}

/*  */


.main-section1 {
    height: 24vw;
    background-image: url(../images/background5new1.png);
    background-size: cover;
    background-repeat: repeat-y;
    display: flex;
}

.main-section1-left {
    width: 30%;
}

.main-section1-left img {
    width: 100%;
}

.main-section1-left h3 {
    margin-left: 50%;
    padding-top: 45%;
    padding-left: 10%;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.yajirushi {
width: 25%;
margin-left: 84%;
}

.yajirushi img {
    width: 100%;
}

/* .main-section1-left ul {
    margin-top: 8%;
    margin-left: 13%;
    list-style-type: none;
}

.main-section1-left ul li {
    font-size: 1.7vw;
}

.main-section1-left ul li a {
    text-decoration: none;
    font-family: Fjalla_One;
    line-height: 2;
    color: #72acf8;
}
 */

/*  */


/*  */

.main-section1-right {
    margin-left: auto;
    width: 25%;
}

.section1-right-img {
    width: 80%;
    height: 20%;
    animation-name: taiyou;
    animation-duration: 2400ms;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
}

.section1-right-img img {
    width: 100%;
}

@keyframes taiyou {
0%{
    transform:rotate(0deg);
}
20% {
    transform:rotate(10deg);
}
40% {
    transform:rotate(15deg);
}
60% {
    transform:rotate(18deg);
}
80% {
    transform:rotate(20deg);
}
100%{
    transform:rotate(50deg);
}
}

/*  */


/*  */
.main-section2 {
    height: 100vw;
    background-image: url(../images/background5subbbbb.png);
    background-size: cover;
}
.main-section2 img {
    width: 100%;
}

.main-section2-pack {
    padding-top: 15%;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    display: flex;
}

.tape1 {
    width: 55%;
    height: 4vw;
    background-color: #8FC0FF;
    rotate: 1580deg;
    box-shadow: 5px 5px 5px -5.5px rgb(52, 52, 52);
}

.tape2 {
    margin-left: auto;
    width: 55%;
    height: 4vw;
    background-color: #8FC0FF;
    rotate: 200deg;
    box-shadow: 5px 5px 5px -5.5px rgb(52, 52, 52);
}

.main-section2-left {
    width: 37%;
    rotate: -5deg;
}

.main-section2-right {
    margin-top: 7%;
    margin-left: 25%;
}

.hoshi1 {
    width: 30%;
}

.hoshi2 {
    margin-top: 5%;
    margin-left: 70%;
    width: 20%;
}

.main-section2-right ul {
    font-family: Zen_Maru_Gothic;
    list-style-type: none;
}

.main-section2-right ul li {
    font-size: 2vw;
    line-height: 2.3;
    letter-spacing: 0.3em;
}


.main-section2-right ul li:nth-of-type(1) {
    font-size: 3vw;
    letter-spacing: 0.3em;
}



/*  */

/*  */
.main-section3 {
    margin-top: -40%;
    height: 150vw;
    background-image: url(../images/background5subbbbb.png);
    background-size: cover;
}

.main-section3-flex {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.section3-flex1 {
width: 90%;
margin-top: 5%;
margin-right: 2%;
box-shadow: 5px 5px 5px -5.5px rgb(52, 52, 52);
}

.section3-flex2 {
    margin-right: 2%;
    width: 80%;
    box-shadow: 5px 5px 5px -5.5px rgb(52, 52, 52);
}

.section3-flex3 {
    margin-top: 19%;
    width: 90%;
    box-shadow: 5px 5px 5px -5.5px rgb(52, 52, 52);
}

.main-section3 h3 {
    margin-left: 40%;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.main-section3 img {
    width: 100%;
}
/*  */


/* main-section4ここから */

.main-section4 {
    margin-top: -90%;
    height: 50vw;
    background-image: url(../images/background5subbbbb.png);
    background-size: cover;
}

.main-section4 h3 {
    margin-left: 42%;
    color: #1a1a1a;
    font-family: Shadows_Into_Light;
    font-size: 5vw;
    letter-spacing: 0.2em;
}

.main-section4-icons {
    width: 30%;
    margin-top: 8%;
    margin-left: auto;
    margin-right: auto;
}

.fa-brands {
    width: 80%;
    height: 20em;
}



/* main-section4ここから */




/* 【 mainここまで 】 */

/* 【 footerここから 】 */

footer {
 
    height: 5vw;
    background-image: url(../images/background5subbbbb.png);
    background-size: cover;
}

footer p {
    width: 20%;
    margin-left: 47%;
    margin-right: auto;
    padding-top: 1%;
    letter-spacing: 0.2em;
    font-size: 1vw;
    font-family: Dela_Gothic_One;
}

/* 【 footerここまで 】 */