@charset "UTF-8";
/* CSS Document */

* {
  box-sizing: border-box;
}

html{
	font-size: 62.5%;
	scroll-behavior: smooth;
}
img{
	vertical-align: bottom;
}

body{
	line-height: 1.6;
	margin: 0 auto;
	background:#F2EEE4;
	color:#423E3E;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}
a{
	text-decoration: none;
	color: #423E3E;
}
a img {
		transition: 0.7s ;
		}
a img:hover{
	opacity: 0.6;
}
/*header*/
.Menu {
  list-style: none;
  font-size: 0;
	margin: 30px 0 10px;
}
 
.Menu li {
  width: 100px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
}
 
.Menu li a {
  text-decoration: none;
  color: #423E3E;
}
.achieve{
	color:#FF9900;
	font-weight: bold;
}

.Menu-Group-Item img{
		margin: 0 10px 0 0;
		padding:0 0 5px;
	}
.Menu-Group a {
  padding-bottom: 5px;
  background: 
      linear-gradient(currentColor 0 0) 
      bottom /var(--d, 0) 1px 
      no-repeat;
  transition:0.5s;
}
.Menu-Group a:hover {
  --d: 100%;
}

header button,
div .language{
	display: none;
}


/*ここから下がハンバーガーメニューのスタイル*/
.gnavi__sp-style,
.menu-btn{
  display: none;
}
/*works-list*/


.colom{
	display: flex;
	justify-content: center;
	-webkit-justify-content: center;
}

@media (max-width: 900px) {
	/*menu*/
div .language{
	display: block;
	position: absolute;
	width: 100px;
  right : 30px;
  top   : 20px;
  cursor: pointer;
  text-align: center;
}
	.Menu-Group-Item img{
		
	}

.language img {
		margin: 0 10px 0 0;
		padding:0 0 4px;
	}
	
	.Menu-Group li{
	display: none;
}
	
.gnavi__pc-style {
  display: none;    
}
.gnavi__sp-style {
  display: block;
}

/*メニューボタン　展開前*/
.menu-btn {
  display : block;
  position: fixed;
  z-index : 3;
  left : 30px;
  top   : 20px;
  width : 42px;
  height: 42px;
  cursor: pointer;
  text-align: center;
}
.menu-btn span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #FF9900;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.menu-btn span:nth-of-type(1) {
  top: 10px;
}
.menu-btn span:nth-of-type(2) {
  top: 20px;
}
.menu-btn span:nth-of-type(3) {
  top: 30px;
}
  
/*メニューボタン　展開後*/
.menu-btn.active span:nth-child(1) {
  top : 16px;
  left: 6px;
  background :#423E3E;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
.menu-btn.active span:nth-child(2),
.menu-btn.active span:nth-child(3) {
  top: 16px;
  background :#423E3E;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

/*スマホ用のメニュー*/
.gnavi__sp-style {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  color: #423E3E;
  background-color: rgba(255,153,0,1);
  text-align: center;
  width: 100%;
	height: 100vh;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
	display: flex;
	align-items: center;
	visibility: hidden;
}
.gnavi__sp-style ul {
  margin: 0 auto;
  padding: 0;
  width: 100%;
}
.gnavi__sp-style ul li {
  list-style-type: none;
  padding: 0;
  width: 100%;
  transition: .4s all;
}
.gnavi__sp-style ul li:last-of-type {
  padding-bottom: 0;
}
.gnavi__sp-style ul li:hover{
  background :#fff;
}
.gnavi__sp-style ul li a {
  display: block;
  color: #423E3E;
  padding: 1em 0;
  text-decoration :none;
}
.gnavi__sp-style.active {
  opacity: 1;
	visibility: visible;
}
	.gnavi__sp-style img{
		margin:0 7px 3px;
	}
	.works-list{
	display: flex;
	display: -webkit-flex;
	align-items: center;
	flex-flow:column;
	justify-content: space-around;
	-webkit-justify-content: space-around;
}
}