﻿/*共通*/
#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;
    } 



/*contactpage*/
#course  .wrap{line-height:1.7;}

#course img {
	vertical-align: baseline;
	max-width: 100% ;
	height: auto ;
}

.tel img{
	display: inline-block;
    margin: 0 3px 0;
    vertical-align: baseline;
}

#course a:link,#course a:visited{
	font-weight:bold ; 
	color:#fa9724 ;
}
#course a:hover{	color:#fec079 ;}


@media screen and (min-width: 644px){	
  .pc { display:block ; }
  .sp { display:none ; }
}
@media screen and (max-width: 644px){	
  .pc { display:none ; }
  .sp { display:block ; }
}
#course p {
    font-size: 16px ;
    text-align: left ;
	line-height: 1.7 ;
	letter-spacing:0.017rem ;
}

@media screen and (max-width:644px) {
   #course{ 
	   margin: auto ;
	}
}

/*ここから！*/
#course{
	max-width:1000px ;
	margin: auto ;
    padding: 0 0 40px 0;
}




/*.section{text-align:center ;}*/

#course .section{margin:auto ;}
/*about*/
#course .section.about{
	padding-bottom:74px ;
	margin: auto ;
}
#course .section.about p{	
	text-align:center ;
	width:100%
}
/* #course .section.about h2{
	padding:20px 0 10px 0;
	width:auto;text-align:center
} */

.course_ttl h2 {	
	font-size: x-large;		
	font-family: serif;
	color: #4d4d4d;
	margin-bottom: 1em;
}


@media screen and (max-width:644px) {

.course_ttl h2 {		
		margin: 0px auto 10px;		
		text-align: center;		
		font-size: 28px;
		line-height: 1.5em;
}

	#course .section.about{
		margin:auto ;
		padding-bottom:24px ;
		padding-top:0;
	}
	
}

/*メリット*/
/*merit*/

#course .section.merit{
	max-width:840px ;
	background:#fff;
	border: 10px solid  #f8e7d7 ;
	position: relative ;

}
@media screen and (max-width:644px){ 
	#course .section.merit{
		border: 4px solid  #f8e7d7 ;
		padding-top:20px ;
	}
}
#course .section.merit p.ttl{
	position: absolute ;
	top:-30px ;
	left:10% ;
text-align: center ;
	max-width: 641px ;
	margin:auto ;
}
@media screen and (max-width:644px) {
	#course .section.merit p.ttl{
	margin:auto ;
	position:relative ;
	left:0 ;
}
}	

#course .section.merit .cont{
	max-width:684px  ;
	margin:auto  ;
	padding:64px 0px  20px 0px  
}
#course .section.merit .cont .img-flex-4{
	display:flex;
   flex-wrap:wrap;
	justify-content: center;
  align-items: center;

}

@media screen and (max-width:644px) {
	#course .section.merit .cont{
	padding:4% 4% 4% 4% ;
}
	#course .section.merit .cont .img-flex-4
	{margin:auto}
#course .section.merit .cont .img-flex-4 .btn{
	border : 3px  solid  #ffb560  ;
	border-radius: 0.6em ;
	width:120px ;
	height:120px ;
	margin:4px ;
}
#course #merit01.block img.ttl,
#course #merit02.block img.ttl,
#course #merit03.block img.ttl,
#course #merit04.block img.ttl{
	text-align:center;
	margin:auto;
}	
}

#course .section.merit .cont .btn{
	border : 3px  solid  #ffb560  ;
	border-radius: 0.6em ;
	width:156px ;
	height:156px ;
	margin:4px ;
}

#course #merit01.block,
#course #merit02.block,
#course #merit03.block,
#course #merit04.block{
padding-bottom:40px  ;
border-bottom:1px solid #e9e9e9;
}

@media screen and (max-width:644px) {
#course #merit01.block,
#course #merit02.block,
#course #merit03.block,
#course #merit04.block{
padding-bottom:20px  ;
}
}

#course #merit01.block img.ttl,
#course #merit02.block img.ttl,
#course #merit03.block img.ttl,
#course #merit04.block img.ttl{
	padding:20px 0 16px 0 ;
	left:0 ;clear:both ;
	position:relative ;
	width:auto ;
	display:block ;
	text-align:left;
}
/*お届けの図*/	
#course #merit01.block .graph{
	padding-top:20px ;
	margin:auto;
	width:597px;
}
#course #merit01.block .graph img{padding:20px}
#course #merit01.block .graph .graph_block,#course #merit01.block .graph .graph_block2{
	margin-top:20px ;
	max-width: 514px ;
	margin: auto ;
	border:#5393d6 1px solid ;
}
#course #merit01.block .graph .graph_block2{height:204px ;}
#course #merit01.block .graph .graph_block .ttl{
	background:#5393d6 ;
	color:#fff ;
	position: relative ;
	padding:4px ;
}
#course #merit01.block .graph .graph_block .ttl p{
	text-align: center ;
	font-size:20px ;
	color:#fff;
}
#course #merit01.block .graph .graph_block .ttl span{
	font-size:14px ;
}

