main{ padding: 50px 0 0;}
.cp{ margin: 0 calc(50% - 50vw); width: 100vw;}
.member{ padding: 100px 0 0; color: #646464; line-height: 1.85;}
.member a{ color: #646464;}

@media screen and (max-width: 1024px){
    main{ padding: 0;}
    .member{ padding: 50px 0 0; font-size: 1.4rem;}
}

.member .sec0 h2{ color: #007CB7; text-align: center; font-weight: 700; font-size: 2.4rem;}
.member nav{ padding: 35px 0 0;}
.member nav ul{ display: flex; justify-content: center;}
.member nav ul > li{ padding: 0 30px;}
.member nav a{ display: flex; width: 286px; height: 70px; border: 2px solid #E6E6E6; color: #007CB7; justify-content: center; align-items: center;}
.member nav i{ margin: 0 1em 0 0;}
.member nav .ico1{ width: 35px;}
.member nav .ico2{ width: 36px;}
.member nav .ico3{ width: 40px;}

@media screen and (max-width: 1024px){
    .member .sec0 h2{ font-size: 2rem;}
    .member nav{ padding: 15px 30px 0 !important;}
    .member nav ul{flex-direction: column;  margin: 30px auto 0; border-top: 1px solid #E6E6E6;}
    .member nav ul > li{ padding: 0; border-bottom: 1px solid #E6E6E6;}
    .member nav a{ padding: 0 30px; width: 100%; height: 60px; border: none; justify-content: flex-start;}
    .member nav .ico1{ width: 8vw;}
    .member nav .ico2{ width: 8vw;}
    .member nav .ico3{ width: 8vw;}
}

.sec1{ padding: 200px 0; border-top: 1px solid #707070; text-align: center;}
.sec1s{ border: none;}
.sec1ss{ padding: 0 0 200px; border: none;}
.sec1bg{ margin: 0 calc(50% - 50vw); padding: 200px calc(50vw - 50%); width: 100vw; border: none;  background: #D4EBF7;}

@media screen and (max-width: 1024px){
    .sec1{ padding: 100px 0;}
    .sec1ss{ padding: 0 0 100px; border: none;}
    .sec1bg{ padding: 100px 30px;}
}

.sec1 h2{ color: #007CB7; font-weight: 700; font-size: 2.4rem;}
.sec1 .list-exp2 + h2{ margin: 175px 0 0;}
.sec1 h3{ display: flex; flex-direction: column; color: #007CB7; letter-spacing: .3em; font-size: 1.6rem; line-height: 1; align-items: center;}
.sec1 h3 .ico1{ width: 52px;}
.sec1 h3 .ico2{ width: 81px;}
.sec1 h3 .ico3{ width: 68px;}
.sec1 h3 span{ display: block; padding: 30px 0 20px; letter-spacing: .17em; font-weight: 600; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .sec1 h2{ font-size: 2rem;}
    .sec1 .list-exp2 + h2{ margin: 100px 0 0;}
    .sec1 h3{ font-size: 1.4rem;}
    .sec1 h3 .ico1{ width: auto; height: 40px;}
    .sec1 h3 .ico2{ width: auto; height: 40px;}
    .sec1 h3 .ico3{ width: auto; height: 40px;}
    .sec1 h3 i img{ width: auto; height: 100%;}
    .sec1 h3 span{ padding: 15px 0 10px; font-size: 2.4rem;}
}

.sec1 .lead{ margin: 100px 0 0; color: #007CB7; font-weight: 600; font-size: 2.4rem;}
.sec1 .lead span{ display: inline; border-bottom: 1px solid;}
.sec1ss .lead{ font-size: 2rem;}

@media screen and (max-width: 1024px){
    .sec1 .lead{ margin: 50px 0 0; font-size: 2rem;}
    .sec1 p.lead,
    .sec1ss .lead{ padding: 0 30px; text-align: left; font-size: 1.6rem;}
}

.sec1 p{ margin: 35px 0 0;}
.sec1 figure{ margin: 40px 0 0;}
.sec1 table{ margin: 50px auto 0; width: 850px;}
.sec1 table th{ padding: 15px 0; border: 1px solid #707070; background: #F0F0F0; text-align: center;}
.sec1 table th.no{ border: none; background: none;}
.sec1 table thead tr th:nth-child(2){ background: #D4EBF7;}
.sec1 table thead tr th:nth-child(4){ background: #D2BE82;}
.sec1 table thead tr th:nth-child(5){ background: #DCD2DC;}
.sec1 table td{ padding: 20px; width: 20%; border: 1px solid #707070; text-align: center; font-size: 3rem; line-height: 1.5;}
.sec1 table strong{ font-weight: 500; font-size: 6rem;}
.sec1 table span{ display: block; font-size: 1.4rem;}
.sec1 table span small{display: block;  margin: .5em 0 0; line-height: 1.5;}

@media screen and (max-width: 1024px){
    .sec1 p{ margin: 15px 0 0;}
    .sec1 p.lead + p,
    .sec1ss .lead + p{ margin: 15px 0 0; padding: 0 30px; text-align: left;}
    .sec1 p.lead + p.lead,
    .sec1ss .lead + .lead{ margin: 50px 0 0;}
    
    .scroll{overflow: auto; -webkit-overflow-scrolling:touch; margin: 30px auto 0; padding: 0 0 15px; width: calc(100% - 60px); white-space: nowrap; }
    .scroll::-webkit-scrollbar{ height: 4px;}
    .scroll::-webkit-scrollbar-track{ background: #E0E0E0;}
    .scroll::-webkit-scrollbar-thumb { background: #707070;}
    
    .scroll figure{ margin: 0; padding: 0;}
    .scroll figure img{ max-width: none; width: auto;}
    .scroll1 figure img{ height: 420px;}
    .scroll3 figure img{ height: 330px;}
    
    .sec1 .scroll table{ margin: 0; width: auto;}
    .sec1 .scroll table th{ padding: 5px 10px; white-space: nowrap;}
    .sec1 .scroll table td{ padding: 5px 10px; white-space: nowrap;font-size: 1.6rem; }
    .sec1 .scroll table strong{ font-size: 2.4rem;}
    .sec1 .scroll table span{ font-size: 1.2rem;}
    
}

.member aside{ margin: 200px calc(50% - 50vw) 0; padding: 100px calc(50vw - 50%); width: 100vw; background: #DCDCDC;}
.member .sec2 + aside,
.member .sec1bg + aside{ margin: 0 calc(50% - 50vw);}
.member .flex{ justify-content: space-between; align-items: center;}
.member .flex h3{ font-weight: 700; font-size: 2.4rem;}
.member .flex h3 i{ display: inline-block; margin: 0 30px 0 0; width: 90px; vertical-align: middle;}
.member .flex ul{ display: flex;}
.member .flex ul > li{ padding: 0 0 0 30px;}
.member .flex ul a{ display: block;}
.member .flex ul img{ width: auto; height: 60px;}
.member aside p{ margin: 30px 0 0; text-align: justify; letter-spacing: .1em; font-size: 1.2rem; line-height: 1.66;}

@media screen and (max-width: 1024px){
    .member aside{ margin: 0 calc(50% - 50vw); padding: 50px 30px;}
    .member .flex h3{display: flex; flex-direction: column; text-align: center; font-size: 2rem; align-items: center; }
    .member .flex h3 i{ margin: 0 0 1em; width: 20vw;}
    .member .flex ul{ margin: 15px 0 0; justify-content: center;}
    .member .flex ul > li{ padding: 0 5px;}
    .member aside p{ margin: 15px 0 0; font-size: 1rem; line-height: 1.75;}
}

.note1{ padding: 50px 0 40px; background: #EFEFEF; text-align: center;}
.note1 h2{ font-weight: 700; font-size: 2.4rem;}
.note1 p{ margin: 30px 0 0; font-size: 1.6rem;}
.note1 a{ font-weight: 700;}

@media screen and (max-width: 1024px){
    .note1{ padding: 100px 30px;}
    .note1 h2{ font-size: 2rem;}
    .note1 p{ margin: 15px 0 0; text-align: left;font-size: 1.4rem; }
    .note1 p + p{ text-align: center; font-size: 1.4rem;}
}

.sec2{ padding: 0 0 200px; text-align: center;}
.sec2 h3{ margin: 100px 0 0; font-weight: 700; font-size: 2.4rem;}
.sec2 p{ margin: 30px 0 0;}
.sec2 p + figure{ margin: 50px 0 0;}
.sec2 p + figure img{ width: 210px;}
.note2{ position: relative; margin: 45px 0 0; padding: 45px 0 0;}
.note2:after{ position: absolute; top: 0; left: 50%; width: 500px; height: 1px; background: #707070; content: ""; transform: translate(-50%,0);}

@media screen and (max-width: 1024px){
    .sec2{ padding: 0 30px 100px;}
    .sec2 h3{ margin: 50px 0 0; font-size: 2rem;}
    .note1 + .sec2 > h3:first-child{ margin: 100px 0 0;}
    .sec2 p{ margin: 15px 0 0; text-align: left;}
    .sec2 p + figure{ margin: 30px 0 0;}
    .sec2 p + figure img{ width: 50vw;}
    .note2{ margin: 30px 0 0; padding: 30px 0 0; text-align: left;}
    .note2:after{ width: 100%;}
}

.sec2bg{ margin: 0 calc(50% - 50vw); padding: 100px calc(50vw - 50%) 200px; width: 100vw; background: #EFEFEF;}
.list-exp{ display: flex; margin: 50px 0 0; justify-content: space-around;}
.list-exp > li{ position: relative; padding: 60px 20px; width: 350px; background: #fff;}
.list-exp .ico{ position: absolute; top: 0; left: 0; width: 170px;}
.list-exp h4{ display: flex; flex-direction: column; margin: 0; align-items: center;}
.list-exp h4 i{ margin: 0 0 20px; width: 75px;}
.list-exp figure{ margin: 30px 0 0; padding: 0 20px;}
.list-exp figcaption{ margin: 30px 0 0; min-height: 80px;}
.list-exp figcaption strong{ display: block; margin: 0 0 10px; font-weight: 700; font-size: 2rem;}
.list-exp p{ padding: 40px 0 0; border-top: 1px solid #707070; font-weight: 700;}
.list-exp .btn{ margin: 20px 0 0;}
.list-exp .btn a{ display: flex; margin: 0 auto; width: 214px; height: 58px; border-radius: 58px; background: #DCDCDC; text-decoration: none; font-weight: 700; font-size: 2rem; align-items: center; justify-content: center;}

@media screen and (max-width: 1024px){
    .sec2bg{ padding: 100px 30px;}
    .sec2bg > h3:first-child{ margin: 0;}
    .list-exp{ flex-direction: column; margin: 0; padding: 15px 0 0;}
    .list-exp > li{ margin: 15px 0 0; padding: 45px 30px; width: 100%;}
    .list-exp .ico{ width: 40%;}
    .list-exp h4 i{ margin: 0 0 10px; width: 25vw;}
    .list-exp figure{ margin: 30px 0 0; padding: 0;}
    .list-exp figcaption{ margin: 15px 0 0; min-height: 0;}
    .list-exp figcaption strong{ font-size: 1.6rem;}
    .list-exp p{ margin: 30px 0 0; padding: 30px 0 0; text-align: center;}
    .list-exp .btn{ margin: 15px 0 0;}
    .list-exp .btn a{ width: 50vw; height: 45px; border-radius: 45px; font-size: 1.6rem;}
}

.sec1 .list-exp h4{ color: #646464; font-size: 1.4rem;}
.sec1 .list-exp .btn a{ background: #007CB7; color: #fff;}

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

.sec1 .exp2row > li{ padding: 80px 20px 60px; width: 535px;}
.sec1 .exp2row h4{ color: #646464; font-weight: 700; font-size: 2rem;}
.sec1 .exp2row h4 .ico4{ width: 57px;}
.sec1 .exp2row h4 .ico5{ width: 40px;}
.sec1 .exp2row .cap2{ margin: 30px 0 0; min-height: 50px;}

@media screen and (max-width: 1024px){
    .sec1 .exp2row > li{ padding: 45px 30px; width: 100%;}
    .sec1 .exp2row h4{ font-size: 1.6rem;}
    .sec1 .exp2row h4 .ico4{ padding: 0 0 0 .8em; width: 14vw;}
    .sec1 .exp2row h4 .ico5{ width: 10vw;}
    .sec1 .exp2row .cap2{ margin: 30px 0 0; min-height: 50px;}
}

.cap{ margin: 50px 0 0; font-weight: 700; font-size: 1.6rem;}
.back{ padding: 200px 0 0;}
.back a{ display: flex; margin: 0 auto; width: 286px; height: 70px; border: 2px solid #646464; text-decoration: none; font-weight: 600; align-items: center; justify-content: center;}

@media screen and (max-width: 1024px){
    .cap{ margin: 30px 0 0; text-align: left;font-size: 1.4rem; }
    .back{ padding: 100px 0 0;}
    .back a{ width: 50vw; height: 45px; font-size: 1.2rem;}
}

.list-exp2{ display: flex; margin: 40px 0 0;}
.list-exp2 > li{ padding: 40px 0 25px; width: 25%; border-left: 1px solid #707070;}
.list-exp2 figure{ text-align: center;}
.list-exp2 figure img{ width: auto; height: 76px;}
.list-exp2 figcaption{ padding: 40px 0 0; color: #007CB7; font-weight: 600;}

@media screen and (max-width: 1024px){
    .list-exp2{ margin: 30px 0 0; padding: 0 30px; flex-wrap: wrap;}
    .list-exp2 > li{ padding: 30px 15px 30px 0; width: 50%; border-top: 1px solid #707070;border-left: none; }
    .list-exp2 > li:nth-child(even){ padding: 30px 0 30px 15px; border-left: 1px solid #707070;}
    .list-exp2 > li:first-child,
    .list-exp2 > li:nth-child(2){ border-top: none;}
    .list-exp2 figure{ margin: 0; padding: 0;}
    .list-exp2 figure img{ height: 15vw;}
    .list-exp2 figcaption{ padding: 30px 0 0; text-align: left;}
}

.popup{ right: auto; bottom: 0; left: 0; width: 100%; height: auto; transform: none;}
.popup-inner{ top: auto; bottom: 0; left: 0; width: 100%; height: auto; transform: none;}
.popup-inner a{ display: block; width: 100%; height: auto;}
.popup-inner a img{ vertical-align: bottom;}
.close-btn{ width: 20px; height: 20px; background: url("/img/member/arrow.png") no-repeat center / contain;}
.close-btn:before,
.close-btn:after{ content: none;}

@media screen and (max-width: 1024px){
    .popup-inner{ padding: 0;}
    .close-btn{ right: 0;}
}

.app-contact{ position: fixed; top: 50%; right: 0; transform: translate(0,-50%);}
.app-contact a{ display: flex; flex-direction: column; padding: 0 0 0 65px; width: 346px; height: 175px; border-radius: 175px 0 0 175px; background: #007CB7; color: #fff; text-decoration: none; letter-spacing: .15em; font-weight: 700; font-size: 1.8rem; align-items: flex-start; justify-content: center;}
.app-contact a span{ display: block; font-size: 3rem;}

@media screen and (max-width: 1024px){
    .app-contact a{ padding: 0 0 0 45px; width: 40vw; height: 120px; border-radius: 120px 0 0 120px; font-size: 1.2rem; line-height: 1.5;}
    .app-contact a span{ font-size: 2rem;}
}

.btn2{ margin: 100px 0 0;}
.btn2 a{ display: flex; margin: 0 auto; width: 500px; height: 58px; border-radius: 58px; background: #007CB7; color: #fff; text-decoration: none; font-weight: 700; font-size: 2rem; align-items: center; justify-content: center;}

@media screen and (max-width: 1024px){
    .btn2{ margin: 60px 0 0;}
    .btn2 a{ width: 100%; height: 45px; border-radius: 45px; font-size: 1.6rem;}
}

.point{ position: relative; margin: 0 calc(50% - 50vw); padding: 150px 40px 210px; background: url("/img/member/bg_index.png") repeat-y top center / contain; color: #3E3A39; text-align: center; line-height: 1;}
.point .lg{ position: absolute; top: 40px; left: 40px; width: 298px;}
.point .tl{ margin: 0 auto; width: 374px;}

@media screen and (max-width: 1024px){
    .point{ padding: 30px 2.666vw 180px; background: url("/img/member/bg_index2.png") repeat-y top center / contain;}
    .point .lg{ position: relative; top: auto; left: auto; width: 100%;}
    .point .lg img{ margin: 0 auto; width: 44.805vw;}
    .point .tl{ margin: 60px 0 0; width: 100%;}
    .point .tl img{ margin: 0 auto; width: 48.549vw;}
}

.point .period1{ display: flex; margin: 100px 0 0; height: 80px; border-top: 1px dashed #414141; border-bottom: 1px dashed #414141; text-align: center; letter-spacing: .1em; font-size: 3.5rem; font-family: "Yu Gothic StdN E"; justify-content: center; align-items: center;}
.point .period2{ margin: 40px 0 0; text-align: center; font-size: 2.4rem; font-family: "Yu Gothic Pr6N M"; line-height: 1.875;}
.point .period2 strong{ font-weight: normal; font-family: "Yu Gothic StdN E";}
.point .period3{ margin: 35px 0 0; text-align: center;}
.point .period3 dt{ padding: 45px 0 0; font-size: 2rem; font-family: "Yu Gothic Pr6N B";}
.point .period3 dd .line1{ margin: 25px 0 0;}
.point .period3 dd .line1 img{ width: 425px;}
.point .period3 dd .line2{ margin: 25px 0 0; font-size: 1.8rem; font-family: "Yu Gothic Pr6N B";}
.point .period3 dd p{ margin: 1.5em 0 0; font-size: 1.4rem; font-family: "Yu Gothic Pr6N M"; line-height: 1.71;}

@media screen and (max-width: 1024px){
    .point .period1{ margin: 60px -2.666vw 0; height: 13.333vw; letter-spacing: .2em; font-size: 4.8vw;}
    .point .period2{ margin: 30px -2.666vw 0; padding: 0 0 30px; border-bottom: 1px dashed #414141; font-size: 3.733vw; line-height: 1.78;}
    .point .period3{ margin: 0;}
    .point .period3 dt{ padding: 25px 0 0; font-size: 1.3rem;}
    .point .period3 dd .line1{ margin: 15px 0 0;}
    .point .period3 dd .line1 img{ margin: 0 auto; width: 57.810vw;}
    .point .period3 dd .line2{ margin: 1em 0 0; font-size: 1.2rem;}
    .point .period3 dd p{ margin: 1em 0 0; font-size: 1rem; line-height: 2;}
}

.list-rank{ display: flex; margin: 90px 0 0; color: #828282; font-size: 1.2rem; justify-content: space-between;}
.list-rank > li{ padding: 3.125vw 1.562vw 1.562vw; width: calc(25% - 10px); background: #fff;}
.list-rank img{ width: auto; height: 8.072vw;}
.list-rank figcaption{ display: inline-block; margin: 1.562vw 0 0; text-decoration: underline;}
.list-rank dl{ margin: 1.562vw 0 0; border: 1px solid #DCDCDC; color: #000; font-family: "Yu Gothic Pr6N R";}
.list-rank dt{ padding: .3vw 0;}
.list-rank dd{ padding: 1.302vw 0; border-top: 1px solid #DCDCDC; background: #F5EFD8;}
.list-rank dd ul{ margin: -1.302vw 0; padding: 0 0.520vw; color: #3E3A39; letter-spacing: 0; font-size: 0.937vw; line-height: 1;}
.list-rank dd ul > li{ padding: 20px 0; border-top: 1px solid #DCDCDC;}
.list-rank dd ul > li:first-child{ border: none;}
.list-rank dd small{ vertical-align: baseline; font-size: 66%;}
.list-rank dd.bg1{ background: rgba(130,179,200,.3);}
.list-rank p{ margin: 1.302vw 0 0; text-align: left; letter-spacing: 0.05em; font-size: 0.625vw; line-height: 1.5;}

@media screen and (max-width: 1024px){
    .list-rank{ flex-direction: column; margin: 10.666vw 0 0; font-size: 3.2vw;}
    .list-rank > li{ padding: 13.333vw 0; width: 100%; border-top: 1px dashed #3E3A39;}
    .list-rank > li:first-child{ border: none;}
    .list-rank img{ height: 33.333vw;}
    .list-rank figcaption{ margin: 5.333vw 0 0;}
    .list-rank dl{ margin: 5.333vw auto 0; width: 80vw;}
    .list-rank dt{ padding: 2vw 0;}
    .list-rank dd{ padding: 5.333vw 0;}
    .list-rank dd ul{ margin: -5.333vw 0; padding: 0 2.666vw; font-size: 3.733vw;}
    .list-rank dd ul > li{ padding: 15px 0;}
    .list-rank p{ margin: 20px auto 0; width: 80vw; font-size: 3.2vw;}
}

.list-pt{ display: flex; padding: 100px 0 0; justify-content: center;}
.list-pt > li{ padding: 0 45px;}
.list-pt .tl2{ min-height: 120px; letter-spacing: .05em; font-size: 2.4rem; font-family: "Yu Gothic StdN E"; line-height: 1.66;}
.list-pt em{ color: #fff; font-style: normal;}
.list-pt .line1{ display: inline-block; margin: 25px auto 0; padding: 0 0 15px; border-bottom: 2px dashed; color: #fff;font-size: 4.3rem; font-family: "Yu Gothic StdN E"; }
.list-pt .line2{ margin: 15px 0 0;}
.list-pt .line2 img{ width: auto; height: 14px;}
.list-pt figure img{ width: auto; height: 143px;}
.list-pt .cap{ margin: 25px 0 0; font-size: 1.5rem; line-height: 1.6;}
.list-pt .cap a{ text-decoration: underline;}

@media screen and (max-width: 1024px){
    .list-pt{ padding: 0; flex-direction: column;}
    .list-pt > li{ padding: 90px 0 0;}
    .list-pt .tl2{ min-height: 0; font-size: 1.8rem;}
    .list-pt figure{ margin: 20px 0 0;}
    .list-pt figure img{ margin: 0 auto; width: 59.981vw; height: auto;}
    .list-pt .line1{ margin: 20px 0 0; font-size: 3rem;}
    .list-pt .line2{ margin: 20px 0 0;}
    .list-pt .line2 img{ height: 2.770vw;}
    .list-pt .cap{ margin: 20px 0 0; text-align: center; font-size: 1.2rem;}
}

.blk{ display: flex; margin: 90px 0 0; padding: 45px 0; background: #fff; justify-content: center; align-items: flex-end;}
.blk dl{ color: #828282; text-align: left; font-family: "Yu Gothic Pr6N R"; line-height: 1.57;}
.blk dt{ letter-spacing: .1em; font-size: 2.2rem;}
.blk dd{ margin: 30px 0 0;}
.blk .btn{ padding: 0 0 0 250px;}
.blk .btn a{ display: flex; width: 200px; height: 55px; border-radius: 55px; background: #007CB7; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.8rem; align-items: center; justify-content: center;}

@media screen and (max-width: 1024px){
    .blk{ flex-direction: column; margin: 24vw 0 0; padding: 10.666vw 5.333vw; text-align: center; align-items: center;}
    .blk dl{ text-align: center;}
    .blk dt{ padding: 0 0 6.666vw; border-bottom: 1px solid; font-size: 4.8vw;}
    .blk dd{ margin: 6.666vw 0 0; font-size: 3.2vw; line-height: 1.8;}
    .blk .btn{ padding: 6.666vw 0 0;}
    .blk .btn a{ width: 43.733vw; height: 11.733vw; border-radius: 11.733vw; font-size: 4vw;}
}