@charset "utf-8";

/* -----------------------------------------------------------
共通パーツ
------------------------------------------------------------- */

body {
	font-family: "Inter","Noto Sans JP","游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
	font-size: 16px;
	text-align: justify;
	line-height: 1.5em;
	background-color: #ECECEB;
}

main {
	overflow: hidden;
	background-color: #000000;
	margin-top: 74px;
}


a {
	text-decoration: none;
	color: inherit;
}

a:visited {
	color: inherit;
}

img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}
section{
	padding-top: 160px;
}
.img-blank_clear{
	vertical-align: bottom;
}
.container{
	width: 1220px;
	max-width: 98%;
}


@media(max-width:800px) {
	.sp_none {
		display: none !important;
	}
}

@media(min-width:801px) {
	.pc_none {
		display: none !important;
	}
}
.all-content{
	width: 1440px;
	max-width: 100%;
	display: block;
	margin: auto;
}

.NitalagoRuika{
	font-family: "nitalago-ruika", sans-serif;
font-weight: 100;
font-style: normal;
}
header{
	display: flex;
	position: fixed;
	z-index: 1000;
	top: 0px;
	padding: 0px 24px;
	align-items: center;
	height: 74px;
	width: 1440px;
	max-width: 100%;
	background-color: #000000;
	background-image: url(../imgs/header_bg.png);
	background-repeat: no-repeat;
	background-position: left;
}
header img{
	width: 77px;
	min-width: 10%;
}
.header-contents{
	display: flex;
	justify-content: space-between;
	width: 100%;
}
nav.menu-pc ul{
	display: flex;
}
nav.menu-pc ul li{
	font-size: 22px;
	margin-left: 84px;
	color: #fff;
}
nav.menu-pc ul li a:hover{
	color: #E73534;
}
nav.menu-pc ul li:first-child{
	margin-left: 0px;
}
@media(max-width:800px) {
	main {
		margin-top: 76px;
	}
	header{
		height: 86px;
		background-image: url(../imgs/header_bg_sp.png);
	}
	header .pc_none nav{
		display: none;
		position: fixed;
		top: 86px;
		left: 0px;
		background-color: #E73534;
		width: 100vw;
		color: #fff;
		text-align: center;
	}
	header .pc_none nav ul li{
		display: block;
		padding: 1.5em 0px;
		margin-left: 0px;
	}
	nav.menu-sp ul li a:hover{
		color: #000;
	}
	section{
		padding-top: 120px;
	}
	
	
}

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.burger{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	cursor: pointer;
	  width: 35px;
	  height:35px;
  }
  
  /*ボタン内側*/
  .burger span{
	  display: inline-block;
	  transition: all .4s;/*アニメーションの設定*/
	  position: absolute;
	  height: 3px;
	  border-radius: 2px;
	background: #fff;
	  width: 100%;
	}
  
  .burger span:nth-of-type(1) {
	top:7px; 
  }
  
  .burger span:nth-of-type(2) {
	top:15px;
  }
  
  .burger span:nth-of-type(3) {
	top:24px;
  }
  
  /*activeクラスが付与されると線が回転して×に*/
  
  .burger.active span:nth-of-type(1) {
	  top: 10px;
	  left: 3px;
	  transform: translateY(6px) rotate(-45deg);
	  width: 100%;
  }
  
  .burger.active span:nth-of-type(2) {
	opacity: 0;/*真ん中の線は透過*/
  }
  
  .burger.active span:nth-of-type(3){
	  top: 22px;
	  left: 3px;
	  transform: translateY(-6px) rotate(45deg);
	  width: 100%;
  }

.top-copy-bg{
	background-image: url(../imgs/main_copy_bg.jpg);
	background-repeat: no-repeat;
	padding-top: 108px;
	text-align: center;
	background-size: contain;
}

.brand-img{
	margin-bottom: 168px;
}
.message-name{
	display: block;
	margin-left: auto;
	padding-top: 30px;
}
footer{
	background-image: radial-gradient(circle, rgba(235, 102, 58, 1), rgba(231, 53, 52, 1) 80%);
	height: 86px;
}
.footer-contents{
	height: 86px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url(../imgs/footer_bg.png);
	background-repeat: no-repeat;
	background-position: left;
}
footer p{
	font-size: 22px;
	color: #fff;
	text-align: center;
}


h1{
	color: #E73534;
text-align: center;
font-size: 50px;
font-weight: bolder;
letter-spacing: 3.5px;
margin-bottom: 80px;
letter-spacing: 0.5px;
}


.tabBox .tabArea {
	width: 100%;
	height: 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
  }
  .tabBox .tabArea .one_tab {
	width: 32.5%;
	display: block;
	text-decoration: none;
	transition-duration: 0.3s;
	text-align: center;
	color: #fff;
	font-size: 27px;
	cursor: pointer;
  }
  .tabBox .tabArea .one_tab:hover {
	opacity: 0.9;
	text-decoration: none;
  }
  .tabBox .tabArea .one_tab .tab_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	transition-duration: 0.3s;
  }
  .tabBox .tabArea .one_tab .tab_inner {
	background-color: #fbe3db;
  }
  .tabBox .tabArea .one_tab.select .tab_inner {
	background-color: #e73534;
	/* height: 80px; */
  }
  .tabBox .tabArea.bottom {
	align-items: flex-start;
  }
  .contents .tab_main {
	display: none;
	padding: 50px 25px;
	text-align: center;
	min-height: 280px;
	background-color: #fff;
	transition-duration: 0.3s;
  }
  .tab_main.is_show {
	display: block;
	background-image: url(../imgs/history_bg.jpg);
	background-position: left top;
	background-repeat: no-repeat;
  }

  .innovation-img{
	display: block;
	margin: 50px 16px 16px auto;
	max-width: 40%;
  }
  #history{
	position: relative;
  }
  #history .container{
	position: relative;
	z-index: 20;
  }
  .granma-img01,.granma-img02{
	position: absolute;
  }
  .granma-img01{
	top: 150px;
	right: 0px;
  }
  .granma-img02{
	bottom: 100px;
	left: -150px;
  }
  @media(max-width:800px) {
	.brand-img{
		margin-bottom: 32px;
	}
	.identity-img{
		margin-bottom: 24px;
	}
	.identity-txt{
		margin-bottom: 48px;
	}
	.granma-img01,.granma-img02{
		display: none;
	  }
	  .tabBox .tabArea .one_tab {
		font-size: 18px;
	  }
	  .tab_main.is_show {
		background-image: url(../imgs/history_bg_sp.jpg);
		background-size:contain;
	  }
	  h1{
	font-size: 40px;
	margin-bottom: 40px;
	letter-spacing: 0.5px;
	}
	.top-copy-bg{
		padding-top: 48px;
	}
	footer p{
		font-size: 14px;
	}
}