@charset "utf-8";
@import url("reset.css");
@import url("util.css");


/* デザイン：スマートフォン */
html {
	background : ;
	font-family: 'Libre Baskerville', serif; /* googleFont */
	font-family: 'Playfair Display', serif; /* googleFont */
	font-size  : 16px;
}


#mainWrapper{
	text-align : center;
}
#mainWrapper p{
	margin-bottom : 5%;
}

/* block01 */
#block01{
	height: 550px;
}
#block01 img{
	width         : 70%;
	vertical-align: top;
	margin-bottom : 5%;
}
#block01 p{
	margin-bottom: 10%;
	font-size    : 22px;
}
.main01, .main02, .main03, .main04, .main05{
	display:none;
}
.main05{
	font-size  : 40px !important;
}


/* scroll促進アニメーション */
.container {
  position     : relative;
  margin-top   : 30%;
  margin-bottom: 30%;
}
.chevron {
  position  : absolute;
  right     : 50%;
  margin-top: -20%;
  width     : 28px;
  height    : 8px;
  opacity   : 0;
  transform : scale3d(0.5, 0.5, 0.5);
  animation : move 3s ease-out infinite;
}
.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}
.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}
.chevron:before,
.chevron:after {
  content   : ' ';
  position  : absolute;
  top       : 0;
  height    : 100%;
  width     : 51%;
  background: #000;
}
.chevron:before {
  left     : 0;
  transform: skew(0deg, 30deg);
}
.chevron:after {
  right    : 0;
  width    : 50%;
  transform: skew(0deg, -30deg);
}
@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}
.scrollText {
  display       : block;
  margin-top    : 75px;
  margin-left   : -30px;
  font-family   : "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size     : 12px;
  color         : #000000;
  text-transform: uppercase;
  white-space   : nowrap;
  opacity       : .25;
  animation     : pulse 2s linear alternate infinite;
}
@keyframes pulse {
  to {
    opacity: 1;
  }
}



#block02{
	background-color: #968b78;
	margin-bottom   : 10%;
}
.text{
	padding-top: 10%;
}
#block02 p{
	color: #ffffff;
}
#block02 img{
	width        : 100%;
	margin-bottom: 25%;
}
/* block02の下線アニメーション */
.Text-Span-01 {
  position: relative;
  z-index : 1;
}
.Text-Span-01:after {
  content   : '';
  position  : absolute;
  left      : 0;
  bottom    : -8px;
  width     : 0%;
  height    : 1px;
  background: #ffffff;
  z-index   : -1;
  transition: all 0.8s;
}
.Text-Span-01.isActive:after {
  width: 100%;
}



#block03 img{
	width        : 90%;
	margin-bottom: 15%;
}



#block04{
	margin-top: 15%;
}
#block04 img{
	width: 100%;
	margin-bottom: 15%;
}
.b04-relative {
    position: relative;
}
.b04-absolute {
    position   : absolute;
    margin-top : -180%;
    margin-left: 13%;
}
.b04-caption{
	font-size    : 150%;
	margin-bottom: 10% !important;
}
#block04 ul{
	list-style: none;
}
#block04 li{
	margin-bottom: 5%;
	text-align   : left;
}



#block05{
	overflow:hidden;
}
.explanation{
	margin-bottom: 15%;
}


#block06 img{
	width        : 100%;
	margin-bottom: 5%;
}
.b06-caption{
	font-size  : 40px !important;
}
.text-right{
	text-align: right;
}


#block07{
	background-color: #968b78;
	margin-bottom   : 10%;
	padding-bottom  : 1%;
}
#block07 p{
	color        : #ffffff;
	text-align   : left;
	margin-bottom: 15%;
}
.b07-caption{
	margin     : 0 0 5% 0;
	padding-top: 5%;
	font-size  : 150% !important;
	text-align : center !important;
}




/* block08・10・11・12の下線アニメーション */
.Text-Span-02 {
  position: relative;
  z-index : 1;
}
.Text-Span-02:after {
  content   : '';
  position  : absolute;
  left      : 0;
  bottom    : -8px;
  width     : 0%;
  height    : 1px;
  background: #c5bdb2;
  z-index   : -1;
  transition: all 0.8s;
}
.Text-Span-02.isActive:after {
  width: 100%;
}

