@charset "UTF-8";

:root {
    --color-blue: #242f88;
    --color-pink: #c35391;
}

:root {
    --cont-md: 90%;
    --cont-lg: 100%;
    --cont-max-sm: 768px;
    --cont-max-md: 1200px;
    --cont-max-lg: 1400px;
}

/* スマホ (大画面)・小型タブレット */
@media screen and (max-width: 768px) { }

/* ノートPC・小型デスクトップ */
@media screen and (max-width: 1200px) { }

/* 大画面PC・4K対応 */
@media screen and (max-width: 1600px) { }

html {
    width: 100%;
    font-size: 62.5%;
    overflow-x: hidden;
}

html * {
    box-sizing: border-box;
    font-feature-settings: "palt";
    word-break: break-word;
    line-break: strict;
}

body {
    width: 100%;
    font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
    font-weight: normal;
    letter-spacing: .05rem;
    line-height: 1.8;
    color: var(--color-black);
    overflow-x: hidden;
}

body.is_fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

body a {
    line-height: 1;
    display: inline-block;
    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}

body img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    pointer-events: none;
}

body #wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    body #wrapper {
        height: 100vh;
        height: 100dvh;
    }
}

.min {
    font-family: "Noto Serif JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.gothic {
    font-family: "Noto Sans JP",-apple-system,BlinkMacSystemFont,"Helvetica Neue",YuGothic,"ヒラギノ角ゴ ProN W3",Hiragino Kaku Gothic ProN,Arial,"メイリオ",Meiryo,sans-serif;
}

.hover img {
    opacity: 1;
    transition: opacity 0.3s;
}
.hover:hover img {
    opacity: 0.6;
}

.nopc { display: none; }

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

    .nosp { display:none !important; }

    .nopc { display:block; }

}

.inner {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/*-------------------------------------------------------------
wrapper
-------------------------------------------------------------*/
#wrapper {
    background: url("../img/new-bg.jpg") no-repeat center center / cover;
    overflow: hidden;
}


/*-------------------------------------------------------------
main
-------------------------------------------------------------*/
#main {
    width: 1400px;
    max-width: 84vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    overflow: hidden;
}

.logo {
    width: 500px;
    max-width: 30vw;
    margin: clamp(0px, 3.5vw, 60px) 0;
}

@media screen and (max-width: 768px) {
    #main {
        max-width: 90%;
    }
    
    .logo {
        width: 460px;
        max-width: 84vw;
        margin: clamp(0px, 12vw, 60px) 0 clamp(0px, 10vw, 50px);
    }
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    .logo {
        max-width: 52.6dvh;
        margin: clamp(0px, 6.3dvh, 60px) 0;
    }
}

.menu_wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.holdings_menu {
    width: 1190px;
    max-width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(0px, 1.2vw, 20px);
}

.associates_menu {
    width: 788px;
    max-width: 46.5vw;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(0px, 1.2vw, 20px);
}

.note {
    width: 100%;
    font-size: clamp(15px, 1.2vw, 21px);
    font-weight: 500;
    line-height: 1.8em;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
}

@media screen and (max-width: 768px) {
    .holdings_menu {
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(0px, 5.2vw, 40px);
    }

    .associates_menu {
        width: 100%;
        max-width: 100%;
        margin-bottom: clamp(0px, 5.2vw, 40px);
    }

    .note {
        font-size: clamp(11px, 2.6vw, 20px);
    }
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    .holdings_menu {
        margin-bottom: clamp(0px, 2.1dvh, 20px);
    }

    .associates_menu {
        margin-bottom: clamp(0px, 2.1dvh, 20px);
    }

    .note {
        font-size: clamp(15px, 2.2dvh, 21px);
    }
}


