@charset "UTF-8";

	/* ===================================================================
/
/	Setting
/
=================================================================== */
	html {
	  color: #111;
	  background: #FFF;
	  line-height: 1.4;
	  text-align: left;
	  font-size: 65.5%;
	}

	body {
	  font-size: 1.2rem;
	  font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', sans-serif, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro';
	  overflow-x: hidden;
	}

	img {
	  max-width: 100%;
	  height: auto;
	}

	/* Link set
	------------------------------------------------------------------- */
	a {
	  color: #111;
	  text-decoration: none;
	  transition: 0.4s ease-in-out;
	}

	a img {
	  transition: 0.4s ease-in-out;
	}

	a:hover {
	  color: #666;
		opacity: 0.6;
	}

	/* Block set
	------------------------------------------------------------------- */
	main {
	  margin: 0 auto 100px;
	  padding-top: 60px;
	}

	main section {
	  margin: 0 auto;
	}

	main,
	main section:after {
	  content: "";
	  display: block;
	  clear: both;
	}


	/* JS set
	------------------------------------------------------------------- */
	.fadein {
	  opacity: 0.1;
	  transform: translate(0, 50px);
	  transition: all 500ms;
	}

	.fadein.scrollin {
	  opacity: 1;
	  transform: translate(0, 0);
	}


	/* ===================================================================
	/
	/	flex
	/
	=================================================================== */
	.flex {
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-ms-flex-wrap: wrap;
	  flex-wrap: wrap;
	}
	.flex_just-b {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.flex_just-c {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
	.flex_align-c {
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}


	/* ===================================================================

		#	Responsive

		=================================================================== */
	.m {
	  display: none;
	}

	@media screen and (max-width:768px) {
	  body {
	    font-size: 1.1rem;
		padding:0 1em;
	  }

	  .containar {
	    width: 100%;
	  }

	  .m {
	    display: block;
	  }

	  main {
	    margin: 20px auto 1em;
	    padding-top: 0;
	  }
	}




	/* ======================================================================================================================================
/
/	main / section
/
=================================================================== */



	/* ===================================================================
	/
	/	section top_contents
	/
	=================================================================== */
	section {
		width:1200px;
		margin:auto;
	}
	.slide-area {
		margin-bottom:80px;
	}
	.slick-dots li button:before {
      font-size: 20px !important;
    }
	.slider2 {
		display:none !important;
	}

	@media screen and (max-width:768px) {

	.slider {
		display:none !important;
	}
	.slider2 {
		display:block !important;
	}
	section {
		width:100%;
		margin:auto;
	}

	}

	/* iPad */
	@media only screen and (min-width: 768px) and (max-width: 768px) {
		section {
			width:90%;
			margin: 0 auto;
		}
	}

	/* タブレット */
	@media only screen and (min-width: 769px) and (max-width: 1024px) {
		section {
			width:90%;
			margin: 0 auto;
		}

	}


	/* ===================================================================
	/
	/	section 1
	/
	=================================================================== */
	.s1 {
		margin-bottom:60px;

	}
	.s1 .product-pickup ul {
		display:flex;
		justify-content: space-between;

	}

	@media screen and (max-width:768px) {

	.s1 .product-pickup ul {
		display: block;
	}
	.s1 .product-pickup ul li {
		margin-bottom:30px;
	}
	}

	/* ===================================================================
	/
	/	section 2
	/
	=================================================================== */

	.s2 h2 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: solid 1px #333;
    padding-left: 20px;
    margin-bottom: 30px;
	}
	.s2 .news ul {
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.s2 .news ul li {
		width:48%;
		padding-bottom:35px;
		margin-bottom:30px;
		display:flex;
		justify-content: space-between;
		border-bottom:solid 1px #efefef;
	}
	.s2 .news ul li .news-text {
		width:61%;
		font-size:15px;
	}
	.s2 .news ul li .news-img {
		width:30%;
	}
	.s2 .news ul li div .date {
		font-weight:bold;
		margin-bottom:25px;
		display:block;
	}
	.s2 .news ul li div .element {
		line-height:24px;
	}

	@media screen and (max-width:768px) {

		.s2 .news ul {
			display: block;
		}
		.s2 .news ul li {
			width: 100%;
			padding-bottom: 35px;
			margin-bottom: 30px;
			display: block;
			border-bottom: solid 1px #efefef;
		}
		.s2 .news ul li .news-text {
	    width: 100%;
	    font-size: 15px;
			}
			.s2 .news ul li div .date {
			    font-weight: bold;
			    margin-bottom: 15px;
			    display: block;
			}
			.s2 .news ul li div .element {
			    line-height: 24px;
			    margin-bottom: 8px;
			    display: block;
			}
			.s2 .news ul li .news-img {
			    width: 100%;
			}
			.s2 .news ul li .news-img img {
			    width: 100%;
			}

	}


		/* iPad */
		@media only screen and (min-width: 768px) and (max-width: 768px) {
			.s2 .news ul li {
				display:flex;
			}
			.s2 .news ul li .news-text {
				width:61%;
			}
			.s2 .news ul li .news-img {
				width:30%;
			}

		}



	/* ===================================================================
	/
	/	section 3
	/
	=================================================================== */

	.s3 ul {
		margin-bottom:100px;
	}
	.s3 ul {
		display:flex;
		justify-content: space-between;
	}
	.s3 ul li {
		width:24%;
	}
	.s3 ul li img {
		    width: 100%;
		}
	.s3 ul li:nth-child(3n) .mgbottom {
		margin-bottom:11px;
	}

	@media screen and (max-width:768px) {

		.s3 ul {
	    display: block;
		}
		.s3 ul li {
		    width: 100%;
		}
		.s3 ul li img {
		    width: 100%;
			margin-bottom:20px;
		}

	}

	/* タブレット */
	@media only screen and (min-width: 769px) and (max-width: 1024px) {
		.s3 ul li:nth-child(3n) .mgbottom {
			margin-bottom:8px;
		}
	}

	/* ===================================================================
	/
	/	section 4
	/
	=================================================================== */

	.s4 h2 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
		}
	.grid {
		display:flex;
		justify-content: space-between;
	}
	.grid img {
		margin-bottom:13px;
	}

	.grid-item {
		 width: 24.24%;
		overflow: hidden;
	}
	.grid-item-large {
		 width: 49.5%;
	}

	/*ホバーでテキスト表示*/
	.cover {
		position: relative;
		/*width: 290px;
		height: 290px;*/
		overflow: hidden;
	}
	.cover .mask {
		/*width: 100%;
		height: 100%;/**/
		width: 290px;
		height: 290px;
		position: absolute;
		top: -100%;
		left: 0;
		background-color: rgba(0,0,0,0.4);
		-webkit-transition:	all 0.6s ease;
		transition:all 0.6s ease;
	}
	.cover .mask-large {
		width: 594px;
		height: 594px;
	}
	.cover .mask p {
		font-size:18px;
		color:#fff;
	}
	.cover:hover .mask {
		top:0;
	}
	.cover a:hover {
		opacity: unset;
	}

	@media screen and (max-width:768px) {
		.grid img {
	    margin-bottom: 2px;
		}
		.mask {
			display: none;
		}
	}

	/* タブレット */
	@media only screen and (min-width: 769px) and (max-width: 1024px) {
		.mask {
			display: none;
		}
	}


	/* ===================================================================

		#	Responsive

		=================================================================== */
	@media screen and (max-width:768px) {

	}

	/* タブレット */
	@media only screen and (min-width: 769px) and (max-width: 1024px) {


	}


	/* ===================================================================
	/
	/	section 2（service）
	/
	=================================================================== */
	.s2 {
		text-align:left;
	}



	/* ===================================================================

		#	Responsive

		=================================================================== */