@charset "utf-8";

/*---------------------------------
Font
---------------------------------*/
/* English
---------------------------------*/
:root{
    --main-color:#e95f75;
    --sub-color:#338a93;
	--deepgreen-color:#4d7370;
    
    --linear-gradation01:linear-gradient(173deg, hsla(0,0%,100%,.1) 0%, hsla(0,0%,100%,0) 49.22%, hsla(0,0%,100%,.14) 49.22%, hsla(0,0%,100%,0) 98.96%); /*グラデーション*/
}

html {
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    width: 100%;
    height: 100%;
    background: #fff;
}
body {
    margin: 0;
    font-family: "游ゴシック", YuGothic, 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", sans-serif;
    color: #626262;
    font-weight: 500;
    height: 100%;
    width: 100%;
    font-size: 1.4rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
div {
    box-sizing: border-box;
}
a {
    color: var(--main-color);
    font-weight: 700;
}
a:hover {
    color: var(--main-color);
}
a:visited {
    color: var(--main-color);
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ol {
    padding-left: 1.6rem;
}
img {
    max-width: 100%;
}
p {
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.6em;
    font-weight: 500;
}
p + p {
    margin: 1.6em 0 0 0;
}
strong {
    font-weight: 700;
    background:linear-gradient(transparent 60%, #E3FD80 60%);
}
li {
    font-size: 1.5rem;
}
li + li {
    margin-top: 4px;
}

@media (min-width: 769px) {
    p {
        font-size: 1.6rem;
    }
    li {
        font-size: 1.6rem;
    }
    li + li {
        margin-top: 8px;
    }
}
/*---------------------------------
Common
---------------------------------*/
#wrapper {
    position: relative;
    padding-top: 71px;
    min-height: 100%;
    height: auto;
    box-sizing:border-box;
    animation: fadein 2s ease 0s 1 normal;
    -webkit-animation: fadein 2s ease 0s 1 normal;
}
.obj-fit-img {
    object-fit: cover;
    object-position: center;
    font-family: 'object-fit: cover; object-position: center;'
}
.container {
    margin: 0 3.2vw 2em;
}

.display_pc {
    display: none;
}
.display_sp {
    display: block;
}
@media (min-width: 769px) {

    .container {
        max-width: 1280px;
        padding: 0 40px;
        margin: 0 auto 4em;
		position:relative;
    }
    .page_content_wrapper .container {
        max-width: 1080px;
        padding: 0 40px;
    }
}
@media (min-width: 1000px) {
    #wrapper {
        padding-top: 80px;
    }
    .display_pc {
        display: block;
    }
    .display_sp {
        display: none;
    }
}

/*
Btn
---------------------------------*/
a.btn {
    position: relative;
    border: solid 2px #000340;
    color: #000340;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 8px 8px 9px;
    display: block;
    border-radius: 24px;
    text-align: center;
}
a.btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_n.svg) center/100% no-repeat;
}
a.btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_g.svg) center/100% no-repeat;
}

a.btn.btn_green {border: solid 2px #fff;color: #fff; background-color: var(--main-color); width: 90%; margin: auto; max-width: 230px;}
a.btn.btn_green::after {
    background: url(../img/icon_angle_r_g.svg) center/100% no-repeat;
}
a.btn.btn_green::before {
    background: url(../img/icon_angle_r_n.svg) center/100% no-repeat;
}

.btn_wrapper {
    margin: 32px auto 0;
    max-width: 320px;
}
@media (min-width: 769px) {
    a.btn {
        padding: 12px 12px 13px;
        border-radius: 28px;
        transition: background-color .3s, color .3s;
    }
    a.btn:hover {
        background-color: #000340;
        color: #E3FD80;
    }
    a.btn::after {
        height: 20px;
        width: 10px;
        transition: opacity .3s;
    }
    a.btn::before {
        height: 20px;
        width: 10px;
    }
    a.btn:hover::after {
        opacity: .0;
    }

    a.btn.btn_green:hover {
        background-color: #E3FD80;
        color: #000340;
    }

    .btn_wrapper {
        margin: 64px auto 0;
    }
}




/*---------------------------------
Breadcrumb
---------------------------------*/
.breadcrumb_wrapper {
    background: #F0F2E9;
    width: 100%;
    z-index: 3;
}
.breadcrumb {
    width: 100%;
    padding: 16px 3.2vw;
overflow-x: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
}
.breadcrumb > span {
    color: #000340;
}
.breadcrumb a {
    color: var(--main-color);
}
.separator {
    font-size: 0;
    position: relative;
    padding-left: 20px;
}
.separator::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    width: 8px;
    margin: auto;
    background: url(../img/icon_angle_r_p.svg) center/100% no-repeat;
}
@media (min-width: 769px) {
    .breadcrumb_wrapper {
        right: 0;
        margin: auto;
    }
    .breadcrumb {
        max-width: 1280px;
        padding: 16px 40px;
        margin: 0 auto;
        font-size: 1.4rem;
    }
    .breadcrumb a:hover {
        opacity: .7;
    }
}





/*---------------------------------
Header
---------------------------------*/
#header {
    background: #fff;
    padding: 0 0 24px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.header_container {
    margin: 0 3.2vw;
padding: 7px 48px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header_logo {
    font-size: 0;
}
.header_logo a {
    display: block;
    color: #575355;
    text-decoration: none;
}
.header_logo img {
    height: 40px;
    width: auto;
}
.header_logo h1,
.header_logo p {
    font-size: 1rem;
    font-weight: 700;
    margin: 8px 0 0;
    line-height: 1.2;
    position: fixed;
    left: 0;
    right: 0;
    display: block;
    width: 300px;
    text-align: center;
    line-height: 20px;
    border-radius: 15px;
    top: 40px;
        margin: 8px auto 0;
}

.btn_mail {width: 30px;height:40px;}
.btn_mail a { display: block;}
.btn_mail a img{margin:5px 0;}
.login_btn {
    display: none;
}
@media (min-width: 1373px) {
    #header {
        padding: 0;
        height: 80px;
    }
    .header_container {
        margin: 0 40px;
        padding: 0;
        height: 100%;
    }
    .header_logo {flex-shrink: 0;width:200px; }
    .header_logo a {
        transition: opacity .3s;
    }
    .header_logo a:hover {
        opacity: .7;
    }
    .header_logo img {height: auto;width:100%;}
    .header_logo h1,
    .header_logo p {
        font-size: 1.2rem;top:50px;
    }
    /* .btn_mail {
        display: none;
    }

    .login_btn {
        display: block;
        margin-left: 16px;
    }
    .login_btn a.btn {
        padding: 8px 40px 8px 8px;
        font-size: 1.2rem;
    }
    .login_btn a.btn::after {
        background: url(../img/icon_login_g.svg) center/100% no-repeat;
        width: 16px;
    }
    .login_btn a.btn::before {
        background: url(../img/icon_login_n.svg) center/100% no-repeat;
        width: 16px;
    }*/
}
@media (min-width: 1200px) {
    .login_btn a.btn {
        /* padding: 10px 40px 10px 10px; */
        font-size: 1.4rem;
    }
}
@media (min-width: 1373px) {
        .btn_mail {
        display: none;
    }
       .login_btn {
        display: block;
           width:140px;
    }
    .login_btn a.btn {
        padding: 8px 40px 8px 8px;
        font-size: 1.2rem;
    }
    .login_btn a.btn::after {
        background: url(../img/icon_login_g.svg) center/100% no-repeat;
        width: 16px;
    }
    .login_btn a.btn::before {
        background: url(../img/icon_login_n.svg) center/100% no-repeat;
        width: 16px;
    }
}

/*
Btn Menu
---------------------------------*/
.btn_menu {
    display: block;
    height: 36px;
    width: 36px;
    position: absolute;
    top: 12px;
    right: 3.2vw;
    margin: auto;
    box-sizing: border-box;
    cursor: pointer;
    transition: opacity .3s;
    text-decoration: none;
}
.btn_menu:hover {
    text-decoration: none;
}
.btn_menu span {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--sub-color);
    transition: all .4s;
}
.global_nav .btn_menu span {
    background: #fff;
}
.btn_menu span:nth-child(2) {
    top: 9px;
}
.btn_menu span:nth-child(3) {
    top: 18px;
}
.btn_menu p {
    position: absolute;
    bottom: 0;
    left: 0;
    color: var(--sub-color);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin: 6px 0 0;
    letter-spacing: .1em;
    text-align: center;
}
.btn_menu.active span:nth-child(1) {
    transform: translateY(9px) rotate(32deg);
}
.btn_menu.active span:nth-child(2) {
    opacity: 0;
}
.btn_menu.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-32deg);
}
@media (min-width: 769px) {
    /* .btn_menu {
        display: none;
    }
    .btn_menu {
        position: static;
        margin: 0;
        width: 56px;
        height: 56px;
    }
    .btn_menu span {
        width: 32px;
        height: 4px;
    }
    .btn_menu span:nth-child(2) {
        margin-top: 10px;
    }
    .btn_menu span:nth-child(3) {
        margin-top: 10px;
    }
    .btn_menu.active span:nth-child(1) {
        transform: rotate(42deg);
        width: 42px;
    }
    .btn_menu.active span:nth-child(3) {
        transform: rotate(-42deg);
        width: 42px;
    } */
}
@media (min-width: 1373px) {
    .btn_menu {
        display: none;
    }
}



/*---------------------------------
Global nav
---------------------------------*/
.global_nav {
    display: none;
}
@media (min-width: 1373px) {
    .global_nav { display: block; margin:  0 auto 0 ;width: calc(100% - 340px); box-sizing: border-box;}
    .g_nav_list { display: flex;justify-content: center; }
    .g_nav_item {
        margin: 0;
    }
    .g_nav_item + .g_nav_item {
        margin-left: 16px;
    }
    .g_nav_item a {
        font-size: 1.4rem;
        color: var(--sub-color);
        text-decoration: none;padding: 0.5em;
    }
}
@media (min-width: 1500px) {
  .g_nav_item a {
    font-size: 1.7rem;
  }
}

/*---------------------------------
Menu nav
---------------------------------*/
.menu_nav {
    position: fixed;
    top: 60px;
    left: 0;
    width:  100%;
    height: 0;
    min-height: 0;
    transition: min-height .3s;
    background: #000340;
    overflow: hidden;
    z-index: 1;
}
.menu_nav.active {
    min-height: 100vh;
}
.menu_nav_inner {
    margin: 0 3.2vw;
    padding: 24px 0 80px;
}

.menu_nav_login a.btn::after {
    background: url(../img/icon_login_g.svg) center/100% no-repeat;
    width: 16px;
}