/*-------------------------------------------------------------
menu
-------------------------------------------------------------*/
.box_style {
    height: clamp(0px, 5.3vw, 90px);
    font-size: clamp(0px, 1.8vw, 30px);
    font-weight: 900;
    letter-spacing: 0.05em;
    border-radius: clamp(5px, 0.8vw, 13px);
    display: block;
    margin-bottom: clamp(0px, 0.9vw, 15px);
    position: relative;
    overflow: hidden;
    background-color: var(--color-blue);
    color: #fff;
    transition: color 0.4s ease;
}

.box_style span {
    width: 100%;
    height: 100%;
    padding: 0 1.6em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.box_style span::before {
    content: "";
    width: calc(100% - 8px);
    height:  calc(100% - 8px);
    border: 1px solid #fff;
    border-radius: clamp(3px, 0.6vw, 10px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.associates_menu .box_style {
    background-color: #fff;
    color: var(--color-pink);
}

.associates_menu .box_style span::before {
    border-color: var(--color-pink);
}

a.box_style:hover {
    color: var(--color-blue);
}

a.box_style::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.5s ease;
    transition-property: transform;
    z-index: 0;
}

a.box_style:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

a.box_style span {
    padding-right: 2.5em;
}

a.box_style:hover span::before {
    border: 1px solid var(--color-blue);
    transition: all 0.4s ease;
}

a.box_style::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-top: solid 0.1em #fff;
    border-right: solid 0.1em #fff;
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    transition: all 0.4s ease;
}

a.box_style:hover::after {
    border-top: solid 0.1em var(--color-blue);
    border-right: solid 0.1em var(--color-blue);
    transition: all 0.4s ease;
}

@media screen and (max-width: 1200px) {
    .box_style span::before {
        width: calc(100% - 4px);
        height:  calc(100% - 4px);
    }
}

@media screen and (max-width: 768px) {
    .box_style {
        height: clamp(0px, 11.7vw, 90px);
        font-size: clamp(0px, 4.2vw, 32px);
        border-radius: clamp(5px, 1.7vw, 13px);
        margin-bottom: clamp(0px, 2.6vw, 20px);
    }
    
    .box_style span::before {
        border-radius: clamp(3px, 1.3vw, 10px);
    }
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    .box_style {
        height: clamp(0px, 9.5dvh, 90px);
        font-size: clamp(0px, 3.2dvh, 30px);
        border-radius: clamp(5px, 1.4dvh, 13px);
        margin-bottom: clamp(0px, 1.6dvh 15px);
    }
    
    .box_style span::before {
        border-radius: clamp(3px, 1.1dvh, 10px);
    }
}

.company_list {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0px, 0.6vw, 10px) clamp(0px, 1.25%, 17.5px);
}

.company_list li {
    width: clamp(0px, 32.5%, 385px);
    aspect-ratio: 385 / 65;
}

.company_list li .item {
    font-size: clamp(0px, 1.2vw, 20px);
    font-weight: bold;
    color: var(--color-blue);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: clamp(3px, 0.6vw, 10px);
}

.associates_menu .company_list {
    width: 905px;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: clamp(0px, 0.6vw, 10px) 0;
}

.associates_menu .company_list li {
    width: clamp(0px, 49%, 385px);
}

.associates_menu .company_list li .item {
    color: var(--color-pink);
}

.associates_menu .company_list li a {
    font-size: clamp(0px, 1.2vw, 20px);
    font-weight: bold;
    color: #fff;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--color-pink);
    border-radius: clamp(3px, 0.6vw, 10px);
    position: relative;
    overflow: hidden;
    transition: color 0.4s ease;
}

.associates_menu .company_list li a span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.associates_menu .company_list li a::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #fff;
    transform: scaleX(0);
    transform-origin: right;
    transition: all 0.4s ease;
    transition-property: transform;
    z-index: 0;
}

.associates_menu .company_list li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.associates_menu .company_list li a:hover {
    color: var(--color-pink);
}

