html {
    font-size: 50%;
    animation: html 2s;
    box-sizing: border-box;
    scroll-behavior: smooth;
    letter-spacing: .1vw;
}

@keyframes html {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

body{
    margin: 0;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.main{
    width: 100%;
    padding: 0 0 3vh 0;
    box-sizing: border-box;
}

/* 1ページ目　はじめ */

.area_1{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    height: 100vh;
    background-size: cover;
    background-image: url(./file/bg1_1.jpg);
    box-sizing: border-box;
    animation: back_area_1 10s infinite,text_area_1 3s linear;
}

@keyframes back_area_1 {
    0%{
        background-image: url(./file/bg1_1.jpg);
    }
    33%{
        background-image: url(./file/bg1_2.jpg);
    }
    66%{
        background-image: url(./file/bg1_3.jpg);
    }
    100%{
        background-image: url(./file/bg1_1.jpg);
    }
}

@keyframes text_area_1 {
    0%{
        width: 0vw;
    }
    100%{
        width: 100%;
    }
}

.area_1_left{
    margin: 0 auto 0 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.area_1_left #img_top_content{
    height: 30%;
    filter: drop-shadow(.3vw .3vw .5vw black);
    transform: scale(.6)  ;
    object-fit: contain;
}

.area_1_right{
    align-items: center;
    width: 50%;
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    box-sizing: border-box;
}
.area_1_right #img_icon_top{
    height: 30%;
    filter: drop-shadow(.3vw .3vw .5vw black);
    transform: scale(.9);
}

/* 1ページ目　おわり */

/* 2ページ目　はじめ */
.area_2{
    padding: 5%;
    height: 100vh;
    box-sizing: border-box;
}

.main_massage{
    display: none;
    margin: 0;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    line-height: 3.5vw;
    animation: three 3s;
}

.main_massage h1{
    margin: 0;
    font-size: 2vw;
}

.main_massage #img_main_message{
    margin: 4vh 0;
    height: 18vh;
    object-fit: contain;
    filter: drop-shadow(.2vw .2vw .2vw black);
}

.three_items{
    margin-top: 5vh;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    animation: three 3s;
}

.three_1,
.three_2,
.three_3{
    padding: 1vh 1vw;
    align-items: center;
    justify-content: center;
    width: 28vw;
    height: 10vw;
    border: none;
    border-radius: 2vw;
    box-sizing: border-box;
    color: white;
    font-size: 1.6vw;
    font-weight: bold;
    text-align: center;
    text-shadow: .2vw .2vw .2vw gray;
    box-shadow: .2vw .2vw .2vw lightgray;
    cursor: pointer;
}

.three_1{
    display: none;
    background:hsla(0, 70%, 50%, 1);
    transition: background .5s, box-shadow .5s;
    animation: three_1 3s;
}


.three_1:hover{
    background:hsla(0, 100%, 50%, 1);
    box-shadow: 0vw 0vw .5vw black;
    
}

.three_2{
    display: none;
    background:hsla(80, 50%, 50%, 1);
    transition: background .5s, box-shadow .5s;
    animation: three_2 3s;
}

.three_2:hover{
    background:hsla(80, 80%, 50%, 1);
    box-shadow: 0vw 0vw .5vw black;
}

.three_3{
    display: none;
    background:hsla(210, 60%, 56%, 1);
    transition: background .5s, box-shadow .5s;
    animation: three_3 3s;
}

.three_3:hover{
    background:hsla(210, 100%, 56%, 1);
    box-shadow: 0vw 0vw .5vw black;
    
}

