/**************** BODY & PAGE CONTENT ****************//**************** BODY & PAGE CONTENT ****************//**************** BODY & PAGE CONTENT ****************/

#body {position: fixed; top: 0px; left: 0px; width: 100%; min-width: 320px; max-width: 1920px; height: 100%; padding: 0px 0px 0px 282px; background: var(--bg-grey); overflow: hidden; z-index: 1;}
#page {width: 100%; min-width: 320px; height: 100%; overflow: hidden;}
#content {width: 100%; max-width: 1440px; min-height: 100vh; margin: 0px auto; padding: 0px 30px 36px 30px;}

/*** NO ADAPTIVE ***/

#body.noadaptive {overflow-x: auto;}
#body.noadaptive #page {min-width: 1260px;}
#body.noadaptive #content {max-width: 1260px;}


@media screen and (min-width: 1921px) {
    #body {width: 1920px;}
}

@media screen and (max-width: 1600px) {
    #body.noadaptive {padding: 60px 0px 0px 0px;}
}

@media screen and (max-width: 1300px) {
    #body {padding: 60px 0px 0px 0px;}
    #content {padding: 0px 6px 36px 6px;}
}

@media screen and (max-width: 750px) {
    #content {padding: 0px 0px 36px 0px;}
}



/**************** PAGE GRID ****************//**************** PAGE GRID ****************//**************** PAGE GRID ****************/

