@charset "utf-8";
@font-face {
  font-family: "notosanjp";
  font-weight: 400; 
  src: url("/static/css/fonts/notosansjp/NotoSansJP-Regular.woff2") format("woff2"), url("/static/css/fonts/notosansjp/NotoSansJP-Regular.otf") format("opentype");
}
@font-face {
  font-family: "oswald-bold";
  font-weight: 900; 
  src: url("/static/css/fonts/oswald/Oswald-Bold.woff2") format("woff2"), url("/static/css/fonts/oswald/Oswald-Bold.ttf") format("opentype");
}

#sp-contents{
	width: 90%;
	margin: 0 auto;
	font-family:"notosanjp", sans-serif;
	color: #2F242C;
	text-align: center;
	position: relative;
}
#sp-contents p{
	font-size:14px;
	text-align: left;
}

#sp-contents a:hover{
	text-decoration: none;
}

/*　　キービジュアルの設定　　*/
#section-hero{
	text-align: center;

}


#section-hero h1{
	padding: 10px 20px;
}
/*　　#summary　　*/


#summary{
	padding: 20px 0;
	text-align: center;
}
#pc-menu{
	display: none;
}

.rec-point dt .moving-right  {
  animation: animationArrowRight 2s ease-in-out infinite;
	margin-right: 5px;
}
@keyframes animationArrowRight {
  0%,100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-20px);
  }
}


.rec-point dd a{
	display: flex;
	background: #EFF1CA;
	border: #393E41 solid 1px;
	border-radius: 60px;
	color: #393E41;
	padding: 10px;
	margin: 10px auto 0;
	font-weight: bold;
		max-width: 380px;
	width: 90%;
}

.rec-point dd a:hover{
	text-decoration: none;
	background: #EFB6B6;
}

.rec-point dd a span{
	width: 90%;
}
.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
	width: 10%;
	margin-top: 2px;
}
.cp_arrows .cp_arrow {/*矢印を配置するベースの設定*/
  position: absolute;
  top: 50%;/*着地点(cp_arrowsの高さの50%)*/
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 10px;
  opacity: 0;
}
.cp_arrows .cp_arrow:first-child {
  animation: arrow-move08 2s ease-in-out infinite;
}
.cp_arrows .cp_arrow:nth-child(2)  {
  animation: arrow-move08 2s 1s ease-in-out infinite;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {/*矢印全体の設定*/
  position: absolute;
  content: '';
  top: 0;
  width: 10px;
  height: 3px;
  background: #393E41;
	border-radius: 6px;
}
.cp_arrows .cp_arrow:before {/*矢印左の線の位置と傾斜*/
  left: 2px;
  transform: rotate(40deg);
}
.cp_arrows .cp_arrow:after {/*矢印左の線の位置と傾斜*/
  right: 2px;
  transform: rotate(-40deg);
}
@keyframes arrow-move08 {
    0% { opacity: 0; top: 5%;/*スタート地点(cp_arrowsの高さの40%)*/}
   80% { opacity: 1;}
  100% { opacity: 0;}
}


/*　　section#point01　　*/
#point01 p{
	text-align: left;
}
 #point01 a:hover{
	text-decoration: none;
}

.bg-gray{
	background: #F6F6F6;
	height: 130px;
	margin: 20px -5% 50px;
	position: relative;
		text-align: center;
	padding-top: 80px;
}
.bg-gray::after{
	content: '';
    position: absolute;
    bottom: -34px;
	left: 50%;
	 transform: translateX(-50%); 
     border-left: 35px solid transparent;
  border-right: 35px solid transparent;
  border-top: 35px solid #F6F6F6;

}

.bg-gray h2{
	font-size: 18px;
	font-weight: bold;
	position: relative;
}
.bg-gray h2::before{
  content: '';
position: absolute;	
  display: inline-block;
  width: 120px;/*画像の幅*/
  height: 40px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
	top:-52px;
	left: 50%;
	 transform: translateX(-50%); 
		background-repeat: no-repeat;
}

#point01 .bg-gray h2::before{
	background-image: url("/static/img/feature/beginner/point01.png");
}

