@charset "UTF-8";

/* =========================
	投稿ページ
========================= */

.p-single {
position: relative;
overflow:hidden;
}

/* =========================
	ヘッダ
========================= */

.p-single__header {
position: relative;
margin:70px 50px 50px;
background: rgba(255,255,255,.50);
border: 1px solid rgba(255,255,255,.66);
}
.p-single__header::before {
content: "";
position: absolute;
z-index: 20;
top: -11px;
left: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-tl.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
pointer-events: none;
}
.p-single__header::after {
content: "";
position: absolute;
z-index: 20;
top: -11px;
right: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-tr.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
pointer-events: none;
}

.p-single__headerContainer{
position: relative;

display: grid;
grid-template-columns: 35% 1fr;
align-items: start;
}
.p-single__headerContainer::before {
content: "";
position: absolute;
z-index: 20;
bottom: -11px;
left: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-bl.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
pointer-events: none;
}
.p-single__headerContainer::after {
content: "";
position: absolute;
z-index: 20;
right: -11px;
bottom: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-br.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
pointer-events: none;
}

.p-single__header--noImage .p-single__headerContainer {
grid-template-columns: 1fr;
}

.p-single__header--noImage .p-single__headerBody {
width: 100%;
}

.p-single__headerTitle {
position: relative;

margin-bottom: 10px;
padding: 25px 0 28px;

width:100%;

font-family: "Mochiy Pop One", sans-serif;
font-weight: normal;
font-size: 28px;
line-height: 1.4;
overflow-wrap: anywhere;

color: #333333;
}
.p-single__headerTitle::before {
content: "";
position: absolute;
z-index: 20;
top: 0;
left: 50%;
width: 85%;
height: 16px;
background-image: url("../img/common/hr.png");
background-repeat: no-repeat;
background-position: center top;
background-size: 100% auto;
pointer-events: none;
transform: translateX(-50%);
}
.p-single__headerTitle::after {
content: "";
position: absolute;
z-index: 20;
bottom: 0;
left: 50%;
width: 85%;
height: 16px;
background-image: url("../img/common/hr.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% auto;
pointer-events: none;
transform: translateX(-50%);
}

/* 画像 */
.p-single__headerImage img {
display: block;
width: 100%;
height: auto;
}

/* 右カラム */
.p-single__headerBody {
position: relative;
padding:10px 20px;

display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

/* キャラ */
.p-single__headerCharaBox {
position: relative;
width:100%;
margin-bottom: 15px;
}
.p-single__headerCharaBox::before {
content: "";
left:0;
position: absolute;
z-index: 1;
bottom: 23%;
width: 100%;
height: 50%;
background-image: url("../img/title/bg_news-page.svg");
background-repeat: no-repeat;
background-position: center top;
background-size: auto 100%;
pointer-events: none;
}

.p-single__headerChara {
position: relative;
margin: 0 auto;
z-index: 1;
}
.p-single__headerChara {
	width: 36%;
}
.p-single__header--noImage .p-single__headerChara {
	width: 18%;
}
.p-single__headerChara img {
display: block;
width: 100%;
height: auto;
backface-visibility: hidden;
}

/* メタ */
.c-pageHeader .c-news__meta {
justify-content: center;
margin-bottom: 15px;
}

/* 日付 */
.c-pageHeader__date,
.p-single__date {
display: block;
margin-top: 24px;

color: #555;
font-size: 18px;
font-weight: 700;
line-height: 1;
}

/* =========================
	本文
========================= */

.p-single__body {
--flow-space: 20px;
--box-padding: 20px;
--section-space: 50px;
--subsection-space: 30px;
--list-space: 10px;

position: relative;
margin: 0 auto;
margin-bottom: 50px;
z-index: 10;
width: 960px;
width: min(960px, calc(100% - 100px));
font-size: 16px;
font-weight: 400;
line-height: 2;
}

.p-single__body::before{
content: "";
position: absolute;
top: -11px;
left: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-tl.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
pointer-events: none;
z-index: 20;
}
.p-single__body::after{
content: "";
position: absolute;
top: -11px;
right: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-tr.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
pointer-events: none;
z-index: 20;
}

.p-single__container {
position: relative;
padding:25px;
background:rgba(255,255,255,.50);
border: 1px solid rgba(255,255,255,.66);
}
.p-single__container::before{
content: "";
position: absolute;
bottom: -11px;
left: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-bl.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
pointer-events: none;
z-index: 20;
}
.p-single__container::after{
content: "";
position: absolute;
right: -11px;
bottom: -11px;
width: 88px;
height: 88px;
background-image: url("../img/common/corner-br.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
pointer-events: none;
z-index: 20;
}

.p-single__body strong {
font-weight: 700;
}

.p-single__body > * {
margin: 0;
}

.p-single__body > * + * {
margin-top: var(--flow-space);
}

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

.p-single__body strong {
color: #ff4f9d;
font-weight: 900;
}

/* リンク */
.p-single__body a {
text-decoration: underline;
text-underline-offset: 0.2em;
}

/* 外部リンクアイコン */

/* リード */
.p-single__lead {
position: relative;
padding: 72px 25px;
background:#fff8da;
border-radius: 16px;
}
.p-single__lead::before {
content: "";
position: absolute;
top:12px;
left: 50%;
width: 96%;
height: 64px;
background-image: url("../img/title/bg_lead.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
pointer-events: none;
z-index: 20;
transform: translateX(-50%);
}
.p-single__lead::after {
content: "";
position: absolute;
bottom:12px;
left: 50%;
width: 96%;
height: 64px;
background-image: url("../img/title/bg_lead.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center bottom;
pointer-events: none;
z-index: 20;
transform: translateX(-50%);
}
.p-single__leadContainer {
--line: 38px;

padding:0 10px;

line-height: 2;

background:
repeating-linear-gradient(
180deg,
rgba(255,143,199,.5) 0,
rgba(255,143,199,.5) 1px,
transparent 1px,
transparent var(--line)
);

border-bottom: 1px solid rgba(255,143,199,.5);

background-position: 0 0;
}

.p-single__lead p {
font-family: "Zen Maru Gothic", sans-serif;
font-size: 19px;
font-weight: 900;
line-height: 38px;
color:#3d3333;
}

/* 本文ボックス */
.p-single__box {
position: relative;
padding: 0 var(--box-padding);
}

.p-single__lead + .p-single__box {
margin-top: var(--section-space);
}

.p-single__box > * {
position: relative;
z-index: 1;
margin: 0;
}

.p-single__box > * + * {
margin-top: var(--flow-space);
}

/* 見出し */
.p-single__body h2 {
font-size: clamp(24px, 3vw, 36px);
line-height: 1.5;
}

.p-single__body > * + h2,
.p-single__box > * + h2 {
margin-top: var(--section-space);
}

.p-single__body h3{
position: relative;
font-family: "Mochiy Pop One", sans-serif;
font-size: 25px;
font-weight: normal;
line-height: 1.4;
color: #333333;

border-top: 3px solid #ff4f9d;
border-bottom: 3px solid #ff4f9d;
padding: 10px 18px 12px 18px; 

background:
repeating-linear-gradient(
-45deg,
rgba(255,255,255,.92) 0px,
rgba(255,255,255,.92) 5px,
rgba(255,255,255,.45) 5px,
rgba(255,255,255,.45) 10px
);

-webkit-text-stroke: 6px #ffffff;
paint-order: stroke fill;
}
.p-single__body h3::before,
.p-single__body h3::after{
position: absolute;
top: -8px;
content: '';
width: 3px;
height: calc(100% + 16px);
background-color: #ff4f9d;
}
.p-single__body h3::before{
left: 4px;
}
.p-single__body h3::after{
right: 4px;
}

.p-single__body h4 {
position: relative;
align-items: center;
padding:12px 10px 18px 66px;

font-size: 20px;
line-height: 1.4;

font-family: "Zen Maru Gothic", sans-serif;
font-weight: 900;
color: #2b8fff;
background:rgba(255,255,255,.5);

border-radius: 8px 8px 0 0;

-webkit-text-stroke: 6px #fff;
paint-order: stroke fill;
}
.p-single__body h4::before{
content: "";
position: absolute;
top:44%;
left: 6px;
width: 56px;
height: 56px;
background-image: url("../img/title/bg_h4.svg");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
pointer-events: none;
z-index: 20;
transform: translateY(-50%);
}
.p-single__body h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 8px;

background: repeating-linear-gradient(
	-45deg,
	rgba(251,80,134,.66) 0,
	rgba(251,80,134,.66) 4px,
	transparent 4px,
	transparent 8px
);
}

.p-single__body > * + h4,
.p-single__box > * + h4 {
margin-top: var(--subsection-space);
}

/* リスト */
.p-single__body ul,
.p-single__body ol {
padding: 0;

list-style: none;
}

.p-single__body li {
position: relative;
padding-left: 1em;

line-height: 1.5;
}

.p-single__container ul li::before {
content: "";
position: absolute;
top: 0.18em;
left: 0;
width: 1em;
height: 1em;
background-image: url("../img/common/bg_list.svg");
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}

.p-single__body li + li {
margin-top: var(--list-space);
}

/* 画像 */
.p-single__image {
text-align: center;
padding:5px;
background:#ffffff;
border:1px solid #67dfff;
border-radius:10px;
overflow:hidden;
}

.p-single__image img {
display: block;
width: 100%;
height: auto;
border-radius: 5px;
}

/* 表 */
.p-single__table {
width: 100%;

overflow: hidden;
border-collapse: separate;
border-radius: 8px;

background-image:
repeating-linear-gradient(
135deg,
rgba(255,255,255,.25) 0,
rgba(255,255,255,.25) 2px,
transparent 2px,
transparent 9px
),
linear-gradient(
135deg,
#9ff7e2 0%,
#9ee8ff 100%
);

}

.p-single__table th,
.p-single__table td {
padding: 14px 18px 10px;

border-bottom: 1px solid rgba(255,143,199,.5);

text-align: left;
vertical-align: middle;
}

.p-single__table th {
	width: 25%;

	color: #fff;
font-family: "LINE Seed JP", sans-serif;
	font-size: 1.1em;
	font-weight: 700;

	-webkit-text-stroke: 4px #527099;
	paint-order: stroke fill;
}

.p-single__table td {
background: #fff;
}

.p-single__table tr:last-child th,
.p-single__table tr:last-child td {
border-bottom: 0;
}

/* =========================
	ニュース
========================= */

.p-news {
position: relative;
}

/* =========================
	ページネーション
========================= */

.p-news__pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}

.p-news__pagination .page-numbers {
display: flex;
justify-content: center;
align-items: center;

min-width: 48px;
height: 48px;
padding: 0 16px;

border-radius: 999px;
background-color: #39d2ff;
background-image: url("../img/common/bg_crystal.png");
background-repeat:repeat;
background-position: center;
background-size: 160px 93px;

color: inherit;
font-size: 20px;
line-height: 1;
text-decoration: none;

transition:all 0.2s ease;

font-family: "Zen Maru Gothic", sans-serif;
font-weight: 900;
}

.p-news__pagination a.page-numbers:hover {
transform: translateY(-2px);
}

.p-news__pagination .current {
color: #fff;
background-color: #fb5086;
background-image: url("../img/common/bg_crystal.png");
background-repeat:repeat;
background-position: center;
background-size: 160px 93px;
-webkit-text-stroke: 5px #ff0050;
paint-order: stroke fill;
}

.p-news__pagination .dots {
background: transparent;
}

.p-news__pagination .prev,
.p-news__pagination .next {
width: 64px;
height: 64px;
min-width: 64px;
padding: 0;
background: none;
}

.p-news__arrow {
display: block;
width: 64px;
height: 64px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.p-news__arrow--prev {
background-image: url("../img/common/arrow-l.png");
}
.p-news__arrow--next {
background-image: url("../img/common/arrow-r.png");
}
.p-news__arrow--prev:hover {
background-image: url("../img/common/arrow-l_on.png");
}
.p-news__arrow--next:hover {
background-image: url("../img/common/arrow-r_on.png");
}

/* =========================
	投稿前後ナビ
========================= */

.p-single__nav {
width: min(960px, calc(100% - 100px));
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
}

.p-single__navItem {
display: flex;
justify-content: center;
}
.p-single__navItem:first-child {
justify-content: flex-start;
}
.p-single__navItem:last-child {
justify-content: flex-end;
}
.p-single__navItem--index {
justify-self: center;
}

.p-single__navLink {
position: relative;
display: block;
width: 64px;
height: 64px;

background-repeat: no-repeat;
background-position: center;
background-size: contain;

text-decoration: none;

transition: transform 0.2s ease;
}

.p-single__navLink--prev {
background-image: url("../img/common/arrow-l.png");
}

.p-single__navLink--next {
background-image: url("../img/common/arrow-r.png");
}

.p-single__navLink--prev:hover {
transform: translateY(-2px);
background-image: url("../img/common/arrow-l_on.png");
}

.p-single__navLink--next:hover {
transform: translateY(-2px);
background-image: url("../img/common/arrow-r_on.png");
}

.p-single__navLink::before {
content: attr(data-label);
position: absolute;
top: 50%;

color: #184077;
font-family: "Zen Maru Gothic", sans-serif;
font-size: 16px;
font-weight: 900;
line-height: 1;
white-space: nowrap;

transform: translateY(-50%);
}

.p-single__navLink--prev::before {
left: calc(100% + 10px);
}

.p-single__navLink--next::before {
right: calc(100% + 10px);
left: auto;
}

/* =========================
スマホ
========================= */

@media (max-width: 768px) {

.p-single__header {
margin:70px 15px 50px;
}

.p-single__header::before {
top: -8px;
left: -8px;
width: 64px;
height: 64px;
}
.p-single__header::after {
top: -8px;
right: -8px;
width: 64px;
height: 64px;
}
.p-single__headerContainer::before {
bottom: -8px;
left: -8px;
width: 64px;
height: 64px;
}
.p-single__headerContainer::after {
right: -8px;
bottom: -8px;
width: 64px;
height: 64px;
}

.p-single__body {
--flow-space: 15px;
--box-padding: 5px;
--section-space: 25px;
--subsection-space: 20px;
--list-space: 8px;

margin: 0 15px;
margin-bottom: 50px;
z-index: 10;
width: auto;
font-size: 15px;
}
.p-single__body::before{
top: -8px;
left: -8px;
width: 64px;
height: 64px;
}
.p-single__body::after{
top: -8px;
right: -8px;
width: 64px;
height: 64px;
}
.p-single__container {
padding:15px;
}
.p-single__container::before{
bottom: -8px;
left: -8px;
width: 64px;
height: 64px;
}
.p-single__container::after{
right: -8px;
bottom: -8px;
width: 64px;
height: 64px;
}

.p-single__lead {
padding: 48px 15px;
}
.p-single__lead::before {
top:15px;
}
.p-single__lead::after {
bottom:15px;
}

.p-single__leadContainer {
--line: 32px;
padding:0 5px;
}
.p-single__lead p {
font-size: 16px;
line-height: 32px;
}

.p-single__body h4 {
padding:12px 10px 18px 53px;
font-size: 17px;
line-height: 1.4;
}
.p-single__body h4::before{
top:44%;
left: 5px;
width: 44px;
height: 44px;
}
.p-single__body h4::after {
height: 7px;
}
.p-single__table th,
.p-single__table td {
padding: 6px 12px;
}

.p-single__nav {
width: 100%;
gap: 5px;
}
.p-single__navItem:first-child {
justify-content: flex-end;
}
.p-single__navItem:last-child {
justify-content: flex-start;
}
.p-single__navLink::before {
content: none;
}

/* =========================
スマホ（記事ヘッダー）
========================= */

.p-single__headerContainer {
grid-template-columns: 1fr;
}

/* 右カラム */
.p-single__headerBody {
position: relative;
padding: 20px;

display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.p-single__headerTitle {
padding: 15px 0 18px;
font-size: 23px;
}

.p-single__body h3{
font-size: 18px;
padding: 8px 14px 10px 14px; 
}