@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

.wrapper {
	width: 100%;
	text-align: center;
}

body {
	-webkit-text-size-adjust: 100%;
	font-family: 'Hiragino Kaku Gothic ProN','Meiryo','sans-serif';
}

/* ナビゲーション */
#nav-drawer {
	display: none;
}

nav {
	z-index: 1;
	position: fixed;
	padding: 20px 0;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: .1em solid #FFF;
	background-color: #119e5c;
	background-image: linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 10px;
}

nav li {
	font-family: 'Kosugi Maru', sans-serif;
	font-weight: bold;
	font-size: 17px;
	display: inline-block;
	list-style: none;
	padding: 0 8px;	
	word-break: break-all;
	text-align: center;	
}

nav a {
	text-decoration: none;
	color: #FFF;
}

nav a:hover {
	color: #fcf049;
}

/* ロゴエリア */
#smp-logo-area {
	display: none;
}

#logo-area {
	width: 100%;
	padding-top: 50px;
}

#logo-area img {
	max-width: 1500px;
	width: 100%;
}

/* SNSアイコン */
#smp-sns {
	display: none;
}

#sns {
	z-index: 1;
	position: fixed;
	top: 92px;
	right: 0;
	width: 6%;
}

#sns img {
	width: 3em;
	margin-bottom: 10px;
	border: .1em solid #FFF;
	border-radius: 50%;
}

/* 画像の拡大 */
#sns img:hover,
#pagetop img:hover {
	transform: scale(1.1,1.1);
}

/* 画像　ホバーで浮き上がる */
.img-hover:hover {
	box-shadow: 7px 7px 7px rgba(0,0,0,0.5);
	transform: translateY(-6px);
	transition-duration: 0.4s;
}

/* ページトップアイコン */
#pagetop {
	z-index: 1;
	position: fixed;
	bottom: 10px;
	right: 8px;
	width: 5%;
}

#pagetop img {
	width: 3.2em;
}

/* section セクション */
section {
	padding: 65px 0;
}

/* クリックで開閉できるエリア（お知らせ） */
/* .cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto .7em;
}

.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.cp_actab label {
	position: relative;
	display: block;
	cursor: pointer;
	margin: 0 0 1px 0;
}

.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #000;
}

.cp_actab input:checked ~ .cp_actab-content {
	max-height: 70em;
} */

/* p 文字の大きさ・幅 */
p {
	line-height: 1.8em;
}

small {
	font-size: 0.8em;
}

/* h2 h3 h4 */
h2 {
	font-family: 'Kosugi Maru', sans-serif;
	color: #56b30a;
	font-size: 2.1em;
	margin-bottom: 1em;
	text-align: center;
	padding: 0.5em;
	border-top: solid 2px #59c500;
	border-bottom: solid 2px #59c500;
	background: -webkit-repeating-linear-gradient(-45deg, #fffbf0, #fffbf0 3px,#ffffe9 3px, #ffffe9 7px);
	background: repeating-linear-gradient(-45deg, #fffbf0, #fffbf0 3px,#ffffe9 3px, #ffffe9 7px);	  
  }

h3 {
	font-family: 'Kosugi Maru', sans-serif;
	color: #f07008;
	font-size: 30px;
	padding-bottom: 14px;
}

h4 {
	font-family: 'Kosugi Maru', sans-serif;
	font-size: 23px;
	color: rgb(5, 199, 108);
	padding-top: 50px;
}

/* 文字の装飾 */
.font-bold {
	font-weight: bold;
}

/* リンク文字の色 */
.link-color:visited {
	color: #00C;
}

/* リンクボタン */
.rinkbutton {
    padding: 0.3em .8em;
    margin: 1.2em 0;
    background: rgb(5, 182, 49);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
    display: inline-block;
}

.rinkbutton:hover {
    background: #CCCC33;
	}

.rinkbutton p a {
    text-decoration: none;
    color:#FFF;
    font-weight: bold;
}

/* #about　概要 */
#about {
	margin-top: 0;
	padding-top: 0;
}

#about img {
	width: 40%;
	margin-bottom: 2.5em;
}

#about dl {
	margin-top: 2.5em;
}

#about dd {
	margin: 0 0 .8em;
}

#about dd:nth-of-type( 1 ) span:nth-of-type( 1 ),
#about dd:nth-of-type( 1 ) span:nth-of-type( 2 ),
#about dd:nth-of-type( 1 ) span:nth-of-type( 3 ) {
	font-size: 1.7em;
}

