@charset "UTF-8";

/* フォント読み込み（使用中） */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap");
@import url("https://use.typekit.net/caj1gry.css");

/* ===== Reset & 基本 ===== */
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
canvas,
caption,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 1em;
vertical-align: baseline;
background: transparent;
}
html,
body {
  overflow-x: hidden;
}
@media screen and (max-width: 820px) {
html {
font-size: 100%;
}
}

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
line-height: 1;
font-family: Noto Sans JP, sans-serif;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}

nav ul,
ul li {
list-style: none;
}

blockquote,
q {
quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
content: "";
}

img {
max-width: 100%;
height: auto;
}

a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
text-decoration: none;
}

ins {
text-decoration: none;
}

ins,
mark {
background-color: #ff9;
color: #000;
}

mark {
font-style: italic;
font-weight: 700;
}

del {
text-decoration: line-through;
}

abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}

input,
select {
vertical-align: middle;
}

article {
width: 100%;
height: 100%;
letter-spacing: 1px;
}

.pc_view {
display: inline-block;
}

@media screen and (max-width: 820px) {
.pc_view {
display: none;
}
}

.sp_view {
display: none;
}

@media screen and (max-width: 820px) {
.sp_view {
display: block;
}
}

/* ===== レイアウト ===== */
header,
.contener {
position: relative;
max-width: 1200px;
margin: 0 auto;
}

@media (max-width: 1024px) and (min-width: 821px) {
header {
padding: 6rem 0 0 0 !important;
}

.contener {
padding: 0 2rem;
}
}

@media screen and (max-width: 820px) {
header,
.contener {
padding: 0 1rem;
}
}

section {
width: 100%;
}

/* ===== ヘッダー ===== */
header {
padding: 1em 0.5rem 2em 1rem;
}

header > p {
font-size: 0.76rem;
}

header > a {
margin-top: 0.5rem;
width: 300px;
display: block;
}

header > a img {
width: 100%;
}

header .hd-btn {
position: fixed;
top: 0;
right: 0;
display: flex;
align-items: start;
z-index: 999999999999999;
}

header .hd-btn a {
position: relative;
color: #fff;
font-weight: bold;
border-radius: 0 0 1rem 1rem;
}

header .hd-btn a.hd-btn01 {
background-color: #000;
padding: 0.75rem 3.5rem 0.5rem 1rem;
margin-right: 0.5rem;
font-size: 0.75rem;
text-align: center;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

header .hd-btn a.hd-btn03 {
background-color: #e0ecfe;
padding: 1rem 3rem 1rem 1rem;
margin-right: 0.5rem;
color: #388cec;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

header .hd-btn a.hd-btn02 {
background-image: linear-gradient(90deg, #55cbc5, #1a8dee);
padding: 1rem 3rem 1rem 1rem;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

header .hd-btn a img {
position: absolute;
top: 0;
bottom: 0;
right: 1rem;
margin: auto;
width: 30px;
height: auto;
}

@media screen and (max-width: 1024px) {
header {
padding: 5rem 0 1rem;
text-align: center;
}

header > a {
margin: 0.5rem auto;
width: 300px;
}

header .hd-btn {
position: fixed;
display: flex;
width: 100%;
z-index: 100;
}

header .hd-btn a.hd-btn01,
header .hd-btn a.hd-btn02,
header .hd-btn a.hd-btn03 {
width: 100%;
min-height: 60px;
display: block;
border-radius: inherit;
margin: 0;
}

header .hd-btn a img {
right: 1.25rem;
width: 32px;
}
}
@media (max-width: 480px) {
header .hd-btn a img {
right: 1.00rem;
width: 32px;
}
header .hd-btn a.hd-btn02,
header .hd-btn a.hd-btn03{
font-size: 1.0rem;
}
}
@media (max-width: 390px) {
header .hd-btn a img {
display: none;
width:0;
}
header .hd-btn a.hd-btn01,
header .hd-btn a.hd-btn02,
header .hd-btn a.hd-btn03{
font-size: 0.85rem;
padding: 0.25rem 1rem;
align-items: center;
 display:inline-grid;
}
}


/* ===== セクションカラー/上下余白 ===== */
section#MV {
background-color: #fff;
}

@media (max-width: 1024px) {
section#MV {
padding-top: 1rem;
text-align: center;
}
}

section#News {
padding: 0;
}
section#Topics {
background-color: #f6fbfd;
padding: 3rem 0 3rem 0;
line-height: 1.6;
}
section#Client {
padding: 3rem 0;
background-color: #ffffff;
line-height: 1.6;
}
section#Support {
background-color: #f6fbfd;
padding: 3rem 0;
line-height: 1.6;
}
section#Nayami {
padding: 3rem 0;
line-height: 1.6;
}