.menu_nav_item {
    margin-top: 16px;height: 46px;
}
.menu_nav_item a {
    position: relative;
    color: #fff;
    padding-left: 24px;
    text-decoration: none;
	display: block;
	line-height: 46px;
}
.menu_nav_item a::before {
 content: ""; position: absolute;margin:auto; top: 0px;bottom:0; left: 0; height: 16px; width: 10px;  clip-path: polygon(0% 0%, 100% 50%, 0% 100%); border-radius: 4px;background-color: var(--main-color);
}

.menu_nav .entry_btn_list {
    margin-top: 24px;
}

@media (min-width: 1373px) {
    .menu_nav {
        display: none;
    }
}



/*---------------------------------
Footer
---------------------------------*/
#footer {
    background: #000340;
    padding: 32px 0 250px;
}
.footer_inner {
    margin: 0 3.2vw;
}
.footer_nav_item {
    margin-top: 16px;
}
.footer_nav_item a {
    position: relative;
    color: #fff;
    padding-left: 24px;
    text-decoration: none;
}
.footer_nav_item a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 16px;
    width: 8px;
    margin: auto;
    background: url(../img/icon_angle_r_w.svg) center/100% no-repeat;
}
.copy {
    margin-top: 24px;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
}
#line_box , #login_box{ width: 140px;border-radius: 100px;bottom: 6px;box-sizing:border-box;box-shadow:0 0 0 2px #0002;}
#line_box a , #login_box a{box-sizing:border-box;border: 2px solid #fff; border-radius: 100px;}
#line_box {
    position: fixed;
    left: 10px;
    background-color: #06C755;
	    background-image: var(--linear-gradation01);
}
#line_box a {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0 0 0 48px;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: #fff;
    text-decoration: none;
    height: 48px;
}
#line_box a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    margin: auto;
    height: 24px;
    width: 24px;
    background: url(../img/icon_line_w.svg) center/100% no-repeat;
}
#line_box a::after {
    content: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_w.svg) center/100% no-repeat;
}

#login_box {
    position: fixed;
    left: calc((100% - 56px) /2);
 background-color: var(--main-color);
    background-image: var(--linear-gradation01);
}
#login_box a {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 12px;
    padding: 0 0 0 40px;
    letter-spacing: 0.1em;
    color: #fff;
    text-decoration: none;
    height: 48px;
}
#login_box a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    margin: auto;
    height: 20px;
    width: 20px;
    background: url(../img/icon_login_w.svg) center/100% no-repeat;
}



#return_top {
    z-index: 999;
    position: fixed;
    right: 6px;
    bottom: 6px;
    background: #7E809E;
    width: 48px;
    height: 48px;
    border-radius: 100px;
	box-sizing: border-box;
    border: 2px solid white;
    box-shadow: 0 0 5px 0 #0004;
}
#return_top a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#return_top img {
    width: 20px;
}

@media (min-width: 769px) {
    #footer {
        padding: 80px 0 250px;
    }
    .footer_inner {
        max-width: 1280px;
        padding: 0 40px;
        margin: 0 auto;
    }
    .footer_nav_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer_nav_item {
        margin: 0;
        border-right: solid 1px #fff;
    }
    .footer_nav_item a {
        padding: 0 16px;
        transition: opacity .3s;
    }
    .footer_nav_list .footer_nav_item:last-child {
        border-right: none;
    }
    .footer_nav_item a:hover {
        opacity: .7;
    }
    .footer_nav_item a::before {
        content: none;
    }
    .copy {
        margin-top: 48px;
    }


    #line_box,
    #login_box {
        display: none;
    }

    #return_top {
        right: 24px;
        bottom: 24px;
    }
}

/*---------------------------------
Mv
---------------------------------*/
.mv { position: relative;min-height: 605px;background-color:beige;}
.mv_container {position: absolute;z-index: 2;bottom: 0; height: 100%;width: 100%;}
.mv::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 160px;
    width: 200px;
    background: url(../img/mv_bg_left.svg) bottom left/100% no-repeat;
    mix-blend-mode: multiply;
}
.mv::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 160px;
    width: 200px;
    background: url(../img/mv_bg_right.svg) bottom right/100% no-repeat;
    mix-blend-mode: multiply;
}
.mv_inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.mv_illust {
    position: absolute;
    width: 54%;
    bottom: 0;
    left: -13%;
}
.mv_text {
    width: 72%;
    margin: 0 0 0 auto;
    padding: 8px 0 0 0;
}
.mv_title {
	position: absolute;
    filter: drop-shadow(2px 4px 0px #0009);
    left: 2em;
	height:20%;
	display: flex;
    align-items: center;
	width: 75%;
    max-width: 450px;
}
.mv_title img{width:100%;height:auto;}
.mv_frame_wrapper {
	position: absolute;
    margin: 16px auto;
    filter: drop-shadow(rgba(0, 3, 64, 0.5) 4px 4px 0);
    bottom: 70px;
    left: 0;
    right: 0;
    width: 90%;
}
.mv_frame {
    padding: 1px 0 1px 1px;
}
.mv_frame_inner {
    background: #fff;
    padding: 12px 3.2vw 12px 12px;
}
.mv_frame p {
    font-size: 12px;
    font-weight: 700;
    color: #000340;
}

.mv_entry {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -28px;
    width: calc(100% - 6.4vw);
    margin: auto;
}

.entry_btn_list {
    display: flex;
    justify-content: space-between;
	padding: 2em 0;
}
.entry_btn_list > div {
    width: 48%;
}
.btn_entry_home {
    border: solid 2px #000340;
    border-radius: 100px;
    box-shadow: rgba(0, 3, 64, 0.5) 4px 4px 0;
}
.btn_entry_home a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: #fff;
    background: var(--main-color);
    padding: 12px 0;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 100px;
    font-size: 1.8rem;
}
.btn_entry_home img {
    width: 20px;
    margin-right: 8px;
}
.btn_entry_work {
    border: solid 2px #000340;
    border-radius: 100px;
    box-shadow: rgba(0, 3, 64, 0.5) 4px 4px 0;
}
.btn_entry_work a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: var(--sub-color);
    padding: 12px 0;
    text-decoration: none;
    border: solid 2px #fff;
    border-radius: 100px;
    font-size: 1.8rem;
}
.btn_entry_work img {
    width: 20px;
    margin-right: 8px;
}

@media (min-width: 375px) {
    .mv_illust {
        position: absolute;
        width: 100%;
        max-width: 500px;
        bottom: 0;
        left: 0px;
		height:80%;
    }
	.mv_illust img{
	height: 100%;
    object-fit: cover;
    }
}

