@charset "UTF-8";

.top-title {margin-bottom: 6vw;color: rgba(255, 255, 255, 0);font-size: 8.6vw;text-align: center;line-height: 1.4;background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EwZWYwYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzZmYWEwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #a0ef0c), color-stop(100%, #6faa01));background: -moz-linear-gradient(left, #a0ef0c, #6faa01);background: -webkit-linear-gradient(left, #a0ef0c, #6faa01);background: linear-gradient(to right, #a0ef0c, #6faa01);-moz-background-clip: text;-o-background-clip: text;-webkit-background-clip: text;background-clip: text;}

.top-concept { padding-bottom: 15vw; }
.top-concept-movie { width: 90vw; margin: 0 auto; }
.top-concept-movie img { width: 100%; }

.top-spec {z-index: 2;position: relative;margin-bottom: 14vw;}
.top-spec-head { margin-bottom: 6vw; }
.top-spec-title { margin-bottom: 4vw; font-size: 13.2vw; font-family: "Orbitron"; font-weight: 500; font-optical-sizing: auto; text-align: center; text-shadow: 0 0 15px #c3f02c; }
.top-spec-image {width: 90vw;margin: 0 auto 4vw;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;}
.top-spec-image .image01, .top-spec-image .image02 { width: 46.5%; }

.top-spec-head-comment { font-size: 4.7vw; font-weight: 300; text-align: center; line-height: 1.6; }

.top-spec-table { width: 90vw; margin: 0 auto 5vw; text-align: center; table-layout: fixed; z-index: 0; position: relative; line-height: 1;}
.top-spec-table thead { font-size: 4.2vw; font-family: "Roboto"; font-weight: 500; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }
.top-spec-table thead th { color: var(--green01); font-size: 30px; }
.top-spec-table tbody tr:last-child > * { border-bottom: 0; }
.top-spec-table tbody tr:nth-child(odd) { background: rgba(240, 238, 233, 0.1); }
.top-spec-table tr > *:last-child { border-right: 0; }
.top-spec-table th, .top-spec-table td { width: 100%; height: 15vw; vertical-align: middle; border-right: 1px solid #444; border-bottom: 1px solid #444; }
.top-spec-table th:nth-child(2), .top-spec-table td:nth-child(2) { width: 24vw; color: var(--main); font-size: 3.2vw; }
.top-spec-table td { line-height: 1.4; }

.top-spec-box { width: 90vw; margin: 0 auto; }
.top-spec-box .top-spec-table { width: 100%; margin-top: 4vw; display: none; }
.top-spec-box-button {width: 100%;padding: 5vw 0;color: #000;font-size: 4vw;text-align: center;background: rgba(255, 255, 255, 0.9);cursor: pointer;position: relative;line-height: 1;}
.top-spec-box-button.open .plus::after { -moz-transform: translate(-50%, -50%) rotate(90deg); -ms-transform: translate(-50%, -50%) rotate(90deg); -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); }
.top-spec-box-button .plus { width: 4vw; height: 4vw; position: absolute; top: 50%; right: 4vw; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.top-spec-box-button .plus::before { content: ''; width: 100%; height: 1px; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.top-spec-box-button .plus::after { content: ''; width: 1px; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -o-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); -webkit-transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); transition: all 0.3s cubic-bezier(0.05, 0.05, 0.31, 0.97); }


.top-site{line-height: 1;}
.top-site .top-site-items { width: 100%; }
.top-site .top-site-items li { width: 100%; margin-bottom: 10vw; }
.top-site .top-site-items li:nth-child(1) .top-site-item-title { background: url(../images/top-site-item-icon01.png) no-repeat center left; background-size: auto 100%; }
.top-site .top-site-items li:nth-child(2) .top-site-item-title { background: url(../images/top-site-item-icon02.png) no-repeat center left; background-size: auto 100%; }
.top-site .top-site-items li:nth-child(3) .top-site-item-title { background: url(../images/top-site-item-icon03.png) no-repeat center left; background-size: auto 100%; }
.top-site .top-site-items li:nth-child(4) .top-site-item-title { background: url(../images/top-site-item-icon04.png) no-repeat center left; background-size: auto 100%; }
.top-site .top-site-items li:nth-child(4) .top-site-item-point { font-size: 11.2vw; font-family: var(--gothic); font-weight: 500; }

.top-site .top-site-item-image { width: 100%; margin-bottom: 6vw; }
.top-site .top-site-item-image img {width: 100%;}
.top-site .top-site-item-text { width: 90vw; margin: 0 auto; }
.top-site .top-site-item-title {padding: 1vw 0 1vw 18vw;margin-bottom: 2.5vw;}
.top-site .top-site-item-title .jp {margin-bottom: 1.5vw;font-size: 6vw;display: block;line-height: 1;}
.top-site .top-site-item-title .en { color: var(--green01); font-size: 3.2vw; font-family: "Roboto"; font-weight: 300; font-optical-sizing: auto; font-variation-settings: "wdth" 100; letter-spacing: 0.02em; display: block; }
.top-site .top-site-item-point { padding-bottom: 4vw; margin-bottom: 4vw; color: var(--green01); font-size: 13.2vw; font-family: "Orbitron"; font-weight: 500; font-optical-sizing: auto; letter-spacing: 0.02em; position: relative; }
.top-site .top-site-item-point::after { content: ''; width: 20vw; height: 1px; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2MzZjAyYiIvPjxzdG9wIG9mZnNldD0iMzUlIiBzdG9wLWNvbG9yPSIjNzc3Nzc3Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #c3f02b), color-stop(35%, #777777)); background: -moz-linear-gradient(left, #c3f02b, #777777 35%); background: -webkit-linear-gradient(left, #c3f02b, #777777 35%); background: linear-gradient(to right, #c3f02b, #777777 35%); position: absolute; bottom: 0; left: 0; }
.top-site .top-site-item-comment p {font-size: 4vw;text-align: justify;text-justify: inter-ideograph;font-feature-settings: "palt";line-height: 1.8;letter-spacing: 0.04em;}



/* =============================================
pc
================================================*/
@media screen and (min-width: 769px) {

.top-title {margin-bottom: 60px;font-size: clamp(46px, 18.364px + 3.636vw, 62px);}

.top-concept { padding-bottom: 120px; }
.top-concept-title { margin-bottom: 40px; }
.top-concept-movie {width: 100%;}

.top-spec{margin-bottom: 120px;}
.top-spec-head {margin: 0 auto 50px;width: 100%;}
.top-spec-title {margin: 0;position: absolute;top: 100px;left: 50%;-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%);transform: translateX(-50%);font-size: clamp(70px, 21.636px + 6.364vw, 98px);}
.top-spec-image { width: 100%; margin-bottom: 30px; }
.top-spec-image .image01, .top-spec-image .image02 {max-width: 495px;width: 48%;}
.top-spec-head-comment { font-size: 22px; }
.top-spec-table {width: 100%;margin-bottom: 40px;}
.top-spec-table th, .top-spec-table td { height: 70px; }
.top-spec-table th:nth-child(2), .top-spec-table td:nth-child(2) { width: 210px; font-size: 18px; }
.top-spec-table td { font-size: 22px; }
.top-spec-box {width: 100%;}
.top-spec-box-button { padding: 25px 0; font-size: 18px; }
.top-spec-box-button .plus { width: 30px; height: 30px; right: 25px; }

.top-reviews { padding-bottom: 120px; }
.top-reviews-items { padding-bottom: 50px; margin-bottom: 50px; }
.top-reviews-items .slick-dots li { width: 12px; height: 12px; margin: 0 10px; }
.top-reviews-item { width: 370px; padding: 25px; margin: 0 20px; }
.top-reviews-item-head { margin-bottom: 10px; }
.top-reviews-item-icon { width: 55px; margin-right: 15px; }
.top-reviews-item-title { font-size: 20px; }
.top-reviews-item-user { margin-bottom: 15px; font-size: 14px; }
.top-reviews-item-comment p { font-size: 15px; }


.top-site .top-site-items li {margin-bottom: 60px;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-align-items: center;align-items: center;}
.top-site .top-site-items li:nth-child(odd) .top-site-item-image {margin-right: -40px;order: 1;margin: 0 -40px 0 3vw;}
.top-site .top-site-items li:nth-child(odd) .top-site-item-text { order: 0; }
.top-site .top-site-items li:nth-child(even) .top-site-item-image {margin-left: -40px;margin: 0 3vw 0 -40px;}
.top-site .top-site-items li:nth-child(4) .top-site-item-point { font-size: 80px; }

.top-site .top-site-items li:nth-child(2) .top-site-item-title { background: url(../images/top-site-item-icon02.png) no-repeat center left; background-size: 75px; height: 75px;}
.top-site .top-site-items li:nth-child(3) .top-site-item-title { background: url(../images/top-site-item-icon03.png) no-repeat center left; background-size: 75px; height: 75px;}
.top-site .top-site-item-image {width: 625px;margin: 0;width: 100%;max-width: 625px;}
.top-site .top-site-item-image img {width: 100%;height: 340px;object-fit: cover;}

.top-site .top-site-item-text {width: 100%;margin: 0;}
.top-site .top-site-item-title { padding: 0 0 5px 95px; margin-bottom: 15px; }
.top-site .top-site-item-title .jp {margin-bottom: 10px;font-size: clamp(25px, -0.909px + 3.409vw, 40px);}
.top-site .top-site-item-title .en {font-size: clamp(16px, 9.091px + 0.909vw, 20px);}
.top-site .top-site-item-point {padding-bottom: 25px;margin-bottom: 20px;font-size: clamp(55px, -14.091px + 9.091vw, 95px);}
.top-site .top-site-item-point::after { width: 160px; }
.top-site .top-site-item-comment p { font-size: 16px; }
}



/* =============================================
retina用
================================================*/
@media screen and (min-width: 769px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 769px) and (min-resolution: 2dppx) {
.top-site .top-site-items li:nth-child(1) .top-site-item-title { background-image: url(../images/top-site-item-icon01@2x.png);}
.top-site .top-site-items li:nth-child(2) .top-site-item-title { background-image: url(../images/top-site-item-icon02@2x.png);}
.top-site .top-site-items li:nth-child(3) .top-site-item-title { background-image: url(../images/top-site-item-icon03@2x.png);}
.top-site .top-site-items li:nth-child(4) .top-site-item-title { background-image: url(../images/top-site-item-icon04@2x.png);}
}