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

#main_visual.for_grid-container {
	height: inherit;
	background-color: inherit;
	padding-top: 50px;
}
#contents #main_visual.for_grid-container h2.cate_03 {
	background-color: #207b51;
	text-align: center;
	padding: 10px;
	font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", sans-serif !important;
	font-weight: 400;
	border-radius: 2em;
	font-size: 2.4em;
	margin-bottom: 50px;
}
@media screen and (max-width: 680px) {
#contents #main_visual.for_grid-container h2.cate_03 {
	font-size: 24px;
	margin: 0 10px 50px;
}
}
#main_visual .inner:nth-child(1) {
	height: inherit;
}
.articles_wrap {
  padding: 0 20px 80px;
}
#main_visual.for_grid-container, .articles_wrap {
	background-color: rgb(68, 68, 68);
}
.grid-container {
  display: grid;
  grid-gap: 15px;
  max-width: 1400px !important;
  margin: 0 auto;
  grid-template-columns: repeat(4, 1fr);
}
.grid-container h3 {
	color: #333333;
	border: none;
	padding: 0;
	font-family: 'BIZ UDPGothic', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "ＭＳ Ｐゴシック", sans-serif !important;
	font-weight: 400;
	font-size: 20px;
	text-shadow: 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px -2px 2px #fff;
	text-align: left;
}
@media screen and (min-width: 681px) and (max-width: 959px) {
.grid-container h3 {
	font-size: 16px;
}
}
.grid-container h3:nth-child(1) {
	padding: 0 0 0 30px;
}
.grid-container h3:nth-child(1)::before {
	content: "";
	width: 8px;
	height: 32px;
	background-color: #336699;
	display: inline-block;
	margin-left: -20px;
	position: absolute;
	border-radius: 4px;
}
.menu03 .grid-container {
  /*grid-template-columns: repeat(4, minmax(250px, 1fr));*/
/*  grid-template-rows: 250px 250px 150px;*/
  grid-template-rows: 250px 250px;
}
@media screen and (min-width: 681px) and (max-width: 959px) {
.menu03 .grid-container {
/*  grid-template-columns: repeat(3, minmax(250px, 1fr));*/
/*  grid-template-columns: 160px 1fr 1fr 1fr;*/
/*  grid-template-rows: 350px 350px 150px;*/
  grid-template-rows: 350px 350px;
}
}
.menu03 .grid-container.set2 {
	/* grid-template-columns: repeat(4, minmax(250px, 1fr)); */
	grid-template-rows: 200px 200px;
}
.menu03 .grid-container.set3 {
	/* grid-template-columns: repeat(4, minmax(250px, 1fr)); */
	grid-template-rows: 200px;
}
.grid-container.set2, .grid-container.set3 {
	margin-top: 40px;
	border-top: 2px dotted rgba(255,255,255,0.8);
	padding-top: 40px;
}
@media screen and (max-width: 680px) {
.menu03 .grid-container {
  grid-template-columns: 1fr;
  grid-template-rows: 400px 200px 200px 200px 200px 200px 200px 250px;
}
}
@media screen and (max-width: 680px) {
.menu03 .grid-container.set2 {
  grid-template-columns: 1fr;
  grid-template-rows: 60px 200px 200px 200px;
}
}
@media screen and (max-width: 680px) {
.menu03 .grid-container.set3 {
  grid-template-columns: 1fr;
  grid-template-rows: 300px;
}
}

.grid-container .grid-item {
	padding: 0;
	border-radius: 6px;
}
.menu03 .grid-container .grid-item.g1 {
  grid-row: 1 / 4;
}
.menu03 .grid-container .grid-item.g8 {
  grid-column: 2 / 5;
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g1, .menu03 .grid-container .grid-item.g8 {
	grid-column: inherit;
	grid-row: inherit;
}
}
.menu03 .grid-container .grid-item.g9 {
	grid-column: 1/ 2;
	grid-row: 1 / 3;
}
.menu03 .grid-container .grid-item.g10 {
	grid-column: 3/ 5;
	grid-row: 1 / 3;
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g9, .menu03 .grid-container .grid-item.g10{
  grid-column: inherit;
	grid-row: inherit;
}
}
.menu03 .grid-container .grid-item.g13 {
	grid-column: 1/ 5;
	grid-row: 1 / 2;
}
.grid-container a {
	display: block;
	height: 100%;
	padding: 15px;
}
.grid-container div.grid-item {
  transform: scale(1);
  transition: .1s ease-out;
}
.grid-container div.grid-item:hover {
	transform: scale(1.02);
	transition: .1s ease-out;
	opacity: 1;
	box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.8);
	background-color: #ffffff;
}

