<script>try {
const importedWebComponents = import("/assets/js/tetraminion/web-components.js/web-components.js");
const domContentLoaded = importedWebComponents.then(async module => await module.domContentLoaded);
const importedQualifyName = importedWebComponents.then(module => module.qualifyName);
const documentBodyQuerySelectorAll = selectors => {
const queried = [];
for (const resource of document.body.querySelectorAll("[component-resource^='/resources" + location.pathname + "']")) {
queried.push(customElements.whenDefined(resource.localName).then(() => resource.shadowRoot.querySelectorAll(selectors)));
}
return queried;
};
const scope = "tetraminion-org";
Promise.all([
importedQualifyName,
import("/assets/js/module-connect-database.js").then(async module => await module.default(scope)),
domContentLoaded,
]).then(async values => {
const [qualifyName, database] = values;
const objectStore = database
.transaction(qualifyName(scope, "change-name"), "readwrite")
.objectStore(qualifyName(scope, "change-name"));
const changeName = [];
for (const queried of documentBodyQuerySelectorAll(".js-change-name")) {
changeName.push(queried.then(forms => {
for (const form of forms) {
const output = (name, value) => {
for (const outputText of form.querySelectorAll("output[name='" + name + "']")) {
outputText.value = value;
}
};
const onOutput = async (name, value) => {
const outputText = form.querySelector("output[name='" + name + "']")?.value ?? value;
const inserted = [];
for (const queried of documentBodyQuerySelectorAll(".js-insert-name[data-name='" + name + "']")) {
inserted.push(queried.then(insertTextElements => {
for (const element of insertTextElements) {
element.textContent = outputText;
}
}));
}
return await Promise.all(inserted);
};
for (const textField of form.querySelectorAll("input[name]")) {
const request = objectStore.get(textField.name);
request.onerror = () => {
for (const formElement of form.querySelectorAll(":enabled")) {
formElement.disabled = true;
}
};
request.onsuccess = event => {
if (null === (event.target.result?.value ?? null)) {
return;
}
textField.value = event.target.result.value;
output(textField.name, textField.value);
};
onOutput(textField.name, textField.value);
}
const onSubmit = event => {
const eventIsSubmit = !event.target.matches("button[type='reset'], button[type='reset'] *");
for (const textField of form.querySelectorAll("input[name]")) {
const objectStore = database
.transaction(qualifyName(scope, "change-name"), "readwrite")
.objectStore(qualifyName(scope, "change-name"));
const request = objectStore.get(textField.name);
request.onerror = event => console.error(event.target.error);
request.onsuccess = event => {
const item = {...(event.target.result ?? {}), key: textField.name};
item.value = !eventIsSubmit ? null : textField.value;
objectStore.put(item);
};
if (eventIsSubmit) {
output(textField.name, textField.value);
}
onOutput(textField.name, textField.value);
}
if (eventIsSubmit) {
event.preventDefault();
}
};
form.addEventListener("submit", onSubmit);
for (const commonButton of form.querySelectorAll("button")) {
commonButton.addEventListener("click", onSubmit);
}
}
}));
}
return await Promise.all(changeName);
}).catch(async () => {
await domContentLoaded;
const disableForms = [];
for (const queried of documentBodyQuerySelectorAll(".js-change-name :enabled")) {
disableForms.push(queried.then(formElements => {
for (const formElement of formElements) {
formElement.disabled = true;
}
}));
}
await Promise.all(disableForms);
}).catch(console.error);
} catch {}</script>
<style>
h1 {
--tetraminion-org-typescale__font: var(--tetraminion-org-typescale-title-large__font);
--tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-title-large__scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-title-large__tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-title-large__weight);
display: flex;
font: var(--tetraminion-org-typescale);
margin-block-end: var(--tetraminion-org-dialog__padding-between-title-and-body);
}
@media not print {
h1 {
margin-block-start: var(--tetraminion-org-dialog__padding-between-title-and-body);
margin-inline: max(0px, var(--tetraminion-org-card__inline-padding) - var(--tetraminion-org-page__margin));
}
}
.css-articles {
--css-windows-xp-common-button-group-button-gap-row: max(
var(--tetraminion-org-target__spacing),
var(--tetraminion-org-target__size) - var(--css-windows-xp-common-button-container-block-size)
);
--css-windows-xp-common-button-container-block-size: max(
0px,
var(--tetraminion-org-common-button__block-size) - var(--tetraminion-org-unit-dp)*4*3
);
display: grid;
gap: var(--tetraminion-org-page__margin);
grid: auto-flow / repeat(auto-fill, minmax(min(
100%,
var(--tetraminion-org-bottom-sheet__maximum-inline-size)
), 1fr));
place-items: center stretch;
}
input,
output {
font: var(--tetraminion-org-typescale);
font-feature-settings: var(--tetraminion-org-typescale__feature-palt);
letter-spacing: var(--tetraminion-org-typescale__letter-spacing);
}
.css-windows-xp-common-button-group {
display: flex;
flex-flow: wrap;
gap: var(--css-windows-xp-common-button-group-button-gap-row) var(--tetraminion-org-target__spacing);
}
.css-windows-xp-common-button {
--tetraminion-org-color-background__tone: var(--tetraminion-org-filled-button__container-color-tone);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-filled-button__label-text-color-tone);
--tetraminion-org-elevation__level: var(--tetraminion-org-filled-button__container-elevation-level);
--tetraminion-org-filled-button__container-color-tone: var(--tetraminion-org-filled-button__container-color-tone--enabled);
--tetraminion-org-filled-button__container-color-tone--enabled: var(--tetraminion-org-color-surface__tone);
--tetraminion-org-filled-button__label-text-color-tone: var(--tetraminion-org-filled-button__label-text-color-tone--enabled);
--tetraminion-org-filled-button__label-text-color-tone--enabled: var(--tetraminion-org-color-on-surface__tone);
--tetraminion-org-typescale__font: var(--tetraminion-org-common-button__label-text-font);
--tetraminion-org-typescale__scale: var(--tetraminion-org-common-button__label-text-scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-common-button__label-text-tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-common-button__label-text-weight);
--backdrop-filter: var(--tetraminion-org-glassmorphism__surface-filter);
background: var(--tetraminion-org-state__state-layer), var(--tetraminion-org-color-surface);
block-size: max-content;
border: var(--tetraminion-org-common-button__container-outline-size) outset var(--tetraminion-org-color-outline);
border-radius: var(--tetraminion-org-shape-small__size);
box-shadow: var(--tetraminion-org-elevation__shadow);
color: var(--tetraminion-org-color-on-background);
display: flex;
font: var(--tetraminion-org-typescale);
min-block-size: var(--css-windows-xp-common-button-container-block-size);
min-inline-size: var(--tetraminion-org-common-button__container-maximum-inline-size);
padding-inline: var(--tetraminion-org-filled-button__inline-padding);
place-content: center;
place-items: center;
text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
}
.css-windows-xp-common-button__label-text {
overflow: hidden;
}
.css-windows-xp-text-field {
--tetraminion-org-color-background__tone: var(--tetraminion-org-text-field__container-color-tone);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-text-field__input-text-color-tone);
--tetraminion-org-text-field__container-color-tone: var(--tetraminion-org-text-field__container-color-tone--enabled);
--tetraminion-org-text-field__container-color-tone--enabled: var(--tetraminion-org-color-surface__tone);
--tetraminion-org-text-field__input-text-color-tone: var(--tetraminion-org-text-field__input-text-color-tone--valid);
--tetraminion-org-text-field__input-text-color-tone--valid: var(--tetraminion-org-color-on-surface__tone);
--tetraminion-org-typescale__font: var(--tetraminion-org-text-field__input-text-font);
--tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-body-large__font--proportional-width);
--tetraminion-org-typescale__scale: var(--tetraminion-org-text-field__input-text-scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-text-field__input-text-tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-text-field__input-text-weight);
background: var(--tetraminion-org-state__state-layer), var(--tetraminion-org-color-surface);
border: var(--tetraminion-org-unit-dp) inset var(--tetraminion-org-color-outline);
border-radius: var(--tetraminion-org-shape-extra-small__size);
color: var(--tetraminion-org-color-on-background);
display: flow-root;
min-block-size: var(--css-windows-xp-common-button-container-block-size);
overflow: hidden;
padding-inline: var(--tetraminion-org-text-field__inline-padding-without-icons);
text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
}
.css-dreammaker1 {
--css-dreammaker1__container-outline-size: calc(var(--tetraminion-org-unit-dp)*2);
--css-dreammaker1__padding: var(--tetraminion-org-target__spacing);
--tetraminion-org-color-background__tone: var(--tetraminion-org-color-accent__tone);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-color-on-accent__tone);
--tetraminion-org-elevation__level: var(--tetraminion-org-filled-card__container-elevation-level);
/* --tetraminion-org-palette: #343dff; */
/* --tetraminion-org-palette: 237deg 100%; */
--tetraminion-org-palette: 223deg 100%;
--tetraminion-org-typescale__font: var(--tetraminion-org-typescale-title-small__font);
--tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-title-small__scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-title-small__tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-title-small__weight);
--backdrop-filter: var(--tetraminion-org-glassmorphism__surface-filter);
background: var(--tetraminion-org-state__state-layer), var(--tetraminion-org-color-surface);
border: var(--css-dreammaker1__container-outline-size) solid transparent;
border-radius: var(--tetraminion-org-shape-small__size);
border-end-start-radius: var(--tetraminion-org-shape-extra-small__size);
border-end-end-radius: var(--tetraminion-org-shape-extra-small__size);
color: var(--tetraminion-org-color-on-background);
display: flow-root;
font: var(--tetraminion-org-typescale);
overflow: hidden;
text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
}
.css-dreammaker1__header {
display: flex;
min-block-size: max(0px, var(--tetraminion-org-unit-dp)*24 - var(--css-dreammaker1__container-outline-size));
padding-block-end: var(--css-dreammaker1__container-outline-size);
padding-inline: var(--css-dreammaker1__padding);
place-items: center;
white-space: nowrap;
}
.css-dreammaker1__headline {
overflow: hidden;
}
.css-dreammaker1__content-area {
--tetraminion-org-color-background__tone: var(--tetraminion-org-color-surface-variant__tone);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-color-on-surface-variant__tone);
--tetraminion-org-palette: 0deg 0%;
background: var(--tetraminion-org-state__state-layer), var(--tetraminion-org-color-surface);
color: var(--tetraminion-org-color-on-background);
display: flow-root;
overflow: hidden;
text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
}
.css-dreammaker1__form {
margin-block: var(--css-windows-xp-common-button-group-button-gap-row);
margin-inline: var(--css-dreammaker1__padding);
place-content: start;
place-items: center;
white-space: nowrap;
}
.css-dreammaker1__text-field {
--tetraminion-org-line-length: var(--tetraminion-org-line-length-shorter-text--too-wide);
inline-size: 100%;
margin-block: var(--css-windows-xp-common-button-group-button-gap-row);
}
.css-dreammaker1__common-button-group {
margin-block: var(--css-windows-xp-common-button-group-button-gap-row);
place-content: end;
place-items: center;
}
.css-dreammaker1__supporting-text {
--tetraminion-org-typescale__font: var(--tetraminion-org-typescale-body-medium__font);
--tetraminion-org-typescale__font--proportional-width: var(--tetraminion-org-typescale-body-medium__font--proportional-width);
--tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-body-medium__scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-body-medium__tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-body-medium__weight);
display: flex;
flex-flow: wrap;
font: var(--tetraminion-org-typescale);
margin: var(--css-dreammaker1__padding);
}
.css-dreammaker2 {
--tetraminion-org-color-background__tone: var(--tetraminion-org-dialog__container-color-tone);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-dialog__supporting-text-color-tone);
--tetraminion-org-elevation__level: var(--tetraminion-org-filled-card__container-elevation-level);
--tetraminion-org-line-length: var(--tetraminion-org-line-length-shorter-text--too-narrow);
--tetraminion-org-palette: 0deg 0%;
--tetraminion-org-typescale__font: var(--tetraminion-org-typescale-body-large__font);
--tetraminion-org-typescale__scale: var(--tetraminion-org-typescale-body-large__scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-typescale-body-large__tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-typescale-body-large__weight);
--backdrop-filter: var(--tetraminion-org-glassmorphism__surface-filter);
background: var(--tetraminion-org-state__state-layer), var(--tetraminion-org-color-surface);
border: var(--tetraminion-org-unit-dp) solid var(--tetraminion-org-color-outline);
border-radius: var(--tetraminion-org-card__shape-size);
color: var(--tetraminion-org-color-on-background);
display: flow-root;
font: var(--tetraminion-org-typescale);
overflow: hidden;
padding-inline: max(var(--tetraminion-org-page__margin), var(--tetraminion-org-card__inline-padding));
text-shadow: var(--tetraminion-org-glassmorphism__content-shadow);
}
.css-dreammaker2::after {
content: "";
display: block;
margin-block-start: var(--tetraminion-org-page__margin);
}
.css-dreammaker2__header {
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-color-accent__tone);
/* --tetraminion-org-palette: #c00100; */
/* --tetraminion-org-palette: 0deg 100%; */
--tetraminion-org-palette: 1deg 92%;
color: var(--tetraminion-org-color-on-background);
display: flex;
min-block-size: var(--tetraminion-org-dialog__header-block-size);
place-content: center;
place-items: center;
}
.css-dreammaker2__headline {
--tetraminion-org-typescale__font: var(--tetraminion-org-full-screen-dialog__headline-font);
--tetraminion-org-typescale__scale: var(--tetraminion-org-full-screen-dialog__headline-scale);
--tetraminion-org-typescale__tracking: var(--tetraminion-org-full-screen-dialog__headline-tracking);
--tetraminion-org-typescale__weight: var(--tetraminion-org-full-screen-dialog__headline-weight);
font: var(--tetraminion-org-typescale);
}
.css-dreammaker2__form {
margin-block: var(--tetraminion-org-dialog__padding-between-body-and-actions);
place-content: center;
place-items: center;
}
.css-dreammaker2__text-field {
--tetraminion-org-line-length: var(--tetraminion-org-line-length-shorter-text--too-narrow);
display: flex;
flex-flow: wrap;
gap: 0 var(--tetraminion-org-target__spacing);
margin-block: var(--css-windows-xp-common-button-group-button-gap-row);
place-items: center;
}
.css-dreammaker2__text-field-label {
--tetraminion-org-line-length: 6;
display: flex;
flex: 1 2 min(100%, var(--tetraminion-org-typescale__line-length));
}
.css-dreammaker2__text-field-container {
flex: 2 1 min(
100%,
(var(--tetraminion-org-text-field__inline-padding-without-icons) + var(--tetraminion-org-unit-dp))*2
+ var(--tetraminion-org-typescale__line-length)
);
}
.css-dreammaker2__text-field-output-text {
flex: 2 1 min(100%, var(--tetraminion-org-typescale__line-length));
}
.css-dreammaker2__common-button-group {
margin-block: var(--css-windows-xp-common-button-group-button-gap-row);
place-content: center;
place-items: center;
}
.css-dreammaker2__supporting-text {
--tetraminion-org-line-length: var(--tetraminion-org-line-length-longer-body-text--ideal-range);
--tetraminion-org-color-on-background__tone: var(--tetraminion-org-color-accent__tone);
/* --tetraminion-org-palette: #855400; */
/* --tetraminion-org-palette: 38deg 100%; */
--tetraminion-org-palette: 14deg 82%;
color: var(--tetraminion-org-color-on-background);
display: flex;
inline-size: var(--tetraminion-org-typescale__line-length);
margin-block: var(--tetraminion-org-dialog__padding-between-title-and-body);
max-inline-size: 100%;
place-content: center;
place-items: center;
}
</style>
<div class="css-container">
<h1><tetraminion-org-typescale-headline-medium
component-label-text="夢主の名前を変換する"
></tetraminion-org-typescale-headline-medium></h1>
<div class="css-articles">
<article class="css-dreammaker1" aria-label="DreamMaker1">
<h2><label class="css-dreammaker1__header" for="dreammaker1__text-field"><tetraminion-org-typescale-title-small
class="css-dreammaker1__headline"
component-label-text="あなたの名前を教えてね"
></tetraminion-org-typescale-title-small></label></h2>
<div class="css-dreammaker1__content-area">
<form class="css-dreammaker1__form js-change-name" method="post">
<p class="css-dreammaker1__supporting-text">
<tetraminion-org-typescale-body-medium
component-label-text="【"
></tetraminion-org-typescale-body-medium>
<output name="dreammaker1__1">未設定</output>
<tetraminion-org-typescale-body-medium
component-label-text="】"
></tetraminion-org-typescale-body-medium>
</p>
<input
id="dreammaker1__text-field"
class="css-dreammaker1__text-field css-windows-xp-text-field"
name="dreammaker1__1"
required
>
<div class="css-dreammaker1__common-button-group css-windows-xp-common-button-group">
<button class="css-windows-xp-common-button"><tetraminion-org-typescale-label-large
class="css-windows-xp-common-button__label-text"
component-label-text="教える"
></tetraminion-org-typescale-label-large></button>
<button class="css-windows-xp-common-button" type="reset"><tetraminion-org-typescale-label-large
class="css-windows-xp-common-button__label-text"
component-label-text="忘れさせる"
></tetraminion-org-typescale-label-large></button>
</div>
</form>
<small class="css-dreammaker1__supporting-text"><tetraminion-org-typescale-body-medium
component-label-text="名前を教えても教えなくても、一字一句まで同じ物語を読むことができます。"
></tetraminion-org-typescale-body-medium></small>
</div>
</article>
<article class="css-dreammaker2" aria-label="DreamMaker2">
<h2 class="css-dreammaker2__header"><tetraminion-org-typescale-title-large
class="css-dreammaker2__headline"
component-label-text="ドリーム小説メニュー"
></tetraminion-org-typescale-title-large></h2>
<form class="css-dreammaker2__form js-change-name" method="post">
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__1"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目１："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__1"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__1"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__1"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__2"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目２："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__2"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__2"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__2"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__3"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目３："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__3"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__3"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__3"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__4"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目４："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__4"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__4"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__4"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__5"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目５："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__5"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__5"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__5"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__text-field">
<label class="css-dreammaker2__text-field-label" for="dreammaker2__6"><tetraminion-org-typescale-body-large
class="css-dreammaker2__text-field-label-text"
component-label-text="入力項目６："
></tetraminion-org-typescale-body-large></label>
<input
id="dreammaker2__6"
class="css-dreammaker2__text-field-container css-windows-xp-text-field"
name="dreammaker2__6"
required
>
<span class="css-dreammaker2__text-field-output-text">
<tetraminion-org-typescale-body-large component-label-text="【"></tetraminion-org-typescale-body-large>
<output name="dreammaker2__6"></output>
<tetraminion-org-typescale-body-large component-label-text="】"></tetraminion-org-typescale-body-large>
</span>
</div>
<div class="css-dreammaker2__common-button-group css-windows-xp-common-button-group">
<button class="css-windows-xp-common-button"><tetraminion-org-typescale-label-large
class="css-windows-xp-common-button__label-text"
component-label-text="登録する"
></tetraminion-org-typescale-label-large></button>
<button class="css-windows-xp-common-button" type="reset"><tetraminion-org-typescale-label-large
class="css-windows-xp-common-button__label-text"
component-label-text="削除する"
></tetraminion-org-typescale-label-large></button>
</div>
</form>
<small class="css-dreammaker2__supporting-text"><tetraminion-org-typescale-body-large
component-label-text="※お名前を登録してから閲覧したい小説を選んでも、登録せずに閲覧したい小説を選んでも、一字一句まで同じ物語を読むことができます。"
></tetraminion-org-typescale-body-large></small>
</article>
</div>
</div>
