@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Lexend+Deca:wght@100..900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url("./reset.css");
@import url("./header.css");
@import url("./footer.css");

@font-face {
    font-family: "Yu Gothic";
    src: url("../fonts/YuGothB.ttc");
    font-weight: 700;
}

:root {
    --primary-color: #6C63FF;
    --secondary-color: #F08081;
    --white-color: #fff;
    --text-color-100: #2F2E2E;
    --text-color-200: #5D5D5D;
    --logo-color: #008501;

    --font-lexend: "Lexend Deca", sans-serif;
    --font-yugothic: "Yu Gothic";
    --font-caveat: "Caveat", cursive;
    --font-prompt: "Prompt", sans-serif;
}

#kagawa {
    background-color: #F8F8F8;
    font-family: var(--font-yugothic);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    color: var(--text-color-100);
    position: relative;
    overflow: hidden;
}

#kagawa #main {
    flex: 1;
}

#kagawa .inner {
    max-width: 1488px;
    padding-inline: 24px;
    margin-inline: auto;
}

#kagawa .hover {
    opacity: 1;
    transition: all 0.2s;
}

#kagawa .hover:hover {
    opacity: 0.75;
}

/* page title */
#kagawa .page-title {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: min(42px, 2.19vw);
    justify-items: center;
    margin-bottom: min(80px, 4.17vw);
}

#kagawa .page-title .en {
    font-family: var(--font-lexend);
    font-weight: 700;
    color: var(--white-color);
    font-size: min(51px, 2.66vw);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    min-width: min(374px, 19.48vw);
    position: relative;
    line-height: 1;
    padding-block: min(13px, 0.68vw) min(11px, 0.57vw);
    letter-spacing: min(6px, 0.31vw);
    column-gap: min(9px, 0.47vw);
}

#kagawa #pg-event .page-title .en::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240.153%22%20height%3D%2240.093%22%20viewBox%3D%220%200%2040.153%2040.093%22%3E%3Cg%20fill%3D%22%23fff%22%20stroke%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M13.422%206.819c-.342.31-.7%201.187-.245%203.017v.013a21.3%2021.3%200%200%200%204.9%208.391%2021.1%2021.1%200%200%200%207.769%205.808h.026c1.6.61%202.488.466%202.894.22l.136-.12a1.67%201.67%200%200%200%20.449-1.2%207.4%207.4%200%200%200-.461-2.72%2022.7%2022.7%200%200%200-4.649-7.5%2023%2023%200%200%200-6.933-5.46%207.4%207.4%200%200%200-2.646-.768%201.68%201.68%200%200%200-1.244.306m5.164-2.239a25.9%2025.9%200%200%201%207.9%206.175%2025.6%2025.6%200%200%201%205.261%208.549%2010.3%2010.3%200%200%201%20.61%203.864%204.9%204.9%200%200%201-.947%202.711v.101l-.5.448c-1.63%201.463-4%201.242-6.083.45a24%2024%200%200%201-8.976-6.625%2024.2%2024.2%200%200%201-5.581-9.683c-.537-2.163-.462-4.522%201.154-5.974h.006a4.63%204.63%200%200%201%203.393-1.067%2010.3%2010.3%200%200%201%203.763%201.051%22%2F%3E%3Cpath%20d%3D%22M12.394%205.29a1.5%201.5%200%200%201%20.758%201.981l-9.379%2021.02a2.256%202.256%200%200%200%202.741%203.051l21.953-6.938a1.5%201.5%200%200%201%20.9%202.861L7.415%2034.209h-.006a5.256%205.256%200%200%201-6.375-7.142l9.378-21.019a1.5%201.5%200%200%201%201.981-.758%22%2F%3E%3Cpath%20d%3D%22M18.993%2027.628a1.5%201.5%200%200%201%201.88.983l1.06%203.378a5.047%205.047%200%200%201-3.279%206.3l-3.38%201.06a5.045%205.045%200%200%201-6.3-3.279l-1.062-3.382a1.5%201.5%200%201%201%202.863-.898l1.06%203.378a2.046%202.046%200%200%200%202.538%201.32l3.38-1.06a2.046%202.046%200%200%200%201.32-2.539l-1.061-3.381a1.5%201.5%200%200%201%20.983-1.88M37.396%202.872a1.5%201.5%200%200%201%20.012%202.117l-1.76%201.78a1.5%201.5%200%201%201-2.132-2.11l1.758-1.77a1.5%201.5%200%200%201%202.122-.012M27.884.715a1.5%201.5%200%200%201%20.741%201.987l-.82%201.8a1.5%201.5%200%200%201-2.73-1.244l.82-1.8a1.5%201.5%200%200%201%201.989-.743m11.497%2011.456a1.5%201.5%200%200%201-.614%202.03l-1.68.9a1.5%201.5%200%201%201-1.416-2.644l1.68-.9a1.5%201.5%200%200%201%202.03.614%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    width: min(39px, 2.03vw);
    height: min(39px, 2.03vw);
    display: block;
}

#kagawa .page-title.primary .en {
    background-color: var(--primary-color);
}

#kagawa .page-title.secondary .en {
    background-color: var(--secondary-color);
}

#kagawa .page-title .en::after {
    content: '';
    width: 0;
    height: 0;
    border-top: min(24px, 1.25vw) solid;
    border-left: min(15px, 0.78vw) solid transparent;
    border-right: min(15px, 0.78vw) solid transparent;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
}

#kagawa .page-title.primary .en::after {
    border-top-color: var(--primary-color);
}

#kagawa .page-title.secondary .en::after {
    border-top-color: var(--secondary-color);
}

#kagawa .page-title .ja {
    display: block;
    font-family: var(--font-yugothic);
    font-weight: 700;
    font-size: min(60px, 3.13vw);
    color: var(--primary-color);
    text-align: center;
    letter-spacing: min(7px, 0.36vw);
}