@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
  line-height: 1;
  list-style: none;
}

html {
  scroll-behavior: smooth; /* スムーススクロール */
}

body{

  /*　Sawarabi Mincho　を優先してない場合には、serif　を選択*/
  font-family: "Sawarabi Mincho", serif;
  font-size: 18px;
  color: #121212;
}

.ffjosefin{
  font-family: "Josefin Sans", sans-serif;
}

a{
  color: inherit;
  text-decoration: none;
}

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


.innerWrap{
  /* border:1px solid #f00; */
  width: 1240px;
  margin: 0 auto;
  padding: 80px 20px 0;
}





/* header */
header{
  /*center/cover 縦横にちょうどいい高さに調整される*/
  background: url(../img/hero.jpg) no-repeat center/cover;
}

header .innerWrap nav{
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
}  
header .innerWrap nav ul{
  display: flex;
  justify-content: space-around;
  width: 1240px;
  margin: 0 auto;
  padding: 10px 0px;
}


header .innerWrap nav ul a:hover{
  text-decoration: underline;
} 

header .innerWrap{
  height: 720px;
  position: relative;
}





header .scroll{
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  font-size: 16px;
  
}


header .scroll img {
  margin-top: 8px;
}

h1{
  padding-top: 120px;
}

nav{
  z-index: 100;
}

/*Main Contents*/

main h2{
  text-align: center;
  font-size: 60px;
  /*字間の幅調整　+ が広く　-が狭く　0.05em = .05em*/
  letter-spacing: .05em;
  margin-bottom: 80px;
}

/*message Contents*/
.msgSec{
  background-color: #fbfaf7;
}

.msgSec p {
  text-align: center;
  line-height: 1.75;
  margin-bottom: 40px;
}

.msgSec p.illust {
  margin-top: 80px;
  margin-bottom: 0px;
  position: relative;
}

/*要素内の前に表示*/
.msgSec p.illust::before {
  content: url(../img/deco_left.png);
  position: absolute;
  left: 320px;
  bottom: -30px;

}

/*要素内の後に表示*/
.msgSec p.illust::after {
  content: url(../img/deco_right.png);
  position: absolute;
  right: 320px;
  bottom: -30px;

}


/*date Contents*/

.dateSec{
  background-color: #fff;
  padding-bottom: 120px;
}

.dateSec .layoutWrap {
  display: flex;
}


.dateSec .layoutWrap > p{
  flex-basis: 735px;
}

.dateSec .layoutWrap > div{
  flex-basis: 465px;
  padding-top: 100px;
}

.dateDetailSec{
  font-size: 72px;
  margin: 0 0 170px -100px;
  background-color: #fff;
  padding: 40px 60px;
  line-height: 1.2;
}

.word1{font-size: 50px;}
.word2{font-size: 60px;}
.word3{font-size: 70px;}

.accessSec{
  margin-left: 48px;
}


.accessSec h3{
  color: #cfafa3;
  font-size: 55px;
  letter-spacing: 0.5em;
  margin-bottom: 8px;
}


.accessSec p{
  line-height: 1.6;
}


.dateSec{
  margin-bottom: 480px;
}
.dateSec::after{
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpg) no-repeat center/cover;
  z-index: -1;
}



/*アニメーションの設定を制定*/
/* @keyframes scrollAnimation　の処理だけだと動作はしない */
@keyframes scrollAnimation {
  
  0%{
    transform: scaleY(0);
    transform-origin: top;
  }
  50%{
    transform: scaleY(1);
    transform-origin: top;
  }
  50.1%{
    transform: scaleY(1);
    transform-origin: bottom;
  }
  100%{
    transform: scaleY(0);
    transform-origin: bottom;
  }

}

/*上記　@keyframes scrollAnimation　の処理実装*/
header .scroll img{
  animation-name: scrollAnimation;
  animation-duration: 1.8s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}



/*form Contents*/

.formSec{
  background-color: #efe8d9;
  padding-bottom: 60px;
}

form {
  width: 600px;
  margin: 0 auto;
}

input[type="text"],
input[type="email"],
select,
textarea {
  border: 1px solid #000;
  background-color: #fff;
  width: 100%;
  margin-top: 5px;
  padding: 4px 8px;

}


input[type="radio"],
input[type="checkbox"]{
  width: 16px;
  height: 16px;
  vertical-align: baseline;
  margin-right: 4px;
}


.attendRadio{
  text-align: center;
  margin-bottom: 40px;
}

.attendRadio label{
  margin: 0 20px;
  font-size: 24px;
}

.allergyCheck label{
  margin-right: 24px;
}

textarea{
  height: 148px;
  margin-bottom: 30px;
}

form > p {
  line-height: 1.4;
  margin-bottom: 20px;
}

.submitBtn{
  text-align: center;
}

input[type="submit"]{
  background-color: #121212;
  color: #ffffff;
  padding: 18px 80px;
}


input[type="submit"]:hover{
  background-color: #c7887f;
  margin-left: 20px;
  transition-property: background-color,margin-left;
  transition-duration: 100ms;
  transition-timing-function: ease-in;
  transition-delay: 0ms;
  }


  select{
    background: #ffffff url(../img/arrow.png) no-repeat 98% 50%/17px 10px;
  }

  /*SP対応*/
@media (max-width:600px){
  
  body{
    font-size:  16px;
    
  }

  header{
    background: url("../img/hero_sp.jpg") no-repeat right top/cover;
  }

  header .innnerWrap{
    height: 90vh;
  }

  header h1{
    padding-top: 80px;
  }

  .dateSec .layoutWrap {
    display: block;
  }
  

  main h2{
    font-size: 44px;
    margin-bottom: 60px;
    padding-top: 30px;
  }

  .innerWrap{
    width: 90%;
    margin: 0 auto;
    padding: 0 10px;
  }

  header .innerWrap nav ul,
  header h1 img,
  .msgSec p.illustWrap > p img {
    width: 100%;
    }


    .msgSec p{
      text-align: center;
    }

  .msgSec p.illust::before{
    left: -16px;
    bottom: -80px;
    transform: scale(0.7);
  }
  .msgSec p.illust::after{
    right: -16px;
    bottom: -80px;
    transform: scale(0.7);
  }

  .dateSec .dateDetailSec{
    font-size: 36px;
    margin: 0 0 0 25%;
    padding: 20px 20px;
  }

  .word1{font-size: 25px;}
  .word2{font-size: 20px;}
  .word3{font-size: 30px;}

  .dateSec .layoutWrap > div {
    padding-top: 0;
    transform: translateY(-50px);
  }


  .accessSec h3{
    font-size: 44px;
  }

  .accessSec {
    margin:32px 0 0 32px;
  }
  
  .dateSec{
    padding-bottom: 40px;
    margin-bottom: 250px;
  }

  form{
    width: 90%;
  }

}


/* footer */
footer{
  background-color: #c7887f;
  color: #f3e9e5;
  padding: 14px 10px 20px;
  text-align: center;
}