@charset "UTF-8";

/* CSS Information
---------------------------------------------------------------
Site URL:https://uniwork.jp
File name:sp.css
Summary:reset styles
Created:2021-10-26
--------------------------------------------------------------- */

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

/* Index */
/* ------------------------------------------------------------ */

main#index section#title {
	background: #000 url(../img/index/bg_title.jpg) no-repeat center center;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
}

main#index section#title .inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

main#index section#title h2 {
	width: 92%;
	height: auto;
	margin-top: 55px;
}

/* Main Item */
main#index section#mainvisual h3 {
	color: #c20d23;
	text-align: center;
}

main#index section#mainvisual p.comment {
	text-align: center;
}

main#index section#mainvisual .inner {
	width: 100%;
	padding: 0;
}

main#index section#mainvisual .swiper-container {
	margin-top: 30px;
	position: relative;
	overflow: hidden;
}

main#index section#mainvisual .swiper-container .swiper-wrapper {
	background: #000;
	padding-bottom: 30px;
}

main#index section#mainvisual .swiper-container .swiper-wrapper .swiper-slide {
	width: 100%;
	position: relative;
}

main#index section#mainvisual .swiper-container .swiper-wrapper .swiper-slide::before {
	content: "";
	display: block;
	padding-top: 100%;
}

main#index section#mainvisual .swiper-container .swiper-wrapper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#index section#mainvisual .swiper-container .swiper-pagination {
	bottom: 0;
}

main#index section#mainvisual .swiper-container .swiper-pagination .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,20px));
    height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,20px));
    display: inline-block;
    border-radius: 50%;
    background: var(--swiper-pagination-bullet-inactive-color,#b2b2b2);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 1);
	margin: 0 var(--swiper-pagination-bullet-horizontal-gap,5px);
}

main#index section#mainvisual .swiper-container .swiper-pagination .swiper-pagination-bullet-active {
    background:#000;
}

/* Other Item */
main#index section#other {
	margin: 60px 0 0;
}

main#index section#other h3 {
	color: #c20d23;
	text-align: center;
}

main#index section#other p.comment {
	text-align: center;
}

main#index section#other .inner {
	background: #c20d23;
	width: 100%;
	margin-top: 100px;
	padding: 0 0 60px;
}

main#index section#other .inner > ul {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

main#index section#other .inner > ul li {
	border-radius: 140px;
	width: 140px;
	height: 140px;
}

main#index section#other .inner > ul li:nth-of-type(1) {
	margin-top: -70px;
}

main#index section#other .inner > ul li:nth-of-type(n+2) {
	margin-top: 30px;
}

main#index section#other .inner > ul li a {
	border-radius: 70px;
	width: 140px;
	height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

main#index section#other .inner > ul li:nth-of-type(1) a {
	background: #fff url(../img/index/img_lineup1.jpg) no-repeat center center;
}

main#index section#other .inner > ul li:nth-of-type(2) a {
	background: #fff url(../img/index/img_lineup2.jpg) no-repeat center center;
}

main#index section#other .inner > ul li:nth-of-type(3) a {
	background: #fff url(../img/index/img_lineup3.jpg) no-repeat center center;
}

main#index section#other .inner > ul li a h4 {
	text-align: center;
	color: #c20d23;
}

main#index section#other .inner > ul li a h4 sub {
	font-weight: 700;
}

main#index section#other .inner > ul li a p.comment {
	color: #fff;
}

main#index section#other .inner > ul li a img {
	width: 18px;
	height: auto;
	margin-top: 20px;
}

main#index section#other .inner > p.comment {
	color: #fff;
	text-align: left;
	margin-top: 30px;
	padding: 0 4vw;
}

/* Banner */
main#index section#banner {
	background: #000 url(../img/common/bg_event.jpg) no-repeat center bottom;
	background-size: contain;
	margin: 0 0 120px;
	padding: 60px 0 60px;
}

main#index section#banner p.bnr {
	background: #fff;
}

/* Philosophy */
main#index section#philosophy {
	margin: 200px 0 60px;
}

main#index section#philosophy figure.upper {
	background: #000 url(../img/index/img_philosophy_upper.jpg) no-repeat center center;
	background-size: cover;
	height: 150px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

main#index section#philosophy figure.upper h3 {
	width: 75%;
	max-width: 365px;
}

main#index section#philosophy a {
	background: #c20d23;
	color: #fff;
	padding: 60px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

main#index section#philosophy a > div {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

main#index section#philosophy h4 {
	font-family: "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	font-size: 24px;
	font-weight: bold;
	margin-top: 30px;
}

main#index section#philosophy p.btn {
	align-self: flex-end;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