@media (min-width: 769px) {
    .mv {min-height: 670px;}
    .mv::before,
    .mv::after {
        height: 460px;
        width: 600px;
    }
    .mv_inner {
        max-width: 1280px;
        padding: 90px 40px 50px;
        margin: 0 auto;
		left: 0;
        right: 0;
    }
    .mv_illust {
        position: absolute;
        width: 60%;
        max-width: 600px;
        bottom: 0;
        left: 40px;
		height:100%;
    }
    .mv_text {
        width: 60%;
    }
    .mv_title {margin: 0 0 0 0; width: 600px; left: 40%; max-width: inherit;}

    .mv_frame_wrapper {
        margin: 48px 0;
        filter: drop-shadow(rgba(0, 3, 64, 0.5) 8px 8px 0);
		width: 60%;
        max-width: 700px;
		left: 40%;
    }
    .mv_frame {
        padding: 2px;
        clip-path: polygon(32px 0, calc(100% - 32px) 0, 100% 32px, 100% calc(100% - 32px), calc(100% - 32px) 100%, 32px 100%, 0 calc(100% - 32px), 0 32px);
    }
    .mv_frame_inner {
        clip-path: polygon(32px 0, calc(100% - 32px) 0, 100% 32px, 100% calc(100% - 32px), calc(100% - 32px) 100%, 32px 100%, 0 calc(100% - 32px), 0 32px);
        padding: 32px;
    }
    .mv_frame p {
        font-size: 1.6rem;
    }

    .mv_entry {
        position: absolute;
        width: 100%;
        bottom: 0;
    }
    .entry_btn_list {
        max-width: 880px;
        width: 60%;
        margin: 0 auto;
        position: absolute;
        bottom: -50px;
        left: 0;
        right: 0;
    }
    .btn_entry_home {
        box-shadow: rgba(0, 3, 64, 0.5) 8px 8px 0;
        border-radius: 14px;
        transition: transform .3s ,box-shadow .3s;
    }
    .btn_entry_home a {
        font-size: 2rem;
        border-radius: 12px;
        padding: 16px 0;
    }
    .btn_entry_home img {
        width: 24px;
        margin-right: 12px;
    }
    .btn_entry_home:hover {
        transform: translate(-8px,-8px);
        box-shadow: rgba(0, 3, 64, 0.5) 16px 16px 0;
    }
    .btn_entry_work {
        box-shadow: rgba(0, 3, 64, 0.5) 8px 8px 0;
        border-radius: 14px;
        transition: transform .3s ,box-shadow .3s;
    }
    .btn_entry_work a {
        font-size: 2rem;
        border-radius: 12px;
        padding: 16px 0;
    }
    .btn_entry_work img {
        width: 24px;
        margin-right: 12px;
    }
    .btn_entry_work:hover {
        transform: translate(-8px,-8px);
        box-shadow: rgba(0, 3, 64, 0.5) 16px 16px 0;
    }
}
/*
Banner
---------------------------------*/
@media (max-width: 768px) {
ul.pr-box{ scroll-snap-type: x mandatory;list-style:none;display:flex;overflow-x:scroll;width:100%;padding: 0 1em 0 0;margin:0;}
ul.pr-box li {color: black;scroll-snap-align: center;scroll-snap-stop:always; width: 160px;height:120px;flex-shrink: 0;margin: 0 0.5em;}
	ul.pr-box li a{display:block;width: 100%; height: 100%;}
ul.pr-box li img{width: 100%; height:100%; object-fit: cover; border-radius: 8px; margin: 0 0.5em; display: block; filter: drop-shadow(0px 1px 2px #0006);}
}
@media (min-width: 769px) {
ul.pr-box{ background-color:transparent; list-style: none;display: flex; width:100%;padding: 0.5em; margin: 0; box-sizing: border-box;scrollbar-width: none;scroll-snap-type: x mandatory;overflow-x:scroll;justify-content: center;}
	ul.pr-box li a{display:block;width: 100%; height: 100%;}
ul.pr-box li {color: black; width: 240px; padding: 5px; box-sizing: border-box;margin: 0;scroll-snap-align: center; scroll-snap-stop:always;}
ul.pr-box li img{width: calc(100%); height: 100%; object-fit: cover; border-radius: 8px; margin: 0; display: block; filter: drop-shadow(0px 1px 2px #0006);}
}
/*
Section
---------------------------------*/
.section {
    padding: 48px 0;
}

.sec_title { margin: 0;position:relative;height:100px;display: flex;justify-content: center;align-items: center;margin:0 auto 1em;}
.sec_title span:first-child {}
.sec_title span:first-child:before {display:block;content:"";height:11px;width:11px;position:absolute;left:-7px;top:-6px;border-radius:100px;background-color:var(--main-color)}
.sec_title span:first-child:after {display:block;content:"";height:11px;width:11px;position:absolute;right:-7px;bottom:-6px;border-radius:100px;background-color:var(--main-color)}
.sec_title .sec_title_text { text-align: center; color: #666; font-size: 2.2rem;}
@media (min-width: 769px) {
    .section {
        padding: 96px 0;
    }
    .sec_title {
        width: 100%;
        max-width: 760px;
		height: 160px;
        box-sizing: border-box;
        padding: 0 1em;
		margin: 0 auto 2em;
    }
    .sec_title .sec_title_text {
        margin: 16px 0;
        font-size: 4rem;
    }
}

/*
Section About
---------------------------------*/
.sec_about {background-color: #d9d9c0;background-image: radial-gradient(circle, #fff2 5px, transparent 5px); /* 水玉のスタイル */ background-size: 30px 30px; /* 水玉の間隔とサイズを調整 */}
.frame {
    position: relative;
    background: #fff;
    padding: 2em 1.5em;
    border: solid 2px #338a93;
	width: 90%;
    margin: 0 auto 0;border-radius: 8px;
}
.frame::before {content: ""; position: absolute; top: -6px; left: -6px; height: 36px; width: 36px; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;   border: 2px solid #fff;border-radius: 8px;}
.frame::after { content: ""; position: absolute; bottom: -6px; right: -6px; height: 36px; width: 36px; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;border: 2px solid #fff;border-radius: 8px;}
.sim_top {
    padding: 10px;
    display: block;
    margin-bottom: 10px;
    border-radius: 20px;
    text-align: center;
    padding: 20px;
    margin: 20px 0 20px 0;
    color: #000340;
}
.sim_reward {
    display: block;
    border-radius: 20px;
    text-align: center;
    color: #000340;
}
.sim_top p, label, select {
    font-size: 21px;
}
.top_item_title2 {
    top: 0;
    left: 0;
    right: 0;
    color: var(--sub-color);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.top_item_title2 span {
    position: relative;
    height: 2px;
    background: var(--sub-color);
    width: 100%;
}
.top_item_title2 span::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: var(--sub-color);
    border-radius: 50%;
}
.top_item_title2 span::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: var(--sub-color);
    border-radius: 50%;
}
.top_item_title2 h3 {
    font-size: 1.8rem!important;
    white-space: nowrap!important;
    margin: 24px 16px!important;
}
.sim_top ul{
    display: inline-block;
}
.sim_top li:first-child {
    padding-top: 0px;
    display: block;
    margin-top: -25px;
}
.sim_top ul li{
  position: relative;
}
.sim_top ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}
.sim_top ul li label{
    display: flex;
    font-size: 1.35em;
    padding: 19px 23px 14px 60px;
    height: 19px;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
    color: #000340;
    position: relative;
    font-weight: 300;
    z-index: 9;
    cursor: pointer;
}
.sim_top ul li .check{
  display: block;
  position: absolute;
  border: 3px solid #dee5eb;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 21px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
.sim_top ul li:hover .check {
  border: 3px solid #ff8372;
}

.sim_top ul li .check::before {
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 15px;
    width: 15px;
}
.sim_reward ul{
    display: inline-block;
    border-left: none!important;
}
.sim_reward li:first-child {
    padding-top: 0px;
    display: block;
    margin-top: -25px;
}
.sim_reward ul li{
  position: relative;
    display: block;
}
.sim_reward ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}
.sim_reward ul li label{
    display: flex;
    font-size: 1.35em;
    padding: 19px 23px 14px 60px;
    height: 19px;
    cursor: pointer;
    -webkit-transition: all 0.25s linear;
    color: #000340;
    position: relative;
    font-weight: 300;
    z-index: 9;
    cursor: pointer;
}
.sim_reward ul li .check{
  display: block;
  position: absolute;
  border: 3px solid #dee5eb;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 21px;
  left: 20px;
  z-index: 5;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}
.sim_reward ul li:hover .check {
  border: 3px solid #ff8372;
}
.sim_reward ul li .check::before {
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 15px;
    width: 15px;
}
input[type="radio"].day-select{display:none;}
input[type="radio"].day-select + label{color:white;font-size: 120%; background-color: #999; line-height: 46px; width: 46px;text-align: center; display: inline-block; border-radius: 100px; margin: 0 5px;}
input[type="radio"]:checked.day-select + label{background-color:var(--main-color);animation:btn-boyon 0.5s ease-in 1;transition:1s;}
@keyframes btn-boyon{
	0%{transform:scale(0.9);box-shadow:0 0 0px 0 #0005;}
	25%{transform:scale(1.2);box-shadow:0 0 4px 0 #0005;}
	50%{transform:scale(1.1);box-shadow:0 0 3px 0 #0005;}
	75%{transform:scale(0.9);box-shadow:0 0 0px 0 #0005;}
	85%{transform:scale(1);box-shadow:0 0 0px 0 #0005;}
	95%{transform:scale(0.9);box-shadow:0 0 0px 0 #0005;}
	100%{transform:scale(1);box-shadow:0 0 0px 0 #0005;}
}
input[type="radio"]:checked ~ .check {
}
input[type="radio"]:checked ~ .check::before{
    background: #ff8372;
    left: 2px;
    top: 2px;
}
.radio-002 {
    display: inline;
    flex-wrap: wrap;
    gap: .3em 2em;
    border: none;
}
label.check, select.day-time {
    font-weight: 400;
    line-height: 1.6em;
    font-size: 92%;
}
label.check {width: 100%; font-size: 16px; display: block;text-align: left;margin: 0 ;padding:10px 0;}
label.check span {position: relative;padding: 10px 10px;border-radius: 3px;box-sizing: border-box; text-align: center; margin: 3px 0;}
label.check input + span:after{display:block;content:"";height:2px;width:0%;background-color:var(--main-color);position:absolute;bottom:0;left:0;transition:0.8s;}
label.check input:checked + span:after{width:66px;background-color:var(--main-color);transition:0.8s;}
label.check input:checked{animation:btn-boyon 0.5s ease-in 1;transition:1s;accent-color: var(--main-color);}
.none {
    display: none;
}
select.day-time {
    width: 4em;
    height: 45px;
}
.shift_days {
    display: block;
    font-size: 16px;
}
.small {
    font-size: 90%;
    color: rgba(201,201,201,1.00);
    display: block;
}
.-ta-center {
    text-align: center;
}
.sim_calculation {
   position: relative;
   border: solid 2px var(--sub-color);
   color: var(--sub-color)!important;
   text-decoration: none;
   font-size: 1.8rem;
   padding: 8px 8px 9px;
   display: inline-block;
   border-radius: 24px;
   text-align: center;
    width: 50%;
}
a.sim_calculation::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_n.svg) center/100% no-repeat;
}
div#result {
   font-size: 120%;
   letter-spacing: 3px;
   color: #000340;
   text-align: center;
    margin-top: 20px;
}
div#result > span{display:block;}
div#result strong{font-size:200%;}
.sim_title{
    font-size: 1.8rem;
    white-space: nowrap;
    margin: 24px 16px;
    font-weight: bold;
}
@media (min-width: 769px) {
    .frame {
        position: relative;
        background: #fff;
        padding: 40px;
		max-width: 750px;
		margin: 0 auto;
    }
    .frame::before {}
    .frame::after {}
    div#result {
        font-size: 250%;
    }
    .sim_top ul {
        display: inline-flex;
        margin-bottom: 29px;
    }
    .sim_top li:first-child {
        padding-top: 0px;
        margin-top: 8px;
    }
    .sim_reward ul {
        display: inline-flex;
        margin-bottom: 29px;
    }
    .sim_reward li:first-child {
        padding-top: 0px;
        margin-top: 0px;
    }
}


/*
Section Info
---------------------------------*/
section.banner{padding: 1em 0 1em;}
.sec_info {
    background: url(../img/bg_pattern_pink.webp) center/50%;
}
.top_item {
    position: relative;
    background: var(--deepgreen-color);
    padding: 75px 0 0;
    border-radius: 8px;
	width: 90%;
    margin: 0 auto 3em;
	box-sizing: border-box;
    border: 2px solid #fff;
}
.top_item::before {content: ""; position: absolute; top: -6px; left: -6px; height: 36px; width: 36px; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;   border: 2px solid #fff;border-radius: 8px; z-index: 1;}
.top_item::after {content: ""; position: absolute; bottom: -6px;right: -6px;height: 36px; width: 36px; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;border: 2px solid #fff;border-radius: 8px;}
.top_item_image {width: 100%;}
.top_item_image img {width: 100%;}
.top_item_inner {
    padding: 24px 16px;
    color: #fff;
}
.top_item_title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.top_item_title span {
    position: relative;
    height: 2px;
    background: #fff;
    width: 100%;
}
.top_item_title span::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: #fff;
    border-radius: 50%;
}
.top_item_title span::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: #fff;
    border-radius: 50%;
}
.top_item_title h3 {
    font-size: 1.8rem;
    white-space: nowrap;
    margin: 24px 16px;
}
.top_item .btn {
    margin-top: 16px;
}
@media (min-width: 769px) {
    .sec_info {
        background: url(../img/bg_pattern_pink.webp) center/20%;
    }
    .top_item {
        background: none;
        display: flex;
        padding: 0;
        margin-top: 56px;
		border:none;
    }
    .top_list .top_item:nth-of-type(even) {
        flex-direction: row-reverse;
    }
    .top_item::before {
        content: none;
    }
    .top_item::after {
        content: none;

    }
    .top_item_image {
        flex-basis: 53.3%;
        margin-right: -40px;
        margin-bottom: 60px;
        position: relative;
        z-index: 2;
    }
    .top_list .top_item:nth-of-type(even) .top_item_image {
        margin-right: 0px;
        margin-left: -40px;
        margin-top: 60px;
        margin-bottom: 0;
    }
    .top_item_inner {
        position: relative;
        background-color:var(--deepgreen-color);
        flex-basis: 53.3%;
        padding: 40px 40px 40px 104px;
        margin-left: -40px;
        margin-top: 60px;
        display: flex;
        flex-direction: column;
    }
    .top_list .top_item:nth-of-type(even) .top_item_inner {
        margin-left: 0;
        padding: 40px 104px 40px 40px;
        margin-left: 0;
        margin-right: -40px;
        margin-top: 0px;
        margin-bottom: 60px;
    }
    .top_item_inner::before {content: ""; position: absolute; top: -6px; left: -6px; height: 36px; width: 36px; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;border: 2px solid #fff;border-radius: 8px;}
    .top_item_inner::after {content: ""; position: absolute; bottom: -6px; right: -6px; height: 36px; width: 36px; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;border: 2px solid #fff;border-radius: 8px;    }
    .top_item_title {
        position: static;
        text-align: left;
        padding: 0;
    }
    .top_item_title span:first-child {
        display: none;
    }
    .top_item_title h3 {
        font-size: 3.2rem;
        margin: 0 16px 0 0;
    }
    .top_item p {
        margin-top: 24px;
    }
    .top_item .btn_wrapper {
        margin: auto 0 0;
        max-width: none;
    }
    .top_item .btn {
        margin-top: 32px;
    }
}

/*
Section topics
---------------------------------*/
ul.topics_list{width:90%;margin:auto;}
.sec_topics {
    background: #F4FECC;
}

.topics_item {
    position: relative;
    border: solid 2px #fff;
    background: #fff;
    margin-top: 32px;
}
.topics_item::before {}
.topics_item::after {}
.topics_item a {
    display: flex;
    text-decoration: none;
}
.topics_thumb {
    width: 40%;
    border-right: solid 2px #fff;
    position: relative;
}
.topics_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.topics_inner {
    position: relative;
    padding: 16px;
    width: 60%;
}
.topics_cat {
    position: absolute;
    top: 12px;
    left: 0;
    min-width: 50%;
    background: #000340;
    color: #fff;
    padding: 4px;
    font-size: 1.2rem;
}
.topics_date {
    display: block;
    text-align: right;
    font-size: 1.2rem;
    color: #7E809E;
}
.topics_title {
    margin: 12px 0 0;
    color: #000340;
}
.new {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.4rem;
    background: var(--main-color);
    color: #fff;
    padding: 2px 4px;
}
@media (min-width: 769px) {
    .topics_list {
        display: flex;
        flex-wrap: wrap;
    }
    .topics_item {
        width: 30%;
        margin: 0 0 0 5%;
        transition: transform .3s,box-shadow .3s;
    }
    .topics_item::before {
    }
    .topics_item::after {
    }
    .topics_list .topics_item:nth-child(3n+1) {
        margin: 0;
    }
    .topics_list .topics_item:nth-child(n+4) {
        margin-top: 5%;
    }
    .topics_item a {
        display: block;
    }
    .topics_thumb {
        width: 100%;
        border: none;
        border-bottom: solid 2px #000340;
    }
    .topics_thumb img {
        height: 16vw;
		max-height: 150px;
    }
    .topics_inner {
        width: 100%;
        padding: 24px;
    }
    .topics_cat {
        top: 16px;
        padding: 8px;
        font-size: 1.4rem;
    }
    .topics_date {
        font-size: 1.4rem;
    }
    .topics_title {
        margin: 16px 0 0;
    }
    .topics_item:hover {
        transform: translate(-8px , -8px);
        box-shadow: rgba(0, 3, 64, 0.5) 8px 8px 0;
    }
}


.category_nav_area {
	margin-bottom: 40px;
}
.category_nav_list {
	display: flex;
	flex-wrap: wrap;
    justify-content: space-between;
}
.category_nav_list li {
	width: 48%;
}
.category_nav_list li + li {
	margin: 0;
}
@media (max-width: 768px) {
	.category_nav_list li:nth-of-type(n+3){
		margin-top: 16px;
	}
}
.category_nav_list li a {
	background: #000340;
    color: #fff;
	padding: 8px 16px;
	text-decoration: none;
	display: block;
	border-radius: 24px;
}
.category_nav_list li a img {
	width: 20px;
	margin-right: 8px;
}
@media (min-width: 769px) {
	.category_nav_area {
		margin-bottom: 56px;
	}
	.category_nav_list li {
		width: 24%;
	}
	.category_nav_list li a {
		transition: opacity .3s;
	}
	.category_nav_list li a:hover {
		opacity: .7;
	}
}

/*
Section sidejob
---------------------------------*/
.sec_sidejob{
    background: #ffcdc7;
}
p.deco_txt{margin: 32px auto 64px; width: 90%;background-color: #fff8; backdrop-filter: blur(2px);padding: 1em;border-radius: 6px;}
.sidejob_item_inner {
    position: relative;
    width: 100%;
    background-color: #fff;
    border: solid 2px #000340;
    padding: 70px 12px 60px;
}

.sidejob_item_inner::before {
}
.sidejob_item_inner::after {
}

.job_item:nth-of-type(1) .sidejob_item_inner {
    background-image: url(../img/top_sidejob_01.webp);
    background-position: right 10% bottom -98px;
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-color: #fff;
}

.job_item:nth-of-type(2) .sidejob_item_inner {
    background-image: url(../img/top_sidejob_02.webp);
    background-position: left 50% bottom -100px;
    background-repeat: no-repeat;
    background-size: 56% auto;
    background-color: #fff;
}

.job_item:nth-of-type(3) .sidejob_item_inner {
    background-image: url(../img/top_sidejob_03.webp);
    background-position:left 20% bottom -42px;
    background-repeat: no-repeat;
    background-size: 46% auto;
    background-color: #fff;
}

.job_item:nth-of-type(4) .sidejob_item_inner {
    background-image: url(../img/top_sidejob_04.webp);
    background-position: right 10% bottom -50px;
    background-repeat: no-repeat;
    background-size: 60% auto;
    background-color: #fff;
}

@media (min-width: 769px) {
    p.sidejob_txt{
        margin-bottom: 64px;
    }
       .sidejob_item_inner {
        padding: 80px 40px 100px;
    }

    .job_item:nth-of-type(1) .sidejob_item_inner {
        background-position: right -1% bottom -169px;
        background-size: 67% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(2) .sidejob_item_inner {
        background-position: left 50% bottom -170px;
        background-size: 50% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(3) .sidejob_item_inner {
        background-position: left 20% bottom -39px;
        background-size: 40% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(4) .sidejob_item_inner {
        background-position: right 10% bottom -100px;
        background-size: 50% auto;
        background-color: #fff;
    }
}

/*
Section sidejob
---------------------------------*/
.sec_workstyle {
    background: url(../img/bg_dot_circle.png) center/30%;
    background-color: #F4FECC;
}
.sec_workstyle .top_item {
    position: relative;
    background: #fff;
    padding: 0;
    margin-top: 32px;
    z-index: 0;
    border: solid 2px #000340;
}
.sec_workstyle .top_item_inner {
    padding: 24px 16px;
    color: #000340;
}
.sec_workstyle .top_item_image img {
    border: none;
}
@media (min-width: 769px) {
    .sec_workstyle {
        background: url(../img/bg_dot_circle.png) center/8%;
        background-color: #F4FECC;
    }
    .sec_workstyle .top_item {
        background: none;
        border: none;
    }
    .sec_workstyle .top_item_inner {
        background: #fff;
        border: solid 2px #000340;
        padding: 16px 40px 40px 104px;
    }
    .sec_workstyle .top_list .top_item:nth-of-type(even) .top_item_inner {
        margin-left: 0;
        padding: 16px 104px 40px 40px;
        margin-left: 0;
        margin-right: -40px;
        margin-top: 0px;
        margin-bottom: 60px;
    }
    .sec_workstyle .top_item_image img {
        border: solid 2px #000340;
    }
}
/*
Section after
---------------------------------*/
.sec_after .repute_item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}
.sec_after .repute_item .inner:before {
    display: none;
}
.sec_after .repute_item .inner:after {
    display: none;
}
.sec_after .repute_item .image {
   width: 100px;
   height: 100px;
   margin: 0;
    background-color: #000340;
   border: none;
}
.sec_after .repute_item .inner {
    width: calc( 100% - 130px );
    margin: 0 0 0 30px;
	padding: 2em 0 0;
}
.sec_after .repute_item:nth-child(even) {
    flex-direction: row-reverse;
}
.after_txt{
    margin-bottom: 0px;
}
.top_item_title3 {
    top: 0;
    left: 0;
    right: 0;
    color: #000340;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}
.top_item_title3 h3 {
    font-size: 2rem;
    white-space: nowrap;
    margin: 24px 16px;
}
.top_item_title3 span::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: #000340;
    border-radius: 50%;
}
.top_item_title3 span {
    position: relative;
    height: 2px;
    background: #000340;
    width: 100%;
}
.top_item_title3 span::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -3px;
    height: 6px;
    width: 6px;
    margin: auto;
    background: #000340;
    border-radius: 50%;
}
.top_item_title3 span:first-child {
    display: none;
}
.inner h4{
    font-size: 20px;
    color: #7599c8;
    margin: 12px 0;
}
@media (min-width: 769px) {
    .top_item_title3 h3 {
        font-size: 3rem;
    }
    .sec_after .repute_item:nth-child(even) {
        flex-direction: row;
    }
    .inner h4{
        font-size: 2.4rem;
        color: #7599c8;
        margin: 12px 0;
    }
    .after_txt{
        margin-bottom: 32px;
    }
}
/*
Section Repute
---------------------------------*/
ul.repute_list{margin:-20px 0 0 0;}
.sec_repute , .sec_after {
    background: url(../img/bg_pattern_yellow.webp) center/50%;
}
    
.repute_item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.repute_item:nth-child(even){
    flex-direction: column-reverse;
}

.repute_item + .repute_item {
    margin-top: 15px;
}

.repute_item .image {
    position: relative;
    border-radius: 50%;
    width: 160px;
    height: 160px;
    background-color: #fff;
    border: solid 2px var(--sub-color);
    margin: 0 auto;
    overflow: hidden;
	top: 50px;
    z-index: 1;
}

.repute_item .image img {
    width: 100%;
}

.repute_item .inner {
    width: calc( 100% - 16px );
    margin: 45px 0 0 10px;
    position: relative;
}

.repute_item .inner:before {}
.repute_item .inner:after {}

@media (min-width: 769px) {
    .sec_repute , .sec_after {
        background: url(../img/bg_pattern_yellow.webp) center/20%;
    }
    
    .repute_item {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
		width: 80%;
        margin: 2em auto;
        max-width: 750px;
    }
    
    .repute_item:nth-child(even){
        flex-direction: row;
    }

    .repute_item + .repute_item {
        margin-top: 25px;
    }
    
    .repute_item .image {
        width: 240px;
        height: 240px;
        margin: 0;
		top:0;
    }

    .repute_item .inner {
        width: calc( 100% - 270px );
        margin: 0 0 0 30px;
    }

    .repute_item:nth-child(even) .inner {
        margin: 0 30px 0 0;
    }

    .repute_item .inner:before {
        content: "";
        position: absolute;
        top: 50%;
        left: -24px;
        margin-top: -13px;
        margin-left: 0;
        border: 13px solid transparent;
        border-right: 13px solid #FFF;
        z-index: 2;
    }

    .repute_item .inner:after {
        content: "";
        position: absolute;
        top: 50%;
        left: -30px;
        margin-top: -16px;
        margin-left: 0;
        border: 16px solid transparent;
        border-right: 16px solid #000340;
        z-index: 1;
    }

    .repute_item:nth-child(even) .inner:before {
        left: inherit;
        right: -11px;
        border-left: 13px solid #FFF;
        border-right: inherit;
    }

    .repute_item:nth-child(even) .inner:after {
        left: inherit;
        right: -14px;
        border-left: 16px solid #000340;
        border-right: inherit;
    }
}

/*
Section Job
---------------------------------*/
.sec_job {
    background: url("../img/bg_dot_circle.png") center/30%;
    background-color: #a3d6db;
}

.job_item {width: 90%; margin:0 auto 2em;}
    
.job_item:nth-of-type(2) {
    margin-top: 8px;
}

.job_item:nth-of-type(3) {
    margin-top: 8px;
}

.job_item:nth-of-type(4) {
    margin-top: 8px;
}

.job_item_inner {
    position: relative;
    width: 100%;
    background-color: #fff;
    border: solid 2px var(--sub-color);
    padding: 60px 1em 60px;
	border-radius:8px;
}
.cute-box{position:relative;}
.cute-box::before {content: ""; position: absolute; top: -6px; left: -6px; height: 36px; width: 36px; clip-path: polygon(0% 0%, 100% 0%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;   border: 2px solid #fff;border-radius: 8px;z-index: 3;}
.cute-box::after {content: ""; position: absolute; bottom: -6px; right: -6px; height: 36px; width: 36px; clip-path: polygon(100% 0%, 100% 100%, 0% 100%); display: block; background-color: var(--main-color); box-sizing: border-box;border: 2px solid #fff;border-radius: 8px;z-index: 3;}

.job_item:nth-of-type(1) .job_item_inner {
    background-image: url(../img/top_illust_16.webp);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-color: #fff;
}

.job_item:nth-of-type(2) .job_item_inner {
    background-image: url(../img/top_illust_17.webp);
    background-position: left bottom ;
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-color: #fff;
}

.job_item:nth-of-type(3) .job_item_inner {
    background-image: url(../img/top_illust_18.webp);
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-color: #fff;
}

.job_item:nth-of-type(4) .job_item_inner {
    background-image: url(../img/top_illust_19.webp);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-color: #fff;
}

.job_item_cat {
    position: absolute;
    top: 16px;
    right: 0;
    min-width: 50%;
    background: var(--sub-color);
    color: #fff;
	padding: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 5px 0 0 5px;
}

@media (min-width: 769px) {
    .sec_job {
        background: url(../img/bg_dot_circle.png) center/8%;
        background-color:#e5dbb2;
    }
    
    .job_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .job_item {
        width: 48%;
    }
    
    .job_item:nth-of-type(2) {
        margin-top: 60px;
    }
    
    .job_item:nth-of-type(3) {
        margin-top: 40px;
    }
    
    .job_item:nth-of-type(4) {
        margin-top: 80px;
    }

    .job_item_inner {
        padding: 80px 40px 100px;
    }

    .job_item:nth-of-type(1) .job_item_inner {
        background-position: right 10% bottom -150px;
        background-size: 40% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(2) .job_item_inner {
        background-position: left 50% bottom -170px;
        background-size: 50% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(3) .job_item_inner {
        background-position: left 20% bottom -170px;
        background-size: 50% auto;
        background-color: #fff;
    }

    .job_item:nth-of-type(4) .job_item_inner {
        background-position: right 10% bottom -100px;
        background-size: 50% auto;
        background-color: #fff;
    }
    
    .job_item_cat {
        top: 16px;
        padding: 8px;
        font-size: 1.6rem;
    }
}




/*
Section Cta
---------------------------------*/
.sec_cta {
    background: url(../img/bg_pattern_blue.webp) center/50%;
}
@media (min-width: 769px) {
    .sec_cta {
        background: url(../img/bg_pattern_blue.webp) center/20%;
    }
}



/*
Aside
---------------------------------*/
aside.cljp-service {
    background: #f5f5f5;
    border-top: 1px solid #00000005;
    border-bottom: 1px solid #00000005;
    padding: 50px 0;
    width: 100%;
}
aside.cljp-service h2 {
    background: none !important;
    text-align: center;
    font-size: 140%;
}
aside.cljp-service ul {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-evenly;
    -webkit-justify-content: space-evenly;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}
aside.cljp-service ul li {
    display: block;
    background: white;
    border: 1px solid #00000033;
    border-radius: 3px;
    box-sizing: border-box;
    width: 260px;
    padding: 10px 15px 15px;
    margin: 0 0 30px;
    transition: 0.3s;
}
aside.cljp-service ul li a {
    font-size: 85%;
    text-decoration: none;
    text-align: center;
    color: #777;
    display: block;
}
aside.cljp-service ul li img {
    width: 100%;
    height: auto;
}
aside.cljp-service ul li img, aside.cljp-service ul li span {
    display: block;
}
@media (min-width: 769px) {
    aside.cljp-service {
        padding: 50px calc(50% - 490px);
    }
}



/*---------------------------------
Page
---------------------------------*/
.page_thumbnail {
    margin: -16px -16px 0 -16px;
}
.page_thumbnail img {
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
}
.page_header {
    text-align: right;
    margin-bottom: 8px;
}
.page_header time {
    margin-left: 8px;
}
.page_content_wrapper {
    background: #f7cece;
    padding: 48px 0;
}
.page_content {
    background: #fff;
    border: solid 2px #000340;
    padding: 16px;
}
.page_content h3 {
    position: relative;
    font-size: 2rem;
    margin: 2.6em 0 16px;
    padding: 0 0 0 24px;
}
.page_content h3:first-child {
    margin-top: 0;
}
.page_content h3::before,.page_content h3::after { content: ""; position: absolute; top: 4px; left: 0; height: 24px; width: 16px;  clip-path: polygon(0% 0%, 100% 50%, 0% 100%); border-radius: 4px;}
.page_content h3::before{background-color: #999; top: 6px;left: 2px;}
.page_content h3::after{background-color: var(--main-color);}
.page_content h2 {text-align:center;color: var(--sub-color);}
.page_content h3.smart_phone,
.page_content h3.computer {
    padding: 16px 16px 16px 48px;
    background-color: #000340;
    color: #e3fd80;
    border-radius: 4px;
	clip-path: none;
}

.page_content h3.smart_phone::before {
    background: url(../img/mobile-screen-button-solid.svg) no-repeat;
    top: 50%;
    left: 16px;
    transform: translate(0, -50%);
    height: 30px;
    width: 20px;
	clip-path: none;
}

.page_content h3.computer::before {
    background: url(../img/computer-solid.svg) no-repeat;
    top: 50%;
    left: 0;
    transform: translate(8px, -50%);
    height: 24px;
    width: 30px;
	clip-path: none;
}

.page_content h4 {
    font-size: 1.6rem;
    background-color: #6bb5bd;
    color:white;
    padding: 6px 15px;
    border-radius: 100px;
    line-height: 1.8;
    margin: 2.5em auto 1em;
	position:relative;
}
.page_content h4:after {content:"";position:absolute;display:block;width:100%;border:1px solid #000;height: 100%; top: -3px; left: -3px; border-radius: 100px;}
.page_content h5 {
    font-size: 1.6rem;
    margin: 12px 0 8px;
    border-bottom: solid #000340 2px;
    padding: 0 0 4px;
}
.page_content p {
    font-size: 1.4rem;
    margin: 1em 0;letter-spacing: 0.1em;
}

.page_content ol {
    border-left: 2px solid #7E809E;
    padding: 8px 0 8px 32px;
}
.page_content ul {
    list-style: disc;
    border-left: 1px solid #6f6f6f;
    padding: 8px 0 8px 30px;margin: 2em 1em 2em 2em;
}
.page_content ul li{line-height:1.6em;margin:0 0 1em 0;}
.page_content table {
    width: 100%;
    border-collapse: collapse;
}
.page_content table th,
.page_content table td {
    padding: 8px;
    border: solid #7E809E 1px;
}
.page_content table thead th {
    color: #000340;
    background-color: rgb(126 128 158 / 30%);
}
.page_content table tbody th {
    text-align: center;
    background-color: rgb(126 128 158 / 30%);
}
.page_content ol.caution {
    background: rgba(255, 130, 115, 0.3);
    padding: 8px 8px 8px calc( 8px + 1.2em );
    border-left: 0;
}

.page_content blockquote {
    border: 1px solid #999;
    background: #F5F5F5;
    padding: 16px;
    position: relative;
    margin: 40px 0;
    border: solid 2px #7E809E;
    border-radius: 4px;
}
.page_content blockquote:before {
    position: absolute;
    content: "”";
    font-size: 4rem;
    color: var(--main-color);
    top: 0px;
}
.page_content blockquote:after {
    position: absolute;
    content: "”";
    font-size: 4rem;
    color: var(--main-color);
    bottom: 0px;
    right: 10px;
}
.page_content blockquote cite {
    padding: 10px;
    display: block;
    margin: 0;
    text-align: center;
}
@media (min-width: 769px) {
    .page_thumbnail {
        margin: -40px -40px 0 -40px;
    }
    .page_content_wrapper {
        padding: 96px 0;
    }
    .page_content {
        padding: 40px;
    }
    .page_content h3 {
        font-size: 2.8rem;
        margin: 48px 0 32px;
        padding: 0 0 0 32px;
    }
    .page_content h3::before {
        top: 6px;
        left: 0;
        height: 32px;
        width: 20px;
    }

    .page_content h3.computer {
        padding: 16px 16px 16px 64px;
    }

    .page_content h3.computer::before {
        transform: translate(16px, -50%);
    }

    .page_content h4 {
        font-size: 2rem;
        margin: 48px auto 20px;
    }
    .page_content h5 {
        font-size: 1.8rem;
        margin: 24px 0 8px;
    }
    .page_content p {
        font-size: 1.6rem;
    }

    .page_content ol.caution {
        padding: 16px 16px 16px calc( 16px + 1.2em );
    }

    .page_content table th,
    .page_content table td {
        padding: 16px;
    }
}

/*
TOC
---------------------------------*/
.page_content .single_table_of_contents {
    background: #fff;
    padding: 56px 16px 8px 16px;
    position: relative;
    border: none;
    margin: 40px 0;
    counter-reset: item;
    border-radius: 4px;
    overflow: hidden;
    border: solid 2px #000340;
}
.single_table_of_contents::before {
    content: "目次";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 100%;
    background: #000340;
    padding: 8px 8px 8px 64px;
    color: #fff;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-weight: 700;
}
.single_table_of_contents::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 10px;
    background: url(../img/icon_toc_w.png);
    width: 32px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
ul.single_table_of_contents li {
    list-style: none;
    position: relative;
    padding-left: 32px;
    margin: 0 0 8px;
}
ul.single_table_of_contents li::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    counter-increment: item;
    content: counter(item)'';
    background: #000340;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    height: 24px;
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.single_table_of_contents li.count_reset{
    counter-reset: item;
}

ul.single_table_of_contents li.count_reset2 {
    counter-reset: item 1;
}
ul.single_table_of_contents li.count_reset3 {
    counter-reset: item 2;
}
ul.single_table_of_contents li.count_reset4 {
    counter-reset: item 3;
}
ul.single_table_of_contents li.count_reset5 {
    counter-reset: item 4;
}


@media (min-width: 769px) {
    ul.single_table_of_contents {
        padding: 64px 24px 16px 24px;
    }
    ul.single_table_of_contents li {
        margin: 0 0 16px;
    }
}

/*
Pagenation
---------------------------------*/
.pagination {
    margin: 40px 0 0;
    display: flex;
    justify-content: space-between;
}
.pagination div {
    width: 48%;
    display: flex;
    justify-content: center;
}
.pagination a {
    width: 100%;
    border: solid 2px var(--main-color);
    color: var(--main-color);
    text-decoration: none;
    font-size: 1.8rem;
    padding: 8px 8px 9px;
    display: block;
    border-radius: 24px;
    text-align: center;
    font-weight: 700;
}

@media (min-width: 769px) {
    .pagination {
        margin-top: 96px;
        display: flex;
    }
    .pagination a {
        max-width: 320px;
        padding: 12px 12px 13px;
        border-radius: 28px;
        transition: background-color .3s, color .3s;
    }
    .pagination a:hover {
        background-color: var(--main-color);
        color: #fff;
    }

}




/*
Page reward
---------------------------------*/

.sim {
    background: #F5F5F5;
    width: calc(100% + 32px);
    margin: 32px -16px -16px;
    padding: 16px;
}
.sim_pt5 {
    margin-bottom: 24px;
}
.sim_pt5 label {
    margin-right: 8px;
}
.page_content .sim_ttl1 {
    font-weight: 700;
    margin: 0 0 8px;
}
.sim_pt1 {
    padding: 10px;
    font-size: 1.6rem;
    border: 1px solid #000340;
    border-radius: 6px;
    background: #fff;
     margin-right: 10px;
}
.sim_pt3 {
     font-size: 40px;
    font-weight: bold;
    width: 200px;
    border: none;
    margin: 0px;
    padding: 5px;
    height: 50px;
    text-align: center;
}
.sim_pt4 {
    font-weight: 700;
    font-size: 4rem;
}
.sim .hide, .sim_pt5 .hide {
    display: none;
}
.sim_pt2 {
    position: relative;
    border: solid 2px #FF8273;
    color: #FF8273;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 8px 8px 9px;
    display: block;
    border-radius: 24px;
    text-align: center;
    font-weight: 700;
    width: calc(100% - 48px);
    margin: 40px auto 15px auto;
    max-width: 280px;
}
@media (min-width: 769px) {
    .sim {
        width: calc(100% + 80px);
        margin: 48px -40px -40px;
        padding: 40px;
    }
    .sim_pt1 {
        padding: 16px;
          margin-right: 10px;
    }
    .sim_pt5 {
        margin-bottom: 48px;
    }
    .sim_pt2 {
        padding: 12px 12px 13px;
        border-radius: 28px;
        transition: background-color .3s, color .3s;
    }
    .sim_pt2:hover {
        background-color: #FF8273;
        color: #fff;
    }
    .sim_pt3 {
        padding: 16px;
    }
}



/*
Page Area
---------------------------------*/

#tsuukin table {
    border-top: solid #7E809E 1px;
}
#tsuukin table thead th {
    color: #000340;
    background-color: rgb(126 128 158 / 30%);
}
#tsuukin thead {
    display:none;
}
#tsuukin table tbody tr td {
    display: flex;
    width: 100%;
    border-top: none;
}
#tsuukin table tbody td:first-child {
    display: block;
    text-align: center;
}
#tsuukin table tbody td:first-child img {
    max-width: 240px;
}
#tsuukin table tbody td::before {
    content: attr(label);
    float: left;
    clear:both;
    font-weight:bold;
    width: 30%;
    min-width: 30%;
}
#tsuukin table tbody td:first-child::before {
    content: none;
}

.page_content .t-entry {
    margin: 32px auto 0;
    max-width: 320px;
}
.t-entry a {
    position: relative;
    border: solid 2px #000340;
    color: #000340;
    text-decoration: none;
    font-size: 1.8rem;
    padding: 8px 8px 9px;
    display: block;
    border-radius: 24px;
    text-align: center;
}
.t-entry a strong {
    background: none;
}
.t-entry a::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_g.svg) center/100% no-repeat;
}
.t-entry a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 16px;
    margin: auto;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_n.svg) center/100% no-repeat;
}
@media (min-width: 769px) {
    #tsuukin thead {
        display: table-header-group;
    }
    #tsuukin table tbody td::before {
        content: none;
    }
    #tsuukin table tbody tr td {
        display: table-cell;
        width: auto;
    }
    #tsuukin table tbody td:first-child {
        display: table-cell;
    }

    .page_content .t-entry {
            margin: 64px auto 0;
    }
    .t-entry a.btn {
        padding: 12px 12px 13px;
        border-radius: 28px;
        transition: background-color .3s, color .3s;
    }
    .t-entry a::before {
        height: 20px;
        width: 10px;
    }
    .t-entry a::after {
        height: 20px;
        width: 10px;
        transition: opacity .3s;
    }
    .t-entry a:hover {
        background-color: #000340;
        color: #E3FD80;
    }
    .t-entry a:hover::after {
        opacity: .0;
    }
}


/*
Page Question
---------------------------------*/
.faq_area {
    margin: 32px 0 0;
}
.faq_area dt {
    position: relative;
    padding: 0 0 0 32px;
    font-weight: 700;
}
.faq_area dt::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../img/icon_q.svg) center/100% no-repeat;
}
.faq_area dd + dt {
    margin: 24px 0 0 0;
}
.faq_area dd {
    position: relative;
    padding: 0 0 0 32px;
    margin: 8px 0 0 0;
}
.faq_area dd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 24px;
    width: 24px;
    background: url(../img/icon_a.svg) center/100% no-repeat;
}
.faq_area dd p {
    margin: 0;
    line-height: 1.5;
}
@media (min-width: 769px) {
    .faq_area dt {
        padding: 0 0 0 40px;
        font-size: 1.6rem;
    }
    .faq_area dt::before {
        height: 32px;
        width: 32px;
    }
    .faq_area dd + dt {
        margin: 40px 0 0 0;
    }
    .faq_area dd {
        padding: 0 0 0 40px;
        font-size: 1.6rem;
        margin: 16px 0 0 0;
    }
    .faq_area dd::before {
        height: 32px;
        width: 32px;
    }
}

/* 202504 FAQ改修 */
.faq_area {
    margin: 0;
    padding: 1.2em 1em;
    border-bottom: 1px solid rgba(0, 3, 64, .2);
    cursor: pointer;
}
.faq_area:last-child {
    border: none;
}
.faq_area dt {
    padding: 0 32px;
}
.faq_area dt::before {
    top: 50%;
    translate: 0 -50%;
}
.faq_area dt::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_n.svg) center / 100% no-repeat;
    translate: 0 -50%;
    rotate: 90deg;
    transition: .3s;
}
.faq_area.open dt::after {
    rotate: 270deg;
}

