@charset "UTF-8";
/*kracie2025_amana*/
/*movie_modal*/
#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*/
.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*/
.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("../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(../../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;/*10px;*/
  margin-bottom:15px;
  width: calc( 33% - 13px );/*230px;*/
  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("../../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:hover{transition:opacity .2s;text-decoration:none}
.sec-inner .cm-list li a:hover:hover{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75);opacity:0.75}
.sec-inner .cm-list li a:hover img{transition:opacity .2s}
.sec-inner .cm-list li a:hover img:hover{filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75);opacity:0.75}
*/
.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(../../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(../../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;
  }
}