/* Set charset to UTF-8 */

@charset "UTF-8";

/* Apply box-sizing to all elements */

* {
    box-sizing: border-box;
}


/* Set default font properties */

html {
    overflow-x: hidden;
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 16pt;
    line-height: 1.8;
    color: #333;
    -webkit-text-size-adjust: 100%;
    background-color: #F9F9F9;
}


/* Set max width for images */

img {
    max-width: 100%;
    vertical-align: middle;
}


/* Set margin and padding classes */

.mt {
    margin-top: 20px;
}

.mtx4 {
    margin-top: 80px;
}

.mb {
    margin-bottom: 20px;
}

.mbx2 {
    margin-bottom: 40px;
}

.mbx3 {
    margin-bottom: 60px;
}

.mbx4 {
    margin-bottom: 80px;
}

.pt {
    padding-top: 20px;
}

.ptx2 {
    padding-top: 40px;
}

.pb {
    padding-bottom: 20px;
}

.pbx2 {
    padding-bottom: 40px;
}

a {
    color: #fd7e14;
    /* 通常状態の色 */
    text-decoration: none;
    /* 下線を削除 */
}

a:hover {
    color: #FCC201;
    /* ホバー状態の色 */
}

a:active,
a:focus {
    color: #F9A602;
    /* アクティブ状態の色 */
}

a:visited {
    color: #fd7e14;
    /* 訪問済み状態の色 */
}


/* Set text alignment classes */

.cen {
    text-align: center;
}

.right {
    text-align: right;
}


/* Set relative position class */

.rel {
    position: relative;
}

.hidden {}

.visible {
    opacity: 1;
    transform: translateY(0);
}


/**Page Section*/


/* ヘッダー */

header {
    background-color: transparent;
    padding: 0.5rem 0;
    text-align: center;
    z-index: 1;
    position: relative;
    box-shadow: 0 22px 20px -30px rgba(53, 47, 47, 0.35);
}

header h1 {
    font-size: 1.8rem;
    color: #666;
}

header h1 img {
    height: 36px;
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

.cen {
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

nav ul li {
    list-style: none;
    margin: 0px 5px;
}

nav.head ul {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 0;
}

nav ul li {
    list-style: none;
    margin: 0px 5px;
}

nav ul li.cat {
    color: #fd7e14;
}

nav ul li img {}


/***/

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
}

.header .logo-container {
    display: flex;
    align-items: center;
}

.header .logo {
    height: 40px;
    margin-right: 10px;
}

.openbtn {
    position: relative;
    background: #ffa03f;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 5px;
}

.openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
}

.openbtn span:nth-of-type(1),
.openbtn span:nth-of-type(3) {
    height: 4px;
    background: #fff;
    width: 62%;
    left: 10px;
}

.openbtn span:nth-of-type(1) {
    top: 13px;
}

.openbtn span:nth-of-type(2) {
    top: 19px;
    left: 11px;
    font-size: 0.6rem;
    text-transform: uppercase;
    color: #fff;
}

.openbtn span:nth-of-type(3) {
    top: 36px;
}

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.header .nav {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 250px;
    height: 50vh;
    background-color: #fff;
    overflow: hidden;
    transform: translateX(120%);
    transition: transform 0.3s ease-in-out;
    border-radius: 10px;
    background: #fafafa;
    border: 2px solid #ffa03f;
}

.header .menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    font-size: 16px;
    height: 100%;
}

.header .nav.menu-active {
    transform: translateX(0%);
}

.header .menu a {
    display: block;
    padding: 8px 10px;
    text-decoration: none;
    color: #333;
}

.header .menu li {
    margin-bottom: 0px;
}

.header .menu .logout {
    margin-top: auto;
    color: #666666;
}

.header .menu .nav_footer {
    color: #fd7e14;
}

.header .menu .nav_footer img {
    height: 20px;
}

header.fix {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 999;
    background: #F9F9F9;
    max-width: 930px;
    margin: 0 auto;
}

.button01 {
    background-color: #fd7e14;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 10px;
    cursor: pointer;
}

