/* =============================================================
    Page
============================================================= */
/* beginner
------------------------------------------------------------- */


/*共通*/
#content{
    font-family: "Noto Sans Japanese", "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, Arial, Roboto, "Droid Sans", sans-serif;font-weight: normal;
    max-width:1098px;margin:auto;color:#333333;
    padding:0 0 40px 0;
    font-size: 1.4em;
    }

#content h2{
    font-family: NotoSerifCJKjp, 游明朝, "Yu Mincho", YuMincho, HGS明朝E, serif;
    font-weight: normal;
    margin:auto;text-align: center;
    font-size:28px;
    margin-bottom:20px;
    } 



@media screen and (max-width: 480px) {
#content h2{padding:20px 5px 0 5px; font-size:20px;}    
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
.sp { display: none !important; }


/*beginner*/
#beginner .wrap{line-height:1.7;}
#beginner.ttl{
    margin:auto 0;
}
#beginner .ttl p{
	text-align: center;
	padding:10px;
	/* line-height: 1.8; */
}    
    
#beginner h2, #beginner h3,#beginner .tokuten .content-head .ttl{
    font-family: NotoSerifCJKjp, 游明朝, "Yu Mincho", YuMincho, HGS明朝E, serif;
    font-weight: normal;
}
 
#beginner h2{
    margin: 0px auto 10px;
    text-align: center;
    font-size:28px;
    /* letter-spacing:0.12em */
        line-height: 1.5em;
    }  

#beginner.inner{max-width:1200px;}
#beginner .inner h3{ font-size:20px;}

#beginner.inner p{
	font-size:14px;
	line-height: 1.8;
}       
#beginner h3{
	font-size:16px;
	margin:44px 0 0 0;
	letter-spacing:0.12em;
}    

#beginner a:link{
    color:#333333;
    text-decoration:none;
}    

#beginner .content-head {
    padding:0 0 10px 0;
    margin: auto 0;
    text-align: center;
}

<!---->
#beginner .mv {
	/* margin: auto ;
	width:100%;	 */
    /* padding: 0px 0 50px 0; */
    text-align: center;
}

#beginner .mv img{
	/* margin: auto 0;
	text-align:center; */
    /* padding: 20px 0 15px 0; */
    display: inline-block;
}
#beginner .bnr_about{
	margin: auto ;
	max-width:484px;
	padding:20px 0 70px 0;
}
#beginner .bnr_about img{width:100%}

#beginner .tokuten{
	max-width:856px !important;
	border: 12px #f4f8fe solid;
	padding: 30px 50px;
	display:block;
	margin: auto;
	margin-bottom: 55px;
}

#beginner .tokuten .content-head {
    padding:0 0 10px 0;
    margin: auto 0;
    text-align: center;
}
#beginner .tokuten .content-head .ttl{
	font-size: 32px;
}
#beginner .tokuten .content-head p{
	margin:0;
	padding-bottom: 15px;
}

#beginner .tokuten  .list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  grid-gap: 0.8em;
  border-top: 1px solid #ddd;
  padding: 0.8em;
  margin: 0;
  grid-template-columns: 1fr 6fr;	
}

#beginner .tokuten  .cssgrid > div {
  background: #ddd;
  overflow: auto;
  min-width: 0;
  padding: 1em;
}

#beginner .tokuten  .list p{margin:0}
#beginner .tokuten  .list .ttl{
	font-size:17px;
	font-weight: bold;
	padding:4px 0
}
#beginner .tokuten .list.last {
	border-bottom: 1px solid #ddd;
}	

#beginner .trial{
	border: 3px #dc2f68 solid;
	border-top:none;
	max-width: 983px;
	margin: auto;
	top:20px;
    margin-bottom: 120px;
}
#beginner .trial p{	
    text-align: center;
	padding: 30px 26px 0;
	line-height:1.7;}

#beginner .trial .list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 grid-auto-rows: 1st;
  grid-gap: 0.8em;
  padding: 0.8em;
  margin: 26px;

}

#beginner .trial .list > div {
  overflow: auto;
  min-width: 0;
}

