@charset "UTF-8";
/***
The new CSS reset - version 1.8.4 (last updated 14.2.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *):not(*chat-window-form)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu {
list-style: none;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
}
/* reset default text opacity of input placeholder */
::-webkit-input-placeholder {
color: unset;
}
::-moz-placeholder {
color: unset;
}
:-ms-input-placeholder {
color: unset;
}
::-ms-input-placeholder {
color: unset;
}
::placeholder {
color: unset;
}
/* remove default dot (•) sign */
::marker {
content: initial;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
}
html {
font-size: 62.5%;
height: 100%;
}
@media screen and (max-width: 359px) {
html {
font-size: 2.7777777778vw;
}
}
img {
display: block;
max-width: 100%;
height: auto;
}
body {
font-family: "Noto Sans JP", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
/* CSS Document */
/* responsive
------------------------------------------------------------ */
.pc-none {
display: none !important;
}
@media screen and (max-width: 767px) {
.pc-none {
display: block !important;
}
.sp-none {
display: none !important;
}
}
/* section
------------------------------------------------------------ */
.t-collabo__section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.t-collabo__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
max-width: 1200px;
/*20231114 fix 50→30px*/
padding-top: 30px;
padding-bottom: 50px;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 1240px) {
.t-collabo__section {
padding-right: 20px;
padding-left: 20px;
}
}
@media screen and (max-width: 767px) {
.t-collabo__container {
padding-top: 45px;
padding-bottom: 60px;
}
}
/* heading
------------------------------------------------------------ */
.t-collabo__heading {
padding-bottom: 45px;
position: relative;
text-align: center;
font-size: 54px;
font-size: 5.4rem;
line-height: 1.131;
letter-spacing: 0.025em;
}
.t-collabo__heading-left {
position: absolute;
top: 50%;
left: 40px;
-webkit-transform: rotate(90deg) translateX(-65%);
transform: rotate(90deg) translateX(-65%);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.t-collabo__heading-ja {
margin-top: 55px;
text-align: center;
font-size: 30px;
font-size: 3rem;
font-weight: 700;
letter-spacing: 0.039em;
}
@media screen and (max-width: 1023px) {
.t-collabo__heading-left {
position: relative;
top: 0;
left: 0;
-webkit-transform: none;
transform: none;
}
}
@media screen and (max-width: 767px) {
.t-collabo__heading {
font-size: 38px;
font-size: 3.8rem;
}
.t-collabo__heading-ja {
margin-top: 25px;
font-size: 20px;
font-size: 2rem;
line-height: 1.5;
}
}
/* text
------------------------------------------------------------ */
.t-collabo__text {
color: #fff;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.75;
letter-spacing: 0.025em;
word-break: break-word;
}
@media screen and (max-width: 767px) {
.t-collabo__text {
font-size: 11px;
font-size: 1.1rem;
}
}
/* features
------------------------------------------------------------ */
.t-collabo-features__container {
position: relative;
}
.t-collabo-features__container::before {
content: attr(data-num);
height: 1em;
position: absolute;
bottom: 40px;
z-index: 2;
color: transparent;
font-size: 120px;
font-size: 12rem;
line-height: 1;
letter-spacing: 0.025em;
}
.t-collabo-features__container.is-left::before {
left: 0;
}
.t-collabo-features__container.is-right::before {
right: 0;
}
/* filter */
.t-collabo-filter__images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-top: -105px;
margin-bottom: -50px;
}
.t-collabo-filter__images-item {
width: 50%;
position: relative;
}
.t-collabo-filter__images-item img {
width: 100%;
}
.t-collabo-filter__images-name {
position: absolute;
font-size: 12px;
font-size: 1.2rem;
letter-spacing: 0.025em;
white-space: nowrap;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.t-collabo-filter__images-name::before {
content: "";
display: block;
width: 24px;
height: 3px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #4bead0), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #4bead0 50%, transparent 50%);
background-size: 6px 6px;
position: absolute;
top: 50%;
-webkit-transform: skewX(50deg) translateY(-50%);
transform: skewX(50deg) translateY(-50%);
}
.t-collabo-filter__image01-name {
top: 39%;
left: 76.666%;
}
.t-collabo-filter__image01-name::before {
left: -30px;
}
.t-collabo-filter__image02-name {
top: 53%;
right: 80%;
}
.t-collabo-filter__image02-name::before {
right: -30px;
}
@media screen and (max-width: 1023px) {
.t-collabo-filter__images {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 25px;
}
.t-collabo-filter__images-item {
width: calc(100% + 20px);
margin-right: -10px;
margin-left: -10px;
}
.t-collabo-filter__images-item:not(:last-child) {
margin-bottom: 20px;
}
.t-collabo-filter__images-name {
position: static;
-webkit-transform: translateY(0);
transform: translateY(0);
text-align: center;
}
.t-collabo-filter__images-name::before {
display: none;
}
}
/* gallery
------------------------------------------------------------ */
.t-collabo-gallery {
padding-top: 80px;
}
.t-collabo-gallery__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: 50px -2.5px 2.5px;
}
.t-collabo-gallery__group-item {
width: 20%;
padding: 2.5px;
}
.t-collabo-gallery__group-item img {
width: 100%;
}
@media screen and (max-width: 1023px) {
.t-collabo-gallery__group-item {
width: 33%;
}
}
@media screen and (max-width: 767px) {
.t-collabo-gallery {
padding-top: 50px;
}
.t-collabo-gallery__group-item {
width: 50%;
padding: 1.5px;
}
.t-collabo-gallery__group {
margin: 45px -21.5px -1.5px;
}
}
/* SPECIAL
------------------------------------------------------------ */
.t-collabo-special__contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 45px 55px;
position: relative;
margin-top: 100px;
margin-bottom: -50px;
}
.t-collabo-special__input {
display: none;
}
.t-collabo-special__contents-wrap {
max-width: 345px;
position: relative;
z-index: 2;
margin-right: auto;
}
.t-collabo-special__contents-heading {
margin-bottom: 15px;
text-align: left;
line-height: 1.6;
}
.t-collabo-special__tabs {
margin-top: 40px;
}
.t-collabo-special__tabs-item:not(:last-child) {
margin-bottom: 20px;
}
.t-collabo-special__tabs-label {
padding-left: 35px;
position: relative;
color: #fff;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.025em;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-special__tabs-label::before,
.t-collabo-special__tabs-label::after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-special__tabs-label::before {
width: 20px;
height: 20px;
border: 1px solid #fff;
top: -2px;
left: 0;
}
.t-collabo-special__tabs-label::after {
width: 14px;
height: 14px;
background-color: #fff;
top: 1px;
left: 3px;
opacity: 0;
}
#specialInputBlack:checked ~ .t-collabo-special__contents-wrap .t-collabo-special__tabs-label[for=specialInputBlack]::after {
opacity: 1;
}
.t-collabo-special__slides-wrap {
width: 1273px;
position: absolute;
bottom: 0;
right: 365px;
z-index: 1;
}
.t-collabo-special__slides {
width: 100%;
padding-bottom: 47.368%;
position: relative;
margin-bottom: 0;
}
.t-collabo-special__slides-item {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#specialInputBlack:checked ~ .t-collabo-special__slides-wrap #specialSlideBlack {
opacity: 1;
}
.t-collabo-special__slides-item img {
width: 100%;
}
.t-collabo-special__color {
max-width: 315px;
position: relative;
z-index: 2;
}
.t-collabo-special__color-image {
margin-bottom: 15px;
}
.t-collabo-special__color-dl dt {
color: #4bead0;
font-size: 11px;
font-size: 1.1rem;
letter-spacing: 0.025em;
}
.t-collabo-special__color-dl dt span {
display: block;
position: relative;
font-size: 16px;
font-size: 1.6rem;
}
.t-collabo-special__color-dl dt span::before {
content: "";
display: block;
width: 24px;
height: 3px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #4bead0), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #4bead0 50%, transparent 50%);
background-size: 6px 6px;
position: absolute;
top: 50%;
left: -35px;
-webkit-transform: skewX(50deg) translateY(-50%);
transform: skewX(50deg) translateY(-50%);
}
.t-collabo-special__note {
margin-top: 25px;
font-size: 12px;
font-size: 1.2rem;
line-height: 2;
letter-spacing: 0.039em;
}
@media screen and (max-width: 1023px) {
.t-collabo-special__container {
padding-bottom: 60px;
}
.t-collabo-special__contents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
margin-bottom: 0;
}
.t-collabo-special__contents-wrap {
max-width: 100%;
margin-left: auto;
}
.t-collabo-special__tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: calc(100% + 40px);
padding-top: calc(100% + 40px + 25px);
margin: 0;
position: absolute;
top: 100%;
left: -20px;
}
.t-collabo-special__tabs-item {
padding: 0 25px;
}
.t-collabo-special__tabs-item:not(:last-child) {
margin-bottom: 0;
}
.t-collabo-special__slides-wrap {
width: auto;
position: static;
margin: 0 -20px 85px;
}
.t-collabo-special__slides {
padding-bottom: 100%;
}
.t-collabo-special__color {
max-width: 100%;
margin: 0 auto;
text-align: left;
}
.t-collabo-special__color-image {
text-align: center;
}
.t-collabo-special__color-dl dt span::before {
display: none;
}
}
@media screen and (max-width: 767px) {
.t-collabo-special__contents {
margin-top: 40px;
}
.t-collabo-special__color-dl dt,
.t-collabo-special__color-dl dd {
font-size: 10px;
font-size: 1rem;
}
.t-collabo-special__color-dl dt span {
font-size: 12px;
font-size: 1.2rem;
}
.t-collabo-special__tabs {
width: calc(100% + 50px);
left: -25px;
}
.t-collabo-special__tabs-item {
padding: 0 25px;
}
.t-collabo-special__tabs-label {
padding-left: 20px;
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-special__tabs-label::before {
width: 15px;
height: 15px;
top: -3px;
}
.t-collabo-special__tabs-label::after {
width: 11px;
height: 11px;
top: -1px;
left: 2px;
}
}
/* sub */
.t-collabo-special-sub {
background-size: cover;
background-position: center;
}
.t-collabo-special-sub__container {
padding: 100px 0 120px;
max-width: 1100px;
}
.t-collabo-special-sub__section {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 -40px;
}
.t-collabo-special-sub__section:not(:last-child) {
margin-bottom: 120px;
}
.t-collabo-special-sub__section:nth-child(2n-1) {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.t-collabo-special-sub__section:nth-child(2n) {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.t-collabo-special-sub__section .t-collabo__sub-heading {
margin-right: -1em;
}
.t-collabo-special-sub__contents,
.t-collabo-special-sub__image {
width: 50%;
padding: 0 40px;
}
.t-collabo-special-sub__image {
text-align: center;
}
.t-collabo-special-sub__section:nth-child(2n) .t-collabo-special-sub__contents {
padding-left: 120px;
}
.t-collabo-special-sub__section:nth-child(2n-1) .t-collabo-special-sub__image {
margin-right: auto;
}
.t-collabo-special-sub__section:nth-child(2n) .t-collabo-special-sub__image {
margin-left: auto;
}
.t-collabo-special-sub__image-item:not(:last-child) {
margin-bottom: 10px;
}
.t-collabo-special-sub__text {
max-width: 420px;
}
.t-collabo-special-sub__text-note {
margin-top: 40px;
}
@media screen and (max-width: 1023px) {
.t-collabo-special-sub__section {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 0 !important;
}
.t-collabo-special-sub__section:not(:last-child) {
margin-bottom: 60px;
}
.t-collabo-special-sub__contents,
.t-collabo-special-sub__image {
width: 100%;
padding: 0 40px;
text-align: center;
}
.t-collabo-special-sub__section:nth-child(2n) .t-collabo-special-sub__contents {
padding-left: 40px;
}
.t-collabo-special-sub__section .t-collabo__sub-heading {
margin-right: 0;
}
.t-collabo-special-sub__text {
max-width: 100%;
}
.t-collabo-special-sub__image {
margin-top: 25px;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.t-collabo-special-sub__text-note {
margin-top: 10px;
}
}
@media screen and (max-width: 767px) {
.t-collabo-special-sub__container {
padding: 40px 0;
}
.t-collabo-special-sub__text,
.t-collabo-special-sub__note {
text-align: left;
}
.t-collabo-special-sub__image {
margin-right: auto;
margin-left: auto;
}
.t-collabo-special-sub__image01 {
max-width: 250px;
}
.t-collabo-special-sub__image02 {
max-width: 255px;
}
.t-collabo-special-sub__image03 {
max-width: 230px;
}
}
/* spec
------------------------------------------------------------ */
.t-collabo-spec__table-inner {
width: 940px;
padding-top: 145px;
position: relative;
margin: 0 auto;
}
.t-collabo-spec__table-arrow-width,
.t-collabo-spec__table-arrow-up {
position: absolute;
}
.t-collabo-spec__table-arrow-width {
top: 0;
right: 0;
}
.t-collabo-spec__table-arrow-up {
width: 33px;
bottom: 0;
right: calc(100% + 15px);
}
.t-collabo-spec__table {
width: 100%;
border-top: 1px solid #4bead0;
border-left: 1px solid #4bead0;
color: #4bead0;
font-size: 24px;
font-size: 2.4rem;
font-weight: 700;
}
.t-collabo-spec__table th,
.t-collabo-spec__table td {
height: 80px;
padding: 10px 5px;
border-right: 1px solid #4bead0;
border-bottom: 1px solid #4bead0;
text-align: center;
vertical-align: middle;
}
.t-collabo-spec__table th {
background-color: #505050;
line-height: 1;
}
.t-collabo-spec__table thead th:first-child {
width: 180px;
background-image: url(https://www.pc-koubou.jp/wp/wp-content/uploads/2022/05/shasen.png);
background-size: 100% 100%;
background-color: #000;
}
.t-collabo-spec__table td {
width: 150px;
/*padding-right: 0;
padding-left: 0;*/
padding: 0;
font-size: 13px;
font-size: 1.3rem;
position: relative;
}
.t-collabo-spec__table td a {
color: #ff0;
display: block;
padding: 27px 0;
background: rgb(73, 0, 3);
background: -webkit-gradient(linear, left top, right top, from(rgb(73, 0, 3)), color-stop(50%, rgb(168, 0, 6)), to(rgb(179, 0, 7)));
background: linear-gradient(90deg, rgb(73, 0, 3) 0%, rgb(168, 0, 6) 50%, rgb(179, 0, 7) 100%);
}
.t-collabo-spec__table td a::after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
background-image: url(https://www.pc-koubou.jp/wp/wp-content/uploads/2022/03/arrow.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
position: absolute;
right: 2px;
bottom: 2px;
z-index: 2;
}
.t-collabo-spec__table td a::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background-color: #000;
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
}
/*.t-collabo-spec__table td:empty {
background: rgb(0,0,0);
}*/
@media screen and (max-width: 1060px) {
.t-collabo-spec__table-responsive {
overflow-x: scroll;
}
.t-collabo-spec__table-responsive::-webkit-scrollbar {
height: 16px;
}
.t-collabo-spec__table-responsive::-webkit-scrollbar-track {
background-color: #4d4d4d;
border-radius: 8px;
}
.t-collabo-spec__table-responsive::-webkit-scrollbar-thumb {
background-color: #4bead0;
border-radius: 8px;
}
.t-collabo-spec__table-inner {
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding-right: 20px;
padding-left: 68px;
margin-top: 10px;
margin-bottom: 20px;
}
.t-collabo-spec__table-arrow-width {
right: 20px;
}
.t-collabo-spec__table-arrow-up {
right: auto;
left: 20px;
}
}
@media screen and (max-width: 767px) {
.t-collabo-spec__table-inner {
width: 655px;
padding-top: 110px;
padding-left: 60px;
}
.t-collabo-spec__table-arrow-width {
width: 535px;
}
.t-collabo-spec__table-arrow-up {
width: 21px;
}
.t-collabo-spec__table {
font-size: 16px;
font-size: 1.6rem;
}
.t-collabo-spec__table th,
.t-collabo-spec__table td {
height: 55px;
}
.t-collabo-spec__table thead th:first-child {
width: 120px;
}
.t-collabo-spec__table td {
width: 110px;
font-size: 10px;
font-size: 1rem;
}
}
/* CAMPAIGN
------------------------------------------------------------ */
.t-collabo-campaign__container {
padding: 55px 0 100px;
}
.t-collabo-campaign__frame {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 45px;
background-color: rgba(0, 0, 0, 0.7);
border: 1px solid #4bead0;
margin-top: 45px;
}
.t-collabo-campaign__frame-contents {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 550px;
margin-right: auto;
}
.t-collabo-campaign__text {
max-width: 460px;
margin-top: 30px;
}
.t-collabo-campaign__period {
margin-top: 25px;
}
.t-collabo-campaign__period-frame {
display: inline-block;
padding: 0.5em 2em;
border: 1px solid #fff;
border-radius: 3em;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-campaign__link {
margin-top: 90px;
}
.t-collabo-campaign__link a {
display: inline-block;
}
.t-collabo-compaign__btn-wrap {
margin-top: 35px;
}
@media screen and (max-width: 1240px) {
.t-collabo-campaign__frame-image {
width: 400px;
max-width: 100%;
}
}
@media screen and (max-width: 1023px) {
.t-collabo-campaign__frame {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.t-collabo-campaign__frame-contents {
width: 100%;
margin-top: 15px;
text-align: center;
}
.t-collabo-campaign__text {
max-width: 100%;
margin-top: 15px;
}
}
@media screen and (max-width: 767px) {
.t-collabo-campaign__container {
padding: 60px 0 65px;
}
.t-collabo-campaign__frame {
padding: 15px 15px 45px;
}
.t-collabo-campaign__period-frame {
width: 100%;
font-size: 10px;
font-size: 1rem;
}
.t-collabo-campaign__link {
margin-top: 30px;
}
}
/* lineup
------------------------------------------------------------ */
.t-collabo-lineup__section-heading-area {
padding: 60px 0 50px;
}
.t-collabo-lineup__list {
background-color: #fff;
}
.t-collabo-lineup__list .rel {
width: 100%;
margin-right: auto;
margin-left: auto;
}
@media screen and (max-width: 767px) {
.t-collabo-lineup__section-heading-area {
padding: 45px 0 60px;
}
.t-collabo-lineup__list .rel {
padding: 20px 0;
}
}
/* ABOUT
------------------------------------------------------------ */
.t-collabo-about__contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 115px;
}
.t-collabo-about__contents-left {
max-width: 440px;
}
.t-collabo-about__contents-right {
margin-left: auto;
}
.t-collabo-about__sub-heading {
margin-top: 0;
margin-bottom: 30px;
text-align: left;
}
.t-collabo-about__logo {
text-align: center;
margin-bottom: 180px;
}
.t-collabo-about__link-group-item:not(:last-child) {
margin-bottom: 20px;
}
.t-collabo-about__link {
display: block;
width: 380px;
max-width: 100%;
padding: 10px 45px 10px 35px;
background-color: rgba(105, 255, 216, 0.2);
border: 1px solid #4bead0;
position: relative;
margin: auto;
color: #fff;
font-size: 18px;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.025em;
text-shadow: 0 0 10px rgba(75, 234, 208, 0.8), 0 0 10px rgba(75, 234, 208, 0.8);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-about__link img {
position: absolute;
top: 0;
right: 25px;
bottom: 0;
margin: auto;
}
.t-collabo-about__link:hover {
background-color: rgba(105, 255, 216, 0.6);
}
@media screen and (max-width: 1240px) {
.t-collabo-about__contents {
padding: 0 40px;
}
}
@media screen and (max-width: 1023px) {
.t-collabo-about__contents {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
}
.t-collabo-about__sub-heading {
text-align: center;
}
.t-collabo-about__contents-right {
width: 100%;
margin-top: 55px;
margin-right: auto;
}
}
@media screen and (max-width: 767px) {
.t-collabo-about__logo {
margin-bottom: 55px;
}
.t-collabo-about__logo img {
width: 225px;
}
.t-collabo-about__link-group-item:not(:last-child) {
margin-bottom: 15px;
}
.t-collabo-about__link {
width: 100%;
font-size: 12px;
font-size: 1.2rem;
}
.t-collabo-about__link img {
width: 6px;
right: 17px;
}
}
/* MEMBER
------------------------------------------------------------ */
.t-collabo-member__container {
padding: 120px 0 160px;
}
.t-collabo-member__list {
width: 100%;
max-width: 940px;
margin: 80px auto 0;
}
.t-collabo-member-section:not(:last-child) {
margin-bottom: 90px;
}
.t-collabo-member-section__heading {
margin-bottom: 40px;
text-align: center;
color: #4bead0;
font-size: 24px;
font-size: 2.4rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-member-section__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -30px -5px;
}
.t-collabo-member-section__group-item {
width: 25%;
padding: 30px 5px;
}
.t-collabo-member-section__card {
cursor: pointer;
}
.t-collabo-member-section__thumb {
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
overflow: hidden;
}
.t-collabo-member-section__thumb-profile {
content: "PROFILE";
display: block;
width: 85px;
padding: 5px 5px 5px 15px;
background-color: #4bead0;
position: relative;
color: #000;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.025em;
}
.t-collabo-member-section__thumb-profile::before,
.t-collabo-member-section__thumb-profile::after {
content: "";
display: block;
height: 100%;
position: absolute;
bottom: 0;
}
.t-collabo-member-section__thumb-profile::before {
border-bottom: 22px solid #4bead0;
border-right: 17px solid transparent;
left: 100%;
}
.t-collabo-member-section__thumb-profile::after {
width: 32px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #4bead0), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #4bead0 50%, transparent 50%);
background-size: 16px;
left: calc(100% + 17px);
-webkit-transform: skewX(37deg);
transform: skewX(37deg);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
.t-collabo-member-section__thumb-inner {
border: 2px solid #4bead0;
background-color: #fff;
overflow: hidden;
}
.t-collabo-member-section__thumb-inner img {
display: block;
width: 100%;
margin: -8% 0;
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
-webkit-filter: grayscale(1);
filter: grayscale(1);
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-member-section__card:hover .t-collabo-member-section__thumb-inner img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
.t-collabo-member-section__name {
margin-top: 25px;
text-align: center;
color: #4bead0;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.025em;
}
.t-collabo-member-section__name::before {
content: attr(data-eng);
display: block;
margin-bottom: 10px;
font-size: 24px;
font-size: 2.4rem;
}
.t-collabo-member-section__text {
display: none;
}
/* lb */
body.is-lb-open {
overflow: hidden;
}
.t-collabo-member-lb {
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
position: fixed;
top: 0;
left: 0;
z-index: 1050;
}
.t-collabo-member-lb.is-show {
overflow-x: hidden;
overflow-y: auto;
}
.t-collabo-member-lb__dialog {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 1040px;
padding: 0 50px;
min-height: calc(100% - 40px);
margin: 20px auto;
pointer-events: none;
}
@media all and (-ms-high-contrast: none) {
.t-collabo-member-lb__dialog {
height: calc(100% - 40px);
}
}
.t-collabo-member-lb__content {
width: 100%;
min-height: 480px;
padding: 40px 50px 25px;
background-color: #fff;
position: relative;
margin-right: auto;
margin-left: auto;
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
pointer-events: auto;
}
.t-collabo-member-lb__content-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
}
.t-collabo-member-lb__thumb {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-item-align: start;
align-self: flex-start;
width: 285px;
background-color: #fff;
border: 4px solid #4bead0;
-webkit-box-shadow: 20px 20px 0 #4bead0;
box-shadow: 20px 20px 0 #4bead0;
margin: -50px 0 -40px;
-webkit-transform: skewY(-8deg);
transform: skewY(-8deg);
overflow: hidden;
}
.t-collabo-member-lb__thumb img {
margin: -8% 0;
-webkit-transform: skewY(8deg);
transform: skewY(8deg);
}
.t-collabo-member-lb__content-box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
padding-bottom: 40px;
margin-left: 90px;
}
.t-collabo-member-lb__dept {
margin-bottom: 20px;
color: #4bead0;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-member-lb__name {
margin-bottom: 25px;
color: #4bead0;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.025em;
}
.t-collabo-member-lb__name::before {
content: attr(data-eng);
display: block;
margin-bottom: 15px;
font-size: 32px;
font-size: 3.2rem;
}
.t-collabo-member-lb__text {
margin-bottom: 20px;
color: #000;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.75;
letter-spacing: 0.025em;
}
.t-collabo-member-lb__text .t-collabo-member-section__text {
display: block;
}
.t-collabo-member-lb__sns-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: auto -10px -5px;
}
.t-collabo-member-lb__sns-group-item {
max-width: 50%;
padding: 5px 10px;
}
.t-collabo-member-lb__sns-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 200px;
max-width: 100%;
padding: 0 20px;
background-color: #4bead0;
color: #fff;
font-size: 18px;
font-size: 1.8rem;
font-weight: 700;
letter-spacing: 0.025em;
}
.t-collabo-member-lb__sns-link img {
margin-right: 10px;
}
.t-collabo-member-lb__btn {
width: 20px;
height: 20px;
padding: 0;
background: none;
border-top: 1px solid #4bead0;
border-right: 1px solid #4bead0;
border-bottom: none;
border-left: none;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.t-collabo-member-lb__btn[name=prev] {
right: calc(100% + 60px);
-webkit-transform: rotate(45deg) skew(65deg, 65deg);
transform: rotate(45deg) skew(65deg, 65deg);
}
.t-collabo-member-lb__btn[name=next] {
left: calc(100% + 60px);
-webkit-transform: rotate(-135deg) skew(65deg, 65deg);
transform: rotate(-135deg) skew(65deg, 65deg);
}
.t-collabo-member-lb__close {
padding-bottom: 45px;
background: none;
border: none;
position: absolute;
top: calc(100% + 25px);
right: 0;
left: 0;
margin: auto;
color: #4bead0;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-member-lb__close::before,
.t-collabo-member-lb__close::after {
content: "";
display: block;
width: 63px;
height: 1px;
background-color: #4bead0;
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: auto;
}
.t-collabo-member-lb__close::before {
-webkit-transform: skewY(8deg) rotate(24deg);
transform: skewY(8deg) rotate(24deg);
}
.t-collabo-member-lb__close::after {
-webkit-transform: skewY(8deg) rotate(-24deg);
transform: skewY(8deg) rotate(-24deg);
}
@media screen and (max-width: 1023px) {
.t-collabo-member-lb__content {
min-height: inherit;
padding: 40px 25px;
}
.t-collabo-member-lb__thumb {
width: 190px;
-webkit-box-shadow: 10px 10px 0 #4bead0;
box-shadow: 10px 10px 0 #4bead0;
}
.t-collabo-member-lb__content-box {
margin-left: 45px;
}
.t-collabo-member-lb__btn[name=next] {
left: calc(100% + 30px);
}
.t-collabo-member-lb__btn[name=prev] {
right: calc(100% + 30px);
}
.t-collabo-member-lb__sns-link {
width: 175px;
padding: 0 10px;
}
}
@media screen and (max-width: 767px) {
.t-collabo-member__container {
padding: 55px 0;
}
.t-collabo-member__list {
margin-top: 25px;
}
.t-collabo-member-section:not(:last-child) {
margin-bottom: 45px;
}
.t-collabo-member-section__heading {
margin-bottom: 25px;
font-size: 17px;
font-size: 1.7rem;
}
.t-collabo-member-section__group {
margin: -10px -3px;
}
.t-collabo-member-section__group-item {
width: 50%;
padding: 10px 3px;
}
.t-collabo-member-section__thumb-profile {
-webkit-transform: scale(0.65);
transform: scale(0.65);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.t-collabo-member-section__name {
margin-top: 15px;
font-size: 10px;
font-size: 1rem;
}
.t-collabo-member-section__name::before {
margin-bottom: 5px;
font-size: 17px;
font-size: 1.7rem;
}
/* lb */
.t-collabo-member-lb__content {
padding: 35px 12.5px 25px;
margin-top: 220px;
}
.t-collabo-member-lb__dialog {
padding: 0 20px;
}
.t-collabo-member-lb__btn {
width: 12px;
height: 12px;
bottom: calc(100% + 260px);
}
.t-collabo-member-lb__btn[name=next] {
left: auto;
right: 6%;
}
.t-collabo-member-lb__btn[name=prev] {
right: auto;
left: 6%;
}
.t-collabo-member-lb__close {
padding-bottom: 25px;
top: calc(100% + 10px);
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-member-lb__close::before,
.t-collabo-member-lb__close::after {
width: 45px;
bottom: 10px;
}
.t-collabo-member-lb__thumb {
width: 135px;
position: absolute;
bottom: calc(100% + 20px);
right: 0;
left: 0;
margin: auto;
}
.t-collabo-member-lb__content-box {
width: 100%;
padding-bottom: 0;
margin-left: 0;
}
.t-collabo-member-lb__dept {
margin-bottom: 10px;
text-align: center;
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-member-lb__name {
margin-bottom: 12px;
text-align: center;
font-size: 10px;
font-size: 1rem;
}
.t-collabo-member-lb__name::before {
margin-bottom: 5px;
font-size: 22px;
font-size: 2.2rem;
}
.t-collabo-member-lb__text {
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-member-lb__sns-group {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: calc(100% + 5px);
margin-right: -2.5px;
margin-left: -2.5px;
margin-bottom: -2.5px;
}
.t-collabo-member-lb__sns-group-item {
padding: 2.5px;
}
.t-collabo-member-lb__sns-link {
width: 125px;
font-size: 12px;
font-size: 1.2rem;
}
.t-collabo-member-lb__sns-link img {
width: 35px;
margin-right: 4px;
}
}
/* INFORMATION
------------------------------------------------------------ */
.t-collabo-information__container {
padding: 50px 0 100px;
}
.t-collabo-information__list {
width: 940px;
max-width: 100%;
margin: 50px auto 0;
}
.t-collabo-information__list-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -5px;
}
.t-collabo-information__list-group-item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 25%;
padding: 5px;
}
.t-collabo-information__card {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
padding: 20px;
background-color: #222a33;
color: #fff;
font-size: 14px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.857;
letter-spacing: 0.025em;
}
.t-collabo-information__thumb {
width: 100%;
max-height: 126px;
margin-bottom: 15px;
}
.t-collabo-information__thumb img {
width: 100%;
}
.t-collabo-information__title {
margin-bottom: 35px;
text-decoration: underline;
}
.t-collabo-information__except {
margin-bottom: 20px;
}
.t-collabo-information__category {
padding-left: 30px;
position: relative;
margin-top: auto;
font-size: 12px;
font-size: 1.2rem;
}
.t-collabo-information__category-icon {
width: 25px;
position: absolute;
top: -3px;
left: 0;
}
@media screen and (max-width: 1023px) {
.t-collabo-information__list-group-item {
width: 33.333%;
}
}
@media screen and (max-width: 767px) {
.t-collabo-information__container {
padding: 55px 0 50px;
}
.t-collabo-information__list {
margin-right: -5px;
margin-left: -5px;
}
.t-collabo-information__list-group-item {
width: 50%;
}
.t-collabo-information__card {
padding: 10px;
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-information__category {
padding-left: 20px;
font-size: 10px;
font-size: 1rem;
}
.t-collabo-information__category-icon {
width: 17px;
top: 1px;
}
}
/* pagetop
------------------------------------------------------------ */
.t-collabo__pagetop {
position: fixed;
right: 40px;
bottom: 40px;
color: #4bead0;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0.025em;
-webkit-transform: rotate(-90deg) translateX(100%);
transform: rotate(-90deg) translateX(100%);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
}
.t-collabo__pagetop::after {
content: "";
display: block;
width: 50px;
height: 18px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #4bead0), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #4bead0 50%, transparent 50%);
background-size: 10px 10px;
position: absolute;
left: 100%;
bottom: 0;
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
-webkit-transform-origin: left top;
transform-origin: left top;
}
@media screen and (max-width: 767px) {
.t-collabo__pagetop {
display: none;
}
}
/* rotate slides
------------------------------------------------------------ */
.t-collabo-rotate {
position: relative;
}
.t-collabo-rotate__input {
display: none;
}
.t-collabo-rotate-slides {
max-width: 860px;
margin: 0 auto;
}
.t-collabo-rotate-slides__group {
padding-bottom: 55.814%;
position: relative;
}
.t-collabo-rotate-slides__group-item {
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
#feature01InputLeft90:checked ~ .t-collabo-rotate-slides #feature01SlideLeft90,
#feature01InputLeft45:checked ~ .t-collabo-rotate-slides #feature01SlideLeft45,
#feature01InputFront:checked ~ .t-collabo-rotate-slides #feature01SlideFront,
#feature01InputRight45:checked ~ .t-collabo-rotate-slides #feature01SlideRight45,
#feature01InputRight90:checked ~ .t-collabo-rotate-slides #feature01SlideRight90 {
opacity: 1;
}
.t-collabo-rotate-slides-dis {
padding-left: 40px;
position: absolute;
text-align: left;
}
.t-collabo-rotate-slides-dis dt {
font-size: 11px;
font-size: 1.1rem;
font-weight: 700;
}
.t-collabo-rotate-slides-dis dt span {
display: block;
position: relative;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-rotate-slides-dis dt span::before {
content: "";
display: block;
width: 24px;
height: 3px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #fff), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
background-size: 6px 6px;
position: absolute;
top: 50%;
left: -35px;
-webkit-transform: skewX(50deg) translateY(-50%);
transform: skewX(50deg) translateY(-50%);
}
.t-collabo-rotate-slides-dis dd {
margin-top: 10px;
margin-bottom: 0;
font-size: 14px;
font-size: 1.4rem;
line-height: 1.857;
letter-spacing: 0.025em;
}
.t-collabo-rotate-slides-dis dd + dt {
margin-top: 35px;
}
.t-collabo-rotate-slide01-dis {
top: 50%;
left: 68%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.t-collabo-rotate-slides__discription {
width: 305px;
padding-left: 40px;
position: absolute;
text-align: left;
}
.t-collabo-rotate-slides__slide01-discription {
top: 50%;
left: 68%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.t-collabo-rotate-slides__discription dt {
color: #4bead0;
font-size: 11px;
font-size: 1.1rem;
}
.t-collabo-rotate-slides__discription dd + dt {
margin-top: 35px;
}
.t-collabo-rotate-slides__discription dt span {
content: attr(data-eng);
display: block;
position: relative;
font-family: "Orbitron", sans-serif;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
}
.t-collabo-rotate-slides__discription dt span::before {
content: "";
display: block;
width: 24px;
height: 3px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #4bead0), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #4bead0 50%, transparent 50%);
background-size: 6px 6px;
position: absolute;
top: 50%;
left: -40px;
-webkit-transform: skewX(50deg) translateY(-50%);
transform: skewX(50deg) translateY(-50%);
}
.t-collabo-rotate-slides__discription dd {
margin-top: 10px;
margin-bottom: 0;
}
.t-collabo-rotate-tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin: 0 -45px;
}
.t-collabo-rotate-tabs__item {
padding: 0 45px;
}
.t-collabo-rotate-tabs__label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
color: #fff;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
letter-spacing: 0.025em;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-rotate-tabs__label-left::before,
.t-collabo-rotate-tabs__label-right::after {
content: "";
display: inline-block;
width: 14px;
height: 20px;
background-image: url("https://www.pc-koubou.jp/wp/wp-content/uploads/2022/03/arrow.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
vertical-align: middle;
}
.t-collabo-rotate-tabs__label-left::before {
margin-right: 20px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.t-collabo-rotate-tabs__label-right::after {
margin-left: 20px;
}
#feature01InputLeft90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft90],
#feature01InputLeft45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft45],
#feature01InputFront:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputFront],
#feature01InputRight45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight45],
#feature01InputRight90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight90] {
color: #4bead0;
text-shadow: 0 0 20px rgba(75, 234, 208, 0.8), 0 0 20px rgba(75, 234, 208, 0.8);
}
@media screen and (max-width: 1023px) {
.t-collabo-rotate-tabs {
margin: 0 -15px;
}
.t-collabo-rotate-tabs__item {
padding: 0 15px;
}
.p-gw-feature01__slides {
position: relative;
}
.p-gw-feature01__slides-group {
padding: 0;
margin: 0 -20px;
}
#feature01InputLeft90:checked ~ .t-collabo-rotate-slides #feature01SlideLeft90,
#feature01InputLeft45:checked ~ .t-collabo-rotate-slides #feature01SlideLeft45,
#feature01InputFront:checked ~ .t-collabo-rotate-slides #feature01SlideFront,
#feature01InputRight45:checked ~ .t-collabo-rotate-slides #feature01SlideRight45,
#feature01InputRight90:checked ~ .t-collabo-rotate-slides #feature01SlideRight90 {
position: relative;
}
.p-gw-feature01__slides-image {
padding-bottom: 25px;
}
.p-gw-feature01__slide-discription {
width: auto;
padding: 0 20px;
margin-top: 50px;
margin-bottom: 0;
position: static;
-webkit-transform: translateY(0);
transform: translateY(0);
}
.p-gw-feature01__slide-discription dt span::before {
display: none;
}
.p-gw-feature01__slide-discription dd {
margin-top: 0;
}
.t-collabo-rotate-tabs {
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding-top: 665px;
margin: 0;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.t-collabo-rotate-tabs__item {
padding: 0;
}
.t-collabo-rotate-tabs__label-left::before,
.t-collabo-rotate-tabs__label-right::after {
width: 6px;
height: 10px;
}
}
@media screen and (max-width: 640px) {
.p-gw-feature01__slide-discription dt {
font-size: 10px;
font-size: 1rem;
}
.p-gw-feature01__slide-discription dt span {
font-size: 12px;
font-size: 1.2rem;
}
.t-collabo-rotate-tabs {
padding-top: calc(100% + 40px + 15px);
}
.t-collabo-rotate-tabs__label {
font-size: 11px;
font-size: 1.1rem;
}
}
/* COLORS
------------------------------------------------------------ */
.t-collabo-colors__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 50px 40px;
position: relative;
margin-top: 40px;
margin-bottom: -50px;
}
.t-collabo-colors__input {
display: none;
}
.t-collabo-colors-contents {
max-width: 345px;
margin-right: auto;
}
.t-collabo-colors-contents > *:not(.t-collabo-colors-slides) {
position: relative;
z-index: 2;
}
.t-collabo-colors-slides {
width: 1158px;
position: absolute;
right: 365px;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.t-collabo-colors-slides__group {
width: 100%;
padding-bottom: 51.468%;
position: relative;
margin: 0;
}
.t-collabo-colors-slides__group-item {
position: absolute;
right: 0;
bottom: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-colors-slides__group-item:not(#colorsSlideBlack) {
opacity: 0;
}
.t-collabo-colors-tabs {
margin-top: 25px;
}
.t-collabo-colors-tabs__group {
margin-bottom: 0;
}
.t-collabo-colors-tabs__group-item:not(:first-child) {
margin-top: 10px;
}
.t-collabo-colors-tabs__label {
padding-left: 35px;
position: relative;
margin: 0;
color: #fff;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.25;
letter-spacing: 0.1em;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-colors-tabs__label::before,
.t-collabo-colors-tabs__label::after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.t-collabo-colors-tabs__label::before {
width: 20px;
height: 20px;
border: 1px solid #fff;
top: calc((1em - 20px) / 2 + 0.125em);
left: 0;
}
.t-collabo-colors-tabs__label::after {
width: 14px;
height: 14px;
background-color: #fff;
top: calc((1em - 14px) / 2 + 0.125em);
left: 3px;
opacity: 0;
}
#colorsInputBlack:checked ~ .t-collabo-colors-contents .t-collabo-colors-tabs__label[for=colorsInputBlack]::after {
opacity: 1;
}
.t-collabo-colors-setting {
max-width: 315px;
position: relative;
z-index: 2;
}
.t-collabo-colors-setting__image {
margin-bottom: 15px;
}
.t-collabo-colors-setting-dis__text dt {
font-size: 11px;
font-size: 1.1rem;
letter-spacing: 0.025em;
}
.t-collabo-colors-setting-dis__text dt span {
display: block;
position: relative;
font-size: 16px;
font-size: 1.6rem;
}
.t-collabo-colors-setting-dis__text dt span::before {
content: "";
display: block;
width: 24px;
height: 3px;
background-image: -webkit-gradient(linear, right top, left top, color-stop(50%, #fff), color-stop(50%, transparent));
background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
background-size: 6px 6px;
position: absolute;
top: 50%;
left: -35px;
-webkit-transform: skewX(50deg) translateY(-50%);
transform: skewX(50deg) translateY(-50%);
}
.t-collabo-colors-setting-dis__note {
margin-top: 25px;
margin-right: -50px;
font-size: 12px;
font-size: 1.2rem;
line-height: 2;
letter-spacing: 0.039em;
}
@media screen and (max-width: 1200px) {
.t-collabo-colors__inner {
padding-right: 0;
padding-left: 0;
}
.t-collabo-colors-slides {
right: 315px;
}
.t-collabo-colors-setting-dis__note {
margin-right: 0;
}
}
@media screen and (max-width: 1023px) {
.t-collabo-colors__inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.t-collabo-colors-contents,
.t-collabo-colors-setting {
max-width: inherit;
}
.t-collabo-colors-slides {
width: auto;
position: relative;
right: 0;
margin: 0 -20px;
}
.t-collabo-colors-tabs {
margin-top: 10px;
}
.t-collabo-colors-tabs__group-item:not(:first-child) {
margin-top: 5px;
}
.t-collabo-colors-tabs__label {
padding-left: 25px;
}
.t-collabo-colors-tabs__label::before {
width: 15px;
height: 15px;
top: calc((1em - 15px) / 2 + 0.125em);
}
.t-collabo-colors-tabs__label::after {
width: 11px;
height: 11px;
top: calc((1em - 11px) / 2 + 0.125em);
left: 2px;
}
.t-collabo-colors-setting {
margin-top: 10px;
}
.t-collabo-colors-setting__image {
text-align: center;
}
.t-collabo-colors-setting-dis__text dt span::before {
display: none;
}
}
/* CSS Document */
.theme-mclass .c-font__jost {
font-family: "Jost", sans-serif;
}
.theme-mclass {
color: #fff;
overflow: hidden;
}
.theme-mclass .t-collabo__heading {
padding-bottom: 0;
text-shadow: 0 0 20px rgba(234, 85, 4, 0.8), 0 0 20px rgba(234, 85, 4, 0.8);
font-size: 60px;
font-size: 6rem;
font-weight: 600;
letter-spacing: 0.05em;
}
.theme-mclass .t-collabo__heading-left {
left: 0;
z-index: 10;
font-size: 46px;
font-size: 4.6rem;
}
.theme-mclass .t-collabo__heading-ja {
margin-top: 35px;
}
.theme-mclass .t-collabo__text {
font-size: 18px;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.888;
letter-spacing: 0.025em;
}
.theme-mclass .p-mclass__sub-heading {
margin-bottom: 10px;
color: #999;
font-size: 16px;
font-size: 1.6rem;
font-weight: 400;
letter-spacing: 0.02em;
}
.theme-mclass .p-mclass__heading {
text-align: center;
font-size: 60px;
font-size: 6rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.05em;
text-shadow: 0 0 20px rgba(234, 85, 4, 0.8);
}
@media screen and (max-width: 767px) {
.theme-mclass .t-collabo__container {
padding-top: 50px;
padding-bottom: 50px;
}
.theme-mclass .t-collabo__heading,
.theme-mclass .p-mclass__heading {
font-size: 34px;
font-size: 3.4rem;
}
.theme-mclass .t-collabo__heading-ja {
margin-top: 15px;
}
.theme-mclass .t-collabo__text {
font-size: 11px;
font-size: 1.1rem;
}
.theme-mclass .p-mclass__sub-heading {
font-size: 10px;
font-size: 1rem;
}
}
/* pankuzu
------------------------------------------------------------ */
.theme-pdlp .c-pankuzu {
display: block;
max-width: 1240px;
padding: 0 20px;
position: absolute;
top: 30px;
right: 0;
left: 0;
z-index: 10;
font-size: 11px;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
}
.theme-pdlp .c-pankuzu a {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-right: 0.75em;
position: relative;
color: #fff;
}
.theme-pdlp .c-pankuzu a::after {
content: "";
display: inline-block;
width: 0.707em;
height: 0.707em;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
margin-left: 0.5em;
-webkit-transform: translateY(-0.1em) rotate(45deg);
transform: translateY(-0.1em) rotate(45deg);
}
.theme-pdlp .c-pankuzu strong {
color: #ea5504;
}
@media screen and (max-width: 1160px) {
.theme-pdlp .c-pankuzu {
font-size: 10px;
font-size: 1rem;
}
.theme-pdlp .c-pankuzu a::after {
width: 0.5em;
height: 0.5em;
border-top-width: 1px;
border-right-width: 1px;
}
}
/* main
------------------------------------------------------------ */
.theme-mclass .p-mclass-main {
min-height: calc(100vh - 132px);
background-image: url("../img/LP_main1_1_1s.jpg");
background-position: center bottom;
}
.theme-mclass .p-mclass-main__container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100%;
position: relative;
z-index: 3;
}
.theme-mclass .p-mclass-main-contents {
max-width: 350px;
padding: 200px 0;
margin-left: auto;
}
.theme-mclass .p-mclass-main-contents__level-logo {
margin-bottom: 15px !important;
}
.theme-mclass .p-mclass-main-contents__heading {
color: #ea5504;
font-size: 86px;
font-size: 8.6rem;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
white-space: nowrap;
text-shadow: 0 0 15px rgba(234, 85, 4, 0.8);
}
.theme-mclass .p-mclass-main-contents__text {
margin-top: 15px;
font-size: 20px;
font-size: 2rem;
font-weight: 500;
line-height: 2;
letter-spacing: 0.025em;
}
.theme-mclass .p-mclass-main-contents__heading span {
letter-spacing: 0.05em;
}
.theme-mclass .p-mclass-main-sns {
position: absolute;
right: 0;
bottom: 110px;
}
.theme-mclass .p-mclass-main-sns__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.theme-mclass .p-mclass-main-sns__group-item {
padding: 35px;
background-image: url("../img/icon_bg.png");
background-repeat: no-repeat;
background-position: center;
}
.theme-mclass .p-mclass-main-sns__group-item a {
display: block;
}
.theme-mclass .p-mclass-main-sns__group-item img {
vertical-align: middle;
}
.theme-mclass .p-mclass-main__image {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
}
.theme-mclass .p-mclass-main__image img {
width: 100%;
max-height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.theme-mclass .p-mclass-main__image-bg {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.theme-mclass .p-mclass-main__image-bg img {
width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-height: 850px) {
.theme-mclass .p-mclass-main-sns {
bottom: 50px;
}
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-main {
background-image: url("../img/LP_main1_1_1s@sp.png");
background-size: 100% auto;
}
.theme-mclass .p-mclass-main__image {
margin-left: -20%;
}
}
@media screen and (max-width: 767px) {
.theme-mclass .p-mclass-main__container {
padding-top: 85px;
padding-bottom: 0;
position: static;
}
.theme-mclass .p-mclass-main-contents {
max-width: 100%;
padding: 0;
}
.theme-mclass .p-mclass-main-contents__level-logo img {
width: 112px;
}
.theme-mclass .p-mclass-main-contents__heading {
font-size: 60px;
font-size: 6rem;
}
.theme-mclass .p-mclass-main-contents__text {
font-size: 14px;
font-size: 1.4rem;
text-shadow: 0 0 5px #ff4a2c;
}
.theme-mclass .p-mclass-main-sns {
width: 100%;
bottom: 5px;
}
.theme-mclass .p-mclass-main-sns__group-item {
padding: 20px;
}
.theme-mclass .p-mclass-main__image {
width: auto;
position: static;
margin: -10% -20px 0;
}
}
/* CONCEPT
------------------------------------------------------------ */
.theme-mclass .p-mclass-concept {
min-height: 100vh;
background-image: url("../img/LP_main2_1_1.jpg");
}
.theme-mclass .p-mclass-concept__container {
position: relative;
z-index: 2;
}
.theme-mclass .p-mclass-concept-contents {
max-width: 430px;
}
.theme-mclass .p-mclass-concept-contents__sub-heading {
text-align: left;
}
.theme-mclass .p-mclass-concept-contents__heading {
text-align: left;
}
.theme-mclass .p-mclass-concept-contents__text {
margin-top: 10px;
}
.theme-mclass .p-mclass-concept__image {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
.theme-mclass .p-mclass-concept__image img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-concept {
background-image: url("../img/LP_main2_1_1@sp.png");
background-size: 100% auto;
background-position: center bottom;
}
.theme-mclass .p-mclass-concept__container {
padding-bottom: 0;
}
.theme-mclass .p-mclass-concept-contents {
max-width: 100%;
}
.theme-mclass .p-mclass-concept__image {
width: auto;
position: static;
margin: -10% -20px 0;
}
}
/* features
------------------------------------------------------------ */
.theme-mclass .p-mclass-features {
background-color: #000;
}
.theme-mclass .p-mclass-features .t-collabo-features__container {
min-height: 700px;
}
.theme-mclass .p-mclass-features__heading {
font-size: 34px;
font-size: 3.4rem;
font-weight: 700;
line-height: 1.471;
letter-spacing: 0.025em;
}
.theme-mclass .p-mclass-features__heading .is-subheading {
display: block;
margin-bottom: 30px;
color: #ea5504;
font-size: 40px;
font-size: 4rem;
font-weight: 600;
letter-spacing: 0;
text-shadow: 0 0 15px rgba(234, 85, 4, 0.8);
}
.theme-mclass .p-mclass-features__heading + .t-collabo__text {
margin-top: 15px;
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-features .t-collabo-features__container {
min-height: inherit;
}
.theme-mclass .p-mclass-features__heading {
text-align: center;
}
}
@media screen and (max-width: 767px) {
.theme-mclass .p-mclass-features__heading {
font-size: 23px;
font-size: 2.3rem;
}
.theme-mclass .p-mclass-features__heading .is-subheading {
margin-bottom: 20px;
font-size: 16px;
font-size: 1.6rem;
}
.theme-mclass .p-mclass-features__heading .is-subheading span {
font-size: 23px;
font-size: 2.3rem;
}
}
/* features 1 */
.theme-mclass .p-mclass-feature01 {
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(80%, rgb(43, 15, 0)), to(rgb(0, 0, 0)));
background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(43, 15, 0) 80%, rgb(0, 0, 0) 100%);
}
.theme-mclass .p-mclass-feature01__container {
position: relative;
}
.theme-mclass .p-mclass-feature01__features-heading {
text-align: center;
}
.theme-mclass .p-mclass-feature01__text {
max-width: 710px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.theme-mclass .t-collabo-rotate-slides {
max-width: inherit;
}
.theme-mclass .t-collabo-rotate-slides__group {
min-height: 596px;
padding-bottom: 49.666%;
background-image: url("../img/slide_circle.png");
background-repeat: no-repeat;
background-position: center bottom;
}
.theme-mclass .p-mclass-feature01__slides-image img {
width: 596px;
}
.theme-mclass .t-collabo-rotate-slide01-dis {
padding: 30px 30px 30px 40px;
border: 1px solid #ea5504;
top: 46%;
left: auto;
right: 0;
z-index: 2;
margin-bottom: 0;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt {
color: #ea5504;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span {
font-size: 20px;
font-size: 2rem;
font-weight: 600;
line-height: 1.25;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span::before,
.theme-mclass .t-collabo-rotate-slide01-dis dt span::after {
content: "";
display: block;
background: #ea5504;
position: absolute;
width: 14px;
height: 1px;
top: 0.5125em;
left: auto;
right: calc(100% + 10px);
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span::before {
-webkit-transform: none;
transform: none;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.theme-mclass .t-collabo-rotate-slide01-dis dd {
margin-top: 5px;
font-size: 16px;
font-size: 1.6rem;
font-weight: 500;
line-height: 2;
}
.theme-mclass .t-collabo-rotate-tabs__label {
position: relative;
color: #ea5504;
font-size: 21px;
font-size: 2.1rem;
font-weight: 500;
letter-spacing: 0.1em;
white-space: nowrap;
opacity: 0.5;
}
.theme-mclass .t-collabo-rotate-tabs__label:not(.t-collabo-rotate-tabs__label-right)::after,
.theme-mclass .t-collabo-rotate-tabs__label-right::before {
content: "";
display: block;
width: calc(100% + 10px);
min-width: 100px;
height: 11px;
background-image: url("../img/slide_current.png");
background-size: 100% 100%;
position: absolute;
top: calc(100% - 6px);
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .t-collabo-rotate-tabs__label-left {
margin-right: 1em;
}
.theme-mclass .t-collabo-rotate-tabs__label-left::before,
.theme-mclass .t-collabo-rotate-tabs__label-right::after {
background-image: url("../img/arrow.png");
}
.theme-mclass .t-collabo-rotate-tabs__label:hover {
opacity: 1;
}
.theme-mclass #feature01InputLeft90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft90],
.theme-mclass #feature01InputLeft45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft45],
.theme-mclass #feature01InputFront:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputFront],
.theme-mclass #feature01InputRight45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight45],
.theme-mclass #feature01InputRight90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight90] {
color: #ea5504;
text-shadow: none;
opacity: 1;
}
.theme-mclass #feature01InputLeft90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft90]::after,
.theme-mclass #feature01InputLeft45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputLeft45]::after,
.theme-mclass #feature01InputFront:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputFront]::after,
.theme-mclass #feature01InputRight45:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight45]::before,
.theme-mclass #feature01InputRight90:checked ~ .t-collabo-rotate-tabs .t-collabo-rotate-tabs__label[for=feature01InputRight90]::before {
opacity: 1;
}
@media screen and (max-width: 1160px) {
.theme-mclass .t-collabo-rotate-tabs__label {
font-size: 18px;
font-size: 1.8rem;
}
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-feature01 {
background: none;
}
.theme-mclass .p-mclass-feature01__heading {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
.theme-mclass .p-mclass-feature01-rotate {
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(80%, rgb(43, 15, 0)), to(rgb(0, 0, 0)));
background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(43, 15, 0) 80%, rgb(0, 0, 0) 100%);
padding-right: 20px;
padding-left: 20px;
margin: 0 -20px 50px;
}
.theme-mclass .p-mclass-feature01__features-heading,
.theme-mclass .p-mclass-feature01__text,
.theme-mclass .t-collabo-rotate-slide01-dis {
-webkit-box-ordinal-group: 4;
-ms-flex-order: 3;
order: 3;
}
.theme-mclass .p-mclass-feature01__heading {
text-align: left;
}
.theme-mclass .t-collabo-rotate-slide01-dis {
position: static;
-webkit-transform: none;
transform: none;
margin-top: 50px;
}
.theme-mclass .t-collabo-rotate-slides__group {
min-height: inherit;
padding-bottom: 0;
background-size: 120% auto;
margin-right: -20px;
margin-left: -20px;
}
.theme-mclass .t-collabo-rotate-tabs {
padding-top: 0;
position: static;
}
}
@media screen and (max-width: 767px) {
.theme-mclass .p-mclass-feature01-rotate {
margin-bottom: 30px;
}
.theme-mclass .p-mclass-feature01__slides-image img {
width: 250px;
}
.theme-mclass .t-collabo-rotate-tabs__label {
font-size: 13px;
font-size: 1.3rem;
}
.theme-mclass .t-collabo-rotate-tabs__label:not(.t-collabo-rotate-tabs__label-right)::after,
.theme-mclass .t-collabo-rotate-tabs__label-right::before {
min-width: inherit;
height: 6px;
width: calc(100% + 5px);
}
.theme-mclass .t-collabo-rotate-tabs__label-left::before {
margin-right: 5px;
}
.theme-mclass .t-collabo-rotate-tabs__label-right::after {
margin-left: 5px;
}
.theme-mclass .p-mclass-feature01__text {
text-align: left;
}
.theme-mclass .t-collabo-rotate-slide01-dis {
padding: 15px 25px 10px;
margin-top: 20px;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt {
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span {
font-size: 13px;
font-size: 1.3rem;
}
.theme-mclass .t-collabo-rotate-slide01-dis dt span::before,
.theme-mclass .t-collabo-rotate-slide01-dis dt span::after {
width: 8px;
right: calc(100% + 6px);
}
.t-collabo-rotate-slides-dis dd + dt {
margin-top: 15px;
}
.theme-mclass .t-collabo-rotate-slide01-dis dd {
font-size: 10px;
font-size: 1rem;
line-height: 1.8;
}
}
/* feature02 */
.theme-mclass .p-mclass-feature02__container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.theme-mclass .p-mclass-feature02-contents {
max-width: 460px;
margin-right: auto;
}
.theme-mclass .p-mclass-feature02__image {
margin-top: auto;
margin-bottom: -50px;
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-feature02__container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.theme-mclass .p-mclass-feature02-contents {
max-width: 100%;
}
.theme-mclass .p-mclass-feature02__image {
margin-right: -20px;
margin-left: -20px;
}
}
/* feature03 */
.theme-mclass .p-mclass-feature03__container {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.theme-mclass .p-mclass-feature03-contents {
max-width: 460px;
margin-left: 30px;
}
.theme-mclass .p-mclass-feature03-images {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-feature03__container,
.theme-mclass .p-mclass-feature03-images {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.theme-mclass .p-mclass-feature03-contents {
max-width: 100%;
margin-left: 0;
}
.theme-mclass .p-mclass-feature03-images {
margin-top: 10px;
}
.theme-mclass .p-mclass-feature03-images__parts {
margin-top: 15px;
}
.theme-mclass .p-mclass-feature03-images__parts img {
width: 280px;
}
}
/* feature04 */
.theme-mclass .p-mclass-feature04__container {
padding-bottom: 65px;
}
.theme-mclass .p-mclass-feature04-contents {
position: relative;
z-index: 10;
}
.theme-mclass .p-mclass-feature04-contents__text {
max-width: 460px;
}
.theme-mclass .p-mclass-feature04-slides {
margin-top: 75px;
}
.theme-mclass .p-mclass-feature04-slides__input {
display: none;
}
.theme-mclass .p-mclass-feature04-slides__group {
min-height: 280px;
margin-bottom: 0;
}
.theme-mclass .p-mclass-feature04-slides__group-item {
position: absolute;
opacity: 0;
visibility: hidden;
}
.theme-mclass .p-mclass-feature04-slides__image img {
width: auto;
max-width: calc(100% - 440px);
height: 100%;
position: absolute;
bottom: 0;
left: 460px;
z-index: 1;
-o-object-fit: contain;
object-fit: contain;
}
.theme-mclass .p-mclass-feature04-slides-dis {
max-width: 500px;
padding: 30px 45px 40px;
border: 1px solid #ea5504;
position: relative;
z-index: 2;
}
.theme-mclass .p-mclass-feature04-slides-dis dl {
margin-bottom: 0;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt {
color: #ea5504;
font-size: 11px;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt span {
display: block;
position: relative;
margin-top: 5px;
font-size: 20px;
font-size: 2rem;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.02em;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt span::before,
.theme-mclass .p-mclass-feature04-slides-dis dl dt span::after {
content: "";
display: block;
width: 14px;
height: 1px;
background-color: #ea5504;
position: absolute;
top: 0.7em;
right: calc(100% + 10px);
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt span::after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.theme-mclass .p-mclass-feature04-slides-dis dl dd {
margin-top: 10px;
margin-bottom: 0;
font-size: 15px;
font-size: 1.5rem;
font-weight: 500;
line-height: 2;
letter-spacing: 0;
}
.theme-mclass .p-mclass-feature04-slides-dis__note {
margin-top: 15px;
margin-bottom: 0;
font-size: 12px;
font-size: 1.2rem;
font-weight: 400;
line-height: 2;
letter-spacing: 0;
}
.theme-mclass .p-mclass-feature04-slides-tabs {
max-width: 920px;
position: relative;
z-index: 2;
margin: 75px auto 0;
}
.theme-mclass .p-mclass-feature04-slides-tabs__group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin: -20px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__group-item {
width: 16.666%;
padding: 20px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__label {
display: block;
margin: 0;
cursor: pointer;
}
.theme-mclass .p-mclass-feature04-slides-tabs__thumb {
border: 1px solid #fff;
border-radius: 6px;
overflow: hidden;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slides-tabs__name {
margin: 10px -15px 0;
color: #ea5504;
text-align: center;
font-size: 12px;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: 0;
white-space: nowrap;
}
#feature04Input01:checked ~ .p-mclass-feature04-slides__group #feature04Slide01,
#feature04Input02:checked ~ .p-mclass-feature04-slides__group #feature04Slide02,
#feature04Input03:checked ~ .p-mclass-feature04-slides__group #feature04Slide03,
#feature04Input04:checked ~ .p-mclass-feature04-slides__group #feature04Slide04,
#feature04Input05:checked ~ .p-mclass-feature04-slides__group #feature04Slide05,
#feature04Input06:checked ~ .p-mclass-feature04-slides__group #feature04Slide06 {
opacity: 1;
position: static;
visibility: visible;
}
#feature04Input01:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input01] .p-mclass-feature04-slides-tabs__thumb,
#feature04Input02:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input02] .p-mclass-feature04-slides-tabs__thumb,
#feature04Input03:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input03] .p-mclass-feature04-slides-tabs__thumb,
#feature04Input04:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input04] .p-mclass-feature04-slides-tabs__thumb,
#feature04Input05:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input05] .p-mclass-feature04-slides-tabs__thumb,
#feature04Input06:checked ~ .p-mclass-feature04-slides-tabs .p-mclass-feature04-slides-tabs__label[for=feature04Input06] .p-mclass-feature04-slides-tabs__thumb {
border-color: #ea5504;
}
/* slide01 */
.theme-mclass .p-mclass-feature04-slide01__input {
display: none;
}
.theme-mclass .p-mclass-feature04-slide01__image img {
opacity: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slide01-tabs {
margin-top: 20px;
margin-bottom: -20px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__group {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
margin: 0 -25px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__group-item {
padding: 0 25px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label {
display: block;
min-width: 40px;
padding-top: 45px;
position: relative;
margin: 0;
text-align: center;
color: #717070;
font-size: 18px;
font-size: 1.8rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label span {
display: block;
margin: 0 -15px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label::before,
.theme-mclass .p-mclass-feature04-slide01-tabs__label::after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
right: 0;
left: 0;
margin: auto;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label::before {
width: 40px;
height: 40px;
border: 1px solid #717070;
top: 0;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label::after {
width: 20px;
height: 20px;
background-color: #717070;
top: 10px;
}
#feature04Slide01InputTop1:checked ~ .p-mclass-feature04-slide01__image #feature04Slide01Top1,
#feature04Slide01InputTop2:checked ~ .p-mclass-feature04-slide01__image #feature04Slide01Top2,
#feature04Slide01InputFront:checked ~ .p-mclass-feature04-slide01__image #feature04Slide01Front,
#feature04Slide01InputBottom:checked ~ .p-mclass-feature04-slide01__image #feature04Slide01Bottom {
opacity: 1;
}
#feature04Slide01InputTop1:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop1],
#feature04Slide01InputTop2:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop2],
#feature04Slide01InputFront:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputFront],
#feature04Slide01InputBottom:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputBottom] {
color: #ea5504;
}
#feature04Slide01InputTop1:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop1]::before,
#feature04Slide01InputTop2:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop2]::before,
#feature04Slide01InputFront:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputFront]::before,
#feature04Slide01InputBottom:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputBottom]::before {
border-color: #ea5504;
}
#feature04Slide01InputTop1:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop1]::after,
#feature04Slide01InputTop2:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputTop2]::after,
#feature04Slide01InputFront:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputFront]::after,
#feature04Slide01InputBottom:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide01-tabs__label[for=feature04Slide01InputBottom]::after {
background-color: #ea5504;
}
/* slide05 */
.theme-mclass .p-mclass-feature04-slide05-select {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
top: 33px;
right: 35px;
}
.theme-mclass .p-mclass-feature04-slide05-select__input {
display: none;
}
.theme-mclass .p-mclass-feature04-slide05-select__heading {
margin-right: 20px;
color: #ea5504;
font-size: 18px;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.theme-mclass .p-mclass-feature04-slide05-select-label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 120px;
height: 40px;
padding: 5px;
background-color: #717070;
border-radius: 20px;
position: relative;
text-align: center;
color: #000;
font-size: 18px;
font-size: 1.8rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.02em;
overflow: hidden;
-webkit-transition: 0.3s;
transition: 0.3s;
cursor: pointer;
}
.theme-mclass .p-mclass-feature04-slide05-select-label::before {
content: "";
display: block;
width: 30px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: calc(100% - 35px);
z-index: 2;
-webkit-transition: 0.3s;
transition: 0.3s;
margin: auto;
}
.theme-mclass .p-mclass-feature04-slide05-select-label__open,
.theme-mclass .p-mclass-feature04-slide05-select-label__close {
display: block;
width: 100%;
position: absolute;
top: 0;
line-height: 40px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slide05-select-label__open {
padding-left: 30px;
left: 100%;
}
.theme-mclass .p-mclass-feature04-slide05-select-label__close {
padding-right: 30px;
right: 0;
}
.theme-mclass .p-mclass-feature04-slides__image .p-mclass-feature04-slide05-select-image__open,
.theme-mclass .p-mclass-feature04-slides__image .p-mclass-feature04-slide05-select-image__close {
-webkit-transition: 0.3s;
transition: 0.3s;
}
.theme-mclass .p-mclass-feature04-slides__image .p-mclass-feature04-slide05-select-image__open {
opacity: 0;
z-index: 2;
}
.theme-mclass .p-mclass-feature04-slides__image .p-mclass-feature04-slide05-select-image__close {
z-index: 1;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides__image .p-mclass-feature04-slide05-select-image__open {
opacity: 1;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide05-select-label {
background-color: #ea5504;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide05-select-label::before {
left: 5px;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide05-select-label__open {
left: 0;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide05-select-label__close {
right: 100%;
}
@media screen and (max-width: 1023px) {
.theme-mclass .p-mclass-feature04-contents__text {
max-width: 100%;
}
.theme-mclass .p-mclass-feature04-slides {
margin-top: -10%;
}
.theme-mclass .p-mclass-feature04-slides__image {
padding-bottom: calc(100% + 40px);
position: relative;
margin-right: -20px;
margin-left: -20px;
}
.theme-mclass .p-mclass-feature04-slides__image img {
width: 100%;
max-width: 100%;
left: 0;
}
.theme-mclass .p-mclass-feature04-slides-dis {
margin: 0 auto;
}
.theme-mclass .p-mclass-feature04-slides-tabs {
max-width: 460px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__group-item {
width: 33.333%;
}
}
@media screen and (max-width: 767px) {
.theme-mclass .p-mclass-feature04-slides-dis {
max-width: 280px;
padding: 15px 25px 20px;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt {
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt span {
font-size: 13px;
font-size: 1.3rem;
}
.theme-mclass .p-mclass-feature04-slides-dis dl dt span::before,
.theme-mclass .p-mclass-feature04-slides-dis dl dt span::after {
width: 8px;
right: calc(100% + 6px);
}
.theme-mclass .p-mclass-feature04-slides-dis dl dd {
margin-top: 5px;
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slides-dis__note {
margin-top: 10px;
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slides-tabs {
max-width: 230px;
margin-top: 25px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__group {
margin: -7.5px -12.5px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__group-item {
padding: 7.5px 12.5px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__thumb {
border-radius: 3px;
}
.theme-mclass .p-mclass-feature04-slides-tabs__name {
margin-top: 5px;
font-size: 10px;
font-size: 1rem;
line-height: 1.529;
}
/* slide01 */
.theme-mclass .p-mclass-feature04-slide01-tabs {
margin-top: 15px;
margin-bottom: -10px;
text-align: center;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__group {
margin: 0 -20px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__group-item {
padding: 0 20px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label {
min-width: 20px;
padding-top: 25px;
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label::before {
width: 20px;
height: 20px;
}
.theme-mclass .p-mclass-feature04-slide01-tabs__label::after {
width: 10px;
height: 10px;
top: 5px;
}
/* slide05 */
.theme-mclass .p-mclass-feature04-slide05-select {
top: 15px;
right: 25px;
}
.theme-mclass .p-mclass-feature04-slide05-select__heading {
margin-right: 10px;
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slide05-select-label {
width: 65px;
height: 20px;
}
.theme-mclass .p-mclass-feature04-slide05-select-label::before {
width: 15px;
height: 15px;
left: calc(100% - 17.5px);
}
.theme-mclass .p-mclass-feature04-slide05-select-label__open,
.theme-mclass .p-mclass-feature04-slide05-select-label__close {
line-height: 20px;
font-size: 10px;
font-size: 1rem;
}
.theme-mclass .p-mclass-feature04-slide05-select-label__open {
padding-left: 15px;
}
.theme-mclass .p-mclass-feature04-slide05-select-label__close {
padding-right: 15px;
}
.theme-mclass .p-mclass-feature04-slide05-select__input:checked ~ .p-mclass-feature04-slides-dis .p-mclass-feature04-slide05-select-label::before {
left: 2.5px;
}
}
/* LINEUP
------------------------------------------------------------ */
.theme-mclass .p-mclass-lineup {
background-color: #fff;
}
.theme-mclass .p-mclass-lineup__container {
padding-top: 0;
padding-bottom: 65px;
}
.theme-mclass .p-mclass-lineup__section + .p-mclass-lineup__section {
margin-top: 40px;
}
.theme-mclass .p-mclass-lineup__heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 60px;
padding: 10px 25px;
background-color: #202020;
position: relative;
margin-bottom: 30px;
font-size: 20px;
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.theme-mclass .p-mclass-lineup__heading::before {
content: "";
display: block;
width: 4px;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#d85f28), to(#f0bf41));
background: linear-gradient(to bottom, #d85f28, #f0bf41);
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 767px) {
.theme-mclass .p-mclass-lineup__container {
padding-top: 0;
padding-bottom: 60px;
}
.theme-mclass .p-mclass-lineup__heading {
padding-right: 20px;
padding-left: 20px;
margin-bottom: 25px;
font-size: 15px;
font-size: 1.5rem;
}
}
/* INFORMATION
------------------------------------------------------------ */
.theme-mclass .t-collabo-information {
background: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 0, 0)), color-stop(80%, rgb(43, 15, 0)), to(rgb(0, 0, 0)));
background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(43, 15, 0) 80%, rgb(0, 0, 0) 100%);
}
.theme-mclass .t-collabo-information__list {
width: 1044px;
margin-top: 30px;
}
.theme-mclass .t-collabo-information__list-group {
margin: -6px;
}
.theme-mclass .t-collabo-information__list-group-item {
padding: 6px;
}
.theme-mclass .t-collabo-information__card {
background-color: #332222;
color: #fff !important;
font-size: 15px;
font-size: 1.5rem;
letter-spacing: 0.05em;
}
.theme-mclass .t-collabo-information__thumb {
max-height: inherit;
}
.theme-mclass .t-collabo-information__title {
margin-bottom: 35px !important;
}
.theme-mclass .t-collabo-information__category {
padding-left: 0;
font-size: 13px;
font-size: 1.3rem;
}
@media screen and (max-width: 767px) {
.theme-mclass .t-collabo-information__list {
margin-top: 15px;
}
.theme-mclass .t-collabo-information__list-group {
margin: -5px;
}
.theme-mclass .t-collabo-information__list-group-item {
padding: 5px;
}
.theme-mclass .t-collabo-information__card {
font-size: 11px;
font-size: 1.1rem;
}
.theme-mclass .t-collabo-information__title {
margin-bottom: 10px !important;
}
.theme-mclass .t-collabo-information__category {
font-size: 10px;
font-size: 1rem;
}
}
.l-content {
padding: 80px 0;
}
.l-container, .l-container--mobileNoPadding, .l-container--floot {
max-width: 1240px;
width: 100%;
padding: 0 20px;
margin: 0 auto;
}
.l-container--floot {
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 10;
}
@media screen and (max-width: 769px) {
.l-container--floot {
position: static;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
.l-container--vw75 {
max-width: calc(75vw - 20px);
width: 100%;
margin: 0 auto;
padding-left: 20px;
}
@media screen and (max-width: 1240px) {
.l-container--vw75 {
max-width: 100%;
}
}
@media screen and (max-width: 769px) {
.l-container--vw75 {
padding: 0;
}
}
@media screen and (max-width: 769px) {
.l-container--mobileNoPadding {
padding: 0;
}
}
.l-container--full {
max-width: 100%;
padding: 0;
}
/* サンプル ここを参考にしてください */
.c-heading, .c-heading--pTopNormal {
padding: 20px;
}
@media screen and (max-width: 769px) {
.c-heading, .c-heading--pTopNormal { /*メディアクエリは改行なしで、一番上*/
padding: 20px;
}
}
.c-heading--pTopNormal { /*モディファイアは１改行いれる 順番はモディファイアが先*/
padding-top: 10px;
}
.c-heading__item { /*エレメントは１改行いれる 順番はモディファイアの後*/
font-size: 2rem;
line-height: 1.5;
}
.c-heading__item .c-heading__img { /*入れ子にする入れ子は途中で切らない*/
width: 30px;
}
.c-heading__img { /*外で一旦エレメントを作り入れ子にする*/
width: 20px;
}
.c-tab__panel {
position: relative;
width: 100%;
}
@media screen and (max-width: 769px) {
.c-tab__panel {
aspect-ratio: 1/1;
}
}
.c-tab__panelItem, .c-tab__panelItem--index {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.6s ease, visibility 0.6s ease;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.c-tab__panelItem--index {
position: relative;
z-index: -1;
opacity: 0;
visibility: hidden;
}
.c-tab__panelItem--index.is-active {
z-index: 3;
opacity: 1;
visibility: visible;
}
.c-tab__panelItem.is-active, .is-active.c-tab__panelItem--index {
z-index: 3;
opacity: 1;
visibility: visible;
}
.c-tab__panelImg {
width: 100%;
}
.c-tab__btn {
width: 100%;
position: absolute;
bottom: 120px;
left: 0;
z-index: 10;
}
@media screen and (max-width: 1200px) {
.c-tab__btn {
bottom: 77px;
}
}
@media screen and (max-width: 769px) {
.c-tab__btn {
position: static;
margin-top: 30px;
}
}
@media screen and (max-width: 600px) {
.c-tab__btn {
margin-top: 20px;
}
}
.c-tab__btnInner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 40px;
}
@media screen and (max-width: 769px) {
.c-tab__btnInner {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 300px;
width: 100%;
margin: 0 auto;
gap: 35px 60px;
}
}
@media screen and (max-width: 600px) {
.c-tab__btnInner {
max-width: 170px;
gap: 20px 34px;
}
}
.c-tab__btnItem {
cursor: pointer;
width: 120px;
height: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
gap: 11px;
}
@media screen and (max-width: 600px) {
.c-tab__btnItem {
width: 68px;
height: auto;
}
}
.c-tab__btnItem.is-active .c-tab__btnImgBox {
border-color: #00a29a;
}
.c-tab__btnImgBox {
border: 2px solid #fff;
border-radius: 6px;
}
.c-tab__btnText {
font-size: 1.2rem;
line-height: 1.2;
font-weight: 500;
text-align: center;
color: #00a29a;
white-space: nowrap;
}
@media screen and (max-width: 769px) {
.c-tab__btnText {
font-size: 1.7rem;
line-height: 1.5;
}
}
@media screen and (max-width: 600px) {
.c-tab__btnText {
font-size: 1rem;
white-space: nowrap;
}
}
@media screen and (max-width: 769px) {
.c-tab__btnText--position {
position: relative;
left: -7px;
}
}
@media screen and (max-width: 600px) {
.c-tab__btnText--position {
left: -4px;
}
}
.p-mv {
position: relative;
}
@media screen and (max-width: 769px) {
.p-mv {
background-color: #000;
min-height: 665px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
}
.p-mv__container {
position: absolute;
top: 31.2%;
right: 12.5%;
z-index: 9;
}
@media screen and (max-width: 769px) {
.p-mv__container {
top: 0;
right: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 87px 20px 0;
}
}
.p-mv__box {
max-width: 351px;
}
@media screen and (max-width: 769px) {
.p-mv__box {
margin: 0 auto;
}
}
.p-mv__boxImgArea {
max-width: 160px;
width: 100%;
}
@media screen and (max-width: 769px) {
.p-mv__boxImgArea {
max-width: 110px;
}
}
.p-mv__boxImg {
width: 100%;
}
.p-mv__boxHeading {
color: #00a29a;
font-size: 8.2rem;
font-family: "Oxanium", sans-serif;
font-weight: 500;
letter-spacing: 0.08em;
margin-top: 16px;
}
@media screen and (max-width: 769px) {
.p-mv__boxHeading {
font-size: 6.74rem;
margin-top: 7px;
}
}
.p-mv__boxText {
color: #fff;
font-size: 2rem;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 2;
}
@media screen and (max-width: 769px) {
.p-mv__boxText {
font-size: 1.6rem;
margin-top: 4px;
}
}
.p-mv__snsList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
z-index: 10;
margin-top: 70px;
gap: 44px;
}
@media screen and (max-width: 769px) {
.p-mv__snsList {
margin-top: auto;
padding-bottom: 32px;
gap: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
}
.p-mv__snsItemLink {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
}
@media screen and (max-width: 769px) {
.p-mv__snsItemLink {
width: 15px;
height: 15px;
}
}
.p-mv__snsItemLink::after {
content: "";
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0.2;
background-color: #00a29a;
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transform: scale(1.01);
transform: scale(1.01);
mix-blend-mode: multiply;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
@media screen and (min-width: 769px) {
.p-mv__snsItemLink:hover::after {
opacity: 1;
}
}
.p-mv__smsImg {
-o-object-fit: contain;
object-fit: contain;
}
.p-mvSwiper {
width: 100%;
height: auto;
}
.p-mvSwiper__sliderImg {
-o-object-fit: cover;
object-fit: cover;
min-height: 80vh;
width: 100%;
}
@media screen and (max-width: 769px) {
.p-mvSwiper__sliderImg {
min-height: 432px;
-o-object-position: 30% 50%;
object-position: 30% 50%;
}
}
.p-concept {
position: relative;
background-color: #000;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: relative;
min-height: 760px;
}
@media screen and (max-width: 769px) {
.p-concept {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
}
.p-concept::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 769px) {
.p-concept::after {
background: linear-gradient(163deg, rgb(9, 9, 11) 0%, rgb(9, 9, 11) 17%, rgba(0, 0, 0, 0) 40%);
}
}
.p-concept__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../images/sense_m/pc/concept_pc.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
@media screen and (max-width: 769px) {
.p-concept__bg {
background-size: cover;
background-position: center bottom;
background-image: url(../images/sense_m/sp/concept_sp.jpg);
}
}
.p-concept__box {
position: relative;
z-index: 10;
max-width: 460px;
}
@media screen and (max-width: 769px) {
.p-concept__box {
margin-top: 73px;
}
}
.p-concept__boxSubTitle {
font-family: "Oxanium", sans-serif;
font-weight: 400;
font-size: 1.6rem;
color: #999;
line-height: 1.2;
position: relative;
}
@media screen and (max-width: 769px) {
.p-concept__boxSubTitle {
font-size: 1rem;
}
}
.p-concept__boxSubTitle::before {
content: "";
}
@media screen and (max-width: 769px) {
.p-concept__boxSubTitle::before {
width: 24px;
height: 1px;
background-color: #00a29a;
position: absolute;
top: -24px;
left: 0;
}
}
.p-concept__boxTitle {
font-family: "Oxanium", sans-serif;
font-weight: 500;
font-size: 6rem;
letter-spacing: 0.05em;
color: #fff;
line-height: 1.18;
text-shadow: 0px 0px 20px #00a29a, 0px 0px 20px #00a29a;
margin-top: 18px;
}
@media screen and (max-width: 769px) {
.p-concept__boxTitle {
font-size: 4.2rem;
line-height: 1;
}
}
.p-concept__boxText {
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 1.89;
color: #fff;
margin-top: 8px;
}
@media screen and (max-width: 769px) {
.p-concept__boxText {
margin-top: 16px;
font-size: 1.4rem;
}
}
.p-features {
background-color: #000;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 769px) {
.p-features {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
@media screen and (max-width: 769px) {
.p-features__spHeadingArea {
position: absolute;
z-index: 100;
top: 70px;
left: 0;
}
}
@media screen and (max-width: 769px) {
.p-features__spHeadingSubTitle {
font-family: "Oxanium", sans-serif;
font-weight: 400;
color: #999;
line-height: 1.2;
position: relative;
font-size: 1rem;
}
}
.p-features__spHeadingSubTitle::before {
content: "";
}
@media screen and (max-width: 769px) {
.p-features__spHeadingSubTitle::before {
width: 24px;
height: 1px;
background-color: #00a29a;
position: absolute;
top: -24px;
left: 0;
}
}
@media screen and (max-width: 769px) {
.p-features__spHeadingTitle {
font-size: 4.2rem;
line-height: 1;
letter-spacing: 0.05em;
color: #fff;
line-height: 1.18;
text-shadow: 0px 0px 20px #00a29a;
margin-top: 18px;
}
}
.p-features__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
height: 100%;
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
}
@media screen and (max-width: 769px) {
.p-features__inner {
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
pointer-events: auto;
padding-bottom: 51px;
}
}
.p-features__box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 710px;
margin-top: 86px;
}
@media screen and (max-width: 769px) {
.p-features__box {
margin-top: 73px;
}
}
.p-features__boxTitleArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
@media screen and (max-width: 769px) {
.p-features__boxTitleArea {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
}
.p-features__boxTitle {
font-size: 4rem;
font-weight: 500;
font-family: "Oxanium", sans-serif;
line-height: 1;
color: #00a29a;
text-shadow: 0px 0px 15px #00a29a;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 769px) {
.p-features__boxTitle {
font-size: 2.5rem;
}
}
.p-features__boxTitleSpan {
display: inline-block;
margin-left: 14px;
}
.p-features__subBox {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 100%;
width: 100%;
text-align: center;
}
.p-features__subBoxSecoundTitle {
font-size: 3.4rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0.025em;
color: #fff;
margin-top: 30px;
}
@media screen and (max-width: 769px) {
.p-features__subBoxSecoundTitle {
line-height: 1.46;
}
}
.p-features__subBoxText {
margin-top: 36px;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.89;
letter-spacing: 0.025em;
color: #fff;
text-align: center;
}
@media screen and (max-width: 769px) {
.p-features__subBoxText {
font-size: 1.4rem;
line-height: 1.77;
text-align: left;
}
}
.p-features__rotateArea {
position: relative;
width: 100%;
}
.p-features__dl, .p-features__dl--negativeMTop {
border: 1px solid #00a29a;
padding: 34px 34px 36px 44px;
max-width: 316px;
margin-left: auto;
margin-top: 56px;
}
@media screen and (max-width: 769px) {
.p-features__dl, .p-features__dl--negativeMTop {
max-width: 100%;
padding: 32px 50px 28px 50px;
}
}
@media screen and (max-width: 600px) {
.p-features__dl, .p-features__dl--negativeMTop {
max-width: 100%;
padding: 18px 28px 16px 28px;
}
}
.p-features__dl--negativeMTop {
width: calc(100% - 40px);
margin: -100px auto 0;
position: relative;
z-index: 11;
}
@media screen and (max-width: 600px) {
.p-features__dl--negativeMTop {
margin: -60px auto 0;
}
}
.p-features__dlTextArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.p-features__dlTextArea--mt {
margin-top: 32.5px;
}
@media screen and (max-width: 769px) {
.p-features__dlTextArea--mt {
margin-top: 22px;
}
}
.p-features__dt {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.16;
color: #00a29a;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (max-width: 769px) {
.p-features__dt {
font-size: 1.5rem;
}
}
@media screen and (max-width: 600px) {
.p-features__dt {
font-size: 1rem;
}
}
.p-features__dtSpan {
display: inline-block;
font-size: 2.1rem;
line-height: 1.2;
position: relative;
}
@media screen and (max-width: 769px) {
.p-features__dtSpan {
font-size: 2.5rem;
}
}
@media screen and (max-width: 600px) {
.p-features__dtSpan {
font-size: 1.5rem;
}
}
.p-features__dtSpan::before, .p-features__dtSpan::after {
content: "";
display: block;
background: #00a29a;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.p-features__dtSpan::before {
width: 16px;
height: 1px;
top: 50%;
left: -26px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
@media screen and (max-width: 600px) {
.p-features__dtSpan::before {
width: 9px;
left: -16px;
}
}
.p-features__dtSpan::after {
width: 1px;
height: 16px;
left: -18.7px;
}
@media screen and (max-width: 600px) {
.p-features__dtSpan::after {
height: 9px;
left: -12.4px;
}
}
.p-features__dd {
margin-top: 15px;
font-size: 1.6rem;
color: #fff;
font-weight: 500;
}
@media screen and (max-width: 769px) {
.p-features__dd {
font-size: 2rem;
line-height: 1.8;
margin-top: 2px;
}
}
@media screen and (max-width: 600px) {
.p-features__dd {
font-size: 1.2rem;
line-height: 1.8;
margin-top: 2px;
}
}
@media screen and (max-width: 769px) {
.p-features__spContainer {
background-color: #000;
min-height: 60vh;
}
}
@media screen and (max-width: 769px) {
.p-features__spTextArea {
margin-top: 39.2px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.p-features__spTitleArea {
text-align: center;
}
@media screen and (max-width: 769px) {
.p-features__spTitle {
font-size: 2.46rem;
color: #00a29a;
font-family: "Oxanium", sans-serif;
font-weight: 500;
line-height: 2.45;
text-shadow: 0px 0px 15px #00a29a;
}
}
@media screen and (max-width: 769px) {
.p-features__spTitleSpan {
font-size: 3.51rem;
}
}
@media screen and (max-width: 769px) {
.p-features__spSubTitle {
font-size: 2.64rem;
font-weight: bold;
line-height: 1.37;
letter-spacing: 0.05em;
color: #fff;
}
}
@media screen and (max-width: 769px) {
.p-features__spText {
margin-top: 30.4px;
font-size: 1.29rem;
font-weight: 500;
letter-spacing: 0.025em;
line-height: 1.77;
color: #fff;
}
}
.p-features__spDl {
margin-top: 53.3px;
padding-bottom: 51px;
}
.p-features__spDlTextArea--mt {
margin-top: 24px;
}
.p-features__spDlTextInner {
border: 1px solid #00a29a;
padding: 18.85px 117px 21.1px 21.1px;
}
.p-features__spDt {
font-size: 1rem;
color: #00a29a;
font-weight: 500;
line-height: 1.733;
letter-spacing: 0.025em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.p-features__spDtSpan {
font-size: 1.465rem;
font-family: "Oxanium", sans-serif;
font-weight: 500;
line-height: 1;
letter-spacing: normal;
position: relative;
}
.p-features__spDtSpan::before, .p-features__spDtSpan::after {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-color: #00a29a;
}
.p-features__spDtSpan::before {
left: -14px;
width: 9px;
height: 1px;
}
.p-features__spDtSpan::after {
left: -10px;
width: 1px;
height: 9px;
}
.p-features__spDd {
font-size: 1.2rem;
font-weight: 500;
line-height: 1.8;
letter-spacing: 0.025em;
color: #fff;
}
.p-featuresSwiper__bgImg {
width: 100%;
/*20231114 fix !imp追加*/
height: 100vh !important;
-o-object-fit: cover;
object-fit: cover;
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__bgImg {
min-height: 640px;
height: auto;
}
}
.p-featuresSwiper__thumbnailWrap {
position: relative;
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__thumbnailWrap::after {
content: "";
position: absolute;
top: -66px;
left: 20px;
width: 15px;
height: 22px;
background: url(../images/sense_m/icon/arrow_left.png) no-repeat center center/contain;
z-index: 2;
}
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__thumbnailWrap::before {
content: "";
position: absolute;
top: -66px;
right: 20px;
width: 15px;
height: 22px;
background: url(../images/sense_m/icon/arrow_right.png) no-repeat center center/contain;
z-index: 2;
}
}
.p-featuresSwiper__thumbnail {
width: 88%;
margin: -66px auto 0;
position: relative;
overflow: hidden;
padding-bottom: 41px;
}
.p-featuresSwiper__thumbnailItem {
text-align: center;
position: relative;
z-index: 10;
cursor: pointer;
}
.p-featuresSwiper__itemBtn {
display: inline-block;
font-size: 2.1rem;
font-family: "Oxanium", sans-serif;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1;
color: #00a29a;
opacity: 0.7;
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__itemBtn {
font-size: 1.5rem;
}
}
.p-featuresSwiper__itemBtn--left {
position: relative;
}
.p-featuresSwiper__itemBtn--left::before {
content: "";
position: absolute;
top: 50%;
left: -21px;
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
width: 15px;
height: 22px;
background: url(../images/sense_m/icon/arrow_left.png) no-repeat center center/contain;
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__itemBtn--left::before {
display: none;
}
}
.p-featuresSwiper__itemBtn--right {
position: relative;
}
.p-featuresSwiper__itemBtn--right::before {
content: "";
position: absolute;
top: 50%;
right: -21px;
-webkit-transform: translateY(-55%);
transform: translateY(-55%);
width: 15px;
height: 22px;
background: url(../images/sense_m/icon/arrow_right.png) no-repeat center center/contain;
}
@media screen and (max-width: 769px) {
.p-featuresSwiper__itemBtn--right::before {
display: none;
}
}
.p-featuresSwiper__itemBtn:focus {
opacity: 1;
}
.p-features2 {
position: relative;
}
.p-features2__bgWrap {
background: url(../images/sense_m/pc/features_bg2_pc.jpg) no-repeat center center/cover;
position: relative;
}
.p-features2__bgWrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.p-features2__inner {
padding-top: 10px;
}
.p-features2__col {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-top: 41px;
gap: 94px;
}
.p-features2__col--reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.p-features2__col--mtLarge64 {
margin-top: 64px;
}
.p-features2__col--mtLarge72 {
margin-top: 72px;
}
.p-features2__col--gapLarge72 {
gap: 72px;
}
.p-features2__col--gapLarge120 {
gap: 120px;
}
@media screen and (max-width: 990px) {
.p-features2__col {
gap: 30px;
}
}
@media screen and (max-width: 769px) {
.p-features2__col {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
margin-top: 30px;
gap: 0;
}
}
.p-features2__colImgArea {
width: 50%;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
z-index:1;
}
@media screen and (max-width: 769px) {
.p-features2__colImgArea {
width: 100%;
margin-top: 24px;
}
}
.p-features2__colTextArea {
max-width: 460px;
z-index:1;
}
@media screen and (max-width: 990px) {
.p-features2__colTextArea {
max-width: 50%;
}
}
@media screen and (max-width: 769px) {
.p-features2__colTextArea {
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
.p-features2__colTitle {
font-size: 4rem;
font-family: "Oxanium", sans-serif;
font-weight: 500;
line-height: 2.575;
color: #00a29a;
text-shadow: 0px 0px 15px #00a29a;
margin-top: 34px;
z-index:1;
}
.p-features2__colTitle--mtLarge46 {
margin-top: 46px;
}
.p-features2__colTitle--mtSmall7 {
margin-top: 7px;
}
@media screen and (max-width: 769px) {
.p-features2__colTitle {
font-size: 2.5rem;
line-height: 2.45;
margin-top: 0;
}
}
.p-features2__colTitleSpan {
margin-left: 10px;
}
@media screen and (max-width: 769px) {
.p-features2__colTitleSpan {
margin-left: 0;
font-size: 3.6rem;
}
}
.p-features2__colSubTitle {
margin-top: 30px;
font-size: 3.4rem;
font-weight: bold;
line-height: 1.47;
letter-spacing: 0.025em;
color: #fff;
z-index:1;
}
@media screen and (max-width: 769px) {
.p-features2__colSubTitle {
font-size: 2.63rem;
line-height: 1.4;
letter-spacing: 0.05em;
text-align: center;
margin-top: 0;
}
}
.p-features2__colSubTitle--mtSmall0 {
margin-top: 0;
}
.p-features2__colSubTitle--mtSmall7 {
margin-top: 7px;
}
.p-features2__colText {
margin-top: 32px;
font-size: 1.8rem;
font-weight: 500;
line-height: 1.89;
letter-spacing: 0.025em;
color: #fff;
}
@media screen and (max-width: 769px) {
.p-features2__colText {
font-size: 1.4rem;
line-height: 1.772;
letter-spacing: 0.025em;
margin-top: 27px;
}
}
.p-features2__colText--mtSmall {
margin-top: 15px;
}
.p-features2__colText--mtLarge65 {
margin-top: 65px;
}
.p-features2__colDlArea {
margin-top: 57px;
}
.p-features2__colDlArea--pb {
padding-bottom: 77px;
}
@media screen and (max-width: 769px) {
.p-features2__colDlArea {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
margin-top: 32px;
padding-bottom: 35px;
}
}
.p-features2__colDl {
padding: 40px 40px 36px 36px;
border: 1px solid #00a29a;
}
@media screen and (max-width: 769px) {
.p-features2__colDl {
padding: 30px 40px 46px 48px;
}
}
@media screen and (max-width: 600px) {
.p-features2__colDl {
padding: 17.6px 23.44px 27px 28px;
}
}
.p-features2__colDlTextArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.p-features2__colDlTextArea--mtLarge38 {
margin-top: 38px;
}
@media screen and (max-width: 769px) {
.p-features2__colDlTextArea--mt20 {
margin-top: 20px;
}
}
@media screen and (max-width: 600px) {
.p-features2__colDlTextArea--mt20 {
margin-top: 22px;
}
}
.p-features2__colDt {
font-size: 2rem;
font-family: "Oxanium", sans-serif;
line-height: 1.2;
letter-spacing: 0.02em;
color: #00a29a;
position: relative;
}
@media screen and (max-width: 769px) {
.p-features2__colDt {
font-size: 2.5rem;
}
}
@media screen and (max-width: 600px) {
.p-features2__colDt {
font-size: 1.5rem;
line-height: 1;
letter-spacing: 0.028em;
}
}
.p-features2__colDt::before, .p-features2__colDt::after {
content: "";
display: block;
background: #00a29a;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.p-features2__colDt::before {
width: 15px;
height: 1px;
top: 50%;
left: -22px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.p-features2__colDt::after {
width: 1px;
height: 14px;
left: -15px;
}
.p-features2__colDd {
font-size: 1.5rem;
font-weight: 500;
line-height: 2;
color: #fff;
margin-top: 8px;
}
@media screen and (max-width: 769px) {
.p-features2__colDd {
font-size: 2rem;
line-height: 1.8;
letter-spacing: 0.025em;
margin-top: 0;
}
}
@media screen and (max-width: 600px) {
.p-features2__colDd {
font-size: 1.2rem;
margin-top: 3px;
}
}
.p-features2__colDlSpan {
font-size: 1.2rem;
line-height: 2;
color: #fff;
display: block;
margin-top: 21px;
}
@media screen and (max-width: 769px) {
.p-features2__colDlSpan {
margin-top: 43px;
font-size: 2rem;
line-height: 1.8;
}
}
@media screen and (max-width: 600px) {
.p-features2__colDlSpan {
margin-top: 21px;
font-size: 1.2rem;
}
}
.p-features5 {
background-color: #000;
}
@media screen and (max-width: 769px) {
.p-features5 {
padding-top: 72px;
padding-bottom: 118px;
-webkit-box-shadow: 0 -10px 17px #000;
box-shadow: 0 -10px 17px #000;
background-color: transparent;
background: url("../images/sense_m/sp/features5_mask.jpg") center/cover no-repeat;
}
}
@media screen and (max-width: 600px) {
.p-features5 {
padding-top: 42px;
padding-bottom: 67px;
}
}
.p-features5__wrap {
position: relative;
/*20231114 非表示*/
/*height: 56.25vw;*/
}
@media screen and (max-width: 1200px) {
.p-features5__wrap {
height: 675px;
}
}
@media screen and (max-width: 769px) {
.p-features5__wrap {
height: auto;
}
}
@media screen and (max-width: 769px) {
.p-features5__tabBox {
margin-top: 60px;
}
}
@media screen and (max-width: 600px) {
.p-features5__tabBox {
margin-top: 34px;
}
}
.p-cart {
padding-bottom: 70px;
}
@media screen and (max-width: 769px) {
.p-cart {
padding-bottom: 100px;
}
}
@media screen and (max-width: 600px) {
.p-cart {
padding-bottom: 58.6px;
}
}
.p-cart__box, .p-cart__box--mTopNone {
overflow: hidden;
margin-top: 50px;
}
@media screen and (max-width: 769px) {
.p-cart__box, .p-cart__box--mTopNone {
margin-top: 40px;
}
}
.p-cart__box--mTopNone {
margin-top: 0px;
}
.p-cart__boxHeading {
font-size: 2rem;
font-weight: bold;
line-height: 1.2;
letter-spacing: 0.05em;
color: #fff;
background-color: #202020;
padding: 18px 22px;
border-left: 4px solid;
-o-border-image: linear-gradient(90deg, #00A199, #00E67E) 1;
border-image: -webkit-gradient(linear, left top, right top, from(#00A199), to(#00E67E)) 1;
border-image: linear-gradient(90deg, #00A199, #00E67E) 1;
}
.p-cart__slideWrap {
margin-top: 30px;
padding: 0 20px;
}
.p-cart__boxItemLink {
display: block;
}
@media screen and (max-width: 769px) {
.p-cart__boxItemLink {
max-width: 100%;
}
}
.p-cart__boxRec {
font-size: 1.1rem;
font-weight: bold;
line-height: 1.18;
letter-spacing: 0.05em;
color: #dd0033;
background-color: #ffedf1;
padding: 22px 10px;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.p-cart__boxImgArea {
position: relative;
width: 100%;
min-height: 190px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-cart__boxImg {
width: 90%;
height: auto;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
aspect-ratio: 616/378;
position: relative;
}
.p-cart__boxImgSpan {
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 50px;
font-size: 1.1rem;
font-weight: bold;
z-index: 10;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
padding-top: 26px;
text-align: center;
color: #dd0033;
}
.p-cart__boxImgSpan--bgRed {
color: #fff;
}
.p-cart__boxImgSpan--bgRed::before {
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, #f21aa6), to(#a0061a)) !important;
background: linear-gradient(180deg, #f21aa6 40%, #a0061a) !important;
}
.p-cart__boxImgSpan::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);
clip-path: polygon(0 0, 0 100%, 100% 100%);
background: -webkit-gradient(linear, left top, left bottom, from(#fffc37), to(#ffd030));
background: linear-gradient(180deg, #fffc37, #ffd030);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.p-cart__boxNam {
font-size: 1.1rem;
margin-right: 5px;
line-height: 1.4;
margin-top: 14px;
text-align: center;
}
.p-cart__boxNamSpan {
background-color: #332222;
padding: 1px 4px;
color: #fff;
}
.p-cart__boxText {
font-size: 1.2rem;
line-height: 19px;
font-weight: 600;
margin-top: 6px;
}
.p-cart__boxTagArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.p-cart__boxTag {
margin-right: 5px;
padding: 5px 3px;
border: 1px solid #cba924;
background-color: #fbf0c9;
letter-spacing: 0.02em;
font-size: 1rem;
font-weight: bold;
margin-top: 7px;
width: 33.33%;
text-align: center;
color: #dd0033;
}
.p-cart__boxPrice {
font-size: 1.8rem;
font-weight: bold;
line-height: 1.2;
color: #dd0033;
margin-top: 27px;
}
.p-cart__boxPriceSpan {
font-size: 1rem;
margin-left: 3px;
}
.p-cart__boxTag2Area {
margin-top: 16px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
}
.p-cart__boxTag2Area::before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 35px;
height: 35px;
background: url(../images/sense_m/icon/icon.jpg) no-repeat center center/contain;
}
.p-cart__boxTag2Text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #00a29a;
background-color: #fff;
border: 1px solid;
-o-border-image: linear-gradient(180deg, #00a29a, #24df84) 1;
border-image: -webkit-gradient(linear, left top, left bottom, from(#00a29a), to(#24df84)) 1;
border-image: linear-gradient(180deg, #00a29a, #24df84) 1;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 1rem;
font-weight: 500;
line-height: 1;
min-width: 35px;
padding: 1px 4px;
margin-right: 3px;
}
.p-cart__boxTag2Text--bgGreen {
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#00a29a), to(#24df84));
background: linear-gradient(180deg, #00a29a, #24df84);
}
.p-cart__boxTag2TextSpanS {
font-size: 1rem;
}
.p-cart__boxTag2TextSpanM {
font-size: 1.2rem;
}
.p-cart__boxTag2TextSpanL {
font-size: 1.6rem;
}
.p-cart__boxMetaArea {
width: 100%;
}
.p-cart__boxMeta {
display: inline-block;
text-align: justify;
font-weight: 500;
word-break: break-all;
}
.p-cartSwiper {
width: 100%;
position: relative;
overflow: hidden;
}
.p-cartSwiper__boxList {
padding-bottom: 62px;
}
.p-cartSwiper .swiper-button-prev.swiper-button-disabled,
.p-cartSwiper .swiper-button-next.swiper-button-disabled {
display: none;
}
.p-cartSwiper .swiper-button-next {
width: 34px;
height: 166px;
background: rgba(255, 255, 255, 0.9);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
right: 0;
}
.p-cartSwiper .swiper-button-next::after {
content: "";
display: inline-block;
background: url("../images/sense_m/pc/icon_arrow_right_block.svg") center/contain no-repeat;
width: 10px;
height: 16px;
}
.p-cartSwiper .swiper-button-prev {
width: 34px;
height: 166px;
background: rgba(255, 255, 255, 0.9);
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
}
.p-cartSwiper .swiper-button-prev::after {
content: "";
display: inline-block;
background: url("../images/sense_m/pc/icon_arrow_right_block.svg") center/contain no-repeat;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
width: 10px;
height: 16px;
}
/* swiperライブラリ上書き */
/* swiper内のバレット位置をデフォルト値から下へ */
.swiper-pagination-bullets.swiper-pagination-horizontal {
bottom: 0;
}
/* ページネーションの余白 */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 10px 10px;
}
/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
background-color: #4a4a4a;
height: 10px;
width: 10px;
}
.p-info {
background: -webkit-gradient(linear, left top, left bottom, from(#07000C), color-stop(70%, #480075), to(#06000A));
background: linear-gradient(180deg, #07000C 0%, #480075 70%, #06000A 100%);
/* 20231114 fix imp追加*/
padding: 115px 0 30px!important;
}
@media screen and (max-width: 769px) {
.p-info {
background: #000;
padding: 72px 0 30px;
}
}
.p-info__title {
font-size: 6rem;
font-family: "Oxanium", sans-serif;
font-weight: 500;
line-height: 1.183;
letter-spacing: 0.05em;
color: #fff;
text-shadow: 0px 0px 20px #00a29a, 0px 0px 20px #00a29a;
text-align: center;
}
@media screen and (max-width: 769px) {
.p-info__title {
font-size: 4.1rem;
}
}
.p-info__subTitle {
font-size: 3.4rem;
font-weight: bold;
line-height: 1.14;
letter-spacing: 0.025em;
color: #fff;
text-align: center;
margin-top: 42px;
}
@media screen and (max-width: 769px) {
.p-info__subTitle {
font-size: 2rem;
margin-top: 10px;
}
}
.p-info__cardList {
max-width: 1084px;
width: 100%;
margin: 37px auto 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 12px 1fr 12px 1fr 12px 1fr;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media screen and (max-width: 769px) {
.p-info__cardList {
-ms-grid-columns: (minmax(166px, 1fr))[2];
grid-template-columns: repeat(2, minmax(166px, 1fr));
margin-top: 28px;
}
}
.p-info__cardItem {
background-color: #003b38;
position: relative;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
min-height: 396px;
}
@media screen and (max-width: 769px) {
.p-info__cardItem {
min-height: 293px;
}
}
.p-info__cardItemLink {
padding: 20px 21px 37px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: relative;
height: 100%;
}
@media screen and (max-width: 769px) {
.p-info__cardItemLink {
padding: 20px 17px 37px;
}
}
@media screen and (max-width: 600px) {
.p-info__cardItemLink {
padding: 12px 10px 26px;
}
}
.p-info__cardItemLink::before {
content: "";
-webkit-transition: all 0.23s ease;
transition: all 0.23s ease;
}
.p-info__cardItemLink:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
}
.p-info__cardItemLink:hover .p-info__cardItemImg {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.p-info__cardItemImgArea {
overflow: hidden;
}
.p-info__cardItemImg {
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
}
.p-info__cardItemText {
font-size: 1.6rem;
font-weight: 400;
line-height: 1.63;
letter-spacing: 0.063em;
color: #fff;
text-decoration: underline;
text-align: justify;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin-top: 13px;
}
@media screen and (max-width: 769px) {
.p-info__cardItemText {
font-size: 1.3rem;
line-height: 1.77;
margin-top: 10px;
}
}
.p-info__cardItemMeta {
font-size: 1.3rem;
font-weight: 400;
line-height: 1.23;
color: #fff;
position: absolute;
bottom: 20px;
left: 21px;
}
@media screen and (max-width: 769px) {
.p-info__cardItemMeta {
font-size: 1rem;
bottom: 12px;
left: 10px;
}
}
.p-info__snsArea {
margin-top: 150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
@media screen and (max-width: 769px) {
.p-info__snsArea {
display: none;
}
}
.p-info__snsText {
font-size: 1.1rem;
font-family: 500px;
line-height: 1.63;
color: #fff;
}
.p-info__snsList {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
}
.p-info__snsItemLink {
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.p-info__snsItemLink:hover {
opacity: 0.7;
}
.u-display__none--PO {
display: none;
}
@media screen and (max-width: 769px) {
.u-display__none--PO {
display: block;
}
}
.u-display__none--PU {
display: block;
}
@media screen and (max-width: 769px) {
.u-display__none--PU {
display: none;
}
}
.u-display__flex--PO {
display: none;
}
@media screen and (max-width: 769px) {
.u-display__flex--PO {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
.u-display__flex--PU {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media screen and (max-width: 769px) {
.u-display__flex--PU {
display: none;
}
}
/** add 20231110 **/
body,#container{
background-color: #000000;
}
.p-mclass__container {
width: 100%;
max-width: 1240px;
padding-right: 20px;
padding-left: 20px;
margin-left: auto;
margin-right: auto;
}
.p-mclass-pankuzu {
position: absolute;
top: 30px;
right: 0;
left: 0;
font-size: 11px;
font-size: 1.1rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
z-index:2;
}
.p-mclass-pankuzu a {
padding-right: 2em;
position: relative;
color: #FFF;
}
.p-mclass-pankuzu a::after {
content: "";
width: 0.707em;
height: 0.707em;
border-top: 2px solid #FFF;
border-right: 2px solid #FFF;
position: absolute;
bottom: 0.1em;
right: 0.5em;
transform: rotate(45deg) translateX(-50%);
}
.p-mclass-pankuzu strong {
color: #00a29a;
}
.p-info__snsItem img{
width: 46px;
aspect-ratio: auto 46 / 46;
}
#footer-top .sns_link_area a{
display: inline-block;
}
@media screen and (max-width: 768px) {
main{
position: relative;
}
h1.p-mv__boxHeading{
line-height:1.2 !important;
}
.p-mclass-pankuzu {
font-size: 1.0rem;
}
.p-mclass-pankuzu a::after {
width: 0.5em;
height: 0.5em;
border-top-width: 1px;
border-right-width: 1px;
bottom: 0.2em;
}
}
/*20231114 add*/
div#lineup {
background: #fff !important;
}
/*20231124 add*/
img.p-mv__snsItemImg {
width: 17px;
}
/*intel*/
div.intel_model{
width:1200px;
margin:auto;
}
div.intel_model .row .columns {
float: left;
clear: none;
margin-bottom: 8px;
padding: 0 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.intel_model .row .columns.img-left {
width: 25%;
}
div.intel_model .row .columns.textarea-right {
width: 75%;
padding-top:15px;
}
div.intel_model .row .columns.textarea-right p.copyrights {
font-size: 80%;
color: #4c4c4c;
margin: 8px auto;
line-height:130%;
}
div.intel_model div.row::after {
content: "";
display: block;
clear: both;
}
@media all and (max-width: 767px) {
div.intel_model{
width:90%;
margin:auto;
}
div.intel_model .row .columns.img-left,
div.intel_model .row .columns.textarea-right
{
width: 100%;
}
div.intel_model .row .columns.img-left{
text-align:center;
}
div.intel_model .row .columns {
padding: 0 10px;
}
div.intel_model .row .columns p
{
padding: 0 5px;
}
}
/* F-Class
------------------------------------------------------------ */
span.p-mclass_subtitle {
color: #fff;
font-size: 0.6em;
}
.p-mclass-rclass {
background-image: url("https://www.pc-koubou.jp/wp/wp-content/uploads/2025/04/sense_mclass_fclass_bg-1.jpg");
}
.p-mclass-rclass__container {
justify-content: center;
min-height: 600px;
}
.p-mclass-rclass-contents {
max-width: 600px;
/* margin-left: auto; */
}
.p-mclass-rclass-contents__heading {
color: #00a29a;
font-size: 86px;
font-size: 7rem;
line-height: 1;
white-space: nowrap;
margin-bottom: 30px;
font-family: "Oxanium", sans-serif;
font-weight: 300;
letter-spacing: 0.08em;
margin-top: 20px;
position: relative;
}
.p-mclass-rclass-contents__heading span {
letter-spacing: 0.05em;
}
.p-mclass-rclass-contents__text {
margin-top: 10px;
font-size: 20px;
font-size: 3.5rem;
font-weight: 500;
line-height: 2;
letter-spacing: 0.025em;
color: #ffffff;
font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
}
.p-mclass-rclass-contents__btn-wrap {
max-width: 380px;
margin-top: 30px;
}
@media screen and (max-width: 1920px) {
.p-mclass-rclass {
/*background-position: center top calc(50% - 150px);*/
}
}
@media screen and (max-width: 767px) {
.p-mclass-rclass {
background: none;
background:#000;
}
.p-mclass-rclass__container {
justify-content: flex-start;
padding-top: 35px;
padding-bottom: 0;
}
.p-mclass-rclass-contents {
max-width: inherit;
margin-bottom: 15px;
}
.p-mclass-rclass-contents__heading {
font-size: 60px;
font-size: 6rem;
}
.p-mclass-rclass-contents__text {
margin-top: 5px;
font-size: 14px;
font-size: 2.3rem;
}
.p-mclass-rclass-contents__btn-wrap {
max-width: 260px;
margin: 25px auto 0;
}
.p-mclass-rclass__image {
margin: 0 -20px;
}
}
.p-mclass__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 40px 10px 20px;
position: relative;
background: #00a29a;
text-align: center;
font-size: 18px;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: 0.05em;
transition: 0.3s;
}
@media screen and (max-width: 768px){
.p-mclass__btn {
font-size: 1.4rem;
}}
.p-mclass__btn img {
position: absolute;
top: 0;
right: 15px;
bottom: 0;
margin: auto;
transition: 0.3s;
}
.p-mclass__btn img.is-on {
opacity: 0;
}
.p-mclass__btn:hover {
box-shadow: 0 0 20px #00a29a;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.p-mclass__btn:hover img.is-off {
opacity: 0;
}
.p-mclass__btn:hover img.is-on {
opacity: 1;
}
.p-mclass__btn i {
margin-right: 0.75em;
font-size: 1.5em;
}
.p-mclass__btn .is-icon {
width: 31px;
height: 25px;
position: relative;
margin-right: 0.75em;
}
.p-mclass__btn .is-icon.is-twitter img {
width: 25px;
}
.p-mclass__btn .is-icon.is-youtube img {
width: 31px;
}
.p-mclass__btn .is-icon.is-twitch img {
width: 21px;
}
.p-mclass__btn .is-icon img {
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.p-mclass-rclass-contents__heading::after {
content: "";
position: absolute;
background-image: url(https://www.pc-koubou.jp/wp/wp-content/uploads/2025/04/sense_fclass_mv_border.png);
top: 55%;
left: -16%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
.p-mclass-rclass-contents__heading::after {
top: 50%;
left: -30%;
}}
@media screen and (max-width: 767px) {
.pc-none {
display: block !important;
}
}
/*btn*/
.page-link.round {
text-align:center;
}
.page-link.round a{
padding: 12px 40px !important;
display: inline-block;
margin: auto;
font-family: inherit;
position: relative;
background-image: none !important;
background-color: #fff !important;
color: #000 !important;
border: 1px solid #afb2b3;
font-size: 16px !important;
font-weight: bold !important;
line-height: 18px;
border-radius: 22px !important;
margin-top: 10px;
transition: all .4s ease;
}
.page-link.round a:hover {
background-color: #000000 !important;
color: #fff !important;
text-decoration: none !important;
}
.page-link.round a:hover:after {
background: none;
border-top: solid 2px #fff;
border-right: solid 2px #fff;
}
.page-link.round a:after {
content: '';
width: 10px !important;
height: 10px !important;
border: 0;
border-top: solid 2px #000;
border-right: solid 2px #000;
position: absolute;
top: 50%;
right: 20px;
margin-top: -5px;
transform: rotate(45deg);
background-image: none !important;
transition: all .4s ease;
}
@media screen and (max-width: 767px) {
.page-link.round a{
padding: 6px 28px !important;
font-size: 13px !important;
line-height: 16px;
}
.page-link.round a:after {
width: 8px !important;
height: 8px !important;
top: 54%;
right: 13px;
margin-top: -6px;
}
}
/*btn*/