@charset "utf-8";

/* ----------------------------------- */
/*  21.08.17〜 コーディング用カスタムCSS
/* ----------------------------------- */

html,
body,
p {
    margin: 0;
    padding: 0;
}
body {
    position: relative;
}

.max-w-7xl {
    max-width: 95rem;
    position: relative;
}

.sp_only {
    display: none;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .sp_only {
        display: block;
    }
}

/* ----------------------------------- */
/*   common 汎用スタイル                 */
/* ----------------------------------- */

.mt1rem {
    margin-top: 1rem;
}
.mb1rem {
    margin-bottom: 1rem;
}
.mtb1rem {
    margin: 1rem auto;
}
.mt3rem {
    margin-top: 3rem;
}
.mb3rem {
    margin-bottom: 3rem;
}
.mtb3rem {
    margin: 3rem auto;
}

.bold {
    font-weight: bold;
}

.fs18 {
    font-size: 18px;
}
.fs24 {
    font-size: 24px;
}
.fs36 {
    font-size: 36px;
}

.lineheight12 {
    line-height: 1.2;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .fs18 {
        font-size: 18px;
    }
    .fs24 {
        font-size: 22px;
    }
    .fs36 {
        font-size: 32px;
    }
}

.center {
    text-align: center;
}

.img_center {
    display: block;
    margin: 0 auto;
}

/* 見出し */
h2 {
    width: 100%;
    height: 40px;
    margin: 3rem auto;
    font-size: 32px;
    font-weight: bold;
}
h2 span {
    background: url(../img/common/h2_bg.jpg) no-repeat left top;
    height: 40px;
    display: table;
    margin: 0 auto;
    line-height: 40px;
    padding-left: 40px;
}

/* Media Query(sphone) */
@media (max-width: 768px) {
    h2 {
        font-size: 24px;
    }
}
/* Media Query(sphone) */
@media (max-width: 560px) {
    h2 {
        font-size: 20px;
    }
}

h3 {
    width: 100%;
    height: 26px;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

h3 span {
    display: table;
    background: url(../img/common/h3_bg.jpg) no-repeat left top;
    height: 26px;
    line-height: 26px;
    padding-left: 35px;
    margin: 0 auto;
}

/* ボタン */
.btn {
    margin: 5% auto;
    text-align: center;
}
.btn button {
    display: block;
    max-width: 50%;
    padding: 10px 20px;
    background: #175bed;
    margin: 0 auto;
    color: #fff;
    border-radius: 4px;
    border: 1px solid #fff;
}
.btn button:hover {
    background: #fff;
    border: 1px solid #175bed;
    color: #175bed;
}

/* リスト */
.menu-list {
    max-width: 1000px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 3rem auto;
}

.menu-list.list1 li {
    width: 100%;
}
.menu-list.list3 li {
    width: 33.3333%;
    text-align: center;
}
.menu-list.list4 li {
    width: 25%;
    text-align: center;
}
.menu-list.list4 li img {
    display: block;
    margin: 0 auto;
}

/* Media Query(sphone) */
@media (max-width: 1024px) {
    .menu-list.list4 li img {
        width: 90%;
    }
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .menu-list.list1 li img {
        max-width: 96%;
        margin: 0 auto;
    }

    .menu-list.list3 li {
        width: 100%;
        text-align: center;
    }

    .menu-list.list4 li {
        width: 50%;
        text-align: center;
    }

    .menu-list.list4 li img {
        width: 90%;
    }
}

/* インラインフレーム */
iframe#video {
    width: 100%;
    height: 480px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    iframe#video {
        width: 96%;
        height: 240px;
        margin: 0 auto;
    }
}

/* ----------------------------------- */
/*   レイアウト 汎用スタイル               */
/* ----------------------------------- */

.bg-cloud {
    width: 100%;
    height: 300px;
    background: url(../img/common/bg_cloud.png) no-repeat center top;
    background-size: cover;
    position: absolute;
    bottom: 0;
    z-index: 99;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .bg-cloud {
        height: 80px;
        background-size: 100%;
    }
}

