@charset "utf-8";

/*
theme Name: くらしのお金相談室
Author: coQue
Theme URL:
Description: original theme
version: 1.0
*/

@font-face {
    font-family: "Rounded M PLUS B";
    src: url('./lib/fonts/rounded-x-mplus-2c-bold.ttf');
    font-weight: bold;
    font-display: swap;
    /*700*/
}

@font-face {
    font-family: "Rounded M PLUS R";
    src: url('./lib/fonts/rounded-x-mplus-2c-regular.ttf');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "コーポレート・ロゴ";
    src: url('./lib/fonts/logotypejp_mp_b_1.1.ttf');
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --textcolor1: #673a1b;
    --textcolor2: #9e7b55;
    --textcolor3: #ca677d;
    --textcolor4: #d498a1;
    --textcolor5: #ffffff;
    --textcolor6: #f7efee;
    --fontfamily1: "Rounded M PLUS R", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    --fontfamily2: "Rounded M PLUS B", -apple-system, BlinkMacSystemFont;
}

html {
    height: 100%;
    width: 100%;
    font-size: calc(100vw / 480);
    overflow: auto;
    word-break: break-all;
    box-sizing: border-box;
}

body {
    font-family: var(--fontfamily1);
    font-size: min(18rem, 18px);
    font-weight: 600;
    line-height: min(26rem, 26px);
    letter-spacing: 0;
    -webkit-text-size-adjust: none;
    width: 100%;
    margin: 0 auto;
    overflow-x: hidden;
    background-color: var(--textcolor5);
    color: var(--textcolor1);
}

.pc_view {
    display: none;
}

@media (min-width: 481px) {
    html {
        font-size: calc(100vw / 800);
    }
}

@media (min-width: 801px) {
    html {
        font-size: calc(100vw / 1400);
    }

    body {
        font-size: min(18rem, 18px);
        line-height: min(22.4rem, 22.4px);
    }
}


body::after,
body::before {
    box-sizing: border-box
}

p {
    margin: 1em auto;
    line-height: 1.5;
    word-break: break-all;
}

a {
    text-decoration: none;
    color: var(--textcolor1);
    -webkit-tap-highlight-color: var(--textcolor1);
}

a:visited {
    text-decoration: none;
}

a:hover {
    opacity: 0.8;
    text-decoration: none;
    color: #bf1733;
}

a:active {
    text-decoration: none;
    color: var(--textcolor2);
}

ul,
li {
    padding: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--fontfamily2);
}

h1 {
    font-family: "コーポレート・ロゴ";
    font-size: min(38rem, 38px);
    line-height: min(48rem, 48px);
    text-align: center;
    margin: 0 auto;
}

h2 {
    width: 100%;
    text-align: center;
    margin: min(10rem, 10px) auto;
    padding: min(16rem, 16px) 0;
    font-size: min(38rem, 38px);
    line-height: min(46rem, 46px);
}

h3 {
    margin: min(10rem, 10px) 0;
    padding: min(16rem, 16px) 0;
    text-align: center;
    font-size: min(22rem, 22px);
    line-height: min(33rem, 33px);
}

h4 {
    font-size: min(18rem, 18px);
    font-weight: normal;
    margin: 0;
    padding: 9rem;
}

img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

main {
    width: 100%;
    padding: 0 0 min(200rem, 200px);
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.hover_btn {
    overflow: hidden;
    position: relative;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    transition: .3s;
    width: 100%;
    height: 100%;
}

.hover_btn::before {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: rgb(51 51 51 / .8);
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
}

.hover_btn p {
    width: 100%;
    height: 100%;
    font-size: 12rem;
    line-height: 18rem;
    text-align: left;
    color: var(--textcolor5);
    margin: 0;
    padding: 10rem;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
}

.hover_btn span {
    font-size: 10rem;
    position: absolute;
    z-index: 1;
    width: 100rem;
    bottom: 10rem;
    left: 0;
    right: 0;
    margin: auto;
    background: var(--textcolor5);
    color: #333333;
    transform-origin: center center;
    transform: scale(0, 1);
    transition: transform .3s;
}

.hover_btn:hover p,
.hover_btn:hover span,
.hover_btn:hover::before {
    transform: scale(1, 1);
}




header {
    width: 100%;
    background: var(--textcolor5);
    position: fixed;
    z-index: 2;
    top: 0;
}

.header_wrap {
    width: 100%;
    height: min(70rem, 70px);
    font-size: min(15rem, 15px);
}

.header_img_wrap {
    height: min(70rem, 70px);
    padding: min(10rem, 10px) 0 0 min(10rem, 10px);
    ;
}

.header_img_wrap img {
    width: auto;
    height: min(60rem, 60px);
}

nav#header_menu {
    font-family: var(--fontfamily1);
}

.menu_icon {
    display: block;
    position: fixed;
    z-index: 101;
    right: 0rem;
    top: 0;
    width: min(70rem, 70px);
    height: min(70rem, 70px);
    cursor: pointer;
    text-align: center;
    font-size: min(10rem, 10px);
    background-color: var(--textcolor1);
}

.menu_icon span {
    display: block;
    position: absolute;
    width: min(40rem, 40px);
    height: min(3rem, 3px);
    left: min(15rem, 15px);
    background: var(--textcolor5);
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.menu_icon p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: var(--textcolor5);
}

.menu_icon span:nth-child(1) {
    top: min(15rem, 15px);
}

.menu_icon span:nth-child(2) {
    top: min(25rem, 25px);
}

.menu_icon span:nth-child(3) {
    top: min(35rem, 35px);
}