.faq_area dd {
    display: none;
    margin: 1em 0 0 0;
    max-height: 0;
    display: none;
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}
.faq_area dt::before {
    background-image: url(../img/icon_q_02.svg);
}
.faq_area dd::before {
    background-image: url(../img/icon_a_02.svg);
}

ul.category_list {
    list-style: none;
    border: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
    background: rgba(233, 95, 117, .4);
    padding: 1em;
    border-radius: 6px;
    width: min(100%, 360px);
}

ul.category_list li {
    width: 100%;
    margin: 0;
}

ul.category_list li a {
    padding: .5em 1em;
    background: #fff;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    width: calc(100% - 2.2em);
    margin: 0 0 0 auto;
    box-shadow: 3px 3px 0 rgba(233, 95, 117, .4);
    position: relative;
    transition: .3s;
}

ul.category_list li a span {
    font-size: 1em;
    position: absolute;
    left: -40px;
    color: #fff;
    translate: 50% 0;
}

ul.category_list li a::before {
    content: "";
    width: .5em;
    height: 2px;
    border-radius: 9999px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    translate: -100% -50%;
}

ul.category_list li a:hover {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
    box-shadow: none;
}
@media (min-width: 768px) {
    .faq_area {
        padding: 2em 1em;
    }
    .faq_area dt {
        padding: 0 40px;
    }
    .faq_area dt::after {
        height: 24px;
        width: 12px;
    }
    ul.category_list {
        width: min(100%, 720px);
        align-items: center;
    }
    ul.category_list li {
        width: calc((100% - 1em) / 2);
    }
}
@media (min-width: 1024px) {
    ul.category_list {
        gap: 1em 2em;
        padding: 2em;
    }
    ul.category_list li {
        width: calc((100% - 2em) / 2);
    }
}
/*
Page contact
---------------------------------*/
.entry_form {
    background: #fff;
    width: calc(100% + 32px);
    margin: 32px -16px -16px;
    padding: 16px;
}
.entry_form p {
    font-weight: 700;
    margin: 0;
}
p.submit-quiz{width: 80%;max-width: 360px; margin: 60px auto 0;text-align: center; padding: 20px;background-color: #eaeaea; border-radius: 8px;font-weight: 400; font-size: 90%; border: 2px solid #999;}
.entry_form p.entry-title {margin:30px auto 0;border-top: 1px solid #e1e1e1; padding: 30px 0 0 0;}
.entry_form .req {
    margin: 0 0 0 0.2em;
    color: #FF8273;
}
span.noc{font-weight:400;font-size:90%;}
.fsl,
.quiz {
    padding: 10px;
    font-size: 1.6rem;
    border: 1px solid #000340;
    border-radius: 6px;
    background: #fff;
    margin: 10px auto;
}
.entry_form input {
    width: 100%;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tell"],
.wpcf7 textarea {
    background: #fff;
    width: 100%;
}
div.birth-select{}
div.birth-select > p{display: flex; align-items: baseline;}
div.birth-select select{margin-right:1em;}
div.birth-select span.birth-select{}
.wpcf7 .sm {
    position: relative;
    margin: 32px auto 0;
    max-width: 320px;
}
.wpcf7 .sm::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_w.svg) center/100% no-repeat;
}
.wpcf7 .sm::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    height: 16px;
    width: 8px;
    background: url(../img/icon_angle_r_p.svg) center/100% no-repeat;
}
input[type="submit"] {
    border: solid 2px var(--main-color);
    color: var(--main-color);
    text-decoration: none;
    font-size: 1.8rem;
    padding: 8px 8px 9px;
    display: block;
    border-radius: 24px;
    text-align: center;
    font-weight: 700;
}