/* ----------------------------------- */
/*   ヘッダー                           */
/* ----------------------------------- */
.top-header-inner {
    max-width: 1536px;
    padding: 15px 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.top-header-inner > div {
    width: 50%;
}
.top-header-inner .logo-area a {
    display: block;
    max-width: 120px;
}
.top-header-inner .menu-area {
    position: relative;
}

/* Media Query(sphone) */
@media (max-width: 1536px) {
    .top-header-inner {
        max-width: 96%;
    }
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .top-header-inner > div {
        width: 100%;
    }
    .top-header-inner .logo-area a {
        margin: 0 auto;
    }
}

/* --- パンくず --- */
.breadcrumb {
    width: 100%;
}
.breadcrumb .inner {
    padding: 10px;
    font-size: 0.8rem;
    margin-top: 15px;
}
.breadcrumb .inner a {
    text-decoration: underline;
}
.breadcrumb .inner a:hover {
    text-decoration: none;
}

/* --- アコーディオンメニュー --- */

#g-nav {
    position: fixed;
    z-index: 999;
    top: 0;
    right: -425px;
    width: 425px;
    height: 100vh; /*ナビの高さ*/
    background: #09357f;
    transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh; /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul,
#g-nav ul li {
    list-style: none;
}
#g-nav ul {
    width: 100%;
}

/*リストのレイアウト設定*/

#g-nav li a {
    color: #fff;
    text-decoration: none;
    padding: 20px 0;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: bold;
    text-indent: 30px;
}

#g-nav li a:hover {
    background: #0683cf;
}

#g-nav ul li a:before {
    content: "・";
}

.openbtn1 {
    position: fixed;
    z-index: 9999; /*ボタンを最前面に*/
    top: 5px;
    right: 10px;
    cursor: pointer;
    width: 80px;
    height: 80px;
}

/*×に変化*/
.openbtn1 span {
    display: inline-block;
    transition: all 0.4s;
    position: absolute;
    /*left: 14px;*/
    left: 10px;
    height: 5px;
    border-radius: 2px;
    background-color: #09357f;
    /*width: 45%;*/
    width: 75%;
}

.openbtn1 span:nth-of-type(1) {
    /*top:15px;*/
    top: 16px;
}

.openbtn1 span:nth-of-type(2) {
    /*top:23px;*/
    top: 37px;
}

.openbtn1 span:nth-of-type(3) {
    /*top:31px;*/
    top: 58px;
}

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

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

.openbtn1.active span:nth-of-type(3) {
    /*top: 30px;*/
    top: 42px;
    left: 32px;
    transform: translateY(-6px) rotate(45deg);
    /*width: 30%;*/
    width: 60%;
}

/*@media (min-width:1790px) and (max-width:1850px){
	.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) translateX(130px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) translateX(130px) rotate(45deg); }
}
@media (min-width:1730px) and (max-width:1790px){
	.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) translateX(100px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) translateX(100px) rotate(45deg); }
}
@media (min-width:1670px) and (max-width:1730px){
	.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) translateX(70px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) translateX(70px) rotate(45deg); }
}
@media (min-width:1610px) and (max-width:1670px){
	.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) translateX(40px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) translateX(40px) rotate(45deg); }
}
@media (min-width:1550px) and (max-width:1610px){
	.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) translateX(10px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) translateX(10px) rotate(45deg); }
}*/

/* Media Query(sphone) */
@media (max-width: 639px) {
    #g-nav {
        right: -320px;
        width: 320px;
    }

    /*.openbtn1.active span:nth-of-type(1){ transform: translateY(6px) rotate(-45deg); }
	.openbtn1.active span:nth-of-type(3){ transform: translateY(-6px) rotate(45deg); }*/
}

/* --- メインメニューページのロゴ --- */
.max-w-7xl .bg-white img.img_center {
    max-width: 240px;
}

/* --- サイドメニュー ログアウトボタン --- */
.side-btn {
    width: 100%;
    margin-top: 30px;
}
.side-btn form a {
    display: block;
    width: 300px;
    margin-left: 82.5px;
    padding: 10px 15px;
    background: #fabe00;
    color: #131313;
    text-align: center;
    border-radius: 5px;
}
.side-btn form a:hover {
    background: #fff;
    color: #fabe00;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .side-btn form a {
        margin-left: 10px;
    }
}

/* ----------------------------------- */
/*   ログインページ（login.html）         */
/* ----------------------------------- */
.f-layout .bg-gray-100 {
    background: url(../img/login/bg_login01.jpg) repeat left top;
    background-size: cover;
}

/* Media Query(tablet) */
/*@media (max-width:1025px){
}*/

