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

.title-visual{
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.title-visual-front{
  position: absolute;
  top: 60px;
  left: 0;
  background:rgba(195,17,62,0.8);
  z-index: 2;
}

.title-visual-front h1{
  color: #fff;
  font-size: 2em;
  line-height: 1;
  padding: 8px 12px 8px 150px;
  margin: 0;
}

.title-visual-back{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}


/* ===========================================
　　　　　　　　　　ここから main
=========================================== */

.l-section p {
   margin-bottom: 0;
   font-size: 16px;
   line-height: 1.7;
}

.introduction {
   margin: 24px 0;
   text-align: center;
}

.introduction_heading {
   font-size: 20px;
   font-weight: bold;
   color: #c0153f;
   line-height: 2.4;
}

.menu_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.menu_list a {
  width: 31%;
  margin: 20px 0 40px;
  padding: 6px;
  border-radius:5px;
  text-align: center;
  background: #333;
  color: #fff;
}

.menu {
  font-size: 1rem;
  position: relative;
  display: inline-block;
  padding-left: 20px;
}

.menu:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.menu_list a:nth-child(3n+2) {
  margin: 20px 3.5% 40px;
}

.menu_list a:hover {
  color: #fff;
  background: #c0153f;
}

.h-Lv1,.h-Lv2 {
  font-size: 1.5rem;
  padding: 0 0 0.2em;
  border-bottom: 1px solid #c0153f;
  margin: 0 0 1.375rem;
}

.h-Lv2 {
  margin-top: 40px;
}

.h-Lv3 {
  margin: 0;
  padding: 10px 20px;
  font-size: 1.25rem;
}

.content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
}

.content_box_new {
  width: 31%;
  margin: 0 0 40px;
  background: #eee;
}

.content_box_new:nth-child(3n+2) {
  margin: 0 3.5% 40px;
}

.content_box_new img {
  width: 100%;
}

.content_box_new img:hover {
  opacity: 0.7;
}

.content_box {
  width: 31%;
  margin: 0 0 40px;
  background: #eee;
}

.content_box:nth-child(3n+2) {
  margin: 0 3.5% 40px;
}

.content_box img {
  width: 100%;
}

.content_box img:hover {
  opacity: 0.7;
}

.content_tag_box {
  display: flex;
  padding: 0 20px;
}

.content_tag {
  margin: 5px 2% 5px 0;
  padding: 5px;
  width: 32%;
  text-align: center;
  background-color: #666;
  color: #fff;
}

.tag_right_end {
  margin: 5px 0;
}

.content_box_new p {
  margin-bottom: 0;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

.content_box p {
  margin-bottom: 0;
  padding: 0 20px;
  font-size: 14px;
  line-height: 1.6;
}

/* ========== ここから 詳細btn ========== */

.more_btn {
  width: 110px;
  height: 35px;
  margin:10px auto 20px;
  position: relative;
  border: 1px solid #c0153f;
}

.btn_box{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.more {
  position: relative;
  display: block;
  width: 110px;
  height: 35px;
  line-height: 35px;
  font-size: 16px;
  color: #c0153f;
  text-align: center;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  overflow: hidden;
}

.more:hover {
  color: #fff;
}

.more:before {
  position: absolute;
  content: "";
  width: 120%;
  height: 100%;
  top: 0;
  left: 170px;
  -webkit-transform: skewX(-73deg);
  transform: skewX(-73deg);
  background-color: #c0153f;
  z-index: -1;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.more:after {
  position: absolute;
  content: "";
  width: 120%;
  height: 100%;
  top: 0;
  left: -190px;
  -webkit-transform: skewX(-73deg);
  transform: skewX(-73deg);
  background-color: #c0153f;
  z-index: -1;
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
}

.more:hover:before {
  left: 50px;
}

.more:hover:after {
  left: -75px;
}

/* ========== ここまで 詳細btn ========== */

.back_number_link a{
  color: #fff;
}

.back_number_link img{
  width: 6px;
  margin: 6px 10px 6px 0;
}

.back_number{
  width: 31%;
  position: relative;
  display: inline-block;
  overflow: hidden;

  padding: 6px; 
  background: #333;
  border-radius:5px;
  font-size: 1rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

a:hover{
  text-decoration: none;
}

/* ========== ボタンを光らせる ここから ========== */
.back_number::before {
  content: '';
    /*絶対配置で光るの位置を決める*/
  position: absolute;
  top: 0;
  left: -75%;
    /*光る形状*/
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  transform: skewX(-25deg);
}

/*hoverした際の移動のアニメーション*/
.back_number:hover::before {
  animation: shine 0.7s;
}

@keyframes shine {
  100% {
    left: 125%;
  }
}
/* ========== ボタンを光らせる ここまで ========== */

.coming_soon-btn {
  width: 140px;
  height: 40px;
  margin:0 0 0 auto;
  padding: 7px 20px;
  border: 1px solid #999;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #999;
}

.year {
  font-size: 1rem;
  text-align: center;
  color: #999;
}

.year a {
  color: #999;
}

.year::before {
  content: "";
  display: block;
  margin: 20px 0;
  width: 100%;
  height: 1px;
  background-color:#ccc;
}


/* ===========================================
　　　　　　　　　　ここまで main
=========================================== */

@media (max-width: 1200px) {
	.title-visual-front h1{
		padding: 8px 12px 8px 60px;
	}
}

@media (max-width: 900px) {
	.content_box_new {
		width: 48%;
	}
	.content_box_new:nth-child(3n+2) {
		margin: 0 0 40px;
	}
	.content_box_new:nth-child(odd) {
		margin: 0 4% 40px 0;
	}
	.content_box {
		width: 48%;
	}
	.content_box:nth-child(3n+2) {
		margin: 0 0 40px;
	}
	.content_box:nth-child(odd) {
		margin: 0 4% 40px 0;
	}
}

@media (max-width: 768px) {
	.title-visual-front h1{
		padding: 8px 12px 8px 40px; 
	}
	.title-visual{
		position: static;
		width: 100vw;
		height: 40vw;
		overflow: hidden;
	}
	.title-visual-back{
		position: static;
		width: 100%;
		top: 0%;
		left: 0%;
		-webkit-transform: translate(0%, 0%);
		-ms-transform: translate(0%, 0%);
		transform: translate(0%, 0%);
		z-index: 1;
	}
	.introduction_heading {
		line-height: 1.7;
	}
	.menu_list {
		margin: 30px 0 40px;
	}
	.menu_list a {
		width: 100%;
		margin: 5px 0;
	}
	.menu_list a:nth-child(3n+2) {
		margin: 5px 0;
	}
	.content_box_new {
		min-width: 100%;
	}
	.content_box {
		min-width: 100%;
	}
	.content_box_new:nth-child(odd) {
		margin: 0 0 40px 0;
	}
	.content_box:nth-child(odd) {
		margin: 0 0 40px 0;
	}
}