a.button01:visited {
    color: #ffffff;
    ;
}

.right {
    float: right;
}

/***/

.share-container {
    box-sizing: border-box;
    padding: 0 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.share-button {
    background-color: #fd7e14;
    border: none;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 10px;
    cursor: pointer;
}


/* メインコンテンツ */

main {
    padding: 0.5rem 0;
    z-index: 1;
    position: relative;
    box-sizing: border-box;
}

.mv img {
    max-width: 400px;
    width: 100%;
}

section {
    margin-bottom: 1rem;
}

section h2 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}

section h2:before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url(../img/icon.png);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-top: -13px;
}

section p {
    font-size: 1rem;
    line-height: 1.6;
    text-align: justify;
}

.list-container {
    list-style: none;
    padding: 0;
}

.list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 5px;
    position: relative;
    opacity: 1;
    transform: translateY(20px);
    transition: all 0.5s;
}

.list-itemad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
    border-radius: 10px;
    padding: 5px;
    position: relative;
    transform: translateY(20px);
    transition: all 0.5s;
}

.list-item.visible {
    opacity: 1;
    transform: translateY(0);
}

.list-item.k1 {
    border: 3px solid #a8c4ea;
}

.list-item.k2 {
    border: 3px solid #eac8a8;
}

.list-item.k3 {
    border: 3px solid #eaa8bf;
}

.list-item.k4 {
    border: 3px solid #d8a8ea;
}

.list-item.k5 {
    border: 3px solid #a8eab9;
}

.list-item.k1:after {
    content: "パーソナル/自己成長";
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}

.list-item.k2:after {
    content: "キャリア/仕事";
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}

.list-item.k3:after {
    content: "リレーションシップ/社会的つながり";
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}

.list-item.k4:after {
    content: "健康/フィットネス";
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}

.list-item.k5:after {
    content: "財政/貯蓄";
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}

.list-item input[type="radio"] {
    margin-right: 5px;
}

.list-item span {
    flex-grow: 1;
}

.list-item .do {
    width: 100%;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}

.list-item .do img {
    height: 1em;
    margin-top: -11px;
}

.do,
.kind {
    margin-left: 1rem;
}

.list-item .do {
    color: #333;
    cursor: pointer;
}

