@charset "UTF-8";

/* YUI reset */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    padding: 0;
    margin: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-weight: normal;
    font-style: normal;
}

ol,
ul li {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    font-size: 100%;
}

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}


html {
    height: 100%;
}



@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 100;
    src: url('../font/NotoSansCJKjp-Thin.woff') format('woff'),
        /* Modern Browsers */
        url('../font/NotoSansCJKjp-Thin.ttf') format('truetype');
    /* Safari, Android, iOS */
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 200;
    src: url('../font/NotoSansCJKjp-Light.woff') format('woff'),
        url('../font/NotoSansCJKjp-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 300;
    src: url('../font/NotoSansCJKjp-DemiLight.woff') format('woff'),
        url('../font/NotoSansCJKjp-DemiLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 400;
    src: url('../font/NotoSansCJKjp-Regular.woff') format('woff'),
        url('../font/NotoSansCJKjp-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 500;
    src: url('../font/NotoSansCJKjp-Medium.woff') format('woff'),
        url('../font/NotoSansCJKjp-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 700;
    src: url('../font/NotoSansCJKjp-Bold.woff') format('woff'),
        url('../font/NotoSansCJKjp-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Noto Sans CJKjp';
    font-style: normal;
    font-weight: 900;
    src: url('../font/NotoSansCJKjp-Black.woff') format('woff'),
        url('../font/NotoSansCJKjp-Black.ttf') format('truetype');
}

body {

    font-family:
        "Noto Sans CJKjp", "Noto Sans", sans-serif;
    -webkit-text-size-adjust: none;

    /*overflow-x: hidden;*/

    /*font-family:
	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/

    /*font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN",メイリオ,Meiryo,sans-serif;*/

    background-color: #fff;

}



a {
    color: #193185;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a.handing {
    color: #00a2f9;
}

a.handing:hover {
    text-decoration: underline;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.mt30 {
    margin-top: 30px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb30 {
    margin-bottom: 30px;
}

.nb {
    display: inline-block;
}




#wrapper {
    /*はみ出す要素がある場合、bodyにoverflow: hiddenしても、スマホサイズで適用されない場合あり。全ての要素を囲むdivを置いてそれにoverflow: hiddenするのが吉。*/
    position: relative;
    overflow: hidden;
}

#wrapper_ot {
    /*はみ出す要素がある場合、bodyにoverflow: hiddenしても、スマホサイズで適用されない場合あり。全ての要素を囲むdivを置いてそれにoverflow: hiddenするのが吉。*/
    position: relative;
    overflow: hidden;
    display: flex;
    /*display: flex flex-flow: column; min-height: 100vh;そしてmainにflex: 1;を記述。コンテンツ量が少ない時にフッターの下に余白ができてしまうのを防ぐのに良い。*/
    flex-flow: column;
    min-height: 100vh;
}

#wrapper_ot main {
    flex: 1;
    margin: 0 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}




/* ヘッダー帯部分
----------------------------*/


#container_h {
    position: relative;
    width: 100%;
    /*max-width: 1600px;*/
    margin: 0 auto;
    padding: 0;
    line-height: 0;
    background: rgba(255, 206, 183, 1);
    display: flex;
    justify-content: space-between;
}

.p_logo {
    width: 500px;
    background-image: url("../img/p_logo_bg.svg");
    background-repeat: no-repeat;
    background-position: top right;
    -webkit-background-size: cover;
    /*cover か contain*/
    background-size: cover;
    display: flex;
    align-items: center;
    /*background-color: rgba(231,156,157,0.5);*/
}

.p_logo img {
    /*width: 60%;*/
    margin: 12px 120px;
}

.tit_img {
    margin: 0 50px 0 20px;
    width: 440px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.tit_img img {
    width: 100%;
}

/* ########### 1020px以下 ########### */
@media (max-width: 1020px) {
    .tit_img {
        margin: 0 20px;
    }
}

/* ########### 900px以下 ########### */
@media (max-width: 900px) {
    .p_logo img {
        width: 210px;
        margin: 12px 6vw;
    }

    .c_logo {
        width: 80%;
    }

}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    .tit_img {
        margin: 0 2vw;
    }
}

/* ########### 500px以下 ########### */
@media (max-width: 500px) {

    .tit_img img {
        display: none;
    }
}



/* ボトム固定のナビゲーション
----------------------------*/

#n_bar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    /*background: rgba(0, 3, 51, 0.1);*/
    /*background: rgba(229, 214, 208, 0.5);*/
    z-index: 10;
}

#n_bar .bt_box {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
}