.associates_menu .company_list li a span::after {
    content: "";
    width: 0.4em;
    height: 0.4em;
    border-top: solid 0.1em #fff;
    border-right: solid 0.1em #fff;
    position: absolute;
    right: 5%;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(45deg);
    transition: all 0.4s ease;
    z-index: 1;
}

.associates_menu .company_list li a:hover span::after {
    border-top: solid 0.1em var(--color-pink);
    border-right: solid 0.1em var(--color-pink);
    transition: all 0.4s ease;
}

.associates_menu .company_list li a::after {
    content: "";
    width: calc(100% - 6px);
    height:  calc(100% - 6px);
    border: 1px solid #fff;
    border-radius: clamp(2px, 0.5vw, 8px);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transition: all 0.4s ease;
}

.associates_menu .company_list li a:hover::after {
    border: 1px solid var(--color-pink);
    transition: all 0.4s ease;
}

@media screen and (max-width: 1200px) {
    .associates_menu .company_list li a::after {
        width: calc(100% - 4px);
        height:  calc(100% - 4px);
    }
}

@media screen and (max-width: 768px) {
    .company_list {
        width: 100%;
        gap: clamp(0px, 2vw, 15px) 0;
        
    }

    .company_list li {
        width: 90%;
        aspect-ratio: 385 / 45;
        margin-left: auto;
    }

    .company_list li .item {
        font-size: clamp(0px, 3.6vw, 28px);
    }
    
    .associates_menu .company_list {
        width: 100%;
        gap: clamp(0px, 2vw, 15px) 0;
    }

    .associates_menu .company_list li {
        width: 90%;
    }

    .associates_menu .company_list li a {
        font-size: clamp(0px, 3.6vw, 28px);
        border-radius: clamp(3px, 1.3vw, 10px);
    }

    .associates_menu .company_list li a::after {
        border-radius: clamp(2px, 1vw, 8px);
    }
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    .company_list {
        gap: clamp(0px, 1.1dvh, 10px) clamp(0px, 1.25%, 17.5px);
    }

    .company_list li {
        max-height: 6.8dvh;
    }

    .company_list li .item {
        font-size: clamp(0px, 2.1dvh, 20px);
        border-radius: clamp(3px, 1.1dvh, 10px);
        line-height: 1.1em;
    }

    .associates_menu .company_list {
        gap: clamp(0px, 1.1dvh, 10px) 0;
    }

    .associates_menu .company_list li a {
        font-size: clamp(0px, 2.1dvh, 20px);
        border-radius: clamp(3px, 1.1dvh, 10px);
        line-height: 1.1em;
    }

    .associates_menu .company_list li a::after {
        border-radius: clamp(2px, 0.8dvh, 8px);
    }
}


/*-------------------------------------------------------------
footer
-------------------------------------------------------------*/
#footer {
    width: 100%;
    position: relative;
    margin-top: auto;
}

#copyright {
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    padding: 3em 1em 2em;
}

#copyright small {
    font-size: 1em;
}

@media screen and (max-width: 768px) {
    #copyright {
        font-size: 11px;
    }
}

@media screen and (max-height: 950px) and (min-width: 769px) {
    #copyright {
        font-size: 1.2dvh;
        padding: 2em 1em 1em;
    }
}


/*-------------------------------------------------------------
animation
-------------------------------------------------------------*/
.fade_in_up {
    opacity: 0;
    transform: translateY(30px);
}

.animate {
    animation: fadeInUp 1s ease-out forwards;
}

.delay03 { animation-delay: 0.3s; }
.delay05 { animation-delay: 0.5s; }
.delay06 { animation-delay: 0.6s; }
.delay09 { animation-delay: 0.9s; }

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*-------------------------------------------------------------
print
-------------------------------------------------------------*/
@page {
    size: A4 portrait;
}

@media print {
    * {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    html, body {
        width: 1100px;
        height: auto;
        -webkit-print-color-adjust: exact;
        size: A4 landscape;
        page-break-after: auto;
    }
}