/*
===============================================

MAIN

===============================================
*/
main{
width: 100%;
position: relative;
}

main p img{
object-fit: cover;
display: block;
}


.menu span{
color: #c69f7d;
}


main .text{
width:30%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-100%,-60%);
}



@media screen and ( max-width:699px ){
  main{
    height: 60vh;
  }
  main p.bg{
    position: absolute;
    top:0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 60vh;
    overflow: hidden;
  }
  
  main p.bg img{
    height: auto;
  }
  main .text{
    width: 80%;
    transform: translate(-50%,-50%);
  }
}


/*
===============================================

G R E E T I N G

===============================================
*/
#greeting{
background: url(../images/greeting.jpg) no-repeat center center;
background-size: cover;
padding: 40px 0;
}

#greeting p{
line-height: 200%;
margin-bottom: 20px;  
}


/*
===============================================

P O I N T

===============================================
*/
#point{
}


#point .inner{
counter-reset: number 0;   
display: flex;
justify-content: space-between;
}

#point dl{
width: 32%;
padding: 20px;
background: #ECD5C1;
text-align: center;
}

#point dl:before{
content: "POINT";
font-family: "Noto Serif JP", serif;
}

#point dt{
color: #fff;
font-size: 120%;
margin-bottom: 20px;
}

#point dt:before{
counter-increment: number 1;      /* number カウンタの増加数をセット */
content:"0" counter(number);      /* 表示形式を指定 */
display: block;
font-family: "Noto Serif JP", serif;
font-size: 150%;
color: #000;
}
#point dd{
text-align: left;
line-height: 180%;
}


#point .csg{
margin-top: 50px;
margin-bottom: -50px;
}

@media screen and ( max-width:699px ){
  #point .inner{
    display: block;
  }
  #point dl{
    width: 100%;
    margin-bottom: 30px;
  }
  #point .csg{
    display: none;
  }
  
}
/*
===============================================

F A Q

===============================================
*/
#faq{
background: #F5F5F5;
padding: 40px 0;
}

#faq .inner{
width: 800px;
}



#faq h2{
font-family: "Noto Serif JP", serif;
font-weight: normal;
margin-bottom: 30px;
}

#faq .category{
margin: 40px 0;
}

#faq .category li{
background: #ECD5C1;
display: inline-block;
font-family: "Noto Serif JP", serif;
padding: 10px 20px;
margin: 0 10px;
border-radius: 30px;
cursor: pointer;
}
#faq .category li:hover{
opacity: .5;
}

#faq dl{
margin-bottom: 20px;  
--duration: 0.5s;
cursor: pointer;
}

#faq dl:hover{
opacity: .5;
}
#faq dl.on:hover{
opacity: 1;
}

#faq dt{
background: #ECD5C1;
font-size: 110%;
padding: 5px 0;
text-align: left;
position: relative;
}

#faq dt:before{
display: inline-block;
content: "Q";
vertical-align: middle;
font-size: 28px;
color: #C69F7D;
font-family: "adobe-garamond-pro", serif;
padding: 0 10px;
}

#faq dt:after{
content: "+";
font-size: 130%;
position: absolute;
top:5px;
right: 10px;
}


#faq dl.on dt{
background: #C69F7D;
}
#faq dl.on dt:before{
color: #fff;
}
#faq dl.on dt:after{
content: "ー";
color: #fff;
}

#faq dd{
background: #ECD5C1;
text-align: left;
padding:20px 20px 20px 45px;
display: none;
}

@media screen and ( max-width:699px ){
  #faq .inner{
    width: 100%;
  }
  
  #faq dt{
    box-sizing: border-box;
    padding: 10px 30px 10px 45px;
  }
  #faq dt:before{
    position: absolute;
    top:5px;
    left: 5px;
  }
}