#n_bar ul {
    position: relative;
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    /*background: rgba(51,51,51,0.5);*/
    list-style: none;
}

#n_bar li {
    flex-grow: 1;
    text-align: center;
    line-height: 0;
}

#n_bar li img {
    /*max-width: 210px;*/
    max-width: 20vw;
}

#n_bar li:nth-child(n+2) {
    margin-left: 10px;
}

#n_bar li a {
    display: block;
    padding: 7px 30px;
    background: #8ab6e6;
    border-radius: 10px 10px 0 0;
}

#n_bar li a.c2 {
    /*background: #FBED21;*/
    /*background-color: #29abe2;
    background-image: linear-gradient(134deg, #29abe2 0%, #fc48ba 100%);*/
    background: #EC8C76;
}

#n_bar li a.c3 {
    /*background: #259ED1;*/
    /*background-color: #29abe2;
    background-image: linear-gradient(134deg, #29abe2 0%, #fc48ba 100%);*/
    background: #ECAA76;
}

/*
#n_bar li a:hover {
	background: #5399e6;
}
#n_bar li a.c2:hover {
	background: #ff9e0a;
}
#n_bar li a.c3:hover {
	background: #e36b6b;
}
*/


#page_top {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    top: -70px;
    background: rgb(188, 115, 43);
    opacity: 0.6;
    border-radius: 50%;
    z-index: 10;
}

#page_top a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    text-decoration: none;
}

#page_top a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f102';
    font-size: 25px;
    color: #fff;
    position: absolute;
    width: 25px;
    height: 25px;
    top: -15px;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
}
/*
.show_hide {
    display: none;
}*/

/* ########### 2300px以上 ########### */
@media (min-width: 2300px) {
    #n_bar li img {
        max-width: 450px;
    }
}

/* ########### 1020px以下 ########### */
@media (max-width: 1020px) {
    #n_bar li img {
        max-width: 210px;
    }
}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    #n_bar li a {
        padding: 10px 20px;
    }
}



/* ヒーローイメージ・タイトル
----------------------------*/

div.bg_hero_wrap {
    background: #fff;
}

div.top_hero_wrap {
    /*max-width: 1920px;*/
    width: 100%;
    /*height: 1206px;*/
    margin: 0 auto;
    /*padding: 0 0 20px;*/
    /*height: 100vh;*/
    /*overflow: hidden;*/
    background-image: url("../img/bg_main_a.webp");
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: cover;
    /*cover か contain*/
    background-size: cover;
    position: relative;
    /*background-color: rgba(240,202,21,0.3);*/
}

div.top_hero_wrap:before {
    content: "";
    display: block;
    padding-top: 41%;
    /* 幅1920、高さ794pxの比率に固定。794/1920*100=41.3541% */
}

/*div.hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}*/
div.hero img {
    width: 100%;
}

div.hero h1 {
    /*text-indent:100%;
    white-space:nowrap;
    overflow:hidden;*/
    position: absolute;
    top: 15%;
    left: 12%;
    width: 45%;
}

div.sub_t {
    position: absolute;
    top: 48%;
    left: 22%;
    width: 35%;
}

div.prblm {
    position: absolute;
    bottom: -5%;
    left: 0;
    right: 0;
    margin: auto;
    width: 64%;
}


/* ########### 1020px以下 ########### */
@media (max-width: 1020px) {}