main#index section#philosophy p.btn img {
	width: 18px;
	margin-left: 5px;
}

main#index section#philosophy figcaption {
	background: #000;
	color: #fff;
	text-align: left;
	padding: 30px 4vw;
	display: block;
}

main#index section#philosophy figure.lower {
    height: 150px;
}

main#index section#philosophy figure.lower img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Catalogue */
/* ------------------------------------------------------------ */

main#catalogue {
}

main#catalogue section#title {
	background: #000 url(../img/catalogue/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#catalogue section#merchandise .inner > div {
	display: block;
}

main#catalogue section#merchandise .inner > div article {
	display: block;
}

main#catalogue section#merchandise article {
    background: #fff;
    box-shadow: 4px 4px 12px 0 rgb(0 0 0 / 30%);
	margin-top: 20px;
    padding: 4vw;
}

main#catalogue section#merchandise article figcaption h1 {
	font-size: 18px;
	font-weight: 700;
	margin: 20px 0;]
	display: flex;
	justify-content: center;
}

main#catalogue section#merchandise article figcaption h1 span {
	font-size: 12px;
	line-height: 1.2;
	margin-top: 10px;
	display: block;
}

main#catalogue section#merchandise article figcaption p.comment {
	margin: 20px 0;
}

main#catalogue section#merchandise article.featuredproducts {
}

main#catalogue section#merchandise article.featuredproducts figure {
    width: 100%;
}

main#catalogue section#merchandise article.featuredproducts figcaption {
    width: 100%;
	display: flex;
	flex-direction: column;
}

main#catalogue section#merchandise article.featuredproducts figcaption h1 {
	order: 2;
	margin: 0;
}

main#catalogue section#merchandise article.featuredproducts figcaption p {
	order: 3;
}

main#catalogue section#merchandise article.featuredproducts figcaption ul {
	margin: 20px 0;
	order: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

main#catalogue section#merchandise article.featuredproducts figcaption ul li {
	width: 31%;
}

main#catalogue section#merchandise article.featuredproducts figcaption ul li:nth-of-type(n+4) {
	margin-top: 10px;
}

main#catalogue section#merchandise article.featuredproducts figcaption p.btn2 {
	margin-top: 10px;
}

/* Products 1 */
/* ------------------------------------------------------------ */

main#products1 {
}

main#products1 section#title {
	background: #000 url(../img/products/bg_title_products1.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}

main#products1 section#title h2 {
	color: #000;
	margin-top: 60px;
}

main#products1 section#features1 {
	margin: 60px 0 0;
}

main#products1 section#features1 > h3 {
	text-align: center;
}

main#products1 section#features1 > h3 span {
	color: #c9c9c9;
	font-weight: 900;
	display: block;
	margin-bottom: 10px;
}

main#products1 section#features1 > p.comment {
	text-align: center;
}

main#products1 section#features1 .inner {
	background: #c20d23;
	margin-top: 100px;
	padding: 0 4vw 60px;
}

main#products1 section#features1 .inner > ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

main#products1 section#features1 .inner > ul li {
	width: 100%;
}

main#products1 section#features1 .inner > ul li:nth-of-type(1) {
	margin-top: -70px;
}

main#products1 section#features1 .inner > ul li:nth-of-type(n+2) {
	margin-top: 30px;
}

main#products1 section#features1 .inner > ul li figure {
	width: 140px;
	margin: 0 auto;
	position: relative;
}

main#products1 section#features1 .inner > ul li figure::before {
	content: "";
	display: block;
	padding-top: 100%;
}

main#products1 section#features1 .inner > ul li figure img {
	border-radius: 70px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#products1 section#features1 .inner > ul li figcaption {
	padding: 20px 0 0;
}

main#products1 section#features1 .inner > ul li figcaption h4 {
	text-align: center;
	color: #fff;
}

main#products1 section#features1 .inner > ul li figcaption p.comment {
	color: #fff;
}

main#products1 section#features2 {
	background: #000;
	margin: 0;
	padding: 60px 0;
}

main#products1 section#features2 .inner h3 {
	color: #fff;
	text-align: center;
}

main#products1 section#features2 .inner > ul {
	width: 100%;
	margin: 30px auto;
	display: block;
}

main#products1 section#features2 .inner > ul li {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

main#products1 section#features2 .inner > ul li:nth-of-type(n+2) {
	margin-top: 30px;
}

main#products1 section#features2 .inner > ul li figure {
	width: 128px;
}

main#products1 section#features2 .inner > ul li figcaption {
	padding: 20px 0 0;
}

