@charset "UTF-8";
/************************ 共通 ************************/
.item-center {
    align-items: center;
}
.sm-text {
    font-size: 1.2rem!important;
}
.indent-15em {
    text-indent: -1.5em;
    padding-left: 1.5em;
}
.bold {
    font-weight: bold!important;
}
.nowrap {
    white-space: nowrap;
}
.width-80px {
    width: 80px;
}
.width-100px {
    width: 100px;
}

@media screen and (max-width:480px){
    .sp-width-60px {
        width: 60px;
    }
}
/************************ indexページ ここから ************************/
div.hem_pt_wrap #psychology {overflow-x:hidden;}
#psychology{
    max-width:1920px;
    padding:0;
    margin:40px auto 0;
    letter-spacing:0.5pt;
    font-weight:500;
}

/* index ページタイトル */
#psychology div.main{
    position:relative;
    margin: 0 auto;
    padding:0;
    max-width: 980px;
    z-index:1;
    border:3px solid #FFB43C;
    border-radius:20px;
    overflow:hidden;
    box-sizing:border-box;
}

#psychology div.main h2{
    color:#fff;
    font-size:2.4rem;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    padding:10px;
    background:#FFB43C;
}

#psychology div.main img{
    vertical-align:bottom;
}

#psychology p.name{
    text-align:right;
    max-width:980px;
    margin:15px auto 0;
}
#psychology p.name > span{
    display:inline-block;
    font-size:1.8rem;
    font-weight:600;
    padding-left:5px;
}
#psychology p.name > span span{
    display:inline-block;
    padding-left:5px;
    font-size:1.4rem;
}

#psychology p.read{
    font-size:2rem;
    line-height:1.8;
    font-weight:700;
    text-align:center;
    margin:60px auto 0;
}
#psychology span.org{color:#FF9A4B;}
#psychology span.bold{font-weight:900;}

#psychology span.yelline{position:relative;}
#psychology span.yelline::before{
    position:absolute;
    content:"";
    display:inline-block;
    bottom:-0.25em;
    left:0;
    width:100%;
    height:0.75em;
    background:#FFEF8C;
    z-index:-1;
}


/* 患者さんの心のステージとは？ */
div.top_contents{
    max-width:100%;
    padding:0 20px;
    margin-top:80px;
    background:url(../img/dot_col.png) center repeat;
}

div.top_contents div.inner{
    position:relative;
    max-width:1200px;
    padding:170px 0;
    margin:0 auto;
    font-weight:600;
    text-align:center;
}

div.top_contents div.inner::before,
div.top_contents div.inner::after{
    position:absolute;
    content:"";
    display:inline-block;
    top:50%;
    transform:translateY(-50%);
    z-index:0;
}

div.top_contents div.inner::before{
    left:0;
    width:430px;
    height:505px;
    background:url(../img/image_left.png) center/contain no-repeat;
}

div.top_contents div.inner::after{
    right:0;
    width:437.5px;
    height:580px;
    background:url(../img/image_right.png) center/contain no-repeat;
}

div.top_contents h3{
    font-size:3.2rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.2pt;
}

div.top_contents p{
    font-size:1.8rem;
    line-height:2;
    margin-top:30px;
}

div.top_contents a.btn{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:210px;
    height:50px;
    color:#fff;
    font-size:1.6rem;
    font-weight:600;
    line-height:1;
    margin:30px auto 0;
    border-radius:25px;
    background:#FF9A4B;
    transform:translateY(0);
    transition:0.3s ease;
    z-index:1;
}
div.top_contents a.btn:hover{
    opacity:0.7;
    transform:translateY(3px);
}


/* 病気の理解 */
div.top_stage{
    max-width:100%;
    padding:0 20px;
    margin-top:160px;
    margin-bottom: 10px;
}

div.top_stage div.inner{
    position:relative;
    max-width:900px;
    margin:0 auto;
    padding:0;
}

div.top_stage div.inner::before{
    position:absolute;
    content:"";
    display:inline-block;
    width:450px;
    height:100%;
    background:url(../img/stage1.svg) top center/contain no-repeat;
    top:0;
    right:-16rem;
    z-index:-1;
}

div.top_stage span.label{
    position:relative;
    display:flex;
    justify-content:center;
    color:#2297b4;
    font-size:1.6rem;
    line-height:1;
    margin:0 auto 15px;
    padding-bottom:14px;
}
div.top_stage span.label::before{
    position:absolute;
    content:"";
    display:inline-block;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:20px;
    height:1px;
    background:#2297b4;
}

div.top_stage h3{
    color:#2297b4;
    font-size:3.2rem;
    line-height:1;
    font-weight:700;
    text-align:center;
}

div.top_stage div.flex{
    display:flex;
    justify-content:space-between;
    margin-top:40px;
}

div.top_stage div.flex > a{
    width:calc((100% - 20px)/2);
    transition:0.3s ease;
    border-radius: 13px;
    box-shadow: 0 2px 11px rgba(0,0,0,0.3);
}
div.top_stage div.flex > a.new {
    position: relative;
}
div.top_stage div.flex > a.new .new-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #de0012;
    width: 18%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    position: absolute;
    top: -5%;
    left: -2%;
}
div.top_stage div.flex > a.new::after {
    /* content: 'NEW'; */
    content: none;
    position: absolute;
    left: -2%;
    top: -5%;
    background: #de0012;
    width: 18%;
    height: 28%;
    max-height: 80px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding-top: 6%;
}

div.top_stage div.flex > a:hover{opacity:0.7;}

br.br399{display:none;}
br.br480{display:none;}
br.br767{display:none;}

.sp{display:none;}

.mg-auto{
    margin-left: auto!important;
    margin-right: auto!important;
}

@media screen and (max-width:1280px){

/* 患者さんの心のステージとは？ */
div.top_contents div.inner{
    padding:12vw 0;
}
div.top_contents div.inner::before{
    left:-40px;
    width:33.59vw;
    height:100%;
}
div.top_contents div.inner::after{
    right:-40px;
    width:34.17vw;
    height:100%;
}
/* 病気の理解 */
div.top_stage div.inner::before{right:calc(50% - (50vw - 40px));}
    
}


@media screen and (max-width:991px){

/* index ページタイトル */
#psychology div.main{max-width:calc(100% - 40px);}
#psychology p.name{max-width:calc(100% - 40px);}

/* 患者さんの心のステージとは？ */
div.top_contents div.inner{padding:100px 0;}

div.top_contents h3{font-size:3.2290vw;}
div.top_contents p{font-size:1.6rem;}

/* 病気の理解 */
div.top_stage div.inner::before{right:calc(50% - (50vw - 20px));}
div.top_stage div.flex > a:last-of-type::after {font-size: 16px;}

/* NEW アイコン */
div.top_stage div.flex > a.new .new-icon {font-size: 16px;}
div.top_stage div.flex > a.new::after {font-size: 16px;}
}


@media screen and (max-width:767px){


/* 患者さんの心のステージとは？ */
div.top_contents{margin-top:160px;}
div.top_contents div.inner{padding:28vw 0 45vw;}

div.top_contents div.inner::before,
div.top_contents div.inner::after{
    top:-15vw;
    left:50%;
    transform:translate(-50%,0);
    height:100%;
    z-index:0;
}

div.top_contents div.inner::before{
    width:108.21vw;
    background:url(../img/image_top.png) top center/contain no-repeat;
    margin-left:-2%;
}

div.top_contents div.inner::after{
    top:auto;
    bottom:-7.5vw;
    width:109.51vw;
    background:url(../img/image_bottom.png) bottom center/contain no-repeat;
}

div.top_contents h3{font-size:3.2rem;}
div.top_contents p{font-size:1.8rem;}


div.top_stage div.inner::before{
    width:350px;
    top:-80px;
}
  
div.top_stage div.flex > a:last-of-type::after {font-size: 14px;}
    
br.br767{display:inline;}
br.br767-non{display:none;}

.pc{display:none;}
.sp{display:inline-block;}

/* NEW アイコン */
div.top_stage div.flex > a.new .new-icon {font-size: 14px;}
div.top_stage div.flex > a.new::after {font-size: 14px;}

}