/* ########### 768px以下 ########### */
@media (max-width: 768px) {
    div.top_hero_wrap {
        background-image: url("../img/bg_main_b.webp");
        height: 108vw;
        /*734px*/
        background-position: top center;
    }

    div.hero h1 {
        top: 5%;
        left: 0;
        right: 0;
        margin: auto;
        width: 80%;
    }

    div.sub_t {
        top: 29%;
        left: 8%;
        width: 38%;
    }

    div.prblm {
        bottom: -7%;
        width: 80%;
    }
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    div.top_hero_wrap {
        background-image: url("../img/bg_main_c.webp");
        height: 170vw;
        background-position: 2% center;
    }

    div.hero h1 {
        top: 2%;
        left: 3%;
        width: 86%;
    }

    div.sub_t {
        top: 18%;
        left: 8%;
        width: 48%;
    }

    div.prblm {
        bottom: -2%;
        width: 100%;
    }
}



/* ask　その悩み、日研メディカルケアなら解決できます！
----------------------------------------------- */
#ask {
    padding: 4% 0 2%;
    background-image: url("../img/bg_ask.webp");
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: contain;
    /*cover か contain*/
    background-size: contain;
}

#ask .con_wrap {
    /*max-width: 1020px;*/
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#ask img {
    width: 100%;
}

#ask .ask_tit {
    width: 90%;
}

#ask p {
    /*font-size: 28px;*/
    padding: 2% 0 0;
    font-size: clamp(19px, 2.2vw, 40px);
    line-height: 1.5;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #8E4248;
}

/* ########### 768px以下 ########### */
@media (max-width: 768px) {
    #ask {
        padding: 10% 0 4%;
    }

    #ask .con_wrap {
        width: 96%;
    }
}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    #ask p {
        padding: 3% 30px 0;
    }
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    #ask {
        padding: 12% 0 5%;
    }
}


/* reason　私たちが選ばれる理由 3つのポイント
----------------------------------------------- */
#reason {
    position: relative;
    padding: 70px 0;
    background: #FFE7C1;
    background: linear-gradient(90deg, rgba(255, 231, 193, 1) 0%, rgba(255, 244, 229, 1) 100%);
    z-index: -2;
}

#reason img {
    width: 100%;
}

#reason img.point {
    filter: drop-shadow(-5px 5px 4px #fff);
}

#reason::before {
    content: "";
    background: url(../img/side_left.svg) 100% 100% / cover;
    position: absolute;
    height: 100px;
    width: 707px;
    top: 0;
    right: 80%;
    z-index: -1;
}

#reason::after {
    content: "";
    background: url(../img/side_right.svg) 100% 100% / cover;
    position: absolute;
    height: 100px;
    width: 707px;
    bottom: 0;
    left: 80%;
    z-index: -1;
}

#reason h2.three_point_tit {
    width: 30%;
    margin: 0 auto;
    padding: 0 0 3%;
}

#reason .con_wrap {
    width: 76%;
    margin: 0 auto;
    padding: 0 3%;
}

#reason ul {
    display: flex;
    justify-content: space-around;
}

#reason li {
    flex-basis: 28%;
}

#reason h3 {
    text-align: center;
    font-size: 32px;
    line-height: 1.25;
    color: #930031;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    padding: 6% 0;
}

#reason p {
    font-size: 21px;
    line-height: 1.5;
    color: #4D2834;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    text-align: justify;
}

/* ########### 1800px以上 ########### */
@media (min-width: 1800px) {
    #reason h3 {
        font-size: calc(32px + 6 * (100vw - 1800px)/760);
        /*1800px〜2560px間・32px〜38pxまで可変*/
    }

    #reason p {
        font-size: calc(21px + 5 * (100vw - 1800px)/760);
        /*1800px〜2560px間・21px〜26pxまで可変*/
    }
}

/* ########### 1201px以上 ########### */
@media (min-width: 1201px) {}

/* ########### 1800px以下 ########### */
@media (max-width: 1800px) {
    #reason .con_wrap {
        width: initial;
        max-width: 1080px;
    }
}

/* ########### 1200px以下 ########### */
@media (max-width: 1200px) {
    #reason h2.three_point_tit {
        width: initial;
        max-width: 500px;
        padding: 0 50px 3%;
    }

    #reason h3 {
        font-size: calc(22px + 10 * (100vw - 710px)/490);
        /*1200px〜710px間・32px〜22pxまで可変*/
    }

    #reason p {
        font-size: calc(16px + 5 * (100vw - 320px)/880);
        /*1200px〜320px間・21px〜14pxまで可変*/
    }
}