#rulesbox {
    padding: 10px;
    height: 200px;
    overflow: auto;
    font-size: 10px;
    background-color: #FFFFFF;
    border: 1px solid #999999;
}
#rulesbox ol {
    background: none;
    padding: inherit;
    margin: inherit;
}

@media (min-width: 769px) {
    .entry_form {
        width: calc(100% + 80px);
        margin: 48px -40px -40px;
        padding: 40px;
    }
    .entry_form p {
    }
    .fsl,
    .quiz {
        padding: 16px;
    }

    .wpcf7 .sm {
        margin: 64px auto 0;
    }
    .wpcf7 .sm::before {
        top: 18px;
        height: 20px;
        width: 10px;
        transition: opacity .3s;
    }
    .wpcf7 .sm::after {
        top: 18px;
        height: 20px;
        width: 10px;
        transition: opacity .3s;
    }
    input[type="submit"] {
        padding: 12px 12px 13px;
        border-radius: 28px;
        transition: background-color .3s, color .3s;
    }
    .wpcf7 .sm:hover input[type="submit"] {
        background-color: var(--main-color);
        color: #fff;
    }
    .wpcf7 .sm:hover::after {
        opacity: .0;
    }
}



/*---------------------------------
カスタムブロック(Lazy Blocks) デザイン CSS
---------------------------------*/
.wp-block-lazyblock-block-recommend-post {
    position: relative;
    padding: 24px 16px 16px;
    border: solid 2px var(--main-color);
    border-radius: 4px;
    margin: 56px 0 40px;
    background: #fff;
}
.wp-block-lazyblock-block-recommend-post span {
    position: absolute;
    top: -16px;
    left: 16px;
    background: var(--main-color);
    display: block;
    padding: 4px 8px 4px 40px;
    color: #fff;
    border-radius: 4px;
}
.wp-block-lazyblock-block-recommend-post span::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0; bottom: 0;
    margin: auto;
    background: url(../img/icon_book_w.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}