section#Kaiketsu {
background-color: #00bac3;
padding: 3rem 0;
line-height: 1.6;
}

section#Ex {
background-color: #f6fbfd;
padding: 4rem 0 3rem;
line-height: 1.6;
}

section#Anken {
background-color: #fff;
padding: 3rem 0 6rem;
line-height: 1.6;
}

section#Flow {
background-color: #f6fbfd;
padding: 3rem 0;
line-height: 1.6;
}

section#Faq {
background-color: #fff;
padding: 3rem 0;
line-height: 1.6;
}

section#Cv {
background-color: #00bac3;
padding: 3rem 0;
line-height: 1.6;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
text-align: center;
}

.container {
max-width: 1200px;
margin: 0 auto;
}

@media screen and (max-width: 820px) {
.container {
max-width: 100%;
}
}

.cyan {
color: #00acc1;
}
.yellow {
color: #f4cb20;
}
.nayami {
color: #9c80b8;
}
/* ===== MV ===== */
.fade-in {
animation: fadeInUp 0.8s ease-out forwards;
opacity: 0;
transform: translateY(30px);
}

.fade-in:nth-child(1) {
animation-delay: 0.2s;
}

.fade-in:nth-child(2) {
animation-delay: 0.4s;
}

.fade-in:nth-child(3) {
animation-delay: 0.6s;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

#MV .illustration {
vertical-align: bottom;
position: relative;
}

#MV .illustration img {
width: 100%;
vertical-align: bottom;
position: absolute;
bottom: 0;
right: 0;
}

#MV .text-shadow {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#MV h2 {
font-size: 3rem;
font-weight: 600;
padding: 0.5rem 0;
line-height: 1.35;
white-space: nowrap;
color: #00acc1;
margin: 0;
letter-spacing: -0.03em;
}

#MV h2 span {
font-size: 3.35rem;
}

#MV p {
font-size: 1.25rem;
font-weight: 600;
padding: 0.5rem 0;
line-height: 1.65;
color: #000;
}

@media (max-width: 768px) {
#MV .illustration {
background-position: center;
background-size: cover;
min-height: 300px;
}

#MV .illustration img {
/*position: inherit;*/
width: 100%;
margin: 0 auto;
}
}

@media (max-width: 480px) {
#MV h2 {
font-size: 2rem;
}

#MV p {
font-size: 1rem;
}

#MV .illustration {
background-position: center;
background-size: cover;
min-height: 300px;
}

#MV .illustration img {
/*position: inherit;*/
width: 100%;
margin: 0 auto;
}
}

.circle {
display: block;
margin: 0 auto;
width: auto;
}

.circle_im img {
width: 460px;
margin: 0 auto 2rem;
}

@media (max-width: 480px) {
.circle_im img {
width: 90%;
margin: 0 auto;
}
}

#MV .ft-btn {
margin: 1.5rem 0 1rem 0rem;
}

@media (max-width: 1024px) {
#MV .ft-btn {
margin: 1.5rem 0 1rem 0;
}
}

#MV .ft-btn a {
position: relative;
border-radius: 2.5rem;
text-align: center;
padding: 1rem 5rem 1rem 3rem;
font-weight: bold;
font-size: 1.1rem;
}

