@charset "utf-8";
/* CSS Document */

:root {
    --teiki-color: #74b3cc;
    --bulk-color: #e39471;
}
    

.subsc_kyotu {
    margin: 0 auto;
    text-align: center;
    margin-top: 60px;
    color: #585757; 
    font-family: roboto, hiragino-kaku-gothic-pron, sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.3em;
}

.subsc_kyotu p,.subsc_kyotu dt,.subsc_kyotu dd{
    text-align: center;
    line-height: 1.5;
}

    
.subsc_kyotu #intro .comm_cont_1000px{
    margin: 60px auto 0;
}
    
.subsc_kyotu .comm_flex{
    align-items: stretch;
}    
    


.subsc_kyotu h3{
    color: #231815; 
    font-size: 38px;
    text-box:trim-both cap alphabetic;
} 
    
.subsc_kyotu h3 span{
    color: #585757;
    font-size: 30px; 
    line-height: 1;
    font-family: roboto, hiragino-kaku-gothic-pron, sans-serif!important;
}  
    
.subsc_kyotu h3 .span1{
    font-size: 20px; 
    margin: 40px auto 15px;
} 
    
.subsc_kyotu h4{
    font-size: 30px;
    margin-bottom: 40px;
}     
    
#subsc_bulk #main{
    position: relative;
    max-width: 100% !important;
    width: 100%!important;
} 

#subsc_bulk #main picture img{
    width: 100%;
    max-height: 700px;
}  

    
#subsc_bulk #main .comm_flex{
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 100%;
    margin: 0;
}
    
#subsc_bulk #main .comm_flex .title,#subsc_bulk #main .comm_flex .img{
    width: 47%;
} 
    
#subsc_bulk #main .comm_flex .title{
    letter-spacing: 0.8em;
}      
    
#subsc_bulk .teiki,#subsc_bulk .bluk{
    width: 47%;
    display: flex;
    flex-direction: column;
}  
    
.subsc_kyotu .teiki .btn,.subsc_kyotu .bluk .btn{
    color: #fff;
    background: var(--teiki-color) ;
    padding: 25px 0;
    text-box:trim-both cap alphabetic;
    border-radius: 15px;
    margin: 30px 0 40px;
    border-color:transparent;
    width: 100%;
}  
    
.subsc_kyotu .bluk .btn{
    background: var(--bulk-color) ;
}  

.subsc_kyotu #intro{
    width: 90%;
    max-width: 1000px;
}   
.subsc_kyotu #intro .box{
    border: 1px solid #898989;
    position: relative;
    padding: 50px 30px 40px;
    font-size: 30px;
    margin-top: 50px;
    box-sizing: border-box;
    text-box:trim-both cap alphabetic;
    box-shadow: 5px 5px 5px rgba(35, 24, 21,0.1);
    width: 47%;

}  
    
.subsc_kyotu #intro .box_ttl{
    position: absolute;
    top: -9%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    background: #b5b5b6;
    color: #fff;
    font-size: 14px;
    padding: 8px 15px;
    text-box:trim-both cap alphabetic;
    border-radius: 5px;
}       
    
.subsc_kyotu #intro .box span{
    font-size: 17px;
    margin-bottom: 15px;
    display: inline-block;
}  
    
.subsc_kyotu #intro .box .span1{
    font-size: 45px;
    margin-left: 5px;
}  
#subsc_bulk #course dl{
    margin: 0 auto;
    }

#subsc_bulk #course dt{
    font-size: 25px;
    color:var(--teiki-color) ; 
    border-bottom: var(--teiki-color) 1px solid;
    border-top: var(--teiki-color) 1px solid;
    padding: 15px 0;
    text-box:trim-both cap alphabetic;
    font-weight: bold;
    }
#subsc_bulk #course .bluk dt{
    color:var(--bulk-color) ; 
    border-bottom: var(--bulk-color) 1px solid;
    border-top: var(--bulk-color) 1px solid;
    }
    
#subsc_bulk #course dd{
    margin: 40px auto;
    font-weight: bold;
    }   