#course #merit01.block .graph .graph_block .ttl:before{content: "" ;
	position: absolute ;
	top: 100% ;
	left: 50% ;
 	margin-left: -15px ;
	border: 14px solid transparent ;
	border-top: 14px solid #5393d6 ;}

#course #merit01.block .graph .graph_block2 .cont{
	top:-60px ;
	margin:auto ;
	position:relative
}
#course #merit01.block .graph .graph_block2 ul{
	padding:20px 20px 20px 26px ;
	float:left ;	
}
#course #merit01.block .graph .graph_block2 li img{padding:4px 0 ;}
#course #merit01.block .graph .graph_block2 .otodoke{
	color:#5393d6 ;
	font-size:15px ;
}
#course #merit01.block .graph .graph_block2 .kakaku{
	color:#fb9724 ;
	font-size:16px ;
	font-weight:bold ;
}

#course #merit01.block .graph .graph_block2 .partition{float:left  /*;padding:0 20px ;*/}

/*!///お届けの図*/		
	
#course #merit01.block .yasui{padding:20px 0 0 0  ;}	
#course #merit02.block .bnr{
	padding:0 0 20px 0 ;
	margin:auto;
	width:596px;
}
@media screen and (max-width:644px) {
#course #merit02.block .bnr{
	padding:0 0 20px 0 ;
	margin:auto;
	width:100%;
}}

#course #merit02.block .sup{
	font-size:11px ;
	/* text-align:right ; */
}

#course #merit03.block p.sup,
#course #merit04.block p.sup{
	font-size:13px ;
}

#course  #merit_rakuten.block{
	border:solid 2px #bf0000 ;
	margin: auto ;
	margin:40px 0 ;
	border-radius: 6px ;	
}
#course  #merit_rakuten.block img.ttl{
	margin:auto;
	text-align:center;
	width:auto;
	display:block
}

#course  #merit_rakuten.block .cont{
	margin: auto ;
	padding:18px 14px 0 14px ;		
}

#course  #merit_rakuten.block .cont p{
	font-size:15px ; 
	text-align:center ;
}
#course  #merit_rakuten.block .cont span{
	color:#c10000 ;
}
#course  #merit_rakuten.block .cont sup,
#course  #merit_rakuten.block .cont .sup2{
	font-size:10px ;
	text-align: right;
    padding-bottom:10px;
}
#course  #merit_rakuten.block .cont .sup2{padding-top:4px ;}

@media screen and (max-width:644px) {
#course  #merit_rakuten.block .cont p{
	text-align:left ;
}}
/*！ーーーーーーーーメリットここまで*/




/*定期一覧 list QA タイトル*/
#course .section.list,#course .section.qanda{
	max-width:840px ;
	padding-bottom:40px
}

#course .section.list,#course{
	/*margin-top:80px ;*/
}
#course .section.list{
	margin-top:80px;
}

#course .section.qanda{
	margin-top:40px ;
}

#course .section.list h2,#course .section.qanda h2{
	font-size:24px ;
	letter-spacing:0.1em  ;
	/* padding:0 0 30px 0 ; */
   text-align: center  ;
}



/*定期一覧 ここから list*/

#course .section.list .list_wrap .ttl {
	display:flex ;
	border:2px solid #e5e5e5
}
#course #list_atpeace{margin-top:40px;}
#course .section.list .list_wrap .ttl .left {
	width:235px ;
	border-right:2px solid #e5e5e5 ;
}
#course .section.list .list_wrap .ttl .left img{
	padding:30px 25px ;
}
#course .section.list .list_wrap .copy{padding-left:20px ;}
#course .section.list .list_wrap .copy img{max-width:520px ; }
@media screen and (max-width:644px) {
#course .section.list .list_wrap .ttl {
	display:flex ;
	border:2px solid #e5e5e5
}
#course .section.list .list_wrap .ttl  .left {
	width:24% ;padding: 0  ;
}
#course .section.list .list_wrap .ttl  .left img{
	padding: 0 ;
	display:block ;
   vertical-align:inherit ;
	width:100% ; 
}
#course .section.list .list_wrap .copy img{max-width:100% ; }
#course .section.list .list_wrap .copy{
	padding-left:4px ;
	width:72% ;
} }