/* ########### 710px以下 ########### */
@media (max-width: 710px) {
    #reason {
    padding: 5vw 0;
}
    #reason ul {
        flex-wrap: wrap;
    }

    #reason li {
        flex-basis: 46%;
    }

    #reason li.adj {
        margin: 30% 0 0;
    }
    #reason li.adj-2 {
        margin: -10% 0 0 -20%;
    }

    #reason h3 {
        font-size: calc(20px + 12 * (100vw - 431px)/279);
        /*710px〜431px間・32px〜22pxまで可変*/
    }
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    #reason .con_wrap {
        padding: 0 8%;
    }

    #reason ul {
        flex-direction: column;
    }

    #reason li {
        padding: 10px 0 0;
    }

    #reason li.adj {
        margin: 0;
    }
    #reason li.adj-2 {
        margin: 0;
    }

    #reason h3 {
        font-size: calc(30px + 8 * (100vw - 320px)/110);
        /*430px〜320px間・38px〜30pxまで可変*/
    }

    #reason img.point {
        padding: 0 30px;
    }
}


/* c_advisor　私たちが担当します
----------------------------------------------- */
#c_advisor {
    background: #FFEED5;
    background: linear-gradient(0deg, rgba(255, 238, 213, 1) 0%, rgba(255, 244, 229, 1) 42%, rgba(255, 255, 255, 1) 70%);
    padding: 0 0 4%;
}

#c_advisor img {
    width: 100%;
}

#c_advisor .con_wrap {
    width: 64%;
    margin: 0 auto 0;
    padding: 0 3%;
}

#c_advisor img.vt {
    margin: -5% 0 0 0;
}

#c_advisor .con_wrap_B {
    width: 60%;
    margin: 0 auto;
    padding: 0 2%;
    position: relative;
    overflow: hidden;
}

#c_advisor .con_wrap_B::after {
	animation: 2s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 50%;/*光のサイズ*/
}
@keyframes shine {
	50% {/*スピード調整 数値が小さいほど早い*/
		left: 100%;
	}
	100% {
		left: 100%;
	}
}

/* ########### 1800px以下 ########### */
@media (max-width: 1800px) {
    #c_advisor .con_wrap {
        width: initial;
        max-width: 1080px;
    }

    #c_advisor .con_wrap_B {
        width: initial;
        max-width: 1080px;
    }
}

/* ########### 768px以下 ########### */
@media (max-width: 768px) {
    #c_advisor {
        padding: 30px 0;
    }
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    #c_advisor .con_wrap {
        padding: 0;
    }

    #c_advisor img.vt {
        margin: -5% 0 0 3%;
    }

    #c_advisor .con_wrap_B {
        padding: 4% 4% 0;
    }
}

/* job_change_stories　転職エピソード（漫画）　
----------------------------------------------- */
#job_change_stories {
    background: #FFEED5;
    padding: 0 0 5%;
    min-height: 800px;
}

#job_change_stories img {
    width: 100%;
}

#job_change_stories .tit_belt {
    background-color: #FFCEB7;
    padding: 10px 20px;
}

#job_change_stories .con_wrap {
    width: 60%;
    margin: 0 auto;
    display: flex;
    /*background-color: rgba(240,202,21,0.3);*/
}

#job_change_stories .jc_stories_tit {
    position: relative;
    flex-basis: 30%;
    /*background-color: rgba(65, 240, 21, 0.3);*/
}

#job_change_stories .jc_stories_tit img {
    position: absolute;
    width: 110%;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

#job_change_stories .tit_belt p {
    flex-basis: 70%;
    font-size: 24px;
    line-height: 1.5;
    color: #930031;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: -1.35rem;
    padding-left: 1.2rem;
}

#job_change_stories .manga_area {
    width: 70%;
    background-color: #fff;
    box-shadow: 0px 0px 20px 20px #fff;
    padding: 10px 30px;
    margin: 40px auto 10px;
    border-radius: 50px;
}

