@charset "UTF-8";



/************************************************************

 *  fields evaprojects top.css

 ************************************************************/





/* --------------------------------------------------

	parts

-------------------------------------------------- */

.c-sec {

	position: relative;

	padding: 80px 0;

	background-position: center top;

}

.c-sec:before {

	content: "";

	display: block;

	position: absolute;

	top: -60px;

	left: 0;

	width: 20px;

	height: 60px;

	background-size: cover;

	background-position: left bottom;

}

.c-sec:after {

	content: "";

	display: block;

	position: absolute;

	top: -60px;

	right: 0;

	width: 20px;

	height: 60px;

	background-size: cover;

	background-position: right bottom;

}

.c-h2__title {

	position: relative;

	margin-bottom: 60px;

	text-align: center;

}

.c-h2__title:before {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	left: 0;

	display: block;

	width: 20px;

	height: 2px;

	background-color: #999999;

}

.c-h2__title:after {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	right: 0;

	display: block;

	width: 20px;

	height: 2px;

	background-color: #999999;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.c-sec {

		padding: 40px 0;

	}

	.c-sec:before {

		top: -30px;

		width: 10px;

		height: 30px;

	}

	.c-sec:after {

		top: -30px;

		width: 10px;

		height: 30px;

	}

	.c-h2__title {

		margin-bottom: 30px;

	}

	.c-h2__title:before {

		width: 10px;

		height: 1px;

	}

	.c-h2__title:after {

		width: 10px;

		height: 1px;

	}

}





/* --------------------------------------------------

	visual

-------------------------------------------------- */

.visual {

	position: relative;

}

.visual .l-sec {

	background: linear-gradient(to bottom, #787878, #FFFFFF, #787878);

}

.visual .l-sec__inner {

	max-width: none;

	padding: 0 0;

	height: calc(100vh - 80px);

	min-height: 600px;

}

.visual__list {

	position: relative;

	z-index: 1;

	width: 100%;

	height: 100%;

}

.visual__list li {

	position: absolute;

	width: 230px;

	bottom: 50%;

	opacity: 0;

}

.visual__title {

	position: absolute;

	z-index: 2;

	left: 50%;

	bottom: 80px;

	width: 410px;

	transform: translateX(-50%);

}

.visual__scroll {

	position: absolute;

	z-index: 2;

	display: block;

	left: calc(50% - 20px);

	bottom: 20px;

	width: 41px;

}

.visual__loader {

	position: absolute;

	z-index: 10;

	top: calc(50% - 50px);

	left: 50%;

}

.visual__loader span {

	display: block;

	width: 16px;

	height: 16px;

	border-radius: 50%;

	background-color: #999999;

	box-shadow: 32px 0 #999999, -32px 0 #999999;

	position: relative;

	animation: flash 0.5s ease-out infinite alternate;

}

.is-jack.visual .l-sec__inner,

.is-jack.visual .visual__loader {

	display: none;

}

.visual__jack-ray {

	display: none;

}

.is-jack.visual .visual__jack-ray {

	display: block;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.visual .l-sec__inner {

		height: calc(var(--vh) * 100 - 80px);

		min-height: 0;

	}

	.visual__list li {

		bottom: 56%;

	}

	.visual__title {

		bottom: 80px;

		width: calc(600 / 750 * 100%);

		max-width: 410px;

	}

	.visual__scroll {

		left: calc(50% - 16px);

		bottom: 25px;

		width: 32px;

	}

	@media (orientation: landscape) {

		.visual .l-sec__inner {

			height: calc(100vw / 750 * 600);

		}

	}

}

@keyframes flash {

	0% {

		background-color: rgba(153, 153, 153, 0.5);

		box-shadow: 32px 0 rgba(153, 153, 153, 0.5), -32px 0 #dddddd;

	}

	50% {

		background-color: #dddddd;

		box-shadow: 32px 0 rgba(153, 153, 153, 0.5), -32px 0 rgba(153, 153, 153, 0.5);

	}

	100% {

		background-color: rgba(153, 153, 153, 0.5);

		box-shadow: 32px 0 #dddddd, -32px 0 rgba(153, 153, 153, 0.5);

	}

}





/* --------------------------------------------------

	recommend

-------------------------------------------------- */

.recommend .l-sec {

	padding-top: 0;

	padding-bottom: 0;

	background: linear-gradient(to right, #D9D9D9, #FFFFFF, #D9D9D9);

}

.recommend__list-wrap {

	max-width: 1214px;

	margin: 0 auto 30px;

}

.recommend__list--main {

	margin: 0 calc(85 / 1214 * 100%);

}

.recommend__list--main .slick-list {

	overflow: visible;

}

.recommend__list--main .slick-list .item {

	position: relative;

	padding: 0 10px;

}

.recommend__list--main .slick-list .item .button {

	position: relative;

	display: block;

	pointer-events: none;

}

.recommend__list--main .slick-list .item .button:after {

	content: "";

	position: absolute;

	display: block;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: #111111;

	opacity: 0.5;

	transition: opacity .3s ease;

}

.recommend__list--main .slick-list .item img {

	box-shadow: 0 10px 20px rgba(0,0,0,0.25);

	transition: box-shadow .3s ease;

}

.recommend__list--main .slick-list .item.slick-active .button {

	pointer-events: auto;

}

.recommend__list--main .slick-list .item.slick-active .button:after {

	opacity: 0;

}

.recommend__list--main .slick-list .item .text {

	position: absolute;

	bottom: calc(-35 / 512 * 100%);

	left: -5px;

	max-width: 92%;

	color: #ffffff;

	font-size: 2.4rem;

	line-height: 1.3;

	padding: 12px 20px 8px;

	background-color: #100e12;

	pointer-events: none;

	opacity: 0;

}

.recommend__list--main .slick-arrow {

	position: absolute;

	z-index: 2;

	top: calc(50% - 35px);

	width: 30px;

	height: 70px;

	font-size: 0;

}

.recommend__list--main .slick-arrow.slick-prev {

	left: calc(-65 / 1024 * 100%);

	background-image: url(../img/arrow01.png);

}

.recommend__list--main .slick-arrow.slick-next {

	right: calc(-65 / 1024 * 100%);

	background-image: url(../img/arrow02.png);

}

.recommend__list--thumb {

	max-width: 946px;

	margin: 0 auto;

	padding: 0 23px;

}

.recommend__list--thumb .slick-list .item {

	position: relative;

	margin: 0 10px;

	cursor: pointer;

}

.recommend__list--thumb .slick-list .item::before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.5);

}