.list-item .do::after {
    content: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%0A%09%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%23FF5733%3B%7D%0A%3C%2Fstyle%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M64%2C232V112c0-8.8%2C7.2-16%2C16-16h112c17.7%2C0%2C32-14.3%2C32-32s-14.3-32-32-32H80C35.8%2C32%2C0%2C67.8%2C0%2C112v118v47.7%0A%09c21.3-0.3%2C42.7-0.4%2C64-0.6V232z%22%2F%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M483%2C288c-17.7%2C0-32%2C14.3-32%2C32v112c0%2C8.8-7.2%2C16-16%2C16H316.1c0.4%2C21.3%2C1.7%2C42.7%2C3.2%2C64H435%0A%09c44.2%2C0%2C80-35.8%2C80-80V320C515%2C302.3%2C500.7%2C288%2C483%2C288z%22%2F%3E%0A%3Cpath%20class%3D%22st0%22%20d%3D%22M482.7%2C0H365c-11.9%2C0-22.6%2C7-27.2%2C17.8s-2%2C23.1%2C6.3%2C31.4l38%2C37.2L226.6%2C238.8c-11.5%2C11.2-11.5%2C29.5%2C0%2C40.8%0A%09c11.5%2C11.2%2C30.1%2C11.2%2C41.6%2C0l155.6-152.4l38%2C37.3c8.5%2C8.3%2C21%2C10.7%2C32.1%2C6.2c11-4.5%2C18.2-14.9%2C18.2-26.6V28.8%0A%09C512.1%2C12.9%2C499%2C0%2C482.7%2C0z%22%2F%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M-1.2%2C507.4l65.6-172.3h42.1l66.5%2C172.3h-41.9l-14-36.6H50.4l-12%2C36.6H-1.2z%20M108.5%2C441.8l-19.3-55.7%0A%09%09c-0.5-1.6-1.3-4.5-2.1-8.5c-0.9-4-1.8-8.9-2.7-14.7c-1%2C5.6-2%2C10.6-2.9%2C15c-0.9%2C4.4-1.6%2C7.4-2.1%2C8.9l-18.6%2C55H108.5z%22%2F%3E%0A%09%3Cpath%20class%3D%22st0%22%20d%3D%22M304%2C507.4h-32.5l0.5-16.6c-4.6%2C7.3-10%2C12.7-16.4%2C16.1c-6.4%2C3.4-14.2%2C5.1-23.4%2C5.1c-15.3%2C0-27.6-5.7-37-17.1%0A%09%09c-9.4-11.4-14.1-26.4-14.1-45.1c0-19.5%2C4.6-34.8%2C13.8-45.7c9.2-10.9%2C22-16.4%2C38.4-16.4c8.4%2C0%2C15.8%2C1.9%2C22.1%2C5.8%0A%09%09c6.4%2C3.8%2C12.3%2C9.9%2C17.9%2C18.2c-0.4-2.8-0.7-5.9-0.9-9.4c-0.2-3.4-0.3-7.3-0.3-11.7v-65.8H304V507.4z%20M273.3%2C449.5%0A%09%09c0-10.4-2.6-18.6-7.8-24.6c-5.2-6-12.3-9.1-21.1-9.1c-9.1%2C0-16.3%2C3-21.5%2C8.9c-5.2%2C5.9-7.8%2C14.1-7.8%2C24.5c0%2C10.4%2C2.6%2C18.6%2C7.7%2C24.5%0A%09%09c5.1%2C5.9%2C12.3%2C8.8%2C21.4%2C8.8c9.3%2C0%2C16.4-2.9%2C21.5-8.7C270.8%2C468.1%2C273.3%2C459.9%2C273.3%2C449.5z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    margin-left: 5px;
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
}

.list-item .check {
    width: 100%;
    text-align: center;
    font-size: 1.0em;
    display: block;
    margin-top: 5px;
}

.list-item .kind {
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 0.8em;
    color: #666;
    display: inline-block;
    background: #F9F9F9;
    padding: 0 5px;
}


/*list-style*/

.list-item {
    display: flex;
    align-items: center;
}

.list-item > label {
    position: absolute;
    z-index: 1;
    top: -3px;
    font-weight: bold;
    left: 4px;
    background: #fafafa;
    height: 16px;
    color: #aaaaaa;
}

.list-item label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 5px;
}

.list-item input[type="radio"] {
    display: none;
}

.list-item .radio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-right: 4px;
}

.list-item input[type="radio"]:checked + .radio {
    border-color: #1a73e8;
}

.list-item .radio::before {
    content: '';
    width: 10px;
    height: 10px;
    background: #1a73e8;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.list-item input[type="radio"]:checked + .radio::before {
    opacity: 1;
    transform: scale(1);
}

.list-item input[type="radio"]:checked + .radio01 {
    border-color: #28A745;
}

.list-item input[type="radio"]:checked + .radio02 {
    border-color: #FD7E14;
}

.list-item input[type="radio"]:checked + .radio03 {
    border-color: #007BFF;
}

.list-item .radio04 {
    display: none;
}

.list-item .radio01::before {
    background: #28A745;
}

.list-item .radio02::before {
    background: #FD7E14;
}

.list-item .radio03::before {
    background: #007BFF;
}


/* フッター */

footer {
    padding: 1rem 0;
    text-align: center;
    color: #fff;
    z-index: 1;
    position: relative;
}

footer p {
    font-size: 0.8rem;
    color: #fd7e14;
}

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

.w50 {
    width: 50%;
}

.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.toggle_buttons {
    display: flex;
    justify-content: center;
}

.toggle_buttons a {
    background-color: #fd7e14;
    color: #fff;
    display: inline-block;
    text-align: center;
    padding: 10px 2%;
    width: 50%;
    max-width: 150px;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
    margin: 0 10px;
}