#job_change_stories .manga_area .sp_bubble {
    position: relative;
    width: 90%;
    background-color: #F6921E;
    padding: 10px 60px;
    border-radius: 9999px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#job_change_stories .manga_area .sp_bubble:before {
    content: "";
    position: absolute;
    top: -100px;
    left: 26%;
    margin-left: -50px;
    border: 50px solid transparent;
    border-bottom: 50px solid #F6921E;
}

#job_change_stories .manga_area .sp_bubble p {
    font-size: 43px;
    line-height: 1.25;
    text-align: center;
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#job_change_stories .client {
    width: 55%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10%;
}

#job_change_stories .client .c_box1 {
    flex-basis: 25%;
    /*background-color: rgba(240,202,21,0.3);*/
}

#job_change_stories .client .c_box2 {
    flex-basis: 70%;
    /*background-color: rgba(65, 240, 21, 0.3);*/
}

#job_change_stories .manga_wrap {
    width: 80%;
    padding: 10px 30px;
    margin: 0 auto;
}

#job_change_stories .message_advisor {
    width: 82%;
    margin: -6% auto 0;
    display: flex;
}

#job_change_stories .message_advisor .c_box1 {
    flex-basis: 40%;
}

#job_change_stories .message_advisor .c_box2 {
    position: relative;
    flex-basis: 60%;
    /*background-color: rgba(65, 240, 21, 0.3);*/
}

#job_change_stories .message_advisor p {
    position: absolute;
    inset: 0;
    text-align: center;
    font-size: 36px;
    line-height: 1.25;
    color: #930031;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    z-index: 1;
    top: 30%;
}

#job_change_stories .message_advisor p span.sub {
    font-size: 30px;
    line-height: 1.25;
    color: #D3626B;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#job_change_stories .message_advisor p span.small {
    font-size: 26px;
    line-height: 1.25;
    color: #930031;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#job_change_stories .message_advisor p.outlined {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: #fff;
    -webkit-text-stroke: 10px #fff;
    top: 30%;
}

#job_change_stories .con_wrap_B {
    width: 60%;
    margin: 0 auto;
    padding: 0 3%;
    position: relative;
    overflow: hidden;
}
#job_change_stories .con_wrap_B::after {
	animation: 2s 0s shine linear infinite;
	background: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(255,255,255,.6) 50%, rgba(255, 255, 255, 0) 75%);
	content: '';
	height: 100%;
	left: -100%;
	position: absolute;
	top: 0;
	transform: skewX(-15deg);
	width: 50%;/*光のサイズ*/
}
@keyframes shine {
	50% {/*スピード調整 数値が小さいほど早い*/
		left: 100%;
	}
	100% {
		left: 100%;
	}
}


/* ########### 1800px以上 ########### */
@media (min-width: 1800px) {
    #job_change_stories .tit_belt p {
        font-size: calc(24px + 6 * (100vw - 1800px)/760);
        /*1800px〜2560px間・24px〜30pxまで可変*/
    }

    #job_change_stories .message_advisor p {
        font-size: calc(36px + 16 * (100vw - 1800px)/760);
        /*1800px〜2560px間・36px〜54pxまで可変*/
    }

    #job_change_stories .message_advisor p span.sub {
        font-size: calc(30px + 10 * (100vw - 1800px)/760);
        /*1800px〜2560px間・30px〜40pxまで可変*/
    }

    #job_change_stories .message_advisor p span.small {
        font-size: calc(26px + 10 * (100vw - 1800px)/760);
        /*1800px〜2560px間・26px〜36pxまで可変*/
    }

    #job_change_stories .manga_area .sp_bubble p {
        font-size: calc(43px + 7 * (100vw - 1800px)/760);
        /*1800px〜2560px間・43px〜50pxまで可変*/
    }
}

/* ########### 595px以下 ########### */
@media (min-width: 595px) {
    br.a_terms {
        display: none;
    }
}

