@charset "utf-8";
                          /* レイアウトのためのCSS */
body{
    background:#e2a2b1;
    font-family: 'Noto Serif JP', serif;
	color: #555;
	font-size:1rem;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    letter-spacing: 0.2em;
}

body.appear{
    background:#f8f9fa;
}

ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #555;
	text-decoration: none;
    outline: none;
}

img{
    width:100%;
    height: auto;
    vertical-align: bottom;
}

*{
    box-sizing: border-box
}

                               /* font-family */

h1,
#g-nav-list li:nth-child(1),
#photo h2,
#contact h2,
#raffle h2,
#footer dl dd,
#splash-logo{
    font-family:'Parisienne', cursive;
}

                              /* heading */
#photo h2,
#contact h2,
#raffle h2{
    font-size: 4rem;
    text-align: center;
    margin: 0 0 50px 0;
    font-weight: normal;
    color: #e2a2b1;
}

@media screen and (max-width:768px) {
    #photo h2,
    #contact h2,
    #raffle h2{
        font-size: 3rem;
        }   
}

                                 /* area */

#container{
    overflow-x: hidden;
}

.inner{
    width:100%;
    margin:0 auto;
    padding:70px;
}

@media screen and (max-width:940px) {
    .inner{
        padding:30px;
    }
}

                                 /* splash */

#splash-logo p{
    font-size:1.8rem;
    font-weight: normal;
    white-space: nowrap;
}

                                  /* header */

.header-area{
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    color: #fff;
    text-align: center;
}

.header-area h1{
    display: block;
    font-size: 6vw;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    padding: 0 10px;
}

                                  /* gnavi */

#g-nav-list li:nth-of-type(1) a{
    font-size: 2rem;
    text-transform: none;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
    margin: 0 0 20px 0;
}

#g-nav-list li:nth-of-type(2){
    animation-delay: .2s;
}
#g-nav-list li:nth-of-type(3){
    animation-delay: .4s;
}
#g-nav-list li:nth-of-type(4){
    animation-delay: .6s;
}
#g-nav-list li:nth-of-type(5){
    animation-delay: .8s;
}
#g-nav-list li:nth-of-type(6){
    animation-delay: 1.1s;
}
#g-nav-list li:nth-of-type(7){
    animation-delay: 1.3s;
}
                                      /* greeting */

#greeting{
    width: 100%;
    height: 100vh;
    background: url("../img/bouquet.jpg") no-repeat center;
    background-color: rgba(255,255,255,0.90);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: center;
}

#greeting .greeting-area{
    width:100%;
    height: 90vh;
    display: flex;
    justify-content:center;
    flex-direction: row-reverse;
}

#greeting .greeting-area h2,
#greeting .greeting-area h3,
#greeting .greeting-area p{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;    
    text-orientation: upright;
}

#greeting .greeting-area .name{
    display: flex;
    margin-top: auto;
    vertical-align: bottom;
}
#greeting .greeting-area h3{
    display: inline-block;
    align-self: flex-end;
}

#greeting .greeting-area h2{
    width:10%;
    line-height:2;
    font-size:1.4rem;
}
#greeting .greeting-area p{
    padding: 50px 0 0 0;
    line-height: 2.8;
}

@media screen and (max-width:1100px) {
    #greeting .greeting-area h2{
        line-height:1;
    }
    #greeting .greeting-area p{
        line-height: 1.5;
    }    
}

@media screen and (max-width:768px) {
    #greeting .greeting-area h2,
    #greeting .greeting-area p{
        width:auto;
    } 
        
    #greeting .greeting-area h2{
        margin:0 0 0 20px;
        line-height: 1.0;
    }
        
    #greeting .greeting-area p{
        line-height: 1.5;
    }  
}

@media screen and (max-width:470px) {
    #greeting .greeting-area h2{
        font-size: 1.3rem;
    }
    #greeting .greeting-area h3{
        font-size: 0.9rem;
    }

    #greeting .greeting-area p{   
        font-size: 0.8rem;
    }
}

@media screen and (max-width:370px) {
    #greeting .greeting-area h2{
        line-height: 1.6;
    }
    #greeting .greeting-area p {
        line-height: 1.3;
    }
}

                                    /* photo */

#photo{
    padding: 70px 0;
}

#photo section{
    background: #fff;
    margin: 0 0 10px 0;
}

#photo section h3{
    font-size: 0.9rem;
    margin: 0 0 10px 0;
}

#photo section p{
    font-size: 0.8rem;
}

#photo .photo-area{
    padding: 20px;
    box-shadow: 5px 0 10px #ccc;
}

