@charset "utf-8";

/*--casssata--*/

header h1{
    font-size: 400%;
    text-align: center;
    color: #800000;
    padding-top: px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    letter-spacing: 3px;
}

body{
    font-size: 60%;
    font-style: oblique;
    font-weight: normal;
    font-family: serif;
    color: #800000;
    text-align: center;
    padding-top: 0%;
    padding-left: 0%;
}

h2{
    font-size: 330%;
    font-style: oblique;
    font-weight: normal;
    font-family: serif;
    padding-top: 50px;
    letter-spacing: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    width: 150%;
    padding-left: 15%;

}
li{ 
    display: inline;
}
nav{
    text-align: center;
}
nav ul{
    margin: -12px;
    padding: 70%;
    font-size: 400%;
    object-fit: cover;
    padding-left: 70%;
    padding-bottom: 40%;
    padding-top: 150%;
}

nav ul li{
    list-style: none;
    display: inline-block;
    width: 50%; 
}

nav ul li a{
    text-decoration: none;
    color: #800000;
}

nav li:hover{
    border-bottom: 2px solid #800000;
}

.scroll{
    font-size: 12px;
    display: inline-block;
    padding-top: 90px;
    position: relative;
    padding-bottom: 60px;
    padding-left: 80%;
}
.scroll::before {
    animation: scroll 3.5s infinite;
    border: solid #800000;
    border-width: 0 0 1px 5px;
    content: "";
    display: inline-block;
    margin: auto;
    position: absolute;
    top: 0;
    right: 70;
    left: 70;
    transform: rotate(-48deg);
    width: 30px;
    height: 30px;
}
@keyframes scroll {
    0% {
      transform: rotate(-45deg) translate(0, 0);
    }
    80% {
      transform: rotate(-45deg) translate(-30px, 30px);
    }
    0%, 80%, 100% {
      opacity: 0;
    }
    40% {
      opacity: 1;
    }
  }

.buttonUnderline::after {
    width: 100%;
    background-color: darksalmon;
    transform:scaleX(0);
    transform-origin: right top;
    padding-left: 30%;
}

.gradirnt{
    background: linear-gradient(#ffe4e1,#fff);
    height: 500px;
    border: 1px solid #ffccea;
   padding-left: 30%;
}

.flex {
   display: flex;
         justify-content: 
 space-around;
 }
 /*--写真上--*/


img {
   width: 270px;
   object-fit: cover;
   padding-top: 0px;
   margin: 0px;
   padding-bottom: 80px;
 }
 
h3 {
   width: 50px;
 }

.contents {
   display:  flex;
   flex-wrap: wrap-reverse;
   gap: 5px;
}  
   
.contents img {
   width: 550px;
   padding-left: 53px;
   padding-top: 50px;
}

.background {  
   width: 174%;
   height: 100vh;
   object-fit: cover;
   position: relative;
   background-image: url(image/last.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-radius: 50%;
   padding-right: 50px;
   padding-top: 0ch;
   padding-bottom: 50px;

}

.content {
   width: 414px;
   margin: auto;
   padding: 0% 0px;
   background-color: raba(0,0,0,0.8);
   color: #800000;
   font-size: 27px;
   padding-left: 35px;
}



footer{
    width: 680px;
    height: 10px; 
    text-align: center;
    padding: 50px 0;
    background-color: #fff5ee;
  }
.footer-text {
    color: #fff;
  }
p{
    color: #fff;
}

.align-center {
   text-align: center;
}

html{
   height: 100%;
}
body {
   height: 100%;
   position: relative;
}

.row {

   margin: -40px 0;
   .col {
      padding: 0 8px;
      float: left;
      box-sizing: border-box;
      &.x-50 {
         width: 50%;
      }
      &.x-100 {
         width: 100%;
      }
   }
}

.content-wrapper {
   min-height: 150%;
   position: relative;
}

.get-in-touch {
   max-width: 690px;
   margin: 0 auto;
   position: relative;
   top: 780%;
   transform: translateY(-50%);
  
  .title {
     text-align: center;
     font-family: Raleway, sans-serif;
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 35px;
     line-height: 48px;
     padding-bottom: 0px;
  }
}
.contact-form {
   .form-field {
      position: relative;
      margin: 70px 0;

   }
   .input-text {
      display: block;
      width: 80%;
      height: 34px;
      border-width: 0 0 2px 0;
      border-color: #fff;
      font-family: Lusitana, serif;
      font-size: 25px;
      line-height: 26px;
      font-weight: 400px;
      
      &:focus {
         outline: none;
      }
      
      &:focus,
      &.not-empty {
         + .label {
            transform: translateY(-28px);
         }
      }
   }
   .label {
      position: absolute;
      left: 20px;
      bottom: 11px;
      font-family: Lusitana, serif;
      font-size: 18px;
      line-height: 26px;
      font-weight: 400;
      color: #fff;
      cursor: text;
      transition: transform .2s ease-in-out;
   }
   
   .submit-btn {
      display: inline-block;
      background-color: #fff;
      color: #800000;
      font-family: Raleway, serif;
      font-style: oblique;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 26px;
      line-height: 24px;
      padding: 8px 16px;
      border: none;
      cursor: pointer;
   }
}

h3 {
    color: #fff
}

.note{

   left: 0;
   bottom: 0px;
   width: 100%;
   text-align: center;
   font-family: Lusitana, serif;
   font-size: 16px;
   line-height: 21px;
   background-color: #800000;

}

h1 {
   position: relative;
   display: inline-block;
   padding: 0 px;
 }
 
 h1:before, h1:after {
   content: '';
   position: absolute;
   top: 40%;
   display: inline-block;
   width: 45px;
   height: 2px;
   border-top: solid 1px #800000;
   border-bottom: solid 1px #800000;
 }
 
 h1:before {
   left:0;
 }
 h1:after {
   right: 0;
 }
 
h3{
   font-size: 130%;
   font-style: oblique;
   font-weight: normal;
   font-family: serif;
   letter-spacing: 64px;
   color: #8b0000;
   text-align: center;
   padding-bottom: 160px;
   line-height: 465%;

}


.container {
   width: 145%;
   padding-top: 25px;
   height: 55vh;
   padding-left: 20%;
   display: flex;
   overflow: hidden;
   position: relative;
   align-items: center;
   justify-content: center;
   background: url() no-repeat;
   background-size: cover;
 }
 .target {
   display: block;
   max-width: 350px;
   width: 90%;
   height: auto;
 }
 
 /* Animation */
 .target {
   animation: floating-y 1.8s ease-in-out infinite alternate-reverse;
 }
 @keyframes floating-y {
   0% {
     transform: translateY(-10%);
   }
   100% {
     transform: translateY(19%);
   }
 }