/* ########### 1800px以下 ########### */
@media (max-width: 1800px) {
    #job_change_stories .con_wrap {
        width: initial;
        max-width: 1080px;
    }

    #job_change_stories .client {
        width: initial;
        max-width: 600px;
    }

    #job_change_stories .message_advisor {
        width: initial;
        max-width: 900px;
    }

    #job_change_stories .manga_area .sp_bubble {
        width: initial;
        max-width: 1100px;
    }

    #job_change_stories .manga_area .sp_bubble p {
        font-size: calc(20px + 23 * (100vw - 320px)/1480);
        /*1800px〜320px間・43px〜22pxまで可変*/
    }

    #job_change_stories .con_wrap_B {
        width: initial;
        max-width: 1080px;
    }
}

/* ########### 1520px以下 ########### */
@media (max-width: 1520px) {
    #job_change_stories .message_advisor p {
        font-size: calc(19px + 17 * (100vw - 461px)/1059);
        /*1520px〜461px間・36px〜18pxまで可変*/
    }

    #job_change_stories .message_advisor p span.sub {
        font-size: calc(14px + 16 * (100vw - 461px)/1059);
        /*1520px〜461px間・30px〜14pxまで可変*/
    }

    #job_change_stories .message_advisor p span.small {
        font-size: calc(12px + 14 * (100vw - 461px)/1059);
        /*1520px〜461px間・26px〜12pxまで可変*/
    }
}

/* ########### 1200px以下 ########### */
@media (max-width: 1200px) {
    #job_change_stories .manga_area {
        width: 90%;
        padding: 10px 0;
    }

    #job_change_stories .manga_wrap {
        width: initial;
        max-width: 700px;
        padding: 10px;
    }

    #job_change_stories .message_advisor {
        max-width: 700px;
    }
}

/* ########### 1125px以下 ########### */
@media (max-width: 1125px) {
    #job_change_stories p {
        font-size: calc(18px + 6 * (100vw - 320px)/805);
        /*1125px〜320px間・24px〜18pxまで可変*/
    }
}

/* ########### 950px以下 ########### */
@media (max-width: 950px) {
    #job_change_stories .jc_stories_tit {
        flex-basis: 350px;
    }

    #job_change_stories .jc_stories_tit img {
        width: initial;
        max-width: 350px;
    }
}

/* ########### 820px以下 ########### */
@media (max-width: 820px) {
    #job_change_stories .tit_belt p {
        font-size: calc(18px + 6 * (100vw - 320px)/500);
        /*820px〜320px間・24px〜18pxまで可変*/
    }
    #job_change_stories .manga_area .sp_bubble {
        margin: -5% auto 0;
    }

    #job_change_stories .manga_area .sp_bubble:before {
        top: -50px;
        left: 26%;
        margin-left: -25px;
        border: 25px solid transparent;
        border-bottom: 25px solid #F6921E;
    }
}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    #job_change_stories .manga_area {
        margin: 20px auto 10px;
    }

    #job_change_stories {
        padding: 50px 0 5%;
    }

    #job_change_stories .tit_belt {
        padding: 50px 20px 10px;
    }

    #job_change_stories .con_wrap {
        flex-direction: column;
    }

    #job_change_stories .jc_stories_tit {
        flex-basis: 30%;
    }

    #job_change_stories .jc_stories_tit img {
        top: -120px;
    }
}

/* ########### 460px以下 ########### */
@media (max-width: 460px) {
    #job_change_stories .message_advisor {
        margin: -16% auto 0;
        display: block;
    }

    #job_change_stories .message_advisor .c_box1 {
        max-width: 260px;
        margin: 0 auto;
    }

    #job_change_stories .message_advisor .c_box2 {
        padding: 0 0 30% 0;
    }

    #job_change_stories .message_advisor p {
        top: -30%;
        font-size: calc(22px + 4 * (100vw - 320px)/140);
        /*460px〜320px間・26px〜22pxまで可変*/
    }

    #job_change_stories .message_advisor p span.sub {
        font-size: calc(17px + 5 * (100vw - 320px)/140);
        /*460px〜320px間・22px〜17pxまで可変*/
    }

    #job_change_stories .message_advisor p span.small {
        font-size: calc(15px + 5 * (100vw - 320px)/140);
        /*460px〜320px間・20px〜15pxまで可変*/
    }

    #job_change_stories .message_advisor p.outlined {
        top: -30%;
    }

    #job_change_stories .manga_area .sp_bubble {
        padding: 10px 50px;
        margin: 20px auto 0;
    }

    #job_change_stories .manga_area .sp_bubble:before {
        left: 50%;
    }
}

