@charset "UTF-8";
 .mod-intro .mod-intro-inner h1{
position:absolute;
top:53px;
left:36px;
}
.mod-intro .mod-intro-inner .figure{
position:absolute;
top:-7px;
right:36px;
}
.sec-inner{
position:relative;
margin:0 auto;
padding-top:50px;
padding-bottom:50px;
width:100%;
max-width:860px;
}
.sec-inner_end{
position:relative;
margin:0 auto;
padding-top:50px;
padding-bottom:50px;
width:100%;
max-width:930px;
}
.sec-inner img{
width:100%;
height:auto;
}
.sec1,.sec3,.sec5,.sec7{
background:#fff;
}
.sec2,.sec4,.sec6,.sec8{
background:#fff3f3;
}
.teach_bnr{
background-color:#fd6769;
}
.teach_bnr .sec-inner{
padding:30px 0;
}
@media (max-width:769px) {
.mod-intro-inner{
width:100%!important;
height:37.5vw!important;
background-position:right -25vw center;
background-size: auto 100%;
}
.sec-inner .caption{
margin:0 auto;
width:90%;
float:none;
}
.mod-intro .mod-intro-inner img{
width:100%;
}
.mod-intro .mod-intro-inner h1{ width:60vw;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.mod-intro .mod-intro-inner .figure{
top:0;
right:0;
width:100%;
}
.sec-inner{
padding:8vw 0;
width:90vw;
}
.sec-inner_end{
padding:8vw 0;
width:90vw;
}
.teach_bnr .sec-inner{
padding:6vw 0;
}
}
.sec-inner .answer{
margin:0;
padding:0;
}
.sec-inner .answer p{
font-size:14px;
line-height:21px;
color:#555;
text-align:left;
}
.sec-inner .question{
position:relative;
margin-bottom:18px;
padding-left:62px;
font-size:20px; line-height:50px;
font-weight:bold;
color:#ff6666;
}
.sec-inner .question::before{
content:'';
position:absolute;
width:50px;
height:50px;
top:0;
left:0;
background-repeat:no-repeat;
background-position:center;
background-size:cover;
z-index:1;
}
.sec-inner .question.icon_no1::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no1.png);
}
.sec-inner .question.icon_no2::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no2.png);
}
.sec-inner .question.icon_no3::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no3.png);
}
.sec-inner .question.icon_no4::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no4.png);
}
.sec-inner .question.icon_no5::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no5.png);
}
.sec-inner .question.icon_no6::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no6.png);
}
.sec-inner .question.icon_no7::before{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/icon_no7.png);
}
.sec-inner .caption1{
margin-left:auto;
width:536px;
}
.sec-inner .caption2{
margin-right:auto;
width:690px;
}
.sec-inner .caption3{
margin-left:auto;
width:536px;
}
.sec-inner .caption4{
margin-right:auto;
width:560px;
}
.sec-inner .caption5{
margin-left:auto;
width:615px;
}
.sec-inner .caption6{
margin-right:auto;
width:625px;
}
.sec-inner .caption7{
margin-left:auto;
width:536px;
}
.sec-inner .no1_figure{
position:absolute;
width:289px;
top:50px;
left:0;
z-index:1;
}
.sec-inner .no2_figure{
position:absolute;
width:135px;
top:65px;
right:0;
z-index:1;
}
.sec-inner .no3_figure{
position:absolute;
width:289px;
top:50px;
left:0;
z-index:1;
}
.sec-inner .no4_figure{
position:absolute;
width:268px;
top:50px;
right:0;
z-index:1;
}
.sec-inner .no5_figure{
position:absolute;
width:223px;
top:100px;
left:0;
z-index:1;
}
.sec-inner .no6_figure{
position:absolute;
width:227px;
top:78px;
right:0;
z-index:1;
}
.sec-inner .no7_figure{
position:absolute;
width:289px;
top:50px;
left:0;
z-index:1;
}
@media (max-width:769px) {
.sec-inner .answer p{
font-size:0.9rem;
line-height:1.6rem;
}
.sec-inner .question{
margin-bottom:3vw;
padding-left:10vw;
font-size:1rem;
line-height:8vw;
}
.sec-inner .question.sp_ttl_setting{
line-height:1.6rem;
}
.sec-inner .question::before{
width:8vw;
height:8vw;
}
.sec-inner .caption1{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption2{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption3{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption4{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption5{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption6{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .caption7{
margin:0 auto;
padding-bottom:8vw;
width:90vw;
}
.sec-inner .no1_figure{
position:relative;
margin:0 auto;
width:90vw;
top:0;
}
.sec-inner .no2_figure{
position:relative;
margin:0 auto;
width:35vw;
top:0;
}
.sec-inner .no3_figure{
position:relative;
margin:0 auto;
width:90vw;
top:0;
}
.sec-inner .no4_figure{
position:relative;
margin:0 auto;
width:90vw;
top:0;
}
.sec-inner .no5_figure{
position:relative;
margin:0 auto;
width:43vw;
top:0;
}
.sec-inner .no6_figure{
position:relative;
margin:0 auto;
width:50vw;
top:0;
right:0;
}
.sec-inner .no7_figure{
position:relative;
margin:0 auto;
width:90vw;
top:0;
}
}
.learn_end{
position:relative;
margin:0 auto;
width:100%;
border-radius:10px;
background-color:#fff;
}
.learn_end .innr{
position:relative;
padding:50px 60px;
}
.learn_end .learn_end_ttl{
position:relative;
display:table;
margin:0 auto 45px auto;
padding:0 5px;
text-align:center;
font-size:24px;
letter-spacing:1px;
font-weight:600;
}
.learn_end .learn_end_ttl span {
position:relative;
color:#ff6666;
z-index:2;
}
.learn_end .learn_end_ttl::after {
content:'';
position:absolute;
width:100%;
height:13px;
bottom:4px;
left:0;
background-color: #fff4c3;
z-index:1;
}
.learn_end .learn_end_detail{
margin-right:auto;
width:390px;
color:#555;
}
.learn_end_list{
display:block;
list-style:none;
}
.learn_end_list li{
position:relative;
margin-bottom:20px;
padding-left:20px;
vertical-align:top;
text-align:left;
font-size:19px;
line-height:30px;
font-weight:bold;
}
.learn_end_list .txt_dot::before{
content:'●';
position:absolute;
left:0;
top:0;
font-size:14px;
line-height:30px;
color:#ff6666;
z-index:1;
}
.learn_end_list li:last-child{
margin-bottom:0;
}
.learn_end_note{
margin-top:13px;
font-size:12px;
line-height:19px;
}
.learn_end .end_figure{
position:absolute;
width:380px;
top:124px;
right:60px;
z-index:1;
}
.learn_end .end_figure img{
width:100%;
height:auto;
}
@media (max-width:769px) {
.learn_end{
width:90vw;
border-radius:2vw;
}
.learn_end .innr{
padding:6vw 4vw;
}
.learn_end .learn_end_ttl{
margin:0 auto 4vw auto;
padding:0 1vw;
font-size:1rem;
letter-spacing:0;
}
.learn_end .learn_end_ttl::after {
height:1.6vw;
bottom:1vw;
}
.learn_end .learn_end_detail{
margin:0 auto;
width:80vw;
}
.learn_end_list li{
position:relative;
margin-bottom:2vw;
padding-left:4.7vw;
font-size:0.9rem;
line-height:1.5rem;
}
.learn_end_list .txt_dot::before{
font-size:0.8rem;
line-height:1.5rem;
}
.learn_end_note{
margin-top:4vw;
font-size:0.8rem;
line-height:1.4rem;
}
.learn_end .end_figure{
position:relative;
margin:0 auto;
padding-top:6vw;
width:80vw;
top:0;
right:0;
}
} .teach_bnr .btn-teach{
width:470px;
margin:0 auto;
cursor:pointer;
}
.teach_bnr .btn-teach a{
display:block;
width:470px;
height:90px;
cursor:pointer;
overflow:hidden;
font-size:0;
text-indent:100%;
white-space:nowrap;
outline:none;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/learn/link-btn.png) no-repeat 0 0;
}
.teach_bnr .btn-teach a:hover{
background-position:0 -90px;
}
@media (max-width:769px) {
.teach_bnr .btn-teach{
width:85vw;
}
.teach_bnr .btn-teach a{
width:85vw;
height:16.2766vw;
background-size:100% auto;
}
.teach_bnr .btn-teach a:hover{
background-position:0 0;
}
}