@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&display=swap');
body{
  text-align: center;
  position: relative;
}
p {
  text-align: left;
  margin-bottom: 1em;
}
/*-- メニュー  --*/
nav{
  padding-top: 2em;
}
h1 img{
  width: 120px;
}
.menu{
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 5vw;
}
.menu ul {
  display: flex;
  flex-wrap: wrap;
}
.menu li:nth-child(odd) {
  border-right: 1px solid #ccc;
}
.menu li {
  width: 49.5%;
  text-align: center;
  padding: .6em 0;
  font-size: 3.5vw;
  border-bottom: 1px solid #ccc;
}
.menu li.menuContact{
  width: 100%;
}
/*--トップ--*/
section h2{
  margin-bottom: 1em;
}
section.wing{
  background-image: url(img/wingBack.jpg);
  background-repeat: repeat-y;
  background-position: right top;
  background-size: 50%;
}
section.pinkGrade{
  background-image: url(img/pinkGradeBack.jpg);
  background-repeat: repeat-y;
  background-position: left top;
  background-size: 50%;
}
.concept{
  margin-bottom: 3em;
}
.titleWrap{
  letter-spacing: 3px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  margin-bottom: 2em;
}
.titleWrap h2{
  position: relative;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  letter-spacing: 6px;
}
.titleWrap h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 2px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #F9E1D8;/*線の色*/
}
.concept h3{
  font-family: 游ゴシック体, YuGothic, 游ゴシック, "Yu Gothic", sans-serif;
  font-weight: bold;
  margin-bottom: 1em;
}
.concept p{
  text-align: center;
}
.concept .wrap{
  display: flex;
}
/*--メッセージ--*/
.messaagePhoto{
  margin-bottom: 1em;
}
.messagePhoto{
  width: 60%;
  margin:0 auto 1em;
}
.messaageTxt h3{
  margin-bottom: 1em;
}
/*--流れ--*/
.flowWrap{
  margin-bottom: 5em;
}
.lastWrap{
  margin-bottom: 3em!important;
}
.flowPhoto{
  margin-bottom: 1em;
}
.flowTxt{
  border: 10px solid #F9E1D8;
  padding: 2em 1em 0em;
  position: relative;
  margin: 0 auto;
  width: 80%;
}
.flowIcon{
  position: absolute;
  left: -30px;
  top: -5em;
  width: 35%;
}
.flowTxt h3{
  background-color: #E9546B;
  color: #FFF;
  margin-bottom: .5em;
  padding: .8em 0;
}
.flowTxt p{
  padding: 1em;
}
.pinkGrade{
  padding-bottom: 0;
}
/*--退会--*/
.cancel{
  border-top: 1px solid #E9546B;
  border-bottom: 1px solid #E9546B;
  padding: 2em 0;
}
/*--カウンセリング--*/
.marriageCousering{
  background-image: url(img/couseringBackSp.jpg);
  background-size: cover;
  background-position: center center;
}
.marriageTel{
  font-size: 2em;
  margin-bottom: 1em;
  letter-spacing: 2px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.logoWrap img{
  width: 70%;
  margin: 0 auto;
}
/*--イベント--*/
.event{
  padding-bottom: 3em;
}
.eventImg{
  width: 60%;
  margin: 0 auto;
}
.eventTxt img{
  width: 280px;
  display: block;
  margin: .5em 0;
}
.eventTxt span{
  font-weight: bold;
  font-size: 1.1rem;
  display: block;
}

  @media only screen and (min-width: 580px){
    .eventTxt{
      width: 50%;
    }
    .eventImg{
      width: 40%;
    }
  h1 {
    width: 15%;
  }
  h1 img{
    margin-bottom: 1em;
    width: 100%;
  }
  nav{
    padding:1em 0;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .menu{
    width: 70%;
  }
  .menu li:nth-child(odd) {
    border-right:none;
  }
  .menu li {
    width: 15%;
    text-align: center;
    border-bottom:none;
    padding: .4em 0;
    font-size: 1.2rem;
  }
  .menu li.menuContact{
    width: 25%;
  }
  .menuContact a{
    background-color: #E9546B;
    color: #FFF;
    padding: .5em .7em;
    font-size: .9em;
  }
  /*--トップ--*/
  .titleWrap{
    font-size: 1.5rem;
  }
  .titleWrap h2{
    margin-bottom: .5em;
  }
  .titleWrap span{
    font-size: 1.2rem;
  }
  .concept p{
    margin-bottom: 3em;
  }
  .concept .wrap img{
    width: 90%;
  }
  .concept{
    margin-bottom: 5em;
  }
  /*--メッセージ--*/
  .message h3{
    text-align: left;
    font-size: 1.5rem;
    margin-bottom: 1em;
  }
  .messagePhoto{
    width: 40%;
  }
  .messageTxt{
    width: 50%;
  }
/*--流れ--*/
.flowWrap{
  display: flex;
  align-items: center;
  margin-bottom: 7em;
}

.rigtImg{
  flex-flow: row-reverse;
}
.flowIcon{
  width: 25%;
}
.flowTxt h3{
  display: inline-block;
  padding: .8em 1em;
  margin-bottom: 2em;
}
.flowTxt{
  width: 75%;
  text-align: left;
  padding: 4em 10% 3em;
  box-sizing: border-box;
  border: 15px solid #F9E1D8;
}
.flowTxt p{
  padding: 0;
}
.flowPhoto{
  width: 35%;
  margin-left: -5em;
  z-index: 999;
  margin-top: 5em;
}
.leftImg{
  margin-left: -0em;
  margin-right: -5em;
}
.marriageCousering{
  background-image: url(img/couseringBack.jpg);
}
.marriageCousering h2{
  font-size: 2rem;
}
.marriageCousering p{
  text-align: center;
}
.logoWrap img{
  width: 40%;
}
.lastWrap .flowTxt{
  margin-bottom: 5em;
}
.cancel h2{
  text-align: left;
  font-size: 2rem;
}
.cancel{
  padding:2em 5em;
}
}
@media only screen and (min-width: 1024px){
  nav{
    width: 1024px;
  }
}