@charset "utf-8";
:root {
   --conceptColorR: #f46f8e;
   --conceptColorB: #2ba3d6;
   --subColorG: #4fc74f;
   --subColorB: #30b2ea;
   --subColorY: #e99f2a;
   --subColorGr: #333;
   --subColorRh: #fedbe4;
   --subColorGh: #e0facc;
   --subColorBh: #d8f5fa;
   --subColorYh: #fcf8d8;
   --mioColor: #f075bb;
   --maxWidth: 1300px;
   
   --color-based: #fceb7b;
   --color-saving: #c6f2fa;
   --color-use: #d2fdb1;
   --color-based-sub: #fff5b1;
   --color-saving-sub: #d9f9ff;
   --color-use-sub: #e7ffd5;
   --color-based-bold: #de8614;
   --color-saving-bold: #1a9bd1;
   --color-use-bold: #42bc42;
   --font--color: #333;
}
body { counter-reset: number 0; }
.c-pink { color: var(--conceptColorR)!important; }
.c-gre { color: var(--color-use-bold)!important; }
.c-blue { color: var(--color-saving-bold)!important; }
.c-ore { color: var(--color-based-bold)!important; }
.b-blue { background: var(--color-saving-bold)!important; }
.b-ore { background: var(--color-based-bold)!important; }
.s-normal { font-weight: 500; }
.sct-note__label--c { text-align: center; }
.spe-visual__lead { display: flex; flex-wrap: wrap; gap: 30px 50px; max-width: 100%; width: 100%; align-items: center; }
.spe-visual__lead-img { width: 200px; }
.spe-visual__lead-ex { flex: 1; text-align: left; }


@media (hover: hover) {
}

.sct-note__ex { flex: 1; }
.sct-spe__aside { margin-top: 30px; }
.sct-spe__aside-ad { margin-top: 30px; }
.sct-spe__aside-ad + .sct-spe__aside-ad { margin-top: 0px; }
.sct-aside__img { margin-top: 30px; }

@media (max-width: 480px) {
}


[id*="contents"] { margin-top: 150px; }
[id*="contents"] + [id*="contents"] { margin-top: 150px; }


.based {
	--sct-color: #fceb7b;
	--sct-color-sub: #fff5b1;
	--sct-color-bold: #de8614;
}
.saving {
	--sct-color: #35aed1;
	--sct-color-sub: #d9f9ff;
	--sct-color-bold: #1a9bd1;
}
.use {
	--sct-color: #5fc14e;
	--sct-color-sub: #e7ffd5;
	--sct-color-bold: #42bc42;
}
.sp01 {
	--sct-color: #fa964a;
	--sct-color-sub: #fde7d4;
	--sct-color-bold: #f97715;
}
.sp02 {
	--sct-color: #b382ff;
	--sct-color-sub: #f0e3ff;
	--sct-color-bold: #9a61e2;
}
.sp03 {
	--sct-color: #;
	--sct-color-sub: #;
	--sct-color-bold: ;
}