#MV .ft-btn a.ft-btnA {
background-image: linear-gradient(90deg, #55cbc5, #1a8dee);
color: #fff;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

#MV .ft-btn a img {
position: absolute;
top: 0;
bottom: 0;
right: 1.5rem;
margin: auto;
width: 36px;
height: auto;
}

@media (max-width: 820px) {
#MV .ft-btn a {
display: inherit;
width: 400px;
margin: 0 auto;
}
}

@media (max-width: 480px) {
#MV .ft-btn a {
display: inherit;
width: 90%;
margin: 0 auto;
}
}

#FVslide {
position: relative;
width: 100%; /* 好みのサイズに調整 */
height: 450px;
min-height: 450px;
overflow: hidden;
}

#FVslide img {
position: absolute;
width: 100%;
/*height: 100%;*/
object-fit: cover;
opacity: 0;
transition: opacity 1s ease;
bottom: 0;
}

#FVslide img.active {
opacity: 1;
}
/* ===== 1行ニュース（PC・タブレット） ===== */
#News .container {
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
text-align: center;
height: 3em;
padding: 0 1rem;
}

#News .ticker {
position: relative;
height: 50px;
overflow: hidden;
background-color: #23334b;
border-radius: 16px;
}

/* PC・タブレット用：縦スライド */
#News .ticker li {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transform: translateY(100%);
transition: all 1s ease;
}

#News .ticker li.active {
opacity: 1;
transform: translateY(0);
}

#News .ticker li.inactive {
opacity: 0;
transform: translateY(-100%);
}

#News .ticker li a {
box-sizing: border-box;
display: grid;
place-content: center center;
height: 50px;
color: #fff;
font-size: 16px;
text-decoration: none;
padding: 0 1.5em;
line-height: 1;
}

#News .ticker li span {
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

/* ===== タブレット（481〜820px）はサイズだけ調整 ===== */
@media screen and (max-width: 820px) and (min-width: 481px) {
#News .container {
height: 2.6em;
}

#News .ticker {
height: 44px;
}

#News .ticker li a {
height: 44px;
font-size: 14px;
padding: 0 1.25em;
}
}

/* ===== ▼ スマホ（〜480px） ===== */
/* ticker の「切り替え」は残しつつ、全文折り返し表示 */
@media screen and (max-width: 480px) {

#News .container {
height: auto;
padding: 0 0.75rem;
}

#News .ticker {
position: relative;
height: auto;         /* 高さ固定を解除 */
overflow: visible;    /* はみ出しOK */
padding: 0.4rem 0;
border-radius: 12px;
}

/* SPでは絶対配置をやめて、通常フローで1件だけ表示 */
#News .ticker li {
position: static;
width: 100%;
height: auto;
opacity: 0;
transform: none;
transition: opacity 0.5s ease;
display: none;       /* 基本は全部非表示 */
}

/* 表示中の1件（active）だけ見せる */
#News .ticker li.active {
display: block;
opacity: 1;
}

/* inactive は非表示でOK（transform は不要） */
#News .ticker li.inactive {
display: none;
opacity: 0;
}

#News .ticker li a {
display: block;
box-sizing: border-box;
height: auto;
padding: 0.5rem 0.75rem;
font-size: 13px;
line-height: 1.5;
text-align: left;
}

#News .ticker li span {
width: 100%;
white-space: normal;   /* ← 折り返し許可 */
overflow: visible;
text-overflow: unset;
}
}

#banner{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:400;
  display:block;
  line-height:0;
  outline:none;
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

#banner img{
  width: 450px;
  height: auto;
}
.close-btn {
  position: absolute;
  top: -20px;
  right: 4px;
  background-color: transparent;
  border: none;
  font-size: 20px;
  color: #000;
  cursor: pointer;
}

@media screen and (max-width: 576px) {
  #banner img{
    width: 80vw;
    height: auto;
  }
}

#banner.is-hidden {
pointer-events: none;
animation: slideOutRight 0.4s ease forwards;
}
@keyframes slideOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(100px);
}
}
/* ===== Blog（PC・タブレット） ===== */
#Topics .container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
flex-wrap: wrap;
}