@media only screen and (max-width: 769px){
    
    .subsc_kyotu {
        margin-top: 0px;
        letter-spacing: 0.2em;
} 
    
    #subsc_bulk #main {
        margin: 0 auto !important;
}   
    #subsc_bulk .comm_flex {
        display: block;
    }   
    
    #subsc_bulk #main .comm_flex .title,#subsc_bulk #course .teiki,#subsc_bulk #course .bluk{
    width: 100%;
} 
    #subsc_bulk #main .comm_flex .img{
        width: 70%;
        margin: 0 auto;
    }
    .subsc_kyotu h3 {
    font-size: 30px;
    margin-bottom: 20px;
}
    .subsc_kyotu h3 span {
    font-size: 21px;
    margin-top: 10px;    
}
    .subsc_kyotu h3 .span1 {
    font-size: 16px;
    margin: 25px auto 10px;
}
    #subsc_bulk #main .comm_flex {
    top: 12%;
}

    #subsc_bulk #intro .comm_flex:first-child{
        display: flex;
    }
    .subsc_kyotu .teiki .btn, .subsc_kyotu .bluk .btn {
    padding: 15px 0;
    border-radius: 10px;
    margin: 20px 0 50px;
    font-weight: bold;
}
    
    .subsc_kyotu #intro .teiki .btn, .subsc_kyotu #intro .bluk .btn {
    margin: 20px 0 10px;
    
}    
    
    .subsc_kyotu .comm_cont_1000px {
    margin: 50px auto 0;
}
    #subsc_bulk .teiki, #subsc_bulk .bluk {
    width: 48%;
}
    #subsc_bulk #course .teiki, #subsc_bulk #course .bluk {
    margin-bottom: 20px;
    }
    .subsc_kyotu #intro .box {
    padding: 40px 20px 30px;
    font-size: 25px;
    margin-top: 40px;
    width: 100%;
}
    .subsc_kyotu #intro .box span {
    font-size: 15px;
}
    .subsc_kyotu #intro .box .span1 {
    font-size: 40px;
}
    .subsc_kyotu h4,#subsc_bulk #course dt {
    font-size: 21px;
}
    #subsc_bulk #course dd:last-child {
    margin: 0px auto;
}
    #subsc_bulk #course dd {
    font-size: 14px;
}
}



/* おまとめ・定期 */

#bulk #main,#teiki #main{
        background:#faece3; 
        padding: 30px 0 150px;
    }
#teiki #main{
        background:#eaf3f7; 
    }

#bulk #main .ttl,#teiki #main .ttl{
        color: #fff;
        font-size: 30px;
        background:  var(--bulk-color);
        display: inline-block;
        padding: 20px 50px;
        margin-top: 50px;
    }
#teiki #main .ttl{
        background:  var(--teiki-color);
    }


#teiki #intro .comm_flex{
    flex-wrap: wrap; 
    }

#bulk #intro .box_ttl,#teiki #intro .box_ttl{
    top: -4%;   
    }

#bulk #intro .text,#teiki #intro .text{
    text-align: left;
    width: 75%;
    font-size :25px;
    line-height: 1.5;    
    }

#bulk #intro .text dt,#teiki #intro .text dt{
    font-size :25px;
    line-height: 1.5; 
    text-align: left;
    }

#bulk #intro .text dd,#teiki #intro .text dd{
    font-size :15px;  
    margin: 20px auto 0;  
    text-align: left;    
    }
    
#bulk #intro .box img,#teiki #intro .box img{
    object-fit: contain;
    width: 20%;
    } 
#bulk #intro .box_ttl {
    background:  var(--bulk-color);
}

#teiki #intro .box_ttl {
    background:  var(--teiki-color);
}

#bulk #intro h4 span,#teiki #intro h4 span{
    font-size: 20px;
    margin-bottom: 30px;
    display: inline-block;    
    }
    
#teiki #intro .ttl{
    background: #eaf3f7; 
    font-size: 15px;
    padding: 20px 0;
    line-height: 1.4;
    }

#teiki #intro .ttl span{
    font-size: 20px;
    }


#teiki #lineup,#bulk #lineup{
    max-width: 800px;
}
    
#bulk #lineup h4,#teiki #lineup h4,#bulk #faq h4,#teiki #faq h4{
    font-size: 35px;
    font-weight: bold;
    color: #707070;
    }    
    