.wp-block-lazyblock-block-simple-box {
    margin: 40px 0;
    border: 2px solid #7E809E;
    border-radius: 3px;
    padding: 24px;
    background: #fff;
}
.wp-block-lazyblock-block-simple-box .title {
    font-size: 20px;
    position: relative;
    font-weight: 700;
}
.wp-block-lazyblock-block-simple-box p {
    padding: 0;
    margin: 16px 0 0;
}

.wp-block-lazyblock-block-simple-box-point {
    margin: 40px 0;
    border-radius: 4px;
    padding: 16px;
    background: #d3ffff;
    border: solid 2px #B0F5F5;
}
.wp-block-lazyblock-block-simple-box-point .title {
    font-size: 20px;
    position: relative;
    padding: 16px 0 16px 48px;
    font-weight: 700;
}

.wp-block-lazyblock-block-simple-box-point .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 64px;
    width: 32px;
    background: url(../img/icon_point_p.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.wp-block-lazyblock-block-simple-box-point p {
    padding: 0;
    margin: 16px 0 0;
}

.wp-block-lazyblock-block-simple-box-point-pink {
    margin: 40px 0;
    border-radius: 4px;
    padding: 16px;
    background: var(--main-color)12;
    border: solid 2px var(--main-color);
}
.wp-block-lazyblock-block-simple-box-point-pink .title {
    font-size: 20px;
    position: relative;
    padding: 16px 0 16px 48px;
    font-weight: 700;
}

.wp-block-lazyblock-block-simple-box-point-pink .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 64px;
    width: 32px;
    background: url(../img/icon_point_p.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.wp-block-lazyblock-block-simple-box-point-pink p {
    padding: 0;
    margin: 16px 0 0;
}

.wp-block-lazyblock-block-simple-box-check {
    margin: 40px 0;
    border-radius: 4px;
    padding: 16px;
    background: #d3ffff;
    border: solid 2px #B0F5F5;
}
.wp-block-lazyblock-block-simple-box-check .title {
    font-size: 20px;
    position: relative;
    padding: 16px 0 16px 136px;
    font-weight: 700;
}
.wp-block-lazyblock-block-simple-box-check .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    height: 64px;
    width: 120px;
    background: url(../img/icon_check_p.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
}
.wp-block-lazyblock-block-simple-box-check p {
    padding: 0;
    margin: 16px 0 0;
}

.wp-block-lazyblock-block-simple-list {
    margin: 40px 0;
    border-radius: 4px;
    padding: 16px;
    background: #fff;
    border: 2px solid #7E809E;
}
.page_content .wp-block-lazyblock-block-simple-list ul {
    margin: 0;
    padding: 0;
    border: none;
}
.page_content .wp-block-lazyblock-block-simple-list ul li {
    position: relative;
    list-style: none;
    padding-left: 32px;
    margin: 0;
}
.page_content .wp-block-lazyblock-block-simple-list ul li + li {
    margin-top: 16px;
}
.page_content .wp-block-lazyblock-block-simple-list ul li::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 0;
    left: 0;
    margin: 0;
    height: 20px;
    width: 20px;
    background: url(../img/icon_angle_r_p.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
}

.wp-block-lazyblock-block-chat-balloon {
    margin: 40px 0;
}
.wp-block-lazyblock-block-chat-balloon .chat_balloon_item + .chat_balloon_item {
    margin-top: 20px;
}
.wp-block-lazyblock-block-chat-balloon .left {
    display: flex;
    justify-content: space-between;
}
.wp-block-lazyblock-block-chat-balloon .right {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}
.wp-block-lazyblock-block-chat-balloon .icon img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: solid 2px #7E809E;
    overflow: hidden;
    object-fit: cover;
    box-sizing: border-box;
}
.wp-block-lazyblock-block-chat-balloon p {
    position: relative;
    border: solid 2px #7E809E;
    margin: 0;
    padding: 16px;
    width: calc( 100% - 96px );
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
}
.wp-block-lazyblock-block-chat-balloon p::before,
.wp-block-lazyblock-block-chat-balloon p::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 30px;
    border-width: 8px 8px 8px 0;
    border-color: transparent #fff transparent transparent;
}
.wp-block-lazyblock-block-chat-balloon .left p::before {
    left: -11px;
    border-width: 9px 9px 9px 0;
    border-color: transparent #7E809E transparent transparent;
}
.wp-block-lazyblock-block-chat-balloon .left p::after {
    top: 31px;
    left: -8px;
    border-width: 8px 8px 8px 0;
    border-color: transparent #fff transparent transparent;
}
.wp-block-lazyblock-block-chat-balloon .right p::before {
    right: -11px;
    border-width: 9px 0 9px 9px;
    border-color: transparent transparent transparent #7E809E;
}
.wp-block-lazyblock-block-chat-balloon .right p::after {
    top: 31px;
    right: -8px;
    border-width: 8px 0 8px 8px;
    border-color: transparent transparent transparent #fff;
}
.wp-block-lazyblock-step ol {
    margin: 50px 0 40px 0;
    padding: 0 20px;
    counter-reset: count;
    border: none;
}
.wp-block-lazyblock-step ol li {
    list-style: none;
    position: relative;
    padding: 20px;
    margin: 0 0 20px;
}
.step-repeat-title {
    font-size: 110%;
    font-weight: 700;
}
.step-repeat-label {
    padding: 3px 20px 3px 15px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: -18px;
    left: -20px;
    background: var(--main-color);
    border-radius: 20px;
    box-shadow: 5px 0px 0 #fff;
    z-index: 1;
}
.step-repeat-label::after {
    counter-increment: count;
    content: counter(count);
    position: relative;
    left: 0.3em;
}
#r_main .step-repeat-item p {
    margin: 10px 0;
    padding: 0;
}
.step-repeat-item::before {
    content: ""; display: block;
    position: absolute;
    bottom: 0;
    left: -10px;
    border-style: solid;
    border-width: 17px 8px 0 8px;
    border-color: #ddd transparent transparent transparent;
}
.step-repeat-item::after {
    content: "";
    display: block;
    height: calc(100% - 36px);
    border-left: dashed 4px #ddd;
    position: absolute;
    top: 16px;
    left: -4px;
}
.step-repeat-list > :last-child::before, .step-repeat-list > :last-of-type::after {
    display: none;
}




