@charset "shift-jis";
/* --------------------------------------------------------------------
	Financial Academy

	Style Info: /event/220101/
-------------------------------------------------------------------- */
*{ box-sizing: border-box;}
body{
    overflow-x: hidden;
    font-size: 16px;
}
#container {
    letter-spacing: .05em;
}
img{
    max-width: 100%;
    height: auto;
}

.en{ font-family: 'Josefin Slab', serif;}
.serif{ font-family: 'Noto Serif JP', serif;}

.tac { text-align: center;}
.tar { text-align: right;}

.txt_bold{ font-weight: bold;}

.txt_s{ font-size: .8em;}
.txt_l{ font-size: 1.3em;}

.txt_orange { color: #EE764E;}
.txt_red { color: #ff0000;}
.txt_blue { color: #1c236d;}

.desc{
    font-size: 14px;
    text-align: center;
    line-height: 2;
    letter-spacing: .1em;
}
@media screen and (max-width: 599px) {
    .desc{ font-size: 12px;}
    .desc:not(.tac){ text-align: left;}
}

.marker{ background: linear-gradient(rgba(0,0,0,0) 30%, rgba(215,186,65,.2) 30%);}

.mb50 { margin-bottom: 60px;}
.mb60 { margin-bottom: 60px;}
.mb70 { margin-bottom: 70px;}
.ml10 { margin-left: 10px;}
.ml20 { margin-left: 20px;}
.ml35 { margin-left: 35px;}

.sp{ display: none;}
.tab{ display: none;}
.pc{ display: block;}
@media screen and (max-width: 999px) {
    .pc{ display: none;}
    .sp{ display: none;}
    .tab{ display: block;}
}
@media screen and (max-width: 599px) {
    .pc{ display: none;}
    .tab{ display: none;}
    .sp{ display: block;}
}

#contents{ padding: 0 0 5px 0;}

section h2{
    color: #1c236d;
    font-size: 18px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    margin-bottom: 1em;
}
section h2:not(.bd_none)::after{
    content: "";
    display: block;
    border-bottom: 3px solid #1c236d;
    width: 100px;
    margin: 20px auto 50px;
}
section h2 .txt_s{
    font-size: .7em;
    display: inline-block;
}
section h3{
    text-align: center;
    font-size: 23px;
}
section h3.line{
    position: relative;
    margin-bottom: 50px;
    color: #1c236d;
    font-weight: bold;
}
section h3.line::before,
section h3.line::after{
    content: "";
    width: 25%;
    border-top: 1px solid #1c236d;
    position: absolute;
    top: 50%;
}
section h3.line::before{ left: 0;}
section h3.line::after{ right: 0;}
.ttl_line{
    position: relative;
    margin-bottom: 50px;
    color: #1c236d;
    font-size: 1.5rem;
}

.bg-w{ background-color: #fff;}
.bg-brand{
    background-color: #1c236d;
    color: #fff;
}
.bg-lblue{ background-color: #dddee9;}
.bg-beige { background-color: #f3f3f2;}

/* カラーバー */
.colorbar_btm{
    padding-bottom: 10px;
    background-image: url(/img2016/common/topcolor.png);
    background-position: left bottom;
    background-size: 50% 10px;
    background-repeat: repeat-x;
}
@media screen and (max-width: 999px) {
    .colorbar_btm{ background-size: 100% 10px;}
}

/* ブロック下に矢印 */
.arw_btm{ position: relative;}
.arw_btm::after{
    content: "";
    border-top: 100px solid #fff;
    border-right: 50vw solid transparent;
    border-left: 50vw solid transparent;
    position: absolute;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
    z-index: 1;
}
.bg-brand.arw_btm::after{ border-top-color: #1c236d;}
.bg-lblue.arw_btm::after{ border-top-color: #dddee9;}
.bg-beige.arw_btm::after{ border-top-color: #f3f3f2;}
.arw_btm + *{ padding-top: 100px;}

@media screen and (max-width: 799px) {
    .arw_btm::after{
        border-top-width: 60px;
        bottom: -60px;
    }
    .arw_btm + *{ padding-top: 60px;}
}
@media screen and (max-width: 499px) {
    .arw_btm::after{
        border-top-width: 30px;
        bottom: -30px;
    }
    .arw_btm + *{ padding-top: 30px;}
}


.lead{ font-size: 18px;}

.caution{
    font-size: 12px;
    text-align: center;
}

section .inner{
    width: 89.5%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 0;
    position: relative;
}

#breadcrumbs{
    float: left;
    margin: 20px 0;
    font-size: .7rem;
}

.btn{
    border: 0;
    outline: 0;
    display: block;
    background-color: #e10e3f;
    border-radius: 5px;
    padding: 25px 40px;
    max-width:  500px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    position: relative;
    cursor: pointer;
    transition: all .3s;
}
.btn:link,
.btn:visited,
.btn:active,
.btn:hover{
    color: #fff;
    text-decoration: none;
}
.btn:hover{ opacity: .8;}
.btn::after{
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    font-size: 25px;
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* タブレット以下 */
@media screen and (max-width: 1024px) {
    #head2{ height: 85px !important;}

    #container{
        margin-top: 80px;
        overflow: hidden;
        width: 100%;
    }
    .lead{ font-size: 20px;}
}

/* スマホ未満 */
@media screen and (min-width: 600px) {
    .ttl_line::before,
    .ttl_line::after{
        content: "";
        width: 25%;
        border-top: 1px solid #1c236d;
        position: absolute;
        top: 50%;
    }
    .ttl_line::before{ left: 0;}
    .ttl_line::after{ right: 0;}
}

/* スマホ */
@media screen and (max-width: 599px) {
    body{ font-size: 14px;}

    .snsBtn { margin: 0}
    #breadcrumbs{ display: none;}
    
    .wrap_btn > div + div{ margin-top: 30px;}

    .bg_check_red,
    .bg_check_gold{ background-size: 38px;}

    .caution{
        font-size: 9px;
        text-align: left;
        text-indent: -1em;
        padding-left: 1em;
    }

    section .inner{ padding: 30px 0;}

    section h2:not(.bd_none)::after {
        width: 80px;
        margin: 15px auto 40px;
    }

    section h3{ font-size: 1.2rem}
    .ttl_line{ margin-bottom: 30px;}
    .lead{ font-size: 15px;}

    .btn{
        font-size: 12px;
        padding: 15px;
    }
}

/* #breadcrumbs + .snsBtn 上書き */
.headerLast{ display: flex;}
#breadcrumbs{
    float: none;
    flex: 1 1 auto;
    margin-top: 0;
}
#breadcrumbs ol{ width: max-content;}

div.snsBtn{
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-right: 0;
}
div.snsBtn > *{ margin-left: .5em;}


/* ==========
    .mv
========== */
.mv {
    background: url(/anniversary_20th/img/mv.png?220125) center/contain no-repeat;
    padding-top: 42%;
    position: relative;
}
.mv > *{
    position: absolute;
    top: 0;
    color: transparent;
}
@media screen and (min-width: 1000px) {
    .mv{
        padding-top: 335px;
    }
}
@media screen and (max-width: 599px) {
    .mv {
        padding-top: 67.25%;
        background-image: url(/anniversary_20th/img/mv_sp.png?220125);
    }
}


/* ==========
  .top_msg
========== */
.top_msg .ttl{ margin-bottom: 50px;}

/* ==========
  .project
========== */
.project{ background-color: #dfdbdb;}
.project .inner{ padding: 35px 0 30px;}

.project .ttl{ font-size: 36px;}

.list_project li a{
    color: inherit;
    text-decoration: none;

}
.list_project .soon a{ pointer-events: none;}
.list_project li .date{
    font-size: 14px;
    margin: 1em 0;
}
.list_project li .ttl{
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    text-align: left;
}

@media screen and (max-width: 599px) {
    .project .inner{ padding: 25px 0;}

    .project .ttl{ font-size: 27px;}
    .list_project li .date,
    .list_project li .ttl{ font-size: 12px;}
}

/* .list_project_slick */
.list_project_slick{ padding: 0 0 10px;}
.list_project_slick.slick-dotted.slick-slider { margin-bottom: 50px;}
.list_project_slick.slick-initialized .slick-slide{
  padding: 20px;
  margin: 0 3px;
}
.list_project_slick .slick-dots li button:before{
    font-family: inherit;
    content: "\025cf";
    font-size: 15px;
    color: #fff;
    opacity: 1;
}
.list_project_slick .slick-dots li.slick-active button:before{ color: #1c236d;}
.list_project_slick .slick-prev {
    left: -20px;
    z-index: 10;
}
.list_project_slick .slick-prev::before{
    position: absolute;
    left: 5px;
    content: "";
    color: #1c236d;
    border-left: 2px solid;
    border-bottom: 2px solid;
    width: 10px;
    height: 10px;
    padding: 4px;
    transform: rotate(45deg);
    display: block;
}
.list_project_slick .slick-next { right: -20px;}
.list_project_slick .slick-next::before{
    position: absolute;
    right: 5px;
    content: "";
    color: #1c236d;
    border-right: 2px solid;
    border-top: 2px solid;
    width: 10px;
    height: 10px;
    padding: 4px;
    transform: rotate(45deg);
    display: block;
}

@media screen and (max-width: 599px) {
    .list_project_slick { padding: 0;}
    .list_project_slick .slick-prev{ left: -15px;}
    .list_project_slick .slick-next{ right: -15px;}
    .list_project_slick .slick-prev::before,
    .list_project_slick .slick-next::before{ padding: 4px;}
    .list_project_slick.slick-initialized .slick-slide{ padding: 20px 15px;}
}

/* ==========
  .history
========== */
.history .inner{
    max-width: 700px;
}
.history .main_ttl{
    color: #fff;
    font-size: 50px;
}
.history .main_ttl .en{
    display: block;
    font-size: 50px;
    letter-spacing: .1em;
    line-height: 1;
}
.history .main_ttl .ja{
    display: block;
    font-size: 12px;
    letter-spacing: .4em;
}

.history .block_ttl .en{
    display: block;
    font-size: 150px;
    font-weight: 300;
}
.history .block_ttl .en::before,
.history .block_ttl .en::after{
    content: "";
    display: inline-block;
    vertical-align: -.2em;
    width: 35px;
    height: 1em;
    border: 2px solid;
}
.history .block_ttl .en::before{
    border-right-width: 0;
    margin-right: 60px;
}
.history .block_ttl .en::after{
    border-left-width: 0;
    margin-left: 60px;
}

.history .block_ttl .serif{
    display: block;
    font-size: 40px;
    letter-spacing: .1em;
}
.history .block .catch{
    max-width: 600px;
    margin: 80px auto;
}
.history .block p{
    line-height: 2;
}

.history .block.ending{
    color: #1c236d;
}

@media screen and (min-width: 600px) {
    .history .block.ending .desc{ font-size: 20px;}
}

@media screen and (max-width: 599px) {
    .history .main_ttl{ font-size: 18px;}
    .history .main_ttl .en{ font-size: 27px;}

    .history .block_ttl .en{ font-size: 100px;}
    .history .block_ttl .en::before,
    .history .block_ttl .en::after{ width: 30px;}
    .history .block_ttl .en::before{ margin-right: 0;}
    .history .block_ttl .en::after{ margin-left: 0;}
    .history .block_ttl .serif{ font-size: 18px;}

    .history .block .catch{ margin: 40px auto;}
    .history .block p{ font-size: 12px;}
}

/* 年表 */
.timetable{ position: relative;}
.history .timetable .inner{ max-width: 680px;}
.timetable::before{
    content: "";
    width: 5px;
    height: calc(100% - 5px);
    background-color: #1c236d;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}
.timetable::after{
    content: "";
    border-top: 31px solid #1c236d;
    border-right: 26px solid transparent;
    border-left: 26px solid transparent;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.timetable .ttl_year{
    color: #1c236d;
    font-size: 55px;
    text-align: left;
}
.timetable .ttl_year:not(:first-child){
    margin-top: 100px;
}

.timetable .box{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,.1);
    padding: 25px;
    position: relative;
    display: flex;
}
.timetable .box::before{
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background-color: #fff;
    border: 3px solid #1c236d;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    z-index: 1;
}
.timetable .box.strong{
    border: 3px solid #1c236d;
    padding-top: 40px;
}
.timetable .box.strong::after{
    content: "";
    width: 100%;
    height: 15px;
    background-size: auto;
    background-image: repeating-linear-gradient(136deg, transparent, transparent 2px, #d2d3e1 2px, #d2d3e1 4px );
    position: absolute;
    left: 0;
    top: 0;
}
.timetable .box + .box{ margin-top: 50px;}

.timetable .box .txt{
    flex: 1 1 auto;
}
.timetable .box .date{
    color: #999;
    border-bottom: 1px solid;
    padding-bottom: 1em;
    margin-bottom: 1.5em;
}
.timetable .box .ttl{
    color: #1c236d;
    font-weight: 500;
    margin-bottom: 1.5em;
}
.timetable .box.strong .ttl{
    font-size: 20px;
}
.timetable .box .more{
    display: block;
    color: #53b0ce;
    text-align: right;
    width: fit-content;
    margin: 0 0 0 auto;
}
.timetable .box .more::after{
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    border-top: 2px solid;
    border-right: 2px solid;
    transform: rotate(45deg);
    margin-left: .5em;
}

@media screen and (min-width: 600px) {
    .timetable .box .photo{
        flex: 0 0 calc(40% + 25px);
        padding-left: 25px;
        background: #fff;
    }
    .timetable .box.strong .photo{
        flex: 0 0 calc(50% + 25px);
    }
}
@media screen and (max-width: 599px) {
    .timetable::after{
        border-width: 15px 12px 0 12px;
    }
    
    .timetable .box{
        flex-direction: column;
        padding: 15px;
    }
    .timetable .box + .box { margin-top: 35px;}
    .timetable .box.strong{ padding-top: 35px;}

    .timetable .box .photo{ margin-top: 18px;}

    .timetable .ttl_year:not(:first-child) {
        margin-top: 45px;
    }

    .timetable .box .date{ font-size: 16px;}
    .timetable .box .ttl,
    .timetable .box.strong .ttl{ font-size: 14px;}
}

/* 累計受講生数 */
.timetable .total{
    width: 50%;
    margin: 0 -85px 0 auto;
    color: #1c236d;
    text-align: right;
    line-height: 1;
    padding-top: 25px;
    position: relative;
}
.timetable .total .en{
    font-size: 60px;
    padding-left: 5px;
}
.timetable .total::before{
    content: "";
    width: 15px;
    height: 15px;
    background-color: #1c236d;
    border-radius: 100%;
    position: absolute;
    left: -93px;
    top: -6px;
}
.timetable .total::after{
    content: "";
    width: 100%;
    height: 100%;
    border-bottom: 1px solid;
    border-left: 1px solid;
    transform: skewX(45deg);
    position: absolute;
    left: -45px;
    top: 0;
}
@media screen and (max-width: 879px) {
    .timetable .total {
        text-align: left;
        padding-left: 23px;
        margin-right: 0;
    }
    .timetable .total .en {
        font-size: 37px;
        padding-left: 0;
        letter-spacing: -.03em;
    }
    .timetable .total::before{
        left: -8px;
    }
    .timetable .total::after {
        width: 85%;
        transform: skewX(10deg);
        left: 8px;
    }
}

/* 年表のモーダル */
.modal{
    padding: 0;
    max-width: 850px;
}
.modal .flex{ display: flex;}

.modal .txt{
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
}
.modal .caption{
    color: #1c236d;
    font-size: 12px;
    margin-bottom: 60px;
}
.modal .caption .year{
    display: block;
    font-size: 60px;
    line-height: 1;
}
.modal .ttl{
    color: #1c236d;
    font-size: 18px;
    font-weight: 500;
    border-bottom: 1px solid #999;
    padding-bottom: 1em;
    margin-bottom: 1em;
}
.modal .desc{
    text-align: left;
    margin-bottom: 2em;
}
.modal .btn{
    background-color: #5e9fc1;
    font-size: 16px;
    padding: 10px 50px;
    max-width: 355px;
    margin-top: auto;
}
.modal .btn::after{
    right: 1em;
}

.modal .img{
    flex: 0 0 50%;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
}
.modal .img > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blocker{ z-index: 503;}
.modal a.close-modal{
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22layer%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2030%2030%22%20style%3D%22enable-background%3Anew%200%200%2030%2030%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%20.st0%7Bfill%3A%23FFFFFF%3B%7D%20.st1%7Bfill%3A%23CCCCCC%3B%7D%3C%2Fstyle%3E%3Cg%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2215%22%20cy%3D%2215%22%20r%3D%2214.5%22%2F%3E%20%3Cpath%20class%3D%22st1%22%20d%3D%22M15%2C1c7.7%2C0%2C14%2C6.3%2C14%2C14s-6.3%2C14-14%2C14S1%2C22.7%2C1%2C15S7.3%2C1%2C15%2C1%20M15%2C0C6.7%2C0%2C0%2C6.7%2C0%2C15s6.7%2C15%2C15%2C15%20s15-6.7%2C15-15S23.3%2C0%2C15%2C0L15%2C0z%22%2F%3E%3C%2Fg%3E%3Cg%3E%20%3Crect%20x%3D%226.9%22%20y%3D%2213.8%22%20transform%3D%22matrix(0.7071%20-0.7071%200.7071%200.7071%20-6.2132%2015)%22%20width%3D%2216.2%22%20height%3D%222.4%22%2F%3E%3C%2Fg%3E%3Cg%3E%20%3Crect%20x%3D%2213.8%22%20y%3D%226.9%22%20transform%3D%22matrix(0.7071%20-0.7071%200.7071%200.7071%20-6.2132%2015)%22%20width%3D%222.4%22%20height%3D%2216.2%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
@media screen and (max-width: 599px) {
    .modal .flex{ flex-direction: column;}

    .modal .txt{ padding: 18px;}
    .modal .caption{ margin-bottom: 30px;}
    .modal .ttl{ font-size: 16px;}
    .modal .desc{ font-size: 12px;}

    .modal .img{
        order: -1;
        border-radius: 8px 8px 0 0;
        padding-top: 60%;
        position: relative;
    }
    .modal .img > img{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: auto;
    }
}


/* ==========
  .parallelincome
========== */
.parallelincome{
    background-color: #f5f5f8;
    padding-top: 100px;
    padding-bottom: 110px;
}
.parallelincome .inner{ padding-bottom: 0;}
.parallelincome .ttl{
    color: #1c236d;
    font-size: 30px;
    font-weight: bold;
    line-height: 2;
    text-align: center;
    margin-bottom: 2em;
}
.parallelincome .ttl .bg{
    color: #fff;
    background-color: #1c236d;
}

.parallelincome .school_name{
    background: url(/anniversary_20th/img/parallelincome/img.png)center top/contain no-repeat;
    padding-top: 46.2%;
    color: inherit;
    font-size: 24px;
    white-space: nowrap;
    position: relative;
}
.parallelincome .school_name > span{
    position: absolute;
    top: 23.5%;
    left: 50%;
    transform: translateX(-50%);
}
.parallelincome .school_name .en{
    display: block;
    font-family: 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 50px;
    line-height: 1;
}
.parallelincome .btn{
    width: 89.5%;
}

.parallelincome.arw_btm::after{ border-top-color: #f5f5f8;}

@media screen and (max-width: 779px) {
    .parallelincome{ padding-top: 60px;}
    .parallelincome .school_name{ font-size: 20px;}
    .parallelincome .school_name .en{ font-size: 38px;}
}

@media screen and (max-width: 599px) {
    .parallelincome{ padding-bottom: 55px;}

    .parallelincome .ttl{ font-size: 15px;}

    .parallelincome .school_name{
        background-image: url(/anniversary_20th/img/parallelincome/img_sp.png);
        padding-top: 97.6%;
        font-size: 15px;
    }
    .parallelincome .school_name > span{
        top: 38.35%;
    }
    .parallelincome .school_name .en{
        font-size: 32px;
    }
}
@media screen and (max-width: 499px) {
    .parallelincome{ padding-top: 30px;}
}

/* ==========
  .tmtl
========== */
.tmtl h2 img{
    display: block;
    margin: auto;
    max-width: 94%;
}
.tmtl h2 .ttl{
    display: block;
    margin-top: 1em;
}