@media screen and (max-width:599px){

/* 病気の理解 */
div.top_stage{margin-top:200px;}
div.top_stage div.inner::before{
    width:66vw;
    top:-16.5vw;
    right:calc(50% - (50vw - 10px));
}

div.top_stage div.flex{
    flex-direction:column;
    align-items:center;
}
div.top_stage div.flex > a{width:auto;}
div.top_stage div.flex > a + a{margin-top:40px;}
div.top_stage div.flex > a:last-of-type::after {
    font-size: 12px;
    width: 16%;
    height: 25%;
  }

  /* NEW アイコン */
  div.top_stage div.flex > a.new .new-icon {
    font-size: 12px;
    width: 16%;
  }
div.top_stage div.flex > a.new::after {
    font-size: 12px;
    width: 16%;
    height: 25%;
}

}


@media screen and (max-width:480px){


#psychology p.name{
    max-width:calc(100% - 80px);
    text-align:left;
    line-height:1.5;
    margin-top:10px;
}
#psychology p.name > span{
    display:block;
    font-size:1.6rem;
    padding-left:0;
}
#psychology p.read{
    max-width:calc(100% - 80px);
    text-align:left;
    font-size:1.8rem;
    line-height:1.8;
    margin-top:30px;
}


/* 患者さんの心のステージとは？ */
div.top_contents{
    margin-top:120px;
    background:url(../img/dot_col.png) center/22.5px repeat;
}
div.top_contents div.inner{padding:22vw 0 48vw;}

div.top_contents div.inner::before{top:-15vw;}
div.top_contents div.inner::after{bottom:-7.5vw;}

div.top_contents h3{
    font-size:min(6.6vw,3.2rem);
    line-height:1.3;
}
div.top_contents p{
    margin-top:15px;
    font-size:min(3.75vw,1.8rem);
}
div.top_contents a.btn{
    width:180px;
    margin-top:20px;
}

/* 病気の理解 */
div.top_stage{margin-top:160px;}
div.top_stage h3{font-size:min(6.6vw,3.2rem);}



br.br480{display:inline;}
br.br480-non{display:none;}

}


@media screen and (max-width:399px){

#psychology p.read{font-feature-settings:"palt";}
br.br399{display:inline;}

}

/* サポーターとの関係構築 */
div.top_stage.st02 div.inner::before{
    background:url(../img/stage2.svg) top center/contain no-repeat;
}

div.top_stage.st02 span.label{
    color:#5BC671;
}
div.top_stage.st02 span.label::before{
    background:#5BC671;
}

div.top_stage.st02 h3{
    color:#5BC671;
}

div.top_stage div.flex > a.coming {
    pointer-events: none;
    box-shadow: none;
}

/* 病気のコントロールと達成感 */
div.top_stage.st03 div.inner::before{
    background:url(../img/stage3.svg) top center/contain no-repeat;
}

div.top_stage.st03 span.label{
    color:#B489D3;
}
div.top_stage.st03 span.label::before{
    background:#B489D3;
}

div.top_stage.st03 h3{
    color:#B489D3;
}

/* STAGE4 病気のコントロールと達成感 */
div.top_stage.st04 div.inner::before{
    background:url(../img/stage4.svg) top center/contain no-repeat;
}

div.top_stage.st04 span.label{
    color:#F456A2;
}
div.top_stage.st04 span.label::before{
    background:#F456A2;
}

div.top_stage.st04 h3{
    color:#F456A2;
}
/* STAGE5 人を育てたり誰かの役に立てたりすること */
div.top_stage.st05 div.inner::before{
    background:url(../img/stage5.svg) top center/contain no-repeat;
}

div.top_stage.st05 span.label{
    color:#AA8047;
}
div.top_stage.st05 span.label::before{
    background:#AA8047;
}

div.top_stage.st05 h3{
    color:#AA8047;
}


/************************ indexページ ここまで ************************/




/************************ stageページ ここから ************************/
div.stage div.message{
    position:relative;
    max-width:100%;
    padding:0 20px;
    background:url(../img/stage/dot_mono.png) center repeat;    
    z-index:1;
}

div.message div.inner{
    max-width:900px;
    margin:0 auto;
    padding:40px 0 60px;
}

div.message h2{
    color:#fff;
    font-size:3.2rem;
    font-weight:700;
    line-height:1.1;
    text-align:center;
    padding:25px 10px;
    background:#FFB43C;
    border-radius:20px;
}
div.message h2 + p{margin-top:40px;}

div.message p{
    font-size:1.8rem;
    text-align:center;
    line-height:1.6;
    margin-top:1em;
}

/* 会話形式 */
div.talk_area{
    max-width:740px;
    padding:0 20px;
    margin:60px auto 0;
}
div.talk_area div.flex{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    align-items:center;
}
div.talk_area div.flex + div.flex{margin-top:60px;}
div.talk_area div.flex.reverse{flex-direction:row-reverse;}

div.talk_area div.img{width:120px;}

div.talk_area div.txt{
    display:flex;
    align-items:center;
    min-height:150px;
    width:calc(100% - 140px);
    padding:30px;
    border:2px dashed #C1C2C2;
    border-radius:20px;
    box-sizing:border-box;
}
div.talk_area div.txt p{
    font-size:1.6rem;
    font-feature-settings:"palt";
}

/* 解説 */
div.commentary{
    max-width:940px;
    padding:0 20px;
    margin:60px auto 0;
}
div.commentary p{
    font-size:1.6rem;
    line-height:1.8;
}
div.commentary p.large{
    font-size:2rem;
    font-weight:900;
}

/* イラスト */
div.commentary div.flex{
    display:flex;
    justify-content:space-between;
    margin-top:1em;
}
div.commentary div.flex div{width:calc(100% - 400px);}
div.commentary div.flex div:last-child{width:370px;}


/* ステージステップ*/
div.step_area{
    margin-top:60px;
    padding:60px 20px;
    background:#EFF0F0;
}
div.step_area div.inner{
    max-width:900px;
    margin:0 auto;
}
div.step_area h2{
    font-size:2.6rem;
    font-weight:500;
    line-height:1.1;
    text-align:center;
    padding:20px 10px;
    background:#fff;
    border:2px solid #FF9A4B;
    border-radius:50rem;
}
div.step_area h2 + div.step{margin-top:60px;}

div.step_area div.step{
    position:relative;
    display:flex;
    justify-content:space-between;
    max-width:820px;
    margin:0 auto;
    z-index:0;
}
div.step_area div.step + div.step{padding-top:20px;}

div.step_area div.step > div{
    width:calc(100% - 150px);
    padding-bottom:40px;
}
div.step_area div.step > div:first-child{
    position:relative;
    width:110px;
    overflow:hidden;
    padding-bottom:0;
}
div.step_area div.step > div:first-child::before{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    content:"";
    display:inline-block;
    width:18px;
    height:700px;
    background:url(../img/stage/arrow.svg) bottom center  no-repeat;
    z-index:-1;
}

