@charset "UTF-8";
/* Body */
body {
	font-family: source-sans-pro;
	background-color: #f2f2f2;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-style: normal;
	font-weight: 200;
	overflow-x: hidden
}

h2{
  margin: 0;
  font-size: 40px;
  color: #fff;
}
/* Container */
.container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	height: 900px;
	background-color: #FFFFFF;
}
/* Navigation */
header {
	width: 100%;
	height: 8%;
	background-color: rgba(0, 0, 0, 0);
	border-bottom: 1px solid #FFFFFF;
	position: fixed;
	z-index: 300;
}
.logo {
    color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
    text-align: undefined;
    width: 25%;
    float: left;
    margin-left: 30px;
    letter-spacing: 4px;
    font-size: 18px;
	white-space: nowrap;
}


.hero_header {
	color: #FFFFFF;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	letter-spacing: 4px;
}
/* ヘッダー*/
.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #00BAF0;
  background: #FFFFFF;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #FFF;
  height: 40px;
  padding: 1em;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: bold;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
}

ul li a {
	color: #A3A3A3;
	text-decoration: none;
}
ul li:hover a {
	color: #2C9AB7;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;

	
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color:rgba(0, 0, 0, 0.5);
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

@media (max-width: 1020px) {
  .menu-button-container {
    display: flex;
  }
  .menu {
    position: absolute;
    top: 0;
    margin-top: 70px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  #menu-toggle ~ .menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #menu-toggle:checked ~ .menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 15px 0px 0px 0px;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .menu > li {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #222;
  }
  .menu > li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
}
/* ヘッダーEND*/

/* オープニングシャッター*/
$bg_color:#fafafa;
$font_color:#333;

body{
  background-color:$bg_color;
  color: $font_color;
}


.shutter{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#1e1e1e;
  z-index:9999;
  animation: byeShutter 2.6s forwards;
  
  &::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:auto;
    background-color:#f3f3f3;
    width:0;
    height:1px;
    animation: shutterOpen 2.6s forwards;
  }
}

.content{
  animation: contentScale 2.6s forwards;
}

@keyframes byeShutter{
  70%{
    opacity:1;
  }
  100%{
    opacity:0;
    display:none;
    z-index:-1;
  }
}

@keyframes shutterOpen{
  0%{
    width:0;
    height:1px;
  }
  50%{
    width:100%;
    height:1px;
  }
  90%{
    width:100%;
    height:100%;
  }
  100%{
    width:100%;
    height:100%;
  }
}

@keyframes contentScale{
  70%{
    transform:perspective(800px) scale(0.9) rotateX(15deg);
  }
  100%{
    transform:perspective(800px) scale(1) rotateX(0);
  }
}
/* オープニングシャッターEND*/

/* 横スクロールカーテン*/

          body {
            background-color: white;
            transition: all 1s;
        }
        
        .bodyfadeout {
            opacity: 0;
        }
        
        button {
            cursor: pointer;
        }
        
        #a {
            width: 0;
            height: 100vh;
            background-color: #ffffff;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
        }
        
        .anime5 {
            animation: animemove5 0.5s linear forwards;
        }
        
        @keyframes animemove5 {
            0% {opacity: 0}
            100% {
				opacity: 1;
                width: 100vw;
            }
        } 
.chatch{
	 font-size: 40px;
}

@keyframes chatch {

from {

width:0%;
}

to {

width:100%;
}

}

/* 横スクロールカーテンEND*/

/* スクロールフェードイン*/
		
		.scroll-space{
  box-sizing: border-box;
  padding-top: 300px;
  height: 500px;
  color: #fff;
}
.slidein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.slidein-left{
      transform: translate(-100%,0);
  }
  &.slidein-right{
      transform: translate(100%,0);
  }
  &.slidein-up{
      transform: translate(0,-100%);
  }
  &.slidein-bottom{
      transform: translate(0,100%);
  }
  &.scrollin{
    transform: translate(0, 0)!important;
    opacity: 1!important;
  }
}
/* スクロールフェードインEND*/