#Topics .container h1 {
font-size: 1.8rem;
font-weight: bold;
padding: 2rem 0 1rem 0;
position: relative;
width: max-content;
margin: 0 auto;
}

#Topics .container h1::before,
#Topics .container h1::after {
position: absolute;
top: 20px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Topics .container h1::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Topics .container h1::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}
#Topics .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
gap: 30px;
margin-top: 50px;
}

#Topics .card {
padding:0;
border: 0;
position: relative;
}

#Topics .card-title {
font-size: 1.0rem;
font-weight: bold;
color: #000000;
margin: 10px 0 5px;
text-align: left;
line-height: 1.75;
}

#Topics .card-illustration {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

#Topics .card-illustration img {
width: 100%;
}

#Topics .card-description {
font-size:0.9rem;
color: #000;
text-align: left;
line-height: 1.75;
margin-top: 0;
}
#Topics .post-date {
text-align: right;
margin-top: 1rem;
}

#Topics .entry-date{
font-size:0.9rem;
margin-left: 0.5rem;
}
#Topics .blog-category{
position: absolute;
top: 0;
left: 0;
font-size: 11px;
color: #ffffff;
background-color: rgba(51, 51, 51, 0.7);
padding: 2px 6px;
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@media (max-width: 1024px) {
#Topics .container {
width: 94%;
}
}

@media (max-width: 768px) {
#Topics .cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}

#Topics .card {
/*padding: 20px;*/
}

#Topics .card-illustration {
width: 100%;
height: auto;
}
}

@media (max-width: 480px) {
#Topics .container h1 {
font-size: 1.4rem;
line-height: 1.5;
}

#Topics .container h2 {
font-size: 1.2rem;
line-height: 1.5;
}
}


/* ===== Client / Anken 共通カード ===== */
#Client .container-fuild h1 {
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 0 2rem 0;
position: relative;
width: max-content;
margin: 0 auto;
}

#Client .container-fuild h1::before,
#Client .container-fuild h1::after {
position: absolute;
top: 20px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Client .container-fuild h1::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Client .container-fuild h1::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}


@media (max-width: 480px) {
#Client .container-fuild h1 {
    font-size: 1.2rem;
    line-height: 1.5;
}
}
#Client .job-card,
#Anken .job-card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
border: 1px solid #adb7c5;
padding: 0.5rem 1rem;
height: 100%;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

#Client .job-card:hover,
#Anken .job-card:hover {
transform: translateY(-2px);
box-shadow: 3px 3px 0 0 rgba(173, 183, 197, 0.3);
}

#Client h3,
#Anken h3 {
font-size: 1.23rem;
font-weight: bold;
padding: 1rem 0;
}

#Client .tag,
#Anken .tag {
font-size: 11px;
padding: 2px 6px;
border-radius: 3px;
margin: 1px;
display: inline-block;
}

/* タグ色 */
#Client .tag-urgent,
#Anken .tag-urgent {
background-color: #fee2e2;
color: #dc2626;
}

#Client .tag-startup,
#Anken .tag-startup {
background-color: #dbeafe;
color: #2563eb;
}

#Client .tag-weekend,
#Anken .tag-weekend {
background-color: #f3e8ff;
color: #7c3aed;
}

#Client .tag-sidejob,
#Anken .tag-sidejob {
background-color: #ecfdf5;
color: #059669;
}

#Client .tag-longterm,
#Anken .tag-longterm {
background-color: #fef3c7;
color: #d97706;
}

#Client .tag-fulltime,
#Anken .tag-fulltime {
background-color: #f1f5f9;
color: #475569;
}

#Client .tag-dx,
#Anken .tag-dx {
background-color: #fef3c7;
color: #d97706;
}

#Client .tag-ai,
#Anken .tag-ai {
background-color: #f3e8ff;
color: #7c3aed;
}

#Client .tag-remote,
#Anken .tag-remote {
background-color: #e0f2fe;
color: #0891b2;
}

