/* GENERAL STYLE */
:root {
    --safe-vw: 1vw;
}

@media (min-width: 750px) {
    :root {
        --safe-vw: calc(750px / 100);
    }
}

main {
    max-width: 750px;
    margin: auto;
}

@font-face {
    font-family: Gothic;
    src: url("./fonts/ToppanBunkyuMidashiGothicStdN-ExtraBold.otf") format("opentype");
}

@font-face {
    font-family: Mincho;
    src: url("./fonts/ToppanBunkyuMidashiMinchoStdN-ExtraBold.otf") format("opentype");
}

@font-face {
    font-family: Yosugara;
    src: url("./fonts/yosugara1.1のコピー.ttf") format("opentype");
}

@font-face {
    font-family: NotoSansJP;
    src: url("./fonts/NotoSansJP-Regular.otf") format("opentype");
}

/* vertical-div style */
.vertical-div {
    position: relative;
    text-align: center;
    color: white;
}

.vertical-div img {
    width: 100%;
    height: auto;
}

.text-overlay {
    font-family: Mincho;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    height: max-content;
    text-align: start;
}

.text-overlay h1,
.text-overlay h2 {
    font-weight: 400;
    font-size: calc(9 * var(--safe-vw));
    letter-spacing: calc(2 * var(--safe-vw));
}

.text-overlay h1 {
    border: calc(0.5 * var(--safe-vw)) solid white;
    font-size: calc(11 * var(--safe-vw));
    padding: calc(2 * var(--safe-vw)) 0;
    margin: 0 calc(8 * var(--safe-vw));
    text-shadow: 3px 3px 5px rgb(0 0 0);
    box-shadow: 0px 3px 15px rgb(0 0 0);
}

.text-overlay h2:nth-of-type(2) {
    margin-top: calc(3.5 * var(--safe-vw));
    ;
}

.text-overlay h2:nth-of-type(1) {
    margin-top: calc(-2.5 * var(--safe-vw));
    ;
}

/* listing-div style */
.listing-div {
    margin-top: calc(-2 * var(--safe-vw));
    background-image: url("./assets/bg/2x/listing-background.png");
    background-size: cover;
    padding: calc(8 * var(--safe-vw)) calc(5 * var(--safe-vw));
}

.listing-div h2 {
    font-family: Mincho;
    color: white;
    font-weight: 400;
    font-size: calc(6 * var(--safe-vw));
    text-align: center;
    clear: both;
}

.listing-div h2:nth-of-type(1) {
    margin-bottom: 30px;
}

.listing-div li:last-child {
    margin-bottom: 30px;
}

.listing-div img {
    height: calc(5 * var(--safe-vw));
}