@keyframes three_1 {
    0%{
        opacity: 0;
    }
    33%{
        opacity: 1;
    }
    66%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes three_2 {
    0%{
        opacity: 0;
    }
    33%{
        opacity: 0;
    }
    66%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes three_3 {
    0%{
        opacity: 0;
    }
    33%{
        opacity: 0;
    }
    66%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.blank_area{
    height: 20vh;
}

/* 2ページ目　おわり */

/* 共通　はじめ */

.area_3,
.area_4,
.area_5
{
    width: 100%;
    height: 100vh;
    box-sizing: border-box;
}

.area_3_outline,
.area_4_outline,
.area_5_outline
{
    width: 100%;
    height: 100%;
    display: none;
    grid-template-columns: 50% 50%;
    grid-template-rows: 100%;
    box-sizing: border-box;
}

.area_3_left,
.area_4_left,
.area_5_left
{
grid-column: 1/2;
grid-row: 1/2;
}

.area_3_right,
.area_4_right,
.area_5_right
{
    grid-column: 2/3;
    grid: 1/2;
}

.fadeslide {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
    box-sizing: border-box;
}

div img{
    width: 100%;
    height: 100vh;
    object-fit: cover;
    border: none;
}

.fadeslide div {
	position: absolute;
	top: 0;
	left: 0;
}

.fadeslide div:nth-of-type(1) {
	animation: fadeslide 30s 0s infinite both;
	z-index: 6;
}

.fadeslide div:nth-of-type(2) {
	animation: fadeslide 30s 5s infinite both;
	z-index: 5;
}

.fadeslide div:nth-of-type(3) {
	animation: fadeslide 30s 10s infinite both;
	z-index: 4;
}

.fadeslide div:nth-of-type(4) {
	animation: fadeslide 30s 15s infinite both;
	z-index: 3;
}

.fadeslide div:nth-of-type(5) {
	animation: fadeslide 30s 20s infinite both;
	z-index: 2;
}

.fadeslide div:nth-of-type(6) {
	animation: fadeslide 30s 25s infinite both;
	z-index: 1;
}

@keyframes fadeslide {
	0% { left: 0; opacity: 0; }
	5% { left: 0; opacity: 1; }
	20% { left: 0; opacity: 1; }
	25% { left: 0; opacity: 0; }
	26% { left: 100%; opacity: 0; }
	100% { left: 100%; opacity: 0; }
}

.display_3,
.display_4,
.display_5
{
    display: block;
    width: 100%;
    height:100%;
    animation: display 3s;
    box-sizing: border-box;
}

@keyframes display {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.display_3,
.display_4,
.display_5
{
    
    width: 100%;
    padding: 10vh 7vw  3vh 7vw;
    box-sizing: border-box;
}

.title{
    margin-bottom: 2.5vh;
    text-align: center;
}

h1{
    color:hsl(210, 100%, 56%);
    font-size: 1.5vw;
}

.outline_h2{
    display: flex;
    flex-direction: column;
    margin-bottom: 5vh;
    box-sizing: border-box;
    box-shadow: .0vw .1vw .5vw lightgray;
    height: 25vh;
    text-align: center;
}

.url_coo{
    padding: 2vh 5vh;
    box-sizing: border-box;
    text-align: left;
}

h2{
    color:hsl(390, 100%, 56%);
    font-size: 1.2vw;
}

h3{
    color:hsl(210, 100%, 56%);
    font-size: .8vw;
    line-height: 1.4vw;
}

#a{
    margin: 0;
    text-decoration: none;
}

#area_logo{
    margin-bottom: 2vh;
    height: 12vh;
    object-fit: contain;
}

/* 共通　おわり */

/* スクロール　はじめ */

 .scroll_area{
    display: none;
    position: fixed;
    bottom:1vh;
    right: 1vw;
    flex-direction: column;
    animation: scroll_area 5s;
} 

@keyframes scroll_area {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


#scroll_1,
#scroll_2,
#scroll_3
{
    background: hsla(330, 100%, 56%, .4);
    display: block;
    margin-bottom: 1vw;
    width: 5vw;
    height:6vh;
    border: none;
    font-size: .8vw;
    font-weight: bold;
    color: white;
    box-shadow: .2vw.2vw.2vw lightgrey;
    transition: background .5s;
    cursor: pointer;
    box-sizing: border-box;
}

#scroll_1:hover{
    background: hsla(330, 100%, 56%, 1);
}

#scroll_2{
    background: hsla(30, 100%, 56%, .4);
}

#scroll_2:hover{
    background: hsla(30, 100%, 56%, 1);
}

#scroll_3{
    background: hsla(210, 100%, 56%, .4);
}

#scroll_3:hover{
    background: hsla(210, 100%, 56%, 1);
}

.scroll_area a,
.announcement a
{
    text-decoration: none;
}

/* スクロール　おわり */

/* ご案内　はじめ */

.announcement{
    display: flex;
    padding: 15vh 5vw;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.announcement button{
    background: hsl(210, 100%, 56%);
    margin-bottom: 5vh;
    display: block;
    width: 30vw;
    height: 10vh;
    border:  none;
    cursor: pointer;
    font-size: 1.5vw;
    color: white;
    box-shadow: .3vh .3vh .3vh lightgray;
    transition: background .5s;
    box-sizing: border-box;
}

#regist:hover{
    background: hsla(330, 100%, 56%, 1);
}

#detail:hover{
    background: hsla(210, 100%, 56%, .4);
}