#Client p.msg{
font-size: 1.1rem;
text-align: center;
font-weight: 500;
padding: 0.5rem 2.5rem;
margin: 1.5rem 0;
color: #00acc1;
}
.workStylestyle {
border-top: 1px solid #adb7c5;
line-height: 1.65;
padding: 0.5rem 0;
}
.yen {
font-size: 1.1rem;
font-weight: 600;
color: #e84393;
}

/* ===== Anken タブ ===== */
#Anken .container {
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}

#Anken h1 {
font-size: 2.1rem;
font-weight: bold;
padding: 1rem 0;
}

#Anken .tab {
width: 100%;
font-size: 1.1rem;
}

@media (max-width: 480px) {
#Anken .tab {
width: 100%;
font-size: 0.7rem;
line-height: 1.35;
white-space: nowrap;
}
}
#Anken .tab-active {
position: relative;
background-color: #00acc1;
color: #fff;
border: 1px solid #fff;
flex: 1;
}

#Anken .tab-active::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #00acc1;
}

#Anken .tab-inactive {
  background-color: #ececec;
  color: #333;
  border: 1px solid #fff;
  flex: 1;
}


@media (max-width: 480px) {
#Anken .tab-inactive {
background-color: #ececec;
color: #333;
border: 1px solid #fff;
flex: 1;
}
}
/* ===== Nayami（カルーセル） ===== */
#Nayami h1 {
font-size: 2.2rem;
font-weight: bold;
padding: 1rem 0;
font-feature-settings: "palt" 1;
line-height: 2;
}

#Nayami h2 {
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 0;
position: relative;
width: max-content;
margin: 0 auto 2rem;
}

#Nayami h2::before,
#Nayami h2::after {
position: absolute;
top: 20px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Nayami h2::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Nayami h2::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}

#Nayami .carousel-container {
overflow: hidden;
width: 100%;
font-size: 0.85rem;
}

#Nayami .carousel-track {
display: flex;
transition: transform 0.3s ease-in-out;
}

#Nayami .carousel-item {
flex-shrink: 0;
padding: 0 1rem;
}

#Nayami .speech-bubble {
position: relative;
background: #f2eafa;
/*border: 1px solid #c3b5d2;*/
border-radius: 4rem;
padding: 1.5rem;
margin-bottom: 1rem;
color: #6b587f;
}

#Nayami .speech-bubble::after {
content: "";
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
/*  border-top: 15px solid #c3b5d2;*/
}

#Nayami .speech-bubble::before {
content: "";
position: absolute;
bottom: -13px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 13px solid #f2eafa;
z-index: 1;
}

#Nayami .WideH {
width: 100%;
position: relative;
}

#Nayami .nav-button {
display: none;
}

@media (max-width: 480px) {
#Nayami h1 {
font-size: 1.4rem;
line-height: 1.5;
}

#Nayami h2 {
font-size: 1.2rem;
line-height: 1.5;
}

#Nayami h2::before {
left: -40px;
}

#Nayami h2::after {
right: -40px;
}
}

/* ===== Support（3カード） ===== */
#Support .container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
flex-wrap: wrap;
}

#Support .container h1 {
font-size: 2.2rem;
font-weight: bold;
padding: 1rem 0;
font-feature-settings: "palt" 1;
line-height: 1;
}
#Support .container h2 {
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 0;
position: relative;
width: max-content;
margin: 0 auto;
}

#Support .container h2 span {
color: #00acc1;
font-size: 2.3rem;
}

#Support .container h2::before,
#Support .container h2::after {
position: absolute;
top: 20px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Support .container h2::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Support .container h2::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}
#Support .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
gap: 30px;
margin-top: 50px;
}

#Support .card {
padding:0;
border: 0;
position: relative;
}


#Support .card-title {
font-size: 1.65rem;
font-weight: bold;
color: #00acc1;
margin: 10px 0 5px;
text-align: center;
line-height: 1.35;
}
#Support .card-title span{
font-size: 1.35rem;
}
#Support .card-illustration {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

