@charset "utf-8";
/* CSS Document */
.p10{ padding: 0 10px;}
.ord-block {background: url(../img/back-img.jpg) repeat fixed center top, #fff;}
.container{	max-width: 1024px; margin: 0 auto; padding: 40px 0; background: #fff;}
.backh2{
  background: url(../img/back.png) no-repeat center top #fff;
  background-size: cover;
  margin: 40px 0;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;          /* 高さを安定させる */
  max-height: 180px;
  text-align: center;
  color: #333;
  /* フォント調整（ここが本命） */
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.hero {
  width: 100%;
  position: relative;
  z-index: 9;
  background-color: #fff;
  padding: 0 0 !important;
  background: url(../img/top-back.jpg) no-repeat center top;
}
.hero .img{
	max-width: 900px;
	margin: auto;
}
.born,.point,.voice {	margin: 40px 0 0;}

/* benefits */
.benefits img{
	max-width: 300px;
	margin: 0 auto 30px;
}

.benefits .box img{
	max-width: 100%;
	margin: 0 auto 40px;
}
/*earn*/
.earn {
	margin: 40px 0 0;
}
.earn .img01{
	margin: 0 auto 30px;	
}
.earn .img02{
	max-width: 320px;
	margin: 0 auto 30px;	
}
.earn .img03{
	margin: 0 auto 30px;	
}

.earn h2{
	color: #C3346F;	
	font-size: 1.3rem;
}
.earn h2 span{
	display: block;
	font-size: 20px;
}
.earn ul,
.born ul,
.point ul,
.future ul{
	max-width: 460px;
	margin: 0 auto 20px;
	border: 4px solid #c2336e61;
	padding: 20px;
}
.earn ul li,
.born ul li,
.point ul li,
.future ul li{
	border-bottom: dotted 1px #CCC;	
	margin: 0 0 6px;
  padding-left: 1.4em;
  text-indent: -1.4em;
  color: #C3346F;
  line-height: 2.0;
  font-weight: 500;
}
.earn ul li:before,
.born ul li:before,
.point ul li:before,
.future ul li:before{
  content: '■ ';
  color: #C3346F;
}

/*.born*/
.born .img03{
	margin: 0 auto 30px;	
}	


/*point*/

.point h3{
	color: #C3346F;	
}

.point .img01{
	max-width: 180px;
	margin: 30px auto;
}
.point h4{
	text-align: center;
	border-bottom: 1px dotted #b5a4a6;
	padding: 0 0 10px;
	margin: 0 0 20px;
	font-weight: bold;
	font-size: 1.4em;
	background: url(../img/whtopink.jpg) repeat-x center bottom, #fff;	
}
.point h4 span{
	display: block;
	font-size: 16px;
}
.point .img02{
	margin: 30px auto;
}
/*future*/
.future ul{
	max-width: 680px;
}
.future h2{
  font-size: clamp(1.1rem, 1.05rem + 0.45vw, 1.25rem);
  line-height: 2.0;
  font-weight: bold;	
}

/*voice*/
.voice .img01{
	max-width: 300px;
	margin: 0 auto 30px;	
}
.voice-wrap{
  width: min(94%, 720px);
  margin: 0 auto 50px;
  background-color: #f9f4ea;
  padding: clamp(1.2rem, 1.0rem + 0.6vw, 1.8rem);
  border-radius: 0.9rem;
  box-sizing: border-box;
  box-shadow: 10px 10px 0 #d9c999;
}
.voice-wrap:last-child{
  margin: 0 auto 20px;	
}

.voice-wrap img{
  width: clamp(96px, 22vw, 140px);
  height: auto;
  margin: 0 0 12px;
}
.voice-wrap h2{
  font-size: clamp(1.25rem, 1.15rem + 0.6vw, 1.6rem); /* 20px相当を中心に可変 */
  line-height: 1.6;
  font-weight: 700;
  padding-bottom: 0.6em;
  margin-bottom: 0.8em;
  border-bottom: 1px dotted #cfcfcf;
}
.voice-wrap h2 span{
	display: block;
  font-size: clamp(1.1rem, 1.05rem + 0.45vw, 1.25rem);
}
.voice-wrap p{
  font-size: clamp(1.0rem, 0.98rem + 0.25vw, 1.1rem);
  line-height: 1.85;
}
.voice-wrap .meta{
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  opacity: 0.85;
  margin-top: 0.3em;
}

/*profile*/
.profile .img01{
	max-width: 300px;
	margin: 0 auto 30px;
}
.profile .img02{
	max-width: 180px;
	margin: 0 auto 30px;
}

footer{
	background: #333333;
	color: #fff;
	text-align: center;
	padding: 40px 0 10px;
}
footer a:hover{
	border-bottom: 1px solid #fff;
}
input{
	max-width: 600px;
	margin: auto;	
}
button{
	max-width: 600px;
	margin: 30px auto 16px;
}
button{
  /*font-size: clamp(1.4rem, 1.2rem + 1vw, 1.7rem);*/
  border-radius: 5vh;
  box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.5);	
	color: #fff;
	text-align: center;
	display: block;
	background: #D9BB58;
	background: linear-gradient(180deg,rgba(217, 187, 88, 1) 0%, rgba(187, 126, 42, 1) 100%);
	font-weight: bold;
	padding: 20px;
	
}
button:hover{
	opacity: 0.5;
}
/*アニメーション*/
.animation{
  animation: buruburu 1s linear infinite;
  scale: 1;
  width: 96%;
  margin: auto;
}
@keyframes buruburu{
 0%{transform:translateX(0)}
 7%{transform:translateX(-10px)}
 14%{transform:translateX(10px)}
 20%{transform:translateX(-10px)}
 32%{transform:translateX(10px)}
 40%{transform:translateX(0px)}
}
h2.omidashi {
  background: url(../img/back.jpg) no-repeat center top #ffffff;
  box-sizing: border-box;
  margin-bottom: 26px;
  text-align: center;
  color: #fff;
  /*text-shadow: 0 1px 0 rgba(255, 255, 255, 1);*/
  background-size: 100%;
  width: 100%;
  max-height: 200px;
  height: calc(200vw * 0.167);
  display: flex;
  align-items: center;
  justify-content: center;
}

/*line*/
.line {
	margin: 0 0 40px;
  font-size: clamp(1.0rem, 0.98rem + 0.25vw, 1.1rem);  /* indexの本文相当 */
  line-height: 1.85;
}
.line .top {
  height: auto;
  width: 100%;
  position: fixed;
  z-index: 9999;
  background: #C3346F;	
  padding: 20px;
	text-align: center;
	color: #fff;
	font-weight: bold;
}
.line h2{
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem); /* indexのh2相当 */
  line-height: 1.35;
  margin: 2.3em 0 1em;
  letter-spacing: 0.03em;
}
.line p{
  font-size: inherit;
  line-height: inherit;
}
.line .linewrap {
  font-size: inherit;
  line-height: inherit;	
	margin: 0 auto;
	border: 5px solid #2daf12;
	padding: 2em;
	max-width: 500px;
	margin: 0 auto;
}
.line .linewrap .img {
    max-width: 360px;
		margin: auto;
}
.line a{
	width: 100%;
	margin: 50px auto;
	max-width: 560px;
	display: block;
}

.bounce {
	animation:
		bounce 2s ease infinite normal 0s none running
	;
	-webkit-animation:
		bounce 2s ease infinite normal 0s none running
	;
	-ms-animation:
		bounce 2s ease infinite normal 0s none running
	;
}
@keyframes bounce {
	0%, 100%, 20%, 50%, 80% {
	    transform: translateY(0px);
	}
	40% {
	    transform: translateY(-30px);
	}
	60% {
	    transform: translateY(-15px);
	}
}

/*regulation*/

.regulation dl{
	margin: 0 0 10px;
	border-bottom: 1px solid #333;
	padding: 0 0 10px;
}
.regulation dl dt{
	font-weight: bold;

}
.regulation dl dd{
	
}


/*privacy*/
.privacy{
	max-width: 900px;
	margin: auto;
}
.privacy p + p{
	margin: 0;
}
.privacy ul{
 margin: 0 0 15px 10px;		
}
.privacy h2{
    font-size: clamp(1.1rem, 1.05rem + 0.45vw, 1.25rem);		
}
.privacy h3{
  font-size: clamp(1.0rem, 0.98rem + 0.25vw, 1.1rem);
}

/* ===============================
   レスポンシブ：768px以上（タブレット）
================================== */
@media (min-width: 768px) {
/*.benefits*/
	.benefits img{
		max-width: 460px;
	}
	
	
	.benefits .box img{
		max-width: 740px;
	}
/*.earn*/	
	.earn .img01{
		max-width: 540px;
	}
	.earn .img03{
		max-width: 640px;
	}	
	
/*.born*/
	.born .img03{
		max-width: 640px;
	}	
/*point*/	
	.point .box{
		max-width: 800px;
		margin: auto;
	}
	.point .img02{
		max-width: 640px;
	}	
	
/*voice*/
	.voice .img01{
		max-width: 400px;
	}	
	
/*profile*/
  .profile .box {
      max-width: 800px;
      margin: auto;
  }	
	.profile .img04{
		max-width: 180px;
		margin: 0 0 30px;
	}	
	button{
		font-size: 1.4rem;
		
	}

/*company*/
	.company .img{
		max-width: 740px;	
		margin: auto;
	}
    .regulation .img {
        max-width: 740px;
        margin: auto;
    }	
	
	
}
/* ===============================
   レスポンシブ：992px以上（ノートPC以上）
================================== */
@media (min-width: 992px) {

}

@media (max-width: 767px){
  .ord-block{ background-attachment: scroll; }
}