/* -----
base
----- */
/* 譌｢蟄呂SS縺ｮ繧ｪ繝ｼ繝舌�繝ｩ繧､繝� */
.m_underLayer{
padding: 0;
}
/***
The new CSS reset - version 1.7.3 (last updated 7.8.2022)
GitHub page: https://github.com/elad2412/the-new-css-reset.lineup_cont_card:nth-of-type(n+2) .lineup_cont_card_img
***/
.l_main *,
.l_main *::before,
.l_main *::after {
box-sizing: border-box;
}
a, button {
cursor: revert;
}
ol, ul, menu {
list-style: none;
}
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;
}
/* 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;
}
/* 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;
}
a:hover {
color: unset;
text-decoration: none;
}
/* Settings
=====================================================*/
:root {
/* Contents */
--cont-width: 1220px;
/* Color */
--color-main: #D54A00;
--color-sub: #384CA3;
--color-border: #E0E0E0;
--color-bg: #F8F8F8;
--color-text: #23221F;
--color-hover: #bbb;
--color-reverse: #fff;
/* Text */
--fz-main: 1.5rem;
--line-height: 1.75;
/* Other */
--opacity: 0.7;
--transition: .3s;
}
/*============================================================================================
Initialize
=============================================================================================*/
/* html, body
=====================================================*/
html {
font-size: 10px;
}
@media (max-width: 768px) {
}
/* a
=====================================================*/
.l_main a {
color: inherit;
text-decoration: inherit;
font-size: inherit;
text-align: inherit;
}
/* img
=====================================================*/
.l_main img {
line-height: 0;
max-width: 100%;
height: auto;
}
/* button
=====================================================*/
.l_main button {
font-size: inherit;
font-family: inherit;
border: none;
padding: 0;
cursor: pointer;
background-color: transparent;
}
.l_main button:focus {
outline: none;
}
/* Form parts
=====================================================*/
input[type="text"],
select,
textarea {
color: inherit;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
border-radius: 0;
}
input[type="submit"],
input[type="button"],
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font: inherit;
outline: none;
}
input,
select {
line-height: 1;
}
select {
color: inherit;
}
textarea {
resize: vertical;
}
input[type="submit"],
input[type="button"],
input[type="radio"],
input[type="checkbox"],
label,
button,
select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: var(--color-border);
}
::-moz-placeholder {
/* Others */
color: var(--color-border);
}
:-ms-input-placeholder {
/* Others */
color: var(--color-border);
}
::-ms-input-placeholder {
/* Others */
color: var(--color-border);
}
::placeholder {
/* Others */
color: var(--color-border);
}
@media (max-width: 768px) {
/* iOS縺ｧ繧ｿ繝��譎ゅ�繧ｺ繝ｼ繝�繧帝亟縺� */
input,
button,
select,
textarea {
font-size: 1.6rem;
}
}
/* Superscript
=====================================================*/
sup {
vertical-align: super;
font-size: smaller;
}
/* word wrap
=====================================================*/
* {
word-wrap: break-word;
}
/* figure
=====================================================*/
figure {
margin-bottom: 0 !important;
}
/*============================================================================================
Utility
=============================================================================================*/
/* Display
=====================================================*/
.u_tbl {
display: none !important;
}
.u_sp {
display: none !important;
}
.u_pc {
display: block !important;
}
.u_pc.u_inlineB {
display: inline-block !important;
}
.u_pc.u_inline {
display: inline !important;
}
@media (max-width: 768px) {
.u_pc {
display: none !important;
}
.u_sp {
display: none !important;
}
.u_tbl {
display: block !important;
}
.u_tbl.u_pc {
display: block !important;
}
.u_pc.u_inlineB {
display: none !important;
}
.u_tbl.u_inlineB {
display: inline-block !important;
}
.u_tbl.u_pc.u_inlineB {
display: inline-block !important;
}
.u_pc.u_inline {
display: none !important;
}
.u_tbl.u_inline {
display: inline !important;
}
.u_tbl.u_pc.u_inline {
display: inline !important;
}
.u_sp.u_tbl {
display: block !important;
}
.u_sp.u_tbl.u_inlineB {
display: inline-block !important;
}
.u_sp.u_tbl.u_inline {
display: inline !important;
}
}
/*-- SP --*/
@media (max-width: 599px) {
.u_pc {
display: none !important;
}
.u_tbl {
display: none !important;
}
.u_sp {
display: block !important;
}
.u_tbl.u_pc {
display: none !important;
}
.u_sp.u_tbl {
display: block !important;
}
.u_sp.u_inlineB {
display: inline-block !important;
}
.u_sp.u_tbl.u_inlineB {
display: inline-block !important;
}
.u_sp.u_inline {
display: inline !important;
}
.u_sp.u_tbl.u_inline {
display: inline !important;
}
}
/* Contents
=====================================================*/
/*-- Images --*/
.u_img,
.u_img_def {
display: block;
line-height: 0;
}
.u_img img {
display: block;
width: 100%;
margin: 0 auto;
}
.u_img video {
display: block;
width: 100%;
margin: 0 auto;
}
.u_img_def img {
display: block;
margin: 0 auto;
}
.u_img figcaption,
.u_img_def figcaption {
line-height: var(--line-height);
}
/*-- Icon --*/
.u_ic {
position: relative;
}
.u_ic::before,
.u_ic::after {
content: "";
margin: auto;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
position: absolute;
pointer-events: none;
}
/* pattern background */
.u_bg {
background-repeat: repeat;
background-position: left top;
background-size: auto;
}
/*-- Text Indent --*/
.u_indent {
text-indent: -1em;
padding-left: 1em;
}
.u_indent_2 {
text-indent: -2em;
padding-left: 2em;
}
/*-- Text Align --*/
.u_alignC {
text-align: center;
}
.u_alignL {
text-align: left;
}
.u_alignR {
text-align: right;
}
/*-- md --*/
@media (max-width: 768px) {
.u_alignC_md {
text-align: center;
}
.u_alignL_md {
text-align: left;
}
.u_alignR_md {
text-align: right;
}
}
/*-- Font Size --*/
.u_fz50 {
font-size: 5rem;
}
.u_fz40 {
font-size: 4rem;
}
.u_fz38 {
font-size: 3.8rem;
}
.u_fz36 {
font-size: 3.6rem;
}
.u_fz34 {
font-size: 3.4rem;
}
.u_fz32 {
font-size: 3.2rem;
}
.u_fz30 {
font-size: 3rem;
}
.u_fz28 {
font-size: 2.8rem;
}
.u_fz26 {
font-size: 2.6rem;
}
.u_fz24 {
font-size: 2.4rem;
}
.u_fz22 {
font-size: 2.2rem;
}
.u_fz20 {
font-size: 2rem;
}
.u_fz18 {
font-size: 1.8rem;
}
.u_fz17 {
font-size: 1.7rem;
}
.u_fz16 {
font-size: 1.6rem;
}
.u_fz15 {
font-size: 1.5rem;
}
.u_fz14 {
font-size: 1.4rem;
}
.u_fz13 {
font-size: 1.3rem;
}
.u_fz12 {
font-size: 1.2rem;
}
.u_fz11 {
font-size: 1.1rem;
}
.u_fz10 {
font-size: 1rem;
}
@media (max-width: 768px) {
.u_fz32_md {
font-size: 3.2rem;
}
.u_fz30_md {
font-size: 3rem;
}
.u_fz28_md {
font-size: 2.8rem;
}
.u_fz26_md {
font-size: 2.6rem;
}
.u_fz24_md {
font-size: 2.4rem;
}
.u_fz22_md {
font-size: 2.2rem;
}
.u_fz20_md {
font-size: 2rem;
}
.u_fz18_md {
font-size: 1.8rem;
}
.u_fz16_md {
font-size: 1.6rem;
}
.u_fz15_md {
font-size: 1.5rem;
}
.u_fz14_md {
font-size: 1.4rem;
}
.u_fz13_md {
font-size: 1.3rem;
}
.u_fz12_md {
font-size: 1.2rem;
}
.u_fz11_md {
font-size: 1.1rem;
}
.u_fz10_md {
font-size: 1rem;
}
}
/*-- Font Weight --*/
.u_black {
font-weight: 900;
}
.u_bold {
font-weight: 700;
}
.u_semibold {
font-weight: 600;
}
.u_medium {
font-weight: 500;
}
.u_regular {
font-weight: 400;
}
.u_light {
font-weight: 300;
}
.u_exlight {
font-weight: 200;
}
.u_thin {
font-weight: 100;
}
/*-- Text Transform --*/
.u_tt_up {
text-transform: uppercase;
}
.u_tt_low {
text-transform: lowercase;
}
/*-- Scroll prevent --*/
.u_scrollPrevent {
overflow: hidden;
}
/*============================================================================================
Layout
=============================================================================================*/
/* Wrapper
=====================================================*/
.l_wrapper{
display: block;
width: 100%;
}
.l_main{
width: auto;
margin-inline: auto;
padding: 0;
}
.l_wrap {
width: var(--cont-width);
margin: auto;
}
.l_wrap__md {
width: 992px;
margin: auto;
}
/* Medium devices (tablets, 768px and under) */
@media (max-width: 768px) {
.l_wrap {
width: 95%;
margin-inline: auto;
}
.l_wrap__md {
width: 100%;
}
}
/* Small devices (landscape phones, 576px and under) */
@media (max-width: 576px) {
.l_wrap_inr {
}
}
/* Grid
=====================================================*/
.l_grid {
display: -ms-grid;
display: grid;
}
.l_grid_1 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.l_grid_2 {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
.l_grid_3 {
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
}
.l_grid_4 {
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
}
.l_grid_5 {
-ms-grid-columns: (1fr) [5];
grid-template-columns: repeat(5, 1fr);
}
.l_grid_6 {
-ms-grid-columns: (1fr) [6];
grid-template-columns: repeat(6, 1fr);
}
.l_subgrid {
display: -ms-grid;
display: grid;
-ms-grid-rows: subgrid;
grid-template-rows: subgrid;
}
.l_subgrid_1 {
-ms-grid-row-span: 1;
grid-row: span 1;
}
.l_subgrid_2 {
-ms-grid-row-span: 2;
grid-row: span 2;
}
.l_subgrid_3 {
-ms-grid-row-span: 3;
grid-row: span 3;
}
.l_subgrid_4 {
-ms-grid-row-span: 4;
grid-row: span 4;
}
.l_subgrid_5 {
-ms-grid-row-span: 5;
grid-row: span 5;
}
.l_subgrid_6 {
-ms-grid-row-span: 6;
grid-row: span 6;
}
@media (max-width: 768px) {
.l_grid_md {
display: -ms-grid;
display: grid;
}
.l_grid_md_1 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.l_grid_md_2 {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
.l_grid_md_3 {
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
}
.l_grid_md_4 {
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
}
.l_grid_md_5 {
-ms-grid-columns: (1fr) [5];
grid-template-columns: repeat(5, 1fr);
}
.l_grid_md_6 {
-ms-grid-columns: (1fr) [6];
grid-template-columns: repeat(6, 1fr);
}
.l_subgrid_md {
display: -ms-grid;
display: grid;
-ms-grid-rows: subgrid;
grid-template-rows: subgrid;
}
.l_subgrid_md_1 {
-ms-grid-row-span: 1;
grid-row: span 1;
}
.l_subgrid_md_2 {
-ms-grid-row-span: 2;
grid-row: span 2;
}
.l_subgrid_md_3 {
-ms-grid-row-span: 3;
grid-row: span 3;
}
.l_subgrid_md_4 {
-ms-grid-row-span: 4;
grid-row: span 4;
}
.l_subgrid_md_5 {
-ms-grid-row-span: 5;
grid-row: span 5;
}
.l_subgrid_md_6 {
-ms-grid-row-span: 6;
grid-row: span 6;
}
}
@media (max-width: 599px) {
.l_grid_sm {
display: -ms-grid;
display: grid;
}
.l_grid_sm_1 {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}
.l_grid_sm_2 {
-ms-grid-columns: (1fr) [2];
grid-template-columns: repeat(2, 1fr);
}
.l_grid_sm_3 {
-ms-grid-columns: (1fr) [3];
grid-template-columns: repeat(3, 1fr);
}
.l_grid_sm_4 {
-ms-grid-columns: (1fr) [4];
grid-template-columns: repeat(4, 1fr);
}
.l_grid_sm_5 {
-ms-grid-columns: (1fr) [5];
grid-template-columns: repeat(5, 1fr);
}
.l_grid_sm_6 {
-ms-grid-columns: (1fr) [6];
grid-template-columns: repeat(6, 1fr);
}
.l_subgrid_sm {
display: -ms-grid;
display: grid;
-ms-grid-rows: subgrid;
grid-template-rows: subgrid;
}
.l_subgrid_sm_1 {
-ms-grid-row-span: 1;
grid-row: span 1;
}
.l_subgrid_sm_2 {
-ms-grid-row-span: 2;
grid-row: span 2;
}
.l_subgrid_sm_3 {
-ms-grid-row-span: 3;
grid-row: span 3;
}
.l_subgrid_sm_4 {
-ms-grid-row-span: 4;
grid-row: span 4;
}
.l_subgrid_sm_5 {
-ms-grid-row-span: 5;
grid-row: span 5;
}
.l_subgrid_sm_6 {
-ms-grid-row-span: 6;
grid-row: span 6;
}
}
/* Flex box
=====================================================*/
.l_flex {
display: flex;
}
.l_flexWrap {
flex-wrap: wrap;
}
.l_flexNoShrink {
flex-shrink: 0;
}
.l_directionColumn {
flex-direction: column !important;
}
.l_directionRow {
flex-direction: row !important;
}
.l_alignItemsCenter {
align-items: center !important;
}
.l_alignItemsStart {
align-items: flex-start !important;
}
.l_alignItemsEnd {
align-items: flex-end !important;
}
.l_alignContentCenter {
align-content: center !important;
}
.l_alignContentStart {
align-content: flex-start !important;
}
.l_alignContentEnd {
align-content: flex-end !important;
}
.l_alignSelfCenter {
-ms-grid-row-align: center !important;
align-self: center !important;
}
.l_alignSelfStart {
align-self: flex-start !important;
}
.l_alignSelfEnd {
align-self: flex-end !important;
}
.l_justifyContentCenter {
justify-content: center !important;
}
.l_justifyContentStart {
justify-content: flex-start !important;
}
.l_justifyContentEnd {
justify-content: flex-end !important;
}
.l_justifyContentAround {
justify-content: space-around !important;
}
.l_justifyContentBetween {
justify-content: space-between !important;
}
.l_placeItemsStart {
place-items: start !important;
}
.l_placeItemsEnd {
place-items: end !important;
}
.l_placeItemsCenter {
place-items: center !important;
}
.l_order_1 {
order: 1;
}
.l_order_2 {
order: 2;
}
/* Medium devices (tablets, 768px and under) */
@media (max-width: 768px) {
.l_flex_md {
display: flex;
}
.l_flexWrap_md {
flex-wrap: wrap;
}
.l_flexNoShrink_md {
flex-shrink: 0;
}
.l_directionColumn_md {
flex-direction: column !important;
}
.l_directionRow_md {
flex-direction: row !important;
}
.l_alignItemsCenter_md {
align-items: center !important;
}
.l_alignItemsStart_md {
align-items: flex-start !important;
}
.l_alignItemsEnd_md {
align-items: flex-end !important;
}
.l_alignContentCenter_md {
align-content: center !important;
}
.l_alignContentStart_md {
align-content: flex-start !important;
}
.l_alignContentEnd_md {
align-content: flex-end !important;
}
.l_alignSelfCenter_md {
-ms-grid-row-align: center !important;
align-self: center !important;
}
.l_alignSelfStart_md {
align-self: flex-start !important;
}
.l_alignSelfEnd_md {
align-self: flex-end !important;
}
.l_justifyContentCenter_md {
justify-content: center !important;
}
.l_justifyContentStart_md {
justify-content: flex-start !important;
}
.l_justifyContentEnd_md {
justify-content: flex-end !important;
}
.l_justifyContentAround_md {
justify-content: space-around !important;
}
.l_justifyContentBetween_md {
justify-content: space-between !important;
}
.l_placeItemsStart_md {
place-items: start !important;
}
.l_placeItemsEnd_md {
place-items: end !important;
}
.l_placeItemsCenter_md {
place-items: center !important;
}
.l_order_1_md {
order: 1;
}
.l_order_2_md {
order: 2;
}
}
/* Inline block
=====================================================*/
.l_col {
font-size: 0;
}
.l_col_chd {
display: inline-block;
}
/* Ratio
=====================================================*/
.l_ratio3_1 {
width: 32%;
}
.l_ratio3_2 {
width: 66%;
}
.l_ratio4_1 {
width: 23%;
}
.l_ratio4_3 {
width: 75%;
}
@media (max-width: 768px) {
.l_ratio3_1,
.l_ratio3_2 {
width: 48.5%;
}
.l_ratio4_1 {
width: 32%;
}
.l_ratio4_3 {
width: 66%;
}
}
/* Gap
=====================================================*/
/*-- Horizontal / Vertical --*/
.l_gap_0 {
gap: 0;
}
.l_gap_5 {
gap: 5px;
}
.l_gap_10 {
gap: 10px;
}
.l_gap_15 {
gap: 15px;
}
.l_gap_20 {
gap: 20px;
}
.l_gap_25 {
gap: 25px;
}
.l_gap_30 {
gap: 30px;
}
.l_gap_35 {
gap: 35px;
}
.l_gap_40 {
gap: 40px;
}
.l_gap_45 {
gap: 45px;
}
.l_gap_50 {
gap: 50px;
}
.l_gap_60 {
gap: 60px;
}
.l_gap_70 {
gap: 70px;
}
.l_gap_80 {
gap: 80px;
}
.l_gap_90 {
gap: 90px;
}
.l_gap_100 {
gap: 100px;
}
/*-- Horizontal --*/
.l_gap_0_x {
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.l_gap_5_x {
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.l_gap_10_x {
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.l_gap_15_x {
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
.l_gap_20_x {
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.l_gap_25_x {
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-gap: 25px;
}
.l_gap_30_x {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
.l_gap_35_x {
-webkit-column-gap: 35px;
-moz-column-gap: 35px;
column-gap: 35px;
}
.l_gap_40_x {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.l_gap_45_x {
-webkit-column-gap: 45px;
-moz-column-gap: 45px;
column-gap: 45px;
}
.l_gap_50_x {
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
}
.l_gap_60_x {
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.l_gap_70_x {
-webkit-column-gap: 70px;
-moz-column-gap: 70px;
column-gap: 70px;
}
.l_gap_80_x {
-webkit-column-gap: 80px;
-moz-column-gap: 80px;
column-gap: 80px;
}
.l_gap_90_x {
-webkit-column-gap: 90px;
-moz-column-gap: 90px;
column-gap: 90px;
}
.l_gap_100_x {
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
}
/*-- Vertical --*/
.l_gap_0_y {
row-gap: 0;
}
.l_gap_5_y {
row-gap: 5px;
}
.l_gap_10_y {
row-gap: 10px;
}
.l_gap_15_y {
row-gap: 15px;
}
.l_gap_20_y {
row-gap: 20px;
}
.l_gap_25_y {
row-gap: 25px;
}
.l_gap_30_y {
row-gap: 30px;
}
.l_gap_35_y {
row-gap: 35px;
}
.l_gap_40_y {
row-gap: 40px;
}
.l_gap_45_y {
row-gap: 45px;
}
.l_gap_50_y {
row-gap: 50px;
}
.l_gap_60_y {
row-gap: 60px;
}
.l_gap_70_y {
row-gap: 70px;
}
.l_gap_80_y {
row-gap: 80px;
}
.l_gap_90_y {
row-gap: 90px;
}
.l_gap_100_y {
row-gap: 100px;
}
@media (max-width: 768px) {
/*-- Horizontal / Vertical --*/
.l_gap_md_0 {
gap: 0;
}
.l_gap_md_5 {
gap: 5px;
}
.l_gap_md_10 {
gap: 10px;
}
.l_gap_md_15 {
gap: 15px;
}
.l_gap_md_20 {
gap: 20px;
}
.l_gap_md_25 {
gap: 25px;
}
.l_gap_md_30 {
gap: 30px;
}
.l_gap_md_35 {
gap: 35px;
}
.l_gap_md_40 {
gap: 40px;
}
.l_gap_md_45 {
gap: 45px;
}
.l_gap_md_50 {
gap: 50px;
}
.l_gap_md_60 {
gap: 60px;
}
.l_gap_md_70 {
gap: 70px;
}
.l_gap_md_80 {
gap: 80px;
}
.l_gap_md_90 {
gap: 90px;
}
.l_gap_md_100 {
gap: 100px;
}
/*-- Horizontal --*/
.l_gap_md_0_x {
-webkit-column-gap: 0;
-moz-column-gap: 0;
column-gap: 0;
}
.l_gap_md_5_x {
-webkit-column-gap: 5px;
-moz-column-gap: 5px;
column-gap: 5px;
}
.l_gap_md_10_x {
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-gap: 10px;
}
.l_gap_md_15_x {
-webkit-column-gap: 15px;
-moz-column-gap: 15px;
column-gap: 15px;
}
.l_gap_md_20_x {
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.l_gap_md_25_x {
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-gap: 25px;
}
.l_gap_md_30_x {
-webkit-column-gap: 30px;
-moz-column-gap: 30px;
column-gap: 30px;
}
.l_gap_md_35_x {
-webkit-column-gap: 35px;
-moz-column-gap: 35px;
column-gap: 35px;
}
.l_gap_md_40_x {
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.l_gap_md_45_x {
-webkit-column-gap: 45px;
-moz-column-gap: 45px;
column-gap: 45px;
}
.l_gap_md_50_x {
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
}
.l_gap_md_60_x {
-webkit-column-gap: 60px;
-moz-column-gap: 60px;
column-gap: 60px;
}
.l_gap_md_70_x {
-webkit-column-gap: 70px;
-moz-column-gap: 70px;
column-gap: 70px;
}
.l_gap_md_80_x {
-webkit-column-gap: 80px;
-moz-column-gap: 80px;
column-gap: 80px;
}
.l_gap_md_90_x {
-webkit-column-gap: 90px;
-moz-column-gap: 90px;
column-gap: 90px;
}
.l_gap_md_100_x {
-webkit-column-gap: 100px;
-moz-column-gap: 100px;
column-gap: 100px;
}
/*-- Vertical --*/
.l_gap_md_0_y {
row-gap: 0;
}
.l_gap_md_5_y {
row-gap: 5px;
}
.l_gap_md_10_y {
row-gap: 10px;
}
.l_gap_md_15_y {
row-gap: 15px;
}
.l_gap_md_20_y {
row-gap: 20px;
}
.l_gap_md_25_y {
row-gap: 25px;
}
.l_gap_md_30_y {
row-gap: 30px;
}
.l_gap_md_35_y {
row-gap: 35px;
}
.l_gap_md_40_y {
row-gap: 40px;
}
.l_gap_md_45_y {
row-gap: 45px;
}
.l_gap_md_50_y {
row-gap: 50px;
}
.l_gap_md_60_y {
row-gap: 60px;
}
.l_gap_md_70_y {
row-gap: 70px;
}
.l_gap_md_80_y {
row-gap: 80px;
}
.l_gap_md_90_y {
row-gap: 90px;
}
.l_gap_md_100_y {
row-gap: 100px;
}
}
/* Padding
=====================================================*/
/*-- Horizontal / Vertical--*/
.px_0 {
padding-left: auto !important;
padding-right: auto !important;
}
.py_0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
@media (max-width: 768px) {
.px_0_md {
padding-left: auto !important;
padding-right: auto !important;
}
.py_0_md {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
/*-- top --*/
.pt_0 {
padding-top: 0 !important;
}
.pt_5 {
padding-top: 5px !important;
}
.pt_10 {
padding-top: 10px !important;
}
.pt_15 {
padding-top: 15px !important;
}
.pt_20 {
padding-top: 20px !important;
}
.pt_25 {
padding-top: 25px !important;
}
.pt_30 {
padding-top: 30px !important;
}
.pt_35 {
padding-top: 35px !important;
}
.pt_40 {
padding-top: 40px !important;
}
.pt_45 {
padding-top: 45px !important;
}
.pt_50 {
padding-top: 50px !important;
}
.pt_60 {
padding-top: 60px !important;
}
.pt_70 {
padding-top: 70px !important;
}
.pt_80 {
padding-top: 80px !important;
}
.pt_90 {
padding-top: 90px !important;
}
.pt_100 {
padding-top: 100px !important;
}
@media (max-width: 768px) {
.pt_0_md {
padding-top: 0 !important;
}
.pt_5_md {
padding-top: 5px !important;
}
.pt_10_md {
padding-top: 10px !important;
}
.pt_15_md {
padding-top: 15px !important;
}
.pt_20_md {
padding-top: 20px !important;
}
.pt_25_md {
padding-top: 25px !important;
}
.pt_30_md {
padding-top: 30px !important;
}
.pt_35_md {
padding-top: 35px !important;
}
.pt_40_md {
padding-top: 40px !important;
}
.pt_45_md {
padding-top: 45px !important;
}
.pt_50_md {
padding-top: 50px !important;
}
.pt_60_md {
padding-top: 60px !important;
}
.pt_70_md {
padding-top: 70px !important;
}
.pt_80_md {
padding-top: 80px !important;
}
.pt_90_md {
padding-top: 90px !important;
}
.pt_100_md {
padding-top: 100px !important;
}
}
/*-- bottom --*/
.pb_0 {
padding-bottom: 0 !important;
}
.pb_5 {
padding-bottom: 5px !important;
}
.pb_10 {
padding-bottom: 10px !important;
}
.pb_15 {
padding-bottom: 15px !important;
}
.pb_20 {
padding-bottom: 20px !important;
}
.pb_25 {
padding-bottom: 25px !important;
}
.pb_30 {
padding-bottom: 30px !important;
}
.pb_35 {
padding-bottom: 35px !important;
}
.pb_40 {
padding-bottom: 40px !important;
}
.pb_45 {
padding-bottom: 45px !important;
}
.pb_50 {
padding-bottom: 50px !important;
}
.pb_60 {
padding-bottom: 60px !important;
}
.pb_70 {
padding-bottom: 70px !important;
}
.pb_80 {
padding-bottom: 80px !important;
}
.pb_90 {
padding-bottom: 90px !important;
}
.pb_100 {
padding-bottom: 100px !important;
}
@media (max-width: 768px) {
.pb_0_md {
padding-bottom: 0 !important;
}
.pb_5_md {
padding-bottom: 5px !important;
}
.pb_10_md {
padding-bottom: 10px !important;
}
.pb_15_md {
padding-bottom: 15px !important;
}
.pb_20_md {
padding-bottom: 20px !important;
}
.pb_25_md {
padding-bottom: 25px !important;
}
.pb_30_md {
padding-bottom: 30px !important;
}
.pb_35_md {
padding-bottom: 35px !important;
}
.pb_40_md {
padding-bottom: 40px !important;
}
.pb_45_md {
padding-bottom: 45px !important;
}
.pb_50_md {
padding-bottom: 50px !important;
}
.pb_60_md {
padding-bottom: 60px !important;
}
.pb_70_md {
padding-bottom: 70px !important;
}
.pb_80_md {
padding-bottom: 80px !important;
}
.pb_90_md {
padding-bottom: 90px !important;
}
.pb_100_md {
padding-bottom: 100px !important;
}
}
/* Margin
=====================================================*/
/*-- Horizontal / Vertical --*/
.mx_auto {
margin-left: auto !important;
margin-right: auto !important;
}
.mx_0 {
margin-left: auto !important;
margin-right: auto !important;
}
.my_auto {
margin-top: auto !important;
margin-bottom: auto !important;
}
.my_0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.ml_auto {
margin-left: auto !important;
}
@media (max-width: 768px) {
.mx_auto_md {
margin-left: auto !important;
margin-right: auto !important;
}
.mx_0_md {
margin-left: auto !important;
margin-right: auto !important;
}
.my_auto_md {
margin-top: auto !important;
margin-bottom: auto !important;
}
.my_0_md {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.ml_auto_md {
margin-left: auto !important;
}
}
/*-- top --*/
.mt_0 {
margin-top: 0 !important;
}
.mt_5 {
margin-top: 5px !important;
}
.mt_10 {
margin-top: 10px !important;
}
.mt_15 {
margin-top: 15px !important;
}
.mt_20 {
margin-top: 20px !important;
}
.mt_25 {
margin-top: 25px !important;
}
.mt_30 {
margin-top: 30px !important;
}
.mt_35 {
margin-top: 35px !important;
}
.mt_40 {
margin-top: 40px !important;
}
.mt_45 {
margin-top: 45px !important;
}
.mt_50 {
margin-top: 50px !important;
}
.mt_55 {
margin-top: 55px !important;
}
.mt_60 {
margin-top: 60px !important;
}
.mt_70 {
margin-top: 70px !important;
}
.mt_80 {
margin-top: 80px !important;
}
.mt_90 {
margin-top: 90px !important;
}
.mt_100 {
margin-top: 100px !important;
}
@media (max-width: 768px) {
.mt_0_md {
margin-top: 0 !important;
}
.mt_5_md {
margin-top: 5px !important;
}
.mt_10_md {
margin-top: 10px !important;
}
.mt_15_md {
margin-top: 15px !important;
}
.mt_20_md {
margin-top: 20px !important;
}
.mt_25_md {
margin-top: 25px !important;
}
.mt_30_md {
margin-top: 30px !important;
}
.mt_35_md {
margin-top: 35px !important;
}
.mt_40_md {
margin-top: 40px !important;
}
.mt_45_md {
margin-top: 45px !important;
}
.mt_50_md {
margin-top: 50px !important;
}
.mt_60_md {
margin-top: 60px !important;
}
.mt_70_md {
margin-top: 70px !important;
}
.mt_80_md {
margin-top: 80px !important;
}
.mt_90_md {
margin-top: 90px !important;
}
.mt_100_md {
margin-top: 100px !important;
}
}
/*-- bottom --*/
.mb_0 {
margin-bottom: 0 !important;
}
.mb_5 {
margin-bottom: 5px !important;
}
.mb_10 {
margin-bottom: 10px !important;
}
.mb_15 {
margin-bottom: 15px !important;
}
.mb_20 {
margin-bottom: 20px !important;
}
.mb_25 {
margin-bottom: 25px !important;
}
.mb_30 {
margin-bottom: 30px !important;
}
.mb_35 {
margin-bottom: 35px !important;
}
.mb_40 {
margin-bottom: 40px !important;
}
.mb_45 {
margin-bottom: 45px !important;
}
.mb_50 {
margin-bottom: 50px !important;
}
.mb_60 {
margin-bottom: 60px !important;
}
.mb_70 {
margin-bottom: 70px !important;
}
.mb_80 {
margin-bottom: 80px !important;
}
.mb_90 {
margin-bottom: 90px !important;
}
.mb_100 {
margin-bottom: 100px !important;
}
@media (max-width: 768px) {
.mb_0_md {
margin-bottom: 0 !important;
}
.mb_5_md {
margin-bottom: 5px !important;
}
.mb_10_md {
margin-bottom: 10px !important;
}
.mb_15_md {
margin-bottom: 15px !important;
}
.mb_20_md {
margin-bottom: 20px !important;
}
.mb_25_md {
margin-bottom: 25px !important;
}
.mb_30_md {
margin-bottom: 30px !important;
}
.mb_35_md {
margin-bottom: 35px !important;
}
.mb_40_md {
margin-bottom: 40px !important;
}
.mb_45_md {
margin-bottom: 45px !important;
}
.mb_50_md {
margin-bottom: 50px !important;
}
.mb_60_md {
margin-bottom: 60px !important;
}
.mb_70_md {
margin-bottom: 70px !important;
}
.mb_80_md {
margin-bottom: 80px !important;
}
.mb_90_md {
margin-bottom: 90px !important;
}
.mb_100_md {
margin-bottom: 100px !important;
}
}
/*============================================================================================
General
=============================================================================================*/
/* Hamburger Menu
=====================================================*/
/*-- Initial --*/
.g_hamb {
display: none;
}
@media (max-width: 768px) {
.g_hamb {
display: flex;
flex-wrap: wrap;
align-items: center !important;
justify-content: center !important;
}
.g_hamb_inr {
position: relative;
width: 18px;
height: 15px;
}
.g_hamb_inr div {
position: absolute;
display: block;
width: inherit;
height: 1px;
top: 0;
bottom: 0;
margin: auto;
background-color: var(--color-main);
transition: top 0.2s, bottom 0.2s, -webkit-transform 0.2s;
transition: transform 0.2s, top 0.2s, bottom 0.2s;
transition: transform 0.2s, top 0.2s, bottom 0.2s, -webkit-transform 0.2s;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.g_hamb .g_hamb_inr_top {
bottom: auto;
}
.g_hamb .g_hamb_inr_btm {
top: auto;
}
/*-- Opened --*/
.g_hamb.js_open .g_hamb_inr_mdl {
opacity: 0;
}
.g_hamb.js_open .g_hamb_inr_top {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.g_hamb.js_open .g_hamb_inr_btm {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
/* Slider
=====================================================*/
/*-- Default Custom --*/
.g_slider.slick-slider {
width: 100%;
height: auto;
min-height: auto;
margin: auto;
padding-bottom: 30px; /* dots逕ｨ */
}
.g_slider.slick-slider .slick-list,
.g_slider.slick-slider .slick-track {
height: inherit;
}
.g_slider.slick-dotted.slick-slider {
margin-bottom: 0;
}
.g_slider .slick-dots {
height: auto;
bottom: 0;
right: 0;
left: 0;
padding-top: 0;
text-align: center;
}
.g_slider .slick-dots li {
width: 10px;
height: 10px;
margin: 0 3px;
overflow: visible;
}
.g_slider .slick-dots li button {
overflow: visible;
}
.g_slider .slick-dots li button::before {
background-color: var(--color-border);
border-radius: 50%;
}
.g_slider .slick-dots li.slick-active button::before {
background-color: var(--color-main);
}
.g_slider .slick-prev,
.g_slider .slick-next {
width: 40px;
height: 40px;
top: 0;
}
.g_slider .slick-prev:before {
background-image: url(/img/slider/ic_prev1.png);
}
.g_slider .slick-next:before {
background-image: url(/img/slider/ic_next1.png);
}
.g_slider .slick-prev {
left: 0;
}
.g_slider .slick-next {
right: 0;
}
[dir="rtl"] .g_slider .slick-prev {
right: 0;
}
[dir="rtl"] .g_slider .slick-next {
left: 0;
}
/*-- Original --*/
.g_slider_itm.slick-slide {
position: relative;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.g_slider_itm.slick-slide img {
width: 100%;
}
.g_slider_itm[data-slick-index="-2"] {
}
.g_slider_itm[data-slick-index="-1"] {
}
.g_slider_itm[data-slick-index="0"] {
}
.g_slider_itm[data-slick-index="1"] {
}
.g_slider_itm[data-slick-index="2"] {
}
.g_slider_itm[data-slick-index="3"] {
}
.g_slider_itm[data-slick-index="4"] {
}
@media (max-width: 768px) {
}
/* Section
=====================================================*/
.g_sec {
padding-top: 100px;
}
.g_sec__last {
padding-top: 100px;
padding-bottom: 120px;
}
.g_sec__bg {
margin-top: 100px;
padding-top: 100px;
padding-bottom: 80px;
background-color: var(--color-bg);
}
@media (max-width: 768px) {
.g_sec {
padding-top: 60px;
}
.g_sec__last {
padding-top: 60px;
padding-bottom: 100px;
}
.g_sec__bg {
margin-top: 60px;
padding-top: 60px;
padding-bottom: 60px;
}
}
/* Heading
=====================================================*/
.g_pgHd {
font-size: 3.6rem;
font-weight: bold;
text-align: left;
}
@media (max-width: 768px) {
.g_pgHd {
font-size: 2.6rem;
}
}
/* Color Text
=====================================================*/
.g_c_wh {
color: var(--color-reverse);
}
.g_c_orange {
color: var(--color-main);
}
.g_c_bl {
color: var(--color-sub);
}
.g_c_bk {
color: #000;
}
/* Button - basic -
=====================================================*/
.g_btn {
position: relative;
display: block;
width: 100%;
color: var(--color-reverse);
}
.g_btn > * {
background-color: var(--color-main);
border: 2px solid var(--color-main);
border-radius: calc(1px / 0);
width: 100%;
height: 72px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
font-size: 1.6rem;
font-weight: bold;
box-shadow: 0px 8px 8px 0px rgba(43, 34, 34, 0.16);
transition: box-shadow var(--transition), -webkit-transform var(--transition);
transition: transform var(--transition), box-shadow var(--transition);
transition: transform var(--transition), box-shadow var(--transition), -webkit-transform var(--transition);
}
.g_btn.u_ic::before,.g_btn.u_ic::after {
z-index: 1;
transition: var(--transition);
}
.g_btn.u_ic::before {
width: 1.15em;
height: 1.15em;
top: 0;
bottom: 0;
right: 1em;
background-color: var(--color-reverse);
border-radius: 100%;
}
.g_btn.u_ic::after {
width: 0.8em;
height: 0.8em;
top: 0;
bottom: 0;
right: 1.15em;
-webkit-mask-image: url(/resource/img/leaf/lightning_studio/arrow.svg);
mask-image: url(/resource/img/leaf/lightning_studio/arrow.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
background: var(--color-main);
}
@media (any-hover: hover) {
.g_btn:hover > * {
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0 4px 4px rgba(43, 34, 34, 0.16);
}
.g_btn.u_ic:hover::before,.g_btn.u_ic:hover::after {
-webkit-transform: translateY(4px);
transform: translateY(4px);
}
}
.g_btn.g_btn__wh {
color: var(--color-main);
}
.g_btn.g_btn__wh > * {
background-color: var(--color-reverse);
}
.g_btn.g_btn__wh.u_ic::before {
background-color: var(--color-main);
}
.g_btn__wh.u_ic::after {
background: var(--color-reverse);
}
.g_btn.g_btn__lg {
max-width: 463px;
color: var(--color-text);
}
.g_btn.g_btn__lg > * {
border-color: var(--color-text);
font-size: 1.8rem;
height: 71px;
background-color: var(--color-reverse);
box-shadow: 20px 23px 0 var(--color-main);
}
.g_btn.g_btn__lg.u_ic::before {
background-color: var(--color-main);
right: 2.83em;
width: 1.27em;
height: 1.27em;
}
.g_btn.g_btn__lg.u_ic::after {
background: var(--color-reverse);
right: 3.05em;
}
@media (any-hover: hover) {
.g_btn.g_btn__lg:hover > * {
-webkit-transform: translateY(10px);
transform: translateY(10px);
box-shadow: 10px 13px 0 var(--color-main);
}
.g_btn.g_btn__lg.u_ic:hover::before,.g_btn.g_btn__lg.u_ic:hover::after {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
@media (max-width: 768px) {
.g_btn.g_btn__lg {
margin-inline: auto;
max-width: 350px;
}
.g_btn.g_btn__lg > * {
height: 52px;
font-size: unset;
box-shadow: none;
}
.g_btn.g_btn__lg:hover > * {
-webkit-transform: none;
transform: none;
box-shadow: none;
}
.g_btn.g_btn__lg.u_ic:hover::before,.g_btn.g_btn__lg.u_ic:hover::after {
-webkit-transform: none;
transform: none;
}
}
.g_btn.g_btn__wXl{
max-width: 550px;
}
@media (max-width: 768px) {
.g_btn.g_btn__wXl {
max-width: 350px;
}
}
/*謌ｻ繧九�繧ｿ繝ｳ*/
.g_btn.g_btn_back::after {
right: auto;
left: 20px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/*螟夜Κ繝ｪ繝ｳ繧ｯ莉倥″繝懊ち繝ｳ*/
.g_btn .g_tab {
position: absolute;
top: 0;
bottom: 0;
right: 20px;
margin: auto;
padding-right: 0;
}
.g_btn .g_tab::before {
background-image: url(/img/common/ico_tab_wh.svg);
}
@media (any-hover: hover) {
.g_btn:hover .g_tab::before {
background-image: url(/img/common/ico_tab.svg);
}
}
@media (max-width: 768px) {
.g_btn .g_tab {
right: 2.2vw;
}
}
/* link - Text -
=====================================================*/
/* underline */
.g_link {
color: var(--color-main);
text-decoration: underline;
}
@media (any-hover: hover) {
.g_link:hover {
text-decoration: none;
}
}
/* hover transparent */
.g_link_transp {
transition: opacity var(--transition);
}
@media (any-hover: hover) {
.g_link_transp:hover {
opacity: var(--opacity);
}
}
/* 螟夜Κ繝ｪ繝ｳ繧ｯ繧｢繧､繧ｳ繝ｳ */
.g_tab {
position: relative;
display: inline-block;
padding-right: 1.5em;
}
.g_tab::before {
content: "";
position: absolute;
width: 0.8em;
height: 0.8em;
top: 0;
bottom: 0;
right: 0;
margin: auto;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
background-image: url(/img/common/ico_tab.svg);
}
/* Decoration
=====================================================*/
/* 譫�邱� */
.g_bd {
border: 1px solid var(--color-border);
}
.g_bd__p {
padding: 20px;
border: 1px solid var(--color-border);
}
/* 隕句�縺苓｣�｣ｾ - 荳狗ｷ� */
.g_decoHd_bb {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid var(--color-border);
}
.g_decoHd_bb::after {
content: "";
position: absolute;
display: block;
width: 40px;
bottom: -1px;
border-bottom: 1px solid var(--color-main);
z-index: 5;
}
/* 隕句�縺苓｣�｣ｾ - 蟾ｦ邱� */
.g_decoHd_bl {
position: relative;
padding-left: 15px;
}
.g_decoHd_bl::before {
content: "";
position: absolute;
display: inline-block;
top: 0.3em;
left: 0;
width: 4px;
height: 1em;
background-color: var(--color-main);
}
/* Information list
=====================================================*/
/* 繧ｵ繝�繝阪う繝ｫ辟｡ */
.g_info_itm {
display: flex;
align-items: baseline;
width: 100%;
padding: 15px 0;
}
.g_info_itm_li {
border-top: 1px solid var(--color-border);
}
.g_info_itm_li:last-child {
border-bottom: 1px solid var(--color-border);
}
.g_info_itm_cap {
display: flex;
width: auto;
margin-right: 20px;
padding: 0;
font-size: 1.5rem;
line-height: 20px;
}
.g_info_itm_cap span {
transition: color 0.2s;
}
.g_info_itm_label {
display: flex;
align-items: center;
justify-content: center;
min-width: 120px;
height: 20px;
margin-left: 20px;
padding: 0 10px;
color: var(--color-main);
font-size: 1rem;
text-align: center;
line-height: 20px;
border: 1px solid var(--color-main);
transition: color 0.2s, linear 0.2s;
}
.g_info_itm_txt {
transition: color 0.2s;
}
@media (any-hover: hover) {
.g_info_itm:hover .g_info_itm_txt,
.g_info_itm:hover .g_info_itm_cap span {
color: var(--color-hover);
}
.g_info_itm:hover .g_info_itm_label {
border-color: var(--color-hover);
}
}
/* 繧ｵ繝�繝阪う繝ｫ譛� */
.g_info_itm_thum .g_info_itm_cap {
flex-wrap: wrap;
margin-right: 0;
}
.g_info_itm_thum .g_info_itm_label {
min-width: 60px;
height: auto;
min-height: 20px;
margin-left: 10px;
}
@media (any-hover: hover) {
.g_info_itm_thum a:hover .g_info_itm_txt,
.g_info_itm_thum a:hover .g_info_itm_cap span {
color: var(--color-hover);
}
.g_info_itm_thum a:hover .g_info_itm_cap .g_info_itm_label {
border-color: var(--color-hover);
}
}
.g_info_itm_thum_img {
margin-bottom: 15px;
overflow: hidden;
}
.g_info_itm_thum_img img {
width: 100%;
height: 160px;
-o-object-fit: cover;
object-fit: cover;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
transition: transform 0.2s, -webkit-transform 0.2s;
}
@media (any-hover: hover) {
.g_info_itm_thum a:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
}
/* 蟆守ｷ� */
.g_info_link {
padding-right: 10px;
font-size: 1.5rem;
font-weight: bold;
text-align: right;
transition: color 0.2s;
}
@media (any-hover: hover) {
.g_info_link:hover {
color: var(--color-hover);
}
}
.g_info_link::after {
width: 6px;
height: 6px;
top: 0;
bottom: 0;
right: 0;
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media (any-hover: hover) {
.g_info_link:hover::after {
border-color: var(--color-hover);
}
}
@media (max-width: 768px) {
.g_info_itm {
padding: 20px 0;
}
}
/* Category list
=====================================================*/
.g_catLst {
width: 230px;
height: 40px;
margin-bottom: 40px;
position: relative;
}
.g_catLst::before {
content: "";
width: 40px;
height: 40px;
background-color: var(--color-main);
position: absolute;
top: 0;
bottom: 0;
right: 0;
margin: auto;
pointer-events: none;
}
.g_catLst::after {
content: "";
width: 6px;
height: 6px;
border-top: 1px solid var(--color-reverse);
border-right: 1px solid var(--color-reverse);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
position: absolute;
top: 0;
bottom: 0;
right: 16px;
margin: auto;
pointer-events: none;
}
.g_catLst_select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid var(--color-border);
border-radius: 0;
background-color: var(--color-reverse);
display: block;
width: inherit;
height: 100%;
min-height: 100%;
padding-left: 20px;
color: inherit;
font-family: var(--font-jp), sans-serif;
font-weight: 400;
font-size: 1.4rem;
cursor: pointer;
}
.g_catLst_select:focus {
outline: none;
}
@media (max-width: 768px) {
.g_catLst_select {
font-size: 16px;
}
}
/* Pager list
=====================================================*/
/* Archive
--------------------------------- */
.g_pager_li {
width: 40px;
height: 40px;
background-color: var(--color-main);
border: 2px solid var(--color-main);
margin-left: 8px;
font-size: 1.4rem;
font-weight: bold;
line-height: 1;
color: var(--color-reverse);
transition: color 0.2s, background 0.2s;
}
.g_pager_li a {
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.g_pager_li span {
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.g_pager_li.current {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: var(--color-reverse);
color: var(--color-main);
}
.g_pager_li.current a {
pointer-events: none;
}
.g_pager_li.prev {
margin-left: 0;
}
.g_pager_dots {
margin-left: 8px;
font-size: 1.6rem;
}
@media (any-hover: hover) {
.g_pager_li:hover {
background-color: var(--color-reverse);
color: var(--color-main);
}
}
/* Single
--------------------------------- */
.g_single_pager {
margin-top: 80px;
padding: 15px 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.g_single_pager_prev {
border-right: 1px solid var(--color-border);
}
.g_single_pager .u_img {
min-width: 110px;
margin-right: 20px;
transition: opacity 0.2s;
}
.g_single_pager .u_img img {
margin: 0;
}
.g_single_pager_note {
margin-bottom: 5px;
}
.g_single_pager p {
transition: color 0.2s;
}
.g_single_pager img {
width: 100px;
height: 100px;
-o-object-fit: cover;
object-fit: cover;
}
.g_single_pager .g_info_itm_cap {
flex-wrap: wrap;
margin-bottom: 5px;
}
.g_single_pager .g_info_itm_date {
margin-right: 10px;
}
.g_single_pager .g_info_itm_label {
min-width: 63px;
height: auto;
min-height: 20px;
margin: 0 10px 0 0;
transition: color 0.2s, linear 0.2s;
}
@media (any-hover: hover) {
.g_single_pager a:hover p,
.g_single_pager a:hover span {
color: var(--color-hover);
}
.g_single_pager a:hover .u_img {
opacity: 0.5;
}
.g_single_pager a:hover .g_info_itm_label {
border-color: var(--color-hover);
}
}
/* List number
=====================================================*/
.g_incr {
counter-reset: item;
padding-left: 2em;
}
.g_incr_itm {
font-size: inherit;
list-style-type: none;
position: relative;
}
.g_incr_itm::before {
font-size: inherit;
line-height: inherit;
content: counter(item);
counter-increment: item;
top: 0;
left: -2em;
width: 2em;
position: absolute;
display: inline-block;
margin: auto;
}
/* Entry
=====================================================*/
.g_entry_head_txt {
font-size: 2rem;
line-height: 1.6;
margin-top: 15px;
}
.g_entry_article {
width: 100%;
}
.g_entry_article h1 {
margin-bottom: 10px;
font-size: 4rem;
font-weight: bold;
}
.g_entry_article h2 {
margin-bottom: 15px;
font-size: 3rem;
font-weight: bold;
}
.g_entry_article h3 {
margin-bottom: 20px;
font-size: 2.6rem;
font-weight: bold;
}
.g_entry_article h4 {
margin-bottom: 20px;
font-size: 2.2rem;
font-weight: bold;
}
.g_entry_article h5 {
margin-bottom: 20px;
font-size: 1.8rem;
font-weight: bold;
}
.g_entry_article > ul,
.g_entry_article > ul ul {
padding-left: 1.3em;
margin-left: 1.3em;
list-style-type: disc;
}
.g_entry_article > ol,
.g_entry_article > ol ol {
padding-left: 1em;
margin-left: 1em;
list-style-type: decimal;
}
.g_entry_article li {
margin-bottom: initial;
font-size: inherit;
}
.g_entry_article p {
font-size: 1.5rem;
min-height: 1em;
/* margin-bottom: 1em; */
}
.g_entry_article p.has-small-font-size {
font-size: calc(1.5rem * 0.8);
}
.g_entry_article p.has-medium-font-size {
font-size: calc(1.5rem * 1.25);
}
.g_entry_article p.has-large-font-size {
font-size: calc(1.5rem * 2);
}
.g_entry_article p.has-huge-font-size {
font-size: calc(1.5rem * 3);
}
.g_entry_article p.has-drop-cap:not(:focus):first-letter {
font-size: 5em;
margin: 0;
}
.g_entry_article .wp-block-image .alignright {
float: none;
margin: 0 0 0 auto;
}
.g_entry_article em {
font-style: italic;
display: inline;
}
.g_entry_article figure {
margin: 0 0 1em;
}
.g_entry_article figcaption {
text-align: center;
margin: auto;
font-size: 1.4rem;
}
.g_entry_article code {
padding: 15px;
color: var(--color-reverse);
background-color: #333;
}
.g_entry_article em,
.g_entry_article strong {
display: inline;
}
.g_entry_article strong {
font-weight: bold;
}
.g_entry_article div {
font-size: 1.5rem;
}
.g_entry_article img {
max-width: 100%;
height: auto;
}
.g_entry_article p > a {
text-decoration: underline;
}
.g_entry_article .wp-block-button {
transition: opacity 0.2s;
}
.g_entry_article .is-style-outline .wp-block-button__link,
.g_entry_article .wp-block-button__link.is-style-outline {
padding: 10px 24px;
}
@media (any-hover: hover) {
.g_entry_article p > a:hover {
text-decoration: none;
}
.g_entry_article .wp-block-button:hover {
opacity: 0.6;
}
}
.g_entry_article .wp-block-table {
width: 100%;
border: 1px solid var(--color-border);
}
.g_entry_article .wp-block-table tr {
border-top: 1px solid var(--color-border);
}
.g_entry_article .wp-block-table tr:last-child {
border-bottom: none;
}
.g_entry_article .wp-block-table tr th,
.g_entry_article .wp-block-table tr td {
padding: 10px;
vertical-align: middle;
}
.g_entry_article .wp-block-table tr th {
color: var(--color-reverse);
font-weight: bold;
background-color: var(--color-sub);
}
.g_entry_article .wp-block-table thead th {
text-align: center;
}
.g_entry_article .wp-block-table tr th + th {
border-left: 1px solid var(--color-border);
}
.g_entry_article .wp-block-table tr td + td {
border-left: 1px solid var(--color-border);
}
.g_entry_article .wp-block-table tfoot {
background-color: var(--color-border);
}
.g_entry_article .wp-block-table thead tr:first-of-type,
.g_entry_article .wp-block-table tbody tr:first-of-type {
border-top: none;
}
.g_entry_article .aligncenter .wp-block-embed__wrapper {
text-align: center;
}
/* Pagetop
=====================================================*/
/* 霑ｽ蠕�
--------------------------- */
.g_pagetop_fixed {
position: fixed;
width: 40px;
height: 40px;
bottom: 40px;
right: 30px;
transition: opacity 0.2s, visibility 0s, ease 0.2s;
opacity: 0;
visibility: hidden;
z-index: 200;
}
.g_pagetop_fixed img {
width: 100%;
transition: opacity 0.2s;
}
.g_pagetop_fixed.js_show {
opacity: 1;
visibility: visible;
}
.g_pagetop_fixed.js_stc {
position: absolute;
top: -25px;
}
@media (any-hover: hover) {
.g_pagetop_fixed:hover img {
opacity: 0.5;
}
}
/* 繝輔ャ繧ｿ繝ｼ蝗ｺ螳�
--------------------------- */
.g_pagetop {
padding: 20px 0 10px;
color: var(--color-main);
font-size: 1rem;
font-weight: 500;
background-color: var(--color-sub);
text-align: center;
line-height: 1;
}
.g_pagetop a {
padding: 10px;
display: inline-block;
transition: color 0.2s;
}
.g_pagetop a:before {
top: 0;
left: 0;
right: 0;
margin: auto;
width: 5px;
height: 5px;
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
transition: linear 0.2s;
}
@media (any-hover: hover) {
.g_pagetop a:hover {
color: var(--color-hover);
}
.g_pagetop a:hover:before {
border-top: 1px solid var(--color-hover);
border-right: 1px solid var(--color-hover);
}
}
/* Breadcrumb
=====================================================*/
.g_breadcrumb_lst {
padding: 10px 0;
}
.g_breadcrumb_lst_line {
border-bottom: 1px solid var(--color-border);
}
.g_breadcrumb_lst_li {
position: relative;
font-size: 1rem;
line-height: 1.5;
}
.g_breadcrumb_lst_li + .g_breadcrumb_lst_li {
padding-left: 20px;
}
.g_breadcrumb_lst_li + .g_breadcrumb_lst_li::before {
content: "";
position: absolute;
margin: auto;
width: 3px;
height: 3px;
top: 0.6em;
left: 0.75em;
border-top: 1px solid var(--color-main);
border-right: 1px solid var(--color-main);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
@media (any-hover: hover) {
.g_breadcrumb_lst_li a:hover {
color: var(--color-main);
}
}
@media (max-width: 768px) {
.g_breadcrumb_lst {
display: block;
overflow-x: scroll;
white-space: nowrap;
}
.g_breadcrumb_lst_li {
display: inline-block;
white-space: nowrap;
}
}
/* GDPR
=====================================================*/
.g_gdpr {
width: 100%;
background-color: rgba(255, 255, 255, 0.95);
padding: 30px 0 30px;
box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.1);
position: fixed;
left: 0;
bottom: 0;
display: none;
z-index: 500;
}
.g_gdpr_wrp {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.g_gdpr_txt {
font-size: 1.4rem;
line-height: 1.6;
width: 80%;
color: var(--color-main);
}
.g_gdpr_txt a {
font-weight: bold;
text-decoration: underline;
}
.g_gdpr_btn {
font-size: 1.4rem;
font-weight: 500;
width: 255px;
height: 50px;
color: var(--color-reverse);
border: 2px solid var(--color-main);
background-color: var(--color-main);
display: flex;
justify-content: center;
align-items: center;
transition: background 0.3s;
cursor: pointer;
border-radius: 5px;
}
@media (any-hover: hover) {
.g_gdpr_txt a:hover {
color: var(--color-text);
text-decoration: none;
transition: color 0.3s;
}
.g_gdpr_btn:hover {
color: var(--color-main);
background-color: var(--color-reverse);
}
}
@media (max-width: 768px) {
.g_gdpr_wrp {
display: block;
}
.g_gdpr_txt {
width: 100%;
}
.g_gdpr_btn {
width: 130px;
margin: 15px 0 0 auto;
}
}
/* Loading
=====================================================*/
.js_loading {
width: 100vw;
height: 100vh;
background-color: var(--color-reverse);
position: fixed;
top: 0;
left: 0;
z-index: 9999999;
}
.js_loading.js_loading__page {
background-color: var(--color-reverse);
}
.loader {
border-radius: 50%;
width: 5em;
height: 5em;
margin: auto;
font-size: 10px;
border-top: 5px solid rgba(22, 22, 22, 0.2);
border-right: 5px solid rgba(22, 22, 22, 0.2);
border-bottom: 5px solid rgba(22, 22, 22, 0.2);
border-left: 5px solid var(--color-main);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-animation: loader 1.1s infinite linear;
animation: loader 1.1s infinite linear;
}
@-webkit-keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
html.js_notmove {
overflow: hidden;
}
/* FadeIn
=====================================================*/
.js_fadeIn {
position: relative;
opacity: 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
transition: opacity 0.7s, -webkit-transform 0.7s;
transition: transform 0.7s, opacity 0.7s;
transition: transform 0.7s, opacity 0.7s, -webkit-transform 0.7s;
z-index: 2;
}
.js_fadeIn.delay {
transition: opacity 0.7s 0.2s, -webkit-transform 0.7s 0.2s;
transition: transform 0.7s 0.2s, opacity 0.7s 0.2s;
transition: transform 0.7s 0.2s, opacity 0.7s 0.2s, -webkit-transform 0.7s 0.2s;
}
.js_fadeIn.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.js_hide {
display: none;
}
/* Modal
=====================================================*/
.g_modal {
display: none;
height: 100vh;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.g_modal_bg {
background-color: rgba(0, 0, 0, 0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.g_modal_content {
background-color: var(--color-reverse);
left: 50%;
padding: 40px;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 60%;
}
/* Table Parts
=====================================================*/
/* definition list
---------------------------- */
.g_dl > div {
padding: 15px 0;
border-bottom: 1px solid var(--color-border);
}
.g_dl > div:first-child {
border-top: 1px solid var(--color-border);
}
.g_dl dt {
width: 15%;
margin-right: 5%;
}
.g_dl dd {
width: 80%;
}
@media (max-width: 768px) {
.g_dl dt {
width: 100%;
margin-right: 0;
}
.g_dl dd {
width: 100%;
margin-top: 5px;
}
}
/* Table
---------------------------- */
.g_table {
font-weight: bold;
min-width: 876px;
height: 720px;
letter-spacing: 0;
}
.g_table tr:first-of-type {
border-right: 4px solid #F0F5FC;
}
.g_table tr:last-of-type {
border-bottom: none;
}
.g_table tr:first-of-type th,.g_table tr:first-of-type td {
background-color: #F0F5FC;
border: none;
color: #394E88;
}
.g_table tr th,
.g_table tr td {
height: 84px;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.g_table .g_table_data__hasgutter{
padding: 20px;
}
.g_table tr th {
position: sticky;
left: 0;
z-index: 2;
width: 137px;
height: 100%;
color: var(--color-reverse);
background-color: var(--color-sub);
font-size: 1.6rem;
margin-bottom: 4px;
}
.g_table tr th::before,.g_table tr th::after,.g_table tr td::before,.g_table tr td::after {
content: '';
position: absolute;
display: inline-block;
}
.g_table tr th::before {
border-right: 4px solid var(--color-border);
height: fit-content;
width: 4px;
right: 0;
top: 0;
height: 100%;
}
.g_table tr:first-of-type th::before {
border-right: none;
}
.g_table tr:last-of-type th::before {
height: calc(100% + 2px);
z-index: 3;
}
.g_table tr th::after {
border-top: 4px solid var(--color-border);
height: 4px;
width: 100%;
top: -1.5px;
left: 0;
}
.g_table tr:first-of-type th::after {
border-top: none;
}
.g_table tr:last-of-type th::after {
border-top: 4px solid var(--color-border);
border-bottom: 4px solid var(--color-sub);
height: calc(100% + 3px);
}
.g_table tr td {
border: 4px solid var(--color-border);
border-left: none;
background-color: var(--color-reverse);
position: relative;
}
.g_tableW_160 {
width: 160px;
}
.g_tableW_154 {
width: 154px;
}
.g_tableW_315 {
width: 315px;
}
.g_tableW_177 {
width: 177px;
}
.g_tableW_238 {
width: 238px;
}
.g_tableBB_4 {
border-bottom: 4px solid var(--color-border);
}
/* Tel
=====================================================*/
@media (min-width: 577px) {
.g_tel {
pointer-events: none;
}
}
/* MV */
.mv_logo img {
width: 285px;
height: 110px;
}
.mv_sec_ttl {
width: 533px;
}
.mv_btns .g_btn {
max-width: 262px;
margin-inline: auto;
}
@media (max-width: 768px) {
.mv_sec_wrap {
gap: 25px;
}
.mv_sec_ttl {
width: 100%;
}
.mv_btns {
display: block;
}
.mv_btns > .g_btn + .g_btn{
margin-top: 10px;
}
.mv_btns .g_btn {
max-width: 380px;
}
.mv_btns .g_btn > *{
height: 52px;
}
}
/* about */
.about_sec {
background-image: url(/resource/img/leaf/lightning_studio/studio_bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.about_sec_inr {
margin-inline: auto;
padding-block: 60px 80px;
width: 992px;
}
.about_anchorlink_itm {
position: relative;
font-size: 1.6rem;
font-weight: bold;
color: #2B2B2B;
margin-top: 20px;
transition: var(--transition);
}
.about_anchorlink_itm:first-of-type {
margin-top: 0;
}
.about_anchorlink_itm::before {
position: absolute;
content: '';
width: 12px;
height: 1px;
inset: 0;
margin-block: auto;
background: #2B2B2B;
}
.about_anchorlink_itm a {
display: block;
width: 100%;
padding-left: 26px;
}
.about_sec_cnt {
width: 496px;
}
.about_sec_txt {
font-size: 1.7rem;
}
@media (any-hover: hover) {
.about_anchorlink_itm:hover {
-webkit-transform: translateX(10px);
transform: translateX(10px);
opacity: var(--opacity);
}
}
@media (max-width: 768px) {
.about_sec {
background: none;
}
.about_sec_inr {
padding-block: 0;
width: 100%;
}
.about_sec_cnt {
width: 100%;
background-color: var(--color-bg);
padding: 40px 0 80px;
}
.about_sec_cnt > * {
width: 95%;
margin-inline: auto;
}
.about_anchorlink_lst {
border: 1px solid var(--color-main);
border-top-width: 6px;
background: #fff;
padding: 12px;
align-self: center;
width: 95%;
margin-inline: auto;
}
}
/* lineup */
.lineup_lst {
-webkit-column-gap: 25px;
-moz-column-gap: 25px;
column-gap: 25px;
}
.lineup_itm {
position: relative;
transition: var(--transition);
gap: 15px;
}
.lineup_itm::before {
position: absolute;
content: '';
left: 0;
top: 0;
width: 33px;
height: 33px;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
clip-path: polygon(0 0, 0 100%, 100% 0);
background-color: var(--color-sub);
}
.lineup_img img {
padding-top: 5px;
padding-left: 5px;
width: 100%;
}
.lineup_ttl {
font-size: 1.6rem;
font-weight: bold;
}
.lineup_cont_itm {
gap: 10px;
}
.lineup_cont_itm_inr {
padding: 20px 15px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.16);
}
.lineup_cont_card {
display: block;
border-bottom: 1px solid #BABABA;
padding: 15px 0;
transition: var(--transition);
}
.lineup_cont_card:first-of-type {
padding-top: 0;
}
.lineup_cont_card:last-of-type {
border-bottom: none;
}
.lineup_cont_card:nth-of-type(n+2) {
display: flex;
align-items: center;
gap: 10px;
}
.lineup_cont_card_ttl {
position: relative;
height: 2lh;
font-weight: bold;
font-size: 1.6rem;
margin-top: 15px;
overflow: hidden;
}
.lineup_cont_card_ttl::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
display: block;
width: 3em;
height: 1lh;
background: linear-gradient(to left,#fff,rgba(255,255,255,0.96) 25%,rgba(255,255,255,0) 100%);
}
.lineup_cont_card:nth-of-type(n+2) .lineup_cont_card_ttl {
margin-top: 0;
font-size: 1.4rem;
}
.lineup_cont_card:nth-of-type(n+2) .lineup_cont_card_img {
flex: 0 0 70px;
}
@media (any-hover: hover) {
.lineup_itm:hover,.lineup_cont_card:hover {
opacity: var(--opacity);
}
}
@media (max-width: 768px) {
.lineup_lst {
gap: 25px;
}
.lineup_cont_lst {
row-gap: 25px;
}
}
/* LMS */
.lms_itm {
background-color: var(--color-reverse);
padding: 30px;
}
.lms_pickUp_cnt {
position: relative;
background-color: var(--color-reverse);
padding: 50px 80px;
}
.lms_pickUp_cnt::before {
width: 62px;
height: 62px;
clip-path: polygon(0 100%, 0 0, 100% 0);
background-color: var(--color-bg);
top: 0;
left: 0;
}
.lms_pickUp_cnt_inr {
padding: 50px 0;
}
.lms_pickUp_cnt_inr:first-of-type {
padding-top: 0;
background-image: radial-gradient(circle, #c6c6c6 1.5px, transparent 1.5px);
background-position: left bottom;
background-repeat: repeat-x;
background-size: 8px 4px;
}
.lms_pickUp_cnt_inr:last-of-type {
padding-bottom: 0;
}
.lms_pickUp_txt {
font-size: 1.6rem;
font-weight: 500;
line-height: calc(26/16);
}
.lms_pickUp_txt__lga {
letter-spacing: 0;
font-size: 1.4rem;
font-weight: bold;
}
.lms_pickUp_img_subtitle img {
width: 152px;
}
.lms_pickUp_img_seminar img {
width: 240px;
}
@media (max-width: 768px) {
.lms_sec_inr {
width: 95%;
margin-inline: auto;
}
.lms_pickUp_cnt {
padding: 50px;
}
}
/* 莉也､ｾ繧ｵ繝ｼ繝薙せ縺ｨ縺ｮ豈碑ｼ� */
.comparison_img {
margin-top: 65px;
}
.comparison_btns .g_btn {
max-width: 380px;
font-size: 16px;
}
@media (max-width: 768px) {
.comparison_btns .g_btn {
font-size: 14px;
}
.comparison_btns .g_btn > *{
height: 52px;
}
.comparison_sec {
width: 95%;
margin-inline: auto;
}
}
/* 譁咎≡縺ｫ縺､縺�※ */
.price_cnt_itm {
background-color: var(--color-reverse);
padding: 30px;
width: 476px;
height: 168px;
text-align: center;
}
.price_cnt_itm_ttl {
font-size: 1.7rem;
background-color: var(--color-sub);
padding: 5px 32px;
display: inline-block;
}
.price_cnt_itm_ttl.bg_purple {
background-color: #3D12B1;
}
.price_cnt_itm_dtl {
letter-spacing: 0;
}
.price_cnt_table_recommendation {
position: absolute;
z-index: 1;
top: -11px;
background-image: url(/resource/img/leaf/lightning_studio/recommendation.png);
background-size: contain;
background-repeat: no-repeat;
display: block;
width: 98px;
height: 35px;
left: 50%;
transform: translateX(-50%);
}
.price_cnt_sub {
position: relative;
padding-left: 50px;
}
.price_cnt_sub::before {
background-image: url(/resource/img/leaf/lightning_studio/plus.svg);
width: 28px;
height: 28px;
left: 12px;
top: 260px;
}
.price_cnt_sub_inr {
background-color: var(--color-reverse);
width: 294px;
height: 590px;
padding: 76px 30px;
border: 6px solid #D54A00;
margin-top: auto;
letter-spacing: 0;
}
.price_cnt_sub_txt {
position: relative;
font-size: 1.8rem;
font-weight: bold;
padding-left: 30px;
}
.price_cnt_sub_txt::before {
background-image: url(/resource/img/leaf/lightning_studio/check.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
left: 0;
margin-block: calc((1lh - 1em) / 2);
width: 18px;
height: 18px;
}
.price_cnt_note p:nth-of-type(n+2) {
margin-top: 0.5em;
}
@media (max-width: 768px) {
.price_cnt_itm {
width: 100%;
}
.price_cnt_table {
overflow: auto;
width: 100%;
}
.price_cnt_table::-webkit-scrollbar{
display: none;
}
.price_cnt_sub {
position: relative;
padding-top: 50px;
padding-left: 0;
}
.price_cnt_sub,.price_cnt_sub_inr {
width: 100%;
}
.price_cnt_sub_inr {
height: fit-content;
padding: 20px 40px 30px;
}
.price_cnt_sub::before {
left: 50%;
transform: translateX(-50%);
top: 9px;
}
}
/* 縺顔筏霎ｼ縺ｿ縺ｮ豬√ｌ */
.flow_sec {
padding-bottom: 100px;
}
.flow_sec_itm {
padding-bottom: 32px;
position: relative;
}
.flow_sec_itm:nth-of-type(n+2) {
margin-top: 28px;
}
.flow_sec_itm:last-of-type {
padding-bottom: 0;
}
.flow_sec_itm::before {
position: absolute;
content: '';
clip-path: polygon(50% 100%, 0 0, 100% 0);
background-color: var(--color-sub);
width: 65px;
height: 32px;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.flow_sec_itm:last-of-type:before {
width: 0;
}
.flow_sec_itm_inr {
background-color: var(--color-reverse);
padding: 50px;
}
.flow_sec_itm_ttl {
font-size: 2.4rem;
font-weight: bold;
color: var(--color-sub);
display: flex;
gap: 20px;
align-items: center;
}
.flow_sec_itm_step {
display: inline-block;
background-color: var(--color-sub);
font-size: 1.8rem;
padding: 4px 30px;
color: var(--color-reverse);
line-height: calc(26/18);
margin-block: calc((1lh - 1em) / 2);
flex-shrink: 0;
align-self: baseline;
}
.flow_sec_itm_txt {
font-weight: 500;
font-size: 1.8rem;
}
.flow_btns {
width: 633px;
gap: 35px;
}
.flow_btns .g_btn {
max-width: 299px;
}
.flow_btns .g_btn > * {
height: 51px;
}
@media (max-width: 768px) {
.flow_sec_inr {
width: 95%;
margin-inline: auto;
}
.flow_btns {
width: 100%;
gap: 20px;
}
}
@media (max-width: 599px) {
.flow_sec_itm_ttl {
align-items: center;
flex-direction: column;
gap: 0;
}
.flow_sec_itm_step {
align-self: center;
margin-bottom: 5px;
margin-top: 0;
}
}
/* 辟｡譁吶ヨ繝ｩ繧､繧｢繝ｫ */
.freeTrial_cnt {
background-color: var(--color-sub);
margin: 0 auto;
transition: var(--transition);
}
.freeTrial_cnt a {
display: block;
padding: 30px;
}
.freeTrial_cnt_inr {
width: 795px;
margin: 0 auto;
}
.freeTrial_cnt .g_btn {
max-width: 313px;
}
.freeTrial_cnt .g_btn > * {
height: 52px;
box-shadow: none;
}
.freeTrial_img {
width: 360px;
}.example {
display: -ms-grid;
display: grid;
transition: all .5s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
@media (any-hover :hover) {
.freeTrial_cnt:hover {
opacity: .7;
}
.freeTrial_cnt .g_btn:hover > * {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.freeTrial_cnt .g_btn.u_ic:hover::before,.freeTrial_cnt .g_btn.u_ic:hover::after {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media (max-width: 768px) {
.freeTrial_cnt_inr {
width: 100%;
}
.freeTrial_txt {
width: 100%;
}
.freeTrial_cnt .g_btn {
margin-inline: auto;
}
.freeTrial_img {
display: none;
}
}
/* STUDIO 邏ｹ莉玖ｳ�侭 */
.introduction_cnt {
background-color: #F8F8F8;
margin: 0 auto;
border-radius: 9px;
transition: var(--transition);
}
.introduction_cnt a {
display: block;
padding: 50px;
}
.introduction_cnt .g_btn {
max-width: 313px;
margin-left: 50px;
}
.introduction_cnt .g_btn > * {
height: 52px;
box-shadow: none;
}
@media (any-hover :hover) {
.introduction_cnt:hover {
box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, .16);
border-radius: 9px;
}
.introduction_cnt .g_btn:hover > * {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.introduction_cnt .g_btn.u_ic:hover::before,.introduction_cnt .g_btn.u_ic:hover::after {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@media (max-width: 768px) {
.introduction_cnt .g_btn {
margin-left: 0;
margin-inline: auto;
}
.introduction_img {
display: none;
}
}