#Support .card-illustration img {
width: 100%;
}

#Support .card-description {
font-size: 1.0rem;
color: #000;
text-align: center;
line-height: 1.75;
margin-top: 0;
}

#Support .highlight {
color: #00acc1;
font-weight: bold;
}


@media (max-width: 1024px) {
#Support .container {
width: 94%;
}
}

@media (max-width: 768px) {
#Support .cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}

#Support .card {
padding: 20px;
}

#Support .card-illustration {
width: 60%;
height: auto;
}
}

@media (max-width: 480px) {
#Support .container h1 {
font-size: 1.4rem;
line-height: 1.5;
}

#Support .container h2 {
font-size: 1.2rem;
line-height: 1.5;
}
}
/* ===== Kaiketsu（6カード） ===== */
#Kaiketsu .container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
flex-wrap: wrap;
}

#Kaiketsu .container h1 {
font-size: 2.2rem;
font-weight: bold;
padding: 1rem 0;
font-feature-settings: "palt" 1;
line-height: 1;
}

#Kaiketsu .container h2 {
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 0;
position: relative;
width: max-content;
margin: 0 auto;
}

#Kaiketsu .container h2 span {
color: #fff;
font-size: 2.3rem;
}

#Kaiketsu .container h2::before,
#Kaiketsu .container h2::after {
position: absolute;
top: 20px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Kaiketsu .container h2::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Kaiketsu .container h2::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}

#Kaiketsu .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-top: 50px;
}

#Kaiketsu .card {
background: #fff;
border-radius: 10px;
padding: 30px;
border: 1px solid #00acc1;
position: relative;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

#Kaiketsu .card:hover {
transform: translateY(-5px);
box-shadow: 3px 3px 0 0 rgba(173, 183, 197, 0.3);
}

#Kaiketsu .card-number {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #00acc1;
color: #fff;
font-size: 1.75rem;
padding: 10px 15px;
font-family: "din-2014", sans-serif;
font-weight: 600;
}

#Kaiketsu .card-title {
font-size: 1.25rem;
font-weight: bold;
color: #000;
margin: 60px 0 15px;
text-align: center;
line-height: 1.5;
}

#Kaiketsu .card-illustration {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}

#Kaiketsu .card-illustration img {
width: 100%;
}

#Kaiketsu .card-description {
font-size: 0.9rem;
color: #000;
text-align: left;
line-height: 1.75;
margin-top: 15px;
}

#Kaiketsu .highlight {
color: #00acc1;
font-weight: bold;
}

@media (max-width: 1024px) {
#Kaiketsu .container {
width: 94%;
}
}

@media (max-width: 768px) {
#Kaiketsu .cards-grid {
grid-template-columns: 1fr;
gap: 20px;
}

#Kaiketsu .card {
padding: 20px;
}

#Kaiketsu .card-illustration {
width: 60%;
height: auto;
}
}

@media (max-width: 480px) {
#Kaiketsu .container h1 {
font-size: 1.3rem;
line-height: 1.5;
}

#Kaiketsu .container h2 {
font-size: 1.2rem;
line-height: 1.5;
}
}

/* ===== Ex（見出し + 箇条書き） ===== */
#Ex h1 {
font-size: 2.2rem;
font-weight: bold;
padding: 1rem 0;
font-feature-settings: "palt" 1;
line-height: 2;
}

#Ex h2 {
font-size: 1.8rem;
font-weight: bold;
padding: 1rem 0;
position: relative;
width: max-content;
margin: 0 auto 2rem;
font-feature-settings: "palt" 1;
}

#Ex h2::before,
#Ex h2::after {
position: absolute;
top: 30px;
display: block;
pointer-events: none;
content: "";
width: 86px;
height: 98.75px;
background-repeat: no-repeat;
}

#Ex h2::before {
left: -80px;
background-image: url("../images/b_line_l.png");
}

#Ex h2::after {
right: -80px;
background-image: url("../images/b_line_r.png");
}

#Ex h2 span {
color: #388cec;
}