main#products1 section#features2 .inner > ul li figcaption h4 {
	color: #969696;
	text-align: center;
	line-height: 1.2;
}

main#products1 section#features2 .inner > ul li figcaption p.comment {
	color: #fff;
}

main#products1 section#features2 .inner strong {
	color: #969696;
	text-align: center;
	font-size: 24px;
	line-height: 1.2;
	display: block;
}

main#products1 section#movie {
}

main#products1 section#movie > div {
	margin: 0 auto;
}

main#products1 section#movie > figure {
	background: #000 url(../img/products/bg_img_products1.jpg) no-repeat center center;
	background-size: cover;
	height: 200px;
	margin: 60px 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

main#products1 section#movie > figure img {
	width: auto;
	height: 260px;
}

main#products1 section#photo {
    margin-top: 0;
}

main#products1 section#photo figure {
    height: 100px;
}

main#products1 section#photo figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main#products1 section#photo h3 {
	color: #c9c9c9;
	text-align: center;
	font-size: 48px;
	margin: 60px auto;
}

main#products1 section#photo .inner {
	margin: 60px auto 0;
	display: block;
}

main#products1 section#photo .btn2 {
	margin-top: 20px;
}

/* Products 2 */
/* ------------------------------------------------------------ */

main#products2 {
}

main#products2 section#title {
	background: linear-gradient(-25deg, #000000 0%, #000000 50%, #f3c51e 50%, #f3c51e 100%);
	height: 250px;
	display: flex;
	justify-content: center;
	align-items: center;
}

main#products2 section#title .inner {
	display: flex;
	justify-content: center;
	align-items: center;
}

main#products2 section#title h2 {
	width: 92%;
	max-width: 996px;
	height: auto;
}

main#products2 section#features1 {
	margin: 60px 0 0;
}

main#products2 section#features1 > h3 {
	text-align: center;
}

main#products2 section#features1 > h3 span {
	color: #f3c51e;
	font-weight: 900;
	display: block;
	margin-bottom: 10px;
}

main#products2 section#features1 > p.comment {
	text-align: center;
}

main#products2 section#features1 .inner {
	background: #000;
	margin-top: 100px;
	padding: 0 4vw 60px;
}

main#products2 section#features1 .inner > ul {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

main#products2 section#features1 .inner > ul li {
	width: 100%;
}

main#products2 section#features1 .inner > ul li:nth-of-type(1) {
	margin-top: -70px;
}

main#products2 section#features1 .inner > ul li:nth-of-type(n+2) {
	margin-top: 30px;
}

main#products2 section#features1 .inner > ul li figure {
	width: 140px;
	margin: 0 auto;
	position: relative;
}

main#products2 section#features1 .inner > ul li figure::before {
	content: "";
	display: block;
	padding-top: 100%;
}

main#products2 section#features1 .inner > ul li figure img {
	border-radius: 140px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#products2 section#features1 .inner > ul li figcaption {
	padding: 20px 0 0;
}

main#products2 section#features1 .inner > ul li figcaption h4 {
	text-align: center;
	color: #fff;
}

main#products2 section#features1 .inner > ul li figcaption p.comment {
	color: #fff;
}

main#products2 section#features2 {
	background: #f3c51e;
	margin: 0;
	padding: 60px 0;
}

main#products2 section#features2 .inner h3 {
	text-align: center;
}

main#products2 section#features2 .inner > ul {
	width: 100%;
	margin: 30px auto;
	display: block;
}

main#products2 section#features2 .inner > ul li {
	background: #fff;
	padding: 4vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

main#products2 section#features2 .inner > ul li:nth-of-type(n+2) {
	margin-top: 30px;
}

main#products2 section#features2 .inner > ul li figure {
	width: 128px;
}

main#products2 section#features2 .inner > ul li figcaption {
	padding: 20px 0 0;
}

main#products2 section#features2 .inner > ul li figcaption h4 {
	text-align: center;
	line-height: 1.2;
}

main#products2 section#features2 .inner strong {
	text-align: center;
	font-size: 24px;
	line-height: 1.2;
	display: block;
}

main#products2 section#photo {
    margin-top: 0;
}

main#products2 section#photo figure {
    height: 100px;
}

main#products2 section#photo figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

main#products2 section#photo .inner {
	margin: 60px auto 0;
	display: block;
}

main#products2 section#photo .btn2 {
	margin-top: 20px;
}

/* Event */
/* ------------------------------------------------------------ */

main#event {
	background: #000 url(../img/common/bg_event.jpg) no-repeat center bottom;
	background-size: contain;
}

main#event section#title {
	background: #000 url(../img/event/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#event section#hl h3 {
	color: #fff;
	text-align: center;
	line-height: 1.2;
}

