@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.8;
	}

	/* 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: 40px auto 1em;
	    padding-top: 0;
	  }
	}

	/* ===================================================================
/
/	Header
/
=================================================================== */
	body>header {
	  width: 1200px;
	  margin:auto;
	  padding-top:80px;
	}

	body>header:after {
	  content: "";
	  display: block;
	  clear: both;
	}

	body>header nav {
	  float: right;
	  height: 100%;
	}

	body>header nav:after {
	  content: "";
	  display: block;
	  clear: both;
	}

  /* iPad タブレット */
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
  	body>header {
  	  width: 95%;
  	  margin:0 auto;
  	  padding-top:40px;
  	}
  }

	/* Header
	------------------------------------------------------------------- */
	header .logo-area {
		display:flex;
		justify-content:space-between;
		margin-bottom:33px;
	}

	body>header h1 img {
	  width: auto;
	  transition: .3s ease-in-out;
	}
	header .logo-area .serch-form {
		width:260px;
		padding-top:15px;
	}

	header .sns-area ul {
		display:flex;
		justify-content:flex-end;
		margin-bottom:35px;
	}
	header .sns-area ul li {
		margin-right:12px;  /*18px*/
	}

	@media screen and (max-width:768px) {
	header .logo-area {
		display: block;
		margin-bottom: 6px;
	}
	}

	/* Navigaton
		------------------------------------------------------------------- */
	body>header nav {
		width:100%;
		border-bottom:solid 1px #333;
		padding-bottom:8px;
		position:relative;
		height:50px;
	}

	body>header nav:after {
	  content: "";
	  display: block;
	  clear: both;
	}

	body>header nav>ul {
	  height: 100%;
	  /*max-width:600px;*/
	  text-transform: uppercase;
	  display:flex;
	  position:absolute;
	  right:0;
	  z-index:1000;
	}

	body>header nav>ul>li {
	  height: 100%;
	  transition: none;
	  line-height:24px;
	}

	body>header nav>ul>li>a {
	  display: block;
	  padding: 0 30px;
	  font-weight:bold;
	}

	body>header nav>ul>li>a:hover {
	  background-color: rgba(0, 0, 0, 0.1);
	}

	body>header nav>ul>li:nth-last-child(2)>a {
	  padding-right: 40px;
	}


	body>header nav>ul>li.search {
		width:240px;
		padding:0 30px;
		box-sizing:border-box;
	}
	body>header nav>ul>li.search .gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
		border-color: none;
		background-color: none!important;
		background-image: none!important;
		filter: none;
	}
	.gsc-search-button-v2, .gsc-search-button-v2:hover, .gsc-search-button-v2:focus {
		border-color: #3079ED;
		background-color: #000!important;
		background-image: none!important;
    color: #fff;
		filter: none;
	}
	body>header nav>ul>li.search .cse .gsc-search-button-v2, .gsc-search-button-v2 {
		font-size: 0px;
		padding: 6px 2px !important;
		width: auto;
		vertical-align: middle;
		border: none!important;
		border-radius: 0px!important;
		-moz-border-radius: 0px;
		-webkit-border-radius: 0px;
		border-color: none!important;
		background-color: none!important;
		background-image:none;
	}
	.cse .gsc-control-cse, .gsc-control-cse {
		padding: 0px !important;
		width: auto;
	}