/* 固定背景*/
	.background {
  background-image: url('../images/fixed-image.jpg');
  background-attachment: fixed;
  background-size: 100%;
  background-position: bottom left;
background-repeat: no-repeat;
height: 100%;
}
/* 固定背景END*/

        /* トップページキャッチ部分画像 */
	 .image-container {
      position: relative;
      display: inline-block;
    }
 
    .image-container img {
      display: block;
      width: 100%;
      height: auto;
    }
	   /* トップページキャッチ部分画像END */
	  
      /* トップページキャッチコピー */
    .overlay-text-top-catch {
      /* 位置の調整 */
      position: absolute;
      top: 42%;
      left: 71%;
      transform: translate(-50%, -50%);
      color: #545454;
      padding: 10px 20px;
      font-size: calc(3.3vw + 0.3rem);
      font-weight: 900;
	  text-align: right;
	  white-space: nowrap;
	  letter-spacing : -0.03em;
	  line-height: 1.2;
 
    }
	 /* トップページキャッチコピーEND */
	  
	 /* トップページコピーライト */  
    .overlay-text-top-copylight {
      /* 位置の調整 */
      position: absolute;
      top: 92%;
      left: 85%;
      transform: translate(-50%, -50%);
      color: #000000;
      padding: 10px 20px;
      font-size: calc(0.8vw + 0.1rem);
      font-weight: 400;
	  text-align: right;
	  white-space: nowrap;
	  letter-spacing : -0.03em;
	  line-height: 1.2;
 
    }	  
	 /* トップページコピーライトEND */ 
	  
	      /* トップページ会社概要キャッチコピー */

    .text-company-catch {
      /* 位置の調整 */
      color: #ffffff;
		vertical-align: top;
      padding: 10px 20px;
		margin-top: 1.5em;
		margin-left:2em; 
      font-size: calc(2.3vw + 0.3rem);
      font-weight: 800;
	  text-align: left;
	  white-space: nowrap;
	  letter-spacing : -0.03em;
	  line-height: 1.3;
 
    }
	 /* トップページ会社概要キャッチコピーEND */

	      /* トップページ会社概要ボタン */

.button-company {
 position: static;
		margin-top: 4em;
  }

.button-company a {/*aタグを画像の真ん中に*/

  /*以下装飾*/
      font-size: calc(1.5vw + 0.3rem);/*文字サイズ*/
	font-weight: 500;
  border: solid white 3px; /*線で囲う*/
  padding: 0.5em 2em;/*文字と線の間の余白*/
  color: white;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
 border-radius: 30px;
	white-space: nowrap;

  }
.button-company a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
  }
	      /* トップページ会社概要ボタンEND */

	      /* トップページ製品・サービスキャッチコピー */
    .overlay-text-product-catch {
      /* 位置の調整 */
      position: absolute;
      top: 56%;
      left: 16%;
      transform: translate(-50%, -50%);
      color: #000000;
      padding: 10px 20px;
      font-size: calc(1.4vw + 0.2rem);
      font-weight: 800;
	  text-align: left;
	  white-space: nowrap;
	  letter-spacing : -0.03em;
	  line-height: 1.3;
 
    }
	 /* トップページ製品・サービスキャッチコピーEND */

	  /* トップページお知らせレイアウト */
	  .oshirase-layout {
  display: grid; 
  grid-template-columns: 15% 85%; 
  gap: 0px 2%; 
		  padding: 5%;
			  background-color: #FFFFFF; 
}
	  	  .oshirase-title{
		 font-size: calc(1.8vw + 0.1rem);
		        font-weight: 800;
		  line-height: 1.5;
		  
	  }
	  .oshirase-text{
		 font-size: calc(1.2vw + 0.1rem);
		        font-weight: 400;
		  line-height: 1.5;
		  
	  }
	  .oshirase-category{
		      width: 100%;
    background-color: #FF6400;     /* 背景色指定 */
		  padding;5%;
		  text-align: center;
		  font-size: calc(1.8vw + 0.1rem);
		  font-weight: 400;
		  color: #ffffff;
		  
	  }
	  .oshirase-line{
		  margin: 0;
	  }
	 /* トップページお知らせレイアウトEND*/

	  	 /* フッター会社名表記 */  
    .text-footer-company {

      font-size: calc(0.8vw + 0.1rem);
      font-weight: 400;
	  text-align: right;
	  white-space: nowrap;
	  line-height: 1.5;
	  padding-right: 2%;
 
    }	  
		/* フッター会社名表記 */ 

		/*汎用文字END*/
	.hanyou-title{
      font-size: calc(0.5vw + 0.6rem);
      font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 1.5;
		vertical-align:top;
	}
	
	.hanyou-text{
      font-size: calc(0.5vw + 0.6rem);
      font-weight: 300;
	  text-align: left;
	  line-height: 1.5;
		vertical-align:top;
	}