#Ex .hope {
display: flex;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 480px) {
#Ex h1 {
font-size: 1.6rem;
line-height: 1.5;
}

#Ex h2 {
font-size: 1.2rem;
line-height: 1.5;
}

#Ex h2::before {
left: -40px;
}

#Ex h2::after {
right: -40px;
}
}

ul.list-check {
margin: 3rem 0 0;
}

ul.list-check li {
background-image: url("../images/icon-check.png");
background-repeat: no-repeat;
background-size: 30px;
padding: 0 0 1rem 4rem;
font-size: 1.15rem;
font-weight: bold;
background-position: 10px top;
}

@media (max-width: 480px) {
ul.list-check li {
width: 98%;;
}
}
ul.list-check li span {
color: #388cec;
}

ul.list-check li dl {
background-color: #fff;
border: #368dec 3px solid;
border-radius: 1rem;
padding: 2rem;
margin-top: 2rem;
}

ul.list-check li dl dt {
flex: 1;
}

ul.list-check li dl dd {
flex: 5;
}

@media screen and (max-width: 767px) {
ul.list-check {
margin-top: 1rem;
}

ul.list-check li {
position: relative;
}

ul.list-check li dl {
position: absolute;
left: 0;
margin-top: 1rem;
padding: 1rem;
}
}

/* ===== Flow ===== */
#Flow h1 {
font-size: 2.1rem;
font-weight: bold;
padding: 1rem 0 4rem;
font-feature-settings: "palt" 1;
line-height: 1.6;
}

#Flow .container {
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}

#Flow .step {
font-size: 2.5rem;
font-family: "din-2014", sans-serif;
font-weight: 600;
padding: 0.5rem 0;
line-height: 1;
color: #00acc1;
}

#Flow .step_mount {
background-color: #fff;
border: 1px solid #adb7c5;
border-radius: 0.5rem;
transition: all 0.3s ease;
padding: 1rem 1.2rem;
}

#Flow .step_mount:hover {
transform: translateY(-5px);
box-shadow: 3px 3px 0 0 rgba(173, 183, 197, 0.3);
}

#Flow .arrow {
position: relative;
}

#Flow .arrow::after {
content: "";
position: absolute;
top: 50%;
right: -20px;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 15px solid #06b6d4;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
z-index: 999;
}

#Flow .arrow:last-child::after {
display: none;
}

@media (max-width: 1024px) {
#Flow .arrow::after {
display: none;
}

#Flow .arrow::before {
content: "";
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 15px solid #06b6d4;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}

#Flow .arrow:last-child::before {
display: none;
}
}

@media (max-width: 480px) {
#Flow h1 {
font-size: 1.6rem;
}
}

/* ===== FAQ ===== */
#Faq .container {
max-width: 1200px;
margin: 0 auto;
flex-wrap: wrap;
}

#Faq h1 {
font-size: 2.1rem;
font-weight: bold;
padding: 1rem 0;
}

#Faq .accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}

#Faq .accordion-content.open {
max-height: 500px;
transition: max-height 0.3s ease-in;
}

#Faq .accordion-icon {
transition: transform 0.3s ease;
}

#Faq .faq-item {
border-bottom: 1px solid #000;
}

#Faq .faq-item:hover {
background-color: #f3f6f9;
}

#Faq .question-text {
font-weight: 600;
color: #00acc1;
}

#Faq .answer-text {
color: #000;
line-height: 1.6;
}

/* ===== CV（CTA） ===== */
#Cv h1 {
font-size: 2.1rem;
font-weight: bold;
padding: 1rem 0;
font-feature-settings: "palt" 1;
line-height: 1.6;
}

#Cv .ft-btn {
padding: 2rem 0;
}

#Cv .ft-btn a {
position: relative;
border-radius: 2.5rem;
text-align: center;
padding: 1.5rem 5rem;
font-weight: bold;
font-size: 1.5rem;
border: 2px solid #fff;
}

#Cv .ft-btn a.ft-btnA {
background-image: linear-gradient(90deg, #55cbc5, #1a8dee);
color: #fff;
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}

