/* 
=======================================================
HEADER
=======================================================
*/
header {
    background: var(--deco_space);
    height: 10vh;
    padding-bottom: 0;
}

/* 
=======================================================
LOGO
=======================================================
*/
.logo {
    max-width: 1000px;
    margin: 0 auto;
    height: 100%;
    padding: 1rem 0;
}


@media screen and (max-width: 480px) {
    .logo {
        padding: 1rem;
        margin: 0;
    }
}

.logo img {
    height: 100%;
    width: fit-content;
    object-fit: contain;
}

@media screen and (max-width: 480px) {
    .logo img {
        width: 40vw;
    }
}


h1 {
    font-size: 2rem;
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 1.3rem;
    }
}

h2 {
    font-size: 1.5rem;
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.1rem;
    }
}

h3 {
    font-size: 1.3rem;
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 1.075rem;
    }
}

h4 {
    font-size: 1.1rem;
}

@media screen and (max-width: 480px) {
    h3 {
        font-size: 1.075rem;
    }
}

p,
li {
    font-style: normal;
    margin-bottom: 0.3rem;
}

@media screen and (max-width: 480px) {

    p,
    li,
    th,
    td {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

p:last-child {
    margin-bottom: 0;
}


form {
    width: 100%;
    margin: 0 auto;
}

a {
    text-decoration: none;
    color: black;
}

sup {
    vertical-align: top;
    font-size: xx-small;
}

.redirect {
    margin: 0;
    padding: 0;
}

.annotation,
.annotation_block p {
    font-size: xx-small;
    text-align: left;
    padding-top: 0.2rem;
    padding-left: 0.1rem;
    margin-bottom: 0;
}

.annotation_block {
    padding-bottom: 0.5rem;
    width: 100%;
}

.note {
    padding: 1rem;
    padding-right: 0;
    width: 100%;
    max-width: var(--width_pc);
}

.note p {
    text-align: right;
    font-size: medium;
    margin-bottom: 0;
    line-height: 1.8;
}

@media screen and (max-width: 480px) {
    .note p {
        font-size: small;
    }
}

/*
PC、SPの改行
=======================================================
*/
.pc {
    display: block;
}

@media screen and (max-width: 480px) {
    .pc {
        display: none;
    }
}

.sp {
    display: none;
}

@media screen and (max-width: 480px) {
    .sp {
        display: block;
    }
}

/* 
=======================================================
強調デザイン
=======================================================
フォントサイズ
=======================================================
*/
.larger {
    font-size: larger;
}

.large {
    font-size: large;
}

.x-large {
    font-size: x-large;
}

.largest {
    font-size: 3rem;
    line-height: 1;
}

@media screen and (max-width: 480px) {
    .largest {
        font-size: 1.8rem;
        line-height: 0.6;
    }
}

.smaller {
    font-size: small;
}

.x-small {
    font-size: x-small;
}

/* 
太さ
=======================================================
*/
.bold {
    font-weight: bold;
}

/* 
文字上ドット
=======================================================
*/
.dots {
    background-image: radial-gradient(circle at center,
            orange 20%, transparent 20%);
    /* 点の色とサイズ調整 */
    background-position: top left;
    /* 点の位置 */
    background-repeat: repeat-x;
    /* 横方向に繰り返し */
    background-size: 1em 0.3em;
    /* 点の間隔とサイズ調整 */
    padding-top: 0.1rem;
    /* 縦方向の位置調整 */
}

/* 
下線
=======================================================
*/
.underline {
    text-decoration: underline solid;
}

.dotline {
    text-decoration: underline dotted;
}

/* 
ハイライト
=======================================================
*/
.highlight_red_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 0, 0, 0.2) 40% 90%, transparent 90%);
}

.highlight_red_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 0, 0, 0.2) 10% 90%, transparent 90%);
}

.highlight_pink_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, rgba(255, 230, 238, 0.6) 40% 90%, transparent 90%);
}

.highlight_pink_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 230, 238, 0.6) 10% 90%, transparent 90%);
}

.highlight_yellow_50 {
    margin: 0;
    width: fit-content;
    background: linear-gradient(transparent 60%,#ff6 60%);
}

.highlight_yellow_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 240, 0, 0.4) 10% 90%, transparent 90%);
}

.highlight_white_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.6) 50% 90%, transparent 90%);
    padding-bottom: 0.3rem;
}

.highlight_white_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, rgba(255, 255, 255, 0.6) 10% 90%, transparent 90%);
}

.highlight_green_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #b9e382 40% 90%, transparent 90%);
}