.menu_icon.active span:nth-child(1) {
    top: min(25rem, 25px);
    left: min(15rem, 15px);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.menu_icon.active span:nth-child(2),
.menu_icon.active span:nth-child(3) {
    top: min(25rem, 25px);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

.menu_wrap {
    width: 100%;
    padding-top: min(36rem, 36px);
    overflow-y: auto;
}

nav#header_menu {
    width: 100vw;
    min-height: calc(100vh - 70rem);
    padding: min(30rem, 30px) 0 0 0;
    display: none;
    position: fixed;
    z-index: 2;
    top: min(70rem, 70px);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    text-align: center;
}

nav#header_menu ul {
    width: 100%;
    margin: 0 auto;
    padding: min(20rem, 20px) min(40rem, 40px) min(100rem, 100px);
    font-size: min(24rem, 24px);
}

nav#header_menu ul li {
    width: 100%;
    position: relative;
    margin: min(10rem, 10px) 0;
    padding: min(20rem, 20px);
    border: 2rem solid #ccc;
    border-radius: 5rem;
    font-weight: bold;
    background: var(--textcolor5);
}

nav#header_menu ul li::before {
    position: absolute;
    width: min(16rem, 16px);
    height: min(16rem, 16px);
    left: min(10rem, 10px);
    top: 0;
    bottom: 0;
    margin: auto;
}

nav#header_menu ul li a {
    display: block;
}

nav#header_menu .sub-menu li {
    margin: 0 0 min(5rem, 5px) 0;
    font-size: min(24rem, 24px);
    background: var(--textcolor4);
}
nav#header_menu .sub-menu li a {
    color: var(--textcolor5);
}
nav#header_menu .sub-menu li {
    border-color: none;
}

nav#header_menu .sub-menu li a::after {
    content: none;
}

nav#header_menu ul li a:after {
    content: attr(title);
    text-transform: uppercase;
    font-size: min(16rem, 16px);
    font-weight: bold;
    line-height: 1;
    display: block;
    text-align: center;
}

nav#header_menu.active {
    z-index: 100;
    display: block;
    background: #ffffffe6;
    animation-name: close;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    -webkit-overflow-scrolling: touch;
}

@keyframes open {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(100vh);
    }
}

nav#header_menu.close {
    width: 100vw;
    height: 100vh;
    z-index: 100;
    bottom: 0;
    display: block;
    animation-name: open;
    animation-duration: .5s;
    animation-fill-mode: forwards;
}

@keyframes close {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0);
    }
}

@media(min-width:801px) {
    h3 {
        text-align: center;
        font-size: min(33rem, 33px);
        line-height: min(33rem, 33px);
        margin: min(10rem, 10px) 0;
        padding: min(16rem, 16px) 0;
    }

    header {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        transition: .3s;
        background: var(--textcolor5);
        height: min(140rem, 140px);
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .header_wrap {
        width: 100%;
        max-width: min(1100rem, 1100px);
        height: min(140rem, 140px);
        margin: 0 auto;
        font-size: min(15rem, 15rem);
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .header_img_wrap {
        width: 100%;
        max-width: min(440rem, 440px);
        height: min(140rem, 140px);
        margin: 0 auto;
    }

    .header_img_wrap img {
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .menu_wrap {
        width: 100%;
        max-width: min(600rem, 600px);
        height: min(140rem, 140px);
        margin: 0 auto;
        padding: 0;
        overflow-y: inherit;
    }

    .header_img_wrap {
        text-align: left;
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .header_img_wrap img {
        width: min(440rem, 440px);
        height: min(140rem, 140px);
    }

    nav#header_menu {
        width: 100%;
        max-width: min(600rem, 600px);
        min-height: auto;
        height: min(140rem, 140px);
        margin: 0 auto;
        padding: min(70rem, 70px) 0 0 0;
        overflow-y: inherit;
        display: block;
        background: none;
        position: unset;
    }

    nav#header_menu ul {
        height: 100%;
        margin: 0;
        padding: 0;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    nav#header_menu ul li {
        width: calc(100% / 5);
        height: min(70rem, 70px);
        margin: 0;
        padding: 0;
        position: relative;
        border: none;
        border-radius: inherit;
    }

    nav#header_menu ul li:hover a {
        opacity: 1;
        color: var(--textcolor1);
    }

    /*
    nav#header_menu ul li span {
        height: 100%;
        width: 100%;
    }
*/
    nav#header_menu ul li a {
        width: 100%;
        height: 100%;
        padding: 0 0 min(10rem, 10px);
        position: relative;
        z-index: 2;
        font-size: min(15rem, 15px);
        line-height: min(24rem, 24px);
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        background: none;
        color: var(--textcolor3);
    }

    nav#header_menu ul li a::after {
        position: inherit;
        content: '';
        right: 0;
    }

    nav#header_menu ul li ul {
        height: auto;
        padding: 0;
        display: none;
        transition: all .4s ease 0s;
    }

    nav#header_menu ul li ul li {
        width: 100%;
        height: min(40rem, 40px);
        padding: 0;
        transition: all .4s ease 0s;
    }

    nav#header_menu ul li ul li a span.list_icon {
        display: none;
    }

    nav#header_menu ul li:hover ul {
        display: block;
        transition: all .4s ease 0s;
    }

    nav#header_menu ul li:hover ul a{
        background: var(--textcolor5);
        color: var(--textcolor3);
    }
    nav#header_menu .sub-menu li{
                margin: 0;
}
    nav#header_menu ul li ul li:hover {
        filter: saturate(.5);
        transform: translateX(min(10rem, 10px));
        transition: all .4s ease 0s;
    }
    nav#header_menu ul li ul li:hover a {
        color: var(--textcolor1);
    }
    .menu_icon {
        display: none;
    }

    /*
    header.is-fixed {
        height: min(100rem, 100px);
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .is-fixed .header_wrap {
        height: min(100rem, 100px);
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .is-fixed .header_img_wrap {
        height: 0;
        width: 100%;
        padding: 0;
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .is-fixed .header_img_wrap img {
        height: min(50rem, 50px);
        transition: all .4s ease 0s, height .6s ease .2s;
    }

    .is-fixed nav#header_menu ul li {
        padding: min(5rem, 5px);
        transition: all .4s ease 0s, top .6s ease .2s;
    }

    .is-fixed nav#header_menu ul li a {
        padding: 0;
    }
*/
}

