@charset "utf-8";

body {
	background: #ffffef;
}
/*ヘッダー
---------------------------------------------------------------------------*/
#header{
	background-image: url(../img/top_mainback.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center bottom;
	width: 90%;
	margin: 0px;
	padding: 5%;
	text-align: center;
}

/*トップページ
---------------------------------------------------------------------------*/
.main_flex {
	width: 90%;
	margin-left: 5%;
	margin-right: 5%;
	display: flex;
}
.top_select {
	width: 16.5%;
	margin: 2%;
	border: 8px solid #fff;
	box-sizing: border-box;
	border-radius: 10px;
	box-shadow: 3px 3px 3px rgba(170,170,170,0.6);
	padding: 1.5%;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.t_s_btn {
	color: #fff;
	font-size: 22px;
	font-weight: 800;
}
.tsb01 {
	background: #83c8a6;
}
.tsb01:hover {
	background: #46c182;
}
.tsb02 {
	background: #7fa6ce;
}
.tsb02:hover {
	background: #5391c8;
}
.tsb03 {
	background: #97c957;
}
.tsb03:hover {
	background: #69c232;
}
.tsb04 {
	background: #dcc654;
}
.tsb04:hover {
	background: #dcb81e;
}
.tsb05 {
	background: #80cbcd;
}
.tsb05:hover {
	background: #50c1c3;
}
.top_select:hover {
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
}


/*　展示会写真　*/
.view_photobox {
	width: 90%;
	margin: 2.5em 5%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.v_photo {
	width: 31%;
	margin-bottom: 3%;
}
.v_photo img {
	border-radius: 10px;
}
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* 表示状態（スクロールで付与されるクラス） */
.fade-in.show {
	opacity: 1;
	transform: translateY(0);
}

/*　展示会風景スライドショー　*/
.v_sliderbox {
	display: none;
}

@media screen and (max-width: 1099px) {
   .v_photo { width:48%; }
}
/* ▼表示領域が700px未満の場合 */
@media screen and (max-width: 699px) {
   .view_photobox { display:none; }
   .v_sliderbox { display:block; max-width:100%; margin-bottom:5em; }
   .slick-prev:before, .slick-next:before { color:#000;}
   .slider { margin:30px auto 0; max-width:400px; height:250px; }
   .slider.slick-initialized { opacity:1; visibility:visible; }
   .slick-img img { height:auto; width:100%; border-radius:10px; }
}
@media screen and (max-width: 439px) {
   .slider { max-width:280px; height:175px; }
   .slider img { height:175px; }
}

/*　展示会の歩き方　*/
.by_ue {
	bottom: -1px;
}
.by_ue img {
	width: 100%;
}
.arukikata_box {
	position: relative;
	background: #ffffef;
	border-radius: 30px;
	z-index: 1;
}
.arukikata_box::after {
	content: "";
	position: absolute;
	top: -25px;
	left: 50%;
	transform: translateX(-50%);
	width: 190px;
	height: 190px;
	background: #ffffef;
	border-bottom: none;
	border-radius: 50%;
	box-sizing: border-box;
	z-index: -1;
}
.aruku_in {
	padding: 5% 3%;
	text-align: center;
}
.aruku_p {
	font-size: 120%;
	font-weight: 800;
	color: #fc4a46;
}
.aruku_line {
	border: none;
	border-top: 4px dotted #fcdc14;
	width: 16%;
	margin: 0 auto;
	margin-top: 1em;
	margin-bottom: 2em;
}
.ar_flex {
	display: flex;
	border-radius: 15px;
	flex-wrap: wrap;
	position: relative;
	margin-top: 2em;
	background: #fff;
}
.arf01 {
	border: 4px solid #f4415a;
	box-sizing: border-box;
}
.arf02 {
	border: 4px solid #ff7d00;
	box-sizing: border-box;
}
.arf03 {
	border: 4px solid #50b41e;
	box-sizing: border-box;
}
.ar_merit1st {
	position: absolute;
	width: 140px;
	height: 140px;
	border-radius: 50%;
	margin-top: -30px;
	margin-left: -20px;
	display: grid;
	place-content: center;
}
.ar_merit1st h1 {
	font-size: 30px;
	color: #fff;
	line-height: 1.2;
}
.arm1-1 {
	background: #ff4162;
}
.arm1-2 {
	background: #ff7d00;
}
.arm1-3 {
	background: #50b41e;
}
.ar_merit2nd {
	width: 29.3%;
	margin: 2%;
}
.arm2-1 h2 {
	color: #f4415a;
	font-weight: 800;
}
.arm2-2 h2 {
	color: #ff7d00;
	font-weight: 800;
}
.arm2-3 h2 {
	color: #50b41e;
	font-weight: 800;
}
.ar_merit_last {
	width: 100%;
	color: #fff;
	font-size: 110%;
	font-weight: 600;
	padding: 0.5em;
}
.arm3-1 {
	background: #ff4162;
}
.arm3-2 {
	background: #ff7d00;
}
.arm3-3 {
	background: #50b41e;
}





/*---------------------------------------------------------------------------*/

/* ▼表示領域が1600px未満の場合 */
@media screen and (max-width: 1450px) {
   .main_flex { flex-wrap:wrap; }
   .top_select { width:29%; }
}

/* ▼表示領域が1200px未満の場合 */
@media screen and (max-width: 1199px) {
   .ar_flex { margin-top:70px; border-radius:0 15px 15px 15px; }
   .ar_merit1st { width:50%; height:60px; border-radius:15px 15px 0 0; margin-top:-60px; margin-left:-4px; }
}

/* ▼表示領域が960px未満の場合 */
@media screen and (max-width: 959px) {
   #contents { width:100%; }
}

/* ▼表示領域が700px未満の場合 */
@media screen and (max-width: 699px) {
   #header { width:60%; padding:10% 20% };
   
   .aruku_in { padding:5%; }
   .ar_merit1st { width:74%; }
   .ar_merit1st h1 { font-size:27px; }
   .ar_merit2nd { width:90%; margin:0 auto; margin-top:3%; margin-bottom:3%; }
   .ar_flex img { width:100px; }
}

/* ▼表示領域が600px未満の場合 */
@media screen and (max-width: 599px) {
   .top_select { width:100%; }
   .t_s_btn img { width:80px; }
}