.highlight_green_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #b9e382 10% 90%, transparent 90%);
}

.highlight_blue_50 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 40%, #79DFFF 40% 90%, transparent 90%);
}

.highlight_blue_100 {
    margin: 0 auto;
    width: fit-content;
    background: linear-gradient(transparent 10%, #79DFFF 40% 90%, transparent 90%);
}

/* 
文字寄せ
=======================================================
*/
.right {
    text-align: right;
    margin-right: 1rem;
}

.left {
    text-align: left;
    display: inline-block;
}

.separator {
    margin-bottom: 1.5rem;
}

@media screen and (max-width: 480px) {
    .h2_indent {
        margin-left: 1.5rem;
    }
}

.indent {
    margin-left: 3rem;
}

/* 
=======================================================
Animationアニメーション
=======================================================
*/

/* アニメーション適用例 */
.fuwafuwa {
    -webkit-animation: fuwafuwa 2s infinite;
    -moz-animation: fuwafuwa 2s infinite;
    animation: fuwafuwa 2s infinite;
}

@keyframes shine {
    33% {
        left: 100%;
    }

    100% {
        left: 100%;
    }
}

@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    4% {
        transform: scale(1.02);
    }

    8% {
        transform: scale(1);
    }

    12% {
        transform: scale(1.02);
    }

    16% {
        transform: scale(1);
    }
}

@keyframes scaling {
    from {
        transform: scale(0.9, 0.9);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-moz-keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@keyframes mochimochi {
    0% {
        transform: scale(1, 0.8);
    }

    20% {
        transform: scale(0.8, 1.1);
    }

    90% {
        transform: scale(1, 1);
    }

    100% {
        transform: scale(1, 0.8);
    }
}

@-webkit-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-moz-keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes fuwafuwa {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@-webkit-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@-moz-keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes pikopiko {
    0% {
        transform: rotate(20deg);
    }

    to {
        transform: rotate(-10deg);
    }
}

@keyframes fuwafuwa_updown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px);
    }
}

/* 横のふわふわの動き */
@keyframes fuwafuwa_sideway {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes kurukuru {
    0% {
        transform: rotateY(0);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes pulsate {
    100% {
        box-shadow:
            0 0 4px #fff,
            0 0 8px #fff,
            0 0 16px #fff,
            0 0 20px var(--body_lemon),
            0 0 8px var(--body_lemon),
            0 0 10px var(--body_lemon),
            0 0 20px var(--body_lemon),
            0 0 30px var(--body_lemon);
    }

    0% {
        box-shadow:
            0 0 2px #fff,
            0 0 4px #fff,
            0 0 6px #fff,
            0 0 8px var(--body_lemon),
            0 0 10px var(--body_lemon),
            0 0 20px var(--body_lemon),
            0 0 30px var(--body_lemon),
            0 0 40px var(--body_lemon);
    }
}

@keyframes bggradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* 
=======================================================
FOOTER
=======================================================
*/
.footer {
    position: sticky;
    top: 100vh;
    color: var(--body_white);
    background: var(--em_space);
    text-align: center;
    padding-top: 2rem;
    font-weight: bolder;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    padding-bottom: 0;
}

@media screen and (max-width:480px) {
    .footer {
        margin: 0;
    }
}

.footer a {
    color: var(--body_white);
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}

.footer .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (max-width:480px) {
    .footer .menu {
        margin: 0;
        padding: 0;
    }
}

.footer .menu li {
    margin: 0;
    padding: 0 0px;
}

@media screen and (max-width:480px) {
    .footer .menu li {
        width: calc(100% / 2);
        margin-bottom: 0.5rem;
    }
}

.footer .menu li::before {
    content: "｜";
    padding-right: 30px;
    padding-left: 30px;
    color: var(--body_white);
    position: relative;
}

@media screen and (max-width:480px) {
    .footer .menu li::before {
        content: "";
        padding: 0;
    }
}

.footer .menu .after_line::after {
    content: "｜";
    padding: 0 30px 0;
}

@media screen and (max-width:480px) {
    .footer .menu .after_line ::after {
        content: "\A";
        padding: 0;
    }
}

.footer .copyright {
    margin: auto;
    padding: 1rem 0 2rem 0;
}

@media screen and (max-width:480px) {
    .footer .copyright {
        padding-top: 0;
    }
}

.footer_logo img {
    width: 10%;
    display: block;
    margin: 0 auto;
}

@media screen and (max-width:480px) {
    .footer_logo img {
        width: 60%;
        display: block;
        margin: 50px auto 0;
    }
}