#bulk #lineup h4 span,#teiki #lineup h4 span,#bulk #faq h4 span,#teiki #faq h4 span{
    font-size: 18px;
    margin: 30px auto 0;
    display: inline-block;    
    }

#bulk #lineup h4 span.kome,#teiki #lineup h4 span.kome,#bulk #intro span.kome,#teiki #intro span.kome{
    font-size: 14px;
    margin: 0 auto; 
    color: #8a8482;
    font-weight: bold!important;
    }

#bulk #lineup ul,#teiki #lineup ul{
    display: flex;
    justify-content: space-between;
    align-content: stretch;
    flex-wrap: wrap;
    letter-spacing: 0.2em;
    } 

#bulk #lineup li,#teiki #lineup li{
    width: 45%;
    font-size: 18px;
    margin-top: 5%;
    } 

#bulk #lineup dl,#teiki #lineup dl{
    display: flex;
    flex-direction: column;
    } 

#bulk #lineup dt,#teiki #lineup dt{
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    box-sizing: border-box;
    flex-grow: 1;
    } 
#bulk #lineup dt span,#teiki #lineup dt span{
    font-size: 15px;
    color: #8a8482;
    display: inline-block;
    margin-top: 5px;
    font-weight: bold !important;
    }

#bulk #lineup dd,#teiki #lineup dd{
    font-size: 18px;
    font-weight: bold;
    text-align: left; 
    margin: 30px 0 0;
    } 

#bulk #lineup dd span,#teiki #lineup dd span{
    display: inline-block;
    font-size: 16px;
    font-weight: bold !important;
    } 

#bulk #lineup dd span.price1,#teiki #lineup dd span.price1{
    color:  var(--bulk-color);
    font-size: 20px;
    } 
#teiki #lineup dd span.price1{
    color:  var(--teiki-color);
    font-size: 20px;
    } 

#bulk #lineup dd span.price2,#teiki #lineup dd span.price2{
    font-size: 26px;
    }

#bulk #lineup dd.btn,#teiki #lineup dd.btn{
    width: 100%;
    color: #fff;
    background-color: #707070;
    text-align: center;
    padding: 15px 0;
    margin: 30px auto 0;
    border-color: transparent;
    }






@media only screen and (max-width: 769px){
#bulk #lineup h4 span.kome,#teiki #lineup h4 span.kome,#bulk #intro span.kome,#teiki #intro span.kome{
    font-size: 12px;
    }      
    
#bulk #main, #teiki #main {
    padding: 30px 0 100px;
}    
    
#bulk #intro h4, #teiki #intro h4 {
    font-size: 18px;
    }    
    
#bulk #intro h4 span, #teiki #intro h4 span {
    font-size: 15px;
    margin-bottom: 15px;
}    
    
#bulk #main .ttl, #teiki #main .ttl {
    color: #fff;
    font-size: 20px;
    display: inline-block;
    padding: 10px 20px;
    margin-top: 30px;
}    
    
#teiki #intro .ttl{
    font-size: 14px;
    padding: 20px 0;
    }

#teiki #intro .ttl span{
    font-size: 18px;
    }    
    
#bulk #intro .box,#teiki #intro .box {
    padding:30px 10px 20px;
    font-size: 25px;
    margin-top: 40px;
    width: 48%;
    display: flex;
    align-items: stretch;
}
    
#bulk #intro .box .comm_flex,#teiki #intro .box .comm_flex{
    display: flex;
    flex-direction: column;
}
#bulk #intro .box_ttl, #teiki #intro .box_ttl {
    top: -5%;
    width: 50%;
    font-size: 12px;
    padding: 8px 10px;
}    
    
#bulk #intro .text, #teiki #intro .text {
    text-align: center;
    width: 100%;
    font-size: 16px;
    line-height: 1.4;
}
    
#bulk #intro .text dt,#teiki #intro .text dt{
    font-size: 16px;
    line-height: 1.4;
    text-align: center;    
    }

#bulk #intro .text dd,#teiki #intro .text dd{
    font-size: 14px;
    margin: 15px auto; 
    }    