#Cv .ft-btn a img {
position: absolute;
top: 0;
bottom: 0;
right: 1.5rem;
margin: auto;
width: 36px;
height: auto;
}

#Cv p.msg {
font-size: 1.4rem;
font-weight: bold;
padding: 0.5rem 2.5rem;
margin: 0 0 1.5rem 0;
}

.wavy-small {
text-decoration: underline wavy #000;
text-decoration-thickness: 1.5px;
text-underline-offset: 13px; /* 文字との距離 */
}
@media (max-width: 980px) {
#Cv .ft-btn a {
display: inherit;
width: auto;
margin: 0 20px;
}
}

@media (max-width: 768px) {
#Cv .cta-title,
#Cv .cta-subtitle {
font-size: 1.8rem;
}

#Cv .cta-button {
font-size: 1.2rem;
padding: 1rem 2rem;
}
}

@media (max-width: 480px) {
#Cv h1 {
font-size: 1.2rem;
}

#Cv .cta-title,
#Cv .cta-subtitle {
font-size: 1.5rem;
}

#Cv .cta-button {
font-size: 1.1rem;
padding: 0.875rem 1.5rem;
gap: 0.5rem;
}

#Cv .user-icon {
width: 20px;
height: 20px;
}

#Cv .ft-btn {
padding: 1rem 0;
}

#Cv .ft-btn a {
font-size: 1.2rem;
padding: 0.5rem 0.5rem;
}
#Cv p.msg {
font-size: 1.0rem;
font-weight: bold;
padding: 0.5rem 2.5rem;
margin: 0 0 1.5rem 0;
line-height: 2.0;
}
.wavy-small {
text-decoration: underline wavy #000;
text-decoration-thickness: 1.5px;
text-underline-offset: 6px; /* 文字との距離 */
}
}

/* CTAアニメ */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

#Cv .container > * {
animation: fadeInUp 0.8s ease forwards;
}

#Cv .cta-title {
animation-delay: 0.2s;
}

#Cv .cta-subtitle {
animation-delay: 0.4s;
}

#Cv .cta-button {
animation-delay: 0.6s;
}


/* ===== フッター ===== */
.footer {
background-color: #23334b;
padding: 2rem 0 1rem;
margin: 0 auto;
}

.footer-content {
padding: 0 2rem;
}

.footer-main {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 2rem;
}

.footer-left {
flex: 1;
}

.footer-logo {
margin-bottom: 1.5rem;
}

.footer-logo img {
margin-bottom: 1.5rem;
width: 270px;
}

.footer-description,
.footer-notice {
font-size: 0.875rem;
color: #fff;
line-height: 1.5;
padding-bottom: 1rem;
}

.footer-right {
flex: 2;
text-align: right;
}

.footer-nav {
font-size: 0.875rem;
color: #333;
line-height: 1.8;
}

.footer-nav a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}

.footer-nav a:hover {
color: #00bcd4;
}

.footer-separator {
margin: 0 0.5rem;
color: #999;
}

.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1.5rem;
border-top: 1px solid #fff;
gap: 2rem;
}

.footer-copyright {
font-size: 0.75rem;
color: #fff;
flex: 1;
}

.footer-company-logo {
flex-shrink: 0;
}

.footer-notice a:hover {
color: #00bcd4;
}

@media (max-width: 768px) {
.footer-content {
padding: 0 1rem;
}

.footer-main {
flex-direction: column;
gap: 1.5rem;
}

.footer-right {
text-align: left;
}

.footer-nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.footer-separator {
display: none;
}

.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}

.footer-company-logo {
align-self: flex-end;
}
}

@media (max-width: 480px) {
.footer-logo {
font-size: 1.5rem;
}

.footer-description,
.footer-nav {
font-size: 0.8rem;
}

.footer-copyright {
font-size: 0.7rem;
}
}

.topicon,
.top-icon,
.top_icon {
  width: 100%;
  overflow: hidden;
}

.topicon img,
.top-icon img,
.top_icon img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  display: block;
}