/* ご案内　おわり */

/* Footer はじめ */

footer{
    background: lightgray;
display: flex;
    margin: 0;
    width: 100%;
    height: 4vh;
    box-sizing: border-box;
    line-height: 4vh;
    align-items: center;
    justify-content: center;
}

footer h3{
    margin: 0;
    color: white;
    font-size: 1.5vh;
}

a{
    text-decoration: none;
}

/* Footer おわり */

.pack {
    margin: 5vh auto;
    width: 100%;
    cursor: pointer;
    transition: box-shadow 1s;
}

.pack:hover{
    box-shadow: .5vw .5vw 1vw gray;
}

.inner_1 {
    width: 100%;
    height: 100%;
    position: relative;
}

.inner_2 {
    display: none;
    width: 100%;
    height: 100%;
    position: relative;
}

.voice,
.link,
.url_coo
{
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.voice p,
.link p,
.url_coo p
{
    display: block;
    font-size: 1vw;
    color: hsl(330, 100%, 56%);
    font-weight: bold;
}

/* voice　はじめ */

.voice_announce{
    background: white;
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: voice_announce .5s;
}

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

.voice_close{
    background-color: dodgerblue;
    margin: 1vh 1vh 0 auto;
    display: flex;
    width: 3vw;
    height: 3vw;
    align-items: center;
    justify-content: center;
    border-radius: 20%;
    font-size: 2vw;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: opacity .5s;
}

.voice_announce p{
    font-size: 2vh;
    font-weight: bold;
    color: hsl(210, 100%, 56%);
}

.voice_close:hover{
    opacity: .2;
}

.voice_main{
    margin: 0 auto;
    width: 60%;
    height: 100%;
}

.voice_title{
    text-align: center;
}
.voice_title h2{
    color: dodgerblue;
}

.voice_input{
    text-align: center;
    color: dodgerblue;
    animation: voice_input 3s;
}

@keyframes voice_input {
    0%{
        opacity: 0;
    }
    80%{
        opacity: 0;
    }
}

#voice_text{
    width: 50%;
    height: 5vh;
    border: solid .1vh hsl(210, 100%, 56%);
    text-align: center;
    color: hsl(330, 100%, 56%);
    font-size: 1.5vw;
}
#voice_text::placeholder{
    text-align: center;
    font-size: 1.5vw;
    color: lightgray;
}

.button_voice{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.button_voice button,
.voice_free button{
    margin-top: 2vh;
    width: 50%;
    height: 5vh;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    animation: button_voice .7s;
}

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

#button_voice_1{
    display: none;
    background: dodgerblue;
}

#button_voice_1:hover{
    box-shadow: .2vw .2vw .5vw gray;
}
#button_voice_2{
    display: none;
    background: hsl(330, 100%, 56%);
}

#button_voice_2:hover{
    box-shadow: .2vw .2vw .5vw gray;

}
#button_voice_3{
    background: dodgerblue;
}

#button_voice_3:hover{
    box-shadow: .2vw .2vw .5vw gray;
}

.voice_free{
    margin: 2vh auto;
    padding: 2vh;
    width: 50%;
    display: flex;
    display: none;
    flex-direction: column;
    align-items: center;
    border: solid dodgerblue 1vh;
    box-sizing: border-box;
}

#voice_textarea{
    padding: 1vh;
    width: 100%;
    height: 10vh;
    border: .1vh solid hsl(210, 100%, 56%);
}

/* voice　おわり */

.content_1{
    width: 96%;
    position: absolute;
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translate(0, -50%);
}

.inner_1 h3{
    text-align: left;
}

#inner_img{
    height: 30%;
    width: 70%;
    margin: 1% auto;
}

.box_1,
.box_3,
.box_5{
width: 70%;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(0, -50%);
    opacity: 0;
}

.box_2,
.box_4,
.box_6{
    height: 100%;
    width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
font-size: 2vw;
opacity: 0;
}

.box_1{
animation: infinite box_1 5s;
}

@keyframes box_1 {
    0%{
        opacity: 1;
    }
    16.6%{
        opacity: 1;
    }
    16.7%{
        opacity: 0;
    }
}

.box_2{
    animation: infinite box_2 5s;
    }
    
    @keyframes box_2 {
        0%{
            opacity: 0;
        }
        16.6%{
            opacity: 0;
        }
        16.7%{
            opacity: 1;
        }
        33.2%{
            opacity: 1;
        }
        33.3%{
            opacity: 0;
        }
    }