/* #sponsor スポンサー */
.h2-sponsor span {
	background-color: #4dc166;
	color: #fff;
	margin: 0 0.03em;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5;
	border-radius: 100vh;
}

/* スライドここから */
.slider {
    width: 50%;
    display: flex;
    gap: 50px;
    overflow-x: hidden;
    /* border: 5px solid #c0c0c0; */
	margin: auto;
}
.slide {
    width: 500px;
    /*アニメーション設定*/
    animation-name: slide;
    animation-timing-function: linear;
    animation-duration: 7s;
    animation-iteration-count: infinite;
}
@keyframes slide {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-2600px); 
		/* ↑画像の枚数が増えたらpxの値を大きくする */
    }
}
/* スライドここまで */

/* #news　イベント内容 */
#news h3 {
	padding-top: 1.2em;
}

#news h3:nth-of-type( 1 ) {
	padding-top: 0;
}

#news img {
	width: 50%;
}

.news-mc-img {
	margin: auto;
	width: 850px;
}

.mc-img {
	max-width: 600px;
	display: block;
    margin-left:auto
}

#news .jaf-img {
	width: 28%;
}

#news h5 {
	font-size: 1.5em;
}

hr {
	width: 80%;
	margin: auto;
	text-align: center;
}

/* #booth　参加企業 */
#booth div {
	width: 70%;
	margin: 1em auto;
}

#booth div img {
	padding: .8em 1.3em;
	max-width: 255px;
	max-height: 110px;
}

#booth .logo-big {
	max-width: 300px;
	max-height: 130px; /*小さいロゴを大きく表示させる */
}

/* #access　アクセス */
#access-box {
	margin: 0 auto;
	width: 55%;
}

#access-a-box {
	float: left;
	width: 55%;
}

#access-b-box {
	float: right;
	width: 45%;
}

#access-b-box img {
	width: 78%;
}

#access a {
	font-size: 1.1em;
}

/* #area　エリアマップ */
#area img {
	max-width: 100%;
}

#area h3 {
	margin-top: 1.5em;
}

/* #history　過去の足跡 */
.history-web {
	width: 40%;
	margin: 0 auto;
	padding: 1em 0;
}

#websites-table {
	width: 100%;
	margin: 0 auto;
}

#history h3:nth-of-type( 2 ) {
	padding-top: 2em;
}

#websites-table img {
	width: 80%;
	border-radius: 50%;
}

#history video {
	width: 100%;
}

/* #faq Ｑ＆Ａ */
#faq dl {
	text-align: left;
}

#faq dl {
	margin: 0 auto;
	width: 57%;
}

#faq dt {
	font-size: 1.2em;
	font-weight: bold;
	color: #ff5e00;
}

#faq dd {
	padding-bottom: 1.5em;
}

#faq img {
	width: 70%;
	padding-top: 10px;
}

/* contact-us 出展案内 */
#contact-box {
	width: 50%;
	margin: 0 auto 1em;
	text-align: left;
}

/* #attention　ご注意 */
#attention dl {
	text-align: left;
}

#attention dt {
	font-size: 1.1em;
}

#attention dd {
	margin: 0 0 1em;
}

#attention {
	width: 45%;
	margin: 0 auto 1em;
	padding: 1em 0;
}

/* フッター */
footer {
	background-color: #119e5c;
	color: #FFF;
	font-size: 12px;
	padding: .2em;
}



/* スマホ・タブレット用の表示 */

@media screen and ( max-width: 960px ) {
/* スマホ・タブレット用naviここから */
	nav {
        display: none;
	}
	
	#nav-drawer {
		z-index: 1;
		background-color: #e4af01;
		background-image: linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
		background-size: 10px 10px;
	}

	#nav-drawer li {
		font-family: 'Kosugi Maru', sans-serif;
		font-size: 27px;
		list-style: none;
		padding: .17em 0;
	}

	#nav-content li a {
		text-decoration: none;
		color: #FFF;
	}

	#nav-drawer {
		position: relative;
	}
	  
	/*チェックボックス等は非表示に*/
	.nav-unshown {
		display:none;
	}
	
	/*アイコンのスペース*/
	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
	}
	
	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;/*線の太さ*/
		width: 25px;/*長さ*/
		border-radius: 3px;
		background: #FFF;
		display: block;
		content: '';
		cursor: pointer;
	}

	#nav-open span:before {
		bottom: -8px;
	}

	#nav-open span:after {
		bottom: -16px;
	}
	
	/*閉じる用の薄黒カバー*/
	#nav-close {
		display: none;/*はじめは隠しておく*/
		position: fixed;
		z-index: 99;
		top: 0;/*全体に広がるように*/
		right: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	
	/*中身*/
	#nav-content {
		overflow: auto;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9999;/*最前面に*/
		width: 75%;/*右側に隙間を作る（閉じるカバーを表示）*/
		max-width: 330px;/*最大幅（調整してください）*/
		height: 100%;
		background: #119e5c;/*背景色*/

		background-color: #119e5c;
		/* background-image: linear-gradient(rgba(255,255,255,.2) 50%, transparent 50%); */
		background-size: 10px 10px;

		transition: .3s ease-in-out;/*滑らかに表示*/
		-webkit-transform: translateX(-105%);
		transform: translateX(105%);/*左に隠しておく*/
	}
	
	/*チェックが入ったらもろもろ表示*/
	#nav-input:checked ~ #nav-close {
		display: block;/*カバーを表示*/
		opacity: .5;
	}
	
	#nav-input:checked ~ #nav-content {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);/*中身を表示（右へスライド）*/
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

	#nav-drawer {
		background-color: #119e5c;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		text-align: left;
		padding: 15px 10px;
	}