/* Media Query(sphone) */
@media (max-width: 639px) {
    .login-form {
        max-width: 90%;
        border-radius: 0.5rem;
    }
}

/* ---------------------------------------------------- */
/*   トップページ（アセスメントを受ける前）01-1_before.html   */
/* --------------------------------------------------- */
.f-layout .bg-gray-100 .top-header {
    padding: 0;
    background: url(../img/common/top_header01.jpg) repeat left top;
    border-bottom: none;
}

.layout-yellow {
    background-color: #fff49f;
    height: 100%;
    padding: 10px;
}
.layout-yellow .layout-around {
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding-bottom: 300px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    /*.layout-yellow .layout-around{
		padding-bottom:120px;
	}*/

    .layout-yellow .layout-around {
        padding-bottom: 240px;
    }
}

/* ----------------------------------- */
/*   レッスン１ページ（03-2_lesson1.html） */
/* ----------------------------------- */
.lesson-box {
    border-radius: 0 0 5px 5px;
}
.lesson-box.lesson1 {
    border: 5px solid #00bd50;
}
.lesson-box.lesson2 {
    border: 5px solid #e9ce00;
}
.lesson-box.lesson3 {
    border: 5px solid #db5555;
}
.lesson-box.lesson4 {
    border: 5px solid #0583d0;
}

.lesson-box .lesson-title {
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    padding-bottom: 10px;
}
.lesson-box.lesson1 .lesson-title {
    background: #00bd50;
}
.lesson-box.lesson2 .lesson-title {
    background: #e9ce00;
}
.lesson-box.lesson3 .lesson-title {
    background: #db5555;
}
.lesson-box.lesson4 .lesson-title {
    background: #0583d0;
}

.lesson-box .menu-list {
    margin: 3rem auto;
}

.lesson-box .menu-list li .lesson-btn {
    width: 60%;
    color: #fff;
    text-align: center;
    border-radius: 10px;
}
.lesson-box.lesson1 .menu-list li .lesson-btn {
    background: #00bd50;
}
.lesson-box.lesson2 .menu-list li .lesson-btn {
    background: #e9ce00;
}
.lesson-box.lesson3 .menu-list li .lesson-btn {
    background: #db5555;
}
.lesson-box.lesson4 .menu-list li .lesson-btn {
    background: #0583d0;
}

/* Media Query(sphone) */
@media (max-width: 1024px) {
    .lesson-box .menu-list li .lesson-btn {
        width: 75%;
        font-size: 24px;
        padding: 10px 0;
    }
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .lesson-box {
        width: 100%;
        margin: 0 auto;
    }

    .lesson-box .menu-list li .lesson-btn {
        width: 94%;
        font-size: 24px;
        line-height: 1.4;
        padding: 5px 0;
    }
}

/* ------------------------------------------------------ */
/*   レッスンページの詳細（03-3-1-training01〜 .html）         */
/* ------------------------------------------------------ */
.lesson-title {
    width: 100%;
    text-align: center;
    margin: 0 auto 30px auto;
    font-size: 22px;
}
.lesson-title .inner {
    display: inline;
    line-height: 1.6;
}
.lesson-title .inner span {
    background: #00bd50;
    color: #fff;
    border-radius: 5px;
    font-size: 18px;
    line-height: 18px;
    padding: 0px 10px 3px 10px;
    margin-right: 10px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .lesson-title .inner span {
        display: block;
        margin: 0 auto;
        padding: 5px 0 8px 0;
        max-width: 50%;
    }
}

.select-box {
    width: 100%;
    text-align: center;
}
.select-box .inner {
    display: inline-block;
    margin: 0 auto;
    font-size: 28px;
}
.select-box .inner ul {
    margin: 0 auto 30px auto;
}
.select-box .inner ul li {
    text-align: left;
    padding: 5px 0;
}

.select-box button.complete-btn {
    font-size: 20px;
    color: #fff;
    background: #0583d0;
    padding: 10px 50px;
    border-radius: 5px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .select-box .inner ul {
        margin: 30px auto;
    }
    .select-box .inner ul li {
        font-size: 24px;
    }

    .select-box button.complete-btn {
        font-size: 18px;
        padding: 10px 30px;
    }
}

.voice-btn {
    margin: 0 auto 30px auto;
}
.voice-btn a img {
    display: block;
    margin: 0 auto;
}

