/*
Theme Name: illust_flamingo
Description: illust_flamingo用のテーマ
Author: Haruka Uehara
Version:1.0.0
*/

:root {
    --fontsize-small: 1.0rem;
    --fontsize-normal: 1.2rem;
    --fontsize-normal-L: 1.6rem;
    --fontsize-medium: 2.0rem;
    --fontsize-medium-L: 2.4rem;
    --fontsize-large: 2.8rem;
    --fontsize-large-L: 3.2rem;
    --fontsize-super: 3.6rem;
    --fontsize-super-L: 4.0rem;
    --fontsize-hyper: 7.0rem;
    --fontsize-hyper-L: 10.0rem;
    --lineheight-normal: 2.0rem;
    --lineheight-normal-L: 3.0rem;
    --lineheight-medium: 4.0rem;
    --lineheight-large: 6.0rem;
    --letterspacing-super: 0.1rem;
    --color-backcolor1: #E7EEFF;
    --color-backcolor2: #FAF7F0;
    --color-backcolor3: #E7F8FF;
    --color-backcolor4: #CDFCF6;
    --color-backcolor5: #cdfcf64d;
    --color-backcolor6: #FFE6EF;
    --color-backcolor7: #BCCEF8;
    --color-backcolor8: #00000046;
    --color-backcolor9: #ffffff46;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-blue1: #0F2384;
    --color-blue2: #98A8F8;
    --color-red: #E33838;
    --color-pink1: #FA6198;
    --color-pink2: #F381AA;
    --color-pink3: #FFD8E6;
    --color-gray: #E3E3E3;
    --color-white: #ffffff;
    --color-black: #000000;
}

@media screen and (max-width: 768px) {
    :root {
        --fontsize-normal: 1.2rem;
        --fontsize-normal-L: 1.5rem;
        --fontsize-medium: 1.8rem;
        --fontsize-medium-L: 2.1rem;
        --fontsize-large: 2.4rem;
        --fontsize-large-L: 2.7rem;
        --fontsize-super: 3.5rem;
        --fontsize-super-L: 4.5rem;
        --fontsize-hyper: 5.0rem;
        --fontsize-hyper-L: 8.0rem;
        --lineheight-normal: 2.0rem;
        --lineheight-normal-L: 2.5rem;
        --lineheight-medium: 3.0rem;
        --lineheight-large: 4.0rem;
        --letterspacing-super: 0.1rem;
    }
}

@media screen and (max-width: 479px) {
    :root {
        --fontsize-normal: 1.2rem;
        --fontsize-normal-L: 1.2rem;
        --fontsize-medium: 1.6rem;
        --fontsize-medium-L: 1.8rem;
        --fontsize-large: 2.0rem;
        --fontsize-large-L: 2.2rem;
        --fontsize-super: 2.2rem;
        --fontsize-super-L: 3.0rem;
        --fontsize-hyper: 4.5rem;
        --fontsize-hyper-L: 6.0rem;
        --lineheight-normal: 2.0rem;
        --lineheight-normal-L: 2.25rem;
        --lineheight-medium: 3.0rem;
        --lineheight-large: 3.0rem;
        --letterspacing-super: 0.01rem;
    }
}

html {
    font-size: min((18 / 1440 * 100vw), 1920 * 10px / 1440);
}
@media screen and (max-width: 768px) {
    html {
      font-size: calc((1 / 45) * 100vw);
    }
}
@media screen and (max-width: 479px) {
    html {
      font-size: calc((1 / 35) * 100vw);
    }
}

body {
    color: var(--color-black);
    font-size: var(--fontsize-normal);
    font-family: Source Sans Pro, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    width: 100%;
    height: 100%;
    vertical-align: bottom;
    object-fit: cover;
}

p {
    margin-block-start: 1em;
    margin-block-end: 1em;
    line-height: var(--lineheight-normal);
}

a {
    color: var(--color-black);
}

@media (hover: hover) {
    a:hover {
        opacity: 0.7;
    }
}

h1 {
    font-size: var(--fontsize-super);
    font-weight: bold;
    line-height: var(--lineheight-large);
    letter-spacing: var(--letterspacing-super);
    margin-bottom: 25px;
    text-align: center;
}

h2 {
    font-size: var(--fontsize-medium-L);
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

h3 {
    font-size: var(--fontsize-normal-L);
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

h4 {
    font-size: var(--fontsize-normal-L);
    font-weight: bold;
    margin: 10px 0;
    text-align: center;
}

.section_main {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
}

@media (hover: hover) and (pointer: fine) {
    .readmore:hover {
        background-color: #FFF3E5;
        cursor: pointer;
    }

    .readmore:hover span {
        color: var(--color-orange);
        background-color: #ffffff;
        border: 1px solid var(--color-orange);
    }
}

.flexrow {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.dashed {
    background-image: linear-gradient(to right, var(--color-black), var(--color-black) 4px, transparent 4px);
    background-size: 8px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

.br_sp {
    display: none;
}

.ul_blue {
    position: relative;
    z-index: 0;
}

.ul_blue::before {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-backcolor7); /* 線色 */
    border-radius: 5px; /* 線幅の半分 */
    content: "";
    display: block;
    height: 10px; /* 線幅 */
    width: 100%;
    z-index: -1;
}

.fc_red {
    color: var(--color-red);
}

@media screen and (max-width: 991px) {
    .section_main {
        max-width: 728px;
    }
}

@media screen and (max-width: 768px) {
    .section_main {
        padding-left: 10px;
        padding-right: 10px;
    }

    .flexrow {
        flex-wrap: wrap;
    }
}

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