@charset "utf-8";


/* layout =============================================================
======================================================================== */


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

	container
	
======================================================================== */

  .l-container-1920w,
  .l-container-box,
  .l-container-1240,
	.l-container-pc,
	.l-container {
		margin-right: auto;
		margin-left: auto;
		}
	.l-container-1920w:before, .l-container-1920w:after,
	.l-container-box:before, .l-container-box:after,
	.l-container-1240:before, .l-container-1240:after,
	.l-container-pc:before, .l-container-pc:after,
	.l-container:before, .l-container:after {
		display: table;
		content: " ";
		}
	.l-container-1920w:after,
	.l-container-box:after,
	.l-container-1240:after,
	.l-container-pc:after,
	.l-container:after {
		clear: both;
		}


	@media print, screen and (min-width: 1920px) {
	}
	@media print, screen and (min-width: 768px) {
		.l-container-1920w {
			width: 100%;
			max-width: 1920px;
		  min-width: 1100px;
			box-sizing: border-box;
			}
		.l-container-box {
			width: 100%;
			max-width: 1480px;
		  min-width: 1100px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
		.l-container-1240 {
			width: 100%;
			max-width: 1300px;
		  min-width: 1100px;
			padding-left: 30px;
			padding-right: 30px;
			box-sizing: border-box;
			}
		.l-container-pc,
		.l-container {
			width: 1100px;
			padding-left: 50px;
			padding-right: 50px;
			box-sizing: border-box;
			}
			.l-minWidth {
				min-width: 1100px;
				}
		.l-wrap {
			width: 100%;
			min-width: 1100px;
			position: relative;
			z-index: 10;
			background-color: #fff;
			}
		.l-main {
			float: left;
			width: 650px;
			}
		.l-sub {
			float: right;
			width: 300px;
			margin-bottom: 5.0rem;
			}
		
	}
	@media (max-width: 767px) {
		.l-container-1920w,
		.l-container-pc {
			width: 100%;
			}
		.l-container-box,
		.l-container-1240,
		.l-container {
			width: 92%;
			}
		.l-wrap {
			width: 100%;
			position: relative;
			z-index: 10;
			background-color: #fff;
			}
		.l-sub {
			margin-top: 4.0rem;
			}
		.l-contentbox {
			padding-left: 4%;
			padding-right: 4%;
			}

	}





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

	header
	
======================================================================== */

  header {
    position: absolute;
    top: 0;
    width: 100%;
    }

  /* l-header */
  .l-header {
    width: 100%;
    text-align: center;
    position: relative;
    }
  .l-header a {
    text-decoration: none !important;
    }
  .l-header li,
  .l-header ul {
    margin: 0;
    padding: 0;
    }





/* --------- only home (logo / button) --------- */
  .l-home .l-hBtn {
    position: relative;
    width: 100%;
    overflow: hidden;
    z-index: 20;
    }
    .l-home .l-hBtn a {
      display: block;
      width: 100%;
      height: 100%;
      }
	@media print, screen and (min-width: 768px) {
    .l-home .l-hBtn {
      height: 1040px;
      }
      .l-home .l-hBtn .l-hlogo {
        position: absolute;
        left: 50%;
        margin-left: -234px;
        top: 220px;
        width: 468px;
        }
/*      .l-home .l-hBtn .l-htxt {
        position: absolute;
        left: 50%;
        margin-left: -96px;
        top: 500px;
        width: 193px;
        height: 300px;
        text-align: left;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 2.2rem;
        color: #fff;
        letter-spacing: 5px;
        }    */
      .l-home .l-hBtn .l-honlineshop {
        position: absolute;
        right: 20px;
        top: 300px;
        }    
      .l-home .l-hBtn .l-hcontact {
        position: absolute;
        right: -30px;
        top: 700px;
        }    
      .l-home .l-hBtn .l-haward {
        position: absolute;
        left: 20px;
        top: 780px;
        }    
	}
	@media (max-width: 767px) {
    .l-home .l-hBtn {
      height: 500px;
      }
      .l-home .l-hBtn .l-hlogo {
        position: absolute;
        left: 50%;
        margin-left: -80px;
        top: 140px;
        width: 160px;
        }
/*      .l-home .l-hBtn .l-htxt {
        position: absolute;
        left: 50%;
        margin-left: -60px;
        top: 270px;
        width: 120px;
        height: 160px;
        text-align: left;
        -ms-writing-mode: tb-rl;
        writing-mode: vertical-rl;
        font-size: 1.6rem;
        color: #fff;
        letter-spacing: 5px;
        }*/
      .l-home .l-hBtn .l-haward,
      .l-home .l-hBtn .l-hcontact,
      .l-home .l-hBtn .l-honlineshop {
        display: none;
        }
	}

  /* animation */
  .l-home .l-hBtn > * {
    opacity: 0;
    }
  .l-home .l-hBtn > *:nth-child(1) {
    animation-delay: 0.5s;
    }
  .l-home .l-hBtn > *:nth-child(2) {
    animation-delay: 1s;
    }
  .l-home .l-hBtn > *:nth-child(3) {
    animation-delay: 1.5s;
    }
  .l-home .l-hBtn > *:nth-child(4) {
    animation-delay: 2.0s;
    }

  .l-home .l-hBtn > * {
    -webkit-animation: hbtnLoad 5.0s forwards;
    animation: hbtnLoad 5.0s forwards;
    }
      @-webkit-keyframes hbtnLoad {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }	
      @keyframes hbtnLoad {
        0% { opacity: 0; }
        100% { opacity: 1; }
      }
 




/* --------- not home (logo / button) --------- */

  .l-page {
    overflow: hidden;
    }
  .l-page .l-hBtn .l-hlogo {
    position: fixed;
    z-index: 5;
    }

	@media print, screen and (min-width: 768px) {
    .l-page .l-hBtn .l-hlogo {
      top: 20px;
      right: 30px;
      }
    .l-page .l-hBtn .l-honlineshop {
      position: absolute;
      right: 20px;
      top: 320px;
      z-index: 5;
      }    
    .l-page .l-hBtn .l-hcontact {
      position: absolute;
      right: 0px;
      top: 780px;
      z-index: 5;
      }
	}
	@media (max-width: 767px) {
		.l-page .l-hBtn .l-hlogo {
      top: 10px;
      right: 10px;
			}
		.l-page .l-hBtn .l-hlogo img {
			height: 70px;
			}
    .l-page .l-hBtn .l-hcontact,
    .l-page .l-hBtn .l-honlineshop {
      display: none;
      }
	}





/* --------- menu (l-hnavul) --------- */
	@media print, screen and (min-width: 768px) {
    .l-hnav-sp {
      display: none; 
      }

		.l-hnav-pc .l-hnavul {
      position: fixed;
      top: 35px!important;
      left: 100px;
      z-index: 110;
      visibility: hidden;
			}
      .l-hnav-pc .l-hnavul.is-show {
        visibility: visible;
        }
		.l-hnav-pc .l-hnavul li {
			display: inline;
      float: right;
      font-size: 1.6rem;
      letter-spacing: 4px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
  		z-index: 100;
      width: 35px;
      height: 190px;
      text-align: left;
			}
      .l-hnav-pc .l-hnavul li a {
				display: inline-block;
				width: 100%;
				color: #000;
				text-decoration: none;
        line-height: 40px;
        text-align: left;
        }
      .l-hnav-pc .l-hnavul li span {
        position: relative;
        display: inline-block;
        }
      .l-hnav-pc .l-hnavul li a span::after,
      .l-hnav-pc .l-hnavul li.active a span::after {
				position: absolute;
				content: '';
				left: 5px;
				width: 1px;
				background: #000;
				}
			.l-hnav-pc .l-hnavul li.active a span::after {
				height: 100%;
				top: 0;
				}
			.l-hnav-pc .l-hnavul li a span::after {
				transition: .3s;
				height: 0;
				top: 50%;
				}
			.l-hnav-pc .l-hnavul li a span:hover::after {
				height: 100%;
				top: 0;
				}
      .l-hnav-pc .l-hnavul li a.is-txtwhite {
        color: #fff;
			  }
      .l-hnav-pc .l-hnavul li a.is-txtwhite span::after,
      .l-hnav-pc .l-hnavul li.active a.is-txtwhite span::after {
				background: #eee;
				}
	}
	@media (max-width: 767px) {
    .l-hnav-pc {
      display: none; 
      }
		.l-hnav-sp {
			}
		.l-hnav-sp .l-hnavul {
      position: fixed;
      top: 0px!important;
      left: 0px!important;
  		z-index: 100!important;
      width: 100%;
      height: 100vh;
      padding: 70px 10px 50px 10px;
      text-align: center;
      opacity: 0;
  		transition: 1.5s;
      visibility: hidden;
			}
      .l-hnav-sp .l-hnavul.is-show {
        opacity: 1;
        background-color: #fff;
        visibility: visible;
        }
		.l-hnav-sp .l-hnavul ul {
			display: inline-block;
      margin: 0 auto;
			}
		.l-hnav-sp .l-hnavul li {
			display: inline;
      float: right;
      font-size: 1.5rem;
      letter-spacing: 5px;
      -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
      width: 35px;
      height: 200px;
			}
      .l-hnav-sp .l-hnavul li a {
        display: block;
        width: 100%;
				color: #000;
        text-decoration: none;
        line-height: 35px;
        text-align: left;
        }
    
/*       .l-hnav > li:nth-child(1) a {
       left: 40px;
        }
      .l-hnav > li:nth-child(2) a {
        left: 20px;
        }
      .l-hnav > li:nth-child(3) a {
        left: 0px;
        }*/
      .l-hnav-pc .l-hnavul li span {
        position: relative;
        display: inline-block;
        }
    
	}



  /* animation */
	@media print, screen and (min-width: 768px) {
    .l-hnav-pc .l-hnavul > *:nth-child(1) {
      transition-delay: 0s;
      }
    .l-hnav-pc .l-hnavul > *:nth-child(2) {
      transition-delay: 0.2s;
      }
    .l-hnav-pc .l-hnavul > *:nth-child(3) {
      transition-delay: 0.4s;
      }
    .l-hnav-pc .l-hnavul > *:nth-child(4) {
      transition-delay: 0.6s;
      }
    .l-hnav-pc .l-hnavul > *:nth-child(5) {
      transition-delay: 0.8s;
      }
    .l-hnav-pc .l-hnavul > *:nth-child(6) {
      transition-delay: 1.0s;
      }
    .l-hnav-pc .l-hnavul > * {
      opacity: 0;
      transform: translateY(-50px);
      transition: 1s;
      }
    .l-hnav-pc .l-hnavul > *.is-show {
      transform: translateY(0px);
      opacity: 1;
      }
	}
	@media (max-width: 767px) {
	}





/* --------- hamburger button (l-hbg) --------- */
  .l-hbg {
    position: fixed;
		z-index: 110;
    width: 60px!important;
    height: 60px!important;
		text-align: center;
		color: transparent;
		box-sizing: border-box;
    pointer-events: auto;
    cursor: pointer;
		}
		.l-hbg .l-hbg03,
		.l-hbg .l-hbg02,
		.l-hbg .l-hbg01 {
      position: fixed;
			width: 40px;
			height: 2px!important;
  		}
      .l-hbg .l-hbg03 span,
      .l-hbg .l-hbg02 span,
      .l-hbg .l-hbg01 span {
        display: block;
        width: 40px;
        height: 2px!important;
        }
		.l-hbg .l-hbg01 {
      transition-delay: 0.4s;
			}
      .l-hbg .l-hbg01 span {
        background: #000;
        }
		.l-hbg .l-hbg02 {
      transition-delay: 0.2s;
			}
      .l-hbg .l-hbg02 span {
        background: #7f7f7f;
        }
		.l-hbg .l-hbg03 {
  		}
      .l-hbg .l-hbg03 span {
        background: #ccc;
        }
		.l-hbg .l-hbg04 {
      position: fixed;
			width: 40px;
      height: 20px!important;
			font-size: 1.2rem;
      color: #000;
      text-align: center;
			}

		.l-hbg .l-hbg-s.l-hbg01.is-txtwhite span {
      background: #fff;
			}
		.l-hbg .l-hbg-s.l-hbg02.is-txtwhite span {
      background: #9b9b9b;
			}
		.l-hbg .l-hbg-s.l-hbg03.is-txtwhite span {
      background: #787878;
			}
		.l-hbg .l-hbg-s.l-hbg04.is-txtwhite {
      color: #fff;
			}

  /* position */
  @media print, screen and (min-width: 768px) {
    .l-hbg {
      top: 40px!important;
      left: 30px!important;
      }
		.l-hbg .l-hbg03,
		.l-hbg .l-hbg02,
		.l-hbg .l-hbg01 {
      left: 40px!important;
  		}
		.l-hbg .l-hbg01 {
      top: 44px!important;
			}
		.l-hbg .l-hbg02 {
      top: 54px!important;
			}
		.l-hbg .l-hbg03 {
      top: 64px!important;
  		}
		.l-hbg .l-hbg04 {
      top: 72px!important;
      left: 41px!important;
			}

    .l-hbg .l-hbg-s{
      opacity: 0;
      transform: translateX(-20px);
      transition: 0.5s;
      }
    .l-hbg .l-hbg-s.is-show {
      transform: translateX(0px);
      opacity: 1;
      pointer-events: auto;
      }
  }
	@media (max-width: 767px) {
    .l-hbg {
      top: 20px!important;
      left: 20px!important;
      }
		.l-hbg .l-hbg03,
		.l-hbg .l-hbg02,
		.l-hbg .l-hbg01 {
      left: 20px!important;
  		}
		.l-hbg .l-hbg01 {
      top: 24px!important;
			}
		.l-hbg .l-hbg02 {
      top: 34px!important;
			}
		.l-hbg .l-hbg03 {
      top: 44px!important;
  		}
		.l-hbg .l-hbg04 {
      top: 50px!important;
      left: 21px!important;
			}
    .l-hbg .l-hbg-s {
      opacity: 1;
      pointer-events: auto;
      transition: 0.5s;
      }
	}



  /* opacity */
  .l-hbg .l-hbg-s{
    transition: 0.5s;
    }
  @media print, screen and (min-width: 768px) {
    .l-hbg .l-hbg-s{
      opacity: 0;
      transform: translateX(-20px);
      }
    .l-hbg .l-hbg-s.is-show {
      transform: translateX(0px);
      opacity: 1;
      pointer-events: auto;
      }
  }
	@media (max-width: 767px) {
    .l-hbg .l-hbg-s {
      opacity: 1;
      pointer-events: auto;
      }
    .l-hbg .l-hbg03.is-open span,
    .l-hbg .l-hbg01.is-open span {
      background-color: #000!important;
      }
    .l-hbg .l-hbg04.is-open {
      color: #000!important;
      }
	}	
  .l-hbg .l-hbg02.is-open {
		background-color: transparent!important;
		}
    .l-hbg .l-hbg02.is-open span {
      background-color: transparent!important;
      }
		.l-hbg .l-hbg01.is-open {
			-webkit-transform: translateY(10px) rotate(-45deg);
				-ms-transform: translateY(10px) rotate(-45deg);
					transform: translateY(10px) rotate(-45deg);
					}
		.l-hbg .l-hbg03.is-open {
			-webkit-transform: translateY(-10px) rotate(45deg);
				-ms-transform: translateY(-10px) rotate(45deg);
					transform: translateY(-10px) rotate(45deg);
					}






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

	article
	
======================================================================== */


	.l-article {
		position: relative;
		word-break: break-all;
    overflow: hidden;
    background-color: #fff;
    background-clip: content-box;
		}
	.l-home .l-article::after {
    content: '';
    display: block;
    position: absolute;
    background: url("../img/home/bg_info-b.png") no-repeat center bottom;
    z-index: 1;
		}
	.l-page .l-article::after {
    content: '';
    display: block;
    position: absolute;
    background: url("../img/page/bg_page-b.png") no-repeat center bottom;
    z-index: 1;
		}

	@media print, screen and (min-width: 768px) {
		.l-article {
			padding-bottom: 60px;
			}
    .l-page .l-article::after,
    .l-home .l-article::after {
      width: 2122px;
      bottom: 0px;
      left: 50%;
      margin-left: -1061px;
      }
    .l-article-b {
      margin-bottom: 200px;
      }
    .l-home .l-article::after {
      height: 570px;
      }
    .l-page .l-article::after {
      height: 300px;
      }
	}
	@media (max-width: 767px) {
		.l-article {
			padding-bottom: 30px;
			}
    .l-page .l-article::after,
    .l-home .l-article::after {
      width: 1061px;
      bottom: 0px;
      left: 50%;
      margin-left: -530px;
      background-size: cover;
      }
    .l-article-b {
      margin-bottom: 80px;
      }
    .l-home .l-article::after {
      height: 285px;
      }
    .l-page .l-article::after {
      height: 150px;
      }
	}




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

	Section
	
======================================================================== */


	@media print, screen and (min-width: 768px) {
		.l-section {
			padding-top: 90px;
			padding-bottom: 90px;
			}
		.l-section-t {
			padding-top: 90px;
			}
		.l-section-b {
			padding-bottom: 120px;
			}
		.l-sectionS-b {
			padding-bottom: 60px;
			}
    .l-section-anchor {
      padding-top: 30px;
      }
	}
  @media screen and (min-width:768px) and (max-width:1150px){
    .l-section-anchor {
      padding-top: 100px;
      }
	}
	@media (max-width: 767px) {
		.l-section {
			padding-top: 30px;
			padding-bottom: 30px;
			}
		.l-section-t {
			padding-top: 30px;
			}
		.l-section-b {
			padding-bottom: 50px;
			}
		.l-sectionS-b {
			padding-bottom: 30px;
			}
    .l-section-anchor {
      padding-top: 70px;
      }
	}






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

	footer
	
======================================================================== */

  .l-bgfooter {
    background: url("../img/common/bg_footer.jpg") no-repeat center bottom;
    background-attachment: fixed;
    }
    @media (min-width: 1921px) {
      .l-bgfooter {
        background-size: 100% auto;
        }
    }


	.l-footer {
		clear: both;
		color: #fff;
		text-align: center;
		position: relative;
		overflow: hidden;
		}
	.l-footer a {
    color: #fff;
		}
	.l-footer address {
    line-height: 2;
    font-style: normal;
		}
	@media print, screen and (min-width: 768px) {
		.l-footer {
			padding: 100px 0 20px 0;
			}
    .l-footer address {
			padding: 50px 0 120px 0;
      }
		.l-copyright {
			padding-top: 200px;
			font-size: 1.4rem
			}
	}
	@media (max-width: 767px) {
		.l-footer {
			padding: 45px 0 10px 0;
			}
		.l-footer h1 {
			margin-right: auto;
			margin-left: auto;
			width: 40%;
			max-width: 150px;
			}
    .l-footer address {
			padding: 30px 0 50px 0;
      }
		.l-copyright {
			padding-top: 80px;
			}
	}




	/* pagetop contact tel */

	@media print, screen and (min-width: 768px) {
    .l-pagetop {
      position: fixed;
      z-index: 100;
      pointer-events: none;
      opacity: 0;
      transition: all .7s;
			width: 74px;
      left: 50%;
      margin-left: -37px;
      }
		.l-pagetop-on {
			opacity: 1;
			pointer-events: auto;
			}
		.l-pagetop img {
			width: 74px;
			}
			.l-pagetop a:hover img {
				opacity:1;
				filter: alpha(opacity=100);
				-ms-filter: "alpha( opacity=100 )";
				 -webkit-filter: brightness(1.2);
				 -moz-filter: brightness(1.2);
				 -o-filter: brightness(1.2);
				 -ms-filter: brightness(1.2);
				 filter: brightness(1.2);
				}	
		.l-tel-f {
			display: none;
			}
	}
	@media (max-width: 767px) {
    .l-pagetop,
    .l-tel-f {
      position: fixed;
      z-index: 1000;
      opacity: 1;
      }
		.l-pagetop,
		.l-tel-f,
		.l-pagetop a,
		.l-tel-f a,
		.l-pagetop img,
		.l-tel-f img {
      width: 50px;
      height: 50px;
      }

    .l-pagetop {
			right: 10px;
      bottom: 10px;
			}
		.l-tel-f {
			left: 10px;
      bottom: 10px;
			}
    .l-tel-f a:hover:after,
    .l-tel-f a:active:after,
    .l-tel-f a:focus:after,
    .l-pagetop a:hover:after,
    .l-pagetop a:active:after,
    .l-pagetop a:focus:after{
      display: none;
      }
	}