.txt-user{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.txt-user dt,.txt-user dd{
	width: 100%;
	text-align: center;
	padding-bottom: 10px;
}

.txt-user dt::before,.txt-user dt::after{
	content: '';
	display: inline-block;
  width: 16px;/*画像の幅*/
  height: 23px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
	background-repeat: no-repeat;
	margin-top: 5px;
	animation: blinking 1s ease-in-out infinite alternate;

}
.txt-user dt::before{
	margin-right: 5px;
	background-image: url("/static/img/feature/beginner/heading-b-l.png");
}
.txt-user dt::after{
	margin-left: 5px;	
	background-image: url("/static/img/feature/beginner/heading-b-r.png");
}
#sp-contents p.txt-why{
		background: #F6F6F6;
	clip-path: polygon(0 0,100% 0, 100% 70%, 50% 100%,0 70%);
	text-align: center;
	padding: 16px 0 24px;
	font-size: 14px;
	font-weight: bold;
}
h3.tit-check{
	font-size: 14px;
	font-weight: bold;
	padding-left: 27px;
	position: relative;
	line-height: 1.6em;
	margin: 20px 0;
	
}
h3.tit-check span{
	background:linear-gradient(transparent 25%, #FFF0F0 25%);
	display: block;
	padding: 0 4px 4px;
	text-align: left;
}
h3.tit-check::before{
		content: '';
	position: absolute;
	left: 0;
	top: 3px;
	display: inline-block;
  width: 24px;/*画像の幅*/
  height: 21px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
	background-repeat: no-repeat;
	margin-right: 3px;	
	background-image: url("/static/img/feature/beginner/check.png");	
}

.detail-bus{
	display: flex;
	justify-content: space-between;
	margin: 0 0 20px;
}
.detail-bus li{
	width: 49%;
	padding: 10px;
	border: #393E41 1px solid;
	border-radius: 8px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	 position: relative;
}
.detail-bus li strong{
	display: block;
	font-size: 20px;
}
.detail-bus li strong span{
	font-size: 40px;
	font-family:"oswald-bold", Arial, "sans-serif";
	font-weight: bold;
}

.detail-bus li:first-child::after {
  content: '';          
  position: absolute;    
  bottom: 0;           
  left: 40%;             
  width: 10px;          
  height: 10px;       
  background: #FFF;    
  border-right: 1px solid  #393E41; 
  border-bottom: 1px solid  #393E41;
  transform: translate(-50%,55%) rotate(45deg); /* 表示位置を左方向に半分戻し、下方向に移動。かつ45度時計回りに回転 */
  transform-origin:center center; /* 回転の基準位置を中心に指定 */
}


.detail-bus li:last-child::after {
  content: '';          
  position: absolute;    
  bottom: 0;           
  right: 30%;             
  width: 10px;          
  height: 10px;       
  background: #FFF;    
  border-right: 1px solid  #393E41; 
  border-bottom: 1px solid  #393E41;
  transform: translate(-50%,55%) rotate(45deg); /* 表示位置を左方向に半分戻し、下方向に移動。かつ45度時計回りに回転 */
  transform-origin:center center; /* 回転の基準位置を中心に指定 */
}


.detail-item{
	padding: 10px 16px;
	border: #393E41 1px solid;
	border-radius: 8px;
	margin: 0 0 20px;
	font-size: 12px;
	text-align: left;	
}

.detail-item dt{
	background: #E9E9E9;
	padding: 4px 12px;
	border-radius: 60px;
	display: inline-block;
	margin-bottom: 4px;
}

a.link-detail{
	display: block;
	font-weight: bold;
	border: 1px #707070 solid;
	color: #393E41;
	padding: 8px;
	width: 260px;
	font-size: 16px;
	border-radius: 60px;
	margin: 0 auto 12px;
}

a.link-detail:hover{
	color: #393E41;	
	background: #EFB6B6;
}
.list-member{
	margin: 10px 0;
	padding: 10px;
	background: #F6F6F6;
}

.list-member li{
	padding-left: 20px;
	position: relative;
	text-align: left;
	font-size: 14px;
	margin-bottom: 3px;
	
}
.list-member li::before{
	content: "・";
	position: absolute;
	left: 0;
}
#point01 p.txt-check{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

/*　　section#point02　　*/

#point02 .bg-gray h2::before{
    background-image: url(/static/img/feature/beginner/point02.png);
}