.gsc-search-box {
    border: 1px solid #000;
    margin-bottom: 0 !important;
  }
	.gsc-input-box {
		border: none !important;
		background: #F0F4F4!important;
	}
	.gsib_a {
		padding: 0!important;
	}
	.gsc-input {
		background: #F0F4F4!important;
		padding:0 8px!important;
		font-size:13px;
	}
	.gsc-input::placeholder {
		color: #F0F4F4!important;
	}
  .gsc-search-button {
    background-color: #000;
  }
  .gsc-search-button-v2 svg {
		fill: #fff!important; /*#333*/
    margin: 0 5px;
	}

	body>header.ss nav>ul>li.search {
		padding-top:12px;
	}
	.menu__item {
	  background: #fff;
	  color: #333;
	  cursor: pointer;
	  display: block;
	  margin-bottom: 1px;
	  position: relative;
	}
	.menu__item__link {
	  color: #333;
	  display: block;
	  line-height:49px;
	}

	.submenu {
	  background: #fff;
	  display: none;
	  width: 200px;
    position: absolute;
	  border: solid 1px #333;
	}
	.submenu__item {
	  border-bottom: 1px solid #eee;
	  color: #222;
	}
	.submenu .submenu__item a {
		display:block;
		padding: 1rem;
	}
	.submenu .submenu__item a:hover {
		background-color:#eee;
	}
	.submenu2 {
	  background: #fff;
	  display: none;
	  width: 440px;
    position: absolute;
    border: solid 1px #333;
	}
	.submenu2 .submenu__item {
	  border-bottom: 1px solid #eee;
	  color: #222;
	  float: left;
    width: 50%;
	  padding:0;
	}
	.submenu2 .submenu__item a {
		display:block;
		padding: 1rem;
	}
	.submenu2 .submenu__item a:hover {
		background-color:#eee;
	}



  nav  ul li ul{
      display: none;
  }
  nav ul li:hover ul{
      display: block;
  }


	@media screen and (max-width:768px) {
	  body>header {
	    width: 100%;
	    left: 0;
	    top: 0;
	    padding: 1em;
	    height: auto;

	  }

	  body>header h1.logo {
	    width: 60%;
    text-align: left;
    padding: 3% 0 0 0;
    float: left;
    transition: .3s ease-in-out;
	  }

	  body>header nav {
	    display: none;
	  }
	  .serch-form {
	    display: none;
	  }
	  .sns-area {
	    display: none;
	  }

	}

	.slide_nav,
	.sidr {
	  display: none;
	}

	/* ===================================================================

	#	Responsive Toggle navigation

	=================================================================== */
	@media screen and (max-width:768px) {
	  .slide_nav {
	    display: block;
	    width: 35px;
	    height: 35px;
	    text-align: center;
	    float: right;
	  }

	  .slide_nav svg {
	    fill: #000;
	    width: 32px;
	    height: 100%;
	    position: relative;
	    top: 50%;
	    transform: translateY(-50%);
	    transition: .2s ease-in-out;
	  }

	  .sidr-open .slide_nav {
	    transform: rotate(90deg);
	  }

	  .sidr-open .slide_nav svg {
	    fill: #464648;
	  }

	  .sidr {
	    display: none;
	    width: 230px;
	    position: fixed;
	    top: 0;
	    height: 100%;
	    z-index: 99999;
	    overflow-x: none;
	    overflow-y: auto;
	    background: #464648;
	    color: #FFF;
	    transition: none;
	    padding: 2em;
	  }

	  .sidr.right {
	    left: auto;
	    right: -230px
	  }

	  .sidr.left {
	    left: -230px;
	    right: auto
	  }
/*
	  .sidr li:nth-child(2),
	  .sidr li:nth-last-child(3) {
	    text-align: left;
	    padding: 1em;
	  }

	  .sidr li:nth-child(8) {
	    margin-top: 1em;
	  }
	  */

	  .sidr li>a {
	    display: block;
	    padding: 1em;
	    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	    letter-spacing: 1px;
	    color: inherit;
	    text-align: left;
	  }

	  .sidr li.cld a {
	    font-size: 1rem;
	    margin-left: 1em;
	  }

	  .sidr>a {
	    float: right;
	    padding: 1em;
	  }

	  .sidr>a svg {
	    fill: #FFF;
	  }

    /*#right-sidr ul li  {
    	max-width: 360px;
    	margin: 0 auto;
    	padding: 0;
    }
    #right-sidr ul li a {
    	display: block;
    	padding: 10px;
    	text-decoration: none;
    	color: #000000;
    	line-height: 1;
    }*/
    #right-sidr ul li label {
    	display: block;
    	position: relative;
    	margin: 0 0 2px 0;
    	padding: 12px;
    	line-height: 1;
    	color: #ffffff;
    	cursor: pointer;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      text-align: left;
    }
    #right-sidr ul li label::before {
    	position: absolute;
    	content: '▼';
    	color: #ffffff;
    	right: 1em;
    	top: 30%;
      font-size: 10px;
    }
    #right-sidr ul li input {
    	display: none;
    }
    #right-sidr ul li ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;

    }
    #right-sidr ul li li {
    	overflow-y: hidden;
    	max-height: 0;
    	transition: all 0.5s;
    }
    #right-sidr ul li li a {
      border-bottom: none;
      padding: 5px 0 5px 15px;
      font-weight: 100;
      font-size: 11px;
    }
    /*リストが増えたらULごとに追加してください*/
    #sp_submenu:checked ~ .smh_submenu li,
    #sp_submenu2:checked ~ .smh_submenu2 li {
    	max-height: 46px;
    	opacity: 1;
    }



	}



	/* f_contact
	------------------------------------------------------------------- */
	.f_contact { padding: 50px 0 100px;}
	.f_contact h2 { font-size: 17px; font-weight: bold; text-align: center;}
	.f_contact .f_contact_area { width:900px; margin: 20px auto; text-align: center; }
	.f_contact .f_contact_area .f_contact_box { width: 45%; background-color: #000; margin: 20px; }
	.f_contact .f_contact_area .f_contact_box a p { font-size: 14px; line-height: 25px; color: #fff; border: 1px solid #fff; margin: 5px; padding: 15px;}
	.f_contact .f_contact_area .f_contact_box a p span { font-weight: bold; font-size: 120%; }
	.f_contact .f_contact_area > p { font-weight: bold; font-size: 16px; margin-top: 10px; }

	@media screen and (max-width:767px) {
    .f_contact .f_contact_area { width:100%; }
    .f_contact .f_contact_area .f_contact_box { width: 100%; margin: 10px; }
    .f_contact .f_contact_area > p { font-size: 14px; line-height: 23px;}
  }

  /* iPad タブレット */
	@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .f_contact .f_contact_area { width:100%; }
    .f_contact .f_contact_area .f_contact_box { margin: 10px; }
  	.f_contact .f_contact_area .f_contact_box a p { font-size: 12px; padding: 10px;}

		}



	/* new footer
	------------------------------------------------------------------- */
	footer { padding-bottom:120px; }

	.footer-navi {
		max-width:770px;
		margin:auto auto 60px;
	}
	.footer-navi ul {
		display:flex;
		justify-content: space-between;
	}
	.footer-navi ul li {
		border-left:solid 1px #333;
		text-align:center;
		width:20%;
		font-size:13px;
		font-weight:bold;
		padding-top:8px;
	}
	.footer-navi ul li:nth-child(2) {
		width:25%;
	}
	.footer-navi ul li:nth-child(4n) {
		border-right:solid 1px #333;
	}
	.footer-navi ul li:nth-child(5n) {
		border:none;
		width:10%;
		text-align:right;
		padding-top:0px;
	}
	.footer-navi ul li:nth-child(6n) {
		border:none;
		padding-left:0;  /*18px*/
		width:10%;
		padding-top:0px;
	}
	.footer-content_inner {
    border-bottom: 1px solid #000;
    padding-bottom: 100px;
    width:1200px;
    margin: 0 auto;
  }
	.footer-content {
		display:flex;
		justify-content: space-between;
		width:1000px;
		margin:auto;
		font-size:15px;
	}
	.footer-content div h3 {
		font-size:17px;
		font-weight:bold;
		margin-bottom:25px;
	}
	.footer-content ul li {
		margin-bottom:8px;
	}
	.footer-product {
		width:52%;
	}
	.f-pro-area {
		display:flex;
		justify-content: space-between;

	}
	.f-pro-area .bp {
		width:50%;  /*25%*/
	}
	.footer-company {
		width:16%;
	}
	.footer-info {
		width:20%;
	}




	@media screen and (max-width:768px) {

		footer {  padding-bottom:0px;}

    .footer-navi {
    	display:none;
    }
    .footer-content_inner {
    	display:none;
    }
    footer .m ul li {
    	border-top: 2px solid #efefef;
    }
    footer .m ul li a {
    	display: block;
      padding: 0.75em 0;
      font-size:15px;
    }
	}

  /* iPad タブレット */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
  	.footer-content_inner {
      width: 95%;
    }
    .footer-content {
  		width:90%;
  		margin:0 auto;
  	}

  	.footer-info {
  		width:25%;
  	}


  }