.listing-div li {
    color: white;
    background: linear-gradient(135deg, #07ECA7, #3F56EE);
    clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
    padding: 7px calc(6 * var(--safe-vw));
    font-size: calc(3 * var(--safe-vw));
    width: 85%;
    display: flex;
    align-items: center;
    gap: calc(1 * var(--safe-vw));
    margin-bottom: calc(4 * var(--safe-vw));
    height: calc(9 * var(--safe-vw));
    font-family: 'Gothic';
}

.listing-div li:nth-child(even) {
    float: left;
}

.listing-div li:nth-child(odd) {
    float: right;
}

/* cycle-div style */
.cycle-div {
    position: relative;
    padding: calc(4 * var(--safe-vw)) calc(4 * var(--safe-vw)) calc(10 * var(--safe-vw)) calc(4 * var(--safe-vw));
    margin-top: calc(2 * var(--safe-vw));
}

.border-gradient {
    position: relative;
    padding: calc(1.5 * var(--safe-vw));
}

.border-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: calc(1.5 * var(--safe-vw));
    background: linear-gradient(180deg, #00D1FF, #3269FF);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.inner-cycle-div {
    text-align: center;
}

.inner-cycle-div img:nth-of-type(1) {
    width: calc(50 * var(--safe-vw));
    position: relative;
    top: calc(-7 * var(--safe-vw));
}

.inner-cycle-div img:nth-of-type(2) {
    width: 95%;
}

.inner-cycle-div img:nth-of-type(3) {
    width: 80%;
}

.inner-cycle-div h4 {
    font-family: 'Mincho';
    font-size: calc(5.7 * var(--safe-vw));
    line-height: calc(7 * var(--safe-vw));
    margin-bottom: calc(3 * var(--safe-vw));
    margin-top: calc(-4 * var(--safe-vw));
}

/* support-div style */
.support-div {
    padding-top: calc(5 * var(--safe-vw));
    background-image: url("./assets/bg/2x/support-div-background.png");
    background-size: cover;
}

.support-div>h2 {
    text-align: center;
    font-size: calc(11 * var(--safe-vw));
    font-family: 'Gothic'; /* for now */
    font-weight: 300;
    background: linear-gradient(135deg, #0089DE, #00B5C6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.support-div>h3 {
    text-align: center;
    font-size: calc(7 * var(--safe-vw));
    font-family: sans-serif;
    font-weight: 900;
    background: linear-gradient(135deg, #3F56EE, #07ECA7);
    width: fit-content;
    margin: calc(2 * var(--safe-vw)) auto calc(5 * var(--safe-vw)) auto;
    color: white;
    padding: 0 calc(12 * var(--safe-vw));
    margin-top: calc(2 * var(--safe-vw));
}

.support-item {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: white;
    margin: calc(6 * var(--safe-vw)) calc(2 * var(--safe-vw));
    width: 85%;
    padding: calc(5 * var(--safe-vw));
    box-shadow: calc(1 * var(--safe-vw)) calc(1 * var(--safe-vw)) calc(1 * var(--safe-vw)) #737373;
}

.support-item>h3 {
    color: #0096D7;
    position: absolute;
    font-size: calc(10 * var(--safe-vw));
    font-family: 'Gothic'; /* for now */
    font-weight: 300;
    letter-spacing: calc(0.8 * var(--safe-vw));
    top: calc(-5 * var(--safe-vw));
}

.support-item>h2 {
    font-family: 'NotoSansJP';
    font-weight: 900;
    color: #0046A3;
    margin-top: calc(5 * var(--safe-vw));
    line-height: calc(7 * var(--safe-vw));
    font-weight: 700;
    font-size: calc(6 * var(--safe-vw));
    margin-bottom: calc(3 * var(--safe-vw));
}

.support-item span {
    display: flex;
    align-items: flex-start;
    gap: calc(1.5 * var(--safe-vw));
    color: #606060;
    font-family: 'Mincho';
    font-size: calc(5 * var(--safe-vw));
    line-height: calc(6 * var(--safe-vw));
    margin: calc(1 * var(--safe-vw));
}

.support-item span>img {
    height: calc(5 * var(--safe-vw));
    margin-top: calc(0.5 * var(--safe-vw));
}

.support-item:nth-of-type(odd) {
    float: left;
}

.support-item:nth-of-type(even) {
    float: right;
}

.support-arrows {
    clear: both;
    display: flex;
    justify-content: center;
    gap: calc(3 * var(--safe-vw));
}

.support-arrows img {
    height: calc(6 * var(--safe-vw));
}

.support-bottom {
    background: linear-gradient(135deg, #3F56EE, #07ECA7);
    color: white;
    text-align: center;
    padding: calc(4 * var(--safe-vw)) 0;
    margin: calc(4 * var(--safe-vw)) 0;
}

.support-bottom p {
    font-weight: 700;
    font-size: calc(4.5 * var(--safe-vw));
}

.support-bottom h2 {
    font-family: 'Mincho';
    font-size: calc(10.5 * var(--safe-vw));
    letter-spacing: calc(0.8 * var(--safe-vw));
    line-height: calc(16 * var(--safe-vw));
}

/* blue-div style */
.blue-div {
    background-image: url("./assets/bg/2x/blue-div-background.png");
    background-size: cover;
    padding: calc(20 * var(--safe-vw)) calc(8 * var(--safe-vw)) calc(8 * var(--safe-vw)) calc(8 * var(--safe-vw));
}

.blue-div-container {
    border: calc(1 * var(--safe-vw)) solid #25689E;
    background-color: #d3d3d3a3;
    position: relative;
    padding: calc(14 * var(--safe-vw)) calc(4 * var(--safe-vw)) calc(4 * var(--safe-vw)) calc(4 * var(--safe-vw));
}

.blue-div-container>h3 {
    font-family: 'NotoSansJP';
    font-weight: 900;
    text-align: center;
    background-color: #0046A3;
    color: white;
    width: 80%;
    margin: auto;
    font-size: calc(5 * var(--safe-vw));
    position: absolute;
    top: calc(-9 * var(--safe-vw));
    padding: calc(1 * var(--safe-vw));
    left: 50%;
    transform: translate(-50%, 0);
}

.blue-div-first {
    display: flex;
    gap: calc(2 * var(--safe-vw));
}

.blue-div-first .blue-div-item {
    width: 60%;
}

.blue-div-first .blue-div-zero {
    color: #0046A3;
    font-size: calc(9 * var(--safe-vw));
    font-weight: 700;
    display: flex;
    align-items: flex-end;
    margin-bottom: calc(4 * var(--safe-vw));
}

.blue-div-first .blue-div-zero img {
    height: calc(35 * var(--safe-vw));
    margin-bottom: calc(3 * var(--safe-vw));
}

.blue-div-item>h3 {
    font-family: 'NotoSansJP';
    font-weight: 900;
    text-align: center;
    color: #0046A3;
    font-size: calc(8 * var(--safe-vw));
    border: calc(0.5 * var(--safe-vw)) solid;
    line-height: calc(9 * var(--safe-vw));
}

.blue-div-item p {
    color: #0046A3;
    font-family: 'Mincho';
    font-size: calc(6 * var(--safe-vw));
    line-height: calc(8 * var(--safe-vw));
    margin: calc(4 * var(--safe-vw)) 0 calc(5 * var(--safe-vw)) 0;
}

/* listing-div style */

/* table-div style */
.table-div {
    padding-top: calc(7 * var(--safe-vw)) 0;
    background-color: white;
    background-image: url("./assets/bg/2x/table-div-background.png");
    background-size: cover;
}

.table-header-container {
    position: relative;
    margin-bottom: calc(12 * var(--safe-vw));
    padding-top: calc(7 * var(--safe-vw));
}

.table-div h2 {
    font-family: Mincho;
    background: linear-gradient(135deg, #4065FD, #49ECFB);
    color: white;
    border-radius: calc(7 * var(--safe-vw));
    font-size: calc(5.5 * var(--safe-vw));
    text-align: center;
    padding: calc(3 * var(--safe-vw)) 0;
    margin-right: calc(2 * var(--safe-vw));
    margin-left: calc(6 * var(--safe-vw));
    position: relative;
}

.table-header-container img {
    padding-top: calc(7 * var(--safe-vw));
    position: absolute;
    top: calc(6 * var(--safe-vw));
    left: 50%;
    width: 93%;
    transform: translateX(-51%);
    z-index: 1;
    margin: auto;
}

.table-bublles-container {
    display: flex;
    gap: calc(0.5 * var(--safe-vw));
    flex: 1;
}

.table-bubble {
    position: relative;
    width: 100%;
    background-color: #0046A3;
    color: white;
    padding: calc(4 * var(--safe-vw)) 0;
    text-align: center;
    height: calc(23 * var(--safe-vw));
    font-weight: 700;
    font-size: calc(5 * var(--safe-vw));
    line-height: calc(7 * var(--safe-vw));
    font-family: Mincho;
}

.table-bubble::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 15px solid #0046A3;
}

.table-bubble:nth-of-type(3) {
    background-color: #00AFB6;
}

.table-bubble:nth-of-type(3)::after {
    border-top: 15px solid #00AFB6;
}

.table-bubble:first-of-type {
    background-color: transparent;
}

.table-bubble:first-of-type::after {
    border-top: 15px solid transparent;
}

.table {
    border-collapse: separate;
    border-spacing: 0px;
    width: 100%;
    margin-top: 18px;
    table-layout: fixed;
    font-size: calc(4 * var(--safe-vw));
}

.table tr:nth-child(odd) {
    background-color: #E6E6E6;
}

.table tr:nth-child(even) {
    background-color: #CACACA;
}

.table td {
    border: 1px solid white;
    height: calc(12 * var(--safe-vw));
    vertical-align: middle;
    padding: calc(2 * var(--safe-vw));
    text-align: center;
}

.table td:first-child > div {
    font-family: 'Notosansjp';
    font-weight: 900;
    color: black;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
}

.table td:nth-child(2) > div {
    color: #0046A3;
    font-family: 'Gothic';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.table tr:nth-child(1) td:nth-child(2) > div {
    line-height: calc(3 * var(--safe-vw));
}

.table td:nth-child(2) span {
    font-size: calc(3 * var(--safe-vw));
}

.table td:nth-child(2) span img {
    height: calc(9 * var(--safe-vw));
    margin-bottom: calc(-0.5 * var(--safe-vw));
}

.table td:nth-child(3) > div {
    color: #00AFB6;
    font-family: 'Gothic';
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.table td:nth-child(3) span {
    font-size: calc(8 * var(--safe-vw));
    line-height: calc(4 * var(--safe-vw));
}

.table tr:first-child td {
    border-top: none;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr td:first-child {
    border-left: none;
}

.table tr td:last-child {
    border-right: none;
}

.under-table {
    font-family: 'NotoSansJP';
    text-align: right;
    font-size: calc(1.5 * var(--safe-vw));
    font-weight: 700;
    margin-top: calc(4 * var(--safe-vw));
}

/* bubbles-div style */
.bubbles-div {
    padding: calc(7 * var(--safe-vw));
}

.bubbles-div ul {
    list-style-type: none;
}

.bubbles-div li {
    position: relative;
    width: 90%;
    background-color: #0046A3;
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: calc(5 * var(--safe-vw));
    font-family: Mincho;
    margin-bottom: calc(6 * var(--safe-vw));
    border-radius: calc(1 * var(--safe-vw));
}

.bubbles-div li:nth-child(odd) {
    float: right;
}

.bubbles-div li:nth-child(even) {
    float: left;
}

.bubbles-div li:nth-child(odd)::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #0046A3;
}

.bubbles-div li:nth-child(even)::after {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 7px solid transparent;
    border-top: 20px solid #0046A3;
}

.bubbles-div li:last-child {
    margin-bottom: calc(8 * var(--safe-vw));
}

.bubbles-div p {
    font-family: 'NotoSansJP';
    clear: both;
    width: 90%;
    margin: auto;
    text-align: center;
    border: calc(1 * var(--safe-vw)) solid #4F86C9;
    background-color: #E9F1FF;
    color: #0046A3;
    font-size: calc(6 * var(--safe-vw));
    font-weight: 700;
    padding: calc(3 * var(--safe-vw));
}

/* achievements-div style */
.achievements-div {
    text-align: center;
    background-image: url("./assets/bg/2x/support-div-background.png");
    background-size: cover;
    padding-bottom: calc(2 * var(--safe-vw));
}

.achievements-div>img {
    margin-top: calc(-2 * var(--safe-vw));
    width: calc(34 * var(--safe-vw));
}

.achievement-item {
    background: white;
    margin: calc(10 * var(--safe-vw)) calc(6 * var(--safe-vw));
    text-align: left;
    position: relative;
    padding: calc(8* var(--safe-vw)) calc(3 * var(--safe-vw));
}

.achievement-item h3 {
    font-family: 'NotoSansJP';
    position: absolute;
    top: calc(-4.5 * var(--safe-vw));
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    color: white;
    background: linear-gradient(135deg, #07ECA7, #3F56EE);
    clip-path: polygon(7% 0%, 100% 0%, 93% 100%, 0% 100%);
    font-size: calc(5.5 * var(--safe-vw));
    width: 90%;
    display: flex;
    align-items: baseline;
    justify-content: center;
    margin-bottom: calc(4 * var(--safe-vw));
    height: calc(9 * var(--safe-vw));
}

.achievement-item img {
    width: 100%;
}

.achievement-item h4 {
    font-size: calc(4 * var(--safe-vw));
    margin: calc(2.5 * var(--safe-vw)) 0;
    padding: 0 calc(2 * var(--safe-vw));
    font-family: Mincho;
    color: white;
    background-color: #0046A3;
    width: fit-content;
}

.achievement-item p {
    color: #606060;
    font-size: calc(3.7 * var(--safe-vw));
    font-family: Mincho;
}

.achievement-blue-gothic {
    color: #0046A3;
    font-family: Gothic;
}

.achievement-bottom-p {
    font-family: 'NotoSansJP';
    background-color: #0046A3;
    color: white;
    width: fit-content;
    margin: auto;
    font-size: calc(6 * var(--safe-vw));
    letter-spacing: calc(0.9 * var(--safe-vw));
    font-weight: 700;
    padding: calc(1 * var(--safe-vw)) calc(6 * var(--safe-vw));
}

/* egg-div style */
.eggs-div {
    padding-bottom: calc(13 * var(--safe-vw));
    margin-top: calc(-2 * var(--safe-vw));
    background-image: url("./assets/bg/2x/support-div-background.png");
    background-size: cover;
}

.eggs-div>h3 {
    font-family: 'NotoSansJP';
    font-weight: 900;
    color: #0046A3;
    text-align: center;
    font-size: calc(6 * var(--safe-vw));
    margin-top: calc(1 * var(--safe-vw));
}

.eggs-div>h2 {
    font-family: 'NotoSansJP';
    font-weight: 900;
    color: #0046A3;
    text-align: center;
    font-size: calc(11 * var(--safe-vw));
    line-height: calc(11 * var(--safe-vw));
    margin-bottom: calc(6 * var(--safe-vw));
}

.egg-container {
    position: relative;
    text-align: center;
    margin-bottom: calc(12 * var(--safe-vw));
}

.egg-container img {
    width: 85%;
    height: auto;
}

.egg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 97%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--safe-vw));
}

.egg-text h2 {
    font-family: Yosugara;
    font-size: calc(8 * var(--safe-vw));
    font-weight: 700;
}

.egg-text p {
    width: 80%;
    font-family: 'Gothic';
    font-size: calc(3.9 * var(--safe-vw));
    line-height: calc(7 * var(--safe-vw));
    text-align: left;
}

.eggs-div>p {
    font-family: notosansjp;
    background-color: #0046A3;
    color: white;
    font-weight: 900;
    font-size: calc(6.5 * var(--safe-vw));
    border-radius: calc(6 * var(--safe-vw));
    width: 90%;
    margin: auto;
    text-align: center;
    line-height: calc(8 * var(--safe-vw));
    padding: calc(1 * var(--safe-vw));
    margin-bottom: calc(12 * var(--safe-vw));
    box-shadow: calc(1.5 * var(--safe-vw)) calc(1.5 * var(--safe-vw)) calc(2 * var(--safe-vw)) #000000b8;
}

/* q&a-div style */
.qa-div {
    /* margin-top: calc(-13 * var(--safe-vw)); */
    position: relative;
    text-align: center;
    color: white;
    background: url('./assets/bg/2x/vertical-div-bg.png') center/cover no-repeat;
    padding: calc(5 * var(--safe-vw)) 0;
}

.content-container {
    width: 100%;
    text-align: center;
}

.qa-title {
    font-family: times;
    font-size: calc(11 * var(--safe-vw));
    font-weight: 400;
}

.qa-subtitle {
    font-family: Mincho;
    font-size: calc(4 * var(--safe-vw));
    letter-spacing: calc(0.6 * var(--safe-vw));
    margin: calc(2 * var(--safe-vw)) 0;
}

.qa-container {
    width: 75%;
    margin: calc(5 * var(--safe-vw)) auto;
    background: #f5f5f5b8;
    line-height: calc(6 * var(--safe-vw));
}

.qa-question {
    font-family: Mincho;
    letter-spacing: calc(0.6 * var(--safe-vw));
    background-color: #0046A3;
    padding: calc(1 * var(--safe-vw));
    height: calc(14 * var(--safe-vw));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(4 * var(--safe-vw));
}

.qa-answer {
    font-family: Gothic;
    text-align: left;
    padding: calc(3 * var(--safe-vw)) calc(5.5 * var(--safe-vw));
    color: black;
    font-size: calc(5 * var(--safe-vw));
    font-size: calc(4 * var(--safe-vw));
}

/* personel-div style */
.personel-div {
    padding: calc(5 * var(--safe-vw));
    background-image: url("./assets/bg/2x/support-div-background.png");
    background-size: cover;
}

.personel-div-title {
    text-align: center;
    font-family: 'Mincho';
    line-height: calc(7 * var(--safe-vw));
    font-size: calc(6 * var(--safe-vw));
    letter-spacing: calc(0.6 * var(--safe-vw));
    color: #0046A3;
}

.personel-div-divider {
    background: linear-gradient(135deg, #0063AE, #39F0CF);
    height: calc(1.5 * var(--safe-vw));
    width: 100%;
    margin: calc(2 * var(--safe-vw)) auto calc(5 * var(--safe-vw)) auto;
}

.personel-item {
    position: relative;
}

.personel-item:nth-of-type(3) {
    text-align: right;
}

.personel-item:nth-of-type(3) .personel-details {
    left: 30%;
}

.personel-picture {
    width: 66%;
}

.personel-details {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translate(-50%, -50%);
    background-color: #0046A3;
    color: white;
    padding: calc(3 * var(--safe-vw)) 0 calc(5 * var(--safe-vw)) 0;
    min-width: calc(46 * var(--safe-vw));
    min-height: calc(36 * var(--safe-vw));
    text-align: center;
    font-family: 'Mincho';
    width: max-content;
}

.personel-details h3 {
    font-size: calc(10 * var(--safe-vw));
    line-height: calc(10 * var(--safe-vw));
}

.personel-details h4 {
    width: fit-content;
    margin: auto;
    font-size: calc(3.3 * var(--safe-vw));
    border-bottom: calc(0.3 * var(--safe-vw)) solid;
}

.personel-details p {
    margin-top: calc(3 * var(--safe-vw));
    font-size: calc(3 * var(--safe-vw));
    line-height: calc(4 * var(--safe-vw));
    letter-spacing: calc(0.4 * var(--safe-vw));
}

.personel-div>p {
    font-family: 'Mincho';
    font-size: calc(3.6 * var(--safe-vw));
    line-height: calc(6.5 * var(--safe-vw));
    padding: calc(4 * var(--safe-vw)) 0 calc(8 * var(--safe-vw)) 0;
}

/* footer-div style */
.footer-div {
    position: relative;
    margin-top: calc(-1 * var(--safe-vw));
}

.footer-div-content {
    position: absolute;
    top: 34%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.footer-div-content p:nth-last-of-type(2) {
    width: 90%;
    font-family: 'Mincho';
    font-size: calc(3 * var(--safe-vw));
    margin: auto;
}

.footer-div-content img {
    width: 90%;
}

.footer-div-content p:nth-last-of-type(1) {
    width: 90%;
    font-family: 'Gothic';
    font-size: calc(3.5 * var(--safe-vw));
    margin: auto;
    color: #5A5959;
}

.footer-div-content div {
    width: 100%;
    font-family: 'Gothic'; /* for now */
    font-size: calc(3.5 * var(--safe-vw));
    background: linear-gradient(135deg, #4864F5, #7DEAF9);
    color: white;
    border-radius: calc(100 * var(--safe-vw));
    margin-top: calc(2 * var(--safe-vw));
    padding: calc(1 * var(--safe-vw));
}

.footer-div>img {
    width: 100%;
}

.copy-right {
    text-align: center;
    background: linear-gradient(135deg, #4864F5, #7DEAF9);
    font-family: 'Mincho';
    color: white;
    font-size: calc(1.6 * var(--safe-vw));
    padding: calc(0.5 * var(--safe-vw));
}

/*
 * section.scss
 */
.section {
    height: auto;
    background-color: #fff;
    /* セクションごとのレイアウト */
}

.section__inner {
    max-width: 750px;
    margin: auto;
    padding: 0 clamp(1px, 2.6666666667vw, 20px);
}

.section__contents {
    width: clamp(1px, 94.6666666667vw, 710px);
    max-width: 710px;
    margin: auto;
    padding: 0 clamp(1px, 2.1333333333vw, 16px);
}

.cta {
    padding: clamp(1px, 3.3333333333vw, 25px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(1px, 3.3333333333vw, 25px);
}

.cta__item:hover {
    opacity: 0.8;
}

.cta img {
    width: 100%;
}

.section--fixed {
    position: sticky;
    bottom: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.6666666667);
}

.comic_box img {
    width: 100%;
}