@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/
body {
	font-family: "Noto Sans JP", メイリオ, sans-serif;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* area */

#container{
    overflow-x: hidden;
}

/* menu */

#service-menu{
    padding: 70px 0;
    text-align: center;
    margin: 50px 0 0 0;
}

#service-menu section {
    background: #fff;
    margin: 0 0 10px 0;
}

#service-menu h1{
    margin-bottom: 30px;
    letter-spacing: 0.2em;
}

#service-menu h2{
    margin: 0 0 10px 0;
}

#service-menu .service-area{
    padding: 20px;
    box-shadow: 5px 0 10px #ccc;
}



/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next { 
     position: absolute;/*絶対配置にする*/
     top: 42%;
     cursor: pointer;/*マウスカーソルを指マークに*/
     /* outline: none;クリックをしたら出てくる枠線を消す */
     /* border-top: 2px solid red;矢印の色 */
     /* border-right: 2px solid blue;矢印の色 */
    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:#333;/*ドットボタンの現在地表示の色*/
}