@charset "shift-jis";
*, *::before, *::after{ box-sizing: border-box;}

html { font-size: 10px;}
body{ font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", sans-serif;}

a[href^="tel:"] { pointer-events: none; }

p { margin-bottom: 1em; }

img { max-width: 100%; }

.mb10{ margin-bottom: 10px !important;}

.bg-beige { background: #f3f3f2; }
.bg-d-blue { background: #1c236d; }

#page {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    text-align: center;
    overflow: hidden; }

section {
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0; }
section article {
    width: 100%;
    max-width: 1000px;
    padding: 65px 5%;
    margin: 0 auto;
    position: relative;
    text-align: left;
}
section h2 {
    font-size: 32px;
/*    letter-spacing: .15em;*/
    font-weight: normal;
    line-height: 1.7;
    color: #1c236d;
    margin-bottom: 50px;
}
section h3 {
    font-size: 27px;
    font-size: 2.7rem;
    letter-spacing: .15em;
    font-weight: normal;
    line-height: 1.7; }
section h4 {
    font-size: 20px;
    font-size: 2.0rem;
    letter-spacing: .15em;
    font-weight: normal;
    line-height: 1.7; }
section p {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: .05em; }
section p.lead {
    text-align: center; }

.btn a {
    display: block;
    color: #fff;
    font-size: 30px;
    line-height: 1.3;
    width: 490px;
    padding: 12px 0;
    margin: 0 auto 75px;
    position: relative;
    text-decoration: none;
    text-align: center;
}
.btn .text_s{ font-size: .8em;}
.btn a.orange {
    background: #eb5421; }
.btn a.d_blue {
    background: #1c236d; }
.btn a.arrow01::after {
    content: "";
    background: url(/images/common/arrow.svg) left center/25px no-repeat;
    padding: 14px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 12px; }

.mv {
    width: 100%;
    margin: 0 auto;
}

/* .grid */
.grid{
    display: grid;
    gap: 0 8%;
}
.grid .figure img{
    border: 1px solid #ccc;
}
.grid .figcaption p{
    border-bottom: 1px solid #1c246c;
    font-size: 17px;
    line-height: 1.8;
    padding-bottom: 5px;
    margin-bottom: 0;
    position: relative;
}

/* .mook2017 .grid */
.mook2017 .grid{
    grid-template-columns: 30% auto;
    margin-top: 30px;
}
.mook2017 .grid .link{ grid-column: 2/3;}
.mook2017 .grid .figcaption{ align-self: end;}

/* .mook2018 .grid
   .mook2020 .grid */
.mook2018 .grid,
.mook2020 .grid{
    grid-template-columns: auto 30%;
}
.mook2018 .grid .figure,
.mook2020 .grid .figure{
    grid-row: 1/3;
    grid-column: 2/3;
    display: flex;
    margin: auto 0 0;
    flex-direction: column;
}
.mook2018 .grid .figure img,
.mook2020 .grid .figure img{
    margin: auto 0 20px;
}
.mook2018 .grid .figcaption,
.mook2020 .grid .figcaption{
    margin-top: 3em;
}
.mook2018 .figcaption p::after,
.mook2020 .figcaption p::after{
    content: "";
    display: block;
    border: 1px solid #1c256b;
    border-right: none;
    border-bottom: none;
    border-left: none;
    width: 120px;
    transform: rotate(-45deg);
    position: absolute;
    bottom: 41px;
    right: -102px;
}

/* .mook2019 .grid */
.mook2019 .grid{
    grid-template-columns: 30% auto;
}
.mook2019 .grid .figure{
    grid-row: 1/3;
    grid-column: 1/2;
    display: flex;
    margin: auto 0 0;
    flex-direction: column;
}
.mook2019 .grid .figure img{
    margin: auto 0 20px;
}
.mook2019 .grid .figcaption{
    margin-top: 3em;
}
.mook2019 .figcaption p::after,
.mook2017 .figcaption p::after{
    content: "";
    display: block;
    border: 1px solid #1c256b;
    border-right: none;
    border-bottom: none;
    border-left: none;
    width: 143px;
    transform: rotate(45deg);
    position: absolute;
    bottom: 50px;
    left: -122px;
}

/* .link */
a.link{
    display: block;
    width: fit-content;
    margin: 0 auto 0 0;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    padding-top: 20px;
}
a.link:hover{
    text-decoration: none;
    opacity: .7;
}
a.link span{
    border-bottom: 1px solid #ea5520;
    text-align: left;
    position: relative;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 5px;
}
a.link span::after{
    content: "";
    display: block;
    border: 1px solid #ea5520;
    border-right: none;
    border-bottom: none;
    border-left: none;
    width: 25px;
    transform: rotate(60deg);
    position: absolute;
    bottom: 10px;
    right: -5px;
}

/* .mission */
.mission h3{
    color: #ea5520;
    text-align: center;
    font-size: 25px;
    margin-bottom: .5em;
}
.mission .illust {
    padding-right: 50%;
    margin-bottom: 100px;
    position: relative;
}
.mission .illust::after {
    content: "";
    width: 47%;
    padding-top: 34.5%;
    background: url(/info/event/brutus2018/images/img03.jpg) center/contain no-repeat;
    position: absolute;
    right: 0;
    top: -120px;
}

/* .amazon */
.amazon{
    background: #f3f3f2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 45px 35px 35px;
    width: 85%;
    margin: 80px auto 0;
}
.bg-beige .amazon{ background: #fff;}
.amazon img{
    width: 132px;
    flex: 0 0 132px;
}
.amazon > div{
    flex: 1 1 auto;
    margin-left: 25px;
}
.mission .amazon p{
    width: 100%;
    font-size: 17px;
    line-height: 2;
    margin: 0 auto 20px;
}
.amazon .btn a{
    display: inline-block;
    width: 90%;
    max-width: 300px;
    font-size: 19px;
    margin-bottom: 0;
    letter-spacing: .05em;
}
.amazon .btn a.arrow01::after{
    background: url(/images/common/arrow.svg) right center/18px no-repeat;
}
.amazon .btn::after {
    content: url(/images/info/ico_blank.png);
    margin-left: 5px;
    display: inline-block;
}

@media screen and (min-width: 1025px) {
    .pc { display: block !important; }
    .tab { display: none; }
    .sp { display: none; }
}

@media screen and (min-width: 600px) and (max-width: 1024px) {
    .pc { display: none; }
    .tab { display: block !important; }
    .sp { display: none; }
}

@media screen and (max-width: 1024px) {
    .amazon > div{ flex-basis: 55%;}
}

@media screen and (max-width: 767px) {
    .mook2018 .grid > div:not([class]),
    .mook2019 .grid > div:not([class]),
    .mook2020 .grid > div:not([class]){
        grid-column: 1/3;
        grid-row: 1/2;
    }
    .mook2018 .grid .figure,
    .mook2019 .grid .figure,
    .mook2020 .grid .figure{
        grid-row: 2/3;
    }
    .mook2018 .grid .figcaption,
    .mook2019 .grid .figcaption,
    .mook2020 .grid .figcaption{
        align-self: end;
    }

    .mission .illust {
        background: url(/info/event/brutus2018/images/img03.jpg) center bottom/85% no-repeat;
        padding: 0 0 50% 0;
        margin-bottom: 20px;
    }
    .mission .illust::after { content: none;}
}

@media screen and (max-width: 599px) {
    html { font-size: 8px;}

    .pc { display: none; }
    .tab { display: none; }
    .sp { display: block !important; }

    a[href^="tel:"] { pointer-events: visible; }

    section article { padding: 40px 5%;}
    section h2 {
        font-size: 21px;
        font-size: 1.95rem;
        margin-bottom: 25px;
        text-align: center;
    }
    section h2::after {
        width: 50px;
        margin: 10px auto 15px; }
    section h3 {
        font-size: 21px;
        font-size: 2.1rem; }
    section h4 {
        font-size: 15px;
        font-size: 1.5rem; }
    section p {
        font-size: 13px;
        font-size: 1.3rem;
        line-height: 1.5; }
    section p.lead{ font-size: 1.6rem;}

    .btn a {
        width: 100%;
        padding: 10px 0;
        margin: 0 auto 30px;
        font-size: 2em;
    }
    .btn a.arrow01::after{
        background:  url(/images/common/arrow.svg) left center/17px no-repeat;
        right: 5px;
    }

    .grid .figcaption p{ font-size: 14px;}

    .mook2018 .figcaption p::after,
    .mook2020 .figcaption p::after{
        width: 40px;
        bottom: 13px;
        right: -34px;
    }
    .mook2019 .figcaption p::after,
    .mook2017 .figcaption p::after{
        width: 40px;
        bottom: 13px;
        left: -34px;
    }

    a.link {
        text-align: left;
        margin-left: 0;
    }

    .mission p{ margin-bottom: 30px;}
    .mission h3{ font-size: 15px;}

    .amazon{
        width: 100%;
        padding: 15px 10px;
        margin-top: 30px;
    }
    .amazon > div{ margin-left: 3%;}
    .mission .amazon p{ font-size: inherit;}
    .amazon .btn a{
        width: 85%;
        font-size: 11px;
    }
    .amazon .btn a.arrow01::after{ background: url(/images/common/arrow.svg) right center/13px no-repeat;}
}