div.step_area div.step > div span.label{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    width:110px;
    height:110px;
    color:#fff;
    font-size:1.6rem;
    letter-spacing:0;
    font-weight:900;
    line-height:1;
    background:#333;
    border-radius:55px;
}
div.step_area div.step > div span.label span{
    font-size:2.8rem;
    padding-top:5px;
}

div.step_area div.step h3{
    font-size:2.6rem;
    font-weight:700;
    padding-top:30px;
}
div.step_area div.step div.mark{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    margin:30px auto 0;
    padding:30px;
    background:#fff;
    border-radius:20px;
}
div.step_area div.step div.mark span{
    width:50px;
    font-size:1.6rem;
    text-align:right;
    font-weight:700;
}
div.step_area div.step div.mark p{
    position:relative;
    width:calc(100% - 90px);
    font-size:2.2rem;
    line-height:1.6;
    font-weight:700;
    letter-spacing:0.1pt;
    padding-left:20px;
    margin-left:20px;
}
div.step_area div.step div.mark p::before{
    position:absolute;
    content:"";
    left:0;
    top:0;
    display:inline-block;
    width:1px;
    height:100%;
    background:#C1C2C2;
}
div.step_area div.step div.mark p.icon{
    width:100%;
    color:#595757;
    font-size:1.4rem;
    font-weight:500;
    line-height:1.4;
    margin:20px 0 0;
    padding-left:20px;
}
div.step_area div.step div.mark p.icon::before{
    top:5px;
    width:14px;
    height:14px;
    border-radius:7px;
    background:#333;
}


