@charset "UTF-8";
  :root {
--detail1-color: #fc4c1e;
--detail10-color: #ba4c91;
--detail11-color: #0f867f;
--detail11-subcolor: #e7faf9;
}
a:focus,*:focus{outline:none;}
.whole{
font-family:"游ゴシック体",YuGothic,"游ゴシック","Yu Gothic","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック",Arial,verdana,sans-serif;
} .conts_anchor_links{
position: relative;
padding: 35px;
padding-bottom: 10px;
}
.anchor_links_list{
position: relative;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.anchor_links_list li{
position: relative;
display: inline-block;
margin-right: 12px;
width: auto;
}
.anchor_links_list li:last-child{
margin-right: 0;
}
.anchor_links_list a{
display: block;
position: relative;
padding-left: 30px;
padding-right: 45px;
height: 40px;
font-size: 1.1rem;
line-height: 36px;
font-weight: bold;
color: var( --detail1-color)!important;
text-decoration: none!important;
box-sizing: border-box;
border: 2px solid #fff;
border-radius: 100vh;
background-color: #fff;
transition: all .3s ease;
}
.anchor_links_list a::after{
content: '';
position: absolute;
width: 20px;
height: 20px;
top: 50%;
right: 0.8rem;
transform: translate(0,-50%);
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/detail_1/icon_anchor_arrw.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
}
.anchor_links_list a:hover{
color: #fff!important;
background-color: var( --detail1-color);
}
.anchor_links_list a:hover::after{
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/detail_1/icon_info_arrw.svg);
}
.conts_anchor_linkid{
position: absolute;
margin-top: -115px;
padding-top: 115px;
width: 0;
height: 0;
top: 0;
left: 0;
pointer-events: none;
}
@media screen and (max-width:768px){
.conts_anchor_links{
padding: 5vw;
}
.anchor_links_list{
display: block;
}
.anchor_links_list li{
margin-right: 0;
margin-bottom: 4vw;
width: 100%;
}
.anchor_links_list li:last-child{
margin-bottom: 0;
}
.anchor_links_list a{
padding-left: 5vw;
padding-right: 10vw;
width: 100%;
transition: none;
}
.anchor_links_list a:hover{
color: var( --detail1-color)!important;
background-color: #fff;
}
.anchor_links_list a:hover::after{
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/detail_1/icon_anchor_arrw.svg);
}
} .detail_main_ttl{
position: relative;
display: block;
padding-top: 10px;
font-family: "BIZ UDPGothic", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 4rem;
color: #fff;
line-height: 1!important;
}
[data-ruby] {
position: relative;
}
[data-ruby]::before {
content: attr(data-ruby);
position: absolute;
top: -1.5em;
left: 0;
right: 0;
margin: auto;
font-size: 0.8rem;
}
.kcdetail1 .mod-intro .detail_kv_ttl{
padding-bottom: 0!important;
}
@media screen and (max-width:768px){
.detail_main_ttl{
padding-top: 2vw;
font-size: 2.5rem;
}
[data-ruby]::before {
font-size: 0.6rem;
}
.kcdetail1 .mod-intro .detail_kv_note{
padding-bottom: 2vw!important;
}
} .kaze_column{
position: relative;
padding-top: 60px;
padding-bottom: 20px;
width: 100%;
}
.kaze_column .column_wrap {
position: relative;
margin: 0 auto;
text-align: center;
}
.kaze_column_ttl{
position: relative;
display: table;
margin: 0 auto;
font-size: 26px;
line-height: 1.6;
font-weight: 600;
text-align: center;
color: #00a0e9;
letter-spacing: 1px;
font-feature-settings: "palt";
}
.kaze_column_ttl::before {
content: '';
position: absolute;
width: 22px;
height: 35px;
top: 50%;
left: -40px;
transform: translate(0,-50%);
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_speech_left.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 22px 35px;
}
.kaze_column_ttl::after {
content: '';
position: absolute;
width: 22px;
height: 35px;
top: 50%;
right: -40px;
transform: translate(0,-50%);
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_speech_right.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 22px 35px;
} .column_item_list{
position: relative;
margin-top:50px;
overflow:hidden;
list-style: none;
display: flex;
flex-wrap: wrap;
color: #000;
}
.column_item_list.colist_type1{
justify-content: center;
}
.column_item_list.colist_type1 .labo-popitem-col{
margin-right: 0!important;
}
.column_item_list.colist_type2{
justify-content: center;
}
.column_item_list.colist_type2 .labo-popitem-col:nth-child(2){
margin-right: 0!important;
}
.column_item_list a,.column_item_list a:link,.column_item_list a:visited{
color: #000;
}
.labo-popitem-col{
position: relative;
padding: 0;
width:calc( 33.33333% - 33.33333px );
margin-right: 50px;
margin-bottom: 50px;
animation: tooltipShow 0.3s linear 0s;
display: block;
}
.labo-popitem-col:nth-child(3n){
margin-right: 0;
}
@keyframes tooltipShow {from{opacity:0;}to{opacity:1;}}
@media screen and (max-width:768px){
.kaze_column{
padding-top: 8vw;
padding-bottom: 8vw;
}
.kaze_column .column_wrap {
padding-right: 10px;
padding-left: 10px
}
.kaze_column_ttl {
font-size: 1rem;
}
.kaze_column_ttl::before {
width: 14px;
height: 22px;
left: -30px;
background-size: 14px 22px;
}
.kaze_column_ttl::after {
width: 14px;
height: 22px;
right: -30px;
background-size: 14px 22px;
}
.column_item_list{
margin-top: 6vw;
}
.labo-popitem-col{
width:calc( 50% - 10px );
margin-right: 20px;
margin-bottom: 20px;
}
.labo-popitem-col:nth-child(3n){
margin-right: 20px;
}
.labo-popitem-col:nth-child(2n){
margin-right: 0;
}
} .labo-article{
display:block;
background-repeat:no-repeat;
background-size:303.57143% auto;
position:relative;
padding-bottom:100%;
height:0;
}
.labo-article .hover,.labo-article>a{
position:absolute;
top:0;left:0;
bottom:0;
width:100%;
}
.labo-article>a{
display:block;
text-decoration:none;
color:#000;
text-align:center;
z-index:1;
-webkit-transition:color .3s ease-out;
transition:color .3s ease-out;
}
.labo-article>a:hover{color:#fff}
.labo-article>a:hover+.hover{opacity:1}
.labo-article .hover{
background-repeat:no-repeat;
opacity:0;
-webkit-transition:opacity .3s ease-out;
transition:opacity .3s ease-out;
}
.labo-article .lead{
font-size: 14px;
line-height: 1.4;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
-moz-font-feature-settings: "palt";
font-weight:inherit;
position:relative;
top:0;left:0;height:100%;
}
.labo-article .lead .lead-str{
display:block;
position:absolute;
top:50%;
width:100%;
-webkit-transform:translate(0, -50%);
-ms-transform:translate(0, -50%);
transform:translate(0, -50%);
}
.labo-article>a{
display:block;
padding-top:76.07143%;
font-size:1.6rem;
line-height:1.4375;
position:absolute;
}
.labo-article>a:after,.labo-article>a:before{
content: ' ';
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.labo-article>a:after{
display:block;width:13.21429%;
padding-top:15.35714%;
top:3.57143%;
right:3.57143%;
background-position:50% 50%;
}
.labo-article>a:before{display:none}
.new .labo-article>a:before{
display:block;
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/ico_new2.png);
width:20.35714%;
padding-top:11.07143%;
top:0;left:6.42857%;
background-position:50% top;
}
.labo-article .hover{background-size:303.57143% auto}
.labo-article .lead .line-s{font-size:.75em;letter-spacing:-.1em} .hkhjmnhkhjm .labo-article a:after{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_kgnavi1.svg);
}
.hkhjmnhkhjm .labo-article.article-00,.hkhjmnhkhjm .labo-article.article-01,
.hkhjmnhkhjm .labo-article.article-02,.hkhjmnhkhjm .labo-article.article-03,
.hkhjmnhkhjm .labo-article.article-04,.hkhjmnhkhjm .labo-article.article-06{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hikihajime_no_hikihajime/img/top_item.jpg);
}
.hkhjmnhkhjm .labo-article.article-00 .hover,
.hkhjmnhkhjm .labo-article.article-01 .hover,
.hkhjmnhkhjm .labo-article.article-02 .hover,
.hkhjmnhkhjm .labo-article.article-03 .hover,
.hkhjmnhkhjm .labo-article.article-04 .hover,
.hkhjmnhkhjm .labo-article.article-06 .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hikihajime_no_hikihajime/img/top_item_o.jpg);
}
.hkhjmnhkhjm .labo-article.article-05,
.hkhjmnhkhjm .labo-article.article-07,
.hkhjmnhkhjm .labo-article.article-08{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hikihajime_no_hikihajime/img/top_item2.jpg);
}
.hkhjmnhkhjm .labo-article.article-05 .hover,
.hkhjmnhkhjm .labo-article.article-07 .hover,
.hkhjmnhkhjm .labo-article.article-08 .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hikihajime_no_hikihajime/img/top_item2_o.jpg);
}
.hkhjmnhkhjm .labo-article.article-00,.hkhjmnhkhjm .labo-article.article-00 .hover{background-position:0 0}
.hkhjmnhkhjm .labo-article.article-01,.hkhjmnhkhjm .labo-article.article-01 .hover{background-position:50% 0}
.hkhjmnhkhjm .labo-article.article-02,.hkhjmnhkhjm .labo-article.article-02 .hover{background-position:0 50%}
.hkhjmnhkhjm .labo-article.article-03,.hkhjmnhkhjm .labo-article.article-03 .hover{background-position:50% 50%}
.hkhjmnhkhjm .labo-article.article-04,.hkhjmnhkhjm .labo-article.article-04 .hover{background-position:100% 0}
.hkhjmnhkhjm .labo-article.article-05,.hkhjmnhkhjm .labo-article.article-05 .hover{background-position:0 50%}
.hkhjmnhkhjm .labo-article.article-06,.hkhjmnhkhjm .labo-article.article-06 .hover{background-position:0 100%}
.hkhjmnhkhjm .labo-article.article-07,.hkhjmnhkhjm .labo-article.article-07 .hover{background-position:0 0}
.hkhjmnhkhjm .labo-article.article-08,.hkhjmnhkhjm .labo-article.article-08 .hover{background-position:100% 0} .sktn .labo-article a:after{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_kgnavi2.svg); }
.sktn .labo-article.article-00,
.sktn .labo-article.article-01,
.sktn .labo-article.article-02,
.sktn .labo-article.article-03,
.sktn .labo-article.article-04,
.sktn .labo-article.article-05{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/sekitan/img/top_item.jpg)}
.sktn .labo-article.article-00 .hover,
.sktn .labo-article.article-01 .hover,
.sktn .labo-article.article-02 .hover,
.sktn .labo-article.article-03 .hover,
.sktn .labo-article.article-04 .hover,
.sktn .labo-article.article-05 .hover{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/sekitan/img/top_item_o.jpg)}
.sktn .labo-article.article-00,.sktn .labo-article.article-00 .hover{background-position:100% 0}
.sktn .labo-article.article-01,.sktn .labo-article.article-01 .hover{background-position:0 50%}
.sktn .labo-article.article-02,.sktn .labo-article.article-02 .hover{background-position:50% 50%}
.sktn .labo-article.article-03,.sktn .labo-article.article-03 .hover{background-position:100% 100%}
.sktn .labo-article.article-04,.sktn .labo-article.article-04 .hover{background-position:0 0}
.sktn .labo-article.article-05,.sktn .labo-article.article-05 .hover{background-position:50% 0}
.sktn .labo-article.article-06{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_throat_off.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-06 .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_throat_on.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-throat2{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_throat2_off.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-throat2 .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_throat2_on.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-sumcold{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_sumcold_off.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-sumcold .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_sumcold_on.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hkhjmnhkhjm .labo-article.article_coldresist{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_coldresist_off.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hkhjmnhkhjm .labo-article.article_coldresist .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_coldresist_on.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hkhjmnhkhjm .labo-article.article_kakkontou3{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_kakkontou3_off.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.hkhjmnhkhjm .labo-article.article_kakkontou3 .hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_kakkontou3_on.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.sktn .labo-article.article-09{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_slightfever_off.png);
background-size: 100% auto;
}
.sktn .labo-article.article-09:hover{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/kazelab_thb_slightfever_on.png);
} .hnmz .labo-article a:after{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_kgnavi3.svg); }
.hnmz .labo-article.article-00,.hnmz .labo-article.article-01,
.hnmz .labo-article.article-02,.hnmz .labo-article.article-03,
.hnmz .labo-article.article-04,.hnmz .labo-article.article-05{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hanamizu/img/top_item.jpg?v=20240110)}
.hnmz .labo-article.article-00 .hover,.hnmz .labo-article.article-01 .hover,
.hnmz .labo-article.article-02 .hover,.hnmz .labo-article.article-03 .hover,
.hnmz .labo-article.article-04 .hover,.hnmz .labo-article.article-05 .hover{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/hanamizu/img/top_item_o.jpg)}
.hnmz .labo-article.article-00,.hnmz .labo-article.article-00 .hover{background-position:50% 50%}
.hnmz .labo-article.article-01,.hnmz .labo-article.article-01 .hover{background-position:100% 50%}
.hnmz .labo-article.article-02,.hnmz .labo-article.article-02 .hover{background-position:0 100%}
.hnmz .labo-article.article-03,.hnmz .labo-article.article-03 .hover{background-position:100% 100%}
.hnmz .labo-article.article-04,.hnmz .labo-article.article-04 .hover{background-position:0 0}
.hnmz .labo-article.article-05,.hnmz .labo-article.article-05 .hover{background-position:50% 0} .ichkz .labo-article a:after{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_kgnavi4.svg); }
.ichkz .labo-article.article-00,.ichkz .labo-article.article-01,
.ichkz .labo-article.article-02,.ichkz .labo-article.article-03{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/ichoukaze/img/top_item.jpg)}
.ichkz .labo-article.article-00 .hover,.ichkz .labo-article.article-01 .hover,
.ichkz .labo-article.article-02 .hover,.ichkz .labo-article.article-03 .hover{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/ichoukaze/img/top_item_o.jpg)}
.ichkz .labo-article.article-00,.ichkz .labo-article.article-00 .hover{background-position:0 0}
.ichkz .labo-article.article-01,.ichkz .labo-article.article-01 .hover{background-position:50% 0}
.ichkz .labo-article.article-02,.ichkz .labo-article.article-02 .hover{background-position:100% 0}
.ichkz .labo-article.article-03,.ichkz .labo-article.article-03 .hover{background-position:0 100%} .inflenz .labo-article a:after{
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/kazelab/img/icon_kgnavi5.svg); }
.inflenz .labo-article.article-00,.inflenz .labo-article.article-01,
.inflenz .labo-article.article-02,.inflenz .labo-article.article-03{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/influenza/img/top_item.jpg)}
.inflenz .labo-article.article-00 .hover,.inflenz .labo-article.article-01 .hover,
.inflenz .labo-article.article-02 .hover,.inflenz .labo-article.article-03 .hover{background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/influenza/img/top_item_o.jpg)}
.inflenz .labo-article.article-00,.inflenz .labo-article.article-00 .hover{background-position:0 0}
.inflenz .labo-article.article-01,.inflenz .labo-article.article-01 .hover{background-position:50% 0}
.inflenz .labo-article.article-02,.inflenz .labo-article.article-02 .hover{background-position:100% 0}
@media screen and (max-width:768px){
.labo-article .lead{
font-size: 0.6rem;
line-height: 1.4;
}
} .selfmedicationtax{
position:relative;
display:flex;
align-items:center;
justify-content: center;
font-size:10px;
text-align:left;
color:#fff;
z-index:2;
}
.selfmedicationtax img{
width: 100%;
height: auto;
}
.icon_selfmedicationtax{
padding-right:5px;
width:53px;
}
.selfmedicationtax_txt{
padding-top:2px;
font-feature-settings:"palt";
font-weight:bold;
}
.selfmedicationtax_txt a{
color:#1c4295!important;
}
.selfmedicationtax_txt.link_white a{
color:#fff!important;
}
@media screen and (max-width:769px){
.selfmedicationtax{
bottom:0;
left:50%;
transform: scale(0.6);
width:70vw;
margin-left: -35vw;
}
.icon_selfmedicationtax{
width:10vw;
}
.selfmedicationtax_txt{
padding-top:0;
line-height:1.4!important;
}
} .qa_sect{
position:relative;
padding-bottom:50px;
background:#fff;
}
.qa_sect .qa-wrap{
position:relative;
padding:55px 35px 0;
text-align: center;
}
.qa_sect .qa_conts{
position:relative;
margin:0 auto;
padding-top:25px;
width:100%;
max-width:850px;
font-feature-settings:"palt";
}
@media (max-width:769px) {
.qa_sect {
padding-bottom:8vw;
}
.qa_sect .qa-wrap{
padding:8vw 5vw 0;
}
.qa_sect .qa_conts{
padding-top:3vw;
}
}
.qa_sect .qa_box{
position:relative;
margin-bottom:20px;
text-align:left;
border-radius:10px;
box-sizing:border-box;
border:1px solid #fff;
overflow:hidden;
cursor:pointer;
transition:0.3s;
}
.qa_sect .qa_box_q{
position:relative;
padding:10px;
padding-left:60px;
padding-right:50px;
font-size:20px;
font-weight:bold;
color:#555;
}
.qa_sect .qa_box_a{
display:none;
position:relative;
padding:10px;
padding-left:60px;
border-top:1px solid #fff;
}
.qa_sect .qa_box_a .qa_box_a_txt{
font-size:17px;
line-height:1.8;
font-weight:normal;
color:#000;
} .qa_sect .qa_box_q::before{
content:'Q';
position:absolute;
width:35px;
height:35px;
top:7px;
left:10px;
text-align:center;
font-size:22px;
line-height:35px;
font-weight:bold;
color:#fff;
border-radius:10px;
} .qa_sect .qa_box_a::before{
content:'A';
position:absolute;
width:35px;
height:35px;
top:7px;
left:10px;
text-align:center;
font-size:22px;
line-height:33px;
font-weight:bold;
color:#60ad5d;
border-radius:10px;
box-sizing:border-box;
border:1px solid #60ad5d;
background-color:#fff;
} .qa_sect .qa_box::before,.qa_sect .qa_box::after{
position:absolute;
top:23px;
right:20px;
content: '';
display: inline-block;
width:20px;
height:20px;
border-top:2px solid #fff;
}
.qa_sect .qa_box:after {
top:13px;
right:30px;
transform:rotate(90deg);
}
.qa_sect .qa_box.qa_active:after{
opacity:0;
} .qa_sect .qa_clr1 .qa_box,
.qa_sect .qa_clr1 .qa_box::before,
.qa_sect .qa_clr1 .qa_box::after{
border-color:#ef4d17;
}
.qa_sect .qa_clr1 .qa_box:hover{
box-shadow:0 0 0 2px #ef4d17;
}
.qa_sect .qa_clr1 .qa_box_a{
border-color:#ef4d17;
background-color:rgba(239,77,23,0.05);
}
.qa_sect .qa_clr1 .qa_box_q::before{
background-color:#ef4d17;
} .qa_sect .qa_clr2 .qa_box,
.qa_sect .qa_clr2 .qa_box::before,
.qa_sect .qa_clr2 .qa_box::after{
border-color:#22bcfb;
}
.qa_sect .qa_clr2 .qa_box:hover{
box-shadow:0 0 0 2px #22bcfb;
}
.qa_sect .qa_clr2 .qa_box_a{
border-color:#22bcfb;
background-color:rgba(34,188,251,0.05);
}
.qa_sect .qa_clr2 .qa_box_q::before{
background-color:#22bcfb;
} .qa_sect .qa_clr3 .qa_box,
.qa_sect .qa_clr3 .qa_box::before,
.qa_sect .qa_clr3 .qa_box::after{
border-color:#1cb67e;
}
.qa_sect .qa_clr3 .qa_box:hover{
box-shadow:0 0 0 2px #1cb67e;
}
.qa_sect .qa_clr3 .qa_box_a{
border-color:#1cb67e;
background-color:rgba(28,182,126,0.05);
}
.qa_sect .qa_clr3 .qa_box_q::before{
background-color:#1cb67e;
} .qa_sect .qa_clr4 .qa_box,
.qa_sect .qa_clr4 .qa_box::before,
.qa_sect .qa_clr4 .qa_box::after{
border-color:#a01ed1;
}
.qa_sect .qa_clr4 .qa_box:hover{
box-shadow:0 0 0 2px #a01ed1;
}
.qa_sect .qa_clr4 .qa_box_a{
border-color:#a01ed1;
background-color:rgba(160,30,209,0.05);
}
.qa_sect .qa_clr4 .qa_box_q::before{
background-color:#a01ed1;
} .qa_sect .qa_clr5 .qa_box,
.qa_sect .qa_clr5 .qa_box::before,
.qa_sect .qa_clr5 .qa_box::after{
border-color:#ce9b28;
}
.qa_sect .qa_clr5 .qa_box:hover{
box-shadow:0 0 0 2px #ce9b28;
}
.qa_sect .qa_clr5 .qa_box_a{
border-color:#ce9b28;
background-color:rgba(206,155,40,0.05);
}
.qa_sect .qa_clr5 .qa_box_q::before{
background-color:#ce9b28;
} .qa_sect .qa_clr6 .qa_box,
.qa_sect .qa_clr6 .qa_box::before,
.qa_sect .qa_clr6 .qa_box::after{
border-color:#99c726;
}
.qa_sect .qa_clr6 .qa_box:hover{
box-shadow:0 0 0 2px #99c726;
}
.qa_sect .qa_clr6 .qa_box_a{
border-color:#99c726;
background-color:rgba(153,199,38,0.05);
}
.qa_sect .qa_clr6 .qa_box_q::before{
background-color:#99c726;
} .qa_sect .qa_clr7 .qa_box,
.qa_sect .qa_clr7 .qa_box::before,
.qa_sect .qa_clr7 .qa_box::after{
border-color:#0e64c2;
}
.qa_sect .qa_clr7 .qa_box:hover{
box-shadow:0 0 0 2px #0e64c2;
}
.qa_sect .qa_clr7 .qa_box_a{
border-color:#0e64c2;
background-color:rgba(14,100,194,0.05);
}
.qa_sect .qa_clr7 .qa_box_q::before{
background-color:#0e64c2;
} .qa_sect .qa_clr8 .qa_box,
.qa_sect .qa_clr8 .qa_box::before,
.qa_sect .qa_clr8 .qa_box::after{
border-color:#e0254a;
}
.qa_sect .qa_clr8 .qa_box:hover{
box-shadow:0 0 0 2px #e0254a;
}
.qa_sect .qa_clr8 .qa_box_a{
border-color:#e0254a;
background-color:rgba(224,37,74,0.05);
}
.qa_sect .qa_clr8 .qa_box_q::before{
background-color:#e0254a;
} .qa_sect .qa_clr9 .qa_box,
.qa_sect .qa_clr9 .qa_box::before,
.qa_sect .qa_clr9 .qa_box::after{
border-color:#1db11d;
}
.qa_sect .qa_clr9 .qa_box:hover{
box-shadow:0 0 0 2px #1db11d;
}
.qa_sect .qa_clr9 .qa_box_a{
border-color:#1db11d;
background-color:rgba(29,177,29,0.05);
}
.qa_sect .qa_clr9 .qa_box_q::before{
background-color:#1db11d;
} .qa_sect .qa_clr10 .qa_box,
.qa_sect .qa_clr10 .qa_box::before,
.qa_sect .qa_clr10 .qa_box::after{
border-color:#ba4c91;
}
.qa_sect .qa_clr10 .qa_box:hover{
box-shadow:0 0 0 2px #ba4c91;
}
.qa_sect .qa_clr10 .qa_box_a{
border-color:#ba4c91;
background-color:rgba(186,76,145,0.05);
}
.qa_sect .qa_clr10 .qa_box_q::before{
background-color:#ba4c91;
} .qa_sect .qa_clr11 .qa_box,
.qa_sect .qa_clr11 .qa_box::before,
.qa_sect .qa_clr11 .qa_box::after{
border-color: var(--detail11-color);
}
.qa_sect .qa_clr11 .qa_box:hover{
box-shadow:0 0 0 2px var(--detail11-color);
}
.qa_sect .qa_clr11 .qa_box_a{
border-color: var(--detail11-color);
background-color:rgba(15,134,127,0.05);
}
.qa_sect .qa_clr11 .qa_box_q::before{
background-color: var(--detail11-color);
}
@media (max-width:480px) { .qa_sect .qa_box{
margin-bottom:5vw;
border-radius:10px;
}
.qa_sect .qa_box_q{
padding:2vw;
padding-left:11vw;
padding-right:9vw;
font-size:0.95rem;
}
.qa_sect .qa_box_a{
padding:2vw;
padding-left:12vw;
}
.qa_sect .qa_box_a .qa_box_a_txt{
font-size:0.9rem;
line-height:1.8;
} .qa_sect .qa_box_q::before{
width:7vw;
height:7vw;
top:2vw;
left:2vw;
font-size:0.95rem;
line-height:7vw;
border-radius:10px;
} .qa_sect .qa_box_a::before{
width:7vw;
height:7vw;
top:2vw;
left:2vw;
font-size:0.95rem;
line-height:6.7vw;
border-radius:10px;
}
.qa_sect .qa_box::before,.qa_sect .qa_box::after{
top:4vw;
right:2.2vw;
width:14px;
height:14px;
}
.qa_sect .qa_box:after {
top:2vw;
right:4vw;
}
.qa_sect .qa_box:hover,
.qa_sect .qa_clr1 .qa_box:hover,
.qa_sect .qa_clr2 .qa_box:hover,
.qa_sect .qa_clr3 .qa_box:hover{
box-shadow:none;
}
}  .mod-intro-logo{
margin: 0;padding: 0;
width: 360px;
}
.mod-intro img{
width: 100%;
height: auto;
vertical-align: top;
}
.mod-intro .detail_kv_main{
margin-left:215px;
padding-top:33px;
text-align:center;
width:300px;
}
.mod-intro .detail_kv_ttl{
padding-bottom:20px;
text-align: center;
font-feature-settings:"palt";
}
.mod-intro .detail_kv_lead{
display: block;
margin: 0 auto;
padding: 0;
font-size: 19px;
line-height: 1.3;
font-weight: 600;
color: #ffe193;
text-align: center;
}
.mod-intro .detail_kv_name{
display: block;
margin: 0 auto;
padding-top: 10px;
width:300px;
}
.mod-intro .detail_kv_prdnm{
display: block;
padding-top: 10px;
width:300px;
}
.mod-intro .detail_kv_note{
margin: 0 auto;
padding-bottom: 10px;
width: 79px;
font-size: 0;
}
.mod-intro .detail_kv_pkg{
position:absolute;
width:146px;
top:19px;
left:50%;
margin-left:45px;
z-index:2;
}
.mod-intro .detail_kv_pkg img{
width: 100%;
height: auto;
}
.mod-intro .detail_kv_fig{
position:absolute;
width:300px;
height:auto;
bottom:0;
right:122px;
z-index:1;
}
.mod-intro .detail_kv_main.selfmdtax_add{
padding-top:20px;
}
@media (max-width:769px) {
.mod-intro .mod-intro-inner{
width:100%!important;
height:38vw!important;
background-position:right -10vw center;
background-size: auto 100%;
}
.mod-intro .mod-intro-inner img{
width:100%;
height: auto;
}
.mod-intro .detail_kv_main{
margin-left:0;
padding-top:4vw;
width:45vw;
}
.mod-intro .detail_kv_ttl{
padding-bottom:3vw;
}
.mod-intro .detail_kv_lead{
font-size:0.7rem;
}
.mod-intro .detail_kv_name{
padding-top:2vw;
width:40vw;
}
.mod-intro .detail_kv_prdnm{
padding-bottom:2vw;
width:40vw;
}
.mod-intro .detail_kv_note{
width:11vw;
}
.mod-intro .detail_kv_pkg{
width:20vw;
top:50%;
left:50%;
margin-left:8vw;
transform:translate(-50%,-50%);
}
.mod-intro .detail_kv_fig{
width:40vw;
right:2vw;
} .mod-intro .detail_kv_main.selfmdtax_add{
padding-top:3vw;
width:48vw;
}
.mod-intro .detail_kv_main.selfmdtax_add .detail_kv_ttl{
padding-bottom: 3vw
} .mod-intro .detail_kv_main.selfmdtax_add2{
padding-top:5vw;
width:45vw;
}
.mod-intro .detail_kv_main.selfmdtax_add2 .detail_kv_ttl{
padding-bottom:2vw
}
.mod-intro .detail_kv_main.selfmdtax_add2 .detail_kv_prdnm{
padding-bottom:2vw;
}
}
.body-sec .sec-inner{
width:950px;
margin:0 auto;
}  .symptoms_main{
position: relative;
width: 100%;
background-color: #fff4c3;
overflow: hidden;
}
.symptoms_main img{
width: 100%;
height: auto;
}
.symptoms_main_innr{
position: relative;
margin: 0 auto;
padding: 40px 0;
width: 100%;
max-width: 950px;
}
.symptoms_board{
position: relative;
margin: 0 auto;
padding: 20px 35px;
width: 440px;
background-color: #fff;
border-radius: 15px;
box-sizing: border-box;
box-shadow: 0 0 0 10px #ededed;
overflow: hidden;
}
.symptoms_board_ttl{
position: relative;
display: table;
margin: 0 auto;
margin-bottom: 25px;
text-align: center;
font-size: 22px;
line-height: 1.4;
font-weight: bold;
border-bottom: 2px solid #555;
}
.symptoms_board_txt{
position: relative;
padding-bottom: 15px;
font-size: 19px;
}
.symptoms_board_txt + .symptoms_board_txt{
padding-top: 15px;
padding-bottom: 0;
border-top: 1px dotted #555;
}
.symptoms_board_check{
position: relative;
padding-left: 30px;
font-weight: bold;
}
.symptoms_board_check::before{
content: '';
position: absolute;
width: 19px;
height: 19px;
top: 4px;
left: 0;
border-radius: 4px;
box-sizing: border-box;
border: 2px solid #333;
}
.symptoms_main_illust{
position: absolute;
bottom: -10px;
left: 50%;
margin-left: 250px;
pointer-events: none;
}
@media screen and (max-width:768px){
.symptoms_main_innr{
padding: 8vw 0;
}
.symptoms_board{
padding: 15px;
width: 87.5vw;
border-radius: 10px;
box-shadow: 0 0 0 7px #ededed;
}
.symptoms_board_ttl{
margin-bottom: 15px;
font-size: 1rem;
line-height: 1.2;
}
.symptoms_board_txt{
padding-bottom: 10px;
font-size: 0.9rem;
}
.symptoms_board_txt + .symptoms_board_txt{
padding-top: 10px;
}
.symptoms_board_check{
padding-left: 25px;
}
.symptoms_board_check::before{
width: 16px;
height: 16px;
top: 2px;
border-radius: 3px;
border: 2px solid #333;
}
.symptoms_main_illust{
margin-left: 30vw;
width: 22vw!important;
}
} .mechanism_main{
position: relative;
width: 100%;
background-color: #ededed;
}
.mechanism_main img{
width: 100%;
height: auto;
}
.mechanism_main_innr{
position: relative;
margin: 0 auto;
padding: 40px 0;
padding-bottom: 45px;
width: 100%;
max-width: 950px;
}
.mechanism_main_ttl{
position: relative;
display: table;
margin: 0 auto;
margin-bottom: 25px;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 1;
}
.mechanism_main_ttl::before{
content: '';
position: absolute;
width: 40px;
height: 8px;
top: 50%;
left: -54px;
transform: translate(0,-50%);
background-repeat: no-repeat;
background-position: center;
background-size: 40px 8px;
}
.mechanism_main_ttl::after {
content: '';
position: absolute;
width: 40px;
height: 8px;
top: 50%;
right: -54px;
transform: translate(0,-50%);
background-repeat: no-repeat;
background-position: center;
background-size: 40px 8px;
}
.mechanism_list{
position: relative;
padding: 0 35px;
display: flex;
}
.mechanism_board{
position: relative;
padding: 25px;
padding-left: 80px;
width: calc( 50% - 18px );
border-radius: 15px;
background-color: #fff;
}
.mechanism_board + .mechanism_board{
margin-left: 36px;
}
.mechanism_board::before{
content: '';
position: absolute;
width: 33px;
height: 33px;
top: 30px;
left: 24px;
border-radius: 4px;
box-sizing: border-box;
border: 2px solid #333;
}
.mechanism_board::after {
content: "";
display: block; 
position: absolute;
height: 10px;
width: 17px;
transform: rotate(-45deg);
top: 35px;
left: 29px;
border-bottom: 6px solid #333;
border-left: 6px solid #333;
}
.mechanism_board_txt{
position: relative;
font-size: 18px;
font-weight: bold;
}
@media screen and (max-width:768px){
.mechanism_main_innr{
padding: 8vw 0;
}
.mechanism_main_ttl{
margin-bottom: 5vw;
font-size: 1rem;
}
.mechanism_main_ttl::before{
width: 30px;
height: 6px;
left: -40px;
background-size: 30px 6px;
}
.mechanism_main_ttl::after {
width: 30px;
height: 6px;
right: -40px;
background-size: 30px 6px;
}
.mechanism_list{
padding: 0 5vw;
display: block;
}
.mechanism_board{
padding: 15px;
padding-left: 50px;
width: calc( 100% - 65px );
border-radius: 10px;
}
.mechanism_board + .mechanism_board{
margin-left: 0;
margin-top: 5vw;
}
.mechanism_board::before{
width: 20px;
height: 20px;
top: 18px;
left: 18px;
border-radius: 4px;
border: 2px solid #333;
}
.mechanism_board::after {
height: 5px;
width: 8px;
top: 22px;
left: 22px;
border-bottom: 4px solid #333;
border-left: 4px solid #333;
}
.mechanism_board_txt{
font-size: 0.9rem;
}
} .effect_list{
position: relative;
margin-bottom: 40px;
padding: 25px;
color: #555;
border-radius: 10px;
background-color: #fff;
display: flex;
justify-content: center;
}
.effect_list_div{
position: relative;
width: calc( 50% - 25px );
}
.effect_list_div + .effect_list_div{
margin-left: 25px;
padding-left: 25px;
border-left: 1px dotted #ddd;
}
.effect_list_ttl{
position: relative;
margin-bottom: 18px;
padding-left: 24px;
font-size: 18px;
font-weight: bold;
}
.effect_list_ttl::before{
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 0;
transform: translate(0,-50%);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.effect_list_txt{
font-size: 16px;
}
@media screen and (max-width:768px){
.effect_list{
margin-bottom: 40px;
padding: 20px;
display: block;
}
.effect_list_div{
width: 100%;
}
.effect_list_div + .effect_list_div{
margin-left: 0;
padding-left: 0;
margin-top: 15px;
padding-top: 15px;
border-left: none;
border-top: 1px dotted #ddd;
}
.effect_list_ttl{
position: relative;
margin-bottom: 6px;
padding-left: 22px;
font-size: 0.9rem;
}
.effect_list_ttl::before{
width: 16px;
height: 16px;
}
.effect_list_txt{
font-size: 0.8rem;
}
}  .sec1{
padding:55px 0 60px 0;
background:#f9f9f9;
}
.sec1:before,.sec1:after{content:"";display:table}
.sec1:after{clear:both}
.detail_title{
position:relative;
display:table;
margin:0 auto 22px auto;
padding:0 5px;
text-align:center;
font-size:26px;
font-weight:600;
z-index:2;
}
.detail_title span{
position:relative;
z-index:2;
}
.detail_title::after{
content:'';
position:absolute;
width:100%;
height:13px;
bottom:4px;
left:0;
z-index:1;
}
.detail_title.ttl_type1 span{ color:#fc4c1e;}
.detail_title.ttl_type1::after{ background-color:#fff4c3;}
.detail_title.ttl_type2 span{ color:#22bcfb;}
.detail_title.ttl_type2::after{ background-color:#fff4c3;}
.detail_title.ttl_type3 span{ color:#1cb67e;}
.detail_title.ttl_type3::after{ background-color:#fff4c3;}
.detail_title.ttl_type4 span{ color:#a01ed1;}
.detail_title.ttl_type4::after{ background-color:#fff4c3;}
.detail_title.ttl_type5 span{ color:#ce9b28;}
.detail_title.ttl_type5::after{ background-color:#fff4c3;}
.detail_title.ttl_type6 span{ color:#99c726;}
.detail_title.ttl_type6::after{ background-color:#fff4c3;}
.detail_title.ttl_type7 span{ color:#0e64c2;}
.detail_title.ttl_type7::after{ background-color:#fff4c3;}
.detail_title.ttl_type8 span{ color:#e0254a;}
.detail_title.ttl_type8::after{ background-color:#fff4c3;}
.detail_title.ttl_type9 span{ color:#1db11d;}
.detail_title.ttl_type9::after{ background-color:#fff4c3;}
.detail_title.ttl_type10 span{ color:#ba4c91;}
.detail_title.ttl_type10::after{ background-color:#fff4c3;}
.detail_title.ttl_type11 span{ color:#0f867f;}
.detail_title.ttl_type11::after{ background-color:#fff4c3;}
.sec1 .movie{
margin:0 auto;
width:640px;
height:360px;
}
.sec-inner .icon_teach_iyaku{
margin:0 0 0 auto;
padding:0;
width:62px;
height:15px;
}
.sec-inner .icon_teach_iyaku img{
margin:0;padding:0;
vertical-align:top;
width:100%;
}
@media (max-width:769px) {
.body-sec .sec-inner{
width:100%;
}
.sec1{
padding:8vw 0 0 0;
}
.sec-inner{
clear:both;
}
.sec-inner img{
width:100%;
height: auto;
vertical-align: top;
}
.detail_title{
margin-bottom:4vw;
font-size:1.2rem;
}
.detail_title::after{
height:2vw;
}
.sec1 .movie{
float:none;
margin:0;padding:0;
width:100vw;
height:56.25vw
}
.sec-inner .caption{
margin:0 auto;
width:90%;
float:none;
}
.sec-inner .icon_teach_iyaku{
margin:0 0 0 auto;
width:15vw;
height:3.3333vw;
}
.mod-intro .mod-intro-inner img{
width:100%;
height: auto;
}
} .sec2{padding-top:40px;padding-bottom:40px}
.sec2 .column-3{padding:5px 0;background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/column3-bg.png) repeat-y 0 0}
.sec2 .column-3:before,.sec2 .column-3:after{content:"";display:table}
.sec2 .column-3:after{clear:both}
.sec2 .column-3 .glid{margin-left:33px;padding-right:40px;width:240px;float:left}
.sec2 .column-3 .glid p{font-size:1.14286em}
.sec2 .column-3 .glid h3{
margin-bottom:15px;
padding-left:18px;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/icon-arrow.png) no-repeat 0 8px;
font-weight:bold;
font-size:1.28571em;
}
.sec2 .column-3 .glid.glid3{background:none}
.sec2 .column-2{padding:5px 0;background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/column2-bg.png) repeat-y 0 0}
.sec2 .column-2:before,.sec2 .column-2:after{content:"";display:table}
.sec2 .column-2:after{clear:both}
.sec2 .column-2 .glid{margin-left:33px;padding-right:40px;width:400px;float:left}
.sec2 .column-2 .glid .column_ttl{
margin-bottom:15px;
padding-left:18px;
font-weight:bold;
font-size:1.28571em;
}
.sec2 .column-2 .glid p{font-size:1.14286em}
.sec2 .column-2 .glid.glid2{background:none}
@media (max-width:769px) {
.sec2{
clear:both;
padding-top:3vw;
padding-bottom:3vw;
}
.sec2 .column-2 .glid{
float:none;
margin:0 auto;
padding:15px 0;
width:90%;
}
.sec2 .column-2 .glid.glid2{
margin-top:0;
border-top:1px dotted #dddddd;
}
.sec2 .column-2 .glid .column_ttl{
margin-bottom:1vw;
padding-left:5.5vw;
font-size:1rem;
font-weight:bold;
}
.sec2 .column-2 .glid p{
font-size:13px;
line-height:20px;
}
} .sec3{
position: relative;
}
.sec3 .sec-inner .sec3-wrap{
position: relative;
margin:0 auto;
padding:55px 35px 60px 35px;
}
.sec3 .sec-inner .sec3-wrap img{
width: 100%;
height: auto;
vertical-align: top;
}
.sec3 .sec-inner .title{
position:relative;
margin-bottom:20px;
padding-left:44px;
color:#fff;
font-size:22px;
line-height:28px;
font-weight:bold;
}
.sec3 .sec-inner .title.icon_no3{
margin-top: 45px;
}
.sec3 .sec-inner .title.icon_no1::before{
content:'';
position:absolute;
width: 29px;
height: 26px;
top:0;
left:0;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/icon_no1.png);
background-repeat:no-repeat;
background-position:left 0 center;
background-size:cover;
z-index:1;
}
.sec3 .sec-inner .title.icon_no2::before{
content:'';
position:absolute;
width: 33px;
height: 26px;
top:0;
left:0;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/icon_no2.png);
background-repeat:no-repeat;
background-position:left 0 center;
background-size:cover;
z-index:1;
}
.sec3 .sec-inner .title.icon_no3::before{
content:'';
position:absolute;
width: 34px;
height: 26px;
top:0;
left:0;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/teach/icon_no3.png);
background-repeat:no-repeat;
background-position:left 0 center;
background-size:cover;
z-index:1;
}
.sec3 .sec-inner .title_sub{
position:relative;
margin-bottom:20px;
padding-bottom:3px;
color:#fff;
font-size:16px; font-weight:bold;
border-bottom:1px solid #fff;
}
.sec3 .sec-inner .text{
margin-bottom:40px;
font-size:18px;
line-height:28px;
color:#fff;
}
.sec3 .sec-inner .text span{
font-size:12px;
}
.sec3 .sec-inner .spec-list{
margin:-15px 0 45px -15px;
}
.sec3 .sec-inner .spec-list:before,.sec3 .sec-inner .spec-list:after{content:"";display:table}
.sec3 .sec-inner .spec-list:after{clear:both}
.sec3 .sec-inner .spec-list li{float:left}
.sec3 .sec-inner .spec-list li a{
display:block;
color:#fff;
margin:15px 0 0 15px;
padding:5px 20px;
background-color:rgba(255,255,255,0.25);
text-decoration:none;
line-height:1;
border-radius:20px;
font-size:14px;
font-weight:bold;
}
.sec3 .sec-inner .spec-list li a:hover{
color:#ff6666;
background-color:#fff;
}
.sec3 .sec-inner .how_detail_list{
position:relative;
margin-bottom:45px;
display:flex;
text-align:left;
}
.sec3 .sec-inner .how_detail_list li{
position:relative;
vertical-align:top;
}
.sec3 .sec-inner .how_detail_list .text{
margin-bottom:0;
}
.sec3 .sec-inner .why_cont{
margin:0 auto;
padding-top:35px;
width:876px;
text-align:center;
border-radius:10px;
background-color:#fff;
}
.sec3 .sec-inner .why_list{
padding:0 60px 50px 60px;
display:flex;
text-align:left;
}
.sec3 .sec-inner .why_list li{
vertical-align:top;
}
.sec3 .sec-inner .why_list li p{
font-size:18px;
line-height:28px;
}
@media screen and (max-width:768px){
.sec3{
padding-bottom:0!important;
}
.sec3 .sec-inner .sec3-wrap{
padding:8vw 0;
width:90vw;
}
.sec3 .sec-inner .title{
font-size:1.2rem;
}
.sec3 .sec-inner .text{
font-size: 0.9rem;
line-height: 1.6rem;
}
.sec3 .sec-inner .text span{
font-size: 0.7rem;
}
.sec3 .sec-inner .how_detail_list{
margin-bottom: 6vw;
}
.sec3 .sec-inner .why_cont{
padding-top:6vw;
width:90vw;
border-radius:10px;
background-color:#fff;
}
.sec3 .sec-inner .why_list{
padding:0 6vw 6vw 6vw;
display:block;
}
.sec3 .sec-inner .why_list li p{
padding-bottom:5vw;
font-size:0.9rem;
line-height:1.4rem;
}
} .lineup{
position: relative;
padding-bottom:30px;
background:#f9f9f9;
}
.lineup .sec-inner .lineup-wrap{
position: relative;
padding:55px 35px 0;
text-align:center;
}
.lineup .lineup_ttl{
display:inline-block;
position:relative;
margin:22px auto 18px auto;
font-size:22px;
line-height:34px;
font-weight:bold;
text-align:center;
color:#555;
}
.lineup .lineup_ttl::before{
content:'';
position:absolute;
top:0;
left:0;
background-repeat:no-repeat;
background-position:center;
background-size:auto 100%;
}
.lineup .lineup_ttl.tt_type1{
padding-left:55px;
}
.lineup .lineup_ttl.tt_type1::before{
width:42px;
height:34px;
}
.lineup .lineup_ttl.tt_type2{
padding-left:63px;
}
.lineup .lineup_ttl.tt_type2::before{
width:48px;
height:35px;
top:-1px;
}
.lineup .lineup_ttl.tt_type3{
padding-left:25px;
}
.lineup .lineup_ttl.tt_type3::before{
width:11px;
height:34px;
}
.lineup .lineup_ttl span{
display:inline-block;
padding-left:5px;
font-size:15px;
}
.note_production_finished{
position: relative;
display: block;
padding-top: 10px; font-size: 12px;
line-height: 1.4;
color: #ff0000;
text-align: center;
}
@media screen and (max-width:768px){
.note_production_finished{
padding-bottom: 0;
}
}
.lineup .lineup_list{
margin:0 auto 16px auto;
display:flex;
flex-wrap:wrap;
text-align:center;
justify-content: center;
max-width:700px;
}
.lineup .lineup_list li{
position:relative;
margin:0 16px 16px 0;
width:207px;
height:290px;
vertical-align:top;
border-radius:10px;
background-color:#fff;
overflow:hidden;
}
.lineup .lineup_list li:nth-child(3n){
margin-right:0;
}
.lineup .lineup_list li:last-child{
margin-right:0;
}
.lineup .lineup_list li.icon_new::before{
content:'';
position:absolute;
width:40px;
height:40px;
top:0;
left:0;
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/common/item-icon-new.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}
.lineup .lineup_list li a{
display:block;
padding:40px 0 0 0; text-decoration:none;
}
.lineup .lineup_list li a:hover{
opacity:0.6;
transition:0.5s;
filter: alpha(opacity=60);
-ms-filter: "alpha(opacity=60)";
}
.lineup .lineup_list a .figure {
margin:0 auto;
text-align: center;
}
.lineup .lineup_list a .figure img{
height:120px;
width:auto;
}
.lineup .lineup_list a .caption{
text-align: center;
}
.lineup .lineup_list a .caption dt{
margin-top: 20px;
font-size: 16px; line-height: 1.4; font-weight: bold;
text-align: center;
text-decoration: none;
}
.lineup .lineup_list a .caption dd {
margin-top:10px;
text-align:center;
font-size:14px;
line-height:20px;
color:#555555;
text-decoration:none;
}
@media screen and (max-width:768px){
.lineup{
padding-bottom:8vw;
}
.lineup .sec-inner .lineup-wrap{
padding:8vw 5vw 0;
text-align:center;
}
.lineup .lineup_ttl{
margin:4vw auto 6vw auto;
font-size:1.1rem;
line-height:5vw;
}
.lineup .lineup_ttl span{
padding-left:1vw;
font-size:0.9rem;
}
.lineup .lineup_ttl.tt_type1{
padding-left:9vw;
}
.lineup .lineup_ttl.tt_type1::before{
width:6.17vw;
height:5vw;
}
.lineup .lineup_ttl.tt_type2{
padding-left:10vw;
}
.lineup .lineup_ttl.tt_type2::before{
width:6.857vw;
height:5vw;
top:0;
}
.lineup .lineup_ttl.tt_type3{
padding-left:5vw;
}
.lineup .lineup_ttl.tt_type3::before{
width:1.62vw;
height:5vw;
}
.lineup .lineup_list{
margin:0 auto 2vw auto;
}
.lineup .lineup_list li{
margin:0 4vw 4vw 0;
width:40vw;
height:auto;
vertical-align:top;
border-radius:10px;
background-color:#fff;
overflow:hidden;
}
.lineup .lineup_list li:nth-child(3n){
margin-right:4vw;
}
.lineup .lineup_list li:nth-child(2n){
margin-right:0;
}
.lineup .lineup_list li:last-child{
margin-right:0;
}
.lineup .lineup_list a .figure {
width:30vw;
}
.lineup .lineup_list a .figure img{
height:auto;
width:100%;
}
.lineup .lineup_list li a{
padding:6vw 0 6vw 0;
}
.lineup .lineup_list a .caption dt{
margin-top: 3vw;
font-size: 0.9rem;
line-height: 1.3rem;
}
.lineup .lineup_list a .caption dd {
margin-top: 2.5vw;
font-size: 0.85714em;
line-height: 1.1rem;
}
} .itemlist-sec {
padding-bottom:50px;
background-color: #f9f9f9;
}
.itemlist-sec .inner {
position:relative;
margin:0 auto;
padding-top:60px;
width: 950px;
}
.itemlist-sec .inner:before, .itemlist-sec .inner:after {
content: "";
display: table;
}
.itemlist-sec .other_title{
text-align:center;
font-size:22px;
font-weight:600;
color:#555;
}
.itemlist-sec .itemlist_slider {
margin: 0;
padding: 0;
display:flex;
flex-wrap:wrap;
}
.itemlist-sec .item {
float: left;
width: 300px;
margin-top: 30px;
margin-left: 25px;
}
.itemlist-sec .no_list_pdg .item{
margin-left:0;
}
.itemlist-sec a {
position: relative;
display: block;
width: 100%;
height: 140px;
vertical-align: top;
background-color: #fff;
z-index: 10;
}
.itemlist-sec .catch {
z-index: 1;
position: relative;
float: left;
width: 150px;
height: 140px;
vertical-align: top;
text-align: center;
display: table;
}
.itemlist-sec .catch p {
display: table-cell;
vertical-align: middle;
font-size:22px;
line-height:32px;
font-weight: bold;
font-feature-settings:"palt";
}
.itemlist-sec .copy {
margin-top: 8px;
font-size: 0.85714em;
font-feature-settings: "palt";
text-align: center;
}
.itemlist-sec .title {
position: absolute;
height: 33px;
width: auto;
margin: 0;
padding: 0;
text-align: center;
top: 15px;
left: 50%;
transform: translate(-50%,0);
}
.itemlist-sec .figure {
position: absolute;
bottom: 15px;
right: 52px;
width: 45px;
}
.itemlist-sec .figure img{
width: 100%;
height: auto;
}
.catch_detail {
position: relative;
margin: 0 0 0 auto;
padding: 0;
width: 150px;
height: 140px;
vertical-align: top;
background-color: #fff;
} .itemlist-sec .item1 .catch {
color:#ef4d17;
background-color:#fedbcb;
}
.itemlist-sec .item1 .copy {
color: #ef4d17;
} .itemlist-sec .item2 .catch {
color:#1eaae1;
background-color:#cbf1fe;
}
.itemlist-sec .item2 .copy {
color:#1eaae1;
} .itemlist-sec .item3 .catch {
color:#1cb67e;
background-color:#ccffee;
}
.itemlist-sec .item3 .copy {
color:#1cb67e;
} .itemlist-sec .item4 .catch {
color:#a827d5;
background-color:#f3d2fe;
}
.itemlist-sec .item4 .copy {
color:#a827d5;
} .itemlist-sec .item5 .catch {
color:#cb9421;
background-color:#fff5cc;
}
.itemlist-sec .item5 .copy {
color:#cb9421;
} .itemlist-sec .item6 .catch {
color:#99c726;
background-color:#f2fecc;
}
.itemlist-sec .item6 .copy {
color:#99c726;
}
.itemlist-sec .item6 .figure {
width: 37px;
} .itemlist-sec .item7 .catch {
color:#0e64c2;
background-color:#cbe4fe;
}
.itemlist-sec .item7 .copy {
color:#0e64c2;
} .itemlist-sec .item8 .catch {
color:#e8113b;
background-color:#fed5de;
}
.itemlist-sec .item8 .copy {
color:#e8113b;
} .itemlist-sec .item9 .catch {
color:#1db11d;
background-color: #cdfecc;
}
.itemlist-sec .item9 .copy {
color:#1db11d;
} .itemlist-sec .item10 .catch {
color:#ba4c91;
background-color: #ffd9f6;
}
.itemlist-sec .item10 .copy {
color:#ba4c91;
}
.itemlist-sec .item10 .figure{
width: 37px;
} .itemlist-sec .item11 .catch {
color: var(--detail11-color);
background-color: var(--detail11-subcolor);
}
.itemlist-sec .item11 .copy {
color: var(--detail11-color);
}
.itemlist-sec .item11 .figure{
width: 37px;
}
@-webkit-keyframes item-figure-anime{50%{-webkit-transform:translateY(-10px) rotate(-2deg);transform:translateY(-10px) rotate(-2deg)}}
@keyframes item-figure-anime{50%{-webkit-transform:translateY(-10px) rotate(-2deg);transform:translateY(-10px) rotate(-2deg)}}
.itemlist-sec a:hover .figure{-webkit-animation:item-figure-anime .2s;animation:item-figure-anime .2s}
@media (max-width:769px){
.itemlist-sec a:hover .figure{
animation-play-state:paused;
}
.itemlist-sec {
margin: 0;
padding-bottom: 0;
clear: both;
}
.itemlist-sec .inner {
padding: 30px 0;
width: 100%;
}
.itemlist-sec .other_title{
font-size:1.1rem;
}
.itemlist-sec .item{
margin: 25px auto;
width: 100%;
}
.itemlist-sec .catch p{
font-size:1.3rem;
line-height:1.8rem;
}
.itemlist-sec .itemlist_slider {
width:100vw;
}
.itemlist-sec .figure{
right: auto;
bottom: 20px;
transform: translate(-50%,0);
}
.catch_detail {
width: 50%;
height: 150px;
}
.itemlist-sec a {
height: 150px;
}
.itemlist-sec .catch {
width: 50%;
height: 150px;
}
.itemlist-sec .copy {
margin-top: 12px;
font-size: 0.95em;
}
.itemlist-sec .copy{
margin-top:12px;
font-size:0.95em;
} .itemlist_slider{
position:relative;
margin:0 auto;
padding:0;
width:100%; overflow: hidden;
text-align:center;
}
.itemlist_slider .slick-prev,.itemlist_slider .slick-next{
display:none!important;
}
.itemlist_slider .slick-list{
width:100%;
}
.itemlist_slider > div .inner img {
margin: 0 auto;
width:100%;
vertical-align:top;
display:block;
}
.itemlist_slider > div {
width:100%;
margin: 0 auto;
padding:0;
overflow: visible;
}
.itemlist_slider > div .inner {
width:100%;
height:200px;
margin: 0 auto;
padding:0;
text-align:center;
}
.itemlist_slider > div .inner a {
display: block;
width:100%;
height:200px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.itemlist_slider > div .inner a:hover{
opacity: 0.8;
}
.itemlist_slider .slick-slide{
margin: 0;
padding: 0;
width:300px;
}
.itemlist_slider .slick-slide img {
display:unset!important;
}
.itemlist_slider .slick-center{
margin: 0;
padding: 0;
width:300px;
}
.itemlist_slider .slick-cloned{
margin: 0;
padding: 0;
width:300px;
} .itemlist_slider .slick-dots {
position:absolute;
margin:0;
padding:0;
list-style:none;
display: block;
text-align:center;
width:300px;
height:20px;
bottom:0px;
left:50%;
transform:translate(-50%,0);
}
.itemlist_slider .slick-dots li {
position:relative;
display:inline-block;
width:20px;
height:20px;
margin:0 2px;
padding: 0;
cursor:pointer;
vertical-align:top;
}
.itemlist_slider .slick-dots li button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance:none;
font-size:0;
}
.slick-dots li button:before{
color:#fadcdc!important;
}
.slick-dots li.slick-active button:before{
color:#fe6767!important;
}
} .precautions{
margin:0 auto;
padding:0;
width:100%;
color:#fff;
font-weight:bold;
}
.precautions p{
margin:0;
padding:0;
font-size:15px;
line-height:26px;
font-weight:bold;
color: #fff;
}
.precautions b{
font-weight:bold;
}
.precautions p.txt_bold{
font-weight:bold;
}
.precautions p.txt_indent{
padding-left:1.5em;
}
.precautions .precautions_conts{
margin-bottom:30px;
padding:0;
}
.precautions .precautions_conts:last-child{
margin-bottom:0;
}
.precautions .precautions_ttl{
margin-bottom: 10px;
font-size:18px;
line-height:26px;
font-weight:bold;
}
.precautions ul{
margin:0;padding:0;
list-style:none;
}
.precautions ul li{
margin:0;padding:0;
vertical-align:top;
display:block; }
.precautions ul.precautions1_list li{
margin:0 0 30px 0;
padding-left:1.5em;
text-indent:-1.5em;
}
.precautions ul.precautions2_list{
margin:5px 0;
}
.precautions ul.precautions2_list li{
margin:0 0 5px 0;
padding-left:2.5em;
text-indent:-2.5em;
}
@media (max-width:769px) {
.precautions{ }
.precautions p{
font-size:0.9rem;
line-height:1.4rem;
}
.precautions p.txt_indent{
padding-left:0;
text-indent:0;
}
.precautions .precautions_ttl{
font-size:1rem;
line-height:1.6rem;
}
} .precautions th,.precautions td {
border:1px solid rgba(255,255,255,0.5);
padding: 10px;
padding-left:10px;
text-indent:0;
}
.precautions table{
margin:25px 0;
padding:0;
font-size:0.95em;
border-collapse:collapse;
}
.precautions th.caution_th1{
width:70px;
font-weight:bold;
text-align: center;
}
.precautions th.caution_th2{
width:240px;
font-weight:bold;
}
.precautions td.caution_td1{
font-weight:bold;
}
.precautions td.caution_td2{
width:390px;
font-weight:bold;
}
.precautions .caution_ttl{
padding:4px;
text-align:center;
font-size:11px;
background-color:#fff;
}