#bulk #intro .box img, #teiki #intro .box img {
    object-fit: contain;
    width: 35%;
    margin: 0 auto;
}
#bulk #lineup h4,#teiki #lineup h4,#bulk #faq h4,#teiki #faq h4 {
    font-size: 30px;
    font-weight: 400;
}  
#bulk #lineup h4 span, #teiki #lineup h4 span,#bulk #faq h4 span,#teiki #faq h4 span {
    margin: 20px auto 0;
    font-size: 16px;
    line-height: 1.4;
}    
    
#bulk #lineup li, #teiki #lineup li {
    width: 47%;
    font-size: 18px;
    letter-spacing: 1px;
} 
    
#bulk #lineup dt, #teiki #lineup dt {
    font-size: 14px;
    line-height: 1.3;
}    
#bulk #lineup dt span, #teiki #lineup dt span {
    font-size: 12px;
} 
#bulk #lineup dd, #teiki #lineup dd {
    font-size: 13px;
    margin: 20px 0 0;
}  
#bulk #lineup dd span, #teiki #lineup dd span {
    font-size: 13px;
}    

#bulk #lineup dd span.price1, #teiki #lineup dd span.price1 {
    font-size: 13px;
    margin-top: 5px;
}
#bulk #lineup dd span.price2, #teiki #lineup dd span.price2 {
    font-size: 15px;
}  
#bulk #lineup dd.btn, #teiki #lineup dd.btn {
    padding: 10px 0;
}  
    
  

}


/* FAQ */
#teiki #faq h4 {
    margin-bottom: 60px;
}

#faq .accordion .inner {
	display: none;
}
#faq .accordion p{
	cursor: pointer; 
	padding: 10px;
	font-size:14px;
    text-align: left;
}

#faq .accordion > li{
	margin-bottom:15px;
	padding:10px 20px;
	position:relative;
	background-color: #E9E9E9;
	font-family: hiragino-kaku-gothic-pron, sans-serif!important;
}
#faq .accordion > li:last-child{
    margin-bottom:0;
}
#faq .inner li{
	border-top: 1px dotted #7E7E7E;
	margin: 0 0 0 10px;
    padding: 20px 0 20px 14px;
	text-align: left;
}

#faq .accordion p:after {
	content:"＋";
	font-size:24px;
	right:22px;
	position:absolute;
	top:14px;
}

#faq .accordion p.active:after{
	content:"－";
}


#faq ul.inner dl dt{
	font-weight:bold;
	margin-bottom:10px;
	font-size:14px;
}

#faq ul.inner dl dd{
	font-size: 14px;
    text-align: left;
}

#faq .flow{
    width: 95%;
    display: flex;
    flex-direction: column;
}
#faq .flow p:nth-child(1){
    background-color: transparent;
    padding: 0;
}

#faq .flow-inner{
    background-color: #fff;
    line-height: 1.3;
    margin: 10px 0;
    padding: 10px 15px;
}
#faq .flow .lead{
    line-height: 1.3;
    margin-bottom: 10px;
}
#faq .flow span{
    display: block;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}
#faq .flow .arrow{ /* くの字の表示設定 */
  content: "";
  margin: auto;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 13px;    /* くの字を山なりに見た時、左側の長さ */
  height: 13px;   /* くの字を山なりに見た時、右側の長さ */
  border-top: 4px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
  border-right: 4px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
  transform: rotate(135deg);
    margin-bottom: 5px; /* くの字の向き */
}

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

	#faq{
	    margin-top:100px;
	}
	#faq .inner li{
	    margin: 0 auto;
        width: 90%;
        padding: 10px 0 0 12px;
	}
	#faq .accordion > li{
    	padding:10px 0;
    }
	#faq .accordion p{
		font-size:12px;
		padding: 10px 0 10px 0px;
        width: 90%;
        margin: 0 auto;
	}
	#faq .accordion p:after {
		right:10px;
		top:16px;
		font-size:18px;
	}
	#faq .question-inner h3 {
    	font-size: 2rem;
		margin-bottom: 20px;
		line-height: 30px;
	}
	#faq h3 span{
    	font-size: 1.4rem;
	}
    #faq ul.inner dl dd {
        font-size: 12px;
    }
    #faq .flow-inner{
        width: 88%;
    }
    #faq .flow .arrow{ 
    }
}