#course .section.list .list_wrap .cont{
	display:flex ;
		border:1px solid #e5e5e5
}

#course .section.list .list_wrap .cont .left{
	padding:10px 0 10px 10px ;
}
#course .section.list .list_wrap .cont .center{
	flex-grow: 2 ;
	padding:0 2%;
	flex-basis: 400px;
}

#course .section.list .list_wrap .cont .center .name{
	font-size:18px ;
	text-align:left ;
	padding:20px 0 6px 0 ;
}

#course .section.list .list_wrap .cont .center .set{
	font-size:12px ;
	max-width:548px ;
	text-align:left ;
}

#course .section.list .list_wrap .cont .center .label_01{
    margin-top:10px ;
	font-size:14px ;
	height:22px ;
	border : #c8ae76 1px solid  ;
	border-radius: 11px ;
	margin-right:6px ;
}

#course .section.list .list_wrap .cont .center .label{
	height:auto ;
	display:flex ;
	font-weight:normal;
}

#course .section.list .list_wrap .cont .center .label .label_01 p{
	color:#c8ae76 ;text-align: center ;vertical-align: inherit ;
	width:auto ;
	padding:0 10px 2px 10px ;
	font-size:13px ;
	font-weight:normal;
	padding-bottom:2px
}

#course .section.list .list_wrap .cont .center .label_02{
    margin-top:10px ;
	font-size:13px ;
	height:22px ;
	border: #f70000 1px solid ;
	border-radius: 11px ;
	font-weight:normal;
	padding-bottom:2px
}

#course .section.list .list_wrap .cont .center .label_02 p{
	color:#f70000 ;
	text-align: center ;
	vertical-align: inherit ;
	padding:0 10px 2px 10px ;
	font-size:13px ;
}

#course .section.list .list_wrap .cont .center .price{
	color:#f33434 ;
	text-align:right ;
	padding-bottom:10px ;
	font-size:15px;
	font-weight:normal
}

#course .section.list .list_wrap .cont .center .price span{
	font-size:20px;
	font-weight:normal;
}

#course .section.list .list_wrap .cont .center  .price span.discount{
	font-size:11px ;
	padding-right:10px ;
	text-decoration:line-through ;
	color:#000 ;
}



#course .section.list .list_wrap .cont .right{
	padding:30px 14px 0 0 ; 
}

#course .section.list  a:link{
	text-decoration: none ;
}

#course .section.list .list_wrap .cont .right .code {
	font-size:10px ;
	color:#333 ;
	text-align: right ;
	padding-bottom:8px ;
}
#course .section.list .list_wrap .cont .right .cart_btn{
	display:block ;
	background:#8ec141 ;
	color: #fff ;
	font-size:20px ;
	height:40px ;
	width:158px ;
	border-radius: 2px ;
}

#course .section.list .list_wrap .cont .right .cart_btn p{
	line-height:0 ;
	padding:20px  10px 0 20px ;
	margin: auto ;
	display: block ;
	color:#fff  ;

}

@media screen and (max-width:644px) {
#course .section.list .list_wrap .cont{
	border:none ;
	padding-top:20px ;
}
#course .section.list .list_wrap .cont .center .price{
	text-align: left ;
	padding-bottom:0 ;
	}	
#course .section.list .list_wrap .spbtn{
	position:relative ;
	top:10px ;
	display: block ;
	width: 100% ;
	margin: auto ;
	padding:0 0 3% 0 ;
	border-bottom:1px solid #e5e5e5 ;
}
#course .section.list .list_wrap .code {
	font-size:12px ;
	color:#333 ;
	position:relative ;
	text-align:right ;
	width: 94% ;
	padding-bottom:8px;
}
#course .section.list .list_wrap .cart_btn{
	display:block ;
	background:#8ec141 ;
	color: #fff ;
	font-size:22px ;
	height:48px ;
	width:94% ;
	margin: auto ;
	margin-bottom: 20px;
	border-radius: 50px ;	
}

#course .section.list .list_wrap  .cart_btn p{
	line-height:0 ;
	padding:24px  0 0 0 ;
	margin: auto ;
	display: table ;
	color:#fff;
}
}	