/*汎用文字END*/

/*会社概要レイアウト*/
html, body {
  height: 100%;
}
.company-layout {
  display: grid; 
  grid-auto-flow: row dense; 
  grid-auto-columns: 3fr; 
  grid-auto-rows: 1fr; 
  grid-template-columns: 30% 30% 40%; 
  gap: 0px 0px; 
width: 90%;
	height: 100%;
}
	.company-background {
  background-image: url('../images/fixed-image.jpg');
  background-attachment: fixed;
  background-size: 100%;
  background-position: bottom left;
background-repeat: no-repeat;
	height: 100%;
}

			.pmark-text{
      font-size: calc(0.4vw + 0.6rem);
      font-weight: 300;
	  text-align: left;
	  line-height: 1.5;
		vertical-align:top;
	}
			.pmark-img{
		vertical-align:top;
	}
	
	/*会社概要レイアウトEND*/

/*製品・サービスレイアウト*/
		
  .product-category{
		      width: 90%;
    background-color: #FF8800;     /* 背景色指定 */
		  padding;10%;
		  text-align: left;
		  font-size: calc(1.7vw + 0.15rem);
		  font-weight: 400;
		  color: #ffffff;
				  border-radius: 50px;}

		.product-catch{
		 font-size: calc(1.2vw + 0.15rem);
		        font-weight: 800;
		  line-height: 1.5;
		  
	  }
	  .product-text{
		 font-size: calc(0.9vw + 0.1rem);
		        font-weight: 400;
		  line-height: 1.5;
		  
	  }
		  .product-title{
		 font-size: calc(1.5vw + 0.1rem);
		        font-weight: 800;
		  
	  }
			.product-background {
  background-image: url('../images/fixed-image.jpg');
  background-attachment: fixed;
  background-size: 100%;
  background-position: bottom left;
background-repeat: no-repeat;
}
		.product-table-background{
			    background-color:rgb(255 255 255 / 0.6);
		
		}
		  
/*製品・サービスレイアウトEND*/

	      /* 製品・サービスボタン */

.button-product {
 position: static;
		margin-top: 1.5em;
  }

.button-product a {/*aタグを画像の真ん中に*/

  /*以下装飾*/
      font-size: calc(0.7vw + 0.3rem);/*文字サイズ*/
	font-weight: 500;
  border: solid #8A8A8A 2px; /*線で囲う*/
  padding: 0.5em 2em;/*文字と線の間の余白*/
  color: #8A8A8A;/*文字色*/
  text-decoration: none;/*下線を表示させない*/
 border-radius: 15px;
	white-space: nowrap;

  }
.button-product a:hover{/*カーソルを当てたとき*/
  background: rgba(255, 255, 255, 0.3);/*背景を半透明に*/
  }
	      /* 製品・サービスボタンEND */

	/*ポリシーレイアウト*/
    .policy-catch {
      color: #000000;
      font-size: calc(3vw + 0.3rem);
      font-weight: 900;
	  text-align: right;
	  white-space: nowrap;
	  letter-spacing : -0.03em;
	  line-height: 1.2;
 
    }
		.policy-text{
      font-size: calc(0.5vw + 0.6rem);
      font-weight: 300;
	  text-align: left;
	  line-height: 1.8;
		vertical-align:top;
			padding: 5%;
			background-color:rgb(255 255 255 / 0.6);
	}	
		
	/*ポリシーレイアウトEND*/

	/*アクセスレイアウト*/