.page-section {
    display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row; flex-wrap: nowrap; -webkit-flex-wrap: nowrap;
    justify-content: center; -webkit-justify-content: center; align-items: flex-start; -webkit-align-items: flex-start; align-content: flex-start; -webkit-align-content: flex-start;
    width: 100%;
}
.page-section.reverse {flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
.page-section.stretch {align-items: stretch; -webkit-align-items: stretch;}
.page-section.w1080 {max-width: 1080px; margin: 0px auto;}

.page-section .page-main {flex: 1 1 auto; -webkit-flex: 1 1 auto; width: auto; max-width: 100%; padding: 0px 18px 0px 18px;}
.page-section .page-main.noside {flex: 0 0 auto; -webkit-flex: 0 0 auto; width: 100%; max-width: 100%;}
.page-section .page-side {flex: 0 0 auto; -webkit-flex: 0 0 auto; width: 336px; min-height: 36px; padding: 0px 18px 0px 18px;}
.page-section .cbox {max-width: 100%; margin-bottom: 36px;}

.page-section .page-side.w360 {width: 396px;}
.page-section .page-side.w420 {width: 456px;}
.page-section .page-side.w480 {width: 516px;}

.page-section.w1080 .page-main {max-width: 744px;}
.page-section.w1080 .page-main.noside {max-width: 100%;}


@media screen and (max-width: 1000px) {
    .page-section {flex-wrap: wrap; -webkit-flex-wrap: wrap;}
    .page-section .page-main {width: 100% !important; max-width: none !important;}
    .page-section .page-side {width: 100% !important; min-height: 0px;}
    .page-section .page-side.nomobi {display: none;}
}



/**************** PAGE TITLE ****************//**************** PAGE TITLE ****************//**************** PAGE TITLE ****************/

.page-title {width: 100%; padding: 12px 18px 24px 18px;}
.page-title.w1080 {max-width: 1080px; margin-left: auto; margin-right: auto;}

.page-title .bread-crumbs {padding: 10px 0px 9px 0px;}
.page-title .bread-crumbs .mbox {margin: -6px -6px -6px -6px;}
.page-title .bread-crumbs .crumb {margin: 6px 6px 6px 6px; font-weight: 700; font-size: 16px; line-height: 16px; text-transform: none; letter-spacing: 0px;}
.page-title .bread-crumbs .crumb:after {content: '\\'; display: block; margin: 0px 0px 0px 12px; color: var(--br-grey-dark); font-size: 16px; line-height: 16px;}

.page-title h1, .page-title h2 {max-width: 100%; padding: 3px 0px 6px 0px; font-size: 30px; line-height: 39px; color: var(--black);}
.page-title h1 > span.grey {color: var(--grey);}

.page-title .options {max-width: 100%; padding: 12px 0px 12px 0px;}
.page-title .options .mbox {margin: -6px -6px -6px -6px;}
.page-title .options .mbox .btn {margin: 6px 6px 6px 6px;}

.page-title .options.more .mbox .btn {display: none !important;}
.page-title .options.more .mbox .btn > b {max-width: 254px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.page-title .options.more .mbox .btn:nth-child(1) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(2) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(3) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(4) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(5) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(6) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(7) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(8) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(9) {display: flex !important;}
.page-title .options.more .mbox .btn:nth-child(10) {display: flex !important;}
.page-title .options.more .mbox .btn.sel {display: flex !important;}
.page-title .options.more .mbox .btn.more {display: flex !important;}
.page-title .options.more .mbox.more .btn {display: flex !important;}
.page-title .options.more .mbox.more .btn.more {display: none !important;}

.page-title .data {padding: 8px 0px 6px 0px; font-size: 14px; line-height: 20px; color: var(--grey);}
.page-title .data .mbox {margin: -6px -12px -6px -12px;}
.page-title .data .mbox > * {max-width: 100%; margin: 6px 12px 6px 12px;}

.page-title .like-social {padding: 12px 0px 12px 0px;}
.page-title .like-social .like-dislike {margin: 0px 12px 0px 0px; border: solid 1px var(--br-grey); border-radius: 6px; overflow: hidden;}
.page-title .like-social .like-dislike .ldlnk {padding: 5px 12px 5px 15px;}
.page-title .like-social .like-dislike .ldlnk i {display: block; width: 24px; height: 24px; font-size: 20px; line-height: 24px; text-align: center;}
.page-title .like-social .like-dislike .ldlnk b {display: block; margin: 0px 0px 0px 12px; font-weight: 700; font-size: 14px; line-height: 24px; text-transform: uppercase; letter-spacing: 1px;}
.page-title .like-social .like-dislike .ldlnk.like {color: var(--green); border-right: solid 1px var(--br-grey);}
.page-title .like-social .like-dislike .ldlnk.like i {margin: -1px 0px 1px 0px;}
.page-title .like-social .like-dislike .ldlnk.dislike {color: var(--red);}
.page-title .like-social .like-dislike .ldlnk.dislike i {margin: 1px 0px -1px 0px;}
.page-title .like-social .like-dislike .ldlnk.on {background: var(--bg-grey-dark);}
.page-title .like-social .social .slnk {display: block; margin: 0px 0px 0px 12px; padding: 6px 6px 6px 7px; border-radius: 6px; background: var(--bg-grey-dark);}
.page-title .like-social .social .slnk i {display: block; width: 24px; height: 24px; font-size: 24px; line-height: 24px; text-align: center;}

.page-title.center .bread-crumbs .mbox {justify-content: center; -webkit-justify-content: center;}
.page-title.center h1, .page-title.center h2 {text-align: center;}
.page-title.center .options .mbox {justify-content: center; -webkit-justify-content: center;}
.page-title.center .data .mbox {justify-content: center; -webkit-justify-content: center;}
.page-title.center .like-social {justify-content: center; -webkit-justify-content: center;}


@media screen and (max-width: 1000px) {
    .page-title .bread-crumbs .mbox {justify-content: center; -webkit-justify-content: center;}
    .page-title h1, .page-title h2 {width: 100%; text-align: center;}
    .page-title .options {width: 100%;}
    .page-title .options .mbox {justify-content: center; -webkit-justify-content: center;}
    .page-title .options.more .mbox .btn:nth-child(8) {display: none !important;}
    .page-title .options.more .mbox .btn:nth-child(9) {display: none !important;}
    .page-title .options.more .mbox .btn:nth-child(10) {display: none !important;}
    .page-title .options.more .mbox .btn.sel {display: flex !important;}
    .page-title .options.more .mbox .btn.more {display: flex !important;}
    .page-title .options.more .mbox .mbox.more .btn {display: flex !important;}
    .page-title .data .mbox {justify-content: center; -webkit-justify-content: center;}
    .page-title .like-social {justify-content: center; -webkit-justify-content: center;}
}

@media screen and (max-width: 750px) {
    .page-title h1, .page-title h2 {font-size: 24px; line-height: 33px;}
    .page-title .options.more .mbox .btn:nth-child(4) {display: none !important;}
    .page-title .options.more .mbox .btn:nth-child(5) {display: none !important;}
    .page-title .options.more .mbox .btn:nth-child(6) {display: none !important;}
    .page-title .options.more .mbox .btn:nth-child(7) {display: none !important;}
    .page-title .options.more .mbox .btn.sel {display: flex !important;}
    .page-title .options.more .mbox .btn.more {display: flex !important;}
    .page-title .options.more .mbox.more .btn {display: flex !important;}
    .page-title .options .btn.nomobi {display: none !important;}
}



/**************** PAGE CONTENT LIST ****************//**************** PAGE CONTENT LIST ****************//**************** PAGE CONTENT LIST ****************/

.page-content-list {width: 100%; padding: 0px 0px 36px 0px;}
.page-content-list .content-list-ttl {padding: 15px 0px 18px 0px; color: var(--black); border-top: solid 1px var(--br-grey);}
.page-content-list .content-list-ttl.center {text-align: center;}
.page-content-list .content-list-ttl h4 {font-size: 24px; line-height: 33px;}
.page-content-list .content-list-ttl.big-ttl {padding: 21px 0px 24px 0px;}
.page-content-list .content-list-ttl.big-ttl h4 {font-size: 30px; line-height: 39px;}
.page-content-list .content-list-more {display: none; width: 100%; padding: 36px 0px 0px 0px;}

.page-content-list .mbox {margin: -12px -12px -12px -12px;}
.page-content-list .lipad {width: 25%; padding: 12px 12px 12px 12px;}
.page-content-list .lipad .cbox {margin: 0px;}
.page-section.w1080 .lipad {width: 33.333333%;}
.page-content-list .lipad.w100 {width: 100%;}
.page-content-list.psychologists-img-list .lipad {width: 33.333333%;}
.page-content-list.marathons-img-list .lipad {width: 33.333333%;}

.page-content-list .content-list-page-navi.page-navi-mini {width: 100%; padding: 24px 0px 0px 0px;}
.page-content-list .content-list-page-navi.page-navi-mini .mbox {margin: -12px -12px -12px -12px;}
.page-content-list .content-list-page-navi.page-navi-mini .btn {
    min-height: 48px; min-width: 48px; margin: 12px 12px 12px 12px; padding: 14px 3px 14px 3px; font-size: 16px;
    color: var(--black); background: var(--white);
}
.page-content-list .content-list-page-navi.page-navi-mini .btn.sel {color: var(--white); background: var(--black); pointer-events: none;}
.page-content-list .content-list-page-navi.page-navi-mini .btn.dot {margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px; background: none; pointer-events: none;}


@media screen and (max-width: 1500px) {
    .page-content-list .lipad {width: 33.333333%;}
    .page-content-list.psychologists-img-list .lipad {width: 50%;}
    .page-content-list.marathons-img-list .lipad {width: 50%;}
}

@media screen and (max-width: 1300px) {
    .page-content-list.psychologists-img-list .lipad {width: 33.333333%;}
    .page-content-list.marathons-img-list .lipad {width: 33.333333%;}
}

@media screen and (max-width: 1200px) {
    .page-content-list.psychologists-img-list .lipad {width: 50%;}
    .page-content-list.marathons-img-list .lipad {width: 50%;}
}

@media screen and (max-width: 1000px) {
    .page-content-list .lipad {width: 50%;}
}

@media screen and (max-width: 750px) {
    .page-content-list .content-list-ttl h4 {font-size: 20px; line-height: 29px;}
    .page-content-list .content-list-ttl.big-ttl {padding: 15px 0px 18px 0px;}
    .page-content-list .content-list-ttl.big-ttl h4 {font-size: 24px; line-height: 33px;}
    .page-content-list .content-list-page-navi.page-navi-mini .mbox {margin: -6px -6px -6px -6px;}
    .page-content-list .content-list-page-navi.page-navi-mini .btn {min-height: 36px; min-width: 36px; margin: 6px 6px 6px 6px; padding: 8px 3px 8px 3px; font-size: 14px;}
}

@media screen and (max-width: 500px) {
    .page-content-list .lipad {width: 100%;}
    .page-section.w1080 .lipad {width: 100%;}
    .page-content-list.psychologists-img-list .lipad {width: 100%;}
    .page-content-list.marathons-img-list .lipad {width: 100%;}
}



/**************** PAGE BOTTOM TEXT ****************//**************** PAGE BOTTOM TEXT ****************//**************** PAGE BOTTOM TEXT ****************/

.page-bottom-text {margin: 36px 0px 0px 0px; padding: 30px 0px 30px 0px; font-size: 16px; line-height: 22px; border-top: solid 1px var(--br-grey);}
.page-bottom-text .half {width: 50%; padding: 0px 18px 0px 0px; box-sizing: border-box;}
.page-bottom-text .half h1 {display: block; padding: 0px 0px 12px 0px; font-size: 18px; line-height: 25px; box-sizing: border-box;}
.page-bottom-text .half h2 {display: block; padding: 0px 0px 12px 0px; font-size: 18px; line-height: 25px; box-sizing: border-box;}
.page-bottom-text .half span {display: block; padding: 0px 0px 12px 0px; box-sizing: border-box;}
.page-bottom-text .half ul {display: block; padding: 0px 0px 6px 15px; box-sizing: border-box; list-style-type: disc;}
.page-bottom-text .half li {display: list-item; padding: 0px 0px 6px 0px; box-sizing: border-box; list-style-type: disc;}
.page-bottom-text .half em {font-style: italic;}
.page-bottom-text .half:nth-child(2n) {padding: 0px 0px 0px 18px;}
.page-bottom-text p {width: 50%; padding: 0px 18px 0px 0px; box-sizing: border-box;}
.page-bottom-text p:nth-child(2n) {padding: 0px 0px 0px 18px;}

@media screen and (max-width: 750px) {
    .page-bottom-text {margin: 36px 0px 0px 0px; padding: 12px 0px 30px 0px;}
    .page-bottom-text .half {width: 100%; padding: 18px 0px 0px 0px !important;}
    .page-bottom-text p {width: 100%; padding: 18px 0px 0px 0px !important;}
}



/**************** PAGE SIDE FILTERS ****************//**************** PAGE SIDE FILTERS ****************//**************** PAGE SIDE FILTERS ****************/

.page-section .page-main .side-filters-mobi {display: none; padding: 0px 0px 24px 0px;}

#side-filters-bg {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: hsla(0,0%,90%,0.9); opacity: 0; transition: opacity ease 360ms; z-index: 75;}
#side-filters-bg.open {opacity: 1;}
#side-filters-bg .side-filters-lnk {position: absolute; top: 24px; right: 300px; width: 24px; height: 36px; padding: 2px 0px 2px 0px; font-size: 30px; line-height: 36px; text-align: center;}

.page-section .page-side.filters-side {width: 276px;}
.page-section .page-side.filters-side .filters-box {margin: -4px 0px 34px 0px; padding: 0px 0px 0px 0px;}
.page-section .page-side.filters-side .filters-box .scrollbox {height: 390px;}
.page-section .page-side.filters-side .filters-box .scrollpad {padding: 0px 18px 0px 0px;}
.page-section .page-side.filters-side .filters-ttl {padding: 0px 0px 12px 0px; font-weight: 700; font-size: 20px; line-height: 26px; color: var(--black);}
.page-section .page-side.filters-side .filter {display: block; position: relative; margin: 0px 0px 12px 0px; padding: 1px 0px 7px 36px; cursor: pointer; box-sizing: border-box;}
.page-section .page-side.filters-side .filter .ico {
    position: absolute; top: 0px; left: 0px; width: 24px; height: 24px;
    border: solid 1px; border-color: var(--br-grey); border-radius: 4px;
    transition: border-color ease 240ms; box-sizing: border-box;
}
.page-section .page-side.filters-side .filter .ico i {
    display: block; position: absolute; top: 0px; left: 0px; width: 23px; height: 22px;
    font-size: 20px; line-height: 22px; text-align: center; color: var(--main);
    opacity: 0; transition: opacity ease 240ms;
}
.page-section .page-side.filters-side .filter b {display: block; margin: 0px 0px -6px 0px; font-weight: 400; font-size: 16px; line-height: 22px; color: var(--black);}
.page-section .page-side.filters-side .filter:hover .ico {border-color: var(--br-main);}
.page-section .page-side.filters-side .filter.sel .ico {border-color: var(--br-main);}
.page-section .page-side.filters-side .filter.sel .ico i {opacity: 1;}

.page-section .page-side.filters-side .filter.form {padding: 0px 0px 0px 0px;}
.page-section .page-side.filters-side .filter.form .fitem {padding: 0px 0px 0px 0px;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .from-to {flex: 1 1 auto; -webkit-flex: 1 1 auto; width: auto; background: none; cursor: default;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .from-to input {width: 42px; height: 36px; font-weight: 700; font-size: 12px; border-radius: 6px;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .from-to .slider {padding: 12px 12px;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .from-to .slider .noUi-horizontal .noUi-handle {right: -6px; width: 12px; border-radius: 4px;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .btn {margin-left: 9px; padding-left: 9px; padding-right: 9px; border-radius: 6px;}
.page-section .page-side.filters-side .filter.form .fitem .fibox .btn b {margin: 0px 0px -1px -1px; font-weight: 800; font-size: 14px; line-height: 20px; color: var(--white);}

@media screen and (max-width: 1000px) {
    .page-section .page-main .side-filters-mobi {display: block;}
    .page-section .page-side.filters-side {
        position: fixed; top: 0px; right: -315px; width: 282px !important; height: 100%; padding: 24px 18px 0px 18px;
        background: var(--white); box-shadow: 0px 6px 36px -6px hsla(0,0%,0%,0.12);
        overflow-y: auto; z-index: 100; transition: right ease 360ms;
    }
    .page-section .page-side.filters-side.open {right: 0px !important;}
    .page-section .page-side.filters-side .filters-box .scrollbox {height: auto; margin-bottom: -12px;}
    .page-section .page-side.filters-side .filters-box .scrollpad {padding: 0px 0px 0px 0px;}
}



/**************** MAIN MENU ****************//**************** MAIN MENU ****************//**************** MAIN MENU ****************/

#main-menu-top {display: none; position: fixed; top: 0px; left: 0px; width: 100%; min-width: 320px; z-index: 50;}
#main-menu-top > div {width: 100%; height: 60px; padding: 12px 24px 12px 24px;}
#main-menu-top .main-menu-lnk {height: 36px; margin: 0px 24px 0px 0px; padding: 4px 0px 2px 0px; font-size: 30px; line-height: 30px; text-align: center;}
#main-menu-top .logo {display: block; font-family: 'Merriweather', serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px;}
#main-menu-top .lang-change {border: solid 1px var(--br-grey); border-radius: 6px; overflow: hidden;}
#main-menu-top .lang-change .lang {display: block; width: 42px; padding: 6px 0px 6px 2px; font-weight: 800; font-size: 12px; line-height: 22px; text-align: center; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box;}
#main-menu-top .lang-change .lang:first-child {width: 43px; border-right: solid 1px var(--br-grey);}
#main-menu-top .lang-change .lang.sel {background: var(--bg-grey-light); pointer-events: none;}

#main-menu-bg {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: hsla(0,0%,90%,0.9); opacity: 0; transition: opacity ease 360ms; z-index: 125;}
#main-menu-bg.open {opacity: 1;}
#main-menu-bg .main-menu-lnk {position: absolute; top: 24px; left: 306px;  width: 24px; height: 36px; padding: 2px 0px 2px 0px; font-size: 30px; line-height: 36px; text-align: center;}

#main-menu {position: fixed; top: 0px; left: 0px; width: 282px; height: 100%; z-index: 150;}
#main-menu.open {left: 0px !important;}

#main-menu .help-box {width: 100%; overflow: hidden;}
#main-menu .help-lnk {width: 100%; min-height: 24px; padding: 0px; font-size: 12px; border-radius: 0px;}

#main-menu .logo-lang {padding: 24px 18px 12px 18px;}
#main-menu .logo {display: block; font-family: 'Merriweather', serif; font-style: normal; font-weight: 700; font-size: 30px; line-height: 36px;}
#main-menu .lang-change {border: solid 1px var(--br-grey); border-radius: 6px; overflow: hidden;}
#main-menu .lang-change .lang {display: block; width: 42px; padding: 6px 0px 6px 2px; font-weight: 800; font-size: 12px; line-height: 22px; text-align: center; text-transform: uppercase; letter-spacing: 1px; box-sizing: border-box;}
#main-menu .lang-change .lang:first-child {width: 43px; border-right: solid 1px var(--br-grey);}
#main-menu .lang-change .lang.sel {background: var(--bg-grey-light); pointer-events: none;}

#main-menu .menu-box {padding: 12px 18px 12px 18px;}
#main-menu .menu-box.user {margin: 12px 0px 12px 0px; background: var(--bg-grey-light);}
#main-menu .menu-border {width: 100%; height: 0px; margin: 0px 0px 12px 0px; border-bottom: dashed 1px var(--br-grey);}
#main-menu .menu-ttl {margin: 0px 0px 12px 0px; padding: 6px 0px 4px 0px; font-size: 14px; line-height: 14px; color: var(--grey);}
#main-menu .menu-lnk {margin: 0px 0px 12px 0px;}

#main-menu .menu-box .user-box {width: 100%; margin: 0px 0px 12px 0px;}
#main-menu .menu-box .user-box .menu-lnk {margin: 0px 0px 0px 0px;}
#main-menu .menu-box .user-box .nofix {width: 210px; margin-right: 18px;}
#main-menu .menu-box .user-box .nofix b {max-width: 100%; overflow: hidden; text-overflow: ellipsis;}

#main-menu .menu-box:last-child {margin: 0px 0px 0px 0px;}
#main-menu .menu-box > *:last-child {margin: 0px 0px 0px 0px;}

#main-menu .menu-social {padding: 0px 0px 12px 0px; font-size: 14px; line-height: 20px; color: var(--black);}
#main-menu .social-lnk {padding: 6px 0px 6px 0px;}
#main-menu .social-lnk {display: block; margin: 0px 12px 12px 0px; padding: 6px 6px 6px 7px; border-radius: 6px; background: var(--bg-grey);}
#main-menu .social-lnk i {display: block; width: 24px; height: 24px; font-size: 24px; line-height: 24px; text-align: center;}

#main-menu .menu-info {padding: 0px 0px 12px 0px; font-size: 14px; line-height: 20px; color: var(--black);}
#main-menu .menu-info .copy {margin: 0px 0px 12px 0px; padding: 3px 0px 1px 0px; color: var(--grey);}
#main-menu .menu-info .info-lnk {display: block; margin: 0px 0px 12px 0px; padding: 3px 0px 1px 0px;}
#main-menu .menu-info .attention {padding: 3px 0px 1px 0px;}


@media screen and (max-width: 1600px) {
    #body.noadaptive #main-menu-top {display: block;}
    #body.noadaptive #main-menu {left: -315px; transition: left ease 360ms;}
}

@media screen and (max-width: 1300px) {
    #main-menu-top {display: block;}
    #main-menu {left: -315px; transition: left ease 360ms;}
}

@media screen and (max-width: 750px) {
    #main-menu-top > div {padding: 12px 18px 12px 18px;}
}