/* スマホ用naviここまで */

/* snsアイコン */
	#sns {
		display: none;
	}

	#smp-sns {
		display: inline;
		position: fixed;
		top: 0;
		right: 0;
		text-align: right;
		margin: 0 auto;
		/* width: 50%; */
	}

	/* #smp-sns img {
		width: 16%;
		padding: 7px 6px 0 0;
	} */

	#smp-sns img {
		width: 11%;
		padding: 7px 5px 0 0;
	}

/* ページトップアイコン */
	#pagetop {
		z-index: 1;
		width: 2.7em;
		padding-right: 1.5px;
	}

	#pagetop img {
		width: 100%;
	}

/* #about 概要 */
	#about img {
		width: 65%;
	}

/* #sponsor スポンサー */
	.slider {
		width: 90%;
	}

/* #news　イベント内容 */
	#news img {
		width: 70%;
	}

	.news-mc-img{
		width: 80%;
	}

/* #access　アクセス */
	#access-box {
		margin: 0 auto;
		width: 80%;
	}

	#access-b-box img {
		width: 90%;
	}

/* #area　エリアマップ */
	#area img {
		width: 90%;
	}

/* #history　過去の足跡 */
	.history-web {
		width: 70%;
	}

	#websites-table {
		width: 95%;
	}

	#websites-table img {
		width: 85%;
	}

/* #faq　Ｑ＆Ａ */
	#faq dl {
		width: 85%;
	}

/* contact-us 出展案内 */
	#contact-box {
		width: 70%;
	}

/* #attention　ご注意 */
#attention {
	width: 80%;
}

/* 動画 */
.video iframe{
	width: 90%;
}

}



/* スマホ用 */
@media screen and ( max-width: 500px ) {
/* ロゴエリア */
	#logo-area {
		display: none;
	}

	#smp-logo-area {
		display: inline;
	}

	#smp-logo-area img {
		width: 100%;
		padding-top:50px;
		/* padding-bottom: 1px; */
	}

	/* h2 h3 */
	h2 {
		font-size: 1.8em;
	}

	h3 {
		font-size: 1.6em;
	}

	/* about　概要 */
	#about img {
		width: 95%;
	}

	#about .orei2023 {
		width: 100%;
	}

	/* #news　イベント内容 */
	#news img {
		width: 98%;
	}

	.mc-img {
		max-width: 350px;
	}

	#news .jaf-img {
		width: 60%;
	}

	/* #booth　参加企業 */
	#booth div {
		width: 100%;
	}

	#booth div img {	
		max-height: 80px;
		max-width: 40%;
		padding: 2em .8em 0 0;
	}

	#booth .logo-big {
		max-width: 185px;
		max-height: 105px;
	}

	/* #history　過去の足跡 */
	.history-web {
		width: 90%;
	}

	#websites-table {
		width: 100%;
	}

	#websites-table img {
		width: 95%;
	}

	#history video {
		width: 90%;
	}

	/* #faq　Ｑ＆Ａ */
	#faq dl {
		width: 98%;
	}

	#faq img {
		width: 90%;
	}

	/* contact-us 出展案内 */
	#contact-box {
		width: 100%;
	}

	#contact-box img {
		width: 90%;
	}

	/* #attention　ご注意 */
	#attention {
		width: 100%;
	}
}





/***********/
/* clear-fix **/
/**********/
.cf::after {
  clear: both;
  content: "";
  display: block;
}