.box_3{
        animation: infinite box_3 5s;
    }
    
    @keyframes box_3 {
            0%{
                opacity: 0;
            }
            33.2%{
                opacity: 0;
            }
            33.3%{
                opacity: 1;
            }
            49.8%{
                opacity: 1;
            }
            49.9%{
                opacity: 0;
            }
        }

 .box_4{
            animation: infinite box_4 5s;
            }
            
   @keyframes box_4 {
                0%{
                    opacity: 0;
                }
                49.9%{
                    opacity: 0;
                }
                50%{
                    opacity: 1;
                }
                66.4%{
                    opacity: 1;
                }
                66.5%{
                    opacity: 0;
                }
            }

.box_5{
    animation: infinite box_5 5s;
    }
    
    @keyframes box_5 {
        0%{
            opacity: 0;
        }
        66.5%{
            opacity: 0;
        }
        66.6%{
            opacity: 1;
        }
        83%{
            opacity: 1;
        }
        83.1%{
            opacity: 0;
        }
    }

.box_6{
    animation: infinite box_6 5s;
    }
    
    @keyframes box_6 {
        0%{
            opacity: 0;
        }
        83.1%{
            opacity: 0;
        }
        83.2%{
            opacity: 1;
        }
        99.9%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }

    .cover_gow {
        background: white;
        position: fixed;
        display: none;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        transition: opacity .7s;
    }

    .cover_close:hover{
        opacity: .2;
    }    

    .cover_close{
    background-color: gray;
    width: 50px;
    height: 50px;
    position: fixed;
    top: 20px;
    right: 20px;
    font-weight: bold;
    color: white;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    }   

    .cover_area {
        position: relative;
        margin: 0 auto;
        width: 330px;
    }

    .cover_area h1,
    .cover_area h2 {
        margin: 0;
        text-align: center;
        color: hsl(210, 100%, 56%);
    }

    .cover_area h1{
        font-size: 20px;
    }
    .cover_area h2{
        font-size: 15px;
    }

    .main_cover {
        margin: 0 auto 0 0;
        padding-top: 20px;
        width: 150px;
        box-sizing: border-box;
    }

    .outline {
        margin: 20px auto;
        margin: 0 auto;
        padding: 10px;
        width: 100%;
        border: 1px solid lightgray;
        box-sizing: border-box;
        box-shadow: 2px 2px 5px lightgrey;
    }

    .top_img {
        margin: 10px auto;
        width: 66px;
        animation: top_img 3s;
    }
    
    .top_img img {
        width: 100%;
        height: 25px;
    }

    .tel_area {
        display: flex;
        width: 100%;
        padding: 3px;
        border: 1px solid hsl(210, 100%, 56%);
        box-sizing: border-box;
        align-items: center;
        box-shadow: 2px 2px 2px lightgray;
    }

    .input_tel {
        -webkit-appearance: none;
        width: 90%;
        height: 20px;
        text-align: center;
        border: none;
        color: dodgerblue;
        font-size: 12px;
        line-height: 20px;
        box-sizing: border-box;
    }

    .input_tel a {
        animation: first 5s;
    }

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

        20% {
            opacity: 0;
        }

        21% {
            opacity: 1;
        }
    }

    .input_1,
    .input_2,
    .input_3,
    .input_4,
    .input_5{
        font-size: 10px;
    }

    .input_1 {
        position: absolute;
        top: 140px;
        left: 170px;
        animation: first 5s;
        
    }

    .input_2 {
        position: absolute;
        top: 180px;
        left: 170px;
        animation: second 5s;
    }

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

        40% {
            opacity: 0;
        }

        41% {
            opacity: 1;
        }
    }

    .input_submit {
        margin: 10px auto;
        display: block;
        background: hsl(330, 100%, 56%);
        width: 100%;
        height: 30px;
        color: white;
        border: none;
        font-weight: bold;
        box-shadow: 2px 2px 2px lightgray;
        transition: background-color .3s;
        letter-spacing: 1px;
        font-size: 1px;
        animation: input_submit 5s;
    }

    @keyframes input_submit {
        0% {
            background: hsl(210, 100%, 56%);
        }

        40% {
            background: hsl(210, 100%, 56%);
        }

        41% {
            background: hsl(330, 100%, 56%);
        }
    }

    .tool {
        text-align: center;
    }

    .tool a {
        width: 100%;
        display: block;
        margin: 0 auto 6.6px auto;
    }

    .tool img {
        width: 90%;
        height: 20px;
        box-shadow: 2px 2px 3px lightgray;
        border: 1px solid white;
    }

