@charset "UTF-8";

@media screen and (max-width: 899px) {
	.in-flex {
		/*position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); */
		display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; padding: 5vh 0; position: relative; z-index: 2;
	}
	.in-flex-Img { width: 90%; border-radius: 6px; order: 1; }
	.in-flex-Txt { padding: 10vh 4% 10vh; z-index: 1; order: 2; }
	
	.swiper,.mvSec .swiper-wrapper,.mvSec .swiper-slide,.mvSec .swiper-slide:after { height: inherit; }
	.swiper-slide-img { position: relative; overflow: hidden; }
	.swiper-slide-active.swiper-slide-img:after { 
		position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
		-webkit-animation: zoom-in 6s linear infinite;
		-moz-animation: zoom-in 6s linear infinite;
		-ms-animation: zoom-in 6s linear infinite;
		animation: zoom-in 6s linear infinite;
	}
	
	#anch01 { background: #fff url("../img/common/mvBg.jpg") repeat-x center bottom; background-size: cover; background-attachment: fixed; animation: bg 100s infinite linear; background-size: cover; }
	#anch01 .in-flex { padding: 5vh 0; }
	#anch01 .swiper-slide-img01:after { background: url("../img/common/mv01-01.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img01 { position: relative; }
	#anch01 .swiper-slide-img01 p.xsmall { position: absolute; color: #fff; bottom: 5px; right: 5px; font-size: 0.7em; z-index: 10;}
	#anch01 .swiper-slide-img02:after { background: url("../img/common/mv01-02.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img03:after { background: url("../img/common/mv01-03.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img04:after { background: url("../img/common/mv01-04.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img05:after { background: url("../img/common/mv01-05.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img06:after { background: url("../img/common/mv01-06.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img07:after { background: url("../img/common/mv01-07.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img08:after { background: url("../img/common/mv01-08.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img09:after { background: url("../img/common/mv01-09.jpg") center center no-repeat; background-size: cover; }
	#anch01 .in-flex .in-flex-Txt { position: relative; padding: 10vh 6% 5vh; }
	#anch01 .roboto.Copy { position: absolute; top: 0vh; left:4%; font-size: 5.0rem; z-index: 0;}
	#anch01 .in-flex .in-flex-Txt p { margin-bottom: 0; }
	
	#anch02  { overflow: hidden; }
	#anch02 .in-flex { padding: 0vh 0; }
	#anch02 .in-flex .in-flex-Txt { padding: 10vh 6% 5vh; position: relative; }
	#anch02 .swiper-slide-loop { background-size: cover; }
	#anch02 .swiper-slide-img01 { background: url("../img/common/mv02-01.jpg") center center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img02 { background: url("../img/common/mv02-02.jpg") right center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img03 { background: url("../img/common/mv02-03.jpg") center center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img04 { background: url("../img/common/mv02-04.jpg") center bottom no-repeat; background-size: cover; }
	#anch02 .in-flex .in-flex-Txt .net { position: absolute; top: -50px; right: -50px; width: 250px; animation: rotateAnimation 30s linear infinite; }
	#anch02 .roboto.Copy { position: absolute; top: 0vh; left:4%; font-size: 5.0rem; z-index: 0;}

	#anch03 { background: #040823; padding: 0 0% 6%; }
	#anch03 .in-flex-Img { width: 80%; display: flex; justify-content: center; align-items: center; height: auto; }
	#anch03 .in-flex-Img img { width: 100%; margin: 0 auto; }
	#anch03 .in-flex-Txt { width: 88%; padding: 6% 6% 0; }
	#anch03 .in-flex-Txt .ttl02 { color: #fff; font-size: 1.3rem; margin-bottom: 20px; }
	#anch03 .in-flex-Txt .ttl03 { color: #fff; text-align: center; }
	#anch03 .in-flex-Txt p { color: #fff; margin-bottom: 0; font-size: 0.9rem; }
	
	#anch04 { background: #000; }
	#anch04 .ttl02 { color: #fff; }
	#anch04 .in-flex .in-flex-L { padding: 5vh 6%; width: 60%; }
	#anch04 .in-flex .in-flex-R { padding: 5vh 6%; display: flex; align-items: center; }
	
	#anch04 .box_link_btn a { color:#fff; width:100%; height:35px; line-height:35px; border:#fff 1px solid; display:block; text-align:center; margin:0 0; background:#000; font-size: 13px; position: relative; transition: .3s; }
	#anch04 .box_link_btn a:link    { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:visited { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:hover   { color:#000; text-decoration: none; background: #fff; letter-spacing: 0.1em; }
	#anch04 .box_link_btn a:active  { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 20px; height: 1px; background: #fff; }
	#anch04 .box_link_btn a:hover:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 25px; height: 1px; background: #000; }
	
	#anch04 { background: #000; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	#anch03 { background: #040823; }
	#anch03 .in-flex { padding: 0 ; flex-direction: row;  }
	#anch03 .in-flex-Img { width: 30%; display: flex; justify-content: center; align-items: center; height: auto; }
	#anch03 .in-flex-Img div { text-align: center; }
	#anch03 .in-flex-Img img { width: 80%; margin: 0 auto; }
	#anch03 .in-flex-Txt { width: 64%; }
	#anch03 .in-flex-Txt .ttl02 { color: #fff; margin-bottom: 20px; }
	#anch03 .in-flex-Txt .ttl03 { color: #fff; text-align: left; }
	#anch03 .in-flex-Txt p { color: #fff; }
	
	#anch04 { background: #000; }
	#anch04 .in-flex { padding: 0 ; flex-direction: row; align-items: center; }
	#anch04 .ttl02 { color: #fff; }
	#anch04 .in-flex { padding: 0 ; }
	#anch04 .in-flex .in-flex-L { width: 20%; padding: 5vh 4%; }
	#anch04 .in-flex .in-flex-R { width: 74%; padding: 5vh 4%; display: flex; align-items: center; }
	
	#anch04 .box_link_btn a { color:#fff; width:100%; height:35px; line-height:35px; border:#fff 1px solid; display:block; text-align:center; margin:0 0; background:#000; font-size: 13px; position: relative; transition: .3s; }
	#anch04 .box_link_btn a:link    { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:visited { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:hover   { color:#000; text-decoration: none; background: #fff; letter-spacing: 0.1em; }
	#anch04 .box_link_btn a:active  { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 20px; height: 1px; background: #fff; }
	#anch04 .box_link_btn a:hover:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 25px; height: 1px; background: #000; }
	
	#anch04 { background: #000; }
}
@media screen and (min-width: 900px) {	
	/*.mvSec { height: 60vh; width: 100vw; position: relative; }*/
	
	.in-flex {
		/*position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); */
		display: flex; justify-content: center; align-items: center; margin: 0 auto; padding: 5vh 0; position: relative; z-index: 2;
	}
	.in-flex { display: flex; justify-content: space-between; align-items:center;  }
	.in-flex-Img { width: 44%; border-radius: 6px; }
	.in-flex-Txt { width: 50%; padding: 10vh 4% 10vh; z-index: 1; }
	
	.swiper,.mvSec .swiper-wrapper,.mvSec .swiper-slide,.mvSec .swiper-slide:after { height: inherit; }
	.swiper-slide-img { position: relative; overflow: hidden; }
	.swiper-slide-active.swiper-slide-img:after { 
		position: absolute; content: ""; display: block; width: 100%; height: 100%; top: 0;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-ms-background-size: cover;
		background-size: cover;
		-webkit-animation: zoom-in 6s linear infinite;
		-moz-animation: zoom-in 6s linear infinite;
		-ms-animation: zoom-in 6s linear infinite;
		animation: zoom-in 6s linear infinite;
	}
	
	#anch01 { background: #fff url("../img/common/mvBg.jpg") repeat-x center bottom; background-size: cover; background-attachment: fixed; animation: bg 100s infinite linear; }
	#anch01 .in-flex { padding: 10vh 0; }
	#anch01 .swiper-slide-img01:after { background: url("../img/common/mv01-01.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img01 { position: relative; }
	#anch01 .swiper-slide-img01 p.xsmall { position: absolute; color: #fff; bottom: 5px; right: 5px; font-size: 0.7em; z-index: 10; }
	#anch01 .swiper-slide-img02:after { background: url("../img/common/mv01-02.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img03:after { background: url("../img/common/mv01-03.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img04:after { background: url("../img/common/mv01-04.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img05:after { background: url("../img/common/mv01-05.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img06:after { background: url("../img/common/mv01-06.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img07:after { background: url("../img/common/mv01-07.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img08:after { background: url("../img/common/mv01-08.jpg") center center no-repeat; background-size: cover; }
	#anch01 .swiper-slide-img09:after { background: url("../img/common/mv01-09.jpg") center center no-repeat; background-size: cover; }
	#anch01 .in-flex .in-flex-Txt { position: relative; }
	#anch01 .roboto.Copy { position: absolute; top: -3vh; left: 30px; font-size: 8.0rem; z-index: 0;}
	
	#anch02  { overflow: hidden; }
	#anch02 .in-flex { padding: 0vh 0; }
	#anch02 .in-flex .in-flex-Txt { padding: 15vh 4%; position: relative; }
	#anch02 .swiper-slide-loop { background-size: cover; }
	#anch02 .swiper-slide-img01 { background: url("../img/common/mv02-01.jpg") center center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img02 { background: url("../img/common/mv02-02.jpg") right center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img03 { background: url("../img/common/mv02-03.jpg") center center no-repeat; background-size: cover; }
	#anch02 .swiper-slide-img04 { background: url("../img/common/mv02-04.jpg") center bottom no-repeat; background-size: cover; }
	#anch02 .in-flex .in-flex-Txt .net { position: absolute; top: -50px; right: -50px; width: 480px; animation: rotateAnimation 30s linear infinite; }
	#anch02 .roboto.Copy { position: absolute; top: 1vh; left: 30px; font-size: 8.0rem; z-index: 0;}

	#anch03 { background: #040823; }
	#anch03 .in-flex-Img { width: 30%; display: flex; justify-content: center; align-items: center; height: auto; }
	#anch03 .in-flex-Img img { width: 80%; margin: 0 auto; }
	#anch03 .in-flex-Txt { width: 70%; }
	#anch03 .in-flex-Txt .ttl02 { color: #fff; margin-bottom: 20px; }
	#anch03 .in-flex-Txt .ttl03 { color: #fff; }
	#anch03 .in-flex-Txt p { color: #fff; }
	
	#anch04 { background: #000; }
	#anch04 .ttl02 { color: #fff; }
	#anch04 .in-flex { padding: 0 ; }
	#anch04 .in-flex .in-flex-L { width: 20%; padding: 5vh 4%; }
	#anch04 .in-flex .in-flex-R { width: 74%; padding: 5vh 4%; display: flex; align-items: center; }
	
	#anch04 .box_link_btn a { color:#fff; width:100%; height:35px; line-height:35px; border:#fff 1px solid; display:block; text-align:center; margin:0 0; background:#000; font-size: 13px; position: relative; transition: .3s; }
	#anch04 .box_link_btn a:link    { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:visited { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:hover   { color:#000; text-decoration: none; background: #fff; letter-spacing: 0.1em; }
	#anch04 .box_link_btn a:active  { color:#fff; text-decoration: none; }
	#anch04 .box_link_btn a:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 20px; height: 1px; background: #fff; }
	#anch04 .box_link_btn a:hover:after { content: ""; position: absolute; top: 50%; right: 0px; z-index: 1; transform: translateY(-50%); width: 25px; height: 1px; background: #000; }
	
	#anch04 { background: #000; }
}
@media screen and (min-width: 900px) and (max-width: 899px) {
	.in-flex-Img { width: 38%; }
	.in-flex-Txt { width: 52%; }
	#anch01 .roboto.Copy,#anch02 .roboto.Copy { font-size: 5.5rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.in-flex-Img { width: 40%; }
	.in-flex-Txt { width: 54%; }
	#anch01 .roboto.Copy,#anch02 .roboto.Copy { font-size: 6.0rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.in-flex-Img { width: 42%; }
	.in-flex-Txt { width: 52%; }
	#anch01 .roboto.Copy,#anch02 .roboto.Copy { font-size: 6.5rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	#anch01 .roboto.Copy,#anch02 .roboto.Copy { font-size: 7.0rem; }
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	#anch01 .roboto.Copy,#anch02 .roboto.Copy { font-size: 7.5rem; }
}