.recommend__list--thumb .slick-list .item.slick-current::before {

	background-color: transparent;

	border: 4px solid #49BF97;

}

.recommend__list--thumb .slick-arrow {

	position: absolute;

	z-index: 2;

	top: calc(50% - 14px);

	width: 13px;

	height: 28px;

	font-size: 0;

	background-size: contain;

}

.recommend__list--thumb .slick-arrow.slick-prev {

	left: 0;

	background-image: url(../img/arrow07.png);

}

.recommend__list--thumb .slick-arrow.slick-next {

	right: 0;

	background-image: url(../img/arrow08.png);

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.recommend__list-wrap {

		max-width: none;

		margin-bottom: 20px;

	}

	.recommend__list--main {

		margin: 0 -5px;

	}

	.recommend__list--main .item {

		box-shadow: 0 10px 20px rgba(0,0,0,0.25);

	}

	.recommend__list--main .slick-list .item {

		padding: 0 5px;

	}

	.recommend__list--main .slick-list .item .button:after {

		content: none;

	}

	.recommend__list--main .slick-list .item img {

		box-shadow: none !important;

	}

	.recommend__list--main .slick-list .item .text {

		display: block;

		position: relative;

		bottom: 0;

		left: 0;

		max-width: 100%;

		font-size: 1.2rem;

		line-height: 1.4;

		padding: 10px calc(20 / 750 * 100%);

		height: calc(2.8em + 20px);

		opacity: 1;

	}

	.recommend__list--main .slick-arrow {

		top: calc(50% - 17px);

		width: 15px;

		height: 35px;

		background-size: cover;

	}

	.recommend__list--main .slick-arrow.slick-prev {

		left: calc(20 / 750 * 100%);

	}

	.recommend__list--main .slick-arrow.slick-next {

		right: calc(20 / 750 * 100%);

	}

	.recommend__list--thumb {

		max-width: none;

		padding: 0 14px;

	}

	.recommend__list--thumb .slick-list .item {

		margin: 0 5px;

	}

	.recommend__list--thumb .slick-list .item.slick-current::before {

		border-width: 3px;

	}

	.recommend__list--thumb .slick-arrow {

		top: calc(50% - 10px);

		width: 9px;

		height: 20px;

	}

}





/* --------------------------------------------------

	newmachine

-------------------------------------------------- */