.breadcrumb {
    width: 100%;
    font-size: min(13rem, 13px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.breadcrumb_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.breadcrumb_list li {
    position: relative;
}

.breadcrumb_list li:first-child a {
    color: var(--textcolor3);
}

.breadcrumb_list li:not(:last-child)::after {
    position: absolute;
    content: '/';
    width: 20px;
    padding-left: 5px;
}

.breadcrumb_list li:not(:nth-of-type(1)) {
    padding-left: 20px;
}

.taxs li {
    padding: min(5rem, 5px) min(10rem, 10px);
    background: var(--textcolor3);
    border-radius: min(5rem, 5px);
}

.taxs li a {
    color: var(--textcolor5);
}

.term_no {
    pointer-events: none
}

.more_btn {
    width: min(200rem, 200px);
    height: min(60rem, 60px);
    margin: 0 auto;
    font-size: min(20rem, 20px);
    color: var(--textcolor5);
    background: var(--textcolor4);
    bottom: min(-60rem, 60px);
    border-radius: min(10rem, 10px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.more_btn::before {
    content: '>';
    padding: 0 min(10rem, 10px) 0 0;
}

.side_btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 5;
    display: flex;
}

.side_btn a {
    width: 100%;
    height: 100%;
    padding: min(10rem, 10px);
    font-size: min(12rem, 12px);
    line-height: min(14rem, 14px);
    color: var(--textcolor5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.side_btn svg {
    width: min(50rem, 50px);
    height: min(50rem, 50px);
}

.side_btn a .btn_text {
    padding: 0 0 0 min(10rem, 10px);
}

.side_btn a .btn_text h3 {
    font-size: min(18rem, 18px);
    line-height: min(31rem, 31px);
    text-align: left;
    padding: 0;
    margin: 0;
}

.side_btn a .btn_text span {
    display: none;
}

.line_btn,
.seminar_btn,
.calendar_btn {
    width: calc(100% / 3);
    height: min(110rem, 110px);
}

.line_btn {
    background: #03b302;
}

.seminar_btn {
    background: #f19d18;
}

.calendar_btn {
    background: #75c5b3;
}

footer {
    background: var(--textcolor3);
    padding: 0 0 min(110rem, 110px);
}

.footer_wrap {
    width: 100%;
    margin: 0 auto;
    padding: min(50rem, 50px) min(10rem, 10px);
}

.footer_left {
    width: 100%;
    padding: 0 0 min(20rem, 20px);
}

.footer_right {
    width: 100%;
}

.footer_logo {
    text-align: center;
    margin: 2rem auto;
}

.footer_info {
    font-size: min(22rem, 22px);
    line-height: min(32rem, 32px);
    padding: 0 0 min(10rem, 10px);
}

.FB_wrap {
    width: 100%;
    max-width: min(500rem, 500px);
    height: min(500rem, 500px);
    background: #d9d9da;
    text-align: center;
    padding: min(100rem, 100px);
}

nav#footer_menu ul {
    width: 100%;
    margin: 0 auto;
    padding: min(10rem, 10px) 0 0;
}

nav#footer_menu ul li {
    white-space: nowrap;
}

nav#footer_menu ul li::after {}

nav#footer_menu ul li:first-of-type::before {}

.copy-right {
    background: #d9d9da;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10rem;
}

@media(min-width:481px) {
    .side_btn {
        width: min(224rem, 224px);
        position: fixed;
        top: 40%;
        right: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
    }

    .side_btn a {
        width: 100%;
        height: 100%;
        padding: min(30rem, 30px) 0 min(30rem, 30px) min(20rem, 20px);
        font-size: min(12rem, 12px);
        line-height: min(14rem, 14px);
        color: var(--textcolor5);
        display: flex;
        align-items: center;
        flex-direction: row;
    }

    .side_btn svg {
        width: min(50rem, 50px);
    }

    .side_btn a .btn_text {
        padding: 0 0 0 min(10rem, 10px);
    }

    .side_btn a .btn_text h3 {
        font-size: min(18rem, 18px);
        line-height: min(31rem, 31px);
        text-align: left;
        padding: 0;
        margin: 0;
    }

    .side_btn a .btn_text span {
        display: block;
    }

    .line_btn,
    .seminar_btn,
    .calendar_btn {
        width: 100%;
        height: min(110rem, 110px);
        border-radius: min(15rem, 15px) 0 0 min(15rem, 15px);
    }

    .line_btn:hover {
        background: var(--textcolor5);
        border: min(5rem, 5px) solid #03b302;
    }

    .seminar_btn:hover {
        background: var(--textcolor5);
        border: min(5rem, 5px) solid #f19d18;
    }

    .calendar_btn:hover {
        background: var(--textcolor5);
        border: min(5rem, 5px) solid #75c5b3;
    }

    .line_btn:hover a .btn_text {
        color: #03b302;
    }

    .seminar_btn:hover a .btn_text {
        color: #f19d18;
    }

    .calendar_btn:hover a .btn_text {
        color: #75c5b3;
    }

    .line_btn:hover a svg path {
        fill: #03b302;
    }

    .seminar_btn:hover a svg path {
        fill: #f19d18;
    }

    .calendar_btn:hover a svg path {
        fill: #75c5b3;
    }

    footer {
        padding: 0;
    }

    .footer_wrap {
        width: 100%;
        max-width: min(1120rem, 1120px);
        padding: min(55rem, 55px) min(10rem, 10px);
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer_left {
        width: 50%;
        max-width: min(500rem, 500px)
    }

    .footer_right {
        width: 50%;
        max-width: min(500rem, 500px)
    }
}

@media(min-width:801px) {}

.pager {
    margin-top: 50px;
}

.page-numbers {
    display: flex;
    justify-content: center;
}

.page-numbers li {
    position: relative;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    margin: 0 5px;
}

.page-numbers li span {
    width: 28px;
    height: 28px;
    color: var(--textcolor5);
    display: block;
    text-align: center;
    background: var(--textcolor3);
}

.page-numbers li a {
    display: block;
    width: 28px;
    height: 28px;
    text-align: center;
    color: var(--textcolor3);
    text-decoration: none;
}

.page-numbers li a:hover {
    background: var(--textcolor3);
    color: var(--textcolor5);
}

a.prev.page-numbers::after {
    display: block;
    position: absolute;
    content: '<';
    width: 30px;
    height: 30px;
    color: var(--textcolor3);
    text-decoration: none;
}

a.next.page-numbers::after {
    display: block;
    position: absolute;
    content: '>';
    width: 30px;
    height: 30px;
    color: var(--textcolor3);
    text-decoration: none;
}

a.prev.page-numbers:hover::after,
a.next.page-numbers:hover::after {
    color: var(--textcolor5);
}


#pagenavi {
    display: flex;
    justify-content: space-between;
    margin: 50px;
}

#pagenavi li.prev a {
    position: relative;
    padding: 2px 8px 2px 24px;
    border: 1px solid #ddd;
}

#pagenavi li.next a {
    position: relative;
    padding: 2px 24px 2px 8px;
    border: 1px solid #ddd;
}

#pagenavi li.prev a::before {
    position: absolute;
    content: '<';
    left: 6px;
}

