@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type=checkbox],
[type=radio] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type=search] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type=search]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/*----------------------------------------
変数
----------------------------------------*/
/**
* 画面の高さを基準としたフォントサイズのclamp関数を返す
* 最小フォントサイズと最大フォントサイズ、可変にする画面の高さの範囲を指定
* 例）m-fontsize__h(12, 24, 480, 768) とした場合、
* 高さ480px以下は12px、768px以上は24px、480～768pxの間は可変となる。
* font-size: clamp(12px, -8px + 0.0417 * 100vw, 24px);
*
* @param $minSize 最小フォントサイズ
* @param $maxSize 最大フォントサイズ
* @param $minHeight フォントサイズを可変にする画面サイズの範囲（開始）
* @param $maxHeight フォントサイズを可変にする画面サイズの範囲（終了）
* @return clamp(最小値, 基準値, 最大値)
*/
/**
* 画面の幅を基準としたフォントサイズのclamp関数を返す
* 最小フォントサイズと最大フォントサイズ、可変にする画面幅の範囲を指定
* 例）m-fontsize__w(12, 24, 480, 768) とした場合、
* 幅480px以下は12px、768px以上は24px、480～768pxの間は可変となる。
* font-size: clamp(12px, -8px + 0.0417 * 100vw, 24px);
*
* @param $minSize 最小フォントサイズ
* @param $maxSize 最大フォントサイズ
* @param $minWidth フォントサイズを可変にする画面サイズの範囲（開始）
* @param $maxWidth フォントサイズを可変にする画面サイズの範囲（終了）
* @return clamp(最小値, 基準値, 最大値)
*/
/**
* 2つの数値からパーセンテージを求める（小数点第一位以下四捨五入）
*
* @param $num 数値1
* @param $max 数値2
* @return 数値2を100%とした場合の数値1の割合
*/
/**
* 値から単位を取り除く
*
* @param $num 値
* @return 数値
*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, a, em {
font-weight: 400;
font-family: "Meiryo", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "BIZ UDPGothic", sans-serif;
font-weight: 500;
font-feature-settings: "palt";
color: #000000;
letter-spacing: normal;
line-height: 1.55;
position: relative;
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: justify;
scrollbar-width: thin;
}
html {
font-size: 18px;
}
@media screen and (max-width: 600px) {
html {
font-size: 3vw;
}
}
nav {
scrollbar-width: thin;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
display: block;
image-rendering: -webkit-optimize-contrast;
}
body > svg {
display: none;
}
figure {
margin: 0;
}
em {
font-style: normal;
font-weight: inherit;
}
/*----------------------------------------
共通
----------------------------------------*/
#l-wrapper {
width: 100%;
position: relative;
overflow: hidden;
display: flex;
}
#l-wrapper::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100dvw;
height: 100dvh;
display: block;
z-index: -2;
background-image: url("../img/common/bg_main.webp");
background-size: cover;
background-position: center;
}
#l-wrapper .l-leftside {
width: calc((100% - 600px) / 2);
height: 100dvh;
}
@media screen and (max-width: 1200px) {
#l-wrapper .l-leftside {
display: flex;
justify-content: center;
}
}
#l-wrapper .l-leftside .l-fixlogo {
position: fixed;
top: 38px;
left: min(3.125vw, 60px);
z-index: 9;
}
@media screen and (max-width: 1200px) {
#l-wrapper .l-leftside .l-fixlogo {
left: auto;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-leftside .l-fixlogo {
display: none;
}
}
#l-wrapper .l-leftside .l-fixlogo img {
width: 100%;
max-width: 18.9vw;
}
#l-wrapper .l-leftside .l-student3 {
animation-name: student_fadein3;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
position: fixed;
top: 10vw;
left: 17.6vw;
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-leftside .l-student3 {
top: 14vw;
left: 15.6vw;
}
}
@media screen and (max-width: 1280px) {
#l-wrapper .l-leftside .l-student3 {
top: 19vw;
left: 13.6vw;
}
}
@media screen and (max-width: 1180px) {
#l-wrapper .l-leftside .l-student3 {
left: 11.6vw;
}
}
@media screen and (max-width: 1180px) {
#l-wrapper .l-leftside .l-student3 {
left: 9.6vw;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-leftside .l-student3 {
display: none;
}
}
#l-wrapper .l-leftside .l-student3 img {
width: 11.9vw;
max-width: 236px;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-leftside .l-student3 img {
width: 10.5vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-leftside .l-student3 img {
width: 9vw;
}
}
#l-wrapper .l-leftside .l-student4 {
animation-name: student_fadein4;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
position: fixed;
bottom: 4vw;
left: 12.8vw;
}
@media screen and (max-height: 900px) {
#l-wrapper .l-leftside .l-student4 {
bottom: 4vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-leftside .l-student4 {
left: 10.8vw;
}
}
@media screen and (max-width: 1280px) {
#l-wrapper .l-leftside .l-student4 {
left: 8.8vw;
}
}
@media screen and (max-width: 1180px) {
#l-wrapper .l-leftside .l-student4 {
left: 6.8vw;
}
}
@media screen and (max-width: 1080px) {
#l-wrapper .l-leftside .l-student4 {
left: 7.8vw;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-leftside .l-student4 {
display: none;
}
}
#l-wrapper .l-leftside .l-student4 img {
width: 6.8vw;
max-width: 198px;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-leftside .l-student4 img {
width: 5.8vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-leftside .l-student4 img {
width: 4.8vw;
}
}
@keyframes student_fadein3 {
0% {
transform: translate(-80px, 100px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
@keyframes student_fadein4 {
0% {
transform: translate(-180px, -70px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
#l-wrapper .l-rightside {
width: calc((100% - 600px) / 2);
height: 100dvh;
}
@media screen and (max-width: 1900px) {
#l-wrapper .l-rightside {
display: flex;
justify-content: center;
}
}
@media screen and (max-height: 800px) {
#l-wrapper .l-rightside {
align-items: center;
}
}
#l-wrapper .l-rightside .l-sidenavi {
position: fixed;
top: 19vh;
padding-left: min(4.16vw, 80px);
z-index: 9;
}
@media screen and (max-height: 800px) {
#l-wrapper .l-rightside .l-sidenavi {
top: auto;
}
}
@media screen and (max-width: 1900px) {
#l-wrapper .l-rightside .l-sidenavi {
padding-left: 20px;
padding-right: 20px;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-rightside .l-sidenavi {
display: none;
}
}
#l-wrapper .l-rightside .l-sidenavi ul {
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
transition: padding 0.3s ease;
}
#l-wrapper .l-rightside .l-sidenavi ul li {
display: flex;
align-items: center;
width: fit-content;
height: auto;
margin-bottom: 10px;
}
@media screen and (max-width: 1100px) {
#l-wrapper .l-rightside .l-sidenavi ul li {
margin-bottom: 7px;
}
}
#l-wrapper .l-rightside .l-sidenavi ul li a {
display: flex;
align-items: baseline;
}
#l-wrapper .l-rightside .l-sidenavi ul li a span {
font-size: clamp(18px, 1.79vw, 28px);
font-weight: 600;
color: #000000;
line-height: 1.4;
text-align: left;
word-break: auto-phrase;
transition: 0.3s ease;
}
#l-wrapper .l-rightside .l-sidenavi ul li a::before {
content: "●";
display: inline-block;
color: #0063D6;
margin-right: 2px;
font-size: clamp(24px, 1.875vw, 28px);
}
#l-wrapper .l-rightside .l-sidenavi ul li a:hover span {
color: #E04826;
}
#l-wrapper .l-rightside .l-student1 {
animation-name: student_fadein1;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
position: fixed;
top: 2.55vw;
right: 2vw;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-rightside .l-student1 {
top: 1vw;
right: 1vw;
}
}
@media screen and (max-width: 1080px) {
#l-wrapper .l-rightside .l-student1 {
top: 4vw;
right: 8vw;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-rightside .l-student1 {
display: none;
}
}
#l-wrapper .l-rightside .l-student1 img {
width: 7vw;
max-width: 236px;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-rightside .l-student1 img {
width: 6vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-rightside .l-student1 img {
width: 5vw;
}
}
#l-wrapper .l-rightside .l-student2 {
animation-name: student_fadein2;
animation-duration: 0.5s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
position: fixed;
bottom: 4.2vw;
right: 19.9vw;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-rightside .l-student2 {
bottom: 3.2vw;
right: 17.9vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-rightside .l-student2 {
bottom: 3.5vw;
right: 15.9vw;
}
}
@media screen and (max-width: 1280px) {
#l-wrapper .l-rightside .l-student2 {
right: 12.9vw;
}
}
@media screen and (max-width: 1180px) {
#l-wrapper .l-rightside .l-student2 {
right: 10.9vw;
}
}
@media screen and (max-width: 1080px) {
#l-wrapper .l-rightside .l-student2 {
right: 6vw;
bottom: 5.5vw;
}
}
@media screen and (max-width: 1000px) {
#l-wrapper .l-rightside .l-student2 {
display: none;
}
}
#l-wrapper .l-rightside .l-student2 img {
width: 10vw;
max-width: 189px;
}
@media screen and (max-width: 1680px) {
#l-wrapper .l-rightside .l-student2 img {
width: 8.5vw;
}
}
@media screen and (max-width: 1480px) {
#l-wrapper .l-rightside .l-student2 img {
width: 7.5vw;
}
}
@keyframes student_fadein1 {
0% {
transform: translate(150px, -70px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
@keyframes student_fadein2 {
0% {
transform: translate(30px, 100px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
#l-wrapper .l-rightside.is-in1 .l-sidenavi ul li:nth-of-type(1) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in2 .l-sidenavi ul li:nth-of-type(2) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in3 .l-sidenavi ul li:nth-of-type(3) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in4 .l-sidenavi ul li:nth-of-type(4) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in5 .l-sidenavi ul li:nth-of-type(5) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in6 .l-sidenavi ul li:nth-of-type(6) a span {
color: #E04826;
}
#l-wrapper .l-rightside.is-in7 .l-sidenavi ul li:nth-of-type(7) a span {
color: #E04826;
}
#l-wrapper .l-container {
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
z-index: 10;
background-color: #FFFFFF;
}
#l-wrapper .l-container > article {
width: 100%;
}
#l-wrapper .l-container > article .l-section {
width: 100%;
}
#l-wrapper .l-container > article .l-section__inner {
width: 100%;
padding-left: min(6.6%, 40px);
padding-right: min(6.6%, 40px);
box-sizing: border-box;
}
.l-totop_outer {
position: fixed;
bottom: 0;
width: 100%;
height: 0;
max-width: 600px;
z-index: 21;
}
.l-totop_outer #l-totop {
display: none;
width: 45px;
height: 45px;
background-color: #E04826;
border-radius: 50px;
position: relative;
bottom: 85px;
float: right;
margin-right: 10px;
cursor: pointer;
}
.l-totop_outer #l-totop span {
width: 20px;
height: 20px;
border-top: 4px solid #FFFFFF;
border-right: 4px solid #FFFFFF;
display: block;
position: absolute;
inset: 8px 0 0 0;
margin: auto;
rotate: -45deg;
}
/* -------------------------
アニメーション
--------------------------*/
.l-fadeIn--active {
animation-name: fadeInAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeInAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.l-fadeInearly--active {
animation-name: fadeInAnime;
animation-duration: 0.3s;
animation-fill-mode: forwards;
opacity: 0;
}
.l-fadeUp--active {
animation-name: fadeUpAnime;
animation-duration: 1.25s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.l-fadeUpsmall--active {
animation-name: fadeUpsmallAnime;
animation-duration: 0.6s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeUpsmallAnime {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.l-fadeUplord--active {
animation-name: fadeUpAnime;
animation-duration: 1.25s;
animation-fill-mode: forwards;
opacity: 0;
}
.l-fadeDown--active {
animation-name: fadeDownAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeDownAnime {
from {
opacity: 0;
transform: translateY(-100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.l-fadeLeft--active {
animation-name: fadeLeftAnime;
animation-duration: 1.3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeLeftAnime {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.l-fadeRight--active {
animation-name: fadeRightAnime;
animation-duration: 1.3s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeRightAnime {
from {
opacity: 0;
transform: translateX(100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.l-fadeRightBottom--active {
animation-name: fadeRightBottomAnime;
animation-duration: 0.7s;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes fadeRightBottomAnime {
from {
opacity: 0;
transform: translate(80px, 50px);
}
to {
opacity: 1;
transform: translateX(0, 0);
}
}
.l-fadeLeftQuic--active {
animation-name: fadeLeftAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
.l-fadeRightQuic--active {
animation-name: fadeRightAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
opacity: 0;
}
.l-skewRight--active {
animation: skewRightAnime 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes skewRightAnime {
0% {
transform: translate(180px, -40px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
.l-skewLeft--active {
animation: skewLeftAnime 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes skewLeftAnime {
0% {
transform: translate(-180px, -40px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
.l-skewUp--active {
animation: skewUpAnime 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes skewUpAnime {
0% {
transform: translate(0, 40px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
.l-skewRightslide--active {
animation: skewRightslideAnime 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes skewRightslideAnime {
0% {
transform: translate(180px, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
.l-skewleftUp--active {
animation: skewleftUpAnime 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards, shakeUpAnime 2s ease-in-out 1s infinite;
}
@keyframes skewleftUpAnime {
0% {
transform: translate(-40px, 40px);
opacity: 0;
}
100% {
transform: translate(0, 0);
}
20%, 100% {
opacity: 1;
}
}
@keyframes shakeUpAnime {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(5px);
}
}
.l-zoomIn--active {
animation-name: zoomInAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes zoomInAnime {
from {
transform: scale(0.6);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.l-smoothUp--active {
animation-name: smoothAnime;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
@keyframes smoothAnime {
from {
transform: translate3d(0, 100%, 0) skewY(12deg);
opacity: 0;
}
to {
transform: translate3d(0, 0, 0) skewY(0);
opacity: 1;
}
}
.l-zoomBeat {
animation: zoomBeatAnime 4s infinite ease-in-out;
}
@keyframes zoomBeatAnime {
0% {
transform: scale(1);
}
4% {
transform: scale(1.1);
}
7% {
transform: scale(1);
}
11% {
transform: scale(1.07);
}
18% {
transform: scale(1);
}
}
.l-rotateYinfinite {
-webkit-perspective: 1000;
perspective: 1000;
transform: translate3d(0, 0, 0);
animation-name: rotateYAnimeinfinite;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes rotateYAnimeinfinite {
0% {
transform: rotateY(0);
}
20% {
transform: rotateY(-360deg);
}
100% {
transform: rotateY(-360deg);
}
}
.l-rotateY {
-webkit-perspective: 1000;
perspective: 1000;
transform: translate3d(0, 0, 0);
}
.l-rotateY--active {
animation-name: rotateYAnime;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes rotateYAnime {
from {
transform: rotateY(0);
opacity: 0;
}
to {
transform: rotateY(-360deg);
opacity: 1;
}
}
.l-rotateLittle--active {
animation: rotateLittleAnime 5s ease-in-out infinite;
}
@keyframes rotateLittleAnime {
5% {
transform: rotate(10deg);
}
10% {
transform: rotate(-15deg);
}
15% {
transform: rotate(7deg);
}
20% {
transform: rotate(-10deg);
}
30% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.l-blink {
animation: blinkAnime 1s ease-in-out infinite alternate;
}
@keyframes blinkAnime {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.l-zoomstar1 {
animation: zoomStarAnime 0.5s ease 0s infinite alternate;
animation-delay: 0s;
}
.l-zoomstar2 {
animation: zoomStarAnime 0.5s ease 0s infinite alternate;
animation-delay: 0.3s;
}
@keyframes zoomStarAnime {
from {
transform: scale(1, 1);
transform-origin: 50% 50%;
}
to {
transform: scale(1.1, 1.1);
transform-origin: 50% 50%;
}
}
.l-swing {
animation: swingAnime 5s ease-in-out infinite;
}
@keyframes swingAnime {
5% {
transform: rotate(5deg);
}
10% {
transform: rotate(-3deg);
}
15% {
transform: rotate(2deg);
}
20% {
transform: rotate(-2deg);
}
25% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.l-swing2 {
animation: swingAnime2 3s ease-in-out infinite;
}
@keyframes swingAnime2 {
5% {
transform: rotate(5deg);
}
10% {
transform: rotate(-3deg);
}
15% {
transform: rotate(2deg);
}
20% {
transform: rotate(-2deg);
}
25% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
.l-bounce {
animation-name: bounceAnime;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: center bottom;
}
@keyframes bounceAnime {
0% {
transform: scale(1, 1) translate(0%, 0%);
}
/* 初期状態 */
30% {
transform: scale(1.1, 0.9) translate(0%, 0%);
}
/* 地面に着地し、その変動で潰れだす */
40% {
transform: scale(1, 1) translate(0%, 0%);
}
/* 潰れた反動で一瞬元に戻る */
50% {
transform: scale(0.9, 1.1) translate(0%, -5%);
}
/* 潰れた反動で縦に伸び、その勢いでバウンド開始 */
60% {
transform: scale(1, 1) translate(0%, -10%);
}
/* 潰れた反動が終り、空中で元に戻る */
100% {
transform: scale(1, 1) translate(0%, 0%);
}
/* 初期状態に戻る */
}
.l-flip--active {
animation: flipAnime 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes flipAnime {
0% {
transform: rotateY(0);
transform-origin: center;
opacity: 0;
}
100% {
transform: rotateY(180deg);
transform-origin: center;
opacity: 1;
}
}
.l-delay-time01 {
animation-delay: 0.1s;
}
.l-delay-time02 {
animation-delay: 0.2s;
}
.l-delay-time03 {
animation-delay: 0.3s;
}
.l-delay-time05 {
animation-delay: 0.5s;
}
.l-delay-time07 {
animation-delay: 0.7s !important;
}
.l-delay-time10 {
animation-delay: 1s;
}
/* スクロールをしたら出現する要素にはじめに透過0を指定*/
.l-fadeIn,
.l-fadeInearly,
.l-fadeUp,
.l-fadeUpsmall,
.l-fadeDown,
.l-fadeLeft,
.l-fadeRight,
.l-fadeRightBottom,
.l-fadeLeftQuic,
.l-fadeRightQuic,
.l-skewRight,
.l-skewLeft,
.l-skewleftUp,
.l-skewUp,
.l-skewRightslide,
.l-zoomIn,
.l-smoothUp,
.l-flip {
opacity: 0;
}
@media print {
.l-fadeIn,
.l-fadeInearly,
.l-fadeUp,
.l-fadeUpsmall,
.l-fadeDown,
.l-fadeLeft,
.l-fadeRight,
.l-fadeRightBottom,
.l-fadeLeftQuic,
.l-fadeRightQuic,
.l-skewRight,
.l-skewLeft,
.l-skewleftUp,
.l-skewUp,
.l-skewRightslide,
.l-zoomIn,
.l-smoothUp,
.l-flip {
opacity: 1;
}
}
/*----------------------------------------
ヘッダー
----------------------------------------*/
header {
position: relative;
z-index: 20;
}
header .l-hd__inner {
position: fixed;
top: 0;
width: 100%;
height: 0;
max-width: 600px;
}
header .l-hd__hamburger {
width: 42px;
height: 42px;
border: 0;
border-radius: 5px;
background-color: #E04826;
position: relative;
float: right;
margin-right: 10px;
margin-top: 10px;
z-index: 21;
cursor: pointer;
}
header .l-hd__hamburger::before {
content: "";
width: 21px;
height: 2px;
background-color: #FFFFFF;
display: block;
position: absolute;
top: 10px;
left: 50%;
transform-origin: center;
translate: -50%;
transition: all 0.3s ease;
}
header .l-hd__hamburger::after {
content: "";
width: 21px;
height: 2px;
background-color: #FFFFFF;
display: block;
position: absolute;
top: 20px;
left: 50%;
translate: -50%;
transition: opacity 0.3s ease;
}
header .l-hd__hamburger span {
width: 21px;
height: 2px;
background-color: #FFFFFF;
display: block;
position: absolute;
top: 30px;
left: 50%;
translate: -50%;
transition: all 0.3s ease;
}
header .l-hd__hamburger--active::before {
translate: -50% 10px;
rotate: 45deg;
}
header .l-hd__hamburger--active::after {
opacity: 0;
}
header .l-hd__hamburger--active span {
translate: -50% -10px;
rotate: -45deg;
}
header .l-hd__navi {
width: 100%;
height: 0;
background-color: rgba(0, 99, 214, 0.85);
position: absolute;
top: 0;
left: 0;
transition: 0.3s ease;
}
header .l-hd__navi ul {
display: flex;
flex-direction: column;
padding: 0;
box-sizing: border-box;
transition: padding 0.3s ease;
}
header .l-hd__navi ul li {
display: flex;
align-items: center;
width: 100%;
height: 0;
max-height: 100px;
visibility: hidden;
opacity: 0;
transition: 0.3s ease;
border-bottom: none;
}
header .l-hd__navi ul li:first-of-type {
border-top: none;
}
header .l-hd__navi ul li:last-of-type a span {
font-size: max(1.56rem, 17.5px);
}
header .l-hd__navi ul li a {
display: flex;
align-items: baseline;
width: 100%;
padding-left: 7.1%;
padding-right: 7.1%;
}
header .l-hd__navi ul li a span {
font-size: max(1.556rem, 18px);
font-weight: 600;
color: #FFFFFF;
line-height: 1.4;
}
header .l-hd__navi ul li a::before {
content: "●";
display: inline-block;
color: #FFF000;
margin-right: 2px;
font-size: max(1.556rem, 18px);
}
header .l-hd__navi.l-hd__navi--active {
height: 100dvh;
position: absolute;
top: 0;
left: 0;
}
header .l-hd__navi.l-hd__navi--active ul {
padding: 100px 0 38px;
}
header .l-hd__navi.l-hd__navi--active ul li {
height: calc((100dvh - 138px) / 8);
border-bottom: solid 1px #FFFFFF;
visibility: visible;
opacity: 1;
}
header .l-hd__navi.l-hd__navi--active ul li:first-of-type {
border-top: solid 1px #FFFFFF;
}
/*----------------------------------------
フッタ
----------------------------------------*/
footer {
width: 100%;
background-color: #FFFFFF;
}
footer .l-ft__notes {
width: 100%;
padding: 0 6.5%;
height: 50px;
}
footer .l-ft__notes p {
font-size: max(0.833rem, 12px);
padding-left: 1em;
text-indent: -1em;
}
footer .l-ft__content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0 6.5%;
background-color: #FAF2C5;
padding-top: 20px;
padding-bottom: 20px;
}
footer .l-ft__content img {
width: 100%;
max-width: 518px;
}
footer .l-ft__content p {
margin-top: 10px;
margin-bottom: 5px;
display: flex;
justify-content: center;
font-size: max(1.111rem, 16px);
font-weight: 600;
text-align: center;
}
footer .l-ft__content address {
margin-bottom: 15px;
display: flex;
justify-content: center;
font-style: normal;
font-size: max(1rem, 14px);
text-align: center;
}
footer .l-ft__content em {
display: flex;
justify-content: center;
font-size: max(1.667rem, 20px);
font-weight: 600;
line-height: 1.2;
text-align: center;
}
footer small {
width: 100%;
height: 60px;
background-color: #E04826;
display: flex;
justify-content: center;
align-items: center;
font-size: max(0.694rem, 12px);
font-weight: 500;
color: #FFFFFF;
}
/*----------------------------------------
SPナビ
----------------------------------------*/
/*----------------------------------------
アンカータグ
----------------------------------------*/
/*----------------------------------------
改行
----------------------------------------*/
/*----------------------------------------
ボタン
----------------------------------------*/
/*----------------------------------------
フォーム
----------------------------------------*/
/*----------------------------------------
見出し
----------------------------------------*/
/*----------------------------------------
リスト
----------------------------------------*/
/*----------------------------------------
span
----------------------------------------*/
/*----------------------------------------
svg
----------------------------------------*/
/*----------------------------------------
テーブル
----------------------------------------*/
/*----------------------------------------
テキスト
----------------------------------------*/
/*----------------------------------------
POST一覧ページ
----------------------------------------*/
.wp-pagenavi {
display: flex;
gap: 0 10px;
justify-content: center;
align-items: center;
padding-bottom: 75px;
}
@media screen and (max-width: 600px) {
.wp-pagenavi {
padding-bottom: 86px;
}
}
.wp-pagenavi a, .wp-pagenavi span {
font-family: "Poppins", sans-serif;
font-size: 20px;
font-weight: 400;
}
@media screen and (max-width: 768px) {
.wp-pagenavi a, .wp-pagenavi span {
font-size: 31px;
}
}
@media screen and (max-width: 600px) {
.wp-pagenavi a, .wp-pagenavi span {
font-size: clamp(15px, 4dvw, 31px);
}
}
.wp-pagenavi a.page-numbers, .wp-pagenavi span.page-numbers {
width: 50px;
height: 50px;
border: solid 1px #000000;
border-radius: 80px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.wp-pagenavi a.page-numbers, .wp-pagenavi span.page-numbers {
width: 80px;
height: 80px;
}
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers, .wp-pagenavi span.page-numbers {
width: clamp(40px, 10.67dvw, 80px);
height: clamp(40px, 10.67dvw, 80px);
}
}
.wp-pagenavi a.page-numbers:hover, .wp-pagenavi span.page-numbers:hover {
color: #FFFFFF;
background-color: #E04826;
}
.wp-pagenavi a.page-numbers.prev, .wp-pagenavi a.page-numbers.next, .wp-pagenavi span.page-numbers.prev, .wp-pagenavi span.page-numbers.next {
width: 30px;
border: none;
transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
.wp-pagenavi a.page-numbers.prev, .wp-pagenavi a.page-numbers.next, .wp-pagenavi span.page-numbers.prev, .wp-pagenavi span.page-numbers.next {
width: 40px;
}
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers.prev, .wp-pagenavi a.page-numbers.next, .wp-pagenavi span.page-numbers.prev, .wp-pagenavi span.page-numbers.next {
width: clamp(30px, 8dvw, 40px);
}
}
.wp-pagenavi a.page-numbers.prev:hover, .wp-pagenavi a.page-numbers.next:hover, .wp-pagenavi span.page-numbers.prev:hover, .wp-pagenavi span.page-numbers.next:hover {
opacity: 0.6;
background-color: unset;
}
.wp-pagenavi a.page-numbers.prev, .wp-pagenavi span.page-numbers.prev {
margin-right: 10px;
}
@media screen and (max-width: 480px) {
.wp-pagenavi a.page-numbers.prev, .wp-pagenavi span.page-numbers.prev {
margin-right: 0;
}
}
.wp-pagenavi a.page-numbers.prev::before, .wp-pagenavi span.page-numbers.prev::before {
content: "";
width: 10px;
height: 10px;
background-image: url(../img/common/ico_arrow_right02_black.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
scale: -1 1;
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers.prev::before, .wp-pagenavi span.page-numbers.prev::before {
width: clamp(10px, 2.67dvw, 17px);
height: clamp(10px, 2.67dvw, 17px);
}
}
.wp-pagenavi a.page-numbers.next, .wp-pagenavi span.page-numbers.next {
margin-left: 10px;
}
@media screen and (max-width: 480px) {
.wp-pagenavi a.page-numbers.next, .wp-pagenavi span.page-numbers.next {
margin-left: 0;
}
}
.wp-pagenavi a.page-numbers.next::after, .wp-pagenavi span.page-numbers.next::after {
content: "";
width: 10px;
height: 10px;
background-image: url(../img/common/ico_arrow_right02_black.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers.next::after, .wp-pagenavi span.page-numbers.next::after {
width: clamp(10px, 2.67dvw, 17px);
height: clamp(10px, 2.67dvw, 17px);
}
}
.wp-pagenavi a.page-numbers.first, .wp-pagenavi a.page-numbers.last, .wp-pagenavi span.page-numbers.first, .wp-pagenavi span.page-numbers.last {
width: 30px;
border: none;
transition: opacity 0.3s ease;
}
@media screen and (max-width: 768px) {
.wp-pagenavi a.page-numbers.first, .wp-pagenavi a.page-numbers.last, .wp-pagenavi span.page-numbers.first, .wp-pagenavi span.page-numbers.last {
width: 40px;
}
}
.wp-pagenavi a.page-numbers.first:hover, .wp-pagenavi a.page-numbers.last:hover, .wp-pagenavi span.page-numbers.first:hover, .wp-pagenavi span.page-numbers.last:hover {
opacity: 0.6;
background-color: unset;
}
.wp-pagenavi a.page-numbers.first::before, .wp-pagenavi a.page-numbers.first::after, .wp-pagenavi span.page-numbers.first::before, .wp-pagenavi span.page-numbers.first::after {
content: "";
width: 10px;
height: 10px;
background-image: url(../img/common/ico_arrow_right02_black.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
scale: -1 1;
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers.first::before, .wp-pagenavi a.page-numbers.first::after, .wp-pagenavi span.page-numbers.first::before, .wp-pagenavi span.page-numbers.first::after {
width: clamp(10px, 2.67dvw, 17px);
height: clamp(10px, 2.67dvw, 17px);
}
}
.wp-pagenavi a.page-numbers.first::after, .wp-pagenavi span.page-numbers.first::after {
margin-left: 2px;
}
.wp-pagenavi a.page-numbers.last::before, .wp-pagenavi a.page-numbers.last::after, .wp-pagenavi span.page-numbers.last::before, .wp-pagenavi span.page-numbers.last::after {
content: "";
width: 10px;
height: 10px;
background-image: url(../img/common/ico_arrow_right02_black.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
@media screen and (max-width: 600px) {
.wp-pagenavi a.page-numbers.last::before, .wp-pagenavi a.page-numbers.last::after, .wp-pagenavi span.page-numbers.last::before, .wp-pagenavi span.page-numbers.last::after {
width: clamp(10px, 2.67dvw, 17px);
height: clamp(10px, 2.67dvw, 17px);
}
}
.wp-pagenavi a.page-numbers.last::after, .wp-pagenavi span.page-numbers.last::after {
margin-left: 2px;
}
.wp-pagenavi span.current {
border-color: #E04826;
color: #FFFFFF;
background-color: #E04826;
cursor: default;
}
.wp-pagenavi span.current:hover {
opacity: 1;
}
/*----------------------------------------
404エラー
----------------------------------------*/
/*----------------------------------------
下層ページ共通スタイル
----------------------------------------*/
/*----------------------------------------
POST詳細ページ
----------------------------------------*/
.p-single__editor {
width: 100%;
overflow: hidden;
}
.p-single__editor h1, .p-single__editor h2, .p-single__editor h3, .p-single__editor h4, .p-single__editor h5, .p-single__editor h6, .p-single__editor ul, .p-single__editor ol, .p-single__editor dl, .p-single__editor li, .p-single__editor dt, .p-single__editor dd, .p-single__editor p, .p-single__editor div, .p-single__editor span, .p-single__editor img, .p-single__editor a, .p-single__editor table, .p-single__editor tr, .p-single__editor th, .p-single__editor td {
margin: 0;
padding: 0;
border: 0;
letter-spacing: 1px;
font-weight: 400;
font-size: clamp(14px, 10.6666666667px + 0.0069 * 100vw, 16px);
vertical-align: baseline;
box-sizing: border-box;
line-height: 160%;
word-wrap: break-word;
max-width: 100%;
}
.p-single__editor h1, .p-single__editor h2, .p-single__editor h3, .p-single__editor h4, .p-single__editor h5, .p-single__editor h6 {
clear: both;
font-weight: 700;
margin: 10px 0;
}
.p-single__editor h1:first-child,
.p-single__editor h2:first-child,
.p-single__editor h3:first-child,
.p-single__editor h4:first-child,
.p-single__editor h5:first-child,
.p-single__editor h6:first-child {
margin-top: 0;
}
.p-single__editor h1 {
font-size: xx-large;
}
.p-single__editor h2 {
font-size: x-large;
}
.p-single__editor h3 {
font-size: large;
}
.p-single__editor h4 {
font-size: medium;
}
.p-single__editor h5 {
font-size: small;
}
.p-single__editor h6 {
font-size: x-small;
}
.p-single__editor ul {
padding-left: 23px;
}
.p-single__editor ul li {
list-style-type: disc;
}
.p-single__editor ol {
padding-left: 23px;
}
.p-single__editor ol li {
list-style-type: decimal;
}
.p-single__editor p {
line-height: 175%;
}
.p-single__editor a {
color: #000000;
}
.p-single__editor img {
border: 0;
height: auto;
max-width: 100%;
vertical-align: middle;
margin: 0 auto 30px;
}
.p-single__editor img + p {
margin-top: 50px;
}
.p-single__editor .alignleft {
float: left;
margin: 7px 28px 28px 0;
}
.p-single__editor .alignright {
float: right;
margin: 7px 0 28px 28px;
}
.p-single__editor .aligncenter {
clear: both;
display: block;
margin: 7px auto;
}
.p-single__editor .wp-caption {
background: transparent;
border: none;
margin: 0 0 28px 0;
max-width: 100%;
padding: 0;
text-align: inherit;
}
.p-single__editor .wp-caption.alignleft {
margin: 7px 28px 21px 0;
}
.p-single__editor .wp-caption.alignright {
margin: 7px 0 21px 28px;
}
.p-single__editor .wp-caption.aligncenter {
margin: 7px auto;
}
.p-single__editor .wp-caption .wp-caption-text,
.p-single__editor .wp-caption-dd {
font-size: 1.4rem;
line-height: 160%;
padding: 7px 0;
}
.p-single__pagenavi {
width: 100%;
max-width: 882px;
margin: 112px auto clamp(188px, 24.48dvw, 268px);
}
@media screen and (max-width: 600px) {
.p-single__pagenavi {
margin: clamp(50px, 13.33dvw, 100px) auto clamp(78px, 20.8dvw, 155px);
}
}
.p-single__pagenavi .wp-pagenavi {
padding-bottom: 0;
margin-bottom: 0;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.p-single__pagenavi .wp-pagenavi {
gap: 0 40px;
justify-content: center;
}
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi {
gap: 0 clamp(22px, 5.87dvw, 44px);
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers {
font-size: clamp(16px, 2.08dvw, 18px);
position: relative;
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi .page-numbers {
font-size: clamp(13px, 3.47dvw, 26px);
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers.prev {
width: calc((100% - 72px) / 3);
height: clamp(54px, 7.03dvw, 74px);
border: solid 1px #000000;
border-radius: 74px;
margin-right: 0;
position: absolute;
top: 0;
left: 0;
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.prev {
width: 220px;
position: relative;
}
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.prev {
width: 50%;
height: clamp(55px, 14.67dvw, 110px);
padding-left: 1em;
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers.prev::before {
position: absolute;
left: 2.5dvw;
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.prev::before {
width: clamp(8px, 2.13dvw, 15px);
height: clamp(7px, 1.87dvw, 14px);
left: clamp(30px, 8dvw, 60px);
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers.prev:hover {
color: #000000;
background-color: #E04826;
opacity: 1;
}
.p-single__pagenavi .wp-pagenavi .page-numbers.next {
width: calc((100% - 72px) / 3);
height: clamp(54px, 7.03dvw, 74px);
border: solid 1px #000000;
border-radius: 74px;
margin-left: 0;
position: absolute;
top: 0;
right: 0;
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.next {
width: 220px;
position: relative;
}
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.next {
width: 50%;
height: clamp(55px, 14.67dvw, 110px);
padding-right: 1em;
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers.next::after {
position: absolute;
right: 2.5dvw;
}
@media screen and (max-width: 600px) {
.p-single__pagenavi .wp-pagenavi .page-numbers.next::after {
width: clamp(8px, 2.13dvw, 15px);
height: clamp(7px, 1.87dvw, 14px);
right: clamp(30px, 8dvw, 60px);
}
}
.p-single__pagenavi .wp-pagenavi .page-numbers.next:hover {
color: #000000;
background-color: #E04826;
opacity: 1;
}
.p-single__pagenavi > a {
width: calc((100% - 72px) / 3);
height: clamp(54px, 7.03dvw, 74px);
border: solid 1px #000000;
border-radius: 74px;
font-size: clamp(16px, 2.08dvw, 18px);
letter-spacing: 0.15em;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
transition: all 0.3s ease;
}
@media screen and (max-width: 768px) {
.p-single__pagenavi > a {
width: 480px;
margin: 40px auto 0;
position: static;
translate: unset;
}
}
@media screen and (max-width: 600px) {
.p-single__pagenavi > a {
width: 100%;
height: clamp(55px, 14.67dvw, 110px);
margin-top: clamp(22px, 5.87dvw, 44px);
font-size: clamp(13px, 3.47dvw, 26px);
}
}
.p-single__pagenavi > a:hover {
color: #000000;
background-color: #E04826;
opacity: 1;
}
/*----------------------------------------
トップページ
----------------------------------------*/
.p-home {
overflow: hidden;
width: 100%;
}
.p-home .p-home__mv {
padding: 10px 0;
background-color: #FAF2C5;
position: relative;
}
.p-home .p-home__mv h1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.p-home .p-home__mv h1 img {
width: 100%;
}
.p-home .p-home__mv .p-home__mv__slider {
padding-top: clamp(100px, 26.66vw, 170px);
}
.p-home .p-home__mv .p-home__mv__slider .splide__slide {
width: 100%;
max-width: 520px;
aspect-ratio: 520/900;
}
.p-home .p-home__mv .p-home__mv__slider .splide__slide img {
width: 100%;
}
.p-home .p-home__choose {
padding-bottom: 48px;
background-color: #FAF2C5;
}
.p-home .p-home__choose .p-home__choose__title {
padding-bottom: 25px;
margin-bottom: 30px;
position: relative;
}
.p-home .p-home__choose .p-home__choose__title h2 {
width: 100%;
margin-bottom: 7px;
position: relative;
}
.p-home .p-home__choose .p-home__choose__title h2 img {
width: 100%;
}
.p-home .p-home__choose .p-home__choose__title h2 img:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.p-home .p-home__choose .p-home__choose__title p {
width: 50dvw;
max-width: 300px;
margin: 0 auto;
font-size: max(14px, 1rem);
font-weight: 600;
}
.p-home .p-home__choose .p-home__choose__title div:nth-of-type(1) {
width: 13.5dvw;
max-width: 81px;
position: absolute;
bottom: 0;
left: clamp(2px, 0.53vw, 8px);
}
.p-home .p-home__choose .p-home__choose__title div:nth-of-type(2) {
width: 15.3dvw;
max-width: 92px;
position: absolute;
bottom: 0;
right: clamp(2px, 0.53vw, 8px);
}
.p-home .p-home__choose .p-home__choose__title div img {
width: 100%;
}
.p-home .p-home__choose ul {
display: flex;
gap: clamp(30px, 8vw, 50px) 0;
flex-direction: column;
}
.p-home .p-home__choose ul li {
position: relative;
}
.p-home .p-home__choose ul li div:not(:nth-of-type(1)) {
position: absolute;
top: 0;
left: 0;
}
.p-home .p-home__choose ul li img {
width: 100%;
}
.p-home .p-home__choose ul li:nth-of-type(1) div:nth-of-type(2) {
z-index: 2;
}
.p-home .p-home__choose ul li:nth-of-type(1) div:nth-of-type(3) {
z-index: 1;
}
.p-home .p-home__choose ul li:nth-of-type(1) div:nth-of-type(4) {
z-index: 3;
}
.p-home .p-home__choose ul li:nth-of-type(1) div:nth-of-type(5) {
z-index: 4;
}
.p-home .p-home__choose ul li:nth-of-type(1) div:nth-of-type(6) {
z-index: 4;
}
.p-home .p-home__choose ul li:nth-of-type(2) div:nth-of-type(2) {
z-index: 2;
}
.p-home .p-home__choose ul li:nth-of-type(2) div:nth-of-type(3) {
z-index: 1;
}
.p-home .p-home__choose ul li:nth-of-type(2) div:nth-of-type(4) {
z-index: 3;
}
.p-home .p-home__trivia {
height: clamp(350px, 93.33vw, 540px);
margin-bottom: clamp(20px, 5.33vw, 50px);
background-color: #FAF2C5;
}
.p-home .p-home__trivia .l-section__inner {
margin-bottom: 20px;
}
.p-home .p-home__trivia .l-section__inner h2 {
position: relative;
}
.p-home .p-home__trivia .l-section__inner h2 img {
width: 100%;
}
.p-home .p-home__trivia .l-section__inner h2 img:nth-of-type(1) {
position: relative;
z-index: 1;
}
.p-home .p-home__trivia .l-section__inner h2 img:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
.p-home .p-home__trivia .p-home__trivia__slider {
width: 100dvw;
margin: 0 calc(50% - 50vw);
position: absolute;
}
.p-home .p-home__trivia .p-home__trivia__slider .splide__list .splide__slide {
width: 85%;
max-width: 480px;
aspect-ratio: 480/280;
}
.p-home .p-home__trivia .p-home__trivia__slider .splide__list .splide__slide img {
width: 100%;
}
.p-home .p-home__feature {
margin-bottom: 100px;
}
.p-home .p-home__feature h2 {
margin-bottom: 10px;
position: relative;
}
.p-home .p-home__feature h2 img {
width: 100%;
}
.p-home .p-home__feature h2 img:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
z-index: 1;
transform-origin: right;
}
.p-home .p-home__feature .p-home__video {
width: 100%;
max-width: 520px;
aspect-ratio: 560/315;
border: solid 3px #000000;
box-sizing: border-box;
background-color: #000000;
display: flex;
justify-content: center;
align-items: center;
}
.p-home .p-home__feature .p-home__video > iframe {
width: 100%;
height: 100%;
}
.p-home .p-home__introduction {
position: relative;
}
.p-home .p-home__introduction h2 {
width: 100%;
position: relative;
bottom: -1px;
}
.p-home .p-home__introduction h2 img:nth-of-type(1) {
position: absolute;
width: 15%;
max-width: 90px;
height: auto;
bottom: 0;
left: 3.1%;
}
.p-home .p-home__introduction h2 img:nth-of-type(2) {
width: 100%;
height: auto;
}
.p-home .p-home__introduction h2 img:nth-of-type(3) {
position: absolute;
width: 20%;
max-width: 120px;
height: auto;
bottom: 0;
right: 2%;
}
.p-home .p-home__introduction .p-home__introduction__outline {
background-color: #D9E8F9;
padding-bottom: min(6.6%, 40px);
}
.p-home .p-home__introduction .p-home__introduction__outline > p {
width: 100%;
font-size: max(1rem, 14px);
line-height: 1.5;
padding: 20px min(6.6%, 40px) min(8.4vw, 50px);
}
.p-home .p-home__introduction .p-home__introduction__outline > div:nth-of-type(1) {
width: 100%;
}
.p-home .p-home__introduction .p-home__introduction__outline > div:nth-of-type(1) img {
width: 100%;
height: auto;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category {
margin: min(8.4vw, 50px) min(6.6%, 40px) 0;
border: 2px solid #0063DA;
background-color: #FFFFFF;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl {
padding: min(25px, 2.75vw) 3.8%;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl dt {
display: inline-flex;
justify-content: left;
align-items: center;
width: 100%;
font-size: max(1rem, 14px);
line-height: 1.5;
font-weight: 600;
text-align: left;
position: relative;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl dt.p-home__introduction__outline__category--01::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-image: url("../img/home/img_home_introduction_icon1.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-right: 5px;
position: relative;
top: -1px;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl dt.p-home__introduction__outline__category--02::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
background-image: url("../img/home/img_home_introduction_icon2.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
position: relative;
top: -1px;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl dd {
display: inline-flex;
justify-content: left;
align-items: center;
font-size: max(0.889rem, 14px);
line-height: 1.5;
}
.p-home .p-home__introduction .p-home__introduction__outline > div.p-home__introduction__outline__category dl dd.p-home__introduction__outline__category--01 {
padding-bottom: min(25px, 2.75vw);
margin-bottom: min(25px, 2.75vw);
border-bottom: 2px dotted #0063DA;
}
.p-home .p-home__introduction .p-home__introduction__company {
background-color: #D9E8F9;
}
.p-home .p-home__introduction .p-home__introduction__company ul {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
column-gap: 3.4%;
row-gap: min(20px, 3.4vw);
}
@media screen and (max-width: 374px) {
.p-home .p-home__introduction .p-home__introduction__company ul {
flex-direction: column;
}
}
.p-home .p-home__introduction .p-home__introduction__company ul li {
width: 48.3%;
position: relative;
}
@media screen and (max-width: 480px) {
.p-home .p-home__introduction .p-home__introduction__company ul li:nth-of-type(2n) a figure {
right: min(1.5vw, 5px) !important;
}
}
@media screen and (max-width: 374px) {
.p-home .p-home__introduction .p-home__introduction__company ul li {
width: 88.5%;
}
.p-home .p-home__introduction .p-home__introduction__company ul li:nth-of-type(2n) {
align-self: flex-end;
}
.p-home .p-home__introduction .p-home__introduction__company ul li:nth-of-type(2n) a figure {
right: min(1.5vw, 7px) !important;
}
}
.p-home .p-home__introduction .p-home__introduction__company ul li > img {
width: 100%;
height: auto;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a {
transition: opacity 0.3s ease;
position: relative;
display: block;
width: 100%;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a:hover {
opacity: 0.7;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a img {
width: 100%;
height: auto;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure {
position: absolute !important;
display: flex;
align-items: center;
justify-content: center;
max-width: 147px;
width: 49%;
right: min(2vw, 12px);
top: min(35vw, 210px);
}
@media screen and (max-width: 374px) {
.p-home .p-home__introduction .p-home__introduction__company ul li a figure {
max-width: 215px;
width: 50%;
right: min(4.3vw, 20px);
top: min(62.5vw, 300px);
}
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure img {
width: 100%;
height: auto;
backface-visibility: hidden;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption {
position: absolute;
font-weight: 600;
font-size: max(1rem, 12px);
line-height: 1.3;
text-align: center;
padding-right: 8px;
-webkit-font-smoothing: antialiased;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption span {
font-weight: inherit;
font-size: inherit;
line-height: inherit;
text-align: inherit;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption span.p-home__bubble--narrow {
letter-spacing: -2px;
}
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption span.p-home__bubble--thin {
letter-spacing: -5px;
}
@media screen and (max-width: 480px) {
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption {
padding-right: 4px;
}
}
@media screen and (max-width: 374px) {
.p-home .p-home__introduction .p-home__introduction__company ul li a figure figcaption {
font-size: max(1.667rem, 14px);
}
}
.p-home .p-home__introduction .p-home__introduction__company > div {
padding-top: 20px;
padding-bottom: 20px;
}
.p-home .p-home__introduction .p-home__introduction__company > div > div {
width: 100%;
background-image: url("../img/home/bg_home_introduction_student.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
padding-top: 63.4%;
position: relative;
}
.p-home .p-home__introduction .p-home__introduction__company > div > div img {
position: absolute;
}
.p-home .p-home__introduction .p-home__introduction__company > div > div img:nth-of-type(1) {
width: 46.7%;
max-width: 243px;
height: auto;
top: min(5.7vw, 34px);
left: 3.8%;
}
.p-home .p-home__introduction .p-home__introduction__company > div > div img:nth-of-type(2) {
width: 37.8%;
max-width: 197px;
height: auto;
top: min(19vw, 115px);
left: 53%;
}
.p-home .p-home__jobchart > div {
width: 100%;
background-image: url("../img/home/bg_home_introduction_chart.webp");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: min(21.6vw, 130px) 0 min(22.5vw, 135px);
/* モーダル */
}
.p-home .p-home__jobchart > div > div {
width: 100%;
}
.p-home .p-home__jobchart > div > div img {
width: 100%;
height: auto;
}
.p-home .p-home__jobchart > div > div.p-home__dammymodal {
display: none;
}
.p-home .p-home__jobchart > div > div.p-home__modalOpen {
padding-bottom: min(0.75vw, 4.5px);
position: relative;
overflow: hidden;
cursor: pointer;
}
.p-home .p-home__jobchart > div > div.p-home__modalOpen img {
width: 100%;
height: auto;
}
.p-home .p-home__jobchart > div > div.p-home__modalOpen img:nth-of-type(2) {
position: absolute;
bottom: 0px;
right: 1px;
z-index: 1;
}
.p-home .p-home__jobchart > div > div.p-home__modalOpen img:nth-of-type(3) {
position: absolute;
bottom: 3px;
right: 0px;
z-index: 2;
}
.p-home .p-home__jobchart > div .p-home__modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
height: 100dvh;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
z-index: 5;
animation-name: modalopen;
animation-duration: 0.3s;
}
.p-home .p-home__jobchart > div .p-home__modal--inner {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.p-home .p-home__jobchart > div .p-home__modal--inner > div {
background-color: #FFFFFF;
}
.p-home .p-home__jobchart > div .p-home__modal--inner .fade-enter-active {
transition: opacity 0.3s;
}
.p-home .p-home__jobchart > div .p-home__modal--inner .fade-leave-active {
transition: opacity 0.3s;
}
.p-home .p-home__jobchart > div .p-home__modal--inner .fade-enter {
opacity: 0;
}
.p-home .p-home__jobchart > div .p-home__modal--inner .fade-enter-from {
opacity: 0;
}
.p-home .p-home__jobchart > div .p-home__modal--inner .fade-leave-to {
opacity: 0;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question {
border: min(20px, 3.4vw) solid #fff100;
background-color: #FFFFFF;
width: 100vw;
max-width: 520px;
animation-name: modalopen;
animation-duration: 0.3s;
padding: min(15px, 2.5vw);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > h3 {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: min(20px, 3.4vw);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > h3 img {
width: 26.7vw;
max-width: 160px;
object-fit: contain;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > p {
font-size: max(1.889rem, 20px);
line-height: 1.3;
font-weight: 600;
color: #000000;
text-align: center;
margin-bottom: min(25px, 3.21vw);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > div {
display: flex;
justify-content: center;
align-items: center;
column-gap: 6.67%;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > div label.p-home__modal--choice {
cursor: pointer;
font-size: max(2rem, 22px);
max-width: 170px;
width: 46.665%;
height: fit-content;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px 0 10px;
box-sizing: border-box;
line-height: 1;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > div label.p-home__modal--choice input {
display: none;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > div label:nth-of-type(1) {
border: 3px solid #ff461e;
border-radius: 10px;
color: #ff461e;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--question > .p-home__modal--body > div label:nth-of-type(2) {
border: 3px solid #0063DA;
border-radius: 10px;
color: #0063DA;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result {
border: min(20px, 3.4vw) solid #ff461e;
background-color: #FFFFFF;
width: 100vw;
max-width: 520px;
padding: min(15px, 2.5vw);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > h3 {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: min(20px, 3.4vw);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > h3 img {
width: 29.2vw;
max-width: 200px;
object-fit: contain;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body {
display: flex;
flex-direction: column;
align-items: center;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > em {
font-size: max(1.889rem, 20px);
line-height: 1.1;
letter-spacing: 1px;
font-weight: 600;
color: #ff461e;
text-align: center;
margin-bottom: min(20px, 3.4vw);
text-align: center;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > p {
font-size: max(1rem, 14px);
line-height: 1.3;
font-weight: 600;
color: #000000;
text-align: center;
margin-bottom: min(20px, 3.4vw);
text-align: justify;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 3%;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div ul {
display: flex;
width: 67%;
column-gap: min(7%, 20px);
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div ul li {
width: 46.5%;
max-width: 145px;
padding: 8px;
border-radius: 5px;
background-color: #0063DA;
font-size: max(0.944rem, 13px);
line-height: 1;
font-weight: 600;
color: #FFFFFF;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
word-break: auto-phrase;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div span {
width: 30%;
font-size: max(0.889rem, 12px);
line-height: 1;
font-weight: 600;
color: #0063DA;
letter-spacing: -1px;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div label {
cursor: pointer;
font-size: max(2rem, 22px);
max-width: 170px;
width: 46.665%;
height: fit-content;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 15px 0 10px;
box-sizing: border-box;
line-height: 1;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div label:nth-of-type(1) {
border: 3px solid #ff461e;
border-radius: 10px;
color: #ff461e;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div label:nth-of-type(2) {
border: 3px solid #0063DA;
border-radius: 10px;
color: #0063DA;
}
.p-home .p-home__jobchart > div .p-home__modal--content.--result > .p-home__modal--body > div label input {
display: none;
}
.p-home .p-home__jobchart > div .p-home__modalClose {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 8px;
right: 8px;
border-radius: 5px;
height: 35px;
color: #fff;
width: 35px;
background-color: rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.p-home .p-home__jobchart > div .p-home__modalClose::before {
content: "";
display: block;
height: 2px;
width: 25px;
background-color: #FFFFFF;
transform: rotate(45deg);
position: absolute;
inset: 0;
margin: auto;
}
.p-home .p-home__jobchart > div .p-home__modalClose::after {
content: "";
display: block;
height: 2px;
width: 25px;
background-color: #FFFFFF;
transform: rotate(135deg);
position: absolute;
inset: 0;
margin: auto;
}
@keyframes modalopen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.p-home .p-home__point {
margin-bottom: clamp(75px, 20vw, 150px);
}
.p-home .p-home__point .p-home__point__title {
height: clamp(390px, 94vw, 520px);
position: static;
}
.p-home .p-home__point .p-home__point__title h2 {
margin-bottom: 24px;
}
.p-home .p-home__point .p-home__point__title h2 a {
width: 100%;
transition: opacity 0.3s;
}
.p-home .p-home__point .p-home__point__title h2 a img {
width: 100%;
}
.p-home .p-home__point .p-home__point__title h2 a:hover {
opacity: 0.7;
}
.p-home .p-home__point .p-home__point__title p {
padding: 0 max(1.67%, 10px);
margin-bottom: clamp(16px, 4.27vw, 20px);
font-size: max(14px, 1rem);
}
.p-home .p-home__point .p-home__point__title .splide {
width: 100dvw;
margin: 0 calc(50% - 50vw);
position: absolute;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide {
width: clamp(210px, 56vw, 280px);
height: clamp(120px, 32.53vw, 160px);
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide::after {
content: "";
width: clamp(210px, 56vw, 280px);
aspect-ratio: 280/150;
border-radius: clamp(37.5px, 10vw, 50px);
position: absolute;
top: clamp(7px, 1.87vw, 10px);
left: clamp(7px, 1.87vw, 10px);
z-index: 0;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide a {
width: clamp(210px, 56vw, 280px);
aspect-ratio: 280/150;
border: solid 1px #000000;
border-radius: clamp(37.5px, 10vw, 50px);
display: block;
position: relative;
z-index: 1;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide a img {
width: 100%;
z-index: 2;
position: relative;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--schedule::after {
background-color: #F6BF8D;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--schedule a {
background-color: #ED7F1C;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--joblist::after {
background-color: #C89FC9;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--joblist a {
background-color: #913F93;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--company::after {
background-color: #F2AABD;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--company a {
background-color: #E5557B;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--type::after {
background-color: #B4D580;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--type a {
background-color: #69AC00;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--benefits::after {
background-color: #80B1EA;
}
.p-home .p-home__point .p-home__point__title .splide .splide__list .splide__slide.--benefits a {
background-color: #0063D6;
}
.p-home .p-home__point .p-home__point__Learnmore, .p-home .p-home__point .p-home__point__provided {
width: 100%;
padding: clamp(20px, 5.33vw, 30px) 20px;
border-radius: 50px;
background-color: #0063D6;
}
.p-home .p-home__point .p-home__point__Learnmore h3, .p-home .p-home__point .p-home__point__provided h3 {
margin-bottom: clamp(14px, 3.73vw, 32px);
display: flex;
}
.p-home .p-home__point .p-home__point__Learnmore h3 img, .p-home .p-home__point .p-home__point__provided h3 img {
width: 100%;
}
.p-home .p-home__point .p-home__point__Learnmore h3 img:nth-of-type(2), .p-home .p-home__point .p-home__point__provided h3 img:nth-of-type(2) {
position: absolute;
top: 0;
left: 0;
}
.p-home .p-home__point .p-home__point__Learnmore p, .p-home .p-home__point .p-home__point__provided p {
padding: 0;
margin-bottom: clamp(12px, 3.2vw, 18px);
color: #FFFFFF;
font-size: max(14px, 1rem);
font-weight: 600;
}
.p-home .p-home__point .p-home__point__Learnmore a, .p-home .p-home__point .p-home__point__provided a {
width: 100%;
height: auto;
height: clamp(50px, 13.8vw, 80px);
padding: 5px 10px 0;
line-height: 1.3;
box-sizing: border-box;
border: solid 1px #000000;
border-radius: 20px;
background-color: #FFF000;
font-size: clamp(20px, 5.33vw, 2rem);
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
@media screen and (max-width: 480px) {
.p-home .p-home__point .p-home__point__Learnmore a, .p-home .p-home__point .p-home__point__provided a {
border-radius: 15px;
padding: 4px 10px 0;
}
}
.p-home .p-home__point .p-home__point__Learnmore a:hover, .p-home .p-home__point .p-home__point__provided a:hover {
background-color: #FFFFFF;
}
.p-home .p-home__point .p-home__point__Learnmore {
margin-bottom: clamp(30px, 8vw, 50px);
}
.p-home .p-home__point .p-home__point__Learnmore ul {
margin-bottom: 16px;
}
.p-home .p-home__point .p-home__point__Learnmore ul li {
color: #FFF000;
font-size: max(18px, 1.3rem);
font-weight: 600;
text-indent: -1em;
padding-left: 1em;
}
.p-home .p-home__point .p-home__point__Learnmore ul li::before {
content: "●";
}
.p-home .p-home__point .p-home__point__provided ul {
margin-bottom: 16px;
}
.p-home .p-home__point .p-home__point__provided ul li:not(:last-of-type) {
margin-bottom: clamp(12px, 3.2vw, 20px);
}
.p-home .p-home__point .p-home__point__provided ul li p {
margin-bottom: 0;
color: #FFFFFF;
font-size: max(18px, 1.3rem);
font-weight: 600;
}
.p-home .p-home__point .p-home__point__provided ul li p::before {
content: "●";
}
.p-home .p-home__point .p-home__point__provided ul li:nth-of-type(6) a {
font-size: max(16px, 1.6rem);
}
@media screen and (max-width: 540px) {
.p-home .p-home__point .p-home__point__provided ul li:nth-of-type(6) a {
font-size: max(16px, 1.5rem);
}
}
@media screen and (max-width: 480px) {
.p-home .p-home__point .p-home__point__provided ul li:nth-of-type(6) a {
font-size: max(16px, 1.45rem);
}
}
.iPhone .p-home__point__Learnmore a, .iPhone .p-home__point__provided a, .iPad .p-home__point__Learnmore a, .iPad .p-home__point__provided a {
padding: 0px 10px 0px !important;
}
.iPhone .p-home__bubble--thin, .iPad .p-home__bubble--thin {
letter-spacing: -2px !important;
}
.iPhone .p-home__modal--choice, .iPad .p-home__modal--choice {
padding: 10px 0 10px !important;
}
.Android .p-home__point__Learnmore a, .Android .p-home__point__provided a {
padding: 2px 10px 0px !important;
}
.Android .p-home__bubble--thin {
letter-spacing: -2px !important;
}
.Android .p-home__modal--choice {
padding: 10px 0 10px !important;
}
/*----------------------------------------
企業紹介ページ
----------------------------------------*/
.p-company {
overflow: hidden;
width: 100%;
/* ---- メインビジュアル ---- */
/* ---- 魅力発見 ---- */
/* ---- インタビュー ---- */
/* ---- 一日のスケジュール ---- */
/* ---- 会社データ ---- */
}
.p-company .p-company__mv {
width: 100%;
}
.p-company .p-company__mv .p-company__mv__primary {
width: 100%;
box-sizing: border-box;
padding-right: 10%;
padding-top: 40px;
}
.p-company .p-company__mv .p-company__mv__primary h1 {
position: absolute;
top: 10px;
left: 0;
width: 100%;
max-width: min(380px, 63%);
z-index: 1;
}
.p-company .p-company__mv .p-company__mv__primary h1 > img {
width: 100%;
height: auto;
}
.p-company .p-company__mv .p-company__mv__primary > div {
width: 100%;
position: relative;
}
.p-company .p-company__mv .p-company__mv__primary > div > img {
width: 100%;
height: auto;
}
.p-company .p-company__mv .p-company__mv__primary > div > div {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.p-company .p-company__mv .p-company__mv__primary > div > div::after {
position: absolute;
right: 8px;
top: 15px;
content: "";
width: 12%;
max-width: 72px;
height: 88px;
background-image: url("../img/company/img_company_mv_loupe.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (max-width: 600px) {
.p-company .p-company__mv .p-company__mv__primary > div > div::after {
top: 2vw;
}
}
@media screen and (max-width: 480px) {
.p-company .p-company__mv .p-company__mv__primary > div > div::after {
top: 1vw;
}
}
@media screen and (max-width: 400px) {
.p-company .p-company__mv .p-company__mv__primary > div > div::after {
top: 0.5vw;
}
}
.p-company .p-company__mv .p-company__mv__primary > div > div em {
display: flex;
align-items: center;
width: fit-content;
max-width: 100%;
height: fit-content;
max-height: 60px;
padding-right: min(40px, 6%);
padding-left: min(40px, 6%);
padding-top: 15px;
padding-bottom: 5px;
box-sizing: border-box;
background-color: #E5557B;
color: #FFFFFF;
font-size: 2.246rem;
font-weight: 600;
text-align: center;
line-height: 1;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector1 {
background-color: #428ADD;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector2 {
background-color: #ED7F1C;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector3 {
background-color: #10A384;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector4 {
background-color: #E5557B;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector5 {
background-color: #913F93;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector6 {
background-color: #69AC00;
}
.p-company .p-company__mv .p-company__mv__primary > div > div em.--color_sector7 {
background-color: #29ABE2;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
width: 100%;
height: fit-content;
padding-top: 8px;
padding-bottom: 5px;
background-color: #000000;
color: #FFFFFF;
padding-left: min(40px, 6%);
padding-right: 9%;
box-sizing: border-box;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div > span {
color: inherit;
display: block;
font-size: 1.306rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.5px;
position: relative;
bottom: -2px;
text-align: left;
margin-bottom: 3px;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div > p {
color: inherit;
display: block;
font-size: 2.611rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: -2px;
position: relative;
bottom: -2px;
text-align: left;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal {
justify-content: flex-start;
align-items: baseline;
flex-direction: row;
padding-top: 13px;
padding-bottom: 5px;
padding-left: min(30px, 1.5rem);
column-gap: 0.5rem;
}
@media screen and (max-width: 480px) {
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal {
padding-top: 10px;
padding-bottom: 3px;
}
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal > span {
color: inherit;
display: block;
font-size: 1.222rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.5px;
position: relative;
bottom: -2px;
text-align: left;
margin-bottom: 0;
margin-right: 0;
}
@media screen and (max-width: 480px) {
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal > span {
bottom: -1px;
}
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal > p {
color: inherit;
display: block;
font-size: 2.611rem;
font-weight: 600;
line-height: 1;
letter-spacing: -2px;
position: relative;
bottom: 0;
text-align: left;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small {
justify-content: flex-start;
align-items: baseline;
flex-direction: row;
padding-top: 12px;
padding-bottom: 8px;
padding-left: min(30px, 1.5rem);
column-gap: 0.5rem;
}
@media screen and (max-width: 480px) {
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small {
padding-top: 8px;
padding-bottom: 8px;
}
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small > span {
color: inherit;
display: block;
font-size: 1.111rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.5px;
position: relative;
bottom: -2px;
text-align: left;
margin-bottom: 0;
margin-right: 0;
}
.p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small > p {
color: inherit;
display: block;
font-size: 2.5rem;
font-weight: 600;
line-height: 1;
letter-spacing: -2px;
position: relative;
bottom: -2px;
text-align: left;
}
.p-company .p-company__mv .p-company__mv__secondary {
width: 100%;
padding-top: 30px;
display: flex;
justify-content: flex-end;
column-gap: 3.3%;
}
.p-company .p-company__mv .p-company__mv__secondary > div:last-of-type > img {
width: 100%;
height: auto;
max-width: 360px;
}
.p-company .p-company__mv .p-company__mv__secondary > div:first-of-type {
position: relative;
padding-top: 5px;
margin-left: 6.6%;
}
.p-company .p-company__mv .p-company__mv__secondary > div:first-of-type > img {
width: 100%;
height: auto;
max-width: 180px;
}
.p-company .p-company__mv .p-company__mv__secondary > div:first-of-type::before {
content: "";
position: absolute;
left: 7px;
top: 16px;
width: 22.7%;
max-width: 41px;
height: 39px;
background-image: url("../img/company/img_company_mv_star1.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: zoomStarAnime 0.5s ease 0s infinite alternate;
animation-delay: 0s;
}
.p-company .p-company__mv .p-company__mv__secondary > div:first-of-type::after {
content: "";
position: absolute;
right: 9px;
bottom: 11px;
width: 18.8%;
max-width: 34px;
height: 32px;
background-image: url("../img/company/img_company_mv_star2.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
animation: zoomStarAnime 0.5s ease 0s infinite alternate;
animation-delay: 0.3s;
}
@keyframes zoomStarAnime {
from {
transform: scale(1, 1);
transform-origin: 50% 50%;
}
to {
transform: scale(1.1, 1.1);
transform-origin: 50% 50%;
}
}
.p-company .p-company__discovery {
padding-top: 55px;
padding-bottom: 60px;
}
.p-company .p-company__discovery h2 {
width: 100%;
max-width: 560px;
padding: 0 3.3% 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin: 0 auto;
}
.p-company .p-company__discovery h2 img {
height: auto;
}
.p-company .p-company__discovery h2 img:nth-of-type(1) {
width: 13%;
max-width: 73px;
}
.p-company .p-company__discovery h2 img:nth-of-type(2) {
width: 73.1%;
max-width: 416px;
}
.p-company .p-company__discovery h2 img:nth-of-type(3) {
width: 13.9%;
max-width: 78px;
position: relative;
left: -10px;
}
.p-company .p-company__discovery .p-company__discovery__point {
margin-bottom: 90px;
}
.p-company .p-company__discovery .p-company__discovery__point ul {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div {
width: 100%;
border: 3px solid #000000;
border-radius: 20px;
padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
row-gap: 5px;
position: relative;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div::after {
content: "";
position: absolute;
top: 2.5px;
left: 2.5px;
border-radius: 20px;
border: 3px solid #F3B6A8;
display: block;
width: 100%;
height: 100%;
background-color: #F3B6A8;
z-index: -1;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div {
width: 100%;
height: fit-content;
display: flex;
justify-content: center;
align-items: center;
column-gap: 4.4%;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:first-of-type {
width: 8.6%;
min-height: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
}
@media screen and (max-width: 480px) {
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:first-of-type {
min-height: initial;
}
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:first-of-type img {
width: 100%;
height: auto;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:last-of-type {
display: flex;
justify-content: flex-start;
align-items: center;
width: 87%;
min-height: 100px;
}
@media screen and (max-width: 480px) {
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:last-of-type {
min-height: initial;
}
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:last-of-type p {
display: block;
width: 100%;
text-align: left;
height: fit-content;
font-size: 1.83rem;
line-height: 1.2;
font-weight: 600;
letter-spacing: -1px;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > div > div:last-of-type p span {
text-align: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
letter-spacing: -4px;
}
.p-company .p-company__discovery .p-company__discovery__point ul li > div > p {
font-size: max(1rem, 14px);
line-height: 1.5;
letter-spacing: -0.5px;
}
.p-company .p-company__discovery .p-company__discovery__point ul li.--point__bgred > div::after {
border: 3px solid #F3B6A8;
background-color: #F3B6A8;
}
.p-company .p-company__discovery .p-company__discovery__point ul li.--point__bgblue > div::after {
border: 3px solid #99C1EF;
background-color: #99C1EF;
}
.p-company .p-company__discovery .p-company__discovery__point ul li.--layout_3line > div > div {
align-items: flex-start;
}
.p-company .p-company__discovery .p-company__discovery__point ul li.--layout_3line > div > div > div:first-of-type {
align-items: flex-start;
}
.p-company .p-company__discovery .p-company__discovery__point ul li.--layout_3line > div > div > div:last-of-type {
align-items: flex-start;
}
.p-company .p-company__discovery .p-company__discovery__comment {
background-color: #E5557B;
padding-bottom: 30px;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector1 {
background-color: #428ADD;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector2 {
background-color: #ED7F1C;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector3 {
background-color: #10A384;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector4 {
background-color: #E5557B;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector5 {
background-color: #913F93;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector6 {
background-color: #69AC00;
}
.p-company .p-company__discovery .p-company__discovery__comment.--color_sector7 {
background-color: #29ABE2;
}
.p-company .p-company__discovery .p-company__discovery__comment > img {
position: absolute;
}
.p-company .p-company__discovery .p-company__discovery__comment > img:nth-of-type(1) {
width: 9.1%;
max-width: 57px;
height: auto;
top: min(8vw, 50px);
left: 24%;
}
.p-company .p-company__discovery .p-company__discovery__comment > img:nth-of-type(2) {
width: 5.6%;
max-width: 34px;
height: auto;
top: min(41vw, 245px);
left: 10%;
}
.p-company .p-company__discovery .p-company__discovery__comment > img:nth-of-type(3) {
width: 10.33%;
max-width: 62px;
height: auto;
top: min(39vw, 230px);
right: 6.6%;
}
.p-company .p-company__discovery .p-company__discovery__comment::before {
content: "";
position: relative;
left: 0;
top: -1px;
width: 100%;
display: block;
padding-top: 17.5%;
background-image: url("../img/company/bg_company_discovery1.webp");
background-size: cover;
background-position: top;
background-repeat: no-repeat;
}
.p-company .p-company__discovery .p-company__discovery__comment h3 {
padding: 20px 0;
width: 100%;
font-size: max(1.944rem, 14px);
line-height: 1.3;
letter-spacing: 0px;
color: #FFFFFF;
font-weight: 900;
color: #fff;
text-shadow: 2px 2px 1px #000, -2px -2px 1px #000, -2px 2px 1px #000, 2px -2px 1px #000, 0px 2px 1px #000, 0 -2px 1px #000, -2px 0 1px #000, 2px 0 1px #000;
text-align: center;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
background-image: url("../img/company/bg_company_discovery2.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div picture {
display: block;
border: 4px solid #FFFFFF;
border-radius: 50%;
width: min(67.3%, 350px);
aspect-ratio: 1;
height: auto;
overflow: hidden;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div picture img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div {
position: absolute;
right: 20px;
bottom: 15px;
width: auto;
height: fit-content;
border-radius: 35px;
border: 2px solid #000000;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
box-sizing: border-box;
padding: 5px 8%;
}
@media screen and (max-width: 480px) {
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div {
right: 5px;
bottom: 5px;
}
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div b {
font-size: max(14px, 0.778rem);
font-weight: 600;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div ruby {
font-size: max(14px, 1rem);
font-weight: 600;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div ruby rt {
font-size: max(8px, 0.444rem);
font-weight: 600;
text-align: center;
letter-spacing: 1.5px;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > div > div ruby span {
font-size: max(14px, 0.778rem);
font-weight: 600;
}
.p-company .p-company__discovery .p-company__discovery__comment > div > p {
padding-top: 20px;
font-size: max(14px, 1rem);
line-height: 1.5;
color: #FFFFFF;
}
.p-company .p-company__interview {
/* ---- （高校生インタビューパターン） ---- */
/* ---- （独自インタビューパターン） ---- */
/* ---- 各パターン共通 ---- */
}
.p-company .p-company__interview.--pattern_1 > div {
margin-bottom: 20px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer {
background-image: url("../img/company/bg_company_interview_read.webp");
background-size: contain;
background-position: top center;
background-repeat: no-repeat;
padding: 10.7% 0 20px;
}
@media screen and (max-width: 400px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer {
padding: 6.7% 0 20px;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer h2 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
display: flex;
column-gap: 1.45%;
margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer h2 {
margin-bottom: 3.5vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer h2 img:nth-of-type(1) {
width: 12.8%;
max-width: 67px;
position: relative;
bottom: 21px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer h2 img:nth-of-type(2) {
width: 71.5%;
max-width: 372px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer h2 img:nth-of-type(3) {
width: 12.8%;
max-width: 67px;
position: relative;
bottom: 21px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div {
width: 100%;
display: flex;
column-gap: 4%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:first-of-type {
width: 48%;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:first-of-type b {
display: flex;
align-items: center;
justify-content: center;
font-size: max(1.222rem, 14px);
color: #FFFFFF;
width: 100%;
max-width: 250px;
height: 45px;
background-color: #000;
border-radius: 25px;
letter-spacing: -0.5px;
padding: 5px 2.8% 0;
box-sizing: border-box;
margin-bottom: 25px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:first-of-type b span {
display: inline-block;
transform: rotate(3deg);
color: inherit;
font-size: inherit;
font-weight: inherit;
position: relative;
}
@media screen and (max-width: 480px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:first-of-type b {
padding: 0 2.8% 0;
margin-bottom: 3.5vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:first-of-type p {
font-size: max(1rem, 14px);
font-weight: 600;
line-height: 1.5;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:last-of-type {
width: 48%;
max-width: 250px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__interviewer > div > div:last-of-type img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content {
padding-top: 70px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 {
position: relative;
width: 100%;
height: fit-content;
padding-top: min(6vw, 35px);
padding-bottom: min(6vw, 35px);
padding-left: 4%;
padding-right: 4%;
border: 3px solid #000000;
border-radius: 3px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3::after {
content: "";
display: block;
position: absolute;
bottom: -9px;
right: -9px;
width: 33%;
height: 35%;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
border-radius: 0 0 3px 0;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 picture {
position: absolute;
top: max(-4.2vw, -24px);
left: 16px;
display: block;
width: 12.5%;
max-width: 65px;
height: auto;
display: block;
background-color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 picture img {
width: 100%;
height: auto;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 p {
text-align: center;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 p span {
font-size: max(1.667rem, 20px);
font-weight: 600;
line-height: 1.36;
background: linear-gradient(transparent 60%, rgb(253, 239, 0) 40%);
display: inline;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.8s;
word-break: auto-phrase;
letter-spacing: -1px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright {
background-color: #FFFFFF;
padding-right: 13.5%;
height: 20px;
display: inline-block;
position: absolute;
top: -12px;
right: 10.5%;
}
@media screen and (max-width: 550px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright {
top: -13px;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span {
position: relative;
display: inline-block;
width: 3px;
height: 3px;
margin: 9.5px 0;
border-radius: 9999px;
background-color: #000000;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before, .p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
content: "";
position: absolute;
top: calc(50% - 1.5px);
right: 0;
width: 25px;
height: 3px;
border-radius: 9999px;
background-color: #000000;
transform-origin: calc(100% - 1.5px) 50%;
}
@media screen and (max-width: 500px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before, .p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
width: 20px;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before {
transform: rotate(23.35deg);
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
transform: rotate(-23.35deg);
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft {
background-color: #FFFFFF;
padding-left: 7.7%;
height: 20px;
display: inline-block;
position: absolute;
bottom: -11px;
left: 7.7%;
}
@media screen and (max-width: 550px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft {
bottom: -10px;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span {
position: relative;
display: inline-block;
width: 3px;
height: 3px;
margin: 9.5px 0;
border-radius: 9999px;
background-color: #000000;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before, .p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
content: "";
position: absolute;
top: calc(50% - 1.5px);
left: 0;
width: 25px;
height: 3px;
border-radius: 9999px;
background-color: #000000;
transform-origin: 1.5px 50%;
}
@media screen and (max-width: 500px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before, .p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
width: 20px;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before {
transform: rotate(23.35deg);
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
transform: rotate(-23.35deg);
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content > h3 .--markeron {
background-size: 100% 100%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul {
display: flex;
flex-direction: column;
row-gap: 20px;
padding: 45px 0 100px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul {
padding: 7.5vw 0 13.4vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li {
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 2.8%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(1) {
width: 73%;
max-width: 390px;
box-sizing: border-box;
margin-right: 2%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 20px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(1) p {
position: relative;
display: block;
width: 100%;
height: fit-content;
min-height: 50px;
padding: 4.8% 3.8% 3.8%;
font-size: max(1rem, 14px);
color: #FFFFFF;
z-index: 0;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(1) p::before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
right: -8px;
width: 16px;
height: 16px;
background-color: #E5557B;
transform: translateY(-50%) rotate(-45deg);
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(1) p::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #E5557B;
border-radius: 10px;
width: 100%;
height: 100%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(2) {
width: 22.2%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li > div:nth-of-type(2) > img {
width: 100%;
max-width: 115px;
height: auto;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) {
order: 1;
margin-right: 2%;
margin-left: 0;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::before {
right: -8px;
left: auto;
background-color: #E5557B;
border-radius: initial;
border: none;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #E5557B;
border-radius: 10px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(2) {
order: 2;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) {
order: 2;
margin-right: 0;
margin-left: 2%;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p {
color: #0063D6;
border: 3px solid #0063D6;
border-radius: 10px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p::before {
right: auto;
left: -10px;
background-color: #FFFFFF;
border: 3px solid #0063D6;
border-radius: 3px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p::after {
background-color: #FFFFFF;
border-radius: 10px;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_question > div:nth-of-type(2) {
order: 1;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_photo {
display: flex;
justify-content: center;
align-items: center;
column-gap: 0;
padding-top: min(10vw, 80px);
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_photo > div:nth-of-type(1) {
width: 100%;
max-width: initial;
box-sizing: border-box;
margin-right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
row-gap: 0;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content ul li.--layout_photo > div:nth-of-type(1) > img {
width: 77%;
max-width: 400px;
height: auto;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_red ul li.--layout_question > div:nth-of-type(1) p {
color: #E04826;
border: 3px solid #E04826;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_red ul li.--layout_question > div:nth-of-type(1) p::before {
background-color: #FFFFFF;
border: 3px solid #E04826;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_red ul li.--layout_question > div:nth-of-type(1) p::after {
background-color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_blue ul li.--layout_question > div:nth-of-type(1) p {
color: #0063D6;
border: 3px solid #0063D6;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_blue ul li.--layout_question > div:nth-of-type(1) p::before {
background-color: #FFFFFF;
border: 3px solid #0063D6;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_blue ul li.--layout_question > div:nth-of-type(1) p::after {
background-color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector1 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector1 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #428ADD;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector1 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #428ADD;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector2 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector2 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #ED7F1C;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector2 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #ED7F1C;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector3 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector3 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #10A384;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector3 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #10A384;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector4 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector4 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #E5557B;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector4 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #E5557B;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector5 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector5 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #913F93;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector5 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #913F93;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector6 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector6 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #69AC00;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector6 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #69AC00;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector7 ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector7 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #29ABE2;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__content.--color_sector7 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #29ABE2;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report {
width: 100%;
background-color: #0063D6;
border: 3px solid #000000;
border-radius: 13px;
padding: 5.7%;
position: relative;
margin-top: 70px;
margin-bottom: 100px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report {
margin-top: 11.5vw;
margin-bottom: 16.5vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report.--color_red {
background-color: #E04826;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report.--color_blue {
background-color: #0063D6;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report h3 {
display: flex;
justify-content: center;
position: absolute;
top: -60px;
left: 0;
z-index: 1;
margin: 0 auto;
width: 100%;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report h3 {
top: max(-10vw, -60px);
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report h3 img {
width: 57.6%;
max-width: 300px;
height: auto;
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report > div {
width: 100%;
background-color: #FFFFFF;
border: 3px solid #000000;
padding: 35px 23px 23px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report > div {
padding: 10vw 5% 3.8vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report > div p {
display: block;
width: 100%;
font-size: max(1rem, 14px);
line-height: 1.5;
margin-bottom: 30px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report > div p {
margin-bottom: 5vw;
}
}
.p-company .p-company__interview.--pattern_1 > div .p-company__interview__report > div img {
width: 100%;
height: auto;
object-fit: cover;
}
.p-company .p-company__interview.--pattern_2 > div {
padding-top: 55px;
margin-bottom: 20px;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
display: flex;
column-gap: 1.45%;
margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 {
margin-bottom: 3.5vw;
}
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(1) {
width: 57.6%;
max-width: 300px;
position: absolute;
top: -75px;
margin: 0 auto;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(1) {
top: -12.5vw;
}
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(2) {
width: 12.8%;
max-width: 67px;
position: relative;
bottom: 45px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(2) {
bottom: 7.5vw;
}
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(3) {
width: 71.5%;
max-width: 372px;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(4) {
width: 12.8%;
max-width: 67px;
position: relative;
bottom: 45px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title h2 img:nth-of-type(4) {
bottom: 7.5vw;
}
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title > p {
display: block;
padding: 20px 0 15px;
text-align: center;
line-height: 1.5;
font-size: max(1rem, 14px);
font-weight: 600;
}
@media screen and (max-width: 480px) {
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__title > p {
letter-spacing: -0.5px;
}
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) {
order: 2;
margin-right: 0;
margin-left: 2%;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::before {
right: auto;
left: -8px;
background-color: #913F93;
border-radius: initial;
border: none;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #913F93;
border-radius: 10px;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content ul li.--layout_answer > div:nth-of-type(2) {
order: 1;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector1 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #428ADD;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector1 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #428ADD;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector2 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #ED7F1C;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector2 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #ED7F1C;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector3 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #10A384;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector3 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #10A384;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector4 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #E5557B;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector4 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #E5557B;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector5 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #913F93;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector5 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #913F93;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector6 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #69AC00;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector6 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #69AC00;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector7 ul li.--layout_answer > div:nth-of-type(1) p::before {
background-color: #29ABE2;
}
.p-company .p-company__interview.--pattern_2 > div .p-company__interview__content.--color_sector7 ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #29ABE2;
}
.p-company .p-company__interview .p-company__interview__interviewee {
width: 100%;
display: flex;
position: relative;
margin-bottom: 30px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector1 {
background-color: #cce8f9;
border-bottom: 20px solid #428ADD;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector2 {
background-color: #ffe6cc;
border-bottom: 20px solid #ED7F1C;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector3 {
background-color: #ccede6;
border-bottom: 20px solid #10A384;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector4 {
background-color: #ffdde5;
border-bottom: 20px solid #E5557B;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector5 {
background-color: #edd8ea;
border-bottom: 20px solid #913F93;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector6 {
background-color: #d6efcc;
border-bottom: 20px solid #69AC00;
}
.p-company .p-company__interview .p-company__interview__interviewee.--color_sector7 {
background-color: #cceffa;
border-bottom: 20px solid #29ABE2;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div {
width: 50%;
max-width: 260px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
padding: 10px 10px 10px 20px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type > span {
display: block;
font-size: max(14px, 1rem);
font-weight: 600;
margin-bottom: 10px;
text-align: left;
word-break: auto-phrase;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type ruby {
font-size: max(14px, 1rem);
font-weight: 600;
margin-bottom: 20px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type ruby rt {
font-size: max(8px, 0.444rem);
font-weight: 600;
text-align: center;
letter-spacing: 1.5px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type ruby > span {
font-size: max(14px, 0.778rem);
font-weight: inherit;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:first-of-type p {
font-size: max(0.889rem, 12px);
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:last-of-type {
display: flex;
justify-content: center;
align-items: flex-end;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_left > div:last-of-type img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div {
width: 50%;
max-width: 260px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type {
order: 2;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
padding: 10px 20px 10px 30px;
}
@media screen and (max-width: 480px) {
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type {
padding: 10px 20px 10px 20px;
}
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type > span {
display: block;
font-size: max(14px, 1rem);
font-weight: 600;
margin-bottom: 10px;
text-align: left;
word-break: auto-phrase;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type ruby {
font-size: max(14px, 1rem);
font-weight: 600;
margin-bottom: 20px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type ruby rt {
font-size: max(8px, 0.444rem);
font-weight: 600;
text-align: center;
letter-spacing: 1.5px;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type ruby > span {
font-size: max(14px, 0.778rem);
font-weight: inherit;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:first-of-type p {
font-size: max(0.889rem, 12px);
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:last-of-type {
order: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
.p-company .p-company__interview .p-company__interview__interviewee.--layout_right > div:last-of-type img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-company .p-company__interview .p-company__interview__content {
padding-top: 40px;
}
.p-company .p-company__interview .p-company__interview__content > h3 {
position: relative;
width: 100%;
height: fit-content;
padding-top: min(6vw, 35px);
padding-bottom: min(6vw, 35px);
padding-left: 4%;
padding-right: 4%;
border: 3px solid #000000;
border-radius: 3px;
}
.p-company .p-company__interview .p-company__interview__content > h3::after {
content: "";
display: block;
position: absolute;
bottom: -9px;
right: -9px;
width: 33%;
height: 35%;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
border-radius: 0 0 3px 0;
}
.p-company .p-company__interview .p-company__interview__content > h3 picture {
position: absolute;
top: max(-4.2vw, -24px);
left: 16px;
display: block;
width: 12.5%;
max-width: 65px;
height: auto;
display: block;
background-color: #FFFFFF;
}
.p-company .p-company__interview .p-company__interview__content > h3 picture img {
width: 100%;
height: auto;
}
.p-company .p-company__interview .p-company__interview__content > h3 p {
text-align: center;
}
.p-company .p-company__interview .p-company__interview__content > h3 p span {
font-size: max(1.667rem, 20px);
font-weight: 600;
line-height: 1.36;
background: linear-gradient(transparent 60%, rgb(253, 239, 0) 40%);
display: inline;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size 0.8s;
word-break: auto-phrase;
letter-spacing: -1px;
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright {
background-color: #FFFFFF;
padding-right: 13.5%;
height: 20px;
display: inline-block;
position: absolute;
top: -12px;
right: 10.5%;
}
@media screen and (max-width: 550px) {
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright {
top: -13px;
}
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span {
position: relative;
display: inline-block;
width: 3px;
height: 3px;
margin: 9.5px 0;
border-radius: 9999px;
background-color: #000000;
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before, .p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
content: "";
position: absolute;
top: calc(50% - 1.5px);
right: 0;
width: 25px;
height: 3px;
border-radius: 9999px;
background-color: #000000;
transform-origin: calc(100% - 1.5px) 50%;
}
@media screen and (max-width: 500px) {
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before, .p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
width: 20px;
}
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::before {
transform: rotate(23.35deg);
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowright > span::after {
transform: rotate(-23.35deg);
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft {
background-color: #FFFFFF;
padding-left: 7.7%;
height: 20px;
display: inline-block;
position: absolute;
bottom: -11px;
left: 7.7%;
}
@media screen and (max-width: 550px) {
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft {
bottom: -10px;
}
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span {
position: relative;
display: inline-block;
width: 3px;
height: 3px;
margin: 9.5px 0;
border-radius: 9999px;
background-color: #000000;
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before, .p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
content: "";
position: absolute;
top: calc(50% - 1.5px);
left: 0;
width: 25px;
height: 3px;
border-radius: 9999px;
background-color: #000000;
transform-origin: 1.5px 50%;
}
@media screen and (max-width: 500px) {
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before, .p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
width: 20px;
}
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::before {
transform: rotate(23.35deg);
}
.p-company .p-company__interview .p-company__interview__content > h3 i.p-company__interview__content--arrowleft > span::after {
transform: rotate(-23.35deg);
}
.p-company .p-company__interview .p-company__interview__content > h3 .--markeron {
background-size: 100% 100%;
}
.p-company .p-company__interview .p-company__interview__content ul {
display: flex;
flex-direction: column;
row-gap: 20px;
padding: 45px 0 100px;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview .p-company__interview__content ul {
padding: 7.5vw 0 13.4vw;
}
}
.p-company .p-company__interview .p-company__interview__content ul li {
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: 2.8%;
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(1) {
width: 73%;
max-width: 390px;
box-sizing: border-box;
margin-right: 2%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 20px;
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(1) p {
position: relative;
display: block;
width: 100%;
height: fit-content;
min-height: 50px;
padding: 3.8%;
font-size: max(1rem, 14px);
color: #FFFFFF;
z-index: 0;
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(1) p::before {
content: "";
position: absolute;
z-index: -2;
top: 50%;
right: -8px;
width: 16px;
height: 16px;
background-color: #E5557B;
transform: translateY(-50%) rotate(-45deg);
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(1) p::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #E5557B;
border-radius: 10px;
width: 100%;
height: 100%;
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(2) {
width: 22.2%;
}
.p-company .p-company__interview .p-company__interview__content ul li > div:nth-of-type(2) > img {
width: 100%;
max-width: 115px;
height: auto;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) {
order: 1;
margin-right: 2%;
margin-left: 0;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p {
color: #FFFFFF;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::before {
right: -8px;
left: auto;
background-color: #E5557B;
border-radius: initial;
border: none;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_answer > div:nth-of-type(1) p::after {
background-color: #E5557B;
border-radius: 10px;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_answer > div:nth-of-type(2) {
order: 2;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) {
order: 2;
margin-right: 0;
margin-left: 2%;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p {
color: #0063D6;
border: 3px solid #0063D6;
border-radius: 10px;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p::before {
right: auto;
left: -10px;
background-color: #FFFFFF;
border: 3px solid #0063D6;
border-radius: 3px;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_question > div:nth-of-type(1) p::after {
background-color: #FFFFFF;
border-radius: 10px;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_question > div:nth-of-type(2) {
order: 1;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_photo {
display: flex;
justify-content: center;
align-items: center;
column-gap: 0;
padding-top: min(10vw, 80px);
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_photo > div:nth-of-type(1) {
width: 100%;
max-width: initial;
box-sizing: border-box;
margin-right: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
row-gap: 0;
}
.p-company .p-company__interview .p-company__interview__content ul li.--layout_photo > div:nth-of-type(1) > img {
width: 77%;
max-width: 400px;
height: auto;
}
.p-company .p-company__interview .p-company__interview__morecontent {
padding-bottom: 30px;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__toggle {
display: none;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__toggle:checked + .p-company__interview__morecontent__Label {
/*開閉時*/
height: 50px;
transition: all 0.3s ease;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__toggle:checked + .p-company__interview__morecontent__Label + .p-company__interview__morecontent__detail {
/*開閉時*/
height: auto;
margin-top: 70px;
transition: all 0.3s ease;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__toggle:checked + .p-company__interview__morecontent__Label > i::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__Label {
width: 100%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
background: #FFF000;
border: 3px solid #000000;
box-sizing: border-box;
font-size: max(1rem, 14px);
font-weight: 600;
padding-top: 5px;
transition: all 0.3s ease;
cursor: pointer;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s;
}
@media screen and (max-width: 600px) {
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__Label {
padding-top: 0;
}
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__Label > i {
width: 15px;
height: 100%;
right: 30%;
position: absolute;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__Label > i::before {
content: "";
display: block;
width: 11px;
height: 2px;
background-color: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__Label > i::after {
content: "";
display: block;
width: 11px;
height: 2px;
background-color: #000000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transition: all 0.3s ease;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail {
height: 0;
margin-top: 0;
overflow: hidden;
backface-visibility: hidden;
transform: translateZ(0);
transition: all 0.3s ease;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail dl dt {
width: 100%;
display: block;
background-color: #ffdde5;
padding-top: min(4vw, 35px);
padding-bottom: min(3vw, 30px);
padding-left: 3.8%;
padding-right: 3.8%;
line-height: 1.2;
font-size: max(1.667rem, 20px);
font-weight: 600;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail dl dd {
display: block;
width: 100%;
padding: 20px 0 50px;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail dl dd p {
width: 100%;
font-size: max(1rem, 14px);
line-height: 1.5;
padding-top: 20px;
padding-bottom: 20px;
border-top: 2px solid #ffdde5;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail dl dd p:first-of-type {
padding-top: 0;
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent .p-company__interview__morecontent__detail dl dd p:last-of-type {
padding-bottom: 0;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector1 .p-company__interview__morecontent__detail dl dt {
background-color: #cce8f9;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector1 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #cce8f9;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector1 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector2 .p-company__interview__morecontent__detail dl dt {
background-color: #ffe6cc;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector2 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #ffe6cc;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector2 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector3 .p-company__interview__morecontent__detail dl dt {
background-color: #ccede6;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector3 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #ccede6;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector3 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector4 .p-company__interview__morecontent__detail dl dt {
background-color: #ffdde5;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector4 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #ffdde5;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector4 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector5 .p-company__interview__morecontent__detail dl dt {
background-color: #edd8ea;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector5 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #edd8ea;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector5 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector6 .p-company__interview__morecontent__detail dl dt {
background-color: #d6efcc;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector6 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #d6efcc;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector6 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector7 .p-company__interview__morecontent__detail dl dt {
background-color: #cceffa;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector7 .p-company__interview__morecontent__detail dl dd p {
border-top: 2px solid #cceffa;
}
.p-company .p-company__interview .p-company__interview__morecontent.--color_sector7 .p-company__interview__morecontent__detail dl dd p:first-of-type {
border-top: none;
}
.p-company .p-company__schedule {
padding: 50px 0 clamp(50px, 13.33vw, 90px);
background-color: #E5557B;
}
.p-company .p-company__schedule.--color_sector1 {
background-color: #428ADD;
}
.p-company .p-company__schedule.--color_sector2 {
background-color: #ED7F1C;
}
.p-company .p-company__schedule.--color_sector3 {
background-color: #10A384;
}
.p-company .p-company__schedule.--color_sector4 {
background-color: #E5557B;
}
.p-company .p-company__schedule.--color_sector5 {
background-color: #913F93;
}
.p-company .p-company__schedule.--color_sector6 {
background-color: #69AC00;
}
.p-company .p-company__schedule.--color_sector7 {
background-color: #29ABE2;
}
.p-company .p-company__schedule .p-company__schedule__timetable {
margin-bottom: clamp(55px, 12vw, 75px);
}
.p-company .p-company__schedule .p-company__schedule__timetable h2 img {
width: 100%;
max-width: 431px;
aspect-ratio: 431/104;
margin: 0 auto clamp(40px, 10.67vw, 60px);
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li {
font-size: max(16px, 1.16rem);
display: flex;
align-items: center;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li div:nth-of-type(1) {
width: clamp(48px, 12.8vw, 62px);
margin-right: 50px;
text-align: right;
color: #FFFFFF;
flex-shrink: 0;
padding-bottom: 10px;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li div:nth-of-type(1)::before {
content: "";
width: 12px;
height: 12px;
border-radius: 12px;
background-color: #FFFFFF;
position: absolute;
top: clamp(5px, 1.33vw, 8px);
right: -30px;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li div:nth-of-type(2) {
padding-bottom: 10px;
color: #FFFFFF;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li div:nth-of-type(2):before {
content: "";
height: 100%;
border-left: solid 1px #FFFFFF;
position: absolute;
top: 0;
left: -26px;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li:first-of-type div:nth-of-type(2):before {
transform-origin: bottom;
scale: 1 1.5;
}
.p-company .p-company__schedule .p-company__schedule__timetable div div:nth-of-type(1) ul li:last-of-type div:nth-of-type(2):before {
transform-origin: top;
scale: 1 1.5;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_top {
width: 32.5%;
position: absolute;
right: -10px;
top: -75px;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_top img {
width: 100%;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_bottom {
width: 32.5%;
position: absolute;
right: -10px;
bottom: -55px;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_bottom img {
width: 100%;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_outside {
width: 32.5%;
position: relative;
margin-left: auto;
}
.p-company .p-company__schedule .p-company__schedule__timetable div .p-company__schedule__img.--layout_outside img {
width: 100%;
}
.p-company .p-company__schedule .p-company__schedule__note {
padding-left: 1em;
margin-bottom: clamp(14px, 3.73vw, 20px);
color: #FFFFFF;
font-size: max(14px, 0.77rem);
text-indent: -1em;
}
.p-company .p-company__schedule .p-company__schedule__note::before {
content: "※";
}
.p-company .p-company__schedule .p-company__schedule__happylife {
max-width: 520px;
overflow: hidden;
}
.p-company .p-company__schedule .p-company__schedule__happylife::before {
content: "";
width: 100%;
height: clamp(24px, 6.4vw, 34px);
background-image: url(../img/company/bg_company_happylife1.webp);
background-repeat: no-repeat;
background-size: 100%;
background-position: bottom;
display: block;
position: relative;
bottom: -1px;
}
.p-company .p-company__schedule .p-company__schedule__happylife::after {
content: "";
width: 100%;
height: 30px;
background-image: url(../img/company/bg_company_happylife3.webp);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
display: block;
position: relative;
top: -1px;
}
.p-company .p-company__schedule .p-company__schedule__happylife div {
width: 100%;
padding-top: clamp(20px, 5.33vw, 30px);
background-image: url(../img/company/bg_company_happylife2.webp);
background-repeat: repeat-y;
background-size: contain;
display: block;
z-index: 0;
box-sizing: border-box;
}
.p-company .p-company__schedule .p-company__schedule__happylife div h3 {
margin-bottom: clamp(20px, 5.33vw, 30px);
}
.p-company .p-company__schedule .p-company__schedule__happylife div h3 img {
width: 80%;
max-width: 368px;
aspect-ratio: 368/95;
margin: 0 auto;
}
.p-company .p-company__schedule .p-company__schedule__happylife div p {
padding: 0 20px;
margin-bottom: 30px;
font-size: max(14px, 1rem);
width: 100%;
box-sizing: border-box;
display: block;
}
.p-company .p-company__schedule .p-company__schedule__happylife div div {
padding: 0 20px;
background-image: none;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.p-company .p-company__schedule .p-company__schedule__happylife div div div {
padding: 0;
box-sizing: border-box;
}
.p-company .p-company__schedule .p-company__schedule__happylife div div div::before {
content: "";
width: 100%;
aspect-ratio: 482/227;
background-image: url(../img/company/bg_company_happylife_decoration.webp);
background-repeat: no-repeat;
background-size: contain;
position: absolute;
top: 20%;
z-index: -1;
}
.p-company .p-company__schedule .p-company__schedule__happylife div div div img {
width: 100%;
object-fit: contain;
object-position: bottom;
}
.p-company .p-company__data {
padding: clamp(50px, 13.33vw, 100px) min(3.3%, 20px) 0;
margin-bottom: clamp(100px, 26.67vw, 200px);
box-sizing: border-box;
}
.p-company .p-company__data::before {
content: "";
width: clamp(190px, 50.67vw, 315px);
aspect-ratio: 315/57;
margin-left: clamp(30px, 8vw, 60px);
background-image: url(../img/company/img_company_data_label.webp);
background-repeat: no-repeat;
background-size: contain;
background-position: bottom;
display: block;
}
.p-company .p-company__data .p-company__data--left {
height: clamp(25px, 6.67vw, 35px);
border-top: solid 2px #000000;
border-left: solid 2px #000000;
border-radius: 20px 0 0 0;
margin-right: calc(50% - 50vw);
}
.p-company .p-company__data .p-company__data__inner {
border-left: solid 2px #000000;
}
.p-company .p-company__data .p-company__data__inner h2 {
margin-bottom: clamp(12px, 3.2vw, 16px);
}
.p-company .p-company__data .p-company__data__inner h2 img {
width: 100%;
max-width: 483px;
}
.p-company .p-company__data .p-company__data__inner p {
margin-bottom: 24px;
font-size: max(14px, 1rem);
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(1) {
width: fit-content;
margin-bottom: 24px;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(1)::after {
content: "";
width: 100%;
max-width: 475px;
aspect-ratio: 475/290;
background-color: #000000;
display: block;
position: absolute;
top: 5px;
right: -4px;
z-index: -1;
box-sizing: border-box;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(1) img {
width: 100%;
max-width: 475px;
aspect-ratio: 475/290;
object-fit: cover;
border: solid 4px #000000;
box-sizing: border-box;
}
.p-company .p-company__data .p-company__data__inner h3 {
border-bottom: solid 4px #000000;
margin-bottom: 19.5px;
display: flex;
gap: 0 clamp(10px, 2.67vw, 20px);
align-items: flex-end;
}
.p-company .p-company__data .p-company__data__inner h3 img {
width: clamp(84px, 22.4vw, 94px);
aspect-ratio: 94/56;
object-fit: contain;
}
.p-company .p-company__data .p-company__data__inner h3 p {
margin-bottom: 0;
font-size: max(18px, 1.5rem);
font-weight: 600;
line-height: 2.5rem;
letter-spacing: -1px;
}
@media screen and (max-width: 480px) {
.p-company .p-company__data .p-company__data__inner h3 p {
letter-spacing: -1.5px;
}
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(1) {
display: flex;
align-items: center;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(1) li {
width: 33.3333333333%;
margin-right: clamp(10px, 2.67vw, 18px);
height: 35px;
color: #FFFFFF;
background-color: #E5557B;
font-size: max(14px, 1rem);
font-weight: 600;
display: flex;
justify-content: center;
align-items: center;
padding-top: 3px;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(1) li:last-of-type {
margin-right: 0;
}
.p-company .p-company__data .p-company__data__inner > i {
margin-top: 10px;
display: block;
width: 100%;
text-align: left;
font-style: normal;
font-size: max(14px, 1rem);
color: #000000;
text-indent: -1em;
padding-left: 1em;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(2) {
margin-top: clamp(30px, 8vw, 50px);
margin-bottom: clamp(30px, 8vw, 50px);
display: flex;
align-items: center;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(2) div {
width: 100%;
max-width: 310px;
aspect-ratio: 310/216;
border: solid 2px #000000;
margin: 0;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(2) div img {
width: 100%;
max-width: 310px;
aspect-ratio: 310/216;
border: none;
object-fit: cover;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(2) div::after {
content: unset;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(2) img {
width: 40%;
max-width: 190px;
aspect-ratio: 190/216;
object-fit: cover;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(2) li {
display: flex;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(2) li em {
width: clamp(70px, 18.67vw, 140px);
font-size: max(14px, 1rem);
flex-shrink: 0;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(2) li p {
margin-bottom: 0;
font-size: max(14px, 1rem);
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(3) {
margin-bottom: 30px;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(3) li {
display: flex;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(3) li em {
width: clamp(70px, 18.67vw, 140px);
font-size: max(14px, 1rem);
flex-shrink: 0;
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(3) li p {
margin-bottom: 0;
font-size: max(14px, 1rem);
}
.p-company .p-company__data .p-company__data__inner ul:nth-of-type(3) li:nth-of-type(1) em {
width: 100%;
padding-top: 10px;
border-top: solid 1px #0063D6;
margin-top: 16px;
color: #0063D6;
font-size: max(14px, 1rem);
font-weight: 600;
}
.p-company .p-company__data .p-company__data__inner a {
width: clamp(256px, 68.27vw, 376px);
height: clamp(37px, 9.87vw, 45px);
padding-top: 4px;
border: solid 2px #000000;
border-radius: 10px;
margin: 0 auto 30px;
color: #FFFFFF;
background-color: #0063D6;
font-size: max(18px, 1.4rem);
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.p-company .p-company__data .p-company__data__inner a:hover {
background-color: #E04826;
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(3) {
width: clamp(256px, 68.27vw, 376px);
margin: 0 auto clamp(32px, 8.53vw, 48px);
}
.p-company .p-company__data .p-company__data__inner div:nth-of-type(3) iframe {
width: 100%;
}
.p-company .p-company__data .p-company__data__inner span {
font-size: max(14px, 0.83rem);
text-align: center;
display: block;
}
.p-company .p-company__data .p-company__data--right {
height: clamp(32px, 8.53vw, 48px);
border-bottom: solid 2px #000000;
border-left: solid 2px #000000;
border-radius: 0 0 0 20px;
}
.p-company .p-company__data.--color_sector1 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #428ADD;
}
.p-company .p-company__data.--color_sector2 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #ED7F1C;
}
.p-company .p-company__data.--color_sector3 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #10A384;
}
.p-company .p-company__data.--color_sector4 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #E5557B;
}
.p-company .p-company__data.--color_sector5 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #913F93;
}
.p-company .p-company__data.--color_sector6 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #69AC00;
}
.p-company .p-company__data.--color_sector7 .p-company__data__inner ul:nth-of-type(1) li {
background-color: #29ABE2;
}
.iPhone .p-company .p-company__mv .p-company__mv__primary > div > div em, .iPad .p-company .p-company__mv .p-company__mv__primary > div > div em {
padding-top: 6px !important;
}
.iPhone .p-company .p-company__mv .p-company__mv__primary > div > div > div, .iPad .p-company .p-company__mv .p-company__mv__primary > div > div > div {
padding-top: 6px !important;
padding-bottom: 7px !important;
}
.iPhone .p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal, .iPad .p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal {
padding-top: 10px !important;
padding-bottom: 8px !important;
}
.iPhone .p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small, .iPad .p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_small {
padding-top: 8px !important;
padding-bottom: 10px !important;
}
.iPhone .p-company__discovery__point ul li > div > div > div:last-of-type p span, .iPad .p-company__discovery__point ul li > div > div > div:last-of-type p span {
letter-spacing: -2px !important;
}
.Android .p-company .p-company__mv .p-company__mv__primary > div > div em {
padding-top: 8px !important;
}
.Android .p-company .p-company__mv .p-company__mv__primary > div > div > div {
padding-top: 6px !important;
padding-bottom: 7px !important;
}
.Android .p-company .p-company__mv .p-company__mv__primary > div > div > div.--layout_1line_nomal {
padding-top: 10px !important;
padding-bottom: 8px !important;
}
.Android .p-company__discovery__point ul li > div > div > div:last-of-type p span {
letter-spacing: -1px !important;
}
/*----------------------------------------
就職活動の前に知りたいポイント
----------------------------------------*/
.p-point {
overflow: hidden;
width: 100%;
padding: 40px 0 min(120px, 20vw);
background-color: #cce0f7;
}
.p-point h1 {
width: 100%;
margin-bottom: 20px;
}
.p-point h1 img {
width: 100%;
height: auto;
object-fit: contain;
}
.p-point .p-point__inner {
background-color: #FFFFFF;
width: 100%;
padding-top: min(30px, 5vw);
padding-bottom: min(30px, 5vw);
padding-left: min(3.8%, 20px);
padding-right: min(3.8%, 20px);
box-sizing: border-box;
border: 8px solid #f5bbca;
border-radius: 30px;
margin-bottom: min(20px, 3.33vw);
}
.p-point .p-point__inner h2 {
width: 100%;
max-height: 67px;
padding: 12px 10px 12px 22px;
background-color: #E5557B;
border-radius: 8.575px;
display: flex;
justify-content: center;
align-items: flex-end;
position: relative;
}
.p-point .p-point__inner h2 > img {
width: 52.66vw;
height: auto;
max-width: 316px;
object-fit: contain;
}
.p-point .p-point__inner h2 i {
position: relative;
display: block;
margin-left: min(15px, 2.5vw);
width: 9.33vw;
max-width: 56px;
}
.p-point .p-point__inner h2 i > img {
width: 100%;
position: absolute;
bottom: 0;
}
.p-point .p-point__inner.p-point__detail1 {
border: 8px solid #f5bbca;
}
.p-point .p-point__inner.p-point__detail1 h2 {
background-color: #E5557B;
}
.p-point .p-point__inner.p-point__detail1 h2 > img {
width: 52.66vw;
max-width: 316px;
}
.p-point .p-point__inner.p-point__detail1 h2 i {
margin-left: min(15px, 2.5vw);
}
.p-point .p-point__inner.p-point__detail1 > div {
display: flex;
column-gap: 4.16%;
}
.p-point .p-point__inner.p-point__detail1 > div p {
display: block;
width: 55.2%;
padding: 20px 0 5px;
font-size: max(1rem, 14px);
font-weight: 600;
line-height: 1.5;
}
.p-point .p-point__inner.p-point__detail1 > div img {
padding: 15px 0 5px;
width: 39%;
max-width: 180px;
object-fit: contain;
object-position: center;
}
.p-point .p-point__inner.p-point__detail2 {
border: 8px solid #c3de99;
}
.p-point .p-point__inner.p-point__detail2 h2 {
background-color: #69AC00;
}
.p-point .p-point__inner.p-point__detail2 h2 > img {
width: 28.66vw;
max-width: 172px;
}
.p-point .p-point__inner.p-point__detail2 h2 i {
margin-left: min(5px, 0.833vw);
}
.p-point .p-point__inner.p-point__detail2 > div {
display: flex;
flex-direction: column;
align-items: center;
padding: min(20px, 3.33vw) 0 0;
}
.p-point .p-point__inner.p-point__detail2 > div > p {
display: block;
margin-bottom: min(20px, 3.33vw);
width: 100%;
font-size: max(1rem, 14px);
font-weight: 600;
line-height: 1.5;
}
.p-point .p-point__inner.p-point__detail2 > div > img {
width: 71.66vw;
max-width: 430px;
object-fit: contain;
margin-bottom: min(20px, 3.33vw);
}
.p-point .p-point__inner.p-point__detail2 > div > div {
background-color: #FFFFFF;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li {
display: flex;
flex-direction: column;
row-gap: 5px;
box-sizing: border-box;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__label {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: fit-content;
background-color: #e8f3d9;
border-radius: 5.2412px;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__label span {
display: block;
padding: 5px 0 0;
width: fit-content;
font-weight: bold;
font-size: max(1.333rem, 16px);
font-weight: 600;
color: #69AC00;
box-sizing: border-box;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__label i {
display: block;
width: 15px;
height: 15px;
right: 13px;
position: absolute;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__label i::before {
content: "";
display: block;
width: 15px;
height: 2px;
background-color: #69AC00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__label i::after {
content: "";
display: block;
width: 15px;
height: 2px;
background-color: #69AC00;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-90deg);
transition: all 0.3s ease;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__content {
padding: 0;
height: 0;
overflow: hidden;
transition: height 0.3s ease, padding 0.3s ease;
font-size: max(0.889rem, 12px);
font-weight: 600;
line-height: 1.5;
box-sizing: border-box;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__check {
display: none;
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__check:checked + .p-point__ac__label + .p-point__ac__content {
height: auto;
padding: min(15px, 2.5vw) 0 min(30px, 5vw);
}
.p-point .p-point__inner.p-point__detail2 > div > div ul li .p-point__ac__check:checked + .p-point__ac__label i::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.p-point .p-point__inner.p-point__detail3 {
border: 8px solid #99c1ef;
padding-bottom: min(40px, 6.66vw);
}
.p-point .p-point__inner.p-point__detail3 h2 {
background-color: #0063D6;
}
.p-point .p-point__inner.p-point__detail3 h2 > img {
width: 44.5vw;
max-width: 267px;
}
.p-point .p-point__inner.p-point__detail3 h2 i {
margin-left: min(5px, 0.833vw);
}
.p-point .p-point__inner.p-point__detail3 > div {
display: flex;
flex-direction: column;
align-items: center;
padding: min(20px, 3.33vw) 0 0;
}
.p-point .p-point__inner.p-point__detail3 > div > p {
display: block;
margin-bottom: min(20px, 3.33vw);
width: 100%;
font-size: max(1rem, 14px);
font-weight: 600;
line-height: 1.5;
}
.p-point .p-point__inner.p-point__detail3 > div > div {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
column-gap: min(25px, 4.16vw);
}
.p-point .p-point__inner.p-point__detail3 > div > div > div {
width: 37.83vw;
max-width: 227px;
}
.p-point .p-point__inner.p-point__detail3 > div > div > div ul {
width: 100%;
display: flex;
flex-direction: column;
row-gap: min(8px, 1.33vw);
}
.p-point .p-point__inner.p-point__detail3 > div > div > div ul li {
width: 100%;
height: 26px;
text-align: center;
padding-top: 0;
background-color: #FFF000;
border: 1px solid #251e1c;
border-radius: 5px;
font-size: max(1rem, 14px);
font-weight: 600;
color: #3f6eb4;
display: flex;
justify-content: center;
align-items: center;
}
.p-point .p-point__inner.p-point__detail3 > div > div > div > p {
display: block;
margin-top: min(10px, 1.66vw);
font-size: max(1rem, 14px);
font-weight: 600;
color: #3f6eb4;
text-align: right;
}
.p-point .p-point__inner.p-point__detail3 > div > div img {
width: 35.66vw;
max-width: 214px;
object-fit: contain;
object-position: top;
}
.p-point .p-point__inner.p-point__detail4 {
border: 8px solid #ebc096;
}
.p-point .p-point__inner.p-point__detail4 h2 {
background-color: #ED7F1C;
}
.p-point .p-point__inner.p-point__detail4 h2 > img {
width: 56.66vw;
max-width: 340px;
}
.p-point .p-point__inner.p-point__detail4 h2 i {
margin-left: min(5px, 0.833vw);
}
.p-point .p-point__inner.p-point__detail4 > div {
display: flex;
flex-direction: column;
align-items: center;
padding: min(20px, 3.33vw) 0 0;
}
.p-point .p-point__inner.p-point__detail4 > div > p {
display: block;
margin-bottom: min(20px, 3.33vw);
width: 100%;
font-size: max(1rem, 14px);
font-weight: 600;
line-height: 1.5;
}
.p-point .p-point__inner.p-point__detail4 > div > div {
width: 100%;
}
.p-point .p-point__inner.p-point__detail4 > div > div h3 {
border: 2px solid #ED7F1C;
border-radius: 20px;
padding: 8px 10px 5px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
@media screen and (max-width: 480px) {
.p-point .p-point__inner.p-point__detail4 > div > div h3 {
border-radius: 15px;
}
}
.p-point .p-point__inner.p-point__detail4 > div > div h3 em {
display: block;
line-height: 1;
margin-bottom: 8px;
font-size: max(1.222rem, 16px);
font-weight: 600;
color: #000000;
}
.p-point .p-point__inner.p-point__detail4 > div > div h3 span {
display: block;
line-height: 1;
color: #ED7F1C;
font-size: max(1.222rem, 16px);
font-weight: 600;
}
.p-point .p-point__inner.p-point__detail4 > div > div > div {
display: flex;
align-items: center;
}
.p-point .p-point__inner.p-point__detail4 > div > div > div img {
margin-left: min(50px, 8.33vw);
width: 4.16vw;
max-width: 25px;
}
.p-point .p-point__inner.p-point__detail4 > div > div > div span {
display: block;
font-size: max(1rem, 14px);
color: #000000;
font-weight: 600;
margin-left: min(20px, 3.33vw);
}
.p-point .p-point__inner.p-point__detail4 > div > div b {
display: block;
width: 100%;
background-color: #ED7F1C;
border-radius: 20px;
padding: 8px 10px 5px;
text-align: center;
z-index: 1;
box-sizing: border-box;
}
.p-point .p-point__inner.p-point__detail4 > div > div b span {
color: #FFFFFF;
font-size: max(1.222rem, 16px);
font-weight: 600;
line-height: 1;
}
.p-point .p-point__inner.p-point__detail5 {
border: 8px solid #d3b2d4;
}
.p-point .p-point__inner.p-point__detail5 h2 {
background-color: #913F93;
}
.p-point .p-point__inner.p-point__detail5 h2 > img {
width: 57.99vw;
max-width: 348px;
}
.p-point .p-point__inner.p-point__detail5 h2 i {
margin-left: 0;
}
.p-point .p-point__inner.p-point__detail5 > img {
width: 100%;
height: auto;
object-fit: contain;
padding: min(15px, 2.5vw) 0 min(13px, 2.16vw);
}
.p-point .p-point__inner.p-point__detail5 > div {
width: 100%;
}
.p-point .p-point__inner.p-point__detail5 > div dl {
width: 100%;
}
.p-point .p-point__inner.p-point__detail5 > div dl dt {
display: flex;
justify-content: center;
align-items: center;
border-radius: 5.2412px;
width: 100%;
height: 32px;
background-color: #eee2ef;
color: #913F93;
font-size: max(1.222rem, 16px);
font-weight: 600;
line-height: 1;
box-sizing: border-box;
padding: 5px 0 0;
}
.p-point .p-point__inner.p-point__detail5 > div dl dd {
width: 100%;
padding: min(10px, 1.66vw) 0 min(20px, 3.33vw);
color: #000000;
font-size: max(0.889rem, 12px);
font-weight: 600;
list-style: 1.5;
}
.p-point .p-point__inner.p-point__detail5 > div dl dd:last-of-type {
padding: min(10px, 1.66vw) 0 min(10px, 1.66vw);
}
footer .l-ft__notes.p-poin__footer {
background-color: #cce0f7 !important;
}
.iPhone .p-point__item,
.iPad .p-point__item {
padding: 0 !important;
}
.iPhone .p-point__ac__label span,
.iPad .p-point__ac__label span {
padding: 0 !important;
}
.Android .p-point__item {
padding: 2px 0 0 !important;
}
.Android .p-point__ac__label span {
padding: 0 !important;
}
/*----------------------------------------
clearfix
----------------------------------------*/
.u-cf::after {
content: "";
display: block;
clear: both;
}
/*----------------------------------------
font
----------------------------------------*/
/*----------------------------------------
margin
----------------------------------------*/
.u-mt__wide {
margin-top: 150px;
}
@media screen and (max-width: 600px) {
.u-mt__wide {
margin-top: 100px;
}
}
.u-mt__normal {
margin-top: 150px;
}
@media screen and (max-width: 600px) {
.u-mt__normal {
margin-top: 50px;
}
}
.u-mt__narrow {
margin-top: 75px;
}
@media screen and (max-width: 600px) {
.u-mt__narrow {
margin-top: 50px;
}
}
.u-mb__wide {
margin-bottom: 150px;
}
@media screen and (max-width: 600px) {
.u-mb__wide {
margin-bottom: 100px;
}
}
.u-mb__normal {
margin-bottom: 150px;
}
@media screen and (max-width: 600px) {
.u-mb__normal {
margin-bottom: 50px;
}
}
.u-mb__narrow {
margin-bottom: 75px;
}
@media screen and (max-width: 600px) {
.u-mb__narrow {
margin-bottom: 50px;
}
}
/*----------------------------------------
padding
----------------------------------------*/
.u-pt__wide {
padding-top: 150px;
}
@media screen and (max-width: 600px) {
.u-pt__wide {
padding-top: 100px;
}
}
.u-pt__normal {
padding-top: 100px;
}
@media screen and (max-width: 600px) {
.u-pt__normal {
padding-top: 50px;
}
}
.u-pt__narrow {
padding-top: 50px;
}
@media screen and (max-width: 600px) {
.u-pt__narrow {
padding-top: 25px;
}
}
.u-pb__wide {
padding-bottom: 150px;
}
@media screen and (max-width: 600px) {
.u-pb__wide {
padding-bottom: 100px;
}
}
.u-pb__normal {
padding-bottom: 100px;
}
@media screen and (max-width: 600px) {
.u-pb__normal {
padding-bottom: 50px;
}
}
.u-pb__narrow {
padding-bottom: 50px;
}
@media screen and (max-width: 600px) {
.u-pb__narrow {
padding-bottom: 25px;
}
}
/*----------------------------------------
position
----------------------------------------*/
.u-pos__flex__center {
display: flex;
align-items: center;
justify-content: center;
}
.u-pos__flex__center--left {
justify-content: flex-start;
}
.u-pos__flex__center--right {
justify-content: flex-end;
}
/*# sourceMappingURL=app.css.map */