@media (min-width: 769px) {
    .wp-block-lazyblock-block-recommend-post {
        padding: 32px 24px 24px;
        margin: 56px 0 40px;
    }

    .wp-block-lazyblock-block-simple-box {
        padding: 24px;
    }

    .wp-block-lazyblock-block-simple-box-point {
        padding: 24px;
    }

    .wp-block-lazyblock-block-simple-box-point-pink {
        padding: 24px;
    }

    .wp-block-lazyblock-block-simple-box-check {
        padding: 24px;
    }

    .wp-block-lazyblock-block-simple-list {
        padding: 24px;
    }

    .wp-block-lazyblock-block-chat-balloon .left,
    .wp-block-lazyblock-block-chat-balloon .right {
        align-items: center;
    }
    .wp-block-lazyblock-block-chat-balloon .icon img {
        width: 140px;
        height: 140px;
    }
    .wp-block-lazyblock-block-chat-balloon p {
        padding: 24px;
        width: calc( 100% - 170px );
    }
    .wp-block-lazyblock-block-chat-balloon p::before,
    .wp-block-lazyblock-block-chat-balloon p::after {
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .wp-block-lazyblock-block-chat-balloon .right p::before {
        right: -18px;
        border-width: 18px 0 18px 18px;
    }
    .wp-block-lazyblock-block-chat-balloon .right p::after {
        top: 0;
        right: -15px;
        border-width: 15px 0 15px 15px;
        border-color: transparent transparent transparent #fff;
    }
    .wp-block-lazyblock-block-chat-balloon .left p::before {
        left: -18px;
        border-width: 18px 18px 18px 0;
    }
    .wp-block-lazyblock-block-chat-balloon .left p::after {
        top: 0;
        left: -15px;
        border-width: 15px 15px 15px 0;
    }


}









/*
Add Class
---------------------------------*/
.fc_orange {
    color: #FF8273;
}






/* 打ち消し */

#r_head {
    display: none;
}