#pagenavi li.next a::after {
    position: absolute;
    content: '>';
    right: 6px;
}

#pagenavi li.prev a:hover,
#pagenavi li.next a:hover {
    background: var(--textcolor3);
    color: var(--textcolor5);
}

.single_nav {
    width: 100%;
    padding: 50rem 0 0;
}







.header {
    padding: min(70rem, 70px) 0 0 0;
    position: relative;
}

.header img {
    width: calc(100vw - (100vw - 100%));
    height: 100%;
    line-height: 0;
    object-fit: cover;
}

.swiper-container-fade .swiper-slide {
    line-height: 0;
}

.header h1 {
    position: absolute;
    z-index: 1;
    width: 100%;
    color: var(--textcolor5);
    font-size: 76rem;
    line-height: 1;
    text-align: center;
    margin: 0 auto;
    bottom: 20%;
    filter: drop-shadow(2px 4px 6px #333);
}

.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
    animation: bgAnime 20s 0s forwards;
}

@keyframes bgAnime {
    0% {
        transform: scale(1.0, 1.0);
    }

    100% {
        transform: scale(1.1, 1.1);
    }
}

.sec_wrap {
    padding: min(40rem, 40px) 10rem;
    width: 100%;
    margin: 0 auto;
    line-height: 1.8;
}

.sec_wrap_in {
    max-width: min(920rem, 920px);
    margin: 0 auto;
    padding: 0 0 min(50rem, 50px);
    text-align: left;
}

section.front_sec2 {
    height: min(360rem, 360px);
    position: relative;
    background: #f7efee;
}

section.front_sec2 .bg {}

.icons {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: min(800rem, 800px);
    margin: 0 auto;
    padding: min(10rem, 10px);
    line-height: 1.2;
    font-family: var(--fontfamily2);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    top: min(-50rem, -50px);
    z-index: 1;
    left: 0;
    right: 0;
}

.icon1,
.icon2 {
    width: min(146rem, 146px);
    height: min(146rem, 146px);
    border: min(6rem, 6px) solid var(--textcolor3);
    border-radius: min(10rem, 10px);
    margin: 0 0 min(34rem, 34px);
}

.icon1 {
    background: var(--textcolor3);
}

.icon2 {
    background: var(--textcolor5);
}