.swiper-img .swiper-slide-active.swiper-slide-img:after { animation: zoom-in 6s linear infinite; overflow: hidden; }
@keyframes zoom-in {
  0% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes bg { 
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: -3000px 0;
	}
}
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*-- コンテンツflex -------------------------------------------------------------*/
@media screen and (max-width: 889px) {
	.in-flex { display: flex; flex-direction: column; }
	.in-flex-Img { order: 1; height: 150px; }	
	.in-flex-Txt { order: 2; padding: 6% 4%; }
	.in-flex-Txt .ttl02 { text-align: left; margin-bottom: 10px; font-size: 1.4rem; line-height: 1.7; color: var(--base-color); }
	.in-flex-Txt .ttl02 span.subTtl02 { font-size: 0.7em; color: #333;}
	.in-flex-Txt .grad-bar { margin-bottom: 20px;}
	.in-flex-Txt .ttl03 { margin-bottom: 10px; }
	.in-flex-Txt .ttl03 span { font-size: 0.9rem; border: 1px solid #999; padding: 2px 20px; color: #333; }
	.in-flex-Txt p { font-size: 0.85rem; }
	.in-flex-Txt p.txt { margin-bottom: 20px; }
}
@media screen and (min-width: 600px) and (max-width: 889px) {
	.in-flex-Img { height: 300px; }
	.in-flex-Txt .ttl02 { font-size: 1.8rem; }
	.in-flex-Txt .ttl03 span { font-size: 0.9rem; }
	.in-flex-Txt p { font-size: 0.9rem; }
}
@media screen and (min-width: 900px) {	
	.in-flex-Txt .ttl02 { margin-bottom: 40px; font-size: 3.0rem; line-height: 1.4; color: var(--base-color); text-align: left; }
	.in-flex-Txt .ttl03 { margin-bottom: 10px; font-size: 1.6rem; }	
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.in-flex-Txt .ttl02 { font-size: 2.0rem; }
	.in-flex-Txt .ttl03 { font-size: 1.1rem; }	
	.in-flex-Txt p { font-size: 0.9rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.in-flex-Txt .ttl02 { font-size: 2.2rem; }
	.in-flex-Txt .ttl03 { font-size: 1.2rem; }	
	.in-flex-Txt p { font-size: 0.95rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.in-flex-Txt .ttl02 { font-size: 2.4rem; }
	.in-flex-Txt .ttl03 { font-size: 1.3rem; }	
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.in-flex-Txt .ttl02 { font-size: 2.6rem; }
	.in-flex-Txt .ttl03 { font-size: 1.4rem; }	
}
@media screen and (min-width: 1390px) and (max-width: 1489px) {
	.in-flex-Txt .ttl02 { font-size: 2.8rem; }
	.in-flex-Txt .ttl03 { font-size: 1.5rem; }	
}






/*-- ニュース タブ -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.tabs { border-bottom: 1px solid var(--base-color); display: flex; justify-content: center; margin: 40px auto; max-width: 960px; width: 100%; }
	.tabs li { height: 35px; line-height: 35px; width: 100px; text-align: center; border-top: 1px solid var(--base-color); border-right: 1px solid var(--base-color); border-left: 1px solid var(--base-color); margin: 0 5px; font-size: 0.9rem; position: relative;}
	.tabs li.selected { background: var(--base-color); }
	.tabs li.selected:after { position: absolute; bottom: -1px; left: 0; content: ""; width: 100px; height: 1px; background: var(--base-color); z-index: 1; }
	.tabs li a { display: block; }
	.tabs li a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li a:active  { color:var(--base-color); text-decoration: none; }
	
	.tabs li.selected a:link    { color:#fff; text-decoration: none; }
	.tabs li.selected a:visited { color:#fff; text-decoration: none; }
	.tabs li.selected a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.tabs li.selected a:active  { color:#fff; text-decoration: none; }
	
	.top-works { background: #f4f4f4; padding: 40px 0; }
	
	.newsList { max-width: 1020px; width: 100%; margin: 0 auto 40px; }
	.newsList li { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsList li .newsDl { margin-right: 10px; }
	.newsDl { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; }
	.newsDl dt { background: var(--base-color); color: #fff; font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: var(--base-color); font-size: 10px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsList li p { margin-bottom: 0px; }
	.newsList li p { margin-bottom: 0px; font-size: 0.9rem; }
	.newsList li p a:link    { color:#fff; text-decoration: none; }
	.newsList li p a:visited { color:#fff; text-decoration: none; }
	.newsList li p a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.newsList li p a:active  { color:#fff; text-decoration: none; }
}
@media screen and (min-width: 600px) {
	
	.tabs { border-bottom: 1px solid var(--base-color); display: flex; justify-content: center; margin: 40px auto; max-width: 960px; width: 100%; }
	.tabs li { height: 35px; line-height: 35px; width: 100px; text-align: center; border-top: 1px solid var(--base-color); border-right: 1px solid var(--base-color); border-left: 1px solid var(--base-color); margin: 0 5px; font-size: 0.9rem; position: relative;}
	.tabs li.selected { background: #fff; }
	.tabs li.selected:after { position: absolute; bottom: -1px; left: 0; content: ""; width: 100px; height: 1px; background: #fff; z-index: 1; }
	.tabs li a { display: block; }
	.tabs li a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li a:active  { color:var(--base-color); text-decoration: none; }
	
	.tabs li.selected a:link    { color:var(--base-color); text-decoration: none; }
	.tabs li.selected a:visited { color:var(--base-color); text-decoration: none; }
	.tabs li.selected a:hover   { color:#fff; text-decoration: none; background: var(--base-color); }
	.tabs li.selected a:active  { color:var(--base-color); text-decoration: none; }
	
	.top-works { background: #f4f4f4; padding: 40px 0; }
	
	.newsList { max-width: 960px; width: 100%; margin: 0 auto; }
	.newsList li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #dedede; }
	.newsList li:last-child { margin-bottom: 0px;}
	.newsList li .newsDl { margin-right: 10px; }
	.newsDl { display: flex; justify-content: flex-start; align-items: center; }
	.newsDl dt { background: var(--base-color); color: #fff; font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsDl dd { background: #fff; color: var(--base-color); font-size: 12px; height: 20px; line-height: 20px; padding: 0 10px; border: 1px solid var(--base-color); font-family:'Roboto Condensed', sans-serif; font-weight:bold; }
	.newsList li p { margin-bottom: 0px; font-size: 0.9rem; }
	.newsList li p a:link    { color:#fff; text-decoration: none; }
	.newsList li p a:visited { color:#fff; text-decoration: none; }
	.newsList li p a:hover   { color:#fff; text-decoration: none; opacity: 0.7; }
	.newsList li p a:active  { color:#fff; text-decoration: none; }
	
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.tabs li { height: 30px; line-height: 30px; padding: 0 20px; font-size: 0.8rem; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.tabs li { height: 35px; line-height: 35px; padding: 0 20px; font-size: 0.85rem; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.tabs li { height: 35px; line-height: 35px; padding: 0 30px; font-size: 0.85rem; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.tabs li { padding: 0 30px; font-size: 0.85rem; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}

/*-- バナーリスト -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
	.top_ex_list { display: flex; justify-content: center; flex-wrap: wrap; }
	.top_ex_list li { width: 18%; margin: 0 1% 20px; }
	.top_ex_list li div { text-align: center; margin-bottom: 10px; }
	.top_ex_list li .high_ttl { color:var(--base-color); margin-bottom: 10px; font-weight: bold; text-align: left; }
	.top_ex_list li p { text-align: left; font-size: 0.9rem; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.top_ex_list li { width: 48%; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.top_ex_list li { width: 31%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.top_ex_list li { width: 23%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.top_ex_list li { width: 23%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
	.top_ex_list li { width: 23%; }
}

/*-- フォーム -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.contactList { }
	.contactList li { width: 90%; margin: 0 auto 10px;height: 50px; line-height: 50px; background: var(--base-color); border: 1px solid var(--base-color); text-align: center; position: relative; border-radius: 8px; font-size: 0.9rem;}
	.contactList li:after { content: "〉"; font-family: "Font Awesome 5 Free"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; opacity: 0.5; }
	.contactList li a         { resize: none; display: block; }
	.contactList li a:link    { color:#fff; text-decoration: none; }
	.contactList li a:visited { color:#fff; text-decoration: none; }
	.contactList li a:hover   { color:var(--base-color); text-decoration: none; background: #fff; border-radius: 8px; }
	.contactList li a:active  { color:#fff; text-decoration: none; }
	
	.contactList li.ogBtn { background:var(--sub-color); border: 1px solid var(--sub-color); }
	.contactList li.ogBtn { color: var(--sub-color); }
	.contactList li.ogBtn:hover:after { color:var(--sub-color); }
	.contactList li.blueBtn { background:#0084ff; border: 1px solid #0084ff; }
	.contactList li.blueBtn a:hover { color: #0084ff; }
	.contactList li.blueBtn:hover:after { color:#0084ff; }
}
@media screen and (min-width: 600px) {
	.contactList { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto; }
	.contactList li { width: 48%; height: 80px; line-height: 80px; background: var(--base-color); border: 1px solid var(--base-color); text-align: center; position: relative; border-radius: 8px; font-size: 1.1rem; font-weight: bold; }
	.contactList li:after { content: "〉"; font-family: "Font Awesome 5 Free"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #fff; opacity: 0.5; }
	.contactList li a         { resize: none; display: block; }
	.contactList li a:link    { color:#fff; text-decoration: none; }
	.contactList li a:visited { color:#fff; text-decoration: none; }
	.contactList li a:hover   { color:var(--base-color); text-decoration: none; background: #fff; border-radius: 8px; }
	.contactList li a:active  { color:#fff; text-decoration: none; }
	
	.contactList li.ogBtn { background:var(--sub-color); border: 1px solid var(--sub-color); }
	.contactList li.ogBtn { color: var(--sub-color); }
	.contactList li.ogBtn:hover:after { color:var(--sub-color); }
	.contactList li.blueBtn { background:#0084ff; border: 1px solid #0084ff; }
	.contactList li.blueBtn a:hover { color: #0084ff; }
	.contactList li.blueBtn:hover:after { color:#0084ff; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.contactList li { font-size: 1.0rem; height: 70px; line-height: 70px; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.contactList li { font-size: 1.05rem; height: 75px; line-height: 75px; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}

/*-- 動画 -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.in-movie { position: relative; }
	.movie_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
}
@media screen and (min-width: 600px) {
	.in-movie { position: relative; }
	.movie_icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}

/*-- ボタン -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
	.topicsBtn { display: flex; justify-content: center; flex-wrap: wrap; }
	.topicsBtn li { height: 60px; line-height: 60px; text-align: center; background: #f4f4f4; border: 3px solid #dedede; color: #fff; font-size: 0.8rem; width: 46%; margin: 0 1% 20px; }
	
	.topicsBtn li a         { resize: none; display: block; }
	.topicsBtn li a:link    { color:#ccc; text-decoration: none; }
	.topicsBtn li a:visited { color:#ccc; text-decoration: none; }
	.topicsBtn li a:hover   { color:#ccc; text-decoration: none; opacity: 0.7; }
	.topicsBtn li a:active  { color:#ccc; text-decoration: none; }
	
	.snsList { }
	.snsList li { margin-bottom: 20px;  }
	.snsList li .snsIcon { width: 40px; margin: 0 auto 10px; }
	.snsList li .snsDiv { width: 100%; max-height: 300px; height: 300px; background: #f4f4f4; position: relative; }
	.snsList li .snsDiv p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 0.8rem; color: #ccc; }
}
@media screen and (min-width: 600px) {
	.topicsBtn { display: flex; justify-content: flex-start; flex-wrap: wrap; }
	.topicsBtn li { height: 100px; line-height: 100px; text-align: center; background: #f4f4f4; border: 3px solid #dedede; color: #fff; font-size: 0.8rem; width: 17.5%; margin: 0 1% 20px; }
	
	.topicsBtn li a         { resize: none; display: block; }
	.topicsBtn li a:link    { color:#ccc; text-decoration: none; }
	.topicsBtn li a:visited { color:#ccc; text-decoration: none; }
	.topicsBtn li a:hover   { color:#ccc; text-decoration: none; opacity: 0.7; }
	.topicsBtn li a:active  { color:#ccc; text-decoration: none; }
	
	.snsList { display: flex; justify-content: space-between; }
	.snsList li { width: 30%; }
	.snsList li .snsIcon { width: 40px; margin: 0 auto 10px; }
	.snsList li .snsDiv { width: 100%; max-height: 300px; height: 300px; background: #f4f4f4; position: relative; }
	.snsList li .snsDiv p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 0.8rem; color: #ccc; }
}
@media screen and (min-width: 600px) and (max-width: 899px) {
	.topicsBtn li { width: 30.0%; }
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
	.topicsBtn li { width: 21.4%; }
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
	.topicsBtn li { width: 22.4%; }
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
	.topicsBtn li { width: 22.4%; }
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}


/*-- フォーム -------------------------------------------------------------*/
@media screen and (max-width: 599px) {
}
@media screen and (min-width: 600px) {
}
@media screen and (min-width: 600px) and (max-width: 899px) {
}
@media screen and (min-width: 900px) and (max-width: 1089px) {
}
@media screen and (min-width: 1090px) and (max-width: 1189px) {
}
@media screen and (min-width: 1190px) and (max-width: 1289px) {
}
@media screen and (min-width: 1290px) and (max-width: 1389px) {
}