.toggle_buttons a:first-child {
    background-color: #f27474;
}

.form-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 0 20px 20px 20px;
}

.form-header {
    text-align: center;
    margin-bottom: 20px;
}

.form-header h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.form-header p {
    font-size: 18px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea,
.form-group input[type="password"] {
    display: block;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 16px;
    box-sizing: border-box;
    line-height: 1.5;
}

.form-group button[type="submit"] {
    background-color: #007bff;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer;
}

.password-strength {
    display: block;
    margin-top: 5px;
}

.social-login {
    margin-top: 20px;
    text-align: center;
}

.social-login p {
    font-size: 14px;
    margin-bottom: 10px;
}

.social-buttons button {
    display: inline-block;
    margin-right: 10px;
    background-color: #fff;
    color: #007bff;
    border: 1px solid #007bff;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

.social-buttons button:hover {
    background-color: #007bff;
    color: #fff;
}


/**Hover*/

a:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s ease-in-out;
    animation: flash 1.5s ease-in-out;
}

.list-item .do span:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s ease-in-out;
    animation: flash 1.5s ease-in-out;
}

@-webkit-keyframes flash {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

@keyframes flash {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.4;
    }
}

.context {
    width: 100%;
    position: absolute;
    top: 50vh;
}

.context h1 {
    text-align: center;
    color: #fff;
    font-size: 50px;
}

.area {
    background: #fafafa;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgb(255 239 52 / 20%);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.bg_check {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

.bg_check svg {
    max-width: 640px;
    width: 33%;
}

.bg_check.active {
    display: flex;
}

#svg-container svg {
    text-align: center;
    margin: auto;
    width: 640px;
    height: 640px;
    max-width: 640px;
    max-height: 640px;
    opacity: 0.8;
}

#svg-container .circle {
    animation: check 200ms ease-in-out forwards;
    stroke-dashoffset: 1000;
    stroke-dasharray: 1000;
}

.check {
    animation: check 100ms ease-in-out 0.1s forwards;
    stroke-dashoffset: 1000;
    stroke-dasharray: 1000;
}

.overlay.active {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    top: 0;
    left: 0;
}

.continue_btn {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 999;
    width: 100px;
    opacity: 0.8;
    display: block;
    cursor: pointer;
}

.top_btn {
    position: fixed;
    bottom: 40px;
    left: 20px;
    z-index: 999;
    width: 80px;
    display: none;
    cursor: pointer;
}

@keyframes check {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeOut {
    from {
        opacity: 0.8;
    }

    to {
        opacity: 0;
    }
}

@media screen and (min-width: 768px) {
    .pconly {}

    .sponly {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    .inner {
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .spb {
        display: block;
    }

    .spbr {
        display: block;
    }

    .sppw {
        padding-left: 2%;
        padding-right: 2%;
        box-sizing: border-box;
    }

    .pconly {
        display: none !important;
    }

    .sponly {}

    header h1 {
        font-size: 1.5rem;
        margin: 0;
    }

    header .mv {
        padding: 0 2%;
    }

    .header .nav {
        height: 65vh;
    }

    .adfooter {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 999;
        padding: 5px;
        background: #F9F9F9;
    }

    .adfooter p {
        margin: 0;
    }

    footer.fix {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        z-index: 999;
        background: #F9F9F9;
    }

    footer.fix p {
        margin: 0;
    }

    .share-button {
        display: inline-block;
    }

    section h2 {
        font-size: 1.2rem;
    }

    section p {
        font-size: 0.9rem;
    }

    #svg-container svg {
        width: 50vh;
        height: 50vh;
    }

    .list-item .do {
        font-size: 0.9em;
        margin: 10px 0 0 0;
    }

    .list-item .check {
        font-size: 0.8em;
    }

    .keyword_wrap {
        text-align: right;
    }

    .keyword {
        margin-left: auto;
        margin-right: 0;
        max-width: 60%;
        font-size: 85%;
        border-radius: 5px;
    }
}