@charset "utf-8";
html{
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}
body{
    background:#fff;
font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	color: #000;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
font-feature-settings: "palt";/*文字詰め*/
font-size: 62.5%;/*相対基本フォントサイズ*/
}

body.appear{
    background:#fff;
}


ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a,a:hover,a:active{
text-decoration: none;
outline: none;
color:#000;
}


*{
    box-sizing: border-box
}


.inner{
    width:100%;
    margin:0 auto;
    padding:10px;
}

@media only screen and (orientation:portrait){
   /* Portraitモード（縦向き）用 */

#header{
	position: relative;/*背景を設定するdivの基点とするためrelativeをかける*/
	display:block;
	width: 100%;
	height:30vh;
	background:#000;
}

/*---=======トップページイメージ制御=========*/

.img-wrap {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
z-index:110;
}
.img-wrap li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: contain;
background-position: 40% 16%;
    background-repeat: no-repeat;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}
.img-wrap li:nth-child(1) { 
    background-image: url(../img/banner1-5.jpg);
}
.img-wrap li:nth-child(2) {
    background-image: url(../img/top_bn_crs400.png);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
.img-wrap li:nth-child(3) {
    background-image: url(../img/mobileapp.jpg);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
.img-wrap li:nth-child(4) {
    background-image: url(../img/banner-1.jpg);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}

@-webkit-keyframes anime { 
    0% {
        -webkit-animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        -webkit-transform: scale(1.1);
        opacity: 1;
    }
    40% {
        -webkit-transform: scale(1.5);
            -webkit-animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        -webkit-transform: scale(1.8);
        opacity: 0;
    }
    100% { opacity: 0 }
}
@keyframes anime { 
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
    }
    10% {
        transform: scale(1.1);
        opacity: 1;
    }
    40% {
        transform: scale(1.2);
            animation-timing-function: ease-out;
        opacity: 1;
    }
    50% {
        transform: scale(1.3);
        opacity: 0;
    }
    100% { opacity: 0 }
}


/*--==========index 注目製品========--*/

#fp{
    padding-top:20px;
}

#fp section{
    margin: 0 0 5px 0;
}

#fp ul li a{
    color:#000;
}

#fp ul li a:hover, a:active{
    background-color: #333;
    color:#000;
}

/*--=======hoverしたら画像拡大する前======--*/
#fp ul li.larger img{
transition:all .5s;
vertical-align:bottom;
text-align:center;
}


/*--======hoverしたら画像拡大======--*/
#fp ul li.larger img:hover{
transform:scale(1.2);
}


#fp section h3{
    font-size: 1rem;
line-height:1.2;
    margin: 2px;
}

#fp section p{
    font-size: 0.8rem;
line-height:1.4;
}

#fp .menu-area{
    padding: 5px;
    box-shadow: 5px 0 2px #f0f0f0;
}
/*--====注目製品ｐエリア高さ====--*/
#fp .menu-area p{
    height:50px;
}

#fp .menu-btn{
    text-align: center;
    margin: 5px 0 0 0;
}
/*--========PC .slickはparts.cssにある===========--*/


/*==================================================
機能編　6-1-6 複数画像を並列に見せる
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
   width:70%;
    margin:0 auto;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #999;/*矢印の色*/
    border-right: 2px solid #999;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align:center;
	margin:20px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:8px;/*ドットボタンのサイズ*/
    height:8px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#e2a2b1;/*ドットボタンの現在地表示の色*/
}

/*==================================================
   7 画像リンクの動き
===================================*/

span.mask{
	display: block;/*画像をくくるspanタグをブロック要素にする*/
	overflow: hidden;/*はみ出ているものを隠す*/
}

   }