@charset "UTF-8";
* {
    font-size: 15px;
	font-family: YuGothic, "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
    line-height: 1.6;
    letter-spacing: 0.03em;
}
body {
	width: 100%;
	position: relative;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
.font01 {
	font-family: "Playfair Display", serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
}
.font02 {
	font-family: "Shippori Mincho", serif;
  	font-weight: 400;
  	font-style: normal;
}
.font02-bold {
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
	font-style: normal;
}
.center {
    text-align: center;
}
.no-bold {
    font-weight: normal;
}
/*=========================*/
/*文字装飾*/
/*=========================*/
/*ドット*/
.text-dot {
    position: relative;
}
.text-dot::after {
    position: absolute;
    top: -5px;
    left: 12px;
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #111;
}
.sarani .text-dot::after {
    top: -6px;
    left: 8px;
}
/*マーカー*/
.yellow-line {
    position: relative;
}
.yellow-line::after {
    position: absolute;
    top: 24px;
    left: 0;
    content: "";
    width: 100%;
    height: 10px;
    background: #FFFF00;
    opacity: 0.5;
}
/*レインボーライン*/
.rainbow-line {
    position: relative;
}
.reason01 .point .rainbow-line::after {
    top: 42px;
}
.rainbow-line::after {
    position: absolute;
    top: 38px;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,#FF7676,#FDF47F,#54D6FC);
}
.wrapper {
    width: 88%;
    margin: 0 auto;
}
/*テキストアニメーション*/
.fv-text-animation01 {
    animation: left-fade 1s ease 0s ;
}
@keyframes left-fade {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
.fv-text-animation02 {
    animation: right-fade 1s ease 0.5s both ;
}
@keyframes right-fade {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }
}
.fv-text-animation03 {
    animation: fade-up 1.5s ease 1s both ;
}
@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
.textAnimation {
	opacity: 0;
	transform: translateY(0px);
	transition: 2s;
}
.textAnimation.show {
	opacity: 1;
	transform: translateY(0px);
}
.titleTextAnimation {
	visibility: hidden;
}
/*=========================*/
.pc-text,
.pc-action-box {
    display: none;
}
.mobile-body {
    z-index: 99;
    width: 375px;
    margin: 0 auto;
    background: #FFF;
    box-shadow: 0px 3px 40px rgba(0, 0, 0, .16);
}
/*=================*/
/*======ボタン======*/
/*=================*/
.fix-btn {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    bottom: 24px;
    z-index: 9999;
}
.btn {
    background: linear-gradient(to bottom, #9DFF79 0%, #34C400 100%);
    border: none;
    box-shadow: 0px 10px 10px rgba(0, 0, 0, .16);
    transition: all 0.3s ease;
}
.btn .btn-link {
    display: block;
    padding: 20px 56px;
    color: #FFF;
    font-size: 16px;
    letter-spacing: 0.1em;
    font-weight: bold;
}
.btn:hover {
    transform: translateY(10px);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, .16);
}
/*アニメーション*/
.btn-anime {
    animation: move-zoom 3s infinite;
 }
 @keyframes move-zoom {
   0% { transform: scale(1,1); }
   5% { transform: scale(1.1,1.1); }
   10% { transform: scale(1,1); }
   15% { transform: scale(1.1,1.1); }
   20% { transform: scale(1,1); }
   25% { transform: scale(1.1,1.1); }
   30% { transform: scale(1,1); }
   100% { transform: scale(1,1); }
 }
/*=================================*/
/*======FV======*/
/*=================================*/
.fv {
    width: 100%;
    height: 294px;
    background-image: url('../image/fv.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}
/*WebP*/
@supports (background-image: url(../image/fv.webp)) {
    .fv {
        background-image: url('../image/fv.webp');
    }
}
.fv .text {
    padding: 5px 12px 3px 15px ;
    font-size: 25px;
    letter-spacing: 0;
    line-height: 1.6;
    font-weight: bold;
    background: #FFF;
}
.fv .shigoto {
    position: absolute;
    left: 28px;
    bottom: 60px;
}
.fv .private {
    position: absolute;
    right: 28px;
    bottom: 34px;
}
.fv-cp {
    position: relative;
    width: 100%;
    margin: -32px auto 0 auto;
    padding: 40px 0 24px 0;
    text-align: center;
    background: linear-gradient(to bottom,rgba(255,255,255,0)0%,#FFF 12%,#FFF 100%);
    z-index: 100;
}
.fv-cp .text {
    font-size: 32px;
    line-height: 1.4;
    font-weight: bold;
}
/*=================================*/
/*====美容師/中途スタイリスト募集=====*/
/*=================================*/
.background-gradation {
    z-index: 0;
    position: relative;
    background: radial-gradient(farthest-corner at 0 300px,
    #FFFFD6 0%,
    #FFFFD6 30%,
    rgba(255,253,240,0.2) 80%,
    rgba(255,253,240,0) 100%
    );
}
.background-gradation::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(300px at 250px 450px,
    #FFD6D6 0%,
    #FFD6D6 30%,
    rgba(255,214,214,0.2) 80%,
    rgba(255,214,214,0) 100%
    );
    content: "";
}
.background-gradation::after {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(300px at 375px 200px,
    #D3FFFF 0%,
    #D3FFFF 30%,
    rgba(211,255,255,0.2) 80%,
    rgba(211,255,255,0) 100%
    );
    content: "";
}
.fv-action-area {
   padding: 32px 0;
}
.fv-action-area .logo {
   margin-bottom: 8px;
}
.fv-action-area .logo img {
    width: 100px;
}
.fv-action-title {
    margin-bottom: 32px;
}
.fv-action-text-box {
    padding: 0 0 16px 23px;
}
.fv-action-text-box p {
    margin-bottom: 16px;
    line-height: 1.5;
 }
.fv-action-text-box .yellow-line {
    font-size: 24px;

}
/*=================================*/
/*====現在スタイリストとして働いてる...=====*/
/*=================================*/
.worries {
    padding-top: 100px;
}
.worries .anata {
    font-size: 26px;
    line-height: 3;
}
.worries-title-wrapper {
    position: relative;
    margin: 100px auto;
    width: 330px;
    height: 243px;
    border-radius: 50%;
    background: radial-gradient(at 50% 50%, #9A9A9A 0,#C1C1C1 30%,#FFF 70%,#FFF 100%);
}
.worries-title {
    font-size: 22px;
    line-height: 2;
    color: #FFF;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.worries-item-box {
    background: linear-gradient(to bottom, #FFF 0%, #9A9A9A 100%);
}
.worries-item-box .item {
    width: 80%;
    margin: 0 auto 32px auto;
    padding: 24px 16px;
    background: #FFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    line-height: 1.6;
}
/*=================================*/
/*====ASOBIはこの悩みを解消する...=====*/
/*=================================*/
.background-gradation03 {
    z-index: 0;
    position: relative;
    background: radial-gradient(farthest-corner at 0 300px,
    #FFFFD6 0%,
    #FFFFD6 30%,
    rgba(255,253,240,0.2) 80%,
    rgba(255,253,240,0) 100%
    );
}
.background-gradation03::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(300px at 250px 320px,
    #FFD6D6 0%,
    #FFD6D6 20%,
    rgba(255,214,214,0.2) 80%,
    rgba(255,214,214,0) 100%
    );
    content: "";
}
.background-gradation03::after {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(300px at 375px 200px,
    #D3FFFF 0%,
    #D3FFFF 30%,
    rgba(211,255,255,0.2) 80%,
    rgba(211,255,255,0) 100%
    );
    content: "";
}
.solution {
    padding: 74px 0 75px 0;
}
.solution .text{
   font-size: 22px;
   line-height: 2;
}
/*=================================*/
/*====ASOBIで働く5つの理由=====*/
/*=================================*/
.reason05-title {
    padding: 0px 0 16px 0;
    background: #111;
    color: #FFF;
    font-size: 20px;
    vertical-align: bottom;
}
.reason05-title .five {
    font-size: 45px;
}
.reason01 {
    margin-bottom: 60px;
}
/*タイトル*/
.reason .main-title{
    margin: 16px auto 32px  auto;
    border-bottom: 1px solid #111 ;
    font-size: 20px;
}
.reason .title-number {
    font-size: 50px;
    margin-right: 16px;
}
.reason01 .main-title-wrapper {
    margin-bottom: 50px;
 }
/*吹き出し*/
.balloon-item {
    margin-bottom: 32px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.balloon-item02 {
    margin-bottom: 50px;
}
.reason01 .balloon {
    padding: 18px 12px;
    text-align: center;
}
.balloon {
    position: relative;
    margin: 0 16px 0 0;
    padding: 12px;
    width: 60%;
    background: #FFF;
    border: 1px solid #111;
}
.balloon::before {
    content: "";
    position: absolute;
    bottom: 16px;
    right: -6.5%;
    width: 14px;
    height: 16px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #111;
    box-sizing: border-box;
    border: 0 solid;
}
.balloon::after {
    content: "";
    position: absolute;
    bottom: 16px;
    right: -5.5%;
    width: 14px;
    height: 16px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #FFF;
    box-sizing: border-box;
    border: 0 solid;
}
.balloon-img {
    width: 74px;
}
/* なりたい美容師像って… */
.naritai {
    padding: 32px 0;
    background: #AAAAAA;
    color: #FFF;
    font-size: 20px;
}
/*=================================*/
/*====ASOBIなら…=====*/
/*=================================*/
.asobi-nara {
    padding: 50px 0;
}
.asobi-nara .title {
    font-size: 20px;
    
}
.background-gradation02 {
    z-index: 0;
    position: relative;
    background: radial-gradient(farthest-corner at 0 50px,
    #FFFFD6 0%,
    #FFFFD6 30%,
    rgba(255,253,240,0.2) 80%,
    rgba(255,253,240,0) 100%
    );
}
.background-gradation02::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(200px at 170px 200px,
    #FFD6D6 0%,
    #FFD6D6 30%,
    rgba(255,214,214,0.2) 80%,
    rgba(255,214,214,0) 100%
    );
    content: "";
}
.background-gradation02::after {
    z-index: -2;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(200px at 375px 20px,
    #D3FFFF 0%,
    #D3FFFF 30%,
    rgba(211,255,255,0.2) 80%,
    rgba(211,255,255,0) 100%
    );
    content: "";
}
/* 各分野のスペシャリストが... */
.specialist {
    margin: 50px 0 40px 0;
    font-size: 20px;
}
.reason01 .point {
    margin-bottom: 8px;
    font-size: 20px;
}
.reason01 .point .like,
.reason01 .point .kiwame {
    font-size: 25px;
}
/*=================================*/
/*===ASOBIでプライベートも...ボタン=====*/
/*=================================*/
.action-btn-area-wrapper {
    z-index: 0;
    position: relative;
    background: radial-gradient(farthest-corner at 0 250px,
    #FFFFF6 0%,
    #FFFFF6 30%,
    rgba(255,255,246,0.2) 80%,
    rgba(255,255,246,0) 100%
    );
}
.action-btn-area-wrapper::before {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(300px at 350px 100px,
    #EDFFD7 0%,
    #EDFFD7 30%,
    rgba(237,255,215,0.2) 80%,
    rgba(237,255,215,0) 100%
    );
    content: "";
}
.action-btn-area {
    width: 88%;
    margin: 0 auto;
    padding: 50px 0;
}
.action-btn-area-text {
    font-size: 17px;
    line-height: 2;
}
.action-btn-area .btn {
   margin-top: 32px;
}
/*=================================*/
/*===早期デビューに向けて教育アカデミー制度がある=====*/
/*=================================*/
.reason02 .main-title,
.reason04 .main-title {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    line-height: 1.6;
}
.reason02 .title-number,
.reason04 .title-number {
    display: block;
    line-height: 1.6;
}
.reason02-img {
    margin-bottom: 32px;
}
.reason02 .asobi-nara {
    margin-top: 32px;
}
.reason02 .point01 {
    margin: 50px 0;
    line-height: 2.6;
}
.reason02 .point02 {
    margin-bottom: 50px;
}
.reason02 .point {
    font-size: 20px;
}
.reason02 .point .saitan,
.reason02 .point .jisin,
.reason02 .point .huan {
    font-size: 24px;
}
/*=================================*/
/*===しっかり1時間休憩が取れる=====*/
/*=================================*/
.nantekotoha {
    margin: 50px 0;
    font-size: 20px;
}
.reason03 .point01 {
    margin: 50px auto 24px auto;
}
.reason03 .reason03-img,
.reason03 .point02 {
    margin-bottom: 24px;
}
.reason03 .point03 {
    margin-bottom: 50px;
    font-size: 13px;
    color: #838383;
}
/*=================================*/
/*シフトが選べて土日休み・有給 が取りやすい=*/
/*=================================*/
.reason04 .reason04-img {
    margin-bottom: 24px;
}
.reason04 .point01 {
    margin-bottom: 24px;
}
.reason04 .point01 .digital {
    font-size: 20px;
}
.reason04 .point02 {
    margin-bottom: 50px;
    font-size: 20px;
}
.reason04 .asobi-nara {
    margin-bottom: 50px;
}
/*=================================*/
/*アシスタントなのに高収入*/
/*=================================*/
.reason05 .point01 {
    font-size: 40px;
}
.reason05 .point02 {
    width: 66%;
    margin: 0 auto 50px auto;
    text-align: right;
}
.reason05 .asobi-nara {
    margin-bottom: 50px;
}
.reason05 .point03 {
    font-size: 20px;
    margin-bottom: 50px;
}
/*=================================*/
/*ASOBIの1日の流れ*/
/*=================================*/
.day-flow {
    padding-bottom: 50px;
}
.day-flow-box {
    padding-top: 32px;
    background: #111;
    color: #FFF;
}
.day-flow-box .main-title {
    margin-bottom: 32px;
    padding-bottom: 8px;
    font-size: 22px;
    border-bottom: 1px solid #FFF;
}
.day-flow-box .text {
    padding-bottom: 16px;
}
.day-flow-box .kyuukei {
    margin-bottom: 16px;
    padding-top: 16px;
    border-top: 1px dotted #FFF;
    border-bottom: 1px dotted #FFF;
}
.day-flow .syuuryou {
    margin-bottom: 50px;
    padding: 20px 0 57px 0;
    position: relative;
    z-index: 0;
    color: #FFF;
}
.day-flow .syuuryou::after {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    background: #111;
}
.day-flow .nomo {
    margin-bottom: 50px;
}
.day-flow .ok {
    margin: 0 auto 50px auto;
    position: relative;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(at 50% 50%, #C4FFFF 0,#DAFFFE 40%,#FFF 70%,#FFF 100%);
}
.day-flow .ok-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 22px;
    text-align: center;
    line-height: 1.8;
}
.day-flow .point {
    margin-top: 50px;
    font-size: 20px;
}
/*=================================*/
/*===スタッフの声=====*/
/*=================================*/
.staff-voice {
    width: 88%;
    margin: 0 auto;
    padding: 50px 0;
}
.staff-voice .main-title {
    margin-bottom: 32px;
    padding-bottom: 8px;
    font-size: 22px;
    border-bottom: 1px solid #111;
}
.stylist-img {
    margin: 50px auto 32px auto;
}
.stylist-name {
    margin-bottom: 16px;
    font-size: 20px;
}
.staff-voice .category {
    margin-bottom: 32px;
}
/*=================================*/
/*===アコーディオン=====*/
/*=================================*/
.accordion .toggle {
    display: none;
}
.accordion .option {
    position: relative;
    border-bottom: 1px solid #D1D1D1;
}
.accordion .option:first-child {
    border-top: 1px solid #D1D1D1;
}
.accordion .title,
.accordion .content-box {
    display: flex;
    flex-wrap: nowrap;
}
.accordion .title {
    align-items: center;
}
.accordion .title{
    padding: 32px 0 32px 0; 
    cursor: pointer;
}
.accordion .content-box {
    padding: 0px 0 32px 0; 
}
.accordion .title,
.accordion .content {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.3s;
}
.accordion .content {
    max-height: 0;
    overflow: hidden;
}
.accordion .toggle:checked + .title + .content {
    max-height: 500px;
    transition: all 1.5s;
}
/*Q、A*/
.accordion .q-a {
    font-size: 24px;
}
.accordion .text-content,
.accordion .answer {
    padding: 0 24px 0 16px;
}
/*＋*/
.accordion .title::before,
.accordion .title::after {
    position: absolute;
    top: 50px;
    right: 0;
    content: "";
    width: 13px;
    height: 1px;
    background: #111;
    transition: all 0.3s;
}
.title::after {
    transform: rotate(90deg);
}
.accordion .toggle:checked + .title::after {
    transform: rotate(180deg);
}
/*=================================*/
/*===応募要項====*/
/*=================================*/
.job-description-wrapper {
    background: #111;
    color: #FFF;
}
.job-description {
    width: 88%;
    margin: 0 auto;
    padding: 50px 0;
}
.job-description .main-title {
    margin-bottom: 32px;
    padding-bottom: 8px;
    font-size: 22px;
    border-bottom: 1px solid #FFF;
}
.job-item .title {
    margin-bottom: 8px;
}
.job-item .text {
    margin-bottom: 32px;
}
/*=================================*/
/*===応募から採用までの流れ====*/
/*=================================*/
.flow {
    width: 88%;
    margin: 0 auto;
    padding: 50px 0;
}
.flow .main-title {
    margin-bottom: 32px;
    padding-bottom: 8px;
    font-size: 22px;
    border-bottom: 1px solid #111;
}
.flow-item-box {
    width: 80%;
    margin: 0 auto;;
}
.flow-item {
    display: flex;
    align-items: center;
}
.flow-number {
    margin-right: 20px;
    font-size: 32px;
    line-height: 1.6;
}
.flow-text {
    padding-top: 5px;
}
/*===メッセージ====*/
.message {
    width: 88%;
    margin: 0 auto;
    padding: 50px 0;
}
.message .text {
    margin-bottom: 32px;
}
/*===フッター====*/
.footer {
    padding: 24px 0;
    background: #111;
}
.footer .copy {
    padding-bottom: 100px;
    font-size: 11px;
    color: #FFF;
}
.footer .copy a {
    padding-bottom: 5px;
    border-bottom: 1px solid #FFF;
    color: #FFF;
}
/*スマホ*/
@media screen and (min-width: 300px) {
* {
    font-size: 14px;
    line-height: 2;
}
.mobile-body {
    width: 100%;
}
/*fv*/
.fv .shigoto {
    left: 12px;
}
.fv .private {
    right: 12px;
}
.fv .text {
    font-size: 23px;
}
.fv-cp .text {
    font-size: 28px;
}
.fv-action-title {
    margin-bottom: 12px;
}
.fv-text-box .text {
    font-size: 22px;
}
.fv-action-text-box {
    padding: 0 0 16px 16px;
}
.fv-action-text-box p {
    font-size: 14px;
    margin-bottom: 0;
}
.fv-action-text-box .yellow-line {
    font-size: 20px;
}
/*パーツ*/
.yellow-line::after {
    top: 21px;
    height: 7px;
}
.btn .btn-link {
    padding: 16px 24px;
}
/*悩み*/
.worries .anata {
    font-size: 24px;
}
.worries-title-wrapper {
    width: 280px;
}
.worries-title {
    font-size: 19px;
}
/*解決*/
.solution .text {
    font-size: 18px;
}
/*main*/
.reason05-title .five {
    font-size: 34px;
}
/*01*/
.reason .main-title {
    margin: 18px 0 32px 0;
}
.reason .title-number {
    margin-right: 10px;
    font-size: 40px;
}
/*吹き出し*/
.balloon::before,
.balloon::after {
    width: 12px;
    height: 14px;
}
/*20px*/
.reason05-title,
.reason .main-title,
.naritai,
.specialist,
.reason01 .point,
.reason02 .point,
.nantekotoha,
.reason04 .point02,
.reason05 .point03,
.day-flow .point  {
    font-size: 18px;
}
.reason01 .point .like,
.reason01 .point .kiwame {
    font-size: 24px;
}
/*03*/
.reason03 .main-title {
    font-size: 17px;
}
/*05*/
.reason05 .point01 {
    font-size: 35px;
}
/*ボタンエリア*/
.action-btn-area-text {
    font-size: 15px;
}
.action-btn-area .btn {
    margin-top: 24px;
}
/*1日の流れ*/
.day-flow-box .main-title {
    font-size: 18px;
}
.staff-voice .main-title {
    font-size: 18px;
}
.stylist-name {
    font-size: 18px;
}
.job-description .main-title {
    font-size: 18px;
}
.flow .main-title {
    font-size: 18px;
}
}
@media screen and (min-width: 360px) {
* {
    font-size: 15px;
}
.fv .shigoto {
    left: 26px;
}
.fv .private {
    right: 26px;
}
.fv .text {
    font-size: 25px;
}
.fv-cp .text {
    font-size: 32px;
}
.fv-action-text-box {
    padding: 0 0 16px 23px;
}
.fv-action-text-box p {
    font-size: 15px;
}
.fv-action-text-box .yellow-line {
    font-size: 24px;
}
/*パーツ*/
.yellow-line::after {
    top: 28px;
    height: 10px;
}
.btn .btn-link {
    padding: 20px 56px;
}
/*お悩み*/
.worries .anata {
    font-size: 26px;
}
.worries-title-wrapper {
    width: 330px;
}
.worries-title {
    font-size: 22px;
}
/*解決*/
.solution .text {
    font-size: 22px;
}
/*main*/
.reason05-title .five {
    font-size: 45px;
}
/*01*/
.reason .main-title {
    margin: 16px 0 32px 0;
}
.reason .title-number {
    font-size: 50px;
}
/*吹き出し*/
.balloon::before,
.balloon::after {
    width: 14px;
    height: 16px;
}
/*20px*/
.reason05-title,
.reason .main-title,
.naritai,
.specialist,
.reason01 .point,
.reason02 .point,
.nantekotoha,
.reason04 .point02,
.reason05 .point03,
.day-flow .point  {
    font-size: 20px;
}
.reason01 .point .like,
.reason01 .point .kiwame {
    font-size: 25px;
}
/*03*/
.reason03 .main-title {
    font-size: 19px;
}
/*05*/
.reason05 .point01 {
    font-size: 40px;
}
/*ボタンエリア*/
.action-btn-area-text {
    font-size: 17px;
}
.action-btn-area .btn {
    margin-top: 32px;
}
/*1日の流れ*/
.day-flow-box .main-title {
    font-size: 22px;
}
.staff-voice .main-title {
    font-size: 22px;
}
.stylist-name {
    font-size: 20px;
}
.job-description .main-title {
    font-size: 22px;
}
.flow .main-title {
    font-size: 22px;
}
}
@media screen and (min-width: 390px) {
.fv .text {
    font-size: 27px;
}
.fv-action-text-box .yellow-line {
    font-size: 26px;
}
/*20px*/
.reason05-title,
.reason .main-title,
.naritai,
.specialist,
.reason01 .point,
.reason02 .point,
.nantekotoha,
.reason04 .point02,
.reason05 .point03,
.day-flow .point  {
    font-size: 22px;
}
.asobi-nara .title {
    font-size: 22px;
}
.reason01 .point .like,
.reason01 .point .kiwame {
    font-size: 28px;
}
.reason01 .point .rainbow-line::after {
    top: 48px;
}
.reason02 .point .saitan,
.reason02 .point .jisin,
.reason02 .point .huan {
    font-size: 28px;
}
.reason02 .point .rainbow-line::after {
    top: 48px;
}
.reason03 .main-title {
    font-size: 21px;
}
.reason04 .point01 .digital {
    font-size: 24px;
}
.action-btn-area-text {
    font-size: 19px;
}
.day-flow .ok {
    width: 300px;
    height: 300px;
}
.day-flow .ok-text {
    font-size: 24px;
}
}
@media screen and (min-width: 700px) {
.fix-btn,
.mobile-body {
    width: 400px;
}
.pc-background {
    width: 100%;
    background: linear-gradient(90deg,#FFE2E2,#FFFCD6,#C1F1FF);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
}
@media screen and (min-width: 1000px) {
.fix-btn {
    display: none;
}
.pc-text,
.pc-action-box {
    display: block;
}
.pc-text {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 3%;
}
.asobi-hair-salon {
    text-align: center;
    font-size: 8vw;
    letter-spacing: 0.05em;
    line-height: 1.1;
    color: #FF0D0D;
    opacity: 0.1;
}
.pc-action-box {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    right: 5%;
    text-align: center;
}
.pc-action-box .logo img {
    width: 150px;
    margin-bottom: 16px;
}
.pc-action-box .text {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 16px;
}
.pc-action-box .btn .btn-link {
    padding: 16px 24px;
}
.footer .copy {
    padding-bottom: 0px;
}
}
@media screen and (min-width: 1100px) {
.asobi-hair-salon {
    font-size: 8.5vw;
}
}
@media screen and (min-width: 1300px) {
.pc-action-box {
    right: 6%;
}
.pc-action-box .btn .btn-link {
    padding: 20px 56px;
}
}
/*PC*/
@media screen and (min-width: 1920px) {
.pc-action-box {
    right: 10%;
}
}