@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url(https://fonts.googleapis.com/css?family=Modern+Antiqua);

@font-face {
	font-family: 'M PLUS 1p';
	src: url('fonts/MPLUS1p-Regular.ttf') format('truetype');
	/* フォントの他のスタイル（太字や斜体）も使用したい場合は、ここに追加します */
  }

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9  Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
}

a{
	color: #0066ff;
	text-decoration: none;
}

a:hover, .active{
	
 	text-decoration: underline;
}

.link-1 {
	text-decoration: none;
	color: white;
  }
  
  /* リンク1のホバー時のスタイル */
  .link-1:hover {
	color: white;
  }
  
  /* リンク2のスタイル */
  .link-2 {
	text-decoration: none;
	color: blue;
  }
  
  /* リンク2のホバー時のスタイル */
  .link-2:hover {
	color: blue;
  }

a:active, a:focus,input:active, input:focus{outline:0;}


/* フッター
------------------------------------------------------------*/
#footer{
	clear: both;
	padding: 50px 10px 50px 0;
	text-align: center;
	font-size: 12px;
}


/* 共通
------------------------------------------------------------*/
h1, h2{
	font-family: 'M PLUS 1p','Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', serif;
}

img{
	max-width: 100%;
	height: auto;
}

section{
  clear: both;
}

.sp_image{
	padding: 0 0 0 0;
}

.sp_visible{
	display: none;
}

.sp_invisible{
	display: block;
}

section h2 {
    width: 60%;
    margin: 25px auto;
    font-size: 22px;
    font-weight: normal;
    text-align: center;
    position: relative;
}

section h2 span {
    position: relative;
    display: inline-block;
    padding-bottom: 1px;
}

section h2 span::before,
section h2 span::after {
    content: "";
    display: block;
    height: 3px; /* アンダーラインの太さ */
    background-color: #000; /* アンダーラインの色 */
    position: absolute;
    top: 100%; /* 文字の下に配置 */
}

section h2 span::before {
    width: 150%; /* アンダーラインの長さを調整 */
    left: -25%; /* アンダーラインの左側の位置を調整 */
}

section h2 span::after {
    width: 100%; /* アンダーラインの長さを調整 */
    left: 0; /* アンダーラインの中央の位置を調整 */
}

.inner{ 
	width: 80%; /*セクションの横幅 TOP以外*/
	margin: 0 auto;
	padding-bottom: 25px; /*セクションのボトムpx*/
	border-bottom: 1px solid #000;
}

.white{
	color:#fff;
}

.yellow{
	color:#ff0;
}

.logo img {
	display: block;
	margin: 30px auto; /* ロゴを中央に配置 */
}

.red-text {
	color: red; /* クラス名がred-textの要素に赤い色を適用 */
}

.orange-text {
	color: orange; /* クラス名がred-textの要素に赤い色を適用 */
}

.blue-text {
	color: blue; /* クラス名がred-textの要素に赤い色を適用 */
}

.lime-text {
    color: lime;
}

.innerS{
	width: 60%; /*セクションの横幅 現状 TOPのみ*/
	margin: 0 auto;
	font-size: 20px;
	text-align: center;
	padding-bottom: 50px; /*セクションのボトムpx2*/
}

.container{
    display: flex;
	font-size: 16px;
	line-height: 1.3;
    justify-content: space-between;
	font-family: 'Yu Gothic',Verdana, Arial, serif;
	padding-bottom: 50px; /*セクションのボトムpx2*/
}

.column {
    flex: 1;
    margin: 20px;
}



/*スライダ―設定*/
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  
  .gallery-cell {
	width: 100%;
	height: auto;
	min-height: 425px;
	margin-right: 0px;
	text-align: center;
	counter-increment: gallery-cell;

  }

  .sample-cell {
	width: calc(100% / 3);
	height: auto;
	min-height: 425px;
	display: block; /* 画像の周りのスペースを排除 */
	margin-right: 0px;
	text-align: center;
	counter-increment: gallery-cell;

  }

  .sample-cell img {
	width: 100%; /* 画像の幅を親要素に合わせる */
	height: auto; /* 高さは自動で調整 */
	display: block; /* 画像の周りのスペースを排除 */
  }