.b08-caption{
	margin     : 0 0 5% 0;
	padding-top: 5%;
	font-size  : 150% !important;
	font-weight: bold;
	text-align : center !important;
}
.voice{
	margin-bottom: 15%;
}
/*UserVoice*/
.nameBox {
	margin          :2em auto;
	padding         :1em;
	border-left     :solid 5px #c5bdb2;
	background-color:#ffffff;
	box-shadow      :3px 1px 4px rgba(0, 0, 0, 0.2);
}
/*レーディングbox*/
.qBox{
	text-align  : left;
	padding-left: 20%;	
	float       : left;
}
.aBox{
	margin-bottom: 10%;
}
/*レーディング*/
.star5_rating{
    position   : relative;
    z-index    : 0;
    display    : inline-block;
    white-space: nowrap;
    color      : #CCCCCC;
}
.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}
.star5_rating:after{
    position   : absolute;
    z-index    : 1;
    top        : 0;
    left       : 0;
    overflow   : hidden;
    white-space: nowrap;
    color      : #ffcf32;
}
.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */
/*テキストbox*/
.tBox{
	text-align  : left;
	padding-left: 10%;	
}




#block09 img{
	width        : 90%;
	margin-bottom: 15%;
}




#block10 img{
	width        : 100%;
	margin-bottom: 5%;
}
.b10-caption{
	margin     : 0 0 5% 0;
	padding-top: 5%;
	font-size  : 120% !important;
	font-weight: bold;
	text-align : center !important;
}
#block10 .caption{
	font-weight  : bold;
	margin-bottom: 1% !important;
}
.b10-text{
	margin: 0% 10% 0% 10%;
}



#block11 img{
	width        : 75%;
	margin-bottom: 5%;
}
.b11-caption{
	margin     : 0 0 5% 0;
	padding-top: 5%;
	font-size  : 150% !important;
	font-weight: bold;
	text-align : center !important;
}
#block11 .caption{
	font-weight  : bold;
	margin-bottom: 1% !important;
}
.b11-text{
	margin: 0% 10% 0% 10%;
}



.b12-caption{
	margin     : 0 0 5% 0;
	padding-top: 5%;
	font-size  : 150% !important;
	font-weight: bold;
	text-align : center !important;
}
/* FAQのアコーディオン */
.accordion_area {}
.accordion_area .accordion_one .ac_header {
	background-color: #ffffff;
	border          : 1px solid #968b78;
	padding         : 1.5rem 4rem 1.5rem 2rem;
	position        : relative;
	z-index         : +1;
	cursor          : pointer;
	transition      : .2s;
}
.accordion_area .accordion_one .ac_header:not(.open):hover {
	background-color: #968b78;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header {
	background-color: #968b78;
}
.accordion_area .accordion_one:nth-child(odd) .ac_header:not(.open):hover {
	background-color: #968b78;
}
.accordion_area .accordion_one .ac_header .i_box {
	position  : absolute;
	top       : 50%;
	right     : 2rem;
	width     : 20px;
	height    : 20px;
	margin-top: -10px;
}
.accordion_area .accordion_one .ac_header .i_box:before, .accordion_area .accordion_one .ac_header .i_box:after {
	position      : absolute;
	content       : "";
	margin        : auto;
	box-sizing    : border-box;
	vertical-align: middle;
}
.accordion_area .accordion_one .ac_header .i_box:before {
	border-top: 2px solid #000000;
	width     : 20px;
	height    : 0;
	top       : 0;
	bottom    : 0;
	right     : 0;
}
.accordion_area .accordion_one .ac_header .i_box:after {
	border-left: 2px solid #000000;
	width      : 0;
	height     : 20px;
	top        : 0;
	bottom     : 0;
	right      : 9px;
	transition : .3s;
}
.accordion_area .accordion_one .ac_header.open .i_box:after {
	height: 0;
}
.accordion_area .accordion_one .ac_inner {
	display      : none;
	padding      : 1.5rem 2rem 1.5rem 2rem;
	border-left  : 1px solid #ccc;
	border-right : 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	box-sizing   : border-box;
	background   : #fff;
}

/* FAQ */
.p-faq__headinner {
	color       : #000000;
	display     : block;
	padding-left: 35px;
	position    : relative;
	line-height : 1.5;
}
.p-faq__headinner::before {
	position   : absolute;
	left       : 0;
	content    : "Q．";
	font-size  : 16px;
	font-weight: bold;
}
.p-faq__headinner p.p-faq__q-txt {
	font-size : 16px;
	text-align: left;
}
.p-faq__bodyinner {
	display     : block;
	padding-left: 35px;
	position    : relative;
	line-height : 1.5;
}
.p-faq__bodyinner::before {
	position   : absolute;
	left       : 0;
	content    : "A．";
	color      : #4a4940;
	font-size  : 16px;
	font-weight: bold;
}
.p-faq__bodyinner p.p-faq__a-txt {
	font-size : 16px;
	text-align: left;
}




/* デザイン：タブレット */
@media screen and (min-width: 600px) {



}



/* デザイン：PC */
@media screen and (min-width: 1025px) {
#mainWrapper {
	max-width     : 950px;
	margin        : 0 auto;
}



}