.circle_area{

    animation: third 5s;
}

.circle{
    margin: 15px 0;
    background: hsl(330, 100%, 56%);
    width: 100%;
    height: 30px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
font-size: 12px;
animation: circle 2s infinite;
}

@keyframes circle{
    0%{
        transform: scale(.9);
        background: hsl(330, 100%, 56%);
    }
    49%{
        background: hsl(330, 100%, 56%);
    }
    50%{
        transform: scale(1);
        background: hsl(210, 100%, 56%);
    }
    100%{
        transform: scale(.9);
        background: hsl(210, 100%, 56%);
    }
}

.input_3{
    position: absolute;
    animation: third 5s;
    top: 310px;
    left: 170px;

}

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

        60% {
            opacity: 0;
        }

        61% {
            opacity: 1;
        }
    }

    .result {
        background: ghostwhite;
        margin: 0 auto 0 0; 
        padding: 3px;
        width: 100%;
        box-shadow: .3rem .3rem .5rem lightgray;
        box-sizing: border-box;
        animation: fourth 5s;
    }

    .url div h3 {
        font-size: 1px;
        width: 100%;
        color: lightgray;
        text-align: center;
        transform: scale(.8);
    }

    .result h1 {
        margin: .13rem 0;
        font-size: 2px;
        color: dodgerblue;
        text-align: center;
    }

    .result h2 {
        margin: 0;
        font-size: 4px;
        color: hsl(210, 100%, 56%);
        text-align: center;
    }

    .url_button {
        margin: .66rem 0;
        text-align: center;
    }

    .url_button button {
        background-color: dodgerblue;
        margin: 0 auto;
        width: 80%;
        height: 30px;
        font-size: 10px;
        border: 0;
        font-weight: bold;
        color: white;
        cursor: pointer;
        box-shadow: 2px 2px 5px lightgray;
        transition: background-color .3s, box-shadow .3s;
    }

    .url_button button:hover {
        background-color: hsl(330, 100%, 56%);
        box-shadow: none;
    }

    .input_4 {
        position: absolute;
        top: 350px;
        left: 170px;
        animation: fourth 5s;
    }

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

        80% {
            opacity: 0;
        }

        81% {
            opacity: 1;
        }
    }

    .input_5 {
        position: absolute;
        top: 400px;
        left:170px;
        animation: input_5 5s;
    }

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

        100% {
            opacity: 0;
        }
    }

    .pink {
        color: hsl(330, 100%, 56%);
        font-weight: bold;
    }

    h6 {
        margin: 0;
        animation: h6 2s infinite;
        color: hsl(210, 100%, 56%);
    }

    @keyframes h6 {
        0% {
            transform: scale(.8);
        }

        49% {
            transform: scale(.8);
        }

        50% {
            transform: scale(1.1);
        }

        100% {
            transform: scale(1.1);
        }
    }

    .direct_area{
        background:white;
        position: fixed;
        display: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        line-height: 1.7;
        letter-spacing: .1vw;
        animation: direct .7s;
    }

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

    .direct_close{
        background:hsl(210, 100%, 56%);
        margin: .5vw;
        position: fixed;
        top: 0;
        right: 0;
        width: 3vw;
        height: 3vw;
        box-sizing: border-box;
        border: none;
        border-radius: 25%;
        font-size: 2vw;
        text-align: center;
        line-height: 3vw;
        color: white;
        font-weight: bold;
        cursor: pointer;
        transition: opacity .5s;
    }

    .direct_close:hover{
        opacity: .2;
    }

    hr{
        height: .5vh;
        background-color: lightgrey;
        border: none;
    }

    .direct_title{
        margin: 2vh auto;
        text-align: center;
        width: 80%;
    }

    .direct_title p{
        margin: 0;
        font-size: 1.5vw;
        color: hsl(210, 100%, 56%);
    }

    .direct_title h3{
        margin: 0;
    }

    .outline_direct{
        padding: 5vh;
        width: 30vw;
        margin: 0 auto;
        text-align: center;
    }

    #button_direct{
        margin-bottom: 2vh;
        width: 50%;
        border: 1vh solid hsl(210, 100%, 56%);
        cursor: pointer;
        transition: border .7s;
        box-shadow: .3vh .3vh .5vh gray;
    }
    
    #button_direct:hover{
        border: 1vh solid hsl(330, 100%, 56%);
        box-shadow: none;
    }

    #button_direct img{
        width: 100%;
        height: auto;
    }