/* ステージ1 */
div.step_area div.stage01 > div span.label{background:#2297B4;}
div.step_area div.stage01 h3{color:#2297B4;}
div.step_area div.stage01 div.mark span{color:#2297B4;}
div.step_area div.stage01 div.mark p{color:#2297B4;}
div.step_area div.stage01 div.mark p.icon::before{background:#2297B4;}

/* ステージ2 */
div.step_area div.stage02 > div span.label{background:#19AAAA;}
div.step_area div.stage02 h3{color:#19AAAA;}
div.step_area div.stage02 div.mark span{color:#19AAAA;}
div.step_area div.stage02 div.mark p{color:#19AAAA;}
div.step_area div.stage02 div.mark p.icon::before{background:#19AAAA;}

/* ステージ3 */
div.step_area div.stage03 > div span.label{background:#19AA8D;}
div.step_area div.stage03 h3{color:#19AA8D;}
div.step_area div.stage03 div.mark span{color:#19AA8D;}
div.step_area div.stage03 div.mark p{color:#19AA8D;}
div.step_area div.stage03 div.mark p.icon::before{background:#19AA8D;}

/* ステージ4 */
div.step_area div.stage04 > div span.label{background:#1BA76F;}
div.step_area div.stage04 h3{color:#1BA76F;}
div.step_area div.stage04 div.mark span{color:#1BA76F;}
div.step_area div.stage04 div.mark p{color:#1BA76F;}
div.step_area div.stage04 div.mark p.icon::before{background:#1BA76F;}

/* ステージ5 */
div.step_area div.stage05 > div span.label{background:#1CA53E;}
div.step_area div.stage05 h3{color:#1CA53E;}
div.step_area div.stage05 div.mark span{color:#1CA53E;}
div.step_area div.stage05 div.mark p{color:#1CA53E;}
div.step_area div.stage05 div.mark p.icon::before{background:#1CA53E;}
div.step_area div.stage05 > div:first-child::before{display:none;}

/*テーブル*/
div.step_area p.heading{
    color:#FF9A4B;
    line-height:1;
    font-weight:600;
}
div.step_area table.st01{
    width:900px;
    margin-top:15px;
    border:1px solid #595757;
    background:#fff;
    border-collapse:collapse;
}
div.step_area table.st01 tr th,
div.step_area table.st01 tr td{
    font-size:1.5rem;
    font-weight:500;
    letter-spacing:0;
    width:auto;
    padding:10px;
    border:1px solid #595757;
}
div.step_area table.st01 tr th{
    color:#fff;
    font-weight:900;
    background:#FFB43C;
    vertical-align: middle;
    padding:10px 5px;
}
div.step_area table.st01 tr td:nth-child(1){width:240px;}

div.step_area table.st01 tr td{
    position:relative;
    font-size:1.3rem;
    height:80px;
}
div.step_area table.st01 tr td:nth-of-type(1){
    font-size:1.5rem;
    background:rgba(255,180,60,0.1);
}

/*5列*/
div.step_area table.st01 tr th:nth-child(3){padding:8px 5px;}
div.step_area table.st01 tr.sub th{
    font-size:1.2rem;
    padding:5px 2px;
    width:64px;
}
div.step_area table.st01 tr.sub th{
    border-left-style:dotted;
    border-right-style:dotted;
}
div.step_area table.st01 tr td:nth-child(n + 3){
    width:60px;
    border-left-style:dotted;
    border-right-style:dotted;
}

div.step_area table.st01 tr td.icon::before{
    position:absolute;
    content:"";
    display:inline-block;
    top:50%;
    left:25px;
    transform:translateY(-50%);
    width:90px;
    height:12px;
    background:url(../img/stage/scale_i01.svg) center/contain no-repeat;    
    z-index:1;
}

div.step_area table.st01 tr td.icon.i02::before{
    left:8px;
    width:104px;
    background:url(../img/stage/scale_i02.svg) center/contain no-repeat;    
}
div.step_area table.st01 tr td.icon.i03::before{
    left:41px;
    width:100px;
    background:url(../img/stage/scale_i03.svg) center/contain no-repeat;    
}
div.step_area table.st01 tr td.icon.i04::before{
    left:42px;
    width:100px;
    background:url(../img/stage/scale_i03.svg) center/contain no-repeat;    
}
div.step_area table.st01 tr td.icon.i05::before{
    left:32px;
    width:75px;
    background:url(../img/stage/scale_i04.svg) center/contain no-repeat;    
}
div.step_area div.table_wrap + p{
    font-size:1.6rem;
    line-height:2;
    margin-top:40px;
}



/* あとがき */
div.postscript{
    max-width:940px;
    padding:0 20px;
    margin:60px auto 0;
}
div.postscript p{
    font-size:1.6rem;
    letter-spacing:1.2pt;
    line-height:2;
    font-feature-settings:"palt";
}
div.postscript p + p{margin-top:1em;}

/* ページ送り */
div.postscript div.pagenation{
    display:flex;
    justify-content:space-between;
    margin-top:100px;
}
div.postscript div.pagenation.left{justify-content:flex-start;}
div.postscript div.pagenation.right{justify-content:flex-end;}

div.postscript a{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    width:300px;
    height:66px;
    color:#F3901D;
    font-size:2rem;
    line-height:1;
    font-weight:900;
    border:2px solid #F3901D;
    border-radius:20px;
    transition:0.3s ease;
}
div.postscript a::before{
    position:absolute;
    content:"";
    right:25px;
    top:50%;
    transform:translateY(-50%) rotate(45deg);
    display:inline-block;
    width:12px;
    height:12px;
    border:2px solid transparent;
    border-top:2px solid #F3901D;
    border-right:2px solid #F3901D;
    transition:0.3s ease;
}
div.postscript a:hover{
    color:#fff;
    background:#F3901D;
}

div.postscript a:hover::before{
    border-top:2px solid #fff;
    border-right:2px solid #fff;
}


@media screen and (max-width:767px){

div.message h2{
    font-size:min(3.65vw,2.8rem);
    padding:20px 10px;
}
div.message h2 + p{margin-top:40px;}
div.message p{
    font-size:1.6rem;
    text-align:left;
    line-height:2;
}
div.talk_area div.txt p{line-height:1.8;}


/* イラスト */
div.commentary div.flex{
    flex-wrap:wrap;
    justify-content:center;
}
div.commentary div.flex div{width:auto;}
div.commentary div.flex div:last-child{margin-top:20px;}


/* ページ送り */
div.postscript div.pagenation{margin-top:60px;}
div.postscript a{
    width:auto;
    height:60px;
    font-size:1.4rem;
    padding:15px 30px 15px 15px;
}
div.postscript a::before{
    right:15px;
    width:10px;
    height:10px;
    border-top-width:1px;
    border-right-width:1px;
}
div.postscript a:hover::before{
    border-top-width:1px;
    border-right-width:1px;
}


}

@media screen and (max-width:599px){

/* 会話形式 */
div.talk_area{margin-top:40px;}
div.talk_area div.flex{justify-content:center;}
div.talk_area div.flex + div.flex{margin-top:20px;}

div.talk_area div.txt{
    min-height:initial;
    width:100%;
    padding:15px;
    border:1px dashed #C1C2C2;
}
div.talk_area div.txt p{line-height:2;}

/* 解説 */
div.commentary{margin-top:40px;}
div.commentary p{
    font-feature-settings:"palt";
    letter-spacing:1pt;
    line-height:2;
}
div.commentary p.large{font-size:1.8rem;}



/* ステージステップ*/
div.step_area h2 + div.step{margin-top:40px;}

div.step_area div.step > div{width:calc(100% - 100px);}
div.step_area div.step > div:first-child{width:80px;}

div.step_area div.step > div span.label{
    width:80px;
    height:80px;
    font-size:1.2rem;
    padding-top:6px;
    border-radius:40px;
}
div.step_area div.step > div span.label span{
    font-size:2.4rem;
    padding-top:2px;
}

div.step_area div.step h3{
    display:flex;
    align-items:center;
    height:80px;
    padding:0;
    margin-bottom:30px;
}
div.step_area div.step div.mark{margin:0 0 0 -100px;}


}

@media screen and (max-width:480px){

div.stage div.message{background:url(../img/stage/dot_mono.png) center/17.5px repeat;}
div.message div.inner{padding:30px 0 40px;}
div.message h2{
    font-size:2.8rem;
    padding:15px 5px;
}
div.message h2 + p{margin-top:20px;}
div.message p{line-height:2;}


/* ステージステップ*/
div.step_area {
    margin-top: 40px;
    padding: 40px 20px;
}
div.step_area h2{
    font-size:min(5vw,2.4rem);
    padding:18px 4px;
}

div.step_area div.step > div{
    width:calc(100% - 85px);
    padding-bottom:30px;
}
div.step_area div.step > div:first-child{width:70px;}

div.step_area div.step > div span.label{
    width:70px;
    height:70px;
    padding-top:4px;
    border-radius:35px;
}
div.step_area div.step > div span.label span{font-size:2rem;}

div.step_area div.step h3{
    font-size:2.2rem;
    height:70px;
    line-height:1.4;
    letter-spacing:0.2pt;
    margin-bottom:20px;
}
div.step_area div.step div.mark{
    padding:15px;
    margin-left:-85px;
    border-radius:10px;
}

div.step_area div.step div.mark span{
    width:100%;
    text-align:left;
}
div.step_area div.step div.mark p{
    width:100%;
    font-size:2rem;
    padding:10px 0 0;
    margin:10px auto 0;
}
div.step_area div.step div.mark p::before{
    width:100%;
    height:1px;
}
div.step_area div.step div.mark p.icon{
    margin-top:10px;
    padding:0 0 0 20px;
}

div.step_area div.table_wrap + p{margin-top:20px;}

/* あとがき */
div.postscript{margin-top:40px;}
/* ページ送り */
div.postscript div.pagenation{margin-top:40px;}

}





/************************ 下層ページ STAGE1 ************************/

/*メインビジュアル周り*/
div.child_mv{
    position:relative;
    max-width:900px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 25px 110px;
    margin:0 auto;
    z-index:1;
}
div.child_mv::before{
    position:absolute;
    content:"";
    display:inline-block;
    left:-60px;
    bottom:0;
    width:470px;
    height:135px;
    background:url(../img/stage/01/01/stage1.svg) center / contain no-repeat;   
}
div.child_mv div.title{width:calc(100% - 450px);}
div.child_mv div.title h2{
    position:relative;
    max-width:345px;
    color:#2297b4;
    font-size:2.4rem;
    font-weight:600;
    line-height:1;
    letter-spacing:.75pt;
    padding:0 0 20px 20px;
    border-bottom:1px solid #ccc;
}
div.child_mv div.title h2 span{
    display:block;
    font-size:1.4rem;
    padding-bottom:10px;
}
div.child_mv div.title h2::before{
    position:absolute;
    content:"";
    top:-5px;
    left:0;
    display:inline-block;
    width:4px;
    height:calc(100% - 10px);
    background:#2297b4;
}
div.child_mv div.title p{
    color:#595757;
    font-size:3.6rem;
    font-weight:700;
    line-height:1.4;
    margin-top:15px;
}
div.child_mv div.img{
    position:relative;
    width:450px;
}
div.child_mv div.img::before,
div.child_mv div.img::after{
    position:absolute;
    content:"";
    display:inline-block;
}
div.child_mv div.img::before{
    width:128px;
    height:128px;
    top:0;
    left:-50px;
    background:url(../img/stage/01/01/dot_left.svg) center / contain no-repeat;
}
div.child_mv div.img::after{
    width:320px;
    height:450px;
    bottom:-85px;
    right:-240px;
    background:url(../img/stage/01/01/dot_right.svg) center / contain no-repeat;
}


/*背景色有*/
div.child div.contents.col{
    position:relative;
    margin:-20px auto 0;
    padding:0 20px 90px;
    z-index:1;
}

div.child div.contents.col::before{
    position:absolute;
    content:"";
    top:120px;
    left:0;
    width:100%;
    height:calc(100% - 120px);
    background:#c5e3ea;
    z-index:-1;
}

div.child div.col div.box{
    background:#fff;
    max-width:900px;
    padding:40px;
    border-radius:20px;
    margin:0 auto;
}
div.child div.col div.box + div.box{margin-top:40px;}
div.child div.col div.box.das{border:2px dashed #2297b4;}
div.child div.col div.box.center{text-align:center;}

div.child div.box p{
    font-size:1.6rem;
    line-height:2;
    font-weight:500;
    color:#595757;
}
div.child div.box p span{font-weight:800;}
div.child div.box span.blue{color:#2297b4;}
div.child div.box span.large{font-size:2rem;}
div.child div.box span.line{background: linear-gradient(transparent 60%, #ffef8c 0%);}


/*2カラム*/
div.col div.flex{
    display:flex;
    justify-content:space-between;
    margin:20px auto;
}
div.col div.illust{
    width:300px;
    margin-right:40px;
    margin-top:10px;
}
div.col .wide div.illust{
    width: 360px;
    max-width: 45%;
}
div.col div.txt{
    width:calc(100% - 400px);
    margin-top: 10px;
}
div.col .wide div.txt{
    min-width: 55%;
}

div.col div.flex.right{flex-direction: row-reverse;}
div.col div.flex.right div.illust{
    margin-right:0;
    margin-left:40px;
}


/*マメ知識*/
div.child div.contents.lattice{
    margin:0 auto;
    padding:90px 20px;
    background:url(../img/stage/01/01/lattice.png) center repeat;
}

div.lattice h3{
    max-width:900px;
    margin:0 auto;
    padding:0 0 15px;
    border-bottom:1px solid #111;
}
div.lattice h3 img{width:220px;}

div.lattice div.flex{
    display:flex;
    justify-content:space-between;
    max-width:900px;
    margin:40px auto 0;
}
div.lattice div.flex + div.flex{margin-top:60px;}
div.lattice div.illust{
    width:210px;
    margin-right:30px;
}
div.lattice div.txt{width:calc(100% - 240px);}

div.lattice div.txt h4{
    color:#2297b4;
    font-size:2.2rem;
    font-weight:600;
    line-height:1;
}
div.lattice div.txt h4 + p{
    margin-top:15px;
    font-size:1.6rem;
    line-height:2;
    letter-spacing:0.75pt;
    font-feature-settings:"palt";
}

/* チェックリスト */
div.reason-list {
    margin: 20px 0 0 4rem;
}
ul.flex {
    display: flex;
    flex-wrap: wrap;
}
div.reason-list ul li {
    font-size: 18px;
    font-weight: bold;
    color: #595757;
    min-width: 40%;
    position: relative;
}
div.reason-list ul li::before {
    content: '';
    display: block;
    position: absolute;
    top: 0.3em;
    left: -1.5em;
    width: 16px;
    height: 9px;
    border-left: 2px solid #2297b4;
    border-bottom: 2px solid #2297b4;
    transform: rotate(-60deg);
}
div.reason-list ul li:nth-child(2n+1) {
    margin-right: 2rem;
}
div.reason-list ul li:nth-child(n+3) {
    margin-top: 1rem;
}
.stage-01-02 {
    margin-top: 20px;
}
.stage-01-02 ul.flex {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.stage-01-02 ul li {
    min-width: 358px;
    font-size: 18px;
    font-weight: bold;
    color: #2297b4;
    border: 1px solid #2297b4;
    border-radius: 12px;
    text-align: center;
    padding: 28px 18px;
}
div.col div.flex.right div.illust.size-220 {
    width: 220px;
    margin-left: 20px;
}
div.col div.txt.size-ajust {
    width: calc(100% - 250px);
}

/* table */
.color-fff {color: #fff;}
.bg-fff {background-color: #fff;}
.bg-2e9fd8 {background-color: #2e9fd8;}
.bg-AA8047 {background-color: #AA8047;}
.bg-a6e2f4 {background-color: #a6e2f4;}
.bg-FFFDEE {background-color: #FFFDEE;}
.border-C1C2C2 {border: 1px solid #C1C2C2;}
.psychology-stage-table table {
    border-collapse: collapse;
    border: 1px solid;
    width: 100%;
}
.psychology-stage-table th, .psychology-stage-table td {
    border: 1px solid #000; 
    font-size: 16px;
    padding: 16px 10px;
} 
.psychology-stage-table th.no-date {
    background-image: linear-gradient(to right top, transparent calc(50% - 0.5px), #000 50%, #000 calc(50% + 0.5px), transparent calc(50% + 1px))
}

/* 巻物 */
.roll-book {
  margin: 40px auto 0;
  max-width: 1100px;
}


/*ページ送り*/
div.contents.pagenation{
    max-width:940px;
    padding:0 20px;
    margin:0 auto;
}

/* 解説 */
div.child_mv div.title .commentary {
    margin-top: 40px;
}
.commentary_label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 20px;
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background-color: #000;
    border-radius: 30px;
    margin-bottom: 6px;
}
.commentary_text {
    display: block;
    font-size: 1.6rem;
    color: #595757;
}
/* 作成日 */
div.date-created,
div.stage.child div.date-created {
    max-width: 900px;
    padding: 40px;
    font-size: 1.2rem;
    margin:16px auto;
    text-align: right;
}

#psychology.st01 .commentary_label {
    background-color: #2297b4;
}
#psychology.st02 .commentary_label {
    background-color: #5BC671;
}
#psychology.st03 .commentary_label {
    background-color: #B489D3;
}
#psychology.st04 .commentary_label {
    background-color: #F456A2;
}

@media screen and (max-width:991px){

    
/*メインビジュアル周り*/
div.child_mv::before{left:0;}
div.child_mv div.title{width:calc(100% - 45.4vw);}
div.child_mv div.img{width:45.4vw;}

div.child_mv div.img::before{
    width:12.9vw;
    height:12.9vw;
    left:-5vw;
}
div.child_mv div.img::after{
    width:32.2vw;
    height:45.4vw;
    bottom:-8.5vw;
    right:-22vw;
}
/* チェックリスト */
div.reason-list ul li:nth-child(2n+1) {
    margin-right: 8%;
}
/* 巻物 */
.roll-book {
  padding: 0 30px 0 20px;
}


}

@media screen and (max-width:767px){
/* 汎用 */
.sp_size-70 {width: 70%;}
.sp_margin-auto {margin: 0 auto;}
.sp_block {display: block;}

/*メインビジュアル周り*/
div.child_mv::before{
    left:20px;
    width:50vw;
    height:14.8vw;
}

/*背景色有*/
div.child div.contents.col{
    margin-top:-10px;
    padding-bottom:60px;
}

div.child div.contents.col::before{
    top:5.5%;
    height:calc(100% - 5.5%);
}
 
/* table */
.psychology-stage-table table {
    width: 599px;
}

/* チェックリスト */
div.reason-list {
    margin: 20px 0 0 3rem;
}
ul.flex {
    flex-direction: column;  
}
div.reason-list ul li:nth-child(2n+1) {
    margin-right: 0;
}
div.reason-list ul li:nth-child(n+1) {
    margin-top: 1rem;
}
.stage-01-02 ul li  {
    min-width: 100%;  
}
  
div.col div.txt.size-ajust {
    width: 100%;
}
/* 解説 */
div.child_mv div.title .commentary {
    margin-top: 20px;
}
.commentary_label {
    width: 70px;
    height: 16px;
    font-size: 1.1rem;
}
.commentary_text {
    font-size: 1.3rem;
}
/* 作成日 */
div.date-created,
div.stage.child div.date-created {
    padding: 20px;
}
}

@media screen and (max-width:599px){


/*メインビジュアル周り*/
div.child_mv{
    flex-wrap:wrap;
    padding:0 25px 120px;
}
div.child_mv::before{
    left:20px;
    width:60vw;
    height:17vw;
}

div.child_mv div.title{width:100%;}

div.child_mv div.img{
    width:80vw;
    margin:40px auto 0;
}

div.child_mv div.img::before{
    width:128px;
    height:128px;
    top:0;
    left:-50px;
    background:url(../img/stage/01/01/dot_left.svg) center / contain no-repeat;
}
div.child_mv div.img::after{
    width:320px;
    height:450px;
    bottom:-85px;
    right:-240px;
    background:url(../img/stage/01/01/dot_right.svg) center / contain no-repeat;
}


/*背景色有*/
div.child div.contents.col{
    margin-top:-10px;
    padding-bottom:60px;
}

div.child div.contents.col::before{
    top:160px;
    height:calc(100% - 160px);
}

div.child div.col div.box{padding:20px;}


/*2カラム*/
div.col div.flex{
    flex-wrap:wrap;
    flex-direction:column-reverse;
    margin:0 auto;
}
div.col div.illust,
div.col .wide div.illust{
    max-width:100%;
    margin:15px auto;
}
div.col div.txt{width:100%;}

div.col div.flex.right{flex-direction: column-reverse;}
div.col div.flex.right div.illust{
    margin-right:auto;
    margin-left:auto;
}

div.child div.col div.box.center{text-align:left;}



/*マメ知識*/
div.child div.contents.lattice{
    padding:60px 20px;
    background:url(../img/stage/01/01/lattice.png) center/22.5px repeat;
}

div.lattice h3 img{width:165px;}

div.lattice div.flex{flex-direction:column;}
div.lattice div.illust{margin:0 auto;}
div.lattice div.txt{
    width:100%;
    margin-top:20px;
}

div.lattice div.txt h4 + p{margin-top:15px;}



}


@media screen and (max-width:480px){

/*メインビジュアル周り*/
div.child_mv div.title h2{max-width:100%;}
div.child_mv div.title h2::before{
    top:0;
    width:3px;
    height:calc(100% - 20px);
}
div.child_mv div.title h2 span{font-size:1.8rem;}
div.child_mv div.title p{font-size:3.2rem;}

div.child_mv div.img{width:76vw;}
div.child_mv div.img::before{
    width:96px;
    height:96px;
    left:-30px;
}
div.child_mv div.img::after{
    width:205px;
    height:290px;
    bottom:-50px;
    right:-140px;
}

/*背景色有*/
div.child div.col div.box{border-radius:10px;}
div.child div.contents.col::before{
    top:195px;
    height:calc(100% - 195px);
}

    
}


@media screen and (max-width:420px){

    
/*背景色有*/
div.child div.contents.col::before{
    top:225px;
    height:calc(100% - 225px);
}


}

@media screen and (max-width:399px){

/*メインビジュアル周り*/
div.child_mv div.title p{font-size:2.8rem;}


}

/************************ 下層ページ STAGE2 ************************/

div.stage.child.st02 div.box span.green {
    color: #5BC671;
}
div.stage.child.st02 span.orange,
div.stage.child.st05 span.orange {
    color: #F3901D;
}

/* MV周り */
div.stage.child.st02 div.child_mv div.title h2 {
    color: #5BC671;
}
div.stage.child.st02 div.child_mv div.title h2::before {
    background: #5BC671;
}
div.stage.child.st02 div.child_mv div.img::before {
    background: url(../img/stage/02/01/dot_left.svg) center / contain no-repeat;
}
div.stage.child.st02 div.child_mv div.img::after {
    background: url(../img/stage/02/01/dot_right.svg) center / contain no-repeat;
}
div.stage.child.st02 div.child_mv::before {
    background: url(../img/stage/02/01/stage2.svg) center / contain no-repeat;
}
div.stage.child.st02 div.col div.box.das {
    border: 2px dashed #5BC671;
}
div.stage.child.st02 div.contents.col::before {
    background: #DFF7E3;
}

/* 子どもA・B・C　会話の例 */
div.stage.child.st02 div.contents div.example {
    margin: 32px 0;
}
div.stage.child.st02 div.contents div.example div.flex {
    align-items: center;
    gap: 24px;
}
div.stage.child.st02 div.contents div.example div.flex:first-child,
div.stage.child.st02 div.contents div.example div.flex:nth-child(2) {
    padding-bottom: 20px;
    border-bottom: 1px solid #E7E7E7;
}
div.stage.child.st02 div.contents div.example div.ilust {
    width: 100px;
}
div.stage.child.st02 div.contents div.example div.ilust img {
    width: 100%;
}
div.stage.child.st02 div.contents div.example div.txt {
    width: calc(100% - 100px);
    margin-top: 0;
}

/* アサーションな会話を行うためのスキル */
div.stage.child.st02 div.contents div.skill h3 {
    margin-top: 40px;
    padding: 4px 16px;
    background: #5BC671;
    font-size: 20px;
    color: #fff;
    border-radius: 20px;
}
div.stage.child.st02 div.contents div.skill h3 + div {
    margin-top: 16px;
    padding: 0 20px;
}
div.stage.child.st02 div.contents div.skill div.case {
    margin: 16px 0;
    padding: 20px;
    border-radius: 20px;
    border: 1px solid #E7E7E7;
}
div.stage.child.st02 div.contents div.skill div.case p {
    display: flex;
    align-items: center;
    line-height: 1.4;
    font-size: 20px;
    font-weight: 800;
}
div.stage.child.st02 div.contents div.skill div.case p span {
    display: inline-block;
    min-width: 50px;
    height: 50px;
    margin-right: 16px;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    color: #fff;
    background: #5BC671;
}
div.stage.child.st02 div.contents div.skill div.case p:first-child {
    padding-bottom: 20px;
    border-bottom: 1px solid #E7E7E7;
}

/* コラム */
div.stage.child.st02 div.contents.dot {
    margin: 0 auto;
    padding: 90px 20px 30px;
    background: url(../img/stage/02/01/dot.png) center repeat;
}
div.stage.child.st02 div.dot h3 > img {
    display: none;
}
div.stage.child.st02 div.dot h3 > div {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    border: none;
}
div.stage.child.st02 div.dot h3 > div img:first-child {
    width: 170px;
    margin-right: 24px;
}
div.stage.child.st02 div.dot h3 > div img:nth-child(2) {
    width: 270px;
}
div.stage.child.st02 div.dot div.box {
    max-width: 900px;
    padding: 24px 40px;
    margin: 0 auto;
}
div.stage.child.st02 div.dot div.flex {
    display: flex;
    align-items: center;
    gap: 16px;
}
div.stage.child.st02 div.dot div.flex div.illust img {
    max-width: 230px;
}

@media screen and (max-width:599px){
    .sp_mt_32 {
        margin-top: 32px;
    }
    div.col div.flex.right.sp-img-top {
        flex-direction: row-reverse;   
    }
    div.stage.child.st02 div.contents div.example div.flex {
        flex-direction: column;
    }
    div.stage.child.st02 div.contents div.example div.flex:first-child,
    div.stage.child.st02 div.contents div.example div.flex:nth-child(2) {
        margin-bottom: 30px;
    }
    div.stage.child.st02 div.contents div.example div.txt {
        width: 100%;
    }
    div.stage.child.st02 div.contents div.example div.ilust {
        width: 35vw;
    }
    div.stage.child.st02 div.contents div.skill h3 + div {
        padding: 0 8px;
    }
    div.stage.child.st02 div.contents div.skill div.case {
        padding: 0;
        border: none;
    }
    div.stage.child.st02 div.contents div.skill div.case p span {
        min-width: 45px;
        height: 45px;
        line-height: 45px;
    }
    div.stage.child.st02 div.contents div.skill div.case p {
        font-size: 18px;
    }
    div.stage.child.st02 div.contents.dot {
        padding: 90px 40px 30px;
    }
    div.stage.child.st02 div.dot div.box {
        padding: 24px 0;
    }
    div.stage.child.st02 div.dot h3 > div {
        display: none;
    }
    div.stage.child.st02 div.dot h3 > img {
        display: block;
    }
    div.stage.child.st02 div.dot div.flex {
        flex-direction: column;
        gap: 24px;
    }
}

/************************ 下層ページ STAGE2_02 ************************/

.st02_02 figcaption{
    font-size: 1.2rem;
    margin-top: 16px;
    text-align: right;
}
.st02_02 div.col div.illust{
    width: 390px;
}
div.stage.child.st02.st02_02 div.dot h3 > div img:first-child{
    width: 580px;
}
@media screen and (min-width:600px) {
    .st02_02 div.col div.flex.float-right{
        display: inherit;
    }
    .st02_02 div.col div.flex.right div.illust{
        margin-left: 0;
        padding-left: 40px;
    }
    .st02_02 div.col div.flex.right.float-right div.illust{
        float: right;
    }
    .st02_02 div.col .float-right div.txt{
        width: auto;
    }
    .pc-mt-70{
        margin-top: 70px;
    }   
}
@media screen and (max-width:599px){
    .sp-mt-20{
        margin-top: 20px;
    }
    div.stage.child.st02.st02_02 div.dot div.flex div.illust img{
        max-width: 300px;
    }
    .st02_02 .page-link-prev-next{
        margin-top: 0;
    }
}

/************************ 下層ページ STAGE3 ************************/

div.stage.child.st03 div.box span.purple {
    color: #B489D3;
}
div.stage.child.st03 span.orange {
    color: #F3901D;
}

/* MV周り */
div.stage.child.st03 div.child_mv div.title h2 {
    color: #B489D3;
}
div.stage.child.st03 div.child_mv div.title h2::before {
    background: #B489D3;
}
div.stage.child.st03 div.child_mv div.img::before {
    background: url(../img/stage/03/01/dot_left.svg) center / contain no-repeat;
}
div.stage.child.st03 div.child_mv div.img::after {
    background: url(../img/stage/03/01/dot_right.svg) center / contain no-repeat;
}
div.stage.child.st03 div.child_mv::before {
    background: url(../img/stage/03/01/stage3.svg) center / contain no-repeat;
}
div.stage.child.st03 div.col div.box.das {
    border: 2px dashed #B489D3;
}
div.stage.child.st03 div.contents.col::before {
    background: #EFE7F7;
}

/* コラム */
div.stage.child.st03 div.contents.dot {
    margin: 0 auto;
    padding: 90px 20px 30px;
    background: url(../img/stage/03/01/dot.png) center repeat;
}
div.stage.child.st03 div.dot h3 > img {
    display: none;
}
div.stage.child.st03 div.dot h3 > div {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    border: none;
}
div.stage.child.st03 div.dot h3 > div img:first-child {
    width: 600px;
    margin-right: 24px;
}
div.stage.child.st03 div.dot h3 > div img:nth-child(2) {
    width: 270px;
}
div.stage.child.st03 div.dot div.box {
    max-width: 900px;
    padding: 24px 40px;
    margin: 0 auto;
}
div.stage.child.st03 div.dot div.flex {
    display: flex;
    align-items: center;
    gap: 16px;
}
div.stage.child.st03 div.dot div.flex div.illust img {
    max-width: 250px;
    margin-bottom: 30px;
}


@media screen and (max-width:599px){
    .sp_mt_32 {
        margin-top: 32px;
    }
    div.col div.flex.right.sp-img-top {
        flex-direction: row-reverse;   
    }
    div.col div.flex.right.sp-img-top.sp-column-reverse{
        flex-direction: column-reverse;
    }
    div.stage.child.st03 div.contents div.example div.flex {
        flex-direction: column;
    }
    div.stage.child.st03 div.contents div.example div.flex:first-child,
    div.stage.child.st03 div.contents div.example div.flex:nth-child(2) {
        margin-bottom: 30px;
    }
    div.stage.child.st03 div.contents div.example div.txt {
        width: 100%;
    }
    div.stage.child.st03 div.contents div.example div.ilust {
        width: 35vw;
    }
    div.stage.child.st03 div.contents div.skill h3 + div {
        padding: 0 8px;
    }
    div.stage.child.st03 div.contents div.skill div.case {
        padding: 0;
        border: none;
    }
    div.stage.child.st03 div.contents div.skill div.case p span {
        min-width: 45px;
        height: 45px;
        line-height: 45px;
    }
    div.stage.child.st03 div.contents div.skill div.case p {
        font-size: 18px;
    }
    div.stage.child.st03 div.contents.dot {
        padding: 90px 40px 30px;
    }
    div.stage.child.st03 div.dot div.box {
        padding: 24px 0;
    }
    div.stage.child.st03 div.dot h3 > div {
        display: none;
    }
    div.stage.child.st03 div.dot h3 > img {
        display: block;
    }
    div.stage.child.st03 div.dot div.flex {
        flex-direction: column;
        gap: 24px;
    }
}
/* STAGE 3-2 */
.pc-nowrap{
    white-space: nowrap;
}
@media screen and (min-width: 981px) {
    .pc-mt-minus-50{
        margin-top: -50px;
    }
}
@media screen and (max-width:980px){
    .pc-nowrap{
        white-space: normal;
    }
}

/************************ 下層ページ STAGE4 ************************/

div.stage.child.st04 div.box span.pink {
    color: #F456A2;
}
div.stage.child.st04 span.orange {
    color: #F3901D;
}

.pc-tb-illust {display: block;}
.sp-only-illust {display: none;}
div.col div.flex.mt-0,
div.col div.flex.mt-0 div.illust,
div.col div.flex.mt-0 div.txt {margin-top: 0;}

/* MV周り */
div.stage.child.st04 div.child_mv div.title h2 {
    color: #F456A2;
}
div.stage.child.st04 div.child_mv div.title h2::before {
    background: #F456A2;
}
div.stage.child.st04 div.child_mv div.img::before {
    background: url(../img/stage/04/01/dot_left.svg) center / contain no-repeat;
}
div.stage.child.st04 div.child_mv div.img::after {
    background: url(../img/stage/04/01/dot_right.svg) center / contain no-repeat;
}
div.stage.child.st04 div.child_mv::before {
    background: url(../img/stage/04/01/stage4.svg) center / contain no-repeat;
}
div.stage.child.st04 div.col div.box.das {
    border: 2px dashed #F456A2;
}
div.stage.child.st04 div.contents.col::before {
    background: #FCE6F2;
}

/* コラム */
div.stage.child.st04 div.contents.dot {
    margin: 0 auto;
    padding: 90px 20px 30px;
    background: url(../img/stage/04/01/dot.png) center repeat;
}
div.stage.child.st04 div.dot h3 {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    border: none;
}
div.stage.child.st04 div.dot h3 > img:first-child {
    width: 715px;
}
div.stage.child.st04 div.dot h3 > img:nth-child(2) {
    width: 100%;
    max-width: 370px;
}
div.stage.child.st04 div.dot div.box {
    max-width: 900px;
    padding: 24px 40px;
    margin: 0 auto;
}
div.stage.child.st04 div.dot div.flex {
    display: flex;
    align-items: center;
    gap: 16px;
}
div.stage.child.st04 div.dot div.flex div.illust img {
    max-width: 255px;
}

@media screen and (max-width:599px){
    div.stage.child.st04 div.contents.dot {
        padding: 90px 40px 30px;
    }
    div.stage.child.st04 div.dot div.box {
        padding: 24px 0;
    }
    div.stage.child.st04 div.dot h3 {
        padding: 0;
    }
}

/* STAGE 4-1 */
.st04-1 .st04-list.type-1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 24px 0;
}
.st04-1 .st04-list.type-1 li {
    width: 100%;
    max-width: 360px;
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    background: #F456A2;
}
.st04-1 .st04-list.type-1 li span {
    font-size: 1.6rem;
}
.st04-1 .st04-list.type-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 24px 0 0;
}
.st04-1 .st04-list.type-2 li {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid #F456A2;
}
.st04-1 .st04-list.type-2 li span {
    display: block;
    width: 100%;
    padding: 10px 8px;
    text-align: center;
    font-weight: 800;
    font-size: 1.8rem;
    color: #fff;
    background: #F456A2;
}
.st04-1 .st04-list.type-2 li p {
    padding: 8px 10px;
    line-height: 1.5;
    font-size: 1.4rem;
}
.st04-1 .st04-illust-flex {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 14%;
    margin: 24px 0;
}
.st04-1 .st04-illust-flex img {height: 100%;}
.st04-1 .st04-illust-flex img:first-child {
    width: calc(45% - 8%);
    max-width: 255px;
}
.st04-1 .st04-illust-flex img:last-child {
    width: calc(55% - 8%);
    max-width: 343px;
}

.st04-1 .unique-flex .illust {
    margin-left: 20px;
    max-width: 41%;
}
.st04-1 .unique-flex.wide .txt {
    min-width: 59%;
}

@media screen and (max-width:800px){
    .st04-1 .st04-list.type-2 {grid-template-columns: 1fr;}
    .st04-1 .st04-list.type-2 li p br {display: none;}
}
@media screen and (max-width:599px){
    .pc-tb-illust {display: none;}
    .sp-only-illust {display: block;}
    .st04-1 .st04-list.type-1 li {font-size: 1.9rem;}
    .st04-1 .st04-list.type-1 li span {font-size: 1.4rem;}
    .st04-1 .st04-list.type-2 li p {
        font-size: 1.5rem;
        letter-spacing: 0;
    }
    .st04-1 .st04-list.type-2 li p br {display: block;}
    .st04-1 .st04-illust-flex {display: none;}
    div.flex.sp-column-reverse{
        flex-direction: column-reverse;
        gap: 0!important;
        margin: 24px 0;
    }
}

/* STAGE 4-2 */
div.col .flex-0402-01 div.illust {
    max-width: 25%;
    margin-left: 0 !important;
}
div.col .flex-0402-01 div.txt {
    width: calc(75% - 20px);
}
div.col .flex-0402-02 div.illust,
.flex-0402-02 div.illust {
    max-width: 50%;
    width: auto;
}
div.col .flex-0402-02 div.illust {
    margin-left: 0 !important;
}
div.col .flex-0402-02 div.txt,
.flex-0402-02 div.txt,
.mw-50_sp-mw-100 {
    max-width: 50% !important;
    min-width: auto;
    width: auto;
}
.mw-50_sp-mw-100 img {
    max-width: 100% !important;
}
div.stage.child.st04 div.dot div.flex.flex-0402-02 div.illust img {
    max-width: 230px;
}

.wb-ap {
    word-break: auto-phrase !important;
}
.align-start {
    align-items: flex-start !important;
}
.br-pc {
    display: block;
}
.pl-20 {
    padding-left: 20px !important;
}
.pr-20 {
    padding-right: 20px !important;
}
.pc-mt-minus-30{
    margin-top: -30px !important;
}

@media screen and (max-width:991px) {
    .tb-mt-0 {
        margin-top: 0 !important;
    }
}


@media screen and (max-width:599px){
    div.col .flex-0402-01 div.illust,
    div.col .flex-0402-02 div.illust,
    .flex-0402-02 div.illust  {
        max-width: 100%;
        margin: 15px auto !important;
    }
    div.col .flex-0402-01 div.txt{
        width: 100%;
    }
    div.col .flex-0402-02 div.txt,
    .flex-0402-02 div.txt,
    .mw-50_sp-mw-100 {
        max-width: 100% !important;
    }
    .br-pc {
        display: none;
    }
    .sp-column {
        flex-direction: column !important;
    }
}

/************************ 下層ページ STAGE5 ************************/
div.col div.flex.mb-0 {
    margin-bottom: 0;
}
div.stage.child.st05 div.box span.brown {
    color: #AA8047;
    font-weight: bold;
}
/* MV周り */
#psychology.st05 .commentary_label {
    background-color: #AA8047;
}
div.stage.child.st05 div.child_mv div.title h2 {
    color: #AA8047;
}
div.stage.child.st05 div.child_mv div.title h2::before {
    background: #AA8047;
}
div.stage.child.st05 div.child_mv div.img::before {
    background: url(../img/stage/05/01/dot_left.svg) center / contain no-repeat;
}
div.stage.child.st05 div.child_mv div.img::after {
    background: url(../img/stage/05/01/dot_right.svg) center / contain no-repeat;
}
div.stage.child.st05 div.child_mv::before {
    background: url(../img/stage/05/01/stage5.svg) center / contain no-repeat;
    z-index: -1;
}
div.stage.child.st05 div.col div.box.das {
    border: 2px dashed #AA8047;
}
div.stage.child.st05 div.contents.col::before {
    background: #E8D8C8;
}

/* テーブル */
.st05-1 .psychology-stage-table .flex {
    margin: 0 auto;
    padding: 0px 10px;
}
.st05-1 .psychology-stage-table .flex > span {
    white-space: nowrap;
}
.st05 .psychology-stage-table th,
.st05 .psychology-stage-table td {
    border: 1px solid #C1C2C2;
}

/* リスト */
.st05-2 .psychology-stage-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 10px 0;
}
.st05-2 .psychology-stage-list li {
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
}
.st05-2 .psychology-stage-list li:first-child {background: #b489d3;}
.st05-2 .psychology-stage-list li:nth-child(2) {background: #55bdd0;}
.st05-2 .psychology-stage-list li:nth-child(3) {background: #5bc671;}

/* h3 */
div.stage.child.st05-2 div.box h3 {
    margin: 50px 0 20px;
    padding-bottom: 8px;
    font-size: 2rem;
    font-weight: bold;
    border-bottom: 1px solid;
}
div.stage.child.st05-2 div.box h3.type-1 {
    color: #b489d3;
    border-color: #b489d3;
}
div.stage.child.st05-2 div.box h3.type-2 {
    color: #55bdd0;
    border-color: #55bdd0;
}
div.stage.child.st05-2 div.box h3.type-3 {
    color: #5bc671;
    border-color: #5bc671;
}

/* コラム */
div.stage.child.st05-1 div.contents.dot,
div.stage.child.st05-2 div.contents.dot {
    margin: 0 auto;
    padding: 90px 20px 30px;
    background: url(../img/stage/05/01/dot.png) center repeat;
}
div.stage.child.st05-1 div.dot h3,
div.stage.child.st05-2 div.dot h3 {
    display: flex;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    border: none;
}
div.stage.child.st05-1 div.dot h3 > img:first-child {
    width: 715px;
}
div.stage.child.st05-2 div.dot h3 > img:first-child {
    max-width: 610px;
}
div.stage.child.st05-1 div.dot h3 > img:nth-child(2),
div.stage.child.st05-2 div.dot h3 > img:nth-child(2) {
    width: 100%;
    max-width: 370px;
}
div.stage.child.st05-1 div.dot div.box,
div.stage.child.st05-2 div.dot div.box {
    max-width: 900px;
    padding: 24px 40px;
    margin: 0 auto;
}
div.stage.child.st05-1 div.dot div.flex,
div.stage.child.st05-2 div.dot div.flex {
    display: flex;
    align-items: center;
    gap: 16px;
}
div.stage.child.st05-1 div.dot div.flex div.illust img {
    max-width: 390px;
}


@media screen and (max-width:991px){
    div.stage.child.st05-1 div.dot div.flex div.illust img {
        max-width: 290px;
    }
}
@media screen and (max-width: 599px) {
    .st05-1 .psychology-stage-table .flex {
        flex-wrap: nowrap;
        flex-direction: unset;
    }
    div.stage.child.st05 div.contents.dot {
        padding: 60px 40px 30px;
    }
    div.stage.child.st05 div.dot div.box {
        padding: 24px 0;
    }
    div.stage.child.st05 div.dot h3 {
        padding: 0;
    }
    div.stage.child.st05-2 div.box h3 {
        margin: 50px 0 10px;
        padding-bottom: 2px;
    }
    .st05-2 .psychology-stage-list {
        grid-template-columns: 1fr;
        gap: 8px;
        width: 90%;
        margin: 20px auto;
    }
}