.icon1 a,
.icon2 a {
    width: 100%;
    height: 100%;
    padding: min(10rem, 10px);
    font-size: min(18rem, 18px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.icon1 a {
    color: var(--textcolor5);
}

.icon2 a {
    color: var(--textcolor3);
}

.icon1 a svg,
.icon2 a svg {
    padding: 0 20%;
}

.icon2 a svg path {
    fill: var(--textcolor3);
}

.icon1 a span,
.icon2 a span {
    width: 100%;
    display: block;
    text-align: center;
}

.icon1 a:hover,
.icon2 a:hover {
    opacity: 1;
}

.icon1:hover {
    background: var(--textcolor5);
    border: min(6rem, 6px) solid var(--textcolor5);
}

.icon2:hover {
    background: var(--textcolor3);
}

.icon1:hover span {
    color: var(--textcolor3);
}

.icon2:hover span {
    color: var(--textcolor5);
}

.icon1:hover svg path {
    fill: var(--textcolor3);
}

.icon2:hover svg path {
    fill: var(--textcolor5);
}


h2.title {
    position: relative;
    padding: 0;
    margin: 0 auto min(50rem, 50px);
    color: var(--textcolor3);
    font-size: min(30rem, 30px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    background-size: contain;
}

h2.title span {
    font-size: min(20rem, 20px);
}

h2.title.seminar {
    height: min(75rem, 75px);
    background-position: center;
    background-image: url(lib/img/front/title_seminar.svg);
}

h2.title.management_philosophy {
    color: var(--textcolor5);
    align-items: flex-end;
    height: min(100rem, 100px);
    padding: 0 40% 0 0;
    background-position: left;
    background-image: url(lib/img/front/title_management_philosophy.svg);
}

h2.title.management_philosophy img {
    width: min(200rem, 200px);
    position: absolute;
    top: min(-100rem, -100px);
    right: 0;
}

h2.title.information {
    align-items: center;
    height: min(100rem, 100px);
    background-position: left;
    background-image: url(lib/img/front/title_information.svg);
}

h2.title.information a,
h2.title.blog a {
    width: min(200rem, 200px);
    height: min(60rem, 60px);
    font-size: min(20rem, 20px);
    color: var(--textcolor5);
    background: var(--textcolor4);
    position: absolute;
    right: 0;
    bottom: min(-60rem, 60px);
    border-radius: min(10rem, 10px);
    display: flex;
    justify-content: center;
    align-items: center;
}

h2.title.information a::before,
h2.title.blog a::before {
    content: '>';
    padding: 0 min(10rem, 10px) 0 0;
}

h2.title.blog {
    align-items: flex-end;
    height: min(90rem, 90px);
    background-position: center;
    background-image: url(lib/img/front/title_blog.svg);
    background-size: min(150rem, 150px);
}

h2.title.voice {
    align-items: flex-end;
    height: min(90rem, 90px);
    padding: 0 35% min(20rem, 20px) 0;
    background-position: 35% 0;
    background-image: url(lib/img/front/title_voice.svg);
    background-origin: padding-box;
}

h2.title.message {
    height: min(82rem, 82px);
    align-items: flex-end;
    background-position: center;
    background-image: url(lib/img/pages/title_message.svg);
}

section.management_philosophy h2{
    font-size: min(40rem,40px);
}
    section.management_philosophy {
        background: var(--textcolor3);
}
section.management_philosophy .text{
    color: var(--textcolor5);
}
section.information {
    background: #f7efee;
}

section.mv {
    padding: 0 0 min(50rem, 50px);
}

section.mv .sec_wrap {
    padding: 0 0 min(100rem, 100px);
    text-align: center;
}

section.mv iframe {
    width: min(90vw, 1100px);
    height: calc(min(90vw, 1100px) / 16 * 9);
}

.seminar_wrap {}

.seminar_wrap .seminar_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto min(80rem, 80px);
}

.seminar_img {
    width: 100%;
}

.seminar_img img {
    width: 100%;
    height: min(260rem, 260px);
    object-fit: cover;
}

.seminar_text {
    width: 100%;
    max-width: min(655rem, 655px);
}

.seminar_title {
    font-size: min(25rem, 25px);
    position: relative;
    display: flex;
    margin: min(10rem, 10px) 0 min(20rem, 20px);
    padding: 0 0 min(10rem, 10px);
    color: var(--textcolor3);
}

.seminar_title::before {
    position: absolute;
    bottom: 0;
    content: '';
    width: 100%;
    height: min(1rem, 1px);
    background-size: min(12rem, 12px) min(1rem, 1px);
    background-image: linear-gradient(to right, #e7c1bd, #e7c1bd min(6rem, 6px), transparent min(6rem, 6px), transparent min(12rem, 12px));
    background-repeat: repeat-x;
}

.seminar_text dl {
    display: flex;
    margin: min(10rem, 10px) 0;
}

.seminar_text dt {
    width: 100%;
    max-width: min(80rem, 80px);
}

.seminar_text dd {
    text-align: left;
}

.seminar_text a.seminar_btn {
    width: min(340rem, 340px);
    height: min(65rem, 65px);
    margin: min(20rem, 20px) auto min(20rem, 20px) 0;
    font-size: min(20rem, 20px);
    color: var(--textcolor3);
    background: var(--textcolor5);
    border: min(6rem, 6px) solid var(--textcolor3);
    border-radius: min(10rem, 10px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.seminar_text a.seminar_btn::before {
    content: '>';
    padding: 0 min(15rem, 15px) 0 0;
}

.seminar_text a.seminar_btn:hover {
    color: var(--textcolor5);
    background: var(--textcolor3);
    border: min(6rem, 6px) solid var(--textcolor3);
}

a.all_btn {
    width: 100%;
    height: min(80rem, 80px);
    margin: min(20rem, 20px) 0 min(80rem, 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(25rem, 25px);
    background: var(--textcolor4);
    color: var(--textcolor5);
    border-radius: min(10rem, 10px);
}

a.all_btn::before {
    content: '>';
    padding: 0 min(15rem, 15px) 0 0;
}

.information_wrap {
    background: var(--textcolor5);
    font-size: min(16rem, 16px);
    margin: min(50rem, 50px) auto;
    padding: min(25rem, 25px) min(25rem, 25px) min(35rem, 35px);
    border-radius: min(15rem, 15px);
}

.information_wrap .information_list {
    position: relative;
    display: flex;
    padding: min(20rem, 20px) 0;
}

.information_wrap .information_list::before {
    position: absolute;
    bottom: 0;
    content: '';
    width: 100%;
    height: min(1rem, 1px);
    background-size: min(12rem, 12px) min(1rem, 1px);
    background-image: linear-gradient(to right, #e7c1bd, #e7c1bd min(6rem, 6px), transparent min(6rem, 6px), transparent min(12rem, 12px));
    background-repeat: repeat-x;
}

.information_wrap .time {
    width: 100%;
    max-width: min(100rem, 100px);
    color: var(--textcolor3);
}

.blog_wrap {
    margin: min(70rem, 70px) 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.blog_wrap li {
    width: 100%;
}

.blog_list.gap {
    display: none;
}

.blog_img {
    width: 100%;
    height: min(220rem, 220px);
}

.blog_img img {
    width: 100%;
    height: min(220rem, 220px);
    border-radius: min(15rem, 15px);
    object-fit: cover;
}

.blog_text .time {
    color: var(--textcolor3);
    font-size: min(15rem, 15px);
    line-height: min(30rem, 30px);
}

.blog_title {
    font-size: min(22rem, 22px);
    line-height: min(30rem, 30px);
}

section.store {
    background: var(--textcolor3);
    color: var(--textcolor5);
    text-align: center;
    position: relative;
}

section.store .store_wrap {
    height: min(210rem, 210px);
}

section.store .store_wrap p {
    margin: 0;
    font-size: min(20rem, 20px);
    line-height: min(24rem, 24px);
}

section.store .kids_room {
    max-width: 25%;
    position: absolute;
    top: min(-50rem, 50px);
    right: 0;
}

section.store_list {
    height: min(1100rem, 1100px);
    background: #f7efee;
    position: relative;
}

section.store_list .sec_wrap.flex {
    height: min(550rem, 550px);
    position: absolute;
    top: min(-80rem, -80px);
    left: 0;
    right: 0;
}

.store_img {
    width: min(520rem, 520px);
}

.store_img p {
    font-size: min(20rem, 20px);
    line-height: min(24rem, 24px);
}

section.store_list .sec_wrap.online {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.online_btn {
    width: 100%;
    height: min(90rem, 90px);
    color: var(--textcolor5);
    background: var(--textcolor4);
    border-radius: min(10rem, 10px);
    position: relative;
}

.online_btn img {
    width: 100%;
    max-width: 40%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: min(10rem, 10px);
}

.online_text {
    width: calc(100% - 40% - 20rem);
    margin: 0 0 0 auto;
    font-size: min(16rem, 16px);
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.online_text span {
    font-size: min(22rem, 22px);
}

.voice_wrap {
    margin: min(60rem, 60px) 0;
    display: flex;
    align-items: center;
    font-size: min(18rem, 18px);
    line-height: min(31rem, 31px);
}

.voice_wrap h3 {
    margin: 0;
    text-align: left;
    font-size: min(24rem, 24px);
    line-height: min(32rem, 32px);
}

.voice_wrap img {
    width: min(100rem, 100px);
    height: min(100rem, 100px);
    border-radius: 50%;
}

.voice_space {
    width: min(130rem, 130px);
    color: var(--textcolor3);
    font-size: min(250rem, 250px);
    font-weight: 100;
    text-align: center;
    line-height: 0;
}

.voice_text {
    width: 100%;
    max-width: min(710rem, 710px);
    text-align: left;
}

@media (min-width: 481px) {

    .icon1,
    .icon2 {
        width: min(236rem, 236px);
        height: min(236rem, 236px);
        border: min(12rem, 12px) solid var(--textcolor3);
        border-radius: min(10rem, 10px);
        margin: 0 0 min(34rem, 34px);
    }

    .icon1 a,
    .icon2 a {
        font-size: min(30rem, 30px);
    }

    .seminar_text {
        max-width: min(375rem, 375px);
    }

    .seminar_img {
        max-width: min(390rem, 390px);
    }

    .seminar_img img {
        max-width: min(390rem, 390px);
    }

    .blog_wrap li {
        width: 50%;
        margin: 0 auto;
    }

    .blog_img {
        max-width: min(330rem, 330px);
    }

    .blog_img img {
        max-width: min(330rem, 330px);
    }
}

@media (min-width: 801px) {
    h2.title {
        font-size: min(45rem, 45px);
    }

    h2.title span {
        font-size: min(35rem, 35px);
    }

    h2.title.information {
        align-items: flex-end;
        height: min(275rem, 275px);
        background-size: min(920rem, 920px) min(245rem, 245px);
    }

    h2.title.information a,
    h2.title.blog a {
        bottom: 0;
    }

    h2.title.seminar {
        height: min(175rem, 175px);
    }

    h2.title.management_philosophy {
        height: min(165rem, 165px);
    }

    h2.title.management_philosophy img {
        width: min(400rem, 400px);
        top: min(-150rem, -150px);
    }

    h2.title.blog {
        height: min(130rem, 130px);
        background-size: 100% min(100rem, 100px);
    }

    h2.title.voice {
        height: min(125rem, 125px);
    }

    section.front_sec2 {
        height: min(560rem, 560px);
    }

    .header {
        padding: min(140rem, 140px) 0 0 0;
    }

    .header h1 {
        position: absolute;
        z-index: 1;
        width: 100%;
        color: var(--textcolor5);
        font-size: min(78rem, 76px);
        line-height: 1;
        text-align: center;
        margin: 0 auto;
        bottom: 20%;
        filter: drop-shadow(2px 4px 6px #333);
    }

    .sec_wrap {
        max-width: min(1120rem, 1120px);
        padding: min(80rem, 80px) min(10rem, 10px);
        width: 100%;
        margin: 0 auto;
    }

    section.store_list {
        height: min(860rem, 860px);
    }

    section.store_list .sec_wrap.flex {
        height: min(550rem, 550px);
    }

    .online_btn {
        height: min(180rem, 180px);
    }

    .online_btn img {
        max-width: min(320rem, 320px);
        left: min(45rem, 45px);
    }

    .online_text {
        width: calc(100% - 40% - 20rem);
        margin: 0 0 0 auto;
        font-size: min(23rem, 23px);
        line-height: 1.5;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .online_text span {
        font-size: min(47rem, 47px);
    }

    .voice_wrap h3 {
        font-size: min(25rem, 25px);
        line-height: min(46rem, 46px);
    }

    .voice_wrap img {
        width: min(250rem, 250px);
        height: min(250rem, 250px);
    }

    .information_wrap {
        font-size: min(20rem, 20px);
        margin: min(50rem, 50px) auto;
        padding: min(50rem, 50px) min(55rem, 55px) min(70rem, 70px);
    }

    .information_wrap .time {
        max-width: min(180rem, 180px);
    }

    .blog_wrap li {
        width: calc(100% / 3);
    }

    .blog_list.gap {
        display: block;
    }

    .seminar_text {
        max-width: min(655rem, 655px);
    }

}


.page_top {
    position: fixed;
    height: 50rem;
    font-size: 10rem;
    bottom: 130rem;
    right: 20rem;
    z-index: 5;
}

.page_top a {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    color: #bf1733;
    text-decoration: none;
    filter: drop-shadow(1px 2px 4px #ccc);
}

.page_top a:hover {
    color: #666;
    text-decoration: none;
}

.page_top img {
    width: min(70rem, 70px);
}




.contents_wrap {
    min-height: 100vh;
    padding: 0 min(10rem, 10px);
}

.contents {
    padding: min(30rem, 30px) min(10rem, 10px);
}
.contents_seminar {
    padding: min(30rem, 30px) min(10rem, 10px);
}
.contents_left {
    margin: 0 0 20rem 0;
}

.contents_right {
    margin: 0 0 20rem 0;
}

ul.post_list {}

ul.post_list h4 {
    display: flex;
    justify-content: space-between;
    font-size: 15rem;
}

ul.post_list h4 span {
    font-size: 14rem;
}

.page_share {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.page_share ul {
    display: flex;
    margin: 0;
}

.page_share ul li {
    padding: 0 10rem;
}

.page_share ul li.share_line img {
    width: 20rem;
    height: 20rem;
}

.page_share ul li.share_line img path:hover {
    fill: #bf1733;
}


.page section {
    text-align: center;
}

.page section .sec_wrap h3 {
    display: inline-block;
    position: relative;
}

.page section .sec_wrap h3 img {
    display: block;
    width: 100%;
    max-width: min(40rem, 40px);
    height: min(35rem, 35px);
    position: absolute;
    left: min(-40rem, -40px);
}

.page_header {
    height: min(340rem, 340px);
    padding: min(140rem, 140px) 0 0 0;
    background: var(--textcolor3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_header h1 {
    color: var(--textcolor5);
    font-size: min(48rem, 48px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_header svg {
    width: 100%;
    max-width: min(80rem, 80px);
    height: min(80rem, 80px);
    margin: 0 min(20rem, 20px) 0 0;
}

.page section.excerpt {
    height: min(180rem, 180px);
    background: var(--textcolor3);
    position: relative;
}

.page section.excerpt .sec_wrap {
    padding: min(35rem, 35px) min(60rem, 60px);
    background: var(--textcolor5);
    border-radius: min(15rem, 15px);
    position: absolute;
    left: 0;
    right: 0;
}

.page section.excerpt .sec_wrap h2 {
    width: auto;
    margin: min(20rem, 20px) 0;
    padding: 0 min(10rem, 10px);
    font-size: min(24rem, 24px);
    color: var(--textcolor3);
    display: inline-block;
    position: relative;
}

.page section.excerpt .sec_wrap h2::before {
    width: 100%;
    max-width: min(50rem, 50px);
    height: min(180rem, 180px);
    position: absolute;
    top: 0;
    left: min(-35rem, -35px);
    content: url(lib/img/common/h1_head_before.svg);
}

.page section.excerpt .sec_wrap h2::after {
    width: 100%;
    max-width: min(50rem, 50px);
    height: min(180rem, 180px);
    position: absolute;
    top: 0;
    right: min(-35rem, -35px);
    content: url(lib/img/common/h1_head_after.svg);
}

.page section.sec2 p {
    text-align: left;
}

.page section.sec2 img {
    width: 100%;
    max-width: min(220rem, 2200px);
    height: min(180rem, 180px);
}

section.message {
    background: #f7efee;
}

section.message .voice_text {
    font-size: min(17rem, 17px);
    line-height: min(27rem, 27px);
}

section.consultation {}

.page section.consultation .sec_wrap .consultation_wrap {
    padding: min(20rem, 20px);
    color: var(--textcolor3);
    text-align: left;
    font-size: min(21rem, 21px);
    line-height: min(44rem, 44px);
    border: min(6rem, 6px) solid var(--textcolor4);
    border-radius: min(20rem, 20px);
}

.page section.consultation .sec_wrap .consultation_wrap h3 {
    margin: 0;
    font-size: min(28rem, 28px);
    text-align: left;
    display: flex;
    align-items: center;
}

.page section.consultation .sec_wrap .consultation_wrap h3::before {
    position: absolute;
    bottom: 0;
    content: '';
    width: 100%;
    height: min(1rem, 1px);
    background-size: min(12rem, 12px) min(1rem, 1px);
    background-image: linear-gradient(to right, #e7c1bd, #e7c1bd min(6rem, 6px), transparent min(6rem, 6px), transparent min(12rem, 12px));
    background-repeat: repeat-x;
}

.page section.consultation .sec_wrap .consultation_wrap h3 span {
    font-size: min(15rem, 15px);
    display: contents;
}

.page section.consultation .sec_wrap .consultation_wrap h3 img {
    max-width: min(66rem, 66px);
    height: min(66rem, 66px);
    margin: 0 min(17rem, 17px);
    position: inherit;
    left: 0;
}

.consultation_text {}

.staff_wrap.flex {
    max-width: min(860rem, 860px);
    margin: 0 auto;
    align-items: center;
}

.staff_text {
    text-align: left;
    font-size: min(17rem, 17px);
    line-height: min(27rem, 27px);
}

.page section.seminar {
    background: #f7efee;
}

.page h2.title.seminar {
    height: min(175rem, 175px);
    background-position: center;
    background-image: url(lib/img/pages/title_seminar.svg);
}

.dateils {
    width: 100%;
    max-width: min(800rem, 800px);
    margin: min(30rem, 30px) auto;
    padding: min(10rem, 10px);
    border-radius: min(5rem, 5px);
    background: var(--textcolor6);
}

.dateils dl {
    margin: 0;
    padding: min(10rem, 10px);
    display: flex;
    position: relative;
    background: var(--textcolor6);
}

.dateils dl::before {
    position: absolute;
    bottom: 0;
    content: '';
    width: calc(100% - min(20rem, 20px));
    height: min(1rem, 1px);
    background-size: min(12rem, 12px) min(1rem, 1px);
    background-image: linear-gradient(to right, #e7c1bd, #e7c1bd min(6rem, 6px), transparent min(6rem, 6px), transparent min(12rem, 12px));
    background-repeat: repeat-x;
}

.dateils dl:last-of-type::before {
    content: none;
}

.dateils dl dt {
    width: 25%;
    padding: min(10rem, 10px);
    background: #e7c1bd;
}

.dateils dl dd {
    width: 75%;
    margin: 0;
    padding: min(10rem, 10px);
}

@media (min-width: 481px) {}

@media (min-width: 801px) {
    .page_top {
        bottom: min(50rem, 50px);
    }

    .contents_wrap {
        max-width: min(1100rem, 1100px);
        margin: 0 auto;
    }
    .contents_seminar {
        max-width: min(800rem, 800px);
        margin: 0 auto;
    }
    .contents_left {
        padding: 0 20rem;
    }

    .contents_right {
        padding: 0 20rem;
    }

    ul.post_list {
        display: flex;
        flex-wrap: wrap;
    }

    ul.post_list li.post_item {
        list-style: none;
        width: 100%;
        max-width: calc((100% - 120rem) / 3);
        margin: 20rem;
    }

    .page section {
        text-align: center;
    }

    .page section .sec_wrap h3 {
        display: inline-block;
        position: relative;
    }

    .page section .sec_wrap h3 img {
        display: block;
        width: 100%;
        max-width: min(40rem, 40px);
        height: min(35rem, 35px);
        position: absolute;
        left: min(-40rem, -40px);
    }

    .page_header {
        height: min(340rem, 340px);
        padding: min(140rem, 140px) 0 0 0;
        background: var(--textcolor3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .page_header h1 {
        font-size: min(59rem, 59px);
    }

    .page_header svg {
        max-width: min(120rem, 120px);
        height: min(120rem, 120px);
    }

    .page section.excerpt {
        height: min(180rem, 180px);
        background: var(--textcolor3);
        position: relative;
    }

    .page section.excerpt .sec_wrap {
        padding: min(35rem, 35px) min(60rem, 60px);
        background: var(--textcolor5);
        border-radius: min(15rem, 15px);
        position: absolute;
        left: 0;
        right: 0;
    }

    .page section.excerpt .sec_wrap h2 {
        width: auto;
        margin: min(60rem, 60px);
        font-size: min(40rem, 40px);
        color: var(--textcolor3);
        display: inline-block;
        position: relative;
    }

    .page section.excerpt .sec_wrap h2::before {
        width: 100%;
        max-width: min(72rem, 72px);
        height: min(180rem, 180px);
        position: absolute;
        top: 0;
        left: min(-72rem, -72px);
        content: url(lib/img/common/h1_head_before.svg);
    }

    .page section.excerpt .sec_wrap h2::after {
        width: 100%;
        max-width: min(72rem, 72px);
        height: min(180rem, 180px);
        position: absolute;
        top: 0;
        right: min(-72rem, -72px);
        content: url(lib/img/common/h1_head_after.svg);
    }

    .page section.sec2 p {
        text-align: left;
    }

    .page section.sec2 img {
        width: 100%;
        max-width: min(220rem, 2200px);
        height: min(180rem, 180px);
    }

    section.message {
        background: #f7efee;
    }

    section.message .voice_text {
        font-size: min(17rem, 17px);
        line-height: min(27rem, 27px);
    }

    section.consultation {}

    .page section.consultation .sec_wrap .consultation_wrap {
        padding: min(40rem, 40px) min(50rem, 50px);
        color: var(--textcolor3);
        text-align: left;
        font-size: min(21rem, 21px);
        line-height: min(44rem, 44px);
        border: min(6rem, 6px) solid var(--textcolor4);
        border-radius: min(20rem, 20px);
    }

    .page section.consultation .sec_wrap .consultation_wrap h3 {
        margin: 0;
        font-size: min(28rem, 28px);
        text-align: left;
        display: flex;
        align-items: center;
    }

    .page section.consultation .sec_wrap .consultation_wrap h3::before {
        position: absolute;
        bottom: 0;
        content: '';
        width: 100%;
        height: min(1rem, 1px);
        background-size: min(12rem, 12px) min(1rem, 1px);
        background-image: linear-gradient(to right, #e7c1bd, #e7c1bd min(6rem, 6px), transparent min(6rem, 6px), transparent min(12rem, 12px));
        background-repeat: repeat-x;
    }

    .page section.consultation .sec_wrap .consultation_wrap h3 span {
        font-size: min(15rem, 15px);
    }

    .page section.consultation .sec_wrap .consultation_wrap h3 img {
        max-width: min(66rem, 66px);
        height: min(66rem, 66px);
        margin: 0 min(17rem, 17px);
        position: inherit;
        left: 0;
    }

    .consultation_text {
        padding: min(20rem, 20px) min(100rem, 100px) 0;
    }

    .staff_wrap.flex {
        max-width: min(860rem, 860px);
        margin: 0 auto;
        align-items: center;
    }

    .staff_text {
        text-align: left;
        font-size: min(17rem, 17px);
        line-height: min(27rem, 27px);
    }

}









.br_pc {
    display: none;
}

.br_sp {
    display: block;
}

@media (min-width: 801px) {
    .br_pc {
        display: block;
    }

    .br_sp {
        display: none;
    }

    .pc_view {
        display: block;
    }

    .sp_view {
        display: none;
    }
}

.load_top,
.fade_in {
    opacity: 0;
    transition: all .5s ease 0s;
}

.fade_in_left {
    transform: translate(-10vw, 0);
}

.fade_in_right {
    transform: translate(10vw, 0);
}

.fade_in_top {
    transform: translate(0, -10vh);
}

.fade_in_bottom {
    transform: translate(0, 5vh);
}

.load_top.active,
.fade_in.active {
    transform: translate(0, 0);
    opacity: 1;
}

.slowin_top {
    transform: translateX(0);
    opacity: 1;
    transition: all 2s ease 0s;
}

.fade::before {
    transform: scale(0, 1);
    transition: all .5s ease 0s;
}

.fade_left::before {
    transform-origin: left top;
}

.fade_right::before {
    transform-origin: right top;
}

.fade.active::before {
    transform: scale(1, 1);
}