.quiz-image img {
    display: block;
    margin: 0 auto;
    width: 1200px;
    height: 675px;
    object-fit: contain;
}

/* ------------------------------------------------------ */
/*   なかまたちやひみつどうぐをしょうかいページ（06_nakama.html） */
/* ------------------------------------------------------ */
.nakama-box {
    width: 100%;
}

.nakama-box .innerbox {
    width: 100%;
    padding: 30px;
    margin: 0 auto 30px auto;
    border-radius: 20px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.nakama-box .innerbox.box01 {
    border: 10px solid #fff49f;
}
.nakama-box .innerbox.box02 {
    border: 10px solid #fabe00;
}

.nakama-box .innerbox .text-area {
    margin-top: 20px;
    padding-top: 20px;
}

.nakama-box .innerbox.box01 .text-area {
    border-top: 5px solid #fff49f;
}
.nakama-box .innerbox.box02 .text-area {
    border-top: 5px solid #fabe00;
}

.nakama-box .innerbox .text-area p {
    font-size: 18px;
    line-height: 1.8;
}

.nakama-box .innerbox dt {
    width: 45%;
}
.nakama-box .innerbox dd {
    width: 55%;
    padding: 20px 0;
}

.nakama-box .innerbox dd h3 {
    margin-bottom: 6px;
    text-align: center;
}
.nakama-box .innerbox dd > p {
    text-align: center;
}

.nakama-box .innerbox dt img {
    display: block;
    margin: 0 auto 20px auto;
}

.nakama-box .list_3box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.nakama-box .list_3box dl.innerbox {
    width: 30%;
    margin: 0 1%;
}
.nakama-box .list_3box dl.innerbox dt {
    width: 100%;
}
.nakama-box .list_3box dl.innerbox dd {
    width: 100%;
}

/* Media Query(sphone) */
@media (max-width: 1024px) {
    .nakama-box .innerbox dt {
        width: 100%;
    }
    .nakama-box .innerbox dd {
        width: 100%;
    }

    .nakama-box .innerbox dd > p {
        font-size: 11px;
        margin: 10px 0;
    }

    .nakama-box .list_3box dl.innerbox {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* ------------------------------------------------------ */
/*   マイページ                                             */
/* ------------------------------------------------------ */

.mypage-btn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 30px auto;
}
.mypage-btn li {
    width: 50%;
}
.mypage-btn li a {
    width: 90%;
    display: block;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    border-radius: 10px;
    border: 3px solid #fff;
}
.mypage-btn li.btn01 a {
    background: #0583d0;
    padding: 20px 0;
}
.mypage-btn li.btn02 a {
    background: #eabc2c;
    padding: 20px 0;
}
.mypage-btn li.btn01 a:hover {
    border: 3px solid #0583d0;
    color: #0583d0;
    background: #fff;
}
.mypage-btn li.btn02 a:hover {
    border: 3px solid #eabc2c;
    color: #eabc2c;
    background: #fff;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .mypage-btn li {
        width: 100%;
    }
}

.mypage-message {
    margin: 0 auto 80px auto;
    text-align: center;
}
.mypage-message .image {
    display: inline-block;
    margin: 0 auto;
    font-size: 12px;
    font-weight: bold;
    background-size: 40px;
    padding-left: 50px;
}
.mypage-message .inner-no-image {
    line-height: 30px;
    display: block;
    margin: 0 auto;
    font-size: 20px;
    background-size: 40px;
    padding-left: 50px;
}
.mypage-message .inner {
    height: 50px;
    line-height: 50px;
    display: inline-block;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    background: url(../img/mypage/mp_icon01.jpg) no-repeat left top;
    background-size: 40px;
    padding-left: 50px;
}
.mypage-message .inner p {
    background: url(../img/mypage/mp_icon02.jpg) no-repeat right top;
    background-size: 40px;
    padding-right: 50px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .mypage-message .inner {
        padding-left: 40px;
    }

    .mypage-message .inner p {
        font-size: 12px;
        padding-right: 40px;
    }
}

.training-progress {
    width: 100%;
}

.training-progress dl.lesson-progress {
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.training-progress dl.lesson-progress dt {
    width: 14%;
    color: #fff;
    text-align: center;
    line-height: 1.2;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.training-progress dl.lesson-progress dt .title span {
    font-size: 46px;
    display: block;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
        "Hiragino Sans", Meiryo, sans-serif;
}

.training-progress dl.lesson-progress dd {
    width: 86%;
}

.training-progress dl.lesson-progress dd.inner {
    padding: 15px;
}

.training-progress dl.lesson-progress.lesson1 {
    border: 6px solid #00bd50;
}
.training-progress dl.lesson-progress.lesson1 dt {
    background: #00bd50;
}
.training-progress dl.lesson-progress.lesson2 {
    border: 6px solid #e9cf00;
}
.training-progress dl.lesson-progress.lesson2 dt {
    background: #e9cf00;
}
.training-progress dl.lesson-progress.lesson3 {
    border: 6px solid #db5554;
}
.training-progress dl.lesson-progress.lesson3 dt {
    background: #db5554;
}
.training-progress dl.lesson-progress.lesson4 {
    border: 6px solid #0583d0;
}
.training-progress dl.lesson-progress.lesson4 dt {
    background: #0583d0;
}

.training-progress dl.lesson-progress dl.lp-inner {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 15px;
}
.training-progress dl.lesson-progress dl.lp-inner:last-child {
    margin-bottom: 0;
}
.training-progress dl.lesson-progress dl.lp-inner dt {
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
}

.training-progress dl.lesson-progress dl.lp-inner dt .hanamaru {
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 999;
    width: 50px;
    height: 50px;
    background: url(../img/mypage/mp_hanamaru.png) no-repeat left top;
}

.training-progress dl.lesson-progress dl.lp-inner dd {
    width: 72%;
}

.training-progress dl.lesson-progress dl.lp-inner dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.training-progress dl.lesson-progress dl.lp-inner dd .p-check {
    width: 70%;
}
.training-progress dl.lesson-progress dl.lp-inner dd .sub-check {
    width: 30%;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.training-progress dl.lesson-progress dl.lp-inner dd .sub-check li {
    width: 100%;
}

/* いまのきもちチェック */
.training-progress dl.lesson-progress dl.lp-inner dd .sub-check li.now-feeling {
    text-align: center;
}

.training-progress
    dl.lesson-progress
    dl.lp-inner
    dd
    .sub-check
    li.now-feeling
    p {
    color: #131313;
    display: block;
    width: 100%;
    padding: 3px 0;
    background: #fdfc89;
    text-align: center;
}

.training-progress
    dl.lesson-progress
    dl.lp-inner
    dd
    .sub-check
    li.now-feeling
    span {
    display: inline-block;
}
.training-progress
    dl.lesson-progress
    dl.lp-inner
    dd
    .sub-check
    li.now-feeling
    span:before {
    content: "";
    background: url(../img/mypage/checked.png) no-repeat 6px center;
    padding-left: 25px;
}

/* やったよ */
.training-progress dl.lesson-progress dl.lp-inner dd .sub-check li.yattayo {
    text-align: center;
}
.training-progress
    dl.lesson-progress
    dl.lp-inner
    dd
    .sub-check
    li.yattayo
    span {
    color: #fff;
    background: #c83339;
    display: block;
    width: 100%;
    padding: 3px 0;
}

.training-progress dl.lesson-progress dl.lp-inner dd .p-check {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    min-height: 60px;
}
.training-progress dl.lesson-progress dl.lp-inner dd .p-check li {
    width: 25%;
}
.training-progress dl.lesson-progress dl.lp-inner dd .p-check li span {
    text-align: center;
    background: #ff7a29;
    color: #fff;
    width: 92%;
    height: 100%;
    margin: 0 2%;
    padding: 0;
    line-height: 1;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.training-progress
    dl.lesson-progress
    dl.lp-inner
    dd
    .p-check
    li:first-child
    span {
    margin: 0 0 0 4%;
}

/* Media Query(sphone) */
@media (max-width: 1280px) {
    .training-progress dl.lesson-progress dl.lp-inner dt {
        font-size: 14px;
    }

    .training-progress dl.lesson-progress dl.lp-inner dt .hanamaru {
        width: 30px;
        height: 30px;
        background-size: 30px;
    }

    .training-progress dl.lesson-progress dl.lp-inner dd .sub-check {
        margin: 10px auto 0 auto;
    }

    .training-progress
        dl.lesson-progress
        dl.lp-inner
        dd
        .sub-check
        li.now-feeling
        span,
    .training-progress dl.lesson-progress dl.lp-inner dd .p-check li span {
        font-size: 12px;
    }
}

/* Media Query(sphone) */
@media (max-width: 1024px) {
    .training-progress dl.lesson-progress dt {
        width: 100%;
        padding: 10px 0;
    }
    .training-progress dl.lesson-progress dd {
        width: 100%;
    }

    .training-progress dl.lesson-progress dl.lp-inner {
        margin-bottom: 40px;
    }

    .training-progress dl.lesson-progress dl.lp-inner dt {
        width: 100%;
        padding: 20px 0;
    }
    .training-progress dl.lesson-progress dl.lp-inner dd {
        width: 100%;
    }
    .training-progress dl.lesson-progress dl.lp-inner dd .p-check {
        width: 100%;
        margin-top: 6px;
    }
    .training-progress dl.lesson-progress dl.lp-inner dd .p-check li span {
        width: 92%;
        padding: 20px 0;
        margin: 0;
    }

    .training-progress
        dl.lesson-progress
        dl.lp-inner
        dd
        .p-check
        li:first-child
        span,
    .training-progress
        dl.lesson-progress
        dl.lp-inner
        dd
        .p-check
        li:last-child
        span {
        margin: 0;
    }
    .training-progress
        dl.lesson-progress
        dl.lp-inner
        dd
        .p-check
        li:last-child
        span {
        float: right;
        width: 100%;
    }

    .training-progress dl.lesson-progress dl.lp-inner dd .sub-check {
        width: 100%;
    }
}

/* ------------------------------------------------------ */
/*   グロースアセスメント                                    */
/* ------------------------------------------------------ */
.gas-box {
    width: 100%;
}
.gas-box > img {
    display: block;
    margin: 0 auto;
}

.start-message,
.gas-question-box {
    max-width: 900px;
    margin: 0 auto;
}

.start-message {
    background: #0583d0;
    text-align: center;
    position: relative;
    display: block;
    margin: 1.5em auto;
    padding: 15px 0;
    max-width: 900px;
    font-size: 32px;
    font-weight: bold;
}
.start-message:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -15px;
    border: 15px solid transparent;
    border-top: 15px solid #0583d0;
}
.start-message p {
    color: #fff;
    margin: 0;
    padding: 0;
}

.gas-qb-inner dl.gas-q {
    border: 3px solid #a2a2a2;
    border-radius: 20px;
    margin: 0 auto 30px auto;
}
.gas-qb-inner .description {
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    padding: 20px 0;
    line-height: 1.4;
}
.gas-qb-inner dl.gas-q dt {
    background: #0583d0;
    color: #fff;
    text-align: center;
    border-radius: 17px 17px 0 0;
    padding: 10px 0;
    font-weight: bold;
    font-size: 24px;
}
.gas-qb-inner dl.gas-q dd p.text {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    padding: 20px 0;
    line-height: 1.2;
}
.gas-qb-inner dl.gas-q dd ul.select-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li {
    width: 20%;
    text-align: center;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li img {
    display: block;
    margin: 0 auto;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label:hover {
    cursor: pointer;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num {
    text-align: center;
    display: block;
    border-radius: 20px;
    font-weight: bold;
    color: #fff;
    max-width: 80%;
    margin: 10px auto 0 auto;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num.num01 {
    background: #0d6fb8;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num.num02 {
    background: #fabe00;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num.num03 {
    background: #ed6158;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num.num04 {
    background: #079a3e;
}
.gas-qb-inner dl.gas-q dd ul.select-btn li label span.num.num05 {
    background: #ff7a29;
}

.gas-qb-inner .regist-btn {
    max-width: 300px;
    margin: 0 auto;
}
.gas-qb-inner .regist-btn a {
    display: block;
    color: #fff;
    background: #0583d0;
    border-radius: 6px;
    text-align: center;
    padding: 10px 0;
    font-size: 24px;
}

/* Media Query(sphone) */
@media (max-width: 639px) {
    .start-message {
        font-size: 16px;
    }

    .gas-qb-inner dl.gas-q dd ul.select-btn li img {
        max-width: 90%;
    }
    .gas-qb-inner dl.gas-q dd p.text {
        font-size: 16px;
    }
    .gas-qb-inner dl.gas-q dd ul.select-btn {
        justify-content: flex-start;
    }
    .gas-qb-inner dl.gas-q dd ul.select-btn li {
        width: 33.3333%;
        margin-bottom: 15px;
    }
}