@charset "utf-8";

@media screen and (max-width: 768px) {
	.main-wrap1 {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap1 .content {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .inner-wrap {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .inner {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .slidefr {
		width: 100%;
		position: relative;
		margin: 0;
	}
	.ipad .main-wrap1 .slidefr,
	.mobile.yoko .main-wrap1 .slidefr {
		width: 800px;
	}
	.main-wrap1 .slidefr .slidemain {
		width: 100%;
		height: 74vw;
		overflow: hidden;
		margin: 0 auto 0 auto;
		position: relative;
		background-color: #aaa;
	}
	.ipad .main-wrap1 .slidefr .slidemain,
	.mobile.yoko .main-wrap1 .slidefr .slidemain {
		height: 467px;
	}
	.main-wrap1 .slidefr .slidemain .slider {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 50;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg1 {
		background-image: url("../img/mv_01_sp.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg2 {
		background-image: url("../img/mv_02_sp.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg3 {
		background-image: url("../img/mv_03_sp.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.main-wrap1 .slidernavfrlist {
		width: 100%;
		padding: 5px 0 0 0;
		text-align: center;
	}
	.main-wrap1 .slidernavfrlist span {
		display: inline-block;
		width: 10px;
		height: 10px;
		margin: 0 7px 0 7px;
		cursor: pointer;
		border-radius: 50%;
		background-color: #fff;
		border: solid 2px #000;
	}
	.main-wrap1 .slidernavfrlist span.active {
		background-color: #d23732;
		border: solid 2px transparent;
	}
	.main-wrap2 {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.main-wrap2 .content-wrap {
		width: 90%;
		margin: 0 auto;
	}
	.main-wrap2 .content {
		padding: 50px 0 20px;
	}
	.main-wrap2 .content .heading {
		text-align: center;
	}
	.main-wrap2 .content .heading img{
		width: 100%;
	}
	.main-wrap3 {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.main-wrap3 .content-wrap {
		width: 90%;
		margin: 0 auto;
	}
	.main-wrap3 .content ul {
		border-top: solid 2px #323232;
	}
	.main-wrap3 .content ul li {
		border-bottom: solid 2px #323232;
		padding: 18px 0 18px 0;
		font-weight: 500;
		position: relative;
	}
	.main-wrap3 .content ul li .new {
		padding: 0;
		margin: 0;
		text-align: right;
	}
	.main-wrap3 .content ul li .new span{
		text-align: center;
		display: inline-block;
		background: #d23732;
		color: #fff;
		padding: 0 20px 0 20px;
		margin: 0 0 10px 0;
	}
	.main-wrap3 .content .content_date {
		width: 100%;
		display: inline-block;
		vertical-align: top;
		font-weight: 600;
	}
	.main-wrap3 .content .content_title {
		width: 100%;
		display: inline-block;
	}
	.main-wrap3 .content ul li a {
		color: #141414;
	}
	.main-wrap4 {
		width: 100%;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.main-wrap4 .content-wrap {
		width: 90%;
		margin: 0 auto;
	}
	.main-wrap4 .content {
		width: 100%;
		padding: 40px 0 70px;
		text-align: center;
	}
	.main-wrap4 .content a {
		display: inline-block;
		color: #141414;
		font-weight: bold;
		background: transparent;
		padding: 10px;
		min-width: 240px;
		border: 2px solid #141414;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap4 .content a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap4 .content a:hover {
		color: #fff;
	}
	.main-wrap4 .content a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap5 {
		width: 100%;
		margin: 0 auto;
		padding: 60px 0 0 0 0;
		position: relative;
	}
	.main-wrap5 .content-wrap {
		width: 100%;
		background: url(../img/main-wrap5-bg-sp.jpg) no-repeat left top;
		background-size: 100% auto;
		min-height: 250px;
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	.main-wrap5 .content {
		padding: 90px 0 0 0;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap5 .content .inner {
		text-align: center;
	} 
	.main-wrap5 .content .inner .heading {
		margin-bottom: 20px;
	}
	.main-wrap5 .content .inner .heading img {
		width: 100%;
	}
	.main-wrap5 .content ul li {
		width: 100%;
		text-align: center;
		margin: 0 0 10px 0;
		display: inline-block;
	}
	.main-wrap5 .content ul li a {
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background-color: rgba(0,0,0,0.4);
		padding: 10px;
		min-width: 240px;
		border: 2px solid #fff;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap5 .content ul li a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap5 .content ul li a:hover {
	}
	.main-wrap5 .content ul li a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap6 {
		width: 100%;
		margin: 0 auto;
		padding: 30px 0 30px;
		position: relative;
	}
	.main-wrap6 .content-wrap {
		width: 100%;
		background: url(../img/main-wrap6-bg-sp.jpg) no-repeat right top;
		background-size: 100% auto;
		min-height: 250px;
		margin: 0 auto;
		padding: 70px 0 0 0;
		position: relative;
	}
	.main-wrap6 .content {
		width: 90%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap6 .content .inner {
		text-align: center;
	} 
	.main-wrap6 .content .inner .heading {
		margin-bottom: 20px;
	}
	.main-wrap6 .content .inner .heading img {
		width: 100%;
	}
	.main-wrap6 .content ul li {
		width: 100%;
		text-align: center;
		margin: 0 0 10px 0;
		display: inline-block;
	}
	.main-wrap6 .content ul li a {
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background-color: rgba(0,0,0,0.4);
		padding: 10px;
		min-width: 240px;
		border: 2px solid #fff;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap6 .content ul li a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap6 .content ul li a:hover {
	}
	.main-wrap6 .content ul li a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap7 {
		background: url(../img/main-wrap7-bg-sp.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
	}
	.main-wrap7 .content-wrap {
		width: 90%;
		margin: 0 auto;
	}
	.main-wrap7 .content {
		padding: 70px 0 70px;
		text-align: center;
	}
	.main-wrap7 .content .heading {
		width: 100%;
	}
	.main-wrap7 .content .heading img{
		width: 100%;
	}
	.main-wrap7 .content a {
		margin: 20px 0 0 0;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background-color: rgba(255,255,255,0.1);
		padding: 10px;
		min-width: 240px;
		border: 2px solid #fff;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap7 .content a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #fff;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap7 .content a:hover {
		color: #141414;
	}
	.main-wrap7 .content a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
}

@media screen and (min-width: 769px) {
	.main-wrap1 {
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap1 .content {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .inner-wrap {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .inner {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap1 .slidefr {
		width: 100%;
		position: relative;
		margin: 0;
	}
	.ipad .main-wrap1 .slidefr,
	.mobile.yoko .main-wrap1 .slidefr {
		width: 100%;
	}
	.main-wrap1 .slidefr .slidemain {
		width: 100%;
		height: 700px;
		overflow: hidden;
		margin: 0 auto 0 auto;
		position: relative;
	}
	.ipad .main-wrap1 .slidefr .slidemain,
	.mobile.yoko .main-wrap1 .slidefr .slidemain {
		height: 467px;
	}
	.main-wrap1 .slidefr .slidemain .slider {
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 50;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg1 {
		background-image: url("../img/mv_01_pc.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: 1920px auto;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg2 {
		background-image: url("../img/mv_02_pc.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: 1920px auto;
	}
	.main-wrap1 .slidefr .slidemain .hero-bg3 {
		background-image: url("../img/mv_03_pc.jpg");
		background-position-x: center;
		background-position-y: center;
		background-repeat: no-repeat;
		background-size: 1920px auto;
	}
	.main-wrap1 .slidernavfrlist {
		width: 100%;
		padding: 20px 0 0 0;
		text-align: center;
	}
	.main-wrap1 .slidernavfrlist span {
		display: inline-block;
		width: 20px;
		height: 20px;
		margin: 0 10px 0 10px;
		cursor: pointer;
		border-radius: 50%;
		background-color: #fff;
		border: solid 2px #000;
	}
	.main-wrap1 .slidernavfrlist span.active {
		background-color: #d23732;
		border: solid 2px transparent;
	}
	.main-wrap2 {
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap2 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap2 .content {
		width: 1000px;
		margin: 0 auto;
		padding: 90px 0 30px 0;
	}
	.main-wrap2 .content .heading {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap2 .content .heading img {
		width: 100%;
	}
	.main-wrap3 {
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap3 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap3 .content {
		width: 1000px;
		margin: 0 auto;
	}
	.main-wrap3 .content ul li {
		border-bottom: solid 2px #323232;
		padding: 18px 0 18px 0;
		font-weight: 500;
		position: relative;
	}
	.main-wrap3 .content ul li .new {
		display: inline-block;
		width: 140px;
		padding: 0;
		margin-right: 20px;
		margin: 0 20px 0 0;
		text-align: right;
		vertical-align: top;
	}
	.main-wrap3 .content ul li .new span{
		width: 66px;
		text-align: center;
		display: inline-block;
		background: #d23732;
		color: #fff;
	}
	.main-wrap3 .content .content_date {
		width: 160px;
		display: inline-block;
		vertical-align: top;
		font-weight: 600;
	}
	.main-wrap3 .content .content_title {
		width: 630px;
		display: inline-block;
	}
	.main-wrap3 .content ul li a {
		color: #141414;
	}
	.main-wrap4 {
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap4 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap4 .content {
		width: 1000px;
		margin: 0 auto;
		padding: 40px 0 70px 0;
		text-align: center;
	}
	.main-wrap4 .content a {
		text-align: center;
		display: inline-block;
		color: #141414;
		font-weight: bold;
		background: transparent;
		padding: 10px 78px;
		border: 2px solid #141414;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap4 .content a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap4 .content a:hover {
		color: #fff;
	}
	.main-wrap4 .content a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap5 {
		background: url(../img/main-wrap5-bg.jpg) no-repeat center top;
		background-size: 1920px 380px;
		min-height: 380px;
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap5 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap5 .content {
		width: 1000px;
		margin: 0 auto;
		padding: 40px 0 70px 0;
		height: 100%;
		position: relative;
	}
	.main-wrap5 .content .inner {
		display: block;
		width: 520px;
		transform: translateX(48%);
		margin: 0 auto;
		padding: 60px 0;
		position: relative;
		top: 0;
		text-align: center;
	}
	.main-wrap5 .content .inner .heading {
		margin-bottom: 20px;
	}
	.main-wrap5 .content .inner .heading img{
		width: 100%;
	}
	.main-wrap5 .content ul li {
		text-align: center;
		margin: 10px 0 0 0;
		display: inline-block;
	}
	.main-wrap5 .content ul li:nth-child(2n) {
		margin-left: 10px;
	}
	.main-wrap5 .content ul li a {
		color: #fff;
		font-weight: bold;
		background-color: rgba(0,0,0,0.4);
		padding: 10px;
		width: 210px;
		display: block;
		border: 2px solid #fff;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap5 .content ul li a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap5 .content ul li a:hover {
	}
	.main-wrap5 .content ul li a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap6 {
		background: url(../img/main-wrap6-bg.jpg) no-repeat center top;
		background-size: 1920px 380px;
		min-height: 380px;
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap6 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap6 .content {
		width: 1000px;
		margin: 0 auto;
		padding: 50px 0 150px;
		height: 100%;
		position: relative;
	}
	.main-wrap6 .content .inner {
		display: block;
		width: 520px;
		transform: translateX(-48%);
		margin: 0 auto;
		padding: 60px 0;
		position: relative;
		top: 0;
		text-align: center;
	}
	.main-wrap6 .content .inner .heading {
		margin-bottom: 20px;
	}
	.main-wrap6 .content .inner .heading img{
		width: 100%;
	}
	.main-wrap6 .content ul li {
		text-align: center;
		margin: 10px 0 0 0;
		display: inline-block;
	}
	.main-wrap6 .content ul li:nth-child(2n) {
		margin-left: 10px;
	}
	.main-wrap6 .content ul li a {
		color: #fff;
		font-weight: bold;
		background-color: rgba(0,0,0,0.4);
		padding: 10px;
		width: 210px;
		display: block;
		border: 2px solid #fff;
		position: relative;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap6 .content ul li a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #141414;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap6 .content ul li a:hover {
	}
	.main-wrap6 .content ul li a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
	.main-wrap7 {
		background: url(../img/main-wrap7-bg.jpg) no-repeat center center;
		background-size: cover;
		min-width: 1200px;
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	.main-wrap7 .content-wrap {
		width: 100%;
		margin: 0 auto;
	}
	.main-wrap7 .content {
		width: 1000px;
		margin: 0 auto;
		padding: 140px 0;
		text-align: center;
	}
	.main-wrap7 .content .heading {
		width: 100%;
	}
	.main-wrap7 .content .heading img{
		width: 100%;
	}
	.main-wrap7 .content a {
		margin: 20px 0 0 0;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background-color: rgba(255,255,255,0.1);
		padding: 10px 78px;
		border: 2px solid #fff;
		position: relative;overflow: hidden;
		z-index: 1;
		transition: 0.3s;
	}
	.main-wrap7 .content a::before {
		content: "";
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #fff;
		transform-origin: 100% 50%;
		transform: scaleX(0);
		transition: transform ease 0.3s;
	}
	.main-wrap7 .content a:hover {
		color: #141414;
	}
	.main-wrap7 .content a:hover::before {
		transform-origin: 0% 50%;
		transform: scaleX(1);
	}
}