#beginner .trial .list .item{border:#ccc 1px solid}
#beginner .trial .list .item .cont{padding:10px 10px 0 10px}

#beginner .trial .item .list_img{
    margin: auto;
}

#beginner .trial .list .brand,
#beginner .trial .list .name,
#beginner .trial .list .spec,
#beginner .trial .list .att{
  text-align: left;
  padding:0;margin:0.2em;
	
}
#beginner .trial .list .brand,
#beginner .trial .list .spec{font-size:14px;}
#beginner .trial .list .name{font-size:17px;}
#beginner .trial .list .icon{float:left;display:block;padding:4px 4px 0 0;line-height:0}
#beginner .trial .list .price{color:#f33434;font-size:20px;font-weight: bold;}
#beginner .trial .list .price span{color:#333;}
#beginner .trial .list .att{font-size:0.7em}
#beginner .trial .list .links{padding-top:10px}

#beginner .trial .btn {width:85%;margin: auto;padding:20px;}
#beginner .trial .button01{
     display:block;
     width: 100%;
     height:42px;
     color:#ff8f15;
     line-height: 40px;
     text-decoration: none;
     text-align: center;
     border:1px solid #ff8f15;
     border-radius: 5px; 
     -webkit-transition: all 0.5s;
     transition: all 0.5s;
    position: relative;
}
#beginner .button01:hover{
    opacity:0.5; 
}
#beginner .button01 p{padding:8px;margin:0;color:#ff8f15;}

/*#beginner .btn .button01 p::after {*/
/*  position:absolute;*/
/*  content: "";*/
/*  top: 50%;*/
/*  right: 13px;*/
/*  width: 16px;*/
/*  height: 24px;*/
/*  margin-top: -8px;*/
/*  background: url("/wp2/assets/images/beginner/btn_arrow01.png") top left no-repeat;*/
/*  background-size: 16px 16px;*/
/*}*/

#beginner .product_code {
    font-size: 9px;
    padding:0 0 0 20px ;
    position: relative;
    text-align: right;
    width: 100%;
    line-height:1em;
    display:block;}

<!----->
@media screen and (max-width: 980px) { 
#beginner .sp { display: none; }    
}

@media screen and (max-width: 480px) {
.pc{display: none !important; } 
.sp {display: block !important;}
.mv img,.bnr_about img {width:100%;}
.bnr_about{padding: 0 10px!important;}
#beginner .tokuten{
	padding:20px 10px 10px 10px;
	border: 0;
}
#beginner .tokuten p.ttl{font-size: 24px !important;padding-bottom:4px; } 	

#beginner .tokuten  .list {
  margin: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  border-top: 1px solid #ddd;
}

#beginner .trial .list .item{
	border: 0;
	border-bottom: 1px #ccc solid;
	/* margin-bottom:30px; */
	padding-bottom:30px
}	


#beginner .tokuten  .list .icon img{
	margin:auto;
	width:50%;
	padding-top:8px;}	
#beginner .tokuten  .list dl{background:#000 }
#beginner .tokuten  .list p.ttl{	
  font-size:17px !important;
   padding:20px 0 !important;}

#beginner .trial{
	width:95%;
    margin: 40px auto 90px;
	/* border:none; */
	}
#beginner .trial img{
	width:100%;
	}
#beginner .trial p{
	text-align: left;
    padding-bottom: 30px;
    line-height: normal;
	}
#beginner .trial .list img{
	width:100%;
	}	
#beginner .trial .list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: auto;
  grid-gap: 0.1em;
  margin:0;
  padding:0;
}
#beginner .trial .list .icon {width:auto;}	
#beginner .trial .list .icon img{display: block;}	
#beginner .trial .list .price{clear:both}	
#beginner .btn {width:85%;margin: auto;padding:6px 0 16px 0;}
#beginner .bnr_about .sp{padding:0 10px;}
#beginner .trial .button01 p{text-align: center}    
}


@media screen and (max-width: 768px) {
 #beginner .trial{
	width:96%;
}

}

/* -----------
     self 
---------------*/