.newmachine .l-sec {

	background: linear-gradient(to right, #D9D9D9, #FFFFFF, #D9D9D9);

}

.newmachine__title {

	text-align: center;

	margin-bottom: 40px;

}

.newmachine__title span {

	position: relative;

	display: inline-block;

	font-size: 2.0rem;

	font-weight: bold;

	padding: 0 50px;

}

.newmachine__title span::before {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	left: 0;

	display: block;

	width: 20px;

	height: 2px;

	background-color: #999999;

}

.newmachine__title span::after {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	right: 0;

	display: block;

	width: 20px;

	height: 2px;

	background-color: #999999;

}

.newmachine__list-wrap {

	max-width: 1020px;

	margin: 0 auto;

	padding: 0 60px;

}

.newmachine__list .item {

	position: relative;

	margin: 0 10px;

}

.newmachine__list .item .image {

	display: flex;

	align-items: flex-end;

}

.newmachine__list .item .text {

	margin-top: 10px;

	display: block;

	font-size: 1.2rem;

	line-height: 1.5;

}

.newmachine__list .slick-list {

	overflow: visible;

}

.newmachine__list .slick-arrow {

	position: absolute;

	z-index: 2;

	top: calc(50% - 50px);

	width: 40px;

	height: 100px;

	font-size: 0;

	background-color: rgba(0, 0, 0, 0.7);

	background-position: center center;

	background-size: 30px auto;

	background-repeat: no-repeat;

	overflow: hidden;

}

.newmachine__list .slick-arrow.slick-prev {

	left: -60px;

	background-image: url(../img/arrow01.png);

}

.newmachine__list .slick-arrow.slick-next {

	right: -60px;

	background-image: url(../img/arrow02.png);

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.newmachine__title {

		margin-bottom: 20px;

	}

	.newmachine__title span {

		padding: 0 25px;

	}

	.newmachine__title span::before {

		width: 10px;

		height: 1px;

	}

	.newmachine__title span::after {

		width: 10px;

		height: 1px;

	}

	.newmachine__list-wrap {

		max-width: none;

		padding: 0 48px;

	}

	.newmachine__list .slick-arrow {

		top: calc(50% - 40px);

		width: 30px;

		height: 80px;

		background-size: 15px auto;

	}

	.newmachine__list .slick-arrow.slick-prev {

		left: -48px;

	}

	.newmachine__list .slick-arrow.slick-next {

		right: -48px;

	}

}





/* --------------------------------------------------

	news

-------------------------------------------------- */

.news .c-sec {

	background: url(../img/bg03.png), linear-gradient(to right, #211F24, #100E13, #333237, #100E13, #211F24);

	background-size: 421px auto, 100% auto;

	background-position: right top, center top;

	background-repeat: no-repeat, repeat-y;

}

.news .c-sec:before {

	background-image: url(../img/bg01.png);

}

.news .c-sec:after {

	background-image: url(../img/bg02.png);

}

.news__title:before {

	background-color: #bbbbbb;

}

.news__title:after {

	background-color: #bbbbbb;

}

.news__title img {

	width: 370px;

}

.news__list {

	display: flex;

	flex-wrap: wrap;

	margin: -30px calc(-15 / 1024 * 100%) 20px;

}

.news__list li {

	width: 25%;

	padding: 0 calc(15 / 1054 * 100%);

	margin-top: 30px;

}

.news__list li .button {

	position: relative;

	display: block;

	color: #FFFFFF;

	padding: 30px calc(20 / 234 * 100%) 30px;

	background-image: url(../img/icon_line.png);

	background-position: top left;

	background-size: 234px 32px;

	background-repeat: no-repeat;

}

.news__list li .button.is-image {

	min-height: 234px;

	background-position: center center;

	background-size: cover;

}

.news__list li .info {

	margin-bottom: 20px;

}

.news__list li .day {

	font-size: 2.2rem;

	line-height: 1.5;

}

.news__list li .type {

	font-size: 1.4rem;

}

.news__list li .title {

	font-size: 1.8rem;

	font-weight: bold;

	line-height: 1.5;

	margin-bottom: 4px;

}

.news__list li .text {

	font-size: 1.6rem;

}

.news__list li .category {

	margin-top: 10px;

}

.news__buttton a {

	display: block;

	text-align: center;

	width: 330px;

	color: #FFFFFF;

	border: 1px solid #FFFFFF;

	font-size: 1.6rem;

	padding: 12px 0;

	margin: 0 auto;

}

.news-sns {

	margin-top: 60px;

}

.news-sns__title {

	margin-bottom: 40px;

}

.news-sns__title img {

	width: 386px;

}

.news-sns__list {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	margin: -20px calc(-20 / 1024 * 100%) 0;

}

.news-sns__list li {

	position: relative;

	width: calc(1 / 4 * 100%);

	margin-top: 20px;

	padding: 0 calc(20 / 1064 * 100%);

}

.news-sns__list li a {

	position: relative;

	display: flex;

	justify-content: center;

	align-items: center;

	border: 1px solid #D5D5D5;

	height: 100%;

	border-radius: 8px 8px;

	padding: 20px 30px;

	text-align: center;

	background: linear-gradient(to bottom, #ffffff, #898989);

}

.news-sns__list li a::before {

	content: "";

	position: absolute;

	top: calc(50% - 7px);

	right: 7px;

	width: 14px;

	height: 14px;

	background-color: #000000;

	border-radius: 50% 50%;

}

.news-sns__list li a::after {

	content: "";

	position: absolute;

	top: calc(50% - 3px);

	right: 13px;

	width: 6px;

	height: 6px;

	border-top: 1px solid #FFFFFF;

	border-left: 1px solid #FFFFFF;

	transform: rotate(135deg);

}

.news-sns__list li .unit__name {

	font-size: 1.8rem;

	font-weight: 700;

	line-height: 1.4;

	margin-bottom: 5px;

}

.news-sns__list li .unit__at {

	font-size: 1.4rem;

}

@media screen and (max-width: 917px) {

	.news-sns__list li .unit__name {

		font-size: 1.6rem;

	}

}

@media screen and (min-width: 768px) {

	.news-sns__list li a {

		transition: opacity .2s ease;

	}

	.news-sns__list li a:hover {

		opacity: 0.8;

	}

}

@media screen and (max-width: 767px) {

	.news__title img {

		width: calc(480 / 710 * 100%);

	}

	.news__list {

		display: block;

		margin: 0 calc(20 / 710 * 100%) 40px;

	}

	.news__list li {

		width: 100%;

		padding: 0 0;

	}

	.news__list li:first-of-type {

		margin-top: 0;

	}

	.news__list li .button {

		padding: 15px 0 0 15px;

		background-size: 117px auto;

		display: flex;

		justify-content: space-between;

	}

	.news__list li .button.is-image {

		min-height: 117px;

		background-size: 124px auto;

	}

	.news__list li .info {

		margin-bottom: 0;

		width: 100px;

	}

	.news__list li .day {

		font-size: 1.5rem;

	}

	.news__list li .type {

		font-size: 1.1rem;

	}

	.news__list li .body {

		flex: 1;

		padding-left: 15px;

	}

	.news__list li .title {

		font-size: 1.5rem;

	}

	.news__list li .text {

		font-size: 1.1rem;

	}

	.news__list li .c-icon-category {

		font-size: 1.0rem;

	}

	.news__list li:nth-of-type(n+3) {

		display: none;

	}

	.news__list.is-more li:nth-of-type(n+3) {

		display: block;

	}

	.news-more__button {

		margin: -10px 0 20px;

	}

	.news-more__button.is-more {

		display: none;

	}

	.news-more__button a {

		display: block;

		color: #FFFFFF;

		text-align: center;

		font-size: 1.6rem;

		padding: 12px 0;

	}

	.news-more__button a span {

		position: relative;

		display: inline-block;

		padding-left: 24px;

	}

	.news-more__button a span::before {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #FFFFFF;

	}

	.news-more__button a span::after {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #FFFFFF;

		transform: rotate(90deg);

	}

	.news__buttton a {

		width: auto;

		margin: 0 calc(20 / 710 * 100%);

	}

	.news-sns__title {

		margin-bottom: 30px;

	}

	.news-sns__title img {

		width: calc(488 / 710 * 100%);

	}

	.news-sns__list {

		margin: -30px calc(5 / 710 * 100%) 0;

	}

	.news-sns__list li {

		width: calc(1 / 2 * 100%);

		margin-top: 15px;

		padding: 0 calc(15 / 700 * 100%);

	}

	.news-sns__list li a {

		padding: 15px 15px;

	}

	.news-sns__list li .unit__name {

		font-size: 1.4rem;

	}

	.news-sns__list li .unit__at {

		font-size: 1.2rem;

	}

}





/* --------------------------------------------------

	youtube

-------------------------------------------------- */

.youtube .l-sec {

	background: linear-gradient(to right, #D9D9D9, #FFFFFF, #D9D9D9);

}

.youtube .l-sec:before {

	background-image: url(../img/bg04.png);

}

.youtube .l-sec:after {

	background-image: url(../img/bg05.png);

}

.youtube__title img {

	width: 450px;

}

.youtube-unit + .youtube-unit {

	margin-top: 40px;

}

.youtube-unit .subtitle {

	font-size: 2.2rem;

	padding-left: 40px;

	background-image: url(../img/icon_slash.png);

	background-repeat: no-repeat;

	background-position: left center;

	margin-bottom: 10px;

}

.youtube-unit .list {

	margin: 0 -5px;

}

.youtube-unit .list .item {

	padding: 0 5px;

}

.youtube-unit .list .button {

	position: relative;

	display: block;

}

.youtube-unit .list .button.is-short {

	margin: 0 10px;

}

.youtube-unit .list .button .image {

	position: relative;

	display: block;

}

.youtube-unit .list .button.is-short .image {

	border-radius: 8px 8px;

	overflow: hidden;

}

.youtube-unit .list .button .image:after {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-image: url(../img/icon_modal.png);

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 22px auto;

	background-color: rgba(0, 0, 0, 0.6);

	opacity: 0;

}

.youtube-unit .list .button[target="_blank"] .image:after {

	background-image: url(../img/icon_outside.png);

}

.youtube-unit .list .button .date {

	display: block;

	margin-top: 5px;

}

.youtube-unit .slick-track {

	margin: 0 0;

}

.youtube-unit .slick-arrow {

	position: absolute;

	z-index: 2;

	top: 0;

	width: 40px;

	height: calc(100% - 72px);

	font-size: 0;

	background-color: rgba(0, 0, 0, 0.7);

	background-position: center center;

	background-size: 30px auto;

	background-repeat: no-repeat;

	overflow: hidden;

}

.youtube-unit .slick-disabled {

	opacity: 0.3;

}

.youtube-unit .slick-arrow.slick-prev {

	left: 5px;

	background-image: url(../img/arrow01.png);

}

.youtube-unit .slick-arrow.slick-next {

	right: 5px;

	background-image: url(../img/arrow02.png);

}

.youtube__search {

	margin-bottom: 60px;

}

.youtube-search__title {

	position: relative;

	font-size: 2.0rem;

	color: #FFFFFF;

	padding: 15px 50px 13px 30px;

	background-color: #000000;

	cursor: pointer;

}

.youtube-search__title:before {

	content: "";

	position: absolute;

	top: calc(50% - 10px);

	right: 20px;

	width: 20px;

	height: 20px;

	border: 1px solid #FFFFFF;

	border-radius: 50% 50%;

}

.youtube-search__title span {

	position: relative;

	display: block;

}

.youtube-search__title span:before {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	right: -25px;

	width: 10px;

	height: 1px;

	background-color: #FFFFFF;

}

.youtube-search__title span:after {

	content: "";

	position: absolute;

	top: calc(50% - 1px);

	right: -25px;

	width: 10px;

	height: 1px;

	background-color: #FFFFFF;

	transform: rotate(90deg);

	opacity: 1;

}

.youtube-search__title.is-active span:after {

	opacity: 0;

}

.youtube-search__body {

	display: none;

}

.youtube-search__inner {

		padding-top: 30px;

	}

.youtube-search-unit + .youtube-search-unit {

	margin-top: 16px;

}

.youtube-search-unit.checkbox-unit {

	display: flex;

	font-size: 1.6rem;

	padding: 16px 32px;

	background-color: #FFFFFF;

	border: 1px solid #CCCCCC;

}

.youtube-search-unit.checkbox-unit .title {

	width: 80px;

}

.youtube-search-unit.checkbox-unit .list {

	display: flex;

	flex: 1;

	flex-wrap: wrap;

	margin: -8px -12px 0;

}

.youtube-search-unit.checkbox-unit .list li {

	padding: 8px 12px 0;

}

.youtube-search-unit.checkbox-unit .list li label {

	cursor: pointer;

}

.youtube-search-unit.checkbox-unit .list li input {

	display: none;

}

.youtube-search-unit.checkbox-unit .list li input + span {

	position: relative;

	display: inline-block;

	padding-left: 24px;

}

.youtube-search-unit.checkbox-unit .list li input + span:before {

	content: "";

	position: absolute;

	top: 3px;

	left: 0;

	width: 16px;

	height: 16px;

	border: 2px solid #CCCCCC;

}

.youtube-search-unit.checkbox-unit .list li input + span:after {

	content: "";

	position: absolute;

	top: 1px;

	left: 8px;

	width: 6px;

	height: 14px;

	border-top: 2px solid #49BF97;

	border-left: 2px solid #49BF97;

	transform: rotate(-135deg);

	opacity: 0;

}

.youtube-search-unit.checkbox-unit .list li input:checked + span:after {

	opacity: 1;

}

.youtube-search-unit.select-unit {

	font-size: 1.6rem;

}

.youtube-search-unit.select-unit .list {

	display: flex;

	flex-wrap: wrap;

	font-size: 1.6rem;

	margin: -15px -12px 0;

}

.youtube-search-unit.select-unit .list li {

	position: relative;

	width: calc(1 / 3 * 100%);

	padding: 0 12px;

	margin-top: 15px;

}

.youtube-search-unit.select-unit .list li select {

	display: block;

	width: 100%;

	padding: 15px 40px 15px 16px;

	background-color: #FFFFFF;

	border: 1px solid #CCCCCC;

	outline: none;

	cursor: pointer;

}

.youtube-search-unit.select-unit .list li:after {

	content: "";

	position: absolute;

	top: calc(50% - 10px);

	right: 30px;

	width: 12px;

	height: 12px;

	border-top: 2px solid #000000;

	border-left: 2px solid #000000;

	transform: rotate(-135deg);

	pointer-events: none;

}

.youtube-search-close__button {

	display: block;

	border: 1px solid #000000;

	text-align: center;

	font-size: 1.6rem;

	padding: 12px 0 8px;

	width: 330px;

	margin: 30px auto 0;

	cursor: pointer;

}

.youtube-search-close__button span {

	position: relative;

	display: inline-block;

	padding-left: 24px;

}

.youtube-search-close__button span:before {

	content: "";

	position: absolute;

	top: calc(50% - 2px);

	left: 0;

	width: 16px;

	height: 1px;

	background-color: #000000;

	transform: rotate(45deg);

}

.youtube-search-close__button span:after {

	content: "";

	position: absolute;

	top: calc(50% - 2px);

	left: 0;

	width: 16px;

	height: 1px;

	background-color: #000000;

	transform: rotate(-45deg);

}

/* modal */

.youtube-modal .mfp-content {

	margin: 50px auto 30px;

}

.youtube-modal .mfp-iframe-scaler iframe {

	box-shadow: none;

}

.youtube-modal .mfp-iframe-holder .mfp-close {

	width: 150px;

	height: 36px;

	background-image: url(../img/btn_close.png);

	background-size: 100% auto;

	font-size: 0;

	top: -36px;

	right: 0;

	opacity: 1;

	padding-right: 0;

}

.youtube-modal.is-short .mfp-content {

	max-width: 400px;

}

.youtube-modal.is-short .mfp-iframe-scaler {

	padding-top: 177.87%;

}

@media screen and (min-width: 768px) {

	.youtube-unit .list .button .image:after {

		transition: opacity .2s ease;

	}

	.youtube-unit .list .button:hover .image:after {

		opacity: 1;

	}

	.youtube-search-close__button {

		transition: opacity .2s ease;

	}

	.youtube-search-close__button:hover {

		transition: 0.8;

	}

}

@media screen and (max-width: 767px) {

	.youtube__title img {

		width: calc(620 / 710 * 100%);

	}

	.youtube-unit + .youtube-unit {

		margin-top: 30px;

	}

	.youtube-unit .subtitle {

		font-size: 1.6rem;

		padding-left: 30px;

		margin-left: calc(20 / 710 * 100%);

		background-size: 24px auto;

	}

	.youtube-unit .list .button {

		font-size: 1.2rem;

	}

	.youtube-unit .list .button .image:after {

		top: calc(50% - 15px);

		left: calc(50% - 15px);

		width: 30px;

		height: 30px;

		background-size: 11px auto;

		border-radius: 50% 50%;

		opacity: 1;

	}

	.youtube-unit .list.list--short .slick-list {

		padding: 0 20px;

	}

	.youtube-unit .slick-arrow {

		width: 30px;

		height: calc(100% - 63px);

		background-size: 15px auto;

	}

	.youtube__search {

		padding: 0 calc(20 / 710 * 100%);

		margin-bottom: 30px;

	}

	.youtube-search__title {

		font-size: 1.6rem;

		padding: 8px 40px 6px 18px;

	}

	.youtube-search__title:before {

		right: 16px;

	}

	.youtube-search__title span:before {

		right: -19px;

	}

	.youtube-search__title span:after {

		right: -19px;

	}

	.youtube-search__inner {

		padding-top: 16px;

	}

	.youtube-search-unit + .youtube-search-unit {

		margin-top: 8px;

	}

	.youtube-search-unit.checkbox-unit {

		padding: 12px 18px;

	}

	.youtube-search-unit.checkbox-unit .title {

		width: 70px;

	}

	.youtube-search-unit.select-unit .list {

		display: block;

		margin: 0 0;

	}

	.youtube-search-unit.select-unit .list li {

		position: relative;

		width: 100%;

		padding: 0 0;

		margin-top: 0;

	}

	.youtube-search-unit.select-unit .list li + li {

		margin-top: 8px;

	}

	.youtube-search-unit.select-unit .list li select {

		padding: 12px 40px 12px 18px;

	}

	.youtube-search-unit.select-unit .list li:after {

		top: calc(50% - 10px);

		right: 18px;

	}

	.youtube-search-close__button {

		margin-top: 16px;

		padding: 8px 0 4px;

		width: 100%;

	}

	/* modal */

	.youtube-modal .mfp-content {

		margin: 30px auto 10px;

	}

	.youtube-modal .mfp-iframe-holder .mfp-close {

		width: 75px;

		height: 18px;

		top: -18px;

	}

}





/* --------------------------------------------------

	archives

-------------------------------------------------- */

.archives .c-sec {

	background: linear-gradient(to right, #CECCCD, #B3B3B3, #E7E7E7, #B3B3B3, #CECCCD);

}

.archives .c-sec:before {

	background-image: url(../img/bg06.png);

}

.archives .c-sec:after {

	background-image: url(../img/bg07.png);

}

.archives__title img {

	width: 405px;

}

.archives-unit_wrap::after {

	content: "";

	display: table;

	clear: both;

}

.archives-unit .list li {

	width: calc(1 / 8 * 100%);

	float: left;

}

.archives-unit .list li .panel {

	position: relative;

	height: 280px;

	overflow: hidden;

	display: block;

}

.archives-unit .list li .panel.cr {

	background: linear-gradient(to right, #D9D9D9, #FFFFFF);

}

.archives-unit .list li .panel.slot {

	background: linear-gradient(to right, #8A898D, #7D7C80);

}

.archives-unit .list li .panel.button {

	cursor: pointer;

}

.archives-unit .list li .panel .title {

	width: 120px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}

.archives-unit .list li .panel .image {

	padding: 10px 0 0 20px;

	width: calc(300 / 180 * 100%);

}

.archives-unit .list li .panel .image.small {

	width: calc(200 / 180 * 100%);

}

.archives-unit .list li .panel .body {

	position: absolute;

	bottom: 0;

	left: 0;

	width: 100%;

	height: 80px;

	padding: 10px 10px;

	font-size: 1.2rem;

	background-color: rgba(0, 0, 0, 0.7);

}

.archives-unit .list li .panel .date {

	line-height: 1;

	margin-bottom: 6px;

}

.archives-unit .list li .panel .date span {

	display: inline-block;

	background-color: #FFFFFF;

	padding: 3px 8px;

}

.archives-unit .list li .panel .text {

	color: #FFFFFF;

	line-height: 1.5;

	overflow: hidden;

	display: -webkit-box;

	-webkit-box-orient: vertical;

	-webkit-line-clamp: 2;

}

/* modal */

.archives-modal {

	max-width: 860px;

	padding: 60px 0 50px;

	margin: 0 auto;

}

.archives-modal .modal__inner {

	display: flex;

	background-color: #605E67;

}

.archives-modal .modal__image {

	width: calc(360 / 860 * 100%);

	padding: 24px calc(48 / 860 * 100%);

	text-align: center;

	align-self: flex-start;

	background: linear-gradient(to right, #CECCCD, #B3B3B3, #E7E7E7, #B3B3B3, #CECCCD);

}

.archives-modal .modal__body {

	width: calc(500 / 860 * 100%);

	color: #FFFFFF;

	font-size: 1.3rem;

}

.archives-modal .modal__body .title {

	background-color: #49BF97;

	padding: 24px calc(32 / 500 * 100%);

}

.archives-modal .modal__body .title .date {

	font-size: 1.8rem;

}

.archives-modal .modal__body .title .name {

	font-size: 2.0rem;

	line-height: 1.4;

}

.archives-modal .modal__body .body {

	padding: 32px calc(32 / 500 * 100%);

}

.archives-modal .modal__body .text {

	margin-bottom: 30px;

}

.archives-modal .modal__body .spec {

	margin-bottom: 30px;

	border: 1px solid #FFFFFF;

	border-collapse:  collapse;

	width: 100%;

	line-height: 1.4;

}

.archives-modal .modal__body .spec th,

.archives-modal .modal__body .spec td {

	border: 1px solid #FFFFFF;

	text-align: center;

	padding: 4px 5px;

}

.archives-modal .modal__body .image {

	margin: 0 -5px 30px;

	display: flex;

	justify-content: center;

}

.archives-modal .modal__body .image > * {

	padding: 0 5px;

}

.archives-modal .modal__body .image .three_col {

	width: calc(1 / 3 * 100%);

}

.archives-modal .modal__body .image .one_col {

	width: calc(1 / 2 * 100%);

}

.archives-modal .modal__body .link__button {

	display: block;

	max-width: 200px;

	margin: 0 auto 30px;

	padding: 12px 0;

	line-height: 1;

	font-size: 1.6rem;

	text-align: center;

	color: #000000;

	background-color: #FFFFFF;

}

.archives-modal .modal__body .close__button {

	display: block;

	padding: 12px 0;

	line-height: 1;

	font-size: 1.6rem;

	text-align: center;

	border: 1px solid #FFFFFF;

}

.archives-modal .modal__body .close__button span {

	position: relative;

	display: inline-block;

	padding-left: 25px;

}

.archives-modal .modal__body .close__button span::before {

	content: "";

	position: absolute;

	top: 50%;

	left: 0;

	width: 16px;

	height: 1px;

	background-color: #FFFFFF;

	transform: rotate(45deg);

}

.archives-modal .modal__body .close__button span::after {

	content: "";

	position: absolute;

	top: 50%;

	left: 0;

	width: 16px;

	height: 1px;

	background-color: #FFFFFF;

	transform: rotate(-45deg);

}

.mfp-archive button.mfp-arrow {

	opacity: 1;

	width: 40px;

	height: 112px;

	border: 1px solid #FFFFFF;

	margin-top: -56px !important;

	background-color: rgba(0, 0, 0, 0.7);

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 30px auto;

	transform: scale(1);

}

.mfp-archive button.mfp-arrow::before,

.mfp-archive button.mfp-arrow::after {

	content: none;

}

.mfp-archive button.mfp-arrow-left {

	left: calc(50% - 490px);

	background-image: url(../img/arrow01.png);

}

.mfp-archive button.mfp-arrow-right {

	right: calc(50% - 490px);

	background-image: url(../img/arrow02.png);

}

.mfp-archive button.mfp-close {

	width: 40px;

	height: 40px;

	border: 1px solid #FFFFFF;

	background-color: rgba(0, 0, 0, 0.7);

	background-image: url(../img/icon_close.png);

	background-repeat: no-repeat;

	background-position: center center;

	background-size: 16px auto;

	opacity: 1;

	font-size: 0;

	top: 10px !important;

	right: calc(50% - 430px);

}

@media screen and (max-width: 980px) {

	.mfp-archive button.mfp-arrow-left {

		left: 0;

	}

	.mfp-archive button.mfp-arrow-right {

		right: 0;

	}

}

@media screen and (max-width: 960px) {

	.mfp-archive button.mfp-close {

		right: 0;

	}

}

@media screen and (min-width: 768px) {

	.archives-unit .list li .panel .image {

		transition: transform .2s ease;

	}

	.archives-unit .list li .panel .image:hover {

		transform: scale(1.01);

	}

}

@media screen and (max-width: 767px) {

	.archives__title img {

		width: calc(524 / 710 * 100%);

	}

	.archives-unit + .archives-unit {

		margin-top: 60px;

	}

	.archives-unit .list::after {

		content: "";

		display: table;

		clear: both;

	}

	.archives-unit .list li {

		width: calc(1 / 4 * 100%);

	}

	.archives-unit .list li .panel {

		height: 230px;

	}

	.archives-unit .list li .panel .title {

		width: 95px;

	}

	.archives-unit .list li .panel .image {

		padding-top: 15px;

	}

	.archives-unit .list li .panel .body {

		height: 85px;

		padding: 10px 8px;

		font-size: 1.1rem;

	}

	.archives-unit .list li .panel .date {

		font-size: 1.0rem;

		margin-bottom: 5px;

	}

	.archives-unit .list li .panel .date span {

		padding: 2px 8px;

	}

	.archives-unit .list li .panel .text {

		-webkit-line-clamp: 3;

	}

	.archives-unit .list[data-num="4"] li:nth-of-type(n+9) {

		display: none;

	}

	.archives-unit .list[data-num="3"] li:nth-of-type(n+7) {

		display: none;

	}

	.archives-unit .list.is-more li {

		display: block !important;

	}

	.archives-unit .more__button {

		margin: 30px calc(40 / 710 * 100%) 0;

	}

	.archives-unit .more__button.is-more {

		display: none;

	}

	.archives-unit .more__button a {

		display: block;

		text-align: center;

		font-size: 1.6rem;

		padding: 12px 0;

		border: 1px solid #000000;

	}

	.archives-unit .more__button a span {

		position: relative;

		display: inline-block;

		padding-left: 24px;

	}

	.archives-unit .more__button a span::before {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #000000;

	}

	.archives-unit .more__button a span::after {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #000000;

		transform: rotate(90deg);

	}

	/* modal */

	.archives-modal {

		padding-bottom: 10px;

	}

	.archives-modal .modal__inner {

		display: block;

	}

	.archives-modal .modal__image {

		width: 100%;

		padding: 24px calc(56 / 750 * 100%);

	}

	.archives-modal .modal__body {

		width: 100%;

	}

	.archives-modal .modal__body .title {

		padding: 24px calc(32 / 750 * 100%);

	}

	.archives-modal .modal__body .title .date {

		font-size: 1.6rem;

	}

	.archives-modal .modal__body .title .name {

		font-size: 1.8rem;

	}

	.archives-modal .modal__body .body {

		padding: 32px calc(32 / 750 * 100%);

	}

	.mfp-archive button.mfp-arrow {

		width: 30px;

		height: 100px;

		border: none;

		margin-top: -50px !important;

		background-size: 15px auto;

	}

}





/* --------------------------------------------------

	shops

-------------------------------------------------- */

.shops .c-sec {

	background-image: url(../img/bg08.jpg);

	background-size: cover;

	background-position: center center;

}

.shops .c-sec:before {

	background-image: url(../img/bg09.png);

}

.shops .c-sec:after {

	background-image: url(../img/bg10.png);

}

.shops__title {

	margin-bottom: 30px;

}

.shops__title img {

	width: 446px;

}

.shops__note {

	text-align: center;

	font-size: 1.6rem;

	margin-bottom: 40px;

}

.shops-cols {

	display: flex;

	margin: 0 calc(-20 / 1024 * 100%);

}

.shops-unit {

	width: 50%;

	padding: 0 calc(20 / 1064 * 100%);

}

.shops-unit .title {

	width: 146px;

	margin: 0 auto 35px;

}

.shops-unit .list li + li {

	border-top: 1px solid #CCCCCC;

}

.shops-unit .list li .button {

	display: flex;

	align-items: center;

	color: #111111;

	padding: 20px calc(20 / 492 * 100%);

	background-color: rgba(255, 255, 255, 0.7);

}

.shops-unit .list li .button .image {

	width: calc(96 / 452 * 100%);

}

.shops-unit .list li .button .text {

	flex: 1;

	margin-left: calc(20 / 452 * 100%);

	padding-left: calc(30 / 452 * 100%);

	background-image: url(../img/icon_pin.png);

	background-repeat: no-repeat;

	background-position: left center;

	background-size: 16px auto;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.shops__title {

		margin-bottom: 20px;

	}

	.shops__title img {

		width: calc(592 / 710 * 100%);

	}

	.shops__note {

		font-size: 1.4rem;

		margin-bottom: 30px;

	}

	.shops-cols {

		display: block;

		margin: 0 0;

	}

	.shops-unit {

		width: 100%;

		padding: 0 0;

	}

	.shops-unit.cr {

		margin-bottom: 30px;

	}

	.shops-unit .title {

		width: calc(224 / 670 * 100%);

		margin-bottom: 20px;

	}

	.shops-unit.cr .list li:nth-of-type(n+6) {

		display: none;

	}

	.shops-unit.cr .list.is-more li:nth-of-type(n+6) {

		display: block;

	}

	.shops-unit.slot .list li:nth-of-type(n+3) {

		display: none;

	}

	.shops-unit.slot .list.is-more li:nth-of-type(n+3) {

		display: block;

	}

	.shops-unit .list li .button {

		padding: 20px calc(20 / 710 * 100%);

	}

	.shops-unit .list li .button .image {

		width: calc(192 / 670 * 100%);

	}

	.shops-unit .list li .button .text {

		margin-left: 10px;

		padding-left: 30px;

	}

	.shops-unit .more__button {

		border-top: 1px solid #CCCCCC;

	}

	.shops-unit .more__button.is-more {

		display: none;

	}

	.shops-unit .more__button a {

		display: block;

		text-align: center;

		font-size: 1.6rem;

		padding: 12px 0;

		background-color: rgba(255, 255, 255, 0.7);

	}

	.shops-unit .more__button a span {

		position: relative;

		display: inline-block;

		padding-left: 24px;

	}

	.shops-unit .more__button a span::before {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #000000;

	}

	.shops-unit .more__button a span::after {

		content: "";

		position: absolute;

		top: calc(50% - 1px);

		left: 0;

		width: 16px;

		height: 1px;

		background-color: #000000;

		transform: rotate(90deg);

	}

}





/* --------------------------------------------------

	banner

-------------------------------------------------- */

.banner .c-sec {

	background: linear-gradient(to right, #211F24, #100E13, #333237, #100E13, #211F24);

	background-size: 100% auto;

	background-position: center top;

	background-repeat: repeat-y;

}

.banner .c-sec:before {

	background-image: url(../img/bg01.png);

}

.banner .c-sec:after {

	background-image: url(../img/bg02.png);

}

.banner__title:before {

	background-color: #bbbbbb;

}

.banner__title:after {

	background-color: #bbbbbb;

}

.banner__title img {

	width: 120px;

}

.banner__list {

	width: calc(800 / 1024 * 100%);

	margin: 0 auto;

}

.banner__list li + li {

	margin-top: 20px;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.banner__title img {

		width: calc(174 / 710 * 100%);

	}

	.banner__list {

		width: auto;

		margin: 0 calc(20 / 710 * 100%);

	}

	.banner__list li + li {

		margin-top: 10px;

	}

}





/* --------------------------------------------------

	magnificPopup

-------------------------------------------------- */

.mfp-container {

	padding: 0 50px;

}

.mfp-fade.mfp-bg {

	opacity: 0.8;

	transition: opacity 0.25s ease-out;

}

.mfp-fade.mfp-bg.mfp-removing {

	opacity: 0;

}

.mfp-fade.mfp-wrap .mfp-content {

	transition: opacity 0.25s ease-out;

}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {

	opacity: 0;

}

.mfp-fade .mfp-arrow {

	transition: opacity 0.25s ease-out;

}

.mfp-fade.mfp-removing .mfp-arrow {

	opacity: 0;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

	.mfp-container {

		padding: 0 10px;

	}

}





/* --------------------------------------------------

	opeing-movie

-------------------------------------------------- */

.opeing-movie {

	max-width: 900px;

	margin: 0 auto;

}

.opeing-movie-frame {

	position: relative;

	width: 100%;

	height: 0;

	padding-bottom: 56.25%;

}

.opeing-movie-frame iframe {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

}





/* --------------------------------------------------

	※※※※※

-------------------------------------------------- */

@media screen and (min-width: 768px) {

}

@media screen and (max-width: 767px) {

}