@charset "UTF-8";

* {
	margin: 0;
	padding: 0;}

body {
	position: relative;
	left: 0;
	top: 0;
	max-width: 100%;
}

.box11 {
	display: block;
	width: 100%;
	max-width: 2000px;}

  .slider {
    width: 90%;
    margin: 0 auto 80px;}
  .slick-slide img {
    width: 100%;
    height: auto;}
  .mypattern{
    width: 100%;}
  .mypattern .slick-slide{
    margin: 5px;}
  .hd_am {
	margin: 0 0 30px 0;
	width: 100%;}	

  
  .slick-prev,
  .slick-next {
	  visibility: hidden;
	  width: 0;
	  height: 0;}
  .slick-prev,
  .slick-next {
	  left: 0;
	  right: 0;}


  .bgcol01 {
	  background-color: #f5fafd;
	  border: solid 2px #73ccea;}
  .bgcol02 {
	  background-color: #fefafb;
	  border: solid 2px #f19db5;}
  .bgcol03 {
	  background-color: #f7fbf7;
	  border: solid 2px #5aac5f;}
  .bgcol04 {
	  background-color: #f8f9fa;
	  border: solid 2px #7883a5;}
  .bgcol05 {
	  background-color: #f5fafc;
	  border: solid 2px #3992b4;}
  .bgcol06 {
	  background-color: #f8f8f8;
	  border: solid 2px #6c6c6c;}

  .titleArea {
	  width: 100%;
	  text-align: center;
	  display: block;
	  margin: 50px auto 10px;}
      .titleArea h2 {
		  font-size: 2.3em;
		  line-height: 2.3em;
		  font-weight: bold;}


/*SpSize*/
@media screen and (max-width: 413px) {
	
	#toppage {
		position: relative;
		width: 100%;
		left: 0;
		right: 0;
		margin: 0 auto}
	    .slideArea {
			display: flex;
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;}
	        .slideArea a {
				min-width: 100%;
				max-width: 2000px;
				animation: sliderAnime 50s ease-in-out infinite;}
				.slideArea img {
					width: 100%;
					z-index: 5;}
	    .slideNext {
			display: block;
			margin-top: 0;}
	    .pickArea {
			overflow:hidden;
			display: block;
			margin-bottom: 20px;
			width: 100%;}
	        .pickArea ul {
				display: inline-block;
				text-align: center;
				width: 100%;}
	            .pickArea ul li {
					position: relative;
					display: inline-block;
					width: 100%;
					margin-top: 2px;
					vertical-align: top;}
	                .pickArea > li a:link {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:visited {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:active {
						text-decoration:none;
						color: #fff;}
	                .pickArea > li a:hover {
						text-decoration:none;
						opacity: 1;
						color: #fff;}
	                .pickArea img {
						width: 100%;
						height: 100px;
						object-fit: cover;}
	                .pickArea li a span {
						position: absolute;
						bottom: -60px;
						left:0;
						padding: 5px 10px;
						font-size: 1.4em;
						line-height: 1.5em;
						color: #fff;
						text-align: left;
						width: 100%;
						height: 60px;
						-webkit-transition: 0.7s;
						-moz-transition:  0.7s;
						-ms-transition: 0.7s;
						-o-transition: 0.7s;
						transition: 0.7s;}
	
	    .checkArea {
			position: relative;
			display: block;
			width: 100%;}
	        .checkArea ul {
				display: inline-block;
				width: 100%;}
	            .checkArea li {
					display: inline-block;}
			        .checkLeft {
						width: 50%;
						height: 50px;
						padding-top: 10px;
						text-align: center;
						vertical-align: middle;
						clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
						background-color: #ff7f2b;}
			            .checkLeft img {
							display: inline-block;
							vertical-align: middle;
							margin-left: 5%;
							width: 10%;
							max-width: 20px;}
			            .checkLeft span {
							display: inline-block;
							width: 70%;
							margin-right: 10%;
							vertical-align: middle;
							font-size: 1.3em;
							font-weight: bold;
							color: #fff;}
			        .checkCenter {
						width: 45%;
						height: 30px;
						text-align: left;
						padding-left: 20px;
						padding-top: 10px;
						vertical-align: top;	}
			            .checkCenter span {
							display: block;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 1.3em;
							font-weight: bold;
							color: #333;}
			        .checkRight {
						position: absolute;
						top: 25px;
						right: 5%;
						width: 45%;
						height: 20px;
						margin: -1px;
						text-align: right;
						vertical-align: middle;
						background-color: #fff;}
			            .checkRight a {
							display: inline-block;
							width: 100%;
							height: 100%;
							padding-top: 10px;
							font-size: 1.3em;
							font-weight: bold;
							color: #ff7f2b;}
	    .topicArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
	        .topicArea ul {
				display: inline-block;
				width: 100%;}
	            .topicArea li {
					display: inline-block;
					width: 45%;
					vertical-align: top;
					margin: 10px 0.5% 20px;
					text-align: left;}
	                .topicArea img {
						display: block;
						width: 100%;
						margin-bottom: 5px;
						vertical-align: top;}
	                .topicArea p {
						display: block;
						width: 100%;
						vertical-align: top;
						color: #191919;
						font-size: 1.2em;
						padding: 2%;}
	                    .topicArea span {
							display: block;
							width: 100%;
							font-size: 0.7em;
							padding-bottom: 5px;
							margin-bottom: 5px;
							border-bottom: dotted 3px #333;}
	    .lBtn {
			position: relative;
			display: block;
			width: 100%;
			height: 80px;
			margin-top: 30px;
			text-align: center;}
	        .tpBtn {
				color: #fff;
				font-size: 1.6em;
				font-weight: bold;
				padding: 5px 20px;
				background-color: #333;
				border-radius: 100vh;
				border-bottom: 5px solid #21CBFF;}
                .tpBtn:hover {
					margin-top: 3px;
					border-bottom: 2px solid #21CBFF;}
	
	    .underArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
		    .underArea ul {
				display: inline-block;}
		        .underArea li {
					display: inline-block;
					text-align: center;
					margin-bottom: 5px;
					width: 100%;
					height: 90px;}
	                .underArea span {
						display: inline-block;
						color: #333;
						width: 60%;
						line-height: 90px;
						vertical-align: middle;
						margin-right: 5%;
						font-size: 1.7em;
						font-weight: bold;}
	                .underArea img {
						display: inline-block;
						vertical-align: middle;
						max-width: 30%;
						max-height: 80px;}
	
}
/*TabSize*/
@media screen and (min-width: 414px) {

	#toppage {
		position: relative;
		width: 100%;
		left: 0;
		right: 0;
		margin: 0 auto}
	    .slideArea {
			display: flex;
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;}
	        .slideArea a {
				min-width: 100%;
				max-width: 2000px;
				animation: sliderAnime 50s ease-in-out infinite;}
				.slideArea img {
					width: 100%;
					z-index: 5;}
	    .slideNext {
			display: block;
			margin-top: 0;}
	    .pickArea {
			overflow:hidden;
			display: block;
			margin-bottom: 20px;
			width: 100%;}
	        .pickArea ul {
				display: inline-block;
				text-align: center;
				width: 100%;}
	            .pickArea ul li {
					position: relative;
					display: inline-block;
					width: 49%;
					margin-top: 5px;
					vertical-align: top;}
	                .pickArea > li a:link {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:visited {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:active {
						text-decoration:none;
						color: #fff;}
	                .pickArea > li a:hover {
						text-decoration:none;
						opacity: 1;
						color: #fff;}
	                .pickArea img {
						width: 100%;
						height: 150px;
						object-fit: cover;}
	                .pickArea li a span {
						position: absolute;
						bottom: -60px;
						left:0;
						padding: 5px 10px;
						font-size: 1.4em;
						line-height: 1.5em;
						color: #fff;
						text-align: left;
						width: 100%;
						height: 60px;
						-webkit-transition: 0.7s;
						-moz-transition:  0.7s;
						-ms-transition: 0.7s;
						-o-transition: 0.7s;
						transition: 0.7s;}
						.pickArea li:hover span {
							bottom: 0;
							background: rgba(0,0,0,0.6);}
	
	    .checkArea {
			position: relative;
			display: block;
			width: 100%;}
	        .checkArea ul {
				display: inline-block;
				width: 100%;}
	            .checkArea li {
					display: inline-block;}
			        .checkLeft {
						width: 30%;
						height: 40px;
						padding-top: 10px;
						text-align: center;
						vertical-align: middle;
						clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
						background-color: #ff7f2b;}
			            .checkLeft img {
							display: inline-block;
							vertical-align: middle;
							margin-left: 5%;
							width: 10%;
							max-width: 20px;}
			            .checkLeft span {
							display: inline-block;
							width: 70%;
							margin-right: 10%;
							vertical-align: middle;
							font-size: 1.4em;
							font-weight: bold;
							color: #fff;}
			        .checkCenter {
						width: 45%;
						height: 40px;
						text-align: left;
						padding-left: 20px;
						padding-top: 10px;
						vertical-align: middle;	}
			            .checkCenter span {
							display: block;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 1.4em;
							font-weight: bold;
							color: #333;}
			        .checkRight {
						position: absolute;
						right: 1px;
						width: 20%;
						height: 40px;
						margin: -1px;
						text-align: center;
						vertical-align: middle;
						background-color: #ff7f2b;}
			            .checkRight a {
							display: inline-block;
							width: 100%;
							height: 100%;
							padding-top: 10px;
							font-size: 1.4em;
							font-weight: bold;
							color: #ff7f2b;	
							clip-path: polygon(-20% -10%, 85% -10%, 100% 110%, 0% 110%);
							background-color: #fff;}
	    .topicArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
	        .topicArea ul {
				display: inline-block;
				width: 100%;}
	            .topicArea li {
					display: inline-block;
					width: 23%;
					vertical-align: top;
					margin: 10px 0.5% 20px;
					text-align: left;}
	                .topicArea img {
						display: block;
						width: 100%;
						margin-bottom: 5px;
						vertical-align: top;}
	                .topicArea p {
						display: block;
						width: 100%;
						vertical-align: top;
						color: #191919;
						font-size: 1.2em;
						padding: 2%;}
	                    .topicArea span {
							display: block;
							width: 100%;
							font-size: 0.7em;
							padding-bottom: 5px;
							margin-bottom: 5px;
							border-bottom: dotted 3px #333;}
	    .lBtn {
			position: relative;
			display: block;
			width: 100%;
			height: 80px;
			margin-top: 30px;
			text-align: center;}
	        .tpBtn {
				color: #fff;
				font-size: 1.6em;
				font-weight: bold;
				padding: 5px 20px;
				background-color: #333;
				border-radius: 100vh;
				border-bottom: 5px solid #21CBFF;}
                .tpBtn:hover {
					margin-top: 3px;
					border-bottom: 2px solid #21CBFF;}
	
	    .underArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
		    .underArea ul {
				display: inline-block;}
		        .underArea li {
					display: inline-block;
					text-align: center;
					margin-bottom: 5px;
					width: 49%;
					height: 90px;}
	                .underArea span {
						display: inline-block;
						color: #333;
						width: 60%;
						line-height: 90px;
						vertical-align: middle;
						margin-right: 5%;
						font-size: 1.7em;
						font-weight: bold;}
	                .underArea img {
						display: inline-block;
						vertical-align: middle;
						max-width: 30%;
						max-height: 80px;}
	
	@media screen and (max-width: 580px) {
			        .checkLeft {
						width: 45%;}
			        .checkCenter {
						width: 35%;}}
	@media screen and (max-width: 649px) {
	                .underArea span {
						font-size: 3vw;}}
}
/*PcSize*/
@media screen and (min-width: 1025px) {
	
	#toppage {
		position: relative;
		width: 100%;
		max-width: 2000px;
		left: 0;
		right: 0;
		margin: 0 auto}
	    .slideArea {
			display: flex;
			width: 100%;
			margin: 0 auto 20px;
			overflow: hidden;
			flex-flow: row nowrap;
			justify-content: flex-start;
			align-items: center;}
	        .slideArea a {
				min-width: 100%;
				max-width: 2000px;
				animation: sliderAnime 50s ease-in-out infinite;}
				.slideArea img {
					width: 100%;
					z-index: 5;}
	    .slideNext {
			display: block;
			margin-top: 0;}
	    .pickArea {
			overflow:hidden;
			display: block;
			margin-bottom: 20px;
			width: 100%;}
	        .pickArea ul {
				display: inline-block;
				text-align: center;
				width: 100%;}
	            .pickArea ul li {
					position: relative;
					display: inline-block;
					width: 24.6%;
					margin-top: 0;
					vertical-align: top;}
	                .pickArea > li a:link {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:visited {
						text-decoration: none;
						color: #fff;}
	                .pickArea > li a:active {
						text-decoration:none;
						color: #fff;}
	                .pickArea > li a:hover {
						text-decoration:none;
						opacity: 1;
						color: #fff;}
	                .pickArea img {
						width: 100%;
						height: 250px;
						object-fit: cover;}
	                .pickArea li a span {
						position: absolute;
						bottom: -60px;
						left:0;
						padding: 5px 10px;
						font-size: 1.4em;
						line-height: 1.5em;
						color: #fff;
						text-align: left;
						width: 100%;
						height: 60px;
						-webkit-transition: 0.7s;
						-moz-transition:  0.7s;
						-ms-transition: 0.7s;
						-o-transition: 0.7s;
						transition: 0.7s;}
						.pickArea li:hover span {
							bottom: 0;
							background: rgba(0,0,0,0.6);}
	    .checkArea {
			position: relative;
			display: block;
			margin-bottom: 20px;
			width: 100%;}
	        .checkArea ul {
				display: inline-block;
				width: 100%;}
	            .checkArea li {
					display: inline-block;}
			        .checkLeft {
						width: 17%;
						height: 40px;
						padding-top: 10px;
						text-align: center;
						vertical-align: middle;
						clip-path: polygon(0 0, 94% 0, 100% 100%, 0% 100%);
						background-color: #ff7f2b;}
			            .checkLeft img {
							display: inline-block;
							vertical-align: middle;
							margin-left: 5%;
							width: 10%;
							max-width: 20px;}
			            .checkLeft span {
							display: inline-block;
							width: 70%;
							margin-right: 10%;
							vertical-align: middle;
							font-size: 1.4em;
							font-weight: bold;
							color: #fff;}
			        .checkCenter {
						width: 75%;
						height: 40px;
						text-align: left;
						padding-left: 20px;
						padding-top: 10px;
						vertical-align: middle;}
			            .checkCenter a {
							text-decoration: none;}
			            .checkCenter span {
							display: block;
							width: 100%;
							font-size: 1.4em;
							font-weight: bold;
							color: #333;}
			        .checkRight {
						position: absolute;
						right: 1px;
						width: 10%;
						height: 40px;
						margin: -1px;
						text-align: center;
						vertical-align: middle;
						background-color: #ff7f2b;}
			            .checkRight a {
							display: inline-block;
							text-decoration: none;
							width: 100%;
							height: 100%;
							padding-top: 10px;
							font-size: 1.4em;
							font-weight: bold;
							color: #ff7f2b;	
							clip-path: polygon(-20% -10%, 85% -10%, 100% 110%, 0% 110%);
							background-color: #fff;}
	    .topicArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
	        .topicArea ul {
				display: inline-block;
				width: 100%;}
	            .topicArea li {
					display: inline-block;
					width: 15%;
					vertical-align: top;
					margin: 10px 0.5% 20px;
					text-align: left;}
	                .topicArea img {
						display: block;
						width: 100%;
						margin-bottom: 5px;
						vertical-align: top;}
	                .topicArea p {
						display: block;
						width: 100%;
						vertical-align: top;
						color: #191919;
						font-size: 1.2em;
						padding: 2%;}
	                    .topicArea span {
							display: block;
							width: 100%;
							font-size: 0.7em;
							padding-bottom: 5px;
							margin-bottom: 5px;
							border-bottom: dotted 3px #333;}
	    .lBtn {
			position: relative;
			display: block;
			width: 100%;
			height: 80px;
			margin-top: 30px;
			text-align: center;}
	        .tpBtn {
				color: #fff;
				font-size: 1.6em;
				font-weight: bold;
				padding: 5px 20px;
				background-color: #333;
				border-radius: 100vh;
				border-bottom: 5px solid #21CBFF;}
                .tpBtn:hover {
					margin-top: 3px;
					border-bottom: 2px solid #21CBFF;}
	    .underArea {
			position: relative;
			display: block;
			width: 100%;
			text-align: center;}
		    .underArea ul {
				display: inline-block;
				width: 100%;}
		        .underArea li {
					display: inline-block;
					text-align: center;
					margin-bottom: 5px;
					width: 33%;
					height: 90px;}
	                .underArea a {
						text-decoration: none;}
	                .underArea span {
						display: inline-block;
						color: #333;
						width: 60%;
						line-height: 90px;
						vertical-align: middle;
						margin-right: 5%;
						font-size: 1.7em;
						font-weight: bold;}
	                .underArea img {
						display: inline-block;
						vertical-align: middle;
						max-width: 30%;
						max-height: 80px;}
						
	
}