*/
.margin50 {
height: 50px;
}
/* PC50、スマホ25
*/
.margin50-25 {
height: 25px;
}
@media screen and (min-width: 768px) {
.margin50-25 {
height: 50px;
}
}
/****** マージン（縦方向） ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 共通セッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ヘッダー
/////////////// ここから /////////////////*/
nav {
position:fixed;
width: 100%;
height: 70px;
background: #FFFFFF;
top: 0;
display: block;
z-index: 1000;
}
.drawer{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
position: relative;
height: 70px;
}
.logo {
height: 70px;
}
.logo img{
margin-left: 20px;
margin-top: 3px;
height: 55px;
width: auto;
object-fit: contain;
padding-top: 0;
}
@media screen and (min-width: 480px) {
.logo img{
height: 63px;
}
}
/*トグルボタンのスタイルを指定*/
.Toggle {
display: block;
position: fixed; /* bodyに対しての絶対位置指定 */
width: 20px;
height: 70px;
cursor: pointer;
z-index: 3;
right:20px;
}
.Toggle span {
display: block;
position: absolute;
width: 25px;
border-bottom: solid 2px #1A4D80;
-webkit-transition: .35s ease-in-out; /*変化の速度を指定*/
-moz-transition: .35s ease-in-out; /*変化の速度を指定*/
transition: .35s ease-in-out; /*変化の速度を指定*/
}
.Toggle span:nth-child(1) {
top:25px;
}
.Toggle span:nth-child(2) {
top: 35px;
}
.Toggle span:nth-child(3) {
top: 45px;
}
.Toggle.active span:nth-child(1) {
top: 35px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 35px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
/*ナビゲーション部分*/
.menu {
margin-top: 0;
text-align:left;
/*transition: .5s ease;/*滑らかに表示*/
-webkit-transform: translateX(105%);
transform: translateX(105%); /*左に隠しておく*/
-webkit-transition: 0.3s ease-in-out;
-moz-transition : 0.3s ease-in-out;
transition : 0.3s ease-in-out;
}
/*OPEN時の動き*/
.menu.open {
-webkit-transform: translateX(0%);
transform: translateX(0%); /*中身を表示（右へスライド）*/
}
.menu ul{
margin: 0;
width: 100%;
height:100vh;
background:#ffffff;
padding: 20px 5% 100px 5%;
overflow-y: scroll;
box-sizing: border-box;
}
.menu ul li{
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1.5px dashed #1A4D80;
position: relative;
text-align: center;
}
.menu ul div.menu-sp li:after{
display: none;
}
.menu ul li:after{
position: absolute;
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
right: 20px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
color: #1A4D80;
font-size: 20px;
}
.menu ul li a {
display:block;
font-weight:bold;
color:#333333;
padding: 20px 0;
padding-right: 40px;
text-decoration:none;
}
.menu ul div.menu-sp li{
border-bottom:none;
width: 100%;
background: #F78E15;
margin-top: 20px;
}
.menu ul div.menu-sp li a{
padding: 15px 0;
color: #ffffff;
}
.menu ul div.menu-sp li:nth-child(2){
background:#1AA455;
margin-top: 0;
}
.menu-pc{
display: none;
margin-right: 2px!important;
}
@media screen and (min-width: 480px)and ( max-width:1024.9px){
.menu ul div.menu-sp{
display: flex;
}
.menu ul div.menu-sp li{
width: 50%;
}
.menu ul div.menu-sp li:nth-child(2){
margin-top: 20px;
}
}
@media (any-hover: hover){
}
@media screen and (min-width: 1025px) {
nav {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.Toggle {
display: none;
}
.menu {
height: 70px;
background-color: transparent;
margin-top:0;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: none;
-moz-transition : none;
transition : none;
width: 100%;
}
.menu ul {
height: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
margin: 0;
padding: 0;
padding-right: 20px;
background: none;
text-align: right;
overflow-y:hidden;
margin-top: 4.5px;
}
.menu ul li{
padding: 0px 10px;
border-bottom: none;
text-align: left;
font-size: 16px;
line-height: 28px;
}
.menu ul li:after{
display: none;
}
.menu ul li a {
padding:0;
padding-right: 0;
text-align: center;
border-bottom: none;
color: #1A4D80;
}
.menu ul.menu-pc li{
font-weight: 100;
font-size: 14px;
}
.menu ul.menu-pc li i{
color: #1A4D80;
padding-right: 5px;
}
.menu ul.menu-pc li:nth-last-child(2) a{
color: #1A4D80;
}
.menu ul.menu-pc li:nth-last-child(1) a{
color: #1A4D80;
}
.menu ul.menu-pc li:nth-last-child(1){
color: #1A4D80;
border: 1px solid #1A4D80;
border-radius: 100px;
height: 26px;
/* background: rgba(26,164,85,0.05); */
}
.menu ul.menu-pc li{
font-weight: 100;
}
.menu ul li.menu-pc.site{
background: #022C66;
height: 26px;
margin-right: 10px;
}
.menu ul li.menu-pc.line{
background: #1AA455;
height: 26px;
}
.menu ul li.menu-pc.line a,.menu ul li.menu-pc.site a{
color: #ffffff;
}
.menu-pc{
display: block;
}
.menu-sp{
display: none;
}
}
@media screen and (min-width: 1200px){
.menu ul li{
font-size: 16px;
}
}
.sp-logo{
width: 100%;
background-color: #ffffff;
padding: 50px 0 0 0;
text-align: center;
}
.sp-logo img {
width: 80px;
height: auto;
margin: 0 auto;
}
.sp-logo p {
font-size: 14px;
}
@media screen and (min-width: 1025px){
.sp-logo{
display: none;
}
}
/*///////////// ここまで ///////////////////
// ヘッダーセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// フッターセッティング
/////////////// ここから /////////////////*/
/* フッター全体設定 */
.inpath-footer-container {
/* background: linear-gradient(135deg, #0f3d75 0%, #2b84d4 100%); */
/* background: #022C66; */
color: #1A4D80;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
padding: 40px 20px 20px;
font-size: 14px;
line-height: 1.6;
}
.inpath-footer-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 40px;
}
/* ロゴ・説明エリア */
.inpath-footer-brand-area {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.inpath-footer-logo-box {
width: 200px; /* 正方形の幅 */
height: 200px; /* 正方形の高さ */
margin: 0px auto 16px auto;
margin-bottom: 16px;
/* 画像を中央に配置するためのFlexbox設定を追加 */
display: flex;
justify-content: center;
align-items: center;
/* 元の背景色は不要であれば削除するか transparent にしてください */
background-color: transparent;
text-align: center;
}
.inpath-footer-logo-img {
width: 100%; /* 親要素の幅いっぱいに広げる */
height: 100%; /* 親要素の高さいっぱいに広げる */
/* 重要: 画像のアスペクト比を維持したまま、親要素の枠内に収める設定 */
object-fit: contain;
margin: 0 auto;
}
.inpath-footer-logo-link {
display: flex; /* リンクの幅を中身に合わせる */
justify-content: center;
width: 100%;
margin-bottom: 15px; /* ロゴと説明文の間に少し余白を作る */
}
.inpath-footer-description {
margin: 0;
font-size: 13px;
max-width: 300px;
color: #1A4D80;
}
/* ナビゲーション・見出し共通 */
.inpath-footer-heading {
font-size: 19px;
font-weight: bold;
margin: 0 0 16px 0;
color: #ffffff;
}
.inpath-footer-heading a {
color: #1A4D80;
}
.inpath-footer-nav-list {
list-style: none;
padding: 0;
margin: 0;
}
.inpath-footer-nav-item {
margin-bottom: 12px;
}
.inpath-footer-nav-list-end {
list-style: none;
padding: 0;
margin: 0;
}
.inpath-footer-nav-item-end {
margin-bottom: 12px;
}
.inpath-footer-link {
color: #1A4D80;
text-decoration: none;
transition: opacity 0.3s;
}
.inpath-footer-link:hover {
opacity: 0.7;
text-decoration: underline;
}
/* お問い合わせエリア */
.inpath-footer-contact-item {
display: flex;
align-items: flex-start;
margin-bottom: 16px;
}
.inpath-footer-icon {
width: 18px;
height: 18px;
margin-right: 10px;
margin-top: 3px; /* テキストとの位置合わせ */
flex-shrink: 0;
}
.inpath-footer-contact-text-wrap {
display: flex;
flex-direction: column;
}
.inpath-footer-phone {
font-weight: bold;
}
.inpath-footer-hours {
font-size: 12px;
opacity: 0.9;
}
.inpath-footer-mail {
color: #1A4D80;
text-decoration: none;
}
/* ボトムエリア（コピーライトなど） */
.inpath-footer-bottom {
/* margin-top: 40px; */
border-top: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px 0 20px 0;
background-color: #022C66;
width: 100%;
}
.inpath-footer-bottom-inner {
max-width: 1200px;
margin: 0 auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
font-size: 12px;
opacity: 0.8;
}
.inpath-footer-copyright,
.inpath-footer-powered {
margin: 0;
color: #ffffff;
}
.inpath-footer-powered a {
color: #ffffff;
}
.inpath-footer-contact-group-end {
margin: 20px 0 -20px 0;
}
/* PC向けレスポンシブ設定 (768px以上) */
@media (min-width: 768px) {
.inpath-footer-container {
padding: 60px 40px 20px;
}
.inpath-footer-inner {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
}
.inpath-footer-brand-area {
flex: 2; /* PC時はロゴエリアを少し広く */
padding-right: 20px;
align-items: flex-start;
text-align: center;
}
.inpath-footer-brand-area p {
text-align: center;
margin: 0 auto;
}
.inpath-footer-nav-group,
.inpath-footer-contact-group {
flex: 1; /* 各カラムを均等に配置 */
}
.inpath-footer-bottom-inner {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
.inpath-footer-nav-group-end,
.inpath-footer-contact-group-end {
flex: 1; /* 各カラムを均等に配置 */
}
.inpath-footer-nav-list-end {
display: flex; /* これだけで横並びになります */
justify-content: center;
list-style: none; /* リストの点（・）を消す */
padding: 0; /* デフォルトの余白をリセット */
gap: 20px; /* アイテム間の余白を指定（モダンな書き方） */
}
.inpath-footer-bottom-inner-end {
flex-direction: row;
justify-content: space-between;
text-align: left;
}
}
/*///////////// ここまで ///////////////////
// フッターセッティング
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 公開準備中
/////////////// ここから /////////////////*/
/****** ここから ******/
.in-preparation-header {
margin: 15% 0 0 0;
text-align: center;
animation: blinkFade 2s infinite;
}
@keyframes blinkFade {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media screen and (min-width: 768px) {
.in-preparation-header {
margin: 5% 0 0 0;
}
}
.in-preparation-header h2 {
font-size: 65px;
font-weight: 600;
color: #012A62;
margin: 0 0 0 0;
line-height: 53px;
}
@media screen and (min-width: 480px) {
.in-preparation-header h2 {
line-height: 1.8;
}
}
.in-preparation-title {
text-align: center;
}
.in-preparation-title h2 {
text-align: center;
color: #2D93E1;
}
@media screen and (min-width: 480px) {
.in-preparation-title h2 {
margin: -5px 0 0 0;
}
}
.in-preparation-logo {
margin: 100px 0 150px 0;
}
.in-preparation-logo img {
width: 90%;
margin: 0 auto;
display: block;
}
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 公開準備中
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ
/////////////// ここから /////////////////*/
/****** ソーシャルエリア ここから ******/
.footer006 {
padding: 0 16px 24px 16px;
/* background-color: #eefafa; */
/* 背景色 → 写真通りの薄い青 */
}
.footer006-icons {
display: grid;
grid-template-columns: repeat(5, 1fr); /* スマホ時は3列 */
gap: 5px;
justify-items: center;
max-width: 250px;
margin: 0 auto;
}
@media screen and (min-width: 768px) {
.footer006-icons {
max-width: 500px;
grid-template-columns: repeat(5, 1fr);
}
}
.footer006-icon {
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
}
.footer006-icon img {
/* width: 32px;
height: 32px; */
width: 30px;
height: auto;
object-fit: contain;
}
.icon-x img {
/* width: 32px;
height: 32px; */
width: 20px;
height: auto;
object-fit: contain;
}
.footer006-icon:hover {
transform: scale(1.1);
}
/* PC時 → 横並び */
@media (min-width: 768px) {
.footer006-icons {
/* grid-template-columns: repeat(6, 1fr); */
max-width: 350px;
}
}
/****** ソーシャルエリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// トップページ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 企業の皆様へ
/////////////// ここから /////////////////*/
/****** トップエリア ここから ******/
/* トップエリア（ヒーローセクション）用スタイル */
/* ベース設定とフォント */
.inpath-for-company-hero-wrapper {
/* ここに背景画像のパスを指定してください */
background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
width: 100%;
min-height: 100vh; /* 画面いっぱいに表示 */
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
box-sizing: border-box;
}
/* 青いオーバーレイ（カバー）の設定 */
.inpath-for-company-hero-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 写真の上の青いカバー色。透明度(0.8)で調整 */
background-color: rgb(20 60 130 / 55%);
z-index: 1;
}
/* コンテンツ配置用コンテナ */
.inpath-for-company-container {
position: relative;
z-index: 2; /* オーバーレイより上に表示 */
width: 90%;
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 60px 0;
}
/* タイトルスタイル */
.inpath-for-company-hero-title {
font-size: 28px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 20px;
letter-spacing: 0.05em;
color: #ffffff;
}
/* 説明文スタイル */
.inpath-for-company-hero-desc {
font-size: 14px;
line-height: 1.8;
margin-bottom: 40px;
font-weight: 400;
color: #ffffff;
}
/* 改行コントロール（スマホのみ） */
.inpath-for-company-br-sp {
display: block;
}
.inpath-for-company-br-pc {
display: none;
}
/* ボタングループ（配置） */
.inpath-for-company-btn-group {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
}
/* ボタン共通スタイル */
.inpath-for-company-btn {
display: inline-block;
text-decoration: none;
font-size: 16px;
font-weight: 700;
padding: 15px 30px;
border-radius: 50px; /* 丸みのある形状 */
transition: all 0.3s ease;
width: 100%;
max-width: 300px;
box-sizing: border-box;
text-align: center;
}
/* プライマリーボタン（青背景） */
.inpath-for-company-btn-primary {
background-color: #2D8CD5; /* 写真に近い水色 */
color: #fff;
border: 2px solid #2D8CD5;
}
.inpath-for-company-btn-primary:hover {
background-color: #1a6fb0;
border-color: #1a6fb0;
}
/* アウトラインボタン（透明背景・白枠） */
.inpath-for-company-btn-outline {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
}
.inpath-for-company-btn-outline:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* ----------------------------------------------------
タブレット・PC向けレスポンシブ設定 (768px以上)
---------------------------------------------------- */
@media screen and (min-width: 768px) {
.inpath-for-company-hero-wrapper {
min-height: 600px; /* PCでは高さを固定または調整 */
}
.inpath-for-company-hero-title {
font-size: 48px;
margin-bottom: 24px;
}
.inpath-for-company-hero-desc {
font-size: 18px;
margin-bottom: 50px;
}
/* 改行コントロール切り替え */
.inpath-for-company-br-sp {
display: none;
}
.inpath-for-company-br-pc {
display: block;
}
/* ボタンを横並びにする */
.inpath-for-company-btn-group {
flex-direction: row;
gap: 30px;
}
.inpath-for-company-btn {
width: auto;
min-width: 240px;
}
}
/****** トップエリア ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 企業の皆様へ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// サブタイトルエリア
/////////////// ここから /////////////////*/
/* === ここから修正版CSS === */
/* 全体の計算方法を統一して、余白によるはみ出しを強制的に防ぐ */
.inpath-subtitle-wrapper,
.inpath-subtitle-wrapper * {
box-sizing: border-box !important;
}
/* 全体のラッパー */
.inpath-subtitle-wrapper {
margin: 40px 0 0 0;
position: relative;
width: 100%;
max-width: 100vw; /* 画面幅以上に広がらないように制限 */
padding: 60px 20px 10px 20px; /* 上下60px, 左右20px */
overflow: hidden; /* はみ出した背景文字を隠す */
background-color: #fff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* 背景の巨大文字（SERVICE） */
.inpath-subtitle-bg-text {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
font-weight: 700;
line-height: 1;
z-index: 0;
pointer-events: none;
white-space: nowrap;
/* 文字のスタイル */
color: transparent;
-webkit-text-stroke: 1px #dff0ff;
text-stroke: 1px #dff0ff;
opacity: 0.8;
/* 文字サイズ：画面幅に応じて可変 */
/* 文字全体を画面内に完全に収めたい場合は、この数値を小さくしてください（例：15vw） */
font-size: 23vw;
}
/* 前面のコンテンツラッパー */
.inpath-subtitle-content {
position: relative;
z-index: 1;
text-align: center;
width: 100%; /* 親要素いっぱいに */
max-width: 800px;
margin: 0 auto;
}
/* 英語のラベル (Service) */
.inpath-subtitle-en-label {
display: block;
font-size: 14px;
font-weight: 700;
color: #3b6e9c;
margin-bottom: 5px;
letter-spacing: 0.05em;
}
/* 日本語メインタイトル (サービス紹介) */
.inpath-subtitle-jp-title {
font-size: 24px;
font-weight: 700;
color: #1a4d80;
margin-bottom: 20px;
letter-spacing: 0.1em;
}
/* 説明文 */
.inpath-subtitle-description {
font-size: 14px;
line-height: 1.8;
color: #333;
text-align: justify;
text-align-last: center;
/* スマホでの文字はみ出し防止を強化 */
word-wrap: break-word;
overflow-wrap: break-word;
}
/* === PC・タブレット向け (768px以上) === */
@media screen and (min-width: 768px) {
.inpath-subtitle-wrapper {
padding: 80px 40px 10px 40px;
}
.inpath-subtitle-bg-text {
font-size: 18vw;
-webkit-text-stroke-width: 2px;
}
.inpath-subtitle-en-label {
font-size: 16px;
margin-bottom: 10px;
}
.inpath-subtitle-jp-title {
font-size: 32px;
margin-bottom: 10px;
}
.inpath-subtitle-description {
font-size: 16px;
text-align: center;
text-align-last: center;
}
}
/*///////////// ここまで ///////////////////
// サブタイトルエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// サービス紹介（企業向け）
/////////////// ここから /////////////////*/
/* ベースのリセット */
/* 修正: コンテナ自身と、その子要素すべてに box-sizing を適用 */
.inpath-service-company-container,
.inpath-service-company-container * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* コンテナ設定（スマホファースト） */
.inpath-service-company-container {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
width: 100%; /* 親要素の幅に合わせる */
max-width: 1200px;
padding: 20px; /* ここが box-sizing: border-box のおかげで内側に収まります */
margin: 0 auto;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
background-color: #f9f9f9; /* 背景色（任意） */
}
/* カードスタイル */
.inpath-service-company-card {
background: #ffffff;
border-radius: 8px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.3s ease;
width: 100%; /* カード幅も親に合わせる */
}
/* アイコンの背景ボックス */
.inpath-service-company-icon-box {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #2b5eb5 0%, #1e4287 100%); /* 画像に近い青色のグラデーション */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
flex-shrink: 0; /* アイコンが潰れないように設定 */
}
/* SVGアイコン設定 */
.inpath-service-company-icon {
width: 32px;
height: 32px;
color: #ffffff;
}
/* タイトル */
.inpath-service-company-title {
font-size: 1.25rem; /* 約20px */
font-weight: 700;
color: #0f2550; /* 濃紺色 */
margin-bottom: 16px;
line-height: 1.4;
}
/* 説明文 */
.inpath-service-company-desc {
font-size: 0.95rem; /* 約15px */
color: #555555;
line-height: 1.7;
text-align: justify; /* 両端揃えで見栄えを整える */
}
/* レスポンシブ設定：タブレット・PC以上 */
@media screen and (min-width: 768px) {
.inpath-service-company-container {
grid-template-columns: repeat(2, 1fr); /* PCは2列 */
gap: 32px;
padding: 40px;
}
}
/*///////////// ここまで ///////////////////
// サービス紹介（企業向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 利用の流れ（企業向け
/////////////// ここから /////////////////*/
/* ベースリセットとBox-sizing */
.inpath-flow-company-container,
.inpath-flow-company-container * {
box-sizing: border-box;
}
/* コンテナ設定 */
.inpath-flow-company-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
/* 横スクロール防止のための重要な設定 */
overflow-x: hidden;
}
/* カードリスト（Flexbox） */
.inpath-flow-company-list {
display: flex;
flex-direction: column; /* スマホファースト: 縦積み */
gap: 40px; /* 矢印分のスペースを確保するためにGapを少し広げる */
justify-content: space-between;
width: 100%;
}
/* アイテム（カード＋矢印）のラッパー */
.inpath-flow-company-item {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
min-width: 0; /* Flexアイテムのはみ出し防止 */
}
/* カード本体 */
.inpath-flow-company-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
}
/* アイコン背景 */
.inpath-flow-company-icon-wrapper {
width: 60px;
height: 60px;
background-color: #1e428a;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
box-shadow: 0 4px 8px rgba(30, 66, 138, 0.3);
flex-shrink: 0; /* 縮小防止 */
}
/* アイコンSVG */
.inpath-flow-company-icon {
width: 32px;
height: 32px;
stroke: #ffffff;
}
/* 数字（01, 02...） */
.inpath-flow-company-number {
font-size: 40px;
font-weight: 700;
color: #eef4fa;
line-height: 1;
margin-bottom: 5px;
letter-spacing: 2px;
}
/* タイトル */
.inpath-flow-company-title {
font-size: 16px;
font-weight: 700;
color: #0f2a55;
margin: 0 0 15px 0;
line-height: 1.5;
min-height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
/* 説明文 */
.inpath-flow-company-desc {
font-size: 13px;
line-height: 1.8;
color: #555;
margin: 0;
text-align: left;
}
/* 矢印（スマホ・縦並び用） */
.inpath-flow-company-item:not(:last-child)::after {
content: '';
display: block;
width: 12px;
height: 12px;
border-right: 3px solid #3c78d8;
border-bottom: 3px solid #3c78d8;
transform: rotate(45deg); /* 下向き矢印 */
margin-top: 15px; /* カードとの距離 */
position: relative;
z-index: 1;
}
/* --- レスポンシブ対応（PC向けスタイル） --- */
@media screen and (min-width: 960px) {
.inpath-flow-company-list {
flex-direction: row; /* 横並び */
gap: 30px; /* カード間のスペース */
}
/* PCでは矢印を右向きにして、カードの右側（Gapの中央）に配置 */
.inpath-flow-company-item:not(:last-child)::after {
position: absolute;
top: 35%;
right: -22px; /* Gap(30px)の中に収まるように調整 */
margin-top: 0;
transform: rotate(-45deg); /* 右向き矢印 */
}
.inpath-flow-company-card {
padding: 25px 15px;
}
.inpath-flow-company-title {
font-size: 15px;
}
.inpath-flow-company-desc {
font-size: 12px;
text-align: center;
}
}
/*///////////// ここまで ///////////////////
// 利用の流れ（企業向け
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// プログラム構築サポート
/////////////// ここから /////////////////*/
/* ベースリセット・ボックスサイズ調整 */
.inpath-program-wrapper,
.inpath-program-wrapper * {
box-sizing: border-box; /* ここが重要：paddingを幅に含める設定 */
margin: 0;
padding: 0;
}
/* 全体ラッパー設定 */
.inpath-program-wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
background-color: transparent;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
}
/* グリッドレイアウト（モバイルファースト） */
.inpath-program-grid {
display: grid;
grid-template-columns: 1fr; /* スマホでは1列 */
gap: 24px;
width: 100%; /* 親要素に収まるように明示 */
}
/* タブレット・PCサイズ以上での表示（2列） */
@media (min-width: 768px) {
.inpath-program-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* カードのスタイル */
.inpath-program-card {
background-color: #ffffff;
border-radius: 12px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); /* 柔らかい影 */
display: flex;
flex-direction: column;
height: 100%;
}
/* ヘッダーエリア（青いバーとタイトル） */
.inpath-program-header {
display: flex;
align-items: center;
margin-bottom: 24px;
}
/* 青い縦バー */
.inpath-program-title-bar {
display: block;
width: 6px;
height: 28px;
background-color: #254486; /* 深い青 */
border-radius: 4px;
margin-right: 12px;
}
/* タイトルテキスト */
.inpath-program-title {
font-size: 1.25rem;
font-weight: 700;
color: #1a2b50; /* 濃紺 */
line-height: 1.4;
}
/* リストスタイル */
.inpath-program-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
}
/* リストアイテム */
.inpath-program-list-item {
display: flex;
align-items: flex-start;
gap: 12px;
}
/* アイコンラッパー */
.inpath-program-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: #4a89dc; /* 明るめの青（チェックマーク） */
margin-top: 2px; /* テキストとの位置調整 */
}
/* SVG設定 */
.inpath-program-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
}
/* 本文テキスト */
.inpath-program-text {
font-size: 0.95rem;
line-height: 1.6;
color: #444;
}
/*///////////// ここまで ///////////////////
// プログラム構築サポート
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// コンサルタントによる個別サポート
/////////////// ここから /////////////////*/
/* ベーススタイルリセット */
/* コンテナ自体とその子要素すべてに box-sizing: border-box を適用して、
パディングが横幅に含まれるように修正 */
.inpath-consultant-company-banner-container,
.inpath-consultant-company-banner-container * {
box-sizing: border-box;
}
/* --- コンテナ（背景・レイアウト） --- */
.inpath-consultant-company-banner-container {
/* スマホ向けのパディング */
padding: 40px 20px;
/* 画像に合わせたグラデーション（左：明るい青 -> 右：濃紺） */
background: linear-gradient(90deg, #2b90d9 0%, #002c6b 100%);
border-radius: 8px;
text-align: center;
color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
/* 中央寄せ配置と横幅の設定 */
margin: 0 auto;
width: 100%;
/* 親要素からはみ出ないように最大幅を設定 */
max-width: 100%;
}
/* --- タイトル --- */
.inpath-consultant-company-title {
font-size: 1.25rem; /* スマホサイズ: 20px相当 */
font-weight: 700;
margin: 0 0 16px 0;
line-height: 1.4;
color: #ffffff;
}
/* --- 説明文 --- */
.inpath-consultant-company-description {
font-size: 0.875rem; /* スマホサイズ: 14px相当 */
font-weight: 400;
margin: 0 0 32px 0;
line-height: 1.6;
opacity: 0.9; /* 若干透過させて階層をつける */
color: #ffffff;
}
/* --- ボタンエリア --- */
.inpath-consultant-company-button-wrapper {
display: flex;
justify-content: center;
}
/* --- ボタン本体 --- */
.inpath-consultant-company-cta-button {
display: inline-block;
background-color: #ffffff;
/* ボタンの文字色はグラデーションの中間色に近い青を採用 */
color: #2b8bd6;
text-decoration: none;
font-weight: 700;
font-size: 1rem;
padding: 14px 40px;
border-radius: 50px; /* 角丸（ピル型） */
transition: opacity 0.3s ease, transform 0.2s ease;
white-space: nowrap;
}
/* --- ホバーアクション --- */
.inpath-consultant-company-cta-button:hover {
opacity: 0.9;
transform: translateY(-2px);
cursor: pointer;
}
/* -------------------------------------------
PC・タブレット向けスタイル (768px以上)
------------------------------------------- */
@media screen and (min-width: 768px) {
.inpath-consultant-company-banner-container {
padding: 60px 40px;
}
.inpath-consultant-company-title {
font-size: 1.75rem; /* PCサイズ: 28px相当 */
margin-bottom: 20px;
}
.inpath-consultant-company-description {
font-size: 1rem; /* PCサイズ: 16px相当 */
margin-bottom: 40px;
}
.inpath-consultant-company-cta-button {
padding: 16px 56px;
}
}
/*///////////// ここまで ///////////////////
// コンサルタントによる個別サポート
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 導入メリット
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-merit-company-container {
display: grid;
grid-template-columns: 1fr; /* スマホファースト: 1列 */
gap: 16px;
width: 100%;
max-width: 1000px;
margin: 0 auto;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
box-sizing: border-box;
}
/* カードのスタイル */
.inpath-merit-company-card {
display: flex;
align-items: flex-start;
background-color: #F8F9FB; /* 画像に近い薄いグレー */
padding: 24px;
border-radius: 8px;
box-sizing: border-box;
}
/* アイコンのラッパー（青い丸） */
.inpath-merit-company-icon-wrapper {
flex-shrink: 0;
width: 64px;
height: 64px;
background-color: #234B8E; /* 濃いネイビー */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
/* SVGアイコン本体の設定 */
.inpath-merit-company-icon {
width: 32px;
height: 32px;
stroke: #ffffff;
stroke-width: 2;
}
/* テキストエリア */
.inpath-merit-company-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
/* タイトル */
.inpath-merit-company-title {
margin: 0 0 8px 0;
font-size: 18px;
font-weight: 700;
color: #0E1C38; /* ほぼ黒に近い紺色 */
line-height: 1.4;
}
/* 説明文 */
.inpath-merit-company-desc {
margin: 0;
font-size: 14px;
color: #555555;
line-height: 1.6;
}
/* PC・タブレット向けのレスポンシブ設定 (768px以上) */
@media screen and (min-width: 768px) {
.inpath-merit-company-container {
grid-template-columns: 1fr 1fr; /* 2列表示 */
gap: 24px;
}
.inpath-merit-company-card {
padding: 32px;
}
}
/*///////////// ここまで ///////////////////
// 導入メリット
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 導入バナー
/////////////// ここから /////////////////*/
/* ベーススタイル（スマホファースト） */
.inpath-banner-company-wrapper {
width: 100%;
box-sizing: border-box;
padding: 20px; /* 画面端との余白 */
display: flex;
justify-content: center;
}
.inpath-banner-company-banner {
width: 100%;
/* 画像に近いダークネイビー */
/* background-color: #13244e; */
background: linear-gradient(90deg, #2b90d9 0%, #002c6b 100%);
color: #ffffff;
border-radius: 8px;
padding: 40px 20px;
text-align: center;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.inpath-banner-company-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 15px 0;
line-height: 1.4;
letter-spacing: 0.05em;
color: #ffffff;
}
.inpath-banner-company-description {
font-size: 13px;
font-weight: 400;
margin: 0 0 40px 0;
line-height: 1.6;
opacity: 0.95;
color: #ffffff;
}
/* タブレット・PC向けスタイル（768px以上） */
@media screen and (min-width: 768px) {
.inpath-banner-company-banner {
max-width: 1000px; /* PCでの最大幅制限 */
padding: 60px 40px; /* 内部の余白を広げる */
}
.inpath-banner-company-title {
font-size: 24px; /* フォントサイズアップ */
margin-bottom: 20px;
}
.inpath-banner-company-description {
font-size: 16px; /* フォントサイズアップ */
}
}
/*///////////// ここまで ///////////////////
// 導入バナー
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 登録学生の例
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-student-company-grid-container {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
padding: 20px;
background-color: #f8f9fa; /* 背景色（薄いグレー） */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
box-sizing: border-box;
}
/* 768px以上（タブレット・PC）で3列表示 */
@media screen and (min-width: 768px) {
.inpath-student-company-grid-container {
grid-template-columns: repeat(3, 1fr);
padding: 40px;
}
}
/* カード本体 */
.inpath-student-company-card {
background-color: #ffffff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
display: flex;
flex-direction: column;
}
.inpath-student-company-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* 画像エリア */
.inpath-student-company-image-wrapper {
width: 100%;
aspect-ratio: 4 / 3; /* 画像比率を固定 */
background-color: #eee;
overflow: hidden;
}
.inpath-student-company-image {
width: 100%;
height: 100%;
object-fit: cover; /* 画像を枠いっぱいに表示 */
object-position: top center; /* 人物の顔が切れにくいように上部基準 */
}
/* コンテンツエリア */
.inpath-student-company-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* 名前 */
.inpath-student-company-name {
font-size: 1.25rem;
font-weight: 700;
color: #333333;
margin: 0 0 12px 0;
}
/* 学歴情報 */
.inpath-student-company-education {
margin-bottom: 20px;
}
.inpath-student-company-university {
font-size: 0.9rem;
font-weight: 700;
color: #3b82f6; /* 大学名の青色 */
margin: 0 0 4px 0;
}
.inpath-student-company-major {
font-size: 0.8rem;
color: #666666;
margin: 0;
}
/* 見出しラベル（スキル・志望動機共通） */
.inpath-student-company-label {
font-size: 0.85rem;
font-weight: 700;
color: #333333;
margin: 0 0 8px 0;
}
/* スキルセクション */
.inpath-student-company-skills-section {
margin-bottom: 20px;
}
.inpath-student-company-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.inpath-student-company-tag {
background-color: #e0f2fe; /* 薄い青背景 */
color: #0369a1; /* 濃い青文字 */
font-size: 0.75rem;
padding: 4px 10px;
border-radius: 999px; /* 角丸（カプセル型） */
font-weight: 500;
white-space: nowrap;
}
/* 志望動機セクション */
.inpath-student-company-motivation-section {
margin-top: auto; /* 下揃え気味に配置 */
}
.inpath-student-company-text {
font-size: 0.85rem;
color: #4b5563;
line-height: 1.6;
margin: 0;
}
/*///////////// ここまで ///////////////////
// 登録学生の例
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 学生紹介バナー
/////////////// ここから /////////////////*/
/* ベースリセット */
.inpath-student-banner-container,
.inpath-student-banner-container * {
box-sizing: border-box; /* パディングを含めて幅を計算する設定（はみ出し防止の肝） */
margin: 0;
padding: 0;
}
/* メインコンテナ */
.inpath-student-banner-container {
width: 100%; /* 親要素の幅いっぱいに広げる */
max-width: 1200px; /* PCでの最大幅 */
margin: 0 auto; /* 中央揃え */
/* スマホでの余白を少し調整し、画面端との余裕を持たせる場合はmarginなどで調整可能 */
padding: 40px 20px;
background: linear-gradient(90deg, #3b82f6 0%, #1e3a8a 100%);
border-radius: 8px 8px 0px 0px;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
overflow: hidden; /* 万が一中身がはみ出した場合もコンテナ内に収める */
}
/* コンテンツ配置用ラッパー */
.inpath-student-banner-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
}
/* メイン見出し */
.inpath-student-banner-heading {
font-size: 20px; /* スマホ向けに少し調整 */
font-weight: 700;
margin-bottom: 12px;
line-height: 1.4;
width: 100%;
color: #ffffff;
}
/* 説明文 */
.inpath-student-banner-description {
font-size: 13px; /* スマホ向けに少し調整 */
margin-bottom: 28px;
opacity: 0.9;
line-height: 1.6;
width: 100%;
color: #ffffff;
}
/* タグのラッパー */
.inpath-student-banner-tags-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
align-items: center;
}
/* 各タグのスタイル */
.inpath-student-banner-tag {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
padding: 10px 16px; /* スマホ向けに横paddingを微調整 */
border-radius: 50px;
font-size: 13px;
font-weight: 500;
width: 100%;
max-width: 320px; /* スマホで広がりすぎないように制限 */
transition: background-color 0.3s ease;
}
.inpath-student-banner-tag:hover {
background-color: rgba(255, 255, 255, 0.3);
}
/* アイコンスタイル */
.inpath-student-banner-icon {
width: 16px;
height: 16px;
margin-right: 8px;
flex-shrink: 0;
}
/* タグ内のテキスト */
.inpath-student-banner-tag-text {
white-space: nowrap;
}
/* --- レスポンシブ対応（PC・タブレット以上） --- */
@media screen and (min-width: 768px) {
.inpath-student-banner-container {
padding: 60px 40px;
}
.inpath-student-banner-heading {
font-size: 32px;
margin-bottom: 20px;
}
.inpath-student-banner-description {
font-size: 16px;
margin-bottom: 40px;
}
.inpath-student-banner-tags-wrapper {
flex-direction: row;
justify-content: center;
gap: 16px;
width: auto;
}
.inpath-student-banner-tag {
width: auto;
max-width: none;
padding: 12px 24px;
}
}
/*///////////// ここまで ///////////////////
// 学生紹介バナー
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 学生向けトップエリア
/////////////// ここから /////////////////*/
/* ベースのリセットとフォント設定 */
.inpath-top-student-hero-wrapper * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.inpath-top-student-hero-wrapper {
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
width: 100%;
position: relative;
/* スマホでの高さを確保 */
min-height: 100vh;
/* 背景画像の設定（イメージに近いダミー画像をセットしています） */
background-image: url('https://images.unsplash.com/photo-1523240795612-9a054b0db644?q=80&w=2070&auto=format&fit=crop');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #ffffff;
overflow: hidden;
}
/* 青みがかったオーバーレイレイヤー */
.inpath-top-student-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 写真のような青いフィルター */
background: linear-gradient(to bottom, rgba(30, 60, 100, 0.6), rgba(30, 60, 100, 0.7));
z-index: 1;
}
/* コンテンツのコンテナ */
.inpath-top-student-content-container {
position: relative;
z-index: 2;
width: 90%;
max-width: 1000px;
padding: 60px 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* バッジ */
.inpath-top-student-badge-wrapper {
margin-bottom: 24px;
}
.inpath-top-student-badge {
display: inline-block;
background-color: rgba(255, 255, 255, 0.2);
padding: 8px 20px;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
backdrop-filter: blur(4px);
}
.inpath-top-student-star {
margin-right: 4px;
}
/* メインタイトル */
.inpath-top-student-main-title {
font-size: 28px;
line-height: 1.4;
font-weight: 700;
margin-bottom: 16px;
text-shadow: 0 2px 10px rgba(0,0,0,0.1);
color: #ffffff;
}
/* サブテキスト */
.inpath-top-student-sub-text {
font-size: 14px;
line-height: 1.6;
margin-bottom: 40px;
font-weight: normal;
opacity: 0.95;
color: #ffffff;
}
/* 改行コントロール */
.inpath-top-student-br-pc {
display: none;
}
.inpath-top-student-br-sp {
display: block;
}
/* ボタンエリア */
.inpath-top-student-cta-group {
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
max-width: 300px; /* スマホでのボタン幅制限 */
margin-bottom: 60px;
}
.inpath-top-student-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 14px 24px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 15px;
transition: opacity 0.3s ease;
}
.inpath-top-student-btn:hover {
opacity: 0.8;
}
/* プライマリーボタン（青） */
.inpath-top-student-btn-primary {
background-color: #3EA8FF; /* 写真に近い水色 */
color: #ffffff;
border: none;
box-shadow: 0 4px 15px rgba(62, 168, 255, 0.4);
}
/* アウトラインボタン（枠線） */
.inpath-top-student-btn-outline {
background-color: transparent;
color: #ffffff;
border: 1px solid #ffffff;
}
/* 数値エリア */
.inpath-top-student-stats-row {
display: flex;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
margin-top: auto;
}
.inpath-top-student-stat-item {
text-align: center;
flex: 1;
min-width: 90px;
}
.inpath-top-student-stat-number {
font-size: 28px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 5px;
}
.inpath-top-student-stat-label {
font-size: 11px;
opacity: 0.9;
}
/* --------------------------------------------------
PC / タブレット (768px以上) 向けのレスポンシブ設定
-------------------------------------------------- */
@media screen and (min-width: 768px) {
.inpath-top-student-content-container {
padding: 80px 0;
}
/* タイトルサイズアップ */
.inpath-top-student-main-title {
font-size: 56px;
line-height: 1.3;
margin-bottom: 24px;
}
/* サブテキストサイズアップ */
.inpath-top-student-sub-text {
font-size: 18px;
}
/* 改行の切り替え */
.inpath-top-student-br-pc {
display: block;
}
.inpath-top-student-br-sp {
display: none;
}
/* ボタンを横並びに */
.inpath-top-student-cta-group {
flex-direction: row;
justify-content: center;
max-width: none;
gap: 24px;
margin-bottom: 80px;
}
.inpath-top-student-btn {
width: 240px; /* PCでのボタン幅固定 */
padding: 16px 24px;
font-size: 16px;
}
/* 数値エリアの調整 */
.inpath-top-student-stats-row {
justify-content: space-between;
max-width: 800px;
gap: 40px;
}
.inpath-top-student-stat-number {
font-size: 40px;
}
.inpath-top-student-stat-label {
font-size: 14px;
}
}
/*///////////// ここまで ///////////////////
// 学生向けトップエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 選ばれる6つの理由
/////////////// ここから /////////////////*/
/* ベースリセットとボックスサイジング */
.inpath-top-reason-container,
.inpath-top-reason-grid,
.inpath-top-reason-card,
.inpath-top-reason-icon-box,
.inpath-top-reason-title,
.inpath-top-reason-desc {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* コンテナ設定：全体の幅と背景 */
.inpath-top-reason-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
background-color: #f8f9fa; /* 背景色：薄いグレー */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* グリッドレイアウト（スマホファースト：デフォルト1列） */
.inpath-top-reason-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
/* タブレットサイズ以上で2列 */
@media screen and (min-width: 768px) {
.inpath-top-reason-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* PCサイズ以上で3列（画像のレイアウト） */
@media screen and (min-width: 1024px) {
.inpath-top-reason-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* カードスタイル */
.inpath-top-reason-card {
background-color: #ffffff;
border-radius: 12px;
padding: 32px 28px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ふんわりとした影 */
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ホバー時の挙動（オプション） */
.inpath-top-reason-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
/* アイコン背景の青い四角 */
.inpath-top-reason-icon-box {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #2b5cb8, #1a3b8c); /* 青色のグラデーション */
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
/* アイコン自体（SVG）の設定 */
.inpath-top-reason-icon {
width: 28px;
height: 28px;
stroke: #ffffff;
stroke-width: 2;
}
/* タイトルテキスト */
.inpath-top-reason-title {
font-size: 18px;
font-weight: 700;
color: #0f2557; /* 濃紺 */
margin-bottom: 16px;
line-height: 1.4;
}
/* 説明テキスト */
.inpath-top-reason-desc {
font-size: 14px;
color: #555555;
line-height: 1.8;
text-align: left;
}
/*///////////// ここまで ///////////////////
// 選ばれる6つの理由
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ご利用の流れ（学生向け）
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-flow-student-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
}
/* グリッドレイアウト（スマホファースト：デフォルトは1列） */
.inpath-flow-student-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
margin-bottom: 40px;
}
/* タブレット・PC以上で3列表示 */
@media (min-width: 768px) {
.inpath-flow-student-grid {
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
}
/* カードのデザイン */
.inpath-flow-student-card {
position: relative;
background-color: #ffffff;
border-radius: 8px;
padding: 40px 24px 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: flex-start;
transition: transform 0.3s ease;
}
.inpath-flow-student-card:hover {
transform: translateY(-5px);
}
/* 左上の数字バッジ */
.inpath-flow-student-badge {
position: absolute;
top: -15px;
left: -10px;
width: 40px;
height: 40px;
background-color: #234585; /* 濃い青 */
color: #ffffff;
font-weight: bold;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
}
/* アイコンの背景ボックス */
.inpath-flow-student-icon-box {
width: 50px;
height: 50px;
background-color: #e6edf7; /* 薄い青 */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
/* アイコン本体 */
.inpath-flow-student-icon {
width: 28px;
height: 28px;
color: #3b76ce; /* アクセントの青 */
}
/* タイトル */
.inpath-flow-student-title {
font-size: 18px;
font-weight: 700;
color: #1a2b50; /* 濃紺 */
margin: 0 0 10px 0;
}
/* 説明文 */
.inpath-flow-student-desc {
font-size: 14px;
line-height: 1.6;
color: #555;
margin: 0;
}
/* ボタンエリア */
.inpath-flow-student-btn-wrapper {
text-align: center;
margin-top: 20px;
}
/* CTAボタン */
.inpath-flow-student-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #4a90e2 0%, #1e3a75 100%);
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-size: 16px;
padding: 16px 40px;
border-radius: 50px;
transition: opacity 0.3s ease, transform 0.3s ease;
box-shadow: 0 4px 10px rgba(35, 69, 133, 0.3);
}
.inpath-flow-student-btn:hover {
opacity: 0.9;
transform: scale(1.02);
}
/* ボタン内の矢印 */
.inpath-flow-student-arrow {
margin-left: 10px;
font-weight: bold;
}
/*///////////// ここまで ///////////////////
// ご利用の流れ（学生向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 多様な業界の企業が参加
/////////////// ここから /////////////////*/
/* ベース設定: 競合回避のため全てのセレクタに接頭辞を使用 */
.inpath-companylist-student-container *,
.inpath-companylist-student-container *::before,
.inpath-companylist-student-container *::after {
box-sizing: border-box;
}
/* 全体コンテナ */
.inpath-companylist-student-container {
display: grid;
grid-template-columns: 1fr; /* スマホ: 1列 */
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
background-color: #f8f9fa; /* 全体の背景色（薄いグレー） */
}
/* カードスタイル */
.inpath-companylist-student-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 12px;
padding: 24px;
text-decoration: none; /* リンクの下線を消す */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* ホバー時の挙動 */
.inpath-companylist-student-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
/* アイコンの背景部分 */
.inpath-companylist-student-icon-wrapper {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #2b5fac 0%, #1d4289 100%); /* 青色のグラデーション */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
/* アイコン本体 */
.inpath-companylist-student-icon {
color: #ffffff;
font-size: 20px;
}
/* タイトルと件数の横並びエリア */
.inpath-companylist-student-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
/* カテゴリ名 */
.inpath-companylist-student-title {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #1a1a1a;
}
/* 件数（数字） */
.inpath-companylist-student-count {
font-size: 18px;
font-weight: bold;
color: #4a90e2; /* 画像に合わせた明るめの青 */
}
/* 詳細テキスト */
.inpath-companylist-student-desc {
margin: 0;
font-size: 12px;
color: #666666;
line-height: 1.5;
}
/* -------------------------------------------
レスポンシブ設定
------------------------------------------- */
/* タブレット (600px以上): 2列 */
@media screen and (min-width: 600px) {
.inpath-companylist-student-container {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
/* PC (1024px以上): 3列 */
@media screen and (min-width: 1024px) {
.inpath-companylist-student-container {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 40px;
}
}
/*///////////// ここまで ///////////////////
// 多様な業界の企業が参加
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 有名企業も多数参加
/////////////// ここから /////////////////*/
/* ベースのリセット：コンテナと、その中のすべての要素に適用 */
.inpath-companybanner-student-container,
.inpath-companybanner-student-container * {
box-sizing: border-box; /* ここが重要：paddingを含めた幅計算にします */
margin: 0;
padding: 0;
}
/* メインコンテナ */
.inpath-companybanner-student-container {
width: 100%;
max-width: 1000px;
/* 念のため最大幅を100%に制限してはみ出し防止 */
margin: 0 auto;
padding: 40px 20px;
background: linear-gradient(90deg, #3d7dd9 0%, #152d5e 100%);
border-radius: 12px;
color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
text-align: center;
}
/* コンテンツラッパー */
.inpath-companybanner-student-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%; /* コンテンツも親幅に合わせる */
}
/* タイトル */
.inpath-companybanner-student-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
letter-spacing: 0.05em;
line-height: 1.4;
color: #ffffff;
}
/* 説明文 */
.inpath-companybanner-student-description {
font-size: 14px;
font-weight: 400;
margin-bottom: 24px;
opacity: 0.95;
line-height: 1.6;
color: #ffffff;
}
/* タグリスト */
.inpath-companybanner-student-tag-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
list-style: none;
width: 100%;
}
/* 各タグアイテム */
.inpath-companybanner-student-tag-item {
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 10px 12px; /* スマホでは内側の余白を少し詰める */
transition: background-color 0.3s ease;
/* スマホ：2列表示で横幅に収まるよう計算 (50% - gapの半分) */
width: calc(50% - 5px);
}
.inpath-companybanner-student-tag-item:hover {
background-color: rgba(255, 255, 255, 0.3);
}
/* アイコン */
.inpath-companybanner-student-icon {
width: 16px;
height: 16px;
margin-right: 6px;
flex-shrink: 0;
}
/* タグテキスト */
.inpath-companybanner-student-tag-text {
font-size: 11px; /* スマホでは文字サイズを少し調整 */
font-weight: 700;
white-space: nowrap;
}
/* --- レスポンシブ対応（タブレット・PC以上） --- */
@media screen and (min-width: 768px) {
.inpath-companybanner-student-container {
padding: 50px 40px;
}
.inpath-companybanner-student-title {
font-size: 28px;
margin-bottom: 16px;
}
.inpath-companybanner-student-description {
font-size: 16px;
margin-bottom: 32px;
}
.inpath-companybanner-student-tag-item {
width: auto; /* PCでは文字量に合わせる */
padding: 12px 24px;
}
.inpath-companybanner-student-tag-text {
font-size: 14px;
}
.inpath-companybanner-student-icon {
width: 18px;
height: 18px;
margin-right: 8px;
}
}
/*///////////// ここまで ///////////////////
// 有名企業も多数参加
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 先輩たちの声
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-voice-student-container {
width: 100%;
max-width: 1200px; /* コンテンツの最大幅 */
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* グリッドレイアウト（スマホファースト：1カラム） */
.inpath-voice-student-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
/* カードスタイル */
.inpath-voice-student-card {
background-color: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.inpath-voice-student-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* 画像エリア */
.inpath-voice-student-figure {
margin: 0;
width: 100%;
aspect-ratio: 4 / 3; /* 画像比率を固定 */
overflow: hidden;
}
.inpath-voice-student-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* コンテンツエリア */
.inpath-voice-student-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
/* テキスト部分（引用マーク付き） */
.inpath-voice-student-quote-area {
position: relative;
padding-left: 28px; /* 引用マーク分の余白 */
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #eeeeee; /* 名前との境界線 */
}
/* 引用マーク（疑似要素で作成） */
.inpath-voice-student-quote-area::before {
content: "“";
position: absolute;
top: -10px;
left: 0;
font-size: 50px;
color: #4A90E2; /* 青色 */
font-family: serif;
line-height: 1;
}
.inpath-voice-student-text {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: #444444;
text-align: justify;
}
/* プロフィール部分 */
.inpath-voice-student-profile {
margin-top: auto; /* 下部に配置 */
}
.inpath-voice-student-name {
margin: 0 0 4px 0;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.inpath-voice-student-university {
margin: 0 0 4px 0;
font-size: 12px;
font-weight: bold;
color: #0066cc; /* 大学名の青文字 */
}
.inpath-voice-student-role {
margin: 0;
font-size: 11px;
color: #888888;
}
/* -----------------------------
レスポンシブ設定
----------------------------- */
/* タブレット（768px以上）：2カラム */
@media screen and (min-width: 768px) {
.inpath-voice-student-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
/* PC（1024px以上）：3カラム */
@media screen and (min-width: 1024px) {
.inpath-voice-student-grid {
grid-template-columns: repeat(3, 1fr);
gap: 40px; /* PCでは余白を広めに */
}
}
/*///////////// ここまで ///////////////////
// 先輩たちの声
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 先輩たちの声 バナー
/////////////// ここから /////////////////*/
/* ベーススタイル（スマホファースト） */
.inpath-voicebanner-student-container {
background-color: #ebf0f6; /* 薄いブルーグレーの背景 */
border-radius: 8px;
padding: 40px 20px;
text-align: center;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
box-sizing: border-box;
width: 100%;
margin: 0 auto;
}
.inpath-voicebanner-student-title {
color: #0f1c40; /* 濃紺のテキスト */
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
line-height: 1.4;
}
.inpath-voicebanner-student-description {
color: #4a5568; /* 暗いグレーのテキスト */
font-size: 13px;
margin: 0 0 24px 0;
line-height: 1.6;
}
.inpath-voicebanner-student-cta-wrapper {
display: flex;
justify-content: center;
}
.inpath-voicebanner-student-button {
display: inline-block;
/* ボタンのグラデーション (左:明るめの青 -> 右:濃紺) */
background: linear-gradient(90deg, #427cc9 0%, #152c5b 100%);
color: #ffffff;
font-weight: 700;
font-size: 14px;
text-decoration: none;
padding: 14px 40px;
border-radius: 50px; /* 角丸（ピル型） */
transition: opacity 0.3s ease, transform 0.2s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* ホバー時の挙動 */
.inpath-voicebanner-student-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* PC・タブレット向けスタイル (768px以上) */
@media screen and (min-width: 768px) {
.inpath-voicebanner-student-container {
padding: 50px 40px;
max-width: 1000px; /* PCでの最大幅制御が必要な場合 */
}
.inpath-voicebanner-student-title {
font-size: 24px;
margin-bottom: 16px;
}
.inpath-voicebanner-student-description {
font-size: 14px;
margin-bottom: 32px;
}
.inpath-voicebanner-student-button {
font-size: 16px;
padding: 16px 60px;
}
}
/*///////////// ここまで ///////////////////
// 先輩たちの声 バナー
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お問合せ
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-contact-main-container {
display: flex;
flex-direction: column; /* スマホファースト: 縦並び */
gap: 24px;
max-width: 1100px;
margin: 0 auto;
padding: 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
}
/* カード共通設定 */
.inpath-contact-main-card {
background-color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
flex: 1;
display: flex;
flex-direction: column;
}
/* ヘッダーエリア */
.inpath-contact-main-header {
padding: 40px 30px;
color: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
/* 背景色設定 */
.inpath-contact-main-bg-blue {
/* background: linear-gradient(135deg, #3b7cdb 0%, #3067b5 100%); */
background: linear-gradient(135deg, #1e3c72 0%, #152955 100%);
}
.inpath-contact-main-bg-navy {
background: linear-gradient(135deg, #1e3c72 0%, #152955 100%);
}
/* アイコン */
.inpath-contact-main-icon-box {
background-color: rgba(255, 255, 255, 0.2);
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.inpath-contact-main-icon {
width: 32px;
height: 32px;
color: #fff;
}
/* タイトルとサブタイトル */
.inpath-contact-main-title {
margin: 0 0 8px 0;
font-size: 24px;
font-weight: 700;
line-height: 1.4;
color: #ffffff;
}
.inpath-contact-main-subtitle {
margin: 0;
font-size: 14px;
opacity: 0.9;
line-height: 1.5;
color: #ffffff;
}
/* コンテンツボディ */
.inpath-contact-main-body {
padding: 32px 30px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.inpath-contact-main-description {
font-size: 14px;
line-height: 1.8;
margin-bottom: 24px;
color: #4a4a4a;
}
/* リストスタイル */
.inpath-contact-main-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
}
.inpath-contact-main-list-item {
position: relative;
padding-left: 28px;
margin-bottom: 12px;
font-size: 14px;
line-height: 1.5;
color: #444;
}
.inpath-contact-main-list-item::before {
content: '';
position: absolute;
left: 0;
top: 6px; /* 行の高さに合わせて微調整 */
width: 14px;
height: 8px;
border-left: 2px solid #3b7cdb;
border-bottom: 2px solid #3b7cdb;
transform: rotate(-45deg);
}
/* ボタン共通 */
.inpath-contact-main-button {
display: block;
text-align: center;
text-decoration: none;
padding: 16px 20px;
border-radius: 8px;
font-weight: 700;
font-size: 15px;
color: #fff;
margin-top: auto; /* 下部に固定 */
transition: opacity 0.3s ease;
position: relative;
}
.inpath-contact-main-button:hover {
opacity: 0.9;
}
/* ボタン色設定（写真の配色を再現：左側カードのボタンは濃紺、右側カードのボタンは青） */
.inpath-contact-main-btn-navy {
background-color: #1e3c72; /* ネイビー */
background: linear-gradient(to right, #1e3c72, #2a5298);
}
.inpath-contact-main-btn-blue {
/* background-color: #3b7cdb;
background: linear-gradient(to right, #3b7cdb, #4a90e2); */
background-color: #1e3c72; /* ネイビー */
background: linear-gradient(to right, #1e3c72, #2a5298);
}
.inpath-contact-main-arrow {
margin-left: 8px;
font-family: sans-serif;
display: inline-block;
transition: transform 0.2s;
}
.inpath-contact-main-button:hover .inpath-contact-main-arrow {
transform: translateX(4px);
}
/* レスポンシブ対応 (PC画面) */
@media screen and (min-width: 768px) {
.inpath-contact-main-container {
flex-direction: row; /* 横並びにする */
align-items: stretch;
}
}
/*///////////// ここまで ///////////////////
// お問合せ
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 電話問合せ エリア
/////////////// ここから /////////////////*/
/* --- ベースのリセットとレイアウト設定 --- */
.inpath-contact-tell-container {
width: 100%;
padding: 20px;
box-sizing: border-box;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/* --- カード本体のデザイン --- */
.inpath-contact-tell-card {
background-color: #EFF6FF; /* 薄い青色の背景 */
border-radius: 12px;
padding: 40px 20px;
text-align: center;
max-width: 800px; /* デスクトップでの最大幅 */
margin: 0 auto; /* 中央寄せ */
box-sizing: border-box;
}
/* --- アイコン周りのデザイン --- */
.inpath-contact-tell-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
background-color: #448BD4; /* アイコンの青色背景 */
border-radius: 50%;
margin: 0 auto 16px auto;
}
.inpath-contact-tell-icon {
width: 32px;
height: 32px;
fill: #ffffff; /* アイコンの色は白 */
}
/* --- タイトルテキスト --- */
.inpath-contact-tell-title {
font-size: 18px;
font-weight: 700;
color: #0F1E40; /* 濃い紺色 */
margin: 0 0 8px 0;
line-height: 1.5;
}
/* --- 説明文（営業時間など） --- */
.inpath-contact-tell-description {
font-size: 14px;
color: #666666; /* グレー */
margin: 0 0 16px 0;
line-height: 1.5;
}
/* --- 電話番号リンク --- */
.inpath-contact-tell-link {
display: inline-block;
font-size: 28px;
font-weight: 700;
color: #448BD4; /* 電話番号の青色 */
text-decoration: none;
font-family: Roboto, Arial, sans-serif; /* 数字を見やすくするためのフォント指定 */
letter-spacing: 0.05em;
transition: opacity 0.3s;
}
/* ホバー時の挙動 */
.inpath-contact-tell-link:hover {
opacity: 0.7;
}
/* --- レスポンシブ調整（タブレット・PC以上） --- */
@media screen and (min-width: 768px) {
.inpath-contact-tell-card {
padding: 60px 40px; /* PCでは余白を広めに */
}
.inpath-contact-tell-title {
font-size: 20px;
}
.inpath-contact-tell-link {
font-size: 32px;
}
}
/*///////////// ここまで ///////////////////
// 電話問合せ エリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お問合せ（企業向け）
/////////////// ここから /////////////////*/
/* ベースリセット */
.inpath-contact-company-wrapper * {
box-sizing: border-box;
}
/* 全体のラッパー（背景色などはサイトに合わせて調整してください） */
.inpath-contact-company-wrapper {
width: 100%;
padding: 20px 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.6;
}
/* フォームの白いカード部分 */
.inpath-contact-company-container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 30px 20px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
/* 各項目のマージン */
.inpath-contact-company-item {
margin-bottom: 24px;
}
/* ラベルスタイル */
.inpath-contact-company-label {
display: block;
font-weight: bold;
font-size: 14px;
margin-bottom: 8px;
color: #333;
}
/* 必須マーク */
.inpath-contact-company-required {
color: #e74c3c;
margin-left: 4px;
}
/* 注釈テキスト */
.inpath-contact-company-note {
font-weight: normal;
font-size: 12px;
color: #666;
margin-left: 5px;
}
/* インプット・セレクト・テキストエリア共通 */
.inpath-contact-company-input,
.inpath-contact-company-select,
.inpath-contact-company-textarea {
width: 100%;
padding: 12px 15px;
font-size: 16px; /* スマホでズームしないよう16px以上推奨 */
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.3s;
}
.inpath-contact-company-input:focus,
.inpath-contact-company-select:focus,
.inpath-contact-company-textarea:focus {
outline: none;
border-color: #2b5fac;
}
.inpath-contact-company-input::placeholder,
.inpath-contact-company-textarea::placeholder {
color: #aaa;
}
/* セレクトボックスの矢印調整 */
.inpath-contact-company-select-wrap {
position: relative;
}
.inpath-contact-company-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* 2列レイアウト用のコンテナ */
.inpath-contact-company-row {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 24px;
margin-bottom: 24px;
}
/* チェックボックスグループ */
.inpath-contact-company-checkbox-group {
display: flex;
flex-direction: column;
gap: 12px;
}
.inpath-contact-company-checkbox-label {
display: flex;
align-items: center;
font-size: 15px;
cursor: pointer;
}
.inpath-contact-company-checkbox {
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 3px;
}
/* テキストエリア */
.inpath-contact-company-textarea {
min-height: 150px;
resize: vertical;
}
/* 文字数カウント */
.inpath-contact-company-char-count {
text-align: right;
font-size: 12px;
color: #666;
margin-top: 5px;
}
/* 送信ボタンエリア */
.inpath-contact-company-submit-wrap {
margin-top: 40px;
text-align: center;
}
.inpath-contact-company-submit-btn {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #2b5fac; /* 画像の青色 */
border: none;
border-radius: 6px;
cursor: pointer;
transition: opacity 0.3s;
}
.inpath-contact-company-submit-btn:hover {
opacity: 0.9;
}
/* フッター（電話番号エリア） */
.inpath-contact-company-footer {
text-align: center;
margin-top: 0px;
padding: 0 10px;
}
.inpath-contact-company-footer-text {
font-size: 14px;
margin-bottom: 10px;
color: #333;
}
.inpath-contact-company-phone-link {
display: block;
font-size: 28px;
font-weight: bold;
color: #4a90e2; /* 画像の明るい青色 */
text-decoration: none;
margin-bottom: 5px;
line-height: 1.2;
}
.inpath-contact-company-hours {
font-size: 12px;
color: #666;
}
/* --- レスポンシブ対応（タブレット・PC以上） --- */
@media screen and (min-width: 768px) {
.inpath-contact-company-container {
padding: 50px 60px; /* PCでの内側余白を増やす */
}
/* 2列レイアウトを横並びにする */
.inpath-contact-company-row {
flex-direction: row;
justify-content: space-between;
}
.inpath-contact-company-col {
width: 48%; /* 間隔を空けて配置 */
}
.inpath-contact-company-label {
font-size: 15px;
}
/* ラベルとインプットのバランス調整 */
.inpath-contact-company-checkbox-label {
font-size: 16px;
}
}
/*///////////// ここまで ///////////////////
// お問合せ（企業向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// お問合せ（学生向け）
/////////////// ここから /////////////////*/
/* ベースリセット */
.inpath-contact-student-wrapper * {
box-sizing: border-box;
}
/* 全体のラッパー */
.inpath-contact-student-wrapper {
width: 100%;
padding: 20px 0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
line-height: 1.6;
}
/* フォームの白いカード部分 */
.inpath-contact-student-container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
/* 各項目のマージン */
.inpath-contact-student-item {
margin-bottom: 24px;
}
/* ラベルスタイル */
.inpath-contact-student-label {
display: block;
font-weight: bold;
font-size: 14px;
margin-bottom: 8px;
color: #333;
}
/* 必須マーク */
.inpath-contact-student-required {
color: #e74c3c;
margin-left: 4px;
}
/* 注釈テキスト */
.inpath-contact-student-note {
font-weight: normal;
font-size: 12px;
color: #666;
margin-left: 5px;
}
/* インプット・セレクト・テキストエリア共通 */
.inpath-contact-student-input,
.inpath-contact-student-select,
.inpath-contact-student-textarea {
width: 100%;
padding: 12px 15px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.3s;
}
.inpath-contact-student-input:focus,
.inpath-contact-student-select:focus,
.inpath-contact-student-textarea:focus {
outline: none;
border-color: #2b5fac;
}
.inpath-contact-student-input::placeholder,
.inpath-contact-student-textarea::placeholder {
color: #aaa;
}
/* セレクトボックスの矢印調整 */
.inpath-contact-student-select-wrap {
position: relative;
}
.inpath-contact-student-select-wrap::after {
content: "";
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* 2列レイアウト用のコンテナ */
.inpath-contact-student-row {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 24px;
margin-bottom: 24px;
}
/* チェックボックスグリッド（2列表示） */
.inpath-contact-student-checkbox-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 常に2列 */
gap: 12px 20px;
}
.inpath-contact-student-checkbox-label {
display: flex;
align-items: center;
font-size: 15px;
cursor: pointer;
}
.inpath-contact-student-checkbox {
width: 18px;
height: 18px;
margin-right: 10px;
cursor: pointer;
border: 1px solid #ddd;
border-radius: 3px;
}
/* テキストエリア */
.inpath-contact-student-textarea {
min-height: 120px;
resize: vertical;
}
/* 文字数カウント */
.inpath-contact-student-char-count {
text-align: right;
font-size: 12px;
color: #666;
margin-top: 5px;
}
/* 送信ボタンエリア */
.inpath-contact-student-submit-wrap {
margin-top: 40px;
text-align: center;
}
.inpath-contact-student-submit-btn {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: bold;
color: #fff;
background-color: #2557a7; /* 少し濃いめの青 */
border: none;
border-radius: 6px;
cursor: pointer;
transition: opacity 0.3s;
}
.inpath-contact-student-submit-btn:hover {
opacity: 0.9;
}
/* フッター（個人情報保護方針） */
.inpath-contact-student-privacy-text {
max-width: 800px;
margin: 20px auto 0;
text-align: center;
font-size: 12px;
color: #666;
padding: 0 10px;
}
/* --- レスポンシブ対応（タブレット・PC以上） --- */
@media screen and (min-width: 768px) {
.inpath-contact-student-container {
padding: 50px 60px;
}
/* 2列レイアウトを横並びにする */
.inpath-contact-student-row {
flex-direction: row;
justify-content: space-between;
}
.inpath-contact-student-col {
width: 48%; /* 間隔を空けて配置 */
}
.inpath-contact-student-label {
font-size: 15px;
}
.inpath-contact-student-checkbox-label {
font-size: 16px;
}
}
/*///////////// ここまで ///////////////////
// お問合せ（学生向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// プライバシーポリシー
/////////////// ここから /////////////////*/
/* --- Intern Path Privacy Policy Styles --- */
/* コンテナ設定：全体の幅と余白を管理 */
.inpath-privacy-wrapper {
width: 100%;
max-width: 800px; /* PCでの最大幅 */
margin: 0 auto;
padding: 20px 15px;
box-sizing: border-box;
color: #333;
line-height: 1.6;
font-family: inherit; /* サイト全体のフォントを継承 */
}
/* メインタイトル */
.inpath-privacy-main-title {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
border-bottom: none;
}
/* 各条文のブロック */
.inpath-privacy-item {
margin-bottom: 40px;
}
/* 条文見出し（第〇条） */
.inpath-privacy-sub-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #ddd;
}
/* 第3階層見出し（Googleアナリティクス等） */
.inpath-privacy-third-title {
font-size: 16px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
/* 本文テキスト */
.inpath-privacy-text {
margin-bottom: 1em;
font-size: 15px;
text-align: justify;
}
/* リスト表示 */
.inpath-privacy-list {
margin: 15px 0 15px 20px;
padding: 0;
list-style-type: disc;
}
.inpath-privacy-list li {
margin-bottom: 8px;
font-size: 15px;
}
/* お問い合わせ窓口のボックス */
.inpath-privacy-contact-box {
background-color: #f9f9f9;
padding: 20px;
border-radius: 4px;
border: 1px solid #eee;
}
/* 定義リスト（dl, dt, dd）のスタイル */
.inpath-privacy-dl {
margin: 0;
}
.inpath-privacy-dl-row {
margin-bottom: 12px;
display: block;
}
.inpath-privacy-dl-row:last-child {
margin-bottom: 0;
}
.inpath-privacy-dt {
font-weight: bold;
font-size: 14px;
margin-bottom: 4px;
color: #555;
}
.inpath-privacy-dd {
margin: 0;
font-size: 15px;
word-break: break-all; /* 長いURL等の改行対策 */
}
/* リンクスタイル */
.inpath-privacy-link {
color: #0073aa; /* 一般的なリンク色、サイトに合わせて変更可 */
text-decoration: underline;
}
.inpath-privacy-link:hover {
text-decoration: none;
opacity: 0.8;
}
/* --- レスポンシブ対応（PC・タブレット向け） --- */
@media screen and (min-width: 768px) {
.inpath-privacy-wrapper {
padding: 40px 20px;
}
.inpath-privacy-main-title {
font-size: 28px;
margin-bottom: 40px;
}
.inpath-privacy-sub-title {
font-size: 20px;
}
/* お問い合わせ部分を横並びにするレイアウト調整 */
.inpath-privacy-dl-row {
display: flex;
align-items: baseline;
margin-bottom: 10px;
border-bottom: 1px dotted #eee;
padding-bottom: 10px;
}
.inpath-privacy-dl-row:last-child {
border-bottom: none;
padding-bottom: 0;
}
.inpath-privacy-dt {
width: 120px; /* ラベルの幅を固定 */
flex-shrink: 0;
margin-bottom: 0;
}
}
/*///////////// ここまで ///////////////////
// プライバシーポリシー
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 利用規約
/////////////// ここから /////////////////*/
/* ベーススタイル */
.inpath-contact-container {
display: flex;
flex-direction: column;
gap: 32px;
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #333;
background-color: #fcfcfc;
}
/* 上段：カードエリア（グリッド） */
.inpath-contact-row {
display: flex;
flex-direction: column; /* スマホ: 縦並び */
gap: 24px;
}
/* カード共通設定 */
.inpath-contact-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); /* 柔らかい影 */
flex: 1;
padding: 40px 32px;
display: flex;
flex-direction: column;
}
.inpath-contact-card-content {
display: flex;
flex-direction: column;
height: 100%;
}
/* アイコンボックス */
.inpath-contact-icon-box {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.inpath-contact-icon-navy {
background-color: #104c97; /* 濃い青 */
}
.inpath-contact-icon-blue {
background-color: #4da6ff; /* 水色 */
}
.inpath-contact-icon {
width: 28px;
height: 28px;
color: #fff;
}
/* タイトルと説明文 */
.inpath-contact-title {
margin: 0 0 16px 0;
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
.inpath-contact-description {
font-size: 14px;
line-height: 1.8;
margin: 0 0 24px 0;
color: #555;
}
/* リストスタイル */
.inpath-contact-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
flex-grow: 1; /* 下部のリンクを底に配置するために伸ばす */
}
.inpath-contact-list-item {
position: relative;
padding-left: 28px;
margin-bottom: 14px;
font-size: 14px;
line-height: 1.5;
color: #444;
}
/* --- 【修正】チェックマークの描画（CSSボーダーでL字を作って回転） --- */
.inpath-contact-list-item::before {
content: '';
position: absolute;
left: 2px; /* 位置調整 */
top: 4px; /* 行の高さに合わせて位置調整 */
width: 5px; /* チェックマークの短辺の幅 */
height: 9px; /* チェックマークの長辺の高さ */
border: solid #3b7cdb; /* 線の色 */
border-width: 0 2px 2px 0; /* 右と下だけに線を引く */
transform: rotate(45deg); /* 45度回転させる */
}
/* テキストリンクスタイル */
.inpath-contact-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #3b7cdb;
font-weight: 700;
font-size: 14px;
margin-top: auto;
transition: opacity 0.3s;
}
.inpath-contact-link:hover {
opacity: 0.8;
}
.inpath-contact-arrow {
margin-left: 6px;
font-weight: bold;
transition: transform 0.2s;
}
.inpath-contact-link:hover .inpath-contact-arrow {
transform: translateX(4px);
}
/* --- 下段：お問い合わせエリア --- */
.inpath-contact-inquiry-box {
background-color: #fff;
border: 1px solid #e5e5e5;
border-radius: 8px;
padding: 32px 20px;
text-align: center;
}
.inpath-contact-inquiry-title {
font-size: 18px;
font-weight: 700;
margin: 0 0 12px 0;
color: #1a1a1a;
}
.inpath-contact-inquiry-text {
font-size: 14px;
color: #666;
margin: 0 0 24px 0;
line-height: 1.6;
}
/* 連絡先情報エリア */
.inpath-contact-contact-info {
display: flex;
flex-direction: column; /* スマホ: 縦並び */
align-items: center;
justify-content: center;
gap: 16px;
}
.inpath-contact-phone-group {
display: flex;
align-items: center;
gap: 8px;
color: #333;
}
.inpath-contact-mini-icon {
width: 20px;
height: 20px;
color: #3b7cdb;
}
.inpath-contact-phone-number {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
}
.inpath-contact-phone-hours {
font-size: 12px;
color: #888;
}
.inpath-contact-divider {
display: none; /* スマホでは非表示 */
width: 1px;
height: 24px;
background-color: #e0e0e0;
}
.inpath-contact-form-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #3b7cdb;
font-weight: 700;
font-size: 14px;
transition: opacity 0.3s;
}
.inpath-contact-form-link:hover {
opacity: 0.8;
}
/* レスポンシブ対応 (PC画面) */
@media screen and (min-width: 768px) {
.inpath-contact-row {
flex-direction: row; /* カード横並び */
align-items: stretch;
}
.inpath-contact-contact-info {
flex-direction: row; /* 連絡先横並び */
gap: 32px;
}
.inpath-contact-divider {
display: block; /* 縦線を表示 */
}
}
/*///////////// ここまで ///////////////////
// 利用規約
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 利用規約（学生様向け）
/////////////// ここから /////////////////*/
/* --- Intern Path Terms of Service Styles --- */
/* コンテナ設定 */
.inpath-terms-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px 15px;
box-sizing: border-box;
color: #333;
line-height: 1.6;
font-family: inherit;
}
/* メインタイトル */
.inpath-terms-main-title {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
border-bottom: none;
}
/* 各条文のブロック */
.inpath-terms-item {
margin-bottom: 40px;
}
/* 条文見出し（第〇条） */
.inpath-terms-sub-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #ddd;
}
/* 本文テキスト */
.inpath-terms-text {
margin-bottom: 1em;
font-size: 15px;
text-align: justify;
}
/* リスト表示（禁止事項など） */
.inpath-terms-list {
margin: 15px 0 15px 20px;
padding: 0;
list-style-type: disc;
}
.inpath-terms-list li {
margin-bottom: 8px;
font-size: 15px;
}
/* --- レスポンシブ対応（PC・タブレット向け） --- */
@media screen and (min-width: 768px) {
.inpath-terms-wrapper {
padding: 40px 20px;
}
.inpath-terms-main-title {
font-size: 28px;
margin-bottom: 40px;
}
.inpath-terms-sub-title {
font-size: 20px;
}
}
/*///////////// ここまで ///////////////////
// 利用規約（学生様向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// 利用規約（企業様向け）
/////////////// ここから /////////////////*/
/* --- Intern Path Terms (Business) Styles --- */
/* コンテナ設定 */
.inpath-biz-wrapper {
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 20px 15px;
box-sizing: border-box;
color: #333;
line-height: 1.6;
font-family: inherit;
}
/* メインタイトル */
.inpath-biz-main-title {
font-size: 24px;
margin-bottom: 30px;
text-align: center;
font-weight: bold;
border-bottom: none;
}
/* 各条文のブロック */
.inpath-biz-item {
margin-bottom: 40px;
}
/* 条文見出し（第〇条） */
.inpath-biz-sub-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
padding-bottom: 8px;
border-bottom: 1px solid #ddd;
}
/* 本文テキスト */
.inpath-biz-text {
margin-bottom: 1em;
font-size: 15px;
text-align: justify;
}
/* リスト表示 */
.inpath-biz-list {
margin: 15px 0 15px 20px;
padding: 0;
list-style-type: disc;
}
.inpath-biz-list li {
margin-bottom: 8px;
font-size: 15px;
}
/* --- レスポンシブ対応（PC・タブレット向け） --- */
@media screen and (min-width: 768px) {
.inpath-biz-wrapper {
padding: 40px 20px;
}
.inpath-biz-main-title {
font-size: 28px;
margin-bottom: 40px;
}
.inpath-biz-sub-title {
font-size: 20px;
}
}
/*///////////// ここまで ///////////////////
// 利用規約（企業様向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// よくある質問 （学生向け）
/////////////// ここから /////////////////*/
/* ベースのスタイル設定 */
.question-student-container {
width: 95%;
max-width: 900px;
margin: 40px auto;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
/* 各アイテムのスタイル */
.question-student-item {
background-color: #fff;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
/* ヘッダー（質問部分） */
.question-student-header {
width: 100%;
display: flex;
align-items: center;
padding: 20px;
background-color: #ffffff; /* 初期は白 */
border: none;
cursor: pointer;
text-align: left;
position: relative;
/* 背景色の変化を滑らかにする */
transition: background-color 0.3s ease;
}
/* 【追加】ヘッダー全体をホバーした時の背景色（極めて薄いブルー） */
.question-student-header:hover {
background-color: #f0f7ff;
}
/* 【追加】ヘッダーをホバーした時のQの背景色（少し明るいブルー） */
.question-student-header:hover .question-student-q-icon {
background-color: #60a5fa;
}
/* Qアイコン */
.question-student-q-icon {
background-color: #1e3a8a; /* 濃い紺色 */
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 16px;
flex-shrink: 0;
margin-right: 15px;
transition: background-color 0.3s ease;
}
/* 質問テキスト */
.question-student-title {
color: #1e3a8a;
font-weight: 700;
font-size: 1rem;
line-height: 1.5;
padding-right: 30px;
flex-grow: 1;
}
/* 矢印アイコン */
.question-student-arrow {
position: relative;
width: 12px;
height: 12px;
border-right: 2px solid #3b82f6;
border-bottom: 2px solid #3b82f6;
transform: rotate(45deg);
transition: transform 0.3s ease;
margin-right: 5px;
}
/* 開いた時の矢印 */
.question-student-item.is-open .question-student-arrow {
transform: rotate(-135deg);
margin-top: 5px;
}
/* コンテンツ（回答部分） */
.question-student-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
background-color: #f8fafc;
}
.question-student-answer-inner {
padding: 0 20px 20px 67px;
display: flex;
align-items: flex-start;
}
/* Aアイコン */
.question-student-a-icon {
background-color: #cbd5e1;
color: #1e3a8a;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
flex-shrink: 0;
margin-right: 15px;
margin-top: 2px;
}
/* 回答テキスト */
.question-student-text {
margin: 0;
font-size: 0.95rem;
color: #334155;
line-height: 1.6;
}
/* もっと見るボタン */
.question-student-more-wrapper {
text-align: center;
margin-top: 30px;
}
.question-student-more-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, #3b82f6 0%, #1e3a8a 100%);
color: #fff;
text-decoration: none;
padding: 12px 40px;
border-radius: 30px;
font-weight: bold;
transition: opacity 0.3s ease;
}
.question-student-more-btn:hover {
opacity: 0.9;
}
.question-student-btn-arrow {
display: inline-block;
width: 8px;
height: 8px;
border-right: 2px solid #fff;
border-top: 2px solid #fff;
transform: rotate(45deg);
margin-left: 10px;
}
/* レスポンシブ */
@media (min-width: 768px) {
.question-student-title {
font-size: 1.1rem;
}
.question-student-text {
font-size: 1rem;
}
}
/*///////////// ここまで ///////////////////
// よくある質問 （学生向け）
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）ヒーローエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-hero-wrapper {
position: relative;
width: 100%;
min-height: 100vh; /* 画面いっぱいの高さ */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #ffffff;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
overflow: hidden;
box-sizing: border-box;
}
/* 背景画像設定 */
.top-inpath-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
/* オーバーレイ（画像を暗くする） */
.top-inpath-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
z-index: 2;
}
/* コンテンツコンテナ */
.top-inpath-container {
position: relative;
z-index: 10;
width: 100%;
max-width: 1200px;
padding: 60px 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
/* --- テキストエリア --- */
.top-inpath-main-title {
font-size: 1.8rem;
font-weight: 700;
line-height: 1.5;
margin: 0 0 20px 0;
letter-spacing: 0.05em;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
color: #ffffff;
}
.top-inpath-sub-copy {
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
opacity: 0.9;
color: #ffffff;
}
/* PC用の改行はスマホで消す */
.top-inpath-pc-br {
display: none;
}
/* --- CTAボタンエリア --- */
.top-inpath-cta-group {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 16px;
width: 85%;
max-width: 500px; /* スマホでのボタン最大幅 */
}
.top-inpath-cta-btn {
display: block;
text-decoration: none;
color: #fff;
border-radius: 8px;
padding: 16px 24px;
transition: transform 0.2s, opacity 0.2s;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
height: 70px;
}
.top-inpath-cta-btn:hover {
transform: translateY(-2px);
opacity: 0.95;
}
/* ボタン色設定 */
.top-inpath-btn-student {
background-color: #3da568; /* 緑 */
}
.top-inpath-btn-company {
background-color: #e06826; /* オレンジ */
}
/* ボタン内部レイアウト */
.top-inpath-btn-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.top-inpath-btn-texts {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
}
.top-inpath-btn-label {
font-size: 1.50rem;
font-weight: bold;
opacity: 0.9;
margin-bottom: 2px;
}
.top-inpath-btn-main-text {
font-size: 1rem;
font-weight: 700;
}
/* アイコンサイズ */
.top-inpath-icon-user svg,
.top-inpath-icon-building svg {
width: 24px;
height: 24px;
display: block;
}
.top-inpath-icon-arrow {
font-weight: bold;
font-size: 1.2rem;
}
/* --- 実績数値エリア --- */
.top-inpath-stats-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 20px;
}
.top-inpath-stat-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 15px;
}
.top-inpath-stat-num {
font-size: 1.8rem;
font-weight: 700;
line-height: 1;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.top-inpath-stat-desc {
font-size: 0.8rem;
font-weight: 400;
opacity: 0.9;
}
.top-inpath-stat-divider {
width: 1px;
height: 40px;
background-color: rgba(255, 255, 255, 0.4);
}
/* --- スクロールインジケーター --- */
.top-inpath-scroll-indicator {
position: absolute;
bottom: 30px;
z-index: 10;
animation: top-inpath-bounce 2s infinite;
}
.top-inpath-scroll-indicator span {
display: block;
width: 20px;
height: 20px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
@keyframes top-inpath-bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}
/* --- PC・タブレット向けレスポンシブ (768px以上) --- */
@media screen and (min-width: 768px) {
.top-inpath-main-title {
font-size: 3rem; /* PCサイズ用に大きく */
margin-bottom: 24px;
}
.top-inpath-sub-copy {
font-size: 1.1rem;
}
.top-inpath-pc-br {
display: block; /* PCでの改行を有効化 */
}
/* ボタンを横並びに */
.top-inpath-cta-group {
flex-direction: row;
justify-content: center;
max-width: 800px;
gap: 32px;
}
.top-inpath-cta-btn {
width: 320px; /* 固定幅を持たせて整列 */
height: 70px;
padding: 20px 30px;
}
.top-inpath-btn-main-text {
font-size: 1.2rem;
}
/* 実績数値の調整 */
.top-inpath-stats-container {
margin-top: 60px;
}
.top-inpath-stat-item {
padding: 0 40px;
}
.top-inpath-stat-num {
font-size: 2.5rem;
}
.top-inpath-stat-desc {
font-size: 1rem;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）ヒーローエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）セカンドエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-second-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 60px 20px 80px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #0f2540; /* 全体の文字色（濃い紺） */
box-sizing: border-box;
}
/* --- ヘッダーエリア --- */
.top-inpath-second-header {
text-align: center;
margin-bottom: 40px;
}
.top-inpath-second-title {
font-size: 1.6rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-second-subtitle {
font-size: 0.9rem;
color: #4b5563;
margin: 0;
line-height: 1.5;
}
/* --- カードグリッドエリア --- */
.top-inpath-second-grid {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
margin-bottom: 60px;
}
/* カード共通スタイル */
.top-inpath-second-card {
border-radius: 16px;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* うっすら影 */
}
/* 学生カード（左）の配色 */
.top-inpath-second-card-student {
background-color: #f0f7ff; /* 薄い青背景 */
}
/* 企業カード（右）の配色 */
.top-inpath-second-card-company {
background-color: #fffaf5; /* 薄いオレンジ背景 */
}
/* アイコンラッパー */
.top-inpath-second-icon-wrapper {
width: 56px;
height: 56px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #ffffff;
}
.top-inpath-second-icon-green {
background-color: #3da568; /* 緑 */
}
.top-inpath-second-icon-orange {
background-color: #e06826; /* オレンジ */
}
.top-inpath-second-icon-wrapper svg {
width: 30px;
height: 30px;
}
/* カード内テキスト */
.top-inpath-second-card-heading {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #0f2540;
}
.top-inpath-second-card-text {
font-size: 0.95rem;
line-height: 1.8;
color: #334155;
margin: 0 0 16px 0;
}
.top-inpath-second-card-text:last-child {
margin-bottom: 0;
}
.top-inpath-second-highlight {
font-weight: 700;
color: #0f2540;
}
/* --- 下部メッセージボックス --- */
.top-inpath-second-message-box {
position: relative;
border: 3px solid #1A4D80; /* 濃い紺色の枠線 */
border-radius: 20px;
padding: 50px 24px 40px;
text-align: center;
background-color: #ffffff;
}
/* 枠線の上に浮くアイコン */
.top-inpath-second-floating-icon {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%); /* 枠線の真ん中に配置 */
width: 64px;
height: 64px;
background-color: #1A4D80; /* */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.top-inpath-second-floating-icon svg {
width: 32px;
height: 32px;
}
/* メッセージタイトル */
.top-inpath-second-message-title {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.5;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-second-message-desc {
font-size: 0.9rem;
line-height: 1.8;
color: #4b5563;
margin: 0 auto;
max-width: 600px;
}
.top-inpath-second-sp-br {
display: block;
}
/* --- PC・タブレット向けレスポンシブ (768px以上) --- */
@media screen and (min-width: 768px) {
.top-inpath-second-container {
padding: 80px 40px 100px;
}
.top-inpath-second-title {
font-size: 2.2rem;
margin-bottom: 20px;
}
/* カードを2列に */
.top-inpath-second-grid {
grid-template-columns: repeat(2, 1fr);
gap: 40px;
margin-bottom: 80px;
}
.top-inpath-second-card {
padding: 48px 40px;
}
/* 下部メッセージボックス調整 */
.top-inpath-second-message-box {
padding: 60px 60px 50px;
margin-top: 40px;
}
.top-inpath-second-message-title {
font-size: 1.6rem;
margin-bottom: 24px;
}
.top-inpath-second-message-desc {
font-size: 1rem;
}
/* PCでは見出しの改行を消す */
.top-inpath-second-sp-br {
display: none;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）セカンドエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）サードエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-third-container {
width: 100%;
background-color: #f4fbfe; /* 全体の薄い水色背景 */
padding: 80px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #0f2540;
box-sizing: border-box;
text-align: center;
}
/* --- ヘッダーエリア --- */
.top-inpath-third-header {
margin-bottom: 50px;
}
.top-inpath-third-tag {
display: inline-block;
background-color: #47a96e; /* 緑色 */
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.top-inpath-third-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-third-subtitle {
font-size: 0.95rem;
color: #4b5563;
margin: 0;
}
/* --- 特徴カードエリア --- */
.top-inpath-third-features {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
max-width: 1100px;
margin: 0 auto 60px;
}
.top-inpath-third-feature-card {
background-color: #fff;
border-radius: 12px;
padding: 32px 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: center; /* 中央揃え */
text-align: left;
}
/* アイコンボックス */
.top-inpath-third-icon-box {
width: 56px;
height: 56px;
background-color: #47a96e;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-bottom: 20px;
}
.top-inpath-third-icon-box svg {
width: 32px;
height: 32px;
}
/* カードテキスト */
.top-inpath-third-card-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 12px 0;
width: 100%;
text-align: left;
color: #1A4D80;
}
.top-inpath-third-card-desc {
font-size: 0.9rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
width: 100%;
text-align: left;
}
/* --- 利用の流れセクション --- */
.top-inpath-third-flow-section {
background-color: #fff;
border-radius: 20px;
padding: 40px 20px;
max-width: 1100px;
margin: 0 auto 50px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.top-inpath-third-flow-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 40px 0;
color: #1A4D80;
}
.top-inpath-third-flow-steps {
display: flex;
flex-direction: column; /* スマホは縦並び */
align-items: center;
position: relative;
/* スマホ時はgapを使わず、paddingで間隔調整します（矢印エリア確保のため） */
gap: 0;
}
/* 個別のステップ */
.top-inpath-third-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
width: 100%;
max-width: 280px;
z-index: 2;
/* ★修正箇所：スマホ時は下に余白を作り、そこに矢印を配置する */
padding-bottom: 60px;
}
/* 最後のステップは余白不要 */
.top-inpath-third-step:last-child {
padding-bottom: 0;
}
/* ステップ番号の円 */
.top-inpath-third-step-circle {
width: 64px;
height: 64px;
background-color: #47a96e;
color: #fff;
font-size: 1.2rem;
font-weight: 700;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
flex-shrink: 0;
position: relative;
z-index: 2;
box-shadow: 0 4px 10px rgba(71, 169, 110, 0.3);
}
/* ステップごとのテキスト */
.top-inpath-third-step-text {
text-align: center;
}
.top-inpath-third-step-head {
font-size: 1rem;
font-weight: 700;
margin: 0 0 8px 0;
color: #1A4D80;
}
.top-inpath-third-step-sub {
font-size: 0.8rem;
color: #64748b;
margin: 0;
line-height: 1.5;
}
/* --- スマホ用 下向き矢印の修正 --- */
/* 矢印の線（スマホ用） */
.top-inpath-third-step:not(:last-child)::after {
content: "";
position: absolute;
/* ★修正箇所：bottom基準で配置 */
bottom: 10px;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 40px; /* 線の長さ */
background-color: #47a96e;
z-index: 1;
}
/* 矢印の先端（スマホ用） */
.top-inpath-third-step:not(:last-child)::before {
content: "";
position: absolute;
/* ★修正箇所：bottom基準で配置 */
bottom: 10px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
border-bottom: 2px solid #47a96e;
border-right: 2px solid #47a96e;
z-index: 1;
}
/* --- CTAボタンエリア --- */
.top-inpath-third-cta-wrapper {
margin-top: 40px;
}
.top-inpath-third-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #47a96e;
color: #fff;
text-decoration: none;
font-size: 1.1rem;
font-weight: 700;
padding: 18px 40px;
border-radius: 8px;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 4px 10px rgba(71, 169, 110, 0.3);
}
.top-inpath-third-cta-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.top-inpath-third-cta-icon {
margin-right: 12px;
display: flex;
}
.top-inpath-third-cta-icon svg {
width: 24px;
height: 24px;
}
.top-inpath-third-arrow {
margin-left: 12px;
font-weight: bold;
}
/* --- PC・タブレット向けレスポンシブ (900px以上) --- */
@media screen and (min-width: 900px) {
.top-inpath-third-container {
padding: 100px 40px;
}
.top-inpath-third-title {
font-size: 2.2rem;
}
/* 特徴カードを3列に */
.top-inpath-third-features {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.top-inpath-third-feature-card {
padding: 40px 32px;
align-items: flex-start; /* PCでは左揃えを強調 */
}
/* 利用の流れセクション（横並び） */
.top-inpath-third-flow-section {
padding: 60px 40px;
}
.top-inpath-third-flow-steps {
flex-direction: row; /* 横並び */
align-items: flex-start;
justify-content: space-between;
gap: 0;
}
.top-inpath-third-step {
width: 22%; /* 4つ並べるので幅を指定 */
max-width: none;
padding-bottom: 0; /* PCでは下余白リセット */
}
/* ★PC表示時はスマホ用の縦矢印を非表示にする */
.top-inpath-third-step::after,
.top-inpath-third-step::before {
content: none;
display: none;
}
/* PC用の横矢印 (右向き) - 円の横から出す */
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::after {
content: "";
position: absolute;
top: 50%;
left: 100%; /* 円の右側からスタート */
width: calc(100vw / 4 - 80px); /* 画面幅に応じて計算（簡易調整） */
max-width: 180px; /* 最大幅制限 */
min-width: 40px;
height: 1px;
background-color: #47a96e;
transform: translateY(-50%);
z-index: 1;
margin-left: 10px; /* 円との隙間 */
display: block; /* 念の為明示 */
}
/* PC用の矢印先端 (右向き) */
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::before {
content: "";
position: absolute;
top: 50%;
left: 100%;
width: 8px;
height: 8px;
border-top: 2px solid #47a96e;
border-right: 2px solid #47a96e;
transform: translateY(-50%) rotate(45deg);
margin-left: calc(100vw / 4 - 80px + 6px); /* 線の長さに合わせる */
z-index: 1;
display: block;
}
/* メディアクエリ内での矢印位置微調整 */
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::after {
width: 120px;
margin-left: 16px;
}
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::before {
margin-left: 132px;
}
}
/* 1100px以上での微調整（矢印が綺麗に見えるように） */
@media screen and (min-width: 1100px) {
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::after {
width: 160px;
}
.top-inpath-third-step:not(:last-child) .top-inpath-third-step-circle::before {
margin-left: 172px;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）サードエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）フォースエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-forth-container {
width: 100%;
background-color: #fffaf5; /* 非常に薄いオレンジ・ベージュ系背景 */
padding: 80px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #0f2540;
box-sizing: border-box;
text-align: center;
}
/* --- ヘッダーエリア --- */
.top-inpath-forth-header {
margin-bottom: 50px;
}
.top-inpath-forth-tag {
display: inline-block;
background-color: #e06826; /* オレンジ色 */
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.top-inpath-forth-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-forth-subtitle {
font-size: 0.95rem;
color: #4b5563;
margin: 0;
}
/* --- 特徴カードエリア --- */
.top-inpath-forth-features {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
max-width: 1100px;
margin: 0 auto 60px;
}
.top-inpath-forth-feature-card {
background-color: #fff;
border-radius: 12px;
padding: 32px 24px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
align-items: flex-start; /* 左揃え */
text-align: left;
}
/* アイコンボックス */
.top-inpath-forth-icon-box {
width: 56px;
height: 56px;
background-color: #e06826; /* オレンジ色 */
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-bottom: 20px;
}
.top-inpath-forth-icon-box svg {
width: 32px;
height: 32px;
}
/* カードテキスト */
.top-inpath-forth-card-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0 0 12px 0;
color: #1A4D80;
}
.top-inpath-forth-card-desc {
font-size: 0.9rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* --- 導入企業セクション --- */
.top-inpath-forth-logos-container {
background-color: #ffffff;
border-radius: 16px;
padding: 40px 20px;
max-width: 1100px;
margin: 0 auto 60px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.top-inpath-forth-logos-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 12px 0;
color: #1A4D80;
}
.top-inpath-forth-logos-subtitle {
font-size: 0.9rem;
color: #64748b;
margin: 0 0 40px 0;
}
.top-inpath-forth-logos-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
gap: 20px;
}
.top-inpath-forth-logo-item {
background-color: #f8fafc;
border-radius: 8px;
padding: 20px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.top-inpath-forth-logo-icon {
width: 48px;
height: 48px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.top-inpath-forth-logo-icon svg {
width: 24px;
height: 24px;
}
.top-inpath-forth-logo-name {
font-size: 0.75rem;
font-weight: 700;
color: #334155;
}
/* --- 実績バナー（青背景） --- */
.top-inpath-forth-stats-banner {
background: linear-gradient(135deg, #1e3a8a, #3b82f6); /* 濃い青〜青のグラデーション */
border-radius: 16px;
padding: 40px 24px;
max-width: 1100px;
margin: 0 auto 50px;
color: #ffffff;
box-shadow: 0 8px 20px rgba(30, 58, 138, 0.2);
}
.top-inpath-forth-stats-title {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #ffffff;
}
.top-inpath-forth-stats-desc {
font-size: 0.9rem;
line-height: 1.6;
opacity: 0.9;
margin: 0 auto 40px;
max-width: 720px;
color: #ffffff;
}
.top-inpath-forth-stats-items {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 32px;
align-items: center;
}
.top-inpath-forth-stat {
display: flex;
flex-direction: column;
align-items: center;
}
.top-inpath-forth-stat-num {
font-size: 2.2rem;
font-weight: 700;
margin-bottom: 4px;
}
.top-inpath-forth-stat-label {
font-size: 0.85rem;
opacity: 0.8;
}
/* --- CTAボタンエリア --- */
.top-inpath-forth-cta-wrapper {
margin-top: 20px;
}
.top-inpath-forth-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #e06826; /* オレンジ */
color: #fff;
text-decoration: none;
font-size: 1.1rem;
font-weight: 700;
padding: 18px 40px;
border-radius: 8px;
transition: opacity 0.2s, transform 0.2s;
box-shadow: 0 4px 10px rgba(224, 104, 38, 0.3);
}
.top-inpath-forth-cta-btn:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.top-inpath-forth-cta-icon {
margin-right: 12px;
display: flex;
}
.top-inpath-forth-cta-icon svg {
width: 24px;
height: 24px;
}
.top-inpath-forth-arrow {
margin-left: 12px;
font-weight: bold;
}
/* --- PC・タブレット向けレスポンシブ (900px以上) --- */
@media screen and (min-width: 900px) {
.top-inpath-forth-container {
padding: 100px 40px;
}
.top-inpath-forth-title {
font-size: 2.2rem;
}
/* 特徴カードを3列に */
.top-inpath-forth-features {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* 導入企業グリッドを6列に */
.top-inpath-forth-logos-container {
padding: 60px 40px;
}
.top-inpath-forth-logos-grid {
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
/* 実績バナーの数値を横並びに */
.top-inpath-forth-stats-banner {
padding: 60px 40px;
}
.top-inpath-forth-stats-title {
font-size: 1.8rem;
}
.top-inpath-forth-stats-desc {
font-size: 1rem;
}
.top-inpath-forth-stats-items {
flex-direction: row;
justify-content: center;
gap: 80px;
}
.top-inpath-forth-stat-num {
font-size: 3rem;
}
.top-inpath-forth-stat-label {
font-size: 1rem;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）フォースエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）フィフスエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-fifth-container {
width: 100%;
background-color: #ffffff; /* 背景白 */
padding: 80px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #0f2540;
box-sizing: border-box;
}
/* --- ヘッダーエリア --- */
.top-inpath-fifth-header {
text-align: center;
margin-bottom: 50px;
}
.top-inpath-fifth-tag {
display: inline-block;
background-color: #2563eb; /* 鮮やかな青 */
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.top-inpath-fifth-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-fifth-subtitle {
font-size: 0.95rem;
color: #4b5563;
margin: 0;
}
/* --- 3つの特徴カードエリア --- */
.top-inpath-fifth-grid {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
max-width: 1100px;
margin: 0 auto 60px;
}
.top-inpath-fifth-card {
background-color: #f0f7ff; /* 薄い青背景 */
border-radius: 12px;
padding: 32px 24px;
display: flex;
flex-direction: column;
align-items: flex-start;
}
/* アイコンボックス */
.top-inpath-fifth-icon-box {
width: 56px;
height: 56px;
background-color: #1e40af; /* 濃い青 */
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin-bottom: 20px;
}
.top-inpath-fifth-icon-box svg {
width: 28px;
height: 28px;
}
/* カードタイトル・説明 */
.top-inpath-fifth-card-title {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-fifth-card-desc {
font-size: 0.9rem;
line-height: 1.7;
color: #4b5563;
margin: 0 0 24px 0;
}
/* チェックリスト */
.top-inpath-fifth-check-list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.top-inpath-fifth-list-item {
display: flex;
align-items: flex-start;
font-size: 0.85rem;
color: #334155;
margin-bottom: 12px;
line-height: 1.5;
}
.top-inpath-fifth-list-item:last-child {
margin-bottom: 0;
}
.top-inpath-fifth-check-mark {
color: #47a96e; /* 緑色のチェック */
margin-right: 10px;
flex-shrink: 0;
display: flex;
align-items: center;
margin-top: 2px; /* テキストとの位置微調整 */
}
.top-inpath-fifth-check-mark svg {
width: 16px;
height: 16px;
}
/* --- 個人情報保護バナー --- */
.top-inpath-fifth-security-banner {
background-color: #eef9fe; /* 水色（カードより少し薄い、または同じ） */
border-radius: 16px;
padding: 32px 24px;
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 24px;
align-items: center; /* 中央揃え */
}
/* バナー内アイコン（左） */
.top-inpath-fifth-banner-icon {
width: 80px;
height: 80px;
background-color: #3da568; /* 緑色 */
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.top-inpath-fifth-banner-icon svg {
width: 40px;
height: 40px;
}
/* バナー内テキスト（中央） */
.top-inpath-fifth-banner-text-area {
text-align: center; /* スマホは中央揃え */
flex: 1;
}
.top-inpath-fifth-banner-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 12px 0;
color: #1A4D80;
}
.top-inpath-fifth-banner-desc {
font-size: 0.9rem;
line-height: 1.7;
color: #4b5563;
margin: 0;
}
/* バナー内バッジ（右） */
.top-inpath-fifth-banner-badges {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
max-width: 240px; /* スマホでの幅制限 */
}
.top-inpath-fifth-badge-card {
background-color: #fff;
border-radius: 8px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
gap: 6px;
}
.top-inpath-fifth-badge-icon {
width: 24px;
height: 24px;
color: #1e40af;
}
.top-inpath-fifth-badge-text {
font-size: 0.7rem;
font-weight: 700;
color: #334155;
}
/* --- PC・タブレット向けレスポンシブ (900px以上) --- */
@media screen and (min-width: 900px) {
.top-inpath-fifth-container {
padding: 100px 40px;
}
.top-inpath-fifth-title {
font-size: 2.2rem;
}
/* 特徴カードを3列に */
.top-inpath-fifth-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
/* カードの高さを揃える */
.top-inpath-fifth-card {
height: 100%;
box-sizing: border-box;
}
/* バナーを横並びに */
.top-inpath-fifth-security-banner {
flex-direction: row; /* 横並び */
padding: 40px 48px;
align-items: center;
justify-content: space-between;
gap: 40px;
}
.top-inpath-fifth-banner-icon-area {
flex-shrink: 0;
}
.top-inpath-fifth-banner-text-area {
text-align: left; /* PCは左揃え */
}
.top-inpath-fifth-banner-title {
font-size: 1.4rem;
}
.top-inpath-fifth-banner-badges {
width: auto;
flex-shrink: 0;
max-width: none;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）フィフスエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）シックスエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-sixth-container {
width: 100%;
background-color: #ffffff;
padding: 80px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #0f2540;
box-sizing: border-box;
}
/* --- ヘッダーエリア --- */
.top-inpath-sixth-header {
text-align: center;
margin-bottom: 50px;
}
.top-inpath-sixth-tag {
display: inline-block;
background-color: #1e40af; /* 濃い青 */
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 16px;
border-radius: 999px;
letter-spacing: 0.05em;
margin-bottom: 16px;
}
.top-inpath-sixth-title {
font-size: 1.8rem;
font-weight: 700;
margin: 0 0 16px 0;
color: #1A4D80;
}
.top-inpath-sixth-subtitle {
font-size: 0.95rem;
color: #4b5563;
margin: 0;
}
/* --- 記事グリッドエリア --- */
.top-inpath-sixth-grid {
display: grid;
grid-template-columns: 1fr; /* スマホは1列 */
gap: 24px;
max-width: 1100px;
margin: 0 auto 50px;
}
/* カード全体 */
.top-inpath-sixth-card {
background-color: #ffffff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.top-inpath-sixth-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
/* カード全体のリンク化 */
.top-inpath-sixth-card-link-wrapper {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
}
/* 画像エリア */
.top-inpath-sixth-img-wrapper {
position: relative;
width: 100%;
/* ★修正箇所：比率を「3 / 2」に変更して高さを出しました */
/* もっと高くしたい場合は「4 / 3」などに変更してください */
/*aspect-ratio: 4 / 3; */
background-color: #eee;
overflow: hidden;
}
.top-inpath-sixth-img {
width: 100%;
height: 100%;
/* 縦長・横長どんな画像でも比率を崩さず枠を埋める */
object-fit: cover;
/* 画像の中央を中心に表示 */
object-position: center;
}
/* 画像上のタグ */
.top-inpath-sixth-category-tag {
position: absolute;
top: 16px;
left: 16px;
background-color: #ffffff;
color: #0f2540;
font-size: 0.75rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 999px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
z-index: 1;
}
/* コンテンツエリア */
.top-inpath-sixth-content {
padding: 24px;
display: flex;
flex-direction: column;
flex-grow: 1; /* 高さが足りない時に伸びる */
}
/* メタ情報（日付・著者） */
.top-inpath-sixth-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 12px;
}
.top-inpath-sixth-date,
.top-inpath-sixth-author {
display: flex;
align-items: center;
gap: 4px;
}
.top-inpath-sixth-meta svg {
width: 14px;
height: 14px;
opacity: 0.8;
}
/* 記事タイトル */
.top-inpath-sixth-card-title {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.5;
color: #1A4D80;
margin: 0 0 20px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 続きを読むリンク */
.top-inpath-sixth-read-more {
margin-top: auto; /* 一番下に配置 */
font-size: 0.9rem;
font-weight: 700;
color: #1A4D80; /* 青色 */
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
}
.top-inpath-sixth-card:hover .top-inpath-sixth-read-more {
gap: 10px; /* ホバー時に矢印が少し動く演出 */
}
.top-inpath-sixth-read-more svg {
width: 16px;
height: 16px;
}
/* --- ボタンエリア --- */
.top-inpath-sixth-btn-wrapper {
text-align: center;
margin-top: 10px;
}
.top-inpath-sixth-view-all-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
background-color: #ffffff;
color: #1A4D80; /* 青文字 */
border: 2px solid #1A4D80; /* 青枠線 */
text-decoration: none;
font-size: 1rem;
font-weight: 700;
padding: 16px 40px;
border-radius: 8px;
transition: all 0.2s ease;
}
.top-inpath-sixth-view-all-btn:hover {
background-color: #eff6ff; /* ホバー時に薄い青背景 */
transform: translateY(-2px);
}
.top-inpath-sixth-btn-icon {
width: 20px;
height: 20px;
}
.top-inpath-sixth-arrow-icon {
width: 18px;
height: 18px;
}
/* --- PC・タブレット向けレスポンシブ (900px以上) --- */
@media screen and (min-width: 900px) {
.top-inpath-sixth-container {
padding: 0px 40px 100px 40px;
}
.top-inpath-sixth-title {
font-size: 2.2rem;
}
/* グリッドを3列に */
.top-inpath-sixth-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）シックスエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// トップページ（インターンパス）セブンスエリア
/////////////// ここから /////////////////*/
/* --- ベース設定 --- */
.top-inpath-seventh-container {
width: 100%;
/* 左上から右下への青グラデーション */
background: linear-gradient(135deg, #2563eb, #1e3a8a);
padding: 80px 20px;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
color: #ffffff;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.top-inpath-seventh-content {
width: 100%;
max-width: 1000px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- タイトルエリア --- */
.top-inpath-seventh-title {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 20px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
color: #ffffff;
}
.top-inpath-seventh-sp-br {
display: inline; /* スマホでは改行する */
}
.top-inpath-seventh-desc {
font-size: 0.95rem;
line-height: 1.6;
margin: 0 0 40px 0;
opacity: 0.9;
color: #ffffff;
}
/* --- ボタンエリア --- */
.top-inpath-seventh-btn-group {
display: flex;
flex-direction: column; /* スマホは縦並び */
gap: 20px;
width: 100%;
max-width: 320px; /* スマホでのボタン幅制限 */
margin-bottom: 40px;
}
.top-inpath-seventh-btn {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #ffffff;
font-size: 1rem;
font-weight: 700;
padding: 18px 24px;
border-radius: 8px;
transition: transform 0.2s, opacity 0.2s, box-shadow 0.2s;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
width: 100%; /* 親要素に合わせて広げる */
box-sizing: border-box;
}
.top-inpath-seventh-btn:hover {
transform: translateY(-2px);
opacity: 0.95;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}
/* ボタン色設定（これまでのセクションと統一） */
.top-inpath-seventh-btn-company {
background-color: #e06826; /* オレンジ */
}
.top-inpath-seventh-btn-student {
background-color: #3da568; /* 緑 */
}
/* ボタン内アイコン */
.top-inpath-seventh-btn-icon {
margin-right: 10px;
display: flex;
align-items: center;
}
.top-inpath-seventh-btn-icon svg {
width: 20px;
height: 20px;
}
.top-inpath-seventh-arrow {
margin-left: 10px;
font-weight: bold;
}
/* --- 特徴リスト（下部） --- */
.top-inpath-seventh-features {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px 24px; /* 上下左右の間隔 */
}
.top-inpath-seventh-feature-item {
display: flex;
align-items: center;
font-size: 0.85rem;
font-weight: 500;
opacity: 0.9;
}
.top-inpath-seventh-check-icon {
width: 18px;
height: 18px;
margin-right: 6px;
}
/* --- PC・タブレット向けレスポンシブ (768px以上) --- */
@media screen and (min-width: 768px) {
.top-inpath-seventh-container {
padding: 100px 20px;
}
.top-inpath-seventh-title {
font-size: 2.5rem;
margin-bottom: 24px;
}
.top-inpath-seventh-sp-br {
display: none; /* PCでは改行しない */
}
.top-inpath-seventh-desc {
font-size: 1.1rem;
margin-bottom: 50px;
}
/* ボタンを横並びに */
.top-inpath-seventh-btn-group {
flex-direction: row;
justify-content: center;
max-width: none; /* 幅制限解除 */
gap: 32px;
}
.top-inpath-seventh-btn {
width: 300px; /* 固定幅 */
font-size: 1.1rem;
padding: 20px 30px;
}
.top-inpath-seventh-btn-icon svg {
width: 24px;
height: 24px;
}
.top-inpath-seventh-features {
gap: 40px;
}
.top-inpath-seventh-feature-item {
font-size: 0.95rem;
}
}
/*///////////// ここまで ///////////////////
// トップページ（インターンパス）セブンスエリア
////////////////////////////////////////////*/
/*/////////////////////////////////////////////
// ページ上部固定表示バー
/////////////// ここから /////////////////*/
/* モバイルファースト（全デバイス共通） */
.top-announcement-bar {
width: 100%;
height: 25px;
background-color: #ffffff;
display: flex;
align-items: center;
justify-content: left;
box-sizing: border-box;
border-bottom: 1px solid #f0f0f0;
overflow: hidden;
/* --- ここから追従のための追加設定 --- */
position: fixed; /* 画面に対して固定 */
top: 0; /* 一番上に配置 */
left: 0; /* 左端から配置 */
z-index: 9999; /* 他の要素よりも手前に表示（必要に応じて調整） */
margin: 70px 0 0 0;
}
.top-announcement-bar p {
margin: 0;
padding: 0 10px 0 80px;
font-size: 11px;
/* color: #333333; */
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #e06826;
font-weight: 600;
}
.student {
color: #3da568!important;
}
/* PC・タブレット向けの調整 */
@media (min-width: 768px) {
.top-announcement-bar p {
font-size: 12px;
letter-spacing: 0.05em;
}
}
/*///////////// ここまで ///////////////////
// ページ上部固定表示バー
////////////////////////////////////////////*/
/* ==========================================
共通のデザイン（ボタンの見た目）
========================================== */
.side-tab-link {
display: block;
writing-mode: vertical-rl; /* 縦書きキープ */
background-color: #3da568;
color: #fff;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.3em;
border-radius: 8px 0 0 8px;
line-height: 1.5;
text-align: center;
}
/* ==========================================
スマホ用の設定（デフォルト）
========================================== */
.side-tab-sp {
display: block; /* スマホでは表示 */
position: absolute; /* 親要素に対して絶対配置 */
right: 20px; /* 画面の右端に固定 */
top: -50px; /* ページ上部からの距離（お好みで調整） */
z-index: 999;
}
.side-tab-sp .side-tab-link {
padding: 18px 8px; /* スマホで見やすいサイズ感 */
font-size: 14px;
/* 埋まり防止の決定打：
縦書き要素は右端で「右」を基準にするため、
確実に表示されるように最小幅を確保します */
min-width: 1.5em;
}
/* スマホ時はPC用を隠す */
.side-tab-pc {
display: none;
}
/* ==========================================
PC用の設定（768px以上）
========================================== */
@media screen and (min-width: 768px) {
/* PC時はスマホ用を隠す */
.side-tab-sp {
display: none;
}
/* PC用を表示して固定する */
.side-tab-pc {
display: block;
position: fixed; /* 追従させる */
top: 50%;
right: 0px;
transform: translateY(-50%);
z-index: 9999;
}
.side-tab-pc .side-tab-link {
padding: 25px 30px 25px 12px;
font-size: 16px;
transition: 0.3s;
}
.side-tab-pc .side-tab-link:hover {
filter: brightness(1.1);
}
}
/*/////////////////////////////////////////////
// 〇〇
/////////////// ここから /////////////////*/
/****** ここから ******/
/****** ここまで ******/
/****** ここから ******/
/****** ここまで ******/
/*///////////// ここまで ///////////////////
// 〇〇
////////////////////////////////////////////*/
/****** setting start ******/
/****** setting end ******/