.map {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9のアスペクト比 */
    height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 90%;
    height: 100%;
}
	/*アクセスレイアウトEND*/

			/*個人情報の取扱い文字*/
	.kojin-title{
      font-size: calc(0.4vw + 0.6rem);
      font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 1.5;
		vertical-align:top;
	}
	
	.kojin-text{
      font-size: calc(0.4vw + 0.6rem);
      font-weight: 300;
	  text-align: left;
	  line-height: 1.5;
		vertical-align:top;
	}
/*個人情報の取扱い文字END*/

/* Hero Section */
.hero {
	width: 100%;
	background-color: #ffffff;
	padding-top: 50px;
	padding-bottom: 0px;
}
.light {
	font-weight: bold;
	color: #717070;
}
.tagline {
	text-align: center;
	color: #000000;
	margin-top: 0px;
	font-weight: lighter;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.example {/*親div*/
  position: relative;/*相対配置*/
  }

.example p {
  position: absolute;/*絶対配置*/
  color: #000000;/*文字は黒に*/
  top: 100px;
  left: 500px;

  }

.example img {
  width: 100%;
  }




/* About Section */
.text_column {
	width: 29%;
	text-align: justify;
	font-weight: lighter;
	line-height: 25px;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
	color: #A3A3A3;
}
.about {
	padding-left: 25px;
	padding-right: 25px;
	padding-top: 35px;
	display: inline-block;
	background-color: #FFFFFF;
	margin-top: 0px;
}
/* Stats Gallery */
.stats {
	color: #717070;
	margin-bottom: 5px;
}
.gallery {
	clear: both;
	display: inline-block;
	width: 100%;
	background-color: #FFFFFF;
	/* [disabled]min-width: 400px;
*/
	padding-bottom: 35px;
	padding-top: 0px;
	margin-top: -5px;
	margin-bottom: 0px;
}
.thumbnail {
	width: 25%;
	text-align: center;
	float: left;
	margin-top: 35px;
}
.gallery .thumbnail h4 {
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	color: #52BAD5;
}
.gallery .thumbnail p {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #A3A3A3;
}
/* Parallax Section */
.banner {
	background-color: #2D9AB7;
	background-image: url(../images/parallax.png);
	height: 400px;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}
.parallax {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	padding-top: 110px;
	letter-spacing: 2px;
	margin-top: 0px;
}
.parallax_description {
	color: #FFFFFF;
	text-align: right;
	padding-right: 100px;
	width: 30%;
	float: right;
	font-weight: lighter;
	line-height: 23px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
/* More info */
footer {
	background-color: #FFFFFF;
	padding-bottom: 35px;
}
.footer_column {
	width: 50%;
	text-align: center;
	padding-top: 30px;
	float: left;
}
footer .footer_column h3 {
	color: #B3B3B3;
	text-align: center;
}
footer .footer_column p {
	color: #717070;
	background-color: #FFFFFF;
}
.cards {
	width: 100%;
	height: auto;
	max-width: 400px;
	max-height: 200px;
}
footer .footer_column p {
	padding-left: 30px;
	padding-right: 30px;
	text-align: justify;
	line-height: 25px;
	font-weight: lighter;
	margin-left: 20px;
	margin-right: 20px;
}
.button {
	width: 200px;
	margin-top: 40px;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
	text-align: center;
	vertical-align: middle;
	border-radius: 0px;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	border: 3px solid #FFFFFF;
	color: #FFFFFF;
	transition: all 0.3s linear;
}
.button:hover {
	background-color: #FEFEFE;
	color: #C4C4C4;
	cursor: pointer;
}
.copyright {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
	background-color: #717070;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 2px;
}
.footer_banner {
	background-color: #B3B3B3;
	padding-top: 60px;
	padding-bottom: 60PX;
	margin-bottom: 0px;
	background-image: url(../images/pattern.png);
	background-repeat: repeat;
}
footer {
	display: inline-block;
}
.hidden {
	display: none;
}