/* ########### 440px以下 ########### */
@media (max-width: 440px) {
    #job_change_stories .client {
        flex-direction: column;
    }

    #job_change_stories .c_box1 img {
        max-width: 300px;
        display: block;
        margin: 0 auto;
    }
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    #job_change_stories .con_wrap_B {
        padding: 0 4% 2%;
    }
}


/* apply　登録もかんたん60秒＊お悩み相談だけでもOK＊
----------------------------------------------- */

#apply {
    position: relative;
    padding: 0 30px;
    background-color: #FFEED5;
}

#apply img {
    width: 100%;
}

#apply .sp_bubble {
    position: relative;
    max-width: 1280px;
    background-color: #A00036;
    padding: 13px 30px;
    border-radius: 9999px;
    margin: -3% auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#apply .sp_bubble:before {
    content: "";
    position: absolute;
    bottom: -100px;
    left: 50%;
    margin-left: -50px;
    border: 50px solid transparent;
    border-top: 50px solid #A00036;
}

#apply .sp_bubble .easy60 {
    flex-basis: 40%;
}


#apply .sp_bubble p {
    flex-basis: 40%;
    font-size: 33px;
    line-height: 1.25;
    color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ########### 1200px以下 ########### */
@media (max-width: 1200px) {
    #apply .sp_bubble p {
        flex-basis: 50%;
        font-size: calc(18px + 15 * (100vw - 320px)/880);
        /*1200px〜320px間・33px〜18pxまで可変*/
    }
}

/* ########### 780px以下 ########### */
@media (max-width: 780px) {
    #apply .sp_bubble {
        flex-direction: column;
        gap: 5px;
    }

    #apply .sp_bubble:before {
        bottom: -50px;
        left: 50%;
        margin-left: -25px;
        border: 25px solid transparent;
        border-top: 25px solid #A00036;
    }
}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    #apply {
        padding: 0 4vw;
    }

}


/* ページ内リンクのアンカー位置設定
----------------------------------------------- */

#anc_apply {
    position: absolute;
    top: -50px;
}



/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    #anc_apply {
        position: absolute;
        top: -30px;
    }

}






/* 応募フォーム部分　および　応募完了ページ　comp.html
----------------------------------------------- */


/* ↓フォームメーラーの1.css内に入っている.contents にbox-shadowが入っているので上書きする
------------------------------------------------------------------------------------*/
.contents {
    box-shadow: none;
    max-width: 720px;
}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {
    .contents {
        padding: 4vw;
    }
}

/* ↑フォームメーラーの1.css内に入っている.contents にbox-shadowが入っているので上書きする
------------------------------------------------------------------------------------ここまで*/


#e_form {
    margin: 0 auto;
    padding: 3% 0;
    max-width: 1200px;
    font-size: 100%;
    background-color: rgba(255, 255, 255, 1);
}

#comp {
    margin: 20px auto 0;
    max-width: 670px;
    font-size: 100%;
    background-color: rgba(255, 255, 255, 1);
}

#comp .read {
    line-height: 2em;
}

#comp .read p {
    color: #B05B77;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#comp .rtn {
    margin: 10px 0 50px;
}

#comp .rtn a {
    color: #A00036;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}

#comp .red_b {
    color: #A00036;
    font-weight: 500;
    font-size: 120%;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 500;
    font-style: normal;
}

#comp .privacy_pol {
    max-width: 700px;
    margin: 50px auto 0;
    padding: 20px 100px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    background-color: #efefef;
}

#comp .privacy_lnk {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
}

#comp .privacy_lnk a {
    text-decoration: underline;
}


#wrapper_ot .titarea {
    max-width: 670px;
    margin: 0 auto;
    padding: 50px 0;
    border-bottom: 1px #A00036 dotted;
    /*background-color: rgba(240,202,21,0.3);*/
}

