/* ##### index ##### */

/* ## main ## */
[class^="index_boxMain"] {
    width: 100%;
    max-height: 600px;
    overflow: visible;
}

.index_mainbox {
    background: url(../images/index/top_main_bg.png) bottom repeat-x;
    background-size: auto 55px;
}
.index_maininner {
    position: relative;
}
.index_boxMainCatch {
    font-weight: bold;
    padding-right: 5em;
    background: url(../images/common/com_char_cir-hachi.png) right bottom no-repeat;
    background-size: 6em auto;
    padding-top: var(--gap_narrow2);
    padding-bottom: var(--gap_minimum);
    width: 600px;
    margin: auto;
    font-size: var(--font_large);
}
.index_boxMainBtns {
    display: flex;
    position: relative;
    top: 1.5rem;
    z-index: 2;
}
.index_boxMainChar {
    flex: 1;
}
.index_mainChar {
    display: block;
    position: relative;
    left: -2rem;
}
.index_wrapMainBtns {
    width: 25rem;
}
.index_mainNote {
    font-size: var(--font_small);
    text-align: center;
    padding-bottom: var(--gap_minimum);
}
.index_mainWrapBtn {
    padding-top: 0;
    padding-bottom: var(--gap_narrow2);
}

/* ## banners ## */
[class^="index_boxBanner"] {
    background-color: var(--subcolor1);
    width: 100%;
    height: clamp(180px, 35vw, 260px);
    position: relative;
    z-index: 1;
    margin-bottom: var(--gap_wide);
    padding-top: 70px;
}
[class^="index_wrapBanner"] {
    width: 100%;
    max-width: 768px;
    margin: auto;
}
[class^="index_bannerbox"] {
    width: 54vw!important;
    max-width: 414px;
    padding: 0 20px;
}
.index_bannerlink {
    display: block;
    border: 0.3rem solid var(--white);
    border-radius: 0.75rem;
    overflow: hidden;
}
[class^="index_wrapBanner"] [class^="com_slickArr-prev"] { left: 170px; }
[class^="index_wrapBanner"] [class^="com_slickArr-next"] { right: 170px; }


/* ## ai eight ## */
[class^="index_boxGlidAieight"] {
    display: flex;
    flex-wrap: wrap;
}
[class^="index_boxGlidAieight"] [class^="index_wrapAieight"] {
    width: 50%!important;
    max-width: 100%;
}


[class^="index_boxAieight"] {
    width: 84vw;
    max-width: 440px;
    margin: auto;
}
[class^="index_wrapAieight"] {
    width: 84vw!important;
    max-width: 440px;
    position: relative;
}
[class*="index_aiToday"]::after{
    content: "";
    width: 5rem;
    height: 5rem;
    display: block;
    background: url(../images/common/com_today.png) center no-repeat;
    background-size: contain;
    position: absolute;
    top: 3.5rem;
    left: -0;
}

[class^="index_aieight_day"] {
    text-align: center;
    font-weight: bold;
    font-size: var(--font_xxlarge);
    background: url(../images/common/com_ribbon.png) center no-repeat;
    background-size: contain;
    padding-bottom: 0.5em;
}
.index_aieight_cont {
    display: flex;
}
[class^="index_boxGlidAieight"] [class^="index_wrapAieight"] .index_aieight_cont {
    padding: 0 1rem;
}
.index_aieight_char,
.index_aieight_supporter {
    flex: 1;
    padding: 4rem 1.5rem;
}
.index_aieight_char a,
.index_aieight_supporter a {
    text-decoration: none;
}
.index_aieight_photo {
    display: block;
    width: 96%;
    height: 0;
    padding-top: 96%;
    background: center no-repeat;
    background-size: cover;
    border: 1px solid var(--linegray);
    border-radius: 50%;
}
.index_aieight_name {
    display: block;
    text-align: center;
    padding: 0.5em 0;
    font-weight: bold;
    color: var(--txt_basiccolor);
}
[class^="index_aieight_sns"] {
    text-align: center;
    font-size: var(--font_xsmall);
    color: var(--white);
    display: block;
    font-weight: normal;
    border-radius: 2em;
    line-height: 1;
    padding: 0.75em 0.5em 0.75em 2em;
    letter-spacing: -0.02em;
}
[class^="index_aieight_sns"] + [class^="index_aieight_sns"] { margin-top:0.25em; }
[class*="-sns_x"] {
    background: 0.75em center no-repeat var(--sns_x);
    background-image: url(../images/common/xlogo-w.png);
    background-size: 1em;
}
[class*="-sns_link"] {
    background: 0.75em center no-repeat var(--sns_link);
    background-image: url(../images/common/icon_link.png);
    background-size: 1em;
}
[class*="-sns_insta"] {
    background: 0.75em center no-repeat var(--sns_insta);
    background-image: url(../images/common/instalogo-w.png);
    background-size: 1em;
}


[class^="index_boxAieight"] [class^="com_slickArr-prev"] { left: -1.25rem; }
[class^="index_boxAieight"] [class^="com_slickArr-next"] { right: -1.25rem; }

/* ########## */
/* responsive */
/* ########## */

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

/* ##### index ##### */
/* ## main ## */
.index_boxMainCatch {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
    max-width: 440px;
    width: 100%;
    margin: auto;
    position: relative;
    font-size: var(--font_normal);
}
.index_boxMainChar {
    padding-top: 3rem;
}
.index_mainChar {
    left: -0.75rem;
}
.index_boxMainBtns {
    max-width: 440px;
    margin: auto;
}
.index_wrapMainBtns {
    width: 16rem;
    padding-bottom: var(--gap_narrow);
}
.index_mainWrapBtn {
    padding-bottom: var(--gap_minimum);
}
.index_mainNote {
    padding-bottom: 0.5rem;
}

/* ## banners ## */
[class^="index_boxBanner"] {
    padding-top: 40px;
}
[class^="index_wrapBanner"] {
    margin: auto;
}

[class^="index_wrapBanner"] [class^="com_slickArr-prev"] { left: 22vw; }
[class^="index_wrapBanner"] [class^="com_slickArr-next"] { right: 22vw; }

/* ## ai eight ## */
[class^="index_boxGlidAieight"] [class^="index_wrapAieight"] {
    width: 100%!important;
    padding: 2rem 0;
}

[class^="index_wrapAieight"] {
    max-width: 360px;
}
[class*="index_aiToday"]::after {
    top: 1rem;
}

}


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

/* ##### index ##### */
/* ## banners ## */
[class^="index_bannerbox"] {
    width: 300px!important;
}

[class^="index_wrapBanner"] [class^="com_slickArr-prev"] { left: calc((100vw - 300px) / 2); }
[class^="index_wrapBanner"] [class^="com_slickArr-next"] { right: calc((100vw - 300px) / 2); }


}