/* h3
------------------------------------------------------------*/
h3{
	font-family: 'M PLUS 1p', Arial, sans-serif;
	padding: 0,0,0,10px;
	font-size: 14px;
}

h3.left{
	text-align: left;
}

h3.center{
	text-align: center;
}

h3.right{
	text-align: right;
}

/* h4
------------------------------------------------------------*/
h4{
	font-family: 'M PLUS 1p', Arial, sans-serif;
	padding: 0px,0px,10px,0px;
	font-size: 28px;
	padding-bottom: 10px;
}

section h4 span { /*セクションタイトルの余白*/
	padding-bottom: 10px;
	border-bottom: 3px solid #000;
}

h4.left{
	text-align: left;
}

h4.center{
	text-align: center;
}

h4.right{
	text-align: right;
}

.article4 li{
	color: #000;/*文字色*/
	display: inline-block;
	font-size: 24px;
	padding: 0px 0px;/*上下の余白*/
	border-bottom: solid 3px #00FF7F;/*下線*/
}

.article4 span{
	color: #000;/*文字色*/
	padding-bottom: 10px;
	border-bottom: 3px solid #000;
}

/* h5
------------------------------------------------------------*/
h5{
	font-family: 'Yu Gothic',Verdana, Arial, serif !important;
	padding: 0px,0px,10px,0px;
	width: 80%; /*セクションの横幅 TOP以外*/
	margin: 0 auto;
	font-size: 18px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}

h5.left{
	text-align: left;
}

h5.center{
	text-align: center;
}

h5.right{
	text-align: right;
}

.listS{
	width: 400px; /*セクションの横幅 現状 TOPのみ*/
	margin: 0 auto;
	padding-bottom: 50px; /*セクションのボトムpx2*/
}

.link-1 {
	color: white; /* 初期の文字色 */
	text-decoration: none; /* 初期は下線なし */
}
  
.link-1:hover {
	text-decoration: underline; /* ホバー時に下線を表示 */
	text-decoration-color: currentColor; /* 現在の文字色に下線の色を一致させる */
}

.link-2 {
	color: blue; /* 初期の文字色 */
	text-decoration: none; /* 初期は下線なし */
}
  
.link-2:hover {
	text-decoration: underline; /* ホバー時に下線を表示 */
	text-decoration-color: currentColor; /* 現在の文字色に下線の色を一致させる */
}

.listG{
	width: 95%; /*セクションの横幅 現状 TOPのみ*/
	margin: 0 auto;
	line-height: 1.3;
	font-size: 16px;
	padding-bottom: 50px; /*セクションのボトムpx2*/
}

.article4 li{
	color: #000;/*文字色*/
	display: inline-block;
	font-size: 24px;
	padding: 0px 0px;/*上下の余白*/
	border-bottom: solid 3px #00FF7F;/*下線*/
}

/* STORY
------------------------------------------------------------*/
#STORY{
	padding: 0 !important;
}

#gallery{
	overflow: hidden;
}

#gallery li{
	float: left;
	width: calc(100%/4);
	line-height: 0;
}
#gallery li.full{
	width: 100%;
}


#gallery img{
	display: block;
	width: 100%;
	height: auto;
}


/* CHARACTER
------------------------------------------------------------*/

.col4 .img{
	margin: 0 auto;
}



/* SYSTEM
------------------------------------------------------------*/
#SYSTEM{
	padding-bottom: 0 !important;
}

.article{
	font-family: 'M PLUS 1p', Arial, Helvetica, sans-serif;
	clear: both;
	overflow: hidden;
	font-size: 18px;
	padding-bottom: 50px;
}

.article img{
	width: 48%;
	float: left;
	margin: 5px 20px 10px;
}

.article p{
	margin-bottom: 20px;
}

.article li{
	color: #000;/*文字色*/
	display: inline-block;
	font-size: 18px;
	padding: 4px 4px;/*上下の余白*/
	border-bottom: solid 3px #00FF7F;/*下線*/
}


/* GALLERY
------------------------------------------------------------*/
#GALLERY p{
	margin-bottom: 5px;
}

