タグ）のスタイル --- */
.promo-card-text p {
position: relative; /* 背景（::before）より手前に表示するため */
z-index: 2; /* ::beforeより大きい数字を指定 */
margin: 0;
padding: 0.5rem 0.8rem;
font-size: 1.30rem;
line-height: 1.2;
font-weight: 600;
color: #fff; /* 文字色を白に */
text-align: center;
/* ★複数の影を重ねて、文字のフチを表現します */
text-shadow:
2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000,
2px 0 0 #000,
-2px 0 0 #000,
0 2px 0 #000,
0 -2px 0 #000;
}
/* --- 1番目のカード（左上）を、2番目のカード（右上）の上に重ねる --- */
.video-grid .promo-card:nth-child(1) {
position: relative; /* z-indexを有効にするため */
z-index: 2; /* 重なりの順番を2番目に（数字が大きいほど手前） */
/* ★右側にマイナスの余白を設定し、右隣の要素に重なるようにします */
margin-right: -6%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(1) .promo-card-bubble {
top: 40%;
left: -1%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(1) .promo-card-catchphrase {
bottom: 3%;
left: 44%;
width: 83%;
z-index: 5;
}
/* --- 2番目のカード --- */
.video-grid .promo-card:nth-child(2) {
position: relative; /* z-indexを有効にするため */
margin-left: -6%;
margin-top: -2%;
}
.video-grid .promo-card:nth-child(2) .promo-card-bubble {
top: 11%;
left: 8%;
width: 26%;
}
.video-grid .promo-card:nth-child(2) .promo-card-catchphrase {
bottom: 12%;
left: 54%;
width: 88%;
z-index: 5;
}
/* --- 3番目のカード --- */
.video-grid .promo-card:nth-child(3) {
position: relative; /* z-indexを有効にするため */
margin-left: -6%;
margin-top: -2%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(3) .promo-card-bubble {
top: 4%;
left: 2%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(3) .promo-card-catchphrase {
bottom: 8%;
left: 41%;
width: 75%;
z-index: 5;
}
/* --- 4番目のカード --- */
.video-grid .promo-card:nth-child(4) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -11%;
margin-top: -3%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(4) .promo-card-bubble {
top: 7%;
left: 2%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(4) .promo-card-catchphrase {
bottom: 9%;
left: 52%;
width: 88%;
z-index: 5;
}
/* --- 5番目のカード --- */
.video-grid .promo-card:nth-child(5) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -8%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(5) .promo-card-bubble {
top: 10%;
left: 2%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(5) .promo-card-catchphrase {
bottom: 9%;
left: 51%;
width: 87%;
z-index: 4;
}
/* --- 6番目のカード --- */
.video-grid .promo-card:nth-child(6) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -9%;
margin-top: -2%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(6) .promo-card-bubble {
top: 9%;
left: 1%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(6) .promo-card-catchphrase {
bottom: 14%;
left: 50%;
width: 83%;
z-index: 5;
}
/* --- 7番目のカード --- */
.video-grid .promo-card:nth-child(7) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -12%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(7) .promo-card-bubble {
top: 10%;
left: 2%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(7) .promo-card-catchphrase {
bottom: 9%;
left: 57%;
width: 71%;
z-index: 5;
}
/* --- 8番目のカード --- */
.video-grid .promo-card:nth-child(8) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -9%;
margin-top: -1%;
}
/* 吹き出し */
.video-grid .promo-card:nth-child(8) .promo-card-bubble {
top: 7%;
left: 1%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card:nth-child(8) .promo-card-catchphrase {
bottom: 8%;
left: 49%;
width: 90%;
z-index: 5;
}
/* --- 2段目の画像群 --- */
/* --- 1番目 --- */
.video-grid .promo-card2:nth-child(1) {
position: relative;
z-index: 2;
margin-left: -7%;
margin-top: -1%;
}
/* 吹き出し */
.video-grid .promo-card2:nth-child(1) .promo-card-bubble {
top: 1%;
left: -1%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card2:nth-child(1) .promo-card-catchphrase {
bottom: 11%;
left: 49%;
width: 83%;
z-index: 5;
}
/* --- 2番目のカード --- */
.video-grid .promo-card2:nth-child(2) {
position: relative;
margin-left: -8%;
margin-top: -4%;
z-index: 2;
}
.video-grid .promo-card2:nth-child(2) .promo-card-bubble {
top: 7%;
left: 0%;
width: 25%;
}
.video-grid .promo-card2:nth-child(2) .promo-card-catchphrase {
bottom: 11%;
left: 51%;
width: 89%;
}
/* --- 3番目のカード --- */
.video-grid .promo-card2:nth-child(3) {
position: relative; /* z-indexを有効にするため */
margin-left: -6%;
margin-top: -2%;
}
/* 吹き出し */
.video-grid .promo-card2:nth-child(3) .promo-card-bubble {
top: 6%;
left: -1%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card2:nth-child(3) .promo-card-catchphrase {
bottom: 9%;
left: 50%;
width: 86%;
z-index: 5;
}
/* --- 4番目のカード --- */
.video-grid .promo-card2:nth-child(4) {
position: relative; /* z-indexを有効にするため */
z-index: 1; /* 重なりの順番を1番目に */
margin-left: -11%;
margin-top: -3%;
}
/* 吹き出し */
.video-grid .promo-card2:nth-child(4) .promo-card-bubble {
top: 9%;
left: 0%;
width: 26%;
}
/* キャッチ */
.video-grid .promo-card2:nth-child(4) .promo-card-catchphrase {
bottom: 61%;
left: 59%;
width: 71%;
z-index: 5;
}
/* グリッド内のカードが順番に表示されるように時間差を設定 */
.video-grid .scroll-item:nth-child(1) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(2) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(3) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(4) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(5) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(6) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(7) { transition-delay: 0.1s; }
.video-grid .scroll-item:nth-child(8) { transition-delay: 0.1s; }
/* ============================
カード内画像の表示アニメーション
=============================== */
/* --- アニメーションの準備（最初はすべての画像を非表示に） --- */
.promo-card .promo-card-bg,
.promo-card .promo-card-bubble,
.promo－card .promo－card－catchphrase,
.promo-card2 .promo-card-bg,
.promo-card2 .promo-card-bubble,
.promo-card2 .promo-card-catchphrase {
opacity: 0; /* 最初は透明 */
/* アニメーションの変化を滑らかにする */
transition: transform 0.8s, opacity 0.8s;
}
/* --- アニメーションの実行（.is-visibleが付いたら表示） --- */
/* --- ① サムネイル画像のアニメーション（最終状態）--- */
.promo-card.is-visible .promo-card-bg,
.promo-card2.is-visible .promo-card-bg {
opacity: 1;
transform: translateX(0);
transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- ②-1【左からスライド】させるための初期位置 --- */
/* .slide-from-left を持つカードの中のサムネイルに適用 */
.slide-from-left .promo-card-bg {
transform: translateX(-80px); /* ★最初は左にずらしておく */
}
/* --- ②-2【右からスライド】させるための初期位置 --- */
/* .slide-from-right を持つカードの中のサムネイルに適用 */
.slide-from-right .promo-card-bg {
transform: translateX(80px); /* ★最初は右にずらしておく */
}
/* ② 吹き出し画像：回転しながらポップアップ */
.promo-card.is-visible .promo-card-bubble,
.promo-card2.is-visible .promo-card-bubble {
opacity: 1;
transform: scale(1) rotate(0deg);
transition-delay: 0.2s; /* 0.2秒遅れて開始 */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); /* バネのような動き */
}
/* アニメーション前の初期状態 */
.promo-card .promo-card-bubble,
.promo-card2 .promo-card-bubble {
transform-origin: bottom left; /* 左下を軸に回転・拡大 */
transform: scale(2) rotate(-50deg); /* 小さく、少し回転させておく */
}
/* アニメーション前の初期状態 */
.promo-card .promo-card-catchphrase,
.promo-card2 .promo-card-catchphrase {
opacity: 0;
/* ★中央揃えを維持しつつ、小さくしておく */
transform: translateX(-50%) scale(0.5);
/* is-visibleが付くまでのtransitionは不要なので一旦リセット */
transition: none;
}
/* アニメーションの実行 */
.promo-card.is-visible .promo-card-catchphrase,
.promo-card2.is-visible .promo-card-catchphrase {
opacity: 1; /* 透明を解除 */
/* ★ 新しい pop-and-wobble アニメーションを適用 */
animation-name: pop-and-wobble;
animation-duration: 1.3s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- ★「その場で揺れる」新しいアニメーションの内容を定義 --- */
@keyframes pop-and-wobble {
0% { transform: translateX(-50%) scale(0.7); } /* 初期状態(小さい) */
30% { transform: translateX(-50%) rotate(5deg) scale(1.1); } /* ポップアップして少し揺れる */
50% { transform: translateX(-50%) rotate(-5deg) scale(1.1); }
70% { transform: translateX(-50%) rotate(3deg) scale(1.05); }
100% { transform: translateX(-50%) rotate(0deg) scale(1.0); } /* 最終的な位置に収まる */
}
/* ============================
セクションタイトルの光が走るエフェクト（グリント）
=============================== */
/* --- 1. タイトル画像をエフェクトの基準点にする --- */
.promo-section .section-title {
position: relative;
overflow: hidden;
-webkit-mask-image: -webkit-radial-gradient(white, black);
/* ★★★ ここからがスライドインの設定 ★★★ */
/* 既存のfade-in(下から)を上書きします */
opacity: 0;
transform: translateX(120px); /* ★最初は右に120pxずらしておく */
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
/* --- 2. 表示されたら、本来の位置に戻す --- */
.promo-section .section-title.is-visible {
opacity: 1;
transform: translateX(0); /* ★本来の位置に戻す */
}
/* --- 3. 光（半透明の白い帯）を作成 --- */
.promo-section .section-title::before {
content: '';
position: absolute;
top: 0;
left: -100%; /* 最初は画像の左外に配置 */
width: 75%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
transition: left 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 4. 画像が表示されたら、光を走らせる --- */
.promo-section .section-title.is-visible::before {
left: 120%; /* 光を画像の右外まで移動させる */
/* ★スライドインが終わる頃に光が走り始めるように調整 */
transition-delay: 0.6s;
}
/* --- タブレットサイズ用のレスポンシブ調整 マガちゃん紹介ページ --- */
/* --- タブレット表示用の調整 (幅1150px以下) --- */
@media screen and (max-width: 1150px) {
/* --- 全体のコンテナ --- */
.page-magachan .magachan-container {
padding: 0 3vw; /* 左右の余白を画面幅に連動させる */
}
.page-magachan .yt-logo {
height: 8rem;
}
/* --- ページタイトル --- */
.page-magachan .page-title span {
font-size: 1.8rem;
}
/* --- 統計バー --- */
.stats-bar .stats-item > span {
/*font-size: 1.5rem;*/
font-size: min(2.3vw, 1.5rem);
}
.stats-bar .stats-item > strong {
/*font-size: 3.5rem;*/
font-size: min(4.8vw, 3.5rem);
}
.promo-section {
padding: 40px 0 40px 0;
}
/* --- 導入文 --- */
.promo-section .section-intro {
/*font-size: 1.3rem;*/
font-size: min(2.1vw, 1.6rem);
transform: scale(0.98, 1.8); /* 縦長具合を少し調整 */
margin: 0 auto;
padding: 2.5rem 1rem;
}
.promo-section .section-intro2,
.promo-section .section-intro3 {
/*font-size: 1.5rem;*/
font-size: min(2.3vw, 1.5rem);
}
.promo-section .section-intro2 span {
line-height: 1.4;
/*font-size: 1.2rem;*/
font-size: min(1.9vw, 1.2rem);
}
.promo-section .section-intro3 span {
/*font-size: 1.6rem;*/
font-size: min(2.2vw, 1.4rem);
/* transition-delay: 0.6s; */
}
.promo-section .section-intro4 {
/*font-size: 1.4rem;*/
font-size: min(1.9vw, 1.2rem);
}
/* --- カードグリッド --- */
.video-grid {
gap: 40px 20px; /* カード間の左右の隙間を少し詰める */
margin-left: 2rem;
}
/* --- カード内のテキスト --- */
.promo-card-text p {
font-size: 1.6vw;
padding: 0.4rem 0.5rem;
}
.promo-card-text::before {
border-width: 4px; /* テキストボックスの白い枠線を少し細く */
}
.hall-section {
background-size: 119vw auto, auto;
}
.public-race-section {
background-size: 100vw auto;
}
}
/* --- スマートフォン表示用の調整 (幅768px以下) --- */
@media screen and (max-width: 768px) {
/* --- ページタイトル --- */
.page-header-area {
padding: 20px 15px 40px;
}
.page-magachan .yt-logo {
height: 15vw;
}
.page-magachan .page-title span {
font-size: 4vw; /* 画面幅に応じてサイズが変わるように */
line-height: 1.3;
}
.page-magachan .magachan-container {
padding: 0 2vw;
}
.promo-section {
padding: 0;
}
.promo-section .section-title {
margin-bottom: 0;
margin-top: -11vw;
}
.promo-section .stats-bar {
justify-content: center;
align-items: center;
margin-top: 0.5rem;
line-height: 1.3;
}
.hall-section {
background-size: 127vw auto, auto;
padding: 14.8vw 0;
/* margin-top: 5vw; */
margin-bottom: 12vw;
background-image:
url(https://www.plantopia.co.jp/images/magachan_hallsection_bg01s.png);
}
.public-race-section {
background-size: 103vw auto;
padding: 0.5rem 0;
padding-bottom: 17vw;
background-image:
url(https://www.plantopia.co.jp/images/magachan_hallsection_bg002s.png);
}
/* --- 統計バー --- */
.stats-bar .stats-item > span {
font-size: 5vw;
}
.stats-bar .stats-item > strong {
font-size: 8.7vw;
}
.stats-bar .stats-date {
font-size: 3.5vw;
margin-left: -2.2vw;
padding-top: 3.2vw;
}
/* --- 導入文 --- */
.promo-section .section-intro {
/*font-size: 3.95vw;*/
font-size: min(3.95vw, 1.9rem);
padding: 0 0.5rem;
padding-top: 0.8rem;
line-height: 1.2;
letter-spacing: 0;
/*transform: none !important;*/
}
.promo-section .section-intro.fade-in {
opacity: 0;
transform: translateY(20px); /* ★下からスライドインだけを指定 */
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
transition-delay: 0.4s;
}
/* --- スマホ用のアニメーションの「後」の状態を定義 --- */
.promo-section .section-intro.fade-in.is-visible {
opacity: 1;
transform: translateY(0); /* ★本来の位置に戻す */
}
.promo-section .section-intro2{
font-size: 4vw;
margin-top: 2vw;
margin-bottom: 5vw;
}
.promo-section .section-intro3 {
font-size: 4vw;
margin-top: 3vw;
margin-bottom: 1vw;
}
.promo-section .section-intro2 span,
.promo-section .section-intro4 {
/*font-size: 2.8vw;*/
line-height: 1.3;
font-size: min(2.8vw, 0.8rem);
}
.promo-section .section-intro3 span {
font-size: 3.5vw;
}
.promo-section .section-intro4 {
font-size: 2.8vw;
margin-top: 2vw;
}
/* ★★★ カードグリッドを2列に設定 ★★★ */
.video-grid {
grid-template-columns: 1fr 1fr; /* ★2列レイアウトを維持 */
gap: 22vw 6vw; /* ★スマホ用に隙間を調整 */
margin-left: 0;
}
/* ★カードの重なり具合をスマホ用に浅く調整 */
.video-grid .promo-card:nth-child(1) { margin-right: -11%; }
.video-grid .promo-card:nth-child(2) { margin-left: -9%; margin-top: 0%;}
.video-grid .promo-card:nth-child(3) { margin-left: -1%; margin-right: -10%; margin-top: -3%;}
.video-grid .promo-card:nth-child(4) { margin-left: -10%; margin-top: -3%;}
.video-grid .promo-card:nth-child(5) { margin-left: -2%; margin-right: -8%;}
.video-grid .promo-card:nth-child(6) { margin-left: -11%; margin-top: 0;}
.video-grid .promo-card:nth-child(7) { margin-left: -3%; margin-right: -11%;}
.video-grid .promo-card:nth-child(8) { margin-left: -8%; margin-top: 0;}
.video-grid .promo-card2:nth-child(1) { margin-left: -3%; margin-right: -12%; margin-top: 0;}
.video-grid .promo-card2:nth-child(2) { margin-left: -8%; margin-top: 0;}
.video-grid .promo-card2:nth-child(3) { margin-left: -1%; margin-right: -9%; margin-top: 0;}
.video-grid .promo-card2:nth-child(4) { margin-left: -10%; margin-top: 0;}
/* --- カード内のテキストボックス --- */
.promo-card-text {
width: 90%;
bottom: -59%; /* はみ出し量を調整 */
}
.promo-card-text p {
font-size: 3.4vw;
line-height: 1.3;
padding: 0.3vw 0.3vw;
}
.promo-card-text::before {
border-width: 0.8vw; /* 白枠を細く */
top: 0.5vw;
left: 0.5vw;
right: 0.5vw;
bottom: 0.5vw;
}
/* --- 吹き出し・キャッチ画像の位置とサイズを再調整 --- */
.promo-card-bubble {
width: 45%; /* 少しだけ大きく */
}
.promo-card-catchphrase {
width: 100%; /* 幅を広げてバランスをとる */
}
}
/* ===================================================================
13. じゃんじゃんライタープロフィールページ(.page-writer-profile)
=================================================================== */
/* --- ページ全体の基本設定 --- */
body.page-writer-profile {
background-color: #000;
color: #fff;
}
body.page-writer-profile main {
padding: 0;
background-color: #b2f759;
}
body.page-writer-profile .writer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
padding-bottom: 30px;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
}
/* --- 1. ヘッダー (円形グラフィック) --- */
.writer-header {
position: relative; /* ★ギザギザ画像を配置するための基準点 */
padding: 40px 0 100px 0; /* ★ギザギザ画像の高さ分、下に余白を確保 */
background-image: linear-gradient(to bottom, #797979, #FFFFFF);
overflow: hidden; /* アニメーションのはみ出しを隠す */
}
/* ★ギザギザ画像を疑似要素として作成し、ヘッダーの下部に配置 */
.writer-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 80px; /* ★ギザギザ画像の高さに合わせて調整 */
/*background-image: url('ここに黄色いギザギザ背景のパス');*/
background-repeat: repeat-x;
background-size: auto 100%; /* 高さを100%に合わせる */
z-index: 3; /* 他の要素より手前に表示 */
}
.writer-header .header-graphic {
position: relative;
text-align: center;
}
.writer-header .header-graphic img {
max-width: 600px; /* 画像サイズを調整 */
position: relative; /* transformを適用するための基準 */
/* ★左に15%分ずらします */
transform: translateX(-45%);
}
/* テキストのスタイルをh2タグ用に変更 */
.writer-header .header-graphic h2 {
position: absolute;
top: 50%;
left: 83%;
transform: translate(-50%, -50%);
margin: 0;
width: 100%;
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
color: #39faff;
text-align: left;
text-shadow: 3px 3px 0 #0045f2, 4px 4px 6px rgba(0, 0, 0, 0);
}
/* ヘッダー円形画像の回転・拡大アニメーション*/
/* --- 1. アニメーションの内容を定義 --- */
@keyframes rotate-and-zoom {
0% {
/* translateX(-45%)は既存の位置調整を維持しつつ、回転と拡大を開始 */
transform: translateX(-45%) scale(1) rotate(0deg);
}
50% {
/* アニメーションの中間地点で、1.05倍に拡大し、180度回転 */
transform: translateX(-45%) scale(1.05) rotate(180deg);
}
100% {
/* 最終的に元の大きさに戻り、360度回転を完了 */
transform: translateX(-45%) scale(1) rotate(360deg);
}
}
/* --- 2. 画像にアニメーションを適用 --- */
.writer-header .header-graphic img {
/* ★上で定義したアニメーションを実行 */
animation-name: rotate-and-zoom;
animation-duration: 3s; /* ★30秒かけて1周する、ゆっくりしたアニメーション */
/*animation-iteration-count: infinite;*/ /* ★無限に繰り返す */
animation-timing-function: linear; /* ★一定の速度で動く */
}
/* ヘッダーテキストの右からスライドイン */
/* --- 1. アニメーション前の初期状態 --- */
.writer-header .header-graphic h2 {
opacity: 0; /* 最初は透明 */
/* ★既存の中央揃えのtransformに、右にずらす指定を追加 */
transform: translate(-50%, -50%) translateX(200px);
/* ★アニメーションを滑らかにするための設定 */
transition: transform 3.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s;
transition-delay: 0.6s; /* ページ表示から少し遅れて開始 */
}
/* --- 2. 表示されたら（is-visible）、本来の位置に戻す --- */
/* 親要素(.header-graphic)にis-visibleが付いたらアニメーションを実行 */
.writer-header .header-graphic.is-visible h2 {
opacity: 1; /* 透明を解除 */
/* ★右にずらしていたのを元に戻す */
transform: translate(-50%, -50%) translateX(0);
}
/* --- 2. メイン紹介セクション --- */
.intro-grid-container {
display: grid;
grid-template-columns: 20rem 1fr; /* 左列を固定幅、右列を残り全部に */
gap: 2rem; /* 列の間の隙間 */
align-items: start; /* 上端揃え */
margin-top: -4rem;
position: relative;
}
/* --- WEBサイト一覧ボックス --- */
.web-links-box {
/*background-color: #000;*/
color: #000;
/* padding: 1rem; */
margin-top: 24rem;
}
.web-links-box h4 {
margin: 0 0 0.2rem 0;
color: #000; /* テキストを緑に */
/*font-size: 0.9rem;*/
font-size: min(1vw, 0.9rem);
line-height: 1.4;
}
.web-links-box ul {
list-style: none;
padding: 0;
margin: 0 0 1.4rem 0;
}
.web-links-box li {
font-weight: bold;
line-height: 1.3;
font-size: 0.9rem;
/*font-size: min(0.6vw, 0.9rem);*/
}
/*.intro-right-column {
position: relative;
}
.intro-right-column::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -1.8rem;
width: 0.8rem;
background-color: #000;
}*/
.intro-right-column .name-plate {
position: relative;
}
/* --- .name-plate の左側に線を描画します --- */
.intro-right-column .name-plate::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
/* 左右の列の隙間の中央に線を配置します */
left: -1.8rem;
width: 0.8rem;
background-color: #000;
}
/* --- 右列の名前プレートの調整 --- */
.intro-right-column .name-plate {
flex-wrap: wrap; /* 折り返しを許可 */
justify-content: space-between; /* 左寄せに変更 */
gap: 10px 20px;
}
.follower-count {
/*background-color: #000;*/
color: #000000;
padding: 0 10px;
line-height: 1.2;
position: relative;
width: 40%;
white-space: nowrap;
}
/* --- .follower-count の左側に線を描画します --- */
.follower-count::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
/* 親要素(.name-plate)の隙間(gap)の中央に線を配置します */
left: -0.6rem;
width: 0.3rem;
background-color: #000;
}
.follower-count p {
margin: 0;
/*font-size: 1.3rem;*/
font-size: min(1.1vw, 1.1rem);
font-weight: bold;
}
.follower-count span {
/*font-size: 5rem;*/
font-size: min(5.0vw, 5rem);
font-weight: bold;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
color: #0062ff;
display: inline-block;
transform: scaleX(1.15);
transform-origin: left;
}
.writer-intro-section {
margin-top: -80px; /* ← この数値を調整して、重なり具合を変更します */
position: relative; /* z-indexを有効にするためのおまじない */
z-index: 2; /* ヘッダーより手前に表示 */
background-image: url('https://www.plantopia.co.jp/images/jyanjyan_gizagizatop.png');
background-color: transparent;
background-repeat: repeat-x; /* ★横方向にリピート */
background-position: top center;
background-size: auto; /* ★サイズを自動に */
/* ★上にずらした分、中のコンテンツが上にいきすぎないようにpaddingを調整 */
padding: 180px 0 10px 0; /* 元の100px + ずらした80px */
color: #000;
}
.writer-intro-section::before {
content: '';
position: absolute;
z-index: -1; /* ★コンテンツのさらに後ろ（最背面）に配置します */
/* ★背景色を表示するエリアを指定します */
top: 75px; /* セクションの上から80pxの位置から背景を開始 */
left: 0;
right: 0;
bottom: 0;
/* ★ここに新しい背景色を指定します */
background-color: #b2f759;
border-top: 10px solid #000;
}
/* --- ボックス全体のコンテナ --- */
.special-feature-box {
position: absolute;
top: -20%;
left: -4%;
z-index: 10;
width: 31%;
transition-delay: 0.2s;
}
/* --- 1. アニメーション前の初期状態を !important で強制上書き --- */
body.page-writer-profile .special-feature-box.scroll-item {
opacity: 0; /* 最初は透明 */
/* ★汎用的な .scroll-item の transform と transition を完全に上書きします */
transform: translateX(-50px) !important; /* ★アニメーションの開始位置(左側)を最優先 */
transition: none !important; /* ★汎用の「下から」のアニメーションを最優先で無効化 */
}
/* --- 2. アニメーションの実行 --- */
body.page-writer-profile .special-feature-box.scroll-item.is-visible {
opacity: 1; /* 透明を解除 */
/* ★本来の位置に滑らかに移動させる */
transform: translateX(0) !important;
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s !important;
transition-delay: 0.2s !important;
}
/* --- 上のロゴ画像 --- */
.feature-logo {
display: block; /* 画像下の余白を消す */
width: 100%; /* 親の幅に合わせる */
margin-bottom: -14rem; /* ★テキストボックスをロゴに重ねるためのネガティブマージン */
position: relative;
left: -3%;
z-index: 2; /* テキストボックスより手前に表示 */
}
/* --- 下のテキストコンテンツエリア --- */
.feature-content {
background-color: transparent;
color: #000;
padding: 14.5rem 2.6rem 2.6rem 2.6rem;
margin-right: 1.5rem;
position: relative;
z-index: 1;
/* ★★★ ここからが伸縮するギザギザ枠の指定です ★★★ */
/*border-style: solid;
border-width: 20px;
border-image-source: url('https://www.plantopia.co.jp/images/jyanjyan_gunsingizagizabg.png');
border-image-slice: 20 fill;
border-image-repeat: stretch;*/
}
.feature-content::before {
content: '';
position: absolute;
z-index: -1; /* ★テキストより奥、ギザギザ枠より手前に配置 */
/* ギザギザ枠の内側に配置されるように調整 */
top: 2rem;
left: 2rem;
right: 2rem;
bottom: 2rem;
/* ★ここに水色の背景を指定 */
background-color: #71d0ff;
}
.feature-content::after {
content: '';
position: absolute;
z-index: -2; /* ★一番奥に配置 */
top: 0;
left: 0;
right: 0;
bottom: 0;
/* ★ここにギザギザ枠の指定を移動 */
border-style: solid;
border-width: 20px;
border-image-source: url('https://www.plantopia.co.jp/images/jyanjyan_gunsingizagizabg.png');
border-image-slice: 20 fill;
border-image-repeat: stretch;
}
/* テキストのスタイル */
.feature-content h4 {
margin: -0.6rem 0 0.1rem 0;
font-size: 1.2rem;
/*font-size: min(2.1vw, 1.09rem);*/
font-weight: 900;
color: #000;
}
.feature-content p {
margin: 0;
font-size: 0.8rem;
line-height: 1.4;
font-weight: bold;
color: #000;
}
/* 軍神降臨ボックスのスライドアニメーション */
/* 名前 & タイトル */
/* 文字が表示されるアニメーション */
@keyframes typing {
from { width: 0; } /* 開始時は幅0 */
to { width: 100%; } /* 最終的に幅100%になる */
}
/* カーソルが点滅するアニメーション */
@keyframes caret {
50% { background-color: transparent; } /* ★border-color から background-color に変更 */
}
@keyframes hide-caret {
to { visibility: hidden; }
}
.name-main {
flex: 1 1 50%;
text-align: center;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.name-main h1 {
line-height: 1; /* ★行の高さを文字の高さギリギリにします */
margin-bottom: -1.5rem !important; /* ★h1の下の余白を少し狭くします */
display: inline-block; /* ★幅がテキストの長さに合うように */
font-feature-settings: "palt";
}
/* spanにタイプライターアニメーションを適用 */
.name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative; /* ★カーソル(::after)を配置するための基準点 */
/* ★タイプライターアニメーションのみを実行 */
animation: typing 1.2s steps(5) forwards;
animation-play-state: paused;
transform-origin: center;
font-feature-settings: normal; /* "palt" を一時的に解除 */
}
@keyframes typing {
0% { width: 0; }
99% { width: 100%; font-feature-settings: normal; }
100% { width: 100%; font-feature-settings: "palt"; }
}
/* ★★★ カーソルを疑似要素(::after)として新しく作成 ★★★ */
.name-main h1 span::after {
content: '';
position: absolute;
right: 0; /* ★ span の右端に配置されます */
top: 0;
height: 100%;
width: 4px;
background-color: black;
/* ★最初はアニメーションを停止しておく */
animation-play-state: paused;
}
/* --- 3. アニメーションのトリガー --- */
/* (1444行目あたりを置き換え) */
.name-plate.scroll-item.is-visible h1 span {
animation-play-state: running; /* 文字の再生 */
}
.name-plate h1 span {
animation-play-state: paused;
transform-origin: center;
letter-spacing: 0.03em;
}
/* ★★★ アニメーション終了後にカーソルを消す ★★★ */
.name-plate.scroll-item.is-visible h1 span,
.name-plate.scroll-item.is-visible h1 span::after {
animation-play-state: running; /* ★ span と span::after 両方を再生 */
}
/* ★★★ カーソル用のアニメーション指定を span::after に変更 ★★★ */
.name-plate.scroll-item.is-visible h1 span::after {
/* 1. caretアニメーションを0.7秒間隔で、1.5秒間だけ実行（点滅）
2. hide-caretアニメーションを1.5秒後に実行（非表示にする）
*/
animation: caret 0.7s step-end 1.5s,
hide-caret 0s 1.5s forwards;
animation-play-state: running;
}
.name-main .sub-name {
margin-top: 0; /* ★sub-nameの上の余白をなくします */
}
.name-plate {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
margin-bottom: 2rem;
}
.name-plate h1 {
/*font-size: 5.8rem;*/
/*font-size: min(3.8vw, 5.8rem);*/
font-size: min(5.8rem, 5.6rem);
font-weight: 900;
font-weight: 900;
margin: 0;
text-align: center;
}
.name-plate .sub-name { font-size: 1.5rem; margin: -10px 0 0 0; font-weight: bold; }
.name-plate .birthday-tag img { height: 70px; }
.affiliation{
display: flex; /* ★中身の要素を横一列に並べます */
align-items: center; /* ★テキストとアイコンの高さを中央で揃えます */
gap: 17px; /* ★テキストとアイコンの間に隙間を作ります */
flex-wrap: wrap; /* 画面が狭くなった時に折り返すように */
width: 100%;
border-top: 0.1rem solid #000;
border-bottom: 0.2rem solid #000;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
/*margin-top: 0.5rem;*/
}
.affiliation p {
margin: 0;
font-size: 1.6rem;
/*font-size: min(1vw, 1.6rem);*/
font-weight: 600;
}
.affiliation .sns-icons { display: flex; gap: 0.3rem; }
.affiliation .sns-icons img { height: 28px; transition: opacity 0.3s; }
.affiliation .sns-icons a:hover img { opacity: 0.7; }
/* 中央の画像エリア */
.central-image-area {
position: relative;
text-align: center;
margin-bottom: 2rem;
}
.central-image-area .base-photo { max-width: 800px; }
.central-image-area .overlay-image { position: absolute; }
/* --- .central-image-area のオーバーレイ画像を再配置 --- */
.central-image-area .img-1 {
/*top: 35%; */
left: -17%;
width: 72%; /* 新しい画像に合わせて調整 */
opacity: 0; /* 最初は透明 */
/* ★既存のY軸の位置を維持しつつ、左に100pxずらしておく */
transform: translateX(-100px);
/* ★アニメーションを滑らかにするための設定 */
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
.central-image-area .img-2 {
/*top: 22%; */
right: -5%;
width: 64%;
opacity: 0; /* 最初は透明 */
/* ★既存のY軸の位置を維持しつつ、右に100pxずらしておく */
transform: translateX(100px);
/* ★アニメーションを滑らかにするための設定 */
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
/* 親要素(.central-image-area)に .is-visible が付いたら、本来の位置に戻す */
.central-image-area.is-visible .img-1,
.central-image-area.is-visible .img-2 {
opacity: 1; /* 透明を解除 */
/* ★X軸のずれを0に戻して、本来の位置にスライドさせる */
transform: translateY(-2.5rem) translateX(0);
}
/* ★時間差で表示させるためのディレイ設定 */
.central-image-area.is-visible .img-1 {
transition-delay: 1.2s; /* 先に表示 */
}
.central-image-area.is-visible .img-2 {
transition-delay: 1.4s; /* 少し遅れて表示 */
}
/* --- 1. コンテナの調整 --- */
/* .img-2 クラスがついたdivが、元々の画像と同じ位置・サイズ・アニメーションを引き継ぎます */
div.overlay-image.img-2 {
/* display: block; は img-2 のスタイルで適用されると思いますが念のため */
display: block;
/* 元の画像は absolute でしたが、コンテナも absolute になるよう既存CSSが効きます */
}
/* --- 2. 中の写真をコンテナいっぱいに広げる --- */
.rotating-container .base-photo {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 1;
}
/* --- 3. サークル画像のスタイル --- */
.rotating-container .rotating-circle {
position: absolute;
top: 50%;
left: 50%;
width: 100%; /* 画像より一回り大きく (調整してください) */
height: auto;
z-index: 2;
pointer-events: none;
/* ★回転アニメーションの適用 */
/* translate(-50%, -50%) で中央揃えを維持しながら回転させます */
animation: spin-circle-overlay 20s linear infinite;
}
/* --- 4. 回転アニメーションの定義 --- */
@keyframes spin-circle-overlay {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* 紹介文 */
.intro-text {
/* max-width: 900px; */
margin: 0 auto;
line-height: 1.6;
font-weight: 500;
/* width: 100%; */
border-top: 0.2rem solid #000;
border-bottom: 0.2rem solid #000;
margin-top: 0.5rem;
padding: 1.5rem 1rem;
/*font-size: 1.2rem;*/
font-size: min(1.43vw, 1.08rem);
}
.intro-text p {
padding: 0 1.2rem;
}
/* --- 3 & 4. 写真エリア --- */
.writer-photo-section {
/*padding: 60px 0;*/
/*padding-top: 1.5rem;*/
background-color: #b2f759;
margin-bottom: -18rem;
}
.photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.photo-item {
position: relative;
}
.photo-item img {
width: 100%;
display: block;
}
/*.photo-caption {
position: absolute;
background-color: rgba(255, 255, 255, 0.9);
color: #000;
padding: 15px;
font-weight: bold;
line-height: 1.5;
border: 3px solid #000;
box-shadow: 5px 5px 0 #000;
}
.caption-1 { bottom: 20px; left: -20px; transform: rotate(-3deg); }
.caption-2 { top: 20px; right: -20px; transform: rotate(2deg); }
.caption-3 { top: 20px; left: -20px; transform: rotate(-2deg); }
.caption-4 { bottom: 20px; right: -20px; transform: rotate(3deg); }*/
.collage-container {
position: relative;
height: 1600px; /* ★6枚用に高さを確保 */
}
/* --- 各写真パーツの基本スタイル --- */
.photo-collage-item {
position: absolute;
opacity: 0; /* アニメーション前は非表示 */
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
.photo-collage-item .collage-bg { width: 100%; }
.photo-collage-item .collage-photo1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 85%;
}
.photo-collage-item .collage-photo2 {
position: absolute;
top: 26%;
left: 79%;
transform: translate(-50%, -50%);
width: 43%;
}
.photo-collage-item .collage-photo3 {
position: absolute;
top: 54%;
left: 36%;
transform: translate(-50%, -50%);
width: 70%;
}
.photo-collage-item .collage-photo4 {
position: absolute;
top: 40%;
left: 42%;
transform: translate(-50%, -50%);
width: 45%;
}
.photo-collage-item .collage-photo5 {
position: absolute;
top: 23%;
left: 80%;
transform: translate(-50%, -50%);
width: 22%;
}
.photo-collage-item .collage-photo6 {
position: absolute;
top: 18%;
left: 57%;
transform: translate(-50%, -50%);
width: 27%;
}
.writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
.collage-caption p {
padding: 0;
}
/* --- ★各パーツの最終的なレイアウトを指定 --- */
.writer-photo-section .item-1 { top: 0; left: 0; width: 40%; transform: rotate(-8deg); z-index: 2; transition-delay: 0.1s; }
.writer-photo-section .item-2 { top: 0; right: 0; width: 45%; transform: rotate(6deg); z-index: 1; transition-delay: 0.2s; }
.writer-photo-section .item-3 {
top: 6.5%;
left: -20px;
width: 52%;
transform: rotate(4deg);
z-index: 4;
transition-delay: 0.3s;
}
.writer-photo-section .item-4 {
top: 17.9%;
right: 1%;
width: 57%;
transform: rotate(-5deg);
z-index: 3;
transition-delay: 0.4s;
}
.writer-photo-section .item-5 {
top: 43%;
left: -2%;
width: 66%;
transform: rotate(-3deg);
z-index: 6;
transition-delay: 0.5s;
}
.writer-photo-section .item-6 {
top: 55%;
right: 0%;
width: 42%;
transform: rotate(5deg);
z-index: 5;
transition-delay: 0.6s;
}
/* --- ★各キャプションの位置を指定 --- */
.writer-photo-section .item-2 .collage-caption {
/* ★縦書き（右上から左下へ）に設定 */
writing-mode: vertical-rl;
top: 2%;
left: -17%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(-9deg);
z-index: 10;
padding: 0.8rem 0;
}
.writer-photo-section .item-3 .collage-caption {
top: 85%;
left: 13%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(5deg);
z-index: 10;
padding: 0 0.8rem;
}
.writer-photo-section .item-4 .collage-caption {
top: 75%;
left: 46%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #d0dd99;
padding: 0;
/* transform: rotate(-5deg); */
z-index: 10;
padding: 0 0.8rem;
}
.writer-photo-section .item-5 .collage-caption {
top: 62%;
left: 30%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(-11deg);
z-index: 10;
padding: 0 0.8rem;
}
/* =======================================================
★スライドインアニメーションの設定
========================================================== */
/* --- アニメーション前の初期位置を指定 --- */
.writer-photo-section .item-1.scroll-item { transform: translate(-100px, -100px) rotate(-8deg); } /* 左上から */
.writer-photo-section .item-2.scroll-item { transform: translate(100px, -100px) rotate(6deg); } /* 右上から */
.writer-photo-section .item-3.scroll-item { transform: translateX(-50px) rotate(4deg); } /* 左から */
.writer-photo-section .item-4.scroll-item { transform: translateX(100px) rotate(-5deg); } /* 右から */
.writer-photo-section .item-5.scroll-item { transform: translate(-100px, 100px) rotate(-3deg); } /* 左下から */
.writer-photo-section .item-6.scroll-item { transform: translate(100px, 100px) rotate(5deg); } /* 右下から */
/* --- 表示されたら（is-visible）、透明度を1に戻す --- */
/* transformの値は、上のレイアウト指定が最終地点になるのでopacityだけでOK */
.writer-photo-section .photo-collage-item.scroll-item.is-visible {
opacity: 1;
}
/* --- 共通アニメーション --- */
body.page-writer-profile .scroll-item {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 1s;
}
body.page-writer-profile .scroll-item.is-visible {
opacity: 1;
transform: translateY(0);
}
body.page-writer-profile .slide-from-left.is-visible { transform: translateX(0); opacity: 1; }
body.page-writer-profile .slide-from-right.is-visible { transform: translateX(0); opacity: 1; }
body.page-writer-profile .slide-from-left { transform: translateX(-50px); opacity: 0; }
body.page-writer-profile .slide-from-right { transform: translateX(50px); opacity: 0; }
/* --- 1. アニメーションの内容を定義 --- */
/* 左から回転しながらスライドイン */
@keyframes slide-in-rotate-from-left {
from { opacity: 0; transform: translate(-200px, -50%) rotate(-90deg); }
to { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
}
@keyframes slide-in-rotate-from-right {
from { opacity: 0; transform: translate(0, -50%) rotate(90deg); }
to { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
}
/* 右からスライドイン */
@keyframes slide-in-rotate-from-right {
from { opacity: 0; transform: translate(0, -50%) rotate(90deg); }
to { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
}
/* item-3用の特別なスライドイン */
@keyframes slide-in-rotate-from-far-left {
from { opacity: 0; transform: translate(-250px, -50%) rotate(-90deg); }
to { opacity: 1; transform: translate(-50%, -50%) rotate(0deg); }
}
/* 時計回りの回転 */
@keyframes spin-in-place {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* ★★★ 新しく追加：反時計回りの回転 ★★★ */
@keyframes spin-in-place-reverse {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(-360deg); } /* ★角度をマイナスに */
}
/* --- 2. アニメーション前の初期状態を設定 --- */
/* ★セレクタを .anim-photo に変更 */
.writer-photo-section .anim-photo {
opacity: 0; /* 最初は透明 */
}
/* --- 3. 各画像にアニメーションを適用 --- */
/* .is-visible になったらアニメーションを開始 */
/* ★セレクタを .anim-photo に変更 */
/* item-2 (右上) */
.writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* item-3 (中央左) */
.writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* item-4 (中央右) */
.writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* item-5 (左下) */
.writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* item-6 (右下) */
.writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* ★もっと左からスライドインするための、新しいキーフレーム */
@keyframes slide-in-rotate-from-far-left {
from {
opacity: 0;
/* ★移動距離を -100px から -250px に変更 */
transform: translate(-250px, -50%) rotate(-90deg);
}
to {
opacity: 1;
/* ★最終的な中央配置はそのまま */
transform: translate(-50%, -50%) rotate(0deg);
}
}
/* ★その場で回転し続けるための、新しいキーフレーム */
@keyframes spin-in-place {
from {
/* 中央配置を維持したまま回転開始 */
transform: translate(-50%, -50%) rotate(0deg);
}
to {
/* 360度回転 */
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* --- 2つのアニメーションを適用回転し続ける --- */
/* item-2 (反時計回り) */
.writer-photo-section .item-2.is-visible .anim-photo {
animation:
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
spin-in-place-reverse 15s linear 1.6s infinite; /* ★逆回転のアニメーション名を指定 */
}
/* item-3 (時計回り) */
.writer-photo-section .item-3.is-visible .anim-photo {
animation:
slide-in-rotate-from-far-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
spin-in-place 15s linear 1.7s infinite;
}
/* item-4 (反時計回り) */
.writer-photo-section .item-4.is-visible .anim-photo {
animation:
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
spin-in-place-reverse 15s linear 1.8s infinite; /* ★逆回転のアニメーション名を指定 */
}
/* item-5 (時計回り) */
.writer-photo-section .item-5.is-visible .anim-photo {
animation:
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
spin-in-place 15s linear 1.9s infinite;
}
/* item-6 (反時計回り) */
.writer-photo-section .item-6.is-visible .anim-photo {
animation:
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.8s,
spin-in-place-reverse 15s linear 2.0s infinite; /* ★逆回転のアニメーション名を指定 */
}
/* --- 5. お問い合わせセクション --- */
/* --- お問い合わせセクションの背景 --- */
.writer-cta-section {
background-color: #b2f759; /* 背景の緑色 */
/*padding: 50px 0;
border-top: 2px solid #000;*/
}
/* --- コンテンツ全体のラッパー --- */
.cta-inner-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
background-color: #b9b9f9;
padding: 1rem;
border: 0.2rem solid #000000;
padding-bottom: 7rem;
margin-bottom: -9rem;
position: relative;
z-index: 5;
}
/* --- 左側のボックス --- */
.cta-box-featured {
/* ★レイアウトをFlexboxに変更 */
display: flex;
align-items: center; /* ★上下中央揃え */
justify-content: center; /* ★左右中央揃え */
gap: 13px; /* ★要素間の隙間 */
background-color: transparent;
border: none;
padding: 0;
}
.cta-title {
border-style: solid;
border-width: 22px;
border-image-source: url('https://www.plantopia.co.jp/images/jyanjyan_toiawasebg.png');
border-image-slice: 17 fill;
border-image-repeat: stretch;
color: #000000;
font-weight: 900;
font-size: 1.5rem;
/* padding: 10px 20px; */
text-align: center;
white-space: nowrap;
}
.cta-message {
display: flex;
align-items: center;
gap: 15px;
}
.cta-message img {
height: 70px; /* ロボットアイコンの高さ */
}
.cta-message p {
margin: 0;
font-weight: 900;
color: #0045f2; /* テキストの青色 */
line-height: 1.6;
font-size: 1.2rem;
white-space: nowrap;
}
/* --- 右側の連絡先 --- */
.cta-details {
font-weight: 900;
/*font-size: 1.3rem;*/
font-size: min(1.4vw, 1.2rem);
line-height: 1.2;
color: #000;
}
.cta-details p {
margin: 0;
}
/* --- 黒いギザギザの区切り線 --- */
.jagged-divider {
height: 75px; /* ギザギザ画像の高さ */
background-image: url('https://www.plantopia.co.jp/images/jyanjyan_gizagizabottom.png');
/*background-color: #b2f759;*/
background-repeat: repeat-x;
background-position: bottom center;
background-size: auto;
background-size: auto 100%; /* 高さを100%に合わせる */
margin-bottom: -1px;
position: relative;
z-index: 6;
}
/* --- ボックス全体のコンテナ --- */
.recruitment-box {
position: absolute;
bottom: 16%;
right: 1%;
top: auto;
left: auto;
/* width: 220px; */
height: 220px;
z-index: 15;
/*transition-delay: 0.8s;*/
}
.recruitment-box .recruitment-bg {
width: 100%;
height: 100%;
}
.recruitment-box .recruitment-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
color: #000;
margin-top: 10px;
}
.recruitment-content h4 {
margin: 0 0 15px 0;
font-size: 1.1rem;
font-weight: 900;
}
.recruitment-content ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
display: inline-block;
}
.recruitment-content li {
font-size: 1rem;
font-weight: bold;
line-height: 1.8;
}
a.recruitment-box {
display: block; /* 枠全体をしっかり確保する */
text-decoration: none; /* リンク特有の下線を消す */
color: inherit; /* 文字色が青色に変わるのを防ぐ */
transition: opacity 0.3s ease, transform 0.3s ease; /* アニメーションの設定 */
}
/* マウスを乗せた時の動き（押せる感を出す） */
a.recruitment-box:hover {
opacity: 0.8; /* 少しだけフワッと透ける */
transform: scale(0.98); /* ボタンのように少しだけ凹む */
}
/* スマホなどでタップした時の文字色もキープする */
a.recruitment-box .recruitment-content h4,
a.recruitment-box .recruitment-content ul li {
color: #333333; /* ※元のテキスト色に合わせて適宜変更してください */
}
/* --- 1. アニメーション前の初期状態 --- */
body.page-writer-profile .recruitment-box.scroll-item {
opacity: 0; /* 最初は透明 */
transform: translateX(60px);
transition: none;
/* ★is-visibleが付与された時に、下で定義したアニメーションを実行 */
animation-fill-mode: forwards; /* アニメーション後、最後の状態を維持 */
}
/* --- 2. アニメーションの実行 --- */
.recruitment-box.scroll-item.is-visible {
/* ★下で定義した slide-and-shake アニメーションを適用 */
animation-name: slide-and-shake;
animation-duration: 1.5s; /* アニメーション全体の時間 */
animation-delay: 1.5s; /* 0.8秒遅れて開始 */
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 3. ★「スライドインして震える」アニメーションの内容を定義 --- */
@keyframes slide-and-shake {
/* アニメーション開始時 (0%) */
0% {
opacity: 0;
transform: translateX(60px); /* ★最初は右に200pxずらしておく */
}
/* アニメーションの途中 (60%) */
60% {
opacity: 1;
transform: translateX(0); /* ★本来の位置にスライドイン */
}
/* ブルブル震える動き */
70% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
90% { transform: translateX(-3px); }
/* アニメーション終了時 (100%) */
100% {
opacity: 1;
transform: translateX(0); /* 最終的に元の位置に静止 */
}
}
/* ===================================================================
13.じゃんじゃんプロフィール 女性バージョン (配色変更) .theme-female
=================================================================== */
body.page-writer-profile.theme-female main {
background-color: #efafef;
}
/* 見出しの文字色をピンクに */
.theme-female .writer-header .header-graphic h2 {
color: #ffc5ff;
text-shadow: 3px 3px 0 #ff0000, 4px 4px 6px rgba(0, 0, 0, 0);
}
/* 見出しの帯の色をピンクに */
.theme-female .profile-title-pc div.scroll-item .heading-line {
background-color: #ff51ac;
}
/* セクション見出しの色をピンクに */
.theme-female .profile-section h2 {
color: #ce1e59;
}
/* シャッターアニメーションの色をピンクに */
.theme-female .profile-title-pc h1::after {
background-color: #ce1e59;
}
/* その他、背景色などを変更したい場合 */
.theme-female main {
/* background-color: #ffeef5; */ /* 例: 薄いピンク背景 */
}
.theme-female .writer-intro-section::before {
background-color: #efafef;
border-top: 10px solid #000;
}
.theme-female .writer-photo-section {
background-color: #efafef;
}
/* --- お問い合わせセクションの背景 --- */
.theme-female .writer-cta-section {
background-color: #efafef;
}
/* ギザギザ区切り線の基本スタイル */
.jagged-divider-pink {
width: 100%;
/* ★ jyanjyan_gizagizamiddle.png の高さに合わせて調整 */
height: 93px;
/* 画像の設定 */
background-image: url('https://www.plantopia.co.jp/images/jyanjyan_gizagizamiddle.png');
background-repeat: repeat-x; /* 横に繰り返す */
background-position: bottom center; /* 下揃え */
background-size: auto 100%; /* 高さを合わせる */
/* ★ 背景色をピンクに指定 (#ff00ff は gigigi.jpg の色に近い色に変更してください) */
background-color: #efafef;
/* 配置の調整 */
position: relative;
z-index: 4; /* 写真セクションより手前に */
margin-bottom: -2px; /* 下のセクションとの隙間を埋める */
display: none;
}
/* ===================================================================
13.じゃんじゃんプロフィール ライター個別調整
=================================================================== */
/* --- フェアリン専用 (.profile-fairrin) --- */
/* フェアリン専用：ヘッダーテキストに長体をかける */
.profile-fairrin .writer-header .header-graphic h2 {
/* transformを効かせるための設定 */
display: inline-block;
width: auto;
white-space: nowrap;
/* ★ここで個別に長体を設定 (0.85) */
/* translate(-50%, -50%) は中央揃えの位置調整です */
transform: translate(-50%, -50%) translateX(200px) scaleX(0.78);
left: 65%;
/* 初期状態は透明 */
opacity: 0;
}
/* --- 2. アニメーション実行時（.is-visibleが付いた時） --- */
.profile-fairrin .writer-header .header-graphic.is-visible h2 {
/* ★長体を維持したまま、元の位置(0)に戻す */
transform: translate(-50%, -50%) translateX(0) scaleX(0.78);
/* 不透明にする */
opacity: 1;
}
/* --- フェアリン プロフィール画像 回転サークル装飾 (.profile-fairrin) --- */
/* --- 1. コンテナの調整 --- */
.profile-fairrin .rotating-container-fairrin {
position: relative; /* 位置調整(left, top)を効かせるため */
display: inline-block;
/* ★★★ ここで大きさや位置を自由に調整できます ★★★ */
width: 125%; /* 画像の大きさ */
left: -22%; /* 位置を左にずらす (マイナスで左へ) */
top: -1.6rem;
max-width: none; /* 最大幅の制限を解除 */
/* --- アニメーションの初期状態 --- */
opacity: 0; /* 最初は透明 */
transform: translateX(100px); /* 左に100pxずらしておく */
/* アニメーションの設定 */
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
body.profile-fairrin .writer-container {
padding-bottom: 5px;
}
/* --- 上のロゴ画像 --- */
.profile-fairrin .feature-logo {
left: -8%;
}
.profile-fairrin .name-plate h1 {
/*padding-left: 1.2rem;
padding-right: 1.2rem;*/
text-align: center;
}
.profile-fairrin .name-main h1 span b {
margin-right: -0.3vw;
}
/* --- 1.1 アニメーション実行後の状態 --- */
/* 親要素(.central-image-area)が表示されたら実行 */
.profile-fairrin .central-image-area.is-visible .rotating-container-fairrin {
opacity: 1; /* 透明を解除 */
transform: translateX(0); /* 本来の位置にスライドイン */
}
/* --- 2. メイン写真 --- */
.profile-fairrin .base-photo {
width: 100%;
height: auto;
display: block;
position: relative;
z-index: 1;
}
/* --- 3. 回転サークル --- */
.profile-fairrin .rotating-circle-fairrin {
position: absolute;
z-index: 2;
pointer-events: none;
/* サークルの位置とサイズ */
width: 50%;
top: 47%;
right: -24%;
/* 回転アニメーション */
animation: spin-circle-overlay 20s linear infinite;
}
.profile-fairrin .central-image-area {
margin-bottom: -4rem;
z-index: 20;
}
.profile-fairrin .central-image-area .base-photo { max-width: 1200px; }
/* --- イントロテキスト --- */
.profile-fairrin .intro-text {
text-align: center;
position: relative; /* 線の基準点 */
/*display: inline-block;*/
}
/* --- 上の行 (.intro-line-top) --- */
.profile-fairrin .intro-text .intro-line-top {
display: inline-block; /* transformを効かせるために必要 */
/* ★文字サイズ */
font-size: 2.00rem;
font-weight: 900;
/* ★長体（横幅の倍率） 1.0=等倍, 0.9=90%縮小 */
transform: scaleX(1.0);
transform-origin: center; /* 変形の基準点 */
/* 行間など */
line-height: 1.2;
/*margin-bottom: 0.5rem;*/
}
/* --- 下の行 (.intro-line-bottom) --- */
.profile-fairrin .intro-text .intro-line-bottom {
display: inline-block; /* transformを効かせるために必要 */
/* ★文字サイズ */
font-size: 2.92rem;
font-weight: 900;
/* ★長体（横幅の倍率） */
transform: scaleX(1.33); /* 例：少し横に縮める */
transform-origin: center;
/* 行間など */
line-height: 1.2;
}
/* --- 下段テキストの上に黒い線を追加 --- */
/*.profile-fairrin .intro-text {
position: relative;
display: inline-block;
margin-top: 1.5rem;
}*/
.profile-fairrin .intro-text::before {
content: '';
position: absolute;
/* --- 線の位置とサイズ --- */
top: -1.2rem; /* テキストの少し上 */
left: 40%; /* 中央揃えの基準 */
transform: translateX(-50%); /* ど真ん中に配置 */
width: 43%; /* 線の幅 (テキストより少し広くするなら100%以上で) */
/* max-width: 800px; */ /* 必要なら最大幅を指定 */
height: 2.0rem; /* ★線の太さ */
background-color: #000; /* ★線の色 */
display: none;
}
/* --- ★ライター写真位置を指定(フェアリン) --- */
.profile-fairrin .writer-photo-section .item-1 {
top: -1.5%;
left: -1%;
width: 57%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-fairrin .writer-photo-section .item-2 {
top: -0.5%;
right: -1%;
width: 49%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-fairrin .writer-photo-section .item-3 {
top: 25.5%;
left: -1%;
width: 20%;
z-index: 4;
transition-delay: 0.3s;
}
.profile-fairrin .writer-photo-section .item-4 {
top: 23%;
right: 18%;
width: 46%;
z-index: 5;
transition-delay: 0.4s;
}
.profile-fairrin .writer-photo-section .item-5 {
top: 38.5%;
left: -1%;
width: 41%;
z-index: 4;
transition-delay: 0.5s;
}
.profile-fairrin .writer-photo-section .item-6 {
top: 60.5%;
left: 22%;
width: 46%;
z-index: 1;
transition-delay: 0.6s;
}
.profile-fairrin .writer-photo-section .item-7 {
top: 42%;
right: -3%;
width: 52%;
z-index: 1;
transition-delay: 0.7s;
}
/* --- ★各キャプションの位置を指定(フェアリン) --- */
.profile-fairrin .writer-photo-section .item-1 .collage-caption {
top: 5%;
left: 23%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
/* transform: rotate(5deg); */
z-index: 10;
padding: 0 0.8rem;
}
.profile-fairrin .writer-photo-section .item-2 .collage-caption {
/* ★縦書き（右上から左下へ）に設定 */
writing-mode: vertical-rl;
text-orientation: mixed;
top: 59%;
left: 64%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(0deg);
z-index: 10;
padding: 0.8rem 0;
margin-bottom: -20rem;
}
.tate-bou {
display: inline-block;
transform: rotate(90deg);
/*margin: -0.1em 0;*/ /* 文字の上下の隙間を微調整 */
}
.profile-fairrin .writer-photo-section .item-4 .collage-caption {
top: 9%;
left: -35%;
bottom: auto;
width: 52%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
background-color: #dfbaf7;
padding: 0.5rem;
z-index: 10;
}
.profile-fairrin .writer-photo-section .item-5 .collage-caption {
top: 77%;
left: 0%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #e8f4ba;
padding: 0;
transform: rotate(0deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(フェアリン) --- */
.profile-fairrin .photo-collage-item .collage-bg { width: 100%; }
.profile-fairrin .photo-collage-item .collage-photo1 {
position: absolute;
top: 50%;
left: 49%;
width: 37%;
}
.profile-fairrin .photo-collage-item .collage-photo2 {
position: absolute;
top: 37%;
left: 66%;
width: 73%;
}
.profile-fairrin .photo-collage-item .collage-photo4 {
position: absolute;
top: 40%;
left: 40%;
width: 90%;
}
.profile-fairrin .photo-collage-item .collage-photo5 {
position: absolute;
top: 35%;
left: 34%;
width: 57%;
}
.profile-fairrin .photo-collage-item .collage-photo7 {
position: absolute;
top: 46%;
left: 70%;
width: 44%;
}
.profile-fairrin .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(フェアリン) --- */
/* item-1 (左上) */
.profile-fairrin .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-fairrin .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中央右) */
.profile-fairrin .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-fairrin .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-7 (右下) */
.profile-fairrin .writer-photo-section .item-7.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-fairrin .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
/* メイン画像のオーバーレイ位置調整 */
/*.profile-fairrin .central-image-area .img-1 {
top: 20%;
left: -10%;
transform: rotate(5deg);
}
.profile-fairrin .central-image-area .img-2 {
top: 60%;
right: 0%;
}*/
/* コラージュ写真の位置調整 */
/*.profile-fairrin .item-1 {
top: 5%; left: 5%; width: 45%;
}
.profile-fairrin .item-2 {
top: 10%; right: 5%; width: 40%;
}*/
/* --- 別のライター専用 (.profile-shino) --- */
/*.profile-shino .central-image-area .img-1 {
top: 10%;
left: 0%;
}*/
/* --- レビン専用 (.profile-levin) --- */
.profile-levin .name-plate h1 {
/*width: 25vw;*/
/*padding-left: 2rem;
padding-right: 4rem;*/
text-align: center;
}
.profile-levin .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-levin .name-main {
margin-left: -2rem;
}
/* --- 名前の文字 (span) のスタイル --- */
.profile-levin .name-plate h1 span {
display: inline-block; /* transformを効かせるため */
/* ★長体をかける (1.0より小さい値で細くなります) */
transform: scaleX(1.21);
transform-origin: center; /* 中央を基準に変形 */
/* ★文字の間隔をあける */
letter-spacing: 0.3em;
margin-right: -0.3em; /* 最後の文字の右余白を打ち消してバランスを取る */
}
/* --- イントロテキスト --- */
.profile-levin .intro-text {
text-align: center;
position: relative; /* 線の基準点 */
/*display: inline-block;*/
}
/* --- 上の行 (.intro-line-top) --- */
.profile-levin .intro-text .intro-line-top {
display: inline-block;
font-size: 1.72rem;
font-weight: 900;
transform: scaleX(0.98);
transform-origin: center;
line-height: 1.2;
/*margin-bottom: 0.5rem;*/
}
/* --- 下の行 (.intro-line-bottom) --- */
.profile-levin .intro-text .intro-line-bottom {
display: inline-block;
font-size: 2.65rem;
font-weight: 900;
transform: scaleX(0.99);
transform-origin: center;
line-height: 1.2;
}
.profile-levin .central-image-area .img-1 {
left: -13%;
}
.profile-levin .rotating-container .base-photo {
width: 94%;
top: 8%;
right: -2%;
}
.profile-levin .central-image-area .img-2 {
top: 1.2rem;
right: -4%;
width: 68%;
}
/* --- ★ライター写真位置を指定(レビン) --- */
.profile-levin .writer-photo-section .item-1 {
top: -3.5%;
left: -1%;
width: 49%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-levin .writer-photo-section .item-2 {
top: -3.5%;
right: -1%;
width: 61%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-levin .writer-photo-section .item-3 {
top: 34.5%;
left: -1%;
width: 30%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-levin .writer-photo-section .item-4 {
top: 26%;
right: 30%;
width: 49%;
z-index: 5;
transition-delay: 0.4s;
}
.profile-levin .writer-photo-section .item-5 {
top: 48.5%;
left: -1%;
width: 54%;
z-index: 5;
transition-delay: 0.5s;
}
.profile-levin .writer-photo-section .item-6 {
top: 36.5%;
left: 48%;
width: 52%;
z-index: 1;
transition-delay: 0.6s;
}
/* --- ★各キャプションの位置を指定(レビン) --- */
.profile-levin .writer-photo-section .item-1 .collage-caption {
writing-mode: vertical-rl;
top: 3%;
left: 65%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-levin .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 82%;
/* right: 0%; */
left: 49%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #d0dd99;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-levin .writer-photo-section .item-5 .collage-caption {
top: 74%;
left: 19%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(レビン) --- */
.profile-levin .photo-collage-item .collage-bg { width: 100%; }
.profile-levin .photo-collage-item .collage-photo1 {
position: absolute;
top: 27%;
left: 25%;
width: 40%;
}
.profile-levin .photo-collage-item .collage-photo2 {
position: absolute;
top: 43%;
left: 67%;
width: 64%;
}
.profile-levin .photo-collage-item .collage-photo3 {
position: absolute;
top: 31%;
left: 28%;
width: 44%;
}
.profile-levin .photo-collage-item .collage-photo4 {
position: absolute;
top: 28%;
left: 51%;
width: 45%;
}
.profile-levin .photo-collage-item .collage-photo5 {
position: absolute;
top: 30%;
left: 42%;
width: 52%;
}
.profile-levin .photo-collage-item .collage-photo6 {
position: absolute;
top: 18%;
left: 61%;
width: 31%;
}
.profile-levin .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(レビン) --- */
/* item-1 (左上) */
.profile-levin .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-levin .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左) */
.profile-levin .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-4 (中央右) */
.profile-levin .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-levin .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-6 (右下) */
.profile-levin .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-levin .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
/* --- しのけん専用 (.profile-shinoken) --- */
.profile-shinoken .name-plate h1 {
/*padding-left: 0.5rem;
padding-right: 0.5rem;*/
text-align: center;
}
.profile-shinoken .name-plate h1 span {
display: inline-block;
transform: scaleX(1.1);
transform-origin: center;
letter-spacing: 0.2em;
margin-right: 0.1em;
}
.profile-shinoken .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(4) forwards;
animation-play-state: paused;
}
.profile-shinoken .intro-text {
text-align: center;
position: relative;
/* display: inline-block; */
}
.profile-shinoken .intro-text .intro-line-top {
display: inline-block;
font-size: 2.92rem;
font-weight: 900;
transform: scaleX(1.1);
transform-origin: center;
line-height: 1.2;
/* margin-bottom: 0.5rem; */
}
.profile-shinoken .intro-text .intro-line-bottom {
display: inline-block;
font-size: 1.78rem;
font-weight: 900;
transform: scaleX(1.0);
transform-origin: center;
line-height: 1.2;
}
.profile-shinoken .feature-logo {
left: -5%;
}
.profile-shinoken .central-image-area .img-1 {
left: -17%;
width: 77%;
}
.profile-shinoken .rotating-container .base-photo {
width: 94%;
top: 8%;
right: -2%;
}
.profile-shinoken .central-image-area .img-2 {
top: 0.9rem;
right: -3%;
width: 62%;
}
.profile-shinoken .writer-photo-section {
margin-bottom: -22rem;
}
.profile-shinoken .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(しのけん) --- */
.profile-shinoken .writer-photo-section .item-1 {
top: -3.5%;
left: -1%;
width: 50%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-shinoken .writer-photo-section .item-2 {
top: -3.5%;
right: -2%;
width: 63%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-shinoken .writer-photo-section .item-3 {
top: 25.5%;
left: 46%;
width: 27%;
z-index: 1;
transition-delay: 0.3s;
}
.profile-shinoken .writer-photo-section .item-5 {
top: 41%;
right: 36%;
width: 66%;
z-index: 5;
transition-delay: 0.4s;
}
.profile-shinoken .writer-photo-section .item-6 {
top: 28.5%;
left: 62%;
width: 39%;
z-index: 5;
transition-delay: 0.5s;
}
/* --- ★各キャプションの位置を指定(しのけん) --- */
.profile-shinoken .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 71%;
left: 22%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-shinoken .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 5%;
/* right: 0%; */
left: 78%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0.8rem 0;
margin: 0;
}
.profile-shinoken .writer-photo-section .item-5 .collage-caption {
writing-mode: vertical-rl;
top: 38%;
left: 77%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(12deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-shinoken .writer-photo-section .item-6 .collage-caption {
writing-mode: horizontal-tb;
top: 62%;
left: 14%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #d0dd99;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(しのけん) --- */
.profile-shinoken .photo-collage-item .collage-bg { width: 100%; }
.profile-shinoken .photo-collage-item .collage-photo1 {
position: absolute;
top: 18%;
left: 42%;
width: 49%;
}
.profile-shinoken .photo-collage-item .collage-photo2 {
position: absolute;
top: 33%;
left: 49%;
width: 56%;
}
.profile-shinoken .photo-collage-item .collage-photo4 {
position: absolute;
top: 24%;
left: 29%;
width: 41%;
}
.profile-shinoken .photo-collage-item .collage-photo5 {
position: absolute;
top: 28%;
left: 64%;
width: 60%;
}
.profile-shinoken .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(しのけん) --- */
/* item-1 (左上) */
.profile-shinoken .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-shinoken .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (左下) */
.profile-shinoken .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (右下) */
.profile-shinoken .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-shinoken .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ドテチン専用 (.profile-dote) --- */
.profile-dote .name-plate h1 {
/*padding-left: 0.5rem;
padding-right: 0.5rem;*/
text-align: center;
}
.profile-dote .name-plate h1 span {
display: inline-block;
transform: scaleX(1.1);
transform-origin: center;
letter-spacing: 0.2em;
margin-right: 0.1em;
}
.profile-dote .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(4) forwards;
animation-play-state: paused;
}
.profile-dote .intro-text {
text-align: center;
position: relative;
/* display: inline-block; */
}
.profile-dote .intro-text .intro-line-top {
display: inline-block;
font-size: 1.75rem;
font-weight: 900;
transform: scaleX(1.0);
transform-origin: center;
line-height: 1.2;
/*margin-bottom: 0.5rem;*/
}
.profile-dote .intro-text .intro-line-bottom {
display: inline-block;
font-size: 2.92rem;
font-weight: 900;
transform: scaleX(1.12);
transform-origin: center;
line-height: 1.2;
}
.profile-dote .feature-logo {
left: 0;
}
.profile-dote .central-image-area .img-1 {
left: -15%;
width: 84%;
}
.profile-dote .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-dote .central-image-area .img-2 {
top: 0;
right: -3%;
width: 68%;
}
.profile-dote .writer-photo-section {
margin-bottom: -22rem;
}
.profile-dote .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ドテチン) --- */
.profile-dote .writer-photo-section .item-1 {
top: -3.5%;
left: -4%;
width: 61%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-dote .writer-photo-section .item-2 {
top: -1.5%;
right: -2%;
width: 50%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-dote .writer-photo-section .item-3 {
top: 27.5%;
left: -3%;
width: 51%;
z-index: 4;
transition-delay: 0.3s;
}
.profile-dote .writer-photo-section .item-4 {
top: 8%;
right: 2%;
width: 58%;
z-index: 0;
transition-delay: 0.4s;
}
/* --- ★各キャプションの位置を指定(ドテチン) --- */
.profile-dote .writer-photo-section .item-1 .collage-caption {
writing-mode: vertical-rl;
top: 35%;
left: 7%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-dote .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 65%;
/* right: 70%; */
left: 3%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #d0dd99;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-dote .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 74%;
right: -10%;
left: 39%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #9ac5e2;
transform: rotate(12deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-dote .writer-photo-section .item-4 .collage-caption {
writing-mode: vertical-rl;
top: 48%;
left: 72%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
/* --- ★回転サークル位置を指定(ドテチン) --- */
.profile-dote .photo-collage-item .collage-bg { width: 100%; }
.profile-dote .photo-collage-item .collage-photo1 {
position: absolute;
top: 43%;
left: 65%;
width: 61%;
}
.profile-dote .photo-collage-item .collage-photo2 {
position: absolute;
top: 40%;
left: 66%;
width: 53%;
}
.profile-dote .photo-collage-item .collage-photo3 {
position: absolute;
top: 16%;
left: 45%;
width: 39%;
}
.profile-dote .photo-collage-item .collage-photo4 {
position: absolute;
top: 39%;
left: 35%;
width: 60%;
}
.profile-dote .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ドテチン) --- */
/* item-1 (左上) */
.profile-dote .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-dote .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (左下) */
.profile-dote .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (右下) */
.profile-dote .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-dote .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- わるぺこ専用 (.profile-warupeco) --- */
.profile-warupeco .name-plate h1 {
/*padding-left: 0.8rem;
padding-right: 0.2rem;*/
text-align: center;
}
.profile-warupeco .name-plate h1 span {
display: inline-block;
transform: scaleX(1.1);
transform-origin: center;
letter-spacing: 0.2em;
margin-right: 0.1em;
}
.profile-warupeco .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(4) forwards;
animation-play-state: paused;
}
.profile-warupeco .web-links-box {
margin-top: 22rem;
margin-bottom: 3rem;
}
.profile-warupeco .feature-logo {
left: -6%;
}
.profile-warupeco .central-image-area .img-1 {
left: -12%;
width: 77%;
}
.profile-warupeco .rotating-container .base-photo {
top: 8%;
right: -2%;
}
.profile-warupeco .central-image-area .img-2 {
top: 0;
right: -3%;
width: 68%;
}
.profile-warupeco .writer-photo-section {
margin-bottom: -22rem;
}
.profile-warupeco .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(わるぺこ) --- */
.profile-warupeco .writer-photo-section .item-1 {
top: -3.5%;
left: -4%;
width: 62%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-warupeco .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 49%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-warupeco .writer-photo-section .item-3 {
top: 28%;
right: 49%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-warupeco .writer-photo-section .item-4 {
top: 45%;
left: 45%;
width: 57%;
z-index: 2;
transition-delay: 0.4s;
}
.profile-warupeco .writer-photo-section .item-5 {
top: 21.5%;
left: 31%;
width: 41%;
z-index: 4;
transition-delay: 0.5s;
}
/* --- ★各キャプションの位置を指定(わるぺこ) --- */
.profile-warupeco .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 66%;
left: 4%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-warupeco .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 75%;
left: 37%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-warupeco .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 67%;
/* right: -10%; */
left: 10%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(わるぺこ) --- */
.profile-warupeco .photo-collage-item .collage-bg { width: 100%; }
.profile-warupeco .photo-collage-item .collage-photo1 {
position: absolute;
top: 23%;
left: 25%;
width: 36%;
}
.profile-warupeco .photo-collage-item .collage-photo2 {
position: absolute;
top: 44%;
left: 77%;
width: 74%;
}
.profile-warupeco .photo-collage-item .collage-photo3 {
position: absolute;
top: 36%;
left: 21%;
width: 60%;
}
.profile-warupeco .photo-collage-item .collage-photo4 {
position: absolute;
top: 25%;
left: 68%;
width: 37%;
}
.profile-warupeco .photo-collage-item .collage-photo5 {
position: absolute;
top: 39%;
left: 54%;
width: 54%;
}
.profile-warupeco .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(わるぺこ) --- */
/* item-1 (左上) */
.profile-warupeco .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-warupeco .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-warupeco .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-warupeco .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-warupeco .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-warupeco .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- 千奈里専用 (.profile-chinari) --- */
.profile-chinari .name-plate h1 {
/*padding-left: 2rem;
padding-right: 4.5rem;*/
text-align: center;
}
.profile-chinari .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;
}
.profile-chinari .name-main {
margin-left: -2rem;
}
.profile-chinari .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-chinari .web-links-box {
margin-top: 24rem;
margin-bottom: 11rem;
}
.profile-chinari .feature-logo {
left: -6%;
}
.profile-chinari .central-image-area .img-1 {
left: -12%;
width: 77%;
}
.profile-chinari .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-chinari .central-image-area .img-2 {
top: 0;
right: -4%;
width: 68%;
}
.profile-chinari .writer-photo-section {
margin-bottom: -22rem;
}
.profile-chinari .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(千奈里) --- */
.profile-chinari .writer-photo-section .item-1 {
top: -2.9%;
left: -4%;
width: 59%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-chinari .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 52%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-chinari .writer-photo-section .item-3 {
top: 28%;
left: -4%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-chinari .writer-photo-section .item-4 {
top: 47%;
left: 47%;
width: 55%;
z-index: 2;
transition-delay: 0.4s;
}
.profile-chinari .writer-photo-section .item-5 {
top: 20.5%;
left: 26%;
width: 43%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(千奈里) --- */
.profile-chinari .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 66%;
left: 4%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-chinari .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 75%;
left: 37%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-chinari .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 67%;
/* right: -10%; */
left: 10%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(千奈里) --- */
.profile-chinari .photo-collage-item .collage-bg { width: 100%; }
.profile-chinari .photo-collage-item .collage-photo1 {
position: absolute;
top: 30%;
left: 23%;
width: 50%;
}
.profile-chinari .photo-collage-item .collage-photo2 {
position: absolute;
top: 36%;
left: 81%;
width: 71%;
}
.profile-chinari .photo-collage-item .collage-photo3 {
position: absolute;
top: 37%;
left: 21%;
width: 64%;
}
.profile-chinari .photo-collage-item .collage-photo4 {
position: absolute;
top: 25%;
left: 84%;
width: 44%;
}
.profile-chinari .photo-collage-item .collage-photo5 {
position: absolute;
top: 40%;
left: 54%;
width: 50%;
}
.profile-chinari .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(千奈里) --- */
/* item-1 (左上) */
.profile-chinari .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-chinari .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-chinari .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-chinari .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-chinari .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-chinari .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- くまちゃむ専用 (.profile-kumacham) --- */
.profile-kumacham .name-plate h1 {
/*padding-left: 1.2rem;
padding-right: 1.2rem;*/
text-align: center;
}
.profile-kumacham .name-plate h1 span {
/*display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;*/
}
.profile-kumacham .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(5) forwards;
animation-play-state: paused;
transform: scaleX(1.05);
}
.profile-kumacham .web-links-box {
margin-top: 24rem;
margin-bottom: 7rem;
}
.profile-kumacham .feature-logo {
left: -6%;
}
.profile-kumacham .central-image-area .img-1 {
left: -10%;
width: 77%;
}
.profile-kumacham .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-kumacham .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-kumacham .writer-photo-section {
margin-bottom: -22rem;
}
.profile-kumacham .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(くまちゃむ) --- */
.profile-kumacham .writer-photo-section .item-1 {
top: -2.9%;
left: -4%;
width: 59%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-kumacham .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 52%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-kumacham .writer-photo-section .item-3 {
top: 28%;
left: -4%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-kumacham .writer-photo-section .item-4 {
top: 47%;
left: 47%;
width: 55%;
z-index: 2;
transition-delay: 0.4s;
}
.profile-kumacham .writer-photo-section .item-5 {
top: 20.5%;
left: 26%;
width: 43%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(くまちゃむ) --- */
.profile-kumacham .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 66%;
left: 4%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-kumacham .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 75%;
left: 37%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-kumacham .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 67%;
/* right: -10%; */
left: 10%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(くまちゃむ) --- */
.profile-kumacham .photo-collage-item .collage-bg { width: 100%; }
.profile-kumacham .photo-collage-item .collage-photo1 {
position: absolute;
top: 29%;
left: 32%;
width: 47%;
}
.profile-kumacham .photo-collage-item .collage-photo2 {
position: absolute;
top: 29%;
left: 78%;
width: 50%;
}
.profile-kumacham .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}
.profile-kumacham .photo-collage-item .collage-photo4 {
position: absolute;
top: 29%;
left: 82%;
width: 40%;
}
.profile-kumacham .photo-collage-item .collage-photo5 {
position: absolute;
top: 29%;
left: 29%;
width: 39%;
}
.profile-kumacham .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(くまちゃむ) --- */
/* item-1 (左上) */
.profile-kumacham .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-kumacham .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-kumacham .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-kumacham .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-kumacham .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-kumacham .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- 黒咲さゆ専用 (.profile-sayu) --- */
.profile-sayu .name-plate h1 {
/*padding-left: 0.8rem;
padding-right: 0.2rem;*/
text-align: center;
}
.profile-sayu .name-plate h1 span {
display: inline-block;
transform: scaleX(1.1);
transform-origin: center;
letter-spacing: 0.2em;
margin-right: 0.1em;
}
.profile-sayu .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(4) forwards;
animation-play-state: paused;
}
.profile-sayu .web-links-box {
margin-top: 24.5rem;
margin-bottom: 10rem;
}
.profile-sayu .feature-logo {
left: -6%;
}
.profile-sayu .central-image-area .img-1 {
left: -10%;
width: 77%;
}
.profile-sayu .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-sayu .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-sayu .writer-photo-section {
margin-bottom: -22rem;
}
.profile-sayu .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(黒咲さゆ) --- */
.profile-sayu .writer-photo-section .item-1 {
top: -2.9%;
left: -4%;
width: 62%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-sayu .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 49%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-sayu .writer-photo-section .item-3 {
top: 28%;
left: -4%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-sayu .writer-photo-section .item-4 {
top: 46%;
left: 44%;
width: 58%;
z-index: 2;
transition-delay: 0.4s;
}
.profile-sayu .writer-photo-section .item-5 {
top: 21.5%;
left: 27%;
width: 43%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(黒咲さゆ) --- */
.profile-sayu .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 66%;
left: 4%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-sayu .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 75%;
left: 37%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-sayu .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 67%;
/* right: -10%; */
left: 10%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(黒咲さゆ) --- */
.profile-sayu .photo-collage-item .collage-bg { width: 100%; }
.profile-sayu .photo-collage-item .collage-photo1 {
position: absolute;
top: 28%;
left: 39%;
width: 47%;
}
.profile-sayu .photo-collage-item .collage-photo2 {
position: absolute;
top: 39%;
left: 59%;
width: 82%;
}
.profile-sayu .photo-collage-item .collage-photo3 {
position: absolute;
top: 38%;
left: 21%;
width: 63%;
}
.profile-sayu .photo-collage-item .collage-photo4 {
position: absolute;
top: 28%;
left: 82%;
width: 45%;
}
.profile-sayu .photo-collage-item .collage-photo5 {
position: absolute;
top: 48%;
left: 59%;
width: 78%;
}
.profile-sayu .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(黒咲さゆ) --- */
/* item-1 (左上) */
.profile-sayu .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-sayu .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-sayu .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-sayu .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-sayu .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-sayu .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- りんか隊長専用 (.profile-rinka) --- */
.profile-rinka .name-plate h1 {
/*padding-left: 1.2rem;
padding-right: 1.2rem;*/
text-align: center;
}
.profile-rinka .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(5) forwards;
animation-play-state: paused;
transform: scaleX(1.05);
font-feature-settings: normal; /* "palt" を一時的に解除 */
}
/*.profile-rinka .name-main h1 span b {
margin-right: -1rem;
}*/
.profile-rinka .web-links-box {
margin-top: 25rem;
margin-bottom: 4rem;
}
.profile-rinka .feature-logo {
left: -6%;
}
.profile-rinka .central-image-area .img-1 {
left: -16%;
width: 77%;
}
.profile-rinka .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-rinka .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-rinka .writer-photo-section {
margin-bottom: -22rem;
}
.profile-rinka .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(りんか隊長) --- */
.profile-rinka .writer-photo-section .item-1 {
top: -3.4%;
left: -4%;
width: 62%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-rinka .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 51%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-rinka .writer-photo-section .item-3 {
top: 20%;
left: -4%;
width: 25%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-rinka .writer-photo-section .item-4 {
top: 27%;
left: 18%;
width: 55%;
z-index: 4;
transition-delay: 0.4s;
}
.profile-rinka .writer-photo-section .item-5 {
top: 50.5%;
left: -4%;
width: 56%;
z-index: 3;
transition-delay: 0.5;
}
.profile-rinka .writer-photo-section .item-6 {
top: 41.5%;
left: 44.8%;
width: 57%;
z-index: 1;
transition-delay: 0.6;
}
/* --- ★各キャプションの位置を指定(りんか隊長) --- */
.profile-rinka .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 9%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-rinka .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 60%;
left: 73%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-rinka .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 50%;
/* right: -10%; */
left: -37%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(りんか隊長) --- */
.profile-rinka .photo-collage-item .collage-bg { width: 100%; }
.profile-rinka .photo-collage-item .collage-photo1 {
position: absolute;
top: 29%;
left: 18%;
width: 48%;
}
.profile-rinka .photo-collage-item .collage-photo2 {
position: absolute;
top: 39%;
left: 67%;
width: 72%;
}
/*.profile-rinka .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}*/
.profile-rinka .photo-collage-item .collage-photo4 {
position: absolute;
top: 25%;
left: 50%;
width: 33%;
}
.profile-rinka .photo-collage-item .collage-photo5 {
position: absolute;
top: 36%;
left: 65%;
width: 54%;
}
.profile-rinka .photo-collage-item .collage-photo6 {
position: absolute;
top: 61%;
left: 24%;
width: 26%;
}
.profile-rinka .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(りんか隊長) --- */
/* item-1 (左上) */
.profile-rinka .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-rinka .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左中) */
.profile-rinka .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中) */
.profile-rinka .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-rinka .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-6 (右下) */
.profile-rinka .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-rinka .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- 音華花専用 (.profile-oto) --- */
.profile-oto .name-plate h1 {
/*padding-left: 2rem;
padding-right: 4.5rem;*/
text-align: center;
}
.profile-oto .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;
}
.profile-oto .name-main {
margin-left: -2rem;
}
.profile-oto .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-oto .web-links-box {
margin-top: 24rem;
margin-bottom: 10.5rem;
}
.profile-oto .feature-logo {
left: -6%;
}
.profile-oto .central-image-area .img-1 {
left: -16%;
width: 77%;
}
.profile-oto .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-oto .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-oto .writer-photo-section {
margin-bottom: -22rem;
}
.profile-oto .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(音華花) --- */
.profile-oto .writer-photo-section .item-1 {
top: -3.4%;
left: -4%;
width: 61%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-oto .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 51%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-oto .writer-photo-section .item-3 {
top: 20%;
left: -4%;
width: 25%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-oto .writer-photo-section .item-4 {
top: 28%;
left: 19%;
width: 58%;
z-index: 4;
transition-delay: 0.4s;
}
.profile-oto .writer-photo-section .item-5 {
top: 53.5%;
left: -4%;
width: 56%;
z-index: 3;
transition-delay: 0.5;
}
.profile-oto .writer-photo-section .item-6 {
top: 41.5%;
left: 44.8%;
width: 57%;
z-index: 1;
transition-delay: 0.6;
}
/* --- ★各キャプションの位置を指定(音華花) --- */
.profile-oto .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 9%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-oto .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 60%;
left: 73%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-oto .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 47%;
/* right: -10%; */
left: -34%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(音華花) --- */
.profile-oto .photo-collage-item .collage-bg { width: 100%; }
.profile-oto .photo-collage-item .collage-photo1 {
position: absolute;
top: 25%;
left: 13%;
width: 44%;
}
.profile-oto .photo-collage-item .collage-photo2 {
position: absolute;
top: 41%;
left: 67%;
width: 75%;
}
/*.profile-oto .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}*/
.profile-oto .photo-collage-item .collage-photo4 {
position: absolute;
top: 25%;
left: 36%;
width: 42%;
}
.profile-oto .photo-collage-item .collage-photo5 {
position: absolute;
top: 15%;
left: 27%;
width: 36%;
}
.profile-oto .photo-collage-item .collage-photo6 {
position: absolute;
top: 26%;
left: 80%;
width: 43%;
}
.profile-oto .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(音華花) --- */
/* item-1 (左上) */
.profile-oto .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-oto .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左中) */
.profile-oto .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中) */
.profile-oto .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-oto .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-6 (右下) */
.profile-oto .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-oto .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ゆう専用 (.profile-yuu) --- */
.profile-yuu .name-plate h1 {
/*padding-left: 5.4rem;
padding-right: 7.25rem;*/
text-align: center;
}
.profile-yuu .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.5em;
margin-right: -0.5em;
}
.profile-yuu .name-main {
margin-left: -2rem;
}
.profile-yuu .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(2) forwards;
animation-play-state: paused;
}
.profile-yuu .web-links-box {
margin-top: 24rem;
margin-bottom: 7.5rem;
}
.profile-yuu .feature-logo {
left: -6%;
}
.profile-yuu .central-image-area .img-1 {
left: -16%;
width: 77%;
}
.profile-yuu .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-yuu .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-yuu .writer-photo-section {
margin-bottom: -22rem;
}
.profile-yuu .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ゆう) --- */
.profile-yuu .writer-photo-section .item-1 {
top: -3.4%;
left: -4%;
width: 61%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-yuu .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 51%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-yuu .writer-photo-section .item-3 {
top: 20%;
left: -4%;
width: 25%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-yuu .writer-photo-section .item-4 {
top: 28%;
left: 19%;
width: 58%;
z-index: 4;
transition-delay: 0.4s;
}
.profile-yuu .writer-photo-section .item-5 {
top: 53.5%;
left: -4%;
width: 56%;
z-index: 3;
transition-delay: 0.5;
}
.profile-yuu .writer-photo-section .item-6 {
top: 41.5%;
left: 44.8%;
width: 57%;
z-index: 1;
transition-delay: 0.6;
}
/* --- ★各キャプションの位置を指定(ゆう) --- */
.profile-yuu .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 9%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-yuu .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 60%;
left: 73%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-yuu .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 47%;
/* right: -10%; */
left: -34%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(ゆう) --- */
.profile-yuu .photo-collage-item .collage-bg { width: 100%; }
.profile-yuu .photo-collage-item .collage-photo1 {
position: absolute;
top: 26%;
left: 19%;
width: 45%;
}
.profile-yuu .photo-collage-item .collage-photo2 {
position: absolute;
top: 41%;
left: 67%;
width: 74%;
}
/*.profile-yuu .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}*/
.profile-yuu .photo-collage-item .collage-photo4 {
position: absolute;
top: 33%;
left: 28%;
width: 48%;
}
.profile-yuu .photo-collage-item .collage-photo5 {
position: absolute;
top: 27%;
left: 20%;
width: 41%;
}
.profile-yuu .photo-collage-item .collage-photo6 {
position: absolute;
top: 33%;
left: 80%;
width: 42%;
}
.profile-yuu .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ゆう) --- */
/* item-1 (左上) */
.profile-yuu .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-yuu .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左中) */
.profile-yuu .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中) */
.profile-yuu .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-yuu .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-6 (右下) */
.profile-yuu .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-yuu .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ドラ美専用 (.profile-dorami) --- */
.profile-dorami .name-plate h1 {
/*padding-left: 1.2rem;
padding-right: 5.3rem;*/
text-align: center;
}
.profile-dorami .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;
}
.profile-dorami .name-main {
margin-left: -2rem;
}
.profile-dorami .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-dorami .web-links-box {
margin-top: 22.5rem;
margin-bottom: 8.5rem;
}
.profile-dorami .feature-logo {
left: -6%;
}
.profile-dorami .central-image-area .img-1 {
left: -16%;
width: 77%;
}
.profile-dorami .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-dorami .central-image-area .img-2 {
top: 0;
right: -6%;
width: 66%;
}
.profile-dorami .writer-photo-section {
margin-bottom: -22rem;
}
.profile-dorami .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ドラ美) --- */
.profile-dorami .writer-photo-section .item-1 {
top: -3.4%;
left: -4%;
width: 61%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-dorami .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 51%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-dorami .writer-photo-section .item-3 {
top: 20%;
left: -4%;
width: 25%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-dorami .writer-photo-section .item-4 {
top: 28%;
left: 19%;
width: 58%;
z-index: 4;
transition-delay: 0.4s;
}
.profile-dorami .writer-photo-section .item-5 {
top: 52.5%;
left: -4%;
width: 56%;
z-index: 3;
transition-delay: 0.5;
}
.profile-dorami .writer-photo-section .item-6 {
top: 41.5%;
left: 44.8%;
width: 57%;
z-index: 1;
transition-delay: 0.6;
}
/* --- ★各キャプションの位置を指定(ドラ美) --- */
.profile-dorami .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 9%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-dorami .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 60%;
left: 73%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-dorami .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 47%;
/* right: -10%; */
left: -34%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(ドラ美) --- */
.profile-dorami .photo-collage-item .collage-bg { width: 100%; }
.profile-dorami .photo-collage-item .collage-photo1 {
position: absolute;
top: 28%;
left: 17%;
width: 41%;
}
.profile-dorami .photo-collage-item .collage-photo2 {
position: absolute;
top: 41%;
left: 67%;
width: 75%;
}
/*.profile-dorami .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}*/
.profile-dorami .photo-collage-item .collage-photo4 {
position: absolute;
top: 38%;
left: 39%;
width: 65%;
}
.profile-dorami .photo-collage-item .collage-photo5 {
position: absolute;
top: 33%;
left: 23%;
width: 48%;
}
.profile-dorami .photo-collage-item .collage-photo6 {
position: absolute;
top: 34%;
left: 80%;
width: 41%;
}
.profile-dorami .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ドラ美) --- */
/* item-1 (左上) */
.profile-dorami .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-dorami .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左中) */
.profile-dorami .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中) */
.profile-dorami .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-dorami .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-6 (右下) */
.profile-dorami .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-dorami .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ここる専用 (.profile-cocoru) --- */
.profile-cocoru .name-plate h1 {
/*padding-left: 1.2rem;
padding-right: 5.3rem;*/
text-align: center;
}
.profile-cocoru .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;
}
.profile-cocoru .name-main {
margin-left: -2rem;
}
.profile-cocoru .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-cocoru .web-links-box {
margin-top: 24.2rem;
margin-bottom: 7.1rem;
}
.profile-cocoru .feature-logo {
left: -6%;
}
.profile-cocoru .central-image-area .img-1 {
left: -17%;
width: 77%;
}
.profile-cocoru .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-cocoru .central-image-area .img-2 {
top: 0;
right: -8%;
width: 66%;
}
.profile-cocoru .writer-photo-section {
margin-bottom: -22rem;
}
.profile-cocoru .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ここる) --- */
.profile-cocoru .writer-photo-section .item-1 {
top: -3.4%;
left: -4%;
width: 61%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-cocoru .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 51%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-cocoru .writer-photo-section .item-3 {
top: 20%;
left: -4%;
width: 25%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-cocoru .writer-photo-section .item-4 {
top: 28%;
left: 19%;
width: 58%;
z-index: 4;
transition-delay: 0.4s;
}
.profile-cocoru .writer-photo-section .item-5 {
top: 52.5%;
left: -4%;
width: 56%;
z-index: 3;
transition-delay: 0.5;
}
.profile-cocoru .writer-photo-section .item-6 {
top: 41.5%;
left: 44.8%;
width: 57%;
z-index: 1;
transition-delay: 0.6;
}
/* --- ★各キャプションの位置を指定(ここる) --- */
.profile-cocoru .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 9%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #9ac5e2;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-cocoru .writer-photo-section .item-2 .collage-caption {
writing-mode: vertical-rl;
top: 60%;
left: 73%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0.8rem 0;
}
.profile-cocoru .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 47%;
/* right: -10%; */
left: -34%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(ここる) --- */
.profile-cocoru .photo-collage-item .collage-bg { width: 100%; }
.profile-cocoru .photo-collage-item .collage-photo1 {
position: absolute;
top: 24%;
left: 11%;
width: 31%;
}
.profile-cocoru .photo-collage-item .collage-photo2 {
position: absolute;
top: 37%;
left: 67%;
width: 48%;
}
/*.profile-cocoru .photo-collage-item .collage-photo3 {
position: absolute;
top: 29%;
left: 29%;
width: 50%;
}*/
.profile-cocoru .photo-collage-item .collage-photo4 {
position: absolute;
top: 39%;
left: 64%;
width: 53%;
}
.profile-cocoru .photo-collage-item .collage-photo5 {
position: absolute;
top: 28%;
left: 25%;
width: 52%;
}
.profile-cocoru .photo-collage-item .collage-photo6 {
position: absolute;
top: 37%;
left: 60%;
width: 38%;
}
.profile-cocoru .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ここる) --- */
/* item-1 (左上) */
.profile-cocoru .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-cocoru .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左中) */
.profile-cocoru .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (中) */
.profile-cocoru .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (左下) */
.profile-cocoru .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-6 (右下) */
.profile-cocoru .writer-photo-section .item-6.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.9s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
.profile-cocoru .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- らあら専用 (.profile-lala) --- */
.profile-lala .name-plate h1 {
/*padding-left: 2rem;
padding-right: 4.5rem;*/
text-align: center;
}
.profile-lala .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.3em;
margin-right: -0.3em;
}
.profile-lala .name-main {
margin-left: -2rem;
}
.profile-lala .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(3) forwards;
animation-play-state: paused;
}
.profile-lala .web-links-box {
margin-top: 24rem;
margin-bottom: 8rem;
}
.profile-lala .feature-logo {
left: -6%;
}
.profile-lala .central-image-area .img-1 {
left: -17%;
width: 77%;
}
.profile-lala .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-lala .central-image-area .img-2 {
top: 0;
right: -8%;
width: 68%;
}
.profile-lala .writer-photo-section {
margin-bottom: -22rem;
}
.profile-lala .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(らあら) --- */
.profile-lala .writer-photo-section .item-1 {
top: -2.9%;
left: -4%;
width: 59%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-lala .writer-photo-section .item-2 {
top: -4.0%;
right: -2%;
width: 52%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-lala .writer-photo-section .item-3 {
top: 28%;
left: -4%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-lala .writer-photo-section .item-4 {
top: 47%;
left: 47%;
width: 55%;
z-index: 2;
transition-delay: 0.4s;
}
.profile-lala .writer-photo-section .item-5 {
top: 20.5%;
left: 26%;
width: 43%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(らあら) --- */
.profile-lala .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 69%;
left: 4%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-lala .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 75%;
left: 37%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-lala .writer-photo-section .item-3 .collage-caption {
writing-mode: horizontal-tb;
top: 67%;
/* right: -10%; */
left: 10%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #d0dd99;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(らあら) --- */
.profile-lala .photo-collage-item .collage-bg { width: 100%; }
.profile-lala .photo-collage-item .collage-photo1 {
position: absolute;
top: 46%;
left: 40%;
width: 45%;
}
.profile-lala .photo-collage-item .collage-photo2 {
position: absolute;
top: 30%;
left: 61%;
width: 54%;
}
.profile-lala .photo-collage-item .collage-photo3 {
position: absolute;
top: 39%;
left: 24%;
width: 61%;
}
.profile-lala .photo-collage-item .collage-photo4 {
position: absolute;
top: 40%;
left: 38%;
width: 47%;
}
.profile-lala .photo-collage-item .collage-photo5 {
position: absolute;
top: 55%;
left: 54%;
width: 43%;
}
.profile-lala .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(らあら) --- */
/* item-1 (左上) */
.profile-lala .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-lala .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-lala .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-lala .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-lala .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-lala .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- 菊丸専用 (.profile-kikumaru) --- */
.profile-kikumaru .name-plate h1 {
/*padding-left: 5.4rem;
padding-right: 7.25rem;*/
text-align: center;
}
.profile-kikumaru .name-plate h1 span {
display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.5em;
margin-right: -0.5em;
}
.profile-kikumaru .name-main {
margin-left: -2rem;
}
.profile-kikumaru .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(2) forwards;
animation-play-state: paused;
}
.profile-kikumaru .web-links-box {
margin-top: 23rem;
margin-bottom: 9.5rem;
}
.profile-kikumaru .feature-logo {
left: -6%;
}
.profile-kikumaru .central-image-area .img-1 {
left: -18%;
width: 92%;
}
.profile-kikumaru .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-kikumaru .central-image-area .img-2 {
top: 0;
right: -4%;
width: 68%;
}
.profile-kikumaru .writer-photo-section {
margin-bottom: -22rem;
}
.profile-kikumaru .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(菊丸) --- */
.profile-kikumaru .writer-photo-section .item-1 {
top: -3.2%;
left: -4%;
width: 63%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-kikumaru .writer-photo-section .item-2 {
top: -3.6%;
right: -2%;
width: 52%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-kikumaru .writer-photo-section .item-3 {
top: 29%;
left: -4%;
width: 55%;
z-index: 3;
transition-delay: 0.3s;
}
.profile-kikumaru .writer-photo-section .item-4 {
top: 41%;
left: 40%;
width: 62%;
z-index: 1;
transition-delay: 0.4s;
}
.profile-kikumaru .writer-photo-section .item-5 {
top: 23.5%;
left: 24%;
width: 48%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(菊丸) --- */
.profile-kikumaru .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 77%;
left: 5%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #d0dd99;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-kikumaru .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 74%;
left: 40%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-kikumaru .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 70%;
/* right: -10%; */
left: 12%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #9ac5e2;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(菊丸) --- */
.profile-kikumaru .photo-collage-item .collage-bg { width: 100%; }
.profile-kikumaru .photo-collage-item .collage-photo1 {
position: absolute;
top: 32%;
left: 41%;
width: 40%;
}
.profile-kikumaru .photo-collage-item .collage-photo2 {
position: absolute;
top: 23%;
left: 88%;
width: 44%;
}
.profile-kikumaru .photo-collage-item .collage-photo3 {
position: absolute;
top: 28%;
left: 17%;
width: 49%;
}
.profile-kikumaru .photo-collage-item .collage-photo4 {
position: absolute;
top: 44%;
left: 72%;
width: 47%;
}
.profile-kikumaru .photo-collage-item .collage-photo5 {
position: absolute;
top: 44%;
left: 68%;
width: 37%;
}
.profile-kikumaru .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(菊丸) --- */
/* item-1 (左上) */
.profile-kikumaru .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-kikumaru .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-kikumaru .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-kikumaru .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-kikumaru .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-kikumaru .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ガンちゃん専用 (.profile-gunchan) --- */
.profile-gunchan .name-plate h1 {
/*padding-left: 5.4rem;
padding-right: 7.25rem;*/
text-align: center;
}
.profile-gunchan .name-plate h1 span {
/*display: inline-block;
transform: scaleX(1.21);
transform-origin: center;
letter-spacing: 0.5em;
margin-right: -0.5em;*/
}
.profile-gunchan .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(5) forwards;
animation-play-state: paused;
transform: scaleX(1.05);
}
.profile-gunchan .web-links-box {
margin-top: 24rem;
margin-bottom: 4.0rem;
}
.profile-gunchan .feature-logo {
left: -6%;
}
.profile-gunchan .central-image-area .img-1 {
left: -18%;
width: 92%;
}
.profile-gunchan .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-gunchan .central-image-area .img-2 {
top: 0;
right: -4%;
width: 68%;
}
.profile-gunchan .writer-photo-section {
margin-bottom: -22rem;
}
.profile-gunchan .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ガンちゃん) --- */
.profile-gunchan .writer-photo-section .item-1 {
top: -3.2%;
left: -4%;
width: 63%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-gunchan .writer-photo-section .item-2 {
top: -3.6%;
right: -2%;
width: 52%;
z-index: 2;
transition-delay: 0.2s;
}
.profile-gunchan .writer-photo-section .item-3 {
top: 30%;
left: -4%;
width: 51%;
z-index: 4;
transition-delay: 0.3s;
}
.profile-gunchan .writer-photo-section .item-4 {
top: 44%;
left: 40%;
width: 62%;
z-index: 1;
transition-delay: 0.4s;
}
.profile-gunchan .writer-photo-section .item-5 {
top: 20.5%;
left: 25%;
width: 48%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(ガンちゃん) --- */
.profile-gunchan .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 77%;
left: 5%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #d0dd99;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-gunchan .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 74%;
left: 40%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #dfbaf7;
padding: 0;
transform: rotate(-8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-gunchan .writer-photo-section .item-4 .collage-caption {
writing-mode: horizontal-tb;
top: 65%;
/* right: -10%; */
left: 8%;
bottom: auto;
width: auto;
height: auto;
padding-left: 4rem;
position: absolute;
background-color: #9ac5e2;
transform: rotate(10deg);
z-index: 10;
padding: 0 0.8rem;
}
/* --- ★回転サークル位置を指定(ガンちゃん) --- */
.profile-gunchan .photo-collage-item .collage-bg { width: 100%; }
.profile-gunchan .photo-collage-item .collage-photo1 {
position: absolute;
top: 35%;
left: 24%;
width: 40%;
}
.profile-gunchan .photo-collage-item .collage-photo2 {
position: absolute;
top: 28%;
left: 69%;
width: 67%;
}
.profile-gunchan .photo-collage-item .collage-photo3 {
position: absolute;
top: 31%;
left: 38%;
width: 53%;
}
.profile-gunchan .photo-collage-item .collage-photo4 {
position: absolute;
top: 37%;
left: 84%;
width: 31%;
}
.profile-gunchan .photo-collage-item .collage-photo5 {
position: absolute;
top: 26%;
left: 35%;
width: 37%;
}
.profile-gunchan .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ガンちゃん) --- */
/* item-1 (左上) */
.profile-gunchan .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-gunchan .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-gunchan .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-gunchan .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-gunchan .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-warupeco .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-gunchan .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- ヘミニク専用 (.profile-heminik) --- */
.profile-heminik .name-plate h1 {
/*padding-left: 0.8rem;
padding-right: 0.2rem;*/
text-align: center;
}
.profile-heminik .name-plate h1 span {
display: inline-block;
transform: scaleX(1.1);
transform-origin: center;
letter-spacing: 0.2em;
margin-right: 0.1em;
}
.profile-heminik .name-main h1 span {
display: inline-block;
overflow: hidden;
white-space: nowrap;
position: relative;
animation: typing 1.2s steps(4) forwards;
animation-play-state: paused;
}
.profile-heminik .web-links-box {
margin-top: 23rem;
margin-bottom: 2.8rem;
}
.profile-heminik .feature-logo {
left: -6%;
}
.profile-heminik .central-image-area .img-1 {
left: -15%;
width: 92%;
}
.profile-heminik .rotating-container .base-photo {
/*top: 8%;
right: -2%;*/
}
.profile-heminik .central-image-area .img-2 {
top: 0;
right: -6%;
width: 68%;
}
.profile-heminik .writer-photo-section {
margin-bottom: -22rem;
}
.profile-heminik .recruitment-box {
bottom: 20%;
}
/* --- ★ライター写真位置を指定(ヘミニク) --- */
.profile-heminik .writer-photo-section .item-1 {
top: -3.2%;
left: -4%;
width: 59%;
z-index: 4;
transition-delay: 0.1s;
}
.profile-heminik .writer-photo-section .item-2 {
top: -3.6%;
right: -2%;
width: 57%;
z-index: 4;
transition-delay: 0.2s;
}
.profile-heminik .writer-photo-section .item-3 {
top: 31%;
left: -3%;
width: 50%;
z-index: 0;
transition-delay: 0.3s;
}
.profile-heminik .writer-photo-section .item-4 {
top: 31%;
left: 48%;
width: 54%;
z-index: 1;
transition-delay: 0.4s;
}
.profile-heminik .writer-photo-section .item-5 {
top: 50.5%;
left: -4%;
width: 60%;
z-index: 4;
transition-delay: 0.5;
}
/* --- ★各キャプションの位置を指定(ヘミニク) --- */
.profile-heminik .writer-photo-section .item-1 .collage-caption {
writing-mode: horizontal-tb;
top: 69%;
left: 5%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #dfbaf7;
vertical-align: middle;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0 0.8rem;
}
.profile-heminik .writer-photo-section .item-2 .collage-caption {
writing-mode: horizontal-tb;
top: 74%;
left: 36%;
bottom: auto;
width: auto;
height: auto;
position: absolute;
background-color: #9ac5e2;
padding: 0;
transform: rotate(8deg);
z-index: 10;
/* padding: 0; */
padding: 0 0.8rem;
margin: 0;
}
.profile-heminik .writer-photo-section .item-4 .collage-caption {
writing-mode: vertical-rl;
top: 8.5%;
left: 1%;
bottom: auto;
width: auto;
height: auto;
width: auto;
position: absolute;
background-color: #baf7f7;
padding: 0;
transform: rotate(-10deg);
z-index: 10;
padding: 0.8rem 0;
}
/* --- ★回転サークル位置を指定(ヘミニク) --- */
.profile-heminik .photo-collage-item .collage-bg { width: 100%; }
.profile-heminik .photo-collage-item .collage-photo1 {
position: absolute;
top: 43%;
left: 27%;
width: 50%;
}
.profile-heminik .photo-collage-item .collage-photo2 {
position: absolute;
top: 37%;
left: 51%;
width: 51%;
}
.profile-heminik .photo-collage-item .collage-photo3 {
position: absolute;
top: 42%;
left: 25%;
width: 54%;
}
.profile-heminik .photo-collage-item .collage-photo4 {
position: absolute;
top: 19%;
left: 39%;
width: 40%;
}
.profile-heminik .photo-collage-item .collage-photo5 {
position: absolute;
top: 27%;
left: 26%;
width: 29%;
}
.profile-heminik .writer-photo-section .collage-caption {
position: absolute;
/*background-color: #000;*/
color: #000;
color: #000000;
border: 0.7rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.2rem;*/
font-size: min(1.5vw, 1.15rem);
}
/* --- ★回転サークルアニメーションを指定(ヘミニク) --- */
/* item-1 (左上) */
.profile-heminik .writer-photo-section .item-1.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.3s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/* item-2 (右上) */
.profile-heminik .writer-photo-section .item-2.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.6s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.4s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-3 (左下) */
.profile-heminik .writer-photo-section .item-3.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.6s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-4 (右下) */
.profile-heminik .writer-photo-section .item-4.is-visible .anim-photo {
animation-name: slide-in-rotate-from-right;
animation-duration: 1.2s;
animation-delay: 0.8s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-right 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.7s,
/* 2. その後、反時計回りに回転し続ける */
spin-in-place-reverse 15s linear 1.6s infinite; /* 1.2s + 0.4s = 1.6s後に開始 */
}
/* item-5 (中) */
.profile-heminik .writer-photo-section .item-5.is-visible .anim-photo {
animation-name: slide-in-rotate-from-left;
animation-duration: 1.2s;
animation-delay: 0.7s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
animation:
/* 1. 右から回転しながらスライドイン */
slide-in-rotate-from-left 1.2s forwards cubic-bezier(0.25, 1, 0.5, 1) 0.5s,
/* 2. その後、反時計回りに回転し続ける (右から来たので逆回転が自然) */
spin-in-place 15s linear 1.5s infinite; /* 1.2s + 0.3s = 1.5s後に開始 */
}
/*.profile-heminik .writer-photo-section .item-4.scroll-item {
transform: translateX(-100px) rotate(5deg);
}*/
.profile-heminik .cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -7.5rem;
}
/* --- タブレット表示用の調整 --- */
/* --- タブレット表示用の調整 (幅1150px以下) --- */
@media screen and (max-width: 1150px) {
/* --- 親コンテナの左右の余白を調整 --- */
body.page-writer-profile .writer-container {
padding: 0 1.5rem;
}
.writer-header .header-graphic img {
max-width: 28rem;
}
.intro-grid-container {
gap: 0;
}
/* テキストのスタイル */
.feature-content h4 {
font-size: min(2.1vw, 1.09rem);
}
/* --- フィーチャーボックスの位置を再計算 --- */
.special-feature-box {
left: -1%; /* 固定値に変更 */
}
/* --- ヘッダーテキストの位置を調整 --- */
.writer-header .header-graphic h2 {
left: 72%;
width: 80%;
/*font-size: 1.8rem;*/
font-size: min(3vw, 1.5rem);
}
/* --- 写真コラージュの高さを調整 --- */
.collage-container {
height: 140vw;
max-height: 1350px;
margin: 0 1rem !important;
}
.writer-photo-section .collage-caption {
border: 0.4rem solid #000000;
padding: 0;
font-weight: bold;
line-height: 1.2;
/*font-size: 1.5vw;*/
font-size: min(1.5vw, 1.1rem);
}
.name-plate h1 {
font-size: min(5.4vw, 2.5rem);
}
.follower-count span {
font-size: min(4.8vw, 2.3rem);
}
.follower-count p {
margin: 0;
font-size: min(1.3vw, 0.8rem);
}
.affiliation p {
font-size: min(1.4vw, 0.7rem);
}
.central-image-area .img-1 {
left: -26%;
width: 75%;
}
.central-image-area .img-2 {
right: -1%;
width: 67%;
}
.web-links-box h4 {
margin: 0 0 0.2rem 0;
font-size: min(1.2vw, 0.7rem);
}
.web-links-box li {
line-height: 1.3;
font-size: min(1.2vw, 0.7rem);
}
.name-plate {
margin-bottom: 3rem;
margin-left: 1rem;
}
.web-links-box {
margin-top: 22rem;
}
.feature-content p {
font-size: min(1.2vw, 0.7rem);
}
.intro-text {
margin-top: 0.5rem;
padding: 1.12rem 1rem;
font-size: min(1.52vw, 0.98rem);
margin-bottom: 1rem;
}
.writer-photo-section .item-1 {
left: 1%;
}
.writer-photo-section .item-4 .collage-caption {
top: 71%;
left: 46%;
}
.writer-photo-section .item-5 {
top: 41%;
left: -1%;
width: 63%;
}
.writer-photo-section .item-5 .collage-caption {
top: 68%;
left: 22%;
}
.writer-photo-section .item-6 {
top: 52%;
right: 0%;
width: 42%;
}
.writer-photo-section {
margin-bottom: -19rem;
}
.cta-box-featured {
gap: 21px;
}
.cta-inner-container {
padding-bottom: 9rem;
margin-bottom: -9rem;
}
.cta-title {
font-size: min(1.8vw, 1.2rem);
}
.cta-message p {
font-size: min(1.5vw, 1rem);
}
.cta-details {
font-size: min(1.0vw, 1rem);
line-height: 1.6;
}
.recruitment-box {
bottom: 17rem;
right: 1%;
top: auto;
left: auto;
height: 15vw;
}
.recruitment-content h4 {
margin: 0 0 0.5vw 0;
font-size: 1.4vw;
font-weight: 900;
}
.recruitment-content li {
font-size: 1.4vw;
font-weight: bold;
line-height: 1.4;
}
/* ---13.じゃんじゃんプロフィール 女性バージョン (配色変更) .theme-female タブレット表示用の調整 (幅1150px以下) --- */
.theme-female .writer-photo-section {
margin-top: 0;
}
/* ---13.じゃんじゃんプロフィール ライター個別調整 タブレット表示用の調整 (幅1150px以下) --- */
/* ---ライター個別調整 (フェアリン) --- */
/* --- h2ピンク文字 --- */
.profile-fairrin .writer-header .header-graphic h2 {
left: 62%;
width: 80%;
/* font-size: 1.8rem; */
font-size: min(3vw, 1.5rem);
}
/* --- 上の行 (.intro-line-top) --- */
.profile-fairrin .intro-text .intro-line-top {
font-size: min(2.64vw, 1.72rem);
}
/* --- 下の行 (.intro-line-bottom) --- */
.profile-fairrin .intro-text .intro-line-bottom {
font-size: min(3.8vw, 2.45rem);
}
/* --- 写真コラージュの高さを調整 --- */
.profile-fairrin .collage-container {
height: 150vw;
max-height: 1490px;
}
.profile-fairrin .writer-photo-section .item-3 {
top: 31vw;
}
.profile-fairrin .writer-photo-section .item-6 {
top: 58.5%;
}
/* ---ライター個別調整 (レビン) --- */
.profile-levin .writer-header .header-graphic h2 {
left: 78%;
}
.profile-levin .name-main {
margin-left: 0;
}
.profile-levin .name-plate h1 {
/*padding-left: 1rem;
padding-right: 2rem;*/
}
.profile-levin .central-image-area .img-1 {
left: -15%;
top: 1rem;
width: 77%;
}
.profile-levin .central-image-area .img-2 {
top: 2.2rem;
right: -2%;
width: 68%;
}
.profile-levin .intro-text .intro-line-top {
font-size: min(2.25vw, 1.37rem);
}
.profile-levin .intro-text .intro-line-bottom {
font-size: min(3.5vw, 2.25rem);
}
.profile-levin .writer-photo-section {
margin-top: 1rem;
margin-bottom: -15.5rem;
}
.profile-levin .writer-photo-section .item-5 .collage-caption {
left: 16%;
}
.profile-levin .recruitment-box {
bottom: 14rem;
}
/* ---ライター個別調整 (しのけん) --- */
.profile-shinoken .writer-header .header-graphic h2 {
left: 70%;
}
.profile-shinoken .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-shinoken .central-image-area .img-1 {
left: -15%;
top: 0rem;
width: 78%;
}
.profile-shinoken .central-image-area .img-2 {
top: 1.2rem;
right: -2%;
width: 64%;
}
.profile-shinoken .intro-text .intro-line-top {
font-size: min(3.5vw, 2.25rem);
}
.profile-shinoken .intro-text .intro-line-bottom {
font-size: min(2.25vw, 1.37rem);
}
.profile-shinoken .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-shinoken .writer-photo-section .item-6 .collage-caption {
left: 16%;
}
.profile-shinoken .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-shinoken .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ドテチン) --- */
.profile-dote .writer-header .header-graphic h2 {
left: 75%;
}
.profile-dote .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-dote .central-image-area .img-1 {
left: -15%;
top: 0rem;
width: 78%;
}
.profile-dote .central-image-area .img-2 {
top: -0.8rem;
right: -2%;
width: 67%;
}
.profile-dote .intro-text .intro-line-top {
font-size: min(2.25vw, 1.37rem);
}
.profile-dote .intro-text .intro-line-bottom {
font-size: min(3.5vw, 2.25rem);
}
.profile-dote .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-dote .writer-photo-section .item-1 .collage-caption {
top: 31%;
left: 7%;
}
.profile-dote .writer-photo-section .item-3 .collage-caption {
top: 70%;
left: 32%;
}
/*.profile-dote .writer-photo-section .item-4 .collage-caption {
top: 44%;
}*/
.profile-dote .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-dote .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (わるぺこ) --- */
.profile-warupeco .writer-header .header-graphic h2 {
left: 78%;
}
.profile-warupeco .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-warupeco .central-image-area .img-1 {
left: -15%;
top: 0rem;
width: 78%;
}
.profile-warupeco .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 70%;
}
.profile-warupeco .web-links-box {
margin-top: 20rem;
margin-bottom: 4rem;
}
.profile-warupeco .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-warupeco .writer-photo-section .item-4 {
top: 42%;
}
.profile-warupeco .writer-photo-section .item-1 .collage-caption {
left: 7%;
}
.profile-warupeco .writer-photo-section .item-2 .collage-caption {
top: 66%;
left: 35%;
}
.profile-warupeco .writer-photo-section .item-3 .collage-caption {
top: 65%;
left: 5%;
}
.profile-warupeco .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-warupeco .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (千奈里) --- */
.profile-chinari .writer-header .header-graphic h2 {
left: 78%;
}
.profile-chinari .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-chinari .name-main {
margin-left: 0;
}
.profile-chinari .web-links-box {
margin-top: 23rem;
margin-bottom: 9rem;
}
.profile-chinari .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-chinari .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-chinari .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-chinari .writer-photo-section .item-4 {
top: 42%;
}
.profile-chinari .writer-photo-section .item-1 .collage-caption {
left: 7%;
}
.profile-chinari .writer-photo-section .item-2 .collage-caption {
top: 61%;
left: 35%;
}
.profile-chinari .writer-photo-section .item-3 .collage-caption {
top: 63%;
left: 5%;
}
.profile-chinari .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-chinari .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (くまちゃむ) --- */
.profile-kumacham .writer-header .header-graphic h2 {
left: 78%;
}
.profile-kumacham .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-kumacham .web-links-box {
margin-top: 23rem;
margin-bottom: 5.5rem;
}
.profile-kumacham .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-kumacham .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-kumacham .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-kumacham .writer-photo-section .item-4 {
top: 42%;
}
.profile-kumacham .writer-photo-section .item-1 .collage-caption {
left: 7%;
}
.profile-kumacham .writer-photo-section .item-2 .collage-caption {
top: 61%;
left: 35%;
}
.profile-kumacham .writer-photo-section .item-3 .collage-caption {
top: 63%;
left: 5%;
}
.profile-kumacham .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-kumacham .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (黒咲さゆ) --- */
.profile-sayu .writer-header .header-graphic h2 {
left: 78%;
}
.profile-sayu .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-sayu .web-links-box {
margin-top: 23rem;
margin-bottom: 8.5rem;
}
.profile-sayu .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-sayu .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-sayu .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-sayu .writer-photo-section .item-4 {
top: 42%;
}
.profile-sayu .writer-photo-section .item-1 .collage-caption {
left: 7%;
}
.profile-sayu .writer-photo-section .item-2 .collage-caption {
top: 61%;
left: 35%;
}
.profile-sayu .writer-photo-section .item-3 .collage-caption {
top: 63%;
left: 5%;
}
.profile-sayu .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-sayu .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (りんか隊長) --- */
.profile-rinka .writer-header .header-graphic h2 {
left: 78%;
}
.profile-rinka .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-rinka .web-links-box {
margin-top: 23rem;
margin-bottom: 4.2rem;
}
.profile-rinka .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-rinka .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-rinka .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-rinka .writer-photo-section .item-1 {
top: -4.4%;
}
.profile-rinka .writer-photo-section .item-3 {
top: 24%;
}
.profile-rinka .writer-photo-section .item-4 {
top: 27%;
}
.profile-rinka .writer-photo-section .item-5 {
top: 49.5%;
}
.profile-rinka .writer-photo-section .item-6 {
top: 39.5%;
}
.profile-rinka .writer-photo-section .item-1 .collage-caption {
left: 38%;
margin-right: -6%;
}
.profile-rinka .writer-photo-section .item-2 .collage-caption {
top: 59%;
}
.profile-rinka .writer-photo-section .item-4 .collage-caption {
left: -33%;
}
.profile-rinka .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-rinka .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (音華花) --- */
.profile-oto .writer-header .header-graphic h2 {
left: 78%;
}
.profile-oto .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-oto .name-main {
margin-left: 0;
}
.profile-oto .web-links-box {
margin-top: 23rem;
margin-bottom: 8.4rem;
}
.profile-oto .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-oto .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-oto .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-oto .writer-photo-section .item-1 {
top: -4.4%;
}
.profile-oto .writer-photo-section .item-3 {
top: 21%;
}
.profile-oto .writer-photo-section .item-4 {
top: 28%;
}
.profile-oto .writer-photo-section .item-5 {
top: 52.5%;
}
.profile-oto .writer-photo-section .item-6 {
top: 39.5%;
}
.profile-oto .writer-photo-section .item-1 .collage-caption {
left: 38%;
margin-right: -6%;
}
.profile-oto .writer-photo-section .item-2 .collage-caption {
top: 59%;
}
.profile-oto .writer-photo-section .item-4 .collage-caption {
top: 37%;
left: -33%;
}
.profile-oto .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-oto .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ゆう) --- */
.profile-yuu .writer-header .header-graphic h2 {
left: 78%;
}
.profile-yuu .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-yuu .name-main {
margin-left: 0;
}
.profile-yuu .web-links-box {
margin-top: 23rem;
margin-bottom: 6.4rem;
}
.profile-yuu .central-image-area .img-1 {
left: -10%;
top: 0rem;
width: 78%;
}
.profile-yuu .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 68%;
}
.profile-yuu .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-yuu .writer-photo-section .item-1 {
top: -4.4%;
}
.profile-yuu .writer-photo-section .item-3 {
top: 21%;
}
.profile-yuu .writer-photo-section .item-4 {
top: 28%;
}
.profile-yuu .writer-photo-section .item-5 {
top: 52.5%;
}
.profile-yuu .writer-photo-section .item-6 {
top: 39.5%;
}
.profile-yuu .writer-photo-section .item-1 .collage-caption {
left: 38%;
margin-right: -6%;
}
.profile-yuu .writer-photo-section .item-2 .collage-caption {
top: 59%;
}
.profile-yuu .writer-photo-section .item-4 .collage-caption {
top: 46%;
left: -33%;
}
.profile-yuu .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-yuu .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ドラ美) --- */
.profile-dorami .writer-header .header-graphic h2 {
left: 78%;
}
.profile-dorami .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-dorami .name-main {
margin-left: 0;
}
.profile-dorami .web-links-box {
margin-top: 22.5rem;
margin-bottom: 8.5rem;
}
.profile-dorami .central-image-area .img-1 {
left: -25%;
top: 0rem;
width: 78%;
}
.profile-dorami .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 66%;
}
.profile-dorami .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-dorami .writer-photo-section .item-1 {
top: -4.4%;
}
.profile-dorami .writer-photo-section .item-3 {
top: 21%;
}
.profile-dorami .writer-photo-section .item-4 {
top: 28%;
}
.profile-dorami .writer-photo-section .item-5 {
top: 49.5%;
}
.profile-dorami .writer-photo-section .item-6 {
top: 39.5%;
}
.profile-dorami .writer-photo-section .item-1 .collage-caption {
left: 38%;
margin-right: -6%;
}
.profile-dorami .writer-photo-section .item-2 .collage-caption {
top: 59%;
}
.profile-dorami .writer-photo-section .item-4 .collage-caption {
top: 41%;
left: -33%;
}
.profile-dorami .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-dorami .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ここる) --- */
.profile-cocoru .writer-header .header-graphic h2 {
left: 78%;
}
.profile-cocoru .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-cocoru .name-main {
margin-left: 0;
}
.profile-cocoru .web-links-box {
margin-top: 23.5rem;
margin-bottom: 4rem;
}
.profile-cocoru .central-image-area .img-1 {
left: -19%;
top: -1rem;
width: 74%;
}
.profile-cocoru .central-image-area .img-2 {
top: -0.8rem;
right: -2%;
width: 64%;
}
.profile-cocoru .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-cocoru .writer-photo-section .item-1 {
top: -4.4%;
}
.profile-cocoru .writer-photo-section .item-3 {
top: 20%;
}
.profile-cocoru .writer-photo-section .item-4 {
top: 28%;
}
.profile-cocoru .writer-photo-section .item-5 {
top: 49.5%;
}
.profile-cocoru .writer-photo-section .item-6 {
top: 39.5%;
}
.profile-cocoru .writer-photo-section .item-1 .collage-caption {
left: 38%;
margin-right: -6%;
}
.profile-cocoru .writer-photo-section .item-2 .collage-caption {
top: 59%;
}
.profile-cocoru .writer-photo-section .item-4 .collage-caption {
top: 41%;
left: -33%;
}
.profile-cocoru .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-cocoru .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (らあら) --- */
.profile-lala .writer-header .header-graphic h2 {
left: 78%;
}
.profile-lala .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-lala .name-main {
margin-left: 0;
}
.profile-lala .web-links-box {
margin-top: 23rem;
margin-bottom: 5.6rem;
}
.profile-lala .central-image-area .img-1 {
left: -14%;
top: 0rem;
width: 74%;
}
.profile-lala .central-image-area .img-2 {
top: 0.2rem;
right: -3%;
width: 66%;
}
.profile-lala .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-lala .writer-photo-section .item-3 {
left: -2%;
}
.profile-lala .writer-photo-section .item-4 {
top: 45%;
left: 45%;
width: 60%;
}
.profile-lala .writer-photo-section .item-5 {
top: 21.5%;
left: 28%;
width: 41%;
}
.profile-lala .writer-photo-section .item-1 .collage-caption {
left: 7%;
}
.profile-lala .writer-photo-section .item-2 .collage-caption {
top: 61%;
left: 35%;
}
.profile-lala .writer-photo-section .item-3 .collage-caption {
top: 63%;
left: 5%;
}
.profile-lala .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-lala .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (菊丸) --- */
.profile-kikumaru .writer-header .header-graphic h2 {
left: 78%;
}
.profile-kikumaru .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-kikumaru .name-main {
margin-left: 0;
}
.profile-kikumaru .web-links-box {
margin-top: 22rem;
margin-bottom: 7.5rem;
}
.profile-kikumaru .central-image-area .img-1 {
left: -18%;
top: 0rem;
width: 90%;
}
.profile-kikumaru .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 67%;
}
.profile-kikumaru .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-kikumaru .writer-photo-section .item-1 {
top: -4.2%;
}
.profile-kikumaru .writer-photo-section .item-2 {
top: -4.26%;
}
.profile-kikumaru .writer-photo-section .item-3 {
left: -2%;
width: 52%;
}
.profile-kikumaru .writer-photo-section .item-4 {
top: 42%;
left: 43%;
}
.profile-kikumaru .writer-photo-section .item-5 {
left: 25%;
width: 45%;
}
.profile-kikumaru .writer-photo-section .item-1 .collage-caption {
left: 5%;
}
.profile-kikumaru .writer-photo-section .item-2 .collage-caption {
top: 61%;
left: 36%;
}
.profile-kikumaru .writer-photo-section .item-4 .collage-caption {
top: 63%;
left: 8%;
}
.profile-kikumaru .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-kikumaru .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ガンちゃん) --- */
.profile-gunchan .writer-header .header-graphic h2 {
left: 78%;
}
.profile-gunchan .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-gunchan .web-links-box {
margin-top: 22rem;
margin-bottom: 4.8rem;
}
.profile-gunchan .central-image-area .img-1 {
left: -18%;
top: 0rem;
width: 90%;
}
.profile-gunchan .central-image-area .img-2 {
top: 0.2rem;
right: -2%;
width: 67%;
}
.profile-gunchan .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-gunchan .writer-photo-section .item-1 {
top: -4.2%;
}
.profile-gunchan .writer-photo-section .item-2 {
top: -4.26%;
}
.profile-gunchan .writer-photo-section .item-3 {
left: -2%;
width: 52%;
}
.profile-gunchan .writer-photo-section .item-4 {
top: 46%;
left: 42%;
}
.profile-gunchan .writer-photo-section .item-5 {
left: 25%;
width: 45%;
}
.profile-gunchan .writer-photo-section .item-1 .collage-caption {
top: 73%;
left: 5%;
}
.profile-gunchan .writer-photo-section .item-2 .collage-caption {
top: 73%;
left: 36%;
}
.profile-gunchan .writer-photo-section .item-4 .collage-caption {
top: 56%;
left: 8%;
}
.profile-gunchan .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-gunchan .recruitment-box {
bottom: 17rem;
}
/* ---ライター個別調整 (ヘミニク) --- */
.profile-heminik .writer-header .header-graphic h2 {
left: 78%;
}
.profile-heminik .name-plate h1 {
padding-left: 1rem;
padding-right: 2rem;
}
.profile-heminik .name-main {
margin-left: 0;
}
.profile-heminik .web-links-box {
margin-top: 22rem;
margin-bottom: 3.1rem;
}
.profile-heminik .central-image-area .img-1 {
left: -18%;
top: 0rem;
width: 90%;
}
.profile-heminik .central-image-area .img-2 {
top: -0.8rem;
right: -2%;
width: 68%;
}
.profile-heminik .writer-photo-section {
margin-top: 1rem;
margin-bottom: -18.5rem
}
.profile-heminik .writer-photo-section .item-1 {
top: -4.2%;
}
.profile-heminik .writer-photo-section .item-2 {
top: -4.26%;
}
.profile-heminik .writer-photo-section .item-3 {
left: -2%;
top: 29%;
width: 50%;
}
.profile-heminik .writer-photo-section .item-4 {
top: 29%;
left: 51%;
width: 52%;
}
.profile-heminik .writer-photo-section .item-5 {
left: -2%;
top: 52%;
width: 58%;
}
.profile-heminik .writer-photo-section .item-1 .collage-caption {
left: 5%;
}
.profile-heminik .writer-photo-section .item-2 .collage-caption {
top: 71%;
left: 36%;
}
.profile-heminik .writer-photo-section .item-4 .collage-caption {
top: 11%;
left: -3%;
}
.profile-heminik .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -7.5rem;
}
.profile-heminik .recruitment-box {
bottom: 17rem;
}
}
/* --- スマートフォン表示用の調整 (幅768px以下) --- */
@media screen and (max-width: 768px) {
/* --- 親コンテナの左右の余白をスマホ用に --- */
body.page-writer-profile .writer-container {
padding: 0 0.5rem 3rem 0.8rem;
}
/* --- ヘッダー --- */
.writer-header {
padding: 20px 0 60px 0; /* 下の余白を調整 */
}
.writer-header::after {
height: 40px; /* ギザギザの高さを調整 */
}
.writer-header .header-graphic img {
transform: translateX(-45%);
/*width: 120%;*/
max-width: 46vw;
/*left: -13%;*/
}
.writer-header .header-graphic h2 {
font-size: 3.1vw;
left: 71%;
width: 90%;
}
.writer-header .header-graphic h2 {
text-shadow: 2px 2px 0 #0045f2, 4px 4px 6px rgba(0, 0, 0, 0);
}
.writer-intro-section {
margin-top: -5rem;
margin-bottom: -5rem;
position: relative;
z-index: 2;
background-image: url(https://www.plantopia.co.jp/images/jyanjyan_gizagizatop.png);
background-size: 100% auto;
background-repeat: no-repeat;
padding: 3rem 0 10px 0;
color: #000;
}
.writer-intro-section::before {
content: '';
position: absolute;
z-index: -1;
top: 2.6%;
left: 0;
right: 0;
bottom: 0;
background-color: #b2f759;
border-top: 0.3rem solid #000;
}
/* ★★★ メインの2列グリッドを1列に変更 ★★★ */
.intro-grid-container {
grid-template-columns: 1fr 1fr; /* 2列レイアウトに変更 */
gap: 15px; /* ★スマホ用に隙間を調整 */
margin-top: 1vw;
position: relative; /* フィーチャーボックスの基準点として */
}
/* --- フィーチャーボックス --- */
.special-feature-box {
position: absolute;
top: -11vw;
left: -2vw;
width: 52vw;
/*margin-bottom: 20px;*/
z-index: 10;
}
.feature-logo {
width: 74%;
left: 7%;
margin-bottom: -25%;
}
.feature-content {
padding: 27% 6vw 9vw 6vw;
}
.feature-content::before {
top: 6vw;
left: 6vw;
right: 6vw;
bottom: 6vw;
}
.feature-content h4 {
font-size: 3.5vw;
margin: -1vw 3vw;
margin-bottom: 0.2vw;
}
.feature-content p {
font-size: 2.7vw;
/* line-height: 1.5; */
margin: 0 2.5vw;
}
.feature-content::after {
border-width: 5vw;
}
/* ★ PC用のアニメーションスタイルを、スマホ表示の時だけ上書きします */
body.page-writer-profile .special-feature-box.scroll-item {
/* ★ PC用の「左にずらす」transformを、汎用の「下から」のtransformに戻します */
/*transform: translateY(30px) !important;*/
transform: translateX(-20px) !important;
/* ★ PC用の transition: none を、汎用の transition に戻します */
transition: opacity 1s, transform 1s !important;
}
.web-links-box {
margin-top: 85vw; /* 上の余白をリセット */
}
.web-links-box h4 { font-size: 3.0vw; }
.web-links-box li { font-size: 2.4vw; }
.web-links-box ul {
margin: 0 0 0.8rem 0;
}
/* --- 右列（名前や画像） --- */
.intro-right-column .name-plate {
gap: 0.2rem 0.4rem;
margin-top: 0.5rem;
margin-bottom: 3rem;
margin-left: -0.5rem;
flex-direction: column;
align-items: flex-start;
}
.intro-right-column::before,
.name-plate::before,
.follower-count::before {
display: block; /* ★非表示にしていた縦線を再表示 */
background-color: transparent;
}
.intro-right-column .name-plate::before {
left: -6%;
width: 0.3rem;
}
.follower-count {
padding: 0;
}
.name-plate {
justify-content: flex-start;
line-height: 1
}
.name-plate h1 {
font-size: 9vw;
margin-bottom: 0 !important;
}
.follower-count span { font-size: 10vw; }
.affiliation { justify-content: flex-start; }
.follower-count p {
font-size: 1.6vw;
margin-bottom: 0.1rem;
}
.affiliation {
gap: 0.5rem;
margin-bottom: -1rem;
}
.affiliation p {
font-size: 2.9vw;
line-height: 1.5;
}
.central-image-area .overlay-image {
position: relative;
}
/* --- 1. 両方の画像に共通のスタイルを設定 --- */
.central-image-area .img-1{
/* 横位置を中央に */
left: 50%;
right: auto;
min-width: 115% !important;
transform: translateX(-50%);
margin-top: -4vw;
margin-left: -5vw;
margin-bottom: -8vw;
}
.central-image-area .img-2 {
/* 横位置を中央に */
left: 50%;
right: auto;
min-width: 115% !important;
transform: translateX(-50%);
margin-top: 0;
margin-left: -5vw;
margin-bottom: -8vw;
}
.intro-text {
font-size: 3.0vw;
padding: 4vw 2vw;
margin-bottom: 3rem;
}
/* --- 2. img-1 (上の画像) の縦位置を指定 --- */
.central-image-area .img-1 {
top: 15%;
}
/* --- 3. img-2 (下の画像) の縦位置を指定 --- */
.central-image-area .img-2 {
top: 55%;
}
/* --- 4. スライドアニメーションを縦並び用に再設定 --- */
/* アニメーション前の初期状態 */
.central-image-area .img-1 {
/* ★PC用のtransformを完全に上書き。中央揃えの状態から、さらに左にずらす */
transform: translateX(-50%) translateX(-100px);
}
.central-image-area .img-2 {
/* ★PC用のtransformを完全に上書き。中央揃えの状態から、さらに右にずらす */
transform: translateX(-50%) translateX(100px);
}
/* アニメーション実行後（is-visibleが付いた時） */
.central-image-area.is-visible .img-1,
.central-image-area.is-visible .img-2 {
/* ★PC用のtransformを完全に上書き。中央揃えの位置に戻す */
transform: translateX(-50%);
}
/* --- 写真コラージュ --- */
.writer-photo-section {
margin-bottom: -20vw;
margin-top: 2vw;
}
/*.collage-container { height: 220vw; }*/
.writer-photo-section .item-1, .writer-photo-section .item-2, .writer-photo-section .item-3, .writer-photo-section .item-4, .writer-photo-section .item-5, .writer-photo-section .item-6 { width: 55%; }
.writer-photo-section .item-1 {
top: 0;
left: -1vw;
}
.writer-photo-section .item-2 {
top: 1vw;
right: -3vw;
width: 47vw;
z-index: 2;
}
.writer-photo-section .item-3 {
top: 14vw;
left: -2vw;
width: 47vw;
}
.writer-photo-section .item-3 .collage-caption {
top: 35vw;
left: 1vw;
}
.writer-photo-section .item-4 {
top: 37vw;
right: -3vw;
width: 54vw;
}
.writer-photo-section .item-4 .collage-caption {
top: 34vw;
left: 4vw;
width: 40vw;
}
.writer-photo-section .item-5 {
top: 67vw;
left: -2vw;
width: 45vw;
}
.writer-photo-section .item-5 .collage-caption {
top: 27vw;
left: 3vw;
}
.writer-photo-section .item-6 {
top: 89vw;
right: 1vw;
width: 43vw;
}
.writer-photo-section .collage-caption { font-size: 3.5vw; border-width: 1rem; }
.writer-photo-section .item-2 .collage-caption {
left: -10%;
border-width: 2.5vw;
border: 0.8vw solid #000000;
padding: 1.5vw 0;
top: -5vw;
left: -4vw;
height: 39vw;
/* width: 12vw; */
}
.writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
/* --- 求人ボックス --- */
.recruitment-box {
bottom: 10vw;
right: -2vw;
top: auto;
left: auto;
height: 28vw;
}
.recruitment-content h4 {
margin: -1.5vw 0 1vw 0;
font-size: 2.6vw;
font-weight: 900;
}
.recruitment-content li {
font-size: 2.4vw;
font-weight: bold;
line-height: 1.6;
}
/*.recruitment-box { width: 40vw; height: 40vw; bottom: 5%; right: 5%; }
.recruitment-robot { height: 8vw; top: -3vw; }
.recruitment-content h4 { font-size: 3.5vw; margin-bottom: 10px; }
.recruitment-content li { font-size: 3vw; line-height: 1.6; }*/
/* --- お問い合わせフッター --- */
/*.cta-inner-container { flex-direction: column; padding-bottom: 20px; margin-bottom: 0; }
.cta-title { font-size: 4vw; }
.cta-message p { font-size: 3.5vw; }
.cta-details { text-align: center; }
.jagged-divider { height: 30px; }*/
.jagged-divider {
height: 6vw;
background-size: 100% auto;
background-repeat: no-repeat;
}
/* --- 1. 外側のコンテナ(.cta-inner-container)を縦積みに --- */
.cta-inner-container {
flex-direction: column; /* ★要素を縦に並べます */
align-items: center; /* ★中央揃えにします */
gap: 20px; /* ★各要素の間に隙間を設けます */
}
/* --- 2. 左側のボックス(.cta-box-featured)の中身も縦積みに --- */
.cta-box-featured {
flex-direction: column; /* ★タイトルとメッセージを縦に並べます */
gap: 15px;
}
/* --- 3. 各パーツのテキストを中央揃えに --- */
.cta-message p,
.cta-details {
text-align: center;
}
/* --- 4. メッセージ内のテキストが改行されるように --- */
.cta-message p {
white-space: normal; /* ★nowrapを解除して、
タグが効くようにします */
}
.cta-title {
font-size: 5.2vw;
}
.cta-message img {
height: 55px;
}
.cta-message p {
font-size: 3.5vw;
}
.cta-details {
font-size: 3.5vw;
}
.cta-inner-container {
flex-direction: column;
align-items: center;
gap: 4px;
}
.cta-inner-container {
padding-bottom: 6rem;
margin-bottom: -9rem;
}
/* ★ アニメーション前の初期状態を再設定 */
.writer-header .header-graphic img.scroll-item {
/* PC用のアニメーション(animation-name)を一旦リセット */
animation: none;
/* ★スマホ用の正しい初期位置をtransformで指定 */
transform: translateX(-25%);
}
/* ★ 表示されたら、スマホ用アニメーションを実行 */
.writer-header .header-graphic img.scroll-item.is-visible {
animation-name: rotate-and-zoom-mobile;
animation-duration: 3s; /* アニメーションの時間 */
animation-fill-mode: forwards; /* ★アニメーション後、最後の状態を維持 */
animation-timing-function: linear;
}
/* ---13.じゃんじゃんプロフィール 女性バージョン (配色変更) .theme-female スマホ表示用の調整 (幅768px以下) --- */
.theme-female .writer-header .header-graphic h2 {
text-shadow: 2px 2px 0 #ff0000, 4px 4px 6px rgba(0, 0, 0, 0);
}
.theme-female .writer-intro-section::before {
border-top: 0.3rem solid #000;
}
/* ---13.じゃんじゃんプロフィール ライター個別調整 スマホ表示用の調整 (幅768px以下) --- */
/* ---ライター個別調整 スマホ表示用の調整 (フェアリン) --- */
.profile-fairrin .writer-header .header-graphic h2 {
font-size: 3.1vw;
left: 58%;
}
.profile-fairrin .rotating-container-fairrin {
width: 69vw;
left: -20vw;
top: -6vw;
}
.profile-fairrin .intro-right-column .name-plate {
/* ★ inline-flex や width: auto を解除し、ブロック要素に戻す */
display: flex;
width: 100%;
/* バッチと同じように左寄せにする */
justify-content: flex-start;
flex-wrap: wrap;
margin-left: -0.2rem;
}
/* 所属情報のテキストも調整 */
.profile-fairrin .affiliation {
width: 100%;
justify-content: flex-start; /* 左寄せ */
}
.profile-fairrin .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
/* --- コンテナをグリッド化 --- */
.profile-fairrin .intro-grid-container {
display: flex;
flex-direction: column;
}
/* 右カラム（写真エリア）を1番目に */
.profile-fairrin .intro-right-column {
order: 1;
width: 50%;
/* margin-bottom: 30px; */
position: relative;
left: 50%;
}
/* 左カラム（リンクエリア）を2番目に */
.profile-fairrin .intro-left-column {
order: 2;
width: 100%;
}
/* --- 2. WEBリンクボックスのレイアウト変更 (変則グリッド) --- */
.profile-fairrin .web-links-box {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1rem;
align-items: start;
width: 100%;
margin-top: -1rem;
}
/* [上段] 1つ目の項目 (WEBサイト) -> 横幅いっぱい */
.profile-fairrin .web-links-box h4:nth-of-type(1),
.profile-fairrin .web-links-box ul:nth-of-type(1) {
grid-column: 1 / -1;
}
/* [下段・左] 2つ目の項目 (WEB番組) -> 左列 */
.profile-fairrin .web-links-box h4:nth-of-type(2) { grid-column: 1; grid-row: 3; }
.profile-fairrin .web-links-box ul:nth-of-type(2) { grid-column: 1; grid-row: 4; }
/* [下段・右] 3つ目の項目 (CS番組) -> 右列 */
.profile-fairrin .web-links-box h4:nth-of-type(3) { grid-column: 2; grid-row: 3;}
.profile-fairrin .web-links-box ul:nth-of-type(3) { grid-column: 2; grid-row: 4; }
.profile-fairrin .special-feature-box {
z-index: 30;
}
.jagged-divider-pink {
margin-top: 1rem;
/* margin-bottom: -5rem; */
position: relative;
z-index: 2;
background-image: url(https://www.plantopia.co.jp/images/jyanjyan_gizagizamiddle.png);
background-size: 100% auto;
background-repeat: no-repeat;
/* padding: 3rem 0 10px 0; */
/* color: #000; */
height: 6vw;
display: none;
}
.profile-fairrin .intro-text {
margin-bottom: 9vw;
}
.profile-fairrin .intro-text .intro-line-top {
font-size: 3.64vw;
}
.profile-fairrin .intro-text .intro-line-bottom {
font-size: 3.6vw;
}
.profile-fairrin .intro-text::before {
display: none;
}
.profile-fairrin .feature-logo {
left: 3%;
}
/* --- フェアリンフェアリン --- */
.profile-fairrin .writer-photo-section .item-1 {
top: 1vw;
/* right: 41vw; */
left: -5vw;
width: 54vw;
z-index: 3;
}
.profile-fairrin .writer-photo-section .item-1 .collage-caption {
top: -8vw;
left: 11vw;
margin-right: -7vw;
}
.profile-fairrin .writer-photo-section .item-2 {
top: -9vw;
right: -5vw;
width: 49vw;
z-index: 2;
}
.profile-fairrin .writer-photo-section .item-2 .collage-caption {
top: 41vw;
left: 28vw;
margin-bottom: -40vw;
}
.profile-fairrin .writer-photo-section .item-3 {
top: 35vw;
left: -5vw;
width: 26vw;
}
.profile-fairrin .writer-photo-section .item-4 {
top: 26vw;
right: 18vw;
width: 52vw;
}
.profile-fairrin .writer-photo-section .item-4 .collage-caption {
top: 44vw;
left: -1vw;
width: 37vw;
padding: 3vw;
}
.profile-fairrin .writer-photo-section .item-5 {
top: 74vw;
left: -5vw;
width: 40vw;
}
.profile-fairrin .writer-photo-section .item-5 .collage-caption {
top: 38vw;
left: 3vw;
}
.profile-fairrin .writer-photo-section .item-6 {
top: 103vw;
left: 21vw;
width: 48vw;
}
.profile-fairrin .writer-photo-section .item-7 {
top: 73vw;
right: -7vw;
width: 51vw;
}
.profile-fairrin .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-fairrin .cta-inner-container {
padding-bottom: 7rem;
margin-bottom: -9.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (レビン) --- */
.profile-levin .name-plate h1 {
padding-left: 0.7rem;
padding-right: 2rem;
}
.profile-levin .name-main {
margin-left: 0;
}
.profile-levin .central-image-area .img-1 {
left: 24vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-levin .central-image-area .img-2 {
top: 2vw;
left: 27vw;
width: 68%;
min-width: 105% !important;
}
.profile-levin .intro-text .intro-line-top {
font-size: 3.8vw;
}
.profile-levin .intro-text .intro-line-bottom {
font-size: 4.6vw;
}
.profile-levin .writer-photo-section {
margin-top: 4vw;
margin-bottom: -31vw;
}
.profile-levin .writer-photo-section .item-1 {
top: -6vw;
/* right: 41vw; */
left: -5vw;
width: 44vw;
z-index: 3;
}
.profile-levin .writer-photo-section .item-1 .collage-caption {
top: -2vw;
left: 29vw;
/* margin-right: 13vw; */
/* margin-top: -7vw; */
margin-bottom: 8vw;
padding: 2.5vw 1vw;
}
.profile-levin .writer-photo-section .item-2 {
top: -9vw;
right: -5vw;
width: 56vw;
z-index: 6;
}
.profile-levin .writer-photo-section .item-2 .collage-caption {
top: 36vw;
left: 12vw;
margin-right: 2vw;
padding: 0 2vw;
}
.profile-levin .writer-photo-section .item-3 {
top: 39vw;
left: -5vw;
width: 40vw;
z-index: 2;
}
.profile-levin .writer-photo-section .item-4 {
top: 32vw;
right: 26vw;
width: 46vw;
z-index: 5;
}
.profile-levin .writer-photo-section .item-5 {
top: 66vw;
left: -5vw;
width: 53vw;
z-index: 5;
}
.profile-levin .writer-photo-section .item-5 .collage-caption {
top: 26vw;
left: 5vw;
padding: 0 2vw;
}
.profile-levin .writer-photo-section .item-6 {
top: 43vw;
left: 43vw;
width: 52vw;
z-index: 1;
}
.profile-levin .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-levin .recruitment-box {
bottom: 21vw;
}
.profile-levin .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (しのけん) --- */
.profile-shinoken .writer-header .header-graphic h2 {
left: 70%;
}
.profile-shinoken .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-shinoken .feature-logo {
left: 5%;
}
.profile-shinoken .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-shinoken .central-image-area .img-2 {
top: 1vw;
left: 25vw;
width: 68%;
min-width: 110% !important;
}
.profile-shinoken .intro-text .intro-line-top {
font-size: 4.6vw;
}
.profile-shinoken .intro-text .intro-line-bottom {
font-size: 3.5vw;
}
.profile-shinoken .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-shinoken .writer-photo-section .item-1 {
top: -9vw;
/* right: 41vw; */
left: -8vw;
width: 52vw;
z-index: 3;
}
.profile-shinoken .writer-photo-section .item-1 .collage-caption {
top: 43vw;
left: 6vw;
margin-right: 8vw;
/* margin-top: -7vw; */
margin-bottom: 8vw;
padding: 0vw 1.5vw;
}
.profile-shinoken .writer-photo-section .item-2 {
top: -10vw;
right: -6vw;
width: 64vw;
z-index: 2;
}
.profile-shinoken .writer-photo-section .item-2 .collage-caption {
top: 0vw;
left: 46vw;
/* margin-right: 3vw; */
margin-bottom: 0vw;
padding: 1.5vw 0;
}
.profile-shinoken .writer-photo-section .item-3 {
top: 26vw;
left: 39vw;
width: 40vw;
z-index: 1;
}
.profile-shinoken .writer-photo-section .item-5 {
top: 56vw;
right: 32vw;
width: 65vw;
z-index: 5;
}
.profile-shinoken .writer-photo-section .item-5 .collage-caption {
top: 4vw;
left: 35vw;
margin-bottom: -1vw;
padding: 2.5vw 0;
}
.profile-shinoken .writer-photo-section .item-6 {
top: 40vw;
left: 56vw;
width: 40vw;
z-index: 5;
}
.profile-shinoken .writer-photo-section .item-6 .collage-caption {
top: 31vw;
left: -6vw;
margin-right: 2vw;
padding: 0 2vw;
}
.profile-shinoken .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-shinoken .recruitment-box {
bottom: 28vw;
}
.profile-shinoken .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ドテチン) --- */
.profile-dote .writer-header .header-graphic h2 {
left: 78%;
}
.profile-dote .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-dote .feature-logo {
left: 8%;
}
.profile-dote .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-dote .central-image-area .img-2 {
top: 1vw;
left: 26vw;
width: 68%;
min-width: 113% !important;
}
.profile-dote .intro-text .intro-line-top {
font-size: 3.5vw;
}
.profile-dote .intro-text .intro-line-bottom {
font-size: 4.6vw;
}
.profile-dote .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-dote .writer-photo-section .item-1 {
top: -11vw;
left: -7vw;
width: 61vw;
}
.profile-dote .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 7vw;
margin-bottom: 3vw;
padding: 1.5vw 0vw;
}
.profile-dote .writer-photo-section .item-2 {
top: -10vw;
right: -6vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-dote .writer-photo-section .item-2 .collage-caption {
top: 32vw;
left: 3vw;
margin-right: 6vw;
padding: 0 1.5vw;
}
.profile-dote .writer-photo-section .item-3 {
top: 34vw;
left: -7vw;
width: 55vw;
z-index: 4;
}
.profile-dote .writer-photo-section .item-3 .collage-caption {
top: 53vw;
left: 7vw;
padding: 0 1.5vw;
}
.profile-dote .writer-photo-section .item-4 {
top: 21vw;
right: -2vw;
width: 54vw;
z-index: 0;
}
.profile-dote .writer-photo-section .item-4 .collage-caption {
top: 17vw;
left: 35vw;
margin-bottom: 30vw;
padding: 2.5vw 0;
}
.profile-dote .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-dote .recruitment-box {
bottom: 28vw;
}
.profile-dote .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (わるぺこ) --- */
.profile-warupeco .writer-header .header-graphic h2 {
left: 80%;
}
.profile-warupeco .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-warupeco .feature-logo {
left: 5%;
}
.profile-warupeco .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-warupeco .central-image-area .img-1 {
left: 29vw;
top: -3vw;
width: 77%;
min-width: 114% !important;
}
.profile-warupeco .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-warupeco .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-warupeco .writer-photo-section .item-1 {
top: -11vw;
left: -7vw;
width: 61vw;
}
.profile-warupeco .writer-photo-section .item-1 .collage-caption {
top: 26vw;
left: 6vw;
margin-right: 8vw;
padding: 0 1.5vw;
}
.profile-warupeco .writer-photo-section .item-2 {
top: -13vw;
right: -5vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-warupeco .writer-photo-section .item-2 .collage-caption {
top: 51vw;
left: 18vw;
margin-right: 2vw;
padding: 0 1.5vw;
}
.profile-warupeco .writer-photo-section .item-3 {
top: 34vw;
left: -7vw;
width: 55vw;
z-index: 4;
}
.profile-warupeco .writer-photo-section .item-3 .collage-caption {
top: 49vw;
left: 6vw;
padding: 0 1.5vw;
}
.profile-warupeco .writer-photo-section .item-4 {
top: 61vw;
left: 42vw;
width: 54vw;
z-index: 0;
}
.profile-warupeco .writer-photo-section .item-5 {
top: 33vw;
}
.profile-warupeco .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-warupeco .recruitment-box {
bottom: 28vw;
}
.profile-warupeco .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (千奈里) --- */
.profile-chinari .writer-header .header-graphic h2 {
left: 80%;
}
.profile-chinari .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-chinari .name-main {
margin-left: 0;
}
.profile-chinari .feature-logo {
left: 5%;
}
.profile-chinari .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-chinari .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-chinari .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-chinari .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-chinari .writer-photo-section .item-1 {
top: -11vw;
left: -5vw;
width: 61vw;
}
.profile-chinari .writer-photo-section .item-1 .collage-caption {
top: 29vw;
left: 6vw;
margin-right: 8vw;
padding: 0 1.5vw;
}
.profile-chinari .writer-photo-section .item-2 {
top: -13vw;
right: -2vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-chinari .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 18vw;
margin-right: 0vw;
padding: 0 1.5vw;
}
.profile-chinari .writer-photo-section .item-3 {
top: 34vw;
left: -3vw;
width: 55vw;
z-index: 4;
}
.profile-chinari .writer-photo-section .item-3 .collage-caption {
top: 49vw;
left: 6vw;
padding: 0 1.5vw;
}
.profile-chinari .writer-photo-section .item-4 {
top: 56vw;
left: 36vw;
width: 60vw;
z-index: 0;
}
.profile-chinari .writer-photo-section .item-5 {
top: 34vw;
left: 25vw;
}
.profile-chinari .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-chinari .recruitment-box {
bottom: 28vw;
}
.profile-chinari .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (くまちゃむ) --- */
.profile-kumacham .writer-header .header-graphic h2 {
left: 80%;
}
.profile-kumacham .name-plate h1 {
padding-left: 0;
padding-right: 0;
margin-left: 1vw;
}
.profile-kumacham .feature-logo {
left: 5%;
}
.profile-kumacham .web-links-box {
margin-top: 82vw;
margin-bottom: 1vw;
}
.profile-kumacham .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-kumacham .central-image-area .img-2 {
top: 1vw;
left: 28vw;
width: 66%;
min-width: 108% !important;
}
.profile-kumacham .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-kumacham .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-kumacham .writer-photo-section .item-1 .collage-caption {
top: 29vw;
left: 6vw;
margin-right: 8vw;
padding: 0 1.5vw;
}
.profile-kumacham .writer-photo-section .item-2 {
top: -13vw;
right: -4vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-kumacham .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 19.5vw;
margin-right: 1.0vw;
padding: 0 1.5vw;
}
.profile-kumacham .writer-photo-section .item-3 {
top: 34vw;
left: -6vw;
width: 55vw;
z-index: 4;
}
.profile-kumacham .writer-photo-section .item-3 .collage-caption {
top: 49vw;
left: 6vw;
padding: 0 1.5vw;
}
.profile-kumacham .writer-photo-section .item-4 {
top: 56vw;
left: 36vw;
width: 60vw;
z-index: 0;
}
.profile-kumacham .writer-photo-section .item-5 {
top: 34vw;
left: 25vw;
}
.profile-kumacham .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-kumacham .recruitment-box {
bottom: 28vw;
}
.profile-kumacham .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (黒咲さゆ) --- */
.profile-sayu .writer-header .header-graphic h2 {
left: 80%;
}
.profile-sayu .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-sayu .name-plate h1 span {
transform: scaleX(1.05);
}
.profile-sayu .feature-logo {
left: 5%;
}
.profile-sayu .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-sayu .central-image-area .img-1 {
left: 27vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-sayu .central-image-area .img-2 {
top: 1vw;
left: 26vw;
width: 66%;
min-width: 108% !important;
}
.profile-sayu .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-sayu .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-sayu .writer-photo-section .item-1 .collage-caption {
top: 29vw;
left: 6vw;
margin-right: 8vw;
padding: 0 1.5vw;
}
.profile-sayu .writer-photo-section .item-2 {
top: -13vw;
right: -4vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-sayu .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 19.5vw;
margin-right: 1.0vw;
padding: 0 1.5vw;
}
.profile-sayu .writer-photo-section .item-3 {
top: 34vw;
left: -6vw;
width: 55vw;
z-index: 4;
}
.profile-sayu .writer-photo-section .item-3 .collage-caption {
top: 49vw;
left: 6vw;
padding: 0 1.5vw;
}
.profile-sayu .writer-photo-section .item-4 {
top: 56vw;
left: 36vw;
width: 60vw;
z-index: 0;
}
.profile-sayu .writer-photo-section .item-5 {
top: 34vw;
left: 25vw;
}
.profile-sayu .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-sayu .recruitment-box {
bottom: 28vw;
}
.profile-sayu .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (りんか隊長) --- */
.profile-rinka .writer-header .header-graphic h2 {
left: 80%;
}
.profile-rinka .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-rinka .name-main h1 span {
transform: scaleX(1.0);
}
.profile-rinka .feature-logo {
left: 5%;
}
.profile-rinka .web-links-box {
margin-top: 82vw;
margin-bottom: 1vw;
}
.profile-rinka .central-image-area .img-1 {
left: 27vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-rinka .central-image-area .img-2 {
top: 1vw;
left: 28vw;
width: 66%;
min-width: 108% !important;
}
.profile-rinka .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-rinka .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-rinka .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 27vw;
margin-right: -4vw;
padding: 0 1.5vw;
}
.profile-rinka .writer-photo-section .item-2 {
top: -13vw;
right: -6vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-rinka .writer-photo-section .item-2 .collage-caption {
top: 50vw;
left: 29.5vw;
margin-bottom: -23vw;
padding: 1.5vw 0;
}
.profile-rinka .writer-photo-section .item-3 {
top: 15vw;
left: -6vw;
width: 32vw;
z-index: 0;
}
.profile-rinka .writer-photo-section .item-4 {
top: 35vw;
left: 20vw;
width: 57vw;
z-index: 4;
}
.profile-rinka .writer-photo-section .item-4 .collage-caption {
top: 20vw;
left: -23vw;
/* margin-left: 0vw; */
margin-right: 36vw;
padding: 0 1.5vw;
}
.profile-rinka .writer-photo-section .item-5 {
top: 68vw;
left: -6vw;
width: 53vw;
}
.profile-rinka .writer-photo-section .item-6 {
top: 45vw;
left: 38vw;
width: 75vw;
z-index: 1;
}
.profile-rinka .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-rinka .recruitment-box {
bottom: 28vw;
}
.profile-rinka .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (音華花) --- */
.profile-oto .writer-header .header-graphic h2 {
left: 80%;
}
.profile-oto .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-oto .name-main {
margin-left: 0;
}
.profile-oto .feature-logo {
left: 5%;
}
.profile-oto .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-oto .central-image-area .img-1 {
left: 25vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-oto .central-image-area .img-2 {
top: 0vw;
left: 26vw;
width: 66%;
min-width: 108% !important;
}
.profile-oto .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-oto .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-oto .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 27vw;
margin-right: -4vw;
padding: 0 1.5vw;
}
.profile-oto .writer-photo-section .item-2 {
top: -13vw;
left: 50.5vw;
width: 48vw;
}
.profile-oto .writer-photo-section .item-2 .collage-caption {
top: 35vw;
left: 27.5vw;
margin-bottom: -6vw;
padding: 1.5vw 0;
}
.profile-oto .writer-photo-section .item-3 {
top: 16vw;
left: -6vw;
width: 32vw;
z-index: 0;
}
.profile-oto .writer-photo-section .item-4 {
top: 36vw;
left: 23vw;
width: 53vw;
z-index: 4;
}
.profile-oto .writer-photo-section .item-4 .collage-caption {
top: 8vw;
left: -26vw;
/* margin-left: 0vw; */
margin-right: 43vw;
padding: 0 1.5vw;
}
.profile-oto .writer-photo-section .item-5 {
top: 66vw;
left: -5vw;
width: 53vw;
}
.profile-oto .writer-photo-section .item-6 {
top: 51vw;
left: 35vw;
width: 64vw;
z-index: 1;
}
.profile-oto .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-oto .recruitment-box {
bottom: 28vw;
}
.profile-oto .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ゆう) --- */
.profile-yuu .writer-header .header-graphic h2 {
left: 80%;
}
.profile-yuu .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-yuu .name-main {
margin-left: 0;
}
.profile-yuu .feature-logo {
left: 5%;
}
.profile-yuu .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-yuu .central-image-area .img-1 {
left: 25vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-yuu .central-image-area .img-2 {
top: 0vw;
left: 26vw;
width: 66%;
min-width: 108% !important;
}
.profile-yuu .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-yuu .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-yuu .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 27vw;
margin-right: -4vw;
padding: 0 1.5vw;
}
.profile-yuu .writer-photo-section .item-2 {
top: -13vw;
left: 50.5vw;
width: 48vw;
}
.profile-yuu .writer-photo-section .item-2 .collage-caption {
top: 35vw;
left: 27.5vw;
margin-bottom: -6vw;
padding: 1.5vw 0;
}
.profile-yuu .writer-photo-section .item-3 {
top: 16vw;
left: -6vw;
width: 32vw;
z-index: 0;
}
.profile-yuu .writer-photo-section .item-4 {
top: 36vw;
left: 24vw;
width: 53vw;
z-index: 4;
}
.profile-yuu .writer-photo-section .item-4 .collage-caption {
top: 9vw;
left: -25vw;
/* margin-left: 0vw; */
margin-right: 47vw;
padding: 0 1.5vw;
}
.profile-yuu .writer-photo-section .item-5 {
top: 66vw;
left: -5vw;
width: 53vw;
}
.profile-yuu .writer-photo-section .item-6 {
top: 51vw;
left: 35vw;
width: 64vw;
z-index: 1;
}
.profile-yuu .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-yuu .recruitment-box {
bottom: 28vw;
}
.profile-yuu .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ドラ美) --- */
.profile-dorami .writer-header .header-graphic h2 {
left: 80%;
}
.profile-dorami .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-dorami .name-main {
margin-left: 0;
}
.profile-dorami .feature-logo {
left: 5%;
}
.profile-dorami .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-dorami .central-image-area .img-1 {
left: 25vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-dorami .central-image-area .img-2 {
top: 0vw;
left: 26vw;
width: 66%;
min-width: 108% !important;
}
.profile-dorami .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-dorami .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-dorami .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 27vw;
margin-right: -4vw;
padding: 0 1.5vw;
}
.profile-dorami .writer-photo-section .item-2 {
top: -15vw;
left: 50.5vw;
width: 48vw;
}
.profile-dorami .writer-photo-section .item-2 .collage-caption {
top: 39vw;
left: 27.5vw;
margin-bottom: -11vw;
padding: 1.5vw 0;
}
.profile-dorami .writer-photo-section .item-3 {
top: 16vw;
left: -6vw;
width: 32vw;
z-index: 0;
}
.profile-dorami .writer-photo-section .item-4 {
top: 36vw;
left: 23vw;
width: 53vw;
z-index: 4;
}
.profile-dorami .writer-photo-section .item-4 .collage-caption {
top: 8vw;
left: -26vw;
/* margin-left: 0vw; */
margin-right: 43vw;
padding: 0 1.5vw;
}
.profile-dorami .writer-photo-section .item-5 {
top: 66vw;
left: -5vw;
width: 53vw;
}
.profile-dorami .writer-photo-section .item-6 {
top: 48vw;
left: 35vw;
width: 64vw;
z-index: 1;
}
.profile-dorami .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-dorami .recruitment-box {
bottom: 28vw;
}
.profile-dorami .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ここる) --- */
.profile-cocoru .writer-header .header-graphic h2 {
left: 80%;
}
.profile-cocoru .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-cocoru .name-main {
margin-left: 0;
}
.profile-cocoru .feature-logo {
left: 5%;
}
.profile-cocoru .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-cocoru .central-image-area .img-1 {
left: 25vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-cocoru .central-image-area .img-2 {
top: 0vw;
left: 26vw;
width: 66%;
min-width: 108% !important;
}
.profile-cocoru .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-cocoru .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-cocoru .writer-photo-section .item-1 .collage-caption {
top: 4vw;
left: 27vw;
margin-right: -4vw;
padding: 0 1.5vw;
}
.profile-cocoru .writer-photo-section .item-2 {
top: -15vw;
left: 50.5vw;
width: 48vw;
}
.profile-cocoru .writer-photo-section .item-2 .collage-caption {
top: 39vw;
left: 27.5vw;
margin-bottom: -11vw;
padding: 1.5vw 0;
}
.profile-cocoru .writer-photo-section .item-3 {
top: 16vw;
left: -6vw;
width: 32vw;
z-index: 0;
}
.profile-cocoru .writer-photo-section .item-4 {
top: 36vw;
left: 23vw;
width: 53vw;
z-index: 4;
}
.profile-cocoru .writer-photo-section .item-4 .collage-caption {
top: 8vw;
left: -26vw;
/* margin-left: 0vw; */
margin-right: 43vw;
padding: 0 1.5vw;
}
.profile-cocoru .writer-photo-section .item-5 {
top: 66vw;
left: -5vw;
width: 53vw;
}
.profile-cocoru .writer-photo-section .item-6 {
top: 48vw;
left: 35vw;
width: 64vw;
z-index: 1;
}
.profile-cocoru .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-cocoru .recruitment-box {
bottom: 28vw;
}
.profile-cocoru .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (らあら) --- */
.profile-lala .writer-header .header-graphic h2 {
left: 80%;
}
.profile-lala .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-lala .name-main {
margin-left: 0;
}
.profile-lala .feature-logo {
left: 5%;
}
.profile-lala .web-links-box {
margin-top: 84vw;
margin-bottom: 1vw;
}
.profile-lala .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-lala .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-lala .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-lala .writer-photo-section .item-1 {
top: -12vw;
left: -5vw;
width: 61vw;
}
.profile-lala .writer-photo-section .item-1 .collage-caption {
top: 33vw;
left: 3vw;
margin-right: 21vw;
padding: 0 1.5vw;
}
.profile-lala .writer-photo-section .item-2 {
top: -11vw;
right: -5vw;
width: 49vw;
/*z-index: 2;*/
}
.profile-lala .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 21vw;
margin-right: 1vw;
padding: 0 1.5vw;
}
.profile-lala .writer-photo-section .item-3 {
top: 40vw;
left: -5vw;
width: 55vw;
z-index: 4;
}
.profile-lala .writer-photo-section .item-3 .collage-caption {
top: 43vw;
left: 6vw;
padding: 0 1.5vw;
}
.profile-lala .writer-photo-section .item-4 {
top: 59vw;
left: 40vw;
width: 60vw;
z-index: 0;
}
.profile-lala .writer-photo-section .item-5 {
top: 30vw;
left: 30vw;
}
.profile-lala .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-lala .recruitment-box {
bottom: 28vw;
}
.profile-lala .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (菊丸) --- */
.profile-kikumaru .writer-header .header-graphic h2 {
left: 80%;
}
.profile-kikumaru .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-kikumaru .name-main {
margin-left: 0;
}
.profile-kikumaru .feature-logo {
left: 5%;
}
.profile-kikumaru .web-links-box {
margin-top: 86vw;
margin-bottom: 1vw;
}
.profile-kikumaru .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-kikumaru .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-kikumaru .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-kikumaru .writer-photo-section .item-1 {
top: -11vw;
left: -5vw;
width: 61vw;
}
.profile-kikumaru .writer-photo-section .item-1 .collage-caption {
top: 27vw;
left: 4vw;
margin-right: 16vw;
padding: 0 1.5vw;
}
.profile-kikumaru .writer-photo-section .item-2 {
top: -13vw;
right: -4vw;
width: 51vw;
/*z-index: 2;*/
}
.profile-kikumaru .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 18vw;
margin-right: 2vw;
padding: 0 1.5vw;
}
.profile-kikumaru .writer-photo-section .item-3 {
top: 32vw;
left: -7vw;
width: 53vw;
z-index: 4;
}
.profile-kikumaru .writer-photo-section .item-4 {
top: 51vw;
left: 40vw;
width: 63vw;
z-index: 0;
}
.profile-kikumaru .writer-photo-section .item-4 .collage-caption {
top: 15vw;
left: 3vw;
margin-right: 31vw;
padding: 0 1.5vw;
}
.profile-kikumaru .writer-photo-section .item-5 {
top: 30vw;
left: 19vw;
width: 43vw;
}
.profile-kikumaru .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-kikumaru .recruitment-box {
bottom: 28vw;
}
.profile-kikumaru .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ガンちゃん) --- */
.profile-gunchan .writer-header .header-graphic h2 {
left: 80%;
}
.profile-gunchan .name-plate h1 {
padding-left: 0;
padding-right: 0;
}
.profile-gunchan .name-main h1 span {
transform: scaleX(1.0);
}
.profile-gunchan .feature-logo {
left: 5%;
}
.profile-gunchan .web-links-box {
margin-top: 85vw;
margin-bottom: 1vw;
}
.profile-gunchan .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-gunchan .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-gunchan .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-gunchan .writer-photo-section .item-1 {
top: -11vw;
left: -5vw;
width: 61vw;
}
.profile-gunchan .writer-photo-section .item-1 .collage-caption {
top: 27vw;
left: 4vw;
margin-right: 16vw;
padding: 0 1.5vw;
}
.profile-gunchan .writer-photo-section .item-2 {
top: -13vw;
right: -4vw;
width: 51vw;
/*z-index: 2;*/
}
.profile-gunchan .writer-photo-section .item-2 .collage-caption {
top: 44vw;
left: 18vw;
margin-right: 2vw;
padding: 0 1.5vw;
}
.profile-gunchan .writer-photo-section .item-3 {
top: 32vw;
left: -10vw;
width: 53vw;
z-index: 4;
}
.profile-gunchan .writer-photo-section .item-4 {
top: 48vw;
left: 25vw;
width: 73vw;
z-index: 0;
}
.profile-gunchan .writer-photo-section .item-4 .collage-caption {
top: 21vw;
left: 17vw;
margin-right: 27vw;
padding: 0 1.5vw;
}
.profile-gunchan .writer-photo-section .item-5 {
top: 30vw;
left: 19vw;
width: 43vw;
}
.profile-gunchan .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-gunchan .recruitment-box {
bottom: 28vw;
}
.profile-gunchan .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
/* ---ライター個別調整 スマホ表示用の調整 (ヘミニク) --- */
.profile-heminik .writer-header .header-graphic h2 {
left: 80%;
}
.profile-heminik .name-plate h1 {
padding-left: 0.4rem;
padding-right: 0;
}
.profile-heminik .feature-logo {
left: 5%;
}
.profile-heminik .web-links-box {
margin-top: 85vw;
margin-bottom: 1vw;
}
.profile-heminik .central-image-area .img-1 {
left: 29vw;
top: -1vw;
width: 77%;
min-width: 114% !important;
}
.profile-heminik .central-image-area .img-2 {
top: 1vw;
left: 27vw;
width: 68%;
min-width: 110% !important;
}
.profile-heminik .writer-photo-section {
margin-top: 6vw;
margin-bottom: -38vw;
}
.profile-heminik .writer-photo-section .item-1 {
top: -11vw;
left: -5vw;
width: 61vw;
}
.profile-heminik .writer-photo-section .item-1 .collage-caption {
top: 34vw;
left: 4vw;
margin-right: 13vw;
padding: 0 1.5vw;
}
.profile-heminik .writer-photo-section .item-2 {
top: -13vw;
right: -5vw;
width: 51vw;
z-index: 6;
}
.profile-heminik .writer-photo-section .item-2 .collage-caption {
top: 30vw;
left: 18vw;
margin-right: 2vw;
padding: 0 1.5vw;
}
.profile-heminik .writer-photo-section .item-3 {
top: 38vw;
left: -4vw;
width: 47vw;
z-index: 3;
}
.profile-heminik .writer-photo-section .item-4 {
top: 29vw;
left: 40vw;
width: 63vw;
z-index: 5;
}
.profile-heminik .writer-photo-section .item-4 .collage-caption {
top: 14vw;
left: 0vw;
margin-bottom: 32vw;
padding: 1.5vw 0;
}
.profile-heminik .writer-photo-section .item-5 {
top: 68vw;
left: -5vw;
width: 56vw;
}
.profile-heminik .writer-photo-section .collage-caption {
font-size: 2.4vw;
border-width: 1rem;
border: 0.8vw solid #000000;
padding: 0 1.8vw;
}
.profile-heminik .recruitment-box {
bottom: 28vw;
}
.profile-heminik .cta-inner-container {
padding-bottom: 5rem;
margin-bottom: -7.5rem;
}
}
/* --- 1. スマホ用の新しいアニメーションの内容を定義 --- */
@keyframes rotate-and-zoom-mobile {
0% {
/* スマホ用の左へのずれ(-25%)を維持しつつ、回転と拡大を開始 */
transform: translateX(-25%) scale(1) rotate(0deg);
}
50% {
/* 中間地点で拡大・回転 */
transform: translateX(-25%) scale(1.05) rotate(180deg);
}
100% {
/* 最終的に元の大きさに戻り、回転を完了 */
transform: translateX(-25%) scale(1) rotate(360deg);
}
}
/* ===================================================================
14. 新企画トップページ (.page-nplan-top)
=================================================================== */
body.page-nplan-top main {
padding: 0;
background-color: #f0f0f0;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
}
body.page-nplan-top .nplan-top-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.page-nplan-top .page-title {
font-size: 2.6rem;
color: #FFF;
font-weight: 600;
margin: 0;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
animation-delay: 0.6s !important;
}
.page-nplan-top .page-title span {
display: block;
font-size: 16px;
font-weight: normal;
color: #FFF;
/*margin-top: 5px;*/
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
animation-delay: 0.9s !important;
}
.page-nplan-top .page-header-area {
/*background-color: #f9ff00;*/
background-image: linear-gradient(to bottom, #000000, #636363);
padding: 40px 20px;
padding-bottom: 80px;
text-align: center;
}
.nplan-hr-divider {
width: 100%;
/* ★ nplan_tophr.jpg の画像の「実際の高さ」をここに指定してください */
height: 21px;
/* ★ nplan_tophr.jpg の画像パスをここに指定してください */
background-image: url('https://www.plantopia.co.jp/images/nplan_tophr.jpg');
background-repeat: repeat-x; /* 横方向にリピート */
background-position: center; /* 中央を基準にリピート */
background-size: auto; /* 画像の高さはそのまま、幅はリピート */
}
.nplan-top-subheader {
position: relative; /* ★ピンクの線を配置するための基準点 */
/* ★背景のグラデーション（画像から抽出） */
background-image: linear-gradient(to bottom, #020202, #81baa5);
min-height: 60px;
padding: 0.5rem 1rem;
text-align: center;
overflow: hidden; /* ★はみ出す光彩を隠す */
}
/* ★上のピンクの線（疑似要素で作成） */
.nplan-top-subheader::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 12px;*/
/* 鮮やかなピンクのグラデーション */
/*background-image: linear-gradient(to right, #f0f, #ff00c8, #ff00a0);*/
/* 光彩（グロー）エフェクト */
/*box-shadow: 0 0 8px 2px #ff00ff;*/
}
.nplan-top-subheader p {
margin: 0;
color: #fff;
font-size: 1.3rem;
font-weight: normal;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* 文字を読みやすくする影 */
position: relative; /* 念のためテキストが線より手前に来るように */
z-index: 2;
opacity: 0; /* 最初は透明に */
/* 他と同じフェードインアニメーションを適用 */
animation-name: fadeIn-up;
animation-duration: 0.8s;
animation-delay: 1.0s; /* タイトルの後に表示 */
animation-fill-mode: forwards;
}
/* --- 1. イントロセクション (円形ロゴ) --- */
.nplan-top-intro {
/*background-color: #3f3f3f;*/
background-image: linear-gradient(to bottom, #9F9F9F, #FFFFFF);
color: #fff;
padding: 4rem 0 2rem;
}
.nplan-top-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: start;
text-align: center;
}
/* --- 新しい円形モジュール --- */
.circle-module {
position: relative;
width: 90%; /* 親(.nplan-top-item)に対して90% */
margin: 0 auto;
aspect-ratio: 1 / 1; /* 正円を保つ */
}
.circle-bg,
.circle-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.circle-bg {
z-index: 1; /* 背景 */
}
.circle-frame {
z-index: 2; /* 外枠 (最前面) */
}
.circle-content {
position: relative;
z-index: 2; /* コンテンツ (中間) */
padding: 15%; /* 円の内側にコンテンツを配置 */
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #000;
}
.circle-content h3 {
font-size: 1.8rem;
font-weight: 900;
margin: 0;
line-height: 1
}
.circle-content .subtext {
font-size: 0.9rem;
margin: 0 0 10px 0;
}
.circle-content .content-logo {
/*max-width: 80%;*/
max-width: 564px;
margin-bottom: 10px;
}
.circle-content .content-logo_e {
/*max-width: 80%;*/
max-width: 564px;
/*margin-bottom: 10px;*/
margin-bottom: 2rem;
margin-top: -1rem;
}
.circle-content .main-copy {
font-size: 1rem;
font-weight: bold;
line-height: 1.6;
margin: 0;
}
.circle-content .main-copy b {
font-size: 1.5rem;
margin: 0;
}
.circle-content .main-copy span {
display: block;
font-size: 3.6rem;
color: #0045f2;
line-height: 1;
font-weight: 900;
}
.circle-content .main-copy_e {
font-size: 1rem;
font-weight: bold;
line-height: 1.6;
margin-top: -2rem;
margin-bottom: 0;
}
.circle-content .main-copy_e b {
font-size: 1.5rem;
margin: 0;
}
.circle-content .main-copy_e span {
display: block;
font-size: 3.6rem;
color: #0045f2;
line-height: 1;
font-weight: 900;
}
.circle-content .main-copy2 {
font-size: 1.5rem;
font-weight: bold;
line-height: 1.6;
margin: 0;
}
/* --- 1. リンク(aタグ)の基本スタイル --- */
.nplan-top-item .circle-link {
display: block; /* ブロック要素にしてレイアウトを崩さない */
text-decoration: none; /* 下線を削除 */
}
/* --- 2. 円形モジュールにトランジションを追加 --- */
.circle-module {
/* ★ホバーエフェクトのための transition (変化の時間) を追加 */
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
/* --- 3. ホバーエフェクト（半透明 + 拡大） --- */
.nplan-top-item .circle-link:hover .circle-module {
transform: scale(1.05); /* ★1.05倍に少し大きくする */
opacity: 0.8; /* ★少し半透明にする */
}
/* --- スローガンテキスト --- */
.slogan-text {
color: #000;
margin: 2rem 0 0 0;
padding: 0.5rem 1.5rem;
/*border-top: 2px solid #555;
border-bottom: 2px solid #555;*/
/* ★フレックスボックスで中身を中央揃えに */
display: flex;
flex-direction: column; /* 縦に並べる */
align-items: center; /* 水平方向の中央揃え */
gap: 1px; /* ★各要素の間隔 */
}
/* 上の行 */
.slogan-text .slogan-line-1 {
font-size: 2rem;
font-weight: 900;
line-height: 1.6;
margin: 0;
}
/* 真ん中のHR画像 */
.slogan-text .slogan-hr {
display: block;
width: 100%; /* 幅を80%に */
/*max-width: 400px;*/
height: auto;
}
/* 下の行 (太字) */
.slogan-text .slogan-line-2 {
font-size: 2rem;
font-weight: 900;
line-height: 1.6;
margin: 0;
}
/* 回転アニメーション★(jyanjyanprof_batch.phpからキーフレームをコピー) */
/* 時計回りの回転 */
@keyframes nplan-spin { /* ★名前を変更 */
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 反時計回りの回転 */
@keyframes nplan-spin-reverse { /* ★名前を変更 */
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* ★アニメーションを新しい専用クラスに適用 */
.nplan-anim-rotate {
animation: nplan-spin 30s linear infinite;
}
.nplan-anim-rotate-reverse {
animation: nplan-spin-reverse 30s linear infinite;
}
/* ★イントロ円形モジュールのスライドアニメーション */
/* --- 1. このページの汎用アニメーションを定義 --- */
body.page-nplan-top .scroll-item:not(.collage-slogan) {
opacity: 0;
transform: translateY(30px);
transition: opacity 1s, transform 1s;
}
body.page-nplan-top .scroll-item.is-visible:not(.collage-slogan) {
opacity: 1;
transform: translateY(0);
}
/* --- 2. 円形モジュール(左)の「下から」を「左から」に上書き --- */
body.page-nplan-top .nplan-top-grid .nplan-top-item:nth-child(1).scroll-item {
/* 汎用の transform: translateY(30px) を上書き */
transform: translateX(-100px) !important;
/* 汎用の transition を上書き (遅延時間を設定) */
transition: transform 2.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
opacity 0.8s 0.2s !important;
}
/* --- 3. 円形モジュール(右)の「下から」を「右から」に上書き --- */
body.page-nplan-top .nplan-top-grid .nplan-top-item:nth-child(2).scroll-item {
/* 汎用の transform: translateY(30px) を上書き */
transform: translateX(100px) !important;
/* 汎用の transition を上書き (遅延時間を設定) */
transition: transform 2.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
opacity 0.8s 0.2s !important;
}
/* --- 4. .is-visible になったら、両方とも本来の位置(X=0)に戻す --- */
/* (汎用の .is-visible の transform: translateY(0) を上書き) */
body.page-nplan-top .nplan-top-grid .nplan-top-item.scroll-item.is-visible {
transform: translateX(0) !important;
opacity: 1;
}
/* --- 3. 写真コラージュセクション --- */
/* --- 新しいギザギザのHR（黄色） --- */
.nplan-hr-divider-yellow {
width: 100%;
/* ★ nplan_giza_hr_yellow.png の「実際の高さ」を指定してください */
height: 131px;
/* ★ nplan_giza_hr_yellow.png のパスを指定してください */
background-image: url('https://www.plantopia.co.jp/images/nplan_giza_hr_yellow.png');
background-repeat: repeat-x;
background-position: center;
background-size: auto 100%; /* 高さを100%に合わせる */
background-color: #FFFFFF; /* 背景色 */
position: relative;
z-index: 1;
margin-top: -1px;
}
/* --- 1. コラージュセクション全体 (背景) --- */
.nplan-top-collage {
background-color: #e0ff00; /* ★背景を黄色に変更 */
/*background-image: url('https://www.plantopia.co.jp/images/nplan_writer_bg.png');
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;*/
padding: 2rem 0 0;
position: relative;
z-index: 2;
margin-top: -60px;
border-bottom: 1rem solid #000;
}
/* --- 2. 1200pxのクロップ用コンテナ --- */
.nplan-top-container.collage-wrapper {
position: relative;
overflow: hidden; /* ★★★ これが左右を「削る」ための重要な指定 ★★★ */
padding: 0; /* 左右のpaddingを削除 */
margin-top: 100px;
}
/* --- 3. 1200pxより広いインナーラッパー (jj.jpgの全体図) --- */
.collage-inner-content {
position: relative;
width: 1200px; /* ★1200pxより広く設定 */
height: 2400px; /* ★写真の量に合わせた高さ (PC用) */
/* ★中央揃え */
left: 50%;
transform: translateX(-50%);
/* ★★★ ここにギザギザ背景画像の設定を移動しました ★★★ */
background-image: url('https://www.plantopia.co.jp/images/nplan_writer_bg.png');
background-position: center bottom; /* センターで下に固定 */
background-repeat: no-repeat; /* リピートなし */
background-size: 100% auto; /* 幅100%(1200px)で、高さは自動 */
}
/* --- 2. コラージュ内の新しいスローガン --- */
/*.collage-slogan {
position: absolute;
top: -3%;
left: 50%;
transform: translateX(-50%) !important;
width: 66%;
z-index: 20;
text-align: center;
}*/
.collage-slogan img {
width: 100%;
}
/* --- 5. 各写真の親コンテナ --- */
.nplan-top-photo {
position: absolute;
/*border: 5px solid #000;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);*/
z-index: 10;
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
opacity 0.8s;
}
/* --- 5.1 新しく追加した a タグのスタイル --- */
.nplan-top-photo .collage-item-link {
display: block; /* 親の div いっぱいに広げる */
text-decoration: none; /* 下線を削除 */
width: 100%;
height: 100%;
}
.nplan-top-photo.collage-main-hall-photo:hover {
transform: none !important;
opacity: 1 !important; /* ★ 半透明にならないように上書き */
z-index: 5 !important;
transition: none !important; /* ★ ホバーアニメーションを完全に無効化 */
}
/* --- 6. 写真本体 (形を定義) --- */
.nplan-top-photo .collage-main-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover; /* 画像がコンテナいっぱいに広がるように */
}
/*.shape-circle { border-radius: 50%; }
.shape-rounded { border-radius: 20px; }
.shape-hex {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}*/
/* --- 7. 名前タグ --- */
.nplan-top-photo .collage-name-tag {
position: absolute;
/*bottom: -15px;
right: -15px;*/
width: 60%;
z-index: 15;
/* アニメーション用 */
/*opacity: 0;
transform: translateY(10px);
transition: transform 0.4s 0.2s, opacity 0.4s 0.2s;*/
}
/* スクロールインしたら名前タグを表示 */
.nplan-top-photo.is-visible .collage-name-tag {
opacity: 1;
transform: translateY(0);
}
.collage-main-hall-photo {
position: absolute;
/* ★スローガンのすぐ下に、ど真ん中に配置 */
top: 1%;
/*left: 50%;
transform: translateX(-50%);*/
width: 100%; /* 幅を90%に */
/* ★他の写真パーツ(z-index: 10～)より奥に配置 */
z-index: 5;
border: none; /* この画像には枠線なし */
box-shadow: none; /* 影もなし */
}
/* ★メインホール写真のアニメーション */
.collage-main-hall-photo.scroll-item {
opacity: 0;
transform: translateX(-50%) translateY(50px); /* 初期位置を少し下に */
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
opacity 1s 0.2s;
}
.collage-main-hall-photo.scroll-item.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0); /* 本来の位置に */
}
/* --- 既存の写真コラージュの高さを調整 --- */
.collage-inner-content {
height: 3100px; /* ★メイン画像を追加した分、高さを延長 */
}
/* --- 8. ★コラージュの配置 (全18アイテム) --- */
.collage-inner-content .item-1 { top: 14.0%; left: -11%; width: 64%; z-index: 13; }
.collage-inner-content .item-2 { top: 13.9%; left: 50.1%; width: 55%; z-index: 11; }
.collage-inner-content .item-3 { top: 41.3%; left: -2.7%; width: 34.4%; z-index: 12; }
.collage-inner-content .item-4 { top: 34.7%; left: 24.3%; width: 53.4%; z-index: 12; }
.collage-inner-content .item-5 { top: 40.2%; left: 69.8%; width: 34.4%; z-index: 13; }
.collage-inner-content .item-6 { top: 51.0%; left: -5.4%; width: 47%; z-index: 12; }
.collage-inner-content .item-7 { top: 47.1%; left: 32.4%; width: 50.8%; z-index: 12; }
.collage-inner-content .item-8 { top: 56.4%; left: 73.7%; width: 32.6%; z-index: 12; }
.collage-inner-content .item-9 { top: 66.9%; left: -2.2%; width: 23.4%; z-index: 12; }
.collage-inner-content .item-10 { top: 70.1%; left: 14.0%; width: 27.4%; z-index: 12; }
.collage-inner-content .item-11 { top: 62.4%; left: 29.1%; width: 43.0%; z-index: 11; }
.collage-inner-content .item-12 { top: 67.1%; left: 68.0%; width: 31.8%; z-index: 12; }
.collage-inner-content .item-13 { top: 78.0%; left: -2.1%; width: 43.4%; z-index: 11; }
.collage-inner-content .item-14 { top: 80.1%; left: 37.3%; width: 30.8%; z-index: 12; }
.collage-inner-content .item-15 { top: 77.0%; left: 59.3%; width: 48.7%; z-index: 10; }
.collage-inner-content .item-16 { top: 88.9%; left: 1.1%; width: 27.4%; z-index: 10; }
.collage-inner-content .item-17 { top: 88.1%; left: 27.1%; width: 33.4%; z-index: 11; }
.collage-inner-content .item-18 { top: 88.6%; left: 60.8%; width: 39.2%; z-index: 12; }
/* --- 8. ★コラージュの配置 (名前) --- */
.nplan-top-photo.item-1 .collage-name-tag { bottom: 10%; right: 39%; width: 36%; }
.nplan-top-photo.item-2 .collage-name-tag { bottom: 8%; right: 10%; width: 39%; }
.nplan-top-photo.item-3 .collage-name-tag { bottom: 65%; right: 16%; width: 44%; }
.nplan-top-photo.item-4 .collage-name-tag { bottom: 40%; right: 11%; width: 32%; }
.nplan-top-photo.item-5 .collage-name-tag { bottom: 73%; right: 33%; width: 43%; }
.nplan-top-photo.item-6 .collage-name-tag { bottom: 6%; right: 34%; width: 36%; }
.nplan-top-photo.item-7 .collage-name-tag { bottom: 67%; right: 24%; width: 34%; }
.nplan-top-photo.item-8 .collage-name-tag { bottom: 86%; right: 31%; width: 41%; }
.nplan-top-photo.item-9 .collage-name-tag { bottom: 67%; right: -24%; width: 56%; }
.nplan-top-photo.item-10 .collage-name-tag { bottom: 9%; right: 60%; width: 51%; }
.nplan-top-photo.item-11 .collage-name-tag { bottom: 71%; right: 52%; width: 33%; }
.nplan-top-photo.item-12 .collage-name-tag { bottom: 12%; right: 1%; width: 44%; }
.nplan-top-photo.item-13 .collage-name-tag { bottom: 30%; right: 61%; width: 33%; }
.nplan-top-photo.item-14 .collage-name-tag { bottom: 7%; right: 8%; width: 47%; }
.nplan-top-photo.item-15 .collage-name-tag { bottom: 36%; right: 55%; width: 29%; }
.nplan-top-photo.item-16 .collage-name-tag { bottom: 1%; right: 53%; width: 51%; }
.nplan-top-photo.item-17 .collage-name-tag { bottom: 51%; right: -1%; width: 44%; }
.nplan-top-photo.item-18 .collage-name-tag { bottom: 70%; right: 46%; width: 36%; }
/* コラージュ写真の個別スライドアニメーション */
/* --- 1. 各写真の「アニメーション後の最終状態」を定義 --- */
/* (汎用の .is-visible の transform: translateY(0) を上書き) */
body.page-nplan-top .collage-inner-content .nplan-top-photo.scroll-item.is-visible {
opacity: 1;
transform: translate(0, 0) !important; /* ★X軸もY軸も0の位置に戻す */
}
/* --- 2. 各写真のアニメーション前の「初期位置」を個別に指定 --- */
/* ★ 汎用の transition を上書き (速度を 1.2s に統一) */
body.page-nplan-top .collage-inner-content .nplan-top-photo.scroll-item {
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
/*opacity 0.8s !important;*/
}
/* --- ホバーエフェクト（拡大 + 半透明）--- */
/* ★★★ セレクタの詳細度を .is-visible と同等以上に修正 ★★★ */
body.page-nplan-top .collage-inner-content .nplan-top-photo.scroll-item.is-visible:hover {
/* ★★★ スライドイン後の位置(translate)と拡大(scale)を両方指定 ★★★ */
transform: translate(0, 0) scale(1.05) !important;
/*opacity: 0.8 !important;*/
z-index: 21 !important;
/* ★ ホバー専用の短い transition に上書き */
transition: transform 0.3s ease-out,
z-index 0.3s ease-out !important;
}
/* --- メインホール写真のホバーは引き続き無効化 --- */
/* ★★★ こちらのセレクタも詳細度を修正 ★★★ */
body.page-nplan-top .collage-inner-content .nplan-top-photo.collage-main-hall-photo.scroll-item.is-visible:hover {
transform: none !important;
opacity: 1 !important;
z-index: 5 !important;
transition: none !important;
}
/* ★ 各アイテムの初期位置と遅延時間を設定 */
body.page-nplan-top .item-1.scroll-item { transform: translate(-100px, -100px) !important; transition-delay: 0.1s !important; }
body.page-nplan-top .item-2.scroll-item { transform: translate(100px, -100px) !important; transition-delay: 0.2s !important; }
body.page-nplan-top .item-3.scroll-item { transform: translateX(-80px) !important; transition-delay: 0.3s !important; }
body.page-nplan-top .item-4.scroll-item { transform: translateX(150px) !important; transition-delay: 0.4s !important; }
body.page-nplan-top .item-5.scroll-item { transform: translate(-100px, 100px) !important; transition-delay: 0.5s !important; }
body.page-nplan-top .item-6.scroll-item { transform: translate(100px, 100px) !important; transition-delay: 0.1s !important; }
body.page-nplan-top .item-7.scroll-item { transform: translateY(-150px) !important; transition-delay: 0.2s !important; }
body.page-nplan-top .item-8.scroll-item { transform: translateY(150px) !important; transition-delay: 0.3s !important; }
body.page-nplan-top .item-9.scroll-item { transform: translate(-50px, -50px) !important; transition-delay: 0.4s !important; }
body.page-nplan-top .item-10.scroll-item { transform: translate(100px, -100px) !important; transition-delay: 0.5s !important; }
body.page-nplan-top .item-11.scroll-item { transform: translateX(-150px) !important; transition-delay: 0.1s !important; }
body.page-nplan-top .item-12.scroll-item { transform: translateX(80px) !important; transition-delay: 0.2s !important; }
body.page-nplan-top .item-13.scroll-item { transform: translate(-100px, 100px) !important; transition-delay: 0.3s !important; }
body.page-nplan-top .item-14.scroll-item { transform: translate(100px, 100px) !important; transition-delay: 0.4s !important; }
body.page-nplan-top .item-15.scroll-item { transform: translateY(-150px) !important; transition-delay: 0.5s !important; }
body.page-nplan-top .item-16.scroll-item { transform: translateY(80px) !important; transition-delay: 0.1s !important; }
body.page-nplan-top .item-17.scroll-item { transform: translate(-100px, -100px) !important; transition-delay: 0.2s !important; }
body.page-nplan-top .item-18.scroll-item { transform: translate(80px, -80px) !important; transition-delay: 0.3s !important; }
/* --- スローガン画像の「下からスライド＆シェイク」アニメーション --- */
/* --- 1. アニメーションの内容を定義 (変更なし) --- */
@keyframes slide-up-and-shake {
0% {
opacity: 0;
transform: translateX(-50%) translateY(50px);
}
/* ★スライドインにかける時間を 60% -> 50% に変更 */
50% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ★★★ ここからブルブルの回数を増やしました ★★★ */
60% { transform: translateX(-50%) translateY(-7px); }
70% { transform: translateX(-50%) translateY(7px); }
80% { transform: translateX(-50%) translateY(-5px); }
90% { transform: translateX(-50%) translateY(5px); }
/* ★★★ ここまで ★★★ */
100% {
opacity: 1;
transform: translateX(-50%) translateY(0); /* 最終的に元の位置に静止 */
}
}
/* --- 2. アニメーション前の「静的スタイル」と「初期位置」を統合 --- */
body.page-nplan-top .collage-slogan.scroll-item {
/* 静的な配置のスタイル */
position: absolute;
top: -2%;
left: 50%;
width: 100%;
max-width: 1200px;
z-index: 15;
text-align: center;
/* ★汎用 .scroll-item スタイルをここで上書き */
opacity: 0 !important;
/* ★ @keyframes 0% と同じ初期位置を指定 ( !important は削除 ) */
/*transform: translateX(-50%) translateY(50px);*/
/* ★ 汎用 transition をここで強制的に無効化 */
transition: none !important;
animation-fill-mode: forwards;
}
.collage-slogan img {
width: 100%;
}
/* --- 3. アニメーションの実行 --- */
body.page-nplan-top .nplan-top-collage .collage-slogan.scroll-item.is-visible {
/* ★ 汎用の transform: translateY(0) を上書きするために、
アニメーションの最終状態の transform を指定します。
(animation-fill-mode: forwards があるため、!important は不要)
*/
transform: translateX(-50%) translateY(50%);
opacity: 1 !important; /* 念のため */
/* ★ 汎用の transition: ... 1s を上書きするために、
animation-name だけでなく transition: none も指定します。
*/
transition: none !important;
/* ★上で定義した slide-up-and-shake アニメーションを適用 */
animation-name: slide-up-and-shake;
animation-duration: 2.0s;
animation-delay: 0.2s;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- ホバーエフェクト（拡大 + 半透明）--- */
/* ★セレクタの詳細度を .is-visible と同等以上に変更 */
body.page-nplan-top .nplan-top-photo.scroll-item.is-visible:hover {
transform: scale(1.05) !important; /* ★ 拡大 */
/*opacity: 0.8 !important;*/ /* ★ 半透明 */
z-index: 21 !important; /* ★ 最前面 */
/* ★ ホバー専用の短い transition に上書き */
transition: transform 0.3s ease-out,
z-index 0.3s ease-out !important;
}
/* --- メインホール写真のホバーは引き続き無効化 --- */
body.page-nplan-top .nplan-top-photo.collage-main-hall-photo.scroll-item.is-visible:hover {
transform: none !important;
/*opacity: 1 !important;*/
z-index: 5 !important;
transition: none !important;
}
/* --- タブレット表示用の調整 (幅1150px以下) --- */
@media screen and (max-width: 1150px) {
/* --- ヘッダー --- */
.page-nplan-top .page-title {
font-size: 2.5rem;
}
.page-nplan-top .page-title span {
font-size: 1.2rem;
}
.nplan-top-subheader p {
font-size: 1.1rem;
}
/* --- イントロ円形モジュール --- */
/* --- 新しい円形モジュール --- */
.circle-module {
width: 83%; /* 親(.nplan-top-item)に対して90% */
}
.circle-content {
padding-top: 5rem;
}
.circle-content .content-logo {
/* max-width: 80%; */
max-width: 46vw;
}
.circle-content .content-logo_e {
max-width: 46vw;
}
.nplan-top-grid {
gap: 0.5rem;
}
/* ★フォントサイズを画面幅(vw)に連動させて縮小 */
.circle-content h3 { font-size: 2.5vw; }
.circle-content .subtext { font-size: 1.2vw; }
.circle-content .main-copy { font-size: 1.2vw; }
.circle-content .main-copy_e {
font-size: 1.2vw;
}
.circle-content .main-copy b { font-size: 2vw; }
.circle-content .main-copy_e b {
font-size: 2vw;
}
.circle-content .main-copy span { font-size: 3.2vw; }
.circle-content .main-copy_e span { font-size: 3.2vw; }
.circle-content .main-copy2 { font-size: 1.3vw; }
.slogan-text .slogan-line-1 { font-size: 2.4vw; }
.slogan-text .slogan-line-2 { font-size: 2.4vw; }
/* --- コラージュ --- */
.nplan-top-collage {
margin-top: -50px; /* 重なりを少し浅く */
}
.nplan-top-container.collage-wrapper {
margin-top: 50px; /* スローガンとの隙間を調整 */
}
.collage-inner-content {
/* ★高さをvw(画面幅)に連動させて縮小 */
height: 230vw;
max-height: 500vw;
width: 120vw;
}
.collage-slogan {
width: 80%;
top: -6%;
}
/* --- 8. ★コラージュの配置 (全22アイテム) --- */
.collage-inner-content .item-1 { top: 17.5%; left: -2%; width: 51%; z-index: 13; }
.collage-inner-content .item-2 { top: 18.5%; left: 46.1%; width: 49%; z-index: 11; }
.collage-inner-content .item-3 { top: 44.5%; left: 5.3%; width: 26.4%; z-index: 12; }
.collage-inner-content .item-4 { top: 38.7%; left: 26.3%; width: 45.4%; z-index: 12; }
.collage-inner-content .item-5 { top: 46.2%; left: 67.8%; width: 26.4%; z-index: 13; }
.collage-inner-content .item-6 { top: 52.8%; left: 6.6%; width: 37%; z-index: 12; }
.collage-inner-content .item-7 { top: 51.1%; left: 41.4%; width: 37.8%; z-index: 12; }
.collage-inner-content .item-8 { top: 61.1%; left: 73.7%; width: 22.6%; z-index: 12; }
.collage-inner-content .item-9 { top: 68.5%; left: 5.8%; width: 18.4%; z-index: 12; }
.collage-inner-content .item-10 { top: 71.6%; left: 21.0%; width: 18.4%; z-index: 12; }
.collage-inner-content .item-11 { top: 64.4%; left: 33.1%; width: 37.0%; z-index: 11; }
.collage-inner-content .item-12 { top: 69.1%; left: 67.0%; width: 21.8%; z-index: 12; }
.collage-inner-content .item-13 { top: 79.0%; left: 5.9%; width: 32.4%; z-index: 11; }
.collage-inner-content .item-14 { top: 79.1%; left: 37.3%; width: 23.8%; z-index: 12; }
.collage-inner-content .item-15 { top: 76.0%; left: 59.3%; width: 36.7%; z-index: 10; }
.collage-inner-content .item-16 { top: 89.4%; left: 12.1%; width: 20.4%; z-index: 10; }
.collage-inner-content .item-17 { top: 87.1%; left: 31.1%; width: 27.4%; z-index: 11; }
.collage-inner-content .item-18 { top: 87.6%; left: 58.8%; width: 32.2%; z-index: 12; }
/* --- 8. ★コラージュの配置 (名前) --- */
.nplan-top-photo.item-1 .collage-name-tag { bottom: 10%; right: 39%; width: 36%; }
.nplan-top-photo.item-2 .collage-name-tag { bottom: 8%; right: 10%; width: 39%; }
.nplan-top-photo.item-3 .collage-name-tag { bottom: 65%; right: 16%; width: 44%; }
.nplan-top-photo.item-4 .collage-name-tag { bottom: 40%; right: 11%; width: 32%; }
.nplan-top-photo.item-5 .collage-name-tag { bottom: 73%; right: 33%; width: 43%; }
.nplan-top-photo.item-6 .collage-name-tag { bottom: 6%; right: 34%; width: 36%; }
.nplan-top-photo.item-7 .collage-name-tag { bottom: 67%; right: 24%; width: 34%; }
.nplan-top-photo.item-8 .collage-name-tag { bottom: 86%; right: 31%; width: 41%; }
.nplan-top-photo.item-9 .collage-name-tag { bottom: 67%; right: -24%; width: 56%; }
.nplan-top-photo.item-10 .collage-name-tag { bottom: 9%; right: 60%; width: 51%; }
.nplan-top-photo.item-11 .collage-name-tag { bottom: 71%; right: 52%; width: 33%; }
.nplan-top-photo.item-12 .collage-name-tag { bottom: 12%; right: 1%; width: 44%; }
.nplan-top-photo.item-13 .collage-name-tag { bottom: 30%; right: 61%; width: 33%; }
.nplan-top-photo.item-14 .collage-name-tag { bottom: 7%; right: 8%; width: 47%; }
.nplan-top-photo.item-15 .collage-name-tag { bottom: 25%; right: 45%; width: 29%; }
.nplan-top-photo.item-16 .collage-name-tag { bottom: 1%; right: 53%; width: 51%; }
.nplan-top-photo.item-17 .collage-name-tag { bottom: 51%; right: -1%; width: 44%; }
.nplan-top-photo.item-18 .collage-name-tag { bottom: 70%; right: 46%; width: 36%; }
}
/* --- スマートフォン表示用の調整 (幅768px以下) --- */
@media screen and (max-width: 768px) {
/* --- ヘッダー --- */
.page-nplan-top .page-header-area {
padding-bottom: 60px;
}
.page-nplan-top .page-title {
font-size: 6vw;
}
.page-nplan-top .page-title span {
font-size: 3vw;
}
.nplan-hr-divider {
height: 0.5rem;
}
.nplan-top-subheader {
padding: 0.8rem 15px;
}
.nplan-top-subheader p {
font-size: 3.4vw;
line-height: 1.5;
}
/* --- イントロ円形モジュール --- */
.nplan-top-intro {
padding: 3vw 0;
padding-bottom: 6vw;
}
/* --- 新しい円形モジュール --- */
.circle-module {
width: 68vw; /* 親(.nplan-top-item)に対して90% */
}
.circle-content {
padding-top: 13.6vw;
}
.circle-content .content-logo {
/* max-width: 80%; */
max-width: 60vw;
margin-bottom: 1.4vw;
}
.circle-content .content-logo_e {
max-width: 60vw;
margin-bottom: 7vw;
}
.nplan-top-grid {
grid-template-columns: 1fr; /* ★2列(1fr 1fr)から1列に変更 */
gap: 1.5rem;
margin-top: 1rem;
}
.circle-content h3 { font-size: 4.4vw; }
.circle-content .subtext {
font-size: 3.2vw;
margin: 0 0 1vw 0;
}
.circle-content .main-copy { font-size: 2.1vw; line-height: 1.5; }
.circle-content .main-copy_e {font-size: 2.1vw; line-height: 1.5;}
.circle-content .main-copy b { font-size: 3.5vw; }
.circle-content .main-copy_e b { font-size: 3.5vw; }
.circle-content .main-copy span { font-size: 6.0vw; }
.circle-content .main-copy_e span { font-size: 6.0vw; }
.circle-content .main-copy2 { font-size: 3.5vw; }
.slogan-text {
font-size: 3.5vw;
margin-top: 1vw;
padding: 2vw;
}
.slogan-text .slogan-line-1 { font-size: 4.5vw; }
.slogan-text .slogan-line-2 { font-size: 4.5vw; }
.slogan-text .slogan-hr { width: 90%; }
.collage-main-hall-photo {
width: 100vw;
left: 50%;
transform: translateX(-50vw);
}
.collage-main-hall-photo.scroll-item {
transform: translateX(-50vw) translateY(50px);
}
.collage-main-hall-photo.scroll-item.is-visible {
transform: translateX(-50vw) translateY(0);
}
/* --- コラージュ --- */
.nplan-hr-divider-yellow {
height: 50px;
}
.nplan-top-collage {
margin-top: -25px;
padding-top: 1rem;
border-bottom-width: 0.5rem;
}
.nplan-top-container.collage-wrapper {
margin-top: 40px;
}
.collage-inner-content {
width: 312vw; /* PC(1200px)より少し狭く */
height: 280vw; /* 高さをvwで指定 */
background-size: 100vw auto;
}
.collage-slogan {
width: 95%;
top: -2%;
}
.nplan-top-photo {
/*border-width: 3px;*/
margin-top: -4vw;
}
.nplan-top-photo .collage-name-tag {
bottom: -10px;
right: -10px;
width: 70%;
}
/* --- 2. アニメーション前の「静的スタイル」と「初期位置」を統合 --- */
body.page-nplan-top .collage-slogan.scroll-item {
top: -3%;
}
/* --- 8. ★コラージュの配置 (全22アイテム) --- */
.collage-inner-content .item-1 { top: 39vw; left: 93vw; width: 65vw; z-index: 13; }
.collage-inner-content .item-2 { top: 41vw; left: 152vw; width: 60vw; z-index: 11; }
.collage-inner-content .item-3 { top: 108vw; left: 102vw; width: 44vw; z-index: 12; }
.collage-inner-content .item-4 { top: 93vw; left: 136vw; width: 52vw; z-index: 12; }
.collage-inner-content .item-5 { top: 110vw; left: 175vw; width: 37vw; z-index: 13; }
.collage-inner-content .item-6 { top: 141vw; left: 96vw; width: 50vw; z-index: 12; }
.collage-inner-content .item-7 { top: 127vw; left: 137vw; width: 52vw; z-index: 12; }
.collage-inner-content .item-8 { top: 154vw; left: 177vw; width: 35vw; z-index: 12; }
.collage-inner-content .item-9 { top: 185vw; left: 101vw; width: 29vw; z-index: 12; }
.collage-inner-content .item-10 { top: 196vw; left: 121vw; width: 32vw; z-index: 12; }
.collage-inner-content .item-11 { top: 168vw; left: 134vw; width: 49vw; z-index: 11; }
.collage-inner-content .item-12 { top: 183vw; left: 173vw; width: 33vw; z-index: 12; }
.collage-inner-content .item-13 { top: 221vw; left: 104vw; width: 44vw; z-index: 11; }
.collage-inner-content .item-14 { top: 220vw; left: 144vw; width: 33vw; z-index: 12; }
.collage-inner-content .item-15 { top: 210vw; left: 163vw; width: 52vw; z-index: 10; }
.collage-inner-content .item-16 { top: 250vw; left: 107vw; width: 32vw; z-index: 10; }
.collage-inner-content .item-17 { top: 247vw; left: 134vw; width: 35vw; z-index: 11; }
.collage-inner-content .item-18 { top: 246vw; left: 168vw; width: 44vw; z-index: 12; }
/* --- 8. ★コラージュの配置 (名前) --- */
.nplan-top-photo.item-3 .collage-name-tag { width: 38%; }
.nplan-top-photo.item-4 .collage-name-tag { width: 36%; }
.nplan-top-photo.item-5 .collage-name-tag { width: 48%; }
.nplan-top-photo.item-6 .collage-name-tag { width: 39%; }
.nplan-top-photo.item-7 .collage-name-tag { width: 38%; }
.nplan-top-photo.item-8 .collage-name-tag { width: 44%; }
.nplan-top-photo.item-9 .collage-name-tag { width: 59%; }
.nplan-top-photo.item-10 .collage-name-tag { width: 53%; }
.nplan-top-photo.item-11 .collage-name-tag { width: 36%; }
.nplan-top-photo.item-12 .collage-name-tag { width: 48%; }
.nplan-top-photo.item-13 .collage-name-tag { width: 35%; }
.nplan-top-photo.item-14 .collage-name-tag { width: 49%; }
.nplan-top-photo.item-15 .collage-name-tag { width: 31%; }
.nplan-top-photo.item-16 .collage-name-tag { width: 51%; }
.nplan-top-photo.item-17 .collage-name-tag { width: 48%; }
.nplan-top-photo.item-18 .collage-name-tag { width: 39%; }
}
/* ===================================================================
22. じゃんじゃん紹介ページ (.page-nplan-jyanjyan)
=================================================================== */
body.page-nplan-jyanjyan main {
padding: 0;
background-color: #d9dbdd; /* ページ全体の背景色 */
}
.page-nplan-jyanjyan .jyanjyan-container {
max-width: 1200px; /* コンテンツの最大幅 */
margin: 0 auto;
padding: 0 20px;
}
/* --- ヘッダー「じゃんじゃん」 --- */
.page-nplan-jyanjyan .page-header {
background-color: #fff200;
text-align: center;
padding: 0.5rem 0;
}
.page-nplan-jyanjyan .page-header h1 {
margin: 0;
font-size: 1.5rem;
color: #333;
}
.page-nplan-jyanjyan .page-title {
font-size: 3.0rem;
color: #333;
font-weight: 600;
margin: 0;
}
.page-nplan-jyanjyan .page-title span {
display: block;
font-size: 2.5rem;
color: #333;
/* margin-top: 5px; */
font-weight: 900;
line-height: 1.2;
/*font-family: 'Marcellus', serif;*/
font-feature-settings: "palt";
}
.page-header-area {
background-color: #fff200;
padding: 40px 20px;
padding-bottom: 80px;
text-align: center;
}
.page-nplan-jyanjyan .yt-logo {
height: 16rem;
width: auto;
margin-bottom: 0.5rem;
}
/* --- 2. プロモセクション (タイトル画像) --- */
/* マガちゃんページ(.page-magachan)と同じスタイルを継承・調整 */
.page-nplan-jyanjyan .promo-section {
padding: 40px 20px;
background-color: #d9dbdd; /* グレーの背景 */
text-align: center;
/* ジグザグの境界線 (上) */
clip-path: polygon(
0 0, 100% 0, 100% calc(100% - 20px),
/* ここにジグザグのclip-pathを入れるか、あるいは画像で対応 */
100% 100%, 0 100%
);
}
/* --- タイトル画像の「スライドイン＋光る」エフェクト --- */
.page-nplan-jyanjyan .section-title {
position: relative;
overflow: hidden;
display: inline-block;
opacity: 0;
transform: translateX(100px); /* 右からスライドイン */
transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s;
}
.page-nplan-jyanjyan .section-title.is-visible {
opacity: 1;
transform: translateX(0);
}
/* 光るエフェクト (疑似要素) */
.page-nplan-jyanjyan .section-title::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 75%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
transform: skewX(-25deg);
}
.page-nplan-jyanjyan .section-title.is-visible::before {
left: 120%;
transition: left 0.8s ease-in-out;
transition-delay: 0.6s; /* スライドイン後に光る */
}
.page-nplan-jyanjyan .section-title img {
max-width: 100%;
display: block;
}
.page-nplan-jyanjyan .section-intro-jyan {
/* --- 既存のフォント設定を継承 --- */
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
font-weight: 900;
color: #333; /* 文字色 */
text-align: center;
/* --- 長体をやめて、サイズと行間を調整 --- */
font-size: 2.9rem;
font-size: min(2.8vw, 2.9rem); /* お好みで調整してください */
line-height: 1.2; /* 長体がない分、行間を少し広げて読みやすく */
margin: 1rem 0; /* 上下の余白 */
letter-spacing: -0.02em;
font-feature-settings: "palt";
/* --- 長体(transform)は指定しません --- */
}
.page-nplan-jyanjyan .section-intro-jyan2 {
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-align: left;
line-height: 1.3;
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 2rem;
letter-spacing: -0.02em;
color: #393991;
margin: 1rem;
margin-bottom: 2.5rem;
transition-delay: 1s;
}
/* --- ライター紹介カードブロック (.writer-card-block) --- */
/* --- ブロック全体 --- */
.writer-card-block {
padding: 0 0 40px 0; /* 下に余白 */
/*max-width: 1000px;*/ /* 必要に応じて制限 */
margin: 0 auto;
}
.writer-card-inner {
position: relative;
margin-bottom: 2rem;
}
/* --- 1. ヘッダー部分 --- */
.card-header {
position: relative;
/* タイトル画像を配置 */
margin-bottom: -7rem; /* 画像間の隙間対策 */
z-index: 2; /* 写真より手前に */
}
.card-title-img {
width: 100%;
display: block;
position: relative;
z-index: 1;
}
/* ロゴとサークルのラッパー */
.logo-wrapper {
position: absolute;
top: 50%;
left: 0; /* 左端に配置（必要に応じて調整） */
transform: translateY(-50%);
width: 35%; /* ロゴ全体の幅（親に対する割合） */
/*max-width: 300px;*/
z-index: 2;
/* 少し左にはみ出させる場合 */
margin-left: 0.5%;
}
/* 回転するサークル */
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
z-index: 1;
}
/* メインロゴ (軍神降臨) */
.logo-main {
position: relative;
width: 100%;
display: block;
z-index: 2;
}
.writer-card-block.type-reverse .logo-wrapper {
left: auto; /* 左寄せを解除 */
right: 0; /* 右端に配置 */
/* 位置の微調整 (左側の margin-left: -0.5% と対になるように) */
margin-left: 0;
margin-right: 0.5%;
}
/* --- 2. メイン写真部分 --- */
.card-photo-link {
display: block;
position: relative;
z-index: 1;
transition: opacity 0.3s;
}
.card-photo-link:hover {
opacity: 0.8;
}
.card-photo {
width: 100%;
display: block;
}
/* --- 3. フッターテキスト部分 --- */
.card-footer-text {
/* 赤〜黒のグラデーション背景 */
position: relative; /* ★線(::after)を配置するための基準点 */
/*background: linear-gradient(to bottom, #ff0000, #000000);*/
background: linear-gradient(to right, #ff0000 25%, #000000);
color: #fff;
padding: 1.5rem 2rem 2.2rem 2rem;
text-align: left;
border-bottom: none;
}
/* ★★★ 疑似要素で「内側の線」を作成 ★★★ */
.card-footer-text::after {
content: '';
position: absolute;
/* ★下から10pxの位置に配置 */
bottom: 0.6rem;
left: 0;
/* ★線のサイズ（幅いっぱい、太さ10px） */
width: 100%;
height: 0.2rem;
/* ★線の色 */
background-color: #d9dbdd;
}
.card-footer-text p {
margin: 0;
font-size: 1.16rem;
line-height: 1.6;
font-weight: 500; /* 少し太めに */
}
/* --- フェアリン用フッターグラデーションの色指定 --- */
.writer-card-block .card-footer-text.type-fairrin {
/* ピンク系のグラデーション */
background: linear-gradient(to right, #000000 -10%, #ff00ff);
}
/* フェアリン用の下線も設定 */
/*.writer-card-block .card-footer-text.type-fairrin::after {
background-color: #f9dbe4;
}*/
/* --- レビン用フッターグラデーションの色指定 --- */
.writer-card-block .card-footer-text.type-rebin {
/* 紫系のグラデーション */
background: linear-gradient(to right, #7800b4 25%, #000000);
}
/* --- ドテチン用フッターグラデーションの色指定 --- */
.writer-card-block .card-footer-text.type-dote {
/* 青系のグラデーション */
background: linear-gradient(to right, #000000 -10%, #004bff);
}
/* --- しのけん用フッターグラデーションの色指定 --- */
.writer-card-block .card-footer-text.type-shinoken {
/* 黄系のグラデーション */
background: linear-gradient(to right, #d4bf1f 25%, #000000);
}
/*フェアリン用.type-fairin が付いたセクションの中のロゴだけを対象にします */
.writer-card-block.type-fairin .logo-main {
width: 116%; /* ★100%より大きくする (お好みで調整) */
max-width: none; /* 最大幅の制限を解除 */
/* 大きくした分、中心がずれるので位置を調整 */
margin-left: -6%; /* (width - 100) ÷ 2 の数値をマイナスで指定 */
/* 必要であれば上下の位置も調整 */
margin-top: -3%;
}
/*しのけん用.type-shinoken が付いたセクションの中のロゴだけを対象にします */
.writer-card-block.type-shinoken .logo-main {
width: 120%; /* ★100%より大きくする (お好みで調整) */
max-width: none; /* 最大幅の制限を解除 */
/* 大きくした分、中心がずれるので位置を調整 */
margin-left: -13%; /* (width - 100) ÷ 2 の数値をマイナスで指定 */
/* 必要であれば上下の位置も調整 */
margin-top: -3%;
}
/* --- 回転アニメーションの定義 --- */
@keyframes circle-rotate {
from {
/* 中央配置(translate)を維持して、0度からスタート */
transform: translate(-50%, -50%) rotate(0deg);
}
to {
/* 中央配置を維持したまま、360度回転 */
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* --- アニメーションの適用 --- */
.logo-circle.anim-rotate {
animation: circle-rotate 20s linear infinite; /* 20秒で1周、一定速度、無限ループ */
}
/* --- 共通設定: アニメーションの速度 --- */
.writer-card-block .scroll-item {
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s;
}
/* ---------------------------------------------------
1. タイトル画像 (右からスライドイン)
--------------------------------------------------- */
.writer-card-block .card-title-img.scroll-item {
opacity: 0;
transform: translateX(100px); /* 右にずらしておく */
}
.writer-card-block .card-title-img.scroll-item.is-visible {
opacity: 1;
transform: translateX(0);
}
/* ---------------------------------------------------
2. メイン写真 (左からスライドイン)
--------------------------------------------------- */
.writer-card-block .card-photo-link.scroll-item {
opacity: 0;
transform: translateX(-100px); /* 左にずらしておく */
}
.writer-card-block .card-photo-link.scroll-item.is-visible {
opacity: 1;
transform: translateX(0);
}
/* ---------------------------------------------------
3. フッターテキスト (右からスライドイン)
--------------------------------------------------- */
.writer-card-block .card-footer-text.scroll-item {
opacity: 0;
transform: translateX(100px); /* 右にずらしておく */
/*transition-delay: 0.2s;*/ /* 写真より少し遅れて開始 */
}
.writer-card-block .card-footer-text.scroll-item.is-visible {
opacity: 1;
transform: translateX(0);
}
/* --- type-reverse クラスが親にある場合、アニメーション方向を反転 --- */
/* 1. タイトル画像 (左からスライドイン) */
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-title-img.scroll-item {
transform: translateX(-100px); /* 左にずらしておく */
}
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-title-img.scroll-item.is-visible {
transform: translateX(0);
}
/* 2. メイン写真 (右からスライドイン) */
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-photo-link.scroll-item {
transform: translateX(100px); /* 右にずらしておく */
}
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-photo-link.scroll-item.is-visible {
transform: translateX(0);
}
/* 3. フッターテキスト (左からスライドイン) */
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-footer-text p.scroll-item {
transform: translateX(-50px); /* 左に50pxずらしておく */
}
body.page-nplan-jyanjyan .writer-card-block.type-reverse .card-footer-text p.scroll-item.is-visible {
transform: translateX(0);
}
/* ---------------------------------------------------
4. ロゴラッパー (最後に下からスライドイン)
--------------------------------------------------- */
/* --- 1. アニメーションの内容を定義 --- */
@keyframes pop-up-elastic {
0% {
opacity: 0;
transform: translateY(calc(-50% + 100px)) scale(0);
}
50% {
opacity: 1;
transform: translateY(calc(-50% - 20px)) scale(1.1);
}
70% {
transform: translateY(calc(-50% + 10px)) scale(0.95);
}
100% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
/* --- 2. アニメーション前の初期状態 --- */
/* ★★★ セレクタを長くして優先順位を上げ、!important を外しました ★★★ */
body.page-nplan-jyanjyan .writer-card-block .logo-wrapper.scroll-item {
opacity: 0; /* !important を削除 */
/* アニメーション開始位置に合わせて配置 */
transform: translateY(calc(-50% + 100px)) scale(0);
/* 汎用の transition を無効化 */
transition: none;
}
/* --- 3. アニメーションの実行 --- */
body.page-nplan-jyanjyan .writer-card-block .logo-wrapper.scroll-item.is-visible {
opacity: 1;
/* アニメーション設定 */
animation-name: pop-up-elastic;
animation-duration: 0.8s;
animation-delay: 0.8s;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode: forwards;
}
/* --- 親要素（背景）の設定 --- */
.writer-card-block .card-footer-text {
overflow: hidden; /* ★右から入ってくる文字が、枠の外では見えないようにする */
}
/* --- テキスト（pタグ）のアニメーション設定 --- */
.writer-card-block .card-footer-text p.scroll-item {
opacity: 0; /* 最初は透明 */
transform: translateX(50px); /* ★右に50pxずらしておく */
/* 滑らかに変化させる */
transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), opacity 1s;
/* ★背景が表示された後に文字が出るように、少し遅らせる */
transition-delay: 0.4s;
}
/* --- アニメーション実行後の状態 --- */
.writer-card-block .card-footer-text p.scroll-item.is-visible {
opacity: 1;
transform: translateX(0); /* 本来の位置に戻す */
}
/* ---ライター紹介カードのホバーエフェクト (拡大＋半透明)--- */
/* --- 1. リンク枠の設定 --- */
.writer-card-block .card-photo-link {
display: block;
overflow: hidden; /* ★画像が拡大した時に、枠からはみ出さないようにする */
/* スライドインのアニメーション設定はそのまま維持されます */
}
/* --- 2. 中の画像の基本設定 --- */
.writer-card-block .card-photo {
width: 100%;
display: block;
/* ★ホバー時の動きを滑らかにする設定 */
transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s;
/* 初期状態 */
transform: scale(1.0);
opacity: 1;
}
/* --- 3. マウスオーバー時の動き --- */
.writer-card-block .card-photo-link:hover .card-photo {
/* ★ 1.05倍にズームする */
transform: scale(1.05);
/* ★ 少し半透明にして「押せる感」を出す */
opacity: 0.8;
}
/* --- グリッド形式のライター紹介ブロック (.writer-grid-block) --- */
/* --- 共通レイアウト --- */
.writer-grid-block {
position: relative; /* 線を配置する基準 */
padding: 1.5rem 0 0.1rem; /* 上下の余白を確保 */
margin-bottom: 4rem;
/* ★一番下の黒い線 */
border-bottom: 0.3rem solid #000;
}
/* --- 上部の飾り線 (黒 + グレー) --- */
.writer-grid-block::before {
content: '';
position: absolute;
top: 0.6rem; /* 上から0.6remの位置 */
left: 0;
width: 100%;
/* ★黒い線(0.2rem)とグレーの線(0.1rem)を border で表現 */
height: 0.3rem; /* 合計の高さ */
border-top: 0.3rem solid #000;
border-bottom: 0.15rem solid #d9dbdd;
box-sizing: border-box;
z-index: 2;
}
/* --- 下部の飾り線 (グレー + 黒) --- */
.writer-grid-block::after {
content: '';
position: absolute;
bottom: 0.6rem; /* 下から0.6remの位置 */
left: 0;
width: 100%;
/* ★グレーの線(0.1rem)と黒い線(0.2rem)を border で表現 */
height: 0.3rem; /* 合計の高さ */
border-top: 0.3rem solid #000;
border-bottom: 0.15rem solid #d9dbdd;
box-sizing: border-box;
z-index: 2;
}
.writer-grid-block .writer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.grid-block-inner {
display: flex;
align-items: center; /* 上下中央揃え */
gap: 2px;
/*margin-bottom: 20px;*/
}
/* --- 1. ロゴエリア --- */
.grid-logo-area {
position: relative;
width: 35%;
flex-shrink: 0;
margin-right: 1rem;
margin-top: -2rem;
}
/* --- ★新しいアニメーションの定義（その場で拡大） --- */
@keyframes pop-up-zoom-only {
0% {
opacity: 0;
transform: scale(0); /* アニメーション開始時に0からスタート */
}
60% {
opacity: 1;
transform: scale(1.1);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* --- アニメーション前の初期状態 --- */
.writer-grid-block .grid-logo-area.scroll-item {
/* ★ opacity: 0 だけで隠します */
opacity: 0;
/* ★ transform: scale(0); を削除しました */
/* これにより要素のサイズが確保され、スクロール検知が正しく機能します */
/* 汎用アニメーション(transition)は無効化 */
transition: none !important;
}
/* --- アニメーションの実行 --- */
.writer-grid-block .grid-logo-area.scroll-item.is-visible {
/* アニメーション設定 */
animation-name: pop-up-zoom-only;
animation-duration: 0.6s;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-delay: 0.2s;
animation-fill-mode: forwards;
/* transition は無効のまま */
transition: none !important;
}
/* --- 2. 写真グリッドエリア --- */
.grid-photos-area {
flex-grow: 1;
display: grid;
gap: 33px;
overflow: hidden;
/*padding: 10px 0;
margin: -10px 0;*/
border-radius: 15px;
margin-left: -1.5rem;
}
/* 2列グリッド (聖母降臨) */
.grid-photos-area.cols-2 {
grid-template-columns: 1fr 1fr;
}
/* 4列グリッド (天使降臨) -> 8人を2行で表示 */
.grid-photos-area.cols-4 {
grid-template-columns: repeat(4, 1fr);
}
/* 写真リンクのスタイル */
.grid-photo-link {
position: relative;
display: block;
overflow: hidden;
border-radius: 15px;
/*border: 3px solid #fff;*/
transition: transform 0.3s ease, opacity 0.3s ease;
/* ★★★ これを追加してください ★★★ */
/* 拡大アニメーション中も角丸を維持するためのおまじない */
-webkit-mask-image: -webkit-radial-gradient(white, black);
mask-image: radial-gradient(white, black);
}
.grid-photo-link:hover {
transform: scale(1.05);
z-index: 2;
/* ★ ホバー時に半透明にする */
opacity: 0.8;
}
.photo-main {
width: 100%;
display: block;
}
/* 右上の名前タグ */
.photo-name-tag {
position: absolute;
top: 0;
right: 0;
width: 25%; /* 親に対する幅の割合 */
z-index: 2;
}
/* グリッド全体のスライドインアニメーション */
.grid-photos-area.scroll-item {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s, transform 0.8s;
}
.grid-photos-area.scroll-item.is-visible {
opacity: 1;
transform: translateX(0);
}
/* --- 3. フッターテキストエリア --- */
.grid-footer-area {
text-align: center;
padding: 0 2rem 1rem;
}
/* キャッチコピー画像 */
.grid-catch-img img {
max-width: 90%;
height: auto;
}
/* キャッチコピーのスライドイン (左から) */
.grid-catch-img.slide-from-left {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.8s, transform 0.8s;
}
.grid-catch-img.slide-from-left.is-visible {
opacity: 1;
transform: translateX(0);
margin: 0.5rem 0;
}
/* 説明文 */
.grid-description {
font-size: 1.16rem;
line-height: 1.6;
color: #fff;
font-weight: 500;
margin-top: 15px;
text-align: left; /* 左寄せ */
padding: 0 1rem;
}
/* 説明文のスライドイン (右から) */
.grid-description.slide-from-right {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.8s, transform 0.8s;
transition-delay: 0.2s;
}
.grid-description.slide-from-right.is-visible {
opacity: 1;
transform: translateX(0);
}
/* --- 各セクションの背景色 --- */
/* 聖母降臨 (ピンクグラデーション) */
.grid-madonna {
background: linear-gradient(to right, #d481b5, #000000);
margin-bottom: 4rem;
}
/* 天使降臨 (緑グラデーション) */
.grid-angel {
background: linear-gradient(to right, #48b5b5, #000000);
margin-bottom: 4rem;
}
/* 英雄降臨 (紫グラデーション) */
.grid-hero {
background: linear-gradient(to right, #a02fef, #000000);
margin-bottom: 4rem;
}
/* 騎士降臨 (青グラデーション) */
.grid-knight {
background: linear-gradient(to right, #368bff, #000000);
margin-bottom: 2rem;
}
/* --- 1. コンテナの左右余白をなくし、はみ出しを隠す --- */
.writer-grid-block .writer-container {
position: relative;
z-index: 5; /* ボーダーより手前に */
overflow: visible; /* ★hiddenを解除して、ロゴがはみ出せるようにする */
/* paddingのリセットは維持 */
padding-left: 0;
padding-right: 0;
}
/* 中身の配置バランスを整えるため、ロゴなどは少し内側に寄せる */
.writer-grid-block .grid-block-inner {
padding: 0;
}
/* 下部のテキストエリアも内側に */
.writer-grid-block .grid-footer-area {
padding-left: 20px;
padding-right: 20px;
}
/* --- 2. 聖母降臨 (2人) のサイズ調整 --- */
/* 両方とも少し拡大して、左右にはみ出させます（これでサイズが揃います） */
/* ドラ美 (左) */
.grid-madonna .grid-photos-area .grid-photo-link:nth-child(1) {
width: 105%; /* 幅を広げる */
/*margin-left: -7%;*/ /* 左にはみ出させる */
max-width: none;
}
/* わるぺこ (右) */
.grid-madonna .grid-photos-area .grid-photo-link:nth-child(2) {
width: 105%; /* 幅を広げる */
margin-right: -7%; /* 右にはみ出させる (margin-leftはautoでOK) */
max-width: none;
}
.grid-hero .grid-logo-area {
position: relative;
left: -0.3rem;
}
/* --- 4. 英雄降臨 (2人) のサイズ調整 --- */
/* 両方とも少し拡大して、左右にはみ出させます（これでサイズが揃います） */
/* 菊丸 (左) */
.grid-hero .grid-photos-area .grid-photo-link:nth-child(1) {
width: 105%; /* 幅を広げる */
/*margin-left: -7%;*/ /* 左にはみ出させる */
max-width: none;
}
/* ヘミニク (右) */
.grid-hero .grid-photos-area .grid-photo-link:nth-child(2) {
width: 105%; /* 幅を広げる */
margin-right: -7%; /* 右にはみ出させる (margin-leftはautoでOK) */
max-width: none;
}
/* --- 3. 天使降臨 (8人) のサイズ調整 --- */
/*.grid-angel .grid-photos-area .grid-photo-link:nth-child(1),
.grid-angel .grid-photos-area .grid-photo-link:nth-child(5) {
width: 115%;
margin-left: -15%;
max-width: none;
position: relative;
z-index: 1;
}
.grid-angel .grid-photos-area .grid-photo-link:nth-child(4),
.grid-angel .grid-photos-area .grid-photo-link:nth-child(8) {
width: 115%;
margin-right: -15%;
max-width: none;
position: relative;
z-index: 1;
}*/
/* --- 上段エリア (ロゴ + 写真2枚) --- */
.angel-upper-area {
display: flex;
align-items: stretch; /* 高さを揃える */
/*margin-bottom: 10px;*/
/*overflow: hidden;*/ /* はみ出し用 */
/*padding: 0 20px;*/ /* コンテナの内側余白に合わせる */
}
/* ロゴエリアの位置調整 */
.grid-angel .grid-logo-area {
/*width: 33.33%;*/ /* 3列分の1つ分 */
width: 35%; /* 固定幅で調整 (ドラ美たちと同じくらいのサイズ感) */
margin-right: 1rem;
margin-top: -2rem;
position: relative;
left: -0.5rem;
}
/* 上段の写真エリア (2枚) */
.angel-upper-photos {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 23px;
margin-left: -1.5rem;
margin-top: 1rem;
margin-bottom: 1rem;
/*overflow: hidden; */
clip-path: inset(-50px 0 -50px -50px);
}
/* --- 下段エリア (写真6枚) --- */
.angel-lower-photos {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列グリッド */
gap: 15px 23px;
/*padding: 0 20px;
margin-bottom: 20px;*/
margin-bottom: 1rem;
overflow: hidden;
}
/* --- 写真のはみ出し調整 (聖母降臨と同じロジック) --- */
/* --- 上段：左側の写真 (りんか隊長) --- */
.angel-upper-photos .grid-photo-link:first-child {
width: 105%;
max-width: none;
position: relative;
z-index: 1;
/* ★中央から拡大するように位置調整 (増えた5%の半分を左にずらす) */
margin-left: -2.5%;
}
/* --- 下段：中央列 (くまちゃむ、ゆう) --- */
/* 3列グリッドの「2番目」と「5番目」を指定します */
.angel-lower-photos .grid-photo-link:nth-child(3n+2) {
width: 105%;
max-width: none;
position: relative;
z-index: 1;
/* ★中央から拡大するように位置調整 */
margin-left: -2.5%;
}
/* 上段：右側の写真 (千奈里) を右にはみ出させる */
.angel-upper-photos .grid-photo-link:last-child {
width: 105%;
margin-right: -7%;
max-width: none;
position: relative;
z-index: 1;
}
/* 下段：左列 (音華花、らあら) を左にはみ出させる */
.angel-lower-photos .grid-photo-link:nth-child(3n+1) {
width: 105%;
margin-left: -5%;
max-width: none;
position: relative;
z-index: 1;
}
/* 下段：右列 (ここあ、黒咲さゆ) を右にはみ出させる */
.angel-lower-photos .grid-photo-link:nth-child(3n) {
width: 105%;
margin-right: -7%;
max-width: none;
position: relative;
z-index: 1;
}
/* --- アニメーション (スライドイン) --- */
.angel-upper-photos.scroll-item,
.angel-lower-photos.scroll-item {
opacity: 0;
transform: translateX(50px);
transition: opacity 0.8s, transform 0.8s;
}
.angel-upper-photos.scroll-item.is-visible,
.angel-lower-photos.scroll-item.is-visible {
opacity: 1;
transform: translateX(0);
}
/* --- 騎士降臨 (ガンちゃん) --- */
/* --- レイアウト調整 --- */
/* ロゴ・写真・テキストを上揃えで横に並べる */
.grid-knight .grid-block-inner {
align-items: flex-start;
}
/* --- 2. 写真エリア (1カラム用) --- */
.grid-photos-area.cols-1 {
grid-template-columns: 1fr; /* 1列にする */
flex-grow: 0; /* 横幅を自動で広げない */
width: 154%;
margin-top: 0.2rem;
overflow: inherit;
}
/* --- 3. 右側のテキストエリア --- */
.grid-text-area {
flex-grow: 1; /* 残りのスペースを埋める */
padding-left: 0.4rem;
color: #fff;
}
/* キャッチコピー画像のサイズ調整 */
.grid-knight .grid-catch-img img {
width: 100%;
margin-top: -0.5rem;
margin-left: 1rem;
/* max-width: 400px; */
/* margin-bottom: 15px; */
}
/* 説明文のスタイル */
.grid-knight .grid-description {
font-size: 1.16rem;
line-height: 1.3;
text-align: left;
}
/* 説明文のスタイル */
/*.hall-coverage-section { padding-bottom: 60px; }
.page-nplan-jyanjyan .section-intro-jyan2 {
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
font-weight: bold;
color: #333;
text-align: center;
font-size: 1.2rem;
line-height: 1.8;
margin: 2rem auto 3rem;
max-width: 900px;
}*/
.page-nplan-jyanjyan .section-intro-jyan3 {
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-align: left;
line-height: 1.3;
font-size: 1.75rem;
font-weight: 900;
margin-bottom: 2rem;
letter-spacing: -0.02em;
color: #393991;
margin: 1rem 0;
margin-top: -0.5rem;
margin-bottom: 1.5rem;
transition-delay: 0.5s;
}
.page-nplan-jyanjyan .section-outro-jyan3 {
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-align: left;
line-height: 1.3;
font-size: 1.26rem;
font-weight: 500;
margin-bottom: 2rem;
letter-spacing: -0.02em;
color: #000;
margin: 1rem 0;
margin-top: -4.0rem;
margin-bottom: 4.5rem;
transition-delay: 0.5s;
}
.page-nplan-jyanjyan .section-outro-jyan3 a {
color: #000;
}
.hall-photo-area {
position: relative;
margin: 0 auto;
margin-bottom: 5rem;
}
.hall-photo {
width: 100%;
display: block;
/*border: 5px solid #000;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);*/
}
.hall-catch-img {
position: absolute;
bottom: 25%;
left: 15%;
width: 73%;
/* max-width: 500px; */
z-index: 5;
}
/* キャッチ画像のアニメーション (右下から) */
body.page-nplan-jyanjyan .hall-catch-img.scroll-item {
opacity: 0;
transform: translate(50px, 50px);
transition: none !important;
animation-fill-mode: forwards;
}
body.page-nplan-jyanjyan .hall-catch-img.scroll-item.is-visible {
animation-name: slide-in-shake-bottom-right;
animation-duration: 1.5s;
animation-delay: 1.0s;
animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
@keyframes slide-in-shake-bottom-right {
/*0% { opacity: 0; transform: translate(50px, 50px); }
60% { opacity: 1; transform: translate(0, 0); }
70% { transform: translate(-3px, -3px); }
80% { transform: translate(3px, 3px); }
90% { transform: translate(-2px, -2px); }
100% { opacity: 1; transform: translate(0, 0); }*/
0% {
opacity: 0;
transform: translate(50px, 50px); /* 右下からスタート */
}
50% {
opacity: 1;
transform: translate(0, 0); /* 一旦定位置へ */
}
/* ★ここから激しいブルブル（移動量アップ ＋ 回転を追加） */
55% { transform: translate(-15px, -10px) rotate(-5deg); }
60% { transform: translate(12px, 8px) rotate(4deg); }
65% { transform: translate(-10px, -5px) rotate(-3deg); }
70% { transform: translate(8px, 6px) rotate(2deg); }
75% { transform: translate(-5px, -3px) rotate(-1deg); }
80% { transform: translate(3px, 2px) rotate(0deg); }
100% {
opacity: 1;
transform: translate(0, 0) rotate(0deg); /* 定位置で停止 */
}
}
/* --- タブレットサイズ用のレスポンシブ調整 じゃんじゃん紹介ページ --- */
/* --- タブレット表示用の調整 (幅1150px以下) --- */
@media screen and (max-width: 1150px) {
/* --- 全体のコンテナ --- */
.page-nplan-jyanjyan .jyanjyan-container {
padding: 0 3vw; /* 左右の余白を画面幅に連動させる */
}
.page-nplan-jyanjyan .yt-logo {
height: 16rem;
}
/* --- ページタイトル --- */
.page-nplan-jyanjyan .page-title span {
font-size: 1.8rem;
}
.page-nplan-jyanjyan .section-intro-jyan {
font-size: min(3.6vw, 2.4rem);
margin: 0.5rem 0;
}
.page-nplan-jyanjyan .section-intro-jyan2 {
font-size: 1.5rem;
font-size: min(2.3vw, 1.5rem);
margin: 1rem;
}
.page-nplan-jyanjyan .section-intro-jyan3 {
font-size: 1.5rem;
font-size: min(2.3vw, 1.5rem);
}
.page-nplan-jyanjyan .section-outro-jyan3 {
font-size: 1.04rem;
font-size: min(1.6vw, 1.04rem);
margin-top: 1rem;
}
.hall-photo-area {
margin-bottom: 0.5rem;
}
.grid-knight {
margin-bottom: 1rem;
}
.grid-knight .grid-description {
font-size: 1.58vw;
font-size: min(1.58vw, 1.0rem);
margin-top: -1vw;
margin-bottom: 3vw;
}
}
/* --- スマートフォン表示用の調整 (幅768px以下) --- */
@media screen and (max-width: 768px) {
/* --- ページタイトル --- */
.page-header-area {
padding: 20px 15px 40px;
}
.page-nplan-jyanjyan .yt-logo {
height: 24vw;
}
.page-nplan-jyanjyan .page-title span {
font-size: 4vw; /* 画面幅に応じてサイズが変わるように */
line-height: 1.3;
}
.page-nplan-jyanjyan .jyanjyan-container {
padding: 0 2vw;
}
.page-nplan-jyanjyan .promo-section {
padding: 10vw 2vw 2vw;
}
.page-nplan-jyanjyan .section-intro-jyan {
/*font-size: min(4.4vw, 2.9rem);*/
font-size: 3.85vw;
margin: 3vw 0 0;
}
.page-nplan-jyanjyan .section-intro-jyan2 {
font-size: 3.0vw;
/*font-size: min(3.8vw, 0.95rem);*/
margin: 1vw 2vw 6vw;
}
.writer-card-block {
padding: 0 0 5vw 0;
}
.writer-card-inner {
margin-bottom: 4vw;
}
.card-header {
margin-bottom: -8vw;
}
.card-footer-text {
padding: 2vw 4vw 4vw;
}
.card-footer-text p {
font-size: min(3.6vw, 1.1rem);
line-height: 1.4;
}
.card-footer-text::after {
bottom: 2vw;
height: 0.3vw;
}
.grid-madonna {
background: linear-gradient(to right, #d481b5, #000000);
margin-bottom: 8vw;
}
.writer-grid-block::before {
top: 1.3vw;
height: 0.3vw;
border-top: 0.8vw solid #000;
border-bottom: 0.3vw solid #d9dbdd;
}
.writer-grid-block::after {
bottom: 1.3vw;
height: 0.3vw;
border-top: 0.8vw solid #000;
border-bottom: 0.3vw solid #d9dbdd;
}
.writer-grid-block {
border-bottom: 0.8vw solid #000;
margin-bottom: 4vw;
}
.grid-catch-img img {
max-width: 100%;
height: auto;
}
.writer-grid-block .grid-footer-area {
padding: 2vw 2vw 4vw;
}
.grid-description {
font-size: min(3.6vw, 1.1rem);
line-height: 1.4;
padding: 0 2vw;
margin-top: 3vw;
margin-bottom: 1vw;
}
.grid-photos-area {
gap: 2vw;
margin-left: -4vw;
margin-top: -2vw;
}
.grid-madonna .grid-photos-area .grid-photo-link:nth-child(1) {
width: 100%;
max-width: none;
}
.grid-madonna .grid-photos-area .grid-photo-link:nth-child(2) {
width: 100%;
max-width: none;
}
.grid-catch-img.slide-from-left.is-visible {
margin: 0;
}
.grid-logo-area {
width: 34vw;
margin-right: 3vw;
margin-top: -2vw;
}
.grid-angel .grid-logo-area .logo-main {
position: relative;
/*top: 5vw;*/
}
.angel-upper-photos {
flex-grow: 1;
display: grid;
gap: 3vw;
margin-left: -5vw;
margin-top: 0vw;
margin-bottom: 2.5vw;
clip-path: inset(-50px 0 -50px -50px);
}
.angel-lower-photos {
gap: 2.3vw 3vw;
margin-bottom: 1vw;
}
.grid-angel .grid-logo-area {
left: -1vw;
width: 34vw;
margin-right: 4vw;
margin-top: -5vw;
}
.grid-angel {
margin-bottom: 8vw;
}
.grid-hero .grid-photos-area .grid-photo-link:nth-child(1) {
width: 100%;
max-width: none;
}
.grid-hero .grid-photos-area .grid-photo-link:nth-child(2) {
width: 100%;
max-width: none;
}
.grid-hero {
margin-bottom: 8vw;
}
/* --- 1. 全体をグリッドレイアウトにする --- */
.grid-knight .grid-block-inner {
display: grid;
/* 上段: ロゴ(28%) 写真(44%) キャッチ(28%) の比率で横並び */
grid-template-columns: 28% 44% 28%;
/* 2行構成 */
grid-template-rows: auto auto;
gap: 5px; /* 要素間の隙間 */
align-items: center; /* 上下中央揃え */
margin-top: -2vw;
}
/* --- 2. 各要素の配置とサイズ調整 --- */
/* [左] ロゴエリア */
.grid-knight .grid-logo-area {
width: 34vw; /* グリッドの枠に合わせる */
margin: 0;
grid-column: 1 / 2; /* 1列目に配置 */
grid-row: 1; /* 1行目 */
}
/* [中] 写真エリア */
.grid-knight .grid-photos-area.cols-1 {
width: 100% !important;
margin: 0;
grid-column: 2 / 3; /* 2列目に配置 */
grid-row: 1; /* 1行目 */
}
/* 写真リンクの余白調整 */
.grid-knight .grid-photo-link {
width: 72%;
margin: 0;
margin-left: 6vw;
}
/* [右 & 下] テキストエリアの特殊処理 */
.grid-knight .grid-text-area {
/* ★重要：このdivの枠を消滅させて、中身(h3とp)をグリッドの直下に配置させる */
display: contents;
}
/* [右] キャッチ画像 */
.grid-knight .grid-catch-img {
width: 100%;
margin: 0;
grid-column: 3 / 4; /* 3列目に配置 */
grid-row: 1; /* 1行目 */
}
.grid-knight .grid-catch-img img {
width: 100%;
margin: 0;
margin-left: -5vw;
}
/* [下] 説明文 */
.grid-knight .grid-description {
grid-column: 1 / -1; /* 1列目から最後までぶち抜き（全幅） */
grid-row: 2; /* 2行目に配置 */
text-align: left; /* 左寄せ */
font-size: min(3.6vw, 1.1rem);
line-height: 1.4;
padding: 0 5vw;
margin-top: 1vw;
margin-bottom: 5vw;
}
.page-nplan-jyanjyan .section-intro-jyan3 {
font-size: 3.8vw;
/*font-size: min(3.8vw, 0.95rem);*/
margin: 3vw 2vw 4vw;
margin-top: 0rem;
}
.page-nplan-jyanjyan .section-outro-jyan3 {
font-size: 2.5vw;
line-height: 1.5;
/* font-size: min(3.4vw, 0.7rem); */
margin: 0.5vw 2vw 4vw;
margin-top: 0;
margin-bottom: 2rem;
}
.hall-photo-area {
margin-bottom: 0.5rem;
}
}
/* ===================================================================
15. WEB編集部トップページ (.page-web-top)
=================================================================== */
body.page-web-top main {
padding: 0;
background-color: #606060;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
}
body.page-web-top .web-top-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.page-web-top .page-title {
opacity: 0;
font-size: 2.6rem;
color: #FFF;
font-weight: 600;
margin: 0;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
/*line-height: 1.6;*/
/*font-feature-settings: "palt";*/
animation-delay: 0.6s !important;
}
.page-web-top .page-title span {
display: block;
font-size: 16px;
font-weight: normal;
color: #FFF;
/*margin-top: 5px;*/
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
line-height: 1.6;
font-feature-settings: "palt";
animation-delay: 0.9s !important;
}
.page-web-top .page-header-area {
/*background-color: #f9ff00;*/
background-image: linear-gradient(to bottom, #000000, #636363);
padding: 40px 20px;
padding-bottom: 80px;
text-align: center;
}
.web-hr-divider {
width: 100%;
/* ★ nplan_tophr.jpg の画像の「実際の高さ」をここに指定してください */
height: 21px;
min-height: 21px;
/* ★ nplan_tophr.jpg の画像パスをここに指定してください */
background-image: url('https://www.plantopia.co.jp/images/nplan_tophr.jpg');
background-repeat: repeat-x; /* 横方向にリピート */
background-position: center; /* 中央を基準にリピート */
background-size: auto 21px; /* 高さを明示的に固定 */
margin: 0;
padding: 0;
display: block; /* divなので標準でblockですが念のため */
}
.web-top-subheader {
position: relative; /* ★ピンクの線を配置するための基準点 */
/* ★背景のグラデーション（画像から抽出） */
background-image: linear-gradient(to bottom, #020202, #81baa5);
padding: 0.5rem 1rem;
text-align: center;
overflow: hidden; /* ★はみ出す光彩を隠す */
/* ★最低限の高さを確保しておく */
/* 中のテキスト(2行分)＋パディングが収まる高さを指定 */
min-height: 80px;
/* フレックスボックスを使って、高さを固定しても文字を上下中央にする */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* ★上のピンクの線（疑似要素で作成） */
.web-top-subheader::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 12px;*/
/* 鮮やかなピンクのグラデーション */
/*background-image: linear-gradient(to right, #f0f, #ff00c8, #ff00a0);*/
/* 光彩（グロー）エフェクト */
/*box-shadow: 0 0 8px 2px #ff00ff;*/
}
.web-top-subheader p {
opacity: 0;
margin: 0;
color: #fff;
font-size: 1.2rem;
font-weight: normal;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7); /* 文字を読みやすくする影 */
position: relative; /* 念のためテキストが線より手前に来るように */
z-index: 2;
line-height: 1.8;
font-feature-settings: "palt";
animation-name: fadeIn-up;
animation-duration: 0.8s;
animation-delay: 1.3s; /* タイトルの後に表示 */
animation-fill-mode: forwards;
}
.web-top-subheader b {
opacity: 0;
margin: 0;
color: #fff;
font-size: 1.8rem;
font-weight: bold;
text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
position: relative;
z-index: 2;
font-feature-settings: "palt";
animation-name: fadeIn-up;
animation-duration: 0.8s;
animation-delay: 1.3s; /* タイトルの後に表示 */
animation-fill-mode: forwards;
}
/* セクション全体の背景（上から下へ暗くなるグラデーション） */
.web-anchor-nav {
/* 画像に近いグレーのグラデーション */
/*background: linear-gradient(to bottom, #c1c1c1 0%, #555555 40%, #2b2b2b 100%);*/
background: linear-gradient(to bottom, #c1c1c1 0%, #000000 100%);
padding: 5rem 0;
margin-bottom: 0;
text-align: center;
/*border-bottom: 8px solid #000;*/
}
/* リストのリセットとレイアウト */
.anchor-nav-list {
list-style: none;
padding: 0;
margin: 0;
/*max-width: 960px;*/
margin: 0 auto;
}
.anchor-nav-list li {
margin-bottom: 50px; /* 各項目の間隔 */
}
.anchor-nav-list li:first-child {
margin-bottom: 30px;
}
.anchor-nav-list li:nth-child(2) {
margin-bottom: 70px;
}
.anchor-nav-list li:last-child {
/*margin-bottom: 0;*/
}
/* 3番目：パチマガスロマガ所属ライター一覧 */
.anchor-nav-list li:nth-child(3) .anchor-main-text {
color: #b1d4e5 !important;
}
/* 4番目：パチマガスロマガの歴史 */
.anchor-nav-list li:nth-child(4) .anchor-main-text {
color: #84b4bf !important;
}
/* 5番目：読者属性 */
.anchor-nav-list li:nth-child(5) .anchor-main-text {
color: #809392 !important;
}
/* リンク全体の挙動 */
.anchor-nav-list a {
text-decoration: none;
display: block;
transition: opacity 0.3s, transform 0.3s;
}
.anchor-nav-list a:hover {
opacity: 0.8;
transform: translateY(-15px); /* ホバー時に少し浮く */
}
/* --- 1. メインロゴ画像 (Mobile, FREE) --- */
.anchor-main-logo {
max-width: 480px;
/*width: 100%;*/
height: auto;
display: block;
margin: 0 auto 5px auto; /* 中央揃えと下余白 */
margin-bottom: -0.3rem;
/* filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.5)); */
position: relative;
z-index: 1;
}
/* --- 2. メインテキスト (ライター一覧, 歴史, 読者属性) --- */
.anchor-main-text {
display: block;
font-size: 3.2rem; /* フォントサイズ大きめ */
font-weight: 900; /* 太字 */
line-height: 1.2;
margin-bottom: 5px;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
/* ★文字色を水色に設定 */
color: #aeeaff;
/* ★文字の影（黒い縁取りと影で立体感を出す） */
text-shadow:
1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000,
3px 3px 5px rgba(0,0,0,0.8);
font-feature-settings: "palt";
}
/* --- 3. 区切り線画像 (nplan_hr_gray.png) --- */
.anchor-hr {
width: 90%;
/*max-width: 800px;*/ /* 線の最大幅 */
height: auto;
display: block;
margin: 0 auto 10px auto; /* 上下の余白 */
}
/* --- 4. 説明文 --- */
.anchor-desc {
font-size: 1.2rem;
color: #ffffff; /* 白文字 */
font-weight: bold;
margin: 0;
line-height: 1.6;
/* 読みやすくするために黒い影をつける */
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}
/* ---★アンカーリンク専用：左右交互スライドインアニメーション --- */
/* --- 共通設定：初期状態（透明） --- */
.anchor-anim-left,
.anchor-anim-right {
opacity: 0;
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 左からスライドイン (.anchor-anim-left) --- */
.anchor-anim-left {
transform: translateX(-100px); /* 左に50pxずらしておく */
}
/* --- 右からスライドイン (.anchor-anim-right) --- */
.anchor-anim-right {
transform: translateX(100px); /* 右に50pxずらしておく */
}
/* --- 表示された時の状態 (.is-visible) --- */
.anchor-anim-left.is-visible,
.anchor-anim-right.is-visible {
opacity: 1;
transform: translateX(0); /* 本来の位置に戻る */
}
/* 1番目：パチマガスロマガMobile（待ち時間なし） */
.anchor-nav-list li:nth-child(1) {
transition-delay: 0.5s;
}
/* 2番目：パチマガスロマガFREE（0.5秒後） */
.anchor-nav-list li:nth-child(2) {
transition-delay: 0.5s;
}
/* 3番目：ライター一覧（1.0秒後） */
.anchor-nav-list li:nth-child(3) {
transition-delay: 0.5s;
}
/* 4番目：歴史（1.5秒後） */
.anchor-nav-list li:nth-child(4) {
transition-delay: 0.5s;
}
/* 5番目：読者属性（2.0秒後） */
.anchor-nav-list li:nth-child(5) {
transition-delay: 0.5s;
}
/* -------- パチマガスロマガMobile セクション -------- */
/* --- セクション全体の背景 --- */
.web-mobile-section {
background-color: #606060; /* 背景色 */
background-size: cover;
padding-bottom: 120px;
color: #fff;
overflow: hidden; /* はみ出し防止 */
}
/* --- タイトル帯 --- */
.mobile-title-bar {
width: 100%;
background-image: url('https://www.plantopia.co.jp/images/web_mobile_title_frame.png');
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%;
padding: 20px 0;
text-align: center;
position: relative;
z-index: 2;
margin-top: -0.5rem !important;
}
.title-inner {
position: relative; /* 子要素の配置基準にする */
width: 100%; /* ★幅を100%(最大1200px)いっぱいまで広げる */
min-height: 130px !important;
/* 既存の設定（中央揃えなど）はそのまま維持 */
height: auto !important;
display: flex;
justify-content: center;
align-items: center;
}
.mobile-logo-img {
width: 50% !important;
max-width: 500px;
height: auto;
object-fit: contain; /* 念のため縦横比を維持 */
}
.mobile-price-img {
position: absolute;
right: 40px; /* 右端に配置 */
top: 50%;
transform: translateY(-50%);
max-height: 100%;
width: auto;
}
/* --- メインレイアウト設定 --- */
/* コンテナを相対配置の基準にする */
.mobile-container-relative {
position: relative;
margin-top: 40px;
}
/* ★左側のスマホ画像 (絶対配置で浮かる) */
.mobile-floating-phone {
position: absolute;
top: -35px;
left: -15px;
width: 580px;
z-index: 20 !important;
}
.phone-img {
width: 100%;
height: auto;
filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.6));
}
/* ★右側のコンテンツグループ (スマホの幅分だけ左を空ける) */
.mobile-right-group {
padding-left: 500px; /* スマホ画像の幅に合わせて余白を確保 */
width: 100%;
box-sizing: border-box;
}
/* --- テキストエリア --- */
.mobile-intro-text {
/*margin-bottom: 40px;*/
/*margin-left: 26px;*/
}
.mobile-catch {
/*font-size: 3rem;*/
font-size: min(3.7vw, 2.9rem);
font-weight: 900;
line-height: 1.3;
margin-bottom: 10px;
color: #a7b7b4;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-align: center;
font-feature-settings: "palt";
}
.mobile-desc {
font-size: 1.2rem;
line-height: 1.5;
margin-left: 0.5rem;
}
.mobile-desc .text-red {
color: #ff0000;
font-weight: bold;
}
/* --- 黒ボックスエリア (全幅拡張) --- */
.mobile-black-box-wrapper {
/* 親要素の左余白(420px)を打ち消して左端まで伸ばす */
margin-left: -420px;
/* 幅を「右側の幅 + 左に伸ばした分」に設定 */
width: calc(100% + 420px);
position: relative;
z-index: 1; /* スマホより奥に配置 */
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* ★紫グラデーションのタイトル枠 */
.mobile-purple-title {
/* 背景は左端まで伸びているので、文字だけ右に寄せる */
padding-left: 450px;
background: linear-gradient(to right, #000000, #7c536e);
padding-top: 8px;
padding-bottom: 8px;
/* 右側のパディング */
padding-right: 20px;
/*border-top: 1px solid #a64dff;
border-bottom: 1px solid #4b0082;*/
}
.mobile-purple-title h4 {
margin: 0;
color: #fff;
font-size: 2rem;
font-weight: 900;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-shadow: 1px 1px 2px #000;
}
/* ★黒背景のコンテンツ部分 */
.mobile-black-content {
/* 背景は左端まで伸びているので、中身だけ右に寄せる */
padding-left: 450px;
background-color: #000000;
padding-right: 30px;
padding-bottom: 5px;
padding-top: 25px;
border: 1px solid #333;
border-top: none;
}
/* 3カラム画像リスト */
.mobile-content-list {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.mobile-content-list li {
width: 32%;
}
.mobile-content-list img {
width: 100%;
height: auto;
border: 1px solid #666;
}
/* 下部説明文 */
.mobile-bottom-desc {
font-size: 1.2rem;
line-height: 1.5;
/*margin-bottom: 25px;*/
margin-left: 26px;
color: #fff;
font-weight: 500;
}
/* 画像ボタン */
.mobile-btn-area {
text-align: right; /* 右寄せ */
margin-top: 30px;
}
.mobile-img-btn {
display: inline-block;
transition: transform 0.2s, opacity 0.2s;
}
.mobile-img-btn img {
/*height: 50px;*/
width: auto;
display: block;
}
.mobile-img-btn:hover {
transform: scale(1.03);
opacity: 0.9;
}
.anchor-hr2 {
width: 100%;
height: auto;
display: block;
margin: 0;
}
/* -------- パチマガスロマガMobile アニメーション -------- */
/* --- 1. 基本の下からフェードイン (anim-up) --- */
.web-mobile-section .anim-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.web-mobile-section .anim-up.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- 2. 左からスマホが登場 (anim-phone-in) --- */
/* 左から滑り込みつつ、少し行き過ぎて戻る（バウンド）動き */
.web-mobile-section .anim-phone-in {
opacity: 0;
/* 左に大きくずらし、少し傾けておく */
transform: translateX(-150px) rotate(-5deg);
transition: opacity 0.8s, transform 2.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* バネのような挙動 */
}
.web-mobile-section .anim-phone-in.is-visible {
opacity: 1;
/* 本来の位置（left: -40px等で指定済）に戻し、傾きも直す */
transform: translateX(0) rotate(0deg);
}
/* --- 3. 右から黒ボックスが登場 (anim-from-right) --- */
.web-mobile-section .anim-from-right {
opacity: 0;
/* 右にずらしておく */
transform: translateX(100px);
transition: opacity 0.8s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.web-mobile-section .anim-from-right.is-visible {
opacity: 1;
transform: translateX(0);
}
/* --- 4. 3つの画像がポンポンと飛び出す (anim-pop-up) --- */
.web-mobile-section .anim-pop-up {
opacity: 0;
/* 下にずらしつつ、縮小しておく */
transform: translateY(30px) scale(0.8);
transition: opacity 0.6s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* ポップなバネの動き */
}
.web-mobile-section .anim-pop-up.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* --- 5. 時間差（ディレイ）の設定 --- */
.web-mobile-section .delay-1 { transition-delay: 0.2s; }
.web-mobile-section .delay-2 { transition-delay: 0.4s; }
.web-mobile-section .delay-3 { transition-delay: 0.6s; }
.web-mobile-section .delay-4 { transition-delay: 0.8s; }
.web-mobile-section .delay-5 { transition-delay: 1.0s; }
.web-mobile-section .delay-6 { transition-delay: 1.2s; }
/* --- 1. ぶるぶる震える動き（キーフレーム）の定義 --- */
@keyframes button-buruburu {
0% { transform: rotate(0deg) scale(1); }
10% { transform: rotate(-3deg) scale(1.1); } /* 左に傾き少し拡大 */
20% { transform: rotate(3deg) scale(1.1); } /* 右に傾く */
30% { transform: rotate(-3deg) scale(1.1); }
40% { transform: rotate(3deg) scale(1.1); }
50% { transform: rotate(-2deg) scale(1.1); }
60% { transform: rotate(2deg) scale(1.1); }
70% { transform: rotate(-1deg) scale(1.05); }
100% { transform: rotate(0deg) scale(1); } /* 元に戻る */
}
/* --- 2. アニメーションの適用 --- */
/* 親要素(.mobile-btn-area)が表示された(.is-visible)後に実行 */
.web-mobile-section .mobile-btn-area.is-visible .mobile-img-btn {
/* アニメーション名：button-buruburu */
/* 実行時間：0.8秒 */
/* 遅延時間：2.0秒 (スライドインが終わるのを待ってから開始) */
animation: button-buruburu 0.8s ease-in-out 1.5s;
/* (オプション) もしずっと定期的に動かしたい場合はこちらを使ってください */
/*animation: button-buruburu 2s ease-in-out 2.0s infinite; */
}
/* --- 下からスライドインするアニメーション (anim-up) --- */
.web-mobile-section .anim-up {
opacity: 0;
transform: translateY(30px); /* 30px下からスタート */
/* 滑らかな動きの設定 */
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 表示された時の状態 (.is-visible) --- */
.web-mobile-section .anim-up.is-visible {
opacity: 1;
transform: translateY(0); /* 本来の位置に戻る */
}
/* --- 時間差（ディレイ）の設定 --- */
.web-mobile-section .delay-2 {
transition-delay: 0.3s; /* ロゴより0.3秒遅れて表示 */
}
/* 1. アニメーション開始前（透明・下から） */
.web-mobile-section .mobile-price-img.anim-up {
/* 中央(-50%)の位置から、さらに30px下にずらして待機 */
transform: translateY(calc(-50% + 30px)) !important;
}
/* 2. アニメーション終了後（表示・定位置） */
.web-mobile-section .mobile-price-img.anim-up.is-visible {
/* 本来の「垂直中央(-50%)」の位置に戻す */
transform: translateY(-50%) !important;
/* 透明度は1に */
opacity: 1 !important;
}
/* -------- パチマガスロマガFREE セクション (左右反転) -------- */
/* --- セクション全体の背景 --- */
.web-free-section {
background-color: #606060; /* 背景色 */
background-size: cover;
padding-bottom: 120px;
color: #fff;
overflow: hidden; /* はみ出し防止 */
}
/* --- タイトル帯 (FREE用画像) --- */
.free-title-bar {
width: 100%;
/* FREE用のタイトル背景画像を指定してください */
background-image: url('https://www.plantopia.co.jp/images/web_free_title_frame.png');
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%;
padding: 20px 0;
text-align: center;
position: relative;
z-index: 2;
}
/* ロゴ画像 */
.free-logo-img {
width: 50% !important; /* Mobileと同じサイズ感 */
max-width: 450px;
height: auto;
}
/* 0円画像 (位置調整) */
.free-price-img {
position: absolute;
right: 40px;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
width: auto;
}
/* --- メインレイアウト設定 --- */
.free-container-relative {
position: relative;
margin-top: 40px;
}
/* ★右側のスマホ画像 (絶対配置で浮く) - Mobileとは逆 */
.free-floating-phone {
position: absolute;
top: -17px;
right: -92px;
left: auto;
width: 580px;
z-index: 20 !important;
}
/* ★左側のコンテンツグループ (スマホの幅分だけ右を空ける) */
.free-left-group {
padding-right: 420px; /* 右側に余白を確保 */
padding-left: 0;
width: 100%;
box-sizing: border-box;
}
/* --- テキストエリア --- */
.free-intro-text {
/*margin-bottom: 40px;*/
}
.free-catch {
font-size: 2.9rem;
font-weight: 900;
line-height: 1.3;
margin-bottom: 10px;
color: #9cb6e2; /* FREE用の水色っぽい白文字 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-align: center;
font-feature-settings: "palt";
}
.free-desc {
font-size: 1.2rem;
line-height: 1.5;
}
/* --- 黒ボックスエリア (右拡張) --- */
.free-black-box-wrapper {
/* 親要素の右余白(420px)を打ち消して右端まで伸ばす */
margin-right: -420px;
/* 幅を「左側の幅 + 右に伸ばした分」に設定 */
width: calc(100% + 420px);
position: relative;
z-index: 1; /* スマホより奥に配置 */
box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
/* ★オレンジグラデーションのタイトル枠 */
.free-orange-title {
/* 背景は右端まで伸びているので、文字だけ左に寄せる */
padding-right: 450px;
/* オレンジのグラデーション */
background: linear-gradient(to left, #020202 10%, #536e7c);
padding-top: 8px;
padding-bottom: 8px;
/* 左側のパディング */
padding-left: 20px;
/*border-top: 1px solid #ffdb4d;
border-bottom: 1px solid #cc7a00;*/
}
.free-orange-title h4 {
margin: 0;
color: #FFF; /* オレンジ背景なので黒文字が見やすいかも（白なら #fff） */
font-size: 2rem;
font-weight: 900;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
text-shadow: none;
padding-left: 3rem;
}
/* ★黒背景のコンテンツ部分 */
.free-black-content {
/* 背景は右端まで伸びているので、中身だけ左に寄せる */
padding-right: 450px;
background-color: #000000;
padding-left: 30px;
padding-bottom: 25px;
padding-top: 25px;
border: 1px solid #333;
border-top: none;
}
/* 3カラム画像リスト */
.free-content-list {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0 0 25px 0;
}
.free-content-list li {
width: 32%;
}
.free-content-list img {
width: 100%;
height: auto;
border: 1px solid #666;
}
/* 下部説明文 */
.free-bottom-desc {
font-size: 1.2rem;
line-height: 1.5;
margin-bottom: 0;
color: #ffffff;
font-weight: 500;
margin-right: 2rem;
}
/* 画像ボタンエリア */
.free-btn-area {
text-align: left; /* FREEは左寄せ */
margin-top: 30px;
position: relative;
z-index: 5;
}
/* ------ ★FREEセクション専用 アニメーション (反転版) -------- */
/* --- 1. 右からスマホが登場 (anim-phone-in-right) --- */
.web-free-section .anim-phone-in-right {
opacity: 0;
/* 右に大きくずらし、逆に傾けておく */
transform: translateX(150px) rotate(5deg);
transition: opacity 0.8s, transform 2.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.web-free-section .anim-phone-in-right.is-visible {
opacity: 1;
transform: translateX(0) rotate(0deg);
}
/* --- 2. 左から黒ボックスが登場 (anim-from-left) --- */
.web-free-section .anim-from-left {
opacity: 0;
/* 左にずらしておく */
transform: translateX(-100px);
transition: opacity 0.8s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.web-free-section .anim-from-left.is-visible {
opacity: 1;
transform: translateX(0);
}
/* 共通アニメーション（Mobileと同じ設定を利用する場合は再定義不要ですが、念のため） */
.web-free-section .anim-up {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.web-free-section .anim-up.is-visible {
opacity: 1;
transform: translateY(0);
}
.web-free-section .anim-pop-up {
opacity: 0;
transform: translateY(30px) scale(0.8);
transition: opacity 0.6s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.web-free-section .anim-pop-up.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* 時間差設定 */
.web-free-section .delay-1 { transition-delay: 0.2s; }
.web-free-section .delay-2 { transition-delay: 0.4s; }
.web-free-section .delay-3 { transition-delay: 0.6s; }
.web-free-section .delay-4 { transition-delay: 0.8s; }
.web-free-section .delay-5 { transition-delay: 1.0s; }
.web-free-section .delay-6 { transition-delay: 1.2s; }
/* 料金画像アニメーション */
.web-free-section .free-price-img.anim-up {
transform: translateY(calc(-50% + 30px)) !important;
}
.web-free-section .free-price-img.anim-up.is-visible {
transform: translateY(-50%) !important;
opacity: 1 !important;
}
/* FREEセクションのボタンエリアが表示されたら実行 */
.web-free-section .free-btn-area.is-visible .mobile-img-btn {
/* Mobileと同じ「button-buruburu」アニメーションを使用 */
animation: button-buruburu 0.8s ease-in-out 1.5s;
}
/* -------- 所属ライター一覧 セクション (Web編集部) -------- */
/* --- セクション全体 --- */
.web-writers-section {
background-color: #606060;
padding-bottom: 120px;
color: #fff;
overflow: hidden;
}
/* --- ヘッダー帯 (紫グラデーション) --- */
.writers-header {
background: linear-gradient(to right, #6600cc, #9933ff, #000000);
padding: 15px 0;
border-bottom: 4px solid #330066; /* 下部の濃い紫の線 */
position: relative;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
text-align: center;
}
/* --- タイトル帯 (背景画像設定) --- */
.writers-title-bar {
width: 100%;
/* フレーム画像を指定 */
background-image: url('https://www.plantopia.co.jp/images/web_writer_title_frame.png');
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%; /* 高さに合わせる */
padding: 10px 0;
text-align: center;
position: relative;
z-index: 2;
margin-top: 0; /* マージンリセット */
}
.writers-main-title {
display: inline-block; /* アニメーションのためにブロック化 */
font-size: 4.5rem;
font-weight: 900;
margin: 0;
color: #fff;
text-shadow: 4px 4px 0 #000;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
/*font-style: italic;*/
font-feature-settings: "palt";
}
/* --- 1. 回転アニメーションの定義 (キーフレーム) --- */
@keyframes rotate-circle-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* --- バッジ画像 (プライス画像と同じ位置に固定) --- */
.writers-badge {
position: absolute; /* 親要素 .title-inner に対して絶対配置 */
right: 2%; /* 右端に固定 (Mobile/FREEと同じ) */
top: -5%;
transform: translateY(-50%);
width: auto; /* 幅は中身なり */
height: 115%; /* 枠に対して80%くらいの高さに制限 */
/*max-height: 90px;*/ /* 最大サイズ制限 */
z-index: 2;
aspect-ratio: 1 / 1; /* ★正方形になるようにアスペクト比を固定 */
}
/* --- 背面で回転する画像 (.badge-back-rotate) --- */
.badge-back-rotate {
position: absolute; /* コンテナに対して絶対配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain; /* コンテナに収まるように表示 */
z-index: 1; /* ★背面（前面より低い値） */
/* ★回転アニメーションの適用 */
/* 20秒かけてゆっくり1回転、一定速度、無限ループ */
animation: rotate-circle-slow 20s linear infinite;
}
/* --- 前面で固定される画像 (.badge-front-fixed) --- */
.badge-front-fixed {
position: absolute; /* コンテナに対して絶対配置 */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 2; /* ★前面（背面より高い値） */
/* 既存のドロップシャドウを引き継ぐ */
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
/* こちらは回転させません */
}
.writers-badge img {
height: 100%; /* 親の高さに合わせる */
width: auto;
display: block;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
/* --- 説明テキストエリア --- */
.writers-intro {
padding: 20px 0 0 0;
}
.writers-catch-row {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
width: 100%;
max-width: 1200px; /* 最大幅を制限して読みやすく */
margin-left: auto;
margin-right: auto;
}
.writers-catch {
/* ★ここが重要：幅を固定せず、画像に合わせて大きくなりすぎないようにする */
flex: 0 0 45%; /* 左側は全体の40%の幅に固定 */
width: 45%; /* 念のためwidthも指定 */
font-size: 3rem;
font-weight: 900;
color: #b4bfb5; /* 銀色のようなグレー */
line-height: 1.6;
text-align: center;
margin-bottom: 10px;
margin: 0;
text-shadow: 1px 1px 2px #000;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
}
.writers-desc {
/* ★右側を大きく確保 */
flex: 0 0 55%; /* 右側は全体の55%の幅を使う */
width: 55%;
font-size: 1.2rem;
line-height: 1.5;
color: #fff;
margin: 0;
text-align: left;
}
/* 「気になるライターはここからチェック!!」の吹き出し風メッセージ */
.writers-sub-msg {
/* --- 1. 表示と配置 --- */
display: flex; /* テキストを上下左右中央に配置するためにFlexボックス化 */
justify-content: center; /* 水平方向中央 */
align-items: center; /* 垂直方向中央 */
margin: 10px auto 10px; /* 上下に余白を取り、左右は中央揃え */
/* --- 2. 背景画像の設定 (楕円フレーム) --- */
background-image: url('https://www.plantopia.co.jp/images/web_writer_oval.png');
background-size: contain; /* ★画像の縦横比を維持して、枠内に収まるように表示 */
background-repeat: no-repeat;
background-position: center;
/* --- 3. サイズ調整 --- */
width: 100%; /* 親要素の幅いっぱいまで広げる */
/*max-width: 520px;*/ /* PCなどで横に広がりすぎないよう最大幅を制限 */
/* ★重要：楕円がきれいに見える高さに調整 */
height: 54px;
/* --- 4. テキストのスタイル --- */
font-size: 1.4rem; /* 文字を少し大きく */
font-weight: 700; /* 太字で強調 */
color: #76c1b9;
text-shadow: 2px 2px 0 #000;
/* --- 5. 既存スタイルのリセット --- */
background-color: transparent; /* 元の背景色を透明に */
border: none; /* 元の枠線を消す */
border-radius: 0; /* 元の角丸をリセット */
padding: 0; /* Flexboxで中央揃えするのでパディングは不要 */
}
/* --- ライターリスト (グリッドレイアウト・開閉機能) --- */
.writers-list-wrapper {
width: 100%;
/* ★初期状態の高さ制限：約2行分だけ表示 (画像の比率に合わせて調整してください) */
max-height: 712px;
overflow: hidden;
transition: max-height 0.6s ease-in-out; /* 開閉アニメーション */
/*position: relative;*/
}
.writers-list-wrapper::after {
display: none !important;
}
/* 開いた状態 (.is-open クラスがついた時) */
.writers-list-wrapper.is-open {
max-height: 5000px !important; /* 全員表示できるよう十分に大きく */
}
/* 閉じている時に下部を少し暗くフェードさせる演出 */
.writers-list-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
/* 背景色に合わせたグラデーション */
background: linear-gradient(to top, #2b2b2b 0%, transparent 100%);
pointer-events: none;
transition: opacity 0.5s;
}
/* 開いたときはフェードを消す */
.writers-list-wrapper.is-open::after {
opacity: 0;
}
/* グリッド設定 */
.writers-grid {
display: grid;
/* PC表示: 横5列 */
grid-template-columns: repeat(5, 1fr);
/*gap: 15px;*/ /* 画像間の隙間 */
gap: 20px 0;
/*padding-bottom: 20px;*/
padding: 0.8rem;
}
/* 各ライター画像リンク */
.writer-item {
display: block;
transition: transform 0.2s;
/*box-shadow: 0 5px 10px rgba(0,0,0,0.5);*/
margin: 0 -12px;
}
.writer-item:hover {
transform: scale(1.05); /* ホバー時に少し拡大 */
z-index: 2;
}
.writer-item img {
width: 100%;
height: auto;
display: block;
}
/* --- 「もっと見る / 戻る」ボタンエリア (画像切り替え) --- */
.writers-btn-area {
text-align: right;
margin-top: 20px;
position: relative;
z-index: 10;
}
.writers-img-toggle {
display: inline-block;
cursor: pointer;
transition: transform 0.2s, opacity 0.2s;
}
/* ボタン画像のサイズ調整 */
.writers-img-toggle img {
height: 50px; /* ★ボタン画像の高さ */
width: auto;
display: block;
}
/* ボタンホバー時の動き */
.writers-img-toggle:hover {
transform: scale(1.02);
opacity: 0.9;
}
/* ボタンエリアが表示されたら、中身(.writers-img-toggle)を震わせる */
.web-writers-section .writers-btn-area.is-visible .writers-img-toggle {
/* button-buruburu : 定義済みのアニメーション名
0.8s : 震える時間
ease-in-out : 動きの滑らかさ
1.5s : 待機時間 (表示されてから1.5秒後に震える)
*/
animation: button-buruburu 0.8s ease-in-out 1.5s;
}
/* もっと見るボタンの遅延をなくす */
.writers-btn-area.scroll-item {
transition-delay: 0s !important;
}
/* -------- パチマガスロマガの歴史 セクション (Web編集部) -------- */
/* --- セクション全体 --- */
.web-history-section {
background-color: #606060;
padding-bottom: 120px;
color: #fff;
overflow: hidden;
}
.history-title-bar {
width: 100%;
background-image: url('https://www.plantopia.co.jp/images/web_magahistory_title_frame.png');
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%;
padding: 20px 0;
text-align: center;
position: relative;
z-index: 2;
}
.history-main-title {
display: inline-block;
font-size: 4.5rem;
font-weight: 900;
margin: 0;
color: #fff;
text-shadow: 4px 4px 0 #000;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
font-feature-settings: "palt";
}
.history-sub-bar {
text-align: center;
padding: 10px 0;
margin-bottom: 7px;
position: relative;
z-index: 5;
}
.history-sub-bar p {
margin: 0;
font-size: 3.5rem;
font-weight: 700;
color: #c1d8e5;
text-shadow: 1px 1px 2px #000;
font-feature-settings: "palt";
}
/* --- ビジュアルエリア --- */
.history-visual-area {
display: flex;
justify-content: center;
align-items: center;
gap: 1px;
margin-bottom: 0;
position: relative;
}
.history-group {
position: relative;
}
.history-group img {
display: block;
width: 100%;
height: auto;
}
/* 各パーツの配置 */
.hist-circle {
position: absolute;
z-index: 3;
width: 50% !important;
/* 回転アニメーション (既存) */
animation: rotate-circle-slow 20s linear infinite;
}
.left-group .hist-circle { top: -1%; left: -4%; }
.right-group .hist-circle { bottom: 3%; right: 0%; }
.hist-main-img {
position: relative;
z-index: 2;
margin: 0 auto;
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
}
.hist-year {
position: absolute;
z-index: 3;
width: 50% !important;
}
.left-group .hist-year { top: 0%; left: -5%; }
.right-group .hist-year { bottom: 2%; right: 1%; }
.hist-label {
position: absolute;
z-index: 4;
width: 39% !important;
}
.left-group .hist-label { bottom: 0%; left: -5%; }
.right-group .hist-label { top: 0; right: -11%; }
.history-arrow {
width: 35%;
z-index: 5;
margin: 0 -15%;
margin-top: -5%;
}
.history-arrow img {
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
/* ==============================================
★ 新規追加：4方向スライド & ズームアニメーション
============================================== */
/* --- 1. 左からスライド (Main Image Left) --- */
.web-history-section .anim-from-left {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 2. 右からスライド (Main Image Right) --- */
.web-history-section .anim-from-right {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 3. 右上からスライド (1987) --- */
/* 左下に移動して定位置へ */
.web-history-section .anim-from-tr {
opacity: 0;
transform: translate(80px, -80px); /* 右上にずらしておく */
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 4. 右下からスライド (紙) --- */
/* 左上に移動して定位置へ */
.web-history-section .anim-from-br {
opacity: 0;
transform: translate(80px, 80px); /* 右下にずらしておく */
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 5. 左下からスライド (2021) --- */
/* 右上に移動して定位置へ */
.web-history-section .anim-from-bl {
opacity: 0;
transform: translate(-80px, 80px); /* 左下にずらしておく */
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 6. 左上からスライド (WEB) --- */
/* 右下に移動して定位置へ */
.web-history-section .anim-from-tl {
opacity: 0;
transform: translate(-80px, -80px); /* 左上にずらしておく */
transition: opacity 0.8s, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 7. ★矢印用：ズームイン (Bounce) --- */
.web-history-section .anim-zoom-in {
opacity: 0;
transform: scale(0); /* 最初は大きさ0 */
transition: opacity 0.6s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* バネのような動き */
}
/* --- 共通：表示された時の状態 (.is-visible) --- */
.web-history-section .anim-from-left.is-visible,
.web-history-section .anim-from-right.is-visible,
.web-history-section .anim-from-tr.is-visible,
.web-history-section .anim-from-br.is-visible,
.web-history-section .anim-from-bl.is-visible,
.web-history-section .anim-from-tl.is-visible {
opacity: 1;
transform: translate(0, 0); /* 本来の位置へ */
}
.web-history-section .anim-zoom-in.is-visible {
opacity: 1;
transform: scale(1); /* 本来の大きさへ */
}
/* --- ディレイ（時間差）設定 --- */
.web-history-section .delay-2 { transition-delay: 0.2s; }
.web-history-section .delay-3 { transition-delay: 0.8s; }
.web-history-section .delay-4 { transition-delay: 1.2s; }
/* --- 下部テキストエリア (レイアウト) --- */
.history-bottom-row {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
gap: 40px;
margin-top: 0;
}
.history-text-area {
width: 60%;
text-align: left;
}
.history-catch {
font-size: 2.3rem;
font-weight: 900;
color: #d6b0d4;
margin-bottom: -0.8rem;
text-shadow: 2px 2px 0 #33001a;
line-height: 1.4;
text-align: left;
font-feature-settings: "palt";
}
.history-desc {
font-size: 1.2rem;
line-height: 1.5;
color: #fff;
text-align: left;
}
.history-btn-area {
width: 40%;
text-align: right;
display: flex;
justify-content: flex-end;
}
.history-btn-area img {
max-width: 100%;
height: auto;
}
/* 歴史セクション：ボタンのブルブル修正 */
@keyframes button-buruburu {
0% { transform: rotate(0deg) scale(1); }
10% { transform: rotate(-3deg) scale(1.1); }
20% { transform: rotate(3deg) scale(1.1); }
30% { transform: rotate(-3deg) scale(1.1); }
40% { transform: rotate(3deg) scale(1.1); }
50% { transform: rotate(-2deg) scale(1.1); }
60% { transform: rotate(2deg) scale(1.1); }
70% { transform: rotate(-1deg) scale(1.05); }
100% { transform: rotate(0deg) scale(1); }
}
/* アニメーションの適用 */
.web-history-section .history-btn-area.is-visible .mobile-img-btn {
/* アニメーションが効くようにブロック要素として振る舞わせる */
display: inline-block;
/* アニメーション実行 */
/* 名前: button-buruburu */
/* 時間: 0.8秒 */
/* 遅延: 1.5秒 (表示されてから1.5秒後に動く) */
animation: button-buruburu 0.8s ease-in-out 1.5s;
/* アニメーション設定を確実に適用 */
animation-fill-mode: both;
}
/* -------- 読者属性 セクション (Web編集部) -------- */
/* --- ベース設定 --- */
.web-reader-section {
background-color: #606060;
/*background: linear-gradient(to bottom, #444 0%, #222 100%);*/
padding-bottom: 80px;
color: #fff;
overflow: hidden;
}
.reader-title-bar {
width: 100%;
background-image: url('https://www.plantopia.co.jp/images/web_reader_title_frame.png');
background-repeat: repeat-x;
background-position: center top;
background-size: auto 100%;
padding: 20px 0;
text-align: center;
position: relative;
z-index: 2;
}
.reader-main-title {
display: inline-block;
font-size: 4.5rem;
font-weight: 900;
margin: 0;
color: #fff;
text-shadow: 4px 4px 0 #000;
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
}
/* --- キャンバス（配置エリア）の設定 --- */
.reader-canvas {
position: relative; /* ここを基準(0,0)にする */
width: 100%;
max-width: 1200px; /* 全体の最大幅 */
margin: 50px auto 10px auto; /* 上下の余白 */
/* ★高さの確保：幅に対する比率で高さを確保 (16:9に近い比率) */
/* これにより、中のabsolute要素の基準となる高さを作ります */
aspect-ratio: 100 / 60;
}
/* ※古いブラウザ対策が必要なら padding-top: 60%; などで代用可 */
/* --- 共通：絶対配置アイテム --- */
.abs-item {
position: absolute; /* 自由配置にする */
display: block;
height: auto;
/* 影をつけて立体感を出す */
/* filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5)); */
}
/* =================================================================
★ Mobile (上段) の配置設定
================================================================= */
/* 背景フレーム */
.pos-m-bg {
width: 100%; /* 幅 */
top: 0; /* 上からの位置 */
right: 0%; /* 右寄せ */
left: auto;
z-index: 1;
}
/* ロゴ */
.pos-m-logo {
width: 40%;
top: -3%;
left: 45%;
z-index: 10;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
/* グラフ：PV (左上) */
.pos-m-pv {
width: 34%;
top: 15%;
left: 29.5%;
z-index: 5;
}
/* グラフ：UU (右上) */
.pos-m-uu {
width: 34%;
top: 15%;
left: 64.5%;
z-index: 5;
}
/* グラフ：男女 (左下) */
.pos-m-gender {
width: 27%;
top: 38%;
left: 29.5%;
z-index: 5;
}
/* グラフ：年齢 (右下) */
.pos-m-age {
width: 41%;
top: 38%;
left: 57.5%;
z-index: 5;
}
/* 人物 (左にはみ出す) */
.pos-m-person {
width: 34%;
top: -8%;
left: 5%;
z-index: 4;
filter: drop-shadow(5px 5px 15px rgba(0, 0, 0, 0.6));
}
/* キャッチコピー (さらに左) */
.pos-m-catch {
width: 17%;
top: 2%;
left: 1%;
z-index: 16;
}
/* 注釈 */
.pos-m-note {
bottom: 4%;
left: 1%;
font-size: 1rem;
text-shadow: 2px 2px 0 #000;
color: #ffffff;
margin: 0;
z-index: 30;
}
/* =================================================================
★ FREE (下段) の配置設定 (左右反転)
================================================================= */
/* 背景フレーム */
.pos-f-bg {
width: 100%;
top: 0;
left: 0%; /* 左寄せ */
right: auto;
z-index: 1;
}
/* ロゴ */
.pos-f-logo {
width: 38%;
top: -3%;
left: 17%;
z-index: 10;
filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
}
/* グラフ：PV (左上) */
.pos-f-pv {
width: 34%;
top: 17%;
left: 2%;
z-index: 5;
}
/* グラフ：UU (右上) */
.pos-f-uu {
width: 34%;
top: 17%;
left: 37%;
z-index: 5;
}
/* グラフ：男女 (左下) */
.pos-f-gender {
width: 27%;
top: 40%;
left: 2%;
z-index: 5;
}
/* グラフ：年齢 (右下) */
.pos-f-age {
width: 41%;
top: 40%;
left: 30%;
z-index: 5;
}
/* 人物 (右にはみ出す) */
.pos-f-person {
width: 39%;
top: -5%;
right: 6%;
left: auto;
z-index: 4;
filter: drop-shadow(-5px 5px 15px rgba(0, 0, 0, 0.6));
}
/* キャッチコピー (さらに右) */
.pos-f-catch {
width: 17%;
top: 2%;
right: 1.5%;
left: auto;
z-index: 16;
}
/* 注釈 */
.pos-f-note {
bottom: 2%;
right: 0;
font-size: 1rem;
color: #FFF;
text-shadow: 2px 2px 0 #000;
margin: 0;
}
/* ---------------------------------------------------
アニメーション設定
--------------------------------------------------- */
/* --- 1. 大きくゆっくり左からスライド (人物・キャッチ用) --- */
.web-reader-section .anim-slide-large-left {
opacity: 0;
/* 左に150px (通常は50px) ずらしておく */
transform: translateX(-150px);
/* 時間を1.5s (通常は0.8s) に設定 */
transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 2. 大きくゆっくり右からスライド (人物・キャッチ用) --- */
.web-reader-section .anim-slide-large-right {
opacity: 0;
/* 右に150px ずらしておく */
transform: translateX(150px);
/* 時間を1.5s に設定 */
transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 表示された時の状態 (共通) --- */
.web-reader-section .anim-slide-large-left.is-visible,
.web-reader-section .anim-slide-large-right.is-visible {
opacity: 1;
transform: translateX(0); /* 元の位置に戻る */
}
/*.web-reader-section .delay-1 { transition-delay: 0.2s; }
.web-reader-section .delay-2 { transition-delay: 0.4s; }*/
/* --- 1. 左上からスライド (Top-Left) --- */
.web-reader-section .anim-from-tl {
opacity: 0;
/* 左上に50pxずつずらしておく */
transform: translate(-100px, -100px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 2. 右上からスライド (Top-Right) --- */
.web-reader-section .anim-from-tr {
opacity: 0;
/* 右上に50pxずつずらしておく */
transform: translate(100px, -100px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 3. 左下からスライド (Bottom-Left) --- */
.web-reader-section .anim-from-bl {
opacity: 0;
/* 左下に50pxずつずらしておく */
transform: translate(-100px, 100px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 4. 右下からスライド (Bottom-Right) --- */
.web-reader-section .anim-from-br {
opacity: 0;
/* 右下に50pxずつずらしておく */
transform: translate(100px, 100px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 表示された時の状態（共通） --- */
.web-reader-section .anim-from-tl.is-visible,
.web-reader-section .anim-from-tr.is-visible,
.web-reader-section .anim-from-bl.is-visible,
.web-reader-section .anim-from-br.is-visible {
opacity: 1;
transform: translate(0, 0); /* 本来の位置へ */
}
.web-reader-section .pos-m-logo.scroll-item,
.web-reader-section .pos-f-logo.scroll-item {
transition-delay: 0.1s !important; /* 背景が出た直後にすぐ表示 */
}
/* 表(グラフ)が出揃った後に開始 (1.0秒) */
.web-reader-section .delay-3 {
transition-delay: 1.0s;
}
/* 人物が出始めた後に開始 (1.6秒) */
.web-reader-section .delay-4 {
transition-delay: 1.6s;
}
/* ===================================================================
★ページ全体装飾：回転する背景サークル
=================================================================== */
/* --- 1. 装飾コンテナ --- */
.background-decorations {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
/* ★重要：z-indexを 1 に設定 (背景色より手前に) */
z-index: 5;
}
/* ※既存のセクションやコンテナに z-index: 1 以上がついているか確認が必要です。
もしサークルが文字の上に被ってしまう場合は、.background-decorations の z-index を
-1 にするか、各セクションに position: relative; z-index: 2; などを指定してください。 */
/* --- 2. サークル画像の共通スタイル --- */
.bg-circle-decor {
position: absolute;
opacity: 0.4; /* ★うっすら表示させる（濃さはここで調整） */
/* 回転アニメーションの適用 */
/* 120秒かけてゆっくり1回転、無限ループ */
animation: decor-rotate 120s linear infinite;
}
/* --- 3. 回転アニメーション定義 --- */
@keyframes decor-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 4. ★重要：ページ内のコンテンツをサークルより手前に出す */
/* 既存のコンテナクラスに z-index: 2 を付与して浮かせます */
.web-top-container,
.mobile-title-bar,
.free-title-bar,
.writers-title-bar,
.history-title-bar,
.reader-title-bar,
.header-container,
.site-footer,
.top-bar,
.header-wrapper,
.page-header-area, /* 追加: タイトルエリア */
.web-top-subheader /* 追加: サブヘッダー */
/*.web-anchor-nav*/
{
position: relative;
/* ★変更：サークル(5)より手前に来るように10に設定 */
z-index: 10 !important;
}
.header-wrapper {
position: relative;
z-index: 21 !important;
/*position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
width: 100% !important;*/
}
.web-mobile-section .mobile-catch,
.web-free-section .free-catch {
/* 1. アニメーション中の描画を安定させる */
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
will-change: transform, opacity;
/* 2. 開始をほんの少し(0.2秒)遅らせて、描画準備の時間を作る */
transition-delay: 0.2s;
}
/* --- 5. 各サークルの配置とサイズ (PC用) --- */
/* 画像に合わせて調整してください */
/* サークル1：上の方 (Mobileセクションあたり) */
.circle-1 {
width: 1750px;
top: 371px;
left: 30%;
}
/* サークル2：真ん中あたり (ライター一覧あたり) */
.circle-2 {
width: 1750px;
top: 1959px;
left: 3%;
animation-direction: reverse; /* ★これだけ逆回転にしてみる */
}
/* サークル3：下の方 (歴史・読者属性あたり) */
.circle-3 {
width: 1750px;
top: 3619px;
left: 20%;
}
.circle-4 {
width: 1500px;
top: 5349px;
left: 14%;
animation-direction: reverse;
}
.circle-5 {
width: 1720px;
top: 6616px;
left: 16%;
}
.page-web-top .site-footer {
border-top: 12px solid #000000;
}
/* --- タブレット表示用の調整 (幅1150px以下) --- */
@media screen and (max-width: 1150px) {
/* --- コンテナの余白調整 --- */
.web-top-container {
padding: 0 3vw;
}
/* --- ヘッダー・アンカー (ご提示いただいた記述) --- */
.page-web-top .page-title {
font-size: 2.5rem;
}
.page-web-top .page-title span {
font-size: 1.2rem;
}
.page-web-top-subheader p {
font-size: 1.1rem;
}
.web-top-subheader {
min-height: 55px;
}
.web-top-subheader p {
font-size: min(1.52vw, 1.1rem);
}
.web-top-subheader b {
font-size: min(1.92vw, 1.6rem);
}
.web-anchor-nav {
padding: 3rem 0;
}
.anchor-main-logo {
max-width: 420px;
width: 40vw; /* 追加：画面幅連動 */
}
.anchor-main-text {
font-size: min(3.22vw, 2.6rem);
}
.anchor-desc {
font-size: min(1.1vw, 1.0rem);
}
.anchor-nav-list li:nth-child(2) {
margin-bottom: 75px;
}
/* -------------------------------------------
パチマガスロマガMobile セクション
------------------------------------------- */
.web-mobile-section {
padding-bottom: 60px;
}
.title-inner {
min-height: 120px !important;
}
/* タイトルロゴを縮小 */
.mobile-logo-img {
max-width: 40vw;
}
/* 550円画像のサイズ調整 */
.mobile-price-img {
/*height: 60%;
right: 3vw;*/
}
/* ★スマホ画像を内側に寄せる */
.mobile-floating-phone {
width: 48%;
left: 0; /* -2%から0に変更して内側へ */
top: -4%;
}
/* 右側コンテンツグループ (左余白を%で確保) */
.mobile-right-group {
padding-left: 46%;
}
/* --- ★ここから：画像リストはみ出し修正 --- */
/* 親ボックスの余白計算 */
.mobile-black-content {
/*padding-right: 4vw; */
padding-left: 38vw; /* 左の余白 */
box-sizing: border-box; /* パディングを含めて幅計算 */
}
/* リスト（Flexbox） */
.mobile-content-list {
gap: 1.5vw;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
/* リストアイテム */
.mobile-content-list li {
width: 32%; /* 3つ並びの幅 */
max-width: 32%; /* これ以上広がらせない */
flex-shrink: 1; /* 画面が狭いときは縮むのを許可 */
}
/* 画像自体も親に合わせて縮ませる */
.mobile-content-list img {
width: 100%;
height: auto;
box-sizing: border-box;
}
/* --- ここまで：はみ出し修正 --- */
/* キャッチコピーと説明文の可変フォント */
.mobile-catch {
font-size: min(3.7vw, 3rem);
}
.mobile-desc {
font-size: min(1.6vw, 1.2rem);
}
/* 黒ボックスエリア (左への拡大をvwで再計算) */
.mobile-black-box-wrapper {
margin-left: -37vw;
width: calc(100% + 37vw);
}
/* タイトルの左余白 */
.mobile-purple-title {
padding-left: 38vw;
}
/* 黒ボックス内のフォントサイズ */
.mobile-purple-title h4 {
font-size: min(2.5vw, 2rem);
}
.mobile-bottom-desc {
font-size: min(1.6vw, 1.2rem);
}
/* ボタン画像 */
.mobile-img-btn img {
/*height: 4vw;*/
}
/* -------------------------------------------
パチマガスロマガFREE セクション (左右反転)
------------------------------------------- */
.web-free-section {
padding-bottom: 60px;
}
.free-logo-img {
max-width: 40vw;
}
.free-price-img {
/*height: 60%;
right: 3vw;*/
}
/* ★スマホ画像 (右側) */
.free-floating-phone {
width: 48%;
right: 0; /* はみ出さないよう0に */
top: -4%;
}
/* 左側コンテンツグループ */
.free-left-group {
padding-right: 46%;
}
/* --- ★FREE側の画像リスト修正 --- */
.free-black-content {
/*padding-left: 4vw; */
padding-right: 38vw;
box-sizing: border-box;
}
.free-content-list {
gap: 1.5vw;
justify-content: space-between;
width: 100%;
box-sizing: border-box;
}
.free-content-list li {
width: 32%;
max-width: 32%;
flex-shrink: 1;
}
.free-content-list img {
width: 100%;
height: auto;
box-sizing: border-box;
}
/* ------------------------------ */
.free-catch {
font-size: min(3.7vw, 3rem);
}
.free-desc {
font-size: min(1.6vw, 1.2rem);
}
/* 黒ボックスエリア (右への拡大) */
.free-black-box-wrapper {
margin-right: -37vw;
width: calc(100% + 37vw);
}
.free-orange-title {
padding-right: 17vw;
}
.free-orange-title h4 {
font-size: min(2.5vw, 2rem);
margin-left: -3vw;
}
.free-bottom-desc {
font-size: min(1.6vw, 1.2rem);
}
/* -------------------------------------------
所属ライター一覧 セクション
------------------------------------------- */
.web-writers-section {
padding-bottom: 60px;
}
.writers-main-title {
font-size: min(5.5vw, 4.5rem);
}
/* 右上のバッジ画像 */
.writers-badge {
/*height: 80%;
right: 2vw;*/
}
.writers-catch {
font-size: min(4vw, 3rem);
}
.writers-desc {
font-size: min(1.6vw, 1.2rem);
}
.writers-sub-msg {
font-size: min(1.8vw, 1.4rem);
height: auto;
padding: 1.5vw 0;
}
/* ボタン */
.writers-img-toggle img {
height: 4vw;
}
/* -------------------------------------------
パチマガスロマガの歴史 セクション
------------------------------------------- */
.web-history-section {
padding-bottom: 60px;
}
.history-visual-area {
width: 100%;
justify-content: center;
padding-top: 2vw; /* 上に少し余白 */
}
/* 左右のグループ（表紙画像・WEB画像などが入っている箱） */
.history-group {
/* ★固定幅ではなく画面幅の42%に設定。これで画面が狭くなると画像も小さくなります */
width: 44vw;
/* PC時の最大サイズ以上にはならないように制限 */
max-width: 480px;
}
/* 中央の矢印 */
.history-arrow {
/* 矢印も画面幅に合わせて縮小 */
width: 26vw;
/* 左右の画像に少し被せる配置（PCのデザイン比率を維持） */
margin: 0 -12vw;
margin-top: -2vw;
position: relative;
z-index: 10;
}
.history-main-title {
font-size: min(5.5vw, 4.5rem);
}
.history-sub-bar p {
font-size: min(4.5vw, 3.5rem);
}
/* 下部テキストエリア */
.history-catch {
font-size: min(2.9vw, 2.3rem);
}
.history-desc {
font-size: min(1.6vw, 1.2rem);
}
.history-btn-area img {
/*height: 4vw;*/
width: auto;
}
/* -------------------------------------------
読者属性 セクション
------------------------------------------- */
.reader-main-title {
font-size: min(5.5vw, 4.5rem);
}
/* キャンバス内の注釈文字サイズ */
.pos-m-note,
.pos-f-note {
font-size: min(1.3vw, 1rem);
}
}
/* --- スマートフォン表示用の調整 (幅768px以下) --- */
@media screen and (max-width: 768px) {
/* --- コンテナ基本設定 --- */
.web-top-container {
padding: 0 3vw !important;
}
/* --- ヘッダー・アンカー (ご提示いただいたコード) --- */
.page-web-top .page-header-area { padding-bottom: 60px; }
.page-web-top .page-title { font-size: 6vw; }
.page-web-top .page-title span { font-size: 3vw; }
.web-hr-divider { height: 0.5rem; min-height: 0.5rem; }
.web-top-subheader { min-height: 4rem; }
.web-top-subheader p { font-size: 3.2vw; line-height: 1.35; }
.web-top-subheader b { font-size: 4.6vw; }
.web-anchor-nav { padding: 2.5rem 0 1rem; }
.anchor-main-logo { width: 50vw; margin-bottom: 0; }
.anchor-hr { width: 100%; }
.anchor-desc { font-size: 3vw; margin-top: -0.2rem; }
.anchor-main-text { font-size: 5.5vw; }
.anchor-nav-list li:first-child { margin-bottom: 1.0rem; }
.anchor-nav-list li:nth-child(2) { margin-bottom: 1.5rem; }
.anchor-nav-list li { margin-bottom: 1.5rem; }
/* タイトル帯の位置調整 */
.mobile-title-bar,
.free-title-bar {
margin-top: -0.3rem !important;
padding: 10px 0; /* 高さを少し詰める */
}
.title-inner {
min-height: 70px !important;
}
/* タイトルロゴを大きく */
.mobile-logo-img, .free-logo-img {
width: 54% !important;
max-width: 50vw;
}
/* 価格バッジの調整 */
.mobile-price-img, .free-price-img {
height: 99%;
right: 1vw;
}
/* -------------------------------------------
パチマガスロマガMobile (sm.jpgレイアウト再現)
スマホ画像: 左, テキスト: 右
------------------------------------------- */
.web-mobile-section {
padding-bottom: 2.5rem;
}
.mobile-container-relative {
margin-top: 20px;
}
.phone-img {
filter: none;
}
/* 左に浮くスマホ画像 */
.mobile-floating-phone {
width: 36vw;
left: 1vw;
top: -7vw;
z-index: 20 !important;
}
.web-mobile-section .anim-phone-in {
transform: translateX(-50px) rotate(-5deg);
}
/* 右側のテキストエリア（スマホ画像の幅分、左を空ける） */
.mobile-right-group {
padding-left: 36vw; /* スマホと被らないように余白 */
}
/* キャッチコピーと説明文 */
.mobile-catch {
font-size: 4.2vw;
text-align: center;
margin-bottom: 1vw;
line-height: 1.7;
}
.mobile-desc {
font-size: 2.8vw;
line-height: 1.4;
margin-left: 0;
}
/* 黒ボックス（画面左端まで伸ばして、スマホの下に潜り込ませる） */
.mobile-black-box-wrapper {
/*margin-left: -52vw;
width: 100vw;
margin-top: 2vw;*/
width: 100vw;
/* 親要素の左余白(49vw) ＋ 全体の左余白(3vw) ＝ 52vw 分戻す */
margin-left: -39vw;
/* 他の指定をリセット */
position: relative;
left: auto;
right: auto;
transform: none; /* アニメーション競合回避 */
margin-top: 2vw;
margin-right: 0;
}
/* タイトルと中身（スマホと被らないように左に余白） */
.mobile-purple-title {
padding-left: 40vw;
padding-right: 3vw;
}
.mobile-purple-title h4 {
font-size: 3.9vw;
line-height: 1.3;
}
.mobile-black-content {
padding-left: 3vw;
padding-right: 3vw;
padding-top: 3vw;
padding-bottom: 3vw;
}
/* 3つの画像リスト */
.mobile-content-list {
margin-bottom: 2vw;
gap: 1.5vw;
}
.mobile-bottom-desc {
font-size: 2.7vw;
margin-left: 0;
line-height: 1.4;
}
/* ボタンエリア */
.mobile-btn-area {
text-align: center;
margin-top: 5vw;
justify-content: center;
}
.mobile-img-btn img {
/*height: 11vw;*/ /* ボタンサイズ調整 */
width: 95vw;
}
/* -------------------------------------------
パチマガスロマガFREE (左右反転レイアウト)
スマホ画像: 右, テキスト: 左
------------------------------------------- */
.web-free-section {
padding-bottom: 2rem;
}
.free-container-relative {
margin-top: 20px;
}
/* 右に浮くスマホ画像 */
.free-floating-phone {
width: 36vw;
right: 1vw;
left: auto;
top: -7vw;
z-index: 20 !important;
}
.web-free-section .anim-phone-in-right {
transform: translateX(50px) rotate(5deg);
}
/* 左側のテキストエリア（スマホ画像の幅分、右を空ける） */
.free-left-group {
padding-right: 35vw;
padding-left: 0;
}
.free-catch {
font-size: 4.2vw;
text-align: center;
}
.free-desc {
font-size: 2.8vw;
line-height: 1.4;
line-height: 1.7;
}
/* 黒ボックス（画面右端まで伸ばす） */
.free-black-box-wrapper {
/*margin-right: -52vw;
width: 100vw;
margin-top: 2vw;*/
width: 100vw;
/* コンテナのpadding(左右各3vw)を相殺 */
margin-left: -3vw;
margin-right: -3vw;
position: relative;
left: auto;
transform: none;
margin-top: 2vw;
}
.free-orange-title {
padding-right: 47vw;
padding-left: 7vw;
}
.free-orange-title h4 {
font-size: 3.9vw;
padding-left: 0;
line-height: 1.3;
}
.free-black-content {
padding-left: 3vw;
padding-right: 3vw;
padding-top: 3vw;
padding-bottom: 3vw;
}
.free-content-list {
margin-bottom: 2vw;
gap: 1.5vw;
}
.free-bottom-desc {
font-size: 2.7vw;
margin-right: 0;
line-height: 1.4;
}
.free-btn-area {
width: 100vw;
/* ★親要素の左余白(3vw)を打ち消すために左に引っ張る */
margin-left: -3vw;
/* 以前の transform 指定をリセット */
position: relative;
left: auto;
transform: none;
text-align: center;
margin-top: 5vw;
z-index: 5;
}
/* -------------------------------------------
所属ライター一覧 (ミニチュア化)
------------------------------------------- */
.web-writers-section {
padding-bottom: 2rem;
}
.writers-title-bar {
padding: 10px 0;
}
.writers-main-title {
font-size: 6.5vw;
text-shadow: 3px 3px 0 #000;
}
.writers-badge {
right: 1vw;
top: -2vw;
}
/*.writers-catch {
font-size: 5vw;
margin-bottom: 5px;
}
.writers-desc {
font-size: 2.8vw;
line-height: 1.4;
}
.writers-sub-msg {
height: 8vw;
font-size: 3vw;
margin: 15px auto;
}*/
/* 1. 全体を縦積みに変更 */
.writers-catch-row {
flex-direction: column; /* 縦並び */
gap: 0.8rem;
width: 100%;
padding: 0 1rem; /* 左右に少し余白 */
}
/* 2. キャッチコピー部分 (h3) */
.writers-catch {
width: 100%;
flex: auto; /* PCの幅固定を解除 */
text-align: center;
/* ★修正：テキストを横に並べるために row + wrap に変更 */
display: flex;
flex-wrap: wrap; /* 中身が溢れたら折り返す設定 */
justify-content: center; /* 中央揃え */
align-items: center;
font-size: 4.5vw;
}
/* 3. 区切り線画像 (img) の設定 */
.writers-catch .anchor-hr2 {
order: 2; /* 順序を最後にする */
width: 100%; /* ★幅を100%に指定することで、強制的にテキストの下へ改行させる */
height: auto;
margin: 0.2rem 0; /* 上下の余白 */
}
/* 4. 不要な改行タグ(br)を消す */
.writers-catch br {
display: none;
}
/* ※テキストは order 指定がないため自動的に 0 (最初) になります */
/* 不要な改行タグを無効化（Flexで並べるため） */
.writers-catch br {
display: none;
}
/* 4. 説明文 (p) */
.writers-desc {
width: 100%;
flex: auto; /* PCの幅固定を解除 */
text-align: left; /* テキストを中央揃え */
font-size: 3.2vw; /* 文字サイズ調整 */
padding: 0;
}
/* 5. サブメッセージ (span: 気になるライターは…) */
.writers-sub-msg {
margin-top: 0.5rem;
margin-bottom: -0.9rem;
width: 100%;
height: 15vw;
font-size: 4.0vw;
}
/* グリッド: 5列を維持してミニチュア化 */
.writers-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5vw 0; /* 隙間を詰める */
padding: 1vw;
}
.writer-item {
margin: 0 -0.2rem;
}
.writers-img-toggle img {
height: 10vw;
}
/* -------------------------------------------
歴史セクション (ミニチュア化 & 縦積み)
------------------------------------------- */
.web-history-section {
padding-bottom: 2.5rem;
}
.history-main-title {
font-size: 6.5vw;
text-shadow: 3px 3px 0 #000;
}
.history-title-bar {
padding: 0.3rem 0;
}
.history-sub-bar {
margin-bottom: -0.5rem;
margin-top: 0.5rem;
}
.history-sub-bar p {
font-size: 4.5vw;
}
/* 画像エリア：そのまま縮小 */
.history-visual-area {
padding-top: 4vw;
}
.history-group {
width: 44vw; /* 少し大きめに */
}
.history-arrow {
width: 26vw;
margin: 0 -12vw;
margin-top: -3vw;
}
/* 下部：縦積みに変更 */
.history-bottom-row {
flex-direction: column;
gap: 20px;
margin-top: 0;
}
.history-text-area {
width: 100%;
text-align: left; /* 左寄せのまま */
}
.history-catch {
font-size: 4.8vw;
margin-bottom: 0.5rem;
text-align: center;
}
.history-desc {
font-size: 3.2vw;
margin-bottom: 0;
line-height: 1.6;
padding: 0 0.5rem;
}
.history-btn-area {
width: 100%;
justify-content: center;
}
.history-btn-area img {
/*height: 11vw;*/
width: 66vw;
}
/* -------------------------------------------
読者属性 (Canvas ミニチュア化)
------------------------------------------- */
.web-reader-section {
padding-bottom: 2rem;
}
.reader-title-bar {
padding: 0.3rem 0;
}
.reader-main-title {
font-size: 6.5vw;
text-shadow: 3px 3px 0 #000;
}
.reader-canvas {
margin: 30px auto 10px auto;
}
/* 注釈文字サイズ */
.pos-m-note{
font-size: 2.8vw;
bottom: -2%;
}
.pos-f-note {
font-size: 2.8vw;
bottom: -5%;
}
/* --- 1. 大きくゆっくり左からスライド (人物・キャッチ用) --- */
.web-reader-section .anim-slide-large-left {
opacity: 0;
/* 左に150px (通常は50px) ずらしておく */
transform: translateX(-50px);
/* 時間を1.5s (通常は0.8s) に設定 */
transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 2. 大きくゆっくり右からスライド (人物・キャッチ用) --- */
.web-reader-section .anim-slide-large-right {
opacity: 0;
/* 右に150px ずらしておく */
transform: translateX(50px);
/* 時間を1.5s に設定 */
transition: opacity 1.5s ease-out, transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 表示された時の状態 (共通) --- */
.web-reader-section .anim-slide-large-left.is-visible,
.web-reader-section .anim-slide-large-right.is-visible {
opacity: 1;
transform: translateX(0); /* 元の位置に戻る */
}
/*.web-reader-section .delay-1 { transition-delay: 0.2s; }
.web-reader-section .delay-2 { transition-delay: 0.4s; }*/
/* --- 1. 左上からスライド (Top-Left) --- */
.web-reader-section .anim-from-tl {
opacity: 0;
/* 左上に50pxずつずらしておく */
transform: translate(-30px, -30px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 2. 右上からスライド (Top-Right) --- */
.web-reader-section .anim-from-tr {
opacity: 0;
/* 右上に50pxずつずらしておく */
transform: translate(30px, -30px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 3. 左下からスライド (Bottom-Left) --- */
.web-reader-section .anim-from-bl {
opacity: 0;
/* 左下に50pxずつずらしておく */
transform: translate(-30px, 30px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 4. 右下からスライド (Bottom-Right) --- */
.web-reader-section .anim-from-br {
opacity: 0;
/* 右下に50pxずつずらしておく */
transform: translate(30px, 30px);
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
/* --- 表示された時の状態（共通） --- */
.web-reader-section .anim-from-tl.is-visible,
.web-reader-section .anim-from-tr.is-visible,
.web-reader-section .anim-from-bl.is-visible,
.web-reader-section .anim-from-br.is-visible {
opacity: 1;
transform: translate(0, 0); /* 本来の位置へ */
}
.web-reader-section .pos-m-logo.scroll-item,
.web-reader-section .pos-f-logo.scroll-item {
transition-delay: 0.1s !important; /* 背景が出た直後にすぐ表示 */
}
/* 表(グラフ)が出揃った後に開始 (1.0秒) */
.web-reader-section .delay-3 {
transition-delay: 1.0s;
}
/* 人物が出始めた後に開始 (1.6秒) */
.web-reader-section .delay-4 {
transition-delay: 1.6s;
}
/* 背景サークル (スマホ用位置調整) */
/*.circle-1 { width: 150%; top: 200px; left: -25%; }
.circle-2 { width: 150%; top: 1500px; right: -25%; }
.circle-3 { width: 150%; top: 2800px; left: -25%; }*/
.circle-1 {
width: 200%;
max-width: 200%;
top: 77vw;
left: 35%;
}
/* サークル2：真ん中あたり (ライター一覧あたり) */
.circle-2 {
width: 200%;
max-width: 200%;
top: 253vw;
left: -88%;
animation-direction: reverse;
}
/* サークル3：下の方 (歴史・読者属性あたり) */
.circle-3 {
width: 200%;
max-width: 200%;
top: 578vw;
left: 12%;
}
.circle-4 {
width: 200%;
max-width: 200%;
top: 766vw;
left: -98%;
animation-direction: reverse;
}
.circle-5 {
width: 200%;
max-width: 200%;
top: 968vw;
left: 2%;
}
}
.page-web-top .site-footer {
border-top: 8px solid #000000;
}
html {
scroll-behavior: smooth; /* アンカーゆっくり */
}
/* ===================================================================
企画問い合わせフッター
=================================================================== */
/* --- グレー背景（外側のラッパー） --- */
.contact-footer {
background-color: #4a4a4a; /* 画像に近い濃いグレー */
padding: 1rem;
color: #e0e0e0;
}
/* --- コンテンツ（内側のラッパー） --- */
.contact-footer-inner {
max-width: 1200px; /* ★最大幅を1200pxに */
margin: 0 auto; /* ★中央揃え */
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; /* スマホ用に折り返しを許可 */
gap: 1rem;
}
/* --- 各パーツのスタイル --- */
.contact-box {
border: 2px solid #a0b0c0;
background-color: #a0b0c0;
color: #1b1464;
padding: 0.5rem 1.2rem;
border-radius: 2.5rem;
font-weight: 900;
font-size: 1.6rem;
}
.contact-text {
line-height: 1.3;
text-align: left; /* ★左寄せに */
font-weight: bold;
/* ★利用可能なスペースをすべて使うように設定 */
flex-grow: 1;
/*padding-left: 2rem;*/
}
.contact-details {
font-size: 1.1rem;
line-height: 1.4;
font-weight: bold;
color: #cbe9f4;
text-align: right; /* ★右寄せに */
}
.contact-text p,
.contact-details p {
margin: 0;
margin: 0;
text-align: left;
font-size: 1.3rem;
}
/* --- タブレット表示用の調整 --- */
@media screen and (max-width: 1150px) {
.contact-box {
font-size: 1.4rem;
}
.contact-text p, .contact-details p {
font-size: 1.1rem;
}
}
/* --- スマホ表示用の調整 --- */
@media (max-width: 768px) {
.contact-footer-inner {
flex-direction: column; /* ★縦積みに変更 */
gap: 0.5rem;
}
.contact-text, .contact-details {
text-align: center;
padding-left: 0;
}
.contact-box {
padding: 1vw 10vw;
font-size: 4vw;
}
.contact-text p, .contact-details p {
font-size: 3vw;
}
}
/* ===================================================================
コピーライト
=================================================================== */
/* --- グレー背景（外側のラッパー） --- */
.copy-footer {
background-color: #bbbbbc; /* 画像に近い濃いグレー */
padding: 1rem;
color: #e0e0e0;
}
/* --- コンテンツ（内側のラッパー） --- */
.copy-footer-inner {
max-width: 1200px;
margin: 0 auto;
text-align: left;
}
/* --- 各パーツのスタイル --- */
.copy-box {
font-family: "kozuka-gothic-pr6n", "Noto Sans JP", sans-serif;
padding: 0.3rem 1.6rem;
/* font-weight: 900; */
font-size: 0.95rem;
line-height: 1.5;
color: #4b4b4c;
}
.copy-box img {
margin-bottom: 0.2rem;
width: 30rem;
}
/* --- タブレット表示用の調整 --- */
@media screen and (max-width: 1150px) {
.copy-box{
font-size: 0.85rem;
padding: 0.3rem 1.2rem;
}
/*.contact-text p, .contact-details p {
font-size: 1.1rem;
} */
}
/* --- スマホ表示用の調整 --- */
@media (max-width: 768px) {
/*.contact-footer-inner {
flex-direction: column;
gap: 0.5rem;
}
.contact-text, .contact-details {
text-align: center;
padding-left: 0;
}*/
.copy-box{
padding: 1vw 0.4vw;
font-size: 2vw;
}
/*.contact-text p, .contact-details p {
font-size: 3vw;
}*/
}
/* ===================================================================
右下ページトップへ戻るボタンのスタイル
=================================================================== */
.page-top-btn {
/*position: fixed;
bottom: 25px;
right: 25px;
z-index: 999;*/
position: fixed !important;
bottom: 25px !important;
z-index: 9999 !important;
/* ★★★ rightプロパティを削除し、leftプロパティで位置を計算します ★★★ */
left: calc(50% + 640px); /* (コンテンツ幅1200pxの半分 + 60pxの余白) */
right: auto; /* rightの指定をリセット */
/* 最初は非表示状態 */
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.page-top-btn img {
width: 60px; /* 幅を60pxに固定 */
max-width: none !important; /* 親要素に合わせて縮むのを防ぐ */
height: auto;
display: block;
}
.page-top-btn {
width: 60px;
}
/* 表示状態のクラスも、クラスセレクタに変更 */
.page-top-btn.is-visible {
opacity: 1;
visibility: visible;
}
/* ホバー時のスタイルもクラスセレクタに変更 */
.page-top-btn:hover {
opacity: 0.8;
}
/* コンテンツ幅(1200px) + アイコン幅 + 余白 を考慮し、例えば1300px以下で切り替えます */
@media (max-width: 1370px) {
.page-top-btn {
left: auto; /* leftの計算をリセット */
right: 15px !important; /* シンプルに画面右端からの位置に戻す */
}
}
/* (is-visible, hover, img, スマホ用のimgサイズ調整のスタイルは既存のままでOKです) */
.page-top-btn.is-visible {
opacity: 1;
visibility: visible;
}
/* ===================================================================
スマートフォン向けのレスポンシブ調整
=================================================================== */
@media screen and (max-width: 940px) { /* ブレークポイントを少し広げます */
/* 画面幅が狭くなってきたら、縦線の位置を固定から可変に */
.page-company main::before {
left: 20px; /* 画面の左端から20pxの位置に固定 */
}
.page-company .main-container {
padding-left: 40px; /* 左のスペースは維持 */
padding-right: 20px;
}
}
@media screen and (max-width: 768px) {
/* ========== 基本的なレスポンシブ設定（スマホ） ========== */
img { /* このimgルールはメディアクエリの外 (グローバル) にあっても良いです */
max-width: 100%;
height: auto;
}
/* ========== ヘッダー調整（スマホ） ========== */
header { /* headerタグに直接適用も可 */
padding-left: 15px;
padding-right: 15px;
}
.header-container {
/* flex-direction: row; はデフォルトなので、変更がなければ不要 */
/* justify-content: space-between; align-items: center; width: 100%; はPC版と同じなら変更不要 */
}
/*.logo {
font-size: 24px;
}
.logo img {
max-height: 25px;
}*/
.logo a.logo-link {
height: 22px; /* スマホ用の高さに調整 (既存の指定より) */
width: 102px; /* スマホ用のロゴの幅に合わせて調整 (例) */
}
/* ========================================
開閉式ナビゲーションメニューの共通スタイル
======================================== */
/* まず、PC用の .slide-menu はスマホでは常に非表示にする */
.slide-menu {
display: none;
}
.navigation ul {
display: none;
}
.navigation {
position: fixed;
top: 0;
right: 0;
left: auto;
width: 80%;
height: 100%;
background-color: rgb(181 181 181 / 95%);
z-index: 1000;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.4s, visibility 0.4s;
}
/* スマホでメニューが開いた時 (.is-open が body に付いた時) */
body.menu-is-open .navigation {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* メニュー内のリストを再表示し、中央に配置 */
body.menu-is-open .navigation ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/*height: 100%;*/
margin-top: 2rem;
}
body.menu-is-open .navigation li {
margin: 0;
padding: 1rem 0;
width: 100%; /* ★これを追加: 各項目をコンテナの幅いっぱいに広げる */
text-align: center; /* ★これを追加: 中のテキストを中央揃えにする */
}
/* リンクの文字サイズ調整 (スマホ用) */
.navigation a {
font-size: 1.5rem;
}
/* メニュー項目が時間差で表示されるアニメーション (スマホ用) */
.navigation.is-open li {
opacity: 0;
transform: translateY(15px);
animation: menu-item-fade-in 0.5s ease-out forwards;
}
.navigation.is-open li:nth-child(1) { animation-delay: 0.2s; }
.navigation.is-open li:nth-child(2) { animation-delay: 0.3s; }
.navigation.is-open li:nth-child(3) { animation-delay: 0.4s; }
.navigation.is-open li:nth-child(4) { animation-delay: 0.5s; }
.navigation.is-open li:nth-child(5) { animation-delay: 0.6s; }
.navigation.is-open li:nth-child(6) { animation-delay: 0.7s; }
@keyframes menu-item-fade-in {
to {
opacity: 1;
transform: translateY(0);
}
}
/* メニュー項目のリンク文字スタイル */
.navigation a {
font-size: 1.5rem;
color: #ffffff;
text-decoration: none;
}
/* ハンバーガーアイコンの「×」印への変形と位置調整 */
.hamburger-menu {
/* ★ スマホでは見えるように戻し、クリック可能にします */
visibility: visible;
pointer-events: auto;
position: relative; /* z-indexを有効にするため */
z-index: 1001; /* メニューより手前に */
}
.hamburger-menu .line {
transition: transform 0.3s ease, opacity 0.3s ease;
}
.hamburger-menu.is-open .line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger-menu.is-open .line:nth-child(2) {
opacity: 0;
}
.hamburger-menu.is-open .line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* ハンバーガーメニューの表示と位置調整 */
.hamburger-menu {
/*display: flex;*/
/* ★ スマホでは見えるように戻し、クリック可能にします */
visibility: visible;
pointer-events: auto;
position: relative; /* z-indexを有効にするため */
z-index: 1001; /* メニューより手前に */
}
/* ハンバーガーメニューの線の太さを調整 (任意) */
.hamburger-menu .line {
height: 1px;
}
/* 親メニュー(ABOUT)のテキストを中央揃えに */
body.menu-is-open .navigation li.has-submenu {
width: 100%;
text-align: center;
}
/* ドロップダウンを持つ親メニュー(ABOUT)のリンクに矢印を追加 */
.navigation li.has-submenu > a {
position: relative;
/* 矢印アイコンのためのスペースを確保 */
padding-right: 35px;
}
.navigation li.has-submenu > a::after {
content: '▼';
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 0.7em; /* 矢印のサイズ */
transition: transform 0.3s ease;
}
/* メニューが開いている状態(.is-expanded)では矢印を上向きに回転 */
.navigation li.has-submenu.is-expanded > a::after {
transform: translateY(-50%) rotate(180deg);
}
/* ★サブメニューのulのスタイルを強制的に指定 */
.navigation .submenu {
/* 位置と表示方法 */
position: relative !important; /* static または relative にして高さを確保 */
display: block !important;
/* ★★★ ここが修正ポイント：PC用の位置調整をリセット ★★★ */
top: auto !important;
left: auto !important;
transform: none !important; /* ★左にずれる原因（translate）を打ち消します */
/* 中央揃えと幅 */
width: 85% !important;
margin: 10px auto 0 auto !important; /* 左右autoで中央揃え */
/* 見た目 */
list-style: none;
padding: 0;
background-color: rgba(0, 0, 0, 0.6);
/*border-radius: 5px;*/
/* 開閉アニメーション */
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
}
/* is-expandedクラスが付いたら表示 */
.navigation li.has-submenu.is-expanded > .submenu {
max-height: 500px;
padding: 10px;
/* ★★★ ここが重要：ホバーが外れても表示し続ける設定 ★★★ */
opacity: 1 !important;
visibility: visible !important;
}
/* サブメニュー内のliのスタイル */
.navigation .submenu li {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
border-top: 1px solid rgba(255, 255, 255, 0.15);
text-align: left !important; /* ★メニュー内のテキストは読みやすいように左揃えに */
}
.navigation .submenu li:first-child {
border-top: none !important;
}
/* サブメニュー内のリンクのスタイル */
.navigation .submenu li a {
display: block !important;
font-size: 1.1rem !important;
color: #e0e0e0 !important;
padding: 12px 20px !important;
}
.navigation .submenu li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.header-wrapper.theme-dark2 .navigation a {
color: #333333;
}
/* ========== メインコンテンツの調整（スマホ） ========== */
main { /* メインコンテンツ全体の左右パディングを調整 (任意) */
padding: 20px 15px;
}
main section { /* 各セクションの上下パディングを調整 (任意) */
padding-top: 0;
padding-bottom: 0;
}
/* カラム構造などがあればここで100%幅にしたり、縦積みに変更 */
/* ========== フッター調整（スマホ） ========== */
.site-footer {
padding: 30px 15px 20px; /* 上下左右のパディングをスマホ用に調整 */
/* text-align: center; は .footer-container で制御 */
}
.footer-container {
flex-direction: column;
align-items: center;
text-align: center;
}
.footer-column,
.footer-left,
.footer-center,
.footer-right {
width: 100% !important; /* !important は最終手段ですが、確実に幅を適用 */
margin-bottom: 30px; /* 各カラム間のスペースを調整 */
padding-right: 0;
}
.footer-column:last-child,
.footer-right:last-child { /* 最後の要素の下マージンは不要な場合 */
margin-bottom: 0;
}
.footer-left ul,
.footer-right .footer-nav ul { /* フッターナビは .footer-nav ul */
/* display: flex; はPC版から継承 */
display: flex;
flex-direction: row; /* 横並びにする */
justify-content: center; /* スマホでは中央寄せ */
flex-wrap: wrap;
gap: 1vw 10vw; /* リンク間の隙間 (縦 横) */
padding-left: 0;
list-style: none;
margin: 0;
}
.footer-left li,
.footer-right .footer-nav li {
margin-bottom: 0; /* リストアイテム間のマージン */
}
/*.footer-right .footer-nav a {
font-size: 13px;
color: #f0f0f0;
font-weight: normal;
text-decoration: none;
padding: 5px 0;
}*/
.footer-right {
order: 3; /* 表示順序 */
width: 100%;
margin-bottom: 25px;
text-align: center; /* ナビゲーションブロック全体を中央に寄せるため */
}
.footer-right .footer-nav ul {
list-style: none;
padding: 0;
margin: 0 auto;
max-width: 90vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1vw 4vw;
}
.footer-right .footer-nav li {
text-align: center; /* 各リンクをセル(マス目)の中で中央揃えにします */
margin: 0 auto;
}
/* リンク自体のスタイル (色やフォントサイズ) は既存のままでOKです */
.footer-right .footer-nav a {
font-size: 13px;
color: #333333;
/* ...その他のスタイル... */
}
.footer-right .footer-nav a:hover {
text-decoration: underline;
opacity: 0.8;
}
.footer-left img {
height: 8.2vw; /* スマホ用にアイコンサイズを調整 */
}
.footer-brand {
font-size: 32px; /* スマホ用にブランド名を縮小 */
/* margin-bottom: 8px; はPC版と同じでOK */
}
/* ↓↓↓ ★横幅はみ出しの主な原因箇所を修正★ ↓↓↓ */
.footer-character-area {
max-width: 90%; /* 親要素の90%の幅にする (画面幅より大きくならないように) */
height: auto; /* 高さを自動に、またはスマホ用に縮小 (例: 150px) */
margin-bottom: 10px; /* 下マージン調整 */
}
.footer-character-area img { /* キャラクター画像自体もレスポンシブに */
max-height: 130px; /* キャラクター画像の高さをスマホ用に制限 (例) */
}
.glow-line {
width: 100%; /* 親エリア(.footer-character-area)の幅に合わせる */
/* box-shadow も少し控えめにするか検討 */
}
/* ↑↑↑ ★ここまでが主な修正箇所★ ↑↑↑ */
.footer-subtitle {
font-size: 14px; /* スマホ用に調整 */
margin-bottom: 10px;
}
.company-info {
font-size: 0.60rem; /* スマホ用に調整 */
}
.company-info p {
margin-bottom: 6px;
}
.footer-right .footer-nav { /* 右カラムのナビ全体 */
text-align: center; /* PCでは右揃えでしたが、スマホでは中央揃えに */
width: 100% !important;
margin: 0 auto !important;
margin-top: 8vw !important;
}
.footer-right .footer-nav ul {
/*flex-direction: column;*/ /* ナビリンクを縦並び */
}
.footer-right .footer-nav li {
/*margin-bottom: 10px;*/
}
.footer-right .footer-nav a {
font-size: 0.8rem;
}
.footer-container {
display: flex;
flex-direction: column; /* 要素を縦に積む */
align-items: center; /* 各セクションを中央揃え */
}
/*.footer-column {
margin-bottom: 24px;
width: 100%;
}*/
.footer-left ul, .footer-right ul {
display: flex;
flex-wrap: wrap; /* アイコンやリンクが折り返すように */
justify-content: center;
gap: 8px 16px; /* 縦横のgapをpxで指定 */
}
.footer-left li, .footer-right li {
margin-bottom: 8px;
}
.footer-right {
text-align: center;
}
.footer-brand {
font-size: 40px; /* 少し小さく */
}
.glow-line {
width: 100%; /* 線はコンテナいっぱいに */
}
/* Flexアイテムの表示順序を変更 */
.footer-center { order: 1; }
.footer-left { order: 2; } /* ← アイコンリスト */
.footer-right { order: 3; } /* ← この中に .footer-nav があります */
.footer-copyright { order: 4; } /* コピーライト (HTMLに追加した場合) */
/* 各カラムの共通スタイル */
.footer-column {
width: 100%;
margin-bottom: 25px;
}
.footer-column:last-of-type {
margin-bottom: 0;
}
.footer-column.footer-left ul > li {
margin-bottom: 0 !important; /* 既存の余白を強制適用 */
}
/* フッターのサブメニューをスマホでは「下」に表示する*/
/* 1. ナビ全体をグリッドのように配置するための設定 */
.footer-nav > ul {
display: flex;
flex-wrap: wrap;
position: relative; /* 黒帯の位置の基準になります */
justify-content: flex-start;
}
/* 2. メインの文字（HOME, ABOUTなど）を3列に並べる */
.footer-nav > ul > li {
width: 33.33%;
text-align: center;
margin-bottom: 25px; /* 上の段と下の段の隙間 */
position: static; /* 黒帯を画面幅いっぱいにするための魔法 */
transition: transform 0.3s ease; /* 押し下げられる時のなめらかな動き */
}
.footer-nav > ul > li > a {
display: inline-block;
font-size: 1rem;
color: #333;
padding: 5px;
}
/* 3. 黒い帯（サブメニュー）の設定 */
.footer-submenu {
position: absolute;
top: 29%; /* ABOUTの文字のすぐ下に出るように調整（ズレる場合は数値を変更） */
left: 0;
width: 100%;
background-color: #333333;
display: flex;
justify-content: center;
align-items: center;
padding: 12px 0;
/* 初期状態は見えないように隠しておく */
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 10;
}
/* 4. 吹き出しの三角形（上向きのツノ） */
.footer-submenu::before {
content: "";
position: absolute;
bottom: 100%;
border-width: 0 0.8rem 0.8rem 0.8rem;
border-style: solid;
border-color: transparent transparent #333333 transparent;
}
/* ABOUTを押した時の三角の位置（中央） */
.footer-nav > ul > li:nth-child(2) .footer-submenu::before {
/*left: 50%;
transform: translateX(-50%);*/
left: 16.66% !important; /* ★画面を3等分した「左の枠」のど真ん中 */
transform: translateX(-50%) !important;
}
/* WORKSを押した時の三角の位置（右側） */
.footer-nav > ul > li:nth-child(3) .footer-submenu::before {
/*left: 83.33%;
transform: translateX(-50%);*/
left: 50% !important; /* ★画面のど真ん中 */
transform: translateX(-50%) !important;
}
/* 5. 黒帯の中の各メニュー（会社概要など）を区切り線で横並びにする */
.footer-submenu li {
/*width: auto !important;
margin-bottom: 0 !important;
padding: 0 10px;
border-right: 1px solid #999999;
transform: none !important;*/
flex: 1; /* ★魔法のコード：3つのliで横幅を均等に（33.33%ずつ）分け合う */
margin-bottom: 0 !important;
padding: 0;
border-right: 1px solid #ffffff; /* ★画像に合わせて線を白（#ffffff）にしました */
transform: none !important;
}
.footer-submenu li:last-child {
border-right: none; /* 一番右は線を消す */
}
.footer-submenu li a {
/*color: #ffffff !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
padding: 0 !important;*/
display: block !important; /* ★枠全体をタップできるようにする */
text-align: center !important; /* ★文字を真ん中揃えにする */
color: #ffffff !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
padding: 8px 0 !important; /* 少し上下に余白をとってタップしやすく */
}
/* 6. タップ（ホバー）して開いた時のアクション */
.footer-has-submenu:hover .footer-submenu,
.footer-has-submenu:focus-within .footer-submenu {
opacity: 1;
visibility: visible;
}
/* 7. 黒帯が出た時に、下の段（TOPICSなど）をスッと押し下げる */
/* （ABOUTかWORKSが開いたら、4番目以降のリストを下にずらす） */
.footer-has-submenu:hover ~ li:nth-child(n+4),
.footer-has-submenu:focus-within ~ li:nth-child(n+4) {
transform: translateY(45px); /* 黒帯の高さ分（45px）だけ下に逃がす */
}
/* 8. 個人情報保護方針のレイアウト（画像に合わせて左下に独立） */
/* ▼▼ 8. 個人情報保護方針を小さく真ん中に表示する ▼▼ */
.footer-nav > ul > li:last-child {
width: 100% !important; /* 横幅を画面いっぱいに取る */
text-align: center !important; /* 枠全体を真ん中揃えにする */
padding-left: 0 !important; /* 以前設定した左のズレをリセット */
margin-top: 40px !important; /* 他のメニューから少し距離を離す */
}
.footer-nav > ul > li:last-child a {
display: inline-block !important;
width: auto !important; /* 以前の文字の折り返し設定(6em)をリセット */
font-size: 0.8rem !important; /* ★文字を小さくする（お好みで0.75remなどに調整） */
letter-spacing: 0.05em; /* 少し文字の間隔を開けて綺麗に見せる */
color: #333333 !important;
}
/* PC用のホバー下線（::after）をスマホでは完全に無効化する */
.footer-nav a::after {
display: none !important;
}
.footer-submenu::after {
display: none !important;
}
/* 1. サブメニューだけ「グリッド」を解除して「Flexbox」に戻す */
.footer-right .footer-nav ul.footer-submenu {
display: flex !important;
gap: 0 !important; /* グリッドの隙間をリセット */
max-width: 100% !important; /* 90vwの制限を解除して横幅いっぱいに */
margin: 0 !important;
padding: 0 !important;
top: 6rem !important;
}
/* 2. 中の li を均等（3等分）にする */
.footer-right .footer-nav ul.footer-submenu li {
display: block !important;
flex: 1 1 0 !important; /* ★これで絶対に均等になります！ */
border-right: 1px solid #ffffff;
margin: 0 !important; /* グリッドの余白を消す */
padding: 0 !important;
}
.footer-right .footer-nav ul.footer-submenu li:last-child {
border-right: none !important; /* 一番右は線を消す */
}
/* 3. 文字を真ん中揃えにする */
.footer-right .footer-nav ul.footer-submenu li a {
display: block !important;
text-align: center !important;
color: #ffffff !important;
font-size: 0.75rem !important;
white-space: nowrap !important;
padding: 0.8vw 0 !important;
}
/* 1. 一番最後のリスト項目（li）を3列グリッドから解放して中央配置にする */
.footer-right .footer-nav > ul > li:last-child {
grid-column: 1 / -1; /* ★3列グリッド全体（横幅いっぱい）に広げる */
text-align: center !important; /* ★中のテキストを中央揃えにする */
margin-top: 2vw !important; /* 上のナビゲーション行から少し距離を空ける */
margin-bottom: 8vw !important; /* フッター下端との距離（お好みで調整） */
padding: 0 !important; /* 既存の余白をリセット */
display: block !important; /* grid-itemから通常のblock要素に */
}
/* 2. リンク（a）の文字のスタイル（privacy.jpg通りの見た目） */
.footer-right .footer-nav > ul > li:last-child > a {
display: inline-block !important; /* 中央揃えにするためにinline-blockに */
font-size: 0.7rem !important; /* ★文字を少し小さくする（お好みで0.75remなどに調整） */
color: #787878 !important; /* 黒色 */
text-decoration: none !important; /* 下線を消す */
line-height: 1.6;
position: relative;
padding: 0 !important; /* 既存のパディングをリセット */
}
/* 3. 余計な装飾（PC用下線アニメーションやスマホ用矢印）を完全に消し去る */
.footer-right .footer-nav > ul > li:last-child > a::after {
display: none !important; /* ★強制的に非表示 */
content: none !important; /* ★コンテンツ（矢印など）も消す */
}
/*.footer-right .footer-nav > ul {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap:0 20px !important;
}
.footer-right .footer-nav > ul > li {
width: 100% !important;
text-align: center !important;
}*/
/* 1. 「>」を使って、直下のul（大元のメニュー）だけにGridを適用する */
.footer-right .footer-nav > ul {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0.5rem 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2. 直下のli（大元のメニュー項目）の基本設定 */
.footer-right .footer-nav > ul > li {
display: block !important;
width: auto !important;
text-align: center !important;
}
/* 3. 1番目（HOME）と最後（個人情報保護方針）は3列分独占する */
.footer-right .footer-nav > ul > li:nth-child(1),
.footer-right .footer-nav > ul > li:last-child {
grid-column: span 3 !important;
}
/* 4. 個人情報保護方針だけ少し下に離す */
.footer-right .footer-nav > ul > li:last-child {
margin-top: 0.4rem !important;
}
.footer-right .footer-nav > ul > li > a {
display: inline-block !important;
padding: 5px 0 !important;
}
/* ulを「3列のマス目（グリッド）」に設定する */
.footer-nav ul {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important; /* 均等な3列を作る */
gap: 2.5rem 0 !important; /* 行の上下の隙間（2.5rem）を指定。好みに合わせて調整してください */
padding: 0 !important;
margin: 0 !important;
}
/* 各項目の基本設定 */
.footer-nav ul li {
display: block !important;
width: auto !important; /* 既存の幅設定をリセット */
text-align: center !important; /* 文字を中央揃え */
}
/* 1番目の項目（HOME）：3列分のスペースを全部使って1行を独占する */
.footer-nav ul li:nth-child(1) {
grid-column: span 3 !important;
}
/* 一番最後の項目（個人情報保護方針）：同じく3列分を使って1行を独占する */
.footer-nav ul li:last-child {
grid-column: span 3 !important;
margin-top: 1rem !important; /* 他のメニューから少しだけ距離を離す */
}
/* 1. 以前の「4番目(TOPICS)以降を下へ押し下げる」という誤った設定をリセット */
.footer-nav > ul > .footer-has-submenu:hover ~ li:nth-child(n+4),
.footer-nav > ul > .footer-has-submenu:focus-within ~ li:nth-child(n+4) {
transform: none !important;
}
/* 2. 正しく「5番目(RECRUIT)以降を下へ押し下げる」ように設定し直す */
.footer-nav > ul > .footer-has-submenu:hover ~ li:nth-child(n+5),
.footer-nav > ul > .footer-has-submenu:focus-within ~ li:nth-child(n+5) {
transform: translateY(2rem) !important; /* 黒帯の高さ分だけ下に逃がす */
}
/* 3. 念のためTOPICSが帯の手前に来るように重なり順を調整 */
.footer-nav > ul > li {
z-index: 20;
}
/* ========== 会社概要ページ（スマホ） ========== */
.page-company .page-title {
font-size: 6vw;
color: #333;
margin: 0;
padding: 0;
}
.page-company .page-title span {
display: block;
font-size: 3vw;
color: #555;
margin-top: 5px;
font-family: 'Marcellus', serif;
}
/* スマホでは縦線を非表示に */
.page-company main::before {
display: none;
}
.page-company .main-container {
padding-left: 0; /* 縦線がなくなるので、左のパディングもリセット */
}
.page-company .page-header-area,
.page-company .main-content-area {
padding: 30px 20px;
}
/*.page-company .definition-list dt p {
display: inline;
font-weight: normal;
font-size: 0.8em;
color: #535353;
}*/
.page-company .definition-list dt p {
display: block; /* ★ inline から block に変更して、改行させます */
/* 以下はお好みで調整してください */
font-weight: normal;
font-size: 0.8em;
color: #535353;
margin-top: 5px; /* 上の行との間に少し余白を追加 */
}
.dl-row {
flex-direction: column;
}
.dl-row0 {
flex-direction: column;
border-bottom: none;
}
.dl-row1 {
flex-direction: column;
border-bottom: none;
}
.dl-row-last {
flex-direction: column;
}
.definition-list dt {
width: 100%;
padding-right: 0;
margin-bottom: 8px;
font-size: 17px;
}
.definition-list dd {
margin-bottom: 12px;
}
/* definition-listの中の、一番最後の .dl-row の下線を消す */
.page-company .definition-list .dl-row:last-child {
border-bottom: none;
}
/* ========== 理念ページ（スマホ） ========== */
.page-philosophy .page-header-area {
padding: 40px 15px;
}
.page-philosophy .page-title {
font-size: 6vw;
font-weight: 600;
}
.page-philosophy .page-title .title-jp {
display: block; /* ★これを指定すると、この要素の前で改行されます */
/* 以下はお好みで調整してください（任意） */
/*font-size: 0.7em;*/
margin-top: 8px; /* 上の行との間に少し余白を設ける */
}
/*.page-philosophy .page-title .title-hyphen {
display: none;
}*/
.page-philosophy .main-content-area {
padding: 2.5rem 1.5rem;
background-color: #898989;
background-image: url('https://www.plantopia.co.jp/images/bg_circle_s2.jpg');
/*background-size: cover;
background-attachment: fixed;*/
background-position: center center;
}
.page-philosophy .philosophy-text {
line-height: 1.8; /* スマホでは少し行間を詰める */
font-size: 0.95rem;
}
.page-philosophy .tagline {
/*margin-top: 40px;
padding-top: 30px;*/
line-height: 1.9;
}
.page-philosophy .tagline-main {
font-size: 1.4rem;
}
.page-philosophy .tagline-sub {
font-size: 1rem;
}
/* ========== 理念ページのスクロールアニメーションをスマホで無効化 ========== */
.page-philosophy .scroll-item {
/*transform: none;
transition: opacity 1.2s ease-out; */
}
/* ========== 沿革ページ（スマホ） ========== */
.page-history .page-title {
font-size: 6vw;
color: #333;
margin: 0;
padding: 0;
}
.page-history .page-title span {
display: block;
font-size: 3vw;
color: #555;
margin-top: 0;
font-family: 'Marcellus', serif;
}
.page-history .page-title p {
/* font-size: 3.5vw; */
font-size: 4.4vw;
margin-top: 2rem;
margin-bottom: 1rem;
}
/* スクロールアニメーション用のスタイル */
/* 最初は非表示状態 */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* 画面内に入ったら、このクラスが付与されて表示される */
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ========== ページトップボタン（スマホ） ========== */
.page-top-btn img {
width: 45px; /* PC表示の60px。スマホ45px。 */
}
.page-top-btn {
left: auto;
right: 5px !important;
}
}