#point02 p.txt-check{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.txt-check::before,.txt-check::after{
	content: '';
	display: inline-block;
  width: 16px;/*画像の幅*/
  height: 23px;/*画像の高さ*/
  background-size: contain;
  vertical-align: middle;
	background-repeat: no-repeat;
	margin-top: 5px;
	animation: blinking 1s ease-in-out infinite alternate;

}
.txt-check::before{
	margin-right: 5px;
	background-image: url("/static/img/feature/beginner/heading-y-l.png");
}
.txt-check::after{
	margin-left: 5px;	
	background-image: url("/static/img/feature/beginner/heading-y-r.png");
}



.btn-bussale{
	display: block;
	background: #EFF1CA;
	border: #393E41 solid 1px;
	border-radius: 60px;
	color: #393E41;
	padding: 10px;
	margin: 0 auto 10px;
	font-weight: bold;
	max-width: 290px;
	position: relative;
	width: 90%;
}

.btn-bussale:hover{
	text-decoration: none;
	color: #393E41;
	background: #EFB6B6;
}


.btn-bussale::after{
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 800;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
    color: #393E41;
	position: absolute;	 
}


/*　　section#point03　　*/
#point03 .bg-gray{
	margin-bottom: 35px;
}
#point03 .bg-gray h2::before{
    background-image: url(/static/img/feature/beginner/point03.png);
}

.btn-detail {
	margin: 20px 0 5px;
}
.btn-detail li{
	margin-bottom: 10px;
	text-align: left;
}

.btn-detail li a{
	display: block;
	color: #393E41;
	background: #EFF1CA;
	border:#393E41 1px solid;
	border-radius:10px ;
	padding: 16px;
	position: relative;
}
.btn-detail li a:hover{
		background: #EFB6B6;
	
}
.btn-detail li a dt{
	font-size: 14px;
}

.btn-detail li a dd{
	font-size: 12px;
}


 .btn-detail li a::after{
    content: "\f101";
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: 800;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
    color: #393E41;
	position: absolute;	 
}

 .btn-detail li a.ico-window::after{
    content: "\f2d2";
    font-family: "Font Awesome 5 Free";
    font-size: 15px;
    font-weight: normal;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 10px;
    color: #393E41;
	position: absolute;	 
}

/*　　SNS　　*/
#Sns {
	padding: 40px 0 20px;
}
#Sns h2 {
    font-size: 18px;
    font-weight: bold;
    position: relative;
}

.list-sns{
   display: flex;
   width: 90%;
   margin:20px auto 0;
   justify-content: space-between;
	max-width: 260px;
}
.list-sns > li{
   width: 45px;
}

@media (min-width: 992px) {
#Sns {
			padding: 40px 0 0;
	}	
	
	
}


/* 点滅 */
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}


@media (min-width: 576px) {
    #sp-contents{
	width: 80%;;
	margin: 0 auto;
}
	#section-hero{
		max-width: 500px;
		margin: 0 auto;
	}
}


@media (min-width: 992px) {
	
	#sp-contents{
		height: 600px;
		width: 420px;
		padding: 15px 35px;
		overflow-y: auto;
		overflow-x: hidden;
		
	}
	#bg-pc{
		padding: 20px 0 40px;
		background: #F4F4F4 url(/static/img/feature/beginner/img-bg.png) no-repeat right top;
		background-size: 708px  764px;
		display: flex;
		justify-content: center;
	}
	
	#bg-phone{
		background: url("/static/img/feature/beginner/phone.svg") no-repeat center;	
				padding: 40px 0 30px;
	}
	
	
	#sp-contents::-webkit-scrollbar{
		display: none;
	}
	
	
 .bg-gray{
		margin:20px -5px 50px;
	}
	
	#pc-menu{
		display: block;
	padding: 100px 0 0;
	text-align: center;
		width: 380px;
		
	
}
	#left-contents{
				width: 220px;
	}
	
#summary{
	display: none;
	
}	
	
.rec-point {
		position: sticky;
		height: 200px;
	top: 100px;
	left: 10px;
	}	
	.rec-point dt{
		margin-bottom: 8px;
	}	
.rec-point dd a{
	display: flex;
	background: #EFF1CA;
	border: #393E41 solid 1px;
	border-radius: 60px;
	color: #393E41;
	padding: 10px;
	margin: 10px auto 0;
	font-weight: bold;
	font-size: 15px;
	max-width: 290px;
	
}
	
	
}


@media (max-width: 360px) {
	#sp-contents p{
		font-size: 13px;
	}
	.list-member li{
		font-size: 13px;	
	}	
}