.col2 li{
	display: inline-block;
	width: 100%;
  	margin: 20px 0;
}



/* RESPONSIVE 設定
------------------------------------------------------------*/

@media only screen and (min-width: 601px){
	body{
		font-size: 14px;
		background: linear-gradient(
			90deg,
			#000 0%,
	 		#000 20%,
     		#e9f7f4 20%,
     		#e9f7f4 100%
		);
	}
	
	#wrapper{
		width: 100%;
	}

	#content{
		width: 80%;
		margin: 0 0 0 auto;
		
	}

	/*サイドバー設定*/
	#sidebar{
		width: 16%;
		position: fixed;
		font-family: Arial,ocr-b-std, monospace, 'M PLUS 1p','Noto Sans JP',serif;
		font-size: 24px;
		text-align: right;
		top: 0;
		left: 2%;
		color: #fff;
		background: #000;
	}
	
  	a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
		font-family: 'Arial',serif;
	}
	
	#sidebar h1{
		padding: 30px 0px 0px 0px;
	}
	
	#sns{
		margin-top: 10px;
		text-align: right;
	}
	
	#sns li{
		display: inline-block;
		padding-right: 10px;
	}

	#sns a:hover img{
		opacity: .8;
	}
	
	/* SEC03 BRAND
	-----------------*/
	.col4{
		text-align: center;
	}

	.col4 li{
		display: inline-block;
		font-size: 18px;
		width: 38%;
		padding: 0 3%;
		vertical-align: top;
		text-align: left;
	}
	
	#map iframe{
		height: 200px !important;
  }
	
  #footer{
		padding: 30px 10px 70px 0;
	}
}


@media only screen and (min-width: 601px){
	.col2 li{
		width: 60%;
		vertical-align: top;
	}
	.col2 li:first-child{
		width: 35%;
		padding-right: 4%;
	}
}

@media only screen and (max-width: 900px){
	/*サイドバー設定*/
	#sidebar{
		font-family: Arial,"ocr-b-std", monospace, 'M PLUS 1p','Noto Sans JP',serif;
		width: 16%;
		position: fixed;
		font-size: 12px;
		text-align: right;
		top: 0;
		left: 2%;
		color: #fff;
		background: #000;
		z-index: 100;
	}

	.innerS{
		width: 60%; /*セクションの横幅 現状 TOPのみ*/
		margin: 0 auto;
		font-family: 'M PLUS 1p','Noto Sans JP',serif;
		font-size: 14px;
		text-align: center;
		padding-bottom: 50px; /*セクションのボトムpx2*/
	}

	.sample-cell {
		width: calc(100% / 2);
		height: auto;
		display: block; /* 画像の周りのスペースを排除 */
		margin-right: 0px;
		text-align: center;
		counter-increment: gallery-cell;
	
	  }
}

@media only screen and (min-width:900px) and (max-width:1050px){
	/*サイドバー設定*/
	#sidebar{
		width: 16%;
		position: fixed;
		font-size: 16px;
		text-align: right;
		top: 0;
		left: 2%;
		color: #fff;
		background: #000;
	}

	.innerS{
		width: 60%; /*セクションの横幅 現状 TOPのみ*/
		margin: 0 auto;
		font-family: 'M PLUS 1p','Noto Sans JP',serif;
		font-size: 16px;
		text-align: center;
		padding-bottom: 50px; /*セクションのボトムpx2*/
	}

	.sample-cell {
		width: calc(100% / 2);
		height: auto;
		display: block; /* 画像の周りのスペースを排除 */
		margin-right: 0px;
		text-align: center;
		counter-increment: gallery-cell;
	
	  }
}

@media only screen and (min-width:1050px) and (max-width:1200px){
	/*サイドバー設定*/
	#sidebar{
		width: 16%;
		position: fixed;
		font-size: 20px;
		text-align: right;
		top: 0;
		left: 2%;
		color: #fff;
		background: #000;
	}

	.innerS{
		width: 60%; /*セクションの横幅 現状 TOPのみ*/
		margin: 0 auto;
		font-family: 'M PLUS 1p','Noto Sans JP',serif;
		font-size: 18px;
		text-align: center;
		padding-bottom: 50px; /*セクションのボトムpx2*/
	}

	.sample-cell {
		width: calc(100% / 2);
		height: auto;
		display: block; /* 画像の周りのスペースを排除 */
		margin-right: 0px;
		text-align: center;
		counter-increment: gallery-cell;
	
	  }
}