#wrapper_ot .titarea h1 {
    display: inline-block;
    color: #A00036;
    /*#2e4e6b*/
    font-weight: 500;
    font-size: 210%;
    line-height: 1em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 700;
    font-style: normal;
}



/* ########### 750px以下 ########### */
@media (max-width: 750px) {
    #comp {
        font-size: 90%;
    }

    #comp .read {
        font-size: 96%;
        line-height: 1.4em;
    }

    #comp .privacy_pol {
        margin: 30px auto 0;
        padding: 20px 10%;
    }

    #comp .privacy_lnk {
        padding: 20px 3%;
    }

    #comp .red_b {
        font-size: 115%;
    }

}

/* ########### 360px以下 ########### */
@media (max-width: 360px) {
    #wrapper_ot .titarea {
        padding: 6vw 0;
    }

}


/* お電話でのお問合せ　0120-458-209 受付時間 9：00-18：00 (土日祝除く)
----------------------------------------------- */

#phone_nbr {
    background: #FFD79D;
    background: linear-gradient(90deg, rgba(255, 215, 157, 1) 28%, rgba(244, 169, 153, 1) 100%);
    padding: 10px 20px;
}

#phone_nbr img {
    width: 100%;
}

#phone_nbr .con_wrap {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: rgba(240,202,21,0.3);*/
}

#phone_nbr a {
    padding: 0 20px;
}

#phone_nbr .y-c {
    display: flex;
    justify-content: center;
}

#phone_nbr .pds {
    max-width: 260px;
}

/* ########### 599px以下 ########### */
@media (max-width: 599px) {
    #phone_nbr .con_wrap {
        max-width: 300px;
        flex-direction: column;
    }

    #phone_nbr a {
        padding: 10px 7vw;
    }

    #phone_nbr .pds {
        padding: 0 7vw;
    }

}

/* アイキャッチ　
----------------------------------------------- */

#eyecatching {
    background-color: #FBF4ED;
}

#eyecatching img {
    width: 100%;
}

#eyecatching .con_wrap {
    max-width: 1800px;
    margin: 0 auto;
    background-image: url("../img/bg_ec@1.5x.webp");
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-background-size: cover;
    /*cover か contain*/
    background-size: cover;
}

#eyecatching .con_wrap:before {
    content: "";
    display: block;
    padding-top: 11.4%;
    /* 高さと幅の比を16:10に固定。10/16*100=62.5 */
}

/* ########### 800px以下 ########### */
@media (max-width: 800px) {
    #eyecatching .con_wrap {
        height: 24vw;
    }

}

/* 会社概要　セキュリティポリシーのリンク　
----------------------------------------------- */
#at_link {
    text-align: center;
    padding: 10px 7%;
    background-color: rgba(255, 255, 255, 1.00);
}

#at_link p {
    font-size: 18px;
    font-weight: 400;
}

#at_link a {
    color: #934F66;
}

#at_link a:hover {
    text-decoration: underline;
}

#at_link a span:hover {
    text-decoration: underline;
}

/* ########### 430px以下 ########### */
@media (max-width: 430px) {
    #at_link p {
        font-size: 14px;
    }
}



/* footer
----------------------------------------------- */
/*footer {
    background-color: #fff;
}*/

footer img {
    width: 100%;
    vertical-align: top;
}

footer .outer {
    background: #FFD79D;
    background: linear-gradient(90deg, rgba(255, 215, 157, 1) 28%, rgba(244, 169, 153, 1) 100%);
}

footer .inner {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    /*padding: 150px 0 50px;*/
    height: 125px;
}

footer .name {
    max-width: 300px;
    margin: 0 auto;
    color: #fff;
}

footer .copyright {
    padding: 10px 0 0;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
}


/* ########### 1040px以下 ########### */
@media (max-width: 1040px) {}

/* ########### 600px以下 ########### */
@media (max-width: 600px) {

    footer .inner {
        height: 140px;
    }

    footer .copyright {
        font-size: 80%;
    }

}

/* ########### 425px以下 ########### */
@media (max-width: 425px) {
    footer .inner {
        height: 34vw;
    }
}