.sp-visualanchor { margin-top: 50px; }
a.sp-visualanchor__item { color: #000; container: anchor / inline-size; }
.sp-visualanchor__item:nth-child(n+2) { margin-top: 60px; }
.sp-visualanchor__wrap { position: relative; padding: 25px 30px 25px 50px; background: var(--sct-color-sub); border-radius: 20px; }
.sp-visualanchor__ex { width: 51%; }
.sp-visualanchor__label { color: var(--sct-color-bold); font-size: 3.5rem; font-weight: 700; }
.sp-visualanchor__detail-txt { padding-left: 1em; position: relative; font-size: 2rem; }
.sp-visualanchor__detail-txt::before { position: absolute; content: ""; inset: 0.35em auto auto 0; width: 0.8em; border-radius: 100%; aspect-ratio: 1/1; min-width: 0; background: var(--sct-color-bold); }
.sp-visualanchor__img { position: absolute; content: ""; inset: auto 30px 0 auto; width: 42.7%; transform: translate(0,-10px); }
@container anchor (max-width: 760px) {
	.sp-visualanchor__wrap { padding: 25px 15px 25px 20px; }
	.sp-visualanchor__ex { width: calc(100% - 25px - 270px); }
	.sp-visualanchor__label { font-size: 2.8rem; }
	.sp-visualanchor__detail-txt { font-size: 1.7rem; }
	.sp-visualanchor__img { width: 270px; inset: auto 15px 0 auto; }
}
@media (max-width: 767px) {
	.sp-visualanchor { max-width: 420px; margin: 30px auto 0; }
	a.sp-visualanchor__item { color: #000; container: normal; }
	.sp-visualanchor__item:nth-child(n+2) { margin-top: 30px; }
	.sp-visualanchor__wrap { padding: 15px 15px; }
	.sp-visualanchor__ex { width: 100%; }
	.sp-visualanchor__label { font-size: 2.4rem; }
	.sp-visualanchor__detail-txt { font-size: 1.5rem; }
	.sp-visualanchor__img { position: static; inset: 0; width: 100%; transform: translate(0,0); margin-top: 15px; }
}


.sct2-whlabel { position: relative; padding: 25px; margin-bottom: 30px; border-top: 2px solid var(--sct-color-bold); border-bottom: 2px solid var(--sct-color-bold); }
.sct2-whlabel__main { font-weight: 700; font-size: 2.6rem; line-height: 1.5; color: var(--sct-color-bold); }
.sct2-whlabel__sub { font-weight: 700; font-size: 2.0rem; line-height: 1.5; margin-top: 5px; }
.sct2-whlabel__sub2 { font-weight: 700; font-size: 2.4rem; line-height: 1.5; margin-top: 5px; }
.sct2-whlabel__img { position: absolute; content: ""; inset: auto clamp(30px, calc(5.02vw + -9px), 60px) 0 auto; width: 120px; }
.sct2-whlabel__img--s { width: 140px; }

@media (max-width: 767px) {
	.sct2-whlabel { padding: 10px 0px; margin-bottom: 30px; }
	.sct2-whlabel__main { font-size: 2rem; }
	.sct2-whlabel__sub { font-size: 1.6rem; }
	.sct2-whlabel__sub2 { font-size: 1.8rem; }
	.sct2-whlabel__img { display: none; }
}






.sct-color { color: var(--sct-color-bold); }
.sct-head__spm { position: relative; min-height: 160px; overflow: visible; }
.sct-head__spm-img { position: absolute; content: ""; inset: auto 20px 0px auto; width: 360px; }
.sp-manga { display: flex; flex-wrap: wrap; gap: 30px 30px; margin-bottom: 45px; }
.sp-manga__item { inline-size: calc((100% - 30px) / 2); }
.page-list li::before { background-color: var(--sct-color-bold); }

.sct-head__spm { background: var(--sct-color)!important; }
.sct-head__spm-labeln { color: var(--sct-color); }
.sp-sct-note { background: #faefe2!important; }
.sp-sct__note-label { border-radius: 100px; background: #fff; font-weight: 700; color: var(--sct-color); padding: 5px 10px; text-align: center; font-size: 1.8rem; border: 2px solid var(--sct-color); margin-bottom: 10px; }

.sct-ask__talk-t .sct-ask__talk-txt { background: var(--sct-color-sub); }
.sct-ask__talk-t .sct-ask__talk-txt a { position: relative; padding-left: 1em; }
.sct-ask__talk-t .sct-ask__talk-txt a::before { position: absolute; content: ""; inset: 0.35em auto auto 0; height: .55em; aspect-ratio: 11/9; clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: var(--sct-color-sub); }
.sct-ask__talk-t .sct-ask__talk-txt:nth-of-type(2)::before { width: 0; height: 0; border-style: solid; border-width: 7.5px 25px 7.5px 0; border-color: transparent var(--sct-color-sub) transparent transparent; }

.sp-sctb__label { border-top: 2px solid var(--sct-color-bold); border-bottom: 2px solid var(--sct-color-bold); padding: 20px 15px 25px; font-weight: 700; margin-bottom: 45px; }
.sp-sctb__label-batch { font-size: 1.8rem; line-height: 1; background: var(--sct-color-bold); border-radius: 100px; padding: 4px 10px 3px; display: inline-block; color: #fff; }
.sp-sctb__label-txt { font-size: 2.5rem; line-height: 1.5; margin-top: 5px; }









.sct1-chara { border-radius: calc(infinity * 1px); background: #f6f5f1; padding: 35px 50px; margin-top: 30px; }

.sct1-img01 { max-width: 740px; margin-inline: auto; width: 90%; }
.sp-sct02__aside-wrap { align-items: center; }
.sp-sct02__aside-wrap .page-list--ball .page-list__item::before { background: var(--conceptColorR); }
.sct1-label { border-bottom: 1px solid #000; font-size: 1.6rem; font-weight: 700; margin-bottom: 10px; }
.sct1-label__acce { font-size: 2.6rem; margin-right: 1em; color: var(--sct-color-bold); }

.sct2-img01 { max-width: 540px; margin-inline: auto; width: 90%; }
.sct3-img01 { max-width: 740px; margin-inline: auto; width: 90%; }


.sp02 .sct5-label { color: var(--sct-color-bold); background: var(--sct-color-sub); }
.fc-sp02 { color: var(--sct-color-bold); }
.sct-aside { background: var(--sct-color-sub); }
.sct-aside__btn { background: var(--sct-color-bold); }


.sp-list { display: flex; flex-wrap: wrap; gap: 50px 100px; margin-top: 40px; }
.sp-item { position: relative; inline-size: calc((100% - 100px) / 2); border-left: 1px solid #7d7d7d; border-right: 1px solid #7d7d7d; padding: 15px 20px 30px; }
.sp-item:nth-child(even)::before { position: absolute; content: ""; inset: 0 auto 0 -70px; margin: auto 0; background: url(../images/acce_arrow.webp) no-repeat center/contain; aspect-ratio: 98/82; min-width: 0; width: 48px; }
.sp-list__label { font-size: 2.2rem; font-weight: 700; text-align: center; }
.sp-list__txt { font-size: 1.6rem; margin-top: 15px; }
.sp-list__img { max-width: 340px; width: 80%; margin: 30px auto 0; }
.sp-list__cap { margin: 10px auto 0;  max-width: 340px; width: 80%;  font-size: 1.3rem; }



@media (max-width: 1200px) {
	[id*="contents"] { margin-top: 90px; }
	[id*="contents"] + [id*="contents"] { margin-top: 90px; }
	.sct-head__spm { padding-right: 280px; }
	.sct-head__spm-img { inset: auto 10px 0px auto; width: 260px; }
}
@media (max-width: 767px) {
	.sct-head__spm { padding-right: 0px; min-height: 100px; }
	.sct-head__spm-ex { width: 100%; flex: 0 1 auto; }
	.sct-head__spm-img { position: static; margin-inline: auto; }
	.sp-manga { gap: 20px 20px; }
	.sp-manga__item { inline-size: calc((100% - 20px) / 2); }
	
	.sp-sctb__label { padding: 15px 10px 10px; margin-bottom: 30px; }
	.sp-sctb__label-batch { font-size: 1.5rem; }
	.sp-sctb__label-txt { font-size: 2rem; }
	
	
	
	.sp-item { inline-size: 100%; padding: 15px 20px 30px; }
	.sp-item:nth-child(n+2)::before { position: absolute; content: ""; inset: -40px 0 auto 0; margin: 0 auto; background: url(../images/acce_arrow.webp) no-repeat center/contain; aspect-ratio: 98/82; min-width: 0; width: 32px; transform: rotate(90deg); }
	.sp-list__label { font-size: 1.8rem; }
	.sp-list__txt { font-size: 1.4rem; margin-top: 15px; }
	.sp-list__img { max-width: 320px; width: 90%; margin: 15px auto 0; }
	.sp-list__cap { max-width: 320px; width: 90% }
	
	.sct1-img01 { max-width: 320px; width: 100%; }
	.sct2-img01 { max-width: 320px; margin-inline: auto; width: 90%; }
	.sct3-img01 { max-width: 320px; margin-inline: auto; width: 90%; }
	
}
@media (max-width: 480px) {
	.sp-manga__item { inline-size: 100%; }
	
}







.sct-checklist { margin-top: 40px; }
.sct-checklist__batch { font-weight: 700; color: var(--sct-color-bold); font-size: 2rem; line-height: 1.5; text-align: center; }
.sct-checklist__lead { text-align: center; font-size: 1.8rem; }
.sct-checklist__list { display: flex; flex-wrap: wrap; gap: 30px 20px; margin-top: 15px; }
.sct-checklist__item { inline-size: calc((100% - 40px) / 3); }
a.sct-checklist__area { color: var(--font--color); }
.sct-checklist__img { margin-top: 15px; }
.sct-checklist__btn { position: relative; font-size: 1.8rem; border-radius: calc(infinity * 1px); width: 160px; background: var(--sct-color-bold); color: #fff; text-align: center; padding: 10px 15px; margin: 20px auto 0; font-weight: 700; line-height: 1; }
.sct-checklist__btn::after { position: absolute; content: ""; inset: 0 15px 0 auto; height: .75em; aspect-ratio: cos(30deg); clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: #fff; margin: auto 0; }


@media (max-width: 767px) {
	.sct-checklist { margin-top: 30px; }
	.sct-checklist__lead { font-size: 1.5rem; }
	.sct-checklist__item { inline-size: 100%; max-width: 320px; margin-inline: auto; }
	.sct-checklist__batch { font-size: 1.8rem; }
	.sct-checklist__img { margin-top: 10px; }
	.sct-checklist__btn { font-size: 1.5rem; margin: 15px auto 0; }
}

@media (hover: hover) {
	.sct-checklist__area { transition: .25s; }
	.sct-checklist__area:hover { opacity: 0.5; }
}





.l-arrowlink { position: relative; padding-left: 1em; }
.l-arrowlink--b a { color: var(--color-based-bold); }
.l-arrowlink--s a { color: var(--color-saving-bold); }
.l-arrowlink--u a { color: var(--color-use-bold); }
.l-arrowlink::before { position: absolute; content: ""; inset: 0.6em auto auto 0; height: .55em; aspect-ratio: 11/9; clip-path: polygon(0 0,100% 50%,0 100%); object-fit: cover; background: var(--font--color); }



@media (hover: hover) {
   a.sp-visualanchor__item:hover::before { transform: translateY(20px); }
   a.sp-visualanchor__item:hover::after { transform: translateY(20px) rotate(45deg); }
}


@media (max-width: 767px) {
	.spe-visual__lead { margin: 30px auto; }
	.spe-visual__lead-img { order: 2; margin-inline: auto; }
	.spe-visual__lead-ex { flex: 0 1 auto; order: 1; }
	
	.sct-head__spm-acce { width: 100%; }

	.sct-ask__talk-t .sct-ask__talk-txt:nth-of-type(2)::before { transform: rotate(90deg); inset: -15px 0 auto 0; margin: 0 auto; }
	.sct-ask__talk-t .sct-ask__talk-txt:nth-of-type(1)::before { transform: rotate(-90deg); inset: -15px 0 auto 0; margin: 0 auto; }
	
	
	
	.sct-ask__talk-b .sct-ask__talk-img + .sct-ask__talk-txt::before { transform: rotate(90deg); inset: -15px 0 auto 0; margin: 0 auto; }
	.sct-ask__talk-b .sct-ask__talk-txt::before { transform: rotate(-90deg); inset: -15px 0 auto 0; margin: 0 auto; }
}