#photo .photo-btn{
    text-align: center;
    margin: 50px 0 0 0;
}
@media screen and (max-width:320px){
    #photo .photo-btn span{
        font-size: 0.8rem;
    }
}

                               /* contact */

#contact .contact-flex{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

#contact .contact-img{
    width:70%;
    height: auto;
    /* min-height: 600px; */
    background-size: cover;
}

#contact .contact-img iframe{
    width: 100%;
    aspect-ratio: 16/9;
}

#contact .contact-area{
    width:25%;
    text-align: center;
}

@media screen and (max-width:1300px) {
    #contact .contact-img{
        width:60%;
        }
    #contact .contact-area{
        width:35%;
        }
}

@media screen and (max-width:880px) {
    #contact .contact-img{
        width:48%;
        }
    #contact .contact-area{
        width:48%;
        }
}

@media screen and (max-width:700px) {
    #contact .contact-img,
    #contact .contact-area{
        width:100%;
        }
    #contact .contact-img{
            margin:0 0 20px 0;
    }
}

#contact .contact-area h2{
    font-size:1.1rem;   
    margin:0 0 10px 0;
}

#contact .contact-area dt{
    font-size:1rem;   
    margin:0 0 10px 0;
}

#contact .contact-area dd{
    font-size: 0.8rem;
    margin:0 0 30px 0;
}

                                /* raffle */

#raffle .raffle-flex{
    width: 100%;
    display: flex;
    justify-content: center;
}
#raffle .raffle-img{
    width: 50%;
    /* width: 45%; */
    height: auto;
    margin: 0 0 0 80px;
}

#raffleButton{
    transition: transform .2s;
}
#raffleButton:active{
    transform: scale(.95);
}

#raffle .raffle-img img{
    width: 100%;
    object-fit: cover;
    object-position: center;
}
#raffle .raffle-img p{
    margin-top: 1rem;
}
#raffle .raffle-area{
    width: 50%;
    /* width: 55%; */
    margin-left: 2rem;
}
#raffle .raffle-item{
    color: #e2a2b1;
}

.before-raffle{
    font-size: 0.8rem;
    color: #e2a2b1;
    text-align: center;
}

@media screen and (min-width:740px) {
    #raffle .raffle-area .raffle-item{
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1rem;
    }
    #raffle .raffle-text{
        margin-top: 3rem;
        text-align: left;
    }
    .before-raffle{
        display: none;
    }
}
#raffle .raffle-mail a{
    color:seagreen;
    font-weight:bold;
    text-decoration-line:underline ;
}
#raffle .raffle-text .raffle-massage{
    margin-bottom: 0.3rem;
}

@media screen and (max-width:739px){
    #raffle{
        display: none;
    }
    /* #raffle{
        text-align: center;
    }
    #raffle .raffle-flex{
        flex-direction:column;
        margin: 0 auto;
    }
    #raffle .raffle-img{
        width: 100%;
        margin: 0 auto;
    }
    .raffle-img button{
        margin: 0 auto;
    }
    #raffle .raffle-area{
        display: contents;
        width: 100%;
    }
    .raffle-area .raffle-item{
        width: 100%;
        margin: 0 auto;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        order:-1;
    }
    .raffle-area h3 .app{
        font-size: 1rem;
    }
    .raffle-area .raffle-comment{
        font-size: 1rem;
    }
    .raffle-text .raffle-massage{
        margin-top: 1rem;
    } */
}


                                 /* footer */

hr {
    height: 1px;
    background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
    background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

#footer{
    /* border-top: 1px solid #ccc; */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

#footer dl{
    width:30%;   
}

#footer dl dt{
    font-size: 0.8rem;
}

#footer dl dd{
    font-size: 2rem;
}

@media screen and (max-width:900px) {
        #footer dl{
            margin: 50px 0;
        }
}

@media screen and (max-width:768px) {
    #footer dl dd{
        font-size: 1.5rem;
    }
}

#footer .footer-list{
    width:65%; 
    text-align: right;
}

#footer ul li{
    display: inline-block;
    padding: 0 10px;
    font-size: 0.8rem;
    line-height: 3;
}

#footer small{
    text-align: right;
    margin: 20px 0 0 0;
    display: block;
    width: 100%;
    font-size: 0.7rem;
}

#footer #page-top span{
    display: inline-block;
    width: 13px;
    height: 13px;
    border-top: 4px solid #fff;
    border-left: 4px solid #fff;
    transform: rotate(45deg);
}


@media screen and (max-width:900px){
    #footer dl,
    #footer .footer-list,
    #footer small{
        width:100%;
        text-align: center;
    }  
}