/*reCAPTCHA*/
div.grecaptcha-badge {display:none}


/**ryouritsu**/
figure.ryouritsu{width: 80%; padding: 10px; background-color: white; margin:50px auto;  max-width: 500px;border-radius: 8px; border: 2px solid #888;}
figure.ryouritsu table{background-color:#fff;}
figure.ryouritsu table thead{border:none;}
figure.ryouritsu table thead tr{}
figure.ryouritsu table thead tr th{border: none; background-color: #e7e7e7; color: black; box-sizing: border-box;line-height: 36px;}
figure.ryouritsu table thead tr th:first-child{border-radius:30px 0 0 30px;}
figure.ryouritsu table thead tr th:last-child{border-radius:0 30px 30px 0;color: #ce96ae;}
figure.ryouritsu table tbody{}
figure.ryouritsu table tbody tr{}
figure.ryouritsu table tbody tr td:nth-child(1){border:none;font-weight: 600;}
figure.ryouritsu table tbody tr td:nth-child(2){}
figure.ryouritsu table tbody tr td:nth-child(3){font-size: 200%; color: #e0b2c6; font-weight: 600; text-shadow: 0 1px #c98da7;}
figure.ryouritsu table tbody tr td{border:none;border-bottom:1px dashed #ddd;text-align:center;widows:calc(100% - 3);}
figure.ryouritsu table tbody tr:last-child td{border:none;}
figure.ryouritsu figcaption{color:#999;}
/*
Section Top Area
---------------------------------*/
.section_top_area .section_title , .section_top_room .section_title {
    padding: 12px 0;
    background: url(../img/bg_title_03.png) center/auto 100% no-repeat;
}
.area_item {
    position: relative;
    background: #fff;
    padding: 3px 12px;
    border: solid 2px #000340;
    margin: 15px 0 20px 0;
}
.area_item::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    height: 36px;
    width: 36px;
    background: url(https://www.live55.net/wp-content/themes/Live55_Thema/assets/img/corner_01_sp.svg) center/100% no-repeat;
}
.area_item::after {
    content: "";
    position: absolute;
    bottom: -4px;
    right: -4px;
    height: 36px;
    width: 36px;
    background: url(https://www.live55.net/wp-content/themes/Live55_Thema/assets/img/corner_02_sp.svg) center/100% no-repeat;
}
.area_name {
    padding: 8px 45px;
    margin: 0;
    font-size: 18px;
}
.area_name a {
    text-decoration: none;
}
.area_item_list {
    padding: 3.2vw;
    font-size: 14px;
    border-left: none!important;
    padding: 10px 0px 13px 45px!important;
    margin: 0 !important;
}
.area_item_list li {
    position: relative;
    padding-left: 24px;
    list-style: none;
}
.area_item_list li + li {
    margin-top: 8px;
}
.area_item_list li::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #3B4F69;
    height: 8px;
    width: 8px;
    margin: auto;
}
.area_item_list li a {
    color: #3B4F69;
    text-decoration: none;
}
.section_top_area .btn {
    margin: 32px 0 0;
}
@media (min-width: 769px) {
    .section_top_area .section_title {
        padding: 24px 0;
    }
    .section_top_area p , .section_top_room p {
        text-align: center;
    }
    .area {
        position: relative;
        margin-top: 40px;
    }
    .area_map {
        width: 42%;
        margin: 0 auto;
        height: 1160px;
        padding-top: 215px;
    }
    .area .area_item {
        width: 30%;
        position: absolute;
        margin-top: 0;
    }
    .area_name {
        font-size: 16px;
        padding: 13px 0px 13px 40px;
    }
    .area_name a {
        transition: opacity .3s;
    }
    .area_name a:hover {
        opacity: .7;
    }
  .area .area_item:nth-of-type(2) {
        top: 0;
        right: 0;
    }
    .area .area_item:nth-of-type(3) {
        top: 150px;
        right: 0;
    }
    .area .area_item:nth-of-type(4) {
        right: 0;
        top: 510px;
    }
    .area .area_item:nth-of-type(5) {
        right: 0;
        left: 0;
        margin: auto;
        top: 600px;
    }
    .area .area_item:nth-of-type(6) {
        top: 0;
        left: 0;
    }
    .area .area_item:nth-of-type(7) {
        top: 269px;
        left: 0;
    }
    .area .area_item:nth-of-type(8) {
        left: 0;
        top: 500px;
    }
    .area .area_item:nth-of-type(9) {
        left: 0;
        top: 731px;
    }
    .area_item_list {
        padding: 11px 40px;
    }
    .area_item_list li a {
        transition: opacity .3s;
    }
    .area_item_list li a:hover {
        opacity: .7;
    }
    .section_top_area .btn {
        margin: 40px auto 0;
    }
}

/*
初心者ガイド
---------------------------------*/

.beginner_guide_txt {
    color: #000340;
    background-color: #e3fd80;
    font-weight: 700;
    padding: 8px 0 8px 40px;
    position: relative;
    border-radius: 4px;
}

.beginner_guide_txt.pc {
    padding: 8px 0 8px 44px;
}

.beginner_guide_txt.sp::before {
    content: '';
    background: url(../img/mobile-screen-button-solid-dark.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translate(0, -50%);
    height: 24px;
    width: 18px;
}
.beginner_guide_txt.pc::before {
    content: '';
    background: url(../img/computer-solid-dark.svg) no-repeat;
    position: absolute;
    top: 50%;
    left: 7px;
    transform: translate(0, -50%);
    height: 22px;
    width: 30px;
}

@media (min-width: 769px) {
    .beginner_guide_txt {
        display: inline-block;
        padding-right: 40px !important;
    }
}


/*
ACF related article
---------------------------------*/

.related_article_wrapper {
    margin-top: 64px;
}

.related_article_list {
    background: #fff;
    border: solid 2px #000340;
    padding: 16px;
    position: relative;

}

.related_article_pc {
    display: none;
}

.related_article_list::before {    
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    height: 36px;
    width: 36px;
    background: url(../img/corner_01_sp.svg) center / 100% no-repeat;
    transform: rotate(90deg);
}

.related_article_list::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: -4px;
    height: 36px;
    width: 36px;
    background: url(../img/corner_02_sp.svg) center / 100% no-repeat;
    transform: rotate(90deg);
}
.related_article_list li {
    border-bottom: solid #000340 2px;
}

.related_article_list li:last-child {
    border-bottom: none;
}

.related_article_list li a {
    position: relative;
    text-decoration: none;
}

.related_article_list .topics_cat {
    min-width: 25%;
}

.related_article_list .topics_inner {
    width: 100%;
}

.related_article_list .topics_title {
    margin-top: 16px;
}

.related_article_list .topics_title span {
    background: linear-gradient(transparent 60%, #E3FD80 60%);
}

.related_article_list li:hover .topics_title span {
    background: linear-gradient(transparent 60%, var(--main-color)12 60%);
}

@media (min-width: 769px) {
    .related_article_list.sp {
        display: none;
    }
    .related_article_pc {
        display: flex;
    }

}



/*TOPキャンペーン(sp)フッター*/
#campaign_box {position: fixed;bottom: 60px;left: 10px;box-sizing: border-box;z-index: 100;}
#campaign_box p.btn-link-fukidashi {text-align: center;margin: 0;}
#campaign_box p.btn-link-fukidashi a {position: relative;width: 150px;height: auto;display: block;color: #fd7a9f;    text-decoration: none;}
#campaign_box p.btn-link-fukidashi a:before {display: block;content: "現在申請受付中！";font-size: 70%;background: white;padding: 0px 5px;line-height: 25px;width: 80%;position: absolute;height: 25px;overflow: hidden;top: -27px;right: 15px;border-radius: 16px;animation: float 3s ease-in-out infinite;border: 1px solid #fd7a9f;}
@keyframes float {0% {transform: translateY(0);}50% {transform: translateY(-10px);}100% {transform: translateY(0);}}
#campaign_box p.btn-link-fukidashi a:after {display: block;content: "";position: absolute;top: -2px;right: 30px;width: 0;height: 0;border-style: solid;border-width: 8px 6px 0 6px;border-color: #fd7a9f transparent transparent transparent;animation: float 3s ease-in-out infinite;z-index: 100;}
#campaign_box p.btn-link-fukidashi a img {width: 100%;height: auto;border-radius: 8px;border:6px solid #fff;}
@media (min-width: 769px) {
#campaign_box {position: fixed;box-sizing: border-box;z-index: 100;bottom: 24px;left: 24px;}
#campaign_box p.btn-link-fukidashi {  text-align: center;  margin: 0;}
#campaign_box p.btn-link-fukidashi a {position: relative;width: 240px;height: auto;display: block;color: var(--main-color);}
#campaign_box p.btn-link-fukidashi a:before {        display: block;        content: "現在申請受付中！";        font-size: 80%;        background: white;        padding: 0px 5px;        line-height: 30px;        width: 80%;        position: absolute;        height: 30px;        overflow: hidden;        top: -27px;        right: 15px;        border-radius: 16px;        animation: float 3s ease-in-out infinite;        border: 2px solid var(--main-color);        text-decoration: none;    }
    @keyframes float {0% {transform: translateY(0);  }  50% {transform: translateY(-10px);  }  100% {transform: translateY(0);}
    }
#campaign_box p.btn-link-fukidashi a:after {        display: block;        content: "";        position: absolute;        top: 2px;        right: 30px;        width: 0;        height: 0;        border-style: solid;        border-width: 8px 6px 0 6px;        border-color: var(--main-color) transparent transparent transparent;        animation: float 3s ease-in-out infinite;        z-index: 100; }
#campaign_box p.btn-link-fukidashi a img {  width: 100%;  height: auto;}
}

/* 通勤エリア修正（PC） */
.area_map_sp {
    display: none;
}
@media (min-width: 769px) {
    .area {
        display: flex; 
        flex-direction: row-reverse;  
        justify-content: space-between;
        align-items: flex-start;
    }
    .area_map_pc {
        display: none;
    }

    .area_map_sp {
        display: block;
        height: auto;
        width: 100%;
        padding: 215px 0;
    }

    .area_map_sp img {
        width: 150%;
        max-width: none;
        position: relative;
        left: -25%;
    }

    .area_sp_flex {
        width: 30%;
    }

    .area .area_item {
        width: 100%;
        position: relative;
        top: 0 !important;
    }
}