/*QA*/
#course  .cp_actab {
position: relative ;
overflow: hidden ;
width: 100% ;
margin: 0 auto ;
color: #666666 ;
border: 1px dotted #ccc ;
border-bottom: none ;
}
#course  .cp_actab input {
position: absolute ;
z-index: -1 ;
opacity: 0 ;
}
#course  .cp_actab label {
font-weight: bold ;
line-height: 3 ;
position: relative ;
display: block ;
padding: 15px 37px 15px 80px;
cursor: pointer ;
margin: 0 0 1px 0 ;
background: #fff ;
text-align: left ;
font-size:16px ;
min-height: 72px ;
background: url(../../img/course/teiki_qa_bg01.png)no-repeat;

background-position: center left 10px ;
align-items: center ;
display: flex ;
line-height:1.3em ;
}



#course  .cp_actab label .icon_q{
	font-weight: bold ;
	color:#fff ;
	position:absolute ;
	left:22px ;
	letter-spacing:1px ;
}

#course .cp_actab-content .icon_a{
	font-weight: bold ;
	color:#fff ;
	letter-spacing:1px ;
	position:relative ;
	text-align:left ;
	float:left ;
	left:-27px ;
	top:24px ;
    display:block ;
	font-size:16px ;
}

#course  .cp_actab .cp_actab-content {
overflow: hidden ;
max-height: 0 ;
-webkit-transition: max-height 0.35s ;
transition: max-height 0.35s ;
color: #333333 ;
font-size:13px ;
/*width:90% ;*/
padding: 0 30px 0 50px ;
border-bottom: none ;
background: url(../../img/course/teiki_qa_bg02.png)no-repeat;
background-position: top 10px left 10px ;
display:block ;
align-items: center ;
}


#course  .cp_actab .cp_actab-content p {
margin: 1em ;overflow: hidden ;min-height:40px ;
}
/* :checked */
#course  .cp_actab input:checked ~ .cp_actab-content {
max-height: 20em ;
}
/* Icon */
#course  .cp_actab label::after {
line-height: 3 ;
position: absolute ;
top: 20% ;
right: 0 ;
display: block ;
width: 3em ;
height: 3em ;
-webkit-transition: all 0.35s ;
transition: all 0.35s ;
text-align: center ;
align-items: center ;

}
#course  .cp_actab input[type=checkbox] + label::after {
content: '+' ;
}
#course  .cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg) ;
}

#course .cp_actab.last{
	border-bottom: 1px dotted #ccc ;
}
#course  .cp_actab .cp_actab-content{
	position:relative ;
	top:1px ;
	border-top: 1px dotted #ccc ;}



/*お問いあわせ*/

#course  .section.contact {
	margin-top:40px ;
	border:#deebb1 4px solid ;
	padding:20px 34px ;
	max-width:720px ;
	
}
#course  .section.contact  dl{
	text-align:center ;
}
#course  .section.contact  dt{
	font-size:16px ;
}
#course  .section.contact  dd.tel{
	font-size:38px ;
	color:#b4d22b ;
}

#course  .section.contact  dd.tel span{
	font-size:20px ;
	color:#64655f ;
}
#course  .section.contact  dd.tel a:link,
#course  .section.contact  dd.tel a:visited{	
	text-decoration: none ;
		color:#b4d22b ;
}

#course  .section.contact  dd.time{
	font-size:14px ;
	color:#000000 ;
	margin-bottom:20px ;
}




@media screen and (max-width:644px) {
#course  {padding: 0 0 20px 0;}
#course  .section.contact {
		max-width:98% ;
		margin:2% ;
		margin:auto ;
		
	}
#course  .section.contact  dd.tel span{
	font-size:14px ;
}
#course  .section.contact  dd.tel{
	font-size:27px ;
	line-height:28px;
	white-space: nowrap;
}	

    #course  #merit_rakuten.block .cont .sup2{padding: 4px 0 20px 0}	
	
	
}
/*アンカーのずれ*/
@-webkit-keyframes modify{
      0% { padding-top: 200px; margin-top: -200px; }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 200px; margin-top: -200px; }
    100% { padding-top: 0; margin-top: 0; }
}

	#course  #list_atpeace:target,  #course  #list_dr:target {
    -webkit-animation: modify 0.1s;
    animation: modify 0.1s;
}


/*rest*/
h2, .mainSection-title {
	background-color:#fff ;
     padding: 0 ;
    border-top: none ;
	border-bottom: none ; }
#course  h2{border-top-color:none ;}
#course  dt{border-left-color:none ;}


#course   dt, dd {
 padding-left: none ;
 border-left-width: none ;
border-left-style: none ;
Margin-bottom:none ;
}

dt {	font-weight: none ;}

.l-container-wrap__body{
	padding-top: 0px;
}