@media only screen and (max-width: 600px){
	body{
		font-size: 14px;
		background: linear-gradient(
			90deg,
     		#e9f7f4 00%,
     		#e9f7f4 100%
		);
	}

	.logo img {
		display: block;
		max-width: 80%; /* ロゴの最大幅 */
		margin: 0 auto; /* ロゴを中央に配置 */
	}
	
	.sample-cell {
		width: 100%;
		height: auto;
		display: block; /* 画像の周りのスペースを排除 */
		margin-right: 0px;
		text-align: center;
		counter-increment: gallery-cell;
	
	  }

	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		background-color: #000;
		padding: 10px;
		box-sizing: border-box;
		}
		
	.logo img {
		display: block;
		max-height: 60px;
		max-width: 80%;
		margin: 0 auto;
	}
		
	.menu-button {
		background-color: transparent;
		border: none;
		color: #fff;
		font-size: 18px;
		cursor: pointer;
	}
		
	.menu {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 0;
		margin-top: 60px;
		background-color: #000;
		overflow: hidden;
		font-size: 18px;
		transition: width 0.3s ease; /* スライドアニメーションの設定 */
	}
		
	.menu.show {
		width: 250px; /* メニューを表示する幅 */
	}
		
	.menu ul {
		list-style: none;
		padding: 0;
		margin: 20px;
	}
		
	.menu li {
		margin-bottom: 10px;
	}
		
	.menu a {
		color: #fff;
		text-decoration: none;
	}
	
	section h2{ /*セクションタイトル*/
		width: 90%;
		margin: 0 0 0 auto;
		font-size: 25px;
		text-align: center;
	}
	
	section h2 span { /*セクションタイトルの余白*/
		padding-bottom: 5px;
		border-bottom: 3px solid #000;
	}

	#SYSTEM{
		padding-bottom: 0 !important;
		display: inline;
		text-align: left;
	}

	.innerS{
		width: 94%;
		padding-bottom: 10px;
	}
	#gallery li{
		float: none;
		width: 100%;
	}

	.article img{
		width: 100%;
		margin: 0 auto;
	}

	.article{
		clear: both;
		overflow: hidden;
		font-size: 14px;
		padding-bottom: 50px;
	}
	
	.article li{
		color: #000;/*文字色*/
		display: inline-block;
		font-size: 14px;
		padding: 4px 4px;/*上下の余白*/
		border-bottom: solid 3px #00FF7F;/*下線*/
	}

	.article4 li{
		color: #000;/*文字色*/
		display: inline-block;
		font-size: 16px;
		padding: 0px 0px;/*上下の余白*/
		border-bottom: solid 3px #00FF7F;/*下線*/
	}
	
	.listS{
		width: 150%; /*セクションの横幅 現状 TOPのみ*/
		margin: 0 auto;
		padding-bottom: 15px; /*セクションのボトムpx2*/
	}

	/*サイドバー設定*/
	#sidebar{
		width: 100%;
		position: fixed;
		font-size: 12px;
		text-align: right;
		top: 0;
		left: 0%;
		color: #fff;
		background: #000;
	}
	
	#sidebarWrap{
		position: relative;
		width: 100%;
		height: 60px;
		background: #000;
		border-bottom: 1px solid #333;
	}
	
	#sidebar h1{
		text-align: center;
		padding-top: 15px;
	}
	
	#sidebar h1 img{
		width: auto !important;
		max-height: 25px;
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: -10px;
		z-index: 100;
	}

	.col4 li{
		margin: 0 auto 50px;
		display: block;
		text-align: center;
	}
	section h2{
		margin: 55px auto;
	}

	.sp_visible{
		display: block;
	}

	.sp_invisible{
		margin: -55px auto;
	}

	.sp_image{
		padding: 60px 0 0 0px;
	}
}