.grid-container .grid-item:nth-child(2n+1) {
  background: #ffffff;
}
.grid-container .grid-item:nth-child(2n) {
  background: #eeeeee;
}
.menu03 .grid-container .grid-item {
  background-color: #ffffff;
}
.menu03 .grid-container .grid-item.g1 {
  background-image: url("../camp/img/imagebg_campaignbox.jpg");
  background-size: 640px;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-position: 0% -20%;
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g1 {
	background-size: 290px;
	background-position: right -20%;
}
}
.menu03 .grid-container .grid-item.g2 {
	background-image: url("../camp/img/type_serial.png");
	background-size: 180px;
	background-repeat: no-repeat;
	background-position: calc(100% + 50px) calc(100% + 20px);
}
.menu03 .grid-container .grid-item.g3 {
	background-image: url("../camp/img/type_enquete.png");
	background-size: 180px;
	background-repeat: no-repeat;
	background-position: calc(100% + 30px) calc(100% + 15px);
}
.menu03 .grid-container .grid-item.g4 {
	background-image: url("../camp/img/type_point.png");
	background-size: 200px;
	background-repeat: no-repeat;
	background-position: calc(100% + 60px) calc(100% + 0px);
}
.menu03 .grid-container .grid-item.g5 {
  background-image: url("../camp/img/type_stamp.png");
  background-size: 180px;
  background-repeat: no-repeat;
  background-position: calc(100% + 40px) calc(100% + 30px);
}
.menu03 .grid-container .grid-item.g6 {
  background-image: url("../camp/img/type_api.png");
  background-size: 170px;
  background-repeat: no-repeat;
  background-position: calc(100% + 40px) calc(100% + 20px);
}
.menu03 .grid-container .grid-item.g7 {
	background-image: url("../../img/icon_place.png");
	background-size: 180px;
	background-repeat: no-repeat;
	background-position: calc(100% + 50px) calc(100% + 10px);
}
.menu03 .grid-container .grid-item.g8 {
	background-image: url("../camp/guide/img/image_typeinfomenu.png");
	background-size: 30%;
	background-repeat: no-repeat;
	background-position: calc(100% - 0px) center;
}
.menu03 .grid-container .grid-item.g10 {
  background-image: url(../board/img/img_board_community.jpg);
  background-size: 200%;
  background-repeat: no-repeat;
background-position: left center;
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g10 {
	background-size: cover;
	background-position: center center;
}
}
.menu03 .grid-container .grid-item.g11 {
  background-image: url(../orderbox/img/mainimage_OrderBOX.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.menu03 .grid-container .grid-item.g13 {
	background-image: url(../../img/bg_support.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center calc(100% + -66%);
}
.menu03 .grid-container .grid-item.g10 h3, .menu03 .grid-container .grid-item.g11 h3, .menu03 .grid-container .grid-item.g12 h3, .menu03 .grid-container .grid-item.g13 h3 {
  color: #ffffff !important;
  font-size: 22px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.3), 1px -1px 1px rgba(0,0,0,0.3), -1px -1px 1px rgba(0,0,0,0.3);
}
@media screen and (min-width: 960px) {
.menu03 .grid-container .grid-item.g2, .menu03 .grid-container .grid-item.g3, .menu03 .grid-container .grid-item.g4, .menu03 .grid-container .grid-item.g5, .menu03 .grid-container .grid-item.g6, .menu03 .grid-container .grid-item.g7 {
	background-size: 120px;
	background-position: calc(100% + 10px) calc(100% + 10px);
}
}
@media screen and (min-width: 681px) and (max-width: 959px) {
.menu03 .grid-container .grid-item.g2, .menu03 .grid-container .grid-item.g3, .menu03 .grid-container .grid-item.g4, .menu03 .grid-container .grid-item.g5, .menu03 .grid-container .grid-item.g6, .menu03 .grid-container .grid-item.g7 {
	background-size: 70% !important;
	background-position: center bottom !important;
}
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g2, .menu03 .grid-container .grid-item.g3, .menu03 .grid-container .grid-item.g4, .menu03 .grid-container .grid-item.g5, .menu03 .grid-container .grid-item.g6, .menu03 .grid-container .grid-item.g7 {
	background-size: 30% !important;
	background-position: right calc(100% + 0px);
}
}
@media screen and (max-width: 680px) {
.menu03 .grid-container .grid-item.g8 {
	background-size: 120px;
  background-position: calc(100% - -20px) calc(100% + 0px);
}
}
.grid-container .grid-item.current {
	border: 4px solid rgb(219, 135, 64);
	background-color: rgba(255, 255, 255, 0.8) !important;
  pointer-events: none;
}
.grid-container .grid-item.current:hover {
	transform: scale(1);
	box-shadow: inherit;
}
.scrolltothetop {
	background-color: #666666;
}
.grid-container h3 span {
	font-size: 20px;
	display: block;
	line-height: 1.3;
}
.grid-container p {
	text-align: left;
	line-height: 1.3;
	text-shadow: 2px 2px 2px #fff, -2px 2px 2px #fff, 2px -2px 2px #fff, -2px -2px 2px #fff;
	font-size: 1em;
	color: #888888;
}
@media screen and (max-width: 680px) {
.grid-container p {
	width: 75%;
	margin: 0;
}
}
.grid-container div.inv p {
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3), -2px 2px 2px rgba(0,0,0,0.3), 2px -2px 2px rgba(0,0,0,0.3), -2px -2px 2px rgba(0,0,0,0.3);
	color: #f0f0f0;
}
.grid-container .grid-item.inv h3::before {
	background-color: #ffffff;
}

.articles_wrap h2 {
	color: #ffffff !important;
}