main#event section#hl p.comment {
	color: #fff;
	text-align: left;
}

main#event section#support h4 {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

main#event section#support .inner > div {
	background: #fff;
	margin: 20px auto 40px;
	display: block;
}

main#event section#support figure {
	width: 100%;
	position: relative;
}

main#event section#support figure::before {
	content: "";
	display: block;
	padding-top: 41.425%;
}

main#event section#support figure::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
	border-top: 40px solid #000;
	border-right: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #000;
}

main#event section#support figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#event section#support figcaption {
	padding: 4vw;
}

main#event section#banner p.bnr {
	background: #fff;
}

/* Service */
/* ------------------------------------------------------------ */

main#service {
	background: #000;
}

main#service section#title {
	background: #000 url(../img/service/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#service section#title h2 {
	width: 570px;
	height: auto;
}

main#service section#hl h3 {
	color: #fff;
	text-align: center;
}

main#service section#hl p.comment {
	color: #fff;
	text-align: left;
}

main#service section#contents .inner {

}

main#service section#contents ul {
	width: 100%;
	display: block;
}

main#service section#contents ul li {
	background: #fff;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

main#service section#contents ul li:nth-of-type(n+2) {
	margin-top: 20px;
}

main#service section#contents ul li figure {
	width: 100%;
	position: relative;
}

main#service section#contents ul li figure::before {
	content: "";
	display: block;
	padding-top: 75%;
}

main#service section#contents ul li figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#service section#contents ul li figcaption {
	padding: 4vw;
}

main#service section#contents ul li h4 {
	text-align: center;
	line-height: 1.2;
}

main#service section#contents ul li p.comment {
	font-size: 14px;
	margin-top: 10px;
}

/* Online */
/* ------------------------------------------------------------ */

main#online {
	background: #000;
}

main#online section#title {
	background: #000 url(../img/online/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#online section#title h2 {
	width: 66vw;
	max-width: 570px;
	height: auto;
}

main#online section#hl h3 {
	color: #fff;
	text-align: center;
	line-height: 1.2;
}

main#online section#hl p.comment {
	color: #fff;
	text-align: left;
}

main#online section#scene .inner,
main#online section#style .inner {
	border: 1px #fff solid;
	margin: 0 4vw;
	padding: 30px 4vw;
}

main#online section#scene h4,
main#online section#style h4 {
	color: #fff;
	text-align: center;
	margin-bottom: 40px;
}

main#online section#scene h4 span,
main#online section#style h4 span {
	font-size: 12px;
	font-weight: 400;
	margin-top: 10px;
	display: block;
}

main#online section#scene ul {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;
}

main#online section#style ul {
	width: 100%;
	display: block;
}

main#online section#scene ul li {
	width: 48%;
}

main#online section#style ul li {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

main#online section#scene ul li:nth-of-type(n+3) {
	margin-top: 20px;
}

main#online section#style ul li:nth-of-type(n+2) {
	margin-top: 20px;
}

main#online section#scene ul li figure,
main#online section#style ul li figure {
	width: 100%;
	position: relative;
}

main#online section#scene ul li figure::before,
main#online section#style ul li figure::before {
	content: "";
	display: block;
	padding-top: 75%;
}

main#online section#scene ul li figure img,
main#online section#style ul li figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

main#online section#scene ul li h5,
main#online section#style ul li h5 {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	margin-top: 10px;
}

main#online section#scene ul li p.comment,
main#online section#style ul li p.comment {
	color: #fff;
	margin-top: 10px;
}

/* About us */
/* ------------------------------------------------------------ */

main#aboutus {
	background: #000;
}

main#aboutus section#title {
	background: #000 url(../img/aboutus/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#aboutus section#hl h3 {
	color: #fff;
	text-align: center;
}

main#aboutus section#hl p.comment {
	color: #fff;
	text-align: left;
}

main#aboutus section#office h4 {
	width: 92%;
	max-width: 630px;
	margin: 0 auto;
}

main#aboutus section#office .inner,
main#aboutus section#office .inner a {
	color: #fff;
}

/* Contact */
/* ------------------------------------------------------------ */

main#contact {
	background: #000;
}

main#contact section#title {
	background: #000 url(../img/contact/bg_title.jpg) no-repeat center center;
	background-size: cover;
	height: 250px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

main#contact section#hl h3 {
	color: #fff;
	text-align: left;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

main#contact section#form .inner {
	background: #4D4D4D;
	color: #fff;
	margin: 0 4vw;
	padding: 60px 4vw;
}

main#contact section#form h4 {
	text-align: center;
}

}