* {
    box-sizing:border-box;
    word-wrap:break-word;
    margin: 0px;
    padding: 0px;
    line-height:1.8em;
    font-family: 'Baskervville', serif;
}
a {
    text-decoration: none;
}
li {
    list-style:none;
}
img {
    height:100%;
    max-width: 100%;
    display:block;
}

/*プログレスバーのcss*/
#splash {
    position:fixed;
    z-index:999;
    width:100%;
    height:100%;
    background-color: #333;
    text-align:center;
    color:#fff;
}
/*画像中央配置(絶対位置指定)*/
#splash-text {
    position:absolute;
    z-index:999;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:#fff;
    width:100%;
}
/*ローディング後に割れる画像のcss(共通の要素)*/
.loader_cover {
    width:100%;
    height:50%;
    background-color: #333;
    transition:all .2s ease-in;
    transform:scaleY(1);
}
/*上の画面(基準を上に設置)*/
.loader_cover-up {
    transform-origin: center top;
}
/*下の画面(絶対位置を下に、基準を下に設置)*/
.loader_cover-down {
    position:absolute;
    bottom:0;
    transform-origin: center bottom;
}
/*画面を移動させるクラス*/
.cover-anime {
    transform: scaleY(0);
}
.gallery-behind-body {
    position:fixed;
    overflow:hidden;
}
.blur {
    animation-name:blurAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
}
@keyframes blurAnime {
    from {
        opacity:0;
        filter:blur(10px);
        
    }
    to {
        opacity:1;
        filter:blur(0);
        
    }
}

#slider {
    width:100%;
    height:100vh;
    position:relative;
}
.heading-block {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align:center;
    color:#fff;
}
.heading-block h1 {
    letter-spacing: 0.1em;
    font-size:50px;
    font-family:'La Belle Aurore', serif;
    color:#fff;
}

.box {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#box1 {
    width:100%;
    height:100vh;
    background:url(./images/女性1.jpg) no-repeat center;
    background-size:cover;
}
#box1.box {
    justify-content: flex-start;
}
.profile-area {
    margin:0 0 0 40px;
    background-color: rgba(255, 255, 255, 0.8);
    padding:40px;
    width:100%;
    max-width:300px;
}
.profile-area h4 {
    font-size:0.9em;
    font-weight:normal;
}
.profile-area h2 {
    margin-bottom:40px;
}
.profile-area p,dt,dd {
    text-align:left;
}
.profile-area p {
    margin-bottom:40px;
}

#box2 {
    width:100%;
    height:100vh;
    background:url(./images/海1.jpg) no-repeat center;
    background-size:cover;
}
.btn {
    transition:all 2s;
    opacity:0;
}
.eachTextAnime span {
    opacity: 0;
}
.eachTextAnime.appeartext span {
    animation:text_anime_on 1s ease-out forwards;
    letter-spacing: 0.1em;
    font-size:50px;
    font-family:'La Belle Aurore', serif;
    color:#fff;
}
@keyframes text_anime_on {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*フェードイン*/
.show {
    opacity:1;
}
.gradient4 {
    display: inline-block;
    padding: 10px 60px;
    margin: 20px 0 0 0;
    border-radius: 30px;
    text-decoration: none;
    border: 1px solid #fff;
    color: #fff;
    
}
.gradient4:hover {
    transition: all 0.4s ease-out!important;
    border-color: transparent;
    color: #fff;
    background: linear-gradient(
    270deg,
    #3bade3 0%,
    #9844b7 50%,
    #44ea76 100%
    );
    background-size: 200% auto;
    background-position: right center;
    box-shadow: 0 5px 10px rgb(250 108 159 / 40%);
}
.hide-area {
    visibility:hidden;
    opacity:0;
}
.gallery {
    z-index: 100;
    overflow-y: scroll;
    background: linear-gradient(
        45deg,
        rgba(88,182,211,.9),
        rgba(229,93,135,.9));
    color: #fff;
    text-align: center; 
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition: all .3s ease-in-out;
}
.gallery-inner {
    padding:30px;
}
.gallery-position {
    position:relative;
}
.gallery-close {
    line-height:50px;
    cursor:pointer;
    position:fixed;
    top:0px;
    right:20px;
    font-size:32px;
    width:50px;
    height:50px;
    border-radius:50%;
    font-weight:bold;
    transition:all .3s;
}
.gallery-close:hover {
    color:#333;
    background-color: #fff;
}
.photo-wrapper {
    text-align: center;
    margin:0 auto;
    max-width:700px;
    width:100%; 
}

.photo-wrapper img {
    max-width:700px;
    width:100%;
    object-fit: cover;
    margin:0 auto;
    border:5px solid #fff;
    height:auto;
}
.photo-wrapper img::before {
    content:"";
    padding-top:75%;
} 

.photo-wrapper p {
    margin:15px 0 15px 0;
}

#box3 {
    width:100%;
    height:100vh;
    background:url(./images/女性2.jpg) no-repeat center;
    background-size:cover;
}
#box4 {
    width:100%;
    height:100vh;
    background:url(./images/花1.jpg) no-repeat center;
    background-size:cover;
}
#box5 {
    width:100%;
    height:100vh;
    background:url(./images/海2.jpg) no-repeat center;
    background-size:cover;
}
.form-wrapper {
    width:100%;
    height:100%;
    background-color: #fff;
    color:#333;
    padding:30px;
}
.form-inner {
    padding:20px;
    margin:0 auto;
    max-width:768px;
    width:100%;
}
.form-wrapper h3 {
    padding:0 0 20px 0;
}
.flex-wrapper {
    display:flex;
    margin-bottom:15px;

}
form {
    max-width:500px;
    width:100%;
    margin:0 auto;
}
label {
    text-align:left;
    width:40%;
    display:block;
    margin-bottom:10px;
}
input,textarea {
    width:60%;
    height:50px;
    background-color: #f8f9fa;
    border:1px solid #333;
}
textarea {
    height: 200px!important;
}
input[type="submit"] {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 5px 20px;
    width: 152px;
    margin: 10px auto 0 auto;
    cursor:pointer;
    
}

footer small {
    letter-spacing:0.3em;
    position:fixed;
    transform:rotate(90deg);
    color:#fff;
    top:40%;
    left:-50px;
}