@charset "UTF-8";
  #movie_modal {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:10000;
display:none;
}
#movie_modal .modal_body{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:none;
}
#movie_modal .modal_bg{
width:100%;
height:100%;
background-color:rgba(255,255,255,0.9);
}
#movie_modal .modal_window{
position: absolute;
width:90vw;
max-width:900px!important;
left:50%;
top:50%;
transform: translate(-50%, -50%);
text-align:center;
}
#movie_modal .youtube_tag{
position:relative;
width: 100%;
padding-top: 56.25%;
background: #000;
}
#movie_modal .modal_window iframe,
#top-movie-modal .modal_window iframe,
#movie-invention .modal_window iframe {
position: absolute;
width:100% !important;
height:100% !important;
top: 0;
left: 0;
} .modal_close{
position:absolute;
margin:0;padding:0;
width:40px;
height:40px;
top:-55px;
right:0;
border-radius:50%;
background-color:rgba(64,65,66,0.6);
z-index:2;
cursor:pointer;
transition: all .4s ease;
}
.modal_close span:nth-child(1){
position:absolute;
margin:0;padding:0;
top:50%;;
left:50%;
width:1px;
height:22px;
background:#fff;
transform:translateY(-50%) rotate(45deg);
}
.modal_close span:nth-child(2){
position:absolute;
margin:0;padding:0;
top:50%;;
left:50%;
width:1px;
height:22px;
background:#fff;
transform:translateY(-50%) rotate(-45deg);
}
.modal_close:hover{
transform: rotate(180deg);
}
@media screen and (max-width:768px){
#movie_modal .modal_window{
position: absolute;
width: 90vw;
min-width:initial;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
#movie_modal .youtube_tag{
width: 100%;
padding-top: 56.25%;
position: relative;
background: #000;
}
.modal_close{
animation: none;
transition: none;
}
.modal_close:hover{
transform: rotate(0);
}
} .mov_paly{
display:block;
position:relative;
opacity:1;
}
.mov_paly::after{
content:'';
position:absolute;
width:50px;
height:50px;
top:50%;
left:50%;
margin-left:-25px;
margin-top:-75px;
background-image:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/css/imgs/icon_mov_play.svg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
transition: all .3s;
z-index:2;
}
.mov_paly:hover{
opacity:1;
}
.mov_paly:hover::after{
transform: scale(1.2,1.2);
}
@media screen and (max-width:896px){
.mov_paly::after{
width:12vw;
height:12vw;
margin-left:-6vw;
margin-top:-15vw;
}
}
.mod-intro .mod-intro-inner{
height:100px;
background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/common/bg-intro2.png) center 0 no-repeat;
}
.mod-intro .mod-intro-inner h1{
position:absolute;
top:36px;
left:0;
}
.body-sec .sec-inner{
position: relative;
width: 100%;
max-width: 950px;
margin: 0 auto;
}
@media (max-width:769px) {
.mod-intro img{
height:100%;
width:auto;
}
.mod-intro-inner{
width:100%;
}
.mod-intro .mod-intro-inner{
height:80px;
background-position:right 0 center;
background-size:cover;
}
.mod-intro .mod-intro-inner h1{
height:20px;
width:auto;
top:29px;
left:20px;
}
.body-sec .sec-inner{
width:95%;
}
}
.sec-inner:before,.sec-inner:after{
content:"";
display:table;
}
.sec-inner:after{clear:both}
.sec-inner .cm-list{
position: relative;
width: 100%;
display:flex;
flex-wrap:wrap;
}
.sec-inner .cm-list img{
width: 100%;
height: auto;
vertical-align: top;
}
.sec-inner .cm-list:before,.sec-inner .cm-list:after{
content:"";
display:table;
}
.sec-inner .cm-list:after{clear:both}
.sec-inner .cm-list li{
display:inline;
margin-right: 20px; margin-bottom:15px;
width: calc( 33% - 13px ); float:left;
text-align:center;
}
.sec-inner .cm-list li:last-child{
margin-right: 0;
}
.sec-inner .cm-list li a{
position: relative;
display: block;
text-decoration:none;
}
.sec-inner .cm-list .figure{
position: relative;
border-radius: 10px;
overflow: hidden;
}
.sec-inner .cm-list .figure img{
transition: all .4s ease;
}
.sec-inner .cm-list .figure::after{
content: '';
position: absolute;
width: 60px;
height: 60px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-image: url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/cm/icon_play.svg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
pointer-events: none;
transition: all .4s ease;
z-index: 2;
}
.sec-inner .cm-list a:hover .figure::after{
transform: translate(-50%,-50%) scale(0.9);
}
.sec-inner .cm-list a:hover .figure img{
transform: scale(1.1);
} .sec-inner .cm-list li a dl dt{
margin-bottom:10px;
}
.sec-inner .cm-list li.type1 a dd{
color:#ed4c00;
line-height:20px;
}
.sec-inner .cm-list li.type2 a dd{color:#00a8e4}
.sec-inner .cm-list li.type3 a dd{color:#00b77c}
.sec-inner .cm-list li.type4 a dd{color:#a914d8}
.sec-inner .cm-list li.type5 a dd{color:#cc9500}
.sec-inner .cm-list li.type6 a dd{color:#98c900}
.sec-inner .cm-list li.type7 a dd{color:#0061c5}
.sec-inner .cm-list li.type8 a dd{color:#eb0032}
.sec-inner .cm-list li.type9 a dd{color:#07b300}
.sec-inner .cm-list li.type10 a dd{color:#258c02}
.sec-inner .cm-list li:nth-child(4n){margin-left:0}
.sec-inner .cm-list>*:first-child+*+*+*,.sec-inner .cm-list>*:first-child+*+*+*+*+*+*+*,.sec-inner .cm-list>*:first-child+*+*+*+*+*+*+*+*+*+*+*{margin-right:0}
.sec-intro{padding-top:50px}
.sec-intro p{font-size:1.14286em}
@media (max-width:769px) {
.sec-intro{
padding:25px 0;
}
.sec-intro p{
text-align: center;
font-size:1em;
}
.sec-inner .cm-lis{
text-align:center;
}
.sec-inner .cm-list li{
display:inline-block;
margin:0 12px 3vw 0;
width:48%;
text-align:center;
vertical-align:top;
}
.sec-inner .cm-list li:nth-child(even){
margin-right:0;
}
.sec-inner .cm-list img{
width:100%;
vertical-align: bottom;
}
.sec-inner .cm-list li a dl dt{
margin-bottom:2vw;
}
.sec-inner .cm-list li.type1 a dd{
font-size:0.9em;
line-height:1.6em;
}
.sec-inner .cm-list .figure{
border-radius: 10px;
}
.sec-inner .cm-list .figure img{
animation: none;
transition: none;
}
.sec-inner .cm-list .figure::after{
width: 10vw;
height: 10vw;
animation: none;
transition: none;
}
.sec-inner .cm-list a:hover .figure::after{
transform: translate(-50%,-50%) scale(1);
}
.sec-inner .cm-list li a:hover .figure img{
transform: scale(1);
}
}
.sec1{
padding-top:35px;
padding-bottom:0;
}
.sec1 h2{margin-bottom:25px;font-size:1.42857em;font-weight:bold;color:#ff6666}
.sec1 .cm-list .making-item1 a dd{color:#ff6666}
.sec2{
padding-top:35px;
padding-bottom:35px;
background:#fff;
border-bottom: 1px solid #eeeeee;
}
.sec2 h2{margin-bottom:25px;font-size:1.42857em;font-weight:bold;color:#ff6666}
.sec2 .cm-list li{margin-bottom:15px}
.sec2 .cm-list .movie-item1 a dd{color:#ff6666}
.cm-window .pop-head-sec{background:url(//www.kracie.co.jp/ph/k-kampo/wp-content/themes/kracie/assets/img/cm/pop-header.png) repeat-x 0 0}
.cm-window .pop-head-sec .pop-head-sec-inner{height:45px;padding:0 20px}
.cm-window .pop-head-sec .pop-head-sec-inner .pop-head-logo{text-align:left;padding:20px 0 0 0}
.cm-window .movie{margin:0 auto}
.cm-window .pop-close-btn{margin:10px auto 20px;width:280px}
.cm-window .pop-close-btn a{display:block;width:280px;height:50px;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/cm/btn-pop-close.png) no-repeat 0 0}
.cm-window .pop-copy{font-size:0.71429em}
.cm_new_icon{
position:absolute;
margin:0;padding:0;
width:31px;
height:31px;
top:5px;
left:5px;
z-index:10;
}
@media (max-width:769px) {
.sec1{
padding:0;
padding-bottom:6vw;
}
.sec2{
padding:20px 0 0 0;
}
.sec1 h2,.sec2 h2{
margin-bottom:10px;
font-size:1.16em;
}
}